@telia/teddy 0.0.34 → 0.0.35

package/dist/components/drawer/drawer-close.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
 const DrawerPrimitive = require("@radix-ui/react-dialog");
-const drawer_module = require("../../drawer.module-rgUBNOkt.cjs");
+const drawer_module = require("../../drawer.module-_pUdp_M1.cjs");
 const components_drawer_drawerRoot = require("./drawer-root.cjs");
 require("../../assets/sprite.269ba410-teddy.svg");
 const components_icon_icon = require("../icon/icon.cjs");

package/dist/components/drawer/drawer-close.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
 import * as DrawerPrimitive from "@radix-ui/react-dialog";
-import { s as styles } from "../../drawer.module-BZV0Appw.js";
+import { s as styles } from "../../drawer.module-BPXo6-Q2.js";
 import { rootClassName } from "./drawer-root.js";
 import "../../assets/sprite.269ba410-teddy.svg";
 import { Icon } from "../icon/icon.js";

package/dist/components/drawer/drawer-content.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
 const DrawerPrimitive = require("@radix-ui/react-dialog");
-const drawer_module = require("../../drawer.module-rgUBNOkt.cjs");
+const drawer_module = require("../../drawer.module-_pUdp_M1.cjs");
 const components_drawer_drawerRoot = require("./drawer-root.cjs");
 const components_drawer_drawerOverlay = require("./drawer-overlay.cjs");
 const components_flex_flex = require("../flex/flex.cjs");
