@telia/teddy 0.7.61 → 0.7.63

package/dist/components/checkbox-card-group/checkbox-card-group-indicator.cjs

@@ -905,7 +905,14 @@ const Desktop = React.forwardRef(() => {
     return (((_a = link.links) == null ? void 0 : _a.length) || 0) > 0 && link.name === (rootContext == null ? void 0 : rootContext.specifiedLink) && sameParent;
   });
   const topMenuHeight = (topMenuSize == null ? void 0 : topMenuSize.height) ? `${topMenuSize.height}px` : void 0;
-  const { selectedMenuItem, setSelectedMenuItem, linkComponent: Link2, specifiedLink, setSpecifiedLink } = rootContext;
+  const {
+    selectedMenuItem,
+    setSelectedMenuItem,
+    linkComponent: Link2,
+    specifiedLink,
+    setSpecifiedLink,
+    hideTopMenuList
+  } = rootContext;
   const currentLocation = rootContext.pathname.endsWith("/") ? rootContext.pathname : `${rootContext.pathname}/`;
   const handleInteractions = (linkName) => {
     setSpecifiedLink(linkName || "");
@@ -913,7 +920,7 @@ const Desktop = React.forwardRef(() => {
   };
   const viewPortHeight = shouldShowViewport ? "333px" : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles[`${rootClassName}__top-menu-color`], children: /* @__PURE__ */ jsxRuntime.jsx(
+    !hideTopMenuList && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles[`${rootClassName}__top-menu-color`], children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         style: utils_generateStyling_index.mergeStyles({ ["--teddy-top-menu-height"]: topMenuHeight }),
@@ -940,8 +947,8 @@ const Desktop = React.forwardRef(() => {
     ) }),
     links.map((link) => {
       var _a;
-      return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.List, { value: link.name, children: (_a = link.links) == null ? void 0 : _a.map(
-        (subLink) => /* @__PURE__ */ jsxRuntime.jsxs(
+      return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu.List, { value: link.name, children: [
+        (_a = link.links) == null ? void 0 : _a.map((subLink) => /* @__PURE__ */ jsxRuntime.jsxs(
           NavigationMenu.Item,
           {
             value: subLink.name,
@@ -1045,13 +1052,23 @@ const Desktop = React.forwardRef(() => {
             ]
           },
           subLink.name
-        )
-      ) }, link.name);
+        )),
+        hideTopMenuList && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Item, { style: { marginLeft: "auto" } }),
+          /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(ShoppingCart, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(MyPages, {}) })
+        ] })
+      ] }, link.name);
     })
   ] });
 });
 Desktop.displayName = "Desktop";
