@telia/teddy 0.0.27 → 0.0.29

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

@@ -0,0 +1,318 @@
+const APP_KEYS = {
+  "open-pages": "open-pages",
+  "web-shop": "web-shop",
+  storybook: "storybook",
+  "my-pages": "my-pages",
+  "my-business": "my-business",
+  "my-portal": "my-portal",
+  "business-net": "business-net"
+};
+const MY_PAGE_LINKS = {
+  name: "Min Side",
+  link: "/minside",
+  appKey: APP_KEYS["my-pages"],
+  links: [
+    {
+      name: "Hjem",
+      link: "/minside",
+      appKey: APP_KEYS["my-pages"],
+      icon: "home"
+    },
+    {
+      name: "Profil",
+      link: "/minside/profil",
+      appKey: APP_KEYS["my-pages"],
+      icon: "end-user"
+    },
+    {
+      name: "Faktura",
+      link: "/minside/faktura",
+      appKey: APP_KEYS["my-pages"],
+      icon: "doc"
+    },
+    {
+      name: "Personvern",
+      link: "/minside/innstillinger",
+      appKey: APP_KEYS["my-pages"],
+      icon: "secured-1"
+    }
+  ]
+};
+const MY_BUSINESS_LINKS = {
+  name: "Min bedrift",
+  link: "https://beta.minbedrift.telia.no/",
+  appKey: APP_KEYS["my-business"],
+  links: [],
+  icon: "home"
+};
+const MY_PORTAL_LINKS = {
+  name: "Min portal",
+  link: "https://minportal.telia.no/",
+  appKey: APP_KEYS["my-portal"],
+  links: [],
+  icon: "end-user"
+};
+const BUSINESS_NET_LINKS = {
+  name: "Bedriftsnett",
+  link: "https://sb.telia.no/",
+  appKey: APP_KEYS["business-net"],
+  links: [],
+  icon: "doc"
+};
+const LOGGED_IN_LINKS_BUSINESS = [MY_BUSINESS_LINKS, MY_PORTAL_LINKS, BUSINESS_NET_LINKS];
+const LOGGED_IN_LINKS = [MY_PAGE_LINKS, ...LOGGED_IN_LINKS_BUSINESS];
+const PRIVATE_LINKS = {
+  name: "Private",
+  link: "/",
+  links: [
+    {
+      name: "Logo",
+      link: "/",
+      appKey: APP_KEYS["open-pages"],
+      links: []
+    },
+    {
+      name: "Mobil",
+      link: "/mobil",
+      appKey: APP_KEYS["open-pages"],
+      links: [
+        {
+          name: "Abonnement",
+          link: "/mobil/abonnement",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Kontantkort",
+          link: "/mobil/kontantkort",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Mobiletelefoner",
+          link: "/mobil/mobiletelefoner",
+          appKey: APP_KEYS["web-shop"]
+        },
+        {
+          name: "Tjener",
+          link: "/mobil/tjener",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Tilbehør",
+          link: "/mobil/tilbehor",
+          appKey: APP_KEYS["web-shop"]
+        }
+      ]
+    },
+    {
+      name: "TV",
+      link: "/tv",
+      appKey: APP_KEYS["open-pages"],
+      links: [
+        {
+          name: "Strømming",
+          link: "/tv/stromming",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Digital TV",
+          link: "/tv/digital-tv",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Tjener",
+          link: "/tv/tjener",
+          appKey: APP_KEYS["open-pages"]
+        }
+      ]
+    },
+    {
+      name: "Internett",
+      link: "/internett",
+      appKey: APP_KEYS["open-pages"],
+      links: [
+        {
+          name: "Fiber",
+          link: "/internett/fiber",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Mobilbredbånd",
+          link: "/internett/mobilbredband",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Tjener",
+          link: "/internett/tjener",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Tilbehør",
+          link: "/internett/tilbehor",
+          appKey: APP_KEYS["web-shop"]
+        }
+      ]
+    },
+    {
+      name: "Hjelp",
+      link: "/hjelp",
+      appKey: APP_KEYS["open-pages"],
+      links: [
+        {
+          name: "FAQ",
+          link: "/hjelp/faq",
+          appKey: APP_KEYS["open-pages"],
+          links: []
+        },
+        {
+          name: "Kontakt oss",
+          link: "/hjelp/kontakt-oss",
+          appKey: APP_KEYS["open-pages"],
+          links: []
+        }
+      ]
+    }
+  ]
+};
+const BUSINESS_LINKS = {
+  name: "Bedrift",
+  link: "/bedrift",
+  links: [
+    {
+      name: "Logo",
+      link: "/bedrift",
+      appKey: APP_KEYS["open-pages"],
+      links: []
+    },
+    {
+      name: "Produkter og tjenester",
+      link: "/bedrift/produkt-og-tjenester",
+      appKey: APP_KEYS["open-pages"],
+      links: [
+        {
+          name: "Tjenester",
+          link: "/bedrift/tjenester",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Mobil",
+          link: "/bedrift/mobil",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Internett",
+          link: "/bedrift/internett",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Tilbehør",
+          link: "/bedrift/tilbehor",
+          appKey: APP_KEYS["web-shop"]
+        }
+      ]
+    },
+    {
+      name: "Innovasjon og startup",
+      link: "/bedrift/innovasjon-og-startup",
+      appKey: APP_KEYS["open-pages"],
+      links: [
+        {
+          name: "Innovasjon",
+          link: "/bedrift/innovasjon",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Startup",
+          link: "/bedrift/startup",
+          appKey: APP_KEYS["open-pages"]
+        }
+      ]
+    },
+    {
+      name: "Hjelp",
+      link: "/bedrift/hjelp",
+      appKey: APP_KEYS["open-pages"],
+      links: [
+        {
+          name: "FAQ",
+          link: "/bedrift/hjelp/faq",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Kontakt oss",
+          link: "/bedrift/hjelp/kontakt-oss",
+          appKey: APP_KEYS["open-pages"]
+        }
+      ]
+    }
+  ]
+};
+const MDU_LINKS = {
+  name: "Borettslag",
+  link: "/borettslag",
+  links: [
+    {
+      name: "Logo",
+      link: "/borettslag",
+      appKey: APP_KEYS["open-pages"],
+      links: []
+    },
+    {
+      name: "Produkter og tjenester",
+      link: "/borettslag/produkt-og-tjenester",
+      appKey: APP_KEYS["open-pages"],
+      links: [
+        {
+          name: "Tjenester",
+          link: "/borettslag/tjenester",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Mobil",
+          link: "/borettslag/mobil",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Internett",
+          link: "/borettslag/internett",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Tilbehør",
+          link: "/borettslag/tilbehor",
+          appKey: APP_KEYS["web-shop"]
+        }
+      ]
+    },
+    {
+      name: "Hjelp",
+      link: "/borettslag/hjelp",
+      appKey: APP_KEYS["open-pages"],
+      links: [
+        {
+          name: "FAQ",
+          link: "/borettslag/hjelp/faq",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Kontakt oss",
+          link: "/borettslag/hjelp/kontakt-oss",
+          appKey: APP_KEYS["open-pages"]
+        }
+      ]
+    }
+  ]
+};
+const LINKS = [PRIVATE_LINKS, BUSINESS_LINKS, MDU_LINKS];
+export {
+  APP_KEYS,
+  BUSINESS_LINKS,
+  BUSINESS_NET_LINKS,
+  LINKS,
+  LOGGED_IN_LINKS,
+  LOGGED_IN_LINKS_BUSINESS,
+  MDU_LINKS,
+  MY_BUSINESS_LINKS,
+  MY_PAGE_LINKS,
+  MY_PORTAL_LINKS,
+  PRIVATE_LINKS
+};

