@vygruppen/spor-react 12.5.5 → 12.6.0

package/dist/index.js

@@ -11,13 +11,13 @@ var reactAria = require('react-aria');
 var nextThemes = require('next-themes');
 var lu = require('react-icons/lu');
 var reactStately = require('react-stately');
-var anatomy = require('@ark-ui/react/anatomy');
-var popover = require('@ark-ui/react/popover');
 var date = require('@internationalized/date');
 var awesomePhonenumber = require('awesome-phonenumber');
 var tokens23 = require('@vygruppen/spor-design-tokens');
 var react$1 = require('@emotion/react');
 var tokens4 = require('@vygruppen/spor-design-tokens/raw-tokens');
+var anatomy = require('@ark-ui/react/anatomy');
+var popover = require('@ark-ui/react/popover');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -122,7 +122,7 @@ var AccordionItem = react.Accordion.Item;
 var Expandable = React28.forwardRef(
   (props, ref) => {
     const { title, children, headingLevel, startElement, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(Accordion, { ...props, ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(Accordion, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
       ExpandableItem,
       {
         title,
@@ -508,61 +508,8 @@ var texts = createTexts({
     en: `${value}% done`
   })
 });
-var skeletonRecipe = react.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__namespace.forwardRef(function SkeletonCircle2(props, ref) {
-  const recipe = react.useRecipe({ recipe: skeletonRecipe });
+  const recipe = react.useRecipe({ key: "skeleton" });
   const [recipeProps, restProps] = recipe.splitVariantProps({
     loading: true,
     variant: "pulse",
@@ -573,7 +520,7 @@ var SkeletonCircle = React28__namespace.forwardRef(function SkeletonCircle2(prop
 });
 var SkeletonText = React28.forwardRef(
   function SkeletonText2(props, ref) {
-    const recipe = react.useRecipe({ recipe: skeletonRecipe });
+    const recipe = react.useRecipe({ key: "skeleton" });
     const [recipeProps, restProps] = recipe.splitVariantProps({
       loading: true,
       variant: "pulse",
@@ -594,7 +541,7 @@ var SkeletonText = React28.forwardRef(
 );
 var Skeleton = React28.forwardRef(
   function SkeletonText3(props, ref) {
-    const recipe = react.useRecipe({ recipe: skeletonRecipe });
+    const recipe = react.useRecipe({ key: "skeleton" });
     const [recipeProps, restProps] = recipe.splitVariantProps({
       loading: true,
       variant: "pulse",
@@ -855,10 +802,26 @@ var Heading = React28.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(react.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 = React28.forwardRef(
   function Text4(props, ref) {
-    const { variant = "sm", ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(react.Text, { ...rest, textStyle: variant, ref });
+    const { variant, lineHeight, fontSize, ...rest } = props;
+    const resolvedProps = resolveTextProps({ variant, fontSize, lineHeight });
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Text, { ...resolvedProps, ...rest, ref });
   }
 );
 var ClipboardIcon = React28__namespace.forwardRef((props, ref) => {
@@ -1149,7 +1112,7 @@ var Alert = React28.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Alert.Root, { ref, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(react.Alert.Content, { flexDirection: title ? "column" : "row", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { gap: "1", alignItems: "flex-start", children: [
-        showIndicator && /* @__PURE__ */ jsxRuntime.jsx(react.Alert.Indicator, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(AlertIcon, { variant: props.variant, customIcon: icon }) }),
+        showIndicator && /* @__PURE__ */ jsxRuntime.jsx(react.Alert.Indicator, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(AlertIcon, { variant: props.variant ?? "info", customIcon: icon }) }),
         title && /* @__PURE__ */ jsxRuntime.jsx(react.Alert.Title, { paddingRight: closable ? 6 : 0, children: title })
       ] }),
       children && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1484,463 +1447,6 @@ var FieldErrorText = React28__namespace.forwardRef((props, ref) => {
 });
 FieldErrorText.displayName = "FieldErrorText";
 var FieldLabel = react.Field.Label;
-var accordionAnatomy = anatomy.createAnatomy("accordion").parts(
-  "root",
-  "itemTrigger",
-  "item",
-  "itemBody",
-  "itemContent",
-  "itemIndicator"
-);
-var alertAnatomy = anatomy.createAnatomy("alert").parts(
-  "root",
-  "indicator",
-  "title",
-  "closeButton",
-  "content",
-  "description"
-);
-var alertExpandableAnatomy = anatomy.createAnatomy("alert-expandable").parts(
-  "root",
-  "itemTrigger",
-  "itemContent",
-  "indicator",
-  "title",
-  "itemIndicator"
-);
-var alertServiceAnatomy = anatomy.createAnatomy("service-alert").parts(
-  "root",
-  "itemTrigger",
-  "itemTriggerTitle",
-  "notificationText",
-  "itemContent",
-  "itemBody"
-);
-var listAnatomy = anatomy.createAnatomy("list").parts(
-  "root",
-  "item",
-  "icon",
-  "indicator"
-);
-var tableAnatomy = anatomy.createAnatomy("table").parts(
-  "root",
-  "body",
-  "row",
-  "cell",
-  "columnHeader",
-  "caption",
-  "footer",
-  "header"
-);
-var fieldAnatomy = anatomy.createAnatomy("field").parts(
-  "root",
-  "label",
-  "requiredIndicator",
-  "helperText",
-  "errorText"
-);
-var dialogAnatomy = anatomy.createAnatomy("dialog").parts(
-  "header",
-  "body",
-  "footer",
-  "backdrop",
-  "positioner",
-  "content",
-  "title",
-  "description",
-  "closeTrigger"
-);
-var paginationAnatomy = anatomy.createAnatomy("pagination").parts(
-  "list",
-  "item"
-);
-var linjetagAnatomy = anatomy.createAnatomy("linjetag").parts(
-  "iconContainer",
-  "icon",
-  "root",
-  "title",
-  "desc"
-);
-var infoTagAnatomy = anatomy.createAnatomy("info-tag").parts(
-  "container",
-  "iconContainer",
-  "icon",
-  "textContainer",
-  "title",
-  "description",
-  "walk"
-);
-var travelTagAnatomy = anatomy.createAnatomy("travel-tag").parts(
-  "container",
-  "iconContainer",
-  "icon",
-  "textContainer",
-  "title",
-  "description",
-  "deviationIcon"
-);
-var drawerAnatomy = anatomy.createAnatomy("drawer").parts(
-  "header",
-  "body",
-  "backdrop",
-  "positioner",
-  "content",
-  "footer",
-  "title",
-  "description",
-  "closeTrigger"
-);
-var checkboxAnatomy = anatomy.createAnatomy("checkbox").parts(
-  "root",
-  "control",
-  "label",
-  "description",
-  "addon",
-  "indicator",
-  "content"
-);
-var breadcrumbAnatomy = anatomy.createAnatomy("breadcrumb").parts(
-  "link",
-  "currentLink",
-  "list",
-  "separator"
-);
-var stepperAnatomy = anatomy.createAnatomy("stepper").parts(
-  "root",
-  "container",
-  "innerContainer",
-  "title",
-  "stepCounter",
-  "stepContainer",
-  "stepButton",
-  "stepNumber",
-  "stepTitle",
-  "closeButton",
-  "backButton"
-);
-var radioCardAnatomy = anatomy.createAnatomy("radio-card").parts(
-  "root",
-  "item",
-  "label",
-  "itemText",
-  "itemDescription",
-  "itemContent"
-);
-var radioAnatomy = anatomy.createAnatomy("radio").parts(
-  "root",
-  "item",
-  "itemControl",
-  "itemText",
-  "label"
-);
-var listBoxAnatomy = anatomy.createAnatomy("listbox").parts(
-  "root",
-  "item",
-  "label",
-  "description"
-);
-var NativeSelectAnatomy = anatomy.createAnatomy("native-select").parts(
-  "root",
-  "field",
-  "icon"
-);
-var tabsAnatomy = anatomy.createAnatomy("tabs").parts(
-  "root",
-  "list",
-  "trigger",
-  "content",
-  "indicator"
-);
-var switchAnatomy = anatomy.createAnatomy("switch").parts(
-  "root",
-  "thumb",
-  "control",
-  "label"
-);
-var selectAnatomy = anatomy.createAnatomy("select").parts(
-  "root",
-  "trigger",
-  "indicatorGroup",
-  "indicator",
-  "selectContent",
-  "item",
-  "control",
-  "itemText",
-  "itemDescription",
-  "itemGroup",
-  "itemGroupLabel",
-  "label",
-  "valueText"
-);
-anatomy.createAnatomy("card-select").parts(
-  "trigger",
-  "card"
-);
-var numericStepperAnatomy = anatomy.createAnatomy("numeric-stepper").parts(
-  "root",
-  "container",
-  "input",
-  "text",
-  "button"
-);
-var mediaControllerAnatomy = anatomy.createAnatomy(
-  "media-controller-button"
-).parts("root", "icon");
-var progressBarAnotomy = anatomy.createAnatomy("progress-bar").parts(
-  "container",
-  "background",
-  "progress",
-  "description",
-  "disabledBackground"
-);
-var toastAnatomy = anatomy.createAnatomy("toast").parts(
-  "root",
-  "title",
-  "description",
-  "indicator",
-  "closeTrigger",
-  "actionTrigger"
-);
-var floatingActionButtonAnatomy = anatomy.createAnatomy(
-  "floating-action-button"
-).parts("root", "icon", "text");
-var popoverAnatomy = popover.popoverAnatomy.extendWith(
-  "header",
-  "body",
-  "footer"
-);
-var datepickerAnatomy = anatomy.createAnatomy("datepicker").parts(
-  "wrapper",
-  "calendarTriggerButton",
-  "arrow",
-  "calendarPopover",
-  "calendar",
-  "weekdays",
-  "weekend",
-  "dateCell",
-  "inputLabel",
-  "dateTimeSegment",
-  "cell",
-  "box",
-  "rangeCalendarPopover"
-);
-var checkboxCardAnatomy = anatomy.createAnatomy("checkbox-card", [
-  "root",
-  "control",
-  "label",
-  "description",
-  "addon",
-  "indicator",
-  "content"
-]);
-
-// src/theme/slot-recipes/datepicker.ts
-var datePickerSlotRecipe = react.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: date$1,
@@ -1958,8 +1464,7 @@ function CalendarCell({
   } = reactAria.useCalendarCell({ date: date$1 }, state, ref);
   const isOutsideMonth = !date.isSameMonth(currentMonth, date$1);
   const recipe = react.useSlotRecipe({
-    key: "datePicker",
-    recipe: datePickerSlotRecipe
+    key: "datePicker"
   });
   const styles = recipe({ variant });
   const stateProps = {};
@@ -2050,8 +1555,7 @@ function CalendarGrid({
   const weeksInMonth = date.getWeeksInMonth(state.visibleRange.start, locale);
   const weeksInMonthRange = Array.from({ length: weeksInMonth }).fill(0).map((_, i) => i);
   const recipe = react.useSlotRecipe({
-    key: "datePicker",
-    recipe: datePickerSlotRecipe
+    key: "datePicker"
   });
   const styles = recipe({ variant });
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { as: "table", ...gridProps, css: styles.box, children: [
@@ -2227,8 +1731,7 @@ function Calendar({
     createCalendar: date.createCalendar
   });
   const recipe = react.useSlotRecipe({
-    key: "datePicker",
-    recipe: datePickerSlotRecipe
+    key: "datePicker"
   });
   const styles = recipe({ variant });
   const { calendarProps } = reactAria.useCalendar(props, state);
@@ -2250,8 +1753,7 @@ var texts8 = createTexts({
 var CalendarTriggerButton = React28.forwardRef(({ variant, disabled, ariaLabelledby, ...buttonProps }, ref) => {
   const { t } = useTranslation();
   const recipe = react.useSlotRecipe({
-    key: "datePicker",
-    recipe: datePickerSlotRecipe
+    key: "datePicker"
   });
   const styles = recipe({ variant });
   return /* @__PURE__ */ jsxRuntime.jsx(react.PopoverAnchor, { ...buttonProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2285,8 +1787,7 @@ var DateTimeSegment = React28.forwardRef(
       ref
     );
     const recipe = react.useSlotRecipe({
-      key: "datePicker",
-      recipe: datePickerSlotRecipe
+      key: "datePicker"
     });
     const styles = recipe({
       isPlaceholder: segment.isPlaceholder,
@@ -2330,8 +1831,7 @@ var DateField = React28.forwardRef(
     var _a5;
     const locale = useCurrentLocale();
     const recipe = react.useSlotRecipe({
-      key: "datePicker",
-      recipe: datePickerSlotRecipe
+      key: "datePicker"
     });
     const styles = recipe({});
     const state = reactStately.useDateFieldState({
@@ -2423,8 +1923,7 @@ var StyledField = React28.forwardRef(
     const { invalid } = react.useFieldContext() ?? {
       };
     const recipe = react.useSlotRecipe({
-      key: "datePicker",
-      recipe: datePickerSlotRecipe
+      key: "datePicker"
     });
     const styles = recipe({ variant });
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2472,8 +1971,7 @@ var DatePicker = React28.forwardRef(
     const labelId = `label-${React28.useId()}`;
     const inputGroupId = `input-group-${React28.useId()}`;
     const recipe = react.useSlotRecipe({
-      key: "datePicker",
-      recipe: datePickerSlotRecipe
+      key: "datePicker"
     });
     const styles = recipe({ variant });
     const locale = useCurrentLocale();
@@ -2557,8 +2055,7 @@ function RangeCalendar(props) {
     createCalendar: date.createCalendar
   });
   const recipe = react.useSlotRecipe({
-    key: "datePicker",
-    recipe: datePickerSlotRecipe
+    key: "datePicker"
   });
   const styles = recipe({});
   const ref = React28.useRef(null);
@@ -2611,8 +2108,7 @@ function DateRangePicker({
     calendarProps
   } = reactAria.useDateRangePicker(props, state, ref);
   const recipe = react.useSlotRecipe({
-    key: "datePicker",
-    recipe: datePickerSlotRecipe
+    key: "datePicker"
   });
   const styles = recipe({ variant });
   const locale = useCurrentLocale();
@@ -3533,96 +3029,46 @@ function Option({ item, state }) {
       (event) => {
         event.preventDefault();
       },
-      { passive: false, once: true }
-    );
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(OptionContext.Provider, { value: { labelProps, descriptionProps }, children: /* @__PURE__ */ jsxRuntime.jsx(react.ListItem, { ...optionProps, ...dataFields, ref, css: styles.item, children: item.rendered }) });
-}
-var OptionContext = React28__namespace.default.createContext({
-  labelProps: {},
-  descriptionProps: {}
-});
-var useOptionContext = () => {
-  return React28.useContext(OptionContext);
-};
-function ListBoxSection({ section, state }) {
-  var _a5, _b4;
-  const { itemProps, headingProps, groupProps } = reactAria.useListBoxSection({
-    heading: section.rendered,
-    "aria-label": section["aria-label"]
-  });
-  const isFirstSection = section.key === state.collection.getFirstKey();
-  const titleColor = useColorModeValue("darkGrey", "white");
-  return /* @__PURE__ */ jsxRuntime.jsx(List, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.ListItem, { ...itemProps, listStyleType: "none", children: [
-    section.rendered && /* @__PURE__ */ jsxRuntime.jsx(
-      react.Box,
-      {
-        fontSize: "mobile.xs",
-        color: titleColor,
-        paddingX: 3,
-        paddingTop: 1,
-        marginTop: isFirstSection ? 0 : 2,
-        textTransform: "uppercase",
-        fontWeight: "bold",
-        ...headingProps,
-        children: section.rendered
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(List, { ...groupProps, padding: 0, listStyleType: "none", children: [...((_b4 = (_a5 = state.collection).getChildren) == null ? void 0 : _b4.call(_a5, section.key)) ?? []].map(
-      (item) => /* @__PURE__ */ jsxRuntime.jsx(Option, { item, state }, item.key)
-    ) })
-  ] }) });
-}
-var _a2, _b;
-var nativeSelectSlotRecipe = react.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__ */ jsxRuntime.jsx(OptionContext.Provider, { value: { labelProps, descriptionProps }, children: /* @__PURE__ */ jsxRuntime.jsx(react.ListItem, { ...optionProps, ...dataFields, ref, css: styles.item, children: item.rendered }) });
+}
+var OptionContext = React28__namespace.default.createContext({
+  labelProps: {},
+  descriptionProps: {}
 });
+var useOptionContext = () => {
+  return React28.useContext(OptionContext);
+};
+function ListBoxSection({ section, state }) {
+  var _a5, _b4;
+  const { itemProps, headingProps, groupProps } = reactAria.useListBoxSection({
+    heading: section.rendered,
+    "aria-label": section["aria-label"]
+  });
+  const isFirstSection = section.key === state.collection.getFirstKey();
+  const titleColor = useColorModeValue("darkGrey", "white");
+  return /* @__PURE__ */ jsxRuntime.jsx(List, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.ListItem, { ...itemProps, listStyleType: "none", children: [
+    section.rendered && /* @__PURE__ */ jsxRuntime.jsx(
+      react.Box,
+      {
+        fontSize: "mobile.xs",
+        color: titleColor,
+        paddingX: 3,
+        paddingTop: 1,
+        marginTop: isFirstSection ? 0 : 2,
+        textTransform: "uppercase",
+        fontWeight: "bold",
+        ...headingProps,
+        children: section.rendered
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(List, { ...groupProps, padding: 0, listStyleType: "none", children: [...((_b4 = (_a5 = state.collection).getChildren) == null ? void 0 : _b4.call(_a5, section.key)) ?? []].map(
+      (item) => /* @__PURE__ */ jsxRuntime.jsx(Option, { item, state }, item.key)
+    ) })
+  ] }) });
+}
 var NativeSelect = React28__namespace.forwardRef(function NativeSelect2(props, ref) {
   const {
     children,
@@ -3635,7 +3081,7 @@ var NativeSelect = React28__namespace.forwardRef(function NativeSelect2(props, r
     errorText,
     ...rest
   } = props;
-  const recipe = react.useSlotRecipe({ recipe: nativeSelectSlotRecipe });
+  const recipe = react.useSlotRecipe({ key: "nativeSelect" });
   const styles = recipe({ variant });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field3,
@@ -3670,67 +3116,6 @@ var NativeSelect = React28__namespace.forwardRef(function NativeSelect2(props, r
     }
   );
 });
-var numericStepperRecipe = react.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__namespace.default.forwardRef((props, ref) => {
   const {
     name: nameProp,
@@ -3749,7 +3134,7 @@ var NumericStepper = React28__namespace.default.forwardRef((props, ref) => {
   } = props;
   const addButtonRef = React28.useRef(null);
   const { t } = useTranslation();
-  const recipe = react.useSlotRecipe({ recipe: numericStepperRecipe });
+  const recipe = react.useSlotRecipe({ key: "numericStepper" });
   const styles = recipe();
   const [value, onChange] = react.useControllableState({
     value: valueProp,
@@ -3839,7 +3224,7 @@ var NumericStepper = React28__namespace.default.forwardRef((props, ref) => {
 });
 NumericStepper.displayName = "NumericStepper";
 var VerySmallButton = React28__namespace.default.forwardRef((props, ref) => {
-  const recipe = react.useSlotRecipe({ recipe: numericStepperRecipe });
+  const recipe = react.useSlotRecipe({ key: "numericStepper" });
   const styles = recipe({ colorPalette: "default" });
   return /* @__PURE__ */ jsxRuntime.jsx(
     IconButton,
@@ -4469,160 +3854,80 @@ var pressableCardRecipe = react.defineRecipe({
             backgroundColor: "core.surface.active",
             outlineWidth: tokens23__namespace.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 = react.chakra("button", pressableCardRecipe);
-var PressableCard = React28.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(PressableCardButton, { ...props, ref });
-  }
-);
-PressableCard.displayName = "PressableCard";
-var RadioCard = React28.forwardRef(
-  (props, ref) => {
-    const { inputProps, children, value, ariaLabel } = props;
-    return /* @__PURE__ */ jsxRuntime.jsxs(react.RadioCard.Item, { ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        react.RadioCard.ItemHiddenInput,
-        {
-          "aria-label": ariaLabel ?? value,
-          ref,
-          ...inputProps
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(react.RadioCard.ItemControl, { children })
-    ] });
-  }
-);
-RadioCard.displayName = "RadioCard";
-var RadioCardGroup = React28.forwardRef(
-  (props, ref) => {
-    const {
-      children,
-      variant,
-      gap = 2,
-      direction = "column",
-      display = "flex",
-      ...rest
-    } = props;
-    const recipe = react.useSlotRecipe({ key: "radio-card" });
-    const styles = recipe({ variant });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      react.RadioCard.Root,
-      {
-        ref,
-        variant,
-        css: styles,
-        display,
-        gap,
-        flexDirection: direction,
-        ...rest,
-        children
-      }
-    );
-  }
-);
-RadioCardGroup.displayName = "RadioCardGroup";
-var RadioCardLabel = react.RadioCard.Label;
-var separatorRecipe = react.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 = react.chakra("button", pressableCardRecipe);
+var PressableCard = React28.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(PressableCardButton, { ...props, ref });
+  }
+);
+PressableCard.displayName = "PressableCard";
+var RadioCard = React28.forwardRef(
+  (props, ref) => {
+    const { inputProps, children, value, ariaLabel } = props;
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.RadioCard.Item, { ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.RadioCard.ItemHiddenInput,
+        {
+          "aria-label": ariaLabel ?? value,
+          ref,
+          ...inputProps
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(react.RadioCard.ItemControl, { children })
+    ] });
+  }
+);
+RadioCard.displayName = "RadioCard";
+var RadioCardGroup = React28.forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      variant,
+      gap = 2,
+      direction = "column",
+      display = "flex",
+      ...rest
+    } = props;
+    const recipe = react.useSlotRecipe({ key: "radio-card" });
+    const styles = recipe({ variant });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      react.RadioCard.Root,
+      {
+        ref,
+        variant,
+        css: styles,
+        display,
+        gap,
+        flexDirection: direction,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+RadioCardGroup.displayName = "RadioCardGroup";
+var RadioCardLabel = react.RadioCard.Label;
 var Separator = React28.forwardRef(
   (props, ref) => {
     const {
@@ -4630,7 +3935,7 @@ var Separator = React28.forwardRef(
       variant = "solid",
       orientation = "horizontal"
     } = props;
-    const recipe = react.useRecipe({ recipe: separatorRecipe });
+    const recipe = react.useRecipe({ key: "seperator" });
     const styles = recipe({ size, variant, orientation });
     return /* @__PURE__ */ jsxRuntime.jsx(react.Separator, { css: styles, ...props, ref });
   }
@@ -6167,256 +5472,61 @@ var StepperStep = ({
   const disabled = state !== "active" && disabledOverride || state === "disabled";
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { css: style.stepContainer, children: [
     stepNumber > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-      sporIconReact.DropdownRightFill18Icon,
-      {
-        marginX: 5,
-        display: ["none", null, "block"],
-        color: iconColor
-      }
-    ),
-    disabled ? /* @__PURE__ */ jsxRuntime.jsx(
-      Text3,
-      {
-        variant: "xs",
-        fontSize: "1rem",
-        color: disabledTextColor,
-        cursor: "default",
-        paddingX: 2,
-        children
-      }
-    ) : /* @__PURE__ */ jsxRuntime.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 = React28.forwardRef((props, ref) => {
-  const { variant = "core", size = "sm" } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Tabs.Root, { ...props, ref, variant, size });
-});
-Tabs.displayName = "Tabs";
-var TabsList = react.Tabs.List;
-var TabsTrigger = react.Tabs.Trigger;
-var TabsIndicator = react.Tabs.Indicator;
-var TabsContent = react.Tabs.Content;
-var numericStyles = {
-  "&[data-is-numeric=true]": {
-    textAlign: "right"
-  }
-};
-var tableSlotRecipe = react.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"
-          }
-        }
+      sporIconReact.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__ */ jsxRuntime.jsx(
+      Text3,
+      {
+        variant: "xs",
+        fontSize: "1rem",
+        color: disabledTextColor,
+        cursor: "default",
+        paddingX: 2,
+        children
       }
-    }
+    ) : /* @__PURE__ */ jsxRuntime.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 = React28.forwardRef((props, ref) => {
+  const { variant = "core", size = "sm" } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Tabs.Root, { ...props, ref, variant, size });
 });
+Tabs.displayName = "Tabs";
+var TabsList = react.Tabs.List;
+var TabsTrigger = react.Tabs.Trigger;
+var TabsIndicator = react.Tabs.Indicator;
+var TabsContent = react.Tabs.Content;
 var Table = React28.forwardRef((props, ref) => {
   const { variant = "ghost", size, colorPalette = "green", children } = props;
-  const recipe = react.useSlotRecipe({ recipe: tableSlotRecipe });
+  const recipe = react.useSlotRecipe({ key: "table" });
   const styles = recipe({ variant, size });
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Table.Root,
@@ -6672,7 +5782,140 @@ var linkRecipe = react.defineRecipe({
     size: "sm"
   }
 });
-var _a3, _b2;
+var separatorRecipe = react.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 = react.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 = react.defineRecipe({
   className: "spor-textarea",
   base: {
@@ -6689,10 +5932,10 @@ var textareaRecipe = react.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
       }
     }
   }
@@ -6741,33 +5984,284 @@ var shadows = react.defineSemanticTokens.shadows({
   sm: {
     value: tokens23__namespace.default.depth.shadow.sm.value
   },
-  md: {
-    value: tokens23__namespace.default.depth.shadow.md.value
+  md: {
+    value: tokens23__namespace.default.depth.shadow.md.value
+  },
+  lg: {
+    value: tokens23__namespace.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__namespace.default.depth.shadow.lg.value
+  ["VyDigital" /* VyDigital */]: {
+    ...baseSemanticTokens,
+    colors: vyDigitalColors
   }
-});
+};
+var accordionAnatomy = anatomy.createAnatomy("accordion").parts(
+  "root",
+  "itemTrigger",
+  "item",
+  "itemBody",
+  "itemContent",
+  "itemIndicator"
+);
+var alertAnatomy = anatomy.createAnatomy("alert").parts(
+  "root",
+  "indicator",
+  "title",
+  "closeButton",
+  "content",
+  "description"
+);
+var alertExpandableAnatomy = anatomy.createAnatomy("alert-expandable").parts(
+  "root",
+  "itemTrigger",
+  "itemContent",
+  "indicator",
+  "title",
+  "itemIndicator"
+);
+var alertServiceAnatomy = anatomy.createAnatomy("service-alert").parts(
+  "root",
+  "itemTrigger",
+  "itemTriggerTitle",
+  "notificationText",
+  "itemContent",
+  "itemBody"
+);
+var listAnatomy = anatomy.createAnatomy("list").parts(
+  "root",
+  "item",
+  "icon",
+  "indicator"
+);
+var tableAnatomy = anatomy.createAnatomy("table").parts(
+  "root",
+  "body",
+  "row",
+  "cell",
+  "columnHeader",
+  "caption",
+  "footer",
+  "header"
+);
+var fieldAnatomy = anatomy.createAnatomy("field").parts(
+  "root",
+  "label",
+  "requiredIndicator",
+  "helperText",
+  "errorText"
+);
+var dialogAnatomy = anatomy.createAnatomy("dialog").parts(
+  "header",
+  "body",
+  "footer",
+  "backdrop",
+  "positioner",
+  "content",
+  "title",
+  "description",
+  "closeTrigger"
+);
+var paginationAnatomy = anatomy.createAnatomy("pagination").parts(
+  "list",
+  "item"
+);
+var linjetagAnatomy = anatomy.createAnatomy("linjetag").parts(
+  "iconContainer",
+  "icon",
+  "root",
+  "title",
+  "desc"
+);
+var infoTagAnatomy = anatomy.createAnatomy("info-tag").parts(
+  "container",
+  "iconContainer",
+  "icon",
+  "textContainer",
+  "title",
+  "description",
+  "walk"
+);
+var travelTagAnatomy = anatomy.createAnatomy("travel-tag").parts(
+  "container",
+  "iconContainer",
+  "icon",
+  "textContainer",
+  "title",
+  "description",
+  "deviationIcon"
+);
+var drawerAnatomy = anatomy.createAnatomy("drawer").parts(
+  "header",
+  "body",
+  "backdrop",
+  "positioner",
+  "content",
+  "footer",
+  "title",
+  "description",
+  "closeTrigger"
+);
+var checkboxAnatomy = anatomy.createAnatomy("checkbox").parts(
+  "root",
+  "control",
+  "label",
+  "description",
+  "addon",
+  "indicator",
+  "content"
+);
+var breadcrumbAnatomy = anatomy.createAnatomy("breadcrumb").parts(
+  "link",
+  "currentLink",
+  "list",
+  "separator"
+);
+var stepperAnatomy = anatomy.createAnatomy("stepper").parts(
+  "root",
+  "container",
+  "innerContainer",
+  "title",
+  "stepCounter",
+  "stepContainer",
+  "stepButton",
+  "stepNumber",
+  "stepTitle",
+  "closeButton",
+  "backButton"
+);
+var radioCardAnatomy = anatomy.createAnatomy("radio-card").parts(
+  "root",
+  "item",
+  "label",
+  "itemText",
+  "itemDescription",
+  "itemContent"
+);
+var radioAnatomy = anatomy.createAnatomy("radio").parts(
+  "root",
+  "item",
+  "itemControl",
+  "itemText",
+  "label"
+);
+var listBoxAnatomy = anatomy.createAnatomy("listbox").parts(
+  "root",
+  "item",
+  "label",
+  "description"
+);
+var NativeSelectAnatomy = anatomy.createAnatomy("native-select").parts(
+  "root",
+  "field",
+  "icon"
+);
+var tabsAnatomy = anatomy.createAnatomy("tabs").parts(
+  "root",
+  "list",
+  "trigger",
+  "content",
+  "indicator"
+);
+var switchAnatomy = anatomy.createAnatomy("switch").parts(
+  "root",
+  "thumb",
+  "control",
+  "label"
+);
+var selectAnatomy = anatomy.createAnatomy("select").parts(
+  "root",
+  "trigger",
+  "indicatorGroup",
+  "indicator",
+  "selectContent",
+  "item",
+  "control",
+  "itemText",
+  "itemDescription",
+  "itemGroup",
+  "itemGroupLabel",
+  "label",
+  "valueText"
+);
+anatomy.createAnatomy("card-select").parts(
+  "trigger",
+  "card"
+);
+var numericStepperAnatomy = anatomy.createAnatomy("numeric-stepper").parts(
+  "root",
+  "container",
+  "input",
+  "text",
+  "button"
+);
+var mediaControllerAnatomy = anatomy.createAnatomy(
+  "media-controller-button"
+).parts("root", "icon");
+var progressBarAnotomy = anatomy.createAnatomy("progress-bar").parts(
+  "container",
+  "background",
+  "progress",
+  "description",
+  "disabledBackground"
+);
+var toastAnatomy = anatomy.createAnatomy("toast").parts(
+  "root",
+  "title",
+  "description",
+  "indicator",
+  "closeTrigger",
+  "actionTrigger"
+);
+var floatingActionButtonAnatomy = anatomy.createAnatomy(
+  "floating-action-button"
+).parts("root", "icon", "text");
+var popoverAnatomy = popover.popoverAnatomy.extendWith(
+  "header",
+  "body",
+  "footer"
+);
+var datepickerAnatomy = anatomy.createAnatomy("datepicker").parts(
+  "wrapper",
+  "calendarTriggerButton",
+  "arrow",
+  "calendarPopover",
+  "calendar",
+  "weekdays",
+  "weekend",
+  "dateCell",
+  "inputLabel",
+  "dateTimeSegment",
+  "cell",
+  "box",
+  "rangeCalendarPopover"
+);
+var checkboxCardAnatomy = anatomy.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 = react.defineSlotRecipe({
   className: "spor-accordion",
   slots: accordionAnatomy.keys(),
@@ -7320,139 +6814,345 @@ var choiceChipSlotRecipe = react.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 = react.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 = react.defineSlotRecipe({
@@ -8236,7 +7936,7 @@ var travelTagSlotRecipe = react.defineSlotRecipe({
 });
 
 // src/theme/slot-recipes/info-tag.ts
-var _a4, _b3, _c, _d;
+var _a3, _b2, _c, _d;
 var infoTagSlotRecipe = react.defineSlotRecipe({
   slots: infoTagAnatomy.keys(),
   className: "spor-info-tag",
@@ -8273,9 +7973,9 @@ var infoTagSlotRecipe = react.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"
         }
@@ -8648,29 +8348,140 @@ var mediaControllerSlotRecipe = react.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 = react.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 = react.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 = react.defineSlotRecipe({
   slots: paginationAnatomy.keys(),
@@ -9474,6 +9285,201 @@ var switchSlotRecipe = react.defineSlotRecipe({
     }
   }
 });
+var numericStyles = {
+  "&[data-is-numeric=true]": {
+    textAlign: "right"
+  }
+};
+var tableSlotRecipe = react.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 = react.defineSlotRecipe({
   slots: tabsAnatomy.keys(),
   className: "spor-tabs",
@@ -10876,6 +10882,7 @@ exports.RadioCard = RadioCard;
 exports.RadioCardGroup = RadioCardGroup;
 exports.RadioCardLabel = RadioCardLabel;
 exports.RadioGroup = RadioGroup;
+exports.RangeCalendar = RangeCalendar;
 exports.SearchInput = SearchInput;
 exports.Select = Select;
 exports.SelectContent = SelectContent;