@vygruppen/spor-react 12.7.0 → 12.8.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group as Group$1, Badge as Badge$1, Code as Code$1, Clipboard as Clipboard$1, IconButton as IconButton$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, ClientOnly as ClientOnly$1, Field, defineStyle, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, Drawer as Drawer$1, Grid, GridItem, usePopoverContext, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCard, Fieldset as Fieldset$1, Input as Input$1, InputElement, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, List as List$1, Center, PopoverCloseTrigger, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineSlotRecipe, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, VisuallyHidden, defineConfig, ListItem, ChakraProvider, Toaster as Toaster$1, Toast, Icon } from '@chakra-ui/react';
+import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group, Badge as Badge$1, Code as Code$1, Clipboard as Clipboard$1, IconButton as IconButton$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, ClientOnly as ClientOnly$1, Field, defineStyle, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, Drawer as Drawer$1, Grid, GridItem, usePopoverContext, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCard, Fieldset as Fieldset$1, InputElement, Input as Input$1, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, List as List$1, Center, PopoverCloseTrigger, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineSlotRecipe, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, VisuallyHidden, defineConfig, ListItem, ChakraProvider, Toaster as Toaster$1, Toast, Icon } from '@chakra-ui/react';
 export { Box, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, ClientOnly, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableBody, TableCaption, TableCell, TableColumn, TableColumnGroup, TableColumnHeader, TableFooter, TableHeader, TableRoot, TableRow, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, chakra as spor, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useToken } from '@chakra-ui/react';
 import { DropdownDownFill24Icon, CopyOutline18Icon, CheckmarkFill18Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, ServiceFill24Icon, QuestionFill24Icon, ErrorOutline24Icon, ErrorFill24Icon, AltTransportFill24Icon, WarningFill24Icon, SuccessFill24Icon, InformationFill24Icon, DropdownDownFill18Icon, DropdownRightFill18Icon, CalendarOutline24Icon, ArrowLeftFill24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, LinkOutOutline24Icon, LinkOutOutline18Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, DropdownLeftFill18Icon, SuccessFill18Icon } from '@vygruppen/spor-icon-react';
 import * as React28 from 'react';
@@ -16,13 +16,14 @@ export { Item, Section } from 'react-stately';
 import { GregorianCalendar, createCalendar, getLocalTimeZone, endOfMonth, getWeeksInMonth, isSameMonth, isToday, parseTime } from '@internationalized/date';
 export { Time } from '@internationalized/date';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
+import { Global } from '@emotion/react';
 import tokens23__default from '@vygruppen/spor-design-tokens';
 import * as tokens23 from '@vygruppen/spor-design-tokens';
 export { tokens23 as tokens };
-import { Global } from '@emotion/react';
 import tokens4 from '@vygruppen/spor-design-tokens/raw-tokens';
 import { createAnatomy } from '@ark-ui/react/anatomy';
 import { popoverAnatomy as popoverAnatomy$1 } from '@ark-ui/react/popover';
+import { collapsibleAnatomy } from '@ark-ui/react/collapsible';
 
 // src/accordion/Accordion.tsx
 
@@ -606,38 +607,12 @@ var texts2 = createTexts({
     sv: "Laddar\u2026"
   }
 });
-var groupRecipe = defineRecipe({
-  className: "spor-group",
-  base: {
-    fontSize: "lg"
-  },
-  variants: {
-    disabled: {
-      true: {
-        "& > *": {
-          pointerEvents: "none",
-          backgroundColor: "surface.disabled",
-          color: "text.disabled"
-        }
-      }
-    }
-  }
-});
-var Group = chakra(Group$1, groupRecipe);
 var ButtonGroup = forwardRef(
   (props, ref) => {
-    const { children, disabled, grow, attached, ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      Group,
-      {
-        ...rest,
-        ref,
-        attached,
-        grow,
-        disabled,
-        children
-      }
-    );
+    const recipe = useRecipe({ key: "buttonGroup" });
+    const [recipeProps, restProps] = recipe.splitVariantProps(props);
+    const styles = recipe(recipeProps);
+    return /* @__PURE__ */ jsx(Group, { ...restProps, ref, css: styles });
   }
 );
 ButtonGroup.displayName = "ButtonGroup";
@@ -1399,7 +1374,7 @@ var Field3 = React28.forwardRef(
     } = props;
     const recipe = useSlotRecipe({ key: "field" });
     const styles = recipe();
