@zidsa/zidmui 1.4.40 → 1.5.0

package/dist/cjs/stories/Colors.stories.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const ColorSwatchContainer = material.styled(material.Box)({
+  display: "flex",
+  flexDirection: "column",
+  gap: "32px",
+  padding: "24px",
+  maxWidth: "1200px"
+});
+const ColorGroupTitle = material.styled(material.Typography)(({ theme }) => ({
+  fontSize: theme.spacing(3),
+  fontWeight: 600,
+  marginBottom: theme.spacing(2),
+  textTransform: "capitalize"
+}));
+const ColorRow = material.styled(material.Box)({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "12px"
+});
+const ColorSwatch = material.styled(material.Box)(({ bgColor, isLight }) => ({
+  width: "100px",
+  height: "80px",
+  backgroundColor: bgColor,
+  borderRadius: "8px",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "flex-end",
+  padding: "8px",
+  border: "1px solid rgba(0, 0, 0, 0.1)",
+  color: isLight ? "#0E0217" : "#FFFFFF",
+  fontSize: "11px",
+  fontFamily: "monospace",
+  cursor: "pointer",
+  transition: "transform 0.15s ease, box-shadow 0.15s ease",
+  "&:hover": {
+    transform: "scale(1.05)",
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)"
+  },
+  "&:active": {
+    transform: "scale(0.98)"
+  }
+}));
+const SwatchLabel = material.styled("span")({
+  fontWeight: 600,
+  marginBottom: "2px"
+});
+const SwatchHex = material.styled("span")({
+  opacity: 0.8,
+  fontSize: "10px"
+});
+const isLightColor = (color) => {
+  let r, g, b;
+  if (color.startsWith("rgba")) {
+    const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (match) {
+      r = parseInt(match[1], 10);
+      g = parseInt(match[2], 10);
+      b = parseInt(match[3], 10);
+    } else {
+      return true;
+    }
+  } else {
+    const hex = color.replace("#", "");
+    r = parseInt(hex.substring(0, 2), 16);
+    g = parseInt(hex.substring(2, 4), 16);
+    b = parseInt(hex.substring(4, 6), 16);
+  }
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.5;
+};
+const ColorScaleDisplay = ({ name, colors }) => {
+  const [copiedKey, setCopiedKey] = React.useState(null);
+  const handleCopy = (shade, hex) => {
+    navigator.clipboard.writeText(hex);
+    setCopiedKey(shade);
+    setTimeout(() => setCopiedKey(null), 1500);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ColorGroupTitle, { children: name }),
+    /* @__PURE__ */ jsxRuntime.jsx(ColorRow, { children: Object.entries(colors).map(([shade, hex]) => /* @__PURE__ */ jsxRuntime.jsxs(
+      ColorSwatch,
+      {
+        bgColor: hex,
+        isLight: isLightColor(hex),
+        onClick: () => handleCopy(shade, hex),
+        title: `Click to copy ${hex}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SwatchLabel, { children: copiedKey === shade ? "Copied!" : shade }),
+          /* @__PURE__ */ jsxRuntime.jsx(SwatchHex, { children: hex })
+        ]
+      },
+      shade
+    )) })
+  ] });
+};
+const ColorsDisplay = () => {
+  const theme = material.useTheme();
+  const { colors } = theme.palette;
+  const colorScales = [
+    { name: "Primary", colors: colors.primary },
+    { name: "Secondary", colors: colors.secondary },
+    { name: "Neutral", colors: colors.neutral },
+    { name: "Green", colors: colors.green },
+    { name: "Blue", colors: colors.blue },
+    { name: "Yellow", colors: colors.yellow },
+    { name: "Orange", colors: colors.orange },
+    { name: "Red", colors: colors.red },
+    { name: "Base", colors: colors.base }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs(ColorSwatchContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h4", sx: { mb: 1 }, children: "Parcel Design System Colors" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "text.secondary", sx: { mb: 4 }, children: [
+        "Access colors via ",
+        /* @__PURE__ */ jsxRuntime.jsx("code", { children: "theme.palette.colors.{colorName}[shade]" })
+      ] })
+    ] }),
+    colorScales.map(({ name, colors: colors2 }) => /* @__PURE__ */ jsxRuntime.jsx(ColorScaleDisplay, { name, colors: colors2 }, name))
+  ] });
+};
+const meta = {
+  title: "Design System/Colors",
+  component: ColorsDisplay,
+  parameters: {
+    layout: "fullscreen"
+  },
+  tags: ["autodocs"]
+};
+const AllColors = {};
+exports.AllColors = AllColors;
+exports.default = meta;
+//# sourceMappingURL=Colors.stories.js.map

package/dist/cjs/stories/Colors.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Colors.stories.js","sources":["../../../src/stories/Colors.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\nimport { useState } from 'react';\n\nimport { Box, Typography, useTheme, styled } from '@mui/material';\n\n//\n//\n\nconst ColorSwatchContainer = styled(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '32px',\n  padding: '24px',\n  maxWidth: '1200px',\n});\n\nconst ColorGroupTitle = styled(Typography)(({ theme }) => ({\n  fontSize: theme.spacing(3),\n  fontWeight: 600,\n  marginBottom: theme.spacing(2),\n  textTransform: 'capitalize',\n}));\n\nconst ColorRow = styled(Box)({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: '12px',\n});\n\nconst ColorSwatch = styled(Box)<{ bgColor: string; isLight?: boolean }>(({ bgColor, isLight }) => ({\n  width: '100px',\n  height: '80px',\n  backgroundColor: bgColor,\n  borderRadius: '8px',\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'flex-end',\n  padding: '8px',\n  border: '1px solid rgba(0, 0, 0, 0.1)',\n  color: isLight ? '#0E0217' : '#FFFFFF',\n  fontSize: '11px',\n  fontFamily: 'monospace',\n  cursor: 'pointer',\n  transition: 'transform 0.15s ease, box-shadow 0.15s ease',\n  '&:hover': {\n    transform: 'scale(1.05)',\n    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',\n  },\n  '&:active': {\n    transform: 'scale(0.98)',\n  },\n}));\n\nconst SwatchLabel = styled('span')({\n  fontWeight: 600,\n  marginBottom: '2px',\n});\n\nconst SwatchHex = styled('span')({\n  opacity: 0.8,\n  fontSize: '10px',\n});\n\n//\n//\n\ninterface ColorScale {\n  [key: string]: string;\n}\n\nconst isLightColor = (color: string): boolean => {\n  let r: number, g: number, b: number;\n\n  // Handle rgba format: rgba(255, 255, 255, 0.8)\n  if (color.startsWith('rgba')) {\n    const match = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/);\n\n    if (match) {\n      r = parseInt(match[1], 10);\n      g = parseInt(match[2], 10);\n      b = parseInt(match[3], 10);\n    } else {\n      return true; // Default to light if parsing fails\n    }\n  } else {\n    // Handle hex format: #FFFFFF\n    const hex = color.replace('#', '');\n    r = parseInt(hex.substring(0, 2), 16);\n    g = parseInt(hex.substring(2, 4), 16);\n    b = parseInt(hex.substring(4, 6), 16);\n  }\n\n  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n\n  return luminance > 0.5;\n};\n\nconst ColorScaleDisplay = ({ name, colors }: { name: string; colors: ColorScale }) => {\n  const [copiedKey, setCopiedKey] = useState<string | null>(null);\n\n  const handleCopy = (shade: string, hex: string) => {\n    navigator.clipboard.writeText(hex);\n    setCopiedKey(shade);\n    setTimeout(() => setCopiedKey(null), 1500);\n  };\n\n  return (\n    <Box>\n      <ColorGroupTitle>{name}</ColorGroupTitle>\n      <ColorRow>\n        {Object.entries(colors).map(([shade, hex]) => (\n          <ColorSwatch\n            key={shade}\n            bgColor={hex}\n            isLight={isLightColor(hex)}\n            onClick={() => handleCopy(shade, hex)}\n            title={`Click to copy ${hex}`}\n          >\n            <SwatchLabel>{copiedKey === shade ? 'Copied!' : shade}</SwatchLabel>\n            <SwatchHex>{hex}</SwatchHex>\n          </ColorSwatch>\n        ))}\n      </ColorRow>\n    </Box>\n  );\n};\n\n//\n//\n\nconst ColorsDisplay = () => {\n  const theme = useTheme();\n  const { colors } = theme.palette;\n\n  const colorScales = [\n    { name: 'Primary', colors: colors.primary },\n    { name: 'Secondary', colors: colors.secondary },\n    { name: 'Neutral', colors: colors.neutral },\n    { name: 'Green', colors: colors.green },\n    { name: 'Blue', colors: colors.blue },\n    { name: 'Yellow', colors: colors.yellow },\n    { name: 'Orange', colors: colors.orange },\n    { name: 'Red', colors: colors.red },\n    { name: 'Base', colors: colors.base },\n  ];\n\n  return (\n    <ColorSwatchContainer>\n      <Box>\n        <Typography variant=\"h4\" sx={{ mb: 1 }}>\n          Parcel Design System Colors\n        </Typography>\n        <Typography variant=\"body2\" color=\"text.secondary\" sx={{ mb: 4 }}>\n          Access colors via <code>theme.palette.colors.&#123;colorName&#125;[shade]</code>\n        </Typography>\n      </Box>\n\n      {colorScales.map(({ name, colors }) => (\n        <ColorScaleDisplay key={name} name={name} colors={colors} />\n      ))}\n    </ColorSwatchContainer>\n  );\n};\n\n//\n//\n\nconst meta = {\n  title: 'Design System/Colors',\n  component: ColorsDisplay,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof ColorsDisplay>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const AllColors: Story = {};\n"],"names":["styled","Box","Typography","useState","jsx","jsxs","useTheme","colors"],"mappings":"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"}

package/dist/cjs/stories/design/Spacing.stories.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+const React = require("react");
+const stackColumn = require("../../components/stack-column.js");
+const stackRow = require("../../components/stack-row.js");
+const appTooltip = require("../../components/app-tooltip.js");
+const fileCopyLine = require("../../icons/document/file-copy-line.js");
+const checkLine = require("../../icons/system/check-line.js");
+const appTypography = require("../../components/app-typography.js");
+const meta = {
+  title: "Design System/Spacing",
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+};
+const DemoBox = ({ color = "#1976d2" }) => /* @__PURE__ */ jsxRuntime.jsx(
+  material.Box,
+  {
+    sx: {
+      width: 60,
+      height: 60,
+      backgroundColor: color,
+      borderRadius: 1,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "white",
+      fontSize: "12px",
+      fontWeight: "bold"
+    },
+    children: "Box"
+  }
+);
+const CopyButton = ({ value }) => {
+  const [copied, setCopied] = React.useState(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(`gap={${value}}`);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(appTooltip.AppTooltip, { description: copied ? "Copied!" : "Copy", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { size: "small", onClick: handleCopy, children: copied ? /* @__PURE__ */ jsxRuntime.jsx(checkLine.IconCheckLine, { fontSize: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(fileCopyLine.IconFileCopyLine, { fontSize: "small" }) }) });
+};
+const spacingValues = [
+  1,
+  1.25,
+  1.5,
+  1.75,
+  2,
+  2.25,
+  2.5,
+  2.75,
+  3,
+  3.25,
+  3.5,
+  3.75,
+  4,
+  4.25,
+  4.5,
+  4.75,
+  5
+];
+const StackRowSpacing = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsx(stackColumn.StackColumn, { gap: 3, children: spacingValues.map((spacing) => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 0.75, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(stackRow.StackRow, { gap: 0, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(appTypography.AppTypography, { variant: "subtitle1", minWidth: 60, children: [
+        "Gap: ",
+        spacing
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { value: spacing })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(stackRow.StackRow, { gap: spacing, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DemoBox, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(DemoBox, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(DemoBox, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(DemoBox, {})
+    ] })
+  ] }, `row-${spacing}`)) })
+};
+const StackColumnSpacing = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsx(stackColumn.StackColumn, { gap: 3, children: spacingValues.map((spacing) => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 0.75, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(stackRow.StackRow, { gap: 0, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(appTypography.AppTypography, { variant: "subtitle1", minWidth: 60, children: [
+        "Gap: ",
+        spacing
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { value: spacing })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: spacing, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DemoBox, { color: "#dc3545" }),
+      /* @__PURE__ */ jsxRuntime.jsx(DemoBox, { color: "#dc3545" }),
+      /* @__PURE__ */ jsxRuntime.jsx(DemoBox, { color: "#dc3545" }),
+      /* @__PURE__ */ jsxRuntime.jsx(DemoBox, { color: "#dc3545" })
+    ] })
+  ] }, `col-${spacing}`)) })
+};
+exports.StackColumnSpacing = StackColumnSpacing;
+exports.StackRowSpacing = StackRowSpacing;
+exports.default = meta;
+//# sourceMappingURL=Spacing.stories.js.map

package/dist/cjs/stories/design/Spacing.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacing.stories.js","sources":["../../../../src/stories/design/Spacing.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\nimport { Box, IconButton } from '@mui/material';\nimport { useState } from 'react';\nimport { StackColumn } from '../../components/stack-column';\nimport { StackRow } from '../../components/stack-row';\nimport { AppTooltip } from '../../components/app-tooltip';\nimport { IconFileCopyLine } from '../../icons/document/file-copy-line';\nimport { IconCheckLine } from '../../icons/system/check-line';\nimport { AppTypography } from '../../components/app-typography';\n\n//\n//\n\nconst meta = {\n  title: 'Design System/Spacing',\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nconst DemoBox = ({ color = '#1976d2' }: { color?: string }) => (\n  <Box\n    sx={{\n      width: 60,\n      height: 60,\n      backgroundColor: color,\n      borderRadius: 1,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'white',\n      fontSize: '12px',\n      fontWeight: 'bold',\n    }}\n  >\n    Box\n  </Box>\n);\n\nconst CopyButton = ({ value }: { value: number | string }) => {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(`gap={${value}}`);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <AppTooltip description={copied ? 'Copied!' : 'Copy'}>\n      <IconButton size=\"small\" onClick={handleCopy}>\n        {copied ? <IconCheckLine fontSize=\"small\" /> : <IconFileCopyLine fontSize=\"small\" />}\n      </IconButton>\n    </AppTooltip>\n  );\n};\n\nconst spacingValues = [\n  1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 3.25, 3.5, 3.75, 4, 4.25, 4.5, 4.75, 5,\n];\n\nexport const StackRowSpacing: Story = {\n  render: () => (\n    <StackColumn gap={3}>\n      {spacingValues.map(spacing => (\n        <StackColumn key={`row-${spacing}`} gap={0.75}>\n          <StackRow gap={0}>\n            <AppTypography variant=\"subtitle1\" minWidth={60}>\n              Gap: {spacing}\n            </AppTypography>\n            <CopyButton value={spacing} />\n          </StackRow>\n\n          <StackRow gap={spacing}>\n            <DemoBox />\n            <DemoBox />\n            <DemoBox />\n            <DemoBox />\n          </StackRow>\n        </StackColumn>\n      ))}\n    </StackColumn>\n  ),\n};\n\nexport const StackColumnSpacing: Story = {\n  render: () => (\n    <StackColumn gap={3}>\n      {spacingValues.map(spacing => (\n        <StackColumn key={`col-${spacing}`} gap={0.75}>\n          <StackRow gap={0}>\n            <AppTypography variant=\"subtitle1\" minWidth={60}>\n              Gap: {spacing}\n            </AppTypography>\n            <CopyButton value={spacing} />\n          </StackRow>\n          <StackColumn gap={spacing}>\n            <DemoBox color=\"#dc3545\" />\n            <DemoBox color=\"#dc3545\" />\n            <DemoBox color=\"#dc3545\" />\n            <DemoBox color=\"#dc3545\" />\n          </StackColumn>\n        </StackColumn>\n      ))}\n    </StackColumn>\n  ),\n};\n"],"names":["jsx","Box","useState","AppTooltip","IconButton","IconCheckLine","IconFileCopyLine","StackColumn","jsxs","StackRow","AppTypography"],"mappings":"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"}

package/dist/cjs/theme/colors.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const base = {
+  white: "#FFFFFF",
+  neutral: "#F5F4F6",
+  silver: "#E8E4EB",
+  black: "#000000",
+  blur: "rgba(255, 255, 255, 0.8)"
+};
+const primary = {
+  50: "#FBF9FF",
+  100: "#F8F5FF",
+  200: "#F1EAFF",
+  300: "#E2D2FF",
+  400: "#D2B8FF",
+  500: "#C199FF",
+  600: "#AE72FF",
+  700: "#9C66E4",
+  800: "#8758C6",
+  900: "#6E48A1",
+  1e3: "#4E3372"
+};
+const secondary = {
+  50: "#F4F3F5",
+  100: "#EBE8ED",
+  200: "#D8D2DD",
+  300: "#B1A4BB",
+  400: "#8A7798",
+  500: "#634976",
+  600: "#3C1C54",
+  700: "#36194B",
+  800: "#2E1641",
+  900: "#261235",
+  1e3: "#1B0D26"
+};
+const neutral = {
+  50: "#F8F8F8",
+  100: "#F2F2F2",
+  200: "#E4E4E5",
+  300: "#C6C6C8",
+  400: "#A3A1A6",
+  500: "#75727B",
+  600: "#1F0433",
+  700: "#1C042E",
+  800: "#180328",
+  900: "#140320",
+  1e3: "#0E0217"
+};
+const green = {
+  50: "#FAFDFA",
+  100: "#F7FDF7",
+  200: "#EFFBEE",
+  300: "#DDF8DC",
+  400: "#CAF4C8",
+  500: "#B6F0B1",
+  600: "#9EEC98",
+  700: "#8DD388",
+  800: "#7AB776",
+  900: "#649560",
+  1e3: "#476A44"
+};
+const blue = {
+  50: "#F9FDFD",
+  100: "#F4FCFC",
+  200: "#E9FAFA",
+  300: "#D1F4F4",
+  400: "#B5EFEF",
+  500: "#95E9E9",
+  600: "#6BE3E3",
+  700: "#60CBCB",
+  800: "#53B0B0",
+  900: "#449090",
+  1e3: "#306666"
+};
+const yellow = {
+  50: "#FEFDF9",
+  100: "#FEFDF5",
+  200: "#FEFAEB",
+  300: "#FDF5D6",
+  400: "#FBF0BF",
+  500: "#FAEBA4",
+  600: "#F9E683",
+  700: "#DFCE75",
+  800: "#C1B265",
+  900: "#9D9153",
+  1e3: "#6F673B"
+};
+const orange = {
+  50: "#FFFAF8",
+  100: "#FFF6F3",
+  200: "#FFEDE6",
+  300: "#FFD8C9",
+  400: "#FFC2A7",
+  500: "#FFA97D",
+  600: "#FF8C3A",
+  700: "#E47D34",
+  800: "#C66C2D",
+  900: "#A15925",
+  1e3: "#723F1A"
+};
+const red = {
+  50: "#FFF8F9",
+  100: "#FFF3F4",
+  200: "#FEE5E9",
+  300: "#FDC9D0",
+  400: "#FCA7B4",
+  500: "#FB7C93",
+  600: "#FA3768",
+  700: "#E0315D",
+  800: "#C22B51",
+  900: "#9E2342",
+  1e3: "#70192F"
+};
+const colors = {
+  primary,
+  secondary,
+  base,
+  neutral,
+  green,
+  blue,
+  yellow,
+  orange,
+  red
+};
+exports.base = base;
+exports.blue = blue;
+exports.colors = colors;
+exports.green = green;
+exports.neutral = neutral;
+exports.orange = orange;
+exports.primary = primary;
+exports.red = red;
+exports.secondary = secondary;
+exports.yellow = yellow;
+//# sourceMappingURL=colors.js.map

package/dist/cjs/theme/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sources":["../../../src/theme/colors.ts"],"sourcesContent":["export const base = {\n  white: '#FFFFFF',\n  neutral: '#F5F4F6',\n  silver: '#E8E4EB',\n  black: '#000000',\n  blur: 'rgba(255, 255, 255, 0.8)',\n};\n\nexport const primary = {\n  50: '#FBF9FF',\n  100: '#F8F5FF',\n  200: '#F1EAFF',\n  300: '#E2D2FF',\n  400: '#D2B8FF',\n  500: '#C199FF',\n  600: '#AE72FF',\n  700: '#9C66E4',\n  800: '#8758C6',\n  900: '#6E48A1',\n  1000: '#4E3372',\n};\n\nexport const secondary = {\n  50: '#F4F3F5',\n  100: '#EBE8ED',\n  200: '#D8D2DD',\n  300: '#B1A4BB',\n  400: '#8A7798',\n  500: '#634976',\n  600: '#3C1C54',\n  700: '#36194B',\n  800: '#2E1641',\n  900: '#261235',\n  1000: '#1B0D26',\n};\n\nexport const neutral = {\n  50: '#F8F8F8',\n  100: '#F2F2F2',\n  200: '#E4E4E5',\n  300: '#C6C6C8',\n  400: '#A3A1A6',\n  500: '#75727B',\n  600: '#1F0433',\n  700: '#1C042E',\n  800: '#180328',\n  900: '#140320',\n  1000: '#0E0217',\n};\n\nexport const green = {\n  50: '#FAFDFA',\n  100: '#F7FDF7',\n  200: '#EFFBEE',\n  300: '#DDF8DC',\n  400: '#CAF4C8',\n  500: '#B6F0B1',\n  600: '#9EEC98',\n  700: '#8DD388',\n  800: '#7AB776',\n  900: '#649560',\n  1000: '#476A44',\n};\n\nexport const blue = {\n  50: '#F9FDFD',\n  100: '#F4FCFC',\n  200: '#E9FAFA',\n  300: '#D1F4F4',\n  400: '#B5EFEF',\n  500: '#95E9E9',\n  600: '#6BE3E3',\n  700: '#60CBCB',\n  800: '#53B0B0',\n  900: '#449090',\n  1000: '#306666',\n};\n\nexport const yellow = {\n  50: '#FEFDF9',\n  100: '#FEFDF5',\n  200: '#FEFAEB',\n  300: '#FDF5D6',\n  400: '#FBF0BF',\n  500: '#FAEBA4',\n  600: '#F9E683',\n  700: '#DFCE75',\n  800: '#C1B265',\n  900: '#9D9153',\n  1000: '#6F673B',\n};\n\nexport const orange = {\n  50: '#FFFAF8',\n  100: '#FFF6F3',\n  200: '#FFEDE6',\n  300: '#FFD8C9',\n  400: '#FFC2A7',\n  500: '#FFA97D',\n  600: '#FF8C3A',\n  700: '#E47D34',\n  800: '#C66C2D',\n  900: '#A15925',\n  1000: '#723F1A',\n};\n\nexport const red = {\n  50: '#FFF8F9',\n  100: '#FFF3F4',\n  200: '#FEE5E9',\n  300: '#FDC9D0',\n  400: '#FCA7B4',\n  500: '#FB7C93',\n  600: '#FA3768',\n  700: '#E0315D',\n  800: '#C22B51',\n  900: '#9E2342',\n  1000: '#70192F',\n};\n\nexport const colors = {\n  primary,\n  secondary,\n  base,\n  neutral,\n  green,\n  blue,\n  yellow,\n  orange,\n  red,\n};\n"],"names":[],"mappings":";;AAAO,MAAM,OAAO;AAAA,EAClB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,UAAU;AAAA,EACrB,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAM;AACR;AAEO,MAAM,YAAY;AAAA,EACvB,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAM;AACR;AAEO,MAAM,UAAU;AAAA,EACrB,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAM;AACR;AAEO,MAAM,QAAQ;AAAA,EACnB,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAM;AACR;AAEO,MAAM,OAAO;AAAA,EAClB,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAM;AACR;AAEO,MAAM,SAAS;AAAA,EACpB,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAM;AACR;AAEO,MAAM,SAAS;AAAA,EACpB,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAM;AACR;AAEO,MAAM,MAAM;AAAA,EACjB,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAM;AACR;AAEO,MAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;;;;;;;;;;"}

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

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const MuiAlert = {
+  styleOverrides: {
+    root: ({ theme }) => ({
+      borderStyle: "solid",
+      borderWidth: 1,
+      borderRadius: 12,
+      flexWrap: "wrap",
+      [theme.breakpoints.down("md")]: {
+        paddingInline: theme.spacing(1)
+      },
+      "&.MuiAlert-colorError": {
+        color: "inherit",
+        borderColor: theme.palette.colors.red[300],
+        background: theme.palette.colors.red[100],
+        ".MuiAlert-icon": {
+          color: theme.palette.colors.red[400]
+        },
+        ".MuiAlert-action .MuiSvgIcon-fontSizeSmall": {
+          fill: theme.palette.colors.red[1e3]
+        }
+      },
+      ".MuiTypography-root.MuiAlertTitle-root": {
+        margin: 0
+      },
+      ".MuiAlert-icon": {
+        flex: 0,
+        paddingBlock: theme.spacing(0.75),
+        alignItems: "flex-start"
+      },
+      ".MuiAlert-message": {
+        flex: 1,
+        paddingBlock: theme.spacing(0.75),
+        display: "flex",
+        alignItems: "center"
+      },
+      ".MuiAlert-action": {
+        paddingTop: theme.spacing(0.25),
+        marginRight: 0,
+        alignItems: "flex-start",
+        [theme.breakpoints.down("md")]: {
+          paddingLeft: theme.spacing(0.5)
+        }
+      },
+      "&.MuiAlert-colorWarning": {
+        color: "inherit",
+        borderColor: theme.palette.colors.yellow[500],
+        background: theme.palette.colors.yellow[100],
+        ".MuiAlert-icon": {
+          color: theme.palette.colors.yellow[700]
+        },
+        ".MuiAlert-action .MuiSvgIcon-fontSizeSmall": {
+          fill: "#6F673B"
+        }
+      },
+      "&.MuiAlert-colorInfo": {
+        color: "inherit",
+        borderColor: theme.palette.colors.blue[400],
+        background: theme.palette.colors.blue[100],
+        ".MuiAlert-icon": {
+          color: theme.palette.colors.blue[900]
+        },
+        ".MuiAlert-action .MuiSvgIcon-fontSizeSmall": {
+          fill: theme.palette.colors.blue[1e3]
+        }
+      },
+      "&.MuiAlert-colorSuccess": {
+        color: "inherit",
+        borderColor: theme.palette.colors.green[400],
+        background: theme.palette.colors.green[100],
+        ".MuiAlert-icon": {
+          color: theme.palette.colors.green[600]
+        },
+        ".MuiAlert-action .MuiSvgIcon-fontSizeSmall": {
+          fill: theme.palette.colors.green[1e3]
+        }
+      }
+    })
+  }
+};
+exports.MuiAlert = MuiAlert;
+//# sourceMappingURL=alert.js.map

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

@@ -0,0 +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.colors.red[300],\n        background: theme.palette.colors.red[100],\n        '.MuiAlert-icon': {\n          color: theme.palette.colors.red[400],\n        },\n        '.MuiAlert-action .MuiSvgIcon-fontSizeSmall': {\n          fill: theme.palette.colors.red[1000],\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.colors.yellow[500],\n        background: theme.palette.colors.yellow[100],\n        '.MuiAlert-icon': {\n          color: theme.palette.colors.yellow[700],\n        },\n        '.MuiAlert-action .MuiSvgIcon-fontSizeSmall': {\n          fill: '#6F673B',\n        },\n      },\n      '&.MuiAlert-colorInfo': {\n        color: 'inherit',\n        borderColor: theme.palette.colors.blue[400],\n        background: theme.palette.colors.blue[100],\n        '.MuiAlert-icon': {\n          color: theme.palette.colors.blue[900],\n        },\n        '.MuiAlert-action .MuiSvgIcon-fontSizeSmall': {\n          fill: theme.palette.colors.blue[1000],\n        },\n      },\n      '&.MuiAlert-colorSuccess': {\n        color: 'inherit',\n        borderColor: theme.palette.colors.green[400],\n        background: theme.palette.colors.green[100],\n        '.MuiAlert-icon': {\n          color: theme.palette.colors.green[600],\n        },\n        '.MuiAlert-action .MuiSvgIcon-fontSizeSmall': {\n          fill: theme.palette.colors.green[1000],\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,OAAO,IAAI,GAAG;AAAA,QACzC,YAAY,MAAM,QAAQ,OAAO,IAAI,GAAG;AAAA,QACxC,kBAAkB;AAAA,UAChB,OAAO,MAAM,QAAQ,OAAO,IAAI,GAAG;AAAA,QAAA;AAAA,QAErC,8CAA8C;AAAA,UAC5C,MAAM,MAAM,QAAQ,OAAO,IAAI,GAAI;AAAA,QAAA;AAAA,MACrC;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,OAAO,OAAO,GAAG;AAAA,QAC5C,YAAY,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,QAC3C,kBAAkB;AAAA,UAChB,OAAO,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,QAAA;AAAA,QAExC,8CAA8C;AAAA,UAC5C,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,MAEF,wBAAwB;AAAA,QACtB,OAAO;AAAA,QACP,aAAa,MAAM,QAAQ,OAAO,KAAK,GAAG;AAAA,QAC1C,YAAY,MAAM,QAAQ,OAAO,KAAK,GAAG;AAAA,QACzC,kBAAkB;AAAA,UAChB,OAAO,MAAM,QAAQ,OAAO,KAAK,GAAG;AAAA,QAAA;AAAA,QAEtC,8CAA8C;AAAA,UAC5C,MAAM,MAAM,QAAQ,OAAO,KAAK,GAAI;AAAA,QAAA;AAAA,MACtC;AAAA,MAEF,2BAA2B;AAAA,QACzB,OAAO;AAAA,QACP,aAAa,MAAM,QAAQ,OAAO,MAAM,GAAG;AAAA,QAC3C,YAAY,MAAM,QAAQ,OAAO,MAAM,GAAG;AAAA,QAC1C,kBAAkB;AAAA,UAChB,OAAO,MAAM,QAAQ,OAAO,MAAM,GAAG;AAAA,QAAA;AAAA,QAEvC,8CAA8C;AAAA,UAC5C,MAAM,MAAM,QAAQ,OAAO,MAAM,GAAI;AAAA,QAAA;AAAA,MACvC;AAAA,IACF;AAAA,EACF;AAEJ;;"}