@telia/teddy 0.0.36 → 0.0.37

package/dist/components/badge/badge.cjs

@@ -7,16 +7,16 @@ const reactSlot = require("@radix-ui/react-slot");
 require("../../assets/sprite.269ba410-teddy.svg");
 const components_icon_icon = require("../icon/icon.cjs");
 const styles = {
-  "teddy-badge": "_teddy-badge_1fsdh_1",
-  "teddy-badge--counter-badge": "_teddy-badge--counter-badge_1fsdh_13",
-  "teddy-badge--alert-badge": "_teddy-badge--alert-badge_1fsdh_19",
-  "teddy-badge--attention": "_teddy-badge--attention_1fsdh_29",
-  "teddy-badge--special": "_teddy-badge--special_1fsdh_36",
-  "teddy-badge--neutral": "_teddy-badge--neutral_1fsdh_40",
-  "teddy-badge--information": "_teddy-badge--information_1fsdh_48",
-  "teddy-badge--success": "_teddy-badge--success_1fsdh_56",
-  "teddy-badge--warning": "_teddy-badge--warning_1fsdh_64",
-  "teddy-badge--error": "_teddy-badge--error_1fsdh_72"
+  "teddy-badge": "_teddy-badge_wlyo5_1",
+  "teddy-badge--counter-badge": "_teddy-badge--counter-badge_wlyo5_13",
+  "teddy-badge--alert-badge": "_teddy-badge--alert-badge_wlyo5_23",
+  "teddy-badge--attention": "_teddy-badge--attention_wlyo5_33",
+  "teddy-badge--special": "_teddy-badge--special_wlyo5_40",
+  "teddy-badge--neutral": "_teddy-badge--neutral_wlyo5_44",
+  "teddy-badge--information": "_teddy-badge--information_wlyo5_52",
+  "teddy-badge--success": "_teddy-badge--success_wlyo5_60",
+  "teddy-badge--warning": "_teddy-badge--warning_wlyo5_68",
+  "teddy-badge--error": "_teddy-badge--error_wlyo5_76"
 };
 const rootClassName = "teddy-badge";
 function getIcon(variant) {

package/dist/components/badge/badge.js

@@ -5,16 +5,16 @@ import { Slottable, Slot } from "@radix-ui/react-slot";
 import "../../assets/sprite.269ba410-teddy.svg";
 import { Icon } from "../icon/icon.js";
 const styles = {
-  "teddy-badge": "_teddy-badge_1fsdh_1",
-  "teddy-badge--counter-badge": "_teddy-badge--counter-badge_1fsdh_13",
-  "teddy-badge--alert-badge": "_teddy-badge--alert-badge_1fsdh_19",
-  "teddy-badge--attention": "_teddy-badge--attention_1fsdh_29",
-  "teddy-badge--special": "_teddy-badge--special_1fsdh_36",
-  "teddy-badge--neutral": "_teddy-badge--neutral_1fsdh_40",
-  "teddy-badge--information": "_teddy-badge--information_1fsdh_48",
-  "teddy-badge--success": "_teddy-badge--success_1fsdh_56",
-  "teddy-badge--warning": "_teddy-badge--warning_1fsdh_64",
-  "teddy-badge--error": "_teddy-badge--error_1fsdh_72"
+  "teddy-badge": "_teddy-badge_wlyo5_1",
+  "teddy-badge--counter-badge": "_teddy-badge--counter-badge_wlyo5_13",
+  "teddy-badge--alert-badge": "_teddy-badge--alert-badge_wlyo5_23",
+  "teddy-badge--attention": "_teddy-badge--attention_wlyo5_33",
+  "teddy-badge--special": "_teddy-badge--special_wlyo5_40",
+  "teddy-badge--neutral": "_teddy-badge--neutral_wlyo5_44",
+  "teddy-badge--information": "_teddy-badge--information_wlyo5_52",
+  "teddy-badge--success": "_teddy-badge--success_wlyo5_60",
+  "teddy-badge--warning": "_teddy-badge--warning_wlyo5_68",
+  "teddy-badge--error": "_teddy-badge--error_wlyo5_76"
 };
 const rootClassName = "teddy-badge";
 function getIcon(variant) {

package/dist/components/card/card.cjs

@@ -11,6 +11,7 @@ const components_button_button = require("../button/button.cjs");
 const components_link_link = require("../link/link.cjs");
 const tokens_spacing_variables = require("../../tokens/spacing/variables.cjs");
 const components_grid_grid = require("../grid/grid.cjs");
+const tokens_color_variables = require("../../tokens/color/variables.cjs");
 const styles = {
   "teddy-card": "_teddy-card_aok47_3",
   "teddy-card__slot": "_teddy-card__slot_aok47_13",
@@ -47,7 +48,7 @@ const actionElementIdentifier = `${rootClassName}__action`;
 const variantOptions = ["purple-light", "purple-dark", "gray", "white", "beige"];
 const RootContext = React.createContext(void 0);
 const Root = React.forwardRef(
-  ({ className, children, shadow, backgroundImageSrc, layout, variant, bordered, ...props }, forwardRef) => {
+  ({ className, children, shadow, backgroundImageSrc, imageGradient, layout, variant, bordered, ...props }, forwardRef) => {
     const buttonRef = React.useRef(null);
     const linkRef = React.useRef(null);
     const classes = clsx(
@@ -57,17 +58,32 @@ const Root = React.forwardRef(
         [styles[`${rootClassName}--border`]]: bordered,
         [styles[`${rootClassName}--shadow`]]: shadow,
         [styles[`${rootClassName}--background-image`]]: backgroundImageSrc,
+        [styles[`${rootClassName}--background-image--${layout}`]]: layout,
         [styles[`${rootClassName}--layout`]]: layout,
         [styles[`${rootClassName}--${layout}`]]: layout
       },
       className
     );
+    const customStyle = backgroundImageSrc ? imageGradient === "light" ? {
+      backgroundImage: `
+        linear-gradient(${tokens_color_variables.teddyColorTransparentWhite850} 0%, 
+        ${tokens_color_variables.teddyColorTransparentWhite800} 50%, 
+        ${tokens_color_variables.teddyColorTransparentWhite100} 100%), 
+        url(${backgroundImageSrc})`,
+      ...props.style
+    } : {
+      backgroundImage: `
+        linear-gradient(${tokens_color_variables.teddyColorTransparentBlack600} 0%,
+        ${tokens_color_variables.teddyColorTransparentBlack200} 100%), 
+        url(${backgroundImageSrc})`,
+      ...props.style
+    } : props.style;
     return /* @__PURE__ */ jsxRuntime.jsx(RootContext.Provider, { value: { buttonRef, linkRef, variant, layout }, children: /* @__PURE__ */ jsxRuntime.jsx(
       components_grid_grid.Grid,
       {
         ...props,
         className: classes,
-        style: backgroundImageSrc ? { backgroundImage: `url(${backgroundImageSrc})`, ...props.style } : props.style,
+        style: customStyle,
         onClick: utils_composeEventHandlers.composeEventHandlers(props.onClick, (e) => {
           var _a;
           if (e.isDefaultPrevented())

package/dist/components/card/card.d.ts

@@ -8,6 +8,7 @@ import { Grid } from '../grid';
 declare const variantOptions: readonly ["purple-light", "purple-dark", "gray", "white", "beige"];
 type Variant = (typeof variantOptions)[number];
 type Layout = 'navigation-vertical' | 'navigation-horizontal-small' | 'navigation-horizontal-large' | 'rich-card';
+type Gradient = 'light' | 'dark';
 /** -------------------------------------------------------------------------------------------------
  * Root
  * -----------------------------------------------------------------------------------------------*/
@@ -17,6 +18,7 @@ type RootProps = React.ComponentPropsWithoutRef<typeof Grid> & {
     bordered?: boolean;
     shadow?: boolean;
     backgroundImageSrc?: string;
+    imageGradient?: Gradient;
     layout?: Layout;
 };
 /** -------------------------------------------------------------------------------------------------

package/dist/components/card/card.js

@@ -9,6 +9,7 @@ import { Button as Button$1 } from "../button/button.js";
 import { Link as Link$1 } from "../link/link.js";
 import { teddySpacing50 } from "../../tokens/spacing/variables.js";
 import { Grid } from "../grid/grid.js";
+import { teddyColorTransparentWhite850, teddyColorTransparentWhite800, teddyColorTransparentWhite100, teddyColorTransparentBlack600, teddyColorTransparentBlack200 } from "../../tokens/color/variables.js";
 const styles = {
   "teddy-card": "_teddy-card_aok47_3",
   "teddy-card__slot": "_teddy-card__slot_aok47_13",
@@ -45,7 +46,7 @@ const actionElementIdentifier = `${rootClassName}__action`;
 const variantOptions = ["purple-light", "purple-dark", "gray", "white", "beige"];
 const RootContext = React__default.createContext(void 0);
 const Root = React__default.forwardRef(
-  ({ className, children, shadow, backgroundImageSrc, layout, variant, bordered, ...props }, forwardRef) => {
+  ({ className, children, shadow, backgroundImageSrc, imageGradient, layout, variant, bordered, ...props }, forwardRef) => {
     const buttonRef = React__default.useRef(null);
     const linkRef = React__default.useRef(null);
     const classes = clsx(
@@ -55,17 +56,32 @@ const Root = React__default.forwardRef(
         [styles[`${rootClassName}--border`]]: bordered,
         [styles[`${rootClassName}--shadow`]]: shadow,
         [styles[`${rootClassName}--background-image`]]: backgroundImageSrc,
+        [styles[`${rootClassName}--background-image--${layout}`]]: layout,
         [styles[`${rootClassName}--layout`]]: layout,
         [styles[`${rootClassName}--${layout}`]]: layout
       },
       className
     );
+    const customStyle = backgroundImageSrc ? imageGradient === "light" ? {
+      backgroundImage: `
+        linear-gradient(${teddyColorTransparentWhite850} 0%, 
+        ${teddyColorTransparentWhite800} 50%, 
+        ${teddyColorTransparentWhite100} 100%), 
+        url(${backgroundImageSrc})`,
+      ...props.style
+    } : {
+      backgroundImage: `
+        linear-gradient(${teddyColorTransparentBlack600} 0%,
+        ${teddyColorTransparentBlack200} 100%), 
+        url(${backgroundImageSrc})`,
+      ...props.style
+    } : props.style;
     return /* @__PURE__ */ jsx(RootContext.Provider, { value: { buttonRef, linkRef, variant, layout }, children: /* @__PURE__ */ jsx(
       Grid,
       {
         ...props,
         className: classes,
-        style: backgroundImageSrc ? { backgroundImage: `url(${backgroundImageSrc})`, ...props.style } : props.style,
+        style: customStyle,
         onClick: composeEventHandlers(props.onClick, (e) => {
           var _a;
           if (e.isDefaultPrevented())

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-_pUdp_M1.cjs");
+const drawer_module = require("../../drawer.module-CTowTFmf.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-BPXo6-Q2.js";
+import { s as styles } from "../../drawer.module-BNPErv-x.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-_pUdp_M1.cjs");
+const drawer_module = require("../../drawer.module-CTowTFmf.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");
@@ -36,7 +36,7 @@ const InnerContent = React.forwardRef(
       ],
       className
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(DrawerPrimitive__namespace.Content, { ...props, ref: forwardedRef, className: classes, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(DrawerPrimitive__namespace.Content, { ...props, ref: forwardedRef, asChild: true, className: classes, children: /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { children }) });
   }
 );
 const Content = React.forwardRef(

package/dist/components/drawer/drawer-content.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-BPXo6-Q2.js";
+import { s as styles } from "../../drawer.module-BNPErv-x.js";
 import { rootClassName } from "./drawer-root.js";
 import { OverlayContext, Overlay } from "./drawer-overlay.js";
 import { Flex } from "../flex/flex.js";
@@ -17,7 +17,7 @@ const InnerContent = React__default.forwardRef(
       ],
       className
     );
-    return /* @__PURE__ */ jsx(DrawerPrimitive.Content, { ...props, ref: forwardedRef, className: classes, asChild: true, children: /* @__PURE__ */ jsx(Flex, { children }) });
+    return /* @__PURE__ */ jsx(DrawerPrimitive.Content, { ...props, ref: forwardedRef, asChild: true, className: classes, children: /* @__PURE__ */ jsx(Flex, { children }) });
   }
 );
 const Content = React__default.forwardRef(

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-_pUdp_M1.cjs");
+const drawer_module = require("../../drawer.module-CTowTFmf.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-BPXo6-Q2.js";
+import { s as styles } from "../../drawer.module-BNPErv-x.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-_pUdp_M1.cjs");
+const drawer_module = require("../../drawer.module-CTowTFmf.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-BPXo6-Q2.js";
+import { s as styles } from "../../drawer.module-BNPErv-x.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-_pUdp_M1.cjs");
+const drawer_module = require("../../drawer.module-CTowTFmf.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-BPXo6-Q2.js";
+import { s as styles } from "../../drawer.module-BNPErv-x.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-_pUdp_M1.cjs");
+const drawer_module = require("../../drawer.module-CTowTFmf.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-BPXo6-Q2.js";
+import { s as styles } from "../../drawer.module-BNPErv-x.js";
 import { rootClassName } from "./drawer-root.js";
 import { Heading } from "../heading/heading.js";
 const Title = React__default.forwardRef(

package/dist/components/expandable-card/expandable-card-root.cjs

@@ -22,21 +22,21 @@ function _interopNamespaceDefault(e) {
 }
 const AccordionPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(AccordionPrimitive);
 const styles = {
-  "teddy-expandable-card": "_teddy-expandable-card_12yyw_1",
-  "teddy-expandable-card__item": "_teddy-expandable-card__item_12yyw_6",
-  "teddy-expandable-card__trigger": "_teddy-expandable-card__trigger_12yyw_14",
-  "teddy-expandable-card__indicator": "_teddy-expandable-card__indicator_12yyw_38",
-  "teddy-expandable-card__hidden": "_teddy-expandable-card__hidden_12yyw_50",
-  "teddy-expandable-card__line": "_teddy-expandable-card__line_12yyw_56",
-  "teddy-expandable-card__content": "_teddy-expandable-card__content_12yyw_59",
-  "teddy-expandable-card__description": "_teddy-expandable-card__description_12yyw_68",
-  "teddy-expandable-card__price": "_teddy-expandable-card__price_12yyw_79",
-  "teddy-expandable-card__header": "_teddy-expandable-card__header_12yyw_83",
-  "teddy-expandable-card__slot": "_teddy-expandable-card__slot_12yyw_91",
-  "teddy-expandable-card__slot--center": "_teddy-expandable-card__slot--center_12yyw_96",
-  "teddy-expandable-card__slot--bottom": "_teddy-expandable-card__slot--bottom_12yyw_99",
-  "teddy-expandable-card__button--right": "_teddy-expandable-card__button--right_12yyw_112",
-  "teddy-expandable-card__button--left": "_teddy-expandable-card__button--left_12yyw_115"
+  "teddy-expandable-card": "_teddy-expandable-card_15whs_1",
+  "teddy-expandable-card__item": "_teddy-expandable-card__item_15whs_7",
+  "teddy-expandable-card__trigger": "_teddy-expandable-card__trigger_15whs_15",
+  "teddy-expandable-card__indicator": "_teddy-expandable-card__indicator_15whs_39",
+  "teddy-expandable-card__hidden": "_teddy-expandable-card__hidden_15whs_51",
+  "teddy-expandable-card__line": "_teddy-expandable-card__line_15whs_57",
+  "teddy-expandable-card__content": "_teddy-expandable-card__content_15whs_60",
+  "teddy-expandable-card__description": "_teddy-expandable-card__description_15whs_69",
+  "teddy-expandable-card__price": "_teddy-expandable-card__price_15whs_80",
+  "teddy-expandable-card__header": "_teddy-expandable-card__header_15whs_84",
+  "teddy-expandable-card__slot": "_teddy-expandable-card__slot_15whs_92",
+  "teddy-expandable-card__slot--bottom": "_teddy-expandable-card__slot--bottom_15whs_97",
+  "teddy-expandable-card__slot--center": "_teddy-expandable-card__slot--center_15whs_100",
+  "teddy-expandable-card__button--right": "_teddy-expandable-card__button--right_15whs_116",
+  "teddy-expandable-card__button--left": "_teddy-expandable-card__button--left_15whs_119"
 };
 const rootClassName = "teddy-expandable-card";
 const Root = React.forwardRef(

package/dist/components/expandable-card/expandable-card-root.js

@@ -3,21 +3,21 @@ import React__default from "react";
 import clsx from "clsx";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 const styles = {
-  "teddy-expandable-card": "_teddy-expandable-card_12yyw_1",
-  "teddy-expandable-card__item": "_teddy-expandable-card__item_12yyw_6",
-  "teddy-expandable-card__trigger": "_teddy-expandable-card__trigger_12yyw_14",
-  "teddy-expandable-card__indicator": "_teddy-expandable-card__indicator_12yyw_38",
-  "teddy-expandable-card__hidden": "_teddy-expandable-card__hidden_12yyw_50",
-  "teddy-expandable-card__line": "_teddy-expandable-card__line_12yyw_56",
-  "teddy-expandable-card__content": "_teddy-expandable-card__content_12yyw_59",
-  "teddy-expandable-card__description": "_teddy-expandable-card__description_12yyw_68",
-  "teddy-expandable-card__price": "_teddy-expandable-card__price_12yyw_79",
-  "teddy-expandable-card__header": "_teddy-expandable-card__header_12yyw_83",
-  "teddy-expandable-card__slot": "_teddy-expandable-card__slot_12yyw_91",
-  "teddy-expandable-card__slot--center": "_teddy-expandable-card__slot--center_12yyw_96",
-  "teddy-expandable-card__slot--bottom": "_teddy-expandable-card__slot--bottom_12yyw_99",
-  "teddy-expandable-card__button--right": "_teddy-expandable-card__button--right_12yyw_112",
-  "teddy-expandable-card__button--left": "_teddy-expandable-card__button--left_12yyw_115"
+  "teddy-expandable-card": "_teddy-expandable-card_15whs_1",
+  "teddy-expandable-card__item": "_teddy-expandable-card__item_15whs_7",
+  "teddy-expandable-card__trigger": "_teddy-expandable-card__trigger_15whs_15",
+  "teddy-expandable-card__indicator": "_teddy-expandable-card__indicator_15whs_39",
+  "teddy-expandable-card__hidden": "_teddy-expandable-card__hidden_15whs_51",
+  "teddy-expandable-card__line": "_teddy-expandable-card__line_15whs_57",
+  "teddy-expandable-card__content": "_teddy-expandable-card__content_15whs_60",
+  "teddy-expandable-card__description": "_teddy-expandable-card__description_15whs_69",
+  "teddy-expandable-card__price": "_teddy-expandable-card__price_15whs_80",
+  "teddy-expandable-card__header": "_teddy-expandable-card__header_15whs_84",
+  "teddy-expandable-card__slot": "_teddy-expandable-card__slot_15whs_92",
+  "teddy-expandable-card__slot--bottom": "_teddy-expandable-card__slot--bottom_15whs_97",
+  "teddy-expandable-card__slot--center": "_teddy-expandable-card__slot--center_15whs_100",
+  "teddy-expandable-card__button--right": "_teddy-expandable-card__button--right_15whs_116",
+  "teddy-expandable-card__button--left": "_teddy-expandable-card__button--left_15whs_119"
 };
 const rootClassName = "teddy-expandable-card";
 const Root = React__default.forwardRef(

package/dist/components/navigation-menu/global-navigation/global-navigation-desktop-simplified.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("react/jsx-runtime");
+require("react");
+require("../navigation-menu.cjs");
+const components_navigationMenu_globalNavigation_globalNavigationMyPages = require("./global-navigation-my-pages.cjs");
+require("./utils.cjs");
+require("../../box/box.cjs");
+exports.DesktopSimplified = components_navigationMenu_globalNavigation_globalNavigationMyPages.DesktopSimplified;

package/dist/components/navigation-menu/global-navigation/global-navigation-desktop-simplified.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+
+export type DesktopProps = React.ComponentPropsWithoutRef<'div'> & {
+    isSimplified?: boolean;
+};
+export declare const DesktopSimplified: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    isSimplified?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/navigation-menu/global-navigation/global-navigation-desktop-simplified.js

@@ -0,0 +1,9 @@
+import "react/jsx-runtime";
+import "react";
+import "../navigation-menu.js";
+import { c } from "./global-navigation-my-pages.js";
+import "./utils.js";
+import "../../box/box.js";
+export {
+  c as DesktopSimplified
+};

package/dist/components/navigation-menu/global-navigation/global-navigation-mobile-simplified.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("react/jsx-runtime");
+require("react");
+const components_navigationMenu_globalNavigation_globalNavigationMyPages = require("./global-navigation-my-pages.cjs");
+require("clsx");
+require("../navigation-menu.cjs");
+require("../../flex/flex.cjs");
+require("../../box/box.cjs");
+require("../../../assets/sprite.269ba410-teddy.svg");
+require("../../icon/icon.cjs");
+exports.MobileSimplified = components_navigationMenu_globalNavigation_globalNavigationMyPages.MobileSimplified;

package/dist/components/navigation-menu/global-navigation/global-navigation-mobile-simplified.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+
+export type MobileProps = React.ComponentPropsWithoutRef<'div'>;
+export declare function MobileSimplified(props: MobileProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace MobileSimplified {
+    var displayName: string;
+}

package/dist/components/navigation-menu/global-navigation/global-navigation-mobile-simplified.js

@@ -0,0 +1,12 @@
+import "react/jsx-runtime";
+import "react";
+import { d } from "./global-navigation-my-pages.js";
+import "clsx";
+import "../navigation-menu.js";
+import "../../flex/flex.js";
+import "../../box/box.js";
+import "../../../assets/sprite.269ba410-teddy.svg";
+import "../../icon/icon.js";
+export {
+  d as MobileSimplified
+};

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

@@ -327,6 +327,47 @@ function Mobile(props) {
   ] }) });
 }
 Mobile.displayName = "Mobile";
+const DesktopSimplified = React.forwardRef(() => {
+  const rootContext = React.useContext(RootContext);
+  if (!rootContext)
+    return null;
+  const { setSelectedMenuItem, linkComponent: Link } = rootContext;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    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.jsx(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(
+        "img",
+        {
+          src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
+          draggable: "false",
+          alt: "Telia logo"
+        }
+      ) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: subLink.link, onClick: () => setSelectedMenuItem(""), children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
+          draggable: "false",
+          alt: "Telia logo"
+        }
+      ) }) }) }, subLink.name)),
+      /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { ml: "auto" }),
+      /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(ShoppingCart, {}) })
+    ] }, link.name)),
+    /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.Viewport, { className: styles[`${rootClassName}__viewport`] })
+  ] });
+});
+DesktopSimplified.displayName = "DesktopSimplified";
+function MobileSimplified(props) {
+  const rootContext = React.useContext(RootContext);
+  if (!rootContext)
+    return null;
+  const { linkComponent: NavLink } = rootContext;
+  const classes = clsx([styles[`${rootClassName}__mobile`]], props.className);
+  return /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { ...props, className: classes, children: /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { flexGrow: "1", justify: "between", align: "center", gap: "200", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { flexShrink: "0", children: /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.Link, { asChild: true, variant: "button", children: rootContext.appKey === "open-pages" ? /* @__PURE__ */ jsxRuntime.jsx(NavLink, { href: "/", children: /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { size: "lg", name: "telia-logo", "aria-label": "Telia logo" }) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/", children: /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { size: "lg", name: "telia-logo", "aria-label": "Telia logo" }) }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { flexBasis: "0", gap: { sm: "100", md: "200" }, children: /* @__PURE__ */ jsxRuntime.jsx(ShoppingCart, {}) })
+  ] }) });
+}
+MobileSimplified.displayName = "MobileSimplified";
 const rootClassName = "teddy-global-navigation";
 const RootContext = React.createContext(null);
 function Root({
@@ -341,6 +382,7 @@ function Root({
   isCartOpen,
   onCartOpenChange,
   drawerSize = "md",
+  isSimplified,
   ...props
 }) {
   const [selectedMenuItem, setSelectedMenuItem] = React.useState(getInitialMenuItem());
@@ -380,8 +422,14 @@ function Root({
             setSelectedMenuItem(v);
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { display: { sm: "none", lg: "block" }, children: /* @__PURE__ */ jsxRuntime.jsx(Desktop, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { display: { lg: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(Mobile, {}) })
+            /* @__PURE__ */ jsxRuntime.jsxs(components_box_box.Box, { display: { sm: "none", lg: "block" }, children: [
+              isSimplified && /* @__PURE__ */ jsxRuntime.jsx(DesktopSimplified, {}),
+              !isSimplified && /* @__PURE__ */ jsxRuntime.jsx(Desktop, {})
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(components_box_box.Box, { display: { lg: "none" }, children: [
+              isSimplified && /* @__PURE__ */ jsxRuntime.jsx(MobileSimplified, {}),
+              !isSimplified && /* @__PURE__ */ jsxRuntime.jsx(Mobile, {})
+            ] })
           ]
         }
       ) })
@@ -419,8 +467,10 @@ function getInitialMenuItem() {
 Root.displayName = "GlobalNavigation";
 const GlobalNavigation = Root;
 exports.Desktop = Desktop;
+exports.DesktopSimplified = DesktopSimplified;
 exports.GlobalNavigation = GlobalNavigation;
 exports.Mobile = Mobile;
+exports.MobileSimplified = MobileSimplified;
 exports.MyPages = MyPages;
 exports.Root = Root;
 exports.RootContext = RootContext;

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

@@ -325,6 +325,47 @@ function Mobile(props) {
   ] }) });
 }
 Mobile.displayName = "Mobile";
+const DesktopSimplified = React__default.forwardRef(() => {
+  const rootContext = React__default.useContext(RootContext);
+  if (!rootContext)
+    return null;
+  const { setSelectedMenuItem, linkComponent: Link2 } = rootContext;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    LINKS.map((link) => /* @__PURE__ */ jsxs(NavigationMenu.List, { value: link.name, children: [
+      link.links.map((subLink) => /* @__PURE__ */ jsx(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(
+        "img",
+        {
+          src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
+          draggable: "false",
+          alt: "Telia logo"
+        }
+      ) }) : /* @__PURE__ */ jsx("a", { href: subLink.link, onClick: () => setSelectedMenuItem(""), children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
+          draggable: "false",
+          alt: "Telia logo"
+        }
+      ) }) }) }, subLink.name)),
+      /* @__PURE__ */ jsx(Box, { ml: "auto" }),
+      /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(ShoppingCart, {}) })
+    ] }, link.name)),
+    /* @__PURE__ */ jsx(NavigationMenu.Viewport, { className: styles[`${rootClassName}__viewport`] })
+  ] });
+});
+DesktopSimplified.displayName = "DesktopSimplified";
+function MobileSimplified(props) {
+  const rootContext = React__default.useContext(RootContext);
+  if (!rootContext)
+    return null;
+  const { linkComponent: NavLink } = rootContext;
+  const classes = clsx([styles[`${rootClassName}__mobile`]], props.className);
+  return /* @__PURE__ */ jsx(Flex, { ...props, className: classes, children: /* @__PURE__ */ jsxs(Flex, { flexGrow: "1", justify: "between", align: "center", gap: "200", children: [
+    /* @__PURE__ */ jsx(Box, { flexShrink: "0", children: /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: rootContext.appKey === "open-pages" ? /* @__PURE__ */ jsx(NavLink, { href: "/", children: /* @__PURE__ */ jsx(Icon, { size: "lg", name: "telia-logo", "aria-label": "Telia logo" }) }) : /* @__PURE__ */ jsx("a", { href: "/", children: /* @__PURE__ */ jsx(Icon, { size: "lg", name: "telia-logo", "aria-label": "Telia logo" }) }) }) }),
+    /* @__PURE__ */ jsx(Flex, { flexBasis: "0", gap: { sm: "100", md: "200" }, children: /* @__PURE__ */ jsx(ShoppingCart, {}) })
+  ] }) });
+}
+MobileSimplified.displayName = "MobileSimplified";
 const rootClassName = "teddy-global-navigation";
 const RootContext = React__default.createContext(null);
 function Root({
@@ -339,6 +380,7 @@ function Root({
   isCartOpen,
   onCartOpenChange,
   drawerSize = "md",
+  isSimplified,
   ...props
 }) {
   const [selectedMenuItem, setSelectedMenuItem] = React__default.useState(getInitialMenuItem());
@@ -378,8 +420,14 @@ function Root({
             setSelectedMenuItem(v);
           },
           children: [
-            /* @__PURE__ */ jsx(Box, { display: { sm: "none", lg: "block" }, children: /* @__PURE__ */ jsx(Desktop, {}) }),
-            /* @__PURE__ */ jsx(Box, { display: { lg: "none" }, children: /* @__PURE__ */ jsx(Mobile, {}) })
+            /* @__PURE__ */ jsxs(Box, { display: { sm: "none", lg: "block" }, children: [
+              isSimplified && /* @__PURE__ */ jsx(DesktopSimplified, {}),
+              !isSimplified && /* @__PURE__ */ jsx(Desktop, {})
+            ] }),
+            /* @__PURE__ */ jsxs(Box, { display: { lg: "none" }, children: [
+              isSimplified && /* @__PURE__ */ jsx(MobileSimplified, {}),
+              !isSimplified && /* @__PURE__ */ jsx(Mobile, {})
+            ] })
           ]
         }
       ) })
