@descope/web-components-ui 1.0.221 → 1.0.223

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 (45) hide show
  1. package/dist/cjs/index.cjs.js +790 -642
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +778 -631
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/1000.js +1 -1
  6. package/dist/umd/1037.js +2 -0
  7. package/dist/umd/1037.js.LICENSE.txt +5 -0
  8. package/dist/umd/1932.js +310 -0
  9. package/dist/umd/1932.js.LICENSE.txt +5 -0
  10. package/dist/umd/1990.js +1 -1
  11. package/dist/umd/262.js +2 -0
  12. package/dist/umd/262.js.LICENSE.txt +5 -0
  13. package/dist/umd/3660.js +17 -0
  14. package/dist/umd/3660.js.LICENSE.txt +23 -0
  15. package/dist/umd/3952.js +123 -0
  16. package/dist/umd/{1883.js → 4273.js} +5 -5
  17. package/dist/umd/5345.js +94 -0
  18. package/dist/umd/5345.js.LICENSE.txt +11 -0
  19. package/dist/umd/5806.js +1 -1
  20. package/dist/umd/6116.js +8 -8
  21. package/dist/umd/7056.js +1 -1
  22. package/dist/umd/7101.js +1 -1
  23. package/dist/umd/7196.js +360 -0
  24. package/dist/umd/{1852.js.LICENSE.txt → 7196.js.LICENSE.txt} +0 -12
  25. package/dist/umd/8725.js +2 -2
  26. package/dist/umd/9211.js +2 -2
  27. package/dist/umd/9437.js +1 -1
  28. package/dist/umd/9515.js +1 -1
  29. package/dist/umd/descope-combo-box-index-js.js +1 -1
  30. package/dist/umd/descope-modal-index-js.js +1 -0
  31. package/dist/umd/index.js +1 -1
  32. package/package.json +3 -2
  33. package/src/components/descope-modal/ModalClass.js +109 -0
  34. package/src/components/descope-modal/index.js +6 -0
  35. package/src/index.cjs.js +1 -0
  36. package/src/mixins/createStyleMixin/helpers.js +2 -2
  37. package/src/mixins/createStyleMixin/index.js +2 -2
  38. package/src/mixins/portalMixin.js +24 -4
  39. package/src/theme/components/button.js +7 -0
  40. package/src/theme/components/index.js +2 -0
  41. package/src/theme/components/modal.js +16 -0
  42. package/dist/umd/1852.js +0 -375
  43. package/dist/umd/4767.js +0 -215
  44. /package/dist/umd/{4767.js.LICENSE.txt → 3952.js.LICENSE.txt} +0 -0
  45. /package/dist/umd/{1883.js.LICENSE.txt → 4273.js.LICENSE.txt} +0 -0
package/dist/index.esm.js CHANGED
@@ -231,11 +231,11 @@ const createStyle = (componentName, baseSelector, mappings) => {
231
231
 
232
232
  const cssVarName = getCssVarName(componentName, attr);
233
233
 
234
- attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property }) => {
234
+ attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property, important }) => {
235
235
  style.add(
236
236
  createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
237
237
  isFunction(property) ? property() : property,
238
- createCssVarFallback(cssVarName)
238
+ createCssVarFallback(cssVarName) + (important ? '!important' : '')
239
239
  );
240
240
  });
241
241
  });
@@ -392,10 +392,10 @@ const createStyleMixin =
392
392
  (this.#rootElement.classList || this.#rootElement.host.classList).add(className);
393
393
  }
394
394
 
395
- init() {
395
+ async init() {
396
396
  super.init?.();
397
397
  if (this.shadowRoot.isConnected) {
398
- this.#rootElement = this.#getRootElement?.(this) || this.shadowRoot;
398
+ this.#rootElement = (await this.#getRootElement?.(this)) || this.shadowRoot;
399
399
 
400
400
  this.#addClassName(componentName);
401
401
 
@@ -1048,7 +1048,27 @@ const DISPLAY_NAME_SEPARATOR = '_';
1048
1048
 
1049
1049
  const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
1050
1050
 
1051
- const getDomNode = (maybeDomNode) => maybeDomNode.host || maybeDomNode;
1051
+ const withWaitForShadowRoot = (getRootElementFn) => (that) =>
1052
+ new Promise((res) => {
1053
+ const MAX_RETRIES = 20;
1054
+ const ele = getRootElementFn(that);
1055
+ let counter = 0;
1056
+
1057
+ const check = () => {
1058
+ if (counter > MAX_RETRIES) {
1059
+ // eslint-disable-next-line no-console
1060
+ console.error('could not get shadow root for element', ele);
1061
+ res(ele);
1062
+ return;
1063
+ }
1064
+
1065
+ counter++;
1066
+
1067
+ if (!ele.shadowRoot) setTimeout(check);
1068
+ else res(ele.shadowRoot);
1069
+ };
1070
+ check();
1071
+ });
1052
1072
 
1053
1073
  const portalMixin =
1054
1074
  ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
@@ -1078,17 +1098,17 @@ const portalMixin =
1078
1098
  const baseEle = that.shadowRoot.querySelector(that.baseSelector);
1079
1099
  const portal = selector ? baseEle.shadowRoot.querySelector(selector) : baseEle;
1080
1100
 
1081
- return portal.shadowRoot || portal;
1101
+ return portal;
1082
1102
  };
1083
1103
 
1084
1104
  super({
1085
- getRootElement,
1105
+ getRootElement: withWaitForShadowRoot(getRootElement),
1086
1106
  componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
1087
1107
  themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
1088
1108
  baseSelector: ':host',
1089
1109
  });
1090
1110
 
1091
- this.#portalEle = getDomNode(getRootElement(this));
1111
+ this.#portalEle = getRootElement(this);
1092
1112
  }
1093
1113
 
1094
1114
  #handleHoverAttribute() {
@@ -1214,7 +1234,7 @@ const clickableMixin = (superclass) =>
1214
1234
  }
1215
1235
  };
1216
1236
 
1217
- const componentName$w = getComponentName('button');
1237
+ const componentName$x = getComponentName('button');
1218
1238
 
1219
1239
  const resetStyles = `
1220
1240
  :host {
@@ -1311,7 +1331,7 @@ const ButtonClass = compose(
1311
1331
  }
1312
1332
  `,
1313
1333
  excludeAttrsSync: ['tabindex'],
1314
- componentName: componentName$w,
1334
+ componentName: componentName$x,
1315
1335
  })
1316
1336
  );
1317
1337
 
@@ -1348,7 +1368,7 @@ loadingIndicatorStyles = `
1348
1368
  }
1349
1369
  `;
1350
1370
 
1351
- customElements.define(componentName$w, ButtonClass);
1371
+ customElements.define(componentName$x, ButtonClass);
1352
1372
 
1353
1373
  const createBaseInputClass = (...args) =>
1354
1374
  compose(
@@ -1358,11 +1378,11 @@ const createBaseInputClass = (...args) =>
1358
1378
  inputEventsDispatchingMixin
1359
1379
  )(createBaseClass(...args));
1360
1380
 
1361
- const componentName$v = getComponentName('boolean-field-internal');
1381
+ const componentName$w = getComponentName('boolean-field-internal');
1362
1382
 
1363
1383
  const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
1364
1384
 
1365
- const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$v, baseSelector: 'div' });
1385
+ const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$w, baseSelector: 'div' });
1366
1386
 
1367
1387
  class BooleanInputInternal extends BaseInputClass$5 {
1368
1388
  constructor() {
@@ -1422,14 +1442,14 @@ const booleanFieldMixin = (superclass) =>
1422
1442
 
1423
1443
  const template = document.createElement('template');
1424
1444
  template.innerHTML = `
1425
- <${componentName$v}
1445
+ <${componentName$w}
1426
1446
  tabindex="-1"
1427
1447
  slot="input"
1428
- ></${componentName$v}>
1448
+ ></${componentName$w}>
1429
1449
  `;
1430
1450
 
1431
1451
  this.baseElement.appendChild(template.content.cloneNode(true));
1432
- this.inputElement = this.shadowRoot.querySelector(componentName$v);
1452
+ this.inputElement = this.shadowRoot.querySelector(componentName$w);
1433
1453
  this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
1434
1454
 
1435
1455
  forwardAttrs(this, this.inputElement, {
@@ -1592,7 +1612,7 @@ descope-boolean-field-internal {
1592
1612
  }
1593
1613
  `;
1594
1614
 
1595
- const componentName$u = getComponentName('checkbox');
1615
+ const componentName$v = getComponentName('checkbox');
1596
1616
 
1597
1617
  const {
1598
1618
  host: host$e,
@@ -1689,15 +1709,15 @@ const CheckboxClass = compose(
1689
1709
  }
1690
1710
  `,
1691
1711
  excludeAttrsSync: ['label', 'tabindex'],
1692
- componentName: componentName$u,
1712
+ componentName: componentName$v,
1693
1713
  })
1694
1714
  );
1695
1715
 
1696
- customElements.define(componentName$v, BooleanInputInternal);
1716
+ customElements.define(componentName$w, BooleanInputInternal);
1697
1717
 
1698
- customElements.define(componentName$u, CheckboxClass);
1718
+ customElements.define(componentName$v, CheckboxClass);
1699
1719
 
1700
- const componentName$t = getComponentName('switch-toggle');
1720
+ const componentName$u = getComponentName('switch-toggle');
1701
1721
 
1702
1722
  const {
1703
1723
  host: host$d,
@@ -1816,17 +1836,17 @@ const SwitchToggleClass = compose(
1816
1836
  }
1817
1837
  `,
1818
1838
  excludeAttrsSync: ['label', 'tabindex'],
1819
- componentName: componentName$t,
1839
+ componentName: componentName$u,
1820
1840
  })
1821
1841
  );
1822
1842
 
1823
- customElements.define(componentName$t, SwitchToggleClass);
1843
+ customElements.define(componentName$u, SwitchToggleClass);
1824
1844
 
1825
- const componentName$s = getComponentName('loader-linear');
1845
+ const componentName$t = getComponentName('loader-linear');
1826
1846
 
1827
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$s, baseSelector: ':host > div' }) {
1847
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$t, baseSelector: ':host > div' }) {
1828
1848
  static get componentName() {
1829
- return componentName$s;
1849
+ return componentName$t;
1830
1850
  }
1831
1851
 
1832
1852
  constructor() {
@@ -1887,11 +1907,11 @@ const LoaderLinearClass = compose(
1887
1907
  componentNameValidationMixin
1888
1908
  )(RawLoaderLinear);
1889
1909
 
1890
- customElements.define(componentName$s, LoaderLinearClass);
1910
+ customElements.define(componentName$t, LoaderLinearClass);
1891
1911
 
1892
- const componentName$r = getComponentName('loader-radial');
1912
+ const componentName$s = getComponentName('loader-radial');
1893
1913
 
1894
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$r, baseSelector: ':host > div' }) {
1914
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$s, baseSelector: ':host > div' }) {
1895
1915
  constructor() {
1896
1916
  super();
1897
1917
 
@@ -1935,11 +1955,11 @@ const LoaderRadialClass = compose(
1935
1955
  componentNameValidationMixin
1936
1956
  )(RawLoaderRadial);
1937
1957
 
1938
- customElements.define(componentName$r, LoaderRadialClass);
1958
+ customElements.define(componentName$s, LoaderRadialClass);
1939
1959
 
1940
- const componentName$q = getComponentName('container');
1960
+ const componentName$r = getComponentName('container');
1941
1961
 
1942
- class RawContainer extends createBaseClass({ componentName: componentName$q, baseSelector: ':host > slot' }) {
1962
+ class RawContainer extends createBaseClass({ componentName: componentName$r, baseSelector: ':host > slot' }) {
1943
1963
  constructor() {
1944
1964
  super();
1945
1965
 
@@ -1991,10 +2011,10 @@ const ContainerClass = compose(
1991
2011
  componentNameValidationMixin
1992
2012
  )(RawContainer);
1993
2013
 
1994
- customElements.define(componentName$q, ContainerClass);
2014
+ customElements.define(componentName$r, ContainerClass);
1995
2015
 
1996
- const componentName$p = getComponentName('divider');
1997
- class RawDivider extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > div' }) {
2016
+ const componentName$q = getComponentName('divider');
2017
+ class RawDivider extends createBaseClass({ componentName: componentName$q, baseSelector: ':host > div' }) {
1998
2018
  constructor() {
1999
2019
  super();
2000
2020
 
@@ -2092,9 +2112,9 @@ const DividerClass = compose(
2092
2112
 
2093
2113
  // eslint-disable-next-line max-classes-per-file
2094
2114
 
2095
- const componentName$o = getComponentName('text');
2115
+ const componentName$p = getComponentName('text');
2096
2116
 
2097
- class RawText extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > slot' }) {
2117
+ class RawText extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > slot' }) {
2098
2118
  constructor() {
2099
2119
  super();
2100
2120
 
@@ -2153,9 +2173,9 @@ const TextClass = compose(
2153
2173
  customTextMixin
2154
2174
  )(RawText);
2155
2175
 
2156
- customElements.define(componentName$o, TextClass);
2176
+ customElements.define(componentName$p, TextClass);
2157
2177
 
2158
- customElements.define(componentName$p, DividerClass);
2178
+ customElements.define(componentName$q, DividerClass);
2159
2179
 
2160
2180
  const { host: host$a, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$8, inputField: inputField$5, input, helperText: helperText$6, errorMessage: errorMessage$8 } =
2161
2181
  {
@@ -2211,9 +2231,9 @@ var textFieldMappings = {
2211
2231
  inputPlaceholderColor: { ...placeholder$2, property: 'color' },
2212
2232
  };
2213
2233
 
2214
- const componentName$n = getComponentName('email-field');
2234
+ const componentName$o = getComponentName('email-field');
2215
2235
 
2216
- const customMixin$6 = (superclass) =>
2236
+ const customMixin$7 = (superclass) =>
2217
2237
  class EmailFieldMixinClass extends superclass {
2218
2238
  init() {
2219
2239
  super.init?.();
@@ -2227,7 +2247,7 @@ const EmailFieldClass = compose(
2227
2247
  draggableMixin,
2228
2248
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
2229
2249
  componentNameValidationMixin,
2230
- customMixin$6
2250
+ customMixin$7
2231
2251
  )(
2232
2252
  createProxy({
2233
2253
  slots: ['', 'suffix'],
@@ -2245,15 +2265,15 @@ const EmailFieldClass = compose(
2245
2265
  ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
2246
2266
  `,
2247
2267
  excludeAttrsSync: ['tabindex'],
2248
- componentName: componentName$n,
2268
+ componentName: componentName$o,
2249
2269
  })
2250
2270
  );
2251
2271
 
2252
- customElements.define(componentName$n, EmailFieldClass);
2272
+ customElements.define(componentName$o, EmailFieldClass);
2253
2273
 
2254
- const componentName$m = getComponentName('link');
2274
+ const componentName$n = getComponentName('link');
2255
2275
 
