@descope/web-components-ui 1.0.177 → 1.0.179

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (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