impact-nova 1.7.4 → 1.7.6

package/dist/components/ui/ag-grid-react/headers/components/truncated-text.d.ts

@@ -0,0 +1,15 @@
+interface TruncatedTextProps {
+    text: string;
+    className?: string;
+}
+/**
+ * TruncatedText - Wraps text to 2 lines, shows tooltip when clamped
+ *
+ * Performance note: This component uses useState/useRef but is only instantiated
+ * once per visible header (not per column). With column virtualization, only ~20-30
+ * headers are rendered at a time, so the hook overhead is minimal.
+ *
+ * The tooltip is lazily mounted - only after user hovers AND text is clamped.
+ */
+export declare const TruncatedText: ({ text, className }: TruncatedTextProps) => import("react/jsx-runtime").JSX.Element;
+export default TruncatedText;

package/dist/components/ui/ag-grid-react/headers/components/truncated-text.js

@@ -0,0 +1,27 @@
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { useRef as f, useState as s } from "react";
+import { cn as p } from "../../../../../lib/utils.js";
+import { TooltipProvider as m, Tooltip as T, TooltipTrigger as g, TooltipContent as C } from "../../../tooltip.js";
+const b = ({ text: t, className: o }) => {
+  const r = f(null), [c, i] = s(!1), [l, a] = s(!1), d = () => {
+    if (r.current) {
+      const u = r.current.scrollHeight > r.current.clientHeight;
+      i(u), a(!0);
+    }
+  }, n = p("line-clamp-2 break-words", o);
+  return l && c ? /* @__PURE__ */ e(m, { children: /* @__PURE__ */ h(T, { children: [
+    /* @__PURE__ */ e(g, { asChild: !0, children: /* @__PURE__ */ e("span", { ref: r, className: n, children: t }) }),
+    /* @__PURE__ */ e(C, { side: "bottom", variant: "tertiary", children: /* @__PURE__ */ e("p", { children: t }) })
+  ] }) }) : /* @__PURE__ */ e(
+    "span",
+    {
+      ref: r,
+      className: n,
+      onMouseEnter: d,
+      children: t
+    }
+  );
+};
+export {
+  b as TruncatedText
+};

package/dist/components/ui/ag-grid-react/headers/custom-header-group.js

@@ -1,26 +1,33 @@
 import { jsxs as p, jsx as a } from "react/jsx-runtime";
 import { ChevronRight as m } from "../../../../icons/index.js";
