@soyfri/shared-library 1.5.0-beta.4 → 1.6.0-beta.0

package/components/StatusMessage/StatusMessage.cjs

@@ -1,6 +1,7 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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 iconsMaterial = require("@mui/icons-material");
 const StatusMessage = ({
@@ -9,71 +10,81 @@ const StatusMessage = ({
   messageType = "success",
   displayType = "alert",
   close,
-  open = true
+  open: controlledOpen
 }) => {
-  const getAlertVariant = () => {
-    switch (messageType) {
-      case "success":
-        return "success";
-      case "danger":
-        return "error";
-      case "warning":
-        return "warning";
-      default:
-        return "info";
-    }
-  };
-  const getIcon = () => {
-    switch (messageType) {
-      case "success":
-        return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.CheckCircleOutline, { sx: { fontSize: "64px", color: "success.main" } });
-      case "danger":
-        return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ErrorOutline, { sx: { fontSize: "64px", color: "error.main" } });
-      case "warning":
-        return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.WarningAmber, { sx: { fontSize: "64px", color: "warning.main" } });
-      default:
-        return null;
-    }
+  const [internalOpen, setInternalOpen] = React.useState(true);
+  const titleId = React.useId();
+  const descId = React.useId();
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const handleClose = () => {
+    if (!isControlled) setInternalOpen(false);
+    close == null ? void 0 : close();
   };
-  const alertVariant = getAlertVariant();
-  if (!description) {
-    return null;
+  const alertVariant = messageType === "danger" ? "error" : messageType;
+  const icon = messageType === "success" ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.CheckCircleOutline, { sx: { fontSize: 64, color: "success.main" } }) : messageType === "danger" ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ErrorOutline, { sx: { fontSize: 64, color: "error.main" } }) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.WarningAmber, { sx: { fontSize: 64, color: "warning.main" } });
+  if (!description) return null;
+  if (!isOpen) return null;
+  if (displayType === "modal") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Dialog,
+      {
+        open: isOpen,
+        onClose: handleClose,
+        "aria-labelledby": title ? titleId : void 0,
+        "aria-describedby": descId,
+        maxWidth: "md",
+        slotProps: {
+          paper: {
+            sx: { borderRadius: "16px", p: 2 }
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.DialogContent,
+            {
+              sx: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                textAlign: "center",
+                p: 4,
+                gap: 2
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mb: 2 }, children: icon }),
+                title && /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Typography,
+                  {
+                    id: titleId,
+                    variant: "h4",
+                    component: "h2",
+                    sx: { fontWeight: "bold" },
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { id: descId, variant: "body1", color: "text.secondary", children: description })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(material.DialogActions, { sx: { justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: handleClose, variant: "contained", color: alertVariant, children: "Aceptar" }) })
+        ]
+      }
+    );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: displayType === "modal" ? /* @__PURE__ */ jsxRuntime.jsxs(
-    material.Dialog,
-    {
-      open,
-      onClose: close,
-      "aria-labelledby": "message-dialog-title",
-      maxWidth: "md",
-      PaperProps: {
-        sx: {
-          borderRadius: "16px",
-          p: 2
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(material.DialogContent, { sx: { display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", p: 4, gap: 2 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mb: 2 }, children: getIcon() }),
-          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h4", component: "h2", sx: { fontWeight: "bold" }, children: title || "" }),
-          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", color: "text.secondary", children: description })
-        ] }),
-        close && /* @__PURE__ */ jsxRuntime.jsx(material.DialogActions, { sx: { justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: close, variant: "contained", color: alertVariant, children: "Aceptar" }) })
-      ]
-    }
-  ) : /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     material.Alert,
     {
       severity: alertVariant,
       sx: { mb: 2, mt: 2 },
-      onClose: close,
-      action: close && /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: close, size: "small", color: "inherit", children: "Cerrar" }),
+      onClose: close !== void 0 ? handleClose : void 0,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", sx: { fontWeight: "bold" }, children: title }),
+        title && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", sx: { fontWeight: "bold" }, children: title }),
         /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { mt: 1 }, children: description })
       ]
     }
-  ) });
+  );
 };
 exports.StatusMessage = StatusMessage;
+exports.default = StatusMessage;
 //# sourceMappingURL=StatusMessage.cjs.map

