@arthurzakharov/ui-kit 1.8.8 → 1.9.0

package/dist/animations/fade-grow/fade-grow.component.js

@@ -1,27 +1,28 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import m from "clsx";
 import { withBaseAnimationDefaults as r } from "../utils/default-props.js";
-import { useAnimationLifecycle as s } from "../hooks/use-animation-lifecycle/use-animation-lifecycle.hook.js";
-import { c as d } from "../../animation.module-DQXuL9kR.js";
+import { useAnimationLifecycle as d } from "../hooks/use-animation-lifecycle/use-animation-lifecycle.hook.js";
+import { c as s } from "../../animation.module-DQXuL9kR.js";
 import { m as c } from "../../proxy-CmTphuYR.js";
-const A = (o) => {
-  const t = r(o), i = s({
+const y = (o) => {
+  const t = r(o), i = d({
     condition: t.condition,
-    animateOnStart: t.animateOnStart
-  }), a = {
+    animateOnStart: t.animateOnStart,
+    onAnimationEnd: t.onAnimationEnd
+  }), n = {
     height: 0,
     opacity: 0
-  }, e = { height: "auto", opacity: 1 };
-  return !i.shouldRender && !t.keepMount ? null : /* @__PURE__ */ n(
+  }, a = { height: "auto", opacity: 1 };
+  return !i.shouldRender && !t.keepMount ? null : /* @__PURE__ */ e(
     "div",
     {
       "data-testid": t["data-testid"] || "animation-fade-grow",
-      className: m(d.Animation, t.className),
-      children: /* @__PURE__ */ n(
+      className: m(s.Animation, t.className),
+      children: /* @__PURE__ */ e(
         c.div,
         {
-          initial: i.getInitialState(a, e),
-          animate: i.getAnimateState(a, e),
+          initial: i.getInitialState(n, a),
+          animate: i.getAnimateState(n, a),
           transition: {
             ease: t.ease,
             duration: t.duration,
@@ -37,5 +38,5 @@ const A = (o) => {
   );
 };
 export {
-  A as FadeGrow
+  y as FadeGrow
 };

package/dist/animations/fade-scale/fade-scale.component.js

@@ -2,33 +2,34 @@ import { jsx as o } from "react/jsx-runtime";
 import m from "clsx";
 import { withBaseAnimationDefaults as r } from "../utils/default-props.js";
 import { useAnimationLifecycle as s } from "../hooks/use-animation-lifecycle/use-animation-lifecycle.hook.js";
-import { c } from "../../animation.module-DQXuL9kR.js";
-import { m as d } from "../../proxy-CmTphuYR.js";
-const h = (i) => {
-  const t = r(i), a = s({
-    condition: i.condition,
-    animateOnStart: t.animateOnStart
-  }), e = {
+import { c as d } from "../../animation.module-DQXuL9kR.js";
+import { m as c } from "../../proxy-CmTphuYR.js";
+const S = (n) => {
+  const t = r(n), i = s({
+    condition: n.condition,
+    animateOnStart: t.animateOnStart,
+    onAnimationEnd: t.onAnimationEnd
+  }), a = {
     opacity: 0,
     scale: 0.95
-  }, n = { opacity: 1, scale: 1 };
-  return !a.shouldRender && !t.keepMount ? null : /* @__PURE__ */ o(
+  }, e = { opacity: 1, scale: 1 };
+  return !i.shouldRender && !t.keepMount ? null : /* @__PURE__ */ o(
     "div",
     {
       "data-testid": t["data-testid"] || "animation-fade-scale",
-      className: m(c.Animation, t.className),
+      className: m(d.Animation, t.className),
       children: /* @__PURE__ */ o(
-        d.div,
+        c.div,
         {
-          initial: a.getInitialState(e, n),
-          animate: a.getAnimateState(e, n),
+          initial: i.getInitialState(a, e),
+          animate: i.getAnimateState(a, e),
           transition: {
             ease: t.ease,
             duration: t.duration,
             delay: t.delay,
             type: t.type
           },
-          onAnimationComplete: a.onAnimationComplete,
+          onAnimationComplete: i.onAnimationComplete,
           children: t.children
         },
         t.name
@@ -37,5 +38,5 @@ const h = (i) => {
   );
 };
 export {
-  h as FadeScale
+  S as FadeScale
 };

package/dist/animations/fade-slide/fade-slide.component.js

@@ -1,27 +1,28 @@
 import { jsx as a } from "react/jsx-runtime";
-import r from "clsx";
-import { withBaseAnimationDefaults as m } from "../utils/default-props.js";
+import m from "clsx";
+import { withBaseAnimationDefaults as r } from "../utils/default-props.js";
 import { useAnimationLifecycle as d } from "../hooks/use-animation-lifecycle/use-animation-lifecycle.hook.js";
 import { c as s } from "../../animation.module-DQXuL9kR.js";
 import { m as l } from "../../proxy-CmTphuYR.js";
-const S = (o) => {
-  const t = m(o), i = d({
+const h = (o) => {
+  const t = r(o), i = d({
     condition: t.condition,
-    animateOnStart: t.animateOnStart
-  }), e = {
+    animateOnStart: t.animateOnStart,
+    onAnimationEnd: t.onAnimationEnd
+  }), n = {
     x: (t.direction ?? "ltr") === "ltr" ? "-100%" : "100%",
     opacity: 0
-  }, n = { x: 0, opacity: 1 };
+  }, e = { x: 0, opacity: 1 };
   return !i.shouldRender && !t.keepMount ? null : /* @__PURE__ */ a(
     "div",
     {
       "data-testid": t["data-testid"] || "animation-fade-slide",
-      className: r(s.Animation, t.className),
+      className: m(s.Animation, t.className),
       children: /* @__PURE__ */ a(
         l.div,
         {
-          initial: i.getInitialState(e, n),
-          animate: i.getAnimateState(e, n),
+          initial: i.getInitialState(n, e),
+          animate: i.getAnimateState(n, e),
           transition: {
             ease: t.ease,
             duration: t.duration,
@@ -38,5 +39,5 @@ const S = (o) => {
   );
 };
 export {
-  S as FadeSlide
+  h as FadeSlide
 };

package/dist/animations/hooks/use-animation-lifecycle/use-animation-lifecycle.hook.d.ts

@@ -1,9 +1,10 @@
 type UseAnimationLifecycleOptions = {
     condition: boolean;
     animateOnStart: boolean;
+    onAnimationEnd?: (condition: boolean) => void;
 };
 type AnimationState<T, U> = T | U | false;
-export declare const useAnimationLifecycle: ({ condition, animateOnStart }: UseAnimationLifecycleOptions) => {
+export declare const useAnimationLifecycle: ({ condition, animateOnStart, onAnimationEnd }: UseAnimationLifecycleOptions) => {
     shouldRender: boolean;
     getInitialState: <T, U>(hiddenState: T, visibleState: U) => AnimationState<T, U>;
     getAnimateState: <T, U>(hiddenState: T, visibleState: U) => T | U;

package/dist/animations/hooks/use-animation-lifecycle/use-animation-lifecycle.hook.js

@@ -1,31 +1,31 @@
-import { useState as i, useRef as c, useEffect as s } from "react";
-const S = ({ condition: e, animateOnStart: m }) => {
-  const [a, o] = i(m), [n, u] = i(e || m), f = c(e);
-  return s(() => {
-    f.current = e;
-  }, [e]), s(() => {
-    if (!a) {
+import { useState as f, useRef as l, useEffect as m } from "react";
+const g = ({ condition: e, animateOnStart: u, onAnimationEnd: i }) => {
+  const [r, o] = f(u), [a, c] = f(e || u), n = l(e);
+  return m(() => {
+    n.current = e;
+  }, [e]), m(() => {
+    if (!r) {
       const t = requestAnimationFrame(() => {
         o(!0);
       });
       return () => cancelAnimationFrame(t);
     }
-  }, [a]), s(() => {
-    if (e && !n) {
+  }, [r]), m(() => {
+    if (e && !a) {
       const t = requestAnimationFrame(() => {
-        u(!0);
+        c(!0);
       });
       return () => cancelAnimationFrame(t);
     }
-  }, [e, n]), {
-    shouldRender: n,
-    getInitialState: (t, r) => a ? e ? t : r : !1,
-    getAnimateState: (t, r) => e ? r : t,
+  }, [e, a]), {
+    shouldRender: a,
+    getInitialState: (t, s) => r ? e ? t : s : !1,
+    getAnimateState: (t, s) => e ? s : t,
     onAnimationComplete: () => {
-      f.current || u(!1);
+      n.current || c(!1), i?.(n.current);
     }
   };
 };
 export {
-  S as useAnimationLifecycle
+  g as useAnimationLifecycle
 };

package/dist/animations/rotate/rotate.component.js

@@ -1,26 +1,26 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as d } from "react/jsx-runtime";
 import { useRef as f, useState as l, useEffect as u } from "react";
 import { withBaseAnimationDefaults as p } from "../utils/default-props.js";
 import { m as R } from "../../proxy-CmTphuYR.js";
-const n = {
+const i = {
   top: 0,
   right: 90,
   bottom: 180,
   left: 270
-}, C = (a) => {
-  const t = p(a), o = f(t.condition), [e, r] = l(t.animateOnStart), i = `${n[t.from ?? "left"]}deg`, s = `${n[t.to ?? "top"]}deg`, c = (e ? t.condition : !1) ? s : i;
+}, y = (a) => {
+  const t = p(a), e = f(t.condition), [o, r] = l(t.animateOnStart), n = `${i[t.from ?? "left"]}deg`, s = `${i[t.to ?? "top"]}deg`, c = (o ? t.condition : !1) ? s : n;
   return u(() => {
-    if (o.current !== t.condition && (o.current = t.condition, !e)) {
-      const d = requestAnimationFrame(() => {
+    if (e.current !== t.condition && (e.current = t.condition, !o)) {
+      const m = requestAnimationFrame(() => {
         r(!0);
       });
-      return () => cancelAnimationFrame(d);
+      return () => cancelAnimationFrame(m);
     }
-  }, [t.condition, e]), /* @__PURE__ */ m(
+  }, [t.condition, o]), /* @__PURE__ */ d(
     R.div,
     {
       "data-testid": t["data-testid"] || "animation-rotate",
-      initial: { rotate: i },
+      initial: { rotate: n },
       animate: { rotate: c },
       transition: {
         ease: t.ease,
@@ -29,11 +29,12 @@ const n = {
         type: t.type
       },
       className: t.className,
+      onAnimationComplete: () => t.onAnimationEnd?.(t.condition),
       children: t.children
     },
     t.name
   );
 };
 export {
-  C as Rotate
+  y as Rotate
 };

package/dist/animations/utils/types.d.ts

@@ -9,6 +9,7 @@ export interface BaseAnimationProps extends PropsWithChildren<Base> {
     ease?: EasingDefinition;
     duration?: number;
     delay?: number;
+    onAnimationEnd?: (condition: boolean) => void;
 }
 export interface BaseFadeAnimationProps extends BaseAnimationProps {
     keepMount?: boolean;

package/dist/components/accordion-table/accordion-table.component.js

@@ -1,14 +1,15 @@
-import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
 import { useState as H, Fragment as p } from "react";
 import { ChevronDown as B } from "lucide-react";
 import s from "clsx";
 import { FadeGrow as g } from "../../animations/fade-grow/fade-grow.component.js";
 import { Rotate as C } from "../../animations/rotate/rotate.component.js";
 import { baseProps as _ } from "../../utils/functions/functions.util.js";
+import "../../utils/content/content.component.js";
 import "usehooks-ts";
 import "../../controls/primitives/box/box.component.js";
 import { ButtonText as w } from "../../controls/buttons/button-text/button-text.component.js";
-import '../../assets/accordion-table-Ci3u6qTN.css';const b = "_AccordionTable_gmtv3_1", $ = "_Head_gmtv3_11", u = "_HeadRow_gmtv3_15", R = "_DataRow_gmtv3_16", f = "_BodyRow_gmtv3_21", N = "_HeadCell_gmtv3_25", A = "_BodyCell_gmtv3_26", T = "_BodyHeadCell_gmtv3_41", D = "_BodyHead_gmtv3_41", t = {
+import '../../assets/accordion-table-Ci3u6qTN.css';const b = "_AccordionTable_gmtv3_1", $ = "_Head_gmtv3_11", u = "_HeadRow_gmtv3_15", R = "_DataRow_gmtv3_16", f = "_BodyRow_gmtv3_21", N = "_HeadCell_gmtv3_25", A = "_BodyCell_gmtv3_26", T = "_BodyHeadCell_gmtv3_41", D = "_BodyHead_gmtv3_41", a = {
   AccordionTable: b,
   Head: $,
   HeadRow: u,
@@ -18,26 +19,26 @@ import '../../assets/accordion-table-Ci3u6qTN.css';const b = "_AccordionTable_gm
   BodyCell: A,
   BodyHeadCell: T,
   BodyHead: D
-}, E = ({ table: d, active: l = 0, ...r }) => {
+}, J = ({ table: d, active: l = 0, ...c }) => {
   const [m, h] = H(l >= 0 && l < d.body.length ? l : null);
   return /* @__PURE__ */ n(
     "div",
     {
-      "data-testid": _(r, "data-testid", "accordion-table"),
-      className: s(t.AccordionTable, _(r, "className")),
+      "data-testid": _(c, "data-testid", "accordion-table"),
+      className: s(a.AccordionTable, _(c, "className")),
       style: { "--accordion-columns": Math.max(d.head.length, 1) },
       children: [
-        /* @__PURE__ */ a("div", { "data-testid": "accordion-table-head", className: t.Head, children: /* @__PURE__ */ a("div", { className: t.HeadRow, children: d.head.map((e, o) => /* @__PURE__ */ a(
+        /* @__PURE__ */ t("div", { "data-testid": "accordion-table-head", className: a.Head, children: /* @__PURE__ */ t("div", { className: a.HeadRow, children: d.head.map((e, o) => /* @__PURE__ */ t(
           "div",
           {
-            className: t.HeadCell,
+            className: a.HeadCell,
             "data-testid": `accordion-table-head-cell-${o}`,
             dangerouslySetInnerHTML: { __html: e }
           },
           e
         )) }) }),
-        /* @__PURE__ */ a("div", { children: d.body.map((e, o) => /* @__PURE__ */ n(p, { children: [
-          /* @__PURE__ */ a("div", { className: t.BodyRow, children: /* @__PURE__ */ a("div", { className: s(t.BodyCell, t.BodyHead, t.BodyHeadCell), children: /* @__PURE__ */ a(
+        /* @__PURE__ */ t("div", { children: d.body.map((e, o) => /* @__PURE__ */ n(p, { children: [
+          /* @__PURE__ */ t("div", { className: a.BodyRow, children: /* @__PURE__ */ t("div", { className: s(a.BodyCell, a.BodyHead, a.BodyHeadCell), children: /* @__PURE__ */ t(
             w,
             {
               "data-testid": `accordion-table-button-${o}`,
@@ -48,27 +49,27 @@ import '../../assets/accordion-table-Ci3u6qTN.css';const b = "_AccordionTable_gm
               weight: "regular",
               color: "theme-primary",
               iconPosition: "right",
-              icon: /* @__PURE__ */ a(
+              icon: /* @__PURE__ */ t(
                 C,
                 {
                   name: "rotate-icon",
                   condition: m === o,
                   from: "top",
                   to: "bottom",
-                  children: /* @__PURE__ */ a(B, { size: 24 })
+                  children: /* @__PURE__ */ t(B, { size: 24 })
                 }
               ),
               onClick: () => h((i) => o !== i ? o : null)
             }
           ) }) }),
-          /* @__PURE__ */ a(g, { name: `visible-section-${o}`, condition: m === o, children: /* @__PURE__ */ a("div", { "data-testid": `accordion-table-section-content-${o}`, children: e.rows.map((i, c) => /* @__PURE__ */ a(
+          /* @__PURE__ */ t(g, { name: `visible-section-${o}`, condition: m === o, children: /* @__PURE__ */ t("div", { "data-testid": `accordion-table-section-content-${o}`, children: e.rows.map((i, r) => /* @__PURE__ */ t(
             "div",
             {
-              className: t.DataRow,
-              "data-testid": `accordion-table-data-row-${o}-${c}`,
-              children: i.map((v, y) => /* @__PURE__ */ a("div", { className: t.BodyCell, children: v }, `tr-${o}-${c}-${y}`))
+              className: a.DataRow,
+              "data-testid": `accordion-table-data-row-${o}-${r}`,
+              children: i.map((v, y) => /* @__PURE__ */ t("div", { className: a.BodyCell, children: v }, `tr-${o}-${r}-${y}`))
             },
-            `tr-${o}-${c}`
+            `tr-${o}-${r}`
           )) }) })
         ] }, `${e.title}-${o}`)) })
       ]
@@ -76,5 +77,5 @@ import '../../assets/accordion-table-Ci3u6qTN.css';const b = "_AccordionTable_gm
   );
 };
 export {
-  E as AccordionTable
+  J as AccordionTable
 };

package/dist/components/bottom-bar/bottom-bar.component.js

@@ -5,6 +5,7 @@ import { useResizeObserver as f, useWindowSize as u } from "usehooks-ts";
 import { Text as c } from "../text/text.component.js";
 import { Button as y } from "../../controls/buttons/button/button.component.js";
 import "../../controls/primitives/box/box.component.js";
+import "../../utils/content/content.component.js";
 import { baseProps as d } from "../../utils/functions/functions.util.js";
 import "lucide-react";
 import '../../assets/bottom-bar-DE6QuEjZ.css';const k = "_BottomBar_1pxm3_1", w = "_Fixed_1pxm3_7", R = "_Static_1pxm3_16", z = "_TopBlock_1pxm3_20", L = "_LeftBlock_1pxm3_24", v = "_RightBlock_1pxm3_31", N = "_Message_1pxm3_39", M = "_Button_1pxm3_44", r = {
@@ -37,7 +38,7 @@ import '../../assets/bottom-bar-DE6QuEjZ.css';const k = "_BottomBar_1pxm3_1", w
   size: t.size || "body",
   color: t.color || "text-primary",
   align: t.align || "left"
-}, I = ({ button: o, info: t, message: l, staticFrom: p = 768, ...s }) => {
+}, A = ({ button: o, info: t, message: l, staticFrom: p = 768, ...s }) => {
   const g = x(null), { height: m } = f({
     ref: g,
     box: "border-box"
@@ -101,5 +102,5 @@ import '../../assets/bottom-bar-DE6QuEjZ.css';const k = "_BottomBar_1pxm3_1", w
   );
 };
 export {
-  I as BottomBar
+  A as BottomBar
 };

package/dist/components/dialog-article/dialog-article.component.js

@@ -4,12 +4,13 @@ import { useWindowSize as h, useResizeObserver as x } from "usehooks-ts";
 import b from "clsx";
 import { Button as l } from "../../controls/buttons/button/button.component.js";
 import "../../controls/primitives/box/box.component.js";
+import "../../utils/content/content.component.js";
 import { baseProps as c } from "../../utils/functions/functions.util.js";
 import "lucide-react";
 import '../../assets/dialog-article-BdDXX1FV.css';const A = "_DialogArticle_vv4cw_1", B = "_Buttons_vv4cw_8", n = {
   DialogArticle: A,
   Buttons: B
-}, N = (d) => {
+}, j = (d) => {
   const { children: m, cancel: t, confirm: e, ...i } = d, o = g(null), [u, f] = v(0), { width: p } = h();
   return x({
     ref: o,
@@ -53,5 +54,5 @@ import '../../assets/dialog-article-BdDXX1FV.css';const A = "_DialogArticle_vv4c
   );
 };
 export {
-  N as DialogArticle
+  j as DialogArticle
 };

package/dist/components/sidebar/sidebar.component.js

@@ -6,7 +6,7 @@ import { Line as s } from "../line/line.component.js";
 import { Text as n } from "../text/text.component.js";
 import { UserPanel as w } from "../user-panel/user-panel.component.js";
 import "../../controls/primitives/box/box.component.js";
-import "react";
+import "../../utils/content/content.component.js";
 import { baseProps as f } from "../../utils/functions/functions.util.js";
 import "lucide-react";
 import "usehooks-ts";

package/dist/components/signature/signature.component.js

@@ -5,6 +5,7 @@ import { RefreshCw as Fe, RotateCcw as qe, Check as Be } from "lucide-react";
 import fe from "clsx";
 import { Button as Pe } from "../../controls/buttons/button/button.component.js";
 import "../../controls/primitives/box/box.component.js";
+import "../../utils/content/content.component.js";
 import { baseProps as we } from "../../utils/functions/functions.util.js";
 import { ButtonText as ie } from "../../controls/buttons/button-text/button-text.component.js";
 import { Loader as Ue } from "../loader/loader.component.js";
@@ -1095,7 +1096,7 @@ const ut = /* @__PURE__ */ He(st), ct = "_Signature_1sp4s_1", lt = "_Main_1sp4s_
   AutoPanelLabelText: Ct,
   AutoPanelError: Ot,
   AutoPanelErrorTitle: Rt
-}, Nt = ({
+}, Ft = ({
   // Signature props
   auto: e,
   manual: a,
@@ -1254,5 +1255,5 @@ const ut = /* @__PURE__ */ He(st), ct = "_Signature_1sp4s_1", lt = "_Main_1sp4s_
   );
 };
 export {
-  Nt as Signature
+  Ft as Signature
 };

package/dist/components/text/text.component.d.ts

@@ -9,4 +9,4 @@ export interface TextProps extends HTMLAttributes<HTMLElementTagNameMap>, PropsW
     size?: FontSize;
     color?: FontColor;
 }
-export declare const Text: ({ children, className, preset, lined, align, tag, weight, size, color, ...rest }: TextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Text: import('react').ForwardRefExoticComponent<TextProps & import('react').RefAttributes<HTMLElement>>;

package/dist/components/text/text.component.js

@@ -1,52 +1,53 @@
-import { jsx as G } from "react/jsx-runtime";
-import h from "clsx";
-import { Content as L } from "../../utils/content/content.component.js";
-import '../../assets/text-Bhvd-u-V.css';const x = "_Lined_553v9_1", S = "_Left_553v9_7", u = "_Center_553v9_11", b = "_Right_553v9_15", f = "_Light_553v9_21", T = "_Regular_553v9_25", B = "_Medium_553v9_29", H = "_Bold_553v9_33", w = "_BodyExtraSmall_553v9_39", P = "_BodySmall_553v9_44", R = "_Body_553v9_39", z = "_BodyLarge_553v9_54", A = "_HL1_553v9_59", E = "_HL2_553v9_64", C = "_HL3_553v9_69", k = "_HL4_553v9_74", M = "_HL5_553v9_79", F = "_TextPrimary_553v9_86", $ = "_TextSecondary_553v9_90", N = "_AccentPrimary_553v9_94", j = "_AccentSecondary_553v9_98", W = "_ThemePrimary_553v9_102", q = "_ThemeSecondary_553v9_106", D = "_Success_553v9_114", I = "_Focus_553v9_118", J = "_Link_553v9_122", K = "_Grey950_553v9_126", O = "_Grey900_553v9_130", Q = "_Grey800_553v9_134", U = "_Grey700_553v9_138", V = "_Grey600_553v9_142", X = "_Grey500_553v9_146", Y = "_Grey400_553v9_150", Z = "_Grey300_553v9_154", ee = "_Grey200_553v9_158", re = "_Grey100_553v9_162", te = "_Grey50_553v9_146", e = {
-  Lined: x,
-  Left: S,
-  Center: u,
+import { jsx as h } from "react/jsx-runtime";
+import { forwardRef as L } from "react";
+import x from "clsx";
+import { Content as S } from "../../utils/content/content.component.js";
+import '../../assets/text-Bhvd-u-V.css';const f = "_Lined_553v9_1", u = "_Left_553v9_7", T = "_Center_553v9_11", b = "_Right_553v9_15", B = "_Light_553v9_21", H = "_Regular_553v9_25", w = "_Medium_553v9_29", R = "_Bold_553v9_33", P = "_BodyExtraSmall_553v9_39", z = "_BodySmall_553v9_44", A = "_Body_553v9_39", E = "_BodyLarge_553v9_54", C = "_HL1_553v9_59", k = "_HL2_553v9_64", M = "_HL3_553v9_69", F = "_HL4_553v9_74", $ = "_HL5_553v9_79", N = "_TextPrimary_553v9_86", j = "_TextSecondary_553v9_90", W = "_AccentPrimary_553v9_94", q = "_AccentSecondary_553v9_98", D = "_ThemePrimary_553v9_102", I = "_ThemeSecondary_553v9_106", J = "_Success_553v9_114", K = "_Focus_553v9_118", O = "_Link_553v9_122", Q = "_Grey950_553v9_126", U = "_Grey900_553v9_130", V = "_Grey800_553v9_134", X = "_Grey700_553v9_138", Y = "_Grey600_553v9_142", Z = "_Grey500_553v9_146", ee = "_Grey400_553v9_150", re = "_Grey300_553v9_154", te = "_Grey200_553v9_158", oe = "_Grey100_553v9_162", ye = "_Grey50_553v9_146", e = {
+  Lined: f,
+  Left: u,
+  Center: T,
   Right: b,
-  Light: f,
-  Regular: T,
-  Medium: B,
-  Bold: H,
-  BodyExtraSmall: w,
-  BodySmall: P,
-  Body: R,
-  BodyLarge: z,
-  HL1: A,
-  HL2: E,
-  HL3: C,
-  HL4: k,
-  HL5: M,
-  TextPrimary: F,
-  TextSecondary: $,
-  AccentPrimary: N,
-  AccentSecondary: j,
-  ThemePrimary: W,
-  ThemeSecondary: q,
+  Light: B,
+  Regular: H,
+  Medium: w,
+  Bold: R,
+  BodyExtraSmall: P,
+  BodySmall: z,
+  Body: A,
+  BodyLarge: E,
+  HL1: C,
+  HL2: k,
+  HL3: M,
+  HL4: F,
+  HL5: $,
+  TextPrimary: N,
+  TextSecondary: j,
+  AccentPrimary: W,
+  AccentSecondary: q,
+  ThemePrimary: D,
+  ThemeSecondary: I,
   Error: "_Error_553v9_110",
-  Success: D,
-  Focus: I,
-  Link: J,
-  Grey950: K,
-  Grey900: O,
-  Grey800: Q,
-  Grey700: U,
-  Grey600: V,
-  Grey500: X,
-  Grey400: Y,
-  Grey300: Z,
-  Grey200: ee,
-  Grey100: re,
-  Grey50: te
-}, oe = {
+  Success: J,
+  Focus: K,
+  Link: O,
+  Grey950: Q,
+  Grey900: U,
+  Grey800: V,
+  Grey700: X,
+  Grey600: Y,
+  Grey500: Z,
+  Grey400: ee,
+  Grey300: re,
+  Grey200: te,
+  Grey100: oe,
+  Grey50: ye
+}, ne = {
   "page-info": { tag: "p", weight: "light", size: "body", color: "text-secondary" },
   "page-subtitle": { tag: "h6", weight: "regular", size: "body", color: "text-primary" },
   "page-title": { tag: "h1", weight: "bold", size: "hl1", color: "text-primary" },
   "sidebar-title": { tag: "h3", weight: "bold", size: "hl3", color: "text-primary" },
   "step-title": { tag: "h2", weight: "bold", size: "hl4", color: "text-primary" }
-}, _e = ({
+}, ce = L(({
   children: m,
   className: g,
   preset: y,
@@ -57,10 +58,10 @@ import '../../assets/text-Bhvd-u-V.css';const x = "_Lined_553v9_1", S = "_Left_5
   size: a = "body",
   color: s = "text-primary",
   ...l
-}) => {
+}, p) => {
   let d = _, n = i, t = a, r = s;
   if (y) {
-    const o = oe[y];
+    const o = ne[y];
     _ !== "p" && _ !== o.tag && console.warn(
       `Text component: 'tag' prop will be overridden by 'preset="${y}"'. Remove explicit 'tag' prop if not intended.`
     ), i !== "regular" && i !== o.weight && console.warn(
@@ -71,7 +72,7 @@ import '../../assets/text-Bhvd-u-V.css';const x = "_Lined_553v9_1", S = "_Left_5
       `Text component: 'color' prop will be overridden by 'preset="${y}"'. Remove explicit 'color' prop if not intended.`
     ), d = o.tag, n = o.weight, t = o.size, r = o.color;
   }
-  const p = h(g, {
+  const G = x(g, {
     [e.Lined]: v,
     // ALIGNMENTS
     [e.Left]: c === "left",
@@ -115,18 +116,20 @@ import '../../assets/text-Bhvd-u-V.css';const x = "_Lined_553v9_1", S = "_Left_5
     [e.Grey100]: r === "grey-100",
     [e.Grey50]: r === "grey-50"
   });
-  return /* @__PURE__ */ G(
-    L,
+  return /* @__PURE__ */ h(
+    S,
     {
+      ref: p,
       "data-testid": l["data-testid"] || "content",
       tag: d,
       alwaysRender: !1,
-      className: p,
+      className: G,
       ...l,
       children: m
     }
   );
-};
+});
+ce.displayName = "Text";
 export {
-  _e as Text
+  ce as Text
 };

package/dist/components/user-panel/user-panel.component.js

@@ -3,6 +3,7 @@ import { Pencil as d } from "lucide-react";
 import p from "clsx";
 import "react";
 import { baseProps as o } from "../../utils/functions/functions.util.js";
+import "../../utils/content/content.component.js";
 import "usehooks-ts";
 import "../../controls/primitives/box/box.component.js";
 import { ButtonText as f } from "../../controls/buttons/button-text/button-text.component.js";
@@ -10,18 +11,18 @@ import '../../assets/user-panel-SauszbHl.css';const _ = "_UserPanel_zes0v_1", u
   UserPanel: _,
   Head: u,
   Info: P
-}, j = ({ title: a, button: i, data: n, onClick: l, ...r }) => /* @__PURE__ */ s(
+}, b = ({ title: i, button: a, data: n, onClick: l, ...r }) => /* @__PURE__ */ s(
   "div",
   {
     "data-testid": o(r, "data-testid", "user-panel"),
     className: p(t.UserPanel, o(r, "className")),
     children: [
       /* @__PURE__ */ s("div", { className: t.Head, children: [
-        /* @__PURE__ */ e("span", { "data-testid": "user-panel-title", children: a }),
+        /* @__PURE__ */ e("span", { "data-testid": "user-panel-title", children: i }),
         /* @__PURE__ */ e(
           f,
           {
-            text: i,
+            text: a,
             preventDefault: !0,
             blurAfterClick: !0,
             icon: /* @__PURE__ */ e(d, {}),
@@ -37,5 +38,5 @@ import '../../assets/user-panel-SauszbHl.css';const _ = "_UserPanel_zes0v_1", u
   }
 );
 export {
-  j as UserPanel
+  b as UserPanel
 };

package/dist/controls/buttons/button-card/button-card.component.js

@@ -5,7 +5,8 @@ import L from "clsx";
 import { Box as N } from "../../primitives/box/box.component.js";
 import { Caption as h } from "../../primitives/caption/caption.component.js";
 import "lucide-react";
-import { baseProps as i } from "../../../utils/functions/functions.util.js";
+import { baseProps as l } from "../../../utils/functions/functions.util.js";
+import "../../../utils/content/content.component.js";
 import { Svg as y } from "../../../utils/svg/svg.component.js";
 import '../../../assets/button-card-B-nlEbJU.css';const F = "_ButtonCard_10os6_1", j = "_Icon_10os6_10", z = "_IconTop_10os6_14", D = "_Text_10os6_21", H = "_IconLeft_10os6_25", o = {
   ButtonCard: F,
@@ -13,7 +14,7 @@ import '../../../assets/button-card-B-nlEbJU.css';const F = "_ButtonCard_10os6_1
   IconTop: z,
   Text: D,
   IconLeft: H
-}, J = (f) => {
+}, K = (f) => {
   const {
     text: u,
     textSize: m = "body",
@@ -32,12 +33,12 @@ import '../../../assets/button-card-B-nlEbJU.css';const F = "_ButtonCard_10os6_1
   return /* @__PURE__ */ t(
     N,
     {
-      "data-testid": i(c, "data-testid", "button-card"),
+      "data-testid": l(c, "data-testid", "button-card"),
       ref: r,
       checked: n || T,
       state: "idle",
       focused: C,
-      className: i(c, "className"),
+      className: l(c, "className"),
       children: /* @__PURE__ */ B(
         "button",
         {
@@ -47,8 +48,8 @@ import '../../../assets/button-card-B-nlEbJU.css';const F = "_ButtonCard_10os6_1
             [o.IconTop]: e === "top",
             [o.IconLeft]: e === "left"
           }),
-          onClick: (l) => {
-            d && l.preventDefault(), _ && l.currentTarget.blur(), x?.();
+          onClick: (i) => {
+            d && i.preventDefault(), _ && i.currentTarget.blur(), x?.();
           },
           onFocus: () => {
             a(), I?.();
@@ -76,5 +77,5 @@ import '../../../assets/button-card-B-nlEbJU.css';const F = "_ButtonCard_10os6_1
   );
 };
 export {
-  J as ButtonCard
+  K as ButtonCard
 };

package/dist/controls/buttons/button-radio/button-radio.component.js

@@ -6,6 +6,7 @@ import { Caption as H } from "../../primitives/caption/caption.component.js";
 import "lucide-react";
 import "clsx";
 import { baseProps as d } from "../../../utils/functions/functions.util.js";
+import "../../../utils/content/content.component.js";
 import { Status as C } from "../../primitives/status/status.component.js";
 import '../../../assets/button-radio-CPeNePW2.css';const T = "_ButtonRadio_iwy6t_1", b = "_Row_iwy6t_14", v = "_Wrap_iwy6t_23", W = "_Content_iwy6t_32", k = "_Text_iwy6t_42", L = "_Hint_iwy6t_50", t = {
   ButtonRadio: T,
@@ -14,7 +15,7 @@ import '../../../assets/button-radio-CPeNePW2.css';const T = "_ButtonRadio_iwy6t
   Content: W,
   Text: k,
   Hint: L
-}, E = ({
+}, G = ({
   text: m,
   textSize: u = "body",
   active: n = !1,
@@ -81,5 +82,5 @@ import '../../../assets/button-radio-CPeNePW2.css';const T = "_ButtonRadio_iwy6t
   );
 };
 export {
-  E as ButtonRadio
+  G as ButtonRadio
 };

package/dist/controls/interactives/card-image/card-image.component.js

@@ -3,7 +3,7 @@ import b from "clsx";
 import { Box as j } from "../../primitives/box/box.component.js";
 import { Caption as z } from "../../primitives/caption/caption.component.js";
 import { Choice as $ } from "../../primitives/choice/choice.component.js";
-import "react";
+import "../../../utils/content/content.component.js";
 import { baseProps as C } from "../../../utils/functions/functions.util.js";
 import { HiddenInput as F } from "../../primitives/hidden-input/hidden-input.component.js";
 import { RadioLabel as H } from "../../primitives/radio-label/radio-label.component.js";

package/dist/controls/interactives/card-text/card-text.component.js

@@ -3,7 +3,7 @@ import I from "clsx";
 import { Box as j } from "../../primitives/box/box.component.js";
 import { Caption as y } from "../../primitives/caption/caption.component.js";
 import { Choice as z } from "../../primitives/choice/choice.component.js";
-import "react";
+import "../../../utils/content/content.component.js";
 import { baseProps as d } from "../../../utils/functions/functions.util.js";
 import { HiddenInput as B } from "../../primitives/hidden-input/hidden-input.component.js";
 import { RadioLabel as $ } from "../../primitives/radio-label/radio-label.component.js";

package/dist/controls/interactives/checkbox/checkbox.component.js

@@ -4,6 +4,7 @@ import { useHover as N } from "usehooks-ts";
 import p from "clsx";
 import { FadeSlide as S } from "../../../animations/fade-slide/fade-slide.component.js";
 import "../../primitives/box/box.component.js";
+import "../../../utils/content/content.component.js";
 import { baseProps as _ } from "../../../utils/functions/functions.util.js";
 import { Choice as v } from "../../primitives/choice/choice.component.js";
 import { ErrorMessage as F } from "../../primitives/error-message/error-message.component.js";
@@ -19,7 +20,7 @@ import '../../../assets/checkbox-bwnjS9qO.css';const H = "_Checkbox_d6btg_1", I
   Body: R,
   BodySmall: T,
   ErrorMessage: q
-}, Z = ({
+}, oo = ({
   // Interactive props
   id: t,
   value: r = !1,
@@ -31,11 +32,11 @@ import '../../../assets/checkbox-bwnjS9qO.css';const H = "_Checkbox_d6btg_1", I
   // Checkbox props
   iconSize: x = "md",
   textSize: a = "body-small",
-  message: l = "",
+  message: m = "",
   // PropsWithChildren
   children: y,
   // Base props
-  ...m
+  ...l
 }) => {
   const d = M(null), k = N(d), { focused: i, emitChange: h, handleFocus: B, handleBlur: u } = $({
     id: t,
@@ -44,7 +45,7 @@ import '../../../assets/checkbox-bwnjS9qO.css';const H = "_Checkbox_d6btg_1", I
     onFocus: f,
     onBlur: g
   });
-  return /* @__PURE__ */ b("div", { "data-testid": _(m, "data-testid", "checkbox"), className: p(o.Checkbox, _(m, "className")), children: [
+  return /* @__PURE__ */ b("div", { "data-testid": _(l, "data-testid", "checkbox"), className: p(o.Checkbox, _(l, "className")), children: [
     /* @__PURE__ */ b(
       "label",
       {
@@ -97,9 +98,9 @@ import '../../../assets/checkbox-bwnjS9qO.css';const H = "_Checkbox_d6btg_1", I
         ]
       }
     ),
-    /* @__PURE__ */ e(S, { name: "text-message", condition: n === "error" && !!l, children: /* @__PURE__ */ e(F, { text: l, className: o.ErrorMessage }) })
+    /* @__PURE__ */ e(S, { name: "text-message", condition: n === "error" && !!m, children: /* @__PURE__ */ e(F, { text: m, className: o.ErrorMessage }) })
   ] });
 };
 export {
-  Z as Checkbox
+  oo as Checkbox
 };

package/dist/controls/interactives/dropdown/dropdown.component.js

@@ -7,6 +7,7 @@ import { Button as J } from "../../buttons/button/button.component.js";
 import { Box as R } from "../../primitives/box/box.component.js";
 import { Caption as x } from "../../primitives/caption/caption.component.js";
 import { Choice as Q } from "../../primitives/choice/choice.component.js";
+import "../../../utils/content/content.component.js";
 import { baseProps as H } from "../../../utils/functions/functions.util.js";
 import { Label as U } from "../../primitives/label/label.component.js";
 import { clickHasNode as X } from "../../utils/functions/functions.util.js";
@@ -29,7 +30,7 @@ import '../../../assets/dropdown-DLhCAHEx.css';const Z = "_Dropdown_1kidn_1", ee
   Choices: me,
   Choice: Ce,
   ChoiceNoResult: pe
-}, He = ({
+}, ze = ({
   choices: v = [],
   value: d = [],
   label: z = "",
@@ -123,5 +124,5 @@ import '../../../assets/dropdown-DLhCAHEx.css';const Z = "_Dropdown_1kidn_1", ee
   );
 };
 export {
-  He as Dropdown
+  ze as Dropdown
 };

package/dist/controls/interactives/radio/radio.component.js

@@ -6,7 +6,7 @@ import { Caption as I } from "../../primitives/caption/caption.component.js";
 import { Choice as V } from "../../primitives/choice/choice.component.js";
 import { ErrorMessage as y } from "../../primitives/error-message/error-message.component.js";
 import { HiddenInput as F } from "../../primitives/hidden-input/hidden-input.component.js";
-import "react";
+import "../../../utils/content/content.component.js";
 import { baseProps as _ } from "../../../utils/functions/functions.util.js";
 import { RadioLabel as j } from "../../primitives/radio-label/radio-label.component.js";
 import "lucide-react";

package/dist/controls/interactives/text-area/text-area.component.js

@@ -2,7 +2,7 @@ import { jsxs as M, jsx as r } from "react/jsx-runtime";
 import N from "clsx";
 import { FadeSlide as _ } from "../../../animations/fade-slide/fade-slide.component.js";
 import { Box as I } from "../../primitives/box/box.component.js";
-import "react";
+import "../../../utils/content/content.component.js";
 import { baseProps as t } from "../../../utils/functions/functions.util.js";
 import "lucide-react";
 import { ErrorMessage as C } from "../../primitives/error-message/error-message.component.js";

package/dist/controls/interactives/text-field/text-field.component.js

@@ -4,11 +4,12 @@ import { useBoolean as f } from "usehooks-ts";
 import { FadeScale as v } from "../../../animations/fade-scale/fade-scale.component.js";
 import { FadeSlide as L } from "../../../animations/fade-slide/fade-slide.component.js";
 import { Box as $ } from "../../primitives/box/box.component.js";
-import "react";
+import "../../../utils/content/content.component.js";
 import { baseProps as u } from "../../../utils/functions/functions.util.js";
 import "lucide-react";
 import { ErrorMessage as k } from "../../primitives/error-message/error-message.component.js";
 import { Label as C } from "../../primitives/label/label.component.js";
+import "react";
 import { Input as j } from "../input/input.component.js";
 import '../../../assets/text-field-ycFvAkxr.css';const D = "_TextField_diews_1", O = "_Box_diews_10", q = "_Content_diews_14", y = "_Label_diews_30", z = "_Idle_diews_40", G = "_Active_diews_45", H = "_Placeholder_diews_50", J = "_PlaceholderText_diews_57", K = "_ErrorMessage_diews_65", Q = "_Input_diews_69", R = "_MaskStart_diews_73", e = {
   TextField: D,
@@ -22,7 +23,7 @@ import '../../../assets/text-field-ycFvAkxr.css';const D = "_TextField_diews_1",
   ErrorMessage: K,
   Input: Q,
   MaskStart: R
-}, le = ({
+}, ie = ({
   // Interactive props
   id: d,
   value: s = "",
@@ -38,9 +39,9 @@ import '../../../assets/text-field-ycFvAkxr.css';const D = "_TextField_diews_1",
   message: m = "",
   placeholder: _ = "",
   // Base props
-  ...x
+  ...p
 }) => {
-  const { value: p, setTrue: T, setFalse: A } = f(!1), { value: a, setTrue: S, setFalse: b } = f(!1), r = a || !!s || p, B = !i && !!_ && a && !s && !p, N = !!m && l === "error", g = (o) => {
+  const { value: x, setTrue: T, setFalse: A } = f(!1), { value: a, setTrue: S, setFalse: b } = f(!1), r = a || !!s || x, B = !i && !!_ && a && !s && !x, N = !!m && l === "error", g = (o) => {
     S(), I?.(o);
   }, E = (o) => {
     b(), F?.(o);
@@ -48,8 +49,8 @@ import '../../../assets/text-field-ycFvAkxr.css';const D = "_TextField_diews_1",
   return /* @__PURE__ */ n(
     "div",
     {
-      "data-testid": u(x, "data-testid", "text-field"),
-      className: c(e.TextField, u(x, "className")),
+      "data-testid": u(p, "data-testid", "text-field"),
+      className: c(e.TextField, u(p, "className")),
       children: [
         /* @__PURE__ */ n($, { state: l, focused: a, className: e.Box, children: [
           /* @__PURE__ */ t(
@@ -101,5 +102,5 @@ import '../../../assets/text-field-ycFvAkxr.css';const D = "_TextField_diews_1",
   );
 };
 export {
-  le as TextField
+  ie as TextField
 };

package/dist/utils/content/content.component.d.ts

@@ -12,271 +12,5 @@ export interface ContentProps extends HTMLAttributes<HTMLElementTagNameMap> {
  * If the **content** is React nodes, it renders them directly.<br>
  * The **alwaysRender** prop allows rendering an empty tag even if there are no children, which can be useful for layout purposes.
  */
-export declare const Content: ({ tag, alwaysRender, children, ...rest }: ContentProps) => import('react').ReactElement<{
-    defaultChecked?: boolean | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined;
-    suppressHydrationWarning?: boolean | undefined;
-    accessKey?: string | undefined;
-    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
-    autoFocus?: boolean | undefined;
-    className?: string | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextMenu?: string | undefined;
-    dir?: string | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
-    hidden?: boolean | undefined;
-    id?: string | undefined;
-    lang?: string | undefined;
-    nonce?: string | undefined;
-    slot?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    style?: import('react').CSSProperties | undefined;
-    tabIndex?: number | undefined;
-    title?: string | undefined;
-    translate?: "yes" | "no" | undefined;
-    radioGroup?: string | undefined;
-    role?: import('react').AriaRole | undefined;
-    about?: string | undefined;
-    content?: string | undefined;
-    datatype?: string | undefined;
-    inlist?: any;
-    prefix?: string | undefined;
-    property?: string | undefined;
-    rel?: string | undefined;
-    resource?: string | undefined;
-    rev?: string | undefined;
-    typeof?: string | undefined;
-    vocab?: string | undefined;
-    autoCorrect?: string | undefined;
-    autoSave?: string | undefined;
-    color?: string | undefined;
-    itemProp?: string | undefined;
-    itemScope?: boolean | undefined;
-    itemType?: string | undefined;
-    itemID?: string | undefined;
-    itemRef?: string | undefined;
-    results?: number | undefined;
-    security?: string | undefined;
-    unselectable?: "on" | "off" | undefined;
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
-    is?: string | undefined;
-    exportparts?: string | undefined;
-    part?: string | undefined;
-    "aria-activedescendant"?: string | undefined;
-    "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
-    "aria-braillelabel"?: string | undefined;
-    "aria-brailleroledescription"?: string | undefined;
-    "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
-    "aria-colcount"?: number | undefined;
-    "aria-colindex"?: number | undefined;
-    "aria-colindextext"?: string | undefined;
-    "aria-colspan"?: number | undefined;
-    "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
-    "aria-describedby"?: string | undefined;
-    "aria-description"?: string | undefined;
-    "aria-details"?: string | undefined;
-    "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
-    "aria-errormessage"?: string | undefined;
-    "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    "aria-flowto"?: string | undefined;
-    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
-    "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
-    "aria-keyshortcuts"?: string | undefined;
-    "aria-label"?: string | undefined;
-    "aria-labelledby"?: string | undefined;
-    "aria-level"?: number | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined;
-    "aria-modal"?: (boolean | "true" | "false") | undefined;
-    "aria-multiline"?: (boolean | "true" | "false") | undefined;
-    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined;
-    "aria-owns"?: string | undefined;
-    "aria-placeholder"?: string | undefined;
-    "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
-    "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
-    "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined;
-    "aria-rowcount"?: number | undefined;
-    "aria-rowindex"?: number | undefined;
-    "aria-rowindextext"?: string | undefined;
-    "aria-rowspan"?: number | undefined;
-    "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-    "aria-valuemax"?: number | undefined;
-    "aria-valuemin"?: number | undefined;
-    "aria-valuenow"?: number | undefined;
-    "aria-valuetext"?: string | undefined;
-    dangerouslySetInnerHTML?: {
-        __html: string | TrustedHTML;
-    } | undefined;
-    onCopy?: import('react').ClipboardEventHandler<HTMLElementTagNameMap> | undefined;
-    onCopyCapture?: import('react').ClipboardEventHandler<HTMLElementTagNameMap> | undefined;
-    onCut?: import('react').ClipboardEventHandler<HTMLElementTagNameMap> | undefined;
-    onCutCapture?: import('react').ClipboardEventHandler<HTMLElementTagNameMap> | undefined;
-    onPaste?: import('react').ClipboardEventHandler<HTMLElementTagNameMap> | undefined;
-    onPasteCapture?: import('react').ClipboardEventHandler<HTMLElementTagNameMap> | undefined;
-    onCompositionEnd?: import('react').CompositionEventHandler<HTMLElementTagNameMap> | undefined;
-    onCompositionEndCapture?: import('react').CompositionEventHandler<HTMLElementTagNameMap> | undefined;
-    onCompositionStart?: import('react').CompositionEventHandler<HTMLElementTagNameMap> | undefined;
-    onCompositionStartCapture?: import('react').CompositionEventHandler<HTMLElementTagNameMap> | undefined;
-    onCompositionUpdate?: import('react').CompositionEventHandler<HTMLElementTagNameMap> | undefined;
-    onCompositionUpdateCapture?: import('react').CompositionEventHandler<HTMLElementTagNameMap> | undefined;
-    onFocus?: import('react').FocusEventHandler<HTMLElementTagNameMap> | undefined;
-    onFocusCapture?: import('react').FocusEventHandler<HTMLElementTagNameMap> | undefined;
-    onBlur?: import('react').FocusEventHandler<HTMLElementTagNameMap> | undefined;
-    onBlurCapture?: import('react').FocusEventHandler<HTMLElementTagNameMap> | undefined;
-    onChange?: import('react').FormEventHandler<HTMLElementTagNameMap> | undefined;
-    onChangeCapture?: import('react').FormEventHandler<HTMLElementTagNameMap> | undefined;
-    onBeforeInput?: import('react').InputEventHandler<HTMLElementTagNameMap> | undefined;
-    onBeforeInputCapture?: import('react').FormEventHandler<HTMLElementTagNameMap> | undefined;
-    onInput?: import('react').FormEventHandler<HTMLElementTagNameMap> | undefined;
-    onInputCapture?: import('react').FormEventHandler<HTMLElementTagNameMap> | undefined;
-    onReset?: import('react').FormEventHandler<HTMLElementTagNameMap> | undefined;
-    onResetCapture?: import('react').FormEventHandler<HTMLElementTagNameMap> | undefined;
-    onSubmit?: import('react').FormEventHandler<HTMLElementTagNameMap> | undefined;
-    onSubmitCapture?: import('react').FormEventHandler<HTMLElementTagNameMap> | undefined;
-    onInvalid?: import('react').FormEventHandler<HTMLElementTagNameMap> | undefined;
-    onInvalidCapture?: import('react').FormEventHandler<HTMLElementTagNameMap> | undefined;
-    onLoad?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onLoadCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onError?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onErrorCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onKeyDown?: import('react').KeyboardEventHandler<HTMLElementTagNameMap> | undefined;
-    onKeyDownCapture?: import('react').KeyboardEventHandler<HTMLElementTagNameMap> | undefined;
-    onKeyPress?: import('react').KeyboardEventHandler<HTMLElementTagNameMap> | undefined;
-    onKeyPressCapture?: import('react').KeyboardEventHandler<HTMLElementTagNameMap> | undefined;
-    onKeyUp?: import('react').KeyboardEventHandler<HTMLElementTagNameMap> | undefined;
-    onKeyUpCapture?: import('react').KeyboardEventHandler<HTMLElementTagNameMap> | undefined;
-    onAbort?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onAbortCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onCanPlay?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onCanPlayCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onCanPlayThrough?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onCanPlayThroughCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onDurationChange?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onDurationChangeCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onEmptied?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onEmptiedCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onEncrypted?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onEncryptedCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onEnded?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onEndedCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onLoadedData?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onLoadedDataCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onLoadedMetadata?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onLoadedMetadataCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onLoadStart?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onLoadStartCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onPause?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onPauseCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onPlay?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onPlayCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onPlaying?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onPlayingCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onProgress?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onProgressCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onRateChange?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onRateChangeCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onSeeked?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onSeekedCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onSeeking?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onSeekingCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onStalled?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onStalledCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onSuspend?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onSuspendCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onTimeUpdate?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onTimeUpdateCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onVolumeChange?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onVolumeChangeCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onWaiting?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onWaitingCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onAuxClick?: import('react').MouseEventHandler<HTMLElementTagNameMap> | undefined;
-    onAuxClickCapture?: import('react').MouseEventHandler<HTMLElementTagNameMap> | undefined;
-    onClick?: import('react').MouseEventHandler<HTMLElementTagNameMap> | undefined;
-    onClickCapture?: import('react').MouseEventHandler<HTMLElementTagNameMap> | undefined;
-    onContextMenu?: import('react').MouseEventHandler<HTMLElementTagNameMap> | undefined;
-    onContextMenuCapture?: import('react').MouseEventHandler<HTMLElementTagNameMap> | undefined;
-    onDoubleClick?: import('react').MouseEventHandler<HTMLElementTagNameMap> | undefined;
-    onDoubleClickCapture?: import('react').MouseEventHandler<HTMLElementTagNameMap> | undefined;
-    onDrag?: import('react').DragEventHandler<HTMLElementTagNameMap> | undefined;
-    onDragCapture?: import('react').DragEventHandler<HTMLElementTagNameMap> | undefined;
-    onDragEnd?: import('react').DragEventHandler<HTMLElementTagNameMap> | undefined;
-    onDragEndCapture?: import('react').DragEventHandler<HTMLElementTagNameMap> | undefined;
-    onDragEnter?: import('react').DragEventHandler<HTMLElementTagNameMap> | undefined;
-    onDragEnterCapture?: import('react').DragEventHandler<HTMLElementTagNameMap> | undefined;
-    onDragExit?: import('react').DragEventHandler<HTMLElementTagNameMap> | undefined;
-    onDragExitCapture?: import('react').DragEventHandler<HTMLElementTagNameMap> | undefined;
-    onDragLeave?: import('react').DragEventHandler<HTMLElementTagNameMap> | undefined;
-    onDragLeaveCapture?: import('react').DragEventHandler<HTMLElementTagNameMap> | undefined;
-    onDragOver?: import('react').DragEventHandler<HTMLElementTagNameMap> | undefined;
-    onDragOverCapture?: import('react').DragEventHandler<HTMLElementTagNameMap> | undefined;
-    onDragStart?: import('react').DragEventHandler<HTMLElementTagNameMap> | undefined;
-    onDragStartCapture?: import('react').DragEventHandler<HTMLElementTagNameMap> | undefined;
-    onDrop?: import('react').DragEventHandler<HTMLElementTagNameMap> | undefined;
-    onDropCapture?: import('react').DragEventHandler<HTMLElementTagNameMap> | undefined;
-    onMouseDown?: import('react').MouseEventHandler<HTMLElementTagNameMap> | undefined;
-    onMouseDownCapture?: import('react').MouseEventHandler<HTMLElementTagNameMap> | undefined;
-    onMouseEnter?: import('react').MouseEventHandler<HTMLElementTagNameMap> | undefined;
-    onMouseLeave?: import('react').MouseEventHandler<HTMLElementTagNameMap> | undefined;
-    onMouseMove?: import('react').MouseEventHandler<HTMLElementTagNameMap> | undefined;
-    onMouseMoveCapture?: import('react').MouseEventHandler<HTMLElementTagNameMap> | undefined;
-    onMouseOut?: import('react').MouseEventHandler<HTMLElementTagNameMap> | undefined;
-    onMouseOutCapture?: import('react').MouseEventHandler<HTMLElementTagNameMap> | undefined;
-    onMouseOver?: import('react').MouseEventHandler<HTMLElementTagNameMap> | undefined;
-    onMouseOverCapture?: import('react').MouseEventHandler<HTMLElementTagNameMap> | undefined;
-    onMouseUp?: import('react').MouseEventHandler<HTMLElementTagNameMap> | undefined;
-    onMouseUpCapture?: import('react').MouseEventHandler<HTMLElementTagNameMap> | undefined;
-    onSelect?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onSelectCapture?: import('react').ReactEventHandler<HTMLElementTagNameMap> | undefined;
-    onTouchCancel?: import('react').TouchEventHandler<HTMLElementTagNameMap> | undefined;
-    onTouchCancelCapture?: import('react').TouchEventHandler<HTMLElementTagNameMap> | undefined;
-    onTouchEnd?: import('react').TouchEventHandler<HTMLElementTagNameMap> | undefined;
-    onTouchEndCapture?: import('react').TouchEventHandler<HTMLElementTagNameMap> | undefined;
-    onTouchMove?: import('react').TouchEventHandler<HTMLElementTagNameMap> | undefined;
-    onTouchMoveCapture?: import('react').TouchEventHandler<HTMLElementTagNameMap> | undefined;
-    onTouchStart?: import('react').TouchEventHandler<HTMLElementTagNameMap> | undefined;
-    onTouchStartCapture?: import('react').TouchEventHandler<HTMLElementTagNameMap> | undefined;
-    onPointerDown?: import('react').PointerEventHandler<HTMLElementTagNameMap> | undefined;
-    onPointerDownCapture?: import('react').PointerEventHandler<HTMLElementTagNameMap> | undefined;
-    onPointerMove?: import('react').PointerEventHandler<HTMLElementTagNameMap> | undefined;
-    onPointerMoveCapture?: import('react').PointerEventHandler<HTMLElementTagNameMap> | undefined;
-    onPointerUp?: import('react').PointerEventHandler<HTMLElementTagNameMap> | undefined;
-    onPointerUpCapture?: import('react').PointerEventHandler<HTMLElementTagNameMap> | undefined;
-    onPointerCancel?: import('react').PointerEventHandler<HTMLElementTagNameMap> | undefined;
-    onPointerCancelCapture?: import('react').PointerEventHandler<HTMLElementTagNameMap> | undefined;
-    onPointerEnter?: import('react').PointerEventHandler<HTMLElementTagNameMap> | undefined;
-    onPointerLeave?: import('react').PointerEventHandler<HTMLElementTagNameMap> | undefined;
-    onPointerOver?: import('react').PointerEventHandler<HTMLElementTagNameMap> | undefined;
-    onPointerOverCapture?: import('react').PointerEventHandler<HTMLElementTagNameMap> | undefined;
-    onPointerOut?: import('react').PointerEventHandler<HTMLElementTagNameMap> | undefined;
-    onPointerOutCapture?: import('react').PointerEventHandler<HTMLElementTagNameMap> | undefined;
-    onGotPointerCapture?: import('react').PointerEventHandler<HTMLElementTagNameMap> | undefined;
-    onGotPointerCaptureCapture?: import('react').PointerEventHandler<HTMLElementTagNameMap> | undefined;
-    onLostPointerCapture?: import('react').PointerEventHandler<HTMLElementTagNameMap> | undefined;
-    onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLElementTagNameMap> | undefined;
-    onScroll?: import('react').UIEventHandler<HTMLElementTagNameMap> | undefined;
-    onScrollCapture?: import('react').UIEventHandler<HTMLElementTagNameMap> | undefined;
-    onWheel?: import('react').WheelEventHandler<HTMLElementTagNameMap> | undefined;
-    onWheelCapture?: import('react').WheelEventHandler<HTMLElementTagNameMap> | undefined;
-    onAnimationStart?: import('react').AnimationEventHandler<HTMLElementTagNameMap> | undefined;
-    onAnimationStartCapture?: import('react').AnimationEventHandler<HTMLElementTagNameMap> | undefined;
-    onAnimationEnd?: import('react').AnimationEventHandler<HTMLElementTagNameMap> | undefined;
-    onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLElementTagNameMap> | undefined;
-    onAnimationIteration?: import('react').AnimationEventHandler<HTMLElementTagNameMap> | undefined;
-    onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLElementTagNameMap> | undefined;
-    onTransitionEnd?: import('react').TransitionEventHandler<HTMLElementTagNameMap> | undefined;
-    onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLElementTagNameMap> | undefined;
-}, string | import('react').JSXElementConstructor<any>> | null;
+export declare const Content: import('react').ForwardRefExoticComponent<ContentProps & import('react').RefAttributes<HTMLElement>>;
 export {};

package/dist/utils/content/content.component.js

@@ -1,6 +1,9 @@
-import { createElement as e } from "react";
-import { isHtmlString as m } from "../functions/functions.util.js";
-const f = ({ tag: n = "div", alwaysRender: o = !1, children: t, ...r }) => !o && !t ? null : m(t) ? e(n, { dangerouslySetInnerHTML: { __html: t }, ...r }, null) : e(n, r, t);
+import { forwardRef as l, createElement as r } from "react";
+import { isHtmlString as a } from "../functions/functions.util.js";
+const f = l(
+  ({ tag: n = "div", alwaysRender: m = !1, children: t, ...e }, o) => !m && !t ? null : a(t) ? r(n, { dangerouslySetInnerHTML: { __html: t }, ...e, ref: o }, null) : r(n, { ...e, ref: o }, t)
+);
+f.displayName = "Content";
 export {
   f as Content
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arthurzakharov/ui-kit",
   "private": false,
-  "version": "1.8.8",
+  "version": "1.9.0",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",