@vygruppen/spor-react 9.11.4 → 9.12.0

package/dist/index.js

@@ -2,11 +2,11 @@
 
 var react = require('@chakra-ui/react');
 var React88 = require('react');
-var lottieReact = require('lottie-react');
 var reactAria = require('react-aria');
 var sporIconReact = require('@vygruppen/spor-icon-react');
 var reactStately = require('react-stately');
 var awesomePhonenumber = require('awesome-phonenumber');
+var lottieReact = require('lottie-react');
 var sporLoader = require('@vygruppen/spor-loader');
 var framerMotion = require('framer-motion');
 var date = require('@internationalized/date');
@@ -90,583 +90,213 @@ var init_Stack = __esm({
     );
   }
 });
-exports.RadioCard = void 0;
-var init_RadioCard = __esm({
-  "src/layout/RadioCard.tsx"() {
-    exports.RadioCard = react.forwardRef(
-      ({ children, variant = "base", isChecked, onChange, ...props }, ref) => {
-        const styles3 = react.useMultiStyleConfig("RadioCard", { variant });
-        const id = `radio-card-${React88.useId()}`;
-        const handleChange = (event) => {
-          onChange && onChange(event);
-        };
-        return /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { as: "label", htmlFor: id, "aria-label": String(children), ref }, /* @__PURE__ */ React88__namespace.default.createElement(
-          react.chakra.input,
-          {
-            type: "radio",
-            id,
-            checked: isChecked,
-            onChange: handleChange,
-            ...props,
-            sx: styles3.radioInput
+exports.AttachedInputs = void 0;
+var init_AttachedInputs = __esm({
+  "src/input/AttachedInputs.tsx"() {
+    init_src();
+    exports.AttachedInputs = ({
+      flexDirection = "row",
+      ...rest
+    }) => {
+      const attachedStyles = {
+        horizontal: {
+          "> *:first-of-type:not(:last-of-type) [data-attachable]": {
+            borderEndRadius: 0
+          },
+          "> *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
+            borderRadius: 0
+          },
+          "> *:not(:first-of-type):last-of-type [data-attachable]": {
+            borderStartRadius: 0
           }
-        ), /* @__PURE__ */ React88__namespace.default.createElement(
+        },
+        vertical: {
+          "> *:first-of-type:not(:last-of-type) [data-attachable]": {
+            borderBottomRadius: 0
+          },
+          "> *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
+            borderRadius: 0
+          },
+          "> *:not(:first-of-type):last-of-type [data-attachable]": {
+            borderTopRadius: 0
+          }
+        }
+      };
+      const direction2 = flexDirection === "row" ? "horizontal" : "vertical";
+      return /* @__PURE__ */ React88__namespace.default.createElement(
+        react.Flex,
+        {
+          role: "group",
+          __css: attachedStyles[direction2],
+          display: "flex",
+          flexDirection,
+          ...rest
+        }
+      );
+    };
+  }
+});
+var Dialog;
+var init_Dialog = __esm({
+  "src/input/Dialog.tsx"() {
+    Dialog = ({ title, children, ...props }) => {
+      const ref = React88.useRef(null);
+      const { dialogProps, titleProps } = reactAria.useDialog(props, ref);
+      return /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { ...dialogProps, ref, outline: "none" }, title && /* @__PURE__ */ React88__namespace.default.createElement(react.Heading, { as: "h3", ...titleProps }, title), children);
+    };
+  }
+});
+var Popover;
+var init_Popover = __esm({
+  "src/input/Popover.tsx"() {
+    Popover = React88.forwardRef(
+      ({
+        children,
+        state: state2,
+        triggerRef,
+        offset = 0,
+        crossOffset = 0,
+        placement = "bottom",
+        shouldFlip = false,
+        isNonModal = false,
+        hasBackdrop = true,
+        containerPadding = 12
+      }, ref) => {
+        var _a6;
+        const internalRef = React88.useRef(null);
+        const popoverRef = ref ?? internalRef;
+        const { popoverProps, underlayProps } = reactAria.usePopover(
+          {
+            triggerRef,
+            popoverRef,
+            offset,
+            crossOffset,
+            placement,
+            shouldFlip,
+            isNonModal,
+            containerPadding
+          },
+          state2
+        );
+        const popoverBox = /* @__PURE__ */ React88__namespace.default.createElement(
           react.Box,
           {
-            ...props,
-            __css: {
-              ...styles3.container,
-              ...isChecked && styles3.checked
-            }
+            ...popoverProps,
+            ref: popoverRef,
+            minWidth: ((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? "auto"
           },
-          children
-        ));
+          /* @__PURE__ */ React88__namespace.default.createElement(reactAria.DismissButton, { onDismiss: state2.close }),
+          children,
+          /* @__PURE__ */ React88__namespace.default.createElement(reactAria.DismissButton, { onDismiss: state2.close })
+        );
+        if (isNonModal) {
+          return popoverBox;
+        }
+        return /* @__PURE__ */ React88__namespace.default.createElement(reactAria.Overlay, null, hasBackdrop && /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { ...underlayProps, position: "fixed", inset: "0" }), popoverBox);
       }
     );
   }
 });
-function recursiveMap(children, fn) {
-  return React88__namespace.default.Children.map(children, (child) => {
-    if (React88__namespace.default.isValidElement(child) && child.props.children) {
-      child = React88__namespace.default.cloneElement(child, {
-        children: recursiveMap(child.props.children, fn)
-      });
-    }
-    if (React88__namespace.default.isValidElement(child)) {
-      return fn(child);
+function useForceRerender(shouldRerender) {
+  const [_, update] = React88.useState(false);
+  React88.useEffect(() => {
+    if (shouldRerender) {
+      update((x) => !x);
     }
-    return child;
-  });
+  }, [shouldRerender]);
 }
-exports.RadioCardGroup = void 0;
-var init_RadioCardGroup = __esm({
-  "src/layout/RadioCardGroup.tsx"() {
-    init_RadioCard();
-    exports.RadioCardGroup = ({
-      children,
-      name,
-      direction: direction2 = "row",
-      onChange,
-      defaultValue,
-      variant = "base",
-      ...props
-    }) => {
-      const { getRootProps, getRadioProps } = react.useRadioGroup({
-        defaultValue,
-        name,
-        onChange,
+exports.CardSelect = void 0;
+var init_CardSelect = __esm({
+  "src/input/CardSelect.tsx"() {
+    init_src();
+    init_Dialog();
+    init_Popover();
+    exports.CardSelect = react.forwardRef(
+      ({
+        variant,
+        size: size2,
+        isOpen: externalIsOpen,
+        defaultOpen = false,
+        onToggle,
+        icon,
+        children,
+        width = "fit-content",
+        crossOffset = 0,
+        placement = "bottom",
+        withChevron = true,
+        fontWeight = "normal",
         ...props
-      });
-      const rootProps = getRootProps();
-      return /* @__PURE__ */ React88__namespace.default.createElement(react.Stack, { direction: direction2, ...rootProps }, recursiveMap(children, (child) => {
-        if (child.type === exports.RadioCard) {
-          const radioProps = getRadioProps({ value: child.props.value });
-          const variantValue = variant;
-          return React88__namespace.default.cloneElement(
-            child,
+      }, externalRef) => {
+        const label = "label" in props ? props.label : props["aria-label"];
+        const internalRef = React88.useRef(null);
+        const triggerRef = externalRef ?? internalRef;
+        const state2 = reactStately.useOverlayTriggerState({
+          isOpen: externalIsOpen,
+          onOpenChange: onToggle,
+          defaultOpen
+        });
+        const { triggerProps, overlayProps } = reactAria.useOverlayTrigger(
+          { type: "dialog" },
+          state2,
+          triggerRef
+        );
+        const { buttonProps } = reactAria.useButton(triggerProps, triggerRef);
+        const styles3 = react.useMultiStyleConfig("CardSelect", {
+          variant,
+          size: size2
+        });
+        useForceRerender(state2.isOpen);
+        const ChevronIcon = size2 === "sm" ? sporIconReact.DropdownDownFill18Icon : sporIconReact.DropdownDownFill24Icon;
+        return /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { ...props }, /* @__PURE__ */ React88__namespace.default.createElement(
+          react.chakra.button,
+          {
+            type: "button",
+            ref: triggerRef,
+            fontWeight: "bold",
+            sx: styles3.trigger,
+            "aria-label": label,
+            ...buttonProps,
+            width,
+            "data-attachable": true
+          },
+          /* @__PURE__ */ React88__namespace.default.createElement(react.Flex, { gap: 1.5, alignItems: "center" }, icon, /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { as: "span", display: props["aria-label"] ? "none" : "inline" }, label), withChevron ? /* @__PURE__ */ React88__namespace.default.createElement(
+            ChevronIcon,
             {
-              ...radioProps,
-              variant: variantValue,
-              ...props
+              transform: state2.isOpen ? "rotate(180deg)" : "none"
             }
-          );
-        }
-        return child;
-      }));
-    };
-  }
-});
-exports.StaticCard = void 0;
-var init_StaticCard = __esm({
-  "src/layout/StaticCard.tsx"() {
-    exports.StaticCard = react.forwardRef(
-      ({ colorScheme = "white", children, ...props }, ref) => {
-        const styles3 = react.useStyleConfig("StaticCard", {
-          colorScheme
-        });
-        return /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { __css: styles3, ...props, ref }, children);
+          ) : null)
+        ), state2.isOpen && /* @__PURE__ */ React88__namespace.default.createElement(
+          Popover,
+          {
+            state: state2,
+            triggerRef,
+            offset: size2 === "sm" ? 6 : 12,
+            crossOffset,
+            placement
+          },
+          /* @__PURE__ */ React88__namespace.default.createElement(
+            exports.StaticCard,
+            {
+              colorScheme: "white",
+              size: "lg",
+              border: "sm",
+              borderColor: "grey",
+              sx: styles3.card,
+              ...overlayProps
+            },
+            /* @__PURE__ */ React88__namespace.default.createElement(Dialog, { "aria-label": label }, children)
+          )
+        ));
       }
     );
   }
 });
-exports.PressableCard = void 0;
-var init_PressableCard = __esm({
-  "src/layout/PressableCard.tsx"() {
-    exports.PressableCard = react.forwardRef(
-      ({ children, variant = "floating", ...props }, ref) => {
-        const styles3 = react.useStyleConfig("PressableCard", {
-          variant
-        });
-        return /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { __css: styles3, ...props, ref }, children);
-      }
-    );
-  }
-});
-var init_layout = __esm({
-  "src/layout/index.tsx"() {
-    init_Divider();
-    init_Stack();
-    init_RadioCard();
-    init_RadioCardGroup();
-    init_StaticCard();
-    init_PressableCard();
-  }
-});
-var AccordionContext, AccordionProvider, useAccordionContext;
-var init_AccordionContext = __esm({
-  "src/accordion/AccordionContext.tsx"() {
-    AccordionContext = React88__namespace.default.createContext(null);
-    AccordionProvider = ({
-      size: size2,
-      ...props
-    }) => {
-      return /* @__PURE__ */ React88__namespace.default.createElement(AccordionContext.Provider, { value: { size: size2 }, ...props });
-    };
-    useAccordionContext = () => {
-      const context = React88__namespace.default.useContext(AccordionContext);
-      if (context === null) {
-        throw new Error(
-          "useAccordionContext must be used within AccordionProvider"
-        );
-      }
-      return context;
-    };
-  }
-});
-exports.Accordion = void 0;
-var init_Accordion = __esm({
-  "src/accordion/Accordion.tsx"() {
-    init_layout();
-    init_AccordionContext();
-    exports.Accordion = react.forwardRef(
-      ({ children, spacing: spacing3 = 2, ...props }, ref) => {
-        const defaultIndex = typeof props.defaultIndex === "number" && props.allowMultiple ? [props.defaultIndex] : props.defaultIndex;
-        return /* @__PURE__ */ React88__namespace.default.createElement(AccordionProvider, { size: props.size }, /* @__PURE__ */ React88__namespace.default.createElement(
-          react.Accordion,
-          {
-            ...props,
-            ref,
-            defaultIndex
-          },
-          /* @__PURE__ */ React88__namespace.default.createElement(exports.Stack, { spacing: spacing3 }, children)
-        ));
-      }
-    );
-  }
-});
-exports.Expandable = void 0; exports.ExpandableItem = void 0; var warnAboutMismatchingIcon;
-var init_Expandable = __esm({
-  "src/accordion/Expandable.tsx"() {
-    init_Accordion();
-    init_AccordionContext();
-    exports.Expandable = ({
-      children,
-      headingLevel,
-      title,
-      leftIcon,
-      size: size2 = "md",
-      defaultOpen,
-      isOpen,
-      onChange = () => {
-      },
-      ...rest
-    }) => {
-      return /* @__PURE__ */ React88__namespace.default.createElement(
-        exports.Accordion,
-        {
-          ...rest,
-          index: isOpen ? 0 : void 0,
-          defaultIndex: defaultOpen ? 0 : void 0,
-          allowMultiple: true,
-          size: size2,
-          onChange: (expandedIndex) => onChange(expandedIndex === 0)
-        },
-        /* @__PURE__ */ React88__namespace.default.createElement(
-          exports.ExpandableItem,
-          {
-            headingLevel,
-            title,
-            leftIcon
-          },
-          children
-        )
-      );
-    };
-    exports.ExpandableItem = ({
-      children,
-      title,
-      headingLevel = "h3",
-      leftIcon,
-      ...rest
-    }) => {
-      const { size: size2 } = useAccordionContext();
-      warnAboutMismatchingIcon({ icon: leftIcon, size: size2 });
-      return /* @__PURE__ */ React88__namespace.default.createElement(react.AccordionItem, { ...rest }, /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { as: headingLevel }, /* @__PURE__ */ React88__namespace.default.createElement(react.AccordionButton, null, /* @__PURE__ */ React88__namespace.default.createElement(react.Flex, { alignItems: "center" }, leftIcon && /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { marginRight: 1 }, leftIcon), title), /* @__PURE__ */ React88__namespace.default.createElement(react.AccordionIcon, null))), /* @__PURE__ */ React88__namespace.default.createElement(react.AccordionPanel, null, children));
-    };
-    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"
-            )}.`
-          );
-        }
-      }
-    };
-  }
-});
-
-// src/accordion/index.tsx
-var init_accordion = __esm({
-  "src/accordion/index.tsx"() {
-    init_Accordion();
-    init_Expandable();
-  }
-});
-function LanguageProvider({
-  language,
-  children
-}) {
-  return /* @__PURE__ */ React88__namespace.default.createElement(LanguageContext.Provider, { value: language }, children);
-}
-function useLanguage() {
-  const language = React88.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(texts29) {
-  return texts29;
-}
-exports.Language = void 0; var LanguageContext;
-var init_i18n = __esm({
-  "src/i18n/index.tsx"() {
-    exports.Language = /* @__PURE__ */ ((Language3) => {
-      Language3["NorwegianBokmal"] = "nb";
-      Language3["NorwegianNynorsk"] = "nn";
-      Language3["Swedish"] = "sv";
-      Language3["English"] = "en";
-      return Language3;
-    })(exports.Language || {});
-    LanguageContext = React88.createContext(void 0);
-  }
-});
-function useHydrated() {
-  let [hydrated, setHydrated] = React88.useState(() => !hydrating);
-  React88.useEffect(function hydrate() {
-    hydrating = false;
-    setHydrated(true);
-  }, []);
-  return hydrated;
-}
-var hydrating;
-var init_useHydrated = __esm({
-  "src/loader/useHydrated.tsx"() {
-    hydrating = true;
-  }
-});
-var ClientOnly;
-var init_ClientOnly = __esm({
-  "src/loader/ClientOnly.tsx"() {
-    init_useHydrated();
-    ClientOnly = ({ children, fallback = null }) => {
-      const isHydrated = useHydrated();
-      return /* @__PURE__ */ React88__namespace.default.createElement(React88__namespace.default.Fragment, null, isHydrated ? children() : fallback);
-    };
-  }
-});
-function Lottie({ animationData }) {
-  const { View } = lottieReact.useLottie({ animationData, loop: true });
-  return /* @__PURE__ */ React88__namespace.default.createElement(React88__namespace.default.Fragment, null, View);
-}
-var init_Lottie = __esm({
-  "src/loader/Lottie.tsx"() {
-  }
-});
-var PrideContext; exports.PrideProvider = void 0; exports.usePride = void 0;
-var init_PrideProvider = __esm({
-  "src/pride/PrideProvider.tsx"() {
-    PrideContext = React88.createContext(void 0);
-    exports.PrideProvider = ({
-      children
-    }) => {
-      const isBrowser2 = typeof window !== "undefined";
-      const key = "spor__isPride";
-      const [isPride, setIsPride] = React88.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;
-        });
-      };
-      React88.useEffect(() => {
-        if (isBrowser2) {
-          const savedState = localStorage.getItem(key);
-          if (savedState) {
-            setIsPride(JSON.parse(savedState));
-          }
-        }
-      }, [isBrowser2]);
-      return /* @__PURE__ */ React88__namespace.default.createElement(PrideContext.Provider, { value: { isPride, togglePride } }, children);
-    };
-    exports.usePride = () => {
-      const context = React88.useContext(PrideContext);
-      if (context === void 0) {
-        throw new Error("usePride must be used within a PrideProvider");
-      }
-      return context;
-    };
-  }
-});
-exports.AttachedInputs = void 0;
-var init_AttachedInputs = __esm({
-  "src/input/AttachedInputs.tsx"() {
-    init_src();
-    exports.AttachedInputs = ({
-      flexDirection = "row",
-      ...rest
-    }) => {
-      const attachedStyles = {
-        horizontal: {
-          "> *:first-of-type:not(:last-of-type) [data-attachable]": {
-            borderEndRadius: 0
-          },
-          "> *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
-            borderRadius: 0
-          },
-          "> *:not(:first-of-type):last-of-type [data-attachable]": {
-            borderStartRadius: 0
-          }
-        },
-        vertical: {
-          "> *:first-of-type:not(:last-of-type) [data-attachable]": {
-            borderBottomRadius: 0
-          },
-          "> *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
-            borderRadius: 0
-          },
-          "> *:not(:first-of-type):last-of-type [data-attachable]": {
-            borderTopRadius: 0
-          }
-        }
-      };
-      const direction2 = flexDirection === "row" ? "horizontal" : "vertical";
-      return /* @__PURE__ */ React88__namespace.default.createElement(
-        react.Flex,
-        {
-          role: "group",
-          __css: attachedStyles[direction2],
-          display: "flex",
-          flexDirection,
-          ...rest
-        }
-      );
-    };
-  }
-});
-var Dialog;
-var init_Dialog = __esm({
-  "src/input/Dialog.tsx"() {
-    Dialog = ({ title, children, ...props }) => {
-      const ref = React88.useRef(null);
-      const { dialogProps, titleProps } = reactAria.useDialog(props, ref);
-      return /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { ...dialogProps, ref, outline: "none" }, title && /* @__PURE__ */ React88__namespace.default.createElement(react.Heading, { as: "h3", ...titleProps }, title), children);
-    };
-  }
-});
-var Popover;
-var init_Popover = __esm({
-  "src/input/Popover.tsx"() {
-    Popover = React88.forwardRef(
-      ({
-        children,
-        state: state2,
-        triggerRef,
-        offset = 0,
-        crossOffset = 0,
-        placement = "bottom",
-        shouldFlip = false,
-        isNonModal = false,
-        hasBackdrop = true,
-        containerPadding = 12
-      }, ref) => {
-        var _a6;
-        const internalRef = React88.useRef(null);
-        const popoverRef = ref ?? internalRef;
-        const { popoverProps, underlayProps } = reactAria.usePopover(
-          {
-            triggerRef,
-            popoverRef,
-            offset,
-            crossOffset,
-            placement,
-            shouldFlip,
-            isNonModal,
-            containerPadding
-          },
-          state2
-        );
-        const popoverBox = /* @__PURE__ */ React88__namespace.default.createElement(
-          react.Box,
-          {
-            ...popoverProps,
-            ref: popoverRef,
-            minWidth: ((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? "auto"
-          },
-          /* @__PURE__ */ React88__namespace.default.createElement(reactAria.DismissButton, { onDismiss: state2.close }),
-          children,
-          /* @__PURE__ */ React88__namespace.default.createElement(reactAria.DismissButton, { onDismiss: state2.close })
-        );
-        if (isNonModal) {
-          return popoverBox;
-        }
-        return /* @__PURE__ */ React88__namespace.default.createElement(reactAria.Overlay, null, hasBackdrop && /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { ...underlayProps, position: "fixed", inset: "0" }), popoverBox);
-      }
-    );
-  }
-});
-function useForceRerender(shouldRerender) {
-  const [_, update] = React88.useState(false);
-  React88.useEffect(() => {
-    if (shouldRerender) {
-      update((x) => !x);
-    }
-  }, [shouldRerender]);
-}
-exports.CardSelect = void 0;
-var init_CardSelect = __esm({
-  "src/input/CardSelect.tsx"() {
-    init_src();
-    init_Dialog();
-    init_Popover();
-    exports.CardSelect = react.forwardRef(
-      ({
-        variant,
-        size: size2,
-        isOpen: externalIsOpen,
-        defaultOpen = false,
-        onToggle,
-        icon,
-        children,
-        width = "fit-content",
-        crossOffset = 0,
-        placement = "bottom",
-        withChevron = true,
-        fontWeight = "normal",
-        ...props
-      }, externalRef) => {
-        const label = "label" in props ? props.label : props["aria-label"];
-        const internalRef = React88.useRef(null);
-        const triggerRef = externalRef ?? internalRef;
-        const state2 = reactStately.useOverlayTriggerState({
-          isOpen: externalIsOpen,
-          onOpenChange: onToggle,
-          defaultOpen
-        });
-        const { triggerProps, overlayProps } = reactAria.useOverlayTrigger(
-          { type: "dialog" },
-          state2,
-          triggerRef
-        );
-        const { buttonProps } = reactAria.useButton(triggerProps, triggerRef);
-        const styles3 = react.useMultiStyleConfig("CardSelect", {
-          variant,
-          size: size2
-        });
-        useForceRerender(state2.isOpen);
-        const ChevronIcon = size2 === "sm" ? sporIconReact.DropdownDownFill18Icon : sporIconReact.DropdownDownFill24Icon;
-        return /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { ...props }, /* @__PURE__ */ React88__namespace.default.createElement(
-          react.chakra.button,
-          {
-            type: "button",
-            ref: triggerRef,
-            fontWeight: "bold",
-            sx: styles3.trigger,
-            "aria-label": label,
-            ...buttonProps,
-            width,
-            "data-attachable": true
-          },
-          /* @__PURE__ */ React88__namespace.default.createElement(react.Flex, { gap: 1.5, alignItems: "center" }, icon, /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { as: "span", display: props["aria-label"] ? "none" : "inline" }, label), withChevron ? /* @__PURE__ */ React88__namespace.default.createElement(
-            ChevronIcon,
-            {
-              transform: state2.isOpen ? "rotate(180deg)" : "none"
-            }
-          ) : null)
-        ), state2.isOpen && /* @__PURE__ */ React88__namespace.default.createElement(
-          Popover,
-          {
-            state: state2,
-            triggerRef,
-            offset: size2 === "sm" ? 6 : 12,
-            crossOffset,
-            placement
-          },
-          /* @__PURE__ */ React88__namespace.default.createElement(
-            exports.StaticCard,
-            {
-              colorScheme: "white",
-              size: "lg",
-              border: "sm",
-              borderColor: "grey",
-              sx: styles3.card,
-              ...overlayProps
-            },
-            /* @__PURE__ */ React88__namespace.default.createElement(Dialog, { "aria-label": label }, children)
-          )
-        ));
-      }
-    );
-  }
-});
-exports.Checkbox = void 0;
-var init_Checkbox = __esm({
-  "src/input/Checkbox.tsx"() {
-    exports.Checkbox = react.forwardRef((props, ref) => {
-      return /* @__PURE__ */ React88__namespace.default.createElement(react.Checkbox, { ...props, ref });
-    });
+exports.Checkbox = void 0;
+var init_Checkbox = __esm({
+  "src/input/Checkbox.tsx"() {
+    exports.Checkbox = react.forwardRef((props, ref) => {
+      return /* @__PURE__ */ React88__namespace.default.createElement(react.Checkbox, { ...props, ref });
+    });
   }
 });
 exports.CheckboxGroup = void 0;
@@ -2150,376 +1780,770 @@ var init_NumericStepper = __esm({
     });
   }
 });
-exports.PasswordInput = void 0; var texts3;
-var init_PasswordInput = __esm({
-  "src/input/PasswordInput.tsx"() {
+exports.PasswordInput = void 0; var texts3;
+var init_PasswordInput = __esm({
+  "src/input/PasswordInput.tsx"() {
+    init_input();
+    init_src();
+    exports.PasswordInput = react.forwardRef(
+      ({ leftIcon, id, label, size: size2, ...props }, ref) => {
+        const { isOpen: isShowingPassword, onToggle } = react.useDisclosure();
+        const { t: t2 } = useTranslation();
+        const formControlProps = react.useFormControlContext();
+        const autoGeneratedId = `password-input-${React88.useId()}`;
+        const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? autoGeneratedId;
+        return /* @__PURE__ */ React88__namespace.default.createElement(react.InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React88__namespace.default.createElement(exports.InputLeftElement, null, leftIcon), /* @__PURE__ */ React88__namespace.default.createElement(
+          react.Input,
+          {
+            ...props,
+            id: inputId,
+            placeholder: " ",
+            type: isShowingPassword ? "text" : "password",
+            paddingRight: 10,
+            paddingLeft: leftIcon ? 7 : void 0,
+            ref,
+            "data-attachable": true
+          }
+        ), /* @__PURE__ */ React88__namespace.default.createElement(exports.FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label), /* @__PURE__ */ React88__namespace.default.createElement(exports.InputRightElement, { width: "fit-content" }, /* @__PURE__ */ React88__namespace.default.createElement(
+          react.Button,
+          {
+            variant: "ghost",
+            type: "button",
+            fontWeight: "normal",
+            size: "sm",
+            onClick: onToggle,
+            borderRadius: "sm",
+            marginRight: 1,
+            isDisabled: props.disabled || props.isDisabled
+          },
+          isShowingPassword ? t2(texts3.hidePassword) : t2(texts3.showPassword)
+        )));
+      }
+    );
+    texts3 = createTexts({
+      showPassword: {
+        nb: "Vis",
+        nn: "Vis",
+        en: "Show",
+        sv: "Visa"
+      },
+      hidePassword: {
+        nb: "Skjul",
+        nn: "Skjul",
+        en: "Hide",
+        sv: "D\xF6lj"
+      }
+    });
+  }
+});
+
+// src/input/CountryCodeSelect.tsx
+var CountryCodeSelect_exports = {};
+__export(CountryCodeSelect_exports, {
+  CountryCodeSelect: () => CountryCodeSelect,
+  default: () => CountryCodeSelect_default
+});
+var prioritizedCountryCodes, sortedCallingCodes, callingCodes, CountryCodeSelect, CountryCodeSelect_default, texts4;
+var init_CountryCodeSelect = __esm({
+  "src/input/CountryCodeSelect.tsx"() {
+    init_src();
+    prioritizedCountryCodes = [
+      { key: "+47", value: "+47" },
+      { key: "+46", value: "+46" },
+      { key: "+45", value: "+45" }
+    ];
+    sortedCallingCodes = awesomePhonenumber.getSupportedCallingCodes().sort((a, b) => Number(a) - Number(b)).map((code) => ({
+      key: `+${code}`,
+      value: `+${code}`
+    })).filter(
+      (code) => !prioritizedCountryCodes.some((pCode) => pCode.key === code.key)
+    );
+    callingCodes = [...prioritizedCountryCodes, ...sortedCallingCodes];
+    CountryCodeSelect = (props) => {
+      const { t: t2 } = useTranslation();
+      return /* @__PURE__ */ React88__namespace.default.createElement(
+        InfoSelect,
+        {
+          label: t2(texts4.countryCode),
+          isLabelSrOnly: true,
+          items: callingCodes,
+          ...props
+        },
+        (item) => /* @__PURE__ */ React88__namespace.default.createElement(reactStately.Item, { key: item.key }, item.key)
+      );
+    };
+    CountryCodeSelect_default = CountryCodeSelect;
+    texts4 = createTexts({
+      countryCode: {
+        nb: "Landkode",
+        nn: "Landskode",
+        en: "Country code",
+        sv: "Landskod"
+      }
+    });
+  }
+});
+exports.PhoneNumberInput = void 0; var texts5, LazyCountryCodeSelect;
+var init_PhoneNumberInput = __esm({
+  "src/input/PhoneNumberInput.tsx"() {
+    init_src();
+    init_AttachedInputs();
+    exports.PhoneNumberInput = react.forwardRef(
+      ({
+        label: externalLabel,
+        name,
+        value: externalValue,
+        onChange: externalOnChange,
+        ...boxProps
+      }, ref) => {
+        const { t: t2 } = useTranslation();
+        const label = externalLabel ?? t2(texts5.phoneNumber);
+        const [value, onChange] = react.useControllableState({
+          value: externalValue,
+          onChange: externalOnChange,
+          defaultValue: {
+            countryCode: "+47",
+            nationalNumber: ""
+          }
+        });
+        return /* @__PURE__ */ React88__namespace.default.createElement(exports.AttachedInputs, { ...boxProps }, /* @__PURE__ */ React88__namespace.default.createElement(
+          React88.Suspense,
+          {
+            fallback: /* @__PURE__ */ React88__namespace.default.createElement(
+              InfoSelect,
+              {
+                isLabelSrOnly: true,
+                label: "",
+                width: "6.25rem",
+                height: "100%",
+                value: "+47"
+              },
+              /* @__PURE__ */ React88__namespace.default.createElement(reactStately.Item, { key: "+47" }, "+47")
+            )
+          },
+          /* @__PURE__ */ React88__namespace.default.createElement(
+            LazyCountryCodeSelect,
+            {
+              value: value.countryCode,
+              onChange: (countryCode) => onChange({
+                countryCode,
+                nationalNumber: value.nationalNumber
+              }),
+              name: name ? `${name}-country-code` : "country-code",
+              height: "100%",
+              width: "6.25rem"
+            }
+          )
+        ), /* @__PURE__ */ React88__namespace.default.createElement(
+          exports.Input,
+          {
+            ref,
+            type: "tel",
+            label,
+            value: value.nationalNumber,
+            name: name ? `${name}-phone-number` : "phone-number",
+            onChange: (e) => {
+              const strippedValue = e.target.value.replace(/[^\d\s-]/g, "");
+              onChange({
+                countryCode: value.countryCode,
+                nationalNumber: strippedValue
+              });
+            },
+            position: "relative",
+            left: "1px"
+          }
+        ));
+      }
+    );
+    texts5 = createTexts({
+      phoneNumber: {
+        nb: "Telefonnummer",
+        nn: "Telefonnummer",
+        en: "Phone number",
+        sv: "Telefonnummer"
+      }
+    });
+    LazyCountryCodeSelect = React88__namespace.default.lazy(() => Promise.resolve().then(() => (init_CountryCodeSelect(), CountryCodeSelect_exports)));
+  }
+});
+exports.Radio = void 0;
+var init_Radio = __esm({
+  "src/input/Radio.tsx"() {
+    exports.Radio = react.forwardRef((props, ref) => {
+      return /* @__PURE__ */ React88__namespace.default.createElement(react.Radio, { ...props, ref });
+    });
+  }
+});
+exports.RadioGroup = void 0;
+var init_RadioGroup = __esm({
+  "src/input/RadioGroup.tsx"() {
+    exports.RadioGroup = react.forwardRef(
+      ({ children, direction: direction2 = "row", ...rest }, ref) => {
+        return /* @__PURE__ */ React88__namespace.default.createElement(react.RadioGroup, { ...rest, ref }, /* @__PURE__ */ React88__namespace.default.createElement(react.Stack, { direction: direction2 }, children));
+      }
+    );
+  }
+});
+exports.SearchInput = void 0; var texts6;
+var init_SearchInput = __esm({
+  "src/input/SearchInput.tsx"() {
     init_input();
     init_src();
-    exports.PasswordInput = react.forwardRef(
-      ({ leftIcon, id, label, size: size2, ...props }, ref) => {
-        const { isOpen: isShowingPassword, onToggle } = react.useDisclosure();
+    exports.SearchInput = react.forwardRef(
+      ({ label, onReset, ...props }, ref) => {
         const { t: t2 } = useTranslation();
+        const showClearButton = onReset && Boolean(props.value);
         const formControlProps = react.useFormControlContext();
-        const autoGeneratedId = `password-input-${React88.useId()}`;
-        const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? autoGeneratedId;
-        return /* @__PURE__ */ React88__namespace.default.createElement(react.InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React88__namespace.default.createElement(exports.InputLeftElement, null, leftIcon), /* @__PURE__ */ React88__namespace.default.createElement(
+        const autoGeneratedId = React88.useId();
+        const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? autoGeneratedId;
+        return /* @__PURE__ */ React88__namespace.default.createElement(react.InputGroup, { position: "relative" }, /* @__PURE__ */ React88__namespace.default.createElement(exports.InputLeftElement, null, /* @__PURE__ */ React88__namespace.default.createElement(sporIconReact.SearchOutline24Icon, null)), /* @__PURE__ */ React88__namespace.default.createElement(
           react.Input,
           {
+            paddingLeft: 7,
+            paddingRight: 7,
             ...props,
             id: inputId,
-            placeholder: " ",
-            type: isShowingPassword ? "text" : "password",
-            paddingRight: 10,
-            paddingLeft: leftIcon ? 7 : void 0,
+            type: "search",
+            css: {
+              "&::-webkit-search-cancel-button": {
+                WebkitAppearance: "none"
+              }
+            },
             ref,
+            placeholder: " ",
             "data-attachable": true
           }
-        ), /* @__PURE__ */ React88__namespace.default.createElement(exports.FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label), /* @__PURE__ */ React88__namespace.default.createElement(exports.InputRightElement, { width: "fit-content" }, /* @__PURE__ */ React88__namespace.default.createElement(
-          react.Button,
+        ), /* @__PURE__ */ React88__namespace.default.createElement(exports.FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label ?? t2(texts6.label)), showClearButton && /* @__PURE__ */ React88__namespace.default.createElement(exports.InputRightElement, { width: "fit-content" }, /* @__PURE__ */ React88__namespace.default.createElement(
+          react.IconButton,
           {
             variant: "ghost",
             type: "button",
-            fontWeight: "normal",
             size: "sm",
-            onClick: onToggle,
-            borderRadius: "sm",
             marginRight: 1,
-            isDisabled: props.disabled || props.isDisabled
-          },
-          isShowingPassword ? t2(texts3.hidePassword) : t2(texts3.showPassword)
+            "aria-label": t2(texts6.reset),
+            icon: /* @__PURE__ */ React88__namespace.default.createElement(sporIconReact.CloseOutline24Icon, null),
+            onClick: onReset
+          }
         )));
       }
     );
-    texts3 = createTexts({
-      showPassword: {
-        nb: "Vis",
-        nn: "Vis",
-        en: "Show",
-        sv: "Visa"
+    texts6 = createTexts({
+      label: {
+        nb: "S\xF8k",
+        nn: "S\xF8k",
+        sv: "S\xF6k",
+        en: "Search"
       },
-      hidePassword: {
-        nb: "Skjul",
-        nn: "Skjul",
-        en: "Hide",
-        sv: "D\xF6lj"
+      reset: {
+        nb: "T\xF8m s\xF8kefeltet",
+        nn: "T\xF8m s\xF8kefelt",
+        sv: "Rensa s\xF6krutan",
+        en: "Reset search field"
       }
     });
   }
 });
-
-// src/input/CountryCodeSelect.tsx
-var CountryCodeSelect_exports = {};
-__export(CountryCodeSelect_exports, {
-  CountryCodeSelect: () => CountryCodeSelect,
-  default: () => CountryCodeSelect_default
-});
-var prioritizedCountryCodes, sortedCallingCodes, callingCodes, CountryCodeSelect, CountryCodeSelect_default, texts4;
-var init_CountryCodeSelect = __esm({
-  "src/input/CountryCodeSelect.tsx"() {
-    init_src();
-    prioritizedCountryCodes = [
-      { key: "+47", value: "+47" },
-      { key: "+46", value: "+46" },
-      { key: "+45", value: "+45" }
-    ];
-    sortedCallingCodes = awesomePhonenumber.getSupportedCallingCodes().sort((a, b) => Number(a) - Number(b)).map((code) => ({
-      key: `+${code}`,
-      value: `+${code}`
-    })).filter(
-      (code) => !prioritizedCountryCodes.some((pCode) => pCode.key === code.key)
-    );
-    callingCodes = [...prioritizedCountryCodes, ...sortedCallingCodes];
-    CountryCodeSelect = (props) => {
-      const { t: t2 } = useTranslation();
-      return /* @__PURE__ */ React88__namespace.default.createElement(
-        InfoSelect,
-        {
-          label: t2(texts4.countryCode),
-          isLabelSrOnly: true,
-          items: callingCodes,
-          ...props
-        },
-        (item) => /* @__PURE__ */ React88__namespace.default.createElement(reactStately.Item, { key: item.key }, item.key)
-      );
-    };
-    CountryCodeSelect_default = CountryCodeSelect;
-    texts4 = createTexts({
-      countryCode: {
-        nb: "Landkode",
-        nn: "Landskode",
-        en: "Country code",
-        sv: "Landskod"
+exports.Switch = void 0;
+var init_Switch = __esm({
+  "src/input/Switch.tsx"() {
+    exports.Switch = react.forwardRef(
+      ({ size: size2 = "md", ...props }, ref) => {
+        return /* @__PURE__ */ React88__namespace.default.createElement(react.Switch, { size: size2, ...props, ref });
       }
+    );
+  }
+});
+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
+  };
+}
+exports.Textarea = void 0;
+var init_Textarea = __esm({
+  "src/input/Textarea.tsx"() {
+    exports.Textarea = react.forwardRef((props, ref) => {
+      const {
+        spacingProps,
+        remainingProps: { label, ...rest }
+      } = getSpacingProps(props);
+      const formControlProps = react.useFormControlContext();
+      const fallbackId = `textarea-${React88.useId()}`;
+      const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
+      return /* @__PURE__ */ React88__namespace.default.createElement(react.InputGroup, { position: "relative", ...spacingProps }, /* @__PURE__ */ React88__namespace.default.createElement(react.Textarea, { ...rest, id: inputId, ref, placeholder: " " }), label && /* @__PURE__ */ React88__namespace.default.createElement(react.FormLabel, { htmlFor: inputId, id: `${inputId}-label` }, label));
     });
   }
 });
-exports.PhoneNumberInput = void 0; var texts5, LazyCountryCodeSelect;
-var init_PhoneNumberInput = __esm({
-  "src/input/PhoneNumberInput.tsx"() {
-    init_src();
+var init_input = __esm({
+  "src/input/index.tsx"() {
     init_AttachedInputs();
-    exports.PhoneNumberInput = react.forwardRef(
-      ({
-        label: externalLabel,
-        name,
-        value: externalValue,
-        onChange: externalOnChange,
-        ...boxProps
-      }, ref) => {
-        const { t: t2 } = useTranslation();
-        const label = externalLabel ?? t2(texts5.phoneNumber);
-        const [value, onChange] = react.useControllableState({
-          value: externalValue,
-          onChange: externalOnChange,
-          defaultValue: {
-            countryCode: "+47",
-            nationalNumber: ""
+    init_CardSelect();
+    init_Checkbox();
+    init_CheckboxGroup();
+    init_ChoiceChip();
+    init_Combobox();
+    init_FormControl();
+    init_FormErrorMessage();
+    init_FormLabel();
+    init_InfoSelect();
+    init_Input();
+    init_InputElement();
+    init_ListBox();
+    init_NativeSelect();
+    init_NumericStepper();
+    init_PasswordInput();
+    init_PhoneNumberInput();
+    init_Radio();
+    init_RadioGroup();
+    init_SearchInput();
+    init_Switch();
+    init_Textarea();
+  }
+});
+exports.RadioCardGroupContext = void 0; exports.RadioCardGroup = void 0;
+var init_RadioCardGroup = __esm({
+  "src/layout/RadioCardGroup.tsx"() {
+    init_input();
+    exports.RadioCardGroupContext = React88__namespace.default.createContext(null);
+    exports.RadioCardGroup = ({
+      children,
+      name,
+      variant = "base",
+      direction: direction2 = "row",
+      groupLabel,
+      defaultValue,
+      ...props
+    }) => {
+      const [selectedValue, setSelectedValue] = React88.useState(
+        defaultValue || ""
+      );
+      const handleChange = (value) => {
+        setSelectedValue(value);
+      };
+      return /* @__PURE__ */ React88__namespace.default.createElement(
+        exports.RadioCardGroupContext.Provider,
+        {
+          value: {
+            name,
+            selectedValue,
+            onChange: handleChange,
+            variant,
+            defaultValue: defaultValue || ""
           }
-        });
-        return /* @__PURE__ */ React88__namespace.default.createElement(exports.AttachedInputs, { ...boxProps }, /* @__PURE__ */ React88__namespace.default.createElement(
-          React88.Suspense,
+        },
+        /* @__PURE__ */ React88__namespace.default.createElement(
+          react.Stack,
           {
-            fallback: /* @__PURE__ */ React88__namespace.default.createElement(
-              InfoSelect,
-              {
-                isLabelSrOnly: true,
-                label: "",
-                width: "6.25rem",
-                height: "100%",
-                value: "+47"
-              },
-              /* @__PURE__ */ React88__namespace.default.createElement(reactStately.Item, { key: "+47" }, "+47")
-            )
+            as: "fieldset",
+            direction: direction2,
+            "aria-labelledby": groupLabel || name,
+            role: "radiogroup",
+            tabIndex: 0,
+            ...props
           },
-          /* @__PURE__ */ React88__namespace.default.createElement(
-            LazyCountryCodeSelect,
-            {
-              value: value.countryCode,
-              onChange: (countryCode) => onChange({
-                countryCode,
-                nationalNumber: value.nationalNumber
-              }),
-              name: name ? `${name}-country-code` : "country-code",
-              height: "100%",
-              width: "6.25rem"
-            }
-          )
-        ), /* @__PURE__ */ React88__namespace.default.createElement(
-          exports.Input,
+          groupLabel && /* @__PURE__ */ React88__namespace.default.createElement(exports.FormLabel, { as: "legend", id: groupLabel }, groupLabel),
+          children
+        )
+      );
+    };
+  }
+});
+exports.RadioCard = void 0;
+var init_RadioCard = __esm({
+  "src/layout/RadioCard.tsx"() {
+    init_RadioCardGroup();
+    exports.RadioCard = react.forwardRef(
+      ({ children, value = "base", isDisabled, ...props }, ref) => {
+        const context = React88.useContext(exports.RadioCardGroupContext);
+        if (!context) {
+          throw new Error(
+            "RadioCard components must be wrapped in a RadioCardGroup component"
+          );
+        }
+        const { name, selectedValue, onChange, variant } = context;
+        const styles3 = react.useMultiStyleConfig("RadioCard", { variant });
+        const isChecked = selectedValue === value;
+        const radioCardId = `radio-card-${React88.useId()}`;
+        React88.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__ */ React88__namespace.default.createElement(react.Box, { as: "label", "aria-label": String(children), onKeyDown: handleKeyDown }, /* @__PURE__ */ React88__namespace.default.createElement(
+          react.chakra.input,
           {
+            type: "radio",
+            id: radioCardId,
             ref,
-            type: "tel",
-            label,
-            value: value.nationalNumber,
-            name: name ? `${name}-phone-number` : "phone-number",
-            onChange: (e) => {
-              const strippedValue = e.target.value.replace(/[^\d\s-]/g, "");
-              onChange({
-                countryCode: value.countryCode,
-                nationalNumber: strippedValue
-              });
-            },
-            position: "relative",
-            left: "1px"
+            value,
+            name,
+            checked: isChecked,
+            onChange: () => onChange(value),
+            disabled: isDisabled,
+            __css: styles3.radioInput
           }
+        ), /* @__PURE__ */ React88__namespace.default.createElement(
+          react.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
         ));
       }
     );
-    texts5 = createTexts({
-      phoneNumber: {
-        nb: "Telefonnummer",
-        nn: "Telefonnummer",
-        en: "Phone number",
-        sv: "Telefonnummer"
-      }
-    });
-    LazyCountryCodeSelect = React88__namespace.default.lazy(() => Promise.resolve().then(() => (init_CountryCodeSelect(), CountryCodeSelect_exports)));
   }
 });
-exports.Radio = void 0;
-var init_Radio = __esm({
-  "src/input/Radio.tsx"() {
-    exports.Radio = react.forwardRef((props, ref) => {
-      return /* @__PURE__ */ React88__namespace.default.createElement(react.Radio, { ...props, ref });
-    });
+exports.StaticCard = void 0;
+var init_StaticCard = __esm({
+  "src/layout/StaticCard.tsx"() {
+    exports.StaticCard = react.forwardRef(
+      ({ colorScheme = "white", children, ...props }, ref) => {
+        const styles3 = react.useStyleConfig("StaticCard", {
+          colorScheme
+        });
+        return /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { __css: styles3, ...props, ref }, children);
+      }
+    );
   }
 });
-exports.RadioGroup = void 0;
-var init_RadioGroup = __esm({
-  "src/input/RadioGroup.tsx"() {
-    exports.RadioGroup = react.forwardRef(
-      ({ children, direction: direction2 = "row", ...rest }, ref) => {
-        return /* @__PURE__ */ React88__namespace.default.createElement(react.RadioGroup, { ...rest, ref }, /* @__PURE__ */ React88__namespace.default.createElement(react.Stack, { direction: direction2 }, children));
+exports.PressableCard = void 0;
+var init_PressableCard = __esm({
+  "src/layout/PressableCard.tsx"() {
+    exports.PressableCard = react.forwardRef(
+      ({ children, variant = "floating", ...props }, ref) => {
+        const styles3 = react.useStyleConfig("PressableCard", {
+          variant
+        });
+        return /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { __css: styles3, ...props, ref }, children);
       }
     );
   }
 });
-exports.SearchInput = void 0; var texts6;
-var init_SearchInput = __esm({
-  "src/input/SearchInput.tsx"() {
-    init_input();
-    init_src();
-    exports.SearchInput = react.forwardRef(
-      ({ label, onReset, ...props }, ref) => {
-        const { t: t2 } = useTranslation();
-        const showClearButton = onReset && Boolean(props.value);
-        const formControlProps = react.useFormControlContext();
-        const autoGeneratedId = React88.useId();
-        const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? autoGeneratedId;
-        return /* @__PURE__ */ React88__namespace.default.createElement(react.InputGroup, { position: "relative" }, /* @__PURE__ */ React88__namespace.default.createElement(exports.InputLeftElement, null, /* @__PURE__ */ React88__namespace.default.createElement(sporIconReact.SearchOutline24Icon, null)), /* @__PURE__ */ React88__namespace.default.createElement(
-          react.Input,
+var init_layout = __esm({
+  "src/layout/index.tsx"() {
+    init_Divider();
+    init_Stack();
+    init_RadioCard();
+    init_RadioCardGroup();
+    init_StaticCard();
+    init_PressableCard();
+  }
+});
+var AccordionContext, AccordionProvider, useAccordionContext;
+var init_AccordionContext = __esm({
+  "src/accordion/AccordionContext.tsx"() {
+    AccordionContext = React88__namespace.default.createContext(null);
+    AccordionProvider = ({
+      size: size2,
+      ...props
+    }) => {
+      return /* @__PURE__ */ React88__namespace.default.createElement(AccordionContext.Provider, { value: { size: size2 }, ...props });
+    };
+    useAccordionContext = () => {
+      const context = React88__namespace.default.useContext(AccordionContext);
+      if (context === null) {
+        throw new Error(
+          "useAccordionContext must be used within AccordionProvider"
+        );
+      }
+      return context;
+    };
+  }
+});
+exports.Accordion = void 0;
+var init_Accordion = __esm({
+  "src/accordion/Accordion.tsx"() {
+    init_layout();
+    init_AccordionContext();
+    exports.Accordion = react.forwardRef(
+      ({ children, spacing: spacing3 = 2, ...props }, ref) => {
+        const defaultIndex = typeof props.defaultIndex === "number" && props.allowMultiple ? [props.defaultIndex] : props.defaultIndex;
+        return /* @__PURE__ */ React88__namespace.default.createElement(AccordionProvider, { size: props.size }, /* @__PURE__ */ React88__namespace.default.createElement(
+          react.Accordion,
           {
-            paddingLeft: 7,
-            paddingRight: 7,
             ...props,
-            id: inputId,
-            type: "search",
-            css: {
-              "&::-webkit-search-cancel-button": {
-                WebkitAppearance: "none"
-              }
-            },
             ref,
-            placeholder: " ",
-            "data-attachable": true
-          }
-        ), /* @__PURE__ */ React88__namespace.default.createElement(exports.FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label ?? t2(texts6.label)), showClearButton && /* @__PURE__ */ React88__namespace.default.createElement(exports.InputRightElement, { width: "fit-content" }, /* @__PURE__ */ React88__namespace.default.createElement(
-          react.IconButton,
-          {
-            variant: "ghost",
-            type: "button",
-            size: "sm",
-            marginRight: 1,
-            "aria-label": t2(texts6.reset),
-            icon: /* @__PURE__ */ React88__namespace.default.createElement(sporIconReact.CloseOutline24Icon, null),
-            onClick: onReset
-          }
-        )));
+            defaultIndex
+          },
+          /* @__PURE__ */ React88__namespace.default.createElement(exports.Stack, { spacing: spacing3 }, children)
+        ));
       }
     );
-    texts6 = createTexts({
-      label: {
-        nb: "S\xF8k",
-        nn: "S\xF8k",
-        sv: "S\xF6k",
-        en: "Search"
+  }
+});
+exports.Expandable = void 0; exports.ExpandableItem = void 0; var warnAboutMismatchingIcon;
+var init_Expandable = __esm({
+  "src/accordion/Expandable.tsx"() {
+    init_Accordion();
+    init_AccordionContext();
+    exports.Expandable = ({
+      children,
+      headingLevel,
+      title,
+      leftIcon,
+      size: size2 = "md",
+      defaultOpen,
+      isOpen,
+      onChange = () => {
       },
-      reset: {
-        nb: "T\xF8m s\xF8kefeltet",
-        nn: "T\xF8m s\xF8kefelt",
-        sv: "Rensa s\xF6krutan",
-        en: "Reset search field"
+      ...rest
+    }) => {
+      return /* @__PURE__ */ React88__namespace.default.createElement(
+        exports.Accordion,
+        {
+          ...rest,
+          index: isOpen ? 0 : void 0,
+          defaultIndex: defaultOpen ? 0 : void 0,
+          allowMultiple: true,
+          size: size2,
+          onChange: (expandedIndex) => onChange(expandedIndex === 0)
+        },
+        /* @__PURE__ */ React88__namespace.default.createElement(
+          exports.ExpandableItem,
+          {
+            headingLevel,
+            title,
+            leftIcon
+          },
+          children
+        )
+      );
+    };
+    exports.ExpandableItem = ({
+      children,
+      title,
+      headingLevel = "h3",
+      leftIcon,
+      ...rest
+    }) => {
+      const { size: size2 } = useAccordionContext();
+      warnAboutMismatchingIcon({ icon: leftIcon, size: size2 });
+      return /* @__PURE__ */ React88__namespace.default.createElement(react.AccordionItem, { ...rest }, /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { as: headingLevel }, /* @__PURE__ */ React88__namespace.default.createElement(react.AccordionButton, null, /* @__PURE__ */ React88__namespace.default.createElement(react.Flex, { alignItems: "center" }, leftIcon && /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { marginRight: 1 }, leftIcon), title), /* @__PURE__ */ React88__namespace.default.createElement(react.AccordionIcon, null))), /* @__PURE__ */ React88__namespace.default.createElement(react.AccordionPanel, null, children));
+    };
+    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"
+            )}.`
+          );
+        }
       }
-    });
+    };
   }
 });
