@vygruppen/spor-react 12.24.4 → 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 +14 -0
  4. package/dist/index.cjs +211 -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 +211 -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 +20 -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;
@@ -4457,6 +4467,7 @@ var Select = React20.forwardRef(
4457
4467
  errorText,
4458
4468
  invalid,
4459
4469
  helperText,
4470
+ css,
4460
4471
  ...rest
4461
4472
  } = props;
4462
4473
  const recipe = useSlotRecipe({ key: "select" });
@@ -4469,6 +4480,7 @@ var Select = React20.forwardRef(
4469
4480
  helperText,
4470
4481
  required: props.required,
4471
4482
  id: rest.id,
4483
+ css,
4472
4484
  children: /* @__PURE__ */ jsxs(
4473
4485
  Select$1.Root,
4474
4486
  {
@@ -4481,7 +4493,7 @@ var Select = React20.forwardRef(
4481
4493
  children: [
4482
4494
  /* @__PURE__ */ jsx(SelectTrigger, { "data-attachable": true, children: /* @__PURE__ */ jsx(SelectValueText, { withPlaceholder: label ? true : false }) }),
4483
4495
  label && /* @__PURE__ */ jsx(SelectLabel, { css: styles.label, children: label }),
4484
- /* @__PURE__ */ jsx(SelectContent, { css: styles.selectContent, children })
4496
+ /* @__PURE__ */ jsx(SelectContent, { css: styles.selectContent, baseStyle: css, children })
4485
4497
  ]
4486
4498
  }
4487
4499
  )
@@ -4508,7 +4520,7 @@ var SelectItem = React20.forwardRef(
4508
4520
  return /* @__PURE__ */ jsxs(Select$1.Item, { item, ...rest, ref, css: styles.item, children: [
4509
4521
  /* @__PURE__ */ jsxs(Box, { width: "100%", children: [
4510
4522
  /* @__PURE__ */ jsx(Select$1.ItemText, { display: "flex", children }),
4511
- description && /* @__PURE__ */ jsx(Box, { css: styles.itemDescription, children: description })
4523
+ description && /* @__PURE__ */ jsx(Box, { "data-part": "item-description", css: styles.itemDescription, children: description })
4512
4524
  ] }),
4513
4525
  /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckmarkFill18Icon, {}) })
4514
4526
  ] });
@@ -4528,10 +4540,17 @@ var SelectTrigger = React20.forwardRef(function SelectTrigger2(props, ref) {
4528
4540
  const styles = recipe();
4529
4541
  return /* @__PURE__ */ jsxs(Select$1.Control, { ...rest, css: styles.control, children: [
4530
4542
  /* @__PURE__ */ jsx(Select$1.Trigger, { ref, css: styles.trigger, children }),
4531
- /* @__PURE__ */ jsxs(Select$1.IndicatorGroup, { css: styles.indicatorGroup, children: [
4532
- clearable && /* @__PURE__ */ jsx(SelectClearTrigger, {}),
4533
- /* @__PURE__ */ jsx(Box, { css: styles.indicator, children: /* @__PURE__ */ jsx(DropdownDownFill24Icon, {}) })
4534
- ] })
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
+ )
4535
4554
  ] });
4536
4555
  });
4537
4556
  var SelectClearTrigger = React20.forwardRef(function SelectClearTrigger2(props, ref) {
@@ -4546,8 +4565,8 @@ var SelectClearTrigger = React20.forwardRef(function SelectClearTrigger2(props,
4546
4565
  ) });
4547
4566
  });
4548
4567
  var SelectContent = React20.forwardRef(function SelectContent2(props, ref) {
4549
- const { portalled = true, portalRef, ...rest } = props;
4550
- 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 }) }) });
4551
4570
  });