@@ -425,6 +473,8 @@ export {
   SearchField as S,
   Search as a,
   ShoppingCart as b,
-  Root as c,
+  DesktopSimplified as c,
+  MobileSimplified as d,
+  Root as e,
   rootClassName as r
 };

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

@@ -16,6 +16,7 @@ export type RootProps = React.ComponentPropsWithoutRef<'div'> & {
     isCartOpen?: boolean;
     onCartOpenChange?: (open: boolean) => void;
     drawerSize: 'md' | 'lg';
+    isSimplified?: boolean;
 };
 type RootContext = {
     selectedMenuItem: string | undefined;
@@ -26,7 +27,7 @@ type RootContext = {
     setPathname: (v: string) => 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, shoppingCartNumberOfItems, onSearchSubmit, isCartOpen, onCartOpenChange, drawerSize, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+export declare function Root({ className, appKey, loggedInUser, linkComponent, onLogoutClick, shoppingCart, shoppingCartNumberOfItems, onSearchSubmit, isCartOpen, onCartOpenChange, drawerSize, isSimplified, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Root {
     var displayName: string;
 }

package/dist/components/navigation-menu/global-navigation/global-navigation-root.js

@@ -1,12 +1,12 @@
 import "react/jsx-runtime";
 import "react";
 import "clsx";
-import { c, R, r } from "./global-navigation-my-pages.js";
+import { e, R, r } from "./global-navigation-my-pages.js";
 import "./utils.js";
 import "../../box/box.js";
 import "../navigation-menu.js";
 export {
-  c as Root,
+  e as Root,
   R as RootContext,
   r as rootClassName
 };

package/dist/components/notification/notification.d.ts

@@ -45,6 +45,7 @@ declare const Notification: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<
     bordered?: boolean | undefined;
     shadow?: boolean | undefined;
     backgroundImageSrc?: string | undefined;
+    imageGradient?: ("dark" | "light") | undefined;
     layout?: ("navigation-vertical" | "navigation-horizontal-small" | "navigation-horizontal-large" | "rich-card") | undefined;
 } & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
     display?: import('../../utils/generate-styling').DisplayChildren | undefined;
@@ -60,6 +61,7 @@ declare const Notification: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<
     bordered?: boolean | undefined;
     shadow?: boolean | undefined;
     backgroundImageSrc?: string | undefined;
+    imageGradient?: ("dark" | "light") | undefined;
     layout?: ("navigation-vertical" | "navigation-horizontal-small" | "navigation-horizontal-large" | "rich-card") | undefined;
 } & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
     display?: import('../../utils/generate-styling').DisplayChildren | undefined;
@@ -75,6 +77,7 @@ declare const Notification: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<
     bordered?: boolean | undefined;
     shadow?: boolean | undefined;
     backgroundImageSrc?: string | undefined;
+    imageGradient?: ("dark" | "light") | undefined;
     layout?: ("navigation-vertical" | "navigation-horizontal-small" | "navigation-horizontal-large" | "rich-card") | undefined;
 } & React.RefAttributes<HTMLDivElement>, "ref">, "as" | "variant"> & {
     variant?: "error" | "warning" | "success" | "information" | undefined;

package/dist/drawer.module-BNPErv-x.js

@@ -0,0 +1,16 @@
+const styles = {
+  "teddy-drawer__overlay": "_teddy-drawer__overlay_ugum0_26",
+  "teddy-overlay-no-op": "_teddy-overlay-no-op_ugum0_1",
+  "teddy-fade-in": "_teddy-fade-in_ugum0_1",
+  "teddy-fade-out": "_teddy-fade-out_ugum0_1",
+  "teddy-drawer__overlay--container": "_teddy-drawer__overlay--container_ugum0_59",
+  "teddy-drawer__content": "_teddy-drawer__content_ugum0_65",
+  "teddy-drawer__title": "_teddy-drawer__title_ugum0_69",
+  "drawer-content-show": "_drawer-content-show_ugum0_1",
+  "drawer-content-hide": "_drawer-content-hide_ugum0_1",
+  "teddy-drawer__content--lg": "_teddy-drawer__content--lg_ugum0_99",
+  "teddy-drawer__close--floating": "_teddy-drawer__close--floating_ugum0_104"
+};
+export {
+  styles as s
+};

package/dist/drawer.module-CTowTFmf.cjs

@@ -0,0 +1,15 @@
+"use strict";
+const styles = {
+  "teddy-drawer__overlay": "_teddy-drawer__overlay_ugum0_26",
+  "teddy-overlay-no-op": "_teddy-overlay-no-op_ugum0_1",
+  "teddy-fade-in": "_teddy-fade-in_ugum0_1",
+  "teddy-fade-out": "_teddy-fade-out_ugum0_1",
+  "teddy-drawer__overlay--container": "_teddy-drawer__overlay--container_ugum0_59",
+  "teddy-drawer__content": "_teddy-drawer__content_ugum0_65",
+  "teddy-drawer__title": "_teddy-drawer__title_ugum0_69",
+  "drawer-content-show": "_drawer-content-show_ugum0_1",
+  "drawer-content-hide": "_drawer-content-hide_ugum0_1",
+  "teddy-drawer__content--lg": "_teddy-drawer__content--lg_ugum0_99",
+  "teddy-drawer__close--floating": "_teddy-drawer__close--floating_ugum0_104"
+};
+exports.styles = styles;

package/dist/style.css

@@ -30,12 +30,13 @@
   ._teddy-ribbon--iconPlacement-center_14u2k_22 svg {
     align-self: center;
   }
-}._teddy-expandable-card_12yyw_1 {
+}._teddy-expandable-card_15whs_1 {
   display: flex;
   flex-direction: column;
   gap: var(--teddy-spacing-400);
+  position: relative;
 }
-._teddy-expandable-card__item_12yyw_6 {
+._teddy-expandable-card__item_15whs_7 {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -43,7 +44,7 @@
   border: var(--teddy-border-width-xs) solid var(--teddy-color-border-weak);
   box-shadow: var(--teddy-shadow-sm);
 }
-._teddy-expandable-card__trigger_12yyw_14 {
+._teddy-expandable-card__trigger_15whs_15 {
   border: unset;
   display: flex;
   flex-direction: column;
@@ -59,15 +60,15 @@
   transition-property: background-color, color;
   text-align: start;
 }
-._teddy-expandable-card__trigger_12yyw_14:hover {
+._teddy-expandable-card__trigger_15whs_15:hover {
   background-color: var(--teddy-color-background-interactive-transparent-hover);
 }
 @media (prefers-reduced-motion: no-preference) {
-  ._teddy-expandable-card__trigger_12yyw_14:active {
+  ._teddy-expandable-card__trigger_15whs_15:active {
     background-color: var(--teddy-color-background-interactive-transparent-active);
   }
 }
-._teddy-expandable-card__trigger_12yyw_14 ._teddy-expandable-card__indicator_12yyw_38 {
+._teddy-expandable-card__trigger_15whs_15 ._teddy-expandable-card__indicator_15whs_39 {
   flex-shrink: 0;
   transform: rotate(0);
   margin-left: var(--teddy-spacing-100);
@@ -75,76 +76,79 @@
   min-height: var(--teddy-spacing-300);
 }
 @media (prefers-reduced-motion: no-preference) {
-  ._teddy-expandable-card__trigger_12yyw_14 ._teddy-expandable-card__indicator_12yyw_38 {
+  ._teddy-expandable-card__trigger_15whs_15 ._teddy-expandable-card__indicator_15whs_39 {
     transition: transform var(--teddy-motion-duration-300) var(--teddy-motion-easing-ease-in-out);
   }
 }
-._teddy-expandable-card__trigger_12yyw_14 ._teddy-expandable-card__hidden_12yyw_50 {
+._teddy-expandable-card__trigger_15whs_15 ._teddy-expandable-card__hidden_15whs_51 {
   width: 100%;
 }
-._teddy-expandable-card__trigger_12yyw_14[data-state=open] {
+._teddy-expandable-card__trigger_15whs_15[data-state=open] {
   padding-bottom: var(--teddy-spacing-0);
 }
-._teddy-expandable-card__trigger_12yyw_14[data-state=open] ._teddy-expandable-card__line_12yyw_56 {
+._teddy-expandable-card__trigger_15whs_15[data-state=open] ._teddy-expandable-card__line_15whs_57 {
   margin-bottom: var(--teddy-spacing-0);
 }
-._teddy-expandable-card__trigger_12yyw_14[data-state=open] ._teddy-expandable-card__content_12yyw_59 {
+._teddy-expandable-card__trigger_15whs_15[data-state=open] ._teddy-expandable-card__content_15whs_60 {
   padding-top: var(--teddy-spacing-200);
 }
-._teddy-expandable-card__trigger_12yyw_14[data-state=open] ._teddy-expandable-card__indicator_12yyw_38 {
+._teddy-expandable-card__trigger_15whs_15[data-state=open] ._teddy-expandable-card__indicator_15whs_39 {
   transform: rotate(180deg);
 }
-._teddy-expandable-card__trigger_12yyw_14[data-state=open] ._teddy-expandable-card__hidden_12yyw_50 {
+._teddy-expandable-card__trigger_15whs_15[data-state=open] ._teddy-expandable-card__hidden_15whs_51 {
   display: none;
 }
-._teddy-expandable-card__description_12yyw_68 {
+._teddy-expandable-card__description_15whs_69 {
   display: flex;
   justify-content: space-between;
   flex-grow: 1;
   flex-direction: column;
 }
 @media (min-width: 600px) {
-  ._teddy-expandable-card__description_12yyw_68 {
+  ._teddy-expandable-card__description_15whs_69 {
     flex-direction: row;
   }
 }
-._teddy-expandable-card__price_12yyw_79 {
+._teddy-expandable-card__price_15whs_80 {
   display: flex;
   align-items: center;
 }
-._teddy-expandable-card__header_12yyw_83 {
+._teddy-expandable-card__header_15whs_84 {
   display: flex;
   width: 100%;
 }
-._teddy-expandable-card__line_12yyw_56 {
+._teddy-expandable-card__line_15whs_57 {
   border: 0;
   border-top: var(--teddy-border-width-xs) solid var(--teddy-color-border-weak);
 }
-._teddy-expandable-card__slot_12yyw_91 {
+._teddy-expandable-card__slot_15whs_92 {
   display: flex;
   gap: var(--teddy-spacing-150);
-  transform: translateY(0%);
+  transform: translateY(-50%);
+}
+._teddy-expandable-card__slot--bottom_15whs_97 {
+  transform: translateY(50%);
 }
-._teddy-expandable-card__slot--center_12yyw_96 {
-  transform: translate(-50%, -10%);
+._teddy-expandable-card__slot--center_15whs_100 {
+  transform: translate(-50%, -50%);
 }
-._teddy-expandable-card__slot--bottom_12yyw_99._teddy-expandable-card__slot--center_12yyw_96 {
-  transform: translate(-50%, 10%);
+._teddy-expandable-card__slot--bottom_15whs_97._teddy-expandable-card__slot--center_15whs_100 {
+  transform: translate(-50%, 50%);
 }
-._teddy-expandable-card__content_12yyw_59 {
+._teddy-expandable-card__content_15whs_60 {
   overflow: hidden;
   padding: var(--teddy-spacing-300);
 }
-._teddy-expandable-card__content_12yyw_59[data-state=open] {
+._teddy-expandable-card__content_15whs_60[data-state=open] {
   padding-top: var(--teddy-spacing-200);
 }
-._teddy-expandable-card__content_12yyw_59 > *:not(:first-child) {
+._teddy-expandable-card__content_15whs_60 > *:not(:first-child) {
   margin-top: var(--teddy-spacing-200);
 }
-._teddy-expandable-card__button--right_12yyw_112 {
+._teddy-expandable-card__button--right_15whs_116 {
   float: right;
 }
-._teddy-expandable-card__button--left_12yyw_115 {
+._teddy-expandable-card__button--left_15whs_119 {
   float: left;
 }._teddy-spinner--xxs_ywden_1 {
   height: var(--teddy-spacing-250);
@@ -1015,8 +1019,8 @@
     right: 100%;
     transform: rotate(180deg);
   }
-}@layer reset, flex, button, link, drawer;
-@keyframes _teddy-fade-in_xphhg_1 {
+}@layer reset, flex, button, link, heading, drawer;
+@keyframes _teddy-fade-in_ugum0_1 {
   from {
     opacity: 0;
   }
@@ -1024,7 +1028,7 @@
     opacity: 1;
   }
 }
-@keyframes _teddy-fade-out_xphhg_1 {
+@keyframes _teddy-fade-out_ugum0_1 {
   from {
     opacity: 1;
   }
@@ -1032,7 +1036,7 @@
     opacity: 0;
   }
 }
-@keyframes _teddy-overlay-no-op_xphhg_1 {
+@keyframes _teddy-overlay-no-op_ugum0_1 {
   from {
     opacity: 1;
   }
@@ -1040,53 +1044,64 @@
     opacity: 1;
   }
 }
-._teddy-drawer__overlay_xphhg_26 {
+._teddy-drawer__overlay_ugum0_26 {
   box-sizing: border-box;
 }
 @layer drawer {
-  ._teddy-drawer__overlay_xphhg_26 {
+  ._teddy-drawer__overlay_ugum0_26 {
     box-sizing: border-box;
     position: fixed;
     inset: 0;
+    display: grid;
+    justify-items: end;
     z-index: 40;
   }
   @media (prefers-reduced-motion: no-preference) {
-    ._teddy-drawer__overlay_xphhg_26 {
+    ._teddy-drawer__overlay_ugum0_26 {
       /* Keep the overlay mounted until the children have animated */
     }
-    ._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_ugum0_26:where([data-state=closed]) {
+      animation: _teddy-overlay-no-op_ugum0_1 400ms 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_ugum0_26:where([data-state=open])::before {
+      animation: _teddy-fade-in_ugum0_1 500ms 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_ugum0_26:where([data-state=closed])::before {
+      animation: _teddy-fade-out_ugum0_1 400ms cubic-bezier(0.16, 1, 0.3, 1);
     }
   }
-  ._teddy-drawer__overlay_xphhg_26::before {
+  ._teddy-drawer__overlay_ugum0_26::before {
     position: fixed;
     content: "";
     inset: 0;
     background-color: var(--teddy-color-overlay-default);
   }
-  ._teddy-drawer__overlay--container_xphhg_57 {
+  ._teddy-drawer__overlay--container_ugum0_59 {
     position: absolute;
   }
-  ._teddy-drawer__overlay--container_xphhg_57::before {
+  ._teddy-drawer__overlay--container_ugum0_59::before {
     position: absolute;
   }
-  ._teddy-drawer__overlay--container_xphhg_57 ._teddy-drawer__content_xphhg_63 {
+  ._teddy-drawer__overlay--container_ugum0_59 ._teddy-drawer__content_ugum0_65 {
     position: absolute;
+    inset: 0;
+  }
+  ._teddy-drawer__title_ugum0_69 {
+    position: sticky;
+    padding-top: var(--teddy-spacing-300);
+    background-color: var(--teddy-color-background-primary);
+    top: -1.5rem;
+    margin-top: -1.5rem;
   }
-  ._teddy-drawer__content_xphhg_63 {
+  ._teddy-drawer__content_ugum0_65 {
     background-color: var(--teddy-color-background-primary);
     box-shadow: var(--teddy-shadow-lg);
-    position: fixed;
-    overflow: hidden;
-    inset: 0 0 0 auto;
+    z-index: 40;
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-left: auto;
     box-sizing: border-box;
-    padding: var(--teddy-spacing-300);
+    padding: var(--teddy-spacing-300) var(--teddy-spacing-300);
     display: flex;
     flex-direction: column;
     gap: var(--teddy-spacing-200);
@@ -1094,26 +1109,26 @@
     min-width: min(100%, 400px);
   }
   @media (prefers-reduced-motion: no-preference) {
-    ._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_ugum0_65:where([data-state=open]) {
+      animation: _drawer-content-show_ugum0_1 450ms 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__content_ugum0_65:where([data-state=closed]) {
+      animation: _drawer-content-hide_ugum0_1 350ms cubic-bezier(0.16, 1, 0.3, 1);
     }
   }
-  ._teddy-drawer__content--lg_xphhg_88 {
+  ._teddy-drawer__content--lg_ugum0_99 {
     min-width: min(100%, 30rem);
     width: 30vw;
     max-width: initial;
   }
-  ._teddy-drawer__close--floating_xphhg_93 {
-    position: absolute;
+  ._teddy-drawer__close--floating_ugum0_104 {
+    position: fixed;
     z-index: 2;
     top: var(--teddy-spacing-200);
     right: var(--teddy-spacing-200);
   }
 }
-@keyframes _drawer-content-show_xphhg_1 {
+@keyframes _drawer-content-show_ugum0_1 {
   from {
     transform: translateX(100%);
   }
@@ -1121,7 +1136,7 @@
     transform: translateX(0px);
   }
 }
-@keyframes _drawer-content-hide_xphhg_1 {
+@keyframes _drawer-content-hide_ugum0_1 {
   from {
     transform: translateX(0px);
   }
@@ -2578,7 +2593,7 @@
 ._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 {
+}._teddy-badge_wlyo5_1 {
   font-family: var(--teddy-typography-family-default);
   font-weight: var(--teddy-typography-weight-medium);
   font-size: var(--teddy-typography-scale-75);
@@ -2590,13 +2605,17 @@
   align-items: center;
   gap: var(--teddy-spacing-50);
 }
-._teddy-badge--counter-badge_1fsdh_13 {
+._teddy-badge--counter-badge_wlyo5_13 {
   padding: var(--teddy-spacing-10) var(--teddy-spacing-50);
+  box-sizing: border-box;
   border-radius: var(--teddy-spacing-100);
   font-size: var(--teddy-typography-scale-50);
   line-height: var(--teddy-typography-line-height-tight);
+  min-width: var(--teddy-spacing-200);
+  justify-content: center;
+  text-align: center;
 }
-._teddy-badge--alert-badge_1fsdh_19 {
+._teddy-badge--alert-badge_wlyo5_23 {
   display: block;
   padding: 0;
   min-height: initial;
@@ -2606,54 +2625,54 @@
   height: var(--teddy-spacing-100);
   border: var(--teddy-border-width-sm) solid;
 }
-._teddy-badge--attention_1fsdh_29 {
+._teddy-badge--attention_wlyo5_33 {
   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 {
+._teddy-badge--attention_wlyo5_33._teddy-badge--alert-badge_wlyo5_23 {
   border-color: var(--teddy-color-background-status-special);
 }
-._teddy-badge--special_1fsdh_36 {
+._teddy-badge--special_wlyo5_40 {
   background-color: var(--teddy-color-background-status-special);
   color: var(--teddy-color-text-status-special);
 }
-._teddy-badge--neutral_1fsdh_40 {
+._teddy-badge--neutral_wlyo5_44 {
   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 {
+._teddy-badge--neutral_wlyo5_44._teddy-badge--alert-badge_wlyo5_23 {
   background-color: var(--teddy-color-text-status-neutral);
   border-color: var(--teddy-color-background-status-neutral);
 }
-._teddy-badge--information_1fsdh_48 {
+._teddy-badge--information_wlyo5_52 {
   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 {
+._teddy-badge--information_wlyo5_52._teddy-badge--alert-badge_wlyo5_23 {
   background-color: var(--teddy-color-text-status-info-strong);
   border-color: var(--teddy-color-background-status-info-strong);
 }
-._teddy-badge--success_1fsdh_56 {
+._teddy-badge--success_wlyo5_60 {
   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 {
+._teddy-badge--success_wlyo5_60._teddy-badge--alert-badge_wlyo5_23 {
   background-color: var(--teddy-color-text-status-success-strong);
   border-color: var(--teddy-color-background-status-success-strong);
 }
-._teddy-badge--warning_1fsdh_64 {
+._teddy-badge--warning_wlyo5_68 {
   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 {
+._teddy-badge--warning_wlyo5_68._teddy-badge--alert-badge_wlyo5_23 {
   background-color: var(--teddy-color-text-status-warning-strong);
   border-color: var(--teddy-color-background-status-warning-strong);
 }
-._teddy-badge--error_1fsdh_72 {
+._teddy-badge--error_wlyo5_76 {
   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 {
+._teddy-badge--error_wlyo5_76._teddy-badge--alert-badge_wlyo5_23 {
   background-color: var(--teddy-color-text-status-error-strong);
   border-color: var(--teddy-color-background-status-error-strong);
 }@layer heading, link, accordion;

package/package.json

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

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

@@ -1,15 +0,0 @@
-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

@@ -1,14 +0,0 @@
-"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;