@descope/web-components-ui 1.0.279 → 1.0.280

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