@telia/teddy 0.0.3 → 0.0.4

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

@@ -0,0 +1,59 @@
+import { HeadingProps, IconProps } from '..';
+import { default as React } from 'react';
+
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+/** -------------------------------------------------------------------------------------------------
+ * Root
+ * -----------------------------------------------------------------------------------------------*/
+type RootProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
+    variant?: 'default' | 'negative';
+};
+/** -------------------------------------------------------------------------------------------------
+ * Item
+ * -----------------------------------------------------------------------------------------------*/
+type ItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;
+/** -------------------------------------------------------------------------------------------------
+ * Header
+ * -----------------------------------------------------------------------------------------------*/
+type HeaderProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Header>;
+/** -------------------------------------------------------------------------------------------------
+ * Trigger
+ * -----------------------------------------------------------------------------------------------*/
+type TriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+    hideIndicator?: boolean;
+};
+/** -------------------------------------------------------------------------------------------------
+ * Indicator
+ * -----------------------------------------------------------------------------------------------*/
+type IndicatorProps = Partial<IconProps>;
+/** -------------------------------------------------------------------------------------------------
+ * Content
+ * -----------------------------------------------------------------------------------------------*/
+type ContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>;
+/** -------------------------------------------------------------------------------------------------
+ * Title
+ * -----------------------------------------------------------------------------------------------*/
+type TitleProps = Omit<HeadingProps['Root'], 'variant'> & {
+    variant?: HeadingProps['Root']['variant'];
+} & (HeadingProps['AsChildProps'] | HeadingProps['H1Props'] | HeadingProps['H2Props'] | HeadingProps['H3Props'] | HeadingProps['H4Props'] | HeadingProps['H5Props'] | HeadingProps['H6Props']);
+declare const Accordion: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>> & {
+    Trigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+        hideIndicator?: boolean | undefined;
+    } & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionHeaderProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Indicator: React.ForwardRefExoticComponent<Omit<Partial<IconProps>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+    Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLHeadingElement>>;
+};
+type AccordionProps = {
+    Root: RootProps;
+    Trigger: TriggerProps;
+    Content: ContentProps;
+    Header: HeaderProps;
+    Item: ItemProps;
+    Indicator: IndicatorProps;
+    Title: TitleProps;
+};
+export { Accordion };
+export type { AccordionProps };

package/dist/components/accordion/accordion.js

@@ -0,0 +1,24 @@
+import "react/jsx-runtime";
+import "../../clsx-DB4S2d7J.js";
+import "react";
+import { A as u } from "../../badge-CbHdlkcM.js";
+import "../grid/grid.js";
+import "../../navigation-menu-BgN7IKev.js";
+import "../link/link.js";
+import "../button/button.js";
+import "../field-error-text/field-error-text.js";
+import "../helper-text/helper-text.js";
+import "../../assets/5161b177f001ea1a.svg";
+import "../icon/icon.js";
+import "../input/input.js";
+import "../label/label.js";
+import "../spinner/spinner.js";
+import "../text/text.js";
+import "../text-field/text-field.js";
+import "../heading/heading.js";
+import "../visually-hidden/visually-hidden.js";
+import "../text-spacing/text-spacing.js";
+import "../../index-DpfSJps6.js";
+export {
+  u as Accordion
+};

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

@@ -0,0 +1,2 @@
+export { Accordion } from './accordion';
+export type { AccordionProps } from './accordion';

package/dist/components/accordion/index.js

@@ -0,0 +1,4 @@
+import { A as c } from "../../badge-CbHdlkcM.js";
+export {
+  c as Accordion
+};

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+
+/** -------------------------------------------------------------------------------------------------
+ * Badge
+ * -----------------------------------------------------------------------------------------------*/
+type Variant = 'attention' | 'special' | 'neutral' | 'information' | 'success' | 'warning' | 'error';
+type BadgeProps = React.ComponentPropsWithoutRef<'span'> & {
+    asChild?: boolean;
+    variant: Variant;
+    hideIcon?: boolean;
+};
+/**
+ * Badges are visual indictor labels, which holds small amount of information about a product or service, using contextual colors.
+ */
+declare const Badge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    asChild?: boolean | undefined;
+    variant: Variant;
+    hideIcon?: boolean | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+export { Badge };
+export type { BadgeProps };

package/dist/components/badge/badge.js

