@wix/editor-react-components 1.2641.0 → 1.2643.0

package/dist/site/components/Checkbox/component.js

@@ -9,6 +9,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
+import { a as accessibilityStyles } from "../chunks/accessibility.module.js";
 import { d as defaultValues, V as VALUE_MISSING_MESSAGE, s as selectors, T as TestIds, a as semanticClassNames } from "../chunks/constants40.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const root = "root__0DpH8";
@@ -87,7 +88,8 @@ function CheckboxComponent(props) {
     onBlur(event);
     handleValidationBlur();
   };
-  const ariaLabel = !label2 ? (a11y == null ? void 0 : a11y.ariaLabel) || void 0 : void 0;
+  const ariaLabel = (a11y == null ? void 0 : a11y.ariaLabel) || void 0;
+  const customAccessibleNameId = label2 && ariaLabel ? `${id}-accessible-name` : void 0;
   const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
   const rootClassName = clsx(
     className,
@@ -113,6 +115,14 @@ function CheckboxComponent(props) {
               formatClassNames(semanticClassNames.root)
             ),
             children: [
+              customAccessibleNameId && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  id: customAccessibleNameId,
+                  className: accessibilityStyles.visuallyHidden,
+                  children: ariaLabel
+                }
+              ),
               /* @__PURE__ */ jsx(
                 Checkbox.Root,
                 {
@@ -128,6 +138,7 @@ function CheckboxComponent(props) {
                   ),
                   "data-testid": TestIds.control,
                   "aria-label": ariaLabel,
+                  "aria-labelledby": customAccessibleNameId,
                   onFocus,
                   onBlur: handleBlur,
                   children: /* @__PURE__ */ jsx(

package/dist/site/components/Checkbox/css.css

@@ -216,4 +216,15 @@
 }
 .presetWrapper__J1yzj {
   display: contents;
+}
+.visuallyHidden__Md84p {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
 }

package/dist/site/components/CheckboxGroup/component.js

@@ -18,6 +18,7 @@ const groupLabel = "groupLabel__gW0O8";
 const tooltipButton = "tooltipButton__9ySi3";
 const tooltip = "tooltip__xXd2k";
 const group = "group__5et8j";
+const list = "list__PAzjO";
 const option = "option__mUn-C";
 const control = "control__MMIkR";
 const indicator = "indicator__mDg93";
@@ -32,6 +33,7 @@ const styles = {
   tooltipButton,
   tooltip,
   group,
+  list,
   option,
   control,
   indicator,
@@ -130,7 +132,8 @@ function CheckboxGroupComponent(props) {
   };
   const hasLegend = displayLabel && !!label2;
   const showLabelRow = hasLegend || !!tooltip2;
-  const ariaLabel = !hasLegend ? (a11y == null ? void 0 : a11y.ariaLabel) || void 0 : void 0;
+  const ariaLabel = (a11y == null ? void 0 : a11y.ariaLabel) || void 0;
+  const legendId = hasLegend ? `${id}-legend` : void 0;
   const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
   const rootClassName = clsx(
     className,
@@ -188,6 +191,7 @@ function CheckboxGroupComponent(props) {
           hasLegend && /* @__PURE__ */ jsxs(
             Fieldset.Legend,
             {
+              id: legendId,
               className: clsx(
                 styles.groupLabel,
                 selectors.groupLabel,
@@ -223,7 +227,7 @@ function CheckboxGroupComponent(props) {
             /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { sideOffset: 6, children: /* @__PURE__ */ jsx(Tooltip.Popup, { className: styles.tooltip, children: tooltip2 }) }) })
           ] }) })
         ] }),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           CheckboxGroup_CheckboxGroup_CheckboxGroup,
           {
             ...valueProps,
@@ -234,14 +238,16 @@ function CheckboxGroupComponent(props) {
             "aria-invalid": isInvalid || void 0,
             "aria-describedby": showErrorMessage ? errorId : void 0,
             "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabel ? void 0 : legendId,
             className: styles.group,
             "data-testid": TestIds.group,
             onFocus,
             onBlur: handleBlur,
-            children: [
+            children: /* @__PURE__ */ jsxs("div", { role: "list", className: styles.list, children: [
               selectAll && /* @__PURE__ */ jsxs(
                 "label",
                 {
+                  role: "listitem",
                   className: clsx(
                     styles.option,
                     formatClassNames(semanticClassNames.option)
@@ -267,6 +273,7 @@ function CheckboxGroupComponent(props) {
               options.map((option2, index) => /* @__PURE__ */ jsxs(
                 "label",
                 {
+                  role: "listitem",
                   className: clsx(
                     styles.option,
                     formatClassNames(semanticClassNames.option)
@@ -294,7 +301,7 @@ function CheckboxGroupComponent(props) {
                 },
                 option2.value || index
               ))
-            ]
+            ] })
           }
         ),
         showErrorMessage && /* @__PURE__ */ jsxs(

package/dist/site/components/CheckboxGroup/css.css

@@ -72,6 +72,10 @@
 }
 
 .group__5et8j {
+  align-self: stretch;
+}
+
+.list__PAzjO {
   display: flex;
   flex-direction: column;
   align-items: var(--alignment, flex-start);

package/dist/site/components/Dropdown/component.js

@@ -11,6 +11,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
+import { a as accessibilityStyles } from "../chunks/accessibility.module.js";
 import { A as ALL_VALUE, s as selectors, a as semanticClassNames, T as TestIds, d as defaultValues, b as TriggerModeValues, c as ARIA_LABEL_NAMESPACE, e as AriaLabels, V as VALUE_MISSING_MESSAGE } from "../chunks/constants36.js";
 import { u as useResizeObserver } from "../chunks/useResizeObserver.js";
 import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
@@ -529,6 +530,7 @@ const DropdownTrigger = ({
       className: triggerClassName,
       "data-testid": TestIds.trigger,
       "aria-label": ariaLabel,
+      "aria-labelledby": labelId,
       "aria-describedby": describedById,
       "aria-invalid": isInvalid || void 0,
       onFocus,
@@ -700,7 +702,7 @@ function Dropdown(props) {
     inline
   });
   const t = translate(ARIA_LABEL_NAMESPACE);
-  const ariaLabel = label2 ? void 0 : t(AriaLabels.root.key) || (a11y == null ? void 0 : a11y.ariaLabel) || AriaLabels.root.default;
+  const ariaLabel = (a11y == null ? void 0 : a11y.ariaLabel) || (label2 ? void 0 : t(AriaLabels.root.key) || AriaLabels.root.default);
   const clearLabel = t(AriaLabels.clear.key) || AriaLabels.clear.default;
   const removeItemLabel = t(AriaLabels.removeItem.key) || AriaLabels.removeItem.default;
   const selectedItemValues = selectedItems.map((item) => item.value).filter((value2) => value2 !== "");
@@ -736,6 +738,7 @@ function Dropdown(props) {
   const labelId = label2 ? `${comboboxId}-label` : void 0;
   const fieldName = name || void 0;
   const hasInput = isMultiple || isSearchable;
+  const customAccessibleNameId = label2 && ariaLabel && !hasInput ? `${id}-accessible-name` : void 0;
   const popupOpen = previewList === true || (isMultiple || !isSearchable ? isOpen : isOpen && hasQuery);
   const triggerRegion = /* @__PURE__ */ jsx(
     DropdownTrigger,
@@ -747,7 +750,7 @@ function Dropdown(props) {
       selectedItems,
       placeholder,
       ariaLabel,
-      labelId,
+      labelId: customAccessibleNameId ?? (ariaLabel ? void 0 : labelId),
       clearLabel,
       removeItemLabel,
       describedById: descriptionId,
@@ -808,6 +811,14 @@ function Dropdown(props) {
       ...inline ? {} : { open: popupOpen, onOpenChange: setIsOpen },
       ...isSearchable ? { inputValue, onInputValueChange: handleInputValueChange } : {},
       children: [
+        customAccessibleNameId && /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: customAccessibleNameId,
+            className: accessibilityStyles.visuallyHidden,
+            children: ariaLabel
+          }
+        ),
         label2 && /* @__PURE__ */ jsxs(
           Combobox.Label,
           {

package/dist/site/components/Dropdown/css.css

@@ -450,4 +450,15 @@ div.group-XazO1A {
 }
 .presetWrapper__J1yzj {
   display: contents;
+}
+.visuallyHidden__Md84p {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
 }

package/dist/site/components/RadioButtons/component.js

@@ -9,6 +9,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
+import { a as accessibilityStyles } from "../chunks/accessibility.module.js";
 import { d as defaultValues, a as defaultOptions, V as VALUE_MISSING_MESSAGE, s as selectors, T as TestIds, b as semanticClassNames } from "../chunks/constants24.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const root = "root__4SkBh";
@@ -103,7 +104,8 @@ function RadioButtonsComponent(props) {
     }
   };
   const hasLegend = !!label2;
-  const ariaLabel = !hasLegend ? (a11y == null ? void 0 : a11y.ariaLabel) || void 0 : void 0;
+  const ariaLabel = (a11y == null ? void 0 : a11y.ariaLabel) || void 0;
+  const customAccessibleNameId = hasLegend && ariaLabel ? `${id}-accessible-name` : void 0;
   const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
   const rootClassName = clsx(
     className,
@@ -121,6 +123,14 @@ function RadioButtonsComponent(props) {
       lang: environmentService.language,
       "data-testid": TestIds.root,
       children: /* @__PURE__ */ jsxs(Fieldset.Root, { className: styles.fieldset, children: [
+        customAccessibleNameId && /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: customAccessibleNameId,
+            className: accessibilityStyles.visuallyHidden,
+            children: ariaLabel
+          }
+        ),
         (hasLegend || tooltip2) && /* @__PURE__ */ jsxs("div", { className: styles.labelRow, children: [
           hasLegend && /* @__PURE__ */ jsxs(
             Fieldset.Legend,
@@ -171,6 +181,7 @@ function RadioButtonsComponent(props) {
             "aria-invalid": isInvalid || void 0,
             "aria-describedby": isInvalid && validity.validationMessage ? errorId : void 0,
             "aria-label": ariaLabel,
+            "aria-labelledby": customAccessibleNameId,
             className: styles.group,
             "data-testid": TestIds.group,
             onFocus,

package/dist/site/components/RadioButtons/css.css

@@ -126,6 +126,12 @@
   --radio-border: var(--unselectedBorderColor, #000);
 }
 
+.control__w6l6-:focus-visible,
+.control__w6l6-:has(:focus-visible) {
+  outline: 2px solid #116dff;
+  outline-offset: 2px;
+}
+
 .control__w6l6-[data-checked] {
   --radio-bg: var(--selectedBackgroundColor, #fff);
   --radio-border: var(--selectedBorderColor, #116dff);
@@ -193,4 +199,15 @@
 }
 .presetWrapper__J1yzj {
   display: contents;
+}
+.visuallyHidden__Md84p {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
 }

package/dist/site/components/Repeater/component.js

@@ -70,6 +70,37 @@ const useItemsPerRow = (shouldMeasure) => {
   }, [shouldMeasure]);
   return [ref, count];
 };
+const placeholder = "wds_1_324_0";
+const versionedNamespace = placeholder.startsWith("wds_") ? placeholder : "";
+const NAMESPACE = "wds";
+const kebab = (value) => value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const join = (...classes2) => classes2.filter(Boolean).join(" ");
+const modifierTails = (node, props) => {
+  const variants = Object.entries(node.variants ?? {}).map(([name, values]) => {
+    const value = props[name];
+    if (!value || !values.includes(value))
+      return null;
+    return `--${kebab(name)}-${kebab(value)}`;
+  }).filter(Boolean);
+  const states = (node.states ?? []).filter((name) => props[name]).map((name) => `--${kebab(name)}`);
+  return [...variants, ...states];
+};
+const createClassNames = (blockName, config = {}, versionedNs = versionedNamespace) => {
+  const namespaces = versionedNs ? [NAMESPACE, versionedNs] : [NAMESPACE];
+  const nodeClassNames = (base, node) => (props = {}, ...classes2) => {
+    const tails = ["", ...modifierTails(node, props)];
+    return join(...namespaces.flatMap((ns) => tails.map((tail) => `${ns}-${base}${tail}`)), ...classes2);
+  };
+  const slots = Object.fromEntries(Object.entries(config).filter(([name]) => name !== "root").map(([name, node]) => [
+    name,
+    nodeClassNames(`${blockName}__${kebab(name)}`, node ?? {})
+  ]));
+  return {
+    ...slots,
+    root: nodeClassNames(blockName, config.root ?? {})
+  };
+};
+const defineClassNames = (blockName, config = {}) => createClassNames(blockName, config);
 function createStateClass(namespace, stateName, stateValue) {
   if (stateValue === false || stateValue === void 0 || stateValue === null || stateValue !== stateValue) {
     return "";
@@ -111,12 +142,9 @@ function statesRuntime(namespace, stateMapping) {
   }
   return classNames.join(" ");
 }
-var _namespace_$7 = "wds_1_297_0_colors";
-classesRuntime.bind(null, _namespace_$7);
-statesRuntime.bind(null, _namespace_$7);
-var _namespace_$6 = "wds_1_297_0_defaultscrollbar";
-classesRuntime.bind(null, _namespace_$6);
-statesRuntime.bind(null, _namespace_$6);
+var _namespace_$4 = "wds_1_324_0_colors";
+classesRuntime.bind(null, _namespace_$4);
+statesRuntime.bind(null, _namespace_$4);
 const noop = () => {
 };
 let depLogger = {
@@ -163,19 +191,22 @@ const filterObject = (object, filter = () => true) => {
   }
   return output;
 };
-var _namespace_$5 = "wds_1_297_0_Box";
-var _style_$3 = classesRuntime.bind(null, _namespace_$5);
-statesRuntime.bind(null, _namespace_$5);
-var st$3 = _style_$3;
-var classes$3 = { "root": "wds_1_297_0_Box__root" };
-var vars$1 = { "gap": "--wds_1_297_0_Box-gap" };
-var _namespace_$4 = "wds_1_297_0_colorsjs";
-classesRuntime.bind(null, _namespace_$4);
-statesRuntime.bind(null, _namespace_$4);
-var stVars$1 = { "D10": "var(--wds-color-black-100, var(--wsr-color-D10, #000624))", "D20": "var(--wds-color-black-200, var(--wsr-color-D20, #333853))", "D30": "var(--wds-color-black-300, var(--wsr-color-D30, #595D70))", "D40": "var(--wds-color-black-400, var(--wsr-color-D40, #868AA5))", "D50": "var(--wds-color-black-500, var(--wsr-color-D50, #ACAFC4))", "D55": "var(--wds-color-black-550, var(--wsr-color-D55, #CFD1DC))", "D60": "var(--wds-color-black-600, var(--wsr-color-D60, #DFE5EB))", "D70": "var(--wds-color-black-700, var(--wsr-color-D70, #ECEFF3))", "D75": "var(--wds-color-black-750, var(--wsr-color-D75, #F7F8F8))", "D80": "var(--wds-color-white, var(--wsr-color-D80, #FFFFFF))", "B00": "var(--wds-color-blue-0, var(--wsr-color-B00, #084EBD))", "B05": "var(--wds-color-blue-50, var(--wsr-color-B05, #0F62E6))", "B10": "var(--wds-color-blue-100, var(--wsr-color-B10, #116DFF))", "B20": "var(--wds-color-blue-200, var(--wsr-color-B20, #5999FF))", "B30": "var(--wds-color-blue-300, var(--wsr-color-B30, #A8CAFF))", "B40": "var(--wds-color-blue-400, var(--wsr-color-B40, #D6E6FE))", "B50": "var(--wds-color-blue-500, var(--wsr-color-B50, #E7F0FF))", "B60": "var(--wds-color-blue-600, var(--wsr-color-B60, #F4F7FF))", "R00": "var(--wds-color-red-0, var(--wsr-color-R00, #B81206))", "R05": "var(--wds-color-red-50, var(--wsr-color-R05, #D0180B))", "R10": "var(--wds-color-red-100, var(--wsr-color-R10, #E62214))", "R20": "var(--wds-color-red-200, var(--wsr-color-R20, #FF6D63))", "R30": "var(--wds-color-red-300, var(--wsr-color-R30, #F69891))", "R40": "var(--wds-color-red-400, var(--wsr-color-R40, #FBD0CD))", "R50": "var(--wds-color-red-500, var(--wsr-color-R50, #FDE3E1))", "R60": "var(--wds-color-red-600, var(--wsr-color-R60, #FDECEB))", "P00": "var(--wds-color-purple-0, var(--wsr-color-P00, #7416A5))", "P05": "var(--wds-color-purple-50, var(--wsr-color-P05, #8E1DD1))", "P10": "var(--wds-color-purple-100, var(--wsr-color-P10, #9A27D5))", "P20": "var(--wds-color-purple-200, var(--wsr-color-P20, #C161F0))", "P30": "var(--wds-color-purple-300, var(--wsr-color-P30, #CF8CF1))", "P40": "var(--wds-color-purple-400, var(--wsr-color-P40, #E3C3F4))", "P50": "var(--wds-color-purple-500, var(--wsr-color-P50, #F1E0F9))", "P60": "var(--wds-color-purple-600, var(--wsr-color-P60, #F7EDFC))", "G00": "var(--wds-color-green-0, var(--wsr-color-G00, #1D8649))", "G05": "var(--wds-color-green-50, var(--wsr-color-G05, #229954))", "G10": "var(--wds-color-green-100, var(--wsr-color-G10, #25A55A))", "G20": "var(--wds-color-green-200, var(--wsr-color-G20, #51B77B))", "G30": "var(--wds-color-green-300, var(--wsr-color-G30, #87CEA5))", "G40": "var(--wds-color-green-400, var(--wsr-color-G40, #C8E8D6))", "G50": "var(--wds-color-green-500, var(--wsr-color-G50, #E1F4EB))", "G60": "var(--wds-color-green-600, var(--wsr-color-G60, #E9F6EE))", "Y00": "var(--wds-color-yellow-0, var(--wsr-color-Y00, #D59900))", "Y05": "var(--wds-color-yellow-50, var(--wsr-color-Y05, #E7A600))", "Y10": "var(--wds-color-yellow-100, var(--wsr-color-Y10, #FFB700))", "Y20": "var(--wds-color-yellow-200, var(--wsr-color-Y20, #FFC23D))", "Y30": "var(--wds-color-yellow-300, var(--wsr-color-Y30, #FFD16E))", "Y40": "var(--wds-color-yellow-400, var(--wsr-color-Y40, #FFE2A5))", "Y50": "var(--wds-color-yellow-500, var(--wsr-color-Y50, #FFF0D1))", "Y60": "var(--wds-color-yellow-600, var(--wsr-color-Y60, #FFF6E5))", "O00": "var(--wds-color-orange-0, var(--wsr-color-O00, #DF4D00))", "O05": "var(--wds-color-orange-50, var(--wsr-color-O05, #F05300))", "O10": "var(--wds-color-orange-100, var(--wsr-color-O10, #FE620F))", "O20": "var(--wds-color-orange-200, var(--wsr-color-O20, #FF7D38))", "O30": "var(--wds-color-orange-300, var(--wsr-color-O30, #FCBD9C))", "O40": "var(--wds-color-orange-400, var(--wsr-color-O40, #FDDBC8))", "O50": "var(--wds-color-orange-500, var(--wsr-color-O50, #FEE5D7))", "O60": "var(--wds-color-orange-600, var(--wsr-color-O60, #FEEFE6))", "F00": "var(--wds-color-blue-300, var(--wsr-color-F00, #A6D0FF))", "A1": "var(--wsr-color-A1, #1684EA)", "A2": "var(--wsr-color-A2, #17B0E2)", "A3": "var(--wsr-color-A3, #6544F9)", "A4": "var(--wsr-color-A4, #3D9FA1)", "A5": "var(--wsr-color-A5, #D04091)", "A6": "var(--wsr-color-A6, #FDB10C)", "B1": "var(--wsr-color-B1, #FF66C5)", "B2": "var(--wsr-color-B2, #FF9F41)", "B3": "var(--wsr-color-B3, #F9677A)", "B4": "var(--wsr-color-B4, #1550AC)", "C1": "var(--wsr-color-C1, #54CE91)", "C2": "var(--wsr-color-C2, #1989E5)", "C3": "var(--wsr-color-C3, #64B4F6)", "C4": "var(--wsr-color-C4, #FF9290)", "D10-03": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 3%, transparent)", "D10-05": "var(--wds-color-black-100-transparent-5, var(--wsr-color-D10-05, rgba(0, 6, 36, 0.05)))", "D10-06": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 6%, transparent)", "D10-10": "var(--wds-color-black-100-transparent-10, var(--wsr-color-D10-10, rgba(0, 6, 36, 0.10)))", "D10-12": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 12%, transparent)", "D10-18": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 18%, transparent)", "D10-20": "var(--wds-color-black-100-transparent-20, var(--wsr-color-D10-20, rgba(0, 6, 36, 0.20)))", "D10-24": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 24%, transparent)", "D10-30": "var(--wds-color-black-100-transparent-30, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)))", "D10-36": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 36%, transparent)", "D10-42": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 42%, transparent)", "D10-66": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 66%, transparent)", "D10-90": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 90%, transparent)", "D10-96": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 96%, transparent)", "D20-48": "color-mix(in srgb, var(--wds-color-black-200, var(--wsr-color-D20, #333853)) 48%, transparent)", "D20-54": "color-mix(in srgb, var(--wds-color-black-200, var(--wsr-color-D20, #333853)) 54%, transparent)", "D20-60": "var(--wds-color-black-200-transparent-60, var(--wsr-color-D20-60, rgba(51, 56, 83, 0.60)))", "D20-72": "color-mix(in srgb, var(--wds-color-black-200, var(--wsr-color-D20, #333853)) 72%, transparent)", "D40-20": "var(--wds-color-black-300-transparent-20, var(--wsr-color-D40-20, rgba(134, 138, 165, 0.20)))", "D80-10": "var(--wds-color-white-transparent-10, var(--wsr-color-D80-10, rgba(255, 255, 255, 0.10)))", "D80-20": "var(--wds-color-white-transparent-20, var(--wsr-color-D80-20, rgba(255, 255, 255, 0.20)))", "D80-30": "var(--wds-color-white-transparent-30, var(--wsr-color-D80-30, rgba(255, 255, 255, 0.30)))", "D80-48": "color-mix(in srgb, var(--wds-color-white, var(--wsr-color-D80, #FFFFFF)) 48%, transparent)", "D80-60": "color-mix(in srgb, var(--wds-color-white, var(--wsr-color-D80, #FFFFFF)) 60%, transparent)", "D80-70": "var(--wds-color-white-transparent-70, var(--wsr-color-D80-70, rgba(255, 255, 255, 0.70)))", "B00-24": "color-mix(in srgb, var(--wds-color-blue-0, var(--wsr-color-B00, #084EBD)) 24%, transparent)", "B00-42": "color-mix(in srgb, var(--wds-color-blue-0, var(--wsr-color-B00, #084EBD)) 42%, transparent)", "B00-48": "color-mix(in srgb, var(--wds-color-blue-0, var(--wsr-color-B00, #084EBD)) 48%, transparent)", "D10-00": "var(--wds-color-black-100-transparent-0, var(--wsr-color-D10-00, rgba(22, 45, 61, 0.00)))", "D10-54": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 54%, transparent)", "D80-00": "var(--wds-color-white-transparent-0, var(--wsr-color-D80-00, rgba(255, 255, 255, 0)))", "D80-42": "color-mix(in srgb, var(--wds-color-white, var(--wsr-color-D80, #FFFFFF)) 42%, transparent)", "D80-50": "var(--wds-color-white-transparent-50, var(--wsr-color-D80-50, rgba(255, 255, 255, 0.50)))", "D80-66": "color-mix(in srgb, var(--wds-color-white, var(--wsr-color-D80, #FFFFFF)) 66%, transparent)", "D80-96": "color-mix(in srgb, var(--wds-color-white, var(--wsr-color-D80, #FFFFFF)) 96%, transparent)", "D80-97": "color-mix(in srgb, var(--wds-color-white, var(--wsr-color-D80, #FFFFFF)) 97%, transparent)", "B00-60": "color-mix(in srgb, var(--wds-color-blue-0, var(--wsr-color-B00, #084EBD)) 60%, transparent)", "B10-18": "color-mix(in srgb, var(--wds-color-blue-100, var(--wsr-color-B10, #116DFF)) 18%, transparent)", "THEME-COLOR-00": "var(--wds-color-blue-0, var(--wsr-color-B00, #084EBD))", "THEME-COLOR-05": "var(--wds-color-blue-50, var(--wsr-color-B05, #0F62E6))", "THEME-COLOR-10": "var(--wds-color-blue-100, var(--wsr-color-B10, #116DFF))", "THEME-COLOR-20": "var(--wds-color-blue-200, var(--wsr-color-B20, #5999FF))", "THEME-COLOR-30": "var(--wds-color-blue-300, var(--wsr-color-B30, #A8CAFF))", "THEME-COLOR-40": "var(--wds-color-blue-400, var(--wsr-color-B40, #D6E6FE))", "THEME-COLOR-50": "var(--wds-color-blue-500, var(--wsr-color-B50, #E7F0FF))", "THEME-COLOR-60": "var(--wds-color-blue-600, var(--wsr-color-B60, #F4F7FF))", "THEME-TEXT-COLOR-PRIMARY": "var(--wds-color-black-100, var(--wsr-color-D10, #000624))", "THEME-TEXT-COLOR-PRIMARY-LIGHT": "var(--wds-color-white, var(--wsr-color-D80, #FFFFFF))", "THEME-TEXT-COLOR-SECONDARY": "var(--wds-color-black-200, var(--wsr-color-D20, #333853))", "THEME-TEXT-COLOR-SECONDARY-LIGHT": "var(--wds-color-black-400, var(--wsr-color-D40, #868AA5))", "THEME-DIVIDER-COLOR": "var(--wds-color-black-600, var(--wsr-color-D60, #DFE5EB))", "Gradient-AI01": "var(--wds-color-fill-ai-primary, linear-gradient(60deg, #0021FF -31%, #116DFF 65%, #5FF2AE 96%))", "Gradient-AI02": "var(--wds-color-fill-ai-primary-hover, linear-gradient(60deg, #0021FF -177%, #116DFF 32%, #5FF2AE 96%))", "SECTION-HEADER-COLOR-BG": "var(--wds-section-header-fill-neutral, var(--wsr-section-header-color-bg, #f7f8f8))", "SECTION-HEADER-COLOR-BORDER": "var(--wds-color-border-dark-secondary, var(--wsr-section-header-color-border, #dfe5eb))" };
-var _namespace_$3 = "wds_1_297_0_spacing";
+var _namespace_$3 = "wds_1_324_0_defaultscrollbar";
 classesRuntime.bind(null, _namespace_$3);
 statesRuntime.bind(null, _namespace_$3);
+var _namespace_$2 = "wds_1_324_0_Box";
+var _style_ = classesRuntime.bind(null, _namespace_$2);
+statesRuntime.bind(null, _namespace_$2);
+var st = _style_;
+var classes$3 = { "root": "wds_1_324_0_Box__root" };
+var vars = { "gap": "--wds_1_324_0_Box-gap" };
+var _namespace_$1 = "wds_1_324_0_colorsjs";
+classesRuntime.bind(null, _namespace_$1);
+statesRuntime.bind(null, _namespace_$1);
+var stVars$1 = { "D10": "var(--wds-color-black-100, var(--wsr-color-D10, #000624))", "D20": "var(--wds-color-black-200, var(--wsr-color-D20, #333853))", "D30": "var(--wds-color-black-300, var(--wsr-color-D30, #595D70))", "D40": "var(--wds-color-black-400, var(--wsr-color-D40, #868AA5))", "D50": "var(--wds-color-black-500, var(--wsr-color-D50, #ACAFC4))", "D55": "var(--wds-color-black-550, var(--wsr-color-D55, #CFD1DC))", "D60": "var(--wds-color-black-600, var(--wsr-color-D60, #DFE5EB))", "D70": "var(--wds-color-black-700, var(--wsr-color-D70, #ECEFF3))", "D75": "var(--wds-color-black-750, var(--wsr-color-D75, #F7F8F8))", "D80": "var(--wds-color-white, var(--wsr-color-D80, #FFFFFF))", "B00": "var(--wds-color-blue-0, var(--wsr-color-B00, #084EBD))", "B05": "var(--wds-color-blue-50, var(--wsr-color-B05, #0F62E6))", "B10": "var(--wds-color-blue-100, var(--wsr-color-B10, #116DFF))", "B20": "var(--wds-color-blue-200, var(--wsr-color-B20, #5999FF))", "B30": "var(--wds-color-blue-300, var(--wsr-color-B30, #A8CAFF))", "B40": "var(--wds-color-blue-400, var(--wsr-color-B40, #D6E6FE))", "B50": "var(--wds-color-blue-500, var(--wsr-color-B50, #E7F0FF))", "B60": "var(--wds-color-blue-600, var(--wsr-color-B60, #F4F7FF))", "R00": "var(--wds-color-red-0, var(--wsr-color-R00, #B81206))", "R05": "var(--wds-color-red-50, var(--wsr-color-R05, #D0180B))", "R10": "var(--wds-color-red-100, var(--wsr-color-R10, #E62214))", "R20": "var(--wds-color-red-200, var(--wsr-color-R20, #FF6D63))", "R30": "var(--wds-color-red-300, var(--wsr-color-R30, #F69891))", "R40": "var(--wds-color-red-400, var(--wsr-color-R40, #FBD0CD))", "R50": "var(--wds-color-red-500, var(--wsr-color-R50, #FDE3E1))", "R60": "var(--wds-color-red-600, var(--wsr-color-R60, #FDECEB))", "P00": "var(--wds-color-purple-0, var(--wsr-color-P00, #7416A5))", "P05": "var(--wds-color-purple-50, var(--wsr-color-P05, #8E1DD1))", "P10": "var(--wds-color-purple-100, var(--wsr-color-P10, #9A27D5))", "P20": "var(--wds-color-purple-200, var(--wsr-color-P20, #C161F0))", "P30": "var(--wds-color-purple-300, var(--wsr-color-P30, #CF8CF1))", "P40": "var(--wds-color-purple-400, var(--wsr-color-P40, #E3C3F4))", "P50": "var(--wds-color-purple-500, var(--wsr-color-P50, #F1E0F9))", "P60": "var(--wds-color-purple-600, var(--wsr-color-P60, #F7EDFC))", "G00": "var(--wds-color-green-0, var(--wsr-color-G00, #1D8649))", "G05": "var(--wds-color-green-50, var(--wsr-color-G05, #229954))", "G10": "var(--wds-color-green-100, var(--wsr-color-G10, #25A55A))", "G20": "var(--wds-color-green-200, var(--wsr-color-G20, #51B77B))", "G30": "var(--wds-color-green-300, var(--wsr-color-G30, #87CEA5))", "G40": "var(--wds-color-green-400, var(--wsr-color-G40, #C8E8D6))", "G50": "var(--wds-color-green-500, var(--wsr-color-G50, #E1F4EB))", "G60": "var(--wds-color-green-600, var(--wsr-color-G60, #E9F6EE))", "Y00": "var(--wds-color-yellow-0, var(--wsr-color-Y00, #D59900))", "Y05": "var(--wds-color-yellow-50, var(--wsr-color-Y05, #E7A600))", "Y10": "var(--wds-color-yellow-100, var(--wsr-color-Y10, #FFB700))", "Y20": "var(--wds-color-yellow-200, var(--wsr-color-Y20, #FFC23D))", "Y30": "var(--wds-color-yellow-300, var(--wsr-color-Y30, #FFD16E))", "Y40": "var(--wds-color-yellow-400, var(--wsr-color-Y40, #FFE2A5))", "Y50": "var(--wds-color-yellow-500, var(--wsr-color-Y50, #FFF0D1))", "Y60": "var(--wds-color-yellow-600, var(--wsr-color-Y60, #FFF6E5))", "O00": "var(--wds-color-orange-0, var(--wsr-color-O00, #DF4D00))", "O05": "var(--wds-color-orange-50, var(--wsr-color-O05, #F05300))", "O10": "var(--wds-color-orange-100, var(--wsr-color-O10, #FE620F))", "O20": "var(--wds-color-orange-200, var(--wsr-color-O20, #FF7D38))", "O30": "var(--wds-color-orange-300, var(--wsr-color-O30, #FCBD9C))", "O40": "var(--wds-color-orange-400, var(--wsr-color-O40, #FDDBC8))", "O50": "var(--wds-color-orange-500, var(--wsr-color-O50, #FEE5D7))", "O60": "var(--wds-color-orange-600, var(--wsr-color-O60, #FEEFE6))", "F00": "var(--wds-color-blue-300, var(--wsr-color-F00, #A6D0FF))", "A1": "var(--wsr-color-A1, #1684EA)", "A2": "var(--wsr-color-A2, #17B0E2)", "A3": "var(--wsr-color-A3, #6544F9)", "A4": "var(--wsr-color-A4, #3D9FA1)", "A5": "var(--wsr-color-A5, #D04091)", "A6": "var(--wsr-color-A6, #FDB10C)", "B1": "var(--wsr-color-B1, #FF66C5)", "B2": "var(--wsr-color-B2, #FF9F41)", "B3": "var(--wsr-color-B3, #F9677A)", "B4": "var(--wsr-color-B4, #1550AC)", "C1": "var(--wsr-color-C1, #54CE91)", "C2": "var(--wsr-color-C2, #1989E5)", "C3": "var(--wsr-color-C3, #64B4F6)", "C4": "var(--wsr-color-C4, #FF9290)", "D10-03": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 3%, transparent)", "D10-05": "var(--wds-color-black-100-transparent-5, var(--wsr-color-D10-05, rgba(0, 6, 36, 0.05)))", "D10-06": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 6%, transparent)", "D10-10": "var(--wds-color-black-100-transparent-10, var(--wsr-color-D10-10, rgba(0, 6, 36, 0.10)))", "D10-12": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 12%, transparent)", "D10-18": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 18%, transparent)", "D10-20": "var(--wds-color-black-100-transparent-20, var(--wsr-color-D10-20, rgba(0, 6, 36, 0.20)))", "D10-24": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 24%, transparent)", "D10-30": "var(--wds-color-black-100-transparent-30, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)))", "D10-36": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 36%, transparent)", "D10-42": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 42%, transparent)", "D10-66": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 66%, transparent)", "D10-90": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 90%, transparent)", "D10-96": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 96%, transparent)", "D20-48": "color-mix(in srgb, var(--wds-color-black-200, var(--wsr-color-D20, #333853)) 48%, transparent)", "D20-54": "color-mix(in srgb, var(--wds-color-black-200, var(--wsr-color-D20, #333853)) 54%, transparent)", "D20-60": "var(--wds-color-black-200-transparent-60, var(--wsr-color-D20-60, rgba(51, 56, 83, 0.60)))", "D20-72": "color-mix(in srgb, var(--wds-color-black-200, var(--wsr-color-D20, #333853)) 72%, transparent)", "D40-20": "var(--wds-color-black-300-transparent-20, var(--wsr-color-D40-20, rgba(134, 138, 165, 0.20)))", "D80-10": "var(--wds-color-white-transparent-10, var(--wsr-color-D80-10, rgba(255, 255, 255, 0.10)))", "D80-20": "var(--wds-color-white-transparent-20, var(--wsr-color-D80-20, rgba(255, 255, 255, 0.20)))", "D80-30": "var(--wds-color-white-transparent-30, var(--wsr-color-D80-30, rgba(255, 255, 255, 0.30)))", "D80-48": "color-mix(in srgb, var(--wds-color-white, var(--wsr-color-D80, #FFFFFF)) 48%, transparent)", "D80-60": "color-mix(in srgb, var(--wds-color-white, var(--wsr-color-D80, #FFFFFF)) 60%, transparent)", "D80-70": "var(--wds-color-white-transparent-70, var(--wsr-color-D80-70, rgba(255, 255, 255, 0.70)))", "B00-24": "color-mix(in srgb, var(--wds-color-blue-0, var(--wsr-color-B00, #084EBD)) 24%, transparent)", "B00-42": "color-mix(in srgb, var(--wds-color-blue-0, var(--wsr-color-B00, #084EBD)) 42%, transparent)", "B00-48": "color-mix(in srgb, var(--wds-color-blue-0, var(--wsr-color-B00, #084EBD)) 48%, transparent)", "D10-00": "var(--wds-color-black-100-transparent-0, var(--wsr-color-D10-00, rgba(22, 45, 61, 0.00)))", "D10-54": "color-mix(in srgb, var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 54%, transparent)", "D80-00": "var(--wds-color-white-transparent-0, var(--wsr-color-D80-00, rgba(255, 255, 255, 0)))", "D80-42": "color-mix(in srgb, var(--wds-color-white, var(--wsr-color-D80, #FFFFFF)) 42%, transparent)", "D80-50": "var(--wds-color-white-transparent-50, var(--wsr-color-D80-50, rgba(255, 255, 255, 0.50)))", "D80-66": "color-mix(in srgb, var(--wds-color-white, var(--wsr-color-D80, #FFFFFF)) 66%, transparent)", "D80-96": "color-mix(in srgb, var(--wds-color-white, var(--wsr-color-D80, #FFFFFF)) 96%, transparent)", "D80-97": "color-mix(in srgb, var(--wds-color-white, var(--wsr-color-D80, #FFFFFF)) 97%, transparent)", "B00-60": "color-mix(in srgb, var(--wds-color-blue-0, var(--wsr-color-B00, #084EBD)) 60%, transparent)", "B10-18": "color-mix(in srgb, var(--wds-color-blue-100, var(--wsr-color-B10, #116DFF)) 18%, transparent)", "THEME-COLOR-00": "var(--wds-color-blue-0, var(--wsr-color-B00, #084EBD))", "THEME-COLOR-05": "var(--wds-color-blue-50, var(--wsr-color-B05, #0F62E6))", "THEME-COLOR-10": "var(--wds-color-blue-100, var(--wsr-color-B10, #116DFF))", "THEME-COLOR-20": "var(--wds-color-blue-200, var(--wsr-color-B20, #5999FF))", "THEME-COLOR-30": "var(--wds-color-blue-300, var(--wsr-color-B30, #A8CAFF))", "THEME-COLOR-40": "var(--wds-color-blue-400, var(--wsr-color-B40, #D6E6FE))", "THEME-COLOR-50": "var(--wds-color-blue-500, var(--wsr-color-B50, #E7F0FF))", "THEME-COLOR-60": "var(--wds-color-blue-600, var(--wsr-color-B60, #F4F7FF))", "THEME-TEXT-COLOR-PRIMARY": "var(--wds-color-black-100, var(--wsr-color-D10, #000624))", "THEME-TEXT-COLOR-PRIMARY-LIGHT": "var(--wds-color-white, var(--wsr-color-D80, #FFFFFF))", "THEME-TEXT-COLOR-SECONDARY": "var(--wds-color-black-200, var(--wsr-color-D20, #333853))", "THEME-TEXT-COLOR-SECONDARY-LIGHT": "var(--wds-color-black-400, var(--wsr-color-D40, #868AA5))", "THEME-DIVIDER-COLOR": "var(--wds-color-black-600, var(--wsr-color-D60, #DFE5EB))", "Gradient-AI01": "var(--wds-color-fill-ai-primary, linear-gradient(60deg, #0021FF -31%, #116DFF 65%, #5FF2AE 96%))", "Gradient-AI02": "var(--wds-color-fill-ai-primary-hover, linear-gradient(60deg, #0021FF -177%, #116DFF 32%, #5FF2AE 96%))", "SECTION-HEADER-COLOR-BG": "var(--wds-section-header-fill-neutral, var(--wsr-section-header-color-bg, #f7f8f8))", "SECTION-HEADER-COLOR-BORDER": "var(--wds-color-border-dark-secondary, var(--wsr-section-header-color-border, #dfe5eb))" };
+var _namespace_ = "wds_1_324_0_spacing";
+classesRuntime.bind(null, _namespace_);
+statesRuntime.bind(null, _namespace_);
 var stVars = { "spacing01": "1px", "spacing02": "2px", "spacing03": "3px", "spacing06": "6px", "spacing12": "12px", "spacing18": "18px", "spacing24": "24px", "spacing30": "30px", "spacing36": "36px", "spacing42": "42px", "spacing48": "48px", "spacing78": "78px", "spacing90": "90px", "DefaultSpacing": "6px", "Spacing": "var(--wds-space-100, 6px)", "SP1": "calc(var(--wds-space-100, 6px) * 1)", "SP2": "calc(var(--wds-space-100, 6px) * 2)", "SP3": "calc(var(--wds-space-100, 6px) * 3)", "SP4": "calc(var(--wds-space-100, 6px) * 4)", "SP5": "calc(var(--wds-space-100, 6px) * 5)", "SP6": "calc(var(--wds-space-100, 6px) * 6)", "SP7": "calc(var(--wds-space-100, 6px) * 7)", "SP8": "calc(var(--wds-space-100, 6px) * 8)", "SP9": "calc(var(--wds-space-100, 6px) * 9)", "SP10": "calc(var(--wds-space-100, 6px) * 10)" };
 const DIRECTION = {
   horizontal: "horizontal"
@@ -235,7 +266,7 @@ const Box = forwardRef(({ inline = false, direction = DIRECTION.horizontal, chil
       deprecationLog('<Box/> - prop "data-hook" is deprecated and will be removed in next major release, please use "dataHook" instead.');
     }
   }, [dataHookByKebabCase]);
-  const rootClassNames = st$3(classes$3.root, {
+  const rootClassNames = st(classes$3.root, {
     inline,
     direction,
     alignItems: align,
@@ -273,7 +304,7 @@ const Box = forwardRef(({ inline = false, direction = DIRECTION.horizontal, chil
       borderBottomColor,
       borderLeftColor
     }),
-    [vars$1["gap"]]: formatSpacingValue(gap) || 0,
+    [vars["gap"]]: formatSpacingValue(gap) || 0,
     ...nativeStyles
   };
   const rootStylesFiltered = filterObject(rootStyles, (_key, value) => typeof value !== "undefined");
@@ -281,29 +312,30 @@ const Box = forwardRef(({ inline = false, direction = DIRECTION.horizontal, chil
   return React__default.createElement("div", { "aria-label": ariaLabel, role, tabIndex, "data-hook": dataHook, className: rootClassNames, style: rootStylesFiltered, ref }, children);
 });
 Box.displayName = "Box";
-var _namespace_$2 = "wds_1_297_0_SkeletonGroup";
-var _style_$2 = classesRuntime.bind(null, _namespace_$2);
-statesRuntime.bind(null, _namespace_$2);
-var st$2 = _style_$2;
-var classes$2 = { "root": "wds_1_297_0_SkeletonGroup__root", "animator": "wds_1_297_0_SkeletonGroup__animator" };
-var vars = { "color": "--wds_1_297_0_SkeletonGroup-color" };
+const classes$2 = defineClassNames("skeleton-group", {
+  root: {},
+  animator: {}
+});
+const SKELETON_GROUP_COLOR_PROPERTY = "--wds-internal-skeleton-group-color";
 const SkeletonGroupContext = React__default.createContext(void 0);
 function SkeletonGroup({ dataHook, className, skin = "light", children, backgroundColor }) {
   return React__default.createElement(
     "div",
-    { "data-hook": dataHook, className: st$2(classes$2.root, className), style: {
-      [vars["color"]]: backgroundColor
+    { "data-hook": dataHook, className: classes$2.root({}, className), style: {
+      [SKELETON_GROUP_COLOR_PROPERTY]: backgroundColor
     }, "data-status": "loading" },
     React__default.createElement(SkeletonGroupContext.Provider, { value: { skin } }, children),
-    React__default.createElement("div", { className: classes$2.animator })
+    React__default.createElement("div", { className: classes$2.animator() })
   );
 }
 SkeletonGroup.displayName = "SkeletonGroup";
-var _namespace_$1 = "wds_1_297_0_SkeletonRectangle";
-var _style_$1 = classesRuntime.bind(null, _namespace_$1);
-statesRuntime.bind(null, _namespace_$1);
-var st$1 = _style_$1;
-var classes$1 = { "root": "wds_1_297_0_SkeletonRectangle__root" };
+const classes$1 = defineClassNames("skeleton-rectangle", {
+  root: {
+    variants: {
+      skin: ["dark", "light"]
+    }
+  }
+});
 const DEFAULT_HEIGHT = "100%";
 const DEFAULT_WIDTH$1 = "100%";
 const DEFAULT_SKIN = "light";
@@ -314,16 +346,18 @@ function SkeletonRectangle(props) {
     return React__default.createElement(
       "div",
       { "data-hook": dataHook, className, "data-height": height, "data-width": width, "data-skin": skin },
-      React__default.createElement(Box, { height, width, margin, marginLeft, marginRight, marginTop, marginBottom, className: st$1(classes$1.root, { skin }) })
+      React__default.createElement(Box, { height, width, margin, marginLeft, marginRight, marginTop, marginBottom, className: classes$1.root({ skin }) })
     );
   });
 }
 SkeletonRectangle.displayName = "SkeletonRectangle";
-var _namespace_ = "wds_1_297_0_SkeletonLine";
-var _style_ = classesRuntime.bind(null, _namespace_);
-statesRuntime.bind(null, _namespace_);
-var st = _style_;
-var classes = { "root": "wds_1_297_0_SkeletonLine__root" };
+const classes = defineClassNames("skeleton-line", {
+  root: {
+    variants: {
+      skin: ["dark", "light"]
+    }
+  }
+});
 const HEIGHT = "11px";
 const DEFAULT_WIDTH = "100%";
 const SkeletonLine = ({ dataHook, className, width = DEFAULT_WIDTH, margin, marginLeft, marginRight, marginTop, marginBottom }) => {
@@ -332,7 +366,7 @@ const SkeletonLine = ({ dataHook, className, width = DEFAULT_WIDTH, margin, marg
     return React__default.createElement(
       "div",
       { "data-hook": dataHook, className, "data-width": width, "data-skin": skin },
-      React__default.createElement(Box, { height: HEIGHT, width, margin, marginLeft, marginRight, marginTop, marginBottom, className: st(classes.root, { skin }) })
+      React__default.createElement(Box, { height: HEIGHT, width, margin, marginLeft, marginRight, marginTop, marginBottom, className: classes.root({ skin }) })
     );
   });
 };