@zesty-io/material 0.13.1 → 0.14.0

package/es/theme/index.d.ts

@@ -1,3 +1,4 @@
+import { Theme } from "@mui/material/styles";
 declare module "@mui/material/styles" {
     interface Palette {
         border: string;
@@ -14,5 +15,5 @@ declare module "@mui/material/Button" {
         xsmall: true;
     }
 }
-export declare let theme: import("@mui/material/styles").Theme;
-export declare let darkTheme: import("@mui/material/styles").Theme;
+export declare let theme: Theme;
+export declare let darkTheme: Theme;

package/es/theme/index.js

@@ -1,6 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { lightThemePalette, darkThemePalette } from "./palette";
 import typography from "./typography";
 import { alpha, createTheme } from "@mui/material/styles";
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
 const components = {
     MuiFormLabel: {
         styleOverrides: {
@@ -217,7 +219,7 @@ const components = {
     MuiDialog: {
         styleOverrides: {
             paper: {
-                borderRadius: "8px",
+                borderRadius: "4px",
             },
             paperWidthXs: {
                 width: "480px",
@@ -306,12 +308,13 @@ const components = {
     },
     MuiChip: {
         styleOverrides: {
-            root: {
+            root: ({ theme }) => ({
                 borderRadius: "4px",
-            },
+            }),
             // @ts-ignore
             colorDefault: ({ theme }) => ({
                 backgroundColor: theme.palette.grey[100],
+                color: theme.palette.text.secondary,
                 ":hover": {
                     backgroundColor: theme.palette.grey[200],
                 },
@@ -319,6 +322,28 @@ const components = {
                     backgroundColor: theme.palette.grey[300],
                 },
             }),
+            colorInfo: ({ theme }) => ({
+                backgroundColor: theme.palette.blue[100],
+                color: theme.palette.blue[600],
+            }),
+            colorSuccess: ({ theme }) => ({
+                backgroundColor: theme.palette.green[50],
+                color: theme.palette.green[600],
+            }),
+            colorWarning: ({ theme }) => ({
+                backgroundColor: theme.palette.yellow[100],
+                color: theme.palette.yellow[600],
+            }),
+            colorError: ({ theme }) => ({
+                backgroundColor: theme.palette.red[100],
+                color: theme.palette.red[600],
+            }),
+            sizeSmall: ({ theme }) => ({
+                "& .MuiChip-label": {
+                    ...theme.typography.body3,
+                    fontWeight: 600,
+                },
+            }),
         },
     },
     MuiAlert: {
@@ -596,7 +621,17 @@ const components = {
                 color: "text.disabled",
             },
         },
-    }
+    },
+    MuiAutocomplete: {
+        defaultProps: {
+            popupIcon: _jsx(KeyboardArrowDownRoundedIcon, {}),
+        },
+    },
+    MuiSelect: {
+        defaultProps: {
+            IconComponent: KeyboardArrowDownRoundedIcon,
+        },
+    },
 };
 export let theme = createTheme({
     typography,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zesty-io/material",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "Contains custom components which are in addition to the @mui design-system",
   "author": "Zesty.io",
   "license": "MIT",