@telia/teddy 0.0.65 → 0.0.66

package/dist/components/card/card.cjs

@@ -7,38 +7,52 @@ const utils_composeEventHandlers = require("../../utils/composeEventHandlers.cjs
 const components_grid_grid = require("../grid/grid.cjs");
 const tokens_color_variables = require("../../tokens/color/variables.cjs");
 const styles = {
-  "teddy-card": "_teddy-card_141ee_3",
-  "teddy-card__slot": "_teddy-card__slot_141ee_13",
-  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_141ee_16",
-  "teddy-card__slot--center": "_teddy-card__slot--center_141ee_19",
-  "teddy-card--shadow": "_teddy-card--shadow_141ee_41",
-  "teddy-card__action": "_teddy-card__action_141ee_45",
-  "teddy-card__action--disabled": "_teddy-card__action--disabled_141ee_45",
-  "teddy-card--border": "_teddy-card--border_141ee_52",
-  "teddy-card--layout": "_teddy-card--layout_141ee_55",
-  "teddy-card__illustration": "_teddy-card__illustration_141ee_55",
-  "teddy-card__content": "_teddy-card__content_141ee_58",
-  "teddy-card__heading": "_teddy-card__heading_141ee_61",
-  "teddy-card__footer": "_teddy-card__footer_141ee_67",
-  "teddy-card--default": "_teddy-card--default_141ee_70",
-  "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_141ee_75",
-  "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_141ee_94",
-  "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_141ee_106",
-  "teddy-card--rich-card": "_teddy-card--rich-card_141ee_118",
-  "teddy-card__line": "_teddy-card__line_141ee_136",
-  "teddy-card--purple-light": "_teddy-card--purple-light_141ee_140",
-  "teddy-card--purple-dark": "_teddy-card--purple-dark_141ee_154",
-  "teddy-card--white": "_teddy-card--white_141ee_173",
-  "teddy-card--gray": "_teddy-card--gray_141ee_187",
-  "teddy-card--beige": "_teddy-card--beige_141ee_201",
-  "teddy-card__image--as-background": "_teddy-card__image--as-background_141ee_215",
-  "teddy-card--background-image": "_teddy-card--background-image_141ee_221",
-  "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_141ee_226",
-  "teddy-card__inset": "_teddy-card__inset_141ee_230",
-  "teddy-card__inset--top": "_teddy-card__inset--top_141ee_233",
-  "teddy-card__inset--left": "_teddy-card__inset--left_141ee_236",
-  "teddy-card__inset--right": "_teddy-card__inset--right_141ee_239",
-  "teddy-card__inset--bottom": "_teddy-card__inset--bottom_141ee_242"
+  "teddy-card": "_teddy-card_2wvsb_3",
+  "teddy-card__slot": "_teddy-card__slot_2wvsb_13",
+  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_2wvsb_16",
+  "teddy-card__slot--center": "_teddy-card__slot--center_2wvsb_19",
+  "teddy-card--shadow": "_teddy-card--shadow_2wvsb_41",
+  "teddy-card__action": "_teddy-card__action_2wvsb_45",
+  "teddy-card__action--disabled": "_teddy-card__action--disabled_2wvsb_45",
+  "teddy-card--border": "_teddy-card--border_2wvsb_52",
+  "teddy-card--layout": "_teddy-card--layout_2wvsb_55",
+  "teddy-card__illustration": "_teddy-card__illustration_2wvsb_55",
+  "teddy-card__content": "_teddy-card__content_2wvsb_58",
+  "teddy-card__heading": "_teddy-card__heading_2wvsb_61",
+  "teddy-card__action-wrapper": "_teddy-card__action-wrapper_2wvsb_64",
+  "teddy-card__footer": "_teddy-card__footer_2wvsb_67",
+  "teddy-card__overline": "_teddy-card__overline_2wvsb_70",
+  "teddy-card__description": "_teddy-card__description_2wvsb_73",
+  "teddy-card__color-dots": "_teddy-card__color-dots_2wvsb_76",
+  "teddy-card__availability": "_teddy-card__availability_2wvsb_79",
+  "teddy-card__price": "_teddy-card__price_2wvsb_82",
+  "teddy-card--default": "_teddy-card--default_2wvsb_85",
+  "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_2wvsb_90",
+  "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_2wvsb_109",
+  "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_2wvsb_121",
+  "teddy-card--rich-card": "_teddy-card--rich-card_2wvsb_133",
+  "teddy-card__line": "_teddy-card__line_2wvsb_151",
+  "teddy-card--purple-light": "_teddy-card--purple-light_2wvsb_155",
+  "teddy-card--purple-dark": "_teddy-card--purple-dark_2wvsb_169",
+  "teddy-card--white": "_teddy-card--white_2wvsb_188",
+  "teddy-card--gray": "_teddy-card--gray_2wvsb_202",
+  "teddy-card--beige": "_teddy-card--beige_2wvsb_216",
+  "teddy-card--product": "_teddy-card--product_2wvsb_230",
+  "teddy-card__image--as-background": "_teddy-card__image--as-background_2wvsb_278",
+  "teddy-card--background-image": "_teddy-card--background-image_2wvsb_284",
+  "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_2wvsb_289",
+  "teddy-card__inset": "_teddy-card__inset_2wvsb_293",
+  "teddy-card__inset--top": "_teddy-card__inset--top_2wvsb_296",
+  "teddy-card__inset--left": "_teddy-card__inset--left_2wvsb_299",
+  "teddy-card__inset--right": "_teddy-card__inset--right_2wvsb_302",
+  "teddy-card__inset--bottom": "_teddy-card__inset--bottom_2wvsb_305",
+  "teddy-card__availability--badge": "_teddy-card__availability--badge_2wvsb_320",
+  "teddy-card__availability--success": "_teddy-card__availability--success_2wvsb_323",
+  "teddy-card__availability--warning": "_teddy-card__availability--warning_2wvsb_326",
+  "teddy-card__availability--error": "_teddy-card__availability--error_2wvsb_329",
+  "teddy-card__availability--special": "_teddy-card__availability--special_2wvsb_332",
+  "teddy-card__availability--neutral": "_teddy-card__availability--neutral_2wvsb_335",
+  "teddy-card__availability--information": "_teddy-card__availability--information_2wvsb_338"
 };
 const rootClassName = "teddy-card";
 const actionElementIdentifier = `${rootClassName}__action`;

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

@@ -4,8 +4,9 @@ import { Variant } from './utils';
 
 export declare const rootClassName = "teddy-card";
 export declare const actionElementIdentifier = "teddy-card__action";
-export type Layout = 'navigation-vertical' | 'navigation-horizontal-small' | 'navigation-horizontal-large' | 'rich-card' | 'default';
+export type Layout = 'navigation-vertical' | 'navigation-horizontal-small' | 'navigation-horizontal-large' | 'rich-card' | 'default' | 'product';
 type Gradient = 'light' | 'dark' | 'default';
+export type CardType = 'regular' | 'product';
 export declare const RootContext: React.Context<{
     buttonRef: React.RefObject<HTMLButtonElement>;
     linkRef: React.RefObject<HTMLAnchorElement>;

package/dist/components/card/card.js

@@ -5,38 +5,52 @@ import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
 import { Grid } from "../grid/grid.js";
 import { teddyColorTransparentWhite850, teddyColorTransparentWhite800, teddyColorTransparentWhite100, teddyColorTransparentBlack600, teddyColorTransparentBlack200 } from "../../tokens/color/variables.js";
 const styles = {
-  "teddy-card": "_teddy-card_141ee_3",
-  "teddy-card__slot": "_teddy-card__slot_141ee_13",
-  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_141ee_16",
-  "teddy-card__slot--center": "_teddy-card__slot--center_141ee_19",
-  "teddy-card--shadow": "_teddy-card--shadow_141ee_41",
-  "teddy-card__action": "_teddy-card__action_141ee_45",
-  "teddy-card__action--disabled": "_teddy-card__action--disabled_141ee_45",
-  "teddy-card--border": "_teddy-card--border_141ee_52",
-  "teddy-card--layout": "_teddy-card--layout_141ee_55",
-  "teddy-card__illustration": "_teddy-card__illustration_141ee_55",
-  "teddy-card__content": "_teddy-card__content_141ee_58",
-  "teddy-card__heading": "_teddy-card__heading_141ee_61",
-  "teddy-card__footer": "_teddy-card__footer_141ee_67",
-  "teddy-card--default": "_teddy-card--default_141ee_70",
-  "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_141ee_75",
-  "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_141ee_94",
-  "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_141ee_106",
-  "teddy-card--rich-card": "_teddy-card--rich-card_141ee_118",
-  "teddy-card__line": "_teddy-card__line_141ee_136",
-  "teddy-card--purple-light": "_teddy-card--purple-light_141ee_140",
-  "teddy-card--purple-dark": "_teddy-card--purple-dark_141ee_154",
-  "teddy-card--white": "_teddy-card--white_141ee_173",
-  "teddy-card--gray": "_teddy-card--gray_141ee_187",
-  "teddy-card--beige": "_teddy-card--beige_141ee_201",
-  "teddy-card__image--as-background": "_teddy-card__image--as-background_141ee_215",
-  "teddy-card--background-image": "_teddy-card--background-image_141ee_221",
-  "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_141ee_226",
-  "teddy-card__inset": "_teddy-card__inset_141ee_230",
-  "teddy-card__inset--top": "_teddy-card__inset--top_141ee_233",
-  "teddy-card__inset--left": "_teddy-card__inset--left_141ee_236",
-  "teddy-card__inset--right": "_teddy-card__inset--right_141ee_239",
-  "teddy-card__inset--bottom": "_teddy-card__inset--bottom_141ee_242"
+  "teddy-card": "_teddy-card_2wvsb_3",
+  "teddy-card__slot": "_teddy-card__slot_2wvsb_13",
+  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_2wvsb_16",
+  "teddy-card__slot--center": "_teddy-card__slot--center_2wvsb_19",
+  "teddy-card--shadow": "_teddy-card--shadow_2wvsb_41",
+  "teddy-card__action": "_teddy-card__action_2wvsb_45",
+  "teddy-card__action--disabled": "_teddy-card__action--disabled_2wvsb_45",
+  "teddy-card--border": "_teddy-card--border_2wvsb_52",
+  "teddy-card--layout": "_teddy-card--layout_2wvsb_55",
+  "teddy-card__illustration": "_teddy-card__illustration_2wvsb_55",
+  "teddy-card__content": "_teddy-card__content_2wvsb_58",
+  "teddy-card__heading": "_teddy-card__heading_2wvsb_61",
+  "teddy-card__action-wrapper": "_teddy-card__action-wrapper_2wvsb_64",
+  "teddy-card__footer": "_teddy-card__footer_2wvsb_67",
+  "teddy-card__overline": "_teddy-card__overline_2wvsb_70",
+  "teddy-card__description": "_teddy-card__description_2wvsb_73",
+  "teddy-card__color-dots": "_teddy-card__color-dots_2wvsb_76",
+  "teddy-card__availability": "_teddy-card__availability_2wvsb_79",
+  "teddy-card__price": "_teddy-card__price_2wvsb_82",
+  "teddy-card--default": "_teddy-card--default_2wvsb_85",
+  "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_2wvsb_90",
+  "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_2wvsb_109",
+  "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_2wvsb_121",
+  "teddy-card--rich-card": "_teddy-card--rich-card_2wvsb_133",
+  "teddy-card__line": "_teddy-card__line_2wvsb_151",
+  "teddy-card--purple-light": "_teddy-card--purple-light_2wvsb_155",
+  "teddy-card--purple-dark": "_teddy-card--purple-dark_2wvsb_169",
+  "teddy-card--white": "_teddy-card--white_2wvsb_188",
+  "teddy-card--gray": "_teddy-card--gray_2wvsb_202",
+  "teddy-card--beige": "_teddy-card--beige_2wvsb_216",
+  "teddy-card--product": "_teddy-card--product_2wvsb_230",
+  "teddy-card__image--as-background": "_teddy-card__image--as-background_2wvsb_278",
+  "teddy-card--background-image": "_teddy-card--background-image_2wvsb_284",
+  "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_2wvsb_289",
+  "teddy-card__inset": "_teddy-card__inset_2wvsb_293",
+  "teddy-card__inset--top": "_teddy-card__inset--top_2wvsb_296",
+  "teddy-card__inset--left": "_teddy-card__inset--left_2wvsb_299",
+  "teddy-card__inset--right": "_teddy-card__inset--right_2wvsb_302",
+  "teddy-card__inset--bottom": "_teddy-card__inset--bottom_2wvsb_305",
+  "teddy-card__availability--badge": "_teddy-card__availability--badge_2wvsb_320",
+  "teddy-card__availability--success": "_teddy-card__availability--success_2wvsb_323",
+  "teddy-card__availability--warning": "_teddy-card__availability--warning_2wvsb_326",
+  "teddy-card__availability--error": "_teddy-card__availability--error_2wvsb_329",
+  "teddy-card__availability--special": "_teddy-card__availability--special_2wvsb_332",
+  "teddy-card__availability--neutral": "_teddy-card__availability--neutral_2wvsb_335",
+  "teddy-card__availability--information": "_teddy-card__availability--information_2wvsb_338"
 };
 const rootClassName = "teddy-card";
 const actionElementIdentifier = `${rootClassName}__action`;

package/dist/components/card/index.cjs

@@ -9,6 +9,11 @@ const components_card_cardLine = require("./card-line.cjs");
 const components_card_cardLink = require("./card-link.cjs");
 const components_card_cardSlot = require("./card-slot.cjs");
 const components_card_cardFooter = require("./card-footer.cjs");
+const components_card_cardOverline = require("./card-overline.cjs");
+const components_card_cardDescription = require("./card-description.cjs");
+const components_card_cardAvailability = require("./card-availability.cjs");
+const components_card_cardColorDots = require("./card-color-dots.cjs");
+const components_card_cardPrice = require("./card-price.cjs");
 components_card_card.Root.displayName = "Card";
 components_card_cardButton.Button.displayName = "Card.Button";
 components_card_cardContent.Content.displayName = "Card.Content";
@@ -18,6 +23,11 @@ components_card_cardLine.Line.displayName = "Card.Line";
 components_card_cardLink.Link.displayName = "Card.Link";
 components_card_cardSlot.Slot.displayName = "Card.Slot";
 components_card_cardFooter.Footer.displayName = "Card.Footer";
+components_card_cardOverline.Overline.displayName = "Card.Overline";
+components_card_cardDescription.Description.displayName = "Card.Description";
+components_card_cardAvailability.Availability.displayName = "Card.Availability";
+components_card_cardColorDots.ColorDots.displayName = "Card.ColorDots";
+components_card_cardPrice.Price.displayName = "Card.Price";
 const Card = Object.assign(components_card_card.Root, {
   Heading: components_card_cardHeading.Heading,
   Button: components_card_cardButton.Button,
@@ -25,7 +35,12 @@ const Card = Object.assign(components_card_card.Root, {
   Illustration: components_card_cardIllustration.Illustration,
   Line: components_card_cardLine.Line,
   Link: components_card_cardLink.Link,
+  Overline: components_card_cardOverline.Overline,
   Slot: components_card_cardSlot.Slot,
-  Footer: components_card_cardFooter.Footer
+  Footer: components_card_cardFooter.Footer,
+  Description: components_card_cardDescription.Description,
+  Availability: components_card_cardAvailability.Availability,
+  ColorDots: components_card_cardColorDots.ColorDots,
+  Price: components_card_cardPrice.Price
 });
 exports.Card = Card;

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

@@ -7,10 +7,15 @@ import { LineProps } from './card-line';
 import { LinkProps } from './card-link';
 import { SlotProps } from './card-slot';
 import { FooterProps } from './card-footer';
+import { OverlineProps } from './card-overline';
+import { DescriptionProps } from './card-description';
+import { AvailabilityProps } from './card-availability';
+import { ColorDotsProps } from './card-color-dots';
+import { PriceProps } from './card-price';
 
 export declare const Card: import('react').ForwardRefExoticComponent<RootProps & import('react').RefAttributes<HTMLDivElement>> & {
     Heading: import('react').ForwardRefExoticComponent<HeadingProps & import('react').RefAttributes<HTMLHeadingElement>>;
-    Button: import('react').ForwardRefExoticComponent<import('..').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+    Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
     Content: import('react').ForwardRefExoticComponent<ContentProps & import('react').RefAttributes<HTMLDivElement>>;
     Illustration: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         inset?: "all" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-right-left" | "bottom-left-right" | "top-bottom" | "left-right" | undefined;
@@ -24,8 +29,15 @@ export declare const Card: import('react').ForwardRefExoticComponent<RootProps &
         silent?: boolean | undefined;
         variant: "text" | "navigation" | "text-negative" | "standalone" | "standalone-negative" | "navigation-negative";
     } & import('react').RefAttributes<HTMLAnchorElement>, "ref"> & import('react').RefAttributes<HTMLAnchorElement>>;
+    Overline: import('react').ForwardRefExoticComponent<OverlineProps & import('react').RefAttributes<HTMLSpanElement>>;
     Slot: import('react').ForwardRefExoticComponent<SlotProps & import('react').RefAttributes<HTMLDivElement>>;
     Footer: import('react').ForwardRefExoticComponent<FooterProps & import('react').RefAttributes<HTMLDivElement>>;
+    Description: import('react').ForwardRefExoticComponent<DescriptionProps & import('react').RefAttributes<HTMLSpanElement>>;
+    Availability: import('react').ForwardRefExoticComponent<Partial<Omit<import('..').AlertBadgeProps & import('react').RefAttributes<HTMLSpanElement>, "ref">> & {
+        statusText: string;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    ColorDots: import('react').ForwardRefExoticComponent<ColorDotsProps & import('react').RefAttributes<HTMLDivElement>>;
+    Price: import('react').ForwardRefExoticComponent<PriceProps & import('react').RefAttributes<HTMLDivElement>>;
 };
 export type CardProps = {
     Root: RootProps;
@@ -37,4 +49,9 @@ export type CardProps = {
     Link: LinkProps;
     Slot: SlotProps;
     Footer: FooterProps;
+    Overline: OverlineProps;
+    Description: DescriptionProps;
+    Availability: AvailabilityProps;
+    ColorDots: ColorDotsProps;
+    Price: PriceProps;
 };

package/dist/components/card/index.js

@@ -7,6 +7,11 @@ import { Line } from "./card-line.js";
 import { Link } from "./card-link.js";
 import { Slot } from "./card-slot.js";
 import { Footer } from "./card-footer.js";
+import { Overline } from "./card-overline.js";
+import { Description } from "./card-description.js";
+import { Availability } from "./card-availability.js";
+import { ColorDots } from "./card-color-dots.js";
+import { Price } from "./card-price.js";
 Root.displayName = "Card";
 Button.displayName = "Card.Button";
 Content.displayName = "Card.Content";
@@ -16,6 +21,11 @@ Line.displayName = "Card.Line";
 Link.displayName = "Card.Link";
 Slot.displayName = "Card.Slot";
 Footer.displayName = "Card.Footer";
+Overline.displayName = "Card.Overline";
+Description.displayName = "Card.Description";
+Availability.displayName = "Card.Availability";
+ColorDots.displayName = "Card.ColorDots";
+Price.displayName = "Card.Price";
 const Card = Object.assign(Root, {
   Heading,
   Button,
@@ -23,8 +33,13 @@ const Card = Object.assign(Root, {
   Illustration,
   Line,
   Link,
+  Overline,
   Slot,
-  Footer
+  Footer,
+  Description,
+  Availability,
+  ColorDots,
+  Price
 });
 export {
   Card

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

@@ -31,6 +31,7 @@ declare const List: import('react').ForwardRefExoticComponent<Omit<Omit<import('
     layout?: import('./list').Layout | undefined;
     variant?: import('./list').Variant | undefined;
     isSubcomponent?: boolean | undefined;
+    gapSize?: "small" | "large" | undefined;
 } & 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('react').RefAttributes<HTMLDivElement>> & {

package/dist/components/list/list.cjs

@@ -6,22 +6,24 @@ const clsx = require("clsx");
 const components_flex_flex = require("../flex/flex.cjs");
 const reactSlot = require("@radix-ui/react-slot");
 const styles = {
-  "teddy-list": "_teddy-list_1fpoz_2",
-  "teddy-list__illustration": "_teddy-list__illustration_1fpoz_8",
-  "teddy-list__illustration--icon": "_teddy-list__illustration--icon_1fpoz_12",
-  "teddy-list__illustration--icon-white": "_teddy-list__illustration--icon-white_1fpoz_18",
-  "teddy-list__illustration--icon-purple": "_teddy-list__illustration--icon-purple_1fpoz_21",
-  "teddy-list__illustration--icon-gray": "_teddy-list__illustration--icon-gray_1fpoz_25",
-  "teddy-list__illustration--icon-beige": "_teddy-list__illustration--icon-beige_1fpoz_28",
-  "teddy-list--vertical": "_teddy-list--vertical_1fpoz_31",
-  "teddy-list__item": "_teddy-list__item_1fpoz_34",
-  "teddy-list--subcomponent": "_teddy-list--subcomponent_1fpoz_38",
-  "teddy-list--horizontal": "_teddy-list--horizontal_1fpoz_41"
+  "teddy-list": "_teddy-list_1gmg2_2",
+  "teddy-list--gap-small": "_teddy-list--gap-small_1gmg2_7",
+  "teddy-list--gap-large": "_teddy-list--gap-large_1gmg2_10",
+  "teddy-list__illustration": "_teddy-list__illustration_1gmg2_13",
+  "teddy-list__illustration--icon": "_teddy-list__illustration--icon_1gmg2_17",
+  "teddy-list__illustration--icon-white": "_teddy-list__illustration--icon-white_1gmg2_23",
+  "teddy-list__illustration--icon-purple": "_teddy-list__illustration--icon-purple_1gmg2_26",
+  "teddy-list__illustration--icon-gray": "_teddy-list__illustration--icon-gray_1gmg2_30",
+  "teddy-list__illustration--icon-beige": "_teddy-list__illustration--icon-beige_1gmg2_33",
+  "teddy-list--vertical": "_teddy-list--vertical_1gmg2_36",
+  "teddy-list__item": "_teddy-list__item_1gmg2_39",
+  "teddy-list--subcomponent": "_teddy-list--subcomponent_1gmg2_43",
+  "teddy-list--horizontal": "_teddy-list--horizontal_1gmg2_46"
 };
 const rootClassName = "teddy-list";
 const RootContext = React.createContext(void 0);
 const Root = React.forwardRef(
-  ({ isSubcomponent, ...props }, forwardRef) => {
+  ({ isSubcomponent, gapSize = "large", ...props }, forwardRef) => {
     const { className, asChild, children, variant, layout = "vertical" } = props;
     const Comp = asChild ? reactSlot.Slot : "ul";
     const classes = clsx(
@@ -29,20 +31,12 @@ const Root = React.forwardRef(
       {
         [styles[`${rootClassName}--${layout}`]]: layout,
         [styles[`${rootClassName}--${variant}`]]: variant,
+        [styles[`${rootClassName}--gap-${gapSize}`]]: gapSize,
         [styles[`${rootClassName}--subcomponent`]]: isSubcomponent
       },
       className
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(RootContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      components_flex_flex.Flex,
-      {
-        ...props,
-        ref: forwardRef,
-        className: classes,
-        asChild: true,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { children })
-      }
-    ) });
+    return /* @__PURE__ */ jsxRuntime.jsx(RootContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { ...props, ref: forwardRef, className: classes, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { children }) }) });
   }
 );
 Root.displayName = "List";

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

@@ -9,6 +9,7 @@ export type RootProps = Omit<React.ComponentPropsWithoutRef<typeof Flex>, 'as'>
     layout?: Layout;
     variant?: Variant;
     isSubcomponent?: boolean;
+    gapSize?: 'small' | 'large';
 } & ChildrenLayoutProps;
 type RootContextType = {
     variant?: Variant;
@@ -42,6 +43,7 @@ export declare const Root: React.ForwardRefExoticComponent<Omit<Omit<import('../
     layout?: Layout | undefined;
     variant?: Variant | undefined;
     isSubcomponent?: boolean | undefined;
+    gapSize?: "small" | "large" | undefined;
 } & 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;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/list/list.js

@@ -4,22 +4,24 @@ import clsx from "clsx";
 import { Flex } from "../flex/flex.js";
 import { Slot } from "@radix-ui/react-slot";
 const styles = {
-  "teddy-list": "_teddy-list_1fpoz_2",
-  "teddy-list__illustration": "_teddy-list__illustration_1fpoz_8",
-  "teddy-list__illustration--icon": "_teddy-list__illustration--icon_1fpoz_12",
-  "teddy-list__illustration--icon-white": "_teddy-list__illustration--icon-white_1fpoz_18",
-  "teddy-list__illustration--icon-purple": "_teddy-list__illustration--icon-purple_1fpoz_21",
-  "teddy-list__illustration--icon-gray": "_teddy-list__illustration--icon-gray_1fpoz_25",
-  "teddy-list__illustration--icon-beige": "_teddy-list__illustration--icon-beige_1fpoz_28",
-  "teddy-list--vertical": "_teddy-list--vertical_1fpoz_31",
-  "teddy-list__item": "_teddy-list__item_1fpoz_34",
-  "teddy-list--subcomponent": "_teddy-list--subcomponent_1fpoz_38",
-  "teddy-list--horizontal": "_teddy-list--horizontal_1fpoz_41"
+  "teddy-list": "_teddy-list_1gmg2_2",
+  "teddy-list--gap-small": "_teddy-list--gap-small_1gmg2_7",
+  "teddy-list--gap-large": "_teddy-list--gap-large_1gmg2_10",
+  "teddy-list__illustration": "_teddy-list__illustration_1gmg2_13",
+  "teddy-list__illustration--icon": "_teddy-list__illustration--icon_1gmg2_17",
+  "teddy-list__illustration--icon-white": "_teddy-list__illustration--icon-white_1gmg2_23",
+  "teddy-list__illustration--icon-purple": "_teddy-list__illustration--icon-purple_1gmg2_26",
+  "teddy-list__illustration--icon-gray": "_teddy-list__illustration--icon-gray_1gmg2_30",
+  "teddy-list__illustration--icon-beige": "_teddy-list__illustration--icon-beige_1gmg2_33",
+  "teddy-list--vertical": "_teddy-list--vertical_1gmg2_36",
+  "teddy-list__item": "_teddy-list__item_1gmg2_39",
+  "teddy-list--subcomponent": "_teddy-list--subcomponent_1gmg2_43",
+  "teddy-list--horizontal": "_teddy-list--horizontal_1gmg2_46"
 };
 const rootClassName = "teddy-list";
 const RootContext = React__default.createContext(void 0);
 const Root = React__default.forwardRef(
-  ({ isSubcomponent, ...props }, forwardRef) => {
+  ({ isSubcomponent, gapSize = "large", ...props }, forwardRef) => {
     const { className, asChild, children, variant, layout = "vertical" } = props;
     const Comp = asChild ? Slot : "ul";
     const classes = clsx(
@@ -27,20 +29,12 @@ const Root = React__default.forwardRef(
       {
         [styles[`${rootClassName}--${layout}`]]: layout,
         [styles[`${rootClassName}--${variant}`]]: variant,
+        [styles[`${rootClassName}--gap-${gapSize}`]]: gapSize,
         [styles[`${rootClassName}--subcomponent`]]: isSubcomponent
       },
       className
     );
-    return /* @__PURE__ */ jsx(RootContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx(
-      Flex,
-      {
-        ...props,
-        ref: forwardRef,
-        className: classes,
-        asChild: true,
-        children: /* @__PURE__ */ jsx(Comp, { children })
-      }
-    ) });
+    return /* @__PURE__ */ jsx(RootContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx(Flex, { ...props, ref: forwardRef, className: classes, asChild: true, children: /* @__PURE__ */ jsx(Comp, { children }) }) });
   }
 );
 Root.displayName = "List";

package/dist/components/notification/notification.d.ts

@@ -80,7 +80,7 @@ declare const Notification: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<
     imageGradient?: ("default" | "dark" | "light") | undefined;
     layout?: import('../card/card').Layout | undefined;
 } & React.RefAttributes<HTMLDivElement>, "ref">, "as" | "variant"> & {
-    variant?: "error" | "warning" | "success" | "information" | undefined;
+    variant?: "error" | "warning" | "information" | "success" | undefined;
     open?: boolean | undefined;
     defaultOpen?: boolean | undefined;
     onOpenChange?: ((open: boolean) => void) | undefined;