package/components/StatusMessage/StatusMessage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"StatusMessage.cjs","sources":["../../../src/components/StatusMessage/StatusMessage.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Alert,\n  Box,\n  Typography,\n  Dialog,\n  DialogContent,\n  DialogActions,\n  Button\n} from '@mui/material';\nimport {\n  ErrorOutline as ErrorOutlineIcon,\n  CheckCircleOutline as CheckCircleOutlineIcon,\n  WarningAmber as WarningAmberIcon\n} from '@mui/icons-material';\n\n/**\n * `StatusMessage` es un componente de React que muestra mensajes de éxito, error o advertencia\n * en un modal o una alerta, utilizando el sistema de diseño de Material-UI.\n *\n * El componente puede mostrar alertas con estilos específicos o un modal personalizable\n * usando `Dialog` y otros componentes de MUI. También puede incluir una función opcional\n * para cerrar el mensaje.\n *\n * @param {StatusMessageProps} props - Las propiedades del componente.\n * @param {string | undefined} props.title - Título del mensaje que se muestra en el modal o alerta.\n * @param {string} [props.description] - Descripción o contenido detallado del mensaje.\n * @param {'success' | 'danger' | 'warning'} [props.messageType='success'] - Tipo de mensaje que determina el estilo visual. 'danger' se mapea a 'error' de MUI.\n * @param {'alert' | 'modal'} [props.displayType='alert'] - Determina si el mensaje se muestra como alerta o modal.\n * @param {() => void} [props.close] - Función opcional para ejecutar al cerrar el mensaje.\n * @returns {React.FC<StatusMessageProps>} Un componente funcional de React que muestra mensajes personalizados.\n *\n * @example\n * // Ejemplo de uso como una alerta:\n * <StatusMessage\n * title=\"Operación Exitosa\"\n * description=\"La operación se ha completado correctamente.\"\n * messageType=\"success\"\n * displayType=\"alert\"\n * />\n *\n * // Ejemplo de uso como un modal:\n * <StatusMessage\n * title=\"Advertencia\"\n * description=\"Se ha producido un error inesperado.\"\n * messageType=\"danger\"\n * displayType=\"modal\"\n * close={() => console.log('Modal cerrado')}\n * />\n */\n\nexport interface StatusMessageProps {\n  title: string | undefined;\n  description?: string;\n  messageType?: 'success' | 'danger' | 'warning';\n  displayType?: 'alert' | 'modal';\n  close?: () => void;\n  // Propiedad para controlar la visibilidad del modal desde el padre\n  open?: boolean;\n}\n\nconst StatusMessage = ({\n  title,\n  description,\n  messageType = 'success',\n  displayType = 'alert',\n  close,\n  open = true,\n}: StatusMessageProps) => {\n\n  const getAlertVariant = () => {\n    switch (messageType) {\n      case 'success':\n        return 'success';\n      case 'danger':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      default:\n        return 'info'; // Fallback\n    }\n  };\n\n  const getIcon = () => {\n    switch (messageType) {\n      case 'success':\n        return <CheckCircleOutlineIcon sx={{ fontSize: '64px', color: 'success.main' }} />;\n      case 'danger':\n        return <ErrorOutlineIcon sx={{ fontSize: '64px', color: 'error.main' }} />;\n      case 'warning':\n        return <WarningAmberIcon sx={{ fontSize: '64px', color: 'warning.main' }} />;\n      default:\n        return null;\n    }\n  };\n\n  const alertVariant = getAlertVariant();\n\n  if (!description) {\n    return null;\n  }\n\n  return (\n    <>\n      {displayType === 'modal' ? (\n        <Dialog\n          open={open}\n          onClose={close}\n          aria-labelledby=\"message-dialog-title\"\n          maxWidth=\"md\"\n          PaperProps={{\n            sx: {\n              borderRadius: '16px',\n              p: 2,\n            },\n          }}\n        >\n          <DialogContent sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', p: 4, gap: 2 }}>\n            <Box sx={{ mb: 2 }}>\n              {getIcon()}\n            </Box>\n            <Typography variant=\"h4\" component=\"h2\" sx={{ fontWeight: 'bold' }}>\n              {title || ''}\n            </Typography>\n            <Typography variant=\"body1\" color=\"text.secondary\">\n              {description}\n            </Typography>\n          </DialogContent>\n          {close && (\n            <DialogActions sx={{ justifyContent: 'center', p: 2 }}>\n              <Button onClick={close} variant=\"contained\" color={alertVariant}>\n                Aceptar\n              </Button>\n            </DialogActions>\n          )}\n        </Dialog>\n      ) : (\n        <Alert\n          severity={alertVariant}\n          sx={{ mb: 2, mt: 2 }}\n          onClose={close}\n          action={\n            close && (\n              <Button onClick={close} size=\"small\" color=\"inherit\">\n                Cerrar\n              </Button>\n            )\n          }\n        >\n          <Typography variant=\"h6\" sx={{ fontWeight: 'bold' }}>\n            {title}\n          </Typography>\n          <Typography variant=\"body2\" sx={{ mt: 1 }}>\n            {description}\n          </Typography>\n        </Alert>\n      )}\n    </>\n  );\n};\n\nexport default StatusMessage;\n"],"names":["jsx","CheckCircleOutlineIcon","ErrorOutlineIcon","WarningAmberIcon","Fragment","jsxs","Dialog","DialogContent","Box","Typography","DialogActions","Button","Alert"],"mappings":";;;;;AA6DA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AAAA,EACA,OAAO;AACT,MAA0B;AAExB,QAAM,kBAAkB,MAAM;AAC5B,YAAQ,aAAA;AAAA,MACN,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAM,UAAU,MAAM;AACpB,YAAQ,aAAA;AAAA,MACN,KAAK;AACH,eAAOA,2BAAAA,IAACC,oCAAuB,IAAI,EAAE,UAAU,QAAQ,OAAO,kBAAkB;AAAA,MAClF,KAAK;AACH,eAAOD,2BAAAA,IAACE,8BAAiB,IAAI,EAAE,UAAU,QAAQ,OAAO,gBAAgB;AAAA,MAC1E,KAAK;AACH,eAAOF,2BAAAA,IAACG,8BAAiB,IAAI,EAAE,UAAU,QAAQ,OAAO,kBAAkB;AAAA,MAC5E;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAM,eAAe,gBAAA;AAErB,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AAEA,SACEH,2BAAAA,IAAAI,WAAAA,UAAA,EACG,0BAAgB,UACfC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,mBAAgB;AAAA,MAChB,UAAS;AAAA,MACT,YAAY;AAAA,QACV,IAAI;AAAA,UACF,cAAc;AAAA,UACd,GAAG;AAAA,QAAA;AAAA,MACL;AAAA,MAGF,UAAA;AAAA,QAAAD,2BAAAA,KAACE,SAAAA,eAAA,EAAc,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,WAAW,UAAU,GAAG,GAAG,KAAK,KACnH,UAAA;AAAA,UAAAP,+BAACQ,SAAAA,OAAI,IAAI,EAAE,IAAI,KACZ,qBACH;AAAA,UACAR,2BAAAA,IAACS,SAAAA,YAAA,EAAW,SAAQ,MAAK,WAAU,MAAK,IAAI,EAAE,YAAY,OAAA,GACvD,UAAA,SAAS,GAAA,CACZ;AAAA,yCACCA,SAAAA,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAC/B,UAAA,YAAA,CACH;AAAA,QAAA,GACF;AAAA,QACC,SACCT,2BAAAA,IAACU,SAAAA,eAAA,EAAc,IAAI,EAAE,gBAAgB,UAAU,GAAG,EAAA,GAChD,UAAAV,+BAACW,SAAAA,QAAA,EAAO,SAAS,OAAO,SAAQ,aAAY,OAAO,cAAc,qBAEjE,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAIJN,2BAAAA;AAAAA,IAACO,SAAAA;AAAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,IAAI,EAAE,IAAI,GAAG,IAAI,EAAA;AAAA,MACjB,SAAS;AAAA,MACT,QACE,SACEZ,2BAAAA,IAACW,SAAAA,QAAA,EAAO,SAAS,OAAO,MAAK,SAAQ,OAAM,WAAU,UAAA,SAAA,CAErD;AAAA,MAIJ,UAAA;AAAA,QAAAX,2BAAAA,IAACS,SAAAA,YAAA,EAAW,SAAQ,MAAK,IAAI,EAAE,YAAY,OAAA,GACxC,UAAA,MAAA,CACH;AAAA,QACAT,2BAAAA,IAACS,SAAAA,cAAW,SAAQ,SAAQ,IAAI,EAAE,IAAI,EAAA,GACnC,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;;"}
+{"version":3,"file":"StatusMessage.cjs","sources":["../../../src/components/StatusMessage/StatusMessage.tsx"],"sourcesContent":["import { useId, useState, type FC } from 'react';\nimport {\n  Alert,\n  Box,\n  Typography,\n  Dialog,\n  DialogContent,\n  DialogActions,\n  Button,\n} from '@mui/material';\nimport {\n  ErrorOutline as ErrorOutlineIcon,\n  CheckCircleOutline as CheckCircleOutlineIcon,\n  WarningAmber as WarningAmberIcon,\n} from '@mui/icons-material';\n\nexport interface StatusMessageProps {\n  /** Título del mensaje. */\n  title?: string;\n  /** Descripción/contenido detallado. Requerido para que el componente renderice. */\n  description?: string;\n  /** Tipo de mensaje (controla color + icono). `danger` mapea a `error` de MUI. */\n  messageType?: 'success' | 'danger' | 'warning';\n  /** Forma de presentación: alerta inline o modal. Default: `'alert'`. */\n  displayType?: 'alert' | 'modal';\n  /** Callback al cerrar. Si se omite, no se muestra botón de cerrar. */\n  close?: () => void;\n  /**\n   * Controla visibilidad. Si se omite, el componente maneja su propio\n   * state (se oculta solo al llamar `close`). Si se pasa, queda controlled\n   * y el consumer es responsable de actualizarlo.\n   */\n  open?: boolean;\n}\n\n/**\n * Mensaje de éxito / error / advertencia en forma de alerta inline o modal.\n *\n * - **Uncontrolled**: sin pasar `open`, el componente maneja su propia\n *   visibilidad. Al llamar `close`, se oculta automáticamente.\n * - **Controlled**: pasando `open`, el consumer decide cuándo mostrar/ocultar.\n */\nexport const StatusMessage: FC<StatusMessageProps> = ({\n  title,\n  description,\n  messageType = 'success',\n  displayType = 'alert',\n  close,\n  open: controlledOpen,\n}) => {\n  const [internalOpen, setInternalOpen] = useState(true);\n  const titleId = useId();\n  const descId = useId();\n\n  const isControlled = controlledOpen !== undefined;\n  const isOpen = isControlled ? controlledOpen : internalOpen;\n\n  const handleClose = () => {\n    if (!isControlled) setInternalOpen(false);\n    close?.();\n  };\n\n  const alertVariant = messageType === 'danger' ? 'error' : messageType;\n\n  const icon =\n    messageType === 'success' ? (\n      <CheckCircleOutlineIcon sx={{ fontSize: 64, color: 'success.main' }} />\n    ) : messageType === 'danger' ? (\n      <ErrorOutlineIcon sx={{ fontSize: 64, color: 'error.main' }} />\n    ) : (\n      <WarningAmberIcon sx={{ fontSize: 64, color: 'warning.main' }} />\n    );\n\n  if (!description) return null;\n  if (!isOpen) return null;\n\n  if (displayType === 'modal') {\n    return (\n      <Dialog\n        open={isOpen}\n        onClose={handleClose}\n        aria-labelledby={title ? titleId : undefined}\n        aria-describedby={descId}\n        maxWidth=\"md\"\n        slotProps={{\n          paper: {\n            sx: { borderRadius: '16px', p: 2 },\n          },\n        }}\n      >\n        <DialogContent\n          sx={{\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'center',\n            textAlign: 'center',\n            p: 4,\n            gap: 2,\n          }}\n        >\n          <Box sx={{ mb: 2 }}>{icon}</Box>\n          {title && (\n            <Typography\n              id={titleId}\n              variant=\"h4\"\n              component=\"h2\"\n              sx={{ fontWeight: 'bold' }}\n            >\n              {title}\n            </Typography>\n          )}\n          <Typography id={descId} variant=\"body1\" color=\"text.secondary\">\n            {description}\n          </Typography>\n        </DialogContent>\n        <DialogActions sx={{ justifyContent: 'center', p: 2 }}>\n          <Button onClick={handleClose} variant=\"contained\" color={alertVariant}>\n            Aceptar\n          </Button>\n        </DialogActions>\n      </Dialog>\n    );\n  }\n\n  return (\n    <Alert\n      severity={alertVariant}\n      sx={{ mb: 2, mt: 2 }}\n      onClose={close !== undefined ? handleClose : undefined}\n    >\n      {title && (\n        <Typography variant=\"h6\" sx={{ fontWeight: 'bold' }}>\n          {title}\n        </Typography>\n      )}\n      <Typography variant=\"body2\" sx={{ mt: 1 }}>\n        {description}\n      </Typography>\n    </Alert>\n  );\n};\n\nexport default StatusMessage;\n"],"names":["useState","useId","jsx","CheckCircleOutlineIcon","ErrorOutlineIcon","WarningAmberIcon","jsxs","Dialog","DialogContent","Box","Typography","DialogActions","Button","Alert"],"mappings":"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"}

