feat(DynamicValueHandler): truncate middle of key instead of the end

[stravo1]

In deeply nested dynamic values, truncating end of the word gives very little context (if not none). Dynamic Value keys can be truncated at the middle to preserve context (similar to how file managers truncate filenames/paths), we also show full key on hover.

Before:

After:

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 57.62%. Comparing base (e27292c) to head (47603df).
⚠️ Report is 8 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop     #592   +/-   ##
========================================
  Coverage    57.62%   57.62%           
========================================
  Files           29       29           
  Lines         3193     3193           
========================================
  Hits          1840     1840           
  Misses        1353     1353           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[surajshetty3416]

MiddleTruncate instead (better defines functionality)?

And support 'as' prop?

<MiddleTruncate as='code' text='Looooooooooong-text-of-an-image.jpg'>