@zidsa/zidmui 2.5.18 → 2.5.20

package/dist/react/cjs/components/app-alert.js

@@ -15,15 +15,23 @@ const AppAlert = ({
   onClose,
   actions,
   isLoading,
+  variant = "standard",
   ...props
 }) => {
   if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { ...props, onClose, variant: "standard", children: /* @__PURE__ */ jsxRuntime.jsx(stackColumn.StackColumn, { gap: 1.5, justifyContent: "center", width: "100%", alignItems: "center", children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 22 }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { ...props, onClose, variant, children: /* @__PURE__ */ jsxRuntime.jsx(stackColumn.StackColumn, { gap: 1.5, justifyContent: "center", width: "100%", alignItems: "center", children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 22 }) }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { ...props, onClose, variant: "standard", children: /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 1.5, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { ...props, onClose, variant, children: /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 1.5, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 0.5, children: [
       title && /* @__PURE__ */ jsxRuntime.jsx(material.AlertTitle, { mb: 0, variant: "subtitle2", ...titleProps, children: title }),
-      content && /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "body2", color: title ? "text.tertiary" : "text.primary", children: content }),
+      content && /* @__PURE__ */ jsxRuntime.jsx(
+        appTypography.AppTypography,
+        {
+          variant: "body2",
+          color: variant === "filled" ? void 0 : title ? "text.tertiary" : "text.primary",
+          children: content
+        }
+      ),
       link && link,
       children
     ] }),

package/dist/react/cjs/components/app-alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-alert.js","sources":["../../../../src/components/app-alert.tsx"],"sourcesContent":["import { Alert, AlertProps, AlertTitle, AlertTitleProps, CircularProgress } from '@mui/material';\n\nimport { AppButton, AppButtonProps } from './app-button';\nimport { AppTypography } from './app-typography';\nimport { StackColumn } from './stack-column';\nimport { StackRow } from './stack-row';\n\n//\n//\n\nexport type AppAlertProps = {\n  title?: string | React.ReactNode;\n  titleProps?: AlertTitleProps;\n  link?: React.ReactNode;\n  content?: React.ReactNode;\n  actions?: React.ReactNode;\n  isLoading?: boolean;\n} & Omit<AlertProps, 'title' | 'variant' | 'content'>;\n\nexport const AppAlert: React.FC<AppAlertProps> = ({\n  title,\n  titleProps,\n  link,\n  content,\n  children,\n  onClose,\n  actions,\n  isLoading,\n  ...props\n}) => {\n  if (isLoading) {\n    return (\n      <Alert {...props} onClose={onClose} variant=\"standard\">\n        <StackColumn gap={1.5} justifyContent=\"center\" width=\"100%\" alignItems=\"center\">\n          <CircularProgress size={22} />\n        </StackColumn>\n      </Alert>\n    );\n  }\n\n  return (\n    <Alert {...props} onClose={onClose} variant=\"standard\">\n      <StackColumn gap={1.5}>\n        <StackColumn gap={0.5}>\n          {title && (\n            <AlertTitle mb={0} variant=\"subtitle2\" {...titleProps}>\n              {title}\n            </AlertTitle>\n          )}\n          {content && (\n            <AppTypography variant=\"body2\" color={title ? 'text.tertiary' : 'text.primary'}>\n              {content}\n            </AppTypography>\n          )}\n          {link && link}\n          {children}\n        </StackColumn>\n\n        {actions && <StackRow gap={1}>{actions}</StackRow>}\n      </StackColumn>\n    </Alert>\n  );\n};\n\n//\n\nexport const AppAlertButton: React.FC<AppButtonProps> = ({ children, ...props }) => {\n  return (\n    <AppButton variant=\"outlined\" size=\"small\" {...props}>\n      {children}\n    </AppButton>\n  );\n};\n"],"names":["jsx","Alert","StackColumn","CircularProgress","jsxs","AlertTitle","AppTypography","StackRow","AppButton"],"mappings":";;;;;;;;AAmBO,MAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,WAAW;AACb,WACEA,2BAAAA,IAACC,SAAAA,SAAO,GAAG,OAAO,SAAkB,SAAQ,YAC1C,UAAAD,2BAAAA,IAACE,yBAAA,EAAY,KAAK,KAAK,gBAAe,UAAS,OAAM,QAAO,YAAW,UACrE,yCAACC,SAAAA,kBAAA,EAAiB,MAAM,GAAA,CAAI,EAAA,CAC9B,EAAA,CACF;AAAA,EAEJ;AAEA,SACEH,2BAAAA,IAACC,SAAAA,OAAA,EAAO,GAAG,OAAO,SAAkB,SAAQ,YAC1C,UAAAG,2BAAAA,KAACF,YAAAA,aAAA,EAAY,KAAK,KAChB,UAAA;AAAA,IAAAE,2BAAAA,KAACF,YAAAA,aAAA,EAAY,KAAK,KACf,UAAA;AAAA,MAAA,SACCF,2BAAAA,IAACK,uBAAW,IAAI,GAAG,SAAQ,aAAa,GAAG,YACxC,UAAA,MAAA,CACH;AAAA,MAED,0CACEC,6BAAA,EAAc,SAAQ,SAAQ,OAAO,QAAQ,kBAAkB,gBAC7D,UAAA,QAAA,CACH;AAAA,MAED,QAAQ;AAAA,MACR;AAAA,IAAA,GACH;AAAA,IAEC,WAAWN,2BAAAA,IAACO,mBAAA,EAAS,KAAK,GAAI,UAAA,QAAA,CAAQ;AAAA,EAAA,EAAA,CACzC,EAAA,CACF;AAEJ;AAIO,MAAM,iBAA2C,CAAC,EAAE,UAAU,GAAG,YAAY;AAClF,SACEP,2BAAAA,IAACQ,uBAAU,SAAQ,YAAW,MAAK,SAAS,GAAG,OAC5C,UACH;AAEJ;;;"}
+{"version":3,"file":"app-alert.js","sources":["../../../../src/components/app-alert.tsx"],"sourcesContent":["import { Alert, AlertProps, AlertTitle, AlertTitleProps, CircularProgress } from '@mui/material';\n\nimport { AppButton, AppButtonProps } from './app-button';\nimport { AppTypography } from './app-typography';\nimport { StackColumn } from './stack-column';\nimport { StackRow } from './stack-row';\n\n//\n//\n\nexport type AppAlertProps = Omit<AlertProps, 'title' | 'content'> & {\n  title?: string | React.ReactNode;\n  titleProps?: AlertTitleProps;\n  link?: React.ReactNode;\n  content?: React.ReactNode;\n  actions?: React.ReactNode;\n  isLoading?: boolean;\n};\n\nexport const AppAlert: React.FC<AppAlertProps> = ({\n  title,\n  titleProps,\n  link,\n  content,\n  children,\n  onClose,\n  actions,\n  isLoading,\n  variant = 'standard',\n  ...props\n}) => {\n  if (isLoading) {\n    return (\n      <Alert {...props} onClose={onClose} variant={variant}>\n        <StackColumn gap={1.5} justifyContent=\"center\" width=\"100%\" alignItems=\"center\">\n          <CircularProgress size={22} />\n        </StackColumn>\n      </Alert>\n    );\n  }\n\n  return (\n    <Alert {...props} onClose={onClose} variant={variant}>\n      <StackColumn gap={1.5}>\n        <StackColumn gap={0.5}>\n          {title && (\n            <AlertTitle mb={0} variant=\"subtitle2\" {...titleProps}>\n              {title}\n            </AlertTitle>\n          )}\n          {content && (\n            <AppTypography\n              variant=\"body2\"\n              color={variant === 'filled' ? undefined : title ? 'text.tertiary' : 'text.primary'}\n            >\n              {content}\n            </AppTypography>\n          )}\n          {link && link}\n          {children}\n        </StackColumn>\n\n        {actions && <StackRow gap={1}>{actions}</StackRow>}\n      </StackColumn>\n    </Alert>\n  );\n};\n\n//\n\nexport const AppAlertButton: React.FC<AppButtonProps> = ({ children, ...props }) => {\n  return (\n    <AppButton variant=\"outlined\" size=\"small\" {...props}>\n      {children}\n    </AppButton>\n  );\n};\n"],"names":["jsx","Alert","StackColumn","CircularProgress","jsxs","AlertTitle","AppTypography","StackRow","AppButton"],"mappings":";;;;;;;;AAmBO,MAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,MAAM;AACJ,MAAI,WAAW;AACb,WACEA,+BAACC,SAAAA,SAAO,GAAG,OAAO,SAAkB,SAClC,UAAAD,2BAAAA,IAACE,YAAAA,eAAY,KAAK,KAAK,gBAAe,UAAS,OAAM,QAAO,YAAW,UACrE,yCAACC,SAAAA,kBAAA,EAAiB,MAAM,IAAI,EAAA,CAC9B,EAAA,CACF;AAAA,EAEJ;AAEA,SACEH,2BAAAA,IAACC,SAAAA,SAAO,GAAG,OAAO,SAAkB,SAClC,UAAAG,2BAAAA,KAACF,YAAAA,aAAA,EAAY,KAAK,KAChB,UAAA;AAAA,IAAAE,2BAAAA,KAACF,YAAAA,aAAA,EAAY,KAAK,KACf,UAAA;AAAA,MAAA,SACCF,2BAAAA,IAACK,uBAAW,IAAI,GAAG,SAAQ,aAAa,GAAG,YACxC,UAAA,MAAA,CACH;AAAA,MAED,WACCL,2BAAAA;AAAAA,QAACM,cAAAA;AAAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,OAAO,YAAY,WAAW,SAAY,QAAQ,kBAAkB;AAAA,UAEnE,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,QAAQ;AAAA,MACR;AAAA,IAAA,GACH;AAAA,IAEC,WAAWN,2BAAAA,IAACO,mBAAA,EAAS,KAAK,GAAI,UAAA,QAAA,CAAQ;AAAA,EAAA,EAAA,CACzC,EAAA,CACF;AAEJ;AAIO,MAAM,iBAA2C,CAAC,EAAE,UAAU,GAAG,YAAY;AAClF,SACEP,2BAAAA,IAACQ,uBAAU,SAAQ,YAAW,MAAK,SAAS,GAAG,OAC5C,UACH;AAEJ;;;"}

package/dist/react/cjs/components/app-empty-state.js

@@ -40,17 +40,17 @@ const AppEmptyState = ({
     iconBoxSize = 100;
   }
   if (variant === "error") {
-    iconBoxVariantProps.bgcolor = theme.palette._components.alert.error.background;
-    iconBoxVariantProps.border = `1px solid ${theme.palette._components.alert.error.border}`;
+    iconBoxVariantProps.bgcolor = theme.palette._components.alert.standard.error.background;
+    iconBoxVariantProps.border = `1px solid ${theme.palette._components.alert.standard.error.border}`;
     iconColor = "error";
   }
   if (variant === "warning") {
-    iconBoxVariantProps.bgcolor = theme.palette._components.alert.warning.background;
-    iconBoxVariantProps.border = `1px solid ${theme.palette._components.alert.warning.border}`;
+    iconBoxVariantProps.bgcolor = theme.palette._components.alert.standard.warning.background;
+    iconBoxVariantProps.border = `1px solid ${theme.palette._components.alert.standard.warning.border}`;
   }
   if (variant === "success") {
-    iconBoxVariantProps.bgcolor = theme.palette._components.alert.success.background;
-    iconBoxVariantProps.border = `1px solid ${theme.palette._components.alert.success.border}`;
+    iconBoxVariantProps.bgcolor = theme.palette._components.alert.standard.success.background;
+    iconBoxVariantProps.border = `1px solid ${theme.palette._components.alert.standard.success.border}`;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     material.Box,

package/dist/react/cjs/components/app-empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-empty-state.js","sources":["../../../../src/components/app-empty-state.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Box, type BoxProps, type SvgIconProps, useTheme } from '@mui/material';\nimport { AppTypographyProps, AppTypography } from './app-typography';\nimport { StackColumn } from './stack-column';\nimport { StackRow } from './stack-row';\n\n//\n//\n\nexport interface AppEmptyStateProps {\n  size?: 'standard' | 'small';\n  variant?: 'default' | 'error' | 'warning' | 'success';\n\n  title?: React.ReactNode;\n  titleProps?: AppTypographyProps;\n\n  icon?: React.ReactElement<SvgIconProps>;\n  iconProps?: SvgIconProps;\n  iconBoxProps?: BoxProps;\n  customIconComponent?: React.ReactElement<SvgIconProps>;\n\n  description?: React.ReactNode;\n  descriptionProps?: AppTypographyProps;\n\n  subDescription?: React.ReactNode;\n  subDescriptionProps?: AppTypographyProps;\n\n  imageUrl?: string;\n  imageProps?: BoxProps;\n\n  children?: React.ReactNode;\n  containerProps?: BoxProps;\n}\n\nexport const AppEmptyState: FC<AppEmptyStateProps> = ({\n  size = 'small',\n  variant = 'default',\n\n  title,\n  titleProps,\n  description,\n  descriptionProps,\n\n  subDescription,\n  subDescriptionProps,\n\n  icon,\n  iconProps,\n  iconBoxProps,\n  customIconComponent,\n\n  imageUrl,\n  imageProps,\n\n  children,\n  containerProps,\n}) => {\n  const isBoxImage = icon?.props?.component === 'img';\n\n  const theme = useTheme();\n\n  let iconSize: SvgIconProps['fontSize'] = 'large';\n  let titleSize: AppTypographyProps['variant'] = 'h4';\n  let iconBoxSize = 120;\n  let iconColor: SvgIconProps['color'] = 'action';\n\n  const iconBoxVariantProps = {\n    bgcolor: '_components.iconButton.primary.hover',\n    border: `none`,\n  };\n\n  if (size === 'small') {\n    iconSize = 'medium';\n    titleSize = 'h6';\n    iconBoxSize = 100;\n  }\n\n  if (variant === 'error') {\n    iconBoxVariantProps.bgcolor = theme.palette._components.alert.error.background;\n    iconBoxVariantProps.border = `1px solid ${theme.palette._components.alert.error.border}`;\n    iconColor = 'error';\n  }\n\n  if (variant === 'warning') {\n    iconBoxVariantProps.bgcolor = theme.palette._components.alert.warning.background;\n    iconBoxVariantProps.border = `1px solid ${theme.palette._components.alert.warning.border}`;\n  }\n\n  if (variant === 'success') {\n    iconBoxVariantProps.bgcolor = theme.palette._components.alert.success.background;\n    iconBoxVariantProps.border = `1px solid ${theme.palette._components.alert.success.border}`;\n  }\n\n  return (\n    <Box\n      width=\"100%\"\n      height=\"100%\"\n      rowGap={size === 'small' ? 2 : 3}\n      px={2}\n      py={6}\n      display=\"flex\"\n      flexDirection=\"column\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      {...containerProps}\n    >\n      {imageUrl ? (\n        <Box\n          component=\"img\"\n          src={imageUrl}\n          width={240}\n          height={160}\n          bgcolor=\"_components.emptyState.imageBackground\"\n          {...imageProps}\n        />\n      ) : icon && !isBoxImage ? (\n        <Box\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          borderRadius={99}\n          width={iconBoxSize}\n          height={iconBoxSize}\n          maxWidth={iconBoxSize}\n          maxHeight={iconBoxSize}\n          {...iconBoxVariantProps}\n          {...iconBoxProps}\n        >\n          {React.cloneElement(icon, { fontSize: iconSize, color: iconColor, ...iconProps })}\n        </Box>\n      ) : icon && isBoxImage ? (\n        icon\n      ) : (\n        customIconComponent\n      )}\n      {(title || description || subDescription) && (\n        <StackColumn gap={size === 'small' ? 0 : 0.5} maxWidth={600} textAlign=\"center\">\n          {title && (\n            <AppTypography variant={titleSize} {...titleProps}>\n              {title}\n            </AppTypography>\n          )}\n          {description && (\n            <AppTypography variant=\"body2\" color=\"textTertiary\" {...descriptionProps}>\n              {description}\n            </AppTypography>\n          )}\n          {subDescription && (\n            <AppTypography mt={3} variant=\"body2\" color=\"textTertiary\" {...subDescriptionProps}>\n              {subDescription}\n            </AppTypography>\n          )}\n        </StackColumn>\n      )}\n      {children && <StackRow>{children}</StackRow>}\n    </Box>\n  );\n};\n"],"names":["useTheme","jsxs","Box","jsx","StackColumn","AppTypography","StackRow"],"mappings":"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"}
+{"version":3,"file":"app-empty-state.js","sources":["../../../../src/components/app-empty-state.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Box, type BoxProps, type SvgIconProps, useTheme } from '@mui/material';\nimport { AppTypographyProps, AppTypography } from './app-typography';\nimport { StackColumn } from './stack-column';\nimport { StackRow } from './stack-row';\n\n//\n//\n\nexport interface AppEmptyStateProps {\n  size?: 'standard' | 'small';\n  variant?: 'default' | 'error' | 'warning' | 'success';\n\n  title?: React.ReactNode;\n  titleProps?: AppTypographyProps;\n\n  icon?: React.ReactElement<SvgIconProps>;\n  iconProps?: SvgIconProps;\n  iconBoxProps?: BoxProps;\n  customIconComponent?: React.ReactElement<SvgIconProps>;\n\n  description?: React.ReactNode;\n  descriptionProps?: AppTypographyProps;\n\n  subDescription?: React.ReactNode;\n  subDescriptionProps?: AppTypographyProps;\n\n  imageUrl?: string;\n  imageProps?: BoxProps;\n\n  children?: React.ReactNode;\n  containerProps?: BoxProps;\n}\n\nexport const AppEmptyState: FC<AppEmptyStateProps> = ({\n  size = 'small',\n  variant = 'default',\n\n  title,\n  titleProps,\n  description,\n  descriptionProps,\n\n  subDescription,\n  subDescriptionProps,\n\n  icon,\n  iconProps,\n  iconBoxProps,\n  customIconComponent,\n\n  imageUrl,\n  imageProps,\n\n  children,\n  containerProps,\n}) => {\n  const isBoxImage = icon?.props?.component === 'img';\n\n  const theme = useTheme();\n\n  let iconSize: SvgIconProps['fontSize'] = 'large';\n  let titleSize: AppTypographyProps['variant'] = 'h4';\n  let iconBoxSize = 120;\n  let iconColor: SvgIconProps['color'] = 'action';\n\n  const iconBoxVariantProps = {\n    bgcolor: '_components.iconButton.primary.hover',\n    border: `none`,\n  };\n\n  if (size === 'small') {\n    iconSize = 'medium';\n    titleSize = 'h6';\n    iconBoxSize = 100;\n  }\n\n  if (variant === 'error') {\n    iconBoxVariantProps.bgcolor = theme.palette._components.alert.standard.error.background;\n    iconBoxVariantProps.border = `1px solid ${theme.palette._components.alert.standard.error.border}`;\n    iconColor = 'error';\n  }\n\n  if (variant === 'warning') {\n    iconBoxVariantProps.bgcolor = theme.palette._components.alert.standard.warning.background;\n    iconBoxVariantProps.border = `1px solid ${theme.palette._components.alert.standard.warning.border}`;\n  }\n\n  if (variant === 'success') {\n    iconBoxVariantProps.bgcolor = theme.palette._components.alert.standard.success.background;\n    iconBoxVariantProps.border = `1px solid ${theme.palette._components.alert.standard.success.border}`;\n  }\n\n  return (\n    <Box\n      width=\"100%\"\n      height=\"100%\"\n      rowGap={size === 'small' ? 2 : 3}\n      px={2}\n      py={6}\n      display=\"flex\"\n      flexDirection=\"column\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      {...containerProps}\n    >\n      {imageUrl ? (\n        <Box\n          component=\"img\"\n          src={imageUrl}\n          width={240}\n          height={160}\n          bgcolor=\"_components.emptyState.imageBackground\"\n          {...imageProps}\n        />\n      ) : icon && !isBoxImage ? (\n        <Box\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          borderRadius={99}\n          width={iconBoxSize}\n          height={iconBoxSize}\n          maxWidth={iconBoxSize}\n          maxHeight={iconBoxSize}\n          {...iconBoxVariantProps}\n          {...iconBoxProps}\n        >\n          {React.cloneElement(icon, { fontSize: iconSize, color: iconColor, ...iconProps })}\n        </Box>\n      ) : icon && isBoxImage ? (\n        icon\n      ) : (\n        customIconComponent\n      )}\n      {(title || description || subDescription) && (\n        <StackColumn gap={size === 'small' ? 0 : 0.5} maxWidth={600} textAlign=\"center\">\n          {title && (\n            <AppTypography variant={titleSize} {...titleProps}>\n              {title}\n            </AppTypography>\n          )}\n          {description && (\n            <AppTypography variant=\"body2\" color=\"textTertiary\" {...descriptionProps}>\n              {description}\n            </AppTypography>\n          )}\n          {subDescription && (\n            <AppTypography mt={3} variant=\"body2\" color=\"textTertiary\" {...subDescriptionProps}>\n              {subDescription}\n            </AppTypography>\n          )}\n        </StackColumn>\n      )}\n      {children && <StackRow>{children}</StackRow>}\n    </Box>\n  );\n};\n"],"names":["useTheme","jsxs","Box","jsx","StackColumn","AppTypography","StackRow"],"mappings":"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"}

package/dist/react/cjs/theme/components/alert.js

@@ -10,17 +10,6 @@ const MuiAlert = {
       [theme.breakpoints.down("md")]: {
         paddingInline: theme.spacing(1)
       },
-      "&.MuiAlert-colorError": {
-        color: "inherit",
-        borderColor: theme.palette._components.alert.error.border,
-        background: theme.palette._components.alert.error.background,
-        ".MuiAlert-icon": {
-          color: theme.palette._components.alert.error.icon
-        },
-        ".MuiAlert-action .MuiSvgIcon-fontSizeSmall": {
-          fill: theme.palette._components.alert.error.color
-        }
-      },
       ".MuiTypography-root.MuiAlertTitle-root": {
         margin: 0
       },
@@ -43,39 +32,178 @@ const MuiAlert = {
           paddingLeft: theme.spacing(0.5)
         }
       },
-      "&.MuiAlert-colorWarning": {
-        color: "inherit",
-        borderColor: theme.palette._components.alert.warning.border,
-        background: theme.palette._components.alert.warning.background,
-        ".MuiAlert-icon": {
-          color: theme.palette._components.alert.warning.icon
+      variants: [
+        // Standard variants
+        {
+          props: { variant: "standard", severity: "error" },
+          style: {
+            color: "inherit",
+            borderColor: theme.palette._components.alert.standard.error.border,
+            background: theme.palette._components.alert.standard.error.background,
+            ".MuiAlert-icon": {
+              color: theme.palette._components.alert.standard.error.icon
+            },
+            ".MuiAlert-action .MuiSvgIcon-fontSizeSmall": {
+              fill: theme.palette._components.alert.standard.error.color
+            }
+          }
         },
-        ".MuiAlert-action .MuiSvgIcon-fontSizeSmall": {
-          fill: theme.palette._components.alert.warning.color
-        }
-      },
-      "&.MuiAlert-colorInfo": {
-        color: "inherit",
-        borderColor: theme.palette._components.alert.info.border,
-        background: theme.palette._components.alert.info.background,
-        ".MuiAlert-icon": {
-          color: theme.palette._components.alert.info.icon
+        {
+          props: { variant: "standard", severity: "warning" },
+          style: {
+            color: "inherit",
+            borderColor: theme.palette._components.alert.standard.warning.border,
+            background: theme.palette._components.alert.standard.warning.background,
+            ".MuiAlert-icon": {
+              color: theme.palette._components.alert.standard.warning.icon
+            },
+            ".MuiAlert-action .MuiSvgIcon-fontSizeSmall": {
+              fill: theme.palette._components.alert.standard.warning.color
+            }
+          }
         },
-        ".MuiAlert-action .MuiSvgIcon-fontSizeSmall": {
-          fill: theme.palette._components.alert.info.color
-        }
-      },
-      "&.MuiAlert-colorSuccess": {
-        color: "inherit",
-        borderColor: theme.palette._components.alert.success.border,
-        background: theme.palette._components.alert.success.background,
-        ".MuiAlert-icon": {
-          color: theme.palette._components.alert.success.icon
+        {
+          props: { variant: "standard", severity: "info" },
+          style: {
+            color: "inherit",
+            borderColor: theme.palette._components.alert.standard.info.border,
+            background: theme.palette._components.alert.standard.info.background,
+            ".MuiAlert-icon": {
+              color: theme.palette._components.alert.standard.info.icon
+            },
+            ".MuiAlert-action .MuiSvgIcon-fontSizeSmall": {
+              fill: theme.palette._components.alert.standard.info.color
+            }
+          }
+        },
+        {
+          props: { variant: "standard", severity: "success" },
+          style: {
+            color: "inherit",
+            borderColor: theme.palette._components.alert.standard.success.border,
+            background: theme.palette._components.alert.standard.success.background,
+            ".MuiAlert-icon": {
+              color: theme.palette._components.alert.standard.success.icon
+            },
+            ".MuiAlert-action .MuiSvgIcon-fontSizeSmall": {
+              fill: theme.palette._components.alert.standard.success.color
+            }
+          }
+        },
+        {
+          props: { variant: "standard", color: "primary" },
+          style: {
+            color: "inherit",
+            borderColor: theme.palette._components.alert.standard.primary.border,
+            background: theme.palette._components.alert.standard.primary.background,
+            ".MuiAlert-icon": {
+              color: theme.palette._components.alert.standard.primary.icon
+            },
+            ".MuiAlert-action .MuiSvgIcon-fontSizeSmall": {
+              fill: theme.palette._components.alert.standard.primary.color
+            }
+          }
+        },
+        {
+          props: { variant: "standard", color: "gray" },
+          style: {
+            color: "inherit",
+            borderColor: theme.palette._components.alert.standard.gray.border,
+            background: theme.palette._components.alert.standard.gray.background,
+            ".MuiAlert-icon": {
+              color: theme.palette._components.alert.standard.gray.icon
+            },
+            ".MuiAlert-action .MuiSvgIcon-fontSizeSmall": {
+              fill: theme.palette._components.alert.standard.gray.color
+            }
+          }
+        },
+        // Filled variants
+        {
+          props: { variant: "filled", severity: "error" },
+          style: {
+            borderColor: "transparent",
+            background: theme.palette._components.alert.filled.error.background,
+            color: theme.palette._components.alert.filled.error.color,
+            ".MuiAlert-icon": {
+              color: theme.palette._components.alert.filled.error.icon
+            },
+            ".MuiAlert-action .MuiSvgIcon-fontSizeSmall": {
+              fill: theme.palette._components.alert.filled.error.color
+            }
+          }
+        },
+        {
+          props: { variant: "filled", severity: "warning" },
+          style: {
+            borderColor: "transparent",
+            background: theme.palette._components.alert.filled.warning.background,
+            color: theme.palette._components.alert.filled.warning.color,
+            ".MuiAlert-icon": {
+              color: theme.palette._components.alert.filled.warning.icon
+            },
+            ".MuiAlert-action .MuiSvgIcon-fontSizeSmall": {
+              fill: theme.palette._components.alert.filled.warning.color
+            }
+          }
+        },
+        {
+          props: { variant: "filled", severity: "info" },
+          style: {
+            borderColor: "transparent",
+            background: theme.palette._components.alert.filled.info.background,
+            color: theme.palette._components.alert.filled.info.color,
+            ".MuiAlert-icon": {
+              color: theme.palette._components.alert.filled.info.icon
+            },
+            ".MuiAlert-action .MuiSvgIcon-fontSizeSmall": {
+              fill: theme.palette._components.alert.filled.info.color
+            }
+          }
+        },
+        {
+          props: { variant: "filled", severity: "success" },
+          style: {
+            borderColor: "transparent",
+            background: theme.palette._components.alert.filled.success.background,
+            color: theme.palette._components.alert.filled.success.color,
+            ".MuiAlert-icon": {
+              color: theme.palette._components.alert.filled.success.icon
+            },
+            ".MuiAlert-action .MuiSvgIcon-fontSizeSmall": {
+              fill: theme.palette._components.alert.filled.success.color
+            }
+          }
+        },
+        {
+          props: { variant: "filled", color: "primary" },
+          style: {
+            borderColor: "transparent",
+            background: theme.palette._components.alert.filled.primary.background,
+            color: theme.palette._components.alert.filled.primary.color,
+            ".MuiAlert-icon": {
+              color: theme.palette._components.alert.filled.primary.icon
+            },
+            ".MuiAlert-action .MuiSvgIcon-fontSizeSmall": {
+              fill: theme.palette._components.alert.filled.primary.color
+            }
+          }
         },
-        ".MuiAlert-action .MuiSvgIcon-fontSizeSmall": {
-          fill: theme.palette._components.alert.success.color
+        {
+          props: { variant: "filled", color: "gray" },
+          style: {
+            borderColor: "transparent",
+            background: theme.palette._components.alert.filled.gray.background,
+            color: theme.palette._components.alert.filled.gray.color,
+            ".MuiAlert-icon": {
+              color: theme.palette._components.alert.filled.gray.icon
+            },
+            ".MuiAlert-action .MuiSvgIcon-fontSizeSmall": {
+              fill: theme.palette._components.alert.filled.gray.color
+            }
+          }
         }
-      }
+      ]
     })
   }
 };

package/dist/react/cjs/theme/components/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../../../../src/theme/components/alert.ts"],"sourcesContent":["import { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\n//\n\nexport const MuiAlert: Components<\n  Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAlert'] = {\n  styleOverrides: {\n    root: ({ theme }) => ({\n      borderStyle: 'solid',\n      borderWidth: 1,\n      borderRadius: 12,\n      flexWrap: 'wrap',\n      [theme.breakpoints.down('md')]: {\n        paddingInline: theme.spacing(1),\n      },\n      '&.MuiAlert-colorError': {\n        color: 'inherit',\n        borderColor: theme.palette._components.alert.error.border,\n        background: theme.palette._components.alert.error.background,\n        '.MuiAlert-icon': {\n          color: theme.palette._components.alert.error.icon,\n        },\n        '.MuiAlert-action .MuiSvgIcon-fontSizeSmall': {\n          fill: theme.palette._components.alert.error.color,\n        },\n      },\n      '.MuiTypography-root.MuiAlertTitle-root': {\n        margin: 0,\n      },\n      '.MuiAlert-icon': {\n        flex: 0,\n        paddingBlock: theme.spacing(0.75),\n        alignItems: 'flex-start',\n      },\n      '.MuiAlert-message': {\n        flex: 1,\n        paddingBlock: theme.spacing(0.75),\n        display: 'flex',\n        alignItems: 'center',\n      },\n      '.MuiAlert-action': {\n        paddingTop: theme.spacing(0.25),\n        marginRight: 0,\n        alignItems: 'flex-start',\n        [theme.breakpoints.down('md')]: {\n          paddingLeft: theme.spacing(0.5),\n        },\n      },\n      '&.MuiAlert-colorWarning': {\n        color: 'inherit',\n        borderColor: theme.palette._components.alert.warning.border,\n        background: theme.palette._components.alert.warning.background,\n        '.MuiAlert-icon': {\n          color: theme.palette._components.alert.warning.icon,\n        },\n        '.MuiAlert-action .MuiSvgIcon-fontSizeSmall': {\n          fill: theme.palette._components.alert.warning.color,\n        },\n      },\n      '&.MuiAlert-colorInfo': {\n        color: 'inherit',\n        borderColor: theme.palette._components.alert.info.border,\n        background: theme.palette._components.alert.info.background,\n        '.MuiAlert-icon': {\n          color: theme.palette._components.alert.info.icon,\n        },\n        '.MuiAlert-action .MuiSvgIcon-fontSizeSmall': {\n          fill: theme.palette._components.alert.info.color,\n        },\n      },\n      '&.MuiAlert-colorSuccess': {\n        color: 'inherit',\n        borderColor: theme.palette._components.alert.success.border,\n        background: theme.palette._components.alert.success.background,\n        '.MuiAlert-icon': {\n          color: theme.palette._components.alert.success.icon,\n        },\n        '.MuiAlert-action .MuiSvgIcon-fontSizeSmall': {\n          fill: theme.palette._components.alert.success.color,\n        },\n      },\n    }),\n  },\n};\n"],"names":[],"mappings":";;AAOO,MAAM,WAEG;AAAA,EACd,gBAAgB;AAAA,IACd,MAAM,CAAC,EAAE,aAAa;AAAA,MACpB,aAAa;AAAA,MACb,aAAa;AAAA,MACb,cAAc;AAAA,MACd,UAAU;AAAA,MACV,CAAC,MAAM,YAAY,KAAK,IAAI,CAAC,GAAG;AAAA,QAC9B,eAAe,MAAM,QAAQ,CAAC;AAAA,MAAA;AAAA,MAEhC,yBAAyB;AAAA,QACvB,OAAO;AAAA,QACP,aAAa,MAAM,QAAQ,YAAY,MAAM,MAAM;AAAA,QACnD,YAAY,MAAM,QAAQ,YAAY,MAAM,MAAM;AAAA,QAClD,kBAAkB;AAAA,UAChB,OAAO,MAAM,QAAQ,YAAY,MAAM,MAAM;AAAA,QAAA;AAAA,QAE/C,8CAA8C;AAAA,UAC5C,MAAM,MAAM,QAAQ,YAAY,MAAM,MAAM;AAAA,QAAA;AAAA,MAC9C;AAAA,MAEF,0CAA0C;AAAA,QACxC,QAAQ;AAAA,MAAA;AAAA,MAEV,kBAAkB;AAAA,QAChB,MAAM;AAAA,QACN,cAAc,MAAM,QAAQ,IAAI;AAAA,QAChC,YAAY;AAAA,MAAA;AAAA,MAEd,qBAAqB;AAAA,QACnB,MAAM;AAAA,QACN,cAAc,MAAM,QAAQ,IAAI;AAAA,QAChC,SAAS;AAAA,QACT,YAAY;AAAA,MAAA;AAAA,MAEd,oBAAoB;AAAA,QAClB,YAAY,MAAM,QAAQ,IAAI;AAAA,QAC9B,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,CAAC,MAAM,YAAY,KAAK,IAAI,CAAC,GAAG;AAAA,UAC9B,aAAa,MAAM,QAAQ,GAAG;AAAA,QAAA;AAAA,MAChC;AAAA,MAEF,2BAA2B;AAAA,QACzB,OAAO;AAAA,QACP,aAAa,MAAM,QAAQ,YAAY,MAAM,QAAQ;AAAA,QACrD,YAAY,MAAM,QAAQ,YAAY,MAAM,QAAQ;AAAA,QACpD,kBAAkB;AAAA,UAChB,OAAO,MAAM,QAAQ,YAAY,MAAM,QAAQ;AAAA,QAAA;AAAA,QAEjD,8CAA8C;AAAA,UAC5C,MAAM,MAAM,QAAQ,YAAY,MAAM,QAAQ;AAAA,QAAA;AAAA,MAChD;AAAA,MAEF,wBAAwB;AAAA,QACtB,OAAO;AAAA,QACP,aAAa,MAAM,QAAQ,YAAY,MAAM,KAAK;AAAA,QAClD,YAAY,MAAM,QAAQ,YAAY,MAAM,KAAK;AAAA,QACjD,kBAAkB;AAAA,UAChB,OAAO,MAAM,QAAQ,YAAY,MAAM,KAAK;AAAA,QAAA;AAAA,QAE9C,8CAA8C;AAAA,UAC5C,MAAM,MAAM,QAAQ,YAAY,MAAM,KAAK;AAAA,QAAA;AAAA,MAC7C;AAAA,MAEF,2BAA2B;AAAA,QACzB,OAAO;AAAA,QACP,aAAa,MAAM,QAAQ,YAAY,MAAM,QAAQ;AAAA,QACrD,YAAY,MAAM,QAAQ,YAAY,MAAM,QAAQ;AAAA,QACpD,kBAAkB;AAAA,UAChB,OAAO,MAAM,QAAQ,YAAY,MAAM,QAAQ;AAAA,QAAA;AAAA,QAEjD,8CAA8C;AAAA,UAC5C,MAAM,MAAM,QAAQ,YAAY,MAAM,QAAQ;AAAA,QAAA;AAAA,MAChD;AAAA,IACF;AAAA,EACF;AAEJ;;"}
+{"version":3,"file":"alert.js","sources":["../../../../../src/theme/components/alert.ts"],"sourcesContent":["import { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\n//\n\nexport const MuiAlert: Components<\n  Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAlert'] = {\n  styleOverrides: {\n    root: ({ theme }) => ({\n      borderStyle: 'solid',\n      borderWidth: 1,\n      borderRadius: 12,\n      flexWrap: 'wrap',\n      [theme.breakpoints.down('md')]: {\n        paddingInline: theme.spacing(1),\n      },\n      '.MuiTypography-root.MuiAlertTitle-root': {\n        margin: 0,\n      },\n      '.MuiAlert-icon': {\n        flex: 0,\n        paddingBlock: theme.spacing(0.75),\n        alignItems: 'flex-start',\n      },\n      '.MuiAlert-message': {\n        flex: 1,\n        paddingBlock: theme.spacing(0.75),\n        display: 'flex',\n        alignItems: 'center',\n      },\n      '.MuiAlert-action': {\n        paddingTop: theme.spacing(0.25),\n        marginRight: 0,\n        alignItems: 'flex-start',\n        [theme.breakpoints.down('md')]: {\n          paddingLeft: theme.spacing(0.5),\n        },\n      },\n      variants: [\n        // Standard variants\n        {\n          props: { variant: 'standard', severity: 'error' },\n          style: {\n            color: 'inherit',\n            borderColor: theme.palette._components.alert.standard.error.border,\n            background: theme.palette._components.alert.standard.error.background,\n            '.MuiAlert-icon': {\n              color: theme.palette._components.alert.standard.error.icon,\n            },\n            '.MuiAlert-action .MuiSvgIcon-fontSizeSmall': {\n              fill: theme.palette._components.alert.standard.error.color,\n            },\n          },\n        },\n        {\n          props: { variant: 'standard', severity: 'warning' },\n          style: {\n            color: 'inherit',\n            borderColor: theme.palette._components.alert.standard.warning.border,\n            background: theme.palette._components.alert.standard.warning.background,\n            '.MuiAlert-icon': {\n              color: theme.palette._components.alert.standard.warning.icon,\n            },\n            '.MuiAlert-action .MuiSvgIcon-fontSizeSmall': {\n              fill: theme.palette._components.alert.standard.warning.color,\n            },\n          },\n        },\n        {\n          props: { variant: 'standard', severity: 'info' },\n          style: {\n            color: 'inherit',\n            borderColor: theme.palette._components.alert.standard.info.border,\n            background: theme.palette._components.alert.standard.info.background,\n            '.MuiAlert-icon': {\n              color: theme.palette._components.alert.standard.info.icon,\n            },\n            '.MuiAlert-action .MuiSvgIcon-fontSizeSmall': {\n              fill: theme.palette._components.alert.standard.info.color,\n            },\n          },\n        },\n        {\n          props: { variant: 'standard', severity: 'success' },\n          style: {\n            color: 'inherit',\n            borderColor: theme.palette._components.alert.standard.success.border,\n            background: theme.palette._components.alert.standard.success.background,\n            '.MuiAlert-icon': {\n              color: theme.palette._components.alert.standard.success.icon,\n            },\n            '.MuiAlert-action .MuiSvgIcon-fontSizeSmall': {\n              fill: theme.palette._components.alert.standard.success.color,\n            },\n          },\n        },\n        {\n          props: { variant: 'standard', color: 'primary' },\n          style: {\n            color: 'inherit',\n            borderColor: theme.palette._components.alert.standard.primary.border,\n            background: theme.palette._components.alert.standard.primary.background,\n            '.MuiAlert-icon': {\n              color: theme.palette._components.alert.standard.primary.icon,\n            },\n            '.MuiAlert-action .MuiSvgIcon-fontSizeSmall': {\n              fill: theme.palette._components.alert.standard.primary.color,\n            },\n          },\n        },\n        {\n          props: { variant: 'standard', color: 'gray' },\n          style: {\n            color: 'inherit',\n            borderColor: theme.palette._components.alert.standard.gray.border,\n            background: theme.palette._components.alert.standard.gray.background,\n            '.MuiAlert-icon': {\n              color: theme.palette._components.alert.standard.gray.icon,\n            },\n            '.MuiAlert-action .MuiSvgIcon-fontSizeSmall': {\n              fill: theme.palette._components.alert.standard.gray.color,\n            },\n          },\n        },\n        // Filled variants\n        {\n          props: { variant: 'filled', severity: 'error' },\n          style: {\n            borderColor: 'transparent',\n            background: theme.palette._components.alert.filled.error.background,\n            color: theme.palette._components.alert.filled.error.color,\n            '.MuiAlert-icon': {\n              color: theme.palette._components.alert.filled.error.icon,\n            },\n            '.MuiAlert-action .MuiSvgIcon-fontSizeSmall': {\n              fill: theme.palette._components.alert.filled.error.color,\n            },\n          },\n        },\n        {\n          props: { variant: 'filled', severity: 'warning' },\n          style: {\n            borderColor: 'transparent',\n            background: theme.palette._components.alert.filled.warning.background,\n            color: theme.palette._components.alert.filled.warning.color,\n            '.MuiAlert-icon': {\n              color: theme.palette._components.alert.filled.warning.icon,\n            },\n            '.MuiAlert-action .MuiSvgIcon-fontSizeSmall': {\n              fill: theme.palette._components.alert.filled.warning.color,\n            },\n          },\n        },\n        {\n          props: { variant: 'filled', severity: 'info' },\n          style: {\n            borderColor: 'transparent',\n            background: theme.palette._components.alert.filled.info.background,\n            color: theme.palette._components.alert.filled.info.color,\n            '.MuiAlert-icon': {\n              color: theme.palette._components.alert.filled.info.icon,\n            },\n            '.MuiAlert-action .MuiSvgIcon-fontSizeSmall': {\n              fill: theme.palette._components.alert.filled.info.color,\n            },\n          },\n        },\n        {\n          props: { variant: 'filled', severity: 'success' },\n          style: {\n            borderColor: 'transparent',\n            background: theme.palette._components.alert.filled.success.background,\n            color: theme.palette._components.alert.filled.success.color,\n            '.MuiAlert-icon': {\n              color: theme.palette._components.alert.filled.success.icon,\n            },\n            '.MuiAlert-action .MuiSvgIcon-fontSizeSmall': {\n              fill: theme.palette._components.alert.filled.success.color,\n            },\n          },\n        },\n        {\n          props: { variant: 'filled', color: 'primary' },\n          style: {\n            borderColor: 'transparent',\n            background: theme.palette._components.alert.filled.primary.background,\n            color: theme.palette._components.alert.filled.primary.color,\n            '.MuiAlert-icon': {\n              color: theme.palette._components.alert.filled.primary.icon,\n            },\n            '.MuiAlert-action .MuiSvgIcon-fontSizeSmall': {\n              fill: theme.palette._components.alert.filled.primary.color,\n            },\n          },\n        },\n        {\n          props: { variant: 'filled', color: 'gray' },\n          style: {\n            borderColor: 'transparent',\n            background: theme.palette._components.alert.filled.gray.background,\n            color: theme.palette._components.alert.filled.gray.color,\n            '.MuiAlert-icon': {\n              color: theme.palette._components.alert.filled.gray.icon,\n            },\n            '.MuiAlert-action .MuiSvgIcon-fontSizeSmall': {\n              fill: theme.palette._components.alert.filled.gray.color,\n            },\n          },\n        },\n      ],\n    }),\n  },\n};\n"],"names":[],"mappings":"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"}

package/dist/react/cjs/theme/components/chip.js

@@ -76,8 +76,8 @@ const MuiChip = {
           props: { color: "info", variant: "outlined" },
           style: {
             backgroundColor: "transparent",
-            color: theme.palette._components.status.info.color,
-            borderColor: theme.palette._components.status.info.color
+            color: theme.palette._components.status.info.outlined,
+            borderColor: theme.palette._components.status.info.outlined
           }
         },
         {
@@ -106,8 +106,8 @@ const MuiChip = {
           props: { color: "disabled", variant: "outlined" },
           style: {
             backgroundColor: "transparent",
-            color: theme.palette._components.status.disabled.color,
-            borderColor: theme.palette._components.status.disabled.color
+            color: theme.palette._components.status.disabled.outlined,
+            borderColor: theme.palette._components.status.disabled.outlined
           }
         },
         {
@@ -121,8 +121,8 @@ const MuiChip = {
           props: { color: "default", variant: "outlined" },
           style: {
             backgroundColor: "transparent",
-            color: theme.palette._components.status.neutral.color,
-            borderColor: theme.palette._components.status.neutral.color
+            color: theme.palette._components.status.neutral.outlined,
+            borderColor: theme.palette._components.status.neutral.outlined
           }
         },
         {
@@ -136,8 +136,8 @@ const MuiChip = {
           props: { color: "neutral", variant: "outlined" },
           style: {
             backgroundColor: "transparent",
-            color: theme.palette._components.status.neutral.color,
-            borderColor: theme.palette._components.status.neutral.color
+            color: theme.palette._components.status.neutral.outlined,
+            borderColor: theme.palette._components.status.neutral.outlined
           }
         },
         {
@@ -151,8 +151,8 @@ const MuiChip = {
           props: { color: "orange", variant: "outlined" },
           style: {
             backgroundColor: "transparent",
-            color: theme.palette._components.status.orange.color,
-            borderColor: theme.palette._components.status.orange.color
+            color: theme.palette._components.status.orange.outlined,
+            borderColor: theme.palette._components.status.orange.outlined
           }
         },
         {
@@ -166,8 +166,8 @@ const MuiChip = {
           props: { color: "blue", variant: "outlined" },
           style: {
             backgroundColor: "transparent",
-            color: theme.palette._components.status.blue.color,
-            borderColor: theme.palette._components.status.blue.color
+            color: theme.palette._components.status.blue.outlined,
+            borderColor: theme.palette._components.status.blue.outlined
           }
         }
       ]

package/dist/react/cjs/theme/components/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../../../../src/theme/components/chip.ts"],"sourcesContent":["import { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nexport const MuiChip: Components<Theme & CssVarsTheme>['MuiChip'] = {\n  styleOverrides: {\n    root: ({ theme }) => ({\n      minWidth: theme.spacing(7.5),\n      variants: [\n        {\n          props: { size: 'small' },\n          style: {\n            fontSize: '0.75rem',\n            lineHeight: '1.125rem',\n          },\n        },\n        {\n          props: { size: 'medium' },\n          style: {\n            fontSize: '0.75rem',\n            lineHeight: '1.125rem',\n          },\n        },\n        // Status colors\n        {\n          props: { color: 'success' },\n          style: {\n            backgroundColor: theme.palette._components.status.success.background,\n            color: theme.palette._components.status.success.color,\n          },\n        },\n        {\n          props: { color: 'success', variant: 'outlined' },\n          style: {\n            backgroundColor: 'transparent',\n            color: theme.palette._components.status.success.outlined,\n            borderColor: theme.palette._components.status.success.outlined,\n          },\n        },\n        {\n          props: { color: 'error' },\n          style: {\n            backgroundColor: theme.palette._components.status.error.background,\n            color: theme.palette._components.status.error.color,\n          },\n        },\n        {\n          props: { color: 'error', variant: 'outlined' },\n          style: {\n            backgroundColor: 'transparent',\n            color: theme.palette._components.status.error.outlined,\n            borderColor: theme.palette._components.status.error.outlined,\n          },\n        },\n        {\n          props: { color: 'warning' },\n          style: {\n            backgroundColor: theme.palette._components.status.warning.background,\n            color: theme.palette._components.status.warning.color,\n          },\n        },\n        {\n          props: { color: 'warning', variant: 'outlined' },\n          style: {\n            backgroundColor: 'transparent',\n            color: theme.palette._components.status.warning.outlined,\n            borderColor: theme.palette._components.status.warning.outlined,\n          },\n        },\n        {\n          props: { color: 'info' },\n          style: {\n            backgroundColor: theme.palette._components.status.info.background,\n            color: theme.palette._components.status.info.color,\n          },\n        },\n        {\n          props: { color: 'info', variant: 'outlined' },\n          style: {\n            backgroundColor: 'transparent',\n            color: theme.palette._components.status.info.color,\n            borderColor: theme.palette._components.status.info.color,\n          },\n        },\n        {\n          props: { color: 'primary' },\n          style: {\n            backgroundColor: theme.palette._components.status.primary.background,\n            color: theme.palette._components.status.primary.color,\n          },\n        },\n        {\n          props: { color: 'primary', variant: 'outlined' },\n          style: {\n            backgroundColor: 'transparent',\n            color: theme.palette._components.status.primary.outlined,\n            borderColor: theme.palette._components.status.primary.outlined,\n          },\n        },\n        {\n          props: { color: 'disabled' },\n          style: {\n            backgroundColor: theme.palette._components.status.disabled.background,\n            color: theme.palette._components.status.disabled.color,\n          },\n        },\n        {\n          props: { color: 'disabled', variant: 'outlined' },\n          style: {\n            backgroundColor: 'transparent',\n            color: theme.palette._components.status.disabled.color,\n            borderColor: theme.palette._components.status.disabled.color,\n          },\n        },\n        {\n          props: { color: 'default' },\n          style: {\n            backgroundColor: theme.palette._components.status.neutral.background,\n            color: theme.palette._components.status.neutral.color,\n          },\n        },\n        {\n          props: { color: 'default', variant: 'outlined' },\n          style: {\n            backgroundColor: 'transparent',\n            color: theme.palette._components.status.neutral.color,\n            borderColor: theme.palette._components.status.neutral.color,\n          },\n        },\n        {\n          props: { color: 'neutral' },\n          style: {\n            backgroundColor: theme.palette._components.status.neutral.background,\n            color: theme.palette._components.status.neutral.color,\n          },\n        },\n        {\n          props: { color: 'neutral', variant: 'outlined' },\n          style: {\n            backgroundColor: 'transparent',\n            color: theme.palette._components.status.neutral.color,\n            borderColor: theme.palette._components.status.neutral.color,\n          },\n        },\n        {\n          props: { color: 'orange' },\n          style: {\n            backgroundColor: theme.palette._components.status.orange.background,\n            color: theme.palette._components.status.orange.color,\n          },\n        },\n        {\n          props: { color: 'orange', variant: 'outlined' },\n          style: {\n            backgroundColor: 'transparent',\n            color: theme.palette._components.status.orange.color,\n            borderColor: theme.palette._components.status.orange.color,\n          },\n        },\n        {\n          props: { color: 'blue' },\n          style: {\n            backgroundColor: theme.palette._components.status.blue.background,\n            color: theme.palette._components.status.blue.color,\n          },\n        },\n        {\n          props: { color: 'blue', variant: 'outlined' },\n          style: {\n            backgroundColor: 'transparent',\n            color: theme.palette._components.status.blue.color,\n            borderColor: theme.palette._components.status.blue.color,\n          },\n        },\n      ],\n    }),\n  },\n};\n"],"names":[],"mappings":";;AAKO,MAAM,UAAuD;AAAA,EAClE,gBAAgB;AAAA,IACd,MAAM,CAAC,EAAE,aAAa;AAAA,MACpB,UAAU,MAAM,QAAQ,GAAG;AAAA,MAC3B,UAAU;AAAA,QACR;AAAA,UACE,OAAO,EAAE,MAAM,QAAA;AAAA,UACf,OAAO;AAAA,YACL,UAAU;AAAA,YACV,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,QAEF;AAAA,UACE,OAAO,EAAE,MAAM,SAAA;AAAA,UACf,OAAO;AAAA,YACL,UAAU;AAAA,YACV,YAAY;AAAA,UAAA;AAAA,QACd;AAAA;AAAA,QAGF;AAAA,UACE,OAAO,EAAE,OAAO,UAAA;AAAA,UAChB,OAAO;AAAA,YACL,iBAAiB,MAAM,QAAQ,YAAY,OAAO,QAAQ;AAAA,YAC1D,OAAO,MAAM,QAAQ,YAAY,OAAO,QAAQ;AAAA,UAAA;AAAA,QAClD;AAAA,QAEF;AAAA,UACE,OAAO,EAAE,OAAO,WAAW,SAAS,WAAA;AAAA,UACpC,OAAO;AAAA,YACL,iBAAiB;AAAA,YACjB,OAAO,MAAM,QAAQ,YAAY,OAAO,QAAQ;AAAA,YAChD,aAAa,MAAM,QAAQ,YAAY,OAAO,QAAQ;AAAA,UAAA;AAAA,QACxD;AAAA,QAEF;AAAA,UACE,OAAO,EAAE,OAAO,QAAA;AAAA,UAChB,OAAO;AAAA,YACL,iBAAiB,MAAM,QAAQ,YAAY,OAAO,MAAM;AAAA,YACxD,OAAO,MAAM,QAAQ,YAAY,OAAO,MAAM;AAAA,UAAA;AAAA,QAChD;AAAA,QAEF;AAAA,UACE,OAAO,EAAE,OAAO,SAAS,SAAS,WAAA;AAAA,UAClC,OAAO;AAAA,YACL,iBAAiB;AAAA,YACjB,OAAO,MAAM,QAAQ,YAAY,OAAO,MAAM;AAAA,YAC9C,aAAa,MAAM,QAAQ,YAAY,OAAO,MAAM;AAAA,UAAA;AAAA,QACtD;AAAA,QAEF;AAAA,UACE,OAAO,EAAE,OAAO,UAAA;AAAA,UAChB,OAAO;AAAA,YACL,iBAAiB,MAAM,QAAQ,YAAY,OAAO,QAAQ;AAAA,YAC1D,OAAO,MAAM,QAAQ,YAAY,OAAO,QAAQ;AAAA,UAAA;AAAA,QAClD;AAAA,QAEF;AAAA,UACE,OAAO,EAAE,OAAO,WAAW,SAAS,WAAA;AAAA,UACpC,OAAO;AAAA,YACL,iBAAiB;AAAA,YACjB,OAAO,MAAM,QAAQ,YAAY,OAAO,QAAQ;AAAA,YAChD,aAAa,MAAM,QAAQ,YAAY,OAAO,QAAQ;AAAA,UAAA;AAAA,QACxD;AAAA,QAEF;AAAA,UACE,OAAO,EAAE,OAAO,OAAA;AAAA,UAChB,OAAO;AAAA,YACL,iBAAiB,MAAM,QAAQ,YAAY,OAAO,KAAK;AAAA,YACvD,OAAO,MAAM,QAAQ,YAAY,OAAO,KAAK;AAAA,UAAA;AAAA,QAC/C;AAAA,QAEF;AAAA,UACE,OAAO,EAAE,OAAO,QAAQ,SAAS,WAAA;AAAA,UACjC,OAAO;AAAA,YACL,iBAAiB;AAAA,YACjB,OAAO,MAAM,QAAQ,YAAY,OAAO,KAAK;AAAA,YAC7C,aAAa,MAAM,QAAQ,YAAY,OAAO,KAAK;AAAA,UAAA;AAAA,QACrD;AAAA,QAEF;AAAA,UACE,OAAO,EAAE,OAAO,UAAA;AAAA,UAChB,OAAO;AAAA,YACL,iBAAiB,MAAM,QAAQ,YAAY,OAAO,QAAQ;AAAA,YAC1D,OAAO,MAAM,QAAQ,YAAY,OAAO,QAAQ;AAAA,UAAA;AAAA,QAClD;AAAA,QAEF;AAAA,UACE,OAAO,EAAE,OAAO,WAAW,SAAS,WAAA;AAAA,UACpC,OAAO;AAAA,YACL,iBAAiB;AAAA,YACjB,OAAO,MAAM,QAAQ,YAAY,OAAO,QAAQ;AAAA,YAChD,aAAa,MAAM,QAAQ,YAAY,OAAO,QAAQ;AAAA,UAAA;AAAA,QACxD;AAAA,QAEF;AAAA,UACE,OAAO,EAAE,OAAO,WAAA;AAAA,UAChB,OAAO;AAAA,YACL,iBAAiB,MAAM,QAAQ,YAAY,OAAO,SAAS;AAAA,YAC3D,OAAO,MAAM,QAAQ,YAAY,OAAO,SAAS;AAAA,UAAA;AAAA,QACnD;AAAA,QAEF;AAAA,UACE,OAAO,EAAE,OAAO,YAAY,SAAS,WAAA;AAAA,UACrC,OAAO;AAAA,YACL,iBAAiB;AAAA,YACjB,OAAO,MAAM,QAAQ,YAAY,OAAO,SAAS;AAAA,YACjD,aAAa,MAAM,QAAQ,YAAY,OAAO,SAAS;AAAA,UAAA;AAAA,QACzD;AAAA,QAEF;AAAA,UACE,OAAO,EAAE,OAAO,UAAA;AAAA,UAChB,OAAO;AAAA,YACL,iBAAiB,MAAM,QAAQ,YAAY,OAAO,QAAQ;AAAA,YAC1D,OAAO,MAAM,QAAQ,YAAY,OAAO,QAAQ;AAAA,UAAA;AAAA,QAClD;AAAA,QAEF;AAAA,UACE,OAAO,EAAE,OAAO,WAAW,SAAS,WAAA;AAAA,UACpC,OAAO;AAAA,YACL,iBAAiB;AAAA,YACjB,OAAO,MAAM,QAAQ,YAAY,OAAO,QAAQ;AAAA,YAChD,aAAa,MAAM,QAAQ,YAAY,OAAO,QAAQ;AAAA,UAAA;AAAA,QACxD;AAAA,QAEF;AAAA,UACE,OAAO,EAAE,OAAO,UAAA;AAAA,UAChB,OAAO;AAAA,YACL,iBAAiB,MAAM,QAAQ,YAAY,OAAO,QAAQ;AAAA,YAC1D,OAAO,MAAM,QAAQ,YAAY,OAAO,QAAQ;AAAA,UAAA;AAAA,QAClD;AAAA,QAEF;AAAA,UACE,OAAO,EAAE,OAAO,WAAW,SAAS,WAAA;AAAA,UACpC,OAAO;AAAA,YACL,iBAAiB;AAAA,YACjB,OAAO,MAAM,QAAQ,YAAY,OAAO,QAAQ;AAAA,YAChD,aAAa,MAAM,QAAQ,YAAY,OAAO,QAAQ;AAAA,UAAA;AAAA,QACxD;AAAA,QAEF;AAAA,UACE,OAAO,EAAE,OAAO,SAAA;AAAA,UAChB,OAAO;AAAA,YACL,iBAAiB,MAAM,QAAQ,YAAY,OAAO,OAAO;AAAA,YACzD,OAAO,MAAM,QAAQ,YAAY,OAAO,OAAO;AAAA,UAAA;AAAA,QACjD;AAAA,QAEF;AAAA,UACE,OAAO,EAAE,OAAO,UAAU,SAAS,WAAA;AAAA,UACnC,OAAO;AAAA,YACL,iBAAiB;AAAA,YACjB,OAAO,MAAM,QAAQ,YAAY,OAAO,OAAO;AAAA,YAC/C,aAAa,MAAM,QAAQ,YAAY,OAAO,OAAO;AAAA,UAAA;AAAA,QACvD;AAAA,QAEF;AAAA,UACE,OAAO,EAAE,OAAO,OAAA;AAAA,UAChB,OAAO;AAAA,YACL,iBAAiB,MAAM,QAAQ,YAAY,OAAO,KAAK;AAAA,YACvD,OAAO,MAAM,QAAQ,YAAY,OAAO,KAAK;AAAA,UAAA;AAAA,QAC/C;AAAA,QAEF;AAAA,UACE,OAAO,EAAE,OAAO,QAAQ,SAAS,WAAA;AAAA,UACjC,OAAO;AAAA,YACL,iBAAiB;AAAA,YACjB,OAAO,MAAM,QAAQ,YAAY,OAAO,KAAK;AAAA,YAC7C,aAAa,MAAM,QAAQ,YAAY,OAAO,KAAK;AAAA,UAAA;AAAA,QACrD;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEJ;;"}
+{"version":3,"file":"chip.js","sources":["../../../../../src/theme/components/chip.ts"],"sourcesContent":["import { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nexport const MuiChip: Components<Theme & CssVarsTheme>['MuiChip'] = {\n  styleOverrides: {\n    root: ({ theme }) => ({\n      minWidth: theme.spacing(7.5),\n      variants: [\n        {\n          props: { size: 'small' },\n          style: {\n            fontSize: '0.75rem',\n            lineHeight: '1.125rem',\n          },\n        },\n        {\n          props: { size: 'medium' },\n          style: {\n            fontSize: '0.75rem',\n            lineHeight: '1.125rem',\n          },\n        },\n        // Status colors\n        {\n          props: { color: 'success' },\n          style: {\n            backgroundColor: theme.palette._components.status.success.background,\n            color: theme.palette._components.status.success.color,\n          },\n        },\n        {\n          props: { color: 'success', variant: 'outlined' },\n          style: {\n            backgroundColor: 'transparent',\n            color: theme.palette._components.status.success.outlined,\n            borderColor: theme.palette._components.status.success.outlined,\n          },\n        },\n        {\n          props: { color: 'error' },\n          style: {\n            backgroundColor: theme.palette._components.status.error.background,\n            color: theme.palette._components.status.error.color,\n          },\n        },\n        {\n          props: { color: 'error', variant: 'outlined' },\n          style: {\n            backgroundColor: 'transparent',\n            color: theme.palette._components.status.error.outlined,\n            borderColor: theme.palette._components.status.error.outlined,\n          },\n        },\n        {\n          props: { color: 'warning' },\n          style: {\n            backgroundColor: theme.palette._components.status.warning.background,\n            color: theme.palette._components.status.warning.color,\n          },\n        },\n        {\n          props: { color: 'warning', variant: 'outlined' },\n          style: {\n            backgroundColor: 'transparent',\n            color: theme.palette._components.status.warning.outlined,\n            borderColor: theme.palette._components.status.warning.outlined,\n          },\n        },\n        {\n          props: { color: 'info' },\n          style: {\n            backgroundColor: theme.palette._components.status.info.background,\n            color: theme.palette._components.status.info.color,\n          },\n        },\n        {\n          props: { color: 'info', variant: 'outlined' },\n          style: {\n            backgroundColor: 'transparent',\n            color: theme.palette._components.status.info.outlined,\n            borderColor: theme.palette._components.status.info.outlined,\n          },\n        },\n        {\n          props: { color: 'primary' },\n          style: {\n            backgroundColor: theme.palette._components.status.primary.background,\n            color: theme.palette._components.status.primary.color,\n          },\n        },\n        {\n          props: { color: 'primary', variant: 'outlined' },\n          style: {\n            backgroundColor: 'transparent',\n            color: theme.palette._components.status.primary.outlined,\n            borderColor: theme.palette._components.status.primary.outlined,\n          },\n        },\n        {\n          props: { color: 'disabled' },\n          style: {\n            backgroundColor: theme.palette._components.status.disabled.background,\n            color: theme.palette._components.status.disabled.color,\n          },\n        },\n        {\n          props: { color: 'disabled', variant: 'outlined' },\n          style: {\n            backgroundColor: 'transparent',\n            color: theme.palette._components.status.disabled.outlined,\n            borderColor: theme.palette._components.status.disabled.outlined,\n          },\n        },\n        {\n          props: { color: 'default' },\n          style: {\n            backgroundColor: theme.palette._components.status.neutral.background,\n            color: theme.palette._components.status.neutral.color,\n          },\n        },\n        {\n          props: { color: 'default', variant: 'outlined' },\n          style: {\n            backgroundColor: 'transparent',\n            color: theme.palette._components.status.neutral.outlined,\n            borderColor: theme.palette._components.status.neutral.outlined,\n          },\n        },\n        {\n          props: { color: 'neutral' },\n          style: {\n            backgroundColor: theme.palette._components.status.neutral.background,\n            color: theme.palette._components.status.neutral.color,\n          },\n        },\n        {\n          props: { color: 'neutral', variant: 'outlined' },\n          style: {\n            backgroundColor: 'transparent',\n            color: theme.palette._components.status.neutral.outlined,\n            borderColor: theme.palette._components.status.neutral.outlined,\n          },\n        },\n        {\n          props: { color: 'orange' },\n          style: {\n            backgroundColor: theme.palette._components.status.orange.background,\n            color: theme.palette._components.status.orange.color,\n          },\n        },\n        {\n          props: { color: 'orange', variant: 'outlined' },\n          style: {\n            backgroundColor: 'transparent',\n            color: theme.palette._components.status.orange.outlined,\n            borderColor: theme.palette._components.status.orange.outlined,\n          },\n        },\n        {\n          props: { color: 'blue' },\n          style: {\n            backgroundColor: theme.palette._components.status.blue.background,\n            color: theme.palette._components.status.blue.color,\n          },\n        },\n        {\n          props: { color: 'blue', variant: 'outlined' },\n          style: {\n            backgroundColor: 'transparent',\n            color: theme.palette._components.status.blue.outlined,\n            borderColor: theme.palette._components.status.blue.outlined,\n          },\n        },\n      ],\n    }),\n  },\n};\n"],"names":[],"mappings":"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"}

package/dist/react/cjs/theme/palette.dark.js

@@ -270,29 +270,67 @@ const paletteDark = {
       borderBottom: "#1C1C37"
     },
     alert: {
-      error: {
-        color: colors.colors.red[400],
-        border: "rgba(250, 55, 104, 0.3)",
-        background: "rgba(250, 55, 104, 0.1)",
-        icon: colors.colors.red[400]
-      },
-      warning: {
-        color: colors.colors.yellow[600],
-        border: "rgba(249, 230, 131, 0.3)",
-        background: "rgba(249, 230, 131, 0.1)",
-        icon: colors.colors.yellow[600]
+      standard: {
+        error: {
+          color: colors.colors.red[400],
+          border: "rgba(250, 55, 104, 0.3)",
+          background: "rgba(250, 55, 104, 0.1)",
+          icon: colors.colors.red[400]
+        },
+        warning: {
+          color: colors.colors.yellow[600],
+          border: "rgba(249, 230, 131, 0.3)",
+          background: "rgba(249, 230, 131, 0.1)",
+          icon: colors.colors.yellow[600]
+        },
+        info: {
+          color: colors.colors.blue[500],
+          border: "rgba(96, 203, 203, 0.3)",
+          background: "rgba(96, 203, 203, 0.1)",
+          icon: colors.colors.blue[500]
+        },
+        success: {
+          color: colors.colors.green[500],
+          border: "rgba(158, 236, 152, 0.3)",
+          background: "rgba(158, 236, 152, 0.1)",
+          icon: colors.colors.green[500]
+        },
+        primary: {
+          color: colors.colors.primary[400],
+          border: "rgba(135, 88, 198, 0.3)",
+          background: "rgba(135, 88, 198, 0.1)",
+          icon: colors.colors.primary[400]
+        },
+        gray: {
+          color: colors.colors.neutral[400],
+          border: "rgba(255, 255, 255, 0.2)",
+          background: "rgba(255, 255, 255, 0.05)",
+          icon: colors.colors.neutral[500]
+        }
       },
-      info: {
-        color: colors.colors.blue[500],
-        border: "rgba(96, 203, 203, 0.3)",
-        background: "rgba(96, 203, 203, 0.1)",
-        icon: colors.colors.blue[500]
-      },
-      success: {
-        color: colors.colors.green[500],
-        border: "rgba(158, 236, 152, 0.3)",
-        background: "rgba(158, 236, 152, 0.1)",
-        icon: colors.colors.green[500]
+      filled: {
+        error: { background: colors.colors.red[1e3], color: colors.colors.base.white, icon: colors.colors.base.white },
+        warning: {
+          background: colors.colors.yellow[1e3],
+          color: colors.colors.yellow[200],
+          icon: colors.colors.yellow[200]
+        },
+        info: { background: colors.colors.blue[1e3], color: colors.colors.base.white, icon: colors.colors.base.white },
+        success: {
+          background: colors.colors.green[1e3],
+          color: colors.colors.green[200],
+          icon: colors.colors.green[200]
+        },
+        primary: {
+          background: colors.colors.primary[1e3],
+          color: colors.colors.base.white,
+          icon: colors.colors.base.white
+        },
+        gray: {
+          background: colors.colors.neutral[500],
+          color: colors.colors.base.white,
+          icon: colors.colors.base.white
+        }
       }
     },
     status: {