@telia/teddy 0.0.17 → 0.0.19

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/assets/{4bbd022cee9b0f06.svg → 5636ec8e4de58d64.svg}

@@ -953,6 +953,9 @@
 <symbol fill="none" viewBox="0 0 24 24" id="snapchat">
   <path fill="currentColor" fill-rule="evenodd" d="M11.787 2.254c-.867 0-3.802.24-5.187 3.347-.466 1.045-.355 2.82-.265 4.245.01.168.022.342.03.51a.835.835 0 0 1-.409.09c-.275 0-.6-.087-.965-.258a.78.78 0 0 0-.333-.069c-.428 0-.94.282-1.02.702-.057.303.078.744 1.05 1.128.088.035.193.069.305.104.402.127 1.01.32 1.174.708.085.202.051.46-.101.77-.063.145-1.349 3.075-4.202 3.545a.436.436 0 0 0-.363.456c.004.067.02.133.046.195.214.5 1.118.868 2.763 1.123.055.074.112.337.147.497.035.16.07.32.12.493.05.172.178.37.51.37.134 0 .291-.03.474-.066.274-.054.65-.127 1.12-.127.268 0 .537.023.802.068.53.088.982.407 1.504.776.748.53 1.595 1.13 2.883 1.13.036 0 .07 0 .106-.005.042.002.096.004.154.004 1.288 0 2.135-.6 2.882-1.127.524-.37.974-.689 1.505-.777.265-.044.534-.067.803-.068a5.57 5.57 0 0 1 1.119.12c.156.034.314.055.474.06.269 0 .441-.13.51-.364a6.63 6.63 0 0 0 .12-.487c.035-.16.091-.42.146-.495 1.646-.256 2.55-.622 2.763-1.12a.58.58 0 0 0 .047-.197.435.435 0 0 0-.364-.454c-2.855-.471-4.14-3.4-4.193-3.525-.162-.33-.196-.589-.11-.79.164-.388.771-.581 1.173-.708a5.31 5.31 0 0 0 .305-.104c.712-.28 1.069-.626 1.061-1.026-.006-.314-.25-.594-.639-.733a1.167 1.167 0 0 0-.438-.084.967.967 0 0 0-.402.082c-.339.159-.643.245-.905.256a.804.804 0 0 1-.353-.087c.008-.145.018-.294.028-.45l.003-.06c.09-1.427.202-3.203-.264-4.249-1.387-3.11-4.33-3.353-5.198-3.353l-.416.004Z" clip-rule="evenodd"></path>
 </symbol>
+<symbol viewBox="0 0 24 24" fill="none" id="telia-logo">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.4479 4.24992C21.0236 6.40252 17.7221 9.64974 12.9822 11.9323C8.03 14.3169 3.79097 15.0975 2.40467 13.2609C2.14491 12.4923 2 11.759 2 11.103C2 5.99986 9.46104 2 15.5398 2C17.5905 2 19.503 2.62065 20.4479 4.24992ZM15.1124 16.0521C17.71 14.5482 20.0499 11.9976 20.7878 10.179L20.8307 9.87196C21.0036 8.63856 21.0421 8.36395 21.0656 6.82777C21.0689 6.59845 21.0549 6.37846 21.0335 6.1678C20.882 8.59971 17.7334 11.6576 13.5678 13.6555C8.54282 16.0655 4.77324 16.7141 3.09112 14.8762C3.67542 16.0281 4.05872 16.5874 4.71581 17.4421C6.65636 19.158 10.7405 18.584 15.1124 16.0521ZM12.5822 19.1655C9.24871 20.5148 7.34088 20.0848 6.28646 19.2435L6.2711 19.2315C7.90314 20.8568 9.76356 22.0001 11.3949 22.0001C14.2517 22.0001 18.1628 18.5402 20.0139 13.175C18.9708 15.1116 16.7324 17.4909 12.5822 19.1655Z" fill="currentColor"></path>
+</symbol>
 <symbol fill="none" viewBox="0 0 24 24" id="whatsapp">
   <path fill="currentColor" fill-rule="evenodd" d="M19.437 4.553A10.382 10.382 0 0 0 12.043 1.5C6.283 1.5 1.59 6.17 1.585 11.903c0 1.836.481 3.622 1.394 5.204L1.5 22.5l5.545-1.447a10.502 10.502 0 0 0 4.998 1.267h.005c5.76 0 10.452-4.67 10.457-10.407a10.342 10.342 0 0 0-3.068-7.36ZM12.043 20.56a8.698 8.698 0 0 1-4.427-1.207l-.316-.19-3.288.858.877-3.193-.206-.33a8.581 8.581 0 0 1-1.328-4.6c0-4.76 3.9-8.64 8.693-8.64 2.32 0 4.501.902 6.146 2.534a8.585 8.585 0 0 1 2.541 6.117c-.005 4.775-3.905 8.651-8.692 8.651Zm4.767-6.476c-.26-.13-1.544-.758-1.785-.848-.24-.085-.416-.13-.586.13-.176.259-.677.848-.827 1.017-.15.175-.306.195-.567.065-.26-.13-1.103-.404-2.1-1.292-.777-.688-1.299-1.542-1.454-1.801-.15-.26-.015-.4.115-.529.116-.115.26-.304.391-.454.13-.15.176-.26.26-.434.086-.175.046-.324-.02-.454-.064-.13-.586-1.412-.806-1.931-.21-.509-.426-.439-.587-.444-.15-.01-.326-.01-.501-.01a.963.963 0 0 0-.697.324c-.24.26-.912.888-.912 2.17 0 1.283.937 2.515 1.067 2.69.13.175 1.84 2.799 4.462 3.927.622.269 1.108.429 1.49.548.626.2 1.192.17 1.643.105.502-.075 1.544-.629 1.765-1.237.216-.609.216-1.128.15-1.238-.065-.11-.24-.174-.5-.304Z" clip-rule="evenodd"></path>
 </symbol>

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/accordion/accordion.js

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import React__default from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { Heading } from "../heading/heading.js";
-import "../../assets/4bbd022cee9b0f06.svg";
+import "../../assets/5636ec8e4de58d64.svg";
 import { Icon } from "../icon/icon.js";
 import { Slottable } from "@radix-ui/react-slot";
 const slideDown = "_slideDown_fs2mc_1";

