@soyfri/shared-library 4.0.2 → 4.1.0

package/chunks/EmptyState-C3G5C0DO.cjs

@@ -0,0 +1,91 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const styles = require("@mui/material/styles");
+const mergeSlotProps = require("./mergeSlotProps-DixXUzK1.cjs");
+const mergeSx = require("./mergeSx-Dbccoo_H.cjs");
+const resolvePreset = require("./resolvePreset-CxTI6_Ln.cjs");
+const EmptyStateRoot = styles.styled(material.Box, { name: "FriEmptyState", slot: "Root" })(
+  ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingTop: theme.spacing(8),
+    paddingBottom: theme.spacing(8),
+    paddingLeft: theme.spacing(3),
+    paddingRight: theme.spacing(3),
+    textAlign: "center",
+    color: theme.palette.text.secondary
+  })
+);
+const EmptyState = React.forwardRef(function EmptyState2(inProps, ref) {
+  const props = styles.useThemeProps({ props: inProps, name: "FriEmptyState" });
+  const _a = props, { title, message, icon, action, preset, slotProps, sx } = _a, rest = __objRest(_a, ["title", "message", "icon", "action", "preset", "slotProps", "sx"]);
+  const theme = material.useTheme();
+  const presetSx = resolvePreset.resolvePreset("EmptyState", preset, theme);
+  return /* @__PURE__ */ jsxRuntime.jsxs(EmptyStateRoot, __spreadProps(__spreadValues({ ref }, rest), { sx: mergeSx.mergeSx(presetSx != null ? presetSx : {}, sx), children: [
+    icon,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.Typography,
+      __spreadProps(__spreadValues({}, mergeSlotProps.mergeSlotProps(
+        {
+          variant: "subtitle1",
+          className: "fri-EmptyState-title",
+          sx: { fontWeight: 600, color: "text.primary", mt: icon ? 2 : 0 }
+        },
+        slotProps == null ? void 0 : slotProps.title
+      )), {
+        children: title
+      })
+    ),
+    message && /* @__PURE__ */ jsxRuntime.jsx(
+      material.Typography,
+      __spreadProps(__spreadValues({}, mergeSlotProps.mergeSlotProps(
+        {
+          variant: "body2",
+          className: "fri-EmptyState-message",
+          sx: { mt: 0.5 }
+        },
+        slotProps == null ? void 0 : slotProps.message
+      )), {
+        children: message
+      })
+    ),
+    action && /* @__PURE__ */ jsxRuntime.jsx(material.Box, __spreadProps(__spreadValues({}, mergeSlotProps.mergeSlotProps({ sx: { mt: 3 } }, slotProps == null ? void 0 : slotProps.action)), { children: action }))
+  ] }));
+});
+exports.EmptyState = EmptyState;
+//# sourceMappingURL=EmptyState-C3G5C0DO.cjs.map

