gd-design-library 1.0.2 → 1.2.0

package/components/core/Snackbar/SnackbarStyled.js

@@ -1,134 +1,144 @@
-"use client";
 import { jsx as y } from "@emotion/react/jsx-runtime";
-import { forwardRef as O } from "react";
-import { getBoxStyles as m, tokensHandler as d, convertJsonToCssKeyframeCss as P } from "../../../tokens/utils.js";
-import { Typography as h } from "../Typography/Typography.js";
-import { get as a } from "../../../utils/helpers.js";
+import { forwardRef as N } from "react";
+import { getBoxStyles as i, tokensHandler as S, convertJsonToCssKeyframeCss as u } from "../../../tokens/utils.js";
+import { Typography as P } from "../Typography/Typography.js";
+import { get as n } from "../../../utils/helpers.js";
 import { Icon as f } from "../Icon/Icon.js";
-import { TypographyStyleVariant as x, TypographyVariant as g, TextAlign as $ } from "../../../types/typography.js";
-const E = O((s, o) => {
+const J = N(({
+  theme: {
+    animations: t,
+    snackbar: s,
+    ...e
+  } = {},
+  $variant: o,
+  $colored: r,
+  $isClosing: c,
+  $isAnimated: l,
+  styles: d,
+  ...a
+}, b) => {
   const {
-    theme: {
-      animations: t,
-      snackbar: n,
-      ...e
-    } = {},
-    $variant: r,
-    $colored: i,
-    $isClosing: l,
-    $isAnimated: c,
-    styles: p,
-    ...v
-  } = s, {
-    boxStyles: w,
-    restProps: C
-  } = m(v), S = new Proxy(n || {}, d(e)), B = P(t == null ? void 0 : t.slideIn), A = P(t == null ? void 0 : t.slideOut), b = a(S, "snackbar.animation.duration"), k = a(S, "snackbar.animation.timing"), N = `
-    ${A} ${b} ${k} 50ms forwards
-  `, T = `
-    ${B} ${b} ${k} forwards
-  `, u = a(S, "snackbar.background.default"), I = a(S, "snackbar.default", {}), V = {
-    background: i ? a(S, `snackbar.background.variants.${r}`, u) : u
+    boxStyles: h,
+    restProps: x
+  } = i(a), p = new Proxy(s || {}, S(e)), v = u(t == null ? void 0 : t.slideIn), C = u(t == null ? void 0 : t.slideOut), m = n(p, "snackbar.animation"), $ = `${C} ${m.closeEffect}`, g = `${v} ${m.openEffect}`, k = n(p, "snackbar.background.default"), w = n(p, "snackbar.default", {}), B = {
+    background: r ? n(p, `snackbar.background.variants.${o}`, k) : k
   };
-  return /* @__PURE__ */ y("div", { css: [c ? {
-    animation: l ? N : T
-  } : {}, I, V, w, p], ...C, ref: o });
-}), F = (s) => {
+  return /* @__PURE__ */ y("div", { css: [l ? {
+    animation: c ? $ : g
+  } : {}, w, B, h, d], ...x, ref: b });
+}), K = (t) => {
   const {
     theme: {
-      snackbar: o,
-      ...t
+      snackbar: s,
+      ...e
     } = {},
-    styles: n,
-    ...e
-  } = s, {
-    boxStyles: r,
-    restProps: i
-  } = m(e), l = new Proxy(o || {}, d(t)), c = [a(l, "closeButton", {}), r, n];
-  return /* @__PURE__ */ y("div", { css: c, ...i });
-}, G = (s) => {
+    styles: o,
+    ...r
+  } = t, {
+    boxStyles: c,
+    restProps: l
+  } = i(r), d = new Proxy(s || {}, S(e)), a = [n(d, "closeButton", {}), c, o];
+  return /* @__PURE__ */ y("div", { css: a, ...l });
+}, R = (t) => {
   const {
     theme: {
-      snackbar: o,
-      ...t
-    } = {}
-  } = s, n = new Proxy(o || {}, d(t)), e = a(n, "icons.close", {
+      snackbar: s,
+      ...e
+    } = {},
+    $variant: o
+  } = t, r = new Proxy(s || {}, S(e)), c = n(r, "icons.close", {
     name: "cross"
   });
-  return /* @__PURE__ */ y(f, { ...e });
-}, L = (s) => {
+  return /* @__PURE__ */ y(f, { fill: `icon.${o}`, ...c });
+}, W = (t) => {
   const {
-    $variant: o,
+    $variant: s,
     theme: {
-      snackbar: t,
-      ...n
+      snackbar: e
     } = {}
-  } = s, e = new Proxy(t || {}, d(n)), r = a(e, ["icons", o], {
+  } = t, o = n(e, ["icons", s], {
     name: ""
   });
-  return /* @__PURE__ */ y(f, { ...r });
-}, M = (s) => {
+  return /* @__PURE__ */ y(f, { ...o });
+}, q = (t) => {
   const {
     theme: {
-      snackbar: o,
-      ...t
+      snackbar: s,
+      ...e
     } = {},
-    styles: n,
-    ...e
-  } = s, {
-    boxStyles: r,
-    restProps: i
-  } = m(e), l = new Proxy(o || {}, d(t)), c = [a(l, "snackbarBody", {}), r, n];
-  return /* @__PURE__ */ y("div", { css: c, ...i });
-}, Q = (s) => {
+    styles: o,
+    ...r
+  } = t, {
+    boxStyles: c,
+    restProps: l
+  } = i(r), d = new Proxy(s || {}, S(e)), a = [n(d, "snackbarBody", {}), c, o];
+  return /* @__PURE__ */ y("div", { css: a, ...l });
+}, z = (t) => {
   const {
     theme: {
-      snackbar: o,
-      ...t
+      snackbar: s,
+      ...e
     } = {},
-    styles: n,
-    ...e
-  } = s, {
-    boxStyles: r,
-    restProps: i
-  } = m(e), l = new Proxy(o || {}, d(t)), c = [a(l, "snackbarContent", {}), r, n];
-  return /* @__PURE__ */ y("div", { css: c, ...i });
-}, U = (s) => /* @__PURE__ */ y(h, { align: $.Start, variant: g.Body2, styleVariant: x.Semibold, ...s }), X = (s) => /* @__PURE__ */ y(h, { align: $.Start, variant: g.Body2, styleVariant: x.Normal, ...s }), Y = (s) => {
+    styles: o,
+    ...r
+  } = t, {
+    boxStyles: c,
+    restProps: l
+  } = i(r), d = new Proxy(s || {}, S(e)), a = [n(d, "snackbarContent", {}), c, o];
+  return /* @__PURE__ */ y("div", { css: a, ...l });
+}, F = (t) => {
   const {
     theme: {
-      snackbar: o,
-      ...t
+      snackbar: s
     } = {},
-    styles: n,
-    ...e
-  } = s, {
-    boxStyles: r,
-    restProps: i
-  } = m(e), l = new Proxy(o || {}, d(t)), c = [a(l, "actionsContainer", {}), r, n];
-  return /* @__PURE__ */ y("div", { css: c, ...i });
-}, Z = (s) => {
+    children: e
+  } = t;
+  return /* @__PURE__ */ y(P, { ...n(s, "title.attrs", {}), children: e });
+}, G = (t) => {
+  const {
+    theme: {
+      snackbar: s
+    } = {},
+    children: e
+  } = t;
+  return /* @__PURE__ */ y(P, { ...n(s, "description.attrs", {}), children: e });
+}, L = (t) => {
   const {
     theme: {
-      snackbar: o,
-      ...t
+      snackbar: s,
+      ...e
     } = {},
-    $position: n,
-    styles: e,
+    styles: o,
     ...r
-  } = s, {
-    boxStyles: i,
+  } = t, {
+    boxStyles: c,
     restProps: l
-  } = m(r), c = new Proxy(o || {}, d(t)), p = [a(c, "container.default", {}), a(c, ["positions", n], {}), i, e];
-  return /* @__PURE__ */ y("div", { css: p, ...l });
+  } = i(r), d = new Proxy(s || {}, S(e)), a = [n(d, "actionsContainer", {}), c, o];
+  return /* @__PURE__ */ y("div", { css: a, ...l });
+}, M = (t) => {
+  const {
+    theme: {
+      snackbar: s,
+      ...e
+    } = {},
+    $position: o,
+    styles: r,
+    ...c
+  } = t, {
+    boxStyles: l,
+    restProps: d
+  } = i(c), a = new Proxy(s || {}, S(e)), b = [n(a, "container.default", {}), n(a, ["positions", o], {}), l, r];
+  return /* @__PURE__ */ y("div", { css: b, ...d });
 };
 export {
-  G as CloseButtonIconStyled,
-  F as CloseButtonWrapperStyled,
-  Y as SnackbarActionsContainerStyled,
-  M as SnackbarBodyStyled,
-  Z as SnackbarContainerStyled,
-  Q as SnackbarContentStyled,
-  X as SnackbarDescriptionStyled,
-  L as SnackbarIconStyled,
-  E as SnackbarStyled,
-  U as SnackbarTitleStyled
+  R as CloseButtonIconStyled,
+  K as CloseButtonWrapperStyled,
+  L as SnackbarActionsContainerStyled,
+  q as SnackbarBodyStyled,
+  M as SnackbarContainerStyled,
+  z as SnackbarContentStyled,
+  G as SnackbarDescriptionStyled,
+  W as SnackbarIconStyled,
+  J as SnackbarStyled,
+  F as SnackbarTitleStyled
 };

