@vygruppen/spor-react 12.5.6 → 12.6.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, defineSlotRecipe, 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, 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 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';
 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, 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';
@@ -8,13 +8,11 @@ import { spinnerColorData, inlineLoaderColorData, contentLoaderData, fullScreenL
 import ReactLottie from 'lottie-react';
 import { useInterval } from 'usehooks-ts';
 export { useIsClient, useMap, useOnClickOutside } from 'usehooks-ts';
-import { useProgressBar, useDateSegment, useDateField, useDatePicker, I18nProvider, usePopover, DismissButton, Overlay, useCalendar, useCalendarGrid, useCalendarCell, useButton, useId as useId$1, useDateRangePicker, useFilter, useComboBox, useListBox, useOption, useListBoxSection, useRangeCalendar, useTimeField } from 'react-aria';
+import { useProgressBar, useDateSegment, useDateField, useDatePicker, I18nProvider, usePopover, DismissButton, Overlay, useCalendar, useCalendarGrid, useCalendarCell, useButton, useRangeCalendar, useId as useId$1, useDateRangePicker, useFilter, useComboBox, useListBox, useOption, useListBoxSection, useTimeField } from 'react-aria';
 import { useTheme, ThemeProvider } from 'next-themes';
 import { LuMoon, LuSun } from 'react-icons/lu';
-import { useDateFieldState, useDatePickerState, useCalendarState, useDateRangePickerState, useTimeFieldState, useComboBoxState, useRangeCalendarState } from 'react-stately';
+import { useDateFieldState, useDatePickerState, useCalendarState, useRangeCalendarState, useDateRangePickerState, useTimeFieldState, useComboBoxState } from 'react-stately';
 export { Item, Section } from 'react-stately';
-import { createAnatomy } from '@ark-ui/react/anatomy';
-import { popoverAnatomy as popoverAnatomy$1 } from '@ark-ui/react/popover';
 import { GregorianCalendar, createCalendar, getLocalTimeZone, endOfMonth, getWeeksInMonth, isSameMonth, isToday, parseTime } from '@internationalized/date';
 export { Time } from '@internationalized/date';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
@@ -23,6 +21,8 @@ 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';
 
 // src/accordion/Accordion.tsx
 
@@ -488,61 +488,8 @@ var texts = createTexts({
     en: `${value}% done`
   })
 });
