@descope/web-components-ui 1.0.306 → 1.0.308

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.
@@ -631,7 +631,7 @@ const globals = {
631
631
  fonts,
632
632
  direction,
633
633
  };
634
- const vars$F = getThemeVars(globals);
634
+ const vars$G = getThemeVars(globals);
635
635
 
636
636
  const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
637
637
 
@@ -2566,6 +2566,68 @@ const inputEventsDispatchingMixin = (superclass) =>
2566
2566
  }
2567
2567
  };
2568
2568
 
2569
+ /* eslint-disable no-use-before-define */
2570
+
2571
+ const componentName$P = getComponentName('icon');
2572
+
2573
+ class RawIcon extends createBaseClass({ componentName: componentName$P, baseSelector: 'slot' }) {
2574
+ constructor() {
2575
+ super();
2576
+
2577
+ this.attachShadow({ mode: 'open' }).innerHTML = `
2578
+ <style>
2579
+ :host > slot {
2580
+ box-sizing: border-box;
2581
+ width: 100%;
2582
+ height: 100%;
2583
+ display: flex;
2584
+ overflow: auto;
2585
+ }
2586
+ :host {
2587
+ display: inline-block;
2588
+ }
2589
+ </style>
2590
+ <slot></slot>
2591
+ `;
2592
+ }
2593
+
2594
+ get items() {
2595
+ return this.shadowRoot.querySelector('slot').assignedNodes();
2596
+ }
2597
+
2598
+ #onChildrenChange() {
2599
+ // force hide icon if empty.
2600
+ if (this.items?.length > 0) {
2601
+ this.shadowRoot.host.style.setProperty('display', 'inline-block');
2602
+ } else {
2603
+ this.shadowRoot.host.style.setProperty('display', 'none');
2604
+ }
2605
+
2606
+ // set fill for all inner svgs to fill var and a fallback
2607
+ const elems = this.querySelectorAll('*[fill]');
2608
+ elems.forEach((ele) =>
2609
+ ele.setAttribute(
2610
+ 'fill',
2611
+ `var(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') || "''"})`
2612
+ )
2613
+ );
2614
+ }
2615
+
2616
+ init() {
2617
+ observeChildren(this, this.#onChildrenChange.bind(this));
2618
+ }
2619
+ }
2620
+
2621
+ const IconClass = compose(
2622
+ createStyleMixin({
2623
+ mappings: {
2624
+ fill: {},
2625
+ },
2626
+ }),
2627
+ draggableMixin,
2628
+ componentNameValidationMixin
2629
+ )(RawIcon);
2630
+
2569
2631
  const clickableMixin = (superclass) =>
