@telia/teddy 0.0.39 → 0.0.40

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

@@ -6,4 +6,7 @@ require("../navigation-menu.cjs");
 const components_navigationMenu_globalNavigation_globalNavigationMyPages = require("./global-navigation-my-pages.cjs");
 require("./utils.cjs");
 require("../../box/box.cjs");
+require("../../../utils/useSize.cjs");
+require("../../../utils/generate-styling/index.cjs");
+require("../../../utils/useCallbackRef.cjs");
 exports.Desktop = components_navigationMenu_globalNavigation_globalNavigationMyPages.Desktop;

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

@@ -4,6 +4,9 @@ import "../navigation-menu.js";
 import { D } from "./global-navigation-my-pages.js";
 import "./utils.js";
 import "../../box/box.js";
+import "../../../utils/useSize.js";
+import "../../../utils/generate-styling/index.js";
+import "../../../utils/useCallbackRef.js";
 export {
   D as Desktop
 };

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

@@ -19,20 +19,29 @@ 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 utils_useSize = require("../../../utils/useSize.cjs");
+const utils_generateStyling_index = require("../../../utils/generate-styling/index.cjs");
+const utils_useCallbackRef = require("../../../utils/useCallbackRef.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_1t5v4_1",
-  "teddy-global-navigation__mobile-trigger": "_teddy-global-navigation__mobile-trigger_1t5v4_6",
-  "teddy-global-navigation__mobile-header": "_teddy-global-navigation__mobile-header_1t5v4_9",
-  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_1t5v4_6",
-  "teddy-global-navigation__link": "_teddy-global-navigation__link_1t5v4_26",
-  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_1t5v4_29",
-  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_1t5v4_32",
-  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_1t5v4_35"
+  "teddy-global-navigation": "_teddy-global-navigation_1ue02_1",
+  "teddy-global-navigation__mobile-trigger": "_teddy-global-navigation__mobile-trigger_1ue02_6",
+  "teddy-global-navigation__mobile-header": "_teddy-global-navigation__mobile-header_1ue02_9",
+  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_1ue02_6",
+  "teddy-global-navigation__link": "_teddy-global-navigation__link_1ue02_26",
+  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_1ue02_29",
+  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_1ue02_32",
+  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_1ue02_35",
+  "teddy-global-navigation__viewport-wrapper": "_teddy-global-navigation__viewport-wrapper_1ue02_43",
+  "expand-viewport": "_expand-viewport_1ue02_1",
+  "close-viewport": "_close-viewport_1ue02_1",
+  "teddy-global-navigation__top-menu-wrapper": "_teddy-global-navigation__top-menu-wrapper_1ue02_53",
+  "expand-top-menu": "_expand-top-menu_1ue02_1",
+  "close-top-menu": "_close-top-menu_1ue02_1"
 };
 function MyPages(props) {
   var _a, _b;
@@ -186,15 +195,79 @@ const ShoppingCart = React.forwardRef(() => {
   ] });
 });
 ShoppingCart.displayName = "ShoppingCart";
