@wix/editor-react-components 1.2641.0 → 1.2642.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/site/components/Repeater/component.js +74 -40
  2. package/dist/site/components/Slideshow/css.css +6 -2
  3. package/dist/site/components/TextInput/component.js +3 -0
  4. package/package.json +3 -3
package/dist/site/components/Repeater/component.js CHANGED
@@ -70,6 +70,37 @@ const useItemsPerRow = (shouldMeasure) => {
70
70
  }, [shouldMeasure]);
71
71
  return [ref, count];
72
72
  };
73
+ const placeholder = "wds_1_324_0";
74
+ const versionedNamespace = placeholder.startsWith("wds_") ? placeholder : "";
75
+ const NAMESPACE = "wds";
76
+ const kebab = (value) => value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
77
+ const join = (...classes2) => classes2.filter(Boolean).join(" ");
78
+ const modifierTails = (node, props) => {
79
+ const variants = Object.entries(node.variants ?? {}).map(([name, values]) => {
80
+ const value = props[name];
81
+ if (!value || !values.includes(value))
82
+ return null;
83
+ return `--${kebab(name)}-${kebab(value)}`;
84
+ }).filter(Boolean);
85
+ const states = (node.states ?? []).filter((name) => props[name]).map((name) => `--${kebab(name)}`);
86
+ return [...variants, ...states];
87
+ };
88
+ const createClassNames = (blockName, config = {}, versionedNs = versionedNamespace) => {
89
+ const namespaces = versionedNs ? [NAMESPACE, versionedNs] : [NAMESPACE];
90
+ const nodeClassNames = (base, node) => (props = {}, ...classes2) => {
91
+ const tails = ["", ...modifierTails(node, props)];
92
+ return join(...namespaces.flatMap((ns) => tails.map((tail) => `${ns}-${base}${tail}`)), ...classes2);
93
+ };
94
+ const slots = Object.fromEntries(Object.entries(config).filter(([name]) => name !== "root").map(([name, node]) => [
95
+ name,
96
+ nodeClassNames(`${blockName}__${kebab(name)}`, node ?? {})
97
+ ]));
98
+ return {
99
+ ...slots,
100
+ root: nodeClassNames(blockName, config.root ?? {})
101
+ };
102
+ };
103
+ const defineClassNames = (blockName, config = {}) => createClassNames(blockName, config);
73
104
  function createStateClass(namespace, stateName, stateValue) {
74
105
  if (stateValue === false || stateValue === void 0 || stateValue === null || stateValue !== stateValue) {
75
106
  return "";
@@ -111,12 +142,9 @@ function statesRuntime(namespace, stateMapping) {
111
142
  }
112
143
  return classNames.join(" ");
113
144
  }
114
- var _namespace_$7 = "wds_1_297_0_colors";
115
- classesRuntime.bind(null, _namespace_$7);
116
- statesRuntime.bind(null, _namespace_$7);
117
- var _namespace_$6 = "wds_1_297_0_defaultscrollbar";
118
- classesRuntime.bind(null, _namespace_$6);
119
- statesRuntime.bind(null, _namespace_$6);
145
+ var _namespace_$4 = "wds_1_324_0_colors";
146
+ classesRuntime.bind(null, _namespace_$4);
147
+ statesRuntime.bind(null, _namespace_$4);
120
148
  const noop = () => {
121
149
  };
122
150
  let depLogger = {
@@ -163,19 +191,22 @@ const filterObject = (object, filter = () => true) => {
163
191
  }
164
192
  return output;
165
193
  };
166
- var _namespace_$5 = "wds_1_297_0_Box";
167
- var _style_$3 = classesRuntime.bind(null, _namespace_$5);
168
- statesRuntime.bind(null, _namespace_$5);
169
- var st$3 = _style_$3;
170
- var classes$3 = { "root": "wds_1_297_0_Box__root" };
171
- var vars$1 = { "gap": "--wds_1_297_0_Box-gap" };
172
- var _namespace_$4 = "wds_1_297_0_colorsjs";
173
- classesRuntime.bind(null, _namespace_$4);
174
- statesRuntime.bind(null, _namespace_$4);
175
- 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))" };
176
- var _namespace_$3 = "wds_1_297_0_spacing";
194
+ var _namespace_$3 = "wds_1_324_0_defaultscrollbar";
177
195
  classesRuntime.bind(null, _namespace_$3);
178
196
  statesRuntime.bind(null, _namespace_$3);
197
+ var _namespace_$2 = "wds_1_324_0_Box";
198
+ var _style_ = classesRuntime.bind(null, _namespace_$2);
199
+ statesRuntime.bind(null, _namespace_$2);
200
+ var st = _style_;
201
+ var classes$3 = { "root": "wds_1_324_0_Box__root" };
202
+ var vars = { "gap": "--wds_1_324_0_Box-gap" };
203
+ var _namespace_$1 = "wds_1_324_0_colorsjs";
204
+ classesRuntime.bind(null, _namespace_$1);
205
+ statesRuntime.bind(null, _namespace_$1);
206
+ 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))" };
207
+ var _namespace_ = "wds_1_324_0_spacing";
208
+ classesRuntime.bind(null, _namespace_);
209
+ statesRuntime.bind(null, _namespace_);
179
210
  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)" };
