@rio-cloud/uikit-mcp 1.1.5 → 1.1.7

package/dist/docs/start/changelog.md

@@ -2,8 +2,58 @@
 
 *Category:* Getting started
 *Section:* Welcome
-*Source:* https://uikit.developers.rio.cloud/#start/changelog
-*Captured:* 2026-02-03T14:03:57.607Z
+*Source:* https://uikit.developers.rio.cloud/#/start/changelog
+*Captured:* 2026-02-23T15:48:00.053Z
+
+## Version 2.2.0 (2026-02-23)
+
+- **Fixed** Map utils Fixed getRoutePolylines to return the correct HERE map Polyline list. Also corrected the return types for getGroups, getMarkers, and getRoutePolylines to use the proper map object types.
+
+- **Fixed** RadialBarCharts Fixed RadialBarCharts responsive container to remove the fixed initial dimension, allowing charts to take the available width of the parent container.
+
+- **Fixed** Select Prevent double box-shadow on Select and Multiselect inside input groups with icon addons.
+
+- **Fixed** labels Fixed label heights for condensed filled labels to align with default condensed labels.
+
+- **Fixed** Map settings Fixed the map settings options animation so dropdowns/panels now fade in and slide up when opened.
+
+- **Update** MapTypeSettings Added visibleMapTypes for map-type visibility control via a single prop. The enableNightMap prop is now deprecated. Please control night visibility via visibleMapTypes instead.
+
+- **Update** TimePicker Add a new disabled prop to disable the TimePicker input and its control buttons. If you previously set disabled via inputProps, you can now use the dedicated component prop instead. The TimePicker now also calls onChange when the input is cleared. Added a new dropdown prop for selecting times from a dropdown, and a minuteOffset prop to define the dropdown interval and button step size.
+
+- **Update** Button Added support for rendering Button as an anchor element via the new as prop. Use as='a' together with a required href to render a link button while keeping native button type values for button elements.
+
+- **Update** Notification Improved notification message readability by balancing line wraps in notification text content.
+
+- **Update** Switch Added a new autoMinWidth prop. When minWidth is not set and autoMinWidth is true, the switch width uses the longer one of enabledText and disabledText.
+
+- **New** CircularProgress Added new CircularProgress component.
+
+- **New** Tracker Added a new Tracker component for compact status visualization with tooltip support, automatic block compression, and optional collapsing when the minimum block width is reached.
+
+- **New** RadioCardGroup Added a new RadioCardGroup component for custom card-style radio selection, including inline, stacked, and stacked-horizontal variants with both options-based and compound-item APIs.
+
+- **New** Pills condensed Added a nav-pills-filled-condensed version of filled nav-pills for use next to form elements like buttons and selects. This keeps heights aligned and provides a clearer way to indicate different views. Prefer these over the toggle button group for view switching.
+
+- **New** Shadows Added configurable hover-shadow-* utility classes with built-in transition support and a new shadow-focused utility class for a focused shadow preset.
+
+- **New** useSearchHighlight / SearchHighlightText Added the useSearchHighlight hook and SearchHighlightText component for native CSS highlight-based search results.
+
+- **New** useCookies Added a new useCookies hook for setting, deleting, and checking browser cookies.
+
+- **New** useRioCookieConsent Added a dedicated useRioCookieConsent hook for parsing the RIO cookie_settings consent cookie and returning typed RioCookieConsentInfo.
+
+- **New** useUrlState, routeUtils Added the new useUrlState hook and updated routeUtils for simpler state-in-URL parsing/serialization with native URLSearchParams and typed URL config support.
+
+- **New** classNames, mergeClassNameOverrides Added new utility helpers for CSS class handling: classNames for composing optional class tokens and mergeClassNameOverrides for overriding utility-class groups while keeping unrelated defaults.
+
+- **New** ellipsis-middle Added new ellipsis-middle utility class for truncating text in the middle while keeping the suffix visible.
+
+- **New** TextTruncateMiddle Added a new TextTruncateMiddle component for rendering middle-truncated text with a configurable suffix length.
+
+- **New** New icons rioglyph- trailer-standard rioglyph- trailer-tipping rioglyph- trailer-liquid rioglyph- palette-empty rioglyph- box rioglyph- box-open rioglyph- mesh-box
+
+- **Guideline** State in URL guideline Added a dedicated guideline page for deep linking and URL state, including best practices for what to store in URLs and pushState vs replaceState usage.
 
 ## Version 2.1.0 (2026-01-13)
 
