@descope/web-components-ui 1.0.177 → 1.0.179

Sign up to get free protection for your applications and to get access to all the features.
Files changed (39) hide show
  1. package/dist/cjs/index.cjs.js +1082 -687
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +1166 -772
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/1000.js +1 -1
  6. package/dist/umd/2481.js +1 -1
  7. package/dist/umd/descope-button-index-js.js +1 -1
  8. package/dist/umd/descope-combo-box-index-js.js +1 -1
  9. package/dist/umd/descope-date-picker-index-js.js +1 -1
  10. package/dist/umd/descope-email-field-index-js.js +1 -1
  11. package/dist/umd/descope-number-field-index-js.js +1 -1
  12. package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
  13. package/dist/umd/descope-passcode-index-js.js +1 -1
  14. package/dist/umd/descope-single-select-descope-select-item-index-js.js +1 -0
  15. package/dist/umd/descope-single-select-descope-single-select-internal-index-js.js +1 -0
  16. package/dist/umd/descope-single-select-index-js.js +1 -0
  17. package/dist/umd/descope-upload-file-index-js.js +1 -1
  18. package/dist/umd/index.js +1 -1
  19. package/package.json +4 -4
  20. package/src/components/descope-button/ButtonClass.js +1 -1
  21. package/src/components/descope-combo-box/ComboBoxClass.js +1 -1
  22. package/src/components/descope-date-picker/index.js +1 -1
  23. package/src/components/descope-email-field/EmailFieldClass.js +2 -2
  24. package/src/components/descope-number-field/NumberFieldClass.js +1 -1
  25. package/src/components/descope-passcode/PasscodeClass.js +1 -1
  26. package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +0 -4
  27. package/src/components/descope-password/PasswordClass.js +2 -2
  28. package/src/components/descope-single-select/SingleSelectClass.js +130 -0
  29. package/src/components/descope-single-select/descope-select-item/SelectItemClass.js +102 -0
  30. package/src/components/descope-single-select/descope-select-item/index.js +6 -0
  31. package/src/components/descope-single-select/descope-single-select-internal/SingleSelectInternalClass.js +137 -0
  32. package/src/components/descope-single-select/descope-single-select-internal/index.js +6 -0
  33. package/src/components/descope-single-select/index.js +6 -0
  34. package/src/index.cjs.js +3 -0
  35. package/src/index.js +2 -0
  36. package/src/mixins/createProxy.js +7 -2
  37. package/src/theme/components/index.js +4 -0
  38. package/src/theme/components/single-select/selectItem.js +27 -0
  39. package/src/theme/components/single-select/singleSelect.js +19 -0
package/dist/index.esm.js CHANGED
@@ -670,8 +670,13 @@ const createProxy = ({
670
670
  super().attachShadow({ mode: 'open', delegatesFocus: true }).innerHTML = `
671
671
  <style id="create-proxy">${isFunction(style) ? style() : style}</style>
672
672
  <${wrappedEleName}>
673
- <slot></slot>
674
- ${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join('')}
673
+ ${slots
674
+ .map(
675
+ (
676
+ slot // when slot is an empty string, we will create the default slot (without a name)
677
+ ) => `<slot ${slot ? `name="${slot}" slot="${slot}"` : ''} ></slot>`
678
+ )
679
+ .join('')}
675
680
  </${wrappedEleName}>
676
681
  `;
677
682
  }
@@ -1185,7 +1190,7 @@ const clickableMixin = (superclass) =>
1185
1190
  }
1186
1191
  };
1187
1192
 
1188
- const componentName$t = getComponentName('button');
1193
+ const componentName$w = getComponentName('button');
1189
1194
 
1190
1195
  const resetStyles = `
1191
1196
  :host {
@@ -1223,7 +1228,7 @@ const iconStyles = `
1223
1228
 
1224
1229
  const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
1225
1230
 
1226
- const { host: host$e, label: label$a } = {
1231
+ const { host: host$f, label: label$b } = {
1227
1232
  host: { selector: () => ':host' },
1228
1233
  label: { selector: '::part(label)' },
1229
1234
  };
@@ -1233,7 +1238,7 @@ let loadingIndicatorStyles;
1233
1238
  const ButtonClass = compose(
1234
1239
  createStyleMixin({
1235
1240
  mappings: {
1236
- hostWidth: { ...host$e, property: 'width' },
1241
+ hostWidth: { ...host$f, property: 'width' },
1237
1242
  hostHeight: { property: 'height' },
1238
1243
  fontSize: {},
1239
1244
  fontFamily: {},
@@ -1254,8 +1259,8 @@ const ButtonClass = compose(
1254
1259
  verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
1255
1260
 
1256
1261
  labelTextColor: { property: 'color' },
1257
- labelTextDecoration: { ...label$a, property: 'text-decoration' },
1258
- labelSpacing: { ...label$a, property: 'gap' },
1262
+ labelTextDecoration: { ...label$b, property: 'text-decoration' },
1263
+ labelSpacing: { ...label$b, property: 'gap' },
1259
1264
  },
1260
1265
  }),
1261
1266
  clickableMixin,
@@ -1263,7 +1268,7 @@ const ButtonClass = compose(
1263
1268
  componentNameValidationMixin
1264
1269
  )(
1265
1270
  createProxy({
1266
- slots: ['prefix', 'label', 'suffix'],
1271
+ slots: ['', 'prefix', 'label', 'suffix'],
1267
1272
  wrappedEleName: 'vaadin-button',
1268
1273
  style: () => `
1269
1274
  ${resetStyles}
@@ -1282,7 +1287,7 @@ const ButtonClass = compose(
1282
1287
  }
1283
1288
  `,
1284
1289
  excludeAttrsSync: ['tabindex'],
1285
- componentName: componentName$t,
1290
+ componentName: componentName$w,
1286
1291
  })
1287
1292
  );
1288
1293
 
@@ -1319,7 +1324,7 @@ loadingIndicatorStyles = `
1319
1324
  }
1320
1325
  `;
1321
1326
 
1322
- customElements.define(componentName$t, ButtonClass);
1327
+ customElements.define(componentName$w, ButtonClass);
1323
1328
 
1324
1329
  const createBaseInputClass = (...args) =>
1325
1330
  compose(
@@ -1329,11 +1334,11 @@ const createBaseInputClass = (...args) =>
1329
1334
  inputEventsDispatchingMixin
1330
1335
  )(createBaseClass(...args));
1331
1336
 
1332
- const componentName$s = getComponentName('boolean-field-internal');
1337
+ const componentName$v = getComponentName('boolean-field-internal');
1333
1338
 
1334
1339
  const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
1335
1340
 
1336
- const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$s, baseSelector: 'div' });
1341
+ const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$v, baseSelector: 'div' });
1337
1342
 