-exports.Switch = void 0;
-var init_Switch = __esm({
-  "src/input/Switch.tsx"() {
-    exports.Switch = react.forwardRef(
-      ({ size: size2 = "md", ...props }, ref) => {
-        return /* @__PURE__ */ React88__namespace.default.createElement(react.Switch, { size: size2, ...props, ref });
-      }
-    );
+
+// src/accordion/index.tsx
+var init_accordion = __esm({
+  "src/accordion/index.tsx"() {
+    init_Accordion();
+    init_Expandable();
   }
 });
-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
+function LanguageProvider({
+  language,
+  children
+}) {
+  return /* @__PURE__ */ React88__namespace.default.createElement(LanguageContext.Provider, { value: language }, children);
+}
+function useLanguage() {
+  const language = React88.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 };
 }
-exports.Textarea = void 0;
-var init_Textarea = __esm({
-  "src/input/Textarea.tsx"() {
-    exports.Textarea = react.forwardRef((props, ref) => {
-      const {
-        spacingProps,
-        remainingProps: { label, ...rest }
-      } = getSpacingProps(props);
-      const formControlProps = react.useFormControlContext();
-      const fallbackId = `textarea-${React88.useId()}`;
-      const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
-      return /* @__PURE__ */ React88__namespace.default.createElement(react.InputGroup, { position: "relative", ...spacingProps }, /* @__PURE__ */ React88__namespace.default.createElement(react.Textarea, { ...rest, id: inputId, ref, placeholder: " " }), label && /* @__PURE__ */ React88__namespace.default.createElement(react.FormLabel, { htmlFor: inputId, id: `${inputId}-label` }, label));
-    });
+function createTexts(texts29) {
+  return texts29;
+}
+exports.Language = void 0; var LanguageContext;
+var init_i18n = __esm({
+  "src/i18n/index.tsx"() {
+    exports.Language = /* @__PURE__ */ ((Language3) => {
+      Language3["NorwegianBokmal"] = "nb";
+      Language3["NorwegianNynorsk"] = "nn";
+      Language3["Swedish"] = "sv";
+      Language3["English"] = "en";
+      return Language3;
+    })(exports.Language || {});
+    LanguageContext = React88.createContext(void 0);
   }
 });
-var init_input = __esm({
-  "src/input/index.tsx"() {
-    init_AttachedInputs();
-    init_CardSelect();
-    init_Checkbox();
-    init_CheckboxGroup();
-    init_ChoiceChip();
-    init_Combobox();
-    init_FormControl();
-    init_FormErrorMessage();
-    init_FormLabel();
-    init_InfoSelect();
-    init_Input();
-    init_InputElement();
-    init_ListBox();
-    init_NativeSelect();
-    init_NumericStepper();
-    init_PasswordInput();
-    init_PhoneNumberInput();
-    init_Radio();
-    init_RadioGroup();
-    init_SearchInput();
-    init_Switch();
-    init_Textarea();
+function useHydrated() {
+  let [hydrated, setHydrated] = React88.useState(() => !hydrating);
+  React88.useEffect(function hydrate() {
+    hydrating = false;
+    setHydrated(true);
+  }, []);
+  return hydrated;
+}
+var hydrating;
+var init_useHydrated = __esm({
+  "src/loader/useHydrated.tsx"() {
+    hydrating = true;
+  }
+});
+var ClientOnly;
+var init_ClientOnly = __esm({
+  "src/loader/ClientOnly.tsx"() {
+    init_useHydrated();
+    ClientOnly = ({ children, fallback = null }) => {
+      const isHydrated = useHydrated();
+      return /* @__PURE__ */ React88__namespace.default.createElement(React88__namespace.default.Fragment, null, isHydrated ? children() : fallback);
+    };
+  }
+});
+function Lottie({ animationData }) {
+  const { View } = lottieReact.useLottie({ animationData, loop: true });
+  return /* @__PURE__ */ React88__namespace.default.createElement(React88__namespace.default.Fragment, null, View);
+}
+var init_Lottie = __esm({
+  "src/loader/Lottie.tsx"() {
+  }
+});
+var PrideContext; exports.PrideProvider = void 0; exports.usePride = void 0;
+var init_PrideProvider = __esm({
+  "src/pride/PrideProvider.tsx"() {
+    PrideContext = React88.createContext(void 0);
+    exports.PrideProvider = ({
+      children
+    }) => {
+      const isBrowser2 = typeof window !== "undefined";
+      const key = "spor__isPride";
+      const [isPride, setIsPride] = React88.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;
+        });
+      };
+      React88.useEffect(() => {
+        if (isBrowser2) {
+          const savedState = localStorage.getItem(key);
+          if (savedState) {
+            setIsPride(JSON.parse(savedState));
+          }
+        }
+      }, [isBrowser2]);
+      return /* @__PURE__ */ React88__namespace.default.createElement(PrideContext.Provider, { value: { isPride, togglePride } }, children);
+    };
+    exports.usePride = () => {
+      const context = React88.useContext(PrideContext);
+      if (context === void 0) {
+        throw new Error("usePride must be used within a PrideProvider");
+      }
+      return context;
+    };
   }
 });
 exports.TogglePride = void 0;
@@ -15011,7 +15035,6 @@ var init_radio_card = __esm({
     config33 = helpers24.defineMultiStyleConfig({
       baseStyle: (props) => ({
         container: {
-          appearance: "none",
           border: "none",
           overflow: "hidden",
           fontSize: "inherit",
@@ -15053,6 +15076,9 @@ var init_radio_card = __esm({
             _active: {
               ...baseBackground("active", props),
               ...baseBorder("active", props)
+            },
+            _focus: {
+              ...outlineBorder("focus", props)
             }
           },
           checked: {
@@ -15062,13 +15088,17 @@ var init_radio_card = __esm({
             _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",
@@ -15080,16 +15110,25 @@ var init_radio_card = __esm({
             _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"
             }
           }
         })