@descope/web-components-ui 1.0.306 → 1.0.307

Sign up to get free protection for your applications and to get access to all the features.
@@ -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,70 @@ 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
+
2631
+ customElements.define(componentName$P, IconClass);
2632
+
2569
2633
  const clickableMixin = (superclass) =>
2570
2634
  class ClickableMixinClass extends superclass {
2571
2635
  get isLoading() {
@@ -2647,6 +2711,10 @@ const ButtonClass = compose(
2647
2711
  verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
2648
2712
 
2649
2713
  labelTextColor: { property: 'color' },
2714
+ iconColor: {
2715
+ selector: () => `::slotted(${IconClass.componentName})`,
2716
+ property: IconClass.cssVarList.fill,
2717
+ },
2650
2718
  labelTextDecoration: { ...label$a, property: 'text-decoration' },
2651
2719
  labelSpacing: { ...label$a, property: 'gap' },
2652
2720
  textAlign: { ...label$a, property: 'justify-content', fallback: 'center' },
@@ -2787,6 +2855,7 @@ const button = {
2787
2855
  [helperVars$3.dark]: globalRefs$o.colors.surface.dark,
2788
2856
  [helperVars$3.light]: globalRefs$o.colors.surface.light,
2789
2857
  [helperVars$3.contrast]: globalRefs$o.colors.surface.main,
2858
+ [compVars$5.iconColor]: globalRefs$o.colors.surface.main,
2790
2859
  },
2791
2860
 
2792
2861
  variant: {
@@ -2834,7 +2903,7 @@ const button = {
2834
2903
  },
2835
2904
  };
2836
2905
 
2837
- const vars$E = {
2906
+ const vars$F = {
2838
2907
  ...compVars$5,
2839
2908
  ...helperVars$3,
2840
2909
  };
@@ -2842,7 +2911,7 @@ const vars$E = {
2842
2911
  var button$1 = /*#__PURE__*/Object.freeze({
2843
2912
  __proto__: null,
2844
2913
  default: button,
2845
- vars: vars$E
2914
+ vars: vars$F
2846
2915
  });
2847
2916
 
2848
2917
  const {
@@ -3107,7 +3176,7 @@ const TextFieldClass = compose(
3107
3176
  const componentName$M = getComponentName('input-wrapper');
3108
3177
  const globalRefs$n = getThemeRefs(globals);
3109
3178
 
3110
- const [theme$1, refs, vars$D] = createHelperVars(
3179
+ const [theme$1, refs, vars$E] = createHelperVars(
3111
3180
  {
3112
3181
  labelTextColor: globalRefs$n.colors.surface.dark,
3113
3182
  labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
@@ -3184,38 +3253,38 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
3184
3253
  __proto__: null,
3185
3254
  default: theme$1,
3186
3255
  refs: refs,
3187
- vars: vars$D
3256
+ vars: vars$E
3188
3257
  });
3189
3258
 
3190
- const vars$C = TextFieldClass.cssVarList;
3259
+ const vars$D = TextFieldClass.cssVarList;
3191
3260
 
3192
3261
  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,
3262
+ [vars$D.hostWidth]: refs.width,
3263
+ [vars$D.hostMinWidth]: refs.minWidth,
3264
+ [vars$D.hostDirection]: refs.direction,
3265
+ [vars$D.fontSize]: refs.fontSize,
3266
+ [vars$D.fontFamily]: refs.fontFamily,
3267
+ [vars$D.labelTextColor]: refs.labelTextColor,
3268
+ [vars$D.labelRequiredIndicator]: refs.requiredIndicator,
3269
+ [vars$D.errorMessageTextColor]: refs.errorMessageTextColor,
3270
+ [vars$D.inputValueTextColor]: refs.valueTextColor,
3271
+ [vars$D.inputPlaceholderColor]: refs.placeholderTextColor,
3272
+ [vars$D.inputBorderWidth]: refs.borderWidth,
3273
+ [vars$D.inputBorderStyle]: refs.borderStyle,
3274
+ [vars$D.inputBorderColor]: refs.borderColor,
3275
+ [vars$D.inputBorderRadius]: refs.borderRadius,
3276
+ [vars$D.inputOutlineWidth]: refs.outlineWidth,
3277
+ [vars$D.inputOutlineStyle]: refs.outlineStyle,
3278
+ [vars$D.inputOutlineColor]: refs.outlineColor,
3279
+ [vars$D.inputOutlineOffset]: refs.outlineOffset,
3280
+ [vars$D.inputBackgroundColor]: refs.backgroundColor,
3281
+ [vars$D.inputHeight]: refs.inputHeight,
3282
+ [vars$D.inputHorizontalPadding]: refs.horizontalPadding,
3283
+ [vars$D.helperTextColor]: refs.helperTextColor,
3215
3284
  textAlign: {
3216
- right: { [vars$C.inputTextAlign]: 'right' },
3217
- left: { [vars$C.inputTextAlign]: 'left' },
3218
- center: { [vars$C.inputTextAlign]: 'center' },
3285
+ right: { [vars$D.inputTextAlign]: 'right' },
3286
+ left: { [vars$D.inputTextAlign]: 'left' },
3287
+ center: { [vars$D.inputTextAlign]: 'center' },
3219
3288
  },
3220
3289
  };
3221
3290
 
@@ -3223,7 +3292,7 @@ var textField$2 = /*#__PURE__*/Object.freeze({
3223
3292
  __proto__: null,
3224
3293
  default: textField$1,
3225
3294
  textField: textField$1,
3226
- vars: vars$C
3295
+ vars: vars$D
3227
3296
  });
3228
3297
 
3229
3298
  const passwordDraggableMixin = (superclass) =>
@@ -3394,38 +3463,38 @@ const PasswordClass = compose(
3394
3463
  );
3395
3464
 
3396
3465
  const globalRefs$m = getThemeRefs(globals);
3397
- const vars$B = PasswordClass.cssVarList;
3466
+ const vars$C = PasswordClass.cssVarList;
3398
3467
 
3399
3468
  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,
3469
+ [vars$C.hostWidth]: refs.width,
3470
+ [vars$C.hostDirection]: refs.direction,
3471
+ [vars$C.fontSize]: refs.fontSize,
3472
+ [vars$C.fontFamily]: refs.fontFamily,
3473
+ [vars$C.labelTextColor]: refs.labelTextColor,
3474
+ [vars$C.errorMessageTextColor]: refs.errorMessageTextColor,
3475
+ [vars$C.inputHorizontalPadding]: refs.horizontalPadding,
3476
+ [vars$C.inputHeight]: refs.inputHeight,
3477
+ [vars$C.inputBackgroundColor]: refs.backgroundColor,
3478
+ [vars$C.labelRequiredIndicator]: refs.requiredIndicator,
3479
+ [vars$C.inputValueTextColor]: refs.valueTextColor,
3480
+ [vars$C.inputPlaceholderTextColor]: refs.placeholderTextColor,
3481
+ [vars$C.inputBorderWidth]: refs.borderWidth,
3482
+ [vars$C.inputBorderStyle]: refs.borderStyle,
3483
+ [vars$C.inputBorderColor]: refs.borderColor,
3484
+ [vars$C.inputBorderRadius]: refs.borderRadius,
3485
+ [vars$C.inputOutlineWidth]: refs.outlineWidth,
3486
+ [vars$C.inputOutlineStyle]: refs.outlineStyle,
3487
+ [vars$C.inputOutlineColor]: refs.outlineColor,
3488
+ [vars$C.inputOutlineOffset]: refs.outlineOffset,
3489
+ [vars$C.revealButtonOffset]: globalRefs$m.spacing.md,
3490
+ [vars$C.revealButtonSize]: refs.toggleButtonSize,
3491
+ [vars$C.revealButtonColor]: refs.placeholderTextColor,
3423
3492
  };
3424
3493
 
3425
3494
  var password$1 = /*#__PURE__*/Object.freeze({
3426
3495
  __proto__: null,
3427
3496
  default: password,
3428
- vars: vars$B
3497
+ vars: vars$C
3429
3498
  });
3430
3499
 
3431
3500
  const componentName$K = getComponentName('number-field');
@@ -3458,36 +3527,36 @@ const NumberFieldClass = compose(
3458
3527
  })
3459
3528
  );
3460
3529
 
3461
- const vars$A = NumberFieldClass.cssVarList;
3530
+ const vars$B = NumberFieldClass.cssVarList;
3462
3531
 
3463
3532
  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,
3533
+ [vars$B.hostWidth]: refs.width,
3534
+ [vars$B.hostMinWidth]: refs.minWidth,
3535
+ [vars$B.hostDirection]: refs.direction,
3536
+ [vars$B.fontSize]: refs.fontSize,
3537
+ [vars$B.fontFamily]: refs.fontFamily,
3538
+ [vars$B.labelTextColor]: refs.labelTextColor,
3539
+ [vars$B.errorMessageTextColor]: refs.errorMessageTextColor,
3540
+ [vars$B.inputValueTextColor]: refs.valueTextColor,
3541
+ [vars$B.inputPlaceholderColor]: refs.placeholderTextColor,
3542
+ [vars$B.inputBorderWidth]: refs.borderWidth,
3543
+ [vars$B.inputBorderStyle]: refs.borderStyle,
3544
+ [vars$B.inputBorderColor]: refs.borderColor,
3545
+ [vars$B.inputBorderRadius]: refs.borderRadius,
3546
+ [vars$B.inputOutlineWidth]: refs.outlineWidth,
3547
+ [vars$B.inputOutlineStyle]: refs.outlineStyle,
3548
+ [vars$B.inputOutlineColor]: refs.outlineColor,
3549
+ [vars$B.inputOutlineOffset]: refs.outlineOffset,
3550
+ [vars$B.inputBackgroundColor]: refs.backgroundColor,
3551
+ [vars$B.labelRequiredIndicator]: refs.requiredIndicator,
3552
+ [vars$B.inputHorizontalPadding]: refs.horizontalPadding,
3553
+ [vars$B.inputHeight]: refs.inputHeight,
3485
3554
  };
3486
3555
 
3487
3556
  var numberField$1 = /*#__PURE__*/Object.freeze({
3488
3557
  __proto__: null,
3489
3558
  default: numberField,
3490
- vars: vars$A
3559
+ vars: vars$B
3491
3560
  });
3492
3561
 
3493
3562
  const componentName$J = getComponentName('email-field');
@@ -3529,36 +3598,36 @@ const EmailFieldClass = compose(
3529
3598
  })
3530
3599
  );
3531
3600
 
3532
- const vars$z = EmailFieldClass.cssVarList;
3601
+ const vars$A = EmailFieldClass.cssVarList;
3533
3602
 
3534
3603
  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,
3604
+ [vars$A.hostWidth]: refs.width,
3605
+ [vars$A.hostMinWidth]: refs.minWidth,
3606
+ [vars$A.hostDirection]: refs.direction,
3607
+ [vars$A.fontSize]: refs.fontSize,
3608
+ [vars$A.fontFamily]: refs.fontFamily,
3609
+ [vars$A.labelTextColor]: refs.labelTextColor,
3610
+ [vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
3611
+ [vars$A.inputValueTextColor]: refs.valueTextColor,
3612
+ [vars$A.labelRequiredIndicator]: refs.requiredIndicator,
3613
+ [vars$A.inputPlaceholderColor]: refs.placeholderTextColor,
3614
+ [vars$A.inputBorderWidth]: refs.borderWidth,
3615
+ [vars$A.inputBorderStyle]: refs.borderStyle,
3616
+ [vars$A.inputBorderColor]: refs.borderColor,
3617
+ [vars$A.inputBorderRadius]: refs.borderRadius,
3618
+ [vars$A.inputOutlineWidth]: refs.outlineWidth,
3619
+ [vars$A.inputOutlineStyle]: refs.outlineStyle,
3620
+ [vars$A.inputOutlineColor]: refs.outlineColor,
3621
+ [vars$A.inputOutlineOffset]: refs.outlineOffset,
3622
+ [vars$A.inputBackgroundColor]: refs.backgroundColor,
3623
+ [vars$A.inputHorizontalPadding]: refs.horizontalPadding,
3624
+ [vars$A.inputHeight]: refs.inputHeight,
3556
3625
  };
3557
3626
 
3558
3627
  var emailField$1 = /*#__PURE__*/Object.freeze({
3559
3628
  __proto__: null,
3560
3629
  default: emailField,
3561
- vars: vars$z
3630
+ vars: vars$A
3562
3631
  });
3563
3632
 
3564
3633
  const componentName$I = getComponentName('text-area');
@@ -3641,45 +3710,45 @@ const TextAreaClass = compose(
3641
3710
  })