package/components/core/Textarea/Textarea.d.ts

@@ -1,2 +1,6 @@
 import { TextareaProps } from './Textarea.types';
+/**
+ * @TODO: New design
+ * - Align with new design
+ */
 export declare const Textarea: import('react').ForwardRefExoticComponent<TextareaProps & Partial<Omit<HTMLTextAreaElement, keyof TextareaProps>> & import('react').RefAttributes<HTMLTextAreaElement>>;

package/components/core/Tooltip/Tooltip.js

@@ -1,52 +1,76 @@
 "use client";
-import { jsxs as g, Fragment as B, jsx as s } from "@emotion/react/jsx-runtime";
-import { forwardRef as L, useCallback as r } from "react";
-import { useTooltip as O } from "./utils.js";
-import { COMPONENT_NAME as l } from "./constants.js";
-import { TooltipStyled as P, TooltipWrapperStyled as W } from "./TooltipStyled.js";
-import { useTheme as j } from "../../../hooks/useTheme/useTheme.js";
-import { KEYBOARD_KEYS as h } from "../../../constants/keyboard.js";
-import { Portal as v } from "../Portal/Portal.js";
-const V = L((u, y) => {
+import { jsxs as O, Fragment as P, jsx as c } from "@emotion/react/jsx-runtime";
+import { forwardRef as W, useCallback as a } from "react";
+import { useTooltip as j } from "./utils.js";
+import { COMPONENT_NAME as e } from "./constants.js";
+import { TooltipStyled as v, TooltipWrapperStyled as L } from "./TooltipStyled.js";
+import { useTheme as V } from "../../../hooks/useTheme/useTheme.js";
+import { useLogger as Y } from "../../../hooks/useLogger/useLogger.js";
+import { KEYBOARD_KEYS as T } from "../../../constants/keyboard.js";
+import { Portal as _ } from "../Portal/Portal.js";
+const q = W(({
+  id: t,
+  children: g,
+  content: r,
+  position: d,
+  delay: m,
+  className: $ = "",
+  ariaLabel: u,
+  gap: f,
+  as: k,
+  styles: w,
+  ...C
+}, E) => {
   const {
-    id: n,
-    children: T,
-    content: e,
-    position: b,
-    delay: w,
-    className: E = "",
-    ariaLabel: p,
-    gap: N,
-    as: C,
-    ...c
-  } = u, {
     theme: D
-  } = j(), {
+  } = V(), s = Y(), {
     isVisible: o,
-    coords: d,
-    containerRef: K,
-    tooltipRef: S,
-    showTooltip: a,
-    hideTooltip: t,
-    positionWithFallback: k
-  } = O(b, w, N), R = `${E.trim()} tooltip-${k}`, x = !p && typeof e == "string" ? e : p, f = o && !!e, i = r(() => {
-    o && t();
-  }, [t, o]), A = i, F = r(() => {
-    o || a();
-  }, [o, a]), M = r(() => {
-    o && t();
-  }, [t, o]), $ = r((m) => {
-    [h.ENTER, h.SPACE].includes(m.key) && (m.preventDefault(), i());
-  }, [i]);
-  return /* @__PURE__ */ g(B, { children: [
-    f && /* @__PURE__ */ s(v, { withWrapper: !1, ref: y, children: /* @__PURE__ */ s(P, { id: n, theme: D, className: R, ref: S, "data-testid": l, role: "tooltip", "aria-hidden": !o, style: {
-      top: d.top,
-      left: d.left
-    }, ...c, children: e }) }),
-    /* @__PURE__ */ s(W, { $as: C, ref: K, onMouseEnter: a, onMouseLeave: t, onClick: i, onTouchStart: A, onFocus: F, onBlur: M, onKeyDown: $, "aria-expanded": f, "aria-describedby": n, "aria-label": x, "data-testid": `${l}-wrapper`, ...c, children: T })
+    coords: K,
+    containerRef: N,
+    tooltipRef: R,
+    showTooltip: n,
+    hideTooltip: i,
+    positionWithFallback: h
+  } = j(d, m, f), S = `${$.trim()} tooltip-${h}`, F = !u && typeof r == "string" ? r : u, b = o && !!r, l = a(() => {
+    s.debug(`${e}: Click`, {
+      id: t,
+      isVisible: o
+    }), o && i();
+  }, [i, o]), x = l, A = a(() => {
+    s.debug(`${e}: Focus`, {
+      id: t,
+      isVisible: o
+    }), o || n();
+  }, [o, n]), B = a(() => {
+    s.debug(`${e}: Blur`, {
+      id: t,
+      isVisible: o
+    }), o && i();
+  }, [i, o]), M = a((p) => {
+    const y = [T.ENTER, T.SPACE].includes(p.key);
+    s.debug(`${e}: KeyDown`, {
+      id: t,
+      key: p.key,
+      matched: y
+    }), y && (p.preventDefault(), l());
+  }, [l]);
+  return s.debug(`${e}: Render`, {
+    id: t,
+    hasContent: !!r,
+    position: d,
+    positionWithFallback: h,
+    delay: m,
+    gap: f,
+    isVisible: o
+  }), /* @__PURE__ */ O(P, { children: [
+    b && /* @__PURE__ */ c(_, { withWrapper: !1, ref: E, children: /* @__PURE__ */ c(v, { id: t, theme: D, className: S, ref: R, "data-testid": e, role: "tooltip", "aria-hidden": !o, styles: {
+      ...w,
+      ...K
+    }, ...C, children: r }) }),
+    /* @__PURE__ */ c(L, { $as: k, ref: N, onMouseEnter: n, onMouseLeave: i, onClick: l, onTouchStart: x, onFocus: A, onBlur: B, onKeyDown: M, "aria-expanded": b, "aria-describedby": t, "aria-label": F, "data-testid": `${e}-wrapper`, children: g })
   ] });
 });
-V.displayName = l;
+q.displayName = e;
 export {
-  V as default
+  q as default
 };

package/components/core/Tooltip/TooltipStyled.js

@@ -1,31 +1,30 @@
-"use client";
-import { jsx as m } from "@emotion/react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { tokensHandler as i } from "../../../tokens/utils.js";
+import { jsx as n } from "@emotion/react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { tokensHandler as c } from "../../../tokens/utils.js";
 import { get as d } from "../../../utils/helpers.js";
-const w = c((t, o) => {
-  const {
-    theme: {
-      tooltip: e,
-      ...r
-    } = {},
-    styles: s = {},
-    $as: p = "div",
-    ...n
-  } = t, l = new Proxy(e || {}, i(r)), f = [d(l, "wrapper.default", {}), s];
-  return /* @__PURE__ */ m(p, { css: f, ...n, ref: o });
-}), x = c((t, o) => {
-  const {
-    theme: {
-      tooltip: e,
-      ...r
-    } = {},
-    styles: s = {},
-    ...p
-  } = t, n = new Proxy(e || {}, i(r)), l = [d(n, "default", {}), s];
-  return /* @__PURE__ */ m("div", { css: l, ...p, ref: o });
+const h = l(({
+  theme: {
+    tooltip: t,
+    ...e
+  } = {},
+  styles: o = {},
+  $as: r = "div",
+  ...p
+}, s) => {
+  const m = new Proxy(t || {}, c(e)), f = [d(m, "wrapper.default", {}), o];
+  return /* @__PURE__ */ n(r, { css: f, ...p, ref: s });
+}), w = l(({
+  theme: {
+    tooltip: t,
+    ...e
+  } = {},
+  styles: o = {},
+  ...r
+}, p) => {
+  const s = new Proxy(t || {}, c(e)), m = [d(s, "default", {}), o];
+  return /* @__PURE__ */ n("div", { css: m, ...r, ref: p });
 });
 export {
-  x as TooltipStyled,
-  w as TooltipWrapperStyled
+  w as TooltipStyled,
+  h as TooltipWrapperStyled
 };

package/components/core/Tooltip/utils.js

@@ -1,78 +1,80 @@
-import { useState as p, useRef as v, useCallback as E, useEffect as k } from "react";
-import { DEFAULT_DELAY as X, DEFAULT_GAP as D } from "./constants.js";
-import { TooltipPosition as o } from "./Tooltip.types.js";
-const x = (e = o.Top, r = X, n = D) => {
-  const [t, L] = p(!1), [b, A] = p({
+import { useState as v, useRef as p, useCallback as E, useEffect as B } from "react";
+import { DEFAULT_DELAY as D, DEFAULT_GAP as z } from "./constants.js";
+import { TooltipPosition as n } from "./Tooltip.types.js";
+const x = (e = n.Top, r = D, o = z) => {
+  const [t, L] = v(!1), [y, A] = v({
     top: -1e3,
     left: -1e3
-  }), [C, F] = p(e), d = v(null), f = v(null), i = v(null), c = E(() => {
-    if (!f.current || !d.current) return;
-    const s = d.current.getBoundingClientRect(), l = f.current.getBoundingClientRect(), w = B(s, l, e, n), u = y(e, l, w);
-    F(u), A(u === e ? w : B(s, l, u, n));
-  }, [n, e]), Y = E(() => {
-    i.current = setTimeout(() => {
-      d.current && (L(!0), requestAnimationFrame(() => {
-        c();
+  }), [F, Y] = v(e), c = p(null), h = p(null), s = p(null), w = E(() => {
+    if (!h.current || !c.current) return;
+    const i = c.current.getBoundingClientRect(), d = h.current.getBoundingClientRect(), f = C(i, d, e, o), u = S(e, d, f);
+    Y(u), A(u === e ? f : C(i, d, u, o));
+  }, [o, e]), X = E(() => {
+    s.current = setTimeout(() => {
+      c.current && (L(!0), requestAnimationFrame(() => {
+        w();
       }));
     }, r);
-  }, [r, c]), h = E(() => {
-    i.current && clearTimeout(i.current), L(!1);
+  }, [r, w]), l = E(() => {
+    s.current && clearTimeout(s.current), L(!1);
   }, []);
-  return k(() => () => {
-    i.current && (clearTimeout(i.current), i.current = null);
-  }, []), k(() => {
+  return B(() => () => {
+    s.current && (clearTimeout(s.current), s.current = null);
+  }, []), B(() => {
     if (!t) return;
-    const s = (a) => {
-      const m = a.target, g = d.current, T = f.current;
-      !g || !m || g.contains(m) || T && T.contains(m) || h();
-    }, l = (a) => {
-      a.key === "Escape" && h();
-    }, w = () => c(), u = () => c();
-    return document.addEventListener("mousedown", s, !0), document.addEventListener("touchstart", s, !0), window.addEventListener("keydown", l), window.addEventListener("resize", w), window.addEventListener("scroll", u, {
+    const i = (a) => {
+      const m = a.target, b = c.current, k = h.current;
+      !b || !m || b.contains(m) || k && k.contains(m) || l();
+    }, d = (a) => {
+      a.key === "Escape" && l();
+    }, f = () => w(), u = () => w(), g = () => l(), T = () => {
+      document.hidden && l();
+    };
+    return document.addEventListener("mousedown", i, !0), document.addEventListener("touchstart", i, !0), document.addEventListener("visibilitychange", T), window.addEventListener("keydown", d), window.addEventListener("resize", f), window.addEventListener("scroll", u, {
       passive: !0
-    }), () => {
-      document.removeEventListener("mousedown", s, !0), document.removeEventListener("touchstart", s, !0), window.removeEventListener("keydown", l), window.removeEventListener("resize", w), window.removeEventListener("scroll", u);
+    }), window.addEventListener("blur", g), () => {
+      document.removeEventListener("mousedown", i, !0), document.removeEventListener("touchstart", i, !0), document.removeEventListener("visibilitychange", T), window.removeEventListener("keydown", d), window.removeEventListener("resize", f), window.removeEventListener("scroll", u), window.removeEventListener("blur", g);
     };
-  }, [c, h, t]), {
+  }, [w, l, t]), {
     isVisible: t,
-    coords: b,
-    containerRef: d,
-    tooltipRef: f,
-    showTooltip: Y,
-    hideTooltip: h,
-    positionWithFallback: C
+    coords: y,
+    containerRef: c,
+    tooltipRef: h,
+    showTooltip: X,
+    hideTooltip: l,
+    positionWithFallback: F
   };
-}, B = (e, r, n, t) => {
-  switch (n) {
-    case o.Top:
+}, C = (e, r, o, t) => {
+  switch (o) {
+    case n.Top:
       return {
         top: e.top + window.scrollY - r.height - t,
         left: e.left + window.scrollX + e.width / 2
       };
-    case o.Bottom:
+    case n.Bottom:
       return {
         top: e.top + window.scrollY + e.height + t,
         left: e.left + window.scrollX + e.width / 2
       };
-    case o.Left:
+    case n.Left:
       return {
         top: e.top + window.scrollY + e.height / 2,
         left: e.left + window.scrollX - r.width - t
       };
-    case o.Right:
+    case n.Right:
       return {
         top: e.top + window.scrollY + e.height / 2,
         left: e.right + window.scrollX + t
       };
     default:
-      throw Error(`Unexpected position '${n}'`);
+      throw Error(`Unexpected position '${o}'`);
   }
-}, y = (e, r, n) => {
+}, S = (e, r, o) => {
   let t = e;
-  return e === o.Top && n.top < 0 ? t = o.Bottom : e === o.Bottom && n.top + r.height > window.innerHeight + window.scrollY ? t = o.Top : e === o.Left && n.left < 0 ? t = o.Right : e === o.Right && n.left + r.width > window.innerWidth + window.scrollX && (t = o.Left), t;
+  return e === n.Top && o.top < 0 ? t = n.Bottom : e === n.Bottom && o.top + r.height > window.innerHeight + window.scrollY ? t = n.Top : e === n.Left && o.left < 0 ? t = n.Right : e === n.Right && o.left + r.width > window.innerWidth + window.scrollX && (t = n.Left), t;
 };
 export {
-  B as getCoords,
-  y as getFallbackPosition,
+  C as getCoords,
+  S as getFallbackPosition,
   x as useTooltip
 };

package/components/core/Typography/Typography.js

@@ -1,26 +1,26 @@
 "use client";
 import { jsx as y } from "@emotion/react/jsx-runtime";
-import { forwardRef as c } from "react";
+import { forwardRef as l } from "react";
 import { COMPONENT_NAME as t } from "./constants.js";
 import { TypographyStyled as d } from "./TypographyStyled.js";
-import { TypographyVariant as h, TextAlign as g } from "../../../types/typography.js";
-import { useTheme as T } from "../../../hooks/useTheme/useTheme.js";
-const $ = c((a, e) => {
+import { useTheme as h } from "../../../hooks/useTheme/useTheme.js";
+import { TextAlign as T, TypographyVariant as $ } from "../../../types/typography.js";
+const g = l(({
+  variant: r = $.Inherit,
+  as: o,
+  size: e,
+  children: a,
+  align: i = T.Start,
+  color: m = "text.default",
+  styleVariant: p,
+  ...f
+}, s) => {
   const {
-    variant: r = h.Inherit,
-    as: o,
-    size: i,
-    children: m,
-    align: n = g.Start,
-    color: s = "text.default",
-    styleVariant: p,
-    ...l
-  } = a, {
-    theme: f
-  } = T();
-  return /* @__PURE__ */ y(d, { ref: e, theme: f, $as: o || r, $variant: r, $align: n, $size: i, $color: s, $styleVariant: p, "data-testid": t, ...l, children: m });
+    theme: n
+  } = h();
+  return /* @__PURE__ */ y(d, { ref: s, theme: n, $as: o || r, $variant: r, $align: i, $size: e, $color: m, $styleVariant: p, "data-testid": t, ...f, children: a });
 });
-$.displayName = t;
+g.displayName = t;
 export {
-  $ as Typography
+  g as Typography
 };

package/components/core/Typography/Typography.types.d.ts

@@ -1,8 +1,8 @@
 import { ElementType, PropsWithChildren } from 'react';
-import { CommonCssComponentProps, CommonCssComponentStyledProps } from '../..';
+import { BoxCssComponentProps, BoxCssComponentStyledProps, CommonCssComponentProps, CommonCssComponentStyledProps } from '../..';
 import { EnumOrPrimitive, SizeVariant, TextAlign, TypographyStyleVariant, TypographyVariant } from '../../../types';
 export type StyleVariant = EnumOrPrimitive<TypographyStyleVariant> | EnumOrPrimitive<TypographyStyleVariant>[];
-export interface TypographyProps extends CommonCssComponentProps<HTMLBaseElement>, PropsWithChildren {
+export interface TypographyProps extends CommonCssComponentProps<HTMLBaseElement>, Omit<BoxCssComponentProps<HTMLBaseElement>, 'onAbort'>, PropsWithChildren {
     as?: keyof HTMLElementTagNameMap | ElementType;
     color?: string;
     variant?: EnumOrPrimitive<TypographyVariant>;
@@ -10,7 +10,7 @@ export interface TypographyProps extends CommonCssComponentProps<HTMLBaseElement
     align?: EnumOrPrimitive<TextAlign>;
     styleVariant?: StyleVariant;
 }
-export interface TypographyStyledProps extends CommonCssComponentStyledProps<HTMLBaseElement>, PropsWithChildren {
+export interface TypographyStyledProps extends CommonCssComponentStyledProps<HTMLBaseElement>, Omit<BoxCssComponentStyledProps<HTMLBaseElement>, 'onAbort'>, PropsWithChildren {
     $as?: keyof HTMLElementTagNameMap | ElementType;
     $color?: string;
     $variant?: EnumOrPrimitive<TypographyVariant>;