@telia/teddy 0.0.25 → 0.0.27

package/dist/components/list/list.js

@@ -0,0 +1,52 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { Flex } from "../flex/flex.js";
+import { Slot } from "@radix-ui/react-slot";
+const styles = {
+  "teddy-list__illustration": "_teddy-list__illustration_7z0zv_1",
+  "teddy-list__illustration--icon": "_teddy-list__illustration--icon_7z0zv_5",
+  "teddy-list__illustration--icon-white": "_teddy-list__illustration--icon-white_7z0zv_11",
+  "teddy-list__illustration--icon-purple": "_teddy-list__illustration--icon-purple_7z0zv_14",
+  "teddy-list__illustration--icon-gray": "_teddy-list__illustration--icon-gray_7z0zv_18",
+  "teddy-list__illustration--icon-beige": "_teddy-list__illustration--icon-beige_7z0zv_21",
+  "teddy-list--vertical": "_teddy-list--vertical_7z0zv_24",
+  "teddy-list__item": "_teddy-list__item_7z0zv_24",
+  "teddy-list--horizontal": "_teddy-list--horizontal_7z0zv_27"
+};
+const rootClassName = "teddy-list";
+const RootContext = React__default.createContext(void 0);
+const Root = React__default.forwardRef(
+  ({ className, asChild, children, variant, layout = "vertical", ...props }, forwardRef) => {
+    const Comp = asChild ? Slot : "ul";
+    const classes = clsx(
+      [styles[`${rootClassName}`]],
+      {
+        [styles[`${rootClassName}--${layout}`]]: layout,
+        [styles[`${rootClassName}--${variant}`]]: variant
+      },
+      className
+    );
+    return /* @__PURE__ */ jsx(RootContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx(
+      Flex,
+      {
+        p: "0",
+        m: "0",
+        direction: layout === "vertical" ? "column" : { sm: "column", md: "row" },
+        gap: "300",
+        ...props,
+        ref: forwardRef,
+        className: classes,
+        asChild: true,
+        children: /* @__PURE__ */ jsx(Comp, { children })
+      }
+    ) });
+  }
+);
+Root.displayName = "List";
+export {
+  Root,
+  RootContext,
+  rootClassName,
+  styles as s
+};

package/dist/components/modal/modal.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const DrawerPrimitive = require("@radix-ui/react-dialog");
+require("../list/index.cjs");
 require("../scroll-area/index.cjs");
 require("../tabs/index.cjs");
 require("../drawer/index.cjs");
@@ -19,10 +20,12 @@ require("../toggle/toggle.cjs");
 require("../accordion/index.cjs");
 require("../link/link.cjs");
 require("../badge/badge.cjs");
+require("../badge/alert-badge.cjs");
+require("../badge/counter-badge.cjs");
 const components_button_button = require("../button/button.cjs");
 require("../field-error-text/field-error-text.cjs");
 require("../helper-text/helper-text.cjs");
-require("../../assets/sprite.5636ec8e-teddy.svg");
+require("../../assets/sprite.269ba410-teddy.svg");
 const components_icon_icon = require("../icon/icon.cjs");
 require("../input/index.cjs");
 require("../label/label.cjs");