@@ -27,7 +27,15 @@ function _interopNamespaceDefault(e) {
 const DrawerPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(DrawerPrimitive);
 const InnerContent = React.forwardRef(
   function InnerContent2({ children, className, ...props }, forwardedRef) {
-    const classes = clsx([drawer_module.styles[`${components_drawer_drawerRoot.rootClassName}__content`]], className);
+    const classes = clsx(
+      [
+        drawer_module.styles[`${components_drawer_drawerRoot.rootClassName}__content`],
+        {
+          [drawer_module.styles[`${components_drawer_drawerRoot.rootClassName}__content--lg`]]: props.size === "lg"
+        }
+      ],
+      className
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(DrawerPrimitive__namespace.Content, { ...props, ref: forwardedRef, className: classes, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { children }) });
   }
 );

package/dist/components/drawer/drawer-content.d.ts

@@ -4,6 +4,7 @@ import { Flex } from '../flex';
 import * as DrawerPrimitive from '@radix-ui/react-dialog';
 export type ContentProps = Omit<React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>, 'forceMount' | 'onOpenAutoFocus' | 'onCloseAutoFocus' | 'onEscapeKeyDown' | 'onPointerDownOutside' | 'onInteractOutside'> & {
     forceMount?: DrawerPrimitive.DialogContentProps['forceMount'];
+    size?: 'md' | 'lg';
     onOpenAutoFocus?: DrawerPrimitive.DialogContentProps['onOpenAutoFocus'];
     onCloseAutoFocus?: DrawerPrimitive.DialogContentProps['onCloseAutoFocus'];
     onEscapeKeyDown?: DrawerPrimitive.DialogContentProps['onEscapeKeyDown'];

package/dist/components/drawer/drawer-content.js

@@ -2,13 +2,21 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
 import * as DrawerPrimitive from "@radix-ui/react-dialog";
-import { s as styles } from "../../drawer.module-BZV0Appw.js";
+import { s as styles } from "../../drawer.module-BPXo6-Q2.js";
 import { rootClassName } from "./drawer-root.js";
 import { OverlayContext, Overlay } from "./drawer-overlay.js";
 import { Flex } from "../flex/flex.js";
 const InnerContent = React__default.forwardRef(
   function InnerContent2({ children, className, ...props }, forwardedRef) {
-    const classes = clsx([styles[`${rootClassName}__content`]], className);
+    const classes = clsx(
+      [
+        styles[`${rootClassName}__content`],
+        {
+          [styles[`${rootClassName}__content--lg`]]: props.size === "lg"
+        }
+      ],
+      className
+    );
     return /* @__PURE__ */ jsx(DrawerPrimitive.Content, { ...props, ref: forwardedRef, className: classes, asChild: true, children: /* @__PURE__ */ jsx(Flex, { children }) });
   }
 );

package/dist/components/drawer/drawer-description.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
 const DrawerPrimitive = require("@radix-ui/react-dialog");
-const drawer_module = require("../../drawer.module-rgUBNOkt.cjs");
+const drawer_module = require("../../drawer.module-_pUdp_M1.cjs");
 const components_drawer_drawerRoot = require("./drawer-root.cjs");
 const components_text_text = require("../text/text.cjs");
 function _interopNamespaceDefault(e) {

package/dist/components/drawer/drawer-description.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
 import * as DrawerPrimitive from "@radix-ui/react-dialog";
-import { s as styles } from "../../drawer.module-BZV0Appw.js";
+import { s as styles } from "../../drawer.module-BPXo6-Q2.js";
 import { rootClassName } from "./drawer-root.js";
 import { Text } from "../text/text.js";
 const DescriptionContext = React__default.createContext(false);

package/dist/components/drawer/drawer-footer.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
-const drawer_module = require("../../drawer.module-rgUBNOkt.cjs");
+const drawer_module = require("../../drawer.module-_pUdp_M1.cjs");
 const components_drawer_drawerRoot = require("./drawer-root.cjs");
 const components_flex_flex = require("../flex/flex.cjs");
 const Footer = React.forwardRef(

package/dist/components/drawer/drawer-footer.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
-import { s as styles } from "../../drawer.module-BZV0Appw.js";
+import { s as styles } from "../../drawer.module-BPXo6-Q2.js";
 import { rootClassName } from "./drawer-root.js";
 import { Flex } from "../flex/flex.js";
 const Footer = React__default.forwardRef(

package/dist/components/drawer/drawer-overlay.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
 const DrawerPrimitive = require("@radix-ui/react-dialog");
-const drawer_module = require("../../drawer.module-rgUBNOkt.cjs");
+const drawer_module = require("../../drawer.module-_pUdp_M1.cjs");
 const components_drawer_drawerRoot = require("./drawer-root.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/components/drawer/drawer-overlay.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
 import * as DrawerPrimitive from "@radix-ui/react-dialog";
-import { s as styles } from "../../drawer.module-BZV0Appw.js";
+import { s as styles } from "../../drawer.module-BPXo6-Q2.js";
 import { rootClassName } from "./drawer-root.js";
 const OverlayContext = React__default.createContext(false);
 const Overlay = React__default.forwardRef(

package/dist/components/drawer/drawer-title.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
 const DrawerPrimitive = require("@radix-ui/react-dialog");
-const drawer_module = require("../../drawer.module-rgUBNOkt.cjs");
+const drawer_module = require("../../drawer.module-_pUdp_M1.cjs");
 const components_drawer_drawerRoot = require("./drawer-root.cjs");
 const components_heading_heading = require("../heading/heading.cjs");
 function _interopNamespaceDefault(e) {

package/dist/components/drawer/drawer-title.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
 import * as DrawerPrimitive from "@radix-ui/react-dialog";
-import { s as styles } from "../../drawer.module-BZV0Appw.js";
+import { s as styles } from "../../drawer.module-BPXo6-Q2.js";
 import { rootClassName } from "./drawer-root.js";
 import { Heading } from "../heading/heading.js";
 const Title = React__default.forwardRef(

package/dist/components/navigation-menu/global-navigation/global-navigation-my-pages.cjs

@@ -16,15 +16,21 @@ const components_textSpacing_textSpacing = require("../../text-spacing/text-spac
 const components_tabs_index = require("../../tabs/index.cjs");
 const components_textField_index = require("../../text-field/index.cjs");
 const utils_composeRefs = require("../../../utils/composeRefs.cjs");
+require("../../badge/badge.cjs");
+require("../../badge/alert-badge.cjs");
+const components_badge_counterBadge = require("../../badge/counter-badge.cjs");
 const components_flex_flex = require("../../flex/flex.cjs");
 const components_accordion_index = require("../../accordion/index.cjs");
 const components_visuallyHidden_visuallyHidden = require("../../visually-hidden/visually-hidden.cjs");
 const components_link_link = require("../../link/link.cjs");
 const components_list_index = require("../../list/index.cjs");
 const styles = {
-  "teddy-global-navigation": "_teddy-global-navigation_1b1i5_1",
-  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_1b1i5_5",
-  "teddy-global-navigation__link": "_teddy-global-navigation__link_1b1i5_19"
+  "teddy-global-navigation": "_teddy-global-navigation_y8nb6_1",
+  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_y8nb6_6",
+  "teddy-global-navigation__link": "_teddy-global-navigation__link_y8nb6_20",
+  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_y8nb6_23",
+  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_y8nb6_26",
+  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_y8nb6_29"
 };
 function MyPages(props) {
   var _a, _b;
@@ -38,7 +44,7 @@ function MyPages(props) {
       /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "login", size: "sm" }),
       "Logg inn"
     ] }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(components_drawer_index.Drawer.Content, { asChild: true, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(components_drawer_index.Drawer.Content, { asChild: true, size: rootContext == null ? void 0 : rootContext.drawerSize, children: [
       /* @__PURE__ */ jsxRuntime.jsx(components_drawer_index.Drawer.Close, { slot: "floating", "aria-label": "Lukk" }),
       isLoggedIn ? /* @__PURE__ */ jsxRuntime.jsx(LoggedInContent, {}) : /* @__PURE__ */ jsxRuntime.jsx(LoggedOutContent, {}),
       /* @__PURE__ */ jsxRuntime.jsx(components_drawer_index.Drawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(components_drawer_index.Drawer.Close, { slot: "content", children: /* @__PURE__ */ jsxRuntime.jsx(components_button_button.Button, { children: "Lukk" }) }) })
@@ -99,15 +105,15 @@ const SearchField = React.forwardRef(
       "form",
       {
         onSubmit: (e) => {
-          var _a;
+          var _a, _b;
           console.log("Search submitted,111");
           if (context == null ? void 0 : context.onSearchSubmit) {
-            context.onSearchSubmit(e);
+            context.onSearchSubmit(e, (_a = ref.current) == null ? void 0 : _a.value);
           }
           if (!window || e.isDefaultPrevented())
             return;
           e.preventDefault();
-          window.location.href = `/sok?q=${encodeURIComponent(((_a = ref.current) == null ? void 0 : _a.value) || "")}`;
+          window.location.href = `/sok?q=${encodeURIComponent(((_b = ref.current) == null ? void 0 : _b.value) || "")}`;
         },
         children: /* @__PURE__ */ jsxRuntime.jsxs(components_textField_index.TextField, { ...props, children: [
           /* @__PURE__ */ jsxRuntime.jsx(components_textField_index.TextField.Label, { children: "Søk i innhold" }),
@@ -124,6 +130,7 @@ const SearchField = React.forwardRef(
 );
 SearchField.displayName = "SearchField";
 function Search(props) {
+  const rootContext = React.useContext(RootContext);
   const searchFieldRef = React.useRef(null);
   return /* @__PURE__ */ jsxRuntime.jsxs(components_drawer_index.Drawer, { ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.Link, { asChild: true, variant: "button", children: /* @__PURE__ */ jsxRuntime.jsx(components_drawer_index.Drawer.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsxs("button", { children: [
@@ -133,6 +140,7 @@ function Search(props) {
     /* @__PURE__ */ jsxRuntime.jsxs(
       components_drawer_index.Drawer.Content,
       {
+        size: rootContext == null ? void 0 : rootContext.drawerSize,
         onOpenAutoFocus: (e) => {
           var _a;
           e.preventDefault();
@@ -152,14 +160,22 @@ Search.displayName = "Search";
 const ShoppingCart = React.forwardRef(() => {
   const rootContext = React.useContext(RootContext);
   const shoppingCartContent = rootContext == null ? void 0 : rootContext.shoppingCart;
-  return /* @__PURE__ */ jsxRuntime.jsxs(components_drawer_index.Drawer, { children: [
+  const numberOfItemsInCart = (rootContext == null ? void 0 : rootContext.shoppingCartNumberOfItems) || 0;
+  const titleSuffix = numberOfItemsInCart > 0 ? `(${numberOfItemsInCart})` : "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(components_drawer_index.Drawer, { open: rootContext == null ? void 0 : rootContext.isCartOpen, onOpenChange: rootContext == null ? void 0 : rootContext.onCartOpenChange, children: [
     /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.Link, { asChild: true, variant: "button", children: /* @__PURE__ */ jsxRuntime.jsx(components_drawer_index.Drawer.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsxs("button", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "cart", size: "sm" }),
-      " Handlekurv"
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx([styles[`${rootClassName}__item-wrapper`]]), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "cart", size: "sm" }),
+        numberOfItemsInCart > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx([styles[`${rootClassName}__item-count`]]), children: /* @__PURE__ */ jsxRuntime.jsx(components_badge_counterBadge.CounterBadge, { variant: "attention", children: numberOfItemsInCart }) })
+      ] }),
+      "Handlekurv"
     ] }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(components_drawer_index.Drawer.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(components_drawer_index.Drawer.Content, { size: rootContext == null ? void 0 : rootContext.drawerSize, children: [
       /* @__PURE__ */ jsxRuntime.jsx(components_drawer_index.Drawer.Close, { slot: "floating", "aria-label": "Lukk" }),
-      /* @__PURE__ */ jsxRuntime.jsx(components_drawer_index.Drawer.Title, { children: "Handlekurv" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(components_drawer_index.Drawer.Title, { children: [
+        "Handlekurv ",
+        titleSuffix
+      ] }),
       shoppingCartContent ? shoppingCartContent : null,
       /* @__PURE__ */ jsxRuntime.jsx(components_drawer_index.Drawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(components_drawer_index.Drawer.Close, { slot: "content", children: /* @__PURE__ */ jsxRuntime.jsx(components_button_button.Button, { children: "Lukk" }) }) })
     ] })
@@ -173,7 +189,7 @@ const Desktop = React.forwardRef(() => {
   const { setSelectedMenuItem, linkComponent: Link } = rootContext;
   const currentLocation = rootContext.pathname;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.TopMenuList, { children: components_navigationMenu_globalNavigation_utils.LINKS.map((link) => /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.TopMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.TopMenuTrigger, { value: link.name, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link, { children: link.name }) }) }, link.name)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.TopMenuList, { children: components_navigationMenu_globalNavigation_utils.LINKS.map((link) => /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.TopMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.TopMenuTrigger, { value: link.name, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: link.link, children: link.name }) }) }, link.name)) }),
     components_navigationMenu_globalNavigation_utils.LINKS.map((link) => /* @__PURE__ */ jsxRuntime.jsxs(components_navigationMenu_navigationMenu.NavigationMenu.List, { value: link.name, children: [
       link.links.map((subLink) => /* @__PURE__ */ jsxRuntime.jsxs(components_navigationMenu_navigationMenu.NavigationMenu.Item, { value: subLink.name, children: [
         subLink.name === "Logo" ? /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.Link, { asChild: true, variant: "button", children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href: subLink.link, onClick: () => setSelectedMenuItem(""), children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -219,7 +235,7 @@ const Desktop = React.forwardRef(() => {
       /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(ShoppingCart, {}) }),
       /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(MyPages, {}) })
     ] }, link.name)),
-    /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.Viewport, {})
+    /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.Viewport, { className: styles[`${rootClassName}__viewport`] })
   ] });
 });
 Desktop.displayName = "Desktop";
@@ -242,7 +258,7 @@ function Mobile(props) {
           /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "menu", size: "sm" }),
           " Meny"
         ] }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(components_drawer_index.Drawer.Content, { gap: "400", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(components_drawer_index.Drawer.Content, { gap: "400", size: rootContext.drawerSize, children: [
           /* @__PURE__ */ jsxRuntime.jsx(components_drawer_index.Drawer.Close, { ref: drawerRef, slot: "floating", "aria-label": "Lukk" }),
           /* @__PURE__ */ jsxRuntime.jsx(components_drawer_index.Drawer.Title, { children: "Meny" }),
           /* @__PURE__ */ jsxRuntime.jsx(SearchField, {}),
@@ -320,7 +336,11 @@ function Root({
   linkComponent,
   onLogoutClick,
   shoppingCart,
+  shoppingCartNumberOfItems,
   onSearchSubmit,
+  isCartOpen,
+  onCartOpenChange,
+  drawerSize = "md",
   ...props
 }) {
   const [selectedMenuItem, setSelectedMenuItem] = React.useState(getInitialMenuItem());
@@ -342,7 +362,11 @@ function Root({
         setPathname,
         onLogoutClick,
         shoppingCart,
-        onSearchSubmit
+        shoppingCartNumberOfItems,
+        onSearchSubmit,
+        isCartOpen,
+        onCartOpenChange,
+        drawerSize
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { ...props, className: classes, children: /* @__PURE__ */ jsxRuntime.jsxs(
         components_navigationMenu_navigationMenu.NavigationMenu,

package/dist/components/navigation-menu/global-navigation/global-navigation-my-pages.js

@@ -14,15 +14,21 @@ import { TextSpacing } from "../../text-spacing/text-spacing.js";
 import { Tabs } from "../../tabs/index.js";
 import { TextField } from "../../text-field/index.js";
 import { useComposedRefs } from "../../../utils/composeRefs.js";
+import "../../badge/badge.js";
+import "../../badge/alert-badge.js";
+import { CounterBadge } from "../../badge/counter-badge.js";
 import { Flex } from "../../flex/flex.js";
 import { Accordion } from "../../accordion/index.js";
 import { VisuallyHidden } from "../../visually-hidden/visually-hidden.js";
 import { Link } from "../../link/link.js";
 import { List } from "../../list/index.js";
 const styles = {
-  "teddy-global-navigation": "_teddy-global-navigation_1b1i5_1",
-  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_1b1i5_5",
-  "teddy-global-navigation__link": "_teddy-global-navigation__link_1b1i5_19"
+  "teddy-global-navigation": "_teddy-global-navigation_y8nb6_1",
+  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_y8nb6_6",
+  "teddy-global-navigation__link": "_teddy-global-navigation__link_y8nb6_20",
+  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_y8nb6_23",
+  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_y8nb6_26",
+  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_y8nb6_29"
 };
 function MyPages(props) {
   var _a, _b;
@@ -36,7 +42,7 @@ function MyPages(props) {
       /* @__PURE__ */ jsx(Icon, { name: "login", size: "sm" }),
       "Logg inn"
     ] }) }) }),
-    /* @__PURE__ */ jsxs(Drawer.Content, { asChild: true, children: [
+    /* @__PURE__ */ jsxs(Drawer.Content, { asChild: true, size: rootContext == null ? void 0 : rootContext.drawerSize, children: [
       /* @__PURE__ */ jsx(Drawer.Close, { slot: "floating", "aria-label": "Lukk" }),
       isLoggedIn ? /* @__PURE__ */ jsx(LoggedInContent, {}) : /* @__PURE__ */ jsx(LoggedOutContent, {}),
       /* @__PURE__ */ jsx(Drawer.Footer, { children: /* @__PURE__ */ jsx(Drawer.Close, { slot: "content", children: /* @__PURE__ */ jsx(Button, { children: "Lukk" }) }) })
@@ -97,15 +103,15 @@ const SearchField = React__default.forwardRef(
       "form",
       {
         onSubmit: (e) => {
-          var _a;
+          var _a, _b;
           console.log("Search submitted,111");
           if (context == null ? void 0 : context.onSearchSubmit) {
-            context.onSearchSubmit(e);
+            context.onSearchSubmit(e, (_a = ref.current) == null ? void 0 : _a.value);
           }
           if (!window || e.isDefaultPrevented())
             return;
           e.preventDefault();
-          window.location.href = `/sok?q=${encodeURIComponent(((_a = ref.current) == null ? void 0 : _a.value) || "")}`;
+          window.location.href = `/sok?q=${encodeURIComponent(((_b = ref.current) == null ? void 0 : _b.value) || "")}`;
         },
         children: /* @__PURE__ */ jsxs(TextField, { ...props, children: [
           /* @__PURE__ */ jsx(TextField.Label, { children: "Søk i innhold" }),
@@ -122,6 +128,7 @@ const SearchField = React__default.forwardRef(
 );
 SearchField.displayName = "SearchField";
 function Search(props) {
+  const rootContext = React__default.useContext(RootContext);
   const searchFieldRef = React__default.useRef(null);
   return /* @__PURE__ */ jsxs(Drawer, { ...props, children: [
     /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: /* @__PURE__ */ jsx(Drawer.Trigger, { children: /* @__PURE__ */ jsxs("button", { children: [
@@ -131,6 +138,7 @@ function Search(props) {
     /* @__PURE__ */ jsxs(
       Drawer.Content,
       {
+        size: rootContext == null ? void 0 : rootContext.drawerSize,
         onOpenAutoFocus: (e) => {
           var _a;
           e.preventDefault();
@@ -150,14 +158,22 @@ Search.displayName = "Search";
 const ShoppingCart = React__default.forwardRef(() => {
   const rootContext = React__default.useContext(RootContext);
   const shoppingCartContent = rootContext == null ? void 0 : rootContext.shoppingCart;
-  return /* @__PURE__ */ jsxs(Drawer, { children: [
+  const numberOfItemsInCart = (rootContext == null ? void 0 : rootContext.shoppingCartNumberOfItems) || 0;
+  const titleSuffix = numberOfItemsInCart > 0 ? `(${numberOfItemsInCart})` : "";
+  return /* @__PURE__ */ jsxs(Drawer, { open: rootContext == null ? void 0 : rootContext.isCartOpen, onOpenChange: rootContext == null ? void 0 : rootContext.onCartOpenChange, children: [
     /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: /* @__PURE__ */ jsx(Drawer.Trigger, { children: /* @__PURE__ */ jsxs("button", { children: [
-      /* @__PURE__ */ jsx(Icon, { name: "cart", size: "sm" }),
-      " Handlekurv"
+      /* @__PURE__ */ jsxs("div", { className: clsx([styles[`${rootClassName}__item-wrapper`]]), children: [
+        /* @__PURE__ */ jsx(Icon, { name: "cart", size: "sm" }),
+        numberOfItemsInCart > 0 && /* @__PURE__ */ jsx("span", { className: clsx([styles[`${rootClassName}__item-count`]]), children: /* @__PURE__ */ jsx(CounterBadge, { variant: "attention", children: numberOfItemsInCart }) })
+      ] }),
+      "Handlekurv"
     ] }) }) }),
-    /* @__PURE__ */ jsxs(Drawer.Content, { children: [
+    /* @__PURE__ */ jsxs(Drawer.Content, { size: rootContext == null ? void 0 : rootContext.drawerSize, children: [
       /* @__PURE__ */ jsx(Drawer.Close, { slot: "floating", "aria-label": "Lukk" }),
-      /* @__PURE__ */ jsx(Drawer.Title, { children: "Handlekurv" }),
+      /* @__PURE__ */ jsxs(Drawer.Title, { children: [
+        "Handlekurv ",
+        titleSuffix
+      ] }),
       shoppingCartContent ? shoppingCartContent : null,
       /* @__PURE__ */ jsx(Drawer.Footer, { children: /* @__PURE__ */ jsx(Drawer.Close, { slot: "content", children: /* @__PURE__ */ jsx(Button, { children: "Lukk" }) }) })
     ] })
@@ -171,7 +187,7 @@ const Desktop = React__default.forwardRef(() => {
   const { setSelectedMenuItem, linkComponent: Link2 } = rootContext;
   const currentLocation = rootContext.pathname;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(NavigationMenu.TopMenuList, { children: LINKS.map((link) => /* @__PURE__ */ jsx(NavigationMenu.TopMenuItem, { children: /* @__PURE__ */ jsx(NavigationMenu.TopMenuTrigger, { value: link.name, asChild: true, children: /* @__PURE__ */ jsx(Link2, { children: link.name }) }) }, link.name)) }),
+    /* @__PURE__ */ jsx(NavigationMenu.TopMenuList, { children: LINKS.map((link) => /* @__PURE__ */ jsx(NavigationMenu.TopMenuItem, { children: /* @__PURE__ */ jsx(NavigationMenu.TopMenuTrigger, { value: link.name, asChild: true, children: /* @__PURE__ */ jsx(Link2, { href: link.link, children: link.name }) }) }, link.name)) }),
     LINKS.map((link) => /* @__PURE__ */ jsxs(NavigationMenu.List, { value: link.name, children: [
       link.links.map((subLink) => /* @__PURE__ */ jsxs(NavigationMenu.Item, { value: subLink.name, children: [
         subLink.name === "Logo" ? /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(Link2, { href: subLink.link, onClick: () => setSelectedMenuItem(""), children: /* @__PURE__ */ jsx(
@@ -217,7 +233,7 @@ const Desktop = React__default.forwardRef(() => {
       /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(ShoppingCart, {}) }),
       /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(MyPages, {}) })
     ] }, link.name)),
-    /* @__PURE__ */ jsx(NavigationMenu.Viewport, {})
+    /* @__PURE__ */ jsx(NavigationMenu.Viewport, { className: styles[`${rootClassName}__viewport`] })
   ] });
 });
 Desktop.displayName = "Desktop";
@@ -240,7 +256,7 @@ function Mobile(props) {
           /* @__PURE__ */ jsx(Icon, { name: "menu", size: "sm" }),
           " Meny"
         ] }) }) }),
-        /* @__PURE__ */ jsxs(Drawer.Content, { gap: "400", children: [
+        /* @__PURE__ */ jsxs(Drawer.Content, { gap: "400", size: rootContext.drawerSize, children: [
           /* @__PURE__ */ jsx(Drawer.Close, { ref: drawerRef, slot: "floating", "aria-label": "Lukk" }),
           /* @__PURE__ */ jsx(Drawer.Title, { children: "Meny" }),
           /* @__PURE__ */ jsx(SearchField, {}),
@@ -318,7 +334,11 @@ function Root({
   linkComponent,
   onLogoutClick,
   shoppingCart,
+  shoppingCartNumberOfItems,
   onSearchSubmit,
+  isCartOpen,
+  onCartOpenChange,
+  drawerSize = "md",
   ...props
 }) {
   const [selectedMenuItem, setSelectedMenuItem] = React__default.useState(getInitialMenuItem());
@@ -340,7 +360,11 @@ function Root({
         setPathname,
         onLogoutClick,
         shoppingCart,
-        onSearchSubmit
+        shoppingCartNumberOfItems,
+        onSearchSubmit,
+        isCartOpen,
+        onCartOpenChange,
+        drawerSize
       },
       children: /* @__PURE__ */ jsx(Box, { ...props, className: classes, children: /* @__PURE__ */ jsxs(
         NavigationMenu,

package/dist/components/navigation-menu/global-navigation/global-navigation-root.d.ts

@@ -11,24 +11,22 @@ export type RootProps = React.ComponentPropsWithoutRef<'div'> & {
     linkComponent: React.ForwardRefExoticComponent<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;
     onLogoutClick(): void;
     shoppingCart?: React.ReactNode;
-    onSearchSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+    shoppingCartNumberOfItems?: number;
+    onSearchSubmit?: (e: React.FormEvent<HTMLFormElement>, value?: string) => void;
+    isCartOpen?: boolean;
+    onCartOpenChange?: (open: boolean) => void;
+    drawerSize: 'md' | 'lg';
 };
 type RootContext = {
-    appKey: RootProps['appKey'];
-    loggedInUser: RootProps['loggedInUser'];
     selectedMenuItem: string | undefined;
     setSelectedMenuItem: (v: string | undefined) => void;
     selectedDomainItem: string;
     setSelectedDomainItem: (v: string) => void;
-    linkComponent: RootProps['linkComponent'];
     pathname: string;
     setPathname: (v: string) => void;
-    onLogoutClick: RootProps['onLogoutClick'];
-    shoppingCart?: React.ReactNode;
-    onSearchSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
-};
+} & Pick<RootProps, 'onSearchSubmit' | 'shoppingCart' | 'shoppingCartNumberOfItems' | 'loggedInUser' | 'appKey' | 'onLogoutClick' | 'linkComponent' | 'isCartOpen' | 'onCartOpenChange' | 'drawerSize'>;
 export declare const RootContext: React.Context<RootContext | null>;
-export declare function Root({ className, appKey, loggedInUser, linkComponent, onLogoutClick, shoppingCart, onSearchSubmit, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+export declare function Root({ className, appKey, loggedInUser, linkComponent, onLogoutClick, shoppingCart, shoppingCartNumberOfItems, onSearchSubmit, isCartOpen, onCartOpenChange, drawerSize, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Root {
     var displayName: string;
 }

package/dist/components/navigation-menu/global-navigation/global-navigation-shopping-cart.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react/jsx-runtime");
+require("clsx");
 require("react");
 require("../../drawer/index.cjs");
 require("../navigation-menu.cjs");
@@ -8,4 +9,7 @@ const components_navigationMenu_globalNavigation_globalNavigationMyPages = requi
 require("../../../assets/sprite.269ba410-teddy.svg");
 require("../../icon/icon.cjs");
 require("../../button/button.cjs");
+require("../../badge/badge.cjs");
+require("../../badge/alert-badge.cjs");
+require("../../badge/counter-badge.cjs");
 exports.ShoppingCart = components_navigationMenu_globalNavigation_globalNavigationMyPages.ShoppingCart;

package/dist/components/navigation-menu/global-navigation/global-navigation-shopping-cart.js

@@ -1,4 +1,5 @@
 import "react/jsx-runtime";
+import "clsx";
 import "react";
 import "../../drawer/index.js";
 import "../navigation-menu.js";
@@ -6,6 +7,9 @@ import { b } from "./global-navigation-my-pages.js";
 import "../../../assets/sprite.269ba410-teddy.svg";
 import "../../icon/icon.js";
 import "../../button/button.js";
+import "../../badge/badge.js";
+import "../../badge/alert-badge.js";
+import "../../badge/counter-badge.js";
 export {
   b as ShoppingCart
 };

package/dist/components/notabene/notabene-root.cjs

@@ -5,9 +5,9 @@ const React = require("react");
 const clsx = require("clsx");
 const components_box_box = require("../box/box.cjs");
 const styles = {
-  "teddy-notabene": "_teddy-notabene_1dybk_1",
-  "teddy-notabene__icon": "_teddy-notabene__icon_1dybk_9",
-  "teddy-notabene__heading": "_teddy-notabene__heading_1dybk_9"
+  "teddy-notabene": "_teddy-notabene_1kgqm_1",
+  "teddy-notabene__icon": "_teddy-notabene__icon_1kgqm_9",
+  "teddy-notabene__heading": "_teddy-notabene__heading_1kgqm_9"
 };
 const rootClassName = "teddy-notabene";
 const Root = React.forwardRef(

package/dist/components/notabene/notabene-root.js

@@ -3,9 +3,9 @@ import React__default from "react";
 import clsx from "clsx";
 import { Box } from "../box/box.js";
 const styles = {
-  "teddy-notabene": "_teddy-notabene_1dybk_1",
-  "teddy-notabene__icon": "_teddy-notabene__icon_1dybk_9",
-  "teddy-notabene__heading": "_teddy-notabene__heading_1dybk_9"
+  "teddy-notabene": "_teddy-notabene_1kgqm_1",
+  "teddy-notabene__icon": "_teddy-notabene__icon_1kgqm_9",
+  "teddy-notabene__heading": "_teddy-notabene__heading_1kgqm_9"
 };
 const rootClassName = "teddy-notabene";
 const Root = React__default.forwardRef(

package/dist/drawer.module-BPXo6-Q2.js

@@ -0,0 +1,15 @@
+const styles = {
+  "teddy-drawer__overlay": "_teddy-drawer__overlay_xphhg_26",
+  "teddy-overlay-no-op": "_teddy-overlay-no-op_xphhg_1",
+  "teddy-fade-in": "_teddy-fade-in_xphhg_1",
+  "teddy-fade-out": "_teddy-fade-out_xphhg_1",
+  "teddy-drawer__overlay--container": "_teddy-drawer__overlay--container_xphhg_57",
+  "teddy-drawer__content": "_teddy-drawer__content_xphhg_63",
+  "drawer-content-show": "_drawer-content-show_xphhg_1",
+  "drawer-content-hide": "_drawer-content-hide_xphhg_1",
+  "teddy-drawer__content--lg": "_teddy-drawer__content--lg_xphhg_88",
+  "teddy-drawer__close--floating": "_teddy-drawer__close--floating_xphhg_93"
+};
+export {
+  styles as s
+};

package/dist/drawer.module-_pUdp_M1.cjs

@@ -0,0 +1,14 @@
+"use strict";
+const styles = {
+  "teddy-drawer__overlay": "_teddy-drawer__overlay_xphhg_26",
+  "teddy-overlay-no-op": "_teddy-overlay-no-op_xphhg_1",
+  "teddy-fade-in": "_teddy-fade-in_xphhg_1",
+  "teddy-fade-out": "_teddy-fade-out_xphhg_1",
+  "teddy-drawer__overlay--container": "_teddy-drawer__overlay--container_xphhg_57",
+  "teddy-drawer__content": "_teddy-drawer__content_xphhg_63",
+  "drawer-content-show": "_drawer-content-show_xphhg_1",
+  "drawer-content-hide": "_drawer-content-hide_xphhg_1",
+  "teddy-drawer__content--lg": "_teddy-drawer__content--lg_xphhg_88",
+  "teddy-drawer__close--floating": "_teddy-drawer__close--floating_xphhg_93"
+};
+exports.styles = styles;

package/dist/style.css

@@ -532,7 +532,7 @@
   0% {
     transform: translateX(-100%);
   }
-}._teddy-notabene_1dybk_1 {
+}._teddy-notabene_1kgqm_1 {
   padding: var(--teddy-spacing-300);
   display: flex;
   flex-direction: column;
@@ -540,12 +540,15 @@
   background-color: var(--teddy-color-background-status-warning);
   color: var(--teddy-color-text-default);
 }
-._teddy-notabene__icon_1dybk_9, ._teddy-notabene__heading_1dybk_9 {
+._teddy-notabene__icon_1kgqm_9, ._teddy-notabene__heading_1kgqm_9 {
   color: var(--teddy-color-orange-600);
   align-self: flex-start;
 }
+._teddy-notabene__icon_1kgqm_9 {
+  flex-shrink: 0;
+}
 @media (min-width: 600px) {
-  ._teddy-notabene_1dybk_1 {
+  ._teddy-notabene_1kgqm_1 {
     padding: var(--teddy-spacing-400);
     flex-direction: row;
     gap: var(--teddy-spacing-300);
@@ -1013,7 +1016,7 @@
     transform: rotate(180deg);
   }
 }@layer reset, flex, button, link, drawer;
-@keyframes _teddy-fade-in_uo1cy_1 {
+@keyframes _teddy-fade-in_xphhg_1 {
   from {
     opacity: 0;
   }
@@ -1021,7 +1024,7 @@
     opacity: 1;
   }
 }
-@keyframes _teddy-fade-out_uo1cy_1 {
+@keyframes _teddy-fade-out_xphhg_1 {
   from {
     opacity: 1;
   }
@@ -1029,7 +1032,7 @@
     opacity: 0;
   }
 }
-@keyframes _teddy-overlay-no-op_uo1cy_1 {
+@keyframes _teddy-overlay-no-op_xphhg_1 {
   from {
     opacity: 1;
   }
@@ -1037,74 +1040,80 @@
     opacity: 1;
   }
 }
-._teddy-drawer__overlay_uo1cy_26 {
+._teddy-drawer__overlay_xphhg_26 {
   box-sizing: border-box;
 }
 @layer drawer {
-  ._teddy-drawer__overlay_uo1cy_26 {
+  ._teddy-drawer__overlay_xphhg_26 {
     box-sizing: border-box;
     position: fixed;
     inset: 0;
+    z-index: 40;
   }
   @media (prefers-reduced-motion: no-preference) {
-    ._teddy-drawer__overlay_uo1cy_26 {
+    ._teddy-drawer__overlay_xphhg_26 {
       /* Keep the overlay mounted until the children have animated */
     }
-    ._teddy-drawer__overlay_uo1cy_26:where([data-state=closed]) {
-      animation: _teddy-overlay-no-op_uo1cy_1 400ms cubic-bezier(0.16, 1, 0.3, 1);
+    ._teddy-drawer__overlay_xphhg_26:where([data-state=closed]) {
+      animation: _teddy-overlay-no-op_xphhg_1 400ms cubic-bezier(0.16, 1, 0.3, 1);
     }
-    ._teddy-drawer__overlay_uo1cy_26:where([data-state=open])::before {
-      animation: _teddy-fade-in_uo1cy_1 500ms cubic-bezier(0.16, 1, 0.3, 1);
+    ._teddy-drawer__overlay_xphhg_26:where([data-state=open])::before {
+      animation: _teddy-fade-in_xphhg_1 500ms cubic-bezier(0.16, 1, 0.3, 1);
     }
-    ._teddy-drawer__overlay_uo1cy_26:where([data-state=closed])::before {
-      animation: _teddy-fade-out_uo1cy_1 400ms cubic-bezier(0.16, 1, 0.3, 1);
+    ._teddy-drawer__overlay_xphhg_26:where([data-state=closed])::before {
+      animation: _teddy-fade-out_xphhg_1 400ms cubic-bezier(0.16, 1, 0.3, 1);
     }
   }
-  ._teddy-drawer__overlay_uo1cy_26::before {
+  ._teddy-drawer__overlay_xphhg_26::before {
     position: fixed;
     content: "";
     inset: 0;
     background-color: var(--teddy-color-overlay-default);
   }
-  ._teddy-drawer__overlay--container_uo1cy_56 {
+  ._teddy-drawer__overlay--container_xphhg_57 {
     position: absolute;
   }
-  ._teddy-drawer__overlay--container_uo1cy_56::before {
+  ._teddy-drawer__overlay--container_xphhg_57::before {
     position: absolute;
   }
-  ._teddy-drawer__overlay--container_uo1cy_56 ._teddy-drawer__content_uo1cy_62 {
+  ._teddy-drawer__overlay--container_xphhg_57 ._teddy-drawer__content_xphhg_63 {
     position: absolute;
   }
-  ._teddy-drawer__content_uo1cy_62 {
+  ._teddy-drawer__content_xphhg_63 {
     background-color: var(--teddy-color-background-primary);
     box-shadow: var(--teddy-shadow-lg);
     position: fixed;
     overflow: hidden;
     inset: 0 0 0 auto;
-    max-width: 25rem;
     box-sizing: border-box;
-    min-width: min(100%, 400px);
     padding: var(--teddy-spacing-300);
     display: flex;
     flex-direction: column;
     gap: var(--teddy-spacing-200);
+    max-width: 25rem;
+    min-width: min(100%, 400px);
   }
   @media (prefers-reduced-motion: no-preference) {
-    ._teddy-drawer__content_uo1cy_62:where([data-state=open]) {
-      animation: _drawer-content-show_uo1cy_1 450ms cubic-bezier(0.16, 1, 0.3, 1);
+    ._teddy-drawer__content_xphhg_63:where([data-state=open]) {
+      animation: _drawer-content-show_xphhg_1 450ms cubic-bezier(0.16, 1, 0.3, 1);
     }
-    ._teddy-drawer__content_uo1cy_62:where([data-state=closed]) {
-      animation: _drawer-content-hide_uo1cy_1 350ms cubic-bezier(0.16, 1, 0.3, 1);
+    ._teddy-drawer__content_xphhg_63:where([data-state=closed]) {
+      animation: _drawer-content-hide_xphhg_1 350ms cubic-bezier(0.16, 1, 0.3, 1);
     }
   }
-  ._teddy-drawer__close--floating_uo1cy_87 {
+  ._teddy-drawer__content--lg_xphhg_88 {
+    min-width: min(100%, 30rem);
+    width: 30vw;
+    max-width: initial;
+  }
+  ._teddy-drawer__close--floating_xphhg_93 {
     position: absolute;
     z-index: 2;
     top: var(--teddy-spacing-200);
     right: var(--teddy-spacing-200);
   }
 }
-@keyframes _drawer-content-show_uo1cy_1 {
+@keyframes _drawer-content-show_xphhg_1 {
   from {
     transform: translateX(100%);
   }
@@ -1112,7 +1121,7 @@
     transform: translateX(0px);
   }
 }
-@keyframes _drawer-content-hide_uo1cy_1 {
+@keyframes _drawer-content-hide_xphhg_1 {
   from {
     transform: translateX(0px);
   }
@@ -2569,6 +2578,84 @@
 ._teddy-field-error-text__indicator_1735t_12 {
   color: var(--teddy-color-text-status-error-medium);
   line-height: var(--teddy-typography-line-height-tight);
+}._teddy-badge_1fsdh_1 {
+  font-family: var(--teddy-typography-family-default);
+  font-weight: var(--teddy-typography-weight-medium);
+  font-size: var(--teddy-typography-scale-75);
+  min-height: var(--teddy-spacing-200);
+  border-radius: var(--teddy-border-radius-xs);
+  line-height: 1;
+  padding: var(--teddy-spacing-50) var(--teddy-spacing-100);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--teddy-spacing-50);
+}
+._teddy-badge--counter-badge_1fsdh_13 {
+  padding: var(--teddy-spacing-10) var(--teddy-spacing-50);
+  border-radius: var(--teddy-spacing-100);
+  font-size: var(--teddy-typography-scale-50);
+  line-height: var(--teddy-typography-line-height-tight);
+}
+._teddy-badge--alert-badge_1fsdh_19 {
+  display: block;
+  padding: 0;
+  min-height: initial;
+  box-sizing: content-box;
+  border-radius: var(--teddy-border-radius-full);
+  width: var(--teddy-spacing-100);
+  height: var(--teddy-spacing-100);
+  border: var(--teddy-border-width-sm) solid;
+}
+._teddy-badge--attention_1fsdh_29 {
+  background-color: var(--teddy-color-background-status-attention);
+  color: var(--teddy-color-text-status-attention);
+}
+._teddy-badge--attention_1fsdh_29._teddy-badge--alert-badge_1fsdh_19 {
+  border-color: var(--teddy-color-background-status-special);
+}
+._teddy-badge--special_1fsdh_36 {
+  background-color: var(--teddy-color-background-status-special);
+  color: var(--teddy-color-text-status-special);
+}
+._teddy-badge--neutral_1fsdh_40 {
+  background-color: var(--teddy-color-background-status-neutral);
+  color: var(--teddy-color-text-status-neutral);
+}
+._teddy-badge--neutral_1fsdh_40._teddy-badge--alert-badge_1fsdh_19 {
+  background-color: var(--teddy-color-text-status-neutral);
+  border-color: var(--teddy-color-background-status-neutral);
+}
+._teddy-badge--information_1fsdh_48 {
+  background-color: var(--teddy-color-background-status-info-strong);
+  color: var(--teddy-color-text-status-info-strong);
+}
+._teddy-badge--information_1fsdh_48._teddy-badge--alert-badge_1fsdh_19 {
+  background-color: var(--teddy-color-text-status-info-strong);
+  border-color: var(--teddy-color-background-status-info-strong);
+}
+._teddy-badge--success_1fsdh_56 {
+  background-color: var(--teddy-color-background-status-success-strong);
+  color: var(--teddy-color-text-status-success-strong);
+}
+._teddy-badge--success_1fsdh_56._teddy-badge--alert-badge_1fsdh_19 {
+  background-color: var(--teddy-color-text-status-success-strong);
+  border-color: var(--teddy-color-background-status-success-strong);
+}
+._teddy-badge--warning_1fsdh_64 {
+  background-color: var(--teddy-color-background-status-warning-strong);
+  color: var(--teddy-color-text-status-warning-strong);
+}
+._teddy-badge--warning_1fsdh_64._teddy-badge--alert-badge_1fsdh_19 {
+  background-color: var(--teddy-color-text-status-warning-strong);
+  border-color: var(--teddy-color-background-status-warning-strong);
+}
+._teddy-badge--error_1fsdh_72 {
+  background-color: var(--teddy-color-background-status-error-strong);
+  color: var(--teddy-color-text-status-error-strong);
+}
+._teddy-badge--error_1fsdh_72._teddy-badge--alert-badge_1fsdh_19 {
+  background-color: var(--teddy-color-text-status-error-strong);
+  border-color: var(--teddy-color-background-status-error-strong);
 }@layer heading, link, accordion;
 @layer accordion {
   ._teddy-accordion_1arsz_3 {
@@ -2769,26 +2856,41 @@
       height: 0;
     }
   }
-}._teddy-global-navigation_1b1i5_1 {
+}._teddy-global-navigation_y8nb6_1 {
   position: sticky;
   inset: 0 0 auto 0;
+  z-index: 39;
 }
-._teddy-global-navigation__mobile_1b1i5_5 {
+._teddy-global-navigation__mobile_y8nb6_6 {
   padding: var(--teddy-spacing-25) var(--teddy-spacing-200);
   border-bottom: var(--teddy-border-width-sm) solid var(--teddy-color-border-weak);
 }
-._teddy-global-navigation__mobile_1b1i5_5::before {
+._teddy-global-navigation__mobile_y8nb6_6::before {
   content: "";
   display: block;
   width: var(--width-for-centering-element);
 }
-._teddy-global-navigation__mobile_1b1i5_5::after {
+._teddy-global-navigation__mobile_y8nb6_6::after {
   content: "";
   display: block;
   width: var(--width-for-centering-element);
 }
-._teddy-global-navigation__link_1b1i5_19 {
+._teddy-global-navigation__link_y8nb6_20 {
   text-decoration: none;
+}
+._teddy-global-navigation__viewport_y8nb6_23 {
+  height: var(--radix-navigation-menu-viewport-height, calc(3.25rem * var(--teddy-scale)));
+}
+._teddy-global-navigation__item-wrapper_y8nb6_26 {
+  position: relative;
+}
+._teddy-global-navigation__item-count_y8nb6_29 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  left: 15px;
+  top: -6px;
 }@layer icon, toggle;
 ._teddy-toggle__input_m5h3g_2::before {
   box-sizing: border-box;
@@ -2912,84 +3014,6 @@
     opacity: 1;
     scale: 1;
   }
-}._teddy-badge_1fsdh_1 {
-  font-family: var(--teddy-typography-family-default);
-  font-weight: var(--teddy-typography-weight-medium);
-  font-size: var(--teddy-typography-scale-75);
-  min-height: var(--teddy-spacing-200);
-  border-radius: var(--teddy-border-radius-xs);
-  line-height: 1;
-  padding: var(--teddy-spacing-50) var(--teddy-spacing-100);
-  display: inline-flex;
-  align-items: center;
-  gap: var(--teddy-spacing-50);
-}
-._teddy-badge--counter-badge_1fsdh_13 {
-  padding: var(--teddy-spacing-10) var(--teddy-spacing-50);
-  border-radius: var(--teddy-spacing-100);
-  font-size: var(--teddy-typography-scale-50);
-  line-height: var(--teddy-typography-line-height-tight);
-}
-._teddy-badge--alert-badge_1fsdh_19 {
-  display: block;
-  padding: 0;
-  min-height: initial;
-  box-sizing: content-box;
-  border-radius: var(--teddy-border-radius-full);
-  width: var(--teddy-spacing-100);
-  height: var(--teddy-spacing-100);
-  border: var(--teddy-border-width-sm) solid;
-}
-._teddy-badge--attention_1fsdh_29 {
-  background-color: var(--teddy-color-background-status-attention);
-  color: var(--teddy-color-text-status-attention);
-}
-._teddy-badge--attention_1fsdh_29._teddy-badge--alert-badge_1fsdh_19 {
-  border-color: var(--teddy-color-background-status-special);
-}
-._teddy-badge--special_1fsdh_36 {
-  background-color: var(--teddy-color-background-status-special);
-  color: var(--teddy-color-text-status-special);
-}
-._teddy-badge--neutral_1fsdh_40 {
-  background-color: var(--teddy-color-background-status-neutral);
-  color: var(--teddy-color-text-status-neutral);
-}
-._teddy-badge--neutral_1fsdh_40._teddy-badge--alert-badge_1fsdh_19 {
-  background-color: var(--teddy-color-text-status-neutral);
-  border-color: var(--teddy-color-background-status-neutral);
-}
-._teddy-badge--information_1fsdh_48 {
-  background-color: var(--teddy-color-background-status-info-strong);
-  color: var(--teddy-color-text-status-info-strong);
-}
-._teddy-badge--information_1fsdh_48._teddy-badge--alert-badge_1fsdh_19 {
-  background-color: var(--teddy-color-text-status-info-strong);
-  border-color: var(--teddy-color-background-status-info-strong);
-}
-._teddy-badge--success_1fsdh_56 {
-  background-color: var(--teddy-color-background-status-success-strong);
-  color: var(--teddy-color-text-status-success-strong);
-}
-._teddy-badge--success_1fsdh_56._teddy-badge--alert-badge_1fsdh_19 {
-  background-color: var(--teddy-color-text-status-success-strong);
-  border-color: var(--teddy-color-background-status-success-strong);
-}
-._teddy-badge--warning_1fsdh_64 {
-  background-color: var(--teddy-color-background-status-warning-strong);
-  color: var(--teddy-color-text-status-warning-strong);
-}
-._teddy-badge--warning_1fsdh_64._teddy-badge--alert-badge_1fsdh_19 {
-  background-color: var(--teddy-color-text-status-warning-strong);
-  border-color: var(--teddy-color-background-status-warning-strong);
-}
-._teddy-badge--error_1fsdh_72 {
-  background-color: var(--teddy-color-background-status-error-strong);
-  color: var(--teddy-color-text-status-error-strong);
-}
-._teddy-badge--error_1fsdh_72._teddy-badge--alert-badge_1fsdh_19 {
-  background-color: var(--teddy-color-text-status-error-strong);
-  border-color: var(--teddy-color-background-status-error-strong);
 }@keyframes _teddy-fade-in_3n21u_1 {
   from {
     opacity: 0;

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=8"
   },
   "private": false,
-  "version": "0.0.34",
+  "version": "0.0.35",
   "sideEffects": [
     "**/*.css"
   ],

package/dist/drawer.module-BZV0Appw.js

@@ -1,14 +0,0 @@
-const styles = {
-  "teddy-drawer__overlay": "_teddy-drawer__overlay_uo1cy_26",
-  "teddy-overlay-no-op": "_teddy-overlay-no-op_uo1cy_1",
-  "teddy-fade-in": "_teddy-fade-in_uo1cy_1",
-  "teddy-fade-out": "_teddy-fade-out_uo1cy_1",
-  "teddy-drawer__overlay--container": "_teddy-drawer__overlay--container_uo1cy_56",
-  "teddy-drawer__content": "_teddy-drawer__content_uo1cy_62",
-  "drawer-content-show": "_drawer-content-show_uo1cy_1",
-  "drawer-content-hide": "_drawer-content-hide_uo1cy_1",
-  "teddy-drawer__close--floating": "_teddy-drawer__close--floating_uo1cy_87"
-};
-export {
-  styles as s
-};

package/dist/drawer.module-rgUBNOkt.cjs

@@ -1,13 +0,0 @@
-"use strict";
-const styles = {
-  "teddy-drawer__overlay": "_teddy-drawer__overlay_uo1cy_26",
-  "teddy-overlay-no-op": "_teddy-overlay-no-op_uo1cy_1",
-  "teddy-fade-in": "_teddy-fade-in_uo1cy_1",
-  "teddy-fade-out": "_teddy-fade-out_uo1cy_1",
-  "teddy-drawer__overlay--container": "_teddy-drawer__overlay--container_uo1cy_56",
-  "teddy-drawer__content": "_teddy-drawer__content_uo1cy_62",
-  "drawer-content-show": "_drawer-content-show_uo1cy_1",
-  "drawer-content-hide": "_drawer-content-hide_uo1cy_1",
-  "teddy-drawer__close--floating": "_teddy-drawer__close--floating_uo1cy_87"
-};
-exports.styles = styles;