@spesia/ui 1.9.27 → 1.10.1

package/dist/styles/alert/alert.d.ts

@@ -1,15 +1,13 @@
 import { ComponentStyles } from '..';
 declare const alertStyles: ComponentStyles;
 declare module "@mui/material/Alert" {
-    interface AlertPropsSeverityOverrides {
-        neutral: true;
-    }
     interface AlertPropsVariantOverrides {
-        dark: true;
+        noBorder: true;
     }
     interface AlertPropsColorOverrides {
-        neutral: true;
         primary: true;
+        secondary: true;
+        neutral: true;
     }
 }
 export { alertStyles };

package/dist/styles/alert/alert.js

@@ -1,70 +1,91 @@
-import { colors as r } from "../colors.js";
-const n = {
+const A = {
   MuiAlert: {
     styleOverrides: {
       root: (t) => {
-        if (!t.ownerState.severity)
-          return;
-        const e = t.theme.palette[t.ownerState.severity];
-        if (e)
-          return {
-            borderRadius: t.theme.spacing(2),
-            borderColor: e.main,
-            "&.MuiAlert-filled": {
-              color: e.contrastText,
-              background: e.main,
-              ".MuiAlert-icon > svg path": {
-                fill: e.contrastText
-              }
-            },
-            "&.MuiAlert-dark": {
-              color: e.contrastTextAlt,
-              background: e.dark,
-              ".MuiAlert-icon > svg path": {
-                fill: e.contrastTextAlt
+        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,
+          borderWidth: 1,
+          borderStyle: "solid",
+          ".MuiAlert-message": {
+            fontWeight: 400
+          },
+          "&.MuiAlert-noBorder": {
+            border: "none !important"
+          },
+          ".MuiAlert-icon": {
+            color: (a = t.theme.vars) == null ? void 0 : a.palette.text.primary
+          },
+          ".MuiAlert-icon > .MuiSvgIcon-root path": {
+            fill: (i = t.theme.vars) == null ? void 0 : i.palette.text.primary
+          }
+        };
+        if (r) {
+          const e = (n = t.theme.vars) == null ? void 0 : n.palette[r];
+          if (e)
+            return {
+              ...o,
+              color: (c = t.theme.vars) == null ? void 0 : c.palette.text.grey,
+              ".MuiAlertTitle-root": {
+                color: e.main
+              },
+              ".MuiAlert-icon": {
+                color: e.main
+              },
+              ".MuiAlert-icon > .MuiSvgIcon-root path": {
+                fill: e.main
+              },
+              "&.MuiAlert-standard": {
+                background: e.transparent
+              },
+              "&.MuiAlert-filled": {
+                color: e.contrastText,
+                background: e.main,
+                ".MuiAlertTitle-root": {
+                  color: e.contrastText
+                },
+                ".MuiAlert-icon > .MuiSvgIcon-root path": {
+                  fill: e.contrastText
+                }
               }
+            };
+        }
+        return {
+          ...o,
+          color: (u = t.theme.vars) == null ? void 0 : u.palette.text.grey,
+          ".MuiAlertTitle-root": {
+            color: (m = t.theme.vars) == null ? void 0 : m.palette.text.primary
+          },
+          ".MuiAlert-icon": {
+            color: (d = t.theme.vars) == null ? void 0 : d.palette.text.primary
+          },
+          ".MuiAlert-icon > .MuiSvgIcon-root path": {
+            fill: (s = t.theme.vars) == null ? void 0 : s.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,
+            ".MuiAlert-icon > .MuiSvgIcon-root path": {
+              fill: (v = t.theme.vars) == null ? void 0 : v.palette.text.contrastText
             },
             ".MuiAlertTitle-root": {
-              fontWeight: "bold",
-              fontSize: 14
-            },
-            ".MuiAlert-message": {
-              fontWeight: 400
-            }
-          };
-      },
-      standard: (t) => {
-        if (!t.ownerState.severity)
-          return {
-            color: t.theme.palette.mode === "light" ? r.secondary.grey[70] : r.secondary.grey[20],
-            background: t.theme.palette.mode === "light" ? r.secondary.grey[20] : r.secondary.grey[70]
-          };
-        const e = t.theme.palette[t.ownerState.severity];
-        if (e)
-          return {
-            color: t.theme.palette.mode === "light" ? r.secondary.grey[70] : r.secondary.grey[20],
-            background: e.transparent,
-            ".MuiAlert-icon": {
-              color: e.main
-            },
-            ".MuiAlert-icon > svg path": {
-              fill: e.main
+              color: (x = t.theme.vars) == null ? void 0 : x.palette.text.contrastText
             }
-          };
+          }
+        };
       },
       outlined: (t) => {
-        if (!t.ownerState.severity)
-          return;
-        const e = t.theme.palette[t.ownerState.severity];
-        if (e)
-          return {
-            border: "1px solid",
-            borderColor: e.main
-          };
+        var r;
+        return {
+          border: "1px solid",
+          borderColor: (r = t.theme.vars) == null ? void 0 : r.palette.border.tertiary,
+          background: "transparent"
+        };
       }
     }
   }
 };
 export {
-  n as alertStyles
+  A as alertStyles
 };

package/dist/styles/colors.d.ts

@@ -110,6 +110,56 @@ export declare const colors: {
             90: string;
         };
     };
+    semantic: {
+        error: {
+            10: string;
+            20: string;
+            30: string;
+            40: string;
+            50: string;
+            60: string;
+            70: string;
+            80: string;
+            90: string;
+            100: string;
+        };
+        warning: {
+            10: string;
+            20: string;
+            30: string;
+            40: string;
+            50: string;
+            60: string;
+            70: string;
+            80: string;
+            90: string;
+            100: string;
+        };
+        success: {
+            10: string;
+            20: string;
+            30: string;
+            40: string;
+            50: string;
+            60: string;
+            70: string;
+            80: string;
+            90: string;
+            100: string;
+        };
+        info: {
+            10: string;
+            20: string;
+            30: string;
+            40: string;
+            50: string;
+            60: string;
+            70: string;
+            80: string;
+            90: string;
+            100: string;
+        };
+    };
     neutral: {
         white: string;
         black: string;
@@ -225,10 +275,18 @@ export declare const tokens: {
                 light: string;
                 dark: string;
             };
+            light: {
+                light: string;
+                dark: string;
+            };
             disabled: {
                 light: string;
                 dark: string;
             };
+            grey: {
+                light: string;
+                dark: string;
+            };
         };
         icon: {
             primary: {
@@ -243,6 +301,10 @@ export declare const tokens: {
                 light: string;
                 dark: string;
             };
+            light: {
+                light: string;
+                dark: string;
+            };
             disabled: {
                 light: string;
                 dark: string;
@@ -320,18 +382,15 @@ export declare const tokens: {
         axis: string;
         grid: string;
         ticks: string;
-        timeSeries: {
-            fill: string[];
-            stroke: string[];
-            text: string[];
-        };
-        groupedSeries: {
+        series: {
             primary: {
+                main: string;
                 fill: string[];
                 stroke: string[];
                 text: string[];
             };
             secondary: {
+                main: string;
                 fill: string[];
                 stroke: string[];
                 text: string[];

package/dist/styles/colors.js

@@ -1,4 +1,4 @@
-import { alpha as a } from "@mui/material";
+import { alpha as a, lighten as i } from "@mui/material";
 const r = {
   primary: {
     brown: {
@@ -111,6 +111,56 @@ const r = {
       90: a("#a25945", 0.9)
     }
   },
+  semantic: {
+    error: {
+      10: "#FFEBEE",
+      20: "#FFCDD2",
+      30: "#EF9A9A",
+      40: "#EF5350",
+      50: "#E53935",
+      60: "#D32F2F",
+      70: "#B71C1C",
+      80: "#7F0000",
+      90: "#4A0000",
+      100: "#1D0000"
+    },
+    warning: {
+      10: "#FFF3E0",
+      20: "#FFE0B2",
+      30: "#FFCC80",
+      40: "#FFA726",
+      50: "#FF9800",
+      60: "#FB8C00",
+      70: "#F57C00",
+      80: "#E65100",
+      90: "#B23A00",
+      100: "#7F2700"
+    },
+    success: {
+      10: "#E8F5E9",
+      20: "#C8E6C9",
+      30: "#A5D6A7",
+      40: "#66BB6A",
+      50: "#4CAF50",
+      60: "#43A047",
+      70: "#388E3C",
+      80: "#1B5E20",
+      90: "#0D3B10",
+      100: "#06210B"
+    },
+    info: {
+      10: "#E3F2FD",
+      20: "#BBDEFB",
+      30: "#90CAF9",
+      40: "#42A5F5",
+      50: "#2196F3",
+      60: "#1E88E5",
+      70: "#1976D2",
+      80: "#0D47A1",
+      90: "#082C6B",
+      100: "#041639"
+    }
+  },
   neutral: {
     white: "#ffffff",
     black: "#000000",
@@ -137,7 +187,7 @@ const r = {
       90: a("#1D1C19", 0.9)
     }
   }
-}, e = {
+}, F = {
   fontFamily: {
     serif: "'Feature Deck Web', serif",
     sans: "'F37 August', sans-serif",
@@ -161,7 +211,7 @@ const r = {
     200: 1.33,
     300: 2
   }
-}, l = {
+}, o = {
   core: {
     white: {
       light: r.neutral.white,
@@ -224,9 +274,17 @@ const r = {
         light: r.primary.coral[100],
         dark: r.primary.coral[20]
       },
+      light: {
+        light: r.primary.coral[30],
+        dark: r.primary.brown[80]
+      },
       disabled: {
         light: r.neutral.alphaBlack[30],
         dark: r.neutral.alphaWhite[30]
+      },
+      grey: {
+        light: r.secondary.grey[60],
+        dark: r.secondary.grey[50]
       }
     },
     icon: {
@@ -242,6 +300,10 @@ const r = {
         light: r.primary.coral[100],
         dark: r.primary.coral[20]
       },
+      light: {
+        light: r.primary.coral[30],
+        dark: r.primary.brown[80]
+      },
       disabled: {
         light: r.neutral.alphaBlack[30],
         dark: r.neutral.alphaWhite[30]
@@ -296,7 +358,7 @@ const r = {
     border: {
       primary: {
         light: r.primary.coral[50],
-        dark: r.primary.coral[70]
+        dark: r.primary.brown[80]
       },
       secondary: {
         light: r.primary.beige[20],
@@ -319,109 +381,76 @@ const r = {
     axis: r.secondary.grey[20],
     grid: r.secondary.grey[20],
     ticks: "#6B7280",
-    timeSeries: {
-      fill: [
-        r.secondary.olive[20],
-        "#FCA08A",
-        "#FCAC99",
-        "#FDB8A7",
-        "#FDC4B6",
-        "#FDCFC5",
-        "#FEDBD3",
-        "#FEE7E2",
-        "#FFF3F0"
-      ],
-      stroke: [
-        r.secondary.olive[50],
-        "#BF6951",
-        "#DE785C",
-        "#FCA08A",
-        "#FCAC99",
-        "#FDB8A7",
-        "#FDC4B6",
-        "#FDCFC5",
-        "#FEDBD3"
-      ],
-      text: [
-        r.secondary.olive[10],
-        "#6A3C30",
-        "#854B3A",
-        "#A25945",
-        "#BF6951",
-        "#DE785C",
-        "#FCA08A",
-        "#FCAC99",
-        "#FDB8A7"
-      ]
-    },
-    groupedSeries: {
+    series: {
       primary: {
+        main: r.primary.coral[100],
         fill: [
-          r.primary.beige[10],
-          r.primary.beige[60],
-          "#BEE2C2",
-          "#E9F5EA",
-          "#D6F5C2",
-          "#A7BF98",
-          "#7A8B70",
-          "#515B4A",
-          "#222E22"
+          r.secondary.olive[20],
+          i("#6E5A95", 0.2),
+          i("#4F6F88", 0.2),
+          i("#7C8856", 0.2),
+          i("#DFA827", 0.2),
+          i("#D28A5E", 0.2),
+          i("#6E747A", 0.2),
+          i("#FCAC99", 0.2),
+          i("#AC5945", 0.2)
         ],
         stroke: [
-          r.primary.beige[30],
-          r.primary.beige[70],
-          "#21A64D",
-          "#63BA73",
-          "#92CE9A",
-          "#BEE2C2",
-          "#E9F5EA",
-          "#D6F5C2",
-          "#A7BF98"
+          r.secondary.olive[50],
+          "#6E5A95",
+          "#4F6F88",
+          "#7C8856",
+          "#DFA827",
+          "#D28A5E",
+          "#6E747A",
+          "#FCAC99",
+          "#AC5945"
         ],
         text: [
-          r.primary.beige[40],
-          r.primary.beige[80],
-          "#227F2D",
-          "#21A64D",
-          "#63BA73",
-          "#92CE9A",
-          "#BEE2C2",
-          "#E9F5EA",
-          "#D6F5C2"
+          r.secondary.olive[50],
+          "#6E5A95",
+          "#4F6F88",
+          "#7C8856",
+          "#DFA827",
+          "#D28A5E",
+          "#6E747A",
+          "#FCAC99",
+          "#AC5945"
         ]
       },
       secondary: {
+        main: r.primary.coral[30],
         fill: [
           "#FB886D",
+          "#FEE7E2",
           "#FCA08A",
+          "#FEDBD3",
           "#FCAC99",
+          "#FDCFC5",
           "#FDB8A7",
           "#FDC4B6",
-          "#FDCFC5",
-          "#FEDBD3",
-          "#FEE7E2",
           "#FFF3F0"
         ],
         stroke: [
           "#A25945",
+          "#FDCFC5",
           "#BF6951",
+          "#FDC4B6",
           "#DE785C",
+          "#FDB8A7",
           "#FCA08A",
           "#FCAC99",
-          "#FDB8A7",
-          "#FDC4B6",
-          "#FDCFC5",
           "#FEDBD3"
         ],
         text: [
           "#4F2F25",
+          "#FCAC99",
           "#6A3C30",
+          "#FCA08A",
           "#854B3A",
+          "#DE785C",
           "#A25945",
           "#BF6951",
-          "#DE785C",
-          "#FCA08A",
-          "#FCAC99",
           "#FDB8A7"
         ]
       }
@@ -430,6 +459,6 @@ const r = {
 };
 export {
   r as colors,
-  e as primitives,
-  l as tokens
+  F as primitives,
+  o as tokens
 };

package/dist/styles/index.js

@@ -8,14 +8,15 @@ import { formStyles as i } from "./form/form.js";
 import { listStyles as p } from "./list/list.js";
 import { sliderStyles as a } from "./slider/slider.js";
 import { inputStyles as y } from "./input/input.js";
-import { dialogStyles as S } from "./dialog/dialog.js";
-import { checkboxStyles as f } from "./checkbox/checkbox.js";
-import { radioStyles as c } from "./radio/radio.js";
-import { switchStyles as h } from "./switch/switch.js";
-import { tabStyles as d, tabsStyles as g } from "./tab/tab.js";
+import { selectStyles as S } from "./select/select.js";
+import { dialogStyles as f } from "./dialog/dialog.js";
+import { checkboxStyles as c } from "./checkbox/checkbox.js";
+import { radioStyles as h } from "./radio/radio.js";
+import { switchStyles as d } from "./switch/switch.js";
+import { tabStyles as g, tabsStyles as n } from "./tab/tab.js";
 import { createPalette as t } from "./palette.js";
-import { typography as n, typographyStyles as b } from "./typography.js";
-const G = o({
+import { typography as b, typographyStyles as k } from "./typography.js";
+const I = o({
   cssVariables: {
     colorSchemeSelector: "data"
   },
@@ -28,14 +29,15 @@ const G = o({
     ...s,
     ...p,
     ...y,
-    ...S,
+    ...f,
     ...a,
+    ...n,
     ...g,
-    ...d,
-    ...b,
-    ...f,
+    ...S,
+    ...k,
     ...c,
-    ...h
+    ...h,
+    ...d
   },
   breakpoints: {
     values: {
@@ -55,8 +57,8 @@ const G = o({
     }
   },
   spacing: 4,
-  typography: n
+  typography: b
 });
 export {
-  G as theme
+  I as theme
 };

package/dist/styles/list/list.js

@@ -1,20 +1,23 @@
-const s = {
+import { tokens as a } from "../colors.js";
+const d = {
   MuiList: {
     styleOverrides: {
-      root: ({ theme: o }) => {
-        var r, t, i;
+      root: ({ theme: r }) => {
+        var o, i, t;
         return {
+          padding: r.spacing(1),
+          margin: r.spacing(0.5),
           "&.RadioList": {
             ".MuiListItem-root": {
               padding: 0,
-              borderRadius: o.spacing(3),
-              marginBottom: o.spacing(1),
-              border: `1px solid ${(r = o.vars) == null ? void 0 : r.palette.divider}`,
+              borderRadius: r.spacing(3),
+              marginBottom: r.spacing(1),
+              border: `1px solid ${(o = r.vars) == null ? void 0 : o.palette.divider}`,
               ":hover": {
-                borderColor: (t = o.vars) == null ? void 0 : t.palette.divider
+                borderColor: (i = r.vars) == null ? void 0 : i.palette.divider
               },
               ".MuiListItemButton-root": {
-                borderRadius: o.spacing(3)
+                borderRadius: r.spacing(3)
               }
             }
           },
@@ -22,7 +25,7 @@ const s = {
             ".MuiListItem-root": {
               padding: 0,
               ".MuiListItemButton-root": {
-                borderRadius: o.spacing(3)
+                borderRadius: r.spacing(3)
               }
             }
           },
@@ -30,13 +33,37 @@ const s = {
             backgroundColor: "transparent"
           },
           ".MuiListItemIcon-root": {
-            color: (i = o.vars) == null ? void 0 : i.palette.text.primaryIcon
+            color: (t = r.vars) == null ? void 0 : t.palette.text.primaryIcon
           }
         };
       }
     }
+  },
+  MuiMenu: {
+    styleOverrides: {
+      paper: ({ theme: r }) => ({
+        borderRadius: r.spacing(2),
+        boxShadow: "0px 4px 4px rgba(175, 112, 94, 0.14)",
+        background: r.vars.palette.background.default,
+        border: `1px solid ${a.content.border.primary.light}`,
+        ...r.applyStyles("dark", {
+          border: `1px solid ${a.content.border.primary.dark}`
+        })
+      })
+    }
+  },
+  MuiMenuItem: {
+    styleOverrides: {
+      root: ({ theme: r }) => ({
+        borderRadius: r.spacing(4),
+        margin: r.spacing(1),
+        minHeight: "auto",
+        fontSize: r.typography.buttonSmall.fontSize,
+        fontWeight: r.typography.buttonSmall.fontWeight
+      })
+    }
   }
 };
 export {
-  s as listStyles
+  d as listStyles
 };

package/dist/styles/palette.d.ts

@@ -5,6 +5,7 @@ declare module "@mui/material/styles" {
     interface BorderPalette {
         primary: string;
         secondary: string;
+        tertiary: string;
     }
     interface Palette {
         neutral: PaletteColor;
@@ -56,6 +57,7 @@ declare module "@mui/material/styles" {
     }
     interface TypeText {
         tertiary: string;
+        grey: string;
         contrastText: string;
         primaryIcon: string;
         secondaryIcon: string;

package/dist/styles/palette.js

@@ -1,5 +1,6 @@
-import { tokens as t, colors as a } from "./colors.js";
-const y = {
+import { alpha as y } from "@mui/material";
+import { tokens as r, colors as a } from "./colors.js";
+const s = {
   mainShade: 50,
   lighter: 10,
   lighterAlt: 20,
@@ -9,9 +10,8 @@ const y = {
   dark: 100,
   darkAlt: 80,
   text: 80,
-  transparent: 10,
   activeText: a.neutral.white
-}, s = {
+}, u = {
   mainShade: 40,
   lighter: 100,
   lighterAlt: 80,
@@ -21,9 +21,8 @@ const y = {
   dark: 10,
   darkAlt: 20,
   text: 20,
-  transparent: 90,
   activeText: a.neutral.black
-}, d = {
+}, l = {
   10: "#FEE7E2",
   20: "#FEDBD3",
   30: "#FDCFC5",
@@ -34,115 +33,117 @@ const y = {
   80: "#6A3C30",
   90: "#36211B",
   100: "#180702"
-}, k = (r) => {
-  const n = r === "dark" ? s : y;
+}, k = (t) => {
+  const n = t === "dark" ? u : s;
   return {
-    mode: r,
-    primary: e(d, n),
+    mode: t,
+    primary: e(l, n),
     secondary: e(a.primary.brown, n),
-    error: e(a.primary.red, n),
-    success: e(a.primary.green, n),
+    error: e(a.semantic.error, n),
+    success: e(a.semantic.success, n),
     warning: e(
-      a.primary.yellow,
+      a.semantic.warning,
       n,
       a.neutral.black,
       a.neutral.black
     ),
-    info: e(a.primary.beige, n),
-    neutral: r === "dark" ? g(a.secondary.grey) : u(a.secondary.grey),
+    info: e(a.semantic.info, n),
+    neutral: t === "dark" ? d(a.secondary.grey) : o(a.secondary.grey),
     grey: {
-      50: a.secondary.grey[r === "dark" ? 80 : 20],
-      100: a.secondary.grey[r === "dark" ? 70 : 30],
-      200: a.secondary.grey[r === "dark" ? 60 : 40],
+      50: a.secondary.grey[t === "dark" ? 80 : 20],
+      100: a.secondary.grey[t === "dark" ? 70 : 30],
+      200: a.secondary.grey[t === "dark" ? 60 : 40],
       300: a.secondary.grey[50],
-      400: a.secondary.grey[r === "dark" ? 40 : 60],
-      700: a.secondary.grey[r === "dark" ? 30 : 70],
-      900: a.secondary.grey[r === "dark" ? 20 : 80]
+      400: a.secondary.grey[t === "dark" ? 40 : 60],
+      700: a.secondary.grey[t === "dark" ? 30 : 70],
+      900: a.secondary.grey[t === "dark" ? 20 : 80]
     },
     text: {
-      primary: t.content.text.primary[r],
-      secondary: t.content.text.secondary[r],
-      tertiary: t.content.text.tertiary[r],
-      disabled: t.content.text.disabled[r],
-      contrastText: t.core.white[r],
-      primaryIcon: t.content.icon.primary[r],
-      secondaryIcon: t.content.icon.secondary[r],
-      tertiaryIcon: t.content.icon.tertiary[r]
+      primary: r.content.text.primary[t],
+      secondary: r.content.text.secondary[t],
+      tertiary: r.content.text.tertiary[t],
+      grey: r.content.text.grey[t],
+      disabled: r.content.text.disabled[t],
+      contrastText: r.core.white[t],
+      primaryIcon: r.content.icon.primary[t],
+      secondaryIcon: r.content.icon.secondary[t],
+      tertiaryIcon: r.content.icon.tertiary[t]
     },
     background: {
-      default: t.content.background.primary[r],
-      paper: t.content.background.primary[r],
-      secondary: t.content.background.secondary[r],
-      secondaryPaper: t.content.background.coral[r],
-      coralBold: t.content.background.coralBold[r],
-      brownBold: t.content.background.brownBold[r],
-      alphaBrown: t.content.background.alphaBrown[r],
-      primaryButton: t.content.background.primaryButton[r],
-      secondaryButton: t.content.background.secondaryButton[r],
-      tertiaryButton: t.content.background.tertiaryButton[r],
-      transparent: t.content.background.transparent[r],
-      primaryLighter: t.semantic.primary.lighter[r],
-      primaryLight: t.semantic.primary.light[r],
-      primaryMain: t.semantic.primary.main[r],
-      primaryDark: t.semantic.primary.dark[r],
-      secondaryLighter: t.semantic.secondary.lighter[r],
-      secondaryLight: t.semantic.secondary.light[r],
-      secondaryMain: t.semantic.secondary.main[r],
-      secondaryDark: t.semantic.secondary.dark[r]
+      default: r.content.background.primary[t],
+      paper: r.content.background.primary[t],
+      secondary: r.content.background.secondary[t],
+      secondaryPaper: r.content.background.coral[t],
+      coralBold: r.content.background.coralBold[t],
+      brownBold: r.content.background.brownBold[t],
+      alphaBrown: r.content.background.alphaBrown[t],
+      primaryButton: r.content.background.primaryButton[t],
+      secondaryButton: r.content.background.secondaryButton[t],
+      tertiaryButton: r.content.background.tertiaryButton[t],
+      transparent: r.content.background.transparent[t],
+      primaryLighter: r.semantic.primary.lighter[t],
+      primaryLight: r.semantic.primary.light[t],
+      primaryMain: r.semantic.primary.main[t],
+      primaryDark: r.semantic.primary.dark[t],
+      secondaryLighter: r.semantic.secondary.lighter[t],
+      secondaryLight: r.semantic.secondary.light[t],
+      secondaryMain: r.semantic.secondary.main[t],
+      secondaryDark: r.semantic.secondary.dark[t]
     },
-    divider: t.content.border.tertiary[r],
+    divider: r.content.border.tertiary[t],
     border: {
-      primary: t.content.border.primary[r],
-      secondary: t.content.border.secondary[r]
+      primary: r.content.border.primary[t],
+      secondary: r.content.border.secondary[t],
+      tertiary: r.content.border.tertiary[t]
     }
   };
 };
-function e(r, n, i = a.neutral.white, c = i) {
+function e(t, n, i = a.neutral.white, c = i) {
   return {
-    lighter: r[n.lighter] ?? r[n.lighterAlt],
-    light: r[n.light],
-    main: r[n.mainShade],
-    hover: r[n.hover],
-    focus: r[n.focus],
-    dark: r[n.dark] ?? r[n.darkAlt],
-    text: r[n.text],
-    border: r[50],
+    lighter: t[n.lighter] ?? t[n.lighterAlt],
+    light: t[n.light],
+    main: t[n.mainShade],
+    hover: t[n.hover],
+    focus: t[n.focus],
+    dark: t[n.dark] ?? t[n.darkAlt],
+    text: t[n.text],
+    border: t[50],
     active: n.activeText,
     contrastText: i,
     contrastTextAlt: c,
-    transparent: r[n.transparent]
+    transparent: y(t[n.mainShade], 0.05)
   };
 }
-function u(r) {
+function o(t) {
   return {
-    lighter: r[20],
-    light: r[30],
-    main: r[70],
-    hover: r[80],
-    focus: r[80],
-    border: t.content.border.tertiary.light,
+    lighter: t[20],
+    light: t[30],
+    main: t[70],
+    hover: t[80],
+    focus: t[80],
+    border: r.content.border.tertiary.light,
     active: a.neutral.white,
     contrastText: a.neutral.white,
-    text: r[80],
+    text: t[80],
     contrastTextAlt: a.neutral.white,
-    dark: r[100] ?? r[90] ?? r[80],
-    transparent: r[10] ?? r[20]
+    dark: t[100] ?? t[90] ?? t[80],
+    transparent: a.neutral.white
   };
 }
-function g(r) {
+function d(t) {
   return {
-    lighter: r[80],
-    light: r[70],
-    main: r[30],
-    hover: r[20],
-    focus: r[20],
-    border: t.content.border.tertiary.light,
+    lighter: t[80],
+    light: t[70],
+    main: t[30],
+    hover: t[20],
+    focus: t[20],
+    border: r.content.border.tertiary.light,
     active: a.neutral.black,
     contrastText: a.neutral.black,
-    text: r[20],
+    text: t[20],
     contrastTextAlt: a.neutral.black,
-    dark: r[10] ?? r[20],
-    transparent: r[100]
+    dark: t[10] ?? t[20],
+    transparent: a.neutral.black
   };
 }
 export {

package/dist/styles/select/select.d.ts

@@ -0,0 +1,3 @@
+import { ComponentStyles } from '..';
+declare const selectStyles: ComponentStyles;
+export { selectStyles };

package/dist/styles/select/select.js

@@ -0,0 +1,82 @@
+import { colors as e, tokens as r } from "../colors.js";
+import { KeyboardArrowDown as t } from "@mui/icons-material";
+const l = {
+  MuiSelect: {
+    defaultProps: {
+      IconComponent: t
+    },
+    styleOverrides: {
+      root: ({ theme: o }) => ({
+        borderRadius: o.spacing(4),
+        background: o.vars.palette.background.default,
+        outline: "none",
+        border: 0,
+        ".MuiOutlinedInput-notchedOutline": {
+          boxShadow: "none",
+          borderRadius: o.spacing(6),
+          border: `1px solid ${r.content.border.secondary.light}`,
+          ...o.applyStyles("dark", {
+            border: `1px solid ${r.content.border.secondary.dark}`
+          })
+        },
+        "&:hover": {
+          ".MuiOutlinedInput-notchedOutline": {
+            border: `1px solid ${r.content.border.secondary.light}`,
+            ...o.applyStyles("dark", {
+              border: `1px solid ${r.content.border.secondary.dark}`
+            })
+          }
+        },
+        "&.Mui-focused": {
+          borderRadius: o.spacing(6),
+          ".MuiOutlinedInput-notchedOutline": {
+            border: `3px solid ${r.content.border.secondary.light}`,
+            ...o.applyStyles("dark", {
+              border: `3px solid ${r.content.border.secondary.dark}`
+            })
+          },
+          "&.MuiInputBase-colorPrimary": {
+            ".MuiOutlinedInput-notchedOutline": {
+              border: `3px solid ${r.content.border.secondary.light}`,
+              ...o.applyStyles("dark", {
+                border: `3px solid ${r.content.border.secondary.dark}`
+              })
+            },
+            "&.Mui-error": {
+              ".MuiOutlinedInput-notchedOutline": {
+                border: `3px solid ${e.primary.red[40]}`
+              }
+            }
+          },
+          "&.MuiInputBase-colorSuccess": {
+            ".MuiOutlinedInput-notchedOutline": {
+              border: `3px solid ${e.primary.green[40]}`
+            }
+          }
+        }
+      }),
+      select: ({ theme: o }) => {
+        var n;
+        return {
+          color: (n = o.vars) == null ? void 0 : n.palette.text.secondary,
+          fontSize: o.typography.buttonSmall.fontSize,
+          fontWeight: o.typography.buttonSmall.fontWeight,
+          padding: o.spacing(2, 10, 2, 4),
+          "&.MuiInputBase-inputSizeSmall": {
+            padding: o.spacing(1, 10, 1, 4)
+          }
+        };
+      },
+      icon: ({ theme: o }) => {
+        var n;
+        return {
+          color: (n = o.vars) == null ? void 0 : n.palette.text.primaryIcon,
+          fontSize: 18
+        };
+      }
+    }
+  }
+};
+export {
+  l as selectStyles
+};

package/dist/styles/tab/tab.js

@@ -1,9 +1,9 @@
-import { colors as a } from "../colors.js";
-const e = {
+import { colors as e } from "../colors.js";
+const s = {
   MuiTab: {
     styleOverrides: {
       root: ({ theme: t }) => {
-        var o, r;
+        var a, r, o, i;
         return {
           color: t.vars.palette.text.primary,
           borderRadius: 0,
@@ -45,24 +45,48 @@ const e = {
             borderRadius: t.spacing(2),
             opacity: 1,
             "&.Mui-selected": {
-              background: (o = t.vars) == null ? void 0 : o.palette.background.brownBold,
+              background: (a = t.vars) == null ? void 0 : a.palette.background.brownBold,
               color: (r = t.vars) == null ? void 0 : r.palette.text.contrastText
             }
+          },
+          ".MuiTabs-rounded &": {
+            color: t.vars.palette.text.secondary,
+            padding: "0 28px",
+            minHeight: 35,
+            fontSize: 14,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            position: "relative",
+            zIndex: 1,
+            margin: 8,
+            borderRadius: t.spacing(8),
+            opacity: 1,
+            "&.Mui-selected": {
+              color: (o = t.vars) == null ? void 0 : o.palette.background.brownBold,
+              background: (i = t.vars) == null ? void 0 : i.palette.text.contrastText
+            }
           }
         };
       }
     }
   }
-}, n = {
+}, d = {
   MuiTabs: {
     styleOverrides: {
       root: () => ({}),
+      scroller: () => ({
+        ".MuiTabs-rounded &": {
+          display: "flex",
+          width: "auto"
+        }
+      }),
       list: ({ theme: t }) => {
-        var o, r;
+        var a, r, o;
         return {
           counterReset: "MuiTab-root",
           ".MuiTabs-buttons &": {
-            backgroundColor: (o = t.vars) == null ? void 0 : o.palette.background.paper,
+            backgroundColor: (a = t.vars) == null ? void 0 : a.palette.background.paper,
             borderRadius: t.spacing(2),
             border: "1px solid",
             borderColor: (r = t == null ? void 0 : t.vars) == null ? void 0 : r.palette.border.primary,
@@ -71,11 +95,21 @@ const e = {
             justifyContent: "flex-start",
             gap: t.spacing(6),
             padding: 4
+          },
+          ".MuiTabs-rounded &": {
+            backgroundColor: (o = t.vars) == null ? void 0 : o.palette.background.alphaBrown,
+            borderRadius: t.spacing(8),
+            border: "0px solid",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            gap: 0,
+            padding: 0
           }
         };
       },
       indicator: (t) => ({
-        backgroundColor: a.primary.beige[10],
+        backgroundColor: e.primary.beige[10],
         height: "5px",
         top: 0,
         bottom: "auto",
@@ -88,20 +122,23 @@ const e = {
           top: 0,
           bottom: 0,
           margin: "auto",
-          width: "28%",
+          width: "var(--indicator-width, 100%)",
           height: "100%",
           borderRadius: t.theme.spacing(3),
-          backgroundColor: a.primary.coral[100],
+          backgroundColor: e.primary.coral[100],
           transition: "width 0.3s ease"
         },
         ".MuiTabs-buttons &": {
           display: "none"
+        },
+        ".MuiTabs-rounded &": {
+          display: "none"
         }
       })
     }
   }
 };
 export {
-  e as tabStyles,
-  n as tabsStyles
+  s as tabStyles,
+  d as tabsStyles
 };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.9.27",
+  "version": "1.10.1",
   "description": "The Spesia UI toolkit for React",
   "files": [
     "dist"
@@ -26,7 +26,6 @@
   "author": "tinna@spesia.is",
   "license": "ISC",
   "devDependencies": {
-    "@changesets/cli": "^2.29.5",
     "@chromatic-com/storybook": "^5.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",

package/dist/logo.svg

@@ -1,27 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1141.30614295 267.56690745">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #2e8898;
-      }
-    </style>
-  </defs>
-  <g id="Layer_1-2" data-name="Layer 1">
-    <g>
-      <g>
-        <path class="cls-1" d="M31.39714478,122.66193447C31.39714478,60.23646992,78.03020523,8.70349147,138.3606424.99608211,133.22022503.33939701,127.9809798.00000134,122.66207001.00000134,54.91762723.00000134,0,54.91762857,0,122.66193447c0,67.74423746,54.91762723,122.66186469,122.66207001,122.66186469,5.31890979,0,10.55815502-.33939567,15.69857239-.99608077-60.33043717-7.70740936-106.96349762-59.24038781-106.96349762-121.66578392Z"/>
-        <path class="cls-1" d="M82.97816835,122.66193447c0-62.42546455,46.63306045-113.958443,106.96349762-121.66585236C184.8012486.33939701,179.56200337.00000134,174.24309358.00000134,106.4986508.00000134,51.58102357,54.91762857,51.58102357,122.66193447c0,67.74423746,54.91762723,122.66186469,122.66207001,122.66186469,5.31890979,0,10.55815502-.33939567,15.69857239-.99608077-60.33043717-7.70740936-106.96349762-59.24038781-106.96349762-121.66578392Z"/>
-        <circle class="cls-1" cx="225.82401894" cy="122.66190085" r="122.66190085"/>
-      </g>
-      <g>
-        <path class="cls-1" d="M442.7963609,202.09475808c-8.74807894-3.82401055-15.61782784-9.25245919-20.61373673-16.27935921-5.00039893-7.02690002-7.49536002-15.22569838-7.49536002-24.59639508h28.57755675c.62261777,7.0283967,3.39596084,12.80706783,8.31553919,17.33451672,4.91957835,4.53193893,11.82973754,6.79341836,20.73047756,6.79341836,9.21204891,0,16.39759672-2.22555918,21.55065673-6.67667753,5.15306001-4.44962167,7.73033836-10.1893792,7.73033836-17.21627921,0-5.4643689-1.60294141-9.91548725-4.80283752-13.35185837-3.20139279-3.43337777-7.18405114-6.08998002-11.94647837-7.9653167-4.76542059-1.87384-11.35978086-3.9003411-19.79355756-6.08998002-10.62191894-2.81076001-19.24876701-5.65893695-25.88353757-8.54902085-6.63926059-2.88858723-12.29819754-7.37861919-16.98279755-13.47009588-4.68460001-6.08998002-7.02690002-14.2079578-7.02690002-24.36141674,0-9.36920002,2.34230001-17.56799838,7.02690002-24.5948984,4.68460001-7.0283967,11.24304003-12.41493837,19.67681673-16.16411506,8.43228002-3.74768001,18.19061615-5.62152001,29.27949841-5.62152001,15.7719856,0,28.69579426,3.94524142,38.76843262,11.82973754,10.07263836,7.88748948,15.65374809,18.70247979,16.74781921,32.44347427h-29.51447675c-.46846-5.9328289-3.27922001-11.00955837-8.43228002-15.22719506-5.15306001-4.21614001-11.94647837-6.32346168-20.38025507-6.32346168-7.65251114,0-13.90113895,1.95466058-18.73840005,5.85500168-4.84324781,3.90632781-7.26187836,9.52784782-7.26187836,16.86605672,0,5.00039893,1.52212083,9.09979811,4.56785918,12.29819754,3.04424167,3.20288947,6.91015919,5.73826085,11.5947592,7.61359753,4.68460001,1.87384,11.08588891,3.90483113,19.20835673,6.08998002,10.77458003,2.96791113,19.55857922,5.93582225,26.35199758,8.90074002,6.79341836,2.96791113,12.56909613,7.53577031,17.33451672,13.70357754,4.76093056,6.17080059,7.14364085,14.40551921,7.14364085,24.71313591,0,8.27812226-2.2240625,16.08628784-6.67518085,23.42449674-4.45111835,7.34120226-10.93322782,13.23511754-19.44183839,17.68473921-8.51459727,4.45111835-18.54682535,6.67667753-30.10117426,6.67667753-10.93322782,0-20.77088785-1.91125694-29.51447675-5.73975752Z"/>
-        <path class="cls-1" d="M595.99026468,81.10785355c7.8066689-4.05898889,16.63107838-6.08998002,26.46873841-6.08998002,11.24453671,0,21.51024645,2.77334307,30.80311593,8.31553919,9.28987613,5.54518947,16.59216477,13.31444144,21.9023759,23.30775591,5.30721778,9.99481114,7.96382002,21.47282951,7.96382002,34.43255843,0,12.96421895-2.65660224,24.56047482-7.96382002,34.78577427-5.31021113,10.22978948-12.61249978,18.19510618-21.9023759,23.89295674-9.29286948,5.70234059-19.55857922,8.55051753-30.80311593,8.55051753-9.83766003,0-18.58573896-1.99058084-26.23525674-5.97323918-7.65251114-3.98265835-13.90113895-8.93815696-18.73989673-14.87547588v80.11264692h-26.70371675V77.1251952h26.70371675v18.97487506c4.52744889-5.93432557,10.69525613-10.93023447,18.50641506-14.99221672ZM650.45135901,118.00094949c-3.67134947-6.47761944-8.5131006-11.39719779-14.52226004-14.75723838-6.01364947-3.35555055-12.45534866-5.03631918-19.32509756-5.03631918-6.71708781,0-13.08245646,1.72117892-19.0916159,5.15306001-6.01364947,3.4378678-10.8554006,8.4337767-14.52375671,14.99221672-3.66985279,6.55844002-5.50477918,14.28877838-5.50477918,23.19101508,0,8.90074002,1.83492639,16.67148867,5.50477918,23.30625923,3.66835611,6.63926059,8.51010724,11.67557977,14.52375671,15.10895755,6.00915944,3.43637113,12.37452808,5.15306001,19.0916159,5.15306001,6.8697489,0,13.31144809-1.7556025,19.32509756-5.26980084,6.00915944-3.51419835,10.85091057-8.62684807,14.52226004-15.34393589,3.66835611-6.71259778,5.50477918-14.52226004,5.50477918-23.42449674,0-8.90074002-1.83642307-16.59066809-5.50477918-23.07277757Z"/>
-        <path class="cls-1" d="M822.26841868,151.61482542h-98.6175653c.77976888,10.3076167,4.60377944,18.58723564,11.47801837,24.82987674,6.8697489,6.24862781,15.3035256,9.3706967,25.29833674,9.3706967,14.3666056,0,24.5155745-6.01065612,30.45139676-18.03645838h28.81253509c-3.90483113,11.86865115-10.97214143,21.58957034-21.19893756,29.16275758-10.22978948,7.57618059-22.92011648,11.36127754-38.06499428,11.36127754-12.33860783,0-23.3870798-2.77034972-33.14541593-8.31553919-9.76132948-5.54219612-17.4153373-13.35185837-22.95603674-23.42449674-5.54518947-10.07263836-8.31553919-21.74522478-8.31553919-35.01925594,0-13.27253447,2.69401918-24.94811425,8.08056085-35.02075261,5.38803835-10.07263836,12.96122559-17.83889698,22.72255507-23.30625923,9.75833613-5.46586557,20.9654559-8.19879836,33.61387593-8.19879836,12.18145671,0,23.03236728,2.65660224,32.5602151,7.96382002,9.52335779,5.31021113,16.94238726,12.76665754,22.2525984,22.3708359,5.30721778,9.60417836,7.9653167,20.65265034,7.9653167,33.14541593,0,4.84175113-.31579891,9.21653894-.93692,13.11688003ZM795.3297236,130.06566537c-.15715112-9.8391567-3.67134947-17.72215615-10.54109837-23.65947508-6.87274225-5.9328289-15.3828495-8.90074002-25.5318184-8.90074002-9.21653894,0-17.10103506,2.92750084-23.65947508,8.78399919-6.55844002,5.85649835-10.46476782,13.78290144-11.71150003,23.77621591h71.44389188Z"/>
-        <path class="cls-1" d="M864.31307796,202.79819642c-8.0446406-3.66835611-14.40701588-8.66725836-19.0916159-14.99221672s-7.18405114-13.38777863-7.49536002-21.19893756h27.64063675c.46846,5.46885893,3.0816586,10.03671811,7.84707919,13.70357754,4.76242723,3.67134947,10.73566642,5.50477918,17.91971755,5.50477918,7.4968567,0,13.31144809-1.44279694,17.45125755-4.33437752,4.13681611-2.88709055,6.20821752-6.59436027,6.20821752-11.1262992,0-4.83875778-2.30637975-8.43228002-6.91015919-10.77458003-4.60826947-2.34230001-11.91055811-4.91957835-21.9023759-7.73033836-9.68499894-2.65360889-17.56799838-5.23088723-23.65947508-7.73033836-6.08998002-2.49645777-11.35978086-6.32495835-15.81089921-11.47801837s-6.67518085-11.94647837-6.67518085-20.37875839c0-6.8697489,2.02650109-13.15429697,6.08998002-18.85663756,4.05898889-5.69934724,9.87507696-10.1893792,17.45125755-13.47009588,7.57169056-3.27922001,16.27935921-4.91808167,26.11851591-4.91808167,14.6764178,0,26.50615534,3.71026308,35.48771594,11.1262992,8.97856724,7.41902948,13.77990809,17.53207813,14.40551921,30.33465592h-26.70371675c-.46846-5.77567778-2.81076001-10.38394725-7.02690002-13.82031837-4.21614001-3.43337777-9.9184806-5.15306001-17.09953838-5.15306001-7.0283967,0-12.41493837,1.32755278-16.16411506,3.98116167-3.74768001,2.65809892-5.62152001,6.17080059-5.62152001,10.54109837,0,3.4378678,1.24822888,6.32495835,3.74768001,8.66725836,2.49645777,2.34230001,5.54219612,4.18021976,9.13571836,5.50477918,3.59052889,1.32904946,8.9022367,3.00832141,15.92913672,5.03631918,9.36920002,2.49945112,17.05912809,5.03631918,23.07277757,7.61359753,6.01065612,2.57578167,11.20412642,6.36387197,15.57741755,11.35978086,4.37029777,5.00039893,6.63626724,11.63666616,6.79341836,19.91179507,0,7.34120226-2.03099112,13.90113895-6.08998002,19.67681673-4.06347892,5.77867113-9.80173977,10.30612003-17.21777589,13.58534003-7.41902948,3.27922001-16.12669812,4.91957835-26.11851591,4.91957835-10.15196226,0-19.24727034-1.83791975-27.28891758-5.50477918Z"/>
-        <path class="cls-1" d="M1002.63449921,42.45765843l-51.76857183,25.5318184v-19.67532005l51.76857183-28.57905343v22.72255507ZM991.8584225,77.1251952v129.06896206h-26.70371675V77.1251952h26.70371675Z"/>
-        <path class="cls-1" d="M1016.8035434,106.64116863c5.38803835-9.99331447,12.72624725-17.76256644,22.01911673-23.30775591,9.28987613-5.54219612,19.5600759-8.31553919,30.80311593-8.31553919,10.15046559,0,19.01079532,1.99058084,26.58697591,5.97323918,7.57318724,3.98116167,13.62275697,8.94115031,18.15469589,14.87397921v-18.73989673h26.93869509v129.06896206h-26.93869509v-19.20835673c-4.53193893,6.09147669-10.69824948,11.16820616-18.50491839,15.22719506-7.81115893,4.05898889-16.71189896,6.08998002-26.70521342,6.08998002-11.08888226,0-21.23934785-2.84817694-30.45139676-8.55051753-9.21653894-5.69785056-16.51433755-13.66316726-21.9023759-23.89295674-5.38654168-10.22529945-8.08056085-21.82155533-8.08056085-34.78577427,0-12.95972892,2.69401918-24.43774728,8.08056085-34.43255843ZM1108.86266868,118.35266866c-3.67134947-6.55844002-8.47269031-11.55434891-14.40551921-14.99221672-5.93731893-3.4318811-12.33860783-5.15306001-19.20835673-5.15306001-6.87423893,0-13.27552783,1.68076863-19.20835673,5.03631918-5.93731893,3.36004058-10.73865977,8.27961894-14.40551921,14.75723838-3.67134947,6.48210947-5.50477918,14.17203754-5.50477918,23.07277757,0,8.9022367,1.83342972,16.71189896,5.50477918,23.42449674,3.66685943,6.71708781,8.50861056,11.82973754,14.52226004,15.34393589,6.01065612,3.51419835,12.37452808,5.26980084,19.0916159,5.26980084,6.8697489,0,13.2710378-1.71668889,19.20835673-5.15306001,5.9328289-3.43337777,10.73416974-8.46969695,14.40551921-15.10895755,3.66685943-6.63477056,5.50477918-14.40551921,5.50477918-23.30625923,0-8.9022367-1.83791975-16.63257506-5.50477918-23.19101508Z"/>
-      </g>
-    </g>
-  </g>
-</svg>