@vygruppen/spor-react 12.2.0 → 12.2.1

package/dist/index.mjs

@@ -1,8 +1,8 @@
-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 as Field$1, 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, Fieldset as Fieldset$1, InputElement, Input as Input$1, List as List$1, ListItem, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, Switch as Switch$1, Textarea as Textarea$1, FieldLabel as FieldLabel$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, Center, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, VisuallyHidden, defineConfig, useCheckbox, 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 as Field$1, 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, InputElement, Input as Input$1, List as List$1, ListItem, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, Switch as Switch$1, Textarea as Textarea$1, FieldLabel as FieldLabel$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, Center, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, VisuallyHidden, defineConfig, ChakraProvider, Toaster as Toaster$1, Toast, Icon } from '@chakra-ui/react';
 export { Box, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableBody, TableCaption, TableCell, TableColumn, 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, CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, DropdownDownFill18Icon, ServiceFill24Icon, WarningFill24Icon, DropdownRightFill18Icon, CalendarOutline24Icon, ArrowLeftFill24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill24Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, LinkOutOutline24Icon, QuestionFill24Icon, ErrorOutline24Icon, SuccessFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, DropdownLeftFill18Icon, SuccessFill18Icon } from '@vygruppen/spor-icon-react';
-import * as React28 from 'react';
-import React28__default, { forwardRef, createContext, useId, cloneElement, useEffect, useRef, useState, isValidElement, useMemo, useLayoutEffect, useContext } from 'react';
+import * as React29 from 'react';
+import React29__default, { forwardRef, createContext, useId, cloneElement, useEffect, useRef, useState, isValidElement, useMemo, useLayoutEffect, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { spinnerColorData, inlineLoaderColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, spinnerLightData, spinnerDarkData, fullScreenLoaderBlackData, inlineLoaderLightData } from '@vygruppen/spor-loader';
 import ReactLottie from 'lottie-react';
@@ -540,7 +540,7 @@ var skeletonRecipe = defineRecipe({
     }
   }
 });
