@descope/web-components-ui 1.0.279 → 1.0.280

Sign up to get free protection for your applications and to get access to all the features.
Files changed (47) hide show
  1. package/dist/cjs/index.cjs.js +1123 -890
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.esm.js +1581 -964
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/umd/1000.js +1 -1
  7. package/dist/umd/1438.js +2 -2
  8. package/dist/umd/{9558.js → 1621.js} +117 -117
  9. package/dist/umd/2066.js +1 -1
  10. package/dist/umd/3280.js +197 -0
  11. package/dist/umd/3280.js.LICENSE.txt +29 -0
  12. package/dist/umd/{6542.js → 3951.js} +6 -6
  13. package/dist/umd/{6542.js.LICENSE.txt → 3951.js.LICENSE.txt} +0 -6
  14. package/dist/umd/422.js +1 -1
  15. package/dist/umd/5806.js +1 -1
  16. package/dist/umd/6770.js +1 -1
  17. package/dist/umd/6977.js +2 -0
  18. package/dist/umd/6977.js.LICENSE.txt +5 -0
  19. package/dist/umd/7056.js +1 -1
  20. package/dist/umd/7531.js +2 -2
  21. package/dist/umd/7583.js +2 -2
  22. package/dist/umd/8725.js +1 -1
  23. package/dist/umd/9092.js +2 -2
  24. package/dist/umd/9437.js +1 -1
  25. package/dist/umd/descope-combo-box-index-js.js +1 -1
  26. package/dist/umd/descope-notification-descope-notification-card-index-js.js +1 -1
  27. package/dist/umd/descope-notification-index-js.js +1 -1
  28. package/dist/umd/index.js +1 -1
  29. package/dist/umd/mapping-fields-descope-mappings-field-descope-mapping-item-index-js.js +1 -0
  30. package/dist/umd/mapping-fields-descope-mappings-field-descope-mappings-field-internal-index-js.js +1 -0
  31. package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +1 -0
  32. package/package.json +4 -1
  33. package/src/components/descope-combo-box/ComboBoxClass.js +4 -0
  34. package/src/components/mapping-fields/descope-mappings-field/MappingsFieldClass.js +159 -0
  35. package/src/components/mapping-fields/descope-mappings-field/descope-mapping-item/MappingItem.js +158 -0
  36. package/src/components/mapping-fields/descope-mappings-field/descope-mapping-item/index.js +3 -0
  37. package/src/components/mapping-fields/descope-mappings-field/descope-mappings-field-internal/MappingsFieldInternal.js +232 -0
  38. package/src/components/mapping-fields/descope-mappings-field/descope-mappings-field-internal/index.js +3 -0
  39. package/src/components/mapping-fields/descope-mappings-field/index.js +14 -0
  40. package/src/index.cjs.js +1 -0
  41. package/src/index.d.ts +1 -0
  42. package/src/index.js +1 -0
  43. package/src/mixins/inputValidationMixin.js +8 -0
  44. package/src/mixins/proxyInputMixin.js +48 -6
  45. package/src/theme/components/index.js +2 -0
  46. package/src/theme/components/mappingsField.js +25 -0
  47. /package/dist/umd/{9558.js.LICENSE.txt → 1621.js.LICENSE.txt} +0 -0
package/dist/index.esm.js CHANGED
@@ -13,6 +13,9 @@ import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
13
13
  import '@vaadin/multi-select-combo-box';
14
14
  import '@vaadin/dialog';
15
15
  import '@vaadin/notification';
16
+ import '@vaadin/custom-field';
17
+ import '@vaadin/icon';
18
+ import '@vaadin/icons';
16
19
  import merge from 'lodash.merge';
17
20
  import Color from 'color';
18
21
 
@@ -767,6 +770,14 @@ const inputValidationMixin = (superclass) =>
767
770
 
768
771
  #internals;
769
772
 
