@vygruppen/spor-react 4.0.3 → 4.1.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@4.0.3 build
+> @vygruppen/spor-react@4.1.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -8,15 +8,15 @@
 CLI Target: node16
 CJS Build start
 ESM Build start
-"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-XT6QVKN5.mjs".
 "toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/index.js".
+"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-FPWAXD72.mjs".
 DTS Build start
+CJS dist/index.js 549.08 KB
+CJS ⚡️ Build success in 2609ms
 ESM dist/index.mjs                      2.10 KB
-ESM dist/CountryCodeSelect-RUH47EQH.mjs 1.19 KB
-ESM dist/chunk-XT6QVKN5.mjs             441.18 KB
-ESM ⚡️ Build success in 3115ms
-CJS dist/index.js 552.47 KB
-CJS ⚡️ Build success in 3116ms
-DTS ⚡️ Build success in 14728ms
-DTS dist/index.d.ts  265.43 KB
-DTS dist/index.d.mts 265.43 KB
+ESM dist/CountryCodeSelect-FBKDO5JS.mjs 1.19 KB
+ESM dist/chunk-FPWAXD72.mjs             438.32 KB
+ESM ⚡️ Build success in 2610ms
+DTS ⚡️ Build success in 13349ms
+DTS dist/index.d.ts  262.48 KB
+DTS dist/index.d.mts 262.48 KB

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @vygruppen/spor-react
 
+## 4.1.0
+
+### Minor Changes
+
+- 84ba515b: Card: Add a new colorScheme – "red". This is great for showing erronous stuff.
+- b411b6b0: PhoneNumberInput: Add label prop
+
+### Patch Changes
+
+- 77e31ebc: Button: Fix a bug where certain variants got the wrong colors in dark mode
+- d5ad66c1: Format all code and content with Prettier
+- d3ae50b2: spinner: added darkmode for Darkspinner
+- fc6371c1: Stepper: added dark mode
+- Updated dependencies [4ac80a10]
+- Updated dependencies [d5ad66c1]
+- Updated dependencies [9cf88825]
+- Updated dependencies [cec9b038]
+  - @vygruppen/spor-icon-react@3.4.0
+  - @vygruppen/spor-design-tokens@3.3.0
+
 ## 4.0.3
 
 ### Patch Changes

package/dist/{CountryCodeSelect-RUH47EQH.mjs → CountryCodeSelect-FBKDO5JS.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-XT6QVKN5.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-FPWAXD72.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-XT6QVKN5.mjs → chunk-FPWAXD72.mjs}

@@ -1439,7 +1439,11 @@ var texts5 = createTexts({
     en: "Alternative transport"
   }
 });
-var BaseAlert = ({ variant, children, ...boxProps }) => {
+var BaseAlert = ({
+  variant,
+  children,
+  ...boxProps
+}) => {
   const styles3 = useMultiStyleConfig("Alert", { variant });
   return /* @__PURE__ */ React69__default.createElement(Box, { __css: styles3.container, ...boxProps }, children);
 };
@@ -3303,7 +3307,12 @@ var Text4 = forwardRef(
     return /* @__PURE__ */ React69__default.createElement(Text, { ...props, textStyle: variant, ref });
   }
 );
