@telia/teddy 0.0.57 → 0.0.59

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

@@ -95,11 +95,11 @@ function LoggedInContent() {
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(components_textSpacing_textSpacing.TextSpacing, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(components_tabs_index.Tabs.Content, { value: "private", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(components_heading_heading.Heading, { variant: "title-100", as: "h3", mb: "100", mt: "400", children: "Privat" }),
+          /* @__PURE__ */ jsxRuntime.jsx(components_heading_heading.Heading, { variant: "title-100", as: "h3", mb: "100", mt: "400", children: "Min Side" }),
           (_a = components_navigationMenu_globalNavigation_utils.MY_PAGE_LINKS.links) == null ? void 0 : _a.map((link) => /* @__PURE__ */ jsxRuntime.jsx(components_button_button.Button, { variant: "list-item", fullWidth: true, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.link, children: /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: link.icon, children: link.name }) }) }, link.link))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(components_tabs_index.Tabs.Content, { value: "business", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(components_heading_heading.Heading, { variant: "title-100", as: "h3", mb: "100", mt: "400", children: "Bedrift" }),
+          /* @__PURE__ */ jsxRuntime.jsx(components_heading_heading.Heading, { variant: "title-100", as: "h3", mb: "100", mt: "400", children: "Bedriftsportaler" }),
           components_navigationMenu_globalNavigation_utils.LOGGED_IN_LINKS_BUSINESS.map((link) => /* @__PURE__ */ jsxRuntime.jsx(components_button_button.Button, { variant: "list-item", fullWidth: true, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.link, children: /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: link.icon, children: link.name }) }) }, link.link))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(components_button_button.Button, { mt: "200", onClick: () => rootContext == null ? void 0 : rootContext.onLogoutClick(), variant: "secondary", children: /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "logout", children: "Logg ut" }) })
