@descope/web-components-ui 1.0.282 → 1.0.284

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 +1081 -935
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +1081 -940
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/1621.js +1 -1
  6. package/dist/umd/{3280.js → 2106.js} +5 -129
  7. package/dist/umd/{3280.js.LICENSE.txt → 2106.js.LICENSE.txt} +0 -6
  8. package/dist/umd/2775.js +240 -0
  9. package/dist/umd/2775.js.LICENSE.txt +17 -0
  10. package/dist/umd/3003.js +1 -1
  11. package/dist/umd/3249.js +2 -0
  12. package/dist/umd/3249.js.LICENSE.txt +5 -0
  13. package/dist/umd/3373.js +2 -0
  14. package/dist/umd/3373.js.LICENSE.txt +5 -0
  15. package/dist/umd/4946.js +2 -0
  16. package/dist/umd/4946.js.LICENSE.txt +5 -0
  17. package/dist/umd/6091.js +2 -1
  18. package/dist/umd/6606.js +17 -0
  19. package/dist/umd/7044.js +1 -1
  20. package/dist/umd/7531.js +1 -1
  21. package/dist/umd/9383.js +94 -0
  22. package/dist/umd/descope-avatar-index-js.js +1 -0
  23. package/dist/umd/descope-grid-descope-grid-custom-column-index-js.js +1 -1
  24. package/dist/umd/descope-grid-index-js.js +1 -1
  25. package/dist/umd/index.js +1 -1
  26. package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +126 -1
  27. package/dist/umd/mapping-fields-descope-mappings-field-index-js.js.LICENSE.txt +5 -0
  28. package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
  29. package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
  30. package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +1 -1
  31. package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
  32. package/package.json +2 -1
  33. package/src/components/descope-avatar/AvatarClass.js +102 -0
  34. package/src/components/descope-avatar/index.js +8 -0
  35. package/src/components/descope-grid/descope-grid-custom-column/GridCustomColumnClass.js +2 -2
  36. package/src/components/descope-grid/descope-grid-text-column/GridTextColumnClass.js +5 -7
  37. package/src/index.cjs.js +1 -0
  38. package/src/index.js +1 -0
  39. package/src/theme/components/avatar.js +40 -0
  40. package/src/theme/components/index.js +2 -0
  41. package/dist/umd/3660.js +0 -17
  42. package/dist/umd/5345.js +0 -94
  43. package/dist/umd/7262.js +0 -1
  44. /package/dist/umd/{3660.js.LICENSE.txt → 6606.js.LICENSE.txt} +0 -0
  45. /package/dist/umd/{5345.js.LICENSE.txt → 9383.js.LICENSE.txt} +0 -0
package/dist/index.esm.js CHANGED
@@ -13,9 +13,10 @@ import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
13
13
  import '@vaadin/multi-select-combo-box';
14
14
  import '@vaadin/dialog';
15
15
  import '@vaadin/notification';
16
- import '@vaadin/custom-field';
16
+ import '@vaadin/avatar';
17
17
  import '@vaadin/icon';
18
18
  import '@vaadin/icons';
19
+ import '@vaadin/custom-field';
19
20
  import merge from 'lodash.merge';
20
21
  import Color from 'color';
21
22
 
@@ -1342,7 +1343,7 @@ const clickableMixin = (superclass) =>
1342
1343
  }
1343
1344
  };
1344
1345
 
1345
- const componentName$L = getComponentName('button');
1346
+ const componentName$M = getComponentName('button');
1346
1347
 
1347
1348
  const resetStyles = `
1348
1349
  :host {
@@ -1380,7 +1381,7 @@ const iconStyles = `
1380
1381
 
1381
1382
  const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
1382
1383
 