@@ -89,6 +139,8 @@
 
 - **New** icons Added new rioglyph style for disabled icons with a line
 
+- **New** useIncomingPostMessages and usePostMessageSender New tooling for sending and receiving postMessage events. We recommend utilizing "action-style" events if you control both ends of the communication. This simply means to send event objects with a type property and an optional payload - very similar to Redux actions. To receive messages, the new useIncomingPostMessages can be used. It allows a declarative style of registering action-style event handlers in your application. You can still use the "simple" event handler variants, when you're interested in receiving events that don't follow the action-style approach. The usePostMessageSender hook provides easy access to methods used to send message events either to a dedicated destination or to "broadcast" events to all iframes. Note that the existing usePostMessage hook will be deprecated in a future release.
+
 - **Icons** New icons rioglyph- ai rioglyph- arrows-collapse rioglyph- arrows-combine rioglyph- arrows-expand rioglyph- arrows-horizontal rioglyph- arrows-split rioglyph- assigned rioglyph- axis-x rioglyph- axis-y rioglyph- axis-z rioglyph- bar-chart-box rioglyph- battery-charging rioglyph- brain rioglyph- branch-horizontal rioglyph- branch-remove rioglyph- branch-vertical rioglyph- broadcast rioglyph- bulb rioglyph- chip rioglyph- cloud-progress rioglyph- coffee rioglyph- compass rioglyph- crown rioglyph- discount-badge rioglyph- emergency-stop rioglyph- eye-closed rioglyph- eye-open rioglyph- filter-reset rioglyph- get rioglyph- give rioglyph- globe-alt rioglyph- hierarchy rioglyph- history rioglyph- insert rioglyph- leafs rioglyph- magic-wand rioglyph- note rioglyph- progression rioglyph- satellite-radar rioglyph- stack-add rioglyph- stack-iso rioglyph- stats-high rioglyph- stats-line-dots rioglyph- stats-low rioglyph- stats-medium rioglyph- time-incomplete rioglyph- unassigned rioglyph- unavailable rioglyph- variable rioglyph- workflow-step rioglyph- workflow Updated icons rioglyph- arrow-down rioglyph- arrow-left rioglyph- arrow-right rioglyph- arrow-up rioglyph- battery-level-empty rioglyph- battery-level-full rioglyph- battery-level-low rioglyph- cloud-download rioglyph- cloud-not-saved rioglyph- cloud-upload rioglyph- compare rioglyph- component-custom-recurrent rioglyph- component-custom rioglyph- cost-efficency rioglyph- delivery-completed rioglyph- delivery-error rioglyph- delivery-late rioglyph- delivery-on-track rioglyph- delivery-warning rioglyph- delivery rioglyph- error-sign rioglyph- flash rioglyph- info rioglyph- maintenance-components rioglyph- merge rioglyph- missing rioglyph- off rioglyph- refresh rioglyph- repeat rioglyph- resize-full rioglyph- resize-horizontal rioglyph- resize-small rioglyph- resize-vertical rioglyph- save rioglyph- trash rioglyph- volume rioglyph- workshop rioglyph- wrench Removed icons rioglyph- video-off rioglyph- wifi-off
 
 ## Version 1.13.2 (2025-11-19)

package/dist/docs/start/goodtoknow.md

@@ -2,8 +2,8 @@
 
 *Category:* Getting started
 *Section:* Guidelines
-*Source:* https://uikit.developers.rio.cloud/#start/goodtoknow
-*Captured:* 2026-02-03T14:03:57.404Z
+*Source:* https://uikit.developers.rio.cloud/#/start/goodtoknow
+*Captured:* 2026-02-23T15:47:59.856Z
 
 ## Good to know
 

package/dist/docs/start/guidelines/color-combinations.md

@@ -2,8 +2,8 @@
 
 *Category:* Getting started
 *Section:* Guidelines
-*Source:* https://uikit.developers.rio.cloud/#start/guidelines/color-combinations
-*Captured:* 2026-02-03T14:04:00.095Z
+*Source:* https://uikit.developers.rio.cloud/#/start/guidelines/color-combinations
+*Captured:* 2026-02-23T15:48:00.658Z
 
 For accessibility purposes, aim for a good color contrast between the foreground color (e.g. text, links, etc.) and the background color. This contrast ensures people with moderately low vision can tell the colors apart and see your content.
 

