@descope/web-components-ui 1.0.228 → 1.0.229

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 (50) hide show
  1. package/dist/cjs/index.cjs.js +847 -601
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +726 -592
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/1000.js +1 -1
  6. package/dist/umd/1769.js +360 -0
  7. package/dist/umd/1932.js +1 -1
  8. package/dist/umd/1990.js +1 -1
  9. package/dist/umd/2269.js +2 -0
  10. package/dist/umd/2269.js.LICENSE.txt +5 -0
  11. package/dist/umd/3585.js +1 -1
  12. package/dist/umd/3878.js +1 -1
  13. package/dist/umd/5806.js +1 -1
  14. package/dist/umd/6091.js +123 -0
  15. package/dist/umd/{4746.js.LICENSE.txt → 6091.js.LICENSE.txt} +0 -6
  16. package/dist/umd/6542.js +288 -0
  17. package/dist/umd/6542.js.LICENSE.txt +11 -0
  18. package/dist/umd/6770.js +1 -1
  19. package/dist/umd/7514.js +1 -1
  20. package/dist/umd/9211.js +1 -1
  21. package/dist/umd/9320.js +2 -0
  22. package/dist/umd/9320.js.LICENSE.txt +5 -0
  23. package/dist/umd/9437.js +1 -1
  24. package/dist/umd/descope-button-selection-group-descope-button-selection-group-item-index-js.js +1 -1
  25. package/dist/umd/descope-container-index-js.js +1 -1
  26. package/dist/umd/descope-divider-index-js.js +1 -1
  27. package/dist/umd/descope-grid-index-js.js +1 -1
  28. package/dist/umd/descope-image-index-js.js +1 -1
  29. package/dist/umd/descope-link-index-js.js +1 -1
  30. package/dist/umd/descope-loader-linear-index-js.js +1 -1
  31. package/dist/umd/descope-loader-radial-index-js.js +1 -1
  32. package/dist/umd/descope-notification-descope-notification-card-index-js.js +1 -0
  33. package/dist/umd/descope-notification-index-js.js +1 -0
  34. package/dist/umd/descope-recaptcha-index-js.js +1 -1
  35. package/dist/umd/descope-text-index-js.js +1 -1
  36. package/dist/umd/index.js +1 -1
  37. package/package.json +2 -1
  38. package/src/components/descope-grid/GridClass.js +8 -1
  39. package/src/components/descope-notification/NotificationClass.js +119 -0
  40. package/src/components/descope-notification/descope-notification-card/NotificationCardClass.js +67 -0
  41. package/src/components/descope-notification/descope-notification-card/index.js +6 -0
  42. package/src/components/descope-notification/descope-notification-container.js +13 -0
  43. package/src/components/descope-notification/index.js +8 -0
  44. package/src/index.cjs.js +1 -0
  45. package/src/mixins/normalizeBooleanAttributesMixin.js +2 -0
  46. package/src/theme/components/index.js +2 -0
  47. package/src/theme/components/notificationCard.js +57 -0
  48. package/dist/umd/1419.js +0 -360
  49. package/dist/umd/4746.js +0 -123
  50. /package/dist/umd/{1419.js.LICENSE.txt → 1769.js.LICENSE.txt} +0 -0
package/dist/index.esm.js CHANGED
@@ -13,6 +13,7 @@ import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
13
13
  import merge from 'lodash.merge';
14
14
  import set from 'lodash.set';
15
15
  import Color from 'color';
16
+ import '@vaadin/notification';
16
17
 
17
18
  const kebabCase = (str) =>
18
19
  str
@@ -563,6 +564,8 @@ const booleanAttributesList = [
563
564
  'opened',
564
565
  'active',
565
566
  'password-visible',
567
+ 'opening',
568
+ 'closing',
566
569
  ];
567
570
 
568
571
  const isBooleanAttribute = (attr) => {
@@ -1237,7 +1240,7 @@ const clickableMixin = (superclass) =>
1237
1240
  }
1238
1241
  };
1239
1242
 
1240
- const componentName$B = getComponentName('button');
1243
+ const componentName$C = getComponentName('button');
1241
1244
 
1242
1245
  const resetStyles = `
1243
1246
  :host {
@@ -1334,7 +1337,7 @@ const ButtonClass = compose(
1334
1337
  }
1335
1338
  `,
1336
1339
  excludeAttrsSync: ['tabindex'],
1337
- componentName: componentName$B,
1340
+ componentName: componentName$C,
1338
1341
  })
1339
1342
  );
1340
1343
 
@@ -1371,7 +1374,7 @@ loadingIndicatorStyles = `
1371
1374
  }
1372
1375
  `;
1373
1376
 
1374
- customElements.define(componentName$B, ButtonClass);
1377
+ customElements.define(componentName$C, ButtonClass);
1375
1378
 
1376
1379
  const createBaseInputClass = (...args) =>
1377
1380
  compose(
@@ -1381,11 +1384,11 @@ const createBaseInputClass = (...args) =>
1381
1384
  inputEventsDispatchingMixin
1382
1385
  )(createBaseClass(...args));
1383
1386
 
1384
- const componentName$A = getComponentName('boolean-field-internal');
1387
+ const componentName$B = getComponentName('boolean-field-internal');
1385
1388
 
1386
1389
  const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
1387
1390
 
1388
- const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$A, baseSelector: 'div' });
1391
+ const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$B, baseSelector: 'div' });
1389
1392
 
1390
1393
  class BooleanInputInternal extends BaseInputClass$5 {
1391
1394
  static get observedAttributes() {
@@ -1461,14 +1464,14 @@ const booleanFieldMixin = (superclass) =>
1461
1464
 
1462
1465
  const template = document.createElement('template');
1463
1466
  template.innerHTML = `
1464
- <${componentName$A}
1467
+ <${componentName$B}
1465
1468
  tabindex="-1"
1466
1469
  slot="input"
1467
- ></${componentName$A}>
1470
+ ></${componentName$B}>
1468
1471
  `;
1469
1472
 
1470
1473
  this.baseElement.appendChild(template.content.cloneNode(true));
1471
- this.inputElement = this.shadowRoot.querySelector(componentName$A);
1474
+ this.inputElement = this.shadowRoot.querySelector(componentName$B);
1472
1475
  this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
1473
1476
 
1474
1477
  forwardAttrs(this, this.inputElement, {
@@ -1639,7 +1642,7 @@ descope-boolean-field-internal {
1639
1642
  }
1640
1643
  `;
1641
1644
 
1642
- const componentName$z = getComponentName('checkbox');
1645
+ const componentName$A = getComponentName('checkbox');
1643
1646
 
1644
1647
  const {
1645
1648
  host: host$f,
@@ -1740,15 +1743,15 @@ const CheckboxClass = compose(
1740
1743
  }
1741
1744
  `,
1742
1745
  excludeAttrsSync: ['label', 'tabindex'],
1743
- componentName: componentName$z,
1746
+ componentName: componentName$A,
1744
1747
  })
1745
1748
  );
1746
1749
 
1747
- customElements.define(componentName$A, BooleanInputInternal);
1750
+ customElements.define(componentName$B, BooleanInputInternal);
1748
1751
 
1749
- customElements.define(componentName$z, CheckboxClass);
1752
+ customElements.define(componentName$A, CheckboxClass);
1750
1753
 
1751
- const componentName$y = getComponentName('switch-toggle');
1754
+ const componentName$z = getComponentName('switch-toggle');
1752
1755
 
1753
1756
  const {
1754
1757
  host: host$e,
@@ -1875,17 +1878,17 @@ const SwitchToggleClass = compose(
1875
1878
  }
1876
1879
  `,
1877
1880
  excludeAttrsSync: ['label', 'tabindex'],
1878
- componentName: componentName$y,
1881
+ componentName: componentName$z,
1879
1882
  })
1880
1883
  );
1881
1884
 
1882
- customElements.define(componentName$y, SwitchToggleClass);
1885
+ customElements.define(componentName$z, SwitchToggleClass);
1883
1886
 
1884
- const componentName$x = getComponentName('loader-linear');
1887
+ const componentName$y = getComponentName('loader-linear');
1885
1888
 
1886
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$x, baseSelector: ':host > div' }) {
1889
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$y, baseSelector: ':host > div' }) {
1887
1890
  static get componentName() {
1888
- return componentName$x;
1891
+ return componentName$y;
1889
1892
  }
1890
1893
 
1891
1894
  constructor() {
@@ -1946,11 +1949,11 @@ const LoaderLinearClass = compose(
1946
1949
  componentNameValidationMixin
1947
1950
  )(RawLoaderLinear);
1948
1951
 
1949
- customElements.define(componentName$x, LoaderLinearClass);
1952
+ customElements.define(componentName$y, LoaderLinearClass);
1950
1953
 
1951
- const componentName$w = getComponentName('loader-radial');
1954
+ const componentName$x = getComponentName('loader-radial');
1952
1955
 
1953
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > div' }) {
1956
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$x, baseSelector: ':host > div' }) {
1954
1957
  constructor() {
1955
1958
  super();
1956
1959
 
@@ -1994,11 +1997,11 @@ const LoaderRadialClass = compose(
1994
1997
  componentNameValidationMixin
1995
1998
  )(RawLoaderRadial);
1996
1999
 
1997
- customElements.define(componentName$w, LoaderRadialClass);
2000
+ customElements.define(componentName$x, LoaderRadialClass);
1998
2001
 
1999
- const componentName$v = getComponentName('container');
2002
+ const componentName$w = getComponentName('container');
2000
2003
 
2001
- class RawContainer extends createBaseClass({ componentName: componentName$v, baseSelector: ':host > slot' }) {
2004
+ class RawContainer extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > slot' }) {
2002
2005
  constructor() {
2003
2006
  super();
2004
2007
 
@@ -2050,10 +2053,10 @@ const ContainerClass = compose(
2050
2053
  componentNameValidationMixin
2051
2054
  )(RawContainer);
2052
2055
 
2053
- customElements.define(componentName$v, ContainerClass);
2056
+ customElements.define(componentName$w, ContainerClass);
2054
2057
 
2055
- const componentName$u = getComponentName('divider');
2056
- class RawDivider extends createBaseClass({ componentName: componentName$u, baseSelector: ':host > div' }) {
2058
+ const componentName$v = getComponentName('divider');
2059
+ class RawDivider extends createBaseClass({ componentName: componentName$v, baseSelector: ':host > div' }) {
2057
2060
  constructor() {
2058
2061
  super();
2059
2062
 
@@ -2151,9 +2154,9 @@ const DividerClass = compose(
2151
2154
 
2152
2155
  // eslint-disable-next-line max-classes-per-file
2153
2156
 
2154
- const componentName$t = getComponentName('text');
2157
+ const componentName$u = getComponentName('text');
2155
2158
 
2156
- class RawText extends createBaseClass({ componentName: componentName$t, baseSelector: ':host > slot' }) {
2159
+ class RawText extends createBaseClass({ componentName: componentName$u, baseSelector: ':host > slot' }) {
2157
2160
  constructor() {
2158
2161
  super();
2159
2162
 
@@ -2212,9 +2215,9 @@ const TextClass = compose(
2212
2215
  customTextMixin
2213
2216
  )(RawText);
2214
2217
 
2215
- customElements.define(componentName$t, TextClass);
2218
+ customElements.define(componentName$u, TextClass);
2216
2219
 
2217
- customElements.define(componentName$u, DividerClass);
2220
+ customElements.define(componentName$v, DividerClass);
2218
2221
 
2219
2222
  const { host: host$b, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$8, inputField: inputField$5, input, helperText: helperText$6, errorMessage: errorMessage$8 } =
2220
2223
  {
@@ -2270,7 +2273,7 @@ var textFieldMappings = {
2270
2273
  inputPlaceholderColor: { ...placeholder$2, property: 'color' },
2271
2274
  };
2272
2275
 
2273
- const componentName$s = getComponentName('email-field');
2276
+ const componentName$t = getComponentName('email-field');
2274
2277
 
2275
2278
  const customMixin$7 = (superclass) =>
2276
2279
  class EmailFieldMixinClass extends superclass {
@@ -2304,15 +2307,15 @@ const EmailFieldClass = compose(
2304
2307
  ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
2305
2308
  `,
2306
2309
  excludeAttrsSync: ['tabindex'],
2307
- componentName: componentName$s,
2310
+ componentName: componentName$t,
2308
2311
  })
2309
2312
  );
2310
2313
 
2311
- customElements.define(componentName$s, EmailFieldClass);
2314
+ customElements.define(componentName$t, EmailFieldClass);
2312
2315
 
2313
- const componentName$r = getComponentName('link');
2316
+ const componentName$s = getComponentName('link');
2314
2317
 
