@telia/teddy 0.0.55 → 0.0.57

package/dist/components/box/box.cjs

@@ -5,11 +5,9 @@ const React = require("react");
 const clsx = require("clsx");
 const utils_generateStyling_index = require("../../utils/generate-styling/index.cjs");
 const reactSlot = require("@radix-ui/react-slot");
-const styles = {};
-const rootClassName = "teddy-box";
 const Box = React.forwardRef((props, forwardRef) => {
   const { className, asChild, style, as = "div", ...rest } = utils_generateStyling_index.extractProps(props);
-  const classes = clsx([styles[`${rootClassName}`]], className);
+  const classes = clsx(className);
   const Comp = asChild ? reactSlot.Slot : as;
   return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...rest, style, ref: forwardRef, className: classes });
 });

package/dist/components/box/box.js

@@ -3,11 +3,9 @@ import React__default from "react";
 import clsx from "clsx";
 import { extractProps } from "../../utils/generate-styling/index.js";
 import { Slot } from "@radix-ui/react-slot";
-const styles = {};
-const rootClassName = "teddy-box";
 const Box = React__default.forwardRef((props, forwardRef) => {
   const { className, asChild, style, as = "div", ...rest } = extractProps(props);
-  const classes = clsx([styles[`${rootClassName}`]], className);
+  const classes = clsx(className);
   const Comp = asChild ? Slot : as;
   return /* @__PURE__ */ jsx(Comp, { ...rest, style, ref: forwardRef, className: classes });
 });

package/dist/components/breadcrumbs/breadcrumbs-link.cjs

@@ -5,26 +5,23 @@ const React = require("react");
 const clsx = require("clsx");
 const reactSlot = require("@radix-ui/react-slot");
 const components_breadcrumbs_breadcrumbsRoot = require("./breadcrumbs-root.cjs");
+const components_link_link = require("../link/link.cjs");
 require("../../assets/sprite.269ba410-teddy.svg");
 const components_icon_icon = require("../icon/icon.cjs");
-const Link = React.forwardRef(
-  ({ asChild, children, home, className, ...props }, ref) => {
-    var _a;
-    const Comp = asChild ? reactSlot.Slot : "a";
-    const negative = (_a = React.useContext(components_breadcrumbs_breadcrumbsRoot.RootContext)) == null ? void 0 : _a.negative;
-    const classes = clsx(
-      [components_breadcrumbs_breadcrumbsRoot.styles[`${components_breadcrumbs_breadcrumbsRoot.rootClassName}__link`]],
-      {
-        [components_breadcrumbs_breadcrumbsRoot.styles["teddy-breadcrumbs__link--negative"]]: negative,
-        [components_breadcrumbs_breadcrumbsRoot.styles["teddy-breadcrumbs__link--home"]]: home
-      },
-      className
-    );
-    return /* @__PURE__ */ jsxRuntime.jsxs(Comp, { ...props, ref, className: classes, children: [
-      home && /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "home" }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children })
-    ] });
-  }
-);
+const Link = React.forwardRef(({ children, home, className, ...props }, ref) => {
+  var _a;
+  const negative = (_a = React.useContext(components_breadcrumbs_breadcrumbsRoot.RootContext)) == null ? void 0 : _a.negative;
+  const classes = clsx(
+    [components_breadcrumbs_breadcrumbsRoot.styles[`${components_breadcrumbs_breadcrumbsRoot.rootClassName}__link`]],
+    {
+      [components_breadcrumbs_breadcrumbsRoot.styles["teddy-breadcrumbs__link--home"]]: home
+    },
+    className
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(components_link_link.Link, { ...props, variant: negative ? "standalone-negative" : "standalone", ref, className: classes, children: [
+    home && /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "home" }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children })
+  ] });
+});
 Link.displayName = "Link";
 exports.Link = Link;

package/dist/components/breadcrumbs/breadcrumbs-link.d.ts

@@ -1,10 +1,15 @@
 import { default as React } from 'react';
+import { Link as LinkPrimitive } from '../link';
 
-export type LinkProps = React.ComponentPropsWithoutRef<'a'> & {
-    asChild?: boolean;
+export type LinkProps = Omit<React.ComponentPropsWithoutRef<typeof LinkPrimitive>, 'variant'> & {
     home?: boolean;
 };
-export declare const Link: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+export declare const Link: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
     asChild?: boolean | undefined;
+    disableVisited?: boolean | undefined;
+    ensureTargetArea?: boolean | undefined;
+    silent?: boolean | undefined;
+    variant: "text" | "navigation" | "text-negative" | "standalone" | "standalone-negative" | "navigation-negative";
+} & React.RefAttributes<HTMLAnchorElement>, "ref">, "variant"> & {
     home?: boolean | undefined;
 } & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/breadcrumbs/breadcrumbs-link.js

@@ -1,29 +1,26 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
-import { Slottable, Slot } from "@radix-ui/react-slot";
+import { Slottable } from "@radix-ui/react-slot";
 import { RootContext, s as styles, rootClassName } from "./breadcrumbs-root.js";
+import { Link as Link$1 } from "../link/link.js";
 import "../../assets/sprite.269ba410-teddy.svg";
 import { Icon } from "../icon/icon.js";