package/dist/components/navigation-menu/index.cjs

@@ -1,4 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const components_navigationMenu_navigationMenu = require("./navigation-menu.cjs");
+const components_navigationMenu_globalNavigation_globalNavigationMyPages = require("./global-navigation/global-navigation-my-pages.cjs");
 exports.NavigationMenu = components_navigationMenu_navigationMenu.NavigationMenu;
+exports.GlobalNavigation = components_navigationMenu_globalNavigation_globalNavigationMyPages.GlobalNavigation;

package/dist/components/navigation-menu/index.d.ts

@@ -1,2 +1,3 @@
 export { NavigationMenu } from './navigation-menu';
 export type { NavigationMenuProps } from './navigation-menu';
+export { GlobalNavigation } from './global-navigation';

package/dist/components/navigation-menu/index.js

@@ -1,4 +1,6 @@
 import { NavigationMenu } from "./navigation-menu.js";
+import { G } from "./global-navigation/global-navigation-my-pages.js";
 export {
+  G as GlobalNavigation,
   NavigationMenu
 };

package/dist/components/navigation-menu/navigation-menu.cjs

@@ -8,6 +8,9 @@ const utils_composeRefs = require("../../utils/composeRefs.cjs");
 const components_visuallyHidden_visuallyHidden = require("../visually-hidden/visually-hidden.cjs");
 const utils_composeEventHandlers = require("../../utils/composeEventHandlers.cjs");
 const reactSlot = require("@radix-ui/react-slot");
