@vector-im/compound-web 9.1.0 → 9.2.0

package/dist/style.css

@@ -537,7 +537,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._avatar_7h2br_8 {
+._avatar_va14e_8 {
   display: inline-block;
   box-sizing: border-box;
 
@@ -550,14 +550,14 @@ Please see LICENSE files in the repository root for full details.
   font-family: var(--cpd-font-family-sans);
   font-weight: bold;
   overflow: hidden;
-  user-select: none;
+  user-select: none; /* stylelint-disable-line defensive-css/no-user-select-none */
 
   /* Set a background color to help with visual consistency when displaying
    * avatars with a translucent background */
   background: var(--cpd-color-bg-canvas-default);
 }
 
-button._avatar_7h2br_8 {
+button._avatar_va14e_8 {
   /**
    * The avatar can be a button element, we need to reset its style
    */
@@ -567,25 +567,25 @@ button._avatar_7h2br_8 {
   cursor: pointer;
 }
 
-button._avatar_7h2br_8:disabled {
+button._avatar_va14e_8:disabled {
   cursor: not-allowed;
 }
 
-._avatar_7h2br_8,
-._image_7h2br_43 {
+._avatar_va14e_8,
+._image_va14e_43 {
   aspect-ratio: 1 / 1;
   inline-size: var(--cpd-avatar-size);
   border-radius: var(--cpd-avatar-radius);
 }
 
-._image_7h2br_43 {
+._image_va14e_43 {
   object-fit: cover;
   overflow: hidden;
 }
 
 /* Additional selector for button to raise selector above button.avatar */
-button._avatar-imageless_7h2br_55,
-._avatar-imageless_7h2br_55 {
+button._avatar-imageless_va14e_55,
+._avatar-imageless_va14e_55 {
   /* In the future we'd prefer to pass the HEX code as the data attr
      and use `attr(data-color)` to avoid the style declaration from below
      but this is currently not supported in all browsers */
@@ -596,41 +596,41 @@ button._avatar-imageless_7h2br_55,
   border: 1px solid var(--cpd-avatar-bg);
 }
 
-._avatar_7h2br_8[data-color] {
+._avatar_va14e_8[data-color] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-1);
   --cpd-avatar-color: var(--cpd-color-text-decorative-1);
 }
 
-._avatar_7h2br_8[data-color="2"] {
+._avatar_va14e_8[data-color="2"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-2);
   --cpd-avatar-color: var(--cpd-color-text-decorative-2);
 }
 
-._avatar_7h2br_8[data-color="3"] {
+._avatar_va14e_8[data-color="3"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-3);
   --cpd-avatar-color: var(--cpd-color-text-decorative-3);
 }
 
-._avatar_7h2br_8[data-color="4"] {
+._avatar_va14e_8[data-color="4"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-4);
   --cpd-avatar-color: var(--cpd-color-text-decorative-4);
 }
 
-._avatar_7h2br_8[data-color="5"] {
+._avatar_va14e_8[data-color="5"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-5);
   --cpd-avatar-color: var(--cpd-color-text-decorative-5);
 }
 
-._avatar_7h2br_8[data-color="6"] {
+._avatar_va14e_8[data-color="6"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-6);
   --cpd-avatar-color: var(--cpd-color-text-decorative-6);
 }
 
-._avatar_7h2br_8[data-type="round"] {
+._avatar_va14e_8[data-type="round"] {
   --cpd-avatar-radius: 50%;
 }
 
-._avatar_7h2br_8[data-type="square"] {
+._avatar_va14e_8[data-type="square"] {
   --cpd-avatar-radius: 25%;
 }
 
@@ -638,26 +638,26 @@ button._avatar-imageless_7h2br_55,
  * Stacked avatars 
  */
 
-._stacked-avatars_7h2br_109::after {
+._stacked-avatars_va14e_109::after {
   content: "";
   display: table;
   clear: both;
 }
 
-._stacked-avatars_7h2br_109 ._avatar_7h2br_8 {
+._stacked-avatars_va14e_109 ._avatar_va14e_8 {
   float: inline-start;
 }
 
-._stacked-avatars_7h2br_109 ._avatar_7h2br_8:not(:last-child) {
+._stacked-avatars_va14e_109 ._avatar_va14e_8:not(:last-child) {
   /* injected in the document from AvatarStack.tsx */
   clip-path: url("#cpdAvatarClip");
 }
 
-._stacked-avatars_7h2br_109 > *:not(:first-child) {
+._stacked-avatars_va14e_109 > *:not(:first-child) {
   margin-inline-start: calc(var(--cpd-avatar-size) * -0.4);
 }
 
-._clip-path_7h2br_128 {
+._clip-path_va14e_128 {
   /* In theory the SVG is invisible, but we still need to ensure it doesn't
   affect the page's layout or otherwise make an appearance */
   position: fixed;
@@ -1117,7 +1117,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._container_gn3xc_8 {
+._container_z8zo1_8 {
   display: flex;
   flex-direction: column;
 
@@ -1143,7 +1143,9 @@ Please see LICENSE files in the repository root for full details.
     gap: var(--cpd-space-4x);
 
     svg {
-      transition: transform 0.1s linear;
+      @media (prefers-reduced-motion: no-preference) {
+        transition: transform 0.1s linear;
+      }
     }
   }
 
@@ -1156,11 +1158,11 @@ Please see LICENSE files in the repository root for full details.
     }
   }
 
-  button._placeholder_gn3xc_47 {
+  button._placeholder_z8zo1_49 {
     color: var(--cpd-color-text-secondary);
   }
 
-  ._border_gn3xc_51 {
+  ._border_z8zo1_53 {
     display: none;
     border-inline-start: 1px solid var(--cpd-color-border-interactive-secondary);
     border-inline-end: 1px solid var(--cpd-color-border-interactive-secondary);
@@ -1169,7 +1171,7 @@ Please see LICENSE files in the repository root for full details.
     box-sizing: border-box;
   }
 
-  ._content_gn3xc_60 {
+  ._content_z8zo1_62 {
     display: none;
     position: relative;
 
@@ -1217,24 +1219,24 @@ Please see LICENSE files in the repository root for full details.
     }
   }
 
-  ._open_gn3xc_108 {
+  ._open_z8zo1_110 {
     display: block;
   }
 
-  ._help_gn3xc_112 {
+  ._help_z8zo1_114 {
     font: var(--cpd-font-body-sm-regular);
     color: var(--cpd-color-text-secondary);
   }
 
-  ._error_gn3xc_117 {
+  ._error_z8zo1_119 {
     font: var(--cpd-font-body-sm-medium);
     color: var(--cpd-color-text-critical-primary);
     display: flex;
     gap: var(--cpd-space-2x);
   }
 
-  ._error_gn3xc_117,
-  ._help_gn3xc_112 {
+  ._error_z8zo1_119,
+  ._help_z8zo1_114 {
     margin-block-start: var(--cpd-space-2x);
   }
 
@@ -1319,7 +1321,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._control_sqdq4_10 {
+._control_d83jn_10 {
   border: 1px solid var(--cpd-color-border-interactive-primary);
   background: var(--cpd-color-bg-canvas-default);
   border-radius: 0.5rem;
@@ -1335,7 +1337,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 @media (hover) {
-  ._control_sqdq4_10:hover {
+  ._control_d83jn_10:hover {
     border-color: var(--cpd-color-border-interactive-hovered);
 
     /** TODO: have the shadow in the design tokens */
@@ -1343,20 +1345,21 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._control_sqdq4_10:active {
+._control_d83jn_10:active {
   border-color: var(--cpd-color-border-interactive-hovered);
 }
 
-._control_sqdq4_10:focus {
+/* stylelint-disable-next-line defensive-css/require-focus-visible */
+._control_d83jn_10:focus {
   outline: 2px solid var(--cpd-color-border-focused);
   border-color: transparent;
 }
 
-._control_sqdq4_10[data-invalid] {
+._control_d83jn_10[data-invalid] {
   border-color: var(--cpd-color-text-critical-primary);
 }
 
-._control_sqdq4_10:disabled {
+._control_d83jn_10:disabled {
   box-shadow: none;
   background: var(--cpd-color-bg-canvas-disabled);
   border-color: var(--cpd-color-border-disabled);
@@ -1364,14 +1367,14 @@ Please see LICENSE files in the repository root for full details.
   cursor: not-allowed;
 }
 
-._control_sqdq4_10[readonly] {
+._control_d83jn_10[readonly] {
   box-shadow: none;
   background: var(--cpd-color-bg-subtle-secondary);
   border-color: var(--cpd-color-bg-subtle-secondary);
   color: var(--cpd-color-text-secondary);
 }
 
-._control_sqdq4_10._enable-ligatures_sqdq4_62 {
+._control_d83jn_10._enable-ligatures_d83jn_63 {
   font-feature-settings: var(--cpd-font-feature-settings);
 }
 /*
@@ -1644,7 +1647,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-@keyframes _spin_11k6c_1 {
+@keyframes _spin_1855a_1 {
   from {
     transform: rotateZ(0deg);
   }
@@ -1654,14 +1657,17 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._icon_11k6c_18 {
+._icon_1855a_18 {
   color: var(--cpd-color-icon-secondary);
   display: inline-flex;
   justify-content: center;
   align-items: center;
   inline-size: 100%;
   block-size: 100%;
-  animation: 1s linear _spin_11k6c_1 infinite;
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: 1s linear _spin_1855a_1 infinite;
+  }
 }
 /*
 Copyright 2025 New Vector Ltd.
@@ -1672,7 +1678,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._container_43om7_10 {
+._container_17qhw_10 {
   --gap: var(--cpd-space-3x);
   --digit-size: var(--cpd-space-10x);
   --digit-height: var(--cpd-space-12x);
@@ -1687,7 +1693,7 @@ Please see LICENSE files in the repository root for full details.
   position: relative;
 }
 
-._control_43om7_25 {
+._control_17qhw_25 {
   all: unset;
 
   /** TODO: semantic token */
@@ -1711,7 +1717,7 @@ Please see LICENSE files in the repository root for full details.
   margin-inline-end: calc(-1 * (var(--cpd-space-10x) + var(--cpd-space-3x)));
 }
 
-._digit_43om7_49 {
+._digit_17qhw_49 {
   box-sizing: border-box;
   inline-size: var(--cpd-space-10x);
   block-size: var(--cpd-space-12x);
@@ -1722,7 +1728,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 @media (hover) {
-  ._control_43om7_25:hover ~ ._digit_43om7_49 {
+  ._control_17qhw_25:hover ~ ._digit_17qhw_49 {
     border-color: var(--cpd-color-border-interactive-hovered);
 
     /** TODO: have the shadow in the design tokens */
@@ -1730,37 +1736,38 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._control_43om7_25:disabled {
+._control_17qhw_25:disabled {
   color: var(--cpd-color-text-disabled);
   cursor: not-allowed;
 }
 
-._control_43om7_25:disabled ~ ._digit_43om7_49 {
+._control_17qhw_25:disabled ~ ._digit_17qhw_49 {
   box-shadow: none;
   background: var(--cpd-color-bg-canvas-disabled);
   border-color: var(--cpd-color-border-disabled);
 }
 
-._control_43om7_25[readonly] {
+._control_17qhw_25[readonly] {
   color: var(--cpd-color-text-secondary);
 }
 
-._control_43om7_25[readonly] ~ ._digit_43om7_49 {
+._control_17qhw_25[readonly] ~ ._digit_17qhw_49 {
   box-shadow: none;
   background: var(--cpd-color-bg-subtle-secondary);
   border-color: var(--cpd-color-bg-subtle-secondary);
 }
 
-._control_43om7_25[data-invalid] ~ ._digit_43om7_49 {
+._control_17qhw_25[data-invalid] ~ ._digit_17qhw_49 {
   border-color: var(--cpd-color-text-critical-primary);
 }
 
-._control_43om7_25:focus ~ ._digit_43om7_49:not([data-filled]) {
+/* stylelint-disable-next-line defensive-css/require-focus-visible */
+._control_17qhw_25:focus ~ ._digit_17qhw_49:not([data-filled]) {
   outline: 2px solid var(--cpd-color-border-focused);
   border-color: transparent;
 }
 
-._digit_43om7_49[data-selected] {
+._digit_17qhw_49[data-selected] {
   border-color: var(--cpd-color-border-focused);
   background-color: var(--cpd-color-bg-info-subtle);
 }
@@ -2353,7 +2360,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._menu_1w1u7_8 {
+._menu_1kl3y_8 {
   border-radius: var(--cpd-space-3x);
   background: var(--cpd-color-bg-canvas-default);
 
@@ -2375,40 +2382,42 @@ Please see LICENSE files in the repository root for full details.
   --cpd-separator-inset: var(--cpd-space-4x);
 }
 
-@keyframes _slide-in_1w1u7_1 {
+@keyframes _slide-in_1kl3y_1 {
   from {
     opacity: 0;
     transform: translate(0, var(--cpd-space-3x));
   }
 }
 
-._menu_1w1u7_8[data-state="open"] {
-  animation: _slide-in_1w1u7_1 180ms;
+._menu_1kl3y_8[data-state="open"] {
+  /* Disable linter, we have a reduced motion style below */
+  /* stylelint-disable-next-line defensive-css/require-prefers-reduced-motion */
+  animation: _slide-in_1kl3y_1 180ms;
 }
 
-@keyframes _fade-in_1w1u7_1 {
+@keyframes _fade-in_1kl3y_1 {
   from {
     opacity: 0;
   }
 }
 
-@keyframes _fade-out_1w1u7_1 {
+@keyframes _fade-out_1kl3y_1 {
   to {
     opacity: 0;
   }
 }
 
 @media (prefers-reduced-motion) {
-  ._menu_1w1u7_8[data-state="open"] {
-    animation-name: _fade-in_1w1u7_1;
+  ._menu_1kl3y_8[data-state="open"] {
+    animation-name: _fade-in_1kl3y_1;
   }
 
-  ._menu_1w1u7_8[data-state="closed"] {
-    animation-name: _fade-out_1w1u7_1;
+  ._menu_1kl3y_8[data-state="closed"] {
+    animation-name: _fade-out_1kl3y_1;
   }
 }
 
-._title_1w1u7_63 {
+._title_1kl3y_65 {
   /** Override MenuTitle margin top **/
   margin-block-start: 0 !important;
 }
@@ -2433,13 +2442,13 @@ Please see LICENSE files in the repository root for full details.
  * Please see LICENSE files in the repository root for full details.
  */
 
-._nav-bar_1e9qm_8 {
+._nav-bar_pmal2_8 {
   border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
   margin: var(--cpd-space-6x) 0;
   padding: 0;
 }
 
-._nav-bar-items_1e9qm_14 {
+._nav-bar-items_pmal2_14 {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
@@ -2450,13 +2459,13 @@ Please see LICENSE files in the repository root for full details.
   margin: 0;
 }
 
-._nav-tab_1e9qm_25 {
+._nav-tab_pmal2_25 {
   padding: var(--cpd-space-4x) 0;
   position: relative;
 }
 
 /* Underline effect */
-._nav-tab_1e9qm_25::before {
+._nav-tab_pmal2_25::before {
   content: "";
   position: absolute;
   inset-block-end: 0;
@@ -2464,15 +2473,18 @@ Please see LICENSE files in the repository root for full details.
   block-size: 0;
   border-radius: var(--cpd-radius-pill-effect) var(--cpd-radius-pill-effect) 0 0;
   background-color: var(--cpd-color-bg-action-primary-rest);
-  transition: height 0.1s ease-in-out;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: height 0.1s ease-in-out;
+  }
 }
 
-._nav-tab_1e9qm_25[data-current]::before {
+._nav-tab_pmal2_25[data-current]::before {
   /* This is not exactly right: designs says 3px, but there are no variables for that */
   block-size: var(--cpd-border-width-4);
 }
 
-._nav-item_1e9qm_47 {
+._nav-item_pmal2_50 {
   padding-block: var(--cpd-space-1x);
   padding-inline: var(--cpd-space-2x);
   border-radius: var(--cpd-radius-pill-effect);
@@ -2491,27 +2503,27 @@ Please see LICENSE files in the repository root for full details.
 }
 
 @media (hover) {
-  ._nav-item_1e9qm_47:not([disabled]):hover {
+  ._nav-item_pmal2_50:not([disabled]):hover {
     color: var(--cpd-color-text-primary);
     background-color: var(--cpd-color-bg-subtle-secondary);
   }
 }
 
-._nav-item_1e9qm_47:focus-visible {
+._nav-item_pmal2_50:focus-visible {
   outline: var(--cpd-color-border-focused) var(--cpd-border-width-2) solid;
 }
 
-._nav-item_1e9qm_47:not([disabled]):active {
+._nav-item_pmal2_50:not([disabled]):active {
   color: var(--cpd-color-text-primary);
   background-color: var(--cpd-color-bg-subtle-primary);
 }
 
-._nav-item_1e9qm_47[aria-current],
-._nav-item_1e9qm_47[aria-selected="true"] {
+._nav-item_pmal2_50[aria-current],
+._nav-item_pmal2_50[aria-selected="true"] {
   color: var(--cpd-color-text-primary);
 }
 
-._nav-item_1e9qm_47[disabled] {
+._nav-item_pmal2_50[disabled] {
   cursor: not-allowed;
 
   /* Enable pointer events for svgs even with fill=none */
@@ -2520,18 +2532,59 @@ Please see LICENSE files in the repository root for full details.
 }
 
 @media (forced-colors: active) {
-  ._nav-tab_1e9qm_25[data-current]::before {
+  ._nav-tab_pmal2_25[data-current]::before {
     outline: 1px solid transparent;
   }
 }
 /*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+._header_14jk4_8 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--cpd-space-2x);
+  max-inline-size: 480px;
+}
+
+._header_14jk4_8[data-size="md"] ._icon_14jk4_16 {
+  margin-block-end: var(--cpd-space-2x);
+}
+
+._header_14jk4_8[data-size="lg"] ._icon_14jk4_16 {
+  margin-block-end: var(--cpd-space-4x);
+}
+
+._header_14jk4_8 > h1 {
+  margin: 0;
+  text-align: center;
+}
+
+._header_14jk4_8 > p {
+  color: var(--cpd-color-text-secondary);
+  text-align: center;
+  margin: 0;
+}
+
+._header_14jk4_8[data-size="md"] > p {
+  font: var(--cpd-font-body-md-regular);
+}
+
+._header_14jk4_8[dat-size="lg"] > p {
+  font: var(--cpd-font-body-lg-regular);
+}
+/*
 Copyright 2024 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._progress-bar_1l6pa_8 {
+._progress-bar_1kvi5_8 {
   position: relative;
   background-color: var(--cpd-color-gray-200);
   border: 1px solid var(--cpd-color-gray-400);
@@ -2547,7 +2600,7 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._progress-bar-container_1l6pa_24 {
+._progress-bar-container_1kvi5_24 {
   display: flex;
   flex-direction: column;
   gap: var(--cpd-space-1x);
@@ -2576,16 +2629,20 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._progress-bar-label_1l6pa_53 {
+._progress-bar-label_1kvi5_53 {
   font: var(--cpd-font-body-sm-medium);
   letter-spacing: var(--cpd-font-letter-spacing-body-sm);
   color: var(--cpd-progress-bar-main);
 }
 
-._progress-bar-indicator_1l6pa_59 {
+._progress-bar-indicator_1kvi5_59 {
   position: absolute;
   inset: 0;
-  transition: transform 0.2s ease-in-out;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform 0.2s ease-in-out;
+  }
+
   background-image: linear-gradient(
     135deg,
     var(--cpd-progress-bar-muted) 0%,
@@ -2604,7 +2661,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 @media (forced-colors: active) {
-  ._progress-bar-indicator_1l6pa_59 {
+  ._progress-bar-indicator_1kvi5_59 {
     outline: 1px solid transparent;
   }
 }
@@ -2676,7 +2733,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._search_b2pjl_8 {
+._search_1lktl_8 {
   border: 1px solid var(--cpd-color-border-interactive-secondary);
   border-radius: 9999px;
   block-size: 36px;
@@ -2692,35 +2749,35 @@ Please see LICENSE files in the repository root for full details.
 }
 
 @media (hover) {
-  ._search_b2pjl_8:hover {
+  ._search_1lktl_8:hover {
     border-color: var(--cpd-color-border-interactive-hovered);
   }
 }
 
-._search_b2pjl_8:active {
+._search_1lktl_8:active {
   border-color: var(--cpd-color-border-interactive-hovered);
 }
 
-._search_b2pjl_8:focus-within {
+._search_1lktl_8:focus-within {
   border-color: currentcolor;
 }
 
-._icon_b2pjl_37 {
+._icon_1lktl_37 {
   color: var(--cpd-color-icon-secondary);
   flex-shrink: 0;
 }
 
 @media (hover) {
-  ._search_b2pjl_8:hover ._icon_b2pjl_37 {
+  ._search_1lktl_8:hover ._icon_1lktl_37 {
     color: var(--cpd-color-icon-primary);
   }
 }
 
-._search_b2pjl_8:active ._icon_b2pjl_37 {
+._search_1lktl_8:active ._icon_1lktl_37 {
   color: var(--cpd-color-icon-primary);
 }
 
-._input_b2pjl_52 {
+._input_1lktl_52 {
   border: 0;
   background: inherit;
   outline: 0;
@@ -2728,16 +2785,17 @@ Please see LICENSE files in the repository root for full details.
   min-inline-size: 0;
 }
 
-._input_b2pjl_52::placeholder {
+._input_1lktl_52::placeholder {
   color: var(--cpd-color-text-secondary);
 }
 
-._input_b2pjl_52:focus::placeholder {
+/* stylelint-disable-next-line defensive-css/require-focus-visible */
+._input_1lktl_52:focus::placeholder {
   color: var(--cpd-color-text-secondary);
 }
 
 @media (hover) {
-  ._search_b2pjl_8:hover ._input_b2pjl_52::placeholder {
+  ._search_1lktl_8:hover ._input_1lktl_52::placeholder {
     color: var(--cpd-color-text-secondary);
   }
 }