@telia/teddy 0.0.25 → 0.0.27

package/dist/components/icon/icon.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const iconsHref = require("../../assets/sprite.5636ec8e-teddy.svg");
+const iconsHref = require("../../assets/sprite.269ba410-teddy.svg");
 const clsx = require("clsx");
 const styles = {
   "teddy-icon": "_teddy-icon_1rwgf_2",
@@ -17,13 +17,13 @@ const styles = {
 const rootClassName = "teddy-icon";
 const rootClassNameWithChildren = `${rootClassName}-with-children`;
 function Icon({ name, size = "font", className, children, ...props }) {
+  const classes = clsx([styles[rootClassName], styles[`${rootClassName}--${size}`]], className);
   if (children) {
     return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx([styles[rootClassNameWithChildren]]), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { name, size, className, ...props }),
+      /* @__PURE__ */ jsxRuntime.jsx(Icon, { name, size, className: classes, ...props }),
       children
     ] });
   }
-  const classes = clsx([styles[rootClassName], styles[`${rootClassName}--${size}`]], className);
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...props, className: classes, children: /* @__PURE__ */ jsxRuntime.jsx("use", { href: `${iconsHref}#${name}` }) });
 }
 exports.Icon = Icon;

package/dist/components/icon/icon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import iconsHref from "../../assets/sprite.5636ec8e-teddy.svg";
+import iconsHref from "../../assets/sprite.269ba410-teddy.svg";
 import clsx from "clsx";
 const styles = {
   "teddy-icon": "_teddy-icon_1rwgf_2",
@@ -15,13 +15,13 @@ const styles = {
 const rootClassName = "teddy-icon";
 const rootClassNameWithChildren = `${rootClassName}-with-children`;
 function Icon({ name, size = "font", className, children, ...props }) {
+  const classes = clsx([styles[rootClassName], styles[`${rootClassName}--${size}`]], className);
   if (children) {
     return /* @__PURE__ */ jsxs("span", { className: clsx([styles[rootClassNameWithChildren]]), children: [
-      /* @__PURE__ */ jsx(Icon, { name, size, className, ...props }),
+      /* @__PURE__ */ jsx(Icon, { name, size, className: classes, ...props }),
       children
     ] });
   }
-  const classes = clsx([styles[rootClassName], styles[`${rootClassName}--${size}`]], className);
   return /* @__PURE__ */ jsx("svg", { ...props, className: classes, children: /* @__PURE__ */ jsx("use", { href: `${iconsHref}#${name}` }) });
 }
 export {

package/dist/components/icon/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const iconsHref = require("../../assets/sprite.5636ec8e-teddy.svg");
+const iconsHref = require("../../assets/sprite.269ba410-teddy.svg");
 const components_icon_icon = require("./icon.cjs");
 const components_icon_AllIcons = require("./AllIcons.cjs");
 exports.iconsHref = iconsHref;

package/dist/components/icon/index.js

@@ -1,4 +1,4 @@
-import { default as default2 } from "../../assets/sprite.5636ec8e-teddy.svg";
+import { default as default2 } from "../../assets/sprite.269ba410-teddy.svg";
 import { Icon } from "./icon.js";
 import { default as default3 } from "./AllIcons.js";
 export {

package/dist/components/index.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_list_index = require("./list/index.cjs");
 const components_scrollArea_index = require("./scroll-area/index.cjs");
 const components_tabs_index = require("./tabs/index.cjs");
 const components_drawer_index = require("./drawer/index.cjs");
@@ -17,10 +18,12 @@ const components_toggle_toggle = require("./toggle/toggle.cjs");
 const components_accordion_index = require("./accordion/index.cjs");
 const components_link_link = require("./link/link.cjs");
 const components_badge_badge = require("./badge/badge.cjs");
+const components_badge_alertBadge = require("./badge/alert-badge.cjs");
+const components_badge_counterBadge = require("./badge/counter-badge.cjs");
 const components_button_button = require("./button/button.cjs");
 const components_fieldErrorText_fieldErrorText = require("./field-error-text/field-error-text.cjs");
 const components_helperText_helperText = require("./helper-text/helper-text.cjs");
-const iconsHref = require("../assets/sprite.5636ec8e-teddy.svg");
+const iconsHref = require("../assets/sprite.269ba410-teddy.svg");
 const components_icon_icon = require("./icon/icon.cjs");
 const components_icon_AllIcons = require("./icon/AllIcons.cjs");
 const components_input_index = require("./input/index.cjs");
@@ -32,6 +35,7 @@ const components_heading_heading = require("./heading/heading.cjs");
 const components_visuallyHidden_visuallyHidden = require("./visually-hidden/visually-hidden.cjs");
 const components_textSpacing_textSpacing = require("./text-spacing/text-spacing.cjs");
 const components_input_inputGroup = require("./input/input-group.cjs");
+exports.List = components_list_index.List;
 exports.ScrollArea = components_scrollArea_index.ScrollArea;
 exports.Tabs = components_tabs_index.Tabs;
 exports.Drawer = components_drawer_index.Drawer;
@@ -49,6 +53,8 @@ exports.Toggle = components_toggle_toggle.Toggle;
 exports.Accordion = components_accordion_index.Accordion;
 exports.Link = components_link_link.Link;
 exports.Badge = components_badge_badge.Badge;
+exports.AlertBadge = components_badge_alertBadge.AlertBadge;
+exports.CounterBadge = components_badge_counterBadge.CounterBadge;
 exports.Button = components_button_button.Button;
 exports.FieldErrorText = components_fieldErrorText_fieldErrorText.FieldErrorText;
 exports.HelperText = components_helperText_helperText.HelperText;

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './list';
 export * from './scroll-area';
 export * from './tabs';
 export * from './drawer';

package/dist/components/index.js

@@ -1,3 +1,4 @@
+import { List } from "./list/index.js";
 import { ScrollArea } from "./scroll-area/index.js";
 import { Tabs } from "./tabs/index.js";
 import { Drawer } from "./drawer/index.js";
@@ -15,10 +16,12 @@ import { Toggle } from "./toggle/toggle.js";
 import { Accordion } from "./accordion/index.js";
 import { Link } from "./link/link.js";
 import { Badge } from "./badge/badge.js";
+import { AlertBadge } from "./badge/alert-badge.js";
+import { CounterBadge } from "./badge/counter-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/sprite.5636ec8e-teddy.svg";
+import { default as default2 } from "../assets/sprite.269ba410-teddy.svg";
 import { Icon } from "./icon/icon.js";
 import { default as default3 } from "./icon/AllIcons.js";
 import { InputGroup } from "./input/index.js";
@@ -32,12 +35,14 @@ import { TextSpacing } from "./text-spacing/text-spacing.js";
 import { I } from "./input/input-group.js";
 export {
   Accordion,
+  AlertBadge,
   default3 as AllIcons,
   Badge,
   Box,
   Button,
   Card,
   Chip,
+  CounterBadge,
   Drawer,
   FieldErrorText,
   Flex,
@@ -50,6 +55,7 @@ export {
   InputGroup,
   Label,
   Link,
+  List,
   Modal,
   NavigationMenu,
   Notification,

package/dist/components/input/input-clear-button.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-require("../../assets/sprite.5636ec8e-teddy.svg");
+require("../../assets/sprite.269ba410-teddy.svg");
 const components_icon_icon = require("../icon/icon.cjs");
 const components_button_button = require("../button/button.cjs");
 const clsx = require("clsx");

package/dist/components/input/input-clear-button.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
-import "../../assets/sprite.5636ec8e-teddy.svg";
+import "../../assets/sprite.269ba410-teddy.svg";
 import { Icon } from "../icon/icon.js";
 import { Button } from "../button/button.js";
 import clsx from "clsx";

package/dist/components/input/input-group.cjs

@@ -3,21 +3,21 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const clsx = require("clsx");
 const React = require("react");
-require("../../assets/sprite.5636ec8e-teddy.svg");
+require("../../assets/sprite.269ba410-teddy.svg");
 const components_icon_icon = require("../icon/icon.cjs");
 const components_spinner_spinner = require("../spinner/spinner.cjs");
 const utils_composeRefs = require("../../utils/composeRefs.cjs");
-const fadeInAnimation = "_fadeInAnimation_5urff_1";
-const scaleInAnimation = "_scaleInAnimation_5urff_1";
+const fadeInAnimation = "_fadeInAnimation_mhz8x_1";
+const scaleInAnimation = "_scaleInAnimation_mhz8x_1";
 const styles = {
-  "teddy-input": "_teddy-input_5urff_18",
-  "teddy-input__frame": "_teddy-input__frame_5urff_27",
-  "teddy-input__clear-button": "_teddy-input__clear-button_5urff_35",
-  "teddy-input__input": "_teddy-input__input_5urff_38",
-  "teddy-input__input--valid": "_teddy-input__input--valid_5urff_79",
-  "teddy-input__input--invalid": "_teddy-input__input--invalid_5urff_79",
-  "teddy-input__indicator": "_teddy-input__indicator_5urff_85",
-  "teddy-input__input--error": "_teddy-input__input--error_5urff_88",
+  "teddy-input__input": "_teddy-input__input_mhz8x_17",
+  "teddy-input": "_teddy-input_mhz8x_17",
+  "teddy-input__frame": "_teddy-input__frame_mhz8x_31",
+  "teddy-input__clear-button": "_teddy-input__clear-button_mhz8x_39",
+  "teddy-input__input--valid": "_teddy-input__input--valid_mhz8x_82",
+  "teddy-input__input--invalid": "_teddy-input__input--invalid_mhz8x_82",
+  "teddy-input__indicator": "_teddy-input__indicator_mhz8x_88",
+  "teddy-input__input--error": "_teddy-input__input--error_mhz8x_91",
   fadeInAnimation,
   scaleInAnimation
 };

package/dist/components/input/input-group.js

@@ -1,21 +1,21 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import React__default, { useEffect } from "react";
-import "../../assets/sprite.5636ec8e-teddy.svg";
+import "../../assets/sprite.269ba410-teddy.svg";
 import { Icon } from "../icon/icon.js";
 import { Spinner } from "../spinner/spinner.js";
 import { useComposedRefs } from "../../utils/composeRefs.js";
-const fadeInAnimation = "_fadeInAnimation_5urff_1";
-const scaleInAnimation = "_scaleInAnimation_5urff_1";
+const fadeInAnimation = "_fadeInAnimation_mhz8x_1";
+const scaleInAnimation = "_scaleInAnimation_mhz8x_1";
 const styles = {
-  "teddy-input": "_teddy-input_5urff_18",
-  "teddy-input__frame": "_teddy-input__frame_5urff_27",
-  "teddy-input__clear-button": "_teddy-input__clear-button_5urff_35",
-  "teddy-input__input": "_teddy-input__input_5urff_38",
-  "teddy-input__input--valid": "_teddy-input__input--valid_5urff_79",
-  "teddy-input__input--invalid": "_teddy-input__input--invalid_5urff_79",
-  "teddy-input__indicator": "_teddy-input__indicator_5urff_85",
-  "teddy-input__input--error": "_teddy-input__input--error_5urff_88",
+  "teddy-input__input": "_teddy-input__input_mhz8x_17",
+  "teddy-input": "_teddy-input_mhz8x_17",
+  "teddy-input__frame": "_teddy-input__frame_mhz8x_31",
+  "teddy-input__clear-button": "_teddy-input__clear-button_mhz8x_39",
+  "teddy-input__input--valid": "_teddy-input__input--valid_mhz8x_82",
+  "teddy-input__input--invalid": "_teddy-input__input--invalid_mhz8x_82",
+  "teddy-input__indicator": "_teddy-input__indicator_mhz8x_88",
+  "teddy-input__input--error": "_teddy-input__input--error_mhz8x_91",
   fadeInAnimation,
   scaleInAnimation
 };

package/dist/components/input/input-indicator.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react/jsx-runtime");
 require("clsx");
 require("react");
-require("../../assets/sprite.5636ec8e-teddy.svg");
+require("../../assets/sprite.269ba410-teddy.svg");
 require("../icon/icon.cjs");
 require("../spinner/spinner.cjs");
 const components_input_inputGroup = require("./input-group.cjs");

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

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "clsx";
 import "react";
-import "../../assets/sprite.5636ec8e-teddy.svg";
+import "../../assets/sprite.269ba410-teddy.svg";
 import "../icon/icon.js";
 import "../spinner/spinner.js";
 import { a } from "./input-group.js";

package/dist/components/list/index.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_list_list = require("./list.cjs");
+const components_list_listItem = require("./list-item.cjs");
+const components_list_listIllustration = require("./list-illustration.cjs");
+const components_list_listContent = require("./list-content.cjs");
+components_list_list.Root.displayName = "List";
+components_list_listItem.Item.displayName = "List.Item";
+components_list_listIllustration.Illustration.displayName = "List.Illustration";
+components_list_listContent.Content.displayName = "List.Content";
+const List = Object.assign(components_list_list.Root, {
+  Item: components_list_listItem.Item,
+  Illustration: components_list_listIllustration.Illustration,
+  Content: components_list_listContent.Content
+});
+exports.List = List;

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

@@ -0,0 +1,47 @@
+import { RootProps } from './list';
+import { ItemProps } from './list-item';
+import { IllustrationProps } from './list-illustration';
+import { ContentProps } from './list-content';
+
+declare const List: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+    display?: import('../../utils/generate-styling').DisplayChildren | undefined;
+} & import('../../utils/generate-styling/gap').GapProps & {
+    align?: import('../../utils/generate-styling/align').Align | undefined;
+    justify?: import('../../utils/generate-styling/justify').Justify | undefined;
+} & import('../../utils/generate-styling/flex').FlexLayout & {
+    asChild: true;
+    as?: undefined;
+} & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> | Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+    display?: import('../../utils/generate-styling').DisplayChildren | undefined;
+} & import('../../utils/generate-styling/gap').GapProps & {
+    align?: import('../../utils/generate-styling/align').Align | undefined;
+    justify?: import('../../utils/generate-styling/justify').Justify | undefined;
+} & import('../../utils/generate-styling/flex').FlexLayout & {
+    as?: "span" | undefined;
+    asChild?: false | undefined;
+} & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> | Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+    display?: import('../../utils/generate-styling').DisplayChildren | undefined;
+} & import('../../utils/generate-styling/gap').GapProps & {
+    align?: import('../../utils/generate-styling/align').Align | undefined;
+    justify?: import('../../utils/generate-styling/justify').Justify | undefined;
+} & import('../../utils/generate-styling/flex').FlexLayout & {
+    as: "div";
+    asChild?: false | undefined;
+} & import('react').RefAttributes<HTMLDivElement>, "ref">, "as"> & {
+    layout?: import('./list').Layout | undefined;
+    variant?: import('./list').Variant | undefined;
+} & import('react').RefAttributes<HTMLDivElement>> & {
+    Item: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import('react').RefAttributes<HTMLLIElement>>;
+    Illustration: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        variant?: import('./list').Variant | undefined;
+    } & import('react').RefAttributes<HTMLSpanElement>>;
+    Content: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+};
+type ListProps = {
+    List: RootProps;
+    Item: ItemProps;
+    Illustration: IllustrationProps;
+    Content: ContentProps;
+};
+export { List };
+export type { ListProps };

package/dist/components/list/index.js

@@ -0,0 +1,16 @@
+import { Root } from "./list.js";
+import { Item } from "./list-item.js";
+import { Illustration } from "./list-illustration.js";
+import { Content } from "./list-content.js";
+Root.displayName = "List";
+Item.displayName = "List.Item";
+Illustration.displayName = "List.Illustration";
+Content.displayName = "List.Content";
+const List = Object.assign(Root, {
+  Item,
+  Illustration,
+  Content
+});
+export {
+  List
+};

package/dist/components/list/list-content.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_list_list = require("./list.cjs");
+const Content = React.forwardRef(
+  ({ className, children, ...props }, forwardRef) => {
+    const classes = clsx([components_list_list.styles[`${components_list_list.rootClassName}__content`]], className);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: classes, ref: forwardRef, children });
+  }
+);
+Content.displayName = "Content";
+exports.Content = Content;