package/chunks/EmptyState-C3G5C0DO.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState-C3G5C0DO.cjs","sources":["../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from 'react';\nimport {\n  Box,\n  Typography,\n  useTheme,\n  type BoxProps,\n  type TypographyProps,\n} from '@mui/material';\nimport { styled, useThemeProps, type SxProps, type Theme } from '@mui/material/styles';\n\nimport { mergeSlotProps } from '../_shared/mergeSlotProps';\nimport { mergeSx } from '../_shared/mergeSx';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n/** Nodos internos alcanzables vía `slotProps`. */\nexport interface EmptyStateSlotProps {\n  /** El `Typography` del título. */\n  title?: Partial<TypographyProps>;\n  /** El `Typography` del mensaje secundario. */\n  message?: Partial<TypographyProps>;\n  /** El `Box` que envuelve la acción. */\n  action?: Partial<BoxProps>;\n}\n\nexport interface EmptyStateProps extends Omit<BoxProps, 'title' | 'children'> {\n  /** Qué falta, en positivo: \"Sin dispositivos registrados\". */\n  title: string;\n  /** Línea secundaria opcional: qué puede hacer el usuario. */\n  message?: string;\n  /** Icono o ilustración arriba del título. */\n  icon?: ReactNode;\n  /** Acción opcional (botón) debajo del mensaje. */\n  action?: ReactNode;\n  /**\n   * @deprecated Usar `theme.components.FriEmptyState.styleOverrides` /\n   * `variants` — la API nativa de MUI.\n   */\n  preset?: string;\n  /** Props para los nodos internos. `className` y `sx` se acumulan. */\n  slotProps?: EmptyStateSlotProps;\n  sx?: SxProps<Theme>;\n}\n\n/** Root themeable vía `theme.components.FriEmptyState`. */\nconst EmptyStateRoot = styled(Box, { name: 'FriEmptyState', slot: 'Root' })(\n  ({ theme }) => ({\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingTop: theme.spacing(8),\n    paddingBottom: theme.spacing(8),\n    paddingLeft: theme.spacing(3),\n    paddingRight: theme.spacing(3),\n    textAlign: 'center',\n    color: theme.palette.text.secondary,\n  }),\n);\n\n/**\n * Estado vacío centrado, para usar dentro de una card, un tab o una tabla sin\n * resultados. Color y tipografía salen del theme del consumidor: no hay\n * hex ni tamaños hardcodeados.\n */\nexport const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(\n  inProps,\n  ref,\n) {\n  const props = useThemeProps({ props: inProps, name: 'FriEmptyState' });\n  const { title, message, icon, action, preset, slotProps, sx, ...rest } = props;\n\n  const theme = useTheme();\n  // Compat con el sistema de presets viejo (deprecado).\n  const presetSx = resolvePreset('EmptyState', preset, theme);\n\n  return (\n    <EmptyStateRoot ref={ref} {...rest} sx={mergeSx(presetSx ?? {}, sx)}>\n      {icon}\n      <Typography\n        {...mergeSlotProps<TypographyProps>(\n          {\n            variant: 'subtitle1',\n            className: 'fri-EmptyState-title',\n            sx: { fontWeight: 600, color: 'text.primary', mt: icon ? 2 : 0 },\n          },\n          slotProps?.title,\n        )}\n      >\n        {title}\n      </Typography>\n      {message && (\n        <Typography\n          {...mergeSlotProps<TypographyProps>(\n            {\n              variant: 'body2',\n              className: 'fri-EmptyState-message',\n              sx: { mt: 0.5 },\n            },\n            slotProps?.message,\n          )}\n        >\n          {message}\n        </Typography>\n      )}\n      {action && (\n        <Box {...mergeSlotProps<BoxProps>({ sx: { mt: 3 } }, slotProps?.action)}>\n          {action}\n        </Box>\n      )}\n    </EmptyStateRoot>\n  );\n});\n\nexport default EmptyState;\n"],"names":["styled","Box","forwardRef","EmptyState","useThemeProps","useTheme","resolvePreset","jsxs","mergeSx","jsx","Typography","mergeSlotProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAM,iBAAiBA,OAAAA,OAAOC,cAAK,EAAE,MAAM,iBAAiB,MAAM,QAAQ;AAAA,EACxE,CAAC,EAAE,MAAA,OAAa;AAAA,IACd,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,YAAY,MAAM,QAAQ,CAAC;AAAA,IAC3B,eAAe,MAAM,QAAQ,CAAC;AAAA,IAC9B,aAAa,MAAM,QAAQ,CAAC;AAAA,IAC5B,cAAc,MAAM,QAAQ,CAAC;AAAA,IAC7B,WAAW;AAAA,IACX,OAAO,MAAM,QAAQ,KAAK;AAAA,EAAA;AAE9B;AAOO,MAAM,aAAaC,MAAAA,WAA4C,SAASC,YAC7E,SACA,KACA;AACA,QAAM,QAAQC,OAAAA,cAAc,EAAE,OAAO,SAAS,MAAM,iBAAiB;AACrE,QAAyE,YAAjE,SAAO,SAAS,MAAM,QAAQ,QAAQ,WAAW,OAAgB,IAAT,iBAAS,IAAT,CAAxD,SAAO,WAAS,QAAM,UAAQ,UAAQ,aAAW;AAEzD,QAAM,QAAQC,SAAAA,SAAA;AAEd,QAAM,WAAWC,cAAAA,cAAc,cAAc,QAAQ,KAAK;AAE1D,SACEC,gCAAC,gBAAA,+BAAe,OAAc,OAA7B,EAAmC,IAAIC,QAAAA,QAAQ,8BAAY,CAAA,GAAI,EAAE,GAC/D,UAAA;AAAA,IAAA;AAAA,IACDC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA,iCACKC,eAAAA;AAAAA,QACF;AAAA,UACE,SAAS;AAAA,UACT,WAAW;AAAA,UACX,IAAI,EAAE,YAAY,KAAK,OAAO,gBAAgB,IAAI,OAAO,IAAI,EAAA;AAAA,QAAE;AAAA,QAEjE,uCAAW;AAAA,MAAA,IAPd;AAAA,QAUE,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,WACCF,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA,iCACKC,eAAAA;AAAAA,QACF;AAAA,UACE,SAAS;AAAA,UACT,WAAW;AAAA,UACX,IAAI,EAAE,IAAI,IAAA;AAAA,QAAI;AAAA,QAEhB,uCAAW;AAAA,MAAA,IAPd;AAAA,QAUE,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ,UACCF,2BAAAA,IAACR,SAAAA,KAAA,iCAAQU,eAAAA,eAAyB,EAAE,IAAI,EAAE,IAAI,IAAE,GAAK,uCAAW,MAAM,IAArE,EACE,UAAA,OAAA,EACH;AAAA,EAAA,IAEJ;AAEJ,CAAC;;"}

package/chunks/EmptyState-CVaRjXkT.mjs

@@ -0,0 +1,92 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useTheme, Typography, Box } from "@mui/material";
+import { useThemeProps, styled } from "@mui/material/styles";
+import { m as mergeSlotProps } from "./mergeSlotProps-D-7l6IPd.mjs";
+import { m as mergeSx } from "./mergeSx-BXoNZjB_.mjs";
+import { r as resolvePreset } from "./resolvePreset-K6_BfWHD.mjs";
+const EmptyStateRoot = styled(Box, { name: "FriEmptyState", slot: "Root" })(
+  ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingTop: theme.spacing(8),
+    paddingBottom: theme.spacing(8),
+    paddingLeft: theme.spacing(3),
+    paddingRight: theme.spacing(3),
+    textAlign: "center",
+    color: theme.palette.text.secondary
+  })
+);
+const EmptyState = forwardRef(function EmptyState2(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: "FriEmptyState" });
+  const _a = props, { title, message, icon, action, preset, slotProps, sx } = _a, rest = __objRest(_a, ["title", "message", "icon", "action", "preset", "slotProps", "sx"]);
+  const theme = useTheme();
+  const presetSx = resolvePreset("EmptyState", preset, theme);
+  return /* @__PURE__ */ jsxs(EmptyStateRoot, __spreadProps(__spreadValues({ ref }, rest), { sx: mergeSx(presetSx != null ? presetSx : {}, sx), children: [
+    icon,
+    /* @__PURE__ */ jsx(
+      Typography,
+      __spreadProps(__spreadValues({}, mergeSlotProps(
+        {
+          variant: "subtitle1",
+          className: "fri-EmptyState-title",
+          sx: { fontWeight: 600, color: "text.primary", mt: icon ? 2 : 0 }
+        },
+        slotProps == null ? void 0 : slotProps.title
+      )), {
+        children: title
+      })
+    ),
+    message && /* @__PURE__ */ jsx(
+      Typography,
+      __spreadProps(__spreadValues({}, mergeSlotProps(
+        {
+          variant: "body2",
+          className: "fri-EmptyState-message",
+          sx: { mt: 0.5 }
+        },
+        slotProps == null ? void 0 : slotProps.message
+      )), {
+        children: message
+      })
+    ),
+    action && /* @__PURE__ */ jsx(Box, __spreadProps(__spreadValues({}, mergeSlotProps({ sx: { mt: 3 } }, slotProps == null ? void 0 : slotProps.action)), { children: action }))
+  ] }));
+});
+export {
+  EmptyState as E
+};
+//# sourceMappingURL=EmptyState-CVaRjXkT.mjs.map