180
211
  const DIRECTION = {
181
212
  horizontal: "horizontal"
@@ -235,7 +266,7 @@ const Box = forwardRef(({ inline = false, direction = DIRECTION.horizontal, chil
235
266
  deprecationLog('<Box/> - prop "data-hook" is deprecated and will be removed in next major release, please use "dataHook" instead.');
236
267
  }
237
268
  }, [dataHookByKebabCase]);
238
- const rootClassNames = st$3(classes$3.root, {
269
+ const rootClassNames = st(classes$3.root, {
239
270
  inline,
240
271
  direction,
241
272
  alignItems: align,
@@ -273,7 +304,7 @@ const Box = forwardRef(({ inline = false, direction = DIRECTION.horizontal, chil
273
304
  borderBottomColor,
274
305
  borderLeftColor
275
306
  }),
276
- [vars$1["gap"]]: formatSpacingValue(gap) || 0,
307
+ [vars["gap"]]: formatSpacingValue(gap) || 0,
277
308
  ...nativeStyles
278
309
  };
279
310
  const rootStylesFiltered = filterObject(rootStyles, (_key, value) => typeof value !== "undefined");
@@ -281,29 +312,30 @@ const Box = forwardRef(({ inline = false, direction = DIRECTION.horizontal, chil
281
312
  return React__default.createElement("div", { "aria-label": ariaLabel, role, tabIndex, "data-hook": dataHook, className: rootClassNames, style: rootStylesFiltered, ref }, children);
282
313
  });
283
314
  Box.displayName = "Box";
284
- var _namespace_$2 = "wds_1_297_0_SkeletonGroup";
285
- var _style_$2 = classesRuntime.bind(null, _namespace_$2);
286
- statesRuntime.bind(null, _namespace_$2);
287
- var st$2 = _style_$2;
288
- var classes$2 = { "root": "wds_1_297_0_SkeletonGroup__root", "animator": "wds_1_297_0_SkeletonGroup__animator" };
289
- var vars = { "color": "--wds_1_297_0_SkeletonGroup-color" };
315
+ const classes$2 = defineClassNames("skeleton-group", {
316
+ root: {},
317
+ animator: {}
318
+ });
319
+ const SKELETON_GROUP_COLOR_PROPERTY = "--wds-internal-skeleton-group-color";
290
320
  const SkeletonGroupContext = React__default.createContext(void 0);
291
321
  function SkeletonGroup({ dataHook, className, skin = "light", children, backgroundColor }) {
292
322
  return React__default.createElement(
293
323
  "div",
294
- { "data-hook": dataHook, className: st$2(classes$2.root, className), style: {
295
- [vars["color"]]: backgroundColor
324
+ { "data-hook": dataHook, className: classes$2.root({}, className), style: {
325
+ [SKELETON_GROUP_COLOR_PROPERTY]: backgroundColor
296
326
  }, "data-status": "loading" },
297
327
  React__default.createElement(SkeletonGroupContext.Provider, { value: { skin } }, children),
298
- React__default.createElement("div", { className: classes$2.animator })
328
+ React__default.createElement("div", { className: classes$2.animator() })
299
329
  );
300
330
  }
301
331
  SkeletonGroup.displayName = "SkeletonGroup";
302
- var _namespace_$1 = "wds_1_297_0_SkeletonRectangle";
303
- var _style_$1 = classesRuntime.bind(null, _namespace_$1);
304
- statesRuntime.bind(null, _namespace_$1);
305
- var st$1 = _style_$1;
306
- var classes$1 = { "root": "wds_1_297_0_SkeletonRectangle__root" };
332
+ const classes$1 = defineClassNames("skeleton-rectangle", {
333
+ root: {
334
+ variants: {
335
+ skin: ["dark", "light"]
336
+ }
337
+ }
338
+ });
307
339
  const DEFAULT_HEIGHT = "100%";
308
340
  const DEFAULT_WIDTH$1 = "100%";
309
341
  const DEFAULT_SKIN = "light";
@@ -314,16 +346,18 @@ function SkeletonRectangle(props) {
314
346
  return React__default.createElement(
315
347
  "div",
316
348
  { "data-hook": dataHook, className, "data-height": height, "data-width": width, "data-skin": skin },
317
- React__default.createElement(Box, { height, width, margin, marginLeft, marginRight, marginTop, marginBottom, className: st$1(classes$1.root, { skin }) })
349
+ React__default.createElement(Box, { height, width, margin, marginLeft, marginRight, marginTop, marginBottom, className: classes$1.root({ skin }) })
318
350
  );
319
351
  });
320
352
  }
321
353
  SkeletonRectangle.displayName = "SkeletonRectangle";
322
- var _namespace_ = "wds_1_297_0_SkeletonLine";
323
- var _style_ = classesRuntime.bind(null, _namespace_);
324
- statesRuntime.bind(null, _namespace_);
325
- var st = _style_;
326
- var classes = { "root": "wds_1_297_0_SkeletonLine__root" };
354
+ const classes = defineClassNames("skeleton-line", {
355
+ root: {
356
+ variants: {
357
+ skin: ["dark", "light"]
358
+ }
359
+ }
360
+ });
327
361
  const HEIGHT = "11px";
328
362
  const DEFAULT_WIDTH = "100%";
329
363
  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
332
366
  return React__default.createElement(
333
367
  "div",
334
368
  { "data-hook": dataHook, className, "data-width": width, "data-skin": skin },
335
- React__default.createElement(Box, { height: HEIGHT, width, margin, marginLeft, marginRight, marginTop, marginBottom, className: st(classes.root, { skin }) })
369
+ React__default.createElement(Box, { height: HEIGHT, width, margin, marginLeft, marginRight, marginTop, marginBottom, className: classes.root({ skin }) })
336
370
  );
337
371
  });
338
372
  };