-    return /* @__PURE__ */ jsxs(Stack, { gap: "2", ref, ...rest, children: [
+    return /* @__PURE__ */ jsxs(Stack, { gap: "2", ref, width: "100%", ...rest, children: [
       /* @__PURE__ */ jsxs(
         Field.Root,
         {
@@ -2346,7 +2321,7 @@ var DialogContent = React28.forwardRef((props, ref) => {
 });
 DialogContent.displayName = "DialogContent";
 var DialogCloseTrigger = React28.forwardRef(function DialogCloseTrigger2(props, ref) {
-  return /* @__PURE__ */ jsx(Dialog.CloseTrigger, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { size: "md" }) });
+  return /* @__PURE__ */ jsx(Dialog.CloseTrigger, { ref, position: "absolute", ...props, asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { size: "md" }) });
 });
 var DialogRoot = Dialog.Root;
 var DialogFooter = Dialog.Footer;
@@ -2447,51 +2422,12 @@ var texts12 = createTexts({
     sv: "St\xE4ng"
   }
 });
-var attachedInputsRecipe = defineRecipe({
-  base: {
-    display: "flex",
-    gap: "0.1rem",
-    width: "100%",
-    "& select": {
-      borderEndRadius: 0
-    }
-  },
-  variants: {
-    orientation: {
-      horizontal: {
-        flexDirection: "row",
-        "& > *:first-of-type:not(:last-of-type) [data-attachable]": {
-          borderEndRadius: 0
-        },
-        "& > *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
-          borderRadius: 0
-        },
-        "& > *:not(:first-of-type):last-of-type [data-attachable]": {
-          borderStartRadius: 0
-        }
-      },
-      vertical: {
-        flexDirection: "column",
-        "& > *:first-of-type:not(:last-of-type) [data-attachable]": {
-          borderBottomRadius: 0
-        },
-        "& > *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
-          borderRadius: 0
-        },
-        "& > *:not(:first-of-type):last-of-type [data-attachable]": {
-          borderTopRadius: 0
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    orientation: "horizontal"
-  }
-});
-var StyledGroup = chakra(Group$1, attachedInputsRecipe);
 var AttachedInputs = forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsx(StyledGroup, { ref, attached: true, ...props });
+    const recipe = useRecipe({ key: "attachedInputs" });
+    const [recipeProps, restProps] = recipe.splitVariantProps(props);
+    const styles = recipe(recipeProps);
+    return /* @__PURE__ */ jsx(Group, { ref, css: styles, attached: true, ...restProps });
   }
 );
 AttachedInputs.displayName = "AttachedInputs";
@@ -2642,10 +2578,10 @@ var Combobox = (props) => {
     loading,
     leftIcon,
     rightIcon,
-    borderBottomLeftRadius = "sm",
-    borderBottomRightRadius = "sm",
-    borderTopLeftRadius = "sm",
-    borderTopRightRadius = "sm",
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
     marginBottom,
     marginTop,
     marginX,
@@ -2744,7 +2680,8 @@ var Combobox = (props) => {
             }
           }
         ) : rightIcon,
-        placeholder: ""
+        placeholder: "",
+        "data-attachable": true
       }
     ),
     /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-trigger": "multiselect" }),
@@ -2813,90 +2750,6 @@ var FieldsetLegend = Fieldset$1.Legend;
 var FieldsetContent = Fieldset$1.Content;
 var FieldsetHelperText = Fieldset$1.HelperText;
 var FieldsetErrorText = Fieldset$1.ErrorText;