4552
4571
  var SelectValueText = React20.forwardRef(function SelectValueText2(props, ref) {
4553
4572
  const { children, withPlaceholder, placeholder, ...rest } = props;
@@ -5970,7 +5989,7 @@ var texts26 = createTexts({
5970
5989
  });
5971
5990
  var fontFaces = `
5972
5991
  @font-face {
5973
- font-family: ${tokens23__default.asset.font["vy-sans"]["light"].name};
5992
+ font-family: ${tokens22__default.asset.font["vy-sans"]["light"].name};
5974
5993
  src: url("https://www.vy.no/styles/font/VySans-Light.woff2") format("woff2"),
5975
5994
  url("https://www.vy.no/styles/font/VySans-Light.woff") format("woff");
5976
5995
  font-style: normal;
@@ -5978,7 +5997,7 @@ var fontFaces = `
5978
5997
  font-display: swap
5979
5998
  }
5980
5999
  @font-face {
5981
- font-family: ${tokens23__default.asset.font["vy-sans"]["light-italic"].name};
6000
+ font-family: ${tokens22__default.asset.font["vy-sans"]["light-italic"].name};
5982
6001
  src: url("https://www.vy.no/styles/font/VySans-LightItalic.woff2")
5983
6002
  format("woff2"),
5984
6003
  url("https://www.vy.no/styles/font/VySans-LightItalic.woff") format("woff");
@@ -5987,7 +6006,7 @@ var fontFaces = `
5987
6006
  font-display: swap
5988
6007
  }
5989
6008
  @font-face {
5990
- font-family: ${tokens23__default.asset.font["vy-sans"]["medium"].name};
6009
+ font-family: ${tokens22__default.asset.font["vy-sans"]["medium"].name};
5991
6010
  src: url("https://www.vy.no/styles/font/VySans-Regular.woff2") format("woff2"),
5992
6011
  url("https://www.vy.no/styles/font/VySans-Regular.woff") format("woff");
5993
6012
  font-style: normal;
@@ -5995,7 +6014,7 @@ var fontFaces = `
5995
6014
  font-display: swap
5996
6015
  }
5997
6016
  @font-face {
5998
- font-family: ${tokens23__default.asset.font["vy-sans"]["medium-italic"].name};
6017
+ font-family: ${tokens22__default.asset.font["vy-sans"]["medium-italic"].name};
5999
6018
  src: url("https://www.vy.no/styles/font/VySans-RegularItalic.woff2")
6000
6019
  format("woff2"),
6001
6020
  url("https://www.vy.no/styles/font/VySans-RegularItalic.woff")
@@ -6005,7 +6024,7 @@ var fontFaces = `
6005
6024
  font-display: swap
6006
6025
  }
6007
6026
  @font-face {
6008
- font-family: ${tokens23__default.asset.font["vy-sans"]["bold"].name};
6027
+ font-family: ${tokens22__default.asset.font["vy-sans"]["bold"].name};
6009
6028
  src: url("https://www.vy.no/styles/font/VySans-Bold.woff2") format("woff2"),
6010
6029
  url("https://www.vy.no/styles/font/VySans-Bold.woff") format("woff");
6011
6030
  font-style: normal;
@@ -6013,7 +6032,7 @@ var fontFaces = `
6013
6032
  font-display: swap
6014
6033
  }
6015
6034
  @font-face {
6016
- font-family: ${tokens23__default.asset.font["vy-sans"]["bold-italic"].name};
6035
+ font-family: ${tokens22__default.asset.font["vy-sans"]["bold-italic"].name};
6017
6036
  src: url("https://www.vy.no/styles/font/VySans-BoldItalic.woff2")
6018
6037
  format("woff2"),
6019
6038
  url("https://www.vy.no/styles/font/VySans-BoldItalic.woff") format("woff");
@@ -6022,7 +6041,7 @@ var fontFaces = `
6022
6041
  font-display: swap
6023
6042
  }
6024
6043
  @font-face {
6025
- font-family: ${tokens23__default.asset.font["vy-display"].name};
6044
+ font-family: ${tokens22__default.asset.font["vy-display"].name};
6026
6045
  src: url("https://www.vy.no/styles/font/VyDisplay-Medium.woff2")
6027
6046
  format("woff2"),
6028
6047
  url("https://www.vy.no/styles/font/VyDisplay-Medium.woff") format("woff");
@@ -6498,7 +6517,7 @@ var buttonRecipe = defineRecipe({
6498
6517
  background: "surface.disabled"
6499
6518
  },
6500
6519
  _focus: {
6501
- outlineOffset: tokens23__default.size.stroke.md
6520
+ outlineOffset: tokens22__default.size.stroke.md
6502
6521
  }
6503
6522
  },
6504
6523
  variants: {
@@ -6529,19 +6548,19 @@ var buttonRecipe = defineRecipe({
6529
6548
  color: "core.text",
6530
6549
  outline: "solid",
6531
6550
  fontWeight: "normal",
6532
- outlineWidth: tokens23__default.size.stroke.sm,
6551
+ outlineWidth: tokens22__default.size.stroke.sm,
6533
6552
  outlineColor: "core.outline",
6534
6553
  _hover: {
6535
- outlineWidth: tokens23__default.size.stroke.md,
6554
+ outlineWidth: tokens22__default.size.stroke.md,
6536
6555
  outlineColor: "core.outline.hover",
6537
6556
  _active: {
6538
6557
  background: "core.surface.active",
6539
- outlineWidth: tokens23__default.size.stroke.sm,
6558
+ outlineWidth: tokens22__default.size.stroke.sm,
6540
6559
  outlineColor: "core.outline"
6541
6560
  }
6542
6561
  },
6543
6562
  _focus: {
6544
- outlineWidth: tokens23__default.size.stroke.sm
6563
+ outlineWidth: tokens22__default.size.stroke.sm
6545
6564
  }
6546
6565
  },
6547
6566
  ghost: {
@@ -6857,15 +6876,15 @@ var pressableCardRecipe = defineRecipe({
6857
6876
  },
6858
6877
  core: {
6859
6878
  outlineColor: "core.outline",
6860
- outlineWidth: tokens23__default.size.stroke.sm,
6879
+ outlineWidth: tokens22__default.size.stroke.sm,
6861
6880
  outlineStyle: "solid",
6862
6881
  _hover: {
6863
6882
  outlineColor: "core.outline.hover",
6864
- outlineWidth: tokens23__default.size.stroke.md,
6883
+ outlineWidth: tokens22__default.size.stroke.md,
6865
6884
  outlineStyle: "solid",
6866
6885
  _active: {
6867
6886
  backgroundColor: "core.surface.active",
6868
- outlineWidth: tokens23__default.size.stroke.sm
6887
+ outlineWidth: tokens22__default.size.stroke.sm
6869
6888
  }
6870
6889
  }
6871
6890
  },
@@ -7091,34 +7110,34 @@ var cargonetColors = defineSemanticTokens.colors({
7091
7110
  ...tokens4.color.cargonet.color.cargonet
7092
7111
  });
7093
7112
  var radii = defineSemanticTokens.radii({
7094
- none: { value: tokens23__default.size["border-radius"].none },
7095
- xxs: { value: tokens23__default.size["border-radius"].xxs },
7096
- xs: { value: tokens23__default.size["border-radius"].xs },
7097
- sm: { value: tokens23__default.size["border-radius"].sm },
7098
- md: { value: tokens23__default.size["border-radius"].md },
7099
- lg: { value: tokens23__default.size["border-radius"].lg },
7100
- xl: { value: tokens23__default.size["border-radius"].xl },
7101
- "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"] },
7102
7121
  round: { value: "50%" }
7103
7122
  });
7104
7123
  var shadows = defineSemanticTokens.shadows({
7105
7124
  none: { value: "none" },
7106
7125
  sm: {
7107
7126
  value: {
7108
- _light: tokens23__default.depth.shadow.sm.value._light,
7109
- _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
7110
7129
  }
7111
7130
  },
7112
7131
  md: {
7113
7132
  value: {
7114
- _light: tokens23__default.depth.shadow.md.value._light,
7115
- _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
7116
7135
  }
7117
7136
  },
7118
7137
  lg: {
7119
7138
  value: {
7120
- _light: tokens23__default.depth.shadow.lg.value._light,
7121
- _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
7122
7141
  }
7123
7142
  }
7124
7143
  });
@@ -7478,7 +7497,7 @@ var accordionSlotRecipe = defineSlotRecipe({
7478
7497
  core: {
7479
7498
  item: {
7480
7499
  outline: "solid",
7481
- outlineWidth: tokens23__default.size.stroke.sm,
7500
+ outlineWidth: tokens22__default.size.stroke.sm,
7482
7501
  outlineColor: "core.outline"
7483
7502
  },
7484
7503
  itemTrigger: {
@@ -7486,14 +7505,14 @@ var accordionSlotRecipe = defineSlotRecipe({
7486
7505
  borderBottomRadius: "none"
7487
7506
  },
7488
7507
  "&:hover": {
7489
- outlineWidth: tokens23__default.size.stroke.md,
7508
+ outlineWidth: tokens22__default.size.stroke.md,
7490
7509
  outlineColor: "core.outline",
7491
7510
  outline: "2px solid",
7492
7511
  outlineOffset: 0
7493
7512
  },
7494
7513
  "&:active": {
7495
7514
  backgroundColor: "core.surface.active",
7496
- outlineWidth: tokens23__default.size.stroke.sm,
7515
+ outlineWidth: tokens22__default.size.stroke.sm,
7497
7516
  outline: "none"
7498
7517
  }
7499
7518
  }
@@ -7511,7 +7530,7 @@ var accordionSlotRecipe = defineSlotRecipe({
7511
7530
  floating: {
7512
7531
  item: {
7513
7532
  outline: "1px solid",
7514
- outlineWidth: tokens23__default.size.stroke.sm,
7533
+ outlineWidth: tokens22__default.size.stroke.sm,
7515
7534
  boxShadow: "sm",
7516
7535
  outlineColor: "floating.outline"
7517
7536
  },
@@ -7520,14 +7539,14 @@ var accordionSlotRecipe = defineSlotRecipe({
7520
7539
  borderBottomRadius: "none"
7521
7540
  },
7522
7541
  "&:hover": {
7523
- outlineWidth: tokens23__default.size.stroke.md,
7542
+ outlineWidth: tokens22__default.size.stroke.md,
7524
7543
  outline: "1px solid",
7525
7544
  outlineColor: "floating.outline.hover",
7526
7545
  outlineOffset: 1
7527
7546
  },
7528
7547
  "&:active": {
7529
7548
  backgroundColor: "floating.surface.active",
7530
- outlineWidth: tokens23__default.size.stroke.sm,
7549
+ outlineWidth: tokens22__default.size.stroke.sm,
7531
7550
  outline: "none"
7532
7551
  }
7533
7552
  }
@@ -7951,7 +7970,7 @@ var breadcrumbSlotRecipe = defineSlotRecipe({
7951
7970
  link: {
7952
7971
  _hover: {
7953
7972
  outlineColor: "core.outline.hover",
7954
- outlineWidth: tokens23__default.size.stroke.md,
7973
+ outlineWidth: tokens22__default.size.stroke.md,
7955
7974
  outlineStyle: "solid",
7956
7975
  _active: {
7957
7976
  backgroundColor: "core.surface.active",
@@ -8041,10 +8060,10 @@ var checkboxSlotRecipe = defineSlotRecipe({
8041
8060
  _focus: {
8042
8061
  outlineStyle: "solid",
8043
8062
  outlineColor: "outline.focus",
8044
- outlineOffset: tokens23__default.size.stroke.md,
8045
- outlineWidth: tokens23__default.size.stroke.md,
8063
+ outlineOffset: tokens22__default.size.stroke.md,
8064
+ outlineWidth: tokens22__default.size.stroke.md,
8046
8065
  borderColor: "core.outline",
8047
- borderWidth: tokens23__default.size.stroke.md
8066
+ borderWidth: tokens22__default.size.stroke.md
8048
8067
  }
8049
8068
  },
8050
8069
  label: {
@@ -8973,7 +8992,7 @@ var floatingActionButtonSlotRecipe = defineSlotRecipe({
8973
8992
  position: "fixed",
8974
8993
  zIndex: "dropdown",
8975
8994
  _focus: {
8976
- outlineOffset: tokens23__default.size.stroke.lg,
8995
+ outlineOffset: tokens22__default.size.stroke.lg,
8977
8996
  outlineColor: "outline.focus"
8978
8997
  },
8979
8998
  _disabled: {
@@ -10082,25 +10101,25 @@ var radioCardSlotRecipe = defineSlotRecipe({
10082
10101
  core: {
10083
10102
  item: {
10084
10103
  outlineColor: "core.outline",
10085
- outlineWidth: tokens23__default.size.stroke.sm,
10104
+ outlineWidth: tokens22__default.size.stroke.sm,
10086
10105
  outlineStyle: "solid",
10087
10106
  _hover: {
10088
10107
  outlineColor: "core.outline.hover",
10089
- outlineWidth: tokens23__default.size.stroke.md,
10108
+ outlineWidth: tokens22__default.size.stroke.md,
10090
10109
  outlineStyle: "solid",
10091
10110
  _active: {
10092
10111
  backgroundColor: "core.surface.active",
10093
- outlineWidth: tokens23__default.size.stroke.sm
10112
+ outlineWidth: tokens22__default.size.stroke.sm
10094
10113
  }
10095
10114
  },
10096
10115
  _checked: {
10097
10116
  outlineColor: "outline.focus",
10098
- outlineWidth: tokens23__default.size.stroke.md,
10117
+ outlineWidth: tokens22__default.size.stroke.md,
10099
10118
  outlineStyle: "solid",
10100
10119
  backgroundColor: "core.surface.active",
10101
10120
  _focusVisible: {
10102
10121
  outlineStyle: "double",
10103
- outlineWidth: `calc(3 * ${tokens23__default.size.stroke.md})`
10122
+ outlineWidth: `calc(3 * ${tokens22__default.size.stroke.md})`
10104
10123
  // space for double outline
10105
10124
  }
10106
10125
  }
@@ -10125,12 +10144,12 @@ var radioCardSlotRecipe = defineSlotRecipe({
10125
10144
  },
10126
10145
  _checked: {
10127
10146
  outlineColor: "outline.focus",
10128
- outlineWidth: tokens23__default.size.stroke.md,
10147
+ outlineWidth: tokens22__default.size.stroke.md,
10129
10148
  outlineStyle: "solid",
10130
10149
  backgroundColor: "core.surface.active",
10131
10150
  _focusVisible: {
10132
10151
  outlineStyle: "double",
10133
- outlineWidth: `calc(3 * ${tokens23__default.size.stroke.md})`
10152
+ outlineWidth: `calc(3 * ${tokens22__default.size.stroke.md})`
10134
10153
  // space for double outline
10135
10154
  }
10136
10155
  }
@@ -10527,7 +10546,8 @@ var switchSlotRecipe = defineSlotRecipe({
10527
10546
  height: "var(--switch-height)",
10528
10547
  transitionProperty: "common",
10529
10548
  transitionDuration: "fast",
10530
- outline: "2px solid",
10549
+ outline: "1px solid",
10550
+ outlineOffset: "-1px",
10531
10551
  outlineColor: "core.outline",
10532
10552
  _hover: {
10533
10553
  outline: "2px solid",
@@ -10540,14 +10560,16 @@ var switchSlotRecipe = defineSlotRecipe({
10540
10560
  _focusVisible: {
10541
10561
  outlineWidth: "2px",
10542
10562
  outlineColor: "outline.focus",
10543
- outlineStyle: "solid"
10563
+ outlineStyle: "double"
10544
10564
  },
10545
10565
  _checked: {
10546
10566
  backgroundColor: "brand.surface",
10567
+ outline: "none",
10547
10568
  _focusVisible: {
10548
- outlineStyle: "double",
10549
- outlineWidth: `calc(3 * ${tokens23__default.size.stroke.md})`
10550
- // space for double outline
10569
+ outlineOffset: "1px",
10570
+ outlineStyle: "solid",
10571
+ outlineColor: "outline.focus",
10572
+ outlineWidth: "2px"
10551
10573
  }
10552
10574
  },
10553
10575
  _disabled: {
@@ -10569,32 +10591,29 @@ var switchSlotRecipe = defineSlotRecipe({
10569
10591
  size: {
10570
10592
  sm: {
10571
10593
  root: {
10572
- "--switch-width": "3.3rem",
10573
- "--switch-height": "1.5rem"
10594
+ "--switch-width": "3rem",
10595
+ "--switch-height": "1.125rem"
10574
10596
  },
10575
10597
  control: {
10576
- borderRadius: "lg",
10577
- padding: "0.12rem"
10598
+ borderRadius: "lg"
10578
10599
  }
10579
10600
  },
10580
10601
  md: {
10581
10602
  root: {
10582
- "--switch-width": "4.1rem",
10583
- "--switch-height": "1.8rem"
10603
+ "--switch-width": "3.75rem",
10604
+ "--switch-height": "1.5rem"
10584
10605
  },
10585
10606
  control: {
10586
- borderRadius: "xl",
10587
- padding: 0.5
10607
+ borderRadius: "xl"
10588
10608
  }
10589
10609
  },
10590
10610
  lg: {
10591
10611
  root: {
10592
- "--switch-width": "4.8rem",
10593
- "--switch-height": "2.25rem"
10612
+ "--switch-width": "4.5rem",
10613
+ "--switch-height": "1.875rem"
10594
10614
  },
10595
10615
  control: {
10596
- borderRadius: "2xl",
10597
- padding: 0.5
10616
+ borderRadius: "2xl"
10598
10617
  }
10599
10618
  }
10600
10619
  }
@@ -11112,22 +11131,22 @@ var borders = defineTokens.borders({
11112
11131
  value: "0"
11113
11132
  },
11114
11133
  sm: {
11115
- value: `${tokens23__default.size.stroke.sm} solid`
11134
+ value: `${tokens22__default.size.stroke.sm} solid`
11116
11135
  },
11117
11136
  "sm-dashed": {
11118
- value: `${tokens23__default.size.stroke.sm} dashed`
11137
+ value: `${tokens22__default.size.stroke.sm} dashed`
11119
11138
  },
11120
11139
  md: {
11121
- value: `${tokens23__default.size.stroke.md} solid`
11140
+ value: `${tokens22__default.size.stroke.md} solid`
11122
11141
  },
11123
11142
  "md-dashed": {
11124
- value: `${tokens23__default.size.stroke.md} dashed`
11143
+ value: `${tokens22__default.size.stroke.md} dashed`
11125
11144
  },
11126
11145
  lg: {
11127
- value: `${tokens23__default.size.stroke.lg} solid`
11146
+ value: `${tokens22__default.size.stroke.lg} solid`
11128
11147
  },
11129
11148
  "lg-dashed": {
11130
- value: `${tokens23__default.size.stroke.lg} dashed`
11149
+ value: `${tokens22__default.size.stroke.lg} dashed`
11131
11150
  }
11132
11151
  });
11133
11152
  var colors = defineTokens.colors({
@@ -11199,33 +11218,33 @@ var easings = defineTokens.easings({
11199
11218
  }
11200
11219
  });
11201
11220
  var fontSizes = defineTokens.fontSizes({
11202
- "2xs": { value: tokens23__default.size.font.xs.mobile },
11203
- xs: { value: tokens23__default.size.font.sm.mobile },
11204
- sm: { value: tokens23__default.size.font.md.mobile },
11205
- md: { value: tokens23__default.size.font.lg.mobile },
11206
- lg: { value: tokens23__default.size.font.xl.mobile },
11207
- xl: { value: tokens23__default.size.font.xxl.mobile },
11208
- "2xl": { value: tokens23__default.size.font.xl.desktop },
11209
- "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 },
11210
11229
  mobile: {
11211
- "2xs": { value: tokens23__default.size.font["2xs"].mobile },
11212
- xs: { value: tokens23__default.size.font.xs.mobile },
11213
- sm: { value: tokens23__default.size.font.sm.mobile },
11214
- md: { value: tokens23__default.size.font.md.mobile },
11215
- "md-lg": { value: tokens23__default.size.font["md-lg"].mobile },
11216
- lg: { value: tokens23__default.size.font.lg.mobile },
11217
- xl: { value: tokens23__default.size.font.xl.mobile },
11218
- 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 }
11219
11238
  },
11220
11239
  desktop: {
11221
- "2xs": { value: tokens23__default.size.font["2xs"].desktop },
11222
- xs: { value: tokens23__default.size.font.xs.desktop },
11223
- sm: { value: tokens23__default.size.font.sm.desktop },
11224
- md: { value: tokens23__default.size.font.md.desktop },
11225
- "md-lg": { value: tokens23__default.size.font["md-lg"].desktop },
11226
- lg: { value: tokens23__default.size.font.lg.desktop },
11227
- xl: { value: tokens23__default.size.font.xl.desktop },
11228
- 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 }
11229
11248
  }
11230
11249
  });
11231
11250
  var fontWeights = defineTokens.fontWeights({
@@ -11258,9 +11277,9 @@ var fontWeights = defineTokens.fontWeights({
11258
11277
  }
11259
11278
  });
11260
11279
  var fonts = defineTokens.fonts({
11261
- body: { value: `${tokens23__default.font.family.body}, arial, sans-serif` },
11262
- heading: { value: `${tokens23__default.font.family.heading}, arial, sans-serif` },
11263
- 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` }
11264
11283
  });
