@vygruppen/spor-react 12.2.0 → 12.2.1

package/dist/index.js

@@ -2,7 +2,7 @@
 
 var react = require('@chakra-ui/react');
 var sporIconReact = require('@vygruppen/spor-icon-react');
-var React28 = require('react');
+var React29 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var sporLoader = require('@vygruppen/spor-loader');
 var ReactLottie = require('lottie-react');
@@ -45,7 +45,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React28__namespace = /*#__PURE__*/_interopNamespace(React28);
+var React29__namespace = /*#__PURE__*/_interopNamespace(React29);
 var ReactLottie__default = /*#__PURE__*/_interopDefault(ReactLottie);
 var tokens20__namespace = /*#__PURE__*/_interopNamespace(tokens20);
 var cargonetJson__default = /*#__PURE__*/_interopDefault(cargonetJson);
@@ -86,7 +86,7 @@ var warnAboutMismatchingIcon = ({
     }
   }
 };
-var Accordion = React28.forwardRef(
+var Accordion = React29.forwardRef(
   (props, ref) => {
     const { variant = "core", children, gap = 2, ...rest } = props;
     const recipe = react.useSlotRecipe({ key: "accordion" });
@@ -103,7 +103,7 @@ var Accordion = React28.forwardRef(
     );
   }
 );
-var AccordionItemTrigger = React28.forwardRef(function AccordionItemTrigger2(props, ref) {
+var AccordionItemTrigger = React29.forwardRef(function AccordionItemTrigger2(props, ref) {
   const { startElement, children, headingLevel, ...rest } = props;
   warnAboutMismatchingIcon({ icon: startElement });
   const recipe = react.useSlotRecipe({ key: "accordion" });
@@ -116,7 +116,7 @@ var AccordionItemTrigger = React28.forwardRef(function AccordionItemTrigger2(pro
     /* @__PURE__ */ jsxRuntime.jsx(react.Accordion.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.DropdownDownFill24Icon, {}) })
   ] }) });
 });