3642
3711
  );
3643
3712
 
3644
- const vars$y = TextAreaClass.cssVarList;
3713
+ const vars$z = TextAreaClass.cssVarList;
3645
3714
 
3646
3715
  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',
3716
+ [vars$z.hostWidth]: refs.width,
3717
+ [vars$z.hostMinWidth]: refs.minWidth,
3718
+ [vars$z.hostDirection]: refs.direction,
3719
+ [vars$z.fontSize]: refs.fontSize,
3720
+ [vars$z.fontFamily]: refs.fontFamily,
3721
+ [vars$z.labelTextColor]: refs.labelTextColor,
3722
+ [vars$z.labelRequiredIndicator]: refs.requiredIndicator,
3723
+ [vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
3724
+ [vars$z.inputBackgroundColor]: refs.backgroundColor,
3725
+ [vars$z.inputValueTextColor]: refs.valueTextColor,
3726
+ [vars$z.inputPlaceholderTextColor]: refs.placeholderTextColor,
3727
+ [vars$z.inputBorderRadius]: refs.borderRadius,
3728
+ [vars$z.inputBorderWidth]: refs.borderWidth,
3729
+ [vars$z.inputBorderStyle]: refs.borderStyle,
3730
+ [vars$z.inputBorderColor]: refs.borderColor,
3731
+ [vars$z.inputOutlineWidth]: refs.outlineWidth,
3732
+ [vars$z.inputOutlineStyle]: refs.outlineStyle,
3733
+ [vars$z.inputOutlineColor]: refs.outlineColor,
3734
+ [vars$z.inputOutlineOffset]: refs.outlineOffset,
3735
+ [vars$z.inputResizeType]: 'vertical',
3736
+ [vars$z.inputMinHeight]: '5em',
3668
3737
  textAlign: {
3669
- right: { [vars$y.inputTextAlign]: 'right' },
3670
- left: { [vars$y.inputTextAlign]: 'left' },
3671
- center: { [vars$y.inputTextAlign]: 'center' },
3738
+ right: { [vars$z.inputTextAlign]: 'right' },
3739
+ left: { [vars$z.inputTextAlign]: 'left' },
3740
+ center: { [vars$z.inputTextAlign]: 'center' },
3672
3741
  },
3673
3742
 
3674
3743
  _readonly: {
3675
- [vars$y.inputResizeType]: 'none',
3744
+ [vars$z.inputResizeType]: 'none',
3676
3745
  },
3677
3746
  };
3678
3747
 
3679
3748
  var textArea$1 = /*#__PURE__*/Object.freeze({
3680
3749
  __proto__: null,
3681
3750
  default: textArea,
3682
- vars: vars$y
3751
+ vars: vars$z
3683
3752
  });
3684
3753
 
3685
3754
  const createBaseInputClass = (...args) =>
@@ -3888,44 +3957,44 @@ const CheckboxClass = compose(
3888
3957
  })
3889
3958
  );
3890
3959
 
3891
- const vars$x = CheckboxClass.cssVarList;
3960
+ const vars$y = CheckboxClass.cssVarList;
3892
3961
  const checkboxSize = '1.35em';
3893
3962
 
3894
3963
  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,
3964
+ [vars$y.hostWidth]: refs.width,
3965
+ [vars$y.hostDirection]: refs.direction,
3966
+ [vars$y.fontSize]: refs.fontSize,
3967
+ [vars$y.fontFamily]: refs.fontFamily,
3968
+ [vars$y.labelTextColor]: refs.labelTextColor,
3969
+ [vars$y.labelRequiredIndicator]: refs.requiredIndicator,
3970
+ [vars$y.labelFontWeight]: '400',
3971
+ [vars$y.labelLineHeight]: checkboxSize,
3972
+ [vars$y.labelSpacing]: '1em',
3973
+ [vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
3974
+ [vars$y.inputOutlineWidth]: refs.outlineWidth,
3975
+ [vars$y.inputOutlineOffset]: refs.outlineOffset,
3976
+ [vars$y.inputOutlineColor]: refs.outlineColor,
3977
+ [vars$y.inputOutlineStyle]: refs.outlineStyle,
3978
+ [vars$y.inputBorderRadius]: refs.borderRadius,
3979
+ [vars$y.inputBorderColor]: refs.borderColor,
3980
+ [vars$y.inputBorderWidth]: refs.borderWidth,
3981
+ [vars$y.inputBorderStyle]: refs.borderStyle,
3982
+ [vars$y.inputBackgroundColor]: refs.backgroundColor,
3983
+ [vars$y.inputSize]: checkboxSize,
3915
3984
 
3916
3985
  _checked: {
3917
- [vars$x.inputValueTextColor]: refs.valueTextColor,
3986
+ [vars$y.inputValueTextColor]: refs.valueTextColor,
3918
3987
  },
3919
3988
 
3920
3989
  _disabled: {
3921
- [vars$x.labelTextColor]: refs.labelTextColor,
3990
+ [vars$y.labelTextColor]: refs.labelTextColor,
3922
3991
  },
3923
3992
  };
3924
3993
 
3925
3994
  var checkbox$1 = /*#__PURE__*/Object.freeze({
3926
3995
  __proto__: null,
3927
3996
  default: checkbox,
3928
- vars: vars$x
3997
+ vars: vars$y
3929
3998
  });
3930
3999
 
3931
4000
  const componentName$F = getComponentName('switch-toggle');
@@ -4068,69 +4137,69 @@ const knobMargin = '2px';
4068
4137
  const checkboxHeight = '1.25em';
4069
4138
 
4070
4139
  const globalRefs$l = getThemeRefs(globals);
4071
- const vars$w = SwitchToggleClass.cssVarList;
4140
+ const vars$x = SwitchToggleClass.cssVarList;
4072
4141
 
4073
4142
  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,
4143
+ [vars$x.hostWidth]: refs.width,
4144
+ [vars$x.hostDirection]: refs.direction,
4145
+ [vars$x.fontSize]: refs.fontSize,
4146
+ [vars$x.fontFamily]: refs.fontFamily,
4147
+
4148
+ [vars$x.inputOutlineWidth]: refs.outlineWidth,
4149
+ [vars$x.inputOutlineOffset]: refs.outlineOffset,
4150
+ [vars$x.inputOutlineColor]: refs.outlineColor,
4151
+ [vars$x.inputOutlineStyle]: refs.outlineStyle,
4152
+
4153
+ [vars$x.trackBorderStyle]: refs.borderStyle,
4154
+ [vars$x.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
4155
+ [vars$x.trackBorderColor]: refs.borderColor,
4156
+ [vars$x.trackBackgroundColor]: refs.backgroundColor,
4157
+ [vars$x.trackBorderRadius]: globalRefs$l.radius.md,
4158
+ [vars$x.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
4159
+ [vars$x.trackHeight]: checkboxHeight,
4160
+
4161
+ [vars$x.knobSize]: `calc(1em - ${knobMargin})`,
4162
+ [vars$x.knobRadius]: '50%',
4163
+ [vars$x.knobTopOffset]: '1px',
4164
+ [vars$x.knobLeftOffset]: knobMargin,
4165
+ [vars$x.knobColor]: refs.labelTextColor,
4166
+ [vars$x.knobTransitionDuration]: '0.3s',
4167
+
4168
+ [vars$x.labelTextColor]: refs.labelTextColor,
4169
+ [vars$x.labelFontWeight]: '400',
4170
+ [vars$x.labelLineHeight]: '1.35em',
4171
+ [vars$x.labelSpacing]: '1em',
4172
+ [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
4173
+ [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
4105
4174
 
4106
4175
  _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,
4176
+ [vars$x.trackBorderColor]: refs.borderColor,
4177
+ [vars$x.knobLeftOffset]: `calc(100% - var(${vars$x.knobSize}) - ${knobMargin})`,
4178
+ [vars$x.knobColor]: refs.valueTextColor,
4179
+ [vars$x.knobTextColor]: refs.valueTextColor,
4111
4180
  },
4112
4181
 
4113
4182
  _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,
4183
+ [vars$x.knobColor]: globalRefs$l.colors.surface.light,
4184
+ [vars$x.trackBorderColor]: globalRefs$l.colors.surface.light,
4185
+ [vars$x.trackBackgroundColor]: globalRefs$l.colors.surface.main,
4186
+ [vars$x.labelTextColor]: refs.labelTextColor,
4118
4187
  _checked: {
4119
- [vars$w.knobColor]: globalRefs$l.colors.surface.light,
4120
- [vars$w.trackBackgroundColor]: globalRefs$l.colors.surface.main,
4188
+ [vars$x.knobColor]: globalRefs$l.colors.surface.light,
4189
+ [vars$x.trackBackgroundColor]: globalRefs$l.colors.surface.main,
4121
4190
  },
4122
4191
  },
4123
4192
 
4124
4193
  _invalid: {
4125
- [vars$w.trackBorderColor]: globalRefs$l.colors.error.main,
4126
- [vars$w.knobColor]: globalRefs$l.colors.error.main,
4194
+ [vars$x.trackBorderColor]: globalRefs$l.colors.error.main,
4195
+ [vars$x.knobColor]: globalRefs$l.colors.error.main,
4127
4196
  },
4128
4197
  };
4129
4198
 
4130
4199
  var switchToggle$1 = /*#__PURE__*/Object.freeze({
4131
4200
  __proto__: null,
4132
4201
  default: switchToggle,
4133
- vars: vars$w
4202
+ vars: vars$x
4134
4203
  });
4135
4204
 
4136
4205
  const componentName$E = getComponentName('container');
@@ -4296,7 +4365,7 @@ const container = {
4296
4365
  },
4297
4366
  };
4298
4367
 
