@almadar/ui 5.5.2 → 5.5.4

package/dist/runtime/index.cjs

@@ -2309,8 +2309,13 @@ var init_Modal = __esm({
                 ref: modalRef,
                 open: true,
                 className: cn(
-                  // Reset browser-default dialog chrome — we own styling.
-                  "m-0 p-0 border-0 bg-transparent",
+                  // Reset browser-default dialog chrome — we own styling. `static`
+                  // overrides the user-agent `position: absolute` so the parent
+                  // flex container's `justify-center` actually centers the dialog
+                  // (without this, the dialog drops out of flex flow and `m-0`
+                  // kills the user-agent's `margin: auto` centering, pinning the
+                  // dialog to top-left).
+                  "static m-0 p-0 border-0 bg-transparent",
                   // Pre-existing dialog frame
                   "pointer-events-auto w-full flex flex-col bg-surface border shadow-elevation-dialog rounded-container",
                   // Desktop sizing + viewport-aware floor.
@@ -23234,7 +23239,8 @@ function DataGrid({
   reorderEvent,
   positionEvent,
   dndItemIdField,
-  dndRoot
+  dndRoot,
+  look = "dense"
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -23350,7 +23356,7 @@ function DataGrid({
       /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
-          className: cn("grid", gapStyles6[gap], colsClass, className),
+          className: cn("grid", gapStyles6[gap], colsClass, lookStyles5[look], className),
           style: gridTemplateColumns ? { gridTemplateColumns } : void 0,
           children: data.map((item, index) => {
             const itemData = item;
@@ -23527,7 +23533,7 @@ function DataGrid({
     ] })
   );
 }
-var dataGridLog, BADGE_VARIANTS, gapStyles6;
+var dataGridLog, BADGE_VARIANTS, gapStyles6, lookStyles5;
 var init_DataGrid = __esm({
   "components/molecules/DataGrid.tsx"() {
     "use client";
@@ -23562,6 +23568,13 @@ var init_DataGrid = __esm({
       lg: "gap-6",
       xl: "gap-8"
     };
+    lookStyles5 = {
+      dense: "gap-2 [&>*]:p-card-sm",
+      spacious: "gap-8 [&>*]:p-card-lg",
+      striped: "[&>*:nth-child(even)]:bg-muted/30",
+      borderless: "[&>*]:border-0 [&>*]:shadow-none",
+      "card-rows": "[&>*]:shadow-elevation-card [&>*]:rounded-container [&>*]:border [&>*]:border-border [&>*]:p-card-md"
+    };
     DataGrid.displayName = "DataGrid";
   }
 });
@@ -23645,7 +23658,8 @@ function DataList({
   reorderEvent: dndReorderEvent,
   positionEvent,
   dndItemIdField,
-  dndRoot
+  dndRoot,
+  look = "dense"
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -23910,6 +23924,7 @@ function DataList({
         className: cn(
           isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
           !isCard && gapClass,
+          listLookStyles[look],
           className
         ),
         children: [
@@ -23947,7 +23962,7 @@ function DataList({
     )
   );
 }
-var dataListLog;
+var dataListLog, listLookStyles;
 var init_DataList = __esm({
   "components/molecules/DataList.tsx"() {
     "use client";
@@ -23966,6 +23981,13 @@ var init_DataList = __esm({
     init_InfiniteScrollSentinel();
     init_useDataDnd();
     dataListLog = logger.createLogger("almadar:ui:data-list");
+    listLookStyles = {
+      dense: "[&_[data-entity-row]>div]:!py-1 [&_[data-entity-row]>div]:!px-3",
+      spacious: "[&_[data-entity-row]>div]:!py-5 [&_[data-entity-row]>div]:!px-8",
+      striped: "[&_[data-entity-row]:nth-child(even)>div]:bg-muted/30",
+      borderless: "[&_[data-entity-row]>div]:!border-0 [&_[data-entity-row]>div]:!hover:border-transparent",
+      "card-rows": "[&_[data-entity-row]>div]:shadow-elevation-card [&_[data-entity-row]>div]:rounded-container [&_[data-entity-row]>div]:!border [&_[data-entity-row]>div]:border-border [&_[data-entity-row]]:mb-2"
+    };
     DataList.displayName = "DataList";
   }
 });
@@ -24129,7 +24151,7 @@ var init_FormField = __esm({
     FormField.displayName = "FormField";
   }
 });
-var resolveFilterType, lookStyles5, FilterGroup;
+var resolveFilterType, lookStyles6, FilterGroup;
 var init_FilterGroup = __esm({
   "components/molecules/FilterGroup.tsx"() {
     "use client";
@@ -24143,7 +24165,7 @@ var init_FilterGroup = __esm({
     init_useEventBus();
     init_useQuerySingleton();
     resolveFilterType = (filter) => filter.filterType ?? filter.type;
-    lookStyles5 = {
+    lookStyles6 = {
       toolbar: "",
       chips: "gap-2 [&>*]:rounded-pill [&>*]:px-3 [&>*]:py-1",
       pills: "gap-2 [&>*]:rounded-pill",
@@ -24220,7 +24242,7 @@ var init_FilterGroup = __esm({
           {
             gap: "md",
             align: "center",
-            className: cn("flex-wrap", lookStyles5[look], className),
+            className: cn("flex-wrap", lookStyles6[look], className),
             children: [
               showIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "filter", className: "h-4 w-4 text-muted-foreground" }),
               filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
@@ -24279,7 +24301,7 @@ var init_FilterGroup = __esm({
         );
       }
       if (variant === "vertical") {
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-4", lookStyles5[look], className), children: [
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-4", lookStyles6[look], className), children: [
           showIcon && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "filter", className: "h-4 w-4" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold uppercase tracking-wide", children: "Filters" })
@@ -24367,7 +24389,7 @@ var init_FilterGroup = __esm({
           {
             gap: "sm",
             align: "center",
-            className: cn("flex-wrap", lookStyles5[look], className),
+            className: cn("flex-wrap", lookStyles6[look], className),
             children: [
               showIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "filter", className: "h-4 w-4 text-muted-foreground" }),
               filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[120px]", children: resolveFilterType(filter) === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -24464,7 +24486,7 @@ var init_FilterGroup = __esm({
             "p-4 rounded-container",
             "bg-card",
             "border-[length:var(--border-width)] border-border",
-            lookStyles5[look],
+            lookStyles6[look],
             className
           ),
           children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "center", className: "flex-wrap", children: [
@@ -28938,7 +28960,7 @@ function composeDisplayValue(value, format, max, prefix, suffix) {
   const withMax = max != null && max > 0 ? `${formatted} / ${max}` : formatted;
   return `${prefix ?? ""}${withMax}${suffix ?? ""}`;
 }
-var lookStyles6, variantColor, StatDisplay;
+var lookStyles7, variantColor, StatDisplay;
 var init_StatDisplay = __esm({
   "components/molecules/StatDisplay.tsx"() {
     "use client";
@@ -28950,7 +28972,7 @@ var init_StatDisplay = __esm({
     init_Sparkline();
     init_Icon();
     init_useEventBus();
-    lookStyles6 = {
+    lookStyles7 = {
       elevated: "",
       flat: "shadow-none border-[length:var(--border-width)] border-border",
       "progress-backed": "",
@@ -29037,7 +29059,7 @@ var init_StatDisplay = __esm({
       return /* @__PURE__ */ jsxRuntime.jsx(
         Card,
         {
-          className: cn(padSizes[size], lookStyles6[look], clickEvent && "cursor-pointer hover:shadow-md transition-shadow", className),
+          className: cn(padSizes[size], lookStyles7[look], clickEvent && "cursor-pointer hover:shadow-md transition-shadow", className),
           onClick: clickEvent ? handleClick : void 0,
           children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "start", justify: "between", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: "space-y-1 flex-1", children: [
@@ -34609,7 +34631,7 @@ function DataTable({
     {
       className: cn(
         "bg-card border-2 border-border rounded-none overflow-hidden",
-        lookStyles7[look],
+        lookStyles8[look],
         className
       ),
       children: [
@@ -34836,7 +34858,7 @@ function DataTable({
     }
   );
 }
-var lookStyles7;
+var lookStyles8;
 var init_DataTable = __esm({
   "components/organisms/DataTable.tsx"() {
     "use client";
@@ -34850,7 +34872,7 @@ var init_DataTable = __esm({
     init_useEventBus();
     init_useTranslate();
     init_types3();
-    lookStyles7 = {
+    lookStyles8 = {
       dense: "",
       spacious: "[&_tbody_tr_td]:py-5 [&_thead_tr_th]:py-4",
       striped: "[&_tbody_tr:nth-child(odd)]:bg-muted/30",
@@ -38015,7 +38037,7 @@ var init_GraphCanvas = __esm({
     GraphCanvas.displayName = "GraphCanvas";
   }
 });
-var lookStyles8, Header;
+var lookStyles9, Header;
 var init_Header = __esm({
   "components/organisms/Header.tsx"() {
     "use client";
@@ -38028,7 +38050,7 @@ var init_Header = __esm({
     init_Typography();
     init_cn();
     init_useTranslate();
-    lookStyles8 = {
+    lookStyles9 = {
       "compact-bar": "",
       hero: "py-section min-h-[200px] [&_h1]:text-display-1",
       breadcrumb: "py-2 text-sm [&_h1]:text-base [&_h1]:font-medium",
@@ -38068,7 +38090,7 @@ var init_Header = __esm({
             "flex items-center px-4 justify-between bg-card",
             sticky && "sticky top-0 z-50",
             variant === "mobile" && "lg:hidden",
-            lookStyles8[look],
+            lookStyles9[look],
             className
           ),
           children: [
@@ -44764,7 +44786,7 @@ var init_TeamOrganism = __esm({
     TeamOrganism.displayName = "TeamOrganism";
   }
 });
-var lookStyles9, STATUS_STYLES3, Timeline;
+var lookStyles10, STATUS_STYLES3, Timeline;
 var init_Timeline = __esm({
   "components/organisms/Timeline.tsx"() {
     "use client";
@@ -44775,7 +44797,7 @@ var init_Timeline = __esm({
     init_ErrorState();
     init_EmptyState();
     init_useTranslate();
-    lookStyles9 = {
+    lookStyles10 = {
       "vertical-compact": "gap-1 [&>*]:py-1",
       "vertical-spacious": "",
       horizontal: "flex-row [&>*]:flex-row [&>*]:items-center",
@@ -44868,7 +44890,7 @@ var init_Timeline = __esm({
       }
       return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("p-6", className), children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "md", children: [
         title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h5", weight: "semibold", children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: cn("relative", lookStyles9[look]), children: items.map((item, idx) => {
+        /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: cn("relative", lookStyles10[look]), children: items.map((item, idx) => {
           const status = item.status || "pending";
           const style = STATUS_STYLES3[status] || STATUS_STYLES3.pending;
           const ItemIcon = item.icon || style.icon;

package/dist/runtime/index.js

@@ -2260,8 +2260,13 @@ var init_Modal = __esm({
                 ref: modalRef,
                 open: true,
                 className: cn(
-                  // Reset browser-default dialog chrome — we own styling.
-                  "m-0 p-0 border-0 bg-transparent",
+                  // Reset browser-default dialog chrome — we own styling. `static`
+                  // overrides the user-agent `position: absolute` so the parent
+                  // flex container's `justify-center` actually centers the dialog
+                  // (without this, the dialog drops out of flex flow and `m-0`
+                  // kills the user-agent's `margin: auto` centering, pinning the
+                  // dialog to top-left).
+                  "static m-0 p-0 border-0 bg-transparent",
                   // Pre-existing dialog frame
                   "pointer-events-auto w-full flex flex-col bg-surface border shadow-elevation-dialog rounded-container",
                   // Desktop sizing + viewport-aware floor.
@@ -23185,7 +23190,8 @@ function DataGrid({
   reorderEvent,
   positionEvent,
   dndItemIdField,
-  dndRoot
+  dndRoot,
+  look = "dense"
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -23301,7 +23307,7 @@ function DataGrid({
       /* @__PURE__ */ jsx(
         Box,
         {
-          className: cn("grid", gapStyles6[gap], colsClass, className),
+          className: cn("grid", gapStyles6[gap], colsClass, lookStyles5[look], className),
           style: gridTemplateColumns ? { gridTemplateColumns } : void 0,
           children: data.map((item, index) => {
             const itemData = item;
@@ -23478,7 +23484,7 @@ function DataGrid({
     ] })
   );
 }
-var dataGridLog, BADGE_VARIANTS, gapStyles6;
+var dataGridLog, BADGE_VARIANTS, gapStyles6, lookStyles5;
 var init_DataGrid = __esm({
   "components/molecules/DataGrid.tsx"() {
     "use client";
@@ -23513,6 +23519,13 @@ var init_DataGrid = __esm({
       lg: "gap-6",
       xl: "gap-8"
     };
+    lookStyles5 = {
+      dense: "gap-2 [&>*]:p-card-sm",
+      spacious: "gap-8 [&>*]:p-card-lg",
+      striped: "[&>*:nth-child(even)]:bg-muted/30",
+      borderless: "[&>*]:border-0 [&>*]:shadow-none",
+      "card-rows": "[&>*]:shadow-elevation-card [&>*]:rounded-container [&>*]:border [&>*]:border-border [&>*]:p-card-md"
+    };
     DataGrid.displayName = "DataGrid";
   }
 });
@@ -23596,7 +23609,8 @@ function DataList({
   reorderEvent: dndReorderEvent,
   positionEvent,
   dndItemIdField,
-  dndRoot
+  dndRoot,
+  look = "dense"
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -23861,6 +23875,7 @@ function DataList({
         className: cn(
           isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
           !isCard && gapClass,
+          listLookStyles[look],
           className
         ),
         children: [
@@ -23898,7 +23913,7 @@ function DataList({
     )
   );
 }
-var dataListLog;
+var dataListLog, listLookStyles;
 var init_DataList = __esm({
   "components/molecules/DataList.tsx"() {
     "use client";
@@ -23917,6 +23932,13 @@ var init_DataList = __esm({
     init_InfiniteScrollSentinel();
     init_useDataDnd();
     dataListLog = createLogger("almadar:ui:data-list");
+    listLookStyles = {
+      dense: "[&_[data-entity-row]>div]:!py-1 [&_[data-entity-row]>div]:!px-3",
+      spacious: "[&_[data-entity-row]>div]:!py-5 [&_[data-entity-row]>div]:!px-8",
+      striped: "[&_[data-entity-row]:nth-child(even)>div]:bg-muted/30",
+      borderless: "[&_[data-entity-row]>div]:!border-0 [&_[data-entity-row]>div]:!hover:border-transparent",
+      "card-rows": "[&_[data-entity-row]>div]:shadow-elevation-card [&_[data-entity-row]>div]:rounded-container [&_[data-entity-row]>div]:!border [&_[data-entity-row]>div]:border-border [&_[data-entity-row]]:mb-2"
+    };
     DataList.displayName = "DataList";
   }
 });
@@ -24080,7 +24102,7 @@ var init_FormField = __esm({
     FormField.displayName = "FormField";
   }
 });
-var resolveFilterType, lookStyles5, FilterGroup;
+var resolveFilterType, lookStyles6, FilterGroup;
 var init_FilterGroup = __esm({
   "components/molecules/FilterGroup.tsx"() {
     "use client";
@@ -24094,7 +24116,7 @@ var init_FilterGroup = __esm({
     init_useEventBus();
     init_useQuerySingleton();
     resolveFilterType = (filter) => filter.filterType ?? filter.type;
-    lookStyles5 = {
+    lookStyles6 = {
       toolbar: "",
       chips: "gap-2 [&>*]:rounded-pill [&>*]:px-3 [&>*]:py-1",
       pills: "gap-2 [&>*]:rounded-pill",
@@ -24171,7 +24193,7 @@ var init_FilterGroup = __esm({
           {
             gap: "md",
             align: "center",
-            className: cn("flex-wrap", lookStyles5[look], className),
+            className: cn("flex-wrap", lookStyles6[look], className),
             children: [
               showIcon && /* @__PURE__ */ jsx(Icon, { name: "filter", className: "h-4 w-4 text-muted-foreground" }),
               filters.map((filter) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
@@ -24230,7 +24252,7 @@ var init_FilterGroup = __esm({
         );
       }
       if (variant === "vertical") {
-        return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4", lookStyles5[look], className), children: [
+        return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4", lookStyles6[look], className), children: [
           showIcon && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
             /* @__PURE__ */ jsx(Icon, { name: "filter", className: "h-4 w-4" }),
             /* @__PURE__ */ jsx("span", { className: "text-sm font-bold uppercase tracking-wide", children: "Filters" })
@@ -24318,7 +24340,7 @@ var init_FilterGroup = __esm({
           {
             gap: "sm",
             align: "center",
-            className: cn("flex-wrap", lookStyles5[look], className),
+            className: cn("flex-wrap", lookStyles6[look], className),
             children: [
               showIcon && /* @__PURE__ */ jsx(Icon, { name: "filter", className: "h-4 w-4 text-muted-foreground" }),
               filters.map((filter) => /* @__PURE__ */ jsx("div", { className: "min-w-[120px]", children: resolveFilterType(filter) === "date" ? /* @__PURE__ */ jsx(
@@ -24415,7 +24437,7 @@ var init_FilterGroup = __esm({
             "p-4 rounded-container",
             "bg-card",
             "border-[length:var(--border-width)] border-border",
-            lookStyles5[look],
+            lookStyles6[look],
             className
           ),
           children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "center", className: "flex-wrap", children: [
@@ -28889,7 +28911,7 @@ function composeDisplayValue(value, format, max, prefix, suffix) {
   const withMax = max != null && max > 0 ? `${formatted} / ${max}` : formatted;
   return `${prefix ?? ""}${withMax}${suffix ?? ""}`;
 }
-var lookStyles6, variantColor, StatDisplay;
+var lookStyles7, variantColor, StatDisplay;
 var init_StatDisplay = __esm({
   "components/molecules/StatDisplay.tsx"() {
     "use client";
@@ -28901,7 +28923,7 @@ var init_StatDisplay = __esm({
     init_Sparkline();
     init_Icon();
     init_useEventBus();
-    lookStyles6 = {
+    lookStyles7 = {
       elevated: "",
       flat: "shadow-none border-[length:var(--border-width)] border-border",
       "progress-backed": "",
@@ -28988,7 +29010,7 @@ var init_StatDisplay = __esm({
       return /* @__PURE__ */ jsx(
         Card,
         {
-          className: cn(padSizes[size], lookStyles6[look], clickEvent && "cursor-pointer hover:shadow-md transition-shadow", className),
+          className: cn(padSizes[size], lookStyles7[look], clickEvent && "cursor-pointer hover:shadow-md transition-shadow", className),
           onClick: clickEvent ? handleClick : void 0,
           children: /* @__PURE__ */ jsxs(HStack, { align: "start", justify: "between", children: [
             /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "space-y-1 flex-1", children: [
@@ -34560,7 +34582,7 @@ function DataTable({
     {
       className: cn(
         "bg-card border-2 border-border rounded-none overflow-hidden",
-        lookStyles7[look],
+        lookStyles8[look],
         className
       ),
       children: [
@@ -34787,7 +34809,7 @@ function DataTable({
     }
   );
 }
-var lookStyles7;
+var lookStyles8;
 var init_DataTable = __esm({
   "components/organisms/DataTable.tsx"() {
     "use client";
@@ -34801,7 +34823,7 @@ var init_DataTable = __esm({
     init_useEventBus();
     init_useTranslate();
     init_types3();
-    lookStyles7 = {
+    lookStyles8 = {
       dense: "",
       spacious: "[&_tbody_tr_td]:py-5 [&_thead_tr_th]:py-4",
       striped: "[&_tbody_tr:nth-child(odd)]:bg-muted/30",
@@ -37966,7 +37988,7 @@ var init_GraphCanvas = __esm({
     GraphCanvas.displayName = "GraphCanvas";
   }
 });
-var lookStyles8, Header;
+var lookStyles9, Header;
 var init_Header = __esm({
   "components/organisms/Header.tsx"() {
     "use client";
@@ -37979,7 +38001,7 @@ var init_Header = __esm({
     init_Typography();
     init_cn();
     init_useTranslate();
-    lookStyles8 = {
+    lookStyles9 = {
       "compact-bar": "",
       hero: "py-section min-h-[200px] [&_h1]:text-display-1",
       breadcrumb: "py-2 text-sm [&_h1]:text-base [&_h1]:font-medium",
@@ -38019,7 +38041,7 @@ var init_Header = __esm({
             "flex items-center px-4 justify-between bg-card",
             sticky && "sticky top-0 z-50",
             variant === "mobile" && "lg:hidden",
-            lookStyles8[look],
+            lookStyles9[look],
             className
           ),
           children: [
@@ -44715,7 +44737,7 @@ var init_TeamOrganism = __esm({
     TeamOrganism.displayName = "TeamOrganism";
   }
 });
-var lookStyles9, STATUS_STYLES3, Timeline;
+var lookStyles10, STATUS_STYLES3, Timeline;
 var init_Timeline = __esm({
   "components/organisms/Timeline.tsx"() {
     "use client";
@@ -44726,7 +44748,7 @@ var init_Timeline = __esm({
     init_ErrorState();
     init_EmptyState();
     init_useTranslate();
-    lookStyles9 = {
+    lookStyles10 = {
       "vertical-compact": "gap-1 [&>*]:py-1",
       "vertical-spacious": "",
       horizontal: "flex-row [&>*]:flex-row [&>*]:items-center",
@@ -44819,7 +44841,7 @@ var init_Timeline = __esm({
       }
       return /* @__PURE__ */ jsx(Card, { className: cn("p-6", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "md", children: [
         title && /* @__PURE__ */ jsx(Typography, { variant: "h5", weight: "semibold", children: title }),
-        /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("relative", lookStyles9[look]), children: items.map((item, idx) => {
+        /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("relative", lookStyles10[look]), children: items.map((item, idx) => {
           const status = item.status || "pending";
           const style = STATUS_STYLES3[status] || STATUS_STYLES3.pending;
           const ItemIcon = item.icon || style.icon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.5.2",
+  "version": "5.5.4",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [