@almadar/ui 5.5.2 → 5.5.4

package/dist/providers/index.cjs

@@ -2074,8 +2074,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.
@@ -23465,7 +23470,8 @@ function DataGrid({
   reorderEvent,
   positionEvent,
   dndItemIdField,
-  dndRoot
+  dndRoot,
+  look = "dense"
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -23581,7 +23587,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;
@@ -23758,7 +23764,7 @@ function DataGrid({
     ] })
   );
 }
-var dataGridLog, BADGE_VARIANTS, gapStyles6;
+var dataGridLog, BADGE_VARIANTS, gapStyles6, lookStyles5;
 var init_DataGrid = __esm({
   "components/molecules/DataGrid.tsx"() {
     "use client";
@@ -23793,6 +23799,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";
   }
 });
@@ -23876,7 +23889,8 @@ function DataList({
   reorderEvent: dndReorderEvent,
   positionEvent,
   dndItemIdField,
-  dndRoot
+  dndRoot,
+  look = "dense"
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -24141,6 +24155,7 @@ function DataList({
         className: cn(
           isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
           !isCard && gapClass,
+          listLookStyles[look],
           className
         ),
         children: [
@@ -24178,7 +24193,7 @@ function DataList({
     )
   );
 }
-var dataListLog;
+var dataListLog, listLookStyles;
 var init_DataList = __esm({
   "components/molecules/DataList.tsx"() {
     "use client";
@@ -24197,6 +24212,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";
   }
 });
@@ -24424,7 +24446,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";
@@ -24438,7 +24460,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",
@@ -24515,7 +24537,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: [
@@ -24574,7 +24596,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" })
@@ -24662,7 +24684,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(
@@ -24759,7 +24781,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: [
@@ -29233,7 +29255,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";
@@ -29245,7 +29267,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": "",
@@ -29332,7 +29354,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: [
@@ -35042,7 +35064,7 @@ function DataTable({
     {
       className: cn(
         "bg-card border-2 border-border rounded-none overflow-hidden",
-        lookStyles7[look],
+        lookStyles8[look],
         className
       ),
       children: [
@@ -35269,7 +35291,7 @@ function DataTable({
     }
   );
 }
-var lookStyles7;
+var lookStyles8;
 var init_DataTable = __esm({
   "components/organisms/DataTable.tsx"() {
     "use client";
@@ -35283,7 +35305,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",
@@ -38448,7 +38470,7 @@ var init_GraphCanvas = __esm({
     GraphCanvas.displayName = "GraphCanvas";
   }
 });
-var lookStyles8, Header;
+var lookStyles9, Header;
 var init_Header = __esm({
   "components/organisms/Header.tsx"() {
     "use client";
@@ -38461,7 +38483,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",
@@ -38501,7 +38523,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: [
@@ -45178,7 +45200,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";
@@ -45189,7 +45211,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",
@@ -45282,7 +45304,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/providers/index.js

@@ -2025,8 +2025,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.
@@ -23416,7 +23421,8 @@ function DataGrid({
   reorderEvent,
   positionEvent,
   dndItemIdField,
-  dndRoot
+  dndRoot,
+  look = "dense"
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -23532,7 +23538,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;
@@ -23709,7 +23715,7 @@ function DataGrid({
     ] })
   );
 }
-var dataGridLog, BADGE_VARIANTS, gapStyles6;
+var dataGridLog, BADGE_VARIANTS, gapStyles6, lookStyles5;
 var init_DataGrid = __esm({
   "components/molecules/DataGrid.tsx"() {
     "use client";
@@ -23744,6 +23750,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";
   }
 });
@@ -23827,7 +23840,8 @@ function DataList({
   reorderEvent: dndReorderEvent,
   positionEvent,
   dndItemIdField,
-  dndRoot
+  dndRoot,
+  look = "dense"
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -24092,6 +24106,7 @@ function DataList({
         className: cn(
           isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
           !isCard && gapClass,
+          listLookStyles[look],
           className
         ),
         children: [
@@ -24129,7 +24144,7 @@ function DataList({
     )
   );
 }
-var dataListLog;
+var dataListLog, listLookStyles;
 var init_DataList = __esm({
   "components/molecules/DataList.tsx"() {
     "use client";
@@ -24148,6 +24163,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";
   }
 });
@@ -24375,7 +24397,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";
@@ -24389,7 +24411,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",
@@ -24466,7 +24488,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: [
@@ -24525,7 +24547,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" })
@@ -24613,7 +24635,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(
@@ -24710,7 +24732,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: [
@@ -29184,7 +29206,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";
@@ -29196,7 +29218,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": "",
@@ -29283,7 +29305,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: [
@@ -34993,7 +35015,7 @@ function DataTable({
     {
       className: cn(
         "bg-card border-2 border-border rounded-none overflow-hidden",
-        lookStyles7[look],
+        lookStyles8[look],
         className
       ),
       children: [
@@ -35220,7 +35242,7 @@ function DataTable({
     }
   );
 }
-var lookStyles7;
+var lookStyles8;
 var init_DataTable = __esm({
   "components/organisms/DataTable.tsx"() {
     "use client";
@@ -35234,7 +35256,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",
@@ -38399,7 +38421,7 @@ var init_GraphCanvas = __esm({
     GraphCanvas.displayName = "GraphCanvas";
   }
 });
-var lookStyles8, Header;
+var lookStyles9, Header;
 var init_Header = __esm({
   "components/organisms/Header.tsx"() {
     "use client";
@@ -38412,7 +38434,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",
@@ -38452,7 +38474,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: [
@@ -45129,7 +45151,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";
@@ -45140,7 +45162,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",
@@ -45233,7 +45255,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;