2315
- class RawLink extends createBaseClass({ componentName: componentName$r, baseSelector: ':host a' }) {
2318
+ class RawLink extends createBaseClass({ componentName: componentName$s, baseSelector: ':host a' }) {
2316
2319
  constructor() {
2317
2320
  super();
2318
2321
 
@@ -2376,7 +2379,7 @@ const LinkClass = compose(
2376
2379
  componentNameValidationMixin
2377
2380
  )(RawLink);
2378
2381
 
2379
- customElements.define(componentName$r, LinkClass);
2382
+ customElements.define(componentName$s, LinkClass);
2380
2383
 
2381
2384
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
2382
2385
  let style;
@@ -2428,27 +2431,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
2428
2431
  return CssVarImageClass;
2429
2432
  };
2430
2433
 
2431
- const componentName$q = getComponentName('logo');
2434
+ const componentName$r = getComponentName('logo');
2432
2435
 
2433
2436
  const LogoClass = createCssVarImageClass({
2434
- componentName: componentName$q,
2437
+ componentName: componentName$r,
2435
2438
  varName: 'url',
2436
2439
  fallbackVarName: 'fallbackUrl',
2437
2440
  });
2438
2441
 
2439
- customElements.define(componentName$q, LogoClass);
2442
+ customElements.define(componentName$r, LogoClass);
2440
2443
 
2441
- const componentName$p = getComponentName('totp-image');
2444
+ const componentName$q = getComponentName('totp-image');
2442
2445
 
2443
2446
  const TotpImageClass = createCssVarImageClass({
2444
- componentName: componentName$p,
2447
+ componentName: componentName$q,
2445
2448
  varName: 'url',
2446
2449
  fallbackVarName: 'fallbackUrl',
2447
2450
  });
2448
2451
 
2449
- customElements.define(componentName$p, TotpImageClass);
2452
+ customElements.define(componentName$q, TotpImageClass);
2450
2453
 
2451
- const componentName$o = getComponentName('number-field');
2454
+ const componentName$p = getComponentName('number-field');
2452
2455
 
2453
2456
  const NumberFieldClass = compose(
2454
2457
  createStyleMixin({
@@ -2473,11 +2476,11 @@ const NumberFieldClass = compose(
2473
2476
  ${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
2474
2477
  `,
2475
2478
  excludeAttrsSync: ['tabindex'],
2476
- componentName: componentName$o,
2479
+ componentName: componentName$p,
2477
2480
  })
2478
2481
  );
2479
2482
 
2480
- customElements.define(componentName$o, NumberFieldClass);
2483
+ customElements.define(componentName$p, NumberFieldClass);
2481
2484
 
2482
2485
  const focusElement = (ele) => {
2483
2486
  ele?.focus();
@@ -2495,13 +2498,13 @@ const getSanitizedCharacters = (str) => {
2495
2498
 
2496
2499
  /* eslint-disable no-param-reassign */
2497
2500
 
2498
- const componentName$n = getComponentName('passcode-internal');
2501
+ const componentName$o = getComponentName('passcode-internal');
2499
2502
 
2500
2503
  const observedAttributes$5 = ['digits'];
2501
2504
 
2502
2505
  const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
2503
2506
 
2504
- const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
2507
+ const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$o, baseSelector: 'div' });
2505
2508
 
2506
2509
  class PasscodeInternal extends BaseInputClass$4 {
2507
2510
  static get observedAttributes() {
@@ -2698,7 +2701,7 @@ class PasscodeInternal extends BaseInputClass$4 {
2698
2701
  }
2699
2702
  }
2700
2703
 
2701
- const componentName$m = getComponentName('text-field');
2704
+ const componentName$n = getComponentName('text-field');
2702
2705
 
2703
2706
  const observedAttrs = ['type'];
2704
2707
 
@@ -2747,11 +2750,11 @@ const TextFieldClass = compose(
2747
2750
  ${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
2748
2751
  `,
2749
2752
  excludeAttrsSync: ['tabindex'],
2750
- componentName: componentName$m,
2753
+ componentName: componentName$n,
2751
2754
  })
2752
2755
  );
2753
2756
 
2754
- const componentName$l = getComponentName('passcode');
2757
+ const componentName$m = getComponentName('passcode');
2755
2758
 
2756
2759
  const observedAttributes$4 = ['digits'];
2757
2760
 
@@ -2770,17 +2773,17 @@ const customMixin$5 = (superclass) =>
2770
2773
  const template = document.createElement('template');
2771
2774
 
2772
2775
  template.innerHTML = `
2773
- <${componentName$n}
2776
+ <${componentName$o}
2774
2777
  bordered="true"
2775
2778
  name="code"
2776
2779
  tabindex="-1"
2777
2780
  slot="input"
2778
- ><slot></slot></${componentName$n}>
2781
+ ><slot></slot></${componentName$o}>
2779
2782
  `;
2780
2783
 
2781
2784
  this.baseElement.appendChild(template.content.cloneNode(true));
2782
2785
 
2783
- this.inputElement = this.shadowRoot.querySelector(componentName$n);
2786
+ this.inputElement = this.shadowRoot.querySelector(componentName$o);
2784
2787
 
2785
2788
  forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
2786
2789
  }
@@ -2918,15 +2921,15 @@ const PasscodeClass = compose(
2918
2921
  ${resetInputCursor('vaadin-text-field')}
2919
2922
  `,
2920
2923
  excludeAttrsSync: ['tabindex'],
2921
- componentName: componentName$l,
2924
+ componentName: componentName$m,
2922
2925
  })
2923
2926
  );
2924
2927
 
2925
- customElements.define(componentName$m, TextFieldClass);
2928
+ customElements.define(componentName$n, TextFieldClass);
2926
2929
 
2927
- customElements.define(componentName$n, PasscodeInternal);
2930
+ customElements.define(componentName$o, PasscodeInternal);
2928
2931
 
2929
- customElements.define(componentName$l, PasscodeClass);
2932
+ customElements.define(componentName$m, PasscodeClass);
2930
2933
 
2931
2934
  const passwordDraggableMixin = (superclass) =>
2932
2935
  class PasswordDraggableMixinClass extends superclass {
@@ -2962,7 +2965,7 @@ const passwordDraggableMixin = (superclass) =>
2962
2965
  }
2963
2966
  };
2964
2967
 
2965
- const componentName$k = getComponentName('password');
2968
+ const componentName$l = getComponentName('password');
2966
2969
 
2967
2970
  const {
2968
2971
  host: host$8,
@@ -3091,13 +3094,13 @@ const PasswordClass = compose(
3091
3094
  }
3092
3095
  `,
3093
3096
  excludeAttrsSync: ['tabindex'],
3094
- componentName: componentName$k,
3097
+ componentName: componentName$l,
3095
3098
  })
3096
3099
  );
3097
3100
 
3098
- customElements.define(componentName$k, PasswordClass);
3101
+ customElements.define(componentName$l, PasswordClass);
3099
3102
 
3100
- const componentName$j = getComponentName('text-area');
3103
+ const componentName$k = getComponentName('text-area');
3101
3104
 
3102
3105
  const {
3103
3106
  host: host$7,
@@ -3170,17 +3173,17 @@ const TextAreaClass = compose(
3170
3173
  ${resetInputCursor('vaadin-text-area')}
3171
3174
  `,
3172
3175
  excludeAttrsSync: ['tabindex'],
3173
- componentName: componentName$j,
3176
+ componentName: componentName$k,
3174
3177
  })
3175
3178
  );
3176
3179
 
3177
- customElements.define(componentName$j, TextAreaClass);
3180
+ customElements.define(componentName$k, TextAreaClass);
3178
3181
 
3179
3182
  const observedAttributes$3 = ['src', 'alt'];
3180
3183
 
3181
- const componentName$i = getComponentName('image');
3184
+ const componentName$j = getComponentName('image');
3182
3185
 
3183
- const BaseClass$1 = createBaseClass({ componentName: componentName$i, baseSelector: ':host > img' });
3186
+ const BaseClass$1 = createBaseClass({ componentName: componentName$j, baseSelector: ':host > img' });
3184
3187
  class RawImage extends BaseClass$1 {
3185
3188
  static get observedAttributes() {
3186
3189
  return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
@@ -3220,9 +3223,9 @@ const ImageClass = compose(
3220
3223
  draggableMixin
3221
3224
  )(RawImage);
3222
3225
 
3223
- customElements.define(componentName$i, ImageClass);
3226
+ customElements.define(componentName$j, ImageClass);
3224
3227
 
3225
- const componentName$h = getComponentName('combo-box');
3228
+ const componentName$i = getComponentName('combo-box');
3226
3229
 
3227
3230
  const ComboBoxMixin = (superclass) =>
3228
3231
  class ComboBoxMixinClass extends superclass {
@@ -3573,12 +3576,12 @@ const ComboBoxClass = compose(
3573
3576
  // and reset items to an empty array, and opening the list box with no items
3574
3577
  // to display.
3575
3578
  excludeAttrsSync: ['tabindex', 'size', 'data'],
3576
- componentName: componentName$h,
3579
+ componentName: componentName$i,
3577
3580
  includeForwardProps: ['items', 'renderer', 'selectedItem'],
3578
3581
  })
3579
3582
  );
3580
3583
 
3581
- customElements.define(componentName$h, ComboBoxClass);
3584
+ customElements.define(componentName$i, ComboBoxClass);
3582
3585
 
3583
3586
  var CountryCodes = [
3584
3587
  {
@@ -4818,7 +4821,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
4818
4821
  </div>
4819
4822
  `;
4820
4823
 
4821
- const componentName$g = getComponentName('phone-field-internal');
4824
+ const componentName$h = getComponentName('phone-field-internal');
4822
4825
 
4823
4826
  const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
4824
4827
  const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -4830,7 +4833,7 @@ const mapAttrs$1 = {
4830
4833
 
4831
4834
  const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
4832
4835
 
4833
- const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$g, baseSelector: 'div' });
4836
+ const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$h, baseSelector: 'div' });
4834
4837
 
4835
4838
  let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
4836
4839
  static get observedAttributes() {
@@ -5002,12 +5005,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
5002
5005
  }
5003
5006
  };
5004
5007
 
5005
- customElements.define(componentName$g, PhoneFieldInternal$1);
5008
+ customElements.define(componentName$h, PhoneFieldInternal$1);
5006
5009
 
5007
5010
  const textVars$1 = TextFieldClass.cssVarList;
5008
5011
  const comboVars = ComboBoxClass.cssVarList;
5009
5012
 
5010
- const componentName$f = getComponentName('phone-field');
5013
+ const componentName$g = getComponentName('phone-field');
5011
5014
 
5012
5015
  const customMixin$4 = (superclass) =>
5013
5016
  class PhoneFieldMixinClass extends superclass {
@@ -5021,15 +5024,15 @@ const customMixin$4 = (superclass) =>
5021
5024
  const template = document.createElement('template');
5022
5025
 
5023
5026
  template.innerHTML = `
5024
- <${componentName$g}
5027
+ <${componentName$h}
5025
5028
  tabindex="-1"
5026
5029
  slot="input"
5027
- ></${componentName$g}>
5030
+ ></${componentName$h}>
5028
5031
  `;
5029
5032
 
5030
5033
  this.baseElement.appendChild(template.content.cloneNode(true));
5031
5034
 
5032
- this.inputElement = this.shadowRoot.querySelector(componentName$g);
5035
+ this.inputElement = this.shadowRoot.querySelector(componentName$h);
5033
5036
 
5034
5037
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
5035
5038
  includeAttrs: [
@@ -5224,17 +5227,17 @@ const PhoneFieldClass = compose(
5224
5227
  }
5225
5228
  `,
5226
5229
  excludeAttrsSync: ['tabindex'],
5227
- componentName: componentName$f,
5230
+ componentName: componentName$g,
5228
5231
  })
5229
5232
  );
5230
5233
 
5231
- customElements.define(componentName$f, PhoneFieldClass);
5234
+ customElements.define(componentName$g, PhoneFieldClass);
5232
5235
 
5233
5236
  const getCountryByCodeId = (countryCode) => {
5234
5237
  return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
5235
5238
  };
5236
5239
 
5237
- const componentName$e = getComponentName('phone-field-internal-input-box');
5240
+ const componentName$f = getComponentName('phone-field-internal-input-box');
5238
5241
 
5239
5242
  const observedAttributes$2 = [
5240
5243
  'disabled',
@@ -5248,7 +5251,7 @@ const mapAttrs = {
5248
5251
  'phone-input-placeholder': 'placeholder',
5249
5252
  };
5250
5253
 
5251
- const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$e, baseSelector: 'div' });
5254
+ const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$f, baseSelector: 'div' });
5252
5255
 
5253
5256
  class PhoneFieldInternal extends BaseInputClass$2 {
5254
5257
  static get observedAttributes() {
@@ -5387,11 +5390,11 @@ class PhoneFieldInternal extends BaseInputClass$2 {
5387
5390
  }
5388
5391
  }
5389
5392
 
5390
- customElements.define(componentName$e, PhoneFieldInternal);
5393
+ customElements.define(componentName$f, PhoneFieldInternal);
5391
5394
 
5392
5395
  const textVars = TextFieldClass.cssVarList;
5393
5396
 
5394
- const componentName$d = getComponentName('phone-input-box-field');
5397
+ const componentName$e = getComponentName('phone-input-box-field');
5395
5398
 
5396
5399
  const customMixin$3 = (superclass) =>
5397
5400
  class PhoneInputBoxFieldMixinClass extends superclass {
@@ -5405,15 +5408,15 @@ const customMixin$3 = (superclass) =>
5405
5408
  const template = document.createElement('template');
5406
5409
 
5407
5410
  template.innerHTML = `
5408
- <${componentName$e}
5411
+ <${componentName$f}
5409
5412
  tabindex="-1"
5410
5413
  slot="input"
5411
- ></${componentName$e}>
5414
+ ></${componentName$f}>
5412
5415
  `;
5413
5416
 
5414
5417
  this.baseElement.appendChild(template.content.cloneNode(true));
5415
5418
 
5416
- this.inputElement = this.shadowRoot.querySelector(componentName$e);
5419
+ this.inputElement = this.shadowRoot.querySelector(componentName$f);
5417
5420
 
5418
5421
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
5419
5422
  includeAttrs: [
@@ -5545,15 +5548,15 @@ const PhoneFieldInputBoxClass = compose(
5545
5548
  }
5546
5549
  `,
5547
5550
  excludeAttrsSync: ['tabindex'],
5548
- componentName: componentName$d,
5551
+ componentName: componentName$e,
5549
5552
  })
5550
5553
  );
5551
5554
 
5552
- customElements.define(componentName$d, PhoneFieldInputBoxClass);
5555
+ customElements.define(componentName$e, PhoneFieldInputBoxClass);
5553
5556
 
5554
- const componentName$c = getComponentName('new-password-internal');
5557
+ const componentName$d = getComponentName('new-password-internal');
5555
5558
 
5556
- const componentName$b = getComponentName('new-password');
5559
+ const componentName$c = getComponentName('new-password');
5557
5560
 
5558
5561
  const customMixin$2 = (superclass) =>