11265
11284
  var letterSpacings = defineTokens.letterSpacings({
11266
11285
  tighter: {
@@ -11297,32 +11316,32 @@ var lineHeights = defineTokens.lineHeights({
11297
11316
  }
11298
11317
  });
11299
11318
  var radii2 = defineTokens.radii({
11300
- none: { value: tokens23__default.size["border-radius"].none },
11301
- xs: { value: tokens23__default.size["border-radius"].xs },
11302
- sm: { value: tokens23__default.size["border-radius"].sm },
11303
- md: { value: tokens23__default.size["border-radius"].md },
11304
- lg: { value: tokens23__default.size["border-radius"].lg },
11305
- xl: { value: tokens23__default.size["border-radius"].xl },
11306
- "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"] },
11307
11326
  round: { value: "50%" }
11308
11327
  });
11309
11328
  var spacing = defineTokens.spacing({
11310
- 0: { value: tokens23__default.size.spacing["0"] },
11311
- 0.5: { value: tokens23__default.size.spacing["0.5"] },
11312
- 1: { value: tokens23__default.size.spacing["1"] },
11313
- 1.5: { value: tokens23__default.size.spacing["1.5"] },
11314
- 2: { value: tokens23__default.size.spacing["2"] },
11315
- 3: { value: tokens23__default.size.spacing["3"] },
11316
- 4: { value: tokens23__default.size.spacing["4"] },
11317
- 5: { value: tokens23__default.size.spacing["5"] },
11318
- 6: { value: tokens23__default.size.spacing["6"] },
11319
- 7: { value: tokens23__default.size.spacing["7"] },
11320
- 8: { value: tokens23__default.size.spacing["8"] },
11321
- 9: { value: tokens23__default.size.spacing["9"] },
11322
- 10: { value: tokens23__default.size.spacing["10"] },
11323
- 11: { value: tokens23__default.size.spacing["11"] },
11324
- 12: { value: tokens23__default.size.spacing["12"] },
11325
- 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"] }
11326
11345
  });