@@ -413,7 +413,7 @@ function Mobile(props) {
               value: rootContext.selectedDomainItem,
               onValueChange: (v) => rootContext.setSelectedDomainItem(v, true),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(components_tabs_index.Tabs.List, { children: components_navigationMenu_globalNavigation_utils.LINKS.map((link) => /* @__PURE__ */ jsxRuntime.jsx(components_tabs_index.Tabs.Trigger, { value: link.name, children: link.name }, link.name)) }),
+                /* @__PURE__ */ jsxRuntime.jsx(components_tabs_index.Tabs.List, { children: components_navigationMenu_globalNavigation_utils.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(components_box_box.Box, { mt: "400", children: components_navigationMenu_globalNavigation_utils.LINKS.map((link) => {
                   var _a;
                   return /* @__PURE__ */ jsxRuntime.jsx(components_tabs_index.Tabs.Content, { value: link.name, children: /* @__PURE__ */ jsxRuntime.jsx(

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

@@ -93,11 +93,11 @@ function LoggedInContent() {
       ] }),
       /* @__PURE__ */ jsxs(TextSpacing, { children: [
         /* @__PURE__ */ jsxs(Tabs.Content, { value: "private", children: [
-          /* @__PURE__ */ jsx(Heading, { variant: "title-100", as: "h3", mb: "100", mt: "400", children: "Privat" }),
+          /* @__PURE__ */ jsx(Heading, { variant: "title-100", as: "h3", mb: "100", mt: "400", children: "Min Side" }),
           (_a = MY_PAGE_LINKS.links) == null ? void 0 : _a.map((link) => /* @__PURE__ */ jsx(Button, { variant: "list-item", fullWidth: true, asChild: true, children: /* @__PURE__ */ jsx("a", { href: link.link, children: /* @__PURE__ */ jsx(Icon, { name: link.icon, children: link.name }) }) }, link.link))
         ] }),
         /* @__PURE__ */ jsxs(Tabs.Content, { value: "business", children: [
-          /* @__PURE__ */ jsx(Heading, { variant: "title-100", as: "h3", mb: "100", mt: "400", children: "Bedrift" }),
+          /* @__PURE__ */ jsx(Heading, { variant: "title-100", as: "h3", mb: "100", mt: "400", children: "Bedriftsportaler" }),
           LOGGED_IN_LINKS_BUSINESS.map((link) => /* @__PURE__ */ jsx(Button, { variant: "list-item", fullWidth: true, asChild: true, children: /* @__PURE__ */ jsx("a", { href: link.link, children: /* @__PURE__ */ jsx(Icon, { name: link.icon, children: link.name }) }) }, link.link))
         ] }),
         /* @__PURE__ */ jsx(Button, { mt: "200", onClick: () => rootContext == null ? void 0 : rootContext.onLogoutClick(), variant: "secondary", children: /* @__PURE__ */ jsx(Icon, { name: "logout", children: "Logg ut" }) })
@@ -411,7 +411,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, { value: link.name, children: link.name }, link.name)) }),
+                /* @__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(Box, { mt: "400", children: LINKS.map((link) => {
                   var _a;
                   return /* @__PURE__ */ jsx(Tabs.Content, { value: link.name, children: /* @__PURE__ */ jsx(

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

@@ -16,7 +16,7 @@ const MY_PAGE_LINKS = {
   links: [
     {
       name: "Hjem",
-      link: "/minside",
+      link: "/minside/hjem",
       appKey: APP_KEYS["my-pages"],
       icon: "home"
     },

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

@@ -23,7 +23,7 @@ export declare const MY_PAGE_LINKS: {
     readonly appKey: "my-pages";
     readonly links: [{
         readonly name: "Hjem";
-        readonly link: "/minside";
+        readonly link: "/minside/hjem";
         readonly appKey: "my-pages";
         readonly icon: "home";
     }, {
@@ -89,7 +89,7 @@ export declare const LOGGED_IN_LINKS: [{
     readonly appKey: "my-pages";
     readonly links: [{
         readonly name: "Hjem";
-        readonly link: "/minside";
+        readonly link: "/minside/hjem";
         readonly appKey: "my-pages";
         readonly icon: "home";
     }, {

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

@@ -14,7 +14,7 @@ const MY_PAGE_LINKS = {
   links: [
     {
       name: "Hjem",
-      link: "/minside",
+      link: "/minside/hjem",
       appKey: APP_KEYS["my-pages"],
       icon: "home"
     },

package/dist/components/scroll-area/scroll-area-bar.cjs

@@ -27,14 +27,14 @@ function _interopNamespaceDefault(e) {
 }
 const ScrollAreaPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(ScrollAreaPrimitive);
 const styles = {
-  "teddy-scroll-area": "_teddy-scroll-area_1y01l_3",
-  "teddy-scroll-area__viewport": "_teddy-scroll-area__viewport_1y01l_7",
-  "teddy-scroll-area__scrollbar": "_teddy-scroll-area__scrollbar_1y01l_13",
-  "teddy-scroll-area__scrollbar--hidden": "_teddy-scroll-area__scrollbar--hidden_1y01l_34",
-  "teddy-scroll-area__thumb": "_teddy-scroll-area__thumb_1y01l_47",
-  "teddy-scroll-area__corner": "_teddy-scroll-area__corner_1y01l_64",
-  "teddy-scroll-area__button": "_teddy-scroll-area__button_1y01l_67",
-  "teddy-scroll-area__button--hidden": "_teddy-scroll-area__button--hidden_1y01l_95"
+  "teddy-scroll-area": "_teddy-scroll-area_1r6mf_1",
+  "teddy-scroll-area__viewport": "_teddy-scroll-area__viewport_1r6mf_5",
+  "teddy-scroll-area__scrollbar": "_teddy-scroll-area__scrollbar_1r6mf_11",
+  "teddy-scroll-area__scrollbar--hidden": "_teddy-scroll-area__scrollbar--hidden_1r6mf_32",
+  "teddy-scroll-area__thumb": "_teddy-scroll-area__thumb_1r6mf_45",
+  "teddy-scroll-area__corner": "_teddy-scroll-area__corner_1r6mf_62",
+  "teddy-scroll-area__button": "_teddy-scroll-area__button_1r6mf_65",
+  "teddy-scroll-area__button--hidden": "_teddy-scroll-area__button--hidden_1r6mf_93"
 };
 const Scrollbar = React.forwardRef(
   ({ className, ...props }, forwardRef) => {

package/dist/components/scroll-area/scroll-area-bar.js

@@ -8,14 +8,14 @@ import "../../assets/sprite.269ba410-teddy.svg";
 import { Icon } from "../icon/icon.js";
 import { Slottable } from "@radix-ui/react-slot";
 const styles = {
-  "teddy-scroll-area": "_teddy-scroll-area_1y01l_3",
-  "teddy-scroll-area__viewport": "_teddy-scroll-area__viewport_1y01l_7",
-  "teddy-scroll-area__scrollbar": "_teddy-scroll-area__scrollbar_1y01l_13",
-  "teddy-scroll-area__scrollbar--hidden": "_teddy-scroll-area__scrollbar--hidden_1y01l_34",
-  "teddy-scroll-area__thumb": "_teddy-scroll-area__thumb_1y01l_47",
-  "teddy-scroll-area__corner": "_teddy-scroll-area__corner_1y01l_64",
-  "teddy-scroll-area__button": "_teddy-scroll-area__button_1y01l_67",
-  "teddy-scroll-area__button--hidden": "_teddy-scroll-area__button--hidden_1y01l_95"
+  "teddy-scroll-area": "_teddy-scroll-area_1r6mf_1",
+  "teddy-scroll-area__viewport": "_teddy-scroll-area__viewport_1r6mf_5",
+  "teddy-scroll-area__scrollbar": "_teddy-scroll-area__scrollbar_1r6mf_11",
+  "teddy-scroll-area__scrollbar--hidden": "_teddy-scroll-area__scrollbar--hidden_1r6mf_32",
+  "teddy-scroll-area__thumb": "_teddy-scroll-area__thumb_1r6mf_45",
+  "teddy-scroll-area__corner": "_teddy-scroll-area__corner_1r6mf_62",
+  "teddy-scroll-area__button": "_teddy-scroll-area__button_1r6mf_65",
+  "teddy-scroll-area__button--hidden": "_teddy-scroll-area__button--hidden_1r6mf_93"
 };
 const Scrollbar = React__default.forwardRef(
   ({ className, ...props }, forwardRef) => {

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

@@ -24,11 +24,11 @@ function _interopNamespaceDefault(e) {
 }
 const TabsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TabsPrimitive);
 const styles = {
-  "teddy-tabs__list": "_teddy-tabs__list_1a33o_3",
-  "teddy-tabs--full-width": "_teddy-tabs--full-width_1a33o_30",
-  "teddy-tabs__content": "_teddy-tabs__content_1a33o_33",
-  "teddy-tabs__trigger": "_teddy-tabs__trigger_1a33o_37",
-  "teddy-tabs__scroll-button": "_teddy-tabs__scroll-button_1a33o_52"
+  "teddy-tabs__list": "_teddy-tabs__list_1jnm3_1",
+  "teddy-tabs--full-width": "_teddy-tabs--full-width_1jnm3_28",
+  "teddy-tabs__content": "_teddy-tabs__content_1jnm3_31",
+  "teddy-tabs__trigger": "_teddy-tabs__trigger_1jnm3_35",
+  "teddy-tabs__scroll-button": "_teddy-tabs__scroll-button_1jnm3_50"
 };
 const rootClassName = "teddy-tabs";
 const RootContext = React.createContext(void 0);

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

@@ -5,11 +5,11 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
 const styles = {
-  "teddy-tabs__list": "_teddy-tabs__list_1a33o_3",
-  "teddy-tabs--full-width": "_teddy-tabs--full-width_1a33o_30",
-  "teddy-tabs__content": "_teddy-tabs__content_1a33o_33",
-  "teddy-tabs__trigger": "_teddy-tabs__trigger_1a33o_37",
-  "teddy-tabs__scroll-button": "_teddy-tabs__scroll-button_1a33o_52"
+  "teddy-tabs__list": "_teddy-tabs__list_1jnm3_1",
+  "teddy-tabs--full-width": "_teddy-tabs--full-width_1jnm3_28",
+  "teddy-tabs__content": "_teddy-tabs__content_1jnm3_31",
+  "teddy-tabs__trigger": "_teddy-tabs__trigger_1jnm3_35",
+  "teddy-tabs__scroll-button": "_teddy-tabs__scroll-button_1jnm3_50"
 };
 const rootClassName = "teddy-tabs";
 const RootContext = React__default.createContext(void 0);

package/dist/components/tabs/tabs-scroll.cjs

@@ -2,15 +2,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const clsx = require("clsx");
-const components_tabs_tabsRoot = require("./tabs-root.cjs");
 const components_scrollArea_index = require("../scroll-area/index.cjs");
 const components_tabs_tabsScrollButton = require("./tabs-scroll-button.cjs");
 const ScrollContext = React.createContext(false);
 const Scroll = React.forwardRef(
-  ({ className, children, ...props }, forwardRef) => {
-    const classes = clsx([components_tabs_tabsRoot.styles[`${components_tabs_tabsRoot.rootClassName}__scroll`]], className);
-    return /* @__PURE__ */ jsxRuntime.jsx(ScrollContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsxs(components_scrollArea_index.ScrollArea, { ...props, className: classes, ref: forwardRef, children: [
+  ({ children, ...props }, forwardRef) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(ScrollContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsxs(components_scrollArea_index.ScrollArea, { ...props, ref: forwardRef, children: [
       /* @__PURE__ */ jsxRuntime.jsx(components_tabs_tabsScrollButton.ScrollButton, { direction: "left" }),
       /* @__PURE__ */ jsxRuntime.jsx(components_tabs_tabsScrollButton.ScrollButton, { direction: "right" }),
       children

package/dist/components/tabs/tabs-scroll.js

@@ -1,14 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React__default from "react";
-import clsx from "clsx";
-import { s as styles, rootClassName } from "./tabs-root.js";
 import { ScrollArea } from "../scroll-area/index.js";
 import { ScrollButton } from "./tabs-scroll-button.js";
 const ScrollContext = React__default.createContext(false);
 const Scroll = React__default.forwardRef(
-  ({ className, children, ...props }, forwardRef) => {
-    const classes = clsx([styles[`${rootClassName}__scroll`]], className);
-    return /* @__PURE__ */ jsx(ScrollContext.Provider, { value: true, children: /* @__PURE__ */ jsxs(ScrollArea, { ...props, className: classes, ref: forwardRef, children: [
+  ({ children, ...props }, forwardRef) => {
+    return /* @__PURE__ */ jsx(ScrollContext.Provider, { value: true, children: /* @__PURE__ */ jsxs(ScrollArea, { ...props, ref: forwardRef, children: [
       /* @__PURE__ */ jsx(ScrollButton, { direction: "left" }),
       /* @__PURE__ */ jsx(ScrollButton, { direction: "right" }),
       children

package/dist/components/tabs/tabs-trigger.cjs

@@ -26,15 +26,15 @@ function _interopNamespaceDefault(e) {
 }
 const TabsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TabsPrimitive);
 const Trigger = React.forwardRef(
-  ({ className, ...props }, forwardRef) => {
+  ({ className, asChild, children, ...props }, forwardRef) => {
     const classes = clsx([components_tabs_tabsRoot.styles[`${components_tabs_tabsRoot.rootClassName}__trigger`]], className);
     const innerElementRef = React.useRef(null);
+    const ref = utils_composeRefs.useComposedRefs(forwardRef, innerElementRef);
     const context = React.useContext(components_tabs_tabsRoot.RootContext);
     const isFirstRender = React.useRef(true);
     React.useEffect(() => {
       if ((context == null ? void 0 : context.value) === props.value && innerElementRef.current) {
         const newTab = innerElementRef.current;
-        context == null ? void 0 : context.setActiveElement(newTab);
         const tabsContainer = context == null ? void 0 : context.listElement.current;
         if (!newTab || !tabsContainer)
           return;
@@ -47,9 +47,9 @@ const Trigger = React.forwardRef(
       }
     }, [context, props.value]);
     if (context == null ? void 0 : context.snapCenter) {
-      return /* @__PURE__ */ jsxRuntime.jsx(components_scrollArea_index.ScrollArea.Item, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(components_button_button.Button, { variant: "primary", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, { ...props, ref: utils_composeRefs.composeRefs(forwardRef, innerElementRef), className: classes }) }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(components_scrollArea_index.ScrollArea.Item, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, { ...props, asChild: true, ref, className: classes, children: /* @__PURE__ */ jsxRuntime.jsx(components_button_button.Button, { variant: "primary", asChild, children }) }) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(components_button_button.Button, { variant: "primary", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, { ...props, ref: utils_composeRefs.composeRefs(forwardRef, innerElementRef), className: classes }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, { ...props, asChild: true, ref, className: classes, children: /* @__PURE__ */ jsxRuntime.jsx(components_button_button.Button, { variant: "primary", asChild, children }) });
   }
 );
 Trigger.displayName = "Trigger";

package/dist/components/tabs/tabs-trigger.js

@@ -5,17 +5,17 @@ import clsx from "clsx";
 import { s as styles, rootClassName, RootContext } from "./tabs-root.js";
 import { ScrollArea } from "../scroll-area/index.js";
 import { Button } from "../button/button.js";
-import { composeRefs } from "../../utils/composeRefs.js";
+import { useComposedRefs } from "../../utils/composeRefs.js";
 const Trigger = React__default.forwardRef(
-  ({ className, ...props }, forwardRef) => {
+  ({ className, asChild, children, ...props }, forwardRef) => {
     const classes = clsx([styles[`${rootClassName}__trigger`]], className);
     const innerElementRef = React__default.useRef(null);
+    const ref = useComposedRefs(forwardRef, innerElementRef);
     const context = React__default.useContext(RootContext);
     const isFirstRender = React__default.useRef(true);
     React__default.useEffect(() => {
       if ((context == null ? void 0 : context.value) === props.value && innerElementRef.current) {
         const newTab = innerElementRef.current;
-        context == null ? void 0 : context.setActiveElement(newTab);
         const tabsContainer = context == null ? void 0 : context.listElement.current;
         if (!newTab || !tabsContainer)
           return;
@@ -28,9 +28,9 @@ const Trigger = React__default.forwardRef(
       }
     }, [context, props.value]);
     if (context == null ? void 0 : context.snapCenter) {
-      return /* @__PURE__ */ jsx(ScrollArea.Item, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "primary", asChild: true, children: /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { ...props, ref: composeRefs(forwardRef, innerElementRef), className: classes }) }) });
+      return /* @__PURE__ */ jsx(ScrollArea.Item, { asChild: true, children: /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { ...props, asChild: true, ref, className: classes, children: /* @__PURE__ */ jsx(Button, { variant: "primary", asChild, children }) }) });
     }
-    return /* @__PURE__ */ jsx(Button, { variant: "primary", asChild: true, children: /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { ...props, ref: composeRefs(forwardRef, innerElementRef), className: classes }) });
+    return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { ...props, asChild: true, ref, className: classes, children: /* @__PURE__ */ jsx(Button, { variant: "primary", asChild, children }) });
   }
 );
 Trigger.displayName = "Trigger";

package/dist/style.css

@@ -1136,194 +1136,188 @@
   ._teddy-list__illustration_1fpoz_8 {
     align-self: flex-start;
   }
-}@layer button, scroll-area;
-@layer scroll-area {
-  ._teddy-scroll-area_1y01l_3 {
-    position: relative;
-    overflow: hidden;
-  }
-  ._teddy-scroll-area__viewport_1y01l_7 {
-    height: 100%;
-    width: 100%;
-    border-radius: inherit;
-    display: grid;
-  }
-  ._teddy-scroll-area__scrollbar_1y01l_13 {
-    display: flex;
-    /* ensures no selection */
-    user-select: none;
-    /* disable browser handling of all panning and zooming gestures on touch devices */
-    touch-action: none;
-    padding: 1px;
-    background: var(--teddy-color-border-weak);
-    transition: background-color var(--teddy-motion-duration-200) ease-out;
-    border-radius: var(--teddy-border-radius-full);
-  }
-  ._teddy-scroll-area__scrollbar_1y01l_13[data-orientation=vertical] {
-    width: var(--teddy-border-width-lg);
-  }
-  ._teddy-scroll-area__scrollbar_1y01l_13[data-orientation=horizontal] {
-    flex-direction: column;
-    height: var(--teddy-border-width-lg);
-  }
-  ._teddy-scroll-area__scrollbar_1y01l_13:hover {
-    background-color: var(--teddy-color-transparent-black-200);
-  }
-  ._teddy-scroll-area__scrollbar--hidden_1y01l_34 {
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-  ._teddy-scroll-area__scrollbar--hidden_1y01l_34:not(caption) {
-    position: absolute;
-  }
-  ._teddy-scroll-area__thumb_1y01l_47 {
-    flex: 1;
-    background: var(--teddy-color-border-strong);
-    border-radius: var(--teddy-border-radius-full);
-    position: relative;
-  }
-  ._teddy-scroll-area__thumb_1y01l_47::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 100%;
-    height: 100%;
-    min-width: 44px;
-    min-height: 44px;
-  }
-  ._teddy-scroll-area__corner_1y01l_64 {
-    background: var(--teddy-color-border-medium);
-  }
-  ._teddy-scroll-area__button_1y01l_67 {
-    position: absolute;
-  }
-  @media (prefers-reduced-motion: no-preference) {
-    ._teddy-scroll-area__button_1y01l_67 {
-      transition: opacity var(--teddy-motion-duration-300), transform var(--teddy-motion-duration-300);
-    }
-  }
-  ._teddy-scroll-area__button_1y01l_67[data-direction=left] {
-    left: 0;
-    top: 50%;
-    transform: translate(0, -50%);
-  }
-  ._teddy-scroll-area__button_1y01l_67[data-direction=right] {
-    right: 0;
-    top: 50%;
-    transform: translate(0, -50%);
-  }
-  ._teddy-scroll-area__button_1y01l_67[data-direction=up] {
-    top: 0;
-    left: 50%;
-    transform: translate(-50%, 0);
-  }
-  ._teddy-scroll-area__button_1y01l_67[data-direction=down] {
-    bottom: 0;
-    left: 50%;
-    transform: translate(-50%, 0);
-  }
-  ._teddy-scroll-area__button--hidden_1y01l_95 {
-    opacity: 0;
-  }
-  ._teddy-scroll-area__button--hidden_1y01l_95[data-direction=left] {
-    transform: translate(-100%, -50%);
-  }
-  ._teddy-scroll-area__button--hidden_1y01l_95[data-direction=right] {
-    transform: translate(100%, -50%);
-  }
-  ._teddy-scroll-area__button--hidden_1y01l_95[data-direction=up] {
-    transform: translate(-50%, -100%);
-  }
-  ._teddy-scroll-area__button--hidden_1y01l_95[data-direction=down] {
-    transform: translate(-50%, 100%);
-  }
-}@layer button, scroll-area, tabs;
-@layer tabs {
-  ._teddy-tabs__list_1a33o_3 {
-    display: flex;
-    max-width: fit-content;
-    background-color: var(--teddy-color-background-secondary);
-    border-radius: var(--teddy-border-radius-full);
-    padding: var(--teddy-spacing-50);
-    position: relative;
-  }
-  ._teddy-tabs__list_1a33o_3::before {
-    content: "";
-    position: absolute;
-    inset: var(--teddy-spacing-50);
-    inset: 0;
-    margin: var(--teddy-spacing-50) 0;
-    scale: var(--_width, 0) 1;
-    translate: var(--_left, 0) 0;
-    transform-origin: left;
-    background: var(--teddy-color-background-interactive-primary);
-    border-radius: calc(99vmin / var(--_width, 0.125))/99vmin;
-  }
-  @media (prefers-reduced-motion: no-preference) {
-    ._teddy-tabs__list_1a33o_3::before {
-      transition: border-radius, scale, translate;
-      transition-timing-function: var(--teddy-motion-easing-ease-in-out);
-      transition-duration: var(--_duration, 0);
-    }
-  }
-  ._teddy-tabs--full-width_1a33o_30 ._teddy-tabs__list_1a33o_3 {
-    max-width: initial;
-  }
-  ._teddy-tabs__content_1a33o_33:focus-visible {
-    outline: solid var(--teddy-border-width-sm) var(--teddy-color-border-interactive-focus);
-    outline-offset: var(--teddy-spacing-25);
-  }
-  ._teddy-tabs__trigger_1a33o_37 {
-    flex: 1 0 auto;
-    min-width: 3rem;
-    color: var(--teddy-color-text-interactive-primary);
-    background-color: var(--teddy-color-background-interactive-transparent);
-    padding: calc(var(--teddy-spacing-100) + var(--teddy-spacing-25)) var(--teddy-spacing-200);
-    line-height: var(--teddy-typography-line-height-100);
-    white-space: nowrap;
-    cursor: pointer;
-    transition: color calc(var(--_duration, 0)) var(--teddy-motion-easing-ease-in-out);
-  }
-  ._teddy-tabs__trigger_1a33o_37[data-state=active] {
-    color: var(--teddy-color-text-interactive-on-primary);
-    cursor: default;
-  }
-  ._teddy-tabs__scroll-button_1a33o_52 {
-    background-color: var(--teddy-color-background-secondary);
-    color: var(--teddy-color-text-default);
-    z-index: 1;
-  }
-  ._teddy-tabs__scroll-button_1a33o_52:hover {
-    background-color: var(--teddy-color-background-interactive-transparent-hover);
-  }
-  ._teddy-tabs__scroll-button_1a33o_52:active {
-    background-color: var(--teddy-color-background-interactive-transparent-active);
-  }
-  ._teddy-tabs__scroll-button_1a33o_52::before {
-    z-index: 1;
-  }
-  ._teddy-tabs__scroll-button_1a33o_52::after {
-    content: "";
-    top: 0;
-    left: 100%;
-    bottom: 0;
-    position: absolute;
-    width: 1rem;
-    background: linear-gradient(90deg, var(--teddy-color-background-secondary) 0%, var(--teddy-color-functional-transparent) 100%);
+}._teddy-scroll-area_1r6mf_1 {
+  position: relative;
+  overflow: hidden;
+}
+._teddy-scroll-area__viewport_1r6mf_5 {
+  height: 100%;
+  width: 100%;
+  border-radius: inherit;
+  display: grid;
+}
+._teddy-scroll-area__scrollbar_1r6mf_11 {
+  display: flex;
+  /* ensures no selection */
+  user-select: none;
+  /* disable browser handling of all panning and zooming gestures on touch devices */
+  touch-action: none;
+  padding: 1px;
+  background: var(--teddy-color-border-weak);
+  transition: background-color var(--teddy-motion-duration-200) ease-out;
+  border-radius: var(--teddy-border-radius-full);
+}
+._teddy-scroll-area__scrollbar_1r6mf_11[data-orientation=vertical] {
+  width: var(--teddy-border-width-lg);
+}
+._teddy-scroll-area__scrollbar_1r6mf_11[data-orientation=horizontal] {
+  flex-direction: column;
+  height: var(--teddy-border-width-lg);
+}
+._teddy-scroll-area__scrollbar_1r6mf_11:hover {
+  background-color: var(--teddy-color-transparent-black-200);
+}
+._teddy-scroll-area__scrollbar--hidden_1r6mf_32 {
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+._teddy-scroll-area__scrollbar--hidden_1r6mf_32:not(caption) {
+  position: absolute;
+}
+._teddy-scroll-area__thumb_1r6mf_45 {
+  flex: 1;
+  background: var(--teddy-color-border-strong);
+  border-radius: var(--teddy-border-radius-full);
+  position: relative;
+}
+._teddy-scroll-area__thumb_1r6mf_45::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  min-width: 44px;
+  min-height: 44px;
+}
+._teddy-scroll-area__corner_1r6mf_62 {
+  background: var(--teddy-color-border-medium);
+}
+._teddy-scroll-area__button_1r6mf_65 {
+  position: absolute;
+}
+@media (prefers-reduced-motion: no-preference) {
+  ._teddy-scroll-area__button_1r6mf_65 {
+    transition: opacity var(--teddy-motion-duration-300), transform var(--teddy-motion-duration-300);
   }
-  ._teddy-tabs__scroll-button_1a33o_52[data-direction=right]::after {
-    left: auto;
-    right: 100%;
-    transform: rotate(180deg);
+}
+._teddy-scroll-area__button_1r6mf_65[data-direction=left] {
+  left: 0;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+._teddy-scroll-area__button_1r6mf_65[data-direction=right] {
+  right: 0;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+._teddy-scroll-area__button_1r6mf_65[data-direction=up] {
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+._teddy-scroll-area__button_1r6mf_65[data-direction=down] {
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+._teddy-scroll-area__button--hidden_1r6mf_93 {
+  opacity: 0;
+}
+._teddy-scroll-area__button--hidden_1r6mf_93[data-direction=left] {
+  transform: translate(-100%, -50%);
+}
+._teddy-scroll-area__button--hidden_1r6mf_93[data-direction=right] {
+  transform: translate(100%, -50%);
+}
+._teddy-scroll-area__button--hidden_1r6mf_93[data-direction=up] {
+  transform: translate(-50%, -100%);
+}
+._teddy-scroll-area__button--hidden_1r6mf_93[data-direction=down] {
+  transform: translate(-50%, 100%);
+}._teddy-tabs__list_1jnm3_1 {
+  display: flex;
+  max-width: fit-content;
+  background-color: var(--teddy-color-background-secondary);
+  border-radius: var(--teddy-border-radius-full);
+  padding: var(--teddy-spacing-50);
+  position: relative;
+}
+._teddy-tabs__list_1jnm3_1::before {
+  content: "";
+  position: absolute;
+  inset: var(--teddy-spacing-50);
+  inset: 0;
+  margin: var(--teddy-spacing-50) 0;
+  scale: var(--_width, 0) 1;
+  translate: var(--_left, 0) 0;
+  transform-origin: left;
+  background: var(--teddy-color-background-interactive-primary);
+  border-radius: calc(99vmin / var(--_width, 0.125))/99vmin;
+}
+@media (prefers-reduced-motion: no-preference) {
+  ._teddy-tabs__list_1jnm3_1::before {
+    transition: border-radius, scale, translate;
+    transition-timing-function: var(--teddy-motion-easing-ease-in-out);
+    transition-duration: var(--_duration, 0);
   }
+}
+._teddy-tabs--full-width_1jnm3_28 ._teddy-tabs__list_1jnm3_1 {
+  max-width: initial;
+}
+._teddy-tabs__content_1jnm3_31:focus-visible {
+  outline: solid var(--teddy-border-width-sm) var(--teddy-color-border-interactive-focus);
+  outline-offset: var(--teddy-spacing-25);
+}
+._teddy-tabs__trigger_1jnm3_35 {
+  flex: 1 0 auto;
+  min-width: 3rem;
+  color: var(--teddy-color-text-interactive-primary);
+  background-color: var(--teddy-color-background-interactive-transparent);
+  padding: calc(var(--teddy-spacing-100) + var(--teddy-spacing-25)) var(--teddy-spacing-200);
+  line-height: var(--teddy-typography-line-height-100);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color calc(var(--_duration, 0)) var(--teddy-motion-easing-ease-in-out);
+}
+._teddy-tabs__trigger_1jnm3_35[data-state=active] {
+  color: var(--teddy-color-text-interactive-on-primary);
+  cursor: default;
+}
+._teddy-tabs__scroll-button_1jnm3_50 {
+  background-color: var(--teddy-color-background-secondary);
+  color: var(--teddy-color-text-default);
+  z-index: 1;
+}
+._teddy-tabs__scroll-button_1jnm3_50:hover {
+  background-color: var(--teddy-color-background-interactive-transparent-hover);
+}
+._teddy-tabs__scroll-button_1jnm3_50:active {
+  background-color: var(--teddy-color-background-interactive-transparent-active);
+}
+._teddy-tabs__scroll-button_1jnm3_50::before {
+  z-index: 1;
+}
+._teddy-tabs__scroll-button_1jnm3_50::after {
+  content: "";
+  top: 0;
+  left: 100%;
+  bottom: 0;
+  position: absolute;
+  width: 1rem;
+  background: linear-gradient(90deg, var(--teddy-color-background-secondary) 0%, var(--teddy-color-functional-transparent) 100%);
+}
+._teddy-tabs__scroll-button_1jnm3_50[data-direction=right]::after {
+  left: auto;
+  right: 100%;
+  transform: rotate(180deg);
 }@layer reset, flex, button, link, heading, drawer;
 @keyframes _teddy-fade-in_jiyrh_1 {
   from {

package/package.json

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