-var inputRecipe = defineRecipe({
-  base: {
-    appearance: "none",
-    width: "100%",
-    outline: "none",
-    border: 0,
-    borderRadius: "sm",
-    transitionProperty: "common",
-    transitionDuration: "fast",
-    color: "text",
-    position: "relative",
-    paddingX: 3,
-    paddingTop: 3,
-    height: 8,
-    fontSize: "mobile.md",
-    _disabled: {
-      backgroundColor: "surface.disabled",
-      outline: "1px solid",
-      outlineColor: "outline.disabled",
-      pointerEvents: "none"
-    },
-    _invalid: {
-      outline: "2px solid",
-      outlineColor: "outline.error",
-      _active: {
-        outline: "2px solid",
-        outlineColor: "outline.error"
-      },
-      _focus: {
-        outline: "2px solid",
-        outlineColor: "outline.error"
-      },
-      _hover: {
-        outline: "2px solid",
-        outlineColor: "core.outline"
-      }
-    }
-  },
-  variants: {
-    variant: {
-      core: {
-        backgroundColor: "transparent",
-        outline: "1px solid",
-        outlineColor: "core.outline",
-        _hover: {
-          outline: "2px solid",
-          outlineColor: "core.outline.hover",
-          _active: {
-            outline: "1px solid",
-            outlineColor: "outline.disabled",
-            backgroundColor: "core.surface.active"
-          }
-        },
-        _focus: {
-          outline: "2px solid",
-          outlineColor: "outline.focus"
-        }
-      },
-      floating: {
-        boxShadow: "sm",
-        bg: "floating.surface",
-        outline: "1px solid",
-        outlineColor: "floating.outline",
-        _hover: {
-          outline: "1px solid",
-          outlineColor: "floating.outline.hover"
-        },
-        _active: {
-          outline: "1px solid",
-          outlineColor: "floating.outline.active",
-          backgroundColor: "floating.surface.active"
-        },
-        focus: {
-          outline: "1px solid",
-          outlineColor: "outline.focus"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "core"
-  }
-});
-var StyledInput = chakra(Input$1, inputRecipe);
 var Input = forwardRef(
   ({
     startElement,
@@ -2907,6 +2760,9 @@ var Input = forwardRef(
     errorText,
     ...props
   }, ref) => {
+    const recipe = useRecipe({ key: "input" });
+    const [recipeProps, restProps] = recipe.splitVariantProps(props);
+    const styles = recipe(recipeProps);
     return /* @__PURE__ */ jsxs(
       Field3,
       {
@@ -2924,7 +2780,7 @@ var Input = forwardRef(
         children: [
           startElement && /* @__PURE__ */ jsx(InputElement, { pointerEvents: "none", paddingX: 2, children: startElement }),
           /* @__PURE__ */ jsx(
-            StyledInput,
+            Input$1,
             {
               "data-attachable": true,
               ref,
@@ -2932,9 +2788,10 @@ var Input = forwardRef(
               overflow: "hidden",
               paddingLeft: startElement ? "2.6rem" : void 0,
               paddingRight: endElement ? "2.6rem" : void 0,
-              ...props,
+              ...restProps,
               className: `peer ${props.className}`,
-              placeholder: ""
+              placeholder: "",
+              css: styles
             }
           ),
           endElement && /* @__PURE__ */ jsx(InputElement, { placement: "end", paddingX: 2, children: endElement })
@@ -3398,7 +3255,7 @@ var CountryCodeSelect = forwardRef((props, ref) => {
       collection: callingCodes,
       lazyMount: true,
       "aria-label": t(texts15.countryCode),
-      variant: "rightSideSquare",
+      sideRadiusVariant: "rightSideSquare",
       children: callingCodes.items.map((code) => /* @__PURE__ */ jsx(SelectItem, { as: "option", item: code, children: code.label }, code.label))
     }
   );
@@ -3770,97 +3627,12 @@ var Textarea = forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-
-// src/util/slugify.tsx
-function slugify(text, maxLength = 50) {
-  if (!text) {
-    return text;
-  }
-  if (Array.isArray(text)) {
-    text = text.join(" ");
-  }
-  if (maxLength < 1) {
-    throw new Error("The maxLength parameter must be a positive number");
-  }
-  return text.normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").replaceAll(/[\u00C6\u00E6]/g, "ae").replaceAll(/[\u00D8\u00F8]/g, "oe").replaceAll(/[\u00C5\u00E5]/g, "aa").toLowerCase().replaceAll(/\s+/g, "-").replaceAll(/[^\w-]+/g, "").replaceAll(/--+/g, "-").replace(/^-+/, "").replace(/-+$/, "").slice(0, Math.max(0, maxLength));
-}
-
-// src/theme/recipes/pressable-card.ts
-var pressableCardRecipe = defineRecipe({
-  base: {
-    appearance: "none",
-    border: "none",
-    overflow: "hidden",
-    fontSize: "inherit",
-    display: "block",
-    borderRadius: "md",
-    cursor: "pointer",
-    transitionProperty: "common",
-    transitionDuration: "fast",
-    _disabled: {
-      outline: "none",
-      pointerEvents: "none",
-      background: "surface.disabled",
-      color: "text.disabled"
-    }
-  },
-  variants: {
-    variant: {
-      floating: {
-        boxShadow: "0px 1px 3px 0px var(--shadow-color)",
-        shadowColor: "surface.disabled",
-        border: "sm",
-        borderColor: "floating.outline",
-        backgroundColor: "floating.surface",
-        _hover: {
-          boxShadow: "0px 2px 6px 0px var(--shadow-color)",
-          backgroundColor: "floating.surface.hover",
-          borderColor: "floating.outline.hover",
-          _active: {
-            boxShadow: "none",
-            backgroundColor: "floating.surface.active",
-            borderColor: "floating.outline.active"
-          }
-        }
-      },
-      core: {
-        outlineColor: "core.outline",
-        outlineWidth: tokens23__default.size.stroke.sm,
-        outlineStyle: "solid",
-        backgroundColor: "core.surface",
-        _hover: {
-          outlineColor: "core.outline.hover",
-          outlineWidth: tokens23__default.size.stroke.md,
-          outlineStyle: "solid",
-          _active: {
-            backgroundColor: "core.surface.active",
-            outlineWidth: tokens23__default.size.stroke.sm
-          }
-        }
-      },
-      accent: {
-        boxShadow: "0px 1px 3px 0px var(--shadow-color)",
-        shadowColor: "surface.disabled",
-        background: "alert.success.surface",
-        _hover: {
-          background: "alert.success.surface.hover",
-          boxShadow: "0px 2px 6px 0px var(--shadow-color)",
-          _active: {
-            background: "alert.success.surface.active",
-            boxShadow: "none"
-          }
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "core"
-  }
-});
-var PressableCardButton = chakra("button", pressableCardRecipe);
 var PressableCard = forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsx(PressableCardButton, { ...props, ref });
+    const recipe = useRecipe({ key: "pressableCard" });
+    const [recipeProps, restProps] = recipe.splitVariantProps(props);
+    const styles = recipe(recipeProps);
+    return /* @__PURE__ */ jsx(chakra.button, { ...restProps, css: styles, ref });
   }
 );
 PressableCard.displayName = "PressableCard";
@@ -3923,55 +3695,20 @@ var Separator = forwardRef(
   }
 );
 Separator.displayName = "Separator";
-var staticCardRecipe = defineRecipe({
-  base: {
-    borderRadius: "md"
-  },
-  variants: {
-    colorPalette: {
-      white: {
-        backgroundColor: "surface.color.neutral",
-        color: "text"
-      },
-      grey: {
-        backgroundColor: "surface.color.grey"
-      },
-      yellow: {
-        backgroundColor: "surface.color.cream"
-      },
-      darkYellow: {
-        backgroundColor: "surface.color.yellow"
-      },
-      red: {
-        backgroundColor: "surface.color.red"
-      },
-      green: {
-        backgroundColor: "surface.color.green"
-      },
-      blue: {
-        backgroundColor: "surface.color.blue"
-      },
-      orange: {
-        backgroundColor: "surface.color.orange"
-      }
-    }
-  },
-  defaultVariants: {
-    colorPalette: "white"
-  }
-});
-var StyledCardBox = chakra("div", staticCardRecipe);
-var StaticCard = forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx(StyledCardBox, { ...props, ref });
-  }
-);
-StaticCard.displayName = "StaticCard";
-var icons = {
-  "local-train": {
-    sm: TrainFill18Icon,
-    md: TrainFill24Icon,
-    lg: TrainFill30Icon
+var StaticCard = forwardRef(
+  (props, ref) => {
+    const recipe = useRecipe({ key: "staticCard" });
+    const [recipeProps, restProps] = recipe.splitVariantProps(props);
+    const styles = recipe(recipeProps);
+    return /* @__PURE__ */ jsx(Box, { css: styles, ...restProps, ref });
+  }
+);
+StaticCard.displayName = "StaticCard";
+var icons = {
+  "local-train": {
+    sm: TrainFill18Icon,
+    md: TrainFill24Icon,
+    lg: TrainFill30Icon
   },
   "region-train": {
     sm: TrainFill18Icon,
@@ -5524,6 +5261,47 @@ var Table = forwardRef((props, ref) => {
   );
 });
 Table.displayName = "Table";
+var attachedInputsRecipe = defineRecipe({
+  base: {
+    display: "flex",
+    gap: "0.1rem",
+    width: "100%",
+    "& select": {
+      borderEndRadius: 0
+    }
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        flexDirection: "row",
+        "& > *:first-of-type:not(:last-of-type) [data-attachable]": {
+          borderEndRadius: 0
+        },
+        "& > *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
+          borderRadius: 0
+        },
+        "& > *:not(:first-of-type):last-of-type [data-attachable]": {
+          borderStartRadius: 0
+        }
+      },
+      vertical: {
+        flexDirection: "column",
+        "& > *:first-of-type:not(:last-of-type) [data-attachable]": {
+          borderBottomRadius: 0
+        },
+        "& > *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
+          borderRadius: 0
+        },
+        "& > *:not(:first-of-type):last-of-type [data-attachable]": {
+          borderTopRadius: 0
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
 var buttonRecipe = defineRecipe({
   className: "spor-button",
   base: {
@@ -5687,6 +5465,106 @@ var closeButtonRecipe = defineRecipe({
     }
   }
 });
+var groupRecipe = defineRecipe({
+  className: "spor-group",
+  base: {
+    fontSize: "lg"
+  },
+  variants: {
+    disabled: {
+      true: {
+        "& > *": {
+          pointerEvents: "none",
+          backgroundColor: "surface.disabled",
+          color: "text.disabled"
+        }
+      }
+    }
+  }
+});
+var inputRecipe = defineRecipe({
+  base: {
+    appearance: "none",
+    width: "100%",
+    outline: "none",
+    border: 0,
+    borderRadius: "sm",
+    transitionProperty: "common",
+    transitionDuration: "fast",
+    color: "text",
+    position: "relative",
+    paddingX: 3,
+    paddingTop: 3,
+    height: 8,
+    fontSize: "mobile.md",
+    _disabled: {
+      backgroundColor: "surface.disabled",
+      outline: "1px solid",
+      outlineColor: "outline.disabled",
+      pointerEvents: "none"
+    },
+    _invalid: {
+      outline: "2px solid",
+      outlineColor: "outline.error",
+      _active: {
+        outline: "2px solid",
+        outlineColor: "outline.error"
+      },
+      _focus: {
+        outline: "2px solid",
+        outlineColor: "outline.error"
+      },
+      _hover: {
+        outline: "2px solid",
+        outlineColor: "core.outline"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      core: {
+        backgroundColor: "transparent",
+        outline: "1px solid",
+        outlineColor: "core.outline",
+        _hover: {
+          outline: "2px solid",
+          outlineColor: "core.outline.hover",
+          _active: {
+            outline: "1px solid",
+            outlineColor: "outline.disabled",
+            backgroundColor: "core.surface.active"
+          }
+        },
+        _focus: {
+          outline: "2px solid",
+          outlineColor: "outline.focus"
+        }
+      },
+      floating: {
+        boxShadow: "sm",
+        bg: "floating.surface",
+        outline: "1px solid",
+        outlineColor: "floating.outline",
+        _hover: {
+          outline: "1px solid",
+          outlineColor: "floating.outline.hover"
+        },
+        _active: {
+          outline: "1px solid",
+          outlineColor: "floating.outline.active",
+          backgroundColor: "floating.surface.active"
+        },
+        focus: {
+          outline: "1px solid",
+          outlineColor: "outline.focus"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "core"
+  }
+});
 var linkRecipe = defineRecipe({
   base: {
     transitionProperty: "common",
@@ -5765,6 +5643,93 @@ var linkRecipe = defineRecipe({
     size: "sm"
   }
 });
+
+// src/util/slugify.tsx
+function slugify(text, maxLength = 50) {
+  if (!text) {
+    return text;
+  }
+  if (Array.isArray(text)) {
+    text = text.join(" ");
+  }
+  if (maxLength < 1) {
+    throw new Error("The maxLength parameter must be a positive number");
+  }
+  return text.normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").replaceAll(/[\u00C6\u00E6]/g, "ae").replaceAll(/[\u00D8\u00F8]/g, "oe").replaceAll(/[\u00C5\u00E5]/g, "aa").toLowerCase().replaceAll(/\s+/g, "-").replaceAll(/[^\w-]+/g, "").replaceAll(/--+/g, "-").replace(/^-+/, "").replace(/-+$/, "").slice(0, Math.max(0, maxLength));
+}
+
+// src/theme/recipes/pressable-card.ts
+var pressableCardRecipe = defineRecipe({
+  base: {
+    appearance: "none",
+    border: "none",
+    overflow: "hidden",
+    fontSize: "inherit",
+    display: "block",
+    borderRadius: "md",
+    cursor: "pointer",
+    transitionProperty: "common",
+    transitionDuration: "fast",
+    _disabled: {
+      outline: "none",
+      pointerEvents: "none",
+      background: "surface.disabled",
+      color: "text.disabled"
+    }
+  },
+  variants: {
+    variant: {
+      floating: {
+        boxShadow: "0px 1px 3px 0px var(--shadow-color)",
+        shadowColor: "surface.disabled",
+        border: "sm",
+        borderColor: "floating.outline",
+        backgroundColor: "floating.surface",
+        _hover: {
+          boxShadow: "0px 2px 6px 0px var(--shadow-color)",
+          backgroundColor: "floating.surface.hover",
+          borderColor: "floating.outline.hover",
+          _active: {
+            boxShadow: "none",
+            backgroundColor: "floating.surface.active",
+            borderColor: "floating.outline.active"
+          }
+        }
+      },
+      core: {
+        outlineColor: "core.outline",
+        outlineWidth: tokens23__default.size.stroke.sm,
+        outlineStyle: "solid",
+        backgroundColor: "core.surface",
+        _hover: {
+          outlineColor: "core.outline.hover",
+          outlineWidth: tokens23__default.size.stroke.md,
+          outlineStyle: "solid",
+          _active: {
+            backgroundColor: "core.surface.active",
+            outlineWidth: tokens23__default.size.stroke.sm
+          }
+        }
+      },
+      accent: {
+        boxShadow: "0px 1px 3px 0px var(--shadow-color)",
+        shadowColor: "surface.disabled",
+        background: "alert.success.surface",
+        _hover: {
+          background: "alert.success.surface.hover",
+          boxShadow: "0px 2px 6px 0px var(--shadow-color)",
+          _active: {
+            background: "alert.success.surface.active",
+            boxShadow: "none"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "core"
+  }
+});
 var separatorRecipe = defineRecipe({
   className: "spor-separator",
   base: {
@@ -5898,6 +5863,43 @@ var skeletonRecipe = defineRecipe({
     }
   }
 });
+var staticCardRecipe = defineRecipe({
+  base: {
+    borderRadius: "md"
+  },
+  variants: {
+    colorPalette: {
+      white: {
+        backgroundColor: "surface.color.neutral",
+        color: "text"
+      },
+      grey: {
+        backgroundColor: "surface.color.grey"
+      },
+      yellow: {
+        backgroundColor: "surface.color.cream"
+      },
+      darkYellow: {
+        backgroundColor: "surface.color.yellow"
+      },
+      red: {
+        backgroundColor: "surface.color.red"
+      },
+      green: {
+        backgroundColor: "surface.color.green"
+      },
+      blue: {
+        backgroundColor: "surface.color.blue"
+      },
+      orange: {
+        backgroundColor: "surface.color.orange"
+      }
+    }
+  },
+  defaultVariants: {
+    colorPalette: "white"
+  }
+});
 var _a2, _b;
 var textareaRecipe = defineRecipe({
   className: "spor-textarea",
@@ -5929,6 +5931,7 @@ var recipes = {
   attachedInputs: attachedInputsRecipe,
   badge: badgeRecipie,
   button: buttonRecipe,
+  buttonGroup: groupRecipe,
   closeButton: closeButtonRecipe,
   code: codeRecipie,
   input: inputRecipe,
@@ -6932,6 +6935,23 @@ var choiceChipSlotRecipe = defineSlotRecipe({
     chipType: "choice"
   }
 });
+var collapsibleSlotRecipe = defineSlotRecipe({
+  slots: collapsibleAnatomy.keys(),
+  className: "chakra-collapsible",
+  base: {
+    content: {
+      overflow: "hidden",
+      _open: {
+        animationName: "expand-height, fade-in",
+        animationDuration: "moderate"
+      },
+      _closed: {
+        animationName: "collapse-height, fade-out",
+        animationDuration: "moderate"
+      }
+    }
+  }
+});
 var datePickerSlotRecipe = defineSlotRecipe({
   slots: datepickerAnatomy.keys(),
   className: "spor-datepicker",
@@ -9022,7 +9042,9 @@ var selectSlotRecipe = defineSlotRecipe({
           outline: "1px solid",
           outlineColor: "floating.outline"
         }
-      },
+      }
+    },
+    sideRadiusVariant: {
       rightSideSquare: {
         control: {
           outline: "1px solid",
@@ -9719,7 +9741,8 @@ var slotRecipes = {
   tabs: tabsSlotRecipe,
   travelTag: travelTagSlotRecipe,
   toast: toastSlotRecipe,
-  checkboxCard: choiceChipSlotRecipe
+  checkboxCard: choiceChipSlotRecipe,
+  collapsible: collapsibleSlotRecipe
 };
 var animations = defineTokens.animations({
   spin: {