package/components/StatusMessage/StatusMessage.d.ts

@@ -1,44 +1,28 @@
-/**
- * `StatusMessage` es un componente de React que muestra mensajes de éxito, error o advertencia
- * en un modal o una alerta, utilizando el sistema de diseño de Material-UI.
- *
- * El componente puede mostrar alertas con estilos específicos o un modal personalizable
- * usando `Dialog` y otros componentes de MUI. También puede incluir una función opcional
- * para cerrar el mensaje.
- *
- * @param {StatusMessageProps} props - Las propiedades del componente.
- * @param {string | undefined} props.title - Título del mensaje que se muestra en el modal o alerta.
- * @param {string} [props.description] - Descripción o contenido detallado del mensaje.
- * @param {'success' | 'danger' | 'warning'} [props.messageType='success'] - Tipo de mensaje que determina el estilo visual. 'danger' se mapea a 'error' de MUI.
- * @param {'alert' | 'modal'} [props.displayType='alert'] - Determina si el mensaje se muestra como alerta o modal.
- * @param {() => void} [props.close] - Función opcional para ejecutar al cerrar el mensaje.
- * @returns {React.FC<StatusMessageProps>} Un componente funcional de React que muestra mensajes personalizados.
- *
- * @example
- * // Ejemplo de uso como una alerta:
- * <StatusMessage
- * title="Operación Exitosa"
- * description="La operación se ha completado correctamente."
- * messageType="success"
- * displayType="alert"
- * />
- *
- * // Ejemplo de uso como un modal:
- * <StatusMessage
- * title="Advertencia"
- * description="Se ha producido un error inesperado."
- * messageType="danger"
- * displayType="modal"
- * close={() => console.log('Modal cerrado')}
- * />
- */
+import { FC } from 'react';
 export interface StatusMessageProps {
-    title: string | undefined;
+    /** Título del mensaje. */
+    title?: string;
+    /** Descripción/contenido detallado. Requerido para que el componente renderice. */
     description?: string;
+    /** Tipo de mensaje (controla color + icono). `danger` mapea a `error` de MUI. */
     messageType?: 'success' | 'danger' | 'warning';
+    /** Forma de presentación: alerta inline o modal. Default: `'alert'`. */
     displayType?: 'alert' | 'modal';
+    /** Callback al cerrar. Si se omite, no se muestra botón de cerrar. */
     close?: () => void;
+    /**
+     * Controla visibilidad. Si se omite, el componente maneja su propio
+     * state (se oculta solo al llamar `close`). Si se pasa, queda controlled
+     * y el consumer es responsable de actualizarlo.
+     */
     open?: boolean;
 }
