@vygruppen/spor-react 12.24.5 → 12.24.6

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.
Files changed (13) hide show
  1. package/.turbo/turbo-build.log +12 -12
  2. package/.turbo/turbo-postinstall.log +2 -2
  3. package/CHANGELOG.md +8 -0
  4. package/dist/index.cjs +209 -192
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.d.cts +8 -10
  7. package/dist/index.d.ts +8 -10
  8. package/dist/index.mjs +209 -192
  9. package/dist/index.mjs.map +1 -1
  10. package/package.json +3 -3
  11. package/src/input/Autocomplete.tsx +8 -1
  12. package/src/input/Select.tsx +18 -6
  13. package/src/theme/slot-recipes/switch.ts +14 -15
package/dist/index.mjs CHANGED
@@ -19,9 +19,9 @@ import { LuMoon, LuSun } from 'react-icons/lu';
19
19
  import { useSwipeable } from 'react-swipeable';
20
20
  import { getSupportedCallingCodes } from 'awesome-phonenumber';
21
21
  import { Global } from '@emotion/react';
22
- import tokens23__default from '@vygruppen/spor-design-tokens';
23
- import * as tokens23 from '@vygruppen/spor-design-tokens';
24
- export { tokens23 as tokens };
22
+ import tokens22__default from '@vygruppen/spor-design-tokens';
23
+ import * as tokens22 from '@vygruppen/spor-design-tokens';
24
+ export { tokens22 as tokens };
25
25
  import tokens4 from '@vygruppen/spor-design-tokens/raw-tokens';
26
26
  import { comboboxAnatomy as comboboxAnatomy$1 } from '@ark-ui/react';
27
27
  import { createAnatomy } from '@ark-ui/react/anatomy';
@@ -3369,10 +3369,20 @@ var Autocomplete = ({
3369
3369
  ) }),
3370
3370
  /* @__PURE__ */ jsx(Combobox.IndicatorGroup, { children: /* @__PURE__ */ jsx(Combobox.ClearTrigger, { asChild: true, "aria-label": t(texts14.clearValue), children: /* @__PURE__ */ jsx(CloseButton, { size: "xs" }) }) })
3371
3371
  ] }),
3372
- /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsxs(Combobox.Content, { children: [
3373
- /* @__PURE__ */ jsx(Combobox.Empty, { children: !loading && (emptyLabel ?? t(texts14.noItemsFound)) }),
3374
- loading ? /* @__PURE__ */ jsx(ColorSpinner, { width: "1.5rem", p: "2" }) : /* @__PURE__ */ jsx(Fragment, { children: filteredChildren })
3375
- ] }) })
3372
+ /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsxs(
3373
+ Combobox.Content,
3374
+ {
3375
+ onBlur: (event) => {
3376
+ if (!event.currentTarget.contains(event.relatedTarget)) {
3377
+ combobox.setOpen(false);
3378
+ }
3379
+ },
3380
+ children: [
3381
+ /* @__PURE__ */ jsx(Combobox.Empty, { children: !loading && (emptyLabel ?? t(texts14.noItemsFound)) }),
3382
+ loading ? /* @__PURE__ */ jsx(ColorSpinner, { width: "1.5rem", p: "2" }) : /* @__PURE__ */ jsx(Fragment, { children: filteredChildren })
3383
+ ]
3384
+ }
3385
+ ) })
3376
3386
  ] });
3377
3387
  };
3378
3388
  var AutocompleteItemGroup = Combobox.ItemGroup;
@@ -4483,7 +4493,7 @@ var Select = React20.forwardRef(
4483
4493
  children: [
4484
4494
  /* @__PURE__ */ jsx(SelectTrigger, { "data-attachable": true, children: /* @__PURE__ */ jsx(SelectValueText, { withPlaceholder: label ? true : false }) }),
4485
4495
  label && /* @__PURE__ */ jsx(SelectLabel, { css: styles.label, children: label }),
4486
- /* @__PURE__ */ jsx(SelectContent, { css: styles.selectContent, children })
4496
+ /* @__PURE__ */ jsx(SelectContent, { css: styles.selectContent, baseStyle: css, children })
4487
4497
  ]
4488
4498
  }
4489
4499
  )
@@ -4510,7 +4520,7 @@ var SelectItem = React20.forwardRef(
4510
4520
  return /* @__PURE__ */ jsxs(Select$1.Item, { item, ...rest, ref, css: styles.item, children: [
4511
4521
  /* @__PURE__ */ jsxs(Box, { width: "100%", children: [
4512
4522
  /* @__PURE__ */ jsx(Select$1.ItemText, { display: "flex", children }),
4513
- description && /* @__PURE__ */ jsx(Box, { css: styles.itemDescription, children: description })
4523
+ description && /* @__PURE__ */ jsx(Box, { "data-part": "item-description", css: styles.itemDescription, children: description })
4514
4524
  ] }),
4515
4525
  /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckmarkFill18Icon, {}) })
4516
4526
  ] });
@@ -4530,10 +4540,17 @@ var SelectTrigger = React20.forwardRef(function SelectTrigger2(props, ref) {
4530
4540
  const styles = recipe();
4531
4541
  return /* @__PURE__ */ jsxs(Select$1.Control, { ...rest, css: styles.control, children: [
4532
4542
  /* @__PURE__ */ jsx(Select$1.Trigger, { ref, css: styles.trigger, children }),
4533
- /* @__PURE__ */ jsxs(Select$1.IndicatorGroup, { css: styles.indicatorGroup, children: [
4534
- clearable && /* @__PURE__ */ jsx(SelectClearTrigger, {}),
4535
- /* @__PURE__ */ jsx(Box, { css: styles.indicator, children: /* @__PURE__ */ jsx(DropdownDownFill24Icon, {}) })
4536
- ] })
4543
+ /* @__PURE__ */ jsxs(
4544
+ Select$1.IndicatorGroup,
4545
+ {
4546
+ css: styles.indicatorGroup,
4547
+ "data-part": "indicator-group",
4548
+ children: [
4549
+ clearable && /* @__PURE__ */ jsx(SelectClearTrigger, {}),
4550
+ /* @__PURE__ */ jsx(Box, { css: styles.indicator, "data-part": "indicator", children: /* @__PURE__ */ jsx(DropdownDownFill24Icon, {}) })
4551
+ ]
4552
+ }
4553
+ )
4537
4554
  ] });
4538
4555
  });
