@vygruppen/spor-react 12.17.0 → 12.19.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.17.0 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.19.0 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -11,18 +11,18 @@ CLI Cleaning output folder
 ESM Build start
 CJS Build start
 DTS Build start
-ESM dist/index.mjs           300.00 KB
-ESM dist/icons/index.mjs     110.00 B
-ESM dist/index.mjs.map       641.63 KB
-ESM dist/icons/index.mjs.map 157.00 B
-ESM ⚡️ Build success in 2812ms
-CJS dist/index.cjs           321.71 KB
+CJS dist/index.cjs           321.03 KB
 CJS dist/icons/index.cjs     381.00 B
-CJS dist/index.cjs.map       641.63 KB
 CJS dist/icons/index.cjs.map 157.00 B
-CJS ⚡️ Build success in 2813ms
-DTS ⚡️ Build success in 19521ms
+CJS dist/index.cjs.map       638.43 KB
+CJS ⚡️ Build success in 2666ms
+ESM dist/index.mjs           299.20 KB
+ESM dist/icons/index.mjs     110.00 B
+ESM dist/icons/index.mjs.map 157.00 B
+ESM dist/index.mjs.map       638.43 KB
+ESM ⚡️ Build success in 2673ms
+DTS ⚡️ Build success in 20756ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        157.05 KB
+DTS dist/index.d.ts        155.63 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       157.05 KB
+DTS dist/index.d.cts       155.63 KB

package/.turbo/turbo-postinstall.log

@@ -1,11 +1,12 @@
 
-> @vygruppen/spor-react@12.17.0 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.19.0 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
-[dotenv@17.2.2] injecting env (0) from .env -- tip: 🔐 prevent building .env in docker: https://dotenvx.com/prebuild
+[dotenv@17.2.2] injecting env (0) from .env -- tip: 🔐 prevent committing .env to code: https://dotenvx.com/precommit
 ┌  Chakra CLI ⚡️
 [?25l│
-◇  ✅ Generated conditions typings
+◒  Generating conditions types...
+◇  ✅ Generated conditions typings
 [?25h[?25l│
 ◒  Generating recipe types...
 ◇  ✅ Generated recipe typings

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @vygruppen/spor-react
 
+## 12.19.0
+
+### Minor Changes
+
+- fbf18ea: Update all eslint config dependencies to their latest versions.
+  This may introduce breaking changes due to major version upgrades.
+
+### Patch Changes
+
+- @vygruppen/spor-design-tokens@4.2.0
+- @vygruppen/spor-icon-react@4.3.0
+
+## 12.18.0
+
+### Minor Changes
+
+- cd46711: **Separator**
+  - Fix dashed style not rendering correctly on vertical orientation
+  - Enable responsive values by removing compound variants from recipe
+  - Simplify component types
+
+  **Button**
+  - Fix types to properly support responsive style props
+
+  **Checkbox**
+  - Remove `onChange` prop to prevent confusion with `onValueChange`
+
+- 9c3987d: Add a variant to accordion to display it with a border bottom line
+
 ## 12.17.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -190,23 +190,6 @@ function useTranslation() {
 function createTexts(texts26) {
   return texts26;
 }
-var hydrating = true;
-function useHydrated() {
-  const [hydrated, setHydrated] = React28.useState(() => !hydrating);
-  React28.useEffect(function hydrate() {
-    hydrating = false;
-    setHydrated(true);
-  }, []);
-  return hydrated;
-}
-
-// src/loader/ClientOnly.tsx
-var ClientOnly = ({ children, fallback = null }) => {
-  const isHydrated = useHydrated();
-  if (!isHydrated)
-    return fallback;
-  return children;
-};
 function Lottie({ animationData }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ReactLottie__default.default, { animationData });
 }
@@ -216,7 +199,7 @@ var ColorInlineLoader = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { role: "status", "aria-live": "polite", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.inlineLoaderColorData }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.inlineLoaderColorData }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." })
   ] });
 };
@@ -227,14 +210,14 @@ var ColorSpinner = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { flexDirection: "column", role: "status", "aria-live": "polite", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.spinnerColorData }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.spinnerColorData }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." }),
     children && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { marginTop: 3, fontWeight: "bold", children })
   ] });
 };
 var ContentLoader = ({ children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { role: "status", "aria-live": "polite", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { maxWidth: "140px", marginX: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.contentLoaderData }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { maxWidth: "140px", marginX: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.contentLoaderData }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." }),
     children && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { textAlign: "center", fontWeight: "bold", children })
   ] });
@@ -254,7 +237,7 @@ var DarkFullScreenLoader = ({
       "aria-live": "polite",
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.fullScreenLoaderWhiteData }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.fullScreenLoaderWhiteData }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." })
       ]
     }