+const scrollDistanceDownThreshold = 200;
+const scrollDistanceUpThreshold = 50;
+const ANIMATION_DURATION = 300;
 const Desktop = React.forwardRef(() => {
   const rootContext = React.useContext(RootContext);
+  const [hideMenu, setHideMenu] = React.useState(false);
+  const lastScrollDirection = React.useRef();
+  const scrollStartPos = React.useRef(0);
+  const lastScrollPos = React.useRef(0);
+  const topMenuRef = React.useRef(null);
+  const viewPortRef = React.useRef(null);
+  const viewPortSize = utils_useSize.useSize(viewPortRef.current);
+  const topMenuSize = utils_useSize.useSize(topMenuRef.current);
+  const topMenuHeight = (topMenuSize == null ? void 0 : topMenuSize.height) ? `${topMenuSize.height}px` : void 0;
+  const viewPortHeight = (viewPortSize == null ? void 0 : viewPortSize.height) ? `${viewPortSize.height}px` : void 0;
+  const animationTimer = React.useRef(0);
+  const handleScroll = () => {
+    let compensateHight = 0;
+    if (animationTimer.current > 0) {
+      const currentTime = (/* @__PURE__ */ new Date()).getTime();
+      if (animationTimer.current + ANIMATION_DURATION > currentTime) {
+        compensateHight = ((topMenuSize == null ? void 0 : topMenuSize.height) || 0) + ((viewPortSize == null ? void 0 : viewPortSize.height) || 0);
+      } else {
+        animationTimer.current = 0;
+      }
+    }
+    const scrollY = window.scrollY;
+    const scrollDirection = scrollY > lastScrollPos.current ? "down" : "up";
+    const scrollDistance = Math.abs(scrollStartPos.current - scrollY);
+    if (scrollDirection !== lastScrollDirection.current) {
+      scrollStartPos.current = scrollY;
+    }
+    if (!hideMenu && scrollDirection === lastScrollDirection.current && scrollDirection === "down" && scrollDistance > scrollDistanceDownThreshold + compensateHight) {
+      setHideMenu(true);
+      const currentTime = (/* @__PURE__ */ new Date()).getTime();
+      animationTimer.current = currentTime;
+    }
+    if (hideMenu && scrollDirection === lastScrollDirection.current && scrollDirection === "up" && scrollDistance > scrollDistanceUpThreshold + compensateHight || scrollY === 0) {
+      setHideMenu(false);
+      const currentTime = (/* @__PURE__ */ new Date()).getTime();
+      animationTimer.current = currentTime;
+    }
+    lastScrollDirection.current = scrollDirection;
+    lastScrollPos.current = scrollY;
+  };
+  const throttledScrollHandler = useDebounceCallback(handleScroll, 5);
+  React.useEffect(() => {
+    window.addEventListener("scroll", throttledScrollHandler);
+    return () => {
+      window.removeEventListener("scroll", throttledScrollHandler);
+    };
+  }, [throttledScrollHandler]);
   if (!rootContext)
     return null;
+  function resetAndShowMenu() {
+    lastScrollDirection.current = null;
+    scrollStartPos.current = window.scrollY;
+    lastScrollPos.current = window.scrollY;
+    setHideMenu(false);
+  }
   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, { 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: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: utils_generateStyling_index.mergeStyles({ ["--teddy-top-menu-height"]: topMenuHeight }),
+        className: styles[`${rootClassName}__top-menu-wrapper`],
+        "data-state": hideMenu ? "closed" : "open",
+        children: /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.TopMenuList, { onFocus: resetAndShowMenu, ref: topMenuRef, 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, { onFocus: resetAndShowMenu, 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(
           "img",
@@ -239,10 +312,34 @@ 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, { className: styles[`${rootClassName}__viewport`] })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: utils_generateStyling_index.mergeStyles({ ["--teddy-viewport-wrapper-height"]: viewPortHeight }),
+        className: styles[`${rootClassName}__viewport-wrapper`],
+        "data-state": hideMenu ? "closed" : "open",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          components_navigationMenu_navigationMenu.NavigationMenu.Viewport,
+          {
+            onFocus: resetAndShowMenu,
+            ref: viewPortRef,
+            className: styles[`${rootClassName}__viewport`]
+          }
+        )
+      }
+    )
   ] });
 });
 Desktop.displayName = "Desktop";