-declare const StatusMessage: ({ title, description, messageType, displayType, close, open, }: StatusMessageProps) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Mensaje de éxito / error / advertencia en forma de alerta inline o modal.
+ *
+ * - **Uncontrolled**: sin pasar `open`, el componente maneja su propia
+ *   visibilidad. Al llamar `close`, se oculta automáticamente.
+ * - **Controlled**: pasando `open`, el consumer decide cuándo mostrar/ocultar.
+ */
+export declare const StatusMessage: FC<StatusMessageProps>;
 export default StatusMessage;

package/components/StatusMessage/StatusMessage.js

@@ -1,79 +1,90 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useId } from "react";
 import { Dialog, DialogContent, Box, Typography, DialogActions, Button, Alert } from "@mui/material";
-import { WarningAmber, ErrorOutline, CheckCircleOutline } from "@mui/icons-material";
+import { CheckCircleOutline, ErrorOutline, WarningAmber } from "@mui/icons-material";
 const StatusMessage = ({
   title,
   description,
   messageType = "success",
   displayType = "alert",
   close,
-  open = true
+  open: controlledOpen
 }) => {
-  const getAlertVariant = () => {
-    switch (messageType) {
-      case "success":
-        return "success";
-      case "danger":
-        return "error";
-      case "warning":
-        return "warning";
-      default:
-        return "info";
-    }
-  };
-  const getIcon = () => {
-    switch (messageType) {
-      case "success":
-        return /* @__PURE__ */ jsx(CheckCircleOutline, { sx: { fontSize: "64px", color: "success.main" } });
-      case "danger":
-        return /* @__PURE__ */ jsx(ErrorOutline, { sx: { fontSize: "64px", color: "error.main" } });
-      case "warning":
-        return /* @__PURE__ */ jsx(WarningAmber, { sx: { fontSize: "64px", color: "warning.main" } });
-      default:
-        return null;
-    }
+  const [internalOpen, setInternalOpen] = useState(true);
+  const titleId = useId();
+  const descId = useId();
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const handleClose = () => {
+    if (!isControlled) setInternalOpen(false);
+    close == null ? void 0 : close();
   };
-  const alertVariant = getAlertVariant();
-  if (!description) {
-    return null;
+  const alertVariant = messageType === "danger" ? "error" : messageType;
+  const icon = messageType === "success" ? /* @__PURE__ */ jsx(CheckCircleOutline, { sx: { fontSize: 64, color: "success.main" } }) : messageType === "danger" ? /* @__PURE__ */ jsx(ErrorOutline, { sx: { fontSize: 64, color: "error.main" } }) : /* @__PURE__ */ jsx(WarningAmber, { sx: { fontSize: 64, color: "warning.main" } });
+  if (!description) return null;
+  if (!isOpen) return null;
+  if (displayType === "modal") {
+    return /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        open: isOpen,
+        onClose: handleClose,
+        "aria-labelledby": title ? titleId : void 0,
+        "aria-describedby": descId,
+        maxWidth: "md",
+        slotProps: {
+          paper: {
+            sx: { borderRadius: "16px", p: 2 }
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            DialogContent,
+            {
+              sx: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                textAlign: "center",
+                p: 4,
+                gap: 2
+              },
+              children: [
+                /* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: icon }),
+                title && /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    id: titleId,
+                    variant: "h4",
+                    component: "h2",
+                    sx: { fontWeight: "bold" },
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ jsx(Typography, { id: descId, variant: "body1", color: "text.secondary", children: description })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(DialogActions, { sx: { justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx(Button, { onClick: handleClose, variant: "contained", color: alertVariant, children: "Aceptar" }) })
+        ]
+      }
+    );
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: displayType === "modal" ? /* @__PURE__ */ jsxs(
-    Dialog,
-    {
-      open,
-      onClose: close,
-      "aria-labelledby": "message-dialog-title",
-      maxWidth: "md",
-      PaperProps: {
-        sx: {
-          borderRadius: "16px",
-          p: 2
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsxs(DialogContent, { sx: { display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", p: 4, gap: 2 }, children: [
-          /* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: getIcon() }),
-          /* @__PURE__ */ jsx(Typography, { variant: "h4", component: "h2", sx: { fontWeight: "bold" }, children: title || "" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", children: description })
-        ] }),
-        close && /* @__PURE__ */ jsx(DialogActions, { sx: { justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx(Button, { onClick: close, variant: "contained", color: alertVariant, children: "Aceptar" }) })
-      ]
-    }
-  ) : /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
     Alert,
     {
       severity: alertVariant,
       sx: { mb: 2, mt: 2 },
-      onClose: close,
-      action: close && /* @__PURE__ */ jsx(Button, { onClick: close, size: "small", color: "inherit", children: "Cerrar" }),
+      onClose: close !== void 0 ? handleClose : void 0,
       children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontWeight: "bold" }, children: title }),
+        title && /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontWeight: "bold" }, children: title }),
         /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { mt: 1 }, children: description })
       ]
     }
-  ) });
+  );
 };
 export {
-  StatusMessage
+  StatusMessage,
+  StatusMessage as default
 };
 //# sourceMappingURL=StatusMessage.js.map

