@clicoh/orion-library 1.1.0-beta.7 → 1.1.0-beta.9

package/assets/css/base.css

@@ -33,6 +33,7 @@
 
   --color-error-1: #fceaea;
   --color-error: #df3c3c;
+  --color-error-strong: #c1332f;
   --color-error-dark: #df3c3c;
   --color-error-dark-1: #4e2c2f;
 
@@ -43,6 +44,7 @@
 
   --color-success-1: #e8f6ed;
   --color-success: #16a34a;
+  --color-success-strong: #16803c;
   --color-success-dark: #22c55e;
   --color-success-dark-1: #264936;
 
@@ -75,6 +77,22 @@
   --color-violet-dark: #cf5dfe;
   --color-violet-dark-1: #292532;
 
+  --color-cyan-1: #e7f5f7;
+  --color-cyan: #0e8c9e;
+  --color-cyan-dark: #22b8cc;
+  --color-cyan-dark-1: #22414a;
+
+  --color-olive-1: #eff7e4;
+  --color-olive: #5f9b12;
+  --color-olive-dark: #7fbf2a;
+  --color-olive-dark-1: #33421f;
+
+  --color-amber-1: #fdf3e0;
+  --color-amber: #b07800;
+  --color-amber-strong: #8a5b00;
+  --color-amber-dark: #d9a21a;
+  --color-amber-dark-1: #4a3b1c;
+
   --background-image-clicoh: linear-gradient(135deg, #6a5df9, #c854e4);
   --background-image-brand-shipping: linear-gradient(135deg, #5683dd, #8ee3c6);
   --background-image-brand-full: linear-gradient(135deg, #cfbdb2, #cf86f4);

package/dist/components/00-base/Each/Each.d.ts

@@ -6,6 +6,12 @@ type EachProps<T> = {
 /**
  * A utility component that iterates over an array and renders each item using the provided render function.
  *
+ * Each rendered item is wrapped in a keyed `Fragment`, so consumers do not need
+ * to set a key themselves. When the render function does return an element with
+ * its own key, that key wins: a consumer that needs stable identity across
+ * reordering keeps it. The `Fragment` adds no DOM node, so the rendered items
+ * stay direct children of the parent and CSS grid or flex layouts are unaffected.
+ *
  * @component
  * @example
  * // Example usage of Each component
@@ -16,6 +22,13 @@ type EachProps<T> = {
  *   )}
  * />
  *
+ * @example
+ * // Providing a stable key for lists that reorder
+ * <Each
+ *   of={fruits}
+ *   render={(fruit) => <li key={fruit.id}>{fruit.name}</li>}
+ * />
+ *
  * @param {Object} props - The properties of the Each component.
  * @param {T[]} props.of - The array of items to iterate over and render.
  * @param {(item: T, index: number) => ReactNode} props.render - A function that renders each item in the array.

package/dist/components/00-base/Each/Each.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Each.d.ts","sourceRoot":"","sources":["../../../../src/components/00-base/Each/Each.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,KAAK,SAAS,CAAC,CAAC,IAAI;IAClB,EAAE,EAAE,CAAC,EAAE,CAAC;IACR,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;CAC/C,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAE/D"}
+{"version":3,"file":"Each.d.ts","sourceRoot":"","sources":["../../../../src/components/00-base/Each/Each.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,KAAK,SAAS,CAAC,CAAC,IAAI;IAClB,EAAE,EAAE,CAAC,EAAE,CAAC;IACR,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;CAC/C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAO/D"}

package/dist/components/00-base/Each/Each.jsx

@@ -1,7 +1,13 @@
-import { Children } from 'react';
+import { Fragment, isValidElement } from 'react';
 /**
  * A utility component that iterates over an array and renders each item using the provided render function.
  *
+ * Each rendered item is wrapped in a keyed `Fragment`, so consumers do not need
+ * to set a key themselves. When the render function does return an element with
+ * its own key, that key wins: a consumer that needs stable identity across
+ * reordering keeps it. The `Fragment` adds no DOM node, so the rendered items
+ * stay direct children of the parent and CSS grid or flex layouts are unaffected.
+ *
  * @component
  * @example
  * // Example usage of Each component
@@ -12,6 +18,13 @@ import { Children } from 'react';
  *   )}
  * />
  *
+ * @example
+ * // Providing a stable key for lists that reorder
+ * <Each
+ *   of={fruits}
+ *   render={(fruit) => <li key={fruit.id}>{fruit.name}</li>}
+ * />
+ *
  * @param {Object} props - The properties of the Each component.
  * @param {T[]} props.of - The array of items to iterate over and render.
  * @param {(item: T, index: number) => ReactNode} props.render - A function that renders each item in the array.
@@ -19,6 +32,10 @@ import { Children } from 'react';
  * @returns {ReactNode} The rendered Each component.
  */
 export function Each({ of, render }) {
-    return Children.toArray(of.map((item, index) => render(item, index)));
+    return of.map((item, index) => {
+        const rendered = render(item, index);
+        const key = isValidElement(rendered) && rendered.key ? rendered.key : index;
+        return <Fragment key={key}>{rendered}</Fragment>;
+    });
 }
 //# sourceMappingURL=Each.jsx.map

package/dist/components/00-base/Each/Each.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Each.jsx","sourceRoot":"","sources":["../../../../src/components/00-base/Each/Each.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAOjD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,IAAI,CAAI,EAAE,EAAE,EAAE,MAAM,EAAgB;IAClD,OAAO,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;AACxE,CAAC"}
+{"version":3,"file":"Each.jsx","sourceRoot":"","sources":["../../../../src/components/00-base/Each/Each.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAkB,MAAM,OAAO,CAAC;AAOjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,UAAU,IAAI,CAAI,EAAE,EAAE,EAAE,MAAM,EAAgB;IAClD,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC5B,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACrC,MAAM,GAAG,GAAG,cAAc,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;QAE5E,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;AACL,CAAC"}

package/dist/components/01-atoms/Badge/Badge.d.ts

@@ -1,21 +1,31 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 type BadgeProps = {
-    modifier: 'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled';
+    modifier: 'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled' | 'violet' | 'cyan' | 'olive' | 'amber';
+    accentLabel?: boolean;
 } & HTMLAttributes<HTMLSpanElement>;
 /**
  * Badge component used for indicating different statuses.
  *
+ * The modifier always colors the border and the dot. With `accentLabel` the
+ * label takes that same color, for outline pills meant to be told apart by hue
+ * alone; without it the label keeps the default text color.
+ *
  * @component
  * @example
- * // Example usage of Badge component
+ * // Default label color
  * <Badge modifier="success">Success</Badge>
  *
+ * @example
+ * // Label in the modifier color
+ * <Badge modifier="info" accentLabel>Reviewing</Badge>
+ *
  * @param {Object} props - The properties of the Badge component.
- * @param {'success' | 'warning' | 'error' | 'info'} props.modifier - The modifier to determine the badge style.
+ * @param {'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled' | 'violet' | 'cyan' | 'olive' | 'amber'} props.modifier - The modifier to determine the badge style.
+ * @param {boolean} [props.accentLabel] - Whether the label takes the modifier color.
  * @param {ReactNode} props.children - The content to be displayed inside the badge.
  *
  * @returns {ReactNode} The rendered Badge component.
  */
-export declare function Badge({ modifier, children, ...restProps }: BadgeProps): ReactNode;
+export declare function Badge({ modifier, accentLabel, children, ...restProps }: BadgeProps): ReactNode;
 export {};
 //# sourceMappingURL=Badge.d.ts.map

package/dist/components/01-atoms/Badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;CAC9E,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAuBpC;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,UAAU,GAAG,SAAS,CAexB"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,KAAK,UAAU,GAAG;IAChB,QAAQ,EACJ,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,GACN,UAAU,GACV,UAAU,GACV,QAAQ,GACR,MAAM,GACN,OAAO,GACP,OAAO,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAqDpC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,UAAU,GAAG,SAAS,CAqBxB"}

package/dist/components/01-atoms/Badge/Badge.jsx

@@ -7,25 +7,55 @@ const styleMap = {
     info: clsx('border-info before:bg-info dark:border-info-dark dark:before:bg-info-dark'),
     progress: clsx('border-lavender before:bg-lavender dark:border-lavender-dark dark:before:bg-lavender-dark'),
     disabled: clsx('border-gray-1 before:bg-gray-1 dark:border-gray-2 dark:before:bg-gray-2'),
+    violet: clsx('border-violet before:bg-violet dark:border-violet-dark dark:before:bg-violet-dark'),
+    cyan: clsx('border-cyan before:bg-cyan dark:border-cyan-dark dark:before:bg-cyan-dark'),
+    olive: clsx('border-olive before:bg-olive dark:border-olive-dark dark:before:bg-olive-dark'),
+    amber: clsx('border-amber before:bg-amber dark:border-amber-dark dark:before:bg-amber-dark'),
+};
+/**
+ * `warning` es la unica que no usa su propio token para la etiqueta: #FFC34C
+ * sobre blanco no llega a 2:1 de contraste y el texto queda ilegible, asi que
+ * toma el amarillo oscuro del tema. El borde y el punto siguen en su color.
+ */
+const accentLabelMap = {
+    success: clsx('text-success dark:text-success-dark'),
+    warning: clsx('text-amber dark:text-warning-dark'),
+    error: clsx('text-error dark:text-error-dark'),
+    info: clsx('text-info dark:text-info-dark'),
+    progress: clsx('text-lavender dark:text-lavender-dark'),
+    disabled: clsx('text-gray-1 dark:text-gray-2'),
+    violet: clsx('text-violet dark:text-violet-dark'),
+    cyan: clsx('text-cyan dark:text-cyan-dark'),
+    olive: clsx('text-olive dark:text-olive-dark'),
+    amber: clsx('text-amber dark:text-amber-dark'),
 };
 /**
  * Badge component used for indicating different statuses.
  *
+ * The modifier always colors the border and the dot. With `accentLabel` the
+ * label takes that same color, for outline pills meant to be told apart by hue
+ * alone; without it the label keeps the default text color.
+ *
  * @component
  * @example
- * // Example usage of Badge component
+ * // Default label color
  * <Badge modifier="success">Success</Badge>
  *
+ * @example
+ * // Label in the modifier color
+ * <Badge modifier="info" accentLabel>Reviewing</Badge>
+ *
  * @param {Object} props - The properties of the Badge component.
- * @param {'success' | 'warning' | 'error' | 'info'} props.modifier - The modifier to determine the badge style.
+ * @param {'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled' | 'violet' | 'cyan' | 'olive' | 'amber'} props.modifier - The modifier to determine the badge style.
+ * @param {boolean} [props.accentLabel] - Whether the label takes the modifier color.
  * @param {ReactNode} props.children - The content to be displayed inside the badge.
  *
  * @returns {ReactNode} The rendered Badge component.
  */
-export function Badge({ modifier, children, ...restProps }) {
+export function Badge({ modifier, accentLabel, children, ...restProps }) {
     const className = clsx('relative inline-block rounded-full border py-1 pr-2 pl-6', 'before:absolute before:start-3 before:top-[50%] before:-mt-1 before:block before:h-[6px] before:w-[6px] before:rounded-full', styleMap[modifier], restProps.className);
     return (<span {...restProps} className={className}>
-      <Paragraph size="chips" className="text-nowrap dark:text-white">
+      <Paragraph size="chips" className={clsx('text-nowrap', accentLabel ? accentLabelMap[modifier] : 'dark:text-white')}>
         {children}
       </Paragraph>
     </span>);

package/dist/components/01-atoms/Badge/Badge.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,MAAM,QAAQ,GAA2C;IACvD,OAAO,EAAE,IAAI,CACX,uFAAuF,CACxF;IACD,OAAO,EAAE,IAAI,CACX,uFAAuF,CACxF;IACD,KAAK,EAAE,IAAI,CACT,+EAA+E,CAChF;IACD,IAAI,EAAE,IAAI,CACR,2EAA2E,CAC5E;IACD,QAAQ,EAAE,IAAI,CACZ,2FAA2F,CAC5F;IACD,QAAQ,EAAE,IAAI,CACZ,yEAAyE,CAC1E;CACF,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,KAAK,CAAC,EACpB,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EACD;IACX,MAAM,SAAS,GAAG,IAAI,CACpB,0DAA0D,EAC1D,6HAA6H,EAC7H,QAAQ,CAAC,QAAQ,CAAC,EAClB,SAAS,CAAC,SAAS,CACpB,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CACxC;MAAA,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,6BAA6B,CAC7D;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,SAAS,CACb;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Badge.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAiBzC,MAAM,QAAQ,GAA2C;IACvD,OAAO,EAAE,IAAI,CACX,uFAAuF,CACxF;IACD,OAAO,EAAE,IAAI,CACX,uFAAuF,CACxF;IACD,KAAK,EAAE,IAAI,CACT,+EAA+E,CAChF;IACD,IAAI,EAAE,IAAI,CACR,2EAA2E,CAC5E;IACD,QAAQ,EAAE,IAAI,CACZ,2FAA2F,CAC5F;IACD,QAAQ,EAAE,IAAI,CACZ,yEAAyE,CAC1E;IACD,MAAM,EAAE,IAAI,CACV,mFAAmF,CACpF;IACD,IAAI,EAAE,IAAI,CACR,2EAA2E,CAC5E;IACD,KAAK,EAAE,IAAI,CACT,+EAA+E,CAChF;IACD,KAAK,EAAE,IAAI,CACT,+EAA+E,CAChF;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,cAAc,GAA2C;IAC7D,OAAO,EAAE,IAAI,CAAC,qCAAqC,CAAC;IACpD,OAAO,EAAE,IAAI,CAAC,mCAAmC,CAAC;IAClD,KAAK,EAAE,IAAI,CAAC,iCAAiC,CAAC;IAC9C,IAAI,EAAE,IAAI,CAAC,+BAA+B,CAAC;IAC3C,QAAQ,EAAE,IAAI,CAAC,uCAAuC,CAAC;IACvD,QAAQ,EAAE,IAAI,CAAC,8BAA8B,CAAC;IAC9C,MAAM,EAAE,IAAI,CAAC,mCAAmC,CAAC;IACjD,IAAI,EAAE,IAAI,CAAC,+BAA+B,CAAC;IAC3C,KAAK,EAAE,IAAI,CAAC,iCAAiC,CAAC;IAC9C,KAAK,EAAE,IAAI,CAAC,iCAAiC,CAAC;CAC/C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,KAAK,CAAC,EACpB,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,GAAG,SAAS,EACD;IACX,MAAM,SAAS,GAAG,IAAI,CACpB,0DAA0D,EAC1D,6HAA6H,EAC7H,QAAQ,CAAC,QAAQ,CAAC,EAClB,SAAS,CAAC,SAAS,CACpB,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CACxC;MAAA,CAAC,SAAS,CACR,IAAI,CAAC,OAAO,CACZ,SAAS,CAAC,CAAC,IAAI,CACb,aAAa,EACb,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAC3D,CAAC,CAEF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,SAAS,CACb;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}

package/dist/components/01-atoms/CountryFlag/CountryFlag.d.ts

@@ -0,0 +1,30 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type CountryFlagProps = {
+    /** Codigo de dos letras del pais, case insensitive. Ej: `MX`, `mx`. */
+    code: string;
+    size?: 'sm' | 'md' | 'lg';
+} & Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
+/**
+ * Bandera circular de un pais, resuelta a partir de su codigo de dos letras.
+ *
+ * Cuando el codigo no tiene bandera definida cae en un circulo neutro con el
+ * codigo escrito, para que un pais nuevo no deje un hueco en la interfaz.
+ *
+ * Es decorativa por defecto. Si se usa sin una etiqueta de texto al lado,
+ * pasarle `aria-label` para que tenga nombre accesible.
+ *
+ * @component
+ * @example
+ * // Junto a un texto que ya nombra al pais
+ * <CountryFlag code="MX" />
+ *
+ * @example
+ * // Sola, con nombre accesible y tamano grande
+ * <CountryFlag code="co" size="lg" aria-label="Colombia" />
+ *
+ * @param {string} props.code - Codigo de dos letras del pais, case insensitive.
+ * @param {'sm' | 'md' | 'lg'} [props.size] - Diametro del circulo. Default `md`.
+ * @returns {ReactNode} La bandera recortada en circulo.
+ */
+export declare function CountryFlag({ code, size, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...restProps }: CountryFlagProps): ReactNode;
+//# sourceMappingURL=CountryFlag.d.ts.map

package/dist/components/01-atoms/CountryFlag/CountryFlag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountryFlag.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/CountryFlag/CountryFlag.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,uEAAuE;IACvE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC;AAwGtD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,IAAW,EACX,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,SAAS,EACb,EAAE,gBAAgB,GAAG,SAAS,CAkC9B"}

package/dist/components/01-atoms/CountryFlag/CountryFlag.jsx

@@ -0,0 +1,105 @@
+import clsx from 'clsx';
+const sizeMap = {
+    sm: 'h-4 w-4 text-[8px]',
+    md: 'h-5 w-5 text-[9px]',
+    lg: 'h-6 w-6 text-[10px]',
+};
+/**
+ * Estrella de cinco puntas con radio 1 centrada en el origen. Se reusa con
+ * `translate` y `scale` en cada bandera que la necesita.
+ */
+const STAR_POINTS = '0,-1 0.225,-0.309 0.951,-0.309 0.363,0.118 0.588,0.809 0,0.382 -0.588,0.809 -0.363,0.118 -0.951,-0.309 -0.225,-0.309';
+const star = (cx, cy, r, fill) => (<polygon points={STAR_POINTS} fill={fill} transform={`translate(${cx} ${cy}) scale(${r})`}/>);
+/**
+ * Cada bandera se dibuja sobre una grilla cuadrada de 24 y el contenedor la
+ * recorta en circulo, asi que lo que se ve es el cuadrado central de la
+ * bandera real. Los escudos y emblemas se omiten a proposito: a 16 o 24 px no
+ * se distinguen y solo agregarian paths enormes.
+ */
+const ARGENTINA = (<>
+    <rect width={24} height={24} fill="#74ACDF"/>
+    <rect y={8} width={24} height={8} fill="#FFFFFF"/>
+    <circle cx={12} cy={12} r={2.6} fill="#F6B40E"/>
+  </>);
+const CHILE = (<>
+    <rect width={24} height={24} fill="#FFFFFF"/>
+    <rect y={12} width={24} height={12} fill="#D52B1E"/>
+    <rect width={9} height={12} fill="#0039A6"/>
+    {star(4.5, 6, 3, '#FFFFFF')}
+  </>);
+const COLOMBIA = (<>
+    <rect width={24} height={24} fill="#FCD116"/>
+    <rect y={12} width={24} height={6} fill="#003893"/>
+    <rect y={18} width={24} height={6} fill="#CE1126"/>
+  </>);
+const MEXICO = (<>
+    <rect width={8} height={24} fill="#006847"/>
+    <rect x={8} width={8} height={24} fill="#FFFFFF"/>
+    <rect x={16} width={8} height={24} fill="#CE1126"/>
+  </>);
+const PANAMA = (<>
+    <rect width={24} height={24} fill="#FFFFFF"/>
+    <rect x={12} width={12} height={12} fill="#DA121A"/>
+    <rect y={12} width={12} height={12} fill="#072357"/>
+    {star(6, 6, 3.2, '#072357')}
+    {star(18, 18, 3.2, '#DA121A')}
+  </>);
+const PERU = (<>
+    <rect width={8} height={24} fill="#D91023"/>
+    <rect x={8} width={8} height={24} fill="#FFFFFF"/>
+    <rect x={16} width={8} height={24} fill="#D91023"/>
+  </>);
+const URUGUAY = (<>
+    <rect width={24} height={24} fill="#FFFFFF"/>
+    <rect y={5.5} width={24} height={2.7} fill="#0038A8"/>
+    <rect y={11} width={24} height={2.7} fill="#0038A8"/>
+    <rect y={16.5} width={24} height={2.7} fill="#0038A8"/>
+    <rect y={22} width={24} height={2} fill="#0038A8"/>
+    <rect width={13} height={13} fill="#FFFFFF"/>
+    <circle cx={6.5} cy={6.5} r={3} fill="#FCD116"/>
+  </>);
+const flagMap = {
+    AR: ARGENTINA,
+    CL: CHILE,
+    CO: COLOMBIA,
+    MX: MEXICO,
+    PA: PANAMA,
+    PE: PERU,
+    UY: URUGUAY,
+    /** `UR` no es ISO, pero hay catalogos que identifican asi a Uruguay. */
+    UR: URUGUAY,
+};
+/**
+ * Bandera circular de un pais, resuelta a partir de su codigo de dos letras.
+ *
+ * Cuando el codigo no tiene bandera definida cae en un circulo neutro con el
+ * codigo escrito, para que un pais nuevo no deje un hueco en la interfaz.
+ *
+ * Es decorativa por defecto. Si se usa sin una etiqueta de texto al lado,
+ * pasarle `aria-label` para que tenga nombre accesible.
+ *
+ * @component
+ * @example
+ * // Junto a un texto que ya nombra al pais
+ * <CountryFlag code="MX" />
+ *
+ * @example
+ * // Sola, con nombre accesible y tamano grande
+ * <CountryFlag code="co" size="lg" aria-label="Colombia" />
+ *
+ * @param {string} props.code - Codigo de dos letras del pais, case insensitive.
+ * @param {'sm' | 'md' | 'lg'} [props.size] - Diametro del circulo. Default `md`.
+ * @returns {ReactNode} La bandera recortada en circulo.
+ */
+export function CountryFlag({ code, size = 'md', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...restProps }) {
+    const normalized = (code ?? '').trim().toUpperCase();
+    const flag = flagMap[normalized];
+    const hasAccessibleName = Boolean(ariaLabel || ariaLabelledBy);
+    return (<span {...restProps} role={hasAccessibleName ? 'img' : undefined} aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} aria-hidden={hasAccessibleName ? undefined : true} className={clsx('inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full', !flag &&
+            'border-gray-5 text-gray-1 dark:border-gray-1 dark:text-gray-2 border font-bold', sizeMap[size], restProps.className)}>
+      {flag ? (<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" focusable="false" className="h-full w-full">
+          {flag}
+        </svg>) : (normalized.slice(0, 2))}
+    </span>);
+}
+//# sourceMappingURL=CountryFlag.jsx.map

package/dist/components/01-atoms/CountryFlag/CountryFlag.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountryFlag.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/CountryFlag/CountryFlag.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AASxB,MAAM,OAAO,GAA0D;IACrE,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,qBAAqB;CAC1B,CAAC;AAEF;;;GAGG;AACH,MAAM,WAAW,GACf,sHAAsH,CAAC;AAEzH,MAAM,IAAI,GAAG,CAAC,EAAU,EAAE,EAAU,EAAE,CAAS,EAAE,IAAY,EAAa,EAAE,CAAC,CAC3E,CAAC,OAAO,CACN,MAAM,CAAC,CAAC,WAAW,CAAC,CACpB,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,SAAS,CAAC,CAAC,aAAa,EAAE,IAAI,EAAE,WAAW,CAAC,GAAG,CAAC,EAChD,CACH,CAAC;AAEF;;;;;GAKG;AACH,MAAM,SAAS,GAAc,CAC3B,EACE;IAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAC3C;IAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAChD;IAAA,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,EAChD;EAAA,GAAG,CACJ,CAAC;AAEF,MAAM,KAAK,GAAc,CACvB,EACE;IAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAC3C;IAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAClD;IAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAC1C;IAAA,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC,CAC7B;EAAA,GAAG,CACJ,CAAC;AAEF,MAAM,QAAQ,GAAc,CAC1B,EACE;IAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAC3C;IAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EACjD;IAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EACnD;EAAA,GAAG,CACJ,CAAC;AAEF,MAAM,MAAM,GAAc,CACxB,EACE;IAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAC1C;IAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAChD;IAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EACnD;EAAA,GAAG,CACJ,CAAC;AAEF,MAAM,MAAM,GAAc,CACxB,EACE;IAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAC3C;IAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAClD;IAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAClD;IAAA,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,SAAS,CAAC,CAC3B;IAAA,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,SAAS,CAAC,CAC/B;EAAA,GAAG,CACJ,CAAC;AAEF,MAAM,IAAI,GAAc,CACtB,EACE;IAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAC1C;IAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAChD;IAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EACnD;EAAA,GAAG,CACJ,CAAC;AAEF,MAAM,OAAO,GAAc,CACzB,EACE;IAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAC3C;IAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,EACpD;IAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,EACnD;IAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,EACrD;IAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EACjD;IAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAC3C;IAAA,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAChD;EAAA,GAAG,CACJ,CAAC;AAEF,MAAM,OAAO,GAA8B;IACzC,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,OAAO;IACX,wEAAwE;IACxE,EAAE,EAAE,OAAO;CACZ,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,SAAS,EACK;IACjB,MAAM,UAAU,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IACrD,MAAM,IAAI,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IACjC,MAAM,iBAAiB,GAAG,OAAO,CAAC,SAAS,IAAI,cAAc,CAAC,CAAC;IAE/D,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAC5C,UAAU,CAAC,CAAC,SAAS,CAAC,CACtB,eAAe,CAAC,CAAC,cAAc,CAAC,CAChC,WAAW,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAClD,SAAS,CAAC,CAAC,IAAI,CACb,+EAA+E,EAC/E,CAAC,IAAI;YACH,gFAAgF,EAClF,OAAO,CAAC,IAAI,CAAC,EACb,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CACN,CAAC,GAAG,CACF,OAAO,CAAC,WAAW,CACnB,KAAK,CAAC,4BAA4B,CAClC,SAAS,CAAC,OAAO,CACjB,SAAS,CAAC,eAAe,CAEzB;UAAA,CAAC,IAAI,CACP;QAAA,EAAE,GAAG,CAAC,CACP,CAAC,CAAC,CAAC,CACF,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CACvB,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}

package/dist/components/01-atoms/CountryFlag/index.d.ts

@@ -0,0 +1,3 @@
+export { CountryFlag } from './CountryFlag';
+export type { CountryFlagProps } from './CountryFlag';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/01-atoms/CountryFlag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/CountryFlag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/01-atoms/CountryFlag/index.js

@@ -0,0 +1,2 @@
+export { CountryFlag } from './CountryFlag';
+//# sourceMappingURL=index.js.map

package/dist/components/01-atoms/CountryFlag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/01-atoms/CountryFlag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/01-atoms/Input/Input.d.ts

@@ -8,6 +8,7 @@ type InputProps = {
     error?: string;
     iconL?: ReactNode;
     iconR?: ReactNode;
+    isMutedWhenEmpty?: boolean;
     showPasswordAriaLabel?: string;
     hidePasswordAriaLabel?: string;
 };
@@ -33,9 +34,10 @@ type InputProps = {
  * @param {string} [props.error] - Optional error message to be displayed below the input field.
  * @param {ReactNode} [props.iconL] - Optional icon to be displayed to the left of the input field.
  * @param {ReactNode} [props.iconR] - Optional icon to be displayed to the right of the input field.
+ * @param {boolean} [props.isMutedWhenEmpty] - Renders the border and label in gray while the field has no value.
  *
  * @returns {ReactNode} The rendered Input component.
  */
-export declare function Input({ label, input, helperText, error, iconL, iconR, showPasswordAriaLabel, hidePasswordAriaLabel, }: InputProps): ReactNode;
+export declare function Input({ label, input, helperText, error, iconL, iconR, isMutedWhenEmpty, showPasswordAriaLabel, hidePasswordAriaLabel, }: InputProps): ReactNode;
 export {};
 //# sourceMappingURL=Input.d.ts.map

package/dist/components/01-atoms/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Input/Input.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAKf,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QACL,IAAI,EAAE,IAAI,CACR,iBAAiB,CACf,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,gBAAgB,CACjB,CAAC,MAAM,CAAC,EACT,QAAQ,GAAG,UAAU,GAAG,OAAO,CAChC,CAAC;KACH,GAAG,IAAI,CACN,iBAAiB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,EAC1E,aAAa,CACd,CAAC;IACF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,KAAK,EACL,UAAU,EACV,KAAK,EACL,KAAK,EACL,KAAK,EACL,qBAAqB,EACrB,qBAAqB,GACtB,EAAE,UAAU,GAAG,SAAS,CA+FxB"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Input/Input.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAKf,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QACL,IAAI,EAAE,IAAI,CACR,iBAAiB,CACf,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,gBAAgB,CACjB,CAAC,MAAM,CAAC,EACT,QAAQ,GAAG,UAAU,GAAG,OAAO,CAChC,CAAC;KACH,GAAG,IAAI,CACN,iBAAiB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,EAC1E,aAAa,CACd,CAAC;IACF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,KAAK,EACL,UAAU,EACV,KAAK,EACL,KAAK,EACL,KAAK,EACL,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,GACtB,EAAE,UAAU,GAAG,SAAS,CAiGxB"}

package/dist/components/01-atoms/Input/Input.jsx

@@ -26,10 +26,11 @@ import { RenderErrorOrHelperText } from './utils/RenderErrorOrHelperText';
  * @param {string} [props.error] - Optional error message to be displayed below the input field.
  * @param {ReactNode} [props.iconL] - Optional icon to be displayed to the left of the input field.
  * @param {ReactNode} [props.iconR] - Optional icon to be displayed to the right of the input field.
+ * @param {boolean} [props.isMutedWhenEmpty] - Renders the border and label in gray while the field has no value.
  *
  * @returns {ReactNode} The rendered Input component.
  */
-export function Input({ label, input, helperText, error, iconL, iconR, showPasswordAriaLabel, hidePasswordAriaLabel, }) {
+export function Input({ label, input, helperText, error, iconL, iconR, isMutedWhenEmpty, showPasswordAriaLabel, hidePasswordAriaLabel, }) {
     const generatedId = useId();
     const [showPassword, setShowPassword] = useState(false);
     const id = input.id ?? generatedId;
@@ -39,7 +40,9 @@ export function Input({ label, input, helperText, error, iconL, iconR, showPassw
     const isPassword = input.type === 'password';
     const effectiveType = isPassword && showPassword ? 'text' : input.type;
     const inputClasses = clsx('peer disabled:text-gray-3 dark:disabled:text-gray-2 h-full w-full rounded-full bg-transparent px-5 text-sm font-normal text-black outline-0 transition-all focus:text-black dark:text-white dark:focus:text-white', input.className);
-    const { labelProps, legendClasses, fieldsetClasses } = generateBorder(error);
+    const { labelProps, legendClasses, fieldsetClasses } = generateBorder(error, {
+        isMutedWhenEmpty,
+    });
     labelProps.htmlFor = id;
     const rightSlot = isPassword ? (<button type="button" onClick={() => setShowPassword((prev) => !prev)} aria-pressed={showPassword} aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel} disabled={input.disabled} className={clsx('disabled:text-gray-3 dark:disabled:text-gray-2 flex cursor-pointer items-center justify-center rounded-full p-1 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-black/20 disabled:cursor-not-allowed dark:focus-visible:ring-white/30', error
             ? 'text-error dark:text-error-dark'

package/dist/components/01-atoms/Input/Input.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Input.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Input/Input.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Input.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Input/Input.tsx"],"names":[],"mappings":"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"}

package/dist/components/01-atoms/Input/utils/border.d.ts

@@ -1,4 +1,8 @@
-export declare const generateBorder: (error?: string) => {
+type BorderOptions = {
+    isMuted?: boolean;
+    isMutedWhenEmpty?: boolean;
+};
+export declare const generateBorder: (error?: string, { isMuted, isMutedWhenEmpty }?: BorderOptions) => {
     labelProps: {
         htmlFor?: string;
         className: string;
@@ -6,4 +10,5 @@ export declare const generateBorder: (error?: string) => {
     fieldsetClasses: string;
     legendClasses: string;
 };
+export {};
 //# sourceMappingURL=border.d.ts.map

package/dist/components/01-atoms/Input/utils/border.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"border.d.ts","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/border.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,WAAY,MAAM;;kBACb,MAAM;mBAAa,MAAM;;;;CAyBxD,CAAC"}
+{"version":3,"file":"border.d.ts","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/border.ts"],"names":[],"mappings":"AAEA,KAAK,aAAa,GAAG;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,cAAc,WACjB,MAAM,kCACiB,aAAa;;kBAEd,MAAM;mBAAa,MAAM;;;;CAqCxD,CAAC"}

package/dist/components/01-atoms/Input/utils/border.js

@@ -1,11 +1,21 @@
 import clsx from 'clsx';
-export const generateBorder = (error) => {
+export const generateBorder = (error, { isMuted, isMutedWhenEmpty } = {}) => {
     const labelProps = {
-        className: clsx('pointer-events-none absolute -top-2 left-[1.0625rem] truncate overflow-visible px-1 text-xs leading-tight transition-all select-none', 'peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 peer-not-empty:-top-2 peer-not-empty:text-xs peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-sm peer-placeholder-shown:leading-tight peer-autofill:-top-2 peer-autofill:text-xs peer-focus:-top-2 peer-focus:text-xs', error ? 'text-error dark:text-error-dark' : 'text-black dark:text-white'),
+        className: clsx('pointer-events-none absolute -top-2 left-[1.0625rem] truncate overflow-visible px-1 text-xs leading-tight transition-all select-none', 'peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 peer-not-empty:-top-2 peer-not-empty:text-xs peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-sm peer-placeholder-shown:leading-tight peer-autofill:-top-2 peer-autofill:text-xs peer-focus:-top-2 peer-focus:text-xs', error
+            ? 'text-error dark:text-error-dark'
+            : isMuted
+                ? 'text-gray-2 dark:text-gray-2'
+                : 'text-black dark:text-white', !error &&
+            isMutedWhenEmpty &&
+            'peer-placeholder-shown:text-gray-2 dark:peer-placeholder-shown:text-gray-2'),
     };
     const fieldsetClasses = clsx('pointer-events-none absolute -top-2 left-0 h-[calc(100%+.5rem)] w-full rounded-full border px-4', 'peer-disabled:border-gray-3 dark:peer-disabled:border-gray-2 peer-not-empty:*:max-w-full peer-not-empty:*:px-1 peer-placeholder-shown:*:max-w-0 peer-placeholder-shown:*:px-0 peer-autofill:max-w-full peer-autofill:*:px-1 peer-focus:*:max-w-full peer-focus:*:px-1', error
         ? 'border-error dark:border-error-dark'
-        : 'border-black dark:border-white');
+        : isMuted
+            ? 'border-gray-3 dark:border-gray-2'
+            : 'border-black dark:border-white', !error &&
+        isMutedWhenEmpty &&
+        'peer-placeholder-shown:border-gray-3 dark:peer-placeholder-shown:border-gray-2 peer-focus:border-black dark:peer-focus:border-white');
     const legendClasses = clsx('invisible max-w-full px-1 text-left text-xs text-nowrap transition-all');
     return {
         labelProps,

package/dist/components/01-atoms/Input/utils/border.js.map

@@ -1 +1 @@
-{"version":3,"file":"border.js","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/border.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAc,EAAE,EAAE;IAC/C,MAAM,UAAU,GAA4C;QAC1D,SAAS,EAAE,IAAI,CACb,sIAAsI,EACtI,0RAA0R,EAC1R,KAAK,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,4BAA4B,CACzE;KACF,CAAC;IAEF,MAAM,eAAe,GAAG,IAAI,CAC1B,iGAAiG,EACjG,uQAAuQ,EACvQ,KAAK;QACH,CAAC,CAAC,qCAAqC;QACvC,CAAC,CAAC,gCAAgC,CACrC,CAAC;IAEF,MAAM,aAAa,GAAG,IAAI,CACxB,wEAAwE,CACzE,CAAC;IAEF,OAAO;QACL,UAAU;QACV,eAAe;QACf,aAAa;KACd,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"border.js","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/border.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,KAAc,EACd,EAAE,OAAO,EAAE,gBAAgB,KAAoB,EAAE,EACjD,EAAE;IACF,MAAM,UAAU,GAA4C;QAC1D,SAAS,EAAE,IAAI,CACb,sIAAsI,EACtI,0RAA0R,EAC1R,KAAK;YACH,CAAC,CAAC,iCAAiC;YACnC,CAAC,CAAC,OAAO;gBACP,CAAC,CAAC,8BAA8B;gBAChC,CAAC,CAAC,4BAA4B,EAClC,CAAC,KAAK;YACJ,gBAAgB;YAChB,4EAA4E,CAC/E;KACF,CAAC;IAEF,MAAM,eAAe,GAAG,IAAI,CAC1B,iGAAiG,EACjG,uQAAuQ,EACvQ,KAAK;QACH,CAAC,CAAC,qCAAqC;QACvC,CAAC,CAAC,OAAO;YACP,CAAC,CAAC,kCAAkC;YACpC,CAAC,CAAC,gCAAgC,EACtC,CAAC,KAAK;QACJ,gBAAgB;QAChB,qIAAqI,CACxI,CAAC;IAEF,MAAM,aAAa,GAAG,IAAI,CACxB,wEAAwE,CACzE,CAAC;IAEF,OAAO;QACL,UAAU;QACV,eAAe;QACf,aAAa;KACd,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/01-atoms/MultiSelect/MultiSelect.d.ts

@@ -11,6 +11,7 @@ type MultiSelectProps = {
     disabled?: boolean;
     helperText?: string;
     error?: string;
+    isMutedWhenEmpty?: boolean;
     clearButtonAriaLabel?: string;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'onClick'>;
 /**
@@ -43,11 +44,12 @@ type MultiSelectProps = {
  * @param {boolean} [props.disabled] - Boolean to disable the multi-select input.
  * @param {string} [props.helperText] - Helper text to be displayed below the input.
  * @param {string} [props.error] - Error message to be displayed below the input.
+ * @param {boolean} [props.isMutedWhenEmpty] - Renders the border and label in gray while nothing is selected.
  * @param {string} [props.clearButtonAriaLabel] - Accessible label for the button that clears the selection.
  * @param {HTMLAttributes<HTMLDivElement>} [props.restProps] - Additional HTML attributes for the container div.
  *
  * @returns {ReactNode} The rendered MultiSelect component.
  */
-export declare function MultiSelect({ options, value, onChange, label, disabled, helperText, error, clearButtonAriaLabel, ...restProps }: MultiSelectProps): ReactNode;
+export declare function MultiSelect({ options, value, onChange, label, disabled, helperText, error, isMutedWhenEmpty, clearButtonAriaLabel, ...restProps }: MultiSelectProps): ReactNode;
 export {};
 //# sourceMappingURL=MultiSelect.d.ts.map

package/dist/components/01-atoms/MultiSelect/MultiSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,cAAc,EAEnB,SAAS,EAIV,MAAM,OAAO,CAAC;AASf,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,eAAe,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,CAAC;AAIpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAqB,EACrB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,oBAAoB,EACpB,GAAG,SAAS,EACb,EAAE,gBAAgB,GAAG,SAAS,CAoT9B"}
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,cAAc,EAEnB,SAAS,EAIV,MAAM,OAAO,CAAC;AASf,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,eAAe,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,CAAC;AAIpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAqB,EACrB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,oBAAoB,EACpB,GAAG,SAAS,EACb,EAAE,gBAAgB,GAAG,SAAS,CAmU9B"}

package/dist/components/01-atoms/MultiSelect/MultiSelect.jsx

@@ -39,12 +39,13 @@ const EMPTY_OPTIONS = [];
  * @param {boolean} [props.disabled] - Boolean to disable the multi-select input.
  * @param {string} [props.helperText] - Helper text to be displayed below the input.
  * @param {string} [props.error] - Error message to be displayed below the input.
+ * @param {boolean} [props.isMutedWhenEmpty] - Renders the border and label in gray while nothing is selected.
  * @param {string} [props.clearButtonAriaLabel] - Accessible label for the button that clears the selection.
  * @param {HTMLAttributes<HTMLDivElement>} [props.restProps] - Additional HTML attributes for the container div.
  *
  * @returns {ReactNode} The rendered MultiSelect component.
  */
-export function MultiSelect({ options, value = EMPTY_OPTIONS, onChange, label, disabled, helperText, error, clearButtonAriaLabel, ...restProps }) {
+export function MultiSelect({ options, value = EMPTY_OPTIONS, onChange, label, disabled, helperText, error, isMutedWhenEmpty, clearButtonAriaLabel, ...restProps }) {
     const [id, setId] = useState('');
     const [filteredOptions, setFilteredOptions] = useState([]);
     const [selectedOptions, setSelectedOptions] = useState(value);
@@ -56,7 +57,10 @@ export function MultiSelect({ options, value = EMPTY_OPTIONS, onChange, label, d
     const listboxId = `${id}-listbox`;
     const feedbackId = `${id}-feedback`;
     const inputClasses = clsx('peer disabled:text-gray-3 dark:disabled:text-gray-2 pointer-events-none h-full w-full rounded-full bg-transparent px-5 text-sm font-normal text-black outline-0 transition-all select-none focus:text-black dark:text-white dark:focus:text-white');
-    const { labelProps, legendClasses, fieldsetClasses } = generateBorder(error);
+    const isMuted = Boolean(isMutedWhenEmpty) && !selectedOptions.length;
+    const { labelProps, legendClasses, fieldsetClasses } = generateBorder(error, {
+        isMuted,
+    });
     const handleToggleDropdown = () => {
         if (disabled) {
             return;
@@ -166,11 +170,19 @@ export function MultiSelect({ options, value = EMPTY_OPTIONS, onChange, label, d
         <input ref={triggerRef} id={id} role="combobox" placeholder=" " value={selectedOptions.length
             ? `${selectedOptions.length} seleccionado(s)`
             : ''} readOnly className={inputClasses} disabled={disabled} aria-expanded={isOpen} aria-haspopup="listbox" aria-controls={listboxId} aria-invalid={Boolean(error)} aria-describedby={error || helperText ? feedbackId : undefined} onKeyDown={handleTriggerKeyDown}/>
-        <label {...labelProps} htmlFor={id || undefined} className={clsx(labelProps.className, 'dark:peer-disabled:text-gray-2', error ? 'dark:text-error-dark' : 'dark:text-white')}>
+        <label {...labelProps} htmlFor={id || undefined} className={clsx(labelProps.className, 'dark:peer-disabled:text-gray-2', error
+            ? 'dark:text-error-dark'
+            : isMuted
+                ? 'dark:text-gray-2'
+                : 'dark:text-white')}>
           {label}
         </label>
-        <FaSortDown aria-hidden="true" className="absolute top-2 right-4 dark:text-white"/>
-        <fieldset className={clsx(fieldsetClasses, 'dark:peer-disabled:border-gray-2', error ? 'dark:border-error-dark' : 'dark:border-white')}>
+        <FaSortDown aria-hidden="true" className={clsx('absolute top-2 right-4', isMuted ? 'text-gray-2 dark:text-gray-2' : 'dark:text-white')}/>
+        <fieldset className={clsx(fieldsetClasses, 'dark:peer-disabled:border-gray-2', error
+            ? 'dark:border-error-dark'
+            : isMuted
+                ? 'dark:border-gray-2'
+                : 'dark:border-white')}>
           <legend className={legendClasses}>{label}</legend>
         </fieldset>
       </div>