package/dist/docs/start/guidelines/custom-css.md

@@ -2,8 +2,8 @@
 
 *Category:* Getting started
 *Section:* Guidelines
-*Source:* https://uikit.developers.rio.cloud/#start/guidelines/custom-css
-*Captured:* 2026-02-03T14:04:00.874Z
+*Source:* https://uikit.developers.rio.cloud/#/start/guidelines/custom-css
+*Captured:* 2026-02-23T15:48:00.611Z
 
 Maintaining CSS will become harder over time due to various reasons like growing amount of styles, old and unknown overwrites, exchange of Team members etc.
 

package/dist/docs/start/guidelines/custom-rioglyph.md

@@ -2,8 +2,8 @@
 
 *Category:* Getting started
 *Section:* Guidelines
-*Source:* https://uikit.developers.rio.cloud/#start/guidelines/custom-rioglyph
-*Captured:* 2026-02-03T14:03:59.677Z
+*Source:* https://uikit.developers.rio.cloud/#/start/guidelines/custom-rioglyph
+*Captured:* 2026-02-23T15:48:00.642Z
 
 To use a custom Rioglyph icon, there are two different approaches:
 

package/dist/docs/start/guidelines/formatting.md

@@ -2,8 +2,8 @@
 
 *Category:* Getting started
 *Section:* Guidelines
-*Source:* https://uikit.developers.rio.cloud/#start/guidelines/formatting
-*Captured:* 2026-02-03T14:04:03.107Z
+*Source:* https://uikit.developers.rio.cloud/#/start/guidelines/formatting
+*Captured:* 2026-02-23T15:48:02.249Z
 
 Having a common date formatting guide is crucial to ensure consistency, clarity, and accuracy in documentation, making it easier to understand and interpret dates correctly across different contexts.
 

package/dist/docs/start/guidelines/iframe.md

@@ -2,8 +2,8 @@
 
 *Category:* Getting started
 *Section:* Guidelines
-*Source:* https://uikit.developers.rio.cloud/#start/guidelines/iframe
-*Captured:* 2026-02-03T14:04:01.697Z
+*Source:* https://uikit.developers.rio.cloud/#/start/guidelines/iframe
+*Captured:* 2026-02-23T15:48:02.289Z
 
 Web applications can embed smaller SPAs as widgets using an <iframe> to enrich it's functionality provided by other services and teams. This page explains what the parent application (host) and the child application (widget) must do to ensure correct styling, sizing, and communication.
 
@@ -121,7 +121,7 @@ export default IFrameWidgetExample;
 ```html
 <div class="display-flex justify-content-center">
     <div class="iframe-wrapper width-400">
-        <iframe title="iframe" src="https://menu.rio.cloud" id="iFrameResizer0" scrolling="no" style="overflow: hidden;">
+        <iframe title="iframe" src="https://menu.rio.cloud" id="iFrameResizer0" scrolling="no" style="overflow: hidden; height: 250px;">
         </iframe>
     </div>
 </div>

package/dist/docs/start/guidelines/obfuscate-data.md

@@ -2,8 +2,8 @@
 
 *Category:* Getting started
 *Section:* Guidelines
-*Source:* https://uikit.developers.rio.cloud/#start/guidelines/obfuscate-data
-*Captured:* 2026-02-03T14:04:01.592Z
+*Source:* https://uikit.developers.rio.cloud/#/start/guidelines/obfuscate-data
+*Captured:* 2026-02-23T15:48:01.449Z
 
 This demo demonstrates how sensitive data marked with the data-pii="visible" attribute can be obfuscated directly in the frontend.
 

package/dist/docs/start/guidelines/print-css.md

@@ -2,8 +2,8 @@
 
 *Category:* Getting started
 *Section:* Guidelines
-*Source:* https://uikit.developers.rio.cloud/#start/guidelines/print-css
-*Captured:* 2026-02-03T14:04:02.076Z
+*Source:* https://uikit.developers.rio.cloud/#/start/guidelines/print-css
+*Captured:* 2026-02-23T15:48:01.470Z
 
 The UIKIT supports simple print stylings in order to have printable content. Those print styles are supposed to do basic printing and should not replace server side PDF`s.
 

package/dist/docs/start/guidelines/spinner.md

@@ -2,8 +2,8 @@
 
 *Category:* Getting started
 *Section:* Guidelines