-function CalendarCell({ state: state2, date, currentMonth, variant }) {
+function CalendarCell({
+  state: state2,
+  date,
+  currentMonth,
+  variant
+}) {
   const ref = useRef(null);
   const {
     cellProps,
@@ -3405,7 +3414,11 @@ var weekDays = {
   sv: ["M\xE5", "Ti", "On", "To", "Fr", "L\xF6", "S\xF6"],
   en: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"]
 };
-function CalendarGrid({ state: state2, variant, offset = {} }) {
+function CalendarGrid({
+  state: state2,
+  variant,
+  offset = {}
+}) {
   const { language } = useTranslation();
   const locale = useCurrentLocale();
   const startDate = state2.visibleRange.start.add(offset);
@@ -3574,7 +3587,11 @@ var texts7 = createTexts({
 });
 
 // src/datepicker/Calendar.tsx
-function Calendar({ showYearNavigation, variant, ...props }) {
+function Calendar({
+  showYearNavigation,
+  variant,
+  ...props
+}) {
   const { t: t2 } = useTranslation();
   const locale = useCurrentLocale();
   const state2 = $131cf43a05231e1e$export$6d095e787d2b5e1f({
@@ -3846,7 +3863,14 @@ function RangeCalendar(props) {
   });
   const ref = useRef(null);
   const { calendarProps, title } = useRangeCalendar(props, state2, ref);
-  return /* @__PURE__ */ React69__default.createElement(Box, { ...calendarProps, ref }, /* @__PURE__ */ React69__default.createElement(CalendarHeader, { state: state2, title }), /* @__PURE__ */ React69__default.createElement(Box, { display: "flex", gap: "8" }, /* @__PURE__ */ React69__default.createElement(CalendarGrid, { variant: props.variant, state: state2 }), /* @__PURE__ */ React69__default.createElement(CalendarGrid, { variant: props.variant, state: state2, offset: { months: 1 } })));
+  return /* @__PURE__ */ React69__default.createElement(Box, { ...calendarProps, ref }, /* @__PURE__ */ React69__default.createElement(CalendarHeader, { state: state2, title }), /* @__PURE__ */ React69__default.createElement(Box, { display: "flex", gap: "8" }, /* @__PURE__ */ React69__default.createElement(CalendarGrid, { variant: props.variant, state: state2 }), /* @__PURE__ */ React69__default.createElement(
+    CalendarGrid,
+    {
+      variant: props.variant,
+      state: state2,
+      offset: { months: 1 }
+    }
+  )));
 }
 
 // src/datepicker/DateRangePicker.tsx
@@ -5046,8 +5070,15 @@ var texts13 = createTexts({
   }
 });
 var PhoneNumberInput = forwardRef(
-  ({ name, value: externalValue, onChange: externalOnChange, ...boxProps }, ref) => {
+  ({
+    label: externalLabel,
+    name,
+    value: externalValue,
+    onChange: externalOnChange,
+    ...boxProps
+  }, ref) => {
     const { t: t2 } = useTranslation();
+    const label = externalLabel ?? t2(texts14.phoneNumber);
     const [value, onChange] = useControllableState({
       value: externalValue,
       onChange: externalOnChange,
@@ -5089,7 +5120,7 @@ var PhoneNumberInput = forwardRef(
       {
         ref,
         type: "tel",
-        label: t2(texts14.phoneNumber),
+        label,
         value: value.nationalNumber,
         name: name ? `${name}-phone-number` : "phone-number",
         onChange: (e) => {
@@ -5113,7 +5144,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-RUH47EQH.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-FBKDO5JS.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -5866,13 +5897,13 @@ var StepperProvider = ({
   activeStep,
   children,
   onClick,
-  colorScheme,
-  numberOfSteps
+  numberOfSteps,
+  variant
 }) => {
   return /* @__PURE__ */ React69__default.createElement(
     StepperContext.Provider,
     {
-      value: { activeStep, onClick, colorScheme, numberOfSteps }
+      value: { activeStep, onClick, numberOfSteps, variant }
     },
     children
   );
@@ -5894,9 +5925,9 @@ var Stepper = ({
   steps,
   activeStep: activeStepAsStringOrNumber,
   title,
-  colorScheme
+  variant
 }) => {
-  const style = useMultiStyleConfig("Stepper", { colorScheme });
+  const style = useMultiStyleConfig("Stepper", { variant });
   const numberOfSteps = steps.length;
   const activeStep = Number(activeStepAsStringOrNumber);
   const { t: t2 } = useTranslation();
@@ -5905,7 +5936,7 @@ var Stepper = ({
     {
       onClick,
       activeStep,
-      colorScheme,
+      variant,
       numberOfSteps
     },
     /* @__PURE__ */ React69__default.createElement(Box, { __css: style.container }, /* @__PURE__ */ React69__default.createElement(Box, { __css: style.innerContainer }, /* @__PURE__ */ React69__default.createElement(HStack, null, activeStep > 1 && /* @__PURE__ */ React69__default.createElement(
@@ -5924,8 +5955,16 @@ var Stepper = ({
         triggerElement: /* @__PURE__ */ React69__default.createElement(Box, { as: "button", __css: style.stepCounter }, t2(texts21.stepsOf(activeStep, numberOfSteps))),
         borderRadius: "xs"
       },
-      steps.map((step, index) => /* @__PURE__ */ React69__default.createElement(StepperStep, { key: step, stepNumber: index + 1 }, step))
-    )), title && /* @__PURE__ */ React69__default.createElement(Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React69__default.createElement(Flex, { justifyContent: "center", display: ["none", "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__default.createElement(StepperStep, { key: index, stepNumber: index + 1 }, step))))
+      steps.map((step, index) => /* @__PURE__ */ React69__default.createElement(
+        StepperStep,
+        {
+          key: step,
+          stepNumber: index + 1,
+          variant
+        },
+        step
+      ))
+    )), title && /* @__PURE__ */ React69__default.createElement(Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React69__default.createElement(Flex, { justifyContent: "center", display: ["none", "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__default.createElement(StepperStep, { key: index, stepNumber: index + 1, variant }, step))))
   ));
 };
 var texts21 = createTexts({
@@ -5942,28 +5981,57 @@ var texts21 = createTexts({
     en: "Back"
   }
 });
-var StepperStep = ({ children, stepNumber }) => {
-  const { activeStep, onClick, colorScheme } = useStepper();
-  const variant = getVariant(stepNumber, activeStep);
+var StepperStep = ({
+  children,
+  stepNumber,
+  variant
+}) => {
+  const { activeStep, onClick } = useStepper();
+  const state2 = getState(stepNumber, activeStep);
   const style = useMultiStyleConfig("Stepper", {
-    variant,
-    colorScheme
+    state: state2,
+    variant
   });
+  const adjustedProps = getButtonStylesForState(state2);
   return /* @__PURE__ */ React69__default.createElement(Box, { __css: style.stepContainer }, stepNumber > 1 && /* @__PURE__ */ React69__default.createElement(DropdownRightFill18Icon, { marginX: 5, display: ["none", "block"] }), /* @__PURE__ */ React69__default.createElement(
-    Flex,
+    Button,
     {
-      __css: style.stepButton,
-      alignItems: "center",
-      as: "button",
-      type: "button",
-      disabled: variant === "disabled" || variant === "active",
+      size: "xs",
+      variant: state2 === "active" ? "primary" : state2 === "completed" ? "additional" : "ghost",
+      ...adjustedProps,
       onClick: () => onClick(stepNumber)
     },
-    /* @__PURE__ */ React69__default.createElement(Box, { __css: style.stepNumber }, stepNumber),
-    /* @__PURE__ */ React69__default.createElement(Box, { __css: style.stepTitle }, children)
+    children
   ));
 };
-var getVariant = (stepNumber, activeStep) => {
+var getButtonStylesForState = (state2) => {
+  switch (state2) {
+    case "active":
+      return {
+        _hover: {},
+        boxShadow: "none",
+        _focus: {},
+        _active: {},
+        cursor: "auto"
+      };
+    case "completed":
+      return {
+        boxShadow: "none"
+      };
+    case "disabled":
+      return {
+        _disabled: {},
+        _hover: {},
+        _focus: {},
+        _active: {},
+        color: "dimGrey",
+        cursor: "auto"
+      };
+    default:
+      return {};
+  }
+};
+var getState = (stepNumber, activeStep) => {
   if (stepNumber < activeStep) {
     return "completed";
   }
@@ -11456,30 +11524,11 @@ var config6 = defineStyleConfig$1({
     }
   },
   variants: {
-    control: (props) => ({
-      backgroundColor: mode("darkTeal", "mint")(props),
-      color: mode("white", "darkTeal")(props),
-      ...focusVisible({
-        focus: {
-          boxShadow: `inset 0 0 0 4px ${mode(
-            colors.darkTeal,
-            colors.seaMist
-          )(props)}, inset 0 0 0 6px currentColor`
-        },
-        notFocus: { boxShadow: "none" }
-      }),
-      _hover: {
-        backgroundColor: mode("night", "coralGreen")(props)
-      },
-      _active: {
-        backgroundColor: mode("pine", "white")(props)
-      }
-    }),
     primary: (props) => ({
       // FIXME: Update to use a global defined background color for darkMode whenever it is available.
       // hardcoded background color as alpha-"hack" below is not feasible for dark mode with solid background color
-      backgroundColor: "primaryGreen",
-      color: "white",
+      backgroundColor: mode("primaryGreen", "coralGreen")(props),
+      color: mode("white", "darkTeal")(props),
       ...focusVisible({
         focus: {
           boxShadow: `inset 0 0 0 2px ${mode(
@@ -11493,28 +11542,28 @@ var config6 = defineStyleConfig$1({
         notFocus: { boxShadow: "none" }
       }),
       _hover: {
-        backgroundColor: "pine"
+        backgroundColor: mode("darkTeal", "blueGreen")(props)
       },
       _active: {
-        backgroundColor: "azure"
+        backgroundColor: mode("greenHaze", "seaMist")(props)
       }
     }),
     secondary: (props) => ({
       // FIXME: Update to use global defined background color for darkMode whenever it is available instead of alpha
-      backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
+      backgroundColor: mode("seaMist", "primaryGreen")(props),
       color: mode("darkTeal", "white")(props),
       // order is important here for now while we do not have global defined background color for darkMode
       _hover: {
-        backgroundColor: mode("coralGreen", "whiteAlpha.200")(props)
+        backgroundColor: mode("coralGreen", "greenHaze")(props)
       },
       ...focusVisible({
         focus: {
           boxShadow: `inset 0 0 0 2px ${mode(
             colors.greenHaze,
-            colors.azure
+            colors.primaryGreen
           )(props)}, inset 0 0 0 4px ${mode(
             colors.white,
-            colors.blackAlpha[300]
+            colors.darkTeal
           )(props)}`,
           _hover: {
             boxShadow: `inset 0 0 0 2px ${mode(
@@ -11531,7 +11580,7 @@ var config6 = defineStyleConfig$1({
         }
       }),
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.300")(props),
+        backgroundColor: mode("mint", "darkTeal")(props),
         boxShadow: `inset 0 0 0 2px ${mode(
           colors.greenHaze,
           colors.azure
@@ -11550,7 +11599,7 @@ var config6 = defineStyleConfig$1({
         }
       }
     }),
-    additional: (props) => ({
+    tertiary: (props) => ({
       backgroundColor: "transparent",
       color: mode("darkGrey", "white")(props),
       fontWeight: "normal",
@@ -11562,7 +11611,7 @@ var config6 = defineStyleConfig$1({
         focus: {
           boxShadow: getBoxShadowString({
             borderWidth: 2,
-            borderColor: "greenHaze"
+            borderColor: "azure"
           })
         },
         notFocus: {
@@ -11599,13 +11648,13 @@ var config6 = defineStyleConfig$1({
         }
       }),
       _hover: {
-        backgroundColor: mode("seaMist", "pine")(props),
+        backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
         _disabled: {
           color: "blackAlpha.300"
         }
       },
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.200")(props)
+        backgroundColor: mode("mint", "whiteAlpha.100")(props)
       }
     }),
     floating: (props) => ({
@@ -11615,7 +11664,7 @@ var config6 = defineStyleConfig$1({
         baseShadow: "sm"
       }),
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.300")(props)
+        backgroundColor: mode("mint", "whiteAlpha.400")(props)
       },
       _hover: {
         backgroundColor: mode("white", "whiteAlpha.200")(props),
@@ -11742,6 +11791,11 @@ var getColorSchemeBaseProps = (props) => {
         backgroundColor: "seaMist"
       };
     }
+    case "red": {
+      return {
+        backgroundColor: "pink"
+      };
+    }
     default:
       return {
         backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum"
@@ -12170,7 +12224,9 @@ var config11 = defineStyleConfig$1({
     ...focusVisible({
       focus: {
         outline: "none",
-        boxShadow: getBoxShadowString({ borderColor: mode("greenHaze", "azure")(props) }),
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props)
+        }),
         outlineOffset: "2px"
       },
       notFocus: {
@@ -12802,7 +12858,10 @@ var config15 = helpers8.defineMultiStyleConfig({
         },
         _hover: {
           backgroundColor: mode("white", "transparent")(props),
-          boxShadow: mode(`inset 0 0 0 2px ${props.theme.colors.darkGrey}`, `inset 0 0 0 2px ${props.theme.colors.white}`)(props),
+          boxShadow: mode(
+            `inset 0 0 0 2px ${props.theme.colors.darkGrey}`,
+            `inset 0 0 0 2px ${props.theme.colors.white}`
+          )(props),
           color: mode("darkGrey", "white")(props)
         },
         ...focusVisible({
@@ -13352,7 +13411,7 @@ var config20 = helpers12.defineMultiStyleConfig({
     size: "md"
   },
   variants: {
-    "walk": (props) => ({
+    walk: (props) => ({
       iconContainer: {
         backgroundColor: mode("white", "transparent")(props),
         boxShadow: mode(
@@ -13403,7 +13462,9 @@ var config21 = helpers13.defineMultiStyleConfig({
           })
         },
         notFocus: {
-          boxShadow: getBoxShadowString({ borderColor: mode("darkGrey", "white")(props) })
+          boxShadow: getBoxShadowString({
+            borderColor: mode("darkGrey", "white")(props)
+          })
         }
       }),
       _disabled: {
@@ -14169,7 +14230,6 @@ var helpers21 = createMultiStyleConfigHelpers$1(parts13.keys);
 var config31 = helpers21.defineMultiStyleConfig({
   baseStyle: (props) => ({
     root: {
-      backgroundColor: getRootBackgroundColor(props),
       display: "flex",
       alignItems: "center",
       justifyContent: ["space-between", "center"],
@@ -14187,8 +14247,7 @@ var config31 = helpers21.defineMultiStyleConfig({
       overflow: "hidden",
       display: ["flex", "none"],
       alignItems: "center",
-      justifyContent: "space-between",
-      color: getColor5(props)
+      justifyContent: "space-between"
     },
     backButton: {
       borderRadius: "xs",
@@ -14205,170 +14264,32 @@ var config31 = helpers21.defineMultiStyleConfig({
       ml: 2,
       textAlign: "right"
     },
-    stepCounter: {
-      whiteSpace: "nowrap",
-      textDecoration: "underline"
-    },
     stepContainer: {
       display: "flex",
       alignItems: "center"
     },
-    stepButton: {
-      color: "inherit",
-      display: "flex",
-      alignItems: "center",
-      padding: 1,
-      borderRadius: "xs"
-    },
-    stepNumber: {
-      borderRadius: "round",
-      border: "sm",
-      borderColor: "currentColor",
-      width: 4,
-      height: 4,
-      mr: 1,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      fontSize: ["mobile.xs", "desktop.xs"]
-    },
     stepTitle: {
       textStyle: "sm",
       whiteSpace: "nowrap"
     }
   }),
   variants: {
-    completed: (props) => ({
-      stepContainer: {
-        color: getColor5(props)
-      },
-      stepButton: {
-        _hover: getHoverStyles(props),
-        _focus: getFocusStyles(props),
-        "&:focus:not(:focus-visible)": {
-          boxShadow: "none"
-        },
-        _focusVisible: getFocusStyles(props),
-        _active: getActiveStyles(props)
-      }
-    }),
-    active: (props) => ({
-      stepContainer: {
-        color: getColor5(props)
-      },
-      stepButton: {
-        pointerEvents: "none"
-      },
-      stepNumber: getStepNumberStyles(props),
-      stepTitle: {
-        fontWeight: "bold"
+    base: (props) => ({
+      root: {
+        backgroundColor: "transparent"
       }
     }),
-    disabled: (props) => ({
-      stepContainer: {
-        color: getDisabledColor(props)
-      },
-      stepButton: {
-        pointerEvents: "none"
+    accent: (props) => ({
+      root: {
+        backgroundColor: mode("seaMist", "pine")(props)
       }
     })
   },
   defaultProps: {
-    colorScheme: "green"
+    variant: "base"
   }
 });
 var stepper_default = config31;
-var getRootBackgroundColor = (props) => {
-  switch (props.colorScheme) {
-    case "light":
-      return "white";
-    case "dark":
-      return "darkTeal";
-    case "green":
-    default:
-      return "seaMist";
-  }
-};
-var getColor5 = (props) => {
-  switch (props.colorScheme) {
-    case "light":
-      return mode("darkGrey", "white")(props);
-    case "dark":
-      return "white";
-    case "green":
-    default:
-      return mode("darkTeal", "white")(props);
-  }
-};
-var getStepNumberStyles = (props) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return {
-        backgroundColor: "white",
-        color: "darkTeal"
-      };
-    case "light":
-    case "green":
-    default:
-      return {
-        backgroundColor: mode("darkTeal", "white")(props),
-        color: mode("white", "darkTeal")(props)
-      };
-  }
-};
-var getDisabledColor = (props) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return "whiteAlpha.400";
-    case "green":
-      return "dimGrey";
-    case "light":
-    default:
-      return "osloGrey";
-  }
-};
-var getHoverStyles = (props) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return { backgroundColor: "pine" };
-    case "green":
-      return {
-        backgroundColor: mode("coralGreen", "primaryGreen")(props)
-      };
-    case "light":
-    default:
-      return {
-        backgroundColor: mode("seaMist", "primaryGreen")(props)
-      };
-  }
-};
-var getFocusStyles = (props) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return {
-        outline: "none",
-        boxShadow: `inset 0 0 0 2px ${props.theme.colors.white}`
-      };
-    case "light":
-    case "green":
-    default:
-      return {
-        outline: "none",
-        boxShadow: `inset 0 0 0 2px ${props.theme.colors.greenHaze}`
-      };
-  }
-};
-var getActiveStyles = (props) => {
-  switch (props.colorScheme) {
-    case "light":
-      return { backgroundColor: "mint" };
-    case "dark":
-      return { backgroundColor: "celadon" };
-    case "green":
-    default:
-      return { color: "azure", backgroundColor: "transparent" };
-  }
-};
 var $width2 = cssVar$1("switch-track-width");
 var $height3 = cssVar$1("switch-track-height");
 var $diff2 = cssVar$1("switch-track-diff");
@@ -14977,7 +14898,10 @@ var getTabColorSchemeHoverProps = (props) => {
       };
     case "base":
       return {
-        boxShadow: mode(`inset 0 0 0 2px ${props.theme.colors.darkGrey}`, `inset 0 0 0 2px ${props.theme.colors.white}`)(props),
+        boxShadow: mode(
+          `inset 0 0 0 2px ${props.theme.colors.darkGrey}`,
+          `inset 0 0 0 2px ${props.theme.colors.white}`
+        )(props),
         color: mode("darkGrey", "white")(props)
       };
     case "accent":
@@ -15076,7 +15000,10 @@ var getTablistColorSchemeProps = (props) => {
       return {
         backgroundColor: mode("white", "transparent")(props),
         color: "darkGrey",
-        boxShadow: mode(`inset 0 0 0 1px ${props.theme.colors.blackAlpha["400"]}`, `inset 0 0 0 1px ${props.theme.colors.whiteAlpha["400"]}`)(props)
+        boxShadow: mode(
+          `inset 0 0 0 1px ${props.theme.colors.blackAlpha["400"]}`,
+          `inset 0 0 0 1px ${props.theme.colors.whiteAlpha["400"]}`
+        )(props)
       };
     case "accent":
       return {