@telia/teddy 0.0.18 → 0.0.20

package/README.md

@@ -22,9 +22,6 @@ Teddy is built on a foundation of three core principles:
 - **Accessibility**: With a commitment to inclusivity, accessibility is at the forefront of our design process. We aim
   to make our components universally usable, adhering to WCAG guidelines and accessibility best practices.
 
-- **Performance**: We prioritize high performance to guarantee a smooth user experience. Our components are optimized
-  for efficiency, balancing speed with functionality.
-
 ## Getting Started
 
 To contribute to or utilize Teddy:

package/dist/components/accordion/accordion.d.ts

@@ -1,6 +1,6 @@
-import { IconProps } from '../icon';
-import { HeadingProps } from '../heading';
 import { default as React } from 'react';
+import { HeadingProps } from '../heading';
+import { IconProps } from '../icon';
 
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 /** -------------------------------------------------------------------------------------------------

package/dist/components/box/box.d.ts

@@ -1,5 +1,5 @@
-import { ChildrenLayoutProps } from '../../utils/layout';
 import { default as React } from 'react';
+import { ChildrenLayoutProps } from '../../utils/generate-styling';
 
 /** -------------------------------------------------------------------------------------------------
  * Box

package/dist/components/box/box.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
-import { extractProps } from "../../utils/layout/index.js";
+import { extractProps } from "../../utils/generate-styling/index.js";
 import { Slot } from "@radix-ui/react-slot";
 const styles = {};
 const rootClassName = "teddy-box";

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

@@ -1,4 +1,4 @@
-import { ChildrenLayoutProps } from '../../utils/layout';
+import { ChildrenLayoutProps } from '../../utils/generate-styling';
 import * as React from 'react';
 declare const variants: readonly ["primary", "secondary", "destructive", "tertiary-purple", "text", "expressive", "primary-negative", "secondary-negative", "destructive-negative", "tertiary-purple-negative", "text-negative", "expressive-negative"];
 export type Variant = (typeof variants)[number];

package/dist/components/button/button.js

@@ -3,7 +3,7 @@ import { Slottable, Slot } from "@radix-ui/react-slot";
 import { clsx } from "clsx";
 import * as React from "react";
 import { Spinner } from "../spinner/spinner.js";
-import { extractProps } from "../../utils/layout/index.js";
+import { extractProps } from "../../utils/generate-styling/index.js";
 const fadeInAnimation = "_fadeInAnimation_1biph_1";
 const scaleInAnimation = "_scaleInAnimation_1biph_1";
 const styles = {

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

@@ -1,20 +1,23 @@
-import { Link as PrimitiveLink } from '../link';
-import { Button as PrimitiveButton } from '../button';
-import { Heading as PrimitiveHeading } from '../heading';
-import { Box } from '../box';
-import { Flex } from '../flex';
 import { default as React } from 'react';
+import { Box } from '../box';
+import { Heading as PrimitiveHeading } from '../heading';
+import { Button as PrimitiveButton } from '../button';
+import { Link as PrimitiveLink } from '../link';
+import { Grid } from '../grid';
 
 declare const variantOptions: readonly ["purple-light", "purple-dark", "gray", "white", "beige"];
 type Variant = (typeof variantOptions)[number];
+type Layout = 'navigation-vertical' | 'navigation-horizontal-small' | 'navigation-horizontal-large' | 'rich-card';
 /** -------------------------------------------------------------------------------------------------
  * Root
  * -----------------------------------------------------------------------------------------------*/