-const HightlightedLinksDesktop = ({ links, listName, colored, setShowMenu }) => {
+const HightlightedLinksDesktop = ({
+  links,
+  listName,
+  colored,
+  setShowMenu
+}) => {
   const rootContext = React.useContext(RootContext);
   if (!rootContext) return null;
   const { linkComponent: Link2, setSpecifiedLink, setSelectedMenuItem } = rootContext;
@@ -1131,7 +1148,7 @@ function Mobile(props) {
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { flexShrink: "0", children: /* @__PURE__ */ jsxRuntime.jsx(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.jsxs(components_flex_flex.Flex, { flexBasis: "0", gap: { sm: "100", md: "200" }, className: styles[`${rootClassName}__top-menu-icons`], children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Search, {}),
+          !rootContext.hideTopMenuList && /* @__PURE__ */ jsxRuntime.jsx(Search, {}),
           /* @__PURE__ */ jsxRuntime.jsx(ShoppingCart, {}),
           /* @__PURE__ */ jsxRuntime.jsx(MyPages, {}),
           /* @__PURE__ */ jsxRuntime.jsxs(components_drawer_index.Drawer, { children: [
@@ -1149,7 +1166,7 @@ function Mobile(props) {
                     value: rootContext.selectedDomainItem,
                     onValueChange: (v) => rootContext.setSelectedDomainItem(v, true),
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(components_tabs_index.Tabs.List, { children: links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(components_tabs_index.Tabs.Trigger, { asChild: true, value: link.name, children: link.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(NavLink, { href: link.link, children: link.name }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.link, children: link.name }) }, link.name)) }),
+                      !rootContext.hideTopMenuList && /* @__PURE__ */ jsxRuntime.jsx(components_tabs_index.Tabs.List, { children: links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(components_tabs_index.Tabs.Trigger, { asChild: true, value: link.name, children: link.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(NavLink, { href: link.link, children: link.name }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.link, children: link.name }) }, link.name)) }),
                       /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: links.map((link) => {
                         var _a, _b;
                         return /* @__PURE__ */ jsxRuntime.jsxs(components_tabs_index.Tabs.Content, { value: link.name, children: [
@@ -1321,6 +1338,7 @@ function Root({
   drawerSize = "md",
   isSimplified,
   customLinks,
+  hideTopMenuList,
   currentPath,
   onSearchInputChange,
   onSearchKeyDown,
@@ -1328,10 +1346,14 @@ function Root({
   onClear,
   ...props
 }) {
-  const [selectedMenuItem, setSelectedMenuItem] = React.useState(getInitialMenuItem(currentPath, customLinks));
+  const [selectedMenuItem, setSelectedMenuItem] = React.useState(
+    getInitialMenuItem(currentPath, customLinks)
+  );
   const [selectedDomainItem, setSelectedDomainItem] = React.useState(getInitialDomain(currentPath, customLinks));
   const [pathname, setPathname] = React.useState(currentPath || "");
-  const [specifiedLink, setSpecifiedLink] = React.useState(getInitialMenuItem(currentPath, customLinks));
+  const [specifiedLink, setSpecifiedLink] = React.useState(
+    getInitialMenuItem(currentPath, customLinks)
+  );
   const classes = clsx([styles[`${rootClassName}`]], className);
   React.useEffect(() => {
     setPathname(currentPath || "");
@@ -1372,7 +1394,8 @@ function Root({
         onSearchKeyDown,
         searchValue,
         onClear,
-        customLinks
+        customLinks,
+        hideTopMenuList
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { ...props, className: classes, children: /* @__PURE__ */ jsxRuntime.jsxs(
         NavigationMenu,

package/dist/components/checkbox-card-group/checkbox-card-group-indicator.js

@@ -884,7 +884,14 @@ const Desktop = React__default.forwardRef(() => {
     return (((_a = link.links) == null ? void 0 : _a.length) || 0) > 0 && link.name === (rootContext == null ? void 0 : rootContext.specifiedLink) && sameParent;
   });
   const topMenuHeight = (topMenuSize == null ? void 0 : topMenuSize.height) ? `${topMenuSize.height}px` : void 0;
-  const { selectedMenuItem, setSelectedMenuItem, linkComponent: Link2, specifiedLink, setSpecifiedLink } = rootContext;
+  const {
+    selectedMenuItem,
+    setSelectedMenuItem,
+    linkComponent: Link2,
+    specifiedLink,
+    setSpecifiedLink,
+    hideTopMenuList
+  } = rootContext;
   const currentLocation = rootContext.pathname.endsWith("/") ? rootContext.pathname : `${rootContext.pathname}/`;
   const handleInteractions = (linkName) => {
     setSpecifiedLink(linkName || "");
@@ -892,7 +899,7 @@ const Desktop = React__default.forwardRef(() => {
   };
   const viewPortHeight = shouldShowViewport ? "333px" : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: styles[`${rootClassName}__top-menu-color`], children: /* @__PURE__ */ jsx(
+    !hideTopMenuList && /* @__PURE__ */ jsx("div", { className: styles[`${rootClassName}__top-menu-color`], children: /* @__PURE__ */ jsx(
       "div",
       {
         style: mergeStyles({ ["--teddy-top-menu-height"]: topMenuHeight }),
@@ -919,8 +926,8 @@ const Desktop = React__default.forwardRef(() => {
     ) }),
     links.map((link) => {
       var _a;
-      return /* @__PURE__ */ jsx(NavigationMenu.List, { value: link.name, children: (_a = link.links) == null ? void 0 : _a.map(
-        (subLink) => /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsxs(NavigationMenu.List, { value: link.name, children: [
+        (_a = link.links) == null ? void 0 : _a.map((subLink) => /* @__PURE__ */ jsxs(
           NavigationMenu.Item,
           {
             value: subLink.name,
@@ -1024,13 +1031,23 @@ const Desktop = React__default.forwardRef(() => {
             ]
           },
           subLink.name
-        )
-      ) }, link.name);
+        )),
+        hideTopMenuList && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(NavigationMenu.Item, { style: { marginLeft: "auto" } }),
+          /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(ShoppingCart, {}) }),
+          /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(MyPages, {}) })
+        ] })
+      ] }, link.name);
     })
   ] });
 });
 Desktop.displayName = "Desktop";
-const HightlightedLinksDesktop = ({ links, listName, colored, setShowMenu }) => {
+const HightlightedLinksDesktop = ({
+  links,
+  listName,
+  colored,
+  setShowMenu
+}) => {
   const rootContext = React__default.useContext(RootContext);
   if (!rootContext) return null;
   const { linkComponent: Link2, setSpecifiedLink, setSelectedMenuItem } = rootContext;
@@ -1110,7 +1127,7 @@ function Mobile(props) {
       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__ */ jsxs(Flex, { flexBasis: "0", gap: { sm: "100", md: "200" }, className: styles[`${rootClassName}__top-menu-icons`], children: [
-          /* @__PURE__ */ jsx(Search, {}),
+          !rootContext.hideTopMenuList && /* @__PURE__ */ jsx(Search, {}),
           /* @__PURE__ */ jsx(ShoppingCart, {}),
           /* @__PURE__ */ jsx(MyPages, {}),
           /* @__PURE__ */ jsxs(Drawer, { children: [
@@ -1128,7 +1145,7 @@ function Mobile(props) {
                     value: rootContext.selectedDomainItem,
                     onValueChange: (v) => rootContext.setSelectedDomainItem(v, true),
                     children: [
-                      /* @__PURE__ */ jsx(Tabs.List, { children: links.map((link) => /* @__PURE__ */ jsx(Tabs.Trigger, { asChild: true, value: link.name, children: link.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(NavLink, { href: link.link, children: link.name }) : /* @__PURE__ */ jsx("a", { href: link.link, children: link.name }) }, link.name)) }),
+                      !rootContext.hideTopMenuList && /* @__PURE__ */ jsx(Tabs.List, { children: links.map((link) => /* @__PURE__ */ jsx(Tabs.Trigger, { asChild: true, value: link.name, children: link.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(NavLink, { href: link.link, children: link.name }) : /* @__PURE__ */ jsx("a", { href: link.link, children: link.name }) }, link.name)) }),
                       /* @__PURE__ */ jsx(Fragment, { children: links.map((link) => {
                         var _a, _b;
                         return /* @__PURE__ */ jsxs(Tabs.Content, { value: link.name, children: [
@@ -1300,6 +1317,7 @@ function Root({
   drawerSize = "md",
   isSimplified,
   customLinks,
+  hideTopMenuList,
   currentPath,
   onSearchInputChange,
   onSearchKeyDown,
@@ -1307,10 +1325,14 @@ function Root({
   onClear,
   ...props
 }) {
-  const [selectedMenuItem, setSelectedMenuItem] = React__default.useState(getInitialMenuItem(currentPath, customLinks));
+  const [selectedMenuItem, setSelectedMenuItem] = React__default.useState(
+    getInitialMenuItem(currentPath, customLinks)
+  );
   const [selectedDomainItem, setSelectedDomainItem] = React__default.useState(getInitialDomain(currentPath, customLinks));
   const [pathname, setPathname] = React__default.useState(currentPath || "");
-  const [specifiedLink, setSpecifiedLink] = React__default.useState(getInitialMenuItem(currentPath, customLinks));
+  const [specifiedLink, setSpecifiedLink] = React__default.useState(
+    getInitialMenuItem(currentPath, customLinks)
+  );
   const classes = clsx([styles[`${rootClassName}`]], className);
   useEffect(() => {
     setPathname(currentPath || "");
@@ -1351,7 +1373,8 @@ function Root({
         onSearchKeyDown,
         searchValue,
         onClear,
-        customLinks
+        customLinks,
+        hideTopMenuList
       },
       children: /* @__PURE__ */ jsx(Box, { ...props, className: classes, children: /* @__PURE__ */ jsxs(
         NavigationMenu,

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

@@ -20,6 +20,7 @@ export type RootProps = React.ComponentPropsWithoutRef<'div'> & {
     drawerSize: 'md' | 'lg';
     isSimplified?: boolean;
     customLinks?: CustomLinksConfig;
+    hideTopMenuList?: boolean;
     currentPath: string | undefined;
     onSearchInputChange?: (e: React.ChangeEvent<HTMLInputElement>, value?: string) => void;
     onSearchKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
@@ -36,9 +37,10 @@ type RootContext = {
     specifiedLink?: string;
     setSpecifiedLink: (v: string) => void;
     customLinks?: CustomLinksConfig;
+    hideTopMenuList?: boolean;
 } & Pick<RootProps, 'onSearchSubmit' | 'additionalSearchContent' | 'shoppingCart' | 'shoppingCartNumberOfItems' | 'loggedInUser' | 'appKey' | 'onLogoutClick' | 'linkComponent' | 'isCartOpen' | 'onCartOpenChange' | 'drawerSize' | 'onSearchInputChange' | 'onSearchKeyDown' | 'searchValue' | 'onClear'>;
 export declare const RootContext: React.Context<RootContext | null>;
-export declare function Root({ className, appKey, loggedInUser, linkComponent, onLogoutClick, shoppingCart, shoppingCartNumberOfItems, onSearchSubmit, additionalSearchContent, isCartOpen, onCartOpenChange, drawerSize, isSimplified, customLinks, currentPath, onSearchInputChange, onSearchKeyDown, searchValue, onClear, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+export declare function Root({ className, appKey, loggedInUser, linkComponent, onLogoutClick, shoppingCart, shoppingCartNumberOfItems, onSearchSubmit, additionalSearchContent, isCartOpen, onCartOpenChange, drawerSize, isSimplified, customLinks, hideTopMenuList, currentPath, onSearchInputChange, onSearchKeyDown, searchValue, onClear, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Root {
     var displayName: string;
 }

package/dist/components/top-row-buttons/top-row-buttons.cjs

@@ -6,14 +6,14 @@ const React = require("react");
 require("../../assets/sprite.44b293a1-teddy.svg");
 const components_icon_icon = require("../icon/icon.cjs");
 const styles = {
-  "teddy-top-row-buttons": "_teddy-top-row-buttons_1ytqf_1",
-  "teddy-top-row-buttons__track": "_teddy-top-row-buttons__track_1ytqf_4",
-  "teddy-top-row-buttons__track--centered": "_teddy-top-row-buttons__track--centered_1ytqf_17",
-  "teddy-top-row-buttons__track--scroll": "_teddy-top-row-buttons__track--scroll_1ytqf_20",
-  "teddy-top-row-buttons__item": "_teddy-top-row-buttons__item_1ytqf_23",
-  "teddy-top-row-buttons__button": "_teddy-top-row-buttons__button_1ytqf_27",
-  "teddy-top-row-buttons__label": "_teddy-top-row-buttons__label_1ytqf_109",
-  "teddy-top-row-buttons__emoji": "_teddy-top-row-buttons__emoji_1ytqf_112"
+  "teddy-top-row-buttons": "_teddy-top-row-buttons_1ogzx_1",
+  "teddy-top-row-buttons__track": "_teddy-top-row-buttons__track_1ogzx_4",
+  "teddy-top-row-buttons__track--centered": "_teddy-top-row-buttons__track--centered_1ogzx_16",
+  "teddy-top-row-buttons__track--scroll": "_teddy-top-row-buttons__track--scroll_1ogzx_19",
+  "teddy-top-row-buttons__item": "_teddy-top-row-buttons__item_1ogzx_23",
+  "teddy-top-row-buttons__button": "_teddy-top-row-buttons__button_1ogzx_27",
+  "teddy-top-row-buttons__label": "_teddy-top-row-buttons__label_1ogzx_109",
+  "teddy-top-row-buttons__emoji": "_teddy-top-row-buttons__emoji_1ogzx_112"
 };
 const rootClassName = "teddy-top-row-buttons";
 const Root = React.forwardRef(

package/dist/components/top-row-buttons/top-row-buttons.js

@@ -4,14 +4,14 @@ import React__default from "react";
 import "../../assets/sprite.44b293a1-teddy.svg";
 import { Icon } from "../icon/icon.js";
 const styles = {
-  "teddy-top-row-buttons": "_teddy-top-row-buttons_1ytqf_1",
-  "teddy-top-row-buttons__track": "_teddy-top-row-buttons__track_1ytqf_4",
-  "teddy-top-row-buttons__track--centered": "_teddy-top-row-buttons__track--centered_1ytqf_17",
-  "teddy-top-row-buttons__track--scroll": "_teddy-top-row-buttons__track--scroll_1ytqf_20",
-  "teddy-top-row-buttons__item": "_teddy-top-row-buttons__item_1ytqf_23",
-  "teddy-top-row-buttons__button": "_teddy-top-row-buttons__button_1ytqf_27",
-  "teddy-top-row-buttons__label": "_teddy-top-row-buttons__label_1ytqf_109",
-  "teddy-top-row-buttons__emoji": "_teddy-top-row-buttons__emoji_1ytqf_112"
+  "teddy-top-row-buttons": "_teddy-top-row-buttons_1ogzx_1",
+  "teddy-top-row-buttons__track": "_teddy-top-row-buttons__track_1ogzx_4",
+  "teddy-top-row-buttons__track--centered": "_teddy-top-row-buttons__track--centered_1ogzx_16",
+  "teddy-top-row-buttons__track--scroll": "_teddy-top-row-buttons__track--scroll_1ogzx_19",
+  "teddy-top-row-buttons__item": "_teddy-top-row-buttons__item_1ogzx_23",
+  "teddy-top-row-buttons__button": "_teddy-top-row-buttons__button_1ogzx_27",
+  "teddy-top-row-buttons__label": "_teddy-top-row-buttons__label_1ogzx_109",
+  "teddy-top-row-buttons__emoji": "_teddy-top-row-buttons__emoji_1ogzx_112"
 };
 const rootClassName = "teddy-top-row-buttons";
 const Root = React__default.forwardRef(

package/dist/style.css

@@ -252,33 +252,33 @@
     font-family: var(--teddy-typography-family-default);
     gap: var(--teddy-spacing-100);
   }
-}._teddy-top-row-buttons_1ytqf_1 {
+}._teddy-top-row-buttons_1ogzx_1 {
   width: 100%;
 }
-._teddy-top-row-buttons__track_1ytqf_4 {
+._teddy-top-row-buttons__track_1ogzx_4 {
   display: flex;
   gap: var(--teddy-spacing-200);
   overflow-x: auto;
-  scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   scrollbar-width: none;
   padding-bottom: var(--teddy-spacing-50);
   width: 100%;
 }
-._teddy-top-row-buttons__track_1ytqf_4::-webkit-scrollbar {
+._teddy-top-row-buttons__track_1ogzx_4::-webkit-scrollbar {
   display: none;
 }
-._teddy-top-row-buttons__track--centered_1ytqf_17 {
+._teddy-top-row-buttons__track--centered_1ogzx_16 {
   justify-content: center;
 }
-._teddy-top-row-buttons__track--scroll_1ytqf_20 {
+._teddy-top-row-buttons__track--scroll_1ogzx_19 {
   justify-content: flex-start;
+  scroll-snap-type: x mandatory;
 }
-._teddy-top-row-buttons__item_1ytqf_23 {
+._teddy-top-row-buttons__item_1ogzx_23 {
   flex: 0 0 auto;
   scroll-snap-align: start;
 }
-._teddy-top-row-buttons__button_1ytqf_27 {
+._teddy-top-row-buttons__button_1ogzx_27 {
   display: inline-flex;
   align-items: center;
   gap: var(--teddy-spacing-100);
@@ -296,7 +296,7 @@
   transition-timing-function: var(--teddy-motion-easing-ease-in-out);
   position: relative;
 }
-._teddy-top-row-buttons__button_1ytqf_27:focus::before {
+._teddy-top-row-buttons__button_1ogzx_27:focus::before {
   border-radius: inherit;
   box-shadow: 0 0 0 var(--teddy-border-width-sm) var(--teddy-color-border-interactive-focus);
   content: "";
@@ -305,65 +305,65 @@
   inset: calc(var(--teddy-spacing-25) * -1);
   position: absolute;
 }
-._teddy-top-row-buttons__button_1ytqf_27:focus:not(:focus-visible)::before {
+._teddy-top-row-buttons__button_1ogzx_27:focus:not(:focus-visible)::before {
   opacity: 0;
 }
-._teddy-top-row-buttons__track_1ytqf_4[data-color=beige] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]), ._teddy-top-row-buttons__button_1ytqf_27[data-color=beige] {
+._teddy-top-row-buttons__track_1ogzx_4[data-color=beige] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]), ._teddy-top-row-buttons__button_1ogzx_27[data-color=beige] {
   background-color: var(--teddy-color-background-beige);
   color: var(--teddy-color-text-default);
 }
-._teddy-top-row-buttons__track_1ytqf_4[data-color=beige] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):hover, ._teddy-top-row-buttons__button_1ytqf_27[data-color=beige]:hover {
+._teddy-top-row-buttons__track_1ogzx_4[data-color=beige] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):hover, ._teddy-top-row-buttons__button_1ogzx_27[data-color=beige]:hover {
   background-color: var(--teddy-color-background-beige-hover);
 }
-._teddy-top-row-buttons__track_1ytqf_4[data-color=beige] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):active, ._teddy-top-row-buttons__button_1ytqf_27[data-color=beige]:active {
+._teddy-top-row-buttons__track_1ogzx_4[data-color=beige] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):active, ._teddy-top-row-buttons__button_1ogzx_27[data-color=beige]:active {
   background-color: var(--teddy-color-background-beige-active);
 }
-._teddy-top-row-buttons__track_1ytqf_4[data-color=beige] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):focus-visible, ._teddy-top-row-buttons__button_1ytqf_27[data-color=beige]:focus-visible {
+._teddy-top-row-buttons__track_1ogzx_4[data-color=beige] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):focus-visible, ._teddy-top-row-buttons__button_1ogzx_27[data-color=beige]:focus-visible {
   background-color: var(--teddy-color-background-beige);
 }
-._teddy-top-row-buttons__track_1ytqf_4[data-color=grey] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]), ._teddy-top-row-buttons__button_1ytqf_27[data-color=grey] {
+._teddy-top-row-buttons__track_1ogzx_4[data-color=grey] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]), ._teddy-top-row-buttons__button_1ogzx_27[data-color=grey] {
   background-color: var(--teddy-color-background-secondary);
   color: var(--teddy-color-text-default);
 }
-._teddy-top-row-buttons__track_1ytqf_4[data-color=grey] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):hover, ._teddy-top-row-buttons__button_1ytqf_27[data-color=grey]:hover {
+._teddy-top-row-buttons__track_1ogzx_4[data-color=grey] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):hover, ._teddy-top-row-buttons__button_1ogzx_27[data-color=grey]:hover {
   background-color: var(--teddy-color-background-secondary-hover);
 }
-._teddy-top-row-buttons__track_1ytqf_4[data-color=grey] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):active, ._teddy-top-row-buttons__button_1ytqf_27[data-color=grey]:active {
+._teddy-top-row-buttons__track_1ogzx_4[data-color=grey] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):active, ._teddy-top-row-buttons__button_1ogzx_27[data-color=grey]:active {
   background-color: var(--teddy-color-background-secondary-active);
 }
-._teddy-top-row-buttons__track_1ytqf_4[data-color=grey] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):focus-visible, ._teddy-top-row-buttons__button_1ytqf_27[data-color=grey]:focus-visible {
+._teddy-top-row-buttons__track_1ogzx_4[data-color=grey] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):focus-visible, ._teddy-top-row-buttons__button_1ogzx_27[data-color=grey]:focus-visible {
   background-color: var(--teddy-color-background-secondary);
 }
-._teddy-top-row-buttons__track_1ytqf_4[data-color=white] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]), ._teddy-top-row-buttons__button_1ytqf_27[data-color=white] {
+._teddy-top-row-buttons__track_1ogzx_4[data-color=white] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]), ._teddy-top-row-buttons__button_1ogzx_27[data-color=white] {
   background-color: var(--teddy-color-brand-white);
   color: var(--teddy-color-text-default);
 }
-._teddy-top-row-buttons__track_1ytqf_4[data-color=white] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):hover, ._teddy-top-row-buttons__button_1ytqf_27[data-color=white]:hover {
+._teddy-top-row-buttons__track_1ogzx_4[data-color=white] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):hover, ._teddy-top-row-buttons__button_1ogzx_27[data-color=white]:hover {
   background-color: var(--teddy-color-background-interactive-transparent-hover);
 }
-._teddy-top-row-buttons__track_1ytqf_4[data-color=white] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):active, ._teddy-top-row-buttons__button_1ytqf_27[data-color=white]:active {
+._teddy-top-row-buttons__track_1ogzx_4[data-color=white] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):active, ._teddy-top-row-buttons__button_1ogzx_27[data-color=white]:active {
   background-color: var(--teddy-color-background-interactive-transparent-active);
 }
-._teddy-top-row-buttons__track_1ytqf_4[data-color=white] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):focus-visible, ._teddy-top-row-buttons__button_1ytqf_27[data-color=white]:focus-visible {
+._teddy-top-row-buttons__track_1ogzx_4[data-color=white] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):focus-visible, ._teddy-top-row-buttons__button_1ogzx_27[data-color=white]:focus-visible {
   background-color: var(--teddy-color-brand-white);
 }
-._teddy-top-row-buttons__track_1ytqf_4[data-color=purple] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]), ._teddy-top-row-buttons__button_1ytqf_27[data-color=purple] {
+._teddy-top-row-buttons__track_1ogzx_4[data-color=purple] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]), ._teddy-top-row-buttons__button_1ogzx_27[data-color=purple] {
   background-color: var(--teddy-color-background-interactive-primary);
   color: var(--teddy-color-text-interactive-on-primary);
 }
-._teddy-top-row-buttons__track_1ytqf_4[data-color=purple] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):hover, ._teddy-top-row-buttons__button_1ytqf_27[data-color=purple]:hover {
+._teddy-top-row-buttons__track_1ogzx_4[data-color=purple] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):hover, ._teddy-top-row-buttons__button_1ogzx_27[data-color=purple]:hover {
   background-color: var(--teddy-color-background-interactive-primary-hover);
 }
-._teddy-top-row-buttons__track_1ytqf_4[data-color=purple] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):active, ._teddy-top-row-buttons__button_1ytqf_27[data-color=purple]:active {
+._teddy-top-row-buttons__track_1ogzx_4[data-color=purple] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):active, ._teddy-top-row-buttons__button_1ogzx_27[data-color=purple]:active {
   background-color: var(--teddy-color-background-interactive-primary-active);
 }
-._teddy-top-row-buttons__track_1ytqf_4[data-color=purple] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):focus-visible, ._teddy-top-row-buttons__button_1ytqf_27[data-color=purple]:focus-visible {
+._teddy-top-row-buttons__track_1ogzx_4[data-color=purple] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):focus-visible, ._teddy-top-row-buttons__button_1ogzx_27[data-color=purple]:focus-visible {
   background-color: var(--teddy-color-background-interactive-primary);
 }
-._teddy-top-row-buttons__label_1ytqf_109 {
+._teddy-top-row-buttons__label_1ogzx_109 {
   white-space: nowrap;
 }
-._teddy-top-row-buttons__emoji_1ytqf_112 {
+._teddy-top-row-buttons__emoji_1ogzx_112 {
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=10"
   },
   "private": false,
-  "version": "0.7.61",
+  "version": "0.7.63",
   "sideEffects": [
     "**/*.css",
     "**/*.svg"