@telia/teddy 0.0.73 → 0.0.75

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

@@ -6,8 +6,19 @@ const clsx = require("clsx");
 const components_card_card = require("./card.cjs");
 const components_carousel_carouselRoot = require("../carousel/carousel-root.cjs");
 const components_colorDot_index = require("../color-dot/index.cjs");
+const utils_breakpointToNumber = require("../../utils/breakpointToNumber.cjs");
+const tokens_breakpoint_variables = require("../../tokens/breakpoint/variables.cjs");
 const ImageSlider = React.forwardRef(
-  ({ variants, className, children, onClickNext, onClickPrev, onChangeVariant = () => void 0 }, forwardRef) => {
+  ({
+    settings,
+    variants,
+    className,
+    children,
+    onClick = () => void 0,
+    onClickNext,
+    onClickPrev,
+    onChangeVariant = () => void 0
+  }, forwardRef) => {
     const [selectedSlide, setSelectedSlide] = React.useState(0);
     const rootCarouselClass = `${components_card_card.rootClassName}__carousel`;
     const classes = clsx([components_card_card.styles[rootCarouselClass]], className);
@@ -17,6 +28,7 @@ const ImageSlider = React.forwardRef(
         size: "sm",
         onClickNext,
         onClickPrev,
+        onClick,
         settings: {
           beforeChange: (_currentSlide, nextSlide) => {
             setSelectedSlide(nextSlide);
@@ -25,7 +37,17 @@ const ImageSlider = React.forwardRef(
           customPaging: (index) => {
             const variant = variants[index];
             return /* @__PURE__ */ jsxRuntime.jsx(components_colorDot_index.ColorDot, { color: variant.color, size: "xs", bordered: true, wide: index === selectedSlide });
-          }
+          },
+          swipe: false,
+          responsive: [
+            {
+              breakpoint: utils_breakpointToNumber.breakpointToNumber(tokens_breakpoint_variables.teddyBreakpointMd),
+              settings: {
+                swipe: true
+              }
+            }
+          ],
+          ...settings
         },
         children
       }

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

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { Settings } from 'react-slick';
 
 export type ImageSliderVariant = {
     color: string;
@@ -8,6 +9,8 @@ export interface ImageSliderProps {
     variants: ImageSliderVariant[];
     children: React.ReactNode;
     className?: string;
+    settings?: Settings;
+    onClick?: () => void;
     onClickNext?: () => void;
     onClickPrev?: () => void;
     onChangeVariant?: (variant: ImageSliderVariant) => void;

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

@@ -4,8 +4,19 @@ import clsx from "clsx";
 import { s as styles, rootClassName } from "./card.js";
 import { Carousel } from "../carousel/carousel-root.js";
 import { ColorDot } from "../color-dot/index.js";
+import { breakpointToNumber } from "../../utils/breakpointToNumber.js";
+import { teddyBreakpointMd } from "../../tokens/breakpoint/variables.js";
 const ImageSlider = React__default.forwardRef(
-  ({ variants, className, children, onClickNext, onClickPrev, onChangeVariant = () => void 0 }, forwardRef) => {
+  ({
+    settings,
+    variants,
+    className,
+    children,
+    onClick = () => void 0,
+    onClickNext,
+    onClickPrev,
+    onChangeVariant = () => void 0
+  }, forwardRef) => {
     const [selectedSlide, setSelectedSlide] = useState(0);
     const rootCarouselClass = `${rootClassName}__carousel`;
     const classes = clsx([styles[rootCarouselClass]], className);
@@ -15,6 +26,7 @@ const ImageSlider = React__default.forwardRef(
         size: "sm",
         onClickNext,
         onClickPrev,
+        onClick,
         settings: {
           beforeChange: (_currentSlide, nextSlide) => {
             setSelectedSlide(nextSlide);
@@ -23,7 +35,17 @@ const ImageSlider = React__default.forwardRef(
           customPaging: (index) => {
             const variant = variants[index];
             return /* @__PURE__ */ jsx(ColorDot, { color: variant.color, size: "xs", bordered: true, wide: index === selectedSlide });
-          }
+          },
+          swipe: false,
+          responsive: [
+            {
+              breakpoint: breakpointToNumber(teddyBreakpointMd),
+              settings: {
+                swipe: true
+              }
+            }
+          ],
+          ...settings
         },
         children
       }

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

@@ -39,6 +39,7 @@ const Carousel = ({
   className = "",
   onClickNext,
   onClickPrev,
+  onClick = () => void 0,
   navigationIcon,
   settings,
   size = "lg"
@@ -55,20 +56,6 @@ const Carousel = ({
     lazyLoad: "ondemand",
     ...settings
   };
-  const [swiped, setSwiped] = React.useState(false);
-  const handleSwiped = React.useCallback(() => {
-    setSwiped(true);
-  }, [setSwiped]);
-  const handleOnItemClick = React.useCallback(
-    (e) => {
-      if (swiped) {
-        e.stopPropagation();
-        e.preventDefault();
-        setSwiped(false);
-      }
-    },
-    [swiped]
-  );
   const filteredChildren = React.Children.toArray(children).filter((child) => !!child);
   const SliderComponent = Slider.default ? Slider.default : Slider;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -78,19 +65,8 @@ const Carousel = ({
         [styles[`${rootClassName}--${size}`]]: size,
         [className]: className
       }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(SliderComponent, { ...computedSettings, onSwipe: handleSwiped, children: React.Children.map(filteredChildren, (child) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            onClick: (e) => {
-              e.stopPropagation();
-              e.preventDefault();
-            },
-            onClickCapture: handleOnItemClick,
-            className: clsx(styles[`${rootClassName}__item`]),
-            children: child
-          }
-        );
+      children: /* @__PURE__ */ jsxRuntime.jsx(SliderComponent, { ...computedSettings, children: React.Children.map(filteredChildren, (child) => {
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { onClick, className: clsx(styles[`${rootClassName}__item`]), children: child });
       }) })
     }
   );

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

@@ -10,6 +10,7 @@ export type CarouselProps = {
     size?: 'sm' | 'lg';
     onClickNext?: () => void;
     onClickPrev?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
 /** Carousel to show images in. Can be fully customized by utlizing underlying 'settings' props mapped with react-slick */
 export declare const Carousel: React.FC<CarouselProps>;

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

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React__default, { useState, useCallback } from "react";
+import React__default from "react";
 import clsx from "clsx";
 import Slider from "react-slick";
 import "../../assets/sprite.269ba410-teddy.svg";
@@ -37,6 +37,7 @@ const Carousel = ({
   className = "",
   onClickNext,
   onClickPrev,
+  onClick = () => void 0,
   navigationIcon,
   settings,
   size = "lg"
@@ -53,20 +54,6 @@ const Carousel = ({
     lazyLoad: "ondemand",
     ...settings
   };
-  const [swiped, setSwiped] = useState(false);
-  const handleSwiped = useCallback(() => {
-    setSwiped(true);
-  }, [setSwiped]);
-  const handleOnItemClick = useCallback(
-    (e) => {
-      if (swiped) {
-        e.stopPropagation();
-        e.preventDefault();
-        setSwiped(false);
-      }
-    },
-    [swiped]
-  );
   const filteredChildren = React__default.Children.toArray(children).filter((child) => !!child);
   const SliderComponent = Slider.default ? Slider.default : Slider;
   return /* @__PURE__ */ jsx(
@@ -76,19 +63,8 @@ const Carousel = ({
         [styles[`${rootClassName}--${size}`]]: size,
         [className]: className
       }),
-      children: /* @__PURE__ */ jsx(SliderComponent, { ...computedSettings, onSwipe: handleSwiped, children: React__default.Children.map(filteredChildren, (child) => {
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            onClick: (e) => {
-              e.stopPropagation();
-              e.preventDefault();
-            },
-            onClickCapture: handleOnItemClick,
-            className: clsx(styles[`${rootClassName}__item`]),
-            children: child
-          }
-        );
+      children: /* @__PURE__ */ jsx(SliderComponent, { ...computedSettings, children: React__default.Children.map(filteredChildren, (child) => {
+        return /* @__PURE__ */ jsx("div", { onClick, className: clsx(styles[`${rootClassName}__item`]), children: child });
       }) })
     }
   );

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

@@ -209,6 +209,33 @@ const PRIVATE_LINKS = {
         }
       ]
     },
+    {
+      name: "Trygghet",
+      link: "/trygghet/",
+      appKey: APP_KEYS["open-pages"],
+      links: [
+        {
+          name: "Tjenester",
+          link: "/trygghet/tjenester/",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Svindel",
+          link: "/trygghet/svindel/",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Aktuelt",
+          link: "/trygghet/aktuelt/",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Hjelp Trygghet",
+          link: "/trygghet/hjelp/",
+          appKey: APP_KEYS["open-pages"]
+        }
+      ]
+    },
     {
       name: "Hjelp",
       link: "/hjelp/",
@@ -229,6 +256,11 @@ const PRIVATE_LINKS = {
           link: "/internett/hjelp/",
           appKey: APP_KEYS["open-pages"]
         },
+        {
+          name: "Hjelp Trygghet",
+          link: "/trygghet/hjelp/",
+          appKey: APP_KEYS["open-pages"]
+        },
         {
           name: "Faktura",
           link: "/hjelp/faktura/",
@@ -285,12 +317,12 @@ const BUSINESS_LINKS = {
     {
       name: "Nettbutikk",
       link: "/bedrift/mobilabonnement/",
-      appKey: APP_KEYS["web-shop"],
+      appKey: APP_KEYS["open-pages"],
       links: [
         {
           name: "Mobilabonnement",
           link: "/bedrift/mobilabonnement/",
-          appKey: APP_KEYS["web-shop"]
+          appKey: APP_KEYS["open-pages"]
         },
         {
           name: "Mobiltelefoner",

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

@@ -231,6 +231,27 @@ export declare const PRIVATE_LINKS: {
             readonly link: "/internett/hjelp/";
             readonly appKey: "open-pages";
         }];
+    }, {
+        readonly name: "Trygghet";
+        readonly link: "/trygghet/";
+        readonly appKey: "open-pages";
+        readonly links: [{
+            readonly name: "Tjenester";
+            readonly link: "/trygghet/tjenester/";
+            readonly appKey: "open-pages";
+        }, {
+            readonly name: "Svindel";
+            readonly link: "/trygghet/svindel/";
+            readonly appKey: "open-pages";
+        }, {
+            readonly name: "Aktuelt";
+            readonly link: "/trygghet/aktuelt/";
+            readonly appKey: "open-pages";
+        }, {
+            readonly name: "Hjelp Trygghet";
+            readonly link: "/trygghet/hjelp/";
+            readonly appKey: "open-pages";
+        }];
     }, {
         readonly name: "Hjelp";
         readonly link: "/hjelp/";
@@ -247,6 +268,10 @@ export declare const PRIVATE_LINKS: {
             readonly name: "Hjelp Internett";
             readonly link: "/internett/hjelp/";
             readonly appKey: "open-pages";
+        }, {
+            readonly name: "Hjelp Trygghet";
+            readonly link: "/trygghet/hjelp/";
+            readonly appKey: "open-pages";
         }, {
             readonly name: "Faktura";
             readonly link: "/hjelp/faktura/";
@@ -289,11 +314,11 @@ export declare const BUSINESS_LINKS: {
     }, {
         readonly name: "Nettbutikk";
         readonly link: "/bedrift/mobilabonnement/";
-        readonly appKey: "web-shop";
+        readonly appKey: "open-pages";
         readonly links: [{
             readonly name: "Mobilabonnement";
             readonly link: "/bedrift/mobilabonnement/";
-            readonly appKey: "web-shop";
+            readonly appKey: "open-pages";
         }, {
             readonly name: "Mobiltelefoner";
             readonly link: "/bedrift/mobiltelefoner/";
@@ -440,6 +465,27 @@ export declare const LINKS: [{
             readonly link: "/internett/hjelp/";
             readonly appKey: "open-pages";
         }];
+    }, {
+        readonly name: "Trygghet";
+        readonly link: "/trygghet/";
+        readonly appKey: "open-pages";
+        readonly links: [{
+            readonly name: "Tjenester";
+            readonly link: "/trygghet/tjenester/";
+            readonly appKey: "open-pages";
+        }, {
+            readonly name: "Svindel";
+            readonly link: "/trygghet/svindel/";
+            readonly appKey: "open-pages";
+        }, {
+            readonly name: "Aktuelt";
+            readonly link: "/trygghet/aktuelt/";
+            readonly appKey: "open-pages";
+        }, {
+            readonly name: "Hjelp Trygghet";
+            readonly link: "/trygghet/hjelp/";
+            readonly appKey: "open-pages";
+        }];
     }, {
         readonly name: "Hjelp";
         readonly link: "/hjelp/";
@@ -456,6 +502,10 @@ export declare const LINKS: [{
             readonly name: "Hjelp Internett";
             readonly link: "/internett/hjelp/";
             readonly appKey: "open-pages";
+        }, {
+            readonly name: "Hjelp Trygghet";
+            readonly link: "/trygghet/hjelp/";
+            readonly appKey: "open-pages";
         }, {
             readonly name: "Faktura";
             readonly link: "/hjelp/faktura/";
@@ -497,11 +547,11 @@ export declare const LINKS: [{
     }, {
         readonly name: "Nettbutikk";
         readonly link: "/bedrift/mobilabonnement/";
-        readonly appKey: "web-shop";
+        readonly appKey: "open-pages";
         readonly links: [{
             readonly name: "Mobilabonnement";
             readonly link: "/bedrift/mobilabonnement/";
-            readonly appKey: "web-shop";
+            readonly appKey: "open-pages";
         }, {
             readonly name: "Mobiltelefoner";
             readonly link: "/bedrift/mobiltelefoner/";

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

@@ -207,6 +207,33 @@ const PRIVATE_LINKS = {
         }
       ]
     },
+    {
+      name: "Trygghet",
+      link: "/trygghet/",
+      appKey: APP_KEYS["open-pages"],
+      links: [
+        {
+          name: "Tjenester",
+          link: "/trygghet/tjenester/",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Svindel",
+          link: "/trygghet/svindel/",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Aktuelt",
+          link: "/trygghet/aktuelt/",
+          appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Hjelp Trygghet",
+          link: "/trygghet/hjelp/",
+          appKey: APP_KEYS["open-pages"]
+        }
+      ]
+    },
     {
       name: "Hjelp",
       link: "/hjelp/",
@@ -227,6 +254,11 @@ const PRIVATE_LINKS = {
           link: "/internett/hjelp/",
           appKey: APP_KEYS["open-pages"]
         },
+        {
+          name: "Hjelp Trygghet",
+          link: "/trygghet/hjelp/",
+          appKey: APP_KEYS["open-pages"]
+        },
         {
           name: "Faktura",
           link: "/hjelp/faktura/",
@@ -283,12 +315,12 @@ const BUSINESS_LINKS = {
     {
       name: "Nettbutikk",
       link: "/bedrift/mobilabonnement/",
-      appKey: APP_KEYS["web-shop"],
+      appKey: APP_KEYS["open-pages"],
       links: [
         {
           name: "Mobilabonnement",
           link: "/bedrift/mobilabonnement/",
-          appKey: APP_KEYS["web-shop"]
+          appKey: APP_KEYS["open-pages"]
         },
         {
           name: "Mobiltelefoner",

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

@@ -64,76 +64,77 @@ const Corner = React.forwardRef(
   }
 );
 Corner.displayName = "Corner";
+const directionToAriaLabel = {
+  up: "Scroll opp",
+  down: "Scroll ned",
+  left: "Scroll til venstre",
+  right: "Scroll til høyre"
+};
+const directionToIconName = {
+  up: "chevron-up",
+  down: "chevron-down",
+  left: "chevron-left",
+  right: "chevron-right"
+};
 const Button = React.forwardRef(
   ({ className, hidden, direction = "right", children, ...props }, forwardRef) => {
-    const context = React.useContext(RootContext);
-    const isHidden = hidden ?? (direction === "up" && !(context == null ? void 0 : context.hasScrollTop) || direction === "down" && !(context == null ? void 0 : context.hasScrollBottom) || direction === "left" && !(context == null ? void 0 : context.hasScrollLeft) || direction === "right" && !(context == null ? void 0 : context.hasScrollRight));
-    const classes = clsx(
+    const scrollAreaContext = React.useContext(RootContext);
+    const shouldBeHidden = hidden ?? (direction === "up" && !(scrollAreaContext == null ? void 0 : scrollAreaContext.hasScrollTop) || direction === "down" && !(scrollAreaContext == null ? void 0 : scrollAreaContext.hasScrollBottom) || direction === "left" && !(scrollAreaContext == null ? void 0 : scrollAreaContext.hasScrollLeft) || direction === "right" && !(scrollAreaContext == null ? void 0 : scrollAreaContext.hasScrollRight));
+    const buttonClasses = clsx(
       styles[`${rootClassName}__button`],
       {
-        [styles[`${rootClassName}__button--hidden`]]: isHidden
+        [styles[`${rootClassName}__button--hidden`]]: shouldBeHidden
       },
       className
     );
-    const directionLabels = {
-      up: "Scroll opp",
-      down: "Scroll ned",
-      left: "Scroll til venstre",
-      right: "Scroll til høyre"
-    };
-    const directionIcons = {
-      up: "chevron-up",
-      down: "chevron-down",
-      left: "chevron-left",
-      right: "chevron-right"
-    };
-    const handleClick = utils_composeEventHandlers.composeEventHandlers(props.onClick, (e) => {
-      if (e.defaultPrevented)
+    const handleButtonClick = utils_composeEventHandlers.composeEventHandlers(props.onClick, (event) => {
+      if (event.defaultPrevented)
         return;
-      const scrollArea = context == null ? void 0 : context.scrollRef;
-      if (!scrollArea)
+      const scrollAreaElement = scrollAreaContext == null ? void 0 : scrollAreaContext.scrollRef;
+      if (!scrollAreaElement)
         return;
-      const itemNodes = Array.from(scrollArea.querySelectorAll("[data-in-view]"));
-      const isHorizontal = direction === "left" || direction === "right";
-      const scrollAxis = isHorizontal ? "left" : "top";
-      const isBackward = direction === "left" || direction === "up";
-      const scrollPos = isHorizontal ? scrollArea.scrollLeft : scrollArea.scrollTop;
-      const scrollAreaSize = isHorizontal ? scrollArea.clientWidth : scrollArea.clientHeight;
-      const maxScrollPos = isHorizontal ? scrollArea.scrollWidth - scrollAreaSize : scrollArea.scrollHeight - scrollAreaSize;
-      const buttonSize = isHorizontal ? e.currentTarget.offsetWidth : e.currentTarget.offsetHeight;
-      const visibleStart = scrollPos + (isBackward ? buttonSize : 0);
-      const visibleEnd = scrollPos + scrollAreaSize - (!isBackward ? buttonSize : 0);
-      const getElementBounds = (element) => {
-        const elementStart = isHorizontal ? element.offsetLeft : element.offsetTop;
-        const elementEnd = elementStart + (isHorizontal ? element.offsetWidth : element.offsetHeight);
-        return { elementStart, elementEnd };
+      const scrollableItems = Array.from(scrollAreaElement.querySelectorAll("[data-in-view]"));
+      const isHorizontalScroll = direction === "left" || direction === "right";
+      const scrollProperty = isHorizontalScroll ? "left" : "top";
+      const isScrollingBackward = direction === "left" || direction === "up";
+      const currentScrollPosition = isHorizontalScroll ? scrollAreaElement.scrollLeft : scrollAreaElement.scrollTop;
+      const viewportSize = isHorizontalScroll ? scrollAreaElement.clientWidth : scrollAreaElement.clientHeight;
+      const scrollButtonSize = isHorizontalScroll ? event.currentTarget.offsetWidth : event.currentTarget.offsetHeight;
+      const visibleAreaStart = currentScrollPosition + (isScrollingBackward ? scrollButtonSize : 0);
+      const visibleAreaEnd = currentScrollPosition + viewportSize - (!isScrollingBackward ? scrollButtonSize : 0);
+      const getItemBounds = (item) => {
+        const itemStart = isHorizontalScroll ? item.offsetLeft : item.offsetTop;
+        const itemEnd = itemStart + (isHorizontalScroll ? item.offsetWidth : item.offsetHeight);
+        return { itemStart, itemEnd };
       };
-      const isElementFullyVisible = (element) => {
-        const { elementStart, elementEnd } = getElementBounds(element);
-        return elementStart >= visibleStart && elementEnd <= visibleEnd;
+      const isItemFullyVisible = (item) => {
+        const { itemStart, itemEnd } = getItemBounds(item);
+        return itemStart >= visibleAreaStart && itemEnd <= visibleAreaEnd;
       };
-      const inViewIndices = itemNodes.map((node, index) => {
-        const dataInView = node.getAttribute("data-in-view") === "true";
-        const fullyVisible = isElementFullyVisible(node);
-        return dataInView && fullyVisible ? index : -1;
+      const fullyVisibleItemIndices = scrollableItems.map((item, index) => {
+        const isInView = item.getAttribute("data-in-view") === "true";
+        const isFullyVisible = isItemFullyVisible(item);
+        return isInView && isFullyVisible ? index : -1;
       }).filter((index) => index !== -1);
-      const hasReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-      const scrollBehavior = hasReducedMotion ? "auto" : (context == null ? void 0 : context.scrollBehavior) ?? "smooth";
-      let scrollAmount = scrollPos;
-      if (inViewIndices.length > 0) {
-        const currentIndex = isBackward ? inViewIndices[0] : inViewIndices[inViewIndices.length - 1];
-        const targetIndex = isBackward ? currentIndex > 0 ? currentIndex - 1 : currentIndex : currentIndex < itemNodes.length - 1 ? currentIndex + 1 : currentIndex;
-        const targetItem = itemNodes[targetIndex];
-        const { elementStart, elementEnd } = getElementBounds(targetItem);
-        const targetSize = elementEnd - elementStart;
-        scrollAmount = isBackward ? elementStart + targetSize - scrollAreaSize + buttonSize : elementStart - buttonSize;
-      } else {
-        const scrollBy = scrollAreaSize - buttonSize * 2;
-        scrollAmount = isBackward ? scrollPos - scrollBy : scrollPos + scrollBy;
+      const userPrefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const scrollBehavior = userPrefersReducedMotion ? "auto" : (scrollAreaContext == null ? void 0 : scrollAreaContext.scrollBehavior) ?? "smooth";
+      function calculateScrollAmount() {
+        if (fullyVisibleItemIndices.length <= 0) {
+          const defaultScrollAmount = viewportSize - scrollButtonSize * 2;
+          return isScrollingBackward ? currentScrollPosition - defaultScrollAmount : currentScrollPosition + defaultScrollAmount;
+        }
+        const isRightToLeft = scrollAreaContext == null ? void 0 : scrollAreaContext.isRtl;
+        const effectiveBackwardDirection = isRightToLeft ? !isScrollingBackward : isScrollingBackward;
+        const referenceItemIndex = effectiveBackwardDirection ? fullyVisibleItemIndices[0] : fullyVisibleItemIndices[fullyVisibleItemIndices.length - 1];
+        const targetItemIndex = effectiveBackwardDirection ? referenceItemIndex > 0 ? referenceItemIndex - 1 : referenceItemIndex : referenceItemIndex < scrollableItems.length - 1 ? referenceItemIndex + 1 : referenceItemIndex;
+        const targetItem = scrollableItems[targetItemIndex];
+        const { itemStart, itemEnd } = getItemBounds(targetItem);
+        const targetItemSize = itemEnd - itemStart;
+        return isScrollingBackward ? itemStart + targetItemSize - viewportSize + scrollButtonSize : itemStart - scrollButtonSize;
       }
-      scrollAmount = Math.max(0, Math.min(scrollAmount, maxScrollPos));
-      scrollArea.scrollTo({
-        [scrollAxis]: scrollAmount,
+      const newScrollPosition = calculateScrollAmount();
+      scrollAreaElement.scrollTo({
+        [scrollProperty]: newScrollPosition,
         behavior: scrollBehavior
       });
     });
@@ -142,14 +143,14 @@ const Button = React.forwardRef(
       {
         iconOnly: true,
         variant: "primary",
-        "aria-label": directionLabels[direction],
+        "aria-label": directionToAriaLabel[direction],
         "data-direction": direction,
-        tabIndex: isHidden ? -1 : void 0,
+        tabIndex: shouldBeHidden ? -1 : void 0,
         ...props,
-        onClick: handleClick,
+        onClick: handleButtonClick,
         ref: forwardRef,
-        className: classes,
-        children: children || /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: directionIcons[direction] })
+        className: buttonClasses,
+        children: children || /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: directionToIconName[direction] })
       }
     );
   }
@@ -206,7 +207,16 @@ const Root = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(
       RootContext.Provider,
       {
-        value: { scrollRef, variant, hasScrollTop, hasScrollBottom, hasScrollLeft, hasScrollRight, scrollBehavior },
+        value: {
+          scrollRef,
+          variant,
+          hasScrollTop,
+          hasScrollBottom,
+          hasScrollLeft,
+          hasScrollRight,
+          scrollBehavior,
+          isRtl: props.dir === "rtl"
+        },
         children: /* @__PURE__ */ jsxRuntime.jsxs(ScrollAreaPrimitive__namespace.Root, { ...props, ref: forwardRef, className: classes, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             ScrollAreaPrimitive__namespace.Viewport,

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

@@ -45,76 +45,77 @@ const Corner = React__default.forwardRef(
   }
 );
 Corner.displayName = "Corner";
+const directionToAriaLabel = {
+  up: "Scroll opp",
+  down: "Scroll ned",
+  left: "Scroll til venstre",
+  right: "Scroll til høyre"
+};
+const directionToIconName = {
+  up: "chevron-up",
+  down: "chevron-down",
+  left: "chevron-left",
+  right: "chevron-right"
+};
 const Button = React__default.forwardRef(
   ({ className, hidden, direction = "right", children, ...props }, forwardRef) => {
-    const context = React__default.useContext(RootContext);
-    const isHidden = hidden ?? (direction === "up" && !(context == null ? void 0 : context.hasScrollTop) || direction === "down" && !(context == null ? void 0 : context.hasScrollBottom) || direction === "left" && !(context == null ? void 0 : context.hasScrollLeft) || direction === "right" && !(context == null ? void 0 : context.hasScrollRight));
-    const classes = clsx(
+    const scrollAreaContext = React__default.useContext(RootContext);
+    const shouldBeHidden = hidden ?? (direction === "up" && !(scrollAreaContext == null ? void 0 : scrollAreaContext.hasScrollTop) || direction === "down" && !(scrollAreaContext == null ? void 0 : scrollAreaContext.hasScrollBottom) || direction === "left" && !(scrollAreaContext == null ? void 0 : scrollAreaContext.hasScrollLeft) || direction === "right" && !(scrollAreaContext == null ? void 0 : scrollAreaContext.hasScrollRight));
+    const buttonClasses = clsx(
       styles[`${rootClassName}__button`],
       {
-        [styles[`${rootClassName}__button--hidden`]]: isHidden
+        [styles[`${rootClassName}__button--hidden`]]: shouldBeHidden
       },
       className
     );
-    const directionLabels = {
-      up: "Scroll opp",
-      down: "Scroll ned",
-      left: "Scroll til venstre",
-      right: "Scroll til høyre"
-    };
-    const directionIcons = {
-      up: "chevron-up",
-      down: "chevron-down",
-      left: "chevron-left",
-      right: "chevron-right"
-    };
-    const handleClick = composeEventHandlers(props.onClick, (e) => {
-      if (e.defaultPrevented)
+    const handleButtonClick = composeEventHandlers(props.onClick, (event) => {
+      if (event.defaultPrevented)
         return;
-      const scrollArea = context == null ? void 0 : context.scrollRef;
-      if (!scrollArea)
+      const scrollAreaElement = scrollAreaContext == null ? void 0 : scrollAreaContext.scrollRef;
+      if (!scrollAreaElement)
         return;
-      const itemNodes = Array.from(scrollArea.querySelectorAll("[data-in-view]"));
-      const isHorizontal = direction === "left" || direction === "right";
-      const scrollAxis = isHorizontal ? "left" : "top";
-      const isBackward = direction === "left" || direction === "up";
-      const scrollPos = isHorizontal ? scrollArea.scrollLeft : scrollArea.scrollTop;
-      const scrollAreaSize = isHorizontal ? scrollArea.clientWidth : scrollArea.clientHeight;
-      const maxScrollPos = isHorizontal ? scrollArea.scrollWidth - scrollAreaSize : scrollArea.scrollHeight - scrollAreaSize;
-      const buttonSize = isHorizontal ? e.currentTarget.offsetWidth : e.currentTarget.offsetHeight;
-      const visibleStart = scrollPos + (isBackward ? buttonSize : 0);
-      const visibleEnd = scrollPos + scrollAreaSize - (!isBackward ? buttonSize : 0);
-      const getElementBounds = (element) => {
-        const elementStart = isHorizontal ? element.offsetLeft : element.offsetTop;
-        const elementEnd = elementStart + (isHorizontal ? element.offsetWidth : element.offsetHeight);
-        return { elementStart, elementEnd };
+      const scrollableItems = Array.from(scrollAreaElement.querySelectorAll("[data-in-view]"));
+      const isHorizontalScroll = direction === "left" || direction === "right";
+      const scrollProperty = isHorizontalScroll ? "left" : "top";
+      const isScrollingBackward = direction === "left" || direction === "up";
+      const currentScrollPosition = isHorizontalScroll ? scrollAreaElement.scrollLeft : scrollAreaElement.scrollTop;
+      const viewportSize = isHorizontalScroll ? scrollAreaElement.clientWidth : scrollAreaElement.clientHeight;
+      const scrollButtonSize = isHorizontalScroll ? event.currentTarget.offsetWidth : event.currentTarget.offsetHeight;
+      const visibleAreaStart = currentScrollPosition + (isScrollingBackward ? scrollButtonSize : 0);
+      const visibleAreaEnd = currentScrollPosition + viewportSize - (!isScrollingBackward ? scrollButtonSize : 0);
+      const getItemBounds = (item) => {
+        const itemStart = isHorizontalScroll ? item.offsetLeft : item.offsetTop;
+        const itemEnd = itemStart + (isHorizontalScroll ? item.offsetWidth : item.offsetHeight);
+        return { itemStart, itemEnd };
       };
-      const isElementFullyVisible = (element) => {
-        const { elementStart, elementEnd } = getElementBounds(element);
-        return elementStart >= visibleStart && elementEnd <= visibleEnd;
+      const isItemFullyVisible = (item) => {
+        const { itemStart, itemEnd } = getItemBounds(item);
+        return itemStart >= visibleAreaStart && itemEnd <= visibleAreaEnd;
       };
-      const inViewIndices = itemNodes.map((node, index) => {
-        const dataInView = node.getAttribute("data-in-view") === "true";
-        const fullyVisible = isElementFullyVisible(node);
-        return dataInView && fullyVisible ? index : -1;
+      const fullyVisibleItemIndices = scrollableItems.map((item, index) => {
+        const isInView = item.getAttribute("data-in-view") === "true";
+        const isFullyVisible = isItemFullyVisible(item);
+        return isInView && isFullyVisible ? index : -1;
       }).filter((index) => index !== -1);
-      const hasReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-      const scrollBehavior = hasReducedMotion ? "auto" : (context == null ? void 0 : context.scrollBehavior) ?? "smooth";
-      let scrollAmount = scrollPos;
-      if (inViewIndices.length > 0) {
-        const currentIndex = isBackward ? inViewIndices[0] : inViewIndices[inViewIndices.length - 1];
-        const targetIndex = isBackward ? currentIndex > 0 ? currentIndex - 1 : currentIndex : currentIndex < itemNodes.length - 1 ? currentIndex + 1 : currentIndex;
-        const targetItem = itemNodes[targetIndex];
-        const { elementStart, elementEnd } = getElementBounds(targetItem);
-        const targetSize = elementEnd - elementStart;
-        scrollAmount = isBackward ? elementStart + targetSize - scrollAreaSize + buttonSize : elementStart - buttonSize;
-      } else {
-        const scrollBy = scrollAreaSize - buttonSize * 2;
-        scrollAmount = isBackward ? scrollPos - scrollBy : scrollPos + scrollBy;
+      const userPrefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const scrollBehavior = userPrefersReducedMotion ? "auto" : (scrollAreaContext == null ? void 0 : scrollAreaContext.scrollBehavior) ?? "smooth";
+      function calculateScrollAmount() {
+        if (fullyVisibleItemIndices.length <= 0) {
+          const defaultScrollAmount = viewportSize - scrollButtonSize * 2;
+          return isScrollingBackward ? currentScrollPosition - defaultScrollAmount : currentScrollPosition + defaultScrollAmount;
+        }
+        const isRightToLeft = scrollAreaContext == null ? void 0 : scrollAreaContext.isRtl;
+        const effectiveBackwardDirection = isRightToLeft ? !isScrollingBackward : isScrollingBackward;
+        const referenceItemIndex = effectiveBackwardDirection ? fullyVisibleItemIndices[0] : fullyVisibleItemIndices[fullyVisibleItemIndices.length - 1];
+        const targetItemIndex = effectiveBackwardDirection ? referenceItemIndex > 0 ? referenceItemIndex - 1 : referenceItemIndex : referenceItemIndex < scrollableItems.length - 1 ? referenceItemIndex + 1 : referenceItemIndex;
+        const targetItem = scrollableItems[targetItemIndex];
+        const { itemStart, itemEnd } = getItemBounds(targetItem);
+        const targetItemSize = itemEnd - itemStart;
+        return isScrollingBackward ? itemStart + targetItemSize - viewportSize + scrollButtonSize : itemStart - scrollButtonSize;
       }
-      scrollAmount = Math.max(0, Math.min(scrollAmount, maxScrollPos));
-      scrollArea.scrollTo({
-        [scrollAxis]: scrollAmount,
+      const newScrollPosition = calculateScrollAmount();
+      scrollAreaElement.scrollTo({
+        [scrollProperty]: newScrollPosition,
         behavior: scrollBehavior
       });
     });
@@ -123,14 +124,14 @@ const Button = React__default.forwardRef(
       {
         iconOnly: true,
         variant: "primary",
-        "aria-label": directionLabels[direction],
+        "aria-label": directionToAriaLabel[direction],
         "data-direction": direction,
-        tabIndex: isHidden ? -1 : void 0,
+        tabIndex: shouldBeHidden ? -1 : void 0,
         ...props,
-        onClick: handleClick,
+        onClick: handleButtonClick,
         ref: forwardRef,
-        className: classes,
-        children: children || /* @__PURE__ */ jsx(Icon, { name: directionIcons[direction] })
+        className: buttonClasses,
+        children: children || /* @__PURE__ */ jsx(Icon, { name: directionToIconName[direction] })
       }
     );
   }
@@ -187,7 +188,16 @@ const Root = React__default.forwardRef(
     return /* @__PURE__ */ jsx(
       RootContext.Provider,
       {
-        value: { scrollRef, variant, hasScrollTop, hasScrollBottom, hasScrollLeft, hasScrollRight, scrollBehavior },
+        value: {
+          scrollRef,
+          variant,
+          hasScrollTop,
+          hasScrollBottom,
+          hasScrollLeft,
+          hasScrollRight,
+          scrollBehavior,
+          isRtl: props.dir === "rtl"
+        },
         children: /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, { ...props, ref: forwardRef, className: classes, children: [
           /* @__PURE__ */ jsx(
             ScrollAreaPrimitive.Viewport,

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

@@ -15,7 +15,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<Reac
 } & {
     asChild?: boolean | undefined;
     loading?: boolean | undefined;
-    fullWidth?: boolean | undefined;
+    fullWidth?: boolean | undefined; /** Hidden will fade the button out. Used when the scrollbar is at the end */
     size?: "sm" | "md" | "lg" | undefined;
     variant?: "text" | "text-negative" | "primary" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
 } & {
@@ -26,7 +26,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<Reac
 } & {
     asChild?: boolean | undefined;
     loading?: boolean | undefined;
-    fullWidth?: boolean | undefined;
+    fullWidth?: boolean | undefined; /** Hidden will fade the button out. Used when the scrollbar is at the end */
     size?: "sm" | "md" | "lg" | undefined;
     variant?: "text" | "text-negative" | "primary" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
 } & {

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

@@ -20,6 +20,7 @@ type RootContextType = {
     hasScrollLeft: boolean | undefined;
     hasScrollRight: boolean | undefined;
     scrollBehavior: 'smooth' | 'auto';
+    isRtl: boolean;
 };
 export declare const RootContext: React.Context<RootContextType | undefined>;
 export declare const Root: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & {

package/dist/utils/breakpointToNumber.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const breakpointToNumber = (breakpoint) => {
+  return parseInt((breakpoint || "").replace("px", ""));
+};
+exports.breakpointToNumber = breakpointToNumber;

package/dist/utils/breakpointToNumber.d.ts

@@ -0,0 +1 @@
+export declare const breakpointToNumber: (breakpoint: string) => number;

package/dist/utils/breakpointToNumber.js

@@ -0,0 +1,6 @@
+const breakpointToNumber = (breakpoint) => {
+  return parseInt((breakpoint || "").replace("px", ""));
+};
+export {
+  breakpointToNumber
+};

package/package.json

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