5559
5562
  class NewPasswordMixinClass extends superclass {
@@ -5563,16 +5566,16 @@ const customMixin$2 = (superclass) =>
5563
5566
  const template = document.createElement('template');
5564
5567
 
5565
5568
  template.innerHTML = `
5566
- <${componentName$c}
5569
+ <${componentName$d}
5567
5570
  name="new-password"
5568
5571
  tabindex="-1"
5569
5572
  slot="input"
5570
- ></${componentName$c}>
5573
+ ></${componentName$d}>
5571
5574
  `;
5572
5575
 
5573
5576
  this.baseElement.appendChild(template.content.cloneNode(true));
5574
5577
 
5575
- this.inputElement = this.shadowRoot.querySelector(componentName$c);
5578
+ this.inputElement = this.shadowRoot.querySelector(componentName$d);
5576
5579
 
5577
5580
  forwardAttrs(this, this.inputElement, {
5578
5581
  includeAttrs: [
@@ -5671,7 +5674,7 @@ const NewPasswordClass = compose(
5671
5674
  },
5672
5675
  `,
5673
5676
  excludeAttrsSync: ['tabindex'],
5674
- componentName: componentName$b,
5677
+ componentName: componentName$c,
5675
5678
  })
5676
5679
  );
5677
5680
 
@@ -5696,7 +5699,7 @@ const commonAttrs = [
5696
5699
 
5697
5700
  const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
5698
5701
 
5699
- const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$c, baseSelector: 'div' });
5702
+ const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$d, baseSelector: 'div' });
5700
5703
 
5701
5704
  class NewPasswordInternal extends BaseInputClass$1 {
5702
5705
  static get observedAttributes() {
@@ -5856,16 +5859,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
5856
5859
  }
5857
5860
  }
5858
5861
 
5859
- customElements.define(componentName$c, NewPasswordInternal);
5862
+ customElements.define(componentName$d, NewPasswordInternal);
5860
5863
 
5861
- customElements.define(componentName$b, NewPasswordClass);
5864
+ customElements.define(componentName$c, NewPasswordClass);
5862
5865
 
5863
- const componentName$a = getComponentName('recaptcha');
5866
+ const componentName$b = getComponentName('recaptcha');
5864
5867
 
5865
5868
  const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
5866
5869
 
5867
5870
  const BaseClass = createBaseClass({
5868
- componentName: componentName$a,
5871
+ componentName: componentName$b,
5869
5872
  baseSelector: ':host > div',
5870
5873
  });
5871
5874
  class RawRecaptcha extends BaseClass {
@@ -6017,7 +6020,7 @@ class RawRecaptcha extends BaseClass {
6017
6020
 
6018
6021
  const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
6019
6022
 
6020
- customElements.define(componentName$a, RecaptchaClass);
6023
+ customElements.define(componentName$b, RecaptchaClass);
6021
6024
 
6022
6025
  const getFileBase64 = (fileObj) => {
6023
6026
  return new Promise((resolve) => {
@@ -6031,7 +6034,7 @@ const getFilename = (fileObj) => {
6031
6034
  return fileObj.name.replace(/^.*\\/, '');
6032
6035
  };
6033
6036
 
6034
- const componentName$9 = getComponentName('upload-file');
6037
+ const componentName$a = getComponentName('upload-file');
6035
6038
 
6036
6039
  const observedAttributes = [
6037
6040
  'title',
@@ -6046,7 +6049,7 @@ const observedAttributes = [
6046
6049
  'icon',
6047
6050
  ];
6048
6051
 
6049
- const BaseInputClass = createBaseInputClass({ componentName: componentName$9, baseSelector: ':host > div' });
6052
+ const BaseInputClass = createBaseInputClass({ componentName: componentName$a, baseSelector: ':host > div' });
6050
6053
 
6051
6054
  class RawUploadFile extends BaseInputClass {
6052
6055
  static get observedAttributes() {
@@ -6256,12 +6259,12 @@ const UploadFileClass = compose(
6256
6259
  componentNameValidationMixin
6257
6260
  )(RawUploadFile);
6258
6261
 
6259
- customElements.define(componentName$9, UploadFileClass);
6262
+ customElements.define(componentName$a, UploadFileClass);
6260
6263
 
6261
- const componentName$8 = getComponentName('button-selection-group-internal');
6264
+ const componentName$9 = getComponentName('button-selection-group-internal');
6262
6265
 
6263
6266
  class ButtonSelectionGroupInternalClass extends createBaseInputClass({
6264
- componentName: componentName$8,
6267
+ componentName: componentName$9,
6265
6268
  baseSelector: 'slot',
6266
6269
  }) {
6267
6270
  constructor() {
@@ -6398,7 +6401,7 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
6398
6401
  }
6399
6402
  }
6400
6403
 
6401
- const componentName$7 = getComponentName('button-selection-group');
6404
+ const componentName$8 = getComponentName('button-selection-group');
6402
6405
 
6403
6406
  const customMixin$1 = (superclass) =>
6404
6407
  class ButtonSelectionGroupMixinClass extends superclass {
@@ -6473,18 +6476,18 @@ const customMixin$1 = (superclass) =>
6473
6476
  const template = document.createElement('template');
6474
6477
 
6475
6478
  template.innerHTML = `
6476
- <${componentName$8}
6479
+ <${componentName$9}
6477
6480
  name="button-selection-group"
6478
6481
  slot="input"
6479
6482
  tabindex="-1"
6480
6483
  >
6481
6484
  <slot></slot>
6482
- </${componentName$8}>
6485
+ </${componentName$9}>
6483
6486
  `;
6484
6487
 
6485
6488
  this.baseElement.appendChild(template.content.cloneNode(true));
6486
6489
 
6487
- this.inputElement = this.shadowRoot.querySelector(componentName$8);
6490
+ this.inputElement = this.shadowRoot.querySelector(componentName$9);
6488
6491
 
6489
6492
  forwardAttrs(this, this.inputElement, {
6490
6493
  includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -6587,18 +6590,18 @@ const ButtonSelectionGroupClass = compose(
6587
6590
  ${resetInputCursor('vaadin-text-field')}
6588
6591
  `,
6589
6592
  excludeAttrsSync: ['tabindex'],
6590
- componentName: componentName$7,
6593
+ componentName: componentName$8,
6591
6594
  })
6592
6595
  );
6593
6596
 
6594
- customElements.define(componentName$8, ButtonSelectionGroupInternalClass);
6597
+ customElements.define(componentName$9, ButtonSelectionGroupInternalClass);
6595
6598
 
6596
- customElements.define(componentName$7, ButtonSelectionGroupClass);
6599
+ customElements.define(componentName$8, ButtonSelectionGroupClass);
6597
6600
 
6598
- const componentName$6 = getComponentName('button-selection-group-item');
6601
+ const componentName$7 = getComponentName('button-selection-group-item');
6599
6602
 
6600
6603
  class RawSelectItem extends createBaseClass({
6601
- componentName: componentName$6,
6604
+ componentName: componentName$7,
6602
6605
  baseSelector: ':host > descope-button',
6603
6606
  }) {
6604
6607
  get size() {
@@ -6692,17 +6695,17 @@ const ButtonSelectionGroupItemClass = compose(
6692
6695
  componentNameValidationMixin
6693
6696
  )(RawSelectItem);
6694
6697
 
6695
- customElements.define(componentName$6, ButtonSelectionGroupItemClass);
6698
+ customElements.define(componentName$7, ButtonSelectionGroupItemClass);
6696
6699
 
6697
- const componentName$5 = getComponentName('grid-text-column');
6700
+ const componentName$6 = getComponentName('grid-text-column');
6698
6701
 
6699
6702
  class GridTextColumnClass extends GridColumn {}
6700
6703
 
6701
- customElements.define(componentName$5, GridTextColumnClass);
6704
+ customElements.define(componentName$6, GridTextColumnClass);
6702
6705
 
6703
6706
  /* eslint-disable no-param-reassign */
6704
6707
 
6705
- const componentName$4 = getComponentName('grid-status-column');
6708
+ const componentName$5 = getComponentName('grid-status-column');
6706
6709
  class GridStatusColumnClass extends GridColumn {
6707
6710
  _defaultRenderer(cell, _col, model) {
6708
6711
  const contentAttr = this.getAttribute('status');
@@ -6720,11 +6723,11 @@ class GridStatusColumnClass extends GridColumn {
6720
6723
  }
6721
6724
  }
6722
6725
 
6723
- customElements.define(componentName$4, GridStatusColumnClass);
6726
+ customElements.define(componentName$5, GridStatusColumnClass);
6724
6727
 
6725
6728
  /* eslint-disable class-methods-use-this */
6726
6729
 
6727
- const componentName$3 = getComponentName('grid-selection-column');
6730
+ const componentName$4 = getComponentName('grid-selection-column');
6728
6731
 
6729
6732
  const createCheckboxEle = () => {
6730
6733
  const checkbox = document.createElement('descope-checkbox');
@@ -6779,7 +6782,7 @@ class GridSelectionColumnClass extends GridSelectionColumn {
6779
6782
  }
6780
6783
  }
6781
6784
 
6782
- customElements.define(componentName$3, GridSelectionColumnClass);
6785
+ customElements.define(componentName$4, GridSelectionColumnClass);
6783
6786
 
6784
6787
  const isValidDataType = (data) => {
6785
6788
  const isValid = Array.isArray(data);
@@ -6791,7 +6794,7 @@ const isValidDataType = (data) => {
6791
6794
  return isValid;
6792
6795
  };
6793
6796
 
6794
- const componentName$2 = getComponentName('grid');
6797
+ const componentName$3 = getComponentName('grid');
6795
6798
 
6796
6799
  const GridMixin = (superclass) =>
6797
6800
  class GridMixinClass extends superclass {
@@ -6915,9 +6918,16 @@ const GridMixin = (superclass) =>
6915
6918
  const itemsIds = new Set(
6916
6919
  this.grid.items.map((item) => item[this.uniqueColumnId] ?? item)
6917
6920
  );
6918
- this.grid.selectedItems = this.grid.selectedItems.filter((selectedItem) =>
6921
+
6922
+ const newSelectedItems = this.grid.selectedItems.filter((selectedItem) =>
6919
6923
  itemsIds.has(selectedItem[this.uniqueColumnId] ?? selectedItem)
6920
6924
  );
6925
+
6926
+ // we want to update the selected items only if there is a reason,
6927
+ // to prevent redundant notifications
6928
+ if (this.grid.selectedItems.length !== newSelectedItems.length) {
6929
+ this.grid.selectedItems = newSelectedItems;
6930
+ }
6921
6931
  }
6922
6932
  }
6923
6933
  }
@@ -7006,11 +7016,11 @@ const GridClass = compose(
7006
7016
  }
7007
7017
  `,
7008
7018
  excludeAttrsSync: ['columns', 'tabindex'],
7009
- componentName: componentName$2,
7019
+ componentName: componentName$3,
7010
7020
  })
7011
7021
  );
7012
7022
 
7013
- customElements.define(componentName$2, GridClass);
7023
+ customElements.define(componentName$3, GridClass);
7014
7024
 
7015
7025
  const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
7016
7026
 
@@ -7338,32 +7348,32 @@ const globals = {
7338
7348
  shadow,
7339
7349
  fonts,
7340
7350
  };
7341
- const vars$t = getThemeVars(globals);
7351
+ const vars$u = getThemeVars(globals);
7342
7352
 
7343
- const globalRefs$e = getThemeRefs(globals);
7353
+ const globalRefs$f = getThemeRefs(globals);
7344
7354
  const compVars$4 = ButtonClass.cssVarList;
7345
7355
 
7346
7356
  const mode = {
7347
- primary: globalRefs$e.colors.primary,
7348
- secondary: globalRefs$e.colors.secondary,
7349
- success: globalRefs$e.colors.success,
7350
- error: globalRefs$e.colors.error,
7351
- surface: globalRefs$e.colors.surface,
7357
+ primary: globalRefs$f.colors.primary,
7358
+ secondary: globalRefs$f.colors.secondary,
7359
+ success: globalRefs$f.colors.success,
7360
+ error: globalRefs$f.colors.error,
7361
+ surface: globalRefs$f.colors.surface,
7352
7362
  };
7353
7363
 
7354
- const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$B);
7364
+ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$C);
7355
7365
 
7356
7366
  const button = {
7357
7367
  ...helperTheme$3,
7358
7368
 
7359
- [compVars$4.fontFamily]: globalRefs$e.fonts.font1.family,
7369
+ [compVars$4.fontFamily]: globalRefs$f.fonts.font1.family,
7360
7370
 
7361
7371
  [compVars$4.cursor]: 'pointer',
7362
7372
  [compVars$4.hostHeight]: '3em',
7363
7373
  [compVars$4.hostWidth]: 'auto',
7364
7374
 
7365
- [compVars$4.borderRadius]: globalRefs$e.radius.sm,
7366
- [compVars$4.borderWidth]: globalRefs$e.border.xs,
7375
+ [compVars$4.borderRadius]: globalRefs$f.radius.sm,
7376
+ [compVars$4.borderWidth]: globalRefs$f.border.xs,
7367
7377
  [compVars$4.borderStyle]: 'solid',
7368
7378
  [compVars$4.borderColor]: 'transparent',
7369
7379
 
@@ -7399,10 +7409,10 @@ const button = {
7399
7409
  },
7400
7410
 
7401
7411
  _disabled: {
7402
- [helperVars$3.main]: globalRefs$e.colors.surface.main,
7403
- [helperVars$3.dark]: globalRefs$e.colors.surface.dark,
7404
- [helperVars$3.light]: globalRefs$e.colors.surface.light,
7405
- [helperVars$3.contrast]: globalRefs$e.colors.surface.contrast,
7412
+ [helperVars$3.main]: globalRefs$f.colors.surface.main,
7413
+ [helperVars$3.dark]: globalRefs$f.colors.surface.dark,
7414
+ [helperVars$3.light]: globalRefs$f.colors.surface.light,
7415
+ [helperVars$3.contrast]: globalRefs$f.colors.surface.contrast,
7406
7416
  },
7407
7417
 
7408
7418
  variant: {
@@ -7444,11 +7454,11 @@ const button = {
7444
7454
  },
7445
7455
 
7446
7456
  _focused: {
7447
- [compVars$4.outlineColor]: globalRefs$e.colors.surface.main,
7457
+ [compVars$4.outlineColor]: globalRefs$f.colors.surface.main,
7448
7458
  },
7449
7459
  };
7450
7460
 
7451
- const vars$s = {
7461
+ const vars$t = {
7452
7462
  ...compVars$4,
7453
7463
  ...helperVars$3,
7454
7464
  };
@@ -7456,25 +7466,25 @@ const vars$s = {
7456
7466
  var button$1 = /*#__PURE__*/Object.freeze({
7457
7467
  __proto__: null,
7458
7468
  default: button,
7459
- vars: vars$s
7469
+ vars: vars$t
7460
7470
  });
7461
7471
 
7462
- const componentName$1 = getComponentName('input-wrapper');
7463
- const globalRefs$d = getThemeRefs(globals);
7472
+ const componentName$2 = getComponentName('input-wrapper');
7473
+ const globalRefs$e = getThemeRefs(globals);
7464
7474
 
7465
- const [theme$1, refs, vars$r] = createHelperVars(
7475
+ const [theme$1, refs, vars$s] = createHelperVars(
7466
7476
  {
7467
- labelTextColor: globalRefs$d.colors.surface.contrast,
7468
- valueTextColor: globalRefs$d.colors.surface.contrast,
7469
- placeholderTextColor: globalRefs$d.colors.surface.main,
7477
+ labelTextColor: globalRefs$e.colors.surface.contrast,
7478
+ valueTextColor: globalRefs$e.colors.surface.contrast,
7479
+ placeholderTextColor: globalRefs$e.colors.surface.main,
7470
7480
  requiredIndicator: "'*'",
7471
- errorMessageTextColor: globalRefs$d.colors.error.main,
7481
+ errorMessageTextColor: globalRefs$e.colors.error.main,
7472
7482
 
7473
- borderWidth: globalRefs$d.border.xs,
7474
- borderRadius: globalRefs$d.radius.xs,
7483
+ borderWidth: globalRefs$e.border.xs,
7484
+ borderRadius: globalRefs$e.radius.xs,
7475
7485
  borderColor: 'transparent',
7476
7486
 
7477
- outlineWidth: globalRefs$d.border.sm,
7487
+ outlineWidth: globalRefs$e.border.sm,
7478
7488
  outlineStyle: 'solid',
7479
7489
  outlineColor: 'transparent',
7480
7490
  outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -7485,9 +7495,9 @@ const [theme$1, refs, vars$r] = createHelperVars(
7485
7495
  horizontalPadding: '0.5em',
7486
7496
  verticalPadding: '0.5em',
7487
7497
 
7488
- backgroundColor: globalRefs$d.colors.surface.light,
7498
+ backgroundColor: globalRefs$e.colors.surface.light,
7489
7499
 
7490
- fontFamily: globalRefs$d.fonts.font1.family,
7500
+ fontFamily: globalRefs$e.fonts.font1.family,
7491
7501
 
7492
7502
  size: {
7493
7503
  xs: { fontSize: '12px' },
@@ -7501,51 +7511,86 @@ const [theme$1, refs, vars$r] = createHelperVars(
7501
7511
  },
7502
7512
 
7503
7513
  _focused: {
7504
- outlineColor: globalRefs$d.colors.surface.main,
7514
+ outlineColor: globalRefs$e.colors.surface.main,
7505
7515
  _invalid: {
7506
- outlineColor: globalRefs$d.colors.error.main,
7516
+ outlineColor: globalRefs$e.colors.error.main,
7507
7517
  },
7508
7518
  },
7509
7519
 
7510
7520
  _bordered: {
7511
- outlineWidth: globalRefs$d.border.xs,
7512
- borderColor: globalRefs$d.colors.surface.main,
7521
+ outlineWidth: globalRefs$e.border.xs,
7522
+ borderColor: globalRefs$e.colors.surface.main,
7513
7523
  borderStyle: 'solid',
7514
7524
  _invalid: {
7515
- borderColor: globalRefs$d.colors.error.main,
7525
+ borderColor: globalRefs$e.colors.error.main,
7516
7526
  },
7517
7527
  },
7518
7528
 
7519
7529
  _disabled: {
7520
- labelTextColor: globalRefs$d.colors.surface.main,
7521
- borderColor: globalRefs$d.colors.surface.main,
7522
- valueTextColor: globalRefs$d.colors.surface.dark,
7523
- placeholderTextColor: globalRefs$d.colors.surface.dark,
7524
- backgroundColor: globalRefs$d.colors.surface.main,
7530
+ labelTextColor: globalRefs$e.colors.surface.main,
7531
+ borderColor: globalRefs$e.colors.surface.main,
7532
+ valueTextColor: globalRefs$e.colors.surface.dark,
7533
+ placeholderTextColor: globalRefs$e.colors.surface.dark,
7534
+ backgroundColor: globalRefs$e.colors.surface.main,
7525
7535
  },
7526
7536
  },
7527
- componentName$1
7537
+ componentName$2
7528
7538
  );
7529
7539
 
7530
7540
  var inputWrapper = /*#__PURE__*/Object.freeze({
7531
7541
  __proto__: null,
7532
7542
  default: theme$1,
7533
7543
  refs: refs,
7534
- vars: vars$r
7544
+ vars: vars$s
7535
7545
  });
7536
7546
 
7537
- const vars$q = TextFieldClass.cssVarList;
7547
+ const vars$r = TextFieldClass.cssVarList;
7538
7548
 
7539
7549
  const textField = {
7550
+ [vars$r.hostWidth]: refs.width,
7551
+ [vars$r.hostMinWidth]: refs.minWidth,
7552
+ [vars$r.fontSize]: refs.fontSize,
7553
+ [vars$r.fontFamily]: refs.fontFamily,
7554
+ [vars$r.labelTextColor]: refs.labelTextColor,
7555
+ [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
7556
+ [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
7557
+ [vars$r.inputValueTextColor]: refs.valueTextColor,
7558
+ [vars$r.inputPlaceholderColor]: refs.placeholderTextColor,
7559
+ [vars$r.inputBorderWidth]: refs.borderWidth,
7560
+ [vars$r.inputBorderStyle]: refs.borderStyle,
7561
+ [vars$r.inputBorderColor]: refs.borderColor,
7562
+ [vars$r.inputBorderRadius]: refs.borderRadius,
7563
+ [vars$r.inputOutlineWidth]: refs.outlineWidth,
7564
+ [vars$r.inputOutlineStyle]: refs.outlineStyle,
7565
+ [vars$r.inputOutlineColor]: refs.outlineColor,
7566
+ [vars$r.inputOutlineOffset]: refs.outlineOffset,
7567
+ [vars$r.inputBackgroundColor]: refs.backgroundColor,
7568
+ [vars$r.inputHeight]: refs.inputHeight,
7569
+ [vars$r.inputHorizontalPadding]: refs.horizontalPadding,
7570
+ };
7571
+
7572
+ var textField$1 = /*#__PURE__*/Object.freeze({
7573
+ __proto__: null,
7574
+ default: textField,
7575
+ textField: textField,
7576
+ vars: vars$r
7577
+ });
7578
+
7579
+ const globalRefs$d = getThemeRefs(globals);
7580
+ const vars$q = PasswordClass.cssVarList;
7581
+
7582
+ const password = {
7540
7583
  [vars$q.hostWidth]: refs.width,
7541
- [vars$q.hostMinWidth]: refs.minWidth,
7542
7584
  [vars$q.fontSize]: refs.fontSize,
7543
7585
  [vars$q.fontFamily]: refs.fontFamily,
7544
7586
  [vars$q.labelTextColor]: refs.labelTextColor,
7545
- [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
7546
7587
  [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
7588
+ [vars$q.inputHorizontalPadding]: refs.horizontalPadding,
7589
+ [vars$q.inputHeight]: refs.inputHeight,
7590
+ [vars$q.inputBackgroundColor]: refs.backgroundColor,
7591
+ [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
7547
7592
  [vars$q.inputValueTextColor]: refs.valueTextColor,
7548
- [vars$q.inputPlaceholderColor]: refs.placeholderTextColor,
7593
+ [vars$q.inputPlaceholderTextColor]: refs.placeholderTextColor,
7549
7594
  [vars$q.inputBorderWidth]: refs.borderWidth,
7550
7595
  [vars$q.inputBorderStyle]: refs.borderStyle,
7551
7596
  [vars$q.inputBorderColor]: refs.borderColor,
@@ -7554,33 +7599,27 @@ const textField = {
7554
7599
  [vars$q.inputOutlineStyle]: refs.outlineStyle,
7555
7600
  [vars$q.inputOutlineColor]: refs.outlineColor,
7556
7601
  [vars$q.inputOutlineOffset]: refs.outlineOffset,
7557
- [vars$q.inputBackgroundColor]: refs.backgroundColor,
7558
- [vars$q.inputHeight]: refs.inputHeight,
7559
- [vars$q.inputHorizontalPadding]: refs.horizontalPadding,
7602
+ [vars$q.revealButtonOffset]: globalRefs$d.spacing.md,
7603
+ [vars$q.revealButtonSize]: refs.toggleButtonSize,
7560
7604
  };
7561
7605
 
7562
- var textField$1 = /*#__PURE__*/Object.freeze({
7606
+ var password$1 = /*#__PURE__*/Object.freeze({
7563
7607
  __proto__: null,
7564
- default: textField,
7565
- textField: textField,
7608
+ default: password,
7566
7609
  vars: vars$q
7567
7610
  });
7568
7611
 
7569
- const globalRefs$c = getThemeRefs(globals);
7570
- const vars$p = PasswordClass.cssVarList;
7612
+ const vars$p = NumberFieldClass.cssVarList;
7571
7613
 
7572
- const password = {
7614
+ const numberField = {
7573
7615
  [vars$p.hostWidth]: refs.width,
7616
+ [vars$p.hostMinWidth]: refs.minWidth,
7574
7617
  [vars$p.fontSize]: refs.fontSize,
7575
7618
  [vars$p.fontFamily]: refs.fontFamily,
7576
7619
  [vars$p.labelTextColor]: refs.labelTextColor,
7577
7620
  [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
7578
- [vars$p.inputHorizontalPadding]: refs.horizontalPadding,
7579
- [vars$p.inputHeight]: refs.inputHeight,
7580
- [vars$p.inputBackgroundColor]: refs.backgroundColor,
7581
- [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
7582
7621
  [vars$p.inputValueTextColor]: refs.valueTextColor,
7583
- [vars$p.inputPlaceholderTextColor]: refs.placeholderTextColor,
7622
+ [vars$p.inputPlaceholderColor]: refs.placeholderTextColor,
7584
7623
  [vars$p.inputBorderWidth]: refs.borderWidth,
7585
7624
  [vars$p.inputBorderStyle]: refs.borderStyle,
7586
7625
  [vars$p.inputBorderColor]: refs.borderColor,
@@ -7589,19 +7628,21 @@ const password = {
7589
7628
  [vars$p.inputOutlineStyle]: refs.outlineStyle,
7590
7629
  [vars$p.inputOutlineColor]: refs.outlineColor,
7591
7630
  [vars$p.inputOutlineOffset]: refs.outlineOffset,
7592
- [vars$p.revealButtonOffset]: globalRefs$c.spacing.md,
7593
- [vars$p.revealButtonSize]: refs.toggleButtonSize,
7631
+ [vars$p.inputBackgroundColor]: refs.backgroundColor,
7632
+ [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
7633
+ [vars$p.inputHorizontalPadding]: refs.horizontalPadding,
7634
+ [vars$p.inputHeight]: refs.inputHeight,
7594
7635
  };
7595
7636
 
7596
- var password$1 = /*#__PURE__*/Object.freeze({
7637
+ var numberField$1 = /*#__PURE__*/Object.freeze({
7597
7638
  __proto__: null,
7598
- default: password,
7639
+ default: numberField,
7599
7640
  vars: vars$p
7600
7641
  });
7601
7642
 
7602
- const vars$o = NumberFieldClass.cssVarList;
7643
+ const vars$o = EmailFieldClass.cssVarList;
7603
7644
 
7604
- const numberField = {
7645
+ const emailField = {
7605
7646
  [vars$o.hostWidth]: refs.width,
7606
7647
  [vars$o.hostMinWidth]: refs.minWidth,
7607
7648
  [vars$o.fontSize]: refs.fontSize,
@@ -7609,6 +7650,7 @@ const numberField = {
7609
7650
  [vars$o.labelTextColor]: refs.labelTextColor,
7610
7651
  [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
7611
7652
  [vars$o.inputValueTextColor]: refs.valueTextColor,
7653
+ [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
7612
7654
  [vars$o.inputPlaceholderColor]: refs.placeholderTextColor,
7613
7655
  [vars$o.inputBorderWidth]: refs.borderWidth,
7614
7656
  [vars$o.inputBorderStyle]: refs.borderStyle,
@@ -7619,197 +7661,165 @@ const numberField = {
7619
7661
  [vars$o.inputOutlineColor]: refs.outlineColor,
7620
7662
  [vars$o.inputOutlineOffset]: refs.outlineOffset,
7621
7663
  [vars$o.inputBackgroundColor]: refs.backgroundColor,
7622
- [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
7623
7664
  [vars$o.inputHorizontalPadding]: refs.horizontalPadding,
7624
7665
  [vars$o.inputHeight]: refs.inputHeight,
7625
7666
  };
7626
7667
 
7627
- var numberField$1 = /*#__PURE__*/Object.freeze({
7668
+ var emailField$1 = /*#__PURE__*/Object.freeze({
7628
7669
  __proto__: null,
7629
- default: numberField,
7670
+ default: emailField,
7630
7671
  vars: vars$o
7631
7672
  });
7632
7673
 
7633
- const vars$n = EmailFieldClass.cssVarList;
7674
+ const globalRefs$c = getThemeRefs(globals);
7675
+ const vars$n = TextAreaClass.cssVarList;
7634
7676
 
7635
- const emailField = {
7677
+ const textArea = {
7636
7678
  [vars$n.hostWidth]: refs.width,
7637
7679
  [vars$n.hostMinWidth]: refs.minWidth,
7638
7680
  [vars$n.fontSize]: refs.fontSize,
7639
7681
  [vars$n.fontFamily]: refs.fontFamily,
7640
7682
  [vars$n.labelTextColor]: refs.labelTextColor,
7683
+ [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
7641
7684
  [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
7685
+ [vars$n.inputBackgroundColor]: refs.backgroundColor,
7642
7686
  [vars$n.inputValueTextColor]: refs.valueTextColor,
7643
- [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
7644
- [vars$n.inputPlaceholderColor]: refs.placeholderTextColor,
7687
+ [vars$n.inputPlaceholderTextColor]: refs.placeholderTextColor,
7688
+ [vars$n.inputBorderRadius]: refs.borderRadius,
7645
7689
  [vars$n.inputBorderWidth]: refs.borderWidth,
7646
7690
  [vars$n.inputBorderStyle]: refs.borderStyle,
7647
7691
  [vars$n.inputBorderColor]: refs.borderColor,
7648
- [vars$n.inputBorderRadius]: refs.borderRadius,
7649
7692
  [vars$n.inputOutlineWidth]: refs.outlineWidth,
7650
7693
  [vars$n.inputOutlineStyle]: refs.outlineStyle,
7651
7694
  [vars$n.inputOutlineColor]: refs.outlineColor,
7652
7695
  [vars$n.inputOutlineOffset]: refs.outlineOffset,
7653
- [vars$n.inputBackgroundColor]: refs.backgroundColor,
7654
- [vars$n.inputHorizontalPadding]: refs.horizontalPadding,
7655
- [vars$n.inputHeight]: refs.inputHeight,
7696
+ [vars$n.inputResizeType]: 'vertical',
7697
+ [vars$n.inputMinHeight]: '5em',
7698
+
7699
+ _disabled: {
7700
+ [vars$n.inputBackgroundColor]: globalRefs$c.colors.surface.light,
7701
+ },
7702
+
7703
+ _readonly: {
7704
+ [vars$n.inputResizeType]: 'none',
7705
+ },
7656
7706
  };
7657
7707
 
7658
- var emailField$1 = /*#__PURE__*/Object.freeze({
7708
+ var textArea$1 = /*#__PURE__*/Object.freeze({
7659
7709
  __proto__: null,
7660
- default: emailField,
7710
+ default: textArea,
7661
7711
  vars: vars$n
7662
7712
  });
7663
7713
 
7664
- const globalRefs$b = getThemeRefs(globals);
7665
- const vars$m = TextAreaClass.cssVarList;
7714
+ const vars$m = CheckboxClass.cssVarList;
7715
+ const checkboxSize = '1.35em';
7666
7716
 
7667
- const textArea = {
7717
+ const checkbox = {
7668
7718
  [vars$m.hostWidth]: refs.width,
7669
- [vars$m.hostMinWidth]: refs.minWidth,
7670
7719
  [vars$m.fontSize]: refs.fontSize,
7671
7720
  [vars$m.fontFamily]: refs.fontFamily,
7672
7721
  [vars$m.labelTextColor]: refs.labelTextColor,
7673
7722
  [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
7723
+ [vars$m.labelFontWeight]: '400',
7724
+ [vars$m.labelLineHeight]: checkboxSize,
7725
+ [vars$m.labelSpacing]: '1em',
7674
7726
  [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
7675
- [vars$m.inputBackgroundColor]: refs.backgroundColor,
7676
- [vars$m.inputValueTextColor]: refs.valueTextColor,
7677
- [vars$m.inputPlaceholderTextColor]: refs.placeholderTextColor,
7727
+ [vars$m.inputOutlineWidth]: refs.outlineWidth,
7728
+ [vars$m.inputOutlineOffset]: refs.outlineOffset,
7729
+ [vars$m.inputOutlineColor]: refs.outlineColor,
7730
+ [vars$m.inputOutlineStyle]: refs.outlineStyle,
7678
7731
  [vars$m.inputBorderRadius]: refs.borderRadius,
7732
+ [vars$m.inputBorderColor]: refs.borderColor,
7679
7733
  [vars$m.inputBorderWidth]: refs.borderWidth,
7680
7734
  [vars$m.inputBorderStyle]: refs.borderStyle,
7681
- [vars$m.inputBorderColor]: refs.borderColor,
7682
- [vars$m.inputOutlineWidth]: refs.outlineWidth,
7683
- [vars$m.inputOutlineStyle]: refs.outlineStyle,
7684
- [vars$m.inputOutlineColor]: refs.outlineColor,
7685
- [vars$m.inputOutlineOffset]: refs.outlineOffset,
7686
- [vars$m.inputResizeType]: 'vertical',
7687
- [vars$m.inputMinHeight]: '5em',
7735
+ [vars$m.inputBackgroundColor]: refs.backgroundColor,
7736
+ [vars$m.inputSize]: checkboxSize,
7688
7737
 
7689
- _disabled: {
7690
- [vars$m.inputBackgroundColor]: globalRefs$b.colors.surface.light,
7738
+ _checked: {
7739
+ [vars$m.inputValueTextColor]: refs.valueTextColor,
7691
7740
  },
7692
7741
 
7693
- _readonly: {
7694
- [vars$m.inputResizeType]: 'none',
7742
+ _disabled: {
7743
+ [vars$m.labelTextColor]: refs.labelTextColor,
7695
7744
  },
7696
7745
  };
7697
7746
 
7698
- var textArea$1 = /*#__PURE__*/Object.freeze({
7747
+ var checkbox$1 = /*#__PURE__*/Object.freeze({
7699
7748
  __proto__: null,
7700
- default: textArea,
7749
+ default: checkbox,
7701
7750
  vars: vars$m
7702
7751
  });
7703
7752
 
7704
- const vars$l = CheckboxClass.cssVarList;
7705
- const checkboxSize = '1.35em';
7753
+ const knobMargin = '2px';
7754
+ const checkboxHeight = '1.25em';
7706
7755
 
7707
- const checkbox = {
7756
+ const globalRefs$b = getThemeRefs(globals);
7757
+ const vars$l = SwitchToggleClass.cssVarList;
7758
+
7759
+ const switchToggle = {
7708
7760
  [vars$l.hostWidth]: refs.width,
7709
7761
  [vars$l.fontSize]: refs.fontSize,
7710
7762
  [vars$l.fontFamily]: refs.fontFamily,
7711
- [vars$l.labelTextColor]: refs.labelTextColor,
7712
- [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
7713
- [vars$l.labelFontWeight]: '400',
7714
- [vars$l.labelLineHeight]: checkboxSize,
7715
- [vars$l.labelSpacing]: '1em',
7716
- [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
7763
+
7717
7764
  [vars$l.inputOutlineWidth]: refs.outlineWidth,
7718
7765
  [vars$l.inputOutlineOffset]: refs.outlineOffset,
7719
7766
  [vars$l.inputOutlineColor]: refs.outlineColor,
7720
7767
  [vars$l.inputOutlineStyle]: refs.outlineStyle,
7721
- [vars$l.inputBorderRadius]: refs.borderRadius,
7722
- [vars$l.inputBorderColor]: refs.borderColor,
7723
- [vars$l.inputBorderWidth]: refs.borderWidth,
7724
- [vars$l.inputBorderStyle]: refs.borderStyle,
7725
- [vars$l.inputBackgroundColor]: refs.backgroundColor,
7726
- [vars$l.inputSize]: checkboxSize,
7727
-
7728
- _checked: {
7729
- [vars$l.inputValueTextColor]: refs.valueTextColor,
7730
- },
7731
-
7732
- _disabled: {
7733
- [vars$l.labelTextColor]: refs.labelTextColor,
7734
- },
7735
- };
7736
-
7737
- var checkbox$1 = /*#__PURE__*/Object.freeze({
7738
- __proto__: null,
7739
- default: checkbox,
7740
- vars: vars$l
7741
- });
7742
7768
 
7743
- const knobMargin = '2px';
7744
- const checkboxHeight = '1.25em';
7769
+ [vars$l.trackBorderStyle]: refs.borderStyle,
7770
+ [vars$l.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
7771
+ [vars$l.trackBorderColor]: refs.borderColor,
7772
+ [vars$l.trackBackgroundColor]: 'none',
7773
+ [vars$l.trackBorderRadius]: globalRefs$b.radius.md,
7774
+ [vars$l.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
7775
+ [vars$l.trackHeight]: checkboxHeight,
7776
+
7777
+ [vars$l.knobSize]: `calc(1em - ${knobMargin})`,
7778
+ [vars$l.knobRadius]: '50%',
7779
+ [vars$l.knobTopOffset]: '1px',
7780
+ [vars$l.knobLeftOffset]: knobMargin,
7781
+ [vars$l.knobColor]: refs.valueTextColor,
7782
+ [vars$l.knobTransitionDuration]: '0.3s',
7745
7783
 
7746
- const globalRefs$a = getThemeRefs(globals);
7747
- const vars$k = SwitchToggleClass.cssVarList;
7748
-
7749
- const switchToggle = {
7750
- [vars$k.hostWidth]: refs.width,
7751
- [vars$k.fontSize]: refs.fontSize,
7752
- [vars$k.fontFamily]: refs.fontFamily,
7753
-
7754
- [vars$k.inputOutlineWidth]: refs.outlineWidth,
7755
- [vars$k.inputOutlineOffset]: refs.outlineOffset,
7756
- [vars$k.inputOutlineColor]: refs.outlineColor,
7757
- [vars$k.inputOutlineStyle]: refs.outlineStyle,
7758
-
7759
- [vars$k.trackBorderStyle]: refs.borderStyle,
7760
- [vars$k.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
7761
- [vars$k.trackBorderColor]: refs.borderColor,
7762
- [vars$k.trackBackgroundColor]: 'none',
7763
- [vars$k.trackBorderRadius]: globalRefs$a.radius.md,
7764
- [vars$k.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
7765
- [vars$k.trackHeight]: checkboxHeight,
7766
-
7767
- [vars$k.knobSize]: `calc(1em - ${knobMargin})`,
7768
- [vars$k.knobRadius]: '50%',
7769
- [vars$k.knobTopOffset]: '1px',
7770
- [vars$k.knobLeftOffset]: knobMargin,
7771
- [vars$k.knobColor]: refs.valueTextColor,
7772
- [vars$k.knobTransitionDuration]: '0.3s',
7773
-
7774
- [vars$k.labelTextColor]: refs.labelTextColor,
7775
- [vars$k.labelFontWeight]: '400',
7776
- [vars$k.labelLineHeight]: '1.35em',
7777
- [vars$k.labelSpacing]: '1em',
7778
- [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
7779
- [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
7784
+ [vars$l.labelTextColor]: refs.labelTextColor,
7785
+ [vars$l.labelFontWeight]: '400',
7786
+ [vars$l.labelLineHeight]: '1.35em',
7787
+ [vars$l.labelSpacing]: '1em',
7788
+ [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
7789
+ [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
7780
7790
 
7781
7791
  _checked: {
7782
- [vars$k.trackBorderColor]: refs.borderColor,
7783
- [vars$k.trackBackgroundColor]: refs.backgroundColor,
7784
- [vars$k.knobLeftOffset]: `calc(100% - var(${vars$k.knobSize}) - ${knobMargin})`,
7785
- [vars$k.knobColor]: refs.valueTextColor,
7786
- [vars$k.knobTextColor]: refs.valueTextColor,
7792
+ [vars$l.trackBorderColor]: refs.borderColor,
7793
+ [vars$l.trackBackgroundColor]: refs.backgroundColor,
7794
+ [vars$l.knobLeftOffset]: `calc(100% - var(${vars$l.knobSize}) - ${knobMargin})`,
7795
+ [vars$l.knobColor]: refs.valueTextColor,
7796
+ [vars$l.knobTextColor]: refs.valueTextColor,
7787
7797
  },
7788
7798
 
7789
7799
  _disabled: {
7790
- [vars$k.knobColor]: globalRefs$a.colors.surface.light,
7791
- [vars$k.trackBorderColor]: globalRefs$a.colors.surface.main,
7792
- [vars$k.trackBackgroundColor]: globalRefs$a.colors.surface.main,
7793
- [vars$k.labelTextColor]: refs.labelTextColor,
7800
+ [vars$l.knobColor]: globalRefs$b.colors.surface.light,
7801
+ [vars$l.trackBorderColor]: globalRefs$b.colors.surface.main,
7802
+ [vars$l.trackBackgroundColor]: globalRefs$b.colors.surface.main,
7803
+ [vars$l.labelTextColor]: refs.labelTextColor,
7794
7804
  _checked: {
7795
- [vars$k.knobColor]: globalRefs$a.colors.surface.light,
7796
- [vars$k.trackBackgroundColor]: globalRefs$a.colors.surface.main,
7805
+ [vars$l.knobColor]: globalRefs$b.colors.surface.light,
7806
+ [vars$l.trackBackgroundColor]: globalRefs$b.colors.surface.main,
7797
7807
  },
7798
7808
  },
7799
7809
 
7800
7810
  _invalid: {
7801
- [vars$k.trackBorderColor]: globalRefs$a.colors.error.main,
7802
- [vars$k.knobColor]: globalRefs$a.colors.error.main,
7811
+ [vars$l.trackBorderColor]: globalRefs$b.colors.error.main,
7812
+ [vars$l.knobColor]: globalRefs$b.colors.error.main,
7803
7813
  },
7804
7814
  };
7805
7815
 
7806
7816
  var switchToggle$1 = /*#__PURE__*/Object.freeze({
7807
7817
  __proto__: null,
7808
7818
  default: switchToggle,
7809
- vars: vars$k
7819
+ vars: vars$l
7810
7820
  });
7811
7821
 
7812
- const globalRefs$9 = getThemeRefs(globals);
7822
+ const globalRefs$a = getThemeRefs(globals);
7813
7823
 
7814
7824
  const compVars$3 = ContainerClass.cssVarList;
7815
7825
 
@@ -7831,18 +7841,18 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
7831
7841
  horizontalAlignment,
7832
7842
  shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
7833
7843
  },
7834
- componentName$v
7844
+ componentName$w
7835
7845
  );
7836
7846
 
7837
- const { shadowColor } = helperRefs$2;
7847
+ const { shadowColor: shadowColor$1 } = helperRefs$2;
7838
7848
 
7839
7849
  const container = {
7840
7850
  ...helperTheme$2,
7841
7851
 
7842
7852
  [compVars$3.hostWidth]: '100%',
7843
7853
  [compVars$3.boxShadow]: 'none',
7844
- [compVars$3.backgroundColor]: globalRefs$9.colors.surface.light,
7845
- [compVars$3.color]: globalRefs$9.colors.surface.contrast,
7854
+ [compVars$3.backgroundColor]: globalRefs$a.colors.surface.light,
7855
+ [compVars$3.color]: globalRefs$a.colors.surface.contrast,
7846
7856
  [compVars$3.borderRadius]: '0px',
7847
7857
 
7848
7858
  verticalPadding: {
@@ -7889,34 +7899,34 @@ const container = {
7889
7899
 
7890
7900
  shadow: {
7891
7901
  sm: {
7892
- [compVars$3.boxShadow]: `${globalRefs$9.shadow.wide.sm} ${shadowColor}, ${globalRefs$9.shadow.narrow.sm} ${shadowColor}`,
7902
+ [compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.sm} ${shadowColor$1}`,
7893
7903
  },
7894
7904
  md: {
7895
- [compVars$3.boxShadow]: `${globalRefs$9.shadow.wide.md} ${shadowColor}, ${globalRefs$9.shadow.narrow.md} ${shadowColor}`,
7905
+ [compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.md} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.md} ${shadowColor$1}`,
7896
7906
  },
7897
7907
  lg: {
7898
- [compVars$3.boxShadow]: `${globalRefs$9.shadow.wide.lg} ${shadowColor}, ${globalRefs$9.shadow.narrow.lg} ${shadowColor}`,
7908
+ [compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.lg} ${shadowColor$1}`,
7899
7909
  },
7900
7910
  xl: {
7901
- [compVars$3.boxShadow]: `${globalRefs$9.shadow.wide.xl} ${shadowColor}, ${globalRefs$9.shadow.narrow.xl} ${shadowColor}`,
7911
+ [compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.xl} ${shadowColor$1}`,
7902
7912
  },
7903
7913
  '2xl': {
7904
7914
  [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
7905
- [compVars$3.boxShadow]: `${globalRefs$9.shadow.wide['2xl']} ${shadowColor}`,
7915
+ [compVars$3.boxShadow]: `${globalRefs$a.shadow.wide['2xl']} ${shadowColor$1}`,
7906
7916
  },
7907
7917
  },
7908
7918
 
7909
7919
  borderRadius: {
7910
- sm: { [compVars$3.borderRadius]: globalRefs$9.radius.sm },
7911
- md: { [compVars$3.borderRadius]: globalRefs$9.radius.md },
7912
- lg: { [compVars$3.borderRadius]: globalRefs$9.radius.lg },
7913
- xl: { [compVars$3.borderRadius]: globalRefs$9.radius.xl },
7914
- '2xl': { [compVars$3.borderRadius]: globalRefs$9.radius['2xl'] },
7915
- '3xl': { [compVars$3.borderRadius]: globalRefs$9.radius['3xl'] },
7920
+ sm: { [compVars$3.borderRadius]: globalRefs$a.radius.sm },
7921
+ md: { [compVars$3.borderRadius]: globalRefs$a.radius.md },
7922
+ lg: { [compVars$3.borderRadius]: globalRefs$a.radius.lg },
7923
+ xl: { [compVars$3.borderRadius]: globalRefs$a.radius.xl },
7924
+ '2xl': { [compVars$3.borderRadius]: globalRefs$a.radius['2xl'] },
7925
+ '3xl': { [compVars$3.borderRadius]: globalRefs$a.radius['3xl'] },
7916
7926
  },
7917
7927
  };
7918
7928
 
7919
- const vars$j = {
7929
+ const vars$k = {
7920
7930
  ...compVars$3,
7921
7931
  ...helperVars$2,
7922
7932
  };
@@ -7924,152 +7934,152 @@ const vars$j = {
7924
7934
  var container$1 = /*#__PURE__*/Object.freeze({
7925
7935
  __proto__: null,
7926
7936
  default: container,
7927
- vars: vars$j
7937
+ vars: vars$k
7928
7938
  });
7929
7939
 
7930
- const vars$i = LogoClass.cssVarList;
7940
+ const vars$j = LogoClass.cssVarList;
7931
7941
 
7932
7942
  const logo$1 = {
7933
- [vars$i.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
7943
+ [vars$j.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
7934
7944
  };
7935
7945
 
7936
7946
  var logo$2 = /*#__PURE__*/Object.freeze({
7937
7947
  __proto__: null,
7938
7948
  default: logo$1,
7939
- vars: vars$i
7949
+ vars: vars$j
7940
7950
  });
7941
7951
 
7942
- const vars$h = TotpImageClass.cssVarList;
7952
+ const vars$i = TotpImageClass.cssVarList;
7943
7953
 
7944
7954
  const logo = {
7945
- [vars$h.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
7955
+ [vars$i.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
7946
7956
  };
7947
7957
 
7948
7958
  var totpImage = /*#__PURE__*/Object.freeze({
7949
7959
  __proto__: null,
7950
7960
  default: logo,
7951
- vars: vars$h
7961
+ vars: vars$i
7952
7962
  });
7953
7963
 
7954
- const globalRefs$8 = getThemeRefs(globals);
7955
- const vars$g = TextClass.cssVarList;
7964
+ const globalRefs$9 = getThemeRefs(globals);
7965
+ const vars$h = TextClass.cssVarList;
7956
7966
 
7957
7967
  const text = {
7958
- [vars$g.textLineHeight]: '1.35em',
7959
- [vars$g.textAlign]: 'left',
7960
- [vars$g.textColor]: globalRefs$8.colors.surface.dark,
7968
+ [vars$h.textLineHeight]: '1.35em',
7969
+ [vars$h.textAlign]: 'left',
7970
+ [vars$h.textColor]: globalRefs$9.colors.surface.dark,
7961
7971
  variant: {
7962
7972
  h1: {
7963
- [vars$g.fontSize]: globalRefs$8.typography.h1.size,
7964
- [vars$g.fontWeight]: globalRefs$8.typography.h1.weight,
7965
- [vars$g.fontFamily]: globalRefs$8.typography.h1.font,
7973
+ [vars$h.fontSize]: globalRefs$9.typography.h1.size,
7974
+ [vars$h.fontWeight]: globalRefs$9.typography.h1.weight,
7975
+ [vars$h.fontFamily]: globalRefs$9.typography.h1.font,
7966
7976
  },
7967
7977
  h2: {
7968
- [vars$g.fontSize]: globalRefs$8.typography.h2.size,
7969
- [vars$g.fontWeight]: globalRefs$8.typography.h2.weight,
7970
- [vars$g.fontFamily]: globalRefs$8.typography.h2.font,
7978
+ [vars$h.fontSize]: globalRefs$9.typography.h2.size,
7979
+ [vars$h.fontWeight]: globalRefs$9.typography.h2.weight,
7980
+ [vars$h.fontFamily]: globalRefs$9.typography.h2.font,
7971
7981
  },
7972
7982
  h3: {
7973
- [vars$g.fontSize]: globalRefs$8.typography.h3.size,
7974
- [vars$g.fontWeight]: globalRefs$8.typography.h3.weight,
7975
- [vars$g.fontFamily]: globalRefs$8.typography.h3.font,
7983
+ [vars$h.fontSize]: globalRefs$9.typography.h3.size,
7984
+ [vars$h.fontWeight]: globalRefs$9.typography.h3.weight,
7985
+ [vars$h.fontFamily]: globalRefs$9.typography.h3.font,
7976
7986
  },
7977
7987
  subtitle1: {
7978
- [vars$g.fontSize]: globalRefs$8.typography.subtitle1.size,
7979
- [vars$g.fontWeight]: globalRefs$8.typography.subtitle1.weight,
7980
- [vars$g.fontFamily]: globalRefs$8.typography.subtitle1.font,
7988
+ [vars$h.fontSize]: globalRefs$9.typography.subtitle1.size,
7989
+ [vars$h.fontWeight]: globalRefs$9.typography.subtitle1.weight,
7990
+ [vars$h.fontFamily]: globalRefs$9.typography.subtitle1.font,
7981
7991
  },
7982
7992
  subtitle2: {
7983
- [vars$g.fontSize]: globalRefs$8.typography.subtitle2.size,
7984
- [vars$g.fontWeight]: globalRefs$8.typography.subtitle2.weight,
7985
- [vars$g.fontFamily]: globalRefs$8.typography.subtitle2.font,
7993
+ [vars$h.fontSize]: globalRefs$9.typography.subtitle2.size,
7994
+ [vars$h.fontWeight]: globalRefs$9.typography.subtitle2.weight,
7995
+ [vars$h.fontFamily]: globalRefs$9.typography.subtitle2.font,
7986
7996
  },
7987
7997
  body1: {
7988
- [vars$g.fontSize]: globalRefs$8.typography.body1.size,
7989
- [vars$g.fontWeight]: globalRefs$8.typography.body1.weight,
7990
- [vars$g.fontFamily]: globalRefs$8.typography.body1.font,
7998
+ [vars$h.fontSize]: globalRefs$9.typography.body1.size,
7999
+ [vars$h.fontWeight]: globalRefs$9.typography.body1.weight,
8000
+ [vars$h.fontFamily]: globalRefs$9.typography.body1.font,
7991
8001
  },
7992
8002
  body2: {
7993
- [vars$g.fontSize]: globalRefs$8.typography.body2.size,
7994
- [vars$g.fontWeight]: globalRefs$8.typography.body2.weight,
7995
- [vars$g.fontFamily]: globalRefs$8.typography.body2.font,
8003
+ [vars$h.fontSize]: globalRefs$9.typography.body2.size,
8004
+ [vars$h.fontWeight]: globalRefs$9.typography.body2.weight,
8005
+ [vars$h.fontFamily]: globalRefs$9.typography.body2.font,
7996
8006
  },
7997
8007
  },
7998
8008
 
7999
8009
  mode: {
8000
8010
  primary: {
8001
- [vars$g.textColor]: globalRefs$8.colors.primary.main,
8011
+ [vars$h.textColor]: globalRefs$9.colors.primary.main,
8002
8012
  },
8003
8013
  secondary: {
8004
- [vars$g.textColor]: globalRefs$8.colors.secondary.main,
8014
+ [vars$h.textColor]: globalRefs$9.colors.secondary.main,
8005
8015
  },
8006
8016
  error: {
8007
- [vars$g.textColor]: globalRefs$8.colors.error.main,
8017
+ [vars$h.textColor]: globalRefs$9.colors.error.main,
8008
8018
  },
8009
8019
  success: {
8010
- [vars$g.textColor]: globalRefs$8.colors.success.main,
8020
+ [vars$h.textColor]: globalRefs$9.colors.success.main,
8011
8021
  },
8012
8022
  },
8013
8023
 
8014
8024
  textAlign: {
8015
- right: { [vars$g.textAlign]: 'right' },
8016
- left: { [vars$g.textAlign]: 'left' },
8017
- center: { [vars$g.textAlign]: 'center' },
8025
+ right: { [vars$h.textAlign]: 'right' },
8026
+ left: { [vars$h.textAlign]: 'left' },
8027
+ center: { [vars$h.textAlign]: 'center' },
8018
8028
  },
8019
8029
 
8020
8030
  _fullWidth: {
8021
- [vars$g.hostWidth]: '100%',
8031
+ [vars$h.hostWidth]: '100%',
8022
8032
  },
8023
8033
 
8024
8034
  _italic: {
8025
- [vars$g.fontStyle]: 'italic',
8035
+ [vars$h.fontStyle]: 'italic',
8026
8036
  },
8027
8037
 
8028
8038
  _uppercase: {
8029
- [vars$g.textTransform]: 'uppercase',
8039
+ [vars$h.textTransform]: 'uppercase',
8030
8040
  },
8031
8041
 
8032
8042
  _lowercase: {
8033
- [vars$g.textTransform]: 'lowercase',
8043
+ [vars$h.textTransform]: 'lowercase',
8034
8044
  },
8035
8045
  };
8036
8046
 
8037
8047
  var text$1 = /*#__PURE__*/Object.freeze({
8038
8048
  __proto__: null,
8039
8049
  default: text,
8040
- vars: vars$g
8050
+ vars: vars$h
8041
8051
  });
8042
8052
 
8043
- const globalRefs$7 = getThemeRefs(globals);
8044
- const vars$f = LinkClass.cssVarList;
8053
+ const globalRefs$8 = getThemeRefs(globals);
8054
+ const vars$g = LinkClass.cssVarList;
8045
8055
 
8046
8056
  const link = {
8047
- [vars$f.cursor]: 'pointer',
8057
+ [vars$g.cursor]: 'pointer',
8048
8058
 
8049
- [vars$f.textColor]: globalRefs$7.colors.primary.main,
8059
+ [vars$g.textColor]: globalRefs$8.colors.primary.main,
8050
8060
 
8051
8061
  textAlign: {
8052
- right: { [vars$f.textAlign]: 'right' },
8053
- left: { [vars$f.textAlign]: 'left' },
8054
- center: { [vars$f.textAlign]: 'center' },
8062
+ right: { [vars$g.textAlign]: 'right' },
8063
+ left: { [vars$g.textAlign]: 'left' },
8064
+ center: { [vars$g.textAlign]: 'center' },
8055
8065
  },
8056
8066
 
8057
8067
  _fullWidth: {
8058
- [vars$f.hostWidth]: '100%',
8068
+ [vars$g.hostWidth]: '100%',
8059
8069
  },
8060
8070
 
8061
8071
  mode: {
8062
8072
  primary: {
8063
- [vars$f.textColor]: globalRefs$7.colors.primary.main,
8073
+ [vars$g.textColor]: globalRefs$8.colors.primary.main,
8064
8074
  },
8065
8075
  secondary: {
8066
- [vars$f.textColor]: globalRefs$7.colors.secondary.main,
8076
+ [vars$g.textColor]: globalRefs$8.colors.secondary.main,
8067
8077
  },
8068
8078
  error: {
8069
- [vars$f.textColor]: globalRefs$7.colors.error.main,
8079
+ [vars$g.textColor]: globalRefs$8.colors.error.main,
8070
8080
  },
8071
8081
  success: {
8072
- [vars$f.textColor]: globalRefs$7.colors.success.main,
8082
+ [vars$g.textColor]: globalRefs$8.colors.success.main,
8073
8083
  },
8074
8084
  },
8075
8085
  };
@@ -8077,10 +8087,10 @@ const link = {
8077
8087
  var link$1 = /*#__PURE__*/Object.freeze({
8078
8088
  __proto__: null,
8079
8089
  default: link,
8080
- vars: vars$f
8090
+ vars: vars$g
8081
8091
  });
8082
8092
 
8083
- const globalRefs$6 = getThemeRefs(globals);
8093
+ const globalRefs$7 = getThemeRefs(globals);
8084
8094
  const compVars$2 = DividerClass.cssVarList;
8085
8095
 
8086
8096
  const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
@@ -8088,7 +8098,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
8088
8098
  thickness: '2px',
8089
8099
  spacing: '10px',
8090
8100
  },
8091
- componentName$u
8101
+ componentName$v
8092
8102
  );
8093
8103
 
8094
8104
  const divider = {
@@ -8098,7 +8108,7 @@ const divider = {
8098
8108
  [compVars$2.flexDirection]: 'row',
8099
8109
  [compVars$2.alignSelf]: 'stretch',
8100
8110
  [compVars$2.hostWidth]: '100%',
8101
- [compVars$2.stripeColor]: globalRefs$6.colors.surface.main,
8111
+ [compVars$2.stripeColor]: globalRefs$7.colors.surface.main,
8102
8112
  [compVars$2.stripeColorOpacity]: '0.5',
8103
8113
  [compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
8104
8114
  [compVars$2.labelTextWidth]: 'fit-content',
@@ -8117,7 +8127,7 @@ const divider = {
8117
8127
  },
8118
8128
  };
8119
8129
 
8120
- const vars$e = {
8130
+ const vars$f = {
8121
8131
  ...compVars$2,
8122
8132
  ...helperVars$1,
8123
8133
  };
@@ -8125,99 +8135,99 @@ const vars$e = {
8125
8135
  var divider$1 = /*#__PURE__*/Object.freeze({
8126
8136
  __proto__: null,
8127
8137
  default: divider,
8128
- vars: vars$e
8138
+ vars: vars$f
8129
8139
  });
8130
8140
 
8131
- const vars$d = PasscodeClass.cssVarList;
8141
+ const vars$e = PasscodeClass.cssVarList;
8132
8142
 
8133
8143
  const passcode = {
8134
- [vars$d.fontFamily]: refs.fontFamily,
8135
- [vars$d.fontSize]: refs.fontSize,
8136
- [vars$d.labelTextColor]: refs.labelTextColor,
8137
- [vars$d.labelRequiredIndicator]: refs.requiredIndicator,
8138
- [vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
8139
- [vars$d.digitValueTextColor]: refs.valueTextColor,
8140
- [vars$d.digitPadding]: '0',
8141
- [vars$d.digitTextAlign]: 'center',
8142
- [vars$d.digitSpacing]: '4px',
8143
- [vars$d.hostWidth]: refs.width,
8144
- [vars$d.digitOutlineColor]: 'transparent',
8145
- [vars$d.digitOutlineWidth]: refs.outlineWidth,
8146
- [vars$d.focusedDigitFieldOutlineColor]: refs.outlineColor,
8147
- [vars$d.digitSize]: refs.inputHeight,
8144
+ [vars$e.fontFamily]: refs.fontFamily,
8145
+ [vars$e.fontSize]: refs.fontSize,
8146
+ [vars$e.labelTextColor]: refs.labelTextColor,
8147
+ [vars$e.labelRequiredIndicator]: refs.requiredIndicator,
8148
+ [vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
8149
+ [vars$e.digitValueTextColor]: refs.valueTextColor,
8150
+ [vars$e.digitPadding]: '0',
8151
+ [vars$e.digitTextAlign]: 'center',
8152
+ [vars$e.digitSpacing]: '4px',
8153
+ [vars$e.hostWidth]: refs.width,
8154
+ [vars$e.digitOutlineColor]: 'transparent',
8155
+ [vars$e.digitOutlineWidth]: refs.outlineWidth,
8156
+ [vars$e.focusedDigitFieldOutlineColor]: refs.outlineColor,
8157
+ [vars$e.digitSize]: refs.inputHeight,
8148
8158
 
8149
8159
  _hideCursor: {
8150
- [vars$d.digitCaretTextColor]: 'transparent',
8160
+ [vars$e.digitCaretTextColor]: 'transparent',
8151
8161
  },
8152
8162
  };
8153
8163
 
8154
8164
  var passcode$1 = /*#__PURE__*/Object.freeze({
8155
8165
  __proto__: null,
8156
8166
  default: passcode,
8157
- vars: vars$d
8167
+ vars: vars$e
8158
8168
  });
8159
8169
 
8160
- const globalRefs$5 = getThemeRefs(globals);
8161
- const vars$c = LoaderLinearClass.cssVarList;
8170
+ const globalRefs$6 = getThemeRefs(globals);
8171
+ const vars$d = LoaderLinearClass.cssVarList;
8162
8172
 
8163
8173
  const loaderLinear = {
8164
- [vars$c.hostDisplay]: 'inline-block',
8165
- [vars$c.hostWidth]: '100%',
8174
+ [vars$d.hostDisplay]: 'inline-block',
8175
+ [vars$d.hostWidth]: '100%',
8166
8176
 
8167
- [vars$c.barColor]: globalRefs$5.colors.surface.contrast,
8168
- [vars$c.barWidth]: '20%',
8177
+ [vars$d.barColor]: globalRefs$6.colors.surface.contrast,
8178
+ [vars$d.barWidth]: '20%',
8169
8179
 
8170
- [vars$c.barBackgroundColor]: globalRefs$5.colors.surface.main,
8171
- [vars$c.barBorderRadius]: '4px',
8180
+ [vars$d.barBackgroundColor]: globalRefs$6.colors.surface.main,
8181
+ [vars$d.barBorderRadius]: '4px',
8172
8182
 
8173
- [vars$c.animationDuration]: '2s',
8174
- [vars$c.animationTimingFunction]: 'linear',
8175
- [vars$c.animationIterationCount]: 'infinite',
8176
- [vars$c.verticalPadding]: '0.25em',
8183
+ [vars$d.animationDuration]: '2s',
8184
+ [vars$d.animationTimingFunction]: 'linear',
8185
+ [vars$d.animationIterationCount]: 'infinite',
8186
+ [vars$d.verticalPadding]: '0.25em',
8177
8187
 
8178
8188
  size: {
8179
- xs: { [vars$c.barHeight]: '2px' },
8180
- sm: { [vars$c.barHeight]: '4px' },
8181
- md: { [vars$c.barHeight]: '6px' },
8182
- lg: { [vars$c.barHeight]: '8px' },
8189
+ xs: { [vars$d.barHeight]: '2px' },
8190
+ sm: { [vars$d.barHeight]: '4px' },
8191
+ md: { [vars$d.barHeight]: '6px' },
8192
+ lg: { [vars$d.barHeight]: '8px' },
8183
8193
  },
8184
8194
 
8185
8195
  mode: {
8186
8196
  primary: {
8187
- [vars$c.barColor]: globalRefs$5.colors.primary.main,
8197
+ [vars$d.barColor]: globalRefs$6.colors.primary.main,
8188
8198
  },
8189
8199
  secondary: {
8190
- [vars$c.barColor]: globalRefs$5.colors.secondary.main,
8200
+ [vars$d.barColor]: globalRefs$6.colors.secondary.main,
8191
8201
  },
8192
8202
  },
8193
8203
 
8194
8204
  _hidden: {
8195
- [vars$c.hostDisplay]: 'none',
8205
+ [vars$d.hostDisplay]: 'none',
8196
8206
  },
8197
8207
  };
8198
8208
 
8199
8209
  var loaderLinear$1 = /*#__PURE__*/Object.freeze({
8200
8210
  __proto__: null,
8201
8211
  default: loaderLinear,
8202
- vars: vars$c
8212
+ vars: vars$d
8203
8213
  });
8204
8214
 
8205
- const globalRefs$4 = getThemeRefs(globals);
8215
+ const globalRefs$5 = getThemeRefs(globals);
8206
8216
  const compVars$1 = LoaderRadialClass.cssVarList;
8207
8217
 
8208
8218
  const [helperTheme, helperRefs, helperVars] = createHelperVars(
8209
8219
  {
8210
- spinnerColor: globalRefs$4.colors.surface.contrast,
8220
+ spinnerColor: globalRefs$5.colors.surface.contrast,
8211
8221
  mode: {
8212
8222
  primary: {
8213
- spinnerColor: globalRefs$4.colors.primary.main,
8223
+ spinnerColor: globalRefs$5.colors.primary.main,
8214
8224
  },
8215
8225
  secondary: {
8216
- spinnerColor: globalRefs$4.colors.secondary.main,
8226
+ spinnerColor: globalRefs$5.colors.secondary.main,
8217
8227
  },
8218
8228
  },
8219
8229
  },
8220
- componentName$w
8230
+ componentName$x
8221
8231
  );
8222
8232
 
8223
8233
  const loaderRadial = {
@@ -8246,7 +8256,7 @@ const loaderRadial = {
8246
8256
  [compVars$1.hostDisplay]: 'none',
8247
8257
  },
8248
8258
  };
8249
- const vars$b = {
8259
+ const vars$c = {
8250
8260
  ...compVars$1,
8251
8261
  ...helperVars,
8252
8262
  };
@@ -8254,73 +8264,108 @@ const vars$b = {
8254
8264
  var loaderRadial$1 = /*#__PURE__*/Object.freeze({
8255
8265
  __proto__: null,
8256
8266
  default: loaderRadial,
8257
- vars: vars$b
8267
+ vars: vars$c
8258
8268
  });
8259
8269
 
8260
- const globalRefs$3 = getThemeRefs(globals);
8261
- const vars$a = ComboBoxClass.cssVarList;
8270
+ const globalRefs$4 = getThemeRefs(globals);
8271
+ const vars$b = ComboBoxClass.cssVarList;
8262
8272
 
8263
8273
  const comboBox = {
8264
- [vars$a.hostWidth]: refs.width,
8265
- [vars$a.fontSize]: refs.fontSize,
8266
- [vars$a.fontFamily]: refs.fontFamily,
8267
- [vars$a.labelTextColor]: refs.labelTextColor,
8268
- [vars$a.errorMessageTextColor]: refs.errorMessageTextColor,
8269
- [vars$a.inputBorderColor]: refs.borderColor,
8270
- [vars$a.inputBorderWidth]: refs.borderWidth,
8271
- [vars$a.inputBorderStyle]: refs.borderStyle,
8272
- [vars$a.inputBorderRadius]: refs.borderRadius,
8273
- [vars$a.inputOutlineColor]: refs.outlineColor,
8274
- [vars$a.inputOutlineOffset]: refs.outlineOffset,
8275
- [vars$a.inputOutlineWidth]: refs.outlineWidth,
8276
- [vars$a.inputOutlineStyle]: refs.outlineStyle,
8277
- [vars$a.labelRequiredIndicator]: refs.requiredIndicator,
8278
- [vars$a.inputValueTextColor]: refs.valueTextColor,
8279
- [vars$a.inputPlaceholderTextColor]: refs.placeholderTextColor,
8280
- [vars$a.inputBackgroundColor]: refs.backgroundColor,
8281
- [vars$a.inputHorizontalPadding]: refs.horizontalPadding,
8282
- [vars$a.inputHeight]: refs.inputHeight,
8283
- [vars$a.inputDropdownButtonColor]: globalRefs$3.colors.surface.contrast,
8284
- [vars$a.inputDropdownButtonCursor]: 'pointer',
8285
- [vars$a.inputDropdownButtonSize]: refs.toggleButtonSize,
8286
- [vars$a.inputDropdownButtonOffset]: globalRefs$3.spacing.xs,
8274
+ [vars$b.hostWidth]: refs.width,
8275
+ [vars$b.fontSize]: refs.fontSize,
8276
+ [vars$b.fontFamily]: refs.fontFamily,
8277
+ [vars$b.labelTextColor]: refs.labelTextColor,
8278
+ [vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
8279
+ [vars$b.inputBorderColor]: refs.borderColor,
8280
+ [vars$b.inputBorderWidth]: refs.borderWidth,
8281
+ [vars$b.inputBorderStyle]: refs.borderStyle,
8282
+ [vars$b.inputBorderRadius]: refs.borderRadius,
8283
+ [vars$b.inputOutlineColor]: refs.outlineColor,
8284
+ [vars$b.inputOutlineOffset]: refs.outlineOffset,
8285
+ [vars$b.inputOutlineWidth]: refs.outlineWidth,
8286
+ [vars$b.inputOutlineStyle]: refs.outlineStyle,
8287
+ [vars$b.labelRequiredIndicator]: refs.requiredIndicator,
8288
+ [vars$b.inputValueTextColor]: refs.valueTextColor,
8289
+ [vars$b.inputPlaceholderTextColor]: refs.placeholderTextColor,
8290
+ [vars$b.inputBackgroundColor]: refs.backgroundColor,
8291
+ [vars$b.inputHorizontalPadding]: refs.horizontalPadding,
8292
+ [vars$b.inputHeight]: refs.inputHeight,
8293
+ [vars$b.inputDropdownButtonColor]: globalRefs$4.colors.surface.contrast,
8294
+ [vars$b.inputDropdownButtonCursor]: 'pointer',
8295
+ [vars$b.inputDropdownButtonSize]: refs.toggleButtonSize,
8296
+ [vars$b.inputDropdownButtonOffset]: globalRefs$4.spacing.xs,
8287
8297
 
8288
8298
  _readonly: {
8289
- [vars$a.inputDropdownButtonCursor]: 'default',
8299
+ [vars$b.inputDropdownButtonCursor]: 'default',
8290
8300
  },
8291
8301
 
8292
8302
  // Overlay theme exposed via the component:
8293
- [vars$a.overlayFontSize]: refs.fontSize,
8294
- [vars$a.overlayFontFamily]: refs.fontFamily,
8295
- [vars$a.overlayCursor]: 'pointer',
8296
- [vars$a.overlayItemBoxShadow]: 'none',
8303
+ [vars$b.overlayFontSize]: refs.fontSize,
8304
+ [vars$b.overlayFontFamily]: refs.fontFamily,
8305
+ [vars$b.overlayCursor]: 'pointer',
8306
+ [vars$b.overlayItemBoxShadow]: 'none',
8297
8307
 
8298
8308
  // Overlay direct theme:
8299
- [vars$a.overlay.minHeight]: '400px',
8300
- [vars$a.overlay.margin]: '0',
8309
+ [vars$b.overlay.minHeight]: '400px',
8310
+ [vars$b.overlay.margin]: '0',
8301
8311
  };
8302
8312
 
8303
8313
  var comboBox$1 = /*#__PURE__*/Object.freeze({
8304
8314
  __proto__: null,
8305
8315
  comboBox: comboBox,
8306
8316
  default: comboBox,
8307
- vars: vars$a
8317
+ vars: vars$b
8308
8318
  });
8309
8319
 
8310
- const vars$9 = ImageClass.cssVarList;
8320
+ const vars$a = ImageClass.cssVarList;
8311
8321
 
8312
8322
  const image = {};
8313
8323
 
8314
8324
  var image$1 = /*#__PURE__*/Object.freeze({
8315
8325
  __proto__: null,
8316
8326
  default: image,
8317
- vars: vars$9
8327
+ vars: vars$a
8318
8328
  });
8319
8329
 
8320
- const vars$8 = PhoneFieldClass.cssVarList;
8330
+ const vars$9 = PhoneFieldClass.cssVarList;
8321
8331
 
8322
8332
  const phoneField = {
8323
- [vars$8.hostWidth]: refs.width,
8333
+ [vars$9.hostWidth]: refs.width,
8334
+ [vars$9.fontSize]: refs.fontSize,
8335
+ [vars$9.fontFamily]: refs.fontFamily,
8336
+ [vars$9.labelTextColor]: refs.labelTextColor,
8337
+ [vars$9.labelRequiredIndicator]: refs.requiredIndicator,
8338
+ [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
8339
+ [vars$9.inputValueTextColor]: refs.valueTextColor,
8340
+ [vars$9.inputPlaceholderTextColor]: refs.placeholderTextColor,
8341
+ [vars$9.inputBorderStyle]: refs.borderStyle,
8342
+ [vars$9.inputBorderWidth]: refs.borderWidth,
8343
+ [vars$9.inputBorderColor]: refs.borderColor,
8344
+ [vars$9.inputBorderRadius]: refs.borderRadius,
8345
+ [vars$9.inputOutlineStyle]: refs.outlineStyle,
8346
+ [vars$9.inputOutlineWidth]: refs.outlineWidth,
8347
+ [vars$9.inputOutlineColor]: refs.outlineColor,
8348
+ [vars$9.inputOutlineOffset]: refs.outlineOffset,
8349
+ [vars$9.phoneInputWidth]: refs.minWidth,
8350
+ [vars$9.countryCodeInputWidth]: '5em',
8351
+ [vars$9.countryCodeDropdownWidth]: '20em',
8352
+
8353
+ // '@overlay': {
8354
+ // overlayItemBackgroundColor: 'red'
8355
+ // }
8356
+ };
8357
+
8358
+ var phoneField$1 = /*#__PURE__*/Object.freeze({
8359
+ __proto__: null,
8360
+ default: phoneField,
8361
+ vars: vars$9
8362
+ });
8363
+
8364
+ const vars$8 = PhoneFieldInputBoxClass.cssVarList;
8365
+
8366
+ const phoneInputBoxField = {
8367
+ [vars$8.hostWidth]: '16em',
8368
+ [vars$8.hostMinWidth]: refs.minWidth,
8324
8369
  [vars$8.fontSize]: refs.fontSize,
8325
8370
  [vars$8.fontFamily]: refs.fontFamily,
8326
8371
  [vars$8.labelTextColor]: refs.labelTextColor,
@@ -8336,189 +8381,154 @@ const phoneField = {
8336
8381
  [vars$8.inputOutlineWidth]: refs.outlineWidth,
8337
8382
  [vars$8.inputOutlineColor]: refs.outlineColor,
8338
8383
  [vars$8.inputOutlineOffset]: refs.outlineOffset,
8339
- [vars$8.phoneInputWidth]: refs.minWidth,
8340
- [vars$8.countryCodeInputWidth]: '5em',
8341
- [vars$8.countryCodeDropdownWidth]: '20em',
8342
-
8343
- // '@overlay': {
8344
- // overlayItemBackgroundColor: 'red'
8345
- // }
8346
- };
8347
-
8348
- var phoneField$1 = /*#__PURE__*/Object.freeze({
8349
- __proto__: null,
8350
- default: phoneField,
8351
- vars: vars$8
8352
- });
8353
-
8354
- const vars$7 = PhoneFieldInputBoxClass.cssVarList;
8355
-
8356
- const phoneInputBoxField = {
8357
- [vars$7.hostWidth]: '16em',
8358
- [vars$7.hostMinWidth]: refs.minWidth,
8359
- [vars$7.fontSize]: refs.fontSize,
8360
- [vars$7.fontFamily]: refs.fontFamily,
8361
- [vars$7.labelTextColor]: refs.labelTextColor,
8362
- [vars$7.labelRequiredIndicator]: refs.requiredIndicator,
8363
- [vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
8364
- [vars$7.inputValueTextColor]: refs.valueTextColor,
8365
- [vars$7.inputPlaceholderTextColor]: refs.placeholderTextColor,
8366
- [vars$7.inputBorderStyle]: refs.borderStyle,
8367
- [vars$7.inputBorderWidth]: refs.borderWidth,
8368
- [vars$7.inputBorderColor]: refs.borderColor,
8369
- [vars$7.inputBorderRadius]: refs.borderRadius,
8370
- [vars$7.inputOutlineStyle]: refs.outlineStyle,
8371
- [vars$7.inputOutlineWidth]: refs.outlineWidth,
8372
- [vars$7.inputOutlineColor]: refs.outlineColor,
8373
- [vars$7.inputOutlineOffset]: refs.outlineOffset,
8374
8384
  _fullWidth: {
8375
- [vars$7.hostWidth]: refs.width,
8385
+ [vars$8.hostWidth]: refs.width,
8376
8386
  },
8377
8387
  };
8378
8388
 
8379
8389
  var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
8380
8390
  __proto__: null,
8381
8391
  default: phoneInputBoxField,
8382
- vars: vars$7
8392
+ vars: vars$8
8383
8393
  });
8384
8394
 
8385
- const vars$6 = NewPasswordClass.cssVarList;
8395
+ const vars$7 = NewPasswordClass.cssVarList;
8386
8396
 
8387
8397
  const newPassword = {
8388
- [vars$6.hostWidth]: refs.width,
8389
- [vars$6.hostMinWidth]: refs.minWidth,
8390
- [vars$6.fontSize]: refs.fontSize,
8391
- [vars$6.fontFamily]: refs.fontFamily,
8392
- [vars$6.spaceBetweenInputs]: '1em',
8393
- [vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
8398
+ [vars$7.hostWidth]: refs.width,
8399
+ [vars$7.hostMinWidth]: refs.minWidth,
8400
+ [vars$7.fontSize]: refs.fontSize,
8401
+ [vars$7.fontFamily]: refs.fontFamily,
8402
+ [vars$7.spaceBetweenInputs]: '1em',
8403
+ [vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
8394
8404
 
8395
8405
  _required: {
8396
8406
  // NewPassword doesn't pass `required` attribute to its Password components.
8397
8407
  // That's why we fake the required indicator on each input.
8398
8408
  // We do that by injecting `::after` element, and populating it with requiredIndicator content.
8399
- [vars$6.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
8409
+ [vars$7.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
8400
8410
  },
8401
8411
  };
8402
8412
 
8403
8413
  var newPassword$1 = /*#__PURE__*/Object.freeze({
8404
8414
  __proto__: null,
8405
8415
  default: newPassword,
8406
- vars: vars$6
8416
+ vars: vars$7
8407
8417
  });
8408
8418
 
8409
- const vars$5 = UploadFileClass.cssVarList;
8419
+ const vars$6 = UploadFileClass.cssVarList;
8410
8420
 
8411
8421
  const uploadFile = {
8412
- [vars$5.labelTextColor]: refs.labelTextColor,
8413
- [vars$5.fontFamily]: refs.fontFamily,
8422
+ [vars$6.labelTextColor]: refs.labelTextColor,
8423
+ [vars$6.fontFamily]: refs.fontFamily,
8414
8424
 
8415
- [vars$5.iconSize]: '2em',
8425
+ [vars$6.iconSize]: '2em',
8416
8426
 
8417
- [vars$5.hostPadding]: '0.75em',
8418
- [vars$5.gap]: '0.5em',
8427
+ [vars$6.hostPadding]: '0.75em',
8428
+ [vars$6.gap]: '0.5em',
8419
8429
 
8420
- [vars$5.fontSize]: '16px',
8421
- [vars$5.titleFontWeight]: '500',
8422
- [vars$5.lineHeight]: '1em',
8430
+ [vars$6.fontSize]: '16px',
8431
+ [vars$6.titleFontWeight]: '500',
8432
+ [vars$6.lineHeight]: '1em',
8423
8433
 
8424
- [vars$5.borderWidth]: refs.borderWidth,
8425
- [vars$5.borderColor]: refs.borderColor,
8426
- [vars$5.borderRadius]: refs.borderRadius,
8427
- [vars$5.borderStyle]: 'dashed',
8434
+ [vars$6.borderWidth]: refs.borderWidth,
8435
+ [vars$6.borderColor]: refs.borderColor,
8436
+ [vars$6.borderRadius]: refs.borderRadius,
8437
+ [vars$6.borderStyle]: 'dashed',
8428
8438
 
8429
8439
  _required: {
8430
- [vars$5.requiredIndicator]: refs.requiredIndicator,
8440
+ [vars$6.requiredIndicator]: refs.requiredIndicator,
8431
8441
  },
8432
8442
 
8433
8443
  size: {
8434
8444
  xs: {
8435
- [vars$5.hostHeight]: '196px',
8436
- [vars$5.hostWidth]: '200px',
8437
- [vars$5.titleFontSize]: '0.875em',
8438
- [vars$5.descriptionFontSize]: '0.875em',
8439
- [vars$5.lineHeight]: '1.25em',
8445
+ [vars$6.hostHeight]: '196px',
8446
+ [vars$6.hostWidth]: '200px',
8447
+ [vars$6.titleFontSize]: '0.875em',
8448
+ [vars$6.descriptionFontSize]: '0.875em',
8449
+ [vars$6.lineHeight]: '1.25em',
8440
8450
  },
8441
8451
  sm: {
8442
- [vars$5.hostHeight]: '216px',
8443
- [vars$5.hostWidth]: '230px',
8444
- [vars$5.titleFontSize]: '1em',
8445
- [vars$5.descriptionFontSize]: '0.875em',
8446
- [vars$5.lineHeight]: '1.25em',
8452
+ [vars$6.hostHeight]: '216px',
8453
+ [vars$6.hostWidth]: '230px',
8454
+ [vars$6.titleFontSize]: '1em',
8455
+ [vars$6.descriptionFontSize]: '0.875em',
8456
+ [vars$6.lineHeight]: '1.25em',
8447
8457
  },
8448
8458
  md: {
8449
- [vars$5.hostHeight]: '256px',
8450
- [vars$5.hostWidth]: '312px',
8451
- [vars$5.titleFontSize]: '1.125em',
8452
- [vars$5.descriptionFontSize]: '1em',
8453
- [vars$5.lineHeight]: '1.5em',
8459
+ [vars$6.hostHeight]: '256px',
8460
+ [vars$6.hostWidth]: '312px',
8461
+ [vars$6.titleFontSize]: '1.125em',
8462
+ [vars$6.descriptionFontSize]: '1em',
8463
+ [vars$6.lineHeight]: '1.5em',
8454
8464
  },
8455
8465
  lg: {
8456
- [vars$5.hostHeight]: '280px',
8457
- [vars$5.hostWidth]: '336px',
8458
- [vars$5.titleFontSize]: '1.125em',
8459
- [vars$5.descriptionFontSize]: '1.125em',
8460
- [vars$5.lineHeight]: '1.75em',
8466
+ [vars$6.hostHeight]: '280px',
8467
+ [vars$6.hostWidth]: '336px',
8468
+ [vars$6.titleFontSize]: '1.125em',
8469
+ [vars$6.descriptionFontSize]: '1.125em',
8470
+ [vars$6.lineHeight]: '1.75em',
8461
8471
  },
8462
8472
  },
8463
8473
 
8464
8474
  _fullWidth: {
8465
- [vars$5.hostWidth]: refs.width,
8475
+ [vars$6.hostWidth]: refs.width,
8466
8476
  },
8467
8477
  };
8468
8478
 
8469
8479
  var uploadFile$1 = /*#__PURE__*/Object.freeze({
8470
8480
  __proto__: null,
8471
8481
  default: uploadFile,
8472
- vars: vars$5
8482
+ vars: vars$6
8473
8483
  });
8474
8484
 
8475
- const globalRefs$2 = getThemeRefs(globals);
8485
+ const globalRefs$3 = getThemeRefs(globals);
8476
8486
 
8477
- const vars$4 = ButtonSelectionGroupItemClass.cssVarList;
8487
+ const vars$5 = ButtonSelectionGroupItemClass.cssVarList;
8478
8488
 
8479
8489
  const buttonSelectionGroupItem = {
8480
- [vars$4.backgroundColor]: globalRefs$2.colors.surface.light,
8481
- [vars$4.labelTextColor]: globalRefs$2.colors.surface.contrast,
8482
- [vars$4.borderColor]: globalRefs$2.colors.surface.main,
8483
- [vars$4.borderStyle]: 'solid',
8484
- [vars$4.borderRadius]: globalRefs$2.radius.sm,
8490
+ [vars$5.backgroundColor]: globalRefs$3.colors.surface.light,
8491
+ [vars$5.labelTextColor]: globalRefs$3.colors.surface.contrast,
8492
+ [vars$5.borderColor]: globalRefs$3.colors.surface.main,
8493
+ [vars$5.borderStyle]: 'solid',
8494
+ [vars$5.borderRadius]: globalRefs$3.radius.sm,
8485
8495
 
8486
8496
  _hover: {
8487
- [vars$4.backgroundColor]: '#f4f5f5', // can we take it from the palette?
8497
+ [vars$5.backgroundColor]: '#f4f5f5', // can we take it from the palette?
8488
8498
  },
8489
8499
 
8490
8500
  _selected: {
8491
- [vars$4.borderColor]: globalRefs$2.colors.surface.contrast,
8492
- [vars$4.backgroundColor]: globalRefs$2.colors.surface.contrast,
8493
- [vars$4.labelTextColor]: globalRefs$2.colors.surface.light,
8501
+ [vars$5.borderColor]: globalRefs$3.colors.surface.contrast,
8502
+ [vars$5.backgroundColor]: globalRefs$3.colors.surface.contrast,
8503
+ [vars$5.labelTextColor]: globalRefs$3.colors.surface.light,
8494
8504
  },
8495
8505
  };
8496
8506
 
8497
8507
  var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
8498
8508
  __proto__: null,
8499
8509
  default: buttonSelectionGroupItem,
8500
- vars: vars$4
8510
+ vars: vars$5
8501
8511
  });
8502
8512
 
8503
- const globalRefs$1 = getThemeRefs(globals);
8504
- const vars$3 = ButtonSelectionGroupClass.cssVarList;
8513
+ const globalRefs$2 = getThemeRefs(globals);
8514
+ const vars$4 = ButtonSelectionGroupClass.cssVarList;
8505
8515
 
8506
8516
  const buttonSelectionGroup = {
8507
- [vars$3.fontFamily]: refs.fontFamily,
8508
- [vars$3.labelTextColor]: refs.labelTextColor,
8509
- [vars$3.labelRequiredIndicator]: refs.requiredIndicator,
8510
- [vars$3.errorMessageTextColor]: refs.errorMessageTextColor,
8511
- [vars$3.itemsSpacing]: globalRefs$1.spacing.sm,
8512
- [vars$3.hostWidth]: refs.width,
8517
+ [vars$4.fontFamily]: refs.fontFamily,
8518
+ [vars$4.labelTextColor]: refs.labelTextColor,
8519
+ [vars$4.labelRequiredIndicator]: refs.requiredIndicator,
8520
+ [vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
8521
+ [vars$4.itemsSpacing]: globalRefs$2.spacing.sm,
8522
+ [vars$4.hostWidth]: refs.width,
8513
8523
  };
8514
8524
 
8515
8525
  var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
8516
8526
  __proto__: null,
8517
8527
  default: buttonSelectionGroup,
8518
- vars: vars$3
8528
+ vars: vars$4
8519
8529
  });
8520
8530
 
8521
- const componentName = getComponentName('modal');
8531
+ const componentName$1 = getComponentName('modal');
8522
8532
 
8523
8533
  const customMixin = (superclass) =>
8524
8534
  class ModalMixinClass extends superclass {
@@ -8614,7 +8624,7 @@ const ModalClass = compose(
8614
8624
  wrappedEleName: 'vaadin-dialog',
8615
8625
  style: () => ``,
8616
8626
  excludeAttrsSync: ['tabindex', 'opened'],
8617
- componentName,
8627
+ componentName: componentName$1,
8618
8628
  })
8619
8629
  );
8620
8630
 
@@ -8625,44 +8635,44 @@ const modal = {
8625
8635
  [compVars.overlayWidth]: '700px',
8626
8636
  };
8627
8637
 
8628
- const vars$2 = {
8638
+ const vars$3 = {
8629
8639
  ...compVars,
8630
8640
  };
8631
8641
 
8632
8642
  var modal$1 = /*#__PURE__*/Object.freeze({
8633
8643
  __proto__: null,
8634
8644
  default: modal,
8635
- vars: vars$2
8645
+ vars: vars$3
8636
8646
  });
8637
8647
 
8638
- const globalRefs = getThemeRefs(globals);
8639
- const vars$1 = GridClass.cssVarList;
8648
+ const globalRefs$1 = getThemeRefs(globals);
8649
+ const vars$2 = GridClass.cssVarList;
8640
8650
 
8641
8651
  const grid = {
8642
- [vars$1.hostWidth]: '100%',
8643
- [vars$1.hostHeight]: '100%',
8644
- [vars$1.hostMinHeight]: '400px',
8652
+ [vars$2.hostWidth]: '100%',
8653
+ [vars$2.hostHeight]: '100%',
8654
+ [vars$2.hostMinHeight]: '400px',
8645
8655
 
8646
- [vars$1.fontSize]: refs.fontSize,
8647
- [vars$1.fontFamily]: refs.fontFamily,
8656
+ [vars$2.fontSize]: refs.fontSize,
8657
+ [vars$2.fontFamily]: refs.fontFamily,
8648
8658
 
8649
- [vars$1.sortIndicatorsColor]: globalRefs.colors.primary.main,
8650
- [vars$1.activeSortIndicator]: globalRefs.colors.primary.main,
8651
- [vars$1.resizeHandleColor]: globalRefs.colors.surface.main,
8659
+ [vars$2.sortIndicatorsColor]: globalRefs$1.colors.primary.main,
8660
+ [vars$2.activeSortIndicator]: globalRefs$1.colors.primary.main,
8661
+ [vars$2.resizeHandleColor]: globalRefs$1.colors.surface.main,
8652
8662
 
8653
- [vars$1.inputBorderWidth]: refs.borderWidth,
8654
- [vars$1.inputBorderStyle]: refs.borderStyle,
8655
- [vars$1.inputBorderRadius]: refs.borderRadius,
8656
- [vars$1.inputBorderColor]: 'transparent',
8663
+ [vars$2.inputBorderWidth]: refs.borderWidth,
8664
+ [vars$2.inputBorderStyle]: refs.borderStyle,
8665
+ [vars$2.inputBorderRadius]: refs.borderRadius,
8666
+ [vars$2.inputBorderColor]: 'transparent',
8657
8667
 
8658
- [vars$1.separatorColor]: refs.borderColor,
8668
+ [vars$2.separatorColor]: refs.borderColor,
8659
8669
 
8660
- [vars$1.valueTextColor]: globalRefs.colors.surface.contrast,
8661
- [vars$1.selectedBackgroundColor]: globalRefs.colors.primary.main,
8662
- [vars$1.selectedTextColor]: globalRefs.colors.primary.contrast,
8670
+ [vars$2.valueTextColor]: globalRefs$1.colors.surface.contrast,
8671
+ [vars$2.selectedBackgroundColor]: globalRefs$1.colors.primary.main,
8672
+ [vars$2.selectedTextColor]: globalRefs$1.colors.primary.contrast,
8663
8673
 
8664
8674
  _bordered: {
8665
- [vars$1.inputBorderColor]: refs.borderColor,
8675
+ [vars$2.inputBorderColor]: refs.borderColor,
8666
8676
  },
8667
8677
  };
8668
8678
 
@@ -8670,6 +8680,129 @@ var grid$1 = /*#__PURE__*/Object.freeze({
8670
8680
  __proto__: null,
8671
8681
  default: grid,
8672
8682
  grid: grid,
8683
+ vars: vars$2
8684
+ });
8685
+
8686
+ const componentName = getComponentName('notification-card');
8687
+
8688
+ const notificationCardMixin = (superclass) =>
8689
+ class NotificationCardMixinClass extends superclass {
8690
+ close() {
8691
+ // if animation is not applied to the element, the node will not be removed
8692
+ // from the DOM. We should avoid that. So, if in any case we allow
8693
+ // customizing the animation - we should check if animation is applied
8694
+ // and if it's not applied - remove the elemnt from the DOM and dispatch
8695
+ // `card-closed` event.
8696
+ this.baseElement.addEventListener('animationend', () => {
8697
+ this.remove();
8698
+ this.dispatchEvent(new Event('card-closed'));
8699
+ });
8700
+
8701
+ this.setAttribute('opened', 'false');
8702
+ }
8703
+ };
8704
+
8705
+ const NotificationCardClass = compose(
8706
+ createStyleMixin({
8707
+ mappings: {
8708
+ hostMinWidth: { selector: () => '::part(content)', property: 'min-width' },
8709
+ fontFamily: {},
8710
+ fontSize: {},
8711
+ backgroundColor: { selector: () => '::part(content)' },
8712
+ textColor: { property: 'color' },
8713
+ boxShadow: {},
8714
+ borderWidth: { selector: () => '::part(content)', property: 'border-width' },
8715
+ borderColor: { selector: () => '::part(content)', property: 'border-color' },
8716
+ borderStyle: { selector: () => '::part(content)', property: 'border-style' },
8717
+ borderRadius: [
8718
+ { selector: () => '::part(content)', property: 'border-radius' },
8719
+ { selector: () => '::part(overlay)', property: 'border-radius' },
8720
+ ],
8721
+ verticalPadding: [
8722
+ { selector: () => '::part(content)', property: 'padding-top' },
8723
+ { selector: () => '::part(content)', property: 'padding-bottom' },
8724
+ ],
8725
+ horizontalPadding: [
8726
+ { selector: () => '::part(content)', property: 'padding-right' },
8727
+ { selector: () => '::part(content)', property: 'padding-left' },
8728
+ ],
8729
+ },
8730
+ }),
8731
+ notificationCardMixin
8732
+ )(
8733
+ createProxy({
8734
+ slots: [''],
8735
+ wrappedEleName: 'vaadin-notification-card',
8736
+ style: () => `
8737
+ vaadin-notification-card {
8738
+ box-shadow: none;
8739
+ }
8740
+ ::part(overlay) {
8741
+ box-shadow: none;
8742
+ background: none;
8743
+ }
8744
+ `,
8745
+ excludeAttrsSync: ['tabindex'],
8746
+ componentName,
8747
+ })
8748
+ );
8749
+
8750
+ customElements.define(componentName, NotificationCardClass);
8751
+
8752
+ const globalRefs = getThemeRefs(globals);
8753
+ const vars$1 = NotificationCardClass.cssVarList;
8754
+
8755
+ const shadowColor = '#00000020';
8756
+
8757
+ const notification = {
8758
+ [vars$1.hostMinWidth]: '415px',
8759
+ [vars$1.fontFamily]: globalRefs.fonts.font1.family,
8760
+ [vars$1.fontSize]: globalRefs.typography.body1.size,
8761
+ [vars$1.backgroundColor]: globalRefs.colors.surface.main,
8762
+ [vars$1.textColor]: globalRefs.colors.surface.contrast,
8763
+ [vars$1.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,
8764
+ [vars$1.verticalPadding]: '0.45em',
8765
+ [vars$1.horizontalPadding]: '1em',
8766
+ [vars$1.verticalMargin]: '1em',
8767
+ [vars$1.horizontalMargin]: '1em',
8768
+ [vars$1.borderRadius]: globalRefs.radius.md,
8769
+ [vars$1.contentSpacing]: '0.5em',
8770
+
8771
+ _bordered: {
8772
+ [vars$1.borderWidth]: globalRefs.border.sm,
8773
+ [vars$1.borderStyle]: 'solid',
8774
+ [vars$1.borderColor]: 'transparent',
8775
+ },
8776
+
8777
+ size: {
8778
+ xs: { [vars$1.fontSize]: '12px' },
8779
+ sm: { [vars$1.fontSize]: '14px' },
8780
+ md: { [vars$1.fontSize]: '16px' },
8781
+ lg: { [vars$1.fontSize]: '18px' },
8782
+ },
8783
+
8784
+ mode: {
8785
+ primary: {
8786
+ [vars$1.backgroundColor]: globalRefs.colors.primary.main,
8787
+ [vars$1.textColor]: globalRefs.colors.primary.contrast,
8788
+ [vars$1.borderColor]: globalRefs.colors.primary.light,
8789
+ },
8790
+ success: {
8791
+ [vars$1.backgroundColor]: globalRefs.colors.success.main,
8792
+ [vars$1.textColor]: globalRefs.colors.success.contrast,
8793
+ [vars$1.borderColor]: globalRefs.colors.success.light,
8794
+ },
8795
+ error: {
8796
+ [vars$1.backgroundColor]: globalRefs.colors.error.main,
8797
+ [vars$1.textColor]: globalRefs.colors.error.contrast,
8798
+ [vars$1.borderColor]: globalRefs.colors.error.light,
8799
+ },
8800
+ },
8801
+ };
8802
+
8803
+ var notificationCard = /*#__PURE__*/Object.freeze({
8804
+ __proto__: null,
8805
+ default: notification,
8673
8806
  vars: vars$1
8674
8807
  });
8675
8808
 
@@ -8702,6 +8835,7 @@ const components = {
8702
8835
  buttonSelectionGroup: buttonSelectionGroup$1,
8703
8836
  modal: modal$1,
8704
8837
  grid: grid$1,
8838
+ notificationCard,
8705
8839
  };
8706
8840
 
8707
8841
  const theme = Object.keys(components).reduce(
@@ -8714,7 +8848,7 @@ const vars = Object.keys(components).reduce(
8714
8848
  );
8715
8849
 
8716
8850
  const defaultTheme = { globals, components: theme };
8717
- const themeVars = { globals: vars$t, components: vars };
8851
+ const themeVars = { globals: vars$u, components: vars };
8718
8852
 
8719
8853
  export { ButtonClass, ButtonSelectionGroupClass, ButtonSelectionGroupItemClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
8720
8854
  //# sourceMappingURL=index.esm.js.map