package/dist/components/badge/badge.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import React__default from "react";
 import { Slottable, Slot } from "@radix-ui/react-slot";
-import "../../assets/4bbd022cee9b0f06.svg";
+import "../../assets/5636ec8e4de58d64.svg";
 import { Icon } from "../icon/icon.js";
 const styles = {
   "teddy-badge": "_teddy-badge_sg6ab_1",

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,19 +1,20 @@
-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];
 /** -------------------------------------------------------------------------------------------------
  * Root
  * -----------------------------------------------------------------------------------------------*/
-type RootProps = React.ComponentPropsWithoutRef<typeof Flex> & {
+type RootProps = React.ComponentPropsWithoutRef<typeof Grid> & {
     asChild?: boolean;
     variant?: Variant;
     bordered?: boolean;
+    shadow?: boolean;
     backgroundImageSrc?: string;
 };
 /** -------------------------------------------------------------------------------------------------
@@ -55,9 +56,9 @@ declare const Card: React.ForwardRefExoticComponent<RootProps & React.RefAttribu
     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"> & {
         /** 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;
+        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<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 & {
+    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 +67,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;

package/dist/components/card/card.js

@@ -3,42 +3,43 @@ 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_1occu_3",
+  "teddy-card__slot": "_teddy-card__slot_1occu_13",
+  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_1occu_16",
+  "teddy-card__slot--center": "_teddy-card__slot--center_1occu_19",
+  "teddy-card--shadow": "_teddy-card--shadow_1occu_41",
+  "teddy-card__action": "_teddy-card__action_1occu_45",
+  "teddy-card__action--disabled": "_teddy-card__action--disabled_1occu_45",
+  "teddy-card--border": "_teddy-card--border_1occu_52",
+  "teddy-card__line": "_teddy-card__line_1occu_55",
+  "teddy-card--purple-light": "_teddy-card--purple-light_1occu_59",
+  "teddy-card--purple-dark": "_teddy-card--purple-dark_1occu_73",
+  "teddy-card--white": "_teddy-card--white_1occu_92",
+  "teddy-card--gray": "_teddy-card--gray_1occu_106",
+  "teddy-card--beige": "_teddy-card--beige_1occu_120",
+  "teddy-card__image--as-background": "_teddy-card__image--as-background_1occu_134",
+  "teddy-card__heading": "_teddy-card__heading_1occu_137",
+  "teddy-card--background-image": "_teddy-card--background-image_1occu_140",
+  "teddy-card__image": "_teddy-card__image_1occu_134",
+  "teddy-card__inset": "_teddy-card__inset_1occu_157",
+  "teddy-card__inset--top": "_teddy-card__inset--top_1occu_161",
+  "teddy-card__inset--bottom": "_teddy-card__inset--bottom_1occu_164",
+  "teddy-card__inset--left": "_teddy-card__inset--left_1occu_167",
+  "teddy-card__inset--right": "_teddy-card__inset--right_1occu_170"
 };
 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, variant, bordered, ...props }, forwardRef) => {
     const buttonRef = React__default.useRef(null);
     const linkRef = React__default.useRef(null);
     const classes = clsx(
@@ -46,14 +47,14 @@ const Root = React__default.forwardRef(
       {
         [styles[`${rootClassName}--${variant}`]]: variant,
         [styles[`${rootClassName}--border`]]: bordered,
+        [styles[`${rootClassName}--shadow`]]: shadow,
         [styles[`${rootClassName}--background-image`]]: backgroundImageSrc
       },
       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 }, children: /* @__PURE__ */ jsx(
+      Grid,
       {
-        direction: "column",
         ...props,
         className: classes,
         style: backgroundImageSrc ? { background: `url(${backgroundImageSrc})`, ...props.style } : props.style,
@@ -68,7 +69,7 @@ const Root = React__default.forwardRef(
         ref: forwardRef,
         children
       }
-    ) }) });
+    ) });
   }
 );
 Root.displayName = "Card";
