@telia/teddy 0.0.9 → 0.0.11

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

@@ -36,7 +36,7 @@ type ContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Con
  * -----------------------------------------------------------------------------------------------*/
 type TitleProps = Omit<HeadingProps['Root'], 'variant'> & {
     variant?: HeadingProps['Root']['variant'];
-} & (HeadingProps['AsChildProps'] | HeadingProps['H1Props'] | HeadingProps['H2Props'] | HeadingProps['H3Props'] | HeadingProps['H4Props'] | HeadingProps['H5Props'] | HeadingProps['H6Props']);
+} & (HeadingProps['AsChildProps'] | HeadingProps['AsProps']);
 declare const Accordion: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>> & {
     Trigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
         hideIndicator?: boolean | undefined;

package/dist/components/accordion/accordion.js

@@ -1,12 +1,12 @@
 import "react/jsx-runtime";
 import "../../clsx-DB4S2d7J.js";
 import "react";
-import { A as y } from "../../badge-9vHb0-Jo.js";
-import "../../radio-group-BR5SMJXJ.js";
+import { A as y } from "../../badge-DscsRVHR.js";
+import "../../radio-group-B--zT3OL.js";
 import "../box/box.js";
 import "../flex/flex.js";
 import "../grid/grid.js";
-import "../navigation-menu/navigation-menu.js";
+import "../../navigation-menu-DKuyW8zE.js";
 import "../link/link.js";
 import "../button/button.js";
 import "../field-error-text/field-error-text.js";

package/dist/components/accordion/index.js

@@ -1,4 +1,4 @@
-import { A as c } from "../../badge-9vHb0-Jo.js";
+import { A as c } from "../../badge-DscsRVHR.js";
 export {
   c as Accordion
 };

package/dist/components/badge/badge.js

@@ -1,13 +1,13 @@
 import "react/jsx-runtime";
 import "../../clsx-DB4S2d7J.js";
 import "react";
-import { B as y } from "../../badge-9vHb0-Jo.js";
+import { B as y } from "../../badge-DscsRVHR.js";
 import "../../index-DpfSJps6.js";
-import "../../radio-group-BR5SMJXJ.js";
+import "../../radio-group-B--zT3OL.js";
 import "../box/box.js";
 import "../flex/flex.js";
 import "../grid/grid.js";
-import "../navigation-menu/navigation-menu.js";
+import "../../navigation-menu-DKuyW8zE.js";
 import "../link/link.js";
 import "../button/button.js";
 import "../field-error-text/field-error-text.js";

package/dist/components/badge/index.js

@@ -1,4 +1,4 @@
-import { B as o } from "../../badge-9vHb0-Jo.js";
+import { B as o } from "../../badge-DscsRVHR.js";
 export {
   o as Badge
 };

package/dist/components/box/box.js

@@ -1,11 +1,11 @@
-import { jsx as a } from "react/jsx-runtime";
-import m from "react";
-import { c as p } from "../../clsx-DB4S2d7J.js";
-import { extractPropsResponsiveLayout as f } from "../../utils/layout.js";
-import { $ as i } from "../../index-DpfSJps6.js";
-const l = {}, d = "teddy-box", n = m.forwardRef((o, s) => {
-  const { className: t, asChild: e, ...r } = f(o), c = p([l[`${d}`]], t);
-  return /* @__PURE__ */ a(e ? i : "div", { ...r, ref: s, className: c });
+import { jsx as m } from "react/jsx-runtime";
+import p from "react";
+import { c as f } from "../../clsx-DB4S2d7J.js";
+import { extractProps as l } from "../../utils/layout/index.js";
+import { $ as d } from "../../index-DpfSJps6.js";
+const i = {}, x = "teddy-box", n = p.forwardRef((o, s) => {
+  const { className: t, asChild: r, style: e, ...c } = l(o), a = f([i[`${x}`]], t);
+  return /* @__PURE__ */ m(r ? d : "div", { ...c, style: e, ref: s, className: a });
 });
 n.displayName = "Box";
 export {

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

@@ -1,9 +1,10 @@
+import { ChildrenLayoutProps } from '../../utils/layout';
 import * as React from 'react';
 declare const variants: readonly ["primary", "secondary", "destructive", "tertiary-purple", "text", "expressive", "primary-negative", "secondary-negative", "destructive-negative", "tertiary-purple-negative", "text-negative", "expressive-negative"];
 export type Variant = (typeof variants)[number];
 declare const sizes: readonly ["sm", "md", "lg"];
 export type Size = (typeof sizes)[number];
-type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label'> & {
+type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label'> & ChildrenLayoutProps & {
     asChild?: boolean;
     loading?: boolean;
     fullWidth?: boolean;

package/dist/components/button/button.js

@@ -1,10 +1,11 @@
 import '../../assets/button.css';
-import { jsxs as x, jsx as r } from "react/jsx-runtime";
-import { a as $, $ as A } from "../../index-DpfSJps6.js";
+import { jsxs as $, jsx as _ } from "react/jsx-runtime";
+import { a as A, $ as C } from "../../index-DpfSJps6.js";
 import { c as I } from "../../clsx-DB4S2d7J.js";
-import * as w from "react";
-import { Spinner as N } from "../spinner/spinner.js";
-const j = "_fadeInAnimation_1biph_1", C = "_scaleInAnimation_1biph_1", t = {
+import * as N from "react";
+import { Spinner as w } from "../spinner/spinner.js";
+import { extractProps as j } from "../../utils/layout/index.js";
+const k = "_fadeInAnimation_1biph_1", R = "_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",
@@ -26,10 +27,10 @@ const j = "_fadeInAnimation_1biph_1", C = "_scaleInAnimation_1biph_1", t = {
   "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,
+  fadeInAnimation: k,
   "teddy-button__spinner": "_teddy-button__spinner_1biph_253",
-  scaleInAnimation: C
-}, e = "teddy-button", R = [
+  scaleInAnimation: R
+}, e = "teddy-button", W = [
   "primary",
   "secondary",
   "destructive",
@@ -42,65 +43,63 @@ const j = "_fadeInAnimation_1biph_1", C = "_scaleInAnimation_1biph_1", t = {
   "tertiary-purple-negative",
   "text-negative",
   "expressive-negative"
-], s = w.forwardRef(
-  ({
-    className: y,
+], b = N.forwardRef((y, p) => {
+  const {
+    className: u,
     variant: d,
     size: o = "md",
-    iconOnly: u,
-    fullWidth: p,
+    iconOnly: c,
+    fullWidth: l,
     disabled: i = !1,
     loading: n = !1,
-    asChild: c = !1,
+    asChild: v = !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`]]: u,
-        [t[`${e}--negative`]]: d.endsWith("negative"),
-        [t[`${e}--full-width`]]: p,
-        [t[`${e}--disabled`]]: i || n
-      },
-      y
-    );
-    function g(b) {
-      if (i || n) {
-        b.preventDefault();
-        return;
-      }
-      a && a(b);
+    children: m,
+    ...s
+  } = j(y), h = v ? C : "button", g = I(
+    [t[e], t[`${e}--${d}`], t[`${e}--${o}`]],
+    {
+      [t[`${e}--icon-only`]]: c,
+      [t[`${e}--negative`]]: d.endsWith("negative"),
+      [t[`${e}--full-width`]]: l,
+      [t[`${e}--disabled`]]: i || n
+    },
+    u
+  );
+  function f(r) {
+    if (i || n) {
+      r.preventDefault();
+      return;
     }
-    const f = () => d.endsWith("negative") ? "negative-disabled" : "disabled";
-    return /* @__PURE__ */ x(
-      m,
-      {
-        className: h,
-        "aria-disabled": _["aria-disabled"] || i || n,
-        onClick: g,
-        ref: v,
-        ..._,
-        children: [
-          /* @__PURE__ */ r($, { children: l }),
-          n && /* @__PURE__ */ r(
-            N,
-            {
-              size: o === "lg" ? "xs" : "xxs",
-              variant: f(),
-              className: t[`${e}__spinner`]
-            }
-          )
-        ]
-      }
-    );
+    a && a(r);
   }
-);
-s.displayName = "Button";
-const D = Object.assign(s, {
-  variants: R
+  const x = () => d.endsWith("negative") ? "negative-disabled" : "disabled";
+  return /* @__PURE__ */ $(
+    h,
+    {
+      className: g,
+      "aria-disabled": s["aria-disabled"] || i || n,
+      onClick: f,
+      ref: p,
+      ...s,
+      children: [
+        /* @__PURE__ */ _(A, { children: m }),
+        n && /* @__PURE__ */ _(
+          w,
+          {
+            size: o === "lg" ? "xs" : "xxs",
+            variant: x(),
+            className: t[`${e}__spinner`]
+          }
+        )
+      ]
+    }
+  );
+});
+b.displayName = "Button";
+const P = Object.assign(b, {
+  variants: W
 });
 export {
-  D as Button
+  P as Button
 };

package/dist/components/card/card.js

@@ -1,12 +1,12 @@
 import "react/jsx-runtime";
 import "react";
 import "../../clsx-DB4S2d7J.js";
-import { C as y } from "../../badge-9vHb0-Jo.js";
-import "../../radio-group-BR5SMJXJ.js";
+import { C as y } from "../../badge-DscsRVHR.js";
+import "../../radio-group-B--zT3OL.js";
 import "../box/box.js";
 import "../flex/flex.js";
 import "../grid/grid.js";
-import "../navigation-menu/navigation-menu.js";
+import "../../navigation-menu-DKuyW8zE.js";
 import "../link/link.js";
 import "../button/button.js";
 import "../field-error-text/field-error-text.js";

package/dist/components/card/index.js

@@ -1,4 +1,4 @@
-import { C as o } from "../../badge-9vHb0-Jo.js";
+import { C as o } from "../../badge-DscsRVHR.js";
 export {
   o as Card
 };

package/dist/components/flex/flex.js

@@ -3,7 +3,7 @@ import { jsx as a } from "react/jsx-runtime";
 import m from "react";
 import { c as l } from "../../clsx-DB4S2d7J.js";
 import { $ as f } from "../../index-DpfSJps6.js";
-import { extractPropsResponsiveLayout as d } from "../../utils/layout.js";
+import { extractProps as d } from "../../utils/layout/index.js";
 const p = {
   "teddy-flex": "_teddy-flex_19teo_2"
 }, x = "teddy-flex", i = m.forwardRef((e, o) => {

package/dist/components/grid/grid.js

@@ -3,14 +3,14 @@ import { jsx as m } from "react/jsx-runtime";
 import i from "react";
 import { c as p } from "../../clsx-DB4S2d7J.js";
 import { $ as f } from "../../index-DpfSJps6.js";
-import { extractPropsResponsiveLayout as l } from "../../utils/layout.js";
+import { extractProps as l } from "../../utils/layout/index.js";
 const n = {
   "teddy-grid": "_teddy-grid_1dv1t_2"
-}, y = "teddy-grid", x = i.forwardRef((s, o) => {
-  const { className: r, as: t = "div", asChild: e, ...a } = l(s), c = e ? f : t, d = p([n[`${y}`]], r);
-  return /* @__PURE__ */ m(c, { ...a, ref: o, className: d });
+}, x = "teddy-grid", y = i.forwardRef((r, s) => {
+  const { className: o, as: t = "div", asChild: e, ...a } = l(r), c = e ? f : t, d = p([n[`${x}`]], o);
+  return /* @__PURE__ */ m(c, { ...a, ref: s, className: d });
 });
-x.displayName = "Grid";
+y.displayName = "Grid";
 export {
-  x as Grid
+  y as Grid
 };

package/dist/components/heading/heading.d.ts

@@ -1,41 +1,19 @@
+import { ChildrenLayoutProps } from '../../utils/layout';
 import { default as React } from 'react';
 
 /** -------------------------------------------------------------------------------------------------
  * Heading
  * -----------------------------------------------------------------------------------------------*/
 declare const headingVariants: readonly ["title-100", "title-200", "title-300", "title-400", "title-500", "title-600", "title-700", "subsection-100", "display-25", "display-50", "display-100", "display-200"];
-type AsChildProps = {
-    /**
-     * If `true`, the children element will be cloned and used instead of the heading element.
-     */
+type HeadingVariant = (typeof headingVariants)[number];
+type HeadingAsChildProps = {
     asChild: true;
     as?: never;
 } & React.ComponentPropsWithoutRef<'h1'>;
-type H1Props = {
-    as: 'h1';
+type HeadingAsProps = {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     asChild?: false;
 } & React.ComponentPropsWithoutRef<'h1'>;
-type H2Props = {
-    as: 'h2';
-    asChild?: false;
-} & React.ComponentPropsWithoutRef<'h2'>;
-type H3Props = {
-    as: 'h3';
-    asChild?: false;
-} & React.ComponentPropsWithoutRef<'h3'>;
-type H4Props = {
-    as: 'h4';
-    asChild?: false;
-} & React.ComponentPropsWithoutRef<'h4'>;
-type H5Props = {
-    as: 'h5';
-    asChild?: false;
-} & React.ComponentPropsWithoutRef<'h5'>;
-type H6Props = {
-    as: 'h6';
-    asChild?: false;
-} & React.ComponentPropsWithoutRef<'h6'>;
-type HeadingVariant = (typeof headingVariants)[number];
 type RootProps = {
     /**
      * EnableHyphenation
@@ -43,21 +21,16 @@ type RootProps = {
      * https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
      */
     enableHyphenation?: boolean;
-    variant: HeadingVariant;
-} & (AsChildProps | H1Props | H2Props | H3Props | H4Props | H5Props | H6Props);
+    variant?: HeadingVariant;
+} & ChildrenLayoutProps & (HeadingAsChildProps | HeadingAsProps);
 declare const Heading: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLHeadingElement>> & {
     headingVariants: readonly ["title-100", "title-200", "title-300", "title-400", "title-500", "title-600", "title-700", "subsection-100", "display-25", "display-50", "display-100", "display-200"];
 };
 type HeadingProps = {
     Root: RootProps;
     headingVariants: typeof headingVariants;
-    AsChildProps: AsChildProps;
-    H1Props: H1Props;
-    H2Props: H2Props;
-    H3Props: H3Props;
-    H4Props: H4Props;
-    H5Props: H5Props;
-    H6Props: H6Props;
+    AsChildProps: HeadingAsChildProps;
+    AsProps: HeadingAsProps;
 };
 export { Heading };
 export type { HeadingProps };

package/dist/components/heading/heading.js

@@ -1,24 +1,25 @@
 import '../../assets/heading.css';
-import { jsx as n } from "react/jsx-runtime";
-import { $ as q } from "../../index-DpfSJps6.js";
-import { c as o } from "../../clsx-DB4S2d7J.js";
-import p from "react";
-const d = {
-  "teddy-heading": "_teddy-heading_1qjqc_2",
-  "teddy-heading--hyphens": "_teddy-heading--hyphens_1qjqc_9",
-  "teddy-heading--subsection-100": "_teddy-heading--subsection-100_1qjqc_12",
-  "teddy-heading--title-100": "_teddy-heading--title-100_1qjqc_18",
-  "teddy-heading--title-200": "_teddy-heading--title-200_1qjqc_24",
-  "teddy-heading--title-300": "_teddy-heading--title-300_1qjqc_30",
-  "teddy-heading--title-400": "_teddy-heading--title-400_1qjqc_36",
-  "teddy-heading--title-500": "_teddy-heading--title-500_1qjqc_42",
-  "teddy-heading--title-600": "_teddy-heading--title-600_1qjqc_48",
-  "teddy-heading--title-700": "_teddy-heading--title-700_1qjqc_54",
-  "teddy-heading--display-25": "_teddy-heading--display-25_1qjqc_60",
-  "teddy-heading--display-50": "_teddy-heading--display-50_1qjqc_66",
-  "teddy-heading--display-100": "_teddy-heading--display-100_1qjqc_72",
-  "teddy-heading--display-200": "_teddy-heading--display-200_1qjqc_78"
-}, e = "teddy-heading", j = [
+import { jsx as s } from "react/jsx-runtime";
+import { $ as c } from "../../index-DpfSJps6.js";
+import { c as p } from "../../clsx-DB4S2d7J.js";
+import m from "react";
+import { extractProps as f } from "../../utils/layout/index.js";
+const e = {
+  "teddy-heading": "_teddy-heading_r8os0_2",
+  "teddy-heading--hyphens": "_teddy-heading--hyphens_r8os0_9",
+  "teddy-heading--subsection-100": "_teddy-heading--subsection-100_r8os0_12",
+  "teddy-heading--title-100": "_teddy-heading--title-100_r8os0_18",
+  "teddy-heading--title-200": "_teddy-heading--title-200_r8os0_24",
+  "teddy-heading--title-300": "_teddy-heading--title-300_r8os0_30",
+  "teddy-heading--title-400": "_teddy-heading--title-400_r8os0_36",
+  "teddy-heading--title-500": "_teddy-heading--title-500_r8os0_42",
+  "teddy-heading--title-600": "_teddy-heading--title-600_r8os0_48",
+  "teddy-heading--title-700": "_teddy-heading--title-700_r8os0_54",
+  "teddy-heading--display-25": "_teddy-heading--display-25_r8os0_60",
+  "teddy-heading--display-50": "_teddy-heading--display-50_r8os0_66",
+  "teddy-heading--display-100": "_teddy-heading--display-100_r8os0_72",
+  "teddy-heading--display-200": "_teddy-heading--display-200_r8os0_78"
+}, d = "teddy-heading", $ = [
   "title-100",
   "title-200",
   "title-300",
@@ -31,23 +32,21 @@ const d = {
   "display-50",
   "display-100",
   "display-200"
-], y = p.forwardRef(
-  ({ className: s, children: t, variant: i, asChild: _, enableHyphenation: l, as: a, ...h }, c) => {
-    const g = o(
-      d[`${e}`],
-      {
-        [d[`${e}--${i}`]]: i,
-        [d[`${e}--hyphens`]]: l
-      },
-      s
-    );
-    return /* @__PURE__ */ n(q, { ...h, ref: c, className: g, children: _ ? t : a ? /* @__PURE__ */ n(a, { children: t }) : null });
-  }
-);
-y.displayName = "Heading";
-const u = Object.assign(y, {
-  headingVariants: j
+], n = m.forwardRef((l, y) => {
+  const { className: _, children: t, variant: i, asChild: o, enableHyphenation: h, as: a, ...r } = f(l), g = p(
+    e[`${d}`],
+    {
+      [e[`${d}--${i}`]]: i,
+      [e[`${d}--hyphens`]]: h
+    },
+    _
+  );
+  return /* @__PURE__ */ s(c, { ...r, ref: y, className: g, children: o ? t : a ? /* @__PURE__ */ s(a, { children: t }) : null });
+});
+n.displayName = "Heading";
+const R = Object.assign(n, {
+  headingVariants: $
 });
 export {
-  u as Heading
+  R as Heading
 };

package/dist/components/index.d.ts

@@ -1,3 +1,5 @@
+export * from './modal';
+export * from './notification';
 export * from './radio-group';
 export * from './box';
 export * from './flex';

package/dist/components/index.js

@@ -1,46 +1,48 @@
-import { R as e } from "../radio-group-BR5SMJXJ.js";
-import { Box as p } from "./box/box.js";
-import { Flex as f } from "./flex/flex.js";
-import { A as a, B as i, C as n, T as d } from "../badge-9vHb0-Jo.js";
-import { Grid as s } from "./grid/grid.js";
-import { NavigationMenu as T } from "./navigation-menu/navigation-menu.js";
-import { Link as c } from "./link/link.js";
-import { Button as H } from "./button/button.js";
-import { FieldErrorText as G } from "./field-error-text/field-error-text.js";
+import { A as e, B as t, C as p, M as x, N as f, T as a } from "../badge-DscsRVHR.js";
+import { R as i } from "../radio-group-B--zT3OL.js";
+import { Box as d } from "./box/box.js";
+import { Flex as l } from "./flex/flex.js";
+import { Grid as T } from "./grid/grid.js";
+import { N as g } from "../navigation-menu-DKuyW8zE.js";
+import { Link as H } from "./link/link.js";
+import { Button as F } from "./button/button.js";
+import { FieldErrorText as I } from "./field-error-text/field-error-text.js";
 import { HelperText as A } from "./helper-text/helper-text.js";
 import { default as L } from "../assets/5161b177f001ea1a.svg";
 import { Icon as S } from "./icon/icon.js";
 import { Input as k, InputGroup as v } from "./input/input.js";
 import { Label as E } from "./label/label.js";
-import { Spinner as N } from "./spinner/spinner.js";
-import { Text as h } from "./text/text.js";
-import { TextField as q } from "./text-field/text-field.js";
-import { Heading as z } from "./heading/heading.js";
-import { VisuallyHidden as J } from "./visually-hidden/visually-hidden.js";
-import { TextSpacing as O } from "./text-spacing/text-spacing.js";
+import { Spinner as h } from "./spinner/spinner.js";
+import { Text as q } from "./text/text.js";
+import { TextField as z } from "./text-field/text-field.js";
+import { Heading as J } from "./heading/heading.js";
+import { VisuallyHidden as O } from "./visually-hidden/visually-hidden.js";
+import { TextSpacing as Q } from "./text-spacing/text-spacing.js";
 export {
-  a as Accordion,
-  i as Badge,
-  p as Box,
-  H as Button,
-  n as Card,
-  G as FieldErrorText,
-  f as Flex,
-  s as Grid,
-  z as Heading,
+  e as Accordion,
+  t as Badge,
+  d as Box,
+  F as Button,
+  p as Card,
+  I as FieldErrorText,
+  l as Flex,
+  T as Grid,
+  J as Heading,
   A as HelperText,
   S as Icon,
   k as Input,
   v as InputGroup,
   E as Label,
-  c as Link,
-  T as NavigationMenu,
-  e as RadioGroup,
-  N as Spinner,
-  h as Text,
-  q as TextField,
-  O as TextSpacing,
-  d as Toggle,
-  J as VisuallyHidden,
+  H as Link,
+  x as Modal,
+  g as NavigationMenu,
+  f as Notification,
+  i as RadioGroup,
+  h as Spinner,
+  q as Text,
+  z as TextField,
+  Q as TextSpacing,
+  a as Toggle,
+  O as VisuallyHidden,
   L as iconsHref
 };

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

@@ -0,0 +1,2 @@
+export { Modal } from './modal';
+export type { ModalProps } from './modal';

package/dist/components/modal/index.js

@@ -0,0 +1,4 @@
+import { M as r } from "../../badge-DscsRVHR.js";
+export {
+  r as Modal
+};

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

@@ -0,0 +1,76 @@
+import { ComponentPropsAs } from '../../utils/component-props-as';
+import { Flex, Heading, Text } from '..';
+import { default as React } from 'react';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+type RootProps = Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>, 'modal'>;
+/** -------------------------------------------------------------------------------------------------
+ * ModalTrigger
+ * -----------------------------------------------------------------------------------------------*/
+type TriggerProps = Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>, 'asChild' | 'children'> & {
+    children: React.ReactElement;
+};
+type OverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
+    container?: React.ComponentProps<typeof DialogPrimitive.Portal>['container'];
+};
+/** -------------------------------------------------------------------------------------------------
+ * ModalContent
+ * -----------------------------------------------------------------------------------------------*/
+type ContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
+type GroupProps = React.ComponentPropsWithoutRef<typeof Flex> & {
+    variant?: 'title' | 'action';
+};
+/** -------------------------------------------------------------------------------------------------
+ * ModalTitle
+ * -----------------------------------------------------------------------------------------------*/
+type TitleProps = Omit<React.ComponentPropsWithoutRef<typeof Heading>, 'asChild'>;
+/** -------------------------------------------------------------------------------------------------
+ * ModalDescription
+ * -----------------------------------------------------------------------------------------------*/
+type DescriptionProps = ComponentPropsAs<typeof Text, 'p'>;
+/** -------------------------------------------------------------------------------------------------
+ * ModalImage
+ * -----------------------------------------------------------------------------------------------*/
+type ImageProps = React.ComponentPropsWithoutRef<'img'> & {
+    asChild?: boolean;
+};
+/** -------------------------------------------------------------------------------------------------
+ * ModalClose
+ * -----------------------------------------------------------------------------------------------*/
+type CloseProps = Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>, 'asChild' | 'children'> & ({
+    children: React.ReactElement;
+    slot: 'content';
+} | {
+    ['aria-label']: string;
+    slot: 'floating';
+    children?: never;
+});
+/** -------------------------------------------------------------------------------------------------*/
+export declare const Modal: React.FC<RootProps> & {
+    Trigger: React.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref">, "asChild" | "children"> & {
+        children: React.ReactElement;
+    } & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        container?: React.ComponentProps<typeof DialogPrimitive.Portal>['container'];
+    } & React.RefAttributes<HTMLDivElement>>;
+    Description: React.ForwardRefExoticComponent<DescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+    Close: React.ForwardRefExoticComponent<CloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Image: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+        asChild?: boolean | undefined;
+    } & React.RefAttributes<HTMLImageElement>>;
+    Group: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;
+};
+export type ModalProps = {
+    Root: RootProps;
+    Trigger: TriggerProps;
+    Content: ContentProps;
+    Title: TitleProps;
+    Description: DescriptionProps;
+    Overlay: OverlayProps;
+    Group: GroupProps;
+    Close: CloseProps;
+    Image: ImageProps;
+};
+export {};