@telia/teddy 0.3.2 → 0.3.3

package/dist/components/radio-card-group/radio-card-group-item-title.cjs

@@ -36,6 +36,13 @@ const components_drawer_index = require("../drawer/index.cjs");
 require("../image/image.cjs");
 require("../chip/index.cjs");
 require("../../assets/sprite.1321fab0-teddy.svg");
+const components_modal_modalRoot = require("../modal/modal-root.cjs");
+const components_modal_modalTrigger = require("../modal/modal-trigger.cjs");
+const components_modal_modalContent = require("../modal/modal-content.cjs");
+const components_modal_modalTitle = require("../modal/modal-title.cjs");
+const components_modal_modalDescription = require("../modal/modal-description.cjs");
+const components_modal_modalOverlay = require("../modal/modal-overlay.cjs");
+const components_modal_modalGroup = require("../modal/modal-group.cjs");
 const DrawerPrimitive = require("@radix-ui/react-dialog");
 const components_icon_icon = require("../icon/icon.cjs");
 require("../notification/index.cjs");
@@ -63,6 +70,8 @@ const components_textSpacing_textSpacing = require("../text-spacing/text-spacing
 require("../container/container.cjs");
 require("../carousel/carousel-root.cjs");
 require("../slider/slider.cjs");
+const modal_module = require("../../modal.module-BfeNqXoN.cjs");
+const components_modal_modalImage = require("../modal/modal-image.cjs");
 const components_radioCardGroup_radioCardGroupIndicator = require("./radio-card-group-indicator.cjs");
 const components_radioCardGroup_radioCardGroupItemBody = require("./radio-card-group-item-body.cjs");
 const RadioGroupPrimitive = require("@radix-ui/react-radio-group");
@@ -86,7 +95,7 @@ function _interopNamespaceDefault(e) {
 const NavigationMenuPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(NavigationMenuPrimitive);
 const DrawerPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(DrawerPrimitive);
 const RadioGroupPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadioGroupPrimitive);
-const Title$1 = React.forwardRef(
+const Title = React.forwardRef(
   ({ className, children, asChild, ...props }, forwardRef) => {
     const classes = clsx([components_radioCardGroup_radioCardGroupRoot.styles[`${components_radioCardGroup_radioCardGroupRoot.rootClassName}__title`]], className);
     return /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { width: "100%", gap: "150", className: components_radioCardGroup_radioCardGroupRoot.styles[`${components_radioCardGroup_radioCardGroupRoot.rootClassName}__title-wrapper`], children: [
@@ -95,14 +104,14 @@ const Title$1 = React.forwardRef(
     ] });
   }
 );
-Title$1.displayName = "Title";
-const Content$2 = React.forwardRef(
+Title.displayName = "Title";
+const Content$1 = React.forwardRef(
   ({ className, children, ...props }, forwardRef) => {
     const classes = clsx([components_radioCardGroup_radioCardGroupRoot.styles[`${components_radioCardGroup_radioCardGroupRoot.rootClassName}__content-wrapper`]], className);
     return /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { direction: "column", width: "100%", gap: "50", ...props, ref: forwardRef, className: classes, children });
   }
 );
-Content$2.displayName = "Content";
+Content$1.displayName = "Content";
 const ItemContext = React.createContext(void 0);
 const Item$1 = React.forwardRef(
   ({ className, children, value, ...props }, forwardedRef) => {
@@ -112,7 +121,7 @@ const Item$1 = React.forwardRef(
     const id = props.id || (context == null ? void 0 : context.id);
     return /* @__PURE__ */ jsxRuntime.jsxs(RadioGroupPrimitive__namespace.Item, { value, id, ...props, asChild: false, ref, className: classes, children: [
       props.imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { className: clsx([components_radioCardGroup_radioCardGroupRoot.styles[`${components_radioCardGroup_radioCardGroupRoot.rootClassName}__illustration`]], className), justify: "center", align: "center", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: props.imageUrl, alt: value }) }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx(Content$2, { children })
+      /* @__PURE__ */ jsxRuntime.jsx(Content$1, { children })
     ] });
   }
 );
@@ -120,169 +129,57 @@ Item$1.displayName = "Item";
 components_radioCardGroup_radioCardGroupRoot.Root.displayName = "RadioCardGroup";
 components_radioCardGroup_radioCardGroupLabel.GroupLabel.displayName = "RadioCardGroup.GroupLabel";
 Item$1.displayName = "RadioCardGroup.Item";
-Title$1.displayName = "RadioCardGroup.Title";
+Title.displayName = "RadioCardGroup.Title";
 components_radioCardGroup_radioCardGroupItemBody.Body.displayName = "RadioCardGroup.Body";
 const RadioCardGroup = Object.assign(components_radioCardGroup_radioCardGroupRoot.Root, {
   GroupLabel: components_radioCardGroup_radioCardGroupLabel.GroupLabel,
   Item: Item$1,
-  Title: Title$1,
+  Title,
   Body: components_radioCardGroup_radioCardGroupItemBody.Body
 });
-const styles$2 = {
-  "teddy-modal__overlay": "_teddy-modal__overlay_lkqhu_25",
-  "teddy-modal__content": "_teddy-modal__content_lkqhu_37",
-  "teddy-modal__scroll": "_teddy-modal__scroll_lkqhu_55",
-  "teddy-modal__image": "_teddy-modal__image_lkqhu_59",
-  "teddy-modal__close--floating": "_teddy-modal__close--floating_lkqhu_69",
-  "teddy-modal__group": "_teddy-modal__group_lkqhu_79",
-  "teddy-modal__group--title": "_teddy-modal__group--title_lkqhu_83",
-  "teddy-modal__group--scroll": "_teddy-modal__group--scroll_lkqhu_94",
-  "teddy-modal__group--action": "_teddy-modal__group--action_lkqhu_103",
-  "modal-overlay-no-op": "_modal-overlay-no-op_lkqhu_1",
-  "teddy-fade-in": "_teddy-fade-in_lkqhu_1",
-  "teddy-fade-out": "_teddy-fade-out_lkqhu_1",
-  "modal-content-show": "_modal-content-show_lkqhu_1",
-  "modal-content-hide": "_modal-content-hide_lkqhu_1",
-  "teddy-overlay-no-op": "_teddy-overlay-no-op_lkqhu_1"
-};
-const rootClassName$2 = "teddy-modal";
-const RootContext$1 = React.createContext({
-  imageRef: null,
-  actionGroupRef: null,
-  scrollRef: null
-});
-const Root$2 = (props) => {
-  const imageRef = React.useRef(null);
-  const actionGroupRef = React.useRef(null);
-  const scrollRef = React.useRef(null);
-  return /* @__PURE__ */ jsxRuntime.jsx(RootContext$1.Provider, { value: { imageRef, actionGroupRef, scrollRef }, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerPrimitive__namespace.Root, { ...props, modal: true }) });
-};
-Root$2.displayName = "Modal.Root";
-const Trigger$1 = React.forwardRef(
-  ({ children, ...props }, forwardedRef) => /* @__PURE__ */ jsxRuntime.jsx(DrawerPrimitive__namespace.Trigger, { ...props, ref: forwardedRef, asChild: true, children })
-);
-Trigger$1.displayName = "Modal.Trigger";
-const OverlayContext = React.createContext(false);
-const Overlay = React.forwardRef(
-  ({ className, forceMount, container, ...rest }, forwardedRef) => {
-    const classes = clsx([styles$2[`${rootClassName$2}__overlay`]], className);
-    return /* @__PURE__ */ jsxRuntime.jsx(OverlayContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerPrimitive__namespace.Portal, { container, forceMount, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerPrimitive__namespace.Overlay, { className: classes, ref: forwardedRef, ...rest }) }) });
-  }
-);
-Overlay.displayName = "Modal.Content";
-const InnerContent = React.forwardRef(
-  function InnerContent2({ asChild, children, className, ...props }, forwardedRef) {
-    const classes = clsx([styles$2[`${rootClassName$2}__scroll`]], className);
-    const context = React.useContext(RootContext$1);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      DrawerPrimitive__namespace.Content,
-      {
-        ...props,
-        ref: forwardedRef,
-        className: clsx([styles$2[`${rootClassName$2}__content`]]),
-        asChild: true,
-        children: /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          components_flex_flex.Flex,
-          {
-            ...asChild ? { as: void 0, asChild } : {},
-            direction: "column",
-            align: "start",
-            maxWidth: { md: "600px" },
-            className: classes,
-            ref: context.scrollRef,
-            children
-          }
-        ) })
-      }
-    );
-  }
-);
-const Content$1 = React.forwardRef(
-  ({ forceMount, ...contentProps }, forwardedRef) => {
-    const hasOverlay = React.useContext(OverlayContext);
-    if (!hasOverlay)
-      return /* @__PURE__ */ jsxRuntime.jsx(Overlay, { forceMount, children: /* @__PURE__ */ jsxRuntime.jsx(InnerContent, { ref: forwardedRef, ...contentProps }) });
-    return /* @__PURE__ */ jsxRuntime.jsx(InnerContent, { ref: forwardedRef, ...contentProps });
-  }
-);
-Content$1.displayName = "Modal.Content";
-const GroupContext = React.createContext(false);
-const Group = React.forwardRef(
-  ({ className, variant, ...props }, forwardedRef) => {
-    const strollerRef = React.useContext(RootContext$1).scrollRef;
-    const [isOverflowing, setIsOverflowing] = React.useState(false);
-    React.useEffect(() => {
-      if (strollerRef == null ? void 0 : strollerRef.current) {
-        const hasOverflow = strollerRef.current.scrollHeight > strollerRef.current.clientHeight;
-        setIsOverflowing(hasOverflow);
-      }
-    }, [strollerRef]);
-    const classes = clsx(
-      [styles$2[`${rootClassName$2}__group`]],
-      {
-        [styles$2[`${rootClassName$2}__group--action`]]: variant === "action",
-        [styles$2[`${rootClassName$2}__group--title`]]: variant === "title",
-        [styles$2[`${rootClassName$2}__group--scroll`]]: isOverflowing
-      },
-      className
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(GroupContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      components_flex_flex.Flex,
-      {
-        ...variant === "action" ? {
-          gap: "200",
-          justify: { md: "end" },
-          align: { sm: "stretch", md: "end" },
-          direction: { sm: "column-reverse", md: "row" }
-        } : { direction: "column" },
-        ref: forwardedRef,
-        ...props,
-        className: classes
-      }
-    ) });
-  }
-);
-Group.displayName = "Modal.Group";
-const TitleInner = React.forwardRef(
-  function TitleInner2(props, forwardedRef) {
-    return /* @__PURE__ */ jsxRuntime.jsx(DrawerPrimitive__namespace.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(components_heading_heading.Heading, { variant: "title-200", as: "h2", ...props, asChild: false, ref: forwardedRef }) });
-  }
-);
-const Title = React.forwardRef((props, forwardedRef) => {
-  const isInsideGroup = React.useContext(GroupContext);
-  if (!isInsideGroup) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Group, { variant: "title", children: /* @__PURE__ */ jsxRuntime.jsx(TitleInner, { ...props, ref: forwardedRef }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(TitleInner, { ...props, ref: forwardedRef });
-});
-Title.displayName = "Modal.Title";
-const Description = React.forwardRef((props, forwardedRef) => /* @__PURE__ */ jsxRuntime.jsx(DrawerPrimitive__namespace.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { as: "p", variant: "paragraph-100", ...props, asChild: false, ref: forwardedRef }) }));
-Description.displayName = "Modal.Description";
-const Image = React.forwardRef(({ asChild, ...props }, forwardedRef) => {
-  const classes = clsx([styles$2[`${rootClassName$2}__image`]], props.className);
-  const context = React.useContext(RootContext$1);
-  const Comp = asChild ? reactSlot.Slot : "img";
-  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...props, className: classes, ref: utils_composeRefs.composeRefs(context.imageRef, forwardedRef) });
-});
-Image.displayName = "Modal.Image";
 const Close = React.forwardRef(
   ({ className, ...props }, forwardedRef) => {
-    const classes = clsx([styles$2[`${rootClassName$2}__close`]], {
-      [styles$2[`${rootClassName$2}__close--floating`]]: props.slot === "floating",
+    const classes = clsx([modal_module.styles[`${components_modal_modalRoot.rootClassName}__close`]], {
+      [modal_module.styles[`${components_modal_modalRoot.rootClassName}__close--floating`]]: props.slot === "floating",
       className
     });
-    const imageRef = React.useContext(RootContext$1).imageRef;
+    const imageRef = React.useContext(components_modal_modalRoot.RootContext).imageRef;
     const [hasImage, setHasImage] = React.useState(false);
     React.useEffect(() => {
       if (imageRef == null ? void 0 : imageRef.current) {
         setHasImage(true);
       }
     }, [imageRef]);
-    return /* @__PURE__ */ jsxRuntime.jsx(DrawerPrimitive__namespace.Close, { ...props, className: classes, ref: forwardedRef, asChild: true, children: props.children || /* @__PURE__ */ jsxRuntime.jsx(components_button_button.Button, { variant: hasImage ? "primary-negative" : "tertiary-purple", iconOnly: true, "aria-label": props["aria-label"], children: /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "close" }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(DrawerPrimitive__namespace.Close, { ...props, className: classes, ref: forwardedRef, asChild: true, children: props.children || /* @__PURE__ */ jsxRuntime.jsx(
+      components_button_button.Button,
+      {
+        variant: hasImage ? "primary-negative" : "tertiary-purple",
+        iconOnly: true,
+        "aria-label": props["aria-label"] ?? "Lukk",
+        children: /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "close" })
+      }
+    ) });
   }
 );
 Close.displayName = "Close";
-const Modal = Object.assign(Root$2, { Trigger: Trigger$1, Content: Content$1, Title, Overlay, Description, Close, Image, Group });
+const Modal = components_modal_modalRoot.Root;
+Modal.displayName = "Modal";
+Modal.Trigger = components_modal_modalTrigger.Trigger;
+Modal.Trigger.displayName = "Modal.Trigger";
+Modal.Content = components_modal_modalContent.Content;
+Modal.Content.displayName = "Modal.Content";
+Modal.Title = components_modal_modalTitle.Title;
+Modal.Title.displayName = "Modal.Title";
+Modal.Description = components_modal_modalDescription.Description;
+Modal.Description.displayName = "Modal.Description";
+Modal.Overlay = components_modal_modalOverlay.Overlay;
+Modal.Overlay.displayName = "Modal.Overlay";
+Modal.Group = components_modal_modalGroup.Group;
+Modal.Group.displayName = "Modal.Group";
+Modal.Close = Close;
+Modal.Close.displayName = "Modal.Close";
+Modal.Image = components_modal_modalImage.Image;
+Modal.Image.displayName = "Modal.Image";
 const styles$1 = {
   "teddy-navigation-menu": "_teddy-navigation-menu_6p30v_1",
   "teddy-navigation-menu__viewport": "_teddy-navigation-menu__viewport_6p30v_34",
@@ -1403,7 +1300,8 @@ function getInitialMenuItem(currentPath) {
 }
 Root.displayName = "GlobalNavigation";
 const GlobalNavigation = Root;
-exports.Content = Content$2;
+exports.Close = Close;
+exports.Content = Content$1;
 exports.Desktop = Desktop;
 exports.DesktopSimplified = DesktopSimplified;
 exports.GlobalNavigation = GlobalNavigation;
@@ -1422,6 +1320,6 @@ exports.Search = Search;
 exports.SearchField = SearchField;
 exports.Separator = Separator;
 exports.ShoppingCart = ShoppingCart;
-exports.Title = Title$1;
+exports.Title = Title;
 exports.rootClassName = rootClassName$1;
 exports.rootClassName$1 = rootClassName;

package/dist/components/radio-card-group/radio-card-group-item-title.js

@@ -3,7 +3,7 @@ import React__default, { useEffect } from "react";
 import clsx from "clsx";
 import { MY_PAGE_LINKS, LOGGED_IN_LINKS_BUSINESS, PRIVATE_LINKS, BUSINESS_LINKS, BUSINESS_UKKO_LINKS, MDU_LINKS, getLinks, getActiveSubLink } from "../navigation-menu/global-navigation/utils.js";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import { useComposedRefs, composeRefs } from "../../utils/composeRefs.js";
+import { useComposedRefs } from "../../utils/composeRefs.js";
 import { VisuallyHidden } from "../visually-hidden/visually-hidden.js";
 import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
 import { Slot } from "@radix-ui/react-slot";
@@ -19,7 +19,7 @@ import "../toast/toast-root.js";
 import "sonner";
 import "../toggletip/index.js";
 import "../breadcrumbs/index.js";
-import { s as styles$3, rootClassName as rootClassName$3, Root as Root$3 } from "./radio-card-group-root.js";
+import { s as styles$2, rootClassName as rootClassName$2, Root as Root$2 } from "./radio-card-group-root.js";
 import { GroupLabel } from "./radio-card-group-label.js";
 import "../ribbon/index.js";
 import "../expandable-card/index.js";
@@ -34,6 +34,13 @@ import { Drawer } from "../drawer/index.js";
 import "../image/image.js";
 import "../chip/index.js";
 import "../../assets/sprite.1321fab0-teddy.svg";
+import { rootClassName as rootClassName$3, RootContext as RootContext$1, Root as Root$3 } from "../modal/modal-root.js";
+import { Trigger as Trigger$1 } from "../modal/modal-trigger.js";
+import { Content as Content$2 } from "../modal/modal-content.js";
+import { Title as Title$1 } from "../modal/modal-title.js";
+import { Description } from "../modal/modal-description.js";
+import { Overlay } from "../modal/modal-overlay.js";
+import { Group } from "../modal/modal-group.js";
 import * as DrawerPrimitive from "@radix-ui/react-dialog";
 import { Icon } from "../icon/icon.js";
 import "../notification/index.js";
@@ -61,193 +68,58 @@ import { TextSpacing } from "../text-spacing/text-spacing.js";
 import "../container/container.js";
 import "../carousel/carousel-root.js";
 import "../slider/slider.js";
+import { s as styles$3 } from "../../modal.module-DuP4in7f.js";
+import { Image } from "../modal/modal-image.js";
 import { Indicator as Indicator$1 } from "./radio-card-group-indicator.js";
 import { Body } from "./radio-card-group-item-body.js";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { useSize } from "../../utils/useSize.js";
-const Title$1 = React__default.forwardRef(
+const Title = React__default.forwardRef(
   ({ className, children, asChild, ...props }, forwardRef) => {
-    const classes = clsx([styles$3[`${rootClassName$3}__title`]], className);
-    return /* @__PURE__ */ jsxs(Flex, { width: "100%", gap: "150", className: styles$3[`${rootClassName$3}__title-wrapper`], children: [
+    const classes = clsx([styles$2[`${rootClassName$2}__title`]], className);
+    return /* @__PURE__ */ jsxs(Flex, { width: "100%", gap: "150", className: styles$2[`${rootClassName$2}__title-wrapper`], children: [
       asChild ? /* @__PURE__ */ jsx(Slot, { ...props, ref: forwardRef, className: classes, children }) : /* @__PURE__ */ jsx(Text, { variant: "paragraph-100-bold", ref: forwardRef, className: classes, children }),
       /* @__PURE__ */ jsx(Indicator$1, {})
     ] });
   }
 );
-Title$1.displayName = "Title";
-const Content$2 = React__default.forwardRef(
+Title.displayName = "Title";
+const Content$1 = React__default.forwardRef(
   ({ className, children, ...props }, forwardRef) => {
-    const classes = clsx([styles$3[`${rootClassName$3}__content-wrapper`]], className);
+    const classes = clsx([styles$2[`${rootClassName$2}__content-wrapper`]], className);
     return /* @__PURE__ */ jsx(Flex, { direction: "column", width: "100%", gap: "50", ...props, ref: forwardRef, className: classes, children });
   }
 );
-Content$2.displayName = "Content";
+Content$1.displayName = "Content";
 const ItemContext = React__default.createContext(void 0);
 const Item$1 = React__default.forwardRef(
   ({ className, children, value, ...props }, forwardedRef) => {
-    const classes = clsx([styles$3[`${rootClassName$3}__card-item`]], className);
+    const classes = clsx([styles$2[`${rootClassName$2}__card-item`]], className);
     const context = React__default.useContext(ItemContext);
     const ref = useComposedRefs(forwardedRef, context == null ? void 0 : context.triggerRef);
     const id = props.id || (context == null ? void 0 : context.id);
     return /* @__PURE__ */ jsxs(RadioGroupPrimitive.Item, { value, id, ...props, asChild: false, ref, className: classes, children: [
-      props.imageUrl ? /* @__PURE__ */ jsx(Flex, { className: clsx([styles$3[`${rootClassName$3}__illustration`]], className), justify: "center", align: "center", children: /* @__PURE__ */ jsx("img", { src: props.imageUrl, alt: value }) }) : null,
-      /* @__PURE__ */ jsx(Content$2, { children })
+      props.imageUrl ? /* @__PURE__ */ jsx(Flex, { className: clsx([styles$2[`${rootClassName$2}__illustration`]], className), justify: "center", align: "center", children: /* @__PURE__ */ jsx("img", { src: props.imageUrl, alt: value }) }) : null,
+      /* @__PURE__ */ jsx(Content$1, { children })
     ] });
   }
 );
 Item$1.displayName = "Item";
-Root$3.displayName = "RadioCardGroup";
+Root$2.displayName = "RadioCardGroup";
 GroupLabel.displayName = "RadioCardGroup.GroupLabel";
 Item$1.displayName = "RadioCardGroup.Item";
-Title$1.displayName = "RadioCardGroup.Title";
+Title.displayName = "RadioCardGroup.Title";
 Body.displayName = "RadioCardGroup.Body";
-const RadioCardGroup = Object.assign(Root$3, {
+const RadioCardGroup = Object.assign(Root$2, {
   GroupLabel,
   Item: Item$1,
-  Title: Title$1,
+  Title,
   Body
 });
-const styles$2 = {
-  "teddy-modal__overlay": "_teddy-modal__overlay_lkqhu_25",
-  "teddy-modal__content": "_teddy-modal__content_lkqhu_37",
-  "teddy-modal__scroll": "_teddy-modal__scroll_lkqhu_55",
-  "teddy-modal__image": "_teddy-modal__image_lkqhu_59",
-  "teddy-modal__close--floating": "_teddy-modal__close--floating_lkqhu_69",
-  "teddy-modal__group": "_teddy-modal__group_lkqhu_79",
-  "teddy-modal__group--title": "_teddy-modal__group--title_lkqhu_83",
-  "teddy-modal__group--scroll": "_teddy-modal__group--scroll_lkqhu_94",
-  "teddy-modal__group--action": "_teddy-modal__group--action_lkqhu_103",
-  "modal-overlay-no-op": "_modal-overlay-no-op_lkqhu_1",
-  "teddy-fade-in": "_teddy-fade-in_lkqhu_1",
-  "teddy-fade-out": "_teddy-fade-out_lkqhu_1",
-  "modal-content-show": "_modal-content-show_lkqhu_1",
-  "modal-content-hide": "_modal-content-hide_lkqhu_1",
-  "teddy-overlay-no-op": "_teddy-overlay-no-op_lkqhu_1"
-};
-const rootClassName$2 = "teddy-modal";
-const RootContext$1 = React__default.createContext({
-  imageRef: null,
-  actionGroupRef: null,
-  scrollRef: null
-});
-const Root$2 = (props) => {
-  const imageRef = React__default.useRef(null);
-  const actionGroupRef = React__default.useRef(null);
-  const scrollRef = React__default.useRef(null);
-  return /* @__PURE__ */ jsx(RootContext$1.Provider, { value: { imageRef, actionGroupRef, scrollRef }, children: /* @__PURE__ */ jsx(DrawerPrimitive.Root, { ...props, modal: true }) });
-};
-Root$2.displayName = "Modal.Root";
-const Trigger$1 = React__default.forwardRef(
-  ({ children, ...props }, forwardedRef) => /* @__PURE__ */ jsx(DrawerPrimitive.Trigger, { ...props, ref: forwardedRef, asChild: true, children })
-);
-Trigger$1.displayName = "Modal.Trigger";
-const OverlayContext = React__default.createContext(false);
-const Overlay = React__default.forwardRef(
-  ({ className, forceMount, container, ...rest }, forwardedRef) => {
-    const classes = clsx([styles$2[`${rootClassName$2}__overlay`]], className);
-    return /* @__PURE__ */ jsx(OverlayContext.Provider, { value: true, children: /* @__PURE__ */ jsx(DrawerPrimitive.Portal, { container, forceMount, children: /* @__PURE__ */ jsx(DrawerPrimitive.Overlay, { className: classes, ref: forwardedRef, ...rest }) }) });
-  }
-);
-Overlay.displayName = "Modal.Content";
-const InnerContent = React__default.forwardRef(
-  function InnerContent2({ asChild, children, className, ...props }, forwardedRef) {
-    const classes = clsx([styles$2[`${rootClassName$2}__scroll`]], className);
-    const context = React__default.useContext(RootContext$1);
-    return /* @__PURE__ */ jsx(
-      DrawerPrimitive.Content,
-      {
-        ...props,
-        ref: forwardedRef,
-        className: clsx([styles$2[`${rootClassName$2}__content`]]),
-        asChild: true,
-        children: /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(
-          Flex,
-          {
-            ...asChild ? { as: void 0, asChild } : {},
-            direction: "column",
-            align: "start",
-            maxWidth: { md: "600px" },
-            className: classes,
-            ref: context.scrollRef,
-            children
-          }
-        ) })
-      }
-    );
-  }
-);
-const Content$1 = React__default.forwardRef(
-  ({ forceMount, ...contentProps }, forwardedRef) => {
-    const hasOverlay = React__default.useContext(OverlayContext);
-    if (!hasOverlay)
-      return /* @__PURE__ */ jsx(Overlay, { forceMount, children: /* @__PURE__ */ jsx(InnerContent, { ref: forwardedRef, ...contentProps }) });
-    return /* @__PURE__ */ jsx(InnerContent, { ref: forwardedRef, ...contentProps });
-  }
-);
-Content$1.displayName = "Modal.Content";
-const GroupContext = React__default.createContext(false);
-const Group = React__default.forwardRef(
-  ({ className, variant, ...props }, forwardedRef) => {
-    const strollerRef = React__default.useContext(RootContext$1).scrollRef;
-    const [isOverflowing, setIsOverflowing] = React__default.useState(false);
-    useEffect(() => {
-      if (strollerRef == null ? void 0 : strollerRef.current) {
-        const hasOverflow = strollerRef.current.scrollHeight > strollerRef.current.clientHeight;
-        setIsOverflowing(hasOverflow);
-      }
-    }, [strollerRef]);
-    const classes = clsx(
-      [styles$2[`${rootClassName$2}__group`]],
-      {
-        [styles$2[`${rootClassName$2}__group--action`]]: variant === "action",
-        [styles$2[`${rootClassName$2}__group--title`]]: variant === "title",
-        [styles$2[`${rootClassName$2}__group--scroll`]]: isOverflowing
-      },
-      className
-    );
-    return /* @__PURE__ */ jsx(GroupContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
-      Flex,
-      {
-        ...variant === "action" ? {
-          gap: "200",
-          justify: { md: "end" },
-          align: { sm: "stretch", md: "end" },
-          direction: { sm: "column-reverse", md: "row" }
-        } : { direction: "column" },
-        ref: forwardedRef,
-        ...props,
-        className: classes
-      }
-    ) });
-  }
-);
-Group.displayName = "Modal.Group";
-const TitleInner = React__default.forwardRef(
-  function TitleInner2(props, forwardedRef) {
-    return /* @__PURE__ */ jsx(DrawerPrimitive.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { variant: "title-200", as: "h2", ...props, asChild: false, ref: forwardedRef }) });
-  }
-);
-const Title = React__default.forwardRef((props, forwardedRef) => {
-  const isInsideGroup = React__default.useContext(GroupContext);
-  if (!isInsideGroup) {
-    return /* @__PURE__ */ jsx(Group, { variant: "title", children: /* @__PURE__ */ jsx(TitleInner, { ...props, ref: forwardedRef }) });
-  }
-  return /* @__PURE__ */ jsx(TitleInner, { ...props, ref: forwardedRef });
-});
-Title.displayName = "Modal.Title";
-const Description = React__default.forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(DrawerPrimitive.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { as: "p", variant: "paragraph-100", ...props, asChild: false, ref: forwardedRef }) }));
-Description.displayName = "Modal.Description";
-const Image = React__default.forwardRef(({ asChild, ...props }, forwardedRef) => {
-  const classes = clsx([styles$2[`${rootClassName$2}__image`]], props.className);
-  const context = React__default.useContext(RootContext$1);
-  const Comp = asChild ? Slot : "img";
-  return /* @__PURE__ */ jsx(Comp, { ...props, className: classes, ref: composeRefs(context.imageRef, forwardedRef) });
-});
-Image.displayName = "Modal.Image";
 const Close = React__default.forwardRef(
   ({ className, ...props }, forwardedRef) => {
-    const classes = clsx([styles$2[`${rootClassName$2}__close`]], {
-      [styles$2[`${rootClassName$2}__close--floating`]]: props.slot === "floating",
+    const classes = clsx([styles$3[`${rootClassName$3}__close`]], {
+      [styles$3[`${rootClassName$3}__close--floating`]]: props.slot === "floating",
       className
     });
     const imageRef = React__default.useContext(RootContext$1).imageRef;
@@ -257,11 +129,36 @@ const Close = React__default.forwardRef(
         setHasImage(true);
       }
     }, [imageRef]);
-    return /* @__PURE__ */ jsx(DrawerPrimitive.Close, { ...props, className: classes, ref: forwardedRef, asChild: true, children: props.children || /* @__PURE__ */ jsx(Button, { variant: hasImage ? "primary-negative" : "tertiary-purple", iconOnly: true, "aria-label": props["aria-label"], children: /* @__PURE__ */ jsx(Icon, { name: "close" }) }) });
+    return /* @__PURE__ */ jsx(DrawerPrimitive.Close, { ...props, className: classes, ref: forwardedRef, asChild: true, children: props.children || /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: hasImage ? "primary-negative" : "tertiary-purple",
+        iconOnly: true,
+        "aria-label": props["aria-label"] ?? "Lukk",
+        children: /* @__PURE__ */ jsx(Icon, { name: "close" })
+      }
+    ) });
   }
 );
 Close.displayName = "Close";