-var SkeletonCircle = React28.forwardRef(function SkeletonCircle2(props, ref) {
+var SkeletonCircle = React29.forwardRef(function SkeletonCircle2(props, ref) {
   const recipe = useRecipe({ recipe: skeletonRecipe });
   const [recipeProps, restProps] = recipe.splitVariantProps({
     loading: true,
@@ -816,7 +816,7 @@ var codeRecipie = defineRecipe({
   }
 });
 var StyledCode = chakra(Code$1, codeRecipie);
-var Code = React28__default.forwardRef(
+var Code = React29__default.forwardRef(
   function Code2(props, ref) {
     return /* @__PURE__ */ jsx(StyledCode, { ...props, ref });
   }
@@ -850,7 +850,7 @@ var Text3 = forwardRef(
     return /* @__PURE__ */ jsx(Text, { ...rest, textStyle: variant, ref });
   }
 );
-var ClipboardIcon = React28.forwardRef((props, ref) => {
+var ClipboardIcon = React29.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     Clipboard$1.Indicator,
     {
@@ -862,7 +862,7 @@ var ClipboardIcon = React28.forwardRef((props, ref) => {
   );
 });
 ClipboardIcon.displayName = "ClipboardIcon";
-var ClipboardCopyText = React28.forwardRef((props, ref) => {
+var ClipboardCopyText = React29.forwardRef((props, ref) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsx(
     Clipboard$1.Indicator,
@@ -875,7 +875,7 @@ var ClipboardCopyText = React28.forwardRef((props, ref) => {
   );
 });
 ClipboardCopyText.displayName = "ClipboardCopyText";
-var ClipboardButton = React28.forwardRef((props, ref) => {
+var ClipboardButton = React29.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(Clipboard$1.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { ref, size: "xs", leftIcon: /* @__PURE__ */ jsx(ClipboardIcon, {}), ...props, children: /* @__PURE__ */ jsx(ClipboardCopyText, {}) }) });
 });
 ClipboardButton.displayName = "ClipboardButton";
@@ -959,7 +959,7 @@ var FloatingActionButton = forwardRef(
     placement = "bottom right",
     ...props
   }, ref) => {
-    const [isTextVisible, setIsTextVisible] = React28__default.useState(
+    const [isTextVisible, setIsTextVisible] = React29__default.useState(
       externalIsTextVisible === void 0 ? false : externalIsTextVisible
     );
     const scrollDirection = useScrollDirection();
@@ -1000,11 +1000,11 @@ var FloatingActionButton = forwardRef(
 );
 FloatingActionButton.displayName = "FloatingActionButton";
 var useScrollDirection = () => {
-  const [scrollDirection, setScrollDirection] = React28__default.useState(null);
-  const lastScrollPosition = React28__default.useRef(
+  const [scrollDirection, setScrollDirection] = React29__default.useState(null);
+  const lastScrollPosition = React29__default.useRef(
     globalThis.window === void 0 ? 0 : window.scrollY
   );
-  React28__default.useEffect(() => {
+  React29__default.useEffect(() => {
     const onScroll = () => {
       const delta = window.scrollY - lastScrollPosition.current;
       if (delta === 0) {
@@ -1322,12 +1322,12 @@ var texts6 = createTexts({
 });
 var Breadcrumb = forwardRef(
   ({ children, ...props }, ref) => {
-    const validChildren = React28__default.Children.toArray(children).filter(
-      (element) => React28__default.isValidElement(element)
+    const validChildren = React29__default.Children.toArray(children).filter(
+      (element) => React29__default.isValidElement(element)
     );
     return /* @__PURE__ */ jsx(Breadcrumb$1.Root, { ref, ...props, children: /* @__PURE__ */ jsx(Breadcrumb$1.List, { children: validChildren.map((child, index) => {
       const isLast = index === validChildren.length - 1;
-      return /* @__PURE__ */ jsxs(React28__default.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React29__default.Fragment, { children: [
         /* @__PURE__ */ jsx(Breadcrumb$1.Item, { children: child }),
         !isLast && /* @__PURE__ */ jsx(Breadcrumb$1.Separator, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(DropdownRightFill18Icon, {}) })
       ] }, index);
@@ -1357,7 +1357,7 @@ function ColorModeIcon() {
   const { colorMode } = useColorMode();
   return colorMode === "dark" ? /* @__PURE__ */ jsx(LuMoon, {}) : /* @__PURE__ */ jsx(LuSun, {});
 }
-var ColorModeButton = React28.forwardRef(function ColorModeButton2(props, ref) {
+var ColorModeButton = React29.forwardRef(function ColorModeButton2(props, ref) {
   const { toggleColorMode } = useColorMode();
   return /* @__PURE__ */ jsx(ClientOnly$1, { fallback: /* @__PURE__ */ jsx(Skeleton$1, { boxSize: "8" }), children: /* @__PURE__ */ jsx(
     IconButton$1,
@@ -1378,7 +1378,7 @@ var ColorModeButton = React28.forwardRef(function ColorModeButton2(props, ref) {
     }
   ) });
 });
-var Field = React28.forwardRef(
+var Field = React29.forwardRef(
   (props, ref) => {
     const { label, children, helperText, errorText, ...rest } = props;
     const recipe = useSlotRecipe({ key: "field" });
@@ -1392,7 +1392,7 @@ var Field = React28.forwardRef(
   }
 );
 Field.displayName = "Field";
-var FieldErrorText = React28.forwardRef((props, ref) => {
+var FieldErrorText = React29.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(Field$1.ErrorText, { ref, children: props.children });
 });
 FieldErrorText.displayName = "FieldErrorText";
@@ -1637,6 +1637,15 @@ var datepickerAnatomy = createAnatomy("datepicker").parts(
   "box",
   "rangeCalendarPopover"
 );
+var checkboxCardAnatomy = createAnatomy("checkbox-card", [
+  "root",
+  "control",
+  "label",
+  "description",
+  "addon",
+  "indicator",
+  "content"
+]);
 
 // src/theme/slot-recipes/datepicker.ts
 var datePickerSlotRecipe = defineSlotRecipe({
@@ -2740,7 +2749,7 @@ var texts11 = createTexts({
 function useFieldContext4() {
   throw new Error("Function not implemented.");
 }
-var DialogContent = React28.forwardRef((props, ref) => {
+var DialogContent = React29.forwardRef((props, ref) => {
   const {
     children,
     portalled = true,
@@ -2754,7 +2763,7 @@ var DialogContent = React28.forwardRef((props, ref) => {
   ] });
 });
 DialogContent.displayName = "DialogContent";
-var DialogCloseTrigger = React28.forwardRef(function DialogCloseTrigger2(props, ref) {
+var DialogCloseTrigger = React29.forwardRef(function DialogCloseTrigger2(props, ref) {
   return /* @__PURE__ */ jsx(Dialog.CloseTrigger, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { size: "md" }) });
 });
 var DialogRoot = Dialog.Root;
@@ -2953,7 +2962,7 @@ var CardSelectTrigger = forwardRef(
   }
 );
 CardSelectTrigger.displayName = "CardSelectTrigger";
-var Checkbox = React28.forwardRef(
+var Checkbox = React29.forwardRef(
   (props, ref) => {
     const { children, inputProps, rootRef, ...rest } = props;
     return /* @__PURE__ */ jsxs(Checkbox$1.Root, { ref: rootRef, ...rest, children: [
@@ -2971,184 +2980,19 @@ var CheckboxGroup = forwardRef(
   }
 );
 CheckboxGroup.displayName = "CheckboxGroup";
-var choiceChipRecipe = defineRecipe({
-  base: {
-    display: "inline-flex",
-    alignItems: "center",
-    boxAlign: "center",
-    fontSize: "xs",
-    cursor: "pointer",
-    transitionProperty: "all",
-    borderRadius: "xl",
-    transitionDuration: "fast",
-    height: 6,
-    paddingInlineStart: "2",
-    paddingInlineEnd: "2",
-    outline: "1px solid",
-    outlineColor: "base.outline",
-    _checked: {
-      backgroundColor: "brand.surface",
-      borderRadius: "sm",
-      outline: "none",
-      color: "brand.text",
-      _hover: {
-        backgroundColor: "brand.surface.hover",
-        _active: {
-          backgroundColor: "brand.surface.active"
-        }
-      }
-    },
-    _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"
-        }
-      }
-    }
-  },
-  variants: {
-    variant: {
-      core: {
-        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: {
-        backgroundColor: "accent.surface",
-        color: "accent.text",
-        outline: "none",
-        _hover: {
-          backgroundColor: "accent.surface.hover",
-          _active: {
-            backgroundColor: "accent.surface.active"
-          }
-        }
-      },
-      floating: {
-        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"
-          }
-        }
-      }
-    },
-    size: {
-      xs: {
-        _checked: {
-          borderRadius: "0.563rem"
-        },
-        height: 5,
-        paddingX: 1.5
-      },
-      sm: {
-        _checked: {
-          borderRadius: "sm"
-        },
-        height: 6,
-        paddingX: 2
-      },
-      md: {
-        _checked: {
-          borderRadius: "sm"
-        },
-        height: 7,
-        paddingX: 2
-      },
-      lg: {
-        _checked: {
-          borderRadius: "md"
-        },
-        height: 8,
-        paddingX: 3
-      }
-    }
+var ChoiceChip = forwardRef(
+  ({ children, icon, ...rootProps }, ref) => {
+    return /* @__PURE__ */ jsx(CheckboxCard.Root, { ...rootProps, children: /* @__PURE__ */ jsx(CheckboxCard.Context, { children: ({ checked }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(CheckboxCard.HiddenInput, { ref }),
+      /* @__PURE__ */ jsx(CheckboxCard.Control, { children: /* @__PURE__ */ jsx(CheckboxCard.Content, { children: /* @__PURE__ */ jsxs(CheckboxCard.Label, { children: [
+        icon && /* @__PURE__ */ jsx(Span, { width: "24px", children: checked ? icon.checked : icon.default }),
+        rootProps.chipType !== "icon" && children,
+        rootProps.chipType === "filter" && checked && /* @__PURE__ */ jsx(CloseOutline24Icon, {})
+      ] }) }) })
+    ] }) }) });
   }
-});
-var ChoiceChipStyledDiv = chakra("div", choiceChipRecipe);
-var ChoiceChip = ({
-  children,
-  icon,
-  size = "sm",
-  chipType = "choice",
-  variant = "core",
-  ...props
-}) => {
-  const {
-    getControlProps,
-    disabled,
-    getLabelProps,
-    getHiddenInputProps,
-    setChecked,
-    checked
-  } = useCheckbox(props);
-  return /* @__PURE__ */ jsxs(
-    chakra.label,
-    {
-      ...getLabelProps(),
-      "aria-label": props["aria-label"] ?? String(children),
-      children: [
-        /* @__PURE__ */ jsx(
-          chakra.input,
-          {
-            ...getHiddenInputProps(),
-            disabled,
-            defaultChecked: checked,
-            value: checked ? "on" : "off",
-            type: "checkbox",
-            "aria-checked": checked,
-            onClick: () => {
-              setChecked(!checked);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxs(ChoiceChipStyledDiv, { ...getControlProps(), size, variant, children: [
-          icon && /* @__PURE__ */ jsx(Span, { children: checked ? icon.checked : icon.default }),
-          chipType !== "icon" && /* @__PURE__ */ jsx(Span, { children }),
-          chipType === "filter" && checked && /* @__PURE__ */ jsx(CloseOutline24Icon, { marginLeft: 1.5 })
-        ] })
-      ]
-    }
-  );
-};
+);
+ChoiceChip.displayName = "ChoiceChip";
 var Popover = forwardRef(
   ({
     children,
@@ -3453,7 +3297,7 @@ var inputRecipe = defineRecipe({
     variant: "core"
   }
 });
-var InputGroup = React28.forwardRef(
+var InputGroup = React29.forwardRef(
   (props, ref) => {
     const {
       startElement,
@@ -3474,7 +3318,7 @@ var InputGroup = React28.forwardRef(
           children: startElement
         }
       ),
-      React28.cloneElement(children, {
+      React29.cloneElement(children, {
         ...children.props
       }),
       label && /* @__PURE__ */ jsx(FieldLabel, { left: startElement ? 4 : "0", right: endElement ? 4 : 0, children: label }),
@@ -3594,7 +3438,7 @@ function Option({ item, state }) {
   }, []);
   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({
+var OptionContext = React29__default.createContext({
   labelProps: {},
   descriptionProps: {}
 });
@@ -3814,7 +3658,7 @@ var nativeSelectSlotRecipe = defineSlotRecipe({
     }
   }
 });
-var NativeSelect = React28.forwardRef(function NativeSelect2(props, ref) {
+var NativeSelect = React29.forwardRef(function NativeSelect2(props, ref) {
   const {
     children,
     variant = "core",
@@ -3904,7 +3748,7 @@ var numericStepperRecipe = defineSlotRecipe({
     }
   }
 });
-var NumericStepper = React28__default.forwardRef(
+var NumericStepper = React29__default.forwardRef(
   ({
     name: nameProp,
     id: idProp,
@@ -4011,7 +3855,7 @@ var NumericStepper = React28__default.forwardRef(
   }
 );
 NumericStepper.displayName = "NumericStepper";
-var VerySmallButton = React28__default.forwardRef((props, ref) => {
+var VerySmallButton = React29__default.forwardRef((props, ref) => {
   const recipe = useSlotRecipe({ recipe: numericStepperRecipe });
   const styles = recipe({ colorPalette: "default" });
   return /* @__PURE__ */ jsx(
@@ -4139,7 +3983,7 @@ var PasswordInput = forwardRef(
   }
 );
 PasswordInput.displayName = "PasswordInput";
-var VisibilityTrigger = React28__default.forwardRef(
+var VisibilityTrigger = React29__default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(
       Button$1,
@@ -4373,7 +4217,7 @@ var texts17 = createTexts({
     en: "Reset search field"
   }
 });
-var Select = React28.forwardRef(
+var Select = React29.forwardRef(
   (props, ref) => {
     const { variant = "core", children, positioning, label, ...rest } = props;
     const recipe = useSlotRecipe({ key: "select" });
@@ -4397,7 +4241,7 @@ var Select = React28.forwardRef(
   }
 );
 Select.displayName = "Select";
-var SelectItem = React28.forwardRef(
+var SelectItem = React29.forwardRef(
   (props, ref) => {
     const { item, children, description, ...rest } = props;
     const recipe = useSlotRecipe({ key: "select" });
@@ -4412,14 +4256,14 @@ var SelectItem = React28.forwardRef(
   }
 );
 SelectItem.displayName = "SelectItem";
-var SelectItemGroup = React28.forwardRef(function SelectItemGroup2(props, ref) {
+var SelectItemGroup = React29.forwardRef(function SelectItemGroup2(props, ref) {
   const { children, label, ...rest } = props;
   return /* @__PURE__ */ jsxs(Select$1.ItemGroup, { ...rest, ref, children: [
     /* @__PURE__ */ jsx(Select$1.ItemGroupLabel, { children: label }),
     children
   ] });
 });
-var SelectTrigger = React28.forwardRef(function SelectTrigger2(props, ref) {
+var SelectTrigger = React29.forwardRef(function SelectTrigger2(props, ref) {
   const { children, clearable, ...rest } = props;
   const recipe = useSlotRecipe({ key: "select" });
   const styles = recipe();
@@ -4431,7 +4275,7 @@ var SelectTrigger = React28.forwardRef(function SelectTrigger2(props, ref) {
     ] })
   ] });
 });
-var SelectClearTrigger = React28.forwardRef(function SelectClearTrigger2(props, ref) {
+var SelectClearTrigger = React29.forwardRef(function SelectClearTrigger2(props, ref) {
   return /* @__PURE__ */ jsx(Select$1.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ jsx(
     CloseButton,
     {
@@ -4442,11 +4286,11 @@ var SelectClearTrigger = React28.forwardRef(function SelectClearTrigger2(props,
     }
   ) });
 });
-var SelectContent = React28.forwardRef(function SelectContent2(props, ref) {
+var SelectContent = React29.forwardRef(function SelectContent2(props, ref) {
   const { portalled = true, portalRef, ...rest } = props;
   return /* @__PURE__ */ jsx(Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsx(Select$1.Positioner, { children: /* @__PURE__ */ jsx(Select$1.Content, { ...rest, ref }) }) });
 });
-var SelectValueText = React28.forwardRef(function SelectValueText2(props, ref) {
+var SelectValueText = React29.forwardRef(function SelectValueText2(props, ref) {
   const { children, withPlaceholder, placeholder, ...rest } = props;
   return /* @__PURE__ */ jsx(
     Select$1.ValueText,
@@ -5669,16 +5513,16 @@ NudgeTrigger.displayName = "NudgeTrigger";
 var NudgeContent = forwardRef(
   ({ showCloseButton = true, children, ...props }, ref) => {
     const [currentStep, setCurrentStep] = useState(1);
-    const childrenArray = React28__default.Children.toArray(children);
+    const childrenArray = React29__default.Children.toArray(children);
     const { open } = usePopoverContext$1();
     useEffect(() => {
       setCurrentStep(1);
     }, [children, open]);
     const wizardPages = childrenArray.filter(
-      (child) => React28__default.isValidElement(child) && child.type.displayName === "NudgeWizardStep"
+      (child) => React29__default.isValidElement(child) && child.type.displayName === "NudgeWizardStep"
     );
     const restChildren = childrenArray.filter(
-      (child) => !React28__default.isValidElement(child) || child.type.displayName !== "NudgeWizardStep"
+      (child) => !React29__default.isValidElement(child) || child.type.displayName !== "NudgeWizardStep"
     );
     const totalSteps = wizardPages.length;
     const isLastStep = totalSteps === currentStep;
@@ -5767,7 +5611,7 @@ NudgeCloseTrigger.displayName = "NudgeCloseTrigger";
 var [RootPropsProvider, useRootProps] = createContext$1({
   name: "RootPropsProvider"
 });
-var Pagination = React28.forwardRef(
+var Pagination = React29.forwardRef(
   (props, ref) => {
     const { getHref, children, ...rest } = props;
     const recipe = useSlotRecipe({ key: "pagination" });
@@ -5792,11 +5636,11 @@ var Pagination = React28.forwardRef(
   }
 );
 Pagination.displayName = "Pagination";
-var PaginationEllipsis = React28.forwardRef((props, ref) => {
+var PaginationEllipsis = React29.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(ListItem2, { children: /* @__PURE__ */ jsx(Pagination$1.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsx(Box, { cursor: "default", children: "..." }) }) });
 });
 PaginationEllipsis.displayName = "PaginationEllipsis";
-var PaginationItem = React28.forwardRef((props, ref) => {
+var PaginationItem = React29.forwardRef((props, ref) => {
   const rootProps = useRootProps();
   const { t } = useTranslation();
   const { page, totalPages } = usePaginationContext();
@@ -5829,7 +5673,7 @@ var PaginationItem = React28.forwardRef((props, ref) => {
   ) });
 });
 PaginationItem.displayName = "PaginationItem";
-var PaginationPrevTrigger = React28.forwardRef((props, ref) => {
+var PaginationPrevTrigger = React29.forwardRef((props, ref) => {
   const { page } = usePaginationContext();
   const recipe = useSlotRecipe({ key: "pagination" });
   const styles = recipe();
@@ -5869,7 +5713,7 @@ var PaginationPrevTrigger = React28.forwardRef((props, ref) => {
   ) });
 });
 PaginationPrevTrigger.displayName = "PaginationPrevTrigger";
-var PaginationNextTrigger = React28.forwardRef((props, ref) => {
+var PaginationNextTrigger = React29.forwardRef((props, ref) => {
   const { page, totalPages } = usePaginationContext();
   const recipe = useSlotRecipe({ key: "pagination" });
   const styles = recipe();
@@ -5957,7 +5801,7 @@ PopoverTrigger.displayName = "PopoverTrigger";
 var PopoverContent = forwardRef(
   ({ children, showCloseButton = false, ...props }, ref) => {
     const { colorMode } = useColorMode();
-    const closeButtonRef = React28__default.useRef(null);
+    const closeButtonRef = React29__default.useRef(null);
     const { open } = usePopoverContext();
     useEffect(() => {
       if (showCloseButton && open && closeButtonRef.current) {
@@ -6167,7 +6011,7 @@ var SporProvider = ({
     children
   ] }) }) });
 };
-var StepperContext = React28__default.createContext(null);
+var StepperContext = React29__default.createContext(null);
 var StepperProvider = ({
   activeStep,
   children,
@@ -6184,7 +6028,7 @@ var StepperProvider = ({
   );
 };
 var useStepper = () => {
-  const context = React28__default.useContext(StepperContext);
+  const context = React29__default.useContext(StepperContext);
   if (!context) {
     throw new Error(
       "useStepper must be used within a StepperProvider. Most likely, you forgot to wrap your StepperStep in a Stepper component"
@@ -7497,6 +7341,170 @@ var checkboxSlotRecipe = defineSlotRecipe({
     }
   }
 });
+var choiceChipSlotRecipe = defineSlotRecipe({
+  slots: checkboxCardAnatomy.keys(),
+  className: "chakra-checkbox-card",
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      boxAlign: "center",
+      fontSize: "xs",
+      cursor: "pointer",
+      transitionProperty: "all",
+      borderRadius: "xl",
+      transitionDuration: "fast",
+      paddingInlineStart: "2",
+      paddingInlineEnd: "2",
+      outline: "1px solid",
+      outlineColor: "base.outline",
+      _checked: {
+        backgroundColor: "brand.surface",
+        borderRadius: "sm",
+        outline: "none",
+        color: "brand.text",
+        _hover: {
+          backgroundColor: "brand.surface.hover",
+          _active: {
+            backgroundColor: "brand.surface.active"
+          }
+        }
+      },
+      _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 dialogSlotRecipe = defineSlotRecipe({
   slots: dialogAnatomy.keys(),
   className: "spor-dialog",
@@ -9819,7 +9827,8 @@ var slotRecipes = {
   table: tableSlotRecipe,
   tabs: tabsSlotRecipe,
   travelTag: travelTagSlotRecipe,
-  toast: toastSlotRecipe
+  toast: toastSlotRecipe,
+  checkboxCard: choiceChipSlotRecipe
 };
 var animations = defineTokens.animations({
   spin: {