+const reactUseControllableState = require("@radix-ui/react-use-controllable-state");
+const utils_generateStyling_index = require("../../utils/generate-styling/index.cjs");
+const tokens_motion_variables = require("../../tokens/motion/variables.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -25,31 +28,31 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const NavigationMenuPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(NavigationMenuPrimitive);
-const enterFromLeft = "_enterFromLeft_959s3_1";
-const enterFromRight = "_enterFromRight_959s3_1";
-const exitToLeft = "_exitToLeft_959s3_1";
-const exitToRight = "_exitToRight_959s3_1";
-const scaleIn = "_scaleIn_959s3_1";
-const scaleOut = "_scaleOut_959s3_1";
+const enterFromLeft = "_enterFromLeft_h8tnl_1";
+const enterFromRight = "_enterFromRight_h8tnl_1";
+const exitToLeft = "_exitToLeft_h8tnl_1";
+const exitToRight = "_exitToRight_h8tnl_1";
+const scaleIn = "_scaleIn_h8tnl_1";
+const scaleOut = "_scaleOut_h8tnl_1";
 const styles = {
-  "teddy-navigation-menu": "_teddy-navigation-menu_959s3_1",
-  "teddy-navigation-menu__viewport": "_teddy-navigation-menu__viewport_959s3_33",
-  "teddy-navigation-menu__list": "_teddy-navigation-menu__list_959s3_36",
-  "teddy-navigation-menu__top-menu-list": "_teddy-navigation-menu__top-menu-list_959s3_55",
-  "teddy-navigation-menu__top-menu-trigger": "_teddy-navigation-menu__top-menu-trigger_959s3_75",
-  "teddy-navigation-menu__top-menu-trigger--small": "_teddy-navigation-menu__top-menu-trigger--small_959s3_92",
-  "teddy-navigation-menu__top-menu-trigger--button": "_teddy-navigation-menu__top-menu-trigger--button_959s3_97",
-  "teddy-navigation-menu__content": "_teddy-navigation-menu__content_959s3_169",
+  "teddy-navigation-menu": "_teddy-navigation-menu_h8tnl_1",
+  "teddy-navigation-menu__viewport": "_teddy-navigation-menu__viewport_h8tnl_34",
+  "teddy-navigation-menu__list": "_teddy-navigation-menu__list_h8tnl_37",
+  "teddy-navigation-menu__top-menu-list": "_teddy-navigation-menu__top-menu-list_h8tnl_56",
+  "teddy-navigation-menu__top-menu-trigger": "_teddy-navigation-menu__top-menu-trigger_h8tnl_76",
+  "teddy-navigation-menu__top-menu-trigger--small": "_teddy-navigation-menu__top-menu-trigger--small_h8tnl_95",
+  "teddy-navigation-menu__top-menu-trigger--button": "_teddy-navigation-menu__top-menu-trigger--button_h8tnl_101",
+  "teddy-navigation-menu__content": "_teddy-navigation-menu__content_h8tnl_178",
   enterFromLeft,
   enterFromRight,
   exitToLeft,
   exitToRight,
-  "teddy-navigation-menu__trigger": "_teddy-navigation-menu__trigger_959s3_213",
-  "teddy-navigation-menu__trigger--small": "_teddy-navigation-menu__trigger--small_959s3_231",
-  "teddy-navigation-menu__trigger--button": "_teddy-navigation-menu__trigger--button_959s3_236",
-  "teddy-navigation-menu__link": "_teddy-navigation-menu__link_959s3_301",
-  "teddy-navigation-menu__link--small": "_teddy-navigation-menu__link--small_959s3_319",
-  "teddy-navigation-menu__link--button": "_teddy-navigation-menu__link--button_959s3_324",
+  "teddy-navigation-menu__trigger": "_teddy-navigation-menu__trigger_h8tnl_222",
+  "teddy-navigation-menu__trigger--small": "_teddy-navigation-menu__trigger--small_h8tnl_242",
+  "teddy-navigation-menu__trigger--button": "_teddy-navigation-menu__trigger--button_h8tnl_248",
+  "teddy-navigation-menu__link": "_teddy-navigation-menu__link_h8tnl_318",
+  "teddy-navigation-menu__link--small": "_teddy-navigation-menu__link--small_h8tnl_338",
+  "teddy-navigation-menu__link--button": "_teddy-navigation-menu__link--button_h8tnl_344",
   scaleIn,
   scaleOut
 };
@@ -72,9 +75,15 @@ const NavigationMenuContext = React.createContext({
   }
 });
 const Root = React.forwardRef(
-  ({ className, defaultTopMenuValue, ...props }, forwardRef) => {
-    const [selectedTopMenu, setSelectedTopMenu] = React.useState(defaultTopMenuValue);
+  ({ className, defaultTopMenuValue, topMenuValue, onTopMenuValueChange, ...props }, forwardRef) => {
+    const [selectedTopMenu, setSelectedTopMenu] = reactUseControllableState.useControllableState({
+      defaultProp: defaultTopMenuValue,
+      prop: topMenuValue,
+      onChange: onTopMenuValueChange
+    });
     const contentRef = React.useRef(null);
+    const [allowAnimationOfHeight, setAllowAnimationOfHeight] = React.useState(false);
+    const timerRef = React.useRef(void 0);
     const restoreContentTabOrderRef = React.useRef(() => {
     });
     const focusProxyRef = React.useRef(null);
@@ -95,6 +104,14 @@ const Root = React.forwardRef(
           restoreContentTabOrderRef.current = removeFromTabOrder(candidates);
       }
     }, []);
+    React.useEffect(() => {
+      timerRef.current = setTimeout(() => {
+        setAllowAnimationOfHeight(true);
+      }, 500);
+      return () => {
+        timerRef.current && clearTimeout(timerRef.current);
+      };
+    }, []);
     const classes = clsx([styles[`${rootClassName}`]], className);
     return /* @__PURE__ */ jsxRuntime.jsx(
       NavigationMenuContext.Provider,
@@ -112,7 +129,15 @@ const Root = React.forwardRef(
           selectedTopMenu,
           setSelectedTopMenu
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuPrimitive__namespace.Root, { ...props, ref: forwardRef, className: classes })
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          NavigationMenuPrimitive__namespace.Root,
+          {
+            ...props,
+            style: allowAnimationOfHeight ? utils_generateStyling_index.mergeStyles(props.style, { ["--teddy-motion-duration-controlled"]: tokens_motion_variables.teddyMotionDuration300 }) : props.style,
+            ref: forwardRef,
+            className: classes
+          }
+        )
       }
     );
   }
