@12-apps/ui 6.11.0 → 6.12.0

package/dist/chunk-JXUWWPZR.js

@@ -0,0 +1,233 @@
+// src/components/feedback/Toast/Toast.tsx
+import SuccessIcon from "@mui/icons-material/CheckCircle";
+import CloseIcon from "@mui/icons-material/Close";
+import ErrorIcon from "@mui/icons-material/Error";
+import InfoIcon from "@mui/icons-material/Info";
+import WarningIcon from "@mui/icons-material/Warning";
+import Alert from "@mui/material/Alert/index.js";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Portal from "@mui/material/Portal/index.js";
+import Slide from "@mui/material/Slide/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { createContext, useCallback, useContext, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ToastContext = createContext(null);
+var resolveToastMessage = (message, value) => typeof message === "function" ? message(value) : message;
+var trackPromiseWithToasts = async (promiseToResolve, options, addToast, removeToast) => {
+  const toastId = addToast({
+    message: options.loading,
+    variant: "promise",
+    persistent: true
+  });
+  try {
+    const data = await promiseToResolve;
+    removeToast(toastId);
+    addToast({ message: resolveToastMessage(options.success, data), variant: "success" });
+    return data;
+  } catch (error) {
+    removeToast(toastId);
+    addToast({ message: resolveToastMessage(options.error, error), variant: "error" });
+    throw error;
+  }
+};
+var ToastProvider = ({ children }) => {
+  const [toasts, setToasts] = useState([]);
+  const removeToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+  const addToast = useCallback(
+    (toast) => {
+      const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+      const newToast = {
+        ...toast,
+        id,
+        timestamp: Date.now()
+      };
+      setToasts((prev) => [...prev, newToast]);
+      if (!toast.persistent && toast.duration !== 0) {
+        const duration = toast.duration ?? 5e3;
+        window.setTimeout(() => {
+          removeToast(id);
+        }, duration);
+      }
+      return id;
+    },
+    [removeToast]
+  );
+  const clearAllToasts = useCallback(() => {
+    setToasts([]);
+  }, []);
+  const promise = useCallback(
+    (promiseToResolve, options) => trackPromiseWithToasts(promiseToResolve, options, addToast, removeToast),
+    [addToast, removeToast]
+  );
+  const contextValue = {
+    toasts,
+    addToast,
+    removeToast,
+    clearAllToasts,
+    promise
+  };
+  return /* @__PURE__ */ jsx(ToastContext.Provider, { value: contextValue, children });
+};
+var useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+var renderVariantIcon = (variant) => {
+  switch (variant) {
+    case "success":
+      return /* @__PURE__ */ jsx(SuccessIcon, {});
+    case "error":
+      return /* @__PURE__ */ jsx(ErrorIcon, {});
+    case "warning":
+      return /* @__PURE__ */ jsx(WarningIcon, {});
+    case "info":
+      return /* @__PURE__ */ jsx(InfoIcon, {});
+    case "promise":
+      return /* @__PURE__ */ jsx(CircularProgress, { size: 20 });
+    default:
+      return null;
+  }
+};
+var toAlertSeverity = (variant) => variant === "default" || variant === "promise" ? "info" : variant;
+var buildToastStyles = (theme, glass) => {
+  const baseStyles = {
+    borderRadius: theme.spacing(1.5),
+    transition: theme.transitions.create(["background-color", "backdrop-filter"], {
+      duration: theme.transitions.duration.standard
+    })
+  };
+  if (glass) {
+    return {
+      ...baseStyles,
+      backgroundColor: alpha(theme.palette.background.paper, 0.1),
+      backdropFilter: "blur(20px)",
+      border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`
+    };
+  }
+  return baseStyles;
+};
+var Toast = ({
+  id = "",
+  message,
+  variant = "default",
+  closable = true,
+  action,
+  glass = false,
+  onClose,
+  dataTestId = "toast"
+}) => {
+  const theme = useTheme();
+  const handleClose = () => {
+    if (onClose && id) {
+      onClose(id);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Alert,
+    {
+      "data-testid": dataTestId,
+      icon: renderVariantIcon(variant),
+      severity: toAlertSeverity(variant),
+      onClose: closable ? handleClose : void 0,
+      action: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+        action && /* @__PURE__ */ jsx(
+          Button,
+          {
+            "data-testid": `${dataTestId}-action`,
+            color: "inherit",
+            size: "small",
+            onClick: action.onClick,
+            children: action.label
+          }
+        ),
+        closable && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "data-testid": `${dataTestId}-close`,
+            "aria-label": "close",
+            color: "inherit",
+            size: "small",
+            onClick: handleClose,
+            children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+          }
+        )
+      ] }),
+      sx: buildToastStyles(theme, glass),
+      children: /* @__PURE__ */ jsx(Typography, { "data-testid": `${dataTestId}-message`, variant: "body2", children: message })
+    }
+  );
+};
+var ToastContainer = ({
+  position = "top-right",
+  maxToasts = 5,
+  gap = 8,
+  className,
+  dataTestId = "toast-container"
+}) => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("ToastContainer must be used within a ToastProvider");
+  }
+  const { toasts, removeToast } = context;
+  const getPositionStyles = () => {
+    const baseStyles = {
+      position: "fixed",
+      zIndex: 9999,
+      display: "flex",
+      flexDirection: "column",
+      gap: `${gap}px`,
+      padding: "16px",
+      pointerEvents: "none"
+    };
+    switch (position) {
+      case "top-left":
+        return { ...baseStyles, top: 0, left: 0 };
+      case "top-center":
+        return { ...baseStyles, top: 0, left: "50%", transform: "translateX(-50%)" };
+      case "top-right":
+        return { ...baseStyles, top: 0, right: 0 };
+      case "bottom-left":
+        return { ...baseStyles, bottom: 0, left: 0, flexDirection: "column-reverse" };
+      case "bottom-center":
+        return {
+          ...baseStyles,
+          bottom: 0,
+          left: "50%",
+          transform: "translateX(-50%)",
+          flexDirection: "column-reverse"
+        };
+      case "bottom-right":
+        return { ...baseStyles, bottom: 0, right: 0, flexDirection: "column-reverse" };
+      default:
+        return { ...baseStyles, top: 0, right: 0 };
+    }
+  };
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Box, { "data-testid": dataTestId, className, sx: getPositionStyles(), children: toasts.slice(0, maxToasts).map((toast, index) => /* @__PURE__ */ jsx(
+    Slide,
+    {
+      direction: position.includes("left") ? "right" : "left",
+      in: true,
+      timeout: 300,
+      style: { pointerEvents: "auto" },
+      children: /* @__PURE__ */ jsx(Box, { "data-testid": `${dataTestId}-item-${index}`, children: /* @__PURE__ */ jsx(Toast, { ...toast, onClose: removeToast, dataTestId: toast.dataTestId || `toast-${index}` }) })
+    },
+    toast.id
+  )) }) });
+};
+
+export {
+  ToastProvider,
+  useToast,
+  Toast,
+  ToastContainer
+};
+//# sourceMappingURL=chunk-JXUWWPZR.js.map

package/dist/chunk-JXUWWPZR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Toast/Toast.tsx"],"sourcesContent":["import SuccessIcon from '@mui/icons-material/CheckCircle';\nimport CloseIcon from '@mui/icons-material/Close';\nimport ErrorIcon from '@mui/icons-material/Error';\nimport InfoIcon from '@mui/icons-material/Info';\nimport WarningIcon from '@mui/icons-material/Warning';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport Alert from '@mui/material/Alert/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Portal from '@mui/material/Portal/index.js';\nimport Slide from '@mui/material/Slide/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport React, { createContext, useCallback,useContext, useState } from 'react';\n\nimport type { ToastContainerProps, ToastContextType, ToastItem,ToastProps } from './Toast.types';\n\nconst ToastContext = createContext<ToastContextType | null>(null);\n\ntype PromiseToastOptions<T> = {\n  loading: string;\n  success: string | ((data: T) => string);\n  error: string | ((error: unknown) => string);\n};\n\n// success/error may be a literal or a formatter over the settled value.\nconst resolveToastMessage = <T,>(message: string | ((value: T) => string), value: T): string =>\n  typeof message === 'function' ? message(value) : message;\n\n// Shows a persistent \"loading\" toast for the life of a promise, then swaps it\n// for a success or error one. Lives outside the provider so the provider body\n// stays readable; it takes add/remove rather than reaching for context.\nconst trackPromiseWithToasts = async <T,>(\n  promiseToResolve: Promise<T>,\n  options: PromiseToastOptions<T>,\n  addToast: (toast: Omit<ToastProps, 'id'>) => string,\n  removeToast: (id: string) => void,\n): Promise<T> => {\n  const toastId = addToast({\n    message: options.loading,\n    variant: 'promise',\n    persistent: true,\n  });\n\n  try {\n    const data = await promiseToResolve;\n\n    removeToast(toastId);\n    addToast({ message: resolveToastMessage(options.success, data), variant: 'success' });\n\n    return data;\n  } catch (error) {\n    removeToast(toastId);\n    addToast({ message: resolveToastMessage(options.error, error), variant: 'error' });\n\n    throw error;\n  }\n};\n\nexport const ToastProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n\n  const removeToast = useCallback((id: string) => {\n    setToasts((prev) => prev.filter((toast) => toast.id !== id));\n  }, []);\n\n  const addToast = useCallback(\n    (toast: Omit<ToastProps, 'id'>): string => {\n      const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\n      const newToast: ToastItem = {\n        ...toast,\n        id,\n        timestamp: Date.now(),\n      };\n\n      setToasts((prev) => [...prev, newToast]);\n\n      if (!toast.persistent && toast.duration !== 0) {\n        const duration = toast.duration ?? 5000;\n        window.setTimeout(() => {\n          removeToast(id);\n        }, duration);\n      }\n\n      return id;\n    },\n    [removeToast],\n  );\n\n  const clearAllToasts = useCallback(() => {\n    setToasts([]);\n  }, []);\n\n  const promise = useCallback(\n    <T,>(promiseToResolve: Promise<T>, options: PromiseToastOptions<T>): Promise<T> =>\n      trackPromiseWithToasts(promiseToResolve, options, addToast, removeToast),\n    [addToast, removeToast],\n  );\n\n  const contextValue: ToastContextType = {\n    toasts,\n    addToast,\n    removeToast,\n    clearAllToasts,\n    promise,\n  };\n\n  return <ToastContext.Provider value={contextValue}>{children}</ToastContext.Provider>;\n};\n\nexport const useToast = (): ToastContextType => {\n  const context = useContext(ToastContext);\n  if (!context) {\n    throw new Error('useToast must be used within a ToastProvider');\n  }\n  return context;\n};\n\nconst renderVariantIcon = (variant: ToastProps['variant']) => {\n  switch (variant) {\n    case 'success':\n      return <SuccessIcon />;\n    case 'error':\n      return <ErrorIcon />;\n    case 'warning':\n      return <WarningIcon />;\n    case 'info':\n      return <InfoIcon />;\n    case 'promise':\n      return <CircularProgress size={20} />;\n    default:\n      return null;\n  }\n};\n\n// 'default' and 'promise' have no MUI severity of their own; both read as info.\nconst toAlertSeverity = (variant: ToastProps['variant']) =>\n  variant === 'default' || variant === 'promise' ? 'info' : variant;\n\nconst buildToastStyles = (theme: Theme, glass: boolean) => {\n  const baseStyles = {\n    borderRadius: theme.spacing(1.5),\n    transition: theme.transitions.create(['background-color', 'backdrop-filter'], {\n      duration: theme.transitions.duration.standard,\n    }),\n  };\n\n  if (glass) {\n    return {\n      ...baseStyles,\n      backgroundColor: alpha(theme.palette.background.paper, 0.1),\n      backdropFilter: 'blur(20px)',\n      border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n    };\n  }\n\n  return baseStyles;\n};\n\nexport const Toast: React.FC<ToastProps> = ({\n  id = '',\n  message,\n  variant = 'default',\n  closable = true,\n  action,\n  glass = false,\n  onClose,\n  dataTestId = 'toast',\n}) => {\n  const theme = useTheme();\n\n  const handleClose = () => {\n    if (onClose && id) {\n      onClose(id);\n    }\n  };\n\n  return (\n    <Alert\n      data-testid={dataTestId}\n      icon={renderVariantIcon(variant)}\n      severity={toAlertSeverity(variant)}\n      onClose={closable ? handleClose : undefined}\n      action={\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n          {action && (\n            <Button\n              data-testid={`${dataTestId}-action`}\n              color=\"inherit\"\n              size=\"small\"\n              onClick={action.onClick}\n            >\n              {action.label}\n            </Button>\n          )}\n          {closable && (\n            <IconButton\n              data-testid={`${dataTestId}-close`}\n              aria-label=\"close\"\n              color=\"inherit\"\n              size=\"small\"\n              onClick={handleClose}\n            >\n              <CloseIcon fontSize=\"small\" />\n            </IconButton>\n          )}\n        </Box>\n      }\n      sx={buildToastStyles(theme, glass)}\n    >\n      <Typography data-testid={`${dataTestId}-message`} variant=\"body2\">{message}</Typography>\n    </Alert>\n  );\n};\n\nexport const ToastContainer: React.FC<ToastContainerProps> = ({\n  position = 'top-right',\n  maxToasts = 5,\n  gap = 8,\n  className,\n  dataTestId = 'toast-container',\n}) => {\n  const context = useContext(ToastContext);\n  \n  if (!context) {\n    throw new Error('ToastContainer must be used within a ToastProvider');\n  }\n\n  const { toasts, removeToast } = context;\n\n  const getPositionStyles = (): React.CSSProperties => {\n    const baseStyles: React.CSSProperties = {\n      position: 'fixed',\n      zIndex: 9999,\n      display: 'flex',\n      flexDirection: 'column',\n      gap: `${gap}px`,\n      padding: '16px',\n      pointerEvents: 'none',\n    };\n\n    switch (position) {\n      case 'top-left':\n        return { ...baseStyles, top: 0, left: 0 };\n      case 'top-center':\n        return { ...baseStyles, top: 0, left: '50%', transform: 'translateX(-50%)' };\n      case 'top-right':\n        return { ...baseStyles, top: 0, right: 0 };\n      case 'bottom-left':\n        return { ...baseStyles, bottom: 0, left: 0, flexDirection: 'column-reverse' };\n      case 'bottom-center':\n        return {\n          ...baseStyles,\n          bottom: 0,\n          left: '50%',\n          transform: 'translateX(-50%)',\n          flexDirection: 'column-reverse',\n        };\n      case 'bottom-right':\n        return { ...baseStyles, bottom: 0, right: 0, flexDirection: 'column-reverse' };\n      default:\n        return { ...baseStyles, top: 0, right: 0 };\n    }\n  };\n\n  return (\n    <Portal>\n      <Box data-testid={dataTestId} className={className} sx={getPositionStyles()}>\n        {toasts.slice(0, maxToasts).map((toast, index) => (\n          <Slide\n            key={toast.id}\n            direction={position.includes('left') ? 'right' : 'left'}\n            in={true}\n            timeout={300}\n            style={{ pointerEvents: 'auto' }}\n          >\n            <Box data-testid={`${dataTestId}-item-${index}`}>\n              <Toast {...toast} onClose={removeToast} dataTestId={toast.dataTestId || `toast-${index}`} />\n            </Box>\n          </Slide>\n        ))}\n      </Box>\n    </Portal>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-JZKOJZ6V.js

@@ -0,0 +1,87 @@
+// src/components/layout/Skeleton/Skeleton.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var muiVariantFor = (variant) => {
+  switch (variant) {
+    case "circular":
+      return "circular";
+    case "rectangular":
+    case "wave":
+      return "rectangular";
+    default:
+      return "text";
+  }
+};
+var muiAnimationFor = (variant, animation) => {
+  if (variant === "wave") return "wave";
+  return animation;
+};
+var defaultDimensions = (variant) => {
+  switch (variant) {
+    case "circular":
+      return { width: 40, height: 40 };
+    case "rectangular":
+    case "wave":
+      return { width: "100%", height: 40 };
+    default:
+      return { width: "100%", height: void 0 };
+  }
+};
+var INTENSITY_OPACITY = {
+  low: 0.11,
+  medium: 0.13,
+  high: 0.15
+};
+var intensityOpacity = (intensity) => INTENSITY_OPACITY[intensity] ?? INTENSITY_OPACITY.medium;
+var glassmorphismStyles = (theme) => ({
+  background: `linear-gradient(135deg,
+        ${alpha(theme.palette.background.paper, 0.8)} 0%,
+        ${alpha(theme.palette.background.paper, 0.4)} 100%)`,
+  backdropFilter: "blur(20px)",
+  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+  boxShadow: `0 8px 32px 0 ${alpha(theme.palette.common.black, 0.1)}`
+});
+var shimmerStyles = (theme) => ({
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    background: `linear-gradient(
+          90deg,
+          transparent,
+          ${alpha(theme.palette.common.white, 0.3)},
+          transparent
+        )`,
+    transform: "translateX(-100%)",
+    animation: "shimmer 2s infinite"
+  },
+  "@keyframes shimmer": {
+    "100%": {
+      transform: "translateX(100%)"
+    }
+  }
+});
+var skeletonStyles = (theme, { intensity, borderRadius, glassmorphism, shimmer, style }) => ({
+  borderRadius,
+  backgroundColor: alpha(
+    theme.palette.mode === "dark" ? theme.palette.common.white : theme.palette.text.primary,
+    intensityOpacity(intensity)
+  ),
+  ...shimmer && {
+    position: "relative",
+    overflow: "hidden"
+  },
+  ...glassmorphism ? glassmorphismStyles(theme) : {},
+  ...shimmer ? shimmerStyles(theme) : {},
+  ...style
+});
+
+export {
+  muiVariantFor,
+  muiAnimationFor,
+  defaultDimensions,
+  skeletonStyles
+};
+//# sourceMappingURL=chunk-JZKOJZ6V.js.map

package/dist/chunk-JZKOJZ6V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Skeleton/Skeleton.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type { SkeletonProps } from './Skeleton.types';\n\ntype SkeletonVariant = NonNullable<SkeletonProps['variant']>;\ntype SkeletonIntensity = NonNullable<SkeletonProps['intensity']>;\n\n/** `wave` is our own name for a rectangle that animates; MUI has no such variant. */\nexport const muiVariantFor = (\n  variant: SkeletonVariant,\n): 'circular' | 'rectangular' | 'text' => {\n  switch (variant) {\n    case 'circular':\n      return 'circular';\n    case 'rectangular':\n    case 'wave':\n      return 'rectangular';\n    default:\n      return 'text';\n  }\n};\n\nexport const muiAnimationFor = (\n  variant: SkeletonVariant,\n  animation: SkeletonProps['animation'],\n) => {\n  if (variant === 'wave') return 'wave';\n  return animation;\n};\n\nexport const defaultDimensions = (\n  variant: SkeletonVariant,\n): { width: number | string; height: number | undefined } => {\n  switch (variant) {\n    case 'circular':\n      return { width: 40, height: 40 };\n    case 'rectangular':\n    case 'wave':\n      return { width: '100%', height: 40 };\n    default:\n      return { width: '100%', height: undefined };\n  }\n};\n\nconst INTENSITY_OPACITY: Record<SkeletonIntensity, number> = {\n  low: 0.11,\n  medium: 0.13,\n  high: 0.15,\n};\n\nconst intensityOpacity = (intensity: SkeletonIntensity): number =>\n  INTENSITY_OPACITY[intensity] ?? INTENSITY_OPACITY.medium;\n\nconst glassmorphismStyles = (theme: Theme): CSSObject => ({\n  background: `linear-gradient(135deg,\n        ${alpha(theme.palette.background.paper, 0.8)} 0%,\n        ${alpha(theme.palette.background.paper, 0.4)} 100%)`,\n  backdropFilter: 'blur(20px)',\n  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n  boxShadow: `0 8px 32px 0 ${alpha(theme.palette.common.black, 0.1)}`,\n});\n\n// The sweep is a pseudo-element sliding across the box, so the box has to clip it\n// and establish a positioning context — hence `position`/`overflow` below.\nconst shimmerStyles = (theme: Theme): CSSObject => ({\n  '&::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    background: `linear-gradient(\n          90deg,\n          transparent,\n          ${alpha(theme.palette.common.white, 0.3)},\n          transparent\n        )`,\n    transform: 'translateX(-100%)',\n    animation: 'shimmer 2s infinite',\n  },\n  '@keyframes shimmer': {\n    '100%': {\n      transform: 'translateX(100%)',\n    },\n  },\n});\n\ninterface SkeletonStyleArgs {\n  intensity: SkeletonIntensity;\n  borderRadius?: number | string;\n  glassmorphism: boolean;\n  shimmer: boolean;\n  style?: React.CSSProperties;\n}\n\nexport const skeletonStyles = (\n  theme: Theme,\n  { intensity, borderRadius, glassmorphism, shimmer, style }: SkeletonStyleArgs,\n): CSSObject => ({\n  borderRadius,\n  backgroundColor: alpha(\n    theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.text.primary,\n    intensityOpacity(intensity),\n  ),\n  ...(shimmer && {\n    position: 'relative' as const,\n    overflow: 'hidden' as const,\n  }),\n  ...(glassmorphism ? glassmorphismStyles(theme) : {}),\n  ...(shimmer ? shimmerStyles(theme) : {}),\n  ...style,\n});\n"],"mappings":";AAAA,SAAS,aAAa;AASf,IAAM,gBAAgB,CAC3B,YACwC;AACxC,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEO,IAAM,kBAAkB,CAC7B,SACA,cACG;AACH,MAAI,YAAY,OAAQ,QAAO;AAC/B,SAAO;AACT;AAEO,IAAM,oBAAoB,CAC/B,YAC2D;AAC3D,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO,EAAE,OAAO,IAAI,QAAQ,GAAG;AAAA,IACjC,KAAK;AAAA,IACL,KAAK;AACH,aAAO,EAAE,OAAO,QAAQ,QAAQ,GAAG;AAAA,IACrC;AACE,aAAO,EAAE,OAAO,QAAQ,QAAQ,OAAU;AAAA,EAC9C;AACF;AAEA,IAAM,oBAAuD;AAAA,EAC3D,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,MAAM;AACR;AAEA,IAAM,mBAAmB,CAAC,cACxB,kBAAkB,SAAS,KAAK,kBAAkB;AAEpD,IAAM,sBAAsB,CAAC,WAA6B;AAAA,EACxD,YAAY;AAAA,UACJ,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,CAAC;AAAA,UAC1C,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,CAAC;AAAA,EAClD,gBAAgB;AAAA,EAChB,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC;AAAA,EACtD,WAAW,gBAAgB,MAAM,MAAM,QAAQ,OAAO,OAAO,GAAG,CAAC;AACnE;AAIA,IAAM,gBAAgB,CAAC,WAA6B;AAAA,EAClD,YAAY;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA;AAAA;AAAA,YAGJ,MAAM,MAAM,QAAQ,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA,IAG9C,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EACA,sBAAsB;AAAA,IACpB,QAAQ;AAAA,MACN,WAAW;AAAA,IACb;AAAA,EACF;AACF;AAUO,IAAM,iBAAiB,CAC5B,OACA,EAAE,WAAW,cAAc,eAAe,SAAS,MAAM,OAC1C;AAAA,EACf;AAAA,EACA,iBAAiB;AAAA,IACf,MAAM,QAAQ,SAAS,SAAS,MAAM,QAAQ,OAAO,QAAQ,MAAM,QAAQ,KAAK;AAAA,IAChF,iBAAiB,SAAS;AAAA,EAC5B;AAAA,EACA,GAAI,WAAW;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,GAAI,gBAAgB,oBAAoB,KAAK,IAAI,CAAC;AAAA,EAClD,GAAI,UAAU,cAAc,KAAK,IAAI,CAAC;AAAA,EACtC,GAAG;AACL;","names":[]}

package/dist/chunk-JZRSHDNY.js

@@ -0,0 +1,101 @@
+import {
+  MODAL_STACK_BASE_Z_INDEX,
+  MODAL_STACK_Z_INDEX_STEP
+} from "./chunk-MFU4Y25U.js";
+
+// src/components/feedback/StackedModal/modal-stack.tsx
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var BASE_Z_INDEX = MODAL_STACK_BASE_Z_INDEX;
+var Z_INDEX_STEP = MODAL_STACK_Z_INDEX_STEP;
+var noop = () => {
+};
+var ModalStackContext = createContext({
+  stack: [],
+  pushModal: noop,
+  popModal: noop,
+  clearStack: noop,
+  currentDepth: 0,
+  isModalInStack: () => false,
+  getModalRole: () => null
+});
+var useModalStack = () => {
+  const context = useContext(ModalStackContext);
+  if (!context) {
+    throw new Error("useModalStack must be used within a ModalStackProvider");
+  }
+  return context;
+};
+var roleAt = (index, depth) => {
+  if (index === depth - 1) return "primary";
+  if (index === depth - 2) return "secondary";
+  return "background";
+};
+var withRoles = (stack) => stack.map((modal, index) => ({ ...modal, role: roleAt(index, stack.length) }));
+var useBodyScrollLock = (locked) => {
+  const originalOverflow = useRef("");
+  useEffect(() => {
+    const restore = () => {
+      if (!originalOverflow.current) return;
+      document.body.style.overflow = originalOverflow.current;
+      originalOverflow.current = "";
+    };
+    if (locked) {
+      if (!originalOverflow.current) {
+        originalOverflow.current = document.body.style.overflow || "";
+      }
+      document.body.style.overflow = "hidden";
+    } else {
+      restore();
+    }
+    return restore;
+  }, [locked]);
+};
+var ModalStackProvider = ({ children }) => {
+  const [stack, setStack] = useState([]);
+  useBodyScrollLock(stack.length > 0);
+  const pushModal = useCallback((modalId) => {
+    setStack((prev) => {
+      if (prev.some((m) => m.id === modalId)) return prev;
+      const entry = {
+        id: modalId,
+        zIndex: BASE_Z_INDEX + prev.length * Z_INDEX_STEP,
+        role: "primary"
+      };
+      return withRoles([...prev, entry]);
+    });
+  }, []);
+  const popModal = useCallback((modalId) => {
+    setStack(
+      (prev) => withRoles(modalId ? prev.filter((m) => m.id !== modalId) : prev.slice(0, -1))
+    );
+  }, []);
+  const clearStack = useCallback(() => setStack([]), []);
+  const isModalInStack = useCallback(
+    (modalId) => stack.some((m) => m.id === modalId),
+    [stack]
+  );
+  const getModalRole = useCallback(
+    (modalId) => stack.find((m) => m.id === modalId)?.role ?? null,
+    [stack]
+  );
+  const value = useMemo(
+    () => ({
+      stack,
+      pushModal,
+      popModal,
+      clearStack,
+      currentDepth: stack.length,
+      isModalInStack,
+      getModalRole
+    }),
+    [stack, pushModal, popModal, clearStack, isModalInStack, getModalRole]
+  );
+  return /* @__PURE__ */ jsx(ModalStackContext.Provider, { value, children });
+};
+
+export {
+  useModalStack,
+  ModalStackProvider
+};
+//# sourceMappingURL=chunk-JZRSHDNY.js.map

package/dist/chunk-JZRSHDNY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/StackedModal/modal-stack.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { MODAL_STACK_BASE_Z_INDEX, MODAL_STACK_Z_INDEX_STEP } from '../../../tokens/layers';\nimport type { ModalInfo, ModalPanelRole, ModalStackContextValue } from './StackedModal.types';\n\n/**\n * MUI Dialog default z-index; each panel in the stack sits 10 above the last.\n *\n * Imported rather than declared here: anything that portals out of a panel has\n * to clear this ladder, so the numbers are shared with the token that tells it\n * how — see `tokens/layers`.\n */\nconst BASE_Z_INDEX = MODAL_STACK_BASE_Z_INDEX;\nconst Z_INDEX_STEP = MODAL_STACK_Z_INDEX_STEP;\n\nconst noop = (): void => {\n  /** do nothing */\n};\n\nconst ModalStackContext = createContext<ModalStackContextValue>({\n  stack: [],\n  pushModal: noop,\n  popModal: noop,\n  clearStack: noop,\n  currentDepth: 0,\n  isModalInStack: () => false,\n  getModalRole: () => null,\n});\n\nexport const useModalStack = (): ModalStackContextValue => {\n  const context = useContext(ModalStackContext);\n  if (!context) {\n    throw new Error('useModalStack must be used within a ModalStackProvider');\n  }\n  return context;\n};\n\n/** Top of the stack drives the view; the one behind it recedes; the rest are hidden. */\nconst roleAt = (index: number, depth: number): ModalPanelRole => {\n  if (index === depth - 1) return 'primary';\n  if (index === depth - 2) return 'secondary';\n  return 'background';\n};\n\n/** Re-derive every role from stack position — the one place roles are assigned. */\nconst withRoles = (stack: ModalInfo[]): ModalInfo[] =>\n  stack.map((modal, index) => ({ ...modal, role: roleAt(index, stack.length) }));\n\n/**\n * Locks body scroll while any modal is open, restoring whatever the page had\n * before. Owned by the provider rather than each modal, so nested panels can't\n * fight over the same style.\n */\nconst useBodyScrollLock = (locked: boolean): void => {\n  const originalOverflow = useRef<string>('');\n\n  useEffect(() => {\n    const restore = (): void => {\n      if (!originalOverflow.current) return;\n      document.body.style.overflow = originalOverflow.current;\n      originalOverflow.current = '';\n    };\n\n    if (locked) {\n      if (!originalOverflow.current) {\n        originalOverflow.current = document.body.style.overflow || '';\n      }\n      document.body.style.overflow = 'hidden';\n    } else {\n      restore();\n    }\n\n    return restore;\n  }, [locked]);\n};\n\nexport const ModalStackProvider: FC<{ children: ReactNode }> = ({ children }) => {\n  const [stack, setStack] = useState<ModalInfo[]>([]);\n\n  useBodyScrollLock(stack.length > 0);\n\n  const pushModal = useCallback((modalId: string) => {\n    setStack((prev) => {\n      if (prev.some((m) => m.id === modalId)) return prev;\n      const entry: ModalInfo = {\n        id: modalId,\n        zIndex: BASE_Z_INDEX + prev.length * Z_INDEX_STEP,\n        role: 'primary',\n      };\n      return withRoles([...prev, entry]);\n    });\n  }, []);\n\n  const popModal = useCallback((modalId?: string) => {\n    setStack((prev) =>\n      withRoles(modalId ? prev.filter((m) => m.id !== modalId) : prev.slice(0, -1)),\n    );\n  }, []);\n\n  const clearStack = useCallback(() => setStack([]), []);\n\n  const isModalInStack = useCallback(\n    (modalId: string) => stack.some((m) => m.id === modalId),\n    [stack],\n  );\n\n  const getModalRole = useCallback(\n    (modalId: string) => stack.find((m) => m.id === modalId)?.role ?? null,\n    [stack],\n  );\n\n  const value = useMemo(\n    () => ({\n      stack,\n      pushModal,\n      popModal,\n      clearStack,\n      currentDepth: stack.length,\n      isModalInStack,\n      getModalRole,\n    }),\n    [stack, pushModal, popModal, clearStack, isModalInStack, getModalRole],\n  );\n\n  return <ModalStackContext.Provider value={value}>{children}</ModalStackContext.Provider>;\n};\n"],"mappings":";;;;;;AACA,SAAS,eAAe,aAAa,YAAY,WAAW,SAAS,QAAQ,gBAAgB;AA2HpF;AAhHT,IAAM,eAAe;AACrB,IAAM,eAAe;AAErB,IAAM,OAAO,MAAY;AAEzB;AAEA,IAAM,oBAAoB,cAAsC;AAAA,EAC9D,OAAO,CAAC;AAAA,EACR,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,gBAAgB,MAAM;AAAA,EACtB,cAAc,MAAM;AACtB,CAAC;AAEM,IAAM,gBAAgB,MAA8B;AACzD,QAAM,UAAU,WAAW,iBAAiB;AAC5C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,wDAAwD;AAAA,EAC1E;AACA,SAAO;AACT;AAGA,IAAM,SAAS,CAAC,OAAe,UAAkC;AAC/D,MAAI,UAAU,QAAQ,EAAG,QAAO;AAChC,MAAI,UAAU,QAAQ,EAAG,QAAO;AAChC,SAAO;AACT;AAGA,IAAM,YAAY,CAAC,UACjB,MAAM,IAAI,CAAC,OAAO,WAAW,EAAE,GAAG,OAAO,MAAM,OAAO,OAAO,MAAM,MAAM,EAAE,EAAE;AAO/E,IAAM,oBAAoB,CAAC,WAA0B;AACnD,QAAM,mBAAmB,OAAe,EAAE;AAE1C,YAAU,MAAM;AACd,UAAM,UAAU,MAAY;AAC1B,UAAI,CAAC,iBAAiB,QAAS;AAC/B,eAAS,KAAK,MAAM,WAAW,iBAAiB;AAChD,uBAAiB,UAAU;AAAA,IAC7B;AAEA,QAAI,QAAQ;AACV,UAAI,CAAC,iBAAiB,SAAS;AAC7B,yBAAiB,UAAU,SAAS,KAAK,MAAM,YAAY;AAAA,MAC7D;AACA,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC,OAAO;AACL,cAAQ;AAAA,IACV;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AACb;AAEO,IAAM,qBAAkD,CAAC,EAAE,SAAS,MAAM;AAC/E,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,CAAC,CAAC;AAElD,oBAAkB,MAAM,SAAS,CAAC;AAElC,QAAM,YAAY,YAAY,CAAC,YAAoB;AACjD,aAAS,CAAC,SAAS;AACjB,UAAI,KAAK,KAAK,CAAC,MAAM,EAAE,OAAO,OAAO,EAAG,QAAO;AAC/C,YAAM,QAAmB;AAAA,QACvB,IAAI;AAAA,QACJ,QAAQ,eAAe,KAAK,SAAS;AAAA,QACrC,MAAM;AAAA,MACR;AACA,aAAO,UAAU,CAAC,GAAG,MAAM,KAAK,CAAC;AAAA,IACnC,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,WAAW,YAAY,CAAC,YAAqB;AACjD;AAAA,MAAS,CAAC,SACR,UAAU,UAAU,KAAK,OAAO,CAAC,MAAM,EAAE,OAAO,OAAO,IAAI,KAAK,MAAM,GAAG,EAAE,CAAC;AAAA,IAC9E;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,aAAa,YAAY,MAAM,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC;AAErD,QAAM,iBAAiB;AAAA,IACrB,CAAC,YAAoB,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,OAAO;AAAA,IACvD,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,YAAoB,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,OAAO,GAAG,QAAQ;AAAA,IAClE,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc,MAAM;AAAA,MACpB;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,WAAW,UAAU,YAAY,gBAAgB,YAAY;AAAA,EACvE;AAEA,SAAO,oBAAC,kBAAkB,UAAlB,EAA2B,OAAe,UAAS;AAC7D;","names":[]}

package/dist/chunk-K25MT3GZ.js

@@ -0,0 +1,82 @@
+import {
+  baseStyles,
+  effectStyles,
+  getColorFromTheme,
+  variantStyles
+} from "./chunk-MNZ2NT5A.js";
+
+// src/components/form/Toggle/Toggle.tsx
+import ToggleButton from "@mui/material/ToggleButton/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledToggle = styled(ToggleButton, {
+  shouldForwardProp: (prop) => !["customVariant", "customColor", "customSize", "glow", "glass", "gradient"].includes(
+    prop
+  )
+})(({
+  theme,
+  customVariant,
+  customColor = "primary",
+  customSize = "md",
+  glow,
+  glass,
+  gradient
+}) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  return {
+    ...baseStyles(theme, colorPalette, customSize),
+    ...variantStyles(customVariant, colorPalette),
+    ...effectStyles(theme, colorPalette, { glass, gradient, glow })
+  };
+});
+var Toggle = forwardRef(
+  ({
+    variant = "default",
+    color = "primary",
+    size = "md",
+    icon,
+    glow = false,
+    glass = false,
+    gradient = false,
+    dataTestId,
+    children,
+    ...props
+  }, ref) => {
+    const testIds = {
+      container: dataTestId,
+      icon: dataTestId ? `${dataTestId}-icon` : void 0
+    };
+    return /* @__PURE__ */ jsxs(
+      StyledToggle,
+      {
+        ref,
+        customVariant: variant,
+        customColor: color,
+        customSize: size,
+        glow,
+        glass,
+        gradient,
+        "data-testid": testIds.container,
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: { marginRight: children ? "8px" : "0" },
+              "data-testid": testIds.icon,
+              children: icon
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+
+export {
+  Toggle
+};
+//# sourceMappingURL=chunk-K25MT3GZ.js.map

package/dist/chunk-K25MT3GZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Toggle/Toggle.tsx"],"sourcesContent":["import ToggleButton from '@mui/material/ToggleButton/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React, { forwardRef } from 'react';\n\nimport {\n  baseStyles,\n  effectStyles,\n  getColorFromTheme,\n  variantStyles,\n} from './Toggle.styles';\nimport type { ToggleProps } from './Toggle.types';\n\nconst StyledToggle = styled(ToggleButton, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customColor', 'customSize', 'glow', 'glass', 'gradient'].includes(\n      prop as string,\n    ),\n})<{\n  customVariant?: string;\n  customColor?: string;\n  customSize?: string;\n  glow?: boolean;\n  glass?: boolean;\n  gradient?: boolean;\n}>(({\n  theme,\n  customVariant,\n  customColor = 'primary',\n  customSize = 'md',\n  glow,\n  glass,\n  gradient,\n}) => {\n  const colorPalette = getColorFromTheme(theme, customColor);\n\n  return {\n    ...baseStyles(theme, colorPalette, customSize),\n    ...variantStyles(customVariant, colorPalette),\n    ...effectStyles(theme, colorPalette, { glass, gradient, glow }),\n  };\n});\n\nexport const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(\n  (\n    {\n      variant = 'default',\n      color = 'primary',\n      size = 'md',\n      icon,\n      glow = false,\n      glass = false,\n      gradient = false,\n      dataTestId,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const testIds = {\n      container: dataTestId,\n      icon: dataTestId ? `${dataTestId}-icon` : undefined,\n    };\n\n    return (\n      <StyledToggle\n        ref={ref}\n        customVariant={variant}\n        customColor={color}\n        customSize={size}\n        glow={glow}\n        glass={glass}\n        gradient={gradient}\n        data-testid={testIds.container}\n        {...props}\n      >\n        {icon && (\n          <span\n            style={{ marginRight: children ? '8px' : '0' }}\n            data-testid={testIds.icon}\n          >\n            {icon}\n          </span>\n        )}\n        {children}\n      </StyledToggle>\n    );\n  },\n);\n\nToggle.displayName = 'Toggle';\n"],"mappings":";;;;;;;;AAAA,OAAO,kBAAkB;AACzB,SAAS,cAAc;AACvB,SAAgB,kBAAkB;AA8D5B,SAYI,KAZJ;AApDN,IAAM,eAAe,OAAO,cAAc;AAAA,EACxC,mBAAmB,CAAC,SAClB,CAAC,CAAC,iBAAiB,eAAe,cAAc,QAAQ,SAAS,UAAU,EAAE;AAAA,IAC3E;AAAA,EACF;AACJ,CAAC,EAOE,CAAC;AAAA,EACF;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,kBAAkB,OAAO,WAAW;AAEzD,SAAO;AAAA,IACL,GAAG,WAAW,OAAO,cAAc,UAAU;AAAA,IAC7C,GAAG,cAAc,eAAe,YAAY;AAAA,IAC5C,GAAG,aAAa,OAAO,cAAc,EAAE,OAAO,UAAU,KAAK,CAAC;AAAA,EAChE;AACF,CAAC;AAEM,IAAM,SAAS;AAAA,EACpB,CACE;AAAA,IACE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,UAAU;AAAA,MACd,WAAW;AAAA,MACX,MAAM,aAAa,GAAG,UAAU,UAAU;AAAA,IAC5C;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAe;AAAA,QACf,aAAa;AAAA,QACb,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa,QAAQ;AAAA,QACpB,GAAG;AAAA,QAEH;AAAA,kBACC;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,EAAE,aAAa,WAAW,QAAQ,IAAI;AAAA,cAC7C,eAAa,QAAQ;AAAA,cAEpB;AAAA;AAAA,UACH;AAAA,UAED;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":[]}

package/dist/chunk-K7BR3U57.js

@@ -0,0 +1,18 @@
+// src/button/button.tsx
+import { jsx } from "react/jsx-runtime";
+function Button({ children, className, appName }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className,
+      onClick: () => alert(`Hello from your ${appName} app!`),
+      children
+    }
+  );
+}
+
+export {
+  Button
+};
+//# sourceMappingURL=chunk-K7BR3U57.js.map

package/dist/chunk-K7BR3U57.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport type { ReactNode } from \"react\";\n\ninterface ButtonProps {\n  children: ReactNode;\n  className?: string;\n  appName: string;\n}\n\nexport function Button({ children, className, appName }: ButtonProps): React.JSX.Element {\n  return (\n    <button\n      type=\"button\"\n      className={className}\n      onClick={() => alert(`Hello from your ${appName} app!`)}\n    >\n      {children}\n    </button>\n  );\n}\n"],"mappings":";AAaI;AAFG,SAAS,OAAO,EAAE,UAAU,WAAW,QAAQ,GAAmC;AACvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,SAAS,MAAM,MAAM,mBAAmB,OAAO,OAAO;AAAA,MAErD;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/chunk-KAK5SAEA.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-KAK5SAEA.js.map

package/dist/chunk-KAK5SAEA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}