@descope/web-components-ui 1.0.306 → 1.0.308

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