package/dist/components/list/list-content.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+
+export type ContentProps = React.ComponentPropsWithoutRef<'div'>;
+export declare const Content: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/list/list-content.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./list.js";
+const Content = React__default.forwardRef(
+  ({ className, children, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__content`]], className);
+    return /* @__PURE__ */ jsx("div", { ...props, className: classes, ref: forwardRef, children });
+  }
+);
+Content.displayName = "Content";
+export {
+  Content
+};

package/dist/components/list/list-illustration.cjs

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_list_list = require("./list.cjs");
+const Illustration = React.forwardRef(
+  ({ className, variant: propVariant, children, ...props }, forwardRef) => {
+    const context = React.useContext(components_list_list.RootContext);
+    const variant = propVariant || (context == null ? void 0 : context.variant);
+    const classes = clsx(
+      [components_list_list.styles[`${components_list_list.rootClassName}__illustration`]],
+      {
+        [components_list_list.styles[`${components_list_list.rootClassName}__illustration--${variant}`]]: variant,
+        [components_list_list.styles[`${components_list_list.rootClassName}__illustration--icon`]]: variant == null ? void 0 : variant.includes("icon")
+      },
+      className
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, className: classes, ref: forwardRef, children });
+  }
+);
+Illustration.displayName = "Illustration";
+exports.Illustration = Illustration;

package/dist/components/list/list-illustration.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { Variant } from './list';
+
+export type IllustrationProps = React.ComponentPropsWithoutRef<'span'> & {
+    variant?: Variant;
+};
+export declare const Illustration: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    variant?: Variant | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/list/list-illustration.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { RootContext, s as styles, rootClassName } from "./list.js";
+const Illustration = React__default.forwardRef(
+  ({ className, variant: propVariant, children, ...props }, forwardRef) => {
+    const context = React__default.useContext(RootContext);
+    const variant = propVariant || (context == null ? void 0 : context.variant);
+    const classes = clsx(
+      [styles[`${rootClassName}__illustration`]],
+      {
+        [styles[`${rootClassName}__illustration--${variant}`]]: variant,
+        [styles[`${rootClassName}__illustration--icon`]]: variant == null ? void 0 : variant.includes("icon")
+      },
+      className
+    );
+    return /* @__PURE__ */ jsx("span", { ...props, className: classes, ref: forwardRef, children });
+  }
+);
+Illustration.displayName = "Illustration";
+export {
+  Illustration
+};

package/dist/components/list/list-item.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_list_list = require("./list.cjs");
+const Item = React.forwardRef(({ className, children, ...props }, forwardRef) => {
+  const classes = clsx([components_list_list.styles[`${components_list_list.rootClassName}__item`]], className);
+  return /* @__PURE__ */ jsxRuntime.jsx("li", { ...props, ref: forwardRef, className: classes, children });
+});
+Item.displayName = "Item";
+exports.Item = Item;

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+
+export type ItemProps = React.ComponentPropsWithoutRef<'li'>;
+export declare const Item: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;

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

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./list.js";
+const Item = React__default.forwardRef(({ className, children, ...props }, forwardRef) => {
+  const classes = clsx([styles[`${rootClassName}__item`]], className);
+  return /* @__PURE__ */ jsx("li", { ...props, ref: forwardRef, className: classes, children });
+});
+Item.displayName = "Item";
+export {
+  Item
+};

package/dist/components/list/list.cjs

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

package/dist/components/list/list.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+import { Flex } from '../flex';
+
+export declare const rootClassName = "teddy-list";
+export type Layout = 'horizontal' | 'vertical';
+export type Variant = 'icon-white' | 'icon-beige' | 'icon-purple' | 'icon-gray' | 'image';
+export type RootProps = Omit<React.ComponentPropsWithoutRef<typeof Flex>, 'as'> & {
+    layout?: Layout;
+    variant?: Variant;
+};
+type RootContextType = {
+    variant?: Variant;
+};
+export declare const RootContext: React.Context<RootContextType | undefined>;
+export declare const Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+    display?: import('../../utils/generate-styling').DisplayChildren | undefined;
+} & import('../../utils/generate-styling/gap').GapProps & {
+    align?: import('../../utils/generate-styling/align').Align | undefined;
+    justify?: import('../../utils/generate-styling/justify').Justify | undefined;
+} & import('../../utils/generate-styling/flex').FlexLayout & {
+    asChild: true;
+    as?: undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+    display?: import('../../utils/generate-styling').DisplayChildren | undefined;
+} & import('../../utils/generate-styling/gap').GapProps & {
+    align?: import('../../utils/generate-styling/align').Align | undefined;
+    justify?: import('../../utils/generate-styling/justify').Justify | undefined;
+} & import('../../utils/generate-styling/flex').FlexLayout & {
+    as?: "span" | undefined;
+    asChild?: false | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+    display?: import('../../utils/generate-styling').DisplayChildren | undefined;
+} & import('../../utils/generate-styling/gap').GapProps & {
+    align?: import('../../utils/generate-styling/align').Align | undefined;
+    justify?: import('../../utils/generate-styling/justify').Justify | undefined;
+} & import('../../utils/generate-styling/flex').FlexLayout & {
+    as: "div";
+    asChild?: false | undefined;
+} & React.RefAttributes<HTMLDivElement>, "ref">, "as"> & {
+    layout?: Layout | undefined;
+    variant?: Variant | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};