+function useDebounceCallback(callback, delay) {
+  const handleCallback = utils_useCallbackRef.useCallbackRef(callback);
+  const debounceTimerRef = React.useRef(0);
+  React.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
+  return React.useCallback(() => {
+    window.clearTimeout(debounceTimerRef.current);
+    debounceTimerRef.current = window.setTimeout(handleCallback, delay);
+  }, [handleCallback, delay]);
+}
 function Mobile(props) {
   const rootContext = React.useContext(RootContext);
   const drawerRef = React.useRef(null);

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

@@ -17,20 +17,29 @@ import { useComposedRefs } from "../../../utils/composeRefs.js";
 import "../../badge/badge.js";
 import "../../badge/alert-badge.js";
 import { CounterBadge } from "../../badge/counter-badge.js";
+import { useSize } from "../../../utils/useSize.js";
+import { mergeStyles } from "../../../utils/generate-styling/index.js";
+import { useCallbackRef } from "../../../utils/useCallbackRef.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_1t5v4_1",
-  "teddy-global-navigation__mobile-trigger": "_teddy-global-navigation__mobile-trigger_1t5v4_6",
-  "teddy-global-navigation__mobile-header": "_teddy-global-navigation__mobile-header_1t5v4_9",
-  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_1t5v4_6",
-  "teddy-global-navigation__link": "_teddy-global-navigation__link_1t5v4_26",
-  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_1t5v4_29",
-  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_1t5v4_32",
-  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_1t5v4_35"
+  "teddy-global-navigation": "_teddy-global-navigation_1ue02_1",
+  "teddy-global-navigation__mobile-trigger": "_teddy-global-navigation__mobile-trigger_1ue02_6",
+  "teddy-global-navigation__mobile-header": "_teddy-global-navigation__mobile-header_1ue02_9",
+  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_1ue02_6",
+  "teddy-global-navigation__link": "_teddy-global-navigation__link_1ue02_26",
+  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_1ue02_29",
+  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_1ue02_32",
+  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_1ue02_35",
+  "teddy-global-navigation__viewport-wrapper": "_teddy-global-navigation__viewport-wrapper_1ue02_43",
+  "expand-viewport": "_expand-viewport_1ue02_1",
+  "close-viewport": "_close-viewport_1ue02_1",
+  "teddy-global-navigation__top-menu-wrapper": "_teddy-global-navigation__top-menu-wrapper_1ue02_53",
+  "expand-top-menu": "_expand-top-menu_1ue02_1",
+  "close-top-menu": "_close-top-menu_1ue02_1"
 };
 function MyPages(props) {
   var _a, _b;
@@ -184,15 +193,79 @@ const ShoppingCart = React__default.forwardRef(() => {
   ] });
 });
 ShoppingCart.displayName = "ShoppingCart";
+const scrollDistanceDownThreshold = 200;
+const scrollDistanceUpThreshold = 50;
+const ANIMATION_DURATION = 300;
 const Desktop = React__default.forwardRef(() => {
   const rootContext = React__default.useContext(RootContext);
+  const [hideMenu, setHideMenu] = React__default.useState(false);
+  const lastScrollDirection = React__default.useRef();
+  const scrollStartPos = React__default.useRef(0);
+  const lastScrollPos = React__default.useRef(0);
+  const topMenuRef = React__default.useRef(null);
+  const viewPortRef = React__default.useRef(null);
+  const viewPortSize = useSize(viewPortRef.current);
+  const topMenuSize = useSize(topMenuRef.current);
+  const topMenuHeight = (topMenuSize == null ? void 0 : topMenuSize.height) ? `${topMenuSize.height}px` : void 0;
+  const viewPortHeight = (viewPortSize == null ? void 0 : viewPortSize.height) ? `${viewPortSize.height}px` : void 0;
+  const animationTimer = React__default.useRef(0);
+  const handleScroll = () => {
+    let compensateHight = 0;
+    if (animationTimer.current > 0) {
+      const currentTime = (/* @__PURE__ */ new Date()).getTime();
+      if (animationTimer.current + ANIMATION_DURATION > currentTime) {
+        compensateHight = ((topMenuSize == null ? void 0 : topMenuSize.height) || 0) + ((viewPortSize == null ? void 0 : viewPortSize.height) || 0);
+      } else {
+        animationTimer.current = 0;
+      }
+    }
+    const scrollY = window.scrollY;
+    const scrollDirection = scrollY > lastScrollPos.current ? "down" : "up";
+    const scrollDistance = Math.abs(scrollStartPos.current - scrollY);
+    if (scrollDirection !== lastScrollDirection.current) {
+      scrollStartPos.current = scrollY;
+    }
+    if (!hideMenu && scrollDirection === lastScrollDirection.current && scrollDirection === "down" && scrollDistance > scrollDistanceDownThreshold + compensateHight) {
+      setHideMenu(true);
+      const currentTime = (/* @__PURE__ */ new Date()).getTime();
+      animationTimer.current = currentTime;
+    }
+    if (hideMenu && scrollDirection === lastScrollDirection.current && scrollDirection === "up" && scrollDistance > scrollDistanceUpThreshold + compensateHight || scrollY === 0) {
+      setHideMenu(false);
+      const currentTime = (/* @__PURE__ */ new Date()).getTime();
+      animationTimer.current = currentTime;
+    }
+    lastScrollDirection.current = scrollDirection;
+    lastScrollPos.current = scrollY;
+  };
+  const throttledScrollHandler = useDebounceCallback(handleScroll, 5);
+  React__default.useEffect(() => {
+    window.addEventListener("scroll", throttledScrollHandler);
+    return () => {
+      window.removeEventListener("scroll", throttledScrollHandler);
+    };
+  }, [throttledScrollHandler]);
   if (!rootContext)
     return null;
+  function resetAndShowMenu() {
+    lastScrollDirection.current = null;
+    scrollStartPos.current = window.scrollY;
+    lastScrollPos.current = window.scrollY;
+    setHideMenu(false);
+  }
   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, { href: link.link, children: link.name }) }) }, link.name)) }),