11327
11346
 
11328
11347
  // src/theme/tokens/sizes.ts
@@ -11359,10 +11378,10 @@ var namedSizes = defineTokens.sizes({
11359
11378
  });
11360
11379
  var container = defineTokens.sizes({
11361
11380
  base: { value: 0 },
11362
- sm: { value: tokens23__default.size.breakpoint.sm },
11363
- md: { value: tokens23__default.size.breakpoint.md },
11364
- lg: { value: tokens23__default.size.breakpoint.lg },
11365
- 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 }
11366
11385
  });
11367
11386
  var sizes = {
11368
11387
  ...largeSizes,
@@ -11371,22 +11390,22 @@ var sizes = {
11371
11390
  container
11372
11391
  };
11373
11392
  var zIndex = defineTokens.zIndex({
11374
- hide: { value: tokens23__default.depth["z-index"].hide },
11393
+ hide: { value: tokens22__default.depth["z-index"].hide },
11375
11394
  auto: { value: "auto" },
11376
- base: { value: tokens23__default.depth["z-index"].base },
11377
- docked: { value: tokens23__default.depth["z-index"].docked },
11378
- dropdown: { value: tokens23__default.depth["z-index"].dropdown },
11379
- sticky: { value: tokens23__default.depth["z-index"].sticky },
11380
- banner: { value: tokens23__default.depth["z-index"].banner },
11381
- overlay: { value: tokens23__default.depth["z-index"].overlay },
11382
- modal: { value: tokens23__default.depth["z-index"].modal },
11383
- popover: { value: tokens23__default.depth["z-index"].popover },
11384
- skipLink: { value: tokens23__default.depth["z-index"].skipLink },
11385
- 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 }
11386
11405
  });