1338
1343
  class BooleanInputInternal extends BaseInputClass$5 {
1339
1344
  constructor() {
@@ -1393,14 +1398,14 @@ const booleanFieldMixin = (superclass) =>
1393
1398
 
1394
1399
  const template = document.createElement('template');
1395
1400
  template.innerHTML = `
1396
- <${componentName$s}
1401
+ <${componentName$v}
1397
1402
  tabindex="-1"
1398
1403
  slot="input"
1399
- ></${componentName$s}>
1404
+ ></${componentName$v}>
1400
1405
  `;
1401
1406
 
1402
1407
  this.baseElement.appendChild(template.content.cloneNode(true));
1403
- this.inputElement = this.shadowRoot.querySelector(componentName$s);
1408
+ this.inputElement = this.shadowRoot.querySelector(componentName$v);
1404
1409
  this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
1405
1410
 
1406
1411
  forwardAttrs(this, this.inputElement, {
@@ -1580,18 +1585,18 @@ vaadin-checkbox::part(checkbox) {
1580
1585
  }
1581
1586
  `;
1582
1587
 
1583
- const componentName$r = getComponentName('checkbox');
1588
+ const componentName$u = getComponentName('checkbox');
1584
1589
 
1585
1590
  const {
1586
- host: host$d,
1591
+ host: host$e,
1587
1592
  component: component$1,
1588
1593
  checkboxElement,
1589
1594
  checkboxSurface,
1590
1595
  checkboxHiddenLabel: checkboxHiddenLabel$1,
1591
- label: label$9,
1592
- requiredIndicator: requiredIndicator$9,
1596
+ label: label$a,
1597
+ requiredIndicator: requiredIndicator$a,
1593
1598
  helperText: helperText$8,
1594
- errorMessage: errorMessage$9,
1599
+ errorMessage: errorMessage$a,
1595
1600
  } = {
1596
1601
  host: { selector: () => ':host' },
1597
1602
  label: { selector: '::part(label)' },
@@ -1607,25 +1612,25 @@ const {
1607
1612
  const CheckboxClass = compose(
1608
1613
  createStyleMixin({
1609
1614
  mappings: {
1610
- hostWidth: { ...host$d, property: 'width' },
1615
+ hostWidth: { ...host$e, property: 'width' },
1611
1616
 
1612
- fontSize: [host$d, checkboxElement, label$9, checkboxHiddenLabel$1],
1613
- fontFamily: [label$9, checkboxHiddenLabel$1, helperText$8, errorMessage$9],
1617
+ fontSize: [host$e, checkboxElement, label$a, checkboxHiddenLabel$1],
1618
+ fontFamily: [label$a, checkboxHiddenLabel$1, helperText$8, errorMessage$a],
1614
1619
 
1615
1620
  labelTextColor: [
1616
- { ...label$9, property: 'color' },
1617
- { ...requiredIndicator$9, property: 'color' },
1618
- { ...label$9, property: '-webkit-text-fill-color' },
1621
+ { ...label$a, property: 'color' },
1622
+ { ...requiredIndicator$a, property: 'color' },
1623
+ { ...label$a, property: '-webkit-text-fill-color' },
1619
1624
  ],
1620
- labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
1621
- errorMessageTextColor: { ...errorMessage$9, property: 'color' },
1625
+ labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
1626
+ errorMessageTextColor: { ...errorMessage$a, property: 'color' },
1622
1627
 
1623
1628
  labelFontWeight: [
1624
- { ...label$9, property: 'font-weight' },
1629
+ { ...label$a, property: 'font-weight' },
1625
1630
  { ...checkboxHiddenLabel$1, property: 'font-weight' },
1626
1631
  ],
1627
1632
  labelSpacing: [
1628
- { ...label$9, property: 'left' },
1633
+ { ...label$a, property: 'left' },
1629
1634
  { ...checkboxHiddenLabel$1, property: 'padding-left' },
1630
1635
  ],
1631
1636
  inputValueTextColor: { ...checkboxSurface, property: 'color' },
@@ -1648,8 +1653,8 @@ const CheckboxClass = compose(
1648
1653
  { ...checkboxSurface, property: 'font-size' },
1649
1654
  { ...component$1, property: 'font-size' },
1650
1655
  { ...checkboxHiddenLabel$1, property: 'line-height' },
1651
- { ...label$9, property: 'margin-left' },
1652
- { ...label$9, property: 'line-height' },
1656
+ { ...label$a, property: 'margin-left' },
1657
+ { ...label$a, property: 'line-height' },
1653
1658
  ],
1654
1659
  },
1655
1660
  }),
@@ -1670,26 +1675,26 @@ const CheckboxClass = compose(
1670
1675
  ${useHostExternalPadding(CheckboxClass.cssVarList)}
1671
1676
  `,
1672
1677
  excludeAttrsSync: ['tabindex'],
1673
- componentName: componentName$r,
1678
+ componentName: componentName$u,
1674
1679
  })
1675
1680
  );
1676
1681
 
1677
- customElements.define(componentName$s, BooleanInputInternal);
1682
+ customElements.define(componentName$v, BooleanInputInternal);
1678
1683
 
1679
- customElements.define(componentName$r, CheckboxClass);
1684
+ customElements.define(componentName$u, CheckboxClass);
1680
1685
 
1681
- const componentName$q = getComponentName('switch-toggle');
1686
+ const componentName$t = getComponentName('switch-toggle');
1682
1687
 
1683
1688
  const {
1684
- host: host$c,
1689
+ host: host$d,
1685
1690
  component,
1686
1691
  checkboxElement: track,
1687
1692
  checkboxSurface: knob,
1688
1693
  checkboxHiddenLabel,
1689
- label: label$8,
1690
- requiredIndicator: requiredIndicator$8,
1694
+ label: label$9,
1695
+ requiredIndicator: requiredIndicator$9,
1691
1696
  helperText: helperText$7,
1692
- errorMessage: errorMessage$8,
1697
+ errorMessage: errorMessage$9,
1693
1698
  } = {
1694
1699
  host: { selector: () => ':host' },
1695
1700
  label: { selector: '::part(label)' },
@@ -1705,9 +1710,9 @@ const {
1705
1710
  const SwitchToggleClass = compose(
1706
1711
  createStyleMixin({
1707
1712
  mappings: {
1708
- hostWidth: { ...host$c, property: 'width' },
1709
- fontSize: [component, label$8, checkboxHiddenLabel],
1710
- fontFamily: [label$8, helperText$7, errorMessage$8],
1713
+ hostWidth: { ...host$d, property: 'width' },
1714
+ fontSize: [component, label$9, checkboxHiddenLabel],
1715
+ fontFamily: [label$9, helperText$7, errorMessage$9],
1711
1716
  trackBorderWidth: { ...track, property: 'border-width' },
1712
1717
  trackBorderStyle: { ...track, property: 'border-style' },
1713
1718
  trackBorderColor: { ...track, property: 'border-color' },
@@ -1731,24 +1736,24 @@ const SwitchToggleClass = compose(
1731
1736
  knobLeftOffset: { ...knob, property: 'left' },
1732
1737
 
1733
1738
  labelSpacing: [
1734
- { ...label$8, property: 'padding-left' },
1739
+ { ...label$9, property: 'padding-left' },
1735
1740
  { ...checkboxHiddenLabel, property: 'padding-left' },
1736
1741
  ],
1737
1742
  labelLineHeight: [
1738
- { ...label$8, property: 'line-height' },
1743
+ { ...label$9, property: 'line-height' },
1739
1744
  { ...checkboxHiddenLabel, property: 'line-height' },
1740
1745
  ],
1741
1746
  labelFontWeight: [
1742
- { ...label$8, property: 'font-weight' },
1747
+ { ...label$9, property: 'font-weight' },
1743
1748
  { ...checkboxHiddenLabel, property: 'font-weight' },
1744
1749
  ],
1745
1750
  labelTextColor: [
1746
- { ...label$8, property: 'color' },
1747
- { ...requiredIndicator$8, property: 'color' },
1748
- { ...label$8, property: '-webkit-text-fill-color' },
1751
+ { ...label$9, property: 'color' },
1752
+ { ...requiredIndicator$9, property: 'color' },
1753
+ { ...label$9, property: '-webkit-text-fill-color' },
1749
1754
  ],
1750
- labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
1751
- errorMessageTextColor: { ...errorMessage$8, property: 'color' },
1755
+ labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
1756
+ errorMessageTextColor: { ...errorMessage$9, property: 'color' },
1752
1757
  inputOutlineWidth: { ...track, property: 'outline-width' },
1753
1758
  inputOutlineOffset: { ...track, property: 'outline-offset' },
1754
1759
  inputOutlineColor: { ...track, property: 'outline-color' },
@@ -1781,17 +1786,17 @@ const SwitchToggleClass = compose(
1781
1786
  }
1782
1787
  `,
1783
1788
  excludeAttrsSync: ['tabindex'],
1784
- componentName: componentName$q,
1789
+ componentName: componentName$t,
1785
1790
  })
1786
1791
  );
1787
1792
 
1788
- customElements.define(componentName$q, SwitchToggleClass);
1793
+ customElements.define(componentName$t, SwitchToggleClass);
1789
1794
 
1790
- const componentName$p = getComponentName('loader-linear');
1795
+ const componentName$s = getComponentName('loader-linear');
1791
1796
 
1792
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > div' }) {
1797
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$s, baseSelector: ':host > div' }) {
1793
1798
  static get componentName() {
1794
- return componentName$p;
1799
+ return componentName$s;
1795
1800
  }
1796
1801
 
1797
1802
  constructor() {
@@ -1827,18 +1832,18 @@ const selectors$1 = {
1827
1832
  host: { selector: () => ':host' },
1828
1833
  };
1829
1834
 
1830
- const { after: after$1, host: host$b } = selectors$1;
1835
+ const { after: after$1, host: host$c } = selectors$1;
1831
1836
 
1832
1837
  const LoaderLinearClass = compose(
1833
1838
  createStyleMixin({
1834
1839
  mappings: {
1835
1840
  hostDisplay: {},
1836
- hostWidth: { ...host$b, property: 'width' },
1841
+ hostWidth: { ...host$c, property: 'width' },
1837
1842
  barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
1838
1843
  barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
1839
1844
  verticalPadding: [
1840
- { ...host$b, property: 'padding-top' },
1841
- { ...host$b, property: 'padding-bottom' },
1845
+ { ...host$c, property: 'padding-top' },
1846
+ { ...host$c, property: 'padding-bottom' },
1842
1847
  ],
1843
1848
  barBackgroundColor: { property: 'background-color' },
1844
1849
  barColor: { ...after$1, property: 'background-color' },
@@ -1852,11 +1857,11 @@ const LoaderLinearClass = compose(
1852
1857
  componentNameValidationMixin
1853
1858
  )(RawLoaderLinear);
1854
1859
 
1855
- customElements.define(componentName$p, LoaderLinearClass);
1860
+ customElements.define(componentName$s, LoaderLinearClass);
1856
1861
 
1857
- const componentName$o = getComponentName('loader-radial');
1862
+ const componentName$r = getComponentName('loader-radial');
1858
1863
 
1859
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > div' }) {
1864
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$r, baseSelector: ':host > div' }) {
1860
1865
  constructor() {
1861
1866
  super();
1862
1867
 
@@ -1900,11 +1905,11 @@ const LoaderRadialClass = compose(
1900
1905
  componentNameValidationMixin
1901
1906
  )(RawLoaderRadial);
1902
1907
 
1903
- customElements.define(componentName$o, LoaderRadialClass);
1908
+ customElements.define(componentName$r, LoaderRadialClass);
1904
1909
 
1905
- const componentName$n = getComponentName('container');
1910
+ const componentName$q = getComponentName('container');
1906
1911
 
1907
- class RawContainer extends createBaseClass({ componentName: componentName$n, baseSelector: ':host > slot' }) {
1912
+ class RawContainer extends createBaseClass({ componentName: componentName$q, baseSelector: ':host > slot' }) {
1908
1913
  constructor() {
1909
1914
  super();
1910
1915
 
@@ -1956,10 +1961,10 @@ const ContainerClass = compose(
1956
1961
  componentNameValidationMixin
1957
1962
  )(RawContainer);
1958
1963
 
1959
- customElements.define(componentName$n, ContainerClass);
1964
+ customElements.define(componentName$q, ContainerClass);
1960
1965
 
1961
- const componentName$m = getComponentName('divider');
1962
- class RawDivider extends createBaseClass({ componentName: componentName$m, baseSelector: ':host > div' }) {
1966
+ const componentName$p = getComponentName('divider');
1967
+ class RawDivider extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > div' }) {
1963
1968
  constructor() {
1964
1969
  super();
1965
1970
 
@@ -2004,7 +2009,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$m, baseS
2004
2009
  }
2005
2010
  }
2006
2011
 
2007
- const { host: host$a, before, after, text: text$3 } = {
2012
+ const { host: host$b, before, after, text: text$3 } = {
2008
2013
  host: { selector: () => ':host' },
2009
2014
  before: { selector: '::before' },
2010
2015
  after: { selector: '::after' },
@@ -2014,8 +2019,8 @@ const { host: host$a, before, after, text: text$3 } = {
2014
2019
  const DividerClass = compose(
2015
2020
  createStyleMixin({
2016
2021
  mappings: {
2017
- hostWidth: { ...host$a, property: 'width' },
2018
- hostPadding: { ...host$a, property: 'padding' },
2022
+ hostWidth: { ...host$b, property: 'width' },
2023
+ hostPadding: { ...host$b, property: 'padding' },
2019
2024
 
2020
2025
  minHeight: {},
2021
2026
  alignItems: {},
@@ -2055,9 +2060,9 @@ const DividerClass = compose(
2055
2060
  componentNameValidationMixin
2056
2061
  )(RawDivider);
2057
2062
 
2058
- const componentName$l = getComponentName('text');
2063
+ const componentName$o = getComponentName('text');
2059
2064
 
2060
- class RawText extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > slot' }) {
2065
+ class RawText extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > slot' }) {
2061
2066
  constructor() {
2062
2067
  super();
2063
2068
 
@@ -2099,11 +2104,11 @@ const TextClass = compose(
2099
2104
  componentNameValidationMixin
2100
2105
  )(RawText);
2101
2106
 
2102
- customElements.define(componentName$l, TextClass);
2107
+ customElements.define(componentName$o, TextClass);
2103
2108
 
2104
- customElements.define(componentName$m, DividerClass);
2109
+ customElements.define(componentName$p, DividerClass);
2105
2110
 
2106
- const { host: host$9, label: label$7, placeholder: placeholder$2, requiredIndicator: requiredIndicator$7, inputField: inputField$5, input, helperText: helperText$6, errorMessage: errorMessage$7 } =
2111
+ const { host: host$a, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$8, inputField: inputField$5, input, helperText: helperText$6, errorMessage: errorMessage$8 } =
2107
2112
  {
2108
2113
  host: { selector: () => ':host' },
2109
2114
  label: { selector: '::part(label)' },
@@ -2117,24 +2122,24 @@ const { host: host$9, label: label$7, placeholder: placeholder$2, requiredIndica
2117
2122
 
2118
2123
  var textFieldMappings = {
2119
2124
  // we apply font-size also on the host so we can set its width with em
2120
- fontSize: [{}, host$9],
2121
- fontFamily: [label$7, inputField$5, helperText$6, errorMessage$7],
2125
+ fontSize: [{}, host$a],
2126
+ fontFamily: [label$8, inputField$5, helperText$6, errorMessage$8],
2122
2127
 
2123
- hostWidth: { ...host$9, property: 'width' },
2124
- hostMinWidth: { ...host$9, property: 'min-width' },
2128
+ hostWidth: { ...host$a, property: 'width' },
2129
+ hostMinWidth: { ...host$a, property: 'min-width' },
2125
2130
 
2126
2131
  inputBackgroundColor: { ...inputField$5, property: 'background-color' },
2127
2132
 
2128
2133
  labelTextColor: [
2129
- { ...label$7, property: 'color' },
2130
- { ...requiredIndicator$7, property: 'color' },
2134
+ { ...label$8, property: 'color' },
2135
+ { ...requiredIndicator$8, property: 'color' },
2131
2136
  ],
2132
- errorMessageTextColor: { ...errorMessage$7, property: 'color' },
2137
+ errorMessageTextColor: { ...errorMessage$8, property: 'color' },
2133
2138
 
2134
2139
  inputValueTextColor: { ...inputField$5, property: 'color' },
2135
2140
  inputCaretTextColor: { ...input, property: 'color' },
2136
2141
 
2137
- labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
2142
+ labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
2138
2143
 
2139
2144
  inputBorderColor: { ...inputField$5, property: 'border-color' },
2140
2145
  inputBorderWidth: { ...inputField$5, property: 'border-width' },
@@ -2157,9 +2162,9 @@ var textFieldMappings = {
2157
2162
  inputPlaceholderColor: { ...placeholder$2, property: 'color' },
2158
2163
  };
2159
2164
 
2160
- const componentName$k = getComponentName('email-field');
2165
+ const componentName$n = getComponentName('email-field');
2161
2166
 
2162
- const customMixin$5 = (superclass) =>
2167
+ const customMixin$6 = (superclass) =>
2163
2168
  class EmailFieldMixinClass extends superclass {
2164
2169
  init() {
2165
2170
  super.init?.();
@@ -2173,10 +2178,10 @@ const EmailFieldClass = compose(
2173
2178
  draggableMixin,
2174
2179
  composedProxyInputMixin,
2175
2180
  componentNameValidationMixin,
2176
- customMixin$5
2181
+ customMixin$6
2177
2182
  )(
2178
2183
  createProxy({
2179
- slots: ['suffix'],
2184
+ slots: ['', 'suffix'],
2180
2185
  wrappedEleName: 'vaadin-email-field',
2181
2186
  style: () => `
2182
2187
  :host {
@@ -2187,18 +2192,18 @@ const EmailFieldClass = compose(
2187
2192
  }))
2188
2193
  }
2189
2194
  ${useHostExternalPadding(EmailFieldClass.cssVarList)}
2190
- ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
2195
+ ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
2191
2196
  `,
2192
2197
  excludeAttrsSync: ['tabindex'],
2193
- componentName: componentName$k,
2198
+ componentName: componentName$n,
2194
2199
  })
2195
2200
  );
2196
2201
 
2197
- customElements.define(componentName$k, EmailFieldClass);
2202
+ customElements.define(componentName$n, EmailFieldClass);
2198
2203
 
2199
- const componentName$j = getComponentName('link');
2204
+ const componentName$m = getComponentName('link');
2200
2205
 
2201
- class RawLink extends createBaseClass({ componentName: componentName$j, baseSelector: ':host a' }) {
2206
+ class RawLink extends createBaseClass({ componentName: componentName$m, baseSelector: ':host a' }) {
2202
2207
  constructor() {
2203
2208
  super();
2204
2209
 
@@ -2244,12 +2249,12 @@ const selectors = {
2244
2249
  text: { selector: () => TextClass.componentName },
2245
2250
  };
2246
2251
 
2247
- const { anchor, text: text$2, host: host$8, wrapper: wrapper$1 } = selectors;
2252
+ const { anchor, text: text$2, host: host$9, wrapper: wrapper$1 } = selectors;
2248
2253
 
2249
2254
  const LinkClass = compose(
2250
2255
  createStyleMixin({
2251
2256
  mappings: {
2252
- hostWidth: { ...host$8, property: 'width' },
2257
+ hostWidth: { ...host$9, property: 'width' },
2253
2258
  textAlign: wrapper$1,
2254
2259
  textColor: [
2255
2260
  { ...anchor, property: 'color' },
@@ -2262,7 +2267,7 @@ const LinkClass = compose(
2262
2267
  componentNameValidationMixin
2263
2268
  )(RawLink);
2264
2269
 
2265
- customElements.define(componentName$j, LinkClass);
2270
+ customElements.define(componentName$m, LinkClass);
2266
2271
 
2267
2272
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
2268
2273
  let style;
@@ -2314,27 +2319,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
2314
2319
  return CssVarImageClass;
2315
2320
  };
2316
2321
 
2317
- const componentName$i = getComponentName('logo');
2322
+ const componentName$l = getComponentName('logo');
2318
2323
 
2319
2324
  const LogoClass = createCssVarImageClass({
2320
- componentName: componentName$i,
2325
+ componentName: componentName$l,
2321
2326
  varName: 'url',
2322
2327
  fallbackVarName: 'fallbackUrl',
2323
2328
  });
2324
2329
 
2325
- customElements.define(componentName$i, LogoClass);
2330
+ customElements.define(componentName$l, LogoClass);
2326
2331
 
2327
- const componentName$h = getComponentName('totp-image');
2332
+ const componentName$k = getComponentName('totp-image');
2328
2333
 
2329
2334
  const TotpImageClass = createCssVarImageClass({
2330
- componentName: componentName$h,
2335
+ componentName: componentName$k,
2331
2336
  varName: 'url',
2332
2337
  fallbackVarName: 'fallbackUrl',
2333
2338
  });
2334
2339
 
2335
- customElements.define(componentName$h, TotpImageClass);
2340
+ customElements.define(componentName$k, TotpImageClass);
2336
2341
 
2337
- const componentName$g = getComponentName('number-field');
2342
+ const componentName$j = getComponentName('number-field');
2338
2343
 
2339
2344
  const NumberFieldClass = compose(
2340
2345
  createStyleMixin({
@@ -2345,7 +2350,7 @@ const NumberFieldClass = compose(
2345
2350
  componentNameValidationMixin
2346
2351
  )(
2347
2352
  createProxy({
2348
- slots: ['prefix', 'suffix'],
2353
+ slots: ['', 'prefix', 'suffix'],
2349
2354
  wrappedEleName: 'vaadin-number-field',
2350
2355
  style: () => `
2351
2356
  :host {
@@ -2359,11 +2364,11 @@ const NumberFieldClass = compose(
2359
2364
  ${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
2360
2365
  `,
2361
2366
  excludeAttrsSync: ['tabindex'],
2362
- componentName: componentName$g,
2367
+ componentName: componentName$j,
2363
2368
  })
2364
2369
  );
2365
2370
 
2366
- customElements.define(componentName$g, NumberFieldClass);
2371
+ customElements.define(componentName$j, NumberFieldClass);
2367
2372
 
2368
2373
  const focusElement = (ele) => {
2369
2374
  ele?.focus();
@@ -2381,23 +2386,19 @@ const getSanitizedCharacters = (str) => {
2381
2386
 
2382
2387
  /* eslint-disable no-param-reassign */
2383
2388
 
2384
- const componentName$f = getComponentName('passcode-internal');
2389
+ const componentName$i = getComponentName('passcode-internal');
2385
2390
 
2386
2391
  const observedAttributes$5 = ['digits'];
2387
2392
 
2388
2393
  const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
2389
2394
 
2390
- const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$f, baseSelector: 'div' });
2395
+ const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$i, baseSelector: 'div' });
2391
2396
 
2392
2397
  class PasscodeInternal extends BaseInputClass$4 {
2393
2398
  static get observedAttributes() {
2394
2399
  return observedAttributes$5.concat(BaseInputClass$4.observedAttributes || []);
2395
2400
  }
2396
2401
 
2397
- static get componentName() {
2398
- return componentName$f;
2399
- }
2400
-
2401
2402
  constructor() {
2402
2403
  super();
2403
2404
 
@@ -2587,11 +2588,11 @@ class PasscodeInternal extends BaseInputClass$4 {
2587
2588
  }
2588
2589
  }
2589
2590
 
2590
- const componentName$e = getComponentName('text-field');
2591
+ const componentName$h = getComponentName('text-field');
2591
2592
 
2592
2593
  const observedAttrs = ['type'];
2593
2594
 
2594
- const customMixin$4 = (superclass) =>
2595
+ const customMixin$5 = (superclass) =>
2595
2596
  class TextFieldClass extends superclass {
2596
2597
  static get observedAttributes() {
2597
2598
  return observedAttrs.concat(superclass.observedAttributes || []);
@@ -2618,7 +2619,7 @@ const TextFieldClass = compose(
2618
2619
  draggableMixin,
2619
2620
  composedProxyInputMixin,
2620
2621
  componentNameValidationMixin,
2621
- customMixin$4
2622
+ customMixin$5
2622
2623
  )(
2623
2624
  createProxy({
2624
2625
  slots: ['prefix', 'suffix'],
@@ -2635,15 +2636,15 @@ const TextFieldClass = compose(
2635
2636
  ${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
2636
2637
  `,
2637
2638
  excludeAttrsSync: ['tabindex'],
2638
- componentName: componentName$e,
2639
+ componentName: componentName$h,
2639
2640
  })
2640
2641
  );
2641
2642
 
2642
- const componentName$d = getComponentName('passcode');
2643
+ const componentName$g = getComponentName('passcode');
2643
2644
 
2644
2645
  const observedAttributes$4 = ['digits'];
2645
2646
 
2646
- const customMixin$3 = (superclass) =>
2647
+ const customMixin$4 = (superclass) =>
2647
2648
  class PasscodeMixinClass extends superclass {
2648
2649
  static get observedAttributes() {
2649
2650
  return observedAttributes$4.concat(superclass.observedAttributes || []);
@@ -2658,17 +2659,17 @@ const customMixin$3 = (superclass) =>
2658
2659
  const template = document.createElement('template');
2659
2660
 
2660
2661
  template.innerHTML = `
2661
- <${componentName$f}
2662
+ <${componentName$i}
2662
2663
  bordered="true"
2663
2664
  name="code"
2664
2665
  tabindex="-1"
2665
2666
  slot="input"
2666
- ></${componentName$f}>
2667
+ ><slot></slot></${componentName$i}>
2667
2668
  `;
2668
2669
 
2669
2670
  this.baseElement.appendChild(template.content.cloneNode(true));
2670
2671
 
2671
- this.inputElement = this.shadowRoot.querySelector(componentName$f);
2672
+ this.inputElement = this.shadowRoot.querySelector(componentName$i);
2672
2673
 
2673
2674
  forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
2674
2675
  }
@@ -2683,13 +2684,13 @@ const customMixin$3 = (superclass) =>
2683
2684
  };
2684
2685
 
2685
2686
  const {
2686
- host: host$7,
2687
+ host: host$8,
2687
2688
  digitField,
2688
- label: label$6,
2689
- requiredIndicator: requiredIndicator$6,
2690
- internalWrapper,
2689
+ label: label$7,
2690
+ requiredIndicator: requiredIndicator$7,
2691
+ internalWrapper: internalWrapper$1,
2691
2692
  focusedDigitField,
2692
- errorMessage: errorMessage$6,
2693
+ errorMessage: errorMessage$7,
2693
2694
  } = {
2694
2695
  host: { selector: () => ':host' },
2695
2696
  focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
@@ -2705,15 +2706,15 @@ const textVars$2 = TextFieldClass.cssVarList;
2705
2706
  const PasscodeClass = compose(
2706
2707
  createStyleMixin({
2707
2708
  mappings: {
2708
- fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$7],
2709
+ fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$8],
2709
2710
  hostWidth: { property: 'width' },
2710
- fontFamily: host$7,
2711
+ fontFamily: host$8,
2711
2712
  labelTextColor: [
2712
- { ...label$6, property: 'color' },
2713
- { ...requiredIndicator$6, property: 'color' },
2713
+ { ...label$7, property: 'color' },
2714
+ { ...requiredIndicator$7, property: 'color' },
2714
2715
  ],
2715
- labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
2716
- errorMessageTextColor: { ...errorMessage$6, property: 'color' },
2716
+ labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
2717
+ errorMessageTextColor: { ...errorMessage$7, property: 'color' },
2717
2718
  digitValueTextColor: {
2718
2719
  selector: TextFieldClass.componentName,
2719
2720
  property: textVars$2.inputValueTextColor,
@@ -2725,7 +2726,7 @@ const PasscodeClass = compose(
2725
2726
  digitPadding: { ...digitField, property: textVars$2.inputHorizontalPadding },
2726
2727
  digitTextAlign: { ...digitField, property: textVars$2.inputTextAlign },
2727
2728
  digitCaretTextColor: { ...digitField, property: textVars$2.inputCaretTextColor },
2728
- digitSpacing: { ...internalWrapper, property: 'gap' },
2729
+ digitSpacing: { ...internalWrapper$1, property: 'gap' },
2729
2730
  digitOutlineColor: { ...digitField, property: textVars$2.inputOutlineColor },
2730
2731
  digitOutlineWidth: { ...digitField, property: textVars$2.inputOutlineWidth },
2731
2732
 
@@ -2735,7 +2736,7 @@ const PasscodeClass = compose(
2735
2736
  draggableMixin,
2736
2737
  composedProxyInputMixin,
2737
2738
  componentNameValidationMixin,
2738
- customMixin$3
2739
+ customMixin$4
2739
2740
  )(
2740
2741
  createProxy({
2741
2742
  slots: [],
@@ -2806,15 +2807,15 @@ const PasscodeClass = compose(
2806
2807
  ${resetInputCursor('vaadin-text-field')}
2807
2808
  `,
2808
2809
  excludeAttrsSync: ['tabindex'],
2809
- componentName: componentName$d,
2810
+ componentName: componentName$g,
2810
2811
  })
2811
2812
  );
2812
2813
 
2813
- customElements.define(componentName$e, TextFieldClass);
2814
+ customElements.define(componentName$h, TextFieldClass);
2814
2815
 
2815
- customElements.define(componentName$f, PasscodeInternal);
2816
+ customElements.define(componentName$i, PasscodeInternal);
2816
2817
 
2817
- customElements.define(componentName$d, PasscodeClass);
2818
+ customElements.define(componentName$g, PasscodeClass);
2818
2819
 
2819
2820
  const passwordDraggableMixin = (superclass) =>
2820
2821
  class PasswordDraggableMixinClass extends superclass {
@@ -2850,18 +2851,18 @@ const passwordDraggableMixin = (superclass) =>
2850
2851
  }
2851
2852
  };
2852
2853
 
2853
- const componentName$c = getComponentName('password');
2854
+ const componentName$f = getComponentName('password');
2854
2855
 
2855
2856
  const {
2856
- host: host$6,
2857
+ host: host$7,
2857
2858
  inputField: inputField$4,
2858
2859
  inputElement: inputElement$1,
2859
2860
  inputElementPlaceholder,
2860
2861
  revealButtonContainer,
2861
2862
  revealButtonIcon,
2862
- label: label$5,
2863
- requiredIndicator: requiredIndicator$5,
2864
- errorMessage: errorMessage$5,
2863
+ label: label$6,
2864
+ requiredIndicator: requiredIndicator$6,
2865
+ errorMessage: errorMessage$6,
2865
2866
  helperText: helperText$5,
2866
2867
  } = {
2867
2868
  host: { selector: () => ':host' },
@@ -2879,10 +2880,10 @@ const {
2879
2880
  const PasswordClass = compose(
2880
2881
  createStyleMixin({
2881
2882
  mappings: {
2882
- hostWidth: { ...host$6, property: 'width' },
2883
- hostMinWidth: { ...host$6, property: 'min-width' },
2884
- fontSize: [{}, host$6],
2885
- fontFamily: [label$5, inputField$4, errorMessage$5, helperText$5],
2883
+ hostWidth: { ...host$7, property: 'width' },
2884
+ hostMinWidth: { ...host$7, property: 'min-width' },
2885
+ fontSize: [{}, host$7],
2886
+ fontFamily: [label$6, inputField$4, errorMessage$6, helperText$5],
2886
2887
  inputHeight: { ...inputField$4, property: 'height' },
2887
2888
  inputHorizontalPadding: [
2888
2889
  { ...inputElement$1, property: 'padding-left' },
@@ -2901,11 +2902,11 @@ const PasswordClass = compose(
2901
2902
  inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
2902
2903
 
2903
2904
  labelTextColor: [
2904
- { ...label$5, property: 'color' },
2905
- { ...requiredIndicator$5, property: 'color' },
2905
+ { ...label$6, property: 'color' },
2906
+ { ...requiredIndicator$6, property: 'color' },
2906
2907
  ],
2907
- labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
2908
- errorMessageTextColor: { ...errorMessage$5, property: 'color' },
2908
+ labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
2909
+ errorMessageTextColor: { ...errorMessage$6, property: 'color' },
2909
2910
 
2910
2911
  inputValueTextColor: [
2911
2912
  { ...inputElement$1, property: 'color' },
@@ -2926,7 +2927,7 @@ const PasswordClass = compose(
2926
2927
  passwordDraggableMixin
2927
2928
  )(
2928
2929
  createProxy({
2929
- slots: ['suffix'],
2930
+ slots: ['', 'suffix'],
2930
2931
  wrappedEleName: 'vaadin-password-field',
2931
2932
  style: () => `
2932
2933
  :host {
@@ -2951,7 +2952,7 @@ const PasswordClass = compose(
2951
2952
  }
2952
2953
  vaadin-password-field[focus-ring]::part(input-field) {
2953
2954
  box-shadow: none;
2954
- }
2955
+ }
2955
2956
  vaadin-password-field > input {
2956
2957
  min-height: 0;
2957
2958
  -webkit-mask-image: none;
@@ -2978,23 +2979,23 @@ const PasswordClass = compose(
2978
2979
  }
2979
2980
  `,
2980
2981
  excludeAttrsSync: ['tabindex'],
2981
- componentName: componentName$c,
2982
+ componentName: componentName$f,
2982
2983
  })
2983
2984
  );
2984
2985
 
2985
- customElements.define(componentName$c, PasswordClass);
2986
+ customElements.define(componentName$f, PasswordClass);
2986
2987
 
2987
- const componentName$b = getComponentName('text-area');
2988
+ const componentName$e = getComponentName('text-area');
2988
2989
 
2989
2990
  const {
2990
- host: host$5,
2991
- label: label$4,
2991
+ host: host$6,
2992
+ label: label$5,
2992
2993
  placeholder: placeholder$1,
2993
2994
  inputField: inputField$3,
2994
2995
  textArea: textArea$2,
2995
- requiredIndicator: requiredIndicator$4,
2996
+ requiredIndicator: requiredIndicator$5,
2996
2997
  helperText: helperText$4,
2997
- errorMessage: errorMessage$4,
2998
+ errorMessage: errorMessage$5,
2998
2999
  } = {
2999
3000
  host: { selector: () => ':host' },
3000
3001
  label: { selector: '::part(label)' },
@@ -3009,16 +3010,16 @@ const {
3009
3010
  const TextAreaClass = compose(
3010
3011
  createStyleMixin({
3011
3012
  mappings: {
3012
- hostWidth: { ...host$5, property: 'width' },
3013
- hostMinWidth: { ...host$5, property: 'min-width' },
3014
- fontSize: [host$5, textArea$2],
3015
- fontFamily: [label$4, inputField$3, helperText$4, errorMessage$4],
3013
+ hostWidth: { ...host$6, property: 'width' },
3014
+ hostMinWidth: { ...host$6, property: 'min-width' },
3015
+ fontSize: [host$6, textArea$2],
3016
+ fontFamily: [label$5, inputField$3, helperText$4, errorMessage$5],
3016
3017
  labelTextColor: [
3017
- { ...label$4, property: 'color' },
3018
- { ...requiredIndicator$4, property: 'color' },
3018
+ { ...label$5, property: 'color' },
3019
+ { ...requiredIndicator$5, property: 'color' },
3019
3020
  ],
3020
- labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
3021
- errorMessageTextColor: { ...errorMessage$4, property: 'color' },
3021
+ labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
3022
+ errorMessageTextColor: { ...errorMessage$5, property: 'color' },
3022
3023
  inputBackgroundColor: { ...inputField$3, property: 'background-color' },
3023
3024
  inputValueTextColor: { ...textArea$2, property: 'color' },
3024
3025
  inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
@@ -3056,17 +3057,17 @@ const TextAreaClass = compose(
3056
3057
  ${resetInputCursor('vaadin-text-area')}
3057
3058
  `,
3058
3059
  excludeAttrsSync: ['tabindex'],
3059
- componentName: componentName$b,
3060
+ componentName: componentName$e,
3060
3061
  })
3061
3062
  );
3062
3063
 
3063
- customElements.define(componentName$b, TextAreaClass);
3064
+ customElements.define(componentName$e, TextAreaClass);
3064
3065
 
3065
3066
  const observedAttributes$3 = ['src', 'alt'];
3066
3067
 
3067
- const componentName$a = getComponentName('image');
3068
+ const componentName$d = getComponentName('image');
3068
3069
 
3069
- const BaseClass$1 = createBaseClass({ componentName: componentName$a, baseSelector: ':host > img' });
3070
+ const BaseClass$1 = createBaseClass({ componentName: componentName$d, baseSelector: ':host > img' });
3070
3071
  class RawImage extends BaseClass$1 {
3071
3072
  static get observedAttributes() {
3072
3073
  return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
@@ -3106,9 +3107,9 @@ const ImageClass = compose(
3106
3107
  draggableMixin
3107
3108
  )(RawImage);
3108
3109
 
3109
- customElements.define(componentName$a, ImageClass);
3110
+ customElements.define(componentName$d, ImageClass);
3110
3111
 
3111
- const componentName$9 = getComponentName('combo-box');
3112
+ const componentName$c = getComponentName('combo-box');
3112
3113
 
3113
3114
  const ComboBoxMixin = (superclass) =>
3114
3115
  class ComboBoxMixinClass extends superclass {
@@ -3160,15 +3161,15 @@ const ComboBoxMixin = (superclass) =>
3160
3161
  };
3161
3162
 
3162
3163
  const {
3163
- host: host$4,
3164
+ host: host$5,
3164
3165
  inputField: inputField$2,
3165
3166
  inputElement,
3166
3167
  placeholder,
3167
3168
  toggle,
3168
- label: label$3,
3169
- requiredIndicator: requiredIndicator$3,
3169
+ label: label$4,
3170
+ requiredIndicator: requiredIndicator$4,
3170
3171
  helperText: helperText$3,
3171
- errorMessage: errorMessage$3,
3172
+ errorMessage: errorMessage$4,
3172
3173
  } = {
3173
3174
  host: { selector: () => ':host' },
3174
3175
  inputField: { selector: '::part(input-field)' },
@@ -3189,22 +3190,22 @@ const {
3189
3190
  const ComboBoxClass = compose(
3190
3191
  createStyleMixin({
3191
3192
  mappings: {
3192
- hostWidth: { ...host$4, property: 'width' },
3193
+ hostWidth: { ...host$5, property: 'width' },
3193
3194
  // we apply font-size also on the host so we can set its width with em
3194
- fontSize: [{}, host$4],
3195
- fontFamily: [label$3, placeholder, inputField$2, helperText$3, errorMessage$3],
3195
+ fontSize: [{}, host$5],
3196
+ fontFamily: [label$4, placeholder, inputField$2, helperText$3, errorMessage$4],
3196
3197
  labelTextColor: [
3197
- { ...label$3, property: 'color' },
3198
- { ...requiredIndicator$3, property: 'color' },
3198
+ { ...label$4, property: 'color' },
3199
+ { ...requiredIndicator$4, property: 'color' },
3199
3200
  ],
3200
- errorMessageTextColor: { ...errorMessage$3, property: 'color' },
3201
+ errorMessageTextColor: { ...errorMessage$4, property: 'color' },
3201
3202
  inputHeight: { ...inputField$2, property: 'height' },
3202
3203
  inputBackgroundColor: { ...inputField$2, property: 'background-color' },
3203
3204
  inputBorderColor: { ...inputField$2, property: 'border-color' },
3204
3205
  inputBorderWidth: { ...inputField$2, property: 'border-width' },
3205
3206
  inputBorderStyle: { ...inputField$2, property: 'border-style' },
3206
3207
  inputBorderRadius: { ...inputField$2, property: 'border-radius' },
3207
- labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
3208
+ labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
3208
3209
  inputValueTextColor: { ...inputField$2, property: 'color' },
3209
3210
  inputPlaceholderTextColor: { ...placeholder, property: 'color' },
3210
3211
  inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
@@ -3252,7 +3253,7 @@ const ComboBoxClass = compose(
3252
3253
  ComboBoxMixin
3253
3254
  )(
3254
3255
  createProxy({
3255
- slots: ['prefix'],
3256
+ slots: ['', 'prefix'],
3256
3257
  wrappedEleName: 'vaadin-combo-box',
3257
3258
  style: () => `
3258
3259
  :host {
@@ -3288,12 +3289,12 @@ const ComboBoxClass = compose(
3288
3289
  // and reset items to an empty array, and opening the list box with no items
3289
3290
  // to display.
3290
3291
  excludeAttrsSync: ['tabindex', 'size'],
3291
- componentName: componentName$9,
3292
+ componentName: componentName$c,
3292
3293
  includeForwardProps: ['items', 'renderer', 'selectedItem'],
3293
3294
  })
3294
3295
  );
3295
3296
 
3296
- customElements.define(componentName$9, ComboBoxClass);
3297
+ customElements.define(componentName$c, ComboBoxClass);
3297
3298
 
3298
3299
  var CountryCodes = [
3299
3300
  {
@@ -4533,7 +4534,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
4533
4534
  </div>
4534
4535
  `;
4535
4536
 
4536
- const componentName$8 = getComponentName('phone-field-internal');
4537
+ const componentName$b = getComponentName('phone-field-internal');
4537
4538
 
4538
4539
  const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
4539
4540
  const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -4545,7 +4546,7 @@ const mapAttrs$1 = {
4545
4546
 
4546
4547
  const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
4547
4548
 
4548
- const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$8, baseSelector: 'div' });
4549
+ const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$b, baseSelector: 'div' });
4549
4550
 
4550
4551
  let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
4551
4552
  static get observedAttributes() {
@@ -4735,14 +4736,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
4735
4736
  }
4736
4737
  };
4737
4738
 
4738
- customElements.define(componentName$8, PhoneFieldInternal$1);
4739
+ customElements.define(componentName$b, PhoneFieldInternal$1);
4739
4740
 
4740
4741
  const textVars$1 = TextFieldClass.cssVarList;
4741
4742
  const comboVars = ComboBoxClass.cssVarList;
4742
4743
 
4743
- const componentName$7 = getComponentName('phone-field');
4744
+ const componentName$a = getComponentName('phone-field');
4744
4745
 
4745
- const customMixin$2 = (superclass) =>
4746
+ const customMixin$3 = (superclass) =>
4746
4747
  class PhoneFieldMixinClass extends superclass {
4747
4748
  static get CountryCodes() {
4748
4749
  return CountryCodes;
@@ -4754,15 +4755,15 @@ const customMixin$2 = (superclass) =>
4754
4755
  const template = document.createElement('template');
4755
4756
 
4756
4757
  template.innerHTML = `
4757
- <${componentName$8}
4758
+ <${componentName$b}
4758
4759
  tabindex="-1"
4759
4760
  slot="input"
4760
- ></${componentName$8}>
4761
+ ></${componentName$b}>
4761
4762
  `;
4762
4763
 
4763
4764
  this.baseElement.appendChild(template.content.cloneNode(true));
4764
4765
 
4765
- this.inputElement = this.shadowRoot.querySelector(componentName$8);
4766
+ this.inputElement = this.shadowRoot.querySelector(componentName$b);
4766
4767
 
4767
4768
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
4768
4769
  includeAttrs: [
@@ -4782,14 +4783,14 @@ const customMixin$2 = (superclass) =>
4782
4783
  };
4783
4784
 
4784
4785
  const {
4785
- host: host$3,
4786
- label: label$2,
4787
- requiredIndicator: requiredIndicator$2,
4786
+ host: host$4,
4787
+ label: label$3,
4788
+ requiredIndicator: requiredIndicator$3,
4788
4789
  inputField: inputField$1,
4789
4790
  countryCodeInput,
4790
4791
  phoneInput: phoneInput$1,
4791
4792
  separator,
4792
- errorMessage: errorMessage$2,
4793
+ errorMessage: errorMessage$3,
4793
4794
  helperText: helperText$2,
4794
4795
  } = {
4795
4796
  host: { selector: () => ':host' },
@@ -4807,7 +4808,7 @@ const PhoneFieldClass = compose(
4807
4808
  createStyleMixin({
4808
4809
  mappings: {
4809
4810
  fontSize: [
4810
- host$3,
4811
+ host$4,
4811
4812
  inputField$1,
4812
4813
  {
4813
4814
  selector: TextFieldClass.componentName,
@@ -4819,8 +4820,8 @@ const PhoneFieldClass = compose(
4819
4820
  },
4820
4821
  ],
4821
4822
  fontFamily: [
4822
- label$2,
4823
- errorMessage$2,
4823
+ label$3,
4824
+ errorMessage$3,
4824
4825
  helperText$2,
4825
4826
  {
4826
4827
  ...countryCodeInput,
@@ -4828,7 +4829,7 @@ const PhoneFieldClass = compose(
4828
4829
  },
4829
4830
  ],
4830
4831
  hostWidth: [
4831
- { ...host$3, property: 'width' },
4832
+ { ...host$4, property: 'width' },
4832
4833
  { ...phoneInput$1, property: 'width' },
4833
4834
  { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
4834
4835
  ],
@@ -4855,11 +4856,11 @@ const PhoneFieldClass = compose(
4855
4856
  phoneInputWidth: { ...phoneInput$1, property: 'width' },
4856
4857
 
4857
4858
  labelTextColor: [
4858
- { ...label$2, property: 'color' },
4859
- { ...requiredIndicator$2, property: 'color' },
4859
+ { ...label$3, property: 'color' },
4860
+ { ...requiredIndicator$3, property: 'color' },
4860
4861
  ],
4861
- labelRequiredIndicator: { ...requiredIndicator$2, property: 'content' },
4862
- errorMessageTextColor: { ...errorMessage$2, property: 'color' },
4862
+ labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
4863
+ errorMessageTextColor: { ...errorMessage$3, property: 'color' },
4863
4864
 
4864
4865
  inputValueTextColor: [
4865
4866
  { ...phoneInput$1, property: textVars$1.inputValueTextColor },
@@ -4881,7 +4882,7 @@ const PhoneFieldClass = compose(
4881
4882
  }),
4882
4883
  draggableMixin,
4883
4884
  composedProxyInputMixin,
4884
- customMixin$2
4885
+ customMixin$3
4885
4886
  )(
4886
4887
  createProxy({
4887
4888
  slots: [],
@@ -4957,17 +4958,17 @@ const PhoneFieldClass = compose(
4957
4958
  }
4958
4959
  `,
4959
4960
  excludeAttrsSync: ['tabindex'],
4960
- componentName: componentName$7,
4961
+ componentName: componentName$a,
4961
4962
  })
4962
4963
  );
4963
4964
 
4964
- customElements.define(componentName$7, PhoneFieldClass);
4965
+ customElements.define(componentName$a, PhoneFieldClass);
4965
4966
 
4966
4967
  const getCountryByCodeId = (countryCode) => {
4967
4968
  return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
4968
4969
  };
4969
4970
 
4970
- const componentName$6 = getComponentName('phone-field-internal-input-box');
4971
+ const componentName$9 = getComponentName('phone-field-internal-input-box');
4971
4972
 
4972
4973
  const observedAttributes$2 = [
4973
4974
  'disabled',
@@ -4981,7 +4982,7 @@ const mapAttrs = {
4981
4982
  'phone-input-placeholder': 'placeholder',
4982
4983
  };
4983
4984
 
4984
- const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$6, baseSelector: 'div' });
4985
+ const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$9, baseSelector: 'div' });
4985
4986
 
4986
4987
  class PhoneFieldInternal extends BaseInputClass$2 {
4987
4988
  static get observedAttributes() {
@@ -5120,13 +5121,13 @@ class PhoneFieldInternal extends BaseInputClass$2 {
5120
5121
  }
5121
5122
  }
5122
5123
 
5123
- customElements.define(componentName$6, PhoneFieldInternal);
5124
+ customElements.define(componentName$9, PhoneFieldInternal);
5124
5125
 
5125
5126
  const textVars = TextFieldClass.cssVarList;
5126
5127
 
5127
- const componentName$5 = getComponentName('phone-input-box-field');
5128
+ const componentName$8 = getComponentName('phone-input-box-field');
5128
5129
 
5129
- const customMixin$1 = (superclass) =>
5130
+ const customMixin$2 = (superclass) =>
5130
5131
  class PhoneInputBoxFieldMixinClass extends superclass {
5131
5132
  static get CountryCodes() {
5132
5133
  return CountryCodes;
@@ -5138,15 +5139,15 @@ const customMixin$1 = (superclass) =>
5138
5139
  const template = document.createElement('template');
5139
5140
 
5140
5141
  template.innerHTML = `
5141
- <${componentName$6}
5142
+ <${componentName$9}
5142
5143
  tabindex="-1"
5143
5144
  slot="input"
5144
- ></${componentName$6}>
5145
+ ></${componentName$9}>
5145
5146
  `;
5146
5147
 
5147
5148
  this.baseElement.appendChild(template.content.cloneNode(true));
5148
5149
 
5149
- this.inputElement = this.shadowRoot.querySelector(componentName$6);
5150
+ this.inputElement = this.shadowRoot.querySelector(componentName$9);
5150
5151
 
5151
5152
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
5152
5153
  includeAttrs: [
@@ -5163,7 +5164,7 @@ const customMixin$1 = (superclass) =>
5163
5164
  }
5164
5165
  };
5165
5166
 
5166
- const { host: host$2, label: label$1, requiredIndicator: requiredIndicator$1, inputField, phoneInput, errorMessage: errorMessage$1, helperText: helperText$1 } = {
5167
+ const { host: host$3, label: label$2, requiredIndicator: requiredIndicator$2, inputField, phoneInput, errorMessage: errorMessage$2, helperText: helperText$1 } = {
5167
5168
  host: { selector: () => ':host' },
5168
5169
  label: { selector: '::part(label)' },
5169
5170
  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -5177,16 +5178,16 @@ const PhoneFieldInputBoxClass = compose(
5177
5178
  createStyleMixin({
5178
5179
  mappings: {
5179
5180
  fontSize: [
5180
- host$2,
5181
+ host$3,
5181
5182
  inputField,
5182
5183
  {
5183
5184
  selector: TextFieldClass.componentName,
5184
5185
  property: TextFieldClass.cssVarList.fontSize,
5185
5186
  },
5186
5187
  ],
5187
- fontFamily: [label$1, errorMessage$1, helperText$1],
5188
- hostWidth: { ...host$2, property: 'width' },
5189
- hostMinWidth: { ...host$2, property: 'min-width' },
5188
+ fontFamily: [label$2, errorMessage$2, helperText$1],
5189
+ hostWidth: { ...host$3, property: 'width' },
5190
+ hostMinWidth: { ...host$3, property: 'min-width' },
5190
5191
 
5191
5192
  inputBorderStyle: { ...inputField, property: 'border-style' },
5192
5193
  inputBorderWidth: { ...inputField, property: 'border-width' },
@@ -5194,11 +5195,11 @@ const PhoneFieldInputBoxClass = compose(
5194
5195
  inputBorderRadius: { ...inputField, property: 'border-radius' },
5195
5196
 
5196
5197
  labelTextColor: [
5197
- { ...label$1, property: 'color' },
5198
- { ...requiredIndicator$1, property: 'color' },
5198
+ { ...label$2, property: 'color' },
5199
+ { ...requiredIndicator$2, property: 'color' },
5199
5200
  ],
5200
- labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
5201
- errorMessageTextColor: { ...errorMessage$1, property: 'color' },
5201
+ labelRequiredIndicator: { ...requiredIndicator$2, property: 'content' },
5202
+ errorMessageTextColor: { ...errorMessage$2, property: 'color' },
5202
5203
 
5203
5204
  inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
5204
5205
 
@@ -5212,7 +5213,7 @@ const PhoneFieldInputBoxClass = compose(
5212
5213
  }),
5213
5214
  draggableMixin,
5214
5215
  composedProxyInputMixin,
5215
- customMixin$1
5216
+ customMixin$2
5216
5217
  )(
5217
5218
  createProxy({
5218
5219
  slots: [],
@@ -5278,17 +5279,17 @@ const PhoneFieldInputBoxClass = compose(
5278
5279
  }
5279
5280
  `,
5280
5281
  excludeAttrsSync: ['tabindex'],
5281
- componentName: componentName$5,
5282
+ componentName: componentName$8,
5282
5283
  })
5283
5284
  );
5284
5285
 
5285
- customElements.define(componentName$5, PhoneFieldInputBoxClass);
5286
+ customElements.define(componentName$8, PhoneFieldInputBoxClass);
5286
5287
 
5287
- const componentName$4 = getComponentName('new-password-internal');
5288
+ const componentName$7 = getComponentName('new-password-internal');
5288
5289
 
5289
- const componentName$3 = getComponentName('new-password');
5290
+ const componentName$6 = getComponentName('new-password');
5290
5291
 
5291
- const customMixin = (superclass) =>
5292
+ const customMixin$1 = (superclass) =>
5292
5293
  class NewPasswordMixinClass extends superclass {
5293
5294
  init() {
5294
5295
  super.init?.();
@@ -5296,16 +5297,16 @@ const customMixin = (superclass) =>
5296
5297
  const template = document.createElement('template');
5297
5298
 
5298
5299
  template.innerHTML = `
5299
- <${componentName$4}
5300
+ <${componentName$7}
5300
5301
  name="new-password"
5301
5302
  tabindex="-1"
5302
5303
  slot="input"
5303
- ></${componentName$4}>
5304
+ ></${componentName$7}>
5304
5305
  `;
5305
5306
 
5306
5307
  this.baseElement.appendChild(template.content.cloneNode(true));
5307
5308
 
5308
- this.inputElement = this.shadowRoot.querySelector(componentName$4);
5309
+ this.inputElement = this.shadowRoot.querySelector(componentName$7);
5309
5310
 
5310
5311
  forwardAttrs(this, this.inputElement, {
5311
5312
  includeAttrs: [
@@ -5326,7 +5327,7 @@ const customMixin = (superclass) =>
5326
5327
  }
5327
5328
  };
5328
5329
 
5329
- const { host: host$1, label, internalInputsWrapper, errorMessage, helperText } = {
5330
+ const { host: host$2, label: label$1, internalInputsWrapper, errorMessage: errorMessage$1, helperText } = {
5330
5331
  host: { selector: () => ':host' },
5331
5332
  label: { selector: '::part(label)' },
5332
5333
  internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
@@ -5338,24 +5339,24 @@ const NewPasswordClass = compose(
5338
5339
  createStyleMixin({
5339
5340
  mappings: {
5340
5341
  fontSize: [
5341
- host$1,
5342
+ host$2,
5342
5343
  {},
5343
5344
  {
5344
5345
  selector: PasswordClass.componentName,
5345
5346
  property: PasswordClass.cssVarList.fontSize,
5346
5347
  },
5347
5348
  ],
5348
- fontFamily: [label, errorMessage, helperText],
5349
- errorMessageTextColor: { ...errorMessage, property: 'color' },
5350
- hostWidth: { ...host$1, property: 'width' },
5351
- hostMinWidth: { ...host$1, property: 'min-width' },
5352
- inputsRequiredIndicator: { ...host$1, property: 'content' },
5349
+ fontFamily: [label$1, errorMessage$1, helperText],
5350
+ errorMessageTextColor: { ...errorMessage$1, property: 'color' },
5351
+ hostWidth: { ...host$2, property: 'width' },
5352
+ hostMinWidth: { ...host$2, property: 'min-width' },
5353
+ inputsRequiredIndicator: { ...host$2, property: 'content' },
5353
5354
  spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
5354
5355
  },
5355
5356
  }),
5356
5357
  draggableMixin,
5357
5358
  composedProxyInputMixin,
5358
- customMixin
5359
+ customMixin$1
5359
5360
  )(
5360
5361
  createProxy({
5361
5362
  slots: [],
@@ -5404,7 +5405,7 @@ const NewPasswordClass = compose(
5404
5405
  },
5405
5406
  `,
5406
5407
  excludeAttrsSync: ['tabindex'],
5407
- componentName: componentName$3,
5408
+ componentName: componentName$6,
5408
5409
  })
5409
5410
  );
5410
5411
 
@@ -5428,7 +5429,7 @@ const commonAttrs = [
5428
5429
 
5429
5430
  const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
5430
5431
 
5431
- const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$4, baseSelector: 'div' });
5432
+ const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
5432
5433
 
5433
5434
  class NewPasswordInternal extends BaseInputClass$1 {
5434
5435
  static get observedAttributes() {
@@ -5588,16 +5589,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
5588
5589
  }
5589
5590
  }
5590
5591
 
5591
- customElements.define(componentName$4, NewPasswordInternal);
5592
+ customElements.define(componentName$7, NewPasswordInternal);
5592
5593
 
5593
- customElements.define(componentName$3, NewPasswordClass);
5594
+ customElements.define(componentName$6, NewPasswordClass);
5594
5595
 
5595
- const componentName$2 = getComponentName('recaptcha');
5596
+ const componentName$5 = getComponentName('recaptcha');
5596
5597
 
5597
5598
  const observedAttributes$1 = ['disabled', 'site-key', 'action', 'enterprise'];
5598
5599
 
5599
5600
  const BaseClass = createBaseClass({
5600
- componentName: componentName$2,
5601
+ componentName: componentName$5,
5601
5602
  baseSelector: ':host > div',
5602
5603
  });
5603
5604
  class RawRecaptcha extends BaseClass {
@@ -5747,7 +5748,7 @@ class RawRecaptcha extends BaseClass {
5747
5748
 
5748
5749
  const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
5749
5750
 
5750
- customElements.define(componentName$2, RecaptchaClass);
5751
+ customElements.define(componentName$5, RecaptchaClass);
5751
5752
 
5752
5753
  const getFileBase64 = (fileObj) => {
5753
5754
  return new Promise((resolve) => {
@@ -5761,7 +5762,7 @@ const getFilename = (fileObj) => {
5761
5762
  return fileObj.name.replace(/^.*\\/, '');
5762
5763
  };
5763
5764
 
5764
- const componentName$1 = getComponentName('upload-file');
5765
+ const componentName$4 = getComponentName('upload-file');
5765
5766
 
5766
5767
  const observedAttributes = [
5767
5768
  'title',
@@ -5776,7 +5777,7 @@ const observedAttributes = [
5776
5777
  'icon',
5777
5778
  ];
5778
5779
 
5779
- const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: ':host > div' });
5780
+ const BaseInputClass = createBaseInputClass({ componentName: componentName$4, baseSelector: ':host > div' });
5780
5781
 
5781
5782
  class RawUploadFile extends BaseInputClass {
5782
5783
  static get observedAttributes() {
@@ -5938,7 +5939,7 @@ class RawUploadFile extends BaseInputClass {
5938
5939
  }
5939
5940
  }
5940
5941
 
5941
- const { host, wrapper, icon, title, description, requiredIndicator } = {
5942
+ const { host: host$1, wrapper, icon, title, description, requiredIndicator: requiredIndicator$1 } = {
5942
5943
  host: { selector: () => ':host' },
5943
5944
  wrapper: { selector: () => ':host > div' },
5944
5945
  icon: { selector: () => '.icon' },
@@ -5957,8 +5958,8 @@ const UploadFileClass = compose(
5957
5958
  borderWidth: {},
5958
5959
  borderStyle: {},
5959
5960
  borderRadius: {},
5960
- hostHeight: { ...host, property: 'height' },
5961
- hostWidth: { ...host, property: 'width' },
5961
+ hostHeight: { ...host$1, property: 'height' },
5962
+ hostWidth: { ...host$1, property: 'width' },
5962
5963
  hostPadding: { property: 'padding' },
5963
5964
  gap: { ...wrapper },
5964
5965
  lineHeight: { ...wrapper, property: 'line-height' },
@@ -5970,107 +5971,452 @@ const UploadFileClass = compose(
5970
5971
  { ...description, property: 'color' },
5971
5972
  ],
5972
5973
  iconSize: { ...icon, property: 'width' },
5973
- requiredIndicator: { ...requiredIndicator, property: 'content' },
5974
+ requiredIndicator: { ...requiredIndicator$1, property: 'content' },
5974
5975
  },
5975
5976
  }),
5976
5977
  draggableMixin,
5977
5978
  componentNameValidationMixin
5978
5979
  )(RawUploadFile);
5979
5980
 
5980
- customElements.define(componentName$1, UploadFileClass);
5981
-
5982
- const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
5981
+ customElements.define(componentName$4, UploadFileClass);
5983
5982
 
5984
- const transformTheme = (theme, path, getTransformation) => {
5985
- return Object.entries(theme).reduce((acc, [key, val]) => {
5986
- if (val?.constructor !== Object) {
5987
- return merge(acc, getTransformation(path.concat(key), val));
5988
- }
5989
- return merge(acc, transformTheme(val, [...path, key], getTransformation));
5990
- }, {});
5991
- };
5983
+ const componentName$3 = getComponentName('single-select-internal');
5992
5984
 
5993
- const stringifyArray = (strArr) =>
5994
- strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
5985
+ class SingleSelectInternalClass extends createBaseInputClass({
5986
+ componentName: componentName$3,
5987
+ baseSelector: 'slot',
5988
+ }) {
5989
+ constructor() {
5990
+ super();
5995
5991
 
5996
- const getCssVarValue = (val) => {
5997
- switch (true) {
5998
- case Array.isArray(val):
5999
- return stringifyArray(val);
6000
- case isUrl(val):
6001
- return `url(${val})`;
6002
- default:
6003
- return val;
5992
+ this.innerHTML = `
5993
+ <style>
5994
+ slot {
5995
+ box-sizing: border-box;
5996
+ width: 100%;
5997
+ display: flex;
5998
+ flex-wrap: wrap;
5999
+ }
6000
+ </style>
6001
+ <slot part="wrapper"></slot>
6002
+ `;
6004
6003
  }
6005
- };
6006
-
6007
- const themeToCSSVarsObj = (theme) =>
6008
- transformTheme(theme, [], (path, val) => ({
6009
- [getVarName(path)]: getCssVarValue(val),
6010
- }));
6011
6004
 
6012
- const getThemeRefs = (theme, prefix) =>
6013
- transformTheme(theme, [], (path) =>
6014
- set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
6015
- );
6005
+ #dispatchChange = createDispatchEvent.bind(this, 'change');
6016
6006
 
6017
- const getThemeVars = (theme, prefix) =>
6018
- transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
6007
+ get items() {
6008
+ return this.querySelector('slot').assignedElements();
6009
+ }
6019
6010
 
6020
- const globalsThemeToStyle = (theme, themeName = '') => {
6021
- const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
6022
- (acc, entry) => `${acc}${entry.join(':')};\n`,
6023
- ''
6024
- );
6011
+ get isReadonly() {
6012
+ return this.getAttribute('readonly') === 'true';
6013
+ }
6025
6014
 
6026
- if (!themeName) return style;
6015
+ getSelectedNode() {
6016
+ return this.items.find((item) => item.hasAttribute('selected'));
6017
+ }
6027
6018
 
6028
- return `*[data-theme="${themeName}"] {${style}}`;
6029
- };
6019
+ get size() {
6020
+ return this.getAttribute('size') || 'md';
6021
+ }
6030
6022
 
6031
- const componentsThemeToStyleObj = (componentsTheme) =>
6032
- transformTheme(componentsTheme, [], (path, val) => {
6033
- const [component, ...restPath] = path;
6034
- const property = restPath.pop();
6035
- const componentName = getComponentName(component);
6023
+ removeSelected() {
6024
+ this.getSelectedNode()?.removeAttribute('selected');
6025
+ }
6036
6026
 
6037
- if (property === 'undefined') {
6038
- // eslint-disable-next-line no-console
6039
- console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
6027
+ onNodeClick(e) {
6028
+ if (!this.isReadonly) {
6029
+ this.setSelected(e.target);
6030
+ this.#dispatchChange();
6040
6031
  }
6032
+ }
6041
6033
 
6042
- // we need a support for portal components theme (e.g. overlay)
6043
- // this allows us to generate those themes under different sections
6044
- // if the theme has root level attribute that starts with #
6045
- // we are generating a new theme
6046
- let themeName = BASE_THEME_SECTION;
6047
-
6048
- if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
6049
- themeName = restPath.shift();
6034
+ setSelected(node) {
6035
+ if (node !== this.getSelectedNode()) {
6036
+ this.removeSelected();
6037
+ node?.setAttribute('selected', 'true');
6050
6038
  }
6039
+ }
6051
6040
 
6052
- // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
6053
- // starts with underscore -> attribute selector
6054
- const attrsSelector = restPath.reduce((acc, section, idx) => {
6055
- if (section.startsWith('_')) return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
6041
+ get value() {
6042
+ return this.getSelectedNode()?.value;
6043
+ }
6056
6044
 
6057
- const nextSection = restPath[idx + 1];
6045
+ set value(value) {
6046
+ const node = this.items.find((child) => child.value === value);
6047
+ this.setSelected(node);
6048
+ }
6058
6049
 
6059
- if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
6060
- // eslint-disable-next-line no-console
6061
- console.error(
6062
- 'theme generator',
6063
- `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
6064
- );
6065
- return acc;
6050
+ get defaultValue() {
6051
+ return this.getAttribute('default-value');
6052
+ }
6053
+
6054
+ setDefaultValue() {
6055
+ // we want to defer this action until all attributes are synched
6056
+ setTimeout(() => {
6057
+ if (this.defaultValue) {
6058
+ this.value = this.defaultValue;
6059
+ this.setCustomValidity();
6066
6060
  }
6061
+ });
6062
+ }
6067
6063
 
6068
- return `${acc}[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
6069
- }, '');
6064
+ onSizeChange() {
6065
+ this.items.forEach((item) => {
6066
+ item.setAttribute('size', this.size);
6067
+ });
6068
+ }
6070
6069
 
6071
- const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
6070
+ getValidity() {
6071
+ if (this.isRequired && !this.value) {
6072
+ return { valueMissing: true };
6073
+ }
6072
6074
 
6073
- return {
6075
+ return {};
6076
+ }
6077
+
6078
+ onObservedAttributeChange(attrs) {
6079
+ attrs.forEach((attr) => {
6080
+ switch (attr) {
6081
+ case 'size':
6082
+ this.onSizeChange();
6083
+ break;
6084
+ }
6085
+ });
6086
+ }
6087
+
6088
+ init() {
6089
+ // we are adding listeners before calling to super because it's stopping the events
6090
+ this.addEventListener('focus', (e) => {
6091
+ // we want to ignore focus events we are dispatching
6092
+ if (e.isTrusted) {
6093
+ this.items[0].focus();
6094
+ }
6095
+ });
6096
+
6097
+ super.init?.();
6098
+ this.setDefaultValue();
6099
+
6100
+ observeAttributes(this, this.onObservedAttributeChange.bind(this), { includeAttrs: ['size'] });
6101
+
6102
+ observeChildren(this, ({ addedNodes }) => {
6103
+ addedNodes.forEach((node) => {
6104
+ node.addEventListener('click', this.onNodeClick.bind(this));
6105
+ node.setAttribute('size', this.size);
6106
+ });
6107
+ });
6108
+ }
6109
+ }
6110
+
6111
+ const componentName$2 = getComponentName('single-select');
6112
+
6113
+ const customMixin = (superclass) =>
6114
+ class SingleSelectMixinClass extends superclass {
6115
+ init() {
6116
+ super.init?.();
6117
+ const template = document.createElement('template');
6118
+
6119
+ template.innerHTML = `
6120
+ <${componentName$3}
6121
+ name="single-select"
6122
+ slot="input"
6123
+ tabindex="-1"
6124
+ >
6125
+ <slot></slot>
6126
+ </${componentName$3}>
6127
+ `;
6128
+
6129
+ this.baseElement.appendChild(template.content.cloneNode(true));
6130
+
6131
+ this.inputElement = this.shadowRoot.querySelector(componentName$3);
6132
+
6133
+ forwardAttrs(this, this.inputElement, { includeAttrs: ['size', 'default-value'] });
6134
+ }
6135
+ };
6136
+
6137
+ const { host, label, requiredIndicator, internalWrapper, errorMessage } = {
6138
+ host: { selector: () => ':host' },
6139
+ label: { selector: '::part(label)' },
6140
+ requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
6141
+ internalWrapper: { selector: 'descope-single-select-internal slot' },
6142
+ errorMessage: { selector: '::part(error-message)' },
6143
+ };
6144
+
6145
+ const SingleSelectClass = compose(
6146
+ createStyleMixin({
6147
+ mappings: {
6148
+ hostWidth: { ...host, property: 'width' },
6149
+ fontFamily: host,
6150
+ labelTextColor: [
6151
+ { ...label, property: 'color' },
6152
+ { ...requiredIndicator, property: 'color' },
6153
+ ],
6154
+ labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
6155
+ errorMessageTextColor: { ...errorMessage, property: 'color' },
6156
+ itemsSpacing: { ...internalWrapper, property: 'gap' },
6157
+ },
6158
+ }),
6159
+ draggableMixin,
6160
+ composedProxyInputMixin,
6161
+ componentNameValidationMixin,
6162
+ customMixin
6163
+ )(
6164
+ createProxy({
6165
+ slots: [],
6166
+ wrappedEleName: 'vaadin-text-field',
6167
+ style: () => `
6168
+ :host {
6169
+ display: inline-flex;
6170
+ max-width: 100%;
6171
+ }
6172
+ ${resetInputFieldDefaultWidth()}
6173
+ :host::after {
6174
+ background-color: transparent;
6175
+ }
6176
+ :host::part(input-field)::after {
6177
+ background-color: transparent;
6178
+ }
6179
+
6180
+ descope-single-select-internal {
6181
+ -webkit-mask-image: none;
6182
+ padding: 0;
6183
+ width: 100%;
6184
+ height: 100%;
6185
+ display:inline-block;
6186
+ min-height: initial;
6187
+ }
6188
+
6189
+ vaadin-text-field::part(input-field) {
6190
+ background-color: transparent;
6191
+ padding: 0;
6192
+ overflow: hidden;
6193
+ -webkit-mask-image: none;
6194
+ }
6195
+
6196
+ vaadin-text-field {
6197
+ margin: 0;
6198
+ padding: 0;
6199
+ width: 100%
6200
+ }
6201
+
6202
+ vaadin-text-field::before {
6203
+ height: 0;
6204
+ }
6205
+
6206
+ vaadin-text-field[readonly] > input:placeholder-shown {
6207
+ opacity: 1;
6208
+ }
6209
+
6210
+ vaadin-text-field[readonly]::part(input-field)::after {
6211
+ border: 0 solid;
6212
+ }
6213
+
6214
+ vaadin-text-field::part(input-field) {
6215
+ box-shadow: none;
6216
+ }
6217
+
6218
+ ${resetInputCursor('vaadin-text-field')}
6219
+ `,
6220
+ excludeAttrsSync: ['tabindex'],
6221
+ componentName: componentName$2,
6222
+ })
6223
+ );
6224
+
6225
+ customElements.define(componentName$3, SingleSelectInternalClass);
6226
+
6227
+ customElements.define(componentName$2, SingleSelectClass);
6228
+
6229
+ const componentName$1 = getComponentName('select-item');
6230
+
6231
+ class RawSelectItem extends createBaseClass({
6232
+ componentName: componentName$1,
6233
+ baseSelector: ':host > descope-button',
6234
+ }) {
6235
+ get size() {
6236
+ return this.getAttribute('size') || 'md';
6237
+ }
6238
+
6239
+ get variant() {
6240
+ return this.getAttribute('variant') || 'contained';
6241
+ }
6242
+
6243
+ get value() {
6244
+ return this.getAttribute('value') || '';
6245
+ }
6246
+
6247
+ set value(value) {
6248
+ this.setAttribute('value', value);
6249
+ }
6250
+
6251
+ constructor() {
6252
+ super();
6253
+
6254
+ this.attachShadow({ mode: 'open' }).innerHTML = `
6255
+ <style>
6256
+ descope-button {
6257
+ max-width: 100%;
6258
+ }
6259
+ descope-button > slot {
6260
+ width: 100%;
6261
+ overflow: hidden;
6262
+ text-overflow: ellipsis;
6263
+ display: inline-block;
6264
+ }
6265
+ :host {
6266
+ display: inline-block;
6267
+ max-width: 100%
6268
+ }
6269
+ </style>
6270
+ <descope-button variant="${this.variant}" size="${this.size}" mode="primary">
6271
+ <slot></slot>
6272
+ </descope-button>
6273
+ `;
6274
+
6275
+ forwardAttrs(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
6276
+ }
6277
+
6278
+ handleFocus() {
6279
+ this.shadowRoot.querySelector('descope-button')?.focus();
6280
+ }
6281
+
6282
+ focus() {
6283
+ this.handleFocus();
6284
+ }
6285
+
6286
+ init() {
6287
+ super.init();
6288
+ this.addEventListener('focus', (e) => {
6289
+ // we want to ignore focus events we are dispatching
6290
+ if (e.isTrusted) {
6291
+ this.handleFocus();
6292
+ }
6293
+ });
6294
+ }
6295
+ }
6296
+
6297
+ const SelectItemClass = compose(
6298
+ createStyleMixin({
6299
+ mappings: {
6300
+ backgroundColor: {
6301
+ selector: () => ButtonClass.componentName,
6302
+ property: ButtonClass.cssVarList.backgroundColor,
6303
+ },
6304
+ labelTextColor: {
6305
+ selector: () => ButtonClass.componentName,
6306
+ property: ButtonClass.cssVarList.labelTextColor,
6307
+ },
6308
+ borderColor: {
6309
+ selector: () => ButtonClass.componentName,
6310
+ property: ButtonClass.cssVarList.borderColor,
6311
+ },
6312
+ borderStyle: {
6313
+ selector: () => ButtonClass.componentName,
6314
+ property: ButtonClass.cssVarList.borderStyle,
6315
+ },
6316
+ borderRadius: {
6317
+ selector: () => ButtonClass.componentName,
6318
+ property: ButtonClass.cssVarList.borderRadius,
6319
+ },
6320
+ },
6321
+ }),
6322
+ draggableMixin,
6323
+ componentNameValidationMixin
6324
+ )(RawSelectItem);
6325
+
6326
+ customElements.define(componentName$1, SelectItemClass);
6327
+
6328
+ const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
6329
+
6330
+ const transformTheme = (theme, path, getTransformation) => {
6331
+ return Object.entries(theme).reduce((acc, [key, val]) => {
6332
+ if (val?.constructor !== Object) {
6333
+ return merge(acc, getTransformation(path.concat(key), val));
6334
+ }
6335
+ return merge(acc, transformTheme(val, [...path, key], getTransformation));
6336
+ }, {});
6337
+ };
6338
+
6339
+ const stringifyArray = (strArr) =>
6340
+ strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
6341
+
6342
+ const getCssVarValue = (val) => {
6343
+ switch (true) {
6344
+ case Array.isArray(val):
6345
+ return stringifyArray(val);
6346
+ case isUrl(val):
6347
+ return `url(${val})`;
6348
+ default:
6349
+ return val;
6350
+ }
6351
+ };
6352
+
6353
+ const themeToCSSVarsObj = (theme) =>
6354
+ transformTheme(theme, [], (path, val) => ({
6355
+ [getVarName(path)]: getCssVarValue(val),
6356
+ }));
6357
+
6358
+ const getThemeRefs = (theme, prefix) =>
6359
+ transformTheme(theme, [], (path) =>
6360
+ set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
6361
+ );
6362
+
6363
+ const getThemeVars = (theme, prefix) =>
6364
+ transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
6365
+
6366
+ const globalsThemeToStyle = (theme, themeName = '') => {
6367
+ const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
6368
+ (acc, entry) => `${acc}${entry.join(':')};\n`,
6369
+ ''
6370
+ );
6371
+
6372
+ if (!themeName) return style;
6373
+
6374
+ return `*[data-theme="${themeName}"] {${style}}`;
6375
+ };
6376
+
6377
+ const componentsThemeToStyleObj = (componentsTheme) =>
6378
+ transformTheme(componentsTheme, [], (path, val) => {
6379
+ const [component, ...restPath] = path;
6380
+ const property = restPath.pop();
6381
+ const componentName = getComponentName(component);
6382
+
6383
+ if (property === 'undefined') {
6384
+ // eslint-disable-next-line no-console
6385
+ console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
6386
+ }
6387
+
6388
+ // we need a support for portal components theme (e.g. overlay)
6389
+ // this allows us to generate those themes under different sections
6390
+ // if the theme has root level attribute that starts with #
6391
+ // we are generating a new theme
6392
+ let themeName = BASE_THEME_SECTION;
6393
+
6394
+ if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
6395
+ themeName = restPath.shift();
6396
+ }
6397
+
6398
+ // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
6399
+ // starts with underscore -> attribute selector
6400
+ const attrsSelector = restPath.reduce((acc, section, idx) => {
6401
+ if (section.startsWith('_')) return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
6402
+
6403
+ const nextSection = restPath[idx + 1];
6404
+
6405
+ if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
6406
+ // eslint-disable-next-line no-console
6407
+ console.error(
6408
+ 'theme generator',
6409
+ `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
6410
+ );
6411
+ return acc;
6412
+ }
6413
+
6414
+ return `${acc}[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
6415
+ }, '');
6416
+
6417
+ const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
6418
+
6419
+ return {
6074
6420
  [componentName]: {
6075
6421
  [themeName]: {
6076
6422
  [selector]: {
@@ -6305,32 +6651,32 @@ const globals = {
6305
6651
  shadow,
6306
6652
  fonts,
6307
6653
  };
6308
- const vars$p = getThemeVars(globals);
6654
+ const vars$r = getThemeVars(globals);
6309
6655
 
6310
- const globalRefs$b = getThemeRefs(globals);
6656
+ const globalRefs$d = getThemeRefs(globals);
6311
6657
  const compVars$3 = ButtonClass.cssVarList;
6312
6658
 
6313
6659
  const mode = {
6314
- primary: globalRefs$b.colors.primary,
6315
- secondary: globalRefs$b.colors.secondary,
6316
- success: globalRefs$b.colors.success,
6317
- error: globalRefs$b.colors.error,
6318
- surface: globalRefs$b.colors.surface,
6660
+ primary: globalRefs$d.colors.primary,
6661
+ secondary: globalRefs$d.colors.secondary,
6662
+ success: globalRefs$d.colors.success,
6663
+ error: globalRefs$d.colors.error,
6664
+ surface: globalRefs$d.colors.surface,
6319
6665
  };
6320
6666
 
6321
- const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$t);
6667
+ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$w);
6322
6668
 
6323
6669
  const button = {
6324
6670
  ...helperTheme$3,
6325
6671
 
6326
- [compVars$3.fontFamily]: globalRefs$b.fonts.font1.family,
6672
+ [compVars$3.fontFamily]: globalRefs$d.fonts.font1.family,
6327
6673
 
6328
6674
  [compVars$3.cursor]: 'pointer',
6329
6675
  [compVars$3.hostHeight]: '3em',
6330
6676
  [compVars$3.hostWidth]: 'auto',
6331
6677
 
6332
- [compVars$3.borderRadius]: globalRefs$b.radius.sm,
6333
- [compVars$3.borderWidth]: globalRefs$b.border.xs,
6678
+ [compVars$3.borderRadius]: globalRefs$d.radius.sm,
6679
+ [compVars$3.borderWidth]: globalRefs$d.border.xs,
6334
6680
  [compVars$3.borderStyle]: 'solid',
6335
6681
  [compVars$3.borderColor]: 'transparent',
6336
6682
 
@@ -6404,11 +6750,11 @@ const button = {
6404
6750
  },
6405
6751
 
6406
6752
  _focused: {
6407
- [compVars$3.outlineColor]: globalRefs$b.colors.surface.main,
6753
+ [compVars$3.outlineColor]: globalRefs$d.colors.surface.main,
6408
6754
  },
6409
6755
  };
6410
6756
 
6411
- const vars$o = {
6757
+ const vars$q = {
6412
6758
  ...compVars$3,
6413
6759
  ...helperVars$3,
6414
6760
  };
@@ -6416,25 +6762,25 @@ const vars$o = {
6416
6762
  var button$1 = /*#__PURE__*/Object.freeze({
6417
6763
  __proto__: null,
6418
6764
  default: button,
6419
- vars: vars$o
6765
+ vars: vars$q
6420
6766
  });
6421
6767
 
6422
6768
  const componentName = getComponentName('input-wrapper');
6423
- const globalRefs$a = getThemeRefs(globals);
6769
+ const globalRefs$c = getThemeRefs(globals);
6424
6770
 
6425
- const [theme$1, refs, vars$n] = createHelperVars(
6771
+ const [theme$1, refs, vars$p] = createHelperVars(
6426
6772
  {
6427
- labelTextColor: globalRefs$a.colors.surface.contrast,
6428
- valueTextColor: globalRefs$a.colors.surface.contrast,
6429
- placeholderTextColor: globalRefs$a.colors.surface.main,
6773
+ labelTextColor: globalRefs$c.colors.surface.contrast,
6774
+ valueTextColor: globalRefs$c.colors.surface.contrast,
6775
+ placeholderTextColor: globalRefs$c.colors.surface.main,
6430
6776
  requiredIndicator: "'*'",
6431
- errorMessageTextColor: globalRefs$a.colors.error.main,
6777
+ errorMessageTextColor: globalRefs$c.colors.error.main,
6432
6778
 
6433
- borderWidth: globalRefs$a.border.xs,
6434
- borderRadius: globalRefs$a.radius.xs,
6779
+ borderWidth: globalRefs$c.border.xs,
6780
+ borderRadius: globalRefs$c.radius.xs,
6435
6781
  borderColor: 'transparent',
6436
6782
 
6437
- outlineWidth: globalRefs$a.border.sm,
6783
+ outlineWidth: globalRefs$c.border.sm,
6438
6784
  outlineStyle: 'solid',
6439
6785
  outlineColor: 'transparent',
6440
6786
  outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -6445,9 +6791,9 @@ const [theme$1, refs, vars$n] = createHelperVars(
6445
6791
  horizontalPadding: '0.5em',
6446
6792
  verticalPadding: '0.5em',
6447
6793
 
6448
- backgroundColor: globalRefs$a.colors.surface.light,
6794
+ backgroundColor: globalRefs$c.colors.surface.light,
6449
6795
 
6450
- fontFamily: globalRefs$a.fonts.font1.family,
6796
+ fontFamily: globalRefs$c.fonts.font1.family,
6451
6797
 
6452
6798
  size: {
6453
6799
  xs: { fontSize: '12px' },
@@ -6461,27 +6807,27 @@ const [theme$1, refs, vars$n] = createHelperVars(
6461
6807
  },
6462
6808
 
6463
6809
  _focused: {
6464
- outlineColor: globalRefs$a.colors.surface.main,
6810
+ outlineColor: globalRefs$c.colors.surface.main,
6465
6811
  _invalid: {
6466
- outlineColor: globalRefs$a.colors.error.main,
6812
+ outlineColor: globalRefs$c.colors.error.main,
6467
6813
  },
6468
6814
  },
6469
6815
 
6470
6816
  _bordered: {
6471
- outlineWidth: globalRefs$a.border.xs,
6472
- borderColor: globalRefs$a.colors.surface.main,
6817
+ outlineWidth: globalRefs$c.border.xs,
6818
+ borderColor: globalRefs$c.colors.surface.main,
6473
6819
  borderStyle: 'solid',
6474
6820
  _invalid: {
6475
- borderColor: globalRefs$a.colors.error.main,
6821
+ borderColor: globalRefs$c.colors.error.main,
6476
6822
  },
6477
6823
  },
6478
6824
 
6479
6825
  _disabled: {
6480
- labelTextColor: globalRefs$a.colors.surface.main,
6481
- borderColor: globalRefs$a.colors.surface.main,
6482
- valueTextColor: globalRefs$a.colors.surface.dark,
6483
- placeholderTextColor: globalRefs$a.colors.surface.dark,
6484
- backgroundColor: globalRefs$a.colors.surface.main,
6826
+ labelTextColor: globalRefs$c.colors.surface.main,
6827
+ borderColor: globalRefs$c.colors.surface.main,
6828
+ valueTextColor: globalRefs$c.colors.surface.dark,
6829
+ placeholderTextColor: globalRefs$c.colors.surface.dark,
6830
+ backgroundColor: globalRefs$c.colors.surface.main,
6485
6831
  },
6486
6832
  },
6487
6833
  componentName
@@ -6491,18 +6837,82 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
6491
6837
  __proto__: null,
6492
6838
  default: theme$1,
6493
6839
  refs: refs,
6494
- vars: vars$n
6840
+ vars: vars$p
6495
6841
  });
6496
6842
 
6497
- const vars$m = TextFieldClass.cssVarList;
6843
+ const vars$o = TextFieldClass.cssVarList;
6498
6844
 
6499
6845
  const textField = {
6846
+ [vars$o.hostWidth]: refs.width,
6847
+ [vars$o.hostMinWidth]: refs.minWidth,
6848
+ [vars$o.fontSize]: refs.fontSize,
6849
+ [vars$o.fontFamily]: refs.fontFamily,
6850
+ [vars$o.labelTextColor]: refs.labelTextColor,
6851
+ [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
6852
+ [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
6853
+ [vars$o.inputValueTextColor]: refs.valueTextColor,
6854
+ [vars$o.inputPlaceholderColor]: refs.placeholderTextColor,
6855
+ [vars$o.inputBorderWidth]: refs.borderWidth,
6856
+ [vars$o.inputBorderStyle]: refs.borderStyle,
6857
+ [vars$o.inputBorderColor]: refs.borderColor,
6858
+ [vars$o.inputBorderRadius]: refs.borderRadius,
6859
+ [vars$o.inputOutlineWidth]: refs.outlineWidth,
6860
+ [vars$o.inputOutlineStyle]: refs.outlineStyle,
6861
+ [vars$o.inputOutlineColor]: refs.outlineColor,
6862
+ [vars$o.inputOutlineOffset]: refs.outlineOffset,
6863
+ [vars$o.inputBackgroundColor]: refs.backgroundColor,
6864
+ [vars$o.inputHeight]: refs.inputHeight,
6865
+ [vars$o.inputHorizontalPadding]: refs.horizontalPadding,
6866
+ };
6867
+
6868
+ var textField$1 = /*#__PURE__*/Object.freeze({
6869
+ __proto__: null,
6870
+ default: textField,
6871
+ textField: textField,
6872
+ vars: vars$o
6873
+ });
6874
+
6875
+ const globalRefs$b = getThemeRefs(globals);
6876
+ const vars$n = PasswordClass.cssVarList;
6877
+
6878
+ const password = {
6879
+ [vars$n.hostWidth]: refs.width,
6880
+ [vars$n.fontSize]: refs.fontSize,
6881
+ [vars$n.fontFamily]: refs.fontFamily,
6882
+ [vars$n.labelTextColor]: refs.labelTextColor,
6883
+ [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
6884
+ [vars$n.inputHorizontalPadding]: refs.horizontalPadding,
6885
+ [vars$n.inputHeight]: refs.inputHeight,
6886
+ [vars$n.inputBackgroundColor]: refs.backgroundColor,
6887
+ [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
6888
+ [vars$n.inputValueTextColor]: refs.valueTextColor,
6889
+ [vars$n.inputPlaceholderTextColor]: refs.placeholderTextColor,
6890
+ [vars$n.inputBorderWidth]: refs.borderWidth,
6891
+ [vars$n.inputBorderStyle]: refs.borderStyle,
6892
+ [vars$n.inputBorderColor]: refs.borderColor,
6893
+ [vars$n.inputBorderRadius]: refs.borderRadius,
6894
+ [vars$n.inputOutlineWidth]: refs.outlineWidth,
6895
+ [vars$n.inputOutlineStyle]: refs.outlineStyle,
6896
+ [vars$n.inputOutlineColor]: refs.outlineColor,
6897
+ [vars$n.inputOutlineOffset]: refs.outlineOffset,
6898
+ [vars$n.revealButtonOffset]: globalRefs$b.spacing.md,
6899
+ [vars$n.revealButtonSize]: refs.toggleButtonSize,
6900
+ };
6901
+
6902
+ var password$1 = /*#__PURE__*/Object.freeze({
6903
+ __proto__: null,
6904
+ default: password,
6905
+ vars: vars$n
6906
+ });
6907
+
6908
+ const vars$m = NumberFieldClass.cssVarList;
6909
+
6910
+ const numberField = {
6500
6911
  [vars$m.hostWidth]: refs.width,
6501
6912
  [vars$m.hostMinWidth]: refs.minWidth,
6502
6913
  [vars$m.fontSize]: refs.fontSize,
6503
6914
  [vars$m.fontFamily]: refs.fontFamily,
6504
6915
  [vars$m.labelTextColor]: refs.labelTextColor,
6505
- [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
6506
6916
  [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
6507
6917
  [vars$m.inputValueTextColor]: refs.valueTextColor,
6508
6918
  [vars$m.inputPlaceholderColor]: refs.placeholderTextColor,
@@ -6515,32 +6925,29 @@ const textField = {
6515
6925
  [vars$m.inputOutlineColor]: refs.outlineColor,
6516
6926
  [vars$m.inputOutlineOffset]: refs.outlineOffset,
6517
6927
  [vars$m.inputBackgroundColor]: refs.backgroundColor,
6518
- [vars$m.inputHeight]: refs.inputHeight,
6928
+ [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
6519
6929
  [vars$m.inputHorizontalPadding]: refs.horizontalPadding,
6930
+ [vars$m.inputHeight]: refs.inputHeight,
6520
6931
  };
6521
6932
 
6522
- var textField$1 = /*#__PURE__*/Object.freeze({
6933
+ var numberField$1 = /*#__PURE__*/Object.freeze({
6523
6934
  __proto__: null,
6524
- default: textField,
6525
- textField: textField,
6935
+ default: numberField,
6526
6936
  vars: vars$m
6527
6937
  });
6528
6938
 
6529
- const globalRefs$9 = getThemeRefs(globals);
6530
- const vars$l = PasswordClass.cssVarList;
6939
+ const vars$l = EmailFieldClass.cssVarList;
6531
6940
 
6532
- const password = {
6941
+ const emailField = {
6533
6942
  [vars$l.hostWidth]: refs.width,
6943
+ [vars$l.hostMinWidth]: refs.minWidth,
6534
6944
  [vars$l.fontSize]: refs.fontSize,
6535
6945
  [vars$l.fontFamily]: refs.fontFamily,
6536
6946
  [vars$l.labelTextColor]: refs.labelTextColor,
6537
6947
  [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
6538
- [vars$l.inputHorizontalPadding]: refs.horizontalPadding,
6539
- [vars$l.inputHeight]: refs.inputHeight,
6540
- [vars$l.inputBackgroundColor]: refs.backgroundColor,
6541
- [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
6542
6948
  [vars$l.inputValueTextColor]: refs.valueTextColor,
6543
- [vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
6949
+ [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
6950
+ [vars$l.inputPlaceholderColor]: refs.placeholderTextColor,
6544
6951
  [vars$l.inputBorderWidth]: refs.borderWidth,
6545
6952
  [vars$l.inputBorderStyle]: refs.borderStyle,
6546
6953
  [vars$l.inputBorderColor]: refs.borderColor,
@@ -6549,227 +6956,166 @@ const password = {
6549
6956
  [vars$l.inputOutlineStyle]: refs.outlineStyle,
6550
6957
  [vars$l.inputOutlineColor]: refs.outlineColor,
6551
6958
  [vars$l.inputOutlineOffset]: refs.outlineOffset,
6552
- [vars$l.revealButtonOffset]: globalRefs$9.spacing.md,
6553
- [vars$l.revealButtonSize]: refs.toggleButtonSize,
6959
+ [vars$l.inputBackgroundColor]: refs.backgroundColor,
6960
+ [vars$l.inputHorizontalPadding]: refs.horizontalPadding,
6961
+ [vars$l.inputHeight]: refs.inputHeight,
6554
6962
  };
6555
6963
 
6556
- var password$1 = /*#__PURE__*/Object.freeze({
6964
+ var emailField$1 = /*#__PURE__*/Object.freeze({
6557
6965
  __proto__: null,
6558
- default: password,
6966
+ default: emailField,
6559
6967
  vars: vars$l
6560
6968
  });
6561
6969
 
6562
- const vars$k = NumberFieldClass.cssVarList;
6970
+ const globalRefs$a = getThemeRefs(globals);
6971
+ const vars$k = TextAreaClass.cssVarList;
6563
6972
 
6564
- const numberField = {
6973
+ const textArea = {
6565
6974
  [vars$k.hostWidth]: refs.width,
6566
6975
  [vars$k.hostMinWidth]: refs.minWidth,
6567
- [vars$k.fontSize]: refs.fontSize,
6976
+ [vars$k.fontSize]: globalRefs$a.typography.body2.size,
6568
6977
  [vars$k.fontFamily]: refs.fontFamily,
6569
6978
  [vars$k.labelTextColor]: refs.labelTextColor,
6979
+ [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
6570
6980
  [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
6981
+ [vars$k.inputBackgroundColor]: refs.backgroundColor,
6571
6982
  [vars$k.inputValueTextColor]: refs.valueTextColor,
6572
- [vars$k.inputPlaceholderColor]: refs.placeholderTextColor,
6983
+ [vars$k.inputPlaceholderTextColor]: refs.placeholderTextColor,
6984
+ [vars$k.inputBorderRadius]: refs.borderRadius,
6573
6985
  [vars$k.inputBorderWidth]: refs.borderWidth,
6574
6986
  [vars$k.inputBorderStyle]: refs.borderStyle,
6575
6987
  [vars$k.inputBorderColor]: refs.borderColor,
6576
- [vars$k.inputBorderRadius]: refs.borderRadius,
6577
6988
  [vars$k.inputOutlineWidth]: refs.outlineWidth,
6578
6989
  [vars$k.inputOutlineStyle]: refs.outlineStyle,
6579
6990
  [vars$k.inputOutlineColor]: refs.outlineColor,
6580
6991
  [vars$k.inputOutlineOffset]: refs.outlineOffset,
6581
- [vars$k.inputBackgroundColor]: refs.backgroundColor,
6582
- [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
6583
- [vars$k.inputHorizontalPadding]: refs.horizontalPadding,
6584
- [vars$k.inputHeight]: refs.inputHeight,
6585
- };
6586
-
6587
- var numberField$1 = /*#__PURE__*/Object.freeze({
6588
- __proto__: null,
6589
- default: numberField,
6590
- vars: vars$k
6591
- });
6592
-
6593
- const vars$j = EmailFieldClass.cssVarList;
6594
-
6595
- const emailField = {
6596
- [vars$j.hostWidth]: refs.width,
6597
- [vars$j.hostMinWidth]: refs.minWidth,
6598
- [vars$j.fontSize]: refs.fontSize,
6599
- [vars$j.fontFamily]: refs.fontFamily,
6600
- [vars$j.labelTextColor]: refs.labelTextColor,
6601
- [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
6602
- [vars$j.inputValueTextColor]: refs.valueTextColor,
6603
- [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
6604
- [vars$j.inputPlaceholderColor]: refs.placeholderTextColor,
6605
- [vars$j.inputBorderWidth]: refs.borderWidth,
6606
- [vars$j.inputBorderStyle]: refs.borderStyle,
6607
- [vars$j.inputBorderColor]: refs.borderColor,
6608
- [vars$j.inputBorderRadius]: refs.borderRadius,
6609
- [vars$j.inputOutlineWidth]: refs.outlineWidth,
6610
- [vars$j.inputOutlineStyle]: refs.outlineStyle,
6611
- [vars$j.inputOutlineColor]: refs.outlineColor,
6612
- [vars$j.inputOutlineOffset]: refs.outlineOffset,
6613
- [vars$j.inputBackgroundColor]: refs.backgroundColor,
6614
- [vars$j.inputHorizontalPadding]: refs.horizontalPadding,
6615
- [vars$j.inputHeight]: refs.inputHeight,
6616
- };
6617
-
6618
- var emailField$1 = /*#__PURE__*/Object.freeze({
6619
- __proto__: null,
6620
- default: emailField,
6621
- vars: vars$j
6622
- });
6623
-
6624
- const globalRefs$8 = getThemeRefs(globals);
6625
- const vars$i = TextAreaClass.cssVarList;
6626
-
6627
- const textArea = {
6628
- [vars$i.hostWidth]: refs.width,
6629
- [vars$i.hostMinWidth]: refs.minWidth,
6630
- [vars$i.fontSize]: globalRefs$8.typography.body2.size,
6631
- [vars$i.fontFamily]: refs.fontFamily,
6632
- [vars$i.labelTextColor]: refs.labelTextColor,
6633
- [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
6634
- [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
6635
- [vars$i.inputBackgroundColor]: refs.backgroundColor,
6636
- [vars$i.inputValueTextColor]: refs.valueTextColor,
6637
- [vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
6638
- [vars$i.inputBorderRadius]: refs.borderRadius,
6639
- [vars$i.inputBorderWidth]: refs.borderWidth,
6640
- [vars$i.inputBorderStyle]: refs.borderStyle,
6641
- [vars$i.inputBorderColor]: refs.borderColor,
6642
- [vars$i.inputOutlineWidth]: refs.outlineWidth,
6643
- [vars$i.inputOutlineStyle]: refs.outlineStyle,
6644
- [vars$i.inputOutlineColor]: refs.outlineColor,
6645
- [vars$i.inputOutlineOffset]: refs.outlineOffset,
6646
- [vars$i.inputResizeType]: 'vertical',
6647
- [vars$i.inputMinHeight]: '5em',
6992
+ [vars$k.inputResizeType]: 'vertical',
6993
+ [vars$k.inputMinHeight]: '5em',
6648
6994
 
6649
6995
  _disabled: {
6650
- [vars$i.inputBackgroundColor]: globalRefs$8.colors.surface.light,
6996
+ [vars$k.inputBackgroundColor]: globalRefs$a.colors.surface.light,
6651
6997
  },
6652
6998
 
6653
6999
  _readonly: {
6654
- [vars$i.inputResizeType]: 'none',
7000
+ [vars$k.inputResizeType]: 'none',
6655
7001
  },
6656
7002
  };
6657
7003
 
6658
7004
  var textArea$1 = /*#__PURE__*/Object.freeze({
6659
7005
  __proto__: null,
6660
7006
  default: textArea,
6661
- vars: vars$i
7007
+ vars: vars$k
6662
7008
  });
6663
7009
 
6664
- const vars$h = CheckboxClass.cssVarList;
7010
+ const vars$j = CheckboxClass.cssVarList;
6665
7011
 
6666
7012
  const checkbox = {
6667
- [vars$h.hostWidth]: refs.width,
6668
- [vars$h.fontSize]: refs.fontSize,
6669
- [vars$h.fontFamily]: refs.fontFamily,
6670
- [vars$h.labelTextColor]: refs.labelTextColor,
6671
- [vars$h.labelRequiredIndicator]: refs.requiredIndicator,
6672
- [vars$h.labelFontWeight]: '400',
6673
- [vars$h.labelSpacing]: '0.75em',
6674
- [vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
6675
- [vars$h.inputOutlineWidth]: refs.outlineWidth,
6676
- [vars$h.inputOutlineOffset]: refs.outlineOffset,
6677
- [vars$h.inputOutlineColor]: refs.outlineColor,
6678
- [vars$h.inputOutlineStyle]: refs.outlineStyle,
6679
- [vars$h.inputBorderRadius]: refs.borderRadius,
6680
- [vars$h.inputBorderColor]: refs.borderColor,
6681
- [vars$h.inputBorderWidth]: refs.borderWidth,
6682
- [vars$h.inputBorderStyle]: refs.borderStyle,
6683
- [vars$h.inputBackgroundColor]: refs.inputBackgroundColor,
6684
- [vars$h.inputSize]: '2em',
7013
+ [vars$j.hostWidth]: refs.width,
7014
+ [vars$j.fontSize]: refs.fontSize,
7015
+ [vars$j.fontFamily]: refs.fontFamily,
7016
+ [vars$j.labelTextColor]: refs.labelTextColor,
7017
+ [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
7018
+ [vars$j.labelFontWeight]: '400',
7019
+ [vars$j.labelSpacing]: '0.75em',
7020
+ [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
7021
+ [vars$j.inputOutlineWidth]: refs.outlineWidth,
7022
+ [vars$j.inputOutlineOffset]: refs.outlineOffset,
7023
+ [vars$j.inputOutlineColor]: refs.outlineColor,
7024
+ [vars$j.inputOutlineStyle]: refs.outlineStyle,
7025
+ [vars$j.inputBorderRadius]: refs.borderRadius,
7026
+ [vars$j.inputBorderColor]: refs.borderColor,
7027
+ [vars$j.inputBorderWidth]: refs.borderWidth,
7028
+ [vars$j.inputBorderStyle]: refs.borderStyle,
7029
+ [vars$j.inputBackgroundColor]: refs.inputBackgroundColor,
7030
+ [vars$j.inputSize]: '2em',
6685
7031
 
6686
7032
  _checked: {
6687
- [vars$h.inputBackgroundColor]: refs.backgroundColor,
6688
- [vars$h.inputValueTextColor]: refs.valueTextColor,
7033
+ [vars$j.inputBackgroundColor]: refs.backgroundColor,
7034
+ [vars$j.inputValueTextColor]: refs.valueTextColor,
6689
7035
  },
6690
7036
 
6691
7037
  _disabled: {
6692
- [vars$h.labelTextColor]: refs.labelTextColor,
7038
+ [vars$j.labelTextColor]: refs.labelTextColor,
6693
7039
  },
6694
7040
  };
6695
7041
 
6696
7042
  var checkbox$1 = /*#__PURE__*/Object.freeze({
6697
7043
  __proto__: null,
6698
7044
  default: checkbox,
6699
- vars: vars$h
7045
+ vars: vars$j
6700
7046
  });
6701
7047
 
6702
7048
  const knobMargin = '2px';
6703
7049
  const checkboxHeight = '1.25em';
6704
7050
 
6705
- const globalRefs$7 = getThemeRefs(globals);
6706
- const vars$g = SwitchToggleClass.cssVarList;
7051
+ const globalRefs$9 = getThemeRefs(globals);
7052
+ const vars$i = SwitchToggleClass.cssVarList;
6707
7053
 
6708
7054
  const switchToggle = {
6709
- [vars$g.fontSize]: refs.fontSize,
6710
- [vars$g.fontFamily]: refs.fontFamily,
6711
-
6712
- [vars$g.inputOutlineWidth]: refs.outlineWidth,
6713
- [vars$g.inputOutlineOffset]: refs.outlineOffset,
6714
- [vars$g.inputOutlineColor]: refs.outlineColor,
6715
- [vars$g.inputOutlineStyle]: refs.outlineStyle,
6716
-
6717
- [vars$g.trackBorderStyle]: refs.borderStyle,
6718
- [vars$g.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
6719
- [vars$g.trackBorderColor]: refs.borderColor,
6720
- [vars$g.trackBackgroundColor]: 'none',
6721
- [vars$g.trackBorderRadius]: globalRefs$7.radius.md,
6722
- [vars$g.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
6723
- [vars$g.trackHeight]: checkboxHeight,
6724
-
6725
- [vars$g.knobSize]: `calc(1em - ${knobMargin})`,
6726
- [vars$g.knobRadius]: '50%',
6727
- [vars$g.knobTopOffset]: '1px',
6728
- [vars$g.knobLeftOffset]: knobMargin,
6729
- [vars$g.knobColor]: refs.valueTextColor,
6730
- [vars$g.knobTransitionDuration]: '0.3s',
6731
-
6732
- [vars$g.labelTextColor]: refs.labelTextColor,
6733
- [vars$g.labelFontWeight]: '400',
6734
- [vars$g.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
6735
- [vars$g.labelSpacing]: '0.25em',
6736
- [vars$g.labelRequiredIndicator]: refs.requiredIndicator,
6737
- [vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
6738
-
6739
- [vars$g.hostWidth]: refs.width,
7055
+ [vars$i.fontSize]: refs.fontSize,
7056
+ [vars$i.fontFamily]: refs.fontFamily,
7057
+
7058
+ [vars$i.inputOutlineWidth]: refs.outlineWidth,
7059
+ [vars$i.inputOutlineOffset]: refs.outlineOffset,
7060
+ [vars$i.inputOutlineColor]: refs.outlineColor,
7061
+ [vars$i.inputOutlineStyle]: refs.outlineStyle,
7062
+
7063
+ [vars$i.trackBorderStyle]: refs.borderStyle,
7064
+ [vars$i.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
7065
+ [vars$i.trackBorderColor]: refs.borderColor,
7066
+ [vars$i.trackBackgroundColor]: 'none',
7067
+ [vars$i.trackBorderRadius]: globalRefs$9.radius.md,
7068
+ [vars$i.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
7069
+ [vars$i.trackHeight]: checkboxHeight,
7070
+
7071
+ [vars$i.knobSize]: `calc(1em - ${knobMargin})`,
7072
+ [vars$i.knobRadius]: '50%',
7073
+ [vars$i.knobTopOffset]: '1px',
7074
+ [vars$i.knobLeftOffset]: knobMargin,
7075
+ [vars$i.knobColor]: refs.valueTextColor,
7076
+ [vars$i.knobTransitionDuration]: '0.3s',
7077
+
7078
+ [vars$i.labelTextColor]: refs.labelTextColor,
7079
+ [vars$i.labelFontWeight]: '400',
7080
+ [vars$i.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
7081
+ [vars$i.labelSpacing]: '0.25em',
7082
+ [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
7083
+ [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
7084
+
7085
+ [vars$i.hostWidth]: refs.width,
6740
7086
 
6741
7087
  _checked: {
6742
- [vars$g.trackBorderColor]: refs.borderColor,
6743
- [vars$g.trackBackgroundColor]: refs.backgroundColor,
6744
- [vars$g.knobLeftOffset]: `calc(100% - var(${vars$g.knobSize}) - ${knobMargin})`,
6745
- [vars$g.knobColor]: refs.valueTextColor,
6746
- [vars$g.knobTextColor]: refs.valueTextColor,
7088
+ [vars$i.trackBorderColor]: refs.borderColor,
7089
+ [vars$i.trackBackgroundColor]: refs.backgroundColor,
7090
+ [vars$i.knobLeftOffset]: `calc(100% - var(${vars$i.knobSize}) - ${knobMargin})`,
7091
+ [vars$i.knobColor]: refs.valueTextColor,
7092
+ [vars$i.knobTextColor]: refs.valueTextColor,
6747
7093
  },
6748
7094
 
6749
7095
  _disabled: {
6750
- [vars$g.knobColor]: globalRefs$7.colors.surface.light,
6751
- [vars$g.trackBorderColor]: globalRefs$7.colors.surface.main,
6752
- [vars$g.trackBackgroundColor]: globalRefs$7.colors.surface.main,
6753
- [vars$g.labelTextColor]: refs.labelTextColor,
7096
+ [vars$i.knobColor]: globalRefs$9.colors.surface.light,
7097
+ [vars$i.trackBorderColor]: globalRefs$9.colors.surface.main,
7098
+ [vars$i.trackBackgroundColor]: globalRefs$9.colors.surface.main,
7099
+ [vars$i.labelTextColor]: refs.labelTextColor,
6754
7100
  _checked: {
6755
- [vars$g.knobColor]: globalRefs$7.colors.surface.light,
6756
- [vars$g.trackBackgroundColor]: globalRefs$7.colors.surface.main,
7101
+ [vars$i.knobColor]: globalRefs$9.colors.surface.light,
7102
+ [vars$i.trackBackgroundColor]: globalRefs$9.colors.surface.main,
6757
7103
  },
6758
7104
  },
6759
7105
 
6760
7106
  _invalid: {
6761
- [vars$g.trackBorderColor]: globalRefs$7.colors.error.main,
6762
- [vars$g.knobColor]: globalRefs$7.colors.error.main,
7107
+ [vars$i.trackBorderColor]: globalRefs$9.colors.error.main,
7108
+ [vars$i.knobColor]: globalRefs$9.colors.error.main,
6763
7109
  },
6764
7110
  };
6765
7111
 
6766
7112
  var switchToggle$1 = /*#__PURE__*/Object.freeze({
6767
7113
  __proto__: null,
6768
7114
  default: switchToggle,
6769
- vars: vars$g
7115
+ vars: vars$i
6770
7116
  });
6771
7117
 
6772
- const globalRefs$6 = getThemeRefs(globals);
7118
+ const globalRefs$8 = getThemeRefs(globals);
6773
7119
 
6774
7120
  const compVars$2 = ContainerClass.cssVarList;
6775
7121
 
@@ -6791,7 +7137,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
6791
7137
  horizontalAlignment,
6792
7138
  shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
6793
7139
  },
6794
- componentName$n
7140
+ componentName$q
6795
7141
  );
6796
7142
 
6797
7143
  const { shadowColor } = helperRefs$2;
@@ -6801,8 +7147,8 @@ const container = {
6801
7147
 
6802
7148
  [compVars$2.hostWidth]: '100%',
6803
7149
  [compVars$2.boxShadow]: 'none',
6804
- [compVars$2.backgroundColor]: globalRefs$6.colors.surface.light,
6805
- [compVars$2.color]: globalRefs$6.colors.surface.contrast,
7150
+ [compVars$2.backgroundColor]: globalRefs$8.colors.surface.light,
7151
+ [compVars$2.color]: globalRefs$8.colors.surface.contrast,
6806
7152
 
6807
7153
  verticalPadding: {
6808
7154
  sm: { [compVars$2.verticalPadding]: '5px' },
@@ -6848,34 +7194,34 @@ const container = {
6848
7194
 
6849
7195
  shadow: {
6850
7196
  sm: {
6851
- [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.sm} ${shadowColor}, ${globalRefs$6.shadow.narrow.sm} ${shadowColor}`,
7197
+ [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${shadowColor}`,
6852
7198
  },
6853
7199
  md: {
6854
- [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.md} ${shadowColor}, ${globalRefs$6.shadow.narrow.md} ${shadowColor}`,
7200
+ [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.md} ${shadowColor}, ${globalRefs$8.shadow.narrow.md} ${shadowColor}`,
6855
7201
  },
6856
7202
  lg: {
6857
- [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.lg} ${shadowColor}, ${globalRefs$6.shadow.narrow.lg} ${shadowColor}`,
7203
+ [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${shadowColor}`,
6858
7204
  },
6859
7205
  xl: {
6860
- [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.xl} ${shadowColor}, ${globalRefs$6.shadow.narrow.xl} ${shadowColor}`,
7206
+ [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${shadowColor}`,
6861
7207
  },
6862
7208
  '2xl': {
6863
7209
  [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
6864
- [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide['2xl']} ${shadowColor}`,
7210
+ [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${shadowColor}`,
6865
7211
  },
6866
7212
  },
6867
7213
 
6868
7214
  borderRadius: {
6869
- sm: { [compVars$2.borderRadius]: globalRefs$6.radius.sm },
6870
- md: { [compVars$2.borderRadius]: globalRefs$6.radius.md },
6871
- lg: { [compVars$2.borderRadius]: globalRefs$6.radius.lg },
6872
- xl: { [compVars$2.borderRadius]: globalRefs$6.radius.xl },
6873
- '2xl': { [compVars$2.borderRadius]: globalRefs$6.radius['2xl'] },
6874
- '3xl': { [compVars$2.borderRadius]: globalRefs$6.radius['3xl'] },
7215
+ sm: { [compVars$2.borderRadius]: globalRefs$8.radius.sm },
7216
+ md: { [compVars$2.borderRadius]: globalRefs$8.radius.md },
7217
+ lg: { [compVars$2.borderRadius]: globalRefs$8.radius.lg },
7218
+ xl: { [compVars$2.borderRadius]: globalRefs$8.radius.xl },
7219
+ '2xl': { [compVars$2.borderRadius]: globalRefs$8.radius['2xl'] },
7220
+ '3xl': { [compVars$2.borderRadius]: globalRefs$8.radius['3xl'] },
6875
7221
  },
6876
7222
  };
6877
7223
 
6878
- const vars$f = {
7224
+ const vars$h = {
6879
7225
  ...compVars$2,
6880
7226
  ...helperVars$2,
6881
7227
  };
@@ -6883,152 +7229,152 @@ const vars$f = {
6883
7229
  var container$1 = /*#__PURE__*/Object.freeze({
6884
7230
  __proto__: null,
6885
7231
  default: container,
6886
- vars: vars$f
7232
+ vars: vars$h
6887
7233
  });
6888
7234
 
6889
- const vars$e = LogoClass.cssVarList;
7235
+ const vars$g = LogoClass.cssVarList;
6890
7236
 
6891
7237
  const logo$1 = {
6892
- [vars$e.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
7238
+ [vars$g.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
6893
7239
  };
6894
7240
 
6895
7241
  var logo$2 = /*#__PURE__*/Object.freeze({
6896
7242
  __proto__: null,
6897
7243
  default: logo$1,
6898
- vars: vars$e
7244
+ vars: vars$g
6899
7245
  });
6900
7246
 
6901
- const vars$d = TotpImageClass.cssVarList;
7247
+ const vars$f = TotpImageClass.cssVarList;
6902
7248
 
6903
7249
  const logo = {
6904
- [vars$d.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
7250
+ [vars$f.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
6905
7251
  };
6906
7252
 
6907
7253
  var totpImage = /*#__PURE__*/Object.freeze({
6908
7254
  __proto__: null,
6909
7255
  default: logo,
6910
- vars: vars$d
7256
+ vars: vars$f
6911
7257
  });
6912
7258
 
6913
- const globalRefs$5 = getThemeRefs(globals);
6914
- const vars$c = TextClass.cssVarList;
7259
+ const globalRefs$7 = getThemeRefs(globals);
7260
+ const vars$e = TextClass.cssVarList;
6915
7261
 
6916
7262
  const text = {
6917
- [vars$c.textLineHeight]: '1em',
6918
- [vars$c.textAlign]: 'left',
6919
- [vars$c.textColor]: globalRefs$5.colors.surface.dark,
7263
+ [vars$e.textLineHeight]: '1em',
7264
+ [vars$e.textAlign]: 'left',
7265
+ [vars$e.textColor]: globalRefs$7.colors.surface.dark,
6920
7266
  variant: {
6921
7267
  h1: {
6922
- [vars$c.fontSize]: globalRefs$5.typography.h1.size,
6923
- [vars$c.fontWeight]: globalRefs$5.typography.h1.weight,
6924
- [vars$c.fontFamily]: globalRefs$5.typography.h1.font,
7268
+ [vars$e.fontSize]: globalRefs$7.typography.h1.size,
7269
+ [vars$e.fontWeight]: globalRefs$7.typography.h1.weight,
7270
+ [vars$e.fontFamily]: globalRefs$7.typography.h1.font,
6925
7271
  },
6926
7272
  h2: {
6927
- [vars$c.fontSize]: globalRefs$5.typography.h2.size,
6928
- [vars$c.fontWeight]: globalRefs$5.typography.h2.weight,
6929
- [vars$c.fontFamily]: globalRefs$5.typography.h2.font,
7273
+ [vars$e.fontSize]: globalRefs$7.typography.h2.size,
7274
+ [vars$e.fontWeight]: globalRefs$7.typography.h2.weight,
7275
+ [vars$e.fontFamily]: globalRefs$7.typography.h2.font,
6930
7276
  },
6931
7277
  h3: {
6932
- [vars$c.fontSize]: globalRefs$5.typography.h3.size,
6933
- [vars$c.fontWeight]: globalRefs$5.typography.h3.weight,
6934
- [vars$c.fontFamily]: globalRefs$5.typography.h3.font,
7278
+ [vars$e.fontSize]: globalRefs$7.typography.h3.size,
7279
+ [vars$e.fontWeight]: globalRefs$7.typography.h3.weight,
7280
+ [vars$e.fontFamily]: globalRefs$7.typography.h3.font,
6935
7281
  },
6936
7282
  subtitle1: {
6937
- [vars$c.fontSize]: globalRefs$5.typography.subtitle1.size,
6938
- [vars$c.fontWeight]: globalRefs$5.typography.subtitle1.weight,
6939
- [vars$c.fontFamily]: globalRefs$5.typography.subtitle1.font,
7283
+ [vars$e.fontSize]: globalRefs$7.typography.subtitle1.size,
7284
+ [vars$e.fontWeight]: globalRefs$7.typography.subtitle1.weight,
7285
+ [vars$e.fontFamily]: globalRefs$7.typography.subtitle1.font,
6940
7286
  },
6941
7287
  subtitle2: {
6942
- [vars$c.fontSize]: globalRefs$5.typography.subtitle2.size,
6943
- [vars$c.fontWeight]: globalRefs$5.typography.subtitle2.weight,
6944
- [vars$c.fontFamily]: globalRefs$5.typography.subtitle2.font,
7288
+ [vars$e.fontSize]: globalRefs$7.typography.subtitle2.size,
7289
+ [vars$e.fontWeight]: globalRefs$7.typography.subtitle2.weight,
7290
+ [vars$e.fontFamily]: globalRefs$7.typography.subtitle2.font,
6945
7291
  },
6946
7292
  body1: {
6947
- [vars$c.fontSize]: globalRefs$5.typography.body1.size,
6948
- [vars$c.fontWeight]: globalRefs$5.typography.body1.weight,
6949
- [vars$c.fontFamily]: globalRefs$5.typography.body1.font,
7293
+ [vars$e.fontSize]: globalRefs$7.typography.body1.size,
7294
+ [vars$e.fontWeight]: globalRefs$7.typography.body1.weight,
7295
+ [vars$e.fontFamily]: globalRefs$7.typography.body1.font,
6950
7296
  },
6951
7297
  body2: {
6952
- [vars$c.fontSize]: globalRefs$5.typography.body2.size,
6953
- [vars$c.fontWeight]: globalRefs$5.typography.body2.weight,
6954
- [vars$c.fontFamily]: globalRefs$5.typography.body2.font,
7298
+ [vars$e.fontSize]: globalRefs$7.typography.body2.size,
7299
+ [vars$e.fontWeight]: globalRefs$7.typography.body2.weight,
7300
+ [vars$e.fontFamily]: globalRefs$7.typography.body2.font,
6955
7301
  },
6956
7302
  },
6957
7303
 
6958
7304
  mode: {
6959
7305
  primary: {
6960
- [vars$c.textColor]: globalRefs$5.colors.primary.main,
7306
+ [vars$e.textColor]: globalRefs$7.colors.primary.main,
6961
7307
  },
6962
7308
  secondary: {
6963
- [vars$c.textColor]: globalRefs$5.colors.secondary.main,
7309
+ [vars$e.textColor]: globalRefs$7.colors.secondary.main,
6964
7310
  },
6965
7311
  error: {
6966
- [vars$c.textColor]: globalRefs$5.colors.error.main,
7312
+ [vars$e.textColor]: globalRefs$7.colors.error.main,
6967
7313
  },
6968
7314
  success: {
6969
- [vars$c.textColor]: globalRefs$5.colors.success.main,
7315
+ [vars$e.textColor]: globalRefs$7.colors.success.main,
6970
7316
  },
6971
7317
  },
6972
7318
 
6973
7319
  textAlign: {
6974
- right: { [vars$c.textAlign]: 'right' },
6975
- left: { [vars$c.textAlign]: 'left' },
6976
- center: { [vars$c.textAlign]: 'center' },
7320
+ right: { [vars$e.textAlign]: 'right' },
7321
+ left: { [vars$e.textAlign]: 'left' },
7322
+ center: { [vars$e.textAlign]: 'center' },
6977
7323
  },
6978
7324
 
6979
7325
  _fullWidth: {
6980
- [vars$c.hostWidth]: '100%',
7326
+ [vars$e.hostWidth]: '100%',
6981
7327
  },
6982
7328
 
6983
7329
  _italic: {
6984
- [vars$c.fontStyle]: 'italic',
7330
+ [vars$e.fontStyle]: 'italic',
6985
7331
  },
6986
7332
 
6987
7333
  _uppercase: {
6988
- [vars$c.textTransform]: 'uppercase',
7334
+ [vars$e.textTransform]: 'uppercase',
6989
7335
  },
6990
7336
 
6991
7337
  _lowercase: {
6992
- [vars$c.textTransform]: 'lowercase',
7338
+ [vars$e.textTransform]: 'lowercase',
6993
7339
  },
6994
7340
  };
6995
7341
 
6996
7342
  var text$1 = /*#__PURE__*/Object.freeze({
6997
7343
  __proto__: null,
6998
7344
  default: text,
6999
- vars: vars$c
7345
+ vars: vars$e
7000
7346
  });
7001
7347
 
7002
- const globalRefs$4 = getThemeRefs(globals);
7003
- const vars$b = LinkClass.cssVarList;
7348
+ const globalRefs$6 = getThemeRefs(globals);
7349
+ const vars$d = LinkClass.cssVarList;
7004
7350
 
7005
7351
  const link = {
7006
- [vars$b.cursor]: 'pointer',
7352
+ [vars$d.cursor]: 'pointer',
7007
7353
 
7008
- [vars$b.textColor]: globalRefs$4.colors.primary.main,
7354
+ [vars$d.textColor]: globalRefs$6.colors.primary.main,
7009
7355
 
7010
7356
  textAlign: {
7011
- right: { [vars$b.textAlign]: 'right' },
7012
- left: { [vars$b.textAlign]: 'left' },
7013
- center: { [vars$b.textAlign]: 'center' },
7357
+ right: { [vars$d.textAlign]: 'right' },
7358
+ left: { [vars$d.textAlign]: 'left' },
7359
+ center: { [vars$d.textAlign]: 'center' },
7014
7360
  },
7015
7361
 
7016
7362
  _fullWidth: {
7017
- [vars$b.hostWidth]: '100%',
7363
+ [vars$d.hostWidth]: '100%',
7018
7364
  },
7019
7365
 
7020
7366
  mode: {
7021
7367
  primary: {
7022
- [vars$b.textColor]: globalRefs$4.colors.primary.main,
7368
+ [vars$d.textColor]: globalRefs$6.colors.primary.main,
7023
7369
  },
7024
7370
  secondary: {
7025
- [vars$b.textColor]: globalRefs$4.colors.secondary.main,
7371
+ [vars$d.textColor]: globalRefs$6.colors.secondary.main,
7026
7372
  },
7027
7373
  error: {
7028
- [vars$b.textColor]: globalRefs$4.colors.error.main,
7374
+ [vars$d.textColor]: globalRefs$6.colors.error.main,
7029
7375
  },
7030
7376
  success: {
7031
- [vars$b.textColor]: globalRefs$4.colors.success.main,
7377
+ [vars$d.textColor]: globalRefs$6.colors.success.main,
7032
7378
  },
7033
7379
  },
7034
7380
  };
@@ -7036,10 +7382,10 @@ const link = {
7036
7382
  var link$1 = /*#__PURE__*/Object.freeze({
7037
7383
  __proto__: null,
7038
7384
  default: link,
7039
- vars: vars$b
7385
+ vars: vars$d
7040
7386
  });
7041
7387
 
7042
- const globalRefs$3 = getThemeRefs(globals);
7388
+ const globalRefs$5 = getThemeRefs(globals);
7043
7389
  const compVars$1 = DividerClass.cssVarList;
7044
7390
 
7045
7391
  const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
@@ -7047,7 +7393,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
7047
7393
  thickness: '2px',
7048
7394
  spacing: '10px',
7049
7395
  },
7050
- componentName$m
7396
+ componentName$p
7051
7397
  );
7052
7398
 
7053
7399
  const divider = {
@@ -7057,7 +7403,7 @@ const divider = {
7057
7403
  [compVars$1.flexDirection]: 'row',
7058
7404
  [compVars$1.alignSelf]: 'stretch',
7059
7405
  [compVars$1.hostWidth]: '100%',
7060
- [compVars$1.stripeColor]: globalRefs$3.colors.surface.main,
7406
+ [compVars$1.stripeColor]: globalRefs$5.colors.surface.main,
7061
7407
  [compVars$1.stripeColorOpacity]: '0.5',
7062
7408
  [compVars$1.stripeHorizontalThickness]: helperRefs$1.thickness,
7063
7409
  [compVars$1.labelTextWidth]: 'fit-content',
@@ -7076,7 +7422,7 @@ const divider = {
7076
7422
  },
7077
7423
  };
7078
7424
 
7079
- const vars$a = {
7425
+ const vars$c = {
7080
7426
  ...compVars$1,
7081
7427
  ...helperVars$1,
7082
7428
  };
@@ -7084,99 +7430,99 @@ const vars$a = {
7084
7430
  var divider$1 = /*#__PURE__*/Object.freeze({
7085
7431
  __proto__: null,
7086
7432
  default: divider,
7087
- vars: vars$a
7433
+ vars: vars$c
7088
7434
  });
7089
7435
 
7090
- const vars$9 = PasscodeClass.cssVarList;
7436
+ const vars$b = PasscodeClass.cssVarList;
7091
7437
 
7092
7438
  const passcode = {
7093
- [vars$9.fontFamily]: refs.fontFamily,
7094
- [vars$9.fontSize]: refs.fontSize,
7095
- [vars$9.labelTextColor]: refs.labelTextColor,
7096
- [vars$9.labelRequiredIndicator]: refs.requiredIndicator,
7097
- [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
7098
- [vars$9.digitValueTextColor]: refs.valueTextColor,
7099
- [vars$9.digitPadding]: '0',
7100
- [vars$9.digitTextAlign]: 'center',
7101
- [vars$9.digitSpacing]: '4px',
7102
- [vars$9.hostWidth]: refs.width,
7103
- [vars$9.digitOutlineColor]: 'transparent',
7104
- [vars$9.digitOutlineWidth]: refs.outlineWidth,
7105
- [vars$9.focusedDigitFieldOutlineColor]: refs.outlineColor,
7106
- [vars$9.digitSize]: refs.inputHeight,
7439
+ [vars$b.fontFamily]: refs.fontFamily,
7440
+ [vars$b.fontSize]: refs.fontSize,
7441
+ [vars$b.labelTextColor]: refs.labelTextColor,
7442
+ [vars$b.labelRequiredIndicator]: refs.requiredIndicator,
7443
+ [vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
7444
+ [vars$b.digitValueTextColor]: refs.valueTextColor,
7445
+ [vars$b.digitPadding]: '0',
7446
+ [vars$b.digitTextAlign]: 'center',
7447
+ [vars$b.digitSpacing]: '4px',
7448
+ [vars$b.hostWidth]: refs.width,
7449
+ [vars$b.digitOutlineColor]: 'transparent',
7450
+ [vars$b.digitOutlineWidth]: refs.outlineWidth,
7451
+ [vars$b.focusedDigitFieldOutlineColor]: refs.outlineColor,
7452
+ [vars$b.digitSize]: refs.inputHeight,
7107
7453
 
7108
7454
  _hideCursor: {
7109
- [vars$9.digitCaretTextColor]: 'transparent',
7455
+ [vars$b.digitCaretTextColor]: 'transparent',
7110
7456
  },
7111
7457
  };
7112
7458
 
7113
7459
  var passcode$1 = /*#__PURE__*/Object.freeze({
7114
7460
  __proto__: null,
7115
7461
  default: passcode,
7116
- vars: vars$9
7462
+ vars: vars$b
7117
7463
  });
7118
7464
 
7119
- const globalRefs$2 = getThemeRefs(globals);
7120
- const vars$8 = LoaderLinearClass.cssVarList;
7465
+ const globalRefs$4 = getThemeRefs(globals);
7466
+ const vars$a = LoaderLinearClass.cssVarList;
7121
7467
 
7122
7468
  const loaderLinear = {
7123
- [vars$8.hostDisplay]: 'inline-block',
7124
- [vars$8.hostWidth]: '100%',
7469
+ [vars$a.hostDisplay]: 'inline-block',
7470
+ [vars$a.hostWidth]: '100%',
7125
7471
 
7126
- [vars$8.barColor]: globalRefs$2.colors.surface.contrast,
7127
- [vars$8.barWidth]: '20%',
7472
+ [vars$a.barColor]: globalRefs$4.colors.surface.contrast,
7473
+ [vars$a.barWidth]: '20%',
7128
7474
 
7129
- [vars$8.barBackgroundColor]: globalRefs$2.colors.surface.main,
7130
- [vars$8.barBorderRadius]: '4px',
7475
+ [vars$a.barBackgroundColor]: globalRefs$4.colors.surface.main,
7476
+ [vars$a.barBorderRadius]: '4px',
7131
7477
 
7132
- [vars$8.animationDuration]: '2s',
7133
- [vars$8.animationTimingFunction]: 'linear',
7134
- [vars$8.animationIterationCount]: 'infinite',
7135
- [vars$8.verticalPadding]: '0.25em',
7478
+ [vars$a.animationDuration]: '2s',
7479
+ [vars$a.animationTimingFunction]: 'linear',
7480
+ [vars$a.animationIterationCount]: 'infinite',
7481
+ [vars$a.verticalPadding]: '0.25em',
7136
7482
 
7137
7483
  size: {
7138
- xs: { [vars$8.barHeight]: '2px' },
7139
- sm: { [vars$8.barHeight]: '4px' },
7140
- md: { [vars$8.barHeight]: '6px' },
7141
- lg: { [vars$8.barHeight]: '8px' },
7484
+ xs: { [vars$a.barHeight]: '2px' },
7485
+ sm: { [vars$a.barHeight]: '4px' },
7486
+ md: { [vars$a.barHeight]: '6px' },
7487
+ lg: { [vars$a.barHeight]: '8px' },
7142
7488
  },
7143
7489
 
7144
7490
  mode: {
7145
7491
  primary: {
7146
- [vars$8.barColor]: globalRefs$2.colors.primary.main,
7492
+ [vars$a.barColor]: globalRefs$4.colors.primary.main,
7147
7493
  },
7148
7494
  secondary: {
7149
- [vars$8.barColor]: globalRefs$2.colors.secondary.main,
7495
+ [vars$a.barColor]: globalRefs$4.colors.secondary.main,
7150
7496
  },
7151
7497
  },
7152
7498
 
7153
7499
  _hidden: {
7154
- [vars$8.hostDisplay]: 'none',
7500
+ [vars$a.hostDisplay]: 'none',
7155
7501
  },
7156
7502
  };
7157
7503
 
7158
7504
  var loaderLinear$1 = /*#__PURE__*/Object.freeze({
7159
7505
  __proto__: null,
7160
7506
  default: loaderLinear,
7161
- vars: vars$8
7507
+ vars: vars$a
7162
7508
  });
7163
7509
 
7164
- const globalRefs$1 = getThemeRefs(globals);
7510
+ const globalRefs$3 = getThemeRefs(globals);
7165
7511
  const compVars = LoaderRadialClass.cssVarList;
7166
7512
 
7167
7513
  const [helperTheme, helperRefs, helperVars] = createHelperVars(
7168
7514
  {
7169
- spinnerColor: globalRefs$1.colors.surface.contrast,
7515
+ spinnerColor: globalRefs$3.colors.surface.contrast,
7170
7516
  mode: {
7171
7517
  primary: {
7172
- spinnerColor: globalRefs$1.colors.primary.main,
7518
+ spinnerColor: globalRefs$3.colors.primary.main,
7173
7519
  },
7174
7520
  secondary: {
7175
- spinnerColor: globalRefs$1.colors.secondary.main,
7521
+ spinnerColor: globalRefs$3.colors.secondary.main,
7176
7522
  },
7177
7523
  },
7178
7524
  },
7179
- componentName$o
7525
+ componentName$r
7180
7526
  );
7181
7527
 
7182
7528
  const loaderRadial = {
@@ -7205,7 +7551,7 @@ const loaderRadial = {
7205
7551
  [compVars.hostDisplay]: 'none',
7206
7552
  },
7207
7553
  };
7208
- const vars$7 = {
7554
+ const vars$9 = {
7209
7555
  ...compVars,
7210
7556
  ...helperVars,
7211
7557
  };
@@ -7213,43 +7559,43 @@ const vars$7 = {
7213
7559
  var loaderRadial$1 = /*#__PURE__*/Object.freeze({
7214
7560
  __proto__: null,
7215
7561
  default: loaderRadial,
7216
- vars: vars$7
7562
+ vars: vars$9
7217
7563
  });
7218
7564
 
7219
- const globalRefs = getThemeRefs(globals);
7220
- const vars$6 = ComboBoxClass.cssVarList;
7565
+ const globalRefs$2 = getThemeRefs(globals);
7566
+ const vars$8 = ComboBoxClass.cssVarList;
7221
7567
 
7222
7568
  const comboBox = {
7223
- [vars$6.hostWidth]: refs.width,
7224
- [vars$6.fontSize]: refs.fontSize,
7225
- [vars$6.fontFamily]: refs.fontFamily,
7226
- [vars$6.labelTextColor]: refs.labelTextColor,
7227
- [vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
7228
- [vars$6.inputBorderColor]: refs.borderColor,
7229
- [vars$6.inputBorderWidth]: refs.borderWidth,
7230
- [vars$6.inputBorderStyle]: refs.borderStyle,
7231
- [vars$6.inputBorderRadius]: refs.borderRadius,
7232
- [vars$6.inputOutlineColor]: refs.outlineColor,
7233
- [vars$6.inputOutlineOffset]: refs.outlineOffset,
7234
- [vars$6.inputOutlineWidth]: refs.outlineWidth,
7235
- [vars$6.inputOutlineStyle]: refs.outlineStyle,
7236
- [vars$6.labelRequiredIndicator]: refs.requiredIndicator,
7237
- [vars$6.inputValueTextColor]: refs.valueTextColor,
7238
- [vars$6.inputPlaceholderTextColor]: refs.placeholderTextColor,
7239
- [vars$6.inputBackgroundColor]: refs.backgroundColor,
7240
- [vars$6.inputHorizontalPadding]: refs.horizontalPadding,
7241
- [vars$6.inputHeight]: refs.inputHeight,
7242
- [vars$6.inputDropdownButtonColor]: globalRefs.colors.surface.contrast,
7243
- [vars$6.inputDropdownButtonCursor]: 'pointer',
7244
- [vars$6.inputDropdownButtonSize]: refs.toggleButtonSize,
7245
- [vars$6.inputDropdownButtonOffset]: globalRefs.spacing.xs,
7569
+ [vars$8.hostWidth]: refs.width,
7570
+ [vars$8.fontSize]: refs.fontSize,
7571
+ [vars$8.fontFamily]: refs.fontFamily,
7572
+ [vars$8.labelTextColor]: refs.labelTextColor,
7573
+ [vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
7574
+ [vars$8.inputBorderColor]: refs.borderColor,
7575
+ [vars$8.inputBorderWidth]: refs.borderWidth,
7576
+ [vars$8.inputBorderStyle]: refs.borderStyle,
7577
+ [vars$8.inputBorderRadius]: refs.borderRadius,
7578
+ [vars$8.inputOutlineColor]: refs.outlineColor,
7579
+ [vars$8.inputOutlineOffset]: refs.outlineOffset,
7580
+ [vars$8.inputOutlineWidth]: refs.outlineWidth,
7581
+ [vars$8.inputOutlineStyle]: refs.outlineStyle,
7582
+ [vars$8.labelRequiredIndicator]: refs.requiredIndicator,
7583
+ [vars$8.inputValueTextColor]: refs.valueTextColor,
7584
+ [vars$8.inputPlaceholderTextColor]: refs.placeholderTextColor,
7585
+ [vars$8.inputBackgroundColor]: refs.backgroundColor,
7586
+ [vars$8.inputHorizontalPadding]: refs.horizontalPadding,
7587
+ [vars$8.inputHeight]: refs.inputHeight,
7588
+ [vars$8.inputDropdownButtonColor]: globalRefs$2.colors.surface.contrast,
7589
+ [vars$8.inputDropdownButtonCursor]: 'pointer',
7590
+ [vars$8.inputDropdownButtonSize]: refs.toggleButtonSize,
7591
+ [vars$8.inputDropdownButtonOffset]: globalRefs$2.spacing.xs,
7246
7592
 
7247
7593
  _readonly: {
7248
- [vars$6.inputDropdownButtonCursor]: 'default',
7594
+ [vars$8.inputDropdownButtonCursor]: 'default',
7249
7595
  },
7250
7596
 
7251
- [vars$6.overlay.minHeight]: '400px',
7252
- [vars$6.overlay.margin]: '0 auto',
7597
+ [vars$8.overlay.minHeight]: '400px',
7598
+ [vars$8.overlay.margin]: '0 auto',
7253
7599
 
7254
7600
  // [vars.overlayCursor]: 'pointer',
7255
7601
  // [vars.overlayBackground]: globalRefs.colors.surface.light,
@@ -7260,41 +7606,41 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
7260
7606
  __proto__: null,
7261
7607
  comboBox: comboBox,
7262
7608
  default: comboBox,
7263
- vars: vars$6
7609
+ vars: vars$8
7264
7610
  });
7265
7611
 
7266
- const vars$5 = ImageClass.cssVarList;
7612
+ const vars$7 = ImageClass.cssVarList;
7267
7613
 
7268
7614
  const image = {};
7269
7615
 
7270
7616
  var image$1 = /*#__PURE__*/Object.freeze({
7271
7617
  __proto__: null,
7272
7618
  default: image,
7273
- vars: vars$5
7619
+ vars: vars$7
7274
7620
  });
7275
7621
 
7276
- const vars$4 = PhoneFieldClass.cssVarList;
7622
+ const vars$6 = PhoneFieldClass.cssVarList;
7277
7623
 
7278
7624
  const phoneField = {
7279
- [vars$4.hostWidth]: refs.width,
7280
- [vars$4.fontSize]: refs.fontSize,
7281
- [vars$4.fontFamily]: refs.fontFamily,
7282
- [vars$4.labelTextColor]: refs.labelTextColor,
7283
- [vars$4.labelRequiredIndicator]: refs.requiredIndicator,
7284
- [vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
7285
- [vars$4.inputValueTextColor]: refs.valueTextColor,
7286
- [vars$4.inputPlaceholderTextColor]: refs.placeholderTextColor,
7287
- [vars$4.inputBorderStyle]: refs.borderStyle,
7288
- [vars$4.inputBorderWidth]: refs.borderWidth,
7289
- [vars$4.inputBorderColor]: refs.borderColor,
7290
- [vars$4.inputBorderRadius]: refs.borderRadius,
7291
- [vars$4.inputOutlineStyle]: refs.outlineStyle,
7292
- [vars$4.inputOutlineWidth]: refs.outlineWidth,
7293
- [vars$4.inputOutlineColor]: refs.outlineColor,
7294
- [vars$4.inputOutlineOffset]: refs.outlineOffset,
7295
- [vars$4.phoneInputWidth]: refs.minWidth,
7296
- [vars$4.countryCodeInputWidth]: '5em',
7297
- [vars$4.countryCodeDropdownWidth]: '20em',
7625
+ [vars$6.hostWidth]: refs.width,
7626
+ [vars$6.fontSize]: refs.fontSize,
7627
+ [vars$6.fontFamily]: refs.fontFamily,
7628
+ [vars$6.labelTextColor]: refs.labelTextColor,
7629
+ [vars$6.labelRequiredIndicator]: refs.requiredIndicator,
7630
+ [vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
7631
+ [vars$6.inputValueTextColor]: refs.valueTextColor,
7632
+ [vars$6.inputPlaceholderTextColor]: refs.placeholderTextColor,
7633
+ [vars$6.inputBorderStyle]: refs.borderStyle,
7634
+ [vars$6.inputBorderWidth]: refs.borderWidth,
7635
+ [vars$6.inputBorderColor]: refs.borderColor,
7636
+ [vars$6.inputBorderRadius]: refs.borderRadius,
7637
+ [vars$6.inputOutlineStyle]: refs.outlineStyle,
7638
+ [vars$6.inputOutlineWidth]: refs.outlineWidth,
7639
+ [vars$6.inputOutlineColor]: refs.outlineColor,
7640
+ [vars$6.inputOutlineOffset]: refs.outlineOffset,
7641
+ [vars$6.phoneInputWidth]: refs.minWidth,
7642
+ [vars$6.countryCodeInputWidth]: '5em',
7643
+ [vars$6.countryCodeDropdownWidth]: '20em',
7298
7644
 
7299
7645
  // '@overlay': {
7300
7646
  // overlayItemBackgroundColor: 'red'
@@ -7304,127 +7650,173 @@ const phoneField = {
7304
7650
  var phoneField$1 = /*#__PURE__*/Object.freeze({
7305
7651
  __proto__: null,
7306
7652
  default: phoneField,
7307
- vars: vars$4
7653
+ vars: vars$6
7308
7654
  });
7309
7655
 
7310
- const vars$3 = PhoneFieldInputBoxClass.cssVarList;
7656
+ const vars$5 = PhoneFieldInputBoxClass.cssVarList;
7311
7657
 
7312
7658
  const phoneInputBoxField = {
7313
- [vars$3.hostWidth]: '16em',
7314
- [vars$3.hostMinWidth]: refs.minWidth,
7315
- [vars$3.fontSize]: refs.fontSize,
7316
- [vars$3.fontFamily]: refs.fontFamily,
7317
- [vars$3.labelTextColor]: refs.labelTextColor,
7318
- [vars$3.labelRequiredIndicator]: refs.requiredIndicator,
7319
- [vars$3.errorMessageTextColor]: refs.errorMessageTextColor,
7320
- [vars$3.inputValueTextColor]: refs.valueTextColor,
7321
- [vars$3.inputPlaceholderTextColor]: refs.placeholderTextColor,
7322
- [vars$3.inputBorderStyle]: refs.borderStyle,
7323
- [vars$3.inputBorderWidth]: refs.borderWidth,
7324
- [vars$3.inputBorderColor]: refs.borderColor,
7325
- [vars$3.inputBorderRadius]: refs.borderRadius,
7326
- [vars$3.inputOutlineStyle]: refs.outlineStyle,
7327
- [vars$3.inputOutlineWidth]: refs.outlineWidth,
7328
- [vars$3.inputOutlineColor]: refs.outlineColor,
7329
- [vars$3.inputOutlineOffset]: refs.outlineOffset,
7659
+ [vars$5.hostWidth]: '16em',
7660
+ [vars$5.hostMinWidth]: refs.minWidth,
7661
+ [vars$5.fontSize]: refs.fontSize,
7662
+ [vars$5.fontFamily]: refs.fontFamily,
7663
+ [vars$5.labelTextColor]: refs.labelTextColor,
7664
+ [vars$5.labelRequiredIndicator]: refs.requiredIndicator,
7665
+ [vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
7666
+ [vars$5.inputValueTextColor]: refs.valueTextColor,
7667
+ [vars$5.inputPlaceholderTextColor]: refs.placeholderTextColor,
7668
+ [vars$5.inputBorderStyle]: refs.borderStyle,
7669
+ [vars$5.inputBorderWidth]: refs.borderWidth,
7670
+ [vars$5.inputBorderColor]: refs.borderColor,
7671
+ [vars$5.inputBorderRadius]: refs.borderRadius,
7672
+ [vars$5.inputOutlineStyle]: refs.outlineStyle,
7673
+ [vars$5.inputOutlineWidth]: refs.outlineWidth,
7674
+ [vars$5.inputOutlineColor]: refs.outlineColor,
7675
+ [vars$5.inputOutlineOffset]: refs.outlineOffset,
7330
7676
  _fullWidth: {
7331
- [vars$3.hostWidth]: refs.width,
7677
+ [vars$5.hostWidth]: refs.width,
7332
7678
  },
7333
7679
  };
7334
7680
 
7335
7681
  var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
7336
7682
  __proto__: null,
7337
7683
  default: phoneInputBoxField,
7338
- vars: vars$3
7684
+ vars: vars$5
7339
7685
  });
7340
7686
 
7341
- const vars$2 = NewPasswordClass.cssVarList;
7687
+ const vars$4 = NewPasswordClass.cssVarList;
7342
7688
 
7343
7689
  const newPassword = {
7344
- [vars$2.hostWidth]: refs.width,
7345
- [vars$2.hostMinWidth]: refs.minWidth,
7346
- [vars$2.fontSize]: refs.fontSize,
7347
- [vars$2.fontFamily]: refs.fontFamily,
7348
- [vars$2.spaceBetweenInputs]: '1em',
7349
- [vars$2.errorMessageTextColor]: refs.errorMessageTextColor,
7690
+ [vars$4.hostWidth]: refs.width,
7691
+ [vars$4.hostMinWidth]: refs.minWidth,
7692
+ [vars$4.fontSize]: refs.fontSize,
7693
+ [vars$4.fontFamily]: refs.fontFamily,
7694
+ [vars$4.spaceBetweenInputs]: '1em',
7695
+ [vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
7350
7696
 
7351
7697
  _required: {
7352
7698
  // NewPassword doesn't pass `required` attribute to its Password components.
7353
7699
  // That's why we fake the required indicator on each input.
7354
7700
  // We do that by injecting `::after` element, and populating it with requiredIndicator content.
7355
- [vars$2.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
7701
+ [vars$4.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
7356
7702
  },
7357
7703
  };
7358
7704
 
7359
7705
  var newPassword$1 = /*#__PURE__*/Object.freeze({
7360
7706
  __proto__: null,
7361
7707
  default: newPassword,
7362
- vars: vars$2
7708
+ vars: vars$4
7363
7709
  });
7364
7710
 
7365
- const vars$1 = UploadFileClass.cssVarList;
7711
+ const vars$3 = UploadFileClass.cssVarList;
7366
7712
 
7367
7713
  const uploadFile = {
7368
- [vars$1.labelTextColor]: refs.labelTextColor,
7369
- [vars$1.fontFamily]: refs.fontFamily,
7714
+ [vars$3.labelTextColor]: refs.labelTextColor,
7715
+ [vars$3.fontFamily]: refs.fontFamily,
7370
7716
 
7371
- [vars$1.iconSize]: '2em',
7717
+ [vars$3.iconSize]: '2em',
7372
7718
 
7373
- [vars$1.hostPadding]: '0.75em',
7374
- [vars$1.gap]: '0.5em',
7719
+ [vars$3.hostPadding]: '0.75em',
7720
+ [vars$3.gap]: '0.5em',
7375
7721
 
7376
- [vars$1.fontSize]: '16px',
7377
- [vars$1.titleFontWeight]: '500',
7378
- [vars$1.lineHeight]: '1em',
7722
+ [vars$3.fontSize]: '16px',
7723
+ [vars$3.titleFontWeight]: '500',
7724
+ [vars$3.lineHeight]: '1em',
7379
7725
 
7380
- [vars$1.borderWidth]: refs.borderWidth,
7381
- [vars$1.borderColor]: refs.borderColor,
7382
- [vars$1.borderRadius]: refs.borderRadius,
7383
- [vars$1.borderStyle]: 'dashed',
7726
+ [vars$3.borderWidth]: refs.borderWidth,
7727
+ [vars$3.borderColor]: refs.borderColor,
7728
+ [vars$3.borderRadius]: refs.borderRadius,
7729
+ [vars$3.borderStyle]: 'dashed',
7384
7730
 
7385
7731
  _required: {
7386
- [vars$1.requiredIndicator]: refs.requiredIndicator,
7732
+ [vars$3.requiredIndicator]: refs.requiredIndicator,
7387
7733
  },
7388
7734
 
7389
7735
  size: {
7390
7736
  xs: {
7391
- [vars$1.hostHeight]: '196px',
7392
- [vars$1.hostWidth]: '200px',
7393
- [vars$1.titleFontSize]: '0.875em',
7394
- [vars$1.descriptionFontSize]: '0.875em',
7395
- [vars$1.lineHeight]: '1.25em',
7737
+ [vars$3.hostHeight]: '196px',
7738
+ [vars$3.hostWidth]: '200px',
7739
+ [vars$3.titleFontSize]: '0.875em',
7740
+ [vars$3.descriptionFontSize]: '0.875em',
7741
+ [vars$3.lineHeight]: '1.25em',
7396
7742
  },
7397
7743
  sm: {
7398
- [vars$1.hostHeight]: '216px',
7399
- [vars$1.hostWidth]: '230px',
7400
- [vars$1.titleFontSize]: '1em',
7401
- [vars$1.descriptionFontSize]: '0.875em',
7402
- [vars$1.lineHeight]: '1.25em',
7744
+ [vars$3.hostHeight]: '216px',
7745
+ [vars$3.hostWidth]: '230px',
7746
+ [vars$3.titleFontSize]: '1em',
7747
+ [vars$3.descriptionFontSize]: '0.875em',
7748
+ [vars$3.lineHeight]: '1.25em',
7403
7749
  },
7404
7750
  md: {
7405
- [vars$1.hostHeight]: '256px',
7406
- [vars$1.hostWidth]: '312px',
7407
- [vars$1.titleFontSize]: '1.125em',
7408
- [vars$1.descriptionFontSize]: '1em',
7409
- [vars$1.lineHeight]: '1.5em',
7751
+ [vars$3.hostHeight]: '256px',
7752
+ [vars$3.hostWidth]: '312px',
7753
+ [vars$3.titleFontSize]: '1.125em',
7754
+ [vars$3.descriptionFontSize]: '1em',
7755
+ [vars$3.lineHeight]: '1.5em',
7410
7756
  },
7411
7757
  lg: {
7412
- [vars$1.hostHeight]: '280px',
7413
- [vars$1.hostWidth]: '336px',
7414
- [vars$1.titleFontSize]: '1.125em',
7415
- [vars$1.descriptionFontSize]: '1.125em',
7416
- [vars$1.lineHeight]: '1.75em',
7758
+ [vars$3.hostHeight]: '280px',
7759
+ [vars$3.hostWidth]: '336px',
7760
+ [vars$3.titleFontSize]: '1.125em',
7761
+ [vars$3.descriptionFontSize]: '1.125em',
7762
+ [vars$3.lineHeight]: '1.75em',
7417
7763
  },
7418
7764
  },
7419
7765
 
7420
7766
  _fullWidth: {
7421
- [vars$1.hostWidth]: refs.width,
7767
+ [vars$3.hostWidth]: refs.width,
7422
7768
  },
7423
7769
  };
7424
7770
 
7425
7771
  var uploadFile$1 = /*#__PURE__*/Object.freeze({
7426
7772
  __proto__: null,
7427
7773
  default: uploadFile,
7774
+ vars: vars$3
7775
+ });
7776
+
7777
+ const globalRefs$1 = getThemeRefs(globals);
7778
+
7779
+ const vars$2 = SelectItemClass.cssVarList;
7780
+
7781
+ const selectItem = {
7782
+ [vars$2.backgroundColor]: globalRefs$1.colors.surface.light,
7783
+ [vars$2.labelTextColor]: globalRefs$1.colors.surface.contrast,
7784
+ [vars$2.borderColor]: globalRefs$1.colors.surface.main,
7785
+ [vars$2.borderStyle]: 'solid',
7786
+ [vars$2.borderRadius]: globalRefs$1.radius.sm,
7787
+
7788
+ _hover: {
7789
+ [vars$2.backgroundColor]: '#f4f5f5', // can we take it from the palette?
7790
+ },
7791
+
7792
+ _selected: {
7793
+ [vars$2.borderColor]: globalRefs$1.colors.surface.contrast,
7794
+ [vars$2.backgroundColor]: globalRefs$1.colors.surface.contrast,
7795
+ [vars$2.labelTextColor]: globalRefs$1.colors.surface.light,
7796
+ },
7797
+ };
7798
+
7799
+ var selectItem$1 = /*#__PURE__*/Object.freeze({
7800
+ __proto__: null,
7801
+ default: selectItem,
7802
+ vars: vars$2
7803
+ });
7804
+
7805
+ const globalRefs = getThemeRefs(globals);
7806
+ const vars$1 = SingleSelectClass.cssVarList;
7807
+
7808
+ const singleSelect = {
7809
+ [vars$1.fontFamily]: refs.fontFamily,
7810
+ [vars$1.labelTextColor]: refs.labelTextColor,
7811
+ [vars$1.labelRequiredIndicator]: refs.requiredIndicator,
7812
+ [vars$1.errorMessageTextColor]: refs.errorMessageTextColor,
7813
+ [vars$1.itemsSpacing]: globalRefs.spacing.sm,
7814
+ [vars$1.hostWidth]: refs.width,
7815
+ };
7816
+
7817
+ var singleSelect$1 = /*#__PURE__*/Object.freeze({
7818
+ __proto__: null,
7819
+ default: singleSelect,
7428
7820
  vars: vars$1
7429
7821
  });
7430
7822
 
@@ -7453,6 +7845,8 @@ const components = {
7453
7845
  newPassword: newPassword$1,
7454
7846
  inputWrapper,
7455
7847
  uploadFile: uploadFile$1,
7848
+ selectItem: selectItem$1,
7849
+ singleSelect: singleSelect$1,
7456
7850
  };
7457
7851
 
7458
7852
  const theme = Object.keys(components).reduce(
@@ -7465,7 +7859,7 @@ const vars = Object.keys(components).reduce(
7465
7859
  );
7466
7860
 
7467
7861
  const defaultTheme = { globals, components: theme };
7468
- const themeVars = { globals: vars$p, components: vars };
7862
+ const themeVars = { globals: vars$r, components: vars };
7469
7863
 
7470
- export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
7864
+ export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SelectItemClass, SingleSelectClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
7471
7865
  //# sourceMappingURL=index.esm.js.map