@@ -53,20 +56,21 @@ function _interopNamespaceDefault(e) {
 }
 const DrawerPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(DrawerPrimitive);
 const styles = {
-  "teddy-modal__overlay": "_teddy-modal__overlay_vfo5b_17",
-  "teddy-modal__content": "_teddy-modal__content_vfo5b_29",
-  "teddy-modal__scroll": "_teddy-modal__scroll_vfo5b_47",
-  "teddy-modal__image": "_teddy-modal__image_vfo5b_51",
-  "teddy-modal__close--floating": "_teddy-modal__close--floating_vfo5b_61",
-  "teddy-modal__group": "_teddy-modal__group_vfo5b_66",
-  "teddy-modal__group--title": "_teddy-modal__group--title_vfo5b_70",
-  "teddy-modal__group--scroll": "_teddy-modal__group--scroll_vfo5b_76",
-  "teddy-modal__group--action": "_teddy-modal__group--action_vfo5b_85",
-  "modal-overlay-no-op": "_modal-overlay-no-op_vfo5b_1",
-  "teddy-fade-in": "_teddy-fade-in_vfo5b_1",
-  "teddy-fade-out": "_teddy-fade-out_vfo5b_1",
-  "modal-content-show": "_modal-content-show_vfo5b_1",
-  "modal-content-hide": "_modal-content-hide_vfo5b_1"
+  "teddy-modal__overlay": "_teddy-modal__overlay_3n21u_25",
+  "teddy-modal__content": "_teddy-modal__content_3n21u_37",
+  "teddy-modal__scroll": "_teddy-modal__scroll_3n21u_55",
+  "teddy-modal__image": "_teddy-modal__image_3n21u_59",
+  "teddy-modal__close--floating": "_teddy-modal__close--floating_3n21u_69",
+  "teddy-modal__group": "_teddy-modal__group_3n21u_74",
+  "teddy-modal__group--title": "_teddy-modal__group--title_3n21u_78",
+  "teddy-modal__group--scroll": "_teddy-modal__group--scroll_3n21u_84",
+  "teddy-modal__group--action": "_teddy-modal__group--action_3n21u_93",
+  "modal-overlay-no-op": "_modal-overlay-no-op_3n21u_1",
+  "teddy-fade-in": "_teddy-fade-in_3n21u_1",
+  "teddy-fade-out": "_teddy-fade-out_3n21u_1",
+  "modal-content-show": "_modal-content-show_3n21u_1",
+  "modal-content-hide": "_modal-content-hide_3n21u_1",
+  "teddy-overlay-no-op": "_teddy-overlay-no-op_3n21u_1"
 };
 const rootClassName = "teddy-modal";
 const RootContext = React.createContext({

package/dist/components/modal/modal.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React__default, { useEffect } from "react";
 import * as DrawerPrimitive from "@radix-ui/react-dialog";
+import "../list/index.js";
 import "../scroll-area/index.js";
 import "../tabs/index.js";
 import "../drawer/index.js";
@@ -17,10 +18,12 @@ import "../toggle/toggle.js";
 import "../accordion/index.js";
 import "../link/link.js";
 import "../badge/badge.js";
+import "../badge/alert-badge.js";
+import "../badge/counter-badge.js";
 import { Button } from "../button/button.js";
 import "../field-error-text/field-error-text.js";
 import "../helper-text/helper-text.js";
-import "../../assets/sprite.5636ec8e-teddy.svg";
+import "../../assets/sprite.269ba410-teddy.svg";
 import { Icon } from "../icon/icon.js";
 import "../input/index.js";
 import "../label/label.js";
@@ -34,20 +37,21 @@ import clsx from "clsx";
 import { Slot } from "@radix-ui/react-slot";
 import { composeRefs } from "../../utils/composeRefs.js";
 const styles = {
-  "teddy-modal__overlay": "_teddy-modal__overlay_vfo5b_17",
-  "teddy-modal__content": "_teddy-modal__content_vfo5b_29",
-  "teddy-modal__scroll": "_teddy-modal__scroll_vfo5b_47",
-  "teddy-modal__image": "_teddy-modal__image_vfo5b_51",
-  "teddy-modal__close--floating": "_teddy-modal__close--floating_vfo5b_61",
-  "teddy-modal__group": "_teddy-modal__group_vfo5b_66",
-  "teddy-modal__group--title": "_teddy-modal__group--title_vfo5b_70",
-  "teddy-modal__group--scroll": "_teddy-modal__group--scroll_vfo5b_76",
-  "teddy-modal__group--action": "_teddy-modal__group--action_vfo5b_85",
-  "modal-overlay-no-op": "_modal-overlay-no-op_vfo5b_1",
-  "teddy-fade-in": "_teddy-fade-in_vfo5b_1",
-  "teddy-fade-out": "_teddy-fade-out_vfo5b_1",
-  "modal-content-show": "_modal-content-show_vfo5b_1",
-  "modal-content-hide": "_modal-content-hide_vfo5b_1"
+  "teddy-modal__overlay": "_teddy-modal__overlay_3n21u_25",
+  "teddy-modal__content": "_teddy-modal__content_3n21u_37",
+  "teddy-modal__scroll": "_teddy-modal__scroll_3n21u_55",
+  "teddy-modal__image": "_teddy-modal__image_3n21u_59",
+  "teddy-modal__close--floating": "_teddy-modal__close--floating_3n21u_69",
+  "teddy-modal__group": "_teddy-modal__group_3n21u_74",
+  "teddy-modal__group--title": "_teddy-modal__group--title_3n21u_78",
+  "teddy-modal__group--scroll": "_teddy-modal__group--scroll_3n21u_84",
+  "teddy-modal__group--action": "_teddy-modal__group--action_3n21u_93",
+  "modal-overlay-no-op": "_modal-overlay-no-op_3n21u_1",
+  "teddy-fade-in": "_teddy-fade-in_3n21u_1",
+  "teddy-fade-out": "_teddy-fade-out_3n21u_1",
+  "modal-content-show": "_modal-content-show_3n21u_1",
+  "modal-content-hide": "_modal-content-hide_3n21u_1",
+  "teddy-overlay-no-op": "_teddy-overlay-no-op_3n21u_1"
 };
 const rootClassName = "teddy-modal";
 const RootContext = React__default.createContext({

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

@@ -7,6 +7,7 @@ const NavigationMenuPrimitive = require("@radix-ui/react-navigation-menu");
 const utils_composeRefs = require("../../utils/composeRefs.cjs");
 const components_visuallyHidden_visuallyHidden = require("../visually-hidden/visually-hidden.cjs");
 const utils_composeEventHandlers = require("../../utils/composeEventHandlers.cjs");
+const reactSlot = require("@radix-ui/react-slot");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -24,31 +25,31 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const NavigationMenuPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(NavigationMenuPrimitive);
-const enterFromLeft = "_enterFromLeft_139wf_1";
-const enterFromRight = "_enterFromRight_139wf_1";
-const exitToLeft = "_exitToLeft_139wf_1";
-const exitToRight = "_exitToRight_139wf_1";
-const scaleIn = "_scaleIn_139wf_1";
-const scaleOut = "_scaleOut_139wf_1";
+const enterFromLeft = "_enterFromLeft_959s3_1";
+const enterFromRight = "_enterFromRight_959s3_1";
+const exitToLeft = "_exitToLeft_959s3_1";
+const exitToRight = "_exitToRight_959s3_1";
+const scaleIn = "_scaleIn_959s3_1";
+const scaleOut = "_scaleOut_959s3_1";
 const styles = {
-  "teddy-navigation-menu": "_teddy-navigation-menu_139wf_1",
-  "teddy-navigation-menu__viewport": "_teddy-navigation-menu__viewport_139wf_33",
-  "teddy-navigation-menu__list": "_teddy-navigation-menu__list_139wf_36",
-  "teddy-navigation-menu__top-menu-list": "_teddy-navigation-menu__top-menu-list_139wf_55",
-  "teddy-navigation-menu__top-menu-trigger": "_teddy-navigation-menu__top-menu-trigger_139wf_75",
-  "teddy-navigation-menu__top-menu-trigger--small": "_teddy-navigation-menu__top-menu-trigger--small_139wf_93",
-  "teddy-navigation-menu__top-menu-trigger--button": "_teddy-navigation-menu__top-menu-trigger--button_139wf_98",
-  "teddy-navigation-menu__content": "_teddy-navigation-menu__content_139wf_163",
+  "teddy-navigation-menu": "_teddy-navigation-menu_959s3_1",
+  "teddy-navigation-menu__viewport": "_teddy-navigation-menu__viewport_959s3_33",
+  "teddy-navigation-menu__list": "_teddy-navigation-menu__list_959s3_36",
+  "teddy-navigation-menu__top-menu-list": "_teddy-navigation-menu__top-menu-list_959s3_55",
+  "teddy-navigation-menu__top-menu-trigger": "_teddy-navigation-menu__top-menu-trigger_959s3_75",
+  "teddy-navigation-menu__top-menu-trigger--small": "_teddy-navigation-menu__top-menu-trigger--small_959s3_92",
+  "teddy-navigation-menu__top-menu-trigger--button": "_teddy-navigation-menu__top-menu-trigger--button_959s3_97",
+  "teddy-navigation-menu__content": "_teddy-navigation-menu__content_959s3_169",
   enterFromLeft,
   enterFromRight,
   exitToLeft,
   exitToRight,
-  "teddy-navigation-menu__trigger": "_teddy-navigation-menu__trigger_139wf_208",
-  "teddy-navigation-menu__trigger--small": "_teddy-navigation-menu__trigger--small_139wf_226",
-  "teddy-navigation-menu__trigger--button": "_teddy-navigation-menu__trigger--button_139wf_231",
-  "teddy-navigation-menu__link": "_teddy-navigation-menu__link_139wf_296",
-  "teddy-navigation-menu__link--small": "_teddy-navigation-menu__link--small_139wf_314",
-  "teddy-navigation-menu__link--button": "_teddy-navigation-menu__link--button_139wf_319",
+  "teddy-navigation-menu__trigger": "_teddy-navigation-menu__trigger_959s3_213",
+  "teddy-navigation-menu__trigger--small": "_teddy-navigation-menu__trigger--small_959s3_231",
+  "teddy-navigation-menu__trigger--button": "_teddy-navigation-menu__trigger--button_959s3_236",
+  "teddy-navigation-menu__link": "_teddy-navigation-menu__link_959s3_301",
+  "teddy-navigation-menu__link--small": "_teddy-navigation-menu__link--small_959s3_319",
+  "teddy-navigation-menu__link--button": "_teddy-navigation-menu__link--button_959s3_324",
   scaleIn,
   scaleOut
 };
@@ -133,18 +134,19 @@ const TopMenuItem = React.forwardRef(
   }
 );
 const TopMenuTrigger = React.forwardRef(
-  ({ className, active, ...props }, forwardRef) => {
+  ({ className, asChild, active, ...props }, forwardRef) => {
     const classes = clsx(
       [styles[`${rootClassName}__top-menu-trigger`], styles[`${rootClassName}__top-menu-trigger--small`]],
       className
     );
+    const Comp = asChild ? reactSlot.Slot : "button";
     const context = React.useContext(NavigationMenuContext);
     const innerRef = React.useRef(null);
     const ref = utils_composeRefs.useComposedRefs(innerRef, forwardRef);
     const isOpen = context.selectedTopMenu === props.value;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        Comp,
         {
           ...props,
           ref,

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

@@ -24,6 +24,7 @@ type TopMenuItemProps = React.ComponentPropsWithoutRef<'li'>;
 type TopMenuTriggerProps = React.ComponentPropsWithoutRef<'button'> & {
     value: string;
     active?: boolean;
+    asChild?: boolean;
 };
 /** -------------------------------------------------------------------------------------------------
  * NavigationMenuList
@@ -100,7 +101,7 @@ declare const NavigationMenu: React.ForwardRefExoticComponent<Omit<NavigationMen
         variant?: "default" | "float" | undefined;
     } & React.RefAttributes<HTMLDivElement>>;
     Link: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & {
-        variant?: "button" | "small" | "default" | undefined;
+        variant?: "small" | "button" | "default" | undefined;
     } & React.RefAttributes<HTMLAnchorElement>>;
     Indicator: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Viewport: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -110,6 +111,7 @@ declare const NavigationMenu: React.ForwardRefExoticComponent<Omit<NavigationMen
     TopMenuTrigger: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         value: string;
         active?: boolean | undefined;
+        asChild?: boolean | undefined;
     } & React.RefAttributes<HTMLButtonElement>>;
 };
 type NavigationMenuProps = {

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

@@ -5,31 +5,32 @@ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { useComposedRefs } from "../../utils/composeRefs.js";
 import { VisuallyHidden } from "../visually-hidden/visually-hidden.js";
 import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
-const enterFromLeft = "_enterFromLeft_139wf_1";
-const enterFromRight = "_enterFromRight_139wf_1";
-const exitToLeft = "_exitToLeft_139wf_1";
-const exitToRight = "_exitToRight_139wf_1";
-const scaleIn = "_scaleIn_139wf_1";
-const scaleOut = "_scaleOut_139wf_1";
+import { Slot } from "@radix-ui/react-slot";
+const enterFromLeft = "_enterFromLeft_959s3_1";
+const enterFromRight = "_enterFromRight_959s3_1";
+const exitToLeft = "_exitToLeft_959s3_1";
+const exitToRight = "_exitToRight_959s3_1";
+const scaleIn = "_scaleIn_959s3_1";
+const scaleOut = "_scaleOut_959s3_1";
 const styles = {
-  "teddy-navigation-menu": "_teddy-navigation-menu_139wf_1",
-  "teddy-navigation-menu__viewport": "_teddy-navigation-menu__viewport_139wf_33",
-  "teddy-navigation-menu__list": "_teddy-navigation-menu__list_139wf_36",
-  "teddy-navigation-menu__top-menu-list": "_teddy-navigation-menu__top-menu-list_139wf_55",
-  "teddy-navigation-menu__top-menu-trigger": "_teddy-navigation-menu__top-menu-trigger_139wf_75",
-  "teddy-navigation-menu__top-menu-trigger--small": "_teddy-navigation-menu__top-menu-trigger--small_139wf_93",
-  "teddy-navigation-menu__top-menu-trigger--button": "_teddy-navigation-menu__top-menu-trigger--button_139wf_98",
-  "teddy-navigation-menu__content": "_teddy-navigation-menu__content_139wf_163",
+  "teddy-navigation-menu": "_teddy-navigation-menu_959s3_1",
+  "teddy-navigation-menu__viewport": "_teddy-navigation-menu__viewport_959s3_33",
+  "teddy-navigation-menu__list": "_teddy-navigation-menu__list_959s3_36",
+  "teddy-navigation-menu__top-menu-list": "_teddy-navigation-menu__top-menu-list_959s3_55",
+  "teddy-navigation-menu__top-menu-trigger": "_teddy-navigation-menu__top-menu-trigger_959s3_75",
+  "teddy-navigation-menu__top-menu-trigger--small": "_teddy-navigation-menu__top-menu-trigger--small_959s3_92",
+  "teddy-navigation-menu__top-menu-trigger--button": "_teddy-navigation-menu__top-menu-trigger--button_959s3_97",
+  "teddy-navigation-menu__content": "_teddy-navigation-menu__content_959s3_169",
   enterFromLeft,
   enterFromRight,
   exitToLeft,
   exitToRight,
-  "teddy-navigation-menu__trigger": "_teddy-navigation-menu__trigger_139wf_208",
-  "teddy-navigation-menu__trigger--small": "_teddy-navigation-menu__trigger--small_139wf_226",
-  "teddy-navigation-menu__trigger--button": "_teddy-navigation-menu__trigger--button_139wf_231",
-  "teddy-navigation-menu__link": "_teddy-navigation-menu__link_139wf_296",
-  "teddy-navigation-menu__link--small": "_teddy-navigation-menu__link--small_139wf_314",
-  "teddy-navigation-menu__link--button": "_teddy-navigation-menu__link--button_139wf_319",
+  "teddy-navigation-menu__trigger": "_teddy-navigation-menu__trigger_959s3_213",
+  "teddy-navigation-menu__trigger--small": "_teddy-navigation-menu__trigger--small_959s3_231",
+  "teddy-navigation-menu__trigger--button": "_teddy-navigation-menu__trigger--button_959s3_236",
+  "teddy-navigation-menu__link": "_teddy-navigation-menu__link_959s3_301",
+  "teddy-navigation-menu__link--small": "_teddy-navigation-menu__link--small_959s3_319",
+  "teddy-navigation-menu__link--button": "_teddy-navigation-menu__link--button_959s3_324",
   scaleIn,
   scaleOut
 };
@@ -114,18 +115,19 @@ const TopMenuItem = React__default.forwardRef(
   }
 );
 const TopMenuTrigger = React__default.forwardRef(
-  ({ className, active, ...props }, forwardRef) => {
+  ({ className, asChild, active, ...props }, forwardRef) => {
     const classes = clsx(
       [styles[`${rootClassName}__top-menu-trigger`], styles[`${rootClassName}__top-menu-trigger--small`]],
       className
     );
+    const Comp = asChild ? Slot : "button";
     const context = React__default.useContext(NavigationMenuContext);
     const innerRef = React__default.useRef(null);
     const ref = useComposedRefs(innerRef, forwardRef);
     const isOpen = context.selectedTopMenu === props.value;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        "button",
+        Comp,
         {
           ...props,
           ref,

package/dist/components/notification/notification.cjs

@@ -7,7 +7,7 @@ const Collapsible = require("@radix-ui/react-collapsible");
 const reactUseControllableState = require("@radix-ui/react-use-controllable-state");
 const components_text_text = require("../text/text.cjs");
 const components_button_button = require("../button/button.cjs");
-require("../../assets/sprite.5636ec8e-teddy.svg");
+require("../../assets/sprite.269ba410-teddy.svg");
 const components_icon_icon = require("../icon/icon.cjs");
 const components_heading_heading = require("../heading/heading.cjs");
 const components_card_card = require("../card/card.cjs");

package/dist/components/notification/notification.d.ts

@@ -31,7 +31,9 @@ type TextProps = React.ComponentPropsWithoutRef<typeof TextPrimitives>;
  * Dismiss
  * -----------------------------------------------------------------------------------------------*/
 type DismissProps = Omit<React.ComponentPropsWithoutRef<typeof ButtonPrimitives>, 'variant'>;
-declare const Notification: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & 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 & import('../../utils/generate-styling/gap').GapProps & {
+declare const Notification: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & 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;
+} & import('../../utils/generate-styling/gap').GapProps & {
     align?: import('../../utils/generate-styling/align').Align | undefined;
     justify?: import('../../utils/generate-styling/justify').Justify | undefined;
 } & import('../../utils/generate-styling/grid').GridLayout & {
@@ -44,7 +46,9 @@ declare const Notification: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<
     shadow?: boolean | undefined;
     backgroundImageSrc?: string | undefined;
     layout?: ("navigation-vertical" | "navigation-horizontal-small" | "navigation-horizontal-large" | "rich-card") | undefined;
-} & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & 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 & import('../../utils/generate-styling/gap').GapProps & {
+} & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & 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;
+} & import('../../utils/generate-styling/gap').GapProps & {
     align?: import('../../utils/generate-styling/align').Align | undefined;
     justify?: import('../../utils/generate-styling/justify').Justify | undefined;
 } & import('../../utils/generate-styling/grid').GridLayout & {
@@ -57,7 +61,9 @@ declare const Notification: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<
     shadow?: boolean | undefined;
     backgroundImageSrc?: string | undefined;
     layout?: ("navigation-vertical" | "navigation-horizontal-small" | "navigation-horizontal-large" | "rich-card") | undefined;
-} & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & 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 & import('../../utils/generate-styling/gap').GapProps & {
+} & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & 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;
+} & import('../../utils/generate-styling/gap').GapProps & {
     align?: import('../../utils/generate-styling/align').Align | undefined;
     justify?: import('../../utils/generate-styling/justify').Justify | undefined;
 } & import('../../utils/generate-styling/grid').GridLayout & {
@@ -80,8 +86,8 @@ declare const Notification: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<
     Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLSpanElement>>;
     Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
     Icon: React.ForwardRefExoticComponent<Partial<Omit<React.SVGProps<SVGSVGElement> & {
-        name: "link" | "map" | "menu" | "search" | "summary" | "time" | "video" | "filter" | "image" | "stop" | "key" | "x" | "download" | "split" | "alert" | "radio" | "email" | "copy" | "add" | "reverse" | "infinite" | "visible" | "help" | "zoom-out" | "zoom" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "dislike" | "edit" | "heart-filled" | "heart" | "invisible" | "like" | "lock-open" | "lock" | "login" | "logout" | "maximize" | "minimize" | "mute" | "password-invisible" | "password-visible" | "play-filled" | "play" | "remove-filled" | "remove" | "save" | "send" | "settings" | "share" | "shuffle" | "sync" | "skip-back-10sec" | "skip-back-30sec" | "skip-forward-10sec" | "skip-forward-30sec" | "star-filled" | "star" | "switch-arrows" | "tv-next" | "tv-pause" | "tv-previous" | "tv-stop" | "upload" | "volume" | "connected-building" | "home" | "hospital" | "industry" | "premises-datacenter" | "premises-large" | "premises-medium" | "premises-small" | "premises" | "store" | "address-book" | "b2b-customer" | "care" | "chat-robot" | "chat" | "child-1" | "child-2" | "conversation" | "customer-dialogue" | "dsl-hub" | "end-user" | "handshake" | "headphones" | "letter" | "mms" | "new-contact" | "new-group" | "news" | "parental-guide" | "people-hub" | "people" | "portal" | "signature" | "smiley-happy" | "smiley-sad" | "sms" | "support" | "user-admin" | "vcard" | "voicemail" | "battery" | "bluetooth" | "broadband" | "broken-phone" | "cast" | "cloud-connect" | "connected" | "core-router" | "daas-device" | "data-transfer" | "desktop" | "devices" | "esim-simcard" | "esim" | "face-id" | "fiber" | "fingerprint" | "fiveg" | "fourg" | "home-installation" | "industrial-iot" | "internet" | "it-service" | "laptop" | "mobile-broadband" | "network" | "phone-recycling" | "phone-ringing" | "phone" | "rack" | "refill-card" | "remote-control" | "repair" | "roaming" | "router" | "secure-device" | "sense-car" | "server" | "service-device" | "service-supervision" | "slow-wifi" | "smart-wifi" | "smartphone" | "smartwatch" | "tablet" | "trade-phone" | "tv" | "usb" | "voice-switch" | "wallplug" | "wireless-off" | "wireless-weak" | "wireless" | "world-alert" | "world-off" | "world-question" | "bar-chart" | "doc" | "document-doc" | "document-edit" | "document-pdf" | "document-ppt" | "excel" | "folder-copy" | "folder-new" | "folder" | "gif" | "graph" | "media-content" | "org-chart" | "pie-chart" | "print" | "register" | "report" | "simcard" | "spell-check" | "credit-card" | "euro" | "invoice" | "kontantkort" | "kr" | "late-payment" | "money-back-euro" | "money-back-kr" | "money-euro" | "money-kr" | "pay-monthly-euro" | "pay-monthly-kr" | "pay-once-euro" | "pay-once-kr" | "payment-success" | "savings" | "wallet" | "airplay" | "camera" | "entertainment" | "external" | "film" | "games" | "megaphone" | "microphone" | "music" | "player-settings" | "record" | "stream" | "trailer" | "video-conference" | "activity-level" | "ai-robot" | "bag" | "basketball" | "blood-pressure" | "bulb" | "business-continuity" | "business-intelligence" | "calendar" | "cart" | "close-circle" | "cloud" | "coffee" | "compass" | "construction" | "cookie" | "delivery" | "drone" | "education" | "efficiency" | "environment" | "facemask" | "flag" | "focus" | "food" | "fraud" | "getting-started" | "home-care" | "job-search" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "present" | "press-button" | "price" | "pulse" | "recycle" | "reservation" | "route" | "ruler" | "satellite" | "secured-1" | "secured-2" | "security-camera" | "shopping" | "snowflake" | "speedometer" | "spyware" | "suitcase" | "sustainability" | "tag" | "temperature" | "thinking" | "train" | "transfer" | "undo" | "wavelength" | "weather" | "world" | "android" | "apple" | "bankid-norway" | "bankid" | "facebook" | "instagram" | "youtube" | "linkedin" | "snapchat" | "telia-logo" | "whatsapp" | "windows" | "alert-filled" | "check-circle-filled" | "check-circle" | "error-filled" | "error" | "info-filled" | "info" | "question-filled" | "question" | "warning" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-subdirectory" | "arrow-up" | "card-view" | "checkmark-bold" | "checkmark" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "close" | "grid-view" | "list-view" | "minus-bold" | "minus" | "more-horizontal" | "more-vertical" | "plus" | "services" | "sorter" | "table-view";
-        size?: ("xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "font") | undefined;
+        name: "key" | "search" | "split" | "link" | "add" | "reverse" | "infinite" | "radio" | "visible" | "copy" | "help" | "zoom-out" | "filter" | "x" | "zoom" | "menu" | "map" | "summary" | "time" | "video" | "image" | "stop" | "download" | "alert" | "email" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "dislike" | "edit" | "heart-filled" | "heart" | "invisible" | "like" | "lock-open" | "lock" | "login" | "logout" | "maximize" | "minimize" | "mute" | "password-invisible" | "password-visible" | "play-filled" | "play" | "remove-filled" | "remove" | "save" | "send" | "settings" | "share" | "shortcut" | "shuffle" | "sync" | "skip-back-10sec" | "skip-back-30sec" | "skip-forward-10sec" | "skip-forward-30sec" | "star-filled" | "star" | "switch-arrows" | "tv-next" | "tv-pause" | "tv-previous" | "tv-stop" | "upload" | "volume" | "connected-building" | "home" | "hospital" | "industry" | "premises-datacenter" | "premises-large" | "premises-medium" | "premises-small" | "premises" | "store" | "address-book" | "b2b-customer" | "care" | "chat-robot" | "chat" | "child-1" | "child-2" | "conversation" | "customer-dialogue" | "dsl-hub" | "end-user" | "handshake" | "headphones" | "letter" | "mms" | "new-contact" | "new-group" | "news" | "parental-guide" | "people-hub" | "people" | "portal" | "signature" | "smiley-happy" | "smiley-sad" | "sms" | "support" | "user-admin" | "vcard" | "voicemail" | "battery" | "bluetooth" | "broadband" | "broken-phone" | "cast" | "cloud-connect" | "connected" | "core-router" | "daas-device" | "data-transfer" | "desktop" | "devices" | "esim-simcard" | "esim" | "face-id" | "fiber" | "fingerprint" | "fiveg" | "fourg" | "home-installation" | "industrial-iot" | "internet" | "it-service" | "laptop" | "mobile-broadband" | "network" | "phone-recycling" | "phone-ringing" | "phone" | "rack" | "refill-card" | "remote-control" | "repair" | "roaming" | "router" | "secure-device" | "sense-car" | "server" | "service-device" | "service-supervision" | "slow-wifi" | "smart-wifi" | "smartphone" | "smartwatch" | "tablet" | "trade-phone" | "tv" | "usb" | "voice-switch" | "wallplug" | "wireless-off" | "wireless-weak" | "wireless" | "world-alert" | "world-off" | "world-question" | "bar-chart" | "doc" | "document-doc" | "document-edit" | "document-pdf" | "document-ppt" | "excel" | "folder-copy" | "folder-new" | "folder" | "gif" | "graph" | "media-content" | "org-chart" | "pie-chart" | "print" | "register" | "report" | "simcard" | "spell-check" | "credit-card" | "euro" | "invoice" | "kontantkort" | "kr" | "late-payment" | "money-back-euro" | "money-back-kr" | "money-euro" | "money-kr" | "pay-monthly-euro" | "pay-monthly-kr" | "pay-once-euro" | "pay-once-kr" | "payment-success" | "savings" | "wallet" | "airplay" | "camera" | "entertainment" | "external" | "film" | "games" | "megaphone" | "microphone" | "music" | "player-settings" | "record" | "stream" | "trailer" | "video-conference" | "activity-level" | "ai-robot" | "bag" | "basketball" | "blood-pressure" | "bulb" | "business-continuity" | "business-intelligence" | "calendar" | "cart" | "close-circle" | "cloud" | "coffee" | "compass" | "construction" | "cookie" | "delivery" | "drone" | "education" | "efficiency" | "environment" | "facemask" | "flag" | "focus" | "food" | "fraud" | "getting-started" | "home-care" | "job-search" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "present" | "press-button" | "price" | "pulse" | "recycle" | "reservation" | "route" | "ruler" | "satellite" | "secured-1" | "secured-2" | "security-camera" | "shopping" | "snowflake" | "speedometer" | "spyware" | "suitcase" | "sustainability" | "tag" | "temperature" | "thinking" | "train" | "transfer" | "undo" | "wavelength" | "weather" | "world" | "android" | "apple" | "bankid-norway" | "bankid" | "facebook" | "instagram" | "youtube" | "linkedin" | "snapchat" | "telia-logo" | "whatsapp" | "windows" | "alert-filled" | "check-circle-filled" | "check-circle" | "error-filled" | "error" | "info-filled" | "info" | "question-filled" | "question" | "warning" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-subdirectory" | "arrow-up" | "card-view" | "checkmark-bold" | "checkmark" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "close" | "grid-view" | "list-view" | "minus-bold" | "minus" | "more-horizontal" | "more-vertical" | "plus" | "services" | "sorter" | "table-view";
+        size?: ("sm" | "md" | "lg" | "xl" | "font" | "xxs" | "xs") | undefined;
         children?: React.ReactNode;
     }, "ref">> & React.RefAttributes<SVGSVGElement>>;
     Dismiss: React.ForwardRefExoticComponent<DismissProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/notification/notification.js

@@ -5,7 +5,7 @@ import * as Collapsible from "@radix-ui/react-collapsible";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { Text as Text$1 } from "../text/text.js";
 import { Button } from "../button/button.js";
-import "../../assets/sprite.5636ec8e-teddy.svg";
+import "../../assets/sprite.269ba410-teddy.svg";
 import { Icon as Icon$1 } from "../icon/icon.js";
 import { Heading as Heading$1 } from "../heading/heading.js";
 import { Card } from "../card/card.js";

package/dist/components/scroll-area/index.d.ts

@@ -9,20 +9,24 @@ export declare const ScrollArea: import('react').ForwardRefExoticComponent<Omit<
         asChild?: boolean | undefined;
     } & import('react').RefAttributes<HTMLDivElement>>;
     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" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+        variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-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" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+        variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
     } & {
         iconOnly?: false | undefined;
         "aria-label"?: string | undefined;

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

@@ -6,7 +6,7 @@ const clsx = require("clsx");
 const ScrollAreaPrimitive = require("@radix-ui/react-scroll-area");
 const components_button_button = require("../button/button.cjs");
 const utils_composeEventHandlers = require("../../utils/composeEventHandlers.cjs");
-require("../../assets/sprite.5636ec8e-teddy.svg");
+require("../../assets/sprite.269ba410-teddy.svg");
 const components_icon_icon = require("../icon/icon.cjs");
 const reactSlot = require("@radix-ui/react-slot");
 function _interopNamespaceDefault(e) {
@@ -27,14 +27,14 @@ function _interopNamespaceDefault(e) {
 }
 const ScrollAreaPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(ScrollAreaPrimitive);
 const styles = {
-  "teddy-scroll-area": "_teddy-scroll-area_1o8ft_3",
-  "teddy-scroll-area__viewport": "_teddy-scroll-area__viewport_1o8ft_7",
-  "teddy-scroll-area__scrollbar": "_teddy-scroll-area__scrollbar_1o8ft_12",
-  "teddy-scroll-area__scrollbar--hidden": "_teddy-scroll-area__scrollbar--hidden_1o8ft_33",
-  "teddy-scroll-area__thumb": "_teddy-scroll-area__thumb_1o8ft_46",
-  "teddy-scroll-area__corner": "_teddy-scroll-area__corner_1o8ft_63",
-  "teddy-scroll-area__button": "_teddy-scroll-area__button_1o8ft_66",
-  "teddy-scroll-area__button--hidden": "_teddy-scroll-area__button--hidden_1o8ft_94"
+  "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"
 };
 const Scrollbar = React.forwardRef(
   ({ className, ...props }, forwardRef) => {
@@ -129,11 +129,17 @@ const Root = React.forwardRef(
     const classes = clsx([styles[`${rootClassName}`]], className);
     function handleScroll(e) {
       const target = e.currentTarget;
+      const { scrollLeft, scrollWidth, clientWidth, scrollTop, scrollHeight, clientHeight } = target;
+      const buffer = 1;
+      const hasScrollLeft2 = scrollLeft > 0;
+      const hasScrollRight2 = scrollLeft < scrollWidth - clientWidth - buffer;
+      const hasScrollTop2 = scrollTop > 0;
+      const hasScrollBottom2 = scrollTop < scrollHeight - clientHeight - buffer;
       setHasScroll({
-        left: target.scrollLeft > 0,
-        right: target.scrollLeft < target.scrollWidth - target.clientWidth,
-        top: target.scrollTop > 0,
-        bottom: target.scrollTop < target.scrollHeight - target.clientHeight
+        left: hasScrollLeft2,
+        right: hasScrollRight2,
+        top: hasScrollTop2,
+        bottom: hasScrollBottom2
       });
     }
     return /* @__PURE__ */ jsxRuntime.jsx(

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

@@ -4,18 +4,18 @@ import clsx from "clsx";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { Button as Button$1 } from "../button/button.js";
 import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
-import "../../assets/sprite.5636ec8e-teddy.svg";
+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_1o8ft_3",
-  "teddy-scroll-area__viewport": "_teddy-scroll-area__viewport_1o8ft_7",
-  "teddy-scroll-area__scrollbar": "_teddy-scroll-area__scrollbar_1o8ft_12",
-  "teddy-scroll-area__scrollbar--hidden": "_teddy-scroll-area__scrollbar--hidden_1o8ft_33",
-  "teddy-scroll-area__thumb": "_teddy-scroll-area__thumb_1o8ft_46",
-  "teddy-scroll-area__corner": "_teddy-scroll-area__corner_1o8ft_63",
-  "teddy-scroll-area__button": "_teddy-scroll-area__button_1o8ft_66",
-  "teddy-scroll-area__button--hidden": "_teddy-scroll-area__button--hidden_1o8ft_94"
+  "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"
 };
 const Scrollbar = React__default.forwardRef(
   ({ className, ...props }, forwardRef) => {
@@ -110,11 +110,17 @@ const Root = React__default.forwardRef(
     const classes = clsx([styles[`${rootClassName}`]], className);
     function handleScroll(e) {
       const target = e.currentTarget;
+      const { scrollLeft, scrollWidth, clientWidth, scrollTop, scrollHeight, clientHeight } = target;
+      const buffer = 1;
+      const hasScrollLeft2 = scrollLeft > 0;
+      const hasScrollRight2 = scrollLeft < scrollWidth - clientWidth - buffer;
+      const hasScrollTop2 = scrollTop > 0;
+      const hasScrollBottom2 = scrollTop < scrollHeight - clientHeight - buffer;
       setHasScroll({
-        left: target.scrollLeft > 0,
-        right: target.scrollLeft < target.scrollWidth - target.clientWidth,
-        top: target.scrollTop > 0,
-        bottom: target.scrollTop < target.scrollHeight - target.clientHeight
+        left: hasScrollLeft2,
+        right: hasScrollRight2,
+        top: hasScrollTop2,
+        bottom: hasScrollBottom2
       });
     }
     return /* @__PURE__ */ jsx(

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

@@ -6,6 +6,6 @@ require("clsx");
 const components_scrollArea_scrollAreaBar = require("./scroll-area-bar.cjs");
 require("../button/button.cjs");
 require("../../utils/composeEventHandlers.cjs");
-require("../../assets/sprite.5636ec8e-teddy.svg");
+require("../../assets/sprite.269ba410-teddy.svg");
 require("../icon/icon.cjs");
 exports.Button = components_scrollArea_scrollAreaBar.Button;