@wix/editor-react-components 1.2640.0 → 1.2642.0

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useService } from "@wix/services-manager-react";
-import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { E as EnvironmentDefinition } from "../chunks/index3.js";
 import { A as AnimatedIcon } from "../chunks/AnimatedIcon.js";
 const AnimatedIconWithReducedMotion = forwardRef((props, ref) => {
   const environment = useService(EnvironmentDefinition);

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

@@ -3,7 +3,7 @@ import * as React from "react";
 import React__default, { useRef, useCallback, useMemo, useEffect, useState, forwardRef, useContext, createContext, useSyncExternalStore } from "react";
 import { c as clsx } from "../chunks/clsx.js";
 import { useService } from "@wix/services-manager-react";
-import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { E as EnvironmentDefinition } from "../chunks/index3.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import Image3 from "../Image3/component.js";
 import { A as ARIA_LABELS, s as selectors, d as dataDefaults } from "../chunks/constants42.js";

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

@@ -10,7 +10,7 @@ import { s as semanticClassNames, D as DesignStates } from "../chunks/constants4
 import { A as AnimatedIcon } from "../chunks/AnimatedIcon.js";
 import { useService } from "@wix/services-manager-react";
 import { d as defineService } from "../chunks/index8.js";
-import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { E as EnvironmentDefinition } from "../chunks/index3.js";
 import { U as UrlDefinition } from "../chunks/index13.js";
 const $b5e257d569688ac6$var$defaultContext = {
   prefix: String(Math.round(Math.random() * 1e10)),

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

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { c as clsx } from "../chunks/clsx.js";
 import { F as Field, e as Checkbox, T as Tooltip } from "../chunks/index12.js";
 import { useService } from "@wix/services-manager-react";
-import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { E as EnvironmentDefinition } from "../chunks/index3.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";

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

@@ -3,7 +3,7 @@ import { useState, useRef } from "react";
 import { c as clsx } from "../chunks/clsx.js";
 import { a as Fieldset, T as Tooltip, d as CheckboxGroup_CheckboxGroup_CheckboxGroup, c as InfoCircle_default, e as Checkbox } from "../chunks/index12.js";
 import { useService } from "@wix/services-manager-react";
-import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { E as EnvironmentDefinition } from "../chunks/index3.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";

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

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React__default, { useRef, useState, useMemo, useEffect } from "react";
 import { c as clsx } from "../chunks/clsx.js";
 import { useService } from "@wix/services-manager-react";
-import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { E as EnvironmentDefinition } from "../chunks/index3.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { p as parseHtml } from "../chunks/parseHtml.js";
 import { e as getTabIndexAttribute } from "../chunks/a11y.js";

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

@@ -10,7 +10,7 @@ import { $ as $cf2482eff2eeeec2$export$f12b703ca79dfbb1 } from "../chunks/useLoc
 import { $ as $ea3928288112382f$export$439d29a4e110a164, a as $ea3928288112382f$export$a966af930f325cab } from "../chunks/VisuallyHidden.js";
 import __rspack_external_react_dom_7136dc57__default from "react-dom";
 import { useService } from "@wix/services-manager-react";
-import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { E as EnvironmentDefinition } from "../chunks/index3.js";
 import { T as TranslationsDefinition } from "../chunks/index6.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { d as directionStyles } from "../chunks/direction.module.js";

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

@@ -4,7 +4,7 @@ import { useState, useCallback, useLayoutEffect, useEffect, useRef } from "react
 import { c as clsx } from "../chunks/clsx.js";
 import { C as Combobox, F as Field, B as Button_Button_Button } from "../chunks/index12.js";
 import { useService } from "@wix/services-manager-react";
-import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { E as EnvironmentDefinition } from "../chunks/index3.js";
 import { T as TranslationsDefinition } from "../chunks/index6.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";

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

@@ -8,9 +8,9 @@ import { e as getTabIndexAttribute, f as convertA11yKeysToHtmlFormat } from "../
 import { createPortal } from "react-dom";
 import { g as getDefaultExportFromCjs } from "../chunks/_commonjsHelpers.js";
 import { G as GOOGLE_MAPS_DIRECTIONS_BASE_URL, M as MIN_ZOOM, a as MAX_ZOOM, T as TestIds, D as DEFAULT_ZOOM, b as MAP_IDS, c as MAP_TYPES, d as MAP_MOBILE_CONTROL_SIZE, A as API_KEY, e as DEFAULT_LOCATION, f as DefaultTranslations, g as TranslationKeys, h as TRANSLATIONS_NAMESPACES, C as COMPANY_NAME_DEFAULT, i as COMPANY_NAME_KEY, j as COMPONENT_NAME_DEFAULT, k as COMPONENT_NAME_KEY } from "../chunks/consts.js";
-import { p as parse } from "../chunks/index4.js";
+import { p as parse } from "../chunks/index.js";
 import { useService } from "@wix/services-manager-react";
-import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { E as EnvironmentDefinition } from "../chunks/index3.js";
 import { u as useConsentPolicyProps, C as ConsentPolicyWrapper } from "../chunks/useConsentPolicyProps.js";
 import { T as TranslationsDefinition } from "../chunks/index6.js";
 import { g as getTranslation } from "../chunks/getTranslation.js";

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

@@ -7,7 +7,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { e as getTabIndexAttribute } from "../chunks/a11y.js";
 import { useService } from "@wix/services-manager-react";
 import { d as defineStaticService } from "../chunks/staticService.js";
-import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { E as EnvironmentDefinition } from "../chunks/index3.js";
 import { T as TranslationsDefinition } from "../chunks/index6.js";
 import { A as ARIA_LABEL_NAMESPACE } from "../chunks/constants35.js";
 const isBrowser = () => typeof window !== "undefined";

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

@@ -7,7 +7,7 @@ import * as React from "react";
 import { a as getData, g as getPlaceholder, S as STATIC_MEDIA_URL$1 } from "../chunks/index5.js";
 import { g as getMediaSizeQueryString, c as camelToKebab, a as getMediaUrlByContext, i as initCustomElement } from "../chunks/customElementInit.js";
 import { useService } from "@wix/services-manager-react";
-import { R as RenderingContextDefinition } from "../chunks/index3.js";
+import { R as RenderingContextDefinition } from "../chunks/index4.js";
 const image = "image__iWj48";
 const styles = {
   image

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

@@ -5,7 +5,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { e as getTabIndexAttribute, f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
-import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { E as EnvironmentDefinition } from "../chunks/index3.js";
 import { useService } from "@wix/services-manager-react";
 const semanticClassNames = {
   root: "line"

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

@@ -9,7 +9,7 @@ import { r as rootDataDefaults, s as semanticSelectors, A as ARIA_LABEL_NAMESPAC
 import React__default, { useEffect, useState, useRef, useMemo } from "react";
 import { g as getDefaultExportFromCjs } from "../chunks/_commonjsHelpers.js";
 import { f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
-import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { E as EnvironmentDefinition } from "../chunks/index3.js";
 import { u as useHasDisplayedElement } from "../chunks/useHasDisplayedElement.js";
 var lottie$2 = { exports: {} };
 var lottie$1 = lottie$2.exports;

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

@@ -13,7 +13,7 @@ import { L as Link } from "../chunks/Link.js";
 import { i as isEmptyObject, a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useResizeObserver } from "../chunks/useResizeObserver.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
-import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { E as EnvironmentDefinition } from "../chunks/index3.js";
 import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
 import { B as Button } from "../chunks/Button.js";
 import { f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";

package/dist/site/components/Menu/sdk.js

@@ -3,7 +3,7 @@ import { i as isNil, h as isDate, l as isObject, k as isArray } from "../chunks/
 import { b as registerCorvidMouseEvent } from "../chunks/corvidEvents.js";
 import { c as composeSDKFactories } from "../chunks/composeSDKFactories.js";
 import { v as validateMenuItems, c as createMenuDataItem } from "../chunks/utils3.js";
-import { L as LinkUtilsDefinition } from "../chunks/index.js";
+import { L as LinkUtilsDefinition } from "../chunks/index2.js";
 const sanitizeItem = (item) => Object.entries(item).reduce((acc, [key, value]) => {
   if (isNil(value)) {
     return acc;

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

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { c as clsx } from "../chunks/clsx.js";
 import { a as Fieldset, T as Tooltip, R as RadioGroup_RadioGroup_RadioGroup, b as Radio, c as InfoCircle_default } from "../chunks/index12.js";
 import { useService } from "@wix/services-manager-react";
-import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { E as EnvironmentDefinition } from "../chunks/index3.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";

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 }) })
     );
   });
 };

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

@@ -7,7 +7,7 @@ import { B as Button } from "../chunks/Button.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { useService } from "@wix/services-manager-react";
-import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { E as EnvironmentDefinition } from "../chunks/index3.js";
 import { T as TranslationsDefinition } from "../chunks/index6.js";
 import { g as getTranslation } from "../chunks/getTranslation.js";
 const validateActiveSlide = (activeSlide, slidesLength) => {