@@ -0,0 +1,24 @@
+import "react/jsx-runtime";
+import "../../clsx-DB4S2d7J.js";
+import "react";
+import { B as u } from "../../badge-CbHdlkcM.js";
+import "../../index-DpfSJps6.js";
+import "../grid/grid.js";
+import "../../navigation-menu-BgN7IKev.js";
+import "../link/link.js";
+import "../button/button.js";
+import "../field-error-text/field-error-text.js";
+import "../helper-text/helper-text.js";
+import "../../assets/5161b177f001ea1a.svg";
+import "../icon/icon.js";
+import "../input/input.js";
+import "../label/label.js";
+import "../spinner/spinner.js";
+import "../text/text.js";
+import "../text-field/text-field.js";
+import "../heading/heading.js";
+import "../visually-hidden/visually-hidden.js";
+import "../text-spacing/text-spacing.js";
+export {
+  u as Badge
+};

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

@@ -0,0 +1,2 @@
+export { Badge } from './badge';
+export type { BadgeProps } from './badge';

package/dist/components/badge/index.js

@@ -0,0 +1,4 @@
+import { B as o } from "../../badge-CbHdlkcM.js";
+export {
+  o as Badge
+};

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

@@ -1,24 +1,23 @@
-import { ActionProps } from '../../utils/action';
 import * as React from 'react';
-declare const BUTTON_VARIANT: {
-    readonly DESTRUCTIVE: "destructive";
-    readonly DESTRUCTIVE_NEGATIVE: "destructive-negative";
-    readonly TERTIARY_PURPLE: "tertiary-purple";
-    readonly TERTIARY_PURPLE_NEGATVIE: "tertiary-purple-negative";
-    readonly TEXT: "text";
-    readonly TEXT_NEGATIVE: "text-negative";
-    readonly PRIMARY: "primary";
-    readonly PRIMARY_NEGATIVE: "primary-negative";
-    readonly SECONDARY: "secondary";
-    readonly SECONDARY_NEGATIVE: "secondary-negative";
-    readonly EXPRESSIVE: "expressive";
-    readonly EXPRESSIVE_NEGATIVE: "expressive-negative";
-};
-type ButtonVariant = (typeof BUTTON_VARIANT)[keyof typeof BUTTON_VARIANT];
-type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+declare const variants: readonly ["primary", "secondary", "destructive", "tertiary-purple", "text", "expressive", "primary-negative", "secondary-negative", "destructive-negative", "tertiary-purple-negative", "text-negative", "expressive-negative"];
+export type Variant = (typeof variants)[number];
+declare const sizes: readonly ["sm", "md", "lg"];
+export type Size = (typeof sizes)[number];
+type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label'> & {
     asChild?: boolean;
     loading?: boolean;
-} & ActionProps<ButtonVariant>;
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    fullWidth?: boolean;
+    size?: Size;
+    variant: Variant;
+} & ({
+    iconOnly: true;
+    ['aria-label']: string;
+} | {
+    iconOnly?: false;
+    ['aria-label']?: string;
+});
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>> & {
+    variants: readonly ["primary", "secondary", "destructive", "tertiary-purple", "text", "expressive", "primary-negative", "secondary-negative", "destructive-negative", "tertiary-purple-negative", "text-negative", "expressive-negative"];
+};
 export { Button };
-export type { ButtonProps, ButtonVariant };
+export type { ButtonProps };

package/dist/components/button/button.js

@@ -1,95 +1,106 @@
-import "../../assets/button.css";
+import '../../assets/button.css';
 import { jsxs as x, jsx as r } from "react/jsx-runtime";
-import { VARIANT as $ } from "../../utils/action.js";
-import { $ as E, a as T } from "../../index-TI1xsy6a.js";
+import { a as $, $ as A } from "../../index-DpfSJps6.js";
 import { c as I } from "../../clsx-DB4S2d7J.js";