package/chunks/EmptyState-CVaRjXkT.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState-CVaRjXkT.mjs","sources":["../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from 'react';\nimport {\n  Box,\n  Typography,\n  useTheme,\n  type BoxProps,\n  type TypographyProps,\n} from '@mui/material';\nimport { styled, useThemeProps, type SxProps, type Theme } from '@mui/material/styles';\n\nimport { mergeSlotProps } from '../_shared/mergeSlotProps';\nimport { mergeSx } from '../_shared/mergeSx';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n/** Nodos internos alcanzables vía `slotProps`. */\nexport interface EmptyStateSlotProps {\n  /** El `Typography` del título. */\n  title?: Partial<TypographyProps>;\n  /** El `Typography` del mensaje secundario. */\n  message?: Partial<TypographyProps>;\n  /** El `Box` que envuelve la acción. */\n  action?: Partial<BoxProps>;\n}\n\nexport interface EmptyStateProps extends Omit<BoxProps, 'title' | 'children'> {\n  /** Qué falta, en positivo: \"Sin dispositivos registrados\". */\n  title: string;\n  /** Línea secundaria opcional: qué puede hacer el usuario. */\n  message?: string;\n  /** Icono o ilustración arriba del título. */\n  icon?: ReactNode;\n  /** Acción opcional (botón) debajo del mensaje. */\n  action?: ReactNode;\n  /**\n   * @deprecated Usar `theme.components.FriEmptyState.styleOverrides` /\n   * `variants` — la API nativa de MUI.\n   */\n  preset?: string;\n  /** Props para los nodos internos. `className` y `sx` se acumulan. */\n  slotProps?: EmptyStateSlotProps;\n  sx?: SxProps<Theme>;\n}\n\n/** Root themeable vía `theme.components.FriEmptyState`. */\nconst EmptyStateRoot = styled(Box, { name: 'FriEmptyState', slot: 'Root' })(\n  ({ theme }) => ({\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingTop: theme.spacing(8),\n    paddingBottom: theme.spacing(8),\n    paddingLeft: theme.spacing(3),\n    paddingRight: theme.spacing(3),\n    textAlign: 'center',\n    color: theme.palette.text.secondary,\n  }),\n);\n\n/**\n * Estado vacío centrado, para usar dentro de una card, un tab o una tabla sin\n * resultados. Color y tipografía salen del theme del consumidor: no hay\n * hex ni tamaños hardcodeados.\n */\nexport const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(\n  inProps,\n  ref,\n) {\n  const props = useThemeProps({ props: inProps, name: 'FriEmptyState' });\n  const { title, message, icon, action, preset, slotProps, sx, ...rest } = props;\n\n  const theme = useTheme();\n  // Compat con el sistema de presets viejo (deprecado).\n  const presetSx = resolvePreset('EmptyState', preset, theme);\n\n  return (\n    <EmptyStateRoot ref={ref} {...rest} sx={mergeSx(presetSx ?? {}, sx)}>\n      {icon}\n      <Typography\n        {...mergeSlotProps<TypographyProps>(\n          {\n            variant: 'subtitle1',\n            className: 'fri-EmptyState-title',\n            sx: { fontWeight: 600, color: 'text.primary', mt: icon ? 2 : 0 },\n          },\n          slotProps?.title,\n        )}\n      >\n        {title}\n      </Typography>\n      {message && (\n        <Typography\n          {...mergeSlotProps<TypographyProps>(\n            {\n              variant: 'body2',\n              className: 'fri-EmptyState-message',\n              sx: { mt: 0.5 },\n            },\n            slotProps?.message,\n          )}\n        >\n          {message}\n        </Typography>\n      )}\n      {action && (\n        <Box {...mergeSlotProps<BoxProps>({ sx: { mt: 3 } }, slotProps?.action)}>\n          {action}\n        </Box>\n      )}\n    </EmptyStateRoot>\n  );\n});\n\nexport default EmptyState;\n"],"names":["EmptyState"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAM,iBAAiB,OAAO,KAAK,EAAE,MAAM,iBAAiB,MAAM,QAAQ;AAAA,EACxE,CAAC,EAAE,MAAA,OAAa;AAAA,IACd,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,YAAY,MAAM,QAAQ,CAAC;AAAA,IAC3B,eAAe,MAAM,QAAQ,CAAC;AAAA,IAC9B,aAAa,MAAM,QAAQ,CAAC;AAAA,IAC5B,cAAc,MAAM,QAAQ,CAAC;AAAA,IAC7B,WAAW;AAAA,IACX,OAAO,MAAM,QAAQ,KAAK;AAAA,EAAA;AAE9B;AAOO,MAAM,aAAa,WAA4C,SAASA,YAC7E,SACA,KACA;AACA,QAAM,QAAQ,cAAc,EAAE,OAAO,SAAS,MAAM,iBAAiB;AACrE,QAAyE,YAAjE,SAAO,SAAS,MAAM,QAAQ,QAAQ,WAAW,OAAgB,IAAT,iBAAS,IAAT,CAAxD,SAAO,WAAS,QAAM,UAAQ,UAAQ,aAAW;AAEzD,QAAM,QAAQ,SAAA;AAEd,QAAM,WAAW,cAAc,cAAc,QAAQ,KAAK;AAE1D,SACE,qBAAC,gBAAA,+BAAe,OAAc,OAA7B,EAAmC,IAAI,QAAQ,8BAAY,CAAA,GAAI,EAAE,GAC/D,UAAA;AAAA,IAAA;AAAA,IACD;AAAA,MAAC;AAAA,MAAA,iCACK;AAAA,QACF;AAAA,UACE,SAAS;AAAA,UACT,WAAW;AAAA,UACX,IAAI,EAAE,YAAY,KAAK,OAAO,gBAAgB,IAAI,OAAO,IAAI,EAAA;AAAA,QAAE;AAAA,QAEjE,uCAAW;AAAA,MAAA,IAPd;AAAA,QAUE,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,WACC;AAAA,MAAC;AAAA,MAAA,iCACK;AAAA,QACF;AAAA,UACE,SAAS;AAAA,UACT,WAAW;AAAA,UACX,IAAI,EAAE,IAAI,IAAA;AAAA,QAAI;AAAA,QAEhB,uCAAW;AAAA,MAAA,IAPd;AAAA,QAUE,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ,UACC,oBAAC,KAAA,iCAAQ,eAAyB,EAAE,IAAI,EAAE,IAAI,IAAE,GAAK,uCAAW,MAAM,IAArE,EACE,UAAA,OAAA,EACH;AAAA,EAAA,IAEJ;AAEJ,CAAC;"}

package/chunks/Flyout-BSaOisD7.mjs

@@ -0,0 +1,118 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { useMemo } from "react";
+import { Drawer, Box, Typography, IconButton, Divider } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+const Flyout = React__default.forwardRef(function Flyout2({
+  open,
+  onClose,
+  title,
+  anchor = "right",
+  children,
+  size = "medium",
+  // Default size: 'medium'
+  height = "auto"
+}, ref) {
+  const getWidthBySize = (flyoutSize) => {
+    const baseMultiplier = 1.15;
+    switch (flyoutSize) {
+      case "small":
+        return Math.round(300 * baseMultiplier);
+      // ~345px
+      case "medium":
+        return Math.round(450 * baseMultiplier);
+      // ~518px (rounded)
+      case "large":
+        return Math.round(600 * baseMultiplier);
+      // ~690px
+      default:
+        return Math.round(450 * baseMultiplier);
+    }
+  };
+  const calculatedWidth = getWidthBySize(size);
+  const contentStyle = useMemo(() => {
+    if (anchor === "left" || anchor === "right") {
+      return { width: calculatedWidth };
+    } else {
+      return { height, width: "100%" };
+    }
+  }, [anchor, calculatedWidth, height]);
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      ref,
+      anchor,
+      open,
+      onClose,
+      disableEscapeKeyDown: false,
+      ModalProps: {
+        // Keep mounted for better performance if content is complex or needs to retain state
+        keepMounted: true
+      },
+      children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: __spreadProps(__spreadValues({}, contentStyle), {
+            // Apply calculated width/height
+            display: "flex",
+            flexDirection: "column",
+            p: 2,
+            // Padding around the content
+            backgroundColor: (theme) => theme.palette.background.paper,
+            // Use theme background color
+            color: (theme) => theme.palette.text.primary,
+            // Use theme text color
+            height: "100%"
+            // Ensure the main container of the Drawer takes full height
+          }),
+          role: "presentation",
+          children: [
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  mb: 2,
+                  // Margin bottom for separation from content
+                  flexShrink: 0
+                  // Prevent the header from shrinking when content scrolls
+                },
+                children: [
+                  title && /* @__PURE__ */ jsx(Typography, { variant: "h6", component: "div", sx: { fontWeight: "bold" }, children: title }),
+                  /* @__PURE__ */ jsx(IconButton, { onClick: onClose, sx: { ml: "auto" }, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(Divider, { sx: { mb: 2 } }),
+            " ",
+            /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1, overflowY: "auto" }, children })
+          ]
+        }
+      )
+    }
+  );
+});
+export {
+  Flyout as F
+};
+//# sourceMappingURL=Flyout-BSaOisD7.mjs.map

