@fairmint/ui 0.3.10 → 0.3.12

package/dist/components/primitives/muiCompat.cjs

@@ -5,7 +5,6 @@ const dayjs_min = require("../../_virtual/dayjs.min.cjs");
 const customParseFormat = require("../../_virtual/customParseFormat.cjs");
 const React = require("react");
 const index = require("../../theme/index.cjs");
-const colors = require("../../theme/colors.cjs");
 const ActionIcon = require("./ActionIcon/ActionIcon.cjs");
 const Badge = require("./Badge/Badge.cjs");
 const Loader = require("./Loader/Loader.cjs");
@@ -43,10 +42,6 @@ const ChevronIcon = ({ direction }) => /* @__PURE__ */ jsxRuntime.jsx(
     children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: direction === "left" ? "M15 6 9 12l6 6" : "m9 6 6 6-6 6" })
   }
 );
-const themeColor = (name, shade) => {
-  const palette = index.theme.colors?.[name];
-  return Array.isArray(palette) ? palette[shade] : void 0;
-};
 const compatBreakpointKeys = ["xs", "sm", "md", "lg", "xl"];
 const compatFallbackBreakpoints = {
   xs: "30em",
@@ -61,26 +56,26 @@ const compatBreakpoints = {
   up: (key) => `@media (min-width: ${compatBreakpointWidth(key)})`
 };
 const compatColorMap = {
-  action: index.neutralColors[500],
-  "action.active": index.neutralColors[700],
-  "action.selected": index.neutralColors[200],
-  brand: index.brandColors.indigo,
-  default: index.neutralColors[500],
-  disabled: index.neutralColors[500],
-  error: index.semanticColors.error,
-  "error.main": index.semanticColors.error,
-  info: index.semanticColors.info,
-  "info.darkest": themeColor(colors.colors.info, 9) || index.semanticColors.info,
+  action: index.fairmintVars.colorIconSecondary,
+  "action.active": index.fairmintVars.colorIconPrimary,
+  "action.selected": index.fairmintVars.colorBgSelected,
+  brand: index.fairmintVars.colorBrandPrimary,
+  default: index.fairmintVars.colorTextSecondary,
+  disabled: index.fairmintVars.colorTextDisabled,
+  error: index.fairmintVars.colorErrorText,
+  "error.main": index.fairmintVars.colorErrorText,
+  info: index.fairmintVars.colorInfoText,
+  "info.darkest": index.fairmintVars.colorInfoSolid,
   inherit: "inherit",
-  primary: index.brandColors.indigo,
-  secondary: index.neutralColors[500],
-  success: index.semanticColors.success,
-  "success.dark": themeColor(colors.colors.success, 7) || index.semanticColors.success,
-  "text.disabled": index.neutralColors[500],
-  "text.primary": index.neutralColors[900],
-  "text.secondary": index.neutralColors[500],
-  warning: index.semanticColors.warning,
-  "warning.darkest": themeColor(colors.colors.warning, 9) || index.semanticColors.warning
+  primary: index.fairmintVars.colorBrandPrimary,
+  secondary: index.fairmintVars.colorTextSecondary,
+  success: index.fairmintVars.colorSuccessText,
+  "success.dark": index.fairmintVars.colorSuccessSolid,
+  "text.disabled": index.fairmintVars.colorTextDisabled,
+  "text.primary": index.fairmintVars.colorTextPrimary,
+  "text.secondary": index.fairmintVars.colorTextSecondary,
+  warning: index.fairmintVars.colorWarningText,
+  "warning.darkest": index.fairmintVars.colorWarningSolid
 };
 const resolveCompatColor = (color) => {
   if (typeof color !== "string" || !color) return void 0;
@@ -313,36 +308,36 @@ const compatTheme = {
   breakpoints: compatBreakpoints,
   palette: {
     action: {
-      active: index.neutralColors[700],
-      hover: index.neutralColors[100],
-      selected: index.neutralColors[200]
+      active: index.fairmintVars.colorIconPrimary,
+      hover: index.fairmintVars.colorBgHover,
+      selected: index.fairmintVars.colorBgSelected
     },
-    background: { default: index.neutralColors[50], paper: index.commonColors.white },
+    background: { default: index.fairmintVars.colorBgCanvas, paper: index.fairmintVars.colorBgSurface },
     common: { black: index.commonColors.black, white: index.commonColors.white },
-    divider: index.neutralColors[200],
-    error: { main: index.semanticColors.error },
+    divider: index.fairmintVars.colorBorderDefault,
+    error: { main: index.fairmintVars.colorErrorText },
     grey: {
-      50: index.neutralColors[50],
-      100: index.neutralColors[100],
-      500: index.neutralColors[500],
-      900: index.neutralColors[900]
+      50: index.fairmintVars.colorBgSurfaceSecondary,
+      100: index.fairmintVars.colorBgHover,
+      500: index.fairmintVars.colorTextSecondary,
+      900: index.fairmintVars.colorTextPrimary
     },
-    info: { main: index.semanticColors.info },
+    info: { main: index.fairmintVars.colorInfoText },
     mode: "light",
     primary: {
       contrastText: index.commonColors.white,
-      dark: themeColor(colors.colors.primary, 8) || index.brandColors.indigo,
-      light: themeColor(colors.colors.primary, 3) || index.brandColors.indigo,
-      main: index.brandColors.indigo
+      dark: index.fairmintVars.colorBrandPrimaryHover,
+      light: index.fairmintVars.colorBrandPrimaryActive,
+      main: index.fairmintVars.colorBrandPrimary
     },
-    secondary: { main: index.neutralColors[500] },
-    success: { main: index.semanticColors.success },
+    secondary: { main: index.fairmintVars.colorTextSecondary },
+    success: { main: index.fairmintVars.colorSuccessText },
     text: {
-      disabled: index.neutralColors[500],
-      primary: index.neutralColors[900],
-      secondary: index.neutralColors[600]
+      disabled: index.fairmintVars.colorTextDisabled,
+      primary: index.fairmintVars.colorTextPrimary,
+      secondary: index.fairmintVars.colorTextSecondary
     },
-    warning: { main: index.semanticColors.warning }
+    warning: { main: index.fairmintVars.colorWarningText }
   },
   shape: { borderRadius: 4 },
   spacing: (...values) => values.map((value) => typeof value === "number" ? `${value * 8}px` : value).join(" "),
@@ -1159,6 +1154,7 @@ const SvgIcon = ({
     "svg",
     {
       "aria-hidden": titleAccess ? void 0 : true,
+      color: htmlColor || resolveCompatColor(color),
       fill: "currentColor",
       focusable: "false",
       height: "1em",
@@ -1271,6 +1267,7 @@ const DatePicker = ({
         style,
         sx: { ...sxToStyle(sx2), ...sxToStyle(textFieldSx) }
       }),
+      popoverProps: { zIndex: 1400 },
       ...textFieldProps,
       ...props
     }