4539
4556
  var SelectClearTrigger = React20.forwardRef(function SelectClearTrigger2(props, ref) {
@@ -4548,8 +4565,8 @@ var SelectClearTrigger = React20.forwardRef(function SelectClearTrigger2(props,
4548
4565
  ) });
4549
4566
  });
4550
4567
  var SelectContent = React20.forwardRef(function SelectContent2(props, ref) {
4551
- const { portalled = true, portalRef, ...rest } = props;
4552
- return /* @__PURE__ */ jsx(Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsx(Select$1.Positioner, { children: /* @__PURE__ */ jsx(Select$1.Content, { ...rest, ref }) }) });
4568
+ const { portalled = true, portalRef, baseStyle, ...rest } = props;
4569
+ return /* @__PURE__ */ jsx(Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsx(Select$1.Positioner, { css: baseStyle, children: /* @__PURE__ */ jsx(Select$1.Content, { ...rest, ref }) }) });
4553
4570
  });
4554
4571
  var SelectValueText = React20.forwardRef(function SelectValueText2(props, ref) {
4555
4572
  const { children, withPlaceholder, placeholder, ...rest } = props;
@@ -5972,7 +5989,7 @@ var texts26 = createTexts({
5972
5989
  });
5973
5990
  var fontFaces = `
5974
5991
  @font-face {
5975
- font-family: ${tokens23__default.asset.font["vy-sans"]["light"].name};
5992
+ font-family: ${tokens22__default.asset.font["vy-sans"]["light"].name};
5976
5993
  src: url("https://www.vy.no/styles/font/VySans-Light.woff2") format("woff2"),
5977
5994
  url("https://www.vy.no/styles/font/VySans-Light.woff") format("woff");
5978
5995
  font-style: normal;
@@ -5980,7 +5997,7 @@ var fontFaces = `
5980
5997
  font-display: swap
5981
5998
  }
5982
5999
  @font-face {
5983
- font-family: ${tokens23__default.asset.font["vy-sans"]["light-italic"].name};
6000
+ font-family: ${tokens22__default.asset.font["vy-sans"]["light-italic"].name};
5984
6001
  src: url("https://www.vy.no/styles/font/VySans-LightItalic.woff2")
5985
6002
  format("woff2"),
5986
6003
  url("https://www.vy.no/styles/font/VySans-LightItalic.woff") format("woff");
@@ -5989,7 +6006,7 @@ var fontFaces = `
5989
6006
  font-display: swap
5990
6007
  }
5991
6008
  @font-face {
5992
- font-family: ${tokens23__default.asset.font["vy-sans"]["medium"].name};
6009
+ font-family: ${tokens22__default.asset.font["vy-sans"]["medium"].name};
5993
6010
  src: url("https://www.vy.no/styles/font/VySans-Regular.woff2") format("woff2"),
5994
6011
  url("https://www.vy.no/styles/font/VySans-Regular.woff") format("woff");
5995
6012
  font-style: normal;
@@ -5997,7 +6014,7 @@ var fontFaces = `
5997
6014
  font-display: swap
5998
6015
  }
5999
6016
  @font-face {
6000
- font-family: ${tokens23__default.asset.font["vy-sans"]["medium-italic"].name};
6017
+ font-family: ${tokens22__default.asset.font["vy-sans"]["medium-italic"].name};
6001
6018
  src: url("https://www.vy.no/styles/font/VySans-RegularItalic.woff2")
6002
6019
  format("woff2"),
6003
6020
  url("https://www.vy.no/styles/font/VySans-RegularItalic.woff")
@@ -6007,7 +6024,7 @@ var fontFaces = `
6007
6024
  font-display: swap
6008
6025
  }
6009
6026
  @font-face {
6010
- font-family: ${tokens23__default.asset.font["vy-sans"]["bold"].name};
6027
+ font-family: ${tokens22__default.asset.font["vy-sans"]["bold"].name};
6011
6028
  src: url("https://www.vy.no/styles/font/VySans-Bold.woff2") format("woff2"),
6012
6029
  url("https://www.vy.no/styles/font/VySans-Bold.woff") format("woff");
6013
6030
  font-style: normal;
@@ -6015,7 +6032,7 @@ var fontFaces = `
6015
6032
  font-display: swap
6016
6033
  }
6017
6034
  @font-face {
6018
- font-family: ${tokens23__default.asset.font["vy-sans"]["bold-italic"].name};
6035
+ font-family: ${tokens22__default.asset.font["vy-sans"]["bold-italic"].name};
6019
6036
  src: url("https://www.vy.no/styles/font/VySans-BoldItalic.woff2")
6020
6037
  format("woff2"),
6021
6038
  url("https://www.vy.no/styles/font/VySans-BoldItalic.woff") format("woff");
@@ -6024,7 +6041,7 @@ var fontFaces = `
6024
6041
  font-display: swap
6025
6042
  }
6026
6043
  @font-face {
6027
- font-family: ${tokens23__default.asset.font["vy-display"].name};
6044
+ font-family: ${tokens22__default.asset.font["vy-display"].name};
6028
6045
  src: url("https://www.vy.no/styles/font/VyDisplay-Medium.woff2")
6029
6046
  format("woff2"),
6030
6047
  url("https://www.vy.no/styles/font/VyDisplay-Medium.woff") format("woff");
@@ -6500,7 +6517,7 @@ var buttonRecipe = defineRecipe({
6500
6517
  background: "surface.disabled"
6501
6518
  },
6502
6519
  _focus: {
6503
- outlineOffset: tokens23__default.size.stroke.md
6520
+ outlineOffset: tokens22__default.size.stroke.md
6504
6521
  }
6505
6522
  },
6506
6523
  variants: {
@@ -6531,19 +6548,19 @@ var buttonRecipe = defineRecipe({
6531
6548
  color: "core.text",
6532
6549
  outline: "solid",
6533
6550
  fontWeight: "normal",
6534
- outlineWidth: tokens23__default.size.stroke.sm,
6551
+ outlineWidth: tokens22__default.size.stroke.sm,
6535
6552
  outlineColor: "core.outline",
6536
6553
  _hover: {
6537
- outlineWidth: tokens23__default.size.stroke.md,
6554
+ outlineWidth: tokens22__default.size.stroke.md,
6538
6555
  outlineColor: "core.outline.hover",
6539
6556
  _active: {
6540
6557
  background: "core.surface.active",
6541
- outlineWidth: tokens23__default.size.stroke.sm,
6558
+ outlineWidth: tokens22__default.size.stroke.sm,
6542
6559
  outlineColor: "core.outline"
6543
6560
  }
6544
6561
  },
6545
6562
  _focus: {
6546
- outlineWidth: tokens23__default.size.stroke.sm
6563
+ outlineWidth: tokens22__default.size.stroke.sm
6547
6564
  }
6548
6565
  },
6549
6566
  ghost: {
@@ -6859,15 +6876,15 @@ var pressableCardRecipe = defineRecipe({
6859
6876
  },
6860
6877
  core: {
6861
6878
  outlineColor: "core.outline",
6862
- outlineWidth: tokens23__default.size.stroke.sm,
6879
+ outlineWidth: tokens22__default.size.stroke.sm,
6863
6880
  outlineStyle: "solid",
6864
6881
  _hover: {
6865
6882
  outlineColor: "core.outline.hover",
6866
- outlineWidth: tokens23__default.size.stroke.md,
6883
+ outlineWidth: tokens22__default.size.stroke.md,
6867
6884
  outlineStyle: "solid",
6868
6885
  _active: {
6869
6886
  backgroundColor: "core.surface.active",
6870
- outlineWidth: tokens23__default.size.stroke.sm
6887
+ outlineWidth: tokens22__default.size.stroke.sm
6871
6888
  }
6872
6889
  }
6873
6890
  },
@@ -7093,34 +7110,34 @@ var cargonetColors = defineSemanticTokens.colors({
7093
7110
  ...tokens4.color.cargonet.color.cargonet
7094
7111
  });
7095
7112
  var radii = defineSemanticTokens.radii({
7096
- none: { value: tokens23__default.size["border-radius"].none },
7097
- xxs: { value: tokens23__default.size["border-radius"].xxs },
7098
- xs: { value: tokens23__default.size["border-radius"].xs },
7099
- sm: { value: tokens23__default.size["border-radius"].sm },
7100
- md: { value: tokens23__default.size["border-radius"].md },
7101
- lg: { value: tokens23__default.size["border-radius"].lg },
7102
- xl: { value: tokens23__default.size["border-radius"].xl },
7103
- "2xl": { value: tokens23__default.size["border-radius"]["2xl"] },
7113
+ none: { value: tokens22__default.size["border-radius"].none },
7114
+ xxs: { value: tokens22__default.size["border-radius"].xxs },
7115
+ xs: { value: tokens22__default.size["border-radius"].xs },
7116
+ sm: { value: tokens22__default.size["border-radius"].sm },
7117
+ md: { value: tokens22__default.size["border-radius"].md },
7118
+ lg: { value: tokens22__default.size["border-radius"].lg },
7119
+ xl: { value: tokens22__default.size["border-radius"].xl },
7120
+ "2xl": { value: tokens22__default.size["border-radius"]["2xl"] },
7104
7121
  round: { value: "50%" }
7105
7122
  });
7106
7123
  var shadows = defineSemanticTokens.shadows({
7107
7124
  none: { value: "none" },
7108
7125
  sm: {
7109
7126
  value: {
7110
- _light: tokens23__default.depth.shadow.sm.value._light,
7111
- _dark: tokens23__default.depth.shadow.sm.value._dark
7127
+ _light: tokens22__default.depth.shadow.sm.value._light,
7128
+ _dark: tokens22__default.depth.shadow.sm.value._dark
7112
7129
  }
7113
7130
  },
7114
7131
  md: {
7115
7132
  value: {
7116
- _light: tokens23__default.depth.shadow.md.value._light,
7117
- _dark: tokens23__default.depth.shadow.md.value._dark
7133
+ _light: tokens22__default.depth.shadow.md.value._light,
7134
+ _dark: tokens22__default.depth.shadow.md.value._dark
7118
7135
  }
7119
7136
  },
7120
7137
  lg: {
7121
7138
  value: {
7122
- _light: tokens23__default.depth.shadow.lg.value._light,
7123
- _dark: tokens23__default.depth.shadow.lg.value._dark
7139
+ _light: tokens22__default.depth.shadow.lg.value._light,
7140
+ _dark: tokens22__default.depth.shadow.lg.value._dark
7124
7141
  }
7125
7142
  }
7126
7143
  });
@@ -7480,7 +7497,7 @@ var accordionSlotRecipe = defineSlotRecipe({
7480
7497
  core: {
7481
7498
  item: {
7482
7499
  outline: "solid",
7483
- outlineWidth: tokens23__default.size.stroke.sm,
7500
+ outlineWidth: tokens22__default.size.stroke.sm,
7484
7501
  outlineColor: "core.outline"
7485
7502
  },
7486
7503
  itemTrigger: {
@@ -7488,14 +7505,14 @@ var accordionSlotRecipe = defineSlotRecipe({
7488
7505
  borderBottomRadius: "none"
7489
7506
  },
7490
7507
  "&:hover": {
7491
- outlineWidth: tokens23__default.size.stroke.md,
7508
+ outlineWidth: tokens22__default.size.stroke.md,
7492
7509
  outlineColor: "core.outline",
7493
7510
  outline: "2px solid",
7494
7511
  outlineOffset: 0
7495
7512
  },
7496
7513
  "&:active": {
7497
7514
  backgroundColor: "core.surface.active",
7498
- outlineWidth: tokens23__default.size.stroke.sm,
7515
+ outlineWidth: tokens22__default.size.stroke.sm,
7499
7516
  outline: "none"
7500
7517
  }
7501
7518
  }
@@ -7513,7 +7530,7 @@ var accordionSlotRecipe = defineSlotRecipe({
7513
7530
  floating: {
7514
7531
  item: {
7515
7532
  outline: "1px solid",
7516
- outlineWidth: tokens23__default.size.stroke.sm,
7533
+ outlineWidth: tokens22__default.size.stroke.sm,
7517
7534
  boxShadow: "sm",
7518
7535
  outlineColor: "floating.outline"
7519
7536
  },
@@ -7522,14 +7539,14 @@ var accordionSlotRecipe = defineSlotRecipe({
7522
7539
  borderBottomRadius: "none"
7523
7540
  },
7524
7541
  "&:hover": {
7525
- outlineWidth: tokens23__default.size.stroke.md,
7542
+ outlineWidth: tokens22__default.size.stroke.md,
7526
7543
  outline: "1px solid",
7527
7544
  outlineColor: "floating.outline.hover",
7528
7545
  outlineOffset: 1
7529
7546
  },
7530
7547
  "&:active": {
7531
7548
  backgroundColor: "floating.surface.active",
7532
- outlineWidth: tokens23__default.size.stroke.sm,
7549
+ outlineWidth: tokens22__default.size.stroke.sm,
7533
7550
  outline: "none"
7534
7551
  }
7535
7552
  }
@@ -7953,7 +7970,7 @@ var breadcrumbSlotRecipe = defineSlotRecipe({
7953
7970
  link: {
7954
7971
  _hover: {
7955
7972
  outlineColor: "core.outline.hover",
7956
- outlineWidth: tokens23__default.size.stroke.md,
7973
+ outlineWidth: tokens22__default.size.stroke.md,
7957
7974
  outlineStyle: "solid",
7958
7975
  _active: {
7959
7976
  backgroundColor: "core.surface.active",
@@ -8043,10 +8060,10 @@ var checkboxSlotRecipe = defineSlotRecipe({
8043
8060
  _focus: {
8044
8061
  outlineStyle: "solid",
8045
8062
  outlineColor: "outline.focus",
8046
- outlineOffset: tokens23__default.size.stroke.md,
8047
- outlineWidth: tokens23__default.size.stroke.md,
8063
+ outlineOffset: tokens22__default.size.stroke.md,
8064
+ outlineWidth: tokens22__default.size.stroke.md,
8048
8065
  borderColor: "core.outline",
8049
- borderWidth: tokens23__default.size.stroke.md
8066
+ borderWidth: tokens22__default.size.stroke.md
8050
8067
  }
8051
8068
  },
8052
8069
  label: {
@@ -8975,7 +8992,7 @@ var floatingActionButtonSlotRecipe = defineSlotRecipe({
8975
8992
  position: "fixed",
8976
8993
  zIndex: "dropdown",
8977
8994
  _focus: {
8978
- outlineOffset: tokens23__default.size.stroke.lg,
8995
+ outlineOffset: tokens22__default.size.stroke.lg,
8979
8996
  outlineColor: "outline.focus"
8980
8997
  },
8981
8998
  _disabled: {
@@ -10084,25 +10101,25 @@ var radioCardSlotRecipe = defineSlotRecipe({
10084
10101
  core: {
10085
10102
  item: {
10086
10103
  outlineColor: "core.outline",
10087
- outlineWidth: tokens23__default.size.stroke.sm,
10104
+ outlineWidth: tokens22__default.size.stroke.sm,
10088
10105
  outlineStyle: "solid",
10089
10106
  _hover: {
10090
10107
  outlineColor: "core.outline.hover",
10091
- outlineWidth: tokens23__default.size.stroke.md,
10108
+ outlineWidth: tokens22__default.size.stroke.md,
10092
10109
  outlineStyle: "solid",
10093
10110
  _active: {
10094
10111
  backgroundColor: "core.surface.active",
10095
- outlineWidth: tokens23__default.size.stroke.sm
10112
+ outlineWidth: tokens22__default.size.stroke.sm
10096
10113
  }
10097
10114
  },
10098
10115
  _checked: {
10099
10116
  outlineColor: "outline.focus",
10100
- outlineWidth: tokens23__default.size.stroke.md,
10117
+ outlineWidth: tokens22__default.size.stroke.md,
10101
10118
  outlineStyle: "solid",
10102
10119
  backgroundColor: "core.surface.active",
10103
10120
  _focusVisible: {
10104
10121
  outlineStyle: "double",
10105
- outlineWidth: `calc(3 * ${tokens23__default.size.stroke.md})`
10122
+ outlineWidth: `calc(3 * ${tokens22__default.size.stroke.md})`
10106
10123
  // space for double outline
10107
10124
  }
10108
10125
  }
@@ -10127,12 +10144,12 @@ var radioCardSlotRecipe = defineSlotRecipe({
10127
10144
  },
10128
10145
  _checked: {
10129
10146
  outlineColor: "outline.focus",
10130
- outlineWidth: tokens23__default.size.stroke.md,
10147
+ outlineWidth: tokens22__default.size.stroke.md,
10131
10148
  outlineStyle: "solid",
10132
10149
  backgroundColor: "core.surface.active",
10133
10150
  _focusVisible: {
10134
10151
  outlineStyle: "double",
10135
- outlineWidth: `calc(3 * ${tokens23__default.size.stroke.md})`
10152
+ outlineWidth: `calc(3 * ${tokens22__default.size.stroke.md})`
10136
10153
  // space for double outline
10137
10154
  }
10138
10155
  }
@@ -10529,7 +10546,8 @@ var switchSlotRecipe = defineSlotRecipe({
10529
10546
  height: "var(--switch-height)",
10530
10547
  transitionProperty: "common",
10531
10548
  transitionDuration: "fast",
10532
- outline: "2px solid",
10549
+ outline: "1px solid",
10550
+ outlineOffset: "-1px",
10533
10551
  outlineColor: "core.outline",
10534
10552
  _hover: {
10535
10553
  outline: "2px solid",
@@ -10542,14 +10560,16 @@ var switchSlotRecipe = defineSlotRecipe({
10542
10560
  _focusVisible: {
10543
10561
  outlineWidth: "2px",
10544
10562
  outlineColor: "outline.focus",
10545
- outlineStyle: "solid"
10563
+ outlineStyle: "double"
10546
10564
  },
10547
10565
  _checked: {
10548
10566
  backgroundColor: "brand.surface",
10567
+ outline: "none",
10549
10568
  _focusVisible: {
10550
- outlineStyle: "double",
10551
- outlineWidth: `calc(3 * ${tokens23__default.size.stroke.md})`
10552
- // space for double outline
10569
+ outlineOffset: "1px",
10570
+ outlineStyle: "solid",
10571
+ outlineColor: "outline.focus",
10572
+ outlineWidth: "2px"
10553
10573
  }
10554
10574
  },
10555
10575
  _disabled: {
@@ -10571,32 +10591,29 @@ var switchSlotRecipe = defineSlotRecipe({
10571
10591
  size: {
10572
10592
  sm: {
10573
10593
  root: {
10574
- "--switch-width": "3.3rem",
10575
- "--switch-height": "1.5rem"
10594
+ "--switch-width": "3rem",
10595
+ "--switch-height": "1.125rem"
10576
10596
  },
10577
10597
  control: {
10578
- borderRadius: "lg",
10579
- padding: "0.12rem"
10598
+ borderRadius: "lg"
10580
10599
  }
10581
10600
  },
10582
10601
  md: {
10583
10602
  root: {
10584
- "--switch-width": "4.1rem",
10585
- "--switch-height": "1.8rem"
10603
+ "--switch-width": "3.75rem",
10604
+ "--switch-height": "1.5rem"
10586
10605
  },
10587
10606
  control: {
10588
- borderRadius: "xl",
10589
- padding: 0.5
10607
+ borderRadius: "xl"
10590
10608
  }
10591
10609
  },
10592
10610
  lg: {
10593
10611
  root: {
10594
- "--switch-width": "4.8rem",
10595
- "--switch-height": "2.25rem"
10612
+ "--switch-width": "4.5rem",
10613
+ "--switch-height": "1.875rem"
10596
10614
  },
10597
10615
  control: {
10598
- borderRadius: "2xl",
10599
- padding: 0.5
10616
+ borderRadius: "2xl"
10600
10617
  }
10601
10618
  }
10602
10619
  }
@@ -11114,22 +11131,22 @@ var borders = defineTokens.borders({
11114
11131
  value: "0"
11115
11132
  },
11116
11133
  sm: {
11117
- value: `${tokens23__default.size.stroke.sm} solid`
11134
+ value: `${tokens22__default.size.stroke.sm} solid`
11118
11135
  },
11119
11136
  "sm-dashed": {
11120
- value: `${tokens23__default.size.stroke.sm} dashed`
11137
+ value: `${tokens22__default.size.stroke.sm} dashed`
11121
11138
  },
11122
11139
  md: {
11123
- value: `${tokens23__default.size.stroke.md} solid`
11140
+ value: `${tokens22__default.size.stroke.md} solid`
11124
11141
  },
11125
11142
  "md-dashed": {
11126
- value: `${tokens23__default.size.stroke.md} dashed`
11143
+ value: `${tokens22__default.size.stroke.md} dashed`
11127
11144
  },
11128
11145
  lg: {
11129
- value: `${tokens23__default.size.stroke.lg} solid`
11146
+ value: `${tokens22__default.size.stroke.lg} solid`
11130
11147
  },
11131
11148
  "lg-dashed": {
11132
- value: `${tokens23__default.size.stroke.lg} dashed`
11149
+ value: `${tokens22__default.size.stroke.lg} dashed`
11133
11150
  }
11134
11151
  });
11135
11152
  var colors = defineTokens.colors({
@@ -11201,33 +11218,33 @@ var easings = defineTokens.easings({
11201
11218
  }
11202
11219
  });
11203
11220
  var fontSizes = defineTokens.fontSizes({
11204
- "2xs": { value: tokens23__default.size.font.xs.mobile },
11205
- xs: { value: tokens23__default.size.font.sm.mobile },
11206
- sm: { value: tokens23__default.size.font.md.mobile },
11207
- md: { value: tokens23__default.size.font.lg.mobile },
11208
- lg: { value: tokens23__default.size.font.xl.mobile },
11209
- xl: { value: tokens23__default.size.font.xxl.mobile },
11210
- "2xl": { value: tokens23__default.size.font.xl.desktop },
11211
- "3xl": { value: tokens23__default.size.font.xxl.desktop },
11221
+ "2xs": { value: tokens22__default.size.font.xs.mobile },
11222
+ xs: { value: tokens22__default.size.font.sm.mobile },
11223
+ sm: { value: tokens22__default.size.font.md.mobile },
11224
+ md: { value: tokens22__default.size.font.lg.mobile },
11225
+ lg: { value: tokens22__default.size.font.xl.mobile },
11226
+ xl: { value: tokens22__default.size.font.xxl.mobile },
11227
+ "2xl": { value: tokens22__default.size.font.xl.desktop },
11228
+ "3xl": { value: tokens22__default.size.font.xxl.desktop },
11212
11229
  mobile: {
11213
- "2xs": { value: tokens23__default.size.font["2xs"].mobile },
11214
- xs: { value: tokens23__default.size.font.xs.mobile },
11215
- sm: { value: tokens23__default.size.font.sm.mobile },
11216
- md: { value: tokens23__default.size.font.md.mobile },
11217
- "md-lg": { value: tokens23__default.size.font["md-lg"].mobile },
11218
- lg: { value: tokens23__default.size.font.lg.mobile },
11219
- xl: { value: tokens23__default.size.font.xl.mobile },
11220
- xxl: { value: tokens23__default.size.font.xxl.mobile }
11230
+ "2xs": { value: tokens22__default.size.font["2xs"].mobile },
11231
+ xs: { value: tokens22__default.size.font.xs.mobile },
11232
+ sm: { value: tokens22__default.size.font.sm.mobile },
11233
+ md: { value: tokens22__default.size.font.md.mobile },
11234
+ "md-lg": { value: tokens22__default.size.font["md-lg"].mobile },
11235
+ lg: { value: tokens22__default.size.font.lg.mobile },
11236
+ xl: { value: tokens22__default.size.font.xl.mobile },
11237
+ xxl: { value: tokens22__default.size.font.xxl.mobile }
11221
11238
  },
11222
11239
  desktop: {
11223
- "2xs": { value: tokens23__default.size.font["2xs"].desktop },
11224
- xs: { value: tokens23__default.size.font.xs.desktop },
11225
- sm: { value: tokens23__default.size.font.sm.desktop },
11226
- md: { value: tokens23__default.size.font.md.desktop },
11227
- "md-lg": { value: tokens23__default.size.font["md-lg"].desktop },
11228
- lg: { value: tokens23__default.size.font.lg.desktop },
11229
- xl: { value: tokens23__default.size.font.xl.desktop },
11230
- xxl: { value: tokens23__default.size.font.xxl.desktop }
11240
+ "2xs": { value: tokens22__default.size.font["2xs"].desktop },
11241
+ xs: { value: tokens22__default.size.font.xs.desktop },
11242
+ sm: { value: tokens22__default.size.font.sm.desktop },
11243
+ md: { value: tokens22__default.size.font.md.desktop },
11244
+ "md-lg": { value: tokens22__default.size.font["md-lg"].desktop },
11245
+ lg: { value: tokens22__default.size.font.lg.desktop },
11246
+ xl: { value: tokens22__default.size.font.xl.desktop },
11247
+ xxl: { value: tokens22__default.size.font.xxl.desktop }
11231
11248
  }
11232
11249
  });
11233
11250
  var fontWeights = defineTokens.fontWeights({
@@ -11260,9 +11277,9 @@ var fontWeights = defineTokens.fontWeights({
11260
11277
  }
11261
11278
  });
11262
11279
  var fonts = defineTokens.fonts({
11263
- body: { value: `${tokens23__default.font.family.body}, arial, sans-serif` },
11264
- heading: { value: `${tokens23__default.font.family.heading}, arial, sans-serif` },
11265
- mono: { value: `${tokens23__default.font.family.monospace}, monospace` }
11280
+ body: { value: `${tokens22__default.font.family.body}, arial, sans-serif` },
11281
+ heading: { value: `${tokens22__default.font.family.heading}, arial, sans-serif` },
11282
+ mono: { value: `${tokens22__default.font.family.monospace}, monospace` }
11266
11283
  });
11267
11284
  var letterSpacings = defineTokens.letterSpacings({
11268
11285
  tighter: {
@@ -11299,32 +11316,32 @@ var lineHeights = defineTokens.lineHeights({
11299
11316
  }
11300
11317
  });
11301
11318
  var radii2 = defineTokens.radii({
11302
- none: { value: tokens23__default.size["border-radius"].none },
11303
- xs: { value: tokens23__default.size["border-radius"].xs },
11304
- sm: { value: tokens23__default.size["border-radius"].sm },
11305
- md: { value: tokens23__default.size["border-radius"].md },
11306
- lg: { value: tokens23__default.size["border-radius"].lg },
11307
- xl: { value: tokens23__default.size["border-radius"].xl },
11308
- "2xl": { value: tokens23__default.size["border-radius"]["2xl"] },
11319
+ none: { value: tokens22__default.size["border-radius"].none },
11320
+ xs: { value: tokens22__default.size["border-radius"].xs },
11321
+ sm: { value: tokens22__default.size["border-radius"].sm },
11322
+ md: { value: tokens22__default.size["border-radius"].md },
11323
+ lg: { value: tokens22__default.size["border-radius"].lg },
11324
+ xl: { value: tokens22__default.size["border-radius"].xl },
11325
+ "2xl": { value: tokens22__default.size["border-radius"]["2xl"] },
11309
11326
  round: { value: "50%" }
11310
11327
  });
11311
11328
  var spacing = defineTokens.spacing({
11312
- 0: { value: tokens23__default.size.spacing["0"] },
11313
- 0.5: { value: tokens23__default.size.spacing["0.5"] },
11314
- 1: { value: tokens23__default.size.spacing["1"] },
11315
- 1.5: { value: tokens23__default.size.spacing["1.5"] },
11316
- 2: { value: tokens23__default.size.spacing["2"] },
11317
- 3: { value: tokens23__default.size.spacing["3"] },
11318
- 4: { value: tokens23__default.size.spacing["4"] },
11319
- 5: { value: tokens23__default.size.spacing["5"] },
11320
- 6: { value: tokens23__default.size.spacing["6"] },
11321
- 7: { value: tokens23__default.size.spacing["7"] },
11322
- 8: { value: tokens23__default.size.spacing["8"] },
11323
- 9: { value: tokens23__default.size.spacing["9"] },
11324
- 10: { value: tokens23__default.size.spacing["10"] },
11325
- 11: { value: tokens23__default.size.spacing["11"] },
11326
- 12: { value: tokens23__default.size.spacing["12"] },
11327
- 13: { value: tokens23__default.size.spacing["13"] }
11329
+ 0: { value: tokens22__default.size.spacing["0"] },
11330
+ 0.5: { value: tokens22__default.size.spacing["0.5"] },
11331
+ 1: { value: tokens22__default.size.spacing["1"] },
11332
+ 1.5: { value: tokens22__default.size.spacing["1.5"] },
11333
+ 2: { value: tokens22__default.size.spacing["2"] },
11334
+ 3: { value: tokens22__default.size.spacing["3"] },
11335
+ 4: { value: tokens22__default.size.spacing["4"] },
11336
+ 5: { value: tokens22__default.size.spacing["5"] },
11337
+ 6: { value: tokens22__default.size.spacing["6"] },
11338
+ 7: { value: tokens22__default.size.spacing["7"] },
11339
+ 8: { value: tokens22__default.size.spacing["8"] },
11340
+ 9: { value: tokens22__default.size.spacing["9"] },
11341
+ 10: { value: tokens22__default.size.spacing["10"] },
11342
+ 11: { value: tokens22__default.size.spacing["11"] },
11343
+ 12: { value: tokens22__default.size.spacing["12"] },
11344
+ 13: { value: tokens22__default.size.spacing["13"] }
11328
11345
  });
11329
11346
 
11330
11347
  // src/theme/tokens/sizes.ts
@@ -11361,10 +11378,10 @@ var namedSizes = defineTokens.sizes({
11361
11378
  });
11362
11379
  var container = defineTokens.sizes({
11363
11380
  base: { value: 0 },
11364
- sm: { value: tokens23__default.size.breakpoint.sm },
11365
- md: { value: tokens23__default.size.breakpoint.md },
11366
- lg: { value: tokens23__default.size.breakpoint.lg },
11367
- xl: { value: tokens23__default.size.breakpoint.xl }
11381
+ sm: { value: tokens22__default.size.breakpoint.sm },
11382
+ md: { value: tokens22__default.size.breakpoint.md },
11383
+ lg: { value: tokens22__default.size.breakpoint.lg },
11384
+ xl: { value: tokens22__default.size.breakpoint.xl }
11368
11385
  });
11369
11386
  var sizes = {
11370
11387
  ...largeSizes,
@@ -11373,22 +11390,22 @@ var sizes = {
11373
11390
  container
11374
11391
  };
11375
11392
  var zIndex = defineTokens.zIndex({
11376
- hide: { value: tokens23__default.depth["z-index"].hide },
11393
+ hide: { value: tokens22__default.depth["z-index"].hide },
11377
11394
  auto: { value: "auto" },
11378
- base: { value: tokens23__default.depth["z-index"].base },
11379
- docked: { value: tokens23__default.depth["z-index"].docked },
11380
- dropdown: { value: tokens23__default.depth["z-index"].dropdown },
11381
- sticky: { value: tokens23__default.depth["z-index"].sticky },
11382
- banner: { value: tokens23__default.depth["z-index"].banner },
11383
- overlay: { value: tokens23__default.depth["z-index"].overlay },
11384
- modal: { value: tokens23__default.depth["z-index"].modal },
11385
- popover: { value: tokens23__default.depth["z-index"].popover },
11386
- skipLink: { value: tokens23__default.depth["z-index"].skipLink },
11387
- toast: { value: tokens23__default.depth["z-index"].toast }
11395
+ base: { value: tokens22__default.depth["z-index"].base },
11396
+ docked: { value: tokens22__default.depth["z-index"].docked },
11397
+ dropdown: { value: tokens22__default.depth["z-index"].dropdown },
11398
+ sticky: { value: tokens22__default.depth["z-index"].sticky },
11399
+ banner: { value: tokens22__default.depth["z-index"].banner },
11400
+ overlay: { value: tokens22__default.depth["z-index"].overlay },
11401
+ modal: { value: tokens22__default.depth["z-index"].modal },
11402
+ popover: { value: tokens22__default.depth["z-index"].popover },
11403
+ skipLink: { value: tokens22__default.depth["z-index"].skipLink },
11404
+ toast: { value: tokens22__default.depth["z-index"].toast }
11388
11405
  });
11389
11406
 
11390
11407
  // src/theme/tokens/index.ts
11391
- var tokens21 = {
11408
+ var tokens20 = {
11392
11409
  aspectRatios,
11393
11410
  animations,
11394
11411
  blurs,
@@ -11456,10 +11473,10 @@ var animationStyles = defineAnimationStyles({
11456
11473
  }
11457
11474
  });
11458
11475
  var breakpoints = {
11459
- sm: tokens23__default.size.breakpoint.sm,
11460
- md: tokens23__default.size.breakpoint.md,
11461
- lg: tokens23__default.size.breakpoint.lg,
11462
- xl: tokens23__default.size.breakpoint.xl
11476
+ sm: tokens22__default.size.breakpoint.sm,
11477
+ md: tokens22__default.size.breakpoint.md,
11478
+ lg: tokens22__default.size.breakpoint.lg,
11479
+ xl: tokens22__default.size.breakpoint.xl
11463
11480
  };
11464
11481
 
11465
11482
  // src/theme/tokens/config.ts
@@ -11749,91 +11766,91 @@ var textStyles = defineTextStyles({
11749
11766
  xxl: {
11750
11767
  value: {
11751
11768
  fontSize: [
11752
- tokens23__default.font.style.xxl["font-size"].mobile,
11753
- tokens23__default.font.style.xxl["font-size"].desktop
11769
+ tokens22__default.font.style.xxl["font-size"].mobile,
11770
+ tokens22__default.font.style.xxl["font-size"].desktop
11754
11771
  ],
11755
- fontFamily: tokens23__default.font.style.xxl["font-family"],
11756
- lineHeight: tokens23__default.font.style.xxl["line-height"]
11772
+ fontFamily: tokens22__default.font.style.xxl["font-family"],
11773
+ lineHeight: tokens22__default.font.style.xxl["line-height"]
11757
11774
  }
11758
11775
  },
11759
11776
  "xl-display": {
11760
11777
  value: {
11761
11778
  fontSize: [
11762
- tokens23__default.font.style["xl-display"]["font-size"].mobile,
11763
- tokens23__default.font.style["xl-display"]["font-size"].desktop
11779
+ tokens22__default.font.style["xl-display"]["font-size"].mobile,
11780
+ tokens22__default.font.style["xl-display"]["font-size"].desktop
11764
11781
  ],
11765
- fontFamily: tokens23__default.font.style["xl-display"]["font-family"],
11766
- lineHeight: tokens23__default.font.style["xl-display"]["line-height"]
11782
+ fontFamily: tokens22__default.font.style["xl-display"]["font-family"],
11783
+ lineHeight: tokens22__default.font.style["xl-display"]["line-height"]
11767
11784
  }
11768
11785
  },
11769
11786
  "xl-sans": {
11770
11787
  value: {
11771
11788
  fontSize: [
11772
- tokens23__default.font.style["xl-sans"]["font-size"].mobile,
11773
- tokens23__default.font.style["xl-sans"]["font-size"].desktop
11789
+ tokens22__default.font.style["xl-sans"]["font-size"].mobile,
11790
+ tokens22__default.font.style["xl-sans"]["font-size"].desktop
11774
11791
  ],
11775
- fontFamily: tokens23__default.font.style["xl-sans"]["font-family"],
11776
- lineHeight: tokens23__default.font.style["xl-sans"]["line-height"]
11792
+ fontFamily: tokens22__default.font.style["xl-sans"]["font-family"],
11793
+ lineHeight: tokens22__default.font.style["xl-sans"]["line-height"]
11777
11794
  }
11778
11795
  },
11779
11796
  lg: {
11780
11797
  value: {
11781
11798
  fontSize: [
11782
- tokens23__default.font.style.lg["font-size"].mobile,
11783
- tokens23__default.font.style.lg["font-size"].desktop
11799
+ tokens22__default.font.style.lg["font-size"].mobile,
11800
+ tokens22__default.font.style.lg["font-size"].desktop
11784
11801
  ],
11785
- fontFamily: tokens23__default.font.style.lg["font-family"],
11786
- lineHeight: tokens23__default.font.style.lg["line-height"]
11802
+ fontFamily: tokens22__default.font.style.lg["font-family"],
11803
+ lineHeight: tokens22__default.font.style.lg["line-height"]
11787
11804
  }
11788
11805
  },
11789
11806
  "md-lg": {
11790
11807
  value: {
11791
11808
  fontSize: [
11792
- tokens23__default.font.style["md-lg"]["font-size"].mobile,
11793
- tokens23__default.font.style["md-lg"]["font-size"].desktop
11809
+ tokens22__default.font.style["md-lg"]["font-size"].mobile,
11810
+ tokens22__default.font.style["md-lg"]["font-size"].desktop
11794
11811
  ],
11795
- fontFamily: tokens23__default.font.style["md-lg"]["font-family"],
11796
- lineHeight: tokens23__default.font.style["md-lg"]["line-height"]
11812
+ fontFamily: tokens22__default.font.style["md-lg"]["font-family"],
11813
+ lineHeight: tokens22__default.font.style["md-lg"]["line-height"]
11797
11814
  }
11798
11815
  },
11799
11816
  md: {
11800
11817
  value: {
11801
11818
  fontSize: [
11802
- tokens23__default.font.style.md["font-size"].mobile,
11803
- tokens23__default.font.style.md["font-size"].desktop
11819
+ tokens22__default.font.style.md["font-size"].mobile,
11820
+ tokens22__default.font.style.md["font-size"].desktop
11804
11821
  ],
11805
- fontFamily: tokens23__default.font.style.md["font-family"],
11806
- lineHeight: tokens23__default.font.style.md["line-height"]
11822
+ fontFamily: tokens22__default.font.style.md["font-family"],
11823
+ lineHeight: tokens22__default.font.style.md["line-height"]
11807
11824
  }
11808
11825
  },
11809
11826
  sm: {
11810
11827
  value: {
11811
11828
  fontSize: [
11812
- tokens23__default.font.style.sm["font-size"].mobile,
11813
- tokens23__default.font.style.sm["font-size"].desktop
11829
+ tokens22__default.font.style.sm["font-size"].mobile,
11830
+ tokens22__default.font.style.sm["font-size"].desktop
11814
11831
  ],
11815
- fontFamily: tokens23__default.font.style.sm["font-family"],
11816
- lineHeight: tokens23__default.font.style.sm["line-height"]
11832
+ fontFamily: tokens22__default.font.style.sm["font-family"],
11833
+ lineHeight: tokens22__default.font.style.sm["line-height"]
11817
11834
  }
11818
11835
  },
11819
11836
  xs: {
11820
11837
  value: {
11821
11838
  fontSize: [
11822
- tokens23__default.font.style.xs["font-size"].mobile,
11823
- tokens23__default.font.style.xs["font-size"].desktop
11839
+ tokens22__default.font.style.xs["font-size"].mobile,
11840
+ tokens22__default.font.style.xs["font-size"].desktop
11824
11841
  ],
11825
- fontFamily: tokens23__default.font.style.xs["font-family"],
11826
- lineHeight: tokens23__default.font.style.xs["line-height"]
11842
+ fontFamily: tokens22__default.font.style.xs["font-family"],
11843
+ lineHeight: tokens22__default.font.style.xs["line-height"]
11827
11844
  }
11828
11845
  },
11829
11846
  "2xs": {
11830
11847
  value: {
11831
11848
  fontSize: [
11832
- tokens23__default.font.style["2xs"]["font-size"].mobile,
11833
- tokens23__default.font.style["2xs"]["font-size"].desktop
11849
+ tokens22__default.font.style["2xs"]["font-size"].mobile,
11850
+ tokens22__default.font.style["2xs"]["font-size"].desktop
11834
11851
  ],
11835
- fontFamily: tokens23__default.font.style["2xs"]["font-family"],
11836
- lineHeight: tokens23__default.font.style["2xs"]["line-height"]
11852
+ fontFamily: tokens22__default.font.style["2xs"]["font-family"],
11853
+ lineHeight: tokens22__default.font.style["2xs"]["line-height"]
11837
11854
  }
11838
11855
  }
11839
11856
  });
@@ -11844,7 +11861,7 @@ var generateTheme = (brand) => {
11844
11861
  theme: {
11845
11862
  breakpoints,
11846
11863
  keyframes,
11847
- tokens: tokens21,
11864
+ tokens: tokens20,
11848
11865
  semanticTokens: semanticTokens[brand],
11849
11866
  recipes,
11850
11867
  slotRecipes,