@telia/teddy 0.0.71 → 0.0.73

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

@@ -46,54 +46,96 @@ const Corner = React__default.forwardRef(
 );
 Corner.displayName = "Corner";
 const Button = React__default.forwardRef(
-  ({ className, hidden, direction, children, ...props }, forwardRef) => {
+  ({ className, hidden, direction = "right", children, ...props }, forwardRef) => {
     const context = React__default.useContext(RootContext);
-    const internalHidden = 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 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(
-      [styles[`${rootClassName}__button`]],
+      styles[`${rootClassName}__button`],
       {
-        [styles[`${rootClassName}__button--hidden`]]: internalHidden
+        [styles[`${rootClassName}__button--hidden`]]: isHidden
       },
       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)
+        return;
+      const scrollArea = context == null ? void 0 : context.scrollRef;
+      if (!scrollArea)
+        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 isElementFullyVisible = (element) => {
+        const { elementStart, elementEnd } = getElementBounds(element);
+        return elementStart >= visibleStart && elementEnd <= visibleEnd;
+      };
+      const inViewIndices = itemNodes.map((node, index) => {
+        const dataInView = node.getAttribute("data-in-view") === "true";
+        const fullyVisible = isElementFullyVisible(node);
+        return dataInView && fullyVisible ? 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;
+      }
+      scrollAmount = Math.max(0, Math.min(scrollAmount, maxScrollPos));
+      scrollArea.scrollTo({
+        [scrollAxis]: scrollAmount,
+        behavior: scrollBehavior
+      });
+    });
     return /* @__PURE__ */ jsx(
       Button$1,
       {
         iconOnly: true,
         variant: "primary",
-        "aria-label": direction === "down" ? "Scroll ned" : direction === "up" ? "Scroll opp" : direction === "left" ? "Scroll venstre" : "Scroll høyre",
+        "aria-label": directionLabels[direction],
         "data-direction": direction,
-        tabIndex: internalHidden ? -1 : void 0,
+        tabIndex: isHidden ? -1 : void 0,
         ...props,
-        onClick: composeEventHandlers(props.onClick, (e) => {
-          var _a, _b;
-          if (e.defaultPrevented)
-            return;
-          const scroll = (_a = context == null ? void 0 : context.scrollRef) == null ? void 0 : _a.getBoundingClientRect();
-          const scrollDirection = direction === "up" || direction === "left" ? -1 : 1;
-          const scrollAxis = direction === "up" || direction === "down" ? "top" : "left";
-          const buttonSize = direction === "up" || direction === "down" ? e.currentTarget.offsetHeight : e.currentTarget.offsetWidth;
-          const scrollAmount = ((direction === "up" || direction === "down" ? scroll == null ? void 0 : scroll.height : scroll == null ? void 0 : scroll.width) || 0) - buttonSize * 2;
-          const hasReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-          const scrollBehavior = hasReducedMotion ? "auto" : (context == null ? void 0 : context.scrollBehavior) ?? "smooth";
-          (_b = context == null ? void 0 : context.scrollRef) == null ? void 0 : _b.scrollBy({
-            [scrollAxis]: scrollAmount * scrollDirection,
-            behavior: scrollBehavior
-          });
-        }),
+        onClick: handleClick,
         ref: forwardRef,
         className: classes,
-        children: children || /* @__PURE__ */ jsx(
-          Icon,
-          {
-            name: direction === "down" ? "chevron-down" : direction === "up" ? "chevron-up" : direction === "left" ? "chevron-left" : "chevron-right"
-          }
-        )
+        children: children || /* @__PURE__ */ jsx(Icon, { name: directionIcons[direction] })
       }
     );
   }
 );