4299
- const vars$v = {
4368
+ const vars$w = {
4300
4369
  ...compVars$4,
4301
4370
  ...helperVars$2,
4302
4371
  };
@@ -4304,7 +4373,7 @@ const vars$v = {
4304
4373
  var container$1 = /*#__PURE__*/Object.freeze({
4305
4374
  __proto__: null,
4306
4375
  default: container,
4307
- vars: vars$v
4376
+ vars: vars$w
4308
4377
  });
4309
4378
 
4310
4379
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
@@ -4365,16 +4434,16 @@ const LogoClass = createCssVarImageClass({
4365
4434
  fallbackVarName: 'fallbackUrl',
4366
4435
  });
4367
4436
 
4368
- const vars$u = LogoClass.cssVarList;
4437
+ const vars$v = LogoClass.cssVarList;
4369
4438
 
4370
4439
  const logo$2 = {
4371
- [vars$u.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
4440
+ [vars$v.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
4372
4441
  };
4373
4442
 
4374
4443
  var logo$3 = /*#__PURE__*/Object.freeze({
4375
4444
  __proto__: null,
4376
4445
  default: logo$2,
4377
- vars: vars$u
4446
+ vars: vars$v
4378
4447
  });
4379
4448
 
4380
4449
  const componentName$C = getComponentName('totp-image');
@@ -4385,16 +4454,16 @@ const TotpImageClass = createCssVarImageClass({
4385
4454
  fallbackVarName: 'fallbackUrl',
4386
4455
  });
4387
4456
 
4388
- const vars$t = TotpImageClass.cssVarList;
4457
+ const vars$u = TotpImageClass.cssVarList;
4389
4458
 
4390
4459
  const logo$1 = {
4391
- [vars$t.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
4460
+ [vars$u.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
4392
4461
  };
4393
4462
 
4394
4463
  var totpImage = /*#__PURE__*/Object.freeze({
4395
4464
  __proto__: null,
4396
4465
  default: logo$1,
4397
- vars: vars$t
4466
+ vars: vars$u
4398
4467
  });
4399
4468
 
4400
4469
  const componentName$B = getComponentName('notp-image');
@@ -4405,16 +4474,16 @@ const NotpImageClass = createCssVarImageClass({
4405
4474
  fallbackVarName: 'fallbackUrl',
4406
4475
  });
4407
4476
 
4408
- const vars$s = NotpImageClass.cssVarList;
4477
+ const vars$t = NotpImageClass.cssVarList;
4409
4478
 
4410
4479
  const logo = {
4411
- [vars$s.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
4480
+ [vars$t.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
4412
4481
  };
4413
4482
 
4414
4483
  var notpImage = /*#__PURE__*/Object.freeze({
4415
4484
  __proto__: null,
4416
4485
  default: logo,
4417
- vars: vars$s
4486
+ vars: vars$t
4418
4487
  });
4419
4488
 
4420
4489
  const componentName$A = getComponentName('text');
@@ -4476,93 +4545,93 @@ const TextClass = compose(
4476
4545
  )(RawText);
4477
4546
 
4478
4547
  const globalRefs$j = getThemeRefs(globals);
4479
- const vars$r = TextClass.cssVarList;
4548
+ const vars$s = TextClass.cssVarList;
4480
4549
 
4481
4550
  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,
4551
+ [vars$s.hostDirection]: globalRefs$j.direction,
4552
+ [vars$s.textLineHeight]: '1.35em',
4553
+ [vars$s.textAlign]: 'left',
4554
+ [vars$s.textColor]: globalRefs$j.colors.surface.dark,
4486
4555
  variant: {
4487
4556
  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,
4557
+ [vars$s.fontSize]: globalRefs$j.typography.h1.size,
4558
+ [vars$s.fontWeight]: globalRefs$j.typography.h1.weight,
4559
+ [vars$s.fontFamily]: globalRefs$j.typography.h1.font,
4491
4560
  },
4492
4561
  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,
4562
+ [vars$s.fontSize]: globalRefs$j.typography.h2.size,
4563
+ [vars$s.fontWeight]: globalRefs$j.typography.h2.weight,
4564
+ [vars$s.fontFamily]: globalRefs$j.typography.h2.font,
4496
4565
  },
4497
4566
  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,
4567
+ [vars$s.fontSize]: globalRefs$j.typography.h3.size,
4568
+ [vars$s.fontWeight]: globalRefs$j.typography.h3.weight,
4569
+ [vars$s.fontFamily]: globalRefs$j.typography.h3.font,
4501
4570
  },
4502
4571
  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,
4572
+ [vars$s.fontSize]: globalRefs$j.typography.subtitle1.size,
4573
+ [vars$s.fontWeight]: globalRefs$j.typography.subtitle1.weight,
4574
+ [vars$s.fontFamily]: globalRefs$j.typography.subtitle1.font,
4506
4575
  },
4507
4576
  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,
4577
+ [vars$s.fontSize]: globalRefs$j.typography.subtitle2.size,
4578
+ [vars$s.fontWeight]: globalRefs$j.typography.subtitle2.weight,
4579
+ [vars$s.fontFamily]: globalRefs$j.typography.subtitle2.font,
4511
4580
  },
4512
4581
  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,
4582
+ [vars$s.fontSize]: globalRefs$j.typography.body1.size,
4583
+ [vars$s.fontWeight]: globalRefs$j.typography.body1.weight,
4584
+ [vars$s.fontFamily]: globalRefs$j.typography.body1.font,
4516
4585
  },
4517
4586
  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,
4587
+ [vars$s.fontSize]: globalRefs$j.typography.body2.size,
4588
+ [vars$s.fontWeight]: globalRefs$j.typography.body2.weight,
4589
+ [vars$s.fontFamily]: globalRefs$j.typography.body2.font,
4521
4590
  },
4522
4591
  },
4523
4592
 
4524
4593
  mode: {
4525
4594
  primary: {
4526
- [vars$r.textColor]: globalRefs$j.colors.surface.contrast,
4595
+ [vars$s.textColor]: globalRefs$j.colors.surface.contrast,
4527
4596
  },
4528
4597
  secondary: {
4529
- [vars$r.textColor]: globalRefs$j.colors.surface.dark,
4598
+ [vars$s.textColor]: globalRefs$j.colors.surface.dark,
4530
4599
  },
4531
4600
  error: {
4532
- [vars$r.textColor]: globalRefs$j.colors.error.main,
4601
+ [vars$s.textColor]: globalRefs$j.colors.error.main,
4533
4602
  },
4534
4603
  success: {
4535
- [vars$r.textColor]: globalRefs$j.colors.success.main,
4604
+ [vars$s.textColor]: globalRefs$j.colors.success.main,
4536
4605
  },
4537
4606
  },
4538
4607
 
4539
4608
  textAlign: {
4540
- right: { [vars$r.textAlign]: 'right' },
4541
- left: { [vars$r.textAlign]: 'left' },
4542
- center: { [vars$r.textAlign]: 'center' },
4609
+ right: { [vars$s.textAlign]: 'right' },
4610
+ left: { [vars$s.textAlign]: 'left' },
4611
+ center: { [vars$s.textAlign]: 'center' },
4543
4612
  },
4544
4613
 
4545
4614
  _fullWidth: {
4546
- [vars$r.hostWidth]: '100%',
4615
+ [vars$s.hostWidth]: '100%',
4547
4616
  },
4548
4617
 
4549
4618
  _italic: {
4550
- [vars$r.fontStyle]: 'italic',
4619
+ [vars$s.fontStyle]: 'italic',
4551
4620
  },
4552
4621
 
4553
4622
  _uppercase: {
4554
- [vars$r.textTransform]: 'uppercase',
4623
+ [vars$s.textTransform]: 'uppercase',
4555
4624
  },
4556
4625
 
4557
4626
  _lowercase: {
4558
- [vars$r.textTransform]: 'lowercase',
4627
+ [vars$s.textTransform]: 'lowercase',
4559
4628
  },
4560
4629
  };
4561
4630
 
4562
4631
  var text$3 = /*#__PURE__*/Object.freeze({
4563
4632
  __proto__: null,
4564
4633
  default: text$2,
4565
- vars: vars$r
4634
+ vars: vars$s
4566
4635
  });
4567
4636
 
4568
4637
  const textRuleSet = {
@@ -4809,122 +4878,122 @@ const LinkClass = compose(
4809
4878
  )(RawLink);
4810
4879
 
4811
4880
  const globalRefs$i = getThemeRefs(globals);
4812
- const vars$q = EnrichedTextClass.cssVarList;
4881
+ const vars$r = EnrichedTextClass.cssVarList;
4813
4882
 
4814
4883
  const EnrichedText = {
4815
- [vars$q.hostDirection]: globalRefs$i.direction,
4884
+ [vars$r.hostDirection]: globalRefs$i.direction,
4816
4885
 
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,
4886
+ [vars$r.fontSize]: globalRefs$i.typography.body1.size,
4887
+ [vars$r.fontWeight]: globalRefs$i.typography.body1.weight,
4888
+ [vars$r.fontFamily]: globalRefs$i.typography.body1.font,
4820
4889
 
4821
- [vars$q.textLineHeight]: '1.35em',
4822
- [vars$q.textAlign]: 'left',
4823
- [vars$q.textColor]: globalRefs$i.colors.surface.dark,
4890
+ [vars$r.textLineHeight]: '1.35em',
4891
+ [vars$r.textAlign]: 'left',
4892
+ [vars$r.textColor]: globalRefs$i.colors.surface.dark,
4824
4893
 
4825
- [vars$q.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
4894
+ [vars$r.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
4826
4895
 
4827
4896
  mode: {
4828
4897
  primary: {
4829
- [vars$q.textColor]: globalRefs$i.colors.surface.contrast,
4898
+ [vars$r.textColor]: globalRefs$i.colors.surface.contrast,
4830
4899
  },
4831
4900
  secondary: {
4832
- [vars$q.textColor]: globalRefs$i.colors.surface.dark,
4901
+ [vars$r.textColor]: globalRefs$i.colors.surface.dark,
4833
4902
  },
4834
4903
  error: {
4835
- [vars$q.textColor]: globalRefs$i.colors.error.main,
4904
+ [vars$r.textColor]: globalRefs$i.colors.error.main,
4836
4905
  },
4837
4906
  success: {
4838
- [vars$q.textColor]: globalRefs$i.colors.success.main,
4907
+ [vars$r.textColor]: globalRefs$i.colors.success.main,
4839
4908
  },
4840
4909
  },
4841
4910
 
4842
4911
  variant: {
4843
4912
  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,
4913
+ [vars$r.fontSize]: globalRefs$i.typography.h1.size,
4914
+ [vars$r.fontWeight]: globalRefs$i.typography.h1.weight,
4915
+ [vars$r.fontFamily]: globalRefs$i.typography.h1.font,
4847
4916
  },
4848
4917
  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,
4918
+ [vars$r.fontSize]: globalRefs$i.typography.h2.size,
4919
+ [vars$r.fontWeight]: globalRefs$i.typography.h2.weight,
4920
+ [vars$r.fontFamily]: globalRefs$i.typography.h2.font,
4852
4921
  },
4853
4922
  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,
4923
+ [vars$r.fontSize]: globalRefs$i.typography.h3.size,
4924
+ [vars$r.fontWeight]: globalRefs$i.typography.h3.weight,
4925
+ [vars$r.fontFamily]: globalRefs$i.typography.h3.font,
4857
4926
  },
4858
4927
  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,
4928
+ [vars$r.fontSize]: globalRefs$i.typography.subtitle1.size,
4929
+ [vars$r.fontWeight]: globalRefs$i.typography.subtitle1.weight,
4930
+ [vars$r.fontFamily]: globalRefs$i.typography.subtitle1.font,
4862
4931
  },
4863
4932
  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,
4933
+ [vars$r.fontSize]: globalRefs$i.typography.subtitle2.size,
4934
+ [vars$r.fontWeight]: globalRefs$i.typography.subtitle2.weight,
4935
+ [vars$r.fontFamily]: globalRefs$i.typography.subtitle2.font,
4867
4936
  },