773
+ get internals() {
774
+ return this.#internals;
775
+ }
776
+
777
+ set internals(value) {
778
+ this.#internals = value;
779
+ }
780
+
770
781
  constructor() {
771
782
  super();
772
783
 
@@ -953,7 +964,10 @@ const proxyInputMixin =
953
964
  ({
954
965
  proxyProps = [],
955
966
  // allows us to set the event that should trigger validation
967
+ // it can be either a string or an array of strings (for multiple events)
956
968
  inputEvent = 'input',
969
+ // Proxies all validations from the parent component to the input element
970
+ proxyParentValidation = false,
957
971
  }) =>
958
972
  (superclass) =>
959
973
  class ProxyInputMixinClass extends inputValidationMixin(superclass) {
@@ -1043,12 +1057,16 @@ const proxyInputMixin =
1043
1057
  // on some cases the base element is not ready so the inputElement is empty
1044
1058
  // we are deferring this section to make sure the base element is ready
1045
1059
  setTimeout(() => {
1046
- this.baseElement?.addEventListener(inputEvent, () => {
1047
- if (!this.baseElement.checkValidity()) {
1048
- this.#handleErrorMessage();
1049
- } else {
1050
- this.removeAttribute('invalid');
1051
- }
1060
+ const validationEvents = Array.isArray(inputEvent) ? inputEvent : [inputEvent];
1061
+
1062
+ validationEvents.forEach((e) => {
1063
+ this.baseElement?.addEventListener(e, () => {
1064
+ if (!this.baseElement.checkValidity()) {
1065
+ this.#handleErrorMessage();
1066
+ } else {
1067
+ this.removeAttribute('invalid');
1068
+ }
1069
+ });
1052
1070
  });
1053
1071
 
1054
1072
  this.baseElement.addEventListener('change', () => {
@@ -1071,6 +1089,41 @@ const proxyInputMixin =
1071
1089
 
1072
1090
  forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
1073
1091
  });
1092
+
1093
+ if (proxyParentValidation) {
1094
+ // All functions called on the inputElement internals will be applied to the parent
1095
+ // component internals as well. As a result, there's no need to add outer mechanisms
1096
+ // to update the parent component's validity state based on the input elements validity.
1097
+ const inputElementInternals = this.inputElement.internals;
1098
+ const parentThis = this;
1099
+ this.inputElement.internals = new Proxy(inputElementInternals, {
1100
+ get: (target, prop) => {
1101
+ if (typeof target[prop] === 'function' && prop === 'setValidity') {
1102
+ return (...args) => {
1103
+ // If we're calling setValidity with 3 args, then the validationTarget
1104
+ // needs to be swapped to be the inputElement
1105
+ if (args.length === 3) {
1106
+ const newArgs = args.slice(0, args.length - 1);
1107
+ newArgs.push(parentThis.inputElement);
1108
+ parentThis.internals[prop](...newArgs);
1109
+ } else {
1110
+ parentThis.internals[prop](...args);
1111
+ }
1112
+ return target[prop](...args);
1113
+ };
1114
+ }
1115
+
1116
+ if (typeof target[prop] === 'function') {
1117
+ return (...args) => {
1118
+ parentThis.internals[prop](...args);
1119
+ return target[prop](...args);
1120
+ };
1121
+ }
1122
+
1123
+ return target[prop];
1124
+ },
1125
+ });
1126
+ }
1074
1127
  }
1075
1128
  };
1076
1129
 
@@ -1289,7 +1342,7 @@ const clickableMixin = (superclass) =>
1289
1342
  }
1290
1343
  };
1291
1344
 
1292
- const componentName$I = getComponentName('button');
1345
+ const componentName$L = getComponentName('button');
1293
1346
 
1294
1347
  const resetStyles = `
1295
1348
  :host {
@@ -1327,7 +1380,7 @@ const iconStyles = `
1327
1380
 
1328
1381
  const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
1329
1382
 
1330
- const { host: host$h, label: label$a } = {
1383
+ const { host: host$i, label: label$a } = {
1331
1384
  host: { selector: () => ':host' },
1332
1385
  label: { selector: '::part(label)' },
1333
1386
  };
@@ -1339,7 +1392,7 @@ const ButtonClass = compose(
1339
1392
  mappings: {
1340
1393
  hostWidth: { property: 'width' },
1341
1394
  hostHeight: { property: 'height' },
1342
- hostDirection: { ...host$h, property: 'direction' },
1395
+ hostDirection: { ...host$i, property: 'direction' },
1343
1396
  fontSize: {},
1344
1397
  fontFamily: {},
1345
1398
 
@@ -1391,7 +1444,7 @@ const ButtonClass = compose(
1391
1444
  }
1392
1445
  `,
1393
1446
  excludeAttrsSync: ['tabindex'],
1394
- componentName: componentName$I,
1447
+ componentName: componentName$L,
1395
1448
  })
1396
1449
  );
1397
1450
 
@@ -1428,7 +1481,7 @@ loadingIndicatorStyles = `
1428
1481
  }
1429
1482
  `;
1430
1483
 
1431
- customElements.define(componentName$I, ButtonClass);
1484
+ customElements.define(componentName$L, ButtonClass);
1432
1485
 
1433
1486
  const createBaseInputClass = (...args) =>
1434
1487
  compose(
@@ -1438,13 +1491,13 @@ const createBaseInputClass = (...args) =>
1438
1491
  inputEventsDispatchingMixin
1439
1492
  )(createBaseClass(...args));
1440
1493
 
1441
- const componentName$H = getComponentName('boolean-field-internal');
1494
+ const componentName$K = getComponentName('boolean-field-internal');
1442
1495
 
1443
1496
  const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
1444
1497
 
1445
- const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$H, baseSelector: 'div' });
1498
+ const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$K, baseSelector: 'div' });
1446
1499
 
1447
- class BooleanInputInternal extends BaseInputClass$5 {
1500
+ class BooleanInputInternal extends BaseInputClass$7 {
1448
1501
  static get observedAttributes() {
1449
1502
  return ['readonly'];
1450
1503
  }
@@ -1518,14 +1571,14 @@ const booleanFieldMixin = (superclass) =>
1518
1571
 
1519
1572
  const template = document.createElement('template');
1520
1573
  template.innerHTML = `
1521
- <${componentName$H}
1574
+ <${componentName$K}
1522
1575
  tabindex="-1"
1523
1576
  slot="input"
1524
- ></${componentName$H}>
1577
+ ></${componentName$K}>
1525
1578
  `;
1526
1579
 
1527
1580
  this.baseElement.appendChild(template.content.cloneNode(true));
1528
- this.inputElement = this.shadowRoot.querySelector(componentName$H);
1581
+ this.inputElement = this.shadowRoot.querySelector(componentName$K);
1529
1582
  this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
1530
1583
 
1531
1584
  forwardAttrs(this, this.inputElement, {
@@ -1724,17 +1777,17 @@ descope-boolean-field-internal {
1724
1777
  }
1725
1778
  `;
1726
1779
 
1727
- const componentName$G = getComponentName('checkbox');
1780
+ const componentName$J = getComponentName('checkbox');
1728
1781
 
1729
1782
  const {
1730
- host: host$g,
1783
+ host: host$h,
1731
1784
  component: component$1,
1732
1785
  checkboxElement,
1733
1786
  checkboxSurface,
1734
1787
  checkboxLabel: checkboxLabel$1,
1735
1788
  requiredIndicator: requiredIndicator$b,
1736
- helperText: helperText$9,
1737
- errorMessage: errorMessage$b,
1789
+ helperText: helperText$a,
1790
+ errorMessage: errorMessage$c,
1738
1791
  } = {
1739
1792
  host: { selector: () => ':host' },
1740
1793
  requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
@@ -1749,11 +1802,11 @@ const {
1749
1802
  const CheckboxClass = compose(
1750
1803
  createStyleMixin({
1751
1804
  mappings: {
1752
- hostWidth: { ...host$g, property: 'width' },
1753
- hostDirection: { ...host$g, property: 'direction' },
1805
+ hostWidth: { ...host$h, property: 'width' },
1806
+ hostDirection: { ...host$h, property: 'direction' },
1754
1807
 
1755
- fontSize: [host$g, checkboxElement, checkboxLabel$1],
1756
- fontFamily: [checkboxLabel$1, helperText$9, errorMessage$b],
1808
+ fontSize: [host$h, checkboxElement, checkboxLabel$1],
1809
+ fontFamily: [checkboxLabel$1, helperText$a, errorMessage$c],
1757
1810
 
1758
1811
  labelTextColor: { ...checkboxLabel$1, property: 'color' },
1759
1812
  labelSpacing: { ...checkboxLabel$1, property: 'padding-inline-start' },
@@ -1761,7 +1814,7 @@ const CheckboxClass = compose(
1761
1814
  labelFontWeight: { ...checkboxLabel$1, property: 'font-weight' },
1762
1815
  labelRequiredIndicator: { ...requiredIndicator$b, property: 'content' },
1763
1816
 
1764
- errorMessageTextColor: { ...errorMessage$b, property: 'color' },
1817
+ errorMessageTextColor: { ...errorMessage$c, property: 'color' },
1765
1818
 
1766
1819
  inputValueTextColor: { ...checkboxSurface, property: 'color' },
1767
1820
  inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
@@ -1830,25 +1883,25 @@ const CheckboxClass = compose(
1830
1883
  }
1831
1884
  `,
1832
1885
  excludeAttrsSync: ['label', 'tabindex'],
1833
- componentName: componentName$G,
1886
+ componentName: componentName$J,
1834
1887
  })
1835
1888
  );
1836
1889
 
1837
- customElements.define(componentName$H, BooleanInputInternal);
1890
+ customElements.define(componentName$K, BooleanInputInternal);
1838
1891
 
1839
- customElements.define(componentName$G, CheckboxClass);
1892
+ customElements.define(componentName$J, CheckboxClass);
1840
1893
 
1841
- const componentName$F = getComponentName('switch-toggle');
1894
+ const componentName$I = getComponentName('switch-toggle');
1842
1895
 
1843
1896
  const {
1844
- host: host$f,
1897
+ host: host$g,
1845
1898
  component,
1846
1899
  checkboxElement: track,
1847
1900
  checkboxSurface: knob,
1848
1901
  checkboxLabel,
1849
1902
  requiredIndicator: requiredIndicator$a,
1850
- helperText: helperText$8,
1851
- errorMessage: errorMessage$a,
1903
+ helperText: helperText$9,
1904
+ errorMessage: errorMessage$b,
1852
1905
  } = {
1853
1906
  host: { selector: () => ':host' },
1854
1907
  requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
@@ -1863,11 +1916,11 @@ const {
1863
1916
  const SwitchToggleClass = compose(
1864
1917
  createStyleMixin({
1865
1918
  mappings: {
1866
- hostWidth: { ...host$f, property: 'width' },
1867
- hostDirection: { ...host$f, property: 'direction' },
1919
+ hostWidth: { ...host$g, property: 'width' },
1920
+ hostDirection: { ...host$g, property: 'direction' },
1868
1921
 
1869
1922
  fontSize: [component, checkboxLabel, checkboxLabel],
1870
- fontFamily: [checkboxLabel, helperText$8, errorMessage$a],
1923
+ fontFamily: [checkboxLabel, helperText$9, errorMessage$b],
1871
1924
 
1872
1925
  labelTextColor: { ...checkboxLabel, property: 'color' },
1873
1926
  labelSpacing: { ...checkboxLabel, property: 'padding-inline-start' },
@@ -1875,7 +1928,7 @@ const SwitchToggleClass = compose(
1875
1928
  labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
1876
1929
  labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
1877
1930
 
1878
- errorMessageTextColor: { ...errorMessage$a, property: 'color' },
1931
+ errorMessageTextColor: { ...errorMessage$b, property: 'color' },
1879
1932
 
1880
1933
  trackBorderWidth: { ...track, property: 'border-width' },
1881
1934
  trackBorderStyle: { ...track, property: 'border-style' },
@@ -1970,17 +2023,17 @@ const SwitchToggleClass = compose(
1970
2023
  }
1971
2024
  `,
1972
2025
  excludeAttrsSync: ['label', 'tabindex'],
1973
- componentName: componentName$F,
2026
+ componentName: componentName$I,
1974
2027
  })
1975
2028
  );
1976
2029
 
1977
- customElements.define(componentName$F, SwitchToggleClass);
2030
+ customElements.define(componentName$I, SwitchToggleClass);
1978
2031
 
1979
- const componentName$E = getComponentName('loader-linear');
2032
+ const componentName$H = getComponentName('loader-linear');
1980
2033
 
1981
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$E, baseSelector: ':host > div' }) {
2034
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$H, baseSelector: ':host > div' }) {
1982
2035
  static get componentName() {
1983
- return componentName$E;
2036
+ return componentName$H;
1984
2037
  }
1985
2038
 
1986
2039
  constructor() {
@@ -2016,18 +2069,18 @@ const selectors$2 = {
2016
2069
  host: { selector: () => ':host' },
2017
2070
  };
2018
2071
 
2019
- const { after: after$1, host: host$e } = selectors$2;
2072
+ const { after: after$1, host: host$f } = selectors$2;
2020
2073
 
2021
2074
  const LoaderLinearClass = compose(
2022
2075
  createStyleMixin({
2023
2076
  mappings: {
2024
2077
  hostDisplay: {},
2025
- hostWidth: { ...host$e, property: 'width' },
2078
+ hostWidth: { ...host$f, property: 'width' },
2026
2079
  barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
2027
2080
  barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
2028
2081
  verticalPadding: [
2029
- { ...host$e, property: 'padding-top' },
2030
- { ...host$e, property: 'padding-bottom' },
2082
+ { ...host$f, property: 'padding-top' },
2083
+ { ...host$f, property: 'padding-bottom' },
2031
2084
  ],
2032
2085
  barBackgroundColor: { property: 'background-color' },
2033
2086
  barColor: { ...after$1, property: 'background-color' },
@@ -2041,11 +2094,11 @@ const LoaderLinearClass = compose(
2041
2094
  componentNameValidationMixin
2042
2095
  )(RawLoaderLinear);
2043
2096
 
2044
- customElements.define(componentName$E, LoaderLinearClass);
2097
+ customElements.define(componentName$H, LoaderLinearClass);
2045
2098
 
2046
- const componentName$D = getComponentName('loader-radial');
2099
+ const componentName$G = getComponentName('loader-radial');
2047
2100
 
2048
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
2101
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$G, baseSelector: ':host > div' }) {
2049
2102
  constructor() {
2050
2103
  super();
2051
2104
 
@@ -2089,11 +2142,11 @@ const LoaderRadialClass = compose(
2089
2142
  componentNameValidationMixin
2090
2143
  )(RawLoaderRadial);
2091
2144
 
2092
- customElements.define(componentName$D, LoaderRadialClass);
2145
+ customElements.define(componentName$G, LoaderRadialClass);
2093
2146
 
2094
- const componentName$C = getComponentName('container');
2147
+ const componentName$F = getComponentName('container');
2095
2148
 
2096
- class RawContainer extends createBaseClass({ componentName: componentName$C, baseSelector: 'slot' }) {
2149
+ class RawContainer extends createBaseClass({ componentName: componentName$F, baseSelector: 'slot' }) {
2097
2150
  constructor() {
2098
2151
  super();
2099
2152
 
@@ -2146,13 +2199,13 @@ const ContainerClass = compose(
2146
2199
  componentNameValidationMixin
2147
2200
  )(RawContainer);
2148
2201
 
2149
- customElements.define(componentName$C, ContainerClass);
2202
+ customElements.define(componentName$F, ContainerClass);
2150
2203
 
2151
2204
  // eslint-disable-next-line max-classes-per-file
2152
2205
 
2153
- const componentName$B = getComponentName('text');
2206
+ const componentName$E = getComponentName('text');
2154
2207
 
2155
- class RawText extends createBaseClass({ componentName: componentName$B, baseSelector: ':host > slot' }) {
2208
+ class RawText extends createBaseClass({ componentName: componentName$E, baseSelector: ':host > slot' }) {
2156
2209
  constructor() {
2157
2210
  super();
2158
2211
 
@@ -2212,8 +2265,8 @@ const TextClass = compose(
2212
2265
  customTextMixin
2213
2266
  )(RawText);
2214
2267
 
2215
- const componentName$A = getComponentName('divider');
2216
- class RawDivider extends createBaseClass({ componentName: componentName$A, baseSelector: ':host > div' }) {
2268
+ const componentName$D = getComponentName('divider');
2269
+ class RawDivider extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
2217
2270
  constructor() {
2218
2271
  super();
2219
2272
 
@@ -2259,7 +2312,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$A, baseS
2259
2312
  }
2260
2313
 
2261
2314
  const textVars$3 = TextClass.cssVarList;
2262
- const { host: host$d, before, after, text: text$3 } = {
2315
+ const { host: host$e, before, after, text: text$3 } = {
2263
2316
  host: { selector: () => ':host' },
2264
2317
  before: { selector: '::before' },
2265
2318
  after: { selector: '::after' },
@@ -2269,8 +2322,8 @@ const { host: host$d, before, after, text: text$3 } = {
2269
2322
  const DividerClass = compose(
2270
2323
  createStyleMixin({
2271
2324
  mappings: {
2272
- hostWidth: { ...host$d, property: 'width' },
2273
- hostPadding: { ...host$d, property: 'padding' },
2325
+ hostWidth: { ...host$e, property: 'width' },
2326
+ hostPadding: { ...host$e, property: 'padding' },
2274
2327
  hostDirection: { ...text$3, property: 'direction' },
2275
2328
 
2276
2329
  minHeight: {},
@@ -2312,19 +2365,19 @@ const DividerClass = compose(
2312
2365
  componentNameValidationMixin
2313
2366
  )(RawDivider);
2314
2367
 
2315
- customElements.define(componentName$B, TextClass);
2368
+ customElements.define(componentName$E, TextClass);
2316
2369
 
2317
- customElements.define(componentName$A, DividerClass);
2370
+ customElements.define(componentName$D, DividerClass);
2318
2371
 
2319
2372
  const {
2320
- host: host$c,
2373
+ host: host$d,
2321
2374
  label: label$9,
2322
2375
  placeholder: placeholder$3,
2323
2376
  requiredIndicator: requiredIndicator$9,
2324
2377
  inputField: inputField$6,
2325
2378
  input,
2326
- helperText: helperText$7,
2327
- errorMessage: errorMessage$9,
2379
+ helperText: helperText$8,
2380
+ errorMessage: errorMessage$a,
2328
2381
  disabledPlaceholder,
2329
2382
  } = {
2330
2383
  host: { selector: () => ':host' },
@@ -2340,12 +2393,12 @@ const {
2340
2393
 
2341
2394
  var textFieldMappings = {
2342
2395
  // we apply font-size also on the host so we can set its width with em
2343
- fontSize: [{}, host$c],
2344
- fontFamily: [label$9, inputField$6, helperText$7, errorMessage$9],
2396
+ fontSize: [{}, host$d],
2397
+ fontFamily: [label$9, inputField$6, helperText$8, errorMessage$a],
2345
2398
 
2346
- hostWidth: { ...host$c, property: 'width' },
2347
- hostMinWidth: { ...host$c, property: 'min-width' },
2348
- hostDirection: { ...host$c, property: 'direction' },
2399
+ hostWidth: { ...host$d, property: 'width' },
2400
+ hostMinWidth: { ...host$d, property: 'min-width' },
2401
+ hostDirection: { ...host$d, property: 'direction' },
2349
2402
 
2350
2403
  inputBackgroundColor: { ...inputField$6, property: 'background-color' },
2351
2404
 
@@ -2355,7 +2408,7 @@ var textFieldMappings = {
2355
2408
  { ...label$9, property: '-webkit-text-fill-color' },
2356
2409
  { ...requiredIndicator$9, property: '-webkit-text-fill-color' },
2357
2410
  ],
2358
- errorMessageTextColor: { ...errorMessage$9, property: 'color' },
2411
+ errorMessageTextColor: { ...errorMessage$a, property: 'color' },
2359
2412
 
2360
2413
  inputValueTextColor: { ...inputField$6, property: 'color' },
2361
2414
  inputCaretTextColor: { ...input, property: 'color' },
@@ -2386,9 +2439,9 @@ var textFieldMappings = {
2386
2439
  ],
2387
2440
  };
2388
2441
 
2389
- const componentName$z = getComponentName('email-field');
2442
+ const componentName$C = getComponentName('email-field');
2390
2443
 
2391
- const customMixin$6 = (superclass) =>
2444
+ const customMixin$7 = (superclass) =>
2392
2445
  class EmailFieldMixinClass extends superclass {
2393
2446
  init() {
2394
2447
  super.init?.();
@@ -2402,7 +2455,7 @@ const EmailFieldClass = compose(
2402
2455
  draggableMixin,
2403
2456
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
2404
2457
  componentNameValidationMixin,
2405
- customMixin$6
2458
+ customMixin$7
2406
2459
  )(
2407
2460
  createProxy({
2408
2461
  slots: ['', 'suffix'],
@@ -2421,15 +2474,15 @@ const EmailFieldClass = compose(
2421
2474
  ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
2422
2475
  `,
2423
2476
  excludeAttrsSync: ['tabindex'],
2424
- componentName: componentName$z,
2477
+ componentName: componentName$C,
2425
2478
  })
2426
2479
  );
2427
2480
 
2428
- customElements.define(componentName$z, EmailFieldClass);
2481
+ customElements.define(componentName$C, EmailFieldClass);
2429
2482
 
2430
- const componentName$y = getComponentName('link');
2483
+ const componentName$B = getComponentName('link');
2431
2484
 
2432
- class RawLink extends createBaseClass({ componentName: componentName$y, baseSelector: ':host a' }) {
2485
+ class RawLink extends createBaseClass({ componentName: componentName$B, baseSelector: ':host a' }) {
2433
2486
  constructor() {
2434
2487
  super();
2435
2488
 
@@ -2475,12 +2528,12 @@ const selectors$1 = {
2475
2528
  text: { selector: () => TextClass.componentName },
2476
2529
  };
2477
2530
 
2478
- const { anchor, text: text$2, host: host$b, wrapper: wrapper$1 } = selectors$1;
2531
+ const { anchor, text: text$2, host: host$c, wrapper: wrapper$1 } = selectors$1;
2479
2532
 
2480
2533
  const LinkClass = compose(
2481
2534
  createStyleMixin({
2482
2535
  mappings: {
2483
- hostWidth: { ...host$b, property: 'width' },
2536
+ hostWidth: { ...host$c, property: 'width' },
2484
2537
  hostDirection: { ...text$2, property: 'direction' },
2485
2538
  textAlign: wrapper$1,
2486
2539
  textColor: [
@@ -2494,7 +2547,7 @@ const LinkClass = compose(
2494
2547
  componentNameValidationMixin
2495
2548
  )(RawLink);
2496
2549
 
2497
- customElements.define(componentName$y, LinkClass);
2550
+ customElements.define(componentName$B, LinkClass);
2498
2551
 
2499
2552
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
2500
2553
  let style;
@@ -2546,37 +2599,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
2546
2599
  return CssVarImageClass;
2547
2600
  };
2548
2601
 
2549
- const componentName$x = getComponentName('logo');
2602
+ const componentName$A = getComponentName('logo');
2550
2603
 
2551
2604
  const LogoClass = createCssVarImageClass({
2552
- componentName: componentName$x,
2605
+ componentName: componentName$A,
2553
2606
  varName: 'url',
2554
2607
  fallbackVarName: 'fallbackUrl',
2555
2608
  });
2556
2609
 
2557
- customElements.define(componentName$x, LogoClass);
2610
+ customElements.define(componentName$A, LogoClass);
2558
2611
 
2559
- const componentName$w = getComponentName('totp-image');
2612
+ const componentName$z = getComponentName('totp-image');
2560
2613
 
2561
2614
  const TotpImageClass = createCssVarImageClass({
2562
- componentName: componentName$w,
2615
+ componentName: componentName$z,
2563
2616
  varName: 'url',
2564
2617
  fallbackVarName: 'fallbackUrl',
2565
2618
  });
2566
2619
 
2567
- customElements.define(componentName$w, TotpImageClass);
2620
+ customElements.define(componentName$z, TotpImageClass);
2568
2621
 
2569
- const componentName$v = getComponentName('notp-image');
2622
+ const componentName$y = getComponentName('notp-image');
2570
2623
 
2571
2624
  const NotpImageClass = createCssVarImageClass({
2572
- componentName: componentName$v,
2625
+ componentName: componentName$y,
2573
2626
  varName: 'url',
2574
2627
  fallbackVarName: 'fallbackUrl',
2575
2628
  });
2576
2629
 
2577
- customElements.define(componentName$v, NotpImageClass);
2630
+ customElements.define(componentName$y, NotpImageClass);
2578
2631
 
2579
- const componentName$u = getComponentName('number-field');
2632
+ const componentName$x = getComponentName('number-field');
2580
2633
 
2581
2634
  const NumberFieldClass = compose(
2582
2635
  createStyleMixin({
@@ -2602,11 +2655,11 @@ const NumberFieldClass = compose(
2602
2655
  ${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
2603
2656
  `,
2604
2657
  excludeAttrsSync: ['tabindex'],
2605
- componentName: componentName$u,
2658
+ componentName: componentName$x,
2606
2659
  })
2607
2660
  );
2608
2661
 
2609
- customElements.define(componentName$u, NumberFieldClass);
2662
+ customElements.define(componentName$x, NumberFieldClass);
2610
2663
 
2611
2664
  const focusElement = (ele) => {
2612
2665
  ele?.focus();
@@ -2624,17 +2677,17 @@ const getSanitizedCharacters = (str) => {
2624
2677
 
2625
2678
  /* eslint-disable no-param-reassign */
2626
2679
 
2627
- const componentName$t = getComponentName('passcode-internal');
2680
+ const componentName$w = getComponentName('passcode-internal');
2628
2681
 
2629
2682
  const observedAttributes$5 = ['digits', 'loading'];
2630
2683
 
2631
2684
  const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
2632
2685
 
2633
- const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$t, baseSelector: 'div' });
2686
+ const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$w, baseSelector: 'div' });
2634
2687
 
2635
- class PasscodeInternal extends BaseInputClass$4 {
2688
+ class PasscodeInternal extends BaseInputClass$6 {
2636
2689
  static get observedAttributes() {
2637
- return observedAttributes$5.concat(BaseInputClass$4.observedAttributes || []);
2690
+ return observedAttributes$5.concat(BaseInputClass$6.observedAttributes || []);
2638
2691
  }
2639
2692
 
2640
2693
  constructor() {
@@ -2856,11 +2909,11 @@ class PasscodeInternal extends BaseInputClass$4 {
2856
2909
  }
2857
2910
  }
2858
2911
 
2859
- const componentName$s = getComponentName('text-field');
2912
+ const componentName$v = getComponentName('text-field');
2860
2913
 
2861
2914
  const observedAttrs = ['type'];
2862
2915
 
2863
- const customMixin$5 = (superclass) =>
2916
+ const customMixin$6 = (superclass) =>
2864
2917
  class TextFieldClass extends superclass {
2865
2918
  static get observedAttributes() {
2866
2919
  return observedAttrs.concat(superclass.observedAttributes || []);
@@ -2887,7 +2940,7 @@ const TextFieldClass = compose(
2887
2940
  draggableMixin,
2888
2941
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
2889
2942
  componentNameValidationMixin,
2890
- customMixin$5
2943
+ customMixin$6
2891
2944
  )(
2892
2945
  createProxy({
2893
2946
  slots: ['prefix', 'suffix'],
@@ -2906,15 +2959,15 @@ const TextFieldClass = compose(
2906
2959
  ${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
2907
2960
  `,
2908
2961
  excludeAttrsSync: ['tabindex'],
2909
- componentName: componentName$s,
2962
+ componentName: componentName$v,
2910
2963
  })
2911
2964
  );
2912
2965
 
2913
- const componentName$r = getComponentName('passcode');
2966
+ const componentName$u = getComponentName('passcode');
2914
2967
 
2915
2968
  const observedAttributes$4 = ['digits'];
2916
2969
 
2917
- const customMixin$4 = (superclass) =>
2970
+ const customMixin$5 = (superclass) =>
2918
2971
  class PasscodeMixinClass extends superclass {
2919
2972
  static get observedAttributes() {
2920
2973
  return observedAttributes$4.concat(superclass.observedAttributes || []);
@@ -2929,17 +2982,17 @@ const customMixin$4 = (superclass) =>
2929
2982
  const template = document.createElement('template');
2930
2983
 
2931
2984
  template.innerHTML = `
2932
- <${componentName$t}
2985
+ <${componentName$w}
2933
2986
  bordered="true"
2934
2987
  name="code"
2935
2988
  tabindex="-1"
2936
2989
  slot="input"
2937
- ><slot></slot></${componentName$t}>
2990
+ ><slot></slot></${componentName$w}>
2938
2991
  `;
2939
2992
 
2940
2993
  this.baseElement.appendChild(template.content.cloneNode(true));
2941
2994
 
2942
- this.inputElement = this.shadowRoot.querySelector(componentName$t);
2995
+ this.inputElement = this.shadowRoot.querySelector(componentName$w);
2943
2996
 
2944
2997
  forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
2945
2998
  }
@@ -2954,13 +3007,13 @@ const customMixin$4 = (superclass) =>
2954
3007
  };
2955
3008
 
2956
3009
  const {
2957
- host: host$a,
3010
+ host: host$b,
2958
3011
  digitField,
2959
3012
  label: label$8,
2960
3013
  requiredIndicator: requiredIndicator$8,
2961
3014
  internalWrapper: internalWrapper$1,
2962
3015
  focusedDigitField,
2963
- errorMessage: errorMessage$8,
3016
+ errorMessage: errorMessage$9,
2964
3017
  } = {
2965
3018
  host: { selector: () => ':host' },
2966
3019
  focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
@@ -2977,16 +3030,16 @@ const loaderVars = LoaderRadialClass.cssVarList;
2977
3030
  const PasscodeClass = compose(
2978
3031
  createStyleMixin({
2979
3032
  mappings: {
2980
- fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$a],
3033
+ fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$b],
2981
3034
  hostWidth: { property: 'width' },
2982
- hostDirection: { ...host$a, property: 'direction' },
2983
- fontFamily: [host$a, { ...label$8 }],
3035
+ hostDirection: { ...host$b, property: 'direction' },
3036
+ fontFamily: [host$b, { ...label$8 }],
2984
3037
  labelTextColor: [
2985
3038
  { ...label$8, property: 'color' },
2986
3039
  { ...requiredIndicator$8, property: 'color' },
2987
3040
  ],
2988
3041
  labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
2989
- errorMessageTextColor: { ...errorMessage$8, property: 'color' },
3042
+ errorMessageTextColor: { ...errorMessage$9, property: 'color' },
2990
3043
  digitValueTextColor: {
2991
3044
  selector: TextFieldClass.componentName,
2992
3045
  property: textVars$2.inputValueTextColor,
@@ -3010,7 +3063,7 @@ const PasscodeClass = compose(
3010
3063
  draggableMixin,
3011
3064
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
3012
3065
  componentNameValidationMixin,
3013
- customMixin$4
3066
+ customMixin$5
3014
3067
  )(
3015
3068
  createProxy({
3016
3069
  slots: [],
@@ -3086,15 +3139,15 @@ const PasscodeClass = compose(
3086
3139
  ${resetInputCursor('vaadin-text-field')}
3087
3140
  `,
3088
3141
  excludeAttrsSync: ['tabindex'],
3089
- componentName: componentName$r,
3142
+ componentName: componentName$u,
3090
3143
  })
3091
3144
  );
3092
3145
 
3093
- customElements.define(componentName$s, TextFieldClass);
3146
+ customElements.define(componentName$v, TextFieldClass);
3094
3147
 
3095
- customElements.define(componentName$t, PasscodeInternal);
3148
+ customElements.define(componentName$w, PasscodeInternal);
3096
3149
 
3097
- customElements.define(componentName$r, PasscodeClass);
3150
+ customElements.define(componentName$u, PasscodeClass);
3098
3151
 
3099
3152
  const passwordDraggableMixin = (superclass) =>
3100
3153
  class PasswordDraggableMixinClass extends superclass {
@@ -3130,10 +3183,10 @@ const passwordDraggableMixin = (superclass) =>
3130
3183
  }
3131
3184
  };
3132
3185
 
3133
- const componentName$q = getComponentName('password');
3186
+ const componentName$t = getComponentName('password');
3134
3187
 
3135
3188
  const {
3136
- host: host$9,
3189
+ host: host$a,
3137
3190
  inputField: inputField$5,
3138
3191
  inputElement: inputElement$2,
3139
3192
  inputElementPlaceholder,
@@ -3141,8 +3194,8 @@ const {
3141
3194
  revealButtonIcon,
3142
3195
  label: label$7,
3143
3196
  requiredIndicator: requiredIndicator$7,
3144
- errorMessage: errorMessage$7,
3145
- helperText: helperText$6,
3197
+ errorMessage: errorMessage$8,
3198
+ helperText: helperText$7,
3146
3199
  } = {
3147
3200
  host: { selector: () => ':host' },
3148
3201
  inputField: { selector: '::part(input-field)' },
@@ -3159,11 +3212,11 @@ const {
3159
3212
  const PasswordClass = compose(
3160
3213
  createStyleMixin({
3161
3214
  mappings: {
3162
- hostWidth: { ...host$9, property: 'width' },
3163
- hostMinWidth: { ...host$9, property: 'min-width' },
3164
- hostDirection: { ...host$9, property: 'direction' },
3165
- fontSize: [{}, host$9],
3166
- fontFamily: [label$7, inputField$5, errorMessage$7, helperText$6],
3215
+ hostWidth: { ...host$a, property: 'width' },
3216
+ hostMinWidth: { ...host$a, property: 'min-width' },
3217
+ hostDirection: { ...host$a, property: 'direction' },
3218
+ fontSize: [{}, host$a],
3219
+ fontFamily: [label$7, inputField$5, errorMessage$8, helperText$7],
3167
3220
  inputHeight: { ...inputField$5, property: 'height' },
3168
3221
  inputHorizontalPadding: [
3169
3222
  { ...inputElement$2, property: 'padding-left' },
@@ -3186,7 +3239,7 @@ const PasswordClass = compose(
3186
3239
  { ...requiredIndicator$7, property: 'color' },
3187
3240
  ],
3188
3241
  labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
3189
- errorMessageTextColor: { ...errorMessage$7, property: 'color' },
3242
+ errorMessageTextColor: { ...errorMessage$8, property: 'color' },
3190
3243
 
3191
3244
  inputValueTextColor: { ...inputElement$2, property: 'color' },
3192
3245
  inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
@@ -3259,23 +3312,23 @@ const PasswordClass = compose(
3259
3312
  }
3260
3313
  `,
3261
3314
  excludeAttrsSync: ['tabindex'],
3262
- componentName: componentName$q,
3315
+ componentName: componentName$t,
3263
3316
  })
3264
3317
  );
3265
3318
 
3266
- customElements.define(componentName$q, PasswordClass);
3319
+ customElements.define(componentName$t, PasswordClass);
3267
3320
 
3268
- const componentName$p = getComponentName('text-area');
3321
+ const componentName$s = getComponentName('text-area');
3269
3322
 
3270
3323
  const {
3271
- host: host$8,
3324
+ host: host$9,
3272
3325
  label: label$6,
3273
3326
  placeholder: placeholder$2,
3274
3327
  inputField: inputField$4,
3275
3328
  textArea: textArea$2,
3276
3329
  requiredIndicator: requiredIndicator$6,
3277
- helperText: helperText$5,
3278
- errorMessage: errorMessage$6,
3330
+ helperText: helperText$6,
3331
+ errorMessage: errorMessage$7,
3279
3332
  } = {
3280
3333
  host: { selector: () => ':host' },
3281
3334
  label: { selector: '::part(label)' },
@@ -3290,17 +3343,17 @@ const {
3290
3343
  const TextAreaClass = compose(
3291
3344
  createStyleMixin({
3292
3345
  mappings: {
3293
- hostWidth: { ...host$8, property: 'width' },
3294
- hostMinWidth: { ...host$8, property: 'min-width' },
3295
- hostDirection: { ...host$8, property: 'direction' },
3296
- fontSize: [host$8, textArea$2],
3297
- fontFamily: [label$6, inputField$4, helperText$5, errorMessage$6],
3346
+ hostWidth: { ...host$9, property: 'width' },
3347
+ hostMinWidth: { ...host$9, property: 'min-width' },
3348
+ hostDirection: { ...host$9, property: 'direction' },
3349
+ fontSize: [host$9, textArea$2],
3350
+ fontFamily: [label$6, inputField$4, helperText$6, errorMessage$7],
3298
3351
  labelTextColor: [
3299
3352
  { ...label$6, property: 'color' },
3300
3353
  { ...requiredIndicator$6, property: 'color' },
3301
3354
  ],
3302
3355
  labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
3303
- errorMessageTextColor: { ...errorMessage$6, property: 'color' },
3356
+ errorMessageTextColor: { ...errorMessage$7, property: 'color' },
3304
3357
  inputBackgroundColor: { ...inputField$4, property: 'background-color' },
3305
3358
  inputValueTextColor: { ...textArea$2, property: 'color' },
3306
3359
  inputPlaceholderTextColor: { ...placeholder$2, property: 'color' },
@@ -3341,17 +3394,17 @@ const TextAreaClass = compose(
3341
3394
  ${resetInputCursor('vaadin-text-area')}
3342
3395
  `,
3343
3396
  excludeAttrsSync: ['tabindex'],
3344
- componentName: componentName$p,
3397
+ componentName: componentName$s,
3345
3398
  })
3346
3399
  );
3347
3400
 
3348
- customElements.define(componentName$p, TextAreaClass);
3401
+ customElements.define(componentName$s, TextAreaClass);
3349
3402
 
3350
3403
  const observedAttributes$3 = ['src', 'alt'];
3351
3404
 
3352
- const componentName$o = getComponentName('image');
3405
+ const componentName$r = getComponentName('image');
3353
3406
 
3354
- const BaseClass$1 = createBaseClass({ componentName: componentName$o, baseSelector: ':host > img' });
3407
+ const BaseClass$1 = createBaseClass({ componentName: componentName$r, baseSelector: ':host > img' });
3355
3408
  class RawImage extends BaseClass$1 {
3356
3409
  static get observedAttributes() {
3357
3410
  return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
@@ -3391,9 +3444,9 @@ const ImageClass = compose(
3391
3444
  draggableMixin
3392
3445
  )(RawImage);
3393
3446
 
3394
- customElements.define(componentName$o, ImageClass);
3447
+ customElements.define(componentName$r, ImageClass);
3395
3448
 
3396
- const componentName$n = getComponentName('combo-box');
3449
+ const componentName$q = getComponentName('combo-box');
3397
3450
 
3398
3451
  const ComboBoxMixin = (superclass) =>
3399
3452
  class ComboBoxMixinClass extends superclass {
@@ -3591,6 +3644,10 @@ const ComboBoxMixin = (superclass) =>
3591
3644
  observeChildren(this, this.#onChildrenChange.bind(this));
3592
3645
 
3593
3646
  this.setDefaultValue();
3647
+
3648
+ this.baseElement.addEventListener('selected-item-changed', () => {
3649
+ this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
3650
+ });
3594
3651
  }
3595
3652
 
3596
3653
  setDefaultValue() {
@@ -3615,7 +3672,7 @@ const ComboBoxMixin = (superclass) =>
3615
3672
  };
3616
3673
 
3617
3674
  const {
3618
- host: host$7,
3675
+ host: host$8,
3619
3676
  inputField: inputField$3,
3620
3677
  inputElement: inputElement$1,
3621
3678
  placeholder: placeholder$1,
@@ -3623,8 +3680,8 @@ const {
3623
3680
  clearButton: clearButton$1,
3624
3681
  label: label$5,
3625
3682
  requiredIndicator: requiredIndicator$5,
3626
- helperText: helperText$4,
3627
- errorMessage: errorMessage$5,
3683
+ helperText: helperText$5,
3684
+ errorMessage: errorMessage$6,
3628
3685
  } = {
3629
3686
  host: { selector: () => ':host' },
3630
3687
  inputField: { selector: '::part(input-field)' },
@@ -3641,16 +3698,16 @@ const {
3641
3698
  const ComboBoxClass = compose(
3642
3699
  createStyleMixin({
3643
3700
  mappings: {
3644
- hostWidth: { ...host$7, property: 'width' },
3645
- hostDirection: { ...host$7, property: 'direction' },
3701
+ hostWidth: { ...host$8, property: 'width' },
3702
+ hostDirection: { ...host$8, property: 'direction' },
3646
3703
  // we apply font-size also on the host so we can set its width with em
3647
- fontSize: [{}, host$7],
3648
- fontFamily: [label$5, placeholder$1, inputField$3, helperText$4, errorMessage$5],
3704
+ fontSize: [{}, host$8],
3705
+ fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
3649
3706
  labelTextColor: [
3650
3707
  { ...label$5, property: 'color' },
3651
3708
  { ...requiredIndicator$5, property: 'color' },
3652
3709
  ],
3653
- errorMessageTextColor: { ...errorMessage$5, property: 'color' },
3710
+ errorMessageTextColor: { ...errorMessage$6, property: 'color' },
3654
3711
  inputHeight: { ...inputField$3, property: 'height' },
3655
3712
  inputBackgroundColor: { ...inputField$3, property: 'background-color' },
3656
3713
  inputBorderColor: { ...inputField$3, property: 'border-color' },
@@ -3772,12 +3829,12 @@ const ComboBoxClass = compose(
3772
3829
  // and reset items to an empty array, and opening the list box with no items
3773
3830
  // to display.
3774
3831
  excludeAttrsSync: ['tabindex', 'size', 'data'],
3775
- componentName: componentName$n,
3832
+ componentName: componentName$q,
3776
3833
  includeForwardProps: ['items', 'renderer', 'selectedItem'],
3777
3834
  })
3778
3835
  );
3779
3836
 
3780
- customElements.define(componentName$n, ComboBoxClass);
3837
+ customElements.define(componentName$q, ComboBoxClass);
3781
3838
 
3782
3839
  var CountryCodes = [
3783
3840
  {
@@ -5017,7 +5074,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
5017
5074
  </div>
5018
5075
  `;
5019
5076
 
5020
- const componentName$m = getComponentName('phone-field-internal');
5077
+ const componentName$p = getComponentName('phone-field-internal');
5021
5078
 
5022
5079
  const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
5023
5080
  const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -5029,11 +5086,11 @@ const mapAttrs$1 = {
5029
5086
 
5030
5087
  const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
5031
5088
 
5032
- const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$m, baseSelector: 'div' });
5089
+ const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
5033
5090
 
5034
- let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
5091
+ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$5 {
5035
5092
  static get observedAttributes() {
5036
- return [].concat(BaseInputClass$3.observedAttributes || [], inputRelatedAttrs$1);
5093
+ return [].concat(BaseInputClass$5.observedAttributes || [], inputRelatedAttrs$1);
5037
5094
  }
5038
5095
 
5039
5096
  constructor() {
@@ -5201,14 +5258,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
5201
5258
  }
5202
5259
  };
5203
5260
 
5204
- customElements.define(componentName$m, PhoneFieldInternal$1);
5261
+ customElements.define(componentName$p, PhoneFieldInternal$1);
5205
5262
 
5206
5263
  const textVars$1 = TextFieldClass.cssVarList;
5207
5264
  const comboVars = ComboBoxClass.cssVarList;
5208
5265
 
5209
- const componentName$l = getComponentName('phone-field');
5266
+ const componentName$o = getComponentName('phone-field');
5210
5267
 
5211
- const customMixin$3 = (superclass) =>
5268
+ const customMixin$4 = (superclass) =>
5212
5269
  class PhoneFieldMixinClass extends superclass {
5213
5270
  static get CountryCodes() {
5214
5271
  return CountryCodes;
@@ -5220,15 +5277,15 @@ const customMixin$3 = (superclass) =>
5220
5277
  const template = document.createElement('template');
5221
5278
 
5222
5279
  template.innerHTML = `
5223
- <${componentName$m}
5280
+ <${componentName$p}
5224
5281
  tabindex="-1"
5225
5282
  slot="input"
5226
- ></${componentName$m}>
5283
+ ></${componentName$p}>
5227
5284
  `;
5228
5285
 
5229
5286
  this.baseElement.appendChild(template.content.cloneNode(true));
5230
5287
 
5231
- this.inputElement = this.shadowRoot.querySelector(componentName$m);
5288
+ this.inputElement = this.shadowRoot.querySelector(componentName$p);
5232
5289
 
5233
5290
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
5234
5291
  includeAttrs: [
@@ -5248,15 +5305,15 @@ const customMixin$3 = (superclass) =>
5248
5305
  };
5249
5306
 
5250
5307
  const {
5251
- host: host$6,
5308
+ host: host$7,
5252
5309
  label: label$4,
5253
5310
  requiredIndicator: requiredIndicator$4,
5254
5311
  inputField: inputField$2,
5255
5312
  countryCodeInput,
5256
5313
  phoneInput: phoneInput$1,
5257
- separator,
5258
- errorMessage: errorMessage$4,
5259
- helperText: helperText$3,
5314
+ separator: separator$1,
5315
+ errorMessage: errorMessage$5,
5316
+ helperText: helperText$4,
5260
5317
  } = {
5261
5318
  host: { selector: () => ':host' },
5262
5319
  label: { selector: '::part(label)' },
@@ -5273,7 +5330,7 @@ const PhoneFieldClass = compose(
5273
5330
  createStyleMixin({
5274
5331
  mappings: {
5275
5332
  fontSize: [
5276
- host$6,
5333
+ host$7,
5277
5334
  inputField$2,
5278
5335
  {
5279
5336
  selector: TextFieldClass.componentName,
@@ -5286,31 +5343,31 @@ const PhoneFieldClass = compose(
5286
5343
  ],
5287
5344
  fontFamily: [
5288
5345
  label$4,
5289
- errorMessage$4,
5290
- helperText$3,
5346
+ errorMessage$5,
5347
+ helperText$4,
5291
5348
  {
5292
5349
  ...countryCodeInput,
5293
5350
  property: ComboBoxClass.cssVarList.overlay.fontFamily,
5294
5351
  },
5295
5352
  ],
5296
5353
  hostWidth: [
5297
- { ...host$6, property: 'width' },
5354
+ { ...host$7, property: 'width' },
5298
5355
  { ...phoneInput$1, property: 'width' },
5299
5356
  { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
5300
5357
  ],
5301
- hostDirection: { ...host$6, property: 'direction' },
5358
+ hostDirection: { ...host$7, property: 'direction' },
5302
5359
 
5303
5360
  inputBorderStyle: [
5304
5361
  { ...inputField$2, property: 'border-style' },
5305
- { ...separator, property: 'border-left-style' },
5362
+ { ...separator$1, property: 'border-left-style' },
5306
5363
  ],
5307
5364
  inputBorderWidth: [
5308
5365
  { ...inputField$2, property: 'border-width' },
5309
- { ...separator, property: 'border-left-width' },
5366
+ { ...separator$1, property: 'border-left-width' },
5310
5367
  ],
5311
5368
  inputBorderColor: [
5312
5369
  { ...inputField$2, property: 'border-color' },
5313
- { ...separator, property: 'border-left-color' },
5370
+ { ...separator$1, property: 'border-left-color' },
5314
5371
  ],
5315
5372
  inputBorderRadius: { ...inputField$2, property: 'border-radius' },
5316
5373
 
@@ -5326,7 +5383,7 @@ const PhoneFieldClass = compose(
5326
5383
  { ...requiredIndicator$4, property: 'color' },
5327
5384
  ],
5328
5385
  labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
5329
- errorMessageTextColor: { ...errorMessage$4, property: 'color' },
5386
+ errorMessageTextColor: { ...errorMessage$5, property: 'color' },
5330
5387
 
5331
5388
  inputValueTextColor: [
5332
5389
  { ...phoneInput$1, property: textVars$1.inputValueTextColor },
@@ -5348,7 +5405,7 @@ const PhoneFieldClass = compose(
5348
5405
  }),
5349
5406
  draggableMixin,
5350
5407
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
5351
- customMixin$3
5408
+ customMixin$4
5352
5409
  )(
5353
5410
  createProxy({
5354
5411
  slots: [],
@@ -5424,17 +5481,17 @@ const PhoneFieldClass = compose(
5424
5481
  ${resetInputLabelPosition('vaadin-text-field')}
5425
5482
  `,
5426
5483
  excludeAttrsSync: ['tabindex'],
5427
- componentName: componentName$l,
5484
+ componentName: componentName$o,
5428
5485
  })
5429
5486
  );
5430
5487
 
5431
- customElements.define(componentName$l, PhoneFieldClass);
5488
+ customElements.define(componentName$o, PhoneFieldClass);
5432
5489
 
5433
5490
  const getCountryByCodeId = (countryCode) => {
5434
5491
  return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
5435
5492
  };
5436
5493
 
5437
- const componentName$k = getComponentName('phone-field-internal-input-box');
5494
+ const componentName$n = getComponentName('phone-field-internal-input-box');
5438
5495
 
5439
5496
  const observedAttributes$2 = [
5440
5497
  'disabled',
@@ -5448,11 +5505,11 @@ const mapAttrs = {
5448
5505
  'phone-input-placeholder': 'placeholder',
5449
5506
  };
5450
5507
 
5451
- const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$k, baseSelector: 'div' });
5508
+ const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
5452
5509
 
5453
- class PhoneFieldInternal extends BaseInputClass$2 {
5510
+ class PhoneFieldInternal extends BaseInputClass$4 {
5454
5511
  static get observedAttributes() {
5455
- return [].concat(BaseInputClass$2.observedAttributes || [], observedAttributes$2);
5512
+ return [].concat(BaseInputClass$4.observedAttributes || [], observedAttributes$2);
5456
5513
  }
5457
5514
 
5458
5515
  constructor() {
@@ -5587,13 +5644,13 @@ class PhoneFieldInternal extends BaseInputClass$2 {
5587
5644
  }
5588
5645
  }
5589
5646
 
5590
- customElements.define(componentName$k, PhoneFieldInternal);
5647
+ customElements.define(componentName$n, PhoneFieldInternal);
5591
5648
 
5592
5649
  const textVars = TextFieldClass.cssVarList;
5593
5650
 
5594
- const componentName$j = getComponentName('phone-input-box-field');
5651
+ const componentName$m = getComponentName('phone-input-box-field');
5595
5652
 
5596
- const customMixin$2 = (superclass) =>
5653
+ const customMixin$3 = (superclass) =>
5597
5654
  class PhoneInputBoxFieldMixinClass extends superclass {
5598
5655
  static get CountryCodes() {
5599
5656
  return CountryCodes;
@@ -5605,15 +5662,15 @@ const customMixin$2 = (superclass) =>
5605
5662
  const template = document.createElement('template');
5606
5663
 
5607
5664
  template.innerHTML = `
5608
- <${componentName$k}
5665
+ <${componentName$n}
5609
5666
  tabindex="-1"
5610
5667
  slot="input"
5611
- ></${componentName$k}>
5668
+ ></${componentName$n}>
5612
5669
  `;
5613
5670
 
5614
5671
  this.baseElement.appendChild(template.content.cloneNode(true));
5615
5672
 
5616
- this.inputElement = this.shadowRoot.querySelector(componentName$k);
5673
+ this.inputElement = this.shadowRoot.querySelector(componentName$n);
5617
5674
 
5618
5675
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
5619
5676
  includeAttrs: [
@@ -5630,7 +5687,7 @@ const customMixin$2 = (superclass) =>
5630
5687
  }
5631
5688
  };
5632
5689
 
5633
- const { host: host$5, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$3, helperText: helperText$2 } = {
5690
+ const { host: host$6, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
5634
5691
  host: { selector: () => ':host' },
5635
5692
  label: { selector: '::part(label)' },
5636
5693
  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -5644,17 +5701,17 @@ const PhoneFieldInputBoxClass = compose(
5644
5701
  createStyleMixin({
5645
5702
  mappings: {
5646
5703
  fontSize: [
5647
- host$5,
5704
+ host$6,
5648
5705
  inputField$1,
5649
5706
  {
5650
5707
  selector: TextFieldClass.componentName,
5651
5708
  property: TextFieldClass.cssVarList.fontSize,
5652
5709
  },
5653
5710
  ],
5654
- fontFamily: [label$3, errorMessage$3, helperText$2],
5655
- hostWidth: { ...host$5, property: 'width' },
5656
- hostMinWidth: { ...host$5, property: 'min-width' },
5657
- hostDirection: { ...host$5, property: 'direction' },
5711
+ fontFamily: [label$3, errorMessage$4, helperText$3],
5712
+ hostWidth: { ...host$6, property: 'width' },
5713
+ hostMinWidth: { ...host$6, property: 'min-width' },
5714
+ hostDirection: { ...host$6, property: 'direction' },
5658
5715
 
5659
5716
  inputBorderStyle: { ...inputField$1, property: 'border-style' },
5660
5717
  inputBorderWidth: { ...inputField$1, property: 'border-width' },
@@ -5666,7 +5723,7 @@ const PhoneFieldInputBoxClass = compose(
5666
5723
  { ...requiredIndicator$3, property: 'color' },
5667
5724
  ],
5668
5725
  labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
5669
- errorMessageTextColor: { ...errorMessage$3, property: 'color' },
5726
+ errorMessageTextColor: { ...errorMessage$4, property: 'color' },
5670
5727
 
5671
5728
  inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
5672
5729
 
@@ -5680,7 +5737,7 @@ const PhoneFieldInputBoxClass = compose(
5680
5737
  }),
5681
5738
  draggableMixin,
5682
5739
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
5683
- customMixin$2
5740
+ customMixin$3
5684
5741
  )(
5685
5742
  createProxy({
5686
5743
  slots: [],
@@ -5746,17 +5803,17 @@ const PhoneFieldInputBoxClass = compose(
5746
5803
  ${resetInputLabelPosition('vaadin-text-field')}
5747
5804
  `,
5748
5805
  excludeAttrsSync: ['tabindex'],
5749
- componentName: componentName$j,
5806
+ componentName: componentName$m,
5750
5807
  })
5751
5808
  );
5752
5809
 
5753
- customElements.define(componentName$j, PhoneFieldInputBoxClass);
5810
+ customElements.define(componentName$m, PhoneFieldInputBoxClass);
5754
5811
 
5755
- const componentName$i = getComponentName('new-password-internal');
5812
+ const componentName$l = getComponentName('new-password-internal');
5756
5813
 
5757
- const componentName$h = getComponentName('new-password');
5814
+ const componentName$k = getComponentName('new-password');
5758
5815
 
5759
- const customMixin$1 = (superclass) =>
5816
+ const customMixin$2 = (superclass) =>
5760
5817
  class NewPasswordMixinClass extends superclass {
5761
5818
  init() {
5762
5819
  super.init?.();
@@ -5764,16 +5821,16 @@ const customMixin$1 = (superclass) =>
5764
5821
  const template = document.createElement('template');
5765
5822
 
5766
5823
  template.innerHTML = `
5767
- <${componentName$i}
5824
+ <${componentName$l}
5768
5825
  name="new-password"
5769
5826
  tabindex="-1"
5770
5827
  slot="input"
5771
- ></${componentName$i}>
5828
+ ></${componentName$l}>
5772
5829
  `;
5773
5830
 
5774
5831
  this.baseElement.appendChild(template.content.cloneNode(true));
5775
5832
 
5776
- this.inputElement = this.shadowRoot.querySelector(componentName$i);
5833
+ this.inputElement = this.shadowRoot.querySelector(componentName$l);
5777
5834
 
5778
5835
  forwardAttrs(this, this.inputElement, {
5779
5836
  includeAttrs: [
@@ -5794,7 +5851,7 @@ const customMixin$1 = (superclass) =>
5794
5851
  }
5795
5852
  };
5796
5853
 
5797
- const { host: host$4, label: label$2, internalInputsWrapper, errorMessage: errorMessage$2, helperText: helperText$1, passwordInput } = {
5854
+ const { host: host$5, label: label$2, internalInputsWrapper, errorMessage: errorMessage$3, helperText: helperText$2, passwordInput } = {
5798
5855
  host: { selector: () => ':host' },
5799
5856
  label: { selector: '::part(label)' },
5800
5857
  internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
@@ -5807,28 +5864,28 @@ const NewPasswordClass = compose(
5807
5864
  createStyleMixin({
5808
5865
  mappings: {
5809
5866
  fontSize: [
5810
- host$4,
5867
+ host$5,
5811
5868
  {},
5812
5869
  {
5813
5870
  selector: PasswordClass.componentName,
5814
5871
  property: PasswordClass.cssVarList.fontSize,
5815
5872
  },
5816
5873
  ],
5817
- fontFamily: [label$2, errorMessage$2, helperText$1],
5818
- errorMessageTextColor: { ...errorMessage$2, property: 'color' },
5819
- hostWidth: { ...host$4, property: 'width' },
5820
- hostMinWidth: { ...host$4, property: 'min-width' },
5874
+ fontFamily: [label$2, errorMessage$3, helperText$2],
5875
+ errorMessageTextColor: { ...errorMessage$3, property: 'color' },
5876
+ hostWidth: { ...host$5, property: 'width' },
5877
+ hostMinWidth: { ...host$5, property: 'min-width' },
5821
5878
  hostDirection: [
5822
- { ...host$4, property: 'direction' },
5879
+ { ...host$5, property: 'direction' },
5823
5880
  { ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
5824
5881
  ],
5825
- inputsRequiredIndicator: { ...host$4, property: 'content' },
5882
+ inputsRequiredIndicator: { ...host$5, property: 'content' },
5826
5883
  spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
5827
5884
  },
5828
5885
  }),
5829
5886
  draggableMixin,
5830
5887
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
5831
- customMixin$1
5888
+ customMixin$2
5832
5889
  )(
5833
5890
  createProxy({
5834
5891
  slots: [],
@@ -5880,7 +5937,7 @@ const NewPasswordClass = compose(
5880
5937
  }
5881
5938
  `,
5882
5939
  excludeAttrsSync: ['tabindex'],
5883
- componentName: componentName$h,
5940
+ componentName: componentName$k,
5884
5941
  })
5885
5942
  );
5886
5943
 
@@ -5905,11 +5962,11 @@ const commonAttrs = [
5905
5962
 
5906
5963
  const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
5907
5964
 
5908
- const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$i, baseSelector: 'div' });
5965
+ const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$l, baseSelector: 'div' });
5909
5966
 
5910
- class NewPasswordInternal extends BaseInputClass$1 {
5967
+ class NewPasswordInternal extends BaseInputClass$3 {
5911
5968
  static get observedAttributes() {
5912
- return ['has-confirm'].concat(BaseInputClass$1.observedAttributes || [], inputRelatedAttrs);
5969
+ return ['has-confirm'].concat(BaseInputClass$3.observedAttributes || [], inputRelatedAttrs);
5913
5970
  }
5914
5971
 
5915
5972
  constructor() {
@@ -6070,16 +6127,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
6070
6127
  }
6071
6128
  }
6072
6129
 
6073
- customElements.define(componentName$i, NewPasswordInternal);
6130
+ customElements.define(componentName$l, NewPasswordInternal);
6074
6131
 
6075
- customElements.define(componentName$h, NewPasswordClass);
6132
+ customElements.define(componentName$k, NewPasswordClass);
6076
6133
 
6077
- const componentName$g = getComponentName('recaptcha');
6134
+ const componentName$j = getComponentName('recaptcha');
6078
6135
 
6079
6136
  const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
6080
6137
 
6081
6138
  const BaseClass = createBaseClass({
6082
- componentName: componentName$g,
6139
+ componentName: componentName$j,
6083
6140
  baseSelector: ':host > div',
6084
6141
  });
6085
6142
  class RawRecaptcha extends BaseClass {
@@ -6231,7 +6288,7 @@ class RawRecaptcha extends BaseClass {
6231
6288
 
6232
6289
  const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
6233
6290
 
6234
- customElements.define(componentName$g, RecaptchaClass);
6291
+ customElements.define(componentName$j, RecaptchaClass);
6235
6292
 
6236
6293
  const getFileBase64 = (fileObj) => {
6237
6294
  return new Promise((resolve) => {
@@ -6245,7 +6302,7 @@ const getFilename = (fileObj) => {
6245
6302
  return fileObj.name.replace(/^.*\\/, '');
6246
6303
  };
6247
6304
 
6248
- const componentName$f = getComponentName('upload-file');
6305
+ const componentName$i = getComponentName('upload-file');
6249
6306
 
6250
6307
  const observedAttributes = [
6251
6308
  'title',
@@ -6260,11 +6317,11 @@ const observedAttributes = [
6260
6317
  'icon',
6261
6318
  ];
6262
6319
 
6263
- const BaseInputClass = createBaseInputClass({ componentName: componentName$f, baseSelector: ':host > div' });
6320
+ const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$i, baseSelector: ':host > div' });
6264
6321
 
6265
- class RawUploadFile extends BaseInputClass {
6322
+ class RawUploadFile extends BaseInputClass$2 {
6266
6323
  static get observedAttributes() {
6267
- return observedAttributes.concat(BaseInputClass.observedAttributes || []);
6324
+ return observedAttributes.concat(BaseInputClass$2.observedAttributes || []);
6268
6325
  }
6269
6326
 
6270
6327
  constructor() {
@@ -6432,7 +6489,7 @@ class RawUploadFile extends BaseInputClass {
6432
6489
  }
6433
6490
 
6434
6491
  const buttonVars = ButtonClass.cssVarList;
6435
- const { host: host$3, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
6492
+ const { host: host$4, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
6436
6493
  host: { selector: () => ':host' },
6437
6494
  wrapper: { selector: () => ':host > div' },
6438
6495
  icon: { selector: () => '::slotted(*)' },
@@ -6451,11 +6508,11 @@ const UploadFileClass = compose(
6451
6508
  borderWidth: {},
6452
6509
  borderStyle: {},
6453
6510
  borderRadius: {},
6454
- hostHeight: { ...host$3, property: 'height' },
6455
- hostWidth: { ...host$3, property: 'width' },
6511
+ hostHeight: { ...host$4, property: 'height' },
6512
+ hostWidth: { ...host$4, property: 'width' },
6456
6513
  hostPadding: { property: 'padding' },
6457
6514
  hostDirection: [
6458
- { ...host$3, property: 'direction' },
6515
+ { ...host$4, property: 'direction' },
6459
6516
  { selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
6460
6517
  ],
6461
6518
  gap: { ...wrapper },
@@ -6475,7 +6532,7 @@ const UploadFileClass = compose(
6475
6532
  componentNameValidationMixin
6476
6533
  )(RawUploadFile);
6477
6534
 
6478
- customElements.define(componentName$f, UploadFileClass);
6535
+ customElements.define(componentName$i, UploadFileClass);
6479
6536
 
6480
6537
  const createBaseButtonSelectionGroupInternalClass = (componentName) => {
6481
6538
  class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
@@ -6573,10 +6630,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
6573
6630
  return BaseButtonSelectionGroupInternalClass;
6574
6631
  };
6575
6632
 
6576
- const componentName$e = getComponentName('button-selection-group-internal');
6633
+ const componentName$h = getComponentName('button-selection-group-internal');
6577
6634
 
6578
6635
  class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
6579
- componentName$e
6636
+ componentName$h
6580
6637
  ) {
6581
6638
  getSelectedNode() {
6582
6639
  return this.items.find((item) => item.hasAttribute('selected'));
@@ -6732,7 +6789,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
6732
6789
  }
6733
6790
  };
6734
6791
 
6735
- const { host: host$2, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$1 } = {
6792
+ const { host: host$3, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
6736
6793
  host: { selector: () => ':host' },
6737
6794
  label: { selector: '::part(label)' },
6738
6795
  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -6741,15 +6798,15 @@ const { host: host$2, label: label$1, requiredIndicator: requiredIndicator$1, in
6741
6798
  };
6742
6799
 
6743
6800
  const buttonSelectionGroupMappings = {
6744
- hostWidth: { ...host$2, property: 'width' },
6745
- hostDirection: { ...host$2, property: 'direction' },
6746
- fontFamily: host$2,
6801
+ hostWidth: { ...host$3, property: 'width' },
6802
+ hostDirection: { ...host$3, property: 'direction' },
6803
+ fontFamily: host$3,
6747
6804
  labelTextColor: [
6748
6805
  { ...label$1, property: 'color' },
6749
6806
  { ...requiredIndicator$1, property: 'color' },
6750
6807
  ],
6751
6808
  labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
6752
- errorMessageTextColor: { ...errorMessage$1, property: 'color' },
6809
+ errorMessageTextColor: { ...errorMessage$2, property: 'color' },
6753
6810
  itemsSpacing: { ...internalWrapper, property: 'gap' },
6754
6811
  };
6755
6812
 
@@ -6808,7 +6865,7 @@ const buttonSelectionGroupStyles = `
6808
6865
  ${resetInputCursor('vaadin-text-field')}
6809
6866
  `;
6810
6867
 
6811
- const componentName$d = getComponentName('button-selection-group');
6868
+ const componentName$g = getComponentName('button-selection-group');
6812
6869
 
6813
6870
  const buttonSelectionGroupMixin = (superclass) =>
6814
6871
  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -6817,19 +6874,19 @@ const buttonSelectionGroupMixin = (superclass) =>
6817
6874
  const template = document.createElement('template');
6818
6875
 
6819
6876
  template.innerHTML = `
6820
- <${componentName$e}
6877
+ <${componentName$h}
6821
6878
  name="button-selection-group"
6822
6879
  slot="input"
6823
6880
  tabindex="-1"
6824
6881
  part="internal-component"
6825
6882
  >
6826
6883
  <slot></slot>
6827
- </${componentName$e}>
6884
+ </${componentName$h}>
6828
6885
  `;
6829
6886
 
6830
6887
  this.baseElement.appendChild(template.content.cloneNode(true));
6831
6888
 
6832
- this.inputElement = this.shadowRoot.querySelector(componentName$e);
6889
+ this.inputElement = this.shadowRoot.querySelector(componentName$h);
6833
6890
 
6834
6891
  forwardAttrs(this, this.inputElement, {
6835
6892
  includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -6854,16 +6911,16 @@ const ButtonSelectionGroupClass = compose(
6854
6911
  wrappedEleName: 'vaadin-text-field',
6855
6912
  style: () => buttonSelectionGroupStyles,
6856
6913
  excludeAttrsSync: ['tabindex'],
6857
- componentName: componentName$d,
6914
+ componentName: componentName$g,
6858
6915
  })
6859
6916
  );
6860
6917
 
6861
- customElements.define(componentName$e, ButtonSelectionGroupInternalClass);
6918
+ customElements.define(componentName$h, ButtonSelectionGroupInternalClass);
6862
6919
 
6863
- const componentName$c = getComponentName('button-selection-group-item');
6920
+ const componentName$f = getComponentName('button-selection-group-item');
6864
6921
 
6865
6922
  class RawSelectItem extends createBaseClass({
6866
- componentName: componentName$c,
6923
+ componentName: componentName$f,
6867
6924
  baseSelector: ':host > descope-button',
6868
6925
  }) {
6869
6926
  get size() {
@@ -6966,14 +7023,14 @@ const ButtonSelectionGroupItemClass = compose(
6966
7023
  componentNameValidationMixin
6967
7024
  )(RawSelectItem);
6968
7025
 
6969
- customElements.define(componentName$c, ButtonSelectionGroupItemClass);
7026
+ customElements.define(componentName$f, ButtonSelectionGroupItemClass);
6970
7027
 
6971
- customElements.define(componentName$d, ButtonSelectionGroupClass);
7028
+ customElements.define(componentName$g, ButtonSelectionGroupClass);
6972
7029
 
6973
- const componentName$b = getComponentName('button-multi-selection-group-internal');
7030
+ const componentName$e = getComponentName('button-multi-selection-group-internal');
6974
7031
 
6975
7032
  class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
6976
- componentName$b
7033
+ componentName$e
6977
7034
  ) {
6978
7035
  #getSelectedNodes() {
6979
7036
  return this.items.filter((item) => item.hasAttribute('selected'));
@@ -7076,7 +7133,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
7076
7133
  }
7077
7134
  }
7078
7135
 
7079
- const componentName$a = getComponentName('button-multi-selection-group');
7136
+ const componentName$d = getComponentName('button-multi-selection-group');
7080
7137
 
7081
7138
  const buttonMultiSelectionGroupMixin = (superclass) =>
7082
7139
  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -7085,19 +7142,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
7085
7142
  const template = document.createElement('template');
7086
7143
 
7087
7144
  template.innerHTML = `
7088
- <${componentName$b}
7145
+ <${componentName$e}
7089
7146
  name="button-selection-group"
7090
7147
  slot="input"
7091
7148
  tabindex="-1"
7092
7149
  part="internal-component"
7093
7150
  >
7094
7151
  <slot></slot>
7095
- </${componentName$b}>
7152
+ </${componentName$e}>
7096
7153
  `;
7097
7154
 
7098
7155
  this.baseElement.appendChild(template.content.cloneNode(true));
7099
7156
 
7100
- this.inputElement = this.shadowRoot.querySelector(componentName$b);
7157
+ this.inputElement = this.shadowRoot.querySelector(componentName$e);
7101
7158
 
7102
7159
  forwardAttrs(this, this.inputElement, {
7103
7160
  includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -7122,13 +7179,13 @@ const ButtonMultiSelectionGroupClass = compose(
7122
7179
  wrappedEleName: 'vaadin-text-field',
7123
7180
  style: () => buttonSelectionGroupStyles,
7124
7181
  excludeAttrsSync: ['tabindex'],
7125
- componentName: componentName$a,
7182
+ componentName: componentName$d,
7126
7183
  })
7127
7184
  );
7128
7185
 
7129
- customElements.define(componentName$b, ButtonMultiSelectionGroupInternalClass);
7186
+ customElements.define(componentName$e, ButtonMultiSelectionGroupInternalClass);
7130
7187
 
7131
- customElements.define(componentName$a, ButtonMultiSelectionGroupClass);
7188
+ customElements.define(componentName$d, ButtonMultiSelectionGroupClass);
7132
7189
 
7133
7190
  /* eslint-disable no-param-reassign */
7134
7191
 
@@ -7158,9 +7215,9 @@ class GridTextColumnClass extends GridSortColumn {
7158
7215
  }
7159
7216
  }
7160
7217
 
7161
- const componentName$9 = getComponentName('grid-text-column');
7218
+ const componentName$c = getComponentName('grid-text-column');
7162
7219
 
7163
- customElements.define(componentName$9, GridTextColumnClass);
7220
+ customElements.define(componentName$c, GridTextColumnClass);
7164
7221
 
7165
7222
  /* eslint-disable no-param-reassign */
7166
7223
 
@@ -7195,9 +7252,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
7195
7252
 
7196
7253
  /* eslint-disable no-param-reassign */
7197
7254
 
7198
- const componentName$8 = getComponentName('grid-custom-column');
7255
+ const componentName$b = getComponentName('grid-custom-column');
7199
7256
 
7200
- customElements.define(componentName$8, GridCustomColumnClass);
7257
+ customElements.define(componentName$b, GridCustomColumnClass);
7201
7258
 
7202
7259
  const createCheckboxEle = () => {
7203
7260
  const checkbox = document.createElement('descope-checkbox');
@@ -7256,9 +7313,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
7256
7313
  }
7257
7314
  }
7258
7315
 
7259
- const componentName$7 = getComponentName('grid-selection-column');
7316
+ const componentName$a = getComponentName('grid-selection-column');
7260
7317
 
7261
- customElements.define(componentName$7, GridSelectionColumnClass);
7318
+ customElements.define(componentName$a, GridSelectionColumnClass);
7262
7319
 
7263
7320
  const isValidDataType = (data) => {
7264
7321
  const isValid = Array.isArray(data);
@@ -7270,7 +7327,7 @@ const isValidDataType = (data) => {
7270
7327
  return isValid;
7271
7328
  };
7272
7329
 
7273
- const componentName$6 = getComponentName('grid');
7330
+ const componentName$9 = getComponentName('grid');
7274
7331
 
7275
7332
  const GridMixin = (superclass) =>
7276
7333
  class GridMixinClass extends superclass {
@@ -7430,7 +7487,7 @@ const GridMixin = (superclass) =>
7430
7487
  };
7431
7488
 
7432
7489
  const {
7433
- host: host$1,
7490
+ host: host$2,
7434
7491
  headerRow,
7435
7492
  headerRowCell,
7436
7493
  contentRow,
@@ -7465,15 +7522,15 @@ const GridClass = compose(
7465
7522
  fontWeight: { ...contentRow },
7466
7523
  valueTextColor: { ...contentRow, property: 'color' },
7467
7524
  backgroundColor: [
7468
- { ...host$1, property: 'background-color' },
7525
+ { ...host$2, property: 'background-color' },
7469
7526
  { ...contentRow, property: 'background-color' },
7470
7527
  ],
7471
7528
  sortIndicatorsColor: { ...sortIndicators, property: 'color' },
7472
7529
  activeSortIndicator: { ...activeSortIndicator, property: 'color' },
7473
- borderColor: { ...host$1, property: 'border-color' },
7474
- borderWidth: { ...host$1, property: 'border-width' },
7475
- borderStyle: { ...host$1, property: 'border-style' },
7476
- borderRadius: { ...host$1, property: 'border-radius' },
7530
+ borderColor: { ...host$2, property: 'border-color' },
7531
+ borderWidth: { ...host$2, property: 'border-width' },
7532
+ borderStyle: { ...host$2, property: 'border-style' },
7533
+ borderRadius: { ...host$2, property: 'border-radius' },
7477
7534
  selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
7478
7535
  headerRowTextColor: { ...headerRowCell, property: 'color' },
7479
7536
  separatorColor: [
@@ -7506,13 +7563,13 @@ const GridClass = compose(
7506
7563
  }
7507
7564
  `,
7508
7565
  excludeAttrsSync: ['columns', 'tabindex'],
7509
- componentName: componentName$6,
7566
+ componentName: componentName$9,
7510
7567
  })
7511
7568
  );
7512
7569
 
7513
- customElements.define(componentName$6, GridClass);
7570
+ customElements.define(componentName$9, GridClass);
7514
7571
 
7515
- const componentName$5 = getComponentName('multi-select-combo-box');
7572
+ const componentName$8 = getComponentName('multi-select-combo-box');
7516
7573
 
7517
7574
  const multiSelectComboBoxMixin = (superclass) =>
7518
7575
  class MultiSelectComboBoxMixinClass extends superclass {
@@ -7900,7 +7957,7 @@ const multiSelectComboBoxMixin = (superclass) =>
7900
7957
  };
7901
7958
 
7902
7959
  const {
7903
- host,
7960
+ host: host$1,
7904
7961
  inputField,
7905
7962
  inputElement,
7906
7963
  placeholder,
@@ -7908,8 +7965,8 @@ const {
7908
7965
  clearButton,
7909
7966
  label,
7910
7967
  requiredIndicator,
7911
- helperText,
7912
- errorMessage,
7968
+ helperText: helperText$1,
7969
+ errorMessage: errorMessage$1,
7913
7970
  chip,
7914
7971
  chipLabel,
7915
7972
  overflowChipFirstBorder,
@@ -7938,17 +7995,17 @@ const {
7938
7995
  const MultiSelectComboBoxClass = compose(
7939
7996
  createStyleMixin({
7940
7997
  mappings: {
7941
- hostWidth: { ...host, property: 'width' },
7942
- hostDirection: { ...host, property: 'direction' },
7998
+ hostWidth: { ...host$1, property: 'width' },
7999
+ hostDirection: { ...host$1, property: 'direction' },
7943
8000
  // we apply font-size also on the host so we can set its width with em
7944
- fontSize: [{}, host],
8001
+ fontSize: [{}, host$1],
7945
8002
  chipFontSize: { ...chipLabel, property: 'font-size' },
7946
- fontFamily: [label, placeholder, inputField, helperText, errorMessage, chipLabel],
8003
+ fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
7947
8004
  labelTextColor: [
7948
8005
  { ...label, property: 'color' },
7949
8006
  { ...requiredIndicator, property: 'color' },
7950
8007
  ],
7951
- errorMessageTextColor: { ...errorMessage, property: 'color' },
8008
+ errorMessageTextColor: { ...errorMessage$1, property: 'color' },
7952
8009
  inputHeight: { ...inputField, property: 'min-height' },
7953
8010
  inputBackgroundColor: { ...inputField, property: 'background-color' },
7954
8011
  inputBorderColor: { ...inputField, property: 'border-color' },
@@ -8116,16 +8173,16 @@ const MultiSelectComboBoxClass = compose(
8116
8173
  // Note: we exclude `placeholder` because the vaadin component observes it and
8117
8174
  // tries to override it, causing us to lose the user set placeholder.
8118
8175
  excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
8119
- componentName: componentName$5,
8176
+ componentName: componentName$8,
8120
8177
  includeForwardProps: ['items', 'renderer', 'selectedItems'],
8121
8178
  })
8122
8179
  );
8123
8180
 
8124
- customElements.define(componentName$5, MultiSelectComboBoxClass);
8181
+ customElements.define(componentName$8, MultiSelectComboBoxClass);
8125
8182
 
8126
- const componentName$4 = getComponentName('badge');
8183
+ const componentName$7 = getComponentName('badge');
8127
8184
 
8128
- class RawBadge extends createBaseClass({ componentName: componentName$4, baseSelector: ':host > div' }) {
8185
+ class RawBadge extends createBaseClass({ componentName: componentName$7, baseSelector: ':host > div' }) {
8129
8186
  constructor() {
8130
8187
  super();
8131
8188
 
@@ -8173,11 +8230,11 @@ const BadgeClass = compose(
8173
8230
  componentNameValidationMixin
8174
8231
  )(RawBadge);
8175
8232
 
8176
- customElements.define(componentName$4, BadgeClass);
8233
+ customElements.define(componentName$7, BadgeClass);
8177
8234
 
8178
- const componentName$3 = getComponentName('modal');
8235
+ const componentName$6 = getComponentName('modal');
8179
8236
 
8180
- const customMixin = (superclass) =>
8237
+ const customMixin$1 = (superclass) =>
8181
8238
  class ModalMixinClass extends superclass {
8182
8239
  get opened() {
8183
8240
  return this.getAttribute('opened') === 'true';
@@ -8267,18 +8324,18 @@ const ModalClass = compose(
8267
8324
  }),
8268
8325
  draggableMixin,
8269
8326
  componentNameValidationMixin,
8270
- customMixin
8327
+ customMixin$1
8271
8328
  )(
8272
8329
  createProxy({
8273
8330
  slots: [''],
8274
8331
  wrappedEleName: 'vaadin-dialog',
8275
8332
  style: () => ``,
8276
8333
  excludeAttrsSync: ['tabindex', 'opened'],
8277
- componentName: componentName$3,
8334
+ componentName: componentName$6,
8278
8335
  })
8279
8336
  );
8280
8337
 
8281
- customElements.define(componentName$3, ModalClass);
8338
+ customElements.define(componentName$6, ModalClass);
8282
8339
 
8283
8340
  const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
8284
8341
 
@@ -8289,7 +8346,7 @@ if (!vaadinContainerClass) {
8289
8346
  class NotificationContainerClass extends vaadinContainerClass {}
8290
8347
  customElements.define(getComponentName('notification-container'), NotificationContainerClass);
8291
8348
 
8292
- const componentName$2 = getComponentName('notification-card');
8349
+ const componentName$5 = getComponentName('notification-card');
8293
8350
 
8294
8351
  const notificationCardMixin = (superclass) =>
8295
8352
  class NotificationCardMixinClass extends superclass {
@@ -8397,13 +8454,13 @@ const NotificationCardClass = compose(
8397
8454
  }
8398
8455
  `,
8399
8456
  excludeAttrsSync: ['tabindex'],
8400
- componentName: componentName$2,
8457
+ componentName: componentName$5,
8401
8458
  })
8402
8459
  );
8403
8460
 
8404
- customElements.define(componentName$2, NotificationCardClass);
8461
+ customElements.define(componentName$5, NotificationCardClass);
8405
8462
 
8406
- const componentName$1 = getComponentName('notification');
8463
+ const componentName$4 = getComponentName('notification');
8407
8464
 
8408
8465
  const NotificationMixin = (superclass) =>
8409
8466
  class NotificationMixinClass extends superclass {
@@ -8498,101 +8555,635 @@ const NotificationClass = compose(
8498
8555
  createProxy({
8499
8556
  wrappedEleName: 'vaadin-notification',
8500
8557
  excludeAttrsSync: ['tabindex'],
8501
- componentName: componentName$1,
8558
+ componentName: componentName$4,
8502
8559
  })
8503
8560
  );
8504
8561
 
8505
- customElements.define(componentName$1, NotificationClass);
8562
+ customElements.define(componentName$4, NotificationClass);
8506
8563
 
8507
- const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
8564
+ const componentName$3 = getComponentName('mappings-field-internal');
8508
8565
 
8509
- // lodash.set alternative
8510
- const set = (obj, path, value) => {
8511
- const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
8566
+ const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$3, baseSelector: 'div' });
8512
8567
 
8513
- pathArray.reduce((acc, key, i) => {
8514
- if (acc[key] === undefined) acc[key] = {};
8515
- if (i === pathArray.length - 1) acc[key] = value;
8516
- return acc[key];
8517
- }, obj);
8568
+ class MappingsFieldInternal extends BaseInputClass$1 {
8569
+ #errorItem;
8518
8570
 
8519
- return obj;
8520
- };
8571
+ static get observedAttributes() {
8572
+ return [].concat(BaseInputClass$1.observedAttributes || [], [
8573
+ 'label-value',
8574
+ 'label-attr',
8575
+ 'button-label',
8576
+ 'invalid',
8577
+ 'readonly',
8578
+ 'disabled',
8579
+ ]);
8580
+ }
8521
8581
 
8522
- const transformTheme = (theme, path, getTransformation) => {
8523
- return Object.entries(theme).reduce((acc, [key, val]) => {
8524
- if (val?.constructor !== Object) {
8525
- return merge(acc, getTransformation(path.concat(key), val));
8582
+ // eslint-disable-next-line class-methods-use-this
8583
+ isValidDataType(data) {
8584
+ try {
8585
+ return data.every(
8586
+ (obj) =>
8587
+ typeof obj === 'object' &&
8588
+ !Array.isArray(obj) &&
8589
+ Object.getOwnPropertyNames(obj).length === 1 &&
8590
+ typeof obj[Object.keys(obj)[0]] === 'string' &&
8591
+ obj[Object.keys(obj)[0]].trim() !== ''
8592
+ );
8593
+ } catch (e) {
8594
+ return false;
8526
8595
  }
8527
- return merge(acc, transformTheme(val, [...path, key], getTransformation));
8528
- }, {});
8529
- };
8530
-
8531
- const stringifyArray = (strArr) =>
8532
- strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
8596
+ }
8533
8597
 
8534
- const getCssVarValue = (val) => {
8535
- switch (true) {
8536
- case Array.isArray(val):
8537
- return stringifyArray(val);
8538
- case isUrl(val):
8539
- return `url(${val})`;
8540
- default:
8541
- return val;
8598
+ get labelValue() {
8599
+ return this.getAttribute('label-value') || 'Value';
8542
8600
  }
8543
- };
8544
8601
 
8545
- const themeToCSSVarsObj = (theme) =>
8546
- transformTheme(theme, [], (path, val) => ({
8547
- [getVarName(path)]: getCssVarValue(val),
8548
- }));
8602
+ get labelAttr() {
8603
+ return this.getAttribute('label-attr') || 'Attribute';
8604
+ }
8549
8605
 
8550
- const getThemeRefs = (theme, prefix) =>
8551
- transformTheme(theme, [], (path) =>
8552
- set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
8553
- );
8606
+ get buttonLabel() {
8607
+ return this.getAttribute('button-label') || 'Add mapping';
8608
+ }
8554
8609
 
8555
- const getThemeVars = (theme, prefix) =>
8556
- transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
8610
+ get options() {
8611
+ return this.getAttribute('options') || [];
8612
+ }
8557
8613
 
8558
- const globalsThemeToStyle = (theme, themeName = '') => {
8559
- const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
8560
- (acc, entry) => `${acc}${entry.join(':')};\n`,
8561
- ''
8562
- );
8614
+ addNewMappingItem() {
8615
+ const newMappingItem = document.createElement('descope-mapping-item');
8616
+ newMappingItem.setAttribute('bordered', 'true');
8617
+ this.mappingsContainerEle.appendChild(newMappingItem);
8618
+ forwardAttrs(this, newMappingItem, {
8619
+ includeAttrs: ['size', 'full-width', 'separator', 'options', 'disabled'],
8620
+ });
8621
+ // This needs to be done with the timeout, otherwise the validation is performed
8622
+ // before the new item is added and thus returns a wrong result
8623
+ setTimeout(() => {
8624
+ this.setCustomValidity('');
8625
+ newMappingItem.addEventListener('mapping-item-removed', (e) => {
8626
+ // If the removed item was the one that was invalid, we need to reset the invalid indication for the internal
8627
+ if (newMappingItem === this.#errorItem) {
8628
+ this.resetInvalidIndication();
8629
+ this.#errorItem = undefined;
8630
+ }
8631
+ newMappingItem.remove();
8632
+ this.setCustomValidity('');
8633
+ e.stopPropagation();
8634
+ });
8635
+ }, 0);
8636
+ return newMappingItem;
8637
+ }
8563
8638
 
8564
- if (!themeName) return style;
8639
+ get items() {
8640
+ return Array.from(this.mappingsContainerEle.querySelectorAll('descope-mapping-item'));
8641
+ }
8565
8642
 
8566
- return `*[data-theme="${themeName}"] {${style}}`;
8567
- };
8643
+ get value() {
8644
+ return this.items.reduce((acc, item) => {
8645
+ if (!item.value) {
8646
+ return acc;
8647
+ }
8568
8648
 
8569
- const componentsThemeToStyleObj = (componentsTheme) =>
8570
- transformTheme(componentsTheme, [], (path, val) => {
8571
- const [component, ...restPath] = path;
8572
- const property = restPath.pop();
8573
- const componentName = getComponentName(component);
8649
+ return [...acc, item.value];
8650
+ }, []);
8651
+ }
8574
8652
 
8575
- if (property === 'undefined') {
8653
+ set value(mappings) {
8654
+ if (!this.isValidDataType(mappings)) {
8576
8655
  // eslint-disable-next-line no-console
8577
- console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
8656
+ console.error(
8657
+ 'received invalid value to set - should be an array of objects with one key-value pair'
8658
+ );
8659
+ return;
8578
8660
  }
8579
8661
 
8580
- // we need a support for portal components theme (e.g. overlay)
8581
- // this allows us to generate those themes under different sections
8582
- // if the theme has root level attribute that starts with #
8583
- // we are generating a new theme
8584
- let themeName = BASE_THEME_SECTION;
8662
+ const currentItems = this.items;
8585
8663
 
8586
- if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
8587
- themeName = restPath.shift();
8664
+ // Remove extra mapping items we don't need
8665
+ if (currentItems.length > mappings.length) {
8666
+ for (let i = mappings.length; i < currentItems.length; i++) {
8667
+ this.mappingsContainerEle.removeChild(currentItems[i]);
8668
+ }
8588
8669
  }
8589
8670
 
8590
- // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
8591
- // starts with underscore -> attribute selector
8592
- const attrsSelector = restPath.reduce((acc, section, idx) => {
8593
- if (section.startsWith('_')) return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
8671
+ // Add or update items
8672
+ mappings.forEach((mapping, index) => {
8673
+ const mappingItem = currentItems[index];
8674
+ if (mappingItem) {
8675
+ // Set existing item value
8676
+ mappingItem.value = mapping;
8677
+ } else {
8678
+ // Add new item
8679
+ const newMappingItem = this.addNewMappingItem();
8680
+ // Setting the new item value needs to be done with the timeout,
8681
+ // otherwise the value is not set correctly
8682
+ setTimeout(() => {
8683
+ newMappingItem.value = mapping;
8684
+ }, 0);
8685
+ }
8686
+ });
8687
+ }
8594
8688
 
8595
- const nextSection = restPath[idx + 1];
8689
+ constructor() {
8690
+ super();
8691
+
8692
+ this.innerHTML = `
8693
+ <div class="labels-container" part="labels"></div>
8694
+ <div class="mappings-container"></div>
8695
+ <div class="button-container"></div>
8696
+ `;
8697
+
8698
+ this.labelsEle = this.querySelector('.labels-container');
8699
+ this.mappingsContainerEle = this.querySelector('.mappings-container');
8700
+ this.buttonContainer = this.querySelector('.button-container');
8701
+ }
8702
+
8703
+ initLabels() {
8704
+ this.labelsEle.innerHTML = `
8705
+ <descope-text variant="body2" part="value-label">${this.labelValue}</descope-text>
8706
+ <descope-text variant="body2" part="attr-label">${this.labelAttr}</descope-text>
8707
+ `;
8708
+ }
8709
+
8710
+ initAddButton() {
8711
+ this.buttonContainer.innerHTML = `
8712
+ <descope-button variant="link" mode="primary" disabled="${this.isDisabled}">
8713
+ <vaadin-icon icon="vaadin:plus"></vaadin-icon>
8714
+ ${this.buttonLabel}
8715
+ </descope-button>
8716
+ `;
8717
+ const button = this.querySelector('descope-button');
8718
+ button.onclick = () => {
8719
+ this.addNewMappingItem();
8720
+ };
8721
+ forwardAttrs(this, button, {
8722
+ includeAttrs: ['disabled'],
8723
+ });
8724
+ }
8725
+
8726
+ init() {
8727
+ // This event listener needs to be placed before the super.init() call
8728
+ this.addEventListener('focus', (e) => {
8729
+ // we want to ignore focus events we are dispatching
8730
+ if (e.isTrusted) {
8731
+ const focusedElement =
8732
+ this.#errorItem || this.items[0] || this.querySelector('descope-button');
8733
+ focusedElement.focus();
8734
+ }
8735
+ });
8736
+
8737
+ super.init?.();
8738
+ this.initLabels();
8739
+ this.initAddButton();
8740
+
8741
+ // This event listener is responsible for removing the invalid attribute
8742
+ // from the internal once the invalid item turns valid
8743
+ this.addEventListener('input', () => {
8744
+ const isErrorItemMounted = this.mappingsContainerEle.contains(this.#errorItem);
8745
+ if (isErrorItemMounted && this.#errorItem?.checkValidity()) {
8746
+ // Item has changed, it was invalid before and now it's valid
8747
+ this.resetInvalidIndication();
8748
+ this.#errorItem.removeAttribute('invalid');
8749
+ this.#errorItem = undefined;
8750
+ }
8751
+ });
8752
+ }
8753
+
8754
+ resetInvalidIndication() {
8755
+ this.removeAttribute('invalid');
8756
+ }
8757
+
8758
+ getValidity() {
8759
+ const errorItem = this.items.find((item) => !item.checkValidity());
8760
+ if (errorItem) {
8761
+ return errorItem.validity;
8762
+ }
8763
+
8764
+ return {};
8765
+ }
8766
+
8767
+ #handleInvalidMappings(isInvalid) {
8768
+ if (isInvalid) {
8769
+ this.#errorItem = this.items.find((item) => !item.checkValidity());
8770
+ this.#errorItem?.reportValidity();
8771
+ this.#errorItem?.setAttribute('invalid', 'true');
8772
+ }
8773
+ }
8774
+
8775
+ attributeChangedCallback(attrName, oldValue, newValue) {
8776
+ super.attributeChangedCallback?.(attrName, oldValue, newValue);
8777
+ if (attrName === 'label-value' || attrName === 'label-attr') {
8778
+ this.initLabels();
8779
+ }
8780
+ if (attrName === 'button-label') {
8781
+ this.initAddButton();
8782
+ }
8783
+ if (attrName === 'invalid') {
8784
+ this.#handleInvalidMappings(newValue === 'true');
8785
+ }
8786
+ if (attrName === 'readonly') {
8787
+ this.toggleAttribute('inert', newValue === 'true');
8788
+ }
8789
+ }
8790
+ }
8791
+
8792
+ const componentName$2 = getComponentName('mappings-field');
8793
+
8794
+ const SEPARATOR_WIDTH = '80px';
8795
+ const REMOVE_BUTTON_WIDTH = '60px';
8796
+
8797
+ const customMixin = (superclass) =>
8798
+ class MappingsFieldMixinClass extends superclass {
8799
+ get defaultValues() {
8800
+ const defaultValuesAttr = this.getAttribute('default-values');
8801
+ if (defaultValuesAttr) {
8802
+ try {
8803
+ return JSON.parse(defaultValuesAttr);
8804
+ } catch (e) {
8805
+ // eslint-disable-next-line no-console
8806
+ console.error('could not parse data string from attribute "default-values" -', e.message);
8807
+ }
8808
+ }
8809
+ return [];
8810
+ }
8811
+
8812
+ setDefaultValues() {
8813
+ const initialDefaultValues = this.defaultValues;
8814
+ if (Object.keys(initialDefaultValues).length > 0) {
8815
+ this.inputElement.value = initialDefaultValues;
8816
+ }
8817
+ }
8818
+
8819
+ init() {
8820
+ super.init?.();
8821
+ const template = document.createElement('template');
8822
+
8823
+ template.innerHTML = `
8824
+ <${componentName$3}
8825
+ tabindex="-1"
8826
+ ></${componentName$3}>
8827
+ `;
8828
+
8829
+ this.baseElement.appendChild(template.content.cloneNode(true));
8830
+
8831
+ this.inputElement = this.shadowRoot.querySelector(componentName$3);
8832
+
8833
+ forwardAttrs(this, this.inputElement, {
8834
+ includeAttrs: [
8835
+ 'size',
8836
+ 'full-width',
8837
+ 'label-value',
8838
+ 'label-attr',
8839
+ 'button-label',
8840
+ 'separator',
8841
+ 'options',
8842
+ 'default-values',
8843
+ 'invalid',
8844
+ 'readonly',
8845
+ 'disabled',
8846
+ ],
8847
+ });
8848
+
8849
+ this.setDefaultValues();
8850
+ }
8851
+ };
8852
+
8853
+ const { host, helperText, errorMessage, mappingItem, labels, valueLabel, attrLabel, separator } = {
8854
+ host: { selector: () => ':host' },
8855
+ helperText: { selector: '::part(helper-text)' },
8856
+ errorMessage: { selector: '::part(error-message)' },
8857
+ mappingItem: { selector: 'descope-mapping-item::part(wrapper)' },
8858
+ labels: { selector: 'descope-mappings-field-internal [part="labels"] descope-text' },
8859
+ valueLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="value-label"]' },
8860
+ attrLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="attr-label"]' },
8861
+ separator: { selector: 'descope-mapping-item::part(separator)' },
8862
+ };
8863
+
8864
+ const MappingsFieldClass = compose(
8865
+ createStyleMixin({
8866
+ mappings: {
8867
+ hostWidth: { ...host, property: 'width' },
8868
+ hostDirection: { ...host, property: 'direction' },
8869
+ // we apply font-size also on the host so we can set its width with em
8870
+ fontSize: [{}, host, { ...separator, property: 'margin-top' }],
8871
+ fontFamily: [helperText, errorMessage, labels],
8872
+ separatorFontSize: { ...separator, property: 'font-size' },
8873
+ labelTextColor: { ...labels, property: TextClass.cssVarList.textColor },
8874
+ itemMarginBottom: { ...mappingItem, property: 'margin-bottom' },
8875
+ valueLabelMinWidth: { ...valueLabel, property: 'min-width' },
8876
+ attrLabelMinWidth: { ...attrLabel, property: 'min-width' },
8877
+ },
8878
+ }),
8879
+ draggableMixin,
8880
+ composedProxyInputMixin({
8881
+ proxyProps: ['value', 'selectionStart'],
8882
+ inputEvent: 'input',
8883
+ proxyParentValidation: true,
8884
+ }),
8885
+ componentNameValidationMixin,
8886
+ customMixin
8887
+ )(
8888
+ createProxy({
8889
+ slots: [],
8890
+ wrappedEleName: 'vaadin-custom-field',
8891
+ style: () => `
8892
+ :host {
8893
+ display: inline-flex;
8894
+ max-width: 100%;
8895
+ direction: ltr;
8896
+ }
8897
+ vaadin-custom-field {
8898
+ line-height: unset;
8899
+ width: 100%;
8900
+ }
8901
+
8902
+ descope-mappings-field-internal [part="labels"] {
8903
+ margin-bottom: 0.5em;
8904
+ display: grid;
8905
+ grid-template-columns: 1fr ${SEPARATOR_WIDTH} 1fr ${REMOVE_BUTTON_WIDTH};
8906
+ }
8907
+
8908
+ descope-mappings-field-internal [part="labels"] [part="value-label"],
8909
+ descope-mappings-field-internal [part="labels"] [part="attr-label"] {
8910
+ ${TextClass.cssVarList.fontWeight}: 500;
8911
+ }
8912
+
8913
+ descope-mappings-field-internal [part="labels"] [part="value-label"] {
8914
+ grid-column: 1 / span 1;
8915
+ }
8916
+
8917
+ descope-mappings-field-internal [part="labels"] [part="attr-label"] {
8918
+ grid-column: 3 / span 1;
8919
+ }
8920
+
8921
+ descope-mapping-item::part(wrapper) {
8922
+ display: grid;
8923
+ grid-template-columns: 1fr ${SEPARATOR_WIDTH} 1fr ${REMOVE_BUTTON_WIDTH};
8924
+ }
8925
+ `,
8926
+ excludeAttrsSync: [
8927
+ 'tabindex',
8928
+ 'label-value',
8929
+ 'label-attr',
8930
+ 'button-label',
8931
+ 'options',
8932
+ 'error-message',
8933
+ ],
8934
+ componentName: componentName$2,
8935
+ })
8936
+ );
8937
+
8938
+ customElements.define(componentName$3, MappingsFieldInternal);
8939
+
8940
+ const componentName$1 = getComponentName('mapping-item');
8941
+
8942
+ const inputAttrs = ['size', 'bordered', 'readonly', 'full-width', 'disabled'];
8943
+
8944
+ const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: 'div' });
8945
+
8946
+ class MappingItem extends BaseInputClass {
8947
+ static get observedAttributes() {
8948
+ return [].concat(BaseInputClass.observedAttributes || [], inputAttrs, [
8949
+ 'separator',
8950
+ 'options',
8951
+ 'invalid',
8952
+ 'disabled',
8953
+ ]);
8954
+ }
8955
+
8956
+ get separator() {
8957
+ return this.getAttribute('separator') || 'map to';
8958
+ }
8959
+
8960
+ get value() {
8961
+ const attributeValue = this.attributeInput.value;
8962
+ const inputValue = this.valueInput.value;
8963
+ if (attributeValue && inputValue) {
8964
+ return { [attributeValue]: inputValue };
8965
+ }
8966
+ return null;
8967
+ }
8968
+
8969
+ set value(mapping) {
8970
+ if (Object.entries(mapping).length !== 1) {
8971
+ // eslint-disable-next-line no-console
8972
+ console.error(
8973
+ 'descope-mapping item expected expects only one key-value pair in the value but received: ',
8974
+ mapping
8975
+ );
8976
+ return;
8977
+ }
8978
+ const [attribute, value] = Object.entries(mapping)[0];
8979
+ this.valueInput.value = value;
8980
+ this.attributeInput.value = attribute;
8981
+ // The event needs to be dispatched to trigger the validation if setting the value externally
8982
+ this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
8983
+ }
8984
+
8985
+ constructor() {
8986
+ super();
8987
+
8988
+ this.attachShadow({ mode: 'open' }).innerHTML = `
8989
+ <style>
8990
+ .wrapper {
8991
+ display: flex;
8992
+ }
8993
+ .separator {
8994
+ text-align: center;
8995
+ flex-shrink: 0;
8996
+ }
8997
+ </style>
8998
+ <div class="wrapper" part="wrapper">
8999
+ <descope-text-field required="true"></descope-text-field>
9000
+ <div class="separator" part="separator">${this.separator}</div>
9001
+ <descope-combo-box
9002
+ item-label-path="data-name"
9003
+ item-value-path="data-id"
9004
+ required="true"
9005
+ >
9006
+ </descope-combo-box>
9007
+ <descope-button variant="link" mode="primary">
9008
+ <vaadin-icon icon="vaadin:minus"></vaadin-icon>
9009
+ </descope-button>
9010
+ </div>
9011
+ `;
9012
+ this.valueInput = this.shadowRoot.querySelector('descope-text-field');
9013
+ this.attributeInput = this.shadowRoot.querySelector('descope-combo-box');
9014
+ this.inputs = [this.valueInput, this.attributeInput];
9015
+ this.removeButton = this.shadowRoot.querySelector('descope-button');
9016
+
9017
+ forwardAttrs(this, this.valueInput, {
9018
+ includeAttrs: inputAttrs,
9019
+ });
9020
+ forwardAttrs(this, this.attributeInput, {
9021
+ includeAttrs: [...inputAttrs, 'options'],
9022
+ mapAttrs: { options: 'data' },
9023
+ });
9024
+ forwardAttrs(this, this.removeButton, {
9025
+ includeAttrs: ['disabled'],
9026
+ });
9027
+ }
9028
+
9029
+ initRemoveButton() {
9030
+ this.removeButton.addEventListener('click', () =>
9031
+ this.dispatchEvent(new CustomEvent('mapping-item-removed'))
9032
+ );
9033
+ }
9034
+
9035
+ init() {
9036
+ super.init?.();
9037
+ this.initRemoveButton();
9038
+ }
9039
+
9040
+ getValidity() {
9041
+ const attributeValue = this.attributeInput.value;
9042
+ const inputValue = this.valueInput.value;
9043
+ if (!attributeValue || !inputValue) {
9044
+ return { badInput: true };
9045
+ }
9046
+ return {};
9047
+ }
9048
+
9049
+ reportValidity() {
9050
+ this.inputs.forEach((input) => input.reportValidity());
9051
+ }
9052
+
9053
+ focus() {
9054
+ const focusedElement =
9055
+ this.checkValidity() || !this.valueInput.checkValidity()
9056
+ ? this.valueInput
9057
+ : this.attributeInput;
9058
+ focusedElement.focus();
9059
+ }
9060
+
9061
+ handleSeparatorChange() {
9062
+ this.shadowRoot.querySelector('.separator').textContent = this.separator;
9063
+ }
9064
+
9065
+ #handleInvalidMapping(invalid) {
9066
+ if (invalid === 'true') {
9067
+ const inputValue = this.valueInput.value;
9068
+ if (!inputValue) {
9069
+ this.valueInput.setAttribute('invalid', 'true');
9070
+ this.valueInput.setAttribute('error-message', this.defaultErrorMsgValueMissing);
9071
+ }
9072
+
9073
+ const attributeValue = this.attributeInput.value;
9074
+ if (!attributeValue) {
9075
+ this.attributeInput.setAttribute('invalid', 'true');
9076
+ this.attributeInput.setAttribute('error-message', this.defaultErrorMsgValueMissing);
9077
+ }
9078
+ }
9079
+ }
9080
+
9081
+ attributeChangedCallback(attrName, oldValue, newValue) {
9082
+ super.attributeChangedCallback?.(attrName, oldValue, newValue);
9083
+
9084
+ if (attrName === 'separator') {
9085
+ this.handleSeparatorChange();
9086
+ }
9087
+
9088
+ if (attrName === 'invalid') {
9089
+ this.#handleInvalidMapping(newValue);
9090
+ }
9091
+ }
9092
+ }
9093
+
9094
+ customElements.define(componentName$1, MappingItem);
9095
+
9096
+ customElements.define(componentName$2, MappingsFieldClass);
9097
+
9098
+ const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
9099
+
9100
+ // lodash.set alternative
9101
+ const set = (obj, path, value) => {
9102
+ const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
9103
+
9104
+ pathArray.reduce((acc, key, i) => {
9105
+ if (acc[key] === undefined) acc[key] = {};
9106
+ if (i === pathArray.length - 1) acc[key] = value;
9107
+ return acc[key];
9108
+ }, obj);
9109
+
9110
+ return obj;
9111
+ };
9112
+
9113
+ const transformTheme = (theme, path, getTransformation) => {
9114
+ return Object.entries(theme).reduce((acc, [key, val]) => {
9115
+ if (val?.constructor !== Object) {
9116
+ return merge(acc, getTransformation(path.concat(key), val));
9117
+ }
9118
+ return merge(acc, transformTheme(val, [...path, key], getTransformation));
9119
+ }, {});
9120
+ };
9121
+
9122
+ const stringifyArray = (strArr) =>
9123
+ strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
9124
+
9125
+ const getCssVarValue = (val) => {
9126
+ switch (true) {
9127
+ case Array.isArray(val):
9128
+ return stringifyArray(val);
9129
+ case isUrl(val):
9130
+ return `url(${val})`;
9131
+ default:
9132
+ return val;
9133
+ }
9134
+ };
9135
+
9136
+ const themeToCSSVarsObj = (theme) =>
9137
+ transformTheme(theme, [], (path, val) => ({
9138
+ [getVarName(path)]: getCssVarValue(val),
9139
+ }));
9140
+
9141
+ const getThemeRefs = (theme, prefix) =>
9142
+ transformTheme(theme, [], (path) =>
9143
+ set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
9144
+ );
9145
+
9146
+ const getThemeVars = (theme, prefix) =>
9147
+ transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
9148
+
9149
+ const globalsThemeToStyle = (theme, themeName = '') => {
9150
+ const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
9151
+ (acc, entry) => `${acc}${entry.join(':')};\n`,
9152
+ ''
9153
+ );
9154
+
9155
+ if (!themeName) return style;
9156
+
9157
+ return `*[data-theme="${themeName}"] {${style}}`;
9158
+ };
9159
+
9160
+ const componentsThemeToStyleObj = (componentsTheme) =>
9161
+ transformTheme(componentsTheme, [], (path, val) => {
9162
+ const [component, ...restPath] = path;
9163
+ const property = restPath.pop();
9164
+ const componentName = getComponentName(component);
9165
+
9166
+ if (property === 'undefined') {
9167
+ // eslint-disable-next-line no-console
9168
+ console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
9169
+ }
9170
+
9171
+ // we need a support for portal components theme (e.g. overlay)
9172
+ // this allows us to generate those themes under different sections
9173
+ // if the theme has root level attribute that starts with #
9174
+ // we are generating a new theme
9175
+ let themeName = BASE_THEME_SECTION;
9176
+
9177
+ if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
9178
+ themeName = restPath.shift();
9179
+ }
9180
+
9181
+ // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
9182
+ // starts with underscore -> attribute selector
9183
+ const attrsSelector = restPath.reduce((acc, section, idx) => {
9184
+ if (section.startsWith('_')) return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
9185
+
9186
+ const nextSection = restPath[idx + 1];
8596
9187
 
8597
9188
  if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
8598
9189
  // eslint-disable-next-line no-console
@@ -8874,33 +9465,33 @@ const globals = {
8874
9465
  fonts,
8875
9466
  direction,
8876
9467
  };
8877
- const vars$y = getThemeVars(globals);
9468
+ const vars$z = getThemeVars(globals);
8878
9469
 
8879
- const globalRefs$h = getThemeRefs(globals);
9470
+ const globalRefs$i = getThemeRefs(globals);
8880
9471
  const compVars$4 = ButtonClass.cssVarList;
8881
9472
 
8882
9473
  const mode = {
8883
- primary: globalRefs$h.colors.primary,
8884
- secondary: globalRefs$h.colors.secondary,
8885
- success: globalRefs$h.colors.success,
8886
- error: globalRefs$h.colors.error,
8887
- surface: globalRefs$h.colors.surface,
9474
+ primary: globalRefs$i.colors.primary,
9475
+ secondary: globalRefs$i.colors.secondary,
9476
+ success: globalRefs$i.colors.success,
9477
+ error: globalRefs$i.colors.error,
9478
+ surface: globalRefs$i.colors.surface,
8888
9479
  };
8889
9480
 
8890
- const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$I);
9481
+ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$L);
8891
9482
 
8892
9483
  const button = {
8893
9484
  ...helperTheme$3,
8894
9485
 
8895
- [compVars$4.fontFamily]: globalRefs$h.fonts.font1.family,
9486
+ [compVars$4.fontFamily]: globalRefs$i.fonts.font1.family,
8896
9487
 
8897
9488
  [compVars$4.cursor]: 'pointer',
8898
9489
  [compVars$4.hostHeight]: '3em',
8899
9490
  [compVars$4.hostWidth]: 'auto',
8900
- [compVars$4.hostDirection]: globalRefs$h.direction,
9491
+ [compVars$4.hostDirection]: globalRefs$i.direction,
8901
9492
 
8902
- [compVars$4.borderRadius]: globalRefs$h.radius.sm,
8903
- [compVars$4.borderWidth]: globalRefs$h.border.xs,
9493
+ [compVars$4.borderRadius]: globalRefs$i.radius.sm,
9494
+ [compVars$4.borderWidth]: globalRefs$i.border.xs,
8904
9495
  [compVars$4.borderStyle]: 'solid',
8905
9496
  [compVars$4.borderColor]: 'transparent',
8906
9497
 
@@ -8943,10 +9534,10 @@ const button = {
8943
9534
  },
8944
9535
 
8945
9536
  _disabled: {
8946
- [helperVars$3.main]: globalRefs$h.colors.surface.light,
8947
- [helperVars$3.dark]: globalRefs$h.colors.surface.dark,
8948
- [helperVars$3.light]: globalRefs$h.colors.surface.light,
8949
- [helperVars$3.contrast]: globalRefs$h.colors.surface.main,
9537
+ [helperVars$3.main]: globalRefs$i.colors.surface.light,
9538
+ [helperVars$3.dark]: globalRefs$i.colors.surface.dark,
9539
+ [helperVars$3.light]: globalRefs$i.colors.surface.light,
9540
+ [helperVars$3.contrast]: globalRefs$i.colors.surface.main,
8950
9541
  },
8951
9542
 
8952
9543
  variant: {
@@ -8994,7 +9585,7 @@ const button = {
8994
9585
  },
8995
9586
  };
8996
9587
 
8997
- const vars$x = {
9588
+ const vars$y = {
8998
9589
  ...compVars$4,
8999
9590
  ...helperVars$3,
9000
9591
  };
@@ -9002,25 +9593,25 @@ const vars$x = {
9002
9593
  var button$1 = /*#__PURE__*/Object.freeze({
9003
9594
  __proto__: null,
9004
9595
  default: button,
9005
- vars: vars$x
9596
+ vars: vars$y
9006
9597
  });
9007
9598
 
9008
9599
  const componentName = getComponentName('input-wrapper');
9009
- const globalRefs$g = getThemeRefs(globals);
9600
+ const globalRefs$h = getThemeRefs(globals);
9010
9601
 
9011
- const [theme$1, refs, vars$w] = createHelperVars(
9602
+ const [theme$1, refs, vars$x] = createHelperVars(
9012
9603
  {
9013
- labelTextColor: globalRefs$g.colors.surface.dark,
9014
- valueTextColor: globalRefs$g.colors.surface.contrast,
9015
- placeholderTextColor: globalRefs$g.colors.surface.dark,
9604
+ labelTextColor: globalRefs$h.colors.surface.dark,
9605
+ valueTextColor: globalRefs$h.colors.surface.contrast,
9606
+ placeholderTextColor: globalRefs$h.colors.surface.dark,
9016
9607
  requiredIndicator: "'*'",
9017
- errorMessageTextColor: globalRefs$g.colors.error.main,
9608
+ errorMessageTextColor: globalRefs$h.colors.error.main,
9018
9609
 
9019
- borderWidth: globalRefs$g.border.xs,
9020
- borderRadius: globalRefs$g.radius.xs,
9610
+ borderWidth: globalRefs$h.border.xs,
9611
+ borderRadius: globalRefs$h.radius.xs,
9021
9612
  borderColor: 'transparent',
9022
9613
 
9023
- outlineWidth: globalRefs$g.border.sm,
9614
+ outlineWidth: globalRefs$h.border.sm,
9024
9615
  outlineStyle: 'solid',
9025
9616
  outlineColor: 'transparent',
9026
9617
  outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -9031,11 +9622,11 @@ const [theme$1, refs, vars$w] = createHelperVars(
9031
9622
  horizontalPadding: '0.5em',
9032
9623
  verticalPadding: '0.5em',
9033
9624
 
9034
- backgroundColor: globalRefs$g.colors.surface.main,
9625
+ backgroundColor: globalRefs$h.colors.surface.main,
9035
9626
 
9036
- fontFamily: globalRefs$g.fonts.font1.family,
9627
+ fontFamily: globalRefs$h.fonts.font1.family,
9037
9628
 
9038
- direction: globalRefs$g.direction,
9629
+ direction: globalRefs$h.direction,
9039
9630
 
9040
9631
  overlayOpacity: '0.3',
9041
9632
 
@@ -9051,27 +9642,27 @@ const [theme$1, refs, vars$w] = createHelperVars(
9051
9642
  },
9052
9643
 
9053
9644
  _focused: {
9054
- outlineColor: globalRefs$g.colors.surface.light,
9645
+ outlineColor: globalRefs$h.colors.surface.light,
9055
9646
  _invalid: {
9056
- outlineColor: globalRefs$g.colors.error.main,
9647
+ outlineColor: globalRefs$h.colors.error.main,
9057
9648
  },
9058
9649
  },
9059
9650
 
9060
9651
  _bordered: {
9061
- outlineWidth: globalRefs$g.border.xs,
9062
- borderColor: globalRefs$g.colors.surface.light,
9652
+ outlineWidth: globalRefs$h.border.xs,
9653
+ borderColor: globalRefs$h.colors.surface.light,
9063
9654
  borderStyle: 'solid',
9064
9655
  _invalid: {
9065
- borderColor: globalRefs$g.colors.error.main,
9656
+ borderColor: globalRefs$h.colors.error.main,
9066
9657
  },
9067
9658
  },
9068
9659
 
9069
9660
  _disabled: {
9070
- labelTextColor: globalRefs$g.colors.surface.light,
9071
- borderColor: globalRefs$g.colors.surface.light,
9072
- valueTextColor: globalRefs$g.colors.surface.light,
9073
- placeholderTextColor: globalRefs$g.colors.surface.light,
9074
- backgroundColor: globalRefs$g.colors.surface.main,
9661
+ labelTextColor: globalRefs$h.colors.surface.light,
9662
+ borderColor: globalRefs$h.colors.surface.light,
9663
+ valueTextColor: globalRefs$h.colors.surface.light,
9664
+ placeholderTextColor: globalRefs$h.colors.surface.light,
9665
+ backgroundColor: globalRefs$h.colors.surface.main,
9075
9666
  },
9076
9667
  },
9077
9668
  componentName
@@ -9081,22 +9672,63 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
9081
9672
  __proto__: null,
9082
9673
  default: theme$1,
9083
9674
  refs: refs,
9084
- vars: vars$w
9675
+ vars: vars$x
9085
9676
  });
9086
9677
 
9087
- const vars$v = TextFieldClass.cssVarList;
9678
+ const vars$w = TextFieldClass.cssVarList;
9088
9679
 
9089
9680
  const textField = {
9681
+ [vars$w.hostWidth]: refs.width,
9682
+ [vars$w.hostMinWidth]: refs.minWidth,
9683
+ [vars$w.hostDirection]: refs.direction,
9684
+ [vars$w.fontSize]: refs.fontSize,
9685
+ [vars$w.fontFamily]: refs.fontFamily,
9686
+ [vars$w.labelTextColor]: refs.labelTextColor,
9687
+ [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
9688
+ [vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
9689
+ [vars$w.inputValueTextColor]: refs.valueTextColor,
9690
+ [vars$w.inputPlaceholderColor]: refs.placeholderTextColor,
9691
+ [vars$w.inputBorderWidth]: refs.borderWidth,
9692
+ [vars$w.inputBorderStyle]: refs.borderStyle,
9693
+ [vars$w.inputBorderColor]: refs.borderColor,
9694
+ [vars$w.inputBorderRadius]: refs.borderRadius,
9695
+ [vars$w.inputOutlineWidth]: refs.outlineWidth,
9696
+ [vars$w.inputOutlineStyle]: refs.outlineStyle,
9697
+ [vars$w.inputOutlineColor]: refs.outlineColor,
9698
+ [vars$w.inputOutlineOffset]: refs.outlineOffset,
9699
+ [vars$w.inputBackgroundColor]: refs.backgroundColor,
9700
+ [vars$w.inputHeight]: refs.inputHeight,
9701
+ [vars$w.inputHorizontalPadding]: refs.horizontalPadding,
9702
+ textAlign: {
9703
+ right: { [vars$w.inputTextAlign]: 'right' },
9704
+ left: { [vars$w.inputTextAlign]: 'left' },
9705
+ center: { [vars$w.inputTextAlign]: 'center' },
9706
+ },
9707
+ };
9708
+
9709
+ var textField$1 = /*#__PURE__*/Object.freeze({
9710
+ __proto__: null,
9711
+ default: textField,
9712
+ textField: textField,
9713
+ vars: vars$w
9714
+ });
9715
+
9716
+ const globalRefs$g = getThemeRefs(globals);
9717
+ const vars$v = PasswordClass.cssVarList;
9718
+
9719
+ const password = {
9090
9720
  [vars$v.hostWidth]: refs.width,
9091
- [vars$v.hostMinWidth]: refs.minWidth,
9092
9721
  [vars$v.hostDirection]: refs.direction,
9093
9722
  [vars$v.fontSize]: refs.fontSize,
9094
9723
  [vars$v.fontFamily]: refs.fontFamily,
9095
9724
  [vars$v.labelTextColor]: refs.labelTextColor,
9725
+ [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
9726
+ [vars$v.inputHorizontalPadding]: refs.horizontalPadding,
9727
+ [vars$v.inputHeight]: refs.inputHeight,
9728
+ [vars$v.inputBackgroundColor]: refs.backgroundColor,
9096
9729
  [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
9097
- [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
9098
9730
  [vars$v.inputValueTextColor]: refs.valueTextColor,
9099
- [vars$v.inputPlaceholderColor]: refs.placeholderTextColor,
9731
+ [vars$v.inputPlaceholderTextColor]: refs.placeholderTextColor,
9100
9732
  [vars$v.inputBorderWidth]: refs.borderWidth,
9101
9733
  [vars$v.inputBorderStyle]: refs.borderStyle,
9102
9734
  [vars$v.inputBorderColor]: refs.borderColor,
@@ -9105,39 +9737,29 @@ const textField = {
9105
9737
  [vars$v.inputOutlineStyle]: refs.outlineStyle,
9106
9738
  [vars$v.inputOutlineColor]: refs.outlineColor,
9107
9739
  [vars$v.inputOutlineOffset]: refs.outlineOffset,
9108
- [vars$v.inputBackgroundColor]: refs.backgroundColor,
9109
- [vars$v.inputHeight]: refs.inputHeight,
9110
- [vars$v.inputHorizontalPadding]: refs.horizontalPadding,
9111
- textAlign: {
9112
- right: { [vars$v.inputTextAlign]: 'right' },
9113
- left: { [vars$v.inputTextAlign]: 'left' },
9114
- center: { [vars$v.inputTextAlign]: 'center' },
9115
- },
9740
+ [vars$v.revealButtonOffset]: globalRefs$g.spacing.md,
9741
+ [vars$v.revealButtonSize]: refs.toggleButtonSize,
9742
+ [vars$v.revealButtonColor]: refs.placeholderTextColor,
9116
9743
  };
9117
9744
 
9118
- var textField$1 = /*#__PURE__*/Object.freeze({
9745
+ var password$1 = /*#__PURE__*/Object.freeze({
9119
9746
  __proto__: null,
9120
- default: textField,
9121
- textField: textField,
9747
+ default: password,
9122
9748
  vars: vars$v
9123
9749
  });
9124
9750
 
9125
- const globalRefs$f = getThemeRefs(globals);
9126
- const vars$u = PasswordClass.cssVarList;
9751
+ const vars$u = NumberFieldClass.cssVarList;
9127
9752
 
9128
- const password = {
9753
+ const numberField = {
9129
9754
  [vars$u.hostWidth]: refs.width,
9755
+ [vars$u.hostMinWidth]: refs.minWidth,
9130
9756
  [vars$u.hostDirection]: refs.direction,
9131
9757
  [vars$u.fontSize]: refs.fontSize,
9132
9758
  [vars$u.fontFamily]: refs.fontFamily,
9133
9759
  [vars$u.labelTextColor]: refs.labelTextColor,
9134
9760
  [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
9135
- [vars$u.inputHorizontalPadding]: refs.horizontalPadding,
9136
- [vars$u.inputHeight]: refs.inputHeight,
9137
- [vars$u.inputBackgroundColor]: refs.backgroundColor,
9138
- [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
9139
9761
  [vars$u.inputValueTextColor]: refs.valueTextColor,
9140
- [vars$u.inputPlaceholderTextColor]: refs.placeholderTextColor,
9762
+ [vars$u.inputPlaceholderColor]: refs.placeholderTextColor,
9141
9763
  [vars$u.inputBorderWidth]: refs.borderWidth,
9142
9764
  [vars$u.inputBorderStyle]: refs.borderStyle,
9143
9765
  [vars$u.inputBorderColor]: refs.borderColor,
@@ -9146,20 +9768,21 @@ const password = {
9146
9768
  [vars$u.inputOutlineStyle]: refs.outlineStyle,
9147
9769
  [vars$u.inputOutlineColor]: refs.outlineColor,
9148
9770
  [vars$u.inputOutlineOffset]: refs.outlineOffset,
9149
- [vars$u.revealButtonOffset]: globalRefs$f.spacing.md,
9150
- [vars$u.revealButtonSize]: refs.toggleButtonSize,
9151
- [vars$u.revealButtonColor]: refs.placeholderTextColor,
9771
+ [vars$u.inputBackgroundColor]: refs.backgroundColor,
9772
+ [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
9773
+ [vars$u.inputHorizontalPadding]: refs.horizontalPadding,
9774
+ [vars$u.inputHeight]: refs.inputHeight,
9152
9775
  };
9153
9776
 
9154
- var password$1 = /*#__PURE__*/Object.freeze({
9777
+ var numberField$1 = /*#__PURE__*/Object.freeze({
9155
9778
  __proto__: null,
9156
- default: password,
9779
+ default: numberField,
9157
9780
  vars: vars$u
9158
9781
  });
9159
9782
 
9160
- const vars$t = NumberFieldClass.cssVarList;
9783
+ const vars$t = EmailFieldClass.cssVarList;
9161
9784
 
9162
- const numberField = {
9785
+ const emailField = {
9163
9786
  [vars$t.hostWidth]: refs.width,
9164
9787
  [vars$t.hostMinWidth]: refs.minWidth,
9165
9788
  [vars$t.hostDirection]: refs.direction,
@@ -9168,6 +9791,7 @@ const numberField = {
9168
9791
  [vars$t.labelTextColor]: refs.labelTextColor,
9169
9792
  [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
9170
9793
  [vars$t.inputValueTextColor]: refs.valueTextColor,
9794
+ [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
9171
9795
  [vars$t.inputPlaceholderColor]: refs.placeholderTextColor,
9172
9796
  [vars$t.inputBorderWidth]: refs.borderWidth,
9173
9797
  [vars$t.inputBorderStyle]: refs.borderStyle,
@@ -9178,200 +9802,167 @@ const numberField = {
9178
9802
  [vars$t.inputOutlineColor]: refs.outlineColor,
9179
9803
  [vars$t.inputOutlineOffset]: refs.outlineOffset,
9180
9804
  [vars$t.inputBackgroundColor]: refs.backgroundColor,
9181
- [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
9182
9805
  [vars$t.inputHorizontalPadding]: refs.horizontalPadding,
9183
9806
  [vars$t.inputHeight]: refs.inputHeight,
9184
9807
  };
9185
9808
 
9186
- var numberField$1 = /*#__PURE__*/Object.freeze({
9809
+ var emailField$1 = /*#__PURE__*/Object.freeze({
9187
9810
  __proto__: null,
9188
- default: numberField,
9811
+ default: emailField,
9189
9812
  vars: vars$t
9190
9813
  });
9191
9814
 
9192
- const vars$s = EmailFieldClass.cssVarList;
9815
+ const vars$s = TextAreaClass.cssVarList;
9193
9816
 
9194
- const emailField = {
9817
+ const textArea = {
9195
9818
  [vars$s.hostWidth]: refs.width,
9196
9819
  [vars$s.hostMinWidth]: refs.minWidth,
9197
9820
  [vars$s.hostDirection]: refs.direction,
9198
9821
  [vars$s.fontSize]: refs.fontSize,
9199
9822
  [vars$s.fontFamily]: refs.fontFamily,
9200
9823
  [vars$s.labelTextColor]: refs.labelTextColor,
9824
+ [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
9201
9825
  [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
9826
+ [vars$s.inputBackgroundColor]: refs.backgroundColor,
9202
9827
  [vars$s.inputValueTextColor]: refs.valueTextColor,
9203
- [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
9204
- [vars$s.inputPlaceholderColor]: refs.placeholderTextColor,
9828
+ [vars$s.inputPlaceholderTextColor]: refs.placeholderTextColor,
9829
+ [vars$s.inputBorderRadius]: refs.borderRadius,
9205
9830
  [vars$s.inputBorderWidth]: refs.borderWidth,
9206
9831
  [vars$s.inputBorderStyle]: refs.borderStyle,
9207
9832
  [vars$s.inputBorderColor]: refs.borderColor,
9208
- [vars$s.inputBorderRadius]: refs.borderRadius,
9209
9833
  [vars$s.inputOutlineWidth]: refs.outlineWidth,
9210
9834
  [vars$s.inputOutlineStyle]: refs.outlineStyle,
9211
9835
  [vars$s.inputOutlineColor]: refs.outlineColor,
9212
9836
  [vars$s.inputOutlineOffset]: refs.outlineOffset,
9213
- [vars$s.inputBackgroundColor]: refs.backgroundColor,
9214
- [vars$s.inputHorizontalPadding]: refs.horizontalPadding,
9215
- [vars$s.inputHeight]: refs.inputHeight,
9837
+ [vars$s.inputResizeType]: 'vertical',
9838
+ [vars$s.inputMinHeight]: '5em',
9839
+ textAlign: {
9840
+ right: { [vars$s.inputTextAlign]: 'right' },
9841
+ left: { [vars$s.inputTextAlign]: 'left' },
9842
+ center: { [vars$s.inputTextAlign]: 'center' },
9843
+ },
9844
+
9845
+ _readonly: {
9846
+ [vars$s.inputResizeType]: 'none',
9847
+ },
9216
9848
  };
9217
9849
 
9218
- var emailField$1 = /*#__PURE__*/Object.freeze({
9850
+ var textArea$1 = /*#__PURE__*/Object.freeze({
9219
9851
  __proto__: null,
9220
- default: emailField,
9852
+ default: textArea,
9221
9853
  vars: vars$s
9222
9854
  });
9223
9855
 
9224
- const vars$r = TextAreaClass.cssVarList;
9856
+ const vars$r = CheckboxClass.cssVarList;
9857
+ const checkboxSize = '1.35em';
9225
9858
 
9226
- const textArea = {
9859
+ const checkbox = {
9227
9860
  [vars$r.hostWidth]: refs.width,
9228
- [vars$r.hostMinWidth]: refs.minWidth,
9229
9861
  [vars$r.hostDirection]: refs.direction,
9230
9862
  [vars$r.fontSize]: refs.fontSize,
9231
9863
  [vars$r.fontFamily]: refs.fontFamily,
9232
9864
  [vars$r.labelTextColor]: refs.labelTextColor,
9233
9865
  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
9866
+ [vars$r.labelFontWeight]: '400',
9867
+ [vars$r.labelLineHeight]: checkboxSize,
9868
+ [vars$r.labelSpacing]: '1em',
9234
9869
  [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
9235
- [vars$r.inputBackgroundColor]: refs.backgroundColor,
9236
- [vars$r.inputValueTextColor]: refs.valueTextColor,
9237
- [vars$r.inputPlaceholderTextColor]: refs.placeholderTextColor,
9870
+ [vars$r.inputOutlineWidth]: refs.outlineWidth,
9871
+ [vars$r.inputOutlineOffset]: refs.outlineOffset,
9872
+ [vars$r.inputOutlineColor]: refs.outlineColor,
9873
+ [vars$r.inputOutlineStyle]: refs.outlineStyle,
9238
9874
  [vars$r.inputBorderRadius]: refs.borderRadius,
9875
+ [vars$r.inputBorderColor]: refs.borderColor,
9239
9876
  [vars$r.inputBorderWidth]: refs.borderWidth,
9240
9877
  [vars$r.inputBorderStyle]: refs.borderStyle,
9241
- [vars$r.inputBorderColor]: refs.borderColor,
9242
- [vars$r.inputOutlineWidth]: refs.outlineWidth,
9243
- [vars$r.inputOutlineStyle]: refs.outlineStyle,
9244
- [vars$r.inputOutlineColor]: refs.outlineColor,
9245
- [vars$r.inputOutlineOffset]: refs.outlineOffset,
9246
- [vars$r.inputResizeType]: 'vertical',
9247
- [vars$r.inputMinHeight]: '5em',
9248
- textAlign: {
9249
- right: { [vars$r.inputTextAlign]: 'right' },
9250
- left: { [vars$r.inputTextAlign]: 'left' },
9251
- center: { [vars$r.inputTextAlign]: 'center' },
9878
+ [vars$r.inputBackgroundColor]: refs.backgroundColor,
9879
+ [vars$r.inputSize]: checkboxSize,
9880
+
9881
+ _checked: {
9882
+ [vars$r.inputValueTextColor]: refs.valueTextColor,
9252
9883
  },
9253
9884
 
9254
- _readonly: {
9255
- [vars$r.inputResizeType]: 'none',
9885
+ _disabled: {
9886
+ [vars$r.labelTextColor]: refs.labelTextColor,
9256
9887
  },
9257
9888
  };
9258
9889
 
9259
- var textArea$1 = /*#__PURE__*/Object.freeze({
9890
+ var checkbox$1 = /*#__PURE__*/Object.freeze({
9260
9891
  __proto__: null,
9261
- default: textArea,
9892
+ default: checkbox,
9262
9893
  vars: vars$r
9263
9894
  });
9264
9895
 
9265
- const vars$q = CheckboxClass.cssVarList;
9266
- const checkboxSize = '1.35em';
9896
+ const knobMargin = '2px';
9897
+ const checkboxHeight = '1.25em';
9267
9898
 
9268
- const checkbox = {
9899
+ const globalRefs$f = getThemeRefs(globals);
9900
+ const vars$q = SwitchToggleClass.cssVarList;
9901
+
9902
+ const switchToggle = {
9269
9903
  [vars$q.hostWidth]: refs.width,
9270
9904
  [vars$q.hostDirection]: refs.direction,
9271
9905
  [vars$q.fontSize]: refs.fontSize,
9272
9906
  [vars$q.fontFamily]: refs.fontFamily,
9273
- [vars$q.labelTextColor]: refs.labelTextColor,
9274
- [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
9275
- [vars$q.labelFontWeight]: '400',
9276
- [vars$q.labelLineHeight]: checkboxSize,
9277
- [vars$q.labelSpacing]: '1em',
9278
- [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
9907
+
9279
9908
  [vars$q.inputOutlineWidth]: refs.outlineWidth,
9280
9909
  [vars$q.inputOutlineOffset]: refs.outlineOffset,
9281
9910
  [vars$q.inputOutlineColor]: refs.outlineColor,
9282
9911
  [vars$q.inputOutlineStyle]: refs.outlineStyle,
9283
- [vars$q.inputBorderRadius]: refs.borderRadius,
9284
- [vars$q.inputBorderColor]: refs.borderColor,
9285
- [vars$q.inputBorderWidth]: refs.borderWidth,
9286
- [vars$q.inputBorderStyle]: refs.borderStyle,
9287
- [vars$q.inputBackgroundColor]: refs.backgroundColor,
9288
- [vars$q.inputSize]: checkboxSize,
9289
-
9290
- _checked: {
9291
- [vars$q.inputValueTextColor]: refs.valueTextColor,
9292
- },
9293
-
9294
- _disabled: {
9295
- [vars$q.labelTextColor]: refs.labelTextColor,
9296
- },
9297
- };
9298
-
9299
- var checkbox$1 = /*#__PURE__*/Object.freeze({
9300
- __proto__: null,
9301
- default: checkbox,
9302
- vars: vars$q
9303
- });
9304
-
9305
- const knobMargin = '2px';
9306
- const checkboxHeight = '1.25em';
9307
9912
 
9308
- const globalRefs$e = getThemeRefs(globals);
9309
- const vars$p = SwitchToggleClass.cssVarList;
9913
+ [vars$q.trackBorderStyle]: refs.borderStyle,
9914
+ [vars$q.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
9915
+ [vars$q.trackBorderColor]: refs.borderColor,
9916
+ [vars$q.trackBackgroundColor]: refs.backgroundColor,
9917
+ [vars$q.trackBorderRadius]: globalRefs$f.radius.md,
9918
+ [vars$q.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
9919
+ [vars$q.trackHeight]: checkboxHeight,
9920
+
9921
+ [vars$q.knobSize]: `calc(1em - ${knobMargin})`,
9922
+ [vars$q.knobRadius]: '50%',
9923
+ [vars$q.knobTopOffset]: '1px',
9924
+ [vars$q.knobLeftOffset]: knobMargin,
9925
+ [vars$q.knobColor]: refs.labelTextColor,
9926
+ [vars$q.knobTransitionDuration]: '0.3s',
9310
9927
 
9311
- const switchToggle = {
9312
- [vars$p.hostWidth]: refs.width,
9313
- [vars$p.hostDirection]: refs.direction,
9314
- [vars$p.fontSize]: refs.fontSize,
9315
- [vars$p.fontFamily]: refs.fontFamily,
9316
-
9317
- [vars$p.inputOutlineWidth]: refs.outlineWidth,
9318
- [vars$p.inputOutlineOffset]: refs.outlineOffset,
9319
- [vars$p.inputOutlineColor]: refs.outlineColor,
9320
- [vars$p.inputOutlineStyle]: refs.outlineStyle,
9321
-
9322
- [vars$p.trackBorderStyle]: refs.borderStyle,
9323
- [vars$p.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
9324
- [vars$p.trackBorderColor]: refs.borderColor,
9325
- [vars$p.trackBackgroundColor]: refs.backgroundColor,
9326
- [vars$p.trackBorderRadius]: globalRefs$e.radius.md,
9327
- [vars$p.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
9328
- [vars$p.trackHeight]: checkboxHeight,
9329
-
9330
- [vars$p.knobSize]: `calc(1em - ${knobMargin})`,
9331
- [vars$p.knobRadius]: '50%',
9332
- [vars$p.knobTopOffset]: '1px',
9333
- [vars$p.knobLeftOffset]: knobMargin,
9334
- [vars$p.knobColor]: refs.labelTextColor,
9335
- [vars$p.knobTransitionDuration]: '0.3s',
9336
-
9337
- [vars$p.labelTextColor]: refs.labelTextColor,
9338
- [vars$p.labelFontWeight]: '400',
9339
- [vars$p.labelLineHeight]: '1.35em',
9340
- [vars$p.labelSpacing]: '1em',
9341
- [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
9342
- [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
9928
+ [vars$q.labelTextColor]: refs.labelTextColor,
9929
+ [vars$q.labelFontWeight]: '400',
9930
+ [vars$q.labelLineHeight]: '1.35em',
9931
+ [vars$q.labelSpacing]: '1em',
9932
+ [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
9933
+ [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
9343
9934
 
9344
9935
  _checked: {
9345
- [vars$p.trackBorderColor]: refs.borderColor,
9346
- [vars$p.knobLeftOffset]: `calc(100% - var(${vars$p.knobSize}) - ${knobMargin})`,
9347
- [vars$p.knobColor]: refs.valueTextColor,
9348
- [vars$p.knobTextColor]: refs.valueTextColor,
9936
+ [vars$q.trackBorderColor]: refs.borderColor,
9937
+ [vars$q.knobLeftOffset]: `calc(100% - var(${vars$q.knobSize}) - ${knobMargin})`,
9938
+ [vars$q.knobColor]: refs.valueTextColor,
9939
+ [vars$q.knobTextColor]: refs.valueTextColor,
9349
9940
  },
9350
9941
 
9351
9942
  _disabled: {
9352
- [vars$p.knobColor]: globalRefs$e.colors.surface.light,
9353
- [vars$p.trackBorderColor]: globalRefs$e.colors.surface.light,
9354
- [vars$p.trackBackgroundColor]: globalRefs$e.colors.surface.main,
9355
- [vars$p.labelTextColor]: refs.labelTextColor,
9943
+ [vars$q.knobColor]: globalRefs$f.colors.surface.light,
9944
+ [vars$q.trackBorderColor]: globalRefs$f.colors.surface.light,
9945
+ [vars$q.trackBackgroundColor]: globalRefs$f.colors.surface.main,
9946
+ [vars$q.labelTextColor]: refs.labelTextColor,
9356
9947
  _checked: {
9357
- [vars$p.knobColor]: globalRefs$e.colors.surface.light,
9358
- [vars$p.trackBackgroundColor]: globalRefs$e.colors.surface.main,
9948
+ [vars$q.knobColor]: globalRefs$f.colors.surface.light,
9949
+ [vars$q.trackBackgroundColor]: globalRefs$f.colors.surface.main,
9359
9950
  },
9360
9951
  },
9361
9952
 
9362
9953
  _invalid: {
9363
- [vars$p.trackBorderColor]: globalRefs$e.colors.error.main,
9364
- [vars$p.knobColor]: globalRefs$e.colors.error.main,
9954
+ [vars$q.trackBorderColor]: globalRefs$f.colors.error.main,
9955
+ [vars$q.knobColor]: globalRefs$f.colors.error.main,
9365
9956
  },
9366
9957
  };
9367
9958
 
9368
9959
  var switchToggle$1 = /*#__PURE__*/Object.freeze({
9369
9960
  __proto__: null,
9370
9961
  default: switchToggle,
9371
- vars: vars$p
9962
+ vars: vars$q
9372
9963
  });
9373
9964
 
9374
- const globalRefs$d = getThemeRefs(globals);
9965
+ const globalRefs$e = getThemeRefs(globals);
9375
9966
 
9376
9967
  const compVars$3 = ContainerClass.cssVarList;
9377
9968
 
@@ -9393,7 +9984,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
9393
9984
  horizontalAlignment,
9394
9985
  shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
9395
9986
  },
9396
- componentName$C
9987
+ componentName$F
9397
9988
  );
9398
9989
 
9399
9990
  const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -9403,10 +9994,10 @@ const container = {
9403
9994
 
9404
9995
  [compVars$3.hostWidth]: '100%',
9405
9996
  [compVars$3.boxShadow]: 'none',
9406
- [compVars$3.backgroundColor]: globalRefs$d.colors.surface.main,
9407
- [compVars$3.color]: globalRefs$d.colors.surface.contrast,
9997
+ [compVars$3.backgroundColor]: globalRefs$e.colors.surface.main,
9998
+ [compVars$3.color]: globalRefs$e.colors.surface.contrast,
9408
9999
  [compVars$3.borderRadius]: '0px',
9409
- [compVars$3.hostDirection]: globalRefs$d.direction,
10000
+ [compVars$3.hostDirection]: globalRefs$e.direction,
9410
10001
 
9411
10002
  verticalPadding: {
9412
10003
  sm: { [compVars$3.verticalPadding]: '5px' },
@@ -9452,34 +10043,34 @@ const container = {
9452
10043
 
9453
10044
  shadow: {
9454
10045
  sm: {
9455
- [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.sm} ${shadowColor$1}`,
10046
+ [compVars$3.boxShadow]: `${globalRefs$e.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$e.shadow.narrow.sm} ${shadowColor$1}`,
9456
10047
  },
9457
10048
  md: {
9458
- [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.md} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.md} ${shadowColor$1}`,
10049
+ [compVars$3.boxShadow]: `${globalRefs$e.shadow.wide.md} ${shadowColor$1}, ${globalRefs$e.shadow.narrow.md} ${shadowColor$1}`,
9459
10050
  },
9460
10051
  lg: {
9461
- [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.lg} ${shadowColor$1}`,
10052
+ [compVars$3.boxShadow]: `${globalRefs$e.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$e.shadow.narrow.lg} ${shadowColor$1}`,
9462
10053
  },
9463
10054
  xl: {
9464
- [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.xl} ${shadowColor$1}`,
10055
+ [compVars$3.boxShadow]: `${globalRefs$e.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$e.shadow.narrow.xl} ${shadowColor$1}`,
9465
10056
  },
9466
10057
  '2xl': {
9467
10058
  [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
9468
- [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide['2xl']} ${shadowColor$1}`,
10059
+ [compVars$3.boxShadow]: `${globalRefs$e.shadow.wide['2xl']} ${shadowColor$1}`,
9469
10060
  },
9470
10061
  },
9471
10062
 
9472
10063
  borderRadius: {
9473
- sm: { [compVars$3.borderRadius]: globalRefs$d.radius.sm },
9474
- md: { [compVars$3.borderRadius]: globalRefs$d.radius.md },
9475
- lg: { [compVars$3.borderRadius]: globalRefs$d.radius.lg },
9476
- xl: { [compVars$3.borderRadius]: globalRefs$d.radius.xl },
9477
- '2xl': { [compVars$3.borderRadius]: globalRefs$d.radius['2xl'] },
9478
- '3xl': { [compVars$3.borderRadius]: globalRefs$d.radius['3xl'] },
10064
+ sm: { [compVars$3.borderRadius]: globalRefs$e.radius.sm },
10065
+ md: { [compVars$3.borderRadius]: globalRefs$e.radius.md },
10066
+ lg: { [compVars$3.borderRadius]: globalRefs$e.radius.lg },
10067
+ xl: { [compVars$3.borderRadius]: globalRefs$e.radius.xl },
10068
+ '2xl': { [compVars$3.borderRadius]: globalRefs$e.radius['2xl'] },
10069
+ '3xl': { [compVars$3.borderRadius]: globalRefs$e.radius['3xl'] },
9479
10070
  },
9480
10071
  };
9481
10072
 
9482
- const vars$o = {
10073
+ const vars$p = {
9483
10074
  ...compVars$3,
9484
10075
  ...helperVars$2,
9485
10076
  };
@@ -9487,166 +10078,166 @@ const vars$o = {
9487
10078
  var container$1 = /*#__PURE__*/Object.freeze({
9488
10079
  __proto__: null,
9489
10080
  default: container,
9490
- vars: vars$o
10081
+ vars: vars$p
9491
10082
  });
9492
10083
 
9493
- const vars$n = LogoClass.cssVarList;
10084
+ const vars$o = LogoClass.cssVarList;
9494
10085
 
9495
10086
  const logo$2 = {
9496
- [vars$n.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
10087
+ [vars$o.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
9497
10088
  };
9498
10089
 
9499
10090
  var logo$3 = /*#__PURE__*/Object.freeze({
9500
10091
  __proto__: null,
9501
10092
  default: logo$2,
9502
- vars: vars$n
10093
+ vars: vars$o
9503
10094
  });
9504
10095
 
9505
- const vars$m = TotpImageClass.cssVarList;
10096
+ const vars$n = TotpImageClass.cssVarList;
9506
10097
 
9507
10098
  const logo$1 = {
9508
- [vars$m.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
10099
+ [vars$n.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
9509
10100
  };
9510
10101
 
9511
10102
  var totpImage = /*#__PURE__*/Object.freeze({
9512
10103
  __proto__: null,
9513
10104
  default: logo$1,
9514
- vars: vars$m
10105
+ vars: vars$n
9515
10106
  });
9516
10107
 
9517
- const vars$l = NotpImageClass.cssVarList;
10108
+ const vars$m = NotpImageClass.cssVarList;
9518
10109
 
9519
10110
  const logo = {
9520
- [vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
10111
+ [vars$m.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
9521
10112
  };
9522
10113
 
9523
10114
  var notpImage = /*#__PURE__*/Object.freeze({
9524
10115
  __proto__: null,
9525
10116
  default: logo,
9526
- vars: vars$l
10117
+ vars: vars$m
9527
10118
  });
9528
10119
 
9529
- const globalRefs$c = getThemeRefs(globals);
9530
- const vars$k = TextClass.cssVarList;
10120
+ const globalRefs$d = getThemeRefs(globals);
10121
+ const vars$l = TextClass.cssVarList;
9531
10122
 
9532
10123
  const text = {
9533
- [vars$k.hostDirection]: globalRefs$c.direction,
9534
- [vars$k.textLineHeight]: '1.35em',
9535
- [vars$k.textAlign]: 'left',
9536
- [vars$k.textColor]: globalRefs$c.colors.surface.dark,
10124
+ [vars$l.hostDirection]: globalRefs$d.direction,
10125
+ [vars$l.textLineHeight]: '1.35em',
10126
+ [vars$l.textAlign]: 'left',
10127
+ [vars$l.textColor]: globalRefs$d.colors.surface.dark,
9537
10128
  variant: {
9538
10129
  h1: {
9539
- [vars$k.fontSize]: globalRefs$c.typography.h1.size,
9540
- [vars$k.fontWeight]: globalRefs$c.typography.h1.weight,
9541
- [vars$k.fontFamily]: globalRefs$c.typography.h1.font,
10130
+ [vars$l.fontSize]: globalRefs$d.typography.h1.size,
10131
+ [vars$l.fontWeight]: globalRefs$d.typography.h1.weight,
10132
+ [vars$l.fontFamily]: globalRefs$d.typography.h1.font,
9542
10133
  },
9543
10134
  h2: {
9544
- [vars$k.fontSize]: globalRefs$c.typography.h2.size,
9545
- [vars$k.fontWeight]: globalRefs$c.typography.h2.weight,
9546
- [vars$k.fontFamily]: globalRefs$c.typography.h2.font,
10135
+ [vars$l.fontSize]: globalRefs$d.typography.h2.size,
10136
+ [vars$l.fontWeight]: globalRefs$d.typography.h2.weight,
10137
+ [vars$l.fontFamily]: globalRefs$d.typography.h2.font,
9547
10138
  },
9548
10139
  h3: {
9549
- [vars$k.fontSize]: globalRefs$c.typography.h3.size,
9550
- [vars$k.fontWeight]: globalRefs$c.typography.h3.weight,
9551
- [vars$k.fontFamily]: globalRefs$c.typography.h3.font,
10140
+ [vars$l.fontSize]: globalRefs$d.typography.h3.size,
10141
+ [vars$l.fontWeight]: globalRefs$d.typography.h3.weight,
10142
+ [vars$l.fontFamily]: globalRefs$d.typography.h3.font,
9552
10143
  },
9553
10144
  subtitle1: {
9554
- [vars$k.fontSize]: globalRefs$c.typography.subtitle1.size,
9555
- [vars$k.fontWeight]: globalRefs$c.typography.subtitle1.weight,
9556
- [vars$k.fontFamily]: globalRefs$c.typography.subtitle1.font,
10145
+ [vars$l.fontSize]: globalRefs$d.typography.subtitle1.size,
10146
+ [vars$l.fontWeight]: globalRefs$d.typography.subtitle1.weight,
10147
+ [vars$l.fontFamily]: globalRefs$d.typography.subtitle1.font,
9557
10148
  },
9558
10149
  subtitle2: {
9559
- [vars$k.fontSize]: globalRefs$c.typography.subtitle2.size,
9560
- [vars$k.fontWeight]: globalRefs$c.typography.subtitle2.weight,
9561
- [vars$k.fontFamily]: globalRefs$c.typography.subtitle2.font,
10150
+ [vars$l.fontSize]: globalRefs$d.typography.subtitle2.size,
10151
+ [vars$l.fontWeight]: globalRefs$d.typography.subtitle2.weight,
10152
+ [vars$l.fontFamily]: globalRefs$d.typography.subtitle2.font,
9562
10153
  },
9563
10154
  body1: {
9564
- [vars$k.fontSize]: globalRefs$c.typography.body1.size,
9565
- [vars$k.fontWeight]: globalRefs$c.typography.body1.weight,
9566
- [vars$k.fontFamily]: globalRefs$c.typography.body1.font,
10155
+ [vars$l.fontSize]: globalRefs$d.typography.body1.size,
10156
+ [vars$l.fontWeight]: globalRefs$d.typography.body1.weight,
10157
+ [vars$l.fontFamily]: globalRefs$d.typography.body1.font,
9567
10158
  },
9568
10159
  body2: {
9569
- [vars$k.fontSize]: globalRefs$c.typography.body2.size,
9570
- [vars$k.fontWeight]: globalRefs$c.typography.body2.weight,
9571
- [vars$k.fontFamily]: globalRefs$c.typography.body2.font,
10160
+ [vars$l.fontSize]: globalRefs$d.typography.body2.size,
10161
+ [vars$l.fontWeight]: globalRefs$d.typography.body2.weight,
10162
+ [vars$l.fontFamily]: globalRefs$d.typography.body2.font,
9572
10163
  },
9573
10164
  },
9574
10165
 
9575
10166
  mode: {
9576
10167
  primary: {
9577
- [vars$k.textColor]: globalRefs$c.colors.surface.contrast,
10168
+ [vars$l.textColor]: globalRefs$d.colors.surface.contrast,
9578
10169
  },
9579
10170
  secondary: {
9580
- [vars$k.textColor]: globalRefs$c.colors.surface.dark,
10171
+ [vars$l.textColor]: globalRefs$d.colors.surface.dark,
9581
10172
  },
9582
10173
  error: {
9583
- [vars$k.textColor]: globalRefs$c.colors.error.main,
10174
+ [vars$l.textColor]: globalRefs$d.colors.error.main,
9584
10175
  },
9585
10176
  success: {
9586
- [vars$k.textColor]: globalRefs$c.colors.success.main,
10177
+ [vars$l.textColor]: globalRefs$d.colors.success.main,
9587
10178
  },
9588
10179
  },
9589
10180
 
9590
10181
  textAlign: {
9591
- right: { [vars$k.textAlign]: 'right' },
9592
- left: { [vars$k.textAlign]: 'left' },
9593
- center: { [vars$k.textAlign]: 'center' },
10182
+ right: { [vars$l.textAlign]: 'right' },
10183
+ left: { [vars$l.textAlign]: 'left' },
10184
+ center: { [vars$l.textAlign]: 'center' },
9594
10185
  },
9595
10186
 
9596
10187
  _fullWidth: {
9597
- [vars$k.hostWidth]: '100%',
10188
+ [vars$l.hostWidth]: '100%',
9598
10189
  },
9599
10190
 
9600
10191
  _italic: {
9601
- [vars$k.fontStyle]: 'italic',
10192
+ [vars$l.fontStyle]: 'italic',
9602
10193
  },
9603
10194
 
9604
10195
  _uppercase: {
9605
- [vars$k.textTransform]: 'uppercase',
10196
+ [vars$l.textTransform]: 'uppercase',
9606
10197
  },
9607
10198
 
9608
10199
  _lowercase: {
9609
- [vars$k.textTransform]: 'lowercase',
10200
+ [vars$l.textTransform]: 'lowercase',
9610
10201
  },
9611
10202
  };
9612
10203
 
9613
10204
  var text$1 = /*#__PURE__*/Object.freeze({
9614
10205
  __proto__: null,
9615
10206
  default: text,
9616
- vars: vars$k
10207
+ vars: vars$l
9617
10208
  });
9618
10209
 
9619
- const globalRefs$b = getThemeRefs(globals);
9620
- const vars$j = LinkClass.cssVarList;
10210
+ const globalRefs$c = getThemeRefs(globals);
10211
+ const vars$k = LinkClass.cssVarList;
9621
10212
 
9622
10213
  const link = {
9623
- [vars$j.hostDirection]: globalRefs$b.direction,
9624
- [vars$j.cursor]: 'pointer',
10214
+ [vars$k.hostDirection]: globalRefs$c.direction,
10215
+ [vars$k.cursor]: 'pointer',
9625
10216
 
9626
- [vars$j.textColor]: globalRefs$b.colors.primary.main,
10217
+ [vars$k.textColor]: globalRefs$c.colors.primary.main,
9627
10218
 
9628
10219
  textAlign: {
9629
- right: { [vars$j.textAlign]: 'right' },
9630
- left: { [vars$j.textAlign]: 'left' },
9631
- center: { [vars$j.textAlign]: 'center' },
10220
+ right: { [vars$k.textAlign]: 'right' },
10221
+ left: { [vars$k.textAlign]: 'left' },
10222
+ center: { [vars$k.textAlign]: 'center' },
9632
10223
  },
9633
10224
 
9634
10225
  _fullWidth: {
9635
- [vars$j.hostWidth]: '100%',
10226
+ [vars$k.hostWidth]: '100%',
9636
10227
  },
9637
10228
 
9638
10229
  mode: {
9639
10230
  primary: {
9640
- [vars$j.textColor]: globalRefs$b.colors.primary.main,
10231
+ [vars$k.textColor]: globalRefs$c.colors.primary.main,
9641
10232
  },
9642
10233
  secondary: {
9643
- [vars$j.textColor]: globalRefs$b.colors.secondary.main,
10234
+ [vars$k.textColor]: globalRefs$c.colors.secondary.main,
9644
10235
  },
9645
10236
  error: {
9646
- [vars$j.textColor]: globalRefs$b.colors.error.main,
10237
+ [vars$k.textColor]: globalRefs$c.colors.error.main,
9647
10238
  },
9648
10239
  success: {
9649
- [vars$j.textColor]: globalRefs$b.colors.success.main,
10240
+ [vars$k.textColor]: globalRefs$c.colors.success.main,
9650
10241
  },
9651
10242
  },
9652
10243
  };
@@ -9654,10 +10245,10 @@ const link = {
9654
10245
  var link$1 = /*#__PURE__*/Object.freeze({
9655
10246
  __proto__: null,
9656
10247
  default: link,
9657
- vars: vars$j
10248
+ vars: vars$k
9658
10249
  });
9659
10250
 
9660
- const globalRefs$a = getThemeRefs(globals);
10251
+ const globalRefs$b = getThemeRefs(globals);
9661
10252
  const compVars$2 = DividerClass.cssVarList;
9662
10253
 
9663
10254
  const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
@@ -9665,18 +10256,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
9665
10256
  thickness: '2px',
9666
10257
  spacing: '10px',
9667
10258
  },
9668
- componentName$A
10259
+ componentName$D
9669
10260
  );
9670
10261
 
9671
10262
  const divider = {
9672
10263
  ...helperTheme$1,
9673
10264
 
9674
- [compVars$2.hostDirection]: globalRefs$a.direction,
10265
+ [compVars$2.hostDirection]: globalRefs$b.direction,
9675
10266
  [compVars$2.alignItems]: 'center',
9676
10267
  [compVars$2.flexDirection]: 'row',
9677
10268
  [compVars$2.alignSelf]: 'stretch',
9678
10269
  [compVars$2.hostWidth]: '100%',
9679
- [compVars$2.stripeColor]: globalRefs$a.colors.surface.light,
10270
+ [compVars$2.stripeColor]: globalRefs$b.colors.surface.light,
9680
10271
  [compVars$2.stripeColorOpacity]: '0.5',
9681
10272
  [compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
9682
10273
  [compVars$2.labelTextWidth]: 'fit-content',
@@ -9696,7 +10287,7 @@ const divider = {
9696
10287
  },
9697
10288
  };
9698
10289
 
9699
- const vars$i = {
10290
+ const vars$j = {
9700
10291
  ...compVars$2,
9701
10292
  ...helperVars$1,
9702
10293
  };
@@ -9704,111 +10295,111 @@ const vars$i = {
9704
10295
  var divider$1 = /*#__PURE__*/Object.freeze({
9705
10296
  __proto__: null,
9706
10297
  default: divider,
9707
- vars: vars$i
10298
+ vars: vars$j
9708
10299
  });
9709
10300
 
9710
- const vars$h = PasscodeClass.cssVarList;
10301
+ const vars$i = PasscodeClass.cssVarList;
9711
10302
 
9712
10303
  const passcode = {
9713
- [vars$h.hostDirection]: refs.direction,
9714
- [vars$h.fontFamily]: refs.fontFamily,
9715
- [vars$h.fontSize]: refs.fontSize,
9716
- [vars$h.labelTextColor]: refs.labelTextColor,
9717
- [vars$h.labelRequiredIndicator]: refs.requiredIndicator,
9718
- [vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
9719
- [vars$h.digitValueTextColor]: refs.valueTextColor,
9720
- [vars$h.digitPadding]: '0',
9721
- [vars$h.digitTextAlign]: 'center',
9722
- [vars$h.digitSpacing]: '4px',
9723
- [vars$h.hostWidth]: refs.width,
9724
- [vars$h.digitOutlineColor]: 'transparent',
9725
- [vars$h.digitOutlineWidth]: refs.outlineWidth,
9726
- [vars$h.focusedDigitFieldOutlineColor]: refs.outlineColor,
9727
- [vars$h.digitSize]: refs.inputHeight,
10304
+ [vars$i.hostDirection]: refs.direction,
10305
+ [vars$i.fontFamily]: refs.fontFamily,
10306
+ [vars$i.fontSize]: refs.fontSize,
10307
+ [vars$i.labelTextColor]: refs.labelTextColor,
10308
+ [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
10309
+ [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
10310
+ [vars$i.digitValueTextColor]: refs.valueTextColor,
10311
+ [vars$i.digitPadding]: '0',
10312
+ [vars$i.digitTextAlign]: 'center',
10313
+ [vars$i.digitSpacing]: '4px',
10314
+ [vars$i.hostWidth]: refs.width,
10315
+ [vars$i.digitOutlineColor]: 'transparent',
10316
+ [vars$i.digitOutlineWidth]: refs.outlineWidth,
10317
+ [vars$i.focusedDigitFieldOutlineColor]: refs.outlineColor,
10318
+ [vars$i.digitSize]: refs.inputHeight,
9728
10319
 
9729
10320
  size: {
9730
- xs: { [vars$h.spinnerSize]: '15px' },
9731
- sm: { [vars$h.spinnerSize]: '20px' },
9732
- md: { [vars$h.spinnerSize]: '20px' },
9733
- lg: { [vars$h.spinnerSize]: '20px' },
10321
+ xs: { [vars$i.spinnerSize]: '15px' },
10322
+ sm: { [vars$i.spinnerSize]: '20px' },
10323
+ md: { [vars$i.spinnerSize]: '20px' },
10324
+ lg: { [vars$i.spinnerSize]: '20px' },
9734
10325
  },
9735
10326
 
9736
10327
  _hideCursor: {
9737
- [vars$h.digitCaretTextColor]: 'transparent',
10328
+ [vars$i.digitCaretTextColor]: 'transparent',
9738
10329
  },
9739
10330
 
9740
10331
  _loading: {
9741
- [vars$h.overlayOpacity]: refs.overlayOpacity,
10332
+ [vars$i.overlayOpacity]: refs.overlayOpacity,
9742
10333
  },
9743
10334
  };
9744
10335
 
9745
10336
  var passcode$1 = /*#__PURE__*/Object.freeze({
9746
10337
  __proto__: null,
9747
10338
  default: passcode,
9748
- vars: vars$h
10339
+ vars: vars$i
9749
10340
  });
9750
10341
 
9751
- const globalRefs$9 = getThemeRefs(globals);
9752
- const vars$g = LoaderLinearClass.cssVarList;
10342
+ const globalRefs$a = getThemeRefs(globals);
10343
+ const vars$h = LoaderLinearClass.cssVarList;
9753
10344
 
9754
10345
  const loaderLinear = {
9755
- [vars$g.hostDisplay]: 'inline-block',
9756
- [vars$g.hostWidth]: '100%',
10346
+ [vars$h.hostDisplay]: 'inline-block',
10347
+ [vars$h.hostWidth]: '100%',
9757
10348
 
9758
- [vars$g.barColor]: globalRefs$9.colors.surface.contrast,
9759
- [vars$g.barWidth]: '20%',
10349
+ [vars$h.barColor]: globalRefs$a.colors.surface.contrast,
10350
+ [vars$h.barWidth]: '20%',
9760
10351
 
9761
- [vars$g.barBackgroundColor]: globalRefs$9.colors.surface.light,
9762
- [vars$g.barBorderRadius]: '4px',
10352
+ [vars$h.barBackgroundColor]: globalRefs$a.colors.surface.light,
10353
+ [vars$h.barBorderRadius]: '4px',
9763
10354
 
9764
- [vars$g.animationDuration]: '2s',
9765
- [vars$g.animationTimingFunction]: 'linear',
9766
- [vars$g.animationIterationCount]: 'infinite',
9767
- [vars$g.verticalPadding]: '0.25em',
10355
+ [vars$h.animationDuration]: '2s',
10356
+ [vars$h.animationTimingFunction]: 'linear',
10357
+ [vars$h.animationIterationCount]: 'infinite',
10358
+ [vars$h.verticalPadding]: '0.25em',
9768
10359
 
9769
10360
  size: {
9770
- xs: { [vars$g.barHeight]: '2px' },
9771
- sm: { [vars$g.barHeight]: '4px' },
9772
- md: { [vars$g.barHeight]: '6px' },
9773
- lg: { [vars$g.barHeight]: '8px' },
10361
+ xs: { [vars$h.barHeight]: '2px' },
10362
+ sm: { [vars$h.barHeight]: '4px' },
10363
+ md: { [vars$h.barHeight]: '6px' },
10364
+ lg: { [vars$h.barHeight]: '8px' },
9774
10365
  },
9775
10366
 
9776
10367
  mode: {
9777
10368
  primary: {
9778
- [vars$g.barColor]: globalRefs$9.colors.primary.main,
10369
+ [vars$h.barColor]: globalRefs$a.colors.primary.main,
9779
10370
  },
9780
10371
  secondary: {
9781
- [vars$g.barColor]: globalRefs$9.colors.secondary.main,
10372
+ [vars$h.barColor]: globalRefs$a.colors.secondary.main,
9782
10373
  },
9783
10374
  },
9784
10375
 
9785
10376
  _hidden: {
9786
- [vars$g.hostDisplay]: 'none',
10377
+ [vars$h.hostDisplay]: 'none',
9787
10378
  },
9788
10379
  };
9789
10380
 
9790
10381
  var loaderLinear$1 = /*#__PURE__*/Object.freeze({
9791
10382
  __proto__: null,
9792
10383
  default: loaderLinear,
9793
- vars: vars$g
10384
+ vars: vars$h
9794
10385
  });
9795
10386
 
9796
- const globalRefs$8 = getThemeRefs(globals);
10387
+ const globalRefs$9 = getThemeRefs(globals);
9797
10388
  const compVars$1 = LoaderRadialClass.cssVarList;
9798
10389
 
9799
10390
  const [helperTheme, helperRefs, helperVars] = createHelperVars(
9800
10391
  {
9801
- spinnerColor: globalRefs$8.colors.surface.contrast,
10392
+ spinnerColor: globalRefs$9.colors.surface.contrast,
9802
10393
  mode: {
9803
10394
  primary: {
9804
- spinnerColor: globalRefs$8.colors.primary.main,
10395
+ spinnerColor: globalRefs$9.colors.primary.main,
9805
10396
  },
9806
10397
  secondary: {
9807
- spinnerColor: globalRefs$8.colors.secondary.main,
10398
+ spinnerColor: globalRefs$9.colors.secondary.main,
9808
10399
  },
9809
10400
  },
9810
10401
  },
9811
- componentName$D
10402
+ componentName$G
9812
10403
  );
9813
10404
 
9814
10405
  const loaderRadial = {
@@ -9837,7 +10428,7 @@ const loaderRadial = {
9837
10428
  [compVars$1.hostDisplay]: 'none',
9838
10429
  },
9839
10430
  };
9840
- const vars$f = {
10431
+ const vars$g = {
9841
10432
  ...compVars$1,
9842
10433
  ...helperVars,
9843
10434
  };
@@ -9845,78 +10436,114 @@ const vars$f = {
9845
10436
  var loaderRadial$1 = /*#__PURE__*/Object.freeze({
9846
10437
  __proto__: null,
9847
10438
  default: loaderRadial,
9848
- vars: vars$f
10439
+ vars: vars$g
9849
10440
  });
9850
10441
 
9851
- const globalRefs$7 = getThemeRefs(globals);
9852
- const vars$e = ComboBoxClass.cssVarList;
10442
+ const globalRefs$8 = getThemeRefs(globals);
10443
+ const vars$f = ComboBoxClass.cssVarList;
9853
10444
 
9854
10445
  const comboBox = {
9855
- [vars$e.hostWidth]: refs.width,
9856
- [vars$e.hostDirection]: refs.direction,
9857
- [vars$e.fontSize]: refs.fontSize,
9858
- [vars$e.fontFamily]: refs.fontFamily,
9859
- [vars$e.labelTextColor]: refs.labelTextColor,
9860
- [vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
9861
- [vars$e.inputBorderColor]: refs.borderColor,
9862
- [vars$e.inputBorderWidth]: refs.borderWidth,
9863
- [vars$e.inputBorderStyle]: refs.borderStyle,
9864
- [vars$e.inputBorderRadius]: refs.borderRadius,
9865
- [vars$e.inputOutlineColor]: refs.outlineColor,
9866
- [vars$e.inputOutlineOffset]: refs.outlineOffset,
9867
- [vars$e.inputOutlineWidth]: refs.outlineWidth,
9868
- [vars$e.inputOutlineStyle]: refs.outlineStyle,
9869
- [vars$e.labelRequiredIndicator]: refs.requiredIndicator,
9870
- [vars$e.inputValueTextColor]: refs.valueTextColor,
9871
- [vars$e.inputPlaceholderTextColor]: refs.placeholderTextColor,
9872
- [vars$e.inputBackgroundColor]: refs.backgroundColor,
9873
- [vars$e.inputHorizontalPadding]: refs.horizontalPadding,
9874
- [vars$e.inputHeight]: refs.inputHeight,
9875
- [vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.dark,
9876
- [vars$e.inputDropdownButtonCursor]: 'pointer',
9877
- [vars$e.inputDropdownButtonSize]: refs.toggleButtonSize,
9878
- [vars$e.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
9879
- [vars$e.overlayItemPaddingInlineStart]: globalRefs$7.spacing.xs,
9880
- [vars$e.overlayItemPaddingInlineEnd]: globalRefs$7.spacing.lg,
10446
+ [vars$f.hostWidth]: refs.width,
10447
+ [vars$f.hostDirection]: refs.direction,
10448
+ [vars$f.fontSize]: refs.fontSize,
10449
+ [vars$f.fontFamily]: refs.fontFamily,
10450
+ [vars$f.labelTextColor]: refs.labelTextColor,
10451
+ [vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
10452
+ [vars$f.inputBorderColor]: refs.borderColor,
10453
+ [vars$f.inputBorderWidth]: refs.borderWidth,
10454
+ [vars$f.inputBorderStyle]: refs.borderStyle,
10455
+ [vars$f.inputBorderRadius]: refs.borderRadius,
10456
+ [vars$f.inputOutlineColor]: refs.outlineColor,
10457
+ [vars$f.inputOutlineOffset]: refs.outlineOffset,
10458
+ [vars$f.inputOutlineWidth]: refs.outlineWidth,
10459
+ [vars$f.inputOutlineStyle]: refs.outlineStyle,
10460
+ [vars$f.labelRequiredIndicator]: refs.requiredIndicator,
10461
+ [vars$f.inputValueTextColor]: refs.valueTextColor,
10462
+ [vars$f.inputPlaceholderTextColor]: refs.placeholderTextColor,
10463
+ [vars$f.inputBackgroundColor]: refs.backgroundColor,
10464
+ [vars$f.inputHorizontalPadding]: refs.horizontalPadding,
10465
+ [vars$f.inputHeight]: refs.inputHeight,
10466
+ [vars$f.inputDropdownButtonColor]: globalRefs$8.colors.surface.dark,
10467
+ [vars$f.inputDropdownButtonCursor]: 'pointer',
10468
+ [vars$f.inputDropdownButtonSize]: refs.toggleButtonSize,
10469
+ [vars$f.inputDropdownButtonOffset]: globalRefs$8.spacing.xs,
10470
+ [vars$f.overlayItemPaddingInlineStart]: globalRefs$8.spacing.xs,
10471
+ [vars$f.overlayItemPaddingInlineEnd]: globalRefs$8.spacing.lg,
9881
10472
 
9882
10473
  _readonly: {
9883
- [vars$e.inputDropdownButtonCursor]: 'default',
10474
+ [vars$f.inputDropdownButtonCursor]: 'default',
9884
10475
  },
9885
10476
 
9886
10477
  // Overlay theme exposed via the component:
9887
- [vars$e.overlayFontSize]: refs.fontSize,
9888
- [vars$e.overlayFontFamily]: refs.fontFamily,
9889
- [vars$e.overlayCursor]: 'pointer',
9890
- [vars$e.overlayItemBoxShadow]: 'none',
9891
- [vars$e.overlayBackground]: refs.backgroundColor,
9892
- [vars$e.overlayTextColor]: refs.valueTextColor,
10478
+ [vars$f.overlayFontSize]: refs.fontSize,
10479
+ [vars$f.overlayFontFamily]: refs.fontFamily,
10480
+ [vars$f.overlayCursor]: 'pointer',
10481
+ [vars$f.overlayItemBoxShadow]: 'none',
10482
+ [vars$f.overlayBackground]: refs.backgroundColor,
10483
+ [vars$f.overlayTextColor]: refs.valueTextColor,
9893
10484
 
9894
10485
  // Overlay direct theme:
9895
- [vars$e.overlay.minHeight]: '400px',
9896
- [vars$e.overlay.margin]: '0',
10486
+ [vars$f.overlay.minHeight]: '400px',
10487
+ [vars$f.overlay.margin]: '0',
9897
10488
  };
9898
10489
 
9899
10490
  var comboBox$1 = /*#__PURE__*/Object.freeze({
9900
10491
  __proto__: null,
9901
10492
  comboBox: comboBox,
9902
10493
  default: comboBox,
9903
- vars: vars$e
10494
+ vars: vars$f
9904
10495
  });
9905
10496
 
9906
- const vars$d = ImageClass.cssVarList;
10497
+ const vars$e = ImageClass.cssVarList;
9907
10498
 
9908
10499
  const image = {};
9909
10500
 
9910
10501
  var image$1 = /*#__PURE__*/Object.freeze({
9911
10502
  __proto__: null,
9912
10503
  default: image,
9913
- vars: vars$d
10504
+ vars: vars$e
9914
10505
  });
9915
10506
 
9916
- const vars$c = PhoneFieldClass.cssVarList;
10507
+ const vars$d = PhoneFieldClass.cssVarList;
9917
10508
 
9918
10509
  const phoneField = {
9919
- [vars$c.hostWidth]: refs.width,
10510
+ [vars$d.hostWidth]: refs.width,
10511
+ [vars$d.hostDirection]: refs.direction,
10512
+ [vars$d.fontSize]: refs.fontSize,
10513
+ [vars$d.fontFamily]: refs.fontFamily,
10514
+ [vars$d.labelTextColor]: refs.labelTextColor,
10515
+ [vars$d.labelRequiredIndicator]: refs.requiredIndicator,
10516
+ [vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
10517
+ [vars$d.inputValueTextColor]: refs.valueTextColor,
10518
+ [vars$d.inputPlaceholderTextColor]: refs.placeholderTextColor,
10519
+ [vars$d.inputBorderStyle]: refs.borderStyle,
10520
+ [vars$d.inputBorderWidth]: refs.borderWidth,
10521
+ [vars$d.inputBorderColor]: refs.borderColor,
10522
+ [vars$d.inputBorderRadius]: refs.borderRadius,
10523
+ [vars$d.inputOutlineStyle]: refs.outlineStyle,
10524
+ [vars$d.inputOutlineWidth]: refs.outlineWidth,
10525
+ [vars$d.inputOutlineColor]: refs.outlineColor,
10526
+ [vars$d.inputOutlineOffset]: refs.outlineOffset,
10527
+ [vars$d.phoneInputWidth]: refs.minWidth,
10528
+ [vars$d.countryCodeInputWidth]: '5em',
10529
+ [vars$d.countryCodeDropdownWidth]: '20em',
10530
+
10531
+ // '@overlay': {
10532
+ // overlayItemBackgroundColor: 'red'
10533
+ // }
10534
+ };
10535
+
10536
+ var phoneField$1 = /*#__PURE__*/Object.freeze({
10537
+ __proto__: null,
10538
+ default: phoneField,
10539
+ vars: vars$d
10540
+ });
10541
+
10542
+ const vars$c = PhoneFieldInputBoxClass.cssVarList;
10543
+
10544
+ const phoneInputBoxField = {
10545
+ [vars$c.hostWidth]: '16em',
10546
+ [vars$c.hostMinWidth]: refs.minWidth,
9920
10547
  [vars$c.hostDirection]: refs.direction,
9921
10548
  [vars$c.fontSize]: refs.fontSize,
9922
10549
  [vars$c.fontFamily]: refs.fontFamily,
@@ -9933,180 +10560,144 @@ const phoneField = {
9933
10560
  [vars$c.inputOutlineWidth]: refs.outlineWidth,
9934
10561
  [vars$c.inputOutlineColor]: refs.outlineColor,
9935
10562
  [vars$c.inputOutlineOffset]: refs.outlineOffset,
9936
- [vars$c.phoneInputWidth]: refs.minWidth,
9937
- [vars$c.countryCodeInputWidth]: '5em',
9938
- [vars$c.countryCodeDropdownWidth]: '20em',
9939
-
9940
- // '@overlay': {
9941
- // overlayItemBackgroundColor: 'red'
9942
- // }
10563
+ _fullWidth: {
10564
+ [vars$c.hostWidth]: refs.width,
10565
+ },
9943
10566
  };
9944
10567
 
9945
- var phoneField$1 = /*#__PURE__*/Object.freeze({
10568
+ var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
9946
10569
  __proto__: null,
9947
- default: phoneField,
10570
+ default: phoneInputBoxField,
9948
10571
  vars: vars$c
9949
10572
  });
9950
10573
 
9951
- const vars$b = PhoneFieldInputBoxClass.cssVarList;
10574
+ const vars$b = NewPasswordClass.cssVarList;
9952
10575
 
9953
- const phoneInputBoxField = {
9954
- [vars$b.hostWidth]: '16em',
10576
+ const newPassword = {
10577
+ [vars$b.hostWidth]: refs.width,
9955
10578
  [vars$b.hostMinWidth]: refs.minWidth,
9956
10579
  [vars$b.hostDirection]: refs.direction,
9957
10580
  [vars$b.fontSize]: refs.fontSize,
9958
10581
  [vars$b.fontFamily]: refs.fontFamily,
9959
- [vars$b.labelTextColor]: refs.labelTextColor,
9960
- [vars$b.labelRequiredIndicator]: refs.requiredIndicator,
10582
+ [vars$b.spaceBetweenInputs]: '1em',
9961
10583
  [vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
9962
- [vars$b.inputValueTextColor]: refs.valueTextColor,
9963
- [vars$b.inputPlaceholderTextColor]: refs.placeholderTextColor,
9964
- [vars$b.inputBorderStyle]: refs.borderStyle,
9965
- [vars$b.inputBorderWidth]: refs.borderWidth,
9966
- [vars$b.inputBorderColor]: refs.borderColor,
9967
- [vars$b.inputBorderRadius]: refs.borderRadius,
9968
- [vars$b.inputOutlineStyle]: refs.outlineStyle,
9969
- [vars$b.inputOutlineWidth]: refs.outlineWidth,
9970
- [vars$b.inputOutlineColor]: refs.outlineColor,
9971
- [vars$b.inputOutlineOffset]: refs.outlineOffset,
9972
- _fullWidth: {
9973
- [vars$b.hostWidth]: refs.width,
9974
- },
9975
- };
9976
-
9977
- var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
9978
- __proto__: null,
9979
- default: phoneInputBoxField,
9980
- vars: vars$b
9981
- });
9982
-
9983
- const vars$a = NewPasswordClass.cssVarList;
9984
-
9985
- const newPassword = {
9986
- [vars$a.hostWidth]: refs.width,
9987
- [vars$a.hostMinWidth]: refs.minWidth,
9988
- [vars$a.hostDirection]: refs.direction,
9989
- [vars$a.fontSize]: refs.fontSize,
9990
- [vars$a.fontFamily]: refs.fontFamily,
9991
- [vars$a.spaceBetweenInputs]: '1em',
9992
- [vars$a.errorMessageTextColor]: refs.errorMessageTextColor,
9993
10584
 
9994
10585
  _required: {
9995
10586
  // NewPassword doesn't pass `required` attribute to its Password components.
9996
10587
  // That's why we fake the required indicator on each input.
9997
10588
  // We do that by injecting `::after` element, and populating it with requiredIndicator content.
9998
- [vars$a.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
10589
+ [vars$b.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
9999
10590
  },
10000
10591
  };
10001
10592
 
10002
10593
  var newPassword$1 = /*#__PURE__*/Object.freeze({
10003
10594
  __proto__: null,
10004
10595
  default: newPassword,
10005
- vars: vars$a
10596
+ vars: vars$b
10006
10597
  });
10007
10598
 
10008
- const vars$9 = UploadFileClass.cssVarList;
10599
+ const vars$a = UploadFileClass.cssVarList;
10009
10600
 
10010
10601
  const uploadFile = {
10011
- [vars$9.hostDirection]: refs.direction,
10012
- [vars$9.labelTextColor]: refs.labelTextColor,
10013
- [vars$9.fontFamily]: refs.fontFamily,
10602
+ [vars$a.hostDirection]: refs.direction,
10603
+ [vars$a.labelTextColor]: refs.labelTextColor,
10604
+ [vars$a.fontFamily]: refs.fontFamily,
10014
10605
 
10015
- [vars$9.iconSize]: '2em',
10606
+ [vars$a.iconSize]: '2em',
10016
10607
 
10017
- [vars$9.hostPadding]: '0.75em',
10018
- [vars$9.gap]: '0.5em',
10608
+ [vars$a.hostPadding]: '0.75em',
10609
+ [vars$a.gap]: '0.5em',
10019
10610
 
10020
- [vars$9.fontSize]: '16px',
10021
- [vars$9.titleFontWeight]: '500',
10022
- [vars$9.lineHeight]: '1em',
10611
+ [vars$a.fontSize]: '16px',
10612
+ [vars$a.titleFontWeight]: '500',
10613
+ [vars$a.lineHeight]: '1em',
10023
10614
 
10024
- [vars$9.borderWidth]: refs.borderWidth,
10025
- [vars$9.borderColor]: refs.borderColor,
10026
- [vars$9.borderRadius]: refs.borderRadius,
10027
- [vars$9.borderStyle]: 'dashed',
10615
+ [vars$a.borderWidth]: refs.borderWidth,
10616
+ [vars$a.borderColor]: refs.borderColor,
10617
+ [vars$a.borderRadius]: refs.borderRadius,
10618
+ [vars$a.borderStyle]: 'dashed',
10028
10619
 
10029
10620
  _required: {
10030
- [vars$9.requiredIndicator]: refs.requiredIndicator,
10621
+ [vars$a.requiredIndicator]: refs.requiredIndicator,
10031
10622
  },
10032
10623
 
10033
10624
  size: {
10034
10625
  xs: {
10035
- [vars$9.hostHeight]: '196px',
10036
- [vars$9.hostWidth]: '200px',
10037
- [vars$9.titleFontSize]: '0.875em',
10038
- [vars$9.descriptionFontSize]: '0.875em',
10039
- [vars$9.lineHeight]: '1.25em',
10626
+ [vars$a.hostHeight]: '196px',
10627
+ [vars$a.hostWidth]: '200px',
10628
+ [vars$a.titleFontSize]: '0.875em',
10629
+ [vars$a.descriptionFontSize]: '0.875em',
10630
+ [vars$a.lineHeight]: '1.25em',
10040
10631
  },
10041
10632
  sm: {
10042
- [vars$9.hostHeight]: '216px',
10043
- [vars$9.hostWidth]: '230px',
10044
- [vars$9.titleFontSize]: '1em',
10045
- [vars$9.descriptionFontSize]: '0.875em',
10046
- [vars$9.lineHeight]: '1.25em',
10633
+ [vars$a.hostHeight]: '216px',
10634
+ [vars$a.hostWidth]: '230px',
10635
+ [vars$a.titleFontSize]: '1em',
10636
+ [vars$a.descriptionFontSize]: '0.875em',
10637
+ [vars$a.lineHeight]: '1.25em',
10047
10638
  },
10048
10639
  md: {
10049
- [vars$9.hostHeight]: '256px',
10050
- [vars$9.hostWidth]: '312px',
10051
- [vars$9.titleFontSize]: '1.125em',
10052
- [vars$9.descriptionFontSize]: '1em',
10053
- [vars$9.lineHeight]: '1.5em',
10640
+ [vars$a.hostHeight]: '256px',
10641
+ [vars$a.hostWidth]: '312px',
10642
+ [vars$a.titleFontSize]: '1.125em',
10643
+ [vars$a.descriptionFontSize]: '1em',
10644
+ [vars$a.lineHeight]: '1.5em',
10054
10645
  },
10055
10646
  lg: {
10056
- [vars$9.hostHeight]: '280px',
10057
- [vars$9.hostWidth]: '336px',
10058
- [vars$9.titleFontSize]: '1.125em',
10059
- [vars$9.descriptionFontSize]: '1.125em',
10060
- [vars$9.lineHeight]: '1.75em',
10647
+ [vars$a.hostHeight]: '280px',
10648
+ [vars$a.hostWidth]: '336px',
10649
+ [vars$a.titleFontSize]: '1.125em',
10650
+ [vars$a.descriptionFontSize]: '1.125em',
10651
+ [vars$a.lineHeight]: '1.75em',
10061
10652
  },
10062
10653
  },
10063
10654
 
10064
10655
  _fullWidth: {
10065
- [vars$9.hostWidth]: refs.width,
10656
+ [vars$a.hostWidth]: refs.width,
10066
10657
  },
10067
10658
  };
10068
10659
 
10069
10660
  var uploadFile$1 = /*#__PURE__*/Object.freeze({
10070
10661
  __proto__: null,
10071
10662
  default: uploadFile,
10072
- vars: vars$9
10663
+ vars: vars$a
10073
10664
  });
10074
10665
 
10075
- const globalRefs$6 = getThemeRefs(globals);
10666
+ const globalRefs$7 = getThemeRefs(globals);
10076
10667
 
10077
- const vars$8 = ButtonSelectionGroupItemClass.cssVarList;
10668
+ const vars$9 = ButtonSelectionGroupItemClass.cssVarList;
10078
10669
 
10079
10670
  const buttonSelectionGroupItem = {
10080
- [vars$8.hostDirection]: 'inherit',
10081
- [vars$8.backgroundColor]: globalRefs$6.colors.surface.main,
10082
- [vars$8.labelTextColor]: globalRefs$6.colors.surface.contrast,
10083
- [vars$8.borderColor]: globalRefs$6.colors.surface.light,
10084
- [vars$8.borderStyle]: 'solid',
10085
- [vars$8.borderRadius]: globalRefs$6.radius.sm,
10086
- [vars$8.outlineColor]: 'transparent',
10671
+ [vars$9.hostDirection]: 'inherit',
10672
+ [vars$9.backgroundColor]: globalRefs$7.colors.surface.main,
10673
+ [vars$9.labelTextColor]: globalRefs$7.colors.surface.contrast,
10674
+ [vars$9.borderColor]: globalRefs$7.colors.surface.light,
10675
+ [vars$9.borderStyle]: 'solid',
10676
+ [vars$9.borderRadius]: globalRefs$7.radius.sm,
10677
+ [vars$9.outlineColor]: 'transparent',
10087
10678
 
10088
10679
  _hover: {
10089
- [vars$8.backgroundColor]: globalRefs$6.colors.surface.highlight,
10680
+ [vars$9.backgroundColor]: globalRefs$7.colors.surface.highlight,
10090
10681
  },
10091
10682
 
10092
10683
  _focused: {
10093
- [vars$8.outlineColor]: globalRefs$6.colors.surface.light,
10684
+ [vars$9.outlineColor]: globalRefs$7.colors.surface.light,
10094
10685
  },
10095
10686
 
10096
10687
  _selected: {
10097
- [vars$8.borderColor]: globalRefs$6.colors.surface.contrast,
10098
- [vars$8.backgroundColor]: globalRefs$6.colors.surface.contrast,
10099
- [vars$8.labelTextColor]: globalRefs$6.colors.surface.main,
10688
+ [vars$9.borderColor]: globalRefs$7.colors.surface.contrast,
10689
+ [vars$9.backgroundColor]: globalRefs$7.colors.surface.contrast,
10690
+ [vars$9.labelTextColor]: globalRefs$7.colors.surface.main,
10100
10691
  },
10101
10692
  };
10102
10693
 
10103
10694
  var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
10104
10695
  __proto__: null,
10105
10696
  default: buttonSelectionGroupItem,
10106
- vars: vars$8
10697
+ vars: vars$9
10107
10698
  });
10108
10699
 
10109
- const globalRefs$5 = getThemeRefs(globals);
10700
+ const globalRefs$6 = getThemeRefs(globals);
10110
10701
 
10111
10702
  const createBaseButtonSelectionGroupMappings = (vars) => ({
10112
10703
  [vars.hostDirection]: refs.direction,
@@ -10114,84 +10705,84 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
10114
10705
  [vars.labelTextColor]: refs.labelTextColor,
10115
10706
  [vars.labelRequiredIndicator]: refs.requiredIndicator,
10116
10707
  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
10117
- [vars.itemsSpacing]: globalRefs$5.spacing.sm,
10708
+ [vars.itemsSpacing]: globalRefs$6.spacing.sm,
10118
10709
  [vars.hostWidth]: refs.width,
10119
10710
  });
10120
10711
 
10121
- const vars$7 = ButtonSelectionGroupClass.cssVarList;
10712
+ const vars$8 = ButtonSelectionGroupClass.cssVarList;
10122
10713
 
10123
10714
  const buttonSelectionGroup = {
10124
- ...createBaseButtonSelectionGroupMappings(vars$7),
10715
+ ...createBaseButtonSelectionGroupMappings(vars$8),
10125
10716
  };
10126
10717
 
10127
10718
  var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
10128
10719
  __proto__: null,
10129
10720
  default: buttonSelectionGroup,
10130
- vars: vars$7
10721
+ vars: vars$8
10131
10722
  });
10132
10723
 
10133
- const vars$6 = ButtonMultiSelectionGroupClass.cssVarList;
10724
+ const vars$7 = ButtonMultiSelectionGroupClass.cssVarList;
10134
10725
 
10135
10726
  const buttonMultiSelectionGroup = {
10136
- ...createBaseButtonSelectionGroupMappings(vars$6),
10727
+ ...createBaseButtonSelectionGroupMappings(vars$7),
10137
10728
  };
10138
10729
 
10139
10730
  var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
10140
10731
  __proto__: null,
10141
10732
  default: buttonMultiSelectionGroup,
10142
- vars: vars$6
10733
+ vars: vars$7
10143
10734
  });
10144
10735
 
10145
- const globalRefs$4 = getThemeRefs(globals);
10736
+ const globalRefs$5 = getThemeRefs(globals);
10146
10737
 
10147
10738
  const compVars = ModalClass.cssVarList;
10148
10739
 
10149
10740
  const modal = {
10150
- [compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.main,
10151
- [compVars.overlayShadow]: globalRefs$4.shadow.wide['2xl'],
10741
+ [compVars.overlayBackgroundColor]: globalRefs$5.colors.surface.main,
10742
+ [compVars.overlayShadow]: globalRefs$5.shadow.wide['2xl'],
10152
10743
  [compVars.overlayWidth]: '540px',
10153
10744
  };
10154
10745
 
10155
- const vars$5 = {
10746
+ const vars$6 = {
10156
10747
  ...compVars,
10157
10748
  };
10158
10749
 
10159
10750
  var modal$1 = /*#__PURE__*/Object.freeze({
10160
10751
  __proto__: null,
10161
10752
  default: modal,
10162
- vars: vars$5
10753
+ vars: vars$6
10163
10754
  });
10164
10755
 
10165
- const globalRefs$3 = getThemeRefs(globals);
10166
- const vars$4 = GridClass.cssVarList;
10756
+ const globalRefs$4 = getThemeRefs(globals);
10757
+ const vars$5 = GridClass.cssVarList;
10167
10758
 
10168
10759
  const grid = {
10169
- [vars$4.hostWidth]: '100%',
10170
- [vars$4.hostHeight]: '100%',
10171
- [vars$4.hostMinHeight]: '400px',
10172
- [vars$4.fontWeight]: '400',
10173
- [vars$4.backgroundColor]: globalRefs$3.colors.surface.main,
10760
+ [vars$5.hostWidth]: '100%',
10761
+ [vars$5.hostHeight]: '100%',
10762
+ [vars$5.hostMinHeight]: '400px',
10763
+ [vars$5.fontWeight]: '400',
10764
+ [vars$5.backgroundColor]: globalRefs$4.colors.surface.main,
10174
10765
 
10175
- [vars$4.fontSize]: refs.fontSize,
10176
- [vars$4.fontFamily]: refs.fontFamily,
10766
+ [vars$5.fontSize]: refs.fontSize,
10767
+ [vars$5.fontFamily]: refs.fontFamily,
10177
10768
 
10178
- [vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.light,
10179
- [vars$4.activeSortIndicator]: globalRefs$3.colors.surface.dark,
10180
- [vars$4.resizeHandleColor]: globalRefs$3.colors.surface.light,
10769
+ [vars$5.sortIndicatorsColor]: globalRefs$4.colors.surface.light,
10770
+ [vars$5.activeSortIndicator]: globalRefs$4.colors.surface.dark,
10771
+ [vars$5.resizeHandleColor]: globalRefs$4.colors.surface.light,
10181
10772
 
10182
- [vars$4.borderWidth]: refs.borderWidth,
10183
- [vars$4.borderStyle]: refs.borderStyle,
10184
- [vars$4.borderRadius]: refs.borderRadius,
10185
- [vars$4.borderColor]: 'transparent',
10773
+ [vars$5.borderWidth]: refs.borderWidth,
10774
+ [vars$5.borderStyle]: refs.borderStyle,
10775
+ [vars$5.borderRadius]: refs.borderRadius,
10776
+ [vars$5.borderColor]: 'transparent',
10186
10777
 
10187
- [vars$4.headerRowTextColor]: globalRefs$3.colors.surface.dark,
10188
- [vars$4.separatorColor]: globalRefs$3.colors.surface.light,
10778
+ [vars$5.headerRowTextColor]: globalRefs$4.colors.surface.dark,
10779
+ [vars$5.separatorColor]: globalRefs$4.colors.surface.light,
10189
10780
 
10190
- [vars$4.valueTextColor]: globalRefs$3.colors.surface.contrast,
10191
- [vars$4.selectedBackgroundColor]: globalRefs$3.colors.surface.highlight,
10781
+ [vars$5.valueTextColor]: globalRefs$4.colors.surface.contrast,
10782
+ [vars$5.selectedBackgroundColor]: globalRefs$4.colors.surface.highlight,
10192
10783
 
10193
10784
  _bordered: {
10194
- [vars$4.borderColor]: refs.borderColor,
10785
+ [vars$5.borderColor]: refs.borderColor,
10195
10786
  },
10196
10787
  };
10197
10788
 
@@ -10199,53 +10790,53 @@ var grid$1 = /*#__PURE__*/Object.freeze({
10199
10790
  __proto__: null,
10200
10791
  default: grid,
10201
10792
  grid: grid,
10202
- vars: vars$4
10793
+ vars: vars$5
10203
10794
  });
10204
10795
 
10205
- const globalRefs$2 = getThemeRefs(globals);
10206
- const vars$3 = NotificationCardClass.cssVarList;
10796
+ const globalRefs$3 = getThemeRefs(globals);
10797
+ const vars$4 = NotificationCardClass.cssVarList;
10207
10798
 
10208
10799
  const shadowColor = '#00000020';
10209
10800
 
10210
10801
  const notification = {
10211
- [vars$3.hostMinWidth]: '415px',
10212
- [vars$3.fontFamily]: globalRefs$2.fonts.font1.family,
10213
- [vars$3.fontSize]: globalRefs$2.typography.body1.size,
10214
- [vars$3.backgroundColor]: globalRefs$2.colors.surface.main,
10215
- [vars$3.textColor]: globalRefs$2.colors.surface.contrast,
10216
- [vars$3.boxShadow]: `${globalRefs$2.shadow.wide.xl} ${shadowColor}, ${globalRefs$2.shadow.narrow.xl} ${shadowColor}`,
10217
- [vars$3.verticalPadding]: '0.625em',
10218
- [vars$3.horizontalPadding]: '1.5em',
10219
- [vars$3.borderRadius]: globalRefs$2.radius.xs,
10802
+ [vars$4.hostMinWidth]: '415px',
10803
+ [vars$4.fontFamily]: globalRefs$3.fonts.font1.family,
10804
+ [vars$4.fontSize]: globalRefs$3.typography.body1.size,
10805
+ [vars$4.backgroundColor]: globalRefs$3.colors.surface.main,
10806
+ [vars$4.textColor]: globalRefs$3.colors.surface.contrast,
10807
+ [vars$4.boxShadow]: `${globalRefs$3.shadow.wide.xl} ${shadowColor}, ${globalRefs$3.shadow.narrow.xl} ${shadowColor}`,
10808
+ [vars$4.verticalPadding]: '0.625em',
10809
+ [vars$4.horizontalPadding]: '1.5em',
10810
+ [vars$4.borderRadius]: globalRefs$3.radius.xs,
10220
10811
 
10221
10812
  _bordered: {
10222
- [vars$3.borderWidth]: globalRefs$2.border.sm,
10223
- [vars$3.borderStyle]: 'solid',
10224
- [vars$3.borderColor]: 'transparent',
10813
+ [vars$4.borderWidth]: globalRefs$3.border.sm,
10814
+ [vars$4.borderStyle]: 'solid',
10815
+ [vars$4.borderColor]: 'transparent',
10225
10816
  },
10226
10817
 
10227
10818
  size: {
10228
- xs: { [vars$3.fontSize]: '12px' },
10229
- sm: { [vars$3.fontSize]: '14px' },
10230
- md: { [vars$3.fontSize]: '16px' },
10231
- lg: { [vars$3.fontSize]: '18px' },
10819
+ xs: { [vars$4.fontSize]: '12px' },
10820
+ sm: { [vars$4.fontSize]: '14px' },
10821
+ md: { [vars$4.fontSize]: '16px' },
10822
+ lg: { [vars$4.fontSize]: '18px' },
10232
10823
  },
10233
10824
 
10234
10825
  mode: {
10235
10826
  primary: {
10236
- [vars$3.backgroundColor]: globalRefs$2.colors.primary.main,
10237
- [vars$3.textColor]: globalRefs$2.colors.primary.contrast,
10238
- [vars$3.borderColor]: globalRefs$2.colors.primary.light,
10827
+ [vars$4.backgroundColor]: globalRefs$3.colors.primary.main,
10828
+ [vars$4.textColor]: globalRefs$3.colors.primary.contrast,
10829
+ [vars$4.borderColor]: globalRefs$3.colors.primary.light,
10239
10830
  },
10240
10831
  success: {
10241
- [vars$3.backgroundColor]: globalRefs$2.colors.success.main,
10242
- [vars$3.textColor]: globalRefs$2.colors.success.contrast,
10243
- [vars$3.borderColor]: globalRefs$2.colors.success.light,
10832
+ [vars$4.backgroundColor]: globalRefs$3.colors.success.main,
10833
+ [vars$4.textColor]: globalRefs$3.colors.success.contrast,
10834
+ [vars$4.borderColor]: globalRefs$3.colors.success.light,
10244
10835
  },
10245
10836
  error: {
10246
- [vars$3.backgroundColor]: globalRefs$2.colors.error.main,
10247
- [vars$3.textColor]: globalRefs$2.colors.error.contrast,
10248
- [vars$3.borderColor]: globalRefs$2.colors.error.light,
10837
+ [vars$4.backgroundColor]: globalRefs$3.colors.error.main,
10838
+ [vars$4.textColor]: globalRefs$3.colors.error.contrast,
10839
+ [vars$4.borderColor]: globalRefs$3.colors.error.light,
10249
10840
  },
10250
10841
  },
10251
10842
  };
@@ -10253,128 +10844,128 @@ const notification = {
10253
10844
  var notificationCard = /*#__PURE__*/Object.freeze({
10254
10845
  __proto__: null,
10255
10846
  default: notification,
10256
- vars: vars$3
10847
+ vars: vars$4
10257
10848
  });
10258
10849
 
10259
- const globalRefs$1 = getThemeRefs(globals);
10260
- const vars$2 = MultiSelectComboBoxClass.cssVarList;
10850
+ const globalRefs$2 = getThemeRefs(globals);
10851
+ const vars$3 = MultiSelectComboBoxClass.cssVarList;
10261
10852
 
10262
10853
  const multiSelectComboBox = {
10263
- [vars$2.hostWidth]: refs.width,
10264
- [vars$2.hostDirection]: refs.direction,
10265
- [vars$2.fontSize]: refs.fontSize,
10266
- [vars$2.fontFamily]: refs.fontFamily,
10267
- [vars$2.labelTextColor]: refs.labelTextColor,
10268
- [vars$2.errorMessageTextColor]: refs.errorMessageTextColor,
10269
- [vars$2.inputBorderColor]: refs.borderColor,
10270
- [vars$2.inputBorderWidth]: refs.borderWidth,
10271
- [vars$2.inputBorderStyle]: refs.borderStyle,
10272
- [vars$2.inputBorderRadius]: refs.borderRadius,
10273
- [vars$2.inputOutlineColor]: refs.outlineColor,
10274
- [vars$2.inputOutlineOffset]: refs.outlineOffset,
10275
- [vars$2.inputOutlineWidth]: refs.outlineWidth,
10276
- [vars$2.inputOutlineStyle]: refs.outlineStyle,
10277
- [vars$2.labelRequiredIndicator]: refs.requiredIndicator,
10278
- [vars$2.inputValueTextColor]: refs.valueTextColor,
10279
- [vars$2.inputPlaceholderTextColor]: refs.placeholderTextColor,
10280
- [vars$2.inputBackgroundColor]: refs.backgroundColor,
10281
- [vars$2.inputHorizontalPadding]: refs.horizontalPadding,
10282
- [vars$2.inputVerticalPadding]: refs.verticalPadding,
10283
- [vars$2.inputHeight]: refs.inputHeight,
10284
- [vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.dark,
10285
- [vars$2.inputDropdownButtonCursor]: 'pointer',
10286
- [vars$2.inputDropdownButtonSize]: refs.toggleButtonSize,
10287
- [vars$2.inputDropdownButtonOffset]: globalRefs$1.spacing.xs,
10288
- [vars$2.overlayItemPaddingInlineStart]: globalRefs$1.spacing.xs,
10289
- [vars$2.overlayItemPaddingInlineEnd]: globalRefs$1.spacing.lg,
10290
- [vars$2.chipFontSize]: refs.chipFontSize,
10291
- [vars$2.chipTextColor]: globalRefs$1.colors.surface.contrast,
10292
- [vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.light,
10854
+ [vars$3.hostWidth]: refs.width,
10855
+ [vars$3.hostDirection]: refs.direction,
10856
+ [vars$3.fontSize]: refs.fontSize,
10857
+ [vars$3.fontFamily]: refs.fontFamily,
10858
+ [vars$3.labelTextColor]: refs.labelTextColor,
10859
+ [vars$3.errorMessageTextColor]: refs.errorMessageTextColor,
10860
+ [vars$3.inputBorderColor]: refs.borderColor,
10861
+ [vars$3.inputBorderWidth]: refs.borderWidth,
10862
+ [vars$3.inputBorderStyle]: refs.borderStyle,
10863
+ [vars$3.inputBorderRadius]: refs.borderRadius,
10864
+ [vars$3.inputOutlineColor]: refs.outlineColor,
10865
+ [vars$3.inputOutlineOffset]: refs.outlineOffset,
10866
+ [vars$3.inputOutlineWidth]: refs.outlineWidth,
10867
+ [vars$3.inputOutlineStyle]: refs.outlineStyle,
10868
+ [vars$3.labelRequiredIndicator]: refs.requiredIndicator,
10869
+ [vars$3.inputValueTextColor]: refs.valueTextColor,
10870
+ [vars$3.inputPlaceholderTextColor]: refs.placeholderTextColor,
10871
+ [vars$3.inputBackgroundColor]: refs.backgroundColor,
10872
+ [vars$3.inputHorizontalPadding]: refs.horizontalPadding,
10873
+ [vars$3.inputVerticalPadding]: refs.verticalPadding,
10874
+ [vars$3.inputHeight]: refs.inputHeight,
10875
+ [vars$3.inputDropdownButtonColor]: globalRefs$2.colors.surface.dark,
10876
+ [vars$3.inputDropdownButtonCursor]: 'pointer',
10877
+ [vars$3.inputDropdownButtonSize]: refs.toggleButtonSize,
10878
+ [vars$3.inputDropdownButtonOffset]: globalRefs$2.spacing.xs,
10879
+ [vars$3.overlayItemPaddingInlineStart]: globalRefs$2.spacing.xs,
10880
+ [vars$3.overlayItemPaddingInlineEnd]: globalRefs$2.spacing.lg,
10881
+ [vars$3.chipFontSize]: refs.chipFontSize,
10882
+ [vars$3.chipTextColor]: globalRefs$2.colors.surface.contrast,
10883
+ [vars$3.chipBackgroundColor]: globalRefs$2.colors.surface.light,
10293
10884
 
10294
10885
  _readonly: {
10295
- [vars$2.inputDropdownButtonCursor]: 'default',
10886
+ [vars$3.inputDropdownButtonCursor]: 'default',
10296
10887
  },
10297
10888
 
10298
10889
  // Overlay theme exposed via the component:
10299
- [vars$2.overlayFontSize]: refs.fontSize,
10300
- [vars$2.overlayFontFamily]: refs.fontFamily,
10301
- [vars$2.overlayCursor]: 'pointer',
10302
- [vars$2.overlayItemBoxShadow]: 'none',
10303
- [vars$2.overlayBackground]: refs.backgroundColor,
10304
- [vars$2.overlayTextColor]: refs.valueTextColor,
10890
+ [vars$3.overlayFontSize]: refs.fontSize,
10891
+ [vars$3.overlayFontFamily]: refs.fontFamily,
10892
+ [vars$3.overlayCursor]: 'pointer',
10893
+ [vars$3.overlayItemBoxShadow]: 'none',
10894
+ [vars$3.overlayBackground]: refs.backgroundColor,
10895
+ [vars$3.overlayTextColor]: refs.valueTextColor,
10305
10896
 
10306
10897
  // Overlay direct theme:
10307
- [vars$2.overlay.minHeight]: '400px',
10308
- [vars$2.overlay.margin]: '0',
10898
+ [vars$3.overlay.minHeight]: '400px',
10899
+ [vars$3.overlay.margin]: '0',
10309
10900
  };
10310
10901
 
10311
10902
  var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
10312
10903
  __proto__: null,
10313
10904
  default: multiSelectComboBox,
10314
10905
  multiSelectComboBox: multiSelectComboBox,
10315
- vars: vars$2
10906
+ vars: vars$3
10316
10907
  });
10317
10908
 
10318
- const globalRefs = getThemeRefs(globals);
10319
- const vars$1 = BadgeClass.cssVarList;
10909
+ const globalRefs$1 = getThemeRefs(globals);
10910
+ const vars$2 = BadgeClass.cssVarList;
10320
10911
 
10321
10912
  const badge = {
10322
- [vars$1.hostWidth]: 'fit-content',
10323
- [vars$1.hostDirection]: globalRefs.direction,
10913
+ [vars$2.hostWidth]: 'fit-content',
10914
+ [vars$2.hostDirection]: globalRefs$1.direction,
10324
10915
 
10325
- [vars$1.textAlign]: 'center',
10916
+ [vars$2.textAlign]: 'center',
10326
10917
 
10327
- [vars$1.fontFamily]: globalRefs.fonts.font1.family,
10328
- [vars$1.fontWeight]: '400',
10918
+ [vars$2.fontFamily]: globalRefs$1.fonts.font1.family,
10919
+ [vars$2.fontWeight]: '400',
10329
10920
 
10330
- [vars$1.verticalPadding]: '0.25em',
10331
- [vars$1.horizontalPadding]: '0.5em',
10921
+ [vars$2.verticalPadding]: '0.25em',
10922
+ [vars$2.horizontalPadding]: '0.5em',
10332
10923
 
10333
- [vars$1.borderWidth]: globalRefs.border.xs,
10334
- [vars$1.borderRadius]: globalRefs.radius.xs,
10335
- [vars$1.borderColor]: 'transparent',
10336
- [vars$1.borderStyle]: 'solid',
10924
+ [vars$2.borderWidth]: globalRefs$1.border.xs,
10925
+ [vars$2.borderRadius]: globalRefs$1.radius.xs,
10926
+ [vars$2.borderColor]: 'transparent',
10927
+ [vars$2.borderStyle]: 'solid',
10337
10928
 
10338
10929
  _fullWidth: {
10339
- [vars$1.hostWidth]: '100%',
10930
+ [vars$2.hostWidth]: '100%',
10340
10931
  },
10341
10932
 
10342
10933
  size: {
10343
- xs: { [vars$1.fontSize]: '12px' },
10344
- sm: { [vars$1.fontSize]: '14px' },
10345
- md: { [vars$1.fontSize]: '16px' },
10346
- lg: { [vars$1.fontSize]: '18px' },
10934
+ xs: { [vars$2.fontSize]: '12px' },
10935
+ sm: { [vars$2.fontSize]: '14px' },
10936
+ md: { [vars$2.fontSize]: '16px' },
10937
+ lg: { [vars$2.fontSize]: '18px' },
10347
10938
  },
10348
10939
 
10349
10940
  mode: {
10350
10941
  default: {
10351
- [vars$1.textColor]: globalRefs.colors.surface.dark,
10942
+ [vars$2.textColor]: globalRefs$1.colors.surface.dark,
10352
10943
  _bordered: {
10353
- [vars$1.borderColor]: globalRefs.colors.surface.light,
10944
+ [vars$2.borderColor]: globalRefs$1.colors.surface.light,
10354
10945
  },
10355
10946
  },
10356
10947
  primary: {
10357
- [vars$1.textColor]: globalRefs.colors.primary.main,
10948
+ [vars$2.textColor]: globalRefs$1.colors.primary.main,
10358
10949
  _bordered: {
10359
- [vars$1.borderColor]: globalRefs.colors.primary.light,
10950
+ [vars$2.borderColor]: globalRefs$1.colors.primary.light,
10360
10951
  },
10361
10952
  },
10362
10953
  secondary: {
10363
- [vars$1.textColor]: globalRefs.colors.secondary.main,
10954
+ [vars$2.textColor]: globalRefs$1.colors.secondary.main,
10364
10955
  _bordered: {
10365
- [vars$1.borderColor]: globalRefs.colors.secondary.light,
10956
+ [vars$2.borderColor]: globalRefs$1.colors.secondary.light,
10366
10957
  },
10367
10958
  },
10368
10959
  error: {
10369
- [vars$1.textColor]: globalRefs.colors.error.main,
10960
+ [vars$2.textColor]: globalRefs$1.colors.error.main,
10370
10961
  _bordered: {
10371
- [vars$1.borderColor]: globalRefs.colors.error.light,
10962
+ [vars$2.borderColor]: globalRefs$1.colors.error.light,
10372
10963
  },
10373
10964
  },
10374
10965
  success: {
10375
- [vars$1.textColor]: globalRefs.colors.success.main,
10966
+ [vars$2.textColor]: globalRefs$1.colors.success.main,
10376
10967
  _bordered: {
10377
- [vars$1.borderColor]: globalRefs.colors.success.light,
10968
+ [vars$2.borderColor]: globalRefs$1.colors.success.light,
10378
10969
  },
10379
10970
  },
10380
10971
  },
@@ -10383,6 +10974,31 @@ const badge = {
10383
10974
  var badge$1 = /*#__PURE__*/Object.freeze({
10384
10975
  __proto__: null,
10385
10976
  default: badge,
10977
+ vars: vars$2
10978
+ });
10979
+
10980
+ const globalRefs = getThemeRefs(globals);
10981
+
10982
+ const vars$1 = MappingsFieldClass.cssVarList;
10983
+
10984
+ const mappingsField = {
10985
+ [vars$1.hostWidth]: refs.width,
10986
+ [vars$1.hostDirection]: refs.direction,
10987
+ [vars$1.fontSize]: refs.fontSize,
10988
+ [vars$1.fontFamily]: refs.fontFamily,
10989
+ [vars$1.separatorFontSize]: '14px',
10990
+ [vars$1.labelTextColor]: refs.labelTextColor,
10991
+ [vars$1.itemMarginBottom]: '1em',
10992
+ // To be positioned correctly, the min width has to match the text field min width
10993
+ [vars$1.valueLabelMinWidth]: refs.minWidth,
10994
+ // To be positioned correctly, the min width has to match the combo box field min width
10995
+ [vars$1.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs.border.xs})`,
10996
+ };
10997
+
10998
+ var mappingsField$1 = /*#__PURE__*/Object.freeze({
10999
+ __proto__: null,
11000
+ default: mappingsField,
11001
+ mappingsField: mappingsField,
10386
11002
  vars: vars$1
10387
11003
  });
10388
11004
 
@@ -10420,6 +11036,7 @@ const components = {
10420
11036
  notificationCard,
10421
11037
  multiSelectComboBox: multiSelectComboBox$1,
10422
11038
  badge: badge$1,
11039
+ mappingsField: mappingsField$1,
10423
11040
  };
10424
11041
 
10425
11042
  const theme = Object.keys(components).reduce(
@@ -10432,7 +11049,7 @@ const vars = Object.keys(components).reduce(
10432
11049
  );
10433
11050
 
10434
11051
  const defaultTheme = { globals, components: theme };
10435
- const themeVars = { globals: vars$y, components: vars };
11052
+ const themeVars = { globals: vars$z, components: vars };
10436
11053
 
10437
11054
  const colors = {
10438
11055
  surface: {
@@ -10478,5 +11095,5 @@ const darkTheme = merge({}, defaultTheme, {
10478
11095
  },
10479
11096
  });
10480
11097
 
10481
- export { BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
11098
+ export { BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
10482
11099
  //# sourceMappingURL=index.esm.js.map