@@ -266,7 +249,7 @@ var DarkInlineLoader = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { role: "status", "aria-live": "polite", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.inlineLoaderDarkData }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.inlineLoaderDarkData }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." })
   ] });
 };
@@ -279,7 +262,7 @@ var DarkSpinner = ({
   const { colorMode } = useColorMode();
   const spinnerData = colorMode === "dark" ? sporLoader.spinnerLightData : sporLoader.spinnerDarkData;
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { flexDirection: "column", role: "status", "aria-live": "polite", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: spinnerData }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: spinnerData }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." }),
     children && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { marginTop: 3, fontWeight: "bold", children })
   ] });
@@ -290,7 +273,7 @@ var LightFullScreenLoader = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { height: "100%", role: "status", "aria-live": "polite", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.fullScreenLoaderBlackData }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.fullScreenLoaderBlackData }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." })
   ] });
 };
@@ -300,7 +283,7 @@ var LightInlineLoader = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { height: "100%", role: "status", "aria-live": "polite", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.inlineLoaderLightData }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.inlineLoaderLightData }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." })
   ] });
 };
@@ -311,7 +294,7 @@ var LightSpinner = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { flexDirection: "column", role: "status", "aria-live": "polite", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.spinnerLightData }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.spinnerLightData }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." }),
     children && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { marginTop: 3, fontWeight: "bold", children })
   ] });
@@ -900,23 +883,8 @@ var FloatingActionButton = React28.forwardRef(
     placement = "bottom right",
     ...props
   }, ref) => {
-    const [isTextVisible, setIsTextVisible] = React28__namespace.default.useState(
-      externalIsTextVisible === void 0 ? false : externalIsTextVisible
-    );
     const scrollDirection = useScrollDirection();
-    React28.useEffect(() => {
-      if (externalIsTextVisible !== void 0) {
-        return;
-      }
-      const id = globalThis.setTimeout(
-        () => setIsTextVisible(scrollDirection !== "down"),
-        1e3
-      );
-      return () => globalThis.clearTimeout(id);
-    }, [scrollDirection, externalIsTextVisible]);
-    React28.useEffect(() => {
-      setIsTextVisible(!!externalIsTextVisible);
-    }, [externalIsTextVisible]);
+    const isTextVisible = externalIsTextVisible === void 0 ? scrollDirection !== "down" : !!externalIsTextVisible;
     const recipe = react.useSlotRecipe({ key: "floatingActionButton" });
     const style = recipe({
       variant,
@@ -3452,36 +3420,39 @@ var prioritizedCountryCodes = [
   { label: "+46", value: "+46" },
   { label: "+45", value: "+45" }
 ];
-var sortedCallingCodes = awesomePhonenumber.getSupportedCallingCodes().sort((a, b) => Number(a) - Number(b)).map((code) => ({
+var sortedCallingCodes = awesomePhonenumber.getSupportedCallingCodes().toSorted((a, b) => Number(a) - Number(b)).map((code) => ({
   label: `+${code}`,
   value: `+${code}`
 })).filter(
   (code) => !prioritizedCountryCodes.some((pCode) => pCode.label === code.label)
 );
-var callingCodes = react.createListCollection({
+var allCallingCodes = react.createListCollection({
   items: [...prioritizedCountryCodes, ...sortedCallingCodes]
 });
 var CountryCodeSelect = React28.forwardRef((props, ref) => {
   const { t } = useTranslation();
-  if (props.allowedCountryCodes) {
-    callingCodes.items = callingCodes.items.filter(
+  const filteredCallingCodes = React28.useMemo(() => {
+    if (!props.allowedCountryCodes)
+      return allCallingCodes;
+    const filteredItems = allCallingCodes.items.filter(
       (callingCode) => {
         var _a5;
-        return (_a5 = props.allowedCountryCodes) == null ? void 0 : _a5.some((code) => code === callingCode.label);
+        return (_a5 = props.allowedCountryCodes) == null ? void 0 : _a5.includes(callingCode.label);
       }
     );
-  }
+    return react.createListCollection({ items: filteredItems });
+  }, [props.allowedCountryCodes]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Select,
     {
       ...props,
       ref,
       positioning: { placement: "bottom", flip: false },
-      collection: callingCodes,
+      collection: filteredCallingCodes,
       lazyMount: true,
       "aria-label": t(texts15.countryCode),
       sideRadiusVariant: "rightSideSquare",
-      children: callingCodes.items.map((code) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { item: code, children: code.label }, code.label))
+      children: filteredCallingCodes.items.map((code) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { item: code, children: code.label }, code.label))
     }
   );
 });
@@ -3942,14 +3913,7 @@ RadioCardGroup.displayName = "RadioCardGroup";
 var RadioCardLabel = react.RadioCard.Label;
 var Separator = React28.forwardRef(
   (props, ref) => {
-    const {
-      size = "md",
-      variant = "solid",
-      orientation = "horizontal"
-    } = props;
-    const recipe = react.useRecipe({ key: "seperator" });
-    const styles = recipe({ size, variant, orientation });
-    return /* @__PURE__ */ jsxRuntime.jsx(react.Separator, { css: styles, ...props, ref });
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Separator, { ...props, ref, "data-": true });
   }
 );
 Separator.displayName = "Separator";
@@ -4026,9 +3990,10 @@ var icons = {
   },
   walk: { sm: sporIconReact.WalkFill18Icon, md: sporIconReact.WalkFill24Icon, lg: sporIconReact.WalkFill30Icon }
 };
-var getCorrectIcon = ({ variant, size }) => {
+var LinjeTagIcon = ({ variant, size, css }) => {
   var _a5;
-  return ((_a5 = icons[variant]) == null ? void 0 : _a5[size]) ?? react.Box;
+  const IconComponent2 = ((_a5 = icons[variant]) == null ? void 0 : _a5[size]) ?? react.Box;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent2, {}) });
 };
 var LineIcon = React28.forwardRef(
   function LineIcon2({
@@ -4049,19 +4014,18 @@ var LineIcon = React28.forwardRef(
     const borderContainer = () => {
       return variant === "walk" && target === "travelTag" ? 0 : "1px";
     };
-    const Icon2 = getCorrectIcon({
-      variant: (
-        // eslint-disable-next-line no-nested-ternary
-        variant === "custom" && "customIconVariant" in rest ? rest.customIconVariant : variant === "custom" ? "local-train" : variant
-      ),
-      size
-    });
-    if (!Icon2) {
-      return null;
-    }
     if (foregroundColor) {
       styles.iconContainer.backgroundColor = disabled ? "surface.disabled" : foregroundColor;
     }
+    function getIconVariant() {
+      if (variant === "custom") {
+        if ("customIconVariant" in rest) {
+          return rest.customIconVariant;
+        }
+        return "local-train";
+      }
+      return variant;
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
       react.Box,
       {
@@ -4072,7 +4036,14 @@ var LineIcon = React28.forwardRef(
         "aria-label": label,
         ref,
         className: clsx_default("light", rest.className),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { css: styles.icon })
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          LinjeTagIcon,
+          {
+            size,
+            css: styles.icon,
+            variant: getIconVariant()
+          }
+        )
       }
     );
   }
@@ -4106,6 +4077,23 @@ var InfoTag = ({
     ] })
   ] });
 };