-Button$1.displayName = "Button";
+Button.displayName = "Button";
 const rootClassName = "teddy-scroll-area";
 const RootContext = React__default.createContext(void 0);
 function isScrollable(element) {

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

@@ -5,7 +5,7 @@ import { Button as PrimitiveButton } from '../button';
  * Props for the ScrollAreaButton component.
  */
 export type ButtonProps = Omit<React.ComponentPropsWithoutRef<typeof PrimitiveButton>, 'hidden'> & {
-    /** In which direction the button should point and scroll to */
+    /** The direction in which the button should point and scroll */
     direction?: 'up' | 'down' | 'left' | 'right';
     /** Hidden will fade the button out. Used when the scrollbar is at the end */
     hidden?: boolean;
@@ -17,7 +17,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<Reac
     loading?: boolean | undefined;
     fullWidth?: boolean | undefined;
     size?: "sm" | "md" | "lg" | 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;
+    variant?: "text" | "text-negative" | "primary" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
 } & {
     iconOnly: true;
     "aria-label": string;
@@ -28,12 +28,12 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<Reac
     loading?: boolean | undefined;
     fullWidth?: boolean | undefined;
     size?: "sm" | "md" | "lg" | 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;
+    variant?: "text" | "text-negative" | "primary" | "list-item" | "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">, "hidden"> & {
-    /** In which direction the button should point and scroll to */
+    /** The direction in which the button should point and scroll */
     direction?: "left" | "right" | "up" | "down" | undefined;
     /** Hidden will fade the button out. Used when the scrollbar is at the end */
     hidden?: boolean | undefined;

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

@@ -7,6 +7,7 @@ const components_scrollArea_scrollAreaBar = require("./scroll-area-bar.cjs");
 const reactSlot = require("@radix-ui/react-slot");
 const utils_composeEventHandlers = require("../../utils/composeEventHandlers.cjs");
 const utils_composeRefs = require("../../utils/composeRefs.cjs");
+const reactIntersectionObserver = require("react-intersection-observer");
 function scrollItemToCenter(item, scrollArea, scrollBehavior) {
   const itemRect = item.getBoundingClientRect();
   const scrollAreaRect = scrollArea.getBoundingClientRect();
@@ -26,7 +27,16 @@ const Item = React.forwardRef(
     const classes = clsx([components_scrollArea_scrollAreaBar.styles[`${components_scrollArea_scrollAreaBar.rootClassName}__item`]], className);
     const Comp = asChild ? reactSlot.Slot : "div";
     const ref = React.useRef(null);
-    const composedRef = utils_composeRefs.useComposedRefs(ref, forwardRef);
+    const { ref: inViewRef, inView } = reactIntersectionObserver.useInView({
+      threshold: 1
+    });
+    const adjustedInViewRef = React.useCallback(
+      (node) => {
+        inViewRef(node);
+      },
+      [inViewRef]
+    );
+    const composedRef = utils_composeRefs.useComposedRefs(ref, forwardRef, adjustedInViewRef);
     const context = React.useContext(components_scrollArea_scrollAreaBar.RootContext);
     const internalScrollBehavior = scrollBehavior ?? (context == null ? void 0 : context.scrollBehavior) ?? "smooth";
     React.useEffect(() => {
@@ -46,7 +56,8 @@ const Item = React.forwardRef(
           scrollItemToCenter(ref.current, context == null ? void 0 : context.scrollRef, internalScrollBehavior);
         }),
         ref: composedRef,
-        className: classes
+        className: classes,
+        "data-in-view": inView
       }
     );
   }

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

@@ -5,6 +5,7 @@ import { s as styles, r as rootClassName, a as RootContext } from "./scroll-area
 import { Slot } from "@radix-ui/react-slot";
 import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
 import { useComposedRefs } from "../../utils/composeRefs.js";
+import { useInView } from "react-intersection-observer";
 function scrollItemToCenter(item, scrollArea, scrollBehavior) {
   const itemRect = item.getBoundingClientRect();
   const scrollAreaRect = scrollArea.getBoundingClientRect();
@@ -24,7 +25,16 @@ const Item = React__default.forwardRef(
     const classes = clsx([styles[`${rootClassName}__item`]], className);
     const Comp = asChild ? Slot : "div";
     const ref = React__default.useRef(null);
-    const composedRef = useComposedRefs(ref, forwardRef);
+    const { ref: inViewRef, inView } = useInView({
+      threshold: 1
+    });
+    const adjustedInViewRef = React__default.useCallback(
+      (node) => {
+        inViewRef(node);
+      },
+      [inViewRef]
+    );
+    const composedRef = useComposedRefs(ref, forwardRef, adjustedInViewRef);
     const context = React__default.useContext(RootContext);
     const internalScrollBehavior = scrollBehavior ?? (context == null ? void 0 : context.scrollBehavior) ?? "smooth";
     React__default.useEffect(() => {
@@ -44,7 +54,8 @@ const Item = React__default.forwardRef(
           scrollItemToCenter(ref.current, context == null ? void 0 : context.scrollRef, internalScrollBehavior);
         }),
         ref: composedRef,
-        className: classes
+        className: classes,
+        "data-in-view": inView
       }
     );
   }

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

@@ -34,7 +34,7 @@ export declare const Tabs: import('react').ForwardRefExoticComponent<Omit<Omit<i
         loading?: boolean | undefined;
         fullWidth?: boolean | undefined;
         size?: "sm" | "md" | "lg" | 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;
+        variant?: "text" | "text-negative" | "primary" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
     } & {
         iconOnly: true;
         "aria-label": string;
@@ -45,7 +45,7 @@ export declare const Tabs: import('react').ForwardRefExoticComponent<Omit<Omit<i
         loading?: boolean | undefined;
         fullWidth?: boolean | undefined;
         size?: "sm" | "md" | "lg" | 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;
+        variant?: "text" | "text-negative" | "primary" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
     } & {
         iconOnly?: false | undefined;
         "aria-label"?: string | undefined;

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

@@ -10,7 +10,7 @@ export declare const ScrollButton: React.ForwardRefExoticComponent<Omit<Omit<Omi
     loading?: boolean | undefined;
     fullWidth?: boolean | undefined;
     size?: "sm" | "md" | "lg" | 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;
+    variant?: "text" | "text-negative" | "primary" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
 } & {
     iconOnly: true;
     "aria-label": string;
@@ -21,7 +21,7 @@ export declare const ScrollButton: React.ForwardRefExoticComponent<Omit<Omit<Omi
     loading?: boolean | undefined;
     fullWidth?: boolean | undefined;
     size?: "sm" | "md" | "lg" | 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;
+    variant?: "text" | "text-negative" | "primary" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
 } & {
     iconOnly?: false | undefined;
     "aria-label"?: string | undefined;

package/dist/components/text-field/index.d.ts

@@ -34,7 +34,7 @@ export declare const TextField: import('react').ForwardRefExoticComponent<Omit<i
         loading?: boolean | undefined;
         fullWidth?: boolean | undefined;
         size?: "sm" | "md" | "lg" | 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;
+        variant?: "text" | "text-negative" | "primary" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
     } & {
         iconOnly: true;
         "aria-label": string;
@@ -45,7 +45,7 @@ export declare const TextField: import('react').ForwardRefExoticComponent<Omit<i
         loading?: boolean | undefined;
         fullWidth?: boolean | undefined;
         size?: "sm" | "md" | "lg" | 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;
+        variant?: "text" | "text-negative" | "primary" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
     } & {
         iconOnly?: false | undefined;
         "aria-label"?: string | undefined;

package/dist/components/text-field/text-field-button.d.ts

@@ -11,7 +11,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<Reac
     loading?: boolean | undefined;
     fullWidth?: boolean | undefined;
     size?: "sm" | "md" | "lg" | 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;
+    variant?: "text" | "text-negative" | "primary" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
 } & {
     iconOnly: true;
     "aria-label": string;
@@ -22,7 +22,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<Reac
     loading?: boolean | undefined;
     fullWidth?: boolean | undefined;
     size?: "sm" | "md" | "lg" | 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;
+    variant?: "text" | "text-negative" | "primary" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
 } & {
     iconOnly?: false | undefined;
     "aria-label"?: string | undefined;

package/dist/components/toggle/toggle.d.ts

@@ -29,8 +29,8 @@ declare const Toggle: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHT
     Input: React.ForwardRefExoticComponent<ToggleInputProps & React.RefAttributes<HTMLButtonElement>>;
     Thumb: React.ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchThumbProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
     Indicator: 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" | "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" | "visible" | "volume" | "zoom-out" | "zoom" | "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" | "add" | "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" | "infinite" | "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" | "reverse" | "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" | "help" | "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?: ("font" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl") | undefined;
+        name: "link" | "map" | "menu" | "search" | "summary" | "time" | "video" | "filter" | "image" | "stop" | "key" | "download" | "x" | "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" | "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?: ("xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "font") | undefined;
         children?: React.ReactNode;
     }, "ref">> & React.RefAttributes<SVGSVGElement>>;
 };

package/dist/main.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_navigationCard_index = require("./components/navigation-card/index.cjs");
 const components_checkbox_index = require("./components/checkbox/index.cjs");
 const components_toast_index = require("./components/toast/index.cjs");
 const components_toggletip_index = require("./components/toggletip/index.cjs");
@@ -55,6 +56,7 @@ const tokens_spacing_variables = require("./tokens/spacing/variables.cjs");
 const tokens_typography_variables = require("./tokens/typography/variables.cjs");
 const sonner = require("sonner");
 const components_input_inputGroup = require("./components/input/input-group.cjs");
+exports.NavigationCard = components_navigationCard_index.NavigationCard;
 exports.Checkbox = components_checkbox_index.Checkbox;
 exports.CheckboxGroup = components_checkbox_index.CheckboxGroup;
 exports.Toast = components_toast_index.Toast;

package/dist/main.js

@@ -1,3 +1,4 @@
+import { NavigationCard } from "./components/navigation-card/index.js";
 import { Checkbox, CheckboxGroup } from "./components/checkbox/index.js";
 import { Toast } from "./components/toast/index.js";
 import { Toggletip } from "./components/toggletip/index.js";
@@ -86,6 +87,7 @@ export {
   Link,
   List,
   M as Modal,
+  NavigationCard,
   N as NavigationMenu,
   Notabene,
   Notification,