@descope/web-components-ui 1.0.113 → 1.0.114

Sign up to get free protection for your applications and to get access to all the features.
Files changed (35) hide show
  1. package/dist/cjs/index.cjs.js +5566 -1
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.d.ts +21 -21
  4. package/dist/index.esm.js +562 -424
  5. package/dist/index.esm.js.map +1 -1
  6. package/package.json +2 -2
  7. package/src/dev/index.js +1 -1
  8. package/src/helpers/themeHelpers/index.js +6 -1
  9. package/src/index.cjs.js +23 -2
  10. package/src/index.d.ts +49 -0
  11. package/src/index.js +1 -1
  12. package/src/theme/components/button.js +30 -29
  13. package/src/theme/components/checkbox.js +1 -0
  14. package/src/theme/components/comboBox.js +1 -0
  15. package/src/theme/components/container.js +33 -32
  16. package/src/theme/components/divider.js +20 -19
  17. package/src/theme/components/emailField.js +1 -0
  18. package/src/theme/components/image.js +1 -0
  19. package/src/theme/components/index.js +27 -20
  20. package/src/theme/components/link.js +1 -0
  21. package/src/theme/components/loader/index.js +4 -2
  22. package/src/theme/components/loader/loaderLinear.js +1 -0
  23. package/src/theme/components/loader/loaderRadial.js +1 -0
  24. package/src/theme/components/logo.js +1 -0
  25. package/src/theme/components/newPassword.js +1 -0
  26. package/src/theme/components/numberField.js +1 -0
  27. package/src/theme/components/passcode.js +1 -0
  28. package/src/theme/components/passwordField.js +1 -0
  29. package/src/theme/components/phoneField.js +1 -1
  30. package/src/theme/components/switchToggle.js +1 -0
  31. package/src/theme/components/text.js +1 -0
  32. package/src/theme/components/textArea.js +1 -0
  33. package/src/theme/components/textField.js +1 -0
  34. package/src/theme/globals.js +6 -2
  35. package/src/theme/index.js +4 -3
package/dist/index.esm.js CHANGED
@@ -1816,22 +1816,22 @@ const selectors$2 = {
1816
1816
  host: { selector: () => ':host' },
1817
1817
  };
1818
1818
 
1819
- const { root, before, after, text: text$2, host: host$6 } = selectors$2;
1819
+ const { root, before, after, text: text$3, host: host$6 } = selectors$2;
1820
1820
 