4868
4937
  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,
4938
+ [vars$r.fontSize]: globalRefs$i.typography.body1.size,
4939
+ [vars$r.fontWeight]: globalRefs$i.typography.body1.weight,
4940
+ [vars$r.fontFamily]: globalRefs$i.typography.body1.font,
4872
4941
  },
4873
4942
  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,
4943
+ [vars$r.fontSize]: globalRefs$i.typography.body2.size,
4944
+ [vars$r.fontWeight]: globalRefs$i.typography.body2.weight,
4945
+ [vars$r.fontFamily]: globalRefs$i.typography.body2.font,
4877
4946
  },
4878
4947
  },
4879
4948
 
4880
4949
  textAlign: {
4881
- right: { [vars$q.textAlign]: 'right' },
4882
- left: { [vars$q.textAlign]: 'left' },
4883
- center: { [vars$q.textAlign]: 'center' },
4950
+ right: { [vars$r.textAlign]: 'right' },
4951
+ left: { [vars$r.textAlign]: 'left' },
4952
+ center: { [vars$r.textAlign]: 'center' },
4884
4953
  },
4885
4954
 
4886
4955
  _fullWidth: {
4887
- [vars$q.hostWidth]: '100%',
4956
+ [vars$r.hostWidth]: '100%',
4888
4957
  },
4889
4958
  };
4890
4959
 
4891
4960
  var EnrichedText$1 = /*#__PURE__*/Object.freeze({
4892
4961
  __proto__: null,
4893
4962
  default: EnrichedText,
4894
- vars: vars$q
4963
+ vars: vars$r
4895
4964
  });
4896
4965
 
4897
4966
  const globalRefs$h = getThemeRefs(globals);
4898
- const vars$p = LinkClass.cssVarList;
4967
+ const vars$q = LinkClass.cssVarList;
4899
4968
 
4900
4969
  const link = {
4901
- [vars$p.hostDirection]: globalRefs$h.direction,
4902
- [vars$p.cursor]: 'pointer',
4970
+ [vars$q.hostDirection]: globalRefs$h.direction,
4971
+ [vars$q.cursor]: 'pointer',
4903
4972
 
4904
- [vars$p.textColor]: globalRefs$h.colors.primary.main,
4973
+ [vars$q.textColor]: globalRefs$h.colors.primary.main,
4905
4974
 
4906
4975
  textAlign: {
4907
- right: { [vars$p.textAlign]: 'right' },
4908
- left: { [vars$p.textAlign]: 'left' },
4909
- center: { [vars$p.textAlign]: 'center' },
4976
+ right: { [vars$q.textAlign]: 'right' },
4977
+ left: { [vars$q.textAlign]: 'left' },
4978
+ center: { [vars$q.textAlign]: 'center' },
4910
4979
  },
4911
4980
 
4912
4981
  _fullWidth: {
4913
- [vars$p.hostWidth]: '100%',
4982
+ [vars$q.hostWidth]: '100%',
4914
4983
  },
4915
4984
 
4916
4985
  mode: {
4917
4986
  primary: {
4918
- [vars$p.textColor]: globalRefs$h.colors.primary.main,
4987
+ [vars$q.textColor]: globalRefs$h.colors.primary.main,
4919
4988
  },
4920
4989
  secondary: {
4921
- [vars$p.textColor]: globalRefs$h.colors.secondary.main,
4990
+ [vars$q.textColor]: globalRefs$h.colors.secondary.main,
4922
4991
  },
4923
4992
  error: {
4924
- [vars$p.textColor]: globalRefs$h.colors.error.main,
4993
+ [vars$q.textColor]: globalRefs$h.colors.error.main,
4925
4994
  },
4926
4995
  success: {
4927
- [vars$p.textColor]: globalRefs$h.colors.success.main,
4996
+ [vars$q.textColor]: globalRefs$h.colors.success.main,
4928
4997
  },
4929
4998
  },
4930
4999
  };
@@ -4932,7 +5001,7 @@ const link = {
4932
5001
  var link$1 = /*#__PURE__*/Object.freeze({
4933
5002
  __proto__: null,
4934
5003
  default: link,
4935
- vars: vars$p
5004
+ vars: vars$q
4936
5005
  });
4937
5006
 
4938
5007
  const componentName$x = getComponentName('divider');
@@ -5074,7 +5143,7 @@ const divider = {
5074
5143
  },
5075
5144
  };
5076
5145
 
5077
- const vars$o = {
5146
+ const vars$p = {
5078
5147
  ...compVars$3,
5079
5148
  ...helperVars$1,
5080
5149
  };
@@ -5082,7 +5151,7 @@ const vars$o = {
5082
5151
  var divider$1 = /*#__PURE__*/Object.freeze({
5083
5152
  __proto__: null,
5084
5153
  default: divider,
5085
- vars: vars$o
5154
+ vars: vars$p
5086
5155
  });
5087
5156
 
5088
5157
  /* eslint-disable no-param-reassign */
@@ -5317,45 +5386,45 @@ const PasscodeClass = compose(
5317
5386
  })
5318
5387
  );
5319
5388
 
5320
- const vars$n = PasscodeClass.cssVarList;
5389
+ const vars$o = PasscodeClass.cssVarList;
5321
5390
 
5322
5391
  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,
5392
+ [vars$o.hostDirection]: refs.direction,
5393
+ [vars$o.fontFamily]: refs.fontFamily,
5394
+ [vars$o.fontSize]: refs.fontSize,
5395
+ [vars$o.labelTextColor]: refs.labelTextColor,
5396
+ [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
5397
+ [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
5398
+ [vars$o.digitValueTextColor]: refs.valueTextColor,
5399
+ [vars$o.digitPadding]: '0',
5400
+ [vars$o.digitTextAlign]: 'center',
5401
+ [vars$o.digitSpacing]: '4px',
5402
+ [vars$o.hostWidth]: refs.width,
5403
+ [vars$o.digitOutlineColor]: 'transparent',
5404
+ [vars$o.digitOutlineWidth]: refs.outlineWidth,
5405
+ [vars$o.focusedDigitFieldOutlineColor]: refs.outlineColor,
5406
+ [vars$o.digitSize]: refs.inputHeight,
5338
5407
 
5339
5408
  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' },
5409
+ xs: { [vars$o.spinnerSize]: '15px' },
5410
+ sm: { [vars$o.spinnerSize]: '20px' },
5411
+ md: { [vars$o.spinnerSize]: '20px' },
5412
+ lg: { [vars$o.spinnerSize]: '20px' },
5344
5413
  },
5345
5414
 
5346
5415
  _hideCursor: {
5347
- [vars$n.digitCaretTextColor]: 'transparent',
5416
+ [vars$o.digitCaretTextColor]: 'transparent',
5348
5417
  },
5349
5418
 
5350
5419
  _loading: {
5351
- [vars$n.overlayOpacity]: refs.overlayOpacity,
5420
+ [vars$o.overlayOpacity]: refs.overlayOpacity,
5352
5421
  },
5353
5422
  };
5354
5423
 
5355
5424
  var passcode$1 = /*#__PURE__*/Object.freeze({
5356
5425
  __proto__: null,
5357
5426
  default: passcode,
5358
- vars: vars$n
5427
+ vars: vars$o
5359
5428
  });
5360
5429
 
5361
5430
  const componentName$t = getComponentName('loader-linear');
@@ -5424,48 +5493,48 @@ const LoaderLinearClass = compose(
5424
5493
  )(RawLoaderLinear);
5425
5494
 
5426
5495
  const globalRefs$f = getThemeRefs(globals);
5427
- const vars$m = LoaderLinearClass.cssVarList;
5496
+ const vars$n = LoaderLinearClass.cssVarList;
5428
5497
 
5429
5498
  const loaderLinear = {
5430
- [vars$m.hostDisplay]: 'inline-block',
5431
- [vars$m.hostWidth]: '100%',
5499
+ [vars$n.hostDisplay]: 'inline-block',
5500
+ [vars$n.hostWidth]: '100%',
5432
5501
 
5433
- [vars$m.barColor]: globalRefs$f.colors.surface.contrast,
5434
- [vars$m.barWidth]: '20%',
5502
+ [vars$n.barColor]: globalRefs$f.colors.surface.contrast,
5503
+ [vars$n.barWidth]: '20%',
5435
5504
 
5436
- [vars$m.barBackgroundColor]: globalRefs$f.colors.surface.light,
5437
- [vars$m.barBorderRadius]: '4px',
5505
+ [vars$n.barBackgroundColor]: globalRefs$f.colors.surface.light,
5506
+ [vars$n.barBorderRadius]: '4px',
5438
5507
 
5439
- [vars$m.animationDuration]: '2s',
5440
- [vars$m.animationTimingFunction]: 'linear',
5441
- [vars$m.animationIterationCount]: 'infinite',
5442
- [vars$m.verticalPadding]: '0.25em',
5508
+ [vars$n.animationDuration]: '2s',
5509
+ [vars$n.animationTimingFunction]: 'linear',
5510
+ [vars$n.animationIterationCount]: 'infinite',
5511
+ [vars$n.verticalPadding]: '0.25em',
5443
5512
 
5444
5513
  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' },
5514
+ xs: { [vars$n.barHeight]: '2px' },
5515
+ sm: { [vars$n.barHeight]: '4px' },
5516
+ md: { [vars$n.barHeight]: '6px' },
5517
+ lg: { [vars$n.barHeight]: '8px' },
5449
5518
  },
5450
5519
 
5451
5520
  mode: {
5452
5521
  primary: {
5453
- [vars$m.barColor]: globalRefs$f.colors.primary.main,
5522
+ [vars$n.barColor]: globalRefs$f.colors.primary.main,
5454
5523
  },
5455
5524
  secondary: {
5456
- [vars$m.barColor]: globalRefs$f.colors.secondary.main,
5525
+ [vars$n.barColor]: globalRefs$f.colors.secondary.main,
5457
5526
  },
5458
5527
  },
5459
5528
 
5460
5529
  _hidden: {
5461
- [vars$m.hostDisplay]: 'none',
5530
+ [vars$n.hostDisplay]: 'none',
5462
5531
  },
5463
5532
  };
5464
5533
 
5465
5534
  var loaderLinear$1 = /*#__PURE__*/Object.freeze({
5466
5535
  __proto__: null,
5467
5536
  default: loaderLinear,
5468
- vars: vars$m
5537
+ vars: vars$n
5469
5538
  });
5470
5539
 
5471
5540
  const globalRefs$e = getThemeRefs(globals);
@@ -5512,7 +5581,7 @@ const loaderRadial = {
5512
5581
  [compVars$2.hostDisplay]: 'none',
5513
5582
  },
5514
5583
  };