package/components/StatusMessage/StatusMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusMessage.js","sources":["../../../src/components/StatusMessage/StatusMessage.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Alert,\n  Box,\n  Typography,\n  Dialog,\n  DialogContent,\n  DialogActions,\n  Button\n} from '@mui/material';\nimport {\n  ErrorOutline as ErrorOutlineIcon,\n  CheckCircleOutline as CheckCircleOutlineIcon,\n  WarningAmber as WarningAmberIcon\n} from '@mui/icons-material';\n\n/**\n * `StatusMessage` es un componente de React que muestra mensajes de éxito, error o advertencia\n * en un modal o una alerta, utilizando el sistema de diseño de Material-UI.\n *\n * El componente puede mostrar alertas con estilos específicos o un modal personalizable\n * usando `Dialog` y otros componentes de MUI. También puede incluir una función opcional\n * para cerrar el mensaje.\n *\n * @param {StatusMessageProps} props - Las propiedades del componente.\n * @param {string | undefined} props.title - Título del mensaje que se muestra en el modal o alerta.\n * @param {string} [props.description] - Descripción o contenido detallado del mensaje.\n * @param {'success' | 'danger' | 'warning'} [props.messageType='success'] - Tipo de mensaje que determina el estilo visual. 'danger' se mapea a 'error' de MUI.\n * @param {'alert' | 'modal'} [props.displayType='alert'] - Determina si el mensaje se muestra como alerta o modal.\n * @param {() => void} [props.close] - Función opcional para ejecutar al cerrar el mensaje.\n * @returns {React.FC<StatusMessageProps>} Un componente funcional de React que muestra mensajes personalizados.\n *\n * @example\n * // Ejemplo de uso como una alerta:\n * <StatusMessage\n * title=\"Operación Exitosa\"\n * description=\"La operación se ha completado correctamente.\"\n * messageType=\"success\"\n * displayType=\"alert\"\n * />\n *\n * // Ejemplo de uso como un modal:\n * <StatusMessage\n * title=\"Advertencia\"\n * description=\"Se ha producido un error inesperado.\"\n * messageType=\"danger\"\n * displayType=\"modal\"\n * close={() => console.log('Modal cerrado')}\n * />\n */\n\nexport interface StatusMessageProps {\n  title: string | undefined;\n  description?: string;\n  messageType?: 'success' | 'danger' | 'warning';\n  displayType?: 'alert' | 'modal';\n  close?: () => void;\n  // Propiedad para controlar la visibilidad del modal desde el padre\n  open?: boolean;\n}\n\nconst StatusMessage = ({\n  title,\n  description,\n  messageType = 'success',\n  displayType = 'alert',\n  close,\n  open = true,\n}: StatusMessageProps) => {\n\n  const getAlertVariant = () => {\n    switch (messageType) {\n      case 'success':\n        return 'success';\n      case 'danger':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      default:\n        return 'info'; // Fallback\n    }\n  };\n\n  const getIcon = () => {\n    switch (messageType) {\n      case 'success':\n        return <CheckCircleOutlineIcon sx={{ fontSize: '64px', color: 'success.main' }} />;\n      case 'danger':\n        return <ErrorOutlineIcon sx={{ fontSize: '64px', color: 'error.main' }} />;\n      case 'warning':\n        return <WarningAmberIcon sx={{ fontSize: '64px', color: 'warning.main' }} />;\n      default:\n        return null;\n    }\n  };\n\n  const alertVariant = getAlertVariant();\n\n  if (!description) {\n    return null;\n  }\n\n  return (\n    <>\n      {displayType === 'modal' ? (\n        <Dialog\n          open={open}\n          onClose={close}\n          aria-labelledby=\"message-dialog-title\"\n          maxWidth=\"md\"\n          PaperProps={{\n            sx: {\n              borderRadius: '16px',\n              p: 2,\n            },\n          }}\n        >\n          <DialogContent sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', p: 4, gap: 2 }}>\n            <Box sx={{ mb: 2 }}>\n              {getIcon()}\n            </Box>\n            <Typography variant=\"h4\" component=\"h2\" sx={{ fontWeight: 'bold' }}>\n              {title || ''}\n            </Typography>\n            <Typography variant=\"body1\" color=\"text.secondary\">\n              {description}\n            </Typography>\n          </DialogContent>\n          {close && (\n            <DialogActions sx={{ justifyContent: 'center', p: 2 }}>\n              <Button onClick={close} variant=\"contained\" color={alertVariant}>\n                Aceptar\n              </Button>\n            </DialogActions>\n          )}\n        </Dialog>\n      ) : (\n        <Alert\n          severity={alertVariant}\n          sx={{ mb: 2, mt: 2 }}\n          onClose={close}\n          action={\n            close && (\n              <Button onClick={close} size=\"small\" color=\"inherit\">\n                Cerrar\n              </Button>\n            )\n          }\n        >\n          <Typography variant=\"h6\" sx={{ fontWeight: 'bold' }}>\n            {title}\n          </Typography>\n          <Typography variant=\"body2\" sx={{ mt: 1 }}>\n            {description}\n          </Typography>\n        </Alert>\n      )}\n    </>\n  );\n};\n\nexport default StatusMessage;\n"],"names":["CheckCircleOutlineIcon","ErrorOutlineIcon","WarningAmberIcon"],"mappings":";;;AA6DA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AAAA,EACA,OAAO;AACT,MAA0B;AAExB,QAAM,kBAAkB,MAAM;AAC5B,YAAQ,aAAA;AAAA,MACN,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAM,UAAU,MAAM;AACpB,YAAQ,aAAA;AAAA,MACN,KAAK;AACH,eAAO,oBAACA,sBAAuB,IAAI,EAAE,UAAU,QAAQ,OAAO,kBAAkB;AAAA,MAClF,KAAK;AACH,eAAO,oBAACC,gBAAiB,IAAI,EAAE,UAAU,QAAQ,OAAO,gBAAgB;AAAA,MAC1E,KAAK;AACH,eAAO,oBAACC,gBAAiB,IAAI,EAAE,UAAU,QAAQ,OAAO,kBAAkB;AAAA,MAC5E;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAM,eAAe,gBAAA;AAErB,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AAEA,SACE,oBAAA,UAAA,EACG,0BAAgB,UACf;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,mBAAgB;AAAA,MAChB,UAAS;AAAA,MACT,YAAY;AAAA,QACV,IAAI;AAAA,UACF,cAAc;AAAA,UACd,GAAG;AAAA,QAAA;AAAA,MACL;AAAA,MAGF,UAAA;AAAA,QAAA,qBAAC,eAAA,EAAc,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,WAAW,UAAU,GAAG,GAAG,KAAK,KACnH,UAAA;AAAA,UAAA,oBAAC,OAAI,IAAI,EAAE,IAAI,KACZ,qBACH;AAAA,UACA,oBAAC,YAAA,EAAW,SAAQ,MAAK,WAAU,MAAK,IAAI,EAAE,YAAY,OAAA,GACvD,UAAA,SAAS,GAAA,CACZ;AAAA,8BACC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAC/B,UAAA,YAAA,CACH;AAAA,QAAA,GACF;AAAA,QACC,SACC,oBAAC,eAAA,EAAc,IAAI,EAAE,gBAAgB,UAAU,GAAG,EAAA,GAChD,UAAA,oBAAC,QAAA,EAAO,SAAS,OAAO,SAAQ,aAAY,OAAO,cAAc,qBAEjE,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAIJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,IAAI,EAAE,IAAI,GAAG,IAAI,EAAA;AAAA,MACjB,SAAS;AAAA,MACT,QACE,SACE,oBAAC,QAAA,EAAO,SAAS,OAAO,MAAK,SAAQ,OAAM,WAAU,UAAA,SAAA,CAErD;AAAA,MAIJ,UAAA;AAAA,QAAA,oBAAC,YAAA,EAAW,SAAQ,MAAK,IAAI,EAAE,YAAY,OAAA,GACxC,UAAA,MAAA,CACH;AAAA,QACA,oBAAC,cAAW,SAAQ,SAAQ,IAAI,EAAE,IAAI,EAAA,GACnC,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;"}
+{"version":3,"file":"StatusMessage.js","sources":["../../../src/components/StatusMessage/StatusMessage.tsx"],"sourcesContent":["import { useId, useState, type FC } from 'react';\nimport {\n  Alert,\n  Box,\n  Typography,\n  Dialog,\n  DialogContent,\n  DialogActions,\n  Button,\n} from '@mui/material';\nimport {\n  ErrorOutline as ErrorOutlineIcon,\n  CheckCircleOutline as CheckCircleOutlineIcon,\n  WarningAmber as WarningAmberIcon,\n} from '@mui/icons-material';\n\nexport interface StatusMessageProps {\n  /** Título del mensaje. */\n  title?: string;\n  /** Descripción/contenido detallado. Requerido para que el componente renderice. */\n  description?: string;\n  /** Tipo de mensaje (controla color + icono). `danger` mapea a `error` de MUI. */\n  messageType?: 'success' | 'danger' | 'warning';\n  /** Forma de presentación: alerta inline o modal. Default: `'alert'`. */\n  displayType?: 'alert' | 'modal';\n  /** Callback al cerrar. Si se omite, no se muestra botón de cerrar. */\n  close?: () => void;\n  /**\n   * Controla visibilidad. Si se omite, el componente maneja su propio\n   * state (se oculta solo al llamar `close`). Si se pasa, queda controlled\n   * y el consumer es responsable de actualizarlo.\n   */\n  open?: boolean;\n}\n\n/**\n * Mensaje de éxito / error / advertencia en forma de alerta inline o modal.\n *\n * - **Uncontrolled**: sin pasar `open`, el componente maneja su propia\n *   visibilidad. Al llamar `close`, se oculta automáticamente.\n * - **Controlled**: pasando `open`, el consumer decide cuándo mostrar/ocultar.\n */\nexport const StatusMessage: FC<StatusMessageProps> = ({\n  title,\n  description,\n  messageType = 'success',\n  displayType = 'alert',\n  close,\n  open: controlledOpen,\n}) => {\n  const [internalOpen, setInternalOpen] = useState(true);\n  const titleId = useId();\n  const descId = useId();\n\n  const isControlled = controlledOpen !== undefined;\n  const isOpen = isControlled ? controlledOpen : internalOpen;\n\n  const handleClose = () => {\n    if (!isControlled) setInternalOpen(false);\n    close?.();\n  };\n\n  const alertVariant = messageType === 'danger' ? 'error' : messageType;\n\n  const icon =\n    messageType === 'success' ? (\n      <CheckCircleOutlineIcon sx={{ fontSize: 64, color: 'success.main' }} />\n    ) : messageType === 'danger' ? (\n      <ErrorOutlineIcon sx={{ fontSize: 64, color: 'error.main' }} />\n    ) : (\n      <WarningAmberIcon sx={{ fontSize: 64, color: 'warning.main' }} />\n    );\n\n  if (!description) return null;\n  if (!isOpen) return null;\n\n  if (displayType === 'modal') {\n    return (\n      <Dialog\n        open={isOpen}\n        onClose={handleClose}\n        aria-labelledby={title ? titleId : undefined}\n        aria-describedby={descId}\n        maxWidth=\"md\"\n        slotProps={{\n          paper: {\n            sx: { borderRadius: '16px', p: 2 },\n          },\n        }}\n      >\n        <DialogContent\n          sx={{\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'center',\n            textAlign: 'center',\n            p: 4,\n            gap: 2,\n          }}\n        >\n          <Box sx={{ mb: 2 }}>{icon}</Box>\n          {title && (\n            <Typography\n              id={titleId}\n              variant=\"h4\"\n              component=\"h2\"\n              sx={{ fontWeight: 'bold' }}\n            >\n              {title}\n            </Typography>\n          )}\n          <Typography id={descId} variant=\"body1\" color=\"text.secondary\">\n            {description}\n          </Typography>\n        </DialogContent>\n        <DialogActions sx={{ justifyContent: 'center', p: 2 }}>\n          <Button onClick={handleClose} variant=\"contained\" color={alertVariant}>\n            Aceptar\n          </Button>\n        </DialogActions>\n      </Dialog>\n    );\n  }\n\n  return (\n    <Alert\n      severity={alertVariant}\n      sx={{ mb: 2, mt: 2 }}\n      onClose={close !== undefined ? handleClose : undefined}\n    >\n      {title && (\n        <Typography variant=\"h6\" sx={{ fontWeight: 'bold' }}>\n          {title}\n        </Typography>\n      )}\n      <Typography variant=\"body2\" sx={{ mt: 1 }}>\n        {description}\n      </Typography>\n    </Alert>\n  );\n};\n\nexport default StatusMessage;\n"],"names":["CheckCircleOutlineIcon","ErrorOutlineIcon","WarningAmberIcon"],"mappings":";;;;AA0CO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AAAA,EACA,MAAM;AACR,MAAM;AACJ,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,IAAI;AACrD,QAAM,UAAU,MAAA;AAChB,QAAM,SAAS,MAAA;AAEf,QAAM,eAAe,mBAAmB;AACxC,QAAM,SAAS,eAAe,iBAAiB;AAE/C,QAAM,cAAc,MAAM;AACxB,QAAI,CAAC,aAAc,iBAAgB,KAAK;AACxC;AAAA,EACF;AAEA,QAAM,eAAe,gBAAgB,WAAW,UAAU;AAE1D,QAAM,OACJ,gBAAgB,YACd,oBAACA,sBAAuB,IAAI,EAAE,UAAU,IAAI,OAAO,eAAA,EAAe,CAAG,IACnE,gBAAgB,WAClB,oBAACC,cAAA,EAAiB,IAAI,EAAE,UAAU,IAAI,OAAO,eAAa,CAAG,IAE7D,oBAACC,cAAA,EAAiB,IAAI,EAAE,UAAU,IAAI,OAAO,kBAAkB;AAGnE,MAAI,CAAC,YAAa,QAAO;AACzB,MAAI,CAAC,OAAQ,QAAO;AAEpB,MAAI,gBAAgB,SAAS;AAC3B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAS;AAAA,QACT,mBAAiB,QAAQ,UAAU;AAAA,QACnC,oBAAkB;AAAA,QAClB,UAAS;AAAA,QACT,WAAW;AAAA,UACT,OAAO;AAAA,YACL,IAAI,EAAE,cAAc,QAAQ,GAAG,EAAA;AAAA,UAAE;AAAA,QACnC;AAAA,QAGF,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,gBACF,SAAS;AAAA,gBACT,eAAe;AAAA,gBACf,YAAY;AAAA,gBACZ,WAAW;AAAA,gBACX,GAAG;AAAA,gBACH,KAAK;AAAA,cAAA;AAAA,cAGP,UAAA;AAAA,gBAAA,oBAAC,OAAI,IAAI,EAAE,IAAI,EAAA,GAAM,UAAA,MAAK;AAAA,gBACzB,SACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,SAAQ;AAAA,oBACR,WAAU;AAAA,oBACV,IAAI,EAAE,YAAY,OAAA;AAAA,oBAEjB,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGL,oBAAC,cAAW,IAAI,QAAQ,SAAQ,SAAQ,OAAM,kBAC3C,UAAA,YAAA,CACH;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,8BAED,eAAA,EAAc,IAAI,EAAE,gBAAgB,UAAU,GAAG,EAAA,GAChD,UAAA,oBAAC,QAAA,EAAO,SAAS,aAAa,SAAQ,aAAY,OAAO,cAAc,qBAEvE,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,IAAI,EAAE,IAAI,GAAG,IAAI,EAAA;AAAA,MACjB,SAAS,UAAU,SAAY,cAAc;AAAA,MAE5C,UAAA;AAAA,QAAA,SACC,oBAAC,cAAW,SAAQ,MAAK,IAAI,EAAE,YAAY,OAAA,GACxC,UAAA,MAAA,CACH;AAAA,QAEF,oBAAC,cAAW,SAAQ,SAAQ,IAAI,EAAE,IAAI,EAAA,GACnC,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/components/StatusMessage/index.d.ts

@@ -1 +1,2 @@
-export { default as StatusMessage } from './StatusMessage';
+export { StatusMessage, default } from './StatusMessage';
+export type { StatusMessageProps } from './StatusMessage';

package/components/StatusMessage.d.ts

@@ -1,2 +1,6 @@
 export * from './StatusMessage/index'
 export {}
+import _default from './StatusMessage/index'
+export default _default
+export * from './StatusMessage/index'
+export {}