-var skeletonRecipe = defineRecipe({
-  className: "chakra-skeleton",
-  variants: {
-    loading: {
-      true: {
-        borderRadius: "xs",
-        boxShadow: "none",
-        backgroundClip: "padding-box",
-        cursor: "default",
-        color: "transparent",
-        pointerEvents: "none",
-        userSelect: "none",
-        flexShrink: "0",
-        "&::before, &::after, *": {
-          visibility: "hidden"
-        }
-      },
-      false: {
-        background: "unset",
-        animation: "fade-in var(--fade-duration, 0.1s) ease-out !important"
-      }
-    },
-    variant: {
-      pulse: {
-        background: {
-          _light: "silver",
-          _dark: "darkGrey"
-        },
-        animation: "pulse",
-        animationDuration: "var(--duration, 1.2s)"
-      },
-      shine: {
-        "--animate-from": "200%",
-        "--animate-to": "-200%",
-        "--start-color": {
-          _light: "colors.lightGrey",
-          _dark: "colors.dimGrey"
-        },
-        "--end-color": {
-          _light: "colors.platinum",
-          _dark: "colors.darkGrey"
-        },
-        backgroundImage: "linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color))",
-        backgroundSize: "400% 100%",
-        animation: "bg-position var(--duration, 5s) ease-in-out infinite"
-      },
-      none: {
-        animation: "none",
-        background: "steel"
-      }
-    }
-  }
-});
 var SkeletonCircle = React28.forwardRef(function SkeletonCircle2(props, ref) {
-  const recipe = useRecipe({ recipe: skeletonRecipe });
+  const recipe = useRecipe({ key: "skeleton" });
   const [recipeProps, restProps] = recipe.splitVariantProps({
     loading: true,
     variant: "pulse",
@@ -553,7 +500,7 @@ var SkeletonCircle = React28.forwardRef(function SkeletonCircle2(props, ref) {
 });
 var SkeletonText = forwardRef(
   function SkeletonText2(props, ref) {
-    const recipe = useRecipe({ recipe: skeletonRecipe });
+    const recipe = useRecipe({ key: "skeleton" });
     const [recipeProps, restProps] = recipe.splitVariantProps({
       loading: true,
       variant: "pulse",
@@ -574,7 +521,7 @@ var SkeletonText = forwardRef(
 );
 var Skeleton = forwardRef(
   function SkeletonText3(props, ref) {
-    const recipe = useRecipe({ recipe: skeletonRecipe });
+    const recipe = useRecipe({ key: "skeleton" });
     const [recipeProps, restProps] = recipe.splitVariantProps({
       loading: true,
       variant: "pulse",
@@ -835,10 +782,26 @@ var Heading = forwardRef(
     return /* @__PURE__ */ jsx(Text, { as, textStyle: variant, id, ref, ...rest });
   }
 );
+function resolveTextProps({
+  variant,
+  fontSize,
+  lineHeight
+}) {
+  if (variant)
+    return { textStyle: variant };
+  if (!fontSize && !lineHeight)
+    return { textStyle: "sm" };
+  if (lineHeight && !fontSize)
+    return { lineHeight, fontSize: "sm" };
+  if (fontSize && !lineHeight)
+    return { fontSize };
+  return { fontSize, lineHeight };
+}
 var Text3 = forwardRef(
   function Text4(props, ref) {
-    const { variant = "sm", ...rest } = props;
-    return /* @__PURE__ */ jsx(Text, { ...rest, textStyle: variant, ref });
+    const { variant, lineHeight, fontSize, ...rest } = props;
+    const resolvedProps = resolveTextProps({ variant, fontSize, lineHeight });
+    return /* @__PURE__ */ jsx(Text, { ...resolvedProps, ...rest, ref });
   }
 );
 var ClipboardIcon = React28.forwardRef((props, ref) => {
@@ -1129,7 +1092,7 @@ var Alert = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxs(Alert$1.Root, { ref, ...props, children: [
     /* @__PURE__ */ jsxs(Alert$1.Content, { flexDirection: title ? "column" : "row", children: [
       /* @__PURE__ */ jsxs(HStack, { gap: "1", alignItems: "flex-start", children: [
-        showIndicator && /* @__PURE__ */ jsx(Alert$1.Indicator, { asChild: true, children: /* @__PURE__ */ jsx(AlertIcon, { variant: props.variant, customIcon: icon }) }),
+        showIndicator && /* @__PURE__ */ jsx(Alert$1.Indicator, { asChild: true, children: /* @__PURE__ */ jsx(AlertIcon, { variant: props.variant ?? "info", customIcon: icon }) }),
         title && /* @__PURE__ */ jsx(Alert$1.Title, { paddingRight: closable ? 6 : 0, children: title })
       ] }),
       children && /* @__PURE__ */ jsx(
@@ -1464,463 +1427,6 @@ var FieldErrorText = React28.forwardRef((props, ref) => {
 });
 FieldErrorText.displayName = "FieldErrorText";
 var FieldLabel = Field.Label;
-var accordionAnatomy = createAnatomy("accordion").parts(
-  "root",
-  "itemTrigger",
-  "item",
-  "itemBody",
-  "itemContent",
-  "itemIndicator"
-);
-var alertAnatomy = createAnatomy("alert").parts(
-  "root",
-  "indicator",
-  "title",
-  "closeButton",
-  "content",
-  "description"
-);
-var alertExpandableAnatomy = createAnatomy("alert-expandable").parts(
-  "root",
-  "itemTrigger",
-  "itemContent",
-  "indicator",
-  "title",
-  "itemIndicator"
-);
-var alertServiceAnatomy = createAnatomy("service-alert").parts(
-  "root",
-  "itemTrigger",
-  "itemTriggerTitle",
-  "notificationText",
-  "itemContent",
-  "itemBody"
-);
-var listAnatomy = createAnatomy("list").parts(
-  "root",
-  "item",
-  "icon",
-  "indicator"
-);
-var tableAnatomy = createAnatomy("table").parts(
-  "root",
-  "body",
-  "row",
-  "cell",
-  "columnHeader",
-  "caption",
-  "footer",
-  "header"
-);
-var fieldAnatomy = createAnatomy("field").parts(
-  "root",
-  "label",
-  "requiredIndicator",
-  "helperText",
-  "errorText"
-);
-var dialogAnatomy = createAnatomy("dialog").parts(
-  "header",
-  "body",
-  "footer",
-  "backdrop",
-  "positioner",
-  "content",
-  "title",
-  "description",
-  "closeTrigger"
-);
-var paginationAnatomy = createAnatomy("pagination").parts(
-  "list",
-  "item"
-);
-var linjetagAnatomy = createAnatomy("linjetag").parts(
-  "iconContainer",
-  "icon",
-  "root",
-  "title",
-  "desc"
-);
-var infoTagAnatomy = createAnatomy("info-tag").parts(
-  "container",
-  "iconContainer",
-  "icon",
-  "textContainer",
-  "title",
-  "description",
-  "walk"
-);
-var travelTagAnatomy = createAnatomy("travel-tag").parts(
-  "container",
-  "iconContainer",
-  "icon",
-  "textContainer",
-  "title",
-  "description",
-  "deviationIcon"
-);
-var drawerAnatomy = createAnatomy("drawer").parts(
-  "header",
-  "body",
-  "backdrop",
-  "positioner",
-  "content",
-  "footer",
-  "title",
-  "description",
-  "closeTrigger"
-);
-var checkboxAnatomy = createAnatomy("checkbox").parts(
-  "root",
-  "control",
-  "label",
-  "description",
-  "addon",
-  "indicator",
-  "content"
-);
-var breadcrumbAnatomy = createAnatomy("breadcrumb").parts(
-  "link",
-  "currentLink",
-  "list",
-  "separator"
-);
-var stepperAnatomy = createAnatomy("stepper").parts(
-  "root",
-  "container",
-  "innerContainer",
-  "title",
-  "stepCounter",
-  "stepContainer",
-  "stepButton",
-  "stepNumber",
-  "stepTitle",
-  "closeButton",
-  "backButton"
-);
-var radioCardAnatomy = createAnatomy("radio-card").parts(
-  "root",
-  "item",
-  "label",
-  "itemText",
-  "itemDescription",
-  "itemContent"
-);
-var radioAnatomy = createAnatomy("radio").parts(
-  "root",
-  "item",
-  "itemControl",
-  "itemText",
-  "label"
-);
-var listBoxAnatomy = createAnatomy("listbox").parts(
-  "root",
-  "item",
-  "label",
-  "description"
-);
-var NativeSelectAnatomy = createAnatomy("native-select").parts(
-  "root",
-  "field",
-  "icon"
-);
-var tabsAnatomy = createAnatomy("tabs").parts(
-  "root",
-  "list",
-  "trigger",
-  "content",
-  "indicator"
-);
-var switchAnatomy = createAnatomy("switch").parts(
-  "root",
-  "thumb",
-  "control",
-  "label"
-);
-var selectAnatomy = createAnatomy("select").parts(
-  "root",
-  "trigger",
-  "indicatorGroup",
-  "indicator",
-  "selectContent",
-  "item",
-  "control",
-  "itemText",
-  "itemDescription",
-  "itemGroup",
-  "itemGroupLabel",
-  "label",
-  "valueText"
-);
-createAnatomy("card-select").parts(
-  "trigger",
-  "card"
-);
-var numericStepperAnatomy = createAnatomy("numeric-stepper").parts(
-  "root",
-  "container",
-  "input",
-  "text",
-  "button"
-);
-var mediaControllerAnatomy = createAnatomy(
-  "media-controller-button"
-).parts("root", "icon");
-var progressBarAnotomy = createAnatomy("progress-bar").parts(
-  "container",
-  "background",
-  "progress",
-  "description",
-  "disabledBackground"
-);
-var toastAnatomy = createAnatomy("toast").parts(
-  "root",
-  "title",
-  "description",
-  "indicator",
-  "closeTrigger",
-  "actionTrigger"
-);
-var floatingActionButtonAnatomy = createAnatomy(
-  "floating-action-button"
-).parts("root", "icon", "text");
-var popoverAnatomy = popoverAnatomy$1.extendWith(
-  "header",
-  "body",
-  "footer"
-);
-var datepickerAnatomy = createAnatomy("datepicker").parts(
-  "wrapper",
-  "calendarTriggerButton",
-  "arrow",
-  "calendarPopover",
-  "calendar",
-  "weekdays",
-  "weekend",
-  "dateCell",
-  "inputLabel",
-  "dateTimeSegment",
-  "cell",
-  "box",
-  "rangeCalendarPopover"
-);
-var checkboxCardAnatomy = createAnatomy("checkbox-card", [
-  "root",
-  "control",
-  "label",
-  "description",
-  "addon",
-  "indicator",
-  "content"
-]);
-
-// src/theme/slot-recipes/datepicker.ts
-var datePickerSlotRecipe = defineSlotRecipe({
-  slots: datepickerAnatomy.keys(),
-  className: "spor-datepicker",
-  base: {
-    wrapper: {
-      transitionProperty: "box-shadow",
-      transitionDuration: "fast",
-      borderRadius: "sm",
-      display: "flex",
-      flex: 1,
-      paddingY: 0.5,
-      alignItems: "center",
-      _hover: {
-        zIndex: "docked"
-      },
-      _disabled: {
-        pointerEvents: "none",
-        backgroundColor: "surface.disabled",
-        outline: "1px solid",
-        outlineColor: "outline.disabled",
-        color: "text.disabled"
-      },
-      _focusWithin: {
-        outline: "2px solid",
-        outlineColor: "outline.focus"
-      }
-    },
-    inputLabel: {
-      fontSize: "mobile.xs",
-      margin: 0,
-      cursor: "text"
-    },
-    dateTimeSegment: {
-      _focus: {
-        backgroundColor: "ghost.surface.active",
-        color: "text.default"
-      }
-    },
-    box: {
-      width: "100%"
-    },
-    calendarTriggerButton: {
-      position: "relative",
-      borderRadius: "xl",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      transitionProperty: "box-shadow, background-color",
-      right: "0.5rem",
-      _hover: {
-        backgroundColor: "ghost.surface.hover"
-      },
-      _active: {
-        backgroundColor: "ghost.surface.active"
-      },
-      _invalid: {
-        outline: "2px solid",
-        outlineColor: "outline.error"
-      }
-    },
-    arrow: {
-      backgroundColor: "surface"
-    },
-    calendarPopover: {
-      color: "core.text",
-      outline: "1px solid",
-      outlineColor: "floating.outline",
-      boxShadow: "md",
-      backgroundColor: "floating.surface"
-    },
-    rangeCalendarPopover: {
-      width: "43rem",
-      maxWidth: "100vw"
-    },
-    weekdays: {
-      color: "core.text",
-      fontWeight: "bold"
-    },
-    weekend: {
-      color: "accent.text",
-      fontWeight: "bold"
-    },
-    cell: {
-      '&[aria-selected="true"] + [aria-selected="true"] > button': {
-        "&::before": {
-          content: '""',
-          display: "block",
-          height: "100%",
-          position: "absolute",
-          left: "-50%",
-          top: 0,
-          bottom: 0,
-          zIndex: -1,
-          backgroundColor: "brand.surface"
-        }
-      }
-    },
-    dateCell: {
-      color: "core.text",
-      borderRadius: "xl",
-      position: "relative",
-      transition: ".1s ease-in-out",
-      userSelect: "none",
-      width: [6, 7],
-      height: [6, 7],
-      transitionProperty: "common",
-      _hover: {
-        backgroundColor: "ghost.surface.hover"
-      },
-      _active: {
-        backgroundColor: "ghost.surface.active"
-      },
-      _disabled: {
-        backgroundColor: "surface.disabled",
-        color: "text.disabled",
-        pointerEvents: "none"
-      },
-      _selected: {
-        backgroundColor: "brand.surface",
-        color: "brand.text",
-        _active: {
-          backgroundColor: "brand.surface.active",
-          color: "brand.text"
-        }
-      },
-      "&[data-today]": {
-        outline: "1px solid",
-        outlineColor: "core.outline"
-      },
-      "&[data-unavailable]": {
-        pointerEvents: "none",
-        borderRadius: "xl",
-        backgroundColor: "surface.disabled",
-        color: "text.disabled"
-      }
-    }
-  },
-  variants: {
-    variant: {
-      core: {
-        wrapper: {
-          outline: "1px solid",
-          outlineColor: "core.outline",
-          backgroundColor: "core.surface",
-          _hover: {
-            outline: "2px solid",
-            outlineColor: "core.outline.hover",
-            _active: {
-              backgroundColor: "ghost.surface.active",
-              outline: "1px solid",
-              outlineColor: "core.outline"
-            }
-          },
-          _invalid: {
-            outline: "2px solid",
-            outlineColor: "outline.error"
-          }
-        }
-      },
-      floating: {
-        wrapper: {
-          backgroundColor: {
-            _light: "bg",
-            _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`
-          },
-          outline: "1px solid",
-          outlineColor: "floating.outline",
-          boxShadow: "sm",
-          _hover: {
-            outline: "1px solid",
-            outlineColor: "floating.outline.hover",
-            _active: {
-              backgroundColor: "ghost.surface.active",
-              outline: "1px solid",
-              outlineColor: "core.outline"
-            }
-          },
-          _invalid: {
-            outline: "2px solid",
-            outlineColor: "outline.error"
-          }
-        }
-      },
-      ghost: {
-        wrapper: {
-          _hover: {
-            outline: "2px solid",
-            outlineColor: "core.outline.hover",
-            _active: {
-              backgroundColor: "ghost.surface.active",
-              outline: "1px solid",
-              outlineColor: "core.outline"
-            }
-          },
-          _invalid: {
-            outline: "2px solid",
-            outlineColor: "outline.error"
-          }
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "core"
-  }
-});
 function CalendarCell({
   state,
   date,
@@ -1938,8 +1444,7 @@ function CalendarCell({
   } = useCalendarCell({ date }, state, ref);
   const isOutsideMonth = !isSameMonth(currentMonth, date);
   const recipe = useSlotRecipe({
-    key: "datePicker",
-    recipe: datePickerSlotRecipe
+    key: "datePicker"
   });
   const styles = recipe({ variant });
   const stateProps = {};
@@ -2030,8 +1535,7 @@ function CalendarGrid({
   const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
   const weeksInMonthRange = Array.from({ length: weeksInMonth }).fill(0).map((_, i) => i);
   const recipe = useSlotRecipe({
-    key: "datePicker",
-    recipe: datePickerSlotRecipe
+    key: "datePicker"
   });
   const styles = recipe({ variant });
   return /* @__PURE__ */ jsxs(Box, { as: "table", ...gridProps, css: styles.box, children: [
@@ -2207,8 +1711,7 @@ function Calendar({
     createCalendar
   });
   const recipe = useSlotRecipe({
-    key: "datePicker",
-    recipe: datePickerSlotRecipe
+    key: "datePicker"
   });
   const styles = recipe({ variant });
   const { calendarProps } = useCalendar(props, state);
@@ -2230,8 +1733,7 @@ var texts8 = createTexts({
 var CalendarTriggerButton = forwardRef(({ variant, disabled, ariaLabelledby, ...buttonProps }, ref) => {
   const { t } = useTranslation();
   const recipe = useSlotRecipe({
-    key: "datePicker",
-    recipe: datePickerSlotRecipe
+    key: "datePicker"
   });
   const styles = recipe({ variant });
   return /* @__PURE__ */ jsx(PopoverAnchor, { ...buttonProps, ref, children: /* @__PURE__ */ jsx(
@@ -2265,8 +1767,7 @@ var DateTimeSegment = forwardRef(
       ref
     );
     const recipe = useSlotRecipe({
-      key: "datePicker",
-      recipe: datePickerSlotRecipe
+      key: "datePicker"
     });
     const styles = recipe({
       isPlaceholder: segment.isPlaceholder,
@@ -2310,8 +1811,7 @@ var DateField = forwardRef(
     var _a5;
     const locale = useCurrentLocale();
     const recipe = useSlotRecipe({
-      key: "datePicker",
-      recipe: datePickerSlotRecipe
+      key: "datePicker"
     });
     const styles = recipe({});
     const state = useDateFieldState({
@@ -2403,8 +1903,7 @@ var StyledField = forwardRef(
     const { invalid } = useFieldContext() ?? {
       };
     const recipe = useSlotRecipe({
-      key: "datePicker",
-      recipe: datePickerSlotRecipe
+      key: "datePicker"
     });
     const styles = recipe({ variant });
     return /* @__PURE__ */ jsx(
@@ -2452,8 +1951,7 @@ var DatePicker = forwardRef(
     const labelId = `label-${useId()}`;
     const inputGroupId = `input-group-${useId()}`;
     const recipe = useSlotRecipe({
-      key: "datePicker",
-      recipe: datePickerSlotRecipe
+      key: "datePicker"
     });
     const styles = recipe({ variant });
     const locale = useCurrentLocale();
@@ -2537,8 +2035,7 @@ function RangeCalendar(props) {
     createCalendar: createCalendar
   });
   const recipe = useSlotRecipe({
-    key: "datePicker",
-    recipe: datePickerSlotRecipe
+    key: "datePicker"
   });
   const styles = recipe({});
   const ref = useRef(null);
@@ -2591,8 +2088,7 @@ function DateRangePicker({
     calendarProps
   } = useDateRangePicker(props, state, ref);
   const recipe = useSlotRecipe({
-    key: "datePicker",
-    recipe: datePickerSlotRecipe
+    key: "datePicker"
   });
   const styles = recipe({ variant });
   const locale = useCurrentLocale();
@@ -3513,96 +3009,46 @@ function Option({ item, state }) {
       (event) => {
         event.preventDefault();
       },
-      { passive: false, once: true }
-    );
-  }, []);
-  return /* @__PURE__ */ jsx(OptionContext.Provider, { value: { labelProps, descriptionProps }, children: /* @__PURE__ */ jsx(ListItem, { ...optionProps, ...dataFields, ref, css: styles.item, children: item.rendered }) });
-}
-var OptionContext = React28__default.createContext({
-  labelProps: {},
-  descriptionProps: {}
-});
-var useOptionContext = () => {
-  return useContext(OptionContext);
-};
-function ListBoxSection({ section, state }) {
-  var _a5, _b4;
-  const { itemProps, headingProps, groupProps } = useListBoxSection({
-    heading: section.rendered,
-    "aria-label": section["aria-label"]
-  });
-  const isFirstSection = section.key === state.collection.getFirstKey();
-  const titleColor = useColorModeValue("darkGrey", "white");
-  return /* @__PURE__ */ jsx(List, { children: /* @__PURE__ */ jsxs(ListItem, { ...itemProps, listStyleType: "none", children: [
-    section.rendered && /* @__PURE__ */ jsx(
-      Box,
-      {
-        fontSize: "mobile.xs",
-        color: titleColor,
-        paddingX: 3,
-        paddingTop: 1,
-        marginTop: isFirstSection ? 0 : 2,
-        textTransform: "uppercase",
-        fontWeight: "bold",
-        ...headingProps,
-        children: section.rendered
-      }
-    ),
-    /* @__PURE__ */ jsx(List, { ...groupProps, padding: 0, listStyleType: "none", children: [...((_b4 = (_a5 = state.collection).getChildren) == null ? void 0 : _b4.call(_a5, section.key)) ?? []].map(
-      (item) => /* @__PURE__ */ jsx(Option, { item, state }, item.key)
-    ) })
-  ] }) });
-}
-var _a2, _b;
-var nativeSelectSlotRecipe = defineSlotRecipe({
-  slots: NativeSelectAnatomy.keys(),
-  className: "spor-nativeSelect",
-  base: {
-    root: {
-      width: "100%",
-      height: "fit-content",
-      position: "relative"
-    },
-    field: {
-      ...inputRecipe.base
-    },
-    icon: {
-      width: 5,
-      height: 5,
-      right: " 0.5rem",
-      strokeLinecap: "round",
-      position: "absolute",
-      display: "inline-flex",
-      boxAlign: "center",
-      alignItems: "center",
-      boxPack: "center",
-      justifyContent: "center",
-      pointerEvents: "none",
-      top: "50%",
-      transform: "translateY(-50%)",
-      insetEnd: "0.5rem",
-      color: "currentColor",
-      fontSize: "sm",
-      _disabled: {
-        color: "text.disabled"
-      }
-    }
-  },
-  variants: {
-    variant: {
-      core: {
-        field: {
-          ...(_a2 = inputRecipe.variants) == null ? void 0 : _a2.variant.core
-        }
-      },
-      floating: {
-        field: {
-          ...(_b = inputRecipe.variants) == null ? void 0 : _b.variant.floating
-        }
-      }
-    }
-  }
+      { passive: false, once: true }
+    );
+  }, []);
+  return /* @__PURE__ */ jsx(OptionContext.Provider, { value: { labelProps, descriptionProps }, children: /* @__PURE__ */ jsx(ListItem, { ...optionProps, ...dataFields, ref, css: styles.item, children: item.rendered }) });
+}
+var OptionContext = React28__default.createContext({
+  labelProps: {},
+  descriptionProps: {}
 });
+var useOptionContext = () => {
+  return useContext(OptionContext);
+};
+function ListBoxSection({ section, state }) {
+  var _a5, _b4;
+  const { itemProps, headingProps, groupProps } = useListBoxSection({
+    heading: section.rendered,
+    "aria-label": section["aria-label"]
+  });
+  const isFirstSection = section.key === state.collection.getFirstKey();
+  const titleColor = useColorModeValue("darkGrey", "white");
+  return /* @__PURE__ */ jsx(List, { children: /* @__PURE__ */ jsxs(ListItem, { ...itemProps, listStyleType: "none", children: [
+    section.rendered && /* @__PURE__ */ jsx(
+      Box,
+      {
+        fontSize: "mobile.xs",
+        color: titleColor,
+        paddingX: 3,
+        paddingTop: 1,
+        marginTop: isFirstSection ? 0 : 2,
+        textTransform: "uppercase",
+        fontWeight: "bold",
+        ...headingProps,
+        children: section.rendered
+      }
+    ),
+    /* @__PURE__ */ jsx(List, { ...groupProps, padding: 0, listStyleType: "none", children: [...((_b4 = (_a5 = state.collection).getChildren) == null ? void 0 : _b4.call(_a5, section.key)) ?? []].map(
+      (item) => /* @__PURE__ */ jsx(Option, { item, state }, item.key)
+    ) })
+  ] }) });
+}
 var NativeSelect = React28.forwardRef(function NativeSelect2(props, ref) {
   const {
     children,
@@ -3615,7 +3061,7 @@ var NativeSelect = React28.forwardRef(function NativeSelect2(props, ref) {
     errorText,
     ...rest
   } = props;
-  const recipe = useSlotRecipe({ recipe: nativeSelectSlotRecipe });
+  const recipe = useSlotRecipe({ key: "nativeSelect" });
   const styles = recipe({ variant });
   return /* @__PURE__ */ jsx(
     Field3,
@@ -3650,67 +3096,6 @@ var NativeSelect = React28.forwardRef(function NativeSelect2(props, ref) {
     }
   );
 });
-var numericStepperRecipe = defineSlotRecipe({
-  slots: numericStepperAnatomy.keys(),
-  className: "spor-numeric-stepper",
-  base: {
-    root: {
-      "& > div": {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center"
-      }
-    },
-    input: {
-      fontSize: "sm",
-      fontWeight: "bold",
-      marginX: 0.5,
-      padding: 0,
-      paddingX: 0.5,
-      borderRadius: "xs",
-      outline: "none",
-      height: "auto",
-      textAlign: "center",
-      transitionProperty: "common",
-      transitionDuration: "fast",
-      color: "core.text",
-      backgroundColor: "transparent",
-      _focus: {
-        backgroundColor: "surface",
-        outline: "2px solid",
-        outlineColor: "outline.focus"
-      },
-      _active: {
-        backgroundColor: "accent.surface.active"
-      },
-      _disabled: {
-        pointerEvents: "none",
-        opacity: 0.5
-      },
-      _hover: {
-        outline: "1px solid",
-        outlineColor: "core.outline"
-      }
-    },
-    text: {
-      fontSize: "sm",
-      fontWeight: "bold",
-      marginX: 1,
-      paddingX: 1,
-      textAlign: "center",
-      width: "4ch",
-      color: "core.text"
-    },
-    button: {
-      outlineOffset: "-2px",
-      width: "auto",
-      _icon: {
-        width: "1.2rem",
-        height: "1.2rem"
-      }
-    }
-  }
-});
 var NumericStepper = React28__default.forwardRef((props, ref) => {
   const {
     name: nameProp,
@@ -3729,7 +3114,7 @@ var NumericStepper = React28__default.forwardRef((props, ref) => {
   } = props;
   const addButtonRef = useRef(null);
   const { t } = useTranslation();
-  const recipe = useSlotRecipe({ recipe: numericStepperRecipe });
+  const recipe = useSlotRecipe({ key: "numericStepper" });
   const styles = recipe();
   const [value, onChange] = useControllableState({
     value: valueProp,
@@ -3819,7 +3204,7 @@ var NumericStepper = React28__default.forwardRef((props, ref) => {
 });
 NumericStepper.displayName = "NumericStepper";
 var VerySmallButton = React28__default.forwardRef((props, ref) => {
-  const recipe = useSlotRecipe({ recipe: numericStepperRecipe });
+  const recipe = useSlotRecipe({ key: "numericStepper" });
   const styles = recipe({ colorPalette: "default" });
   return /* @__PURE__ */ jsx(
     IconButton,
@@ -4449,160 +3834,80 @@ var pressableCardRecipe = defineRecipe({
             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 });
-  }
-);
-PressableCard.displayName = "PressableCard";
-var RadioCard = forwardRef(
-  (props, ref) => {
-    const { inputProps, children, value, ariaLabel } = props;
-    return /* @__PURE__ */ jsxs(RadioCard$1.Item, { ...props, children: [
-      /* @__PURE__ */ jsx(
-        RadioCard$1.ItemHiddenInput,
-        {
-          "aria-label": ariaLabel ?? value,
-          ref,
-          ...inputProps
-        }
-      ),
-      /* @__PURE__ */ jsx(RadioCard$1.ItemControl, { children })
-    ] });
-  }
-);
-RadioCard.displayName = "RadioCard";
-var RadioCardGroup = forwardRef(
-  (props, ref) => {
-    const {
-      children,
-      variant,
-      gap = 2,
-      direction = "column",
-      display = "flex",
-      ...rest
-    } = props;
-    const recipe = useSlotRecipe({ key: "radio-card" });
-    const styles = recipe({ variant });
-    return /* @__PURE__ */ jsx(
-      RadioCard$1.Root,
-      {
-        ref,
-        variant,
-        css: styles,
-        display,
-        gap,
-        flexDirection: direction,
-        ...rest,
-        children
-      }
-    );
-  }
-);
-RadioCardGroup.displayName = "RadioCardGroup";
-var RadioCardLabel = RadioCard$1.Label;
-var separatorRecipe = defineRecipe({
-  className: "spor-separator",
-  base: {
-    borderColor: "outline.disabled",
-    display: "block",
-    borderRadius: "xl"
-  },
-  variants: {
-    variant: {
-      solid: {
-        borderStyle: "solid"
-      },
-      dashed: {
-        width: "100%",
-        borderWidth: "0px"
-      }
-    },
-    size: {
-      sm: {
-        borderBottomWidth: "1px",
-        height: "1px"
-      },
-      md: {
-        borderBottomWidth: "2px",
-        height: "2px"
-      },
-      lg: {
-        borderBottomWidth: "3px",
-        height: "3px"
-      }
-    },
-    orientation: {
-      horizontal: {
-        width: "100%"
-      },
-      vertical: {
-        height: "100%",
-        borderLeftWidth: "1px"
-      }
-    }
-  },
-  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%"
+        }
+      },
+      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 });
+  }
+);
+PressableCard.displayName = "PressableCard";
+var RadioCard = forwardRef(
+  (props, ref) => {
+    const { inputProps, children, value, ariaLabel } = props;
+    return /* @__PURE__ */ jsxs(RadioCard$1.Item, { ...props, children: [
+      /* @__PURE__ */ jsx(
+        RadioCard$1.ItemHiddenInput,
+        {
+          "aria-label": ariaLabel ?? value,
+          ref,
+          ...inputProps
+        }
+      ),
+      /* @__PURE__ */ jsx(RadioCard$1.ItemControl, { children })
+    ] });
+  }
+);
+RadioCard.displayName = "RadioCard";
+var RadioCardGroup = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      variant,
+      gap = 2,
+      direction = "column",
+      display = "flex",
+      ...rest
+    } = props;
+    const recipe = useSlotRecipe({ key: "radio-card" });
+    const styles = recipe({ variant });
+    return /* @__PURE__ */ jsx(
+      RadioCard$1.Root,
+      {
+        ref,
+        variant,
+        css: styles,
+        display,
+        gap,
+        flexDirection: direction,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+RadioCardGroup.displayName = "RadioCardGroup";
+var RadioCardLabel = RadioCard$1.Label;
 var Separator = forwardRef(
   (props, ref) => {
     const {
@@ -4610,7 +3915,7 @@ var Separator = forwardRef(
       variant = "solid",
       orientation = "horizontal"
     } = props;
-    const recipe = useRecipe({ recipe: separatorRecipe });
+    const recipe = useRecipe({ key: "seperator" });
     const styles = recipe({ size, variant, orientation });
     return /* @__PURE__ */ jsx(Separator$1, { css: styles, ...props, ref });
   }
@@ -6147,256 +5452,61 @@ var StepperStep = ({
   const disabled = state !== "active" && disabledOverride || state === "disabled";
   return /* @__PURE__ */ jsxs(Box, { css: style.stepContainer, children: [
     stepNumber > 1 && /* @__PURE__ */ jsx(
-      DropdownRightFill18Icon,
-      {
-        marginX: 5,
-        display: ["none", null, "block"],
-        color: iconColor
-      }
-    ),
-    disabled ? /* @__PURE__ */ jsx(
-      Text3,
-      {
-        variant: "xs",
-        fontSize: "1rem",
-        color: disabledTextColor,
-        cursor: "default",
-        paddingX: 2,
-        children
-      }
-    ) : /* @__PURE__ */ jsx(
-      Button,
-      {
-        size: "xs",
-        variant: state === "active" ? "primary" : "ghost",
-        onClick: state === "completed" ? () => onClick(stepNumber) : void 0,
-        pointerEvents: state === "active" ? "none" : "auto",
-        tabIndex: state === "active" ? -1 : void 0,
-        disabled,
-        "aria-current": state === "active" ? "step" : void 0,
-        css: state === "active" ? style.stepButton._currentStep : style.stepButton,
-        fontWeight: state === "active" ? "bold" : void 0,
-        children
-      }
-    )
-  ] });
-};
-var getState = (stepNumber, activeStep) => {
-  if (stepNumber < activeStep) {
-    return "completed";
-  }
-  if (stepNumber === activeStep) {
-    return "active";
-  }
-  return "disabled";
-};
-var Tabs = forwardRef((props, ref) => {
-  const { variant = "core", size = "sm" } = props;
-  return /* @__PURE__ */ jsx(Tabs$1.Root, { ...props, ref, variant, size });
-});
-Tabs.displayName = "Tabs";
-var TabsList = Tabs$1.List;
-var TabsTrigger = Tabs$1.Trigger;
-var TabsIndicator = Tabs$1.Indicator;
-var TabsContent = Tabs$1.Content;
-var numericStyles = {
-  "&[data-is-numeric=true]": {
-    textAlign: "right"
-  }
-};
-var tableSlotRecipe = defineSlotRecipe({
-  className: "spor-table",
-  slots: tableAnatomy.keys(),
-  base: {
-    root: {
-      tableLayout: "fixed",
-      borderCollapse: "collapse",
-      width: "100%",
-      minWidth: "36rem",
-      overflowX: "auto"
-    },
-    columnHeader: {
-      fontWeight: "bold",
-      textAlign: "start",
-      ...numericStyles,
-      paddingX: 1.5,
-      paddingY: 1
-    },
-    row: {
-      ...numericStyles
-    },
-    cell: {
-      ...numericStyles,
-      paddingX: 1.5,
-      paddingY: 1,
-      width: "100%"
-    },
-    footer: {
-      fontWeight: "medium"
-    }
-  },
-  variants: {
-    colorPalette: {
-      green: {
-        root: {
-          backgroundColor: "bg"
-        },
-        header: {
-          backgroundColor: "bg.tertiary"
-        },
-        columnHeader: {
-          color: "text.secondary"
-        }
-      },
-      grey: {
-        root: {
-          backgroundColor: "bg"
-        },
-        columnHeader: {
-          color: "brand.text.inverted",
-          backgroundColor: "surface.disabled",
-          _hover: {
-            backgroundColor: "surface.disabled"
-          }
-        }
-      },
-      white: {
-        root: {
-          backgroundColor: "bg"
-        },
-        columnHeader: {
-          color: "text",
-          backgroundColor: "bg"
-        }
-      }
-    },
-    variant: {
-      ghost: {
-        header: {
-          backgroundColor: "none"
-        },
-        columnHeader: {
-          borderBottom: "sm",
-          borderColor: "outline.disabled",
-          backgroundColor: "none",
-          color: "text"
-        },
-        cell: {
-          ...numericStyles
-        },
-        row: {
-          borderBottom: "sm",
-          borderColor: "outline.disabled",
-          ...numericStyles
-        }
-      },
-      core: {
-        root: {
-          boxShadow: "0 0 0 1px var(--shadow-color)",
-          shadowColor: "outline.disabled",
-          borderRadius: "sm"
-        },
-        table: {
-          overflow: "hidden"
-        },
-        cell: {
-          ...numericStyles,
-          borderRight: "sm",
-          borderColor: "outline.disabled",
-          _last: {
-            borderRight: "none"
-          }
-        },
-        columnHeader: {
-          ...numericStyles,
-          borderRight: "sm",
-          borderColor: "outline.disabled",
-          _first: {
-            borderTopLeftRadius: "sm"
-          },
-          _last: {
-            borderTopRightRadius: "sm",
-            borderRight: "none"
-          }
-        },
-        header: {
-          borderBottom: "sm",
-          borderColor: "outline.disabled"
-        },
-        row: {
-          ...numericStyles,
-          borderBottom: "sm",
-          borderColor: "outline.disabled",
-          _last: {
-            borderBottom: "none"
-          }
-        }
+      DropdownRightFill18Icon,
+      {
+        marginX: 5,
+        display: ["none", null, "block"],
+        color: iconColor
       }
-    },
-    size: {
-      sm: {
-        table: {
-          fontSize: "mobile.sm"
-        },
-        cell: {
-          paddingX: 1,
-          paddingY: 0.5,
-          fontSize: "mobile.sm"
-        },
-        columnHeader: {
-          paddingX: 1,
-          paddingY: 0.5
-        },
-        caption: {
-          paddingX: 1,
-          paddingY: 0.5
-        }
-      },
-      md: {
-        table: {
-          fontSize: "mobile.md"
-        },
-        cell: {
-          paddingX: 1.5,
-          paddingY: 1,
-          fontSize: "mobile.md"
-        },
-        columnHeader: {
-          paddingX: 1.5,
-          paddingY: 1,
-          fontSize: "mobile.md"
-        },
-        caption: {
-          paddingX: 1.5,
-          paddingY: 1,
-          fontSize: "mobile.md"
-        }
-      },
-      lg: {
-        table: {
-          fontSize: "mobile.md"
-        },
-        cell: {
-          paddingX: 3,
-          paddingY: 3,
-          fontSize: "mobile.md"
-        },
-        columnHeader: {
-          paddingX: 3,
-          paddingY: 2,
-          fontSize: "mobile.md"
-        },
-        caption: {
-          paddingX: 3,
-          paddingY: 2
-        }
+    ),
+    disabled ? /* @__PURE__ */ jsx(
+      Text3,
+      {
+        variant: "xs",
+        fontSize: "1rem",
+        color: disabledTextColor,
+        cursor: "default",
+        paddingX: 2,
+        children
       }
-    }
+    ) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "xs",
+        variant: state === "active" ? "primary" : "ghost",
+        onClick: state === "completed" ? () => onClick(stepNumber) : void 0,
+        pointerEvents: state === "active" ? "none" : "auto",
+        tabIndex: state === "active" ? -1 : void 0,
+        disabled,
+        "aria-current": state === "active" ? "step" : void 0,
+        css: state === "active" ? style.stepButton._currentStep : style.stepButton,
+        fontWeight: state === "active" ? "bold" : void 0,
+        children
+      }
+    )
+  ] });
+};
+var getState = (stepNumber, activeStep) => {
+  if (stepNumber < activeStep) {
+    return "completed";
+  }
+  if (stepNumber === activeStep) {
+    return "active";
   }
+  return "disabled";
+};
+var Tabs = forwardRef((props, ref) => {
+  const { variant = "core", size = "sm" } = props;
+  return /* @__PURE__ */ jsx(Tabs$1.Root, { ...props, ref, variant, size });
 });
+Tabs.displayName = "Tabs";
+var TabsList = Tabs$1.List;
+var TabsTrigger = Tabs$1.Trigger;
+var TabsIndicator = Tabs$1.Indicator;
+var TabsContent = Tabs$1.Content;
 var Table = forwardRef((props, ref) => {
   const { variant = "ghost", size, colorPalette = "green", children } = props;
-  const recipe = useSlotRecipe({ recipe: tableSlotRecipe });
+  const recipe = useSlotRecipe({ key: "table" });
   const styles = recipe({ variant, size });
   return /* @__PURE__ */ jsx(
     Table$1.Root,
@@ -6652,7 +5762,140 @@ var linkRecipe = defineRecipe({
     size: "sm"
   }
 });
-var _a3, _b2;
+var separatorRecipe = defineRecipe({
+  className: "spor-separator",
+  base: {
+    borderColor: "outline.disabled",
+    display: "block",
+    borderRadius: "xl"
+  },
+  variants: {
+    variant: {
+      solid: {
+        borderStyle: "solid"
+      },
+      dashed: {
+        width: "100%",
+        borderWidth: "0px"
+      }
+    },
+    size: {
+      sm: {
+        borderBottomWidth: "1px",
+        height: "1px"
+      },
+      md: {
+        borderBottomWidth: "2px",
+        height: "2px"
+      },
+      lg: {
+        borderBottomWidth: "3px",
+        height: "3px"
+      }
+    },
+    orientation: {
+      horizontal: {
+        width: "100%"
+      },
+      vertical: {
+        height: "100%",
+        borderLeftWidth: "1px"
+      }
+    }
+  },
+  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%"
+      }
+    }
+  ]
+});
+var skeletonRecipe = defineRecipe({
+  className: "chakra-skeleton",
+  variants: {
+    loading: {
+      true: {
+        borderRadius: "xs",
+        boxShadow: "none",
+        backgroundClip: "padding-box",
+        cursor: "default",
+        color: "transparent",
+        pointerEvents: "none",
+        userSelect: "none",
+        flexShrink: "0",
+        "&::before, &::after, *": {
+          visibility: "hidden"
+        }
+      },
+      false: {
+        background: "unset",
+        animation: "fade-in var(--fade-duration, 0.1s) ease-out !important"
+      }
+    },
+    variant: {
+      pulse: {
+        background: {
+          _light: "silver",
+          _dark: "darkGrey"
+        },
+        animation: "pulse",
+        animationDuration: "var(--duration, 1.2s)"
+      },
+      shine: {
+        "--animate-from": "200%",
+        "--animate-to": "-200%",
+        "--start-color": {
+          _light: "colors.lightGrey",
+          _dark: "colors.dimGrey"
+        },
+        "--end-color": {
+          _light: "colors.platinum",
+          _dark: "colors.darkGrey"
+        },
+        backgroundImage: "linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color))",
+        backgroundSize: "400% 100%",
+        animation: "bg-position var(--duration, 5s) ease-in-out infinite"
+      },
+      none: {
+        animation: "none",
+        background: "steel"
+      }
+    }
+  }
+});
+var _a2, _b;
 var textareaRecipe = defineRecipe({
   className: "spor-textarea",
   base: {
@@ -6669,10 +5912,10 @@ var textareaRecipe = defineRecipe({
   variants: {
     variant: {
       core: {
-        ...(_a3 = inputRecipe.variants) == null ? void 0 : _a3.variant.core
+        ...(_a2 = inputRecipe.variants) == null ? void 0 : _a2.variant.core
       },
       floating: {
-        ...(_b2 = inputRecipe.variants) == null ? void 0 : _b2.variant.floating
+        ...(_b = inputRecipe.variants) == null ? void 0 : _b.variant.floating
       }
     }
   }
@@ -6721,33 +5964,284 @@ var shadows = defineSemanticTokens.shadows({
   sm: {
     value: tokens23__default.depth.shadow.sm.value
   },
-  md: {
-    value: tokens23__default.depth.shadow.md.value
+  md: {
+    value: tokens23__default.depth.shadow.md.value
+  },
+  lg: {
+    value: tokens23__default.depth.shadow.lg.value
+  }
+});
+
+// src/theme/semantic-tokens/index.ts
+var baseSemanticTokens = {
+  shadows,
+  radii
+};
+var semanticTokens = {
+  ["VyUtvikling" /* VyUtvikling */]: {
+    ...baseSemanticTokens,
+    colors: vyUtviklingColors
+  },
+  ["CargoNet" /* CargoNet */]: {
+    ...baseSemanticTokens,
+    colors: cargonetColors
   },
-  lg: {
-    value: tokens23__default.depth.shadow.lg.value
+  ["VyDigital" /* VyDigital */]: {
+    ...baseSemanticTokens,
+    colors: vyDigitalColors
   }
-});
+};
+var accordionAnatomy = createAnatomy("accordion").parts(
+  "root",
+  "itemTrigger",
+  "item",
+  "itemBody",
+  "itemContent",
+  "itemIndicator"
+);
+var alertAnatomy = createAnatomy("alert").parts(
+  "root",
+  "indicator",
+  "title",
+  "closeButton",
+  "content",
+  "description"
+);
+var alertExpandableAnatomy = createAnatomy("alert-expandable").parts(
+  "root",
+  "itemTrigger",
+  "itemContent",
+  "indicator",
+  "title",
+  "itemIndicator"
+);
+var alertServiceAnatomy = createAnatomy("service-alert").parts(
+  "root",
+  "itemTrigger",
+  "itemTriggerTitle",
+  "notificationText",
+  "itemContent",
+  "itemBody"
+);
+var listAnatomy = createAnatomy("list").parts(
+  "root",
+  "item",
+  "icon",
+  "indicator"
+);
+var tableAnatomy = createAnatomy("table").parts(
+  "root",
+  "body",
+  "row",
+  "cell",
+  "columnHeader",
+  "caption",
+  "footer",
+  "header"
+);
+var fieldAnatomy = createAnatomy("field").parts(
+  "root",
+  "label",
+  "requiredIndicator",
+  "helperText",
+  "errorText"
+);
+var dialogAnatomy = createAnatomy("dialog").parts(
+  "header",
+  "body",
+  "footer",
+  "backdrop",
+  "positioner",
+  "content",
+  "title",
+  "description",
+  "closeTrigger"
+);
+var paginationAnatomy = createAnatomy("pagination").parts(
+  "list",
+  "item"
+);
+var linjetagAnatomy = createAnatomy("linjetag").parts(
+  "iconContainer",
+  "icon",
+  "root",
+  "title",
+  "desc"
+);
+var infoTagAnatomy = createAnatomy("info-tag").parts(
+  "container",
+  "iconContainer",
+  "icon",
+  "textContainer",
+  "title",
+  "description",
+  "walk"
+);
+var travelTagAnatomy = createAnatomy("travel-tag").parts(
+  "container",
+  "iconContainer",
+  "icon",
+  "textContainer",
+  "title",
+  "description",
+  "deviationIcon"
+);
+var drawerAnatomy = createAnatomy("drawer").parts(
+  "header",
+  "body",
+  "backdrop",
+  "positioner",
+  "content",
+  "footer",
+  "title",
+  "description",
+  "closeTrigger"
+);
+var checkboxAnatomy = createAnatomy("checkbox").parts(
+  "root",
+  "control",
+  "label",
+  "description",
+  "addon",
+  "indicator",
+  "content"
+);
+var breadcrumbAnatomy = createAnatomy("breadcrumb").parts(
+  "link",
+  "currentLink",
+  "list",
+  "separator"
+);
+var stepperAnatomy = createAnatomy("stepper").parts(
+  "root",
+  "container",
+  "innerContainer",
+  "title",
+  "stepCounter",
+  "stepContainer",
+  "stepButton",
+  "stepNumber",
+  "stepTitle",
+  "closeButton",
+  "backButton"
+);
+var radioCardAnatomy = createAnatomy("radio-card").parts(
+  "root",
+  "item",
+  "label",
+  "itemText",
+  "itemDescription",
+  "itemContent"
+);
+var radioAnatomy = createAnatomy("radio").parts(
+  "root",
+  "item",
+  "itemControl",
+  "itemText",
+  "label"
+);
+var listBoxAnatomy = createAnatomy("listbox").parts(
+  "root",
+  "item",
+  "label",
+  "description"
+);
+var NativeSelectAnatomy = createAnatomy("native-select").parts(
+  "root",
+  "field",
+  "icon"
+);
+var tabsAnatomy = createAnatomy("tabs").parts(
+  "root",
+  "list",
+  "trigger",
+  "content",
+  "indicator"
+);
+var switchAnatomy = createAnatomy("switch").parts(
+  "root",
+  "thumb",
+  "control",
+  "label"
+);
+var selectAnatomy = createAnatomy("select").parts(
+  "root",
+  "trigger",
+  "indicatorGroup",
+  "indicator",
+  "selectContent",
+  "item",
+  "control",
+  "itemText",
+  "itemDescription",
+  "itemGroup",
+  "itemGroupLabel",
+  "label",
+  "valueText"
+);
+createAnatomy("card-select").parts(
+  "trigger",
+  "card"
+);
+var numericStepperAnatomy = createAnatomy("numeric-stepper").parts(
+  "root",
+  "container",
+  "input",
+  "text",
+  "button"
+);
+var mediaControllerAnatomy = createAnatomy(
+  "media-controller-button"
+).parts("root", "icon");
+var progressBarAnotomy = createAnatomy("progress-bar").parts(
+  "container",
+  "background",
+  "progress",
+  "description",
+  "disabledBackground"
+);
+var toastAnatomy = createAnatomy("toast").parts(
+  "root",
+  "title",
+  "description",
+  "indicator",
+  "closeTrigger",
+  "actionTrigger"
+);
+var floatingActionButtonAnatomy = createAnatomy(
+  "floating-action-button"
+).parts("root", "icon", "text");
+var popoverAnatomy = popoverAnatomy$1.extendWith(
+  "header",
+  "body",
+  "footer"
+);
+var datepickerAnatomy = createAnatomy("datepicker").parts(
+  "wrapper",
+  "calendarTriggerButton",
+  "arrow",
+  "calendarPopover",
+  "calendar",
+  "weekdays",
+  "weekend",
+  "dateCell",
+  "inputLabel",
+  "dateTimeSegment",
+  "cell",
+  "box",
+  "rangeCalendarPopover"
+);
+var checkboxCardAnatomy = createAnatomy("checkbox-card", [
+  "root",
+  "control",
+  "label",
+  "description",
+  "addon",
+  "indicator",
+  "content"
+]);
 
-// src/theme/semantic-tokens/index.ts
-var baseSemanticTokens = {
-  shadows,
-  radii
-};
-var semanticTokens = {
-  ["VyUtvikling" /* VyUtvikling */]: {
-    ...baseSemanticTokens,
-    colors: vyUtviklingColors
-  },
-  ["CargoNet" /* CargoNet */]: {
-    ...baseSemanticTokens,
-    colors: cargonetColors
-  },
-  ["VyDigital" /* VyDigital */]: {
-    ...baseSemanticTokens,
-    colors: vyDigitalColors
-  }
-};
+// src/theme/slot-recipes/accordion.ts
 var accordionSlotRecipe = defineSlotRecipe({
   className: "spor-accordion",
   slots: accordionAnatomy.keys(),
@@ -7300,139 +6794,345 @@ var choiceChipSlotRecipe = defineSlotRecipe({
           }
         }
       },
-      _focusVisible: {
-        outline: "2px solid",
-        outlineColor: "outline.focus",
-        outlineOffset: "1px"
+      _focusVisible: {
+        outline: "2px solid",
+        outlineColor: "outline.focus",
+        outlineOffset: "1px"
+      },
+      _disabled: {
+        pointerEvents: "none",
+        boxShadow: "none",
+        backgroundColor: "surface.disabled",
+        color: "text.disabled",
+        outline: "none",
+        _hover: {
+          backgroundColor: "core.surface.disabled",
+          boxShadow: "none",
+          color: "core.text.disabled"
+        },
+        _checked: {
+          cursor: "not-allowed",
+          boxShadow: "none",
+          color: "core.text.disabled",
+          backgroundColor: "core.surface.disabled",
+          _hover: {
+            backgroundColor: "core.surface.disabled",
+            boxShadow: "none",
+            color: "core.text.disabled"
+          }
+        }
+      }
+    },
+    label: {
+      display: "flex",
+      alignItems: "center",
+      fontSize: "xs"
+    }
+  },
+  variants: {
+    size: {
+      xs: {
+        root: {
+          _checked: {
+            borderRadius: "0.563rem"
+          },
+          height: 5,
+          paddingX: 1.5
+        }
+      },
+      sm: {
+        root: {
+          _checked: {
+            borderRadius: "sm"
+          },
+          height: 6,
+          paddingX: 2
+        }
+      },
+      md: {
+        root: {
+          _checked: {
+            borderRadius: "sm"
+          },
+          height: 7,
+          paddingX: 2
+        }
+      },
+      lg: {
+        root: {
+          _checked: {
+            borderRadius: "md"
+          },
+          height: 8,
+          paddingX: 3
+        }
+      }
+    },
+    variant: {
+      core: {
+        root: {
+          color: "core.text",
+          outlineColor: "core.outline",
+          _hover: {
+            outline: "2px solid",
+            outlineColor: "core.outline.hover",
+            _active: {
+              outline: "1px solid",
+              outlineColor: "core.outline",
+              backgroundColor: "core.surface.active"
+            }
+          }
+        }
+      },
+      accent: {
+        root: {
+          backgroundColor: "accent.surface",
+          color: "accent.text",
+          outline: "none",
+          _hover: {
+            backgroundColor: "accent.surface.hover",
+            _active: {
+              backgroundColor: "accent.surface.active"
+            }
+          }
+        }
+      },
+      floating: {
+        root: {
+          backgroundColor: "floating.surface",
+          outline: "1px solid",
+          outlineColor: "floating.outline",
+          color: "floating.text",
+          boxShadow: "sm",
+          _hover: {
+            backgroundColor: "floating.surface.hover",
+            outline: "1px solid",
+            outlineColor: "floating.outline.hover",
+            _active: {
+              backgroundColor: "floating.surface.active",
+              outline: "1px solid",
+              outlineColor: "floating.outline"
+            }
+          }
+        }
+      }
+    },
+    chipType: {
+      icon: {},
+      choice: {},
+      filter: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "core",
+    chipType: "choice"
+  }
+});
+var datePickerSlotRecipe = defineSlotRecipe({
+  slots: datepickerAnatomy.keys(),
+  className: "spor-datepicker",
+  base: {
+    wrapper: {
+      transitionProperty: "box-shadow",
+      transitionDuration: "fast",
+      borderRadius: "sm",
+      display: "flex",
+      flex: 1,
+      paddingY: 0.5,
+      alignItems: "center",
+      _hover: {
+        zIndex: "docked"
+      },
+      _disabled: {
+        pointerEvents: "none",
+        backgroundColor: "surface.disabled",
+        outline: "1px solid",
+        outlineColor: "outline.disabled",
+        color: "text.disabled"
+      },
+      _focusWithin: {
+        outline: "2px solid",
+        outlineColor: "outline.focus"
+      }
+    },
+    inputLabel: {
+      fontSize: "mobile.xs",
+      margin: 0,
+      cursor: "text"
+    },
+    dateTimeSegment: {
+      _focus: {
+        backgroundColor: "ghost.surface.active",
+        color: "text.default"
+      }
+    },
+    box: {
+      width: "100%"
+    },
+    calendarTriggerButton: {
+      position: "relative",
+      borderRadius: "xl",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      transitionProperty: "box-shadow, background-color",
+      right: "0.5rem",
+      _hover: {
+        backgroundColor: "ghost.surface.hover"
+      },
+      _active: {
+        backgroundColor: "ghost.surface.active"
+      },
+      _invalid: {
+        outline: "2px solid",
+        outlineColor: "outline.error"
+      }
+    },
+    arrow: {
+      backgroundColor: "surface"
+    },
+    calendarPopover: {
+      color: "core.text",
+      outline: "1px solid",
+      outlineColor: "floating.outline",
+      boxShadow: "md",
+      backgroundColor: "floating.surface"
+    },
+    rangeCalendarPopover: {
+      width: "43rem",
+      maxWidth: "100vw"
+    },
+    weekdays: {
+      color: "core.text",
+      fontWeight: "bold"
+    },
+    weekend: {
+      color: "accent.text",
+      fontWeight: "bold"
+    },
+    cell: {
+      '&[aria-selected="true"] + [aria-selected="true"] > button': {
+        "&::before": {
+          content: '""',
+          display: "block",
+          height: "100%",
+          position: "absolute",
+          left: "-50%",
+          top: 0,
+          bottom: 0,
+          zIndex: -1,
+          backgroundColor: "brand.surface"
+        }
+      }
+    },
+    dateCell: {
+      color: "core.text",
+      borderRadius: "xl",
+      position: "relative",
+      transition: ".1s ease-in-out",
+      userSelect: "none",
+      width: [6, 7],
+      height: [6, 7],
+      transitionProperty: "common",
+      _hover: {
+        backgroundColor: "ghost.surface.hover"
+      },
+      _active: {
+        backgroundColor: "ghost.surface.active"
       },
       _disabled: {
-        pointerEvents: "none",
-        boxShadow: "none",
         backgroundColor: "surface.disabled",
         color: "text.disabled",
-        outline: "none",
-        _hover: {
-          backgroundColor: "core.surface.disabled",
-          boxShadow: "none",
-          color: "core.text.disabled"
-        },
-        _checked: {
-          cursor: "not-allowed",
-          boxShadow: "none",
-          color: "core.text.disabled",
-          backgroundColor: "core.surface.disabled",
-          _hover: {
-            backgroundColor: "core.surface.disabled",
-            boxShadow: "none",
-            color: "core.text.disabled"
-          }
-        }
-      }
-    },
-    label: {
-      display: "flex",
-      alignItems: "center",
-      fontSize: "xs"
-    }
-  },
-  variants: {
-    size: {
-      xs: {
-        root: {
-          _checked: {
-            borderRadius: "0.563rem"
-          },
-          height: 5,
-          paddingX: 1.5
-        }
+        pointerEvents: "none"
       },
-      sm: {
-        root: {
-          _checked: {
-            borderRadius: "sm"
-          },
-          height: 6,
-          paddingX: 2
+      _selected: {
+        backgroundColor: "brand.surface",
+        color: "brand.text",
+        _active: {
+          backgroundColor: "brand.surface.active",
+          color: "brand.text"
         }
       },
-      md: {
-        root: {
-          _checked: {
-            borderRadius: "sm"
-          },
-          height: 7,
-          paddingX: 2
-        }
+      "&[data-today]": {
+        outline: "1px solid",
+        outlineColor: "core.outline"
       },
-      lg: {
-        root: {
-          _checked: {
-            borderRadius: "md"
-          },
-          height: 8,
-          paddingX: 3
-        }
+      "&[data-unavailable]": {
+        pointerEvents: "none",
+        borderRadius: "xl",
+        backgroundColor: "surface.disabled",
+        color: "text.disabled"
       }
-    },
+    }
+  },
+  variants: {
     variant: {
       core: {
-        root: {
-          color: "core.text",
+        wrapper: {
+          outline: "1px solid",
           outlineColor: "core.outline",
+          backgroundColor: "core.surface",
           _hover: {
             outline: "2px solid",
             outlineColor: "core.outline.hover",
             _active: {
+              backgroundColor: "ghost.surface.active",
               outline: "1px solid",
-              outlineColor: "core.outline",
-              backgroundColor: "core.surface.active"
-            }
-          }
-        }
-      },
-      accent: {
-        root: {
-          backgroundColor: "accent.surface",
-          color: "accent.text",
-          outline: "none",
-          _hover: {
-            backgroundColor: "accent.surface.hover",
-            _active: {
-              backgroundColor: "accent.surface.active"
+              outlineColor: "core.outline"
             }
+          },
+          _invalid: {
+            outline: "2px solid",
+            outlineColor: "outline.error"
           }
         }
       },
       floating: {
-        root: {
-          backgroundColor: "floating.surface",
+        wrapper: {
+          backgroundColor: {
+            _light: "bg",
+            _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`
+          },
           outline: "1px solid",
           outlineColor: "floating.outline",
-          color: "floating.text",
           boxShadow: "sm",
           _hover: {
-            backgroundColor: "floating.surface.hover",
             outline: "1px solid",
             outlineColor: "floating.outline.hover",
             _active: {
-              backgroundColor: "floating.surface.active",
+              backgroundColor: "ghost.surface.active",
               outline: "1px solid",
-              outlineColor: "floating.outline"
+              outlineColor: "core.outline"
+            }
+          },
+          _invalid: {
+            outline: "2px solid",
+            outlineColor: "outline.error"
+          }
+        }
+      },
+      ghost: {
+        wrapper: {
+          _hover: {
+            outline: "2px solid",
+            outlineColor: "core.outline.hover",
+            _active: {
+              backgroundColor: "ghost.surface.active",
+              outline: "1px solid",
+              outlineColor: "core.outline"
             }
+          },
+          _invalid: {
+            outline: "2px solid",
+            outlineColor: "outline.error"
           }
         }
       }
-    },
-    chipType: {
-      icon: {},
-      choice: {},
-      filter: {}
     }
   },
   defaultVariants: {
-    size: "md",
-    variant: "core",
-    chipType: "choice"
+    variant: "core"
   }
 });
 var dialogSlotRecipe = defineSlotRecipe({
@@ -8216,7 +7916,7 @@ var travelTagSlotRecipe = defineSlotRecipe({
 });
 
 // src/theme/slot-recipes/info-tag.ts
-var _a4, _b3, _c, _d;
+var _a3, _b2, _c, _d;
 var infoTagSlotRecipe = defineSlotRecipe({
   slots: infoTagAnatomy.keys(),
   className: "spor-info-tag",
@@ -8253,9 +7953,9 @@ var infoTagSlotRecipe = defineSlotRecipe({
       "local-bus": {}
     },
     size: {
-      ...(_a4 = travelTagSlotRecipe.variants) == null ? void 0 : _a4.size,
+      ...(_a3 = travelTagSlotRecipe.variants) == null ? void 0 : _a3.size,
       sm: {
-        ...(_b3 = travelTagSlotRecipe.variants) == null ? void 0 : _b3.size.sm,
+        ...(_b2 = travelTagSlotRecipe.variants) == null ? void 0 : _b2.size.sm,
         iconContainer: {
           borderRadius: "0.375rem"
         }
@@ -8628,29 +8328,140 @@ var mediaControllerSlotRecipe = defineSlotRecipe({
         }
       }
     },
-    {
-      variant: "jumpSkip",
-      size: "sm",
-      css: {
-        root: {
-          fontSize: 24
-        }
-      }
+    {
+      variant: "jumpSkip",
+      size: "sm",
+      css: {
+        root: {
+          fontSize: 24
+        }
+      }
+    },
+    {
+      variant: "jumpSkip",
+      size: "lg",
+      css: {
+        root: {
+          fontSize: 38
+        },
+        icon: {
+          margin: 1,
+          transform: "scale(1.4)"
+        }
+      }
+    }
+  ]
+});
+var _a4, _b3;
+var nativeSelectSlotRecipe = defineSlotRecipe({
+  slots: NativeSelectAnatomy.keys(),
+  className: "spor-nativeSelect",
+  base: {
+    root: {
+      width: "100%",
+      height: "fit-content",
+      position: "relative"
+    },
+    field: {
+      ...inputRecipe.base
+    },
+    icon: {
+      width: 5,
+      height: 5,
+      right: " 0.5rem",
+      strokeLinecap: "round",
+      position: "absolute",
+      display: "inline-flex",
+      boxAlign: "center",
+      alignItems: "center",
+      boxPack: "center",
+      justifyContent: "center",
+      pointerEvents: "none",
+      top: "50%",
+      transform: "translateY(-50%)",
+      insetEnd: "0.5rem",
+      color: "currentColor",
+      fontSize: "sm",
+      _disabled: {
+        color: "text.disabled"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      core: {
+        field: {
+          ...(_a4 = inputRecipe.variants) == null ? void 0 : _a4.variant.core
+        }
+      },
+      floating: {
+        field: {
+          ...(_b3 = inputRecipe.variants) == null ? void 0 : _b3.variant.floating
+        }
+      }
+    }
+  }
+});
+var numericStepperRecipe = defineSlotRecipe({
+  slots: numericStepperAnatomy.keys(),
+  className: "spor-numeric-stepper",
+  base: {
+    root: {
+      "& > div": {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center"
+      }
+    },
+    input: {
+      fontSize: "sm",
+      fontWeight: "bold",
+      marginX: 0.5,
+      padding: 0,
+      paddingX: 0.5,
+      borderRadius: "xs",
+      outline: "none",
+      height: "auto",
+      textAlign: "center",
+      transitionProperty: "common",
+      transitionDuration: "fast",
+      color: "core.text",
+      backgroundColor: "transparent",
+      _focus: {
+        backgroundColor: "surface",
+        outline: "2px solid",
+        outlineColor: "outline.focus"
+      },
+      _active: {
+        backgroundColor: "accent.surface.active"
+      },
+      _disabled: {
+        pointerEvents: "none",
+        opacity: 0.5
+      },
+      _hover: {
+        outline: "1px solid",
+        outlineColor: "core.outline"
+      }
+    },
+    text: {
+      fontSize: "sm",
+      fontWeight: "bold",
+      marginX: 1,
+      paddingX: 1,
+      textAlign: "center",
+      width: "4ch",
+      color: "core.text"
     },
-    {
-      variant: "jumpSkip",
-      size: "lg",
-      css: {
-        root: {
-          fontSize: 38
-        },
-        icon: {
-          margin: 1,
-          transform: "scale(1.4)"
-        }
+    button: {
+      outlineOffset: "-2px",
+      width: "auto",
+      _icon: {
+        width: "1.2rem",
+        height: "1.2rem"
       }
     }
-  ]
+  }
 });
 var paginationSlotRecipe = defineSlotRecipe({
   slots: paginationAnatomy.keys(),
@@ -9454,6 +9265,201 @@ var switchSlotRecipe = defineSlotRecipe({
     }
   }
 });
+var numericStyles = {
+  "&[data-is-numeric=true]": {
+    textAlign: "right"
+  }
+};
+var tableSlotRecipe = defineSlotRecipe({
+  className: "spor-table",
+  slots: tableAnatomy.keys(),
+  base: {
+    root: {
+      tableLayout: "fixed",
+      borderCollapse: "collapse",
+      width: "100%",
+      minWidth: "36rem",
+      overflowX: "auto"
+    },
+    columnHeader: {
+      fontWeight: "bold",
+      textAlign: "start",
+      ...numericStyles,
+      paddingX: 1.5,
+      paddingY: 1
+    },
+    row: {
+      ...numericStyles
+    },
+    cell: {
+      ...numericStyles,
+      paddingX: 1.5,
+      paddingY: 1,
+      width: "100%"
+    },
+    footer: {
+      fontWeight: "medium"
+    }
+  },
+  variants: {
+    colorPalette: {
+      green: {
+        root: {
+          backgroundColor: "bg"
+        },
+        header: {
+          backgroundColor: "bg.tertiary"
+        },
+        columnHeader: {
+          color: "text.secondary"
+        }
+      },
+      grey: {
+        root: {
+          backgroundColor: "bg"
+        },
+        columnHeader: {
+          color: "brand.text.inverted",
+          backgroundColor: "surface.disabled",
+          _hover: {
+            backgroundColor: "surface.disabled"
+          }
+        }
+      },
+      white: {
+        root: {
+          backgroundColor: "bg"
+        },
+        columnHeader: {
+          color: "text",
+          backgroundColor: "bg"
+        }
+      }
+    },
+    variant: {
+      ghost: {
+        header: {
+          backgroundColor: "none"
+        },
+        columnHeader: {
+          borderBottom: "sm",
+          borderColor: "outline.disabled",
+          backgroundColor: "none",
+          color: "text"
+        },
+        cell: {
+          ...numericStyles
+        },
+        row: {
+          borderBottom: "sm",
+          borderColor: "outline.disabled",
+          ...numericStyles
+        }
+      },
+      core: {
+        root: {
+          boxShadow: "0 0 0 1px var(--shadow-color)",
+          shadowColor: "outline.disabled",
+          borderRadius: "sm"
+        },
+        table: {
+          overflow: "hidden"
+        },
+        cell: {
+          ...numericStyles,
+          borderRight: "sm",
+          borderColor: "outline.disabled",
+          _last: {
+            borderRight: "none"
+          }
+        },
+        columnHeader: {
+          ...numericStyles,
+          borderRight: "sm",
+          borderColor: "outline.disabled",
+          _first: {
+            borderTopLeftRadius: "sm"
+          },
+          _last: {
+            borderTopRightRadius: "sm",
+            borderRight: "none"
+          }
+        },
+        header: {
+          borderBottom: "sm",
+          borderColor: "outline.disabled"
+        },
+        row: {
+          ...numericStyles,
+          borderBottom: "sm",
+          borderColor: "outline.disabled",
+          _last: {
+            borderBottom: "none"
+          }
+        }
+      }
+    },
+    size: {
+      sm: {
+        table: {
+          fontSize: "mobile.sm"
+        },
+        cell: {
+          paddingX: 1,
+          paddingY: 0.5,
+          fontSize: "mobile.sm"
+        },
+        columnHeader: {
+          paddingX: 1,
+          paddingY: 0.5
+        },
+        caption: {
+          paddingX: 1,
+          paddingY: 0.5
+        }
+      },
+      md: {
+        table: {
+          fontSize: "mobile.md"
+        },
+        cell: {
+          paddingX: 1.5,
+          paddingY: 1,
+          fontSize: "mobile.md"
+        },
+        columnHeader: {
+          paddingX: 1.5,
+          paddingY: 1,
+          fontSize: "mobile.md"
+        },
+        caption: {
+          paddingX: 1.5,
+          paddingY: 1,
+          fontSize: "mobile.md"
+        }
+      },
+      lg: {
+        table: {
+          fontSize: "mobile.md"
+        },
+        cell: {
+          paddingX: 3,
+          paddingY: 3,
+          fontSize: "mobile.md"
+        },
+        columnHeader: {
+          paddingX: 3,
+          paddingY: 2,
+          fontSize: "mobile.md"
+        },
+        caption: {
+          paddingX: 3,
+          paddingY: 2
+        }
+      }
+    }
+  }
+});
 var tabsSlotRecipe = defineSlotRecipe({
   slots: tabsAnatomy.keys(),
   className: "spor-tabs",
@@ -10519,6 +10525,6 @@ var themes = {
 };
 var system = themes["VyDigital" /* VyDigital */];
 
-export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, AttachedInputs, Badge, Brand, Breadcrumb, Button, ButtonGroup, CardSelect, CardSelectContent, CardSelectTrigger, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, Clipboard, ClipboardButton, CloseButton, CloseDrawerLine, Code, ColorInlineLoader, ColorModeButton, ColorModeIcon, ColorModeProvider, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field3 as Field, FieldErrorText, FieldLabel, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FloatingActionButton, Heading, IconButton, InfoTag, Input, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, List, ListBox, ListIndicator, ListItem2 as ListItem, NativeSelect, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, NudgeTrigger, NudgeWizardStep, NumericStepper, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover2 as Popover, PopoverContent, PopoverTrigger, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, SearchInput, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, StaticCard, Stepper, StepperStep, SvgBox, Switch, Table, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Text3 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useColorMode, useColorModeValue, useTranslation };
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, AttachedInputs, Badge, Brand, Breadcrumb, Button, ButtonGroup, CardSelect, CardSelectContent, CardSelectTrigger, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, Clipboard, ClipboardButton, CloseButton, CloseDrawerLine, Code, ColorInlineLoader, ColorModeButton, ColorModeIcon, ColorModeProvider, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field3 as Field, FieldErrorText, FieldLabel, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FloatingActionButton, Heading, IconButton, InfoTag, Input, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, List, ListBox, ListIndicator, ListItem2 as ListItem, NativeSelect, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, NudgeTrigger, NudgeWizardStep, NumericStepper, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover2 as Popover, PopoverContent, PopoverTrigger, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, RangeCalendar, SearchInput, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, StaticCard, Stepper, StepperStep, SvgBox, Switch, Table, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Text3 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useColorMode, useColorModeValue, useTranslation };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map