+function renderDeviationLevelIcon(deviationLevel, size, css) {
+  switch (deviationLevel) {
+    case "critical": {
+      return size === "lg" ? /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.ErrorFill24Icon, { css }) : /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.ErrorFill18Icon, { css });
+    }
+    case "major":
+    case "minor": {
+      return size === "lg" ? /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.WarningFill24Icon, { css }) : /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.WarningFill18Icon, { css });
+    }
+    case "info": {
+      return size === "lg" ? /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.InformationFill24Icon, { css }) : /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.InformationFill18Icon, { css });
+    }
+    default: {
+      return null;
+    }
+  }
+}
 var TravelTag = React28.forwardRef(
   function TravelTag2({
     variant,
@@ -4125,7 +4113,6 @@ var TravelTag = React28.forwardRef(
       size,
       deviationLevel
     });
-    const DeviationLevelIcon = getDeviationLevelIcon({ deviationLevel, size });
     return /* @__PURE__ */ jsxRuntime.jsxs(
       react.Box,
       {
@@ -4154,32 +4141,12 @@ var TravelTag = React28.forwardRef(
             title && description && " ",
             description && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "span", css: styles.description, children: description })
           ] }),
-          DeviationLevelIcon && /* @__PURE__ */ jsxRuntime.jsx(DeviationLevelIcon, { css: styles.deviationIcon })
+          renderDeviationLevelIcon(deviationLevel, size, styles.deviationIcon)
         ]
       }
     );
   }
 );