1383
- const { host: host$i, label: label$a } = {
1384
+ const { host: host$j, label: label$a } = {
1384
1385
  host: { selector: () => ':host' },
1385
1386
  label: { selector: '::part(label)' },
1386
1387
  };
@@ -1392,7 +1393,7 @@ const ButtonClass = compose(
1392
1393
  mappings: {
1393
1394
  hostWidth: { property: 'width' },
1394
1395
  hostHeight: { property: 'height' },
1395
- hostDirection: { ...host$i, property: 'direction' },
1396
+ hostDirection: { ...host$j, property: 'direction' },
1396
1397
  fontSize: {},
1397
1398
  fontFamily: {},
1398
1399
 
@@ -1444,7 +1445,7 @@ const ButtonClass = compose(
1444
1445
  }
1445
1446
  `,
1446
1447
  excludeAttrsSync: ['tabindex'],
1447
- componentName: componentName$L,
1448
+ componentName: componentName$M,
1448
1449
  })
1449
1450
  );
1450
1451
 
@@ -1481,7 +1482,7 @@ loadingIndicatorStyles = `
1481
1482
  }
1482
1483
  `;
1483
1484
 
1484
- customElements.define(componentName$L, ButtonClass);
1485
+ customElements.define(componentName$M, ButtonClass);
1485
1486
 
1486
1487
  const createBaseInputClass = (...args) =>
1487
1488
  compose(
@@ -1491,11 +1492,11 @@ const createBaseInputClass = (...args) =>
1491
1492
  inputEventsDispatchingMixin
1492
1493
  )(createBaseClass(...args));
1493
1494
 
1494
- const componentName$K = getComponentName('boolean-field-internal');
1495
+ const componentName$L = getComponentName('boolean-field-internal');
1495
1496
 
1496
1497
  const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
1497
1498
 
1498
- const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$K, baseSelector: 'div' });
1499
+ const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$L, baseSelector: 'div' });
1499
1500
 
1500
1501
  class BooleanInputInternal extends BaseInputClass$7 {
1501
1502
  static get observedAttributes() {
@@ -1571,14 +1572,14 @@ const booleanFieldMixin = (superclass) =>
1571
1572
 
1572
1573
  const template = document.createElement('template');
1573
1574
  template.innerHTML = `
1574
- <${componentName$K}
1575
+ <${componentName$L}
1575
1576
  tabindex="-1"
1576
1577
  slot="input"
1577
- ></${componentName$K}>
1578
+ ></${componentName$L}>
1578
1579
  `;
1579
1580
 
1580
1581
  this.baseElement.appendChild(template.content.cloneNode(true));
1581
- this.inputElement = this.shadowRoot.querySelector(componentName$K);
1582
+ this.inputElement = this.shadowRoot.querySelector(componentName$L);
1582
1583
  this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
1583
1584
 
1584
1585
  forwardAttrs(this, this.inputElement, {
@@ -1777,10 +1778,10 @@ descope-boolean-field-internal {
1777
1778
  }
1778
1779
  `;
1779
1780
 
1780
- const componentName$J = getComponentName('checkbox');
1781
+ const componentName$K = getComponentName('checkbox');
1781
1782
 
1782
1783
  const {
1783
- host: host$h,
1784
+ host: host$i,
1784
1785
  component: component$1,
1785
1786
  checkboxElement,
1786
1787
  checkboxSurface,
@@ -1802,10 +1803,10 @@ const {
1802
1803
  const CheckboxClass = compose(
1803
1804
  createStyleMixin({
1804
1805
  mappings: {
1805
- hostWidth: { ...host$h, property: 'width' },
1806
- hostDirection: { ...host$h, property: 'direction' },
1806
+ hostWidth: { ...host$i, property: 'width' },
1807
+ hostDirection: { ...host$i, property: 'direction' },
1807
1808
 
1808
- fontSize: [host$h, checkboxElement, checkboxLabel$1],
1809
+ fontSize: [host$i, checkboxElement, checkboxLabel$1],
1809
1810
  fontFamily: [checkboxLabel$1, helperText$a, errorMessage$c],
1810
1811
 
1811
1812
  labelTextColor: { ...checkboxLabel$1, property: 'color' },
@@ -1883,18 +1884,18 @@ const CheckboxClass = compose(
1883
1884
  }
1884
1885
  `,
1885
1886
  excludeAttrsSync: ['label', 'tabindex'],
1886
- componentName: componentName$J,
1887
+ componentName: componentName$K,
1887
1888
  })
1888
1889
  );
1889
1890
 
1890
- customElements.define(componentName$K, BooleanInputInternal);
1891
+ customElements.define(componentName$L, BooleanInputInternal);
1891
1892
 
1892
- customElements.define(componentName$J, CheckboxClass);
1893
+ customElements.define(componentName$K, CheckboxClass);
1893
1894
 
1894
- const componentName$I = getComponentName('switch-toggle');
1895
+ const componentName$J = getComponentName('switch-toggle');
1895
1896
 
1896
1897
  const {
1897
- host: host$g,
1898
+ host: host$h,
1898
1899
  component,
1899
1900
  checkboxElement: track,
1900
1901
  checkboxSurface: knob,
@@ -1916,8 +1917,8 @@ const {
1916
1917
  const SwitchToggleClass = compose(
1917
1918
  createStyleMixin({
1918
1919
  mappings: {
1919
- hostWidth: { ...host$g, property: 'width' },
1920
- hostDirection: { ...host$g, property: 'direction' },
1920
+ hostWidth: { ...host$h, property: 'width' },
1921
+ hostDirection: { ...host$h, property: 'direction' },
1921
1922
 
1922
1923
  fontSize: [component, checkboxLabel, checkboxLabel],
1923
1924
  fontFamily: [checkboxLabel, helperText$9, errorMessage$b],
@@ -2023,17 +2024,17 @@ const SwitchToggleClass = compose(
2023
2024
  }
2024
2025
  `,
2025
2026
  excludeAttrsSync: ['label', 'tabindex'],
2026
- componentName: componentName$I,
2027
+ componentName: componentName$J,
2027
2028
  })
2028
2029
  );
2029
2030
 
2030
- customElements.define(componentName$I, SwitchToggleClass);
2031
+ customElements.define(componentName$J, SwitchToggleClass);
2031
2032
 
2032
- const componentName$H = getComponentName('loader-linear');
2033
+ const componentName$I = getComponentName('loader-linear');
2033
2034
 
2034
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$H, baseSelector: ':host > div' }) {
2035
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$I, baseSelector: ':host > div' }) {
2035
2036
  static get componentName() {
2036
- return componentName$H;
2037
+ return componentName$I;
2037
2038
  }
2038
2039
 
2039
2040
  constructor() {
@@ -2069,18 +2070,18 @@ const selectors$2 = {
2069
2070
  host: { selector: () => ':host' },
2070
2071
  };
2071
2072
 
2072
- const { after: after$1, host: host$f } = selectors$2;
2073
+ const { after: after$1, host: host$g } = selectors$2;
2073
2074
 
2074
2075
  const LoaderLinearClass = compose(
2075
2076
  createStyleMixin({
2076
2077
  mappings: {
2077
2078
  hostDisplay: {},
2078
- hostWidth: { ...host$f, property: 'width' },
2079
+ hostWidth: { ...host$g, property: 'width' },
2079
2080
  barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
2080
2081
  barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
2081
2082
  verticalPadding: [
2082
- { ...host$f, property: 'padding-top' },
2083
- { ...host$f, property: 'padding-bottom' },
2083
+ { ...host$g, property: 'padding-top' },
2084
+ { ...host$g, property: 'padding-bottom' },
2084
2085
  ],
2085
2086
  barBackgroundColor: { property: 'background-color' },
2086
2087
  barColor: { ...after$1, property: 'background-color' },
@@ -2094,11 +2095,11 @@ const LoaderLinearClass = compose(
2094
2095
  componentNameValidationMixin
2095
2096
  )(RawLoaderLinear);
2096
2097
 
2097
- customElements.define(componentName$H, LoaderLinearClass);
2098
+ customElements.define(componentName$I, LoaderLinearClass);
2098
2099
 
2099
- const componentName$G = getComponentName('loader-radial');
2100
+ const componentName$H = getComponentName('loader-radial');
2100
2101
 
2101
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$G, baseSelector: ':host > div' }) {
2102
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$H, baseSelector: ':host > div' }) {
2102
2103
  constructor() {
2103
2104
  super();
2104
2105
 
@@ -2142,11 +2143,11 @@ const LoaderRadialClass = compose(
2142
2143
  componentNameValidationMixin
2143
2144
  )(RawLoaderRadial);
2144
2145
 
2145
- customElements.define(componentName$G, LoaderRadialClass);
2146
+ customElements.define(componentName$H, LoaderRadialClass);
2146
2147
 
2147
- const componentName$F = getComponentName('container');
2148
+ const componentName$G = getComponentName('container');
2148
2149
 
2149
- class RawContainer extends createBaseClass({ componentName: componentName$F, baseSelector: 'slot' }) {
2150
+ class RawContainer extends createBaseClass({ componentName: componentName$G, baseSelector: 'slot' }) {
2150
2151
  constructor() {
2151
2152
  super();
2152
2153
 
@@ -2199,13 +2200,13 @@ const ContainerClass = compose(
2199
2200
  componentNameValidationMixin
2200
2201
  )(RawContainer);
2201
2202
 
2202
- customElements.define(componentName$F, ContainerClass);
2203
+ customElements.define(componentName$G, ContainerClass);
2203
2204
 
2204
2205
  // eslint-disable-next-line max-classes-per-file
2205
2206
 
2206
- const componentName$E = getComponentName('text');
2207
+ const componentName$F = getComponentName('text');
2207
2208
 
2208
- class RawText extends createBaseClass({ componentName: componentName$E, baseSelector: ':host > slot' }) {
2209
+ class RawText extends createBaseClass({ componentName: componentName$F, baseSelector: ':host > slot' }) {
2209
2210
  constructor() {
2210
2211
  super();
2211
2212
 
@@ -2265,8 +2266,8 @@ const TextClass = compose(
2265
2266
  customTextMixin
2266
2267
  )(RawText);
2267
2268
 
2268
- const componentName$D = getComponentName('divider');
2269
- class RawDivider extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
2269
+ const componentName$E = getComponentName('divider');
2270
+ class RawDivider extends createBaseClass({ componentName: componentName$E, baseSelector: ':host > div' }) {
2270
2271
  constructor() {
2271
2272
  super();
2272
2273
 
@@ -2312,7 +2313,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$D, baseS
2312
2313
  }
2313
2314
 
2314
2315
  const textVars$3 = TextClass.cssVarList;
2315
- const { host: host$e, before, after, text: text$3 } = {
2316
+ const { host: host$f, before, after, text: text$3 } = {
2316
2317
  host: { selector: () => ':host' },
2317
2318
  before: { selector: '::before' },
2318
2319
  after: { selector: '::after' },
@@ -2322,8 +2323,8 @@ const { host: host$e, before, after, text: text$3 } = {
2322
2323
  const DividerClass = compose(
2323
2324
  createStyleMixin({
2324
2325
  mappings: {
2325
- hostWidth: { ...host$e, property: 'width' },
2326
- hostPadding: { ...host$e, property: 'padding' },
2326
+ hostWidth: { ...host$f, property: 'width' },
2327
+ hostPadding: { ...host$f, property: 'padding' },
2327
2328
  hostDirection: { ...text$3, property: 'direction' },
2328
2329
 
2329
2330
  minHeight: {},
@@ -2365,12 +2366,12 @@ const DividerClass = compose(
2365
2366
  componentNameValidationMixin
2366
2367
  )(RawDivider);
2367
2368
 
2368
- customElements.define(componentName$E, TextClass);
2369
+ customElements.define(componentName$F, TextClass);
2369
2370
 
2370
- customElements.define(componentName$D, DividerClass);
2371
+ customElements.define(componentName$E, DividerClass);
2371
2372
 
2372
2373
  const {
2373
- host: host$d,
2374
+ host: host$e,
2374
2375
  label: label$9,
2375
2376
  placeholder: placeholder$3,
2376
2377
  requiredIndicator: requiredIndicator$9,
@@ -2395,12 +2396,12 @@ const {
2395
2396
 
2396
2397
  var textFieldMappings = {
2397
2398
  // we apply font-size also on the host so we can set its width with em
2398
- fontSize: [{}, host$d],
2399
+ fontSize: [{}, host$e],
2399
2400
  fontFamily: [label$9, inputField$6, helperText$8, errorMessage$a],
2400
2401
 
2401
- hostWidth: { ...host$d, property: 'width' },
2402
- hostMinWidth: { ...host$d, property: 'min-width' },
2403
- hostDirection: { ...host$d, property: 'direction' },
2402
+ hostWidth: { ...host$e, property: 'width' },
2403
+ hostMinWidth: { ...host$e, property: 'min-width' },
2404
+ hostDirection: { ...host$e, property: 'direction' },
2404
2405
 
2405
2406
  inputBackgroundColor: { ...inputField$6, property: 'background-color' },
2406
2407
 
@@ -2445,7 +2446,7 @@ var textFieldMappings = {
2445
2446
  ],
2446
2447
  };
2447
2448
 
2448
- const componentName$C = getComponentName('email-field');
2449
+ const componentName$D = getComponentName('email-field');
2449
2450
 
2450
2451
  const customMixin$7 = (superclass) =>
2451
2452
  class EmailFieldMixinClass extends superclass {
@@ -2480,15 +2481,15 @@ const EmailFieldClass = compose(
2480
2481
  ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
2481
2482
  `,
2482
2483
  excludeAttrsSync: ['tabindex'],
2483
- componentName: componentName$C,
2484
+ componentName: componentName$D,
2484
2485
  })
2485
2486
  );
2486
2487
 
2487
- customElements.define(componentName$C, EmailFieldClass);
2488
+ customElements.define(componentName$D, EmailFieldClass);
2488
2489
 
2489
- const componentName$B = getComponentName('link');
2490
+ const componentName$C = getComponentName('link');
2490
2491
 
2491
- class RawLink extends createBaseClass({ componentName: componentName$B, baseSelector: ':host a' }) {
2492
+ class RawLink extends createBaseClass({ componentName: componentName$C, baseSelector: ':host a' }) {
2492
2493
  constructor() {
2493
2494
  super();
2494
2495
 
@@ -2534,12 +2535,12 @@ const selectors$1 = {
2534
2535
  text: { selector: () => TextClass.componentName },
2535
2536
  };
2536
2537
 
2537
- const { anchor, text: text$2, host: host$c, wrapper: wrapper$1 } = selectors$1;
2538
+ const { anchor, text: text$2, host: host$d, wrapper: wrapper$1 } = selectors$1;
2538
2539
 
2539
2540
  const LinkClass = compose(
2540
2541
  createStyleMixin({
2541
2542
  mappings: {
2542
- hostWidth: { ...host$c, property: 'width' },
2543
+ hostWidth: { ...host$d, property: 'width' },
2543
2544
  hostDirection: { ...text$2, property: 'direction' },
2544
2545
  textAlign: wrapper$1,
2545
2546
  textColor: [
@@ -2553,7 +2554,7 @@ const LinkClass = compose(
2553
2554
  componentNameValidationMixin
2554
2555
  )(RawLink);
2555
2556
 
2556
- customElements.define(componentName$B, LinkClass);
2557
+ customElements.define(componentName$C, LinkClass);
2557
2558
 
2558
2559
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
2559
2560
  let style;
@@ -2605,37 +2606,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
2605
2606
  return CssVarImageClass;
2606
2607
  };
2607
2608
 
2608
- const componentName$A = getComponentName('logo');
2609
+ const componentName$B = getComponentName('logo');
2609
2610
 
2610
2611
  const LogoClass = createCssVarImageClass({
2611
- componentName: componentName$A,
2612
+ componentName: componentName$B,
2612
2613
  varName: 'url',
2613
2614
  fallbackVarName: 'fallbackUrl',
2614
2615
  });
2615
2616
 
2616
- customElements.define(componentName$A, LogoClass);
2617
+ customElements.define(componentName$B, LogoClass);
2617
2618
 
2618
- const componentName$z = getComponentName('totp-image');
2619
+ const componentName$A = getComponentName('totp-image');
2619
2620
 
2620
2621
  const TotpImageClass = createCssVarImageClass({
2621
- componentName: componentName$z,
2622
+ componentName: componentName$A,
2622
2623
  varName: 'url',
2623
2624
  fallbackVarName: 'fallbackUrl',
2624
2625
  });
2625
2626
 
2626
- customElements.define(componentName$z, TotpImageClass);
2627
+ customElements.define(componentName$A, TotpImageClass);
2627
2628
 
2628
- const componentName$y = getComponentName('notp-image');
2629
+ const componentName$z = getComponentName('notp-image');
2629
2630
 
2630
2631
  const NotpImageClass = createCssVarImageClass({
2631
- componentName: componentName$y,
2632
+ componentName: componentName$z,
2632
2633
  varName: 'url',
2633
2634
  fallbackVarName: 'fallbackUrl',
2634
2635
  });
2635
2636
 
2636
- customElements.define(componentName$y, NotpImageClass);
2637
+ customElements.define(componentName$z, NotpImageClass);
2637
2638
 
2638
- const componentName$x = getComponentName('number-field');
2639
+ const componentName$y = getComponentName('number-field');
2639
2640
 
2640
2641
  const NumberFieldClass = compose(
2641
2642
  createStyleMixin({
@@ -2661,11 +2662,11 @@ const NumberFieldClass = compose(
2661
2662
  ${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
2662
2663
  `,
2663
2664
  excludeAttrsSync: ['tabindex'],
2664
- componentName: componentName$x,
2665
+ componentName: componentName$y,
2665
2666
  })
2666
2667
  );
2667
2668
 
2668
- customElements.define(componentName$x, NumberFieldClass);
2669
+ customElements.define(componentName$y, NumberFieldClass);
2669
2670
 
2670
2671
  const focusElement = (ele) => {
2671
2672
  ele?.focus();
@@ -2683,13 +2684,13 @@ const getSanitizedCharacters = (str) => {
2683
2684
 
2684
2685
  /* eslint-disable no-param-reassign */
2685
2686
 
2686
- const componentName$w = getComponentName('passcode-internal');
2687
+ const componentName$x = getComponentName('passcode-internal');
2687
2688
 
2688
2689
  const observedAttributes$5 = ['digits', 'loading'];
2689
2690
 
2690
2691
  const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
2691
2692
 
2692
- const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$w, baseSelector: 'div' });
2693
+ const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$x, baseSelector: 'div' });
2693
2694
 
2694
2695
  class PasscodeInternal extends BaseInputClass$6 {
2695
2696
  static get observedAttributes() {
@@ -2915,7 +2916,7 @@ class PasscodeInternal extends BaseInputClass$6 {
2915
2916
  }
2916
2917
  }
2917
2918
 
2918
- const componentName$v = getComponentName('text-field');
2919
+ const componentName$w = getComponentName('text-field');
2919
2920
 
2920
2921
  const observedAttrs = ['type'];
2921
2922
 
@@ -2965,11 +2966,11 @@ const TextFieldClass = compose(
2965
2966
  ${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
2966
2967
  `,
2967
2968
  excludeAttrsSync: ['tabindex'],
2968
- componentName: componentName$v,
2969
+ componentName: componentName$w,
2969
2970
  })
2970
2971
  );
2971
2972
 
2972
- const componentName$u = getComponentName('passcode');
2973
+ const componentName$v = getComponentName('passcode');
2973
2974
 
2974
2975
  const observedAttributes$4 = ['digits'];
2975
2976
 
@@ -2988,17 +2989,17 @@ const customMixin$5 = (superclass) =>
2988
2989
  const template = document.createElement('template');
2989
2990
 
2990
2991
  template.innerHTML = `
2991
- <${componentName$w}
2992
+ <${componentName$x}
2992
2993
  bordered="true"
2993
2994
  name="code"
2994
2995
  tabindex="-1"
2995
2996
  slot="input"
2996
- ><slot></slot></${componentName$w}>
2997
+ ><slot></slot></${componentName$x}>
2997
2998
  `;
2998
2999
 
2999
3000
  this.baseElement.appendChild(template.content.cloneNode(true));
3000
3001
 
3001
- this.inputElement = this.shadowRoot.querySelector(componentName$w);
3002
+ this.inputElement = this.shadowRoot.querySelector(componentName$x);
3002
3003
 
3003
3004
  forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
3004
3005
  }
@@ -3013,7 +3014,7 @@ const customMixin$5 = (superclass) =>
3013
3014
  };
3014
3015
 
3015
3016
  const {
3016
- host: host$b,
3017
+ host: host$c,
3017
3018
  digitField,
3018
3019
  label: label$8,
3019
3020
  requiredIndicator: requiredIndicator$8,
@@ -3036,10 +3037,10 @@ const loaderVars = LoaderRadialClass.cssVarList;
3036
3037
  const PasscodeClass = compose(
3037
3038
  createStyleMixin({
3038
3039
  mappings: {
3039
- fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$b],
3040
+ fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$c],
3040
3041
  hostWidth: { property: 'width' },
3041
- hostDirection: { ...host$b, property: 'direction' },
3042
- fontFamily: [host$b, { ...label$8 }],
3042
+ hostDirection: { ...host$c, property: 'direction' },
3043
+ fontFamily: [host$c, { ...label$8 }],
3043
3044
  labelTextColor: [
3044
3045
  { ...label$8, property: 'color' },
3045
3046
  { ...requiredIndicator$8, property: 'color' },
@@ -3145,15 +3146,15 @@ const PasscodeClass = compose(
3145
3146
  ${resetInputCursor('vaadin-text-field')}
3146
3147
  `,
3147
3148
  excludeAttrsSync: ['tabindex'],
3148
- componentName: componentName$u,
3149
+ componentName: componentName$v,
3149
3150
  })
3150
3151
  );
3151
3152
 
3152
- customElements.define(componentName$v, TextFieldClass);
3153
+ customElements.define(componentName$w, TextFieldClass);
3153
3154
 
3154
- customElements.define(componentName$w, PasscodeInternal);
3155
+ customElements.define(componentName$x, PasscodeInternal);
3155
3156
 
3156
- customElements.define(componentName$u, PasscodeClass);
3157
+ customElements.define(componentName$v, PasscodeClass);
3157
3158
 
3158
3159
  const passwordDraggableMixin = (superclass) =>
3159
3160
  class PasswordDraggableMixinClass extends superclass {
@@ -3189,10 +3190,10 @@ const passwordDraggableMixin = (superclass) =>
3189
3190
  }
3190
3191
  };
3191
3192
 
3192
- const componentName$t = getComponentName('password');
3193
+ const componentName$u = getComponentName('password');
3193
3194
 
3194
3195
  const {
3195
- host: host$a,
3196
+ host: host$b,
3196
3197
  inputField: inputField$5,
3197
3198
  inputElement: inputElement$2,
3198
3199
  inputElementPlaceholder,
@@ -3218,10 +3219,10 @@ const {
3218
3219
  const PasswordClass = compose(
3219
3220
  createStyleMixin({
3220
3221
  mappings: {
3221
- hostWidth: { ...host$a, property: 'width' },
3222
- hostMinWidth: { ...host$a, property: 'min-width' },
3223
- hostDirection: { ...host$a, property: 'direction' },
3224
- fontSize: [{}, host$a],
3222
+ hostWidth: { ...host$b, property: 'width' },
3223
+ hostMinWidth: { ...host$b, property: 'min-width' },
3224
+ hostDirection: { ...host$b, property: 'direction' },
3225
+ fontSize: [{}, host$b],
3225
3226
  fontFamily: [label$7, inputField$5, errorMessage$8, helperText$7],
3226
3227
  inputHeight: { ...inputField$5, property: 'height' },
3227
3228
  inputHorizontalPadding: [
@@ -3318,16 +3319,16 @@ const PasswordClass = compose(
3318
3319
  }
3319
3320
  `,
3320
3321
  excludeAttrsSync: ['tabindex'],
3321
- componentName: componentName$t,
3322
+ componentName: componentName$u,
3322
3323
  })
3323
3324
  );
3324
3325
 
3325
- customElements.define(componentName$t, PasswordClass);
3326
+ customElements.define(componentName$u, PasswordClass);
3326
3327
 
3327
- const componentName$s = getComponentName('text-area');
3328
+ const componentName$t = getComponentName('text-area');
3328
3329
 
3329
3330
  const {
3330
- host: host$9,
3331
+ host: host$a,
3331
3332
  label: label$6,
3332
3333
  placeholder: placeholder$2,
3333
3334
  inputField: inputField$4,
@@ -3349,10 +3350,10 @@ const {
3349
3350
  const TextAreaClass = compose(
3350
3351
  createStyleMixin({
3351
3352
  mappings: {
3352
- hostWidth: { ...host$9, property: 'width' },
3353
- hostMinWidth: { ...host$9, property: 'min-width' },
3354
- hostDirection: { ...host$9, property: 'direction' },
3355
- fontSize: [host$9, textArea$2],
3353
+ hostWidth: { ...host$a, property: 'width' },
3354
+ hostMinWidth: { ...host$a, property: 'min-width' },
3355
+ hostDirection: { ...host$a, property: 'direction' },
3356
+ fontSize: [host$a, textArea$2],
3356
3357
  fontFamily: [label$6, inputField$4, helperText$6, errorMessage$7],
3357
3358
  labelTextColor: [
3358
3359
  { ...label$6, property: 'color' },
@@ -3400,17 +3401,17 @@ const TextAreaClass = compose(
3400
3401
  ${resetInputCursor('vaadin-text-area')}
3401
3402
  `,
3402
3403
  excludeAttrsSync: ['tabindex'],
3403
- componentName: componentName$s,
3404
+ componentName: componentName$t,
3404
3405
  })
3405
3406
  );
3406
3407
 
3407
- customElements.define(componentName$s, TextAreaClass);
3408
+ customElements.define(componentName$t, TextAreaClass);
3408
3409
 
3409
3410
  const observedAttributes$3 = ['src', 'alt'];
3410
3411
 
3411
- const componentName$r = getComponentName('image');
3412
+ const componentName$s = getComponentName('image');
3412
3413
 
3413
- const BaseClass$1 = createBaseClass({ componentName: componentName$r, baseSelector: ':host > img' });
3414
+ const BaseClass$1 = createBaseClass({ componentName: componentName$s, baseSelector: ':host > img' });
3414
3415
  class RawImage extends BaseClass$1 {
3415
3416
  static get observedAttributes() {
3416
3417
  return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
@@ -3450,9 +3451,9 @@ const ImageClass = compose(
3450
3451
  draggableMixin
3451
3452
  )(RawImage);
3452
3453
 
3453
- customElements.define(componentName$r, ImageClass);
3454
+ customElements.define(componentName$s, ImageClass);
3454
3455
 
3455
- const componentName$q = getComponentName('combo-box');
3456
+ const componentName$r = getComponentName('combo-box');
3456
3457
 
3457
3458
  const ComboBoxMixin = (superclass) =>
3458
3459
  class ComboBoxMixinClass extends superclass {
@@ -3678,7 +3679,7 @@ const ComboBoxMixin = (superclass) =>
3678
3679
  };
3679
3680
 
3680
3681
  const {
3681
- host: host$8,
3682
+ host: host$9,
3682
3683
  inputField: inputField$3,
3683
3684
  inputElement: inputElement$1,
3684
3685
  placeholder: placeholder$1,
@@ -3704,10 +3705,10 @@ const {
3704
3705
  const ComboBoxClass = compose(
3705
3706
  createStyleMixin({
3706
3707
  mappings: {
3707
- hostWidth: { ...host$8, property: 'width' },
3708
- hostDirection: { ...host$8, property: 'direction' },
3708
+ hostWidth: { ...host$9, property: 'width' },
3709
+ hostDirection: { ...host$9, property: 'direction' },
3709
3710
  // we apply font-size also on the host so we can set its width with em
3710
- fontSize: [{}, host$8],
3711
+ fontSize: [{}, host$9],
3711
3712
  fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
3712
3713
  labelTextColor: [
3713
3714
  { ...label$5, property: 'color' },
@@ -3835,12 +3836,12 @@ const ComboBoxClass = compose(
3835
3836
  // and reset items to an empty array, and opening the list box with no items
3836
3837
  // to display.
3837
3838
  excludeAttrsSync: ['tabindex', 'size', 'data'],
3838
- componentName: componentName$q,
3839
+ componentName: componentName$r,
3839
3840
  includeForwardProps: ['items', 'renderer', 'selectedItem'],
3840
3841
  })
3841
3842
  );
3842
3843
 
3843
- customElements.define(componentName$q, ComboBoxClass);
3844
+ customElements.define(componentName$r, ComboBoxClass);
3844
3845
 
3845
3846
  var CountryCodes = [
3846
3847
  // United States should be the first option
@@ -5083,7 +5084,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
5083
5084
  </div>
5084
5085
  `;
5085
5086
 
5086
- const componentName$p = getComponentName('phone-field-internal');
5087
+ const componentName$q = getComponentName('phone-field-internal');
5087
5088
 
5088
5089
  const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
5089
5090
  const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -5095,7 +5096,7 @@ const mapAttrs$1 = {
5095
5096
 
5096
5097
  const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
5097
5098
 
5098
- const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
5099
+ const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$q, baseSelector: 'div' });
5099
5100
 
5100
5101
  let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$5 {
5101
5102
  static get observedAttributes() {
@@ -5267,12 +5268,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$5 {
5267
5268
  }
5268
5269
  };
5269
5270
 
5270
- customElements.define(componentName$p, PhoneFieldInternal$1);
5271
+ customElements.define(componentName$q, PhoneFieldInternal$1);
5271
5272
 
5272
5273
  const textVars$1 = TextFieldClass.cssVarList;
5273
5274
  const comboVars = ComboBoxClass.cssVarList;
5274
5275
 
5275
- const componentName$o = getComponentName('phone-field');
5276
+ const componentName$p = getComponentName('phone-field');
5276
5277
 
5277
5278
  const customMixin$4 = (superclass) =>
5278
5279
  class PhoneFieldMixinClass extends superclass {
@@ -5286,15 +5287,15 @@ const customMixin$4 = (superclass) =>
5286
5287
  const template = document.createElement('template');
5287
5288
 
5288
5289
  template.innerHTML = `
5289
- <${componentName$p}
5290
+ <${componentName$q}
5290
5291
  tabindex="-1"
5291
5292
  slot="input"
5292
- ></${componentName$p}>
5293
+ ></${componentName$q}>
5293
5294
  `;
5294
5295
 
5295
5296
  this.baseElement.appendChild(template.content.cloneNode(true));
5296
5297
 
5297
- this.inputElement = this.shadowRoot.querySelector(componentName$p);
5298
+ this.inputElement = this.shadowRoot.querySelector(componentName$q);
5298
5299
 
5299
5300
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
5300
5301
  includeAttrs: [
@@ -5314,7 +5315,7 @@ const customMixin$4 = (superclass) =>
5314
5315
  };
5315
5316
 
5316
5317
  const {
5317
- host: host$7,
5318
+ host: host$8,
5318
5319
  label: label$4,
5319
5320
  requiredIndicator: requiredIndicator$4,
5320
5321
  inputField: inputField$2,
@@ -5339,7 +5340,7 @@ const PhoneFieldClass = compose(
5339
5340
  createStyleMixin({
5340
5341
  mappings: {
5341
5342
  fontSize: [
5342
- host$7,
5343
+ host$8,
5343
5344
  inputField$2,
5344
5345
  {
5345
5346
  selector: TextFieldClass.componentName,
@@ -5360,11 +5361,11 @@ const PhoneFieldClass = compose(
5360
5361
  },
5361
5362
  ],
5362
5363
  hostWidth: [
5363
- { ...host$7, property: 'width' },
5364
+ { ...host$8, property: 'width' },
5364
5365
  { ...phoneInput$1, property: 'width' },
5365
5366
  { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
5366
5367
  ],
5367
- hostDirection: { ...host$7, property: 'direction' },
5368
+ hostDirection: { ...host$8, property: 'direction' },
5368
5369
 
5369
5370
  inputBorderStyle: [
5370
5371
  { ...inputField$2, property: 'border-style' },
@@ -5490,17 +5491,17 @@ const PhoneFieldClass = compose(
5490
5491
  ${resetInputLabelPosition('vaadin-text-field')}
5491
5492
  `,
5492
5493
  excludeAttrsSync: ['tabindex'],
5493
- componentName: componentName$o,
5494
+ componentName: componentName$p,
5494
5495
  })
5495
5496
  );
5496
5497
 
5497
- customElements.define(componentName$o, PhoneFieldClass);
5498
+ customElements.define(componentName$p, PhoneFieldClass);
5498
5499
 
5499
5500
  const getCountryByCodeId = (countryCode) => {
5500
5501
  return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
5501
5502
  };
5502
5503
 
5503
- const componentName$n = getComponentName('phone-field-internal-input-box');
5504
+ const componentName$o = getComponentName('phone-field-internal-input-box');
5504
5505
 
5505
5506
  const observedAttributes$2 = [
5506
5507
  'disabled',
@@ -5514,7 +5515,7 @@ const mapAttrs = {
5514
5515
  'phone-input-placeholder': 'placeholder',
5515
5516
  };
5516
5517
 
5517
- const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
5518
+ const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$o, baseSelector: 'div' });
5518
5519
 
5519
5520
  class PhoneFieldInternal extends BaseInputClass$4 {
5520
5521
  static get observedAttributes() {
@@ -5653,11 +5654,11 @@ class PhoneFieldInternal extends BaseInputClass$4 {
5653
5654
  }
5654
5655
  }
5655
5656
 
5656
- customElements.define(componentName$n, PhoneFieldInternal);
5657
+ customElements.define(componentName$o, PhoneFieldInternal);
5657
5658
 
5658
5659
  const textVars = TextFieldClass.cssVarList;
5659
5660
 
5660
- const componentName$m = getComponentName('phone-input-box-field');
5661
+ const componentName$n = getComponentName('phone-input-box-field');
5661
5662
 
5662
5663
  const customMixin$3 = (superclass) =>
5663
5664
  class PhoneInputBoxFieldMixinClass extends superclass {
@@ -5671,15 +5672,15 @@ const customMixin$3 = (superclass) =>
5671
5672
  const template = document.createElement('template');
5672
5673
 
5673
5674
  template.innerHTML = `
5674
- <${componentName$n}
5675
+ <${componentName$o}
5675
5676
  tabindex="-1"
5676
5677
  slot="input"
5677
- ></${componentName$n}>
5678
+ ></${componentName$o}>
5678
5679
  `;
5679
5680
 
5680
5681
  this.baseElement.appendChild(template.content.cloneNode(true));
5681
5682
 
5682
- this.inputElement = this.shadowRoot.querySelector(componentName$n);
5683
+ this.inputElement = this.shadowRoot.querySelector(componentName$o);
5683
5684
 
5684
5685
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
5685
5686
  includeAttrs: [
@@ -5696,7 +5697,7 @@ const customMixin$3 = (superclass) =>
5696
5697
  }
5697
5698
  };
5698
5699
 
5699
- const { host: host$6, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
5700
+ const { host: host$7, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
5700
5701
  host: { selector: () => ':host' },
5701
5702
  label: { selector: '::part(label)' },
5702
5703
  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -5710,7 +5711,7 @@ const PhoneFieldInputBoxClass = compose(
5710
5711
  createStyleMixin({
5711
5712
  mappings: {
5712
5713
  fontSize: [
5713
- host$6,
5714
+ host$7,
5714
5715
  inputField$1,
5715
5716
  {
5716
5717
  selector: TextFieldClass.componentName,
@@ -5718,9 +5719,9 @@ const PhoneFieldInputBoxClass = compose(
5718
5719
  },
5719
5720
  ],
5720
5721
  fontFamily: [label$3, errorMessage$4, helperText$3],
5721
- hostWidth: { ...host$6, property: 'width' },
5722
- hostMinWidth: { ...host$6, property: 'min-width' },
5723
- hostDirection: { ...host$6, property: 'direction' },
5722
+ hostWidth: { ...host$7, property: 'width' },
5723
+ hostMinWidth: { ...host$7, property: 'min-width' },
5724
+ hostDirection: { ...host$7, property: 'direction' },
5724
5725
 
5725
5726
  inputBorderStyle: { ...inputField$1, property: 'border-style' },
5726
5727
  inputBorderWidth: { ...inputField$1, property: 'border-width' },
@@ -5812,15 +5813,15 @@ const PhoneFieldInputBoxClass = compose(
5812
5813
  ${resetInputLabelPosition('vaadin-text-field')}
5813
5814
  `,
5814
5815
  excludeAttrsSync: ['tabindex'],
5815
- componentName: componentName$m,
5816
+ componentName: componentName$n,
5816
5817
  })
5817
5818
  );
5818
5819
 
5819
- customElements.define(componentName$m, PhoneFieldInputBoxClass);
5820
+ customElements.define(componentName$n, PhoneFieldInputBoxClass);
5820
5821
 
5821
- const componentName$l = getComponentName('new-password-internal');
5822
+ const componentName$m = getComponentName('new-password-internal');
5822
5823
 
5823
- const componentName$k = getComponentName('new-password');
5824
+ const componentName$l = getComponentName('new-password');
5824
5825
 
5825
5826
  const customMixin$2 = (superclass) =>
5826
5827
  class NewPasswordMixinClass extends superclass {
@@ -5830,16 +5831,16 @@ const customMixin$2 = (superclass) =>
5830
5831
  const template = document.createElement('template');
5831
5832
 
5832
5833
  template.innerHTML = `
5833
- <${componentName$l}
5834
+ <${componentName$m}
5834
5835
  name="new-password"
5835
5836
  tabindex="-1"
5836
5837
  slot="input"
5837
- ></${componentName$l}>
5838
+ ></${componentName$m}>
5838
5839
  `;
5839
5840
 
5840
5841
  this.baseElement.appendChild(template.content.cloneNode(true));
5841
5842
 
5842
- this.inputElement = this.shadowRoot.querySelector(componentName$l);
5843
+ this.inputElement = this.shadowRoot.querySelector(componentName$m);
5843
5844
 
5844
5845
  forwardAttrs(this, this.inputElement, {
5845
5846
  includeAttrs: [
@@ -5860,7 +5861,7 @@ const customMixin$2 = (superclass) =>
5860
5861
  }
5861
5862
  };
5862
5863
 
5863
- const { host: host$5, label: label$2, internalInputsWrapper, errorMessage: errorMessage$3, helperText: helperText$2, passwordInput } = {
5864
+ const { host: host$6, label: label$2, internalInputsWrapper, errorMessage: errorMessage$3, helperText: helperText$2, passwordInput } = {
5864
5865
  host: { selector: () => ':host' },
5865
5866
  label: { selector: '::part(label)' },
5866
5867
  internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
@@ -5873,7 +5874,7 @@ const NewPasswordClass = compose(
5873
5874
  createStyleMixin({
5874
5875
  mappings: {
5875
5876
  fontSize: [
5876
- host$5,
5877
+ host$6,
5877
5878
  {},
5878
5879
  {
5879
5880
  selector: PasswordClass.componentName,
@@ -5882,13 +5883,13 @@ const NewPasswordClass = compose(
5882
5883
  ],
5883
5884
  fontFamily: [label$2, errorMessage$3, helperText$2],
5884
5885
  errorMessageTextColor: { ...errorMessage$3, property: 'color' },
5885
- hostWidth: { ...host$5, property: 'width' },
5886
- hostMinWidth: { ...host$5, property: 'min-width' },
5886
+ hostWidth: { ...host$6, property: 'width' },
5887
+ hostMinWidth: { ...host$6, property: 'min-width' },
5887
5888
  hostDirection: [
5888
- { ...host$5, property: 'direction' },
5889
+ { ...host$6, property: 'direction' },
5889
5890
  { ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
5890
5891
  ],
5891
- inputsRequiredIndicator: { ...host$5, property: 'content' },
5892
+ inputsRequiredIndicator: { ...host$6, property: 'content' },
5892
5893
  spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
5893
5894
  },
5894
5895
  }),
@@ -5946,7 +5947,7 @@ const NewPasswordClass = compose(
5946
5947
  }
5947
5948
  `,
5948
5949
  excludeAttrsSync: ['tabindex'],
5949
- componentName: componentName$k,
5950
+ componentName: componentName$l,
5950
5951
  })
5951
5952
  );
5952
5953
 
@@ -5971,7 +5972,7 @@ const commonAttrs = [
5971
5972
 
5972
5973
  const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
5973
5974
 
5974
- const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$l, baseSelector: 'div' });
5975
+ const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$m, baseSelector: 'div' });
5975
5976
 
5976
5977
  class NewPasswordInternal extends BaseInputClass$3 {
5977
5978
  static get observedAttributes() {
@@ -6136,16 +6137,16 @@ class NewPasswordInternal extends BaseInputClass$3 {
6136
6137
  }
6137
6138
  }
6138
6139
 
6139
- customElements.define(componentName$l, NewPasswordInternal);
6140
+ customElements.define(componentName$m, NewPasswordInternal);
6140
6141
 
6141
- customElements.define(componentName$k, NewPasswordClass);
6142
+ customElements.define(componentName$l, NewPasswordClass);
6142
6143
 
6143
- const componentName$j = getComponentName('recaptcha');
6144
+ const componentName$k = getComponentName('recaptcha');
6144
6145
 
6145
6146
  const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
6146
6147
 
6147
6148
  const BaseClass = createBaseClass({
6148
- componentName: componentName$j,
6149
+ componentName: componentName$k,
6149
6150
  baseSelector: ':host > div',
6150
6151
  });
6151
6152
  class RawRecaptcha extends BaseClass {
@@ -6297,7 +6298,7 @@ class RawRecaptcha extends BaseClass {
6297
6298
 
6298
6299
  const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
6299
6300
 
6300
- customElements.define(componentName$j, RecaptchaClass);
6301
+ customElements.define(componentName$k, RecaptchaClass);
6301
6302
 
6302
6303
  const getFileBase64 = (fileObj) => {
6303
6304
  return new Promise((resolve) => {
@@ -6311,7 +6312,7 @@ const getFilename = (fileObj) => {
6311
6312
  return fileObj.name.replace(/^.*\\/, '');
6312
6313
  };
6313
6314
 
6314
- const componentName$i = getComponentName('upload-file');
6315
+ const componentName$j = getComponentName('upload-file');
6315
6316
 
6316
6317
  const observedAttributes = [
6317
6318
  'title',
@@ -6326,7 +6327,7 @@ const observedAttributes = [
6326
6327
  'icon',
6327
6328
  ];
6328
6329
 
6329
- const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$i, baseSelector: ':host > div' });
6330
+ const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$j, baseSelector: ':host > div' });
6330
6331
 
6331
6332
  class RawUploadFile extends BaseInputClass$2 {
6332
6333
  static get observedAttributes() {
@@ -6498,7 +6499,7 @@ class RawUploadFile extends BaseInputClass$2 {
6498
6499
  }
6499
6500
 
6500
6501
  const buttonVars = ButtonClass.cssVarList;
6501
- const { host: host$4, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
6502
+ const { host: host$5, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
6502
6503
  host: { selector: () => ':host' },
6503
6504
  wrapper: { selector: () => ':host > div' },
6504
6505
  icon: { selector: () => '::slotted(*)' },
@@ -6517,11 +6518,11 @@ const UploadFileClass = compose(
6517
6518
  borderWidth: {},
6518
6519
  borderStyle: {},
6519
6520
  borderRadius: {},
6520
- hostHeight: { ...host$4, property: 'height' },
6521
- hostWidth: { ...host$4, property: 'width' },
6521
+ hostHeight: { ...host$5, property: 'height' },
6522
+ hostWidth: { ...host$5, property: 'width' },
6522
6523
  hostPadding: { property: 'padding' },
6523
6524
  hostDirection: [
6524
- { ...host$4, property: 'direction' },
6525
+ { ...host$5, property: 'direction' },
6525
6526
  { selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
6526
6527
  ],
6527
6528
  gap: { ...wrapper },
@@ -6541,7 +6542,7 @@ const UploadFileClass = compose(
6541
6542
  componentNameValidationMixin
6542
6543
  )(RawUploadFile);
6543
6544
 
6544
- customElements.define(componentName$i, UploadFileClass);
6545
+ customElements.define(componentName$j, UploadFileClass);
6545
6546
 
6546
6547
  const createBaseButtonSelectionGroupInternalClass = (componentName) => {
6547
6548
  class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
@@ -6639,10 +6640,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
6639
6640
  return BaseButtonSelectionGroupInternalClass;
6640
6641
  };
6641
6642
 
6642
- const componentName$h = getComponentName('button-selection-group-internal');
6643
+ const componentName$i = getComponentName('button-selection-group-internal');
6643
6644
 
6644
6645
  class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
6645
- componentName$h
6646
+ componentName$i
6646
6647
  ) {
6647
6648
  getSelectedNode() {
6648
6649
  return this.items.find((item) => item.hasAttribute('selected'));
@@ -6798,7 +6799,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
6798
6799
  }
6799
6800
  };
6800
6801
 
6801
- const { host: host$3, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
6802
+ const { host: host$4, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
6802
6803
  host: { selector: () => ':host' },
6803
6804
  label: { selector: '::part(label)' },
6804
6805
  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -6807,9 +6808,9 @@ const { host: host$3, label: label$1, requiredIndicator: requiredIndicator$1, in
6807
6808
  };
6808
6809
 
6809
6810
  const buttonSelectionGroupMappings = {
6810
- hostWidth: { ...host$3, property: 'width' },
6811
- hostDirection: { ...host$3, property: 'direction' },
6812
- fontFamily: host$3,
6811
+ hostWidth: { ...host$4, property: 'width' },
6812
+ hostDirection: { ...host$4, property: 'direction' },
6813
+ fontFamily: host$4,
6813
6814
  labelTextColor: [
6814
6815
  { ...label$1, property: 'color' },
6815
6816
  { ...requiredIndicator$1, property: 'color' },
@@ -6874,7 +6875,7 @@ const buttonSelectionGroupStyles = `
6874
6875
  ${resetInputCursor('vaadin-text-field')}
6875
6876
  `;
6876
6877
 
6877
- const componentName$g = getComponentName('button-selection-group');
6878
+ const componentName$h = getComponentName('button-selection-group');
6878
6879
 
6879
6880
  const buttonSelectionGroupMixin = (superclass) =>
6880
6881
  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -6883,19 +6884,19 @@ const buttonSelectionGroupMixin = (superclass) =>
6883
6884
  const template = document.createElement('template');
6884
6885
 
6885
6886
  template.innerHTML = `
6886
- <${componentName$h}
6887
+ <${componentName$i}
6887
6888
  name="button-selection-group"
6888
6889
  slot="input"
6889
6890
  tabindex="-1"
6890
6891
  part="internal-component"
6891
6892
  >
6892
6893
  <slot></slot>
6893
- </${componentName$h}>
6894
+ </${componentName$i}>
6894
6895
  `;
6895
6896
 
6896
6897
  this.baseElement.appendChild(template.content.cloneNode(true));
6897
6898
 
6898
- this.inputElement = this.shadowRoot.querySelector(componentName$h);
6899
+ this.inputElement = this.shadowRoot.querySelector(componentName$i);
6899
6900
 
6900
6901
  forwardAttrs(this, this.inputElement, {
6901
6902
  includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -6920,16 +6921,16 @@ const ButtonSelectionGroupClass = compose(
6920
6921
  wrappedEleName: 'vaadin-text-field',
6921
6922
  style: () => buttonSelectionGroupStyles,
6922
6923
  excludeAttrsSync: ['tabindex'],
6923
- componentName: componentName$g,
6924
+ componentName: componentName$h,
6924
6925
  })
6925
6926
  );
6926
6927
 
6927
- customElements.define(componentName$h, ButtonSelectionGroupInternalClass);
6928
+ customElements.define(componentName$i, ButtonSelectionGroupInternalClass);
6928
6929
 
6929
- const componentName$f = getComponentName('button-selection-group-item');
6930
+ const componentName$g = getComponentName('button-selection-group-item');
6930
6931
 
6931
6932
  class RawSelectItem extends createBaseClass({
6932
- componentName: componentName$f,
6933
+ componentName: componentName$g,
6933
6934
  baseSelector: ':host > descope-button',
6934
6935
  }) {
6935
6936
  get size() {
@@ -7032,14 +7033,14 @@ const ButtonSelectionGroupItemClass = compose(
7032
7033
  componentNameValidationMixin
7033
7034
  )(RawSelectItem);
7034
7035
 
7035
- customElements.define(componentName$f, ButtonSelectionGroupItemClass);
7036
+ customElements.define(componentName$g, ButtonSelectionGroupItemClass);
7036
7037
 
7037
- customElements.define(componentName$g, ButtonSelectionGroupClass);
7038
+ customElements.define(componentName$h, ButtonSelectionGroupClass);
7038
7039
 
7039
- const componentName$e = getComponentName('button-multi-selection-group-internal');
7040
+ const componentName$f = getComponentName('button-multi-selection-group-internal');
7040
7041
 
7041
7042
  class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
7042
- componentName$e
7043
+ componentName$f
7043
7044
  ) {
7044
7045
  #getSelectedNodes() {
7045
7046
  return this.items.filter((item) => item.hasAttribute('selected'));
@@ -7142,7 +7143,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
7142
7143
  }
7143
7144
  }
7144
7145
 
7145
- const componentName$d = getComponentName('button-multi-selection-group');
7146
+ const componentName$e = getComponentName('button-multi-selection-group');
7146
7147
 
7147
7148
  const buttonMultiSelectionGroupMixin = (superclass) =>
7148
7149
  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -7151,19 +7152,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
7151
7152
  const template = document.createElement('template');
7152
7153
 
7153
7154
  template.innerHTML = `
7154
- <${componentName$e}
7155
+ <${componentName$f}
7155
7156
  name="button-selection-group"
7156
7157
  slot="input"
7157
7158
  tabindex="-1"
7158
7159
  part="internal-component"
7159
7160
  >
7160
7161
  <slot></slot>
7161
- </${componentName$e}>
7162
+ </${componentName$f}>
7162
7163
  `;
7163
7164
 
7164
7165
  this.baseElement.appendChild(template.content.cloneNode(true));
7165
7166
 
7166
- this.inputElement = this.shadowRoot.querySelector(componentName$e);
7167
+ this.inputElement = this.shadowRoot.querySelector(componentName$f);
7167
7168
 
7168
7169
  forwardAttrs(this, this.inputElement, {
7169
7170
  includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -7188,13 +7189,13 @@ const ButtonMultiSelectionGroupClass = compose(
7188
7189
  wrappedEleName: 'vaadin-text-field',
7189
7190
  style: () => buttonSelectionGroupStyles,
7190
7191
  excludeAttrsSync: ['tabindex'],
7191
- componentName: componentName$d,
7192
+ componentName: componentName$e,
7192
7193
  })
7193
7194
  );
7194
7195
 
7195
- customElements.define(componentName$e, ButtonMultiSelectionGroupInternalClass);
7196
+ customElements.define(componentName$f, ButtonMultiSelectionGroupInternalClass);
7196
7197
 
7197
- customElements.define(componentName$d, ButtonMultiSelectionGroupClass);
7198
+ customElements.define(componentName$e, ButtonMultiSelectionGroupClass);
7198
7199
 
7199
7200
  /* eslint-disable no-param-reassign */
7200
7201
 
@@ -7204,12 +7205,11 @@ class GridTextColumnClass extends GridSortColumn {
7204
7205
  }
7205
7206
 
7206
7207
  _defaultRenderer(cell, _col, model) {
7207
- const content = model.item[this.path] || '';
7208
- cell.innerHTML = content;
7208
+ const data = model.item[this.path] || '';
7209
+ const content = Array.isArray(data) ? data.join(', ') : data;
7210
+
7211
+ this.__setTextContent(cell, content);
7209
7212
  cell.title = content;
7210
- if (Array.isArray(content)) {
7211
- cell.innerHTML = content.join(', ');
7212
- }
7213
7213
  }
7214
7214
 
7215
7215
  _defaultHeaderRenderer(root, _column) {
@@ -7219,14 +7219,13 @@ class GridTextColumnClass extends GridSortColumn {
7219
7219
  return;
7220
7220
  }
7221
7221
 
7222
- // eslint-disable-next-line no-param-reassign
7223
- root.innerHTML = this.__getHeader(this.header, this.path);
7222
+ this.__setTextContent(root, this.__getHeader(this.header, this.path));
7224
7223
  }
7225
7224
  }
7226
7225
 
7227
- const componentName$c = getComponentName('grid-text-column');
7226
+ const componentName$d = getComponentName('grid-text-column');
7228
7227
 
7229
- customElements.define(componentName$c, GridTextColumnClass);
7228
+ customElements.define(componentName$d, GridTextColumnClass);
7230
7229
 
7231
7230
  /* eslint-disable no-param-reassign */
7232
7231
 
@@ -7247,13 +7246,13 @@ class GridCustomColumnClass extends GridTextColumnClass {
7247
7246
  });
7248
7247
 
7249
7248
  if (!contentEle) {
7250
- cell.innerHTML = model.item[this.path] || '';
7249
+ this.__setTextContent(cell, model.item[this.path] || '');
7251
7250
 
7252
7251
  return;
7253
7252
  }
7254
7253
 
7255
7254
  const newEle = contentEle.cloneNode(true);
7256
- newEle.innerHTML = content || '';
7255
+ newEle.textContent = content || '';
7257
7256
  cell.innerHTML = '';
7258
7257
  cell.append(newEle);
7259
7258
  }
@@ -7261,9 +7260,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
7261
7260
 
7262
7261
  /* eslint-disable no-param-reassign */
7263
7262
 
7264
- const componentName$b = getComponentName('grid-custom-column');
7263
+ const componentName$c = getComponentName('grid-custom-column');
7265
7264
 
7266
- customElements.define(componentName$b, GridCustomColumnClass);
7265
+ customElements.define(componentName$c, GridCustomColumnClass);
7267
7266
 
7268
7267
  const createCheckboxEle = () => {
7269
7268
  const checkbox = document.createElement('descope-checkbox');
@@ -7322,9 +7321,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
7322
7321
  }
7323
7322
  }
7324
7323
 
7325
- const componentName$a = getComponentName('grid-selection-column');
7324
+ const componentName$b = getComponentName('grid-selection-column');
7326
7325
 
7327
- customElements.define(componentName$a, GridSelectionColumnClass);
7326
+ customElements.define(componentName$b, GridSelectionColumnClass);
7328
7327
 
7329
7328
  const isValidDataType = (data) => {
7330
7329
  const isValid = Array.isArray(data);
@@ -7336,7 +7335,7 @@ const isValidDataType = (data) => {
7336
7335
  return isValid;
7337
7336
  };
7338
7337
 
7339
- const componentName$9 = getComponentName('grid');
7338
+ const componentName$a = getComponentName('grid');
7340
7339
 
7341
7340
  const GridMixin = (superclass) =>
7342
7341
  class GridMixinClass extends superclass {
@@ -7496,7 +7495,7 @@ const GridMixin = (superclass) =>
7496
7495
  };
7497
7496
 
7498
7497
  const {
7499
- host: host$2,
7498
+ host: host$3,
7500
7499
  headerRow,
7501
7500
  headerRowCell,
7502
7501
  contentRow,
@@ -7531,15 +7530,15 @@ const GridClass = compose(
7531
7530
  fontWeight: { ...contentRow },
7532
7531
  valueTextColor: { ...contentRow, property: 'color' },
7533
7532
  backgroundColor: [
7534
- { ...host$2, property: 'background-color' },
7533
+ { ...host$3, property: 'background-color' },
7535
7534
  { ...contentRow, property: 'background-color' },
7536
7535
  ],
7537
7536
  sortIndicatorsColor: { ...sortIndicators, property: 'color' },
7538
7537
  activeSortIndicator: { ...activeSortIndicator, property: 'color' },
7539
- borderColor: { ...host$2, property: 'border-color' },
7540
- borderWidth: { ...host$2, property: 'border-width' },
7541
- borderStyle: { ...host$2, property: 'border-style' },
7542
- borderRadius: { ...host$2, property: 'border-radius' },
7538
+ borderColor: { ...host$3, property: 'border-color' },
7539
+ borderWidth: { ...host$3, property: 'border-width' },
7540
+ borderStyle: { ...host$3, property: 'border-style' },
7541
+ borderRadius: { ...host$3, property: 'border-radius' },
7543
7542
  selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
7544
7543
  headerRowTextColor: { ...headerRowCell, property: 'color' },
7545
7544
  separatorColor: [
@@ -7572,13 +7571,13 @@ const GridClass = compose(
7572
7571
  }
7573
7572
  `,
7574
7573
  excludeAttrsSync: ['columns', 'tabindex'],
7575
- componentName: componentName$9,
7574
+ componentName: componentName$a,
7576
7575
  })
7577
7576
  );
7578
7577
 
7579
- customElements.define(componentName$9, GridClass);
7578
+ customElements.define(componentName$a, GridClass);
7580
7579
 
7581
- const componentName$8 = getComponentName('multi-select-combo-box');
7580
+ const componentName$9 = getComponentName('multi-select-combo-box');
7582
7581
 
7583
7582
  const multiSelectComboBoxMixin = (superclass) =>
7584
7583
  class MultiSelectComboBoxMixinClass extends superclass {
@@ -7966,7 +7965,7 @@ const multiSelectComboBoxMixin = (superclass) =>
7966
7965
  };
7967
7966
 
7968
7967
  const {
7969
- host: host$1,
7968
+ host: host$2,
7970
7969
  inputField,
7971
7970
  inputElement,
7972
7971
  placeholder,
@@ -8004,10 +8003,10 @@ const {
8004
8003
  const MultiSelectComboBoxClass = compose(
8005
8004
  createStyleMixin({
8006
8005
  mappings: {
8007
- hostWidth: { ...host$1, property: 'width' },
8008
- hostDirection: { ...host$1, property: 'direction' },
8006
+ hostWidth: { ...host$2, property: 'width' },
8007
+ hostDirection: { ...host$2, property: 'direction' },
8009
8008
  // we apply font-size also on the host so we can set its width with em
8010
- fontSize: [{}, host$1],
8009
+ fontSize: [{}, host$2],
8011
8010
  chipFontSize: { ...chipLabel, property: 'font-size' },
8012
8011
  fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
8013
8012
  labelTextColor: [
@@ -8182,16 +8181,16 @@ const MultiSelectComboBoxClass = compose(
8182
8181
  // Note: we exclude `placeholder` because the vaadin component observes it and
8183
8182
  // tries to override it, causing us to lose the user set placeholder.
8184
8183
  excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
8185
- componentName: componentName$8,
8184
+ componentName: componentName$9,
8186
8185
  includeForwardProps: ['items', 'renderer', 'selectedItems'],
8187
8186
  })
8188
8187
  );
8189
8188
 
8190
- customElements.define(componentName$8, MultiSelectComboBoxClass);
8189
+ customElements.define(componentName$9, MultiSelectComboBoxClass);
8191
8190
 
8192
- const componentName$7 = getComponentName('badge');
8191
+ const componentName$8 = getComponentName('badge');
8193
8192
 
8194
- class RawBadge extends createBaseClass({ componentName: componentName$7, baseSelector: ':host > div' }) {
8193
+ class RawBadge extends createBaseClass({ componentName: componentName$8, baseSelector: ':host > div' }) {
8195
8194
  constructor() {
8196
8195
  super();
8197
8196
 
@@ -8239,9 +8238,9 @@ const BadgeClass = compose(
8239
8238
  componentNameValidationMixin
8240
8239
  )(RawBadge);
8241
8240
 
8242
- customElements.define(componentName$7, BadgeClass);
8241
+ customElements.define(componentName$8, BadgeClass);
8243
8242
 
8244
- const componentName$6 = getComponentName('modal');
8243
+ const componentName$7 = getComponentName('modal');
8245
8244
 
8246
8245
  const customMixin$1 = (superclass) =>
8247
8246
  class ModalMixinClass extends superclass {
@@ -8340,11 +8339,11 @@ const ModalClass = compose(
8340
8339
  wrappedEleName: 'vaadin-dialog',
8341
8340
  style: () => ``,
8342
8341
  excludeAttrsSync: ['tabindex', 'opened'],
8343
- componentName: componentName$6,
8342
+ componentName: componentName$7,
8344
8343
  })
8345
8344
  );
8346
8345
 
8347
- customElements.define(componentName$6, ModalClass);
8346
+ customElements.define(componentName$7, ModalClass);
8348
8347
 
8349
8348
  const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
8350
8349
 
@@ -8355,7 +8354,7 @@ if (!vaadinContainerClass) {
8355
8354
  class NotificationContainerClass extends vaadinContainerClass {}
8356
8355
  customElements.define(getComponentName('notification-container'), NotificationContainerClass);
8357
8356
 
8358
- const componentName$5 = getComponentName('notification-card');
8357
+ const componentName$6 = getComponentName('notification-card');
8359
8358
 
8360
8359
  const notificationCardMixin = (superclass) =>
8361
8360
  class NotificationCardMixinClass extends superclass {
@@ -8463,13 +8462,13 @@ const NotificationCardClass = compose(
8463
8462
  }
8464
8463
  `,
8465
8464
  excludeAttrsSync: ['tabindex'],
8466
- componentName: componentName$5,
8465
+ componentName: componentName$6,
8467
8466
  })
8468
8467
  );
8469
8468
 
8470
- customElements.define(componentName$5, NotificationCardClass);
8469
+ customElements.define(componentName$6, NotificationCardClass);
8471
8470
 
8472
- const componentName$4 = getComponentName('notification');
8471
+ const componentName$5 = getComponentName('notification');
8473
8472
 
8474
8473
  const NotificationMixin = (superclass) =>
8475
8474
  class NotificationMixinClass extends superclass {
@@ -8564,11 +8563,111 @@ const NotificationClass = compose(
8564
8563
  createProxy({
8565
8564
  wrappedEleName: 'vaadin-notification',
8566
8565
  excludeAttrsSync: ['tabindex'],
8567
- componentName: componentName$4,
8566
+ componentName: componentName$5,
8568
8567
  })
8569
8568
  );
8570
8569
 
8571
- customElements.define(componentName$4, NotificationClass);
8570
+ customElements.define(componentName$5, NotificationClass);
8571
+
8572
+ const componentName$4 = getComponentName('avatar');
8573
+ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSelector: ':host > .wrapper' }) {
8574
+ constructor() {
8575
+ super();
8576
+
8577
+ this.attachShadow({ mode: 'open' }).innerHTML = `
8578
+ <style>
8579
+ :host {
8580
+ display: inline-flex;
8581
+ }
8582
+
8583
+ .editable {
8584
+ border: 1px solid;
8585
+ border-radius: 100%;
8586
+ height: fit-content;
8587
+ width: 25%;
8588
+ height: 25%;
8589
+ display: flex;
8590
+ justify-content: center;
8591
+ align-items: center;
8592
+ padding: 5%;
8593
+ box-sizing: border-box;
8594
+ position: absolute;
8595
+ bottom: 0;
8596
+ inset-inline-end: 0;
8597
+ }
8598
+
8599
+ vaadin-icon {
8600
+ color: currentcolor;
8601
+ }
8602
+
8603
+ vaadin-avatar {
8604
+ width: 100%;
8605
+ height: 100%;
8606
+ }
8607
+
8608
+ .wrapper {
8609
+ display: inline-flex;
8610
+ position: relative;
8611
+ width: 100%;
8612
+ height: 100%;
8613
+ }
8614
+ </style>
8615
+
8616
+
8617
+ <div class="wrapper">
8618
+ <vaadin-avatar></vaadin-avatar>
8619
+ <div class="editable">
8620
+ <vaadin-icon icon="vaadin:pencil"></vaadin-icon>
8621
+ </div>
8622
+ </div>
8623
+ `;
8624
+
8625
+ this.avatarComponent = this.shadowRoot.querySelector('vaadin-avatar');
8626
+
8627
+ forwardAttrs(this, this.avatarComponent, {
8628
+ includeAttrs: ['name', 'img'],
8629
+ });
8630
+
8631
+ const editableIcon = this.shadowRoot.querySelector('.editable');
8632
+
8633
+ observeAttributes(
8634
+ this,
8635
+ () => {
8636
+ editableIcon.style.display = this.isEditable ? '' : 'none';
8637
+ },
8638
+ { includeAttrs: ['editable'] }
8639
+ );
8640
+ }
8641
+
8642
+ get isEditable() {
8643
+ return this.getAttribute('editable') === 'true';
8644
+ }
8645
+ }
8646
+
8647
+ const { host: host$1, editableBadge, avatar: avatar$2 } = {
8648
+ host: { selector: () => ':host' },
8649
+ editableBadge: { selector: '> .editable' },
8650
+ avatar: { selector: 'vaadin-avatar' },
8651
+ };
8652
+
8653
+ const AvatarClass = compose(
8654
+ createStyleMixin({
8655
+ mappings: {
8656
+ hostWidth: { ...host$1, property: 'width' },
8657
+ hostHeight: { ...host$1, property: 'height' },
8658
+ hostDirection: { ...host$1, property: 'direction' },
8659
+ avatarTextColor: { ...avatar$2, property: 'color' },
8660
+ avatarBackgroundColor: { ...avatar$2, property: 'background-color' },
8661
+ editableIconColor: { ...editableBadge, property: 'color' },
8662
+ editableBorderColor: { ...editableBadge, property: 'border-color' },
8663
+ editableBackgroundColor: { ...editableBadge, property: 'background-color' },
8664
+ },
8665
+ }),
8666
+ draggableMixin,
8667
+ componentNameValidationMixin
8668
+ )(RawAvatar);
8669
+
8670
+ customElements.define(componentName$4, AvatarClass);
8572
8671
 
8573
8672
  const componentName$3 = getComponentName('mappings-field-internal');
8574
8673
 
@@ -9474,154 +9573,154 @@ const globals = {
9474
9573
  fonts,
9475
9574
  direction,
9476
9575
  };
9477
- const vars$z = getThemeVars(globals);
9576
+ const vars$A = getThemeVars(globals);
9478
9577
 
9479
- const globalRefs$i = getThemeRefs(globals);
9480
- const compVars$4 = ButtonClass.cssVarList;
9578
+ const globalRefs$j = getThemeRefs(globals);
9579
+ const compVars$5 = ButtonClass.cssVarList;
9481
9580
 
9482
9581
  const mode = {
9483
- primary: globalRefs$i.colors.primary,
9484
- secondary: globalRefs$i.colors.secondary,
9485
- success: globalRefs$i.colors.success,
9486
- error: globalRefs$i.colors.error,
9487
- surface: globalRefs$i.colors.surface,
9582
+ primary: globalRefs$j.colors.primary,
9583
+ secondary: globalRefs$j.colors.secondary,
9584
+ success: globalRefs$j.colors.success,
9585
+ error: globalRefs$j.colors.error,
9586
+ surface: globalRefs$j.colors.surface,
9488
9587
  };
9489
9588
 
9490
- const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$L);
9589
+ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$M);
9491
9590
 
9492
9591
  const button = {
9493
9592
  ...helperTheme$3,
9494
9593
 
9495
- [compVars$4.fontFamily]: globalRefs$i.fonts.font1.family,
9594
+ [compVars$5.fontFamily]: globalRefs$j.fonts.font1.family,
9496
9595
 
9497
- [compVars$4.cursor]: 'pointer',
9498
- [compVars$4.hostHeight]: '3em',
9499
- [compVars$4.hostWidth]: 'auto',
9500
- [compVars$4.hostDirection]: globalRefs$i.direction,
9596
+ [compVars$5.cursor]: 'pointer',
9597
+ [compVars$5.hostHeight]: '3em',
9598
+ [compVars$5.hostWidth]: 'auto',
9599
+ [compVars$5.hostDirection]: globalRefs$j.direction,
9501
9600
 
9502
- [compVars$4.borderRadius]: globalRefs$i.radius.sm,
9503
- [compVars$4.borderWidth]: globalRefs$i.border.xs,
9504
- [compVars$4.borderStyle]: 'solid',
9505
- [compVars$4.borderColor]: 'transparent',
9601
+ [compVars$5.borderRadius]: globalRefs$j.radius.sm,
9602
+ [compVars$5.borderWidth]: globalRefs$j.border.xs,
9603
+ [compVars$5.borderStyle]: 'solid',
9604
+ [compVars$5.borderColor]: 'transparent',
9506
9605
 
9507
- [compVars$4.labelSpacing]: '0.25em',
9606
+ [compVars$5.labelSpacing]: '0.25em',
9508
9607
 
9509
- [compVars$4.textAlign]: 'center', // default text align center
9608
+ [compVars$5.textAlign]: 'center', // default text align center
9510
9609
  textAlign: {
9511
- right: { [compVars$4.textAlign]: 'right' },
9512
- left: { [compVars$4.textAlign]: 'left' },
9513
- center: { [compVars$4.textAlign]: 'center' },
9610
+ right: { [compVars$5.textAlign]: 'right' },
9611
+ left: { [compVars$5.textAlign]: 'left' },
9612
+ center: { [compVars$5.textAlign]: 'center' },
9514
9613
  },
9515
9614
 
9516
- [compVars$4.verticalPadding]: '1em',
9615
+ [compVars$5.verticalPadding]: '1em',
9517
9616
 
9518
- [compVars$4.outlineWidth]: globals.border.sm,
9519
- [compVars$4.outlineOffset]: '0px', // keep `px` unit for external calc
9520
- [compVars$4.outlineStyle]: 'solid',
9521
- [compVars$4.outlineColor]: 'transparent',
9617
+ [compVars$5.outlineWidth]: globals.border.sm,
9618
+ [compVars$5.outlineOffset]: '0px', // keep `px` unit for external calc
9619
+ [compVars$5.outlineStyle]: 'solid',
9620
+ [compVars$5.outlineColor]: 'transparent',
9522
9621
 
9523
9622
  size: {
9524
- xs: { [compVars$4.fontSize]: '12px' },
9525
- sm: { [compVars$4.fontSize]: '14px' },
9526
- md: { [compVars$4.fontSize]: '16px' },
9527
- lg: { [compVars$4.fontSize]: '18px' },
9623
+ xs: { [compVars$5.fontSize]: '12px' },
9624
+ sm: { [compVars$5.fontSize]: '14px' },
9625
+ md: { [compVars$5.fontSize]: '16px' },
9626
+ lg: { [compVars$5.fontSize]: '18px' },
9528
9627
  },
9529
9628
 
9530
9629
  _square: {
9531
- [compVars$4.hostHeight]: '3em',
9532
- [compVars$4.hostWidth]: '3em',
9533
- [compVars$4.verticalPadding]: '0',
9630
+ [compVars$5.hostHeight]: '3em',
9631
+ [compVars$5.hostWidth]: '3em',
9632
+ [compVars$5.verticalPadding]: '0',
9534
9633
  },
9535
9634
 
9536
9635
  _fullWidth: {
9537
- [compVars$4.hostWidth]: '100%',
9636
+ [compVars$5.hostWidth]: '100%',
9538
9637
  },
9539
9638
 
9540
9639
  _loading: {
9541
- [compVars$4.cursor]: 'wait',
9542
- [compVars$4.labelTextColor]: helperRefs$3.main,
9640
+ [compVars$5.cursor]: 'wait',
9641
+ [compVars$5.labelTextColor]: helperRefs$3.main,
9543
9642
  },
9544
9643
 
9545
9644
  _disabled: {
9546
- [helperVars$3.main]: globalRefs$i.colors.surface.light,
9547
- [helperVars$3.dark]: globalRefs$i.colors.surface.dark,
9548
- [helperVars$3.light]: globalRefs$i.colors.surface.light,
9549
- [helperVars$3.contrast]: globalRefs$i.colors.surface.main,
9645
+ [helperVars$3.main]: globalRefs$j.colors.surface.light,
9646
+ [helperVars$3.dark]: globalRefs$j.colors.surface.dark,
9647
+ [helperVars$3.light]: globalRefs$j.colors.surface.light,
9648
+ [helperVars$3.contrast]: globalRefs$j.colors.surface.main,
9550
9649
  },
9551
9650
 
9552
9651
  variant: {
9553
9652
  contained: {
9554
- [compVars$4.labelTextColor]: helperRefs$3.contrast,
9555
- [compVars$4.backgroundColor]: helperRefs$3.main,
9653
+ [compVars$5.labelTextColor]: helperRefs$3.contrast,
9654
+ [compVars$5.backgroundColor]: helperRefs$3.main,
9556
9655
  _hover: {
9557
- [compVars$4.backgroundColor]: helperRefs$3.dark,
9656
+ [compVars$5.backgroundColor]: helperRefs$3.dark,
9558
9657
  _loading: {
9559
- [compVars$4.backgroundColor]: helperRefs$3.main,
9658
+ [compVars$5.backgroundColor]: helperRefs$3.main,
9560
9659
  },
9561
9660
  },
9562
9661
  _active: {
9563
- [compVars$4.backgroundColor]: helperRefs$3.main,
9662
+ [compVars$5.backgroundColor]: helperRefs$3.main,
9564
9663
  },
9565
9664
  },
9566
9665
 
9567
9666
  outline: {
9568
- [compVars$4.labelTextColor]: helperRefs$3.main,
9569
- [compVars$4.borderColor]: helperRefs$3.main,
9667
+ [compVars$5.labelTextColor]: helperRefs$3.main,
9668
+ [compVars$5.borderColor]: helperRefs$3.main,
9570
9669
  _hover: {
9571
- [compVars$4.labelTextColor]: helperRefs$3.dark,
9572
- [compVars$4.borderColor]: helperRefs$3.dark,
9670
+ [compVars$5.labelTextColor]: helperRefs$3.dark,
9671
+ [compVars$5.borderColor]: helperRefs$3.dark,
9573
9672
  },
9574
9673
  _active: {
9575
- [compVars$4.labelTextColor]: helperRefs$3.main,
9576
- [compVars$4.borderColor]: helperRefs$3.main,
9674
+ [compVars$5.labelTextColor]: helperRefs$3.main,
9675
+ [compVars$5.borderColor]: helperRefs$3.main,
9577
9676
  },
9578
9677
  },
9579
9678
 
9580
9679
  link: {
9581
- [compVars$4.labelTextColor]: helperRefs$3.main,
9680
+ [compVars$5.labelTextColor]: helperRefs$3.main,
9582
9681
  _hover: {
9583
- [compVars$4.labelTextColor]: helperRefs$3.dark,
9584
- [compVars$4.labelTextDecoration]: 'underline',
9682
+ [compVars$5.labelTextColor]: helperRefs$3.dark,
9683
+ [compVars$5.labelTextDecoration]: 'underline',
9585
9684
  },
9586
9685
  _active: {
9587
- [compVars$4.labelTextColor]: helperRefs$3.main,
9686
+ [compVars$5.labelTextColor]: helperRefs$3.main,
9588
9687
  },
9589
9688
  },
9590
9689
  },
9591
9690
 
9592
9691
  _focused: {
9593
- [compVars$4.outlineColor]: helperRefs$3.light,
9692
+ [compVars$5.outlineColor]: helperRefs$3.light,
9594
9693
  },
9595
9694
  };
9596
9695
 
9597
- const vars$y = {
9598
- ...compVars$4,
9696
+ const vars$z = {
9697
+ ...compVars$5,
9599
9698
  ...helperVars$3,
9600
9699
  };
9601
9700
 
9602
9701
  var button$1 = /*#__PURE__*/Object.freeze({
9603
9702
  __proto__: null,
9604
9703
  default: button,
9605
- vars: vars$y
9704
+ vars: vars$z
9606
9705
  });
9607
9706
 
9608
9707
  const componentName = getComponentName('input-wrapper');
9609
- const globalRefs$h = getThemeRefs(globals);
9708
+ const globalRefs$i = getThemeRefs(globals);
9610
9709
 
9611
- const [theme$1, refs, vars$x] = createHelperVars(
9710
+ const [theme$1, refs, vars$y] = createHelperVars(
9612
9711
  {
9613
- labelTextColor: globalRefs$h.colors.surface.dark,
9614
- valueTextColor: globalRefs$h.colors.surface.contrast,
9615
- placeholderTextColor: globalRefs$h.colors.surface.dark,
9712
+ labelTextColor: globalRefs$i.colors.surface.dark,
9713
+ valueTextColor: globalRefs$i.colors.surface.contrast,
9714
+ placeholderTextColor: globalRefs$i.colors.surface.dark,
9616
9715
  requiredIndicator: "'*'",
9617
- errorMessageTextColor: globalRefs$h.colors.error.main,
9618
- helperTextColor: globalRefs$h.colors.surface.dark,
9716
+ errorMessageTextColor: globalRefs$i.colors.error.main,
9717
+ helperTextColor: globalRefs$i.colors.surface.dark,
9619
9718
 
9620
- borderWidth: globalRefs$h.border.xs,
9621
- borderRadius: globalRefs$h.radius.xs,
9719
+ borderWidth: globalRefs$i.border.xs,
9720
+ borderRadius: globalRefs$i.radius.xs,
9622
9721
  borderColor: 'transparent',
9623
9722
 
9624
- outlineWidth: globalRefs$h.border.sm,
9723
+ outlineWidth: globalRefs$i.border.sm,
9625
9724
  outlineStyle: 'solid',
9626
9725
  outlineColor: 'transparent',
9627
9726
  outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -9632,11 +9731,11 @@ const [theme$1, refs, vars$x] = createHelperVars(
9632
9731
  horizontalPadding: '0.5em',
9633
9732
  verticalPadding: '0.5em',
9634
9733
 
9635
- backgroundColor: globalRefs$h.colors.surface.main,
9734
+ backgroundColor: globalRefs$i.colors.surface.main,
9636
9735
 
9637
- fontFamily: globalRefs$h.fonts.font1.family,
9736
+ fontFamily: globalRefs$i.fonts.font1.family,
9638
9737
 
9639
- direction: globalRefs$h.direction,
9738
+ direction: globalRefs$i.direction,
9640
9739
 
9641
9740
  overlayOpacity: '0.3',
9642
9741
 
@@ -9652,28 +9751,28 @@ const [theme$1, refs, vars$x] = createHelperVars(
9652
9751
  },
9653
9752
 
9654
9753
  _focused: {
9655
- outlineColor: globalRefs$h.colors.surface.light,
9754
+ outlineColor: globalRefs$i.colors.surface.light,
9656
9755
  _invalid: {
9657
- outlineColor: globalRefs$h.colors.error.main,
9756
+ outlineColor: globalRefs$i.colors.error.main,
9658
9757
  },
9659
9758
  },
9660
9759
 
9661
9760
  _bordered: {
9662
- outlineWidth: globalRefs$h.border.xs,
9663
- borderColor: globalRefs$h.colors.surface.light,
9761
+ outlineWidth: globalRefs$i.border.xs,
9762
+ borderColor: globalRefs$i.colors.surface.light,
9664
9763
  borderStyle: 'solid',
9665
9764
  _invalid: {
9666
- borderColor: globalRefs$h.colors.error.main,
9765
+ borderColor: globalRefs$i.colors.error.main,
9667
9766
  },
9668
9767
  },
9669
9768
 
9670
9769
  _disabled: {
9671
- labelTextColor: globalRefs$h.colors.surface.light,
9672
- borderColor: globalRefs$h.colors.surface.light,
9673
- valueTextColor: globalRefs$h.colors.surface.light,
9674
- placeholderTextColor: globalRefs$h.colors.surface.light,
9675
- helperTextColor: globalRefs$h.colors.surface.light,
9676
- backgroundColor: globalRefs$h.colors.surface.main,
9770
+ labelTextColor: globalRefs$i.colors.surface.light,
9771
+ borderColor: globalRefs$i.colors.surface.light,
9772
+ valueTextColor: globalRefs$i.colors.surface.light,
9773
+ placeholderTextColor: globalRefs$i.colors.surface.light,
9774
+ helperTextColor: globalRefs$i.colors.surface.light,
9775
+ backgroundColor: globalRefs$i.colors.surface.main,
9677
9776
  },
9678
9777
  },
9679
9778
  componentName
@@ -9683,22 +9782,64 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
9683
9782
  __proto__: null,
9684
9783
  default: theme$1,
9685
9784
  refs: refs,
9686
- vars: vars$x
9785
+ vars: vars$y
9687
9786
  });
9688
9787
 
9689
- const vars$w = TextFieldClass.cssVarList;
9788
+ const vars$x = TextFieldClass.cssVarList;
9690
9789
 
9691
9790
  const textField = {
9791
+ [vars$x.hostWidth]: refs.width,
9792
+ [vars$x.hostMinWidth]: refs.minWidth,
9793
+ [vars$x.hostDirection]: refs.direction,
9794
+ [vars$x.fontSize]: refs.fontSize,
9795
+ [vars$x.fontFamily]: refs.fontFamily,
9796
+ [vars$x.labelTextColor]: refs.labelTextColor,
9797
+ [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
9798
+ [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
9799
+ [vars$x.inputValueTextColor]: refs.valueTextColor,
9800
+ [vars$x.inputPlaceholderColor]: refs.placeholderTextColor,
9801
+ [vars$x.inputBorderWidth]: refs.borderWidth,
9802
+ [vars$x.inputBorderStyle]: refs.borderStyle,
9803
+ [vars$x.inputBorderColor]: refs.borderColor,
9804
+ [vars$x.inputBorderRadius]: refs.borderRadius,
9805
+ [vars$x.inputOutlineWidth]: refs.outlineWidth,
9806
+ [vars$x.inputOutlineStyle]: refs.outlineStyle,
9807
+ [vars$x.inputOutlineColor]: refs.outlineColor,
9808
+ [vars$x.inputOutlineOffset]: refs.outlineOffset,
9809
+ [vars$x.inputBackgroundColor]: refs.backgroundColor,
9810
+ [vars$x.inputHeight]: refs.inputHeight,
9811
+ [vars$x.inputHorizontalPadding]: refs.horizontalPadding,
9812
+ [vars$x.helperTextColor]: refs.helperTextColor,
9813
+ textAlign: {
9814
+ right: { [vars$x.inputTextAlign]: 'right' },
9815
+ left: { [vars$x.inputTextAlign]: 'left' },
9816
+ center: { [vars$x.inputTextAlign]: 'center' },
9817
+ },
9818
+ };
9819
+
9820
+ var textField$1 = /*#__PURE__*/Object.freeze({
9821
+ __proto__: null,
9822
+ default: textField,
9823
+ textField: textField,
9824
+ vars: vars$x
9825
+ });
9826
+
9827
+ const globalRefs$h = getThemeRefs(globals);
9828
+ const vars$w = PasswordClass.cssVarList;
9829
+
9830
+ const password = {
9692
9831
  [vars$w.hostWidth]: refs.width,
9693
- [vars$w.hostMinWidth]: refs.minWidth,
9694
9832
  [vars$w.hostDirection]: refs.direction,
9695
9833
  [vars$w.fontSize]: refs.fontSize,
9696
9834
  [vars$w.fontFamily]: refs.fontFamily,
9697
9835
  [vars$w.labelTextColor]: refs.labelTextColor,
9698
- [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
9699
9836
  [vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
9837
+ [vars$w.inputHorizontalPadding]: refs.horizontalPadding,
9838
+ [vars$w.inputHeight]: refs.inputHeight,
9839
+ [vars$w.inputBackgroundColor]: refs.backgroundColor,
9840
+ [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
9700
9841
  [vars$w.inputValueTextColor]: refs.valueTextColor,
9701
- [vars$w.inputPlaceholderColor]: refs.placeholderTextColor,
9842
+ [vars$w.inputPlaceholderTextColor]: refs.placeholderTextColor,
9702
9843
  [vars$w.inputBorderWidth]: refs.borderWidth,
9703
9844
  [vars$w.inputBorderStyle]: refs.borderStyle,
9704
9845
  [vars$w.inputBorderColor]: refs.borderColor,
@@ -9707,40 +9848,29 @@ const textField = {
9707
9848
  [vars$w.inputOutlineStyle]: refs.outlineStyle,
9708
9849
  [vars$w.inputOutlineColor]: refs.outlineColor,
9709
9850
  [vars$w.inputOutlineOffset]: refs.outlineOffset,
9710
- [vars$w.inputBackgroundColor]: refs.backgroundColor,
9711
- [vars$w.inputHeight]: refs.inputHeight,
9712
- [vars$w.inputHorizontalPadding]: refs.horizontalPadding,
9713
- [vars$w.helperTextColor]: refs.helperTextColor,
9714
- textAlign: {
9715
- right: { [vars$w.inputTextAlign]: 'right' },
9716
- left: { [vars$w.inputTextAlign]: 'left' },
9717
- center: { [vars$w.inputTextAlign]: 'center' },
9718
- },
9851
+ [vars$w.revealButtonOffset]: globalRefs$h.spacing.md,
9852
+ [vars$w.revealButtonSize]: refs.toggleButtonSize,
9853
+ [vars$w.revealButtonColor]: refs.placeholderTextColor,
9719
9854
  };
9720
9855
 
9721
- var textField$1 = /*#__PURE__*/Object.freeze({
9856
+ var password$1 = /*#__PURE__*/Object.freeze({
9722
9857
  __proto__: null,
9723
- default: textField,
9724
- textField: textField,
9858
+ default: password,
9725
9859
  vars: vars$w
9726
9860
  });
9727
9861
 
9728
- const globalRefs$g = getThemeRefs(globals);
9729
- const vars$v = PasswordClass.cssVarList;
9862
+ const vars$v = NumberFieldClass.cssVarList;
9730
9863
 
9731
- const password = {
9864
+ const numberField = {
9732
9865
  [vars$v.hostWidth]: refs.width,
9866
+ [vars$v.hostMinWidth]: refs.minWidth,
9733
9867
  [vars$v.hostDirection]: refs.direction,
9734
9868
  [vars$v.fontSize]: refs.fontSize,
9735
9869
  [vars$v.fontFamily]: refs.fontFamily,
9736
9870
  [vars$v.labelTextColor]: refs.labelTextColor,
9737
9871
  [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
9738
- [vars$v.inputHorizontalPadding]: refs.horizontalPadding,
9739
- [vars$v.inputHeight]: refs.inputHeight,
9740
- [vars$v.inputBackgroundColor]: refs.backgroundColor,
9741
- [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
9742
9872
  [vars$v.inputValueTextColor]: refs.valueTextColor,
9743
- [vars$v.inputPlaceholderTextColor]: refs.placeholderTextColor,
9873
+ [vars$v.inputPlaceholderColor]: refs.placeholderTextColor,
9744
9874
  [vars$v.inputBorderWidth]: refs.borderWidth,
9745
9875
  [vars$v.inputBorderStyle]: refs.borderStyle,
9746
9876
  [vars$v.inputBorderColor]: refs.borderColor,
@@ -9749,20 +9879,21 @@ const password = {
9749
9879
  [vars$v.inputOutlineStyle]: refs.outlineStyle,
9750
9880
  [vars$v.inputOutlineColor]: refs.outlineColor,
9751
9881
  [vars$v.inputOutlineOffset]: refs.outlineOffset,
9752
- [vars$v.revealButtonOffset]: globalRefs$g.spacing.md,
9753
- [vars$v.revealButtonSize]: refs.toggleButtonSize,
9754
- [vars$v.revealButtonColor]: refs.placeholderTextColor,
9882
+ [vars$v.inputBackgroundColor]: refs.backgroundColor,
9883
+ [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
9884
+ [vars$v.inputHorizontalPadding]: refs.horizontalPadding,
9885
+ [vars$v.inputHeight]: refs.inputHeight,
9755
9886
  };
9756
9887
 
9757
- var password$1 = /*#__PURE__*/Object.freeze({
9888
+ var numberField$1 = /*#__PURE__*/Object.freeze({
9758
9889
  __proto__: null,
9759
- default: password,
9890
+ default: numberField,
9760
9891
  vars: vars$v
9761
9892
  });
9762
9893
 
9763
- const vars$u = NumberFieldClass.cssVarList;
9894
+ const vars$u = EmailFieldClass.cssVarList;
9764
9895
 
9765
- const numberField = {
9896
+ const emailField = {
9766
9897
  [vars$u.hostWidth]: refs.width,
9767
9898
  [vars$u.hostMinWidth]: refs.minWidth,
9768
9899
  [vars$u.hostDirection]: refs.direction,
@@ -9771,6 +9902,7 @@ const numberField = {
9771
9902
  [vars$u.labelTextColor]: refs.labelTextColor,
9772
9903
  [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
9773
9904
  [vars$u.inputValueTextColor]: refs.valueTextColor,
9905
+ [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
9774
9906
  [vars$u.inputPlaceholderColor]: refs.placeholderTextColor,
9775
9907
  [vars$u.inputBorderWidth]: refs.borderWidth,
9776
9908
  [vars$u.inputBorderStyle]: refs.borderStyle,
@@ -9781,202 +9913,169 @@ const numberField = {
9781
9913
  [vars$u.inputOutlineColor]: refs.outlineColor,
9782
9914
  [vars$u.inputOutlineOffset]: refs.outlineOffset,
9783
9915
  [vars$u.inputBackgroundColor]: refs.backgroundColor,
9784
- [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
9785
9916
  [vars$u.inputHorizontalPadding]: refs.horizontalPadding,
9786
9917
  [vars$u.inputHeight]: refs.inputHeight,
9787
9918
  };
9788
9919
 
9789
- var numberField$1 = /*#__PURE__*/Object.freeze({
9920
+ var emailField$1 = /*#__PURE__*/Object.freeze({
9790
9921
  __proto__: null,
9791
- default: numberField,
9922
+ default: emailField,
9792
9923
  vars: vars$u
9793
9924
  });
9794
9925
 
9795
- const vars$t = EmailFieldClass.cssVarList;
9926
+ const vars$t = TextAreaClass.cssVarList;
9796
9927
 
9797
- const emailField = {
9928
+ const textArea = {
9798
9929
  [vars$t.hostWidth]: refs.width,
9799
9930
  [vars$t.hostMinWidth]: refs.minWidth,
9800
9931
  [vars$t.hostDirection]: refs.direction,
9801
9932
  [vars$t.fontSize]: refs.fontSize,
9802
9933
  [vars$t.fontFamily]: refs.fontFamily,
9803
9934
  [vars$t.labelTextColor]: refs.labelTextColor,
9935
+ [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
9804
9936
  [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
9937
+ [vars$t.inputBackgroundColor]: refs.backgroundColor,
9805
9938
  [vars$t.inputValueTextColor]: refs.valueTextColor,
9806
- [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
9807
- [vars$t.inputPlaceholderColor]: refs.placeholderTextColor,
9939
+ [vars$t.inputPlaceholderTextColor]: refs.placeholderTextColor,
9940
+ [vars$t.inputBorderRadius]: refs.borderRadius,
9808
9941
  [vars$t.inputBorderWidth]: refs.borderWidth,
9809
9942
  [vars$t.inputBorderStyle]: refs.borderStyle,
9810
9943
  [vars$t.inputBorderColor]: refs.borderColor,
9811
- [vars$t.inputBorderRadius]: refs.borderRadius,
9812
9944
  [vars$t.inputOutlineWidth]: refs.outlineWidth,
9813
9945
  [vars$t.inputOutlineStyle]: refs.outlineStyle,
9814
9946
  [vars$t.inputOutlineColor]: refs.outlineColor,
9815
9947
  [vars$t.inputOutlineOffset]: refs.outlineOffset,
9816
- [vars$t.inputBackgroundColor]: refs.backgroundColor,
9817
- [vars$t.inputHorizontalPadding]: refs.horizontalPadding,
9818
- [vars$t.inputHeight]: refs.inputHeight,
9948
+ [vars$t.inputResizeType]: 'vertical',
9949
+ [vars$t.inputMinHeight]: '5em',
9950
+ textAlign: {
9951
+ right: { [vars$t.inputTextAlign]: 'right' },
9952
+ left: { [vars$t.inputTextAlign]: 'left' },
9953
+ center: { [vars$t.inputTextAlign]: 'center' },
9954
+ },
9955
+
9956
+ _readonly: {
9957
+ [vars$t.inputResizeType]: 'none',
9958
+ },
9819
9959
  };
9820
9960
 
9821
- var emailField$1 = /*#__PURE__*/Object.freeze({
9961
+ var textArea$1 = /*#__PURE__*/Object.freeze({
9822
9962
  __proto__: null,
9823
- default: emailField,
9963
+ default: textArea,
9824
9964
  vars: vars$t
9825
9965
  });
9826
9966
 
9827
- const vars$s = TextAreaClass.cssVarList;
9967
+ const vars$s = CheckboxClass.cssVarList;
9968
+ const checkboxSize = '1.35em';
9828
9969
 
9829
- const textArea = {
9970
+ const checkbox = {
9830
9971
  [vars$s.hostWidth]: refs.width,
9831
- [vars$s.hostMinWidth]: refs.minWidth,
9832
9972
  [vars$s.hostDirection]: refs.direction,
9833
9973
  [vars$s.fontSize]: refs.fontSize,
9834
9974
  [vars$s.fontFamily]: refs.fontFamily,
9835
9975
  [vars$s.labelTextColor]: refs.labelTextColor,
9836
9976
  [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
9977
+ [vars$s.labelFontWeight]: '400',
9978
+ [vars$s.labelLineHeight]: checkboxSize,
9979
+ [vars$s.labelSpacing]: '1em',
9837
9980
  [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
9838
- [vars$s.inputBackgroundColor]: refs.backgroundColor,
9839
- [vars$s.inputValueTextColor]: refs.valueTextColor,
9840
- [vars$s.inputPlaceholderTextColor]: refs.placeholderTextColor,
9981
+ [vars$s.inputOutlineWidth]: refs.outlineWidth,
9982
+ [vars$s.inputOutlineOffset]: refs.outlineOffset,
9983
+ [vars$s.inputOutlineColor]: refs.outlineColor,
9984
+ [vars$s.inputOutlineStyle]: refs.outlineStyle,
9841
9985
  [vars$s.inputBorderRadius]: refs.borderRadius,
9986
+ [vars$s.inputBorderColor]: refs.borderColor,
9842
9987
  [vars$s.inputBorderWidth]: refs.borderWidth,
9843
9988
  [vars$s.inputBorderStyle]: refs.borderStyle,
9844
- [vars$s.inputBorderColor]: refs.borderColor,
9845
- [vars$s.inputOutlineWidth]: refs.outlineWidth,
9846
- [vars$s.inputOutlineStyle]: refs.outlineStyle,
9847
- [vars$s.inputOutlineColor]: refs.outlineColor,
9848
- [vars$s.inputOutlineOffset]: refs.outlineOffset,
9849
- [vars$s.inputResizeType]: 'vertical',
9850
- [vars$s.inputMinHeight]: '5em',
9851
- textAlign: {
9852
- right: { [vars$s.inputTextAlign]: 'right' },
9853
- left: { [vars$s.inputTextAlign]: 'left' },
9854
- center: { [vars$s.inputTextAlign]: 'center' },
9989
+ [vars$s.inputBackgroundColor]: refs.backgroundColor,
9990
+ [vars$s.inputSize]: checkboxSize,
9991
+
9992
+ _checked: {
9993
+ [vars$s.inputValueTextColor]: refs.valueTextColor,
9855
9994
  },
9856
9995
 
9857
- _readonly: {
9858
- [vars$s.inputResizeType]: 'none',
9996
+ _disabled: {
9997
+ [vars$s.labelTextColor]: refs.labelTextColor,
9859
9998
  },
9860
9999
  };
9861
10000
 
9862
- var textArea$1 = /*#__PURE__*/Object.freeze({
10001
+ var checkbox$1 = /*#__PURE__*/Object.freeze({
9863
10002
  __proto__: null,
9864
- default: textArea,
10003
+ default: checkbox,
9865
10004
  vars: vars$s
9866
10005
  });
9867
10006
 
9868
- const vars$r = CheckboxClass.cssVarList;
9869
- const checkboxSize = '1.35em';
10007
+ const knobMargin = '2px';
10008
+ const checkboxHeight = '1.25em';
9870
10009
 
9871
- const checkbox = {
10010
+ const globalRefs$g = getThemeRefs(globals);
10011
+ const vars$r = SwitchToggleClass.cssVarList;
10012
+
10013
+ const switchToggle = {
9872
10014
  [vars$r.hostWidth]: refs.width,
9873
10015
  [vars$r.hostDirection]: refs.direction,
9874
10016
  [vars$r.fontSize]: refs.fontSize,
9875
10017
  [vars$r.fontFamily]: refs.fontFamily,
9876
- [vars$r.labelTextColor]: refs.labelTextColor,
9877
- [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
9878
- [vars$r.labelFontWeight]: '400',
9879
- [vars$r.labelLineHeight]: checkboxSize,
9880
- [vars$r.labelSpacing]: '1em',
9881
- [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
10018
+
9882
10019
  [vars$r.inputOutlineWidth]: refs.outlineWidth,
9883
10020
  [vars$r.inputOutlineOffset]: refs.outlineOffset,
9884
10021
  [vars$r.inputOutlineColor]: refs.outlineColor,
9885
10022
  [vars$r.inputOutlineStyle]: refs.outlineStyle,
9886
- [vars$r.inputBorderRadius]: refs.borderRadius,
9887
- [vars$r.inputBorderColor]: refs.borderColor,
9888
- [vars$r.inputBorderWidth]: refs.borderWidth,
9889
- [vars$r.inputBorderStyle]: refs.borderStyle,
9890
- [vars$r.inputBackgroundColor]: refs.backgroundColor,
9891
- [vars$r.inputSize]: checkboxSize,
9892
-
9893
- _checked: {
9894
- [vars$r.inputValueTextColor]: refs.valueTextColor,
9895
- },
9896
-
9897
- _disabled: {
9898
- [vars$r.labelTextColor]: refs.labelTextColor,
9899
- },
9900
- };
9901
-
9902
- var checkbox$1 = /*#__PURE__*/Object.freeze({
9903
- __proto__: null,
9904
- default: checkbox,
9905
- vars: vars$r
9906
- });
9907
10023
 
9908
- const knobMargin = '2px';
9909
- const checkboxHeight = '1.25em';
9910
-
9911
- const globalRefs$f = getThemeRefs(globals);
9912
- const vars$q = SwitchToggleClass.cssVarList;
10024
+ [vars$r.trackBorderStyle]: refs.borderStyle,
10025
+ [vars$r.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
10026
+ [vars$r.trackBorderColor]: refs.borderColor,
10027
+ [vars$r.trackBackgroundColor]: refs.backgroundColor,
10028
+ [vars$r.trackBorderRadius]: globalRefs$g.radius.md,
10029
+ [vars$r.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
10030
+ [vars$r.trackHeight]: checkboxHeight,
10031
+
10032
+ [vars$r.knobSize]: `calc(1em - ${knobMargin})`,
10033
+ [vars$r.knobRadius]: '50%',
10034
+ [vars$r.knobTopOffset]: '1px',
10035
+ [vars$r.knobLeftOffset]: knobMargin,
10036
+ [vars$r.knobColor]: refs.labelTextColor,
10037
+ [vars$r.knobTransitionDuration]: '0.3s',
9913
10038
 
9914
- const switchToggle = {
9915
- [vars$q.hostWidth]: refs.width,
9916
- [vars$q.hostDirection]: refs.direction,
9917
- [vars$q.fontSize]: refs.fontSize,
9918
- [vars$q.fontFamily]: refs.fontFamily,
9919
-
9920
- [vars$q.inputOutlineWidth]: refs.outlineWidth,
9921
- [vars$q.inputOutlineOffset]: refs.outlineOffset,
9922
- [vars$q.inputOutlineColor]: refs.outlineColor,
9923
- [vars$q.inputOutlineStyle]: refs.outlineStyle,
9924
-
9925
- [vars$q.trackBorderStyle]: refs.borderStyle,
9926
- [vars$q.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
9927
- [vars$q.trackBorderColor]: refs.borderColor,
9928
- [vars$q.trackBackgroundColor]: refs.backgroundColor,
9929
- [vars$q.trackBorderRadius]: globalRefs$f.radius.md,
9930
- [vars$q.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
9931
- [vars$q.trackHeight]: checkboxHeight,
9932
-
9933
- [vars$q.knobSize]: `calc(1em - ${knobMargin})`,
9934
- [vars$q.knobRadius]: '50%',
9935
- [vars$q.knobTopOffset]: '1px',
9936
- [vars$q.knobLeftOffset]: knobMargin,
9937
- [vars$q.knobColor]: refs.labelTextColor,
9938
- [vars$q.knobTransitionDuration]: '0.3s',
9939
-
9940
- [vars$q.labelTextColor]: refs.labelTextColor,
9941
- [vars$q.labelFontWeight]: '400',
9942
- [vars$q.labelLineHeight]: '1.35em',
9943
- [vars$q.labelSpacing]: '1em',
9944
- [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
9945
- [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
10039
+ [vars$r.labelTextColor]: refs.labelTextColor,
10040
+ [vars$r.labelFontWeight]: '400',
10041
+ [vars$r.labelLineHeight]: '1.35em',
10042
+ [vars$r.labelSpacing]: '1em',
10043
+ [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
10044
+ [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
9946
10045
 
9947
10046
  _checked: {
9948
- [vars$q.trackBorderColor]: refs.borderColor,
9949
- [vars$q.knobLeftOffset]: `calc(100% - var(${vars$q.knobSize}) - ${knobMargin})`,
9950
- [vars$q.knobColor]: refs.valueTextColor,
9951
- [vars$q.knobTextColor]: refs.valueTextColor,
10047
+ [vars$r.trackBorderColor]: refs.borderColor,
10048
+ [vars$r.knobLeftOffset]: `calc(100% - var(${vars$r.knobSize}) - ${knobMargin})`,
10049
+ [vars$r.knobColor]: refs.valueTextColor,
10050
+ [vars$r.knobTextColor]: refs.valueTextColor,
9952
10051
  },
9953
10052
 
9954
10053
  _disabled: {
9955
- [vars$q.knobColor]: globalRefs$f.colors.surface.light,
9956
- [vars$q.trackBorderColor]: globalRefs$f.colors.surface.light,
9957
- [vars$q.trackBackgroundColor]: globalRefs$f.colors.surface.main,
9958
- [vars$q.labelTextColor]: refs.labelTextColor,
10054
+ [vars$r.knobColor]: globalRefs$g.colors.surface.light,
10055
+ [vars$r.trackBorderColor]: globalRefs$g.colors.surface.light,
10056
+ [vars$r.trackBackgroundColor]: globalRefs$g.colors.surface.main,
10057
+ [vars$r.labelTextColor]: refs.labelTextColor,
9959
10058
  _checked: {
9960
- [vars$q.knobColor]: globalRefs$f.colors.surface.light,
9961
- [vars$q.trackBackgroundColor]: globalRefs$f.colors.surface.main,
10059
+ [vars$r.knobColor]: globalRefs$g.colors.surface.light,
10060
+ [vars$r.trackBackgroundColor]: globalRefs$g.colors.surface.main,
9962
10061
  },
9963
10062
  },
9964
10063
 
9965
10064
  _invalid: {
9966
- [vars$q.trackBorderColor]: globalRefs$f.colors.error.main,
9967
- [vars$q.knobColor]: globalRefs$f.colors.error.main,
10065
+ [vars$r.trackBorderColor]: globalRefs$g.colors.error.main,
10066
+ [vars$r.knobColor]: globalRefs$g.colors.error.main,
9968
10067
  },
9969
10068
  };
9970
10069
 
9971
10070
  var switchToggle$1 = /*#__PURE__*/Object.freeze({
9972
10071
  __proto__: null,
9973
10072
  default: switchToggle,
9974
- vars: vars$q
10073
+ vars: vars$r
9975
10074
  });
9976
10075
 
9977
- const globalRefs$e = getThemeRefs(globals);
10076
+ const globalRefs$f = getThemeRefs(globals);
9978
10077
 
9979
- const compVars$3 = ContainerClass.cssVarList;
10078
+ const compVars$4 = ContainerClass.cssVarList;
9980
10079
 
9981
10080
  const verticalAlignment = {
9982
10081
  start: { verticalAlignment: 'start' },
@@ -9996,7 +10095,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
9996
10095
  horizontalAlignment,
9997
10096
  shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
9998
10097
  },
9999
- componentName$F
10098
+ componentName$G
10000
10099
  );
10001
10100
 
10002
10101
  const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -10004,31 +10103,31 @@ const { shadowColor: shadowColor$1 } = helperRefs$2;
10004
10103
  const container = {
10005
10104
  ...helperTheme$2,
10006
10105
 
10007
- [compVars$3.hostWidth]: '100%',
10008
- [compVars$3.boxShadow]: 'none',
10009
- [compVars$3.backgroundColor]: globalRefs$e.colors.surface.main,
10010
- [compVars$3.color]: globalRefs$e.colors.surface.contrast,
10011
- [compVars$3.borderRadius]: '0px',
10012
- [compVars$3.hostDirection]: globalRefs$e.direction,
10106
+ [compVars$4.hostWidth]: '100%',
10107
+ [compVars$4.boxShadow]: 'none',
10108
+ [compVars$4.backgroundColor]: globalRefs$f.colors.surface.main,
10109
+ [compVars$4.color]: globalRefs$f.colors.surface.contrast,
10110
+ [compVars$4.borderRadius]: '0px',
10111
+ [compVars$4.hostDirection]: globalRefs$f.direction,
10013
10112
 
10014
10113
  verticalPadding: {
10015
- sm: { [compVars$3.verticalPadding]: '5px' },
10016
- md: { [compVars$3.verticalPadding]: '10px' },
10017
- lg: { [compVars$3.verticalPadding]: '20px' },
10114
+ sm: { [compVars$4.verticalPadding]: '5px' },
10115
+ md: { [compVars$4.verticalPadding]: '10px' },
10116
+ lg: { [compVars$4.verticalPadding]: '20px' },
10018
10117
  },
10019
10118
 
10020
10119
  horizontalPadding: {
10021
- sm: { [compVars$3.horizontalPadding]: '5px' },
10022
- md: { [compVars$3.horizontalPadding]: '10px' },
10023
- lg: { [compVars$3.horizontalPadding]: '20px' },
10120
+ sm: { [compVars$4.horizontalPadding]: '5px' },
10121
+ md: { [compVars$4.horizontalPadding]: '10px' },
10122
+ lg: { [compVars$4.horizontalPadding]: '20px' },
10024
10123
  },
10025
10124
 
10026
10125
  direction: {
10027
10126
  row: {
10028
- [compVars$3.flexDirection]: 'row',
10029
- [compVars$3.alignItems]: helperRefs$2.verticalAlignment,
10030
- [compVars$3.justifyContent]: helperRefs$2.horizontalAlignment,
10031
- [compVars$3.flexWrap]: 'wrap',
10127
+ [compVars$4.flexDirection]: 'row',
10128
+ [compVars$4.alignItems]: helperRefs$2.verticalAlignment,
10129
+ [compVars$4.justifyContent]: helperRefs$2.horizontalAlignment,
10130
+ [compVars$4.flexWrap]: 'wrap',
10032
10131
  horizontalAlignment: {
10033
10132
  spaceBetween: {
10034
10133
  [helperVars$2.horizontalAlignment]: 'space-between',
@@ -10036,9 +10135,9 @@ const container = {
10036
10135
  },
10037
10136
  },
10038
10137
  column: {
10039
- [compVars$3.flexDirection]: 'column',
10040
- [compVars$3.alignItems]: helperRefs$2.horizontalAlignment,
10041
- [compVars$3.justifyContent]: helperRefs$2.verticalAlignment,
10138
+ [compVars$4.flexDirection]: 'column',
10139
+ [compVars$4.alignItems]: helperRefs$2.horizontalAlignment,
10140
+ [compVars$4.justifyContent]: helperRefs$2.verticalAlignment,
10042
10141
  verticalAlignment: {
10043
10142
  spaceBetween: {
10044
10143
  [helperVars$2.verticalAlignment]: 'space-between',
@@ -10048,208 +10147,208 @@ const container = {
10048
10147
  },
10049
10148
 
10050
10149
  spaceBetween: {
10051
- sm: { [compVars$3.gap]: '10px' },
10052
- md: { [compVars$3.gap]: '20px' },
10053
- lg: { [compVars$3.gap]: '30px' },
10150
+ sm: { [compVars$4.gap]: '10px' },
10151
+ md: { [compVars$4.gap]: '20px' },
10152
+ lg: { [compVars$4.gap]: '30px' },
10054
10153
  },
10055
10154
 
10056
10155
  shadow: {
10057
10156
  sm: {
10058
- [compVars$3.boxShadow]: `${globalRefs$e.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$e.shadow.narrow.sm} ${shadowColor$1}`,
10157
+ [compVars$4.boxShadow]: `${globalRefs$f.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$f.shadow.narrow.sm} ${shadowColor$1}`,
10059
10158
  },
10060
10159
  md: {
10061
- [compVars$3.boxShadow]: `${globalRefs$e.shadow.wide.md} ${shadowColor$1}, ${globalRefs$e.shadow.narrow.md} ${shadowColor$1}`,
10160
+ [compVars$4.boxShadow]: `${globalRefs$f.shadow.wide.md} ${shadowColor$1}, ${globalRefs$f.shadow.narrow.md} ${shadowColor$1}`,
10062
10161
  },
10063
10162
  lg: {
10064
- [compVars$3.boxShadow]: `${globalRefs$e.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$e.shadow.narrow.lg} ${shadowColor$1}`,
10163
+ [compVars$4.boxShadow]: `${globalRefs$f.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$f.shadow.narrow.lg} ${shadowColor$1}`,
10065
10164
  },
10066
10165
  xl: {
10067
- [compVars$3.boxShadow]: `${globalRefs$e.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$e.shadow.narrow.xl} ${shadowColor$1}`,
10166
+ [compVars$4.boxShadow]: `${globalRefs$f.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$f.shadow.narrow.xl} ${shadowColor$1}`,
10068
10167
  },
10069
10168
  '2xl': {
10070
10169
  [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
10071
- [compVars$3.boxShadow]: `${globalRefs$e.shadow.wide['2xl']} ${shadowColor$1}`,
10170
+ [compVars$4.boxShadow]: `${globalRefs$f.shadow.wide['2xl']} ${shadowColor$1}`,
10072
10171
  },
10073
10172
  },
10074
10173
 
10075
10174
  borderRadius: {
10076
- sm: { [compVars$3.borderRadius]: globalRefs$e.radius.sm },
10077
- md: { [compVars$3.borderRadius]: globalRefs$e.radius.md },
10078
- lg: { [compVars$3.borderRadius]: globalRefs$e.radius.lg },
10079
- xl: { [compVars$3.borderRadius]: globalRefs$e.radius.xl },
10080
- '2xl': { [compVars$3.borderRadius]: globalRefs$e.radius['2xl'] },
10081
- '3xl': { [compVars$3.borderRadius]: globalRefs$e.radius['3xl'] },
10175
+ sm: { [compVars$4.borderRadius]: globalRefs$f.radius.sm },
10176
+ md: { [compVars$4.borderRadius]: globalRefs$f.radius.md },
10177
+ lg: { [compVars$4.borderRadius]: globalRefs$f.radius.lg },
10178
+ xl: { [compVars$4.borderRadius]: globalRefs$f.radius.xl },
10179
+ '2xl': { [compVars$4.borderRadius]: globalRefs$f.radius['2xl'] },
10180
+ '3xl': { [compVars$4.borderRadius]: globalRefs$f.radius['3xl'] },
10082
10181
  },
10083
10182
  };
10084
10183
 
10085
- const vars$p = {
10086
- ...compVars$3,
10184
+ const vars$q = {
10185
+ ...compVars$4,
10087
10186
  ...helperVars$2,
10088
10187
  };
10089
10188
 
10090
10189
  var container$1 = /*#__PURE__*/Object.freeze({
10091
10190
  __proto__: null,
10092
10191
  default: container,
10093
- vars: vars$p
10192
+ vars: vars$q
10094
10193
  });
10095
10194
 
10096
- const vars$o = LogoClass.cssVarList;
10195
+ const vars$p = LogoClass.cssVarList;
10097
10196
 
10098
10197
  const logo$2 = {
10099
- [vars$o.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
10198
+ [vars$p.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
10100
10199
  };
10101
10200
 
10102
10201
  var logo$3 = /*#__PURE__*/Object.freeze({
10103
10202
  __proto__: null,
10104
10203
  default: logo$2,
10105
- vars: vars$o
10204
+ vars: vars$p
10106
10205
  });
10107
10206
 
10108
- const vars$n = TotpImageClass.cssVarList;
10207
+ const vars$o = TotpImageClass.cssVarList;
10109
10208
 
10110
10209
  const logo$1 = {
10111
- [vars$n.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
10210
+ [vars$o.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
10112
10211
  };
10113
10212
 
10114
10213
  var totpImage = /*#__PURE__*/Object.freeze({
10115
10214
  __proto__: null,
10116
10215
  default: logo$1,
10117
- vars: vars$n
10216
+ vars: vars$o
10118
10217
  });
10119
10218
 
10120
- const vars$m = NotpImageClass.cssVarList;
10219
+ const vars$n = NotpImageClass.cssVarList;
10121
10220
 
10122
10221
  const logo = {
10123
- [vars$m.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
10222
+ [vars$n.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
10124
10223
  };
10125
10224
 
10126
10225
  var notpImage = /*#__PURE__*/Object.freeze({
10127
10226
  __proto__: null,
10128
10227
  default: logo,
10129
- vars: vars$m
10228
+ vars: vars$n
10130
10229
  });
10131
10230
 
10132
- const globalRefs$d = getThemeRefs(globals);
10133
- const vars$l = TextClass.cssVarList;
10231
+ const globalRefs$e = getThemeRefs(globals);
10232
+ const vars$m = TextClass.cssVarList;
10134
10233
 
10135
10234
  const text = {
10136
- [vars$l.hostDirection]: globalRefs$d.direction,
10137
- [vars$l.textLineHeight]: '1.35em',
10138
- [vars$l.textAlign]: 'left',
10139
- [vars$l.textColor]: globalRefs$d.colors.surface.dark,
10235
+ [vars$m.hostDirection]: globalRefs$e.direction,
10236
+ [vars$m.textLineHeight]: '1.35em',
10237
+ [vars$m.textAlign]: 'left',
10238
+ [vars$m.textColor]: globalRefs$e.colors.surface.dark,
10140
10239
  variant: {
10141
10240
  h1: {
10142
- [vars$l.fontSize]: globalRefs$d.typography.h1.size,
10143
- [vars$l.fontWeight]: globalRefs$d.typography.h1.weight,
10144
- [vars$l.fontFamily]: globalRefs$d.typography.h1.font,
10241
+ [vars$m.fontSize]: globalRefs$e.typography.h1.size,
10242
+ [vars$m.fontWeight]: globalRefs$e.typography.h1.weight,
10243
+ [vars$m.fontFamily]: globalRefs$e.typography.h1.font,
10145
10244
  },
10146
10245
  h2: {
10147
- [vars$l.fontSize]: globalRefs$d.typography.h2.size,
10148
- [vars$l.fontWeight]: globalRefs$d.typography.h2.weight,
10149
- [vars$l.fontFamily]: globalRefs$d.typography.h2.font,
10246
+ [vars$m.fontSize]: globalRefs$e.typography.h2.size,
10247
+ [vars$m.fontWeight]: globalRefs$e.typography.h2.weight,
10248
+ [vars$m.fontFamily]: globalRefs$e.typography.h2.font,
10150
10249
  },
10151
10250
  h3: {
10152
- [vars$l.fontSize]: globalRefs$d.typography.h3.size,
10153
- [vars$l.fontWeight]: globalRefs$d.typography.h3.weight,
10154
- [vars$l.fontFamily]: globalRefs$d.typography.h3.font,
10251
+ [vars$m.fontSize]: globalRefs$e.typography.h3.size,
10252
+ [vars$m.fontWeight]: globalRefs$e.typography.h3.weight,
10253
+ [vars$m.fontFamily]: globalRefs$e.typography.h3.font,
10155
10254
  },
10156
10255
  subtitle1: {
10157
- [vars$l.fontSize]: globalRefs$d.typography.subtitle1.size,
10158
- [vars$l.fontWeight]: globalRefs$d.typography.subtitle1.weight,
10159
- [vars$l.fontFamily]: globalRefs$d.typography.subtitle1.font,
10256
+ [vars$m.fontSize]: globalRefs$e.typography.subtitle1.size,
10257
+ [vars$m.fontWeight]: globalRefs$e.typography.subtitle1.weight,
10258
+ [vars$m.fontFamily]: globalRefs$e.typography.subtitle1.font,
10160
10259
  },
10161
10260
  subtitle2: {
10162
- [vars$l.fontSize]: globalRefs$d.typography.subtitle2.size,
10163
- [vars$l.fontWeight]: globalRefs$d.typography.subtitle2.weight,
10164
- [vars$l.fontFamily]: globalRefs$d.typography.subtitle2.font,
10261
+ [vars$m.fontSize]: globalRefs$e.typography.subtitle2.size,
10262
+ [vars$m.fontWeight]: globalRefs$e.typography.subtitle2.weight,
10263
+ [vars$m.fontFamily]: globalRefs$e.typography.subtitle2.font,
10165
10264
  },
10166
10265
  body1: {
10167
- [vars$l.fontSize]: globalRefs$d.typography.body1.size,
10168
- [vars$l.fontWeight]: globalRefs$d.typography.body1.weight,
10169
- [vars$l.fontFamily]: globalRefs$d.typography.body1.font,
10266
+ [vars$m.fontSize]: globalRefs$e.typography.body1.size,
10267
+ [vars$m.fontWeight]: globalRefs$e.typography.body1.weight,
10268
+ [vars$m.fontFamily]: globalRefs$e.typography.body1.font,
10170
10269
  },
10171
10270
  body2: {
10172
- [vars$l.fontSize]: globalRefs$d.typography.body2.size,
10173
- [vars$l.fontWeight]: globalRefs$d.typography.body2.weight,
10174
- [vars$l.fontFamily]: globalRefs$d.typography.body2.font,
10271
+ [vars$m.fontSize]: globalRefs$e.typography.body2.size,
10272
+ [vars$m.fontWeight]: globalRefs$e.typography.body2.weight,
10273
+ [vars$m.fontFamily]: globalRefs$e.typography.body2.font,
10175
10274
  },
10176
10275
  },
10177
10276
 
10178
10277
  mode: {
10179
10278
  primary: {
10180
- [vars$l.textColor]: globalRefs$d.colors.surface.contrast,
10279
+ [vars$m.textColor]: globalRefs$e.colors.surface.contrast,
10181
10280
  },
10182
10281
  secondary: {
10183
- [vars$l.textColor]: globalRefs$d.colors.surface.dark,
10282
+ [vars$m.textColor]: globalRefs$e.colors.surface.dark,
10184
10283
  },
10185
10284
  error: {
10186
- [vars$l.textColor]: globalRefs$d.colors.error.main,
10285
+ [vars$m.textColor]: globalRefs$e.colors.error.main,
10187
10286
  },
10188
10287
  success: {
10189
- [vars$l.textColor]: globalRefs$d.colors.success.main,
10288
+ [vars$m.textColor]: globalRefs$e.colors.success.main,
10190
10289
  },
10191
10290
  },
10192
10291
 
10193
10292
  textAlign: {
10194
- right: { [vars$l.textAlign]: 'right' },
10195
- left: { [vars$l.textAlign]: 'left' },
10196
- center: { [vars$l.textAlign]: 'center' },
10293
+ right: { [vars$m.textAlign]: 'right' },
10294
+ left: { [vars$m.textAlign]: 'left' },
10295
+ center: { [vars$m.textAlign]: 'center' },
10197
10296
  },
10198
10297
 
10199
10298
  _fullWidth: {
10200
- [vars$l.hostWidth]: '100%',
10299
+ [vars$m.hostWidth]: '100%',
10201
10300
  },
10202
10301
 
10203
10302
  _italic: {
10204
- [vars$l.fontStyle]: 'italic',
10303
+ [vars$m.fontStyle]: 'italic',
10205
10304
  },
10206
10305
 
10207
10306
  _uppercase: {
10208
- [vars$l.textTransform]: 'uppercase',
10307
+ [vars$m.textTransform]: 'uppercase',
10209
10308
  },
10210
10309
 
10211
10310
  _lowercase: {
10212
- [vars$l.textTransform]: 'lowercase',
10311
+ [vars$m.textTransform]: 'lowercase',
10213
10312
  },
10214
10313
  };
10215
10314
 
10216
10315
  var text$1 = /*#__PURE__*/Object.freeze({
10217
10316
  __proto__: null,
10218
10317
  default: text,
10219
- vars: vars$l
10318
+ vars: vars$m
10220
10319
  });
10221
10320
 
10222
- const globalRefs$c = getThemeRefs(globals);
10223
- const vars$k = LinkClass.cssVarList;
10321
+ const globalRefs$d = getThemeRefs(globals);
10322
+ const vars$l = LinkClass.cssVarList;
10224
10323
 
10225
10324
  const link = {
10226
- [vars$k.hostDirection]: globalRefs$c.direction,
10227
- [vars$k.cursor]: 'pointer',
10325
+ [vars$l.hostDirection]: globalRefs$d.direction,
10326
+ [vars$l.cursor]: 'pointer',
10228
10327
 
10229
- [vars$k.textColor]: globalRefs$c.colors.primary.main,
10328
+ [vars$l.textColor]: globalRefs$d.colors.primary.main,
10230
10329
 
10231
10330
  textAlign: {
10232
- right: { [vars$k.textAlign]: 'right' },
10233
- left: { [vars$k.textAlign]: 'left' },
10234
- center: { [vars$k.textAlign]: 'center' },
10331
+ right: { [vars$l.textAlign]: 'right' },
10332
+ left: { [vars$l.textAlign]: 'left' },
10333
+ center: { [vars$l.textAlign]: 'center' },
10235
10334
  },
10236
10335
 
10237
10336
  _fullWidth: {
10238
- [vars$k.hostWidth]: '100%',
10337
+ [vars$l.hostWidth]: '100%',
10239
10338
  },
10240
10339
 
10241
10340
  mode: {
10242
10341
  primary: {
10243
- [vars$k.textColor]: globalRefs$c.colors.primary.main,
10342
+ [vars$l.textColor]: globalRefs$d.colors.primary.main,
10244
10343
  },
10245
10344
  secondary: {
10246
- [vars$k.textColor]: globalRefs$c.colors.secondary.main,
10345
+ [vars$l.textColor]: globalRefs$d.colors.secondary.main,
10247
10346
  },
10248
10347
  error: {
10249
- [vars$k.textColor]: globalRefs$c.colors.error.main,
10348
+ [vars$l.textColor]: globalRefs$d.colors.error.main,
10250
10349
  },
10251
10350
  success: {
10252
- [vars$k.textColor]: globalRefs$c.colors.success.main,
10351
+ [vars$l.textColor]: globalRefs$d.colors.success.main,
10253
10352
  },
10254
10353
  },
10255
10354
  };
@@ -10257,269 +10356,305 @@ const link = {
10257
10356
  var link$1 = /*#__PURE__*/Object.freeze({
10258
10357
  __proto__: null,
10259
10358
  default: link,
10260
- vars: vars$k
10359
+ vars: vars$l
10261
10360
  });
10262
10361
 
10263
- const globalRefs$b = getThemeRefs(globals);
10264
- const compVars$2 = DividerClass.cssVarList;
10362
+ const globalRefs$c = getThemeRefs(globals);
10363
+ const compVars$3 = DividerClass.cssVarList;
10265
10364
 
10266
10365
  const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
10267
10366
  {
10268
10367
  thickness: '2px',
10269
10368
  spacing: '10px',
10270
10369
  },
10271
- componentName$D
10370
+ componentName$E
10272
10371
  );
10273
10372
 
10274
10373
  const divider = {
10275
10374
  ...helperTheme$1,
10276
10375
 
10277
- [compVars$2.hostDirection]: globalRefs$b.direction,
10278
- [compVars$2.alignItems]: 'center',
10279
- [compVars$2.flexDirection]: 'row',
10280
- [compVars$2.alignSelf]: 'stretch',
10281
- [compVars$2.hostWidth]: '100%',
10282
- [compVars$2.stripeColor]: globalRefs$b.colors.surface.light,
10283
- [compVars$2.stripeColorOpacity]: '0.5',
10284
- [compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
10285
- [compVars$2.labelTextWidth]: 'fit-content',
10286
- [compVars$2.labelTextMaxWidth]: 'calc(100% - 100px)',
10287
- [compVars$2.labelTextHorizontalSpacing]: helperRefs$1.spacing,
10288
- [compVars$2.textAlign]: 'center',
10376
+ [compVars$3.hostDirection]: globalRefs$c.direction,
10377
+ [compVars$3.alignItems]: 'center',
10378
+ [compVars$3.flexDirection]: 'row',
10379
+ [compVars$3.alignSelf]: 'stretch',
10380
+ [compVars$3.hostWidth]: '100%',
10381
+ [compVars$3.stripeColor]: globalRefs$c.colors.surface.light,
10382
+ [compVars$3.stripeColorOpacity]: '0.5',
10383
+ [compVars$3.stripeHorizontalThickness]: helperRefs$1.thickness,
10384
+ [compVars$3.labelTextWidth]: 'fit-content',
10385
+ [compVars$3.labelTextMaxWidth]: 'calc(100% - 100px)',
10386
+ [compVars$3.labelTextHorizontalSpacing]: helperRefs$1.spacing,
10387
+ [compVars$3.textAlign]: 'center',
10289
10388
 
10290
10389
  _vertical: {
10291
- [compVars$2.minHeight]: '200px',
10292
- [compVars$2.flexDirection]: 'column',
10293
- [compVars$2.hostWidth]: 'fit-content',
10294
- [compVars$2.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
10295
- [compVars$2.stripeVerticalThickness]: helperRefs$1.thickness,
10296
- [compVars$2.labelTextWidth]: 'fit-content',
10297
- [compVars$2.labelTextMaxWidth]: '100%',
10298
- [compVars$2.labelTextVerticalSpacing]: helperRefs$1.spacing,
10390
+ [compVars$3.minHeight]: '200px',
10391
+ [compVars$3.flexDirection]: 'column',
10392
+ [compVars$3.hostWidth]: 'fit-content',
10393
+ [compVars$3.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
10394
+ [compVars$3.stripeVerticalThickness]: helperRefs$1.thickness,
10395
+ [compVars$3.labelTextWidth]: 'fit-content',
10396
+ [compVars$3.labelTextMaxWidth]: '100%',
10397
+ [compVars$3.labelTextVerticalSpacing]: helperRefs$1.spacing,
10299
10398
  },
10300
10399
  };
10301
10400
 
10302
- const vars$j = {
10303
- ...compVars$2,
10401
+ const vars$k = {
10402
+ ...compVars$3,
10304
10403
  ...helperVars$1,
10305
10404
  };
10306
10405
 
10307
10406
  var divider$1 = /*#__PURE__*/Object.freeze({
10308
10407
  __proto__: null,
10309
10408
  default: divider,
10310
- vars: vars$j
10409
+ vars: vars$k
10311
10410
  });
10312
10411
 
10313
- const vars$i = PasscodeClass.cssVarList;
10412
+ const vars$j = PasscodeClass.cssVarList;
10314
10413
 
10315
10414
  const passcode = {
10316
- [vars$i.hostDirection]: refs.direction,
10317
- [vars$i.fontFamily]: refs.fontFamily,
10318
- [vars$i.fontSize]: refs.fontSize,
10319
- [vars$i.labelTextColor]: refs.labelTextColor,
10320
- [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
10321
- [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
10322
- [vars$i.digitValueTextColor]: refs.valueTextColor,
10323
- [vars$i.digitPadding]: '0',
10324
- [vars$i.digitTextAlign]: 'center',
10325
- [vars$i.digitSpacing]: '4px',
10326
- [vars$i.hostWidth]: refs.width,
10327
- [vars$i.digitOutlineColor]: 'transparent',
10328
- [vars$i.digitOutlineWidth]: refs.outlineWidth,
10329
- [vars$i.focusedDigitFieldOutlineColor]: refs.outlineColor,
10330
- [vars$i.digitSize]: refs.inputHeight,
10415
+ [vars$j.hostDirection]: refs.direction,
10416
+ [vars$j.fontFamily]: refs.fontFamily,
10417
+ [vars$j.fontSize]: refs.fontSize,
10418
+ [vars$j.labelTextColor]: refs.labelTextColor,
10419
+ [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
10420
+ [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
10421
+ [vars$j.digitValueTextColor]: refs.valueTextColor,
10422
+ [vars$j.digitPadding]: '0',
10423
+ [vars$j.digitTextAlign]: 'center',
10424
+ [vars$j.digitSpacing]: '4px',
10425
+ [vars$j.hostWidth]: refs.width,
10426
+ [vars$j.digitOutlineColor]: 'transparent',
10427
+ [vars$j.digitOutlineWidth]: refs.outlineWidth,
10428
+ [vars$j.focusedDigitFieldOutlineColor]: refs.outlineColor,
10429
+ [vars$j.digitSize]: refs.inputHeight,
10331
10430
 
10332
10431
  size: {
10333
- xs: { [vars$i.spinnerSize]: '15px' },
10334
- sm: { [vars$i.spinnerSize]: '20px' },
10335
- md: { [vars$i.spinnerSize]: '20px' },
10336
- lg: { [vars$i.spinnerSize]: '20px' },
10432
+ xs: { [vars$j.spinnerSize]: '15px' },
10433
+ sm: { [vars$j.spinnerSize]: '20px' },
10434
+ md: { [vars$j.spinnerSize]: '20px' },
10435
+ lg: { [vars$j.spinnerSize]: '20px' },
10337
10436
  },
10338
10437
 
10339
10438
  _hideCursor: {
10340
- [vars$i.digitCaretTextColor]: 'transparent',
10439
+ [vars$j.digitCaretTextColor]: 'transparent',
10341
10440
  },
10342
10441
 
10343
10442
  _loading: {
10344
- [vars$i.overlayOpacity]: refs.overlayOpacity,
10443
+ [vars$j.overlayOpacity]: refs.overlayOpacity,
10345
10444
  },
10346
10445
  };
10347
10446
 
10348
10447
  var passcode$1 = /*#__PURE__*/Object.freeze({
10349
10448
  __proto__: null,
10350
10449
  default: passcode,
10351
- vars: vars$i
10450
+ vars: vars$j
10352
10451
  });
10353
10452
 
10354
- const globalRefs$a = getThemeRefs(globals);
10355
- const vars$h = LoaderLinearClass.cssVarList;
10453
+ const globalRefs$b = getThemeRefs(globals);
10454
+ const vars$i = LoaderLinearClass.cssVarList;
10356
10455
 
10357
10456
  const loaderLinear = {
10358
- [vars$h.hostDisplay]: 'inline-block',
10359
- [vars$h.hostWidth]: '100%',
10457
+ [vars$i.hostDisplay]: 'inline-block',
10458
+ [vars$i.hostWidth]: '100%',
10360
10459
 
10361
- [vars$h.barColor]: globalRefs$a.colors.surface.contrast,
10362
- [vars$h.barWidth]: '20%',
10460
+ [vars$i.barColor]: globalRefs$b.colors.surface.contrast,
10461
+ [vars$i.barWidth]: '20%',
10363
10462
 
10364
- [vars$h.barBackgroundColor]: globalRefs$a.colors.surface.light,
10365
- [vars$h.barBorderRadius]: '4px',
10463
+ [vars$i.barBackgroundColor]: globalRefs$b.colors.surface.light,
10464
+ [vars$i.barBorderRadius]: '4px',
10366
10465
 
10367
- [vars$h.animationDuration]: '2s',
10368
- [vars$h.animationTimingFunction]: 'linear',
10369
- [vars$h.animationIterationCount]: 'infinite',
10370
- [vars$h.verticalPadding]: '0.25em',
10466
+ [vars$i.animationDuration]: '2s',
10467
+ [vars$i.animationTimingFunction]: 'linear',
10468
+ [vars$i.animationIterationCount]: 'infinite',
10469
+ [vars$i.verticalPadding]: '0.25em',
10371
10470
 
10372
10471
  size: {
10373
- xs: { [vars$h.barHeight]: '2px' },
10374
- sm: { [vars$h.barHeight]: '4px' },
10375
- md: { [vars$h.barHeight]: '6px' },
10376
- lg: { [vars$h.barHeight]: '8px' },
10472
+ xs: { [vars$i.barHeight]: '2px' },
10473
+ sm: { [vars$i.barHeight]: '4px' },
10474
+ md: { [vars$i.barHeight]: '6px' },
10475
+ lg: { [vars$i.barHeight]: '8px' },
10377
10476
  },
10378
10477
 
10379
10478
  mode: {
10380
10479
  primary: {
10381
- [vars$h.barColor]: globalRefs$a.colors.primary.main,
10480
+ [vars$i.barColor]: globalRefs$b.colors.primary.main,
10382
10481
  },
10383
10482
  secondary: {
10384
- [vars$h.barColor]: globalRefs$a.colors.secondary.main,
10483
+ [vars$i.barColor]: globalRefs$b.colors.secondary.main,
10385
10484
  },
10386
10485
  },
10387
10486
 
10388
10487
  _hidden: {
10389
- [vars$h.hostDisplay]: 'none',
10488
+ [vars$i.hostDisplay]: 'none',
10390
10489
  },
10391
10490
  };
10392
10491
 
10393
10492
  var loaderLinear$1 = /*#__PURE__*/Object.freeze({
10394
10493
  __proto__: null,
10395
10494
  default: loaderLinear,
10396
- vars: vars$h
10495
+ vars: vars$i
10397
10496
  });
10398
10497
 
10399
- const globalRefs$9 = getThemeRefs(globals);
10400
- const compVars$1 = LoaderRadialClass.cssVarList;
10498
+ const globalRefs$a = getThemeRefs(globals);
10499
+ const compVars$2 = LoaderRadialClass.cssVarList;
10401
10500
 
10402
10501
  const [helperTheme, helperRefs, helperVars] = createHelperVars(
10403
10502
  {
10404
- spinnerColor: globalRefs$9.colors.surface.contrast,
10503
+ spinnerColor: globalRefs$a.colors.surface.contrast,
10405
10504
  mode: {
10406
10505
  primary: {
10407
- spinnerColor: globalRefs$9.colors.primary.main,
10506
+ spinnerColor: globalRefs$a.colors.primary.main,
10408
10507
  },
10409
10508
  secondary: {
10410
- spinnerColor: globalRefs$9.colors.secondary.main,
10509
+ spinnerColor: globalRefs$a.colors.secondary.main,
10411
10510
  },
10412
10511
  },
10413
10512
  },
10414
- componentName$G
10513
+ componentName$H
10415
10514
  );
10416
10515
 
10417
10516
  const loaderRadial = {
10418
10517
  ...helperTheme,
10419
10518
 
10420
- [compVars$1.animationDuration]: '2s',
10421
- [compVars$1.animationTimingFunction]: 'linear',
10422
- [compVars$1.animationIterationCount]: 'infinite',
10423
- [compVars$1.spinnerBorderStyle]: 'solid',
10424
- [compVars$1.spinnerBorderWidth]: '0.2em',
10425
- [compVars$1.spinnerBorderRadius]: '50%',
10426
- [compVars$1.spinnerQuadrant1Color]: helperRefs.spinnerColor,
10427
- [compVars$1.spinnerQuadrant2Color]: 'transparent',
10428
- [compVars$1.spinnerQuadrant3Color]: helperRefs.spinnerColor,
10429
- [compVars$1.spinnerQuadrant4Color]: 'transparent',
10519
+ [compVars$2.animationDuration]: '2s',
10520
+ [compVars$2.animationTimingFunction]: 'linear',
10521
+ [compVars$2.animationIterationCount]: 'infinite',
10522
+ [compVars$2.spinnerBorderStyle]: 'solid',
10523
+ [compVars$2.spinnerBorderWidth]: '0.2em',
10524
+ [compVars$2.spinnerBorderRadius]: '50%',
10525
+ [compVars$2.spinnerQuadrant1Color]: helperRefs.spinnerColor,
10526
+ [compVars$2.spinnerQuadrant2Color]: 'transparent',
10527
+ [compVars$2.spinnerQuadrant3Color]: helperRefs.spinnerColor,
10528
+ [compVars$2.spinnerQuadrant4Color]: 'transparent',
10430
10529
 
10431
10530
  size: {
10432
- xs: { [compVars$1.spinnerSize]: '20px' },
10433
- sm: { [compVars$1.spinnerSize]: '30px' },
10434
- md: { [compVars$1.spinnerSize]: '40px' },
10435
- lg: { [compVars$1.spinnerSize]: '60px' },
10436
- xl: { [compVars$1.spinnerSize]: '80px' },
10531
+ xs: { [compVars$2.spinnerSize]: '20px' },
10532
+ sm: { [compVars$2.spinnerSize]: '30px' },
10533
+ md: { [compVars$2.spinnerSize]: '40px' },
10534
+ lg: { [compVars$2.spinnerSize]: '60px' },
10535
+ xl: { [compVars$2.spinnerSize]: '80px' },
10437
10536
  },
10438
10537
 
10439
10538
  _hidden: {
10440
- [compVars$1.hostDisplay]: 'none',
10539
+ [compVars$2.hostDisplay]: 'none',
10441
10540
  },
10442
10541
  };
10443
- const vars$g = {
10444
- ...compVars$1,
10542
+ const vars$h = {
10543
+ ...compVars$2,
10445
10544
  ...helperVars,
10446
10545
  };
10447
10546
 
10448
10547
  var loaderRadial$1 = /*#__PURE__*/Object.freeze({
10449
10548
  __proto__: null,
10450
10549
  default: loaderRadial,
10451
- vars: vars$g
10550
+ vars: vars$h
10452
10551
  });
10453
10552
 
10454
- const globalRefs$8 = getThemeRefs(globals);
10455
- const vars$f = ComboBoxClass.cssVarList;
10553
+ const globalRefs$9 = getThemeRefs(globals);
10554
+ const vars$g = ComboBoxClass.cssVarList;
10456
10555
 
10457
10556
  const comboBox = {
10458
- [vars$f.hostWidth]: refs.width,
10459
- [vars$f.hostDirection]: refs.direction,
10460
- [vars$f.fontSize]: refs.fontSize,
10461
- [vars$f.fontFamily]: refs.fontFamily,
10462
- [vars$f.labelTextColor]: refs.labelTextColor,
10463
- [vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
10464
- [vars$f.inputBorderColor]: refs.borderColor,
10465
- [vars$f.inputBorderWidth]: refs.borderWidth,
10466
- [vars$f.inputBorderStyle]: refs.borderStyle,
10467
- [vars$f.inputBorderRadius]: refs.borderRadius,
10468
- [vars$f.inputOutlineColor]: refs.outlineColor,
10469
- [vars$f.inputOutlineOffset]: refs.outlineOffset,
10470
- [vars$f.inputOutlineWidth]: refs.outlineWidth,
10471
- [vars$f.inputOutlineStyle]: refs.outlineStyle,
10472
- [vars$f.labelRequiredIndicator]: refs.requiredIndicator,
10473
- [vars$f.inputValueTextColor]: refs.valueTextColor,
10474
- [vars$f.inputPlaceholderTextColor]: refs.placeholderTextColor,
10475
- [vars$f.inputBackgroundColor]: refs.backgroundColor,
10476
- [vars$f.inputHorizontalPadding]: refs.horizontalPadding,
10477
- [vars$f.inputHeight]: refs.inputHeight,
10478
- [vars$f.inputDropdownButtonColor]: globalRefs$8.colors.surface.dark,
10479
- [vars$f.inputDropdownButtonCursor]: 'pointer',
10480
- [vars$f.inputDropdownButtonSize]: refs.toggleButtonSize,
10481
- [vars$f.inputDropdownButtonOffset]: globalRefs$8.spacing.xs,
10482
- [vars$f.overlayItemPaddingInlineStart]: globalRefs$8.spacing.xs,
10483
- [vars$f.overlayItemPaddingInlineEnd]: globalRefs$8.spacing.lg,
10557
+ [vars$g.hostWidth]: refs.width,
10558
+ [vars$g.hostDirection]: refs.direction,
10559
+ [vars$g.fontSize]: refs.fontSize,
10560
+ [vars$g.fontFamily]: refs.fontFamily,
10561
+ [vars$g.labelTextColor]: refs.labelTextColor,
10562
+ [vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
10563
+ [vars$g.inputBorderColor]: refs.borderColor,
10564
+ [vars$g.inputBorderWidth]: refs.borderWidth,
10565
+ [vars$g.inputBorderStyle]: refs.borderStyle,
10566
+ [vars$g.inputBorderRadius]: refs.borderRadius,
10567
+ [vars$g.inputOutlineColor]: refs.outlineColor,
10568
+ [vars$g.inputOutlineOffset]: refs.outlineOffset,
10569
+ [vars$g.inputOutlineWidth]: refs.outlineWidth,
10570
+ [vars$g.inputOutlineStyle]: refs.outlineStyle,
10571
+ [vars$g.labelRequiredIndicator]: refs.requiredIndicator,
10572
+ [vars$g.inputValueTextColor]: refs.valueTextColor,
10573
+ [vars$g.inputPlaceholderTextColor]: refs.placeholderTextColor,
10574
+ [vars$g.inputBackgroundColor]: refs.backgroundColor,
10575
+ [vars$g.inputHorizontalPadding]: refs.horizontalPadding,
10576
+ [vars$g.inputHeight]: refs.inputHeight,
10577
+ [vars$g.inputDropdownButtonColor]: globalRefs$9.colors.surface.dark,
10578
+ [vars$g.inputDropdownButtonCursor]: 'pointer',
10579
+ [vars$g.inputDropdownButtonSize]: refs.toggleButtonSize,
10580
+ [vars$g.inputDropdownButtonOffset]: globalRefs$9.spacing.xs,
10581
+ [vars$g.overlayItemPaddingInlineStart]: globalRefs$9.spacing.xs,
10582
+ [vars$g.overlayItemPaddingInlineEnd]: globalRefs$9.spacing.lg,
10484
10583
 
10485
10584
  _readonly: {
10486
- [vars$f.inputDropdownButtonCursor]: 'default',
10585
+ [vars$g.inputDropdownButtonCursor]: 'default',
10487
10586
  },
10488
10587
 
10489
10588
  // Overlay theme exposed via the component:
10490
- [vars$f.overlayFontSize]: refs.fontSize,
10491
- [vars$f.overlayFontFamily]: refs.fontFamily,
10492
- [vars$f.overlayCursor]: 'pointer',
10493
- [vars$f.overlayItemBoxShadow]: 'none',
10494
- [vars$f.overlayBackground]: refs.backgroundColor,
10495
- [vars$f.overlayTextColor]: refs.valueTextColor,
10589
+ [vars$g.overlayFontSize]: refs.fontSize,
10590
+ [vars$g.overlayFontFamily]: refs.fontFamily,
10591
+ [vars$g.overlayCursor]: 'pointer',
10592
+ [vars$g.overlayItemBoxShadow]: 'none',
10593
+ [vars$g.overlayBackground]: refs.backgroundColor,
10594
+ [vars$g.overlayTextColor]: refs.valueTextColor,
10496
10595
 
10497
10596
  // Overlay direct theme:
10498
- [vars$f.overlay.minHeight]: '400px',
10499
- [vars$f.overlay.margin]: '0',
10597
+ [vars$g.overlay.minHeight]: '400px',
10598
+ [vars$g.overlay.margin]: '0',
10500
10599
  };
10501
10600
 
10502
10601
  var comboBox$1 = /*#__PURE__*/Object.freeze({
10503
10602
  __proto__: null,
10504
10603
  comboBox: comboBox,
10505
10604
  default: comboBox,
10506
- vars: vars$f
10605
+ vars: vars$g
10507
10606
  });
10508
10607
 
10509
- const vars$e = ImageClass.cssVarList;
10608
+ const vars$f = ImageClass.cssVarList;
10510
10609
 
10511
10610
  const image = {};
10512
10611
 
10513
10612
  var image$1 = /*#__PURE__*/Object.freeze({
10514
10613
  __proto__: null,
10515
10614
  default: image,
10516
- vars: vars$e
10615
+ vars: vars$f
10517
10616
  });
10518
10617
 
10519
- const vars$d = PhoneFieldClass.cssVarList;
10618
+ const vars$e = PhoneFieldClass.cssVarList;
10520
10619
 
10521
10620
  const phoneField = {
10522
- [vars$d.hostWidth]: refs.width,
10621
+ [vars$e.hostWidth]: refs.width,
10622
+ [vars$e.hostDirection]: refs.direction,
10623
+ [vars$e.fontSize]: refs.fontSize,
10624
+ [vars$e.fontFamily]: refs.fontFamily,
10625
+ [vars$e.labelTextColor]: refs.labelTextColor,
10626
+ [vars$e.labelRequiredIndicator]: refs.requiredIndicator,
10627
+ [vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
10628
+ [vars$e.inputValueTextColor]: refs.valueTextColor,
10629
+ [vars$e.inputPlaceholderTextColor]: refs.placeholderTextColor,
10630
+ [vars$e.inputBorderStyle]: refs.borderStyle,
10631
+ [vars$e.inputBorderWidth]: refs.borderWidth,
10632
+ [vars$e.inputBorderColor]: refs.borderColor,
10633
+ [vars$e.inputBorderRadius]: refs.borderRadius,
10634
+ [vars$e.inputOutlineStyle]: refs.outlineStyle,
10635
+ [vars$e.inputOutlineWidth]: refs.outlineWidth,
10636
+ [vars$e.inputOutlineColor]: refs.outlineColor,
10637
+ [vars$e.inputOutlineOffset]: refs.outlineOffset,
10638
+ [vars$e.phoneInputWidth]: refs.minWidth,
10639
+ [vars$e.countryCodeInputWidth]: '5em',
10640
+ [vars$e.countryCodeDropdownWidth]: '20em',
10641
+
10642
+ // '@overlay': {
10643
+ // overlayItemBackgroundColor: 'red'
10644
+ // }
10645
+ };
10646
+
10647
+ var phoneField$1 = /*#__PURE__*/Object.freeze({
10648
+ __proto__: null,
10649
+ default: phoneField,
10650
+ vars: vars$e
10651
+ });
10652
+
10653
+ const vars$d = PhoneFieldInputBoxClass.cssVarList;
10654
+
10655
+ const phoneInputBoxField = {
10656
+ [vars$d.hostWidth]: '16em',
10657
+ [vars$d.hostMinWidth]: refs.minWidth,
10523
10658
  [vars$d.hostDirection]: refs.direction,
10524
10659
  [vars$d.fontSize]: refs.fontSize,
10525
10660
  [vars$d.fontFamily]: refs.fontFamily,
@@ -10536,180 +10671,144 @@ const phoneField = {
10536
10671
  [vars$d.inputOutlineWidth]: refs.outlineWidth,
10537
10672
  [vars$d.inputOutlineColor]: refs.outlineColor,
10538
10673
  [vars$d.inputOutlineOffset]: refs.outlineOffset,
10539
- [vars$d.phoneInputWidth]: refs.minWidth,
10540
- [vars$d.countryCodeInputWidth]: '5em',
10541
- [vars$d.countryCodeDropdownWidth]: '20em',
10542
-
10543
- // '@overlay': {
10544
- // overlayItemBackgroundColor: 'red'
10545
- // }
10674
+ _fullWidth: {
10675
+ [vars$d.hostWidth]: refs.width,
10676
+ },
10546
10677
  };
10547
10678
 
10548
- var phoneField$1 = /*#__PURE__*/Object.freeze({
10679
+ var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
10549
10680
  __proto__: null,
10550
- default: phoneField,
10681
+ default: phoneInputBoxField,
10551
10682
  vars: vars$d
10552
10683
  });
10553
10684
 
10554
- const vars$c = PhoneFieldInputBoxClass.cssVarList;
10685
+ const vars$c = NewPasswordClass.cssVarList;
10555
10686
 
10556
- const phoneInputBoxField = {
10557
- [vars$c.hostWidth]: '16em',
10687
+ const newPassword = {
10688
+ [vars$c.hostWidth]: refs.width,
10558
10689
  [vars$c.hostMinWidth]: refs.minWidth,
10559
10690
  [vars$c.hostDirection]: refs.direction,
10560
10691
  [vars$c.fontSize]: refs.fontSize,
10561
10692
  [vars$c.fontFamily]: refs.fontFamily,
10562
- [vars$c.labelTextColor]: refs.labelTextColor,
10563
- [vars$c.labelRequiredIndicator]: refs.requiredIndicator,
10693
+ [vars$c.spaceBetweenInputs]: '1em',
10564
10694
  [vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
10565
- [vars$c.inputValueTextColor]: refs.valueTextColor,
10566
- [vars$c.inputPlaceholderTextColor]: refs.placeholderTextColor,
10567
- [vars$c.inputBorderStyle]: refs.borderStyle,
10568
- [vars$c.inputBorderWidth]: refs.borderWidth,
10569
- [vars$c.inputBorderColor]: refs.borderColor,
10570
- [vars$c.inputBorderRadius]: refs.borderRadius,
10571
- [vars$c.inputOutlineStyle]: refs.outlineStyle,
10572
- [vars$c.inputOutlineWidth]: refs.outlineWidth,
10573
- [vars$c.inputOutlineColor]: refs.outlineColor,
10574
- [vars$c.inputOutlineOffset]: refs.outlineOffset,
10575
- _fullWidth: {
10576
- [vars$c.hostWidth]: refs.width,
10577
- },
10578
- };
10579
-
10580
- var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
10581
- __proto__: null,
10582
- default: phoneInputBoxField,
10583
- vars: vars$c
10584
- });
10585
-
10586
- const vars$b = NewPasswordClass.cssVarList;
10587
-
10588
- const newPassword = {
10589
- [vars$b.hostWidth]: refs.width,
10590
- [vars$b.hostMinWidth]: refs.minWidth,
10591
- [vars$b.hostDirection]: refs.direction,
10592
- [vars$b.fontSize]: refs.fontSize,
10593
- [vars$b.fontFamily]: refs.fontFamily,
10594
- [vars$b.spaceBetweenInputs]: '1em',
10595
- [vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
10596
10695
 
10597
10696
  _required: {
10598
10697
  // NewPassword doesn't pass `required` attribute to its Password components.
10599
10698
  // That's why we fake the required indicator on each input.
10600
10699
  // We do that by injecting `::after` element, and populating it with requiredIndicator content.
10601
- [vars$b.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
10700
+ [vars$c.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
10602
10701
  },
10603
10702
  };
10604
10703
 
10605
10704
  var newPassword$1 = /*#__PURE__*/Object.freeze({
10606
10705
  __proto__: null,
10607
10706
  default: newPassword,
10608
- vars: vars$b
10707
+ vars: vars$c
10609
10708
  });
10610
10709
 
10611
- const vars$a = UploadFileClass.cssVarList;
10710
+ const vars$b = UploadFileClass.cssVarList;
10612
10711
 
10613
10712
  const uploadFile = {
10614
- [vars$a.hostDirection]: refs.direction,
10615
- [vars$a.labelTextColor]: refs.labelTextColor,
10616
- [vars$a.fontFamily]: refs.fontFamily,
10713
+ [vars$b.hostDirection]: refs.direction,
10714
+ [vars$b.labelTextColor]: refs.labelTextColor,
10715
+ [vars$b.fontFamily]: refs.fontFamily,
10617
10716
 
10618
- [vars$a.iconSize]: '2em',
10717
+ [vars$b.iconSize]: '2em',
10619
10718
 
10620
- [vars$a.hostPadding]: '0.75em',
10621
- [vars$a.gap]: '0.5em',
10719
+ [vars$b.hostPadding]: '0.75em',
10720
+ [vars$b.gap]: '0.5em',
10622
10721
 
10623
- [vars$a.fontSize]: '16px',
10624
- [vars$a.titleFontWeight]: '500',
10625
- [vars$a.lineHeight]: '1em',
10722
+ [vars$b.fontSize]: '16px',
10723
+ [vars$b.titleFontWeight]: '500',
10724
+ [vars$b.lineHeight]: '1em',
10626
10725
 
10627
- [vars$a.borderWidth]: refs.borderWidth,
10628
- [vars$a.borderColor]: refs.borderColor,
10629
- [vars$a.borderRadius]: refs.borderRadius,
10630
- [vars$a.borderStyle]: 'dashed',
10726
+ [vars$b.borderWidth]: refs.borderWidth,
10727
+ [vars$b.borderColor]: refs.borderColor,
10728
+ [vars$b.borderRadius]: refs.borderRadius,
10729
+ [vars$b.borderStyle]: 'dashed',
10631
10730
 
10632
10731
  _required: {
10633
- [vars$a.requiredIndicator]: refs.requiredIndicator,
10732
+ [vars$b.requiredIndicator]: refs.requiredIndicator,
10634
10733
  },
10635
10734
 
10636
10735
  size: {
10637
10736
  xs: {
10638
- [vars$a.hostHeight]: '196px',
10639
- [vars$a.hostWidth]: '200px',
10640
- [vars$a.titleFontSize]: '0.875em',
10641
- [vars$a.descriptionFontSize]: '0.875em',
10642
- [vars$a.lineHeight]: '1.25em',
10737
+ [vars$b.hostHeight]: '196px',
10738
+ [vars$b.hostWidth]: '200px',
10739
+ [vars$b.titleFontSize]: '0.875em',
10740
+ [vars$b.descriptionFontSize]: '0.875em',
10741
+ [vars$b.lineHeight]: '1.25em',
10643
10742
  },
10644
10743
  sm: {
10645
- [vars$a.hostHeight]: '216px',
10646
- [vars$a.hostWidth]: '230px',
10647
- [vars$a.titleFontSize]: '1em',
10648
- [vars$a.descriptionFontSize]: '0.875em',
10649
- [vars$a.lineHeight]: '1.25em',
10744
+ [vars$b.hostHeight]: '216px',
10745
+ [vars$b.hostWidth]: '230px',
10746
+ [vars$b.titleFontSize]: '1em',
10747
+ [vars$b.descriptionFontSize]: '0.875em',
10748
+ [vars$b.lineHeight]: '1.25em',
10650
10749
  },
10651
10750
  md: {
10652
- [vars$a.hostHeight]: '256px',
10653
- [vars$a.hostWidth]: '312px',
10654
- [vars$a.titleFontSize]: '1.125em',
10655
- [vars$a.descriptionFontSize]: '1em',
10656
- [vars$a.lineHeight]: '1.5em',
10751
+ [vars$b.hostHeight]: '256px',
10752
+ [vars$b.hostWidth]: '312px',
10753
+ [vars$b.titleFontSize]: '1.125em',
10754
+ [vars$b.descriptionFontSize]: '1em',
10755
+ [vars$b.lineHeight]: '1.5em',
10657
10756
  },
10658
10757
  lg: {
10659
- [vars$a.hostHeight]: '280px',
10660
- [vars$a.hostWidth]: '336px',
10661
- [vars$a.titleFontSize]: '1.125em',
10662
- [vars$a.descriptionFontSize]: '1.125em',
10663
- [vars$a.lineHeight]: '1.75em',
10758
+ [vars$b.hostHeight]: '280px',
10759
+ [vars$b.hostWidth]: '336px',
10760
+ [vars$b.titleFontSize]: '1.125em',
10761
+ [vars$b.descriptionFontSize]: '1.125em',
10762
+ [vars$b.lineHeight]: '1.75em',
10664
10763
  },
10665
10764
  },
10666
10765
 
10667
10766
  _fullWidth: {
10668
- [vars$a.hostWidth]: refs.width,
10767
+ [vars$b.hostWidth]: refs.width,
10669
10768
  },
10670
10769
  };
10671
10770
 
10672
10771
  var uploadFile$1 = /*#__PURE__*/Object.freeze({
10673
10772
  __proto__: null,
10674
10773
  default: uploadFile,
10675
- vars: vars$a
10774
+ vars: vars$b
10676
10775
  });
10677
10776
 
10678
- const globalRefs$7 = getThemeRefs(globals);
10777
+ const globalRefs$8 = getThemeRefs(globals);
10679
10778
 
10680
- const vars$9 = ButtonSelectionGroupItemClass.cssVarList;
10779
+ const vars$a = ButtonSelectionGroupItemClass.cssVarList;
10681
10780
 
10682
10781
  const buttonSelectionGroupItem = {
10683
- [vars$9.hostDirection]: 'inherit',
10684
- [vars$9.backgroundColor]: globalRefs$7.colors.surface.main,
10685
- [vars$9.labelTextColor]: globalRefs$7.colors.surface.contrast,
10686
- [vars$9.borderColor]: globalRefs$7.colors.surface.light,
10687
- [vars$9.borderStyle]: 'solid',
10688
- [vars$9.borderRadius]: globalRefs$7.radius.sm,
10689
- [vars$9.outlineColor]: 'transparent',
10782
+ [vars$a.hostDirection]: 'inherit',
10783
+ [vars$a.backgroundColor]: globalRefs$8.colors.surface.main,
10784
+ [vars$a.labelTextColor]: globalRefs$8.colors.surface.contrast,
10785
+ [vars$a.borderColor]: globalRefs$8.colors.surface.light,
10786
+ [vars$a.borderStyle]: 'solid',
10787
+ [vars$a.borderRadius]: globalRefs$8.radius.sm,
10788
+ [vars$a.outlineColor]: 'transparent',
10690
10789
 
10691
10790
  _hover: {
10692
- [vars$9.backgroundColor]: globalRefs$7.colors.surface.highlight,
10791
+ [vars$a.backgroundColor]: globalRefs$8.colors.surface.highlight,
10693
10792
  },
10694
10793
 
10695
10794
  _focused: {
10696
- [vars$9.outlineColor]: globalRefs$7.colors.surface.light,
10795
+ [vars$a.outlineColor]: globalRefs$8.colors.surface.light,
10697
10796
  },
10698
10797
 
10699
10798
  _selected: {
10700
- [vars$9.borderColor]: globalRefs$7.colors.surface.contrast,
10701
- [vars$9.backgroundColor]: globalRefs$7.colors.surface.contrast,
10702
- [vars$9.labelTextColor]: globalRefs$7.colors.surface.main,
10799
+ [vars$a.borderColor]: globalRefs$8.colors.surface.contrast,
10800
+ [vars$a.backgroundColor]: globalRefs$8.colors.surface.contrast,
10801
+ [vars$a.labelTextColor]: globalRefs$8.colors.surface.main,
10703
10802
  },
10704
10803
  };
10705
10804
 
10706
10805
  var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
10707
10806
  __proto__: null,
10708
10807
  default: buttonSelectionGroupItem,
10709
- vars: vars$9
10808
+ vars: vars$a
10710
10809
  });
10711
10810
 
10712
- const globalRefs$6 = getThemeRefs(globals);
10811
+ const globalRefs$7 = getThemeRefs(globals);
10713
10812
 
10714
10813
  const createBaseButtonSelectionGroupMappings = (vars) => ({
10715
10814
  [vars.hostDirection]: refs.direction,
@@ -10717,84 +10816,84 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
10717
10816
  [vars.labelTextColor]: refs.labelTextColor,
10718
10817
  [vars.labelRequiredIndicator]: refs.requiredIndicator,
10719
10818
  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
10720
- [vars.itemsSpacing]: globalRefs$6.spacing.sm,
10819
+ [vars.itemsSpacing]: globalRefs$7.spacing.sm,
10721
10820
  [vars.hostWidth]: refs.width,
10722
10821
  });
10723
10822
 
10724
- const vars$8 = ButtonSelectionGroupClass.cssVarList;
10823
+ const vars$9 = ButtonSelectionGroupClass.cssVarList;
10725
10824
 
10726
10825
  const buttonSelectionGroup = {
10727
- ...createBaseButtonSelectionGroupMappings(vars$8),
10826
+ ...createBaseButtonSelectionGroupMappings(vars$9),
10728
10827
  };
10729
10828
 
10730
10829
  var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
10731
10830
  __proto__: null,
10732
10831
  default: buttonSelectionGroup,
10733
- vars: vars$8
10832
+ vars: vars$9
10734
10833
  });
10735
10834
 
10736
- const vars$7 = ButtonMultiSelectionGroupClass.cssVarList;
10835
+ const vars$8 = ButtonMultiSelectionGroupClass.cssVarList;
10737
10836
 
10738
10837
  const buttonMultiSelectionGroup = {
10739
- ...createBaseButtonSelectionGroupMappings(vars$7),
10838
+ ...createBaseButtonSelectionGroupMappings(vars$8),
10740
10839
  };
10741
10840
 
10742
10841
  var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
10743
10842
  __proto__: null,
10744
10843
  default: buttonMultiSelectionGroup,
10745
- vars: vars$7
10844
+ vars: vars$8
10746
10845
  });
10747
10846
 
10748
- const globalRefs$5 = getThemeRefs(globals);
10847
+ const globalRefs$6 = getThemeRefs(globals);
10749
10848
 
10750
- const compVars = ModalClass.cssVarList;
10849
+ const compVars$1 = ModalClass.cssVarList;
10751
10850
 
10752
10851
  const modal = {
10753
- [compVars.overlayBackgroundColor]: globalRefs$5.colors.surface.main,
10754
- [compVars.overlayShadow]: globalRefs$5.shadow.wide['2xl'],
10755
- [compVars.overlayWidth]: '540px',
10852
+ [compVars$1.overlayBackgroundColor]: globalRefs$6.colors.surface.main,
10853
+ [compVars$1.overlayShadow]: globalRefs$6.shadow.wide['2xl'],
10854
+ [compVars$1.overlayWidth]: '540px',
10756
10855
  };
10757
10856
 
10758
- const vars$6 = {
10759
- ...compVars,
10857
+ const vars$7 = {
10858
+ ...compVars$1,
10760
10859
  };
10761
10860
 
10762
10861
  var modal$1 = /*#__PURE__*/Object.freeze({
10763
10862
  __proto__: null,
10764
10863
  default: modal,
10765
- vars: vars$6
10864
+ vars: vars$7
10766
10865
  });
10767
10866
 
10768
- const globalRefs$4 = getThemeRefs(globals);
10769
- const vars$5 = GridClass.cssVarList;
10867
+ const globalRefs$5 = getThemeRefs(globals);
10868
+ const vars$6 = GridClass.cssVarList;
10770
10869
 
10771
10870
  const grid = {
10772
- [vars$5.hostWidth]: '100%',
10773
- [vars$5.hostHeight]: '100%',
10774
- [vars$5.hostMinHeight]: '400px',
10775
- [vars$5.fontWeight]: '400',
10776
- [vars$5.backgroundColor]: globalRefs$4.colors.surface.main,
10871
+ [vars$6.hostWidth]: '100%',
10872
+ [vars$6.hostHeight]: '100%',
10873
+ [vars$6.hostMinHeight]: '400px',
10874
+ [vars$6.fontWeight]: '400',
10875
+ [vars$6.backgroundColor]: globalRefs$5.colors.surface.main,
10777
10876
 
10778
- [vars$5.fontSize]: refs.fontSize,
10779
- [vars$5.fontFamily]: refs.fontFamily,
10877
+ [vars$6.fontSize]: refs.fontSize,
10878
+ [vars$6.fontFamily]: refs.fontFamily,
10780
10879
 
10781
- [vars$5.sortIndicatorsColor]: globalRefs$4.colors.surface.light,
10782
- [vars$5.activeSortIndicator]: globalRefs$4.colors.surface.dark,
10783
- [vars$5.resizeHandleColor]: globalRefs$4.colors.surface.light,
10880
+ [vars$6.sortIndicatorsColor]: globalRefs$5.colors.surface.light,
10881
+ [vars$6.activeSortIndicator]: globalRefs$5.colors.surface.dark,
10882
+ [vars$6.resizeHandleColor]: globalRefs$5.colors.surface.light,
10784
10883
 
10785
- [vars$5.borderWidth]: refs.borderWidth,
10786
- [vars$5.borderStyle]: refs.borderStyle,
10787
- [vars$5.borderRadius]: refs.borderRadius,
10788
- [vars$5.borderColor]: 'transparent',
10884
+ [vars$6.borderWidth]: refs.borderWidth,
10885
+ [vars$6.borderStyle]: refs.borderStyle,
10886
+ [vars$6.borderRadius]: refs.borderRadius,
10887
+ [vars$6.borderColor]: 'transparent',
10789
10888
 
10790
- [vars$5.headerRowTextColor]: globalRefs$4.colors.surface.dark,
10791
- [vars$5.separatorColor]: globalRefs$4.colors.surface.light,
10889
+ [vars$6.headerRowTextColor]: globalRefs$5.colors.surface.dark,
10890
+ [vars$6.separatorColor]: globalRefs$5.colors.surface.light,
10792
10891
 
10793
- [vars$5.valueTextColor]: globalRefs$4.colors.surface.contrast,
10794
- [vars$5.selectedBackgroundColor]: globalRefs$4.colors.surface.highlight,
10892
+ [vars$6.valueTextColor]: globalRefs$5.colors.surface.contrast,
10893
+ [vars$6.selectedBackgroundColor]: globalRefs$5.colors.surface.highlight,
10795
10894
 
10796
10895
  _bordered: {
10797
- [vars$5.borderColor]: refs.borderColor,
10896
+ [vars$6.borderColor]: refs.borderColor,
10798
10897
  },
10799
10898
  };
10800
10899
 
@@ -10802,53 +10901,53 @@ var grid$1 = /*#__PURE__*/Object.freeze({
10802
10901
  __proto__: null,
10803
10902
  default: grid,
10804
10903
  grid: grid,
10805
- vars: vars$5
10904
+ vars: vars$6
10806
10905
  });
10807
10906
 
10808
- const globalRefs$3 = getThemeRefs(globals);
10809
- const vars$4 = NotificationCardClass.cssVarList;
10907
+ const globalRefs$4 = getThemeRefs(globals);
10908
+ const vars$5 = NotificationCardClass.cssVarList;
10810
10909
 
10811
10910
  const shadowColor = '#00000020';
10812
10911
 
10813
10912
  const notification = {
10814
- [vars$4.hostMinWidth]: '415px',
10815
- [vars$4.fontFamily]: globalRefs$3.fonts.font1.family,
10816
- [vars$4.fontSize]: globalRefs$3.typography.body1.size,
10817
- [vars$4.backgroundColor]: globalRefs$3.colors.surface.main,
10818
- [vars$4.textColor]: globalRefs$3.colors.surface.contrast,
10819
- [vars$4.boxShadow]: `${globalRefs$3.shadow.wide.xl} ${shadowColor}, ${globalRefs$3.shadow.narrow.xl} ${shadowColor}`,
10820
- [vars$4.verticalPadding]: '0.625em',
10821
- [vars$4.horizontalPadding]: '1.5em',
10822
- [vars$4.borderRadius]: globalRefs$3.radius.xs,
10913
+ [vars$5.hostMinWidth]: '415px',
10914
+ [vars$5.fontFamily]: globalRefs$4.fonts.font1.family,
10915
+ [vars$5.fontSize]: globalRefs$4.typography.body1.size,
10916
+ [vars$5.backgroundColor]: globalRefs$4.colors.surface.main,
10917
+ [vars$5.textColor]: globalRefs$4.colors.surface.contrast,
10918
+ [vars$5.boxShadow]: `${globalRefs$4.shadow.wide.xl} ${shadowColor}, ${globalRefs$4.shadow.narrow.xl} ${shadowColor}`,
10919
+ [vars$5.verticalPadding]: '0.625em',
10920
+ [vars$5.horizontalPadding]: '1.5em',
10921
+ [vars$5.borderRadius]: globalRefs$4.radius.xs,
10823
10922
 
10824
10923
  _bordered: {
10825
- [vars$4.borderWidth]: globalRefs$3.border.sm,
10826
- [vars$4.borderStyle]: 'solid',
10827
- [vars$4.borderColor]: 'transparent',
10924
+ [vars$5.borderWidth]: globalRefs$4.border.sm,
10925
+ [vars$5.borderStyle]: 'solid',
10926
+ [vars$5.borderColor]: 'transparent',
10828
10927
  },
10829
10928
 
10830
10929
  size: {
10831
- xs: { [vars$4.fontSize]: '12px' },
10832
- sm: { [vars$4.fontSize]: '14px' },
10833
- md: { [vars$4.fontSize]: '16px' },
10834
- lg: { [vars$4.fontSize]: '18px' },
10930
+ xs: { [vars$5.fontSize]: '12px' },
10931
+ sm: { [vars$5.fontSize]: '14px' },
10932
+ md: { [vars$5.fontSize]: '16px' },
10933
+ lg: { [vars$5.fontSize]: '18px' },
10835
10934
  },
10836
10935
 
10837
10936
  mode: {
10838
10937
  primary: {
10839
- [vars$4.backgroundColor]: globalRefs$3.colors.primary.main,
10840
- [vars$4.textColor]: globalRefs$3.colors.primary.contrast,
10841
- [vars$4.borderColor]: globalRefs$3.colors.primary.light,
10938
+ [vars$5.backgroundColor]: globalRefs$4.colors.primary.main,
10939
+ [vars$5.textColor]: globalRefs$4.colors.primary.contrast,
10940
+ [vars$5.borderColor]: globalRefs$4.colors.primary.light,
10842
10941
  },
10843
10942
  success: {
10844
- [vars$4.backgroundColor]: globalRefs$3.colors.success.main,
10845
- [vars$4.textColor]: globalRefs$3.colors.success.contrast,
10846
- [vars$4.borderColor]: globalRefs$3.colors.success.light,
10943
+ [vars$5.backgroundColor]: globalRefs$4.colors.success.main,
10944
+ [vars$5.textColor]: globalRefs$4.colors.success.contrast,
10945
+ [vars$5.borderColor]: globalRefs$4.colors.success.light,
10847
10946
  },
10848
10947
  error: {
10849
- [vars$4.backgroundColor]: globalRefs$3.colors.error.main,
10850
- [vars$4.textColor]: globalRefs$3.colors.error.contrast,
10851
- [vars$4.borderColor]: globalRefs$3.colors.error.light,
10948
+ [vars$5.backgroundColor]: globalRefs$4.colors.error.main,
10949
+ [vars$5.textColor]: globalRefs$4.colors.error.contrast,
10950
+ [vars$5.borderColor]: globalRefs$4.colors.error.light,
10852
10951
  },
10853
10952
  },
10854
10953
  };
@@ -10856,128 +10955,128 @@ const notification = {
10856
10955
  var notificationCard = /*#__PURE__*/Object.freeze({
10857
10956
  __proto__: null,
10858
10957
  default: notification,
10859
- vars: vars$4
10958
+ vars: vars$5
10860
10959
  });
10861
10960
 
10862
- const globalRefs$2 = getThemeRefs(globals);
10863
- const vars$3 = MultiSelectComboBoxClass.cssVarList;
10961
+ const globalRefs$3 = getThemeRefs(globals);
10962
+ const vars$4 = MultiSelectComboBoxClass.cssVarList;
10864
10963
 
10865
10964
  const multiSelectComboBox = {
10866
- [vars$3.hostWidth]: refs.width,
10867
- [vars$3.hostDirection]: refs.direction,
10868
- [vars$3.fontSize]: refs.fontSize,
10869
- [vars$3.fontFamily]: refs.fontFamily,
10870
- [vars$3.labelTextColor]: refs.labelTextColor,
10871
- [vars$3.errorMessageTextColor]: refs.errorMessageTextColor,
10872
- [vars$3.inputBorderColor]: refs.borderColor,
10873
- [vars$3.inputBorderWidth]: refs.borderWidth,
10874
- [vars$3.inputBorderStyle]: refs.borderStyle,
10875
- [vars$3.inputBorderRadius]: refs.borderRadius,
10876
- [vars$3.inputOutlineColor]: refs.outlineColor,
10877
- [vars$3.inputOutlineOffset]: refs.outlineOffset,
10878
- [vars$3.inputOutlineWidth]: refs.outlineWidth,
10879
- [vars$3.inputOutlineStyle]: refs.outlineStyle,
10880
- [vars$3.labelRequiredIndicator]: refs.requiredIndicator,
10881
- [vars$3.inputValueTextColor]: refs.valueTextColor,
10882
- [vars$3.inputPlaceholderTextColor]: refs.placeholderTextColor,
10883
- [vars$3.inputBackgroundColor]: refs.backgroundColor,
10884
- [vars$3.inputHorizontalPadding]: refs.horizontalPadding,
10885
- [vars$3.inputVerticalPadding]: refs.verticalPadding,
10886
- [vars$3.inputHeight]: refs.inputHeight,
10887
- [vars$3.inputDropdownButtonColor]: globalRefs$2.colors.surface.dark,
10888
- [vars$3.inputDropdownButtonCursor]: 'pointer',
10889
- [vars$3.inputDropdownButtonSize]: refs.toggleButtonSize,
10890
- [vars$3.inputDropdownButtonOffset]: globalRefs$2.spacing.xs,
10891
- [vars$3.overlayItemPaddingInlineStart]: globalRefs$2.spacing.xs,
10892
- [vars$3.overlayItemPaddingInlineEnd]: globalRefs$2.spacing.lg,
10893
- [vars$3.chipFontSize]: refs.chipFontSize,
10894
- [vars$3.chipTextColor]: globalRefs$2.colors.surface.contrast,
10895
- [vars$3.chipBackgroundColor]: globalRefs$2.colors.surface.light,
10965
+ [vars$4.hostWidth]: refs.width,
10966
+ [vars$4.hostDirection]: refs.direction,
10967
+ [vars$4.fontSize]: refs.fontSize,
10968
+ [vars$4.fontFamily]: refs.fontFamily,
10969
+ [vars$4.labelTextColor]: refs.labelTextColor,
10970
+ [vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
10971
+ [vars$4.inputBorderColor]: refs.borderColor,
10972
+ [vars$4.inputBorderWidth]: refs.borderWidth,
10973
+ [vars$4.inputBorderStyle]: refs.borderStyle,
10974
+ [vars$4.inputBorderRadius]: refs.borderRadius,
10975
+ [vars$4.inputOutlineColor]: refs.outlineColor,
10976
+ [vars$4.inputOutlineOffset]: refs.outlineOffset,
10977
+ [vars$4.inputOutlineWidth]: refs.outlineWidth,
10978
+ [vars$4.inputOutlineStyle]: refs.outlineStyle,
10979
+ [vars$4.labelRequiredIndicator]: refs.requiredIndicator,
10980
+ [vars$4.inputValueTextColor]: refs.valueTextColor,
10981
+ [vars$4.inputPlaceholderTextColor]: refs.placeholderTextColor,
10982
+ [vars$4.inputBackgroundColor]: refs.backgroundColor,
10983
+ [vars$4.inputHorizontalPadding]: refs.horizontalPadding,
10984
+ [vars$4.inputVerticalPadding]: refs.verticalPadding,
10985
+ [vars$4.inputHeight]: refs.inputHeight,
10986
+ [vars$4.inputDropdownButtonColor]: globalRefs$3.colors.surface.dark,
10987
+ [vars$4.inputDropdownButtonCursor]: 'pointer',
10988
+ [vars$4.inputDropdownButtonSize]: refs.toggleButtonSize,
10989
+ [vars$4.inputDropdownButtonOffset]: globalRefs$3.spacing.xs,
10990
+ [vars$4.overlayItemPaddingInlineStart]: globalRefs$3.spacing.xs,
10991
+ [vars$4.overlayItemPaddingInlineEnd]: globalRefs$3.spacing.lg,
10992
+ [vars$4.chipFontSize]: refs.chipFontSize,
10993
+ [vars$4.chipTextColor]: globalRefs$3.colors.surface.contrast,
10994
+ [vars$4.chipBackgroundColor]: globalRefs$3.colors.surface.light,
10896
10995
 
10897
10996
  _readonly: {
10898
- [vars$3.inputDropdownButtonCursor]: 'default',
10997
+ [vars$4.inputDropdownButtonCursor]: 'default',
10899
10998
  },
10900
10999
 
10901
11000
  // Overlay theme exposed via the component:
10902
- [vars$3.overlayFontSize]: refs.fontSize,
10903
- [vars$3.overlayFontFamily]: refs.fontFamily,
10904
- [vars$3.overlayCursor]: 'pointer',
10905
- [vars$3.overlayItemBoxShadow]: 'none',
10906
- [vars$3.overlayBackground]: refs.backgroundColor,
10907
- [vars$3.overlayTextColor]: refs.valueTextColor,
11001
+ [vars$4.overlayFontSize]: refs.fontSize,
11002
+ [vars$4.overlayFontFamily]: refs.fontFamily,
11003
+ [vars$4.overlayCursor]: 'pointer',
11004
+ [vars$4.overlayItemBoxShadow]: 'none',
11005
+ [vars$4.overlayBackground]: refs.backgroundColor,
11006
+ [vars$4.overlayTextColor]: refs.valueTextColor,
10908
11007
 
10909
11008
  // Overlay direct theme:
10910
- [vars$3.overlay.minHeight]: '400px',
10911
- [vars$3.overlay.margin]: '0',
11009
+ [vars$4.overlay.minHeight]: '400px',
11010
+ [vars$4.overlay.margin]: '0',
10912
11011
  };
10913
11012
 
10914
11013
  var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
10915
11014
  __proto__: null,
10916
11015
  default: multiSelectComboBox,
10917
11016
  multiSelectComboBox: multiSelectComboBox,
10918
- vars: vars$3
11017
+ vars: vars$4
10919
11018
  });
10920
11019
 
10921
- const globalRefs$1 = getThemeRefs(globals);
10922
- const vars$2 = BadgeClass.cssVarList;
11020
+ const globalRefs$2 = getThemeRefs(globals);
11021
+ const vars$3 = BadgeClass.cssVarList;
10923
11022
 
10924
11023
  const badge = {
10925
- [vars$2.hostWidth]: 'fit-content',
10926
- [vars$2.hostDirection]: globalRefs$1.direction,
11024
+ [vars$3.hostWidth]: 'fit-content',
11025
+ [vars$3.hostDirection]: globalRefs$2.direction,
10927
11026
 
10928
- [vars$2.textAlign]: 'center',
11027
+ [vars$3.textAlign]: 'center',
10929
11028
 
10930
- [vars$2.fontFamily]: globalRefs$1.fonts.font1.family,
10931
- [vars$2.fontWeight]: '400',
11029
+ [vars$3.fontFamily]: globalRefs$2.fonts.font1.family,
11030
+ [vars$3.fontWeight]: '400',
10932
11031
 
10933
- [vars$2.verticalPadding]: '0.25em',
10934
- [vars$2.horizontalPadding]: '0.5em',
11032
+ [vars$3.verticalPadding]: '0.25em',
11033
+ [vars$3.horizontalPadding]: '0.5em',
10935
11034
 
10936
- [vars$2.borderWidth]: globalRefs$1.border.xs,
10937
- [vars$2.borderRadius]: globalRefs$1.radius.xs,
10938
- [vars$2.borderColor]: 'transparent',
10939
- [vars$2.borderStyle]: 'solid',
11035
+ [vars$3.borderWidth]: globalRefs$2.border.xs,
11036
+ [vars$3.borderRadius]: globalRefs$2.radius.xs,
11037
+ [vars$3.borderColor]: 'transparent',
11038
+ [vars$3.borderStyle]: 'solid',
10940
11039
 
10941
11040
  _fullWidth: {
10942
- [vars$2.hostWidth]: '100%',
11041
+ [vars$3.hostWidth]: '100%',
10943
11042
  },
10944
11043
 
10945
11044
  size: {
10946
- xs: { [vars$2.fontSize]: '12px' },
10947
- sm: { [vars$2.fontSize]: '14px' },
10948
- md: { [vars$2.fontSize]: '16px' },
10949
- lg: { [vars$2.fontSize]: '18px' },
11045
+ xs: { [vars$3.fontSize]: '12px' },
11046
+ sm: { [vars$3.fontSize]: '14px' },
11047
+ md: { [vars$3.fontSize]: '16px' },
11048
+ lg: { [vars$3.fontSize]: '18px' },
10950
11049
  },
10951
11050
 
10952
11051
  mode: {
10953
11052
  default: {
10954
- [vars$2.textColor]: globalRefs$1.colors.surface.dark,
11053
+ [vars$3.textColor]: globalRefs$2.colors.surface.dark,
10955
11054
  _bordered: {
10956
- [vars$2.borderColor]: globalRefs$1.colors.surface.light,
11055
+ [vars$3.borderColor]: globalRefs$2.colors.surface.light,
10957
11056
  },
10958
11057
  },
10959
11058
  primary: {
10960
- [vars$2.textColor]: globalRefs$1.colors.primary.main,
11059
+ [vars$3.textColor]: globalRefs$2.colors.primary.main,
10961
11060
  _bordered: {
10962
- [vars$2.borderColor]: globalRefs$1.colors.primary.light,
11061
+ [vars$3.borderColor]: globalRefs$2.colors.primary.light,
10963
11062
  },
10964
11063
  },
10965
11064
  secondary: {
10966
- [vars$2.textColor]: globalRefs$1.colors.secondary.main,
11065
+ [vars$3.textColor]: globalRefs$2.colors.secondary.main,
10967
11066
  _bordered: {
10968
- [vars$2.borderColor]: globalRefs$1.colors.secondary.light,
11067
+ [vars$3.borderColor]: globalRefs$2.colors.secondary.light,
10969
11068
  },
10970
11069
  },
10971
11070
  error: {
10972
- [vars$2.textColor]: globalRefs$1.colors.error.main,
11071
+ [vars$3.textColor]: globalRefs$2.colors.error.main,
10973
11072
  _bordered: {
10974
- [vars$2.borderColor]: globalRefs$1.colors.error.light,
11073
+ [vars$3.borderColor]: globalRefs$2.colors.error.light,
10975
11074
  },
10976
11075
  },
10977
11076
  success: {
10978
- [vars$2.textColor]: globalRefs$1.colors.success.main,
11077
+ [vars$3.textColor]: globalRefs$2.colors.success.main,
10979
11078
  _bordered: {
10980
- [vars$2.borderColor]: globalRefs$1.colors.success.light,
11079
+ [vars$3.borderColor]: globalRefs$2.colors.success.light,
10981
11080
  },
10982
11081
  },
10983
11082
  },
@@ -10986,6 +11085,47 @@ const badge = {
10986
11085
  var badge$1 = /*#__PURE__*/Object.freeze({
10987
11086
  __proto__: null,
10988
11087
  default: badge,
11088
+ vars: vars$3
11089
+ });
11090
+
11091
+ const globalRefs$1 = getThemeRefs(globals);
11092
+ const compVars = AvatarClass.cssVarList;
11093
+
11094
+ const avatar = {
11095
+ [compVars.hostDirection]: globalRefs$1.direction,
11096
+ [compVars.editableIconColor]: globalRefs$1.colors.surface.dark,
11097
+ [compVars.editableBorderColor]: globalRefs$1.colors.surface.dark,
11098
+ [compVars.editableBackgroundColor]: globalRefs$1.colors.surface.main,
11099
+ [compVars.avatarTextColor]: globalRefs$1.colors.surface.main,
11100
+ [compVars.avatarBackgroundColor]: globalRefs$1.colors.surface.dark,
11101
+
11102
+ size: {
11103
+ xs: {
11104
+ [compVars.hostWidth]: '30px',
11105
+ [compVars.hostHeight]: '30px',
11106
+ },
11107
+ sm: {
11108
+ [compVars.hostWidth]: '40px',
11109
+ [compVars.hostHeight]: '40px',
11110
+ },
11111
+ md: {
11112
+ [compVars.hostWidth]: '60px',
11113
+ [compVars.hostHeight]: '60px',
11114
+ },
11115
+ lg: {
11116
+ [compVars.hostWidth]: '98px',
11117
+ [compVars.hostHeight]: '98px',
11118
+ },
11119
+ },
11120
+ };
11121
+
11122
+ const vars$2 = {
11123
+ ...compVars,
11124
+ };
11125
+
11126
+ var avatar$1 = /*#__PURE__*/Object.freeze({
11127
+ __proto__: null,
11128
+ default: avatar,
10989
11129
  vars: vars$2
10990
11130
  });
10991
11131
 
@@ -11048,6 +11188,7 @@ const components = {
11048
11188
  notificationCard,
11049
11189
  multiSelectComboBox: multiSelectComboBox$1,
11050
11190
  badge: badge$1,
11191
+ avatar: avatar$1,
11051
11192
  mappingsField: mappingsField$1,
11052
11193
  };
11053
11194
 
@@ -11061,7 +11202,7 @@ const vars = Object.keys(components).reduce(
11061
11202
  );
11062
11203
 
11063
11204
  const defaultTheme = { globals, components: theme };
11064
- const themeVars = { globals: vars$z, components: vars };
11205
+ const themeVars = { globals: vars$A, components: vars };
11065
11206
 
11066
11207
  const colors = {
11067
11208
  surface: {
@@ -11107,5 +11248,5 @@ const darkTheme = merge({}, defaultTheme, {
11107
11248
  },
11108
11249
  });
11109
11250
 
11110
- export { BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
11251
+ export { AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
11111
11252
  //# sourceMappingURL=index.esm.js.map