@@ -410,3 +435,4 @@ const NavigationMenu = Object.assign(Root, {
   TopMenuTrigger
 });
 exports.NavigationMenu = NavigationMenu;
+exports.rootClassName = rootClassName;

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

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+export declare const rootClassName = "teddy-navigation-menu";
 /** -------------------------------------------------------------------------------------------------
  * NavigationMenuRoot
  * -----------------------------------------------------------------------------------------------*/
@@ -9,6 +10,8 @@ type RootProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.R
      * @example "private" | "business"
      */
     defaultTopMenuValue?: string;
+    topMenuValue?: string | undefined;
+    onTopMenuValueChange?: (value: string) => void;
 };
 /** -------------------------------------------------------------------------------------------------
  *  NavigationMenu.TopMenuList
@@ -80,6 +83,8 @@ declare const NavigationMenu: React.ForwardRefExoticComponent<Omit<NavigationMen
      * @example "private" | "business"
      */
     defaultTopMenuValue?: string | undefined;
+    topMenuValue?: string | undefined;
+    onTopMenuValueChange?: ((value: string) => void) | undefined;
 } & React.RefAttributes<HTMLElement>> & {
     List: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, "ref"> & {
         variant?: "gray" | undefined;

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

@@ -6,31 +6,34 @@ import { useComposedRefs } from "../../utils/composeRefs.js";
 import { VisuallyHidden } from "../visually-hidden/visually-hidden.js";
 import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
 import { Slot } from "@radix-ui/react-slot";
-const enterFromLeft = "_enterFromLeft_959s3_1";
-const enterFromRight = "_enterFromRight_959s3_1";
-const exitToLeft = "_exitToLeft_959s3_1";
-const exitToRight = "_exitToRight_959s3_1";
-const scaleIn = "_scaleIn_959s3_1";
-const scaleOut = "_scaleOut_959s3_1";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { mergeStyles } from "../../utils/generate-styling/index.js";
+import { teddyMotionDuration300 } from "../../tokens/motion/variables.js";
+const enterFromLeft = "_enterFromLeft_h8tnl_1";
+const enterFromRight = "_enterFromRight_h8tnl_1";
+const exitToLeft = "_exitToLeft_h8tnl_1";
+const exitToRight = "_exitToRight_h8tnl_1";
+const scaleIn = "_scaleIn_h8tnl_1";
+const scaleOut = "_scaleOut_h8tnl_1";
 const styles = {
-  "teddy-navigation-menu": "_teddy-navigation-menu_959s3_1",
-  "teddy-navigation-menu__viewport": "_teddy-navigation-menu__viewport_959s3_33",
-  "teddy-navigation-menu__list": "_teddy-navigation-menu__list_959s3_36",
-  "teddy-navigation-menu__top-menu-list": "_teddy-navigation-menu__top-menu-list_959s3_55",
-  "teddy-navigation-menu__top-menu-trigger": "_teddy-navigation-menu__top-menu-trigger_959s3_75",
-  "teddy-navigation-menu__top-menu-trigger--small": "_teddy-navigation-menu__top-menu-trigger--small_959s3_92",
-  "teddy-navigation-menu__top-menu-trigger--button": "_teddy-navigation-menu__top-menu-trigger--button_959s3_97",
-  "teddy-navigation-menu__content": "_teddy-navigation-menu__content_959s3_169",
+  "teddy-navigation-menu": "_teddy-navigation-menu_h8tnl_1",
+  "teddy-navigation-menu__viewport": "_teddy-navigation-menu__viewport_h8tnl_34",
+  "teddy-navigation-menu__list": "_teddy-navigation-menu__list_h8tnl_37",
+  "teddy-navigation-menu__top-menu-list": "_teddy-navigation-menu__top-menu-list_h8tnl_56",
+  "teddy-navigation-menu__top-menu-trigger": "_teddy-navigation-menu__top-menu-trigger_h8tnl_76",
+  "teddy-navigation-menu__top-menu-trigger--small": "_teddy-navigation-menu__top-menu-trigger--small_h8tnl_95",
+  "teddy-navigation-menu__top-menu-trigger--button": "_teddy-navigation-menu__top-menu-trigger--button_h8tnl_101",
+  "teddy-navigation-menu__content": "_teddy-navigation-menu__content_h8tnl_178",
   enterFromLeft,
   enterFromRight,
   exitToLeft,
   exitToRight,
-  "teddy-navigation-menu__trigger": "_teddy-navigation-menu__trigger_959s3_213",
-  "teddy-navigation-menu__trigger--small": "_teddy-navigation-menu__trigger--small_959s3_231",
-  "teddy-navigation-menu__trigger--button": "_teddy-navigation-menu__trigger--button_959s3_236",
-  "teddy-navigation-menu__link": "_teddy-navigation-menu__link_959s3_301",
-  "teddy-navigation-menu__link--small": "_teddy-navigation-menu__link--small_959s3_319",
-  "teddy-navigation-menu__link--button": "_teddy-navigation-menu__link--button_959s3_324",
+  "teddy-navigation-menu__trigger": "_teddy-navigation-menu__trigger_h8tnl_222",
+  "teddy-navigation-menu__trigger--small": "_teddy-navigation-menu__trigger--small_h8tnl_242",
+  "teddy-navigation-menu__trigger--button": "_teddy-navigation-menu__trigger--button_h8tnl_248",
+  "teddy-navigation-menu__link": "_teddy-navigation-menu__link_h8tnl_318",
+  "teddy-navigation-menu__link--small": "_teddy-navigation-menu__link--small_h8tnl_338",
+  "teddy-navigation-menu__link--button": "_teddy-navigation-menu__link--button_h8tnl_344",
   scaleIn,
   scaleOut
 };
@@ -53,9 +56,15 @@ const NavigationMenuContext = React__default.createContext({
   }
 });
 const Root = React__default.forwardRef(
-  ({ className, defaultTopMenuValue, ...props }, forwardRef) => {
-    const [selectedTopMenu, setSelectedTopMenu] = React__default.useState(defaultTopMenuValue);
+  ({ className, defaultTopMenuValue, topMenuValue, onTopMenuValueChange, ...props }, forwardRef) => {
+    const [selectedTopMenu, setSelectedTopMenu] = useControllableState({
+      defaultProp: defaultTopMenuValue,
+      prop: topMenuValue,
+      onChange: onTopMenuValueChange
+    });
     const contentRef = React__default.useRef(null);
+    const [allowAnimationOfHeight, setAllowAnimationOfHeight] = React__default.useState(false);
+    const timerRef = React__default.useRef(void 0);
     const restoreContentTabOrderRef = React__default.useRef(() => {
     });
     const focusProxyRef = React__default.useRef(null);
@@ -76,6 +85,14 @@ const Root = React__default.forwardRef(
           restoreContentTabOrderRef.current = removeFromTabOrder(candidates);
       }
     }, []);
+    React__default.useEffect(() => {
+      timerRef.current = setTimeout(() => {
+        setAllowAnimationOfHeight(true);
+      }, 500);
+      return () => {
+        timerRef.current && clearTimeout(timerRef.current);
+      };
+    }, []);
     const classes = clsx([styles[`${rootClassName}`]], className);
     return /* @__PURE__ */ jsx(
       NavigationMenuContext.Provider,
@@ -93,7 +110,15 @@ const Root = React__default.forwardRef(
           selectedTopMenu,
           setSelectedTopMenu
         },
-        children: /* @__PURE__ */ jsx(NavigationMenuPrimitive.Root, { ...props, ref: forwardRef, className: classes })
+        children: /* @__PURE__ */ jsx(
+          NavigationMenuPrimitive.Root,
+          {
+            ...props,
+            style: allowAnimationOfHeight ? mergeStyles(props.style, { ["--teddy-motion-duration-controlled"]: teddyMotionDuration300 }) : props.style,
+            ref: forwardRef,
+            className: classes
+          }
+        )
       }
     );
   }