-var getDeviationLevelIcon = ({
-  deviationLevel,
-  size
-}) => {
-  switch (deviationLevel) {
-    case "critical": {
-      return size === "lg" ? sporIconReact.ErrorFill24Icon : sporIconReact.ErrorFill18Icon;
-    }
-    case "major":
-    case "minor": {
-      return size === "lg" ? sporIconReact.WarningFill24Icon : sporIconReact.WarningFill18Icon;
-    }
-    case "info": {
-      return size === "lg" ? sporIconReact.InformationFill24Icon : sporIconReact.InformationFill18Icon;
-    }
-    default: {
-      return null;
-    }
-  }
-};
 var ExternalIcon = ({
   label,
   size
@@ -5988,11 +5955,9 @@ var pressableCardRecipe = react.defineRecipe({
   }
 });
 var separatorRecipe = react.defineRecipe({
-  className: "spor-separator",
   base: {
-    borderColor: "outline.disabled",
     display: "block",
-    borderRadius: "xl"
+    borderColor: "outline.disabled"
   },
   variants: {
     variant: {
@@ -6000,72 +5965,54 @@ var separatorRecipe = react.defineRecipe({
         borderStyle: "solid"
       },
       dashed: {
+        borderImageSlice: 1,
+        borderImageSource: `repeating-linear-gradient(
+            var(--gradient-direction),
+            var(--spor-colors-outline-disabled) 0,
+            var(--spor-colors-outline-disabled) var(--dash-size),
+            transparent var(--dash-size),
+            transparent calc(var(--dash-size) + var(--dash-gap))
+          )`
+      }
+    },
+    orientation: {
+      vertical: {
+        height: "100%",
+        borderInlineStartWidth: "var(--separator-thickness)",
+        "--gradient-direction": "0deg"
+      },
+      horizontal: {
         width: "100%",
-        borderWidth: "0px"
+        borderTopWidth: "var(--separator-thickness)",
+        "--gradient-direction": "90deg"
       }
     },
     size: {
       sm: {
-        borderBottomWidth: "1px",
-        height: "1px"
+        "--separator-thickness": "1px",
+        borderRadius: "1px",
+        "--dash-size": "2px",
+        "--dash-gap": "3px"
       },
       md: {
-        borderBottomWidth: "2px",
-        height: "2px"
+        "--separator-thickness": "2px",
+        borderRadius: "2px",
+        "--dash-size": "4px",
+        "--dash-gap": "4px"
       },
       lg: {
-        borderBottomWidth: "3px",
-        height: "3px"
-      }
-    },
-    orientation: {
-      horizontal: {
-        width: "100%"
-      },
-      vertical: {
-        height: "100%",
-        borderLeftWidth: "1px"
+        "--separator-thickness": "3px",
+        borderRadius: "3px",
+        "--dash-size": "6px",
+        "--dash-gap": "6px"
       }
     }
   },
-  compoundVariants: [
-    {
-      variant: "dashed",
-      size: "sm",
-      css: {
-        background: "linear-gradient(to left, var(--spor-colors-outline-disabled), var(--spor-colors-outline-disabled) 1px, transparent 1px, transparent 4px)",
-        backgroundSize: "4px 1px",
-        backgroundRepeat: "repeat-x"
-      }
-    },
-    {
-      variant: "dashed",
-      size: "md",
-      css: {
-        background: "linear-gradient(to left, var(--spor-colors-outline-disabled), var(--spor-colors-outline-disabled) 3px, transparent 3px, transparent 6px)",
-        backgroundSize: "9px 2px",
-        backgroundRepeat: "repeat-x"
-      }
-    },
-    {
-      variant: "dashed",
-      size: "lg",
-      css: {
-        background: "linear-gradient(to left, var(--spor-colors-outline-disabled), var(--spor-colors-outline-disabled) 3px, transparent 3px, transparent 9px)",
-        backgroundSize: "9px 3px",
-        backgroundRepeat: "repeat-x"
-      }
-    },
-    {
-      variant: "dashed",
-      orientation: "vertical",
-      css: {
-        background: "0",
-        width: "0%",
-        height: "100%"
-      }
-    }
-  ]
+  defaultVariants: {
+    size: "md",
+    variant: "solid",
+    orientation: "horizontal"
+  }
 });
 var skeletonRecipe = react.defineRecipe({
   className: "chakra-skeleton",
@@ -6195,7 +6142,7 @@ var recipes = {
   link: linkRecipe,
   pressableCard: pressableCardRecipe,
   progressLoader: progressLoaderRecipe,
-  seperator: separatorRecipe,
+  separator: separatorRecipe,
   skeleton: skeletonRecipe,
   staticCard: staticCardRecipe,
   textarea: textareaRecipe
@@ -6606,6 +6553,16 @@ var accordionSlotRecipe = react.defineSlotRecipe({
           }
         }
       },
+      underlined: {
+        root: {
+          borderRadius: "none"
+        },
+        item: {
+          borderRadius: "none",
+          borderBottom: "1px solid",
+          borderBottomColor: "floating.outline.active"
+        }
+      },
       floating: {
         item: {
           outline: "1px solid",