-const Link = React__default.forwardRef(
-  ({ asChild, children, home, className, ...props }, ref) => {
-    var _a;
-    const Comp = asChild ? Slot : "a";
-    const negative = (_a = React__default.useContext(RootContext)) == null ? void 0 : _a.negative;
-    const classes = clsx(
-      [styles[`${rootClassName}__link`]],
-      {
-        [styles["teddy-breadcrumbs__link--negative"]]: negative,
-        [styles["teddy-breadcrumbs__link--home"]]: home
-      },
-      className
-    );
-    return /* @__PURE__ */ jsxs(Comp, { ...props, ref, className: classes, children: [
-      home && /* @__PURE__ */ jsx(Icon, { name: "home" }),
-      /* @__PURE__ */ jsx(Slottable, { children })
-    ] });
-  }
-);
+const Link = React__default.forwardRef(({ children, home, className, ...props }, ref) => {
+  var _a;
+  const negative = (_a = React__default.useContext(RootContext)) == null ? void 0 : _a.negative;
+  const classes = clsx(
+    [styles[`${rootClassName}__link`]],
+    {
+      [styles["teddy-breadcrumbs__link--home"]]: home
+    },
+    className
+  );
+  return /* @__PURE__ */ jsxs(Link$1, { ...props, variant: negative ? "standalone-negative" : "standalone", ref, className: classes, children: [
+    home && /* @__PURE__ */ jsx(Icon, { name: "home" }),
+    /* @__PURE__ */ jsx(Slottable, { children })
+  ] });
+});
 Link.displayName = "Link";
 export {
   Link

package/dist/components/breadcrumbs/breadcrumbs-page.cjs

@@ -10,7 +10,7 @@ const Page = React.forwardRef(({ className, ...props }, forwardRef) => {
   const classes = clsx(
     [components_breadcrumbs_breadcrumbsRoot.styles[`${components_breadcrumbs_breadcrumbsRoot.rootClassName}__page`]],
     {
-      [components_breadcrumbs_breadcrumbsRoot.styles["teddy-breadcrumbs__page--negative"]]: negative
+      [components_breadcrumbs_breadcrumbsRoot.styles[`${components_breadcrumbs_breadcrumbsRoot.rootClassName}__page--negative`]]: negative
     },
     className
   );

package/dist/components/breadcrumbs/breadcrumbs-page.js

@@ -8,7 +8,7 @@ const Page = React__default.forwardRef(({ className, ...props }, forwardRef) =>
   const classes = clsx(
     [styles[`${rootClassName}__page`]],
     {
-      [styles["teddy-breadcrumbs__page--negative"]]: negative
+      [styles[`${rootClassName}__page--negative`]]: negative
     },
     className
   );

package/dist/components/breadcrumbs/breadcrumbs-root.cjs

@@ -4,15 +4,14 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
 const styles = {
-  "teddy-breadcrumbs__list": "_teddy-breadcrumbs__list_qwtmx_1",
-  "teddy-breadcrumbs__item": "_teddy-breadcrumbs__item_qwtmx_9",
-  "teddy-breadcrumbs__link": "_teddy-breadcrumbs__link_qwtmx_20",
-  "teddy-breadcrumbs__link--home": "_teddy-breadcrumbs__link--home_qwtmx_26",
-  "teddy-breadcrumbs__link--negative": "_teddy-breadcrumbs__link--negative_qwtmx_43",
-  "teddy-breadcrumbs__page": "_teddy-breadcrumbs__page_qwtmx_54",
-  "teddy-breadcrumbs__page--negative": "_teddy-breadcrumbs__page--negative_qwtmx_60",
-  "teddy-breadcrumbs__separator": "_teddy-breadcrumbs__separator_qwtmx_63",
-  "teddy-breadcrumbs__separator--negative": "_teddy-breadcrumbs__separator--negative_qwtmx_67"
+  "teddy-breadcrumbs__list": "_teddy-breadcrumbs__list_8irth_1",
+  "teddy-breadcrumbs__item": "_teddy-breadcrumbs__item_8irth_11",
+  "teddy-breadcrumbs__link": "_teddy-breadcrumbs__link_8irth_22",
+  "teddy-breadcrumbs__link--home": "_teddy-breadcrumbs__link--home_8irth_26",
+  "teddy-breadcrumbs__page": "_teddy-breadcrumbs__page_8irth_35",
+  "teddy-breadcrumbs__page--negative": "_teddy-breadcrumbs__page--negative_8irth_41",
+  "teddy-breadcrumbs__separator": "_teddy-breadcrumbs__separator_8irth_44",
+  "teddy-breadcrumbs__separator--negative": "_teddy-breadcrumbs__separator--negative_8irth_48"
 };
 const rootClassName = "teddy-breadcrumbs";
 const RootContext = React.createContext(void 0);

package/dist/components/breadcrumbs/breadcrumbs-root.js

@@ -2,15 +2,14 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
 const styles = {
-  "teddy-breadcrumbs__list": "_teddy-breadcrumbs__list_qwtmx_1",
-  "teddy-breadcrumbs__item": "_teddy-breadcrumbs__item_qwtmx_9",
-  "teddy-breadcrumbs__link": "_teddy-breadcrumbs__link_qwtmx_20",
-  "teddy-breadcrumbs__link--home": "_teddy-breadcrumbs__link--home_qwtmx_26",
-  "teddy-breadcrumbs__link--negative": "_teddy-breadcrumbs__link--negative_qwtmx_43",
-  "teddy-breadcrumbs__page": "_teddy-breadcrumbs__page_qwtmx_54",
-  "teddy-breadcrumbs__page--negative": "_teddy-breadcrumbs__page--negative_qwtmx_60",
-  "teddy-breadcrumbs__separator": "_teddy-breadcrumbs__separator_qwtmx_63",
-  "teddy-breadcrumbs__separator--negative": "_teddy-breadcrumbs__separator--negative_qwtmx_67"
+  "teddy-breadcrumbs__list": "_teddy-breadcrumbs__list_8irth_1",
+  "teddy-breadcrumbs__item": "_teddy-breadcrumbs__item_8irth_11",
+  "teddy-breadcrumbs__link": "_teddy-breadcrumbs__link_8irth_22",
+  "teddy-breadcrumbs__link--home": "_teddy-breadcrumbs__link--home_8irth_26",
+  "teddy-breadcrumbs__page": "_teddy-breadcrumbs__page_8irth_35",
+  "teddy-breadcrumbs__page--negative": "_teddy-breadcrumbs__page--negative_8irth_41",
+  "teddy-breadcrumbs__separator": "_teddy-breadcrumbs__separator_8irth_44",
+  "teddy-breadcrumbs__separator--negative": "_teddy-breadcrumbs__separator--negative_8irth_48"
 };
 const rootClassName = "teddy-breadcrumbs";
 const RootContext = React__default.createContext(void 0);

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

@@ -10,8 +10,13 @@ export declare const Breadcrumbs: import('react').ForwardRefExoticComponent<Omit
 } & import('react').RefAttributes<HTMLElement>> & {
     List: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & import('react').RefAttributes<HTMLOListElement>>;
     Item: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import('react').RefAttributes<HTMLLIElement>>;
-    Link: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    Link: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
         asChild?: boolean | undefined;
+        disableVisited?: boolean | undefined;
+        ensureTargetArea?: boolean | undefined;
+        silent?: boolean | undefined;
+        variant: "text" | "navigation" | "text-negative" | "standalone" | "standalone-negative" | "navigation-negative";
+    } & import('react').RefAttributes<HTMLAnchorElement>, "ref">, "variant"> & {
         home?: boolean | undefined;
     } & import('react').RefAttributes<HTMLAnchorElement>>;
     Page: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;

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

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

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

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

package/dist/components/container/container.cjs

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const components_box_box = require("../box/box.cjs");
+const clsx = require("clsx");
+const components_flex_flex = require("../flex/flex.cjs");
+const styles = {
+  "teddy-container": "_teddy-container_1jmq1_1"
+};
+const Container = React.forwardRef(
+  ({ width, minWidth, maxWidth, height, minHeight, maxHeight, children, ...props }, forwardRef) => {
+    const innerContainer = { minWidth, height, minHeight, maxHeight };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      components_flex_flex.Flex,
+      {
+        align: "center",
+        direction: "column",
+        flexGrow: "1",
+        flexShrink: "0",
+        ml: { sm: "200", xl: "600" },
+        mr: { sm: "200", xl: "600" },
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          components_box_box.Box,
+          {
+            width: width || "100%",
+            maxWidth: maxWidth || { sm: "100%", xl: "1344px" },
+            ...innerContainer,
+            className: clsx(styles["teddy-container"], props.className),
+            ref: forwardRef,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+exports.Container = Container;

package/dist/components/container/container.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { Box } from '../box';
+import { Flex } from '../flex';
+
+type ContainerProps = React.ComponentPropsWithoutRef<typeof Box> & Pick<React.ComponentProps<typeof Flex>, 'align'>;
+/** */
+declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
+export { Container };
+export type { ContainerProps };

package/dist/components/container/container.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { Box } from "../box/box.js";
+import clsx from "clsx";
+import { Flex } from "../flex/flex.js";
+const styles = {
+  "teddy-container": "_teddy-container_1jmq1_1"
+};
+const Container = React__default.forwardRef(
+  ({ width, minWidth, maxWidth, height, minHeight, maxHeight, children, ...props }, forwardRef) => {
+    const innerContainer = { minWidth, height, minHeight, maxHeight };
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        align: "center",
+        direction: "column",
+        flexGrow: "1",
+        flexShrink: "0",
+        ml: { sm: "200", xl: "600" },
+        mr: { sm: "200", xl: "600" },
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            width: width || "100%",
+            maxWidth: maxWidth || { sm: "100%", xl: "1344px" },
+            ...innerContainer,
+            className: clsx(styles["teddy-container"], props.className),
+            ref: forwardRef,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+export {
+  Container
+};

package/dist/components/container/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_container_container = require("./container.cjs");
+exports.Container = components_container_container.Container;

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

@@ -0,0 +1,2 @@
+export { Container } from './container';
+export type { ContainerProps } from './container';

package/dist/components/container/index.js

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

package/dist/components/expandable-card/expandable-card-button.d.ts

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

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

@@ -27,7 +27,7 @@ export declare const ExpandableCard: import('react').ForwardRefExoticComponent<R
         loading?: boolean | undefined;
         fullWidth?: boolean | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+        variant?: "text" | "text-negative" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
     } & {
         iconOnly: true;
         "aria-label": string;
@@ -38,12 +38,12 @@ export declare const ExpandableCard: import('react').ForwardRefExoticComponent<R
         loading?: boolean | undefined;
         fullWidth?: boolean | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+        variant?: "text" | "text-negative" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
     } & {
         iconOnly?: false | undefined;
         "aria-label"?: string | undefined;
     } & import('react').RefAttributes<HTMLButtonElement>, "ref">, "variant"> & {
-        variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+        variant?: "text" | "text-negative" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
         position?: "right" | "left" | undefined;
     } & import('react').RefAttributes<HTMLButtonElement>>;
     Indicator: import('react').ForwardRefExoticComponent<Omit<IndicatorProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;

package/dist/components/index.cjs

@@ -43,6 +43,7 @@ const components_textField_index = require("./text-field/index.cjs");
 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_container_container = require("./container/container.cjs");
 const components_input_inputGroup = require("./input/input-group.cjs");
 exports.Breadcrumbs = components_breadcrumbs_index.Breadcrumbs;
 exports.Modal = components_radioCardGroup_radioCardGroupItemTitle.Modal;
@@ -88,4 +89,5 @@ exports.TextField = components_textField_index.TextField;
 exports.Heading = components_heading_heading.Heading;
 exports.VisuallyHidden = components_visuallyHidden_visuallyHidden.VisuallyHidden;
 exports.TextSpacing = components_textSpacing_textSpacing.TextSpacing;
+exports.Container = components_container_container.Container;
 exports.Input = components_input_inputGroup.Input;

package/dist/components/index.d.ts

@@ -37,3 +37,4 @@ export * from './text-field';
 export * from './heading';
 export * from './visually-hidden';
 export * from './text-spacing';
+export * from './container';

package/dist/components/index.js

@@ -41,6 +41,7 @@ import { TextField } from "./text-field/index.js";
 import { Heading } from "./heading/heading.js";
 import { VisuallyHidden } from "./visually-hidden/visually-hidden.js";
 import { TextSpacing } from "./text-spacing/text-spacing.js";
+import { Container } from "./container/container.js";
 import { I } from "./input/input-group.js";
 export {
   Accordion,
@@ -53,6 +54,7 @@ export {
   Card,
   Chip,
   ColorDot,
+  Container,
   CounterBadge,
   DatePicker,
   Drawer,

package/dist/components/modal/modal.cjs

@@ -45,6 +45,7 @@ require("../text-field/index.cjs");
 require("../heading/heading.cjs");
 require("../visually-hidden/visually-hidden.cjs");
 require("../text-spacing/text-spacing.cjs");
+require("../container/container.cjs");
 require("@radix-ui/react-slot");
 require("../../utils/composeRefs.cjs");
 exports.Modal = components_radioCardGroup_radioCardGroupItemTitle.Modal;

package/dist/components/modal/modal.js

@@ -43,6 +43,7 @@ import "../text-field/index.js";
 import "../heading/heading.js";
 import "../visually-hidden/visually-hidden.js";
 import "../text-spacing/text-spacing.js";
+import "../container/container.js";
 import "@radix-ui/react-slot";
 import "../../utils/composeRefs.js";
 export {

package/dist/components/radio-card-group/radio-card-group-content.cjs

@@ -44,4 +44,5 @@ require("../text-field/index.cjs");
 require("../heading/heading.cjs");
 require("../visually-hidden/visually-hidden.cjs");
 require("../text-spacing/text-spacing.cjs");
+require("../container/container.cjs");
 exports.Content = components_radioCardGroup_radioCardGroupItemTitle.Content;

package/dist/components/radio-card-group/radio-card-group-content.js

@@ -42,6 +42,7 @@ import "../text-field/index.js";
 import "../heading/heading.js";
 import "../visually-hidden/visually-hidden.js";
 import "../text-spacing/text-spacing.js";
+import "../container/container.js";
 export {
   C as Content
 };

package/dist/components/radio-card-group/radio-card-group-item-body.cjs

@@ -45,4 +45,5 @@ require("../text-field/index.cjs");
 require("../heading/heading.cjs");
 require("../visually-hidden/visually-hidden.cjs");
 require("../text-spacing/text-spacing.cjs");
+require("../container/container.cjs");
 exports.Body = components_radioCardGroup_radioCardGroupItemTitle.Body;

package/dist/components/radio-card-group/radio-card-group-item-body.js

@@ -43,6 +43,7 @@ import "../text-field/index.js";
 import "../heading/heading.js";
 import "../visually-hidden/visually-hidden.js";
 import "../text-spacing/text-spacing.js";
+import "../container/container.js";
 export {
   B as Body
 };

package/dist/components/radio-card-group/radio-card-group-item-title.cjs

@@ -47,6 +47,7 @@ require("../text-field/index.cjs");
 const components_heading_heading = require("../heading/heading.cjs");
 require("../visually-hidden/visually-hidden.cjs");
 require("../text-spacing/text-spacing.cjs");
+require("../container/container.cjs");
 const utils_composeRefs = require("../../utils/composeRefs.cjs");
 const components_radioCardGroup_radioCardGroupIndicator = require("./radio-card-group-indicator.cjs");
 const RadioGroupPrimitive = require("@radix-ui/react-radio-group");

package/dist/components/radio-card-group/radio-card-group-item-title.js

@@ -45,6 +45,7 @@ import "../text-field/index.js";
 import { Heading } from "../heading/heading.js";
 import "../visually-hidden/visually-hidden.js";
 import "../text-spacing/text-spacing.js";
+import "../container/container.js";
 import { useComposedRefs, composeRefs } from "../../utils/composeRefs.js";
 import { Indicator } from "./radio-card-group-indicator.js";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";

package/dist/components/radio-card-group/radio-card-group-item.cjs

@@ -45,6 +45,7 @@ require("../text-field/index.cjs");
 require("../heading/heading.cjs");
 require("../visually-hidden/visually-hidden.cjs");
 require("../text-spacing/text-spacing.cjs");
+require("../container/container.cjs");
 require("../../utils/composeRefs.cjs");
 exports.Item = components_radioCardGroup_radioCardGroupItemTitle.Item;
 exports.ItemContext = components_radioCardGroup_radioCardGroupItemTitle.ItemContext;

package/dist/components/radio-card-group/radio-card-group-item.js

@@ -43,6 +43,7 @@ import "../text-field/index.js";
 import "../heading/heading.js";
 import "../visually-hidden/visually-hidden.js";
 import "../text-spacing/text-spacing.js";
+import "../container/container.js";
 import "../../utils/composeRefs.js";
 export {
   a as Item,

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/main.cjs

@@ -43,6 +43,7 @@ const components_textField_index = require("./components/text-field/index.cjs");
 const components_heading_heading = require("./components/heading/heading.cjs");
 const components_visuallyHidden_visuallyHidden = require("./components/visually-hidden/visually-hidden.cjs");
 const components_textSpacing_textSpacing = require("./components/text-spacing/text-spacing.cjs");
+const components_container_container = require("./components/container/container.cjs");
 const tokens_border_variables = require("./tokens/border/variables.cjs");
 const tokens_breakpoint_variables = require("./tokens/breakpoint/variables.cjs");
 const tokens_color_variables = require("./tokens/color/variables.cjs");
@@ -95,6 +96,7 @@ exports.TextField = components_textField_index.TextField;
 exports.Heading = components_heading_heading.Heading;
 exports.VisuallyHidden = components_visuallyHidden_visuallyHidden.VisuallyHidden;
 exports.TextSpacing = components_textSpacing_textSpacing.TextSpacing;
+exports.Container = components_container_container.Container;
 exports.teddyBorderRadiusFull = tokens_border_variables.teddyBorderRadiusFull;
 exports.teddyBorderRadiusLg = tokens_border_variables.teddyBorderRadiusLg;
 exports.teddyBorderRadiusMd = tokens_border_variables.teddyBorderRadiusMd;

package/dist/main.js

@@ -41,6 +41,7 @@ import { TextField } from "./components/text-field/index.js";
 import { Heading } from "./components/heading/heading.js";
 import { VisuallyHidden } from "./components/visually-hidden/visually-hidden.js";
 import { TextSpacing } from "./components/text-spacing/text-spacing.js";
+import { Container } from "./components/container/container.js";
 import { teddyBorderRadiusFull, teddyBorderRadiusLg, teddyBorderRadiusMd, teddyBorderRadiusSm, teddyBorderRadiusXs, teddyBorderWidthLg, teddyBorderWidthMd, teddyBorderWidthSm, teddyBorderWidthXs } from "./tokens/border/variables.js";
 import { teddyBreakpointLg, teddyBreakpointMd, teddyBreakpointSm, teddyBreakpointXl } from "./tokens/breakpoint/variables.js";
 import { teddyColorBackgroundInteractiveDestructive, teddyColorBackgroundInteractiveDestructiveActive, teddyColorBackgroundInteractiveDestructiveHover, teddyColorBackgroundInteractiveDisabled, teddyColorBackgroundInteractiveDisabledNegative, teddyColorBackgroundInteractiveExpressive, teddyColorBackgroundInteractiveExpressiveActive, teddyColorBackgroundInteractiveExpressiveHover, teddyColorBackgroundInteractiveExpressiveNegative, teddyColorBackgroundInteractiveExpressiveNegativeActive, teddyColorBackgroundInteractiveExpressiveNegativeHover, teddyColorBackgroundInteractiveInactive, teddyColorBackgroundInteractiveInactiveNegative, teddyColorBackgroundInteractivePrimary, teddyColorBackgroundInteractivePrimaryActive, teddyColorBackgroundInteractivePrimaryHover, teddyColorBackgroundInteractivePrimaryNegative, teddyColorBackgroundInteractivePrimaryNegativeActive, teddyColorBackgroundInteractivePrimaryNegativeHover, teddyColorBackgroundInteractiveReadOnly, teddyColorBackgroundInteractiveTransparent, teddyColorBackgroundInteractiveTransparentActive, teddyColorBackgroundInteractiveTransparentHover, teddyColorBackgroundInteractiveTransparentNegativeActive, teddyColorBackgroundInteractiveTransparentNegativeHover, teddyColorBackgroundPrimary, teddyColorBackgroundSecondary, teddyColorBackgroundStatusAttention, teddyColorBackgroundStatusError, teddyColorBackgroundStatusErrorStrong, teddyColorBackgroundStatusInfo, teddyColorBackgroundStatusInfoStrong, teddyColorBackgroundStatusNeutral, teddyColorBackgroundStatusSpecial, teddyColorBackgroundStatusSuccess, teddyColorBackgroundStatusSuccessStrong, teddyColorBackgroundStatusWarning, teddyColorBackgroundStatusWarningStrong, teddyColorBackgroundToneOnTonePrimary, teddyColorBackgroundToneOnToneQuaternary, teddyColorBackgroundToneOnToneSecondary, teddyColorBackgroundToneOnToneTertiary, teddyColorBeige100, teddyColorBeige200, teddyColorBeige300, teddyColorBeige400, teddyColorBeige50, teddyColorBeige500, teddyColorBeige600, teddyColorBeige700, teddyColorBeige800, teddyColorBeige900, teddyColorBeige950, teddyColorBlue100, teddyColorBlue200, teddyColorBlue300, teddyColorBlue400, teddyColorBlue50, teddyColorBlue500, teddyColorBlue600, teddyColorBlue700, teddyColorBlue800, teddyColorBlue900, teddyColorBlue950, teddyColorBorderInteractiveFocus, teddyColorBorderInteractivePrimary, teddyColorBorderInteractivePrimaryActive, teddyColorBorderInteractivePrimaryHover, teddyColorBorderInteractivePrimaryNegative, teddyColorBorderInteractivePrimaryNegativeActive, teddyColorBorderInteractivePrimaryNegativeHover, teddyColorBorderInteractiveSelected, teddyColorBorderInteractiveSubtle, teddyColorBorderInteractiveSubtleHover, teddyColorBorderMedium, teddyColorBorderMediumNegative, teddyColorBorderStatusError, teddyColorBorderStatusInfo, teddyColorBorderStatusSuccess, teddyColorBorderStatusWarning, teddyColorBorderStrong, teddyColorBorderStrongNegative, teddyColorBorderWeak, teddyColorBorderWeakNegative, teddyColorBrandBeige, teddyColorBrandCorePurple, teddyColorBrandDeepBeige, teddyColorBrandDeepPurple, teddyColorBrandLightBeige, teddyColorBrandLightPurple, teddyColorBrandOffBlack, teddyColorBrandWhite, teddyColorFunctionalBlack, teddyColorFunctionalTransparent, teddyColorFunctionalWhite, teddyColorGray100, teddyColorGray150, teddyColorGray200, teddyColorGray300, teddyColorGray400, teddyColorGray50, teddyColorGray500, teddyColorGray600, teddyColorGray700, teddyColorGray800, teddyColorGray850, teddyColorGray900, teddyColorGray950, teddyColorGreen100, teddyColorGreen200, teddyColorGreen300, teddyColorGreen400, teddyColorGreen50, teddyColorGreen500, teddyColorGreen600, teddyColorGreen700, teddyColorGreen800, teddyColorGreen900, teddyColorGreen950, teddyColorOrange100, teddyColorOrange200, teddyColorOrange300, teddyColorOrange400, teddyColorOrange50, teddyColorOrange500, teddyColorOrange600, teddyColorOrange700, teddyColorOrange800, teddyColorOrange900, teddyColorOrange950, teddyColorOverlayDefault, teddyColorPurple100, teddyColorPurple200, teddyColorPurple300, teddyColorPurple400, teddyColorPurple50, teddyColorPurple500, teddyColorPurple550, teddyColorPurple600, teddyColorPurple700, teddyColorPurple800, teddyColorPurple900, teddyColorPurple950, teddyColorRed100, teddyColorRed200, teddyColorRed300, teddyColorRed400, teddyColorRed50, teddyColorRed500, teddyColorRed600, teddyColorRed700, teddyColorRed800, teddyColorRed900, teddyColorRed950, teddyColorTeal100, teddyColorTeal200, teddyColorTeal300, teddyColorTeal400, teddyColorTeal50, teddyColorTeal500, teddyColorTeal600, teddyColorTeal700, teddyColorTeal800, teddyColorTeal900, teddyColorTeal950, teddyColorTextDefault, teddyColorTextDefaultNegative, teddyColorTextInteractiveOnDestructive, teddyColorTextInteractiveOnExpressive, teddyColorTextInteractiveOnExpressiveNegative, teddyColorTextInteractiveOnExpressiveNegativeActive, teddyColorTextInteractiveOnExpressiveNegativeHover, teddyColorTextInteractiveOnPrimary, teddyColorTextInteractiveOnPrimaryNegative, teddyColorTextInteractivePrimary, teddyColorTextInteractivePrimaryActive, teddyColorTextInteractivePrimaryHover, teddyColorTextInteractivePrimaryNegative, teddyColorTextInteractivePrimaryNegativeActive, teddyColorTextInteractivePrimaryNegativeHover, teddyColorTextInteractiveSelected, teddyColorTextMedium, teddyColorTextMediumNegative, teddyColorTextStatusAttention, teddyColorTextStatusDiscount, teddyColorTextStatusErrorMedium, teddyColorTextStatusErrorStrong, teddyColorTextStatusInfoMedium, teddyColorTextStatusInfoStrong, teddyColorTextStatusNeutral, teddyColorTextStatusSpecial, teddyColorTextStatusSuccessMedium, teddyColorTextStatusSuccessStrong, teddyColorTextStatusWarningMedium, teddyColorTextStatusWarningStrong, teddyColorTextToneOnTonePrimary, teddyColorTextToneOnToneSecondary, teddyColorTextToneOnToneTertiary, teddyColorTextWeak, teddyColorTextWeakNegative, teddyColorTransparentBlack100, teddyColorTransparentBlack150, teddyColorTransparentBlack200, teddyColorTransparentBlack300, teddyColorTransparentBlack400, teddyColorTransparentBlack50, teddyColorTransparentBlack500, teddyColorTransparentBlack600, teddyColorTransparentBlack700, teddyColorTransparentBlack800, teddyColorTransparentBlack850, teddyColorTransparentBlack900, teddyColorTransparentBlack950, teddyColorTransparentWhite100, teddyColorTransparentWhite150, teddyColorTransparentWhite200, teddyColorTransparentWhite300, teddyColorTransparentWhite400, teddyColorTransparentWhite50, teddyColorTransparentWhite500, teddyColorTransparentWhite600, teddyColorTransparentWhite700, teddyColorTransparentWhite800, teddyColorTransparentWhite850, teddyColorTransparentWhite900, teddyColorTransparentWhite950 } from "./tokens/color/variables.js";
@@ -60,6 +61,7 @@ export {
   Card,
   Chip,
   ColorDot,
+  Container,
   CounterBadge,
   DatePicker,
   Drawer,

package/dist/style.css

@@ -1,12 +1,14 @@
-._teddy-breadcrumbs__list_qwtmx_1 {
+._teddy-breadcrumbs__list_8irth_1 {
   display: flex;
   align-items: center;
   gap: var(--teddy-spacing-50);
   font-size: var(--teddy-typography-scale-75);
   list-style: none;
   font-family: var(--teddy-typography-family-default);
+  padding: 0;
+  margin: 0;
 }
-._teddy-breadcrumbs__item_qwtmx_9 {
+._teddy-breadcrumbs__item_8irth_11 {
   display: inline-grid;
   align-items: center;
   gap: var(--teddy-spacing-50);
@@ -17,69 +19,126 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-._teddy-breadcrumbs__link_qwtmx_20 {
-  transition: color var(--teddy-motion-duration-100) ease;
+._teddy-breadcrumbs__link_8irth_22 {
   padding: var(--teddy-spacing-150) var(--teddy-spacing-25);
   line-height: var(--teddy-typography-line-height-loose);
-  color: var(--teddy-color-text-interactive-primary);
 }
-._teddy-breadcrumbs__link--home_qwtmx_26 {
+._teddy-breadcrumbs__link--home_8irth_26 {
   display: inline-flex;
   align-items: center;
   gap: var(--teddy-spacing-50);
 }
-._teddy-breadcrumbs__link_qwtmx_20:hover, ._teddy-breadcrumbs__link_qwtmx_20:active {
+._teddy-breadcrumbs__link_8irth_22:hover, ._teddy-breadcrumbs__link_8irth_22:active {
   text-decoration-thickness: var(--teddy-border-width-sm);
   text-underline-offset: var(--teddy-border-width-sm);
 }
-._teddy-breadcrumbs__link_qwtmx_20:hover {
-  color: var(--teddy-color-text-interactive-primary-hover);
-  background: var(--teddy-color-background-interactive-transparent-hover);
-}
-._teddy-breadcrumbs__link_qwtmx_20:active {
-  color: var(--teddy-color-text-interactive-primary-active);
-  background: var(--teddy-color-background-interactive-transparent-active);
-}
-._teddy-breadcrumbs__link--negative_qwtmx_43 {
-  color: var(--teddy-color-text-interactive-primary-negative);
-}
-._teddy-breadcrumbs__link--negative_qwtmx_43:hover {
-  color: var(--teddy-color-text-interactive-primary-negative-hover);
-  background: var(--teddy-color-background-interactive-transparent-negative-hover);
-}
-._teddy-breadcrumbs__link--negative_qwtmx_43:active {
-  color: var(--teddy-color-text-interactive-primary-negative-active);
-  background: var(--teddy-color-background-interactive-transparent-negative-active);
-}
-._teddy-breadcrumbs__page_qwtmx_54 {
+._teddy-breadcrumbs__page_8irth_35 {
   font-weight: var(--teddy-typography-weight-medium);
   color: var(--teddy-color-text-default);
   text-overflow: ellipsis;
   overflow: hidden;
 }
-._teddy-breadcrumbs__page--negative_qwtmx_60 {
+._teddy-breadcrumbs__page--negative_8irth_41 {
   color: var(--teddy-color-text-default-negative);
 }
-._teddy-breadcrumbs__separator_qwtmx_63 {
-  color: var(--teddy-color-text-default);
+._teddy-breadcrumbs__separator_8irth_44 {
+  color: var(--teddy-color-text-interactive-primary);
   font-weight: var(--teddy-typography-weight-normal);
 }
-._teddy-breadcrumbs__separator--negative_qwtmx_67 {
-  color: var(--teddy-color-text-default-negative);
+._teddy-breadcrumbs__separator--negative_8irth_48 {
+  color: var(--teddy-color-text-interactive-primary-negative);
 }
 @media (max-width: 600px) {
-  ._teddy-breadcrumbs__item_qwtmx_9, ._teddy-breadcrumbs__separator_qwtmx_63 {
+  ._teddy-breadcrumbs__item_8irth_11, ._teddy-breadcrumbs__separator_8irth_44 {
     display: none;
   }
-  ._teddy-breadcrumbs__item_qwtmx_9:last-child {
+  ._teddy-breadcrumbs__item_8irth_11:last-child {
     display: inline-grid;
   }
-  ._teddy-breadcrumbs__item_qwtmx_9:nth-last-child(3) {
+  ._teddy-breadcrumbs__item_8irth_11:nth-last-child(3) {
     display: inline-grid;
   }
-  ._teddy-breadcrumbs__item_qwtmx_9:nth-last-child(3) ~ ._teddy-breadcrumbs__separator_qwtmx_63 {
+  ._teddy-breadcrumbs__item_8irth_11:nth-last-child(3) ~ ._teddy-breadcrumbs__separator_8irth_44 {
     display: inline-grid;
   }
+}@layer link {
+  ._teddy-link_azi31_2 {
+    align-items: center;
+    cursor: pointer;
+    display: inline-flex;
+    gap: var(--teddy-spacing-50);
+    text-decoration: underline;
+  }
+  ._teddy-link_azi31_2:focus, ._teddy-link_azi31_2:active {
+    outline: solid var(--teddy-border-width-sm) var(--teddy-color-border-interactive-focus);
+    outline-offset: var(--teddy-spacing-25);
+  }
+  ._teddy-link_azi31_2:focus:not(:focus-visible) {
+    outline: 0;
+  }
+  ._teddy-link--text_azi31_16, ._teddy-link--standalone_azi31_16, ._teddy-link--navigation_azi31_16 {
+    color: var(--teddy-color-text-interactive-primary);
+  }
+  ._teddy-link--text_azi31_16:hover, ._teddy-link--standalone_azi31_16:hover, ._teddy-link--navigation_azi31_16:hover {
+    color: var(--teddy-color-text-interactive-primary-active);
+    background-color: var(--teddy-color-background-interactive-transparent-hover);
+  }
+  ._teddy-link--text_azi31_16:active, ._teddy-link--standalone_azi31_16:active, ._teddy-link--navigation_azi31_16:active {
+    background-color: var(--teddy-color-background-interactive-transparent-active);
+  }
+  ._teddy-link--text_azi31_16:visited:not(._teddy-link--disable-visited_azi31_26), ._teddy-link--standalone_azi31_16:visited:not(._teddy-link--disable-visited_azi31_26), ._teddy-link--navigation_azi31_16:visited:not(._teddy-link--disable-visited_azi31_26) {
+    color: var(--teddy-color-text-interactive-primary-active);
+  }
+  ._teddy-link--text-negative_azi31_29, ._teddy-link--standalone-negative_azi31_29, ._teddy-link--navigation-negative_azi31_29 {
+    color: var(--teddy-color-text-interactive-primary-negative);
+  }
+  ._teddy-link--text-negative_azi31_29:hover, ._teddy-link--standalone-negative_azi31_29:hover, ._teddy-link--navigation-negative_azi31_29:hover {
+    background-color: var(--teddy-color-background-interactive-transparent-negative-hover);
+    color: var(--teddy-color-text-interactive-primary-negative);
+  }
+  ._teddy-link--text-negative_azi31_29:active, ._teddy-link--standalone-negative_azi31_29:active, ._teddy-link--navigation-negative_azi31_29:active {
+    background-color: var(--teddy-color-background-interactive-transparent-negative-active);
+    color: var(--teddy-color-text-interactive-primary-negative-active);
+  }
+  ._teddy-link--text-negative_azi31_29:visited:not(._teddy-link--disable-visited_azi31_26), ._teddy-link--standalone-negative_azi31_29:visited:not(._teddy-link--disable-visited_azi31_26), ._teddy-link--navigation-negative_azi31_29:visited:not(._teddy-link--disable-visited_azi31_26) {
+    color: var(--teddy-color-text-interactive-primary-negative-active);
+  }
+  ._teddy-link--standalone_azi31_16, ._teddy-link--standalone-negative_azi31_29 {
+    padding: var(--teddy-spacing-150) 0;
+  }
+  ._teddy-link--navigation_azi31_16, ._teddy-link--navigation-negative_azi31_29 {
+    align-items: center;
+    background-color: var(--teddy-color-functional-transparent);
+    display: flex;
+    font-weight: var(--teddy-typography-weight-medium);
+    text-decoration: none;
+  }
+  ._teddy-link--navigation_azi31_16:active, ._teddy-link--navigation_azi31_16:hover, ._teddy-link--navigation-negative_azi31_29:active, ._teddy-link--navigation-negative_azi31_29:hover {
+    background-color: var(--teddy-color-functional-transparent);
+    text-decoration: underline;
+  }
+  ._teddy-link--ensure-target-area_azi31_57 {
+    display: flex;
+    align-items: center;
+    min-height: var(--teddy-spacing-600);
+    min-width: var(--teddy-spacing-600);
+  }
+  ._teddy-link--silent_azi31_63 {
+    background-color: inherit;
+    color: inherit;
+    height: 100%;
+    text-decoration: none;
+  }
+  ._teddy-link--silent_azi31_63:hover, ._teddy-link--silent_azi31_63:focus, ._teddy-link--silent_azi31_63:active {
+    background-color: inherit;
+    color: inherit;
+  }
+  ._teddy-link--silent_azi31_63 a:focus {
+    outline: 0;
+  }
+  ._teddy-link--silent_azi31_63:is(._teddy-link--disable-visited_azi31_26):visited {
+    color: inherit;
+  }
 }@layer icon {
   ._teddy-icon_1rwgf_2 {
     display: inline;
@@ -1835,84 +1894,6 @@
   ._teddy-card__inset--right_141ee_239 {
     margin-right: calc(var(--teddy-spacing-250) * -1);
   }
-}@layer link {
-  ._teddy-link_azi31_2 {
-    align-items: center;
-    cursor: pointer;
-    display: inline-flex;
-    gap: var(--teddy-spacing-50);
-    text-decoration: underline;
-  }
-  ._teddy-link_azi31_2:focus, ._teddy-link_azi31_2:active {
-    outline: solid var(--teddy-border-width-sm) var(--teddy-color-border-interactive-focus);
-    outline-offset: var(--teddy-spacing-25);
-  }
-  ._teddy-link_azi31_2:focus:not(:focus-visible) {
-    outline: 0;
-  }
-  ._teddy-link--text_azi31_16, ._teddy-link--standalone_azi31_16, ._teddy-link--navigation_azi31_16 {
-    color: var(--teddy-color-text-interactive-primary);
-  }
-  ._teddy-link--text_azi31_16:hover, ._teddy-link--standalone_azi31_16:hover, ._teddy-link--navigation_azi31_16:hover {
-    color: var(--teddy-color-text-interactive-primary-active);
-    background-color: var(--teddy-color-background-interactive-transparent-hover);
-  }
-  ._teddy-link--text_azi31_16:active, ._teddy-link--standalone_azi31_16:active, ._teddy-link--navigation_azi31_16:active {
-    background-color: var(--teddy-color-background-interactive-transparent-active);
-  }
-  ._teddy-link--text_azi31_16:visited:not(._teddy-link--disable-visited_azi31_26), ._teddy-link--standalone_azi31_16:visited:not(._teddy-link--disable-visited_azi31_26), ._teddy-link--navigation_azi31_16:visited:not(._teddy-link--disable-visited_azi31_26) {
-    color: var(--teddy-color-text-interactive-primary-active);
-  }
-  ._teddy-link--text-negative_azi31_29, ._teddy-link--standalone-negative_azi31_29, ._teddy-link--navigation-negative_azi31_29 {
-    color: var(--teddy-color-text-interactive-primary-negative);
-  }
-  ._teddy-link--text-negative_azi31_29:hover, ._teddy-link--standalone-negative_azi31_29:hover, ._teddy-link--navigation-negative_azi31_29:hover {
-    background-color: var(--teddy-color-background-interactive-transparent-negative-hover);
-    color: var(--teddy-color-text-interactive-primary-negative);
-  }
-  ._teddy-link--text-negative_azi31_29:active, ._teddy-link--standalone-negative_azi31_29:active, ._teddy-link--navigation-negative_azi31_29:active {
-    background-color: var(--teddy-color-background-interactive-transparent-negative-active);
-    color: var(--teddy-color-text-interactive-primary-negative-active);
-  }
-  ._teddy-link--text-negative_azi31_29:visited:not(._teddy-link--disable-visited_azi31_26), ._teddy-link--standalone-negative_azi31_29:visited:not(._teddy-link--disable-visited_azi31_26), ._teddy-link--navigation-negative_azi31_29:visited:not(._teddy-link--disable-visited_azi31_26) {
-    color: var(--teddy-color-text-interactive-primary-negative-active);
-  }
-  ._teddy-link--standalone_azi31_16, ._teddy-link--standalone-negative_azi31_29 {
-    padding: var(--teddy-spacing-150) 0;
-  }
-  ._teddy-link--navigation_azi31_16, ._teddy-link--navigation-negative_azi31_29 {
-    align-items: center;
-    background-color: var(--teddy-color-functional-transparent);
-    display: flex;
-    font-weight: var(--teddy-typography-weight-medium);
-    text-decoration: none;
-  }
-  ._teddy-link--navigation_azi31_16:active, ._teddy-link--navigation_azi31_16:hover, ._teddy-link--navigation-negative_azi31_29:active, ._teddy-link--navigation-negative_azi31_29:hover {
-    background-color: var(--teddy-color-functional-transparent);
-    text-decoration: underline;
-  }
-  ._teddy-link--ensure-target-area_azi31_57 {
-    display: flex;
-    align-items: center;
-    min-height: var(--teddy-spacing-600);
-    min-width: var(--teddy-spacing-600);
-  }
-  ._teddy-link--silent_azi31_63 {
-    background-color: inherit;
-    color: inherit;
-    height: 100%;
-    text-decoration: none;
-  }
-  ._teddy-link--silent_azi31_63:hover, ._teddy-link--silent_azi31_63:focus, ._teddy-link--silent_azi31_63:active {
-    background-color: inherit;
-    color: inherit;
-  }
-  ._teddy-link--silent_azi31_63 a:focus {
-    outline: 0;
-  }
-  ._teddy-link--silent_azi31_63:is(._teddy-link--disable-visited_azi31_26):visited {
-    color: inherit;
-  }
 }@layer heading, button, card, notification;
 @layer notification {
   ._teddy-notification_1ref8_3 {
@@ -3344,6 +3325,8 @@
     opacity: 1;
     scale: 1;
   }
+}._teddy-container_1jmq1_1 {
+  box-sizing: border-box;
 }@keyframes _teddy-fade-in_3n21u_1 {
   from {
     opacity: 0;

package/dist/utils/generate-styling/index.cjs

@@ -77,6 +77,9 @@ function extractProps(props) {
     const currentLayout = stylings[key];
     const currentLayoutKey = currentLayout.key;
     const layoutProp = extractedProps[currentLayoutKey];
+    if (layoutProp === void 0) {
+      delete extractedProps[currentLayoutKey];
+    }
     if (layoutProp) {
       if (isResponsiveObject(layoutProp)) {
         Object.entries(layoutProp).forEach(([bp, value]) => {

package/dist/utils/generate-styling/index.js

@@ -75,6 +75,9 @@ function extractProps(props) {
     const currentLayout = stylings[key];
     const currentLayoutKey = currentLayout.key;
     const layoutProp = extractedProps[currentLayoutKey];
+    if (layoutProp === void 0) {
+      delete extractedProps[currentLayoutKey];
+    }
     if (layoutProp) {
       if (isResponsiveObject(layoutProp)) {
         Object.entries(layoutProp).forEach(([bp, value]) => {

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=8"
   },
   "private": false,
-  "version": "0.0.55",
+  "version": "0.0.57",
   "sideEffects": [
     "**/*.css"
   ],
@@ -29,21 +29,20 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.5.0",
+    "@chromatic-com/storybook": "^1.8.0",
     "@laynezh/vite-plugin-lib-assets": "^0.5.19",
-    "@storybook/addon-a11y": "^8.1.9",
-    "@storybook/addon-essentials": "^8.1.9",
-    "@storybook/addon-interactions": "^8.1.9",
-    "@storybook/addon-links": "^8.1.9",
-    "@storybook/addon-mdx-gfm": "^8.1.9",
-    "@storybook/addon-storysource": "^8.1.9",
-    "@storybook/blocks": "^8.1.9",
+    "@storybook/addon-a11y": "^8.2.9",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-storysource": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
     "@storybook/client-api": "^7.6.17",
-    "@storybook/manager-api": "^8.1.9",
-    "@storybook/react": "^8.1.9",
-    "@storybook/react-vite": "^8.1.9",
-    "@storybook/test": "^8.1.9",
-    "@storybook/theming": "^8.1.9",
+    "@storybook/manager-api": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
+    "@storybook/theming": "^8.2.9",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^20.11.16",
     "@types/react": "^18.2.53",
@@ -71,7 +70,7 @@
     "react-router-dom": "^6.23.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.70.0",
-    "storybook": "^8.1.9",
+    "storybook": "^8.2.9",
     "style-dictionary": "^3.9.2",
     "tsx": "^4.7.0",
     "typescript": "^5.3.3",