package/chunks/Flyout-BSaOisD7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flyout-BSaOisD7.mjs","sources":["../../src/components/Flyout/Flyout.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport {\n  Box,\n  Typography,\n  IconButton,\n  Divider,\n  Drawer,\n  List,\n  ListItem,\n  ListItemText,\n  TextField,\n  Button,\n} from '@mui/material';\nimport CloseIcon from '@mui/icons-material/Close';\n\n// Define the size types for the Flyout\ntype FlyoutSize = 'small' | 'medium' | 'large';\n\n// Define the props for the Flyout component\nexport interface FlyoutProps {\n  open: boolean;\n  onClose: () => void;\n  title?: string;\n  anchor?: 'left' | 'top' | 'right' | 'bottom';\n  children: React.ReactNode;\n  size?: FlyoutSize; // New prop for predefined size\n  height?: string | number; // Allows custom height for top/bottom anchors\n}\n\nconst Flyout = React.forwardRef<HTMLDivElement, FlyoutProps>(function Flyout(\n  {\n    open,\n    onClose,\n    title,\n    anchor = 'right',\n    children,\n    size = 'medium', // Default size: 'medium'\n    height = 'auto',\n  },\n  ref,\n) {\n  // Mapping of predefined sizes to pixel widths\n  const getWidthBySize = (flyoutSize: FlyoutSize): number => {\n    const baseMultiplier = 1.15; // 15% larger than base\n    switch (flyoutSize) {\n      case 'small':\n        return Math.round(300 * baseMultiplier); // ~345px\n      case 'medium':\n        return Math.round(450 * baseMultiplier); // ~518px (rounded)\n      case 'large':\n        return Math.round(600 * baseMultiplier); // ~690px\n      default:\n        return Math.round(450 * baseMultiplier); // Fallback, ~518px\n    }\n  };\n\n  // Calculate width based on size prop for left/right anchors\n  const calculatedWidth = getWidthBySize(size);\n\n  // Determine the style for the content box based on anchor\n  const contentStyle = useMemo(() => {\n    if (anchor === 'left' || anchor === 'right') {\n      return { width: calculatedWidth }; // Use the calculated width\n    } else {\n      // For 'top' or 'bottom' anchors, width is 100% and height is controlled\n      return { height: height, width: '100%' };\n    }\n  }, [anchor, calculatedWidth, height]);\n\n  return (\n    <Drawer\n      ref={ref}\n      anchor={anchor}\n      open={open}\n      onClose={onClose}\n      // Allows closing with Escape key, but prevents closing by clicking outside if ModalProps.disableBackdropClick is true\n      disableEscapeKeyDown={false}\n      ModalProps={{\n        // Keep mounted for better performance if content is complex or needs to retain state\n        keepMounted: true,\n      }}\n    >\n      <Box\n        sx={{\n          ...contentStyle, // Apply calculated width/height\n          display: 'flex',\n          flexDirection: 'column',\n          p: 2, // Padding around the content\n          backgroundColor: (theme) => theme.palette.background.paper, // Use theme background color\n          color: (theme) => theme.palette.text.primary, // Use theme text color\n          height: '100%', // Ensure the main container of the Drawer takes full height\n        }}\n        role=\"presentation\" // ARIA role for accessibility\n      >\n        {/* Header section with title and close button */}\n        <Box\n          sx={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n            mb: 2, // Margin bottom for separation from content\n            flexShrink: 0, // Prevent the header from shrinking when content scrolls\n          }}\n        >\n          {title && (\n            <Typography variant=\"h6\" component=\"div\" sx={{ fontWeight: 'bold' }}>\n              {title}\n            </Typography>\n          )}\n          <IconButton onClick={onClose} sx={{ ml: 'auto' }}>\n            <CloseIcon />\n          </IconButton>\n        </Box>\n\n        <Divider sx={{ mb: 2 }} /> {/* Separator line */}\n\n        {/* Scrollable content area */}\n        <Box sx={{ flexGrow: 1, overflowY: 'auto' }}>\n          {children}\n        </Box>\n      </Box>\n    </Drawer>\n  );\n});\n\nexport default Flyout;\n"],"names":["React","Flyout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,SAASA,eAAM,WAAwC,SAASC,QACpE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,OAAO;AAAA;AAAA,EACP,SAAS;AACX,GACA,KACA;AAEA,QAAM,iBAAiB,CAAC,eAAmC;AACzD,UAAM,iBAAiB;AACvB,YAAQ,YAAA;AAAA,MACN,KAAK;AACH,eAAO,KAAK,MAAM,MAAM,cAAc;AAAA;AAAA,MACxC,KAAK;AACH,eAAO,KAAK,MAAM,MAAM,cAAc;AAAA;AAAA,MACxC,KAAK;AACH,eAAO,KAAK,MAAM,MAAM,cAAc;AAAA;AAAA,MACxC;AACE,eAAO,KAAK,MAAM,MAAM,cAAc;AAAA,IAAA;AAAA,EAE5C;AAGA,QAAM,kBAAkB,eAAe,IAAI;AAG3C,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,WAAW,UAAU,WAAW,SAAS;AAC3C,aAAO,EAAE,OAAO,gBAAA;AAAA,IAClB,OAAO;AAEL,aAAO,EAAE,QAAgB,OAAO,OAAA;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,QAAQ,iBAAiB,MAAM,CAAC;AAEpC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,sBAAsB;AAAA,MACtB,YAAY;AAAA;AAAA,QAEV,aAAa;AAAA,MAAA;AAAA,MAGf,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,iCACC,eADD;AAAA;AAAA,YAEF,SAAS;AAAA,YACT,eAAe;AAAA,YACf,GAAG;AAAA;AAAA,YACH,iBAAiB,CAAC,UAAU,MAAM,QAAQ,WAAW;AAAA;AAAA,YACrD,OAAO,CAAC,UAAU,MAAM,QAAQ,KAAK;AAAA;AAAA,YACrC,QAAQ;AAAA;AAAA,UAAA;AAAA,UAEV,MAAK;AAAA,UAGL,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI;AAAA,kBACF,SAAS;AAAA,kBACT,gBAAgB;AAAA,kBAChB,YAAY;AAAA,kBACZ,IAAI;AAAA;AAAA,kBACJ,YAAY;AAAA;AAAA,gBAAA;AAAA,gBAGb,UAAA;AAAA,kBAAA,SACC,oBAAC,YAAA,EAAW,SAAQ,MAAK,WAAU,OAAM,IAAI,EAAE,YAAY,OAAA,GACxD,UAAA,MAAA,CACH;AAAA,kBAEF,oBAAC,YAAA,EAAW,SAAS,SAAS,IAAI,EAAE,IAAI,OAAA,GACtC,UAAA,oBAAC,WAAA,CAAA,CAAU,EAAA,CACb;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,gCAGD,SAAA,EAAQ,IAAI,EAAE,IAAI,KAAK;AAAA,YAAE;AAAA,YAG1B,oBAAC,OAAI,IAAI,EAAE,UAAU,GAAG,WAAW,OAAA,GAChC,SAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN,CAAC;"}

