@soyfri/shared-library 2.0.0-beta.13 → 2.0.0-beta.16

package/components/Icon/Icon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.cjs","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React, { type ReactNode, useMemo } from 'react';\nimport { Badge, styled } from '@mui/material';\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface IconProps {\n  /**\n   * Contenido icono. Modo legacy: acepta un elemento MUI o SVG ya armado.\n   * Si se usa junto con `path` o `url`, `children` tiene prioridad.\n   */\n  children?: ReactNode;\n  /**\n   * Ruta SVG inline (el contenido del atributo `d` de un `<path>`). Útil para\n   * los iconos custom de Metronic que vienen como strings de path.\n   *\n   * ```tsx\n   * <Icon path=\"M12 2L2 22h20L12 2z\" />\n   * ```\n   *\n   * Si el string contiene el tag `<svg>` completo (no solo el `d`), también\n   * se soporta y se inyecta tal cual via `dangerouslySetInnerHTML`.\n   */\n  path?: string;\n  /**\n   * URL a un archivo `.svg` (asset local o remoto). Se renderiza vía `<img>`.\n   *\n   * ```tsx\n   * <Icon url=\"/assets/icons/custom-warning.svg\" />\n   * ```\n   */\n  url?: string;\n  /**\n   * Alt text cuando se usa `url`. Default: `\"icon\"`.\n   */\n  alt?: string;\n  /**\n   * ViewBox cuando se usa `path`. Default: `\"0 0 24 24\"`. Ignorado si `path`\n   * ya viene como `<svg>` completo.\n   */\n  viewBox?: string;\n  color?: string;\n  outlined?: boolean;\n  spin?: boolean;\n  badge?: string | number;\n  badgeColor?: 'primary' | 'secondary' | 'error';\n  badgePosition?: {\n    vertical: 'top' | 'bottom';\n    horizontal: 'right' | 'left';\n  };\n  badgeSize?: 'small' | 'medium' | 'large';\n  size?: IconSize;\n  black?: boolean;\n  white?: boolean;\n  className?: string;\n}\n\nconst sizeMap: Record<IconSize, number> = {\n  xs: 18,\n  sm: 24,\n  md: 36,\n  lg: 48,\n  xl: 64,\n};\n\nconst StyledIcon = styled('span')<{\n  color?: string;\n  fontSize?: number;\n  spin?: boolean;\n  outlined?: boolean;\n}>(({ color, fontSize, spin, outlined }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: color,\n  fontSize: fontSize,\n  width: fontSize,\n  height: fontSize,\n  animation: spin ? 'spin 1s linear infinite' : undefined,\n  border: outlined ? '1px solid currentColor' : undefined,\n  borderRadius: '50%',\n  padding: outlined ? 4 : 0,\n  '@keyframes spin': {\n    '0%': { transform: 'rotate(0deg)' },\n    '100%': { transform: 'rotate(360deg)' },\n  },\n  '& svg': {\n    width: '100%',\n    height: '100%',\n    fill: 'currentColor',\n    display: 'block',\n  },\n  '& img': {\n    width: '100%',\n    height: '100%',\n    display: 'block',\n  },\n}));\n\nexport const Icon: React.FC<IconProps> = ({\n  children,\n  path,\n  url,\n  alt = 'icon',\n  viewBox = '0 0 24 24',\n  color = 'var(--primary-color)',\n  outlined = false,\n  spin = false,\n  badge,\n  badgeColor = 'primary',\n  badgePosition = { vertical: 'bottom', horizontal: 'right' },\n  size = 'sm',\n  black,\n  white,\n  className,\n}) => {\n  const finalColor = useMemo(() => {\n    if (white) return 'white';\n    if (black) return 'black';\n    return color;\n  }, [color, white, black]);\n\n  const iconSize = sizeMap[size];\n\n  // Resolver el contenido según la prop activa.\n  const content = useMemo(() => {\n    if (children) return children;\n\n    if (path) {\n      const trimmed = path.trim();\n      // Si es un SVG completo (empieza con <svg), lo inyectamos tal cual.\n      if (trimmed.startsWith('<svg')) {\n        return <span dangerouslySetInnerHTML={{ __html: trimmed }} />;\n      }\n      // Si no, asumimos que es el atributo `d` de un <path>.\n      return (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox={viewBox}\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n        >\n          <path d={trimmed} />\n        </svg>\n      );\n    }\n\n    if (url) {\n      return <img src={url} alt={alt} />;\n    }\n\n    return null;\n  }, [children, path, url, alt, viewBox]);\n\n  return (\n    <Badge\n      badgeContent={badge}\n      color={badgeColor}\n      anchorOrigin={badgePosition}\n      invisible={badge === undefined}\n      sx={{ '.MuiBadge-badge': { transform: 'scale(1)' } }}\n    >\n      <StyledIcon\n        color={finalColor}\n        fontSize={iconSize}\n        spin={spin}\n        outlined={outlined}\n        className={`hsi-icon ${className || ''}`}\n      >\n        {content}\n      </StyledIcon>\n    </Badge>\n  );\n};\n\nexport default Icon;\n"],"names":["styled","useMemo","jsx","Badge"],"mappings":";;;;;;AAwDA,MAAM,UAAoC;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,aAAaA,SAAAA,OAAO,MAAM,EAK7B,CAAC,EAAE,OAAO,UAAU,MAAM,gBAAgB;AAAA,EAC3C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW,OAAO,4BAA4B;AAAA,EAC9C,QAAQ,WAAW,2BAA2B;AAAA,EAC9C,cAAc;AAAA,EACd,SAAS,WAAW,IAAI;AAAA,EACxB,mBAAmB;AAAA,IACjB,MAAM,EAAE,WAAW,eAAA;AAAA,IACnB,QAAQ,EAAE,WAAW,iBAAA;AAAA,EAAiB;AAAA,EAExC,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA,EAEX,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EAAA;AAEb,EAAE;AAEK,MAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB,EAAE,UAAU,UAAU,YAAY,QAAA;AAAA,EAClD,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,aAAaC,MAAAA,QAAQ,MAAM;AAC/B,QAAI,MAAO,QAAO;AAClB,QAAI,MAAO,QAAO;AAClB,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,OAAO,KAAK,CAAC;AAExB,QAAM,WAAW,QAAQ,IAAI;AAG7B,QAAM,UAAUA,MAAAA,QAAQ,MAAM;AAC5B,QAAI,SAAU,QAAO;AAErB,QAAI,MAAM;AACR,YAAM,UAAU,KAAK,KAAA;AAErB,UAAI,QAAQ,WAAW,MAAM,GAAG;AAC9B,8CAAQ,QAAA,EAAK,yBAAyB,EAAE,QAAQ,WAAW;AAAA,MAC7D;AAEA,aACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UAEZ,UAAAA,2BAAAA,IAAC,QAAA,EAAK,GAAG,QAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAGxB;AAEA,QAAI,KAAK;AACP,aAAOA,2BAAAA,IAAC,OAAA,EAAI,KAAK,KAAK,IAAA,CAAU;AAAA,IAClC;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,MAAM,KAAK,KAAK,OAAO,CAAC;AAEtC,SACEA,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP,cAAc;AAAA,MACd,WAAW,UAAU;AAAA,MACrB,IAAI,EAAE,mBAAmB,EAAE,WAAW,aAAW;AAAA,MAEjD,UAAAD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,WAAW,YAAY,aAAa,EAAE;AAAA,UAErC,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"Icon.cjs","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React, { type ReactNode, useMemo } from 'react';\nimport { Badge, styled } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface IconProps {\n  /**\n   * Contenido del icono. Modo legacy: acepta un elemento MUI o SVG ya armado.\n   * Si se usa junto con `path` o `url`, `children` tiene prioridad.\n   */\n  children?: ReactNode;\n  /**\n   * Ruta SVG inline. Acepta dos formatos:\n   * - Solo el valor del atributo `d` de un `<path>` (ej. `\"M12 2L2 22...\"`).\n   * - Un SVG completo (ej. `\"<svg>...</svg>\"`).\n   *\n   * ⚠️ Seguridad: cuando el string empieza con `<svg`, se inyecta vía\n   * `dangerouslySetInnerHTML`. **NUNCA pasar contenido proveniente de input\n   * de usuario o de backends no confiables** — riesgo XSS.\n   */\n  path?: string;\n  /**\n   * URL a un archivo `.svg` (asset local o remoto). Se renderiza vía `<img>`.\n   * El color del icono NO aplica en este modo (limitación de `<img>`).\n   */\n  url?: string;\n  /** Alt text cuando se usa `url`. Default: `\"icon\"`. */\n  alt?: string;\n  /**\n   * ViewBox cuando se usa `path`. Default: `\"0 0 24 24\"`. Ignorado si `path`\n   * ya viene como `<svg>` completo.\n   */\n  viewBox?: string;\n  color?: string;\n  outlined?: boolean;\n  spin?: boolean;\n  badge?: string | number;\n  badgeColor?: 'primary' | 'secondary' | 'error';\n  badgePosition?: {\n    vertical: 'top' | 'bottom';\n    horizontal: 'right' | 'left';\n  };\n  size?: IconSize;\n  black?: boolean;\n  white?: boolean;\n  className?: string;\n  sx?: SxProps<Theme>;\n}\n\nconst sizeMap: Record<IconSize, number> = {\n  xs: 18,\n  sm: 24,\n  md: 36,\n  lg: 48,\n  xl: 64,\n};\n\nconst StyledIcon = styled('span')<{\n  color?: string;\n  fontSize?: number;\n  spin?: boolean;\n  outlined?: boolean;\n}>(({ color, fontSize, spin, outlined }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: color,\n  fontSize: fontSize,\n  width: fontSize,\n  height: fontSize,\n  animation: spin ? 'spin 1s linear infinite' : undefined,\n  border: outlined ? '1px solid currentColor' : undefined,\n  borderRadius: '50%',\n  padding: outlined ? 4 : 0,\n  '@keyframes spin': {\n    '0%': { transform: 'rotate(0deg)' },\n    '100%': { transform: 'rotate(360deg)' },\n  },\n  '& svg': {\n    width: '100%',\n    height: '100%',\n    fill: 'currentColor',\n    display: 'block',\n  },\n  '& img': {\n    width: '100%',\n    height: '100%',\n    display: 'block',\n  },\n}));\n\nexport const Icon: React.FC<IconProps> = ({\n  children,\n  path,\n  url,\n  alt = 'icon',\n  viewBox = '0 0 24 24',\n  color = 'var(--primary-color)',\n  outlined = false,\n  spin = false,\n  badge,\n  badgeColor = 'primary',\n  badgePosition = { vertical: 'bottom', horizontal: 'right' },\n  size = 'sm',\n  black,\n  white,\n  className,\n  sx,\n}) => {\n  const finalColor = white ? 'white' : black ? 'black' : color;\n  const iconSize = sizeMap[size];\n\n  const content = useMemo(() => {\n    if (children) return children;\n\n    if (path) {\n      const trimmed = path.trim();\n      if (trimmed.startsWith('<svg')) {\n        return <span dangerouslySetInnerHTML={{ __html: trimmed }} />;\n      }\n      return (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox={viewBox}\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n        >\n          <path d={trimmed} />\n        </svg>\n      );\n    }\n\n    if (url) {\n      return <img src={url} alt={alt} />;\n    }\n\n    return null;\n  }, [children, path, url, alt, viewBox]);\n\n  return (\n    <Badge\n      badgeContent={badge}\n      color={badgeColor}\n      anchorOrigin={badgePosition}\n      invisible={badge === undefined}\n      sx={{ '.MuiBadge-badge': { transform: 'scale(1)' } }}\n    >\n      <StyledIcon\n        color={finalColor}\n        fontSize={iconSize}\n        spin={spin}\n        outlined={outlined}\n        className={`hsi-icon ${className || ''}`}\n        sx={sx}\n      >\n        {content}\n      </StyledIcon>\n    </Badge>\n  );\n};\n\nexport default Icon;\n"],"names":["styled","useMemo","jsx","Badge"],"mappings":";;;;;AAkDA,MAAM,UAAoC;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,aAAaA,SAAAA,OAAO,MAAM,EAK7B,CAAC,EAAE,OAAO,UAAU,MAAM,gBAAgB;AAAA,EAC3C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW,OAAO,4BAA4B;AAAA,EAC9C,QAAQ,WAAW,2BAA2B;AAAA,EAC9C,cAAc;AAAA,EACd,SAAS,WAAW,IAAI;AAAA,EACxB,mBAAmB;AAAA,IACjB,MAAM,EAAE,WAAW,eAAA;AAAA,IACnB,QAAQ,EAAE,WAAW,iBAAA;AAAA,EAAiB;AAAA,EAExC,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA,EAEX,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EAAA;AAEb,EAAE;AAEK,MAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB,EAAE,UAAU,UAAU,YAAY,QAAA;AAAA,EAClD,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,aAAa,QAAQ,UAAU,QAAQ,UAAU;AACvD,QAAM,WAAW,QAAQ,IAAI;AAE7B,QAAM,UAAUC,MAAAA,QAAQ,MAAM;AAC5B,QAAI,SAAU,QAAO;AAErB,QAAI,MAAM;AACR,YAAM,UAAU,KAAK,KAAA;AACrB,UAAI,QAAQ,WAAW,MAAM,GAAG;AAC9B,8CAAQ,QAAA,EAAK,yBAAyB,EAAE,QAAQ,WAAW;AAAA,MAC7D;AACA,aACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UAEZ,UAAAA,2BAAAA,IAAC,QAAA,EAAK,GAAG,QAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAGxB;AAEA,QAAI,KAAK;AACP,aAAOA,2BAAAA,IAAC,OAAA,EAAI,KAAK,KAAK,IAAA,CAAU;AAAA,IAClC;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,MAAM,KAAK,KAAK,OAAO,CAAC;AAEtC,SACEA,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP,cAAc;AAAA,MACd,WAAW,UAAU;AAAA,MACrB,IAAI,EAAE,mBAAmB,EAAE,WAAW,aAAW;AAAA,MAEjD,UAAAD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,WAAW,YAAY,aAAa,EAAE;AAAA,UACtC;AAAA,UAEC,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;;;"}

package/components/Icon/Icon.d.ts

@@ -1,34 +1,28 @@
 import { default as React, ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
 export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface IconProps {
     /**
-     * Contenido icono. Modo legacy: acepta un elemento MUI o SVG ya armado.
+     * Contenido del icono. Modo legacy: acepta un elemento MUI o SVG ya armado.
      * Si se usa junto con `path` o `url`, `children` tiene prioridad.
      */
     children?: ReactNode;
     /**
-     * Ruta SVG inline (el contenido del atributo `d` de un `<path>`). Útil para
-     * los iconos custom de Metronic que vienen como strings de path.
+     * Ruta SVG inline. Acepta dos formatos:
+     * - Solo el valor del atributo `d` de un `<path>` (ej. `"M12 2L2 22..."`).
+     * - Un SVG completo (ej. `"<svg>...</svg>"`).
      *
-     * ```tsx
-     * <Icon path="M12 2L2 22h20L12 2z" />
-     * ```
-     *
-     * Si el string contiene el tag `<svg>` completo (no solo el `d`), también
-     * se soporta y se inyecta tal cual via `dangerouslySetInnerHTML`.
+     * ⚠️ Seguridad: cuando el string empieza con `<svg`, se inyecta vía
+     * `dangerouslySetInnerHTML`. **NUNCA pasar contenido proveniente de input
+     * de usuario o de backends no confiables** — riesgo XSS.
      */
     path?: string;
     /**
      * URL a un archivo `.svg` (asset local o remoto). Se renderiza vía `<img>`.
-     *
-     * ```tsx
-     * <Icon url="/assets/icons/custom-warning.svg" />
-     * ```
+     * El color del icono NO aplica en este modo (limitación de `<img>`).
      */
     url?: string;
-    /**
-     * Alt text cuando se usa `url`. Default: `"icon"`.
-     */
+    /** Alt text cuando se usa `url`. Default: `"icon"`. */
     alt?: string;
     /**
      * ViewBox cuando se usa `path`. Default: `"0 0 24 24"`. Ignorado si `path`
@@ -44,11 +38,11 @@ export interface IconProps {
         vertical: 'top' | 'bottom';
         horizontal: 'right' | 'left';
     };
-    badgeSize?: 'small' | 'medium' | 'large';
     size?: IconSize;
     black?: boolean;
     white?: boolean;
     className?: string;
+    sx?: SxProps<Theme>;
 }
 export declare const Icon: React.FC<IconProps>;
 export default Icon;

package/components/Icon/Icon.js

@@ -1,4 +1,3 @@
-import '../../styles.css';/* empty css                    */
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { styled, Badge } from "@mui/material";
@@ -52,13 +51,10 @@ const Icon = ({
   size = "sm",
   black,
   white,
-  className
+  className,
+  sx
 }) => {
-  const finalColor = useMemo(() => {
-    if (white) return "white";
-    if (black) return "black";
-    return color;
-  }, [color, white, black]);
+  const finalColor = white ? "white" : black ? "black" : color;
   const iconSize = sizeMap[size];
   const content = useMemo(() => {
     if (children) return children;
@@ -99,6 +95,7 @@ const Icon = ({
           spin,
           outlined,
           className: `hsi-icon ${className || ""}`,
+          sx,
           children: content
         }
       )
@@ -106,6 +103,7 @@ const Icon = ({
   );
 };
 export {
-  Icon
+  Icon,
+  Icon as default
 };
 //# sourceMappingURL=Icon.js.map

package/components/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React, { type ReactNode, useMemo } from 'react';\nimport { Badge, styled } from '@mui/material';\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface IconProps {\n  /**\n   * Contenido icono. Modo legacy: acepta un elemento MUI o SVG ya armado.\n   * Si se usa junto con `path` o `url`, `children` tiene prioridad.\n   */\n  children?: ReactNode;\n  /**\n   * Ruta SVG inline (el contenido del atributo `d` de un `<path>`). Útil para\n   * los iconos custom de Metronic que vienen como strings de path.\n   *\n   * ```tsx\n   * <Icon path=\"M12 2L2 22h20L12 2z\" />\n   * ```\n   *\n   * Si el string contiene el tag `<svg>` completo (no solo el `d`), también\n   * se soporta y se inyecta tal cual via `dangerouslySetInnerHTML`.\n   */\n  path?: string;\n  /**\n   * URL a un archivo `.svg` (asset local o remoto). Se renderiza vía `<img>`.\n   *\n   * ```tsx\n   * <Icon url=\"/assets/icons/custom-warning.svg\" />\n   * ```\n   */\n  url?: string;\n  /**\n   * Alt text cuando se usa `url`. Default: `\"icon\"`.\n   */\n  alt?: string;\n  /**\n   * ViewBox cuando se usa `path`. Default: `\"0 0 24 24\"`. Ignorado si `path`\n   * ya viene como `<svg>` completo.\n   */\n  viewBox?: string;\n  color?: string;\n  outlined?: boolean;\n  spin?: boolean;\n  badge?: string | number;\n  badgeColor?: 'primary' | 'secondary' | 'error';\n  badgePosition?: {\n    vertical: 'top' | 'bottom';\n    horizontal: 'right' | 'left';\n  };\n  badgeSize?: 'small' | 'medium' | 'large';\n  size?: IconSize;\n  black?: boolean;\n  white?: boolean;\n  className?: string;\n}\n\nconst sizeMap: Record<IconSize, number> = {\n  xs: 18,\n  sm: 24,\n  md: 36,\n  lg: 48,\n  xl: 64,\n};\n\nconst StyledIcon = styled('span')<{\n  color?: string;\n  fontSize?: number;\n  spin?: boolean;\n  outlined?: boolean;\n}>(({ color, fontSize, spin, outlined }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: color,\n  fontSize: fontSize,\n  width: fontSize,\n  height: fontSize,\n  animation: spin ? 'spin 1s linear infinite' : undefined,\n  border: outlined ? '1px solid currentColor' : undefined,\n  borderRadius: '50%',\n  padding: outlined ? 4 : 0,\n  '@keyframes spin': {\n    '0%': { transform: 'rotate(0deg)' },\n    '100%': { transform: 'rotate(360deg)' },\n  },\n  '& svg': {\n    width: '100%',\n    height: '100%',\n    fill: 'currentColor',\n    display: 'block',\n  },\n  '& img': {\n    width: '100%',\n    height: '100%',\n    display: 'block',\n  },\n}));\n\nexport const Icon: React.FC<IconProps> = ({\n  children,\n  path,\n  url,\n  alt = 'icon',\n  viewBox = '0 0 24 24',\n  color = 'var(--primary-color)',\n  outlined = false,\n  spin = false,\n  badge,\n  badgeColor = 'primary',\n  badgePosition = { vertical: 'bottom', horizontal: 'right' },\n  size = 'sm',\n  black,\n  white,\n  className,\n}) => {\n  const finalColor = useMemo(() => {\n    if (white) return 'white';\n    if (black) return 'black';\n    return color;\n  }, [color, white, black]);\n\n  const iconSize = sizeMap[size];\n\n  // Resolver el contenido según la prop activa.\n  const content = useMemo(() => {\n    if (children) return children;\n\n    if (path) {\n      const trimmed = path.trim();\n      // Si es un SVG completo (empieza con <svg), lo inyectamos tal cual.\n      if (trimmed.startsWith('<svg')) {\n        return <span dangerouslySetInnerHTML={{ __html: trimmed }} />;\n      }\n      // Si no, asumimos que es el atributo `d` de un <path>.\n      return (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox={viewBox}\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n        >\n          <path d={trimmed} />\n        </svg>\n      );\n    }\n\n    if (url) {\n      return <img src={url} alt={alt} />;\n    }\n\n    return null;\n  }, [children, path, url, alt, viewBox]);\n\n  return (\n    <Badge\n      badgeContent={badge}\n      color={badgeColor}\n      anchorOrigin={badgePosition}\n      invisible={badge === undefined}\n      sx={{ '.MuiBadge-badge': { transform: 'scale(1)' } }}\n    >\n      <StyledIcon\n        color={finalColor}\n        fontSize={iconSize}\n        spin={spin}\n        outlined={outlined}\n        className={`hsi-icon ${className || ''}`}\n      >\n        {content}\n      </StyledIcon>\n    </Badge>\n  );\n};\n\nexport default Icon;\n"],"names":[],"mappings":";;;;AAwDA,MAAM,UAAoC;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,aAAa,OAAO,MAAM,EAK7B,CAAC,EAAE,OAAO,UAAU,MAAM,gBAAgB;AAAA,EAC3C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW,OAAO,4BAA4B;AAAA,EAC9C,QAAQ,WAAW,2BAA2B;AAAA,EAC9C,cAAc;AAAA,EACd,SAAS,WAAW,IAAI;AAAA,EACxB,mBAAmB;AAAA,IACjB,MAAM,EAAE,WAAW,eAAA;AAAA,IACnB,QAAQ,EAAE,WAAW,iBAAA;AAAA,EAAiB;AAAA,EAExC,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA,EAEX,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EAAA;AAEb,EAAE;AAEK,MAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB,EAAE,UAAU,UAAU,YAAY,QAAA;AAAA,EAClD,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,MAAO,QAAO;AAClB,QAAI,MAAO,QAAO;AAClB,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,OAAO,KAAK,CAAC;AAExB,QAAM,WAAW,QAAQ,IAAI;AAG7B,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,SAAU,QAAO;AAErB,QAAI,MAAM;AACR,YAAM,UAAU,KAAK,KAAA;AAErB,UAAI,QAAQ,WAAW,MAAM,GAAG;AAC9B,mCAAQ,QAAA,EAAK,yBAAyB,EAAE,QAAQ,WAAW;AAAA,MAC7D;AAEA,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UAEZ,UAAA,oBAAC,QAAA,EAAK,GAAG,QAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAGxB;AAEA,QAAI,KAAK;AACP,aAAO,oBAAC,OAAA,EAAI,KAAK,KAAK,IAAA,CAAU;AAAA,IAClC;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,MAAM,KAAK,KAAK,OAAO,CAAC;AAEtC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP,cAAc;AAAA,MACd,WAAW,UAAU;AAAA,MACrB,IAAI,EAAE,mBAAmB,EAAE,WAAW,aAAW;AAAA,MAEjD,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,WAAW,YAAY,aAAa,EAAE;AAAA,UAErC,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Icon.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React, { type ReactNode, useMemo } from 'react';\nimport { Badge, styled } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface IconProps {\n  /**\n   * Contenido del icono. Modo legacy: acepta un elemento MUI o SVG ya armado.\n   * Si se usa junto con `path` o `url`, `children` tiene prioridad.\n   */\n  children?: ReactNode;\n  /**\n   * Ruta SVG inline. Acepta dos formatos:\n   * - Solo el valor del atributo `d` de un `<path>` (ej. `\"M12 2L2 22...\"`).\n   * - Un SVG completo (ej. `\"<svg>...</svg>\"`).\n   *\n   * ⚠️ Seguridad: cuando el string empieza con `<svg`, se inyecta vía\n   * `dangerouslySetInnerHTML`. **NUNCA pasar contenido proveniente de input\n   * de usuario o de backends no confiables** — riesgo XSS.\n   */\n  path?: string;\n  /**\n   * URL a un archivo `.svg` (asset local o remoto). Se renderiza vía `<img>`.\n   * El color del icono NO aplica en este modo (limitación de `<img>`).\n   */\n  url?: string;\n  /** Alt text cuando se usa `url`. Default: `\"icon\"`. */\n  alt?: string;\n  /**\n   * ViewBox cuando se usa `path`. Default: `\"0 0 24 24\"`. Ignorado si `path`\n   * ya viene como `<svg>` completo.\n   */\n  viewBox?: string;\n  color?: string;\n  outlined?: boolean;\n  spin?: boolean;\n  badge?: string | number;\n  badgeColor?: 'primary' | 'secondary' | 'error';\n  badgePosition?: {\n    vertical: 'top' | 'bottom';\n    horizontal: 'right' | 'left';\n  };\n  size?: IconSize;\n  black?: boolean;\n  white?: boolean;\n  className?: string;\n  sx?: SxProps<Theme>;\n}\n\nconst sizeMap: Record<IconSize, number> = {\n  xs: 18,\n  sm: 24,\n  md: 36,\n  lg: 48,\n  xl: 64,\n};\n\nconst StyledIcon = styled('span')<{\n  color?: string;\n  fontSize?: number;\n  spin?: boolean;\n  outlined?: boolean;\n}>(({ color, fontSize, spin, outlined }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: color,\n  fontSize: fontSize,\n  width: fontSize,\n  height: fontSize,\n  animation: spin ? 'spin 1s linear infinite' : undefined,\n  border: outlined ? '1px solid currentColor' : undefined,\n  borderRadius: '50%',\n  padding: outlined ? 4 : 0,\n  '@keyframes spin': {\n    '0%': { transform: 'rotate(0deg)' },\n    '100%': { transform: 'rotate(360deg)' },\n  },\n  '& svg': {\n    width: '100%',\n    height: '100%',\n    fill: 'currentColor',\n    display: 'block',\n  },\n  '& img': {\n    width: '100%',\n    height: '100%',\n    display: 'block',\n  },\n}));\n\nexport const Icon: React.FC<IconProps> = ({\n  children,\n  path,\n  url,\n  alt = 'icon',\n  viewBox = '0 0 24 24',\n  color = 'var(--primary-color)',\n  outlined = false,\n  spin = false,\n  badge,\n  badgeColor = 'primary',\n  badgePosition = { vertical: 'bottom', horizontal: 'right' },\n  size = 'sm',\n  black,\n  white,\n  className,\n  sx,\n}) => {\n  const finalColor = white ? 'white' : black ? 'black' : color;\n  const iconSize = sizeMap[size];\n\n  const content = useMemo(() => {\n    if (children) return children;\n\n    if (path) {\n      const trimmed = path.trim();\n      if (trimmed.startsWith('<svg')) {\n        return <span dangerouslySetInnerHTML={{ __html: trimmed }} />;\n      }\n      return (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox={viewBox}\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n        >\n          <path d={trimmed} />\n        </svg>\n      );\n    }\n\n    if (url) {\n      return <img src={url} alt={alt} />;\n    }\n\n    return null;\n  }, [children, path, url, alt, viewBox]);\n\n  return (\n    <Badge\n      badgeContent={badge}\n      color={badgeColor}\n      anchorOrigin={badgePosition}\n      invisible={badge === undefined}\n      sx={{ '.MuiBadge-badge': { transform: 'scale(1)' } }}\n    >\n      <StyledIcon\n        color={finalColor}\n        fontSize={iconSize}\n        spin={spin}\n        outlined={outlined}\n        className={`hsi-icon ${className || ''}`}\n        sx={sx}\n      >\n        {content}\n      </StyledIcon>\n    </Badge>\n  );\n};\n\nexport default Icon;\n"],"names":[],"mappings":";;;AAkDA,MAAM,UAAoC;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,aAAa,OAAO,MAAM,EAK7B,CAAC,EAAE,OAAO,UAAU,MAAM,gBAAgB;AAAA,EAC3C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW,OAAO,4BAA4B;AAAA,EAC9C,QAAQ,WAAW,2BAA2B;AAAA,EAC9C,cAAc;AAAA,EACd,SAAS,WAAW,IAAI;AAAA,EACxB,mBAAmB;AAAA,IACjB,MAAM,EAAE,WAAW,eAAA;AAAA,IACnB,QAAQ,EAAE,WAAW,iBAAA;AAAA,EAAiB;AAAA,EAExC,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA,EAEX,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EAAA;AAEb,EAAE;AAEK,MAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB,EAAE,UAAU,UAAU,YAAY,QAAA;AAAA,EAClD,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,aAAa,QAAQ,UAAU,QAAQ,UAAU;AACvD,QAAM,WAAW,QAAQ,IAAI;AAE7B,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,SAAU,QAAO;AAErB,QAAI,MAAM;AACR,YAAM,UAAU,KAAK,KAAA;AACrB,UAAI,QAAQ,WAAW,MAAM,GAAG;AAC9B,mCAAQ,QAAA,EAAK,yBAAyB,EAAE,QAAQ,WAAW;AAAA,MAC7D;AACA,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UAEZ,UAAA,oBAAC,QAAA,EAAK,GAAG,QAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAGxB;AAEA,QAAI,KAAK;AACP,aAAO,oBAAC,OAAA,EAAI,KAAK,KAAK,IAAA,CAAU;AAAA,IAClC;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,MAAM,KAAK,KAAK,OAAO,CAAC;AAEtC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP,cAAc;AAAA,MACd,WAAW,UAAU;AAAA,MACrB,IAAI,EAAE,mBAAmB,EAAE,WAAW,aAAW;AAAA,MAEjD,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,WAAW,YAAY,aAAa,EAAE;AAAA,UACtC;AAAA,UAEC,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}

package/components/Icon/index.d.ts

@@ -1 +1,2 @@
-export { default as Icon } from './Icon';
+export { Icon, default } from './Icon';
+export type { IconProps, IconSize } from './Icon';

package/components/Icon.d.ts

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

package/components/Input/Input.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Input = require("../../Input-DI0jfq5X.cjs");
+const Input = require("../../Input-jYapjJYM.cjs");
 exports.Input = Input.Input;
 exports.default = Input.Input;
 //# sourceMappingURL=Input.cjs.map

package/components/Input/Input.d.ts

@@ -1,11 +1,12 @@
 import { TextFieldProps } from '@mui/material';
-import { Control, RegisterOptions } from 'react-hook-form';
+import { RegisterOptions } from 'react-hook-form';
 export type InputType = 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'month' | 'week' | 'time' | 'color';
 export type LabelPosition = 'outside' | 'floating';
 export interface BaseInputProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'type'> {
     type?: InputType;
     min?: number;
     max?: number;
+    maxLength?: number;
     /** Border radius del input. Default: 10 */
     borderRadius?: number | string;
     /** "outside" = label arriba del campo (default). "floating" = label clásico MUI dentro del borde */
@@ -20,8 +21,14 @@ export interface BaseInputProps extends Omit<TextFieldProps, 'value' | 'onChange
 }
 export interface RHFInputProps extends BaseInputProps {
     name: string;
-    control: Control<any>;
+    control: any;
     validation?: RegisterOptions;
+    /**
+     * Side-effect que corre después de que RHF actualiza el form state.
+     * Útil para cascadas entre campos (ej. reset de municipio al cambiar
+     * departamento). NO reemplaza al handler de RHF.
+     */
+    onValueChange?: (value: string | number) => void;
     value?: never;
     onChange?: never;
 }

package/components/Input/Input.helpers.d.ts

@@ -1,6 +1,6 @@
 import { InputHTMLAttributes } from 'react';
 import { TextFieldProps } from '@mui/material';
-import { InputType, LabelPosition } from './Input';
+import { InputType } from './Input';
 /**
  * Convierte el valor raw del evento al tipo apropiado.
  * Para type="number" intenta parsear a número; si falla, devuelve el raw
@@ -9,6 +9,6 @@ import { InputType, LabelPosition } from './Input';
 export declare const parseValue: (raw: string, type: InputType) => string | number;
 /**
  * Construye los slotProps del TextField consolidando htmlInput + inputLabel.
- * Maneja los atributos min/max cuando type="number" y readOnly.
+ * Maneja los atributos min/max cuando type="number", maxLength y readOnly.
  */
-export declare const buildSlotProps: (type: InputType, min: number | undefined, max: number | undefined, customSlotProps: TextFieldProps["slotProps"], customInputProps: InputHTMLAttributes<HTMLInputElement> | undefined, _labelPosition: LabelPosition, readOnly?: boolean) => TextFieldProps["slotProps"];
+export declare const buildSlotProps: (type: InputType, min: number | undefined, max: number | undefined, maxLength: number | undefined, customSlotProps: TextFieldProps["slotProps"], customInputProps: InputHTMLAttributes<HTMLInputElement> | undefined, readOnly?: boolean) => TextFieldProps["slotProps"];

package/components/Input/Input.js

@@ -1,4 +1,4 @@
-import { I, I as I2 } from "../../Input-Cp911l23.js";
+import { I, I as I2 } from "../../Input-rVVhI_wk.js";
 export {
   I as Input,
   I2 as default

package/components/Input/index.d.ts

@@ -1,2 +1,2 @@
 export { Input, default } from './Input';
-export type { InputProps, BaseInputProps, RHFInputProps, ControlledInputProps, InputType, LabelPosition, } from './Input.types';
+export type { InputProps, BaseInputProps, RHFInputProps, ControlledInputProps, InputType, LabelPosition, } from './Input';

package/components/InputGroup/InputGroup.cjs

@@ -18,16 +18,12 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-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 mergeSx = (base, extra) => {
-  if (!extra) return base;
-  const baseArr = Array.isArray(base) ? base : [base];
-  const extraArr = Array.isArray(extra) ? extra : [extra];
-  return [...baseArr, ...extraArr];
-};
+const mergeSx = require("../../mergeSx-Dbccoo_H.cjs");
+const tokens = require("../../tokens-jaWWNk39.cjs");
 const InputGroup = ({
   children,
   sx,
@@ -44,7 +40,7 @@ const InputGroup = ({
     // Respeta el label "outside" de Input/Select: los hijos pierden su marginTop
     // (ver más abajo) y el grupo reserva el mismo espacio arriba para que los
     // labels floten por encima del borde del grupo.
-    marginTop: "14px",
+    marginTop: tokens.LABEL_MARGIN_TOP,
     display: "flex",
     flexDirection: isHorizontal ? "row" : "column",
     alignItems: "stretch",
@@ -61,7 +57,7 @@ const InputGroup = ({
     pointerEvents: disabled ? "none" : "auto",
     // Cancelar el marginTop que Input/Select reservan en labelPosition="outside".
     // El grupo ya lo reservó en su nivel externo.
-    "& .MuiFormControl-root, & > .InputGroup__slot > .MuiTextField-root, & > .InputGroup__slot > .MuiFormControl-root": {
+    "& .MuiFormControl-root, & > [data-input-group-slot] > .MuiTextField-root, & > [data-input-group-slot] > .MuiFormControl-root": {
       marginTop: 0
     },
     // Quitar el borde del notched outline interno: el borde visible es el del
@@ -82,7 +78,7 @@ const InputGroup = ({
       border: "none"
     },
     // Slots: cada hijo vive en un slot neutro que lo centra verticalmente.
-    "& > .InputGroup__slot": __spreadProps(__spreadValues({
+    "& > [data-input-group-slot]": __spreadProps(__spreadValues({
       flex: 1,
       display: "flex",
       alignItems: "center",
@@ -94,7 +90,7 @@ const InputGroup = ({
       }
     }),
     // Esquinas redondeadas: primer slot (izquierda o arriba).
-    "& > .InputGroup__slot:first-of-type .MuiInputBase-root, & > .InputGroup__slot:first-of-type .MuiButton-root, & > .InputGroup__slot:first-of-type .MuiChip-root": isHorizontal ? {
+    "& > [data-input-group-slot]:first-of-type .MuiInputBase-root, & > [data-input-group-slot]:first-of-type .MuiButton-root, & > [data-input-group-slot]:first-of-type .MuiChip-root": isHorizontal ? {
       borderTopLeftRadius: radius,
       borderBottomLeftRadius: radius
     } : {
@@ -102,7 +98,7 @@ const InputGroup = ({
       borderTopRightRadius: radius
     },
     // Esquinas redondeadas: último slot (derecha o abajo).
-    "& > .InputGroup__slot:last-of-type .MuiInputBase-root, & > .InputGroup__slot:last-of-type .MuiButton-root, & > .InputGroup__slot:last-of-type .MuiChip-root": isHorizontal ? {
+    "& > [data-input-group-slot]:last-of-type .MuiInputBase-root, & > [data-input-group-slot]:last-of-type .MuiButton-root, & > [data-input-group-slot]:last-of-type .MuiChip-root": isHorizontal ? {
       borderTopRightRadius: radius,
       borderBottomRightRadius: radius
     } : {
@@ -122,18 +118,23 @@ const InputGroup = ({
       "data-testid": "input-group",
       className,
       "aria-disabled": disabled ? "true" : void 0,
-      sx: mergeSx(baseSx, sx),
-      children: slots.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx(
-        material.Box,
-        {
-          className: "InputGroup__slot",
-          sx: mergeSx(baseSlotSx, slotSx),
-          children: child
-        },
-        i
-      ))
+      sx: mergeSx.mergeSx(baseSx, sx),
+      children: slots.map((child, i) => {
+        var _a;
+        const slotKey = (_a = child.key) != null ? _a : i;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          material.Box,
+          {
+            "data-input-group-slot": true,
+            sx: mergeSx.mergeSx(baseSlotSx, slotSx),
+            children: child
+          },
+          slotKey
+        );
+      })
     }
   );
 };
 exports.InputGroup = InputGroup;
+exports.default = InputGroup;
 //# sourceMappingURL=InputGroup.cjs.map

package/components/InputGroup/InputGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.cjs","sources":["../../../src/components/InputGroup/InputGroup.tsx"],"sourcesContent":["import React, { Children, isValidElement } from 'react';\nimport { Box, type SxProps, type Theme } from '@mui/material';\n\nexport interface InputGroupProps {\n  children: React.ReactNode;\n  /**\n   * sx aplicado al contenedor raíz del grupo. Se mergea sobre los defaults.\n   */\n  sx?: SxProps<Theme>;\n  /**\n   * sx aplicado a cada slot individual. Útil para controlar flex/gap entre\n   * los hijos del grupo.\n   */\n  slotSx?: SxProps<Theme>;\n  /**\n   * Radio del borde del grupo. Default: 10.\n   */\n  borderRadius?: number | string;\n  /**\n   * Desactiva visualmente el grupo (no cascada lógica — los hijos deben\n   * manejar su propio `disabled`).\n   */\n  disabled?: boolean;\n  /**\n   * Orientación del grupo. Default: 'horizontal'.\n   */\n  orientation?: 'horizontal' | 'vertical';\n  className?: string;\n}\n\nconst mergeSx = (base: SxProps<Theme>, extra?: SxProps<Theme>): SxProps<Theme> => {\n  if (!extra) return base;\n  const baseArr = Array.isArray(base) ? base : [base];\n  const extraArr = Array.isArray(extra) ? extra : [extra];\n  return [...baseArr, ...extraArr] as SxProps<Theme>;\n};\n\n/**\n * Agrupa visualmente varios componentes de entrada (Input / Select / DatePicker /\n * Button, etc.) compartiendo un solo borde y con separadores internos.\n *\n * El grupo respeta el espacio que Input/Select reservan para su label `outside`\n * (marginTop=14px) moviendo ese reservado al contenedor externo y cancelándolo\n * en los hijos. Los labels siguen flotando por encima del borde del grupo con\n * la misma animación que fuera del grupo.\n *\n * No inspecciona el tipo de cada hijo; aplica los overrides a través de\n * descendant selectors por CSS para funcionar con cualquier wrapper / memoizado.\n */\nconst InputGroup: React.FC<InputGroupProps> = ({\n  children,\n  sx,\n  slotSx,\n  borderRadius = 10,\n  disabled,\n  orientation = 'horizontal',\n  className,\n}) => {\n  const radius = typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;\n  const slots = Children.toArray(children).filter(isValidElement);\n  const isHorizontal = orientation === 'horizontal';\n\n  const baseSx: SxProps<Theme> = {\n    // Respeta el label \"outside\" de Input/Select: los hijos pierden su marginTop\n    // (ver más abajo) y el grupo reserva el mismo espacio arriba para que los\n    // labels floten por encima del borde del grupo.\n    marginTop: '14px',\n\n    display: 'flex',\n    flexDirection: isHorizontal ? 'row' : 'column',\n    alignItems: 'stretch',\n    width: '100%',\n    border: (theme) => `1px solid ${theme.palette.divider}`,\n    borderRadius: radius,\n    backgroundColor: 'background.paper',\n    transition: 'border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',\n    '&:focus-within': {\n      borderColor: 'primary.main',\n      boxShadow: (theme) => `0 0 0 1px ${theme.palette.primary.main}`,\n    },\n    opacity: disabled ? 0.6 : 1,\n    pointerEvents: disabled ? 'none' : 'auto',\n\n    // Cancelar el marginTop que Input/Select reservan en labelPosition=\"outside\".\n    // El grupo ya lo reservó en su nivel externo.\n    '& .MuiFormControl-root, & > .InputGroup__slot > .MuiTextField-root, & > .InputGroup__slot > .MuiFormControl-root': {\n      marginTop: 0,\n    },\n\n    // Quitar el borde del notched outline interno: el borde visible es el del\n    // grupo, los separadores son los borderRight/borderBottom de cada slot.\n    '& .MuiOutlinedInput-notchedOutline': {\n      border: 'none',\n    },\n\n    // Forzar que todos los campos pinten sus esquinas cuadradas (las esquinas\n    // redondeadas se aplican solo al primer/último slot más abajo).\n    '& .MuiInputBase-root, & .MuiChip-root': {\n      borderRadius: 0,\n    },\n\n    // Botones integrados: sin radius propio, altura completa, sin sombra.\n    '& .MuiButton-root': {\n      borderRadius: 0,\n      height: '100%',\n      boxShadow: 'none',\n      border: 'none',\n    },\n\n    // Slots: cada hijo vive en un slot neutro que lo centra verticalmente.\n    '& > .InputGroup__slot': {\n      flex: 1,\n      display: 'flex',\n      alignItems: 'center',\n      minWidth: 0,\n      // Separador entre slots (horizontal: borderRight / vertical: borderBottom),\n      // usando el color de divider del theme.\n      ...(isHorizontal\n        ? { borderRight: (theme: Theme) => `1px solid ${theme.palette.divider}` }\n        : { borderBottom: (theme: Theme) => `1px solid ${theme.palette.divider}` }),\n      '&:last-of-type': {\n        borderRight: 'none',\n        borderBottom: 'none',\n      },\n    },\n\n    // Esquinas redondeadas: primer slot (izquierda o arriba).\n    '& > .InputGroup__slot:first-of-type .MuiInputBase-root, & > .InputGroup__slot:first-of-type .MuiButton-root, & > .InputGroup__slot:first-of-type .MuiChip-root':\n      isHorizontal\n        ? {\n            borderTopLeftRadius: radius,\n            borderBottomLeftRadius: radius,\n          }\n        : {\n            borderTopLeftRadius: radius,\n            borderTopRightRadius: radius,\n          },\n\n    // Esquinas redondeadas: último slot (derecha o abajo).\n    '& > .InputGroup__slot:last-of-type .MuiInputBase-root, & > .InputGroup__slot:last-of-type .MuiButton-root, & > .InputGroup__slot:last-of-type .MuiChip-root':\n      isHorizontal\n        ? {\n            borderTopRightRadius: radius,\n            borderBottomRightRadius: radius,\n          }\n        : {\n            borderBottomLeftRadius: radius,\n            borderBottomRightRadius: radius,\n          },\n  };\n\n  const baseSlotSx: SxProps<Theme> = {\n    flex: 1,\n    display: 'flex',\n    alignItems: 'center',\n    minWidth: 0,\n  };\n\n  return (\n    <Box\n      data-testid=\"input-group\"\n      className={className}\n      aria-disabled={disabled ? 'true' : undefined}\n      sx={mergeSx(baseSx, sx)}\n    >\n      {slots.map((child, i) => (\n        <Box\n          key={i}\n          className=\"InputGroup__slot\"\n          sx={mergeSx(baseSlotSx, slotSx)}\n        >\n          {child}\n        </Box>\n      ))}\n    </Box>\n  );\n};\n\nexport default InputGroup;\n"],"names":["Children","isValidElement","jsx","Box"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAM,UAAU,CAAC,MAAsB,UAA2C;AAChF,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,UAAU,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI;AAClD,QAAM,WAAW,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AACtD,SAAO,CAAC,GAAG,SAAS,GAAG,QAAQ;AACjC;AAcA,MAAM,aAAwC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,cAAc;AAAA,EACd;AACF,MAAM;AACJ,QAAM,SAAS,OAAO,iBAAiB,WAAW,GAAG,YAAY,OAAO;AACxE,QAAM,QAAQA,MAAAA,SAAS,QAAQ,QAAQ,EAAE,OAAOC,oBAAc;AAC9D,QAAM,eAAe,gBAAgB;AAErC,QAAM,SAAyB;AAAA;AAAA;AAAA;AAAA,IAI7B,WAAW;AAAA,IAEX,SAAS;AAAA,IACT,eAAe,eAAe,QAAQ;AAAA,IACtC,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ,CAAC,UAAU,aAAa,MAAM,QAAQ,OAAO;AAAA,IACrD,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,kBAAkB;AAAA,MAChB,aAAa;AAAA,MACb,WAAW,CAAC,UAAU,aAAa,MAAM,QAAQ,QAAQ,IAAI;AAAA,IAAA;AAAA,IAE/D,SAAS,WAAW,MAAM;AAAA,IAC1B,eAAe,WAAW,SAAS;AAAA;AAAA;AAAA,IAInC,oHAAoH;AAAA,MAClH,WAAW;AAAA,IAAA;AAAA;AAAA;AAAA,IAKb,sCAAsC;AAAA,MACpC,QAAQ;AAAA,IAAA;AAAA;AAAA;AAAA,IAKV,yCAAyC;AAAA,MACvC,cAAc;AAAA,IAAA;AAAA;AAAA,IAIhB,qBAAqB;AAAA,MACnB,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,QAAQ;AAAA,IAAA;AAAA;AAAA,IAIV,yBAAyB;AAAA,MACvB,MAAM;AAAA,MACN,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,OAGN,eACA,EAAE,aAAa,CAAC,UAAiB,aAAa,MAAM,QAAQ,OAAO,OACnE,EAAE,cAAc,CAAC,UAAiB,aAAa,MAAM,QAAQ,OAAO,GAAA,IATjD;AAAA,MAUvB,kBAAkB;AAAA,QAChB,aAAa;AAAA,QACb,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA;AAAA,IAIF,kKACE,eACI;AAAA,MACE,qBAAqB;AAAA,MACrB,wBAAwB;AAAA,IAAA,IAE1B;AAAA,MACE,qBAAqB;AAAA,MACrB,sBAAsB;AAAA,IAAA;AAAA;AAAA,IAI9B,+JACE,eACI;AAAA,MACE,sBAAsB;AAAA,MACtB,yBAAyB;AAAA,IAAA,IAE3B;AAAA,MACE,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAAA;AAAA,EAC3B;AAGR,QAAM,aAA6B;AAAA,IACjC,MAAM;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,EAAA;AAGZ,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ;AAAA,MACA,iBAAe,WAAW,SAAS;AAAA,MACnC,IAAI,QAAQ,QAAQ,EAAE;AAAA,MAErB,UAAA,MAAM,IAAI,CAAC,OAAO,MACjBD,2BAAAA;AAAAA,QAACC,SAAAA;AAAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UACV,IAAI,QAAQ,YAAY,MAAM;AAAA,UAE7B,UAAA;AAAA,QAAA;AAAA,QAJI;AAAA,MAAA,CAMR;AAAA,IAAA;AAAA,EAAA;AAGP;;"}
+{"version":3,"file":"InputGroup.cjs","sources":["../../../src/components/InputGroup/InputGroup.tsx"],"sourcesContent":["import React, { Children, isValidElement } from 'react';\nimport { Box, type SxProps, type Theme } from '@mui/material';\n\nimport { mergeSx } from '../_shared/mergeSx';\nimport { LABEL_MARGIN_TOP } from '../../theme/tokens';\n\nexport interface InputGroupProps {\n  children: React.ReactNode;\n  /**\n   * sx aplicado al contenedor raíz del grupo. Se mergea sobre los defaults.\n   */\n  sx?: SxProps<Theme>;\n  /**\n   * sx aplicado a cada slot individual. Útil para controlar flex/gap entre\n   * los hijos del grupo.\n   */\n  slotSx?: SxProps<Theme>;\n  /**\n   * Radio del borde del grupo. Default: 10.\n   */\n  borderRadius?: number | string;\n  /**\n   * Desactiva visualmente el grupo (no cascada lógica — los hijos deben\n   * manejar su propio `disabled`).\n   */\n  disabled?: boolean;\n  /**\n   * Orientación del grupo. Default: 'horizontal'.\n   */\n  orientation?: 'horizontal' | 'vertical';\n  className?: string;\n}\n\n/**\n * Agrupa visualmente varios componentes de entrada (Input / Select / DatePicker /\n * Button, etc.) compartiendo un solo borde y con separadores internos.\n *\n * El grupo respeta el espacio que Input/Select reservan para su label `outside`\n * (`LABEL_MARGIN_TOP`) moviendo ese reservado al contenedor externo y\n * cancelándolo en los hijos. Los labels siguen flotando por encima del borde\n * del grupo con la misma animación que fuera del grupo.\n *\n * No inspecciona el tipo de cada hijo; aplica los overrides a través de\n * descendant selectors por CSS para funcionar con cualquier wrapper / memoizado.\n */\nexport const InputGroup: React.FC<InputGroupProps> = ({\n  children,\n  sx,\n  slotSx,\n  borderRadius = 10,\n  disabled,\n  orientation = 'horizontal',\n  className,\n}) => {\n  const radius = typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;\n  const slots = Children.toArray(children).filter(isValidElement);\n  const isHorizontal = orientation === 'horizontal';\n\n  const baseSx: SxProps<Theme> = {\n    // Respeta el label \"outside\" de Input/Select: los hijos pierden su marginTop\n    // (ver más abajo) y el grupo reserva el mismo espacio arriba para que los\n    // labels floten por encima del borde del grupo.\n    marginTop: LABEL_MARGIN_TOP,\n\n    display: 'flex',\n    flexDirection: isHorizontal ? 'row' : 'column',\n    alignItems: 'stretch',\n    width: '100%',\n    border: (theme) => `1px solid ${theme.palette.divider}`,\n    borderRadius: radius,\n    backgroundColor: 'background.paper',\n    transition:\n      'border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',\n    '&:focus-within': {\n      borderColor: 'primary.main',\n      boxShadow: (theme) => `0 0 0 1px ${theme.palette.primary.main}`,\n    },\n    opacity: disabled ? 0.6 : 1,\n    pointerEvents: disabled ? 'none' : 'auto',\n\n    // Cancelar el marginTop que Input/Select reservan en labelPosition=\"outside\".\n    // El grupo ya lo reservó en su nivel externo.\n    '& .MuiFormControl-root, & > [data-input-group-slot] > .MuiTextField-root, & > [data-input-group-slot] > .MuiFormControl-root':\n      {\n        marginTop: 0,\n      },\n\n    // Quitar el borde del notched outline interno: el borde visible es el del\n    // grupo, los separadores son los borderRight/borderBottom de cada slot.\n    '& .MuiOutlinedInput-notchedOutline': {\n      border: 'none',\n    },\n\n    // Forzar que todos los campos pinten sus esquinas cuadradas (las esquinas\n    // redondeadas se aplican solo al primer/último slot más abajo).\n    '& .MuiInputBase-root, & .MuiChip-root': {\n      borderRadius: 0,\n    },\n\n    // Botones integrados: sin radius propio, altura completa, sin sombra.\n    '& .MuiButton-root': {\n      borderRadius: 0,\n      height: '100%',\n      boxShadow: 'none',\n      border: 'none',\n    },\n\n    // Slots: cada hijo vive en un slot neutro que lo centra verticalmente.\n    '& > [data-input-group-slot]': {\n      flex: 1,\n      display: 'flex',\n      alignItems: 'center',\n      minWidth: 0,\n      // Separador entre slots (horizontal: borderRight / vertical: borderBottom),\n      // usando el color de divider del theme.\n      ...(isHorizontal\n        ? { borderRight: (theme: Theme) => `1px solid ${theme.palette.divider}` }\n        : { borderBottom: (theme: Theme) => `1px solid ${theme.palette.divider}` }),\n      '&:last-of-type': {\n        borderRight: 'none',\n        borderBottom: 'none',\n      },\n    },\n\n    // Esquinas redondeadas: primer slot (izquierda o arriba).\n    '& > [data-input-group-slot]:first-of-type .MuiInputBase-root, & > [data-input-group-slot]:first-of-type .MuiButton-root, & > [data-input-group-slot]:first-of-type .MuiChip-root':\n      isHorizontal\n        ? {\n            borderTopLeftRadius: radius,\n            borderBottomLeftRadius: radius,\n          }\n        : {\n            borderTopLeftRadius: radius,\n            borderTopRightRadius: radius,\n          },\n\n    // Esquinas redondeadas: último slot (derecha o abajo).\n    '& > [data-input-group-slot]:last-of-type .MuiInputBase-root, & > [data-input-group-slot]:last-of-type .MuiButton-root, & > [data-input-group-slot]:last-of-type .MuiChip-root':\n      isHorizontal\n        ? {\n            borderTopRightRadius: radius,\n            borderBottomRightRadius: radius,\n          }\n        : {\n            borderBottomLeftRadius: radius,\n            borderBottomRightRadius: radius,\n          },\n  };\n\n  const baseSlotSx: SxProps<Theme> = {\n    flex: 1,\n    display: 'flex',\n    alignItems: 'center',\n    minWidth: 0,\n  };\n\n  return (\n    <Box\n      data-testid=\"input-group\"\n      className={className}\n      aria-disabled={disabled ? 'true' : undefined}\n      sx={mergeSx(baseSx, sx)}\n    >\n      {slots.map((child, i) => {\n        const slotKey = (child as React.ReactElement).key ?? i;\n        return (\n          <Box\n            key={slotKey}\n            data-input-group-slot\n            sx={mergeSx(baseSlotSx, slotSx)}\n          >\n            {child}\n          </Box>\n        );\n      })}\n    </Box>\n  );\n};\n\nexport default InputGroup;\n"],"names":["Children","isValidElement","LABEL_MARGIN_TOP","jsx","Box","mergeSx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6CO,MAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,cAAc;AAAA,EACd;AACF,MAAM;AACJ,QAAM,SAAS,OAAO,iBAAiB,WAAW,GAAG,YAAY,OAAO;AACxE,QAAM,QAAQA,MAAAA,SAAS,QAAQ,QAAQ,EAAE,OAAOC,oBAAc;AAC9D,QAAM,eAAe,gBAAgB;AAErC,QAAM,SAAyB;AAAA;AAAA;AAAA;AAAA,IAI7B,WAAWC,OAAAA;AAAAA,IAEX,SAAS;AAAA,IACT,eAAe,eAAe,QAAQ;AAAA,IACtC,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ,CAAC,UAAU,aAAa,MAAM,QAAQ,OAAO;AAAA,IACrD,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,YACE;AAAA,IACF,kBAAkB;AAAA,MAChB,aAAa;AAAA,MACb,WAAW,CAAC,UAAU,aAAa,MAAM,QAAQ,QAAQ,IAAI;AAAA,IAAA;AAAA,IAE/D,SAAS,WAAW,MAAM;AAAA,IAC1B,eAAe,WAAW,SAAS;AAAA;AAAA;AAAA,IAInC,gIACE;AAAA,MACE,WAAW;AAAA,IAAA;AAAA;AAAA;AAAA,IAKf,sCAAsC;AAAA,MACpC,QAAQ;AAAA,IAAA;AAAA;AAAA;AAAA,IAKV,yCAAyC;AAAA,MACvC,cAAc;AAAA,IAAA;AAAA;AAAA,IAIhB,qBAAqB;AAAA,MACnB,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,QAAQ;AAAA,IAAA;AAAA;AAAA,IAIV,+BAA+B;AAAA,MAC7B,MAAM;AAAA,MACN,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,OAGN,eACA,EAAE,aAAa,CAAC,UAAiB,aAAa,MAAM,QAAQ,OAAO,OACnE,EAAE,cAAc,CAAC,UAAiB,aAAa,MAAM,QAAQ,OAAO,GAAA,IAT3C;AAAA,MAU7B,kBAAkB;AAAA,QAChB,aAAa;AAAA,QACb,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA;AAAA,IAIF,oLACE,eACI;AAAA,MACE,qBAAqB;AAAA,MACrB,wBAAwB;AAAA,IAAA,IAE1B;AAAA,MACE,qBAAqB;AAAA,MACrB,sBAAsB;AAAA,IAAA;AAAA;AAAA,IAI9B,iLACE,eACI;AAAA,MACE,sBAAsB;AAAA,MACtB,yBAAyB;AAAA,IAAA,IAE3B;AAAA,MACE,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAAA;AAAA,EAC3B;AAGR,QAAM,aAA6B;AAAA,IACjC,MAAM;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,EAAA;AAGZ,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ;AAAA,MACA,iBAAe,WAAW,SAAS;AAAA,MACnC,IAAIC,QAAAA,QAAQ,QAAQ,EAAE;AAAA,MAErB,UAAA,MAAM,IAAI,CAAC,OAAO,MAAM;;AACvB,cAAM,WAAW,WAA6B,QAA7B,YAAoC;AACrD,eACEF,2BAAAA;AAAAA,UAACC,SAAAA;AAAAA,UAAA;AAAA,YAEC,yBAAqB;AAAA,YACrB,IAAIC,QAAAA,QAAQ,YAAY,MAAM;AAAA,YAE7B,UAAA;AAAA,UAAA;AAAA,UAJI;AAAA,QAAA;AAAA,MAOX,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;;;"}

package/components/InputGroup/InputGroup.d.ts

@@ -31,12 +31,12 @@ export interface InputGroupProps {
  * Button, etc.) compartiendo un solo borde y con separadores internos.
  *
  * El grupo respeta el espacio que Input/Select reservan para su label `outside`
- * (marginTop=14px) moviendo ese reservado al contenedor externo y cancelándolo
- * en los hijos. Los labels siguen flotando por encima del borde del grupo con
- * la misma animación que fuera del grupo.
+ * (`LABEL_MARGIN_TOP`) moviendo ese reservado al contenedor externo y
+ * cancelándolo en los hijos. Los labels siguen flotando por encima del borde
+ * del grupo con la misma animación que fuera del grupo.
  *
  * No inspecciona el tipo de cada hijo; aplica los overrides a través de
  * descendant selectors por CSS para funcionar con cualquier wrapper / memoizado.
  */
-declare const InputGroup: React.FC<InputGroupProps>;
+export declare const InputGroup: React.FC<InputGroupProps>;
 export default InputGroup;

package/components/InputGroup/InputGroup.js

@@ -20,12 +20,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx } from "react/jsx-runtime";
 import { Children, isValidElement } from "react";
 import { Box } from "@mui/material";
-const mergeSx = (base, extra) => {
-  if (!extra) return base;
-  const baseArr = Array.isArray(base) ? base : [base];
-  const extraArr = Array.isArray(extra) ? extra : [extra];
-  return [...baseArr, ...extraArr];
-};
+import { m as mergeSx } from "../../mergeSx-BXoNZjB_.js";
+import { L as LABEL_MARGIN_TOP } from "../../tokens-BRrcP_p_.js";
 const InputGroup = ({
   children,
   sx,
@@ -42,7 +38,7 @@ const InputGroup = ({
     // Respeta el label "outside" de Input/Select: los hijos pierden su marginTop
     // (ver más abajo) y el grupo reserva el mismo espacio arriba para que los
     // labels floten por encima del borde del grupo.
-    marginTop: "14px",
+    marginTop: LABEL_MARGIN_TOP,
     display: "flex",
     flexDirection: isHorizontal ? "row" : "column",
     alignItems: "stretch",
@@ -59,7 +55,7 @@ const InputGroup = ({
     pointerEvents: disabled ? "none" : "auto",
     // Cancelar el marginTop que Input/Select reservan en labelPosition="outside".
     // El grupo ya lo reservó en su nivel externo.
-    "& .MuiFormControl-root, & > .InputGroup__slot > .MuiTextField-root, & > .InputGroup__slot > .MuiFormControl-root": {
+    "& .MuiFormControl-root, & > [data-input-group-slot] > .MuiTextField-root, & > [data-input-group-slot] > .MuiFormControl-root": {
       marginTop: 0
     },
     // Quitar el borde del notched outline interno: el borde visible es el del
@@ -80,7 +76,7 @@ const InputGroup = ({
       border: "none"
     },
     // Slots: cada hijo vive en un slot neutro que lo centra verticalmente.
-    "& > .InputGroup__slot": __spreadProps(__spreadValues({
+    "& > [data-input-group-slot]": __spreadProps(__spreadValues({
       flex: 1,
       display: "flex",
       alignItems: "center",
@@ -92,7 +88,7 @@ const InputGroup = ({
       }
     }),
     // Esquinas redondeadas: primer slot (izquierda o arriba).
-    "& > .InputGroup__slot:first-of-type .MuiInputBase-root, & > .InputGroup__slot:first-of-type .MuiButton-root, & > .InputGroup__slot:first-of-type .MuiChip-root": isHorizontal ? {
+    "& > [data-input-group-slot]:first-of-type .MuiInputBase-root, & > [data-input-group-slot]:first-of-type .MuiButton-root, & > [data-input-group-slot]:first-of-type .MuiChip-root": isHorizontal ? {
       borderTopLeftRadius: radius,
       borderBottomLeftRadius: radius
     } : {
@@ -100,7 +96,7 @@ const InputGroup = ({
       borderTopRightRadius: radius
     },
     // Esquinas redondeadas: último slot (derecha o abajo).
-    "& > .InputGroup__slot:last-of-type .MuiInputBase-root, & > .InputGroup__slot:last-of-type .MuiButton-root, & > .InputGroup__slot:last-of-type .MuiChip-root": isHorizontal ? {
+    "& > [data-input-group-slot]:last-of-type .MuiInputBase-root, & > [data-input-group-slot]:last-of-type .MuiButton-root, & > [data-input-group-slot]:last-of-type .MuiChip-root": isHorizontal ? {
       borderTopRightRadius: radius,
       borderBottomRightRadius: radius
     } : {
@@ -121,19 +117,24 @@ const InputGroup = ({
       className,
       "aria-disabled": disabled ? "true" : void 0,
       sx: mergeSx(baseSx, sx),
-      children: slots.map((child, i) => /* @__PURE__ */ jsx(
-        Box,
-        {
-          className: "InputGroup__slot",
-          sx: mergeSx(baseSlotSx, slotSx),
-          children: child
-        },
-        i
-      ))
+      children: slots.map((child, i) => {
+        var _a;
+        const slotKey = (_a = child.key) != null ? _a : i;
+        return /* @__PURE__ */ jsx(
+          Box,
+          {
+            "data-input-group-slot": true,
+            sx: mergeSx(baseSlotSx, slotSx),
+            children: child
+          },
+          slotKey
+        );
+      })
     }
   );
 };
 export {
-  InputGroup
+  InputGroup,
+  InputGroup as default
 };
 //# sourceMappingURL=InputGroup.js.map

package/components/InputGroup/InputGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.js","sources":["../../../src/components/InputGroup/InputGroup.tsx"],"sourcesContent":["import React, { Children, isValidElement } from 'react';\nimport { Box, type SxProps, type Theme } from '@mui/material';\n\nexport interface InputGroupProps {\n  children: React.ReactNode;\n  /**\n   * sx aplicado al contenedor raíz del grupo. Se mergea sobre los defaults.\n   */\n  sx?: SxProps<Theme>;\n  /**\n   * sx aplicado a cada slot individual. Útil para controlar flex/gap entre\n   * los hijos del grupo.\n   */\n  slotSx?: SxProps<Theme>;\n  /**\n   * Radio del borde del grupo. Default: 10.\n   */\n  borderRadius?: number | string;\n  /**\n   * Desactiva visualmente el grupo (no cascada lógica — los hijos deben\n   * manejar su propio `disabled`).\n   */\n  disabled?: boolean;\n  /**\n   * Orientación del grupo. Default: 'horizontal'.\n   */\n  orientation?: 'horizontal' | 'vertical';\n  className?: string;\n}\n\nconst mergeSx = (base: SxProps<Theme>, extra?: SxProps<Theme>): SxProps<Theme> => {\n  if (!extra) return base;\n  const baseArr = Array.isArray(base) ? base : [base];\n  const extraArr = Array.isArray(extra) ? extra : [extra];\n  return [...baseArr, ...extraArr] as SxProps<Theme>;\n};\n\n/**\n * Agrupa visualmente varios componentes de entrada (Input / Select / DatePicker /\n * Button, etc.) compartiendo un solo borde y con separadores internos.\n *\n * El grupo respeta el espacio que Input/Select reservan para su label `outside`\n * (marginTop=14px) moviendo ese reservado al contenedor externo y cancelándolo\n * en los hijos. Los labels siguen flotando por encima del borde del grupo con\n * la misma animación que fuera del grupo.\n *\n * No inspecciona el tipo de cada hijo; aplica los overrides a través de\n * descendant selectors por CSS para funcionar con cualquier wrapper / memoizado.\n */\nconst InputGroup: React.FC<InputGroupProps> = ({\n  children,\n  sx,\n  slotSx,\n  borderRadius = 10,\n  disabled,\n  orientation = 'horizontal',\n  className,\n}) => {\n  const radius = typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;\n  const slots = Children.toArray(children).filter(isValidElement);\n  const isHorizontal = orientation === 'horizontal';\n\n  const baseSx: SxProps<Theme> = {\n    // Respeta el label \"outside\" de Input/Select: los hijos pierden su marginTop\n    // (ver más abajo) y el grupo reserva el mismo espacio arriba para que los\n    // labels floten por encima del borde del grupo.\n    marginTop: '14px',\n\n    display: 'flex',\n    flexDirection: isHorizontal ? 'row' : 'column',\n    alignItems: 'stretch',\n    width: '100%',\n    border: (theme) => `1px solid ${theme.palette.divider}`,\n    borderRadius: radius,\n    backgroundColor: 'background.paper',\n    transition: 'border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',\n    '&:focus-within': {\n      borderColor: 'primary.main',\n      boxShadow: (theme) => `0 0 0 1px ${theme.palette.primary.main}`,\n    },\n    opacity: disabled ? 0.6 : 1,\n    pointerEvents: disabled ? 'none' : 'auto',\n\n    // Cancelar el marginTop que Input/Select reservan en labelPosition=\"outside\".\n    // El grupo ya lo reservó en su nivel externo.\n    '& .MuiFormControl-root, & > .InputGroup__slot > .MuiTextField-root, & > .InputGroup__slot > .MuiFormControl-root': {\n      marginTop: 0,\n    },\n\n    // Quitar el borde del notched outline interno: el borde visible es el del\n    // grupo, los separadores son los borderRight/borderBottom de cada slot.\n    '& .MuiOutlinedInput-notchedOutline': {\n      border: 'none',\n    },\n\n    // Forzar que todos los campos pinten sus esquinas cuadradas (las esquinas\n    // redondeadas se aplican solo al primer/último slot más abajo).\n    '& .MuiInputBase-root, & .MuiChip-root': {\n      borderRadius: 0,\n    },\n\n    // Botones integrados: sin radius propio, altura completa, sin sombra.\n    '& .MuiButton-root': {\n      borderRadius: 0,\n      height: '100%',\n      boxShadow: 'none',\n      border: 'none',\n    },\n\n    // Slots: cada hijo vive en un slot neutro que lo centra verticalmente.\n    '& > .InputGroup__slot': {\n      flex: 1,\n      display: 'flex',\n      alignItems: 'center',\n      minWidth: 0,\n      // Separador entre slots (horizontal: borderRight / vertical: borderBottom),\n      // usando el color de divider del theme.\n      ...(isHorizontal\n        ? { borderRight: (theme: Theme) => `1px solid ${theme.palette.divider}` }\n        : { borderBottom: (theme: Theme) => `1px solid ${theme.palette.divider}` }),\n      '&:last-of-type': {\n        borderRight: 'none',\n        borderBottom: 'none',\n      },\n    },\n\n    // Esquinas redondeadas: primer slot (izquierda o arriba).\n    '& > .InputGroup__slot:first-of-type .MuiInputBase-root, & > .InputGroup__slot:first-of-type .MuiButton-root, & > .InputGroup__slot:first-of-type .MuiChip-root':\n      isHorizontal\n        ? {\n            borderTopLeftRadius: radius,\n            borderBottomLeftRadius: radius,\n          }\n        : {\n            borderTopLeftRadius: radius,\n            borderTopRightRadius: radius,\n          },\n\n    // Esquinas redondeadas: último slot (derecha o abajo).\n    '& > .InputGroup__slot:last-of-type .MuiInputBase-root, & > .InputGroup__slot:last-of-type .MuiButton-root, & > .InputGroup__slot:last-of-type .MuiChip-root':\n      isHorizontal\n        ? {\n            borderTopRightRadius: radius,\n            borderBottomRightRadius: radius,\n          }\n        : {\n            borderBottomLeftRadius: radius,\n            borderBottomRightRadius: radius,\n          },\n  };\n\n  const baseSlotSx: SxProps<Theme> = {\n    flex: 1,\n    display: 'flex',\n    alignItems: 'center',\n    minWidth: 0,\n  };\n\n  return (\n    <Box\n      data-testid=\"input-group\"\n      className={className}\n      aria-disabled={disabled ? 'true' : undefined}\n      sx={mergeSx(baseSx, sx)}\n    >\n      {slots.map((child, i) => (\n        <Box\n          key={i}\n          className=\"InputGroup__slot\"\n          sx={mergeSx(baseSlotSx, slotSx)}\n        >\n          {child}\n        </Box>\n      ))}\n    </Box>\n  );\n};\n\nexport default InputGroup;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAM,UAAU,CAAC,MAAsB,UAA2C;AAChF,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,UAAU,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI;AAClD,QAAM,WAAW,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AACtD,SAAO,CAAC,GAAG,SAAS,GAAG,QAAQ;AACjC;AAcA,MAAM,aAAwC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,cAAc;AAAA,EACd;AACF,MAAM;AACJ,QAAM,SAAS,OAAO,iBAAiB,WAAW,GAAG,YAAY,OAAO;AACxE,QAAM,QAAQ,SAAS,QAAQ,QAAQ,EAAE,OAAO,cAAc;AAC9D,QAAM,eAAe,gBAAgB;AAErC,QAAM,SAAyB;AAAA;AAAA;AAAA;AAAA,IAI7B,WAAW;AAAA,IAEX,SAAS;AAAA,IACT,eAAe,eAAe,QAAQ;AAAA,IACtC,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ,CAAC,UAAU,aAAa,MAAM,QAAQ,OAAO;AAAA,IACrD,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,kBAAkB;AAAA,MAChB,aAAa;AAAA,MACb,WAAW,CAAC,UAAU,aAAa,MAAM,QAAQ,QAAQ,IAAI;AAAA,IAAA;AAAA,IAE/D,SAAS,WAAW,MAAM;AAAA,IAC1B,eAAe,WAAW,SAAS;AAAA;AAAA;AAAA,IAInC,oHAAoH;AAAA,MAClH,WAAW;AAAA,IAAA;AAAA;AAAA;AAAA,IAKb,sCAAsC;AAAA,MACpC,QAAQ;AAAA,IAAA;AAAA;AAAA;AAAA,IAKV,yCAAyC;AAAA,MACvC,cAAc;AAAA,IAAA;AAAA;AAAA,IAIhB,qBAAqB;AAAA,MACnB,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,QAAQ;AAAA,IAAA;AAAA;AAAA,IAIV,yBAAyB;AAAA,MACvB,MAAM;AAAA,MACN,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,OAGN,eACA,EAAE,aAAa,CAAC,UAAiB,aAAa,MAAM,QAAQ,OAAO,OACnE,EAAE,cAAc,CAAC,UAAiB,aAAa,MAAM,QAAQ,OAAO,GAAA,IATjD;AAAA,MAUvB,kBAAkB;AAAA,QAChB,aAAa;AAAA,QACb,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA;AAAA,IAIF,kKACE,eACI;AAAA,MACE,qBAAqB;AAAA,MACrB,wBAAwB;AAAA,IAAA,IAE1B;AAAA,MACE,qBAAqB;AAAA,MACrB,sBAAsB;AAAA,IAAA;AAAA;AAAA,IAI9B,+JACE,eACI;AAAA,MACE,sBAAsB;AAAA,MACtB,yBAAyB;AAAA,IAAA,IAE3B;AAAA,MACE,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAAA;AAAA,EAC3B;AAGR,QAAM,aAA6B;AAAA,IACjC,MAAM;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,EAAA;AAGZ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ;AAAA,MACA,iBAAe,WAAW,SAAS;AAAA,MACnC,IAAI,QAAQ,QAAQ,EAAE;AAAA,MAErB,UAAA,MAAM,IAAI,CAAC,OAAO,MACjB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UACV,IAAI,QAAQ,YAAY,MAAM;AAAA,UAE7B,UAAA;AAAA,QAAA;AAAA,QAJI;AAAA,MAAA,CAMR;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"InputGroup.js","sources":["../../../src/components/InputGroup/InputGroup.tsx"],"sourcesContent":["import React, { Children, isValidElement } from 'react';\nimport { Box, type SxProps, type Theme } from '@mui/material';\n\nimport { mergeSx } from '../_shared/mergeSx';\nimport { LABEL_MARGIN_TOP } from '../../theme/tokens';\n\nexport interface InputGroupProps {\n  children: React.ReactNode;\n  /**\n   * sx aplicado al contenedor raíz del grupo. Se mergea sobre los defaults.\n   */\n  sx?: SxProps<Theme>;\n  /**\n   * sx aplicado a cada slot individual. Útil para controlar flex/gap entre\n   * los hijos del grupo.\n   */\n  slotSx?: SxProps<Theme>;\n  /**\n   * Radio del borde del grupo. Default: 10.\n   */\n  borderRadius?: number | string;\n  /**\n   * Desactiva visualmente el grupo (no cascada lógica — los hijos deben\n   * manejar su propio `disabled`).\n   */\n  disabled?: boolean;\n  /**\n   * Orientación del grupo. Default: 'horizontal'.\n   */\n  orientation?: 'horizontal' | 'vertical';\n  className?: string;\n}\n\n/**\n * Agrupa visualmente varios componentes de entrada (Input / Select / DatePicker /\n * Button, etc.) compartiendo un solo borde y con separadores internos.\n *\n * El grupo respeta el espacio que Input/Select reservan para su label `outside`\n * (`LABEL_MARGIN_TOP`) moviendo ese reservado al contenedor externo y\n * cancelándolo en los hijos. Los labels siguen flotando por encima del borde\n * del grupo con la misma animación que fuera del grupo.\n *\n * No inspecciona el tipo de cada hijo; aplica los overrides a través de\n * descendant selectors por CSS para funcionar con cualquier wrapper / memoizado.\n */\nexport const InputGroup: React.FC<InputGroupProps> = ({\n  children,\n  sx,\n  slotSx,\n  borderRadius = 10,\n  disabled,\n  orientation = 'horizontal',\n  className,\n}) => {\n  const radius = typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;\n  const slots = Children.toArray(children).filter(isValidElement);\n  const isHorizontal = orientation === 'horizontal';\n\n  const baseSx: SxProps<Theme> = {\n    // Respeta el label \"outside\" de Input/Select: los hijos pierden su marginTop\n    // (ver más abajo) y el grupo reserva el mismo espacio arriba para que los\n    // labels floten por encima del borde del grupo.\n    marginTop: LABEL_MARGIN_TOP,\n\n    display: 'flex',\n    flexDirection: isHorizontal ? 'row' : 'column',\n    alignItems: 'stretch',\n    width: '100%',\n    border: (theme) => `1px solid ${theme.palette.divider}`,\n    borderRadius: radius,\n    backgroundColor: 'background.paper',\n    transition:\n      'border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',\n    '&:focus-within': {\n      borderColor: 'primary.main',\n      boxShadow: (theme) => `0 0 0 1px ${theme.palette.primary.main}`,\n    },\n    opacity: disabled ? 0.6 : 1,\n    pointerEvents: disabled ? 'none' : 'auto',\n\n    // Cancelar el marginTop que Input/Select reservan en labelPosition=\"outside\".\n    // El grupo ya lo reservó en su nivel externo.\n    '& .MuiFormControl-root, & > [data-input-group-slot] > .MuiTextField-root, & > [data-input-group-slot] > .MuiFormControl-root':\n      {\n        marginTop: 0,\n      },\n\n    // Quitar el borde del notched outline interno: el borde visible es el del\n    // grupo, los separadores son los borderRight/borderBottom de cada slot.\n    '& .MuiOutlinedInput-notchedOutline': {\n      border: 'none',\n    },\n\n    // Forzar que todos los campos pinten sus esquinas cuadradas (las esquinas\n    // redondeadas se aplican solo al primer/último slot más abajo).\n    '& .MuiInputBase-root, & .MuiChip-root': {\n      borderRadius: 0,\n    },\n\n    // Botones integrados: sin radius propio, altura completa, sin sombra.\n    '& .MuiButton-root': {\n      borderRadius: 0,\n      height: '100%',\n      boxShadow: 'none',\n      border: 'none',\n    },\n\n    // Slots: cada hijo vive en un slot neutro que lo centra verticalmente.\n    '& > [data-input-group-slot]': {\n      flex: 1,\n      display: 'flex',\n      alignItems: 'center',\n      minWidth: 0,\n      // Separador entre slots (horizontal: borderRight / vertical: borderBottom),\n      // usando el color de divider del theme.\n      ...(isHorizontal\n        ? { borderRight: (theme: Theme) => `1px solid ${theme.palette.divider}` }\n        : { borderBottom: (theme: Theme) => `1px solid ${theme.palette.divider}` }),\n      '&:last-of-type': {\n        borderRight: 'none',\n        borderBottom: 'none',\n      },\n    },\n\n    // Esquinas redondeadas: primer slot (izquierda o arriba).\n    '& > [data-input-group-slot]:first-of-type .MuiInputBase-root, & > [data-input-group-slot]:first-of-type .MuiButton-root, & > [data-input-group-slot]:first-of-type .MuiChip-root':\n      isHorizontal\n        ? {\n            borderTopLeftRadius: radius,\n            borderBottomLeftRadius: radius,\n          }\n        : {\n            borderTopLeftRadius: radius,\n            borderTopRightRadius: radius,\n          },\n\n    // Esquinas redondeadas: último slot (derecha o abajo).\n    '& > [data-input-group-slot]:last-of-type .MuiInputBase-root, & > [data-input-group-slot]:last-of-type .MuiButton-root, & > [data-input-group-slot]:last-of-type .MuiChip-root':\n      isHorizontal\n        ? {\n            borderTopRightRadius: radius,\n            borderBottomRightRadius: radius,\n          }\n        : {\n            borderBottomLeftRadius: radius,\n            borderBottomRightRadius: radius,\n          },\n  };\n\n  const baseSlotSx: SxProps<Theme> = {\n    flex: 1,\n    display: 'flex',\n    alignItems: 'center',\n    minWidth: 0,\n  };\n\n  return (\n    <Box\n      data-testid=\"input-group\"\n      className={className}\n      aria-disabled={disabled ? 'true' : undefined}\n      sx={mergeSx(baseSx, sx)}\n    >\n      {slots.map((child, i) => {\n        const slotKey = (child as React.ReactElement).key ?? i;\n        return (\n          <Box\n            key={slotKey}\n            data-input-group-slot\n            sx={mergeSx(baseSlotSx, slotSx)}\n          >\n            {child}\n          </Box>\n        );\n      })}\n    </Box>\n  );\n};\n\nexport default InputGroup;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA6CO,MAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,cAAc;AAAA,EACd;AACF,MAAM;AACJ,QAAM,SAAS,OAAO,iBAAiB,WAAW,GAAG,YAAY,OAAO;AACxE,QAAM,QAAQ,SAAS,QAAQ,QAAQ,EAAE,OAAO,cAAc;AAC9D,QAAM,eAAe,gBAAgB;AAErC,QAAM,SAAyB;AAAA;AAAA;AAAA;AAAA,IAI7B,WAAW;AAAA,IAEX,SAAS;AAAA,IACT,eAAe,eAAe,QAAQ;AAAA,IACtC,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ,CAAC,UAAU,aAAa,MAAM,QAAQ,OAAO;AAAA,IACrD,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,YACE;AAAA,IACF,kBAAkB;AAAA,MAChB,aAAa;AAAA,MACb,WAAW,CAAC,UAAU,aAAa,MAAM,QAAQ,QAAQ,IAAI;AAAA,IAAA;AAAA,IAE/D,SAAS,WAAW,MAAM;AAAA,IAC1B,eAAe,WAAW,SAAS;AAAA;AAAA;AAAA,IAInC,gIACE;AAAA,MACE,WAAW;AAAA,IAAA;AAAA;AAAA;AAAA,IAKf,sCAAsC;AAAA,MACpC,QAAQ;AAAA,IAAA;AAAA;AAAA;AAAA,IAKV,yCAAyC;AAAA,MACvC,cAAc;AAAA,IAAA;AAAA;AAAA,IAIhB,qBAAqB;AAAA,MACnB,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,QAAQ;AAAA,IAAA;AAAA;AAAA,IAIV,+BAA+B;AAAA,MAC7B,MAAM;AAAA,MACN,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,OAGN,eACA,EAAE,aAAa,CAAC,UAAiB,aAAa,MAAM,QAAQ,OAAO,OACnE,EAAE,cAAc,CAAC,UAAiB,aAAa,MAAM,QAAQ,OAAO,GAAA,IAT3C;AAAA,MAU7B,kBAAkB;AAAA,QAChB,aAAa;AAAA,QACb,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA;AAAA,IAIF,oLACE,eACI;AAAA,MACE,qBAAqB;AAAA,MACrB,wBAAwB;AAAA,IAAA,IAE1B;AAAA,MACE,qBAAqB;AAAA,MACrB,sBAAsB;AAAA,IAAA;AAAA;AAAA,IAI9B,iLACE,eACI;AAAA,MACE,sBAAsB;AAAA,MACtB,yBAAyB;AAAA,IAAA,IAE3B;AAAA,MACE,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAAA;AAAA,EAC3B;AAGR,QAAM,aAA6B;AAAA,IACjC,MAAM;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,EAAA;AAGZ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ;AAAA,MACA,iBAAe,WAAW,SAAS;AAAA,MACnC,IAAI,QAAQ,QAAQ,EAAE;AAAA,MAErB,UAAA,MAAM,IAAI,CAAC,OAAO,MAAM;;AACvB,cAAM,WAAW,WAA6B,QAA7B,YAAoC;AACrD,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,yBAAqB;AAAA,YACrB,IAAI,QAAQ,YAAY,MAAM;AAAA,YAE7B,UAAA;AAAA,UAAA;AAAA,UAJI;AAAA,QAAA;AAAA,MAOX,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/components/InputGroup/index.d.ts

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

package/components/InputGroup.d.ts

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

package/components/Modal/Modal.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Modal = require("../../Modal-Bm_HH9cv.cjs");
+const Modal = require("../../Modal-BN5s-Tfk.cjs");
 exports.Modal = Modal.Modal;
 exports.ModalBody = Modal.ModalBody;
 exports.ModalFooter = Modal.ModalFooter;