@descope/web-components-ui 1.0.319 → 1.0.321

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 (44) hide show
  1. package/dist/cjs/index.cjs.js +1390 -1010
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +1433 -1051
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/1438.js +1 -1
  6. package/dist/umd/2362.js +1 -1
  7. package/dist/umd/3830.js +1 -1
  8. package/dist/umd/4028.js +1 -1
  9. package/dist/umd/5135.js +1 -1
  10. package/dist/umd/5806.js +1 -1
  11. package/dist/umd/602.js +170 -0
  12. package/dist/umd/{1621.js.LICENSE.txt → 602.js.LICENSE.txt} +0 -6
  13. package/dist/umd/6770.js +1 -1
  14. package/dist/umd/7056.js +2 -2
  15. package/dist/umd/7284.js +303 -0
  16. package/dist/umd/7284.js.LICENSE.txt +11 -0
  17. package/dist/umd/8137.js +452 -0
  18. package/dist/umd/8137.js.LICENSE.txt +17 -0
  19. package/dist/umd/8191.js +4 -4
  20. package/dist/umd/9092.js +2 -2
  21. package/dist/umd/DescopeDev.js +1 -1
  22. package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
  23. package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
  24. package/dist/umd/descope-email-field-index-js.js +1 -1
  25. package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js +1 -1
  26. package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
  27. package/dist/umd/descope-new-password-index-js.js +1 -1
  28. package/dist/umd/descope-passcode-index-js.js +1 -1
  29. package/dist/umd/descope-password-index-js.js +1 -1
  30. package/dist/umd/descope-radio-group-index-js.js +1 -0
  31. package/dist/umd/descope-text-field-index-js.js +1 -1
  32. package/dist/umd/index.js +1 -1
  33. package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +1 -1
  34. package/package.json +2 -1
  35. package/src/components/descope-password/PasswordClass.js +56 -0
  36. package/src/components/descope-radio-group/RadioButtonClass.js +74 -0
  37. package/src/components/descope-radio-group/RadioGroupClass.js +192 -0
  38. package/src/components/descope-radio-group/index.js +8 -0
  39. package/src/index.cjs.js +2 -0
  40. package/src/index.js +1 -0
  41. package/src/theme/components/index.js +4 -0
  42. package/src/theme/components/radioGroup/radioButton.js +42 -0
  43. package/src/theme/components/radioGroup/radioGroup.js +37 -0
  44. package/dist/umd/1621.js +0 -620
package/dist/index.esm.js CHANGED
@@ -19,6 +19,7 @@ import '@vaadin/icon';
19
19
  import '@vaadin/icons';
20
20
  import '@vaadin/custom-field';
21
21
  import hljs from 'highlight.js';
22
+ import '@vaadin/radio-group';
22
23
  import merge from 'lodash.merge';
23
24
  import Color from 'color';
24
25
 
@@ -1356,9 +1357,9 @@ const inputEventsDispatchingMixin = (superclass) =>
1356
1357
 
1357
1358
  /* eslint-disable no-use-before-define */
1358
1359
 
1359
- const componentName$U = getComponentName('icon');
1360
+ const componentName$W = getComponentName('icon');
1360
1361
 
1361
- class RawIcon extends createBaseClass({ componentName: componentName$U, baseSelector: 'slot' }) {
1362
+ class RawIcon extends createBaseClass({ componentName: componentName$W, baseSelector: 'slot' }) {
1362
1363
  constructor() {
1363
1364
  super();
1364
1365
 
@@ -1427,7 +1428,7 @@ const clickableMixin = (superclass) =>
1427
1428
  }
1428
1429
  };
1429
1430
 
1430
- const componentName$T = getComponentName('button');
1431
+ const componentName$V = getComponentName('button');
1431
1432
 
1432
1433
  const resetStyles = `
1433
1434
  :host {
@@ -1533,7 +1534,7 @@ const ButtonClass = compose(
1533
1534
  }
1534
1535
  `,
1535
1536
  excludeAttrsSync: ['tabindex'],
1536
- componentName: componentName$T,
1537
+ componentName: componentName$V,
1537
1538
  })
1538
1539
  );
1539
1540
 
@@ -1570,7 +1571,7 @@ loadingIndicatorStyles = `
1570
1571
  }
1571
1572
  `;
1572
1573
 
1573
- customElements.define(componentName$T, ButtonClass);
1574
+ customElements.define(componentName$V, ButtonClass);
1574
1575
 
1575
1576
  const createBaseInputClass = (...args) =>
1576
1577
  compose(
@@ -1580,11 +1581,11 @@ const createBaseInputClass = (...args) =>
1580
1581
  inputEventsDispatchingMixin
1581
1582
  )(createBaseClass(...args));
1582
1583
 
1583
- const componentName$S = getComponentName('boolean-field-internal');
1584
+ const componentName$U = getComponentName('boolean-field-internal');
1584
1585
 
1585
1586
  const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
1586
1587
 
1587
- const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$S, baseSelector: 'div' });
1588
+ const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$U, baseSelector: 'div' });
1588
1589
 
1589
1590
  class BooleanInputInternal extends BaseInputClass$8 {
1590
1591
  static get observedAttributes() {
@@ -1660,14 +1661,14 @@ const booleanFieldMixin = (superclass) =>
1660
1661
 
1661
1662
  const template = document.createElement('template');
1662
1663
  template.innerHTML = `
1663
- <${componentName$S}
1664
+ <${componentName$U}
1664
1665
  tabindex="-1"
1665
1666
  slot="input"
1666
- ></${componentName$S}>
1667
+ ></${componentName$U}>
1667
1668
  `;
1668
1669
 
1669
1670
  this.baseElement.appendChild(template.content.cloneNode(true));
1670
- this.inputElement = this.shadowRoot.querySelector(componentName$S);
1671
+ this.inputElement = this.shadowRoot.querySelector(componentName$U);
1671
1672
  this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
1672
1673
 
1673
1674
  forwardAttrs(this, this.inputElement, {
@@ -1866,7 +1867,7 @@ descope-boolean-field-internal {
1866
1867
  }
1867
1868
  `;
1868
1869
 
1869
- const componentName$R = getComponentName('checkbox');
1870
+ const componentName$T = getComponentName('checkbox');
1870
1871
 
1871
1872
  const {
1872
1873
  host: host$m,
@@ -1972,15 +1973,15 @@ const CheckboxClass = compose(
1972
1973
  }
1973
1974
  `,
1974
1975
  excludeAttrsSync: ['label', 'tabindex'],
1975
- componentName: componentName$R,
1976
+ componentName: componentName$T,
1976
1977
  })
1977
1978
  );
1978
1979
 
1979
- customElements.define(componentName$S, BooleanInputInternal);
1980
+ customElements.define(componentName$U, BooleanInputInternal);
1980
1981
 
1981
- customElements.define(componentName$R, CheckboxClass);
1982
+ customElements.define(componentName$T, CheckboxClass);
1982
1983
 
1983
- const componentName$Q = getComponentName('switch-toggle');
1984
+ const componentName$S = getComponentName('switch-toggle');
1984
1985
 
1985
1986
  const {
1986
1987
  host: host$l,
@@ -2112,17 +2113,17 @@ const SwitchToggleClass = compose(
2112
2113
  }
2113
2114
  `,
2114
2115
  excludeAttrsSync: ['label', 'tabindex'],
2115
- componentName: componentName$Q,
2116
+ componentName: componentName$S,
2116
2117
  })
2117
2118
  );
2118
2119
 
2119
- customElements.define(componentName$Q, SwitchToggleClass);
2120
+ customElements.define(componentName$S, SwitchToggleClass);
2120
2121
 
2121
- const componentName$P = getComponentName('loader-linear');
2122
+ const componentName$R = getComponentName('loader-linear');
2122
2123
 
2123
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$P, baseSelector: ':host > div' }) {
2124
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$R, baseSelector: ':host > div' }) {
2124
2125
  static get componentName() {
2125
- return componentName$P;
2126
+ return componentName$R;
2126
2127
  }
2127
2128
 
2128
2129
  constructor() {
@@ -2183,11 +2184,11 @@ const LoaderLinearClass = compose(
2183
2184
  componentNameValidationMixin
2184
2185
  )(RawLoaderLinear);
2185
2186
 
2186
- customElements.define(componentName$P, LoaderLinearClass);
2187
+ customElements.define(componentName$R, LoaderLinearClass);
2187
2188
 
2188
- const componentName$O = getComponentName('loader-radial');
2189
+ const componentName$Q = getComponentName('loader-radial');
2189
2190
 
2190
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$O, baseSelector: ':host > div' }) {
2191
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$Q, baseSelector: ':host > div' }) {
2191
2192
  constructor() {
2192
2193
  super();
2193
2194
 
@@ -2231,11 +2232,11 @@ const LoaderRadialClass = compose(
2231
2232
  componentNameValidationMixin
2232
2233
  )(RawLoaderRadial);
2233
2234
 
2234
- customElements.define(componentName$O, LoaderRadialClass);
2235
+ customElements.define(componentName$Q, LoaderRadialClass);
2235
2236
 
2236
- const componentName$N = getComponentName('container');
2237
+ const componentName$P = getComponentName('container');
2237
2238
 
2238
- class RawContainer extends createBaseClass({ componentName: componentName$N, baseSelector: 'slot' }) {
2239
+ class RawContainer extends createBaseClass({ componentName: componentName$P, baseSelector: 'slot' }) {
2239
2240
  constructor() {
2240
2241
  super();
2241
2242
 
@@ -2288,11 +2289,11 @@ const ContainerClass = compose(
2288
2289
  componentNameValidationMixin
2289
2290
  )(RawContainer);
2290
2291
 
2291
- customElements.define(componentName$N, ContainerClass);
2292
+ customElements.define(componentName$P, ContainerClass);
2292
2293
 
2293
- const componentName$M = getComponentName('text');
2294
+ const componentName$O = getComponentName('text');
2294
2295
 
2295
- class RawText extends createBaseClass({ componentName: componentName$M, baseSelector: ':host > slot' }) {
2296
+ class RawText extends createBaseClass({ componentName: componentName$O, baseSelector: ':host > slot' }) {
2296
2297
  constructor() {
2297
2298
  super();
2298
2299
 
@@ -2349,8 +2350,8 @@ const TextClass = compose(
2349
2350
  componentNameValidationMixin
2350
2351
  )(RawText);
2351
2352
 
2352
- const componentName$L = getComponentName('divider');
2353
- class RawDivider extends createBaseClass({ componentName: componentName$L, baseSelector: ':host > div' }) {
2353
+ const componentName$N = getComponentName('divider');
2354
+ class RawDivider extends createBaseClass({ componentName: componentName$N, baseSelector: ':host > div' }) {
2354
2355
  constructor() {
2355
2356
  super();
2356
2357
 
@@ -2449,9 +2450,9 @@ const DividerClass = compose(
2449
2450
  componentNameValidationMixin
2450
2451
  )(RawDivider);
2451
2452
 
2452
- customElements.define(componentName$M, TextClass);
2453
+ customElements.define(componentName$O, TextClass);
2453
2454
 
2454
- customElements.define(componentName$L, DividerClass);
2455
+ customElements.define(componentName$N, DividerClass);
2455
2456
 
2456
2457
  const {
2457
2458
  host: host$i,
@@ -2548,9 +2549,9 @@ var textFieldMappings = {
2548
2549
  ],
2549
2550
  };
2550
2551
 
2551
- const componentName$K = getComponentName('email-field');
2552
+ const componentName$M = getComponentName('email-field');
2552
2553
 
2553
- const customMixin$9 = (superclass) =>
2554
+ const customMixin$a = (superclass) =>
2554
2555
  class EmailFieldMixinClass extends superclass {
2555
2556
  init() {
2556
2557
  super.init?.();
@@ -2564,7 +2565,7 @@ const EmailFieldClass = compose(
2564
2565
  draggableMixin,
2565
2566
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
2566
2567
  componentNameValidationMixin,
2567
- customMixin$9
2568
+ customMixin$a
2568
2569
  )(
2569
2570
  createProxy({
2570
2571
  slots: ['', 'suffix'],
@@ -2583,15 +2584,15 @@ const EmailFieldClass = compose(
2583
2584
  ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
2584
2585
  `,
2585
2586
  excludeAttrsSync: ['tabindex'],
2586
- componentName: componentName$K,
2587
+ componentName: componentName$M,
2587
2588
  })
2588
2589
  );
2589
2590
 
2590
- customElements.define(componentName$K, EmailFieldClass);
2591
+ customElements.define(componentName$M, EmailFieldClass);
2591
2592
 
2592
- const componentName$J = getComponentName('link');
2593
+ const componentName$L = getComponentName('link');
2593
2594
 