11387
11406
 
11388
11407
  // src/theme/tokens/index.ts
11389
- var tokens21 = {
11408
+ var tokens20 = {
11390
11409
  aspectRatios,
11391
11410
  animations,
11392
11411
  blurs,
@@ -11454,10 +11473,10 @@ var animationStyles = defineAnimationStyles({
11454
11473
  }
11455
11474
  });
11456
11475
  var breakpoints = {
11457
- sm: tokens23__default.size.breakpoint.sm,
11458
- md: tokens23__default.size.breakpoint.md,
11459
- lg: tokens23__default.size.breakpoint.lg,
11460
- 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
11461
11480
  };
11462
11481
 
11463
11482
  // src/theme/tokens/config.ts
@@ -11747,91 +11766,91 @@ var textStyles = defineTextStyles({
11747
11766
  xxl: {
11748
11767
  value: {
11749
11768
  fontSize: [
11750
- tokens23__default.font.style.xxl["font-size"].mobile,
11751
- 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
11752
11771
  ],
11753
- fontFamily: tokens23__default.font.style.xxl["font-family"],
11754
- 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"]
11755
11774
  }
11756
11775
  },
11757
11776
  "xl-display": {
11758
11777
  value: {
11759
11778
  fontSize: [
11760
- tokens23__default.font.style["xl-display"]["font-size"].mobile,
11761
- 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
11762
11781
  ],
11763
- fontFamily: tokens23__default.font.style["xl-display"]["font-family"],
11764
- 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"]
11765
11784
  }
11766
11785
  },
11767
11786
  "xl-sans": {
11768
11787
  value: {
11769
11788
  fontSize: [
11770
- tokens23__default.font.style["xl-sans"]["font-size"].mobile,
11771
- 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
11772
11791
  ],
11773
- fontFamily: tokens23__default.font.style["xl-sans"]["font-family"],
11774
- 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"]
11775
11794
  }
11776
11795
  },
11777
11796
  lg: {
11778
11797
  value: {
11779
11798
  fontSize: [
11780
- tokens23__default.font.style.lg["font-size"].mobile,
11781
- 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
11782
11801
  ],
11783
- fontFamily: tokens23__default.font.style.lg["font-family"],
11784
- 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"]
11785
11804
  }
11786
11805
  },
11787
11806
  "md-lg": {
11788
11807
  value: {
11789
11808
  fontSize: [
11790
- tokens23__default.font.style["md-lg"]["font-size"].mobile,
11791
- 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
11792
11811
  ],
11793
- fontFamily: tokens23__default.font.style["md-lg"]["font-family"],
11794
- 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"]
11795
11814
  }
11796
11815
  },
11797
11816
  md: {
11798
11817
  value: {
11799
11818
  fontSize: [
11800
- tokens23__default.font.style.md["font-size"].mobile,
11801
- 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
11802
11821
  ],
11803
- fontFamily: tokens23__default.font.style.md["font-family"],
11804
- 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"]
11805
11824
  }
11806
11825
  },
11807
11826
  sm: {
11808
11827
  value: {
11809
11828
  fontSize: [
11810
- tokens23__default.font.style.sm["font-size"].mobile,
11811
- 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
11812
11831
  ],
11813
- fontFamily: tokens23__default.font.style.sm["font-family"],
11814
- 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"]
11815
11834
  }
11816
11835
  },
11817
11836
  xs: {
11818
11837
  value: {
11819
11838
  fontSize: [
11820
- tokens23__default.font.style.xs["font-size"].mobile,
11821
- 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
11822
11841
  ],
11823
- fontFamily: tokens23__default.font.style.xs["font-family"],
11824
- 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"]
11825
11844
  }
11826
11845
  },
11827
11846
  "2xs": {
11828
11847
  value: {
11829
11848
  fontSize: [
11830
- tokens23__default.font.style["2xs"]["font-size"].mobile,
11831
- 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
11832
11851
  ],
11833
- fontFamily: tokens23__default.font.style["2xs"]["font-family"],
11834
- 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"]
11835
11854
  }
11836
11855
  }
11837
11856
  });
@@ -11842,7 +11861,7 @@ var generateTheme = (brand) => {
11842
11861
  theme: {
11843
11862
  breakpoints,
11844
11863
  keyframes,
11845
- tokens: tokens21,
11864
+ tokens: tokens20,
11846
11865
  semanticTokens: semanticTokens[brand],
11847
11866
  recipes,
11848
11867
  slotRecipes,