@lunit/design-system 1.0.0-a.3 → 1.0.0-a.4

package/dist/components/Alert/Alert.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Success from "@lunit/design-system-icons/Success16";
+import Error from "@lunit/design-system-icons/Error16";
+import Warning from "@lunit/design-system-icons/Warning16";
+import Information from "@lunit/design-system-icons/Information16";
+import Close from "@lunit/design-system-icons/Close";
 import { forwardRef } from "react";
 import { StyledAlert, StyledAlertTitle, StyledAlertChildren, StyledBottomAction, } from "./Alert.styled";
-import { Close, Success, Error, Warning, Information, } from "@lunit/design-system-icons";
 import Button from "../Button";
 const MAPPED_ICON = {
     success: _jsx(Success, { variant: "filled" }),

package/dist/components/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,KAAK,EACL,OAAO,EACP,KAAK,EACL,OAAO,EACP,WAAW,GACZ,MAAM,4BAA4B,CAAC;AACpC,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,MAAM,WAAW,GAAG;IAClB,OAAO,EAAE,KAAC,OAAO,IAAC,OAAO,EAAC,QAAQ,GAAG;IACrC,IAAI,EAAE,KAAC,WAAW,IAAC,OAAO,EAAC,QAAQ,GAAG;IACtC,OAAO,EAAE,KAAC,OAAO,IAAC,OAAO,EAAC,QAAQ,GAAG;IACrC,KAAK,EAAE,KAAC,KAAK,IAAC,OAAO,EAAC,QAAQ,GAAG;CAClC,CAAC;AAEF,MAAM,KAAK,GAAG,UAAU,CAA6B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAClE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC5E,OAAO,CACL,MAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE;YACL,WAAW,EAAE,GAAG,EAAE,CAAC,CACjB,KAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,KAAC,KAAK,KAAG,EACf,OAAO,EAAE,OAAO,GAChB,CACH;SACF,EACD,OAAO,EAAE,OAAO,KACZ,IAAI,aAEP,KAAK,IAAI,KAAC,gBAAgB,cAAE,KAAK,GAAoB,EACtD,KAAC,mBAAmB,cAAE,QAAQ,GAAuB,EACpD,YAAY,IAAI,KAAC,kBAAkB,cAAE,YAAY,GAAsB,IAC5D,CACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,OAAO,MAAM,sCAAsC,CAAC;AAC3D,OAAO,KAAK,MAAM,oCAAoC,CAAC;AACvD,OAAO,OAAO,MAAM,sCAAsC,CAAC;AAC3D,OAAO,WAAW,MAAM,0CAA0C,CAAC;AACnE,OAAO,KAAK,MAAM,kCAAkC,CAAC;AAErD,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,gBAAgB,CAAC;AAExB,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,MAAM,WAAW,GAAG;IAClB,OAAO,EAAE,KAAC,OAAO,IAAC,OAAO,EAAC,QAAQ,GAAG;IACrC,IAAI,EAAE,KAAC,WAAW,IAAC,OAAO,EAAC,QAAQ,GAAG;IACtC,OAAO,EAAE,KAAC,OAAO,IAAC,OAAO,EAAC,QAAQ,GAAG;IACrC,KAAK,EAAE,KAAC,KAAK,IAAC,OAAO,EAAC,QAAQ,GAAG;CAClC,CAAC;AAEF,MAAM,KAAK,GAAG,UAAU,CAA6B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAClE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC5E,OAAO,CACL,MAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE;YACL,WAAW,EAAE,GAAG,EAAE,CAAC,CACjB,KAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,KAAC,KAAK,KAAG,EACf,OAAO,EAAE,OAAO,GAChB,CACH;SACF,EACD,OAAO,EAAE,OAAO,KACZ,IAAI,aAEP,KAAK,IAAI,KAAC,gBAAgB,cAAE,KAAK,GAAoB,EACtD,KAAC,mBAAmB,cAAE,QAAQ,GAAuB,EACpD,YAAY,IAAI,KAAC,kBAAkB,cAAE,YAAY,GAAsB,IAC5D,CACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/dist/components/Alert/Alert.styled.js

@@ -1,24 +1,25 @@
 import { Alert as MuiAlert, AlertTitle as MuiAlertTitle, styled, } from "@mui/material";
-import { getBorderColor, getBackgroundColor, getIconColor, } from "./Alert.utils.";
-export const StyledAlert = styled(MuiAlert)(({ severity }) => ({
+import { getBorderColor, getBackgroundColor, getIconColor, } from "./Alert.utils";
+export const StyledAlert = styled(MuiAlert)(({ severity, theme }) => ({
     "&.MuiAlert-root": {
         display: "flex",
-        padding: "15px",
+        padding: "12px",
         borderRadius: "8px",
-        border: `1px solid ${getBorderColor(severity)}`,
-        backgroundColor: getBackgroundColor(severity),
+        border: `1px solid ${getBorderColor(theme, severity)}`,
+        backgroundColor: getBackgroundColor(theme, severity),
         boxShadow: "none",
     },
     "& .MuiAlert-icon": {
         padding: "4px",
+        marginRight: "0",
         fontSize: "20px",
-        marginRight: "16px",
-        color: `${getIconColor(severity)} !important`,
+        color: `${getIconColor(theme, severity)} !important`,
     },
     "& .MuiAlert-message": {
-        padding: "4px 0",
         width: "100%",
         minHeight: "28px",
+        padding: "4px 0 0",
+        margin: "0 8px 0 8px",
     },
     "& .MuiAlert-action": {
         margin: 0,

package/dist/components/Alert/Alert.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.styled.js","sourceRoot":"","sources":["../../../src/components/Alert/Alert.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,IAAI,QAAQ,EACjB,UAAU,IAAI,aAAa,EAC3B,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,YAAY,GACb,MAAM,gBAAgB,CAAC;AAExB,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IACzE,iBAAiB,EAAE;QACjB,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,MAAM;QACf,YAAY,EAAE,KAAK;QACnB,MAAM,EAAE,aAAa,cAAc,CAAC,QAAQ,CAAC,EAAE;QAC/C,eAAe,EAAE,kBAAkB,CAAC,QAAQ,CAAC;QAC7C,SAAS,EAAE,MAAM;KAClB;IACD,kBAAkB,EAAE;QAClB,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,MAAM;QAChB,WAAW,EAAE,MAAM;QACnB,KAAK,EAAE,GAAG,YAAY,CAAC,QAAQ,CAAC,aAAa;KAC9C;IACD,qBAAqB,EAAE;QACrB,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,MAAM;KAClB;IACD,oBAAoB,EAAE;QACpB,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,CAAC;KACX;IACD,oBAAoB,EAAE;QACpB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACpE,sBAAsB,EAAE;QACtB,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,CAAC;QACf,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,MAAM;QAClB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW;KAC5C;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/D,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW;CAC5C,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,EAAE,MAAM;CAClB,CAAC,CAAC"}
+{"version":3,"file":"Alert.styled.js","sourceRoot":"","sources":["../../../src/components/Alert/Alert.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,IAAI,QAAQ,EACjB,UAAU,IAAI,aAAa,EAC3B,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,YAAY,GACb,MAAM,eAAe,CAAC;AAEvB,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CACzC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACxB,iBAAiB,EAAE;QACjB,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,MAAM;QACf,YAAY,EAAE,KAAK;QACnB,MAAM,EAAE,aAAa,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE;QACtD,eAAe,EAAE,kBAAkB,CAAC,KAAK,EAAE,QAAQ,CAAC;QACpD,SAAS,EAAE,MAAM;KAClB;IACD,kBAAkB,EAAE;QAClB,OAAO,EAAE,KAAK;QACd,WAAW,EAAE,GAAG;QAChB,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,GAAG,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa;KACrD;IACD,qBAAqB,EAAE;QACrB,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,MAAM;QACjB,OAAO,EAAE,SAAS;QAClB,MAAM,EAAE,aAAa;KACtB;IACD,oBAAoB,EAAE;QACpB,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,CAAC;KACX;IACD,oBAAoB,EAAE;QACpB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACpE,sBAAsB,EAAE;QACtB,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,CAAC;QACf,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,MAAM;QAClB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW;KAC5C;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/D,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW;CAC5C,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,EAAE,MAAM;CAClB,CAAC,CAAC"}

package/dist/components/Alert/{Alert.utils..js → Alert.utils.js}

@@ -1,5 +1,4 @@
-import theme from "@/theme";
-export const getBackgroundColor = (severity) => {
+export const getBackgroundColor = (theme, severity) => {
     switch (severity) {
         case "info":
             return theme.palette.token.component.alert_info_bg;
@@ -11,7 +10,7 @@ export const getBackgroundColor = (severity) => {
             return theme.palette.token.component.alert_success_bg;
     }
 };
-export const getBorderColor = (severity) => {
+export const getBorderColor = (theme, severity) => {
     switch (severity) {
         case "info":
             return theme.palette.token.component.alert_info_border;
@@ -23,7 +22,7 @@ export const getBorderColor = (severity) => {
             return theme.palette.token.component.alert_success_border;
     }
 };
-export const getIconColor = (severity) => {
+export const getIconColor = (theme, severity) => {
     switch (severity) {
         case "info":
             return theme.palette.token.core.icon_info_02;
@@ -35,4 +34,4 @@ export const getIconColor = (severity) => {
             return theme.palette.token.core.icon_success_02;
     }
 };
-//# sourceMappingURL=Alert.utils..js.map
+//# sourceMappingURL=Alert.utils.js.map

package/dist/components/Alert/Alert.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.utils.js","sourceRoot":"","sources":["../../../src/components/Alert/Alert.utils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,KAAY,EACZ,QAAgC,EAChC,EAAE;IACF,QAAQ,QAAQ,EAAE;QAChB,KAAK,MAAM;YACT,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;QACrD,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC;QACxD,KAAK,OAAO;YACV,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;QACtD;YACE,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC;KACzD;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,KAAY,EACZ,QAAgC,EAChC,EAAE;IACF,QAAQ,QAAQ,EAAE;QAChB,KAAK,MAAM;YACT,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;QACzD,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC;QAC5D,KAAK,OAAO;YACV,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,kBAAkB,CAAC;QAC1D;YACE,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC;KAC7D;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,KAAY,EACZ,QAAgC,EAChC,EAAE;IACF,QAAQ,QAAQ,EAAE;QAChB,KAAK,MAAM;YACT,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC;QAC/C,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;QAClD,KAAK,OAAO;YACV,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC;QAChD;YACE,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;KACnD;AACH,CAAC,CAAC"}

package/dist/components/Toast/Toast.styled.js

@@ -17,7 +17,7 @@ export const StyledToast = styled(Alert)(({ theme, severity }) => {
             height: "36px",
             marginRight: "16px",
             fontSize: 20,
-            color: `${getIconColor(severity)}`,
+            color: `${getIconColor(theme, severity)}`,
             "& .MuiSvgIcon-root": {
                 height: "16px",
                 width: "16px",

package/dist/components/Toast/Toast.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.styled.js","sourceRoot":"","sources":["../../../src/components/Toast/Toast.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/D,OAAO;QACL,wBAAwB,EAAE;YACxB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;SACrB;QACD,iBAAiB,EAAE;YACjB,OAAO,EAAE,mBAAmB;YAC5B,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW;YAC3C,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK;YAC/C,YAAY,EAAE,KAAK;SACpB;QACD,kBAAkB,EAAE;YAClB,MAAM,EAAE,MAAM;YACd,WAAW,EAAE,MAAM;YACnB,QAAQ,EAAE,EAAE;YACZ,KAAK,EAAE,GAAG,YAAY,CAAC,QAAQ,CAAC,EAAE;YAClC,oBAAoB,EAAE;gBACpB,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,MAAM;aACd;SACF;QACD,qBAAqB,EAAE;YACrB,uCAAuC;YACvC,QAAQ,EAAE,OAAO;YACjB,SAAS,EAAE,MAAM;YACjB,OAAO,EAAE,aAAa;YACtB,UAAU,EAAE,GAAG;YACf,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,MAAM;YAClB,kBAAkB,EAAE;gBAClB,OAAO,EAAE,OAAO;aACjB;SACF;QACD,oBAAoB,EAAE;YACpB,SAAS,EAAE,YAAY;YACvB,SAAS,EAAE,MAAM;YACjB,WAAW,EAAE,KAAK;YAClB,OAAO,EAAE,CAAC;YACV,oBAAoB,EAAE;gBACpB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW;aAC5C;SACF;KACF,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Toast.styled.js","sourceRoot":"","sources":["../../../src/components/Toast/Toast.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/D,OAAO;QACL,wBAAwB,EAAE;YACxB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;SACrB;QACD,iBAAiB,EAAE;YACjB,OAAO,EAAE,mBAAmB;YAC5B,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW;YAC3C,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK;YAC/C,YAAY,EAAE,KAAK;SACpB;QACD,kBAAkB,EAAE;YAClB,MAAM,EAAE,MAAM;YACd,WAAW,EAAE,MAAM;YACnB,QAAQ,EAAE,EAAE;YACZ,KAAK,EAAE,GAAG,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE;YACzC,oBAAoB,EAAE;gBACpB,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,MAAM;aACd;SACF;QACD,qBAAqB,EAAE;YACrB,uCAAuC;YACvC,QAAQ,EAAE,OAAO;YACjB,SAAS,EAAE,MAAM;YACjB,OAAO,EAAE,aAAa;YACtB,UAAU,EAAE,GAAG;YACf,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,MAAM;YAClB,kBAAkB,EAAE;gBAClB,OAAO,EAAE,OAAO;aACjB;SACF;QACD,oBAAoB,EAAE;YACpB,SAAS,EAAE,YAAY;YACvB,SAAS,EAAE,MAAM;YACjB,WAAW,EAAE,KAAK;YAClB,OAAO,EAAE,CAAC;YACV,oBAAoB,EAAE;gBACpB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW;aAC5C;SACF;KACF,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/Toast/Toast.utils.js

@@ -1,5 +1,4 @@
-import theme from "@/theme";
-export const getIconColor = (severity) => {
+export const getIconColor = (theme, severity) => {
     switch (severity) {
         case "info":
             return theme.palette.token.core.icon_info_02;

package/dist/components/Toast/Toast.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.utils.js","sourceRoot":"","sources":["../../../src/components/Toast/Toast.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,SAAS,CAAC;AAG5B,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,QAAgC,EAAE,EAAE;IAC/D,QAAQ,QAAQ,EAAE;QAChB,KAAK,MAAM;YACT,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC;QAC/C,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;QAClD,KAAK,OAAO;YACV,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC;QAChD;YACE,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;KACnD;AACH,CAAC,CAAC"}
+{"version":3,"file":"Toast.utils.js","sourceRoot":"","sources":["../../../src/components/Toast/Toast.utils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,KAAY,EACZ,QAAgC,EAChC,EAAE;IACF,QAAQ,QAAQ,EAAE;QAChB,KAAK,MAAM;YACT,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC;QAC/C,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;QAClD,KAAK,OAAO;YACV,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC;QAChD;YACE,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;KACnD;AACH,CAAC,CAAC"}

package/dist/types/components/Alert/Alert.utils.d.ts

@@ -0,0 +1,4 @@
+import { AlertColor, Theme } from "@mui/material";
+export declare const getBackgroundColor: (theme: Theme, severity: AlertColor | undefined) => import("csstype").Property.Color | undefined;
+export declare const getBorderColor: (theme: Theme, severity: AlertColor | undefined) => import("csstype").Property.Color | undefined;
+export declare const getIconColor: (theme: Theme, severity: AlertColor | undefined) => import("csstype").Property.Color | undefined;

package/dist/types/components/Button/Button.d.ts

@@ -1,3 +1,3 @@
 import type { ButtonProps } from "./Button.types";
-declare const Button: (props: ButtonProps) => JSX.Element;
+declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/types/components/Button/Button.styled.d.ts

@@ -881,7 +881,7 @@ export declare const iconStyle: ({ size, hasIconOnly, }: Pick<CustomButtonProps,
 export declare const CustomButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "primary" | "secondary" | "error" | "warning" | "success" | "info" | undefined;
+    color?: "success" | "info" | "warning" | "error" | "inherit" | "primary" | "secondary" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
@@ -891,7 +891,7 @@ export declare const CustomButton: import("@emotion/styled").StyledComponent<{
     size?: "small" | "medium" | "large" | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "outlined" | "text" | "contained" | undefined;
+    variant?: "text" | "outlined" | "contained" | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;
@@ -910,5 +910,5 @@ export declare const CustomButton: import("@emotion/styled").StyledComponent<{
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "size" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CustomButtonProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "tabIndex" | "color" | "action" | "href" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "size" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CustomButtonProps, {}, {}>;
 export {};

package/dist/types/components/Checkbox/Checkbox.d.ts

@@ -1,3 +1,3 @@
 import type { CheckboxProps } from "@mui/material";
-declare const Checkbox: (props: CheckboxProps) => JSX.Element;
+declare const Checkbox: (props: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
 export default Checkbox;

package/dist/types/components/Chip/Chip.d.ts

@@ -1,3 +1,3 @@
 import type { ChipProps } from "./Chip.types";
-declare const Chip: (props: ChipProps) => JSX.Element;
+declare const Chip: (props: ChipProps) => import("react/jsx-runtime").JSX.Element;
 export default Chip;

package/dist/types/components/Chip/Chip.styled.d.ts

@@ -6,7 +6,7 @@ export declare const StyledOutlinedChip: import("@emotion/styled").StyledCompone
     children?: null | undefined;
     classes?: Partial<import("@mui/material").ChipClasses> | undefined;
     clickable?: boolean | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "success" | "default" | "info" | undefined;
+    color?: "success" | "info" | "warning" | "error" | "primary" | "secondary" | "default" | undefined;
     deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     disabled?: boolean | undefined;
     icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
@@ -16,16 +16,16 @@ export declare const StyledOutlinedChip: import("@emotion/styled").StyledCompone
     skipFocusWhenDisabled?: boolean | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
     tabIndex?: number | undefined;
-    variant?: "outlined" | "filled" | undefined;
+    variant?: "filled" | "outlined" | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "disabled" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "size" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & OutlinedChipProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "color" | "icon" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & OutlinedChipProps, {}, {}>;
 export declare const StyledContainedChipBase: import("@emotion/styled").StyledComponent<{
     avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     children?: null | undefined;
     classes?: Partial<import("@mui/material").ChipClasses> | undefined;
     clickable?: boolean | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "success" | "default" | "info" | undefined;
+    color?: "success" | "info" | "warning" | "error" | "primary" | "secondary" | "default" | undefined;
     deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     disabled?: boolean | undefined;
     icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
@@ -35,16 +35,16 @@ export declare const StyledContainedChipBase: import("@emotion/styled").StyledCo
     skipFocusWhenDisabled?: boolean | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
     tabIndex?: number | undefined;
-    variant?: "outlined" | "filled" | undefined;
+    variant?: "filled" | "outlined" | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "disabled" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "size" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "color" | "icon" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
 export declare const StyledContainedChipEnable: import("@emotion/styled").StyledComponent<{
     avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     children?: null | undefined;
     classes?: Partial<import("@mui/material").ChipClasses> | undefined;
     clickable?: boolean | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "success" | "default" | "info" | undefined;
+    color?: "success" | "info" | "warning" | "error" | "primary" | "secondary" | "default" | undefined;
     deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     disabled?: boolean | undefined;
     icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
@@ -54,16 +54,16 @@ export declare const StyledContainedChipEnable: import("@emotion/styled").Styled
     skipFocusWhenDisabled?: boolean | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
     tabIndex?: number | undefined;
-    variant?: "outlined" | "filled" | undefined;
+    variant?: "filled" | "outlined" | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "disabled" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "size" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps & EnableContainedChipProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "color" | "icon" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps & EnableContainedChipProps, {}, {}>;
 export declare const StyledContainedChipDeletable: import("@emotion/styled").StyledComponent<{
     avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     children?: null | undefined;
     classes?: Partial<import("@mui/material").ChipClasses> | undefined;
     clickable?: boolean | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "success" | "default" | "info" | undefined;
+    color?: "success" | "info" | "warning" | "error" | "primary" | "secondary" | "default" | undefined;
     deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     disabled?: boolean | undefined;
     icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
@@ -73,7 +73,7 @@ export declare const StyledContainedChipDeletable: import("@emotion/styled").Sty
     skipFocusWhenDisabled?: boolean | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
     tabIndex?: number | undefined;
-    variant?: "outlined" | "filled" | undefined;
+    variant?: "filled" | "outlined" | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "disabled" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "size" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "color" | "icon" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;

package/dist/types/components/DataTable/DataTable.d.ts

@@ -1,2 +1,2 @@
-declare const DataTable: () => JSX.Element;
+declare const DataTable: () => import("react/jsx-runtime").JSX.Element;
 export default DataTable;

package/dist/types/components/DatePicker/DatePicker.d.ts

@@ -1,2 +1,2 @@
-declare const DatePicker: () => JSX.Element;
+declare const DatePicker: () => import("react/jsx-runtime").JSX.Element;
 export default DatePicker;

package/dist/types/components/Dropdown/Dropdown.d.ts

@@ -1,2 +1,2 @@
-declare const Dropdown: () => JSX.Element;
+declare const Dropdown: () => import("react/jsx-runtime").JSX.Element;
 export default Dropdown;

package/dist/types/components/FormLabel/FormLabel.d.ts

@@ -1,3 +1,3 @@
 import { FormControlLabelProps } from "@mui/material";
-declare const FormLabel: (props: FormControlLabelProps) => JSX.Element;
+declare const FormLabel: (props: FormControlLabelProps) => import("react/jsx-runtime").JSX.Element;
 export default FormLabel;

package/dist/types/components/Modal/Modal.d.ts

@@ -1,2 +1,2 @@
-declare const Modal: () => JSX.Element;
+declare const Modal: () => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/dist/types/components/Radio/Radio.d.ts

@@ -1,3 +1,3 @@
 import { RadioProps } from "@mui/material/Radio";
-declare const Radio: (props: RadioProps) => JSX.Element;
+declare const Radio: (props: RadioProps) => import("react/jsx-runtime").JSX.Element;
 export default Radio;

package/dist/types/components/TextField/TextField.d.ts

@@ -1,3 +1,3 @@
 import type { TextFieldProps } from "./TextField.types";
-declare const TextField: (props: TextFieldProps) => JSX.Element;
+declare const TextField: (props: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default TextField;

package/dist/types/components/TextField/TextFieldIcon.d.ts

@@ -4,5 +4,5 @@ interface TextFieldProps {
     icon: JSX.Element;
     onIconClick?: () => void;
 }
-declare const TextFieldIcon: ({ sx, icon, onIconClick }: TextFieldProps) => JSX.Element;
+declare const TextFieldIcon: ({ sx, icon, onIconClick }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default TextFieldIcon;

package/dist/types/components/Toast/Toast.utils.d.ts

@@ -1,2 +1,2 @@
-import type { AlertColor } from "@mui/material";
-export declare const getIconColor: (severity: AlertColor | undefined) => import("csstype").Property.Color | undefined;
+import type { AlertColor, Theme } from "@mui/material";
+export declare const getIconColor: (theme: Theme, severity: AlertColor | undefined) => import("csstype").Property.Color | undefined;

package/dist/types/components/Toggle/Toggle.d.ts

@@ -1,3 +1,3 @@
 import type { ToggleProps } from './Toggle.types';
-declare const Toggle: (props: ToggleProps) => JSX.Element;
+declare const Toggle: (props: ToggleProps) => import("react/jsx-runtime").JSX.Element;
 export default Toggle;

package/dist/types/components/ToggleButton/ToggleButton.d.ts

@@ -1,3 +1,3 @@
 import type { ToggleButtonProps } from "./ToggleButton.types";
-declare const ToggleButton: (props: ToggleButtonProps) => JSX.Element;
+declare const ToggleButton: (props: ToggleButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default ToggleButton;

package/dist/types/components/ToggleButton/ToggleButton.styled.d.ts

@@ -6,7 +6,7 @@ type CustomToggleButtonProps = ToggleButtonProps & {
 export declare const CustomToggleButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ToggleButtonClasses> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "success" | "info" | "standard" | undefined;
+    color?: "success" | "info" | "warning" | "error" | "standard" | "primary" | "secondary" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     fullWidth?: boolean | undefined;
@@ -34,6 +34,6 @@ export declare const CustomToggleButton: import("@emotion/styled").StyledCompone
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "tabIndex" | "onChange" | "onClick" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "value" | "size" | "selected" | "disableFocusRipple" | "fullWidth"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CustomToggleButtonProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "tabIndex" | "color" | "onChange" | "onClick" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "fullWidth" | "size" | "value" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CustomToggleButtonProps, {}, {}>;
 export declare const IconAndChildrenWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/dist/types/components/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -1,3 +1,3 @@
 import { ToggleButtonGroupProps } from "@mui/material/ToggleButtonGroup";
-declare const ToggleButtonGroup: ({ size, ...props }: ToggleButtonGroupProps) => JSX.Element;
+declare const ToggleButtonGroup: ({ size, ...props }: ToggleButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
 export default ToggleButtonGroup;

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -1,2 +1,2 @@
-declare const Tooltip: () => JSX.Element;
+declare const Tooltip: () => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/design-system",
-  "version": "1.0.0-a.3",
+  "version": "1.0.0-a.4",
   "description": "Lunit Design System",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",

package/src/components/Alert/Alert.styled.ts

@@ -8,37 +8,40 @@ import {
   getBorderColor,
   getBackgroundColor,
   getIconColor,
-} from "./Alert.utils.";
+} from "./Alert.utils";
 
-export const StyledAlert = styled(MuiAlert)<AlertProps>(({ severity }) => ({
-  "&.MuiAlert-root": {
-    display: "flex",
-    padding: "15px",
-    borderRadius: "8px",
-    border: `1px solid ${getBorderColor(severity)}`,
-    backgroundColor: getBackgroundColor(severity),
-    boxShadow: "none",
-  },
-  "& .MuiAlert-icon": {
-    padding: "4px",
-    fontSize: "20px",
-    marginRight: "16px",
-    color: `${getIconColor(severity)} !important`,
-  },
-  "& .MuiAlert-message": {
-    padding: "4px 0",
-    width: "100%",
-    minHeight: "28px",
-  },
-  "& .MuiAlert-action": {
-    margin: 0,
-    padding: 0,
-  },
-  "& .MuiSvgIcon-root": {
-    height: "20px",
-    width: "20px",
-  },
-}));
+export const StyledAlert = styled(MuiAlert)<AlertProps>(
+  ({ severity, theme }) => ({
+    "&.MuiAlert-root": {
+      display: "flex",
+      padding: "12px",
+      borderRadius: "8px",
+      border: `1px solid ${getBorderColor(theme, severity)}`,
+      backgroundColor: getBackgroundColor(theme, severity),
+      boxShadow: "none",
+    },
+    "& .MuiAlert-icon": {
+      padding: "4px",
+      marginRight: "0",
+      fontSize: "20px",
+      color: `${getIconColor(theme, severity)} !important`,
+    },
+    "& .MuiAlert-message": {
+      width: "100%",
+      minHeight: "28px",
+      padding: "4px 0 0",
+      margin: "0 8px 0 8px",
+    },
+    "& .MuiAlert-action": {
+      margin: 0,
+      padding: 0,
+    },
+    "& .MuiSvgIcon-root": {
+      height: "20px",
+      width: "20px",
+    },
+  })
+);
 
 export const StyledAlertTitle = styled(MuiAlertTitle)(({ theme }) => ({
   "&.MuiAlertTitle-root": {

package/src/components/Alert/Alert.tsx

@@ -1,3 +1,8 @@
+import Success from "@lunit/design-system-icons/Success16";
+import Error from "@lunit/design-system-icons/Error16";
+import Warning from "@lunit/design-system-icons/Warning16";
+import Information from "@lunit/design-system-icons/Information16";
+import Close from "@lunit/design-system-icons/Close";
 import React, { forwardRef } from "react";
 import {
   StyledAlert,
@@ -6,13 +11,6 @@ import {
   StyledBottomAction,
 } from "./Alert.styled";
 import { AlertProps } from "./Alert.types";
-import {
-  Close,
-  Success,
-  Error,
-  Warning,
-  Information,
-} from "@lunit/design-system-icons";
 import Button from "../Button";
 
 const MAPPED_ICON = {

package/src/components/Alert/{Alert.utils..ts → Alert.utils.ts}

@@ -1,7 +1,9 @@
-import theme from "@/theme";
-import { AlertColor } from "@mui/material";
+import { AlertColor, Theme } from "@mui/material";
 
-export const getBackgroundColor = (severity: AlertColor | undefined) => {
+export const getBackgroundColor = (
+  theme: Theme,
+  severity: AlertColor | undefined
+) => {
   switch (severity) {
     case "info":
       return theme.palette.token.component.alert_info_bg;
@@ -14,7 +16,10 @@ export const getBackgroundColor = (severity: AlertColor | undefined) => {
   }
 };
 
-export const getBorderColor = (severity: AlertColor | undefined) => {
+export const getBorderColor = (
+  theme: Theme,
+  severity: AlertColor | undefined
+) => {
   switch (severity) {
     case "info":
       return theme.palette.token.component.alert_info_border;
@@ -27,7 +32,10 @@ export const getBorderColor = (severity: AlertColor | undefined) => {
   }
 };
 
-export const getIconColor = (severity: AlertColor | undefined) => {
+export const getIconColor = (
+  theme: Theme,
+  severity: AlertColor | undefined
+) => {
   switch (severity) {
     case "info":
       return theme.palette.token.core.icon_info_02;

package/src/components/Toast/Toast.styled.ts

@@ -18,7 +18,7 @@ export const StyledToast = styled(Alert)(({ theme, severity }) => {
       height: "36px",
       marginRight: "16px",
       fontSize: 20,
-      color: `${getIconColor(severity)}`,
+      color: `${getIconColor(theme, severity)}`,
       "& .MuiSvgIcon-root": {
         height: "16px",
         width: "16px",

package/src/components/Toast/Toast.utils.ts

@@ -1,7 +1,9 @@
-import theme from "@/theme";
-import type { AlertColor } from "@mui/material";
+import type { AlertColor, Theme } from "@mui/material";
 
-export const getIconColor = (severity: AlertColor | undefined) => {
+export const getIconColor = (
+  theme: Theme,
+  severity: AlertColor | undefined
+) => {
   switch (severity) {
     case "info":
       return theme.palette.token.core.icon_info_02;

package/dist/components/Alert/Alert.utils..js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Alert.utils..js","sourceRoot":"","sources":["../../../src/components/Alert/Alert.utils..ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,SAAS,CAAC;AAG5B,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,QAAgC,EAAE,EAAE;IACrE,QAAQ,QAAQ,EAAE;QAChB,KAAK,MAAM;YACT,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;QACrD,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC;QACxD,KAAK,OAAO;YACV,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;QACtD;YACE,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC;KACzD;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,QAAgC,EAAE,EAAE;IACjE,QAAQ,QAAQ,EAAE;QAChB,KAAK,MAAM;YACT,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;QACzD,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC;QAC5D,KAAK,OAAO;YACV,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,kBAAkB,CAAC;QAC1D;YACE,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC;KAC7D;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,QAAgC,EAAE,EAAE;IAC/D,QAAQ,QAAQ,EAAE;QAChB,KAAK,MAAM;YACT,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC;QAC/C,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;QAClD,KAAK,OAAO;YACV,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC;QAChD;YACE,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;KACnD;AACH,CAAC,CAAC"}

package/dist/types/components/Alert/Alert.utils..d.ts

@@ -1,4 +0,0 @@
-import { AlertColor } from "@mui/material";
-export declare const getBackgroundColor: (severity: AlertColor | undefined) => import("csstype").Property.Color | undefined;
-export declare const getBorderColor: (severity: AlertColor | undefined) => import("csstype").Property.Color | undefined;
-export declare const getIconColor: (severity: AlertColor | undefined) => import("csstype").Property.Color | undefined;