-    LINKS.map((link) => /* @__PURE__ */ jsxs(NavigationMenu.List, { value: link.name, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: mergeStyles({ ["--teddy-top-menu-height"]: topMenuHeight }),
+        className: styles[`${rootClassName}__top-menu-wrapper`],
+        "data-state": hideMenu ? "closed" : "open",
+        children: /* @__PURE__ */ jsx(NavigationMenu.TopMenuList, { onFocus: resetAndShowMenu, ref: topMenuRef, 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, { onFocus: resetAndShowMenu, 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(
           "img",
@@ -237,10 +310,34 @@ 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, { className: styles[`${rootClassName}__viewport`] })
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: mergeStyles({ ["--teddy-viewport-wrapper-height"]: viewPortHeight }),
+        className: styles[`${rootClassName}__viewport-wrapper`],
+        "data-state": hideMenu ? "closed" : "open",
+        children: /* @__PURE__ */ jsx(
+          NavigationMenu.Viewport,
+          {
+            onFocus: resetAndShowMenu,
+            ref: viewPortRef,
+            className: styles[`${rootClassName}__viewport`]
+          }
+        )
+      }
+    )
   ] });
 });
 Desktop.displayName = "Desktop";
+function useDebounceCallback(callback, delay) {
+  const handleCallback = useCallbackRef(callback);
+  const debounceTimerRef = React__default.useRef(0);
+  React__default.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
+  return React__default.useCallback(() => {
+    window.clearTimeout(debounceTimerRef.current);
+    debounceTimerRef.current = window.setTimeout(handleCallback, delay);
+  }, [handleCallback, delay]);
+}
 function Mobile(props) {
   const rootContext = React__default.useContext(RootContext);
   const drawerRef = React__default.useRef(null);

package/dist/style.css

@@ -3319,47 +3319,100 @@
       height: 0;
     }
   }
-}._teddy-global-navigation_1t5v4_1 {
+}._teddy-global-navigation_1ue02_1 {
   position: sticky;
   inset: 0 0 auto 0;
   z-index: 39;
 }