2570
2632
  class ClickableMixinClass extends superclass {
2571
2633
  get isLoading() {
@@ -2647,6 +2709,10 @@ const ButtonClass = compose(
2647
2709
  verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
2648
2710
 
2649
2711
  labelTextColor: { property: 'color' },
2712
+ iconColor: {
2713
+ selector: () => `::slotted(${IconClass.componentName})`,
2714
+ property: IconClass.cssVarList.fill,
2715
+ },
2650
2716
  labelTextDecoration: { ...label$a, property: 'text-decoration' },
2651
2717
  labelSpacing: { ...label$a, property: 'gap' },
2652
2718
  textAlign: { ...label$a, property: 'justify-content', fallback: 'center' },
@@ -2787,6 +2853,7 @@ const button = {
2787
2853
  [helperVars$3.dark]: globalRefs$o.colors.surface.dark,
2788
2854
  [helperVars$3.light]: globalRefs$o.colors.surface.light,
2789
2855
  [helperVars$3.contrast]: globalRefs$o.colors.surface.main,
2856
+ [compVars$5.iconColor]: globalRefs$o.colors.surface.main,
2790
2857
  },
2791
2858
 
2792
2859
  variant: {
@@ -2834,7 +2901,7 @@ const button = {
2834
2901
  },
2835
2902
  };
2836
2903
 
2837
- const vars$E = {
2904
+ const vars$F = {
2838
2905
  ...compVars$5,
2839
2906
  ...helperVars$3,
2840
2907
  };
@@ -2842,7 +2909,7 @@ const vars$E = {
2842
2909
  var button$1 = /*#__PURE__*/Object.freeze({
2843
2910
  __proto__: null,
2844
2911
  default: button,
2845
- vars: vars$E
2912
+ vars: vars$F
2846
2913
  });
2847
2914
 
2848
2915
  const {
@@ -3107,7 +3174,7 @@ const TextFieldClass = compose(
3107
3174
  const componentName$M = getComponentName('input-wrapper');
3108
3175
  const globalRefs$n = getThemeRefs(globals);
3109
3176
 
3110
- const [theme$1, refs, vars$D] = createHelperVars(
3177
+ const [theme$1, refs, vars$E] = createHelperVars(
3111
3178
  {
3112
3179
  labelTextColor: globalRefs$n.colors.surface.dark,
3113
3180
  labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
@@ -3184,38 +3251,38 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
3184
3251
  __proto__: null,
3185
3252
  default: theme$1,
3186
3253
  refs: refs,
3187
- vars: vars$D
3254
+ vars: vars$E
3188
3255
  });
3189
3256
 
3190
- const vars$C = TextFieldClass.cssVarList;
3257
+ const vars$D = TextFieldClass.cssVarList;
3191
3258
 
3192
3259
  const textField$1 = {
3193
- [vars$C.hostWidth]: refs.width,
3194
- [vars$C.hostMinWidth]: refs.minWidth,
3195
- [vars$C.hostDirection]: refs.direction,
3196
- [vars$C.fontSize]: refs.fontSize,
3197
- [vars$C.fontFamily]: refs.fontFamily,
3198
- [vars$C.labelTextColor]: refs.labelTextColor,
3199
- [vars$C.labelRequiredIndicator]: refs.requiredIndicator,
3200
- [vars$C.errorMessageTextColor]: refs.errorMessageTextColor,
3201
- [vars$C.inputValueTextColor]: refs.valueTextColor,
3202
- [vars$C.inputPlaceholderColor]: refs.placeholderTextColor,
3203
- [vars$C.inputBorderWidth]: refs.borderWidth,
3204
- [vars$C.inputBorderStyle]: refs.borderStyle,
3205
- [vars$C.inputBorderColor]: refs.borderColor,
3206
- [vars$C.inputBorderRadius]: refs.borderRadius,
3207
- [vars$C.inputOutlineWidth]: refs.outlineWidth,
3208
- [vars$C.inputOutlineStyle]: refs.outlineStyle,
3209
- [vars$C.inputOutlineColor]: refs.outlineColor,
3210
- [vars$C.inputOutlineOffset]: refs.outlineOffset,
3211
- [vars$C.inputBackgroundColor]: refs.backgroundColor,
3212
- [vars$C.inputHeight]: refs.inputHeight,
3213
- [vars$C.inputHorizontalPadding]: refs.horizontalPadding,
3214
- [vars$C.helperTextColor]: refs.helperTextColor,
3260
+ [vars$D.hostWidth]: refs.width,
3261
+ [vars$D.hostMinWidth]: refs.minWidth,
3262
+ [vars$D.hostDirection]: refs.direction,
3263
+ [vars$D.fontSize]: refs.fontSize,
3264
+ [vars$D.fontFamily]: refs.fontFamily,
3265
+ [vars$D.labelTextColor]: refs.labelTextColor,
3266
+ [vars$D.labelRequiredIndicator]: refs.requiredIndicator,
3267
+ [vars$D.errorMessageTextColor]: refs.errorMessageTextColor,
3268
+ [vars$D.inputValueTextColor]: refs.valueTextColor,
3269
+ [vars$D.inputPlaceholderColor]: refs.placeholderTextColor,
3270
+ [vars$D.inputBorderWidth]: refs.borderWidth,
3271
+ [vars$D.inputBorderStyle]: refs.borderStyle,
3272
+ [vars$D.inputBorderColor]: refs.borderColor,
3273
+ [vars$D.inputBorderRadius]: refs.borderRadius,
3274
+ [vars$D.inputOutlineWidth]: refs.outlineWidth,
3275
+ [vars$D.inputOutlineStyle]: refs.outlineStyle,
3276
+ [vars$D.inputOutlineColor]: refs.outlineColor,
3277
+ [vars$D.inputOutlineOffset]: refs.outlineOffset,
3278
+ [vars$D.inputBackgroundColor]: refs.backgroundColor,
3279
+ [vars$D.inputHeight]: refs.inputHeight,
3280
+ [vars$D.inputHorizontalPadding]: refs.horizontalPadding,
3281
+ [vars$D.helperTextColor]: refs.helperTextColor,
3215
3282
  textAlign: {
3216
- right: { [vars$C.inputTextAlign]: 'right' },
3217
- left: { [vars$C.inputTextAlign]: 'left' },
3218
- center: { [vars$C.inputTextAlign]: 'center' },
3283
+ right: { [vars$D.inputTextAlign]: 'right' },
3284
+ left: { [vars$D.inputTextAlign]: 'left' },
3285
+ center: { [vars$D.inputTextAlign]: 'center' },
3219
3286
  },
3220
3287
  };
3221
3288
 
@@ -3223,7 +3290,7 @@ var textField$2 = /*#__PURE__*/Object.freeze({
3223
3290
  __proto__: null,
3224
3291
  default: textField$1,
3225
3292
  textField: textField$1,
3226
- vars: vars$C
3293
+ vars: vars$D
3227
3294
  });
3228
3295
 
3229
3296
  const passwordDraggableMixin = (superclass) =>
@@ -3394,38 +3461,38 @@ const PasswordClass = compose(
3394
3461
  );
3395
3462
 
3396
3463
  const globalRefs$m = getThemeRefs(globals);
3397
- const vars$B = PasswordClass.cssVarList;
3464
+ const vars$C = PasswordClass.cssVarList;
3398
3465
 
3399
3466
  const password = {
3400
- [vars$B.hostWidth]: refs.width,
3401
- [vars$B.hostDirection]: refs.direction,
3402
- [vars$B.fontSize]: refs.fontSize,
3403
- [vars$B.fontFamily]: refs.fontFamily,
3404
- [vars$B.labelTextColor]: refs.labelTextColor,
3405
- [vars$B.errorMessageTextColor]: refs.errorMessageTextColor,
3406
- [vars$B.inputHorizontalPadding]: refs.horizontalPadding,
3407
- [vars$B.inputHeight]: refs.inputHeight,
3408
- [vars$B.inputBackgroundColor]: refs.backgroundColor,
3409
- [vars$B.labelRequiredIndicator]: refs.requiredIndicator,
3410
- [vars$B.inputValueTextColor]: refs.valueTextColor,
3411
- [vars$B.inputPlaceholderTextColor]: refs.placeholderTextColor,
3412
- [vars$B.inputBorderWidth]: refs.borderWidth,
3413
- [vars$B.inputBorderStyle]: refs.borderStyle,
3414
- [vars$B.inputBorderColor]: refs.borderColor,
3415
- [vars$B.inputBorderRadius]: refs.borderRadius,
3416
- [vars$B.inputOutlineWidth]: refs.outlineWidth,
3417
- [vars$B.inputOutlineStyle]: refs.outlineStyle,
3418
- [vars$B.inputOutlineColor]: refs.outlineColor,
3419
- [vars$B.inputOutlineOffset]: refs.outlineOffset,
3420
- [vars$B.revealButtonOffset]: globalRefs$m.spacing.md,
3421
- [vars$B.revealButtonSize]: refs.toggleButtonSize,
3422
- [vars$B.revealButtonColor]: refs.placeholderTextColor,
3467
+ [vars$C.hostWidth]: refs.width,
3468
+ [vars$C.hostDirection]: refs.direction,
3469
+ [vars$C.fontSize]: refs.fontSize,
3470
+ [vars$C.fontFamily]: refs.fontFamily,
3471
+ [vars$C.labelTextColor]: refs.labelTextColor,
3472
+ [vars$C.errorMessageTextColor]: refs.errorMessageTextColor,
3473
+ [vars$C.inputHorizontalPadding]: refs.horizontalPadding,
3474
+ [vars$C.inputHeight]: refs.inputHeight,
3475
+ [vars$C.inputBackgroundColor]: refs.backgroundColor,
3476
+ [vars$C.labelRequiredIndicator]: refs.requiredIndicator,
3477
+ [vars$C.inputValueTextColor]: refs.valueTextColor,
3478
+ [vars$C.inputPlaceholderTextColor]: refs.placeholderTextColor,
3479
+ [vars$C.inputBorderWidth]: refs.borderWidth,
3480
+ [vars$C.inputBorderStyle]: refs.borderStyle,
3481
+ [vars$C.inputBorderColor]: refs.borderColor,
3482
+ [vars$C.inputBorderRadius]: refs.borderRadius,
3483
+ [vars$C.inputOutlineWidth]: refs.outlineWidth,
3484
+ [vars$C.inputOutlineStyle]: refs.outlineStyle,
3485
+ [vars$C.inputOutlineColor]: refs.outlineColor,
3486
+ [vars$C.inputOutlineOffset]: refs.outlineOffset,
3487
+ [vars$C.revealButtonOffset]: globalRefs$m.spacing.md,
3488
+ [vars$C.revealButtonSize]: refs.toggleButtonSize,
3489
+ [vars$C.revealButtonColor]: refs.placeholderTextColor,
3423
3490
  };
3424
3491
 
3425
3492
  var password$1 = /*#__PURE__*/Object.freeze({
3426
3493
  __proto__: null,
3427
3494
  default: password,
3428
- vars: vars$B
3495
+ vars: vars$C
3429
3496
  });
3430
3497
 
3431
3498
  const componentName$K = getComponentName('number-field');
@@ -3458,36 +3525,36 @@ const NumberFieldClass = compose(
3458
3525
  })
3459
3526
  );
3460
3527
 
3461
- const vars$A = NumberFieldClass.cssVarList;
3528
+ const vars$B = NumberFieldClass.cssVarList;
3462
3529
 
3463
3530
  const numberField = {
3464
- [vars$A.hostWidth]: refs.width,
3465
- [vars$A.hostMinWidth]: refs.minWidth,
3466
- [vars$A.hostDirection]: refs.direction,
3467
- [vars$A.fontSize]: refs.fontSize,
3468
- [vars$A.fontFamily]: refs.fontFamily,
3469
- [vars$A.labelTextColor]: refs.labelTextColor,
3470
- [vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
3471
- [vars$A.inputValueTextColor]: refs.valueTextColor,
3472
- [vars$A.inputPlaceholderColor]: refs.placeholderTextColor,
3473
- [vars$A.inputBorderWidth]: refs.borderWidth,
3474
- [vars$A.inputBorderStyle]: refs.borderStyle,
3475
- [vars$A.inputBorderColor]: refs.borderColor,
3476
- [vars$A.inputBorderRadius]: refs.borderRadius,
3477
- [vars$A.inputOutlineWidth]: refs.outlineWidth,
3478
- [vars$A.inputOutlineStyle]: refs.outlineStyle,
3479
- [vars$A.inputOutlineColor]: refs.outlineColor,
3480
- [vars$A.inputOutlineOffset]: refs.outlineOffset,
3481
- [vars$A.inputBackgroundColor]: refs.backgroundColor,
3482
- [vars$A.labelRequiredIndicator]: refs.requiredIndicator,
3483
- [vars$A.inputHorizontalPadding]: refs.horizontalPadding,
3484
- [vars$A.inputHeight]: refs.inputHeight,
3531
+ [vars$B.hostWidth]: refs.width,
3532
+ [vars$B.hostMinWidth]: refs.minWidth,
3533
+ [vars$B.hostDirection]: refs.direction,
3534
+ [vars$B.fontSize]: refs.fontSize,
3535
+ [vars$B.fontFamily]: refs.fontFamily,
3536
+ [vars$B.labelTextColor]: refs.labelTextColor,
3537
+ [vars$B.errorMessageTextColor]: refs.errorMessageTextColor,
3538
+ [vars$B.inputValueTextColor]: refs.valueTextColor,
3539
+ [vars$B.inputPlaceholderColor]: refs.placeholderTextColor,
3540
+ [vars$B.inputBorderWidth]: refs.borderWidth,
3541
+ [vars$B.inputBorderStyle]: refs.borderStyle,
3542
+ [vars$B.inputBorderColor]: refs.borderColor,
3543
+ [vars$B.inputBorderRadius]: refs.borderRadius,
3544
+ [vars$B.inputOutlineWidth]: refs.outlineWidth,
3545
+ [vars$B.inputOutlineStyle]: refs.outlineStyle,
3546
+ [vars$B.inputOutlineColor]: refs.outlineColor,
3547
+ [vars$B.inputOutlineOffset]: refs.outlineOffset,
3548
+ [vars$B.inputBackgroundColor]: refs.backgroundColor,
3549
+ [vars$B.labelRequiredIndicator]: refs.requiredIndicator,
3550
+ [vars$B.inputHorizontalPadding]: refs.horizontalPadding,
3551
+ [vars$B.inputHeight]: refs.inputHeight,
3485
3552
  };
3486
3553
 
3487
3554
  var numberField$1 = /*#__PURE__*/Object.freeze({
3488
3555
  __proto__: null,
3489
3556
  default: numberField,
3490
- vars: vars$A
3557
+ vars: vars$B
3491
3558
  });
3492
3559
 
3493
3560
  const componentName$J = getComponentName('email-field');
@@ -3529,36 +3596,36 @@ const EmailFieldClass = compose(
3529
3596
  })
3530
3597
  );
3531
3598
 
3532
- const vars$z = EmailFieldClass.cssVarList;
3599
+ const vars$A = EmailFieldClass.cssVarList;
3533
3600
 
3534
3601
  const emailField = {
3535
- [vars$z.hostWidth]: refs.width,
3536
- [vars$z.hostMinWidth]: refs.minWidth,
3537
- [vars$z.hostDirection]: refs.direction,
3538
- [vars$z.fontSize]: refs.fontSize,
3539
- [vars$z.fontFamily]: refs.fontFamily,
3540
- [vars$z.labelTextColor]: refs.labelTextColor,
3541
- [vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
3542
- [vars$z.inputValueTextColor]: refs.valueTextColor,
3543
- [vars$z.labelRequiredIndicator]: refs.requiredIndicator,
3544
- [vars$z.inputPlaceholderColor]: refs.placeholderTextColor,
3545
- [vars$z.inputBorderWidth]: refs.borderWidth,
3546
- [vars$z.inputBorderStyle]: refs.borderStyle,
3547
- [vars$z.inputBorderColor]: refs.borderColor,
3548
- [vars$z.inputBorderRadius]: refs.borderRadius,
3549
- [vars$z.inputOutlineWidth]: refs.outlineWidth,
3550
- [vars$z.inputOutlineStyle]: refs.outlineStyle,
3551
- [vars$z.inputOutlineColor]: refs.outlineColor,
3552
- [vars$z.inputOutlineOffset]: refs.outlineOffset,
3553
- [vars$z.inputBackgroundColor]: refs.backgroundColor,
3554
- [vars$z.inputHorizontalPadding]: refs.horizontalPadding,
3555
- [vars$z.inputHeight]: refs.inputHeight,
3602
+ [vars$A.hostWidth]: refs.width,
3603
+ [vars$A.hostMinWidth]: refs.minWidth,
3604
+ [vars$A.hostDirection]: refs.direction,
3605
+ [vars$A.fontSize]: refs.fontSize,
3606
+ [vars$A.fontFamily]: refs.fontFamily,
3607
+ [vars$A.labelTextColor]: refs.labelTextColor,
3608
+ [vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
3609
+ [vars$A.inputValueTextColor]: refs.valueTextColor,
3610
+ [vars$A.labelRequiredIndicator]: refs.requiredIndicator,
3611
+ [vars$A.inputPlaceholderColor]: refs.placeholderTextColor,
3612
+ [vars$A.inputBorderWidth]: refs.borderWidth,
3613
+ [vars$A.inputBorderStyle]: refs.borderStyle,
3614
+ [vars$A.inputBorderColor]: refs.borderColor,
3615
+ [vars$A.inputBorderRadius]: refs.borderRadius,
3616
+ [vars$A.inputOutlineWidth]: refs.outlineWidth,
3617
+ [vars$A.inputOutlineStyle]: refs.outlineStyle,
3618
+ [vars$A.inputOutlineColor]: refs.outlineColor,
3619
+ [vars$A.inputOutlineOffset]: refs.outlineOffset,
3620
+ [vars$A.inputBackgroundColor]: refs.backgroundColor,
3621
+ [vars$A.inputHorizontalPadding]: refs.horizontalPadding,
3622
+ [vars$A.inputHeight]: refs.inputHeight,
3556
3623
  };
3557
3624
 
3558
3625
  var emailField$1 = /*#__PURE__*/Object.freeze({
3559
3626
  __proto__: null,
3560
3627
  default: emailField,
3561
- vars: vars$z
3628
+ vars: vars$A
3562
3629
  });
3563
3630
 
3564
3631
  const componentName$I = getComponentName('text-area');
@@ -3641,45 +3708,45 @@ const TextAreaClass = compose(
3641
3708
  })
3642
3709
  );
3643
3710
 
3644
- const vars$y = TextAreaClass.cssVarList;
3711
+ const vars$z = TextAreaClass.cssVarList;
3645
3712
 
3646
3713
  const textArea = {
3647
- [vars$y.hostWidth]: refs.width,
3648
- [vars$y.hostMinWidth]: refs.minWidth,
3649
- [vars$y.hostDirection]: refs.direction,
3650
- [vars$y.fontSize]: refs.fontSize,
3651
- [vars$y.fontFamily]: refs.fontFamily,
3652
- [vars$y.labelTextColor]: refs.labelTextColor,
3653
- [vars$y.labelRequiredIndicator]: refs.requiredIndicator,
3654
- [vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
3655
- [vars$y.inputBackgroundColor]: refs.backgroundColor,
3656
- [vars$y.inputValueTextColor]: refs.valueTextColor,
3657
- [vars$y.inputPlaceholderTextColor]: refs.placeholderTextColor,
3658
- [vars$y.inputBorderRadius]: refs.borderRadius,
3659
- [vars$y.inputBorderWidth]: refs.borderWidth,
3660
- [vars$y.inputBorderStyle]: refs.borderStyle,
3661
- [vars$y.inputBorderColor]: refs.borderColor,
3662
- [vars$y.inputOutlineWidth]: refs.outlineWidth,
3663
- [vars$y.inputOutlineStyle]: refs.outlineStyle,
3664
- [vars$y.inputOutlineColor]: refs.outlineColor,
3665
- [vars$y.inputOutlineOffset]: refs.outlineOffset,
3666
- [vars$y.inputResizeType]: 'vertical',
3667
- [vars$y.inputMinHeight]: '5em',
3714
+ [vars$z.hostWidth]: refs.width,
3715
+ [vars$z.hostMinWidth]: refs.minWidth,
3716
+ [vars$z.hostDirection]: refs.direction,
3717
+ [vars$z.fontSize]: refs.fontSize,
3718
+ [vars$z.fontFamily]: refs.fontFamily,
3719
+ [vars$z.labelTextColor]: refs.labelTextColor,
3720
+ [vars$z.labelRequiredIndicator]: refs.requiredIndicator,
3721
+ [vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
3722
+ [vars$z.inputBackgroundColor]: refs.backgroundColor,
3723
+ [vars$z.inputValueTextColor]: refs.valueTextColor,
3724
+ [vars$z.inputPlaceholderTextColor]: refs.placeholderTextColor,
3725
+ [vars$z.inputBorderRadius]: refs.borderRadius,
3726
+ [vars$z.inputBorderWidth]: refs.borderWidth,
3727
+ [vars$z.inputBorderStyle]: refs.borderStyle,
3728
+ [vars$z.inputBorderColor]: refs.borderColor,
3729
+ [vars$z.inputOutlineWidth]: refs.outlineWidth,
3730
+ [vars$z.inputOutlineStyle]: refs.outlineStyle,
3731
+ [vars$z.inputOutlineColor]: refs.outlineColor,
3732
+ [vars$z.inputOutlineOffset]: refs.outlineOffset,
3733
+ [vars$z.inputResizeType]: 'vertical',
3734
+ [vars$z.inputMinHeight]: '5em',
3668
3735
  textAlign: {
3669
- right: { [vars$y.inputTextAlign]: 'right' },
3670
- left: { [vars$y.inputTextAlign]: 'left' },
3671
- center: { [vars$y.inputTextAlign]: 'center' },
3736
+ right: { [vars$z.inputTextAlign]: 'right' },
3737
+ left: { [vars$z.inputTextAlign]: 'left' },
3738
+ center: { [vars$z.inputTextAlign]: 'center' },
3672
3739
  },
3673
3740
 
3674
3741
  _readonly: {
3675
- [vars$y.inputResizeType]: 'none',
3742
+ [vars$z.inputResizeType]: 'none',
3676
3743
  },
3677
3744
  };
3678
3745
 
3679
3746
  var textArea$1 = /*#__PURE__*/Object.freeze({
3680
3747
  __proto__: null,
3681
3748
  default: textArea,
3682
- vars: vars$y
3749
+ vars: vars$z
3683
3750
  });
3684
3751
 
3685
3752
  const createBaseInputClass = (...args) =>
@@ -3888,44 +3955,44 @@ const CheckboxClass = compose(
3888
3955
  })
3889
3956
  );
3890
3957
 
3891
- const vars$x = CheckboxClass.cssVarList;
3958
+ const vars$y = CheckboxClass.cssVarList;
3892
3959
  const checkboxSize = '1.35em';
3893
3960
 
3894
3961
  const checkbox = {
3895
- [vars$x.hostWidth]: refs.width,
3896
- [vars$x.hostDirection]: refs.direction,
3897
- [vars$x.fontSize]: refs.fontSize,
3898
- [vars$x.fontFamily]: refs.fontFamily,
3899
- [vars$x.labelTextColor]: refs.labelTextColor,
3900
- [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
3901
- [vars$x.labelFontWeight]: '400',
3902
- [vars$x.labelLineHeight]: checkboxSize,
3903
- [vars$x.labelSpacing]: '1em',
3904
- [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
3905
- [vars$x.inputOutlineWidth]: refs.outlineWidth,
3906
- [vars$x.inputOutlineOffset]: refs.outlineOffset,
3907
- [vars$x.inputOutlineColor]: refs.outlineColor,
3908
- [vars$x.inputOutlineStyle]: refs.outlineStyle,
3909
- [vars$x.inputBorderRadius]: refs.borderRadius,
3910
- [vars$x.inputBorderColor]: refs.borderColor,
3911
- [vars$x.inputBorderWidth]: refs.borderWidth,
3912
- [vars$x.inputBorderStyle]: refs.borderStyle,
3913
- [vars$x.inputBackgroundColor]: refs.backgroundColor,
3914
- [vars$x.inputSize]: checkboxSize,
3962
+ [vars$y.hostWidth]: refs.width,
3963
+ [vars$y.hostDirection]: refs.direction,
3964
+ [vars$y.fontSize]: refs.fontSize,
3965
+ [vars$y.fontFamily]: refs.fontFamily,
3966
+ [vars$y.labelTextColor]: refs.labelTextColor,
3967
+ [vars$y.labelRequiredIndicator]: refs.requiredIndicator,
3968
+ [vars$y.labelFontWeight]: '400',
3969
+ [vars$y.labelLineHeight]: checkboxSize,
3970
+ [vars$y.labelSpacing]: '1em',
3971
+ [vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
3972
+ [vars$y.inputOutlineWidth]: refs.outlineWidth,
3973
+ [vars$y.inputOutlineOffset]: refs.outlineOffset,
3974
+ [vars$y.inputOutlineColor]: refs.outlineColor,
3975
+ [vars$y.inputOutlineStyle]: refs.outlineStyle,
3976
+ [vars$y.inputBorderRadius]: refs.borderRadius,
3977
+ [vars$y.inputBorderColor]: refs.borderColor,
3978
+ [vars$y.inputBorderWidth]: refs.borderWidth,
3979
+ [vars$y.inputBorderStyle]: refs.borderStyle,
3980
+ [vars$y.inputBackgroundColor]: refs.backgroundColor,
3981
+ [vars$y.inputSize]: checkboxSize,
3915
3982
 
3916
3983
  _checked: {
3917
- [vars$x.inputValueTextColor]: refs.valueTextColor,
3984
+ [vars$y.inputValueTextColor]: refs.valueTextColor,
3918
3985
  },
3919
3986
 
3920
3987
  _disabled: {
3921
- [vars$x.labelTextColor]: refs.labelTextColor,
3988
+ [vars$y.labelTextColor]: refs.labelTextColor,
3922
3989
  },
3923
3990
  };
3924
3991
 
3925
3992
  var checkbox$1 = /*#__PURE__*/Object.freeze({
3926
3993
  __proto__: null,
3927
3994
  default: checkbox,
3928
- vars: vars$x
3995
+ vars: vars$y
3929
3996
  });
3930
3997
 
3931
3998
  const componentName$F = getComponentName('switch-toggle');
@@ -4068,69 +4135,69 @@ const knobMargin = '2px';
4068
4135
  const checkboxHeight = '1.25em';
4069
4136
 
4070
4137
  const globalRefs$l = getThemeRefs(globals);
4071
- const vars$w = SwitchToggleClass.cssVarList;
4138
+ const vars$x = SwitchToggleClass.cssVarList;
4072
4139
 
4073
4140
  const switchToggle = {
4074
- [vars$w.hostWidth]: refs.width,
4075
- [vars$w.hostDirection]: refs.direction,
4076
- [vars$w.fontSize]: refs.fontSize,
4077
- [vars$w.fontFamily]: refs.fontFamily,
4078
-
4079
- [vars$w.inputOutlineWidth]: refs.outlineWidth,
4080
- [vars$w.inputOutlineOffset]: refs.outlineOffset,
4081
- [vars$w.inputOutlineColor]: refs.outlineColor,
4082
- [vars$w.inputOutlineStyle]: refs.outlineStyle,
4083
-
4084
- [vars$w.trackBorderStyle]: refs.borderStyle,
4085
- [vars$w.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
4086
- [vars$w.trackBorderColor]: refs.borderColor,
4087
- [vars$w.trackBackgroundColor]: refs.backgroundColor,
4088
- [vars$w.trackBorderRadius]: globalRefs$l.radius.md,
4089
- [vars$w.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
4090
- [vars$w.trackHeight]: checkboxHeight,
4091
-
4092
- [vars$w.knobSize]: `calc(1em - ${knobMargin})`,
4093
- [vars$w.knobRadius]: '50%',
4094
- [vars$w.knobTopOffset]: '1px',
4095
- [vars$w.knobLeftOffset]: knobMargin,
4096
- [vars$w.knobColor]: refs.labelTextColor,
4097
- [vars$w.knobTransitionDuration]: '0.3s',
4098
-
4099
- [vars$w.labelTextColor]: refs.labelTextColor,
4100
- [vars$w.labelFontWeight]: '400',
4101
- [vars$w.labelLineHeight]: '1.35em',
4102
- [vars$w.labelSpacing]: '1em',
4103
- [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
4104
- [vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
4141
+ [vars$x.hostWidth]: refs.width,
4142
+ [vars$x.hostDirection]: refs.direction,
4143
+ [vars$x.fontSize]: refs.fontSize,
4144
+ [vars$x.fontFamily]: refs.fontFamily,
4145
+
4146
+ [vars$x.inputOutlineWidth]: refs.outlineWidth,
4147
+ [vars$x.inputOutlineOffset]: refs.outlineOffset,
4148
+ [vars$x.inputOutlineColor]: refs.outlineColor,
4149
+ [vars$x.inputOutlineStyle]: refs.outlineStyle,
4150
+
4151
+ [vars$x.trackBorderStyle]: refs.borderStyle,
4152
+ [vars$x.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
4153
+ [vars$x.trackBorderColor]: refs.borderColor,
4154
+ [vars$x.trackBackgroundColor]: refs.backgroundColor,
4155
+ [vars$x.trackBorderRadius]: globalRefs$l.radius.md,
4156
+ [vars$x.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
4157
+ [vars$x.trackHeight]: checkboxHeight,
4158
+
4159
+ [vars$x.knobSize]: `calc(1em - ${knobMargin})`,
4160
+ [vars$x.knobRadius]: '50%',
4161
+ [vars$x.knobTopOffset]: '1px',
4162
+ [vars$x.knobLeftOffset]: knobMargin,
4163
+ [vars$x.knobColor]: refs.labelTextColor,
4164
+ [vars$x.knobTransitionDuration]: '0.3s',
4165
+
4166
+ [vars$x.labelTextColor]: refs.labelTextColor,
4167
+ [vars$x.labelFontWeight]: '400',
4168
+ [vars$x.labelLineHeight]: '1.35em',
4169
+ [vars$x.labelSpacing]: '1em',
4170
+ [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
4171
+ [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
4105
4172
 
4106
4173
  _checked: {
4107
- [vars$w.trackBorderColor]: refs.borderColor,
4108
- [vars$w.knobLeftOffset]: `calc(100% - var(${vars$w.knobSize}) - ${knobMargin})`,
4109
- [vars$w.knobColor]: refs.valueTextColor,
4110
- [vars$w.knobTextColor]: refs.valueTextColor,
4174
+ [vars$x.trackBorderColor]: refs.borderColor,
4175
+ [vars$x.knobLeftOffset]: `calc(100% - var(${vars$x.knobSize}) - ${knobMargin})`,
4176
+ [vars$x.knobColor]: refs.valueTextColor,
4177
+ [vars$x.knobTextColor]: refs.valueTextColor,
4111
4178
  },
4112
4179
 
4113
4180
  _disabled: {
4114
- [vars$w.knobColor]: globalRefs$l.colors.surface.light,
4115
- [vars$w.trackBorderColor]: globalRefs$l.colors.surface.light,
4116
- [vars$w.trackBackgroundColor]: globalRefs$l.colors.surface.main,
4117
- [vars$w.labelTextColor]: refs.labelTextColor,
4181
+ [vars$x.knobColor]: globalRefs$l.colors.surface.light,
4182
+ [vars$x.trackBorderColor]: globalRefs$l.colors.surface.light,
4183
+ [vars$x.trackBackgroundColor]: globalRefs$l.colors.surface.main,
4184
+ [vars$x.labelTextColor]: refs.labelTextColor,
4118
4185
  _checked: {
4119
- [vars$w.knobColor]: globalRefs$l.colors.surface.light,
4120
- [vars$w.trackBackgroundColor]: globalRefs$l.colors.surface.main,
4186
+ [vars$x.knobColor]: globalRefs$l.colors.surface.light,
4187
+ [vars$x.trackBackgroundColor]: globalRefs$l.colors.surface.main,
4121
4188
  },
4122
4189
  },
4123
4190
 
4124
4191
  _invalid: {
4125
- [vars$w.trackBorderColor]: globalRefs$l.colors.error.main,
4126
- [vars$w.knobColor]: globalRefs$l.colors.error.main,
4192
+ [vars$x.trackBorderColor]: globalRefs$l.colors.error.main,
4193
+ [vars$x.knobColor]: globalRefs$l.colors.error.main,
4127
4194
  },
4128
4195
  };
4129
4196
 
4130
4197
  var switchToggle$1 = /*#__PURE__*/Object.freeze({
4131
4198
  __proto__: null,
4132
4199
  default: switchToggle,
4133
- vars: vars$w
4200
+ vars: vars$x
4134
4201
  });
4135
4202
 
4136
4203
  const componentName$E = getComponentName('container');
@@ -4296,7 +4363,7 @@ const container = {
4296
4363
  },
4297
4364
  };
4298
4365
 
4299
- const vars$v = {
4366
+ const vars$w = {
4300
4367
  ...compVars$4,
4301
4368
  ...helperVars$2,
4302
4369
  };
@@ -4304,7 +4371,7 @@ const vars$v = {
4304
4371
  var container$1 = /*#__PURE__*/Object.freeze({
4305
4372
  __proto__: null,
4306
4373
  default: container,
4307
- vars: vars$v
4374
+ vars: vars$w
4308
4375
  });
4309
4376
 
4310
4377
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
@@ -4365,16 +4432,16 @@ const LogoClass = createCssVarImageClass({
4365
4432
  fallbackVarName: 'fallbackUrl',
4366
4433
  });
4367
4434
 
4368
- const vars$u = LogoClass.cssVarList;
4435
+ const vars$v = LogoClass.cssVarList;
4369
4436
 
4370
4437
  const logo$2 = {
4371
- [vars$u.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
4438
+ [vars$v.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
4372
4439
  };
4373
4440
 
4374
4441
  var logo$3 = /*#__PURE__*/Object.freeze({
4375
4442
  __proto__: null,
4376
4443
  default: logo$2,
4377
- vars: vars$u
4444
+ vars: vars$v
4378
4445
  });
4379
4446
 
4380
4447
  const componentName$C = getComponentName('totp-image');
@@ -4385,16 +4452,16 @@ const TotpImageClass = createCssVarImageClass({
4385
4452
  fallbackVarName: 'fallbackUrl',
4386
4453
  });
4387
4454
 
4388
- const vars$t = TotpImageClass.cssVarList;
4455
+ const vars$u = TotpImageClass.cssVarList;
4389
4456
 
4390
4457
  const logo$1 = {
4391
- [vars$t.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
4458
+ [vars$u.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
4392
4459
  };
4393
4460
 
4394
4461
  var totpImage = /*#__PURE__*/Object.freeze({
4395
4462
  __proto__: null,
4396
4463
  default: logo$1,
4397
- vars: vars$t
4464
+ vars: vars$u
4398
4465
  });
4399
4466
 
4400
4467
  const componentName$B = getComponentName('notp-image');
@@ -4405,16 +4472,16 @@ const NotpImageClass = createCssVarImageClass({
4405
4472
  fallbackVarName: 'fallbackUrl',
4406
4473
  });
4407
4474
 
4408
- const vars$s = NotpImageClass.cssVarList;
4475
+ const vars$t = NotpImageClass.cssVarList;
4409
4476
 
4410
4477
  const logo = {
4411
- [vars$s.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
4478
+ [vars$t.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
4412
4479
  };
4413
4480
 
4414
4481
  var notpImage = /*#__PURE__*/Object.freeze({
4415
4482
  __proto__: null,
4416
4483
  default: logo,
4417
- vars: vars$s
4484
+ vars: vars$t
4418
4485
  });
4419
4486
 
4420
4487
  const componentName$A = getComponentName('text');
@@ -4476,93 +4543,93 @@ const TextClass = compose(
4476
4543
  )(RawText);
4477
4544
 
4478
4545
  const globalRefs$j = getThemeRefs(globals);
4479
- const vars$r = TextClass.cssVarList;
4546
+ const vars$s = TextClass.cssVarList;
4480
4547
 
4481
4548
  const text$2 = {
4482
- [vars$r.hostDirection]: globalRefs$j.direction,
4483
- [vars$r.textLineHeight]: '1.35em',
4484
- [vars$r.textAlign]: 'left',
4485
- [vars$r.textColor]: globalRefs$j.colors.surface.dark,
4549
+ [vars$s.hostDirection]: globalRefs$j.direction,
4550
+ [vars$s.textLineHeight]: '1.35em',
4551
+ [vars$s.textAlign]: 'left',
4552
+ [vars$s.textColor]: globalRefs$j.colors.surface.dark,
4486
4553
  variant: {
4487
4554
  h1: {
4488
- [vars$r.fontSize]: globalRefs$j.typography.h1.size,
4489
- [vars$r.fontWeight]: globalRefs$j.typography.h1.weight,
4490
- [vars$r.fontFamily]: globalRefs$j.typography.h1.font,
4555
+ [vars$s.fontSize]: globalRefs$j.typography.h1.size,
4556
+ [vars$s.fontWeight]: globalRefs$j.typography.h1.weight,
4557
+ [vars$s.fontFamily]: globalRefs$j.typography.h1.font,
4491
4558
  },
4492
4559
  h2: {
4493
- [vars$r.fontSize]: globalRefs$j.typography.h2.size,
4494
- [vars$r.fontWeight]: globalRefs$j.typography.h2.weight,
4495
- [vars$r.fontFamily]: globalRefs$j.typography.h2.font,
4560
+ [vars$s.fontSize]: globalRefs$j.typography.h2.size,
4561
+ [vars$s.fontWeight]: globalRefs$j.typography.h2.weight,
4562
+ [vars$s.fontFamily]: globalRefs$j.typography.h2.font,
4496
4563
  },
4497
4564
  h3: {
4498
- [vars$r.fontSize]: globalRefs$j.typography.h3.size,
4499
- [vars$r.fontWeight]: globalRefs$j.typography.h3.weight,
4500
- [vars$r.fontFamily]: globalRefs$j.typography.h3.font,
4565
+ [vars$s.fontSize]: globalRefs$j.typography.h3.size,
4566
+ [vars$s.fontWeight]: globalRefs$j.typography.h3.weight,
4567
+ [vars$s.fontFamily]: globalRefs$j.typography.h3.font,
4501
4568
  },
4502
4569
  subtitle1: {
4503
- [vars$r.fontSize]: globalRefs$j.typography.subtitle1.size,
4504
- [vars$r.fontWeight]: globalRefs$j.typography.subtitle1.weight,
4505
- [vars$r.fontFamily]: globalRefs$j.typography.subtitle1.font,
4570
+ [vars$s.fontSize]: globalRefs$j.typography.subtitle1.size,
4571
+ [vars$s.fontWeight]: globalRefs$j.typography.subtitle1.weight,
4572
+ [vars$s.fontFamily]: globalRefs$j.typography.subtitle1.font,
4506
4573
  },
4507
4574
  subtitle2: {
4508
- [vars$r.fontSize]: globalRefs$j.typography.subtitle2.size,
4509
- [vars$r.fontWeight]: globalRefs$j.typography.subtitle2.weight,
4510
- [vars$r.fontFamily]: globalRefs$j.typography.subtitle2.font,
4575
+ [vars$s.fontSize]: globalRefs$j.typography.subtitle2.size,
4576
+ [vars$s.fontWeight]: globalRefs$j.typography.subtitle2.weight,
4577
+ [vars$s.fontFamily]: globalRefs$j.typography.subtitle2.font,
4511
4578
  },
4512
4579
  body1: {
4513
- [vars$r.fontSize]: globalRefs$j.typography.body1.size,
4514
- [vars$r.fontWeight]: globalRefs$j.typography.body1.weight,
4515
- [vars$r.fontFamily]: globalRefs$j.typography.body1.font,
4580
+ [vars$s.fontSize]: globalRefs$j.typography.body1.size,
4581
+ [vars$s.fontWeight]: globalRefs$j.typography.body1.weight,
4582
+ [vars$s.fontFamily]: globalRefs$j.typography.body1.font,
4516
4583
  },
4517
4584
  body2: {
4518
- [vars$r.fontSize]: globalRefs$j.typography.body2.size,
4519
- [vars$r.fontWeight]: globalRefs$j.typography.body2.weight,
4520
- [vars$r.fontFamily]: globalRefs$j.typography.body2.font,
4585
+ [vars$s.fontSize]: globalRefs$j.typography.body2.size,
4586
+ [vars$s.fontWeight]: globalRefs$j.typography.body2.weight,
4587
+ [vars$s.fontFamily]: globalRefs$j.typography.body2.font,
4521
4588
  },
4522
4589
  },
4523
4590
 
4524
4591
  mode: {
4525
4592
  primary: {
4526
- [vars$r.textColor]: globalRefs$j.colors.surface.contrast,
4593
+ [vars$s.textColor]: globalRefs$j.colors.surface.contrast,
4527
4594
  },
4528
4595
  secondary: {
4529
- [vars$r.textColor]: globalRefs$j.colors.surface.dark,
4596
+ [vars$s.textColor]: globalRefs$j.colors.surface.dark,
4530
4597
  },
4531
4598
  error: {
4532
- [vars$r.textColor]: globalRefs$j.colors.error.main,
4599
+ [vars$s.textColor]: globalRefs$j.colors.error.main,
4533
4600
  },
4534
4601
  success: {
4535
- [vars$r.textColor]: globalRefs$j.colors.success.main,
4602
+ [vars$s.textColor]: globalRefs$j.colors.success.main,
4536
4603
  },
4537
4604
  },
4538
4605
 
4539
4606
  textAlign: {
4540
- right: { [vars$r.textAlign]: 'right' },
4541
- left: { [vars$r.textAlign]: 'left' },
4542
- center: { [vars$r.textAlign]: 'center' },
4607
+ right: { [vars$s.textAlign]: 'right' },
4608
+ left: { [vars$s.textAlign]: 'left' },
4609
+ center: { [vars$s.textAlign]: 'center' },
4543
4610
  },
4544
4611
 
4545
4612
  _fullWidth: {
4546
- [vars$r.hostWidth]: '100%',
4613
+ [vars$s.hostWidth]: '100%',
4547
4614
  },
4548
4615
 
4549
4616
  _italic: {
4550
- [vars$r.fontStyle]: 'italic',
4617
+ [vars$s.fontStyle]: 'italic',
4551
4618
  },
4552
4619
 
4553
4620
  _uppercase: {
4554
- [vars$r.textTransform]: 'uppercase',
4621
+ [vars$s.textTransform]: 'uppercase',
4555
4622
  },
4556
4623
 
4557
4624
  _lowercase: {
4558
- [vars$r.textTransform]: 'lowercase',
4625
+ [vars$s.textTransform]: 'lowercase',
4559
4626
  },
4560
4627
  };
4561
4628
 
4562
4629
  var text$3 = /*#__PURE__*/Object.freeze({
4563
4630
  __proto__: null,
4564
4631
  default: text$2,
4565
- vars: vars$r
4632
+ vars: vars$s
4566
4633
  });
4567
4634
 
4568
4635
  const textRuleSet = {
@@ -4809,122 +4876,122 @@ const LinkClass = compose(
4809
4876
  )(RawLink);
4810
4877
 
4811
4878
  const globalRefs$i = getThemeRefs(globals);
4812
- const vars$q = EnrichedTextClass.cssVarList;
4879
+ const vars$r = EnrichedTextClass.cssVarList;
4813
4880
 
4814
4881
  const EnrichedText = {
4815
- [vars$q.hostDirection]: globalRefs$i.direction,
4882
+ [vars$r.hostDirection]: globalRefs$i.direction,
4816
4883
 
4817
- [vars$q.fontSize]: globalRefs$i.typography.body1.size,
4818
- [vars$q.fontWeight]: globalRefs$i.typography.body1.weight,
4819
- [vars$q.fontFamily]: globalRefs$i.typography.body1.font,
4884
+ [vars$r.fontSize]: globalRefs$i.typography.body1.size,
4885
+ [vars$r.fontWeight]: globalRefs$i.typography.body1.weight,
4886
+ [vars$r.fontFamily]: globalRefs$i.typography.body1.font,
4820
4887
 
4821
- [vars$q.textLineHeight]: '1.35em',
4822
- [vars$q.textAlign]: 'left',
4823
- [vars$q.textColor]: globalRefs$i.colors.surface.dark,
4888
+ [vars$r.textLineHeight]: '1.35em',
4889
+ [vars$r.textAlign]: 'left',
4890
+ [vars$r.textColor]: globalRefs$i.colors.surface.dark,
4824
4891
 
4825
- [vars$q.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
4892
+ [vars$r.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
4826
4893
 
4827
4894
  mode: {
4828
4895
  primary: {
4829
- [vars$q.textColor]: globalRefs$i.colors.surface.contrast,
4896
+ [vars$r.textColor]: globalRefs$i.colors.surface.contrast,
4830
4897
  },
4831
4898
  secondary: {
4832
- [vars$q.textColor]: globalRefs$i.colors.surface.dark,
4899
+ [vars$r.textColor]: globalRefs$i.colors.surface.dark,
4833
4900
  },
4834
4901
  error: {
4835
- [vars$q.textColor]: globalRefs$i.colors.error.main,
4902
+ [vars$r.textColor]: globalRefs$i.colors.error.main,
4836
4903
  },
4837
4904
  success: {
4838
- [vars$q.textColor]: globalRefs$i.colors.success.main,
4905
+ [vars$r.textColor]: globalRefs$i.colors.success.main,
4839
4906
  },
4840
4907
  },
4841
4908
 
4842
4909
  variant: {
4843
4910
  h1: {
4844
- [vars$q.fontSize]: globalRefs$i.typography.h1.size,
4845
- [vars$q.fontWeight]: globalRefs$i.typography.h1.weight,
4846
- [vars$q.fontFamily]: globalRefs$i.typography.h1.font,
4911
+ [vars$r.fontSize]: globalRefs$i.typography.h1.size,
4912
+ [vars$r.fontWeight]: globalRefs$i.typography.h1.weight,
4913
+ [vars$r.fontFamily]: globalRefs$i.typography.h1.font,
4847
4914
  },
4848
4915
  h2: {
4849
- [vars$q.fontSize]: globalRefs$i.typography.h2.size,
4850
- [vars$q.fontWeight]: globalRefs$i.typography.h2.weight,
4851
- [vars$q.fontFamily]: globalRefs$i.typography.h2.font,
4916
+ [vars$r.fontSize]: globalRefs$i.typography.h2.size,
4917
+ [vars$r.fontWeight]: globalRefs$i.typography.h2.weight,
4918
+ [vars$r.fontFamily]: globalRefs$i.typography.h2.font,
4852
4919
  },
4853
4920
  h3: {
4854
- [vars$q.fontSize]: globalRefs$i.typography.h3.size,
4855
- [vars$q.fontWeight]: globalRefs$i.typography.h3.weight,
4856
- [vars$q.fontFamily]: globalRefs$i.typography.h3.font,
4921
+ [vars$r.fontSize]: globalRefs$i.typography.h3.size,
4922
+ [vars$r.fontWeight]: globalRefs$i.typography.h3.weight,
4923
+ [vars$r.fontFamily]: globalRefs$i.typography.h3.font,
4857
4924
  },
4858
4925
  subtitle1: {
4859
- [vars$q.fontSize]: globalRefs$i.typography.subtitle1.size,
4860
- [vars$q.fontWeight]: globalRefs$i.typography.subtitle1.weight,
4861
- [vars$q.fontFamily]: globalRefs$i.typography.subtitle1.font,
4926
+ [vars$r.fontSize]: globalRefs$i.typography.subtitle1.size,
4927
+ [vars$r.fontWeight]: globalRefs$i.typography.subtitle1.weight,
4928
+ [vars$r.fontFamily]: globalRefs$i.typography.subtitle1.font,
4862
4929
  },
4863
4930
  subtitle2: {
4864
- [vars$q.fontSize]: globalRefs$i.typography.subtitle2.size,
4865
- [vars$q.fontWeight]: globalRefs$i.typography.subtitle2.weight,
4866
- [vars$q.fontFamily]: globalRefs$i.typography.subtitle2.font,
4931
+ [vars$r.fontSize]: globalRefs$i.typography.subtitle2.size,
4932
+ [vars$r.fontWeight]: globalRefs$i.typography.subtitle2.weight,
4933
+ [vars$r.fontFamily]: globalRefs$i.typography.subtitle2.font,
4867
4934
  },
4868
4935
  body1: {
4869
- [vars$q.fontSize]: globalRefs$i.typography.body1.size,
4870
- [vars$q.fontWeight]: globalRefs$i.typography.body1.weight,
4871
- [vars$q.fontFamily]: globalRefs$i.typography.body1.font,
4936
+ [vars$r.fontSize]: globalRefs$i.typography.body1.size,
4937
+ [vars$r.fontWeight]: globalRefs$i.typography.body1.weight,
4938
+ [vars$r.fontFamily]: globalRefs$i.typography.body1.font,
4872
4939
  },
4873
4940
  body2: {
4874
- [vars$q.fontSize]: globalRefs$i.typography.body2.size,
4875
- [vars$q.fontWeight]: globalRefs$i.typography.body2.weight,
4876
- [vars$q.fontFamily]: globalRefs$i.typography.body2.font,
4941
+ [vars$r.fontSize]: globalRefs$i.typography.body2.size,
4942
+ [vars$r.fontWeight]: globalRefs$i.typography.body2.weight,
4943
+ [vars$r.fontFamily]: globalRefs$i.typography.body2.font,
4877
4944
  },
4878
4945
  },
4879
4946
 
4880
4947
  textAlign: {
4881
- right: { [vars$q.textAlign]: 'right' },
4882
- left: { [vars$q.textAlign]: 'left' },
4883
- center: { [vars$q.textAlign]: 'center' },
4948
+ right: { [vars$r.textAlign]: 'right' },
4949
+ left: { [vars$r.textAlign]: 'left' },
4950
+ center: { [vars$r.textAlign]: 'center' },
4884
4951
  },
4885
4952
 
4886
4953
  _fullWidth: {
4887
- [vars$q.hostWidth]: '100%',
4954
+ [vars$r.hostWidth]: '100%',
4888
4955
  },
4889
4956
  };
4890
4957
 
4891
4958
  var EnrichedText$1 = /*#__PURE__*/Object.freeze({
4892
4959
  __proto__: null,
4893
4960
  default: EnrichedText,
4894
- vars: vars$q
4961
+ vars: vars$r
4895
4962
  });
4896
4963
 
4897
4964
  const globalRefs$h = getThemeRefs(globals);
4898
- const vars$p = LinkClass.cssVarList;
4965
+ const vars$q = LinkClass.cssVarList;
4899
4966
 
4900
4967
  const link = {
4901
- [vars$p.hostDirection]: globalRefs$h.direction,
4902
- [vars$p.cursor]: 'pointer',
4968
+ [vars$q.hostDirection]: globalRefs$h.direction,
4969
+ [vars$q.cursor]: 'pointer',
4903
4970
 
4904
- [vars$p.textColor]: globalRefs$h.colors.primary.main,
4971
+ [vars$q.textColor]: globalRefs$h.colors.primary.main,
4905
4972
 
4906
4973
  textAlign: {
4907
- right: { [vars$p.textAlign]: 'right' },
4908
- left: { [vars$p.textAlign]: 'left' },
4909
- center: { [vars$p.textAlign]: 'center' },
4974
+ right: { [vars$q.textAlign]: 'right' },
4975
+ left: { [vars$q.textAlign]: 'left' },
4976
+ center: { [vars$q.textAlign]: 'center' },
4910
4977
  },
4911
4978
 
4912
4979
  _fullWidth: {
4913
- [vars$p.hostWidth]: '100%',
4980
+ [vars$q.hostWidth]: '100%',
4914
4981
  },
4915
4982
 
4916
4983
  mode: {
4917
4984
  primary: {
4918
- [vars$p.textColor]: globalRefs$h.colors.primary.main,
4985
+ [vars$q.textColor]: globalRefs$h.colors.primary.main,
4919
4986
  },
4920
4987
  secondary: {
4921
- [vars$p.textColor]: globalRefs$h.colors.secondary.main,
4988
+ [vars$q.textColor]: globalRefs$h.colors.secondary.main,
4922
4989
  },
4923
4990
  error: {
4924
- [vars$p.textColor]: globalRefs$h.colors.error.main,
4991
+ [vars$q.textColor]: globalRefs$h.colors.error.main,
4925
4992
  },
4926
4993
  success: {
4927
- [vars$p.textColor]: globalRefs$h.colors.success.main,
4994
+ [vars$q.textColor]: globalRefs$h.colors.success.main,
4928
4995
  },
4929
4996
  },
4930
4997
  };
@@ -4932,7 +4999,7 @@ const link = {
4932
4999
  var link$1 = /*#__PURE__*/Object.freeze({
4933
5000
  __proto__: null,
4934
5001
  default: link,
4935
- vars: vars$p
5002
+ vars: vars$q
4936
5003
  });
4937
5004
 
4938
5005
  const componentName$x = getComponentName('divider');
@@ -5074,7 +5141,7 @@ const divider = {
5074
5141
  },
5075
5142
  };
5076
5143
 
5077
- const vars$o = {
5144
+ const vars$p = {
5078
5145
  ...compVars$3,
5079
5146
  ...helperVars$1,
5080
5147
  };
@@ -5082,7 +5149,7 @@ const vars$o = {
5082
5149
  var divider$1 = /*#__PURE__*/Object.freeze({
5083
5150
  __proto__: null,
5084
5151
  default: divider,
5085
- vars: vars$o
5152
+ vars: vars$p
5086
5153
  });
5087
5154
 
5088
5155
  /* eslint-disable no-param-reassign */
@@ -5317,45 +5384,45 @@ const PasscodeClass = compose(
5317
5384
  })
5318
5385
  );
5319
5386
 
5320
- const vars$n = PasscodeClass.cssVarList;
5387
+ const vars$o = PasscodeClass.cssVarList;
5321
5388
 
5322
5389
  const passcode = {
5323
- [vars$n.hostDirection]: refs.direction,
5324
- [vars$n.fontFamily]: refs.fontFamily,
5325
- [vars$n.fontSize]: refs.fontSize,
5326
- [vars$n.labelTextColor]: refs.labelTextColor,
5327
- [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
5328
- [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
5329
- [vars$n.digitValueTextColor]: refs.valueTextColor,
5330
- [vars$n.digitPadding]: '0',
5331
- [vars$n.digitTextAlign]: 'center',
5332
- [vars$n.digitSpacing]: '4px',
5333
- [vars$n.hostWidth]: refs.width,
5334
- [vars$n.digitOutlineColor]: 'transparent',
5335
- [vars$n.digitOutlineWidth]: refs.outlineWidth,
5336
- [vars$n.focusedDigitFieldOutlineColor]: refs.outlineColor,
5337
- [vars$n.digitSize]: refs.inputHeight,
5390
+ [vars$o.hostDirection]: refs.direction,
5391
+ [vars$o.fontFamily]: refs.fontFamily,
5392
+ [vars$o.fontSize]: refs.fontSize,
5393
+ [vars$o.labelTextColor]: refs.labelTextColor,
5394
+ [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
5395
+ [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
5396
+ [vars$o.digitValueTextColor]: refs.valueTextColor,
5397
+ [vars$o.digitPadding]: '0',
5398
+ [vars$o.digitTextAlign]: 'center',
5399
+ [vars$o.digitSpacing]: '4px',
5400
+ [vars$o.hostWidth]: refs.width,
5401
+ [vars$o.digitOutlineColor]: 'transparent',
5402
+ [vars$o.digitOutlineWidth]: refs.outlineWidth,
5403
+ [vars$o.focusedDigitFieldOutlineColor]: refs.outlineColor,
5404
+ [vars$o.digitSize]: refs.inputHeight,
5338
5405
 
5339
5406
  size: {
5340
- xs: { [vars$n.spinnerSize]: '15px' },
5341
- sm: { [vars$n.spinnerSize]: '20px' },
5342
- md: { [vars$n.spinnerSize]: '20px' },
5343
- lg: { [vars$n.spinnerSize]: '20px' },
5407
+ xs: { [vars$o.spinnerSize]: '15px' },
5408
+ sm: { [vars$o.spinnerSize]: '20px' },
5409
+ md: { [vars$o.spinnerSize]: '20px' },
5410
+ lg: { [vars$o.spinnerSize]: '20px' },
5344
5411
  },
5345
5412
 
5346
5413
  _hideCursor: {
5347
- [vars$n.digitCaretTextColor]: 'transparent',
5414
+ [vars$o.digitCaretTextColor]: 'transparent',
5348
5415
  },
5349
5416
 
5350
5417
  _loading: {
5351
- [vars$n.overlayOpacity]: refs.overlayOpacity,
5418
+ [vars$o.overlayOpacity]: refs.overlayOpacity,
5352
5419
  },
5353
5420
  };
5354
5421
 
5355
5422
  var passcode$1 = /*#__PURE__*/Object.freeze({
5356
5423
  __proto__: null,
5357
5424
  default: passcode,
5358
- vars: vars$n
5425
+ vars: vars$o
5359
5426
  });
5360
5427
 
5361
5428
  const componentName$t = getComponentName('loader-linear');
@@ -5424,48 +5491,48 @@ const LoaderLinearClass = compose(
5424
5491
  )(RawLoaderLinear);
5425
5492
 
5426
5493
  const globalRefs$f = getThemeRefs(globals);
5427
- const vars$m = LoaderLinearClass.cssVarList;
5494
+ const vars$n = LoaderLinearClass.cssVarList;
5428
5495
 
5429
5496
  const loaderLinear = {
5430
- [vars$m.hostDisplay]: 'inline-block',
5431
- [vars$m.hostWidth]: '100%',
5497
+ [vars$n.hostDisplay]: 'inline-block',
5498
+ [vars$n.hostWidth]: '100%',
5432
5499
 
5433
- [vars$m.barColor]: globalRefs$f.colors.surface.contrast,
5434
- [vars$m.barWidth]: '20%',
5500
+ [vars$n.barColor]: globalRefs$f.colors.surface.contrast,
5501
+ [vars$n.barWidth]: '20%',
5435
5502
 
5436
- [vars$m.barBackgroundColor]: globalRefs$f.colors.surface.light,
5437
- [vars$m.barBorderRadius]: '4px',
5503
+ [vars$n.barBackgroundColor]: globalRefs$f.colors.surface.light,
5504
+ [vars$n.barBorderRadius]: '4px',
5438
5505
 
5439
- [vars$m.animationDuration]: '2s',
5440
- [vars$m.animationTimingFunction]: 'linear',
5441
- [vars$m.animationIterationCount]: 'infinite',
5442
- [vars$m.verticalPadding]: '0.25em',
5506
+ [vars$n.animationDuration]: '2s',
5507
+ [vars$n.animationTimingFunction]: 'linear',
5508
+ [vars$n.animationIterationCount]: 'infinite',
5509
+ [vars$n.verticalPadding]: '0.25em',
5443
5510
 
5444
5511
  size: {
5445
- xs: { [vars$m.barHeight]: '2px' },
5446
- sm: { [vars$m.barHeight]: '4px' },
5447
- md: { [vars$m.barHeight]: '6px' },
5448
- lg: { [vars$m.barHeight]: '8px' },
5512
+ xs: { [vars$n.barHeight]: '2px' },
5513
+ sm: { [vars$n.barHeight]: '4px' },
5514
+ md: { [vars$n.barHeight]: '6px' },
5515
+ lg: { [vars$n.barHeight]: '8px' },
5449
5516
  },
5450
5517
 
5451
5518
  mode: {
5452
5519
  primary: {
5453
- [vars$m.barColor]: globalRefs$f.colors.primary.main,
5520
+ [vars$n.barColor]: globalRefs$f.colors.primary.main,
5454
5521
  },
5455
5522
  secondary: {
5456
- [vars$m.barColor]: globalRefs$f.colors.secondary.main,
5523
+ [vars$n.barColor]: globalRefs$f.colors.secondary.main,
5457
5524
  },
5458
5525
  },
5459
5526
 
5460
5527
  _hidden: {
5461
- [vars$m.hostDisplay]: 'none',
5528
+ [vars$n.hostDisplay]: 'none',
5462
5529
  },
5463
5530
  };
5464
5531
 
5465
5532
  var loaderLinear$1 = /*#__PURE__*/Object.freeze({
5466
5533
  __proto__: null,
5467
5534
  default: loaderLinear,
5468
- vars: vars$m
5535
+ vars: vars$n
5469
5536
  });
5470
5537
 
5471
5538
  const globalRefs$e = getThemeRefs(globals);
@@ -5512,7 +5579,7 @@ const loaderRadial = {
5512
5579
  [compVars$2.hostDisplay]: 'none',
5513
5580
  },
5514
5581
  };
5515
- const vars$l = {
5582
+ const vars$m = {
5516
5583
  ...compVars$2,
5517
5584
  ...helperVars,
5518
5585
  };
@@ -5520,7 +5587,7 @@ const vars$l = {
5520
5587
  var loaderRadial$1 = /*#__PURE__*/Object.freeze({
5521
5588
  __proto__: null,
5522
5589
  default: loaderRadial,
5523
- vars: vars$l
5590
+ vars: vars$m
5524
5591
  });
5525
5592
 
5526
5593
  const componentName$s = getComponentName('combo-box');
@@ -5912,58 +5979,58 @@ const ComboBoxClass = compose(
5912
5979
  );
5913
5980
 
5914
5981
  const globalRefs$d = getThemeRefs(globals);
5915
- const vars$k = ComboBoxClass.cssVarList;
5982
+ const vars$l = ComboBoxClass.cssVarList;
5916
5983
 
5917
5984
  const comboBox = {
5918
- [vars$k.hostWidth]: refs.width,
5919
- [vars$k.hostDirection]: refs.direction,
5920
- [vars$k.fontSize]: refs.fontSize,
5921
- [vars$k.fontFamily]: refs.fontFamily,
5922
- [vars$k.labelTextColor]: refs.labelTextColor,
5923
- [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
5924
- [vars$k.inputBorderColor]: refs.borderColor,
5925
- [vars$k.inputBorderWidth]: refs.borderWidth,
5926
- [vars$k.inputBorderStyle]: refs.borderStyle,
5927
- [vars$k.inputBorderRadius]: refs.borderRadius,
5928
- [vars$k.inputOutlineColor]: refs.outlineColor,
5929
- [vars$k.inputOutlineOffset]: refs.outlineOffset,
5930
- [vars$k.inputOutlineWidth]: refs.outlineWidth,
5931
- [vars$k.inputOutlineStyle]: refs.outlineStyle,
5932
- [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
5933
- [vars$k.inputValueTextColor]: refs.valueTextColor,
5934
- [vars$k.inputPlaceholderTextColor]: refs.placeholderTextColor,
5935
- [vars$k.inputBackgroundColor]: refs.backgroundColor,
5936
- [vars$k.inputHorizontalPadding]: refs.horizontalPadding,
5937
- [vars$k.inputHeight]: refs.inputHeight,
5938
- [vars$k.inputDropdownButtonColor]: globalRefs$d.colors.surface.dark,
5939
- [vars$k.inputDropdownButtonCursor]: 'pointer',
5940
- [vars$k.inputDropdownButtonSize]: refs.toggleButtonSize,
5941
- [vars$k.inputDropdownButtonOffset]: globalRefs$d.spacing.xs,
5942
- [vars$k.overlayItemPaddingInlineStart]: globalRefs$d.spacing.xs,
5943
- [vars$k.overlayItemPaddingInlineEnd]: globalRefs$d.spacing.lg,
5985
+ [vars$l.hostWidth]: refs.width,
5986
+ [vars$l.hostDirection]: refs.direction,
5987
+ [vars$l.fontSize]: refs.fontSize,
5988
+ [vars$l.fontFamily]: refs.fontFamily,
5989
+ [vars$l.labelTextColor]: refs.labelTextColor,
5990
+ [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
5991
+ [vars$l.inputBorderColor]: refs.borderColor,
5992
+ [vars$l.inputBorderWidth]: refs.borderWidth,
5993
+ [vars$l.inputBorderStyle]: refs.borderStyle,
5994
+ [vars$l.inputBorderRadius]: refs.borderRadius,
5995
+ [vars$l.inputOutlineColor]: refs.outlineColor,
5996
+ [vars$l.inputOutlineOffset]: refs.outlineOffset,
5997
+ [vars$l.inputOutlineWidth]: refs.outlineWidth,
5998
+ [vars$l.inputOutlineStyle]: refs.outlineStyle,
5999
+ [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
6000
+ [vars$l.inputValueTextColor]: refs.valueTextColor,
6001
+ [vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
6002
+ [vars$l.inputBackgroundColor]: refs.backgroundColor,
6003
+ [vars$l.inputHorizontalPadding]: refs.horizontalPadding,
6004
+ [vars$l.inputHeight]: refs.inputHeight,
6005
+ [vars$l.inputDropdownButtonColor]: globalRefs$d.colors.surface.dark,
6006
+ [vars$l.inputDropdownButtonCursor]: 'pointer',
6007
+ [vars$l.inputDropdownButtonSize]: refs.toggleButtonSize,
6008
+ [vars$l.inputDropdownButtonOffset]: globalRefs$d.spacing.xs,
6009
+ [vars$l.overlayItemPaddingInlineStart]: globalRefs$d.spacing.xs,
6010
+ [vars$l.overlayItemPaddingInlineEnd]: globalRefs$d.spacing.lg,
5944
6011
 
5945
6012
  _readonly: {
5946
- [vars$k.inputDropdownButtonCursor]: 'default',
6013
+ [vars$l.inputDropdownButtonCursor]: 'default',
5947
6014
  },
5948
6015
 
5949
6016
  // Overlay theme exposed via the component:
5950
- [vars$k.overlayFontSize]: refs.fontSize,
5951
- [vars$k.overlayFontFamily]: refs.fontFamily,
5952
- [vars$k.overlayCursor]: 'pointer',
5953
- [vars$k.overlayItemBoxShadow]: 'none',
5954
- [vars$k.overlayBackground]: refs.backgroundColor,
5955
- [vars$k.overlayTextColor]: refs.valueTextColor,
6017
+ [vars$l.overlayFontSize]: refs.fontSize,
6018
+ [vars$l.overlayFontFamily]: refs.fontFamily,
6019
+ [vars$l.overlayCursor]: 'pointer',
6020
+ [vars$l.overlayItemBoxShadow]: 'none',
6021
+ [vars$l.overlayBackground]: refs.backgroundColor,
6022
+ [vars$l.overlayTextColor]: refs.valueTextColor,
5956
6023
 
5957
6024
  // Overlay direct theme:
5958
- [vars$k.overlay.minHeight]: '400px',
5959
- [vars$k.overlay.margin]: '0',
6025
+ [vars$l.overlay.minHeight]: '400px',
6026
+ [vars$l.overlay.margin]: '0',
5960
6027
  };
5961
6028
 
5962
6029
  var comboBox$1 = /*#__PURE__*/Object.freeze({
5963
6030
  __proto__: null,
5964
6031
  comboBox: comboBox,
5965
6032
  default: comboBox,
5966
- vars: vars$k
6033
+ vars: vars$l
5967
6034
  });
5968
6035
 
5969
6036
  const observedAttributes$2 = ['src', 'alt'];
@@ -6010,14 +6077,14 @@ const ImageClass = compose(
6010
6077
  draggableMixin
6011
6078
  )(RawImage);
6012
6079
 
6013
- const vars$j = ImageClass.cssVarList;
6080
+ const vars$k = ImageClass.cssVarList;
6014
6081
 
6015
6082
  const image = {};
6016
6083
 
6017
6084
  var image$1 = /*#__PURE__*/Object.freeze({
6018
6085
  __proto__: null,
6019
6086
  default: image,
6020
- vars: vars$j
6087
+ vars: vars$k
6021
6088
  });
6022
6089
 
6023
6090
  var CountryCodes = [
@@ -7465,29 +7532,29 @@ const PhoneFieldClass = compose(
7465
7532
  })
7466
7533
  );
7467
7534
 
7468
- const vars$i = PhoneFieldClass.cssVarList;
7535
+ const vars$j = PhoneFieldClass.cssVarList;
7469
7536
 
7470
7537
  const phoneField = {
7471
- [vars$i.hostWidth]: refs.width,
7472
- [vars$i.hostDirection]: refs.direction,
7473
- [vars$i.fontSize]: refs.fontSize,
7474
- [vars$i.fontFamily]: refs.fontFamily,
7475
- [vars$i.labelTextColor]: refs.labelTextColor,
7476
- [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
7477
- [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
7478
- [vars$i.inputValueTextColor]: refs.valueTextColor,
7479
- [vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
7480
- [vars$i.inputBorderStyle]: refs.borderStyle,
7481
- [vars$i.inputBorderWidth]: refs.borderWidth,
7482
- [vars$i.inputBorderColor]: refs.borderColor,
7483
- [vars$i.inputBorderRadius]: refs.borderRadius,
7484
- [vars$i.inputOutlineStyle]: refs.outlineStyle,
7485
- [vars$i.inputOutlineWidth]: refs.outlineWidth,
7486
- [vars$i.inputOutlineColor]: refs.outlineColor,
7487
- [vars$i.inputOutlineOffset]: refs.outlineOffset,
7488
- [vars$i.phoneInputWidth]: refs.minWidth,
7489
- [vars$i.countryCodeInputWidth]: '5em',
7490
- [vars$i.countryCodeDropdownWidth]: '20em',
7538
+ [vars$j.hostWidth]: refs.width,
7539
+ [vars$j.hostDirection]: refs.direction,
7540
+ [vars$j.fontSize]: refs.fontSize,
7541
+ [vars$j.fontFamily]: refs.fontFamily,
7542
+ [vars$j.labelTextColor]: refs.labelTextColor,
7543
+ [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
7544
+ [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
7545
+ [vars$j.inputValueTextColor]: refs.valueTextColor,
7546
+ [vars$j.inputPlaceholderTextColor]: refs.placeholderTextColor,
7547
+ [vars$j.inputBorderStyle]: refs.borderStyle,
7548
+ [vars$j.inputBorderWidth]: refs.borderWidth,
7549
+ [vars$j.inputBorderColor]: refs.borderColor,
7550
+ [vars$j.inputBorderRadius]: refs.borderRadius,
7551
+ [vars$j.inputOutlineStyle]: refs.outlineStyle,
7552
+ [vars$j.inputOutlineWidth]: refs.outlineWidth,
7553
+ [vars$j.inputOutlineColor]: refs.outlineColor,
7554
+ [vars$j.inputOutlineOffset]: refs.outlineOffset,
7555
+ [vars$j.phoneInputWidth]: refs.minWidth,
7556
+ [vars$j.countryCodeInputWidth]: '5em',
7557
+ [vars$j.countryCodeDropdownWidth]: '20em',
7491
7558
 
7492
7559
  // '@overlay': {
7493
7560
  // overlayItemBackgroundColor: 'red'
@@ -7497,7 +7564,7 @@ const phoneField = {
7497
7564
  var phoneField$1 = /*#__PURE__*/Object.freeze({
7498
7565
  __proto__: null,
7499
7566
  default: phoneField,
7500
- vars: vars$i
7567
+ vars: vars$j
7501
7568
  });
7502
7569
 
7503
7570
  const componentName$o = getComponentName('phone-field-internal-input-box');
@@ -7665,36 +7732,36 @@ const PhoneFieldInputBoxClass = compose(
7665
7732
  })
7666
7733
  );
7667
7734
 
7668
- const vars$h = PhoneFieldInputBoxClass.cssVarList;
7735
+ const vars$i = PhoneFieldInputBoxClass.cssVarList;
7669
7736
 
7670
7737
  const phoneInputBoxField = {
7671
- [vars$h.hostWidth]: '16em',
7672
- [vars$h.hostMinWidth]: refs.minWidth,
7673
- [vars$h.hostDirection]: refs.direction,
7674
- [vars$h.fontSize]: refs.fontSize,
7675
- [vars$h.fontFamily]: refs.fontFamily,
7676
- [vars$h.labelTextColor]: refs.labelTextColor,
7677
- [vars$h.labelRequiredIndicator]: refs.requiredIndicator,
7678
- [vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
7679
- [vars$h.inputValueTextColor]: refs.valueTextColor,
7680
- [vars$h.inputPlaceholderTextColor]: refs.placeholderTextColor,
7681
- [vars$h.inputBorderStyle]: refs.borderStyle,
7682
- [vars$h.inputBorderWidth]: refs.borderWidth,
7683
- [vars$h.inputBorderColor]: refs.borderColor,
7684
- [vars$h.inputBorderRadius]: refs.borderRadius,
7685
- [vars$h.inputOutlineStyle]: refs.outlineStyle,
7686
- [vars$h.inputOutlineWidth]: refs.outlineWidth,
7687
- [vars$h.inputOutlineColor]: refs.outlineColor,
7688
- [vars$h.inputOutlineOffset]: refs.outlineOffset,
7738
+ [vars$i.hostWidth]: '16em',
7739
+ [vars$i.hostMinWidth]: refs.minWidth,
7740
+ [vars$i.hostDirection]: refs.direction,
7741
+ [vars$i.fontSize]: refs.fontSize,
7742
+ [vars$i.fontFamily]: refs.fontFamily,
7743
+ [vars$i.labelTextColor]: refs.labelTextColor,
7744
+ [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
7745
+ [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
7746
+ [vars$i.inputValueTextColor]: refs.valueTextColor,
7747
+ [vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
7748
+ [vars$i.inputBorderStyle]: refs.borderStyle,
7749
+ [vars$i.inputBorderWidth]: refs.borderWidth,
7750
+ [vars$i.inputBorderColor]: refs.borderColor,
7751
+ [vars$i.inputBorderRadius]: refs.borderRadius,
7752
+ [vars$i.inputOutlineStyle]: refs.outlineStyle,
7753
+ [vars$i.inputOutlineWidth]: refs.outlineWidth,
7754
+ [vars$i.inputOutlineColor]: refs.outlineColor,
7755
+ [vars$i.inputOutlineOffset]: refs.outlineOffset,
7689
7756
  _fullWidth: {
7690
- [vars$h.hostWidth]: refs.width,
7757
+ [vars$i.hostWidth]: refs.width,
7691
7758
  },
7692
7759
  };
7693
7760
 
7694
7761
  var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
7695
7762
  __proto__: null,
7696
7763
  default: phoneInputBoxField,
7697
- vars: vars$h
7764
+ vars: vars$i
7698
7765
  });
7699
7766
 
7700
7767
  const componentName$m = getComponentName('new-password-internal');
@@ -8076,31 +8143,31 @@ const NewPasswordClass = compose(
8076
8143
  );
8077
8144
 
8078
8145
  const globalRefs$c = getThemeRefs(globals);
8079
- const vars$g = NewPasswordClass.cssVarList;
8146
+ const vars$h = NewPasswordClass.cssVarList;
8080
8147
 
8081
8148
  const newPassword = {
8082
- [vars$g.hostWidth]: refs.width,
8083
- [vars$g.hostMinWidth]: refs.minWidth,
8084
- [vars$g.hostDirection]: refs.direction,
8085
- [vars$g.fontSize]: refs.fontSize,
8086
- [vars$g.fontFamily]: refs.fontFamily,
8087
- [vars$g.spaceBetweenInputs]: '1em',
8088
- [vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
8089
- [vars$g.policyPreviewBackgroundColor]: 'none',
8090
- [vars$g.policyPreviewPadding]: globalRefs$c.spacing.lg,
8149
+ [vars$h.hostWidth]: refs.width,
8150
+ [vars$h.hostMinWidth]: refs.minWidth,
8151
+ [vars$h.hostDirection]: refs.direction,
8152
+ [vars$h.fontSize]: refs.fontSize,
8153
+ [vars$h.fontFamily]: refs.fontFamily,
8154
+ [vars$h.spaceBetweenInputs]: '1em',
8155
+ [vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
8156
+ [vars$h.policyPreviewBackgroundColor]: 'none',
8157
+ [vars$h.policyPreviewPadding]: globalRefs$c.spacing.lg,
8091
8158
 
8092
8159
  _required: {
8093
8160
  // NewPassword doesn't pass `required` attribute to its Password components.
8094
8161
  // That's why we fake the required indicator on each input.
8095
8162
  // We do that by injecting `::after` element, and populating it with requiredIndicator content.
8096
- [vars$g.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
8163
+ [vars$h.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
8097
8164
  },
8098
8165
  };
8099
8166
 
8100
8167
  var newPassword$1 = /*#__PURE__*/Object.freeze({
8101
8168
  __proto__: null,
8102
8169
  default: newPassword,
8103
- vars: vars$g
8170
+ vars: vars$h
8104
8171
  });
8105
8172
 
8106
8173
  const getFileBase64 = (fileObj) => {
@@ -8302,7 +8369,7 @@ class RawUploadFile extends BaseInputClass {
8302
8369
  }
8303
8370
 
8304
8371
  const buttonVars = ButtonClass.cssVarList;
8305
- const { host: host$8, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
8372
+ const { host: host$8, wrapper, icon: icon$2, title, description, requiredIndicator: requiredIndicator$2 } = {
8306
8373
  host: { selector: () => ':host' },
8307
8374
  wrapper: { selector: () => ':host > div' },
8308
8375
  icon: { selector: () => '::slotted(*)' },
@@ -8337,7 +8404,7 @@ const UploadFileClass = compose(
8337
8404
  { ...title, property: 'color' },
8338
8405
  { ...description, property: 'color' },
8339
8406
  ],
8340
- iconSize: { ...icon, property: 'width' },
8407
+ iconSize: { ...icon$2, property: 'width' },
8341
8408
  requiredIndicator: { ...requiredIndicator$2, property: 'content' },
8342
8409
  },
8343
8410
  }),
@@ -8345,71 +8412,71 @@ const UploadFileClass = compose(
8345
8412
  componentNameValidationMixin
8346
8413
  )(RawUploadFile);
8347
8414
 
8348
- const vars$f = UploadFileClass.cssVarList;
8415
+ const vars$g = UploadFileClass.cssVarList;
8349
8416
 
8350
8417
  const uploadFile = {
8351
- [vars$f.hostDirection]: refs.direction,
8352
- [vars$f.labelTextColor]: refs.labelTextColor,
8353
- [vars$f.fontFamily]: refs.fontFamily,
8418
+ [vars$g.hostDirection]: refs.direction,
8419
+ [vars$g.labelTextColor]: refs.labelTextColor,
8420
+ [vars$g.fontFamily]: refs.fontFamily,
8354
8421
 
8355
- [vars$f.iconSize]: '2em',
8422
+ [vars$g.iconSize]: '2em',
8356
8423
 
8357
- [vars$f.hostPadding]: '0.75em',
8358
- [vars$f.gap]: '0.5em',
8424
+ [vars$g.hostPadding]: '0.75em',
8425
+ [vars$g.gap]: '0.5em',
8359
8426
 
8360
- [vars$f.fontSize]: '16px',
8361
- [vars$f.titleFontWeight]: '500',
8362
- [vars$f.lineHeight]: '1em',
8427
+ [vars$g.fontSize]: '16px',
8428
+ [vars$g.titleFontWeight]: '500',
8429
+ [vars$g.lineHeight]: '1em',
8363
8430
 
8364
- [vars$f.borderWidth]: refs.borderWidth,
8365
- [vars$f.borderColor]: refs.borderColor,
8366
- [vars$f.borderRadius]: refs.borderRadius,
8367
- [vars$f.borderStyle]: 'dashed',
8431
+ [vars$g.borderWidth]: refs.borderWidth,
8432
+ [vars$g.borderColor]: refs.borderColor,
8433
+ [vars$g.borderRadius]: refs.borderRadius,
8434
+ [vars$g.borderStyle]: 'dashed',
8368
8435
 
8369
8436
  _required: {
8370
- [vars$f.requiredIndicator]: refs.requiredIndicator,
8437
+ [vars$g.requiredIndicator]: refs.requiredIndicator,
8371
8438
  },
8372
8439
 
8373
8440
  size: {
8374
8441
  xs: {
8375
- [vars$f.hostHeight]: '196px',
8376
- [vars$f.hostWidth]: '200px',
8377
- [vars$f.titleFontSize]: '0.875em',
8378
- [vars$f.descriptionFontSize]: '0.875em',
8379
- [vars$f.lineHeight]: '1.25em',
8442
+ [vars$g.hostHeight]: '196px',
8443
+ [vars$g.hostWidth]: '200px',
8444
+ [vars$g.titleFontSize]: '0.875em',
8445
+ [vars$g.descriptionFontSize]: '0.875em',
8446
+ [vars$g.lineHeight]: '1.25em',
8380
8447
  },
8381
8448
  sm: {
8382
- [vars$f.hostHeight]: '216px',
8383
- [vars$f.hostWidth]: '230px',
8384
- [vars$f.titleFontSize]: '1em',
8385
- [vars$f.descriptionFontSize]: '0.875em',
8386
- [vars$f.lineHeight]: '1.25em',
8449
+ [vars$g.hostHeight]: '216px',
8450
+ [vars$g.hostWidth]: '230px',
8451
+ [vars$g.titleFontSize]: '1em',
8452
+ [vars$g.descriptionFontSize]: '0.875em',
8453
+ [vars$g.lineHeight]: '1.25em',
8387
8454
  },
8388
8455
  md: {
8389
- [vars$f.hostHeight]: '256px',
8390
- [vars$f.hostWidth]: '312px',
8391
- [vars$f.titleFontSize]: '1.125em',
8392
- [vars$f.descriptionFontSize]: '1em',
8393
- [vars$f.lineHeight]: '1.5em',
8456
+ [vars$g.hostHeight]: '256px',
8457
+ [vars$g.hostWidth]: '312px',
8458
+ [vars$g.titleFontSize]: '1.125em',
8459
+ [vars$g.descriptionFontSize]: '1em',
8460
+ [vars$g.lineHeight]: '1.5em',
8394
8461
  },
8395
8462
  lg: {
8396
- [vars$f.hostHeight]: '280px',
8397
- [vars$f.hostWidth]: '336px',
8398
- [vars$f.titleFontSize]: '1.125em',
8399
- [vars$f.descriptionFontSize]: '1.125em',
8400
- [vars$f.lineHeight]: '1.75em',
8463
+ [vars$g.hostHeight]: '280px',
8464
+ [vars$g.hostWidth]: '336px',
8465
+ [vars$g.titleFontSize]: '1.125em',
8466
+ [vars$g.descriptionFontSize]: '1.125em',
8467
+ [vars$g.lineHeight]: '1.75em',
8401
8468
  },
8402
8469
  },
8403
8470
 
8404
8471
  _fullWidth: {
8405
- [vars$f.hostWidth]: refs.width,
8472
+ [vars$g.hostWidth]: refs.width,
8406
8473
  },
8407
8474
  };
8408
8475
 
8409
8476
  var uploadFile$1 = /*#__PURE__*/Object.freeze({
8410
8477
  __proto__: null,
8411
8478
  default: uploadFile,
8412
- vars: vars$f
8479
+ vars: vars$g
8413
8480
  });
8414
8481
 
8415
8482
  const componentName$i = getComponentName('button-selection-group-item');
@@ -8524,37 +8591,37 @@ const ButtonSelectionGroupItemClass = compose(
8524
8591
 
8525
8592
  const globalRefs$b = getThemeRefs(globals);
8526
8593
 
8527
- const vars$e = ButtonSelectionGroupItemClass.cssVarList;
8594
+ const vars$f = ButtonSelectionGroupItemClass.cssVarList;
8528
8595
 
8529
8596
  const buttonSelectionGroupItem = {
8530
- [vars$e.hostDirection]: 'inherit',
8531
- [vars$e.backgroundColor]: globalRefs$b.colors.surface.main,
8532
- [vars$e.labelTextColor]: globalRefs$b.colors.surface.contrast,
8533
- [vars$e.borderColor]: globalRefs$b.colors.surface.light,
8534
- [vars$e.borderStyle]: 'solid',
8535
- [vars$e.borderRadius]: globalRefs$b.radius.sm,
8536
- [vars$e.outlineColor]: 'transparent',
8537
- [vars$e.borderWidth]: globalRefs$b.border.xs,
8597
+ [vars$f.hostDirection]: 'inherit',
8598
+ [vars$f.backgroundColor]: globalRefs$b.colors.surface.main,
8599
+ [vars$f.labelTextColor]: globalRefs$b.colors.surface.contrast,
8600
+ [vars$f.borderColor]: globalRefs$b.colors.surface.light,
8601
+ [vars$f.borderStyle]: 'solid',
8602
+ [vars$f.borderRadius]: globalRefs$b.radius.sm,
8603
+ [vars$f.outlineColor]: 'transparent',
8604
+ [vars$f.borderWidth]: globalRefs$b.border.xs,
8538
8605
 
8539
8606
  _hover: {
8540
- [vars$e.backgroundColor]: globalRefs$b.colors.surface.highlight,
8607
+ [vars$f.backgroundColor]: globalRefs$b.colors.surface.highlight,
8541
8608
  },
8542
8609
 
8543
8610
  _focused: {
8544
- [vars$e.outlineColor]: globalRefs$b.colors.surface.light,
8611
+ [vars$f.outlineColor]: globalRefs$b.colors.surface.light,
8545
8612
  },
8546
8613
 
8547
8614
  _selected: {
8548
- [vars$e.borderColor]: globalRefs$b.colors.surface.contrast,
8549
- [vars$e.backgroundColor]: globalRefs$b.colors.surface.contrast,
8550
- [vars$e.labelTextColor]: globalRefs$b.colors.surface.main,
8615
+ [vars$f.borderColor]: globalRefs$b.colors.surface.contrast,
8616
+ [vars$f.backgroundColor]: globalRefs$b.colors.surface.contrast,
8617
+ [vars$f.labelTextColor]: globalRefs$b.colors.surface.main,
8551
8618
  },
8552
8619
  };
8553
8620
 
8554
8621
  var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
8555
8622
  __proto__: null,
8556
8623
  default: buttonSelectionGroupItem,
8557
- vars: vars$e
8624
+ vars: vars$f
8558
8625
  });
8559
8626
 
8560
8627
  const createBaseButtonSelectionGroupInternalClass = (componentName) => {
@@ -8950,16 +9017,16 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
8950
9017
  [vars.hostWidth]: refs.width,
8951
9018
  });
8952
9019
 
8953
- const vars$d = ButtonSelectionGroupClass.cssVarList;
9020
+ const vars$e = ButtonSelectionGroupClass.cssVarList;
8954
9021
 
8955
9022
  const buttonSelectionGroup = {
8956
- ...createBaseButtonSelectionGroupMappings(vars$d),
9023
+ ...createBaseButtonSelectionGroupMappings(vars$e),
8957
9024
  };
8958
9025
 
8959
9026
  var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
8960
9027
  __proto__: null,
8961
9028
  default: buttonSelectionGroup,
8962
- vars: vars$d
9029
+ vars: vars$e
8963
9030
  });
8964
9031
 
8965
9032
  const componentName$f = getComponentName('button-multi-selection-group-internal');
@@ -9118,16 +9185,16 @@ const ButtonMultiSelectionGroupClass = compose(
9118
9185
  })
9119
9186
  );
9120
9187
 
9121
- const vars$c = ButtonMultiSelectionGroupClass.cssVarList;
9188
+ const vars$d = ButtonMultiSelectionGroupClass.cssVarList;
9122
9189
 
9123
9190
  const buttonMultiSelectionGroup = {
9124
- ...createBaseButtonSelectionGroupMappings(vars$c),
9191
+ ...createBaseButtonSelectionGroupMappings(vars$d),
9125
9192
  };
9126
9193
 
9127
9194
  var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
9128
9195
  __proto__: null,
9129
9196
  default: buttonMultiSelectionGroup,
9130
- vars: vars$c
9197
+ vars: vars$d
9131
9198
  });
9132
9199
 
9133
9200
  const componentName$d = getComponentName('modal');
@@ -9243,14 +9310,14 @@ const modal = {
9243
9310
  [compVars$1.overlayWidth]: '540px',
9244
9311
  };
9245
9312
 
9246
- const vars$b = {
9313
+ const vars$c = {
9247
9314
  ...compVars$1,
9248
9315
  };
9249
9316
 
9250
9317
  var modal$1 = /*#__PURE__*/Object.freeze({
9251
9318
  __proto__: null,
9252
9319
  default: modal,
9253
- vars: vars$b
9320
+ vars: vars$c
9254
9321
  });
9255
9322
 
9256
9323
  const isValidDataType = (data) => {
@@ -9504,35 +9571,35 @@ const GridClass = compose(
9504
9571
  );
9505
9572
 
9506
9573
  const globalRefs$8 = getThemeRefs(globals);
9507
- const vars$a = GridClass.cssVarList;
9574
+ const vars$b = GridClass.cssVarList;
9508
9575
 
9509
9576
  const grid = {
9510
- [vars$a.hostWidth]: '100%',
9511
- [vars$a.hostHeight]: '100%',
9512
- [vars$a.hostMinHeight]: '400px',
9513
- [vars$a.fontWeight]: '400',
9514
- [vars$a.backgroundColor]: globalRefs$8.colors.surface.main,
9577
+ [vars$b.hostWidth]: '100%',
9578
+ [vars$b.hostHeight]: '100%',
9579
+ [vars$b.hostMinHeight]: '400px',
9580
+ [vars$b.fontWeight]: '400',
9581
+ [vars$b.backgroundColor]: globalRefs$8.colors.surface.main,
9515
9582
 
9516
- [vars$a.fontSize]: refs.fontSize,
9517
- [vars$a.fontFamily]: refs.fontFamily,
9583
+ [vars$b.fontSize]: refs.fontSize,
9584
+ [vars$b.fontFamily]: refs.fontFamily,
9518
9585
 
9519
- [vars$a.sortIndicatorsColor]: globalRefs$8.colors.surface.light,
9520
- [vars$a.activeSortIndicator]: globalRefs$8.colors.surface.dark,
9521
- [vars$a.resizeHandleColor]: globalRefs$8.colors.surface.light,
9586
+ [vars$b.sortIndicatorsColor]: globalRefs$8.colors.surface.light,
9587
+ [vars$b.activeSortIndicator]: globalRefs$8.colors.surface.dark,
9588
+ [vars$b.resizeHandleColor]: globalRefs$8.colors.surface.light,
9522
9589
 
9523
- [vars$a.borderWidth]: refs.borderWidth,
9524
- [vars$a.borderStyle]: refs.borderStyle,
9525
- [vars$a.borderRadius]: refs.borderRadius,
9526
- [vars$a.borderColor]: 'transparent',
9590
+ [vars$b.borderWidth]: refs.borderWidth,
9591
+ [vars$b.borderStyle]: refs.borderStyle,
9592
+ [vars$b.borderRadius]: refs.borderRadius,
9593
+ [vars$b.borderColor]: 'transparent',
9527
9594
 
9528
- [vars$a.headerRowTextColor]: globalRefs$8.colors.surface.dark,
9529
- [vars$a.separatorColor]: globalRefs$8.colors.surface.light,
9595
+ [vars$b.headerRowTextColor]: globalRefs$8.colors.surface.dark,
9596
+ [vars$b.separatorColor]: globalRefs$8.colors.surface.light,
9530
9597
 
9531
- [vars$a.valueTextColor]: globalRefs$8.colors.surface.contrast,
9532
- [vars$a.selectedBackgroundColor]: globalRefs$8.colors.surface.highlight,
9598
+ [vars$b.valueTextColor]: globalRefs$8.colors.surface.contrast,
9599
+ [vars$b.selectedBackgroundColor]: globalRefs$8.colors.surface.highlight,
9533
9600
 
9534
9601
  _bordered: {
9535
- [vars$a.borderColor]: refs.borderColor,
9602
+ [vars$b.borderColor]: refs.borderColor,
9536
9603
  },
9537
9604
  };
9538
9605
 
@@ -9540,7 +9607,7 @@ var grid$1 = /*#__PURE__*/Object.freeze({
9540
9607
  __proto__: null,
9541
9608
  default: grid,
9542
9609
  grid: grid,
9543
- vars: vars$a
9610
+ vars: vars$b
9544
9611
  });
9545
9612
 
9546
9613
  const componentName$b = getComponentName('notification-card');
@@ -9656,49 +9723,49 @@ const NotificationCardClass = compose(
9656
9723
  );
9657
9724
 
9658
9725
  const globalRefs$7 = getThemeRefs(globals);
9659
- const vars$9 = NotificationCardClass.cssVarList;
9726
+ const vars$a = NotificationCardClass.cssVarList;
9660
9727
 
9661
9728
  const shadowColor = '#00000020';
9662
9729
 
9663
9730
  const notification = {
9664
- [vars$9.hostMinWidth]: '415px',
9665
- [vars$9.fontFamily]: globalRefs$7.fonts.font1.family,
9666
- [vars$9.fontSize]: globalRefs$7.typography.body1.size,
9667
- [vars$9.backgroundColor]: globalRefs$7.colors.surface.main,
9668
- [vars$9.textColor]: globalRefs$7.colors.surface.contrast,
9669
- [vars$9.boxShadow]: `${globalRefs$7.shadow.wide.xl} ${shadowColor}, ${globalRefs$7.shadow.narrow.xl} ${shadowColor}`,
9670
- [vars$9.verticalPadding]: '0.625em',
9671
- [vars$9.horizontalPadding]: '1.5em',
9672
- [vars$9.borderRadius]: globalRefs$7.radius.xs,
9731
+ [vars$a.hostMinWidth]: '415px',
9732
+ [vars$a.fontFamily]: globalRefs$7.fonts.font1.family,
9733
+ [vars$a.fontSize]: globalRefs$7.typography.body1.size,
9734
+ [vars$a.backgroundColor]: globalRefs$7.colors.surface.main,
9735
+ [vars$a.textColor]: globalRefs$7.colors.surface.contrast,
9736
+ [vars$a.boxShadow]: `${globalRefs$7.shadow.wide.xl} ${shadowColor}, ${globalRefs$7.shadow.narrow.xl} ${shadowColor}`,
9737
+ [vars$a.verticalPadding]: '0.625em',
9738
+ [vars$a.horizontalPadding]: '1.5em',
9739
+ [vars$a.borderRadius]: globalRefs$7.radius.xs,
9673
9740
 
9674
9741
  _bordered: {
9675
- [vars$9.borderWidth]: globalRefs$7.border.sm,
9676
- [vars$9.borderStyle]: 'solid',
9677
- [vars$9.borderColor]: 'transparent',
9742
+ [vars$a.borderWidth]: globalRefs$7.border.sm,
9743
+ [vars$a.borderStyle]: 'solid',
9744
+ [vars$a.borderColor]: 'transparent',
9678
9745
  },
9679
9746
 
9680
9747
  size: {
9681
- xs: { [vars$9.fontSize]: '12px' },
9682
- sm: { [vars$9.fontSize]: '14px' },
9683
- md: { [vars$9.fontSize]: '16px' },
9684
- lg: { [vars$9.fontSize]: '18px' },
9748
+ xs: { [vars$a.fontSize]: '12px' },
9749
+ sm: { [vars$a.fontSize]: '14px' },
9750
+ md: { [vars$a.fontSize]: '16px' },
9751
+ lg: { [vars$a.fontSize]: '18px' },
9685
9752
  },
9686
9753
 
9687
9754
  mode: {
9688
9755
  primary: {
9689
- [vars$9.backgroundColor]: globalRefs$7.colors.primary.main,
9690
- [vars$9.textColor]: globalRefs$7.colors.primary.contrast,
9691
- [vars$9.borderColor]: globalRefs$7.colors.primary.light,
9756
+ [vars$a.backgroundColor]: globalRefs$7.colors.primary.main,
9757
+ [vars$a.textColor]: globalRefs$7.colors.primary.contrast,
9758
+ [vars$a.borderColor]: globalRefs$7.colors.primary.light,
9692
9759
  },
9693
9760
  success: {
9694
- [vars$9.backgroundColor]: globalRefs$7.colors.success.main,
9695
- [vars$9.textColor]: globalRefs$7.colors.success.contrast,
9696
- [vars$9.borderColor]: globalRefs$7.colors.success.light,
9761
+ [vars$a.backgroundColor]: globalRefs$7.colors.success.main,
9762
+ [vars$a.textColor]: globalRefs$7.colors.success.contrast,
9763
+ [vars$a.borderColor]: globalRefs$7.colors.success.light,
9697
9764
  },
9698
9765
  error: {
9699
- [vars$9.backgroundColor]: globalRefs$7.colors.error.main,
9700
- [vars$9.textColor]: globalRefs$7.colors.error.contrast,
9701
- [vars$9.borderColor]: globalRefs$7.colors.error.light,
9766
+ [vars$a.backgroundColor]: globalRefs$7.colors.error.main,
9767
+ [vars$a.textColor]: globalRefs$7.colors.error.contrast,
9768
+ [vars$a.borderColor]: globalRefs$7.colors.error.light,
9702
9769
  },
9703
9770
  },
9704
9771
  };
@@ -9706,7 +9773,7 @@ const notification = {
9706
9773
  var notificationCard = /*#__PURE__*/Object.freeze({
9707
9774
  __proto__: null,
9708
9775
  default: notification,
9709
- vars: vars$9
9776
+ vars: vars$a
9710
9777
  });
9711
9778
 
9712
9779
  const componentName$a = getComponentName('multi-select-combo-box');
@@ -10319,62 +10386,62 @@ const MultiSelectComboBoxClass = compose(
10319
10386
  );
10320
10387
 
10321
10388
  const globalRefs$6 = getThemeRefs(globals);
10322
- const vars$8 = MultiSelectComboBoxClass.cssVarList;
10389
+ const vars$9 = MultiSelectComboBoxClass.cssVarList;
10323
10390
 
10324
10391
  const multiSelectComboBox = {
10325
- [vars$8.hostWidth]: refs.width,
10326
- [vars$8.hostDirection]: refs.direction,
10327
- [vars$8.fontSize]: refs.fontSize,
10328
- [vars$8.fontFamily]: refs.fontFamily,
10329
- [vars$8.labelTextColor]: refs.labelTextColor,
10330
- [vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
10331
- [vars$8.inputBorderColor]: refs.borderColor,
10332
- [vars$8.inputBorderWidth]: refs.borderWidth,
10333
- [vars$8.inputBorderStyle]: refs.borderStyle,
10334
- [vars$8.inputBorderRadius]: refs.borderRadius,
10335
- [vars$8.inputOutlineColor]: refs.outlineColor,
10336
- [vars$8.inputOutlineOffset]: refs.outlineOffset,
10337
- [vars$8.inputOutlineWidth]: refs.outlineWidth,
10338
- [vars$8.inputOutlineStyle]: refs.outlineStyle,
10339
- [vars$8.labelRequiredIndicator]: refs.requiredIndicator,
10340
- [vars$8.inputValueTextColor]: refs.valueTextColor,
10341
- [vars$8.inputPlaceholderTextColor]: refs.placeholderTextColor,
10342
- [vars$8.inputBackgroundColor]: refs.backgroundColor,
10343
- [vars$8.inputHorizontalPadding]: refs.horizontalPadding,
10344
- [vars$8.inputVerticalPadding]: refs.verticalPadding,
10345
- [vars$8.inputHeight]: refs.inputHeight,
10346
- [vars$8.inputDropdownButtonColor]: globalRefs$6.colors.surface.dark,
10347
- [vars$8.inputDropdownButtonCursor]: 'pointer',
10348
- [vars$8.inputDropdownButtonSize]: refs.toggleButtonSize,
10349
- [vars$8.inputDropdownButtonOffset]: globalRefs$6.spacing.xs,
10350
- [vars$8.overlayItemPaddingInlineStart]: globalRefs$6.spacing.xs,
10351
- [vars$8.overlayItemPaddingInlineEnd]: globalRefs$6.spacing.lg,
10352
- [vars$8.chipFontSize]: refs.chipFontSize,
10353
- [vars$8.chipTextColor]: globalRefs$6.colors.surface.contrast,
10354
- [vars$8.chipBackgroundColor]: globalRefs$6.colors.surface.light,
10392
+ [vars$9.hostWidth]: refs.width,
10393
+ [vars$9.hostDirection]: refs.direction,
10394
+ [vars$9.fontSize]: refs.fontSize,
10395
+ [vars$9.fontFamily]: refs.fontFamily,
10396
+ [vars$9.labelTextColor]: refs.labelTextColor,
10397
+ [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
10398
+ [vars$9.inputBorderColor]: refs.borderColor,
10399
+ [vars$9.inputBorderWidth]: refs.borderWidth,
10400
+ [vars$9.inputBorderStyle]: refs.borderStyle,
10401
+ [vars$9.inputBorderRadius]: refs.borderRadius,
10402
+ [vars$9.inputOutlineColor]: refs.outlineColor,
10403
+ [vars$9.inputOutlineOffset]: refs.outlineOffset,
10404
+ [vars$9.inputOutlineWidth]: refs.outlineWidth,
10405
+ [vars$9.inputOutlineStyle]: refs.outlineStyle,
10406
+ [vars$9.labelRequiredIndicator]: refs.requiredIndicator,
10407
+ [vars$9.inputValueTextColor]: refs.valueTextColor,
10408
+ [vars$9.inputPlaceholderTextColor]: refs.placeholderTextColor,
10409
+ [vars$9.inputBackgroundColor]: refs.backgroundColor,
10410
+ [vars$9.inputHorizontalPadding]: refs.horizontalPadding,
10411
+ [vars$9.inputVerticalPadding]: refs.verticalPadding,
10412
+ [vars$9.inputHeight]: refs.inputHeight,
10413
+ [vars$9.inputDropdownButtonColor]: globalRefs$6.colors.surface.dark,
10414
+ [vars$9.inputDropdownButtonCursor]: 'pointer',
10415
+ [vars$9.inputDropdownButtonSize]: refs.toggleButtonSize,
10416
+ [vars$9.inputDropdownButtonOffset]: globalRefs$6.spacing.xs,
10417
+ [vars$9.overlayItemPaddingInlineStart]: globalRefs$6.spacing.xs,
10418
+ [vars$9.overlayItemPaddingInlineEnd]: globalRefs$6.spacing.lg,
10419
+ [vars$9.chipFontSize]: refs.chipFontSize,
10420
+ [vars$9.chipTextColor]: globalRefs$6.colors.surface.contrast,
10421
+ [vars$9.chipBackgroundColor]: globalRefs$6.colors.surface.light,
10355
10422
 
10356
10423
  _readonly: {
10357
- [vars$8.inputDropdownButtonCursor]: 'default',
10424
+ [vars$9.inputDropdownButtonCursor]: 'default',
10358
10425
  },
10359
10426
 
10360
10427
  // Overlay theme exposed via the component:
10361
- [vars$8.overlayFontSize]: refs.fontSize,
10362
- [vars$8.overlayFontFamily]: refs.fontFamily,
10363
- [vars$8.overlayCursor]: 'pointer',
10364
- [vars$8.overlayItemBoxShadow]: 'none',
10365
- [vars$8.overlayBackground]: refs.backgroundColor,
10366
- [vars$8.overlayTextColor]: refs.valueTextColor,
10428
+ [vars$9.overlayFontSize]: refs.fontSize,
10429
+ [vars$9.overlayFontFamily]: refs.fontFamily,
10430
+ [vars$9.overlayCursor]: 'pointer',
10431
+ [vars$9.overlayItemBoxShadow]: 'none',
10432
+ [vars$9.overlayBackground]: refs.backgroundColor,
10433
+ [vars$9.overlayTextColor]: refs.valueTextColor,
10367
10434
 
10368
10435
  // Overlay direct theme:
10369
- [vars$8.overlay.minHeight]: '400px',
10370
- [vars$8.overlay.margin]: '0',
10436
+ [vars$9.overlay.minHeight]: '400px',
10437
+ [vars$9.overlay.margin]: '0',
10371
10438
  };
10372
10439
 
10373
10440
  var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
10374
10441
  __proto__: null,
10375
10442
  default: multiSelectComboBox,
10376
10443
  multiSelectComboBox: multiSelectComboBox,
10377
- vars: vars$8
10444
+ vars: vars$9
10378
10445
  });
10379
10446
 
10380
10447
  const componentName$9 = getComponentName('badge');
@@ -10431,65 +10498,65 @@ const BadgeClass = compose(
10431
10498
  )(RawBadge);
10432
10499
 
10433
10500
  const globalRefs$5 = getThemeRefs(globals);
10434
- const vars$7 = BadgeClass.cssVarList;
10501
+ const vars$8 = BadgeClass.cssVarList;
10435
10502
 
10436
10503
  const badge$2 = {
10437
- [vars$7.hostWidth]: 'fit-content',
10438
- [vars$7.hostDirection]: globalRefs$5.direction,
10504
+ [vars$8.hostWidth]: 'fit-content',
10505
+ [vars$8.hostDirection]: globalRefs$5.direction,
10439
10506
 
10440
- [vars$7.textAlign]: 'center',
10507
+ [vars$8.textAlign]: 'center',
10441
10508
 
10442
- [vars$7.fontFamily]: globalRefs$5.fonts.font1.family,
10443
- [vars$7.fontWeight]: '400',
10509
+ [vars$8.fontFamily]: globalRefs$5.fonts.font1.family,
10510
+ [vars$8.fontWeight]: '400',
10444
10511
 
10445
- [vars$7.verticalPadding]: '0.25em',
10446
- [vars$7.horizontalPadding]: '0.5em',
10512
+ [vars$8.verticalPadding]: '0.25em',
10513
+ [vars$8.horizontalPadding]: '0.5em',
10447
10514
 
10448
- [vars$7.borderWidth]: globalRefs$5.border.xs,
10449
- [vars$7.borderRadius]: globalRefs$5.radius.xs,
10450
- [vars$7.borderColor]: 'transparent',
10451
- [vars$7.borderStyle]: 'solid',
10515
+ [vars$8.borderWidth]: globalRefs$5.border.xs,
10516
+ [vars$8.borderRadius]: globalRefs$5.radius.xs,
10517
+ [vars$8.borderColor]: 'transparent',
10518
+ [vars$8.borderStyle]: 'solid',
10452
10519
 
10453
10520
  _fullWidth: {
10454
- [vars$7.hostWidth]: '100%',
10521
+ [vars$8.hostWidth]: '100%',
10455
10522
  },
10456
10523
 
10457
10524
  size: {
10458
- xs: { [vars$7.fontSize]: '12px' },
10459
- sm: { [vars$7.fontSize]: '14px' },
10460
- md: { [vars$7.fontSize]: '16px' },
10461
- lg: { [vars$7.fontSize]: '18px' },
10525
+ xs: { [vars$8.fontSize]: '12px' },
10526
+ sm: { [vars$8.fontSize]: '14px' },
10527
+ md: { [vars$8.fontSize]: '16px' },
10528
+ lg: { [vars$8.fontSize]: '18px' },
10462
10529
  },
10463
10530
 
10464
10531
  mode: {
10465
10532
  default: {
10466
- [vars$7.textColor]: globalRefs$5.colors.surface.dark,
10533
+ [vars$8.textColor]: globalRefs$5.colors.surface.dark,
10467
10534
  _bordered: {
10468
- [vars$7.borderColor]: globalRefs$5.colors.surface.light,
10535
+ [vars$8.borderColor]: globalRefs$5.colors.surface.light,
10469
10536
  },
10470
10537
  },
10471
10538
  primary: {
10472
- [vars$7.textColor]: globalRefs$5.colors.primary.main,
10539
+ [vars$8.textColor]: globalRefs$5.colors.primary.main,
10473
10540
  _bordered: {
10474
- [vars$7.borderColor]: globalRefs$5.colors.primary.light,
10541
+ [vars$8.borderColor]: globalRefs$5.colors.primary.light,
10475
10542
  },
10476
10543
  },
10477
10544
  secondary: {
10478
- [vars$7.textColor]: globalRefs$5.colors.secondary.main,
10545
+ [vars$8.textColor]: globalRefs$5.colors.secondary.main,
10479
10546
  _bordered: {
10480
- [vars$7.borderColor]: globalRefs$5.colors.secondary.light,
10547
+ [vars$8.borderColor]: globalRefs$5.colors.secondary.light,
10481
10548
  },
10482
10549
  },
10483
10550
  error: {
10484
- [vars$7.textColor]: globalRefs$5.colors.error.main,
10551
+ [vars$8.textColor]: globalRefs$5.colors.error.main,
10485
10552
  _bordered: {
10486
- [vars$7.borderColor]: globalRefs$5.colors.error.light,
10553
+ [vars$8.borderColor]: globalRefs$5.colors.error.light,
10487
10554
  },
10488
10555
  },
10489
10556
  success: {
10490
- [vars$7.textColor]: globalRefs$5.colors.success.main,
10557
+ [vars$8.textColor]: globalRefs$5.colors.success.main,
10491
10558
  _bordered: {
10492
- [vars$7.borderColor]: globalRefs$5.colors.success.light,
10559
+ [vars$8.borderColor]: globalRefs$5.colors.success.light,
10493
10560
  },
10494
10561
  },
10495
10562
  },
@@ -10498,7 +10565,7 @@ const badge$2 = {
10498
10565
  var badge$3 = /*#__PURE__*/Object.freeze({
10499
10566
  __proto__: null,
10500
10567
  default: badge$2,
10501
- vars: vars$7
10568
+ vars: vars$8
10502
10569
  });
10503
10570
 
10504
10571
  const componentName$8 = getComponentName('avatar');
@@ -10636,14 +10703,14 @@ const avatar = {
10636
10703
  },
10637
10704
  };
10638
10705
 
10639
- const vars$6 = {
10706
+ const vars$7 = {
10640
10707
  ...compVars,
10641
10708
  };
10642
10709
 
10643
10710
  var avatar$1 = /*#__PURE__*/Object.freeze({
10644
10711
  __proto__: null,
10645
10712
  default: avatar,
10646
- vars: vars$6
10713
+ vars: vars$7
10647
10714
  });
10648
10715
 
10649
10716
  const componentName$7 = getComponentName('mappings-field-internal');
@@ -10821,32 +10888,32 @@ const MappingsFieldClass = compose(
10821
10888
 
10822
10889
  const globalRefs$3 = getThemeRefs(globals);
10823
10890
 
10824
- const vars$5 = MappingsFieldClass.cssVarList;
10891
+ const vars$6 = MappingsFieldClass.cssVarList;
10825
10892
 
10826
10893
  const mappingsField = {
10827
- [vars$5.hostWidth]: refs.width,
10828
- [vars$5.hostDirection]: refs.direction,
10829
- [vars$5.fontSize]: refs.fontSize,
10830
- [vars$5.fontFamily]: refs.fontFamily,
10831
- [vars$5.separatorFontSize]: '14px',
10832
- [vars$5.labelsFontSize]: '14px',
10833
- [vars$5.labelsLineHeight]: '1',
10834
- [vars$5.labelsMarginBottom]: '6px',
10835
- [vars$5.labelTextColor]: refs.labelTextColor,
10836
- [vars$5.itemMarginBottom]: '1em',
10894
+ [vars$6.hostWidth]: refs.width,
10895
+ [vars$6.hostDirection]: refs.direction,
10896
+ [vars$6.fontSize]: refs.fontSize,
10897
+ [vars$6.fontFamily]: refs.fontFamily,
10898
+ [vars$6.separatorFontSize]: '14px',
10899
+ [vars$6.labelsFontSize]: '14px',
10900
+ [vars$6.labelsLineHeight]: '1',
10901
+ [vars$6.labelsMarginBottom]: '6px',
10902
+ [vars$6.labelTextColor]: refs.labelTextColor,
10903
+ [vars$6.itemMarginBottom]: '1em',
10837
10904
  // To be positioned correctly, the min width has to match the text field min width
10838
- [vars$5.valueLabelMinWidth]: refs.minWidth,
10905
+ [vars$6.valueLabelMinWidth]: refs.minWidth,
10839
10906
  // To be positioned correctly, the min width has to match the combo box field min width
10840
- [vars$5.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$3.border.xs})`,
10841
- [vars$5.separatorWidth]: '70px',
10842
- [vars$5.removeButtonWidth]: '60px',
10907
+ [vars$6.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$3.border.xs})`,
10908
+ [vars$6.separatorWidth]: '70px',
10909
+ [vars$6.removeButtonWidth]: '60px',
10843
10910
  };
10844
10911
 
10845
10912
  var mappingsField$1 = /*#__PURE__*/Object.freeze({
10846
10913
  __proto__: null,
10847
10914
  default: mappingsField,
10848
10915
  mappingsField: mappingsField,
10849
- vars: vars$5
10916
+ vars: vars$6
10850
10917
  });
10851
10918
 
10852
10919
  var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
@@ -11086,24 +11153,24 @@ const UserAttributeClass = compose(
11086
11153
  )(RawUserAttribute);
11087
11154
 
11088
11155
  const globalRefs$2 = getThemeRefs(globals);
11089
- const vars$4 = UserAttributeClass.cssVarList;
11156
+ const vars$5 = UserAttributeClass.cssVarList;
11090
11157
 
11091
11158
  const userAttribute = {
11092
- [vars$4.hostDirection]: globalRefs$2.direction,
11093
- [vars$4.labelTextWidth]: '150px',
11094
- [vars$4.valueTextWidth]: '200px',
11095
- [vars$4.badgeMaxWidth]: '85px',
11096
- [vars$4.itemsGap]: '16px',
11097
- [vars$4.hostMinWidth]: '530px',
11159
+ [vars$5.hostDirection]: globalRefs$2.direction,
11160
+ [vars$5.labelTextWidth]: '150px',
11161
+ [vars$5.valueTextWidth]: '200px',
11162
+ [vars$5.badgeMaxWidth]: '85px',
11163
+ [vars$5.itemsGap]: '16px',
11164
+ [vars$5.hostMinWidth]: '530px',
11098
11165
  _fullWidth: {
11099
- [vars$4.hostWidth]: '100%',
11166
+ [vars$5.hostWidth]: '100%',
11100
11167
  },
11101
11168
  };
11102
11169
 
11103
11170
  var userAttribute$1 = /*#__PURE__*/Object.freeze({
11104
11171
  __proto__: null,
11105
11172
  default: userAttribute,
11106
- vars: vars$4
11173
+ vars: vars$5
11107
11174
  });
11108
11175
 
11109
11176
  var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
@@ -11303,23 +11370,23 @@ const UserAuthMethodClass = compose(
11303
11370
  )(RawUserAuthMethod);
11304
11371
 
11305
11372
  const globalRefs$1 = getThemeRefs(globals);
11306
- const vars$3 = UserAuthMethodClass.cssVarList;
11373
+ const vars$4 = UserAuthMethodClass.cssVarList;
11307
11374
 
11308
11375
  const userAuthMethod = {
11309
- [vars$3.hostDirection]: globalRefs$1.direction,
11310
- [vars$3.labelTextWidth]: '200px',
11311
- [vars$3.itemsGap]: '16px',
11312
- [vars$3.hostMinWidth]: '530px',
11313
- [vars$3.iconSize]: '24px',
11376
+ [vars$4.hostDirection]: globalRefs$1.direction,
11377
+ [vars$4.labelTextWidth]: '200px',
11378
+ [vars$4.itemsGap]: '16px',
11379
+ [vars$4.hostMinWidth]: '530px',
11380
+ [vars$4.iconSize]: '24px',
11314
11381
  _fullWidth: {
11315
- [vars$3.hostWidth]: '100%',
11382
+ [vars$4.hostWidth]: '100%',
11316
11383
  },
11317
11384
  };
11318
11385
 
11319
11386
  var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
11320
11387
  __proto__: null,
11321
11388
  default: userAuthMethod,
11322
- vars: vars$3
11389
+ vars: vars$4
11323
11390
  });
11324
11391
 
11325
11392
  const componentName$3 = getComponentName('saml-group-mappings-internal');
@@ -11424,46 +11491,56 @@ const SamlGroupMappingsClass = compose(
11424
11491
  })
11425
11492
  );
11426
11493
 
11427
- const vars$2 = SamlGroupMappingsClass.cssVarList;
11494
+ const vars$3 = SamlGroupMappingsClass.cssVarList;
11428
11495
 
11429
11496
  const samlGroupMappings = {
11430
- [vars$2.hostWidth]: refs.width,
11431
- [vars$2.hostDirection]: refs.direction,
11432
- [vars$2.groupNameInputMarginBottom]: '1em',
11497
+ [vars$3.hostWidth]: refs.width,
11498
+ [vars$3.hostDirection]: refs.direction,
11499
+ [vars$3.groupNameInputMarginBottom]: '1em',
11433
11500
  };
11434
11501
 
11435
11502
  var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
11436
11503
  __proto__: null,
11437
11504
  default: samlGroupMappings,
11438
11505
  samlGroupMappings: samlGroupMappings,
11439
- vars: vars$2
11506
+ vars: vars$3
11440
11507
  });
11441
11508
 
11442
11509
  const globalRefs = getThemeRefs(globals);
11443
- const vars$1 = PolicyValidationClass.cssVarList;
11510
+ const vars$2 = PolicyValidationClass.cssVarList;
11444
11511
 
11445
11512
  const policyValidation = {
11446
- [vars$1.fontFamily]: refs.fontFamily,
11447
- [vars$1.fontSize]: refs.labelFontSize,
11448
- [vars$1.textColor]: refs.labelTextColor,
11449
- [vars$1.borderWidth]: refs.borderWidth,
11450
- [vars$1.borderStyle]: refs.borderStyle,
11451
- [vars$1.borderColor]: refs.borderColor,
11452
- [vars$1.borderRadius]: globalRefs.radius.sm,
11453
- [vars$1.backgroundColor]: 'none',
11454
- [vars$1.padding]: '0px',
11455
- [vars$1.labelMargin]: globalRefs.spacing.sm,
11456
- [vars$1.itemsSpacing]: globalRefs.spacing.lg,
11457
- [vars$1.itemSymbolDefault]: "'\\2022'", // "•"
11458
- [vars$1.itemSymbolSuccess]: "'\\2713'", // "✓"
11459
- [vars$1.itemSymbolError]: "'\\2A09'", // "⨉"
11460
- [vars$1.itemSymbolSuccessColor]: globalRefs.colors.success.main,
11461
- [vars$1.itemSymbolErrorColor]: globalRefs.colors.error.main,
11513
+ [vars$2.fontFamily]: refs.fontFamily,
11514
+ [vars$2.fontSize]: refs.labelFontSize,
11515
+ [vars$2.textColor]: refs.labelTextColor,
11516
+ [vars$2.borderWidth]: refs.borderWidth,
11517
+ [vars$2.borderStyle]: refs.borderStyle,
11518
+ [vars$2.borderColor]: refs.borderColor,
11519
+ [vars$2.borderRadius]: globalRefs.radius.sm,
11520
+ [vars$2.backgroundColor]: 'none',
11521
+ [vars$2.padding]: '0px',
11522
+ [vars$2.labelMargin]: globalRefs.spacing.sm,
11523
+ [vars$2.itemsSpacing]: globalRefs.spacing.lg,
11524
+ [vars$2.itemSymbolDefault]: "'\\2022'", // "•"
11525
+ [vars$2.itemSymbolSuccess]: "'\\2713'", // "✓"
11526
+ [vars$2.itemSymbolError]: "'\\2A09'", // "⨉"
11527
+ [vars$2.itemSymbolSuccessColor]: globalRefs.colors.success.main,
11528
+ [vars$2.itemSymbolErrorColor]: globalRefs.colors.error.main,
11462
11529
  };
11463
11530
 
11464
11531
  var policyValidation$1 = /*#__PURE__*/Object.freeze({
11465
11532
  __proto__: null,
11466
11533
  default: policyValidation,
11534
+ vars: vars$2
11535
+ });
11536
+
11537
+ const vars$1 = IconClass.cssVarList;
11538
+
11539
+ const icon = {};
11540
+
11541
+ var icon$1 = /*#__PURE__*/Object.freeze({
11542
+ __proto__: null,
11543
+ default: icon,
11467
11544
  vars: vars$1
11468
11545
  });
11469
11546
 
@@ -11508,6 +11585,7 @@ const components = {
11508
11585
  userAuthMethod: userAuthMethod$1,
11509
11586
  samlGroupMappings: samlGroupMappings$1,
11510
11587
  policyValidation: policyValidation$1,
11588
+ icon: icon$1,
11511
11589
  };
11512
11590
 
11513
11591
  const theme = Object.keys(components).reduce(
@@ -11520,7 +11598,7 @@ const vars = Object.keys(components).reduce(
11520
11598
  );
11521
11599
 
11522
11600
  const defaultTheme = { globals, components: theme };
11523
- const themeVars = { globals: vars$F, components: vars };
11601
+ const themeVars = { globals: vars$G, components: vars };
11524
11602
 
11525
11603
  const colors = {
11526
11604
  surface: {