@descope/web-components-ui 1.0.91 → 1.0.93

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.
package/dist/index.esm.js CHANGED
@@ -1041,47 +1041,63 @@ const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatching
1041
1041
 
1042
1042
  const componentName$o = getComponentName('button');
1043
1043
 
1044
- const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
1045
1044
  const resetStyles = `
1046
1045
  :host {
1047
1046
  display: inline-block;
1048
1047
  }
1049
- vaadin-button { margin: 0; }
1048
+ vaadin-button {
1049
+ margin: 0;
1050
+ min-width: 0;
1051
+ width: 100%;
1052
+ height: auto;
1053
+ }
1054
+ vaadin-button::part(label) {
1055
+ padding: 0;
1056
+ }
1050
1057
  vaadin-button::part(prefix) {
1051
1058
  margin-left: 0;
1052
1059
  margin-right: 0;
1053
1060
  }
1054
1061
  `;
1062
+
1055
1063
  const iconStyles = `
1056
1064
  vaadin-button::part(prefix),
1057
1065
  vaadin-button::part(label) {
1058
1066
  display: flex;
1059
1067
  justify-content: center;
1060
1068
  align-items: center;
1061
- gap: 5px;
1062
1069
  }
1063
1070
  `;
1064
1071
 
1065
- const { label: label$6, host: host$9 } = {
1072
+ const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
1073
+
1074
+ const { host: host$9, label: label$6 } = {
1075
+ host: { selector: () => ':host' },
1066
1076
  label: { selector: '::part(label)' },
1067
- host: { selector: () => ':host' }
1068
1077
  };
1069
1078
 
1070
1079
  const Button = compose(
1071
1080
  createStyleMixin({
1072
1081
  mappings: {
1082
+ color: {},
1083
+ textDecoration: label$6,
1084
+ fontSize: {},
1085
+ cursor: {},
1073
1086
  backgroundColor: {},
1074
1087
  borderRadius: {},
1075
- color: label$6,
1076
1088
  borderColor: {},
1077
1089
  borderStyle: {},
1078
1090
  borderWidth: {},
1079
- fontSize: {},
1080
- height: {},
1081
1091
  width: host$9,
1082
- cursor: {},
1083
- padding: label$6,
1084
- textDecoration: label$6
1092
+ gap: label$6,
1093
+ verticalPadding: [
1094
+ { property: 'padding-top' },
1095
+ { property: 'padding-bottom' },
1096
+ ],
1097
+ horizontalPadding: [
1098
+ { property: 'padding-left' },
1099
+ { property: 'padding-right' },
1100
+ ]
1085
1101
  }
1086
1102
  }),
1087
1103
  draggableMixin,
@@ -1090,44 +1106,44 @@ const Button = compose(
1090
1106
  createProxy({
1091
1107
  slots: ['prefix', 'label', 'suffix'],
1092
1108
  wrappedEleName: 'vaadin-button',
1093
- style: () =>
1094
- `${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
1109
+ style: () => `
1110
+ ${resetStyles}
1111
+ ${iconStyles}
1112
+ ${loadingIndicatorStyles}
1113
+ ${editorOverrides}
1114
+ `,
1095
1115
  excludeAttrsSync: ['tabindex'],
1096
1116
  componentName: componentName$o
1097
1117
  })
1098
1118
  );
1099
1119
 
1120
+ const { color, fontSize } = Button.cssVarList;
1100
1121
  const loadingIndicatorStyles = `
1101
1122
  @keyframes spin {
1102
1123
  0% { -webkit-transform: rotate(0deg); }
1103
1124
  100% { -webkit-transform: rotate(360deg); }
1104
1125
  }
1105
1126
  :host([loading="true"]) ::before {
1106
- --marginRatio: 1.35;
1107
- color: var(${Button.cssVarList.color});
1108
1127
  animation: spin 2s linear infinite;
1109
1128
  position: absolute;
1110
- top: calc(50% - calc((var(${Button.cssVarList.height}) / var(--marginRatio)) / 2));
1111
- left: calc(50% - calc((var(${Button.cssVarList.height}) / var(--marginRatio)) / 2));
1112
1129
  content: '';
1113
1130
  z-index: 1;
1114
1131
  box-sizing: border-box;
1115
1132
  border-radius: 50%;
1116
1133
  border-bottom-color: transparent;
1117
1134
  border-left-color: transparent;
1118
- border-width: calc(var(${Button.cssVarList.height}) / 12);
1119
1135
  border-style: solid;
1120
- width: calc(var(${Button.cssVarList.height}) / var(--marginRatio));
1121
- height: calc(var(${Button.cssVarList.height}) / var(--marginRatio));
1136
+ color: var(${color});
1137
+ top: calc(50% - (var(${fontSize}) / 2));
1138
+ left: calc(50% - (var(${fontSize}) / 2));
1139
+ border-width: calc(var(${fontSize}) / 10);
1140
+ width: var(${fontSize});
1141
+ height: var(${fontSize});
1122
1142
  }
1123
1143
  :host([loading="true"])::part(prefix),
1124
1144
  :host([loading="true"])::part(label) {
1125
1145
  visibility: hidden;
1126
1146
  }
1127
-
1128
- vaadin-button {
1129
- width: 100%;
1130
- }
1131
1147
  `;
1132
1148
 
1133
1149
  customElements.define(componentName$o, Button);
@@ -1663,6 +1679,7 @@ const Container = compose(
1663
1679
  flexWrap: {},
1664
1680
 
1665
1681
  backgroundColor: {},
1682
+ color: {},
1666
1683
  borderRadius: {},
1667
1684
 
1668
1685
  borderColor: {},
@@ -1897,6 +1914,7 @@ overrides$4 = `
1897
1914
  vaadin-email-field {
1898
1915
  margin: 0;
1899
1916
  padding: 0;
1917
+ width: 100%;
1900
1918
  }
1901
1919
  vaadin-email-field::part(input-field) {
1902
1920
  overflow: hidden;
@@ -2368,6 +2386,7 @@ overrides$2 = `
2368
2386
  overflow: hidden;
2369
2387
  padding: 0;
2370
2388
  }
2389
+ vaadin-text-field[disabled] > input:placeholder-shown,
2371
2390
  vaadin-text-field[readonly] > input:placeholder-shown {
2372
2391
  opacity: 1;
2373
2392
  }
@@ -2487,55 +2506,56 @@ const Passcode = compose(
2487
2506
  }
2488
2507
 
2489
2508
  descope-passcode-internal {
2490
- -webkit-mask-image: none;
2491
- padding: 0;
2492
- width: 100%;
2493
- height: 100%;
2494
- min-height: initial;
2509
+ -webkit-mask-image: none;
2510
+ padding: 0;
2511
+ width: 100%;
2512
+ height: 100%;
2513
+ min-height: initial;
2495
2514
  }
2496
2515
 
2497
- descope-passcode-internal .wrapper {
2498
- box-sizing: border-box;
2499
- min-height: initial;
2500
- height: 100%;
2516
+ descope-passcode-internal .wrapper {
2517
+ box-sizing: border-box;
2518
+ min-height: initial;
2519
+ height: 100%;
2520
+ justify-content: center;
2501
2521
  }
2502
2522
 
2503
- descope-passcode-internal descope-text-field {
2504
- width: var(${textVars$1.height})
2505
- }
2523
+ descope-passcode-internal descope-text-field {
2524
+ width: var(${textVars$1.height})
2525
+ }
2506
2526
 
2507
2527
  vaadin-text-field::part(input-field) {
2508
- background-color: transparent;
2509
- padding: 0;
2510
- overflow: hidden;
2511
- -webkit-mask-image: none;
2528
+ background-color: transparent;
2529
+ padding: 0;
2530
+ overflow: hidden;
2531
+ -webkit-mask-image: none;
2512
2532
  }
2513
2533
 
2514
- vaadin-text-field {
2515
- margin: 0;
2516
- padding: 0;
2517
- width: 100%
2518
- }
2534
+ vaadin-text-field {
2535
+ margin: 0;
2536
+ padding: 0;
2537
+ width: 100%
2538
+ }
2519
2539
 
2520
- vaadin-text-field::before {
2521
- height: initial;
2522
- }
2540
+ vaadin-text-field::before {
2541
+ height: initial;
2542
+ }
2523
2543
 
2524
- vaadin-text-field[readonly] > input:placeholder-shown {
2525
- opacity: 1;
2526
- }
2527
-
2528
- vaadin-text-field::part(input-field):focus {
2529
- cursor: text;
2530
- }
2544
+ vaadin-text-field[readonly] > input:placeholder-shown {
2545
+ opacity: 1;
2546
+ }
2531
2547
 
2532
- vaadin-text-field[required]::part(required-indicator)::after {
2533
- font-size: "12px";
2534
- content: "*";
2535
- }
2536
- vaadin-text-field[readonly]::part(input-field)::after {
2537
- border: 0 solid;
2538
- }
2548
+ vaadin-text-field::part(input-field):focus {
2549
+ cursor: text;
2550
+ }
2551
+
2552
+ vaadin-text-field[required]::part(required-indicator)::after {
2553
+ font-size: "12px";
2554
+ content: "*";
2555
+ }
2556
+ vaadin-text-field[readonly]::part(input-field)::after {
2557
+ border: 0 solid;
2558
+ }
2539
2559
  `,
2540
2560
  excludeAttrsSync: ['tabindex'],
2541
2561
  componentName: componentName$8
@@ -5032,15 +5052,19 @@ const spacing = {
5032
5052
  };
5033
5053
 
5034
5054
  const border = {
5035
- sm: '1px',
5036
- md: '2px',
5037
- lg: '3px'
5055
+ xs: '1px',
5056
+ sm: '2px',
5057
+ md: '3px',
5058
+ lg: '4px',
5059
+ xl: '5px'
5038
5060
  };
5039
5061
 
5040
5062
  const radius = {
5041
- sm: '5px',
5042
- md: '25px',
5043
- lg: '50px'
5063
+ xs: '5px',
5064
+ sm: '10px',
5065
+ md: '15px',
5066
+ lg: '20px',
5067
+ xl: '25px'
5044
5068
  };
5045
5069
 
5046
5070
  const shadow = {
@@ -5070,59 +5094,50 @@ var globals = {
5070
5094
  fonts
5071
5095
  };
5072
5096
 
5073
- const globalRefs$e = getThemeRefs(globals);
5097
+ const globalRefs$f = getThemeRefs(globals);
5074
5098
  const vars$g = Button.cssVarList;
5075
5099
 
5076
5100
  const mode = {
5077
- primary: globalRefs$e.colors.primary,
5078
- secondary: globalRefs$e.colors.secondary,
5079
- success: globalRefs$e.colors.success,
5080
- error: globalRefs$e.colors.error,
5081
- surface: globalRefs$e.colors.surface
5101
+ primary: globalRefs$f.colors.primary,
5102
+ secondary: globalRefs$f.colors.secondary,
5103
+ success: globalRefs$f.colors.success,
5104
+ error: globalRefs$f.colors.error,
5105
+ surface: globalRefs$f.colors.surface
5082
5106
  };
5083
5107
 
5084
5108
  const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$o);
5085
5109
 
5110
+ const verticalPaddingRatio = 3;
5111
+ const horizontalPaddingRatio = 2;
5112
+
5086
5113
  const button = {
5087
5114
  ...helperTheme$2,
5088
- [vars$g.width]: 'fit-content',
5089
- size: {
5090
- xs: {
5091
- [vars$g.height]: '10px',
5092
- [vars$g.fontSize]: '10px',
5093
- [vars$g.padding]: `0 ${globalRefs$e.spacing.xs}`
5094
- },
5095
- sm: {
5096
- [vars$g.height]: '20px',
5097
- [vars$g.fontSize]: '10px',
5098
- [vars$g.padding]: `0 ${globalRefs$e.spacing.sm}`
5099
- },
5100
- md: {
5101
- [vars$g.height]: '30px',
5102
- [vars$g.fontSize]: '14px',
5103
- [vars$g.padding]: `0 ${globalRefs$e.spacing.md}`
5104
- },
5105
- lg: {
5106
- [vars$g.height]: '40px',
5107
- [vars$g.fontSize]: '20px',
5108
- [vars$g.padding]: `0 ${globalRefs$e.spacing.lg}`
5109
- },
5110
- xl: {
5111
- [vars$g.height]: '50px',
5112
- [vars$g.fontSize]: '25px',
5113
- [vars$g.padding]: `0 ${globalRefs$e.spacing.xl}`
5114
- }
5115
- },
5116
5115
 
5117
- [vars$g.borderRadius]: globalRefs$e.radius.lg,
5118
5116
  [vars$g.cursor]: 'pointer',
5117
+
5118
+ [vars$g.borderRadius]: globalRefs$f.radius.sm,
5119
5119
  [vars$g.borderWidth]: '2px',
5120
5120
  [vars$g.borderStyle]: 'solid',
5121
5121
  [vars$g.borderColor]: 'transparent',
5122
5122
 
5123
+ [vars$g.gap]: '0.25em',
5124
+ [vars$g.height]: '100%',
5125
+
5126
+ [vars$g.verticalPadding]: `calc(var(${vars$g.fontSize}) / ${verticalPaddingRatio})`,
5127
+ [vars$g.horizontalPadding]: `calc(var(${vars$g.fontSize}) / ${horizontalPaddingRatio})`,
5128
+
5129
+ size: {
5130
+ xs: { [vars$g.fontSize]: '12px' },
5131
+ sm: { [vars$g.fontSize]: '14px' },
5132
+ md: { [vars$g.fontSize]: '18px' },
5133
+ lg: { [vars$g.fontSize]: '22px' },
5134
+ xl: { [vars$g.fontSize]: '26px' }
5135
+ },
5136
+
5123
5137
  _fullWidth: {
5124
5138
  [vars$g.width]: '100%'
5125
5139
  },
5140
+
5126
5141
  _loading: {
5127
5142
  [vars$g.cursor]: 'wait'
5128
5143
  },
@@ -5134,33 +5149,36 @@ const button = {
5134
5149
  _hover: {
5135
5150
  [vars$g.backgroundColor]: helperRefs$2.dark
5136
5151
  },
5137
- _loading: {
5138
- [vars$g.backgroundColor]: helperRefs$2.main
5152
+ _active: {
5153
+ [vars$g.backgroundColor]: helperRefs$2.dark
5139
5154
  }
5140
5155
  },
5156
+
5141
5157
  outline: {
5142
5158
  [vars$g.color]: helperRefs$2.main,
5143
- [vars$g.borderColor]: helperRefs$2.main,
5159
+ [vars$g.borderColor]: 'currentColor',
5144
5160
  _hover: {
5145
5161
  [vars$g.color]: helperRefs$2.dark,
5146
- [vars$g.borderColor]: helperRefs$2.dark,
5147
- _error: {
5148
- [vars$g.color]: helperRefs$2.error
5149
- }
5162
+ },
5163
+ _active: {
5164
+ [vars$g.color]: helperRefs$2.light,
5150
5165
  }
5151
5166
  },
5167
+
5152
5168
  link: {
5153
5169
  [vars$g.color]: helperRefs$2.main,
5154
- [vars$g.lineHeight]: helperRefs$2.height,
5155
5170
  _hover: {
5156
5171
  [vars$g.color]: helperRefs$2.main,
5157
5172
  [vars$g.textDecoration]: 'underline'
5173
+ },
5174
+ _active: {
5175
+ [vars$g.color]: helperRefs$2.dark
5158
5176
  }
5159
5177
  }
5160
5178
  }
5161
5179
  };
5162
5180
 
5163
- const globalRefs$d = getThemeRefs(globals);
5181
+ const globalRefs$e = getThemeRefs(globals);
5164
5182
 
5165
5183
  const vars$f = TextField.cssVarList;
5166
5184
 
@@ -5169,44 +5187,44 @@ const textField = (vars) => ({
5169
5187
  xs: {
5170
5188
  [vars.height]: '14px',
5171
5189
  [vars.fontSize]: '8px',
5172
- [vars.padding]: `0 ${globalRefs$d.spacing.xs}`
5190
+ [vars.padding]: `0 ${globalRefs$e.spacing.xs}`
5173
5191
  },
5174
5192
  sm: {
5175
5193
  [vars.height]: '20px',
5176
5194
  [vars.fontSize]: '10px',
5177
- [vars.padding]: `0 ${globalRefs$d.spacing.sm}`
5195
+ [vars.padding]: `0 ${globalRefs$e.spacing.sm}`
5178
5196
  },
5179
5197
  md: {
5180
5198
  [vars.height]: '30px',
5181
5199
  [vars.fontSize]: '14px',
5182
- [vars.padding]: `0 ${globalRefs$d.spacing.md}`
5200
+ [vars.padding]: `0 ${globalRefs$e.spacing.md}`
5183
5201
  },
5184
5202
  lg: {
5185
5203
  [vars.height]: '40px',
5186
5204
  [vars.fontSize]: '20px',
5187
- [vars.padding]: `0 ${globalRefs$d.spacing.lg}`
5205
+ [vars.padding]: `0 ${globalRefs$e.spacing.lg}`
5188
5206
  },
5189
5207
  xl: {
5190
5208
  [vars.height]: '50px',
5191
5209
  [vars.fontSize]: '25px',
5192
- [vars.padding]: `0 ${globalRefs$d.spacing.xl}`
5210
+ [vars.padding]: `0 ${globalRefs$e.spacing.xl}`
5193
5211
  }
5194
5212
  },
5195
5213
 
5196
- [vars.color]: globalRefs$d.colors.surface.contrast,
5197
- [vars.placeholderColor]: globalRefs$d.colors.surface.main,
5214
+ [vars.color]: globalRefs$e.colors.surface.contrast,
5215
+ [vars.placeholderColor]: globalRefs$e.colors.surface.main,
5198
5216
 
5199
- [vars.backgroundColor]: globalRefs$d.colors.surface.light,
5217
+ [vars.backgroundColor]: globalRefs$e.colors.surface.light,
5200
5218
 
5201
5219
  [vars.borderWidth]: '1px',
5202
5220
  [vars.borderStyle]: 'solid',
5203
5221
  [vars.borderColor]: 'transparent',
5204
- [vars.borderRadius]: globalRefs$d.radius.sm,
5222
+ [vars.borderRadius]: globalRefs$e.radius.sm,
5205
5223
 
5206
5224
  _disabled: {
5207
- [vars.color]: globalRefs$d.colors.surface.dark,
5208
- [vars.placeholderColor]: globalRefs$d.colors.surface.light,
5209
- [vars.backgroundColor]: globalRefs$d.colors.surface.main
5225
+ [vars.color]: globalRefs$e.colors.surface.dark,
5226
+ [vars.placeholderColor]: globalRefs$e.colors.surface.light,
5227
+ [vars.backgroundColor]: globalRefs$e.colors.surface.main
5210
5228
  },
5211
5229
 
5212
5230
  _fullWidth: {
@@ -5216,24 +5234,24 @@ const textField = (vars) => ({
5216
5234
  _focused: {
5217
5235
  [vars.outlineWidth]: '2px',
5218
5236
  [vars.outlineStyle]: 'solid',
5219
- [vars.outlineColor]: globalRefs$d.colors.surface.main
5237
+ [vars.outlineColor]: globalRefs$e.colors.surface.main
5220
5238
  },
5221
5239
 
5222
5240
  _bordered: {
5223
- [vars.borderColor]: globalRefs$d.colors.surface.main
5241
+ [vars.borderColor]: globalRefs$e.colors.surface.main
5224
5242
  },
5225
5243
 
5226
5244
  _invalid: {
5227
- [vars.borderColor]: globalRefs$d.colors.error.main,
5228
- [vars.color]: globalRefs$d.colors.error.main,
5229
- [vars.outlineColor]: globalRefs$d.colors.error.light,
5230
- [vars.placeholderColor]: globalRefs$d.colors.error.light
5245
+ [vars.borderColor]: globalRefs$e.colors.error.main,
5246
+ [vars.color]: globalRefs$e.colors.error.main,
5247
+ [vars.outlineColor]: globalRefs$e.colors.error.light,
5248
+ [vars.placeholderColor]: globalRefs$e.colors.error.light
5231
5249
  }
5232
5250
  });
5233
5251
 
5234
5252
  var textField$1 = textField(vars$f);
5235
5253
 
5236
- const globalRefs$c = getThemeRefs(globals);
5254
+ const globalRefs$d = getThemeRefs(globals);
5237
5255
 
5238
5256
  const vars$e = PasswordField.cssVarList;
5239
5257
 
@@ -5241,11 +5259,11 @@ const passwordField = {
5241
5259
  [vars$e.wrapperBorderStyle]: 'solid',
5242
5260
  [vars$e.wrapperBorderWidth]: '1px',
5243
5261
  [vars$e.wrapperBorderColor]: 'transparent',
5244
- [vars$e.wrapperBorderRadius]: globalRefs$c.radius.sm,
5262
+ [vars$e.wrapperBorderRadius]: globalRefs$d.radius.sm,
5245
5263
 
5246
- [vars$e.labelTextColor]: globalRefs$c.colors.surface.contrast,
5247
- [vars$e.inputTextColor]: globalRefs$c.colors.surface.contrast,
5248
- [vars$e.placeholderTextColor]: globalRefs$c.colors.surface.main,
5264
+ [vars$e.labelTextColor]: globalRefs$d.colors.surface.contrast,
5265
+ [vars$e.inputTextColor]: globalRefs$d.colors.surface.contrast,
5266
+ [vars$e.placeholderTextColor]: globalRefs$d.colors.surface.main,
5249
5267
 
5250
5268
  [vars$e.pointerCursor]: 'pointer',
5251
5269
 
@@ -5276,7 +5294,7 @@ const passwordField = {
5276
5294
 
5277
5295
  _bordered: {
5278
5296
  [vars$e.padding]: `0 0.5em`,
5279
- [vars$e.wrapperBorderColor]: globalRefs$c.colors.surface.main
5297
+ [vars$e.wrapperBorderColor]: globalRefs$d.colors.surface.main
5280
5298
  },
5281
5299
 
5282
5300
  _fullWidth: {
@@ -5284,10 +5302,10 @@ const passwordField = {
5284
5302
  },
5285
5303
 
5286
5304
  _invalid: {
5287
- [vars$e.labelTextColor]: globalRefs$c.colors.error.main,
5288
- [vars$e.inputTextColor]: globalRefs$c.colors.error.main,
5289
- [vars$e.placeholderTextColor]: globalRefs$c.colors.error.light,
5290
- [vars$e.wrapperBorderColor]: globalRefs$c.colors.error.main
5305
+ [vars$e.labelTextColor]: globalRefs$d.colors.error.main,
5306
+ [vars$e.inputTextColor]: globalRefs$d.colors.error.main,
5307
+ [vars$e.placeholderTextColor]: globalRefs$d.colors.error.light,
5308
+ [vars$e.wrapperBorderColor]: globalRefs$d.colors.error.main
5291
5309
  },
5292
5310
  };
5293
5311
 
@@ -5299,15 +5317,15 @@ const emailField = {
5299
5317
  ...textField(EmailField.cssVarList)
5300
5318
  };
5301
5319
 
5302
- const globalRefs$b = getThemeRefs(globals);
5320
+ const globalRefs$c = getThemeRefs(globals);
5303
5321
  const vars$d = TextArea.cssVarList;
5304
5322
 
5305
5323
  const textArea = {
5306
- [vars$d.color]: globalRefs$b.colors.primary.main,
5307
- [vars$d.backgroundColor]: globalRefs$b.colors.surface.light,
5324
+ [vars$d.color]: globalRefs$c.colors.primary.main,
5325
+ [vars$d.backgroundColor]: globalRefs$c.colors.surface.light,
5308
5326
  [vars$d.resize]: 'vertical',
5309
5327
 
5310
- [vars$d.borderRadius]: globalRefs$b.radius.sm,
5328
+ [vars$d.borderRadius]: globalRefs$c.radius.sm,
5311
5329
  [vars$d.borderWidth]: '1px',
5312
5330
  [vars$d.borderStyle]: 'solid',
5313
5331
  [vars$d.borderColor]: 'transparent',
@@ -5317,11 +5335,11 @@ const textArea = {
5317
5335
 
5318
5336
 
5319
5337
  _bordered: {
5320
- [vars$d.borderColor]: globalRefs$b.colors.surface.main
5338
+ [vars$d.borderColor]: globalRefs$c.colors.surface.main
5321
5339
  },
5322
5340
 
5323
5341
  _focused: {
5324
- [vars$d.outlineColor]: globalRefs$b.colors.surface.main
5342
+ [vars$d.outlineColor]: globalRefs$c.colors.surface.main
5325
5343
  },
5326
5344
 
5327
5345
  _fullWidth: {
@@ -5333,26 +5351,26 @@ const textArea = {
5333
5351
  },
5334
5352
 
5335
5353
  _invalid: {
5336
- [vars$d.outlineColor]: globalRefs$b.colors.error.main
5354
+ [vars$d.outlineColor]: globalRefs$c.colors.error.main
5337
5355
  }
5338
5356
  };
5339
5357
 
5340
- const globalRefs$a = getThemeRefs(globals);
5358
+ const globalRefs$b = getThemeRefs(globals);
5341
5359
  const vars$c = Checkbox.cssVarList;
5342
5360
 
5343
5361
  const checkbox = {
5344
- [vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
5362
+ [vars$c.checkboxBackgroundColor]: globalRefs$b.colors.surface.main,
5345
5363
 
5346
5364
  [vars$c.labelFontSize]: '12px',
5347
5365
  [vars$c.labelFontWeight]: '400',
5348
- [vars$c.labelTextColor]: globalRefs$a.colors.surface.contrast,
5366
+ [vars$c.labelTextColor]: globalRefs$b.colors.surface.contrast,
5349
5367
  [vars$c.cursor]: 'pointer',
5350
5368
 
5351
5369
  [vars$c.checkboxWidth]: 'calc(1em - 2px)',
5352
5370
  [vars$c.checkboxHeight]: 'calc(1em - 2px)',
5353
5371
  [vars$c.labelMargin]: 'calc(1em + 5px)',
5354
5372
 
5355
- [vars$c.checkboxRadius]: globalRefs$a.radius.sm,
5373
+ [vars$c.checkboxRadius]: globalRefs$b.radius.sm,
5356
5374
 
5357
5375
  size: {
5358
5376
  xs: {
@@ -5387,24 +5405,24 @@ const checkbox = {
5387
5405
  },
5388
5406
 
5389
5407
  _checked: {
5390
- [vars$c.checkboxBackgroundColor]: globalRefs$a.colors.primary.main,
5391
- [vars$c.checkmarkTextColor]: globalRefs$a.colors.primary.contrast,
5408
+ [vars$c.checkboxBackgroundColor]: globalRefs$b.colors.primary.main,
5409
+ [vars$c.checkmarkTextColor]: globalRefs$b.colors.primary.contrast,
5392
5410
  },
5393
5411
 
5394
5412
  _disabled: {
5395
- [vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
5413
+ [vars$c.checkboxBackgroundColor]: globalRefs$b.colors.surface.main,
5396
5414
  },
5397
5415
 
5398
5416
  _focused: {
5399
5417
  [vars$c.checkboxOutlineWidth]: '2px',
5400
5418
  [vars$c.checkboxOutlineOffset]: '1px',
5401
- [vars$c.checkboxOutlineColor]: globalRefs$a.colors.primary.main,
5419
+ [vars$c.checkboxOutlineColor]: globalRefs$b.colors.primary.main,
5402
5420
  [vars$c.checkboxOutlineStyle]: 'solid'
5403
5421
  },
5404
5422
 
5405
5423
  _invalid: {
5406
- [vars$c.checkboxOutlineColor]: globalRefs$a.colors.error.main,
5407
- [vars$c.labelTextColor]: globalRefs$a.colors.error.main
5424
+ [vars$c.checkboxOutlineColor]: globalRefs$b.colors.error.main,
5425
+ [vars$c.labelTextColor]: globalRefs$b.colors.error.main
5408
5426
  },
5409
5427
 
5410
5428
  };
@@ -5413,7 +5431,7 @@ const knobMargin = '2px';
5413
5431
  const checkboxHeight = '1.25em';
5414
5432
  const trackBorderWidth = '2px';
5415
5433
 
5416
- const globalRefs$9 = getThemeRefs(globals);
5434
+ const globalRefs$a = getThemeRefs(globals);
5417
5435
  const vars$b = SwitchToggle.cssVarList;
5418
5436
 
5419
5437
  const switchToggle = {
@@ -5429,21 +5447,21 @@ const switchToggle = {
5429
5447
 
5430
5448
  [vars$b.trackBorderStyle]: 'solid',
5431
5449
  [vars$b.trackBorderWidth]: trackBorderWidth,
5432
- [vars$b.trackBorderColor]: globalRefs$9.colors.surface.contrast,
5450
+ [vars$b.trackBorderColor]: globalRefs$a.colors.surface.contrast,
5433
5451
 
5434
5452
  [vars$b.trackBackgroundColor]: 'none',
5435
- [vars$b.trackRadius]: globalRefs$9.radius.md,
5453
+ [vars$b.trackRadius]: globalRefs$a.radius.md,
5436
5454
  [vars$b.trackWidth]: '2.5em',
5437
5455
  [vars$b.trackHeight]: checkboxHeight,
5438
5456
 
5439
5457
  [vars$b.knobSize]: `calc(1em - ${knobMargin})`,
5440
5458
  [vars$b.knobRadius]: '50%',
5441
5459
  [vars$b.knobTopOffset]: '1px',
5442
- [vars$b.knobColor]: globalRefs$9.colors.surface.contrast,
5460
+ [vars$b.knobColor]: globalRefs$a.colors.surface.contrast,
5443
5461
  [vars$b.knobPosition]: knobMargin,
5444
5462
  [vars$b.knobTransition]: '0.3s',
5445
5463
 
5446
- [vars$b.labelTextColor]: globalRefs$9.colors.surface.contrast,
5464
+ [vars$b.labelTextColor]: globalRefs$a.colors.surface.contrast,
5447
5465
  [vars$b.labelFontWeight]: '400',
5448
5466
  [vars$b.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
5449
5467
  [vars$b.labelMargin]: '0.25em',
@@ -5453,35 +5471,35 @@ const switchToggle = {
5453
5471
  },
5454
5472
 
5455
5473
  _checked: {
5456
- [vars$b.trackBorderColor]: globalRefs$9.colors.primary.main,
5474
+ [vars$b.trackBorderColor]: globalRefs$a.colors.primary.main,
5457
5475
  [vars$b.knobPosition]: `calc(100% - var(${vars$b.knobSize}) - ${knobMargin})`,
5458
- [vars$b.knobColor]: globalRefs$9.colors.primary.main,
5459
- [vars$b.knobTextColor]: globalRefs$9.colors.primary.contrast,
5476
+ [vars$b.knobColor]: globalRefs$a.colors.primary.main,
5477
+ [vars$b.knobTextColor]: globalRefs$a.colors.primary.contrast,
5460
5478
  },
5461
5479
 
5462
5480
  _disabled: {
5463
5481
  [vars$b.cursor]: 'not-allowed', // todo: fix cursor
5464
- [vars$b.knobColor]: globalRefs$9.colors.surface.main,
5465
- [vars$b.trackBorderColor]: globalRefs$9.colors.surface.main,
5466
- [vars$b.trackBackgroundColor]: globalRefs$9.colors.surface.light,
5482
+ [vars$b.knobColor]: globalRefs$a.colors.surface.main,
5483
+ [vars$b.trackBorderColor]: globalRefs$a.colors.surface.main,
5484
+ [vars$b.trackBackgroundColor]: globalRefs$a.colors.surface.light,
5467
5485
  },
5468
5486
 
5469
5487
  _focused: {
5470
5488
  [vars$b.switchOutlineWidth]: '2px',
5471
5489
  [vars$b.switchOutlineOffset]: '1px',
5472
- [vars$b.switchOutlineColor]: globalRefs$9.colors.primary.main,
5490
+ [vars$b.switchOutlineColor]: globalRefs$a.colors.primary.main,
5473
5491
  [vars$b.switchOutlineStyle]: 'solid'
5474
5492
  },
5475
5493
 
5476
5494
  _invalid: {
5477
- [vars$b.switchOutlineColor]: globalRefs$9.colors.error.main,
5478
- [vars$b.trackBorderColor]: globalRefs$9.colors.error.main,
5479
- [vars$b.knobColor]: globalRefs$9.colors.error.main,
5480
- [vars$b.labelTextColor]: globalRefs$9.colors.error.main
5495
+ [vars$b.switchOutlineColor]: globalRefs$a.colors.error.main,
5496
+ [vars$b.trackBorderColor]: globalRefs$a.colors.error.main,
5497
+ [vars$b.knobColor]: globalRefs$a.colors.error.main,
5498
+ [vars$b.labelTextColor]: globalRefs$a.colors.error.main
5481
5499
  },
5482
5500
  };
5483
5501
 
5484
- const globalRefs$8 = getThemeRefs(globals);
5502
+ const globalRefs$9 = getThemeRefs(globals);
5485
5503
 
5486
5504
  const vars$a = Container.cssVarList;
5487
5505
 
@@ -5507,6 +5525,9 @@ const [helperTheme$1, helperRefs$1, helperVars] =
5507
5525
  const container = {
5508
5526
  ...helperTheme$1,
5509
5527
  [vars$a.width]: '100%',
5528
+ [vars$a.boxShadow]: 'none',
5529
+ [vars$a.backgroundColor]: globalRefs$9.colors.surface.light,
5530
+ [vars$a.color]: globalRefs$9.colors.surface.contrast,
5510
5531
  verticalPadding: {
5511
5532
  sm: { [vars$a.verticalPadding]: '5px' },
5512
5533
  md: { [vars$a.verticalPadding]: '10px' },
@@ -5552,32 +5573,32 @@ const container = {
5552
5573
 
5553
5574
  shadow: {
5554
5575
  sm: {
5555
- [vars$a.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
5576
+ [vars$a.boxShadow]: `${globalRefs$9.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$9.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
5556
5577
  },
5557
5578
  md: {
5558
- [vars$a.boxShadow]: `${globalRefs$8.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.md} ${helperRefs$1.shadowColor}`
5579
+ [vars$a.boxShadow]: `${globalRefs$9.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$9.shadow.narrow.md} ${helperRefs$1.shadowColor}`
5559
5580
  },
5560
5581
  lg: {
5561
- [vars$a.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
5582
+ [vars$a.boxShadow]: `${globalRefs$9.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$9.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
5562
5583
  },
5563
5584
  xl: {
5564
- [vars$a.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
5585
+ [vars$a.boxShadow]: `${globalRefs$9.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$9.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
5565
5586
  },
5566
5587
  '2xl': {
5567
5588
  [helperVars.shadowColor]: '#00000050',
5568
- [vars$a.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
5589
+ [vars$a.boxShadow]: `${globalRefs$9.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
5569
5590
  },
5570
5591
  },
5571
5592
 
5572
5593
  borderRadius: {
5573
5594
  sm: {
5574
- [vars$a.borderRadius]: globalRefs$8.radius.sm
5595
+ [vars$a.borderRadius]: globalRefs$9.radius.sm
5575
5596
  },
5576
5597
  md: {
5577
- [vars$a.borderRadius]: globalRefs$8.radius.md
5598
+ [vars$a.borderRadius]: globalRefs$9.radius.md
5578
5599
  },
5579
5600
  lg: {
5580
- [vars$a.borderRadius]: globalRefs$8.radius.lg
5601
+ [vars$a.borderRadius]: globalRefs$9.radius.lg
5581
5602
  },
5582
5603
  }
5583
5604
  };
@@ -5588,7 +5609,7 @@ const logo = {
5588
5609
  [vars$9.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
5589
5610
  };
5590
5611
 
5591
- const globalRefs$7 = getThemeRefs(globals);
5612
+ const globalRefs$8 = getThemeRefs(globals);
5592
5613
 
5593
5614
  const vars$8 = Text.cssVarList;
5594
5615
 
@@ -5596,56 +5617,56 @@ const text = {
5596
5617
  [vars$8.lineHeight]: '1em',
5597
5618
  [vars$8.display]: 'inline-block',
5598
5619
  [vars$8.textAlign]: 'left',
5599
- [vars$8.color]: globalRefs$7.colors.surface.dark,
5620
+ [vars$8.color]: globalRefs$8.colors.surface.dark,
5600
5621
  variant: {
5601
5622
  h1: {
5602
- [vars$8.fontSize]: globalRefs$7.typography.h1.size,
5603
- [vars$8.fontWeight]: globalRefs$7.typography.h1.weight,
5604
- [vars$8.fontFamily]: globalRefs$7.typography.h1.font
5623
+ [vars$8.fontSize]: globalRefs$8.typography.h1.size,
5624
+ [vars$8.fontWeight]: globalRefs$8.typography.h1.weight,
5625
+ [vars$8.fontFamily]: globalRefs$8.typography.h1.font
5605
5626
  },
5606
5627
  h2: {
5607
- [vars$8.fontSize]: globalRefs$7.typography.h2.size,
5608
- [vars$8.fontWeight]: globalRefs$7.typography.h2.weight,
5609
- [vars$8.fontFamily]: globalRefs$7.typography.h2.font
5628
+ [vars$8.fontSize]: globalRefs$8.typography.h2.size,
5629
+ [vars$8.fontWeight]: globalRefs$8.typography.h2.weight,
5630
+ [vars$8.fontFamily]: globalRefs$8.typography.h2.font
5610
5631
  },
5611
5632
  h3: {
5612
- [vars$8.fontSize]: globalRefs$7.typography.h3.size,
5613
- [vars$8.fontWeight]: globalRefs$7.typography.h3.weight,
5614
- [vars$8.fontFamily]: globalRefs$7.typography.h3.font
5633
+ [vars$8.fontSize]: globalRefs$8.typography.h3.size,
5634
+ [vars$8.fontWeight]: globalRefs$8.typography.h3.weight,
5635
+ [vars$8.fontFamily]: globalRefs$8.typography.h3.font
5615
5636
  },
5616
5637
  subtitle1: {
5617
- [vars$8.fontSize]: globalRefs$7.typography.subtitle1.size,
5618
- [vars$8.fontWeight]: globalRefs$7.typography.subtitle1.weight,
5619
- [vars$8.fontFamily]: globalRefs$7.typography.subtitle1.font
5638
+ [vars$8.fontSize]: globalRefs$8.typography.subtitle1.size,
5639
+ [vars$8.fontWeight]: globalRefs$8.typography.subtitle1.weight,
5640
+ [vars$8.fontFamily]: globalRefs$8.typography.subtitle1.font
5620
5641
  },
5621
5642
  subtitle2: {
5622
- [vars$8.fontSize]: globalRefs$7.typography.subtitle2.size,
5623
- [vars$8.fontWeight]: globalRefs$7.typography.subtitle2.weight,
5624
- [vars$8.fontFamily]: globalRefs$7.typography.subtitle2.font
5643
+ [vars$8.fontSize]: globalRefs$8.typography.subtitle2.size,
5644
+ [vars$8.fontWeight]: globalRefs$8.typography.subtitle2.weight,
5645
+ [vars$8.fontFamily]: globalRefs$8.typography.subtitle2.font
5625
5646
  },
5626
5647
  body1: {
5627
- [vars$8.fontSize]: globalRefs$7.typography.body1.size,
5628
- [vars$8.fontWeight]: globalRefs$7.typography.body1.weight,
5629
- [vars$8.fontFamily]: globalRefs$7.typography.body1.font
5648
+ [vars$8.fontSize]: globalRefs$8.typography.body1.size,
5649
+ [vars$8.fontWeight]: globalRefs$8.typography.body1.weight,
5650
+ [vars$8.fontFamily]: globalRefs$8.typography.body1.font
5630
5651
  },
5631
5652
  body2: {
5632
- [vars$8.fontSize]: globalRefs$7.typography.body2.size,
5633
- [vars$8.fontWeight]: globalRefs$7.typography.body2.weight,
5634
- [vars$8.fontFamily]: globalRefs$7.typography.body2.font
5653
+ [vars$8.fontSize]: globalRefs$8.typography.body2.size,
5654
+ [vars$8.fontWeight]: globalRefs$8.typography.body2.weight,
5655
+ [vars$8.fontFamily]: globalRefs$8.typography.body2.font
5635
5656
  }
5636
5657
  },
5637
5658
  mode: {
5638
5659
  primary: {
5639
- [vars$8.color]: globalRefs$7.colors.primary.main
5660
+ [vars$8.color]: globalRefs$8.colors.primary.main
5640
5661
  },
5641
5662
  secondary: {
5642
- [vars$8.color]: globalRefs$7.colors.secondary.main
5663
+ [vars$8.color]: globalRefs$8.colors.secondary.main
5643
5664
  },
5644
5665
  error: {
5645
- [vars$8.color]: globalRefs$7.colors.error.main
5666
+ [vars$8.color]: globalRefs$8.colors.error.main
5646
5667
  },
5647
5668
  success: {
5648
- [vars$8.color]: globalRefs$7.colors.success.main
5669
+ [vars$8.color]: globalRefs$8.colors.success.main
5649
5670
  }
5650
5671
  },
5651
5672
  textAlign: {
@@ -5668,7 +5689,7 @@ const text = {
5668
5689
  }
5669
5690
  };
5670
5691
 
5671
- const globalRefs$6 = getThemeRefs(globals);
5692
+ const globalRefs$7 = getThemeRefs(globals);
5672
5693
  const vars$7 = Link.cssVarList;
5673
5694
 
5674
5695
  const link = {
@@ -5676,10 +5697,10 @@ const link = {
5676
5697
  [vars$7.borderBottomWidth]: '2px',
5677
5698
  [vars$7.borderBottomStyle]: 'solid',
5678
5699
  [vars$7.borderBottomColor]: 'transparent',
5679
- [vars$7.color]: globalRefs$6.colors.primary.main,
5700
+ [vars$7.color]: globalRefs$7.colors.primary.main,
5680
5701
 
5681
5702
  _hover: {
5682
- [vars$7.borderBottomColor]: globalRefs$6.colors.primary.main
5703
+ [vars$7.borderBottomColor]: globalRefs$7.colors.primary.main
5683
5704
  },
5684
5705
 
5685
5706
  textAlign: {
@@ -5694,45 +5715,45 @@ const link = {
5694
5715
 
5695
5716
  mode: {
5696
5717
  primary: {
5697
- [vars$7.color]: globalRefs$6.colors.primary.main,
5718
+ [vars$7.color]: globalRefs$7.colors.primary.main,
5698
5719
  _hover: {
5699
- [vars$7.borderBottomColor]: globalRefs$6.colors.primary.main
5720
+ [vars$7.borderBottomColor]: globalRefs$7.colors.primary.main
5700
5721
  }
5701
5722
  },
5702
5723
  secondary: {
5703
- [vars$7.color]: globalRefs$6.colors.secondary.main,
5724
+ [vars$7.color]: globalRefs$7.colors.secondary.main,
5704
5725
  _hover: {
5705
- [vars$7.borderBottomColor]: globalRefs$6.colors.secondary.main
5726
+ [vars$7.borderBottomColor]: globalRefs$7.colors.secondary.main
5706
5727
  }
5707
5728
  },
5708
5729
  error: {
5709
- [vars$7.color]: globalRefs$6.colors.error.main,
5730
+ [vars$7.color]: globalRefs$7.colors.error.main,
5710
5731
  _hover: {
5711
- [vars$7.borderBottomColor]: globalRefs$6.colors.error.main
5732
+ [vars$7.borderBottomColor]: globalRefs$7.colors.error.main
5712
5733
  }
5713
5734
  },
5714
5735
  success: {
5715
- [vars$7.color]: globalRefs$6.colors.success.main,
5736
+ [vars$7.color]: globalRefs$7.colors.success.main,
5716
5737
  _hover: {
5717
- [vars$7.borderBottomColor]: globalRefs$6.colors.success.main
5738
+ [vars$7.borderBottomColor]: globalRefs$7.colors.success.main
5718
5739
  }
5719
5740
  }
5720
5741
  }
5721
5742
  };
5722
5743
 
5744
+ const globalRefs$6 = getThemeRefs(globals);
5745
+
5723
5746
  const vars$6 = Divider.cssVarList;
5724
5747
 
5725
5748
  const thickness = '2px';
5726
5749
  const textPaddingSize = '10px';
5727
5750
  const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$g);
5728
5751
 
5729
-
5730
5752
  const divider = {
5731
5753
  ...helperTheme,
5732
5754
  [vars$6.alignItems]: 'center',
5733
5755
  [vars$6.dividerHeight]: helperRefs.thickness,
5734
- [vars$6.backgroundColor]: 'currentColor',
5735
- [vars$6.opacity]: '0.2',
5756
+ [vars$6.backgroundColor]: globalRefs$6.colors.surface.main,
5736
5757
  [vars$6.textPadding]: `0 ${helperRefs.textPaddingSize}`,
5737
5758
  [vars$6.width]: '100%',
5738
5759
  [vars$6.flexDirection]: 'row',