-import { cn as f } from "../../../../lib/utils.js";
-import { HeaderInfo as x } from "./components/header-info.js";
-const b = (n) => {
+import { cn as x } from "../../../../lib/utils.js";
+import { HeaderInfo as f } from "./components/header-info.js";
+import { TruncatedText as u } from "./components/truncated-text.js";
+const y = (t) => {
   const {
-    displayName: i,
-    showInfoIcon: d = !1,
+    displayName: l,
+    showInfoIcon: c = !1,
     columnGroup: e,
-    setExpanded: t
-  } = n, o = e ? e.isExpanded() : !1, r = e ? e.isExpandable() : !1, c = (l) => {
-    l && l.stopPropagation(), t && e && t(!o);
-  }, s = i || "";
-  return !s && d === !1 ? null : /* @__PURE__ */ p(
+    setExpanded: n
+  } = t, o = e ? e.isExpanded() : !1, r = e ? e.isExpandable() : !1, d = (i) => {
+    i && i.stopPropagation(), n && e && n(!o);
+  }, s = l || "";
+  return !s && c === !1 ? null : /* @__PURE__ */ p(
     "div",
     {
       className: "ag-header-group-cell-label ag-sticky-label flex items-center h-full cursor-pointer select-none",
-      onClick: r ? c : void 0,
+      onClick: r ? d : void 0,
       role: "presentation",
       children: [
-        /* @__PURE__ */ a("span", { className: "ag-header-group-text font-semibold text-content", "data-ref": "agLabel", role: "presentation", children: s }),
-        /* @__PURE__ */ a(x, { ...n, className: "ml-1" }),
-        r && /* @__PURE__ */ a("span", { className: f(
+        /* @__PURE__ */ a(
+          u,
+          {
+            text: s,
+            className: "ag-header-group-text font-semibold text-content"
+          }
+        ),
+        /* @__PURE__ */ a(f, { ...t, className: "ml-1" }),
+        r && /* @__PURE__ */ a("span", { className: x(
           "ag-header-icon ag-header-expand-icon ml-[6px] flex items-center justify-center transition-transform duration-200",
           o ? "ag-header-expand-icon-expanded rotate-180" : "ag-header-expand-icon-collapsed"
         ), children: /* @__PURE__ */ a(m, { size: 16, className: "text-content-tertiary" }) })
@@ -29,5 +36,5 @@ const b = (n) => {
   );
 };
 export {
-  b as CustomHeaderGroup
+  y as CustomHeaderGroup
 };

package/dist/components/ui/ag-grid-react/headers/custom-header.js

@@ -1,12 +1,13 @@
-import { jsx as e, jsxs as h, Fragment as V } from "react/jsx-runtime";
+import { jsx as e, jsxs as h, Fragment as T } from "react/jsx-runtime";
 import { useState as A, useEffect as J } from "react";
 import { cn as g } from "../../../../lib/utils.js";
 import { useGridHeader as Q } from "./context/grid-header-context.js";
 import { HeaderInfo as W } from "./components/header-info.js";
 import { Checkbox as X } from "../../checkbox.js";
-import { HeaderSearchInput as Y } from "./header-search-input.js";
-import { useImpactNovaI18n as T } from "../../../../i18n/ImpactNovaI18nContext.js";
-const $ = () => /* @__PURE__ */ h(V, { children: [
+import { TruncatedText as Y } from "./components/truncated-text.js";
+import { HeaderSearchInput as $ } from "./header-search-input.js";
+import { useImpactNovaI18n as V } from "../../../../i18n/ImpactNovaI18nContext.js";
+const ee = () => /* @__PURE__ */ h(T, { children: [
   /* @__PURE__ */ e("span", { className: "sort-asc-icon inline-flex transition-colors text-content-tertiary hover:text-brand-variant-hover", children: /* @__PURE__ */ h(
     "svg",
     {
@@ -49,17 +50,17 @@ const $ = () => /* @__PURE__ */ h(V, { children: [
       children: /* @__PURE__ */ e("path", { d: "M7.85714 10.8967V5.44444H6.42857V10.8967H4.28571L7.14286 14L10 10.8967H7.85714ZM2.85714 0L0 3.10333H2.14286V8.55556H3.57143V3.10333H5.71429L2.85714 0ZM7.85714 10.8967V5.44444H6.42857V10.8967H4.28571L7.14286 14L10 10.8967H7.85714ZM2.85714 0L0 3.10333H2.14286V8.55556H3.57143V3.10333H5.71429L2.85714 0Z", fill: "currentColor" })
     }
   ) })
-] }), ee = ({ api: r }) => {
-  const { t } = T(), [C, H] = A(!1), [S, s] = A(!1);
+] }), te = ({ api: r }) => {
+  const { t } = V(), [C, H] = A(!1), [S, s] = A(!1);
   J(() => {
     if (!r) return;
-    const u = r.getGridOption?.("rowModelType") === "serverSide", p = () => {
+    const m = r.getGridOption?.("rowModelType") === "serverSide", x = () => {
       let l = !1, i = !1;
-      if (u) {
+      if (m) {
         const f = r.getServerSideSelectionState?.();
         if (f) {
-          const { selectAll: c, toggledNodes: b } = f, x = b && b.length > 0;
-          c && !x ? (l = !0, i = !1) : c && x || !c && x ? (l = !1, i = !0) : (l = !1, i = !1);
+          const { selectAll: c, toggledNodes: b } = f, w = b && b.length > 0;
+          c && !w ? (l = !0, i = !1) : c && w || !c && w ? (l = !1, i = !0) : (l = !1, i = !1);
         }
       } else {
         const f = r.getSelectedRows().length, c = r.getDisplayedRowCount();
@@ -67,29 +68,29 @@ const $ = () => /* @__PURE__ */ h(V, { children: [
       }
       H(l), s(i);
     };
-    p();
-    const m = () => {
-      p();
+    x();
+    const u = () => {
+      x();
     };
-    return r.addEventListener("selectionChanged", m), r.addEventListener("modelUpdated", m), () => {
-      r.removeEventListener("selectionChanged", m), r.removeEventListener("modelUpdated", m);
+    return r.addEventListener("selectionChanged", u), r.addEventListener("modelUpdated", u), () => {
+      r.removeEventListener("selectionChanged", u), r.removeEventListener("modelUpdated", u);
     };
   }, [r]);
-  const a = (u) => {
-    u === !0 ? r.selectAll() : r.deselectAll();
+  const a = (m) => {
+    m === !0 ? r.selectAll() : r.deselectAll();
   };
-  return /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(
     X,
     {
       checked: S ? "indeterminate" : C,
-      onCheckedChange: (u) => {
-        a(u);
+      onCheckedChange: (m) => {
+        a(m);
       },
       "aria-label": t("aria.toggleSelection"),
       className: "m-0"
     }
   ) });
-}, de = (r) => {
+}, me = (r) => {
   const {
     displayName: t,
     enableSorting: C,
@@ -97,16 +98,16 @@ const $ = () => /* @__PURE__ */ h(V, { children: [
     progressSort: S,
     column: s,
     api: a,
-    handleInlineSearch: u,
-    handleClearSearchInline: p,
-    onColumnSearchClick: m,
+    handleInlineSearch: m,
+    handleClearSearchInline: x,
+    onColumnSearchClick: u,
     onAdvanceSearchClick: l,
     toggleAdvanceSearch: i,
     isSearchable: f = !1,
     advanceSearchEnabled: c = !1,
     // Select params
     selectOptions: b,
-    isMultiSelect: x,
+    isMultiSelect: w,
     onSelectScrollToBottom: D,
     onSelectSearchChange: P,
     onSelectOpen: _,
@@ -115,7 +116,7 @@ const $ = () => /* @__PURE__ */ h(V, { children: [
     enableSpaceSplitting: B,
     enableBooleanParsing: E,
     enableDateParsing: R
-  } = r, d = Q(), { t: N } = T(), n = s.getColDef(), v = s.getColId(), k = s.isFilterActive(), j = s.getSort(), y = s.getSortIndex(), O = !!j, z = y != null && (y > 0 || a.getColumnState().filter((o) => o.sort).length > 1), G = O && z, I = n?.filter || "agTextColumnFilter", w = I === "agNumberColumnFilter" || (Array.isArray(n?.type) ? n.type.some((o) => o === "number" || o === "numericColumn") : n?.type === "number" || n?.type === "numericColumn");
+  } = r, d = Q(), { t: N } = V(), n = s.getColDef(), v = s.getColId(), k = s.isFilterActive(), j = s.getSort(), y = s.getSortIndex(), O = !!j, z = y != null && (y > 0 || a.getColumnState().filter((o) => o.sort).length > 1), G = O && z, I = n?.filter || "agTextColumnFilter", p = I === "agNumberColumnFilter" || (Array.isArray(n?.type) ? n.type.some((o) => o === "number" || o === "numericColumn") : n?.type === "number" || n?.type === "numericColumn");
   I === "agDateColumnFilter" || (Array.isArray(n?.type) ? n.type.includes("dateColumn") : n?.type);
   const L = a.getGridOption("context")?.activeSearchColumnId === v, M = ![
     "agTextColumnFilter",
@@ -130,7 +131,7 @@ const $ = () => /* @__PURE__ */ h(V, { children: [
   ].includes(n?.filter), F = (o) => {
     o.stopPropagation(), C && S && S(o.shiftKey);
   }, U = (o) => {
-    if (o.stopPropagation(), m && m(r), M) {
+    if (o.stopPropagation(), u && u(r), M) {
       a.showColumnFilter ? a.showColumnFilter(v) : a.showColumnMenu(v);
       return;
     }
@@ -143,18 +144,18 @@ const $ = () => /* @__PURE__ */ h(V, { children: [
     }
   ) });
   return L && d && !M ? /* @__PURE__ */ e(
-    Y,
+    $,
     {
       column: s,
       api: a,
       onClose: () => d.closeSearch(),
-      handleInlineSearch: u,
-      handleClearSearchInline: p ? () => p(r) : void 0,
+      handleInlineSearch: m,
+      handleClearSearchInline: x ? () => x(r) : void 0,
       onAdvanceSearchClick: l,
       toggleAdvanceSearch: i,
       advanceSearchEnabled: c,
       selectOptions: b,
-      isMultiSelect: x,
+      isMultiSelect: w,
       onSelectScrollToBottom: D,
       onSelectSearchChange: P,
       onSelectOpen: _,
@@ -168,7 +169,7 @@ const $ = () => /* @__PURE__ */ h(V, { children: [
     {
       className: g(
         "ag-header-cell-label flex items-center w-full group min-w-0 h-full",
-        w ? "flex-row-reverse" : "flex-row",
+        p ? "flex-row-reverse" : "flex-row",
         // Center the content area if it's a selection column
         n?.headerCheckboxSelection && (!t || t.trim() === "") ? "justify-center" : ""
       ),
@@ -178,24 +179,27 @@ const $ = () => /* @__PURE__ */ h(V, { children: [
           "div",
           {
             className: g(
-              "ag-header-cell-text relative group flex items-center min-w-0 h-full",
+              "ag-header-cell-text relative group flex min-w-0",
+              // Use items-start for non-numeric to allow 2-line text expansion
+              p ? "items-center" : "items-start",
               // Remove flex-1 if we are centering via parent's justify-center
               !(n?.headerCheckboxSelection && (!t || t.trim() === "")) && "flex-1",
-              w ? "flex-row-reverse" : "flex-row",
+              p ? "flex-row-reverse" : "flex-row",
               C ? "sortable cursor-pointer" : ""
             ),
             onClick: C ? F : void 0,
             children: /* @__PURE__ */ h("div", { className: g(
-              "flex items-center min-w-0 h-full",
-              w ? "flex-row-reverse" : "flex-row",
+              "flex min-w-0",
+              // Use items-start for non-numeric to allow 2-line text expansion
+              p ? "flex-row-reverse items-center" : "flex-row items-start",
               // If it's a checkbox-only header, ensure it shrinks to content for centering
-              n?.headerCheckboxSelection && (!t || t.trim() === "") ? "justify-center" : "gap-1 flex-1"
+              n?.headerCheckboxSelection && (!t || t.trim() === "") ? "justify-center items-center" : "gap-1 flex-1"
             ), children: [
-              n?.headerCheckboxSelection && /* @__PURE__ */ e(ee, { api: a }),
-              t && t.trim() !== "" && /* @__PURE__ */ e("span", { className: "block truncate", children: t !== N("gridHeader.selection") && t }),
+              n?.headerCheckboxSelection && /* @__PURE__ */ e(te, { api: a }),
+              t && t.trim() !== "" && t !== N("gridHeader.selection") && /* @__PURE__ */ e(Y, { text: t }),
               t && t.trim() !== "" && K(g(
                 "text-content-tertiary hover:text-brand-variant-hover transition-colors",
-                w ? "mr-1" : "ml-1"
+                p ? "mr-1" : "ml-1"
               ))
             ] })
           }
@@ -205,7 +209,7 @@ const $ = () => /* @__PURE__ */ h(V, { children: [
           {
             className: g(
               "flex items-center shrink-0 group gap-1",
-              w ? "flex-row-reverse" : "flex-row"
+              p ? "flex-row-reverse" : "flex-row"
             ),
             children: [
               C && /* @__PURE__ */ h(
@@ -215,7 +219,7 @@ const $ = () => /* @__PURE__ */ h(V, { children: [
                   onClick: F,
                   children: [
                     G && /* @__PURE__ */ e("span", { className: "ag-sort-order text-[10px] font-bold text-content-tertiary mr-0.5", children: y + 1 }),
-                    /* @__PURE__ */ e("span", { className: "ag-sort-indicator-icon", children: /* @__PURE__ */ e($, {}) })
+                    /* @__PURE__ */ e("span", { className: "ag-sort-indicator-icon", children: /* @__PURE__ */ e(ee, {}) })
                   ]
                 }
               ),
@@ -255,5 +259,5 @@ const $ = () => /* @__PURE__ */ h(V, { children: [
   );
 };
 export {
-  de as CustomHeader
+  me as CustomHeader
 };

package/dist/components/ui/breadcrumb.js

@@ -36,7 +36,7 @@ const W = s.forwardRef(({ className: e, maxWords: t, ...r }, o) => /* @__PURE__
   {
     ref: o,
     className: n(
-      "flex flex-wrap items-center gap-1 text-[14px] font-medium text-secondary-foreground",
+      "flex flex-wrap items-center text-[14px] font-medium text-secondary-foreground",
       e
     ),
     ...r

package/dist/components/ui/button-group.d.ts

@@ -1,4 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
+import { HelperTextPosition } from './types/helper-text.types';
 import * as React from "react";
 /**
  * Button group — IA Design System v3.1 (Figma: Button group).
@@ -15,6 +16,8 @@ export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>,
     isDisabled?: boolean;
     label?: string;
     helperText?: React.ReactNode;
+    /** @default "absolute" */
+    helperTextPosition?: HelperTextPosition;
     isError?: boolean;
     required?: boolean;
     /** Accessible name when no visible `label` is passed */

package/dist/components/ui/button-group.js

@@ -1,9 +1,9 @@
-import { jsxs as f, jsx as c } from "react/jsx-runtime";
-import * as a from "react";
-import { cva as O } from "class-variance-authority";
-import { cn as e } from "../../lib/utils.js";
-import { Info as R } from "../../icons/index.js";
-const A = O("inline-flex", {
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import * as r from "react";
+import { cva as A } from "class-variance-authority";
+import { cn as t } from "../../lib/utils.js";
+import { Info as N } from "../../icons/index.js";
+const H = A("inline-flex", {
   variants: {
     orientation: {
       horizontal: "flex-row",
@@ -20,101 +20,152 @@ const A = O("inline-flex", {
     orientation: "horizontal",
     spacing: "none"
   }
-}), H = a.forwardRef(
+}), M = r.forwardRef(
   ({
-    className: z,
-    orientation: l = "horizontal",
+    className: w,
+    orientation: u = "horizontal",
     spacing: p = "none",
-    value: m,
-    onValueChange: x,
-    isDisabled: b,
-    children: N,
+    value: v,
+    onValueChange: b,
+    isDisabled: h,
+    children: y,
     label: o,
-    helperText: g,
-    isError: n,
-    required: y,
-    "aria-label": S,
-    ...w
-  }, _) => {
-    const s = p === "none", B = l === "horizontal", I = a.useId(), h = o ? `${I}-label` : void 0;
-    return /* @__PURE__ */ f("div", { className: e("grid gap-1.5", z), children: [
-      o && /* @__PURE__ */ f(
+    helperText: s,
+    helperTextPosition: x = "absolute",
+    isError: a,
+    required: S,
+    "aria-label": _,
+    ...k
+  }, B) => {
+    const l = p === "none", I = u === "horizontal", V = r.useId(), z = o ? `${V}-label` : void 0;
+    return /* @__PURE__ */ i("div", { className: t("grid gap-1.5", w), children: [
+      o && /* @__PURE__ */ i(
         "label",
         {
-          id: h,
-          className: e(
+          id: z,
+          className: t(
             "text-xs font-medium leading-[18px] text-content-tertiary",
-            b && "opacity-70",
-            n && "text-destructive"
+            h && "opacity-70",
+            a && "text-destructive"
           ),
           children: [
             o,
             " ",
-            y && /* @__PURE__ */ c("span", { className: "text-destructive", children: "*" })
+            S && /* @__PURE__ */ n("span", { className: "text-destructive", children: "*" })
           ]
         }
       ),
-      /* @__PURE__ */ c(
+      /* @__PURE__ */ i(
         "div",
         {
-          ref: _,
-          className: e(A({ orientation: l, spacing: p })),
-          role: "group",
-          "data-component": "button-group",
-          "data-orientation": l,
-          "data-spacing": p,
-          "data-fused": s ? "true" : "false",
-          "aria-label": o ? void 0 : S,
-          "aria-labelledby": o ? h : void 0,
-          ...w,
-          children: a.Children.map(N, (u) => {
-            if (!a.isValidElement(u)) return u;
-            const t = u, v = t.props.value ?? t.props.children?.toString?.() ?? "", d = typeof v == "string" ? v : String(v), r = m !== void 0 && m === d, i = !!(t.props.disabled || b), V = t.props.size === "icon" || t.props.size === "iconMd" || t.props.size === "iconSm", k = e(
-              "!shadow-none relative border transition-colors",
-              s && !V && "min-w-14",
-              s ? B ? "!rounded-none first:!rounded-l-md last:!rounded-r-md -ml-px first:ml-0" : "!rounded-none first:!rounded-t-md last:!rounded-b-md -mt-px first:mt-0" : "!rounded-md",
-              s && (r ? "z-10" : "z-[1]")
-            ), G = i ? "!bg-disabled-surface !border-disabled-border !text-disabled-foreground opacity-100 [&_svg]:!text-disabled-foreground" : r ? "!bg-accent !border-brand !text-brand [&_svg]:!text-brand" : e(
-              "!bg-canvas-elevated !border-button-primary-disabled !text-[#60697d]",
-              "[&_svg]:text-content-icon",
-              "hover:!text-brand hover:[&_svg]:!text-brand"
-            ), j = n && !r && !i && "!border-destructive !text-destructive [&_svg]:!text-destructive";
-            return a.cloneElement(t, {
-              disabled: i,
-              variant: "ghost",
-              "aria-pressed": m !== void 0 && d !== "" ? r : void 0,
-              "data-button-group": "item",
-              "data-active": r ? "true" : "false",
-              className: e(
-                k,
-                G,
-                j,
-                t.props.className
-              ),
-              onClick: (C) => {
-                t.props.onClick?.(C), d && x && !i && x(d);
+          className: t(
+            s && x === "absolute" && "relative"
+          ),
+          children: [
+            /* @__PURE__ */ n(
+              "div",
+              {
+                ref: B,
+                className: t(H({ orientation: u, spacing: p })),
+                role: "group",
+                "data-component": "button-group",
+                "data-orientation": u,
+                "data-spacing": p,
+                "data-fused": l ? "true" : "false",
+                "aria-label": o ? void 0 : _,
+                "aria-labelledby": o ? z : void 0,
+                ...k,
+                children: r.Children.map(y, (f) => {
+                  if (!r.isValidElement(f)) return f;
+                  const e = f, g = e.props.value ?? e.props.children?.toString?.() ?? "", c = typeof g == "string" ? g : String(g), d = v !== void 0 && v === c, m = !!(e.props.disabled || h), G = e.props.size === "icon" || e.props.size === "iconMd" || e.props.size === "iconSm", j = t(
+                    "!shadow-none relative border transition-colors",
+                    l && !G && "min-w-14",
+                    l ? I ? "!rounded-none first:!rounded-l-md last:!rounded-r-md -ml-px first:ml-0" : "!rounded-none first:!rounded-t-md last:!rounded-b-md -mt-px first:mt-0" : "!rounded-md",
+                    l && (d ? "z-10" : "z-[1]")
+                  ), C = m ? "!bg-disabled-surface !border-disabled-border !text-disabled-foreground opacity-100 [&_svg]:!text-disabled-foreground" : d ? "!bg-accent !border-brand !text-brand [&_svg]:!text-brand" : t(
+                    "!bg-canvas-elevated !border-button-primary-disabled !text-[#60697d]",
+                    "[&_svg]:text-content-icon",
+                    "hover:!text-brand hover:[&_svg]:!text-brand"
+                  ), O = a && !d && !m && "!border-destructive !text-destructive [&_svg]:!text-destructive";
+                  return r.cloneElement(e, {
+                    disabled: m,
+                    variant: "ghost",
+                    "aria-pressed": v !== void 0 && c !== "" ? d : void 0,
+                    "data-button-group": "item",
+                    "data-active": d ? "true" : "false",
+                    className: t(
+                      j,
+                      C,
+                      O,
+                      e.props.className
+                    ),
+                    onClick: (R) => {
+                      e.props.onClick?.(R), c && b && !m && b(c);
+                    }
+                  });
+                })
+              }
+            ),
+            s && x === "absolute" && /* @__PURE__ */ i(
+              "div",
+              {
+                className: t(
+                  "absolute left-0 top-full z-10 mt-1 flex min-w-0 max-w-full items-center gap-1",
+                  a && "text-destructive"
+                ),
+                children: [
+                  /* @__PURE__ */ n(
+                    N,
+                    {
+                      size: "xs",
+                      className: t(
+                        "shrink-0",
+                        a ? "text-destructive" : "text-content-muted"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ n(
+                    "p",
+                    {
+                      className: t(
+                        "min-w-0 text-[12px] font-medium leading-[18px] text-navigation-muted",
+                        a && "text-destructive"
+                      ),
+                      children: s
+                    }
+                  )
+                ]
               }
-            });
-          })
+            )
+          ]
         }
       ),
-      g && /* @__PURE__ */ f(
+      s && x === "flow" && /* @__PURE__ */ i(
         "div",
         {
-          className: e(
+          className: t(
             "flex items-center gap-1",
-            n && "text-destructive"
+            a && "text-destructive"
           ),
           children: [
-            !n && /* @__PURE__ */ c(R, { size: 10, className: "shrink-0 text-content-muted" }),
-            /* @__PURE__ */ c(
+            /* @__PURE__ */ n(
+              N,
+              {
+                size: "xs",
+                className: t(
+                  "shrink-0",
+                  a ? "text-destructive" : "text-content-muted"
+                )
+              }
+            ),
+            /* @__PURE__ */ n(
               "p",
               {
-                className: e(
-                  "text-xs text-content-muted",
-                  n && "text-destructive"
+                className: t(
+                  "text-[12px] font-medium leading-[18px] text-navigation-muted",
+                  a && "text-destructive"
                 ),
-                children: g
+                children: s
               }
             )
           ]
@@ -123,8 +174,8 @@ const A = O("inline-flex", {
     ] });
   }
 );
-H.displayName = "ButtonGroup";
+M.displayName = "ButtonGroup";
 export {
-  H as ButtonGroup,
-  A as buttonGroupVariants
+  M as ButtonGroup,
+  H as buttonGroupVariants
 };

package/dist/components/ui/checkbox.d.ts

@@ -1,8 +1,11 @@
+import { HelperTextPosition } from './types/helper-text.types';
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
     label?: string;
     helperText?: React.ReactNode;
+    /** @default "absolute" */
+    helperTextPosition?: HelperTextPosition;
     isError?: boolean;
 } & React.RefAttributes<HTMLButtonElement>>;
 export { Checkbox };