2594
- class RawLink extends createBaseClass({ componentName: componentName$J, baseSelector: ':host a' }) {
2595
+ class RawLink extends createBaseClass({ componentName: componentName$L, baseSelector: ':host a' }) {
2595
2596
  constructor() {
2596
2597
  super();
2597
2598
 
@@ -2657,7 +2658,7 @@ const LinkClass = compose(
2657
2658
  componentNameValidationMixin
2658
2659
  )(RawLink);
2659
2660
 
2660
- customElements.define(componentName$J, LinkClass);
2661
+ customElements.define(componentName$L, LinkClass);
2661
2662
 
2662
2663
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
2663
2664
  let style;
@@ -2709,37 +2710,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
2709
2710
  return CssVarImageClass;
2710
2711
  };
2711
2712
 
2712
- const componentName$I = getComponentName('logo');
2713
+ const componentName$K = getComponentName('logo');
2713
2714
 
2714
2715
  const LogoClass = createCssVarImageClass({
2715
- componentName: componentName$I,
2716
+ componentName: componentName$K,
2716
2717
  varName: 'url',
2717
2718
  fallbackVarName: 'fallbackUrl',
2718
2719
  });
2719
2720
 
2720
- customElements.define(componentName$I, LogoClass);
2721
+ customElements.define(componentName$K, LogoClass);
2721
2722
 
2722
- const componentName$H = getComponentName('totp-image');
2723
+ const componentName$J = getComponentName('totp-image');
2723
2724
 
2724
2725
  const TotpImageClass = createCssVarImageClass({
2725
- componentName: componentName$H,
2726
+ componentName: componentName$J,
2726
2727
  varName: 'url',
2727
2728
  fallbackVarName: 'fallbackUrl',
2728
2729
  });
2729
2730
 
2730
- customElements.define(componentName$H, TotpImageClass);
2731
+ customElements.define(componentName$J, TotpImageClass);
2731
2732
 
2732
- const componentName$G = getComponentName('notp-image');
2733
+ const componentName$I = getComponentName('notp-image');
2733
2734
 
2734
2735
  const NotpImageClass = createCssVarImageClass({
2735
- componentName: componentName$G,
2736
+ componentName: componentName$I,
2736
2737
  varName: 'url',
2737
2738
  fallbackVarName: 'fallbackUrl',
2738
2739
  });
2739
2740
 
2740
- customElements.define(componentName$G, NotpImageClass);
2741
+ customElements.define(componentName$I, NotpImageClass);
2741
2742
 
2742
- const componentName$F = getComponentName('number-field');
2743
+ const componentName$H = getComponentName('number-field');
2743
2744
 
2744
2745
  const NumberFieldClass = compose(
2745
2746
  createStyleMixin({
@@ -2765,11 +2766,11 @@ const NumberFieldClass = compose(
2765
2766
  ${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
2766
2767
  `,
2767
2768
  excludeAttrsSync: ['tabindex'],
2768
- componentName: componentName$F,
2769
+ componentName: componentName$H,
2769
2770
  })
2770
2771
  );
2771
2772
 
2772
- customElements.define(componentName$F, NumberFieldClass);
2773
+ customElements.define(componentName$H, NumberFieldClass);
2773
2774
 
2774
2775
  const focusElement = (ele) => {
2775
2776
  ele?.focus();
@@ -2787,13 +2788,13 @@ const getSanitizedCharacters = (str) => {
2787
2788
 
2788
2789
  /* eslint-disable no-param-reassign */
2789
2790
 
2790
- const componentName$E = getComponentName('passcode-internal');
2791
+ const componentName$G = getComponentName('passcode-internal');
2791
2792
 
2792
2793
  const observedAttributes$5 = ['digits', 'loading'];
2793
2794
 
2794
2795
  const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
2795
2796
 
2796
- const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$E, baseSelector: 'div' });
2797
+ const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$G, baseSelector: 'div' });
2797
2798
 
2798
2799
  class PasscodeInternal extends BaseInputClass$7 {
2799
2800
  static get observedAttributes() {
@@ -3019,11 +3020,11 @@ class PasscodeInternal extends BaseInputClass$7 {
3019
3020
  }
3020
3021
  }
3021
3022
 
3022
- const componentName$D = getComponentName('text-field');
3023
+ const componentName$F = getComponentName('text-field');
3023
3024
 
3024
3025
  const observedAttrs = ['type'];
3025
3026
 
3026
- const customMixin$8 = (superclass) =>
3027
+ const customMixin$9 = (superclass) =>
3027
3028
  class TextFieldClass extends superclass {
3028
3029
  static get observedAttributes() {
3029
3030
  return observedAttrs.concat(superclass.observedAttributes || []);
@@ -3075,7 +3076,7 @@ const TextFieldClass = compose(
3075
3076
  draggableMixin,
3076
3077
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
3077
3078
  componentNameValidationMixin,
3078
- customMixin$8
3079
+ customMixin$9
3079
3080
  )(
3080
3081
  createProxy({
3081
3082
  slots: ['prefix', 'suffix'],
@@ -3097,15 +3098,15 @@ const TextFieldClass = compose(
3097
3098
  ${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
3098
3099
  `,
3099
3100
  excludeAttrsSync: ['tabindex'],
3100
- componentName: componentName$D,
3101
+ componentName: componentName$F,
3101
3102
  })
3102
3103
  );
3103
3104
 
3104
- const componentName$C = getComponentName('passcode');
3105
+ const componentName$E = getComponentName('passcode');
3105
3106
 
3106
3107
  const observedAttributes$4 = ['digits'];
3107
3108
 
3108
- const customMixin$7 = (superclass) =>
3109
+ const customMixin$8 = (superclass) =>
3109
3110
  class PasscodeMixinClass extends superclass {
3110
3111
  static get observedAttributes() {
3111
3112
  return observedAttributes$4.concat(superclass.observedAttributes || []);
@@ -3120,17 +3121,17 @@ const customMixin$7 = (superclass) =>
3120
3121
  const template = document.createElement('template');
3121
3122
 
3122
3123
  template.innerHTML = `
3123
- <${componentName$E}
3124
+ <${componentName$G}
3124
3125
  bordered="true"
3125
3126
  name="code"
3126
3127
  tabindex="-1"
3127
3128
  slot="input"
3128
- ><slot></slot></${componentName$E}>
3129
+ ><slot></slot></${componentName$G}>
3129
3130
  `;
3130
3131
 
3131
3132
  this.baseElement.appendChild(template.content.cloneNode(true));
3132
3133
 
3133
- this.inputElement = this.shadowRoot.querySelector(componentName$E);
3134
+ this.inputElement = this.shadowRoot.querySelector(componentName$G);
3134
3135
 
3135
3136
  forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
3136
3137
  }
@@ -3201,7 +3202,7 @@ const PasscodeClass = compose(
3201
3202
  draggableMixin,
3202
3203
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
3203
3204
  componentNameValidationMixin,
3204
- customMixin$7
3205
+ customMixin$8
3205
3206
  )(
3206
3207
  createProxy({
3207
3208
  slots: [],
@@ -3277,15 +3278,15 @@ const PasscodeClass = compose(
3277
3278
  ${resetInputCursor('vaadin-text-field')}
3278
3279
  `,
3279
3280
  excludeAttrsSync: ['tabindex'],
3280
- componentName: componentName$C,
3281
+ componentName: componentName$E,
3281
3282
  })
3282
3283
  );
3283
3284
 
3284
- customElements.define(componentName$D, TextFieldClass);
3285
+ customElements.define(componentName$F, TextFieldClass);
3285
3286
 
3286
- customElements.define(componentName$E, PasscodeInternal);
3287
+ customElements.define(componentName$G, PasscodeInternal);
3287
3288
 
3288
- customElements.define(componentName$C, PasscodeClass);
3289
+ customElements.define(componentName$E, PasscodeClass);
3289
3290
 
3290
3291
  const passwordDraggableMixin = (superclass) =>
3291
3292
  class PasswordDraggableMixinClass extends superclass {
@@ -3389,9 +3390,9 @@ const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
3389
3390
  `;
3390
3391
  };
3391
3392
 
3392
- const componentName$B = getComponentName('password');
3393
+ const componentName$D = getComponentName('password');
3393
3394
 
3394
- const customMixin$6 = (superclass) =>
3395
+ const customMixin$7 = (superclass) =>
3395
3396
  class PasswordFieldMixinClass extends superclass {
3396
3397
  init() {
3397
3398
  super.init?.();
@@ -3412,6 +3413,8 @@ const customMixin$6 = (superclass) =>
3412
3413
  // create external input
3413
3414
  const externalInput = createExternalInputEle('external-input', this.getAutocompleteType());
3414
3415
 
3416
+ this.handlePasswordVisibility(externalInput);
3417
+
3415
3418
  // apply original input's styles to external input
3416
3419
  setTimeout(() => {
3417
3420
  applyExternalInputStyles(origInput, externalInput);
@@ -3422,6 +3425,7 @@ const customMixin$6 = (superclass) =>
3422
3425
 
3423
3426
  // sync input stateful attributes: `type` (for visibility state change) and `readonly`
3424
3427
  syncAttrs(origInput, externalInput, { includeAttrs: ['type', 'readonly'] });
3428
+ syncAttrs(this, externalInput, { includeAttrs: ['focused'] });
3425
3429
 
3426
3430
  origInput.addEventListener('focus', (e) => {
3427
3431
  e.preventDefault();
@@ -3439,6 +3443,59 @@ const customMixin$6 = (superclass) =>
3439
3443
  this.appendChild(externalInput);
3440
3444
  }
3441
3445
 
3446
+ // override vaadin's password visibility toggle.
3447
+ // we need this override in order to to resolve the external input `focus` race condition,
3448
+ // which is caused due to the focus sync between the two inputs.
3449
+ handlePasswordVisibility(externalInput) {
3450
+ // disable vaadin's `__boundRevealButtonMouseDown` mouse-down event lisetener
3451
+ const origBoundRevealButtonMouseDown = this.baseElement.__boundRevealButtonMouseDown;
3452
+ this.baseElement
3453
+ .querySelector('vaadin-password-field-button')
3454
+ .removeEventListener('mousedown', origBoundRevealButtonMouseDown);
3455
+
3456
+ // disable vaadin's `_passwordVisibleChanged` observer
3457
+ this.baseElement._passwordVisibleChanged = () => {};
3458
+
3459
+ // override vaadin's `_togglePasswordVisibility`
3460
+ this.baseElement._togglePasswordVisibility = () => {
3461
+ const currVisibility = externalInput.getAttribute('type');
3462
+ if (currVisibility === 'password') {
3463
+ this.showPasswordVisibility(externalInput);
3464
+ } else {
3465
+ this.hidePasswordVisibility(externalInput);
3466
+ }
3467
+ };
3468
+
3469
+ // on component blur, if password is revealed - hide it
3470
+ // this behaves differently from vaadin's focus handling, and checks if the blur takes the component out of focus
3471
+ // (which menas the click was made outside the component) or if the blur was called due to clicking the Reveal Button
3472
+ // and then focusing in the input again
3473
+ this.addEventListener('blur', () => {
3474
+ setTimeout(() => {
3475
+ const isHiddenAndFocused =
3476
+ externalInput.getAttribute('type') !== 'password' &&
3477
+ externalInput.getAttribute('focused') !== 'true';
3478
+ if (isHiddenAndFocused) {
3479
+ this.hidePasswordVisibility(externalInput);
3480
+ }
3481
+ });
3482
+ });
3483
+ }
3484
+
3485
+ hidePasswordVisibility(input) {
3486
+ // handle input element's type
3487
+ input.setAttribute('type', 'password');
3488
+ // handle vaadin's `password-visible` attribute
3489
+ this.setAttribute('password-visible', 'false');
3490
+ }
3491
+
3492
+ showPasswordVisibility(input) {
3493
+ // handle input element's type
3494
+ input.setAttribute('type', 'text');
3495
+ // handle vaadin's `password-visible` attribute
3496
+ this.setAttribute('password-visible', 'true');
3497
+ }
3498
+
3442
3499
  getAutocompleteType() {
3443
3500
  return this.getAttribute('autocomplete') || 'current-password';
3444
3501
  }
@@ -3533,7 +3590,7 @@ const PasswordClass = compose(
3533
3590
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
3534
3591
  componentNameValidationMixin,
3535
3592
  passwordDraggableMixin,
3536
- customMixin$6
3593
+ customMixin$7
3537
3594
  )(
3538
3595
  createProxy({
3539
3596
  slots: ['', 'suffix'],
@@ -3590,11 +3647,11 @@ const PasswordClass = compose(
3590
3647
  }
3591
3648
  `,
3592
3649
  excludeAttrsSync: ['tabindex'],
3593
- componentName: componentName$B,
3650
+ componentName: componentName$D,
3594
3651
  })
3595
3652
  );
3596
3653
 
3597
- customElements.define(componentName$B, PasswordClass);
3654
+ customElements.define(componentName$D, PasswordClass);
3598
3655
 
3599
3656
  const textRuleSet = {
3600
3657
  components: {
@@ -3610,9 +3667,9 @@ const textRuleSet = {
3610
3667
  },
3611
3668
  };
3612
3669
 
3613
- const componentName$A = getComponentName('enriched-text');
3670
+ const componentName$C = getComponentName('enriched-text');
3614
3671
 
3615
- let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName: componentName$A, baseSelector: ':host > div' }) {
3672
+ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
3616
3673
  #origLinkRenderer;
3617
3674
 
3618
3675
  constructor() {
@@ -3773,9 +3830,9 @@ const EnrichedTextClass = compose(
3773
3830
  componentNameValidationMixin
3774
3831
  )(EnrichedText$2);
3775
3832
 
3776
- customElements.define(componentName$A, EnrichedTextClass);
3833
+ customElements.define(componentName$C, EnrichedTextClass);
3777
3834
 
3778
- const componentName$z = getComponentName('text-area');
3835
+ const componentName$B = getComponentName('text-area');
3779
3836
 
3780
3837
  const {
3781
3838
  host: host$e,
@@ -3851,17 +3908,17 @@ const TextAreaClass = compose(
3851
3908
  ${resetInputCursor('vaadin-text-area')}
3852
3909
  `,
3853
3910
  excludeAttrsSync: ['tabindex'],
3854
- componentName: componentName$z,
3911
+ componentName: componentName$B,
3855
3912
  })
3856
3913
  );
3857
3914
 
3858
- customElements.define(componentName$z, TextAreaClass);
3915
+ customElements.define(componentName$B, TextAreaClass);
3859
3916
 
3860
3917
  const observedAttributes$3 = ['src', 'alt'];
3861
3918
 
3862
- const componentName$y = getComponentName('image');
3919
+ const componentName$A = getComponentName('image');
3863
3920
 
3864
- const BaseClass$1 = createBaseClass({ componentName: componentName$y, baseSelector: ':host > img' });
3921
+ const BaseClass$1 = createBaseClass({ componentName: componentName$A, baseSelector: ':host > img' });
3865
3922
  class RawImage extends BaseClass$1 {
3866
3923
  static get observedAttributes() {
3867
3924
  return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
@@ -3901,9 +3958,9 @@ const ImageClass = compose(
3901
3958
  draggableMixin
3902
3959
  )(RawImage);
3903
3960
 
3904
- customElements.define(componentName$y, ImageClass);
3961
+ customElements.define(componentName$A, ImageClass);
3905
3962
 
3906
- const componentName$x = getComponentName('combo-box');
3963
+ const componentName$z = getComponentName('combo-box');
3907
3964
 
3908
3965
  const ComboBoxMixin = (superclass) =>
3909
3966
  class ComboBoxMixinClass extends superclass {
@@ -4286,12 +4343,12 @@ const ComboBoxClass = compose(
4286
4343
  // and reset items to an empty array, and opening the list box with no items
4287
4344
  // to display.
4288
4345
  excludeAttrsSync: ['tabindex', 'size', 'data'],
4289
- componentName: componentName$x,
4346
+ componentName: componentName$z,
4290
4347
  includeForwardProps: ['items', 'renderer', 'selectedItem'],
4291
4348
  })
4292
4349
  );
4293
4350
 
4294
- customElements.define(componentName$x, ComboBoxClass);
4351
+ customElements.define(componentName$z, ComboBoxClass);
4295
4352
 
4296
4353
  var CountryCodes = [
4297
4354
  // United States should be the first option
@@ -5534,7 +5591,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
5534
5591
  </div>
5535
5592
  `;
5536
5593
 
5537
- const componentName$w = getComponentName('phone-field-internal');
5594
+ const componentName$y = getComponentName('phone-field-internal');
5538
5595
 
5539
5596
  const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
5540
5597
  const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -5546,7 +5603,7 @@ const mapAttrs$1 = {
5546
5603
 
5547
5604
  const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
5548
5605
 
5549
- const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$w, baseSelector: 'div' });
5606
+ const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$y, baseSelector: 'div' });
5550
5607
 
5551
5608
  let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
5552
5609
  static get observedAttributes() {
@@ -5718,14 +5775,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
5718
5775
  }
5719
5776
  };
5720
5777
 
5721
- customElements.define(componentName$w, PhoneFieldInternal$1);
5778
+ customElements.define(componentName$y, PhoneFieldInternal$1);
5722
5779
 
5723
5780
  const textVars$1 = TextFieldClass.cssVarList;
5724
5781
  const comboVars = ComboBoxClass.cssVarList;
5725
5782
 
5726
- const componentName$v = getComponentName('phone-field');
5783
+ const componentName$x = getComponentName('phone-field');
5727
5784
 
5728
- const customMixin$5 = (superclass) =>
5785
+ const customMixin$6 = (superclass) =>
5729
5786
  class PhoneFieldMixinClass extends superclass {
5730
5787
  static get CountryCodes() {
5731
5788
  return CountryCodes;
@@ -5737,15 +5794,15 @@ const customMixin$5 = (superclass) =>
5737
5794
  const template = document.createElement('template');
5738
5795
 
5739
5796
  template.innerHTML = `
5740
- <${componentName$w}
5797
+ <${componentName$y}
5741
5798
  tabindex="-1"
5742
5799
  slot="input"
5743
- ></${componentName$w}>
5800
+ ></${componentName$y}>
5744
5801
  `;
5745
5802
 
5746
5803
  this.baseElement.appendChild(template.content.cloneNode(true));
5747
5804
 
5748
- this.inputElement = this.shadowRoot.querySelector(componentName$w);
5805
+ this.inputElement = this.shadowRoot.querySelector(componentName$y);
5749
5806
 
5750
5807
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
5751
5808
  includeAttrs: [
@@ -5865,7 +5922,7 @@ const PhoneFieldClass = compose(
5865
5922
  }),
5866
5923
  draggableMixin,
5867
5924
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
5868
- customMixin$5
5925
+ customMixin$6
5869
5926
  )(
5870
5927
  createProxy({
5871
5928
  slots: [],
@@ -5941,17 +5998,17 @@ const PhoneFieldClass = compose(
5941
5998
  ${resetInputLabelPosition('vaadin-text-field')}
5942
5999
  `,
5943
6000
  excludeAttrsSync: ['tabindex'],
5944
- componentName: componentName$v,
6001
+ componentName: componentName$x,
5945
6002
  })
5946
6003
  );
5947
6004
 
5948
- customElements.define(componentName$v, PhoneFieldClass);
6005
+ customElements.define(componentName$x, PhoneFieldClass);
5949
6006
 
5950
6007
  const getCountryByCodeId = (countryCode) => {
5951
6008
  return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
5952
6009
  };
5953
6010
 
5954
- const componentName$u = getComponentName('phone-field-internal-input-box');
6011
+ const componentName$w = getComponentName('phone-field-internal-input-box');
5955
6012
 
5956
6013
  const observedAttributes$2 = [
5957
6014
  'disabled',
@@ -5967,7 +6024,7 @@ const mapAttrs = {
5967
6024
  'phone-input-placeholder': 'placeholder',
5968
6025
  };
5969
6026
 
5970
- const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$u, baseSelector: 'div' });
6027
+ const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$w, baseSelector: 'div' });
5971
6028
 
5972
6029
  class PhoneFieldInternal extends BaseInputClass$5 {
5973
6030
  static get observedAttributes() {
@@ -6106,13 +6163,13 @@ class PhoneFieldInternal extends BaseInputClass$5 {
6106
6163
  }
6107
6164
  }
6108
6165
 
6109
- customElements.define(componentName$u, PhoneFieldInternal);
6166
+ customElements.define(componentName$w, PhoneFieldInternal);
6110
6167
 
6111
6168
  const textVars = TextFieldClass.cssVarList;
6112
6169
 
6113
- const componentName$t = getComponentName('phone-input-box-field');
6170
+ const componentName$v = getComponentName('phone-input-box-field');
6114
6171
 
6115
- const customMixin$4 = (superclass) =>
6172
+ const customMixin$5 = (superclass) =>
6116
6173
  class PhoneInputBoxFieldMixinClass extends superclass {
6117
6174
  static get CountryCodes() {
6118
6175
  return CountryCodes;
@@ -6124,15 +6181,15 @@ const customMixin$4 = (superclass) =>
6124
6181
  const template = document.createElement('template');
6125
6182
 
6126
6183
  template.innerHTML = `
6127
- <${componentName$u}
6184
+ <${componentName$w}
6128
6185
  tabindex="-1"
6129
6186
  slot="input"
6130
- ></${componentName$u}>
6187
+ ></${componentName$w}>
6131
6188
  `;
6132
6189
 
6133
6190
  this.baseElement.appendChild(template.content.cloneNode(true));
6134
6191
 
6135
- this.inputElement = this.shadowRoot.querySelector(componentName$u);
6192
+ this.inputElement = this.shadowRoot.querySelector(componentName$w);
6136
6193
 
6137
6194
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
6138
6195
  includeAttrs: [
@@ -6199,7 +6256,7 @@ const PhoneFieldInputBoxClass = compose(
6199
6256
  }),
6200
6257
  draggableMixin,
6201
6258
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
6202
- customMixin$4
6259
+ customMixin$5
6203
6260
  )(
6204
6261
  createProxy({
6205
6262
  slots: [],
@@ -6265,26 +6322,26 @@ const PhoneFieldInputBoxClass = compose(
6265
6322
  ${resetInputLabelPosition('vaadin-text-field')}
6266
6323
  `,
6267
6324
  excludeAttrsSync: ['tabindex'],
6268
- componentName: componentName$t,
6325
+ componentName: componentName$v,
6269
6326
  })
6270
6327
  );
6271
6328
 
6272
- customElements.define(componentName$t, PhoneFieldInputBoxClass);
6329
+ customElements.define(componentName$v, PhoneFieldInputBoxClass);
6273
6330
 
6274
- const componentName$s = getComponentName('new-password-internal');
6331
+ const componentName$u = getComponentName('new-password-internal');
6275
6332
 
6276
6333
  const interpolateString = (template, values) =>
6277
6334
  template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
6278
6335
 
6279
6336
  // eslint-disable-next-line max-classes-per-file
6280
6337
 
6281
- const componentName$r = getComponentName('policy-validation');
6338
+ const componentName$t = getComponentName('policy-validation');
6282
6339
 
6283
6340
  const overrideAttrs = ['data-password-policy-value-minlength'];
6284
6341
  const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
6285
6342
  const policyAttrs = ['label', 'value', ...dataAttrs];
6286
6343
 
6287
- class RawPolicyValidation extends createBaseClass({ componentName: componentName$r, baseSelector: ':host > div' }) {
6344
+ class RawPolicyValidation extends createBaseClass({ componentName: componentName$t, baseSelector: ':host > div' }) {
6288
6345
  #availablePolicies;
6289
6346
 
6290
6347
  #activePolicies = [];
@@ -6492,11 +6549,11 @@ const PolicyValidationClass = compose(
6492
6549
  componentNameValidationMixin
6493
6550
  )(RawPolicyValidation);
6494
6551
 
6495
- const componentName$q = getComponentName('new-password');
6552
+ const componentName$s = getComponentName('new-password');
6496
6553
 
6497
6554
  const policyPreviewVars = PolicyValidationClass.cssVarList;
6498
6555
 
6499
- const customMixin$3 = (superclass) =>
6556
+ const customMixin$4 = (superclass) =>
6500
6557
  class NewPasswordMixinClass extends superclass {
6501
6558
  init() {
6502
6559
  super.init?.();
@@ -6504,19 +6561,19 @@ const customMixin$3 = (superclass) =>
6504
6561
  const template = document.createElement('template');
6505
6562
 
6506
6563
  template.innerHTML = `
6507
- <${componentName$s}
6564
+ <${componentName$u}
6508
6565
  name="new-password"
6509
6566
  tabindex="-1"
6510
6567
  slot="input"
6511
6568
  >
6512
- </${componentName$s}>
6569
+ </${componentName$u}>
6513
6570
  `;
6514
6571
 
6515
6572
  this.setAttribute('external-input', 'true');
6516
6573
 
6517
6574
  this.baseElement.appendChild(template.content.cloneNode(true));
6518
6575
 
6519
- this.inputElement = this.shadowRoot.querySelector(componentName$s);
6576
+ this.inputElement = this.shadowRoot.querySelector(componentName$u);
6520
6577
 
6521
6578
  // get descope input components
6522
6579
  this.passwordInput = this.inputElement.querySelector('[data-id="password"]');
@@ -6612,7 +6669,7 @@ const NewPasswordClass = compose(
6612
6669
  }),
6613
6670
  draggableMixin,
6614
6671
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
6615
- customMixin$3
6672
+ customMixin$4
6616
6673
  )(
6617
6674
  createProxy({
6618
6675
  slots: [],
@@ -6671,11 +6728,11 @@ const NewPasswordClass = compose(
6671
6728
  }
6672
6729
  `,
6673
6730
  excludeAttrsSync: ['tabindex'],
6674
- componentName: componentName$q,
6731
+ componentName: componentName$s,
6675
6732
  })
6676
6733
  );
6677
6734
 
6678
- customElements.define(componentName$r, PolicyValidationClass);
6735
+ customElements.define(componentName$t, PolicyValidationClass);
6679
6736
 
6680
6737
  const passwordAttrPrefixRegex = /^password-/;
6681
6738
  const confirmAttrPrefixRegex = /^confirm-/;
@@ -6705,7 +6762,7 @@ const inputRelatedAttrs = [].concat(
6705
6762
  policyPanelAttrs
6706
6763
  );
6707
6764
 
6708
- const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$s, baseSelector: 'div' });
6765
+ const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$u, baseSelector: 'div' });
6709
6766
 
6710
6767
  class NewPasswordInternal extends BaseInputClass$4 {
6711
6768
  static get observedAttributes() {
@@ -6903,16 +6960,16 @@ class NewPasswordInternal extends BaseInputClass$4 {
6903
6960
  }
6904
6961
  }
6905
6962
 
6906
- customElements.define(componentName$s, NewPasswordInternal);
6963
+ customElements.define(componentName$u, NewPasswordInternal);
6907
6964
 
6908
- customElements.define(componentName$q, NewPasswordClass);
6965
+ customElements.define(componentName$s, NewPasswordClass);
6909
6966
 
6910
- const componentName$p = getComponentName('recaptcha');
6967
+ const componentName$r = getComponentName('recaptcha');
6911
6968
 
6912
6969
  const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
6913
6970
 
6914
6971
  const BaseClass = createBaseClass({
6915
- componentName: componentName$p,
6972
+ componentName: componentName$r,
6916
6973
  baseSelector: ':host > div',
6917
6974
  });
6918
6975
  class RawRecaptcha extends BaseClass {
@@ -7082,7 +7139,7 @@ class RawRecaptcha extends BaseClass {
7082
7139
 
7083
7140
  const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
7084
7141
 
7085
- customElements.define(componentName$p, RecaptchaClass);
7142
+ customElements.define(componentName$r, RecaptchaClass);
7086
7143
 
7087
7144
  const getFileBase64 = (fileObj) => {
7088
7145
  return new Promise((resolve) => {
@@ -7096,7 +7153,7 @@ const getFilename = (fileObj) => {
7096
7153
  return fileObj.name.replace(/^.*\\/, '');
7097
7154
  };
7098
7155
 
7099
- const componentName$o = getComponentName('upload-file');
7156
+ const componentName$q = getComponentName('upload-file');
7100
7157
 
7101
7158
  const observedAttributes = [
7102
7159
  'title',
@@ -7111,7 +7168,7 @@ const observedAttributes = [
7111
7168
  'icon',
7112
7169
  ];
7113
7170
 
7114
- const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$o, baseSelector: ':host > div' });
7171
+ const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$q, baseSelector: ':host > div' });
7115
7172
 
7116
7173
  class RawUploadFile extends BaseInputClass$3 {
7117
7174
  static get observedAttributes() {
@@ -7326,7 +7383,7 @@ const UploadFileClass = compose(
7326
7383
  componentNameValidationMixin
7327
7384
  )(RawUploadFile);
7328
7385
 
7329
- customElements.define(componentName$o, UploadFileClass);
7386
+ customElements.define(componentName$q, UploadFileClass);
7330
7387
 
7331
7388
  const createBaseButtonSelectionGroupInternalClass = (componentName) => {
7332
7389
  class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
@@ -7424,10 +7481,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
7424
7481
  return BaseButtonSelectionGroupInternalClass;
7425
7482
  };
7426
7483
 
7427
- const componentName$n = getComponentName('button-selection-group-internal');
7484
+ const componentName$p = getComponentName('button-selection-group-internal');
7428
7485
 
7429
7486
  class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
7430
- componentName$n
7487
+ componentName$p
7431
7488
  ) {
7432
7489
  getSelectedNode() {
7433
7490
  return this.items.find((item) => item.hasAttribute('selected'));
@@ -7659,7 +7716,7 @@ const buttonSelectionGroupStyles = `
7659
7716
  ${resetInputCursor('vaadin-text-field')}
7660
7717
  `;
7661
7718
 
7662
- const componentName$m = getComponentName('button-selection-group');
7719
+ const componentName$o = getComponentName('button-selection-group');
7663
7720
 
7664
7721
  const buttonSelectionGroupMixin = (superclass) =>
7665
7722
  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -7668,19 +7725,19 @@ const buttonSelectionGroupMixin = (superclass) =>
7668
7725
  const template = document.createElement('template');
7669
7726
 
7670
7727
  template.innerHTML = `
7671
- <${componentName$n}
7728
+ <${componentName$p}
7672
7729
  name="button-selection-group"
7673
7730
  slot="input"
7674
7731
  tabindex="-1"
7675
7732
  part="internal-component"
7676
7733
  >
7677
7734
  <slot></slot>
7678
- </${componentName$n}>
7735
+ </${componentName$p}>
7679
7736
  `;
7680
7737
 
7681
7738
  this.baseElement.appendChild(template.content.cloneNode(true));
7682
7739
 
7683
- this.inputElement = this.shadowRoot.querySelector(componentName$n);
7740
+ this.inputElement = this.shadowRoot.querySelector(componentName$p);
7684
7741
 
7685
7742
  forwardAttrs(this, this.inputElement, {
7686
7743
  includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -7705,16 +7762,16 @@ const ButtonSelectionGroupClass = compose(
7705
7762
  wrappedEleName: 'vaadin-text-field',
7706
7763
  style: () => buttonSelectionGroupStyles,
7707
7764
  excludeAttrsSync: ['tabindex'],
7708
- componentName: componentName$m,
7765
+ componentName: componentName$o,
7709
7766
  })
7710
7767
  );
7711
7768
 
7712
- customElements.define(componentName$n, ButtonSelectionGroupInternalClass);
7769
+ customElements.define(componentName$p, ButtonSelectionGroupInternalClass);
7713
7770
 
7714
- const componentName$l = getComponentName('button-selection-group-item');
7771
+ const componentName$n = getComponentName('button-selection-group-item');
7715
7772
 
7716
7773
  class RawSelectItem extends createBaseClass({
7717
- componentName: componentName$l,
7774
+ componentName: componentName$n,
7718
7775
  baseSelector: ':host > descope-button',
7719
7776
  }) {
7720
7777
  get size() {
@@ -7821,14 +7878,14 @@ const ButtonSelectionGroupItemClass = compose(
7821
7878
  componentNameValidationMixin
7822
7879
  )(RawSelectItem);
7823
7880
 
7824
- customElements.define(componentName$l, ButtonSelectionGroupItemClass);
7881
+ customElements.define(componentName$n, ButtonSelectionGroupItemClass);
7825
7882
 
7826
- customElements.define(componentName$m, ButtonSelectionGroupClass);
7883
+ customElements.define(componentName$o, ButtonSelectionGroupClass);
7827
7884
 
7828
- const componentName$k = getComponentName('button-multi-selection-group-internal');
7885
+ const componentName$m = getComponentName('button-multi-selection-group-internal');
7829
7886
 
7830
7887
  class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
7831
- componentName$k
7888
+ componentName$m
7832
7889
  ) {
7833
7890
  #getSelectedNodes() {
7834
7891
  return this.items.filter((item) => item.hasAttribute('selected'));
@@ -7931,7 +7988,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
7931
7988
  }
7932
7989
  }
7933
7990
 
7934
- const componentName$j = getComponentName('button-multi-selection-group');
7991
+ const componentName$l = getComponentName('button-multi-selection-group');
7935
7992
 
7936
7993
  const buttonMultiSelectionGroupMixin = (superclass) =>
7937
7994
  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -7940,19 +7997,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
7940
7997
  const template = document.createElement('template');
7941
7998
 
7942
7999
  template.innerHTML = `
7943
- <${componentName$k}
8000
+ <${componentName$m}
7944
8001
  name="button-selection-group"
7945
8002
  slot="input"
7946
8003
  tabindex="-1"
7947
8004
  part="internal-component"
7948
8005
  >
7949
8006
  <slot></slot>
7950
- </${componentName$k}>
8007
+ </${componentName$m}>
7951
8008
  `;
7952
8009
 
7953
8010
  this.baseElement.appendChild(template.content.cloneNode(true));
7954
8011
 
7955
- this.inputElement = this.shadowRoot.querySelector(componentName$k);
8012
+ this.inputElement = this.shadowRoot.querySelector(componentName$m);
7956
8013
 
7957
8014
  forwardAttrs(this, this.inputElement, {
7958
8015
  includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -7977,13 +8034,13 @@ const ButtonMultiSelectionGroupClass = compose(
7977
8034
  wrappedEleName: 'vaadin-text-field',
7978
8035
  style: () => buttonSelectionGroupStyles,
7979
8036
  excludeAttrsSync: ['tabindex'],
7980
- componentName: componentName$j,
8037
+ componentName: componentName$l,
7981
8038
  })
7982
8039
  );
7983
8040
 
7984
- customElements.define(componentName$k, ButtonMultiSelectionGroupInternalClass);
8041
+ customElements.define(componentName$m, ButtonMultiSelectionGroupInternalClass);
7985
8042
 
7986
- customElements.define(componentName$j, ButtonMultiSelectionGroupClass);
8043
+ customElements.define(componentName$l, ButtonMultiSelectionGroupClass);
7987
8044
 
7988
8045
  /* eslint-disable no-param-reassign */
7989
8046
 
@@ -8011,9 +8068,9 @@ class GridTextColumnClass extends GridSortColumn {
8011
8068
  }
8012
8069
  }
8013
8070
 
8014
- const componentName$i = getComponentName('grid-text-column');
8071
+ const componentName$k = getComponentName('grid-text-column');
8015
8072
 
8016
- customElements.define(componentName$i, GridTextColumnClass);
8073
+ customElements.define(componentName$k, GridTextColumnClass);
8017
8074
 
8018
8075
  /* eslint-disable no-param-reassign */
8019
8076
 
@@ -8048,9 +8105,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
8048
8105
 
8049
8106
  /* eslint-disable no-param-reassign */
8050
8107
 
8051
- const componentName$h = getComponentName('grid-custom-column');
8108
+ const componentName$j = getComponentName('grid-custom-column');
8052
8109
 
8053
- customElements.define(componentName$h, GridCustomColumnClass);
8110
+ customElements.define(componentName$j, GridCustomColumnClass);
8054
8111
 
8055
8112
  const createCheckboxEle = () => {
8056
8113
  const checkbox = document.createElement('descope-checkbox');
@@ -8109,9 +8166,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
8109
8166
  }
8110
8167
  }
8111
8168
 
8112
- const componentName$g = getComponentName('grid-selection-column');
8169
+ const componentName$i = getComponentName('grid-selection-column');
8113
8170
 
8114
- customElements.define(componentName$g, GridSelectionColumnClass);
8171
+ customElements.define(componentName$i, GridSelectionColumnClass);
8115
8172
 
8116
8173
  const isValidDataType = (data) => {
8117
8174
  const isValid = Array.isArray(data);
@@ -8123,7 +8180,7 @@ const isValidDataType = (data) => {
8123
8180
  return isValid;
8124
8181
  };
8125
8182
 
8126
- const componentName$f = getComponentName('grid');
8183
+ const componentName$h = getComponentName('grid');
8127
8184
 
8128
8185
  const GridMixin = (superclass) =>
8129
8186
  class GridMixinClass extends superclass {
@@ -8359,13 +8416,13 @@ const GridClass = compose(
8359
8416
  }
8360
8417
  `,
8361
8418
  excludeAttrsSync: ['columns', 'tabindex'],
8362
- componentName: componentName$f,
8419
+ componentName: componentName$h,
8363
8420
  })
8364
8421
  );
8365
8422
 
8366
- customElements.define(componentName$f, GridClass);
8423
+ customElements.define(componentName$h, GridClass);
8367
8424
 
8368
- const componentName$e = getComponentName('multi-select-combo-box');
8425
+ const componentName$g = getComponentName('multi-select-combo-box');
8369
8426
 
8370
8427
  const multiSelectComboBoxMixin = (superclass) =>
8371
8428
  class MultiSelectComboBoxMixinClass extends superclass {
@@ -8969,16 +9026,16 @@ const MultiSelectComboBoxClass = compose(
8969
9026
  // Note: we exclude `placeholder` because the vaadin component observes it and
8970
9027
  // tries to override it, causing us to lose the user set placeholder.
8971
9028
  excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
8972
- componentName: componentName$e,
9029
+ componentName: componentName$g,
8973
9030
  includeForwardProps: ['items', 'renderer', 'selectedItems'],
8974
9031
  })
8975
9032
  );
8976
9033
 
8977
- customElements.define(componentName$e, MultiSelectComboBoxClass);
9034
+ customElements.define(componentName$g, MultiSelectComboBoxClass);
8978
9035
 
8979
- const componentName$d = getComponentName('badge');
9036
+ const componentName$f = getComponentName('badge');
8980
9037
 
8981
- class RawBadge extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > div' }) {
9038
+ class RawBadge extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > div' }) {
8982
9039
  constructor() {
8983
9040
  super();
8984
9041
 
@@ -9029,11 +9086,11 @@ const BadgeClass = compose(
9029
9086
  componentNameValidationMixin
9030
9087
  )(RawBadge);
9031
9088
 
9032
- customElements.define(componentName$d, BadgeClass);
9089
+ customElements.define(componentName$f, BadgeClass);
9033
9090
 
9034
- const componentName$c = getComponentName('modal');
9091
+ const componentName$e = getComponentName('modal');
9035
9092
 
9036
- const customMixin$2 = (superclass) =>
9093
+ const customMixin$3 = (superclass) =>
9037
9094
  class ModalMixinClass extends superclass {
9038
9095
  get opened() {
9039
9096
  return this.getAttribute('opened') === 'true';
@@ -9123,18 +9180,18 @@ const ModalClass = compose(
9123
9180
  }),
9124
9181
  draggableMixin,
9125
9182
  componentNameValidationMixin,
9126
- customMixin$2
9183
+ customMixin$3
9127
9184
  )(
9128
9185
  createProxy({
9129
9186
  slots: [''],
9130
9187
  wrappedEleName: 'vaadin-dialog',
9131
9188
  style: () => ``,
9132
9189
  excludeAttrsSync: ['tabindex', 'opened'],
9133
- componentName: componentName$c,
9190
+ componentName: componentName$e,
9134
9191
  })
9135
9192
  );
9136
9193
 
9137
- customElements.define(componentName$c, ModalClass);
9194
+ customElements.define(componentName$e, ModalClass);
9138
9195
 
9139
9196
  const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
9140
9197
 
@@ -9145,7 +9202,7 @@ if (!vaadinContainerClass) {
9145
9202
  class NotificationContainerClass extends vaadinContainerClass {}
9146
9203
  customElements.define(getComponentName('notification-container'), NotificationContainerClass);
9147
9204
 
9148
- const componentName$b = getComponentName('notification-card');
9205
+ const componentName$d = getComponentName('notification-card');
9149
9206
 
9150
9207
  const notificationCardMixin = (superclass) =>
9151
9208
  class NotificationCardMixinClass extends superclass {
@@ -9253,13 +9310,13 @@ const NotificationCardClass = compose(
9253
9310
  }
9254
9311
  `,
9255
9312
  excludeAttrsSync: ['tabindex'],
9256
- componentName: componentName$b,
9313
+ componentName: componentName$d,
9257
9314
  })
9258
9315
  );
9259
9316
 
9260
- customElements.define(componentName$b, NotificationCardClass);
9317
+ customElements.define(componentName$d, NotificationCardClass);
9261
9318
 
9262
- const componentName$a = getComponentName('notification');
9319
+ const componentName$c = getComponentName('notification');
9263
9320
 
9264
9321
  const NotificationMixin = (superclass) =>
9265
9322
  class NotificationMixinClass extends superclass {
@@ -9354,14 +9411,14 @@ const NotificationClass = compose(
9354
9411
  createProxy({
9355
9412
  wrappedEleName: 'vaadin-notification',
9356
9413
  excludeAttrsSync: ['tabindex'],
9357
- componentName: componentName$a,
9414
+ componentName: componentName$c,
9358
9415
  })
9359
9416
  );
9360
9417
 
9361
- customElements.define(componentName$a, NotificationClass);
9418
+ customElements.define(componentName$c, NotificationClass);
9362
9419
 
9363
- const componentName$9 = getComponentName('avatar');
9364
- class RawAvatar extends createBaseClass({ componentName: componentName$9, baseSelector: ':host > .wrapper' }) {
9420
+ const componentName$b = getComponentName('avatar');
9421
+ class RawAvatar extends createBaseClass({ componentName: componentName$b, baseSelector: ':host > .wrapper' }) {
9365
9422
  constructor() {
9366
9423
  super();
9367
9424
 
@@ -9462,13 +9519,13 @@ const AvatarClass = compose(
9462
9519
  componentNameValidationMixin
9463
9520
  )(RawAvatar);
9464
9521
 
9465
- customElements.define(componentName$9, AvatarClass);
9522
+ customElements.define(componentName$b, AvatarClass);
9466
9523
 
9467
- customElements.define(componentName$U, IconClass);
9524
+ customElements.define(componentName$W, IconClass);
9468
9525
 
9469
- const componentName$8 = getComponentName('mappings-field-internal');
9526
+ const componentName$a = getComponentName('mappings-field-internal');
9470
9527
 
9471
- const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$8, baseSelector: 'div' });
9528
+ const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
9472
9529
 
9473
9530
  class MappingsFieldInternal extends BaseInputClass$2 {
9474
9531
  #errorItem;
@@ -9703,9 +9760,9 @@ class MappingsFieldInternal extends BaseInputClass$2 {
9703
9760
  }
9704
9761
  }
9705
9762
 
9706
- const componentName$7 = getComponentName('mappings-field');
9763
+ const componentName$9 = getComponentName('mappings-field');
9707
9764
 
9708
- const customMixin$1 = (superclass) =>
9765
+ const customMixin$2 = (superclass) =>
9709
9766
  class MappingsFieldMixinClass extends superclass {
9710
9767
  get defaultValues() {
9711
9768
  const defaultValuesAttr = this.getAttribute('default-values');
@@ -9732,14 +9789,14 @@ const customMixin$1 = (superclass) =>
9732
9789
  const template = document.createElement('template');
9733
9790
 
9734
9791
  template.innerHTML = `
9735
- <${componentName$8}
9792
+ <${componentName$a}
9736
9793
  tabindex="-1"
9737
- ></${componentName$8}>
9794
+ ></${componentName$a}>
9738
9795
  `;
9739
9796
 
9740
9797
  this.baseElement.appendChild(template.content.cloneNode(true));
9741
9798
 
9742
- this.inputElement = this.shadowRoot.querySelector(componentName$8);
9799
+ this.inputElement = this.shadowRoot.querySelector(componentName$a);
9743
9800
 
9744
9801
  forwardAttrs(this, this.inputElement, {
9745
9802
  includeAttrs: [
@@ -9821,7 +9878,7 @@ const MappingsFieldClass = compose(
9821
9878
  proxyParentValidation: true,
9822
9879
  }),
9823
9880
  componentNameValidationMixin,
9824
- customMixin$1
9881
+ customMixin$2
9825
9882
  )(
9826
9883
  createProxy({
9827
9884
  slots: [],
@@ -9868,17 +9925,17 @@ const MappingsFieldClass = compose(
9868
9925
  'options',
9869
9926
  'error-message',
9870
9927
  ],
9871
- componentName: componentName$7,
9928
+ componentName: componentName$9,
9872
9929
  })
9873
9930
  );
9874
9931
 
9875
- customElements.define(componentName$8, MappingsFieldInternal);
9932
+ customElements.define(componentName$a, MappingsFieldInternal);
9876
9933
 
9877
- const componentName$6 = getComponentName('mapping-item');
9934
+ const componentName$8 = getComponentName('mapping-item');
9878
9935
 
9879
9936
  const inputAttrs = ['size', 'bordered', 'readonly', 'full-width', 'disabled'];
9880
9937
 
9881
- const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$6, baseSelector: 'div' });
9938
+ const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$8, baseSelector: 'div' });
9882
9939
 
9883
9940
  class MappingItem extends BaseInputClass$1 {
9884
9941
  static get observedAttributes() {
@@ -10028,17 +10085,17 @@ class MappingItem extends BaseInputClass$1 {
10028
10085
  }
10029
10086
  }
10030
10087
 
10031
- customElements.define(componentName$6, MappingItem);
10088
+ customElements.define(componentName$8, MappingItem);
10032
10089
 
10033
- customElements.define(componentName$7, MappingsFieldClass);
10090
+ customElements.define(componentName$9, MappingsFieldClass);
10034
10091
 
10035
10092
  var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
10036
10093
 
10037
10094
  var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
10038
10095
 
10039
- const componentName$5 = getComponentName('user-attribute');
10096
+ const componentName$7 = getComponentName('user-attribute');
10040
10097
  class RawUserAttribute extends createBaseClass({
10041
- componentName: componentName$5,
10098
+ componentName: componentName$7,
10042
10099
  baseSelector: ':host > .root',
10043
10100
  }) {
10044
10101
  constructor() {
@@ -10268,13 +10325,13 @@ const UserAttributeClass = compose(
10268
10325
  componentNameValidationMixin
10269
10326
  )(RawUserAttribute);
10270
10327
 
10271
- customElements.define(componentName$5, UserAttributeClass);
10328
+ customElements.define(componentName$7, UserAttributeClass);
10272
10329
 
10273
10330
  var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
10274
10331
 
10275
- const componentName$4 = getComponentName('user-auth-method');
10332
+ const componentName$6 = getComponentName('user-auth-method');
10276
10333
  class RawUserAuthMethod extends createBaseClass({
10277
- componentName: componentName$4,
10334
+ componentName: componentName$6,
10278
10335
  baseSelector: ':host > .root',
10279
10336
  }) {
10280
10337
  constructor() {
@@ -10466,11 +10523,11 @@ const UserAuthMethodClass = compose(
10466
10523
  componentNameValidationMixin
10467
10524
  )(RawUserAuthMethod);
10468
10525
 
10469
- customElements.define(componentName$4, UserAuthMethodClass);
10526
+ customElements.define(componentName$6, UserAuthMethodClass);
10470
10527
 
10471
- const componentName$3 = getComponentName('saml-group-mappings-internal');
10528
+ const componentName$5 = getComponentName('saml-group-mappings-internal');
10472
10529
 
10473
- const BaseInputClass = createBaseInputClass({ componentName: componentName$3, baseSelector: '' });
10530
+ const BaseInputClass = createBaseInputClass({ componentName: componentName$5, baseSelector: '' });
10474
10531
 
10475
10532
  class SamlGroupMappingsInternal extends BaseInputClass {
10476
10533
  static get observedAttributes() {
@@ -10596,9 +10653,9 @@ class SamlGroupMappingsInternal extends BaseInputClass {
10596
10653
  }
10597
10654
  }
10598
10655
 
10599
- const componentName$2 = getComponentName('saml-group-mappings');
10656
+ const componentName$4 = getComponentName('saml-group-mappings');
10600
10657
 
10601
- const customMixin = (superclass) =>
10658
+ const customMixin$1 = (superclass) =>
10602
10659
  class SamlGroupMappingsMixinClass extends superclass {
10603
10660
  init() {
10604
10661
  super.init?.();
@@ -10606,14 +10663,14 @@ const customMixin = (superclass) =>
10606
10663
  const template = document.createElement('template');
10607
10664
 
10608
10665
  template.innerHTML = `
10609
- <${componentName$3}
10666
+ <${componentName$5}
10610
10667
  tabindex="-1"
10611
- ></${componentName$3}>
10668
+ ></${componentName$5}>
10612
10669
  `;
10613
10670
 
10614
10671
  this.baseElement.appendChild(template.content.cloneNode(true));
10615
10672
 
10616
- this.inputElement = this.shadowRoot.querySelector(componentName$3);
10673
+ this.inputElement = this.shadowRoot.querySelector(componentName$5);
10617
10674
 
10618
10675
  forwardAttrs(this, this.inputElement, {
10619
10676
  includeAttrs: [
@@ -10655,7 +10712,7 @@ const SamlGroupMappingsClass = compose(
10655
10712
  proxyParentValidation: true,
10656
10713
  }),
10657
10714
  componentNameValidationMixin,
10658
- customMixin
10715
+ customMixin$1
10659
10716
  )(
10660
10717
  createProxy({
10661
10718
  slots: [],
@@ -10690,13 +10747,13 @@ const SamlGroupMappingsClass = compose(
10690
10747
  'options',
10691
10748
  'error-message',
10692
10749
  ],
10693
- componentName: componentName$2,
10750
+ componentName: componentName$4,
10694
10751
  })
10695
10752
  );
10696
10753
 
10697
- customElements.define(componentName$3, SamlGroupMappingsInternal);
10754
+ customElements.define(componentName$5, SamlGroupMappingsInternal);
10698
10755
 
10699
- customElements.define(componentName$2, SamlGroupMappingsClass);
10756
+ customElements.define(componentName$4, SamlGroupMappingsClass);
10700
10757
 
10701
10758
  const decode = (input) => {
10702
10759
  const txt = document.createElement('textarea');
@@ -10708,9 +10765,9 @@ const tpl = (input, inline) => {
10708
10765
  return inline ? input : `<pre>${input}</pre>`;
10709
10766
  };
10710
10767
 
10711
- const componentName$1 = getComponentName('code-snippet');
10768
+ const componentName$3 = getComponentName('code-snippet');
10712
10769
 
10713
- let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$1, baseSelector: ':host > code' }) {
10770
+ let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$3, baseSelector: ':host > code' }) {
10714
10771
  static get observedAttributes() {
10715
10772
  return ['lang', 'inline'];
10716
10773
  }
@@ -10940,7 +10997,251 @@ const CodeSnippetClass = compose(
10940
10997
  componentNameValidationMixin
10941
10998
  )(CodeSnippet$1);
10942
10999
 
10943
- customElements.define(componentName$1, CodeSnippetClass);
11000
+ customElements.define(componentName$3, CodeSnippetClass);
11001
+
11002
+ const componentName$2 = getComponentName('radio-button');
11003
+
11004
+ const customMixin = (superclass) =>
11005
+ class CustomMixin extends superclass {
11006
+ constructor() {
11007
+ super();
11008
+
11009
+ this.baseElement.checkValidity = () => {};
11010
+ }
11011
+
11012
+ init() {
11013
+ // we are forwarding vaadin checked-changed event
11014
+ this.baseElement.addEventListener('checked-changed', (e) => {
11015
+ this.dispatchEvent(
11016
+ new CustomEvent(
11017
+ 'checked-changed',
11018
+ { detail: e.detail },
11019
+ { bubbles: true, composed: true }
11020
+ )
11021
+ );
11022
+ });
11023
+
11024
+ super.init?.();
11025
+
11026
+ observeChildren(this, this.renderLabel.bind(this));
11027
+ }
11028
+
11029
+ renderLabel() {
11030
+ this.baseElement.setAttribute('label', this.textContent);
11031
+ }
11032
+
11033
+ get value() {
11034
+ return this.getAttribute('value');
11035
+ }
11036
+ };
11037
+
11038
+ const RadioButtonClass = compose(
11039
+ createStyleMixin({
11040
+ mappings: {
11041
+ cursor: [{}, { selector: 'label' }],
11042
+ fontSize: [{ selector: 'label' }, {}],
11043
+ labelTextColor: { selector: 'label', property: 'color' },
11044
+ fontFamily: { selector: 'label' },
11045
+ radioSize: [
11046
+ { selector: '::part(radio)', property: 'height' },
11047
+ { selector: '::part(radio)', property: 'width' },
11048
+ ],
11049
+ radioBackgroundColor: { selector: '::part(radio)', property: 'background-color' },
11050
+ radioMargin: { selector: '::part(radio)', property: 'margin' },
11051
+ radioCheckedSize: { selector: '::part(radio)::after', property: 'border-width' },
11052
+ radioCheckedColor: { selector: '::part(radio)::after', property: 'border-color' },
11053
+ },
11054
+ }),
11055
+ composedProxyInputMixin({ proxyProps: ['setSelectionRange'] }),
11056
+ componentNameValidationMixin,
11057
+ customMixin
11058
+ )(
11059
+ createProxy({
11060
+ slots: [''],
11061
+ wrappedEleName: 'vaadin-radio-button',
11062
+ excludeAttrsSync: ['tabindex', 'data'],
11063
+ includeForwardProps: ['checked', 'name', 'disabled'],
11064
+ componentName: componentName$2,
11065
+ })
11066
+ );
11067
+
11068
+ const componentName$1 = getComponentName('radio-group');
11069
+
11070
+ const RadioGroupMixin = (superclass) =>
11071
+ class RadioGroupMixinClass extends superclass {
11072
+ // eslint-disable-next-line class-methods-use-this
11073
+ #renderItem = ({ value, label }) =>
11074
+ `<descope-radio-button value="${value}">${label}</descope-radio-button>`;
11075
+
11076
+ #data;
11077
+
11078
+ constructor() {
11079
+ super();
11080
+
11081
+ // we are overriding vaadin children getter so it will run on our custom elements
11082
+ Object.defineProperty(this.baseElement, 'children', {
11083
+ get: () => this.querySelectorAll(componentName$2),
11084
+ });
11085
+
11086
+ // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
11087
+ this.baseElement.__filterRadioButtons = (nodes) => {
11088
+ return nodes.filter((node) => node.localName === componentName$2);
11089
+ };
11090
+
11091
+ // vaadin radio group missing some input properties
11092
+ this.baseElement.setCustomValidity = () => {};
11093
+ }
11094
+
11095
+ get items() {
11096
+ return this.shadowRoot.querySelector('slot').assignedElements();
11097
+ }
11098
+
11099
+ get size() {
11100
+ return this.getAttribute('size');
11101
+ }
11102
+
11103
+ get data() {
11104
+ if (this.#data) return this.#data;
11105
+
11106
+ const dataAttr = this.getAttribute('data');
11107
+
11108
+ if (dataAttr) {
11109
+ try {
11110
+ const data = JSON.parse(dataAttr);
11111
+ if (this.isValidDataType(data)) {
11112
+ return data;
11113
+ }
11114
+ } catch (e) {
11115
+ // eslint-disable-next-line no-console
11116
+ console.error('could not parse data string from attribute "data" - ', e.message);
11117
+ }
11118
+ }
11119
+
11120
+ return [];
11121
+ }
11122
+
11123
+ set data(data) {
11124
+ if (this.isValidDataType(data)) {
11125
+ this.#data = data;
11126
+ this.renderItems();
11127
+ }
11128
+ }
11129
+
11130
+ get defaultValue() {
11131
+ return this.getAttribute('default-value');
11132
+ }
11133
+
11134
+ // eslint-disable-next-line class-methods-use-this
11135
+ isValidDataType(data) {
11136
+ const isValid = Array.isArray(data);
11137
+ if (!isValid) {
11138
+ // eslint-disable-next-line no-console
11139
+ console.error('data must be an array, received:', data);
11140
+ }
11141
+
11142
+ return isValid;
11143
+ }
11144
+
11145
+ getItemsTemplate() {
11146
+ return this.data?.reduce?.((acc, item) => acc + (this.#renderItem?.(item || {}) || ''), '');
11147
+ }
11148
+
11149
+ renderItems() {
11150
+ const template = this.getItemsTemplate();
11151
+ if (template) this.innerHTML = template;
11152
+ }
11153
+
11154
+ init() {
11155
+ super.init?.();
11156
+
11157
+ this.inputElement = this.baseElement;
11158
+
11159
+ this.renderItems();
11160
+
11161
+ observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
11162
+
11163
+ Object.defineProperty(this.baseElement, 'validity', {
11164
+ get: () => {
11165
+ return { valueMissing: !this.baseElement.checkValidity() };
11166
+ },
11167
+ });
11168
+
11169
+ forwardAttrs(this, this.baseElement, {
11170
+ includeAttrs: ['layout'],
11171
+ mapAttrs: { layout: 'theme' },
11172
+ });
11173
+
11174
+ setTimeout(() => {
11175
+ if (this.defaultValue) {
11176
+ this.value = this.defaultValue;
11177
+ }
11178
+ });
11179
+
11180
+ // we want new items to get the size
11181
+ observeChildren(this, ({ addedNodes }) => {
11182
+ addedNodes.forEach((node) => {
11183
+ node.setAttribute('size', this.size);
11184
+ });
11185
+ });
11186
+
11187
+ observeAttributes(
11188
+ this,
11189
+ () => {
11190
+ this.items.forEach((item) => {
11191
+ item.setAttribute('size', this.size);
11192
+ });
11193
+ },
11194
+ {
11195
+ includeAttrs: ['size'],
11196
+ }
11197
+ );
11198
+ }
11199
+ };
11200
+
11201
+ const RadioGroupClass = compose(
11202
+ createStyleMixin({
11203
+ mappings: {
11204
+ ...textFieldMappings,
11205
+ buttonsSpacing: { selector: '::part(group-field)', property: 'justify-content' },
11206
+ buttonsRowGap: { selector: '::part(group-field)', property: 'row-gap' },
11207
+ buttonsColumnGap: { selector: '::part(group-field)', property: 'column-gap' },
11208
+ itemsLabelColor: {
11209
+ selector: () => `::slotted(${RadioButtonClass.componentName})`,
11210
+ property: RadioButtonClass.cssVarList.labelTextColor,
11211
+ },
11212
+ },
11213
+ }),
11214
+ draggableMixin,
11215
+ composedProxyInputMixin({ proxyProps: ['setSelectionRange'] }),
11216
+ componentNameValidationMixin,
11217
+ RadioGroupMixin
11218
+ )(
11219
+ createProxy({
11220
+ slots: ['', 'prefix'],
11221
+ wrappedEleName: 'vaadin-radio-group',
11222
+ style: () => `
11223
+ :host {
11224
+ display: inline-block;
11225
+ max-width: 100%;
11226
+ box-sizing: border-box;
11227
+ }
11228
+
11229
+ vaadin-radio-group {
11230
+ padding: 0;
11231
+ width: 100%;
11232
+ }
11233
+
11234
+ ${resetInputLabelPosition('vaadin-radio-group')}
11235
+ `,
11236
+
11237
+ excludeAttrsSync: ['tabindex', 'size', 'data', 'direction'],
11238
+ componentName: componentName$1,
11239
+ includeForwardProps: ['value'],
11240
+ })
11241
+ );
11242
+
11243
+ customElements.define(componentName$1, RadioGroupClass);
11244
+ customElements.define(componentName$2, RadioButtonClass);
10944
11245
 
10945
11246
  const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
10946
11247
 
@@ -11372,33 +11673,33 @@ const globals = {
11372
11673
  fonts,
11373
11674
  direction,
11374
11675
  };
11375
- const vars$H = getThemeVars(globals);
11676
+ const vars$J = getThemeVars(globals);
11376
11677
 
11377
- const globalRefs$p = getThemeRefs(globals);
11678
+ const globalRefs$r = getThemeRefs(globals);
11378
11679
  const compVars$5 = ButtonClass.cssVarList;
11379
11680
 
11380
11681
  const mode = {
11381
- primary: globalRefs$p.colors.primary,
11382
- secondary: globalRefs$p.colors.secondary,
11383
- success: globalRefs$p.colors.success,
11384
- error: globalRefs$p.colors.error,
11385
- surface: globalRefs$p.colors.surface,
11682
+ primary: globalRefs$r.colors.primary,
11683
+ secondary: globalRefs$r.colors.secondary,
11684
+ success: globalRefs$r.colors.success,
11685
+ error: globalRefs$r.colors.error,
11686
+ surface: globalRefs$r.colors.surface,
11386
11687
  };
11387
11688
 
11388
- const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$T);
11689
+ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$V);
11389
11690
 
11390
11691
  const button = {
11391
11692
  ...helperTheme$3,
11392
11693
 
11393
- [compVars$5.fontFamily]: globalRefs$p.fonts.font1.family,
11694
+ [compVars$5.fontFamily]: globalRefs$r.fonts.font1.family,
11394
11695
 
11395
11696
  [compVars$5.cursor]: 'pointer',
11396
11697
  [compVars$5.hostHeight]: '3em',
11397
11698
  [compVars$5.hostWidth]: 'auto',
11398
- [compVars$5.hostDirection]: globalRefs$p.direction,
11699
+ [compVars$5.hostDirection]: globalRefs$r.direction,
11399
11700
 
11400
- [compVars$5.borderRadius]: globalRefs$p.radius.sm,
11401
- [compVars$5.borderWidth]: globalRefs$p.border.xs,
11701
+ [compVars$5.borderRadius]: globalRefs$r.radius.sm,
11702
+ [compVars$5.borderWidth]: globalRefs$r.border.xs,
11402
11703
  [compVars$5.borderStyle]: 'solid',
11403
11704
  [compVars$5.borderColor]: 'transparent',
11404
11705
 
@@ -11441,11 +11742,11 @@ const button = {
11441
11742
  },
11442
11743
 
11443
11744
  _disabled: {
11444
- [helperVars$3.main]: globalRefs$p.colors.surface.light,
11445
- [helperVars$3.dark]: globalRefs$p.colors.surface.dark,
11446
- [helperVars$3.light]: globalRefs$p.colors.surface.light,
11447
- [helperVars$3.contrast]: globalRefs$p.colors.surface.main,
11448
- [compVars$5.iconColor]: globalRefs$p.colors.surface.main,
11745
+ [helperVars$3.main]: globalRefs$r.colors.surface.light,
11746
+ [helperVars$3.dark]: globalRefs$r.colors.surface.dark,
11747
+ [helperVars$3.light]: globalRefs$r.colors.surface.light,
11748
+ [helperVars$3.contrast]: globalRefs$r.colors.surface.main,
11749
+ [compVars$5.iconColor]: globalRefs$r.colors.surface.main,
11449
11750
  },
11450
11751
 
11451
11752
  variant: {
@@ -11493,7 +11794,7 @@ const button = {
11493
11794
  },
11494
11795
  };
11495
11796
 
11496
- const vars$G = {
11797
+ const vars$I = {
11497
11798
  ...compVars$5,
11498
11799
  ...helperVars$3,
11499
11800
  };
@@ -11501,28 +11802,28 @@ const vars$G = {
11501
11802
  var button$1 = /*#__PURE__*/Object.freeze({
11502
11803
  __proto__: null,
11503
11804
  default: button,
11504
- vars: vars$G
11805
+ vars: vars$I
11505
11806
  });
11506
11807
 
11507
11808
  const componentName = getComponentName('input-wrapper');
11508
- const globalRefs$o = getThemeRefs(globals);
11809
+ const globalRefs$q = getThemeRefs(globals);
11509
11810
 
11510
- const [theme$1, refs, vars$F] = createHelperVars(
11811
+ const [theme$1, refs, vars$H] = createHelperVars(
11511
11812
  {
11512
- labelTextColor: globalRefs$o.colors.surface.dark,
11813
+ labelTextColor: globalRefs$q.colors.surface.dark,
11513
11814
  labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
11514
- valueTextColor: globalRefs$o.colors.surface.contrast,
11515
- placeholderTextColor: globalRefs$o.colors.surface.dark,
11815
+ valueTextColor: globalRefs$q.colors.surface.contrast,
11816
+ placeholderTextColor: globalRefs$q.colors.surface.dark,
11516
11817
  requiredIndicator: "'*'",
11517
- helperTextColor: globalRefs$o.colors.surface.dark,
11518
- errorMessageTextColor: globalRefs$o.colors.error.main,
11519
- successMessageTextColor: globalRefs$o.colors.success.main,
11818
+ helperTextColor: globalRefs$q.colors.surface.dark,
11819
+ errorMessageTextColor: globalRefs$q.colors.error.main,
11820
+ successMessageTextColor: globalRefs$q.colors.success.main,
11520
11821
 
11521
- borderWidth: globalRefs$o.border.xs,
11522
- borderRadius: globalRefs$o.radius.xs,
11822
+ borderWidth: globalRefs$q.border.xs,
11823
+ borderRadius: globalRefs$q.radius.xs,
11523
11824
  borderColor: 'transparent',
11524
11825
 
11525
- outlineWidth: globalRefs$o.border.sm,
11826
+ outlineWidth: globalRefs$q.border.sm,
11526
11827
  outlineStyle: 'solid',
11527
11828
  outlineColor: 'transparent',
11528
11829
  outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -11533,11 +11834,11 @@ const [theme$1, refs, vars$F] = createHelperVars(
11533
11834
  horizontalPadding: '0.5em',
11534
11835
  verticalPadding: '0.5em',
11535
11836
 
11536
- backgroundColor: globalRefs$o.colors.surface.main,
11837
+ backgroundColor: globalRefs$q.colors.surface.main,
11537
11838
 
11538
- fontFamily: globalRefs$o.fonts.font1.family,
11839
+ fontFamily: globalRefs$q.fonts.font1.family,
11539
11840
 
11540
- direction: globalRefs$o.direction,
11841
+ direction: globalRefs$q.direction,
11541
11842
 
11542
11843
  overlayOpacity: '0.3',
11543
11844
 
@@ -11553,28 +11854,28 @@ const [theme$1, refs, vars$F] = createHelperVars(
11553
11854
  },
11554
11855
 
11555
11856
  _focused: {
11556
- outlineColor: globalRefs$o.colors.surface.light,
11857
+ outlineColor: globalRefs$q.colors.surface.light,
11557
11858
  _invalid: {
11558
- outlineColor: globalRefs$o.colors.error.main,
11859
+ outlineColor: globalRefs$q.colors.error.main,
11559
11860
  },
11560
11861
  },
11561
11862
 
11562
11863
  _bordered: {
11563
- outlineWidth: globalRefs$o.border.xs,
11564
- borderColor: globalRefs$o.colors.surface.light,
11864
+ outlineWidth: globalRefs$q.border.xs,
11865
+ borderColor: globalRefs$q.colors.surface.light,
11565
11866
  borderStyle: 'solid',
11566
11867
  _invalid: {
11567
- borderColor: globalRefs$o.colors.error.main,
11868
+ borderColor: globalRefs$q.colors.error.main,
11568
11869
  },
11569
11870
  },
11570
11871
 
11571
11872
  _disabled: {
11572
- labelTextColor: globalRefs$o.colors.surface.light,
11573
- borderColor: globalRefs$o.colors.surface.light,
11574
- valueTextColor: globalRefs$o.colors.surface.light,
11575
- placeholderTextColor: globalRefs$o.colors.surface.light,
11576
- helperTextColor: globalRefs$o.colors.surface.light,
11577
- backgroundColor: globalRefs$o.colors.surface.main,
11873
+ labelTextColor: globalRefs$q.colors.surface.light,
11874
+ borderColor: globalRefs$q.colors.surface.light,
11875
+ valueTextColor: globalRefs$q.colors.surface.light,
11876
+ placeholderTextColor: globalRefs$q.colors.surface.light,
11877
+ helperTextColor: globalRefs$q.colors.surface.light,
11878
+ backgroundColor: globalRefs$q.colors.surface.main,
11578
11879
  },
11579
11880
  },
11580
11881
  componentName
@@ -11584,19 +11885,92 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
11584
11885
  __proto__: null,
11585
11886
  default: theme$1,
11586
11887
  refs: refs,
11587
- vars: vars$F
11888
+ vars: vars$H
11588
11889
  });
11589
11890
 
11590
- const vars$E = TextFieldClass.cssVarList;
11891
+ const vars$G = TextFieldClass.cssVarList;
11591
11892
 
11592
11893
  const textField = {
11593
- [vars$E.hostWidth]: refs.width,
11894
+ [vars$G.hostWidth]: refs.width,
11895
+ [vars$G.hostMinWidth]: refs.minWidth,
11896
+ [vars$G.hostDirection]: refs.direction,
11897
+ [vars$G.fontSize]: refs.fontSize,
11898
+ [vars$G.fontFamily]: refs.fontFamily,
11899
+ [vars$G.labelTextColor]: refs.labelTextColor,
11900
+ [vars$G.labelRequiredIndicator]: refs.requiredIndicator,
11901
+ [vars$G.errorMessageTextColor]: refs.errorMessageTextColor,
11902
+ [vars$G.inputValueTextColor]: refs.valueTextColor,
11903
+ [vars$G.inputPlaceholderColor]: refs.placeholderTextColor,
11904
+ [vars$G.inputBorderWidth]: refs.borderWidth,
11905
+ [vars$G.inputBorderStyle]: refs.borderStyle,
11906
+ [vars$G.inputBorderColor]: refs.borderColor,
11907
+ [vars$G.inputBorderRadius]: refs.borderRadius,
11908
+ [vars$G.inputOutlineWidth]: refs.outlineWidth,
11909
+ [vars$G.inputOutlineStyle]: refs.outlineStyle,
11910
+ [vars$G.inputOutlineColor]: refs.outlineColor,
11911
+ [vars$G.inputOutlineOffset]: refs.outlineOffset,
11912
+ [vars$G.inputBackgroundColor]: refs.backgroundColor,
11913
+ [vars$G.inputHeight]: refs.inputHeight,
11914
+ [vars$G.inputHorizontalPadding]: refs.horizontalPadding,
11915
+ [vars$G.helperTextColor]: refs.helperTextColor,
11916
+ textAlign: {
11917
+ right: { [vars$G.inputTextAlign]: 'right' },
11918
+ left: { [vars$G.inputTextAlign]: 'left' },
11919
+ center: { [vars$G.inputTextAlign]: 'center' },
11920
+ },
11921
+ };
11922
+
11923
+ var textField$1 = /*#__PURE__*/Object.freeze({
11924
+ __proto__: null,
11925
+ default: textField,
11926
+ textField: textField,
11927
+ vars: vars$G
11928
+ });
11929
+
11930
+ const globalRefs$p = getThemeRefs(globals);
11931
+ const vars$F = PasswordClass.cssVarList;
11932
+
11933
+ const password = {
11934
+ [vars$F.hostWidth]: refs.width,
11935
+ [vars$F.hostDirection]: refs.direction,
11936
+ [vars$F.fontSize]: refs.fontSize,
11937
+ [vars$F.fontFamily]: refs.fontFamily,
11938
+ [vars$F.labelTextColor]: refs.labelTextColor,
11939
+ [vars$F.errorMessageTextColor]: refs.errorMessageTextColor,
11940
+ [vars$F.inputHorizontalPadding]: refs.horizontalPadding,
11941
+ [vars$F.inputHeight]: refs.inputHeight,
11942
+ [vars$F.inputBackgroundColor]: refs.backgroundColor,
11943
+ [vars$F.labelRequiredIndicator]: refs.requiredIndicator,
11944
+ [vars$F.inputValueTextColor]: refs.valueTextColor,
11945
+ [vars$F.inputPlaceholderTextColor]: refs.placeholderTextColor,
11946
+ [vars$F.inputBorderWidth]: refs.borderWidth,
11947
+ [vars$F.inputBorderStyle]: refs.borderStyle,
11948
+ [vars$F.inputBorderColor]: refs.borderColor,
11949
+ [vars$F.inputBorderRadius]: refs.borderRadius,
11950
+ [vars$F.inputOutlineWidth]: refs.outlineWidth,
11951
+ [vars$F.inputOutlineStyle]: refs.outlineStyle,
11952
+ [vars$F.inputOutlineColor]: refs.outlineColor,
11953
+ [vars$F.inputOutlineOffset]: refs.outlineOffset,
11954
+ [vars$F.revealButtonOffset]: globalRefs$p.spacing.md,
11955
+ [vars$F.revealButtonSize]: refs.toggleButtonSize,
11956
+ [vars$F.revealButtonColor]: refs.placeholderTextColor,
11957
+ };
11958
+
11959
+ var password$1 = /*#__PURE__*/Object.freeze({
11960
+ __proto__: null,
11961
+ default: password,
11962
+ vars: vars$F
11963
+ });
11964
+
11965
+ const vars$E = NumberFieldClass.cssVarList;
11966
+
11967
+ const numberField = {
11968
+ [vars$E.hostWidth]: refs.width,
11594
11969
  [vars$E.hostMinWidth]: refs.minWidth,
11595
11970
  [vars$E.hostDirection]: refs.direction,
11596
11971
  [vars$E.fontSize]: refs.fontSize,
11597
11972
  [vars$E.fontFamily]: refs.fontFamily,
11598
11973
  [vars$E.labelTextColor]: refs.labelTextColor,
11599
- [vars$E.labelRequiredIndicator]: refs.requiredIndicator,
11600
11974
  [vars$E.errorMessageTextColor]: refs.errorMessageTextColor,
11601
11975
  [vars$E.inputValueTextColor]: refs.valueTextColor,
11602
11976
  [vars$E.inputPlaceholderColor]: refs.placeholderTextColor,
@@ -11609,39 +11983,30 @@ const textField = {
11609
11983
  [vars$E.inputOutlineColor]: refs.outlineColor,
11610
11984
  [vars$E.inputOutlineOffset]: refs.outlineOffset,
11611
11985
  [vars$E.inputBackgroundColor]: refs.backgroundColor,
11612
- [vars$E.inputHeight]: refs.inputHeight,
11986
+ [vars$E.labelRequiredIndicator]: refs.requiredIndicator,
11613
11987
  [vars$E.inputHorizontalPadding]: refs.horizontalPadding,
11614
- [vars$E.helperTextColor]: refs.helperTextColor,
11615
- textAlign: {
11616
- right: { [vars$E.inputTextAlign]: 'right' },
11617
- left: { [vars$E.inputTextAlign]: 'left' },
11618
- center: { [vars$E.inputTextAlign]: 'center' },
11619
- },
11988
+ [vars$E.inputHeight]: refs.inputHeight,
11620
11989
  };
11621
11990
 
11622
- var textField$1 = /*#__PURE__*/Object.freeze({
11991
+ var numberField$1 = /*#__PURE__*/Object.freeze({
11623
11992
  __proto__: null,
11624
- default: textField,
11625
- textField: textField,
11993
+ default: numberField,
11626
11994
  vars: vars$E
11627
11995
  });
11628
11996
 
11629
- const globalRefs$n = getThemeRefs(globals);
11630
- const vars$D = PasswordClass.cssVarList;
11997
+ const vars$D = EmailFieldClass.cssVarList;
11631
11998
 
11632
- const password = {
11999
+ const emailField = {
11633
12000
  [vars$D.hostWidth]: refs.width,
12001
+ [vars$D.hostMinWidth]: refs.minWidth,
11634
12002
  [vars$D.hostDirection]: refs.direction,
11635
12003
  [vars$D.fontSize]: refs.fontSize,
11636
12004
  [vars$D.fontFamily]: refs.fontFamily,
11637
12005
  [vars$D.labelTextColor]: refs.labelTextColor,
11638
12006
  [vars$D.errorMessageTextColor]: refs.errorMessageTextColor,
11639
- [vars$D.inputHorizontalPadding]: refs.horizontalPadding,
11640
- [vars$D.inputHeight]: refs.inputHeight,
11641
- [vars$D.inputBackgroundColor]: refs.backgroundColor,
11642
- [vars$D.labelRequiredIndicator]: refs.requiredIndicator,
11643
12007
  [vars$D.inputValueTextColor]: refs.valueTextColor,
11644
- [vars$D.inputPlaceholderTextColor]: refs.placeholderTextColor,
12008
+ [vars$D.labelRequiredIndicator]: refs.requiredIndicator,
12009
+ [vars$D.inputPlaceholderColor]: refs.placeholderTextColor,
11645
12010
  [vars$D.inputBorderWidth]: refs.borderWidth,
11646
12011
  [vars$D.inputBorderStyle]: refs.borderStyle,
11647
12012
  [vars$D.inputBorderColor]: refs.borderColor,
@@ -11650,232 +12015,168 @@ const password = {
11650
12015
  [vars$D.inputOutlineStyle]: refs.outlineStyle,
11651
12016
  [vars$D.inputOutlineColor]: refs.outlineColor,
11652
12017
  [vars$D.inputOutlineOffset]: refs.outlineOffset,
11653
- [vars$D.revealButtonOffset]: globalRefs$n.spacing.md,
11654
- [vars$D.revealButtonSize]: refs.toggleButtonSize,
11655
- [vars$D.revealButtonColor]: refs.placeholderTextColor,
12018
+ [vars$D.inputBackgroundColor]: refs.backgroundColor,
12019
+ [vars$D.inputHorizontalPadding]: refs.horizontalPadding,
12020
+ [vars$D.inputHeight]: refs.inputHeight,
11656
12021
  };
11657
12022
 
11658
- var password$1 = /*#__PURE__*/Object.freeze({
12023
+ var emailField$1 = /*#__PURE__*/Object.freeze({
11659
12024
  __proto__: null,
11660
- default: password,
12025
+ default: emailField,
11661
12026
  vars: vars$D
11662
12027
  });
11663
12028
 
11664
- const vars$C = NumberFieldClass.cssVarList;
12029
+ const vars$C = TextAreaClass.cssVarList;
11665
12030
 
11666
- const numberField = {
12031
+ const textArea = {
11667
12032
  [vars$C.hostWidth]: refs.width,
11668
12033
  [vars$C.hostMinWidth]: refs.minWidth,
11669
12034
  [vars$C.hostDirection]: refs.direction,
11670
12035
  [vars$C.fontSize]: refs.fontSize,
11671
12036
  [vars$C.fontFamily]: refs.fontFamily,
11672
12037
  [vars$C.labelTextColor]: refs.labelTextColor,
12038
+ [vars$C.labelRequiredIndicator]: refs.requiredIndicator,
11673
12039
  [vars$C.errorMessageTextColor]: refs.errorMessageTextColor,
12040
+ [vars$C.inputBackgroundColor]: refs.backgroundColor,
11674
12041
  [vars$C.inputValueTextColor]: refs.valueTextColor,
11675
- [vars$C.inputPlaceholderColor]: refs.placeholderTextColor,
12042
+ [vars$C.inputPlaceholderTextColor]: refs.placeholderTextColor,
12043
+ [vars$C.inputBorderRadius]: refs.borderRadius,
11676
12044
  [vars$C.inputBorderWidth]: refs.borderWidth,
11677
12045
  [vars$C.inputBorderStyle]: refs.borderStyle,
11678
12046
  [vars$C.inputBorderColor]: refs.borderColor,
11679
- [vars$C.inputBorderRadius]: refs.borderRadius,
11680
12047
  [vars$C.inputOutlineWidth]: refs.outlineWidth,
11681
12048
  [vars$C.inputOutlineStyle]: refs.outlineStyle,
11682
12049
  [vars$C.inputOutlineColor]: refs.outlineColor,
11683
12050
  [vars$C.inputOutlineOffset]: refs.outlineOffset,
11684
- [vars$C.inputBackgroundColor]: refs.backgroundColor,
11685
- [vars$C.labelRequiredIndicator]: refs.requiredIndicator,
11686
- [vars$C.inputHorizontalPadding]: refs.horizontalPadding,
11687
- [vars$C.inputHeight]: refs.inputHeight,
12051
+ [vars$C.inputResizeType]: 'vertical',
12052
+ [vars$C.inputMinHeight]: '5em',
12053
+ textAlign: {
12054
+ right: { [vars$C.inputTextAlign]: 'right' },
12055
+ left: { [vars$C.inputTextAlign]: 'left' },
12056
+ center: { [vars$C.inputTextAlign]: 'center' },
12057
+ },
12058
+
12059
+ _readonly: {
12060
+ [vars$C.inputResizeType]: 'none',
12061
+ },
11688
12062
  };
11689
12063
 
11690
- var numberField$1 = /*#__PURE__*/Object.freeze({
12064
+ var textArea$1 = /*#__PURE__*/Object.freeze({
11691
12065
  __proto__: null,
11692
- default: numberField,
12066
+ default: textArea,
11693
12067
  vars: vars$C
11694
12068
  });
11695
12069
 
11696
- const vars$B = EmailFieldClass.cssVarList;
12070
+ const vars$B = CheckboxClass.cssVarList;
12071
+ const checkboxSize = '1.35em';
11697
12072
 
11698
- const emailField = {
12073
+ const checkbox = {
11699
12074
  [vars$B.hostWidth]: refs.width,
11700
- [vars$B.hostMinWidth]: refs.minWidth,
11701
12075
  [vars$B.hostDirection]: refs.direction,
11702
12076
  [vars$B.fontSize]: refs.fontSize,
11703
12077
  [vars$B.fontFamily]: refs.fontFamily,
11704
12078
  [vars$B.labelTextColor]: refs.labelTextColor,
11705
- [vars$B.errorMessageTextColor]: refs.errorMessageTextColor,
11706
- [vars$B.inputValueTextColor]: refs.valueTextColor,
11707
12079
  [vars$B.labelRequiredIndicator]: refs.requiredIndicator,
11708
- [vars$B.inputPlaceholderColor]: refs.placeholderTextColor,
11709
- [vars$B.inputBorderWidth]: refs.borderWidth,
11710
- [vars$B.inputBorderStyle]: refs.borderStyle,
11711
- [vars$B.inputBorderColor]: refs.borderColor,
11712
- [vars$B.inputBorderRadius]: refs.borderRadius,
12080
+ [vars$B.labelFontWeight]: '400',
12081
+ [vars$B.labelLineHeight]: checkboxSize,
12082
+ [vars$B.labelSpacing]: '1em',
12083
+ [vars$B.errorMessageTextColor]: refs.errorMessageTextColor,
11713
12084
  [vars$B.inputOutlineWidth]: refs.outlineWidth,
11714
- [vars$B.inputOutlineStyle]: refs.outlineStyle,
11715
- [vars$B.inputOutlineColor]: refs.outlineColor,
11716
12085
  [vars$B.inputOutlineOffset]: refs.outlineOffset,
12086
+ [vars$B.inputOutlineColor]: refs.outlineColor,
12087
+ [vars$B.inputOutlineStyle]: refs.outlineStyle,
12088
+ [vars$B.inputBorderRadius]: refs.borderRadius,
12089
+ [vars$B.inputBorderColor]: refs.borderColor,
12090
+ [vars$B.inputBorderWidth]: refs.borderWidth,
12091
+ [vars$B.inputBorderStyle]: refs.borderStyle,
11717
12092
  [vars$B.inputBackgroundColor]: refs.backgroundColor,
11718
- [vars$B.inputHorizontalPadding]: refs.horizontalPadding,
11719
- [vars$B.inputHeight]: refs.inputHeight,
11720
- };
11721
-
11722
- var emailField$1 = /*#__PURE__*/Object.freeze({
11723
- __proto__: null,
11724
- default: emailField,
11725
- vars: vars$B
11726
- });
11727
-
11728
- const vars$A = TextAreaClass.cssVarList;
11729
-
11730
- const textArea = {
11731
- [vars$A.hostWidth]: refs.width,
11732
- [vars$A.hostMinWidth]: refs.minWidth,
11733
- [vars$A.hostDirection]: refs.direction,
11734
- [vars$A.fontSize]: refs.fontSize,
11735
- [vars$A.fontFamily]: refs.fontFamily,
11736
- [vars$A.labelTextColor]: refs.labelTextColor,
11737
- [vars$A.labelRequiredIndicator]: refs.requiredIndicator,
11738
- [vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
11739
- [vars$A.inputBackgroundColor]: refs.backgroundColor,
11740
- [vars$A.inputValueTextColor]: refs.valueTextColor,
11741
- [vars$A.inputPlaceholderTextColor]: refs.placeholderTextColor,
11742
- [vars$A.inputBorderRadius]: refs.borderRadius,
11743
- [vars$A.inputBorderWidth]: refs.borderWidth,
11744
- [vars$A.inputBorderStyle]: refs.borderStyle,
11745
- [vars$A.inputBorderColor]: refs.borderColor,
11746
- [vars$A.inputOutlineWidth]: refs.outlineWidth,
11747
- [vars$A.inputOutlineStyle]: refs.outlineStyle,
11748
- [vars$A.inputOutlineColor]: refs.outlineColor,
11749
- [vars$A.inputOutlineOffset]: refs.outlineOffset,
11750
- [vars$A.inputResizeType]: 'vertical',
11751
- [vars$A.inputMinHeight]: '5em',
11752
- textAlign: {
11753
- right: { [vars$A.inputTextAlign]: 'right' },
11754
- left: { [vars$A.inputTextAlign]: 'left' },
11755
- center: { [vars$A.inputTextAlign]: 'center' },
11756
- },
11757
-
11758
- _readonly: {
11759
- [vars$A.inputResizeType]: 'none',
11760
- },
11761
- };
11762
-
11763
- var textArea$1 = /*#__PURE__*/Object.freeze({
11764
- __proto__: null,
11765
- default: textArea,
11766
- vars: vars$A
11767
- });
11768
-
11769
- const vars$z = CheckboxClass.cssVarList;
11770
- const checkboxSize = '1.35em';
11771
-
11772
- const checkbox = {
11773
- [vars$z.hostWidth]: refs.width,
11774
- [vars$z.hostDirection]: refs.direction,
11775
- [vars$z.fontSize]: refs.fontSize,
11776
- [vars$z.fontFamily]: refs.fontFamily,
11777
- [vars$z.labelTextColor]: refs.labelTextColor,
11778
- [vars$z.labelRequiredIndicator]: refs.requiredIndicator,
11779
- [vars$z.labelFontWeight]: '400',
11780
- [vars$z.labelLineHeight]: checkboxSize,
11781
- [vars$z.labelSpacing]: '1em',
11782
- [vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
11783
- [vars$z.inputOutlineWidth]: refs.outlineWidth,
11784
- [vars$z.inputOutlineOffset]: refs.outlineOffset,
11785
- [vars$z.inputOutlineColor]: refs.outlineColor,
11786
- [vars$z.inputOutlineStyle]: refs.outlineStyle,
11787
- [vars$z.inputBorderRadius]: refs.borderRadius,
11788
- [vars$z.inputBorderColor]: refs.borderColor,
11789
- [vars$z.inputBorderWidth]: refs.borderWidth,
11790
- [vars$z.inputBorderStyle]: refs.borderStyle,
11791
- [vars$z.inputBackgroundColor]: refs.backgroundColor,
11792
- [vars$z.inputSize]: checkboxSize,
12093
+ [vars$B.inputSize]: checkboxSize,
11793
12094
 
11794
12095
  _checked: {
11795
- [vars$z.inputValueTextColor]: refs.valueTextColor,
12096
+ [vars$B.inputValueTextColor]: refs.valueTextColor,
11796
12097
  },
11797
12098
 
11798
12099
  _disabled: {
11799
- [vars$z.labelTextColor]: refs.labelTextColor,
12100
+ [vars$B.labelTextColor]: refs.labelTextColor,
11800
12101
  },
11801
12102
  };
11802
12103
 
11803
12104
  var checkbox$1 = /*#__PURE__*/Object.freeze({
11804
12105
  __proto__: null,
11805
12106
  default: checkbox,
11806
- vars: vars$z
12107
+ vars: vars$B
11807
12108
  });
11808
12109
 
11809
12110
  const knobMargin = '2px';
11810
12111
  const checkboxHeight = '1.25em';
11811
12112
 
11812
- const globalRefs$m = getThemeRefs(globals);
11813
- const vars$y = SwitchToggleClass.cssVarList;
12113
+ const globalRefs$o = getThemeRefs(globals);
12114
+ const vars$A = SwitchToggleClass.cssVarList;
11814
12115
 
11815
12116
  const switchToggle = {
11816
- [vars$y.hostWidth]: refs.width,
11817
- [vars$y.hostDirection]: refs.direction,
11818
- [vars$y.fontSize]: refs.fontSize,
11819
- [vars$y.fontFamily]: refs.fontFamily,
11820
-
11821
- [vars$y.inputOutlineWidth]: refs.outlineWidth,
11822
- [vars$y.inputOutlineOffset]: refs.outlineOffset,
11823
- [vars$y.inputOutlineColor]: refs.outlineColor,
11824
- [vars$y.inputOutlineStyle]: refs.outlineStyle,
11825
-
11826
- [vars$y.trackBorderStyle]: refs.borderStyle,
11827
- [vars$y.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
11828
- [vars$y.trackBorderColor]: refs.borderColor,
11829
- [vars$y.trackBackgroundColor]: refs.backgroundColor,
11830
- [vars$y.trackBorderRadius]: globalRefs$m.radius.md,
11831
- [vars$y.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
11832
- [vars$y.trackHeight]: checkboxHeight,
11833
-
11834
- [vars$y.knobSize]: `calc(1em - ${knobMargin})`,
11835
- [vars$y.knobRadius]: '50%',
11836
- [vars$y.knobTopOffset]: '1px',
11837
- [vars$y.knobLeftOffset]: knobMargin,
11838
- [vars$y.knobColor]: refs.labelTextColor,
11839
- [vars$y.knobTransitionDuration]: '0.3s',
11840
-
11841
- [vars$y.labelTextColor]: refs.labelTextColor,
11842
- [vars$y.labelFontWeight]: '400',
11843
- [vars$y.labelLineHeight]: '1.35em',
11844
- [vars$y.labelSpacing]: '1em',
11845
- [vars$y.labelRequiredIndicator]: refs.requiredIndicator,
11846
- [vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
12117
+ [vars$A.hostWidth]: refs.width,
12118
+ [vars$A.hostDirection]: refs.direction,
12119
+ [vars$A.fontSize]: refs.fontSize,
12120
+ [vars$A.fontFamily]: refs.fontFamily,
12121
+
12122
+ [vars$A.inputOutlineWidth]: refs.outlineWidth,
12123
+ [vars$A.inputOutlineOffset]: refs.outlineOffset,
12124
+ [vars$A.inputOutlineColor]: refs.outlineColor,
12125
+ [vars$A.inputOutlineStyle]: refs.outlineStyle,
12126
+
12127
+ [vars$A.trackBorderStyle]: refs.borderStyle,
12128
+ [vars$A.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
12129
+ [vars$A.trackBorderColor]: refs.borderColor,
12130
+ [vars$A.trackBackgroundColor]: refs.backgroundColor,
12131
+ [vars$A.trackBorderRadius]: globalRefs$o.radius.md,
12132
+ [vars$A.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
12133
+ [vars$A.trackHeight]: checkboxHeight,
12134
+
12135
+ [vars$A.knobSize]: `calc(1em - ${knobMargin})`,
12136
+ [vars$A.knobRadius]: '50%',
12137
+ [vars$A.knobTopOffset]: '1px',
12138
+ [vars$A.knobLeftOffset]: knobMargin,
12139
+ [vars$A.knobColor]: refs.labelTextColor,
12140
+ [vars$A.knobTransitionDuration]: '0.3s',
12141
+
12142
+ [vars$A.labelTextColor]: refs.labelTextColor,
12143
+ [vars$A.labelFontWeight]: '400',
12144
+ [vars$A.labelLineHeight]: '1.35em',
12145
+ [vars$A.labelSpacing]: '1em',
12146
+ [vars$A.labelRequiredIndicator]: refs.requiredIndicator,
12147
+ [vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
11847
12148
 
11848
12149
  _checked: {
11849
- [vars$y.trackBorderColor]: refs.borderColor,
11850
- [vars$y.knobLeftOffset]: `calc(100% - var(${vars$y.knobSize}) - ${knobMargin})`,
11851
- [vars$y.knobColor]: refs.valueTextColor,
11852
- [vars$y.knobTextColor]: refs.valueTextColor,
12150
+ [vars$A.trackBorderColor]: refs.borderColor,
12151
+ [vars$A.knobLeftOffset]: `calc(100% - var(${vars$A.knobSize}) - ${knobMargin})`,
12152
+ [vars$A.knobColor]: refs.valueTextColor,
12153
+ [vars$A.knobTextColor]: refs.valueTextColor,
11853
12154
  },
11854
12155
 
11855
12156
  _disabled: {
11856
- [vars$y.knobColor]: globalRefs$m.colors.surface.light,
11857
- [vars$y.trackBorderColor]: globalRefs$m.colors.surface.light,
11858
- [vars$y.trackBackgroundColor]: globalRefs$m.colors.surface.main,
11859
- [vars$y.labelTextColor]: refs.labelTextColor,
12157
+ [vars$A.knobColor]: globalRefs$o.colors.surface.light,
12158
+ [vars$A.trackBorderColor]: globalRefs$o.colors.surface.light,
12159
+ [vars$A.trackBackgroundColor]: globalRefs$o.colors.surface.main,
12160
+ [vars$A.labelTextColor]: refs.labelTextColor,
11860
12161
  _checked: {
11861
- [vars$y.knobColor]: globalRefs$m.colors.surface.light,
11862
- [vars$y.trackBackgroundColor]: globalRefs$m.colors.surface.main,
12162
+ [vars$A.knobColor]: globalRefs$o.colors.surface.light,
12163
+ [vars$A.trackBackgroundColor]: globalRefs$o.colors.surface.main,
11863
12164
  },
11864
12165
  },
11865
12166
 
11866
12167
  _invalid: {
11867
- [vars$y.trackBorderColor]: globalRefs$m.colors.error.main,
11868
- [vars$y.knobColor]: globalRefs$m.colors.error.main,
12168
+ [vars$A.trackBorderColor]: globalRefs$o.colors.error.main,
12169
+ [vars$A.knobColor]: globalRefs$o.colors.error.main,
11869
12170
  },
11870
12171
  };
11871
12172
 
11872
12173
  var switchToggle$1 = /*#__PURE__*/Object.freeze({
11873
12174
  __proto__: null,
11874
12175
  default: switchToggle,
11875
- vars: vars$y
12176
+ vars: vars$A
11876
12177
  });
11877
12178
 
11878
- const globalRefs$l = getThemeRefs(globals);
12179
+ const globalRefs$n = getThemeRefs(globals);
11879
12180
 
11880
12181
  const compVars$4 = ContainerClass.cssVarList;
11881
12182
 
@@ -11897,7 +12198,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
11897
12198
  horizontalAlignment,
11898
12199
  shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
11899
12200
  },
11900
- componentName$N
12201
+ componentName$P
11901
12202
  );
11902
12203
 
11903
12204
  const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -11907,10 +12208,10 @@ const container = {
11907
12208
 
11908
12209
  [compVars$4.hostWidth]: '100%',
11909
12210
  [compVars$4.boxShadow]: 'none',
11910
- [compVars$4.backgroundColor]: globalRefs$l.colors.surface.main,
11911
- [compVars$4.color]: globalRefs$l.colors.surface.contrast,
12211
+ [compVars$4.backgroundColor]: globalRefs$n.colors.surface.main,
12212
+ [compVars$4.color]: globalRefs$n.colors.surface.contrast,
11912
12213
  [compVars$4.borderRadius]: '0px',
11913
- [compVars$4.hostDirection]: globalRefs$l.direction,
12214
+ [compVars$4.hostDirection]: globalRefs$n.direction,
11914
12215
 
11915
12216
  verticalPadding: {
11916
12217
  sm: { [compVars$4.verticalPadding]: '5px' },
@@ -11956,34 +12257,34 @@ const container = {
11956
12257
 
11957
12258
  shadow: {
11958
12259
  sm: {
11959
- [compVars$4.boxShadow]: `${globalRefs$l.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$l.shadow.narrow.sm} ${shadowColor$1}`,
12260
+ [compVars$4.boxShadow]: `${globalRefs$n.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$n.shadow.narrow.sm} ${shadowColor$1}`,
11960
12261
  },
11961
12262
  md: {
11962
- [compVars$4.boxShadow]: `${globalRefs$l.shadow.wide.md} ${shadowColor$1}, ${globalRefs$l.shadow.narrow.md} ${shadowColor$1}`,
12263
+ [compVars$4.boxShadow]: `${globalRefs$n.shadow.wide.md} ${shadowColor$1}, ${globalRefs$n.shadow.narrow.md} ${shadowColor$1}`,
11963
12264
  },
11964
12265
  lg: {
11965
- [compVars$4.boxShadow]: `${globalRefs$l.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$l.shadow.narrow.lg} ${shadowColor$1}`,
12266
+ [compVars$4.boxShadow]: `${globalRefs$n.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$n.shadow.narrow.lg} ${shadowColor$1}`,
11966
12267
  },
11967
12268
  xl: {
11968
- [compVars$4.boxShadow]: `${globalRefs$l.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$l.shadow.narrow.xl} ${shadowColor$1}`,
12269
+ [compVars$4.boxShadow]: `${globalRefs$n.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$n.shadow.narrow.xl} ${shadowColor$1}`,
11969
12270
  },
11970
12271
  '2xl': {
11971
12272
  [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
11972
- [compVars$4.boxShadow]: `${globalRefs$l.shadow.wide['2xl']} ${shadowColor$1}`,
12273
+ [compVars$4.boxShadow]: `${globalRefs$n.shadow.wide['2xl']} ${shadowColor$1}`,
11973
12274
  },
11974
12275
  },
11975
12276
 
11976
12277
  borderRadius: {
11977
- sm: { [compVars$4.borderRadius]: globalRefs$l.radius.sm },
11978
- md: { [compVars$4.borderRadius]: globalRefs$l.radius.md },
11979
- lg: { [compVars$4.borderRadius]: globalRefs$l.radius.lg },
11980
- xl: { [compVars$4.borderRadius]: globalRefs$l.radius.xl },
11981
- '2xl': { [compVars$4.borderRadius]: globalRefs$l.radius['2xl'] },
11982
- '3xl': { [compVars$4.borderRadius]: globalRefs$l.radius['3xl'] },
12278
+ sm: { [compVars$4.borderRadius]: globalRefs$n.radius.sm },
12279
+ md: { [compVars$4.borderRadius]: globalRefs$n.radius.md },
12280
+ lg: { [compVars$4.borderRadius]: globalRefs$n.radius.lg },
12281
+ xl: { [compVars$4.borderRadius]: globalRefs$n.radius.xl },
12282
+ '2xl': { [compVars$4.borderRadius]: globalRefs$n.radius['2xl'] },
12283
+ '3xl': { [compVars$4.borderRadius]: globalRefs$n.radius['3xl'] },
11983
12284
  },
11984
12285
  };
11985
12286
 
11986
- const vars$x = {
12287
+ const vars$z = {
11987
12288
  ...compVars$4,
11988
12289
  ...helperVars$2,
11989
12290
  };
@@ -11991,249 +12292,249 @@ const vars$x = {
11991
12292
  var container$1 = /*#__PURE__*/Object.freeze({
11992
12293
  __proto__: null,
11993
12294
  default: container,
11994
- vars: vars$x
12295
+ vars: vars$z
11995
12296
  });
11996
12297
 
11997
- const vars$w = LogoClass.cssVarList;
12298
+ const vars$y = LogoClass.cssVarList;
11998
12299
 
11999
12300
  const logo$2 = {
12000
- [vars$w.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
12301
+ [vars$y.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
12001
12302
  };
12002
12303
 
12003
12304
  var logo$3 = /*#__PURE__*/Object.freeze({
12004
12305
  __proto__: null,
12005
12306
  default: logo$2,
12006
- vars: vars$w
12307
+ vars: vars$y
12007
12308
  });
12008
12309
 
12009
- const vars$v = TotpImageClass.cssVarList;
12310
+ const vars$x = TotpImageClass.cssVarList;
12010
12311
 
12011
12312
  const logo$1 = {
12012
- [vars$v.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
12313
+ [vars$x.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
12013
12314
  };
12014
12315
 
12015
12316
  var totpImage = /*#__PURE__*/Object.freeze({
12016
12317
  __proto__: null,
12017
12318
  default: logo$1,
12018
- vars: vars$v
12319
+ vars: vars$x
12019
12320
  });
12020
12321
 
12021
- const vars$u = NotpImageClass.cssVarList;
12322
+ const vars$w = NotpImageClass.cssVarList;
12022
12323
 
12023
12324
  const logo = {
12024
- [vars$u.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
12325
+ [vars$w.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
12025
12326
  };
12026
12327
 
12027
12328
  var notpImage = /*#__PURE__*/Object.freeze({
12028
12329
  __proto__: null,
12029
12330
  default: logo,
12030
- vars: vars$u
12331
+ vars: vars$w
12031
12332
  });
12032
12333
 
12033
- const globalRefs$k = getThemeRefs(globals);
12034
- const vars$t = TextClass.cssVarList;
12334
+ const globalRefs$m = getThemeRefs(globals);
12335
+ const vars$v = TextClass.cssVarList;
12035
12336
 
12036
12337
  const text = {
12037
- [vars$t.hostDirection]: globalRefs$k.direction,
12038
- [vars$t.textLineHeight]: '1.35em',
12039
- [vars$t.textAlign]: 'left',
12040
- [vars$t.textColor]: globalRefs$k.colors.surface.dark,
12338
+ [vars$v.hostDirection]: globalRefs$m.direction,
12339
+ [vars$v.textLineHeight]: '1.35em',
12340
+ [vars$v.textAlign]: 'left',
12341
+ [vars$v.textColor]: globalRefs$m.colors.surface.dark,
12041
12342
  variant: {
12042
12343
  h1: {
12043
- [vars$t.fontSize]: globalRefs$k.typography.h1.size,
12044
- [vars$t.fontWeight]: globalRefs$k.typography.h1.weight,
12045
- [vars$t.fontFamily]: globalRefs$k.typography.h1.font,
12344
+ [vars$v.fontSize]: globalRefs$m.typography.h1.size,
12345
+ [vars$v.fontWeight]: globalRefs$m.typography.h1.weight,
12346
+ [vars$v.fontFamily]: globalRefs$m.typography.h1.font,
12046
12347
  },
12047
12348
  h2: {
12048
- [vars$t.fontSize]: globalRefs$k.typography.h2.size,
12049
- [vars$t.fontWeight]: globalRefs$k.typography.h2.weight,
12050
- [vars$t.fontFamily]: globalRefs$k.typography.h2.font,
12349
+ [vars$v.fontSize]: globalRefs$m.typography.h2.size,
12350
+ [vars$v.fontWeight]: globalRefs$m.typography.h2.weight,
12351
+ [vars$v.fontFamily]: globalRefs$m.typography.h2.font,
12051
12352
  },
12052
12353
  h3: {
12053
- [vars$t.fontSize]: globalRefs$k.typography.h3.size,
12054
- [vars$t.fontWeight]: globalRefs$k.typography.h3.weight,
12055
- [vars$t.fontFamily]: globalRefs$k.typography.h3.font,
12354
+ [vars$v.fontSize]: globalRefs$m.typography.h3.size,
12355
+ [vars$v.fontWeight]: globalRefs$m.typography.h3.weight,
12356
+ [vars$v.fontFamily]: globalRefs$m.typography.h3.font,
12056
12357
  },
12057
12358
  subtitle1: {
12058
- [vars$t.fontSize]: globalRefs$k.typography.subtitle1.size,
12059
- [vars$t.fontWeight]: globalRefs$k.typography.subtitle1.weight,
12060
- [vars$t.fontFamily]: globalRefs$k.typography.subtitle1.font,
12359
+ [vars$v.fontSize]: globalRefs$m.typography.subtitle1.size,
12360
+ [vars$v.fontWeight]: globalRefs$m.typography.subtitle1.weight,
12361
+ [vars$v.fontFamily]: globalRefs$m.typography.subtitle1.font,
12061
12362
  },
12062
12363
  subtitle2: {
12063
- [vars$t.fontSize]: globalRefs$k.typography.subtitle2.size,
12064
- [vars$t.fontWeight]: globalRefs$k.typography.subtitle2.weight,
12065
- [vars$t.fontFamily]: globalRefs$k.typography.subtitle2.font,
12364
+ [vars$v.fontSize]: globalRefs$m.typography.subtitle2.size,
12365
+ [vars$v.fontWeight]: globalRefs$m.typography.subtitle2.weight,
12366
+ [vars$v.fontFamily]: globalRefs$m.typography.subtitle2.font,
12066
12367
  },
12067
12368
  body1: {
12068
- [vars$t.fontSize]: globalRefs$k.typography.body1.size,
12069
- [vars$t.fontWeight]: globalRefs$k.typography.body1.weight,
12070
- [vars$t.fontFamily]: globalRefs$k.typography.body1.font,
12369
+ [vars$v.fontSize]: globalRefs$m.typography.body1.size,
12370
+ [vars$v.fontWeight]: globalRefs$m.typography.body1.weight,
12371
+ [vars$v.fontFamily]: globalRefs$m.typography.body1.font,
12071
12372
  },
12072
12373
  body2: {
12073
- [vars$t.fontSize]: globalRefs$k.typography.body2.size,
12074
- [vars$t.fontWeight]: globalRefs$k.typography.body2.weight,
12075
- [vars$t.fontFamily]: globalRefs$k.typography.body2.font,
12374
+ [vars$v.fontSize]: globalRefs$m.typography.body2.size,
12375
+ [vars$v.fontWeight]: globalRefs$m.typography.body2.weight,
12376
+ [vars$v.fontFamily]: globalRefs$m.typography.body2.font,
12076
12377
  },
12077
12378
  },
12078
12379
 
12079
12380
  mode: {
12080
12381
  primary: {
12081
- [vars$t.textColor]: globalRefs$k.colors.surface.contrast,
12382
+ [vars$v.textColor]: globalRefs$m.colors.surface.contrast,
12082
12383
  },
12083
12384
  secondary: {
12084
- [vars$t.textColor]: globalRefs$k.colors.surface.dark,
12385
+ [vars$v.textColor]: globalRefs$m.colors.surface.dark,
12085
12386
  },
12086
12387
  error: {
12087
- [vars$t.textColor]: globalRefs$k.colors.error.main,
12388
+ [vars$v.textColor]: globalRefs$m.colors.error.main,
12088
12389
  },
12089
12390
  success: {
12090
- [vars$t.textColor]: globalRefs$k.colors.success.main,
12391
+ [vars$v.textColor]: globalRefs$m.colors.success.main,
12091
12392
  },
12092
12393
  },
12093
12394
 
12094
12395
  textAlign: {
12095
- right: { [vars$t.textAlign]: 'right' },
12096
- left: { [vars$t.textAlign]: 'left' },
12097
- center: { [vars$t.textAlign]: 'center' },
12396
+ right: { [vars$v.textAlign]: 'right' },
12397
+ left: { [vars$v.textAlign]: 'left' },
12398
+ center: { [vars$v.textAlign]: 'center' },
12098
12399
  },
12099
12400
 
12100
12401
  _fullWidth: {
12101
- [vars$t.hostWidth]: '100%',
12402
+ [vars$v.hostWidth]: '100%',
12102
12403
  },
12103
12404
 
12104
12405
  _italic: {
12105
- [vars$t.fontStyle]: 'italic',
12406
+ [vars$v.fontStyle]: 'italic',
12106
12407
  },
12107
12408
 
12108
12409
  _uppercase: {
12109
- [vars$t.textTransform]: 'uppercase',
12410
+ [vars$v.textTransform]: 'uppercase',
12110
12411
  },
12111
12412
 
12112
12413
  _lowercase: {
12113
- [vars$t.textTransform]: 'lowercase',
12414
+ [vars$v.textTransform]: 'lowercase',
12114
12415
  },
12115
12416
  };
12116
12417
 
12117
12418
  var text$1 = /*#__PURE__*/Object.freeze({
12118
12419
  __proto__: null,
12119
12420
  default: text,
12120
- vars: vars$t
12421
+ vars: vars$v
12121
12422
  });
12122
12423
 
12123
- const globalRefs$j = getThemeRefs(globals);
12124
- const vars$s = EnrichedTextClass.cssVarList;
12424
+ const globalRefs$l = getThemeRefs(globals);
12425
+ const vars$u = EnrichedTextClass.cssVarList;
12125
12426
 
12126
12427
  const EnrichedText = {
12127
- [vars$s.hostDirection]: globalRefs$j.direction,
12428
+ [vars$u.hostDirection]: globalRefs$l.direction,
12128
12429
 
12129
- [vars$s.fontSize]: globalRefs$j.typography.body1.size,
12130
- [vars$s.fontWeight]: globalRefs$j.typography.body1.weight,
12131
- [vars$s.fontFamily]: globalRefs$j.typography.body1.font,
12430
+ [vars$u.fontSize]: globalRefs$l.typography.body1.size,
12431
+ [vars$u.fontWeight]: globalRefs$l.typography.body1.weight,
12432
+ [vars$u.fontFamily]: globalRefs$l.typography.body1.font,
12132
12433
 
12133
- [vars$s.textLineHeight]: '1.35em',
12134
- [vars$s.textAlign]: 'left',
12135
- [vars$s.textColor]: globalRefs$j.colors.surface.dark,
12434
+ [vars$u.textLineHeight]: '1.35em',
12435
+ [vars$u.textAlign]: 'left',
12436
+ [vars$u.textColor]: globalRefs$l.colors.surface.dark,
12136
12437
 
12137
- [vars$s.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
12438
+ [vars$u.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
12138
12439
 
12139
12440
  mode: {
12140
12441
  primary: {
12141
- [vars$s.textColor]: globalRefs$j.colors.surface.contrast,
12442
+ [vars$u.textColor]: globalRefs$l.colors.surface.contrast,
12142
12443
  },
12143
12444
  secondary: {
12144
- [vars$s.textColor]: globalRefs$j.colors.surface.dark,
12445
+ [vars$u.textColor]: globalRefs$l.colors.surface.dark,
12145
12446
  },
12146
12447
  error: {
12147
- [vars$s.textColor]: globalRefs$j.colors.error.main,
12448
+ [vars$u.textColor]: globalRefs$l.colors.error.main,
12148
12449
  },
12149
12450
  success: {
12150
- [vars$s.textColor]: globalRefs$j.colors.success.main,
12451
+ [vars$u.textColor]: globalRefs$l.colors.success.main,
12151
12452
  },
12152
12453
  },
12153
12454
 
12154
12455
  variant: {
12155
12456
  h1: {
12156
- [vars$s.fontSize]: globalRefs$j.typography.h1.size,
12157
- [vars$s.fontWeight]: globalRefs$j.typography.h1.weight,
12158
- [vars$s.fontFamily]: globalRefs$j.typography.h1.font,
12457
+ [vars$u.fontSize]: globalRefs$l.typography.h1.size,
12458
+ [vars$u.fontWeight]: globalRefs$l.typography.h1.weight,
12459
+ [vars$u.fontFamily]: globalRefs$l.typography.h1.font,
12159
12460
  },
12160
12461
  h2: {
12161
- [vars$s.fontSize]: globalRefs$j.typography.h2.size,
12162
- [vars$s.fontWeight]: globalRefs$j.typography.h2.weight,
12163
- [vars$s.fontFamily]: globalRefs$j.typography.h2.font,
12462
+ [vars$u.fontSize]: globalRefs$l.typography.h2.size,
12463
+ [vars$u.fontWeight]: globalRefs$l.typography.h2.weight,
12464
+ [vars$u.fontFamily]: globalRefs$l.typography.h2.font,
12164
12465
  },
12165
12466
  h3: {
12166
- [vars$s.fontSize]: globalRefs$j.typography.h3.size,
12167
- [vars$s.fontWeight]: globalRefs$j.typography.h3.weight,
12168
- [vars$s.fontFamily]: globalRefs$j.typography.h3.font,
12467
+ [vars$u.fontSize]: globalRefs$l.typography.h3.size,
12468
+ [vars$u.fontWeight]: globalRefs$l.typography.h3.weight,
12469
+ [vars$u.fontFamily]: globalRefs$l.typography.h3.font,
12169
12470
  },
12170
12471
  subtitle1: {
12171
- [vars$s.fontSize]: globalRefs$j.typography.subtitle1.size,
12172
- [vars$s.fontWeight]: globalRefs$j.typography.subtitle1.weight,
12173
- [vars$s.fontFamily]: globalRefs$j.typography.subtitle1.font,
12472
+ [vars$u.fontSize]: globalRefs$l.typography.subtitle1.size,
12473
+ [vars$u.fontWeight]: globalRefs$l.typography.subtitle1.weight,
12474
+ [vars$u.fontFamily]: globalRefs$l.typography.subtitle1.font,
12174
12475
  },
12175
12476
  subtitle2: {
12176
- [vars$s.fontSize]: globalRefs$j.typography.subtitle2.size,
12177
- [vars$s.fontWeight]: globalRefs$j.typography.subtitle2.weight,
12178
- [vars$s.fontFamily]: globalRefs$j.typography.subtitle2.font,
12477
+ [vars$u.fontSize]: globalRefs$l.typography.subtitle2.size,
12478
+ [vars$u.fontWeight]: globalRefs$l.typography.subtitle2.weight,
12479
+ [vars$u.fontFamily]: globalRefs$l.typography.subtitle2.font,
12179
12480
  },
12180
12481
  body1: {
12181
- [vars$s.fontSize]: globalRefs$j.typography.body1.size,
12182
- [vars$s.fontWeight]: globalRefs$j.typography.body1.weight,
12183
- [vars$s.fontFamily]: globalRefs$j.typography.body1.font,
12482
+ [vars$u.fontSize]: globalRefs$l.typography.body1.size,
12483
+ [vars$u.fontWeight]: globalRefs$l.typography.body1.weight,
12484
+ [vars$u.fontFamily]: globalRefs$l.typography.body1.font,
12184
12485
  },
12185
12486
  body2: {
12186
- [vars$s.fontSize]: globalRefs$j.typography.body2.size,
12187
- [vars$s.fontWeight]: globalRefs$j.typography.body2.weight,
12188
- [vars$s.fontFamily]: globalRefs$j.typography.body2.font,
12487
+ [vars$u.fontSize]: globalRefs$l.typography.body2.size,
12488
+ [vars$u.fontWeight]: globalRefs$l.typography.body2.weight,
12489
+ [vars$u.fontFamily]: globalRefs$l.typography.body2.font,
12189
12490
  },
12190
12491
  },
12191
12492
 
12192
12493
  textAlign: {
12193
- right: { [vars$s.textAlign]: 'right' },
12194
- left: { [vars$s.textAlign]: 'left' },
12195
- center: { [vars$s.textAlign]: 'center' },
12494
+ right: { [vars$u.textAlign]: 'right' },
12495
+ left: { [vars$u.textAlign]: 'left' },
12496
+ center: { [vars$u.textAlign]: 'center' },
12196
12497
  },
12197
12498
 
12198
12499
  _fullWidth: {
12199
- [vars$s.hostWidth]: '100%',
12500
+ [vars$u.hostWidth]: '100%',
12200
12501
  },
12201
12502
  };
12202
12503
 
12203
12504
  var EnrichedText$1 = /*#__PURE__*/Object.freeze({
12204
12505
  __proto__: null,
12205
12506
  default: EnrichedText,
12206
- vars: vars$s
12507
+ vars: vars$u
12207
12508
  });
12208
12509
 
12209
- const globalRefs$i = getThemeRefs(globals);
12210
- const vars$r = LinkClass.cssVarList;
12510
+ const globalRefs$k = getThemeRefs(globals);
12511
+ const vars$t = LinkClass.cssVarList;
12211
12512
 
12212
12513
  const link = {
12213
- [vars$r.hostDirection]: globalRefs$i.direction,
12214
- [vars$r.cursor]: 'pointer',
12514
+ [vars$t.hostDirection]: globalRefs$k.direction,
12515
+ [vars$t.cursor]: 'pointer',
12215
12516
 
12216
- [vars$r.textColor]: globalRefs$i.colors.primary.main,
12517
+ [vars$t.textColor]: globalRefs$k.colors.primary.main,
12217
12518
 
12218
12519
  textAlign: {
12219
- right: { [vars$r.textAlign]: 'right' },
12220
- left: { [vars$r.textAlign]: 'left' },
12221
- center: { [vars$r.textAlign]: 'center' },
12520
+ right: { [vars$t.textAlign]: 'right' },
12521
+ left: { [vars$t.textAlign]: 'left' },
12522
+ center: { [vars$t.textAlign]: 'center' },
12222
12523
  },
12223
12524
 
12224
12525
  _fullWidth: {
12225
- [vars$r.hostWidth]: '100%',
12526
+ [vars$t.hostWidth]: '100%',
12226
12527
  },
12227
12528
 
12228
12529
  mode: {
12229
12530
  secondary: {
12230
- [vars$r.textColor]: globalRefs$i.colors.secondary.main,
12531
+ [vars$t.textColor]: globalRefs$k.colors.secondary.main,
12231
12532
  },
12232
12533
  error: {
12233
- [vars$r.textColor]: globalRefs$i.colors.error.main,
12534
+ [vars$t.textColor]: globalRefs$k.colors.error.main,
12234
12535
  },
12235
12536
  success: {
12236
- [vars$r.textColor]: globalRefs$i.colors.success.main,
12537
+ [vars$t.textColor]: globalRefs$k.colors.success.main,
12237
12538
  },
12238
12539
  },
12239
12540
  };
@@ -12241,10 +12542,10 @@ const link = {
12241
12542
  var link$1 = /*#__PURE__*/Object.freeze({
12242
12543
  __proto__: null,
12243
12544
  default: link,
12244
- vars: vars$r
12545
+ vars: vars$t
12245
12546
  });
12246
12547
 
12247
- const globalRefs$h = getThemeRefs(globals);
12548
+ const globalRefs$j = getThemeRefs(globals);
12248
12549
  const compVars$3 = DividerClass.cssVarList;
12249
12550
 
12250
12551
  const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
@@ -12252,18 +12553,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
12252
12553
  thickness: '2px',
12253
12554
  spacing: '10px',
12254
12555
  },
12255
- componentName$L
12556
+ componentName$N
12256
12557
  );
12257
12558
 
12258
12559
  const divider = {
12259
12560
  ...helperTheme$1,
12260
12561
 
12261
- [compVars$3.hostDirection]: globalRefs$h.direction,
12562
+ [compVars$3.hostDirection]: globalRefs$j.direction,
12262
12563
  [compVars$3.alignItems]: 'center',
12263
12564
  [compVars$3.flexDirection]: 'row',
12264
12565
  [compVars$3.alignSelf]: 'stretch',
12265
12566
  [compVars$3.hostWidth]: '100%',
12266
- [compVars$3.stripeColor]: globalRefs$h.colors.surface.light,
12567
+ [compVars$3.stripeColor]: globalRefs$j.colors.surface.light,
12267
12568
  [compVars$3.stripeColorOpacity]: '0.5',
12268
12569
  [compVars$3.stripeHorizontalThickness]: helperRefs$1.thickness,
12269
12570
  [compVars$3.labelTextWidth]: 'fit-content',
@@ -12283,7 +12584,7 @@ const divider = {
12283
12584
  },
12284
12585
  };
12285
12586
 
12286
- const vars$q = {
12587
+ const vars$s = {
12287
12588
  ...compVars$3,
12288
12589
  ...helperVars$1,
12289
12590
  };
@@ -12291,111 +12592,111 @@ const vars$q = {
12291
12592
  var divider$1 = /*#__PURE__*/Object.freeze({
12292
12593
  __proto__: null,
12293
12594
  default: divider,
12294
- vars: vars$q
12595
+ vars: vars$s
12295
12596
  });
12296
12597
 
12297
- const vars$p = PasscodeClass.cssVarList;
12598
+ const vars$r = PasscodeClass.cssVarList;
12298
12599
 
12299
12600
  const passcode = {
12300
- [vars$p.hostDirection]: refs.direction,
12301
- [vars$p.fontFamily]: refs.fontFamily,
12302
- [vars$p.fontSize]: refs.fontSize,
12303
- [vars$p.labelTextColor]: refs.labelTextColor,
12304
- [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
12305
- [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
12306
- [vars$p.digitValueTextColor]: refs.valueTextColor,
12307
- [vars$p.digitPadding]: '0',
12308
- [vars$p.digitTextAlign]: 'center',
12309
- [vars$p.digitSpacing]: '4px',
12310
- [vars$p.hostWidth]: refs.width,
12311
- [vars$p.digitOutlineColor]: 'transparent',
12312
- [vars$p.digitOutlineWidth]: refs.outlineWidth,
12313
- [vars$p.focusedDigitFieldOutlineColor]: refs.outlineColor,
12314
- [vars$p.digitSize]: refs.inputHeight,
12601
+ [vars$r.hostDirection]: refs.direction,
12602
+ [vars$r.fontFamily]: refs.fontFamily,
12603
+ [vars$r.fontSize]: refs.fontSize,
12604
+ [vars$r.labelTextColor]: refs.labelTextColor,
12605
+ [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
12606
+ [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
12607
+ [vars$r.digitValueTextColor]: refs.valueTextColor,
12608
+ [vars$r.digitPadding]: '0',
12609
+ [vars$r.digitTextAlign]: 'center',
12610
+ [vars$r.digitSpacing]: '4px',
12611
+ [vars$r.hostWidth]: refs.width,
12612
+ [vars$r.digitOutlineColor]: 'transparent',
12613
+ [vars$r.digitOutlineWidth]: refs.outlineWidth,
12614
+ [vars$r.focusedDigitFieldOutlineColor]: refs.outlineColor,
12615
+ [vars$r.digitSize]: refs.inputHeight,
12315
12616
 
12316
12617
  size: {
12317
- xs: { [vars$p.spinnerSize]: '15px' },
12318
- sm: { [vars$p.spinnerSize]: '20px' },
12319
- md: { [vars$p.spinnerSize]: '20px' },
12320
- lg: { [vars$p.spinnerSize]: '20px' },
12618
+ xs: { [vars$r.spinnerSize]: '15px' },
12619
+ sm: { [vars$r.spinnerSize]: '20px' },
12620
+ md: { [vars$r.spinnerSize]: '20px' },
12621
+ lg: { [vars$r.spinnerSize]: '20px' },
12321
12622
  },
12322
12623
 
12323
12624
  _hideCursor: {
12324
- [vars$p.digitCaretTextColor]: 'transparent',
12625
+ [vars$r.digitCaretTextColor]: 'transparent',
12325
12626
  },
12326
12627
 
12327
12628
  _loading: {
12328
- [vars$p.overlayOpacity]: refs.overlayOpacity,
12629
+ [vars$r.overlayOpacity]: refs.overlayOpacity,
12329
12630
  },
12330
12631
  };
12331
12632
 
12332
12633
  var passcode$1 = /*#__PURE__*/Object.freeze({
12333
12634
  __proto__: null,
12334
12635
  default: passcode,
12335
- vars: vars$p
12636
+ vars: vars$r
12336
12637
  });
12337
12638
 
12338
- const globalRefs$g = getThemeRefs(globals);
12339
- const vars$o = LoaderLinearClass.cssVarList;
12639
+ const globalRefs$i = getThemeRefs(globals);
12640
+ const vars$q = LoaderLinearClass.cssVarList;
12340
12641
 
12341
12642
  const loaderLinear = {
12342
- [vars$o.hostDisplay]: 'inline-block',
12343
- [vars$o.hostWidth]: '100%',
12643
+ [vars$q.hostDisplay]: 'inline-block',
12644
+ [vars$q.hostWidth]: '100%',
12344
12645
 
12345
- [vars$o.barColor]: globalRefs$g.colors.surface.contrast,
12346
- [vars$o.barWidth]: '20%',
12646
+ [vars$q.barColor]: globalRefs$i.colors.surface.contrast,
12647
+ [vars$q.barWidth]: '20%',
12347
12648
 
12348
- [vars$o.barBackgroundColor]: globalRefs$g.colors.surface.light,
12349
- [vars$o.barBorderRadius]: '4px',
12649
+ [vars$q.barBackgroundColor]: globalRefs$i.colors.surface.light,
12650
+ [vars$q.barBorderRadius]: '4px',
12350
12651
 
12351
- [vars$o.animationDuration]: '2s',
12352
- [vars$o.animationTimingFunction]: 'linear',
12353
- [vars$o.animationIterationCount]: 'infinite',
12354
- [vars$o.verticalPadding]: '0.25em',
12652
+ [vars$q.animationDuration]: '2s',
12653
+ [vars$q.animationTimingFunction]: 'linear',
12654
+ [vars$q.animationIterationCount]: 'infinite',
12655
+ [vars$q.verticalPadding]: '0.25em',
12355
12656
 
12356
12657
  size: {
12357
- xs: { [vars$o.barHeight]: '2px' },
12358
- sm: { [vars$o.barHeight]: '4px' },
12359
- md: { [vars$o.barHeight]: '6px' },
12360
- lg: { [vars$o.barHeight]: '8px' },
12658
+ xs: { [vars$q.barHeight]: '2px' },
12659
+ sm: { [vars$q.barHeight]: '4px' },
12660
+ md: { [vars$q.barHeight]: '6px' },
12661
+ lg: { [vars$q.barHeight]: '8px' },
12361
12662
  },
12362
12663
 
12363
12664
  mode: {
12364
12665
  primary: {
12365
- [vars$o.barColor]: globalRefs$g.colors.primary.main,
12666
+ [vars$q.barColor]: globalRefs$i.colors.primary.main,
12366
12667
  },
12367
12668
  secondary: {
12368
- [vars$o.barColor]: globalRefs$g.colors.secondary.main,
12669
+ [vars$q.barColor]: globalRefs$i.colors.secondary.main,
12369
12670
  },
12370
12671
  },
12371
12672
 
12372
12673
  _hidden: {
12373
- [vars$o.hostDisplay]: 'none',
12674
+ [vars$q.hostDisplay]: 'none',
12374
12675
  },
12375
12676
  };
12376
12677
 
12377
12678
  var loaderLinear$1 = /*#__PURE__*/Object.freeze({
12378
12679
  __proto__: null,
12379
12680
  default: loaderLinear,
12380
- vars: vars$o
12681
+ vars: vars$q
12381
12682
  });
12382
12683
 
12383
- const globalRefs$f = getThemeRefs(globals);
12684
+ const globalRefs$h = getThemeRefs(globals);
12384
12685
  const compVars$2 = LoaderRadialClass.cssVarList;
12385
12686
 
12386
12687
  const [helperTheme, helperRefs, helperVars] = createHelperVars(
12387
12688
  {
12388
- spinnerColor: globalRefs$f.colors.surface.contrast,
12689
+ spinnerColor: globalRefs$h.colors.surface.contrast,
12389
12690
  mode: {
12390
12691
  primary: {
12391
- spinnerColor: globalRefs$f.colors.primary.main,
12692
+ spinnerColor: globalRefs$h.colors.primary.main,
12392
12693
  },
12393
12694
  secondary: {
12394
- spinnerColor: globalRefs$f.colors.secondary.main,
12695
+ spinnerColor: globalRefs$h.colors.secondary.main,
12395
12696
  },
12396
12697
  },
12397
12698
  },
12398
- componentName$O
12699
+ componentName$Q
12399
12700
  );
12400
12701
 
12401
12702
  const loaderRadial = {
@@ -12424,7 +12725,7 @@ const loaderRadial = {
12424
12725
  [compVars$2.hostDisplay]: 'none',
12425
12726
  },
12426
12727
  };
12427
- const vars$n = {
12728
+ const vars$p = {
12428
12729
  ...compVars$2,
12429
12730
  ...helperVars,
12430
12731
  };
@@ -12432,97 +12733,97 @@ const vars$n = {
12432
12733
  var loaderRadial$1 = /*#__PURE__*/Object.freeze({
12433
12734
  __proto__: null,
12434
12735
  default: loaderRadial,
12435
- vars: vars$n
12736
+ vars: vars$p
12436
12737
  });
12437
12738
 
12438
- const globalRefs$e = getThemeRefs(globals);
12439
- const vars$m = ComboBoxClass.cssVarList;
12739
+ const globalRefs$g = getThemeRefs(globals);
12740
+ const vars$o = ComboBoxClass.cssVarList;
12440
12741
 
12441
12742
  const comboBox = {
12442
- [vars$m.hostWidth]: refs.width,
12443
- [vars$m.hostDirection]: refs.direction,
12444
- [vars$m.fontSize]: refs.fontSize,
12445
- [vars$m.fontFamily]: refs.fontFamily,
12446
- [vars$m.labelTextColor]: refs.labelTextColor,
12447
- [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
12448
- [vars$m.inputBorderColor]: refs.borderColor,
12449
- [vars$m.inputBorderWidth]: refs.borderWidth,
12450
- [vars$m.inputBorderStyle]: refs.borderStyle,
12451
- [vars$m.inputBorderRadius]: refs.borderRadius,
12452
- [vars$m.inputOutlineColor]: refs.outlineColor,
12453
- [vars$m.inputOutlineOffset]: refs.outlineOffset,
12454
- [vars$m.inputOutlineWidth]: refs.outlineWidth,
12455
- [vars$m.inputOutlineStyle]: refs.outlineStyle,
12456
- [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
12457
- [vars$m.inputValueTextColor]: refs.valueTextColor,
12458
- [vars$m.inputPlaceholderTextColor]: refs.placeholderTextColor,
12459
- [vars$m.inputBackgroundColor]: refs.backgroundColor,
12460
- [vars$m.inputHorizontalPadding]: refs.horizontalPadding,
12461
- [vars$m.inputHeight]: refs.inputHeight,
12462
- [vars$m.inputDropdownButtonColor]: globalRefs$e.colors.surface.dark,
12463
- [vars$m.inputDropdownButtonCursor]: 'pointer',
12464
- [vars$m.inputDropdownButtonSize]: refs.toggleButtonSize,
12465
- [vars$m.inputDropdownButtonOffset]: globalRefs$e.spacing.xs,
12466
- [vars$m.overlayItemPaddingInlineStart]: globalRefs$e.spacing.xs,
12467
- [vars$m.overlayItemPaddingInlineEnd]: globalRefs$e.spacing.lg,
12743
+ [vars$o.hostWidth]: refs.width,
12744
+ [vars$o.hostDirection]: refs.direction,
12745
+ [vars$o.fontSize]: refs.fontSize,
12746
+ [vars$o.fontFamily]: refs.fontFamily,
12747
+ [vars$o.labelTextColor]: refs.labelTextColor,
12748
+ [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
12749
+ [vars$o.inputBorderColor]: refs.borderColor,
12750
+ [vars$o.inputBorderWidth]: refs.borderWidth,
12751
+ [vars$o.inputBorderStyle]: refs.borderStyle,
12752
+ [vars$o.inputBorderRadius]: refs.borderRadius,
12753
+ [vars$o.inputOutlineColor]: refs.outlineColor,
12754
+ [vars$o.inputOutlineOffset]: refs.outlineOffset,
12755
+ [vars$o.inputOutlineWidth]: refs.outlineWidth,
12756
+ [vars$o.inputOutlineStyle]: refs.outlineStyle,
12757
+ [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
12758
+ [vars$o.inputValueTextColor]: refs.valueTextColor,
12759
+ [vars$o.inputPlaceholderTextColor]: refs.placeholderTextColor,
12760
+ [vars$o.inputBackgroundColor]: refs.backgroundColor,
12761
+ [vars$o.inputHorizontalPadding]: refs.horizontalPadding,
12762
+ [vars$o.inputHeight]: refs.inputHeight,
12763
+ [vars$o.inputDropdownButtonColor]: globalRefs$g.colors.surface.dark,
12764
+ [vars$o.inputDropdownButtonCursor]: 'pointer',
12765
+ [vars$o.inputDropdownButtonSize]: refs.toggleButtonSize,
12766
+ [vars$o.inputDropdownButtonOffset]: globalRefs$g.spacing.xs,
12767
+ [vars$o.overlayItemPaddingInlineStart]: globalRefs$g.spacing.xs,
12768
+ [vars$o.overlayItemPaddingInlineEnd]: globalRefs$g.spacing.lg,
12468
12769
 
12469
12770
  _readonly: {
12470
- [vars$m.inputDropdownButtonCursor]: 'default',
12771
+ [vars$o.inputDropdownButtonCursor]: 'default',
12471
12772
  },
12472
12773
 
12473
12774
  // Overlay theme exposed via the component:
12474
- [vars$m.overlayFontSize]: refs.fontSize,
12475
- [vars$m.overlayFontFamily]: refs.fontFamily,
12476
- [vars$m.overlayCursor]: 'pointer',
12477
- [vars$m.overlayItemBoxShadow]: 'none',
12478
- [vars$m.overlayBackground]: refs.backgroundColor,
12479
- [vars$m.overlayTextColor]: refs.valueTextColor,
12775
+ [vars$o.overlayFontSize]: refs.fontSize,
12776
+ [vars$o.overlayFontFamily]: refs.fontFamily,
12777
+ [vars$o.overlayCursor]: 'pointer',
12778
+ [vars$o.overlayItemBoxShadow]: 'none',
12779
+ [vars$o.overlayBackground]: refs.backgroundColor,
12780
+ [vars$o.overlayTextColor]: refs.valueTextColor,
12480
12781
 
12481
12782
  // Overlay direct theme:
12482
- [vars$m.overlay.minHeight]: '400px',
12483
- [vars$m.overlay.margin]: '0',
12783
+ [vars$o.overlay.minHeight]: '400px',
12784
+ [vars$o.overlay.margin]: '0',
12484
12785
  };
12485
12786
 
12486
12787
  var comboBox$1 = /*#__PURE__*/Object.freeze({
12487
12788
  __proto__: null,
12488
12789
  comboBox: comboBox,
12489
12790
  default: comboBox,
12490
- vars: vars$m
12791
+ vars: vars$o
12491
12792
  });
12492
12793
 
12493
- const vars$l = ImageClass.cssVarList;
12794
+ const vars$n = ImageClass.cssVarList;
12494
12795
 
12495
12796
  const image = {};
12496
12797
 
12497
12798
  var image$1 = /*#__PURE__*/Object.freeze({
12498
12799
  __proto__: null,
12499
12800
  default: image,
12500
- vars: vars$l
12801
+ vars: vars$n
12501
12802
  });
12502
12803
 
12503
- const vars$k = PhoneFieldClass.cssVarList;
12804
+ const vars$m = PhoneFieldClass.cssVarList;
12504
12805
 
12505
12806
  const phoneField = {
12506
- [vars$k.hostWidth]: refs.width,
12507
- [vars$k.hostDirection]: refs.direction,
12508
- [vars$k.fontSize]: refs.fontSize,
12509
- [vars$k.fontFamily]: refs.fontFamily,
12510
- [vars$k.labelTextColor]: refs.labelTextColor,
12511
- [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
12512
- [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
12513
- [vars$k.inputValueTextColor]: refs.valueTextColor,
12514
- [vars$k.inputPlaceholderTextColor]: refs.placeholderTextColor,
12515
- [vars$k.inputBorderStyle]: refs.borderStyle,
12516
- [vars$k.inputBorderWidth]: refs.borderWidth,
12517
- [vars$k.inputBorderColor]: refs.borderColor,
12518
- [vars$k.inputBorderRadius]: refs.borderRadius,
12519
- [vars$k.inputOutlineStyle]: refs.outlineStyle,
12520
- [vars$k.inputOutlineWidth]: refs.outlineWidth,
12521
- [vars$k.inputOutlineColor]: refs.outlineColor,
12522
- [vars$k.inputOutlineOffset]: refs.outlineOffset,
12523
- [vars$k.phoneInputWidth]: refs.minWidth,
12524
- [vars$k.countryCodeInputWidth]: '5em',
12525
- [vars$k.countryCodeDropdownWidth]: '20em',
12807
+ [vars$m.hostWidth]: refs.width,
12808
+ [vars$m.hostDirection]: refs.direction,
12809
+ [vars$m.fontSize]: refs.fontSize,
12810
+ [vars$m.fontFamily]: refs.fontFamily,
12811
+ [vars$m.labelTextColor]: refs.labelTextColor,
12812
+ [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
12813
+ [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
12814
+ [vars$m.inputValueTextColor]: refs.valueTextColor,
12815
+ [vars$m.inputPlaceholderTextColor]: refs.placeholderTextColor,
12816
+ [vars$m.inputBorderStyle]: refs.borderStyle,
12817
+ [vars$m.inputBorderWidth]: refs.borderWidth,
12818
+ [vars$m.inputBorderColor]: refs.borderColor,
12819
+ [vars$m.inputBorderRadius]: refs.borderRadius,
12820
+ [vars$m.inputOutlineStyle]: refs.outlineStyle,
12821
+ [vars$m.inputOutlineWidth]: refs.outlineWidth,
12822
+ [vars$m.inputOutlineColor]: refs.outlineColor,
12823
+ [vars$m.inputOutlineOffset]: refs.outlineOffset,
12824
+ [vars$m.phoneInputWidth]: refs.minWidth,
12825
+ [vars$m.countryCodeInputWidth]: '5em',
12826
+ [vars$m.countryCodeDropdownWidth]: '20em',
12526
12827
 
12527
12828
  // '@overlay': {
12528
12829
  // overlayItemBackgroundColor: 'red'
@@ -12532,172 +12833,172 @@ const phoneField = {
12532
12833
  var phoneField$1 = /*#__PURE__*/Object.freeze({
12533
12834
  __proto__: null,
12534
12835
  default: phoneField,
12535
- vars: vars$k
12836
+ vars: vars$m
12536
12837
  });
12537
12838
 
12538
- const vars$j = PhoneFieldInputBoxClass.cssVarList;
12839
+ const vars$l = PhoneFieldInputBoxClass.cssVarList;
12539
12840
 
12540
12841
  const phoneInputBoxField = {
12541
- [vars$j.hostWidth]: '16em',
12542
- [vars$j.hostMinWidth]: refs.minWidth,
12543
- [vars$j.hostDirection]: refs.direction,
12544
- [vars$j.fontSize]: refs.fontSize,
12545
- [vars$j.fontFamily]: refs.fontFamily,
12546
- [vars$j.labelTextColor]: refs.labelTextColor,
12547
- [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
12548
- [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
12549
- [vars$j.inputValueTextColor]: refs.valueTextColor,
12550
- [vars$j.inputPlaceholderTextColor]: refs.placeholderTextColor,
12551
- [vars$j.inputBorderStyle]: refs.borderStyle,
12552
- [vars$j.inputBorderWidth]: refs.borderWidth,
12553
- [vars$j.inputBorderColor]: refs.borderColor,
12554
- [vars$j.inputBorderRadius]: refs.borderRadius,
12555
- [vars$j.inputOutlineStyle]: refs.outlineStyle,
12556
- [vars$j.inputOutlineWidth]: refs.outlineWidth,
12557
- [vars$j.inputOutlineColor]: refs.outlineColor,
12558
- [vars$j.inputOutlineOffset]: refs.outlineOffset,
12842
+ [vars$l.hostWidth]: '16em',
12843
+ [vars$l.hostMinWidth]: refs.minWidth,
12844
+ [vars$l.hostDirection]: refs.direction,
12845
+ [vars$l.fontSize]: refs.fontSize,
12846
+ [vars$l.fontFamily]: refs.fontFamily,
12847
+ [vars$l.labelTextColor]: refs.labelTextColor,
12848
+ [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
12849
+ [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
12850
+ [vars$l.inputValueTextColor]: refs.valueTextColor,
12851
+ [vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
12852
+ [vars$l.inputBorderStyle]: refs.borderStyle,
12853
+ [vars$l.inputBorderWidth]: refs.borderWidth,
12854
+ [vars$l.inputBorderColor]: refs.borderColor,
12855
+ [vars$l.inputBorderRadius]: refs.borderRadius,
12856
+ [vars$l.inputOutlineStyle]: refs.outlineStyle,
12857
+ [vars$l.inputOutlineWidth]: refs.outlineWidth,
12858
+ [vars$l.inputOutlineColor]: refs.outlineColor,
12859
+ [vars$l.inputOutlineOffset]: refs.outlineOffset,
12559
12860
  _fullWidth: {
12560
- [vars$j.hostWidth]: refs.width,
12861
+ [vars$l.hostWidth]: refs.width,
12561
12862
  },
12562
12863
  };
12563
12864
 
12564
12865
  var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
12565
12866
  __proto__: null,
12566
12867
  default: phoneInputBoxField,
12567
- vars: vars$j
12868
+ vars: vars$l
12568
12869
  });
12569
12870
 
12570
- const globalRefs$d = getThemeRefs(globals);
12571
- const vars$i = NewPasswordClass.cssVarList;
12871
+ const globalRefs$f = getThemeRefs(globals);
12872
+ const vars$k = NewPasswordClass.cssVarList;
12572
12873
 
12573
12874
  const newPassword = {
12574
- [vars$i.hostWidth]: refs.width,
12575
- [vars$i.hostMinWidth]: refs.minWidth,
12576
- [vars$i.hostDirection]: refs.direction,
12577
- [vars$i.fontSize]: refs.fontSize,
12578
- [vars$i.fontFamily]: refs.fontFamily,
12579
- [vars$i.spaceBetweenInputs]: '1em',
12580
- [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
12581
- [vars$i.policyPreviewBackgroundColor]: 'none',
12582
- [vars$i.policyPreviewPadding]: globalRefs$d.spacing.lg,
12875
+ [vars$k.hostWidth]: refs.width,
12876
+ [vars$k.hostMinWidth]: refs.minWidth,
12877
+ [vars$k.hostDirection]: refs.direction,
12878
+ [vars$k.fontSize]: refs.fontSize,
12879
+ [vars$k.fontFamily]: refs.fontFamily,
12880
+ [vars$k.spaceBetweenInputs]: '1em',
12881
+ [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
12882
+ [vars$k.policyPreviewBackgroundColor]: 'none',
12883
+ [vars$k.policyPreviewPadding]: globalRefs$f.spacing.lg,
12583
12884
 
12584
12885
  _required: {
12585
12886
  // NewPassword doesn't pass `required` attribute to its Password components.
12586
12887
  // That's why we fake the required indicator on each input.
12587
12888
  // We do that by injecting `::after` element, and populating it with requiredIndicator content.
12588
- [vars$i.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
12889
+ [vars$k.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
12589
12890
  },
12590
12891
  };
12591
12892
 
12592
12893
  var newPassword$1 = /*#__PURE__*/Object.freeze({
12593
12894
  __proto__: null,
12594
12895
  default: newPassword,
12595
- vars: vars$i
12896
+ vars: vars$k
12596
12897
  });
12597
12898
 
12598
- const vars$h = UploadFileClass.cssVarList;
12899
+ const vars$j = UploadFileClass.cssVarList;
12599
12900
 
12600
12901
  const uploadFile = {
12601
- [vars$h.hostDirection]: refs.direction,
12602
- [vars$h.labelTextColor]: refs.labelTextColor,
12603
- [vars$h.fontFamily]: refs.fontFamily,
12902
+ [vars$j.hostDirection]: refs.direction,
12903
+ [vars$j.labelTextColor]: refs.labelTextColor,
12904
+ [vars$j.fontFamily]: refs.fontFamily,
12604
12905
 
12605
- [vars$h.iconSize]: '2em',
12906
+ [vars$j.iconSize]: '2em',
12606
12907
 
12607
- [vars$h.hostPadding]: '0.75em',
12608
- [vars$h.gap]: '0.5em',
12908
+ [vars$j.hostPadding]: '0.75em',
12909
+ [vars$j.gap]: '0.5em',
12609
12910
 
12610
- [vars$h.fontSize]: '16px',
12611
- [vars$h.titleFontWeight]: '500',
12612
- [vars$h.lineHeight]: '1em',
12911
+ [vars$j.fontSize]: '16px',
12912
+ [vars$j.titleFontWeight]: '500',
12913
+ [vars$j.lineHeight]: '1em',
12613
12914
 
12614
- [vars$h.borderWidth]: refs.borderWidth,
12615
- [vars$h.borderColor]: refs.borderColor,
12616
- [vars$h.borderRadius]: refs.borderRadius,
12617
- [vars$h.borderStyle]: 'dashed',
12915
+ [vars$j.borderWidth]: refs.borderWidth,
12916
+ [vars$j.borderColor]: refs.borderColor,
12917
+ [vars$j.borderRadius]: refs.borderRadius,
12918
+ [vars$j.borderStyle]: 'dashed',
12618
12919
 
12619
12920
  _required: {
12620
- [vars$h.requiredIndicator]: refs.requiredIndicator,
12921
+ [vars$j.requiredIndicator]: refs.requiredIndicator,
12621
12922
  },
12622
12923
 
12623
12924
  size: {
12624
12925
  xs: {
12625
- [vars$h.hostHeight]: '196px',
12626
- [vars$h.hostWidth]: '200px',
12627
- [vars$h.titleFontSize]: '0.875em',
12628
- [vars$h.descriptionFontSize]: '0.875em',
12629
- [vars$h.lineHeight]: '1.25em',
12926
+ [vars$j.hostHeight]: '196px',
12927
+ [vars$j.hostWidth]: '200px',
12928
+ [vars$j.titleFontSize]: '0.875em',
12929
+ [vars$j.descriptionFontSize]: '0.875em',
12930
+ [vars$j.lineHeight]: '1.25em',
12630
12931
  },
12631
12932
  sm: {
12632
- [vars$h.hostHeight]: '216px',
12633
- [vars$h.hostWidth]: '230px',
12634
- [vars$h.titleFontSize]: '1em',
12635
- [vars$h.descriptionFontSize]: '0.875em',
12636
- [vars$h.lineHeight]: '1.25em',
12933
+ [vars$j.hostHeight]: '216px',
12934
+ [vars$j.hostWidth]: '230px',
12935
+ [vars$j.titleFontSize]: '1em',
12936
+ [vars$j.descriptionFontSize]: '0.875em',
12937
+ [vars$j.lineHeight]: '1.25em',
12637
12938
  },
12638
12939
  md: {
12639
- [vars$h.hostHeight]: '256px',
12640
- [vars$h.hostWidth]: '312px',
12641
- [vars$h.titleFontSize]: '1.125em',
12642
- [vars$h.descriptionFontSize]: '1em',
12643
- [vars$h.lineHeight]: '1.5em',
12940
+ [vars$j.hostHeight]: '256px',
12941
+ [vars$j.hostWidth]: '312px',
12942
+ [vars$j.titleFontSize]: '1.125em',
12943
+ [vars$j.descriptionFontSize]: '1em',
12944
+ [vars$j.lineHeight]: '1.5em',
12644
12945
  },
12645
12946
  lg: {
12646
- [vars$h.hostHeight]: '280px',
12647
- [vars$h.hostWidth]: '336px',
12648
- [vars$h.titleFontSize]: '1.125em',
12649
- [vars$h.descriptionFontSize]: '1.125em',
12650
- [vars$h.lineHeight]: '1.75em',
12947
+ [vars$j.hostHeight]: '280px',
12948
+ [vars$j.hostWidth]: '336px',
12949
+ [vars$j.titleFontSize]: '1.125em',
12950
+ [vars$j.descriptionFontSize]: '1.125em',
12951
+ [vars$j.lineHeight]: '1.75em',
12651
12952
  },
12652
12953
  },
12653
12954
 
12654
12955
  _fullWidth: {
12655
- [vars$h.hostWidth]: refs.width,
12956
+ [vars$j.hostWidth]: refs.width,
12656
12957
  },
12657
12958
  };
12658
12959
 
12659
12960
  var uploadFile$1 = /*#__PURE__*/Object.freeze({
12660
12961
  __proto__: null,
12661
12962
  default: uploadFile,
12662
- vars: vars$h
12963
+ vars: vars$j
12663
12964
  });
12664
12965
 
12665
- const globalRefs$c = getThemeRefs(globals);
12966
+ const globalRefs$e = getThemeRefs(globals);
12666
12967
 
12667
- const vars$g = ButtonSelectionGroupItemClass.cssVarList;
12968
+ const vars$i = ButtonSelectionGroupItemClass.cssVarList;
12668
12969
 
12669
12970
  const buttonSelectionGroupItem = {
12670
- [vars$g.hostDirection]: 'inherit',
12671
- [vars$g.backgroundColor]: globalRefs$c.colors.surface.main,
12672
- [vars$g.labelTextColor]: globalRefs$c.colors.surface.contrast,
12673
- [vars$g.borderColor]: globalRefs$c.colors.surface.light,
12674
- [vars$g.borderStyle]: 'solid',
12675
- [vars$g.borderRadius]: globalRefs$c.radius.sm,
12676
- [vars$g.outlineColor]: 'transparent',
12677
- [vars$g.borderWidth]: globalRefs$c.border.xs,
12971
+ [vars$i.hostDirection]: 'inherit',
12972
+ [vars$i.backgroundColor]: globalRefs$e.colors.surface.main,
12973
+ [vars$i.labelTextColor]: globalRefs$e.colors.surface.contrast,
12974
+ [vars$i.borderColor]: globalRefs$e.colors.surface.light,
12975
+ [vars$i.borderStyle]: 'solid',
12976
+ [vars$i.borderRadius]: globalRefs$e.radius.sm,
12977
+ [vars$i.outlineColor]: 'transparent',
12978
+ [vars$i.borderWidth]: globalRefs$e.border.xs,
12678
12979
 
12679
12980
  _hover: {
12680
- [vars$g.backgroundColor]: globalRefs$c.colors.surface.highlight,
12981
+ [vars$i.backgroundColor]: globalRefs$e.colors.surface.highlight,
12681
12982
  },
12682
12983
 
12683
12984
  _focused: {
12684
- [vars$g.outlineColor]: globalRefs$c.colors.surface.light,
12985
+ [vars$i.outlineColor]: globalRefs$e.colors.surface.light,
12685
12986
  },
12686
12987
 
12687
12988
  _selected: {
12688
- [vars$g.borderColor]: globalRefs$c.colors.surface.contrast,
12689
- [vars$g.backgroundColor]: globalRefs$c.colors.surface.contrast,
12690
- [vars$g.labelTextColor]: globalRefs$c.colors.surface.main,
12989
+ [vars$i.borderColor]: globalRefs$e.colors.surface.contrast,
12990
+ [vars$i.backgroundColor]: globalRefs$e.colors.surface.contrast,
12991
+ [vars$i.labelTextColor]: globalRefs$e.colors.surface.main,
12691
12992
  },
12692
12993
  };
12693
12994
 
12694
12995
  var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
12695
12996
  __proto__: null,
12696
12997
  default: buttonSelectionGroupItem,
12697
- vars: vars$g
12998
+ vars: vars$i
12698
12999
  });
12699
13000
 
12700
- const globalRefs$b = getThemeRefs(globals);
13001
+ const globalRefs$d = getThemeRefs(globals);
12701
13002
 
12702
13003
  const createBaseButtonSelectionGroupMappings = (vars) => ({
12703
13004
  [vars.hostDirection]: refs.direction,
@@ -12705,84 +13006,84 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
12705
13006
  [vars.labelTextColor]: refs.labelTextColor,
12706
13007
  [vars.labelRequiredIndicator]: refs.requiredIndicator,
12707
13008
  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
12708
- [vars.itemsSpacing]: globalRefs$b.spacing.sm,
13009
+ [vars.itemsSpacing]: globalRefs$d.spacing.sm,
12709
13010
  [vars.hostWidth]: refs.width,
12710
13011
  });
12711
13012
 
12712
- const vars$f = ButtonSelectionGroupClass.cssVarList;
13013
+ const vars$h = ButtonSelectionGroupClass.cssVarList;
12713
13014
 
12714
13015
  const buttonSelectionGroup = {
12715
- ...createBaseButtonSelectionGroupMappings(vars$f),
13016
+ ...createBaseButtonSelectionGroupMappings(vars$h),
12716
13017
  };
12717
13018
 
12718
13019
  var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
12719
13020
  __proto__: null,
12720
13021
  default: buttonSelectionGroup,
12721
- vars: vars$f
13022
+ vars: vars$h
12722
13023
  });
12723
13024
 
12724
- const vars$e = ButtonMultiSelectionGroupClass.cssVarList;
13025
+ const vars$g = ButtonMultiSelectionGroupClass.cssVarList;
12725
13026
 
12726
13027
  const buttonMultiSelectionGroup = {
12727
- ...createBaseButtonSelectionGroupMappings(vars$e),
13028
+ ...createBaseButtonSelectionGroupMappings(vars$g),
12728
13029
  };
12729
13030
 
12730
13031
  var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
12731
13032
  __proto__: null,
12732
13033
  default: buttonMultiSelectionGroup,
12733
- vars: vars$e
13034
+ vars: vars$g
12734
13035
  });
12735
13036
 
12736
- const globalRefs$a = getThemeRefs(globals);
13037
+ const globalRefs$c = getThemeRefs(globals);
12737
13038
 
12738
13039
  const compVars$1 = ModalClass.cssVarList;
12739
13040
 
12740
13041
  const modal = {
12741
- [compVars$1.overlayBackgroundColor]: globalRefs$a.colors.surface.main,
12742
- [compVars$1.overlayShadow]: globalRefs$a.shadow.wide['2xl'],
13042
+ [compVars$1.overlayBackgroundColor]: globalRefs$c.colors.surface.main,
13043
+ [compVars$1.overlayShadow]: globalRefs$c.shadow.wide['2xl'],
12743
13044
  [compVars$1.overlayWidth]: '540px',
12744
13045
  };
12745
13046
 
12746
- const vars$d = {
13047
+ const vars$f = {
12747
13048
  ...compVars$1,
12748
13049
  };
12749
13050
 
12750
13051
  var modal$1 = /*#__PURE__*/Object.freeze({
12751
13052
  __proto__: null,
12752
13053
  default: modal,
12753
- vars: vars$d
13054
+ vars: vars$f
12754
13055
  });
12755
13056
 
12756
- const globalRefs$9 = getThemeRefs(globals);
12757
- const vars$c = GridClass.cssVarList;
13057
+ const globalRefs$b = getThemeRefs(globals);
13058
+ const vars$e = GridClass.cssVarList;
12758
13059
 
12759
13060
  const grid = {
12760
- [vars$c.hostWidth]: '100%',
12761
- [vars$c.hostHeight]: '100%',
12762
- [vars$c.hostMinHeight]: '400px',
12763
- [vars$c.fontWeight]: '400',
12764
- [vars$c.backgroundColor]: globalRefs$9.colors.surface.main,
13061
+ [vars$e.hostWidth]: '100%',
13062
+ [vars$e.hostHeight]: '100%',
13063
+ [vars$e.hostMinHeight]: '400px',
13064
+ [vars$e.fontWeight]: '400',
13065
+ [vars$e.backgroundColor]: globalRefs$b.colors.surface.main,
12765
13066
 
12766
- [vars$c.fontSize]: refs.fontSize,
12767
- [vars$c.fontFamily]: refs.fontFamily,
13067
+ [vars$e.fontSize]: refs.fontSize,
13068
+ [vars$e.fontFamily]: refs.fontFamily,
12768
13069
 
12769
- [vars$c.sortIndicatorsColor]: globalRefs$9.colors.surface.light,
12770
- [vars$c.activeSortIndicator]: globalRefs$9.colors.surface.dark,
12771
- [vars$c.resizeHandleColor]: globalRefs$9.colors.surface.light,
13070
+ [vars$e.sortIndicatorsColor]: globalRefs$b.colors.surface.light,
13071
+ [vars$e.activeSortIndicator]: globalRefs$b.colors.surface.dark,
13072
+ [vars$e.resizeHandleColor]: globalRefs$b.colors.surface.light,
12772
13073
 
12773
- [vars$c.borderWidth]: refs.borderWidth,
12774
- [vars$c.borderStyle]: refs.borderStyle,
12775
- [vars$c.borderRadius]: refs.borderRadius,
12776
- [vars$c.borderColor]: 'transparent',
13074
+ [vars$e.borderWidth]: refs.borderWidth,
13075
+ [vars$e.borderStyle]: refs.borderStyle,
13076
+ [vars$e.borderRadius]: refs.borderRadius,
13077
+ [vars$e.borderColor]: 'transparent',
12777
13078
 
12778
- [vars$c.headerRowTextColor]: globalRefs$9.colors.surface.dark,
12779
- [vars$c.separatorColor]: globalRefs$9.colors.surface.light,
13079
+ [vars$e.headerRowTextColor]: globalRefs$b.colors.surface.dark,
13080
+ [vars$e.separatorColor]: globalRefs$b.colors.surface.light,
12780
13081
 
12781
- [vars$c.valueTextColor]: globalRefs$9.colors.surface.contrast,
12782
- [vars$c.selectedBackgroundColor]: globalRefs$9.colors.surface.highlight,
13082
+ [vars$e.valueTextColor]: globalRefs$b.colors.surface.contrast,
13083
+ [vars$e.selectedBackgroundColor]: globalRefs$b.colors.surface.highlight,
12783
13084
 
12784
13085
  _bordered: {
12785
- [vars$c.borderColor]: refs.borderColor,
13086
+ [vars$e.borderColor]: refs.borderColor,
12786
13087
  },
12787
13088
  };
12788
13089
 
@@ -12790,53 +13091,53 @@ var grid$1 = /*#__PURE__*/Object.freeze({
12790
13091
  __proto__: null,
12791
13092
  default: grid,
12792
13093
  grid: grid,
12793
- vars: vars$c
13094
+ vars: vars$e
12794
13095
  });
12795
13096
 
12796
- const globalRefs$8 = getThemeRefs(globals);
12797
- const vars$b = NotificationCardClass.cssVarList;
13097
+ const globalRefs$a = getThemeRefs(globals);
13098
+ const vars$d = NotificationCardClass.cssVarList;
12798
13099
 
12799
13100
  const shadowColor = '#00000020';
12800
13101
 
12801
13102
  const notification = {
12802
- [vars$b.hostMinWidth]: '415px',
12803
- [vars$b.fontFamily]: globalRefs$8.fonts.font1.family,
12804
- [vars$b.fontSize]: globalRefs$8.typography.body1.size,
12805
- [vars$b.backgroundColor]: globalRefs$8.colors.surface.main,
12806
- [vars$b.textColor]: globalRefs$8.colors.surface.contrast,
12807
- [vars$b.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${shadowColor}`,
12808
- [vars$b.verticalPadding]: '0.625em',
12809
- [vars$b.horizontalPadding]: '1.5em',
12810
- [vars$b.borderRadius]: globalRefs$8.radius.xs,
13103
+ [vars$d.hostMinWidth]: '415px',
13104
+ [vars$d.fontFamily]: globalRefs$a.fonts.font1.family,
13105
+ [vars$d.fontSize]: globalRefs$a.typography.body1.size,
13106
+ [vars$d.backgroundColor]: globalRefs$a.colors.surface.main,
13107
+ [vars$d.textColor]: globalRefs$a.colors.surface.contrast,
13108
+ [vars$d.boxShadow]: `${globalRefs$a.shadow.wide.xl} ${shadowColor}, ${globalRefs$a.shadow.narrow.xl} ${shadowColor}`,
13109
+ [vars$d.verticalPadding]: '0.625em',
13110
+ [vars$d.horizontalPadding]: '1.5em',
13111
+ [vars$d.borderRadius]: globalRefs$a.radius.xs,
12811
13112
 
12812
13113
  _bordered: {
12813
- [vars$b.borderWidth]: globalRefs$8.border.sm,
12814
- [vars$b.borderStyle]: 'solid',
12815
- [vars$b.borderColor]: 'transparent',
13114
+ [vars$d.borderWidth]: globalRefs$a.border.sm,
13115
+ [vars$d.borderStyle]: 'solid',
13116
+ [vars$d.borderColor]: 'transparent',
12816
13117
  },
12817
13118
 
12818
13119
  size: {
12819
- xs: { [vars$b.fontSize]: '12px' },
12820
- sm: { [vars$b.fontSize]: '14px' },
12821
- md: { [vars$b.fontSize]: '16px' },
12822
- lg: { [vars$b.fontSize]: '18px' },
13120
+ xs: { [vars$d.fontSize]: '12px' },
13121
+ sm: { [vars$d.fontSize]: '14px' },
13122
+ md: { [vars$d.fontSize]: '16px' },
13123
+ lg: { [vars$d.fontSize]: '18px' },
12823
13124
  },
12824
13125
 
12825
13126
  mode: {
12826
13127
  primary: {
12827
- [vars$b.backgroundColor]: globalRefs$8.colors.primary.main,
12828
- [vars$b.textColor]: globalRefs$8.colors.primary.contrast,
12829
- [vars$b.borderColor]: globalRefs$8.colors.primary.light,
13128
+ [vars$d.backgroundColor]: globalRefs$a.colors.primary.main,
13129
+ [vars$d.textColor]: globalRefs$a.colors.primary.contrast,
13130
+ [vars$d.borderColor]: globalRefs$a.colors.primary.light,
12830
13131
  },
12831
13132
  success: {
12832
- [vars$b.backgroundColor]: globalRefs$8.colors.success.main,
12833
- [vars$b.textColor]: globalRefs$8.colors.success.contrast,
12834
- [vars$b.borderColor]: globalRefs$8.colors.success.light,
13133
+ [vars$d.backgroundColor]: globalRefs$a.colors.success.main,
13134
+ [vars$d.textColor]: globalRefs$a.colors.success.contrast,
13135
+ [vars$d.borderColor]: globalRefs$a.colors.success.light,
12835
13136
  },
12836
13137
  error: {
12837
- [vars$b.backgroundColor]: globalRefs$8.colors.error.main,
12838
- [vars$b.textColor]: globalRefs$8.colors.error.contrast,
12839
- [vars$b.borderColor]: globalRefs$8.colors.error.light,
13138
+ [vars$d.backgroundColor]: globalRefs$a.colors.error.main,
13139
+ [vars$d.textColor]: globalRefs$a.colors.error.contrast,
13140
+ [vars$d.borderColor]: globalRefs$a.colors.error.light,
12840
13141
  },
12841
13142
  },
12842
13143
  };
@@ -12844,128 +13145,128 @@ const notification = {
12844
13145
  var notificationCard = /*#__PURE__*/Object.freeze({
12845
13146
  __proto__: null,
12846
13147
  default: notification,
12847
- vars: vars$b
13148
+ vars: vars$d
12848
13149
  });
12849
13150
 
12850
- const globalRefs$7 = getThemeRefs(globals);
12851
- const vars$a = MultiSelectComboBoxClass.cssVarList;
13151
+ const globalRefs$9 = getThemeRefs(globals);
13152
+ const vars$c = MultiSelectComboBoxClass.cssVarList;
12852
13153
 
12853
13154
  const multiSelectComboBox = {
12854
- [vars$a.hostWidth]: refs.width,
12855
- [vars$a.hostDirection]: refs.direction,
12856
- [vars$a.fontSize]: refs.fontSize,
12857
- [vars$a.fontFamily]: refs.fontFamily,
12858
- [vars$a.labelTextColor]: refs.labelTextColor,
12859
- [vars$a.errorMessageTextColor]: refs.errorMessageTextColor,
12860
- [vars$a.inputBorderColor]: refs.borderColor,
12861
- [vars$a.inputBorderWidth]: refs.borderWidth,
12862
- [vars$a.inputBorderStyle]: refs.borderStyle,
12863
- [vars$a.inputBorderRadius]: refs.borderRadius,
12864
- [vars$a.inputOutlineColor]: refs.outlineColor,
12865
- [vars$a.inputOutlineOffset]: refs.outlineOffset,
12866
- [vars$a.inputOutlineWidth]: refs.outlineWidth,
12867
- [vars$a.inputOutlineStyle]: refs.outlineStyle,
12868
- [vars$a.labelRequiredIndicator]: refs.requiredIndicator,
12869
- [vars$a.inputValueTextColor]: refs.valueTextColor,
12870
- [vars$a.inputPlaceholderTextColor]: refs.placeholderTextColor,
12871
- [vars$a.inputBackgroundColor]: refs.backgroundColor,
12872
- [vars$a.inputHorizontalPadding]: refs.horizontalPadding,
12873
- [vars$a.inputVerticalPadding]: refs.verticalPadding,
12874
- [vars$a.inputHeight]: refs.inputHeight,
12875
- [vars$a.inputDropdownButtonColor]: globalRefs$7.colors.surface.dark,
12876
- [vars$a.inputDropdownButtonCursor]: 'pointer',
12877
- [vars$a.inputDropdownButtonSize]: refs.toggleButtonSize,
12878
- [vars$a.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
12879
- [vars$a.overlayItemPaddingInlineStart]: globalRefs$7.spacing.xs,
12880
- [vars$a.overlayItemPaddingInlineEnd]: globalRefs$7.spacing.lg,
12881
- [vars$a.chipFontSize]: refs.chipFontSize,
12882
- [vars$a.chipTextColor]: globalRefs$7.colors.surface.contrast,
12883
- [vars$a.chipBackgroundColor]: globalRefs$7.colors.surface.light,
13155
+ [vars$c.hostWidth]: refs.width,
13156
+ [vars$c.hostDirection]: refs.direction,
13157
+ [vars$c.fontSize]: refs.fontSize,
13158
+ [vars$c.fontFamily]: refs.fontFamily,
13159
+ [vars$c.labelTextColor]: refs.labelTextColor,
13160
+ [vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
13161
+ [vars$c.inputBorderColor]: refs.borderColor,
13162
+ [vars$c.inputBorderWidth]: refs.borderWidth,
13163
+ [vars$c.inputBorderStyle]: refs.borderStyle,
13164
+ [vars$c.inputBorderRadius]: refs.borderRadius,
13165
+ [vars$c.inputOutlineColor]: refs.outlineColor,
13166
+ [vars$c.inputOutlineOffset]: refs.outlineOffset,
13167
+ [vars$c.inputOutlineWidth]: refs.outlineWidth,
13168
+ [vars$c.inputOutlineStyle]: refs.outlineStyle,
13169
+ [vars$c.labelRequiredIndicator]: refs.requiredIndicator,
13170
+ [vars$c.inputValueTextColor]: refs.valueTextColor,
13171
+ [vars$c.inputPlaceholderTextColor]: refs.placeholderTextColor,
13172
+ [vars$c.inputBackgroundColor]: refs.backgroundColor,
13173
+ [vars$c.inputHorizontalPadding]: refs.horizontalPadding,
13174
+ [vars$c.inputVerticalPadding]: refs.verticalPadding,
13175
+ [vars$c.inputHeight]: refs.inputHeight,
13176
+ [vars$c.inputDropdownButtonColor]: globalRefs$9.colors.surface.dark,
13177
+ [vars$c.inputDropdownButtonCursor]: 'pointer',
13178
+ [vars$c.inputDropdownButtonSize]: refs.toggleButtonSize,
13179
+ [vars$c.inputDropdownButtonOffset]: globalRefs$9.spacing.xs,
13180
+ [vars$c.overlayItemPaddingInlineStart]: globalRefs$9.spacing.xs,
13181
+ [vars$c.overlayItemPaddingInlineEnd]: globalRefs$9.spacing.lg,
13182
+ [vars$c.chipFontSize]: refs.chipFontSize,
13183
+ [vars$c.chipTextColor]: globalRefs$9.colors.surface.contrast,
13184
+ [vars$c.chipBackgroundColor]: globalRefs$9.colors.surface.light,
12884
13185
 
12885
13186
  _readonly: {
12886
- [vars$a.inputDropdownButtonCursor]: 'default',
13187
+ [vars$c.inputDropdownButtonCursor]: 'default',
12887
13188
  },
12888
13189
 
12889
13190
  // Overlay theme exposed via the component:
12890
- [vars$a.overlayFontSize]: refs.fontSize,
12891
- [vars$a.overlayFontFamily]: refs.fontFamily,
12892
- [vars$a.overlayCursor]: 'pointer',
12893
- [vars$a.overlayItemBoxShadow]: 'none',
12894
- [vars$a.overlayBackground]: refs.backgroundColor,
12895
- [vars$a.overlayTextColor]: refs.valueTextColor,
13191
+ [vars$c.overlayFontSize]: refs.fontSize,
13192
+ [vars$c.overlayFontFamily]: refs.fontFamily,
13193
+ [vars$c.overlayCursor]: 'pointer',
13194
+ [vars$c.overlayItemBoxShadow]: 'none',
13195
+ [vars$c.overlayBackground]: refs.backgroundColor,
13196
+ [vars$c.overlayTextColor]: refs.valueTextColor,
12896
13197
 
12897
13198
  // Overlay direct theme:
12898
- [vars$a.overlay.minHeight]: '400px',
12899
- [vars$a.overlay.margin]: '0',
13199
+ [vars$c.overlay.minHeight]: '400px',
13200
+ [vars$c.overlay.margin]: '0',
12900
13201
  };
12901
13202
 
12902
13203
  var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
12903
13204
  __proto__: null,
12904
13205
  default: multiSelectComboBox,
12905
13206
  multiSelectComboBox: multiSelectComboBox,
12906
- vars: vars$a
13207
+ vars: vars$c
12907
13208
  });
12908
13209
 
12909
- const globalRefs$6 = getThemeRefs(globals);
12910
- const vars$9 = BadgeClass.cssVarList;
13210
+ const globalRefs$8 = getThemeRefs(globals);
13211
+ const vars$b = BadgeClass.cssVarList;
12911
13212
 
12912
13213
  const badge = {
12913
- [vars$9.hostWidth]: 'fit-content',
12914
- [vars$9.hostDirection]: globalRefs$6.direction,
13214
+ [vars$b.hostWidth]: 'fit-content',
13215
+ [vars$b.hostDirection]: globalRefs$8.direction,
12915
13216
 
12916
- [vars$9.textAlign]: 'center',
13217
+ [vars$b.textAlign]: 'center',
12917
13218
 
12918
- [vars$9.fontFamily]: globalRefs$6.fonts.font1.family,
12919
- [vars$9.fontWeight]: '400',
13219
+ [vars$b.fontFamily]: globalRefs$8.fonts.font1.family,
13220
+ [vars$b.fontWeight]: '400',
12920
13221
 
12921
- [vars$9.verticalPadding]: '0.25em',
12922
- [vars$9.horizontalPadding]: '0.5em',
13222
+ [vars$b.verticalPadding]: '0.25em',
13223
+ [vars$b.horizontalPadding]: '0.5em',
12923
13224
 
12924
- [vars$9.borderWidth]: globalRefs$6.border.xs,
12925
- [vars$9.borderRadius]: globalRefs$6.radius.xs,
12926
- [vars$9.borderColor]: 'transparent',
12927
- [vars$9.borderStyle]: 'solid',
13225
+ [vars$b.borderWidth]: globalRefs$8.border.xs,
13226
+ [vars$b.borderRadius]: globalRefs$8.radius.xs,
13227
+ [vars$b.borderColor]: 'transparent',
13228
+ [vars$b.borderStyle]: 'solid',
12928
13229
 
12929
13230
  _fullWidth: {
12930
- [vars$9.hostWidth]: '100%',
13231
+ [vars$b.hostWidth]: '100%',
12931
13232
  },
12932
13233
 
12933
13234
  size: {
12934
- xs: { [vars$9.fontSize]: '12px' },
12935
- sm: { [vars$9.fontSize]: '14px' },
12936
- md: { [vars$9.fontSize]: '16px' },
12937
- lg: { [vars$9.fontSize]: '18px' },
13235
+ xs: { [vars$b.fontSize]: '12px' },
13236
+ sm: { [vars$b.fontSize]: '14px' },
13237
+ md: { [vars$b.fontSize]: '16px' },
13238
+ lg: { [vars$b.fontSize]: '18px' },
12938
13239
  },
12939
13240
 
12940
13241
  mode: {
12941
13242
  default: {
12942
- [vars$9.textColor]: globalRefs$6.colors.surface.dark,
13243
+ [vars$b.textColor]: globalRefs$8.colors.surface.dark,
12943
13244
  _bordered: {
12944
- [vars$9.borderColor]: globalRefs$6.colors.surface.light,
13245
+ [vars$b.borderColor]: globalRefs$8.colors.surface.light,
12945
13246
  },
12946
13247
  },
12947
13248
  primary: {
12948
- [vars$9.textColor]: globalRefs$6.colors.primary.main,
13249
+ [vars$b.textColor]: globalRefs$8.colors.primary.main,
12949
13250
  _bordered: {
12950
- [vars$9.borderColor]: globalRefs$6.colors.primary.light,
13251
+ [vars$b.borderColor]: globalRefs$8.colors.primary.light,
12951
13252
  },
12952
13253
  },
12953
13254
  secondary: {
12954
- [vars$9.textColor]: globalRefs$6.colors.secondary.main,
13255
+ [vars$b.textColor]: globalRefs$8.colors.secondary.main,
12955
13256
  _bordered: {
12956
- [vars$9.borderColor]: globalRefs$6.colors.secondary.light,
13257
+ [vars$b.borderColor]: globalRefs$8.colors.secondary.light,
12957
13258
  },
12958
13259
  },
12959
13260
  error: {
12960
- [vars$9.textColor]: globalRefs$6.colors.error.main,
13261
+ [vars$b.textColor]: globalRefs$8.colors.error.main,
12961
13262
  _bordered: {
12962
- [vars$9.borderColor]: globalRefs$6.colors.error.light,
13263
+ [vars$b.borderColor]: globalRefs$8.colors.error.light,
12963
13264
  },
12964
13265
  },
12965
13266
  success: {
12966
- [vars$9.textColor]: globalRefs$6.colors.success.main,
13267
+ [vars$b.textColor]: globalRefs$8.colors.success.main,
12967
13268
  _bordered: {
12968
- [vars$9.borderColor]: globalRefs$6.colors.success.light,
13269
+ [vars$b.borderColor]: globalRefs$8.colors.success.light,
12969
13270
  },
12970
13271
  },
12971
13272
  },
@@ -12974,19 +13275,19 @@ const badge = {
12974
13275
  var badge$1 = /*#__PURE__*/Object.freeze({
12975
13276
  __proto__: null,
12976
13277
  default: badge,
12977
- vars: vars$9
13278
+ vars: vars$b
12978
13279
  });
12979
13280
 
12980
- const globalRefs$5 = getThemeRefs(globals);
13281
+ const globalRefs$7 = getThemeRefs(globals);
12981
13282
  const compVars = AvatarClass.cssVarList;
12982
13283
 
12983
13284
  const avatar = {
12984
- [compVars.hostDirection]: globalRefs$5.direction,
12985
- [compVars.editableIconColor]: globalRefs$5.colors.surface.dark,
12986
- [compVars.editableBorderColor]: globalRefs$5.colors.surface.dark,
12987
- [compVars.editableBackgroundColor]: globalRefs$5.colors.surface.main,
12988
- [compVars.avatarTextColor]: globalRefs$5.colors.surface.main,
12989
- [compVars.avatarBackgroundColor]: globalRefs$5.colors.surface.dark,
13285
+ [compVars.hostDirection]: globalRefs$7.direction,
13286
+ [compVars.editableIconColor]: globalRefs$7.colors.surface.dark,
13287
+ [compVars.editableBorderColor]: globalRefs$7.colors.surface.dark,
13288
+ [compVars.editableBackgroundColor]: globalRefs$7.colors.surface.main,
13289
+ [compVars.avatarTextColor]: globalRefs$7.colors.surface.main,
13290
+ [compVars.avatarBackgroundColor]: globalRefs$7.colors.surface.dark,
12990
13291
 
12991
13292
  _editable: {
12992
13293
  [compVars.cursor]: 'pointer',
@@ -13012,143 +13313,143 @@ const avatar = {
13012
13313
  },
13013
13314
  };
13014
13315
 
13015
- const vars$8 = {
13316
+ const vars$a = {
13016
13317
  ...compVars,
13017
13318
  };
13018
13319
 
13019
13320
  var avatar$1 = /*#__PURE__*/Object.freeze({
13020
13321
  __proto__: null,
13021
13322
  default: avatar,
13022
- vars: vars$8
13323
+ vars: vars$a
13023
13324
  });
13024
13325
 
13025
- const globalRefs$4 = getThemeRefs(globals);
13326
+ const globalRefs$6 = getThemeRefs(globals);
13026
13327
 
13027
- const vars$7 = MappingsFieldClass.cssVarList;
13328
+ const vars$9 = MappingsFieldClass.cssVarList;
13028
13329
 
13029
13330
  const mappingsField = {
13030
- [vars$7.hostWidth]: refs.width,
13031
- [vars$7.hostDirection]: refs.direction,
13032
- [vars$7.fontSize]: refs.fontSize,
13033
- [vars$7.fontFamily]: refs.fontFamily,
13034
- [vars$7.separatorFontSize]: '14px',
13035
- [vars$7.labelsFontSize]: '14px',
13036
- [vars$7.labelsLineHeight]: '1',
13037
- [vars$7.labelsMarginBottom]: '6px',
13038
- [vars$7.labelTextColor]: refs.labelTextColor,
13039
- [vars$7.itemMarginBottom]: '1em',
13331
+ [vars$9.hostWidth]: refs.width,
13332
+ [vars$9.hostDirection]: refs.direction,
13333
+ [vars$9.fontSize]: refs.fontSize,
13334
+ [vars$9.fontFamily]: refs.fontFamily,
13335
+ [vars$9.separatorFontSize]: '14px',
13336
+ [vars$9.labelsFontSize]: '14px',
13337
+ [vars$9.labelsLineHeight]: '1',
13338
+ [vars$9.labelsMarginBottom]: '6px',
13339
+ [vars$9.labelTextColor]: refs.labelTextColor,
13340
+ [vars$9.itemMarginBottom]: '1em',
13040
13341
  // To be positioned correctly, the min width has to match the text field min width
13041
- [vars$7.valueLabelMinWidth]: refs.minWidth,
13342
+ [vars$9.valueLabelMinWidth]: refs.minWidth,
13042
13343
  // To be positioned correctly, the min width has to match the combo box field min width
13043
- [vars$7.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$4.border.xs})`,
13044
- [vars$7.separatorWidth]: '70px',
13045
- [vars$7.removeButtonWidth]: '60px',
13344
+ [vars$9.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$6.border.xs})`,
13345
+ [vars$9.separatorWidth]: '70px',
13346
+ [vars$9.removeButtonWidth]: '60px',
13046
13347
  };
13047
13348
 
13048
13349
  var mappingsField$1 = /*#__PURE__*/Object.freeze({
13049
13350
  __proto__: null,
13050
13351
  default: mappingsField,
13051
13352
  mappingsField: mappingsField,
13052
- vars: vars$7
13353
+ vars: vars$9
13053
13354
  });
13054
13355
 
13055
- const globalRefs$3 = getThemeRefs(globals);
13056
- const vars$6 = UserAttributeClass.cssVarList;
13356
+ const globalRefs$5 = getThemeRefs(globals);
13357
+ const vars$8 = UserAttributeClass.cssVarList;
13057
13358
 
13058
13359
  const userAttribute = {
13059
- [vars$6.hostDirection]: globalRefs$3.direction,
13060
- [vars$6.labelTextWidth]: '150px',
13061
- [vars$6.valueTextWidth]: '200px',
13062
- [vars$6.badgeMaxWidth]: '85px',
13063
- [vars$6.itemsGap]: '16px',
13064
- [vars$6.hostMinWidth]: '530px',
13360
+ [vars$8.hostDirection]: globalRefs$5.direction,
13361
+ [vars$8.labelTextWidth]: '150px',
13362
+ [vars$8.valueTextWidth]: '200px',
13363
+ [vars$8.badgeMaxWidth]: '85px',
13364
+ [vars$8.itemsGap]: '16px',
13365
+ [vars$8.hostMinWidth]: '530px',
13065
13366
  _fullWidth: {
13066
- [vars$6.hostWidth]: '100%',
13367
+ [vars$8.hostWidth]: '100%',
13067
13368
  },
13068
13369
  };
13069
13370
 
13070
13371
  var userAttribute$1 = /*#__PURE__*/Object.freeze({
13071
13372
  __proto__: null,
13072
13373
  default: userAttribute,
13073
- vars: vars$6
13374
+ vars: vars$8
13074
13375
  });
13075
13376
 
13076
- const globalRefs$2 = getThemeRefs(globals);
13077
- const vars$5 = UserAuthMethodClass.cssVarList;
13377
+ const globalRefs$4 = getThemeRefs(globals);
13378
+ const vars$7 = UserAuthMethodClass.cssVarList;
13078
13379
 
13079
13380
  const userAuthMethod = {
13080
- [vars$5.hostDirection]: globalRefs$2.direction,
13081
- [vars$5.labelTextWidth]: '200px',
13082
- [vars$5.itemsGap]: '16px',
13083
- [vars$5.hostMinWidth]: '530px',
13084
- [vars$5.iconSize]: '24px',
13381
+ [vars$7.hostDirection]: globalRefs$4.direction,
13382
+ [vars$7.labelTextWidth]: '200px',
13383
+ [vars$7.itemsGap]: '16px',
13384
+ [vars$7.hostMinWidth]: '530px',
13385
+ [vars$7.iconSize]: '24px',
13085
13386
  _fullWidth: {
13086
- [vars$5.hostWidth]: '100%',
13387
+ [vars$7.hostWidth]: '100%',
13087
13388
  },
13088
13389
  };
13089
13390
 
13090
13391
  var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
13091
13392
  __proto__: null,
13092
13393
  default: userAuthMethod,
13093
- vars: vars$5
13394
+ vars: vars$7
13094
13395
  });
13095
13396
 
13096
- const vars$4 = SamlGroupMappingsClass.cssVarList;
13397
+ const vars$6 = SamlGroupMappingsClass.cssVarList;
13097
13398
 
13098
13399
  const samlGroupMappings = {
13099
- [vars$4.hostWidth]: refs.width,
13100
- [vars$4.hostDirection]: refs.direction,
13101
- [vars$4.groupNameInputMarginBottom]: '1em',
13400
+ [vars$6.hostWidth]: refs.width,
13401
+ [vars$6.hostDirection]: refs.direction,
13402
+ [vars$6.groupNameInputMarginBottom]: '1em',
13102
13403
  };
13103
13404
 
13104
13405
  var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
13105
13406
  __proto__: null,
13106
13407
  default: samlGroupMappings,
13107
13408
  samlGroupMappings: samlGroupMappings,
13108
- vars: vars$4
13409
+ vars: vars$6
13109
13410
  });
13110
13411
 
13111
- const globalRefs$1 = getThemeRefs(globals);
13112
- const vars$3 = PolicyValidationClass.cssVarList;
13412
+ const globalRefs$3 = getThemeRefs(globals);
13413
+ const vars$5 = PolicyValidationClass.cssVarList;
13113
13414
 
13114
13415
  const policyValidation = {
13115
- [vars$3.fontFamily]: refs.fontFamily,
13116
- [vars$3.fontSize]: refs.labelFontSize,
13117
- [vars$3.textColor]: refs.labelTextColor,
13118
- [vars$3.borderWidth]: refs.borderWidth,
13119
- [vars$3.borderStyle]: refs.borderStyle,
13120
- [vars$3.borderColor]: refs.borderColor,
13121
- [vars$3.borderRadius]: globalRefs$1.radius.sm,
13122
- [vars$3.backgroundColor]: 'none',
13123
- [vars$3.padding]: '0px',
13124
- [vars$3.labelMargin]: globalRefs$1.spacing.sm,
13125
- [vars$3.itemsSpacing]: globalRefs$1.spacing.lg,
13126
- [vars$3.itemSymbolDefault]: "'\\2022'", // "•"
13127
- [vars$3.itemSymbolSuccess]: "'\\2713'", // "✓"
13128
- [vars$3.itemSymbolError]: "'\\2A09'", // "⨉"
13129
- [vars$3.itemSymbolSuccessColor]: globalRefs$1.colors.success.main,
13130
- [vars$3.itemSymbolErrorColor]: globalRefs$1.colors.error.main,
13416
+ [vars$5.fontFamily]: refs.fontFamily,
13417
+ [vars$5.fontSize]: refs.labelFontSize,
13418
+ [vars$5.textColor]: refs.labelTextColor,
13419
+ [vars$5.borderWidth]: refs.borderWidth,
13420
+ [vars$5.borderStyle]: refs.borderStyle,
13421
+ [vars$5.borderColor]: refs.borderColor,
13422
+ [vars$5.borderRadius]: globalRefs$3.radius.sm,
13423
+ [vars$5.backgroundColor]: 'none',
13424
+ [vars$5.padding]: '0px',
13425
+ [vars$5.labelMargin]: globalRefs$3.spacing.sm,
13426
+ [vars$5.itemsSpacing]: globalRefs$3.spacing.lg,
13427
+ [vars$5.itemSymbolDefault]: "'\\2022'", // "•"
13428
+ [vars$5.itemSymbolSuccess]: "'\\2713'", // "✓"
13429
+ [vars$5.itemSymbolError]: "'\\2A09'", // "⨉"
13430
+ [vars$5.itemSymbolSuccessColor]: globalRefs$3.colors.success.main,
13431
+ [vars$5.itemSymbolErrorColor]: globalRefs$3.colors.error.main,
13131
13432
  };
13132
13433
 
13133
13434
  var policyValidation$1 = /*#__PURE__*/Object.freeze({
13134
13435
  __proto__: null,
13135
13436
  default: policyValidation,
13136
- vars: vars$3
13437
+ vars: vars$5
13137
13438
  });
13138
13439
 
13139
- const vars$2 = IconClass.cssVarList;
13440
+ const vars$4 = IconClass.cssVarList;
13140
13441
 
13141
13442
  const icon = {};
13142
13443
 
13143
13444
  var icon$1 = /*#__PURE__*/Object.freeze({
13144
13445
  __proto__: null,
13145
13446
  default: icon,
13146
- vars: vars$2
13447
+ vars: vars$4
13147
13448
  });
13148
13449
 
13149
- const globalRefs = getThemeRefs(globals);
13450
+ const globalRefs$2 = getThemeRefs(globals);
13150
13451
 
13151
- const vars$1 = CodeSnippetClass.cssVarList;
13452
+ const vars$3 = CodeSnippetClass.cssVarList;
13152
13453
 
13153
13454
  const light = {
13154
13455
  color1: '#fa0',
@@ -13183,50 +13484,50 @@ const dark = {
13183
13484
  };
13184
13485
 
13185
13486
  const CodeSnippet = {
13186
- [vars$1.rootBgColor]: globalRefs.colors.surface.main,
13187
- [vars$1.rootTextColor]: globalRefs.colors.surface.contrast,
13188
- [vars$1.docTagTextColor]: light.color2,
13189
- [vars$1.keywordTextColor]: light.color2,
13190
- [vars$1.metaKeywordTextColor]: light.color2,
13191
- [vars$1.templateTagTextColor]: light.color2,
13192
- [vars$1.templateVariableTextColor]: light.color2,
13193
- [vars$1.typeTextColor]: light.color2,
13194
- [vars$1.variableLanguageTextColor]: light.color2,
13195
- [vars$1.titleTextColor]: light.color3,
13196
- [vars$1.titleClassTextColor]: light.color3,
13197
- [vars$1.titleClassInheritedTextColor]: light.color3,
13198
- [vars$1.titleFunctionTextColor]: light.color3,
13199
- [vars$1.attrTextColor]: light.color4,
13200
- [vars$1.attributeTextColor]: light.color4,
13201
- [vars$1.literalTextColor]: light.color4,
13202
- [vars$1.metaTextColor]: light.color4,
13203
- [vars$1.numberTextColor]: light.color4,
13204
- [vars$1.operatorTextColor]: light.color4,
13205
- [vars$1.variableTextColor]: light.color4,
13206
- [vars$1.selectorAttrTextColor]: light.color4,
13207
- [vars$1.selectorClassTextColor]: light.color4,
13208
- [vars$1.selectorIdTextColor]: light.color4,
13209
- [vars$1.regexpTextColor]: light.color13,
13210
- [vars$1.stringTextColor]: light.color13,
13211
- [vars$1.metaStringTextColor]: light.color13,
13212
- [vars$1.builtInTextColor]: light.color5,
13213
- [vars$1.symbolTextColor]: light.color5,
13214
- [vars$1.commentTextColor]: light.color6,
13215
- [vars$1.codeTextColor]: light.color6,
13216
- [vars$1.formulaTextColor]: light.color6,
13217
- [vars$1.nameTextColor]: light.color7,
13218
- [vars$1.quoteTextColor]: light.color7,
13219
- [vars$1.selectorTagTextColor]: light.color7,
13220
- [vars$1.selectorPseudoTextColor]: light.color7,
13221
- [vars$1.substTextColor]: light.color8,
13222
- [vars$1.sectionTextColor]: light.color4,
13223
- [vars$1.bulletTextColor]: light.color9,
13224
- [vars$1.emphasisTextColor]: light.color8,
13225
- [vars$1.strongTextColor]: light.color8,
13226
- [vars$1.additionTextColor]: light.color7,
13227
- [vars$1.additionBgColor]: light.color10,
13228
- [vars$1.deletionTextColor]: light.color2,
13229
- [vars$1.deletionBgColor]: light.color10,
13487
+ [vars$3.rootBgColor]: globalRefs$2.colors.surface.main,
13488
+ [vars$3.rootTextColor]: globalRefs$2.colors.surface.contrast,
13489
+ [vars$3.docTagTextColor]: light.color2,
13490
+ [vars$3.keywordTextColor]: light.color2,
13491
+ [vars$3.metaKeywordTextColor]: light.color2,
13492
+ [vars$3.templateTagTextColor]: light.color2,
13493
+ [vars$3.templateVariableTextColor]: light.color2,
13494
+ [vars$3.typeTextColor]: light.color2,
13495
+ [vars$3.variableLanguageTextColor]: light.color2,
13496
+ [vars$3.titleTextColor]: light.color3,
13497
+ [vars$3.titleClassTextColor]: light.color3,
13498
+ [vars$3.titleClassInheritedTextColor]: light.color3,
13499
+ [vars$3.titleFunctionTextColor]: light.color3,
13500
+ [vars$3.attrTextColor]: light.color4,
13501
+ [vars$3.attributeTextColor]: light.color4,
13502
+ [vars$3.literalTextColor]: light.color4,
13503
+ [vars$3.metaTextColor]: light.color4,
13504
+ [vars$3.numberTextColor]: light.color4,
13505
+ [vars$3.operatorTextColor]: light.color4,
13506
+ [vars$3.variableTextColor]: light.color4,
13507
+ [vars$3.selectorAttrTextColor]: light.color4,
13508
+ [vars$3.selectorClassTextColor]: light.color4,
13509
+ [vars$3.selectorIdTextColor]: light.color4,
13510
+ [vars$3.regexpTextColor]: light.color13,
13511
+ [vars$3.stringTextColor]: light.color13,
13512
+ [vars$3.metaStringTextColor]: light.color13,
13513
+ [vars$3.builtInTextColor]: light.color5,
13514
+ [vars$3.symbolTextColor]: light.color5,
13515
+ [vars$3.commentTextColor]: light.color6,
13516
+ [vars$3.codeTextColor]: light.color6,
13517
+ [vars$3.formulaTextColor]: light.color6,
13518
+ [vars$3.nameTextColor]: light.color7,
13519
+ [vars$3.quoteTextColor]: light.color7,
13520
+ [vars$3.selectorTagTextColor]: light.color7,
13521
+ [vars$3.selectorPseudoTextColor]: light.color7,
13522
+ [vars$3.substTextColor]: light.color8,
13523
+ [vars$3.sectionTextColor]: light.color4,
13524
+ [vars$3.bulletTextColor]: light.color9,
13525
+ [vars$3.emphasisTextColor]: light.color8,
13526
+ [vars$3.strongTextColor]: light.color8,
13527
+ [vars$3.additionTextColor]: light.color7,
13528
+ [vars$3.additionBgColor]: light.color10,
13529
+ [vars$3.deletionTextColor]: light.color2,
13530
+ [vars$3.deletionBgColor]: light.color10,
13230
13531
  /* purposely ignored */
13231
13532
  // [vars.charEscapeTextColor]: '',
13232
13533
  // [vars.linkTextColor]: '',
@@ -13238,50 +13539,50 @@ const CodeSnippet = {
13238
13539
 
13239
13540
  const codeSnippetDarkThemeOverrides = {
13240
13541
  codeSnippet: {
13241
- [vars$1.rootBgColor]: globalRefs.colors.surface.main,
13242
- [vars$1.rootTextColor]: globalRefs.colors.surface.contrast,
13243
- [vars$1.docTagTextColor]: dark.color2,
13244
- [vars$1.keywordTextColor]: dark.color2,
13245
- [vars$1.metaKeywordTextColor]: dark.color2,
13246
- [vars$1.templateTagTextColor]: dark.color2,
13247
- [vars$1.templateVariableTextColor]: dark.color2,
13248
- [vars$1.typeTextColor]: dark.color2,
13249
- [vars$1.variableLanguageTextColor]: dark.color2,
13250
- [vars$1.titleTextColor]: dark.color3,
13251
- [vars$1.titleClassTextColor]: dark.color3,
13252
- [vars$1.titleClassInheritedTextColor]: dark.color3,
13253
- [vars$1.titleFunctionTextColor]: dark.color3,
13254
- [vars$1.attrTextColor]: dark.color4,
13255
- [vars$1.attributeTextColor]: dark.color4,
13256
- [vars$1.literalTextColor]: dark.color4,
13257
- [vars$1.metaTextColor]: dark.color4,
13258
- [vars$1.numberTextColor]: dark.color4,
13259
- [vars$1.operatorTextColor]: dark.color4,
13260
- [vars$1.variableTextColor]: dark.color4,
13261
- [vars$1.selectorAttrTextColor]: dark.color4,
13262
- [vars$1.selectorClassTextColor]: dark.color4,
13263
- [vars$1.selectorIdTextColor]: dark.color4,
13264
- [vars$1.regexpTextColor]: dark.color13,
13265
- [vars$1.stringTextColor]: dark.color13,
13266
- [vars$1.metaStringTextColor]: dark.color13,
13267
- [vars$1.builtInTextColor]: dark.color5,
13268
- [vars$1.symbolTextColor]: dark.color5,
13269
- [vars$1.commentTextColor]: dark.color6,
13270
- [vars$1.codeTextColor]: dark.color6,
13271
- [vars$1.formulaTextColor]: dark.color6,
13272
- [vars$1.nameTextColor]: dark.color7,
13273
- [vars$1.quoteTextColor]: dark.color7,
13274
- [vars$1.selectorTagTextColor]: dark.color7,
13275
- [vars$1.selectorPseudoTextColor]: dark.color7,
13276
- [vars$1.substTextColor]: dark.color8,
13277
- [vars$1.sectionTextColor]: dark.color4,
13278
- [vars$1.bulletTextColor]: dark.color9,
13279
- [vars$1.emphasisTextColor]: dark.color8,
13280
- [vars$1.strongTextColor]: dark.color8,
13281
- [vars$1.additionTextColor]: dark.color7,
13282
- [vars$1.additionBgColor]: dark.color10,
13283
- [vars$1.deletionTextColor]: dark.color2,
13284
- [vars$1.deletionBgColor]: dark.color10,
13542
+ [vars$3.rootBgColor]: globalRefs$2.colors.surface.main,
13543
+ [vars$3.rootTextColor]: globalRefs$2.colors.surface.contrast,
13544
+ [vars$3.docTagTextColor]: dark.color2,
13545
+ [vars$3.keywordTextColor]: dark.color2,
13546
+ [vars$3.metaKeywordTextColor]: dark.color2,
13547
+ [vars$3.templateTagTextColor]: dark.color2,
13548
+ [vars$3.templateVariableTextColor]: dark.color2,
13549
+ [vars$3.typeTextColor]: dark.color2,
13550
+ [vars$3.variableLanguageTextColor]: dark.color2,
13551
+ [vars$3.titleTextColor]: dark.color3,
13552
+ [vars$3.titleClassTextColor]: dark.color3,
13553
+ [vars$3.titleClassInheritedTextColor]: dark.color3,
13554
+ [vars$3.titleFunctionTextColor]: dark.color3,
13555
+ [vars$3.attrTextColor]: dark.color4,
13556
+ [vars$3.attributeTextColor]: dark.color4,
13557
+ [vars$3.literalTextColor]: dark.color4,
13558
+ [vars$3.metaTextColor]: dark.color4,
13559
+ [vars$3.numberTextColor]: dark.color4,
13560
+ [vars$3.operatorTextColor]: dark.color4,
13561
+ [vars$3.variableTextColor]: dark.color4,
13562
+ [vars$3.selectorAttrTextColor]: dark.color4,
13563
+ [vars$3.selectorClassTextColor]: dark.color4,
13564
+ [vars$3.selectorIdTextColor]: dark.color4,
13565
+ [vars$3.regexpTextColor]: dark.color13,
13566
+ [vars$3.stringTextColor]: dark.color13,
13567
+ [vars$3.metaStringTextColor]: dark.color13,
13568
+ [vars$3.builtInTextColor]: dark.color5,
13569
+ [vars$3.symbolTextColor]: dark.color5,
13570
+ [vars$3.commentTextColor]: dark.color6,
13571
+ [vars$3.codeTextColor]: dark.color6,
13572
+ [vars$3.formulaTextColor]: dark.color6,
13573
+ [vars$3.nameTextColor]: dark.color7,
13574
+ [vars$3.quoteTextColor]: dark.color7,
13575
+ [vars$3.selectorTagTextColor]: dark.color7,
13576
+ [vars$3.selectorPseudoTextColor]: dark.color7,
13577
+ [vars$3.substTextColor]: dark.color8,
13578
+ [vars$3.sectionTextColor]: dark.color4,
13579
+ [vars$3.bulletTextColor]: dark.color9,
13580
+ [vars$3.emphasisTextColor]: dark.color8,
13581
+ [vars$3.strongTextColor]: dark.color8,
13582
+ [vars$3.additionTextColor]: dark.color7,
13583
+ [vars$3.additionBgColor]: dark.color10,
13584
+ [vars$3.deletionTextColor]: dark.color2,
13585
+ [vars$3.deletionBgColor]: dark.color10,
13285
13586
  },
13286
13587
  };
13287
13588
 
@@ -13289,6 +13590,85 @@ var codeSnippet = /*#__PURE__*/Object.freeze({
13289
13590
  __proto__: null,
13290
13591
  codeSnippetDarkThemeOverrides: codeSnippetDarkThemeOverrides,
13291
13592
  default: CodeSnippet,
13593
+ vars: vars$3
13594
+ });
13595
+
13596
+ const vars$2 = RadioGroupClass.cssVarList;
13597
+ const globalRefs$1 = getThemeRefs(globals);
13598
+
13599
+ const radioGroup = {
13600
+ [vars$2.buttonsRowGap]: '9px',
13601
+ [vars$2.hostWidth]: refs.width,
13602
+ [vars$2.hostDirection]: refs.direction,
13603
+ [vars$2.fontSize]: refs.fontSize,
13604
+ [vars$2.fontFamily]: refs.fontFamily,
13605
+ [vars$2.labelTextColor]: refs.labelTextColor,
13606
+ [vars$2.labelRequiredIndicator]: refs.requiredIndicator,
13607
+ [vars$2.errorMessageTextColor]: refs.errorMessageTextColor,
13608
+ [vars$2.helperTextColor]: refs.helperTextColor,
13609
+ [vars$2.itemsLabelColor]: globalRefs$1.colors.surface.contrast,
13610
+
13611
+ textAlign: {
13612
+ right: { [vars$2.inputTextAlign]: 'right' },
13613
+ left: { [vars$2.inputTextAlign]: 'left' },
13614
+ center: { [vars$2.inputTextAlign]: 'center' },
13615
+ },
13616
+
13617
+ _fullWidth: {
13618
+ [vars$2.buttonsSpacing]: 'space-between',
13619
+ },
13620
+
13621
+ _disabled: {
13622
+ [vars$2.itemsLabelColor]: globalRefs$1.colors.surface.light,
13623
+ },
13624
+ };
13625
+
13626
+ var radioGroup$1 = /*#__PURE__*/Object.freeze({
13627
+ __proto__: null,
13628
+ default: radioGroup,
13629
+ radioGroup: radioGroup,
13630
+ vars: vars$2
13631
+ });
13632
+
13633
+ const vars$1 = RadioButtonClass.cssVarList;
13634
+ const globalRefs = getThemeRefs(globals);
13635
+
13636
+ const radioButton = {
13637
+ [vars$1.fontFamily]: refs.fontFamily,
13638
+ [vars$1.radioSize]: 'calc(1em + 6px)',
13639
+ [vars$1.radioMargin]: 'auto 4px',
13640
+ [vars$1.radioCheckedSize]: `calc(var(${vars$1.radioSize})/5)`,
13641
+ [vars$1.radioCheckedColor]: globalRefs.colors.surface.light,
13642
+ [vars$1.radioBackgroundColor]: globalRefs.colors.surface.light,
13643
+
13644
+ _checked: {
13645
+ [vars$1.radioBackgroundColor]: globalRefs.colors.surface.contrast,
13646
+ },
13647
+
13648
+ _hover: {
13649
+ cursor: 'pointer',
13650
+ },
13651
+
13652
+ size: {
13653
+ xs: {
13654
+ [vars$1.fontSize]: '12px',
13655
+ },
13656
+ sm: {
13657
+ [vars$1.fontSize]: '14px',
13658
+ },
13659
+ md: {
13660
+ [vars$1.fontSize]: '16px',
13661
+ },
13662
+ lg: {
13663
+ [vars$1.fontSize]: '18px',
13664
+ },
13665
+ },
13666
+ };
13667
+
13668
+ var radioButton$1 = /*#__PURE__*/Object.freeze({
13669
+ __proto__: null,
13670
+ default: radioButton,
13671
+ radioButton: radioButton,
13292
13672
  vars: vars$1
13293
13673
  });
13294
13674
 
@@ -13335,6 +13715,8 @@ const components = {
13335
13715
  policyValidation: policyValidation$1,
13336
13716
  icon: icon$1,
13337
13717
  codeSnippet,
13718
+ radioGroup: radioGroup$1,
13719
+ radioButton: radioButton$1,
13338
13720
  };
13339
13721
 
13340
13722
  const theme = Object.keys(components).reduce(
@@ -13347,7 +13729,7 @@ const vars = Object.keys(components).reduce(
13347
13729
  );
13348
13730
 
13349
13731
  const defaultTheme = { globals, components: theme };
13350
- const themeVars = { globals: vars$H, components: vars };
13732
+ const themeVars = { globals: vars$J, components: vars };
13351
13733
 
13352
13734
  const colors = {
13353
13735
  surface: {
@@ -13396,5 +13778,5 @@ const darkTheme = merge({}, defaultTheme, {
13396
13778
  },
13397
13779
  });
13398
13780
 
13399
- export { AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, CodeSnippetClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, EnrichedTextClass, GridClass, IconClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RecaptchaClass, SamlGroupMappingsClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, UserAttributeClass, UserAuthMethodClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
13781
+ export { AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, CodeSnippetClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, EnrichedTextClass, GridClass, IconClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RadioGroupClass, RecaptchaClass, SamlGroupMappingsClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, UserAttributeClass, UserAuthMethodClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
13400
13782
  //# sourceMappingURL=index.esm.js.map