-const Modal = Object.assign(Root$2, { Trigger: Trigger$1, Content: Content$1, Title, Overlay, Description, Close, Image, Group });
+const Modal = Root$3;
+Modal.displayName = "Modal";
+Modal.Trigger = Trigger$1;
+Modal.Trigger.displayName = "Modal.Trigger";
+Modal.Content = Content$2;
+Modal.Content.displayName = "Modal.Content";
+Modal.Title = Title$1;
+Modal.Title.displayName = "Modal.Title";
+Modal.Description = Description;
+Modal.Description.displayName = "Modal.Description";
+Modal.Overlay = Overlay;
+Modal.Overlay.displayName = "Modal.Overlay";
+Modal.Group = Group;
+Modal.Group.displayName = "Modal.Group";
+Modal.Close = Close;
+Modal.Close.displayName = "Modal.Close";
+Modal.Image = Image;
+Modal.Image.displayName = "Modal.Image";
 const styles$1 = {
   "teddy-navigation-menu": "_teddy-navigation-menu_6p30v_1",
   "teddy-navigation-menu__viewport": "_teddy-navigation-menu__viewport_6p30v_34",
@@ -1383,7 +1280,7 @@ function getInitialMenuItem(currentPath) {
 Root.displayName = "GlobalNavigation";
 const GlobalNavigation = Root;
 export {
-  Content$2 as C,
+  Content$1 as C,
   Desktop as D,
   GlobalNavigation as G,
   HighlightedLinks as H,
@@ -1392,17 +1289,18 @@ export {
   NavigationMenu as N,
   RadioCardGroup as R,
   Separator as S,
-  Title$1 as Title,
+  Title,
   Item$1 as a,
-  MyPages as b,
-  SearchField as c,
-  Search as d,
-  ShoppingCart as e,
-  Mobile as f,
-  DesktopSimplified as g,
-  MobileSimplified as h,
-  rootClassName as i,
-  RootContext as j,
-  Root as k,
+  Close as b,
+  MyPages as c,
+  SearchField as d,
+  Search as e,
+  ShoppingCart as f,
+  Mobile as g,
+  DesktopSimplified as h,
+  MobileSimplified as i,
+  rootClassName as j,
+  RootContext as k,
+  Root as l,
   rootClassName$1 as r
 };

package/dist/drawer.module-Bh77Byg_.js

@@ -0,0 +1,16 @@
+const styles = {
+  "teddy-drawer__overlay": "_teddy-drawer__overlay_1hfde_26",
+  "teddy-overlay-no-op": "_teddy-overlay-no-op_1hfde_1",
+  "teddy-fade-in": "_teddy-fade-in_1hfde_1",
+  "teddy-fade-out": "_teddy-fade-out_1hfde_1",
+  "teddy-drawer__overlay--container": "_teddy-drawer__overlay--container_1hfde_60",
+  "teddy-drawer__content": "_teddy-drawer__content_1hfde_66",
+  "teddy-drawer__title": "_teddy-drawer__title_1hfde_70",
+  "drawer-content-show": "_drawer-content-show_1hfde_1",
+  "drawer-content-hide": "_drawer-content-hide_1hfde_1",
+  "teddy-drawer__content--lg": "_teddy-drawer__content--lg_1hfde_102",
+  "teddy-drawer__close--floating": "_teddy-drawer__close--floating_1hfde_107"
+};
+export {
+  styles as s
+};

package/dist/drawer.module-khivHSFm.cjs

@@ -0,0 +1,15 @@
+"use strict";
+const styles = {
+  "teddy-drawer__overlay": "_teddy-drawer__overlay_1hfde_26",
+  "teddy-overlay-no-op": "_teddy-overlay-no-op_1hfde_1",
+  "teddy-fade-in": "_teddy-fade-in_1hfde_1",
+  "teddy-fade-out": "_teddy-fade-out_1hfde_1",
+  "teddy-drawer__overlay--container": "_teddy-drawer__overlay--container_1hfde_60",
+  "teddy-drawer__content": "_teddy-drawer__content_1hfde_66",
+  "teddy-drawer__title": "_teddy-drawer__title_1hfde_70",
+  "drawer-content-show": "_drawer-content-show_1hfde_1",
+  "drawer-content-hide": "_drawer-content-hide_1hfde_1",
+  "teddy-drawer__content--lg": "_teddy-drawer__content--lg_1hfde_102",
+  "teddy-drawer__close--floating": "_teddy-drawer__close--floating_1hfde_107"
+};
+exports.styles = styles;

package/dist/modal.module-BfeNqXoN.cjs

@@ -0,0 +1,19 @@
+"use strict";
+const styles = {
+  "teddy-modal__overlay": "_teddy-modal__overlay_1mjv8_25",
+  "teddy-modal__content": "_teddy-modal__content_1mjv8_37",
+  "teddy-modal__scroll": "_teddy-modal__scroll_1mjv8_55",
+  "teddy-modal__image": "_teddy-modal__image_1mjv8_59",
+  "teddy-modal__close--floating": "_teddy-modal__close--floating_1mjv8_69",
+  "teddy-modal__group": "_teddy-modal__group_1mjv8_79",
+  "teddy-modal__group--title": "_teddy-modal__group--title_1mjv8_83",
+  "teddy-modal__group--scroll": "_teddy-modal__group--scroll_1mjv8_94",
+  "teddy-modal__group--action": "_teddy-modal__group--action_1mjv8_103",
+  "modal-overlay-no-op": "_modal-overlay-no-op_1mjv8_1",
+  "teddy-fade-in": "_teddy-fade-in_1mjv8_1",
+  "teddy-fade-out": "_teddy-fade-out_1mjv8_1",
+  "modal-content-show": "_modal-content-show_1mjv8_1",
+  "modal-content-hide": "_modal-content-hide_1mjv8_1",
+  "teddy-overlay-no-op": "_teddy-overlay-no-op_1mjv8_1"
+};
+exports.styles = styles;