5515
- const vars$l = {
5584
+ const vars$m = {
5516
5585
  ...compVars$2,
5517
5586
  ...helperVars,
5518
5587
  };
@@ -5520,7 +5589,7 @@ const vars$l = {
5520
5589
  var loaderRadial$1 = /*#__PURE__*/Object.freeze({
5521
5590
  __proto__: null,
5522
5591
  default: loaderRadial,
5523
- vars: vars$l
5592
+ vars: vars$m
5524
5593
  });
5525
5594
 
5526
5595
  const componentName$s = getComponentName('combo-box');
@@ -5912,58 +5981,58 @@ const ComboBoxClass = compose(
5912
5981
  );
5913
5982
 
5914
5983
  const globalRefs$d = getThemeRefs(globals);
5915
- const vars$k = ComboBoxClass.cssVarList;
5984
+ const vars$l = ComboBoxClass.cssVarList;
5916
5985
 
5917
5986
  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,
5987
+ [vars$l.hostWidth]: refs.width,
5988
+ [vars$l.hostDirection]: refs.direction,
5989
+ [vars$l.fontSize]: refs.fontSize,
5990
+ [vars$l.fontFamily]: refs.fontFamily,
5991
+ [vars$l.labelTextColor]: refs.labelTextColor,
5992
+ [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
5993
+ [vars$l.inputBorderColor]: refs.borderColor,
5994
+ [vars$l.inputBorderWidth]: refs.borderWidth,
5995
+ [vars$l.inputBorderStyle]: refs.borderStyle,
5996
+ [vars$l.inputBorderRadius]: refs.borderRadius,
5997
+ [vars$l.inputOutlineColor]: refs.outlineColor,
5998
+ [vars$l.inputOutlineOffset]: refs.outlineOffset,
5999
+ [vars$l.inputOutlineWidth]: refs.outlineWidth,
6000
+ [vars$l.inputOutlineStyle]: refs.outlineStyle,
6001
+ [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
6002
+ [vars$l.inputValueTextColor]: refs.valueTextColor,
6003
+ [vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
6004
+ [vars$l.inputBackgroundColor]: refs.backgroundColor,
6005
+ [vars$l.inputHorizontalPadding]: refs.horizontalPadding,
6006
+ [vars$l.inputHeight]: refs.inputHeight,
6007
+ [vars$l.inputDropdownButtonColor]: globalRefs$d.colors.surface.dark,
6008
+ [vars$l.inputDropdownButtonCursor]: 'pointer',
6009
+ [vars$l.inputDropdownButtonSize]: refs.toggleButtonSize,
6010
+ [vars$l.inputDropdownButtonOffset]: globalRefs$d.spacing.xs,
6011
+ [vars$l.overlayItemPaddingInlineStart]: globalRefs$d.spacing.xs,
6012
+ [vars$l.overlayItemPaddingInlineEnd]: globalRefs$d.spacing.lg,
5944
6013
 
5945
6014
  _readonly: {
5946
- [vars$k.inputDropdownButtonCursor]: 'default',
6015
+ [vars$l.inputDropdownButtonCursor]: 'default',
5947
6016
  },
5948
6017
 
5949
6018
  // 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,
6019
+ [vars$l.overlayFontSize]: refs.fontSize,
6020
+ [vars$l.overlayFontFamily]: refs.fontFamily,
6021
+ [vars$l.overlayCursor]: 'pointer',
6022
+ [vars$l.overlayItemBoxShadow]: 'none',
6023
+ [vars$l.overlayBackground]: refs.backgroundColor,
6024
+ [vars$l.overlayTextColor]: refs.valueTextColor,
5956
6025
 
5957
6026
  // Overlay direct theme:
5958
- [vars$k.overlay.minHeight]: '400px',
5959
- [vars$k.overlay.margin]: '0',
6027
+ [vars$l.overlay.minHeight]: '400px',
6028
+ [vars$l.overlay.margin]: '0',
5960
6029
  };
5961
6030
 
5962
6031
  var comboBox$1 = /*#__PURE__*/Object.freeze({
5963
6032
  __proto__: null,
5964
6033
  comboBox: comboBox,
5965
6034
  default: comboBox,
5966
- vars: vars$k
6035
+ vars: vars$l
5967
6036
  });
5968
6037
 
5969
6038
  const observedAttributes$2 = ['src', 'alt'];
@@ -6010,14 +6079,14 @@ const ImageClass = compose(
6010
6079
  draggableMixin
6011
6080
  )(RawImage);
6012
6081
 
6013
- const vars$j = ImageClass.cssVarList;
6082
+ const vars$k = ImageClass.cssVarList;
6014
6083
 
6015
6084
  const image = {};
6016
6085
 
6017
6086
  var image$1 = /*#__PURE__*/Object.freeze({
6018
6087
  __proto__: null,
6019
6088
  default: image,
6020
- vars: vars$j
6089
+ vars: vars$k
6021
6090
  });
6022
6091
 
6023
6092
  var CountryCodes = [
@@ -7465,29 +7534,29 @@ const PhoneFieldClass = compose(
7465
7534
  })
7466
7535
  );
7467
7536
 
7468
- const vars$i = PhoneFieldClass.cssVarList;
7537
+ const vars$j = PhoneFieldClass.cssVarList;
7469
7538
 
7470
7539
  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',
7540
+ [vars$j.hostWidth]: refs.width,
7541
+ [vars$j.hostDirection]: refs.direction,
7542
+ [vars$j.fontSize]: refs.fontSize,
7543
+ [vars$j.fontFamily]: refs.fontFamily,
7544
+ [vars$j.labelTextColor]: refs.labelTextColor,
7545
+ [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
7546
+ [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
7547
+ [vars$j.inputValueTextColor]: refs.valueTextColor,
7548
+ [vars$j.inputPlaceholderTextColor]: refs.placeholderTextColor,
7549
+ [vars$j.inputBorderStyle]: refs.borderStyle,
7550
+ [vars$j.inputBorderWidth]: refs.borderWidth,
7551
+ [vars$j.inputBorderColor]: refs.borderColor,
7552
+ [vars$j.inputBorderRadius]: refs.borderRadius,
7553
+ [vars$j.inputOutlineStyle]: refs.outlineStyle,
7554
+ [vars$j.inputOutlineWidth]: refs.outlineWidth,
7555
+ [vars$j.inputOutlineColor]: refs.outlineColor,
7556
+ [vars$j.inputOutlineOffset]: refs.outlineOffset,
7557
+ [vars$j.phoneInputWidth]: refs.minWidth,
7558
+ [vars$j.countryCodeInputWidth]: '5em',
7559
+ [vars$j.countryCodeDropdownWidth]: '20em',
7491
7560
 
7492
7561
  // '@overlay': {
7493
7562
  // overlayItemBackgroundColor: 'red'
@@ -7497,7 +7566,7 @@ const phoneField = {
7497
7566
  var phoneField$1 = /*#__PURE__*/Object.freeze({
7498
7567
  __proto__: null,
7499
7568
  default: phoneField,
7500
- vars: vars$i
7569
+ vars: vars$j
7501
7570
  });
7502
7571
 
7503
7572
  const componentName$o = getComponentName('phone-field-internal-input-box');
@@ -7665,36 +7734,36 @@ const PhoneFieldInputBoxClass = compose(
7665
7734
  })
7666
7735
  );
7667
7736
 
7668
- const vars$h = PhoneFieldInputBoxClass.cssVarList;
7737
+ const vars$i = PhoneFieldInputBoxClass.cssVarList;
7669
7738
 
7670
7739
  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,
7740
+ [vars$i.hostWidth]: '16em',
7741
+ [vars$i.hostMinWidth]: refs.minWidth,
7742
+ [vars$i.hostDirection]: refs.direction,
7743
+ [vars$i.fontSize]: refs.fontSize,
7744
+ [vars$i.fontFamily]: refs.fontFamily,
7745
+ [vars$i.labelTextColor]: refs.labelTextColor,
7746
+ [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
7747
+ [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
7748
+ [vars$i.inputValueTextColor]: refs.valueTextColor,
7749
+ [vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
7750
+ [vars$i.inputBorderStyle]: refs.borderStyle,
7751
+ [vars$i.inputBorderWidth]: refs.borderWidth,
7752
+ [vars$i.inputBorderColor]: refs.borderColor,
7753
+ [vars$i.inputBorderRadius]: refs.borderRadius,
7754
+ [vars$i.inputOutlineStyle]: refs.outlineStyle,
7755
+ [vars$i.inputOutlineWidth]: refs.outlineWidth,
7756
+ [vars$i.inputOutlineColor]: refs.outlineColor,
7757
+ [vars$i.inputOutlineOffset]: refs.outlineOffset,
7689
7758
  _fullWidth: {
7690
- [vars$h.hostWidth]: refs.width,
7759
+ [vars$i.hostWidth]: refs.width,
7691
7760
  },
7692
7761
  };
7693
7762
 
7694
7763
  var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
7695
7764
  __proto__: null,
7696
7765
  default: phoneInputBoxField,
7697
- vars: vars$h
7766
+ vars: vars$i
7698
7767
  });
7699
7768
 
7700
7769
  const componentName$m = getComponentName('new-password-internal');
@@ -8076,31 +8145,31 @@ const NewPasswordClass = compose(
8076
8145
  );
8077
8146
 
8078
8147
  const globalRefs$c = getThemeRefs(globals);
8079
- const vars$g = NewPasswordClass.cssVarList;
8148
+ const vars$h = NewPasswordClass.cssVarList;
8080
8149
 
8081
8150
  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,
8151
+ [vars$h.hostWidth]: refs.width,
8152
+ [vars$h.hostMinWidth]: refs.minWidth,
8153
+ [vars$h.hostDirection]: refs.direction,
8154
+ [vars$h.fontSize]: refs.fontSize,
8155
+ [vars$h.fontFamily]: refs.fontFamily,
8156
+ [vars$h.spaceBetweenInputs]: '1em',
8157
+ [vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
8158
+ [vars$h.policyPreviewBackgroundColor]: 'none',
8159
+ [vars$h.policyPreviewPadding]: globalRefs$c.spacing.lg,
8091
8160
 
8092
8161
  _required: {
8093
8162
  // NewPassword doesn't pass `required` attribute to its Password components.
8094
8163
  // That's why we fake the required indicator on each input.
8095
8164
  // 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
8165
+ [vars$h.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
8097
8166
  },
8098
8167
  };
8099
8168
 
8100
8169
  var newPassword$1 = /*#__PURE__*/Object.freeze({
8101
8170
  __proto__: null,
8102
8171
  default: newPassword,
8103
- vars: vars$g
8172
+ vars: vars$h
8104
8173
  });
8105
8174
 
8106
8175
  const getFileBase64 = (fileObj) => {
@@ -8302,7 +8371,7 @@ class RawUploadFile extends BaseInputClass {
8302
8371
  }
8303
8372
 
8304
8373
  const buttonVars = ButtonClass.cssVarList;
8305
- const { host: host$8, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
8374
+ const { host: host$8, wrapper, icon: icon$2, title, description, requiredIndicator: requiredIndicator$2 } = {
8306
8375
  host: { selector: () => ':host' },
8307
8376
  wrapper: { selector: () => ':host > div' },
8308
8377
  icon: { selector: () => '::slotted(*)' },
@@ -8337,7 +8406,7 @@ const UploadFileClass = compose(
8337
8406
  { ...title, property: 'color' },
8338
8407
  { ...description, property: 'color' },
8339
8408
  ],
8340
- iconSize: { ...icon, property: 'width' },
8409
+ iconSize: { ...icon$2, property: 'width' },
8341
8410
  requiredIndicator: { ...requiredIndicator$2, property: 'content' },
8342
8411
  },
8343
8412
  }),
@@ -8345,71 +8414,71 @@ const UploadFileClass = compose(
8345
8414
  componentNameValidationMixin
8346
8415
  )(RawUploadFile);
8347
8416
 
8348
- const vars$f = UploadFileClass.cssVarList;
8417
+ const vars$g = UploadFileClass.cssVarList;
8349
8418
 
8350
8419
  const uploadFile = {
8351
- [vars$f.hostDirection]: refs.direction,
8352
- [vars$f.labelTextColor]: refs.labelTextColor,
8353
- [vars$f.fontFamily]: refs.fontFamily,
8420
+ [vars$g.hostDirection]: refs.direction,
8421
+ [vars$g.labelTextColor]: refs.labelTextColor,
8422
+ [vars$g.fontFamily]: refs.fontFamily,
8354
8423
 
8355
- [vars$f.iconSize]: '2em',
8424
+ [vars$g.iconSize]: '2em',
8356
8425
 
8357
- [vars$f.hostPadding]: '0.75em',
8358
- [vars$f.gap]: '0.5em',
8426
+ [vars$g.hostPadding]: '0.75em',
8427
+ [vars$g.gap]: '0.5em',
8359
8428
 
8360
- [vars$f.fontSize]: '16px',
8361
- [vars$f.titleFontWeight]: '500',
8362
- [vars$f.lineHeight]: '1em',
8429
+ [vars$g.fontSize]: '16px',
8430
+ [vars$g.titleFontWeight]: '500',
8431
+ [vars$g.lineHeight]: '1em',
8363
8432
 
8364
- [vars$f.borderWidth]: refs.borderWidth,
8365
- [vars$f.borderColor]: refs.borderColor,
8366
- [vars$f.borderRadius]: refs.borderRadius,
8367
- [vars$f.borderStyle]: 'dashed',
8433
+ [vars$g.borderWidth]: refs.borderWidth,
8434
+ [vars$g.borderColor]: refs.borderColor,
8435
+ [vars$g.borderRadius]: refs.borderRadius,
8436
+ [vars$g.borderStyle]: 'dashed',
8368
8437
 
8369
8438
  _required: {
8370
- [vars$f.requiredIndicator]: refs.requiredIndicator,
8439
+ [vars$g.requiredIndicator]: refs.requiredIndicator,
8371
8440
  },
8372
8441
 
8373
8442
  size: {
8374
8443
  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',
8444
+ [vars$g.hostHeight]: '196px',
8445
+ [vars$g.hostWidth]: '200px',
8446
+ [vars$g.titleFontSize]: '0.875em',
8447
+ [vars$g.descriptionFontSize]: '0.875em',
8448
+ [vars$g.lineHeight]: '1.25em',
8380
8449
  },
8381
8450
  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',
8451
+ [vars$g.hostHeight]: '216px',
8452
+ [vars$g.hostWidth]: '230px',
8453
+ [vars$g.titleFontSize]: '1em',
8454
+ [vars$g.descriptionFontSize]: '0.875em',
8455
+ [vars$g.lineHeight]: '1.25em',
8387
8456
  },
8388
8457
  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',
8458
+ [vars$g.hostHeight]: '256px',
8459
+ [vars$g.hostWidth]: '312px',
8460
+ [vars$g.titleFontSize]: '1.125em',
8461
+ [vars$g.descriptionFontSize]: '1em',
8462
+ [vars$g.lineHeight]: '1.5em',
8394
8463
  },
8395
8464
  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',
8465
+ [vars$g.hostHeight]: '280px',
8466
+ [vars$g.hostWidth]: '336px',
8467
+ [vars$g.titleFontSize]: '1.125em',
8468
+ [vars$g.descriptionFontSize]: '1.125em',
8469
+ [vars$g.lineHeight]: '1.75em',
8401
8470
  },
8402
8471
  },
8403
8472
 
8404
8473
  _fullWidth: {
8405
- [vars$f.hostWidth]: refs.width,
8474
+ [vars$g.hostWidth]: refs.width,
8406
8475
  },
8407
8476
  };
8408
8477
 
8409
8478
  var uploadFile$1 = /*#__PURE__*/Object.freeze({
8410
8479
  __proto__: null,
8411
8480
  default: uploadFile,
8412
- vars: vars$f
8481
+ vars: vars$g
8413
8482
  });
8414
8483
 
8415
8484
  const componentName$i = getComponentName('button-selection-group-item');
@@ -8524,37 +8593,37 @@ const ButtonSelectionGroupItemClass = compose(
8524
8593
 
8525
8594
  const globalRefs$b = getThemeRefs(globals);
8526
8595
 
8527
- const vars$e = ButtonSelectionGroupItemClass.cssVarList;
8596
+ const vars$f = ButtonSelectionGroupItemClass.cssVarList;
8528
8597
 
8529
8598
  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,
8599
+ [vars$f.hostDirection]: 'inherit',
8600
+ [vars$f.backgroundColor]: globalRefs$b.colors.surface.main,
8601
+ [vars$f.labelTextColor]: globalRefs$b.colors.surface.contrast,
8602
+ [vars$f.borderColor]: globalRefs$b.colors.surface.light,
8603
+ [vars$f.borderStyle]: 'solid',
8604
+ [vars$f.borderRadius]: globalRefs$b.radius.sm,
8605
+ [vars$f.outlineColor]: 'transparent',
8606
+ [vars$f.borderWidth]: globalRefs$b.border.xs,
8538
8607
 
8539
8608
  _hover: {
8540
- [vars$e.backgroundColor]: globalRefs$b.colors.surface.highlight,
8609
+ [vars$f.backgroundColor]: globalRefs$b.colors.surface.highlight,
8541
8610
  },
8542
8611
 
8543
8612
  _focused: {
8544
- [vars$e.outlineColor]: globalRefs$b.colors.surface.light,
8613
+ [vars$f.outlineColor]: globalRefs$b.colors.surface.light,
8545
8614
  },
8546
8615
 
8547
8616
  _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,
8617
+ [vars$f.borderColor]: globalRefs$b.colors.surface.contrast,
8618
+ [vars$f.backgroundColor]: globalRefs$b.colors.surface.contrast,
8619
+ [vars$f.labelTextColor]: globalRefs$b.colors.surface.main,
8551
8620
  },
8552
8621
  };