-import * as A from "react";
-import { Spinner as R } from "../spinner/spinner.js";
-const N = "_fadeInAnimation_arfv5_1", h = "_scaleInAnimation_arfv5_1", t = {
-  "teddy-button": "_teddy-button_arfv5_17",
-  "teddy-button--sm": "_teddy-button--sm_arfv5_52",
-  "teddy-button--icon-only": "_teddy-button--icon-only_arfv5_55",
-  "teddy-button--md": "_teddy-button--md_arfv5_58",
-  "teddy-button--lg": "_teddy-button--lg_arfv5_64",
-  "teddy-button--full-width": "_teddy-button--full-width_arfv5_70",
-  "teddy-button--primary": "_teddy-button--primary_arfv5_73",
-  "teddy-button--disabled": "_teddy-button--disabled_arfv5_77",
-  "teddy-button--primary-negative": "_teddy-button--primary-negative_arfv5_83",
-  "teddy-button--secondary": "_teddy-button--secondary_arfv5_95",
-  "teddy-button--secondary-negative": "_teddy-button--secondary-negative_arfv5_106",
-  "teddy-button--expressive": "_teddy-button--expressive_arfv5_117",
-  "teddy-button--expressive-negative": "_teddy-button--expressive-negative_arfv5_127",
-  "teddy-button--negative": "_teddy-button--negative_arfv5_139",
-  "teddy-button--destructive": "_teddy-button--destructive_arfv5_146",
-  "teddy-button--destructive-negative": "_teddy-button--destructive-negative_arfv5_156",
-  "teddy-button--tertiary-purple": "_teddy-button--tertiary-purple_arfv5_166",
-  "teddy-button--tertiary-purple-negative": "_teddy-button--tertiary-purple-negative_arfv5_179",
-  "teddy-button--text-negative": "_teddy-button--text-negative_arfv5_194",
-  "teddy-button--text": "_teddy-button--text_arfv5_194",
-  "teddy-button__loading": "_teddy-button__loading_arfv5_241",
-  fadeInAnimation: N,
-  "teddy-button__spinner": "_teddy-button__spinner_arfv5_252",
-  scaleInAnimation: h
-};
-({
-  ...$
-});
-const e = "teddy-button", V = A.forwardRef(
+import * as w from "react";
+import { Spinner as N } from "../spinner/spinner.js";
+const j = "_fadeInAnimation_1biph_1", C = "_scaleInAnimation_1biph_1", t = {
+  "teddy-button": "_teddy-button_1biph_18",
+  "teddy-button--sm": "_teddy-button--sm_1biph_53",
+  "teddy-button--icon-only": "_teddy-button--icon-only_1biph_56",
+  "teddy-button--md": "_teddy-button--md_1biph_59",
+  "teddy-button--lg": "_teddy-button--lg_1biph_65",
+  "teddy-button--full-width": "_teddy-button--full-width_1biph_71",
+  "teddy-button--primary": "_teddy-button--primary_1biph_74",
+  "teddy-button--disabled": "_teddy-button--disabled_1biph_78",
+  "teddy-button--primary-negative": "_teddy-button--primary-negative_1biph_84",
+  "teddy-button--secondary": "_teddy-button--secondary_1biph_96",
+  "teddy-button--secondary-negative": "_teddy-button--secondary-negative_1biph_107",
+  "teddy-button--expressive": "_teddy-button--expressive_1biph_118",
+  "teddy-button--expressive-negative": "_teddy-button--expressive-negative_1biph_128",
+  "teddy-button--negative": "_teddy-button--negative_1biph_140",
+  "teddy-button--destructive": "_teddy-button--destructive_1biph_147",
+  "teddy-button--destructive-negative": "_teddy-button--destructive-negative_1biph_157",
+  "teddy-button--tertiary-purple": "_teddy-button--tertiary-purple_1biph_167",
+  "teddy-button--tertiary-purple-negative": "_teddy-button--tertiary-purple-negative_1biph_180",
+  "teddy-button--text-negative": "_teddy-button--text-negative_1biph_195",
+  "teddy-button--text": "_teddy-button--text_1biph_195",
+  "teddy-button__loading": "_teddy-button__loading_1biph_242",
+  fadeInAnimation: j,
+  "teddy-button__spinner": "_teddy-button__spinner_1biph_253",
+  scaleInAnimation: C
+}, e = "teddy-button", R = [
+  "primary",
+  "secondary",
+  "destructive",
+  "tertiary-purple",
+  "text",
+  "expressive",
+  "primary-negative",
+  "secondary-negative",
+  "destructive-negative",
+  "tertiary-purple-negative",
+  "text-negative",
+  "expressive-negative"
+], s = w.forwardRef(
   ({
-    className: u,
-    variant: n,
+    className: y,
+    variant: d,
     size: o = "md",
-    iconOnly: y,
-    fullWidth: v,
-    disabled: a = !1,
-    loading: d = !1,
-    asChild: b = !1,
-    onClick: _,
-    children: f,
-    ...i
-  }, c) => {
-    const l = b ? T : "button", p = I(
-      [t[e], t[`${e}--${n}`], t[`${e}--${o}`]],
+    iconOnly: u,
+    fullWidth: p,
+    disabled: i = !1,
+    loading: n = !1,
+    asChild: c = !1,
+    onClick: a,
+    children: l,
+    ..._
+  }, v) => {
+    const m = c ? A : "button", h = I(
+      [t[e], t[`${e}--${d}`], t[`${e}--${o}`]],
       {
-        [t[`${e}--icon-only`]]: y,
-        [t[`${e}--negative`]]: n.endsWith("negative"),
-        [t[`${e}--full-width`]]: v,
-        [t[`${e}--disabled`]]: a || d
+        [t[`${e}--icon-only`]]: u,
+        [t[`${e}--negative`]]: d.endsWith("negative"),
+        [t[`${e}--full-width`]]: p,
+        [t[`${e}--disabled`]]: i || n
       },
-      u
+      y
     );
-    function m(s) {
-      if (a || d) {
-        s.preventDefault();
+    function g(b) {
+      if (i || n) {
+        b.preventDefault();
         return;
       }
-      _ && _(s);
+      a && a(b);
     }
-    const g = () => n.endsWith("negative") ? "negative-disabled" : "disabled";
+    const f = () => d.endsWith("negative") ? "negative-disabled" : "disabled";
     return /* @__PURE__ */ x(
-      l,
+      m,
       {
-        className: p,
-        "aria-disabled": i["aria-disabled"] || a || d,
-        onClick: m,
-        ref: c,
-        ...i,
+        className: h,
+        "aria-disabled": _["aria-disabled"] || i || n,
+        onClick: g,
+        ref: v,
+        ..._,
         children: [
-          d && /* @__PURE__ */ r("span", { className: t[`${e}__loading`], children: /* @__PURE__ */ r(
-            R,
+          /* @__PURE__ */ r($, { children: l }),
+          n && /* @__PURE__ */ r(
+            N,
             {
               size: o === "lg" ? "xs" : "xxs",
-              variant: g(),
+              variant: f(),
               className: t[`${e}__spinner`]
             }
-          ) }),
-          /* @__PURE__ */ r(E, { children: f })
+          )
         ]
       }
     );
   }
 );
-V.displayName = "Button";
+s.displayName = "Button";
+const D = Object.assign(s, {
+  variants: R
+});
 export {
-  V as Button
+  D as Button
 };

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

@@ -1,2 +1,2 @@
 export { Button } from './button';
-export type { ButtonProps, ButtonVariant } from './button';
+export type { ButtonProps } from './button';

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

@@ -0,0 +1,68 @@
+import { Button as PrimitiveButton, Heading as PrimitiveHeading, Link as PrimitiveLink } from '..';
+import { default as React } from 'react';
+
+declare const variantOptions: readonly ["purple-light", "purple-dark", "gray", "white", "beige"];
+type Variant = (typeof variantOptions)[number];
+/** -------------------------------------------------------------------------------------------------
+ * Root
+ * -----------------------------------------------------------------------------------------------*/
+type RootProps = React.ComponentPropsWithoutRef<'div'> & {
+    asChild?: boolean;
+    variant?: Variant;
+    bordered?: boolean;
+    backgroundImageSrc?: string;
+};
+/** -------------------------------------------------------------------------------------------------
+ * Heading
+ * -----------------------------------------------------------------------------------------------*/
+type HeadingProps = Partial<React.ComponentPropsWithoutRef<typeof PrimitiveHeading>>;
+/** -------------------------------------------------------------------------------------------------
+ * Content
+ * -----------------------------------------------------------------------------------------------*/
+type ContentProps = React.ComponentPropsWithoutRef<'div'>;
+/** -------------------------------------------------------------------------------------------------
+ * Image
+ * -----------------------------------------------------------------------------------------------*/
+declare const insetOptions: readonly ["top", "bottom", "left", "right", "all", "top-right-left", "bottom-left-right", "top-left", "top-right", "bottom-left", "bottom-right", "top-bottom", "left-right"];
+type ImageProps = React.ComponentPropsWithoutRef<'img'> & {
+    /** The inset allows make the image bleed out to the edges */
+    inset?: (typeof insetOptions)[number];
+};
+type ButtonProps = Omit<React.ComponentPropsWithoutRef<typeof PrimitiveButton>, 'variant'>;
+/** -------------------------------------------------------------------------------------------------
+ * Link
+ * -----------------------------------------------------------------------------------------------*/
+type LinkProps = React.ComponentPropsWithoutRef<typeof PrimitiveLink>;
+declare const Card: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    asChild?: boolean | undefined;
+    variant?: "purple-light" | "purple-dark" | "gray" | "white" | "beige" | undefined;
+    bordered?: boolean | undefined;
+    backgroundImageSrc?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>> & {
+    Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Image: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+        /** The inset allows make the image bleed out to the edges */
+        inset?: "top" | "bottom" | "left" | "right" | "all" | "top-right-left" | "bottom-left-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-bottom" | "left-right" | undefined;
+    } & React.RefAttributes<HTMLImageElement>>;
+    Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    Link: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+        asChild?: boolean | undefined;
+        disableVisited?: boolean | undefined;
+        ensureTargetArea?: boolean | undefined;
+        silent?: boolean | undefined;
+        variant: "text" | "text-negative" | "navigation" | "standalone" | "standalone-negative" | "navigation-negative";
+    } & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+    variantOptions: readonly ["purple-light", "purple-dark", "gray", "white", "beige"];
+    insetOptions: readonly ["top", "bottom", "left", "right", "all", "top-right-left", "bottom-left-right", "top-left", "top-right", "bottom-left", "bottom-right", "top-bottom", "left-right"];
+};
+type CardProps = {
+    Root: RootProps;
+    Heading: HeadingProps;
+    Content: ContentProps;
+    Button: ButtonProps;
+    Image: ImageProps;
+    Link: LinkProps;
+};
+export { Card };
+export type { CardProps };

package/dist/components/card/card.js

@@ -0,0 +1,24 @@
+import "react/jsx-runtime";
+import "react";
+import "../../clsx-DB4S2d7J.js";
+import { C as u } from "../../badge-CbHdlkcM.js";
+import "../grid/grid.js";
+import "../../navigation-menu-BgN7IKev.js";
+import "../link/link.js";
+import "../button/button.js";
+import "../field-error-text/field-error-text.js";
+import "../helper-text/helper-text.js";
+import "../../assets/5161b177f001ea1a.svg";
+import "../input/input.js";
+import "../label/label.js";
+import "../spinner/spinner.js";
+import "../text/text.js";
+import "../text-field/text-field.js";
+import "../heading/heading.js";
+import "../visually-hidden/visually-hidden.js";
+import "../text-spacing/text-spacing.js";
+import "../../utils/composeRefs.js";
+import "../../utils/composeEventHandlers.js";
+export {
+  u as Card
+};

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

@@ -0,0 +1,2 @@
+export { Card } from './card';
+export type { CardProps } from './card';

package/dist/components/card/index.js

@@ -0,0 +1,4 @@
+import { C as o } from "../../badge-CbHdlkcM.js";
+export {
+  o as Card
+};

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

@@ -1,8 +1,9 @@
-import React from 'react';
-import { IconProps } from '../icon';
 import { TextProps } from '../text';
+import { IconProps } from '../icon';
+import { default as React } from 'react';
+
 export type FieldErrorTextIndicatorProps = Partial<IconProps>;
 export type FieldErrorTextProps = TextProps;
-export declare const FieldErrorText: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLParagraphElement>> & {
+export declare const FieldErrorText: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLSpanElement>> & {
     Indicator: React.ForwardRefExoticComponent<Omit<Partial<IconProps>, "ref"> & React.RefAttributes<SVGSVGElement>>;
 };

package/dist/components/field-error-text/field-error-text.js

@@ -1,28 +1,28 @@
-import "../../assets/field-error-text.css";
-import { jsx as i } from "react/jsx-runtime";
-import { c as s } from "../../clsx-DB4S2d7J.js";
+import '../../assets/field-error-text.css';
+import { jsx as s } from "react/jsx-runtime";
+import { c as i } from "../../clsx-DB4S2d7J.js";
 import a from "react";
-import "../../assets/f2a2f391a886d395.svg";
-import { Icon as m } from "../icon/icon.js";
-import { Text as n } from "../text/text.js";
+import "../../assets/5161b177f001ea1a.svg";
+import { Icon as n } from "../icon/icon.js";
+import { Text as m } from "../text/text.js";
 const c = {
   "teddy-field-error-text": "_teddy-field-error-text_1735t_1",
   "teddy-field-error-text__indicator": "_teddy-field-error-text__indicator_1735t_12"
 }, l = "teddy-field-error-text", _ = a.forwardRef(
   ({ className: r, name: t = "error-filled", ...e }, o) => {
-    const d = s([c[`${l}__indicator`]], r);
-    return /* @__PURE__ */ i(m, { ...e, name: t, ref: o, className: d });
+    const d = i([c[`${l}__indicator`]], r);
+    return /* @__PURE__ */ s(n, { ...e, name: t, ref: o, className: d });
   }
 ), f = a.forwardRef(
   ({ className: r, children: t, ...e }, o) => {
-    const d = s([c[l]], r);
-    return /* @__PURE__ */ i(n, { ...e, ref: o, className: d, children: t });
+    const d = i([c[l]], r);
+    return /* @__PURE__ */ s(m, { ...e, ref: o, className: d, children: t });
   }
 );
 f.displayName = "FieldErrorText";
-const R = Object.assign(f, {
+const N = Object.assign(f, {
   Indicator: _
 });
 export {
-  R as FieldErrorText
+  N as FieldErrorText
 };

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

@@ -0,0 +1,77 @@
+import { Responsive } from '../../utils/layout';
+import { default as React } from 'react';
+
+/** -------------------------------------------------------------------------------------------------
+ * Grid
+ * -----------------------------------------------------------------------------------------------*/
+type AsChildProps = {
+    asChild: true;
+    as?: never;
+} & React.ComponentPropsWithoutRef<'span'>;
+type SpanProps = {
+    as?: 'span';
+    asChild?: false;
+} & React.ComponentPropsWithoutRef<'span'>;
+type DivProps = {
+    as: 'div';
+    asChild?: false;
+} & React.ComponentPropsWithoutRef<'div'>;
+declare const displayValues: readonly ["none", "inline-grid", "grid"];
+declare const columnsValues: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "none"];
+declare const rowsValues: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "none"];
+declare const flowValues: readonly ["row", "column", "dense", "row-dense", "column-dense"];
+declare const alignValues: readonly ["start", "center", "end", "baseline", "stretch"];
+declare const justifyValues: readonly ["start", "center", "end", "between"];
+declare const gapValues: ("0" | "10" | "25" | "50" | "100" | "150" | "200" | "250" | "300" | "400" | "600" | "800" | "1000" | "1200" | "1600")[];
+type GridProps = (React.ComponentPropsWithoutRef<'div'> & {
+    display?: (typeof displayValues)[number];
+    /**
+     * The number of columns in the grid. It can be a number, 'none' or a responsive value.
+     * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
+     * @example columns={{ sm: '3', md: '5' }}
+     */
+    columns?: Responsive<(typeof columnsValues)[number]>;
+    /**
+     * The number of rows in the grid. It can be a number, 'none' or a responsive value.
+     * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
+     * @example rows={{ sm: '3', md: '5' }}
+     */
+    rows?: Responsive<(typeof rowsValues)[number]>;
+    /**
+     * The flow direction of the grid. It can be 'row', 'column', 'dense', 'row-dense' or 'column-dense'.
+     * @example flow='row'
+     */
+    flow?: Responsive<(typeof flowValues)[number]>;
+    /**
+     * The alignment of the grid items. It can be 'start', 'center', 'end', 'baseline', 'stretch' or a responsive value.
+     * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
+     * @example align={{ sm: 'start', md: 'center' }}
+     * @default 'stretch'
+     */
+    align?: Responsive<(typeof alignValues)[number]>;
+    /**
+     * The alignment of the grid items. It can be  or a responsive value.
+     * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
+     * @example align={{ sm: 'start', md: 'center' }}
+     * @default 'start'
+     */
+    justify?: Responsive<(typeof justifyValues)[number]>;
+    /**
+     * The gap between grid items. It can be a number, 'none' or a responsive value.
+     * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
+     * @example gap={{ sm: '100', md: '200' }}
+     * @default '100'
+     */
+    gap?: Responsive<(typeof gapValues)[number]>;
+}) & (AsChildProps | SpanProps | DivProps);
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>> & {
+    displayValues: readonly ["none", "inline-grid", "grid"];
+    columnsValues: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "none"];
+    rowsValues: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "none"];
+    flowValues: readonly ["row", "column", "dense", "row-dense", "column-dense"];
+    alignValues: readonly ["start", "center", "end", "baseline", "stretch"];
+    justifyValues: readonly ["start", "center", "end", "between"];
+    gapValues: ("0" | "10" | "25" | "50" | "100" | "150" | "200" | "250" | "300" | "400" | "600" | "800" | "1000" | "1200" | "1600")[];
+};
+export { Grid };
+export type { GridProps };