1821
1821
  const DividerClass = compose(
1822
1822
  createStyleMixin({
1823
1823
  mappings: {
1824
- maxTextWidth: { ...text$2, property: 'max-width' },
1824
+ maxTextWidth: { ...text$3, property: 'max-width' },
1825
1825
  minHeight: root,
1826
1826
  alignItems: root,
1827
1827
  alignSelf: root,
1828
1828
  flexDirection: root,
1829
- textPadding: { ...text$2, property: 'padding' },
1829
+ textPadding: { ...text$3, property: 'padding' },
1830
1830
  width: host$6,
1831
1831
  padding: host$6,
1832
1832
  backgroundColor: [before, after],
1833
1833
  opacity: [before, after],
1834
- textWidth: { ...text$2, property: 'width' },
1834
+ textWidth: { ...text$3, property: 'width' },
1835
1835
  dividerHeight: [{ ...before, property: 'height' }, { ...after, property: 'height' }],
1836
1836
  dividerWidth: [{ ...before, property: 'width' }, { ...after, property: 'width' }]
1837
1837
  },
@@ -2046,14 +2046,14 @@ const selectors = {
2046
2046
  text: { selector: () => TextClass.componentName }
2047
2047
  };
2048
2048
 
2049
- const { anchor, text: text$1, host: host$5, wrapper } = selectors;
2049
+ const { anchor, text: text$2, host: host$5, wrapper } = selectors;
2050
2050
 
2051
2051
  const LinkClass = compose(
2052
2052
  createStyleMixin({
2053
2053
  mappings: {
2054
2054
  width: host$5,
2055
2055
  textAlign: wrapper,
2056
- color: [anchor, { ...text$1, property: TextClass.cssVarList.color }],
2056
+ color: [anchor, { ...text$2, property: TextClass.cssVarList.color }],
2057
2057
  cursor: anchor,
2058
2058
  borderBottomWidth: anchor,
2059
2059
  borderBottomStyle: anchor,
@@ -2792,7 +2792,7 @@ const {
2792
2792
  host: host$3,
2793
2793
  placeholder: placeholder$1,
2794
2794
  input: input$1,
2795
- textArea: textArea$1,
2795
+ textArea: textArea$2,
2796
2796
  label: label$2,
2797
2797
  requiredIndicator: requiredIndicator$1
2798
2798
  } = {
@@ -2809,9 +2809,9 @@ let overrides$1 = ``;
2809
2809
  const TextAreaClass = compose(
2810
2810
  createStyleMixin({
2811
2811
  mappings: {
2812
- fontSize: [host$3, textArea$1],
2813
- resize: textArea$1,
2814
- color: textArea$1,
2812
+ fontSize: [host$3, textArea$2],
2813
+ resize: textArea$2,
2814
+ color: textArea$2,
2815
2815
  cursor: {},
2816
2816
  labelColor: [
2817
2817
  { ...label$2, property: 'color' },
@@ -5066,6 +5066,11 @@ const getThemeRefs = (theme, prefix) =>
5066
5066
  set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
5067
5067
  );
5068
5068
 
5069
+ const getThemeVars = (theme, prefix) =>
5070
+ transformTheme(theme, [], (path) =>
5071
+ set({}, path, getVarName(prefix ? [prefix, ...path] : path))
5072
+ );
5073
+
5069
5074
  const globalsThemeToStyle = (theme, themeName = '') => `
5070
5075
  *[data-theme="${themeName}"] {
5071
5076
  ${Object.entries(themeToCSSVarsObj(theme)).reduce(
@@ -5081,7 +5086,7 @@ const componentsThemeToStyleObj = (componentsTheme) =>
5081
5086
  const property = restPath.pop();
5082
5087
  const componentName = getComponentName(component);
5083
5088
 
5084
- if(property === 'undefined'){
5089
+ if (property === 'undefined') {
5085
5090
  console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
5086
5091
  }
5087
5092
 
@@ -5350,7 +5355,7 @@ const shadow = {
5350
5355
  }
5351
5356
  };
5352
5357
 
5353
- var globals = {
5358
+ const globals = {
5354
5359
  colors,
5355
5360
  typography,
5356
5361
  spacing,
@@ -5359,9 +5364,10 @@ var globals = {
5359
5364
  shadow,
5360
5365
  fonts
5361
5366
  };
5367
+ const vars$l = getThemeVars(globals);
5362
5368
 
5363
5369
  const globalRefs$e = getThemeRefs(globals);
5364
- const vars$g = ButtonClass.cssVarList;
5370
+ const compVars$2 = ButtonClass.cssVarList;
5365
5371
 
5366
5372
  const mode = {
5367
5373
  primary: globalRefs$e.colors.primary,
@@ -5371,7 +5377,7 @@ const mode = {
5371
5377
  surface: globalRefs$e.colors.surface
5372
5378
  };
5373
5379
 
5374
- const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$n);
5380
+ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars({ mode }, componentName$n);
5375
5381
 
5376
5382
  const verticalPaddingRatio = 3;
5377
5383
  const horizontalPaddingRatio = 2;
@@ -5379,73 +5385,80 @@ const horizontalPaddingRatio = 2;
5379
5385
  const button = {
5380
5386
  ...helperTheme$2,
5381
5387
 
5382
- [vars$g.cursor]: 'pointer',
5388
+ [compVars$2.cursor]: 'pointer',
5383
5389
 
5384
- [vars$g.borderRadius]: globalRefs$e.radius.sm,
5385
- [vars$g.borderWidth]: '2px',
5386
- [vars$g.borderStyle]: 'solid',
5387
- [vars$g.borderColor]: 'transparent',
5390
+ [compVars$2.borderRadius]: globalRefs$e.radius.sm,
5391
+ [compVars$2.borderWidth]: '2px',
5392
+ [compVars$2.borderStyle]: 'solid',
5393
+ [compVars$2.borderColor]: 'transparent',
5388
5394
 
5389
- [vars$g.gap]: '0.25em',
5395
+ [compVars$2.gap]: '0.25em',
5390
5396
 
5391
- [vars$g.verticalPadding]: `calc(var(${vars$g.fontSize}) / ${verticalPaddingRatio})`,
5392
- [vars$g.horizontalPadding]: `calc(var(${vars$g.fontSize}) / ${horizontalPaddingRatio})`,
5397
+ [compVars$2.verticalPadding]: `calc(var(${compVars$2.fontSize}) / ${verticalPaddingRatio})`,
5398
+ [compVars$2.horizontalPadding]: `calc(var(${compVars$2.fontSize}) / ${horizontalPaddingRatio})`,
5393
5399
 
5394
5400
  size: {
5395
- xs: { [vars$g.fontSize]: '12px' },
5396
- sm: { [vars$g.fontSize]: '14px' },
5397
- md: { [vars$g.fontSize]: '18px' },
5398
- lg: { [vars$g.fontSize]: '22px' },
5399
- xl: { [vars$g.fontSize]: '26px' }
5401
+ xs: { [compVars$2.fontSize]: '12px' },
5402
+ sm: { [compVars$2.fontSize]: '14px' },
5403
+ md: { [compVars$2.fontSize]: '18px' },
5404
+ lg: { [compVars$2.fontSize]: '22px' },
5405
+ xl: { [compVars$2.fontSize]: '26px' }
5400
5406
  },
5401
5407
 
5402
5408
  _fullWidth: {
5403
- [vars$g.width]: '100%'
5409
+ [compVars$2.width]: '100%'
5404
5410
  },
5405
5411
 
5406
5412
  _loading: {
5407
- [vars$g.cursor]: 'wait'
5413
+ [compVars$2.cursor]: 'wait'
5408
5414
  },
5409
5415
 
5410
5416
  variant: {
5411
5417
  contained: {
5412
- [vars$g.color]: helperRefs$2.contrast,
5413
- [vars$g.backgroundColor]: helperRefs$2.main,
5418
+ [compVars$2.color]: helperRefs$2.contrast,
5419
+ [compVars$2.backgroundColor]: helperRefs$2.main,
5414
5420
  _hover: {
5415
- [vars$g.backgroundColor]: helperRefs$2.dark
5421
+ [compVars$2.backgroundColor]: helperRefs$2.dark
5416
5422
  },
5417
5423
  _active: {
5418
- [vars$g.backgroundColor]: helperRefs$2.dark
5424
+ [compVars$2.backgroundColor]: helperRefs$2.dark
5419
5425
  }
5420
5426
  },
5421
5427
 
5422
5428
  outline: {
5423
- [vars$g.color]: helperRefs$2.main,
5424
- [vars$g.borderColor]: 'currentColor',
5429
+ [compVars$2.color]: helperRefs$2.main,
5430
+ [compVars$2.borderColor]: 'currentColor',
5425
5431
  _hover: {
5426
- [vars$g.color]: helperRefs$2.dark,
5432
+ [compVars$2.color]: helperRefs$2.dark,
5427
5433
  },
5428
5434
  _active: {
5429
- [vars$g.color]: helperRefs$2.light,
5435
+ [compVars$2.color]: helperRefs$2.light,
5430
5436
  }
5431
5437
  },
5432
5438
 
5433
5439
  link: {
5434
- [vars$g.color]: helperRefs$2.main,
5440
+ [compVars$2.color]: helperRefs$2.main,
5435
5441
  _hover: {
5436
- [vars$g.color]: helperRefs$2.main,
5437
- [vars$g.textDecoration]: 'underline'
5442
+ [compVars$2.color]: helperRefs$2.main,
5443
+ [compVars$2.textDecoration]: 'underline'
5438
5444
  },
5439
5445
  _active: {
5440
- [vars$g.color]: helperRefs$2.dark
5446
+ [compVars$2.color]: helperRefs$2.dark
5441
5447
  }
5442
5448
  }
5443
5449
  }
5444
5450
  };
5451
+ const vars$k = { ...compVars$2, ...helperVars$2 };
5452
+
5453
+ var button$1 = /*#__PURE__*/Object.freeze({
5454
+ __proto__: null,
5455
+ default: button,
5456
+ vars: vars$k
5457
+ });
5445
5458
 
5446
5459
  const globalRefs$d = getThemeRefs(globals);
5447
5460
 
5448
- const vars$f = TextFieldClass.cssVarList;
5461
+ const vars$j = TextFieldClass.cssVarList;
5449
5462
 
5450
5463
  const textField = (vars) => ({
5451
5464
  [vars.padding]: '0 1em',
@@ -5511,266 +5524,311 @@ const textField = (vars) => ({
5511
5524
  }
5512
5525
  });
5513
5526
 
5514
- var textField$1 = textField(vars$f);
5527
+ var textField$1 = textField(vars$j);
5528
+
5529
+ var textField$2 = /*#__PURE__*/Object.freeze({
5530
+ __proto__: null,
5531
+ default: textField$1,
5532
+ textField: textField,
5533
+ vars: vars$j
5534
+ });
5515
5535
 
5516
5536
  const globalRefs$c = getThemeRefs(globals);
5517
5537
 
5518
- const vars$e = PasswordFieldClass.cssVarList;
5538
+ const vars$i = PasswordFieldClass.cssVarList;
5519
5539
 
5520
5540
  const passwordField = {
5521
- [vars$e.wrapperBorderStyle]: 'solid',
5522
- [vars$e.wrapperBorderWidth]: '1px',
5523
- [vars$e.wrapperBorderColor]: 'transparent',
5524
- [vars$e.wrapperBorderRadius]: globalRefs$c.radius.xs,
5525
- [vars$e.backgroundColor]: globalRefs$c.colors.surface.light,
5541
+ [vars$i.wrapperBorderStyle]: 'solid',
5542
+ [vars$i.wrapperBorderWidth]: '1px',
5543
+ [vars$i.wrapperBorderColor]: 'transparent',
5544
+ [vars$i.wrapperBorderRadius]: globalRefs$c.radius.xs,
5545
+ [vars$i.backgroundColor]: globalRefs$c.colors.surface.light,
5526
5546
 
5527
- [vars$e.outlineWidth]: '2px',
5528
- [vars$e.outlineStyle]: 'solid',
5529
- [vars$e.outlineColor]: 'transparent',
5547
+ [vars$i.outlineWidth]: '2px',
5548
+ [vars$i.outlineStyle]: 'solid',
5549
+ [vars$i.outlineColor]: 'transparent',
5530
5550
 
5531
- [vars$e.revealButtonOutlineBoxShadow]: `0 0 0 2px ${globalRefs$c.colors.surface.main}`,
5551
+ [vars$i.revealButtonOutlineBoxShadow]: `0 0 0 2px ${globalRefs$c.colors.surface.main}`,
5532
5552
 
5533
5553
 
5534
- [vars$e.labelTextColor]: globalRefs$c.colors.surface.contrast,
5535
- [vars$e.inputTextColor]: globalRefs$c.colors.surface.contrast,
5536
- [vars$e.placeholderTextColor]: globalRefs$c.colors.surface.main,
5554
+ [vars$i.labelTextColor]: globalRefs$c.colors.surface.contrast,
5555
+ [vars$i.inputTextColor]: globalRefs$c.colors.surface.contrast,
5556
+ [vars$i.placeholderTextColor]: globalRefs$c.colors.surface.main,
5537
5557
 
5538
- [vars$e.pointerCursor]: 'pointer',
5558
+ [vars$i.pointerCursor]: 'pointer',
5539
5559
 
5540
- [vars$e.padding]: '0',
5541
- [vars$e.height]: '2em',
5560
+ [vars$i.padding]: '0',
5561
+ [vars$i.height]: '2em',
5542
5562
 
5543
5563
  size: {
5544
5564
  xs: {
5545
- [vars$e.fontSize]: '8px',
5565
+ [vars$i.fontSize]: '8px',
5546
5566
  },
5547
5567
  sm: {
5548
- [vars$e.fontSize]: '10px',
5568
+ [vars$i.fontSize]: '10px',
5549
5569
  },
5550
5570
  md: {
5551
- [vars$e.fontSize]: '14px',
5571
+ [vars$i.fontSize]: '14px',
5552
5572
  },
5553
5573
  lg: {
5554
- [vars$e.fontSize]: '20px',
5574
+ [vars$i.fontSize]: '20px',
5555
5575
  },
5556
5576
  xl: {
5557
- [vars$e.fontSize]: '25px',
5577
+ [vars$i.fontSize]: '25px',
5558
5578
  }
5559
5579
  },
5560
5580
 
5561
5581
  _bordered: {
5562
- [vars$e.padding]: '0 0.5em',
5563
- [vars$e.wrapperBorderColor]: globalRefs$c.colors.surface.main
5582
+ [vars$i.padding]: '0 0.5em',
5583
+ [vars$i.wrapperBorderColor]: globalRefs$c.colors.surface.main
5564
5584
  },
5565
5585
 
5566
5586
  _fullWidth: {
5567
- [vars$e.width]: '100%'
5587
+ [vars$i.width]: '100%'
5568
5588
  },
5569
5589
 
5570
5590
  _focused: {
5571
- [vars$e.outlineColor]: globalRefs$c.colors.surface.main
5591
+ [vars$i.outlineColor]: globalRefs$c.colors.surface.main
5572
5592
  },
5573
5593
 
5574
5594
  _invalid: {
5575
- [vars$e.labelTextColor]: globalRefs$c.colors.error.main,
5576
- [vars$e.inputTextColor]: globalRefs$c.colors.error.main,
5577
- [vars$e.placeholderTextColor]: globalRefs$c.colors.error.light,
5578
- [vars$e.wrapperBorderColor]: globalRefs$c.colors.error.main,
5579
- [vars$e.outlineColor]: globalRefs$c.colors.error.light,
5595
+ [vars$i.labelTextColor]: globalRefs$c.colors.error.main,
5596
+ [vars$i.inputTextColor]: globalRefs$c.colors.error.main,
5597
+ [vars$i.placeholderTextColor]: globalRefs$c.colors.error.light,
5598
+ [vars$i.wrapperBorderColor]: globalRefs$c.colors.error.main,
5599
+ [vars$i.outlineColor]: globalRefs$c.colors.error.light,
5580
5600
  },
5581
5601
  };
5582
5602
 
5603
+ var passwordField$1 = /*#__PURE__*/Object.freeze({
5604
+ __proto__: null,
5605
+ default: passwordField,
5606
+ vars: vars$i
5607
+ });
5608
+
5583
5609
  const numberField = {
5584
5610
  ...textField(NumberFieldClass.cssVarList)
5585
5611
  };
5612
+ const vars$h = NumberFieldClass.cssVarList;
5613
+
5614
+ var numberField$1 = /*#__PURE__*/Object.freeze({
5615
+ __proto__: null,
5616
+ default: numberField,
5617
+ vars: vars$h
5618
+ });
5586
5619
 
5587
5620
  const emailField = {
5588
5621
  ...textField(EmailFieldClass.cssVarList)
5589
5622
  };
5623
+ const vars$g = EmailFieldClass.cssVarList;
5624
+
5625
+ var emailField$1 = /*#__PURE__*/Object.freeze({
5626
+ __proto__: null,
5627
+ default: emailField,
5628
+ vars: vars$g
5629
+ });
5590
5630
 
5591
5631
  const globalRefs$b = getThemeRefs(globals);
5592
- const vars$d = TextAreaClass.cssVarList;
5632
+ const vars$f = TextAreaClass.cssVarList;
5593
5633
 
5594
5634
  const textArea = {
5595
- [vars$d.labelColor]: globalRefs$b.colors.surface.contrast,
5596
- [vars$d.placeholderColor]: globalRefs$b.colors.surface.main,
5597
- [vars$d.color]: globalRefs$b.colors.surface.contrast,
5598
- [vars$d.fontSize]: '14px',
5599
-
5600
- [vars$d.backgroundColor]: globalRefs$b.colors.surface.light,
5601
- [vars$d.resize]: 'vertical',
5602
-
5603
- [vars$d.borderRadius]: globalRefs$b.radius.sm,
5604
- [vars$d.borderWidth]: '1px',
5605
- [vars$d.borderStyle]: 'solid',
5606
- [vars$d.borderColor]: 'transparent',
5607
- [vars$d.outlineWidth]: '2px',
5608
- [vars$d.outlineStyle]: 'solid',
5609
- [vars$d.outlineColor]: 'transparent',
5610
- [vars$d.outlineOffset]: '0',
5635
+ [vars$f.labelColor]: globalRefs$b.colors.surface.contrast,
5636
+ [vars$f.placeholderColor]: globalRefs$b.colors.surface.main,
5637
+ [vars$f.color]: globalRefs$b.colors.surface.contrast,
5638
+ [vars$f.fontSize]: '14px',
5639
+
5640
+ [vars$f.backgroundColor]: globalRefs$b.colors.surface.light,
5641
+ [vars$f.resize]: 'vertical',
5642
+
5643
+ [vars$f.borderRadius]: globalRefs$b.radius.sm,
5644
+ [vars$f.borderWidth]: '1px',
5645
+ [vars$f.borderStyle]: 'solid',
5646
+ [vars$f.borderColor]: 'transparent',
5647
+ [vars$f.outlineWidth]: '2px',
5648
+ [vars$f.outlineStyle]: 'solid',
5649
+ [vars$f.outlineColor]: 'transparent',
5650
+ [vars$f.outlineOffset]: '0',
5611
5651
 
5612
5652
  _fullWidth: {
5613
- [vars$d.width]: '100%'
5653
+ [vars$f.width]: '100%'
5614
5654
  },
5615
5655
 
5616
5656
  _focused: {
5617
- [vars$d.outlineColor]: globalRefs$b.colors.surface.main
5657
+ [vars$f.outlineColor]: globalRefs$b.colors.surface.main
5618
5658
  },
5619
5659
 
5620
5660
  _disabled: {
5621
- [vars$d.cursor]: 'not-allowed'
5661
+ [vars$f.cursor]: 'not-allowed'
5622
5662
  },
5623
5663
 
5624
5664
  _bordered: {
5625
- [vars$d.borderColor]: globalRefs$b.colors.surface.main,
5665
+ [vars$f.borderColor]: globalRefs$b.colors.surface.main,
5626
5666
  },
5627
5667
 
5628
5668
  _invalid: {
5629
- [vars$d.labelColor]: globalRefs$b.colors.error.main,
5630
- [vars$d.borderColor]: globalRefs$b.colors.error.main,
5631
- [vars$d.outlineColor]: globalRefs$b.colors.error.light,
5632
- [vars$d.placeholderColor]: globalRefs$b.colors.error.light,
5669
+ [vars$f.labelColor]: globalRefs$b.colors.error.main,
5670
+ [vars$f.borderColor]: globalRefs$b.colors.error.main,
5671
+ [vars$f.outlineColor]: globalRefs$b.colors.error.light,
5672
+ [vars$f.placeholderColor]: globalRefs$b.colors.error.light,
5633
5673
  },
5634
5674
 
5635
5675
  _readonly: {
5636
- [vars$d.resize]: 'none',
5676
+ [vars$f.resize]: 'none',
5637
5677
  }
5638
5678
  };
5639
5679
 
5680
+ var textArea$1 = /*#__PURE__*/Object.freeze({
5681
+ __proto__: null,
5682
+ default: textArea,
5683
+ vars: vars$f
5684
+ });
5685
+
5640
5686
  const globalRefs$a = getThemeRefs(globals);
5641
- const vars$c = CheckboxClass.cssVarList;
5687
+ const vars$e = CheckboxClass.cssVarList;
5642
5688
 
5643
5689
  const checkbox = {
5644
- [vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
5645
- [vars$c.cursor]: 'pointer',
5690
+ [vars$e.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
5691
+ [vars$e.cursor]: 'pointer',
5646
5692
 
5647
- [vars$c.checkboxRadius]: globalRefs$a.radius.xs,
5648
- [vars$c.checkboxSize]: '2em',
5693
+ [vars$e.checkboxRadius]: globalRefs$a.radius.xs,
5694
+ [vars$e.checkboxSize]: '2em',
5649
5695
 
5650
- [vars$c.labelTextColor]: globalRefs$a.colors.surface.contrast,
5651
- [vars$c.labelMargin]: '0.5em',
5652
- [vars$c.labelFontWeight]: '400',
5696
+ [vars$e.labelTextColor]: globalRefs$a.colors.surface.contrast,
5697
+ [vars$e.labelMargin]: '0.5em',
5698
+ [vars$e.labelFontWeight]: '400',
5653
5699
 
5654
5700
  size: {
5655
5701
  xs: {
5656
- [vars$c.labelFontSize]: '8px',
5702
+ [vars$e.labelFontSize]: '8px',
5657
5703
  },
5658
5704
  sm: {
5659
- [vars$c.labelFontSize]: '10px',
5705
+ [vars$e.labelFontSize]: '10px',
5660
5706
  },
5661
5707
  md: {
5662
- [vars$c.labelFontSize]: '14px',
5708
+ [vars$e.labelFontSize]: '14px',
5663
5709
  },
5664
5710
  lg: {
5665
- [vars$c.labelFontSize]: '20px',
5711
+ [vars$e.labelFontSize]: '20px',
5666
5712
  },
5667
5713
  xl: {
5668
- [vars$c.labelFontSize]: '25px',
5714
+ [vars$e.labelFontSize]: '25px',
5669
5715
  }
5670
5716
  },
5671
5717
 
5672
5718
  _fullWidth: {
5673
- [vars$c.width]: '100%',
5719
+ [vars$e.width]: '100%',
5674
5720
  },
5675
5721
 
5676
5722
  _checked: {
5677
- [vars$c.checkboxBackgroundColor]: globalRefs$a.colors.primary.main,
5678
- [vars$c.checkmarkTextColor]: globalRefs$a.colors.primary.contrast,
5723
+ [vars$e.checkboxBackgroundColor]: globalRefs$a.colors.primary.main,
5724
+ [vars$e.checkmarkTextColor]: globalRefs$a.colors.primary.contrast,
5679
5725
  },
5680
5726
 
5681
5727
  _disabled: {
5682
- [vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
5728
+ [vars$e.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
5683
5729
  },
5684
5730
 
5685
5731
  _focused: {
5686
- [vars$c.checkboxOutlineWidth]: '2px',
5687
- [vars$c.checkboxOutlineOffset]: '1px',
5688
- [vars$c.checkboxOutlineColor]: globalRefs$a.colors.primary.main,
5689
- [vars$c.checkboxOutlineStyle]: 'solid'
5732
+ [vars$e.checkboxOutlineWidth]: '2px',
5733
+ [vars$e.checkboxOutlineOffset]: '1px',
5734
+ [vars$e.checkboxOutlineColor]: globalRefs$a.colors.primary.main,
5735
+ [vars$e.checkboxOutlineStyle]: 'solid'
5690
5736
  },
5691
5737
 
5692
5738
  _invalid: {
5693
- [vars$c.checkboxOutlineColor]: globalRefs$a.colors.error.main,
5694
- [vars$c.labelTextColor]: globalRefs$a.colors.error.main
5739
+ [vars$e.checkboxOutlineColor]: globalRefs$a.colors.error.main,
5740
+ [vars$e.labelTextColor]: globalRefs$a.colors.error.main
5695
5741
  },
5696
5742
 
5697
5743
  };
5698
5744
 
5745
+ var checkbox$1 = /*#__PURE__*/Object.freeze({
5746
+ __proto__: null,
5747
+ default: checkbox,
5748
+ vars: vars$e
5749
+ });
5750
+
5699
5751
  const knobMargin = '2px';
5700
5752
  const checkboxHeight = '1.25em';
5701
5753
  const trackBorderWidth = '2px';
5702
5754
 
5703
5755
  const globalRefs$9 = getThemeRefs(globals);
5704
- const vars$b = SwitchToggleClass.cssVarList;
5756
+ const vars$d = SwitchToggleClass.cssVarList;
5705
5757
 
5706
5758
  const switchToggle = {
5707
5759
  size: {
5708
- xs: { [vars$b.fontSize]: '8px' },
5709
- sm: { [vars$b.fontSize]: '12px' },
5710
- md: { [vars$b.fontSize]: '16px' },
5711
- lg: { [vars$b.fontSize]: '20px' },
5712
- xl: { [vars$b.fontSize]: '24px' }
5760
+ xs: { [vars$d.fontSize]: '8px' },
5761
+ sm: { [vars$d.fontSize]: '12px' },
5762
+ md: { [vars$d.fontSize]: '16px' },
5763
+ lg: { [vars$d.fontSize]: '20px' },
5764
+ xl: { [vars$d.fontSize]: '24px' }
5713
5765
  },
5714
5766
 
5715
- [vars$b.cursor]: 'pointer',
5767
+ [vars$d.cursor]: 'pointer',
5716
5768
 
5717
- [vars$b.trackBorderStyle]: 'solid',
5718
- [vars$b.trackBorderWidth]: trackBorderWidth,
5719
- [vars$b.trackBorderColor]: globalRefs$9.colors.surface.contrast,
5769
+ [vars$d.trackBorderStyle]: 'solid',
5770
+ [vars$d.trackBorderWidth]: trackBorderWidth,
5771
+ [vars$d.trackBorderColor]: globalRefs$9.colors.surface.contrast,
5720
5772
 
5721
- [vars$b.trackBackgroundColor]: 'none',
5722
- [vars$b.trackRadius]: globalRefs$9.radius.md,
5723
- [vars$b.trackWidth]: '2.5em',
5724
- [vars$b.trackHeight]: checkboxHeight,
5773
+ [vars$d.trackBackgroundColor]: 'none',
5774
+ [vars$d.trackRadius]: globalRefs$9.radius.md,
5775
+ [vars$d.trackWidth]: '2.5em',
5776
+ [vars$d.trackHeight]: checkboxHeight,
5725
5777
 
5726
- [vars$b.knobSize]: `calc(1em - ${knobMargin})`,
5727
- [vars$b.knobRadius]: '50%',
5728
- [vars$b.knobTopOffset]: '1px',
5729
- [vars$b.knobColor]: globalRefs$9.colors.surface.contrast,
5730
- [vars$b.knobPosition]: knobMargin,
5731
- [vars$b.knobTransition]: '0.3s',
5778
+ [vars$d.knobSize]: `calc(1em - ${knobMargin})`,
5779
+ [vars$d.knobRadius]: '50%',
5780
+ [vars$d.knobTopOffset]: '1px',
5781
+ [vars$d.knobColor]: globalRefs$9.colors.surface.contrast,
5782
+ [vars$d.knobPosition]: knobMargin,
5783
+ [vars$d.knobTransition]: '0.3s',
5732
5784
 
5733
- [vars$b.labelTextColor]: globalRefs$9.colors.surface.contrast,
5734
- [vars$b.labelFontWeight]: '400',
5735
- [vars$b.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
5736
- [vars$b.labelMargin]: '0.25em',
5785
+ [vars$d.labelTextColor]: globalRefs$9.colors.surface.contrast,
5786
+ [vars$d.labelFontWeight]: '400',
5787
+ [vars$d.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
5788
+ [vars$d.labelMargin]: '0.25em',
5737
5789
 
5738
5790
  _fullWidth: {
5739
- [vars$b.width]: '100%',
5791
+ [vars$d.width]: '100%',
5740
5792
  },
5741
5793
 
5742
5794
  _checked: {
5743
- [vars$b.trackBorderColor]: globalRefs$9.colors.primary.main,
5744
- [vars$b.knobPosition]: `calc(100% - var(${vars$b.knobSize}) - ${knobMargin})`,
5745
- [vars$b.knobColor]: globalRefs$9.colors.primary.main,
5746
- [vars$b.knobTextColor]: globalRefs$9.colors.primary.contrast,
5795
+ [vars$d.trackBorderColor]: globalRefs$9.colors.primary.main,
5796
+ [vars$d.knobPosition]: `calc(100% - var(${vars$d.knobSize}) - ${knobMargin})`,
5797
+ [vars$d.knobColor]: globalRefs$9.colors.primary.main,
5798
+ [vars$d.knobTextColor]: globalRefs$9.colors.primary.contrast,
5747
5799
  },
5748
5800
 
5749
5801
  _disabled: {
5750
- [vars$b.cursor]: 'not-allowed', // todo: fix cursor
5751
- [vars$b.knobColor]: globalRefs$9.colors.surface.main,
5752
- [vars$b.trackBorderColor]: globalRefs$9.colors.surface.main,
5753
- [vars$b.trackBackgroundColor]: globalRefs$9.colors.surface.light,
5802
+ [vars$d.cursor]: 'not-allowed', // todo: fix cursor
5803
+ [vars$d.knobColor]: globalRefs$9.colors.surface.main,
5804
+ [vars$d.trackBorderColor]: globalRefs$9.colors.surface.main,
5805
+ [vars$d.trackBackgroundColor]: globalRefs$9.colors.surface.light,
5754
5806
  },
5755
5807
 
5756
5808
  _focused: {
5757
- [vars$b.switchOutlineWidth]: '2px',
5758
- [vars$b.switchOutlineOffset]: '1px',
5759
- [vars$b.switchOutlineColor]: globalRefs$9.colors.primary.main,
5760
- [vars$b.switchOutlineStyle]: 'solid'
5809
+ [vars$d.switchOutlineWidth]: '2px',
5810
+ [vars$d.switchOutlineOffset]: '1px',
5811
+ [vars$d.switchOutlineColor]: globalRefs$9.colors.primary.main,
5812
+ [vars$d.switchOutlineStyle]: 'solid'
5761
5813
  },
5762
5814
 
5763
5815
  _invalid: {
5764
- [vars$b.switchOutlineColor]: globalRefs$9.colors.error.main,
5765
- [vars$b.trackBorderColor]: globalRefs$9.colors.error.main,
5766
- [vars$b.knobColor]: globalRefs$9.colors.error.main,
5767
- [vars$b.labelTextColor]: globalRefs$9.colors.error.main
5816
+ [vars$d.switchOutlineColor]: globalRefs$9.colors.error.main,
5817
+ [vars$d.trackBorderColor]: globalRefs$9.colors.error.main,
5818
+ [vars$d.knobColor]: globalRefs$9.colors.error.main,
5819
+ [vars$d.labelTextColor]: globalRefs$9.colors.error.main
5768
5820
  },
5769
5821
  };
5770
5822
 
5823
+ var switchToggle$1 = /*#__PURE__*/Object.freeze({
5824
+ __proto__: null,
5825
+ default: switchToggle,
5826
+ vars: vars$d
5827
+ });
5828
+
5771
5829
  const globalRefs$8 = getThemeRefs(globals);
5772
5830
 
5773
- const vars$a = ContainerClass.cssVarList;
5831
+ const compVars$1 = ContainerClass.cssVarList;
5774
5832
 
5775
5833
  const verticalAlignment = {
5776
5834
  start: { verticalAlignment: 'start' },
@@ -5784,7 +5842,7 @@ const horizontalAlignment = {
5784
5842
  end: { horizontalAlignment: 'end' },
5785
5843
  };
5786
5844
 
5787
- const [helperTheme$1, helperRefs$1, helperVars] =
5845
+ const [helperTheme$1, helperRefs$1, helperVars$1] =
5788
5846
  createHelperVars({
5789
5847
  verticalAlignment,
5790
5848
  horizontalAlignment,
@@ -5793,511 +5851,574 @@ const [helperTheme$1, helperRefs$1, helperVars] =
5793
5851
 
5794
5852
  const container = {
5795
5853
  ...helperTheme$1,
5796
- [vars$a.width]: '100%',
5797
- [vars$a.boxShadow]: 'none',
5798
- [vars$a.backgroundColor]: globalRefs$8.colors.surface.light,
5799
- [vars$a.color]: globalRefs$8.colors.surface.contrast,
5854
+ [compVars$1.width]: '100%',
5855
+ [compVars$1.boxShadow]: 'none',
5856
+ [compVars$1.backgroundColor]: globalRefs$8.colors.surface.light,
5857
+ [compVars$1.color]: globalRefs$8.colors.surface.contrast,
5800
5858
  verticalPadding: {
5801
- sm: { [vars$a.verticalPadding]: '5px' },
5802
- md: { [vars$a.verticalPadding]: '10px' },
5803
- lg: { [vars$a.verticalPadding]: '20px' },
5859
+ sm: { [compVars$1.verticalPadding]: '5px' },
5860
+ md: { [compVars$1.verticalPadding]: '10px' },
5861
+ lg: { [compVars$1.verticalPadding]: '20px' },
5804
5862
  },
5805
5863
  horizontalPadding: {
5806
- sm: { [vars$a.horizontalPadding]: '5px' },
5807
- md: { [vars$a.horizontalPadding]: '10px' },
5808
- lg: { [vars$a.horizontalPadding]: '20px' },
5864
+ sm: { [compVars$1.horizontalPadding]: '5px' },
5865
+ md: { [compVars$1.horizontalPadding]: '10px' },
5866
+ lg: { [compVars$1.horizontalPadding]: '20px' },
5809
5867
  },
5810
5868
  direction: {
5811
5869
  row: {
5812
- [vars$a.flexDirection]: 'row',
5813
- [vars$a.alignItems]: helperRefs$1.verticalAlignment,
5814
- [vars$a.justifyContent]: helperRefs$1.horizontalAlignment,
5815
- [vars$a.flexWrap]: 'wrap',
5870
+ [compVars$1.flexDirection]: 'row',
5871
+ [compVars$1.alignItems]: helperRefs$1.verticalAlignment,
5872
+ [compVars$1.justifyContent]: helperRefs$1.horizontalAlignment,
5873
+ [compVars$1.flexWrap]: 'wrap',
5816
5874
  horizontalAlignment: {
5817
- spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
5875
+ spaceBetween: { [helperVars$1.horizontalAlignment]: 'space-between' },
5818
5876
  }
5819
5877
  },
5820
5878
 
5821
5879
  column: {
5822
- [vars$a.flexDirection]: 'column',
5823
- [vars$a.alignItems]: helperRefs$1.horizontalAlignment,
5824
- [vars$a.justifyContent]: helperRefs$1.verticalAlignment,
5880
+ [compVars$1.flexDirection]: 'column',
5881
+ [compVars$1.alignItems]: helperRefs$1.horizontalAlignment,
5882
+ [compVars$1.justifyContent]: helperRefs$1.verticalAlignment,
5825
5883
  verticalAlignment: {
5826
- spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
5884
+ spaceBetween: { [helperVars$1.verticalAlignment]: 'space-between' }
5827
5885
  }
5828
5886
  },
5829
5887
  },
5830
5888
 
5831
5889
  spaceBetween: {
5832
5890
  sm: {
5833
- [vars$a.gap]: '10px'
5891
+ [compVars$1.gap]: '10px'
5834
5892
  },
5835
5893
  md: {
5836
- [vars$a.gap]: '20px'
5894
+ [compVars$1.gap]: '20px'
5837
5895
  },
5838
5896
  lg: {
5839
- [vars$a.gap]: '30px'
5897
+ [compVars$1.gap]: '30px'
5840
5898
  }
5841
5899
  },
5842
5900
 
5843
5901
  shadow: {
5844
5902
  sm: {
5845
- [vars$a.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
5903
+ [compVars$1.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
5846
5904
  },
5847
5905
  md: {
5848
- [vars$a.boxShadow]: `${globalRefs$8.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.md} ${helperRefs$1.shadowColor}`
5906
+ [compVars$1.boxShadow]: `${globalRefs$8.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.md} ${helperRefs$1.shadowColor}`
5849
5907
  },
5850
5908
  lg: {
5851
- [vars$a.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
5909
+ [compVars$1.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
5852
5910
  },
5853
5911
  xl: {
5854
- [vars$a.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
5912
+ [compVars$1.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
5855
5913
  },
5856
5914
  '2xl': {
5857
- [helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings
5858
- [vars$a.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
5915
+ [helperVars$1.shadowColor]: '#00000050', // mimic daisyUI shadow settings
5916
+ [compVars$1.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
5859
5917
  },
5860
5918
  },
5861
5919
 
5862
5920
  borderRadius: {
5863
5921
  sm: {
5864
- [vars$a.borderRadius]: globalRefs$8.radius.sm
5922
+ [compVars$1.borderRadius]: globalRefs$8.radius.sm
5865
5923
  },
5866
5924
  md: {
5867
- [vars$a.borderRadius]: globalRefs$8.radius.md
5925
+ [compVars$1.borderRadius]: globalRefs$8.radius.md
5868
5926
  },
5869
5927
  lg: {
5870
- [vars$a.borderRadius]: globalRefs$8.radius.lg
5928
+ [compVars$1.borderRadius]: globalRefs$8.radius.lg
5871
5929
  },
5872
5930
  xl: {
5873
- [vars$a.borderRadius]: globalRefs$8.radius.xl
5931
+ [compVars$1.borderRadius]: globalRefs$8.radius.xl
5874
5932
  },
5875
5933
  '2xl': {
5876
- [vars$a.borderRadius]: globalRefs$8.radius['2xl']
5934
+ [compVars$1.borderRadius]: globalRefs$8.radius['2xl']
5877
5935
  },
5878
5936
  '3xl': {
5879
- [vars$a.borderRadius]: globalRefs$8.radius['3xl']
5937
+ [compVars$1.borderRadius]: globalRefs$8.radius['3xl']
5880
5938
  },
5881
5939
  }
5882
5940
  };
5941
+ const vars$c = { ...compVars$1, ...helperVars$1 };
5942
+
5943
+ var container$1 = /*#__PURE__*/Object.freeze({
5944
+ __proto__: null,
5945
+ default: container,
5946
+ vars: vars$c
5947
+ });
5883
5948
 
5884
- const vars$9 = LogoClass.cssVarList;
5949
+ const vars$b = LogoClass.cssVarList;
5885
5950
 
5886
5951
  const logo = {
5887
- [vars$9.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)'
5952
+ [vars$b.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)'
5888
5953
  };
5889
5954
 
5955
+ var logo$1 = /*#__PURE__*/Object.freeze({
5956
+ __proto__: null,
5957
+ default: logo,
5958
+ vars: vars$b
5959
+ });
5960
+
5890
5961
  const globalRefs$7 = getThemeRefs(globals);
5891
5962
 
5892
- const vars$8 = TextClass.cssVarList;
5963
+ const vars$a = TextClass.cssVarList;
5893
5964
 
5894
5965
  const text = {
5895
- [vars$8.lineHeight]: '1em',
5896
- [vars$8.textAlign]: 'left',
5897
- [vars$8.color]: globalRefs$7.colors.surface.dark,
5966
+ [vars$a.lineHeight]: '1em',
5967
+ [vars$a.textAlign]: 'left',
5968
+ [vars$a.color]: globalRefs$7.colors.surface.dark,
5898
5969
  variant: {
5899
5970
  h1: {
5900
- [vars$8.fontSize]: globalRefs$7.typography.h1.size,
5901
- [vars$8.fontWeight]: globalRefs$7.typography.h1.weight,
5902
- [vars$8.fontFamily]: globalRefs$7.typography.h1.font
5971
+ [vars$a.fontSize]: globalRefs$7.typography.h1.size,
5972
+ [vars$a.fontWeight]: globalRefs$7.typography.h1.weight,
5973
+ [vars$a.fontFamily]: globalRefs$7.typography.h1.font
5903
5974
  },
5904
5975
  h2: {
5905
- [vars$8.fontSize]: globalRefs$7.typography.h2.size,
5906
- [vars$8.fontWeight]: globalRefs$7.typography.h2.weight,
5907
- [vars$8.fontFamily]: globalRefs$7.typography.h2.font
5976
+ [vars$a.fontSize]: globalRefs$7.typography.h2.size,
5977
+ [vars$a.fontWeight]: globalRefs$7.typography.h2.weight,
5978
+ [vars$a.fontFamily]: globalRefs$7.typography.h2.font
5908
5979
  },
5909
5980
  h3: {
5910
- [vars$8.fontSize]: globalRefs$7.typography.h3.size,
5911
- [vars$8.fontWeight]: globalRefs$7.typography.h3.weight,
5912
- [vars$8.fontFamily]: globalRefs$7.typography.h3.font
5981
+ [vars$a.fontSize]: globalRefs$7.typography.h3.size,
5982
+ [vars$a.fontWeight]: globalRefs$7.typography.h3.weight,
5983
+ [vars$a.fontFamily]: globalRefs$7.typography.h3.font
5913
5984
  },
5914
5985
  subtitle1: {
5915
- [vars$8.fontSize]: globalRefs$7.typography.subtitle1.size,
5916
- [vars$8.fontWeight]: globalRefs$7.typography.subtitle1.weight,
5917
- [vars$8.fontFamily]: globalRefs$7.typography.subtitle1.font
5986
+ [vars$a.fontSize]: globalRefs$7.typography.subtitle1.size,
5987
+ [vars$a.fontWeight]: globalRefs$7.typography.subtitle1.weight,
5988
+ [vars$a.fontFamily]: globalRefs$7.typography.subtitle1.font
5918
5989
  },
5919
5990
  subtitle2: {
5920
- [vars$8.fontSize]: globalRefs$7.typography.subtitle2.size,
5921
- [vars$8.fontWeight]: globalRefs$7.typography.subtitle2.weight,
5922
- [vars$8.fontFamily]: globalRefs$7.typography.subtitle2.font
5991
+ [vars$a.fontSize]: globalRefs$7.typography.subtitle2.size,
5992
+ [vars$a.fontWeight]: globalRefs$7.typography.subtitle2.weight,
5993
+ [vars$a.fontFamily]: globalRefs$7.typography.subtitle2.font
5923
5994
  },
5924
5995
  body1: {
5925
- [vars$8.fontSize]: globalRefs$7.typography.body1.size,
5926
- [vars$8.fontWeight]: globalRefs$7.typography.body1.weight,
5927
- [vars$8.fontFamily]: globalRefs$7.typography.body1.font
5996
+ [vars$a.fontSize]: globalRefs$7.typography.body1.size,
5997
+ [vars$a.fontWeight]: globalRefs$7.typography.body1.weight,
5998
+ [vars$a.fontFamily]: globalRefs$7.typography.body1.font
5928
5999
  },
5929
6000
  body2: {
5930
- [vars$8.fontSize]: globalRefs$7.typography.body2.size,
5931
- [vars$8.fontWeight]: globalRefs$7.typography.body2.weight,
5932
- [vars$8.fontFamily]: globalRefs$7.typography.body2.font
6001
+ [vars$a.fontSize]: globalRefs$7.typography.body2.size,
6002
+ [vars$a.fontWeight]: globalRefs$7.typography.body2.weight,
6003
+ [vars$a.fontFamily]: globalRefs$7.typography.body2.font
5933
6004
  }
5934
6005
  },
5935
6006
  mode: {
5936
6007
  primary: {
5937
- [vars$8.color]: globalRefs$7.colors.primary.main
6008
+ [vars$a.color]: globalRefs$7.colors.primary.main
5938
6009
  },
5939
6010
  secondary: {
5940
- [vars$8.color]: globalRefs$7.colors.secondary.main
6011
+ [vars$a.color]: globalRefs$7.colors.secondary.main
5941
6012
  },
5942
6013
  error: {
5943
- [vars$8.color]: globalRefs$7.colors.error.main
6014
+ [vars$a.color]: globalRefs$7.colors.error.main
5944
6015
  },
5945
6016
  success: {
5946
- [vars$8.color]: globalRefs$7.colors.success.main
6017
+ [vars$a.color]: globalRefs$7.colors.success.main
5947
6018
  }
5948
6019
  },
5949
6020
  textAlign: {
5950
- right: { [vars$8.textAlign]: 'right' },
5951
- left: { [vars$8.textAlign]: 'left' },
5952
- center: { [vars$8.textAlign]: 'center' }
6021
+ right: { [vars$a.textAlign]: 'right' },
6022
+ left: { [vars$a.textAlign]: 'left' },
6023
+ center: { [vars$a.textAlign]: 'center' }
5953
6024
  },
5954
6025
  _fullWidth: {
5955
- [vars$8.width]: '100%',
6026
+ [vars$a.width]: '100%',
5956
6027
  },
5957
6028
  _italic: {
5958
- [vars$8.fontStyle]: 'italic'
6029
+ [vars$a.fontStyle]: 'italic'
5959
6030
  },
5960
6031
  _uppercase: {
5961
- [vars$8.textTransform]: 'uppercase'
6032
+ [vars$a.textTransform]: 'uppercase'
5962
6033
  },
5963
6034
  _lowercase: {
5964
- [vars$8.textTransform]: 'lowercase'
6035
+ [vars$a.textTransform]: 'lowercase'
5965
6036
  }
5966
6037
  };
5967
6038
 
6039
+ var text$1 = /*#__PURE__*/Object.freeze({
6040
+ __proto__: null,
6041
+ default: text,
6042
+ vars: vars$a
6043
+ });
6044
+
5968
6045
  const globalRefs$6 = getThemeRefs(globals);
5969
- const vars$7 = LinkClass.cssVarList;
6046
+ const vars$9 = LinkClass.cssVarList;
5970
6047
 
5971
6048
  const link = {
5972
- [vars$7.cursor]: 'pointer',
5973
- [vars$7.borderBottomWidth]: '2px',
5974
- [vars$7.borderBottomStyle]: 'solid',
5975
- [vars$7.borderBottomColor]: 'transparent',
5976
- [vars$7.color]: globalRefs$6.colors.primary.main,
6049
+ [vars$9.cursor]: 'pointer',
6050
+ [vars$9.borderBottomWidth]: '2px',
6051
+ [vars$9.borderBottomStyle]: 'solid',
6052
+ [vars$9.borderBottomColor]: 'transparent',
6053
+ [vars$9.color]: globalRefs$6.colors.primary.main,
5977
6054
 
5978
6055
  _hover: {
5979
- [vars$7.borderBottomColor]: globalRefs$6.colors.primary.main
6056
+ [vars$9.borderBottomColor]: globalRefs$6.colors.primary.main
5980
6057
  },
5981
6058
 
5982
6059
  textAlign: {
5983
- right: { [vars$7.textAlign]: 'right' },
5984
- left: { [vars$7.textAlign]: 'left' },
5985
- center: { [vars$7.textAlign]: 'center' }
6060
+ right: { [vars$9.textAlign]: 'right' },
6061
+ left: { [vars$9.textAlign]: 'left' },
6062
+ center: { [vars$9.textAlign]: 'center' }
5986
6063
  },
5987
6064
 
5988
6065
  _fullWidth: {
5989
- [vars$7.width]: '100%'
6066
+ [vars$9.width]: '100%'
5990
6067
  },
5991
6068
 
5992
6069
  mode: {
5993
6070
  primary: {
5994
- [vars$7.color]: globalRefs$6.colors.primary.main,
6071
+ [vars$9.color]: globalRefs$6.colors.primary.main,
5995
6072
  _hover: {
5996
- [vars$7.borderBottomColor]: globalRefs$6.colors.primary.main
6073
+ [vars$9.borderBottomColor]: globalRefs$6.colors.primary.main
5997
6074
  }
5998
6075
  },
5999
6076
  secondary: {
6000
- [vars$7.color]: globalRefs$6.colors.secondary.main,
6077
+ [vars$9.color]: globalRefs$6.colors.secondary.main,
6001
6078
  _hover: {
6002
- [vars$7.borderBottomColor]: globalRefs$6.colors.secondary.main
6079
+ [vars$9.borderBottomColor]: globalRefs$6.colors.secondary.main
6003
6080
  }
6004
6081
  },
6005
6082
  error: {
6006
- [vars$7.color]: globalRefs$6.colors.error.main,
6083
+ [vars$9.color]: globalRefs$6.colors.error.main,
6007
6084
  _hover: {
6008
- [vars$7.borderBottomColor]: globalRefs$6.colors.error.main
6085
+ [vars$9.borderBottomColor]: globalRefs$6.colors.error.main
6009
6086
  }
6010
6087
  },
6011
6088
  success: {
6012
- [vars$7.color]: globalRefs$6.colors.success.main,
6089
+ [vars$9.color]: globalRefs$6.colors.success.main,
6013
6090
  _hover: {
6014
- [vars$7.borderBottomColor]: globalRefs$6.colors.success.main
6091
+ [vars$9.borderBottomColor]: globalRefs$6.colors.success.main
6015
6092
  }
6016
6093
  }
6017
6094
  }
6018
6095
  };
6019
6096
 
6097
+ var link$1 = /*#__PURE__*/Object.freeze({
6098
+ __proto__: null,
6099
+ default: link,
6100
+ vars: vars$9
6101
+ });
6102
+
6020
6103
  const globalRefs$5 = getThemeRefs(globals);
6021
6104
 
6022
- const vars$6 = DividerClass.cssVarList;
6105
+ const compVars = DividerClass.cssVarList;
6023
6106
 
6024
6107
  const thickness = '2px';
6025
6108
  const textPaddingSize = '10px';
6026
- const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$g);
6109
+ const [helperTheme, helperRefs, helperVars] = createHelperVars({ thickness, textPaddingSize }, componentName$g);
6027
6110
 
6028
6111
  const divider = {
6029
6112
  ...helperTheme,
6030
- [vars$6.alignItems]: 'center',
6031
- [vars$6.dividerHeight]: helperRefs.thickness,
6032
- [vars$6.backgroundColor]: globalRefs$5.colors.surface.main,
6033
- [vars$6.textPadding]: `0 ${helperRefs.textPaddingSize}`,
6034
- [vars$6.width]: '100%',
6035
- [vars$6.flexDirection]: 'row',
6036
- [vars$6.alignSelf]: 'strech',
6037
- [vars$6.textWidth]: 'fit-content',
6038
- [vars$6.maxTextWidth]: 'calc(100% - 100px)',
6113
+ [compVars.alignItems]: 'center',
6114
+ [compVars.dividerHeight]: helperRefs.thickness,
6115
+ [compVars.backgroundColor]: globalRefs$5.colors.surface.main,
6116
+ [compVars.textPadding]: `0 ${helperRefs.textPaddingSize}`,
6117
+ [compVars.width]: '100%',
6118
+ [compVars.flexDirection]: 'row',
6119
+ [compVars.alignSelf]: 'strech',
6120
+ [compVars.textWidth]: 'fit-content',
6121
+ [compVars.maxTextWidth]: 'calc(100% - 100px)',
6039
6122
  _vertical: {
6040
- [vars$6.padding]: `0 calc(${thickness} * 3)`,
6041
- [vars$6.width]: 'fit-content',
6042
- [vars$6.textPadding]: `${helperRefs.textPaddingSize} 0`,
6043
- [vars$6.flexDirection]: 'column',
6044
- [vars$6.minHeight]: '200px',
6045
- [vars$6.textWidth]: 'fit-content',
6046
- [vars$6.dividerWidth]: helperRefs.thickness,
6047
- [vars$6.maxTextWidth]: '100%',
6123
+ [compVars.padding]: `0 calc(${thickness} * 3)`,
6124
+ [compVars.width]: 'fit-content',
6125
+ [compVars.textPadding]: `${helperRefs.textPaddingSize} 0`,
6126
+ [compVars.flexDirection]: 'column',
6127
+ [compVars.minHeight]: '200px',
6128
+ [compVars.textWidth]: 'fit-content',
6129
+ [compVars.dividerWidth]: helperRefs.thickness,
6130
+ [compVars.maxTextWidth]: '100%',
6048
6131
  }
6049
6132
  };
6133
+ const vars$8 = { ...compVars, ...helperVars };
6050
6134
 
6051
- const vars$5 = PasscodeClass.cssVarList;
6135
+ var divider$1 = /*#__PURE__*/Object.freeze({
6136
+ __proto__: null,
6137
+ default: divider,
6138
+ vars: vars$8
6139
+ });
6140
+
6141
+ const vars$7 = PasscodeClass.cssVarList;
6052
6142
  const globalRefs$4 = getThemeRefs(globals);
6053
6143
 
6054
6144
  const passcode = {
6055
- [vars$5.backgroundColor]: globalRefs$4.colors.surface.light,
6056
- [vars$5.outlineWidth]: '2px',
6057
- [vars$5.outlineColor]: 'transparent',
6058
- [vars$5.padding]: '0',
6059
- [vars$5.textAlign]: 'center',
6060
- [vars$5.borderColor]: 'transparent',
6061
- [vars$5.digitsGap]: '0',
6062
- [vars$5.focusedDigitFieldOutlineColor]: globalRefs$4.colors.surface.main,
6063
- [vars$5.color]: globalRefs$4.colors.surface.contrast,
6145
+ [vars$7.backgroundColor]: globalRefs$4.colors.surface.light,
6146
+ [vars$7.outlineWidth]: '2px',
6147
+ [vars$7.outlineColor]: 'transparent',
6148
+ [vars$7.padding]: '0',
6149
+ [vars$7.textAlign]: 'center',
6150
+ [vars$7.borderColor]: 'transparent',
6151
+ [vars$7.digitsGap]: '0',
6152
+ [vars$7.focusedDigitFieldOutlineColor]: globalRefs$4.colors.surface.main,
6153
+ [vars$7.color]: globalRefs$4.colors.surface.contrast,
6064
6154
 
6065
6155
  _hideCursor: {
6066
- [vars$5.caretColor]: 'transparent',
6156
+ [vars$7.caretColor]: 'transparent',
6067
6157
  },
6068
6158
 
6069
6159
  _disabled: {
6070
- [vars$5.backgroundColor]: globalRefs$4.colors.surface.main
6160
+ [vars$7.backgroundColor]: globalRefs$4.colors.surface.main
6071
6161
  },
6072
6162
 
6073
6163
  _fullWidth: {
6074
- [vars$5.width]: '100%'
6164
+ [vars$7.width]: '100%'
6075
6165
  },
6076
6166
 
6077
6167
  _bordered: {
6078
- [vars$5.borderColor]: globalRefs$4.colors.surface.main
6168
+ [vars$7.borderColor]: globalRefs$4.colors.surface.main
6079
6169
  },
6080
6170
 
6081
6171
  _invalid: {
6082
- [vars$5.borderColor]: globalRefs$4.colors.error.main,
6083
- [vars$5.color]: globalRefs$4.colors.error.main,
6084
- [vars$5.focusedDigitFieldOutlineColor]: globalRefs$4.colors.error.light,
6172
+ [vars$7.borderColor]: globalRefs$4.colors.error.main,
6173
+ [vars$7.color]: globalRefs$4.colors.error.main,
6174
+ [vars$7.focusedDigitFieldOutlineColor]: globalRefs$4.colors.error.light,
6085
6175
  },
6086
6176
  };
6087
6177
 
6178
+ var passcode$1 = /*#__PURE__*/Object.freeze({
6179
+ __proto__: null,
6180
+ default: passcode,
6181
+ vars: vars$7
6182
+ });
6183
+
6088
6184
  const globalRefs$3 = getThemeRefs(globals);
6089
6185
 
6090
- const vars$4 = LoaderLinearClass.cssVarList;
6186
+ const vars$6 = LoaderLinearClass.cssVarList;
6091
6187
 
6092
6188
  const loaderLinear = {
6093
- [vars$4.display]: 'inline-block',
6094
- [vars$4.barColor]: globalRefs$3.colors.surface.contrast,
6095
- [vars$4.barWidth]: '20%',
6096
- [vars$4.surfaceColor]: globalRefs$3.colors.surface.main,
6097
- [vars$4.borderRadius]: '4px',
6098
- [vars$4.animationDuration]: '2s',
6099
- [vars$4.animationTimingFunction]: 'linear',
6100
- [vars$4.animationIterationCount]: 'infinite',
6101
- [vars$4.width]: '100%',
6189
+ [vars$6.display]: 'inline-block',
6190
+ [vars$6.barColor]: globalRefs$3.colors.surface.contrast,
6191
+ [vars$6.barWidth]: '20%',
6192
+ [vars$6.surfaceColor]: globalRefs$3.colors.surface.main,
6193
+ [vars$6.borderRadius]: '4px',
6194
+ [vars$6.animationDuration]: '2s',
6195
+ [vars$6.animationTimingFunction]: 'linear',
6196
+ [vars$6.animationIterationCount]: 'infinite',
6197
+ [vars$6.width]: '100%',
6102
6198
  size: {
6103
6199
  xs: {
6104
- [vars$4.height]: '6px'
6200
+ [vars$6.height]: '6px'
6105
6201
  },
6106
6202
  sm: {
6107
- [vars$4.height]: '8px'
6203
+ [vars$6.height]: '8px'
6108
6204
  },
6109
6205
  md: {
6110
- [vars$4.height]: '10px'
6206
+ [vars$6.height]: '10px'
6111
6207
  },
6112
6208
  lg: {
6113
- [vars$4.height]: '12px'
6209
+ [vars$6.height]: '12px'
6114
6210
  },
6115
6211
  xl: {
6116
- [vars$4.height]: '14px'
6212
+ [vars$6.height]: '14px'
6117
6213
  }
6118
6214
  },
6119
6215
  mode: {
6120
6216
  primary: {
6121
- [vars$4.barColor]: globalRefs$3.colors.primary.main
6217
+ [vars$6.barColor]: globalRefs$3.colors.primary.main
6122
6218
  },
6123
6219
  secondary: {
6124
- [vars$4.barColor]: globalRefs$3.colors.secondary.main
6220
+ [vars$6.barColor]: globalRefs$3.colors.secondary.main
6125
6221
  }
6126
6222
  },
6127
6223
  _hidden: {
6128
- [vars$4.display]: 'none'
6224
+ [vars$6.display]: 'none'
6129
6225
  }
6130
6226
  };
6131
6227
 
6228
+ var loaderLinear$1 = /*#__PURE__*/Object.freeze({
6229
+ __proto__: null,
6230
+ default: loaderLinear,
6231
+ vars: vars$6
6232
+ });
6233
+
6132
6234
  const globalRefs$2 = getThemeRefs(globals);
6133
6235
 
6134
- const vars$3 = LoaderRadialClass.cssVarList;
6236
+ const vars$5 = LoaderRadialClass.cssVarList;
6135
6237
 
6136
6238
  const loaderRadial = {
6137
- [vars$3.display]: 'inline-block',
6138
- [vars$3.color]: globalRefs$2.colors.surface.contrast,
6139
- [vars$3.animationDuration]: '2s',
6140
- [vars$3.animationTimingFunction]: 'linear',
6141
- [vars$3.animationIterationCount]: 'infinite',
6142
- [vars$3.spinnerStyle]: 'solid',
6143
- [vars$3.spinnerWidth]: '4px',
6144
- [vars$3.spinnerRadius]: '50%',
6145
- [vars$3.spinnerTopColor]: 'currentColor',
6146
- [vars$3.spinnerBottomColor]: 'transparent',
6147
- [vars$3.spinnerRightColor]: 'currentColor',
6148
- [vars$3.spinnerLeftColor]: 'transparent',
6239
+ [vars$5.display]: 'inline-block',
6240
+ [vars$5.color]: globalRefs$2.colors.surface.contrast,
6241
+ [vars$5.animationDuration]: '2s',
6242
+ [vars$5.animationTimingFunction]: 'linear',
6243
+ [vars$5.animationIterationCount]: 'infinite',
6244
+ [vars$5.spinnerStyle]: 'solid',
6245
+ [vars$5.spinnerWidth]: '4px',
6246
+ [vars$5.spinnerRadius]: '50%',
6247
+ [vars$5.spinnerTopColor]: 'currentColor',
6248
+ [vars$5.spinnerBottomColor]: 'transparent',
6249
+ [vars$5.spinnerRightColor]: 'currentColor',
6250
+ [vars$5.spinnerLeftColor]: 'transparent',
6149
6251
  size: {
6150
6252
  xs: {
6151
- [vars$3.width]: '20px',
6152
- [vars$3.height]: '20px',
6153
- [vars$3.spinnerWidth]: '2px'
6253
+ [vars$5.width]: '20px',
6254
+ [vars$5.height]: '20px',
6255
+ [vars$5.spinnerWidth]: '2px'
6154
6256
  },
6155
6257
  sm: {
6156
- [vars$3.width]: '30px',
6157
- [vars$3.height]: '30px',
6158
- [vars$3.spinnerWidth]: '3px'
6258
+ [vars$5.width]: '30px',
6259
+ [vars$5.height]: '30px',
6260
+ [vars$5.spinnerWidth]: '3px'
6159
6261
  },
6160
6262
  md: {
6161
- [vars$3.width]: '40px',
6162
- [vars$3.height]: '40px',
6163
- [vars$3.spinnerWidth]: '4px'
6263
+ [vars$5.width]: '40px',
6264
+ [vars$5.height]: '40px',
6265
+ [vars$5.spinnerWidth]: '4px'
6164
6266
  },
6165
6267
  lg: {
6166
- [vars$3.width]: '60px',
6167
- [vars$3.height]: '60px',
6168
- [vars$3.spinnerWidth]: '5px'
6268
+ [vars$5.width]: '60px',
6269
+ [vars$5.height]: '60px',
6270
+ [vars$5.spinnerWidth]: '5px'
6169
6271
  },
6170
6272
  xl: {
6171
- [vars$3.width]: '80px',
6172
- [vars$3.height]: '80px',
6173
- [vars$3.spinnerWidth]: '6px'
6273
+ [vars$5.width]: '80px',
6274
+ [vars$5.height]: '80px',
6275
+ [vars$5.spinnerWidth]: '6px'
6174
6276
  }
6175
6277
  },
6176
6278
  mode: {
6177
6279
  primary: {
6178
- [vars$3.color]: globalRefs$2.colors.primary.main
6280
+ [vars$5.color]: globalRefs$2.colors.primary.main
6179
6281
  },
6180
6282
  secondary: {
6181
- [vars$3.color]: globalRefs$2.colors.secondary.main
6283
+ [vars$5.color]: globalRefs$2.colors.secondary.main
6182
6284
  }
6183
6285
  },
6184
6286
  _hidden: {
6185
- [vars$3.display]: 'none'
6287
+ [vars$5.display]: 'none'
6186
6288
  }
6187
6289
  };
6188
6290
 
6291
+ var loaderRadial$1 = /*#__PURE__*/Object.freeze({
6292
+ __proto__: null,
6293
+ default: loaderRadial,
6294
+ vars: vars$5
6295
+ });
6296
+
6189
6297
  const globalRefs$1 = getThemeRefs(globals);
6190
6298
 
6191
- const vars$2 = ComboBoxClass.cssVarList;
6299
+ const vars$4 = ComboBoxClass.cssVarList;
6192
6300
 
6193
6301
  const comboBox = {
6194
- [vars$2.borderColor]: globalRefs$1.colors.surface.main,
6195
- [vars$2.borderWidth]: '1px',
6196
- [vars$2.borderStyle]: 'solid',
6197
- [vars$2.cursor]: 'pointer',
6198
- [vars$2.padding]: '0',
6199
- [vars$2.placeholderColor]: globalRefs$1.colors.surface.main,
6200
- [vars$2.toggleColor]: globalRefs$1.colors.surface.contrast,
6201
- [vars$2.toggleCursor]: 'pointer',
6202
- [vars$2.inputBackgroundColor]: globalRefs$1.colors.surface.light,
6203
- [vars$2.padding]: `0 ${globalRefs$1.spacing.xs}`,
6204
-
6205
- [vars$2.height]: '2em',
6302
+ [vars$4.borderColor]: globalRefs$1.colors.surface.main,
6303
+ [vars$4.borderWidth]: '1px',
6304
+ [vars$4.borderStyle]: 'solid',
6305
+ [vars$4.cursor]: 'pointer',
6306
+ [vars$4.padding]: '0',
6307
+ [vars$4.placeholderColor]: globalRefs$1.colors.surface.main,
6308
+ [vars$4.toggleColor]: globalRefs$1.colors.surface.contrast,
6309
+ [vars$4.toggleCursor]: 'pointer',
6310
+ [vars$4.inputBackgroundColor]: globalRefs$1.colors.surface.light,
6311
+ [vars$4.padding]: `0 ${globalRefs$1.spacing.xs}`,
6312
+
6313
+ [vars$4.height]: '2em',
6206
6314
 
6207
6315
  size: {
6208
6316
  xs: {
6209
- [vars$2.fontSize]: '8px',
6317
+ [vars$4.fontSize]: '8px',
6210
6318
  },
6211
6319
  sm: {
6212
- [vars$2.fontSize]: '10px',
6320
+ [vars$4.fontSize]: '10px',
6213
6321
  },
6214
6322
  md: {
6215
- [vars$2.fontSize]: '14px',
6323
+ [vars$4.fontSize]: '14px',
6216
6324
  },
6217
6325
  lg: {
6218
- [vars$2.fontSize]: '20px',
6326
+ [vars$4.fontSize]: '20px',
6219
6327
  },
6220
6328
  xl: {
6221
- [vars$2.fontSize]: '25px',
6329
+ [vars$4.fontSize]: '25px',
6222
6330
  }
6223
6331
  },
6224
6332
 
6225
6333
  _readonly: {
6226
- [vars$2.toggleCursor]: 'default',
6334
+ [vars$4.toggleCursor]: 'default',
6227
6335
  },
6228
6336
 
6229
6337
  _invalid: {
6230
- [vars$2.borderColor]: globalRefs$1.colors.error.main,
6231
- [vars$2.placeholderColor]: globalRefs$1.colors.error.light,
6232
- [vars$2.toggleColor]: globalRefs$1.colors.error.main,
6338
+ [vars$4.borderColor]: globalRefs$1.colors.error.main,
6339
+ [vars$4.placeholderColor]: globalRefs$1.colors.error.light,
6340
+ [vars$4.toggleColor]: globalRefs$1.colors.error.main,
6233
6341
  },
6234
6342
  // [vars.overlayCursor]: 'pointer',
6235
6343
  // [vars.overlayBackground]: globalRefs.colors.surface.light,
6236
6344
  // [vars.overlayBorder]: `2px solid red`,
6237
6345
  };
6238
6346
 
6239
- ImageClass.cssVarList;
6347
+ var comboBox$1 = /*#__PURE__*/Object.freeze({
6348
+ __proto__: null,
6349
+ comboBox: comboBox,
6350
+ default: comboBox,
6351
+ vars: vars$4
6352
+ });
6353
+
6354
+ const vars$3 = ImageClass.cssVarList;
6240
6355
 
6241
6356
  const image = {};
6242
6357
 
6358
+ var image$1 = /*#__PURE__*/Object.freeze({
6359
+ __proto__: null,
6360
+ default: image,
6361
+ vars: vars$3
6362
+ });
6363
+
6243
6364
  const globalRefs = getThemeRefs(globals);
6244
- const vars$1 = PhoneFieldClass.cssVarList;
6365
+ const vars$2 = PhoneFieldClass.cssVarList;
6245
6366
 
6246
6367
  const phoneField = {
6247
- [vars$1.wrapperBorderStyle]: 'solid',
6248
- [vars$1.wrapperBorderWidth]: '1px',
6249
- [vars$1.wrapperBorderColor]: 'transparent',
6250
- [vars$1.wrapperBorderRadius]: globalRefs.radius.xs,
6251
- [vars$1.placeholderColor]: globalRefs.colors.surface.main,
6252
- [vars$1.color]: globalRefs.colors.surface.contrast,
6368
+ [vars$2.wrapperBorderStyle]: 'solid',
6369
+ [vars$2.wrapperBorderWidth]: '1px',
6370
+ [vars$2.wrapperBorderColor]: 'transparent',
6371
+ [vars$2.wrapperBorderRadius]: globalRefs.radius.xs,
6372
+ [vars$2.placeholderColor]: globalRefs.colors.surface.main,
6373
+ [vars$2.color]: globalRefs.colors.surface.contrast,
6253
6374
 
6254
- [vars$1.phoneInputWidth]: '10em',
6255
- [vars$1.countryCodeInputWidth]: '5em',
6375
+ [vars$2.phoneInputWidth]: '10em',
6376
+ [vars$2.countryCodeInputWidth]: '5em',
6256
6377
 
6257
- [vars$1.inputHeight]: '2em',
6258
- [vars$1.countryCodeDropdownWidth]: '12em',
6378
+ [vars$2.inputHeight]: '2em',
6379
+ [vars$2.countryCodeDropdownWidth]: '12em',
6259
6380
 
6260
6381
  size: {
6261
6382
  xs: {
6262
- [vars$1.fontSize]: '8px',
6383
+ [vars$2.fontSize]: '8px',
6263
6384
  },
6264
6385
  sm: {
6265
- [vars$1.fontSize]: '20px',
6386
+ [vars$2.fontSize]: '20px',
6266
6387
  },
6267
6388
  md: {
6268
- [vars$1.fontSize]: '14px',
6389
+ [vars$2.fontSize]: '14px',
6269
6390
  },
6270
6391
  lg: {
6271
- [vars$1.fontSize]: '20px',
6392
+ [vars$2.fontSize]: '20px',
6272
6393
  },
6273
6394
  xl: {
6274
- [vars$1.fontSize]: '25px',
6395
+ [vars$2.fontSize]: '25px',
6275
6396
  }
6276
6397
  },
6277
6398
 
6278
6399
  _fullWidth: {
6279
- [vars$1.componentWidth]: '100%',
6280
- [vars$1.phoneInputWidth]: '100%',
6281
- [vars$1.countryCodeDropdownWidth]: '100%',
6400
+ [vars$2.componentWidth]: '100%',
6401
+ [vars$2.phoneInputWidth]: '100%',
6402
+ [vars$2.countryCodeDropdownWidth]: '100%',
6282
6403
  },
6283
6404
 
6284
6405
  _bordered: {
6285
- [vars$1.wrapperBorderColor]: globalRefs.colors.surface.main
6406
+ [vars$2.wrapperBorderColor]: globalRefs.colors.surface.main
6286
6407
  },
6287
6408
 
6288
- [vars$1.outlineStyle]: 'solid',
6289
- [vars$1.outlineWidth]: '0.1em',
6290
- [vars$1.outlineColor]: 'transparent',
6409
+ [vars$2.outlineStyle]: 'solid',
6410
+ [vars$2.outlineWidth]: '0.1em',
6411
+ [vars$2.outlineColor]: 'transparent',
6291
6412
 
6292
6413
  _focused: {
6293
- [vars$1.outlineColor]: globalRefs.colors.surface.main
6414
+ [vars$2.outlineColor]: globalRefs.colors.surface.main
6294
6415
  },
6295
6416
 
6296
6417
  _invalid: {
6297
- [vars$1.outlineColor]: globalRefs.colors.error.light,
6298
- [vars$1.color]: globalRefs.colors.error.main,
6299
- [vars$1.placeholderColor]: globalRefs.colors.error.light,
6300
- [vars$1.wrapperBorderColor]: globalRefs.colors.error.main
6418
+ [vars$2.outlineColor]: globalRefs.colors.error.light,
6419
+ [vars$2.color]: globalRefs.colors.error.main,
6420
+ [vars$2.placeholderColor]: globalRefs.colors.error.light,
6421
+ [vars$2.wrapperBorderColor]: globalRefs.colors.error.main
6301
6422
  },
6302
6423
 
6303
6424
  // '@overlay': {
@@ -6305,62 +6426,79 @@ const phoneField = {
6305
6426
  // }
6306
6427
  };
6307
6428
 
6308
- const vars = NewPasswordClass.cssVarList;
6429
+ var phoneField$1 = /*#__PURE__*/Object.freeze({
6430
+ __proto__: null,
6431
+ default: phoneField,
6432
+ vars: vars$2
6433
+ });
6434
+
6435
+ const vars$1 = NewPasswordClass.cssVarList;
6309
6436
 
6310
6437
  const newPassword = {
6311
- [vars.inputsGap]: '1em',
6438
+ [vars$1.inputsGap]: '1em',
6312
6439
 
6313
6440
  _required: {
6314
- [vars.requiredContent]: "'*'",
6441
+ [vars$1.requiredContent]: "'*'",
6315
6442
  },
6316
6443
 
6317
6444
  _fullWidth: {
6318
- [vars.componentWidth]: '100%'
6445
+ [vars$1.componentWidth]: '100%'
6319
6446
  },
6320
6447
 
6321
6448
  size: {
6322
6449
  xs: {
6323
- [vars.fontSize]: '8px',
6450
+ [vars$1.fontSize]: '8px',
6324
6451
  },
6325
6452
  sm: {
6326
- [vars.fontSize]: '10px',
6453
+ [vars$1.fontSize]: '10px',
6327
6454
  },
6328
6455
  md: {
6329
- [vars.fontSize]: '14px',
6456
+ [vars$1.fontSize]: '14px',
6330
6457
  },
6331
6458
  lg: {
6332
- [vars.fontSize]: '20px',
6459
+ [vars$1.fontSize]: '20px',
6333
6460
  },
6334
6461
  xl: {
6335
- [vars.fontSize]: '25px',
6462
+ [vars$1.fontSize]: '25px',
6336
6463
  }
6337
6464
  },
6338
6465
  };
6339
6466
 
6340
- var components = {
6341
- button,
6342
- textField: textField$1,
6343
- passwordField,
6344
- numberField,
6345
- emailField,
6346
- textArea,
6347
- checkbox,
6348
- switchToggle,
6349
- container,
6350
- logo,
6351
- text,
6352
- link,
6353
- divider,
6354
- passcode,
6355
- loaderRadial,
6356
- loaderLinear,
6357
- comboBox,
6358
- image,
6359
- phoneField,
6360
- newPassword,
6467
+ var newPassword$1 = /*#__PURE__*/Object.freeze({
6468
+ __proto__: null,
6469
+ default: newPassword,
6470
+ vars: vars$1
6471
+ });
6472
+
6473
+ const components = {
6474
+ button: button$1,
6475
+ textField: textField$2,
6476
+ passwordField: passwordField$1,
6477
+ numberField: numberField$1,
6478
+ emailField: emailField$1,
6479
+ textArea: textArea$1,
6480
+ checkbox: checkbox$1,
6481
+ switchToggle: switchToggle$1,
6482
+ container: container$1,
6483
+ logo: logo$1,
6484
+ text: text$1,
6485
+ link: link$1,
6486
+ divider: divider$1,
6487
+ passcode: passcode$1,
6488
+ loaderRadial: loaderRadial$1,
6489
+ loaderLinear: loaderLinear$1,
6490
+ comboBox: comboBox$1,
6491
+ image: image$1,
6492
+ phoneField: phoneField$1,
6493
+ newPassword: newPassword$1,
6361
6494
  };
6362
6495
 
6363
- var index = { globals, components };
6364
6496
 
6365
- export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordFieldClass, PhoneFieldClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, componentsThemeManager, createComponentsTheme, index as defaultTheme, genColor, globalsThemeToStyle, themeToStyle };
6497
+ const theme = Object.keys(components).reduce((acc, comp) => ({ ...acc, [comp]: components[comp].default }), {});
6498
+ const vars = Object.keys(components).reduce((acc, comp) => ({ ...acc, [comp]: components[comp].vars }), {});
6499
+
6500
+ const defaultTheme = { globals, components: theme };
6501
+ const themeVars = { globals: vars$l, components: vars };
6502
+
6503
+ export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordFieldClass, PhoneFieldClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
6366
6504
  //# sourceMappingURL=index.esm.js.map