@telia/teddy 0.0.58 → 0.0.60

package/dist/components/card/card-button.cjs

@@ -15,7 +15,7 @@ function getButtonVariant(variant) {
   }
 }
 const Button = React.forwardRef(
-  ({ className, iconOnly = false, ...props }, forwardRef) => {
+  ({ className, iconOnly, ...props }, forwardRef) => {
     const context = React.useContext(components_card_card.RootContext);
     const classes = clsx(
       [components_card_card.styles[`${components_card_card.rootClassName}__button`]],

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

@@ -1,35 +1,9 @@
 import { default as React } from 'react';
-import { Button as PrimitiveButton } from '../button';
+import { ButtonProps as PrimitiveButtonProps } from '../button';
 
-export type ButtonProps = Omit<React.ComponentPropsWithoutRef<typeof PrimitiveButton>, 'variant'> & {
-    variant?: React.ComponentPropsWithoutRef<typeof PrimitiveButton>['variant'];
-};
+export type ButtonProps = PrimitiveButtonProps;
 /**
  * The button element is used when you want a trigger in the card
  * When this card button element is used, the entire card is clickable
  */
-export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
-    display?: import('../../utils/generate-styling').DisplayChildren | undefined;
-} & {
-    asChild?: boolean | undefined;
-    loading?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-    size?: "sm" | "md" | "lg" | undefined;
-    variant?: "text" | "text-negative" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
-} & {
-    iconOnly: true;
-    "aria-label": string;
-} & React.RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
-    display?: import('../../utils/generate-styling').DisplayChildren | undefined;
-} & {
-    asChild?: boolean | undefined;
-    loading?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-    size?: "sm" | "md" | "lg" | undefined;
-    variant?: "text" | "text-negative" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
-} & {
-    iconOnly?: false | undefined;
-    "aria-label"?: string | undefined;
-} & React.RefAttributes<HTMLButtonElement>, "ref">, "variant"> & {
-    variant?: React.ComponentPropsWithoutRef<typeof PrimitiveButton>['variant'];
-} & React.RefAttributes<HTMLButtonElement>>;
+export declare const Button: React.ForwardRefExoticComponent<PrimitiveButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/card/card-button.js

@@ -13,7 +13,7 @@ function getButtonVariant(variant) {
   }
 }
 const Button = React__default.forwardRef(
-  ({ className, iconOnly = false, ...props }, forwardRef) => {
+  ({ className, iconOnly, ...props }, forwardRef) => {
     const context = React__default.useContext(RootContext);
     const classes = clsx(
       [styles[`${rootClassName}__button`]],

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

@@ -10,31 +10,7 @@ import { FooterProps } from './card-footer';
 
 export declare const Card: import('react').ForwardRefExoticComponent<RootProps & import('react').RefAttributes<HTMLDivElement>> & {
     Heading: import('react').ForwardRefExoticComponent<HeadingProps & import('react').RefAttributes<HTMLHeadingElement>>;
-    Button: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
-        display?: import('../../utils/generate-styling').DisplayChildren | undefined;
-    } & {
-        asChild?: boolean | undefined;
-        loading?: boolean | undefined;
-        fullWidth?: boolean | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
-        variant?: "text" | "text-negative" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
-    } & {
-        iconOnly: true;
-        "aria-label": string;
-    } & import('react').RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
-        display?: import('../../utils/generate-styling').DisplayChildren | undefined;
-    } & {
-        asChild?: boolean | undefined;
-        loading?: boolean | undefined;
-        fullWidth?: boolean | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
-        variant?: "text" | "text-negative" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
-    } & {
-        iconOnly?: false | undefined;
-        "aria-label"?: string | undefined;
-    } & import('react').RefAttributes<HTMLButtonElement>, "ref">, "variant"> & {
-        variant?: "text" | "text-negative" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
-    } & import('react').RefAttributes<HTMLButtonElement>>;
+    Button: import('react').ForwardRefExoticComponent<import('..').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
     Content: import('react').ForwardRefExoticComponent<ContentProps & import('react').RefAttributes<HTMLDivElement>>;
     Illustration: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         inset?: "all" | "top" | "bottom" | "right" | "left" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-right-left" | "bottom-left-right" | "top-bottom" | "left-right" | undefined;

package/dist/components/icon/icon.cjs

@@ -4,15 +4,15 @@ const jsxRuntime = require("react/jsx-runtime");
 const iconsHref = require("../../assets/sprite.269ba410-teddy.svg");
 const clsx = require("clsx");
 const styles = {
-  "teddy-icon": "_teddy-icon_1rwgf_2",
-  "teddy-icon--font": "_teddy-icon--font_1rwgf_7",
-  "teddy-icon--xxs": "_teddy-icon--xxs_1rwgf_11",
-  "teddy-icon--xs": "_teddy-icon--xs_1rwgf_15",
-  "teddy-icon--sm": "_teddy-icon--sm_1rwgf_19",
-  "teddy-icon--md": "_teddy-icon--md_1rwgf_23",
-  "teddy-icon--lg": "_teddy-icon--lg_1rwgf_27",
-  "teddy-icon--xl": "_teddy-icon--xl_1rwgf_31",
-  "teddy-icon-with-children": "_teddy-icon-with-children_1rwgf_35"
+  "teddy-icon": "_teddy-icon_1ur3a_2",
+  "teddy-icon--font": "_teddy-icon--font_1ur3a_8",
+  "teddy-icon--xxs": "_teddy-icon--xxs_1ur3a_12",
+  "teddy-icon--xs": "_teddy-icon--xs_1ur3a_16",
+  "teddy-icon--sm": "_teddy-icon--sm_1ur3a_20",
+  "teddy-icon--md": "_teddy-icon--md_1ur3a_24",
+  "teddy-icon--lg": "_teddy-icon--lg_1ur3a_28",
+  "teddy-icon--xl": "_teddy-icon--xl_1ur3a_32",
+  "teddy-icon-with-children": "_teddy-icon-with-children_1ur3a_36"
 };
 const rootClassName = "teddy-icon";
 const rootClassNameWithChildren = `${rootClassName}-with-children`;

package/dist/components/icon/icon.js

@@ -2,15 +2,15 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import iconsHref from "../../assets/sprite.269ba410-teddy.svg";
 import clsx from "clsx";
 const styles = {
-  "teddy-icon": "_teddy-icon_1rwgf_2",
-  "teddy-icon--font": "_teddy-icon--font_1rwgf_7",
-  "teddy-icon--xxs": "_teddy-icon--xxs_1rwgf_11",
-  "teddy-icon--xs": "_teddy-icon--xs_1rwgf_15",
-  "teddy-icon--sm": "_teddy-icon--sm_1rwgf_19",
-  "teddy-icon--md": "_teddy-icon--md_1rwgf_23",
-  "teddy-icon--lg": "_teddy-icon--lg_1rwgf_27",
-  "teddy-icon--xl": "_teddy-icon--xl_1rwgf_31",
-  "teddy-icon-with-children": "_teddy-icon-with-children_1rwgf_35"
+  "teddy-icon": "_teddy-icon_1ur3a_2",
+  "teddy-icon--font": "_teddy-icon--font_1ur3a_8",
+  "teddy-icon--xxs": "_teddy-icon--xxs_1ur3a_12",
+  "teddy-icon--xs": "_teddy-icon--xs_1ur3a_16",
+  "teddy-icon--sm": "_teddy-icon--sm_1ur3a_20",
+  "teddy-icon--md": "_teddy-icon--md_1ur3a_24",
+  "teddy-icon--lg": "_teddy-icon--lg_1ur3a_28",
+  "teddy-icon--xl": "_teddy-icon--xl_1ur3a_32",
+  "teddy-icon-with-children": "_teddy-icon-with-children_1ur3a_36"
 };
 const rootClassName = "teddy-icon";
 const rootClassNameWithChildren = `${rootClassName}-with-children`;

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/notabene/notabene-root.cjs

@@ -3,17 +3,28 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
-const components_box_box = require("../box/box.cjs");
+const components_flex_flex = require("../flex/flex.cjs");
 const styles = {
-  "teddy-notabene": "_teddy-notabene_1kgqm_1",
-  "teddy-notabene__icon": "_teddy-notabene__icon_1kgqm_9",
-  "teddy-notabene__heading": "_teddy-notabene__heading_1kgqm_9"
+  "teddy-notabene": "_teddy-notabene_78ui9_1",
+  "teddy-notabene__icon": "_teddy-notabene__icon_78ui9_5",
+  "teddy-notabene__heading": "_teddy-notabene__heading_78ui9_5"
 };
 const rootClassName = "teddy-notabene";
 const Root = React.forwardRef(
   ({ children, className, ...props }, forwardRef) => {
     const classes = clsx([styles[`${rootClassName}`]], className);
-    return /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { ...props, ref: forwardRef, className: classes, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      components_flex_flex.Flex,
+      {
+        gap: { sm: "150", md: "300" },
+        direction: { sm: "column", md: "row" },
+        p: { sm: "300", md: "400" },
+        ...props,
+        ref: forwardRef,
+        className: classes,
+        children
+      }
+    );
   }
 );
 Root.displayName = "Root";

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-import { Box as PrimitiveBox } from '../box';
+import { Flex } from '../flex';
 
 export declare const rootClassName = "teddy-notabene";
-export type RootProps = Partial<React.ComponentPropsWithoutRef<typeof PrimitiveBox>>;
+export type RootProps = Partial<React.ComponentPropsWithoutRef<typeof Flex>>;
 export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,17 +1,28 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
-import { Box } from "../box/box.js";
+import { Flex } from "../flex/flex.js";
 const styles = {
-  "teddy-notabene": "_teddy-notabene_1kgqm_1",
-  "teddy-notabene__icon": "_teddy-notabene__icon_1kgqm_9",
-  "teddy-notabene__heading": "_teddy-notabene__heading_1kgqm_9"
+  "teddy-notabene": "_teddy-notabene_78ui9_1",
+  "teddy-notabene__icon": "_teddy-notabene__icon_78ui9_5",
+  "teddy-notabene__heading": "_teddy-notabene__heading_78ui9_5"
 };
 const rootClassName = "teddy-notabene";
 const Root = React__default.forwardRef(
   ({ children, className, ...props }, forwardRef) => {
     const classes = clsx([styles[`${rootClassName}`]], className);
-    return /* @__PURE__ */ jsx(Box, { ...props, ref: forwardRef, className: classes, children });
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        gap: { sm: "150", md: "300" },
+        direction: { sm: "column", md: "row" },
+        p: { sm: "300", md: "400" },
+        ...props,
+        ref: forwardRef,
+        className: classes,
+        children
+      }
+    );
   }
 );
 Root.displayName = "Root";

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/style.css

@@ -140,40 +140,41 @@
     color: inherit;
   }
 }@layer icon {
-  ._teddy-icon_1rwgf_2 {
+  ._teddy-icon_1ur3a_2 {
     display: inline;
     align-self: center;
     fill: currentColor;
+    flex-shrink: 0;
   }
-  ._teddy-icon--font_1rwgf_7 {
+  ._teddy-icon--font_1ur3a_8 {
     width: 1em;
     height: 1em;
   }
-  ._teddy-icon--xxs_1rwgf_11 {
+  ._teddy-icon--xxs_1ur3a_12 {
     width: var(--teddy-spacing-150);
     height: var(--teddy-spacing-150);
   }
-  ._teddy-icon--xs_1rwgf_15 {
+  ._teddy-icon--xs_1ur3a_16 {
     width: var(--teddy-spacing-200);
     height: var(--teddy-spacing-200);
   }
-  ._teddy-icon--sm_1rwgf_19 {
+  ._teddy-icon--sm_1ur3a_20 {
     width: var(--teddy-spacing-250);
     height: var(--teddy-spacing-250);
   }
-  ._teddy-icon--md_1rwgf_23 {
+  ._teddy-icon--md_1ur3a_24 {
     width: var(--teddy-spacing-300);
     height: var(--teddy-spacing-300);
   }
-  ._teddy-icon--lg_1rwgf_27 {
+  ._teddy-icon--lg_1ur3a_28 {
     width: var(--teddy-spacing-400);
     height: var(--teddy-spacing-400);
   }
-  ._teddy-icon--xl_1rwgf_31 {
+  ._teddy-icon--xl_1ur3a_32 {
     width: var(--teddy-spacing-600);
     height: var(--teddy-spacing-600);
   }
-  ._teddy-icon-with-children_1rwgf_35 {
+  ._teddy-icon-with-children_1ur3a_36 {
     display: inline-flex;
     align-items: center;
     font-family: var(--teddy-typography-family-default);
@@ -881,27 +882,16 @@
   0% {
     transform: translateX(-100%);
   }
-}._teddy-notabene_1kgqm_1 {
-  padding: var(--teddy-spacing-300);
-  display: flex;
-  flex-direction: column;
-  gap: var(--teddy-spacing-150);
+}._teddy-notabene_78ui9_1 {
   background-color: var(--teddy-color-background-status-warning);
   color: var(--teddy-color-text-default);
 }
-._teddy-notabene__icon_1kgqm_9, ._teddy-notabene__heading_1kgqm_9 {
+._teddy-notabene__icon_78ui9_5, ._teddy-notabene__heading_78ui9_5 {
   color: var(--teddy-color-orange-600);
   align-self: flex-start;
 }
-._teddy-notabene__icon_1kgqm_9 {
+._teddy-notabene__icon_78ui9_5 {
   flex-shrink: 0;
-}
-@media (min-width: 600px) {
-  ._teddy-notabene_1kgqm_1 {
-    padding: var(--teddy-spacing-400);
-    flex-direction: row;
-    gap: var(--teddy-spacing-300);
-  }
 }@layer heading {
   ._teddy-heading_r8os0_2 {
     color: var(--teddy-color-text-default);
@@ -1136,194 +1126,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.58",
+  "version": "0.0.60",
   "sideEffects": [
     "**/*.css"
   ],