-type RootProps = React.ComponentPropsWithoutRef<typeof Flex> & {
+type RootProps = React.ComponentPropsWithoutRef<typeof Grid> & {
     asChild?: boolean;
     variant?: Variant;
     bordered?: boolean;
+    shadow?: boolean;
     backgroundImageSrc?: string;
+    layout?: Layout;
 };
 /** -------------------------------------------------------------------------------------------------
  * Heading
@@ -23,7 +26,7 @@ type HeadingProps = Partial<React.ComponentPropsWithoutRef<typeof PrimitiveHeadi
 /** -------------------------------------------------------------------------------------------------
  * Content
  * -----------------------------------------------------------------------------------------------*/
-type ContentProps = React.ComponentPropsWithoutRef<'div'>;
+type ContentProps = React.ComponentPropsWithoutRef<typeof Box>;
 /** -------------------------------------------------------------------------------------------------
  * Slot
  * -----------------------------------------------------------------------------------------------*/
@@ -31,10 +34,10 @@ type SlotProps = React.ComponentPropsWithoutRef<typeof Box> & {
     align?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 };
 /** -------------------------------------------------------------------------------------------------
- * Image
+ * Illustration
  * -----------------------------------------------------------------------------------------------*/
 declare const insetOptions: readonly ["top", "bottom", "left", "right", "all", "top-right-left", "bottom-left-right", "top-left", "top-right", "bottom-left", "bottom-right", "top-bottom", "left-right"];
-type ImageProps = React.ComponentPropsWithoutRef<'img'> & {
+type IllustrationProps = React.ComponentPropsWithoutRef<'div'> & {
     /** The inset allows make the image bleed out to the edges */
     inset?: (typeof insetOptions)[number];
 };
@@ -52,12 +55,12 @@ type LineProps = Omit<React.ComponentPropsWithoutRef<typeof Box>, 'asChild' | 'a
 declare const Card: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>> & {
     Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
     Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Image: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+    Content: React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<HTMLDivElement>>;
+    Illustration: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         /** The inset allows make the image bleed out to the edges */
-        inset?: "all" | "top" | "bottom" | "right" | "left" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-right-left" | "bottom-left-right" | "top-bottom" | "left-right" | undefined;
-    } & React.RefAttributes<HTMLImageElement>>;
-    Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/layout/flex').FlexChildren & import('../../utils/layout/grid').GridChildren & import('../../utils/layout/position').PositionProps & import('../../utils/layout/inset').InsetProps & import('../../utils/layout/margin').MarginProps & import('../../utils/layout/padding').PaddingProps & import('../../utils/layout/width').WidthProps & import('../../utils/layout/height').HeightProps & {
+        inset?: "top" | "bottom" | "left" | "right" | "all" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-right-left" | "bottom-left-right" | "top-bottom" | "left-right" | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
         asChild?: boolean | undefined;
         loading?: boolean | undefined;
         fullWidth?: boolean | undefined;
@@ -66,7 +69,7 @@ declare const Card: React.ForwardRefExoticComponent<RootProps & React.RefAttribu
     } & {
         iconOnly: true;
         "aria-label": string;
-    } & React.RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/layout/flex').FlexChildren & import('../../utils/layout/grid').GridChildren & import('../../utils/layout/position').PositionProps & import('../../utils/layout/inset').InsetProps & import('../../utils/layout/margin').MarginProps & import('../../utils/layout/padding').PaddingProps & import('../../utils/layout/width').WidthProps & import('../../utils/layout/height').HeightProps & {
+    } & React.RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
         asChild?: boolean | undefined;
         loading?: boolean | undefined;
         fullWidth?: boolean | undefined;