@@ -391,5 +416,6 @@ const NavigationMenu = Object.assign(Root, {
   TopMenuTrigger
 });
 export {
-  NavigationMenu
+  NavigationMenu,
+  rootClassName
 };

package/dist/components/notabene/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_notabene_notabene = require("./notabene.cjs");
+exports.Notabene = components_notabene_notabene.Notabene;

package/dist/components/notabene/index.d.ts

@@ -0,0 +1 @@
+export { Notabene } from './notabene';

package/dist/components/notabene/index.js

@@ -0,0 +1,4 @@
+import { Notabene } from "./notabene.js";
+export {
+  Notabene
+};

package/dist/components/notabene/notabene.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const reactSlot = require("@radix-ui/react-slot");
+require("../../assets/sprite.269ba410-teddy.svg");
+const components_icon_icon = require("../icon/icon.cjs");
+const components_text_text = require("../text/text.cjs");
+const components_heading_heading = require("../heading/heading.cjs");
+const components_box_box = require("../box/box.cjs");
+const styles = {
+  "teddy-notabene": "_teddy-notabene_waflr_1",
+  "teddy-notabene__icon": "_teddy-notabene__icon_waflr_9",
+  "teddy-notabene__heading": "_teddy-notabene__heading_waflr_9"
+};
+const rootClassName = "teddy-notabene";
+const defaultTitle = "Good to know";
+const defaultText = "It could be anything, and also bullet points.";
+const Root = React.forwardRef(
+  ({ asChild, children, className, heading = defaultTitle, headingAs = "h2", text = defaultText, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}`]], className);
+    const Comp = asChild ? reactSlot.Slot : "div";
+    return /* @__PURE__ */ jsxRuntime.jsxs(Comp, { ...props, ref: forwardRef, className: classes, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "bulb", size: "lg", className: styles[`${rootClassName}__icon`] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(components_box_box.Box, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components_heading_heading.Heading, { as: headingAs, variant: "title-200", mb: "150", className: styles[`${rootClassName}__heading`], children: heading }),
+        /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "paragraph-100", mb: "50", children: text }),
+        children
+      ] })
+    ] });
+  }
+);
+Root.displayName = "Notabene";
+exports.Notabene = Root;

package/dist/components/notabene/notabene.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+
+export type RootProps = React.ComponentPropsWithoutRef<'div'> & {
+    heading: string;
+    text: string;
+    headingAs: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    asChild?: boolean;
+};
+declare const Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    heading: string;
+    text: string;
+    headingAs: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    asChild?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Root as Notabene };