@spesia/ui 1.10.7 → 1.10.9

package/dist/components/date-picker/PeriodPicker/PeriodPicker.js

@@ -185,7 +185,7 @@ const De = ({
         padding: 2,
         display: "flex",
         flexDirection: a ? "row" : "column",
-        gap: 4,
+        gap: 2,
         ".MuiChip-icon": {
           fill: (e) => {
             var r;
@@ -210,7 +210,8 @@ const De = ({
                 le,
                 {
                   sx: {
-                    px: 3,
+                    px: 2,
+                    py: 4.5,
                     backgroundColor: (n) => {
                       var h;
                       return e.label === (l == null ? void 0 : l.label) ? (h = n.vars) == null ? void 0 : h.palette.background.default : "transparent";

package/dist/components/trending-chip/TrendingChip.d.ts

@@ -1,5 +1,5 @@
 export type TrendingChipProps = {
-    value: number;
+    value?: number;
     iconOnly?: boolean;
     size?: "small" | "medium";
     className?: string;

package/dist/components/trending-chip/TrendingChip.js

@@ -1,92 +1,94 @@
-import { jsx as r } from "react/jsx-runtime";
-import { suitCx as c } from "../../helpers/suitCx.js";
-import { Box as i, Chip as h } from "@mui/material";
-import { ArrowDownward as n, ArrowUpward as s } from "@mui/icons-material";
-import { formatPercentage as l } from "../../helpers/utils.js";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { suitCx as m } from "../../helpers/suitCx.js";
+import { Box as x, Chip as a } from "@mui/material";
+import { ArrowDownward as s, ArrowUpward as n } from "@mui/icons-material";
+import { formatPercentage as g } from "../../helpers/utils.js";
 import { colors as t } from "../../styles/colors.js";
-const C = ({
-  value: e,
-  size: a,
-  iconOnly: d,
-  className: p
+const N = ({
+  value: o,
+  size: c,
+  iconOnly: p,
+  className: h
 }) => {
-  const o = c(
+  const i = m(
     {
       name: "TrendingChip"
     },
     {},
-    p
-  );
-  return d ? e < 0 ? /* @__PURE__ */ r(
-    i,
-    {
-      sx: {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        borderRadius: "100%",
-        backgroundColor: "#F38840",
-        color: t.neutral.white,
-        width: "48px",
-        height: "48px"
-      },
-      children: /* @__PURE__ */ r(
-        n,
-        {
-          className: o(),
-          sx: { width: "24px", height: "24px", rotate: "-45deg" }
-        }
-      )
-    }
-  ) : /* @__PURE__ */ r(
-    i,
+    h
+  ), e = o === void 0 || o === 0 ? t.secondary.grey[30] : o < 0 ? "#F38840" : t.secondary.olive[50];
+  return p ? /* @__PURE__ */ d(
+    x,
     {
       sx: {
         display: "inline-flex",
         alignItems: "center",
         justifyContent: "center",
         borderRadius: "100%",
-        backgroundColor: t.secondary.olive[50],
+        backgroundColor: e,
         color: t.neutral.white,
         width: "48px",
         height: "48px"
       },
-      children: /* @__PURE__ */ r(
-        s,
-        {
-          className: o(),
-          sx: { width: "24px", height: "24px", rotate: "45deg" }
-        }
-      )
+      children: [
+        o === void 0 && /* @__PURE__ */ r("div", { children: "-" }),
+        o !== void 0 && o < 0 && /* @__PURE__ */ r(
+          s,
+          {
+            className: i(),
+            sx: { width: "24px", height: "24px", rotate: "-45deg" }
+          }
+        ),
+        o !== void 0 && o >= 0 && /* @__PURE__ */ r(
+          n,
+          {
+            className: i(),
+            sx: {
+              width: "24px",
+              height: "24px",
+              rotate: o === 0 ? "90deg" : "45deg"
+            }
+          }
+        )
+      ]
     }
   ) : /* @__PURE__ */ r(
-    h,
+    a,
     {
-      className: o(),
+      className: i(),
       variant: "outlined",
-      size: a,
+      size: c,
       sx: {
         pointerEvents: "none",
         border: "none !important",
         borderRadius: 2,
-        color: e >= 0 ? `${t.secondary.olive[50]} !important` : "#F38840 !important"
+        color: `${e} !important`
       },
-      color: e < 0 ? "error" : "success",
-      icon: e < 0 ? /* @__PURE__ */ r(
-        n,
-        {
-          sx: { width: "18px", height: "18px", rotate: "-45deg" }
-        }
-      ) : /* @__PURE__ */ r(
-        s,
-        {
-          sx: { width: "18px", height: "18px", rotate: "45deg" }
-        }
-      ),
-      label: l(e, !1, 1)
+      color: o !== void 0 && o < 0 ? "error" : "success",
+      icon: o === void 0 ? void 0 : /* @__PURE__ */ d("div", { children: [
+        o !== void 0 && o < 0 && /* @__PURE__ */ r(
+          s,
+          {
+            className: i(),
+            sx: { width: "18px", height: "18px", rotate: "-45deg" }
+          }
+        ),
+        o !== void 0 && o >= 0 && /* @__PURE__ */ r(
+          n,
+          {
+            className: i(),
+            sx: {
+              width: "18px",
+              height: "18px",
+              rotate: o === 0 ? "90deg" : "45deg"
+            }
+          }
+        )
+      ] }),
+      label: o !== void 0 ? g(o, !1, 1) : "-"
     }
   );
 };
 export {
-  C as TrendingChip
+  N as TrendingChip
 };

package/dist/styles/alert/alert.js

@@ -1,85 +1,126 @@
-const A = {
+const k = {
   MuiAlert: {
     styleOverrides: {
-      root: (t) => {
-        var l, a, i, n, c, u, m, d, s, h, M, v, x;
-        const r = t.ownerState.color || t.ownerState.severity, o = {
-          borderRadius: t.theme.spacing(2),
-          borderColor: (l = t.theme.vars) == null ? void 0 : l.palette.border.tertiary,
+      root: (e) => {
+        var o, l, i, n, c, m, u, d, h, g, M, b, v, s, A, y, x, f, p, C;
+        const r = e.ownerState.color || e.ownerState.severity, a = {
+          borderRadius: e.theme.spacing(4),
+          borderColor: (o = e.theme.vars) == null ? void 0 : o.palette.border.primary,
           borderWidth: 1,
           borderStyle: "solid",
+          backgroundColor: (l = e.theme.vars) == null ? void 0 : l.palette.background.paper,
           ".MuiAlert-message": {
-            fontWeight: 400
+            fontWeight: 400,
+            marginTop: e.theme.spacing(1),
+            ".MuiAlertTitle-root": {
+              paddingTop: e.theme.spacing(1)
+            }
           },
           "&.MuiAlert-noBorder": {
             border: "none !important"
           },
           ".MuiAlert-icon": {
-            color: (a = t.theme.vars) == null ? void 0 : a.palette.text.primary
+            color: (i = e.theme.vars) == null ? void 0 : i.palette.text.primary
           },
           ".MuiAlert-icon > .MuiSvgIcon-root path": {
-            fill: (i = t.theme.vars) == null ? void 0 : i.palette.text.primary
+            fill: (n = e.theme.vars) == null ? void 0 : n.palette.text.primary
           }
         };
         if (r) {
-          const e = (n = t.theme.vars) == null ? void 0 : n.palette[r];
-          if (e)
+          const t = (c = e.theme.vars) == null ? void 0 : c.palette[r];
+          if (t)
             return {
-              ...o,
-              color: (c = t.theme.vars) == null ? void 0 : c.palette.text.grey,
+              ...a,
+              color: (m = e.theme.vars) == null ? void 0 : m.palette.text.primary,
               ".MuiAlertTitle-root": {
-                color: e.main
+                color: (u = e.theme.vars) == null ? void 0 : u.palette.text.primary
               },
               ".MuiAlert-icon": {
-                color: e.main
+                color: t.main,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 30,
+                height: 30,
+                padding: e.theme.spacing(1),
+                marginTop: e.theme.spacing(2),
+                marginBottom: e.theme.spacing(2),
+                background: t.lighter,
+                borderRadius: e.theme.spacing(2)
+              },
+              "&.MuiAlert-colorNeutral": {
+                ".MuiAlert-icon": {
+                  background: `${(d = e.theme.vars) == null ? void 0 : d.palette.primary.lighter} !important`
+                }
+              },
+              "&.MuiAlert-colorSecondary": {
+                ".MuiAlert-icon": {
+                  background: t.transparent
+                }
               },
               ".MuiAlert-icon > .MuiSvgIcon-root path": {
-                fill: e.main
+                fill: t.main,
+                "&.MuiAlert-colorNeutral": {
+                  fill: (h = e.theme.vars) == null ? void 0 : h.palette.text.primary
+                }
               },
               "&.MuiAlert-standard": {
-                background: e.transparent
+                background: (g = e.theme.vars) == null ? void 0 : g.palette.background.paper,
+                borderColor: t.lighter,
+                "&.MuiAlert-colorNeutral": {
+                  borderColor: (M = e.theme.vars) == null ? void 0 : M.palette.border.primary
+                }
+              },
+              "&.MuiAlert-outlined": {
+                borderColor: t.lighter,
+                "&.MuiAlert-colorNeutral": {
+                  borderColor: (b = e.theme.vars) == null ? void 0 : b.palette.border.primary
+                }
               },
               "&.MuiAlert-filled": {
-                color: e.contrastText,
-                background: e.main,
-                ".MuiAlertTitle-root": {
-                  color: e.contrastText
-                },
+                background: t.transparent,
+                borderColor: t.lighter,
                 ".MuiAlert-icon > .MuiSvgIcon-root path": {
-                  fill: e.contrastText
+                  fill: t.main
                 }
               }
             };
         }
         return {
-          ...o,
-          color: (u = t.theme.vars) == null ? void 0 : u.palette.text.grey,
+          ...a,
+          color: (v = e.theme.vars) == null ? void 0 : v.palette.text.grey,
           ".MuiAlertTitle-root": {
-            color: (m = t.theme.vars) == null ? void 0 : m.palette.text.primary
+            color: (s = e.theme.vars) == null ? void 0 : s.palette.text.primary
           },
           ".MuiAlert-icon": {
-            color: (d = t.theme.vars) == null ? void 0 : d.palette.text.primary
+            color: (A = e.theme.vars) == null ? void 0 : A.palette.text.primary
           },
           ".MuiAlert-icon > .MuiSvgIcon-root path": {
-            fill: (s = t.theme.vars) == null ? void 0 : s.palette.text.primary
+            fill: (y = e.theme.vars) == null ? void 0 : y.palette.text.primary
           },
           "&.MuiAlert-filled": {
-            color: (h = t.theme.vars) == null ? void 0 : h.palette.text.contrastText,
-            background: (M = t.theme.vars) == null ? void 0 : M.palette.text.primary,
+            color: (x = e.theme.vars) == null ? void 0 : x.palette.text.contrastText,
+            background: (f = e.theme.vars) == null ? void 0 : f.palette.text.primary,
             ".MuiAlert-icon > .MuiSvgIcon-root path": {
-              fill: (v = t.theme.vars) == null ? void 0 : v.palette.text.contrastText
+              fill: (p = e.theme.vars) == null ? void 0 : p.palette.text.contrastText
             },
             ".MuiAlertTitle-root": {
-              color: (x = t.theme.vars) == null ? void 0 : x.palette.text.contrastText
+              color: (C = e.theme.vars) == null ? void 0 : C.palette.text.contrastText
             }
           }
         };
       },
-      outlined: (t) => {
+      standard: (e) => {
+        var r;
+        return {
+          borderColor: (r = e.theme.vars) == null ? void 0 : r.palette.border.primary
+        };
+      },
+      outlined: (e) => {
         var r;
         return {
           border: "1px solid",
-          borderColor: (r = t.theme.vars) == null ? void 0 : r.palette.border.tertiary,
+          borderColor: (r = e.theme.vars) == null ? void 0 : r.palette.border.primary,
           background: "transparent"
         };
       }
@@ -87,5 +128,5 @@ const A = {
   }
 };
 export {
-  A as alertStyles
+  k as alertStyles
 };

package/dist/styles/tab/tab.js

@@ -1,25 +1,48 @@
-import { colors as n } from "../colors.js";
+import { colors as o } from "../colors.js";
 const d = {
   MuiTab: {
     styleOverrides: {
       root: ({ theme: t }) => {
-        var a, o, r, i;
+        var a, i, r, e;
         return {
-          color: t.vars.palette.text.primary,
-          borderRadius: 0,
-          padding: 0,
-          paddingTop: 12,
-          marginRight: t.spacing(6),
-          textTransform: "initial",
-          display: "flex",
-          alignItems: "center",
-          flexDirection: "row",
-          gap: 20,
-          justifyContent: "flex-start",
-          opacity: 0.2,
-          "&.Mui-selected": {
+          ".MuiTabs-brand &": {
             color: t.vars.palette.text.primary,
-            opacity: 1
+            borderRadius: 0,
+            padding: 0,
+            paddingTop: 12,
+            marginRight: t.spacing(6),
+            textTransform: "initial",
+            display: "flex",
+            alignItems: "center",
+            flexDirection: "row",
+            gap: 20,
+            justifyContent: "flex-start",
+            opacity: 0.2,
+            "&.Mui-selected": {
+              color: t.vars.palette.text.primary,
+              opacity: 1
+            }
+          },
+          ".MuiTabs-stretched &": {
+            color: t.vars.palette.text.secondary,
+            borderRadius: 0,
+            textTransform: "initial",
+            display: "flex",
+            textAlign: "center",
+            maxWidth: "none",
+            alignItems: "center",
+            flexDirection: "row",
+            gap: 20,
+            flexGrow: 1,
+            justifyContent: "flex-start",
+            borderBottom: `2px solid ${t.vars.palette.divider}`,
+            "&.Mui-selected": {
+              color: t.vars.palette.text.primary
+            },
+            "& span": {
+              display: "block",
+              flex: "1 1 auto"
+            }
           },
           ".MuiTabs-numbered &": {
             "&::before": {
@@ -49,7 +72,7 @@ const d = {
             opacity: 1,
             "&.Mui-selected": {
               background: (a = t.vars) == null ? void 0 : a.palette.background.brownBold,
-              color: (o = t.vars) == null ? void 0 : o.palette.text.contrastText
+              color: (i = t.vars) == null ? void 0 : i.palette.text.contrastText
             },
             "@media (max-width: 599px)": {
               padding: 12,
@@ -57,6 +80,9 @@ const d = {
               paddingBottom: 0
             }
           },
+          ".MuiTabs-fullWidth &": {
+            flex: 1
+          },
           ".MuiTabs-rounded &": {
             color: t.vars.palette.text.secondary,
             padding: 28,
@@ -74,7 +100,7 @@ const d = {
             opacity: 1,
             "&.Mui-selected": {
               color: (r = t.vars) == null ? void 0 : r.palette.background.brownBold,
-              background: (i = t.vars) == null ? void 0 : i.palette.text.contrastText
+              background: (e = t.vars) == null ? void 0 : e.palette.text.contrastText
             },
             "@media (max-width: 599px)": {
               padding: 12,
@@ -89,22 +115,44 @@ const d = {
 }, s = {
   MuiTabs: {
     styleOverrides: {
-      root: () => ({}),
+      root: () => ({
+        "&.MuiTabs-stretched": {
+          width: "100%",
+          margin: 0
+        },
+        "&.MuiTabs-fullWidth": {
+          width: "100%"
+        }
+      }),
       scroller: () => ({
         ".MuiTabs-rounded &": {
           display: "flex",
           width: "auto"
+        },
+        ".MuiTabs-fullWidth &": {
+          width: "100%"
+        },
+        ".MuiTabs-stretched &": {
+          display: "flex",
+          width: "100%"
         }
       }),
       list: ({ theme: t }) => {
-        var a, o, r;
+        var a, i, r;
         return {
           counterReset: "MuiTab-root",
+          ".MuiTabs-stretched &": {
+            display: "flex",
+            width: "100%",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 0
+          },
           ".MuiTabs-buttons &": {
             backgroundColor: (a = t.vars) == null ? void 0 : a.palette.background.paper,
             borderRadius: t.spacing(2),
             border: "1px solid",
-            borderColor: (o = t == null ? void 0 : t.vars) == null ? void 0 : o.palette.border.primary,
+            borderColor: (i = t == null ? void 0 : t.vars) == null ? void 0 : i.palette.border.primary,
             display: "flex",
             alignItems: "center",
             justifyContent: "flex-start",
@@ -116,32 +164,43 @@ const d = {
             borderRadius: t.spacing(8),
             border: "0px solid",
             display: "flex",
+            width: "auto",
             alignItems: "center",
             justifyContent: "flex-start",
             gap: 0,
             padding: 0
+          },
+          ".MuiTabs-fullWidth &": {
+            width: "100%"
           }
         };
       },
       indicator: (t) => ({
-        backgroundColor: n.primary.beige[10],
-        height: "5px",
-        top: 0,
-        bottom: "auto",
-        borderRadius: t.theme.spacing(2),
-        "&:after": {
-          content: '""',
-          position: "absolute",
-          left: 0,
-          right: "auto",
+        ".MuiTabs-brand &": {
+          backgroundColor: o.primary.beige[10],
+          height: "5px",
           top: 0,
-          bottom: 0,
-          margin: "auto",
-          width: "var(--indicator-width, 100%)",
-          height: "100%",
-          borderRadius: t.theme.spacing(3),
-          backgroundColor: n.primary.coral[100],
-          transition: "width 0.3s ease"
+          bottom: "auto",
+          borderRadius: t.theme.spacing(2),
+          "&:after": {
+            content: '""',
+            position: "absolute",
+            left: 0,
+            right: "auto",
+            top: 0,
+            bottom: 0,
+            margin: "auto",
+            width: "var(--indicator-width, 100%)",
+            height: "100%",
+            borderRadius: t.theme.spacing(3),
+            backgroundColor: o.primary.coral[100],
+            transition: "width 0.3s ease"
+          }
+        },
+        ".MuiTabs-stretched &": {
+          backgroundColor: o.primary.brown[50],
+          height: "2px",
+          borderRadius: t.theme.spacing(2)
         },
         ".MuiTabs-buttons &": {
           display: "none"

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.10.7",
+  "version": "1.10.9",
   "description": "The Spesia UI toolkit for React",
   "files": [
     "dist"
@@ -22,9 +22,24 @@
   },
   "type": "module",
   "private": false,
+  "scripts": {
+    "build": "tsc && vite build",
+    "build:analyze": "vite build && npx vite-bundle-visualizer",
+    "test:ci": "vitest run",
+    "test:watch": "vitest",
+    "test-storybook": "test-storybook",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
+    "format": "prettier --check --ignore-path .gitignore .",
+    "format:fix": "prettier --write --ignore-path .gitignore .",
+    "dev": "storybook dev -p 6006",
+    "check-types": "tsc --noEmit",
+    "storybook": "storybook build"
+  },
   "keywords": [],
   "author": "tinna@spesia.is",
   "license": "ISC",
+  "packageManager": "pnpm@10.0.0+sha512.b8fef5494bd3fe4cbd4edabd0745df2ee5be3e4b0b8b08fa643aa3e4c6702ccc0f00d68fa8a8c9858a735a0032485a44990ed2810526c875e416f001b17df12b",
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.0",
     "@emotion/react": "^11.14.0",
@@ -65,7 +80,7 @@
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "lottie-react": "^2.4.1",
-    "lucide-react": "^0.563.0",
+    "lucide-react": "^1.31.0",
     "vite-plugin-svgr": "^4.5.0"
   },
   "peerDependencies": {
@@ -85,19 +100,5 @@
   "bugs": {
     "url": "https://github.com/Spesia/spesia/issues"
   },
-  "homepage": "https://ui.test.spesia.is",
-  "scripts": {
-    "build": "tsc && vite build",
-    "build:analyze": "vite build && npx vite-bundle-visualizer",
-    "test:ci": "vitest run",
-    "test:watch": "vitest",
-    "test-storybook": "test-storybook",
-    "lint": "eslint",
-    "lint:fix": "eslint --fix",
-    "format": "prettier --check --ignore-path .gitignore .",
-    "format:fix": "prettier --write --ignore-path .gitignore .",
-    "dev": "storybook dev -p 6006",
-    "check-types": "tsc --noEmit",
-    "storybook": "storybook build"
-  }
-}
+  "homepage": "https://ui.test.spesia.is"
+}