@arthurzakharov/ui-kit 1.4.4 → 1.4.5

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

@@ -1,33 +1,40 @@
-import { jsx as o } 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 "../hook/use-animation-lifecycle/use-animation-lifecycle.hook.js";
-import { c } from "../../animation.module-DQXuL9kR.js";
-import { m as l } from "../../proxy-Cx6n7mT2.js";
-const A = (a) => {
-  const t = r(a), i = s({
+import { c as d } from "../../animation.module-DQXuL9kR.js";
+import { m as c } from "../../proxy-Cx6n7mT2.js";
+const A = (o) => {
+  const t = r(o), i = s({
     condition: t.condition,
     animateOnStart: t.animateOnStart
-  }), n = {
+  }), a = {
     height: 0,
     opacity: 0
-  }, e = { height: "auto", opacity: 1 };
-  return !i.shouldRender && !t.keepMount ? null : /* @__PURE__ */ o("div", { className: m(c.Animation, t.className), children: /* @__PURE__ */ o(
-    l.div,
+  }, n = { height: "auto", opacity: 1 };
+  return !i.shouldRender && !t.keepMount ? null : /* @__PURE__ */ e(
+    "div",
     {
-      initial: i.getInitialState(n, e),
-      animate: i.getAnimateState(n, e),
-      transition: {
-        ease: t.ease,
-        duration: t.duration,
-        delay: t.delay,
-        type: t.type
-      },
-      onAnimationComplete: i.onAnimationComplete,
-      children: t.children
-    },
-    t.name
-  ) });
+      "data-testid": t["data-testid"] || "animation-fade-grow",
+      className: m(d.Animation, t.className),
+      children: /* @__PURE__ */ e(
+        c.div,
+        {
+          initial: i.getInitialState(a, n),
+          animate: i.getAnimateState(a, n),
+          transition: {
+            ease: t.ease,
+            duration: t.duration,
+            delay: t.delay,
+            type: t.type
+          },
+          onAnimationComplete: i.onAnimationComplete,
+          children: t.children
+        },
+        t.name
+      )
+    }
+  );
 };
 export {
   A as AnimationFadeGrow

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

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

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

@@ -1,34 +1,41 @@
-import { jsx as o } from "react/jsx-runtime";
-import r from "clsx";
-import { withBaseAnimationDefaults as m } from "../utils/default-props.js";
-import { useAnimationLifecycle as l } from "../hook/use-animation-lifecycle/use-animation-lifecycle.hook.js";
+import { jsx as a } from "react/jsx-runtime";
+import m from "clsx";
+import { withBaseAnimationDefaults as r } from "../utils/default-props.js";
+import { useAnimationLifecycle as d } from "../hook/use-animation-lifecycle/use-animation-lifecycle.hook.js";
 import { c as s } from "../../animation.module-DQXuL9kR.js";
-import { m as d } from "../../proxy-Cx6n7mT2.js";
-const A = (a) => {
-  const t = m(a), i = l({
+import { m as l } from "../../proxy-Cx6n7mT2.js";
+const A = (o) => {
+  const t = r(o), i = d({
     condition: t.condition,
     animateOnStart: t.animateOnStart
-  }), n = {
+  }), e = {
     x: (t.direction ?? "ltr") === "ltr" ? "-100%" : "100%",
     opacity: 0
-  }, e = { x: 0, opacity: 1 };
-  return !i.shouldRender && !t.keepMount ? null : /* @__PURE__ */ o("div", { className: r(s.Animation, t.className), children: /* @__PURE__ */ o(
-    d.div,
+  }, n = { x: 0, opacity: 1 };
+  return !i.shouldRender && !t.keepMount ? null : /* @__PURE__ */ a(
+    "div",
     {
-      initial: i.getInitialState(n, e),
-      animate: i.getAnimateState(n, e),
-      transition: {
-        ease: t.ease,
-        duration: t.duration,
-        delay: t.delay,
-        type: t.type
-      },
-      style: { overflow: "hidden" },
-      onAnimationComplete: i.onAnimationComplete,
-      children: t.children
-    },
-    t.name
-  ) });
+      "data-testid": t["data-testid"] || "animation-fade-slide",
+      className: m(s.Animation, t.className),
+      children: /* @__PURE__ */ a(
+        l.div,
+        {
+          initial: i.getInitialState(e, n),
+          animate: i.getAnimateState(e, n),
+          transition: {
+            ease: t.ease,
+            duration: t.duration,
+            delay: t.delay,
+            type: t.type
+          },
+          style: { overflow: "hidden" },
+          onAnimationComplete: i.onAnimationComplete,
+          children: t.children
+        },
+        t.name
+      )
+    }
+  );
 };
 export {
   A as AnimationFadeSlide

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

@@ -2,13 +2,13 @@ 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-Cx6n7mT2.js";
-const i = {
+const n = {
   top: 0,
   right: 90,
   bottom: 180,
   left: 270
 }, C = (a) => {
-  const t = p(a), o = f(t.condition), [e, r] = l(t.animateOnStart), n = `${i[t.from ?? "left"]}deg`, s = `${i[t.to ?? "top"]}deg`, c = (e ? t.condition : !1) ? s : n;
+  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;
   return u(() => {
     if (o.current !== t.condition && (o.current = t.condition, !e)) {
       const m = requestAnimationFrame(() => {
@@ -19,7 +19,8 @@ const i = {
   }, [t.condition, e]), /* @__PURE__ */ d(
     R.div,
     {
-      initial: { rotate: n },
+      "data-testid": t["data-testid"] || "animation-rotate",
+      initial: { rotate: i },
       animate: { rotate: c },
       transition: {
         ease: t.ease,

package/dist/assets/flex-BpQNkmJA.css

@@ -0,0 +1 @@
+._Flex_1a27j_1{display:flex}._Flex_1a27j_1[data-pos=relative]{position:relative}._Flex_1a27j_1[data-pos=absolute]{position:absolute}._Flex_1a27j_1[data-pos=fixed]{position:fixed}._Flex_1a27j_1[data-pos=static]{position:static}._Flex_1a27j_1[data-pos=sticky]{position:sticky}._Flex_1a27j_1[data-fd=row]{flex-direction:row}._Flex_1a27j_1[data-fd=column]{flex-direction:column}._Flex_1a27j_1[data-fxw=wrap]{flex-wrap:wrap}._Flex_1a27j_1[data-fxw=nowrap]{flex-wrap:nowrap}._Flex_1a27j_1[data-gap=xxs]{gap:var(--rm-ui-padding-xxs)}._Flex_1a27j_1[data-gap=xs]{gap:var(--rm-ui-padding-xs)}._Flex_1a27j_1[data-gap=sm]{gap:var(--rm-ui-padding-sm)}._Flex_1a27j_1[data-gap=md]{gap:var(--rm-ui-padding-md)}._Flex_1a27j_1[data-gap=lg]{gap:var(--rm-ui-padding-lg)}._Flex_1a27j_1[data-gap=xl]{gap:var(--rm-ui-padding-xl)}._Flex_1a27j_1[data-gap=xxl]{gap:var(--rm-ui-padding-xxl)}._Flex_1a27j_1[data-gap=xxxl]{gap:var(--rm-ui-padding-xxxl)}._Flex_1a27j_1[data-m=xxs]{margin:var(--rm-ui-padding-xxs)}._Flex_1a27j_1[data-m=xs]{margin:var(--rm-ui-padding-xs)}._Flex_1a27j_1[data-m=sm]{margin:var(--rm-ui-padding-sm)}._Flex_1a27j_1[data-m=md]{margin:var(--rm-ui-padding-md)}._Flex_1a27j_1[data-m=lg]{margin:var(--rm-ui-padding-lg)}._Flex_1a27j_1[data-m=xl]{margin:var(--rm-ui-padding-xl)}._Flex_1a27j_1[data-m=xxl]{margin:var(--rm-ui-padding-xxl)}._Flex_1a27j_1[data-m=xxxl]{margin:var(--rm-ui-padding-xxxl)}._Flex_1a27j_1[data-mt=xxs]{margin-top:var(--rm-ui-padding-xxs)}._Flex_1a27j_1[data-mt=xs]{margin-top:var(--rm-ui-padding-xs)}._Flex_1a27j_1[data-mt=sm]{margin-top:var(--rm-ui-padding-sm)}._Flex_1a27j_1[data-mt=md]{margin-top:var(--rm-ui-padding-md)}._Flex_1a27j_1[data-mt=lg]{margin-top:var(--rm-ui-padding-lg)}._Flex_1a27j_1[data-mt=xl]{margin-top:var(--rm-ui-padding-xl)}._Flex_1a27j_1[data-mt=xxl]{margin-top:var(--rm-ui-padding-xxl)}._Flex_1a27j_1[data-mt=xxxl]{margin-top:var(--rm-ui-padding-xxxl)}._Flex_1a27j_1[data-mb=xxs]{margin-bottom:var(--rm-ui-padding-xxs)}._Flex_1a27j_1[data-mb=xs]{margin-bottom:var(--rm-ui-padding-xs)}._Flex_1a27j_1[data-mb=sm]{margin-bottom:var(--rm-ui-padding-sm)}._Flex_1a27j_1[data-mb=md]{margin-bottom:var(--rm-ui-padding-md)}._Flex_1a27j_1[data-mb=lg]{margin-bottom:var(--rm-ui-padding-lg)}._Flex_1a27j_1[data-mb=xl]{margin-bottom:var(--rm-ui-padding-xl)}._Flex_1a27j_1[data-mb=xxl]{margin-bottom:var(--rm-ui-padding-xxl)}._Flex_1a27j_1[data-mb=xxxl]{margin-bottom:var(--rm-ui-padding-xxxl)}._Flex_1a27j_1[data-ml=xxs]{margin-left:var(--rm-ui-padding-xxs)}._Flex_1a27j_1[data-ml=xs]{margin-left:var(--rm-ui-padding-xs)}._Flex_1a27j_1[data-ml=sm]{margin-left:var(--rm-ui-padding-sm)}._Flex_1a27j_1[data-ml=md]{margin-left:var(--rm-ui-padding-md)}._Flex_1a27j_1[data-ml=lg]{margin-left:var(--rm-ui-padding-lg)}._Flex_1a27j_1[data-ml=xl]{margin-left:var(--rm-ui-padding-xl)}._Flex_1a27j_1[data-ml=xxl]{margin-left:var(--rm-ui-padding-xxl)}._Flex_1a27j_1[data-ml=xxxl]{margin-left:var(--rm-ui-padding-xxxl)}._Flex_1a27j_1[data-mr=xxs]{margin-right:var(--rm-ui-padding-xxs)}._Flex_1a27j_1[data-mr=xs]{margin-right:var(--rm-ui-padding-xs)}._Flex_1a27j_1[data-mr=sm]{margin-right:var(--rm-ui-padding-sm)}._Flex_1a27j_1[data-mr=md]{margin-right:var(--rm-ui-padding-md)}._Flex_1a27j_1[data-mr=lg]{margin-right:var(--rm-ui-padding-lg)}._Flex_1a27j_1[data-mr=xl]{margin-right:var(--rm-ui-padding-xl)}._Flex_1a27j_1[data-mr=xxl]{margin-right:var(--rm-ui-padding-xxl)}._Flex_1a27j_1[data-mr=xxxl]{margin-right:var(--rm-ui-padding-xxxl)}._Flex_1a27j_1[data-mx=xxs]{margin-left:var(--rm-ui-padding-xxs);margin-right:var(--rm-ui-padding-xxs)}._Flex_1a27j_1[data-mx=xs]{margin-left:var(--rm-ui-padding-xs);margin-right:var(--rm-ui-padding-xs)}._Flex_1a27j_1[data-mx=sm]{margin-left:var(--rm-ui-padding-sm);margin-right:var(--rm-ui-padding-sm)}._Flex_1a27j_1[data-mx=md]{margin-left:var(--rm-ui-padding-md);margin-right:var(--rm-ui-padding-md)}._Flex_1a27j_1[data-mx=lg]{margin-left:var(--rm-ui-padding-lg);margin-right:var(--rm-ui-padding-lg)}._Flex_1a27j_1[data-mx=xl]{margin-left:var(--rm-ui-padding-xl);margin-right:var(--rm-ui-padding-xl)}._Flex_1a27j_1[data-mx=xxl]{margin-left:var(--rm-ui-padding-xxl);margin-right:var(--rm-ui-padding-xxl)}._Flex_1a27j_1[data-mx=xxxl]{margin-left:var(--rm-ui-padding-xxxl);margin-right:var(--rm-ui-padding-xxxl)}._Flex_1a27j_1[data-my=xxs]{margin-top:var(--rm-ui-padding-xxs);margin-bottom:var(--rm-ui-padding-xxs)}._Flex_1a27j_1[data-my=xs]{margin-top:var(--rm-ui-padding-xs);margin-bottom:var(--rm-ui-padding-xs)}._Flex_1a27j_1[data-my=sm]{margin-top:var(--rm-ui-padding-sm);margin-bottom:var(--rm-ui-padding-sm)}._Flex_1a27j_1[data-my=md]{margin-top:var(--rm-ui-padding-md);margin-bottom:var(--rm-ui-padding-md)}._Flex_1a27j_1[data-my=lg]{margin-top:var(--rm-ui-padding-lg);margin-bottom:var(--rm-ui-padding-lg)}._Flex_1a27j_1[data-my=xl]{margin-top:var(--rm-ui-padding-xl);margin-bottom:var(--rm-ui-padding-xl)}._Flex_1a27j_1[data-my=xxl]{margin-top:var(--rm-ui-padding-xxl);margin-bottom:var(--rm-ui-padding-xxl)}._Flex_1a27j_1[data-my=xxxl]{margin-top:var(--rm-ui-padding-xxxl);margin-bottom:var(--rm-ui-padding-xxxl)}._Flex_1a27j_1[data-ai=center]{align-items:center}._Flex_1a27j_1[data-ai=start]{align-items:flex-start}._Flex_1a27j_1[data-ai=end]{align-items:flex-end}._Flex_1a27j_1[data-ai=stretch]{align-items:stretch}._Flex_1a27j_1[data-jc=center]{justify-content:center}._Flex_1a27j_1[data-jc=start]{justify-content:flex-start}._Flex_1a27j_1[data-jc=end]{justify-content:flex-end}._Flex_1a27j_1[data-jc=space-between]{justify-content:space-between}@media screen and (min-width:768px){._Flex_1a27j_1[data-fd=row][data-fd-change-after=tablet]{flex-direction:column}._Flex_1a27j_1[data-fd=column][data-fd-change-after=tablet]{flex-direction:row}}@media screen and (min-width:1024px){._Flex_1a27j_1[data-fd=row][data-fd-change-after=laptop]{flex-direction:column}._Flex_1a27j_1[data-fd=column][data-fd-change-after=laptop]{flex-direction:row}}@media screen and (min-width:1200px){._Flex_1a27j_1[data-fd=row][data-fd-change-after=desktop]{flex-direction:column}._Flex_1a27j_1[data-fd=column][data-fd-change-after=desktop]{flex-direction:row}}

package/dist/assets/text-Bhvd-u-V.css

@@ -0,0 +1 @@
+._Lined_553v9_1{text-decoration:underline}._Left_553v9_7{text-align:left}._Center_553v9_11{text-align:center}._Right_553v9_15{text-align:right}._Light_553v9_21{font-weight:var(--rm-ui-font-weight-light)}._Regular_553v9_25{font-weight:var(--rm-ui-font-weight-regular)}._Medium_553v9_29{font-weight:var(--rm-ui-font-weight-medium)}._Bold_553v9_33{font-weight:var(--rm-ui-font-weight-bold)}._BodyExtraSmall_553v9_39{font-size:var(--rm-ui-font-size-body-extra-small);line-height:var(--rm-ui-line-height-body-extra-small)}._BodySmall_553v9_44{font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small)}._Body_553v9_39{font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body)}._BodyLarge_553v9_54{font-size:var(--rm-ui-font-size-body-large);line-height:var(--rm-ui-line-height-body-large)}._HL1_553v9_59{font-size:var(--rm-ui-font-size-hl1);line-height:var(--rm-ui-line-height-hl1)}._HL2_553v9_64{font-size:var(--rm-ui-font-size-hl2);line-height:var(--rm-ui-line-height-hl2)}._HL3_553v9_69{font-size:var(--rm-ui-font-size-hl3);line-height:var(--rm-ui-line-height-hl3)}._HL4_553v9_74{font-size:var(--rm-ui-font-size-hl4);line-height:var(--rm-ui-line-height-hl4)}._HL5_553v9_79{font-size:var(--rm-ui-font-size-hl5);line-height:var(--rm-ui-line-height-hl5)}._TextPrimary_553v9_86{color:var(--rm-ui-color-text-primary)}._TextSecondary_553v9_90{color:var(--rm-ui-color-text-secondary)}._AccentPrimary_553v9_94{color:var(--rm-ui-color-accent-primary)}._AccentSecondary_553v9_98{color:var(--rm-ui-color-accent-secondary)}._ThemePrimary_553v9_102{color:var(--rm-ui-color-theme-primary)}._ThemeSecondary_553v9_106{color:var(--rm-ui-color-theme-secondary)}._Error_553v9_110{color:var(--rm-ui-color-error)}._Success_553v9_114{color:var(--rm-ui-color-success)}._Focus_553v9_118{color:var(--rm-ui-color-focus)}._Link_553v9_122{color:var(--rm-ui-color-link)}._Grey950_553v9_126{color:var(--rm-ui-grey-950)}._Grey900_553v9_130{color:var(--rm-ui-grey-900)}._Grey800_553v9_134{color:var(--rm-ui-grey-800)}._Grey700_553v9_138{color:var(--rm-ui-grey-700)}._Grey600_553v9_142{color:var(--rm-ui-grey-600)}._Grey500_553v9_146{color:var(--rm-ui-grey-500)}._Grey400_553v9_150{color:var(--rm-ui-grey-400)}._Grey300_553v9_154{color:var(--rm-ui-grey-300)}._Grey200_553v9_158{color:var(--rm-ui-grey-200)}._Grey100_553v9_162{color:var(--rm-ui-grey-100)}._Grey50_553v9_146{color:var(--rm-ui-grey-50)}

package/dist/components/accordion-table/accordion-table.component.d.ts

@@ -11,12 +11,5 @@ export interface AccordionTableProps extends Base {
     table: Table;
     active?: number;
 }
-/**
- * 📊 A flexible table component with expandable sections. It renders a table header and a list of collapsible body sections, where each section can be
- * toggled to reveal its rows with smooth animations. The component supports a default active section d and dynamically adapts its column layout based on the provided header configuration.
- *
- * `AccordionTable` renders a table-like layout where body rows are grouped into collapsible sections. It is useful for
- * showing structured fee/value data while keeping long content compact.
- */
 export declare const AccordionTable: ({ table, active, ...base }: AccordionTableProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,11 +1,11 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { useRef as p, useEffect as b, useMemo as x } from "react";
-import f from "clsx";
-import { useResizeObserver as y, useWindowSize as w } from "usehooks-ts";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { useRef as b, useEffect as p, useMemo as u } from "react";
+import y from "clsx";
+import { useResizeObserver as f, useWindowSize as w } from "usehooks-ts";
 import { ControlButton as z } from "../../controls/control-button/control-button.component.js";
 import { Flex as n } from "../flex/flex.component.js";
 import { Text as m } from "../text/text.component.js";
-import '../../assets/bottom-bar-DDgm0BQh.css';const R = "_BottomBar_1ao8k_1", _ = "_BottomBarFixed_1ao8k_7", L = "_BottomBarStatic_1ao8k_16", g = {
+import '../../assets/bottom-bar-DDgm0BQh.css';const R = "_BottomBar_1ao8k_1", _ = "_BottomBarFixed_1ao8k_7", L = "_BottomBarStatic_1ao8k_16", d = {
   BottomBar: R,
   BottomBarFixed: _,
   BottomBarStatic: L
@@ -13,52 +13,52 @@ import '../../assets/bottom-bar-DDgm0BQh.css';const R = "_BottomBar_1ao8k_1", _
   text: o,
   lined: !1,
   weight: t.weight || "regular",
-  size: t.size || "regular",
-  color: t.color || "primary"
+  size: t.size || "body",
+  color: t.color || "text-primary"
 } : {
-  text: o.text || /* @__PURE__ */ r("wbr", {}),
+  text: o.text || /* @__PURE__ */ e("wbr", {}),
   lined: o.lined,
   weight: o.weight || t.weight || "regular",
-  size: o.size || t.size || "regular",
-  color: o.color || t.color || "primary"
+  size: o.size || t.size || "body",
+  color: o.color || t.color || "text-primary"
 } : {
-  text: /* @__PURE__ */ r("wbr", {}),
+  text: /* @__PURE__ */ e("wbr", {}),
   lined: !1,
   weight: t.weight || "regular",
-  size: t.size || "regular",
-  color: t.color || "primary"
-}, W = (o) => {
-  const { button: t, info: i, message: s = "", className: h = "", staticFrom: u = 768 } = o, d = p(null), { height: a } = y({
-    ref: d,
+  size: t.size || "body",
+  color: t.color || "text-primary"
+}, I = (o) => {
+  const { button: t, info: i, message: s = "", className: g = "", staticFrom: x = 768 } = o, h = b(null), { height: a } = f({
+    ref: h,
     box: "border-box"
   }), { width: B } = w({ initializeWithValue: !0, debounceDelay: 150 });
-  b(() => (a ? document.body.style.marginBottom = `${Math.round(a)}px` : document.body.style.removeProperty("margin-bottom"), () => {
+  p(() => (a ? document.body.style.marginBottom = `${Math.round(a)}px` : document.body.style.removeProperty("margin-bottom"), () => {
     document.body.style.removeProperty("margin-bottom");
   }), [a]);
-  const e = x(() => ({
-    topLeft: l(i.topLeft, { weight: "medium", color: "primary" }),
-    topRight: l(i.topRight, { weight: "medium", color: "primary" }),
-    bottomLeft: l(i.bottomLeft, { weight: "regular", color: "secondary" }),
-    bottomRight: l(i.bottomRight, { weight: "regular", color: "secondary" })
+  const r = u(() => ({
+    topLeft: l(i.topLeft, { weight: "medium", color: "text-primary" }),
+    topRight: l(i.topRight, { weight: "medium", color: "text-primary" }),
+    bottomLeft: l(i.bottomLeft, { weight: "regular", color: "text-secondary" }),
+    bottomRight: l(i.bottomRight, { weight: "regular", color: "text-secondary" })
   }), [i]);
   return /* @__PURE__ */ c(
     "div",
     {
-      ref: d,
-      className: f(g.BottomBar, h, B >= u ? g.BottomBarStatic : g.BottomBarFixed),
+      ref: h,
+      className: y(d.BottomBar, g, B >= x ? d.BottomBarStatic : d.BottomBarFixed),
       children: [
         /* @__PURE__ */ c(n, { direction: "row", grow: "equal", children: [
           /* @__PURE__ */ c(n, { direction: "column", align: "start", children: [
-            /* @__PURE__ */ r(m.Tag, { ...e.topLeft, children: e.topLeft.text }),
-            /* @__PURE__ */ r(m.Tag, { ...e.bottomLeft, children: e.bottomLeft.text })
+            /* @__PURE__ */ e(m, { ...r.topLeft, children: r.topLeft.text }),
+            /* @__PURE__ */ e(m, { ...r.bottomLeft, children: r.bottomLeft.text })
           ] }),
           /* @__PURE__ */ c(n, { direction: "column", align: "end", children: [
-            /* @__PURE__ */ r(m.Tag, { ...e.topRight, children: e.topRight.text }),
-            /* @__PURE__ */ r(m.Tag, { ...e.bottomRight, children: e.bottomRight.text })
+            /* @__PURE__ */ e(m, { ...r.topRight, children: r.topRight.text }),
+            /* @__PURE__ */ e(m, { ...r.bottomRight, children: r.bottomRight.text })
           ] })
         ] }),
-        s && /* @__PURE__ */ r(n, { justify: "center", mt: "sm", mb: "md", children: /* @__PURE__ */ r(m.Tag, { color: "secondary", size: "regular", weight: "regular", children: s }) }),
-        /* @__PURE__ */ r(n, { direction: "row", mt: "md", children: /* @__PURE__ */ r(
+        s && /* @__PURE__ */ e(n, { justify: "center", mt: "sm", mb: "md", children: /* @__PURE__ */ e(m, { color: "text-secondary", children: s }) }),
+        /* @__PURE__ */ e(n, { direction: "row", mt: "md", children: /* @__PURE__ */ e(
           z,
           {
             fullWidth: !0,
@@ -75,5 +75,5 @@ import '../../assets/bottom-bar-DDgm0BQh.css';const R = "_BottomBar_1ao8k_1", _
   );
 };
 export {
-  W as BottomBar
+  I as BottomBar
 };

package/dist/components/data-protected-label/data-protected-label.component.d.ts

@@ -1,10 +1,6 @@
-import { Align, Base } from '../../utils/types';
+import { FontAlign, Base } from '../../utils/types';
 interface DataProtectedLabelProps extends Base {
-    text?: string;
-    align?: Align;
+    align?: FontAlign;
 }
-/**
- * Displays a data protection label with a lock icon and optional text, supporting alignment options.
- */
-export declare const DataProtectedLabel: ({ text, align, ...base }: DataProtectedLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataProtectedLabel: ({ align, ...base }: DataProtectedLabelProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/data-protected-label/data-protected-label.component.js

@@ -1,33 +1,29 @@
-import { jsxs as s, jsx as c } from "react/jsx-runtime";
-import { LockKeyhole as i } from "lucide-react";
-import d from "clsx";
+import { jsxs as r, jsx as c } from "react/jsx-runtime";
+import { LockKeyhole as s } from "lucide-react";
+import i from "clsx";
 import { baseProps as o } from "../../utils/functions/functions.util.js";
-import '../../assets/data-protected-label-BN19_NZF.css';const n = "_DataProtectedLabel_1iagf_1", l = "_Left_1iagf_8", _ = "_Center_1iagf_12", f = "_Right_1iagf_16", m = "_Icon_1iagf_20", h = "_Text_1iagf_26", t = {
-  DataProtectedLabel: n,
-  Left: l,
-  Center: _,
-  Right: f,
-  Icon: m,
-  Text: h
-}, b = ({
-  text: r = "Höchste Datensicherheit",
-  align: e = "center",
-  ...a
-}) => /* @__PURE__ */ s(
+import '../../assets/data-protected-label-BN19_NZF.css';const d = "_DataProtectedLabel_1iagf_1", n = "_Left_1iagf_8", l = "_Center_1iagf_12", _ = "_Right_1iagf_16", f = "_Icon_1iagf_20", m = "_Text_1iagf_26", t = {
+  DataProtectedLabel: d,
+  Left: n,
+  Center: l,
+  Right: _,
+  Icon: f,
+  Text: m
+}, x = ({ align: e = "center", ...a }) => /* @__PURE__ */ r(
   "div",
   {
     "data-testid": o(a, "data-testid", "data-protected-label"),
-    className: d(t.DataProtectedLabel, o(a, "className"), {
+    className: i(t.DataProtectedLabel, o(a, "className"), {
       [t.Left]: e === "left",
       [t.Center]: e === "center",
       [t.Right]: e === "right"
     }),
     children: [
-      /* @__PURE__ */ c(i, { "data-testid": "data-protected-label-icon", className: t.Icon }),
-      /* @__PURE__ */ c("span", { "data-testid": "data-protected-label-text", className: t.Text, children: r })
+      /* @__PURE__ */ c(s, { "data-testid": "data-protected-label-icon", className: t.Icon }),
+      /* @__PURE__ */ c("span", { "data-testid": "data-protected-label-text", className: t.Text, children: "Höchste Datensicherheit" })
     ]
   }
 );
 export {
-  b as DataProtectedLabel
+  x as DataProtectedLabel
 };

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

@@ -4,7 +4,7 @@ type TagNames = keyof HTMLElementTagNameMap;
 type Position = 'relative' | 'absolute' | 'fixed' | 'static' | 'sticky';
 type Grow = 'content' | 'equal';
 type Direction = 'row' | 'column';
-type Align = 'center' | 'start' | 'end' | 'stretch';
+type FontAlign = 'center' | 'start' | 'end' | 'stretch';
 type Justify = 'center' | 'start' | 'end' | 'space-between';
 type ScreeSize = 'tablet' | 'laptop' | 'desktop';
 export interface FlexProps extends PropsWithChildren, HTMLAttributes<HTMLElementTagNameMap[TagNames]> {
@@ -15,7 +15,7 @@ export interface FlexProps extends PropsWithChildren, HTMLAttributes<HTMLElement
     grow?: Grow;
     direction?: Direction;
     wrap?: boolean;
-    align?: Align;
+    align?: FontAlign;
     justify?: Justify;
     mt?: Size;
     mb?: Size;
@@ -295,16 +295,16 @@ export declare const Flex: (props: FlexProps) => import('react').DetailedReactHT
     'data-fd': Direction;
     'data-fd-change-after': ScreeSize | undefined;
     'data-fxw': string;
-    'data-gap': Size | undefined;
-    'data-ai': Align;
+    'data-gap': "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | undefined;
+    'data-ai': FontAlign;
     'data-jc': Justify;
-    'data-mt': Size | undefined;
-    'data-mb': Size | undefined;
-    'data-ml': Size | undefined;
-    'data-mr': Size | undefined;
-    'data-mx': Size | undefined;
-    'data-my': Size | undefined;
-    'data-m': Size | undefined;
+    'data-mt': "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | undefined;
+    'data-mb': "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | undefined;
+    'data-ml': "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | undefined;
+    'data-mr': "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | undefined;
+    'data-mx': "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | undefined;
+    'data-my': "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | undefined;
+    'data-m': "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | undefined;
     'data-pos': Position | undefined;
     children: (string | number | Iterable<import('react').ReactNode> | import("react/jsx-runtime").JSX.Element)[] | null | undefined;
 }, HTMLElement>;

package/dist/components/flex/flex.component.js

@@ -1,9 +1,9 @@
 import { jsx as v } from "react/jsx-runtime";
 import { createElement as _, Children as m, isValidElement as $ } from "react";
 import B from "clsx";
-import '../../assets/flex-BhK_u9P8.css';const E = "_Flex_ey5ik_1", N = {
+import '../../assets/flex-BpQNkmJA.css';const E = "_Flex_1a27j_1", N = {
   Flex: E
-}, C = (s) => {
+}, D = (s) => {
   const {
     children: e,
     tag: d = "div",
@@ -17,9 +17,9 @@ import '../../assets/flex-BhK_u9P8.css';const E = "_Flex_ey5ik_1", N = {
     justify: f,
     mt: p,
     mb: x,
-    ml: y,
-    mr: g,
-    mx: u,
+    ml: g,
+    mr: u,
+    mx: y,
     my: h,
     m: w,
     changeDirectionAfter: F,
@@ -36,9 +36,9 @@ import '../../assets/flex-BhK_u9P8.css';const E = "_Flex_ey5ik_1", N = {
     "data-jc": f || "start",
     "data-mt": p,
     "data-mb": x,
-    "data-ml": y,
-    "data-mr": g,
-    "data-mx": u,
+    "data-ml": g,
+    "data-mr": u,
+    "data-mx": y,
     "data-my": h,
     "data-m": w,
     "data-pos": l,
@@ -51,5 +51,5 @@ import '../../assets/flex-BhK_u9P8.css';const E = "_Flex_ey5ik_1", N = {
   });
 };
 export {
-  C as Flex
+  D as Flex
 };

package/dist/components/main-attachment/main-attachment.component.js

@@ -1,20 +1,27 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
 import h from "clsx";
 import { AnimationFadeScale as o } from "../../animations/animation-fade-scale/animation-fade-scale.component.js";
-import { Text as a } from "../text/text.component.js";
-import '../../assets/main-attachment-Cw8AP6xv.css';const r = "_MainAttachment_1oa7f_1", s = "_MainAttachmentTitle_1oa7f_5", A = "_MainAttachmentTitleWithSubtitle_1oa7f_9", M = "_MainAttachmentSubtitle_1oa7f_13", i = {
+import { Text as i } from "../text/text.component.js";
+import '../../assets/main-attachment-Cw8AP6xv.css';const r = "_MainAttachment_1oa7f_1", s = "_MainAttachmentTitle_1oa7f_5", A = "_MainAttachmentTitleWithSubtitle_1oa7f_9", M = "_MainAttachmentSubtitle_1oa7f_13", t = {
   MainAttachment: r,
   MainAttachmentTitle: s,
   MainAttachmentTitleWithSubtitle: A,
   MainAttachmentSubtitle: M
-}, b = (c) => {
-  const { children: l, title: e = "", subtitle: n = "" } = c;
-  return /* @__PURE__ */ m("div", { className: i.MainAttachment, children: [
-    e ? /* @__PURE__ */ t("div", { className: h(i.MainAttachmentTitle, { [i.MainAttachmentTitleWithSubtitle]: !!n }), children: /* @__PURE__ */ t(a.PageTitle, { children: e }) }) : null,
-    n ? /* @__PURE__ */ t("div", { className: i.MainAttachmentSubtitle, children: /* @__PURE__ */ t(a.PageSubtitle, { children: n }) }) : null,
-    /* @__PURE__ */ t(o, { name: "attachment-main", condition: !0, animateOnStart: !0, duration: 0.2, delay: 0.1, children: l })
+}, d = (c) => {
+  const { children: l, title: a = "", subtitle: e = "" } = c;
+  return /* @__PURE__ */ m("div", { className: t.MainAttachment, children: [
+    a ? /* @__PURE__ */ n(
+      i,
+      {
+        preset: "page-title",
+        className: h(t.MainAttachmentTitle, { [t.MainAttachmentTitleWithSubtitle]: !!e }),
+        children: a
+      }
+    ) : null,
+    e ? /* @__PURE__ */ n(i, { preset: "page-subtitle", className: t.MainAttachmentSubtitle, children: e }) : null,
+    /* @__PURE__ */ n(o, { name: "attachment-main", condition: !0, animateOnStart: !0, duration: 0.2, delay: 0.1, children: l })
   ] });
 };
 export {
-  b as MainAttachment
+  d as MainAttachment
 };

package/dist/components/message-block/message-block.component.d.ts

@@ -5,8 +5,5 @@ interface MessageBlockProps extends PropsWithChildren<Base> {
     title?: string;
     subtitle?: string;
 }
-/**
- * Displays a message block with optional `emoji`, `title`, `subtitle`, and rich content (`children`).
- */
 export declare const MessageBlock: ({ children, emoji, title, subtitle, ...base }: MessageBlockProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/message-block/message-block.component.js

@@ -1,35 +1,24 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import m from "clsx";
-import { baseProps as r } from "../../utils/functions/functions.util.js";
+import { jsxs as l, jsx as s } from "react/jsx-runtime";
+import n from "clsx";
+import { baseProps as d } from "../../utils/functions/functions.util.js";
 import { Text as o } from "../text/text.component.js";
-import '../../assets/message-block-DG1cePyB.css';const d = "_MessageBlock_14g5p_1", n = "_Emoji_14g5p_7", p = "_Titles_14g5p_12", _ = "_Content_14g5p_18", s = {
-  MessageBlock: d,
-  Emoji: n,
-  Titles: p,
-  Content: _
-}, b = ({ children: g, emoji: i = "", title: t = "", subtitle: a = "", ...c }) => /* @__PURE__ */ l(
+import '../../assets/message-block-DG1cePyB.css';const g = "_MessageBlock_14g5p_1", r = "_Emoji_14g5p_7", _ = "_Titles_14g5p_12", k = "_Content_14g5p_18", e = {
+  MessageBlock: g,
+  Emoji: r,
+  Titles: _,
+  Content: k
+}, b = ({ children: m, emoji: c = "", title: t = "", subtitle: a = "", ...i }) => /* @__PURE__ */ l(
   "div",
   {
-    "data-testid": r(c, "data-testid", "message-block"),
-    className: m(s.MessageBlock, r(c, "className")),
+    "data-testid": d(i, "data-testid", "message-block"),
+    className: n(e.MessageBlock, d(i, "className")),
     children: [
-      i && /* @__PURE__ */ e("div", { "data-testid": "message-block-emoji", className: s.Emoji, children: i }),
-      (t || a) && /* @__PURE__ */ l("div", { "data-testid": "message-block-titles", className: s.Titles, children: [
-        t && /* @__PURE__ */ e(o.Tag, { "data-testid": "message-block-title", tag: "h2", weight: "medium", size: "hl2", color: "primary", children: t }),
-        a && /* @__PURE__ */ e(o.Tag, { "data-testid": "message-block-subtitle", tag: "h6", weight: "regular", size: "regular", color: "secondary", children: a })
+      c && /* @__PURE__ */ s("div", { "data-testid": "message-block-emoji", className: e.Emoji, children: c }),
+      (t || a) && /* @__PURE__ */ l("div", { "data-testid": "message-block-titles", className: e.Titles, children: [
+        t && /* @__PURE__ */ s(o, { "data-testid": "message-block-title", tag: "h2", weight: "medium", size: "hl2", children: t }),
+        a && /* @__PURE__ */ s(o, { "data-testid": "message-block-subtitle", tag: "h6", color: "text-secondary", children: a })
       ] }),
-      /* @__PURE__ */ e(
-        o.Tag,
-        {
-          "data-testid": "message-block-content",
-          tag: "div",
-          weight: "regular",
-          size: "regular",
-          color: "primary",
-          className: s.Content,
-          children: g
-        }
-      )
+      /* @__PURE__ */ s(o, { "data-testid": "message-block-content", tag: "div", className: e.Content, children: m })
     ]
   }
 );