package/chunks/Flyout-CVH3IASy.cjs

@@ -0,0 +1,117 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const CloseIcon = require("@mui/icons-material/Close");
+const Flyout = React.forwardRef(function Flyout2({
+  open,
+  onClose,
+  title,
+  anchor = "right",
+  children,
+  size = "medium",
+  // Default size: 'medium'
+  height = "auto"
+}, ref) {
+  const getWidthBySize = (flyoutSize) => {
+    const baseMultiplier = 1.15;
+    switch (flyoutSize) {
+      case "small":
+        return Math.round(300 * baseMultiplier);
+      // ~345px
+      case "medium":
+        return Math.round(450 * baseMultiplier);
+      // ~518px (rounded)
+      case "large":
+        return Math.round(600 * baseMultiplier);
+      // ~690px
+      default:
+        return Math.round(450 * baseMultiplier);
+    }
+  };
+  const calculatedWidth = getWidthBySize(size);
+  const contentStyle = React.useMemo(() => {
+    if (anchor === "left" || anchor === "right") {
+      return { width: calculatedWidth };
+    } else {
+      return { height, width: "100%" };
+    }
+  }, [anchor, calculatedWidth, height]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Drawer,
+    {
+      ref,
+      anchor,
+      open,
+      onClose,
+      disableEscapeKeyDown: false,
+      ModalProps: {
+        // Keep mounted for better performance if content is complex or needs to retain state
+        keepMounted: true
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        material.Box,
+        {
+          sx: __spreadProps(__spreadValues({}, contentStyle), {
+            // Apply calculated width/height
+            display: "flex",
+            flexDirection: "column",
+            p: 2,
+            // Padding around the content
+            backgroundColor: (theme) => theme.palette.background.paper,
+            // Use theme background color
+            color: (theme) => theme.palette.text.primary,
+            // Use theme text color
+            height: "100%"
+            // Ensure the main container of the Drawer takes full height
+          }),
+          role: "presentation",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Box,
+              {
+                sx: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  mb: 2,
+                  // Margin bottom for separation from content
+                  flexShrink: 0
+                  // Prevent the header from shrinking when content scrolls
+                },
+                children: [
+                  title && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", component: "div", sx: { fontWeight: "bold" }, children: title }),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: onClose, sx: { ml: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { sx: { mb: 2 } }),
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { flexGrow: 1, overflowY: "auto" }, children })
+          ]
+        }
+      )
+    }
+  );
+});
+exports.Flyout = Flyout;
+//# sourceMappingURL=Flyout-CVH3IASy.cjs.map

