@almadar/ui 5.5.2 → 5.5.4

package/dist/avl/index.cjs

@@ -6889,8 +6889,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.
@@ -27053,7 +27058,8 @@ function DataGrid({
   reorderEvent,
   positionEvent,
   dndItemIdField,
-  dndRoot
+  dndRoot,
+  look = "dense"
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -27169,7 +27175,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;
@@ -27346,7 +27352,7 @@ function DataGrid({
     ] })
   );
 }
-var dataGridLog, BADGE_VARIANTS, gapStyles6;
+var dataGridLog, BADGE_VARIANTS, gapStyles6, lookStyles5;
 var init_DataGrid = __esm({
   "components/molecules/DataGrid.tsx"() {
     "use client";
@@ -27381,6 +27387,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";
   }
 });
@@ -27464,7 +27477,8 @@ function DataList({
   reorderEvent: dndReorderEvent,
   positionEvent,
   dndItemIdField,
-  dndRoot
+  dndRoot,
+  look = "dense"
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -27729,6 +27743,7 @@ function DataList({
         className: cn(
           isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
           !isCard && gapClass,
+          listLookStyles[look],
           className
         ),
         children: [
@@ -27766,7 +27781,7 @@ function DataList({
     )
   );
 }
-var dataListLog;
+var dataListLog, listLookStyles;
 var init_DataList = __esm({
   "components/molecules/DataList.tsx"() {
     "use client";
@@ -27785,6 +27800,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";
   }
 });
@@ -28012,7 +28034,7 @@ var init_useQuerySingleton = __esm({
     queryStores = /* @__PURE__ */ new Map();
   }
 });
-var resolveFilterType, lookStyles5, FilterGroup;
+var resolveFilterType, lookStyles6, FilterGroup;
 var init_FilterGroup = __esm({
   "components/molecules/FilterGroup.tsx"() {
     "use client";
@@ -28026,7 +28048,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",
@@ -28103,7 +28125,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: [
@@ -28162,7 +28184,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" })
@@ -28250,7 +28272,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(
@@ -28347,7 +28369,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: [
@@ -32821,7 +32843,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";
@@ -32833,7 +32855,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": "",
@@ -32920,7 +32942,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: [
@@ -38227,7 +38249,7 @@ function DataTable({
     {
       className: cn(
         "bg-card border-2 border-border rounded-none overflow-hidden",
-        lookStyles7[look],
+        lookStyles8[look],
         className
       ),
       children: [
@@ -38454,7 +38476,7 @@ function DataTable({
     }
   );
 }
-var lookStyles7;
+var lookStyles8;
 var init_DataTable = __esm({
   "components/organisms/DataTable.tsx"() {
     "use client";
@@ -38468,7 +38490,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",
@@ -41633,7 +41655,7 @@ var init_GraphCanvas = __esm({
     GraphCanvas.displayName = "GraphCanvas";
   }
 });
-var lookStyles8, Header;
+var lookStyles9, Header;
 var init_Header = __esm({
   "components/organisms/Header.tsx"() {
     "use client";
@@ -41646,7 +41668,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",
@@ -41686,7 +41708,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: [
@@ -48382,7 +48404,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";
@@ -48393,7 +48415,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",
@@ -48486,7 +48508,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/avl/index.js

@@ -6840,8 +6840,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.
@@ -27004,7 +27009,8 @@ function DataGrid({
   reorderEvent,
   positionEvent,
   dndItemIdField,
-  dndRoot
+  dndRoot,
+  look = "dense"
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -27120,7 +27126,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;
@@ -27297,7 +27303,7 @@ function DataGrid({
     ] })
   );
 }
-var dataGridLog, BADGE_VARIANTS, gapStyles6;
+var dataGridLog, BADGE_VARIANTS, gapStyles6, lookStyles5;
 var init_DataGrid = __esm({
   "components/molecules/DataGrid.tsx"() {
     "use client";
@@ -27332,6 +27338,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";
   }
 });
@@ -27415,7 +27428,8 @@ function DataList({
   reorderEvent: dndReorderEvent,
   positionEvent,
   dndItemIdField,
-  dndRoot
+  dndRoot,
+  look = "dense"
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -27680,6 +27694,7 @@ function DataList({
         className: cn(
           isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
           !isCard && gapClass,
+          listLookStyles[look],
           className
         ),
         children: [
@@ -27717,7 +27732,7 @@ function DataList({
     )
   );
 }
-var dataListLog;
+var dataListLog, listLookStyles;
 var init_DataList = __esm({
   "components/molecules/DataList.tsx"() {
     "use client";
@@ -27736,6 +27751,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";
   }
 });
@@ -27963,7 +27985,7 @@ var init_useQuerySingleton = __esm({
     queryStores = /* @__PURE__ */ new Map();
   }
 });
-var resolveFilterType, lookStyles5, FilterGroup;
+var resolveFilterType, lookStyles6, FilterGroup;
 var init_FilterGroup = __esm({
   "components/molecules/FilterGroup.tsx"() {
     "use client";
@@ -27977,7 +27999,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",
@@ -28054,7 +28076,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: [
@@ -28113,7 +28135,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" })
@@ -28201,7 +28223,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(
@@ -28298,7 +28320,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: [
@@ -32772,7 +32794,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";
@@ -32784,7 +32806,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": "",
@@ -32871,7 +32893,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: [
@@ -38178,7 +38200,7 @@ function DataTable({
     {
       className: cn(
         "bg-card border-2 border-border rounded-none overflow-hidden",
-        lookStyles7[look],
+        lookStyles8[look],
         className
       ),
       children: [
@@ -38405,7 +38427,7 @@ function DataTable({
     }
   );
 }
-var lookStyles7;
+var lookStyles8;
 var init_DataTable = __esm({
   "components/organisms/DataTable.tsx"() {
     "use client";
@@ -38419,7 +38441,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",
@@ -41584,7 +41606,7 @@ var init_GraphCanvas = __esm({
     GraphCanvas.displayName = "GraphCanvas";
   }
 });
-var lookStyles8, Header;
+var lookStyles9, Header;
 var init_Header = __esm({
   "components/organisms/Header.tsx"() {
     "use client";
@@ -41597,7 +41619,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",
@@ -41637,7 +41659,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: [
@@ -48333,7 +48355,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";
@@ -48344,7 +48366,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",
@@ -48437,7 +48459,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;