-*Source:* https://uikit.developers.rio.cloud/#start/guidelines/spinner
-*Captured:* 2026-02-03T14:04:04.033Z
+*Source:* https://uikit.developers.rio.cloud/#/start/guidelines/spinner
+*Captured:* 2026-02-23T15:48:03.338Z
 
 There are various approaches when it comes to loading data and showing the user the different stages of the loading process.
 
@@ -303,16 +303,16 @@ Loading...Loading...Loading...
 <div class="padding-top-10 padding-bottom-10">
     <div class="panel panel-default">
         <div class="panel-heading">
-            <svg aria-labelledby="clcmrd-aria" role="img" height="14" width="100%" class="ContentLoader max-width-300 ">
-                <title id="clcmrd-aria">Loading...</title>
-                <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#clcmrd-diff)" style="fill: url(&quot;#clcmrd-animated-diff&quot;);">
+            <svg aria-labelledby=":r0:-aria" role="img" height="14" width="100%" class="ContentLoader max-width-300 ">
+                <title id=":r0:-aria">Loading...</title>
+                <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:r0:-diff)" style="fill: url(&quot;#:r0:-animated-diff&quot;);">
                 </rect>
                 <defs>
-                    <clipPath id="clcmrd-diff">
+                    <clipPath id=":r0:-diff">
                         <rect width="100%" height="100%" rx="3" ry="3">
                         </rect>
                     </clipPath>
-                    <linearGradient id="clcmrd-animated-diff" gradientTransform="translate(-2 0)">
+                    <linearGradient id=":r0:-animated-diff" gradientTransform="translate(-2 0)">
                         <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
                         </stop>
                         <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -326,16 +326,16 @@ Loading...Loading...Loading...
             </svg>
         </div>
         <div class="panel-body">
-            <svg aria-labelledby="y12wb4-aria" role="img" height="14" width="100%" class="ContentLoader  ">
-                <title id="y12wb4-aria">Loading...</title>
-                <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#y12wb4-diff)" style="fill: url(&quot;#y12wb4-animated-diff&quot;);">
+            <svg aria-labelledby=":r1:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                <title id=":r1:-aria">Loading...</title>
+                <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:r1:-diff)" style="fill: url(&quot;#:r1:-animated-diff&quot;);">
                 </rect>
                 <defs>
-                    <clipPath id="y12wb4-diff">
+                    <clipPath id=":r1:-diff">
                         <rect width="100%" height="100%" rx="3" ry="3">
                         </rect>
                     </clipPath>
-                    <linearGradient id="y12wb4-animated-diff" gradientTransform="translate(-2 0)">
+                    <linearGradient id=":r1:-animated-diff" gradientTransform="translate(-2 0)">
                         <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
                         </stop>
                         <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -347,16 +347,16 @@ Loading...Loading...Loading...
                     </linearGradient>
                 </defs>
             </svg>
-            <svg aria-labelledby="gmbctxj-aria" role="img" height="14" width="100%" class="ContentLoader  ">
-                <title id="gmbctxj-aria">Loading...</title>
-                <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#gmbctxj-diff)" style="fill: url(&quot;#gmbctxj-animated-diff&quot;);">
+            <svg aria-labelledby=":r2:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                <title id=":r2:-aria">Loading...</title>
+                <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:r2:-diff)" style="fill: url(&quot;#:r2:-animated-diff&quot;);">
                 </rect>
                 <defs>
-                    <clipPath id="gmbctxj-diff">
+                    <clipPath id=":r2:-diff">
                         <rect width="100%" height="100%" rx="3" ry="3">
                         </rect>
                     </clipPath>
-                    <linearGradient id="gmbctxj-animated-diff" gradientTransform="translate(-2 0)">
+                    <linearGradient id=":r2:-animated-diff" gradientTransform="translate(-2 0)">
                         <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
                         </stop>
                         <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -368,16 +368,16 @@ Loading...Loading...Loading...
                     </linearGradient>
                 </defs>
             </svg>
-            <svg aria-labelledby="7m2t3a-aria" role="img" height="14" width="100%" class="ContentLoader width-60pct ">
-                <title id="7m2t3a-aria">Loading...</title>
-                <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#7m2t3a-diff)" style="fill: url(&quot;#7m2t3a-animated-diff&quot;);">
+            <svg aria-labelledby=":r3:-aria" role="img" height="14" width="100%" class="ContentLoader width-60pct ">
+                <title id=":r3:-aria">Loading...</title>
+                <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:r3:-diff)" style="fill: url(&quot;#:r3:-animated-diff&quot;);">
                 </rect>
                 <defs>
-                    <clipPath id="7m2t3a-diff">
+                    <clipPath id=":r3:-diff">
                         <rect width="100%" height="100%" rx="3" ry="3">
                         </rect>
                     </clipPath>
-                    <linearGradient id="7m2t3a-animated-diff" gradientTransform="translate(-2 0)">
+                    <linearGradient id=":r3:-animated-diff" gradientTransform="translate(-2 0)">
                         <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
                         </stop>
                         <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -425,16 +425,16 @@ Loading...Loading...Loading...Loading...
     <tbody>
         <tr>
             <td>
-                <svg aria-labelledby="guyulou-aria" role="img" height="14" width="100%" class="ContentLoader  ">
-                    <title id="guyulou-aria">Loading...</title>
-                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#guyulou-diff)" style="fill: url(&quot;#guyulou-animated-diff&quot;);">
+                <svg aria-labelledby=":r4:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id=":r4:-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:r4:-diff)" style="fill: url(&quot;#:r4:-animated-diff&quot;);">
                     </rect>
                     <defs>
-                        <clipPath id="guyulou-diff">
+                        <clipPath id=":r4:-diff">
                             <rect width="100%" height="100%" rx="3" ry="3">
                             </rect>
                         </clipPath>
-                        <linearGradient id="guyulou-animated-diff" gradientTransform="translate(-2 0)">
+                        <linearGradient id=":r4:-animated-diff" gradientTransform="translate(-2 0)">
                             <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
                             </stop>
                             <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -448,16 +448,16 @@ Loading...Loading...Loading...Loading...
                 </svg>
             </td>
             <td>
-                <svg aria-labelledby="o0w876a-aria" role="img" height="14" width="100%" class="ContentLoader  ">
-                    <title id="o0w876a-aria">Loading...</title>
-                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#o0w876a-diff)" style="fill: url(&quot;#o0w876a-animated-diff&quot;);">
+                <svg aria-labelledby=":r5:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id=":r5:-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:r5:-diff)" style="fill: url(&quot;#:r5:-animated-diff&quot;);">
                     </rect>
                     <defs>
-                        <clipPath id="o0w876a-diff">
+                        <clipPath id=":r5:-diff">
                             <rect width="100%" height="100%" rx="3" ry="3">
                             </rect>
                         </clipPath>
-                        <linearGradient id="o0w876a-animated-diff" gradientTransform="translate(-2 0)">
+                        <linearGradient id=":r5:-animated-diff" gradientTransform="translate(-2 0)">
                             <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
                             </stop>
                             <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -471,16 +471,16 @@ Loading...Loading...Loading...Loading...
                 </svg>
             </td>
             <td>
-                <svg aria-labelledby="pfxer28-aria" role="img" height="14" width="100%" class="ContentLoader  ">
-                    <title id="pfxer28-aria">Loading...</title>
-                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#pfxer28-diff)" style="fill: url(&quot;#pfxer28-animated-diff&quot;);">
+                <svg aria-labelledby=":r6:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id=":r6:-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:r6:-diff)" style="fill: url(&quot;#:r6:-animated-diff&quot;);">
                     </rect>
                     <defs>
-                        <clipPath id="pfxer28-diff">
+                        <clipPath id=":r6:-diff">
                             <rect width="100%" height="100%" rx="3" ry="3">
                             </rect>
                         </clipPath>
-                        <linearGradient id="pfxer28-animated-diff" gradientTransform="translate(-2 0)">
+                        <linearGradient id=":r6:-animated-diff" gradientTransform="translate(-2 0)">
                             <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
                             </stop>
                             <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -494,16 +494,16 @@ Loading...Loading...Loading...Loading...
                 </svg>
             </td>
             <td>
-                <svg aria-labelledby="gy3ut1x-aria" role="img" height="14" width="100%" class="ContentLoader  ">
-                    <title id="gy3ut1x-aria">Loading...</title>
-                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#gy3ut1x-diff)" style="fill: url(&quot;#gy3ut1x-animated-diff&quot;);">
+                <svg aria-labelledby=":r7:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id=":r7:-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:r7:-diff)" style="fill: url(&quot;#:r7:-animated-diff&quot;);">
                     </rect>
                     <defs>
-                        <clipPath id="gy3ut1x-diff">
+                        <clipPath id=":r7:-diff">
                             <rect width="100%" height="100%" rx="3" ry="3">
                             </rect>
                         </clipPath>
-                        <linearGradient id="gy3ut1x-animated-diff" gradientTransform="translate(-2 0)">
+                        <linearGradient id=":r7:-animated-diff" gradientTransform="translate(-2 0)">
                             <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
                             </stop>
                             <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -519,16 +519,16 @@ Loading...Loading...Loading...Loading...
         </tr>
         <tr>
             <td>
-                <svg aria-labelledby="l45rij8-aria" role="img" height="14" width="100%" class="ContentLoader  ">
-                    <title id="l45rij8-aria">Loading...</title>
-                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#l45rij8-diff)" style="fill: url(&quot;#l45rij8-animated-diff&quot;);">
+                <svg aria-labelledby=":r8:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id=":r8:-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:r8:-diff)" style="fill: url(&quot;#:r8:-animated-diff&quot;);">
                     </rect>
                     <defs>
-                        <clipPath id="l45rij8-diff">
+                        <clipPath id=":r8:-diff">
                             <rect width="100%" height="100%" rx="3" ry="3">
                             </rect>
                         </clipPath>
-                        <linearGradient id="l45rij8-animated-diff" gradientTransform="translate(-2 0)">
+                        <linearGradient id=":r8:-animated-diff" gradientTransform="translate(-2 0)">
                             <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
                             </stop>
                             <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -542,16 +542,16 @@ Loading...Loading...Loading...Loading...
                 </svg>
             </td>
             <td>
-                <svg aria-labelledby="c9los0g-aria" role="img" height="14" width="100%" class="ContentLoader  ">
-                    <title id="c9los0g-aria">Loading...</title>
-                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#c9los0g-diff)" style="fill: url(&quot;#c9los0g-animated-diff&quot;);">
+                <svg aria-labelledby=":r9:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id=":r9:-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:r9:-diff)" style="fill: url(&quot;#:r9:-animated-diff&quot;);">
                     </rect>
                     <defs>
-                        <clipPath id="c9los0g-diff">
+                        <clipPath id=":r9:-diff">
                             <rect width="100%" height="100%" rx="3" ry="3">
                             </rect>
                         </clipPath>
-                        <linearGradient id="c9los0g-animated-diff" gradientTransform="translate(-2 0)">
+                        <linearGradient id=":r9:-animated-diff" gradientTransform="translate(-2 0)">
                             <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
                             </stop>
                             <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -565,16 +565,16 @@ Loading...Loading...Loading...Loading...
                 </svg>
             </td>
             <td>
-                <svg aria-labelledby="dbrj7ik-aria" role="img" height="14" width="100%" class="ContentLoader  ">
-                    <title id="dbrj7ik-aria">Loading...</title>
-                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#dbrj7ik-diff)" style="fill: url(&quot;#dbrj7ik-animated-diff&quot;);">
+                <svg aria-labelledby=":ra:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id=":ra:-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:ra:-diff)" style="fill: url(&quot;#:ra:-animated-diff&quot;);">
                     </rect>
                     <defs>
-                        <clipPath id="dbrj7ik-diff">
+                        <clipPath id=":ra:-diff">
                             <rect width="100%" height="100%" rx="3" ry="3">
                             </rect>
                         </clipPath>
-                        <linearGradient id="dbrj7ik-animated-diff" gradientTransform="translate(-2 0)">
+                        <linearGradient id=":ra:-animated-diff" gradientTransform="translate(-2 0)">
                             <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
                             </stop>
                             <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -588,16 +588,16 @@ Loading...Loading...Loading...Loading...
                 </svg>
             </td>
             <td>
-                <svg aria-labelledby="pu3sxi9-aria" role="img" height="14" width="100%" class="ContentLoader  ">
-                    <title id="pu3sxi9-aria">Loading...</title>
-                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#pu3sxi9-diff)" style="fill: url(&quot;#pu3sxi9-animated-diff&quot;);">
+                <svg aria-labelledby=":rb:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id=":rb:-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:rb:-diff)" style="fill: url(&quot;#:rb:-animated-diff&quot;);">
                     </rect>
                     <defs>
-                        <clipPath id="pu3sxi9-diff">
+                        <clipPath id=":rb:-diff">
                             <rect width="100%" height="100%" rx="3" ry="3">
                             </rect>
                         </clipPath>
-                        <linearGradient id="pu3sxi9-animated-diff" gradientTransform="translate(-2 0)">
+                        <linearGradient id=":rb:-animated-diff" gradientTransform="translate(-2 0)">
                             <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
                             </stop>
                             <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -613,16 +613,16 @@ Loading...Loading...Loading...Loading...
         </tr>
         <tr>
             <td>
-                <svg aria-labelledby="lsjczv-aria" role="img" height="14" width="100%" class="ContentLoader  ">
-                    <title id="lsjczv-aria">Loading...</title>
-                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#lsjczv-diff)" style="fill: url(&quot;#lsjczv-animated-diff&quot;);">
+                <svg aria-labelledby=":rc:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id=":rc:-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:rc:-diff)" style="fill: url(&quot;#:rc:-animated-diff&quot;);">
                     </rect>
                     <defs>
-                        <clipPath id="lsjczv-diff">
+                        <clipPath id=":rc:-diff">
                             <rect width="100%" height="100%" rx="3" ry="3">
                             </rect>
                         </clipPath>
-                        <linearGradient id="lsjczv-animated-diff" gradientTransform="translate(-2 0)">
+                        <linearGradient id=":rc:-animated-diff" gradientTransform="translate(-2 0)">
                             <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
                             </stop>
                             <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -636,16 +636,16 @@ Loading...Loading...Loading...Loading...
                 </svg>
             </td>
             <td>
-                <svg aria-labelledby="ge6ajb-aria" role="img" height="14" width="100%" class="ContentLoader  ">
-                    <title id="ge6ajb-aria">Loading...</title>
-                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#ge6ajb-diff)" style="fill: url(&quot;#ge6ajb-animated-diff&quot;);">
+                <svg aria-labelledby=":rd:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id=":rd:-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:rd:-diff)" style="fill: url(&quot;#:rd:-animated-diff&quot;);">
                     </rect>
                     <defs>
-                        <clipPath id="ge6ajb-diff">
+                        <clipPath id=":rd:-diff">
                             <rect width="100%" height="100%" rx="3" ry="3">
                             </rect>
                         </clipPath>
-                        <linearGradient id="ge6ajb-animated-diff" gradientTransform="translate(-2 0)">
+                        <linearGradient id=":rd:-animated-diff" gradientTransform="translate(-2 0)">
                             <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
                             </stop>
                             <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -659,16 +659,16 @@ Loading...Loading...Loading...Loading...
                 </svg>
             </td>
             <td>
-                <svg aria-labelledby="0jra0xk-aria" role="img" height="14" width="100%" class="ContentLoader  ">
-                    <title id="0jra0xk-aria">Loading...</title>
-                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#0jra0xk-diff)" style="fill: url(&quot;#0jra0xk-animated-diff&quot;);">
+                <svg aria-labelledby=":re:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id=":re:-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:re:-diff)" style="fill: url(&quot;#:re:-animated-diff&quot;);">
                     </rect>
                     <defs>
-                        <clipPath id="0jra0xk-diff">
+                        <clipPath id=":re:-diff">
                             <rect width="100%" height="100%" rx="3" ry="3">
                             </rect>
                         </clipPath>
-                        <linearGradient id="0jra0xk-animated-diff" gradientTransform="translate(-2 0)">
+                        <linearGradient id=":re:-animated-diff" gradientTransform="translate(-2 0)">
                             <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
                             </stop>
                             <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
@@ -682,16 +682,16 @@ Loading...Loading...Loading...Loading...
                 </svg>
             </td>
             <td>
-                <svg aria-labelledby="etef0ce-aria" role="img" height="14" width="100%" class="ContentLoader  ">
-                    <title id="etef0ce-aria">Loading...</title>
-                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#etef0ce-diff)" style="fill: url(&quot;#etef0ce-animated-diff&quot;);">
+                <svg aria-labelledby=":rf:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id=":rf:-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:rf:-diff)" style="fill: url(&quot;#:rf:-animated-diff&quot;);">
                     </rect>
                     <defs>
-                        <clipPath id="etef0ce-diff">
+                        <clipPath id=":rf:-diff">
                             <rect width="100%" height="100%" rx="3" ry="3">
                             </rect>
                         </clipPath>
-                        <linearGradient id="etef0ce-animated-diff" gradientTransform="translate(-2 0)">
+                        <linearGradient id=":rf:-animated-diff" gradientTransform="translate(-2 0)">
                             <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
                             </stop>
                             <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">