package/chunks/Flyout-CVH3IASy.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flyout-CVH3IASy.cjs","sources":["../../src/components/Flyout/Flyout.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport {\n  Box,\n  Typography,\n  IconButton,\n  Divider,\n  Drawer,\n  List,\n  ListItem,\n  ListItemText,\n  TextField,\n  Button,\n} from '@mui/material';\nimport CloseIcon from '@mui/icons-material/Close';\n\n// Define the size types for the Flyout\ntype FlyoutSize = 'small' | 'medium' | 'large';\n\n// Define the props for the Flyout component\nexport interface FlyoutProps {\n  open: boolean;\n  onClose: () => void;\n  title?: string;\n  anchor?: 'left' | 'top' | 'right' | 'bottom';\n  children: React.ReactNode;\n  size?: FlyoutSize; // New prop for predefined size\n  height?: string | number; // Allows custom height for top/bottom anchors\n}\n\nconst Flyout = React.forwardRef<HTMLDivElement, FlyoutProps>(function Flyout(\n  {\n    open,\n    onClose,\n    title,\n    anchor = 'right',\n    children,\n    size = 'medium', // Default size: 'medium'\n    height = 'auto',\n  },\n  ref,\n) {\n  // Mapping of predefined sizes to pixel widths\n  const getWidthBySize = (flyoutSize: FlyoutSize): number => {\n    const baseMultiplier = 1.15; // 15% larger than base\n    switch (flyoutSize) {\n      case 'small':\n        return Math.round(300 * baseMultiplier); // ~345px\n      case 'medium':\n        return Math.round(450 * baseMultiplier); // ~518px (rounded)\n      case 'large':\n        return Math.round(600 * baseMultiplier); // ~690px\n      default:\n        return Math.round(450 * baseMultiplier); // Fallback, ~518px\n    }\n  };\n\n  // Calculate width based on size prop for left/right anchors\n  const calculatedWidth = getWidthBySize(size);\n\n  // Determine the style for the content box based on anchor\n  const contentStyle = useMemo(() => {\n    if (anchor === 'left' || anchor === 'right') {\n      return { width: calculatedWidth }; // Use the calculated width\n    } else {\n      // For 'top' or 'bottom' anchors, width is 100% and height is controlled\n      return { height: height, width: '100%' };\n    }\n  }, [anchor, calculatedWidth, height]);\n\n  return (\n    <Drawer\n      ref={ref}\n      anchor={anchor}\n      open={open}\n      onClose={onClose}\n      // Allows closing with Escape key, but prevents closing by clicking outside if ModalProps.disableBackdropClick is true\n      disableEscapeKeyDown={false}\n      ModalProps={{\n        // Keep mounted for better performance if content is complex or needs to retain state\n        keepMounted: true,\n      }}\n    >\n      <Box\n        sx={{\n          ...contentStyle, // Apply calculated width/height\n          display: 'flex',\n          flexDirection: 'column',\n          p: 2, // Padding around the content\n          backgroundColor: (theme) => theme.palette.background.paper, // Use theme background color\n          color: (theme) => theme.palette.text.primary, // Use theme text color\n          height: '100%', // Ensure the main container of the Drawer takes full height\n        }}\n        role=\"presentation\" // ARIA role for accessibility\n      >\n        {/* Header section with title and close button */}\n        <Box\n          sx={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n            mb: 2, // Margin bottom for separation from content\n            flexShrink: 0, // Prevent the header from shrinking when content scrolls\n          }}\n        >\n          {title && (\n            <Typography variant=\"h6\" component=\"div\" sx={{ fontWeight: 'bold' }}>\n              {title}\n            </Typography>\n          )}\n          <IconButton onClick={onClose} sx={{ ml: 'auto' }}>\n            <CloseIcon />\n          </IconButton>\n        </Box>\n\n        <Divider sx={{ mb: 2 }} /> {/* Separator line */}\n\n        {/* Scrollable content area */}\n        <Box sx={{ flexGrow: 1, overflowY: 'auto' }}>\n          {children}\n        </Box>\n      </Box>\n    </Drawer>\n  );\n});\n\nexport default Flyout;\n"],"names":["Flyout","useMemo","jsx","Drawer","jsxs","Box","Typography","IconButton","Divider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,SAAS,MAAM,WAAwC,SAASA,QACpE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,OAAO;AAAA;AAAA,EACP,SAAS;AACX,GACA,KACA;AAEA,QAAM,iBAAiB,CAAC,eAAmC;AACzD,UAAM,iBAAiB;AACvB,YAAQ,YAAA;AAAA,MACN,KAAK;AACH,eAAO,KAAK,MAAM,MAAM,cAAc;AAAA;AAAA,MACxC,KAAK;AACH,eAAO,KAAK,MAAM,MAAM,cAAc;AAAA;AAAA,MACxC,KAAK;AACH,eAAO,KAAK,MAAM,MAAM,cAAc;AAAA;AAAA,MACxC;AACE,eAAO,KAAK,MAAM,MAAM,cAAc;AAAA,IAAA;AAAA,EAE5C;AAGA,QAAM,kBAAkB,eAAe,IAAI;AAG3C,QAAM,eAAeC,MAAAA,QAAQ,MAAM;AACjC,QAAI,WAAW,UAAU,WAAW,SAAS;AAC3C,aAAO,EAAE,OAAO,gBAAA;AAAA,IAClB,OAAO;AAEL,aAAO,EAAE,QAAgB,OAAO,OAAA;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,QAAQ,iBAAiB,MAAM,CAAC;AAEpC,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,sBAAsB;AAAA,MACtB,YAAY;AAAA;AAAA,QAEV,aAAa;AAAA,MAAA;AAAA,MAGf,UAAAC,2BAAAA;AAAAA,QAACC,SAAAA;AAAAA,QAAA;AAAA,UACC,IAAI,iCACC,eADD;AAAA;AAAA,YAEF,SAAS;AAAA,YACT,eAAe;AAAA,YACf,GAAG;AAAA;AAAA,YACH,iBAAiB,CAAC,UAAU,MAAM,QAAQ,WAAW;AAAA;AAAA,YACrD,OAAO,CAAC,UAAU,MAAM,QAAQ,KAAK;AAAA;AAAA,YACrC,QAAQ;AAAA;AAAA,UAAA;AAAA,UAEV,MAAK;AAAA,UAGL,UAAA;AAAA,YAAAD,2BAAAA;AAAAA,cAACC,SAAAA;AAAAA,cAAA;AAAA,gBACC,IAAI;AAAA,kBACF,SAAS;AAAA,kBACT,gBAAgB;AAAA,kBAChB,YAAY;AAAA,kBACZ,IAAI;AAAA;AAAA,kBACJ,YAAY;AAAA;AAAA,gBAAA;AAAA,gBAGb,UAAA;AAAA,kBAAA,SACCH,2BAAAA,IAACI,SAAAA,YAAA,EAAW,SAAQ,MAAK,WAAU,OAAM,IAAI,EAAE,YAAY,OAAA,GACxD,UAAA,MAAA,CACH;AAAA,kBAEFJ,2BAAAA,IAACK,SAAAA,YAAA,EAAW,SAAS,SAAS,IAAI,EAAE,IAAI,OAAA,GACtC,UAAAL,2BAAAA,IAAC,WAAA,CAAA,CAAU,EAAA,CACb;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,2CAGDM,SAAAA,SAAA,EAAQ,IAAI,EAAE,IAAI,KAAK;AAAA,YAAE;AAAA,YAG1BN,+BAACG,SAAAA,OAAI,IAAI,EAAE,UAAU,GAAG,WAAW,OAAA,GAChC,SAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN,CAAC;;"}