-var AccordionItemContent = React28.forwardRef(function AccordionItemContent2(props, ref) {
+var AccordionItemContent = React29.forwardRef(function AccordionItemContent2(props, ref) {
   const { children } = props;
   const recipe = react.useSlotRecipe({ key: "accordion" });
   const styles = recipe();
@@ -124,7 +124,7 @@ var AccordionItemContent = React28.forwardRef(function AccordionItemContent2(pro
 });
 Accordion.displayName = "Accordion";
 var AccordionItem = react.Accordion.Item;
-var Expandable = React28.forwardRef(
+var Expandable = React29.forwardRef(
   (props, ref) => {
     const { title, children, headingLevel, startElement, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(Accordion, { ...props, ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -169,7 +169,7 @@ var Language = /* @__PURE__ */ ((Language3) => {
   Language3["English"] = "en";
   return Language3;
 })(Language || {});
-var LanguageContext = React28.createContext(void 0);
+var LanguageContext = React29.createContext(void 0);
 function LanguageProvider({
   language,
   children
@@ -177,7 +177,7 @@ function LanguageProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(LanguageContext.Provider, { value: language, children });
 }
 function useLanguage() {
-  const language = React28.useContext(LanguageContext);
+  const language = React29.useContext(LanguageContext);
   if (!language) {
     throw new Error("Please wrap your application in a LanguageProvider");
   }
@@ -195,8 +195,8 @@ function createTexts(texts27) {
 }
 var hydrating = true;
 function useHydrated() {
-  const [hydrated, setHydrated] = React28.useState(() => !hydrating);
-  React28.useEffect(function hydrate() {
+  const [hydrated, setHydrated] = React29.useState(() => !hydrating);
+  React29.useEffect(function hydrate() {
     hydrating = false;
     setHydrated(true);
   }, []);
@@ -339,11 +339,11 @@ var LightSpinner = ({
   ] });
 };
 var useRotatingLabel = ({ label, delay }) => {
-  const loadingTextArray = React28.useMemo(
+  const loadingTextArray = React29.useMemo(
     () => Array.isArray(label) ? label : [label],
     [label]
   );
-  const [currentLoadingTextIndex, setCurrentLoadingTextIndex] = React28.useState(0);
+  const [currentLoadingTextIndex, setCurrentLoadingTextIndex] = React29.useState(0);
   usehooksTs.useInterval(() => {
     setCurrentLoadingTextIndex(
       (prevIndex) => (prevIndex + 1) % loadingTextArray.length
@@ -351,7 +351,7 @@ var useRotatingLabel = ({ label, delay }) => {
   }, delay);
   return loadingTextArray[currentLoadingTextIndex];
 };
-var ProgressBar = React28.forwardRef(
+var ProgressBar = React29.forwardRef(
   ({
     value,
     label,
@@ -397,9 +397,9 @@ var progressLoaderRecipe = react.defineRecipe({
   }
 });
 var usePathLength = (value) => {
-  const pathRef = React28.useRef(null);
-  const [pathLength, setPathLength] = React28.useState(0);
-  React28.useEffect(() => {
+  const pathRef = React29.useRef(null);
+  const [pathLength, setPathLength] = React29.useState(0);
+  React29.useEffect(() => {
     if (pathRef.current) {
       const totalLength = pathRef.current.getTotalLength();
       setPathLength(totalLength);
@@ -409,7 +409,7 @@ var usePathLength = (value) => {
   return { pathRef, pathLength, progressOffset };
 };
 var ProgressLoaderWrapper = react.chakra("div", progressLoaderRecipe);
-var ProgressLoader = React28.forwardRef(
+var ProgressLoader = React29.forwardRef(
   ({
     value,
     label,
@@ -433,7 +433,7 @@ var ProgressLoader = React28.forwardRef(
       pathLength: progressPathLength,
       progressOffset
     } = usePathLength(value);
-    const id = React28.useId();
+    const id = React29.useId();
     return /* @__PURE__ */ jsxRuntime.jsxs(
       ProgressLoaderWrapper,
       {
@@ -565,7 +565,7 @@ var skeletonRecipe = react.defineRecipe({
     }
   }
 });
-var SkeletonCircle = React28__namespace.forwardRef(function SkeletonCircle2(props, ref) {
+var SkeletonCircle = React29__namespace.forwardRef(function SkeletonCircle2(props, ref) {
   const recipe = react.useRecipe({ recipe: skeletonRecipe });
   const [recipeProps, restProps] = recipe.splitVariantProps({
     loading: true,
@@ -575,7 +575,7 @@ var SkeletonCircle = React28__namespace.forwardRef(function SkeletonCircle2(prop
   const { size, css, ...rest } = restProps;
   return /* @__PURE__ */ jsxRuntime.jsx(react.Circle, { size, asChild: true, ref, children: /* @__PURE__ */ jsxRuntime.jsx(react.Skeleton, { css: { ...recipe(recipeProps), ...css }, ...rest }) });
 });
-var SkeletonText = React28.forwardRef(
+var SkeletonText = React29.forwardRef(
   function SkeletonText2(props, ref) {
     const recipe = react.useRecipe({ recipe: skeletonRecipe });
     const [recipeProps, restProps] = recipe.splitVariantProps({
@@ -596,7 +596,7 @@ var SkeletonText = React28.forwardRef(
     )) });
   }
 );
-var Skeleton = React28.forwardRef(
+var Skeleton = React29.forwardRef(
   function SkeletonText3(props, ref) {
     const recipe = react.useRecipe({ recipe: skeletonRecipe });
     const [recipeProps, restProps] = recipe.splitVariantProps({
@@ -634,7 +634,7 @@ var LoadingContent = ({
     loadingText && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: loadingText })
   ] })
 ] });
-var Button = React28.forwardRef(
+var Button = React29.forwardRef(
   ({
     loading,
     disabled,
@@ -667,7 +667,7 @@ var Button = React28.forwardRef(
         variant,
         size,
         ...rest,
-        children: rest.asChild ? React28.cloneElement(children, {
+        children: rest.asChild ? React29.cloneElement(children, {
           children: renderContent()
         }) : renderContent()
       }
@@ -701,7 +701,7 @@ var groupRecipe = react.defineRecipe({
   }
 });
 var Group = react.chakra(react.Group, groupRecipe);
-var ButtonGroup = React28.forwardRef(
+var ButtonGroup = React29.forwardRef(
   (props, ref) => {
     const { children, disabled, grow, attached, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -718,7 +718,7 @@ var ButtonGroup = React28.forwardRef(
   }
 );
 ButtonGroup.displayName = "ButtonGroup";
-var Badge = React28.forwardRef(function Badge2({ icon, children, ...props }, ref) {
+var Badge = React29.forwardRef(function Badge2({ icon, children, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Badge, { ref, ...props, children: [
     children,
     icon && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: icon })
@@ -841,12 +841,12 @@ var codeRecipie = react.defineRecipe({
   }
 });
 var StyledCode = react.chakra(react.Code, codeRecipie);
-var Code = React28__namespace.default.forwardRef(
+var Code = React29__namespace.default.forwardRef(
   function Code2(props, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(StyledCode, { ...props, ref });
   }
 );
-var Heading = React28.forwardRef(
+var Heading = React29.forwardRef(
   function Heading2(props, ref) {
     const {
       as,
@@ -869,13 +869,13 @@ var Heading = React28.forwardRef(
     );
   }
 );
-var Text3 = React28.forwardRef(
+var Text3 = React29.forwardRef(
   function Text4(props, ref) {
     const { variant = "sm", ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(react.Text, { ...rest, textStyle: variant, ref });
   }
 );
-var ClipboardIcon = React28__namespace.forwardRef((props, ref) => {
+var ClipboardIcon = React29__namespace.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Clipboard.Indicator,
     {
@@ -887,7 +887,7 @@ var ClipboardIcon = React28__namespace.forwardRef((props, ref) => {
   );
 });
 ClipboardIcon.displayName = "ClipboardIcon";
-var ClipboardCopyText = React28__namespace.forwardRef((props, ref) => {
+var ClipboardCopyText = React29__namespace.forwardRef((props, ref) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Clipboard.Indicator,
@@ -900,7 +900,7 @@ var ClipboardCopyText = React28__namespace.forwardRef((props, ref) => {
   );
 });
 ClipboardCopyText.displayName = "ClipboardCopyText";
-var ClipboardButton = React28__namespace.forwardRef((props, ref) => {
+var ClipboardButton = React29__namespace.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Clipboard.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ref, size: "xs", leftIcon: /* @__PURE__ */ jsxRuntime.jsx(ClipboardIcon, {}), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ClipboardCopyText, {}) }) });
 });
 ClipboardButton.displayName = "ClipboardButton";
@@ -919,7 +919,7 @@ var texts3 = createTexts({
     sv: "Kopierad"
   }
 });
-var IconButton = React28.forwardRef(
+var IconButton = React29.forwardRef(
   (props, ref) => {
     const { icon, size = "sm", loading = false, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -936,7 +936,7 @@ var IconButton = React28.forwardRef(
   }
 );
 IconButton.displayName = "IconButton";
-var CloseButton = React28.forwardRef(
+var CloseButton = React29.forwardRef(
   ({ size = "sm", ...props }, ref) => {
     const { t } = useTranslation();
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -975,7 +975,7 @@ var texts4 = createTexts({
     sv: "St\xE4ng"
   }
 });
-var FloatingActionButton = React28.forwardRef(
+var FloatingActionButton = React29.forwardRef(
   ({
     children,
     icon,
@@ -984,11 +984,11 @@ var FloatingActionButton = React28.forwardRef(
     placement = "bottom right",
     ...props
   }, ref) => {
-    const [isTextVisible, setIsTextVisible] = React28__namespace.default.useState(
+    const [isTextVisible, setIsTextVisible] = React29__namespace.default.useState(
       externalIsTextVisible === void 0 ? false : externalIsTextVisible
     );
     const scrollDirection = useScrollDirection();
-    React28.useEffect(() => {
+    React29.useEffect(() => {
       if (externalIsTextVisible !== void 0) {
         return;
       }
@@ -998,7 +998,7 @@ var FloatingActionButton = React28.forwardRef(
       );
       return () => globalThis.clearTimeout(id);
     }, [scrollDirection, externalIsTextVisible]);
-    React28.useEffect(() => {
+    React29.useEffect(() => {
       setIsTextVisible(!!externalIsTextVisible);
     }, [externalIsTextVisible]);
     const recipe = react.useSlotRecipe({ key: "floatingActionButton" });
@@ -1025,11 +1025,11 @@ var FloatingActionButton = React28.forwardRef(
 );
 FloatingActionButton.displayName = "FloatingActionButton";
 var useScrollDirection = () => {
-  const [scrollDirection, setScrollDirection] = React28__namespace.default.useState(null);
-  const lastScrollPosition = React28__namespace.default.useRef(
+  const [scrollDirection, setScrollDirection] = React29__namespace.default.useState(null);
+  const lastScrollPosition = React29__namespace.default.useRef(
     globalThis.window === void 0 ? 0 : window.scrollY
   );
-  React28__namespace.default.useEffect(() => {
+  React29__namespace.default.useEffect(() => {
     const onScroll = () => {
       const delta = window.scrollY - lastScrollPosition.current;
       if (delta === 0) {
@@ -1135,7 +1135,7 @@ var texts5 = createTexts({
     en: "Service"
   }
 });
-var Alert = React28.forwardRef((props, ref) => {
+var Alert = React29.forwardRef((props, ref) => {
   const {
     title,
     showIndicator = true,
@@ -1182,7 +1182,7 @@ var Alert = React28.forwardRef((props, ref) => {
   ] });
 });
 Alert.displayName = "Alert";
-var ExpandableAlert = React28.forwardRef(
+var ExpandableAlert = React29.forwardRef(
   (props, ref) => {
     const {
       variant = "info",
@@ -1243,7 +1243,7 @@ var ExpandableAlert = React28.forwardRef(
   }
 );
 ExpandableAlert.displayName = "ExpandableAlert";
-var ServiceAlert = React28.forwardRef(
+var ServiceAlert = React29.forwardRef(
   (props, ref) => {
     const {
       variant = "service",
@@ -1345,14 +1345,14 @@ var texts6 = createTexts({
     en: "Traffic announcement"
   }
 });
-var Breadcrumb = React28.forwardRef(
+var Breadcrumb = React29.forwardRef(
   ({ children, ...props }, ref) => {
-    const validChildren = React28__namespace.default.Children.toArray(children).filter(
-      (element) => React28__namespace.default.isValidElement(element)
+    const validChildren = React29__namespace.default.Children.toArray(children).filter(
+      (element) => React29__namespace.default.isValidElement(element)
     );
     return /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.Root, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.List, { children: validChildren.map((child, index) => {
       const isLast = index === validChildren.length - 1;
-      return /* @__PURE__ */ jsxRuntime.jsxs(React28__namespace.default.Fragment, { children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(React29__namespace.default.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.Item, { children: child }),
         !isLast && /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.Separator, { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.DropdownRightFill18Icon, {}) })
       ] }, index);
@@ -1382,7 +1382,7 @@ function ColorModeIcon() {
   const { colorMode } = useColorMode();
   return colorMode === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(lu.LuMoon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lu.LuSun, {});
 }
-var ColorModeButton = React28__namespace.forwardRef(function ColorModeButton2(props, ref) {
+var ColorModeButton = React29__namespace.forwardRef(function ColorModeButton2(props, ref) {
   const { toggleColorMode } = useColorMode();
   return /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { fallback: /* @__PURE__ */ jsxRuntime.jsx(react.Skeleton, { boxSize: "8" }), children: /* @__PURE__ */ jsxRuntime.jsx(
     react.IconButton,
@@ -1403,7 +1403,7 @@ var ColorModeButton = React28__namespace.forwardRef(function ColorModeButton2(pr
     }
   ) });
 });
-var Field = React28__namespace.forwardRef(
+var Field = React29__namespace.forwardRef(
   (props, ref) => {
     const { label, children, helperText, errorText, ...rest } = props;
     const recipe = react.useSlotRecipe({ key: "field" });
@@ -1417,7 +1417,7 @@ var Field = React28__namespace.forwardRef(
   }
 );
 Field.displayName = "Field";
-var FieldErrorText = React28__namespace.forwardRef((props, ref) => {
+var FieldErrorText = React29__namespace.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Field.ErrorText, { ref, children: props.children });
 });
 FieldErrorText.displayName = "FieldErrorText";
@@ -1662,6 +1662,15 @@ var datepickerAnatomy = anatomy.createAnatomy("datepicker").parts(
   "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({
@@ -1876,7 +1885,7 @@ function CalendarCell({
   currentMonth,
   variant
 }) {
-  const ref = React28.useRef(null);
+  const ref = React29.useRef(null);
   const {
     cellProps,
     buttonProps,
@@ -1904,7 +1913,7 @@ function CalendarCell({
   if (isOutsideMonth) {
     stateProps["data-unavailable"] = true;
   }
-  React28.useEffect(() => {
+  React29.useEffect(() => {
     var _a5;
     (_a5 = ref.current) == null ? void 0 : _a5.addEventListener(
       "touchend",
@@ -2015,7 +2024,7 @@ function CalendarNavigationButton({
   "aria-label": ariaLabel,
   ...rest
 }) {
-  const ref = React28.useRef(null);
+  const ref = React29.useRef(null);
   const { buttonProps } = reactAria.useButton(rest, ref);
   return /* @__PURE__ */ jsxRuntime.jsx(
     IconButton,
@@ -2176,7 +2185,7 @@ var texts8 = createTexts({
     en: "Calendar"
   }
 });
-var CalendarTriggerButton = React28.forwardRef(({ variant, disabled, ariaLabelledby, ...buttonProps }) => {
+var CalendarTriggerButton = React29.forwardRef(({ variant, disabled, ariaLabelledby, ...buttonProps }) => {
   const { t } = useTranslation();
   const recipe = react.useSlotRecipe({
     key: "datePicker",
@@ -2204,9 +2213,9 @@ var texts9 = createTexts({
     en: "Open calendar"
   }
 });
-var DateTimeSegment = React28.forwardRef(
+var DateTimeSegment = React29.forwardRef(
   ({ segment, state, ariaLabel, ariaDescription }, externalRef) => {
-    const internalRef = React28.useRef(null);
+    const internalRef = React29.useRef(null);
     const ref = externalRef ?? internalRef;
     const { segmentProps } = reactAria.useDateSegment(
       segment,
@@ -2254,7 +2263,7 @@ function createCalendar2(identifier) {
     }
   }
 }
-var DateField = React28.forwardRef(
+var DateField = React29.forwardRef(
   ({ labelId, ...props }, externalRef) => {
     var _a5;
     const locale = useCurrentLocale();
@@ -2269,7 +2278,7 @@ var DateField = React28.forwardRef(
       createCalendar: createCalendar2
     });
     const { t } = useTranslation();
-    const internalRef = React28.useRef(null);
+    const internalRef = React29.useRef(null);
     const ref = externalRef ?? internalRef;
     const { fieldProps } = reactAria.useDateField(
       props,
@@ -2346,7 +2355,7 @@ var getAriaLabel = (segmentType) => {
     }
   }
 };
-var StyledField = React28.forwardRef(
+var StyledField = React29.forwardRef(
   function StyledField2(props, ref) {
     const { children, variant, isDisabled, ariaLabelledby, ...otherProps } = props;
     const { invalid } = react.useFieldContext() ?? {
@@ -2370,7 +2379,7 @@ var StyledField = React28.forwardRef(
     );
   }
 );
-var DatePicker = React28.forwardRef(
+var DatePicker = React29.forwardRef(
   ({
     variant,
     errorMessage,
@@ -2388,15 +2397,15 @@ var DatePicker = React28.forwardRef(
       isRequired: props.isRequired ?? (chakraFieldProps == null ? void 0 : chakraFieldProps.required),
       validationState: (chakraFieldProps == null ? void 0 : chakraFieldProps.invalid) ? "invalid" : "valid"
     });
-    const internalRef = React28.useRef(null);
+    const internalRef = React29.useRef(null);
     const ref = externalRef ?? internalRef;
     const { labelProps, fieldProps, buttonProps, dialogProps, calendarProps } = reactAria.useDatePicker(
       props,
       state,
       ref
     );
-    const labelId = `label-${React28.useId()}`;
-    const inputGroupId = `input-group-${React28.useId()}`;
+    const labelId = `label-${React29.useId()}`;
+    const inputGroupId = `input-group-${React29.useId()}`;
     const recipe = react.useSlotRecipe({
       key: "datePicker",
       recipe: datePickerSlotRecipe
@@ -2485,7 +2494,7 @@ function RangeCalendar(props) {
     recipe: datePickerSlotRecipe
   });
   const styles = recipe({});
-  const ref = React28.useRef(null);
+  const ref = React29.useRef(null);
   const { calendarProps, title } = reactAria.useRangeCalendar(props, state, ref);
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { ...calendarProps, ref, css: styles.rangeCalendarPopover, children: [
     /* @__PURE__ */ jsxRuntime.jsx(CalendarHeader, { state, title }),
@@ -2517,7 +2526,7 @@ function DateRangePicker({
     isRequired: props.isRequired ?? (fieldContextPRops == null ? void 0 : fieldContextPRops.required),
     validationState: (fieldContextPRops == null ? void 0 : fieldContextPRops.invalid) ? "invalid" : "valid"
   });
-  const ref = React28.useRef(null);
+  const ref = React29.useRef(null);
   const uniqueId = reactAria.useId();
   const datePickerId = `date-range-picker-${uniqueId}`;
   const {
@@ -2595,7 +2604,7 @@ function DateRangePicker({
   ] }) });
 }
 var TimeField = ({ state, ...props }) => {
-  const ref = React28.useRef(null);
+  const ref = React29.useRef(null);
   const { labelProps, fieldProps } = reactAria.useTimeField(props, state, ref);
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2765,7 +2774,7 @@ var texts11 = createTexts({
 function useFieldContext4() {
   throw new Error("Function not implemented.");
 }
-var DialogContent = React28__namespace.forwardRef((props, ref) => {
+var DialogContent = React29__namespace.forwardRef((props, ref) => {
   const {
     children,
     portalled = true,
@@ -2779,7 +2788,7 @@ var DialogContent = React28__namespace.forwardRef((props, ref) => {
   ] });
 });
 DialogContent.displayName = "DialogContent";
-var DialogCloseTrigger = React28__namespace.forwardRef(function DialogCloseTrigger2(props, ref) {
+var DialogCloseTrigger = React29__namespace.forwardRef(function DialogCloseTrigger2(props, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Dialog.CloseTrigger, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "md" }) });
 });
 var DialogRoot = react.Dialog.Root;
@@ -2794,7 +2803,7 @@ var DialogActionTrigger = react.Dialog.ActionTrigger;
 var [RootDrawerProvider, useRootDrawerProps] = react.createContext({
   name: "RootDrawerProvider"
 });
-var DrawerContent = React28.forwardRef(
+var DrawerContent = React29.forwardRef(
   (props, ref) => {
     const { children, portalled = true, portalRef, ...rest } = props;
     const { size, placement } = useRootDrawerProps();
@@ -2807,7 +2816,7 @@ var DrawerContent = React28.forwardRef(
   }
 );
 DrawerContent.displayName = "DrawerContent";
-var CloseDrawerLine = React28.forwardRef((props, ref) => {
+var CloseDrawerLine = React29.forwardRef((props, ref) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Drawer.CloseTrigger,
@@ -2834,17 +2843,17 @@ var CloseDrawerLine = React28.forwardRef((props, ref) => {
   );
 });
 CloseDrawerLine.displayName = "CloseDrawerLine";
-var DrawerCloseTrigger = React28.forwardRef(function DrawerCloseTrigger2(props, ref) {
+var DrawerCloseTrigger = React29.forwardRef(function DrawerCloseTrigger2(props, ref) {
   const { size } = useRootDrawerProps();
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxRuntime.jsx(react.Drawer.CloseTrigger, { ref, ...props, asChild: true, children: size === "full" ? /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", leftIcon: /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.CloseFill24Icon, {}), children: t(texts12.close) }) : /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "md" }) });
 });
-var DrawerBackTrigger = React28.forwardRef((props, ref) => {
+var DrawerBackTrigger = React29.forwardRef((props, ref) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxRuntime.jsx(react.Drawer.CloseTrigger, { asChild: true, ...props, ref, top: "0", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", leftIcon: /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.ArrowLeftFill24Icon, {}), children: t(texts12.back) }) });
 });
 DrawerBackTrigger.displayName = "DrawerBackTrigger";
-var DrawerFullScreenHeader = React28.forwardRef((props, ref) => {
+var DrawerFullScreenHeader = React29.forwardRef((props, ref) => {
   const { backTrigger = true, title } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(react.Drawer.Header, { ...props, ref, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(react.Grid, { templateColumns: "1fr auto 1fr", height: "auto", paddingX: "8", children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.GridItem, { width: "full", alignSelf: "center", children: backTrigger && /* @__PURE__ */ jsxRuntime.jsx(DrawerBackTrigger, {}) }),
@@ -2923,7 +2932,7 @@ var attachedInputsRecipe = react.defineRecipe({
   }
 });
 var StyledGroup = react.chakra(react.Group, attachedInputsRecipe);
-var AttachedInputs = React28.forwardRef(
+var AttachedInputs = React29.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(StyledGroup, { ref, attached: true, ...props });
   }
@@ -2932,7 +2941,7 @@ AttachedInputs.displayName = "AttachedInputs";
 var CardSelect = ({ size = "md", ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Root, { size, ...props });
 };
-var CardSelectContent = React28.forwardRef(
+var CardSelectContent = React29.forwardRef(
   ({ children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Content, { ref, padding: 0, bg: "none", children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Body, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
       StaticCard,
@@ -2953,7 +2962,7 @@ var bgActiveStyleMap = {
   ghost: "ghost.surface.active",
   floating: "floating.surface.active"
 };
-var CardSelectTrigger = React28.forwardRef(
+var CardSelectTrigger = React29.forwardRef(
   ({ icon, variant = "core", withChevron = true, size, children, ...props }, ref) => {
     const ChevronIcon = size === "sm" ? sporIconReact.DropdownDownFill18Icon : sporIconReact.DropdownDownFill24Icon;
     const { open } = react.usePopoverContext();
@@ -2978,7 +2987,7 @@ var CardSelectTrigger = React28.forwardRef(
   }
 );
 CardSelectTrigger.displayName = "CardSelectTrigger";
-var Checkbox = React28__namespace.forwardRef(
+var Checkbox = React29__namespace.forwardRef(
   (props, ref) => {
     const { children, inputProps, rootRef, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(react.Checkbox.Root, { ref: rootRef, ...rest, children: [
@@ -2989,192 +2998,27 @@ var Checkbox = React28__namespace.forwardRef(
   }
 );
 Checkbox.displayName = "Checkbox";
-var CheckboxGroup = React28.forwardRef(
+var CheckboxGroup = React29.forwardRef(
   (props, ref) => {
     const { direction = "row", children, gap = 1, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxGroup, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { direction, gap, children }) });
   }
 );
 CheckboxGroup.displayName = "CheckboxGroup";
-var choiceChipRecipe = react.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 = React29.forwardRef(
+  ({ children, icon, ...rootProps }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Root, { ...rootProps, children: /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Context, { children: ({ checked }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.HiddenInput, { ref }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.CheckboxCard.Label, { children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { width: "24px", children: checked ? icon.checked : icon.default }),
+        rootProps.chipType !== "icon" && children,
+        rootProps.chipType === "filter" && checked && /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.CloseOutline24Icon, {})
+      ] }) }) })
+    ] }) }) });
   }
-});
-var ChoiceChipStyledDiv = react.chakra("div", choiceChipRecipe);
-var ChoiceChip = ({
-  children,
-  icon,
-  size = "sm",
-  chipType = "choice",
-  variant = "core",
-  ...props
-}) => {
-  const {
-    getControlProps,
-    disabled,
-    getLabelProps,
-    getHiddenInputProps,
-    setChecked,
-    checked
-  } = react.useCheckbox(props);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    react.chakra.label,
-    {
-      ...getLabelProps(),
-      "aria-label": props["aria-label"] ?? String(children),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          react.chakra.input,
-          {
-            ...getHiddenInputProps(),
-            disabled,
-            defaultChecked: checked,
-            value: checked ? "on" : "off",
-            type: "checkbox",
-            "aria-checked": checked,
-            onClick: () => {
-              setChecked(!checked);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(ChoiceChipStyledDiv, { ...getControlProps(), size, variant, children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { children: checked ? icon.checked : icon.default }),
-          chipType !== "icon" && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { children }),
-          chipType === "filter" && checked && /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.CloseOutline24Icon, { marginLeft: 1.5 })
-        ] })
-      ]
-    }
-  );
-};
-var Popover = React28.forwardRef(
+);
+ChoiceChip.displayName = "ChoiceChip";
+var Popover = React29.forwardRef(
   ({
     children,
     state,
@@ -3188,7 +3032,7 @@ var Popover = React28.forwardRef(
     containerPadding = 12
   }, ref) => {
     var _a5;
-    const internalRef = React28.useRef(null);
+    const internalRef = React29.useRef(null);
     const popoverRef = ref ?? internalRef;
     const { popoverProps, underlayProps } = reactAria.usePopover(
       {
@@ -3226,7 +3070,7 @@ var Popover = React28.forwardRef(
   }
 );
 Popover.displayName = "Popover";
-var Combobox = React28.forwardRef(
+var Combobox = React29.forwardRef(
   (props) => {
     const {
       label,
@@ -3255,11 +3099,11 @@ var Combobox = React28.forwardRef(
       variant
     } = props;
     const { contains } = reactAria.useFilter({ sensitivity: "base" });
-    const fallbackInputRef = React28.useRef(null);
+    const fallbackInputRef = React29.useRef(null);
     const inputRef = externalInputRef ?? fallbackInputRef;
-    const listBoxRef = React28.useRef(null);
-    const popoverRef = React28.useRef(null);
-    const listboxId = `${React28.useId()}-listbox`;
+    const listBoxRef = React29.useRef(null);
+    const popoverRef = React29.useRef(null);
+    const listboxId = `${React29.useId()}-listbox`;
     const inputWidth = useInputWidth(inputRef);
     const state = reactStately.useComboBoxState({
       defaultFilter: contains,
@@ -3364,8 +3208,8 @@ var Combobox = React28.forwardRef(
 );
 Combobox.displayName = "Combobox";
 var useInputWidth = (inputRef) => {
-  const [inputWidth, setInputWidth] = React28.useState("auto");
-  React28.useEffect(() => {
+  const [inputWidth, setInputWidth] = React29.useState("auto");
+  React29.useEffect(() => {
     const onResize = debounce(() => {
       if (inputRef.current) {
         setInputWidth(`${inputRef.current.offsetWidth}px`);
@@ -3478,7 +3322,7 @@ var inputRecipe = react.defineRecipe({
     variant: "core"
   }
 });
-var InputGroup = React28__namespace.forwardRef(
+var InputGroup = React29__namespace.forwardRef(
   (props, ref) => {
     const {
       startElement,
@@ -3499,7 +3343,7 @@ var InputGroup = React28__namespace.forwardRef(
           children: startElement
         }
       ),
-      React28__namespace.cloneElement(children, {
+      React29__namespace.cloneElement(children, {
         ...children.props
       }),
       label && /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { left: startElement ? 4 : "0", right: endElement ? 4 : 0, children: label }),
@@ -3509,7 +3353,7 @@ var InputGroup = React28__namespace.forwardRef(
 );
 InputGroup.displayName = "InputGroup";
 var StyledInput = react.chakra(react.Input, inputRecipe);
-var Input = React28.forwardRef(
+var Input = React29.forwardRef(
   ({
     startElement,
     endElement,
@@ -3545,7 +3389,7 @@ var Input = React28.forwardRef(
   }
 );
 Input.displayName = "Input";
-var ListBox = React28.forwardRef(
+var ListBox = React29.forwardRef(
   (props) => {
     const { loading, listBoxRef, state, maxWidth, variant, children } = props;
     const { listBoxProps } = reactAria.useListBox(props, state, listBoxRef);
@@ -3582,7 +3426,7 @@ function ItemDescription({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { ...descriptionProps, css: styles, fontSize: "xs", children });
 }
 function Option({ item, state }) {
-  const ref = React28.useRef(null);
+  const ref = React29.useRef(null);
   const {
     optionProps,
     isSelected,
@@ -3607,7 +3451,7 @@ function Option({ item, state }) {
   if (isFocusVisible) {
     dataFields["data-focus-visible"] = true;
   }
-  React28.useEffect(() => {
+  React29.useEffect(() => {
     var _a5;
     (_a5 = ref == null ? void 0 : ref.current) == null ? void 0 : _a5.addEventListener(
       "touchend",
@@ -3619,12 +3463,12 @@ function Option({ item, state }) {
   }, []);
   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({
+var OptionContext = React29__namespace.default.createContext({
   labelProps: {},
   descriptionProps: {}
 });
 var useOptionContext = () => {
-  return React28.useContext(OptionContext);
+  return React29.useContext(OptionContext);
 };
 function ListBoxSection({ section, state }) {
   var _a5, _b4;
@@ -3839,7 +3683,7 @@ var nativeSelectSlotRecipe = react.defineSlotRecipe({
     }
   }
 });
-var NativeSelect = React28__namespace.forwardRef(function NativeSelect2(props, ref) {
+var NativeSelect = React29__namespace.forwardRef(function NativeSelect2(props, ref) {
   const {
     children,
     variant = "core",
@@ -3929,7 +3773,7 @@ var numericStepperRecipe = react.defineSlotRecipe({
     }
   }
 });
-var NumericStepper = React28__namespace.default.forwardRef(
+var NumericStepper = React29__namespace.default.forwardRef(
   ({
     name: nameProp,
     id: idProp,
@@ -3944,7 +3788,7 @@ var NumericStepper = React28__namespace.default.forwardRef(
     showZero = false,
     ariaLabelContext = { singular: "", plural: "" }
   }) => {
-    const addButtonRef = React28.useRef(null);
+    const addButtonRef = React29.useRef(null);
     const { t } = useTranslation();
     const recipe = react.useSlotRecipe({ recipe: numericStepperRecipe });
     const styles = recipe();
@@ -4036,7 +3880,7 @@ var NumericStepper = React28__namespace.default.forwardRef(
   }
 );
 NumericStepper.displayName = "NumericStepper";
-var VerySmallButton = React28__namespace.default.forwardRef((props, ref) => {
+var VerySmallButton = React29__namespace.default.forwardRef((props, ref) => {
   const recipe = react.useSlotRecipe({ recipe: numericStepperRecipe });
   const styles = recipe({ colorPalette: "default" });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4119,7 +3963,7 @@ var texts13 = createTexts({
     };
   }
 });
-var PasswordInput = React28.forwardRef(
+var PasswordInput = React29.forwardRef(
   (props, ref) => {
     const {
       defaultVisible,
@@ -4164,7 +4008,7 @@ var PasswordInput = React28.forwardRef(
   }
 );
 PasswordInput.displayName = "PasswordInput";
-var VisibilityTrigger = React28__namespace.default.forwardRef(
+var VisibilityTrigger = React29__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       react.Button,
@@ -4210,7 +4054,7 @@ var sortedCallingCodes = awesomePhonenumber.getSupportedCallingCodes().sort((a,
 var callingCodes = react.createListCollection({
   items: [...prioritizedCountryCodes, ...sortedCallingCodes]
 });
-var CountryCodeSelect = React28.forwardRef((props, ref) => {
+var CountryCodeSelect = React29.forwardRef((props, ref) => {
   const { t } = useTranslation();
   if (props.allowedCountryCodes) {
     callingCodes.items = callingCodes.items.filter(
@@ -4243,7 +4087,7 @@ var texts15 = createTexts({
     sv: "Landskod"
   }
 });
-var PhoneNumberInput = React28.forwardRef((props, ref) => {
+var PhoneNumberInput = React29.forwardRef((props, ref) => {
   const {
     label: externalLabel,
     value: externalValue,
@@ -4339,7 +4183,7 @@ var texts16 = createTexts({
     sv: "Landskod"
   }
 });
-var Radio = React28.forwardRef((props, ref) => {
+var Radio = React29.forwardRef((props, ref) => {
   const { children, inputProps, rootRef, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs(react.RadioGroup.Item, { ref: rootRef, ...rest, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.RadioGroup.ItemHiddenInput, { ref, ...inputProps }),
@@ -4348,13 +4192,13 @@ var Radio = React28.forwardRef((props, ref) => {
   ] });
 });
 Radio.displayName = "Radio";
-var RadioGroup = React28.forwardRef(
+var RadioGroup = React29.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(react.RadioGroup.Root, { ref, ...props, "aria-labelledby": "" });
   }
 );
 RadioGroup.displayName = "RadioGroup";
-var SearchInput = React28.forwardRef(
+var SearchInput = React29.forwardRef(
   (props, ref) => {
     const { t } = useTranslation();
     const { variant = "core", onReset, label, value } = props;
@@ -4398,7 +4242,7 @@ var texts17 = createTexts({
     en: "Reset search field"
   }
 });
-var Select = React28__namespace.forwardRef(
+var Select = React29__namespace.forwardRef(
   (props, ref) => {
     const { variant = "core", children, positioning, label, ...rest } = props;
     const recipe = react.useSlotRecipe({ key: "select" });
@@ -4422,7 +4266,7 @@ var Select = React28__namespace.forwardRef(
   }
 );
 Select.displayName = "Select";
-var SelectItem = React28__namespace.forwardRef(
+var SelectItem = React29__namespace.forwardRef(
   (props, ref) => {
     const { item, children, description, ...rest } = props;
     const recipe = react.useSlotRecipe({ key: "select" });
@@ -4437,14 +4281,14 @@ var SelectItem = React28__namespace.forwardRef(
   }
 );
 SelectItem.displayName = "SelectItem";
-var SelectItemGroup = React28__namespace.forwardRef(function SelectItemGroup2(props, ref) {
+var SelectItemGroup = React29__namespace.forwardRef(function SelectItemGroup2(props, ref) {
   const { children, label, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Select.ItemGroup, { ...rest, ref, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.Select.ItemGroupLabel, { children: label }),
     children
   ] });
 });
-var SelectTrigger = React28__namespace.forwardRef(function SelectTrigger2(props, ref) {
+var SelectTrigger = React29__namespace.forwardRef(function SelectTrigger2(props, ref) {
   const { children, clearable, ...rest } = props;
   const recipe = react.useSlotRecipe({ key: "select" });
   const styles = recipe();
@@ -4456,7 +4300,7 @@ var SelectTrigger = React28__namespace.forwardRef(function SelectTrigger2(props,
     ] })
   ] });
 });
-var SelectClearTrigger = React28__namespace.forwardRef(function SelectClearTrigger2(props, ref) {
+var SelectClearTrigger = React29__namespace.forwardRef(function SelectClearTrigger2(props, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Select.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ jsxRuntime.jsx(
     CloseButton,
     {
@@ -4467,11 +4311,11 @@ var SelectClearTrigger = React28__namespace.forwardRef(function SelectClearTrigg
     }
   ) });
 });
-var SelectContent = React28__namespace.forwardRef(function SelectContent2(props, ref) {
+var SelectContent = React29__namespace.forwardRef(function SelectContent2(props, ref) {
   const { portalled = true, portalRef, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsxRuntime.jsx(react.Select.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Select.Content, { ...rest, ref }) }) });
 });
-var SelectValueText = React28__namespace.forwardRef(function SelectValueText2(props, ref) {
+var SelectValueText = React29__namespace.forwardRef(function SelectValueText2(props, ref) {
   const { children, withPlaceholder, placeholder, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Select.ValueText,
@@ -4496,7 +4340,7 @@ var SelectValueText = React28__namespace.forwardRef(function SelectValueText2(pr
 var SelectLabel = react.Select.Label;
 var SelectItemText = react.Select.ItemText;
 var SelectRoot = react.Select.Root;
-var Switch = React28.forwardRef((props) => {
+var Switch = React29.forwardRef((props) => {
   const { rootRef, size = "md", label, ...rest } = props;
   const recipe = react.useSlotRecipe({ key: "switch" });
   const styles = recipe({ size });
@@ -4517,9 +4361,9 @@ var Switch = React28.forwardRef((props) => {
 });
 Switch.displayName = "Switch";
 var useLabelHeight = (label) => {
-  const labelRef = React28.useRef(null);
-  const [labelHeight, setLabelHeight] = React28.useState(0);
-  React28.useLayoutEffect(() => {
+  const labelRef = React29.useRef(null);
+  const [labelHeight, setLabelHeight] = React29.useState(0);
+  React29.useLayoutEffect(() => {
     const updateLabelHeight = () => {
       if (labelRef.current) {
         setLabelHeight(labelRef.current.offsetHeight);
@@ -4539,7 +4383,7 @@ var useLabelHeight = (label) => {
   }, [label]);
   return { labelRef, labelHeight };
 };
-var Textarea = React28.forwardRef(
+var Textarea = React29.forwardRef(
   (props, ref) => {
     const { label, variant = "core", ...fieldProps } = props;
     const recipe = react.useRecipe({ key: "textarea" });
@@ -4650,13 +4494,13 @@ var pressableCardRecipe = react.defineRecipe({
   }
 });
 var PressableCardButton = react.chakra("button", pressableCardRecipe);
-var PressableCard = React28.forwardRef(
+var PressableCard = React29.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(PressableCardButton, { ...props, ref });
   }
 );
 PressableCard.displayName = "PressableCard";
-var RadioCard = React28.forwardRef(
+var RadioCard = React29.forwardRef(
   (props, ref) => {
     const { inputProps, children, value, ariaLabel } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(react.RadioCard.Item, { ...props, children: [
@@ -4673,7 +4517,7 @@ var RadioCard = React28.forwardRef(
   }
 );
 RadioCard.displayName = "RadioCard";
-var RadioCardGroup = React28.forwardRef(
+var RadioCardGroup = React29.forwardRef(
   (props, ref) => {
     const {
       children,
@@ -4782,7 +4626,7 @@ var separatorRecipe = react.defineRecipe({
     }
   ]
 });
-var Separator = React28.forwardRef(
+var Separator = React29.forwardRef(
   (props, ref) => {
     const {
       size = "md",
@@ -4833,7 +4677,7 @@ var staticCardRecipe = react.defineRecipe({
   }
 });
 var StyledCardBox = react.chakra("div", staticCardRecipe);
-var StaticCard = React28.forwardRef(
+var StaticCard = React29.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(StyledCardBox, { ...props, ref });
   }
@@ -4885,7 +4729,7 @@ var getCorrectIcon = ({ variant, size }) => {
   var _a5;
   return ((_a5 = icons[variant]) == null ? void 0 : _a5[size]) ?? react.Box;
 };
-var LineIcon = React28.forwardRef(
+var LineIcon = React29.forwardRef(
   function LineIcon2({
     variant,
     size = "md",
@@ -4960,7 +4804,7 @@ var InfoTag = ({
     ] })
   ] });
 };
-var TravelTag = React28.forwardRef(
+var TravelTag = React29.forwardRef(
   function TravelTag2({
     variant,
     size = "md",
@@ -5037,13 +4881,13 @@ var ExternalIcon = ({ label }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fra
   /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.LinkOutOutline24Icon, { "aria-hidden": true }),
   /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: label })
 ] });
-var TextLink = React28.forwardRef(
+var TextLink = React29.forwardRef(
   ({ children, external, href, ...props }, ref) => {
     const { t } = useTranslation();
     const isExternal = external ?? Boolean((href == null ? void 0 : href.startsWith("http://")) || (href == null ? void 0 : href.startsWith("https://")));
     const externalLabel = t ? t(texts18.externalLink) : texts18.externalLink.en;
-    if (props.asChild && React28.isValidElement(children)) {
-      return /* @__PURE__ */ jsxRuntime.jsx(react.Link, { href, ...props, ref, children: React28.cloneElement(children, {
+    if (props.asChild && React29.isValidElement(children)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(react.Link, { href, ...props, ref, children: React29.cloneElement(children, {
         ...children.props,
         children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           children.props.children,
@@ -5069,7 +4913,7 @@ var texts18 = createTexts({
 var List = react.List.Root;
 var ListItem2 = react.List.Item;
 var ListIndicator = react.List.Indicator;
-var CargonetLogo = React28.forwardRef(
+var CargonetLogo = React29.forwardRef(
   (props, ref) => {
     const { colorPalette } = props;
     const mainColor = "#DF8200";
@@ -5228,8 +5072,8 @@ var fillRecipe = {
 };
 var Path = react.chakra("path", fillRecipe);
 var SVGGroup = react.chakra("g", fillRecipe);
-var VyLogo = React28.forwardRef((props, ref) => {
-  const id = React28.useId();
+var VyLogo = React29.forwardRef((props, ref) => {
+  const id = React29.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs(SvgBox, { ref, viewBox: "0 0 107 54", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Vy logo" }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -5349,7 +5193,7 @@ var VyLogo = React28.forwardRef((props, ref) => {
   ] });
 });
 VyLogo.displayName = "VyLogo";
-var VyLogoPride = React28.forwardRef(
+var VyLogoPride = React29.forwardRef(
   (props, ref) => {
     const pinkColor = "#ED6F99";
     const purpleColor = "#C06CF7";
@@ -5360,7 +5204,7 @@ var VyLogoPride = React28.forwardRef(
     const redColor = "#EA3323";
     const orangeColor = "#F09436";
     const yellowColor = "#FFFF54";
-    const id = React28.useId();
+    const id = React29.useId();
     return (
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       /* @__PURE__ */ jsxRuntime.jsxs(SvgBox, { ref, viewBox: "0 0 107 54", ...props, children: [
@@ -5563,7 +5407,7 @@ var VyLogoPride = React28.forwardRef(
   }
 );
 VyLogoPride.displayName = "VyLogoPride";
-var JumpButton = React28.forwardRef(
+var JumpButton = React29.forwardRef(
   (props, ref) => {
     const { direction, disabled, size = "sm" } = props;
     const { t } = useTranslation();
@@ -5598,7 +5442,7 @@ var texts19 = createTexts({
     en: "15 seconds backward"
   }
 });
-var PlayPauseButton = React28.forwardRef((props, ref) => {
+var PlayPauseButton = React29.forwardRef((props, ref) => {
   const { playing, disabled, size = "sm" } = props;
   const { t } = useTranslation();
   const recipe = react.useSlotRecipe({ key: "mediaControllerButton" });
@@ -5631,7 +5475,7 @@ var texts20 = createTexts({
     en: "Play"
   }
 });
-var SkipButton = React28.forwardRef(
+var SkipButton = React29.forwardRef(
   (props, ref) => {
     const { direction, disabled, size = "sm" } = props;
     const { t } = useTranslation();
@@ -5687,23 +5531,23 @@ var Nudge = (props) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Popover2, { defaultOpen: true, size, ...rest });
 };
-var NudgeTrigger = React28.forwardRef(({ ...props }, ref) => {
+var NudgeTrigger = React29.forwardRef(({ ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { ...props, ref });
 });
 NudgeTrigger.displayName = "NudgeTrigger";
-var NudgeContent = React28.forwardRef(
+var NudgeContent = React29.forwardRef(
   ({ showCloseButton = true, children, ...props }, ref) => {
-    const [currentStep, setCurrentStep] = React28.useState(1);
-    const childrenArray = React28__namespace.default.Children.toArray(children);
+    const [currentStep, setCurrentStep] = React29.useState(1);
+    const childrenArray = React29__namespace.default.Children.toArray(children);
     const { open } = react$1.usePopoverContext();
-    React28.useEffect(() => {
+    React29.useEffect(() => {
       setCurrentStep(1);
     }, [children, open]);
     const wizardPages = childrenArray.filter(
-      (child) => React28__namespace.default.isValidElement(child) && child.type.displayName === "NudgeWizardStep"
+      (child) => React29__namespace.default.isValidElement(child) && child.type.displayName === "NudgeWizardStep"
     );
     const restChildren = childrenArray.filter(
-      (child) => !React28__namespace.default.isValidElement(child) || child.type.displayName !== "NudgeWizardStep"
+      (child) => !React29__namespace.default.isValidElement(child) || child.type.displayName !== "NudgeWizardStep"
     );
     const totalSteps = wizardPages.length;
     const isLastStep = totalSteps === currentStep;
@@ -5784,7 +5628,7 @@ var NudgeWizardStep = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.chakra.div, { display: "flex", flexDirection: "column", gap: "1rem", width: "100%", children });
 };
 NudgeWizardStep.displayName = "NudgeWizardStep";
-var NudgeCloseTrigger = React28.forwardRef(({ children, ...props }, ref) => {
+var NudgeCloseTrigger = React29.forwardRef(({ children, ...props }, ref) => {
   const isStringChild = typeof children === "string";
   return /* @__PURE__ */ jsxRuntime.jsx(react.Popover.CloseTrigger, { ...props, ref, asChild: !isStringChild, children });
 });
@@ -5792,7 +5636,7 @@ NudgeCloseTrigger.displayName = "NudgeCloseTrigger";
 var [RootPropsProvider, useRootProps] = react.createContext({
   name: "RootPropsProvider"
 });
-var Pagination = React28__namespace.forwardRef(
+var Pagination = React29__namespace.forwardRef(
   (props, ref) => {
     const { getHref, children, ...rest } = props;
     const recipe = react.useSlotRecipe({ key: "pagination" });
@@ -5817,11 +5661,11 @@ var Pagination = React28__namespace.forwardRef(
   }
 );
 Pagination.displayName = "Pagination";
-var PaginationEllipsis = React28__namespace.forwardRef((props, ref) => {
+var PaginationEllipsis = React29__namespace.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(ListItem2, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Pagination.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { cursor: "default", children: "..." }) }) });
 });
 PaginationEllipsis.displayName = "PaginationEllipsis";
-var PaginationItem = React28__namespace.forwardRef((props, ref) => {
+var PaginationItem = React29__namespace.forwardRef((props, ref) => {
   const rootProps = useRootProps();
   const { t } = useTranslation();
   const { page, totalPages } = react.usePaginationContext();
@@ -5854,7 +5698,7 @@ var PaginationItem = React28__namespace.forwardRef((props, ref) => {
   ) });
 });
 PaginationItem.displayName = "PaginationItem";
-var PaginationPrevTrigger = React28__namespace.forwardRef((props, ref) => {
+var PaginationPrevTrigger = React29__namespace.forwardRef((props, ref) => {
   const { page } = react.usePaginationContext();
   const recipe = react.useSlotRecipe({ key: "pagination" });
   const styles = recipe();
@@ -5894,7 +5738,7 @@ var PaginationPrevTrigger = React28__namespace.forwardRef((props, ref) => {
   ) });
 });
 PaginationPrevTrigger.displayName = "PaginationPrevTrigger";
-var PaginationNextTrigger = React28__namespace.forwardRef((props, ref) => {
+var PaginationNextTrigger = React29__namespace.forwardRef((props, ref) => {
   const { page, totalPages } = react.usePaginationContext();
   const recipe = react.useSlotRecipe({ key: "pagination" });
   const styles = recipe();
@@ -5974,17 +5818,17 @@ var texts23 = createTexts({
   }
 });
 var Popover2 = react.Popover.Root;
-var PopoverTrigger = React28.forwardRef(({ children, ...props }, ref) => {
+var PopoverTrigger = React29.forwardRef(({ children, ...props }, ref) => {
   const isStringChild = typeof children === "string";
   return /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Trigger, { ...props, ref, asChild: !isStringChild, children });
 });
 PopoverTrigger.displayName = "PopoverTrigger";
-var PopoverContent = React28.forwardRef(
+var PopoverContent = React29.forwardRef(
   ({ children, showCloseButton = false, ...props }, ref) => {
     const { colorMode } = useColorMode();
-    const closeButtonRef = React28__namespace.default.useRef(null);
+    const closeButtonRef = React29__namespace.default.useRef(null);
     const { open } = react.usePopoverContext();
-    React28.useEffect(() => {
+    React29.useEffect(() => {
       if (showCloseButton && open && closeButtonRef.current) {
         closeButtonRef.current.focus();
       }
@@ -6018,7 +5862,7 @@ var ProgressDot = ({ isActive }) => {
     }
   );
 };
-var ProgressIndicator = React28.forwardRef(({ numberOfSteps, activeStep }) => {
+var ProgressIndicator = React29.forwardRef(({ numberOfSteps, activeStep }) => {
   const { t } = useTranslation();
   const recipe = react.useSlotRecipe({
     key: "progressIndicator"
@@ -6192,7 +6036,7 @@ var SporProvider = ({
     children
   ] }) }) });
 };
-var StepperContext = React28__namespace.default.createContext(null);
+var StepperContext = React29__namespace.default.createContext(null);
 var StepperProvider = ({
   activeStep,
   children,
@@ -6209,7 +6053,7 @@ var StepperProvider = ({
   );
 };
 var useStepper = () => {
-  const context = React28__namespace.default.useContext(StepperContext);
+  const context = React29__namespace.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"
@@ -6217,7 +6061,7 @@ var useStepper = () => {
   }
   return context;
 };
-var Stepper = React28.forwardRef(
+var Stepper = React29.forwardRef(
   function Stepper2(props, ref) {
     const {
       onClick = () => {
@@ -6365,7 +6209,7 @@ var getState = (stepNumber, activeStep) => {
   }
   return "disabled";
 };
-var Tabs = React28.forwardRef((props, ref) => {
+var Tabs = React29.forwardRef((props, ref) => {
   const { variant = "core", size = "sm" } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(react.Tabs.Root, { ...props, ref, variant, size });
 });
@@ -6567,7 +6411,7 @@ var tableSlotRecipe = react.defineSlotRecipe({
     }
   }
 });
-var Table = React28.forwardRef((props, ref) => {
+var Table = React29.forwardRef((props, ref) => {
   const { variant = "ghost", size, colorPalette = "green", children } = props;
   const recipe = react.useSlotRecipe({ recipe: tableSlotRecipe });
   const styles = recipe({ variant, size });
@@ -7522,6 +7366,170 @@ var checkboxSlotRecipe = react.defineSlotRecipe({
     }
   }
 });
+var choiceChipSlotRecipe = react.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 = react.defineSlotRecipe({
   slots: dialogAnatomy.keys(),
   className: "spor-dialog",
@@ -9844,7 +9852,8 @@ var slotRecipes = {
   table: tableSlotRecipe,
   tabs: tabsSlotRecipe,
   travelTag: travelTagSlotRecipe,
-  toast: toastSlotRecipe
+  toast: toastSlotRecipe,
+  checkboxCard: choiceChipSlotRecipe
 };
 var animations = react.defineTokens.animations({
   spin: {