8553
8622
 
8554
8623
  var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
8555
8624
  __proto__: null,
8556
8625
  default: buttonSelectionGroupItem,
8557
- vars: vars$e
8626
+ vars: vars$f
8558
8627
  });
8559
8628
 
8560
8629
  const createBaseButtonSelectionGroupInternalClass = (componentName) => {
@@ -8950,16 +9019,16 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
8950
9019
  [vars.hostWidth]: refs.width,
8951
9020
  });
8952
9021
 
8953
- const vars$d = ButtonSelectionGroupClass.cssVarList;
9022
+ const vars$e = ButtonSelectionGroupClass.cssVarList;
8954
9023
 
8955
9024
  const buttonSelectionGroup = {
8956
- ...createBaseButtonSelectionGroupMappings(vars$d),
9025
+ ...createBaseButtonSelectionGroupMappings(vars$e),
8957
9026
  };
8958
9027
 
8959
9028
  var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
8960
9029
  __proto__: null,
8961
9030
  default: buttonSelectionGroup,
8962
- vars: vars$d
9031
+ vars: vars$e
8963
9032
  });
8964
9033
 
8965
9034
  const componentName$f = getComponentName('button-multi-selection-group-internal');
@@ -9118,16 +9187,16 @@ const ButtonMultiSelectionGroupClass = compose(
9118
9187
  })
9119
9188
  );
9120
9189
 
9121
- const vars$c = ButtonMultiSelectionGroupClass.cssVarList;
9190
+ const vars$d = ButtonMultiSelectionGroupClass.cssVarList;
9122
9191
 
9123
9192
  const buttonMultiSelectionGroup = {
9124
- ...createBaseButtonSelectionGroupMappings(vars$c),
9193
+ ...createBaseButtonSelectionGroupMappings(vars$d),
9125
9194
  };
9126
9195
 
9127
9196
  var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
9128
9197
  __proto__: null,
9129
9198
  default: buttonMultiSelectionGroup,
9130
- vars: vars$c
9199
+ vars: vars$d
9131
9200
  });
9132
9201
 
9133
9202
  const componentName$d = getComponentName('modal');
@@ -9243,14 +9312,14 @@ const modal = {
9243
9312
  [compVars$1.overlayWidth]: '540px',
9244
9313
  };
9245
9314
 