-._teddy-global-navigation__mobile-trigger_1t5v4_6 {
+._teddy-global-navigation__mobile-trigger_1ue02_6 {
   border-inline: var(--teddy-border-width-xs) solid var(--teddy-color-border-weak);
 }
-._teddy-global-navigation__mobile-header_1t5v4_9[data-state=open] {
+._teddy-global-navigation__mobile-header_1ue02_9[data-state=open] {
   border-bottom: var(--teddy-border-width-xs) solid var(--teddy-color-border-weak);
 }
-._teddy-global-navigation__mobile_1t5v4_6 {
+._teddy-global-navigation__mobile_1ue02_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_1t5v4_6::before {
+._teddy-global-navigation__mobile_1ue02_6::before {
   content: "";
   display: block;
   width: var(--width-for-centering-element);
 }
-._teddy-global-navigation__mobile_1t5v4_6::after {
+._teddy-global-navigation__mobile_1ue02_6::after {
   content: "";
   display: block;
   width: var(--width-for-centering-element);
 }
-._teddy-global-navigation__link_1t5v4_26 {
+._teddy-global-navigation__link_1ue02_26 {
   text-decoration: none;
 }
-._teddy-global-navigation__viewport_1t5v4_29 {
+._teddy-global-navigation__viewport_1ue02_29 {
   height: var(--radix-navigation-menu-viewport-height, calc(3.25rem * var(--teddy-scale)));
 }
-._teddy-global-navigation__item-wrapper_1t5v4_32 {
+._teddy-global-navigation__item-wrapper_1ue02_32 {
   position: relative;
 }
-._teddy-global-navigation__item-count_1t5v4_35 {
+._teddy-global-navigation__item-count_1ue02_35 {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   left: 15px;
   top: -6px;
+}
+._teddy-global-navigation__viewport-wrapper_1ue02_43 {
+  overflow: hidden;
+}
+._teddy-global-navigation__viewport-wrapper_1ue02_43[data-state=open] {
+  animation: _expand-viewport_1ue02_1 var(--teddy-motion-duration-300) ease;
+}
+._teddy-global-navigation__viewport-wrapper_1ue02_43[data-state=closed] {
+  animation: _close-viewport_1ue02_1 var(--teddy-motion-duration-300) ease;
+  height: 0;
+}
+._teddy-global-navigation__top-menu-wrapper_1ue02_53 {
+  overflow: hidden;
+  transition: height var(--teddy-motion-duration-300) ease;
+}
+._teddy-global-navigation__top-menu-wrapper_1ue02_53[data-state=open] {
+  height: var(--teddy-top-menu-height, 3.25rem);
+}
+._teddy-global-navigation__top-menu-wrapper_1ue02_53[data-state=closed] {
+  height: 0;
+}
+
+@keyframes _expand-viewport_1ue02_1 {
+  0% {
+    height: 0;
+  }
+  100% {
+    height: var(--teddy-viewport-wrapper-height);
+  }
+}
+@keyframes _close-viewport_1ue02_1 {
+  0% {
+    height: var(--teddy-viewport-wrapper-height);
+  }
+  100% {
+    height: 0;
+  }
+}
+@keyframes _expand-top-menu_1ue02_1 {
+  0% {
+    height: 0;
+  }
+  100% {
+    height: var(--teddy-top-menu-height);
+  }
+}
+@keyframes _close-top-menu_1ue02_1 {
+  0% {
+    height: var(--teddy-top-menu-height);
+  }
+  100% {
+    height: 0;
+  }
 }@layer icon, toggle;
 ._teddy-toggle__input_m5h3g_2::before {
   box-sizing: border-box;

package/dist/utils/useCallbackRef.cjs

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function useCallbackRef(callback) {
+  const callbackRef = React__namespace.useRef(callback);
+  React__namespace.useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return React__namespace.useMemo(() => (...args) => {
+    var _a;
+    return (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef, ...args);
+  }, []);
+}
+exports.useCallbackRef = useCallbackRef;

package/dist/utils/useCallbackRef.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+declare function useCallbackRef<T extends (...args: unknown[]) => unknown>(callback: T | undefined): T;
+export { useCallbackRef };

package/dist/utils/useCallbackRef.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+function useCallbackRef(callback) {
+  const callbackRef = React.useRef(callback);
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return React.useMemo(() => (...args) => {
+    var _a;
+    return (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef, ...args);
+  }, []);
+}
+export {
+  useCallbackRef
+};

package/dist/utils/useLayoutEffect.cjs

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const useLayoutEffect = (globalThis == null ? void 0 : globalThis.document) ? React__namespace.useLayoutEffect : () => {
+};
+exports.useLayoutEffect = useLayoutEffect;

package/dist/utils/useLayoutEffect.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+/**
+This utilities is a copy from Radix UI.
+
+
+MIT License
+
+Copyright (c) 2022 WorkOS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+ */
+/**
+ * On the server, React emits a warning when calling `useLayoutEffect`.
+ * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
+ * We use this safe version which suppresses the warning by replacing it with a noop on the server.
+ *
+ * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
+ */
+declare const useLayoutEffect: typeof React.useLayoutEffect;
+export { useLayoutEffect };

package/dist/utils/useLayoutEffect.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+const useLayoutEffect = (globalThis == null ? void 0 : globalThis.document) ? React.useLayoutEffect : () => {
+};
+export {
+  useLayoutEffect
+};

package/dist/utils/useSize.cjs

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const utils_useLayoutEffect = require("./useLayoutEffect.cjs");
+function useSize(element) {
+  const [size, setSize] = React.useState(void 0);
+  utils_useLayoutEffect.useLayoutEffect(() => {
+    if (element) {
+      setSize({ width: element.offsetWidth, height: element.offsetHeight });
+      const resizeObserver = new ResizeObserver((entries) => {
+        if (!Array.isArray(entries)) {
+          return;
+        }
+        if (!entries.length) {
+          return;
+        }
+        const entry = entries[0];
+        let width;
+        let height;
+        if ("borderBoxSize" in entry) {
+          const borderSizeEntry = entry["borderBoxSize"];
+          const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+          width = borderSize["inlineSize"];
+          height = borderSize["blockSize"];
+        } else {
+          width = element.offsetWidth;
+          height = element.offsetHeight;
+        }
+        setSize({ width, height });
+      });
+      resizeObserver.observe(element, { box: "border-box" });
+      return () => resizeObserver.unobserve(element);
+    } else {
+      setSize(void 0);
+    }
+  }, [element]);
+  return size;
+}
+exports.useSize = useSize;

package/dist/utils/useSize.d.ts

@@ -0,0 +1,31 @@
+/**
+This utilities is a copy from Radix UI.
+
+
+MIT License
+
+Copyright (c) 2022 WorkOS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+ */
+declare function useSize(element: HTMLElement | null): {
+    width: number;
+    height: number;
+} | undefined;
+export { useSize };

package/dist/utils/useSize.js

@@ -0,0 +1,39 @@
+import React__default from "react";
+import { useLayoutEffect } from "./useLayoutEffect.js";
+function useSize(element) {
+  const [size, setSize] = React__default.useState(void 0);
+  useLayoutEffect(() => {
+    if (element) {
+      setSize({ width: element.offsetWidth, height: element.offsetHeight });
+      const resizeObserver = new ResizeObserver((entries) => {
+        if (!Array.isArray(entries)) {
+          return;
+        }
+        if (!entries.length) {
+          return;
+        }
+        const entry = entries[0];
+        let width;
+        let height;
+        if ("borderBoxSize" in entry) {
+          const borderSizeEntry = entry["borderBoxSize"];
+          const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+          width = borderSize["inlineSize"];
+          height = borderSize["blockSize"];
+        } else {
+          width = element.offsetWidth;
+          height = element.offsetHeight;
+        }
+        setSize({ width, height });
+      });
+      resizeObserver.observe(element, { box: "border-box" });
+      return () => resizeObserver.unobserve(element);
+    } else {
+      setSize(void 0);
+    }
+  }, [element]);
+  return size;
+}
+export {
+  useSize
+};

package/package.json

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