@@ -135,17 +136,14 @@ const insetOptions = [
 ];
 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 });
+  const classesImage = clsx([styles[`${rootClassName}__image`]], className);
+  const classesContainer = clsx([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", { className: classesContainer, children: /* @__PURE__ */ jsx("img", { ...props, ref: forwardRef, className: classesImage }) });
 });
 Image.displayName = "Card.Image";
 function getButtonVariant(variant) {

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" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "dislike" | "edit" | "heart-filled" | "heart" | "invisible" | "like" | "lock-open" | "lock" | "login" | "logout" | "maximize" | "minimize" | "mute" | "password-invisible" | "password-visible" | "play-filled" | "play" | "remove-filled" | "remove" | "save" | "send" | "settings" | "share" | "shuffle" | "sync" | "skip-back-10sec" | "skip-back-30sec" | "skip-forward-10sec" | "skip-forward-30sec" | "star-filled" | "star" | "switch-arrows" | "tv-next" | "tv-pause" | "tv-previous" | "tv-stop" | "upload" | "volume" | "connected-building" | "home" | "hospital" | "industry" | "premises-datacenter" | "premises-large" | "premises-medium" | "premises-small" | "premises" | "store" | "address-book" | "b2b-customer" | "care" | "chat-robot" | "chat" | "child-1" | "child-2" | "conversation" | "customer-dialogue" | "dsl-hub" | "end-user" | "handshake" | "headphones" | "letter" | "mms" | "new-contact" | "new-group" | "news" | "parental-guide" | "people-hub" | "people" | "portal" | "signature" | "smiley-happy" | "smiley-sad" | "sms" | "support" | "user-admin" | "vcard" | "voicemail" | "battery" | "bluetooth" | "broadband" | "broken-phone" | "cast" | "cloud-connect" | "connected" | "core-router" | "daas-device" | "data-transfer" | "desktop" | "devices" | "esim-simcard" | "esim" | "face-id" | "fiber" | "fingerprint" | "fiveg" | "fourg" | "home-installation" | "industrial-iot" | "internet" | "it-service" | "laptop" | "mobile-broadband" | "network" | "phone-recycling" | "phone-ringing" | "phone" | "rack" | "refill-card" | "remote-control" | "repair" | "roaming" | "router" | "secure-device" | "sense-car" | "server" | "service-device" | "service-supervision" | "slow-wifi" | "smart-wifi" | "smartphone" | "smartwatch" | "tablet" | "trade-phone" | "tv" | "usb" | "voice-switch" | "wallplug" | "wireless-off" | "wireless-weak" | "wireless" | "world-alert" | "world-off" | "world-question" | "bar-chart" | "doc" | "document-doc" | "document-edit" | "document-pdf" | "document-ppt" | "excel" | "folder-copy" | "folder-new" | "folder" | "gif" | "graph" | "media-content" | "org-chart" | "pie-chart" | "print" | "register" | "report" | "simcard" | "spell-check" | "credit-card" | "euro" | "invoice" | "kontantkort" | "kr" | "late-payment" | "money-back-euro" | "money-back-kr" | "money-euro" | "money-kr" | "pay-monthly-euro" | "pay-monthly-kr" | "pay-once-euro" | "pay-once-kr" | "payment-success" | "savings" | "wallet" | "airplay" | "camera" | "entertainment" | "external" | "film" | "games" | "megaphone" | "microphone" | "music" | "player-settings" | "record" | "stream" | "trailer" | "video-conference" | "activity-level" | "ai-robot" | "bag" | "basketball" | "blood-pressure" | "bulb" | "business-continuity" | "business-intelligence" | "calendar" | "cart" | "close-circle" | "cloud" | "coffee" | "compass" | "construction" | "cookie" | "delivery" | "drone" | "education" | "efficiency" | "environment" | "facemask" | "flag" | "focus" | "food" | "fraud" | "getting-started" | "home-care" | "job-search" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "present" | "press-button" | "price" | "pulse" | "recycle" | "reservation" | "route" | "ruler" | "satellite" | "secured-1" | "secured-2" | "security-camera" | "shopping" | "snowflake" | "speedometer" | "spyware" | "suitcase" | "sustainability" | "tag" | "temperature" | "thinking" | "train" | "transfer" | "undo" | "wavelength" | "weather" | "world" | "android" | "apple" | "bankid-norway" | "bankid" | "facebook" | "instagram" | "youtube" | "linkedin" | "snapchat" | "telia-logo" | "whatsapp" | "windows" | "alert-filled" | "check-circle-filled" | "check-circle" | "error-filled" | "error" | "info-filled" | "info" | "question-filled" | "question" | "warning" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-subdirectory" | "arrow-up" | "card-view" | "checkmark-bold" | "checkmark" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "close" | "grid-view" | "list-view" | "minus-bold" | "minus" | "more-horizontal" | "more-vertical" | "plus" | "services" | "sorter" | "table-view";
+    size?: ("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" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "dislike" | "edit" | "heart-filled" | "heart" | "invisible" | "like" | "lock-open" | "lock" | "login" | "logout" | "maximize" | "minimize" | "mute" | "password-invisible" | "password-visible" | "play-filled" | "play" | "remove-filled" | "remove" | "save" | "send" | "settings" | "share" | "shuffle" | "sync" | "skip-back-10sec" | "skip-back-30sec" | "skip-forward-10sec" | "skip-forward-30sec" | "star-filled" | "star" | "switch-arrows" | "tv-next" | "tv-pause" | "tv-previous" | "tv-stop" | "upload" | "volume" | "connected-building" | "home" | "hospital" | "industry" | "premises-datacenter" | "premises-large" | "premises-medium" | "premises-small" | "premises" | "store" | "address-book" | "b2b-customer" | "care" | "chat-robot" | "chat" | "child-1" | "child-2" | "conversation" | "customer-dialogue" | "dsl-hub" | "end-user" | "handshake" | "headphones" | "letter" | "mms" | "new-contact" | "new-group" | "news" | "parental-guide" | "people-hub" | "people" | "portal" | "signature" | "smiley-happy" | "smiley-sad" | "sms" | "support" | "user-admin" | "vcard" | "voicemail" | "battery" | "bluetooth" | "broadband" | "broken-phone" | "cast" | "cloud-connect" | "connected" | "core-router" | "daas-device" | "data-transfer" | "desktop" | "devices" | "esim-simcard" | "esim" | "face-id" | "fiber" | "fingerprint" | "fiveg" | "fourg" | "home-installation" | "industrial-iot" | "internet" | "it-service" | "laptop" | "mobile-broadband" | "network" | "phone-recycling" | "phone-ringing" | "phone" | "rack" | "refill-card" | "remote-control" | "repair" | "roaming" | "router" | "secure-device" | "sense-car" | "server" | "service-device" | "service-supervision" | "slow-wifi" | "smart-wifi" | "smartphone" | "smartwatch" | "tablet" | "trade-phone" | "tv" | "usb" | "voice-switch" | "wallplug" | "wireless-off" | "wireless-weak" | "wireless" | "world-alert" | "world-off" | "world-question" | "bar-chart" | "doc" | "document-doc" | "document-edit" | "document-pdf" | "document-ppt" | "excel" | "folder-copy" | "folder-new" | "folder" | "gif" | "graph" | "media-content" | "org-chart" | "pie-chart" | "print" | "register" | "report" | "simcard" | "spell-check" | "credit-card" | "euro" | "invoice" | "kontantkort" | "kr" | "late-payment" | "money-back-euro" | "money-back-kr" | "money-euro" | "money-kr" | "pay-monthly-euro" | "pay-monthly-kr" | "pay-once-euro" | "pay-once-kr" | "payment-success" | "savings" | "wallet" | "airplay" | "camera" | "entertainment" | "external" | "film" | "games" | "megaphone" | "microphone" | "music" | "player-settings" | "record" | "stream" | "trailer" | "video-conference" | "activity-level" | "ai-robot" | "bag" | "basketball" | "blood-pressure" | "bulb" | "business-continuity" | "business-intelligence" | "calendar" | "cart" | "close-circle" | "cloud" | "coffee" | "compass" | "construction" | "cookie" | "delivery" | "drone" | "education" | "efficiency" | "environment" | "facemask" | "flag" | "focus" | "food" | "fraud" | "getting-started" | "home-care" | "job-search" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "present" | "press-button" | "price" | "pulse" | "recycle" | "reservation" | "route" | "ruler" | "satellite" | "secured-1" | "secured-2" | "security-camera" | "shopping" | "snowflake" | "speedometer" | "spyware" | "suitcase" | "sustainability" | "tag" | "temperature" | "thinking" | "train" | "transfer" | "undo" | "wavelength" | "weather" | "world" | "android" | "apple" | "bankid-norway" | "bankid" | "facebook" | "instagram" | "youtube" | "linkedin" | "snapchat" | "telia-logo" | "whatsapp" | "windows" | "alert-filled" | "check-circle-filled" | "check-circle" | "error-filled" | "error" | "info-filled" | "info" | "question-filled" | "question" | "warning" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-subdirectory" | "arrow-up" | "card-view" | "checkmark-bold" | "checkmark" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "close" | "grid-view" | "list-view" | "minus-bold" | "minus" | "more-horizontal" | "more-vertical" | "plus" | "services" | "sorter" | "table-view";
+        size?: ("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/field-error-text/field-error-text.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import React__default from "react";
-import "../../assets/4bbd022cee9b0f06.svg";
+import "../../assets/5636ec8e4de58d64.svg";
 import { Icon } from "../icon/icon.js";
 import { Text } from "../text/text.js";
 const styles = {

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/icon/icon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import iconsHref from "../../assets/4bbd022cee9b0f06.svg";
+import iconsHref from "../../assets/5636ec8e4de58d64.svg";
 import clsx from "clsx";
 const styles = {
   "teddy-icon": "_teddy-icon_1rwgf_2",

package/dist/components/icon/index.js

@@ -1,4 +1,4 @@
-import { default as default2 } from "../../assets/4bbd022cee9b0f06.svg";
+import { default as default2 } from "../../assets/5636ec8e4de58d64.svg";
 import { Icon } from "./icon.js";
 export {
   Icon,

package/dist/components/index.d.ts

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

package/dist/components/index.js

@@ -1,3 +1,4 @@
+import { Chip } from "./chip/index.js";
 import { Modal } from "./modal/modal.js";
 import { Notification } from "./notification/notification.js";
 import { RadioGroup } from "./radio-group/radio-group.js";
@@ -13,7 +14,7 @@ import { Badge } from "./badge/badge.js";
 import { Button } from "./button/button.js";
 import { FieldErrorText } from "./field-error-text/field-error-text.js";
 import { HelperText } from "./helper-text/helper-text.js";
-import { default as default2 } from "../assets/4bbd022cee9b0f06.svg";
+import { default as default2 } from "../assets/5636ec8e4de58d64.svg";
 import { Icon } from "./icon/icon.js";
 import { Input, InputGroup } from "./input/input.js";
 import { Label } from "./label/label.js";
@@ -29,6 +30,7 @@ export {
   Box,
   Button,
   Card,
+  Chip,
   FieldErrorText,
   Flex,
   Grid,

package/dist/components/input/input.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import React__default from "react";
-import "../../assets/4bbd022cee9b0f06.svg";
+import "../../assets/5636ec8e4de58d64.svg";
 import { Icon } from "../icon/icon.js";
 import { Spinner } from "../spinner/spinner.js";
 const fadeInAnimation = "_fadeInAnimation_1o9uu_1";

package/dist/components/modal/modal.d.ts

@@ -1,6 +1,6 @@
-import { ComponentPropsAs } from '../../utils/component-props-as';
-import { Flex, Heading, Text } from '..';
 import { default as React } from 'react';
+import { Flex, Heading, Text } from '..';
+import { ComponentPropsAs } from '../../utils/component-props-as';
 
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 type RootProps = Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>, 'modal'>;
@@ -47,7 +47,7 @@ type CloseProps = Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Clo
 });
 /** -------------------------------------------------------------------------------------------------*/
 export declare const Modal: React.FC<RootProps> & {
-    Trigger: React.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref">, "asChild" | "children"> & {
+    Trigger: React.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref">, "children" | "asChild"> & {
         children: React.ReactElement;
     } & React.RefAttributes<HTMLButtonElement>>;
     Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;