@vygruppen/spor-react 9.11.3 → 9.12.0

package/dist/{chunk-PA6EOPOZ.mjs → chunk-D4Z4Q4GJ.mjs}

@@ -1,16 +1,16 @@
 import tokens11__default from '@vygruppen/spor-design-tokens';
 import * as tokens11 from '@vygruppen/spor-design-tokens';
 export { tokens11 as tokens };
-import { forwardRef, Divider as Divider$1, Stack as Stack$1, useMultiStyleConfig, Box, chakra, useStyleConfig, Accordion as Accordion$1, Flex, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, FormLabel as FormLabel$1, useFormControlContext, InputGroup, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, IconButton as IconButton$1, Switch as Switch$1, Textarea as Textarea$1, Skeleton as Skeleton$1, useButtonGroup, Center, ButtonGroup as ButtonGroup$1, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover as Popover$1, PopoverTrigger, Portal, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, useRadioGroup, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, Heading, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Drawer as Drawer$1, DrawerOverlay, DrawerBody, DrawerHeader, useMediaQuery, DrawerCloseButton, DarkMode, PopoverCloseButton, usePopoverContext, UnorderedList, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
+import { forwardRef, Divider as Divider$1, Stack as Stack$1, Box, useMultiStyleConfig, chakra, Flex, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, FormLabel as FormLabel$1, useFormControlContext, InputGroup, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, IconButton as IconButton$1, Switch as Switch$1, Textarea as Textarea$1, useStyleConfig, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Center, ButtonGroup as ButtonGroup$1, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover as Popover$1, PopoverTrigger, Portal, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, Heading, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Drawer as Drawer$1, DrawerOverlay, DrawerBody, DrawerHeader, useMediaQuery, DrawerCloseButton, DarkMode, PopoverCloseButton, usePopoverContext, UnorderedList, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
 export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Portal, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import * as React87 from 'react';
-import React87__default, { useId, createContext, forwardRef as forwardRef$1, useRef, useState, useEffect, Suspense, useContext, useCallback, useMemo, useLayoutEffect } from 'react';
+import React87__default, { forwardRef as forwardRef$1, useRef, useState, useEffect, useId, Suspense, useContext, createContext, useCallback, useMemo, useLayoutEffect } from 'react';
 import { CloseOutline24Icon, SearchOutline24Icon, CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, DropdownRightFill18Icon, DropdownLeftFill18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, ArrowLeftFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
-import { inlineLoaderColorPrideData, inlineLoaderColorData, spinnerColorPrideData, spinnerColorData, contentLoaderPrideData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, vyLogoPrideData, fullScreenLoaderBlackData, inlineLoaderLightData, spinnerLightData, spinnerDarkData } from '@vygruppen/spor-loader';
-import { useLottie } from 'lottie-react';
 import { usePopover, DismissButton, Overlay, useOverlayTrigger, useButton, useDateSegment, useDateField, useDatePicker, I18nProvider, useDialog, useFilter, useComboBox, useListBox, useOption, useListBoxSection, useSelect, HiddenSelect, useProgressBar, useCalendar, useDateRangePicker, useCalendarGrid, useRangeCalendar, useTimeField, useCalendarCell } from 'react-aria';
 import { useOverlayTriggerState, Item, useDateFieldState, useDatePickerState, useComboBoxState, useSelectState, useCalendarState, useDateRangePickerState, useTimeFieldState, useRangeCalendarState } from 'react-stately';
 export { Item, Section } from 'react-stately';
+import { inlineLoaderColorPrideData, inlineLoaderColorData, spinnerColorPrideData, spinnerColorData, contentLoaderPrideData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, vyLogoPrideData, fullScreenLoaderBlackData, inlineLoaderLightData, spinnerLightData, spinnerDarkData } from '@vygruppen/spor-loader';
+import { useLottie } from 'lottie-react';
 import { motion } from 'framer-motion';
 import { createCalendar, GregorianCalendar, parseTime, endOfMonth, getWeeksInMonth, getLocalTimeZone, isSameMonth, isToday } from '@internationalized/date';
 export { Time } from '@internationalized/date';
@@ -778,295 +778,6 @@ var Stack = forwardRef(
     return /* @__PURE__ */ React87__default.createElement(Stack$1, { ...props, direction: flexDirection, ref });
   }
 );
-var RadioCard = forwardRef(
-  ({ children, variant = "base", isChecked, onChange, ...props }, ref) => {
-    const styles3 = useMultiStyleConfig("RadioCard", { variant });
-    const id = `radio-card-${useId()}`;
-    const handleChange = (event) => {
-      onChange && onChange(event);
-    };
-    return /* @__PURE__ */ React87__default.createElement(Box, { as: "label", htmlFor: id, "aria-label": String(children), ref }, /* @__PURE__ */ React87__default.createElement(
-      chakra.input,
-      {
-        type: "radio",
-        id,
-        checked: isChecked,
-        onChange: handleChange,
-        ...props,
-        sx: styles3.radioInput
-      }
-    ), /* @__PURE__ */ React87__default.createElement(
-      Box,
-      {
-        ...props,
-        __css: {
-          ...styles3.container,
-          ...isChecked && styles3.checked
-        }
-      },
-      children
-    ));
-  }
-);
-var RadioCardGroup = ({
-  children,
-  name,
-  direction: direction2 = "row",
-  onChange,
-  defaultValue,
-  variant = "base",
-  ...props
-}) => {
-  const { getRootProps, getRadioProps } = useRadioGroup({
-    defaultValue,
-    name,
-    onChange,
-    ...props
-  });
-  const rootProps = getRootProps();
-  return /* @__PURE__ */ React87__default.createElement(Stack$1, { direction: direction2, ...rootProps }, recursiveMap(children, (child) => {
-    if (child.type === RadioCard) {
-      const radioProps = getRadioProps({ value: child.props.value });
-      const variantValue = variant;
-      return React87__default.cloneElement(
-        child,
-        {
-          ...radioProps,
-          variant: variantValue,
-          ...props
-        }
-      );
-    }
-    return child;
-  }));
-};
-function recursiveMap(children, fn) {
-  return React87__default.Children.map(children, (child) => {
-    if (React87__default.isValidElement(child) && child.props.children) {
-      child = React87__default.cloneElement(child, {
-        children: recursiveMap(child.props.children, fn)
-      });
-    }
-    if (React87__default.isValidElement(child)) {
-      return fn(child);
-    }
-    return child;
-  });
-}
-var StaticCard = forwardRef(
-  ({ colorScheme = "white", children, ...props }, ref) => {
-    const styles3 = useStyleConfig("StaticCard", {
-      colorScheme
-    });
-    return /* @__PURE__ */ React87__default.createElement(Box, { __css: styles3, ...props, ref }, children);
-  }
-);
-var PressableCard = forwardRef(
-  ({ children, variant = "floating", ...props }, ref) => {
-    const styles3 = useStyleConfig("PressableCard", {
-      variant
-    });
-    return /* @__PURE__ */ React87__default.createElement(Box, { __css: styles3, ...props, ref }, children);
-  }
-);
-var AccordionContext = React87__default.createContext(null);
-var AccordionProvider = ({
-  size: size2,
-  ...props
-}) => {
-  return /* @__PURE__ */ React87__default.createElement(AccordionContext.Provider, { value: { size: size2 }, ...props });
-};
-var useAccordionContext = () => {
-  const context = React87__default.useContext(AccordionContext);
-  if (context === null) {
-    throw new Error(
-      "useAccordionContext must be used within AccordionProvider"
-    );
-  }
-  return context;
-};
-var Accordion = forwardRef(
-  ({ children, spacing: spacing3 = 2, ...props }, ref) => {
-    const defaultIndex = typeof props.defaultIndex === "number" && props.allowMultiple ? [props.defaultIndex] : props.defaultIndex;
-    return /* @__PURE__ */ React87__default.createElement(AccordionProvider, { size: props.size }, /* @__PURE__ */ React87__default.createElement(
-      Accordion$1,
-      {
-        ...props,
-        ref,
-        defaultIndex
-      },
-      /* @__PURE__ */ React87__default.createElement(Stack, { spacing: spacing3 }, children)
-    ));
-  }
-);
-var Expandable = ({
-  children,
-  headingLevel,
-  title,
-  leftIcon,
-  size: size2 = "md",
-  defaultOpen,
-  isOpen,
-  onChange = () => {
-  },
-  ...rest
-}) => {
-  return /* @__PURE__ */ React87__default.createElement(
-    Accordion,
-    {
-      ...rest,
-      index: isOpen ? 0 : void 0,
-      defaultIndex: defaultOpen ? 0 : void 0,
-      allowMultiple: true,
-      size: size2,
-      onChange: (expandedIndex) => onChange(expandedIndex === 0)
-    },
-    /* @__PURE__ */ React87__default.createElement(
-      ExpandableItem,
-      {
-        headingLevel,
-        title,
-        leftIcon
-      },
-      children
-    )
-  );
-};
-var ExpandableItem = ({
-  children,
-  title,
-  headingLevel = "h3",
-  leftIcon,
-  ...rest
-}) => {
-  const { size: size2 } = useAccordionContext();
-  warnAboutMismatchingIcon({ icon: leftIcon, size: size2 });
-  return /* @__PURE__ */ React87__default.createElement(AccordionItem, { ...rest }, /* @__PURE__ */ React87__default.createElement(Box, { as: headingLevel }, /* @__PURE__ */ React87__default.createElement(AccordionButton, null, /* @__PURE__ */ React87__default.createElement(Flex, { alignItems: "center" }, leftIcon && /* @__PURE__ */ React87__default.createElement(Box, { marginRight: 1 }, leftIcon), title), /* @__PURE__ */ React87__default.createElement(AccordionIcon, null))), /* @__PURE__ */ React87__default.createElement(AccordionPanel, null, children));
-};
-var warnAboutMismatchingIcon = ({ icon, size: size2 }) => {
-  var _a6, _b5;
-  if (process.env.NODE_ENV !== "production") {
-    const displayName = (_b5 = (_a6 = icon == null ? void 0 : icon.type) == null ? void 0 : _a6.render) == null ? void 0 : _b5.displayName;
-    if (!displayName) {
-      return;
-    }
-    if (displayName.includes("Fill")) {
-      console.warn(
-        `You passed a filled icon. This component requires outlined icons. You passed ${displayName}, replace it with ${displayName.replace(
-          "Fill",
-          "Outline"
-        )}.`
-      );
-      return;
-    }
-    if (size2 === "lg" && !displayName.includes("30Icon")) {
-      console.warn(
-        `The icon you passed was of the wrong size for the lg size. You passed ${displayName}, replace it with ${displayName.replace(
-          /(\d{2})Icon/,
-          "30Icon"
-        )}.`
-      );
-      return;
-    }
-    if (["md"].includes(size2) && !displayName.includes("24Icon")) {
-      console.warn(
-        `The icon you passed was of the wrong size for the ${size2} size. You passed ${displayName}, replace it with ${displayName.replace(
-          /(\d{2})Icon/,
-          "24Icon"
-        )}.`
-      );
-    }
-  }
-};
-var Language = /* @__PURE__ */ ((Language3) => {
-  Language3["NorwegianBokmal"] = "nb";
-  Language3["NorwegianNynorsk"] = "nn";
-  Language3["Swedish"] = "sv";
-  Language3["English"] = "en";
-  return Language3;
-})(Language || {});
-var LanguageContext = createContext(void 0);
-function LanguageProvider({
-  language,
-  children
-}) {
-  return /* @__PURE__ */ React87__default.createElement(LanguageContext.Provider, { value: language }, children);
-}
-function useLanguage() {
-  const language = useContext(LanguageContext);
-  if (!language) {
-    throw new Error("Please wrap your application in a LanguageProvider");
-  }
-  return language;
-}
-function useTranslation() {
-  const language = useLanguage();
-  const t2 = (text) => {
-    return text[language];
-  };
-  return { t: t2, language };
-}
-function createTexts(texts28) {
-  return texts28;
-}
-var hydrating = true;
-function useHydrated() {
-  let [hydrated, setHydrated] = useState(() => !hydrating);
-  useEffect(function hydrate() {
-    hydrating = false;
-    setHydrated(true);
-  }, []);
-  return hydrated;
-}
-
-// src/loader/ClientOnly.tsx
-var ClientOnly = ({ children, fallback = null }) => {
-  const isHydrated = useHydrated();
-  return /* @__PURE__ */ React87__default.createElement(React87__default.Fragment, null, isHydrated ? children() : fallback);
-};
-function Lottie({ animationData }) {
-  const { View } = useLottie({ animationData, loop: true });
-  return /* @__PURE__ */ React87__default.createElement(React87__default.Fragment, null, View);
-}
-var PrideContext = createContext(void 0);
-var PrideProvider = ({
-  children
-}) => {
-  const isBrowser2 = typeof window !== "undefined";
-  const key = "spor__isPride";
-  const [isPride, setIsPride] = useState(() => {
-    if (isBrowser2) {
-      const savedState = localStorage.getItem(key);
-      return savedState ? JSON.parse(savedState) : true;
-    }
-    return true;
-  });
-  const togglePride = () => {
-    setIsPride((prev) => {
-      const newState = !prev;
-      if (isBrowser2) {
-        localStorage.setItem(key, JSON.stringify(newState));
-      }
-      return newState;
-    });
-  };
-  useEffect(() => {
-    if (isBrowser2) {
-      const savedState = localStorage.getItem(key);
-      if (savedState) {
-        setIsPride(JSON.parse(savedState));
-      }
-    }
-  }, [isBrowser2]);
-  return /* @__PURE__ */ React87__default.createElement(PrideContext.Provider, { value: { isPride, togglePride } }, children);
-};
-var usePride = () => {
-  const context = useContext(PrideContext);
-  if (context === void 0) {
-    throw new Error("usePride must be used within a PrideProvider");
-  }
-  return context;
-};
 var AttachedInputs = ({
   flexDirection = "row",
   ...rest
@@ -2041,7 +1752,7 @@ var texts4 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React87__default.lazy(() => import('./CountryCodeSelect-KU4HQMG3.mjs'));
+var LazyCountryCodeSelect = React87__default.lazy(() => import('./CountryCodeSelect-Q33DXFQF.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React87__default.createElement(Radio$1, { ...props, ref });
 });
@@ -2101,82 +1812,396 @@ var texts5 = createTexts({
     sv: "Rensa s\xF6krutan",
     en: "Reset search field"
   }
-});
-var Switch = forwardRef(
-  ({ size: size2 = "md", ...props }, ref) => {
-    return /* @__PURE__ */ React87__default.createElement(Switch$1, { size: size2, ...props, ref });
+});
+var Switch = forwardRef(
+  ({ size: size2 = "md", ...props }, ref) => {
+    return /* @__PURE__ */ React87__default.createElement(Switch$1, { size: size2, ...props, ref });
+  }
+);
+var Textarea = forwardRef((props, ref) => {
+  const {
+    spacingProps,
+    remainingProps: { label, ...rest }
+  } = getSpacingProps(props);
+  const formControlProps = useFormControlContext();
+  const fallbackId = `textarea-${useId()}`;
+  const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
+  return /* @__PURE__ */ React87__default.createElement(InputGroup, { position: "relative", ...spacingProps }, /* @__PURE__ */ React87__default.createElement(Textarea$1, { ...rest, id: inputId, ref, placeholder: " " }), label && /* @__PURE__ */ React87__default.createElement(FormLabel$1, { htmlFor: inputId, id: `${inputId}-label` }, label));
+});
+function getSpacingProps(props) {
+  const {
+    mt,
+    mr,
+    mb,
+    ml,
+    mx,
+    my,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    marginX,
+    marginY,
+    pt,
+    pr,
+    pb,
+    pl,
+    px,
+    py,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    paddingX,
+    paddingY,
+    ...remainingProps
+  } = props;
+  return {
+    spacingProps: {
+      mt,
+      mr,
+      mb,
+      ml,
+      mx,
+      my,
+      marginTop,
+      marginRight,
+      marginBottom,
+      marginLeft,
+      marginX,
+      marginY,
+      pt,
+      pr,
+      pb,
+      pl,
+      px,
+      py,
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+      paddingLeft,
+      paddingX,
+      paddingY
+    },
+    remainingProps
+  };
+}
+
+// src/layout/RadioCardGroup.tsx
+var RadioCardGroupContext = React87__default.createContext(null);
+var RadioCardGroup = ({
+  children,
+  name,
+  variant = "base",
+  direction: direction2 = "row",
+  groupLabel,
+  defaultValue,
+  ...props
+}) => {
+  const [selectedValue, setSelectedValue] = useState(
+    defaultValue || ""
+  );
+  const handleChange = (value) => {
+    setSelectedValue(value);
+  };
+  return /* @__PURE__ */ React87__default.createElement(
+    RadioCardGroupContext.Provider,
+    {
+      value: {
+        name,
+        selectedValue,
+        onChange: handleChange,
+        variant,
+        defaultValue: defaultValue || ""
+      }
+    },
+    /* @__PURE__ */ React87__default.createElement(
+      Stack$1,
+      {
+        as: "fieldset",
+        direction: direction2,
+        "aria-labelledby": groupLabel || name,
+        role: "radiogroup",
+        tabIndex: 0,
+        ...props
+      },
+      groupLabel && /* @__PURE__ */ React87__default.createElement(FormLabel, { as: "legend", id: groupLabel }, groupLabel),
+      children
+    )
+  );
+};
+
+// src/layout/RadioCard.tsx
+var RadioCard = forwardRef(
+  ({ children, value = "base", isDisabled, ...props }, ref) => {
+    const context = useContext(RadioCardGroupContext);
+    if (!context) {
+      throw new Error(
+        "RadioCard components must be wrapped in a RadioCardGroup component"
+      );
+    }
+    const { name, selectedValue, onChange, variant } = context;
+    const styles3 = useMultiStyleConfig("RadioCard", { variant });
+    const isChecked = selectedValue === value;
+    const radioCardId = `radio-card-${useId()}`;
+    useEffect(() => {
+      if (isChecked && typeof ref !== "function" && (ref == null ? void 0 : ref.current)) {
+        ref.current.focus();
+      }
+    }, [isChecked]);
+    const handleKeyDown = (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        onChange(value);
+      }
+      if (event.key === "ArrowRight" || event.key === "ArrowDown" || event.key === "ArrowLeft" || event.key === "ArrowUp") {
+        const nextRadioCard = event.currentTarget.nextElementSibling;
+        nextRadioCard.focus();
+      }
+    };
+    return /* @__PURE__ */ React87__default.createElement(Box, { as: "label", "aria-label": String(children), onKeyDown: handleKeyDown }, /* @__PURE__ */ React87__default.createElement(
+      chakra.input,
+      {
+        type: "radio",
+        id: radioCardId,
+        ref,
+        value,
+        name,
+        checked: isChecked,
+        onChange: () => onChange(value),
+        disabled: isDisabled,
+        __css: styles3.radioInput
+      }
+    ), /* @__PURE__ */ React87__default.createElement(
+      Box,
+      {
+        ...props,
+        tabIndex: 0,
+        ref,
+        role: "radio",
+        "aria-checked": isChecked,
+        "aria-labelledby": radioCardId,
+        __css: { ...styles3.container, ...isChecked && styles3.checked },
+        "data-checked": isChecked,
+        "data-disabled": isDisabled
+      },
+      children
+    ));
+  }
+);
+var StaticCard = forwardRef(
+  ({ colorScheme = "white", children, ...props }, ref) => {
+    const styles3 = useStyleConfig("StaticCard", {
+      colorScheme
+    });
+    return /* @__PURE__ */ React87__default.createElement(Box, { __css: styles3, ...props, ref }, children);
+  }
+);
+var PressableCard = forwardRef(
+  ({ children, variant = "floating", ...props }, ref) => {
+    const styles3 = useStyleConfig("PressableCard", {
+      variant
+    });
+    return /* @__PURE__ */ React87__default.createElement(Box, { __css: styles3, ...props, ref }, children);
+  }
+);
+var AccordionContext = React87__default.createContext(null);
+var AccordionProvider = ({
+  size: size2,
+  ...props
+}) => {
+  return /* @__PURE__ */ React87__default.createElement(AccordionContext.Provider, { value: { size: size2 }, ...props });
+};
+var useAccordionContext = () => {
+  const context = React87__default.useContext(AccordionContext);
+  if (context === null) {
+    throw new Error(
+      "useAccordionContext must be used within AccordionProvider"
+    );
+  }
+  return context;
+};
+var Accordion = forwardRef(
+  ({ children, spacing: spacing3 = 2, ...props }, ref) => {
+    const defaultIndex = typeof props.defaultIndex === "number" && props.allowMultiple ? [props.defaultIndex] : props.defaultIndex;
+    return /* @__PURE__ */ React87__default.createElement(AccordionProvider, { size: props.size }, /* @__PURE__ */ React87__default.createElement(
+      Accordion$1,
+      {
+        ...props,
+        ref,
+        defaultIndex
+      },
+      /* @__PURE__ */ React87__default.createElement(Stack, { spacing: spacing3 }, children)
+    ));
+  }
+);
+var Expandable = ({
+  children,
+  headingLevel,
+  title,
+  leftIcon,
+  size: size2 = "md",
+  defaultOpen,
+  isOpen,
+  onChange = () => {
+  },
+  ...rest
+}) => {
+  return /* @__PURE__ */ React87__default.createElement(
+    Accordion,
+    {
+      ...rest,
+      index: isOpen ? 0 : void 0,
+      defaultIndex: defaultOpen ? 0 : void 0,
+      allowMultiple: true,
+      size: size2,
+      onChange: (expandedIndex) => onChange(expandedIndex === 0)
+    },
+    /* @__PURE__ */ React87__default.createElement(
+      ExpandableItem,
+      {
+        headingLevel,
+        title,
+        leftIcon
+      },
+      children
+    )
+  );
+};
+var ExpandableItem = ({
+  children,
+  title,
+  headingLevel = "h3",
+  leftIcon,
+  ...rest
+}) => {
+  const { size: size2 } = useAccordionContext();
+  warnAboutMismatchingIcon({ icon: leftIcon, size: size2 });
+  return /* @__PURE__ */ React87__default.createElement(AccordionItem, { ...rest }, /* @__PURE__ */ React87__default.createElement(Box, { as: headingLevel }, /* @__PURE__ */ React87__default.createElement(AccordionButton, null, /* @__PURE__ */ React87__default.createElement(Flex, { alignItems: "center" }, leftIcon && /* @__PURE__ */ React87__default.createElement(Box, { marginRight: 1 }, leftIcon), title), /* @__PURE__ */ React87__default.createElement(AccordionIcon, null))), /* @__PURE__ */ React87__default.createElement(AccordionPanel, null, children));
+};
+var warnAboutMismatchingIcon = ({ icon, size: size2 }) => {
+  var _a6, _b5;
+  if (process.env.NODE_ENV !== "production") {
+    const displayName = (_b5 = (_a6 = icon == null ? void 0 : icon.type) == null ? void 0 : _a6.render) == null ? void 0 : _b5.displayName;
+    if (!displayName) {
+      return;
+    }
+    if (displayName.includes("Fill")) {
+      console.warn(
+        `You passed a filled icon. This component requires outlined icons. You passed ${displayName}, replace it with ${displayName.replace(
+          "Fill",
+          "Outline"
+        )}.`
+      );
+      return;
+    }
+    if (size2 === "lg" && !displayName.includes("30Icon")) {
+      console.warn(
+        `The icon you passed was of the wrong size for the lg size. You passed ${displayName}, replace it with ${displayName.replace(
+          /(\d{2})Icon/,
+          "30Icon"
+        )}.`
+      );
+      return;
+    }
+    if (["md"].includes(size2) && !displayName.includes("24Icon")) {
+      console.warn(
+        `The icon you passed was of the wrong size for the ${size2} size. You passed ${displayName}, replace it with ${displayName.replace(
+          /(\d{2})Icon/,
+          "24Icon"
+        )}.`
+      );
+    }
+  }
+};
+var Language = /* @__PURE__ */ ((Language3) => {
+  Language3["NorwegianBokmal"] = "nb";
+  Language3["NorwegianNynorsk"] = "nn";
+  Language3["Swedish"] = "sv";
+  Language3["English"] = "en";
+  return Language3;
+})(Language || {});
+var LanguageContext = createContext(void 0);
+function LanguageProvider({
+  language,
+  children
+}) {
+  return /* @__PURE__ */ React87__default.createElement(LanguageContext.Provider, { value: language }, children);
+}
+function useLanguage() {
+  const language = useContext(LanguageContext);
+  if (!language) {
+    throw new Error("Please wrap your application in a LanguageProvider");
   }
-);
-var Textarea = forwardRef((props, ref) => {
-  const {
-    spacingProps,
-    remainingProps: { label, ...rest }
-  } = getSpacingProps(props);
-  const formControlProps = useFormControlContext();
-  const fallbackId = `textarea-${useId()}`;
-  const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
-  return /* @__PURE__ */ React87__default.createElement(InputGroup, { position: "relative", ...spacingProps }, /* @__PURE__ */ React87__default.createElement(Textarea$1, { ...rest, id: inputId, ref, placeholder: " " }), label && /* @__PURE__ */ React87__default.createElement(FormLabel$1, { htmlFor: inputId, id: `${inputId}-label` }, label));
-});
-function getSpacingProps(props) {
-  const {
-    mt,
-    mr,
-    mb,
-    ml,
-    mx,
-    my,
-    marginTop,
-    marginRight,
-    marginBottom,
-    marginLeft,
-    marginX,
-    marginY,
-    pt,
-    pr,
-    pb,
-    pl,
-    px,
-    py,
-    paddingTop,
-    paddingRight,
-    paddingBottom,
-    paddingLeft,
-    paddingX,
-    paddingY,
-    ...remainingProps
-  } = props;
-  return {
-    spacingProps: {
-      mt,
-      mr,
-      mb,
-      ml,
-      mx,
-      my,
-      marginTop,
-      marginRight,
-      marginBottom,
-      marginLeft,
-      marginX,
-      marginY,
-      pt,
-      pr,
-      pb,
-      pl,
-      px,
-      py,
-      paddingTop,
-      paddingRight,
-      paddingBottom,
-      paddingLeft,
-      paddingX,
-      paddingY
-    },
-    remainingProps
+  return language;
+}
+function useTranslation() {
+  const language = useLanguage();
+  const t2 = (text) => {
+    return text[language];
   };
+  return { t: t2, language };
+}
+function createTexts(texts28) {
+  return texts28;
+}
+var hydrating = true;
+function useHydrated() {
+  let [hydrated, setHydrated] = useState(() => !hydrating);
+  useEffect(function hydrate() {
+    hydrating = false;
+    setHydrated(true);
+  }, []);
+  return hydrated;
 }
 
-// src/pride/TogglePride.tsx
+// src/loader/ClientOnly.tsx
+var ClientOnly = ({ children, fallback = null }) => {
+  const isHydrated = useHydrated();
+  return /* @__PURE__ */ React87__default.createElement(React87__default.Fragment, null, isHydrated ? children() : fallback);
+};
+function Lottie({ animationData }) {
+  const { View } = useLottie({ animationData, loop: true });
+  return /* @__PURE__ */ React87__default.createElement(React87__default.Fragment, null, View);
+}
+var PrideContext = createContext(void 0);
+var PrideProvider = ({
+  children
+}) => {
+  const isBrowser2 = typeof window !== "undefined";
+  const key = "spor__isPride";
+  const [isPride, setIsPride] = useState(() => {
+    if (isBrowser2) {
+      const savedState = localStorage.getItem(key);
+      return savedState ? JSON.parse(savedState) : true;
+    }
+    return true;
+  });
+  const togglePride = () => {
+    setIsPride((prev) => {
+      const newState = !prev;
+      if (isBrowser2) {
+        localStorage.setItem(key, JSON.stringify(newState));
+      }
+      return newState;
+    });
+  };
+  useEffect(() => {
+    if (isBrowser2) {
+      const savedState = localStorage.getItem(key);
+      if (savedState) {
+        setIsPride(JSON.parse(savedState));
+      }
+    }
+  }, [isBrowser2]);
+  return /* @__PURE__ */ React87__default.createElement(PrideContext.Provider, { value: { isPride, togglePride } }, children);
+};
+var usePride = () => {
+  const context = useContext(PrideContext);
+  if (context === void 0) {
+    throw new Error("usePride must be used within a PrideProvider");
+  }
+  return context;
+};
 var TogglePride = ({ label }) => {
   const { isPride, togglePride } = usePride();
   return /* @__PURE__ */ React87__default.createElement(FormControl, { display: "flex", alignItems: "center", gap: 3 }, /* @__PURE__ */ React87__default.createElement(FormLabel, { margin: "0" }, label), /* @__PURE__ */ React87__default.createElement(
@@ -2924,44 +2949,20 @@ function CalendarCell({
       { passive: false, once: true }
     );
   }, []);
-  return /* @__PURE__ */ React87__default.createElement(
+  return /* @__PURE__ */ React87__default.createElement(Box, { as: "td", ...cellProps, textAlign: "center", sx: styles3.cell }, /* @__PURE__ */ React87__default.createElement(
     Box,
     {
-      as: "td",
-      ...cellProps,
-      textAlign: "center",
-      sx: {
-        '&[aria-selected="true"] + [aria-selected="true"] > button': {
-          "&::before": {
-            content: '""',
-            display: "block",
-            width: "100%",
-            height: "100%",
-            backgroundColor: "darkTeal",
-            position: "absolute",
-            left: "-50%",
-            top: 0,
-            bottom: 0,
-            zIndex: -1
-          }
-        }
-      }
+      as: "button",
+      type: "button",
+      ...buttonProps,
+      ...stateProps,
+      ref,
+      sx: styles3.dateCell,
+      hidden: isOutsideVisibleRange,
+      width: "100%"
     },
-    /* @__PURE__ */ React87__default.createElement(
-      Box,
-      {
-        as: "button",
-        type: "button",
-        ...buttonProps,
-        ...stateProps,
-        ref,
-        sx: styles3.dateCell,
-        hidden: isOutsideVisibleRange,
-        width: "100%"
-      },
-      date.day
-    )
-  );
+    date.day
+  ));
 }
 var useCurrentLocale = () => {
   const { language } = useTranslation();
@@ -3116,11 +3117,10 @@ var CalendarNavigator = ({
       "aria-label": `${t2(texts12.previous)} ${t2(texts12[unit])}`
     }
   ), /* @__PURE__ */ React87__default.createElement(
-    Heading2,
+    Box,
     {
-      as: "div",
       role: "heading",
-      variant: "sm",
+      fontSize: "sm",
       fontWeight: "bold",
       flex: "1",
       textAlign: "center"
@@ -3249,11 +3249,7 @@ var DateTimeSegment = forwardRef$1(
         outline: "none",
         borderRadius: "xs",
         fontSize: ["mobile.sm", "desktop.sm"],
-        sx: styles3.dateTimeSegment,
-        _focus: {
-          backgroundColor: "darkTeal",
-          color: "white"
-        }
+        sx: styles3.dateTimeSegment
       },
       isPaddable(segment.type) ? segment.text.padStart(2, "0") : segment.text
     );
@@ -10650,34 +10646,9 @@ var colorCombinations = {
     color: "darkGrey"
   }
 };
+
+// src/theme/components/breadcrumb.ts
 var { defineMultiStyleConfig: defineMultiStyleConfig27, definePartsStyle: definePartsStyle27 } = createMultiStyleConfigHelpers(breadcrumbAnatomy.keys);
-var baseStyleLink2 = defineStyle((props) => ({
-  transitionProperty: "common",
-  transitionDuration: "fast",
-  transitionTimingFunction: "ease-out",
-  color: "inherit",
-  textDecoration: "none",
-  textStyle: "xs",
-  paddingX: 0.5,
-  borderRadius: "xs",
-  "&:not([aria-current=page])": {
-    cursor: "pointer",
-    _hover: {
-      ...baseBackground("hover", props)
-    },
-    _active: {
-      ...baseBackground("active", props)
-    },
-    ...focusVisibleStyles(props)
-  }
-}));
-definePartsStyle27((props) => ({
-  link: baseStyleLink2(props),
-  list: {
-    flexWrap: "wrap",
-    alignItems: "flex-start"
-  }
-}));
 var breadcrumb_default = defineMultiStyleConfig27({
   baseStyle: definePartsStyle27((props) => ({
     link: {
@@ -10716,16 +10687,10 @@ var breadcrumb_default = defineMultiStyleConfig27({
       link: {
         "&:not([aria-current=page])": {
           _hover: {
-            backgroundColor: mode(
-              "ghost.surface.hover.light",
-              "ghost.surface.hover.dark"
-            )(props)
+            ...ghostBackground("hover", props)
           },
           _active: {
-            backgroundColor: mode(
-              "ghost.surface.active.light",
-              "ghost.surface.active.dark"
-            )(props)
+            ...ghostBackground("active", props)
           }
         }
       }
@@ -10862,26 +10827,26 @@ var config6 = defineStyleConfig$1({
     lg: {
       minHeight: 8,
       minWidth: 8,
-      fontSize: "18px",
+      fontSize: "sm",
       fontWeight: "bold"
     },
     md: {
       minHeight: 7,
       minWidth: 7,
-      fontSize: "18px",
+      fontSize: "sm",
       fontWeight: "bold"
     },
     sm: {
       minHeight: 6,
       minWidth: 6,
-      fontSize: "16px",
+      fontSize: "xs",
       fontWeight: "normal"
     },
     xs: {
       minHeight: 5,
       minWidth: 5,
       paddingY: 0.5,
-      fontSize: "16px",
+      fontSize: "xs",
       fontWeight: "normal"
     }
   },
@@ -11470,9 +11435,10 @@ var config11 = helpers6.defineMultiStyleConfig({
     container: {
       display: "inline-flex",
       alignItems: "center",
-      fontSize: "16px",
+      fontSize: "xs",
       cursor: "pointer",
       transitionProperty: "all",
+      borderRadius: "xl",
       transitionDuration: "fast",
       _checked: {
         outlineColor: "transparent",
@@ -11572,42 +11538,38 @@ var config11 = helpers6.defineMultiStyleConfig({
   sizes: {
     xs: {
       container: {
-        borderRadius: "30px",
         _checked: {
-          borderRadius: "9px"
+          borderRadius: "0.563rem"
         },
-        height: "30px",
+        height: 5,
         paddingX: 1.5
       }
     },
     sm: {
       container: {
-        borderRadius: "30px",
         _checked: {
-          borderRadius: "12px"
+          borderRadius: "sm"
         },
-        height: "36px",
+        height: 6,
         paddingX: 2
       }
     },
     md: {
       container: {
-        borderRadius: "30px",
         _checked: {
-          borderRadius: "12px"
+          borderRadius: "sm"
         },
-        height: "42px",
+        height: 7,
         paddingX: 2
       }
     },
     lg: {
       container: {
-        borderRadius: "30px",
         _checked: {
-          borderRadius: "18px"
+          borderRadius: "md"
         },
-        height: "54px",
-        px: 3
+        height: 8,
+        paddingX: 3
       }
     }
   },
@@ -11629,27 +11591,27 @@ var config12 = defineStyleConfig$1({
     fontWeight: "normal",
     ...focusVisibleStyles(props),
     _hover: {
-      backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
+      ...ghostBackground("hover", props),
       _disabled: {
         color: "dimGrey"
       }
     },
     _active: {
-      backgroundColor: mode("mint", "whiteAlpha.200")(props)
+      ...ghostBackground("active", props)
     }
   }),
   sizes: {
     lg: {
       [$size6.variable]: "40px",
-      fontSize: "16px"
+      fontSize: "xs"
     },
     md: {
       [$size6.variable]: "32px",
-      fontSize: "12px"
+      fontSize: "0.75rem"
     },
     sm: {
       [$size6.variable]: "24px",
-      fontSize: "10px"
+      fontSize: "0.625rem"
     }
   },
   defaultProps: {
@@ -11679,7 +11641,8 @@ var parts5 = anatomy$1("datepicker").parts(
   "weekend",
   "dateCell",
   "inputLabel",
-  "dateTimeSegment"
+  "dateTimeSegment",
+  "cell"
 );
 var $arrowBackground = cssVar$1("popper-arrow-bg");
 var helpers7 = createMultiStyleConfigHelpers$1(parts5.keys);
@@ -11714,7 +11677,11 @@ var config14 = helpers7.defineMultiStyleConfig({
       color: mode(
         "darkGrey",
         props.isPlaceholder ? "whiteAlpha.400" : "white"
-      )(props)
+      )(props),
+      _focus: {
+        ...brandBackground("hover", props),
+        color: "white"
+      }
     },
     calendarTriggerButton: {
       width: 8,
@@ -11755,6 +11722,22 @@ var config14 = helpers7.defineMultiStyleConfig({
     weekend: {
       ...accentText("default", props)
     },
+    cell: {
+      '&[aria-selected="true"] + [aria-selected="true"] > button': {
+        "&::before": {
+          content: '""',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          left: "-50%",
+          top: 0,
+          bottom: 0,
+          zIndex: -1,
+          ...brandBackground("default", props)
+        }
+      }
+    },
     dateCell: {
       ...ghostBackground("default", props),
       ...baseText("default", props),
@@ -11841,7 +11824,7 @@ var config14 = helpers7.defineMultiStyleConfig({
   }
 });
 var datepicker_default = config14;
-var baseStyle44 = defineStyle((props) => ({
+var baseStyle43 = defineStyle((props) => ({
   borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props)
 }));
 var variantSolid5 = defineStyle({
@@ -11869,7 +11852,7 @@ var sizes25 = {
   }
 };
 var divider_default = defineStyleConfig({
-  baseStyle: baseStyle44,
+  baseStyle: baseStyle43,
   variants: variants14,
   sizes: sizes25,
   defaultProps: {
@@ -12150,7 +12133,7 @@ var config19 = helpers11.defineMultiStyleConfig({
       display: "flex",
       appearance: "none",
       width: "100%",
-      height: "54px",
+      height: 8,
       borderTopRadius: "sm",
       borderBottomRadius: props.isOpen ? 0 : "sm",
       paddingY: 1.5,
@@ -12518,7 +12501,7 @@ var config22 = helpers14.defineMultiStyleConfig({
       transitionDuration: "fast",
       position: "relative",
       paddingX: 3,
-      height: "54px",
+      height: 8,
       fontSize: "mobile.md",
       ...baseBackground("default", props),
       ...baseBorder("default", props),
@@ -12556,7 +12539,7 @@ var config22 = helpers14.defineMultiStyleConfig({
         cursor: "text"
       },
       "&:not(:placeholder-shown)": {
-        paddingTop: "16px",
+        paddingTop: "1rem",
         "& + label": {
           transform: "scale(0.825) translateY(-10px)"
         }
@@ -12765,7 +12748,7 @@ var link_default = config24;
 
 // src/theme/components/list.ts
 var { defineMultiStyleConfig: defineMultiStyleConfig28, definePartsStyle: definePartsStyle28 } = createMultiStyleConfigHelpers(listAnatomy.keys);
-var baseStyle45 = definePartsStyle28({
+var baseStyle44 = definePartsStyle28({
   container: {
     fontSize: ["mobile.sm", "desktop.sm"]
   },
@@ -12779,7 +12762,7 @@ var baseStyle45 = definePartsStyle28({
   }
 });
 var list_default = defineMultiStyleConfig28({
-  baseStyle: baseStyle45
+  baseStyle: baseStyle44
 });
 var parts11 = anatomy("ListBox").parts(
   "container",
@@ -13193,8 +13176,10 @@ var config31 = helpers22.defineMultiStyleConfig({
     },
     background: {
       display: "flex",
-      backgroundColor: mode("coralGreen", "pine")(props),
-      // TODO: Replace with semantic tokens
+      backgroundColor: mode(
+        "brand.surface.default.dark",
+        "brand.surface.default.light"
+      )(props),
       borderRadius: "sm",
       justifyContent: "flex-start",
       marginX: "auto"
@@ -13281,7 +13266,6 @@ var helpers24 = createMultiStyleConfigHelpers$1(parts17.keys);
 var config33 = helpers24.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
-      appearance: "none",
       border: "none",
       overflow: "hidden",
       fontSize: "inherit",
@@ -13323,6 +13307,9 @@ var config33 = helpers24.defineMultiStyleConfig({
         _active: {
           ...baseBackground("active", props),
           ...baseBorder("active", props)
+        },
+        _focus: {
+          ...outlineBorder("focus", props)
         }
       },
       checked: {
@@ -13332,13 +13319,17 @@ var config33 = helpers24.defineMultiStyleConfig({
         _active: {
           ...baseBackground("active", props),
           ...baseBorder("active", props)
+        },
+        _focus: {
+          outline: "4px solid",
+          outlineStyle: "double",
+          ...outlineBorder("focus", props),
+          outlineOffset: "-1px"
         }
       }
     }),
     floating: (props) => ({
       container: {
-        ...baseText("default", props),
-        ...baseBackground("default", props),
         ...floatingBackground("default", props),
         ...floatingBorder("default", props),
         boxShadow: "sm",
@@ -13350,16 +13341,25 @@ var config33 = helpers24.defineMultiStyleConfig({
         _active: {
           ...floatingBackground("active", props),
           ...floatingBorder("active", props)
+        },
+        _focus: {
+          ...outlineBorder("focus", props)
         }
       },
       checked: {
-        cursor: "normal",
         _hover: {
-          ...floatingBorder("hover", props)
+          ...floatingBorder("hover", props),
+          boxShadow: "md"
         },
         _active: {
           ...floatingBackground("active", props),
           ...floatingBorder("active", props)
+        },
+        _focus: {
+          outline: "4px solid",
+          outlineStyle: "double",
+          ...outlineBorder("focus", props),
+          outlineOffset: "-1px"
         }
       }
     })
@@ -13399,7 +13399,10 @@ var config34 = helpers25.defineMultiStyleConfig({
         ...baseText("disabled", props)
       },
       _checked: {
-        color: mode("pine", "coralGreen")(props),
+        color: mode(
+          "brand.surface.default.light",
+          "brand.surface.default.dark"
+        )(props),
         borderColor: "currentColor",
         _before: {
           content: `""`,
@@ -13446,17 +13449,17 @@ var config35 = helpers26.defineMultiStyleConfig({
     field: {
       ...input_default.baseStyle(props).field,
       appearance: "none",
-      paddingTop: "16px",
+      paddingTop: "1rem",
       "option, optgroup": {}
     },
     icon: {
-      width: "30px",
-      height: "30px",
+      width: 5,
+      height: 5,
       insetEnd: "0.5rem",
       position: "relative",
       color: "currentColor",
       strokeLinecap: "round",
-      fontSize: "1.125rem",
+      fontSize: "sm",
       _disabled: {
         ...baseText("disabled", props)
       }
@@ -13911,7 +13914,7 @@ var config40 = helpers30.defineMultiStyleConfig({
   sizes: {
     xs: {
       tablist: {
-        height: "30px",
+        height: 5,
         padding: "2px"
       },
       tab: {
@@ -13921,7 +13924,7 @@ var config40 = helpers30.defineMultiStyleConfig({
     },
     sm: {
       tablist: {
-        height: "36px",
+        height: 6,
         padding: 0.5
       },
       tab: {
@@ -13930,7 +13933,7 @@ var config40 = helpers30.defineMultiStyleConfig({
     },
     md: {
       tablist: {
-        height: "42px",
+        height: 7,
         padding: 0.5
       },
       tab: {
@@ -13940,7 +13943,7 @@ var config40 = helpers30.defineMultiStyleConfig({
     },
     lg: {
       tablist: {
-        height: "54px",
+        height: 8,
         padding: "4px"
       },
       tab: {
@@ -14092,6 +14095,7 @@ var config44 = defineStyleConfig$1({
       }
     }),
     accent: (props) => ({
+      ...accentText("default", props),
       ...accentBackground("default", props),
       boxShadow: "sm",
       _hover: {
@@ -14483,4 +14487,4 @@ function slugify(text, maxLength = 50) {
   return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[\u00C6\u00E6]/g, "ae").replace(/[\u00D8\u00F8]/g, "oe").replace(/[\u00C5\u00E5]/g, "aa").toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]+/g, "").replace(/--+/g, "-").replace(/^-+/, "").replace(/-+$/, "").substring(0, maxLength);
 }
 
-export { Accordion, AttachedInputs, Badge, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button2 as Button, ButtonGroup, Card2 as Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel, FullScreenDrawer, Heading2 as Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, Nudge, NumericStepper, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioGroup, SearchInput, SimpleDrawer, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TogglePride, Tooltip, TravelTag, VyLogo, VyLogoDefault, VyLogoPride, WizardNudge, brandTheme, createTexts, fontFaces, slugify, theme, usePride, useSize, useToast, useTranslation };
+export { Accordion, AttachedInputs, Badge, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button2 as Button, ButtonGroup, Card2 as Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel, FullScreenDrawer, Heading2 as Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, Nudge, NumericStepper, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, SearchInput, SimpleDrawer, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TogglePride, Tooltip, TravelTag, VyLogo, VyLogoDefault, VyLogoPride, WizardNudge, brandTheme, createTexts, fontFaces, slugify, theme, usePride, useSize, useToast, useTranslation };