2256
- class RawLink extends createBaseClass({ componentName: componentName$m, baseSelector: ':host a' }) {
2276
+ class RawLink extends createBaseClass({ componentName: componentName$n, baseSelector: ':host a' }) {
2257
2277
  constructor() {
2258
2278
  super();
2259
2279
 
@@ -2317,7 +2337,7 @@ const LinkClass = compose(
2317
2337
  componentNameValidationMixin
2318
2338
  )(RawLink);
2319
2339
 
2320
- customElements.define(componentName$m, LinkClass);
2340
+ customElements.define(componentName$n, LinkClass);
2321
2341
 
2322
2342
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
2323
2343
  let style;
@@ -2369,27 +2389,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
2369
2389
  return CssVarImageClass;
2370
2390
  };
2371
2391
 
2372
- const componentName$l = getComponentName('logo');
2392
+ const componentName$m = getComponentName('logo');
2373
2393
 
2374
2394
  const LogoClass = createCssVarImageClass({
2375
- componentName: componentName$l,
2395
+ componentName: componentName$m,
2376
2396
  varName: 'url',
2377
2397
  fallbackVarName: 'fallbackUrl',
2378
2398
  });
2379
2399
 
2380
- customElements.define(componentName$l, LogoClass);
2400
+ customElements.define(componentName$m, LogoClass);
2381
2401
 
2382
- const componentName$k = getComponentName('totp-image');
2402
+ const componentName$l = getComponentName('totp-image');
2383
2403
 
2384
2404
  const TotpImageClass = createCssVarImageClass({
2385
- componentName: componentName$k,
2405
+ componentName: componentName$l,
2386
2406
  varName: 'url',
2387
2407
  fallbackVarName: 'fallbackUrl',
2388
2408
  });
2389
2409
 
2390
- customElements.define(componentName$k, TotpImageClass);
2410
+ customElements.define(componentName$l, TotpImageClass);
2391
2411
 
2392
- const componentName$j = getComponentName('number-field');
2412
+ const componentName$k = getComponentName('number-field');
2393
2413
 
2394
2414
  const NumberFieldClass = compose(
2395
2415
  createStyleMixin({
@@ -2414,11 +2434,11 @@ const NumberFieldClass = compose(
2414
2434
  ${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
2415
2435
  `,
2416
2436
  excludeAttrsSync: ['tabindex'],
2417
- componentName: componentName$j,
2437
+ componentName: componentName$k,
2418
2438
  })
2419
2439
  );
2420
2440
 
2421
- customElements.define(componentName$j, NumberFieldClass);
2441
+ customElements.define(componentName$k, NumberFieldClass);
2422
2442
 
2423
2443
  const focusElement = (ele) => {
2424
2444
  ele?.focus();
@@ -2436,13 +2456,13 @@ const getSanitizedCharacters = (str) => {
2436
2456
 
2437
2457
  /* eslint-disable no-param-reassign */
2438
2458
 
2439
- const componentName$i = getComponentName('passcode-internal');
2459
+ const componentName$j = getComponentName('passcode-internal');
2440
2460
 
2441
2461
  const observedAttributes$5 = ['digits'];
2442
2462
 
2443
2463
  const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
2444
2464
 
2445
- const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$i, baseSelector: 'div' });
2465
+ const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$j, baseSelector: 'div' });
2446
2466
 
2447
2467
  class PasscodeInternal extends BaseInputClass$4 {
2448
2468
  static get observedAttributes() {
@@ -2639,11 +2659,11 @@ class PasscodeInternal extends BaseInputClass$4 {
2639
2659
  }
2640
2660
  }
2641
2661
 
2642
- const componentName$h = getComponentName('text-field');
2662
+ const componentName$i = getComponentName('text-field');
2643
2663
 
2644
2664
  const observedAttrs = ['type'];
2645
2665
 
2646
- const customMixin$5 = (superclass) =>
2666
+ const customMixin$6 = (superclass) =>
2647
2667
  class TextFieldClass extends superclass {
2648
2668
  static get observedAttributes() {
2649
2669
  return observedAttrs.concat(superclass.observedAttributes || []);
@@ -2670,7 +2690,7 @@ const TextFieldClass = compose(
2670
2690
  draggableMixin,
2671
2691
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
2672
2692
  componentNameValidationMixin,
2673
- customMixin$5
2693
+ customMixin$6
2674
2694
  )(
2675
2695
  createProxy({
2676
2696
  slots: ['prefix', 'suffix'],
@@ -2688,15 +2708,15 @@ const TextFieldClass = compose(
2688
2708
  ${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
2689
2709
  `,
2690
2710
  excludeAttrsSync: ['tabindex'],
2691
- componentName: componentName$h,
2711
+ componentName: componentName$i,
2692
2712
  })
2693
2713
  );
2694
2714
 
2695
- const componentName$g = getComponentName('passcode');
2715
+ const componentName$h = getComponentName('passcode');
2696
2716
 
2697
2717
  const observedAttributes$4 = ['digits'];
2698
2718
 
2699
- const customMixin$4 = (superclass) =>
2719
+ const customMixin$5 = (superclass) =>
2700
2720
  class PasscodeMixinClass extends superclass {
2701
2721
  static get observedAttributes() {
2702
2722
  return observedAttributes$4.concat(superclass.observedAttributes || []);
@@ -2711,17 +2731,17 @@ const customMixin$4 = (superclass) =>
2711
2731
  const template = document.createElement('template');
2712
2732
 
2713
2733
  template.innerHTML = `
2714
- <${componentName$i}
2734
+ <${componentName$j}
2715
2735
  bordered="true"
2716
2736
  name="code"
2717
2737
  tabindex="-1"
2718
2738
  slot="input"
2719
- ><slot></slot></${componentName$i}>
2739
+ ><slot></slot></${componentName$j}>
2720
2740
  `;
2721
2741
 
2722
2742
  this.baseElement.appendChild(template.content.cloneNode(true));
2723
2743
 
2724
- this.inputElement = this.shadowRoot.querySelector(componentName$i);
2744
+ this.inputElement = this.shadowRoot.querySelector(componentName$j);
2725
2745
 
2726
2746
  forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
2727
2747
  }
@@ -2788,7 +2808,7 @@ const PasscodeClass = compose(
2788
2808
  draggableMixin,
2789
2809
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
2790
2810
  componentNameValidationMixin,
2791
- customMixin$4
2811
+ customMixin$5
2792
2812
  )(
2793
2813
  createProxy({
2794
2814
  slots: [],
@@ -2859,15 +2879,15 @@ const PasscodeClass = compose(
2859
2879
  ${resetInputCursor('vaadin-text-field')}
2860
2880
  `,
2861
2881
  excludeAttrsSync: ['tabindex'],
2862
- componentName: componentName$g,
2882
+ componentName: componentName$h,
2863
2883
  })
2864
2884
  );
2865
2885
 
2866
- customElements.define(componentName$h, TextFieldClass);
2886
+ customElements.define(componentName$i, TextFieldClass);
2867
2887
 
2868
- customElements.define(componentName$i, PasscodeInternal);
2888
+ customElements.define(componentName$j, PasscodeInternal);
2869
2889
 
2870
- customElements.define(componentName$g, PasscodeClass);
2890
+ customElements.define(componentName$h, PasscodeClass);
2871
2891
 
2872
2892
  const passwordDraggableMixin = (superclass) =>
2873
2893
  class PasswordDraggableMixinClass extends superclass {
@@ -2903,7 +2923,7 @@ const passwordDraggableMixin = (superclass) =>
2903
2923
  }
2904
2924
  };
2905
2925
 
2906
- const componentName$f = getComponentName('password');
2926
+ const componentName$g = getComponentName('password');
2907
2927
 
2908
2928
  const {
2909
2929
  host: host$7,
@@ -3032,13 +3052,13 @@ const PasswordClass = compose(
3032
3052
  }
3033
3053
  `,
3034
3054
  excludeAttrsSync: ['tabindex'],
3035
- componentName: componentName$f,
3055
+ componentName: componentName$g,
3036
3056
  })
3037
3057
  );
3038
3058
 
3039
- customElements.define(componentName$f, PasswordClass);
3059
+ customElements.define(componentName$g, PasswordClass);
3040
3060
 
3041
- const componentName$e = getComponentName('text-area');
3061
+ const componentName$f = getComponentName('text-area');
3042
3062
 
3043
3063
  const {
3044
3064
  host: host$6,
@@ -3111,17 +3131,17 @@ const TextAreaClass = compose(
3111
3131
  ${resetInputCursor('vaadin-text-area')}
3112
3132
  `,
3113
3133
  excludeAttrsSync: ['tabindex'],
3114
- componentName: componentName$e,
3134
+ componentName: componentName$f,
3115
3135
  })
3116
3136
  );
3117
3137
 
3118
- customElements.define(componentName$e, TextAreaClass);
3138
+ customElements.define(componentName$f, TextAreaClass);
3119
3139
 
3120
3140
  const observedAttributes$3 = ['src', 'alt'];
3121
3141
 
3122
- const componentName$d = getComponentName('image');
3142
+ const componentName$e = getComponentName('image');
3123
3143
 
3124
- const BaseClass$1 = createBaseClass({ componentName: componentName$d, baseSelector: ':host > img' });
3144
+ const BaseClass$1 = createBaseClass({ componentName: componentName$e, baseSelector: ':host > img' });
3125
3145
  class RawImage extends BaseClass$1 {
3126
3146
  static get observedAttributes() {
3127
3147
  return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
@@ -3161,9 +3181,9 @@ const ImageClass = compose(
3161
3181
  draggableMixin
3162
3182
  )(RawImage);
3163
3183
 
3164
- customElements.define(componentName$d, ImageClass);
3184
+ customElements.define(componentName$e, ImageClass);
3165
3185
 
3166
- const componentName$c = getComponentName('combo-box');
3186
+ const componentName$d = getComponentName('combo-box');
3167
3187
 
3168
3188
  const ComboBoxMixin = (superclass) =>
3169
3189
  class ComboBoxMixinClass extends superclass {
@@ -3514,12 +3534,12 @@ const ComboBoxClass = compose(
3514
3534
  // and reset items to an empty array, and opening the list box with no items
3515
3535
  // to display.
3516
3536
  excludeAttrsSync: ['tabindex', 'size', 'data'],
3517
- componentName: componentName$c,
3537
+ componentName: componentName$d,
3518
3538
  includeForwardProps: ['items', 'renderer', 'selectedItem'],
3519
3539
  })
3520
3540
  );
3521
3541
 
3522
- customElements.define(componentName$c, ComboBoxClass);
3542
+ customElements.define(componentName$d, ComboBoxClass);
3523
3543
 
3524
3544
  var CountryCodes = [
3525
3545
  {
@@ -4759,7 +4779,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
4759
4779
  </div>
4760
4780
  `;
4761
4781
 
4762
- const componentName$b = getComponentName('phone-field-internal');
4782
+ const componentName$c = getComponentName('phone-field-internal');
4763
4783
 
4764
4784
  const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
4765
4785
  const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -4771,7 +4791,7 @@ const mapAttrs$1 = {
4771
4791
 
4772
4792
  const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
4773
4793
 
4774
- const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$b, baseSelector: 'div' });
4794
+ const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$c, baseSelector: 'div' });
4775
4795
 
4776
4796
  let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
4777
4797
  static get observedAttributes() {
@@ -4943,14 +4963,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
4943
4963
  }
4944
4964
  };
4945
4965
 
4946
- customElements.define(componentName$b, PhoneFieldInternal$1);
4966
+ customElements.define(componentName$c, PhoneFieldInternal$1);
4947
4967
 
4948
4968
  const textVars$1 = TextFieldClass.cssVarList;
4949
4969
  const comboVars = ComboBoxClass.cssVarList;
4950
4970
 
4951
- const componentName$a = getComponentName('phone-field');
4971
+ const componentName$b = getComponentName('phone-field');
4952
4972
 
4953
- const customMixin$3 = (superclass) =>
4973
+ const customMixin$4 = (superclass) =>
4954
4974
  class PhoneFieldMixinClass extends superclass {
4955
4975
  static get CountryCodes() {
4956
4976
  return CountryCodes;
@@ -4962,15 +4982,15 @@ const customMixin$3 = (superclass) =>
4962
4982
  const template = document.createElement('template');
4963
4983
 
4964
4984
  template.innerHTML = `
4965
- <${componentName$b}
4985
+ <${componentName$c}
4966
4986
  tabindex="-1"
4967
4987
  slot="input"
4968
- ></${componentName$b}>
4988
+ ></${componentName$c}>
4969
4989
  `;
4970
4990
 
4971
4991
  this.baseElement.appendChild(template.content.cloneNode(true));
4972
4992
 
4973
- this.inputElement = this.shadowRoot.querySelector(componentName$b);
4993
+ this.inputElement = this.shadowRoot.querySelector(componentName$c);
4974
4994
 
4975
4995
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
4976
4996
  includeAttrs: [
@@ -5089,7 +5109,7 @@ const PhoneFieldClass = compose(
5089
5109
  }),
5090
5110
  draggableMixin,
5091
5111
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
5092
- customMixin$3
5112
+ customMixin$4
5093
5113
  )(
5094
5114
  createProxy({
5095
5115
  slots: [],
@@ -5165,17 +5185,17 @@ const PhoneFieldClass = compose(
5165
5185
  }
5166
5186
  `,
5167
5187
  excludeAttrsSync: ['tabindex'],
5168
- componentName: componentName$a,
5188
+ componentName: componentName$b,
5169
5189
  })
5170
5190
  );
5171
5191
 
5172
- customElements.define(componentName$a, PhoneFieldClass);
5192
+ customElements.define(componentName$b, PhoneFieldClass);
5173
5193
 
5174
5194
  const getCountryByCodeId = (countryCode) => {
5175
5195
  return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
5176
5196
  };
5177
5197
 
5178
- const componentName$9 = getComponentName('phone-field-internal-input-box');
5198
+ const componentName$a = getComponentName('phone-field-internal-input-box');
5179
5199
 
5180
5200
  const observedAttributes$2 = [
5181
5201
  'disabled',
@@ -5189,7 +5209,7 @@ const mapAttrs = {
5189
5209
  'phone-input-placeholder': 'placeholder',
5190
5210
  };
5191
5211
 
5192
- const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$9, baseSelector: 'div' });
5212
+ const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
5193
5213
 
5194
5214
  class PhoneFieldInternal extends BaseInputClass$2 {
5195
5215
  static get observedAttributes() {
@@ -5328,13 +5348,13 @@ class PhoneFieldInternal extends BaseInputClass$2 {
5328
5348
  }
5329
5349
  }
5330
5350
 
5331
- customElements.define(componentName$9, PhoneFieldInternal);
5351
+ customElements.define(componentName$a, PhoneFieldInternal);
5332
5352
 
5333
5353
  const textVars = TextFieldClass.cssVarList;
5334
5354
 
5335
- const componentName$8 = getComponentName('phone-input-box-field');
5355
+ const componentName$9 = getComponentName('phone-input-box-field');
5336
5356
 
5337
- const customMixin$2 = (superclass) =>
5357
+ const customMixin$3 = (superclass) =>
5338
5358
  class PhoneInputBoxFieldMixinClass extends superclass {
5339
5359
  static get CountryCodes() {
5340
5360
  return CountryCodes;
@@ -5346,15 +5366,15 @@ const customMixin$2 = (superclass) =>
5346
5366
  const template = document.createElement('template');
5347
5367
 
5348
5368
  template.innerHTML = `
5349
- <${componentName$9}
5369
+ <${componentName$a}
5350
5370
  tabindex="-1"
5351
5371
  slot="input"
5352
- ></${componentName$9}>
5372
+ ></${componentName$a}>
5353
5373
  `;
5354
5374
 
5355
5375
  this.baseElement.appendChild(template.content.cloneNode(true));
5356
5376
 
5357
- this.inputElement = this.shadowRoot.querySelector(componentName$9);
5377
+ this.inputElement = this.shadowRoot.querySelector(componentName$a);
5358
5378
 
5359
5379
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
5360
5380
  includeAttrs: [
@@ -5420,7 +5440,7 @@ const PhoneFieldInputBoxClass = compose(
5420
5440
  }),
5421
5441
  draggableMixin,
5422
5442
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
5423
- customMixin$2
5443
+ customMixin$3
5424
5444
  )(
5425
5445
  createProxy({
5426
5446
  slots: [],
@@ -5486,17 +5506,17 @@ const PhoneFieldInputBoxClass = compose(
5486
5506
  }
5487
5507
  `,
5488
5508
  excludeAttrsSync: ['tabindex'],
5489
- componentName: componentName$8,
5509
+ componentName: componentName$9,
5490
5510
  })
5491
5511
  );
5492
5512
 
5493
- customElements.define(componentName$8, PhoneFieldInputBoxClass);
5513
+ customElements.define(componentName$9, PhoneFieldInputBoxClass);
5494
5514
 
5495
- const componentName$7 = getComponentName('new-password-internal');
5515
+ const componentName$8 = getComponentName('new-password-internal');
5496
5516
 
5497
- const componentName$6 = getComponentName('new-password');
5517
+ const componentName$7 = getComponentName('new-password');
5498
5518
 
5499
- const customMixin$1 = (superclass) =>
5519
+ const customMixin$2 = (superclass) =>
5500
5520
  class NewPasswordMixinClass extends superclass {
5501
5521
  init() {
5502
5522
  super.init?.();
@@ -5504,16 +5524,16 @@ const customMixin$1 = (superclass) =>
5504
5524
  const template = document.createElement('template');
5505
5525
 
5506
5526
  template.innerHTML = `
5507
- <${componentName$7}
5527
+ <${componentName$8}
5508
5528
  name="new-password"
5509
5529
  tabindex="-1"
5510
5530
  slot="input"
5511
- ></${componentName$7}>
5531
+ ></${componentName$8}>
5512
5532
  `;
5513
5533
 
5514
5534
  this.baseElement.appendChild(template.content.cloneNode(true));
5515
5535
 
5516
- this.inputElement = this.shadowRoot.querySelector(componentName$7);
5536
+ this.inputElement = this.shadowRoot.querySelector(componentName$8);
5517
5537
 
5518
5538
  forwardAttrs(this, this.inputElement, {
5519
5539
  includeAttrs: [
@@ -5563,7 +5583,7 @@ const NewPasswordClass = compose(
5563
5583
  }),
5564
5584
  draggableMixin,
5565
5585
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
5566
- customMixin$1
5586
+ customMixin$2
5567
5587
  )(
5568
5588
  createProxy({
5569
5589
  slots: [],
@@ -5612,7 +5632,7 @@ const NewPasswordClass = compose(
5612
5632
  },
5613
5633
  `,
5614
5634
  excludeAttrsSync: ['tabindex'],
5615
- componentName: componentName$6,
5635
+ componentName: componentName$7,
5616
5636
  })
5617
5637
  );
5618
5638
 
@@ -5637,7 +5657,7 @@ const commonAttrs = [
5637
5657
 
5638
5658
  const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
5639
5659
 
5640
- const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
5660
+ const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$8, baseSelector: 'div' });
5641
5661
 
5642
5662
  class NewPasswordInternal extends BaseInputClass$1 {
5643
5663
  static get observedAttributes() {
@@ -5797,16 +5817,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
5797
5817
  }
5798
5818
  }
5799
5819
 
5800
- customElements.define(componentName$7, NewPasswordInternal);
5820
+ customElements.define(componentName$8, NewPasswordInternal);
5801
5821
 
5802
- customElements.define(componentName$6, NewPasswordClass);
5822
+ customElements.define(componentName$7, NewPasswordClass);
5803
5823
 
5804
- const componentName$5 = getComponentName('recaptcha');
5824
+ const componentName$6 = getComponentName('recaptcha');
5805
5825
 
5806
5826
  const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
5807
5827
 
5808
5828
  const BaseClass = createBaseClass({
5809
- componentName: componentName$5,
5829
+ componentName: componentName$6,
5810
5830
  baseSelector: ':host > div',
5811
5831
  });
5812
5832
  class RawRecaptcha extends BaseClass {
@@ -5958,7 +5978,7 @@ class RawRecaptcha extends BaseClass {
5958
5978
 
5959
5979
  const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
5960
5980
 
5961
- customElements.define(componentName$5, RecaptchaClass);
5981
+ customElements.define(componentName$6, RecaptchaClass);
5962
5982
 
5963
5983
  const getFileBase64 = (fileObj) => {
5964
5984
  return new Promise((resolve) => {
@@ -5972,7 +5992,7 @@ const getFilename = (fileObj) => {
5972
5992
  return fileObj.name.replace(/^.*\\/, '');
5973
5993
  };
5974
5994
 
5975
- const componentName$4 = getComponentName('upload-file');
5995
+ const componentName$5 = getComponentName('upload-file');
5976
5996
 
5977
5997
  const observedAttributes = [
5978
5998
  'title',
@@ -5987,7 +6007,7 @@ const observedAttributes = [
5987
6007
  'icon',
5988
6008
  ];
5989
6009
 
5990
- const BaseInputClass = createBaseInputClass({ componentName: componentName$4, baseSelector: ':host > div' });
6010
+ const BaseInputClass = createBaseInputClass({ componentName: componentName$5, baseSelector: ':host > div' });
5991
6011
 
5992
6012
  class RawUploadFile extends BaseInputClass {
5993
6013
  static get observedAttributes() {
@@ -6197,12 +6217,12 @@ const UploadFileClass = compose(
6197
6217
  componentNameValidationMixin
6198
6218
  )(RawUploadFile);
6199
6219
 
6200
- customElements.define(componentName$4, UploadFileClass);
6220
+ customElements.define(componentName$5, UploadFileClass);
6201
6221
 
6202
- const componentName$3 = getComponentName('button-selection-group-internal');
6222
+ const componentName$4 = getComponentName('button-selection-group-internal');
6203
6223
 
6204
6224
  class ButtonSelectionGroupInternalClass extends createBaseInputClass({
6205
- componentName: componentName$3,
6225
+ componentName: componentName$4,
6206
6226
  baseSelector: 'slot',
6207
6227
  }) {
6208
6228
  constructor() {
@@ -6339,9 +6359,9 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
6339
6359
  }
6340
6360
  }
6341
6361
 
6342
- const componentName$2 = getComponentName('button-selection-group');
6362
+ const componentName$3 = getComponentName('button-selection-group');
6343
6363
 
6344
- const customMixin = (superclass) =>
6364
+ const customMixin$1 = (superclass) =>
6345
6365
  class ButtonSelectionGroupMixinClass extends superclass {
6346
6366
  // eslint-disable-next-line class-methods-use-this
6347
6367
  #renderItem = ({ value, label }) =>
@@ -6414,18 +6434,18 @@ const customMixin = (superclass) =>
6414
6434
  const template = document.createElement('template');
6415
6435
 
6416
6436
  template.innerHTML = `
6417
- <${componentName$3}
6437
+ <${componentName$4}
6418
6438
  name="button-selection-group"
6419
6439
  slot="input"
6420
6440
  tabindex="-1"
6421
6441
  >
6422
6442
  <slot></slot>
6423
- </${componentName$3}>
6443
+ </${componentName$4}>
6424
6444
  `;
6425
6445
 
6426
6446
  this.baseElement.appendChild(template.content.cloneNode(true));
6427
6447
 
6428
- this.inputElement = this.shadowRoot.querySelector(componentName$3);
6448
+ this.inputElement = this.shadowRoot.querySelector(componentName$4);
6429
6449
 
6430
6450
  forwardAttrs(this, this.inputElement, {
6431
6451
  includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -6469,7 +6489,7 @@ const ButtonSelectionGroupClass = compose(
6469
6489
  draggableMixin,
6470
6490
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
6471
6491
  componentNameValidationMixin,
6472
- customMixin
6492
+ customMixin$1
6473
6493
  )(
6474
6494
  createProxy({
6475
6495
  slots: [],
@@ -6528,18 +6548,18 @@ const ButtonSelectionGroupClass = compose(
6528
6548
  ${resetInputCursor('vaadin-text-field')}
6529
6549
  `,
6530
6550
  excludeAttrsSync: ['tabindex'],
6531
- componentName: componentName$2,
6551
+ componentName: componentName$3,
6532
6552
  })
6533
6553
  );
6534
6554
 
6535
- customElements.define(componentName$3, ButtonSelectionGroupInternalClass);
6555
+ customElements.define(componentName$4, ButtonSelectionGroupInternalClass);
6536
6556
 
6537
- customElements.define(componentName$2, ButtonSelectionGroupClass);
6557
+ customElements.define(componentName$3, ButtonSelectionGroupClass);
6538
6558
 
6539
- const componentName$1 = getComponentName('button-selection-group-item');
6559
+ const componentName$2 = getComponentName('button-selection-group-item');
6540
6560
 
6541
6561
  class RawSelectItem extends createBaseClass({
6542
- componentName: componentName$1,
6562
+ componentName: componentName$2,
6543
6563
  baseSelector: ':host > descope-button',
6544
6564
  }) {
6545
6565
  get size() {
@@ -6633,7 +6653,7 @@ const ButtonSelectionGroupItemClass = compose(
6633
6653
  componentNameValidationMixin
6634
6654
  )(RawSelectItem);
6635
6655
 
6636
- customElements.define(componentName$1, ButtonSelectionGroupItemClass);
6656
+ customElements.define(componentName$2, ButtonSelectionGroupItemClass);
6637
6657
 
6638
6658
  const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
6639
6659
 
@@ -6961,10 +6981,10 @@ const globals = {
6961
6981
  shadow,
6962
6982
  fonts,
6963
6983
  };
6964
- const vars$r = getThemeVars(globals);
6984
+ const vars$s = getThemeVars(globals);
6965
6985
 
6966
6986
  const globalRefs$d = getThemeRefs(globals);
6967
- const compVars$3 = ButtonClass.cssVarList;
6987
+ const compVars$4 = ButtonClass.cssVarList;
6968
6988
 
6969
6989
  const mode = {
6970
6990
  primary: globalRefs$d.colors.primary,
@@ -6974,111 +6994,118 @@ const mode = {
6974
6994
  surface: globalRefs$d.colors.surface,
6975
6995
  };
6976
6996
 
6977
- const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$w);
6997
+ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$x);
6978
6998
 
6979
6999
  const button = {
6980
7000
  ...helperTheme$3,
6981
7001
 
6982
- [compVars$3.fontFamily]: globalRefs$d.fonts.font1.family,
7002
+ [compVars$4.fontFamily]: globalRefs$d.fonts.font1.family,
6983
7003
 
6984
- [compVars$3.cursor]: 'pointer',
6985
- [compVars$3.hostHeight]: '3em',
6986
- [compVars$3.hostWidth]: 'auto',
7004
+ [compVars$4.cursor]: 'pointer',
7005
+ [compVars$4.hostHeight]: '3em',
7006
+ [compVars$4.hostWidth]: 'auto',
6987
7007
 
6988
- [compVars$3.borderRadius]: globalRefs$d.radius.sm,
6989
- [compVars$3.borderWidth]: globalRefs$d.border.xs,
6990
- [compVars$3.borderStyle]: 'solid',
6991
- [compVars$3.borderColor]: 'transparent',
7008
+ [compVars$4.borderRadius]: globalRefs$d.radius.sm,
7009
+ [compVars$4.borderWidth]: globalRefs$d.border.xs,
7010
+ [compVars$4.borderStyle]: 'solid',
7011
+ [compVars$4.borderColor]: 'transparent',
6992
7012
 
6993
- [compVars$3.labelSpacing]: '0.25em',
7013
+ [compVars$4.labelSpacing]: '0.25em',
6994
7014
 
6995
- [compVars$3.verticalPadding]: '1em',
7015
+ [compVars$4.verticalPadding]: '1em',
6996
7016
 
6997
- [compVars$3.outlineWidth]: globals.border.sm,
6998
- [compVars$3.outlineOffset]: '0px', // keep `px` unit for external calc
6999
- [compVars$3.outlineStyle]: 'solid',
7000
- [compVars$3.outlineColor]: 'transparent',
7017
+ [compVars$4.outlineWidth]: globals.border.sm,
7018
+ [compVars$4.outlineOffset]: '0px', // keep `px` unit for external calc
7019
+ [compVars$4.outlineStyle]: 'solid',
7020
+ [compVars$4.outlineColor]: 'transparent',
7001
7021
 
7002
7022
  size: {
7003
- xs: { [compVars$3.fontSize]: '12px' },
7004
- sm: { [compVars$3.fontSize]: '14px' },
7005
- md: { [compVars$3.fontSize]: '16px' },
7006
- lg: { [compVars$3.fontSize]: '18px' },
7023
+ xs: { [compVars$4.fontSize]: '12px' },
7024
+ sm: { [compVars$4.fontSize]: '14px' },
7025
+ md: { [compVars$4.fontSize]: '16px' },
7026
+ lg: { [compVars$4.fontSize]: '18px' },
7007
7027
  },
7008
7028
 
7009
7029
  _square: {
7010
- [compVars$3.hostHeight]: '3em',
7011
- [compVars$3.hostWidth]: '3em',
7012
- [compVars$3.verticalPadding]: '0',
7030
+ [compVars$4.hostHeight]: '3em',
7031
+ [compVars$4.hostWidth]: '3em',
7032
+ [compVars$4.verticalPadding]: '0',
7013
7033
  },
7014
7034
 
7015
7035
  _fullWidth: {
7016
- [compVars$3.hostWidth]: '100%',
7036
+ [compVars$4.hostWidth]: '100%',
7017
7037
  },
7018
7038
 
7019
7039
  _loading: {
7020
- [compVars$3.cursor]: 'wait',
7021
- [compVars$3.labelTextColor]: helperRefs$3.main,
7040
+ [compVars$4.cursor]: 'wait',
7041
+ [compVars$4.labelTextColor]: helperRefs$3.main,
7042
+ },
7043
+
7044
+ _disabled: {
7045
+ [helperVars$3.main]: globalRefs$d.colors.surface.main,
7046
+ [helperVars$3.dark]: globalRefs$d.colors.surface.dark,
7047
+ [helperVars$3.light]: globalRefs$d.colors.surface.light,
7048
+ [helperVars$3.contrast]: globalRefs$d.colors.surface.contrast,
7022
7049
  },
7023
7050
 
7024
7051
  variant: {
7025
7052
  contained: {
7026
- [compVars$3.labelTextColor]: helperRefs$3.contrast,
7027
- [compVars$3.backgroundColor]: helperRefs$3.main,
7053
+ [compVars$4.labelTextColor]: helperRefs$3.contrast,
7054
+ [compVars$4.backgroundColor]: helperRefs$3.main,
7028
7055
  _hover: {
7029
- [compVars$3.backgroundColor]: helperRefs$3.dark,
7056
+ [compVars$4.backgroundColor]: helperRefs$3.dark,
7030
7057
  _loading: {
7031
- [compVars$3.backgroundColor]: helperRefs$3.main,
7058
+ [compVars$4.backgroundColor]: helperRefs$3.main,
7032
7059
  },
7033
7060
  },
7034
7061
  _active: {
7035
- [compVars$3.backgroundColor]: helperRefs$3.main,
7062
+ [compVars$4.backgroundColor]: helperRefs$3.main,
7036
7063
  },
7037
7064
  },
7038
7065
 
7039
7066
  outline: {
7040
- [compVars$3.labelTextColor]: helperRefs$3.main,
7041
- [compVars$3.borderColor]: 'currentColor',
7067
+ [compVars$4.labelTextColor]: helperRefs$3.main,
7068
+ [compVars$4.borderColor]: 'currentColor',
7042
7069
  _hover: {
7043
- [compVars$3.labelTextColor]: helperRefs$3.dark,
7070
+ [compVars$4.labelTextColor]: helperRefs$3.dark,
7044
7071
  },
7045
7072
  _active: {
7046
- [compVars$3.labelTextColor]: helperRefs$3.main,
7073
+ [compVars$4.labelTextColor]: helperRefs$3.main,
7047
7074
  },
7048
7075
  },
7049
7076
 
7050
7077
  link: {
7051
- [compVars$3.labelTextColor]: helperRefs$3.main,
7078
+ [compVars$4.labelTextColor]: helperRefs$3.main,
7052
7079
  _hover: {
7053
- [compVars$3.labelTextColor]: helperRefs$3.dark,
7054
- [compVars$3.labelTextDecoration]: 'underline',
7080
+ [compVars$4.labelTextColor]: helperRefs$3.dark,
7081
+ [compVars$4.labelTextDecoration]: 'underline',
7055
7082
  },
7056
7083
  _active: {
7057
- [compVars$3.labelTextColor]: helperRefs$3.dark,
7084
+ [compVars$4.labelTextColor]: helperRefs$3.dark,
7058
7085
  },
7059
7086
  },
7060
7087
  },
7061
7088
 
7062
7089
  _focused: {
7063
- [compVars$3.outlineColor]: globalRefs$d.colors.surface.main,
7090
+ [compVars$4.outlineColor]: globalRefs$d.colors.surface.main,
7064
7091
  },
7065
7092
  };
7066
7093
 
7067
- const vars$q = {
7068
- ...compVars$3,
7094
+ const vars$r = {
7095
+ ...compVars$4,
7069
7096
  ...helperVars$3,
7070
7097
  };
7071
7098
 
7072
7099
  var button$1 = /*#__PURE__*/Object.freeze({
7073
7100
  __proto__: null,
7074
7101
  default: button,
7075
- vars: vars$q
7102
+ vars: vars$r
7076
7103
  });
7077
7104
 
7078
- const componentName = getComponentName('input-wrapper');
7105
+ const componentName$1 = getComponentName('input-wrapper');
7079
7106
  const globalRefs$c = getThemeRefs(globals);
7080
7107
 
7081
- const [theme$1, refs, vars$p] = createHelperVars(
7108
+ const [theme$1, refs, vars$q] = createHelperVars(
7082
7109
  {
7083
7110
  labelTextColor: globalRefs$c.colors.surface.contrast,
7084
7111
  valueTextColor: globalRefs$c.colors.surface.contrast,
@@ -7140,28 +7167,63 @@ const [theme$1, refs, vars$p] = createHelperVars(
7140
7167
  backgroundColor: globalRefs$c.colors.surface.main,
7141
7168
  },
7142
7169
  },
7143
- componentName
7170
+ componentName$1
7144
7171
  );
7145
7172
 
7146
7173
  var inputWrapper = /*#__PURE__*/Object.freeze({
7147
7174
  __proto__: null,
7148
7175
  default: theme$1,
7149
7176
  refs: refs,
7150
- vars: vars$p
7177
+ vars: vars$q
7151
7178
  });
7152
7179
 
7153
- const vars$o = TextFieldClass.cssVarList;
7180
+ const vars$p = TextFieldClass.cssVarList;
7154
7181
 
7155
7182
  const textField = {
7183
+ [vars$p.hostWidth]: refs.width,
7184
+ [vars$p.hostMinWidth]: refs.minWidth,
7185
+ [vars$p.fontSize]: refs.fontSize,
7186
+ [vars$p.fontFamily]: refs.fontFamily,
7187
+ [vars$p.labelTextColor]: refs.labelTextColor,
7188
+ [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
7189
+ [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
7190
+ [vars$p.inputValueTextColor]: refs.valueTextColor,
7191
+ [vars$p.inputPlaceholderColor]: refs.placeholderTextColor,
7192
+ [vars$p.inputBorderWidth]: refs.borderWidth,
7193
+ [vars$p.inputBorderStyle]: refs.borderStyle,
7194
+ [vars$p.inputBorderColor]: refs.borderColor,
7195
+ [vars$p.inputBorderRadius]: refs.borderRadius,
7196
+ [vars$p.inputOutlineWidth]: refs.outlineWidth,
7197
+ [vars$p.inputOutlineStyle]: refs.outlineStyle,
7198
+ [vars$p.inputOutlineColor]: refs.outlineColor,
7199
+ [vars$p.inputOutlineOffset]: refs.outlineOffset,
7200
+ [vars$p.inputBackgroundColor]: refs.backgroundColor,
7201
+ [vars$p.inputHeight]: refs.inputHeight,
7202
+ [vars$p.inputHorizontalPadding]: refs.horizontalPadding,
7203
+ };
7204
+
7205
+ var textField$1 = /*#__PURE__*/Object.freeze({
7206
+ __proto__: null,
7207
+ default: textField,
7208
+ textField: textField,
7209
+ vars: vars$p
7210
+ });
7211
+
7212
+ const globalRefs$b = getThemeRefs(globals);
7213
+ const vars$o = PasswordClass.cssVarList;
7214
+
7215
+ const password = {
7156
7216
  [vars$o.hostWidth]: refs.width,
7157
- [vars$o.hostMinWidth]: refs.minWidth,
7158
7217
  [vars$o.fontSize]: refs.fontSize,
7159
7218
  [vars$o.fontFamily]: refs.fontFamily,
7160
7219
  [vars$o.labelTextColor]: refs.labelTextColor,
7161
- [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
7162
7220
  [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
7221
+ [vars$o.inputHorizontalPadding]: refs.horizontalPadding,
7222
+ [vars$o.inputHeight]: refs.inputHeight,
7223
+ [vars$o.inputBackgroundColor]: refs.backgroundColor,
7224
+ [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
7163
7225
  [vars$o.inputValueTextColor]: refs.valueTextColor,
7164
- [vars$o.inputPlaceholderColor]: refs.placeholderTextColor,
7226
+ [vars$o.inputPlaceholderTextColor]: refs.placeholderTextColor,
7165
7227
  [vars$o.inputBorderWidth]: refs.borderWidth,
7166
7228
  [vars$o.inputBorderStyle]: refs.borderStyle,
7167
7229
  [vars$o.inputBorderColor]: refs.borderColor,
@@ -7170,33 +7232,27 @@ const textField = {
7170
7232
  [vars$o.inputOutlineStyle]: refs.outlineStyle,
7171
7233
  [vars$o.inputOutlineColor]: refs.outlineColor,
7172
7234
  [vars$o.inputOutlineOffset]: refs.outlineOffset,
7173
- [vars$o.inputBackgroundColor]: refs.backgroundColor,
7174
- [vars$o.inputHeight]: refs.inputHeight,
7175
- [vars$o.inputHorizontalPadding]: refs.horizontalPadding,
7235
+ [vars$o.revealButtonOffset]: globalRefs$b.spacing.md,
7236
+ [vars$o.revealButtonSize]: refs.toggleButtonSize,
7176
7237
  };
7177
7238
 
7178
- var textField$1 = /*#__PURE__*/Object.freeze({
7239
+ var password$1 = /*#__PURE__*/Object.freeze({
7179
7240
  __proto__: null,
7180
- default: textField,
7181
- textField: textField,
7241
+ default: password,
7182
7242
  vars: vars$o
7183
7243
  });
7184
7244
 
7185
- const globalRefs$b = getThemeRefs(globals);
7186
- const vars$n = PasswordClass.cssVarList;
7245
+ const vars$n = NumberFieldClass.cssVarList;
7187
7246
 
7188
- const password = {
7247
+ const numberField = {
7189
7248
  [vars$n.hostWidth]: refs.width,
7249
+ [vars$n.hostMinWidth]: refs.minWidth,
7190
7250
  [vars$n.fontSize]: refs.fontSize,
7191
7251
  [vars$n.fontFamily]: refs.fontFamily,
7192
7252
  [vars$n.labelTextColor]: refs.labelTextColor,
7193
7253
  [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
7194
- [vars$n.inputHorizontalPadding]: refs.horizontalPadding,
7195
- [vars$n.inputHeight]: refs.inputHeight,
7196
- [vars$n.inputBackgroundColor]: refs.backgroundColor,
7197
- [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
7198
7254
  [vars$n.inputValueTextColor]: refs.valueTextColor,
7199
- [vars$n.inputPlaceholderTextColor]: refs.placeholderTextColor,
7255
+ [vars$n.inputPlaceholderColor]: refs.placeholderTextColor,
7200
7256
  [vars$n.inputBorderWidth]: refs.borderWidth,
7201
7257
  [vars$n.inputBorderStyle]: refs.borderStyle,
7202
7258
  [vars$n.inputBorderColor]: refs.borderColor,
@@ -7205,19 +7261,21 @@ const password = {
7205
7261
  [vars$n.inputOutlineStyle]: refs.outlineStyle,
7206
7262
  [vars$n.inputOutlineColor]: refs.outlineColor,
7207
7263
  [vars$n.inputOutlineOffset]: refs.outlineOffset,
7208
- [vars$n.revealButtonOffset]: globalRefs$b.spacing.md,
7209
- [vars$n.revealButtonSize]: refs.toggleButtonSize,
7264
+ [vars$n.inputBackgroundColor]: refs.backgroundColor,
7265
+ [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
7266
+ [vars$n.inputHorizontalPadding]: refs.horizontalPadding,
7267
+ [vars$n.inputHeight]: refs.inputHeight,
7210
7268
  };
7211
7269
 
7212
- var password$1 = /*#__PURE__*/Object.freeze({
7270
+ var numberField$1 = /*#__PURE__*/Object.freeze({
7213
7271
  __proto__: null,
7214
- default: password,
7272
+ default: numberField,
7215
7273
  vars: vars$n
7216
7274
  });
7217
7275
 
7218
- const vars$m = NumberFieldClass.cssVarList;
7276
+ const vars$m = EmailFieldClass.cssVarList;
7219
7277
 
7220
- const numberField = {
7278
+ const emailField = {
7221
7279
  [vars$m.hostWidth]: refs.width,
7222
7280
  [vars$m.hostMinWidth]: refs.minWidth,
7223
7281
  [vars$m.fontSize]: refs.fontSize,
@@ -7225,6 +7283,7 @@ const numberField = {
7225
7283
  [vars$m.labelTextColor]: refs.labelTextColor,
7226
7284
  [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
7227
7285
  [vars$m.inputValueTextColor]: refs.valueTextColor,
7286
+ [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
7228
7287
  [vars$m.inputPlaceholderColor]: refs.placeholderTextColor,
7229
7288
  [vars$m.inputBorderWidth]: refs.borderWidth,
7230
7289
  [vars$m.inputBorderStyle]: refs.borderStyle,
@@ -7235,199 +7294,167 @@ const numberField = {
7235
7294
  [vars$m.inputOutlineColor]: refs.outlineColor,
7236
7295
  [vars$m.inputOutlineOffset]: refs.outlineOffset,
7237
7296
  [vars$m.inputBackgroundColor]: refs.backgroundColor,
7238
- [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
7239
7297
  [vars$m.inputHorizontalPadding]: refs.horizontalPadding,
7240
7298
  [vars$m.inputHeight]: refs.inputHeight,
7241
7299
  };
7242
7300
 
7243
- var numberField$1 = /*#__PURE__*/Object.freeze({
7301
+ var emailField$1 = /*#__PURE__*/Object.freeze({
7244
7302
  __proto__: null,
7245
- default: numberField,
7303
+ default: emailField,
7246
7304
  vars: vars$m
7247
7305
  });
7248
7306
 
7249
- const vars$l = EmailFieldClass.cssVarList;
7307
+ const globalRefs$a = getThemeRefs(globals);
7308
+ const vars$l = TextAreaClass.cssVarList;
7250
7309
 
7251
- const emailField = {
7310
+ const textArea = {
7252
7311
  [vars$l.hostWidth]: refs.width,
7253
7312
  [vars$l.hostMinWidth]: refs.minWidth,
7254
7313
  [vars$l.fontSize]: refs.fontSize,
7255
7314
  [vars$l.fontFamily]: refs.fontFamily,
7256
7315
  [vars$l.labelTextColor]: refs.labelTextColor,
7316
+ [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
7257
7317
  [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
7318
+ [vars$l.inputBackgroundColor]: refs.backgroundColor,
7258
7319
  [vars$l.inputValueTextColor]: refs.valueTextColor,
7259
- [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
7260
- [vars$l.inputPlaceholderColor]: refs.placeholderTextColor,
7320
+ [vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
7321
+ [vars$l.inputBorderRadius]: refs.borderRadius,
7261
7322
  [vars$l.inputBorderWidth]: refs.borderWidth,
7262
7323
  [vars$l.inputBorderStyle]: refs.borderStyle,
7263
7324
  [vars$l.inputBorderColor]: refs.borderColor,
7264
- [vars$l.inputBorderRadius]: refs.borderRadius,
7265
7325
  [vars$l.inputOutlineWidth]: refs.outlineWidth,
7266
7326
  [vars$l.inputOutlineStyle]: refs.outlineStyle,
7267
7327
  [vars$l.inputOutlineColor]: refs.outlineColor,
7268
7328
  [vars$l.inputOutlineOffset]: refs.outlineOffset,
7269
- [vars$l.inputBackgroundColor]: refs.backgroundColor,
7270
- [vars$l.inputHorizontalPadding]: refs.horizontalPadding,
7271
- [vars$l.inputHeight]: refs.inputHeight,
7329
+ [vars$l.inputResizeType]: 'vertical',
7330
+ [vars$l.inputMinHeight]: '5em',
7331
+
7332
+ _disabled: {
7333
+ [vars$l.inputBackgroundColor]: globalRefs$a.colors.surface.light,
7334
+ },
7335
+
7336
+ _readonly: {
7337
+ [vars$l.inputResizeType]: 'none',
7338
+ },
7272
7339
  };
7273
7340
 
7274
- var emailField$1 = /*#__PURE__*/Object.freeze({
7341
+ var textArea$1 = /*#__PURE__*/Object.freeze({
7275
7342
  __proto__: null,
7276
- default: emailField,
7343
+ default: textArea,
7277
7344
  vars: vars$l
7278
7345
  });
7279
7346
 
7280
- const globalRefs$a = getThemeRefs(globals);
7281
- const vars$k = TextAreaClass.cssVarList;
7347
+ const vars$k = CheckboxClass.cssVarList;
7348
+ const checkboxSize = '1.35em';
7282
7349
 
7283
- const textArea = {
7350
+ const checkbox = {
7284
7351
  [vars$k.hostWidth]: refs.width,
7285
- [vars$k.hostMinWidth]: refs.minWidth,
7286
7352
  [vars$k.fontSize]: refs.fontSize,
7287
7353
  [vars$k.fontFamily]: refs.fontFamily,
7288
7354
  [vars$k.labelTextColor]: refs.labelTextColor,
7289
7355
  [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
7356
+ [vars$k.labelFontWeight]: '400',
7357
+ [vars$k.labelLineHeight]: checkboxSize,
7358
+ [vars$k.labelSpacing]: '1em',
7290
7359
  [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
7291
- [vars$k.inputBackgroundColor]: refs.backgroundColor,
7292
- [vars$k.inputValueTextColor]: refs.valueTextColor,
7293
- [vars$k.inputPlaceholderTextColor]: refs.placeholderTextColor,
7360
+ [vars$k.inputOutlineWidth]: refs.outlineWidth,
7361
+ [vars$k.inputOutlineOffset]: refs.outlineOffset,
7362
+ [vars$k.inputOutlineColor]: refs.outlineColor,
7363
+ [vars$k.inputOutlineStyle]: refs.outlineStyle,
7294
7364
  [vars$k.inputBorderRadius]: refs.borderRadius,
7365
+ [vars$k.inputBorderColor]: refs.borderColor,
7295
7366
  [vars$k.inputBorderWidth]: refs.borderWidth,
7296
7367
  [vars$k.inputBorderStyle]: refs.borderStyle,
7297
- [vars$k.inputBorderColor]: refs.borderColor,
7298
- [vars$k.inputOutlineWidth]: refs.outlineWidth,
7299
- [vars$k.inputOutlineStyle]: refs.outlineStyle,
7300
- [vars$k.inputOutlineColor]: refs.outlineColor,
7301
- [vars$k.inputOutlineOffset]: refs.outlineOffset,
7302
- [vars$k.inputResizeType]: 'vertical',
7303
- [vars$k.inputMinHeight]: '5em',
7368
+ [vars$k.inputBackgroundColor]: refs.backgroundColor,
7369
+ [vars$k.inputSize]: checkboxSize,
7304
7370
 
7305
- _disabled: {
7306
- [vars$k.inputBackgroundColor]: globalRefs$a.colors.surface.light,
7371
+ _checked: {
7372
+ [vars$k.inputValueTextColor]: refs.valueTextColor,
7307
7373
  },
7308
7374
 
7309
- _readonly: {
7310
- [vars$k.inputResizeType]: 'none',
7375
+ _disabled: {
7376
+ [vars$k.labelTextColor]: refs.labelTextColor,
7311
7377
  },
7312
7378
  };
7313
7379
 
7314
- var textArea$1 = /*#__PURE__*/Object.freeze({
7380
+ var checkbox$1 = /*#__PURE__*/Object.freeze({
7315
7381
  __proto__: null,
7316
- default: textArea,
7382
+ default: checkbox,
7317
7383
  vars: vars$k
7318
7384
  });
7319
7385
 
7320
- const vars$j = CheckboxClass.cssVarList;
7321
- const checkboxSize = '1.35em';
7386
+ const knobMargin = '2px';
7387
+ const checkboxHeight = '1.25em';
7322
7388
 
7323
- const checkbox = {
7389
+ const globalRefs$9 = getThemeRefs(globals);
7390
+ const vars$j = SwitchToggleClass.cssVarList;
7391
+
7392
+ const switchToggle = {
7324
7393
  [vars$j.hostWidth]: refs.width,
7325
7394
  [vars$j.fontSize]: refs.fontSize,
7326
7395
  [vars$j.fontFamily]: refs.fontFamily,
7327
- [vars$j.labelTextColor]: refs.labelTextColor,
7328
- [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
7329
- [vars$j.labelFontWeight]: '400',
7330
- [vars$j.labelLineHeight]: checkboxSize,
7331
- [vars$j.labelSpacing]: '1em',
7332
- [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
7396
+
7333
7397
  [vars$j.inputOutlineWidth]: refs.outlineWidth,
7334
7398
  [vars$j.inputOutlineOffset]: refs.outlineOffset,
7335
7399
  [vars$j.inputOutlineColor]: refs.outlineColor,
7336
7400
  [vars$j.inputOutlineStyle]: refs.outlineStyle,
7337
- [vars$j.inputBorderRadius]: refs.borderRadius,
7338
- [vars$j.inputBorderColor]: refs.borderColor,
7339
- [vars$j.inputBorderWidth]: refs.borderWidth,
7340
- [vars$j.inputBorderStyle]: refs.borderStyle,
7341
- [vars$j.inputBackgroundColor]: refs.backgroundColor,
7342
- [vars$j.inputSize]: checkboxSize,
7343
-
7344
- _checked: {
7345
- [vars$j.inputValueTextColor]: refs.valueTextColor,
7346
- },
7347
7401
 
7348
- _disabled: {
7349
- [vars$j.labelTextColor]: refs.labelTextColor,
7350
- },
7351
- };
7402
+ [vars$j.trackBorderStyle]: refs.borderStyle,
7403
+ [vars$j.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
7404
+ [vars$j.trackBorderColor]: refs.borderColor,
7405
+ [vars$j.trackBackgroundColor]: 'none',
7406
+ [vars$j.trackBorderRadius]: globalRefs$9.radius.md,
7407
+ [vars$j.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
7408
+ [vars$j.trackHeight]: checkboxHeight,
7409
+
7410
+ [vars$j.knobSize]: `calc(1em - ${knobMargin})`,
7411
+ [vars$j.knobRadius]: '50%',
7412
+ [vars$j.knobTopOffset]: '1px',
7413
+ [vars$j.knobLeftOffset]: knobMargin,
7414
+ [vars$j.knobColor]: refs.valueTextColor,
7415
+ [vars$j.knobTransitionDuration]: '0.3s',
7352
7416
 
7353
- var checkbox$1 = /*#__PURE__*/Object.freeze({
7354
- __proto__: null,
7355
- default: checkbox,
7356
- vars: vars$j
7357
- });
7358
-
7359
- const knobMargin = '2px';
7360
- const checkboxHeight = '1.25em';
7361
-
7362
- const globalRefs$9 = getThemeRefs(globals);
7363
- const vars$i = SwitchToggleClass.cssVarList;
7364
-
7365
- const switchToggle = {
7366
- [vars$i.hostWidth]: refs.width,
7367
- [vars$i.fontSize]: refs.fontSize,
7368
- [vars$i.fontFamily]: refs.fontFamily,
7369
-
7370
- [vars$i.inputOutlineWidth]: refs.outlineWidth,
7371
- [vars$i.inputOutlineOffset]: refs.outlineOffset,
7372
- [vars$i.inputOutlineColor]: refs.outlineColor,
7373
- [vars$i.inputOutlineStyle]: refs.outlineStyle,
7374
-
7375
- [vars$i.trackBorderStyle]: refs.borderStyle,
7376
- [vars$i.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
7377
- [vars$i.trackBorderColor]: refs.borderColor,
7378
- [vars$i.trackBackgroundColor]: 'none',
7379
- [vars$i.trackBorderRadius]: globalRefs$9.radius.md,
7380
- [vars$i.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
7381
- [vars$i.trackHeight]: checkboxHeight,
7382
-
7383
- [vars$i.knobSize]: `calc(1em - ${knobMargin})`,
7384
- [vars$i.knobRadius]: '50%',
7385
- [vars$i.knobTopOffset]: '1px',
7386
- [vars$i.knobLeftOffset]: knobMargin,
7387
- [vars$i.knobColor]: refs.valueTextColor,
7388
- [vars$i.knobTransitionDuration]: '0.3s',
7389
-
7390
- [vars$i.labelTextColor]: refs.labelTextColor,
7391
- [vars$i.labelFontWeight]: '400',
7392
- [vars$i.labelLineHeight]: '1.35em',
7393
- [vars$i.labelSpacing]: '1em',
7394
- [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
7395
- [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
7417
+ [vars$j.labelTextColor]: refs.labelTextColor,
7418
+ [vars$j.labelFontWeight]: '400',
7419
+ [vars$j.labelLineHeight]: '1.35em',
7420
+ [vars$j.labelSpacing]: '1em',
7421
+ [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
7422
+ [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
7396
7423
 
7397
7424
  _checked: {
7398
- [vars$i.trackBorderColor]: refs.borderColor,
7399
- [vars$i.trackBackgroundColor]: refs.backgroundColor,
7400
- [vars$i.knobLeftOffset]: `calc(100% - var(${vars$i.knobSize}) - ${knobMargin})`,
7401
- [vars$i.knobColor]: refs.valueTextColor,
7402
- [vars$i.knobTextColor]: refs.valueTextColor,
7425
+ [vars$j.trackBorderColor]: refs.borderColor,
7426
+ [vars$j.trackBackgroundColor]: refs.backgroundColor,
7427
+ [vars$j.knobLeftOffset]: `calc(100% - var(${vars$j.knobSize}) - ${knobMargin})`,
7428
+ [vars$j.knobColor]: refs.valueTextColor,
7429
+ [vars$j.knobTextColor]: refs.valueTextColor,
7403
7430
  },
7404
7431
 
7405
7432
  _disabled: {
7406
- [vars$i.knobColor]: globalRefs$9.colors.surface.light,
7407
- [vars$i.trackBorderColor]: globalRefs$9.colors.surface.main,
7408
- [vars$i.trackBackgroundColor]: globalRefs$9.colors.surface.main,
7409
- [vars$i.labelTextColor]: refs.labelTextColor,
7433
+ [vars$j.knobColor]: globalRefs$9.colors.surface.light,
7434
+ [vars$j.trackBorderColor]: globalRefs$9.colors.surface.main,
7435
+ [vars$j.trackBackgroundColor]: globalRefs$9.colors.surface.main,
7436
+ [vars$j.labelTextColor]: refs.labelTextColor,
7410
7437
  _checked: {
7411
- [vars$i.knobColor]: globalRefs$9.colors.surface.light,
7412
- [vars$i.trackBackgroundColor]: globalRefs$9.colors.surface.main,
7438
+ [vars$j.knobColor]: globalRefs$9.colors.surface.light,
7439
+ [vars$j.trackBackgroundColor]: globalRefs$9.colors.surface.main,
7413
7440
  },
7414
7441
  },
7415
7442
 
7416
7443
  _invalid: {
7417
- [vars$i.trackBorderColor]: globalRefs$9.colors.error.main,
7418
- [vars$i.knobColor]: globalRefs$9.colors.error.main,
7444
+ [vars$j.trackBorderColor]: globalRefs$9.colors.error.main,
7445
+ [vars$j.knobColor]: globalRefs$9.colors.error.main,
7419
7446
  },
7420
7447
  };
7421
7448
 
7422
7449
  var switchToggle$1 = /*#__PURE__*/Object.freeze({
7423
7450
  __proto__: null,
7424
7451
  default: switchToggle,
7425
- vars: vars$i
7452
+ vars: vars$j
7426
7453
  });
7427
7454
 
7428
7455
  const globalRefs$8 = getThemeRefs(globals);
7429
7456
 
7430
- const compVars$2 = ContainerClass.cssVarList;
7457
+ const compVars$3 = ContainerClass.cssVarList;
7431
7458
 
7432
7459
  const verticalAlignment = {
7433
7460
  start: { verticalAlignment: 'start' },
@@ -7447,7 +7474,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
7447
7474
  horizontalAlignment,
7448
7475
  shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
7449
7476
  },
7450
- componentName$q
7477
+ componentName$r
7451
7478
  );
7452
7479
 
7453
7480
  const { shadowColor } = helperRefs$2;
@@ -7455,30 +7482,30 @@ const { shadowColor } = helperRefs$2;
7455
7482
  const container = {
7456
7483
  ...helperTheme$2,
7457
7484
 
7458
- [compVars$2.hostWidth]: '100%',
7459
- [compVars$2.boxShadow]: 'none',
7460
- [compVars$2.backgroundColor]: globalRefs$8.colors.surface.light,
7461
- [compVars$2.color]: globalRefs$8.colors.surface.contrast,
7462
- [compVars$2.borderRadius]: '0px',
7485
+ [compVars$3.hostWidth]: '100%',
7486
+ [compVars$3.boxShadow]: 'none',
7487
+ [compVars$3.backgroundColor]: globalRefs$8.colors.surface.light,
7488
+ [compVars$3.color]: globalRefs$8.colors.surface.contrast,
7489
+ [compVars$3.borderRadius]: '0px',
7463
7490
 
7464
7491
  verticalPadding: {
7465
- sm: { [compVars$2.verticalPadding]: '5px' },
7466
- md: { [compVars$2.verticalPadding]: '10px' },
7467
- lg: { [compVars$2.verticalPadding]: '20px' },
7492
+ sm: { [compVars$3.verticalPadding]: '5px' },
7493
+ md: { [compVars$3.verticalPadding]: '10px' },
7494
+ lg: { [compVars$3.verticalPadding]: '20px' },
7468
7495
  },
7469
7496
 
7470
7497
  horizontalPadding: {
7471
- sm: { [compVars$2.horizontalPadding]: '5px' },
7472
- md: { [compVars$2.horizontalPadding]: '10px' },
7473
- lg: { [compVars$2.horizontalPadding]: '20px' },
7498
+ sm: { [compVars$3.horizontalPadding]: '5px' },
7499
+ md: { [compVars$3.horizontalPadding]: '10px' },
7500
+ lg: { [compVars$3.horizontalPadding]: '20px' },
7474
7501
  },
7475
7502
 
7476
7503
  direction: {
7477
7504
  row: {
7478
- [compVars$2.flexDirection]: 'row',
7479
- [compVars$2.alignItems]: helperRefs$2.verticalAlignment,
7480
- [compVars$2.justifyContent]: helperRefs$2.horizontalAlignment,
7481
- [compVars$2.flexWrap]: 'wrap',
7505
+ [compVars$3.flexDirection]: 'row',
7506
+ [compVars$3.alignItems]: helperRefs$2.verticalAlignment,
7507
+ [compVars$3.justifyContent]: helperRefs$2.horizontalAlignment,
7508
+ [compVars$3.flexWrap]: 'wrap',
7482
7509
  horizontalAlignment: {
7483
7510
  spaceBetween: {
7484
7511
  [helperVars$2.horizontalAlignment]: 'space-between',
@@ -7486,9 +7513,9 @@ const container = {
7486
7513
  },
7487
7514
  },
7488
7515
  column: {
7489
- [compVars$2.flexDirection]: 'column',
7490
- [compVars$2.alignItems]: helperRefs$2.horizontalAlignment,
7491
- [compVars$2.justifyContent]: helperRefs$2.verticalAlignment,
7516
+ [compVars$3.flexDirection]: 'column',
7517
+ [compVars$3.alignItems]: helperRefs$2.horizontalAlignment,
7518
+ [compVars$3.justifyContent]: helperRefs$2.verticalAlignment,
7492
7519
  verticalAlignment: {
7493
7520
  spaceBetween: {
7494
7521
  [helperVars$2.verticalAlignment]: 'space-between',
@@ -7498,194 +7525,194 @@ const container = {
7498
7525
  },
7499
7526
 
7500
7527
  spaceBetween: {
7501
- sm: { [compVars$2.gap]: '10px' },
7502
- md: { [compVars$2.gap]: '20px' },
7503
- lg: { [compVars$2.gap]: '30px' },
7528
+ sm: { [compVars$3.gap]: '10px' },
7529
+ md: { [compVars$3.gap]: '20px' },
7530
+ lg: { [compVars$3.gap]: '30px' },
7504
7531
  },
7505
7532
 
7506
7533
  shadow: {
7507
7534
  sm: {
7508
- [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${shadowColor}`,
7535
+ [compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${shadowColor}`,
7509
7536
  },
7510
7537
  md: {
7511
- [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.md} ${shadowColor}, ${globalRefs$8.shadow.narrow.md} ${shadowColor}`,
7538
+ [compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.md} ${shadowColor}, ${globalRefs$8.shadow.narrow.md} ${shadowColor}`,
7512
7539
  },
7513
7540
  lg: {
7514
- [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${shadowColor}`,
7541
+ [compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${shadowColor}`,
7515
7542
  },
7516
7543
  xl: {
7517
- [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${shadowColor}`,
7544
+ [compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${shadowColor}`,
7518
7545
  },
7519
7546
  '2xl': {
7520
7547
  [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
7521
- [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${shadowColor}`,
7548
+ [compVars$3.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${shadowColor}`,
7522
7549
  },
7523
7550
  },
7524
7551
 
7525
7552
  borderRadius: {
7526
- sm: { [compVars$2.borderRadius]: globalRefs$8.radius.sm },
7527
- md: { [compVars$2.borderRadius]: globalRefs$8.radius.md },
7528
- lg: { [compVars$2.borderRadius]: globalRefs$8.radius.lg },
7529
- xl: { [compVars$2.borderRadius]: globalRefs$8.radius.xl },
7530
- '2xl': { [compVars$2.borderRadius]: globalRefs$8.radius['2xl'] },
7531
- '3xl': { [compVars$2.borderRadius]: globalRefs$8.radius['3xl'] },
7553
+ sm: { [compVars$3.borderRadius]: globalRefs$8.radius.sm },
7554
+ md: { [compVars$3.borderRadius]: globalRefs$8.radius.md },
7555
+ lg: { [compVars$3.borderRadius]: globalRefs$8.radius.lg },
7556
+ xl: { [compVars$3.borderRadius]: globalRefs$8.radius.xl },
7557
+ '2xl': { [compVars$3.borderRadius]: globalRefs$8.radius['2xl'] },
7558
+ '3xl': { [compVars$3.borderRadius]: globalRefs$8.radius['3xl'] },
7532
7559
  },
7533
7560
  };
7534
7561
 
7535
- const vars$h = {
7536
- ...compVars$2,
7562
+ const vars$i = {
7563
+ ...compVars$3,
7537
7564
  ...helperVars$2,
7538
7565
  };
7539
7566
 
7540
7567
  var container$1 = /*#__PURE__*/Object.freeze({
7541
7568
  __proto__: null,
7542
7569
  default: container,
7543
- vars: vars$h
7570
+ vars: vars$i
7544
7571
  });
7545
7572
 
7546
- const vars$g = LogoClass.cssVarList;
7573
+ const vars$h = LogoClass.cssVarList;
7547
7574
 
7548
7575
  const logo$1 = {
7549
- [vars$g.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
7576
+ [vars$h.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
7550
7577
  };
7551
7578
 
7552
7579
  var logo$2 = /*#__PURE__*/Object.freeze({
7553
7580
  __proto__: null,
7554
7581
  default: logo$1,
7555
- vars: vars$g
7582
+ vars: vars$h
7556
7583
  });
7557
7584
 
7558
- const vars$f = TotpImageClass.cssVarList;
7585
+ const vars$g = TotpImageClass.cssVarList;
7559
7586
 
7560
7587
  const logo = {
7561
- [vars$f.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
7588
+ [vars$g.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
7562
7589
  };
7563
7590
 
7564
7591
  var totpImage = /*#__PURE__*/Object.freeze({
7565
7592
  __proto__: null,
7566
7593
  default: logo,
7567
- vars: vars$f
7594
+ vars: vars$g
7568
7595
  });
7569
7596
 
7570
7597
  const globalRefs$7 = getThemeRefs(globals);
7571
- const vars$e = TextClass.cssVarList;
7598
+ const vars$f = TextClass.cssVarList;
7572
7599
 
7573
7600
  const text = {
7574
- [vars$e.textLineHeight]: '1.35em',
7575
- [vars$e.textAlign]: 'left',
7576
- [vars$e.textColor]: globalRefs$7.colors.surface.dark,
7601
+ [vars$f.textLineHeight]: '1.35em',
7602
+ [vars$f.textAlign]: 'left',
7603
+ [vars$f.textColor]: globalRefs$7.colors.surface.dark,
7577
7604
  variant: {
7578
7605
  h1: {
7579
- [vars$e.fontSize]: globalRefs$7.typography.h1.size,
7580
- [vars$e.fontWeight]: globalRefs$7.typography.h1.weight,
7581
- [vars$e.fontFamily]: globalRefs$7.typography.h1.font,
7606
+ [vars$f.fontSize]: globalRefs$7.typography.h1.size,
7607
+ [vars$f.fontWeight]: globalRefs$7.typography.h1.weight,
7608
+ [vars$f.fontFamily]: globalRefs$7.typography.h1.font,
7582
7609
  },
7583
7610
  h2: {
7584
- [vars$e.fontSize]: globalRefs$7.typography.h2.size,
7585
- [vars$e.fontWeight]: globalRefs$7.typography.h2.weight,
7586
- [vars$e.fontFamily]: globalRefs$7.typography.h2.font,
7611
+ [vars$f.fontSize]: globalRefs$7.typography.h2.size,
7612
+ [vars$f.fontWeight]: globalRefs$7.typography.h2.weight,
7613
+ [vars$f.fontFamily]: globalRefs$7.typography.h2.font,
7587
7614
  },
7588
7615
  h3: {
7589
- [vars$e.fontSize]: globalRefs$7.typography.h3.size,
7590
- [vars$e.fontWeight]: globalRefs$7.typography.h3.weight,
7591
- [vars$e.fontFamily]: globalRefs$7.typography.h3.font,
7616
+ [vars$f.fontSize]: globalRefs$7.typography.h3.size,
7617
+ [vars$f.fontWeight]: globalRefs$7.typography.h3.weight,
7618
+ [vars$f.fontFamily]: globalRefs$7.typography.h3.font,
7592
7619
  },
7593
7620
  subtitle1: {
7594
- [vars$e.fontSize]: globalRefs$7.typography.subtitle1.size,
7595
- [vars$e.fontWeight]: globalRefs$7.typography.subtitle1.weight,
7596
- [vars$e.fontFamily]: globalRefs$7.typography.subtitle1.font,
7621
+ [vars$f.fontSize]: globalRefs$7.typography.subtitle1.size,
7622
+ [vars$f.fontWeight]: globalRefs$7.typography.subtitle1.weight,
7623
+ [vars$f.fontFamily]: globalRefs$7.typography.subtitle1.font,
7597
7624
  },
7598
7625
  subtitle2: {
7599
- [vars$e.fontSize]: globalRefs$7.typography.subtitle2.size,
7600
- [vars$e.fontWeight]: globalRefs$7.typography.subtitle2.weight,
7601
- [vars$e.fontFamily]: globalRefs$7.typography.subtitle2.font,
7626
+ [vars$f.fontSize]: globalRefs$7.typography.subtitle2.size,
7627
+ [vars$f.fontWeight]: globalRefs$7.typography.subtitle2.weight,
7628
+ [vars$f.fontFamily]: globalRefs$7.typography.subtitle2.font,
7602
7629
  },
7603
7630
  body1: {
7604
- [vars$e.fontSize]: globalRefs$7.typography.body1.size,
7605
- [vars$e.fontWeight]: globalRefs$7.typography.body1.weight,
7606
- [vars$e.fontFamily]: globalRefs$7.typography.body1.font,
7631
+ [vars$f.fontSize]: globalRefs$7.typography.body1.size,
7632
+ [vars$f.fontWeight]: globalRefs$7.typography.body1.weight,
7633
+ [vars$f.fontFamily]: globalRefs$7.typography.body1.font,
7607
7634
  },
7608
7635
  body2: {
7609
- [vars$e.fontSize]: globalRefs$7.typography.body2.size,
7610
- [vars$e.fontWeight]: globalRefs$7.typography.body2.weight,
7611
- [vars$e.fontFamily]: globalRefs$7.typography.body2.font,
7636
+ [vars$f.fontSize]: globalRefs$7.typography.body2.size,
7637
+ [vars$f.fontWeight]: globalRefs$7.typography.body2.weight,
7638
+ [vars$f.fontFamily]: globalRefs$7.typography.body2.font,
7612
7639
  },
7613
7640
  },
7614
7641
 
7615
7642
  mode: {
7616
7643
  primary: {
7617
- [vars$e.textColor]: globalRefs$7.colors.primary.main,
7644
+ [vars$f.textColor]: globalRefs$7.colors.primary.main,
7618
7645
  },
7619
7646
  secondary: {
7620
- [vars$e.textColor]: globalRefs$7.colors.secondary.main,
7647
+ [vars$f.textColor]: globalRefs$7.colors.secondary.main,
7621
7648
  },
7622
7649
  error: {
7623
- [vars$e.textColor]: globalRefs$7.colors.error.main,
7650
+ [vars$f.textColor]: globalRefs$7.colors.error.main,
7624
7651
  },
7625
7652
  success: {
7626
- [vars$e.textColor]: globalRefs$7.colors.success.main,
7653
+ [vars$f.textColor]: globalRefs$7.colors.success.main,
7627
7654
  },
7628
7655
  },
7629
7656
 
7630
7657
  textAlign: {
7631
- right: { [vars$e.textAlign]: 'right' },
7632
- left: { [vars$e.textAlign]: 'left' },
7633
- center: { [vars$e.textAlign]: 'center' },
7658
+ right: { [vars$f.textAlign]: 'right' },
7659
+ left: { [vars$f.textAlign]: 'left' },
7660
+ center: { [vars$f.textAlign]: 'center' },
7634
7661
  },
7635
7662
 
7636
7663
  _fullWidth: {
7637
- [vars$e.hostWidth]: '100%',
7664
+ [vars$f.hostWidth]: '100%',
7638
7665
  },
7639
7666
 
7640
7667
  _italic: {
7641
- [vars$e.fontStyle]: 'italic',
7668
+ [vars$f.fontStyle]: 'italic',
7642
7669
  },
7643
7670
 
7644
7671
  _uppercase: {
7645
- [vars$e.textTransform]: 'uppercase',
7672
+ [vars$f.textTransform]: 'uppercase',
7646
7673
  },
7647
7674
 
7648
7675
  _lowercase: {
7649
- [vars$e.textTransform]: 'lowercase',
7676
+ [vars$f.textTransform]: 'lowercase',
7650
7677
  },
7651
7678
  };
7652
7679
 
7653
7680
  var text$1 = /*#__PURE__*/Object.freeze({
7654
7681
  __proto__: null,
7655
7682
  default: text,
7656
- vars: vars$e
7683
+ vars: vars$f
7657
7684
  });
7658
7685
 
7659
7686
  const globalRefs$6 = getThemeRefs(globals);
7660
- const vars$d = LinkClass.cssVarList;
7687
+ const vars$e = LinkClass.cssVarList;
7661
7688
 
7662
7689
  const link = {
7663
- [vars$d.cursor]: 'pointer',
7690
+ [vars$e.cursor]: 'pointer',
7664
7691
 
7665
- [vars$d.textColor]: globalRefs$6.colors.primary.main,
7692
+ [vars$e.textColor]: globalRefs$6.colors.primary.main,
7666
7693
 
7667
7694
  textAlign: {
7668
- right: { [vars$d.textAlign]: 'right' },
7669
- left: { [vars$d.textAlign]: 'left' },
7670
- center: { [vars$d.textAlign]: 'center' },
7695
+ right: { [vars$e.textAlign]: 'right' },
7696
+ left: { [vars$e.textAlign]: 'left' },
7697
+ center: { [vars$e.textAlign]: 'center' },
7671
7698
  },
7672
7699
 
7673
7700
  _fullWidth: {
7674
- [vars$d.hostWidth]: '100%',
7701
+ [vars$e.hostWidth]: '100%',
7675
7702
  },
7676
7703
 
7677
7704
  mode: {
7678
7705
  primary: {
7679
- [vars$d.textColor]: globalRefs$6.colors.primary.main,
7706
+ [vars$e.textColor]: globalRefs$6.colors.primary.main,
7680
7707
  },
7681
7708
  secondary: {
7682
- [vars$d.textColor]: globalRefs$6.colors.secondary.main,
7709
+ [vars$e.textColor]: globalRefs$6.colors.secondary.main,
7683
7710
  },
7684
7711
  error: {
7685
- [vars$d.textColor]: globalRefs$6.colors.error.main,
7712
+ [vars$e.textColor]: globalRefs$6.colors.error.main,
7686
7713
  },
7687
7714
  success: {
7688
- [vars$d.textColor]: globalRefs$6.colors.success.main,
7715
+ [vars$e.textColor]: globalRefs$6.colors.success.main,
7689
7716
  },
7690
7717
  },
7691
7718
  };
@@ -7693,133 +7720,133 @@ const link = {
7693
7720
  var link$1 = /*#__PURE__*/Object.freeze({
7694
7721
  __proto__: null,
7695
7722
  default: link,
7696
- vars: vars$d
7723
+ vars: vars$e
7697
7724
  });
7698
7725
 
7699
7726
  const globalRefs$5 = getThemeRefs(globals);
7700
- const compVars$1 = DividerClass.cssVarList;
7727
+ const compVars$2 = DividerClass.cssVarList;
7701
7728
 
7702
7729
  const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
7703
7730
  {
7704
7731
  thickness: '2px',
7705
7732
  spacing: '10px',
7706
7733
  },
7707
- componentName$p
7734
+ componentName$q
7708
7735
  );
7709
7736
 
7710
7737
  const divider = {
7711
7738
  ...helperTheme$1,
7712
7739
 
7713
- [compVars$1.alignItems]: 'center',
7714
- [compVars$1.flexDirection]: 'row',
7715
- [compVars$1.alignSelf]: 'stretch',
7716
- [compVars$1.hostWidth]: '100%',
7717
- [compVars$1.stripeColor]: globalRefs$5.colors.surface.main,
7718
- [compVars$1.stripeColorOpacity]: '0.5',
7719
- [compVars$1.stripeHorizontalThickness]: helperRefs$1.thickness,
7720
- [compVars$1.labelTextWidth]: 'fit-content',
7721
- [compVars$1.labelTextMaxWidth]: 'calc(100% - 100px)',
7722
- [compVars$1.labelTextHorizontalSpacing]: helperRefs$1.spacing,
7740
+ [compVars$2.alignItems]: 'center',
7741
+ [compVars$2.flexDirection]: 'row',
7742
+ [compVars$2.alignSelf]: 'stretch',
7743
+ [compVars$2.hostWidth]: '100%',
7744
+ [compVars$2.stripeColor]: globalRefs$5.colors.surface.main,
7745
+ [compVars$2.stripeColorOpacity]: '0.5',
7746
+ [compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
7747
+ [compVars$2.labelTextWidth]: 'fit-content',
7748
+ [compVars$2.labelTextMaxWidth]: 'calc(100% - 100px)',
7749
+ [compVars$2.labelTextHorizontalSpacing]: helperRefs$1.spacing,
7723
7750
 
7724
7751
  _vertical: {
7725
- [compVars$1.minHeight]: '200px',
7726
- [compVars$1.flexDirection]: 'column',
7727
- [compVars$1.hostWidth]: 'fit-content',
7728
- [compVars$1.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
7729
- [compVars$1.stripeVerticalThickness]: helperRefs$1.thickness,
7730
- [compVars$1.labelTextWidth]: 'fit-content',
7731
- [compVars$1.labelTextMaxWidth]: '100%',
7732
- [compVars$1.labelTextVerticalSpacing]: helperRefs$1.spacing,
7752
+ [compVars$2.minHeight]: '200px',
7753
+ [compVars$2.flexDirection]: 'column',
7754
+ [compVars$2.hostWidth]: 'fit-content',
7755
+ [compVars$2.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
7756
+ [compVars$2.stripeVerticalThickness]: helperRefs$1.thickness,
7757
+ [compVars$2.labelTextWidth]: 'fit-content',
7758
+ [compVars$2.labelTextMaxWidth]: '100%',
7759
+ [compVars$2.labelTextVerticalSpacing]: helperRefs$1.spacing,
7733
7760
  },
7734
7761
  };
7735
7762
 
7736
- const vars$c = {
7737
- ...compVars$1,
7763
+ const vars$d = {
7764
+ ...compVars$2,
7738
7765
  ...helperVars$1,
7739
7766
  };
7740
7767
 
7741
7768
  var divider$1 = /*#__PURE__*/Object.freeze({
7742
7769
  __proto__: null,
7743
7770
  default: divider,
7744
- vars: vars$c
7771
+ vars: vars$d
7745
7772
  });
7746
7773
 
7747
- const vars$b = PasscodeClass.cssVarList;
7774
+ const vars$c = PasscodeClass.cssVarList;
7748
7775
 
7749
7776
  const passcode = {
7750
- [vars$b.fontFamily]: refs.fontFamily,
7751
- [vars$b.fontSize]: refs.fontSize,
7752
- [vars$b.labelTextColor]: refs.labelTextColor,
7753
- [vars$b.labelRequiredIndicator]: refs.requiredIndicator,
7754
- [vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
7755
- [vars$b.digitValueTextColor]: refs.valueTextColor,
7756
- [vars$b.digitPadding]: '0',
7757
- [vars$b.digitTextAlign]: 'center',
7758
- [vars$b.digitSpacing]: '4px',
7759
- [vars$b.hostWidth]: refs.width,
7760
- [vars$b.digitOutlineColor]: 'transparent',
7761
- [vars$b.digitOutlineWidth]: refs.outlineWidth,
7762
- [vars$b.focusedDigitFieldOutlineColor]: refs.outlineColor,
7763
- [vars$b.digitSize]: refs.inputHeight,
7777
+ [vars$c.fontFamily]: refs.fontFamily,
7778
+ [vars$c.fontSize]: refs.fontSize,
7779
+ [vars$c.labelTextColor]: refs.labelTextColor,
7780
+ [vars$c.labelRequiredIndicator]: refs.requiredIndicator,
7781
+ [vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
7782
+ [vars$c.digitValueTextColor]: refs.valueTextColor,
7783
+ [vars$c.digitPadding]: '0',
7784
+ [vars$c.digitTextAlign]: 'center',
7785
+ [vars$c.digitSpacing]: '4px',
7786
+ [vars$c.hostWidth]: refs.width,
7787
+ [vars$c.digitOutlineColor]: 'transparent',
7788
+ [vars$c.digitOutlineWidth]: refs.outlineWidth,
7789
+ [vars$c.focusedDigitFieldOutlineColor]: refs.outlineColor,
7790
+ [vars$c.digitSize]: refs.inputHeight,
7764
7791
 
7765
7792
  _hideCursor: {
7766
- [vars$b.digitCaretTextColor]: 'transparent',
7793
+ [vars$c.digitCaretTextColor]: 'transparent',
7767
7794
  },
7768
7795
  };
7769
7796
 
7770
7797
  var passcode$1 = /*#__PURE__*/Object.freeze({
7771
7798
  __proto__: null,
7772
7799
  default: passcode,
7773
- vars: vars$b
7800
+ vars: vars$c
7774
7801
  });
7775
7802
 
7776
7803
  const globalRefs$4 = getThemeRefs(globals);
7777
- const vars$a = LoaderLinearClass.cssVarList;
7804
+ const vars$b = LoaderLinearClass.cssVarList;
7778
7805
 
7779
7806
  const loaderLinear = {
7780
- [vars$a.hostDisplay]: 'inline-block',
7781
- [vars$a.hostWidth]: '100%',
7807
+ [vars$b.hostDisplay]: 'inline-block',
7808
+ [vars$b.hostWidth]: '100%',
7782
7809
 
7783
- [vars$a.barColor]: globalRefs$4.colors.surface.contrast,
7784
- [vars$a.barWidth]: '20%',
7810
+ [vars$b.barColor]: globalRefs$4.colors.surface.contrast,
7811
+ [vars$b.barWidth]: '20%',
7785
7812
 
7786
- [vars$a.barBackgroundColor]: globalRefs$4.colors.surface.main,
7787
- [vars$a.barBorderRadius]: '4px',
7813
+ [vars$b.barBackgroundColor]: globalRefs$4.colors.surface.main,
7814
+ [vars$b.barBorderRadius]: '4px',
7788
7815
 
7789
- [vars$a.animationDuration]: '2s',
7790
- [vars$a.animationTimingFunction]: 'linear',
7791
- [vars$a.animationIterationCount]: 'infinite',
7792
- [vars$a.verticalPadding]: '0.25em',
7816
+ [vars$b.animationDuration]: '2s',
7817
+ [vars$b.animationTimingFunction]: 'linear',
7818
+ [vars$b.animationIterationCount]: 'infinite',
7819
+ [vars$b.verticalPadding]: '0.25em',
7793
7820
 
7794
7821
  size: {
7795
- xs: { [vars$a.barHeight]: '2px' },
7796
- sm: { [vars$a.barHeight]: '4px' },
7797
- md: { [vars$a.barHeight]: '6px' },
7798
- lg: { [vars$a.barHeight]: '8px' },
7822
+ xs: { [vars$b.barHeight]: '2px' },
7823
+ sm: { [vars$b.barHeight]: '4px' },
7824
+ md: { [vars$b.barHeight]: '6px' },
7825
+ lg: { [vars$b.barHeight]: '8px' },
7799
7826
  },
7800
7827
 
7801
7828
  mode: {
7802
7829
  primary: {
7803
- [vars$a.barColor]: globalRefs$4.colors.primary.main,
7830
+ [vars$b.barColor]: globalRefs$4.colors.primary.main,
7804
7831
  },
7805
7832
  secondary: {
7806
- [vars$a.barColor]: globalRefs$4.colors.secondary.main,
7833
+ [vars$b.barColor]: globalRefs$4.colors.secondary.main,
7807
7834
  },
7808
7835
  },
7809
7836
 
7810
7837
  _hidden: {
7811
- [vars$a.hostDisplay]: 'none',
7838
+ [vars$b.hostDisplay]: 'none',
7812
7839
  },
7813
7840
  };
7814
7841
 
7815
7842
  var loaderLinear$1 = /*#__PURE__*/Object.freeze({
7816
7843
  __proto__: null,
7817
7844
  default: loaderLinear,
7818
- vars: vars$a
7845
+ vars: vars$b
7819
7846
  });
7820
7847
 
7821
7848
  const globalRefs$3 = getThemeRefs(globals);
7822
- const compVars = LoaderRadialClass.cssVarList;
7849
+ const compVars$1 = LoaderRadialClass.cssVarList;
7823
7850
 
7824
7851
  const [helperTheme, helperRefs, helperVars] = createHelperVars(
7825
7852
  {
@@ -7833,110 +7860,145 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
7833
7860
  },
7834
7861
  },
7835
7862
  },
7836
- componentName$r
7863
+ componentName$s
7837
7864
  );
7838
7865
 
7839
7866
  const loaderRadial = {
7840
7867
  ...helperTheme,
7841
7868
 
7842
- [compVars.animationDuration]: '2s',
7843
- [compVars.animationTimingFunction]: 'linear',
7844
- [compVars.animationIterationCount]: 'infinite',
7845
- [compVars.spinnerBorderStyle]: 'solid',
7846
- [compVars.spinnerBorderWidth]: '0.2em',
7847
- [compVars.spinnerBorderRadius]: '50%',
7848
- [compVars.spinnerQuadrant1Color]: helperRefs.spinnerColor,
7849
- [compVars.spinnerQuadrant2Color]: 'transparent',
7850
- [compVars.spinnerQuadrant3Color]: helperRefs.spinnerColor,
7851
- [compVars.spinnerQuadrant4Color]: 'transparent',
7869
+ [compVars$1.animationDuration]: '2s',
7870
+ [compVars$1.animationTimingFunction]: 'linear',
7871
+ [compVars$1.animationIterationCount]: 'infinite',
7872
+ [compVars$1.spinnerBorderStyle]: 'solid',
7873
+ [compVars$1.spinnerBorderWidth]: '0.2em',
7874
+ [compVars$1.spinnerBorderRadius]: '50%',
7875
+ [compVars$1.spinnerQuadrant1Color]: helperRefs.spinnerColor,
7876
+ [compVars$1.spinnerQuadrant2Color]: 'transparent',
7877
+ [compVars$1.spinnerQuadrant3Color]: helperRefs.spinnerColor,
7878
+ [compVars$1.spinnerQuadrant4Color]: 'transparent',
7852
7879
 
7853
7880
  size: {
7854
- xs: { [compVars.spinnerSize]: '20px' },
7855
- sm: { [compVars.spinnerSize]: '30px' },
7856
- md: { [compVars.spinnerSize]: '40px' },
7857
- lg: { [compVars.spinnerSize]: '60px' },
7858
- xl: { [compVars.spinnerSize]: '80px' },
7881
+ xs: { [compVars$1.spinnerSize]: '20px' },
7882
+ sm: { [compVars$1.spinnerSize]: '30px' },
7883
+ md: { [compVars$1.spinnerSize]: '40px' },
7884
+ lg: { [compVars$1.spinnerSize]: '60px' },
7885
+ xl: { [compVars$1.spinnerSize]: '80px' },
7859
7886
  },
7860
7887
 
7861
7888
  _hidden: {
7862
- [compVars.hostDisplay]: 'none',
7889
+ [compVars$1.hostDisplay]: 'none',
7863
7890
  },
7864
7891
  };
7865
- const vars$9 = {
7866
- ...compVars,
7892
+ const vars$a = {
7893
+ ...compVars$1,
7867
7894
  ...helperVars,
7868
7895
  };
7869
7896
 
7870
7897
  var loaderRadial$1 = /*#__PURE__*/Object.freeze({
7871
7898
  __proto__: null,
7872
7899
  default: loaderRadial,
7873
- vars: vars$9
7900
+ vars: vars$a
7874
7901
  });
7875
7902
 
7876
7903
  const globalRefs$2 = getThemeRefs(globals);
7877
- const vars$8 = ComboBoxClass.cssVarList;
7904
+ const vars$9 = ComboBoxClass.cssVarList;
7878
7905
 
7879
7906
  const comboBox = {
7880
- [vars$8.hostWidth]: refs.width,
7881
- [vars$8.fontSize]: refs.fontSize,
7882
- [vars$8.fontFamily]: refs.fontFamily,
7883
- [vars$8.labelTextColor]: refs.labelTextColor,
7884
- [vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
7885
- [vars$8.inputBorderColor]: refs.borderColor,
7886
- [vars$8.inputBorderWidth]: refs.borderWidth,
7887
- [vars$8.inputBorderStyle]: refs.borderStyle,
7888
- [vars$8.inputBorderRadius]: refs.borderRadius,
7889
- [vars$8.inputOutlineColor]: refs.outlineColor,
7890
- [vars$8.inputOutlineOffset]: refs.outlineOffset,
7891
- [vars$8.inputOutlineWidth]: refs.outlineWidth,
7892
- [vars$8.inputOutlineStyle]: refs.outlineStyle,
7893
- [vars$8.labelRequiredIndicator]: refs.requiredIndicator,
7894
- [vars$8.inputValueTextColor]: refs.valueTextColor,
7895
- [vars$8.inputPlaceholderTextColor]: refs.placeholderTextColor,
7896
- [vars$8.inputBackgroundColor]: refs.backgroundColor,
7897
- [vars$8.inputHorizontalPadding]: refs.horizontalPadding,
7898
- [vars$8.inputHeight]: refs.inputHeight,
7899
- [vars$8.inputDropdownButtonColor]: globalRefs$2.colors.surface.contrast,
7900
- [vars$8.inputDropdownButtonCursor]: 'pointer',
7901
- [vars$8.inputDropdownButtonSize]: refs.toggleButtonSize,
7902
- [vars$8.inputDropdownButtonOffset]: globalRefs$2.spacing.xs,
7907
+ [vars$9.hostWidth]: refs.width,
7908
+ [vars$9.fontSize]: refs.fontSize,
7909
+ [vars$9.fontFamily]: refs.fontFamily,
7910
+ [vars$9.labelTextColor]: refs.labelTextColor,
7911
+ [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
7912
+ [vars$9.inputBorderColor]: refs.borderColor,
7913
+ [vars$9.inputBorderWidth]: refs.borderWidth,
7914
+ [vars$9.inputBorderStyle]: refs.borderStyle,
7915
+ [vars$9.inputBorderRadius]: refs.borderRadius,
7916
+ [vars$9.inputOutlineColor]: refs.outlineColor,
7917
+ [vars$9.inputOutlineOffset]: refs.outlineOffset,
7918
+ [vars$9.inputOutlineWidth]: refs.outlineWidth,
7919
+ [vars$9.inputOutlineStyle]: refs.outlineStyle,
7920
+ [vars$9.labelRequiredIndicator]: refs.requiredIndicator,
7921
+ [vars$9.inputValueTextColor]: refs.valueTextColor,
7922
+ [vars$9.inputPlaceholderTextColor]: refs.placeholderTextColor,
7923
+ [vars$9.inputBackgroundColor]: refs.backgroundColor,
7924
+ [vars$9.inputHorizontalPadding]: refs.horizontalPadding,
7925
+ [vars$9.inputHeight]: refs.inputHeight,
7926
+ [vars$9.inputDropdownButtonColor]: globalRefs$2.colors.surface.contrast,
7927
+ [vars$9.inputDropdownButtonCursor]: 'pointer',
7928
+ [vars$9.inputDropdownButtonSize]: refs.toggleButtonSize,
7929
+ [vars$9.inputDropdownButtonOffset]: globalRefs$2.spacing.xs,
7903
7930
 
7904
7931
  _readonly: {
7905
- [vars$8.inputDropdownButtonCursor]: 'default',
7932
+ [vars$9.inputDropdownButtonCursor]: 'default',
7906
7933
  },
7907
7934
 
7908
7935
  // Overlay theme exposed via the component:
7909
- [vars$8.overlayFontSize]: refs.fontSize,
7910
- [vars$8.overlayFontFamily]: refs.fontFamily,
7911
- [vars$8.overlayCursor]: 'pointer',
7912
- [vars$8.overlayItemBoxShadow]: 'none',
7936
+ [vars$9.overlayFontSize]: refs.fontSize,
7937
+ [vars$9.overlayFontFamily]: refs.fontFamily,
7938
+ [vars$9.overlayCursor]: 'pointer',
7939
+ [vars$9.overlayItemBoxShadow]: 'none',
7913
7940
 
7914
7941
  // Overlay direct theme:
7915
- [vars$8.overlay.minHeight]: '400px',
7916
- [vars$8.overlay.margin]: '0',
7942
+ [vars$9.overlay.minHeight]: '400px',
7943
+ [vars$9.overlay.margin]: '0',
7917
7944
  };
7918
7945
 
7919
7946
  var comboBox$1 = /*#__PURE__*/Object.freeze({
7920
7947
  __proto__: null,
7921
7948
  comboBox: comboBox,
7922
7949
  default: comboBox,
7923
- vars: vars$8
7950
+ vars: vars$9
7924
7951
  });
7925
7952
 
7926
- const vars$7 = ImageClass.cssVarList;
7953
+ const vars$8 = ImageClass.cssVarList;
7927
7954
 
7928
7955
  const image = {};
7929
7956
 
7930
7957
  var image$1 = /*#__PURE__*/Object.freeze({
7931
7958
  __proto__: null,
7932
7959
  default: image,
7933
- vars: vars$7
7960
+ vars: vars$8
7934
7961
  });
7935
7962
 
7936
- const vars$6 = PhoneFieldClass.cssVarList;
7963
+ const vars$7 = PhoneFieldClass.cssVarList;
7937
7964
 
7938
7965
  const phoneField = {
7939
- [vars$6.hostWidth]: refs.width,
7966
+ [vars$7.hostWidth]: refs.width,
7967
+ [vars$7.fontSize]: refs.fontSize,
7968
+ [vars$7.fontFamily]: refs.fontFamily,
7969
+ [vars$7.labelTextColor]: refs.labelTextColor,
7970
+ [vars$7.labelRequiredIndicator]: refs.requiredIndicator,
7971
+ [vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
7972
+ [vars$7.inputValueTextColor]: refs.valueTextColor,
7973
+ [vars$7.inputPlaceholderTextColor]: refs.placeholderTextColor,
7974
+ [vars$7.inputBorderStyle]: refs.borderStyle,
7975
+ [vars$7.inputBorderWidth]: refs.borderWidth,
7976
+ [vars$7.inputBorderColor]: refs.borderColor,
7977
+ [vars$7.inputBorderRadius]: refs.borderRadius,
7978
+ [vars$7.inputOutlineStyle]: refs.outlineStyle,
7979
+ [vars$7.inputOutlineWidth]: refs.outlineWidth,
7980
+ [vars$7.inputOutlineColor]: refs.outlineColor,
7981
+ [vars$7.inputOutlineOffset]: refs.outlineOffset,
7982
+ [vars$7.phoneInputWidth]: refs.minWidth,
7983
+ [vars$7.countryCodeInputWidth]: '5em',
7984
+ [vars$7.countryCodeDropdownWidth]: '20em',
7985
+
7986
+ // '@overlay': {
7987
+ // overlayItemBackgroundColor: 'red'
7988
+ // }
7989
+ };
7990
+
7991
+ var phoneField$1 = /*#__PURE__*/Object.freeze({
7992
+ __proto__: null,
7993
+ default: phoneField,
7994
+ vars: vars$7
7995
+ });
7996
+
7997
+ const vars$6 = PhoneFieldInputBoxClass.cssVarList;
7998
+
7999
+ const phoneInputBoxField = {
8000
+ [vars$6.hostWidth]: '16em',
8001
+ [vars$6.hostMinWidth]: refs.minWidth,
7940
8002
  [vars$6.fontSize]: refs.fontSize,
7941
8003
  [vars$6.fontFamily]: refs.fontFamily,
7942
8004
  [vars$6.labelTextColor]: refs.labelTextColor,
@@ -7952,185 +8014,269 @@ const phoneField = {
7952
8014
  [vars$6.inputOutlineWidth]: refs.outlineWidth,
7953
8015
  [vars$6.inputOutlineColor]: refs.outlineColor,
7954
8016
  [vars$6.inputOutlineOffset]: refs.outlineOffset,
7955
- [vars$6.phoneInputWidth]: refs.minWidth,
7956
- [vars$6.countryCodeInputWidth]: '5em',
7957
- [vars$6.countryCodeDropdownWidth]: '20em',
7958
-
7959
- // '@overlay': {
7960
- // overlayItemBackgroundColor: 'red'
7961
- // }
7962
- };
7963
-
7964
- var phoneField$1 = /*#__PURE__*/Object.freeze({
7965
- __proto__: null,
7966
- default: phoneField,
7967
- vars: vars$6
7968
- });
7969
-
7970
- const vars$5 = PhoneFieldInputBoxClass.cssVarList;
7971
-
7972
- const phoneInputBoxField = {
7973
- [vars$5.hostWidth]: '16em',
7974
- [vars$5.hostMinWidth]: refs.minWidth,
7975
- [vars$5.fontSize]: refs.fontSize,
7976
- [vars$5.fontFamily]: refs.fontFamily,
7977
- [vars$5.labelTextColor]: refs.labelTextColor,
7978
- [vars$5.labelRequiredIndicator]: refs.requiredIndicator,
7979
- [vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
7980
- [vars$5.inputValueTextColor]: refs.valueTextColor,
7981
- [vars$5.inputPlaceholderTextColor]: refs.placeholderTextColor,
7982
- [vars$5.inputBorderStyle]: refs.borderStyle,
7983
- [vars$5.inputBorderWidth]: refs.borderWidth,
7984
- [vars$5.inputBorderColor]: refs.borderColor,
7985
- [vars$5.inputBorderRadius]: refs.borderRadius,
7986
- [vars$5.inputOutlineStyle]: refs.outlineStyle,
7987
- [vars$5.inputOutlineWidth]: refs.outlineWidth,
7988
- [vars$5.inputOutlineColor]: refs.outlineColor,
7989
- [vars$5.inputOutlineOffset]: refs.outlineOffset,
7990
8017
  _fullWidth: {
7991
- [vars$5.hostWidth]: refs.width,
8018
+ [vars$6.hostWidth]: refs.width,
7992
8019
  },
7993
8020
  };
7994
8021
 
7995
8022
  var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
7996
8023
  __proto__: null,
7997
8024
  default: phoneInputBoxField,
7998
- vars: vars$5
8025
+ vars: vars$6
7999
8026
  });
8000
8027
 
8001
- const vars$4 = NewPasswordClass.cssVarList;
8028
+ const vars$5 = NewPasswordClass.cssVarList;
8002
8029
 
8003
8030
  const newPassword = {
8004
- [vars$4.hostWidth]: refs.width,
8005
- [vars$4.hostMinWidth]: refs.minWidth,
8006
- [vars$4.fontSize]: refs.fontSize,
8007
- [vars$4.fontFamily]: refs.fontFamily,
8008
- [vars$4.spaceBetweenInputs]: '1em',
8009
- [vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
8031
+ [vars$5.hostWidth]: refs.width,
8032
+ [vars$5.hostMinWidth]: refs.minWidth,
8033
+ [vars$5.fontSize]: refs.fontSize,
8034
+ [vars$5.fontFamily]: refs.fontFamily,
8035
+ [vars$5.spaceBetweenInputs]: '1em',
8036
+ [vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
8010
8037
 
8011
8038
  _required: {
8012
8039
  // NewPassword doesn't pass `required` attribute to its Password components.
8013
8040
  // That's why we fake the required indicator on each input.
8014
8041
  // We do that by injecting `::after` element, and populating it with requiredIndicator content.
8015
- [vars$4.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
8042
+ [vars$5.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
8016
8043
  },
8017
8044
  };
8018
8045
 
8019
8046
  var newPassword$1 = /*#__PURE__*/Object.freeze({
8020
8047
  __proto__: null,
8021
8048
  default: newPassword,
8022
- vars: vars$4
8049
+ vars: vars$5
8023
8050
  });
8024
8051
 
8025
- const vars$3 = UploadFileClass.cssVarList;
8052
+ const vars$4 = UploadFileClass.cssVarList;
8026
8053
 
8027
8054
  const uploadFile = {
8028
- [vars$3.labelTextColor]: refs.labelTextColor,
8029
- [vars$3.fontFamily]: refs.fontFamily,
8055
+ [vars$4.labelTextColor]: refs.labelTextColor,
8056
+ [vars$4.fontFamily]: refs.fontFamily,
8030
8057
 
8031
- [vars$3.iconSize]: '2em',
8058
+ [vars$4.iconSize]: '2em',
8032
8059
 
8033
- [vars$3.hostPadding]: '0.75em',
8034
- [vars$3.gap]: '0.5em',
8060
+ [vars$4.hostPadding]: '0.75em',
8061
+ [vars$4.gap]: '0.5em',
8035
8062
 
8036
- [vars$3.fontSize]: '16px',
8037
- [vars$3.titleFontWeight]: '500',
8038
- [vars$3.lineHeight]: '1em',
8063
+ [vars$4.fontSize]: '16px',
8064
+ [vars$4.titleFontWeight]: '500',
8065
+ [vars$4.lineHeight]: '1em',
8039
8066
 
8040
- [vars$3.borderWidth]: refs.borderWidth,
8041
- [vars$3.borderColor]: refs.borderColor,
8042
- [vars$3.borderRadius]: refs.borderRadius,
8043
- [vars$3.borderStyle]: 'dashed',
8067
+ [vars$4.borderWidth]: refs.borderWidth,
8068
+ [vars$4.borderColor]: refs.borderColor,
8069
+ [vars$4.borderRadius]: refs.borderRadius,
8070
+ [vars$4.borderStyle]: 'dashed',
8044
8071
 
8045
8072
  _required: {
8046
- [vars$3.requiredIndicator]: refs.requiredIndicator,
8073
+ [vars$4.requiredIndicator]: refs.requiredIndicator,
8047
8074
  },
8048
8075
 
8049
8076
  size: {
8050
8077
  xs: {
8051
- [vars$3.hostHeight]: '196px',
8052
- [vars$3.hostWidth]: '200px',
8053
- [vars$3.titleFontSize]: '0.875em',
8054
- [vars$3.descriptionFontSize]: '0.875em',
8055
- [vars$3.lineHeight]: '1.25em',
8078
+ [vars$4.hostHeight]: '196px',
8079
+ [vars$4.hostWidth]: '200px',
8080
+ [vars$4.titleFontSize]: '0.875em',
8081
+ [vars$4.descriptionFontSize]: '0.875em',
8082
+ [vars$4.lineHeight]: '1.25em',
8056
8083
  },
8057
8084
  sm: {
8058
- [vars$3.hostHeight]: '216px',
8059
- [vars$3.hostWidth]: '230px',
8060
- [vars$3.titleFontSize]: '1em',
8061
- [vars$3.descriptionFontSize]: '0.875em',
8062
- [vars$3.lineHeight]: '1.25em',
8085
+ [vars$4.hostHeight]: '216px',
8086
+ [vars$4.hostWidth]: '230px',
8087
+ [vars$4.titleFontSize]: '1em',
8088
+ [vars$4.descriptionFontSize]: '0.875em',
8089
+ [vars$4.lineHeight]: '1.25em',
8063
8090
  },
8064
8091
  md: {
8065
- [vars$3.hostHeight]: '256px',
8066
- [vars$3.hostWidth]: '312px',
8067
- [vars$3.titleFontSize]: '1.125em',
8068
- [vars$3.descriptionFontSize]: '1em',
8069
- [vars$3.lineHeight]: '1.5em',
8092
+ [vars$4.hostHeight]: '256px',
8093
+ [vars$4.hostWidth]: '312px',
8094
+ [vars$4.titleFontSize]: '1.125em',
8095
+ [vars$4.descriptionFontSize]: '1em',
8096
+ [vars$4.lineHeight]: '1.5em',
8070
8097
  },
8071
8098
  lg: {
8072
- [vars$3.hostHeight]: '280px',
8073
- [vars$3.hostWidth]: '336px',
8074
- [vars$3.titleFontSize]: '1.125em',
8075
- [vars$3.descriptionFontSize]: '1.125em',
8076
- [vars$3.lineHeight]: '1.75em',
8099
+ [vars$4.hostHeight]: '280px',
8100
+ [vars$4.hostWidth]: '336px',
8101
+ [vars$4.titleFontSize]: '1.125em',
8102
+ [vars$4.descriptionFontSize]: '1.125em',
8103
+ [vars$4.lineHeight]: '1.75em',
8077
8104
  },
8078
8105
  },
8079
8106
 
8080
8107
  _fullWidth: {
8081
- [vars$3.hostWidth]: refs.width,
8108
+ [vars$4.hostWidth]: refs.width,
8082
8109
  },
8083
8110
  };
8084
8111
 
8085
8112
  var uploadFile$1 = /*#__PURE__*/Object.freeze({
8086
8113
  __proto__: null,
8087
8114
  default: uploadFile,
8088
- vars: vars$3
8115
+ vars: vars$4
8089
8116
  });
8090
8117
 
8091
8118
  const globalRefs$1 = getThemeRefs(globals);
8092
8119
 
8093
- const vars$2 = ButtonSelectionGroupItemClass.cssVarList;
8120
+ const vars$3 = ButtonSelectionGroupItemClass.cssVarList;
8094
8121
 
8095
8122
  const buttonSelectionGroupItem = {
8096
- [vars$2.backgroundColor]: globalRefs$1.colors.surface.light,
8097
- [vars$2.labelTextColor]: globalRefs$1.colors.surface.contrast,
8098
- [vars$2.borderColor]: globalRefs$1.colors.surface.main,
8099
- [vars$2.borderStyle]: 'solid',
8100
- [vars$2.borderRadius]: globalRefs$1.radius.sm,
8123
+ [vars$3.backgroundColor]: globalRefs$1.colors.surface.light,
8124
+ [vars$3.labelTextColor]: globalRefs$1.colors.surface.contrast,
8125
+ [vars$3.borderColor]: globalRefs$1.colors.surface.main,
8126
+ [vars$3.borderStyle]: 'solid',
8127
+ [vars$3.borderRadius]: globalRefs$1.radius.sm,
8101
8128
 
8102
8129
  _hover: {
8103
- [vars$2.backgroundColor]: '#f4f5f5', // can we take it from the palette?
8130
+ [vars$3.backgroundColor]: '#f4f5f5', // can we take it from the palette?
8104
8131
  },
8105
8132
 
8106
8133
  _selected: {
8107
- [vars$2.borderColor]: globalRefs$1.colors.surface.contrast,
8108
- [vars$2.backgroundColor]: globalRefs$1.colors.surface.contrast,
8109
- [vars$2.labelTextColor]: globalRefs$1.colors.surface.light,
8134
+ [vars$3.borderColor]: globalRefs$1.colors.surface.contrast,
8135
+ [vars$3.backgroundColor]: globalRefs$1.colors.surface.contrast,
8136
+ [vars$3.labelTextColor]: globalRefs$1.colors.surface.light,
8110
8137
  },
8111
8138
  };
8112
8139
 
8113
8140
  var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
8114
8141
  __proto__: null,
8115
8142
  default: buttonSelectionGroupItem,
8116
- vars: vars$2
8143
+ vars: vars$3
8117
8144
  });
8118
8145
 
8119
8146
  const globalRefs = getThemeRefs(globals);
8120
- const vars$1 = ButtonSelectionGroupClass.cssVarList;
8147
+ const vars$2 = ButtonSelectionGroupClass.cssVarList;
8121
8148
 
8122
8149
  const buttonSelectionGroup = {
8123
- [vars$1.fontFamily]: refs.fontFamily,
8124
- [vars$1.labelTextColor]: refs.labelTextColor,
8125
- [vars$1.labelRequiredIndicator]: refs.requiredIndicator,
8126
- [vars$1.errorMessageTextColor]: refs.errorMessageTextColor,
8127
- [vars$1.itemsSpacing]: globalRefs.spacing.sm,
8128
- [vars$1.hostWidth]: refs.width,
8150
+ [vars$2.fontFamily]: refs.fontFamily,
8151
+ [vars$2.labelTextColor]: refs.labelTextColor,
8152
+ [vars$2.labelRequiredIndicator]: refs.requiredIndicator,
8153
+ [vars$2.errorMessageTextColor]: refs.errorMessageTextColor,
8154
+ [vars$2.itemsSpacing]: globalRefs.spacing.sm,
8155
+ [vars$2.hostWidth]: refs.width,
8129
8156
  };
8130
8157
 
8131
8158
  var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
8132
8159
  __proto__: null,
8133
8160
  default: buttonSelectionGroup,
8161
+ vars: vars$2
8162
+ });
8163
+
8164
+ const componentName = getComponentName('modal');
8165
+
8166
+ const customMixin = (superclass) =>
8167
+ class ModalMixinClass extends superclass {
8168
+ get opened() {
8169
+ return this.getAttribute('opened') === 'true';
8170
+ }
8171
+
8172
+ handleOpened() {
8173
+ forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });
8174
+ if (this.opened) {
8175
+ this.style.display = '';
8176
+ } else {
8177
+ this.style.display = 'none';
8178
+ }
8179
+ }
8180
+
8181
+ init() {
8182
+ super.init?.();
8183
+ this.style.display = 'none';
8184
+
8185
+ // vaadin-dialog might not be loaded in time
8186
+ // in order to make sure it's loaded before this block is running
8187
+ // we are wrapping it with setTimeout
8188
+ setTimeout(() => {
8189
+ // we want to sync descope-modal content through vaadin-dialog into the overlay
8190
+ // so we are adding a slot to the overlay, which allows us to forward the content from
8191
+ // vaadin-dialog to vaadin-dialog-overlay
8192
+ this.baseElement.shadowRoot
8193
+ .querySelector('vaadin-dialog-overlay')
8194
+ .appendChild(document.createElement('slot'));
8195
+
8196
+ this.#overrideOverlaySettings();
8197
+
8198
+ // we need to always open the modal in `opened=false`
8199
+ // to prevent it from rendering outside the dialog
8200
+ // first, we have to run `overrideOverlaySettings` to setup
8201
+ // the component.
8202
+ this.handleOpened();
8203
+ });
8204
+ }
8205
+
8206
+ // the default vaadin behavior is to attach the overlay to the body when opened
8207
+ // we do not want that because it's difficult to style the overlay in this way
8208
+ // so we override it to open inside the shadow DOM
8209
+ #overrideOverlaySettings() {
8210
+ const overlay = this.baseElement.shadowRoot.querySelector('vaadin-dialog-overlay');
8211
+
8212
+ overlay._attachOverlay = () => {
8213
+ overlay.bringToFront();
8214
+ this.baseElement.setAttribute('style', 'display:flex!important;');
8215
+ };
8216
+ overlay._detachOverlay = () => {
8217
+ this.baseElement.style.display = 'none';
8218
+ };
8219
+ overlay._enterModalState = () => {};
8220
+
8221
+ overlay.close = () => false;
8222
+ }
8223
+ };
8224
+
8225
+ const ModalClass = compose(
8226
+ createStyleMixin({
8227
+ mappings: {
8228
+ overlayBackgroundColor: { property: () => ModalClass.cssVarList.overlay.backgroundColor },
8229
+ overlayShadow: { property: () => ModalClass.cssVarList.overlay.shadow },
8230
+ overlayWidth: { property: () => ModalClass.cssVarList.overlay.width },
8231
+ },
8232
+ }),
8233
+ portalMixin({
8234
+ name: 'overlay',
8235
+ selector: '',
8236
+ mappings: {
8237
+ hostDisplay: {
8238
+ selector: () => ':host(.descope-modal)',
8239
+ property: 'display',
8240
+ important: true,
8241
+ },
8242
+ backgroundColor: { selector: () => '::part(content)', property: 'background-color' },
8243
+ width: { selector: () => '::part(overlay)', property: 'width' },
8244
+ shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
8245
+ },
8246
+ forward: {
8247
+ include: false,
8248
+ attributes: ['opened'],
8249
+ },
8250
+ }),
8251
+ draggableMixin,
8252
+ componentNameValidationMixin,
8253
+ customMixin
8254
+ )(
8255
+ createProxy({
8256
+ slots: [''],
8257
+ wrappedEleName: 'vaadin-dialog',
8258
+ style: () => ``,
8259
+ excludeAttrsSync: ['tabindex', 'opened'],
8260
+ componentName,
8261
+ })
8262
+ );
8263
+
8264
+ const compVars = ModalClass.cssVarList;
8265
+
8266
+ const modal = {
8267
+ [compVars.hostWidth]: '400px',
8268
+ [compVars.hostHeight]: '400px',
8269
+ [compVars.overlayShadow]: 'none',
8270
+ [compVars.overlayWidth]: '700px',
8271
+ };
8272
+
8273
+ const vars$1 = {
8274
+ ...compVars,
8275
+ };
8276
+
8277
+ var modal$1 = /*#__PURE__*/Object.freeze({
8278
+ __proto__: null,
8279
+ default: modal,
8134
8280
  vars: vars$1
8135
8281
  });
8136
8282
 
@@ -8161,6 +8307,7 @@ const components = {
8161
8307
  uploadFile: uploadFile$1,
8162
8308
  buttonSelectionGroupItem: buttonSelectionGroupItem$1,
8163
8309
  buttonSelectionGroup: buttonSelectionGroup$1,
8310
+ modal: modal$1,
8164
8311
  };
8165
8312
 
8166
8313
  const theme = Object.keys(components).reduce(
@@ -8173,7 +8320,7 @@ const vars = Object.keys(components).reduce(
8173
8320
  );
8174
8321
 
8175
8322
  const defaultTheme = { globals, components: theme };
8176
- const themeVars = { globals: vars$r, components: vars };
8323
+ const themeVars = { globals: vars$s, components: vars };
8177
8324
 
8178
8325
  export { ButtonClass, ButtonSelectionGroupClass, ButtonSelectionGroupItemClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
8179
8326
  //# sourceMappingURL=index.esm.js.map