@konstructio/ui 0.0.12-alpha.1 → 0.0.12-alpha.10

package/dist/index-DyKo5ZJT.js

@@ -0,0 +1,446 @@
+import * as i from "react";
+import { u as Ee, d as j, a as he, c as ye, b as _, e as De } from "./index-Cva-e5M4.js";
+import { u as S, S as be } from "./index-B_6_jmOO.js";
+import { P as Ce, D as Ae } from "./index-D_76wh4w.js";
+import { P as N } from "./index-D7QNmo_D.js";
+import { jsx as f, jsxs as q, Fragment as B } from "react/jsx-runtime";
+import { P as W } from "./index-Dj1pom3_.js";
+import { R as Re } from "./Combination-b348x__d.js";
+var Ne = i.useId || (() => {
+}), Oe = 0;
+function M(e) {
+  const [n, t] = i.useState(Ne());
+  return Ee(() => {
+    t((o) => o ?? String(Oe++));
+  }, [e]), n ? `radix-${n}` : "";
+}
+var x = "focusScope.autoFocusOnMount", w = "focusScope.autoFocusOnUnmount", V = { bubbles: !1, cancelable: !0 }, _e = "FocusScope", Q = i.forwardRef((e, n) => {
+  const {
+    loop: t = !1,
+    trapped: o = !1,
+    onMountAutoFocus: a,
+    onUnmountAutoFocus: r,
+    ...c
+  } = e, [s, g] = i.useState(null), m = j(a), h = j(r), u = i.useRef(null), d = S(n, (l) => g(l)), p = i.useRef({
+    paused: !1,
+    pause() {
+      this.paused = !0;
+    },
+    resume() {
+      this.paused = !1;
+    }
+  }).current;
+  i.useEffect(() => {
+    if (o) {
+      let l = function(D) {
+        if (p.paused || !s) return;
+        const y = D.target;
+        s.contains(y) ? u.current = y : C(u.current, { select: !0 });
+      }, b = function(D) {
+        if (p.paused || !s) return;
+        const y = D.relatedTarget;
+        y !== null && (s.contains(y) || C(u.current, { select: !0 }));
+      }, v = function(D) {
+        if (document.activeElement === document.body)
+          for (const H of D)
+            H.removedNodes.length > 0 && C(s);
+      };
+      document.addEventListener("focusin", l), document.addEventListener("focusout", b);
+      const O = new MutationObserver(v);
+      return s && O.observe(s, { childList: !0, subtree: !0 }), () => {
+        document.removeEventListener("focusin", l), document.removeEventListener("focusout", b), O.disconnect();
+      };
+    }
+  }, [o, s, p.paused]), i.useEffect(() => {
+    if (s) {
+      Z.add(p);
+      const l = document.activeElement;
+      if (!s.contains(l)) {
+        const v = new CustomEvent(x, V);
+        s.addEventListener(x, m), s.dispatchEvent(v), v.defaultPrevented || (Ie(Me(X(s)), { select: !0 }), document.activeElement === l && C(s));
+      }
+      return () => {
+        s.removeEventListener(x, m), setTimeout(() => {
+          const v = new CustomEvent(w, V);
+          s.addEventListener(w, h), s.dispatchEvent(v), v.defaultPrevented || C(l ?? document.body, { select: !0 }), s.removeEventListener(w, h), Z.remove(p);
+        }, 0);
+      };
+    }
+  }, [s, m, h, p]);
+  const I = i.useCallback(
+    (l) => {
+      if (!t && !o || p.paused) return;
+      const b = l.key === "Tab" && !l.altKey && !l.ctrlKey && !l.metaKey, v = document.activeElement;
+      if (b && v) {
+        const O = l.currentTarget, [D, y] = Pe(O);
+        D && y ? !l.shiftKey && v === y ? (l.preventDefault(), t && C(D, { select: !0 })) : l.shiftKey && v === D && (l.preventDefault(), t && C(y, { select: !0 })) : v === O && l.preventDefault();
+      }
+    },
+    [t, o, p.paused]
+  );
+  return /* @__PURE__ */ f(N.div, { tabIndex: -1, ...c, ref: d, onKeyDown: I });
+});
+Q.displayName = _e;
+function Ie(e, { select: n = !1 } = {}) {
+  const t = document.activeElement;
+  for (const o of e)
+    if (C(o, { select: n }), document.activeElement !== t) return;
+}
+function Pe(e) {
+  const n = X(e), t = Y(n, e), o = Y(n.reverse(), e);
+  return [t, o];
+}
+function X(e) {
+  const n = [], t = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (o) => {
+      const a = o.tagName === "INPUT" && o.type === "hidden";
+      return o.disabled || o.hidden || a ? NodeFilter.FILTER_SKIP : o.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    }
+  });
+  for (; t.nextNode(); ) n.push(t.currentNode);
+  return n;
+}
+function Y(e, n) {
+  for (const t of e)
+    if (!Te(t, { upTo: n })) return t;
+}
+function Te(e, { upTo: n }) {
+  if (getComputedStyle(e).visibility === "hidden") return !0;
+  for (; e; ) {
+    if (n !== void 0 && e === n) return !1;
+    if (getComputedStyle(e).display === "none") return !0;
+    e = e.parentElement;
+  }
+  return !1;
+}
+function Fe(e) {
+  return e instanceof HTMLInputElement && "select" in e;
+}
+function C(e, { select: n = !1 } = {}) {
+  if (e && e.focus) {
+    const t = document.activeElement;
+    e.focus({ preventScroll: !0 }), e !== t && Fe(e) && n && e.select();
+  }
+}
+var Z = Se();
+function Se() {
+  let e = [];
+  return {
+    add(n) {
+      const t = e[0];
+      n !== t && (t == null || t.pause()), e = z(e, n), e.unshift(n);
+    },
+    remove(n) {
+      var t;
+      e = z(e, n), (t = e[0]) == null || t.resume();
+    }
+  };
+}
+function z(e, n) {
+  const t = [...e], o = t.indexOf(n);
+  return o !== -1 && t.splice(o, 1), t;
+}
+function Me(e) {
+  return e.filter((n) => n.tagName !== "A");
+}
+var L = 0;
+function xe() {
+  i.useEffect(() => {
+    const e = document.querySelectorAll("[data-radix-focus-guard]");
+    return document.body.insertAdjacentElement("afterbegin", e[0] ?? J()), document.body.insertAdjacentElement("beforeend", e[1] ?? J()), L++, () => {
+      L === 1 && document.querySelectorAll("[data-radix-focus-guard]").forEach((n) => n.remove()), L--;
+    };
+  }, []);
+}
+function J() {
+  const e = document.createElement("span");
+  return e.setAttribute("data-radix-focus-guard", ""), e.tabIndex = 0, e.style.outline = "none", e.style.opacity = "0", e.style.position = "fixed", e.style.pointerEvents = "none", e;
+}
+var we = function(e) {
+  if (typeof document > "u")
+    return null;
+  var n = Array.isArray(e) ? e[0] : e;
+  return n.ownerDocument.body;
+}, R = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new WeakMap(), T = {}, k = 0, ee = function(e) {
+  return e && (e.host || ee(e.parentNode));
+}, Le = function(e, n) {
+  return n.map(function(t) {
+    if (e.contains(t))
+      return t;
+    var o = ee(t);
+    return o && e.contains(o) ? o : (console.error("aria-hidden", t, "in not contained inside", e, ". Doing nothing"), null);
+  }).filter(function(t) {
+    return !!t;
+  });
+}, ke = function(e, n, t, o) {
+  var a = Le(n, Array.isArray(e) ? e : [e]);
+  T[t] || (T[t] = /* @__PURE__ */ new WeakMap());
+  var r = T[t], c = [], s = /* @__PURE__ */ new Set(), g = new Set(a), m = function(u) {
+    !u || s.has(u) || (s.add(u), m(u.parentNode));
+  };
+  a.forEach(m);
+  var h = function(u) {
+    !u || g.has(u) || Array.prototype.forEach.call(u.children, function(d) {
+      if (s.has(d))
+        h(d);
+      else
+        try {
+          var p = d.getAttribute(o), I = p !== null && p !== "false", l = (R.get(d) || 0) + 1, b = (r.get(d) || 0) + 1;
+          R.set(d, l), r.set(d, b), c.push(d), l === 1 && I && P.set(d, !0), b === 1 && d.setAttribute(t, "true"), I || d.setAttribute(o, "true");
+        } catch (v) {
+          console.error("aria-hidden: cannot operate on ", d, v);
+        }
+    });
+  };
+  return h(n), s.clear(), k++, function() {
+    c.forEach(function(u) {
+      var d = R.get(u) - 1, p = r.get(u) - 1;
+      R.set(u, d), r.set(u, p), d || (P.has(u) || u.removeAttribute(o), P.delete(u)), p || u.removeAttribute(t);
+    }), k--, k || (R = /* @__PURE__ */ new WeakMap(), R = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new WeakMap(), T = {});
+  };
+}, We = function(e, n, t) {
+  t === void 0 && (t = "data-aria-hidden");
+  var o = Array.from(Array.isArray(e) ? e : [e]), a = we(e);
+  return a ? (o.push.apply(o, Array.from(a.querySelectorAll("[aria-live]"))), ke(o, a, t, "aria-hidden")) : function() {
+    return null;
+  };
+}, U = "Dialog", [te, et] = ye(U), [Ue, E] = te(U), ne = (e) => {
+  const {
+    __scopeDialog: n,
+    children: t,
+    open: o,
+    defaultOpen: a,
+    onOpenChange: r,
+    modal: c = !0
+  } = e, s = i.useRef(null), g = i.useRef(null), [m = !1, h] = he({
+    prop: o,
+    defaultProp: a,
+    onChange: r
+  });
+  return /* @__PURE__ */ f(
+    Ue,
+    {
+      scope: n,
+      triggerRef: s,
+      contentRef: g,
+      contentId: M(),
+      titleId: M(),
+      descriptionId: M(),
+      open: m,
+      onOpenChange: h,
+      onOpenToggle: i.useCallback(() => h((u) => !u), [h]),
+      modal: c,
+      children: t
+    }
+  );
+};
+ne.displayName = U;
+var oe = "DialogTrigger", re = i.forwardRef(
+  (e, n) => {
+    const { __scopeDialog: t, ...o } = e, a = E(oe, t), r = S(n, a.triggerRef);
+    return /* @__PURE__ */ f(
+      N.button,
+      {
+        type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": a.open,
+        "aria-controls": a.contentId,
+        "data-state": $(a.open),
+        ...o,
+        ref: r,
+        onClick: _(e.onClick, a.onOpenToggle)
+      }
+    );
+  }
+);
+re.displayName = oe;
+var K = "DialogPortal", [Ke, ae] = te(K, {
+  forceMount: void 0
+}), se = (e) => {
+  const { __scopeDialog: n, forceMount: t, children: o, container: a } = e, r = E(K, n);
+  return /* @__PURE__ */ f(Ke, { scope: n, forceMount: t, children: i.Children.map(o, (c) => /* @__PURE__ */ f(W, { present: t || r.open, children: /* @__PURE__ */ f(Ce, { asChild: !0, container: a, children: c }) })) });
+};
+se.displayName = K;
+var F = "DialogOverlay", ie = i.forwardRef(
+  (e, n) => {
+    const t = ae(F, e.__scopeDialog), { forceMount: o = t.forceMount, ...a } = e, r = E(F, e.__scopeDialog);
+    return r.modal ? /* @__PURE__ */ f(W, { present: o || r.open, children: /* @__PURE__ */ f(Ge, { ...a, ref: n }) }) : null;
+  }
+);
+ie.displayName = F;
+var Ge = i.forwardRef(
+  (e, n) => {
+    const { __scopeDialog: t, ...o } = e, a = E(F, t);
+    return (
+      // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
+      // ie. when `Overlay` and `Content` are siblings
+      /* @__PURE__ */ f(Re, { as: be, allowPinchZoom: !0, shards: [a.contentRef], children: /* @__PURE__ */ f(
+        N.div,
+        {
+          "data-state": $(a.open),
+          ...o,
+          ref: n,
+          style: { pointerEvents: "auto", ...o.style }
+        }
+      ) })
+    );
+  }
+), A = "DialogContent", ce = i.forwardRef(
+  (e, n) => {
+    const t = ae(A, e.__scopeDialog), { forceMount: o = t.forceMount, ...a } = e, r = E(A, e.__scopeDialog);
+    return /* @__PURE__ */ f(W, { present: o || r.open, children: r.modal ? /* @__PURE__ */ f($e, { ...a, ref: n }) : /* @__PURE__ */ f(He, { ...a, ref: n }) });
+  }
+);
+ce.displayName = A;
+var $e = i.forwardRef(
+  (e, n) => {
+    const t = E(A, e.__scopeDialog), o = i.useRef(null), a = S(n, t.contentRef, o);
+    return i.useEffect(() => {
+      const r = o.current;
+      if (r) return We(r);
+    }, []), /* @__PURE__ */ f(
+      ue,
+      {
+        ...e,
+        ref: a,
+        trapFocus: t.open,
+        disableOutsidePointerEvents: !0,
+        onCloseAutoFocus: _(e.onCloseAutoFocus, (r) => {
+          var c;
+          r.preventDefault(), (c = t.triggerRef.current) == null || c.focus();
+        }),
+        onPointerDownOutside: _(e.onPointerDownOutside, (r) => {
+          const c = r.detail.originalEvent, s = c.button === 0 && c.ctrlKey === !0;
+          (c.button === 2 || s) && r.preventDefault();
+        }),
+        onFocusOutside: _(
+          e.onFocusOutside,
+          (r) => r.preventDefault()
+        )
+      }
+    );
+  }
+), He = i.forwardRef(
+  (e, n) => {
+    const t = E(A, e.__scopeDialog), o = i.useRef(!1), a = i.useRef(!1);
+    return /* @__PURE__ */ f(
+      ue,
+      {
+        ...e,
+        ref: n,
+        trapFocus: !1,
+        disableOutsidePointerEvents: !1,
+        onCloseAutoFocus: (r) => {
+          var c, s;
+          (c = e.onCloseAutoFocus) == null || c.call(e, r), r.defaultPrevented || (o.current || (s = t.triggerRef.current) == null || s.focus(), r.preventDefault()), o.current = !1, a.current = !1;
+        },
+        onInteractOutside: (r) => {
+          var g, m;
+          (g = e.onInteractOutside) == null || g.call(e, r), r.defaultPrevented || (o.current = !0, r.detail.originalEvent.type === "pointerdown" && (a.current = !0));
+          const c = r.target;
+          ((m = t.triggerRef.current) == null ? void 0 : m.contains(c)) && r.preventDefault(), r.detail.originalEvent.type === "focusin" && a.current && r.preventDefault();
+        }
+      }
+    );
+  }
+), ue = i.forwardRef(
+  (e, n) => {
+    const { __scopeDialog: t, trapFocus: o, onOpenAutoFocus: a, onCloseAutoFocus: r, ...c } = e, s = E(A, t), g = i.useRef(null), m = S(n, g);
+    return xe(), /* @__PURE__ */ q(B, { children: [
+      /* @__PURE__ */ f(
+        Q,
+        {
+          asChild: !0,
+          loop: !0,
+          trapped: o,
+          onMountAutoFocus: a,
+          onUnmountAutoFocus: r,
+          children: /* @__PURE__ */ f(
+            Ae,
+            {
+              role: "dialog",
+              id: s.contentId,
+              "aria-describedby": s.descriptionId,
+              "aria-labelledby": s.titleId,
+              "data-state": $(s.open),
+              ...c,
+              ref: m,
+              onDismiss: () => s.onOpenChange(!1)
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ q(B, { children: [
+        /* @__PURE__ */ f(je, { titleId: s.titleId }),
+        /* @__PURE__ */ f(Be, { contentRef: g, descriptionId: s.descriptionId })
+      ] })
+    ] });
+  }
+), G = "DialogTitle", le = i.forwardRef(
+  (e, n) => {
+    const { __scopeDialog: t, ...o } = e, a = E(G, t);
+    return /* @__PURE__ */ f(N.h2, { id: a.titleId, ...o, ref: n });
+  }
+);
+le.displayName = G;
+var fe = "DialogDescription", de = i.forwardRef(
+  (e, n) => {
+    const { __scopeDialog: t, ...o } = e, a = E(fe, t);
+    return /* @__PURE__ */ f(N.p, { id: a.descriptionId, ...o, ref: n });
+  }
+);
+de.displayName = fe;
+var pe = "DialogClose", ve = i.forwardRef(
+  (e, n) => {
+    const { __scopeDialog: t, ...o } = e, a = E(pe, t);
+    return /* @__PURE__ */ f(
+      N.button,
+      {
+        type: "button",
+        ...o,
+        ref: n,
+        onClick: _(e.onClick, () => a.onOpenChange(!1))
+      }
+    );
+  }
+);
+ve.displayName = pe;
+function $(e) {
+  return e ? "open" : "closed";
+}
+var me = "DialogTitleWarning", [tt, ge] = De(me, {
+  contentName: A,
+  titleName: G,
+  docsSlug: "dialog"
+}), je = ({ titleId: e }) => {
+  const n = ge(me), t = `\`${n.contentName}\` requires a \`${n.titleName}\` for the component to be accessible for screen reader users.
+
+If you want to hide the \`${n.titleName}\`, you can wrap it with our VisuallyHidden component.
+
+For more information, see https://radix-ui.com/primitives/docs/components/${n.docsSlug}`;
+  return i.useEffect(() => {
+    e && (document.getElementById(e) || console.error(t));
+  }, [t, e]), null;
+}, qe = "DialogDescriptionWarning", Be = ({ contentRef: e, descriptionId: n }) => {
+  const o = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${ge(qe).contentName}}.`;
+  return i.useEffect(() => {
+    var r;
+    const a = (r = e.current) == null ? void 0 : r.getAttribute("aria-describedby");
+    n && a && (document.getElementById(n) || console.warn(o));
+  }, [o, e, n]), null;
+}, nt = ne, ot = re, rt = se, at = ie, st = ce, it = le, ct = de, ut = ve;
+export {
+  st as C,
+  le as D,
+  at as O,
+  rt as P,
+  nt as R,
+  it as T,
+  tt as W,
+  se as a,
+  ut as b,
+  et as c,
+  ct as d,
+  ot as e,
+  M as u
+};

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { Config } from 'tailwindcss/types/config';
 import { Context } from 'react';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
+import { FunctionComponent } from 'react';
 import { HTMLAttributes } from 'react';
 import { HtmlHTMLAttributes } from 'react';
 import { InputHTMLAttributes } from 'react';
@@ -14,6 +15,8 @@ import { RefAttributes } from 'react';
 import { SliderProps } from '@radix-ui/react-slider';
 import { VariantProps } from 'class-variance-authority';
 
+export declare const Alert: FC<AlertProps>;
+
 export declare const AlertDialog: FC<AlertDialogProps>;
 
 declare interface AlertDialogProps extends PropsWithChildren, VariantProps<typeof buttonAlertDialogVariants> {
@@ -29,6 +32,19 @@ declare interface AlertDialogProps extends PropsWithChildren, VariantProps<typeo
     onConfirm?: () => void;
 }
 
+declare interface AlertProps extends VariantProps<typeof alertVariants> {
+    dismissible?: boolean;
+    content: string | ReactNode;
+    isVisible?: boolean;
+    showCloseButton?: boolean;
+}
+
+declare const alertVariants: (props?: ({
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
+    type?: "sucess" | "info" | "warning" | "danger" | null | undefined;
+    isVisible?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
 export declare const Autocomplete: ForwardRefExoticComponent<AutocompleteProps & RefAttributes<HTMLInputElement>>;
 
 declare interface AutocompleteProps extends VariantProps<typeof autocompleteVariants> {
@@ -73,7 +89,7 @@ declare interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElemen
 }
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "danger" | "text" | "circle" | null | undefined;
+    variant?: "danger" | "circle" | "text" | "primary" | "secondary" | null | undefined;
     version?: "default" | "alternate" | null | undefined;
     theme?: "kubefirst" | "colony" | "civo" | null | undefined;
     disabled?: boolean | null | undefined;
@@ -114,6 +130,8 @@ declare const checkboxVariants: (props?: ({
     checked?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const Divider: FunctionComponent<HTMLAttributes<HTMLDivElement>>;
+
 export declare const Dropdown: FC<DropdownProps>;
 
 declare interface DropdownProps extends VariantProps<typeof dropdownVariants> {
@@ -123,6 +141,8 @@ declare interface DropdownProps extends VariantProps<typeof dropdownVariants> {
     options: Option_3[];
     placeholder?: string;
     onChange?: (value: Option_3) => void;
+    labelClassName?: string;
+    required?: boolean;
 }
 
 declare const dropdownVariants: (props?: ({
@@ -139,17 +159,18 @@ declare const footerVariants: (props?: ({
     theme?: "kubefirst" | "colony" | "civo" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+declare type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
 export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
 
 declare interface InputProps extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
-    label?: string;
+    label?: string | ReactNode;
     labelClassName?: string;
     error?: string;
-    onClickIcon?: () => void;
 }
 
 declare const inputVariants: (props?: ({
-    variant?: "default" | "error" | null | undefined;
+    variant?: "error" | "default" | null | undefined;
     theme?: "kubefirst" | "colony" | "civo" | null | undefined;
 } & ClassProp) | undefined) => string;
 
@@ -158,6 +179,14 @@ export declare const konstructPlugin: {
     config?: Partial<Config>;
 };
 
+export declare const Loading: FunctionComponent<LoadingProps>;
+
+declare type LoadingProps = InputHTMLAttributes<SVGSVGElement> & VariantProps<typeof loadingVariants>;
+
+declare const loadingVariants: (props?: ({
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 export declare const Logo: FC<LogoProps>;
 
 declare interface LogoProps extends PropsWithChildren, VariantProps<typeof logoVariants> {
@@ -183,6 +212,8 @@ declare type ModalChildProps = {
 declare interface ModalProps extends PropsWithChildren, VariantProps<typeof modalVariants> {
     className?: string;
     buttonCloseClassName?: string;
+    isOpen?: boolean;
+    onClose?: () => void;
 }
 
 declare const modalVariants: (props?: ({
@@ -431,8 +462,14 @@ declare const switchVariants: (props?: ({
 export declare const Tag: FC<TagProps>;
 
 declare type TagProps = {
-    label: string;
     color?: 'gray' | 'cyan' | 'gold' | 'green' | 'light blue' | 'lime' | 'pink' | 'purple' | 'emerald' | 'fuscia' | 'indigo' | 'light-orange' | 'dark-sky-blue' | 'mistery';
+    id: string | number;
+    label: string;
+    rightIcon?: ReactNode;
+    leftIcon?: ReactNode;
+    className?: string;
+    'data-value'?: string;
+    isSelected?: boolean;
 };
 
 export declare const TagSelect: FC<TagSelectProps>;
@@ -442,6 +479,9 @@ declare interface TagSelectProps extends VariantProps<typeof tagSelectVariants>
     options: TagProps[];
     name?: string;
     placeholder?: string;
+    labelClassName?: string;
+    wrapperClassName?: string;
+    multiselect?: boolean;
 }
 
 declare const tagSelectVariants: (props?: ({
@@ -452,10 +492,9 @@ export declare const TextArea: FC<TextAreaProps>;
 
 declare interface TextAreaProps extends InputHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textAreaVariants> {
     rows?: number;
-    label?: string;
+    label?: string | ReactNode;
     name?: string;
     initialValue?: string;
-    onChange?: () => void;
 }
 
 declare const textAreaVariants: (props?: ({
@@ -492,6 +531,9 @@ declare interface ToastProps extends PropsWithChildren, VariantProps<typeof toas
     showCloseButton?: boolean;
     title: string | ReactNode;
     titleClassName?: string;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    closeButtonClassName?: string;
 }
 
 declare const toastVariants: (props?: ({
@@ -511,6 +553,18 @@ declare const tooltipVariants: (props?: ({
     position?: "left" | "right" | "top" | "bottom" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const Typography: FunctionComponent<TypographyProps>;
+
+declare interface TypographyProps extends InputHTMLAttributes<HTMLParagraphElement>, VariantProps<typeof typographyVariants> {
+    children: ReactNode;
+    component?: HeadingTag | 'p' | 'span';
+}
+
+declare const typographyVariants: (props?: ({
+    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "tooltip" | "subtitle1" | "subtitle2" | "subtitle3" | "labelLarge" | "labelMedium" | "labelSmall" | "buttonSmall" | "body1" | "body2" | "body3" | null | undefined;
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 export declare const useTheme: () => ThemeProps;
 
 export declare const useToggle: (initialState?: boolean) => [boolean, (value?: boolean) => void];