9246
- const vars$b = {
9315
+ const vars$c = {
9247
9316
  ...compVars$1,
9248
9317
  };
9249
9318
 
9250
9319
  var modal$1 = /*#__PURE__*/Object.freeze({
9251
9320
  __proto__: null,
9252
9321
  default: modal,
9253
- vars: vars$b
9322
+ vars: vars$c
9254
9323
  });
9255
9324
 
9256
9325
  const isValidDataType = (data) => {
@@ -9504,35 +9573,35 @@ const GridClass = compose(
9504
9573
  );
9505
9574
 
9506
9575
  const globalRefs$8 = getThemeRefs(globals);
9507
- const vars$a = GridClass.cssVarList;
9576
+ const vars$b = GridClass.cssVarList;
9508
9577
 
9509
9578
  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,
9579
+ [vars$b.hostWidth]: '100%',
9580
+ [vars$b.hostHeight]: '100%',
9581
+ [vars$b.hostMinHeight]: '400px',
9582
+ [vars$b.fontWeight]: '400',
9583
+ [vars$b.backgroundColor]: globalRefs$8.colors.surface.main,
9515
9584
 
9516
- [vars$a.fontSize]: refs.fontSize,
9517
- [vars$a.fontFamily]: refs.fontFamily,
9585
+ [vars$b.fontSize]: refs.fontSize,
9586
+ [vars$b.fontFamily]: refs.fontFamily,
9518
9587
 
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,
9588
+ [vars$b.sortIndicatorsColor]: globalRefs$8.colors.surface.light,
9589
+ [vars$b.activeSortIndicator]: globalRefs$8.colors.surface.dark,
9590
+ [vars$b.resizeHandleColor]: globalRefs$8.colors.surface.light,
9522
9591
 
9523
- [vars$a.borderWidth]: refs.borderWidth,
9524
- [vars$a.borderStyle]: refs.borderStyle,
9525
- [vars$a.borderRadius]: refs.borderRadius,
9526
- [vars$a.borderColor]: 'transparent',
9592
+ [vars$b.borderWidth]: refs.borderWidth,
9593
+ [vars$b.borderStyle]: refs.borderStyle,
9594
+ [vars$b.borderRadius]: refs.borderRadius,
9595
+ [vars$b.borderColor]: 'transparent',
9527
9596
 
9528
- [vars$a.headerRowTextColor]: globalRefs$8.colors.surface.dark,
9529
- [vars$a.separatorColor]: globalRefs$8.colors.surface.light,
9597
+ [vars$b.headerRowTextColor]: globalRefs$8.colors.surface.dark,
9598
+ [vars$b.separatorColor]: globalRefs$8.colors.surface.light,
9530
9599
 
9531
- [vars$a.valueTextColor]: globalRefs$8.colors.surface.contrast,
9532
- [vars$a.selectedBackgroundColor]: globalRefs$8.colors.surface.highlight,
9600
+ [vars$b.valueTextColor]: globalRefs$8.colors.surface.contrast,
9601
+ [vars$b.selectedBackgroundColor]: globalRefs$8.colors.surface.highlight,
9533
9602
 
9534
9603
  _bordered: {
9535
- [vars$a.borderColor]: refs.borderColor,
9604
+ [vars$b.borderColor]: refs.borderColor,
9536
9605
  },
9537
9606
  };
9538
9607
 
@@ -9540,7 +9609,7 @@ var grid$1 = /*#__PURE__*/Object.freeze({
9540
9609
  __proto__: null,
9541
9610
  default: grid,
9542
9611
  grid: grid,
9543
- vars: vars$a
9612
+ vars: vars$b
9544
9613
  });
9545
9614
 
9546
9615
  const componentName$b = getComponentName('notification-card');
@@ -9656,49 +9725,49 @@ const NotificationCardClass = compose(
9656
9725
  );
9657
9726
 
9658
9727
  const globalRefs$7 = getThemeRefs(globals);
9659
- const vars$9 = NotificationCardClass.cssVarList;
9728
+ const vars$a = NotificationCardClass.cssVarList;
9660
9729
 
9661
9730
  const shadowColor = '#00000020';
9662
9731
 
9663
9732
  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,
9733
+ [vars$a.hostMinWidth]: '415px',
9734
+ [vars$a.fontFamily]: globalRefs$7.fonts.font1.family,
9735
+ [vars$a.fontSize]: globalRefs$7.typography.body1.size,
9736
+ [vars$a.backgroundColor]: globalRefs$7.colors.surface.main,
9737
+ [vars$a.textColor]: globalRefs$7.colors.surface.contrast,
9738
+ [vars$a.boxShadow]: `${globalRefs$7.shadow.wide.xl} ${shadowColor}, ${globalRefs$7.shadow.narrow.xl} ${shadowColor}`,
9739
+ [vars$a.verticalPadding]: '0.625em',
9740
+ [vars$a.horizontalPadding]: '1.5em',
9741
+ [vars$a.borderRadius]: globalRefs$7.radius.xs,
9673
9742
 
9674
9743
  _bordered: {
9675
- [vars$9.borderWidth]: globalRefs$7.border.sm,
9676
- [vars$9.borderStyle]: 'solid',
9677
- [vars$9.borderColor]: 'transparent',
9744
+ [vars$a.borderWidth]: globalRefs$7.border.sm,
9745
+ [vars$a.borderStyle]: 'solid',
9746
+ [vars$a.borderColor]: 'transparent',
9678
9747
  },
9679
9748
 
9680
9749
  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' },
9750
+ xs: { [vars$a.fontSize]: '12px' },
9751
+ sm: { [vars$a.fontSize]: '14px' },
9752
+ md: { [vars$a.fontSize]: '16px' },
9753
+ lg: { [vars$a.fontSize]: '18px' },
9685
9754
  },
9686
9755
 
9687
9756
  mode: {
9688
9757
  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,
9758
+ [vars$a.backgroundColor]: globalRefs$7.colors.primary.main,
9759
+ [vars$a.textColor]: globalRefs$7.colors.primary.contrast,
9760
+ [vars$a.borderColor]: globalRefs$7.colors.primary.light,
9692
9761
  },
9693
9762
  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,
9763
+ [vars$a.backgroundColor]: globalRefs$7.colors.success.main,
9764
+ [vars$a.textColor]: globalRefs$7.colors.success.contrast,
9765
+ [vars$a.borderColor]: globalRefs$7.colors.success.light,
9697
9766
  },
9698
9767
  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,
9768
+ [vars$a.backgroundColor]: globalRefs$7.colors.error.main,
9769
+ [vars$a.textColor]: globalRefs$7.colors.error.contrast,
9770
+ [vars$a.borderColor]: globalRefs$7.colors.error.light,
9702
9771
  },
9703
9772
  },
9704
9773
  };
@@ -9706,7 +9775,7 @@ const notification = {
9706
9775
  var notificationCard = /*#__PURE__*/Object.freeze({
9707
9776
  __proto__: null,
9708
9777
  default: notification,
9709
- vars: vars$9
9778
+ vars: vars$a
9710
9779
  });
9711
9780
 
9712
9781
  const componentName$a = getComponentName('multi-select-combo-box');
@@ -10319,62 +10388,62 @@ const MultiSelectComboBoxClass = compose(
10319
10388
  );
10320
10389
 
10321
10390
  const globalRefs$6 = getThemeRefs(globals);
10322
- const vars$8 = MultiSelectComboBoxClass.cssVarList;
10391
+ const vars$9 = MultiSelectComboBoxClass.cssVarList;
10323
10392
 
10324
10393
  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,
10394
+ [vars$9.hostWidth]: refs.width,
10395
+ [vars$9.hostDirection]: refs.direction,
10396
+ [vars$9.fontSize]: refs.fontSize,
10397
+ [vars$9.fontFamily]: refs.fontFamily,
10398
+ [vars$9.labelTextColor]: refs.labelTextColor,
10399
+ [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
10400
+ [vars$9.inputBorderColor]: refs.borderColor,
10401
+ [vars$9.inputBorderWidth]: refs.borderWidth,
10402
+ [vars$9.inputBorderStyle]: refs.borderStyle,
10403
+ [vars$9.inputBorderRadius]: refs.borderRadius,
10404
+ [vars$9.inputOutlineColor]: refs.outlineColor,
10405
+ [vars$9.inputOutlineOffset]: refs.outlineOffset,
10406
+ [vars$9.inputOutlineWidth]: refs.outlineWidth,
10407
+ [vars$9.inputOutlineStyle]: refs.outlineStyle,
10408
+ [vars$9.labelRequiredIndicator]: refs.requiredIndicator,
10409
+ [vars$9.inputValueTextColor]: refs.valueTextColor,
10410
+ [vars$9.inputPlaceholderTextColor]: refs.placeholderTextColor,
10411
+ [vars$9.inputBackgroundColor]: refs.backgroundColor,
10412
+ [vars$9.inputHorizontalPadding]: refs.horizontalPadding,
10413
+ [vars$9.inputVerticalPadding]: refs.verticalPadding,
10414
+ [vars$9.inputHeight]: refs.inputHeight,
10415
+ [vars$9.inputDropdownButtonColor]: globalRefs$6.colors.surface.dark,
10416
+ [vars$9.inputDropdownButtonCursor]: 'pointer',
10417
+ [vars$9.inputDropdownButtonSize]: refs.toggleButtonSize,
10418
+ [vars$9.inputDropdownButtonOffset]: globalRefs$6.spacing.xs,
10419
+ [vars$9.overlayItemPaddingInlineStart]: globalRefs$6.spacing.xs,
10420
+ [vars$9.overlayItemPaddingInlineEnd]: globalRefs$6.spacing.lg,
10421
+ [vars$9.chipFontSize]: refs.chipFontSize,
10422
+ [vars$9.chipTextColor]: globalRefs$6.colors.surface.contrast,
10423
+ [vars$9.chipBackgroundColor]: globalRefs$6.colors.surface.light,
10355
10424
 
10356
10425
  _readonly: {
10357
- [vars$8.inputDropdownButtonCursor]: 'default',
10426
+ [vars$9.inputDropdownButtonCursor]: 'default',
10358
10427
  },
10359
10428
 
10360
10429
  // 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,
10430
+ [vars$9.overlayFontSize]: refs.fontSize,
10431
+ [vars$9.overlayFontFamily]: refs.fontFamily,
10432
+ [vars$9.overlayCursor]: 'pointer',
10433
+ [vars$9.overlayItemBoxShadow]: 'none',
10434
+ [vars$9.overlayBackground]: refs.backgroundColor,
10435
+ [vars$9.overlayTextColor]: refs.valueTextColor,
10367
10436
 
10368
10437
  // Overlay direct theme:
10369
- [vars$8.overlay.minHeight]: '400px',
10370
- [vars$8.overlay.margin]: '0',
10438
+ [vars$9.overlay.minHeight]: '400px',
10439
+ [vars$9.overlay.margin]: '0',
10371
10440
  };
10372
10441
 
10373
10442
  var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
10374
10443
  __proto__: null,
10375
10444
  default: multiSelectComboBox,
10376
10445
  multiSelectComboBox: multiSelectComboBox,
10377
- vars: vars$8
10446
+ vars: vars$9
10378
10447
  });
10379
10448
 
10380
10449
  const componentName$9 = getComponentName('badge');
@@ -10431,65 +10500,65 @@ const BadgeClass = compose(
10431
10500
  )(RawBadge);
10432
10501
 
10433
10502
  const globalRefs$5 = getThemeRefs(globals);
10434
- const vars$7 = BadgeClass.cssVarList;
10503
+ const vars$8 = BadgeClass.cssVarList;
10435
10504
 
10436
10505
  const badge$2 = {
10437
- [vars$7.hostWidth]: 'fit-content',
10438
- [vars$7.hostDirection]: globalRefs$5.direction,
10506
+ [vars$8.hostWidth]: 'fit-content',
10507
+ [vars$8.hostDirection]: globalRefs$5.direction,
10439
10508
 
10440
- [vars$7.textAlign]: 'center',
10509
+ [vars$8.textAlign]: 'center',
10441
10510
 
10442
- [vars$7.fontFamily]: globalRefs$5.fonts.font1.family,
10443
- [vars$7.fontWeight]: '400',
10511
+ [vars$8.fontFamily]: globalRefs$5.fonts.font1.family,
10512
+ [vars$8.fontWeight]: '400',
10444
10513
 
10445
- [vars$7.verticalPadding]: '0.25em',
10446
- [vars$7.horizontalPadding]: '0.5em',
10514
+ [vars$8.verticalPadding]: '0.25em',
10515
+ [vars$8.horizontalPadding]: '0.5em',
10447
10516
 
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',
10517
+ [vars$8.borderWidth]: globalRefs$5.border.xs,
10518
+ [vars$8.borderRadius]: globalRefs$5.radius.xs,
10519
+ [vars$8.borderColor]: 'transparent',
10520
+ [vars$8.borderStyle]: 'solid',
10452
10521
 
10453
10522
  _fullWidth: {
10454
- [vars$7.hostWidth]: '100%',
10523
+ [vars$8.hostWidth]: '100%',
10455
10524
  },
10456
10525
 
10457
10526
  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' },
10527
+ xs: { [vars$8.fontSize]: '12px' },
10528
+ sm: { [vars$8.fontSize]: '14px' },
10529
+ md: { [vars$8.fontSize]: '16px' },
10530
+ lg: { [vars$8.fontSize]: '18px' },
10462
10531
  },
10463
10532
 
