@descope/web-components-ui 1.0.306 → 1.0.307

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