@@ -95,7 +98,7 @@ type CardProps = {
     Heading: HeadingProps;
     Content: ContentProps;
     Button: ButtonProps;
-    Image: ImageProps;
+    Illustration: IllustrationProps;
     Slot: SlotProps;
     Link: LinkProps;
     Line: LineProps;

package/dist/components/card/card.js

@@ -3,42 +3,49 @@ import React__default from "react";
 import clsx from "clsx";
 import { composeRefs } from "../../utils/composeRefs.js";
 import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
-import { Flex } from "../flex/flex.js";
 import { Box } from "../box/box.js";
 import { Heading as Heading$1 } from "../heading/heading.js";
 import { Button as Button$1 } from "../button/button.js";
 import { Link as Link$1 } from "../link/link.js";
-import { TextSpacing } from "../text-spacing/text-spacing.js";
 import { teddySpacing50 } from "../../tokens/spacing/variables.js";
+import { Grid } from "../grid/grid.js";
 const styles = {
-  "teddy-card": "_teddy-card_1h4hf_3",
-  "teddy-card__slot": "_teddy-card__slot_1h4hf_13",
-  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_1h4hf_16",
-  "teddy-card__slot--center": "_teddy-card__slot--center_1h4hf_19",
-  "teddy-card__action": "_teddy-card__action_1h4hf_40",
-  "teddy-card__action--disabled": "_teddy-card__action--disabled_1h4hf_40",
-  "teddy-card--border": "_teddy-card--border_1h4hf_46",
-  "teddy-card__line": "_teddy-card__line_1h4hf_49",
-  "teddy-card--purple-light": "_teddy-card--purple-light_1h4hf_53",
-  "teddy-card--purple-dark": "_teddy-card--purple-dark_1h4hf_67",
-  "teddy-card--white": "_teddy-card--white_1h4hf_86",
-  "teddy-card--gray": "_teddy-card--gray_1h4hf_100",
-  "teddy-card--beige": "_teddy-card--beige_1h4hf_114",
-  "teddy-card__image--as-background": "_teddy-card__image--as-background_1h4hf_128",
-  "teddy-card__heading": "_teddy-card__heading_1h4hf_131",
-  "teddy-card--background-image": "_teddy-card--background-image_1h4hf_134",
-  "teddy-card__image": "_teddy-card__image_1h4hf_128",
-  "teddy-card__image--inset-top": "_teddy-card__image--inset-top_1h4hf_149",
-  "teddy-card__image--inset-bottom": "_teddy-card__image--inset-bottom_1h4hf_152",
-  "teddy-card__image--inset-left": "_teddy-card__image--inset-left_1h4hf_155",
-  "teddy-card__image--inset-right": "_teddy-card__image--inset-right_1h4hf_158"
+  "teddy-card": "_teddy-card_aok47_3",
+  "teddy-card__slot": "_teddy-card__slot_aok47_13",
+  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_aok47_16",
+  "teddy-card__slot--center": "_teddy-card__slot--center_aok47_19",
+  "teddy-card--shadow": "_teddy-card--shadow_aok47_41",
+  "teddy-card__action": "_teddy-card__action_aok47_45",
+  "teddy-card__action--disabled": "_teddy-card__action--disabled_aok47_45",
+  "teddy-card--border": "_teddy-card--border_aok47_52",
+  "teddy-card--layout": "_teddy-card--layout_aok47_55",
+  "teddy-card__illustration": "_teddy-card__illustration_aok47_55",
+  "teddy-card__content": "_teddy-card__content_aok47_58",
+  "teddy-card__heading": "_teddy-card__heading_aok47_61",
+  "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_aok47_67",
+  "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_aok47_86",
+  "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_aok47_98",
+  "teddy-card--rich-card": "_teddy-card--rich-card_aok47_110",
+  "teddy-card__line": "_teddy-card__line_aok47_128",
+  "teddy-card--purple-light": "_teddy-card--purple-light_aok47_132",
+  "teddy-card--purple-dark": "_teddy-card--purple-dark_aok47_146",
+  "teddy-card--white": "_teddy-card--white_aok47_165",
+  "teddy-card--gray": "_teddy-card--gray_aok47_179",
+  "teddy-card--beige": "_teddy-card--beige_aok47_193",
+  "teddy-card__image--as-background": "_teddy-card__image--as-background_aok47_207",
+  "teddy-card--background-image": "_teddy-card--background-image_aok47_213",
+  "teddy-card__inset": "_teddy-card__inset_aok47_218",
+  "teddy-card__inset--top": "_teddy-card__inset--top_aok47_221",
+  "teddy-card__inset--left": "_teddy-card__inset--left_aok47_224",
+  "teddy-card__inset--right": "_teddy-card__inset--right_aok47_227",
+  "teddy-card__inset--bottom": "_teddy-card__inset--bottom_aok47_230"
 };
 const rootClassName = "teddy-card";
 const actionElementIdentifier = `${rootClassName}__action`;
 const variantOptions = ["purple-light", "purple-dark", "gray", "white", "beige"];
 const RootContext = React__default.createContext(void 0);
 const Root = React__default.forwardRef(
-  ({ className, children, backgroundImageSrc, variant, bordered, ...props }, forwardRef) => {
+  ({ className, children, shadow, backgroundImageSrc, layout, variant, bordered, ...props }, forwardRef) => {
     const buttonRef = React__default.useRef(null);
     const linkRef = React__default.useRef(null);
     const classes = clsx(
@@ -46,14 +53,16 @@ const Root = React__default.forwardRef(
       {
         [styles[`${rootClassName}--${variant}`]]: variant,
         [styles[`${rootClassName}--border`]]: bordered,
-        [styles[`${rootClassName}--background-image`]]: backgroundImageSrc
+        [styles[`${rootClassName}--shadow`]]: shadow,
+        [styles[`${rootClassName}--background-image`]]: backgroundImageSrc,
+        [styles[`${rootClassName}--layout`]]: layout,
+        [styles[`${rootClassName}--${layout}`]]: layout
       },
       className
     );
-    return /* @__PURE__ */ jsx(RootContext.Provider, { value: { buttonRef, linkRef, variant }, children: /* @__PURE__ */ jsx(TextSpacing, { asChild: true, children: /* @__PURE__ */ jsx(
-      Flex,
+    return /* @__PURE__ */ jsx(RootContext.Provider, { value: { buttonRef, linkRef, variant, layout }, children: /* @__PURE__ */ jsx(
+      Grid,
       {
-        direction: "column",
         ...props,
         className: classes,
         style: backgroundImageSrc ? { background: `url(${backgroundImageSrc})`, ...props.style } : props.style,
@@ -68,13 +77,14 @@ const Root = React__default.forwardRef(
         ref: forwardRef,
         children
       }
-    ) }) });
+    ) });
   }
 );
 Root.displayName = "Card";
 const Heading = React__default.forwardRef(
-  ({ className, variant = "title-200", as = "h2", ...props }, forwardRef) => {
+  ({ className, as = "h2", ...props }, forwardRef) => {
     const classes = clsx([styles[`${rootClassName}__heading`]], className);
+    const variant = props.variant ?? "title-200";
     return /* @__PURE__ */ jsx(
       Heading$1,
       {
@@ -90,7 +100,7 @@ const Heading = React__default.forwardRef(
 Heading.displayName = "Card.Heading";
 const Content = React__default.forwardRef(({ className, ...props }, forwardRef) => {
   const classes = clsx([styles[`${rootClassName}__content`]], className);
-  return /* @__PURE__ */ jsx("div", { ...props, ref: forwardRef, className: classes });
+  return /* @__PURE__ */ jsx(Box, { ...props, ref: forwardRef, className: classes });
 });
 Content.displayName = "Card.Content";
 const Slot = React__default.forwardRef(({ className, align, ...props }, forwardRef) => {
@@ -133,21 +143,19 @@ const insetOptions = [
   "top-bottom",
   "left-right"
 ];
-const Image = React__default.forwardRef(({ className, ...props }, forwardRef) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  const classes = clsx(
-    [styles[`${rootClassName}__image`]],
-    {
-      [styles[`${rootClassName}__image--inset-top`]]: ((_a = props.inset) == null ? void 0 : _a.includes("top")) || ((_b = props.inset) == null ? void 0 : _b.includes("all")),
-      [styles[`${rootClassName}__image--inset-bottom`]]: ((_c = props.inset) == null ? void 0 : _c.includes("bottom")) || ((_d = props.inset) == null ? void 0 : _d.includes("all")),
-      [styles[`${rootClassName}__image--inset-left`]]: ((_e = props.inset) == null ? void 0 : _e.includes("left")) || ((_f = props.inset) == null ? void 0 : _f.includes("all")),
-      [styles[`${rootClassName}__image--inset-right`]]: ((_g = props.inset) == null ? void 0 : _g.includes("right")) || ((_h = props.inset) == null ? void 0 : _h.includes("all"))
-    },
-    className
-  );
-  return /* @__PURE__ */ jsx("img", { ...props, ref: forwardRef, className: classes });
-});
-Image.displayName = "Card.Image";
+const Illustration = React__default.forwardRef(
+  ({ className, children, ...props }, forwardRef) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const classes = clsx([styles[`${rootClassName}__illustration`]], className, [styles[`${rootClassName}__inset`]], {
+      [styles[`${rootClassName}__inset--top`]]: ((_a = props.inset) == null ? void 0 : _a.includes("top")) || ((_b = props.inset) == null ? void 0 : _b.includes("all")),
+      [styles[`${rootClassName}__inset--bottom`]]: ((_c = props.inset) == null ? void 0 : _c.includes("bottom")) || ((_d = props.inset) == null ? void 0 : _d.includes("all")),
+      [styles[`${rootClassName}__inset--left`]]: ((_e = props.inset) == null ? void 0 : _e.includes("left")) || ((_f = props.inset) == null ? void 0 : _f.includes("all")),
+      [styles[`${rootClassName}__inset--right`]]: ((_g = props.inset) == null ? void 0 : _g.includes("right")) || ((_h = props.inset) == null ? void 0 : _h.includes("all"))
+    });
+    return /* @__PURE__ */ jsx("div", { ...props, className: classes, ref: forwardRef, children });
+  }
+);
+Illustration.displayName = "Card.Illustration";
 function getButtonVariant(variant) {
   switch (variant) {
     case "purple-dark":
@@ -198,7 +206,7 @@ const Card = Object.assign(Root, {
   Root,
   Heading,
   Content,
-  Image,
+  Illustration,
   Button,
   Link,
   Slot,

package/dist/components/chip/chip-indicator.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { Icon } from '../icon';
+
+export type IndicatorProps = Partial<React.ComponentPropsWithoutRef<typeof Icon>>;
+export declare const Indicator: React.ForwardRefExoticComponent<Partial<Omit<React.SVGProps<SVGSVGElement> & {
+    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" | "sync" | "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" | "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>>;

package/dist/components/chip/chip-indicator.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./chip.js";
+import "../../assets/5636ec8e4de58d64.svg";
+import { Icon } from "../icon/icon.js";
+const Indicator = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__indicator`]], className);
+    return /* @__PURE__ */ jsx(Icon, { name: "checkmark", ...props, ref: forwardRef, className: classes });
+  }
+);
+Indicator.displayName = "Indicator";
+export {
+  Indicator
+};

package/dist/components/chip/chip-item.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { Flex } from '../flex';
+
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+export type ItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & {
+    unavailable?: boolean;
+} & React.ComponentPropsWithoutRef<typeof Flex>;
+/** An item in the group. */
+export declare const Item: React.ForwardRefExoticComponent<ItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/chip/chip-item.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { RootContext, s as styles, rootClassName } from "./chip.js";
+import { Flex } from "../flex/flex.js";
+import { Indicator } from "./chip-indicator.js";
+const Item = React__default.forwardRef(function Item2({ className, unavailable, ...props }, forwardRef) {
+  const context = React__default.useContext(RootContext);
+  const classes = clsx(
+    [
+      styles[`${rootClassName}__item`],
+      {
+        [styles[`${rootClassName}__item--${context == null ? void 0 : context.variant}`]]: context == null ? void 0 : context.variant,
+        [styles[`${rootClassName}__item--unavailable`]]: unavailable
+      }
+    ],
+    className
+  );
+  return /* @__PURE__ */ jsx(Flex, { gap: props.gap || "100", flexGrow: (context == null ? void 0 : context.fullWidth) ? "1" : "0", asChild: true, children: /* @__PURE__ */ jsxs(ToggleGroupPrimitive.Item, { ...props, className: classes, ref: forwardRef, children: [
+    props.children,
+    (context == null ? void 0 : context.variant) === "filter" && /* @__PURE__ */ jsx(Indicator, {})
+  ] }) });
+});
+Item.displayName = "Item";
+export {
+  Item
+};

package/dist/components/chip/chip.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { Flex } from '../flex';
+
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+export declare const rootClassName = "teddy-chip";
+/** -------------------------------------------------------------------------------------------------
+ * Root
+ * -----------------------------------------------------------------------------------------------*/
+export type Variant = 'choice' | 'filter';
+export type RootProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & React.ComponentPropsWithoutRef<typeof Flex> & {
+    variant?: Variant;
+    fullWidth?: boolean;
+};
+export type RootContextValue = {
+    variant: Variant;
+    fullWidth?: boolean;
+};
+export declare const RootContext: React.Context<RootContextValue | undefined>;
+/** */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/chip/chip.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { Flex } from "../flex/flex.js";
+const styles = {
+  "teddy-chip__item": "_teddy-chip__item_1er2j_1",
+  "teddy-chip__item--unavailable": "_teddy-chip__item--unavailable_1er2j_33",
+  "teddy-chip__indicator": "_teddy-chip__indicator_1er2j_82"
+};
+const rootClassName = "teddy-chip";
+const RootContext = React__default.createContext(void 0);
+const Root = React__default.forwardRef(
+  ({ className, children, fullWidth, variant, asChild, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}`]], className);
+    return /* @__PURE__ */ jsx(
+      RootContext.Provider,
+      {
+        value: { variant: variant || (props.type === "multiple" ? "filter" : "choice"), fullWidth },
+        children: /* @__PURE__ */ jsx(ToggleGroupPrimitive.Root, { ...props, ref: forwardRef, className: classes, asChild: true, children: /* @__PURE__ */ jsx(Flex, { gap: "200", ...asChild ? { asChild: true, as: void 0 } : { as: "div" }, children }) })
+      }
+    );
+  }
+);
+Root.displayName = "Root";
+export {
+  Root,
+  RootContext,
+  rootClassName,
+  styles as s
+};

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

@@ -0,0 +1,17 @@
+import { RootProps } from './chip';
+import { IndicatorProps } from './chip-indicator';
+import { ItemProps } from './chip-item';
+
+export declare const Chip: import('react').ForwardRefExoticComponent<RootProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Item: import('react').ForwardRefExoticComponent<ItemProps & import('react').RefAttributes<HTMLButtonElement>>;
+    Indicator: import('react').ForwardRefExoticComponent<Partial<Omit<import('react').SVGProps<SVGSVGElement> & {
+        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" | "sync" | "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" | "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?: import('react').ReactNode;
+    }, "ref">> & import('react').RefAttributes<SVGSVGElement>>;
+};
+export type ChipProps = {
+    Root: RootProps;
+    Item: ItemProps;
+    Indicator: IndicatorProps;
+};

package/dist/components/chip/index.js

@@ -0,0 +1,10 @@
+import { Root } from "./chip.js";
+import { Indicator } from "./chip-indicator.js";
+import { Item } from "./chip-item.js";
+const Chip = Object.assign(Root, {
+  Item,
+  Indicator
+});
+export {
+  Chip
+};

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

@@ -1,6 +1,6 @@
-import { TextProps } from '../text';
-import { IconProps } from '../icon';
 import { default as React } from 'react';
+import { IconProps } from '../icon';
+import { TextProps } from '../text';
 
 export type FieldErrorTextIndicatorProps = Partial<IconProps>;
 export type FieldErrorTextProps = TextProps;

package/dist/components/flex/flex.d.ts

@@ -1,5 +1,5 @@
-import { LayoutFlexProps } from '../../utils/layout';
 import { default as React } from 'react';
+import { LayoutFlexProps } from '../../utils/generate-styling';
 
 /** -------------------------------------------------------------------------------------------------
  * Flex

package/dist/components/flex/flex.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
 import { Slot } from "@radix-ui/react-slot";
-import { extractProps } from "../../utils/layout/index.js";
+import { extractProps } from "../../utils/generate-styling/index.js";
 const styles = {
   "teddy-flex": "_teddy-flex_19teo_2"
 };

package/dist/components/grid/grid.d.ts

@@ -1,5 +1,5 @@
-import { LayoutGridProps } from '../../utils/layout';
 import { default as React } from 'react';
+import { LayoutGridProps } from '../../utils/generate-styling';
 
 /** -------------------------------------------------------------------------------------------------
  * Grid

package/dist/components/grid/grid.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
 import { Slot } from "@radix-ui/react-slot";
-import { extractProps } from "../../utils/layout/index.js";
+import { extractProps } from "../../utils/generate-styling/index.js";
 const styles = {
   "teddy-grid": "_teddy-grid_1dv1t_2"
 };

package/dist/components/heading/heading.d.ts

@@ -1,5 +1,5 @@
-import { ChildrenLayoutProps } from '../../utils/layout';
 import { default as React } from 'react';
+import { ChildrenLayoutProps } from '../../utils/generate-styling';
 
 /** -------------------------------------------------------------------------------------------------
  * Heading

package/dist/components/heading/heading.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import clsx from "clsx";
 import React__default from "react";
-import { extractProps } from "../../utils/layout/index.js";
+import { extractProps } from "../../utils/generate-styling/index.js";
 const styles = {
   "teddy-heading": "_teddy-heading_r8os0_2",
   "teddy-heading--hyphens": "_teddy-heading--hyphens_r8os0_9",

package/dist/components/image/image.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { ImageStylingProps } from '../../utils/generate-styling';
+
+/** -------------------------------------------------------------------------------------------------
+ * Image
+ * -----------------------------------------------------------------------------------------------*/
+type ImageProps = React.ComponentPropsWithoutRef<'img'> & ImageStylingProps;
+/** */
+declare const Image: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & 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/object-fit').ObjectFitProps & React.RefAttributes<HTMLImageElement>>;
+export { Image };
+export type { ImageProps };

package/dist/components/image/image.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { extractProps } from "../../utils/generate-styling/index.js";
+const styles = {
+  "teddy-image": "_teddy-image_oyxp8_1"
+};
+const rootClassName = "teddy-image";
+const Image = React__default.forwardRef((props, forwardRef) => {
+  const { className, ...rest } = extractProps(props);
+  const classes = clsx([styles[`${rootClassName}`]], className);
+  return /* @__PURE__ */ jsx("img", { ...rest, ref: forwardRef, className: classes });
+});
+Image.displayName = "Image";
+export {
+  Image
+};

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

@@ -0,0 +1,2 @@
+export { Image } from './image';
+export type { ImageProps } from './image';

package/dist/components/image/index.js

@@ -0,0 +1,4 @@
+import { Image } from "./image.js";
+export {
+  Image
+};

package/dist/components/index.d.ts

@@ -1,3 +1,5 @@
+export * from './image';
+export * from './chip';
 export * from './modal';
 export * from './notification';
 export * from './radio-group';