10464
10533
  mode: {
10465
10534
  default: {
10466
- [vars$7.textColor]: globalRefs$5.colors.surface.dark,
10535
+ [vars$8.textColor]: globalRefs$5.colors.surface.dark,
10467
10536
  _bordered: {
10468
- [vars$7.borderColor]: globalRefs$5.colors.surface.light,
10537
+ [vars$8.borderColor]: globalRefs$5.colors.surface.light,
10469
10538
  },
10470
10539
  },
10471
10540
  primary: {
10472
- [vars$7.textColor]: globalRefs$5.colors.primary.main,
10541
+ [vars$8.textColor]: globalRefs$5.colors.primary.main,
10473
10542
  _bordered: {
10474
- [vars$7.borderColor]: globalRefs$5.colors.primary.light,
10543
+ [vars$8.borderColor]: globalRefs$5.colors.primary.light,
10475
10544
  },
10476
10545
  },
10477
10546
  secondary: {
10478
- [vars$7.textColor]: globalRefs$5.colors.secondary.main,
10547
+ [vars$8.textColor]: globalRefs$5.colors.secondary.main,
10479
10548
  _bordered: {
10480
- [vars$7.borderColor]: globalRefs$5.colors.secondary.light,
10549
+ [vars$8.borderColor]: globalRefs$5.colors.secondary.light,
10481
10550
  },
10482
10551
  },
10483
10552
  error: {
10484
- [vars$7.textColor]: globalRefs$5.colors.error.main,
10553
+ [vars$8.textColor]: globalRefs$5.colors.error.main,
10485
10554
  _bordered: {
10486
- [vars$7.borderColor]: globalRefs$5.colors.error.light,
10555
+ [vars$8.borderColor]: globalRefs$5.colors.error.light,
10487
10556
  },
10488
10557
  },
10489
10558
  success: {
10490
- [vars$7.textColor]: globalRefs$5.colors.success.main,
10559
+ [vars$8.textColor]: globalRefs$5.colors.success.main,
10491
10560
  _bordered: {
10492
- [vars$7.borderColor]: globalRefs$5.colors.success.light,
10561
+ [vars$8.borderColor]: globalRefs$5.colors.success.light,
10493
10562
  },
10494
10563
  },
10495
10564
  },
@@ -10498,7 +10567,7 @@ const badge$2 = {
10498
10567
  var badge$3 = /*#__PURE__*/Object.freeze({
10499
10568
  __proto__: null,
10500
10569
  default: badge$2,
10501
- vars: vars$7
10570
+ vars: vars$8
10502
10571
  });
10503
10572
 
10504
10573
  const componentName$8 = getComponentName('avatar');
@@ -10636,14 +10705,14 @@ const avatar = {
10636
10705
  },
10637
10706
  };
10638
10707
 
10639
- const vars$6 = {
10708
+ const vars$7 = {
10640
10709
  ...compVars,
10641
10710
  };
10642
10711
 
10643
10712
  var avatar$1 = /*#__PURE__*/Object.freeze({
10644
10713
  __proto__: null,
10645
10714
  default: avatar,
10646
- vars: vars$6
10715
+ vars: vars$7
10647
10716
  });
10648
10717
 
10649
10718
  const componentName$7 = getComponentName('mappings-field-internal');
@@ -10821,32 +10890,32 @@ const MappingsFieldClass = compose(
10821
10890
 
10822
10891
  const globalRefs$3 = getThemeRefs(globals);
10823
10892
 
10824
- const vars$5 = MappingsFieldClass.cssVarList;
10893
+ const vars$6 = MappingsFieldClass.cssVarList;
10825
10894
 
10826
10895
  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',
10896
+ [vars$6.hostWidth]: refs.width,
10897
+ [vars$6.hostDirection]: refs.direction,
10898
+ [vars$6.fontSize]: refs.fontSize,
10899
+ [vars$6.fontFamily]: refs.fontFamily,
10900
+ [vars$6.separatorFontSize]: '14px',
10901
+ [vars$6.labelsFontSize]: '14px',
10902
+ [vars$6.labelsLineHeight]: '1',
10903
+ [vars$6.labelsMarginBottom]: '6px',
10904
+ [vars$6.labelTextColor]: refs.labelTextColor,
10905
+ [vars$6.itemMarginBottom]: '1em',
10837
10906
  // To be positioned correctly, the min width has to match the text field min width
10838
- [vars$5.valueLabelMinWidth]: refs.minWidth,
10907
+ [vars$6.valueLabelMinWidth]: refs.minWidth,
10839
10908
  // 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',
10909
+ [vars$6.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$3.border.xs})`,
10910
+ [vars$6.separatorWidth]: '70px',
10911
+ [vars$6.removeButtonWidth]: '60px',
10843
10912
  };
10844
10913
 
10845
10914
  var mappingsField$1 = /*#__PURE__*/Object.freeze({
10846
10915
  __proto__: null,
10847
10916
  default: mappingsField,
10848
10917
  mappingsField: mappingsField,
10849
- vars: vars$5
10918
+ vars: vars$6
10850
10919
  });
10851
10920
 
10852
10921
  var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
@@ -11086,24 +11155,24 @@ const UserAttributeClass = compose(
11086
11155
  )(RawUserAttribute);
11087
11156
 
11088
11157
  const globalRefs$2 = getThemeRefs(globals);
11089
- const vars$4 = UserAttributeClass.cssVarList;
11158
+ const vars$5 = UserAttributeClass.cssVarList;
11090
11159
 
11091
11160
  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',
11161
+ [vars$5.hostDirection]: globalRefs$2.direction,
11162
+ [vars$5.labelTextWidth]: '150px',
11163
+ [vars$5.valueTextWidth]: '200px',
11164
+ [vars$5.badgeMaxWidth]: '85px',
11165
+ [vars$5.itemsGap]: '16px',
11166
+ [vars$5.hostMinWidth]: '530px',
11098
11167
  _fullWidth: {
11099
- [vars$4.hostWidth]: '100%',
11168
+ [vars$5.hostWidth]: '100%',
11100
11169
  },
11101
11170
  };
11102
11171
 
11103
11172
  var userAttribute$1 = /*#__PURE__*/Object.freeze({
11104
11173
  __proto__: null,
11105
11174
  default: userAttribute,
11106
- vars: vars$4
11175
+ vars: vars$5
11107
11176
  });
11108
11177
 
11109
11178
  var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
@@ -11303,23 +11372,23 @@ const UserAuthMethodClass = compose(
11303
11372
  )(RawUserAuthMethod);
11304
11373
 
11305
11374
  const globalRefs$1 = getThemeRefs(globals);
11306
- const vars$3 = UserAuthMethodClass.cssVarList;
11375
+ const vars$4 = UserAuthMethodClass.cssVarList;
11307
11376
 
11308
11377
  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',
11378
+ [vars$4.hostDirection]: globalRefs$1.direction,
11379
+ [vars$4.labelTextWidth]: '200px',
11380
+ [vars$4.itemsGap]: '16px',
11381
+ [vars$4.hostMinWidth]: '530px',
11382
+ [vars$4.iconSize]: '24px',
11314
11383
  _fullWidth: {
11315
- [vars$3.hostWidth]: '100%',
11384
+ [vars$4.hostWidth]: '100%',
11316
11385
  },
11317
11386
  };
11318
11387
 
11319
11388
  var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
11320
11389
  __proto__: null,
11321
11390
  default: userAuthMethod,
11322
- vars: vars$3
11391
+ vars: vars$4
11323
11392
  });
11324
11393
 
11325
11394
  const componentName$3 = getComponentName('saml-group-mappings-internal');
@@ -11424,46 +11493,56 @@ const SamlGroupMappingsClass = compose(
11424
11493
  })
11425
11494
  );
11426
11495
 
11427
- const vars$2 = SamlGroupMappingsClass.cssVarList;
11496
+ const vars$3 = SamlGroupMappingsClass.cssVarList;
11428
11497
 
11429
11498
  const samlGroupMappings = {
11430
- [vars$2.hostWidth]: refs.width,
11431
- [vars$2.hostDirection]: refs.direction,
11432
- [vars$2.groupNameInputMarginBottom]: '1em',
11499
+ [vars$3.hostWidth]: refs.width,
11500
+ [vars$3.hostDirection]: refs.direction,
11501
+ [vars$3.groupNameInputMarginBottom]: '1em',
11433
11502
  };
11434
11503
 
11435
11504
  var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
11436
11505
  __proto__: null,
11437
11506
  default: samlGroupMappings,
11438
11507
  samlGroupMappings: samlGroupMappings,
11439
- vars: vars$2
11508
+ vars: vars$3
11440
11509
  });
11441
11510
 
11442
11511
  const globalRefs = getThemeRefs(globals);
11443
- const vars$1 = PolicyValidationClass.cssVarList;
11512
+ const vars$2 = PolicyValidationClass.cssVarList;
11444
11513
 
11445
11514
  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,
11515
+ [vars$2.fontFamily]: refs.fontFamily,
11516
+ [vars$2.fontSize]: refs.labelFontSize,
11517
+ [vars$2.textColor]: refs.labelTextColor,
11518
+ [vars$2.borderWidth]: refs.borderWidth,
11519
+ [vars$2.borderStyle]: refs.borderStyle,
11520
+ [vars$2.borderColor]: refs.borderColor,
11521
+ [vars$2.borderRadius]: globalRefs.radius.sm,
11522
+ [vars$2.backgroundColor]: 'none',
11523
+ [vars$2.padding]: '0px',
11524
+ [vars$2.labelMargin]: globalRefs.spacing.sm,
11525
+ [vars$2.itemsSpacing]: globalRefs.spacing.lg,
11526
+ [vars$2.itemSymbolDefault]: "'\\2022'", // "•"
11527
+ [vars$2.itemSymbolSuccess]: "'\\2713'", // "✓"
11528
+ [vars$2.itemSymbolError]: "'\\2A09'", // "⨉"
11529
+ [vars$2.itemSymbolSuccessColor]: globalRefs.colors.success.main,
11530
+ [vars$2.itemSymbolErrorColor]: globalRefs.colors.error.main,
11462
11531
  };
11463
11532
 
11464
11533
  var policyValidation$1 = /*#__PURE__*/Object.freeze({
11465
11534
  __proto__: null,
11466
11535
  default: policyValidation,
11536
+ vars: vars$2
11537
+ });
11538
+
11539
+ const vars$1 = IconClass.cssVarList;
11540
+
11541
+ const icon = {};
11542
+
11543
+ var icon$1 = /*#__PURE__*/Object.freeze({
11544
+ __proto__: null,
11545
+ default: icon,
11467
11546
  vars: vars$1
11468
11547
  });
11469
11548
 
@@ -11508,6 +11587,7 @@ const components = {
11508
11587
  userAuthMethod: userAuthMethod$1,
11509
11588
  samlGroupMappings: samlGroupMappings$1,
11510
11589
  policyValidation: policyValidation$1,
11590
+ icon: icon$1,
11511
11591
  };
11512
11592
 
11513
11593
  const theme = Object.keys(components).reduce(
@@ -11520,7 +11600,7 @@ const vars = Object.keys(components).reduce(
11520
11600
  );
11521
11601
 
11522
11602
  const defaultTheme = { globals, components: theme };
11523
- const themeVars = { globals: vars$F, components: vars };
11603
+ const themeVars = { globals: vars$G, components: vars };
11524
11604
 
11525
11605
  const colors = {
11526
11606
  surface: {