@clicoh/orion-library 1.2.0-beta.1 → 1.2.0-beta.10

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

@@ -0,0 +1,38 @@
+import { type DetailedHTMLProps, type ReactNode, type TextareaHTMLAttributes } from 'react';
+type TextareaProps = {
+    label: string;
+    textarea: Omit<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'placeholder'>;
+    helperText?: string;
+    error?: string;
+    placeholder?: string;
+    hideLabel?: boolean;
+};
+/**
+ * Textarea component for multi-line text, matching Input's border, color, disabled and error
+ * states. It uses a static label above the field instead of Input's floating notch: a floating
+ * label has no natural resting place once the field grows past one line.
+ *
+ * @component
+ * @example
+ * // Example usage of Textarea component
+ * <Textarea
+ *   label="Observaciones"
+ *   textarea={{ value: 'Texto', rows: 3, onChange: () => console.log('Textarea changed') }}
+ *   placeholder="Notas operativas"
+ *   helperText="Opcional"
+ *   error="Campo requerido"
+ * />
+ *
+ * @param {Object} props - The properties of the Textarea component.
+ * @param {string} props.label - The label text shown above the field.
+ * @param {Object} props.textarea - Native textarea attributes (value, rows, onChange, disabled, ...).
+ * @param {string} [props.helperText] - Optional helper text to be displayed below the field.
+ * @param {string} [props.error] - Optional error message to be displayed below the field.
+ * @param {string} [props.placeholder] - Placeholder shown inside the field.
+ * @param {boolean} [props.hideLabel] - Keeps the label for assistive technology only.
+ *
+ * @returns {ReactNode} The rendered Textarea component.
+ */
+export declare function Textarea({ label, textarea, helperText, error, placeholder, hideLabel, }: TextareaProps): ReactNode;
+export {};
+//# sourceMappingURL=Textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Textarea/Textarea.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,sBAAsB,EAE5B,MAAM,OAAO,CAAC;AAGf,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,IAAI,CACZ,iBAAiB,CACf,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,mBAAmB,CACpB,EACD,aAAa,CACd,CAAC;IACF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,WAAW,EACX,SAAiB,GAClB,EAAE,aAAa,GAAG,SAAS,CA+C3B"}

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

@@ -0,0 +1,50 @@
+'use client';
+import clsx from 'clsx';
+import { useId, } from 'react';
+import { RenderErrorOrHelperText } from '../Input/utils/RenderErrorOrHelperText';
+/**
+ * Textarea component for multi-line text, matching Input's border, color, disabled and error
+ * states. It uses a static label above the field instead of Input's floating notch: a floating
+ * label has no natural resting place once the field grows past one line.
+ *
+ * @component
+ * @example
+ * // Example usage of Textarea component
+ * <Textarea
+ *   label="Observaciones"
+ *   textarea={{ value: 'Texto', rows: 3, onChange: () => console.log('Textarea changed') }}
+ *   placeholder="Notas operativas"
+ *   helperText="Opcional"
+ *   error="Campo requerido"
+ * />
+ *
+ * @param {Object} props - The properties of the Textarea component.
+ * @param {string} props.label - The label text shown above the field.
+ * @param {Object} props.textarea - Native textarea attributes (value, rows, onChange, disabled, ...).
+ * @param {string} [props.helperText] - Optional helper text to be displayed below the field.
+ * @param {string} [props.error] - Optional error message to be displayed below the field.
+ * @param {string} [props.placeholder] - Placeholder shown inside the field.
+ * @param {boolean} [props.hideLabel] - Keeps the label for assistive technology only.
+ *
+ * @returns {ReactNode} The rendered Textarea component.
+ */
+export function Textarea({ label, textarea, helperText, error, placeholder, hideLabel = false, }) {
+    const generatedId = useId();
+    const id = textarea.id ?? generatedId;
+    const descriptionId = error || helperText ? `${id}-description` : undefined;
+    const describedBy = [textarea['aria-describedby'], descriptionId].filter(Boolean).join(' ') ||
+        undefined;
+    const textareaClasses = clsx('w-full resize-y rounded-lg border bg-transparent p-3.5 text-sm text-black transition-colors outline-none placeholder:text-gray-2 dark:text-white dark:placeholder:text-gray-2', 'disabled:border-gray-3 disabled:text-gray-3 dark:disabled:border-gray-2 dark:disabled:text-gray-2 disabled:cursor-not-allowed', error
+        ? 'border-error focus:border-error focus:ring-error dark:border-error-dark dark:focus:border-error-dark dark:focus:ring-error-dark focus:ring-2'
+        : 'border-black hover:border-gray-1 focus:border-lavender focus:ring-lavender dark:border-white dark:hover:border-gray-2 focus:ring-2', textarea.className);
+    return (<div className="w-full max-w-full">
+      {hideLabel ? (<label htmlFor={id} className="sr-only">
+          {label}
+        </label>) : (<label htmlFor={id} className="text-gray-1 mb-1.5 ml-0.5 block text-xs font-semibold">
+          {label}
+        </label>)}
+      <textarea {...textarea} id={id} className={textareaClasses} placeholder={placeholder} aria-invalid={error ? true : textarea['aria-invalid']} aria-describedby={describedBy}/>
+      <RenderErrorOrHelperText id={descriptionId} disabled={textarea.disabled} helperText={helperText} error={error}/>
+    </div>);
+}
+//# sourceMappingURL=Textarea.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAIL,KAAK,GACN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAiBjF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,WAAW,EACX,SAAS,GAAG,KAAK,GACH;IACd,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,EAAE,GAAG,QAAQ,CAAC,EAAE,IAAI,WAAW,CAAC;IACtC,MAAM,aAAa,GAAG,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5E,MAAM,WAAW,GACf,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,aAAa,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QACvE,SAAS,CAAC;IAEZ,MAAM,eAAe,GAAG,IAAI,CAC1B,+KAA+K,EAC/K,+HAA+H,EAC/H,KAAK;QACH,CAAC,CAAC,8IAA8I;QAChJ,CAAC,CAAC,oIAAoI,EACxI,QAAQ,CAAC,SAAS,CACnB,CAAC;IAEF,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,mBAAmB,CAChC;MAAA,CAAC,SAAS,CAAC,CAAC,CAAC,CACX,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,SAAS,CACrC;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,KAAK,CAAC,CACT,CAAC,CAAC,CAAC,CACF,CAAC,KAAK,CACJ,OAAO,CAAC,CAAC,EAAE,CAAC,CACZ,SAAS,CAAC,uDAAuD,CAEjE;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,KAAK,CAAC,CACT,CACD;MAAA,CAAC,QAAQ,CACP,IAAI,QAAQ,CAAC,CACb,EAAE,CAAC,CAAC,EAAE,CAAC,CACP,SAAS,CAAC,CAAC,eAAe,CAAC,CAC3B,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CACtD,gBAAgB,CAAC,CAAC,WAAW,CAAC,EAEhC;MAAA,CAAC,uBAAuB,CACtB,EAAE,CAAC,CAAC,aAAa,CAAC,CAClB,QAAQ,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAC5B,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,KAAK,CAAC,CAAC,KAAK,CAAC,EAEjB;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Toast/Toast.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,KAAK,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AA+B5C;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,CAY9D"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Toast/Toast.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,KAAK,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AA+B5C;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,CAgB9D"}

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

@@ -27,7 +27,9 @@ const backgroundClasses = {
  * @returns {void}
  */
 export function showToast(content, type) {
-    toastFn(<Paragraph className="text-black dark:text-white">{content}</Paragraph>, {
+    // A render function instead of an element: react-toastify clones a plain element
+    // with `closeToast`/`toastProps`, which `Paragraph` would forward to the DOM `<p>`.
+    toastFn(() => (<Paragraph className="text-black dark:text-white">{content}</Paragraph>), {
         position: 'top-right',
         hideProgressBar: true,
         pauseOnFocusLoss: false,

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,MAAM,WAAW,GAAG,IAAI,CAAC,sCAAsC,CAAC,CAAC;AAEjE,MAAM,KAAK,GAA4B;IACrC,OAAO,EAAE,CACP,CAAC,OAAO,CACN,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,iCAAiC,CAAC,CAAC,EAChE,CACH;IACD,OAAO,EAAE,CACP,CAAC,SAAS,CACR,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,iCAAiC,CAAC,CAAC,EAChE,CACH;IACD,KAAK,EAAE,CACL,CAAC,OAAO,CACN,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,6BAA6B,CAAC,CAAC,EAC5D,CACH;CACF,CAAC;AAEF,MAAM,iBAAiB,GAAyB;IAC9C,OAAO,EAAE,qCAAqC;IAC9C,OAAO,EAAE,qCAAqC;IAC9C,KAAK,EAAE,iCAAiC;CACzC,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,SAAS,CAAC,OAAkB,EAAE,IAAU;IACtD,OAAO,CACL,CAAC,SAAS,CAAC,SAAS,CAAC,4BAA4B,CAAC,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,EACvE;QACE,QAAQ,EAAE,WAAW;QACrB,eAAe,EAAE,IAAI;QACrB,gBAAgB,EAAE,KAAK;QACvB,UAAU,EAAE,IAAI;QAChB,IAAI,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC;QACvB,SAAS,EAAE,iBAAiB,CAAC,IAAI,CAAC;KACnC,CACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Toast.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,MAAM,WAAW,GAAG,IAAI,CAAC,sCAAsC,CAAC,CAAC;AAEjE,MAAM,KAAK,GAA4B;IACrC,OAAO,EAAE,CACP,CAAC,OAAO,CACN,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,iCAAiC,CAAC,CAAC,EAChE,CACH;IACD,OAAO,EAAE,CACP,CAAC,SAAS,CACR,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,iCAAiC,CAAC,CAAC,EAChE,CACH;IACD,KAAK,EAAE,CACL,CAAC,OAAO,CACN,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,6BAA6B,CAAC,CAAC,EAC5D,CACH;CACF,CAAC;AAEF,MAAM,iBAAiB,GAAyB;IAC9C,OAAO,EAAE,qCAAqC;IAC9C,OAAO,EAAE,qCAAqC;IAC9C,KAAK,EAAE,iCAAiC;CACzC,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,SAAS,CAAC,OAAkB,EAAE,IAAU;IACtD,iFAAiF;IACjF,oFAAoF;IACpF,OAAO,CACL,GAAG,EAAE,CAAC,CACJ,CAAC,SAAS,CAAC,SAAS,CAAC,4BAA4B,CAAC,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CACxE,EACD;QACE,QAAQ,EAAE,WAAW;QACrB,eAAe,EAAE,IAAI;QACrB,gBAAgB,EAAE,KAAK;QACvB,UAAU,EAAE,IAAI;QAChB,IAAI,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC;QACvB,SAAS,EAAE,iBAAiB,CAAC,IAAI,CAAC;KACnC,CACF,CAAC;AACJ,CAAC"}

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

@@ -2,8 +2,10 @@ export * from './List';
 export * from './Logo';
 export * from './Badge';
 export * from './Input';
+export * from './Textarea';
 export * from './Radio';
 export * from './Button';
+export * from './IconButton';
 export * from './Select';
 export * from './Heading';
 export * from './Checkbox';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/01-atoms/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/01-atoms/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}

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

@@ -2,8 +2,10 @@ export * from './List';
 export * from './Logo';
 export * from './Badge';
 export * from './Input';
+export * from './Textarea';
 export * from './Radio';
 export * from './Button';
+export * from './IconButton';
 export * from './Select';
 export * from './Heading';
 export * from './Checkbox';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/01-atoms/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/01-atoms/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}

package/dist/components/02-molecules/Accordion/Accordion.d.ts

@@ -1,8 +1,12 @@
 import { ReactElement, ReactNode } from 'react';
 import { AccordionSectionProps } from './AccordionSection';
+import { type AccordionModifier } from './AccordionContext';
+export type { AccordionModifier };
 type AccordionProps = {
     children: ReactElement<AccordionSectionProps> | ReactElement<AccordionSectionProps>[];
     className?: string;
+    modifier?: AccordionModifier;
+    defaultActivated?: string[];
 };
 /**
  * Accordion component for displaying a list of collapsible sections.
@@ -11,16 +15,23 @@ type AccordionProps = {
  * @example
  * // Example usage of Accordion component
  * <Accordion className="custom-class">
- *   <AccordionSection title="Section 1">Content 1</AccordionSection>
- *   <AccordionSection title="Section 2">Content 2</AccordionSection>
+ *   <AccordionSection title="Section 1" id="1">Content 1</AccordionSection>
+ *   <AccordionSection title="Section 2" id="2">Content 2</AccordionSection>
+ * </Accordion>
+ *
+ * @example
+ * // Flat headers, with the first section open on mount
+ * <Accordion modifier="plain" defaultActivated={['1']}>
+ *   <AccordionSection title="Section 1" id="1">Content 1</AccordionSection>
  * </Accordion>
  *
  * @param {Object} props - The properties of the Accordion component.
  * @param {ReactElement<AccordionSectionProps> | ReactElement<AccordionSectionProps>[]} props.children - The AccordionSection components to be displayed within the Accordion.
  * @param {string} [props.className] - Optional additional class names for the Accordion container.
+ * @param {AccordionModifier} [props.modifier='pill'] - `pill` draws each header as a pill with a bottom border; `plain` draws a flat header and separates the sections with a rule.
+ * @param {string[]} [props.defaultActivated=[]] - Ids of the sections that start open. Read on mount only; afterwards the user toggles them.
  *
  * @returns {ReactNode} The rendered Accordion component.
  */
-export declare function Accordion({ children, className }: AccordionProps): ReactNode;
-export {};
+export declare function Accordion({ children, className, modifier, defaultActivated, }: AccordionProps): ReactNode;
 //# sourceMappingURL=Accordion.d.ts.map

package/dist/components/02-molecules/Accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/Accordion.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAI3D,KAAK,cAAc,GAAG;IACpB,QAAQ,EACJ,YAAY,CAAC,qBAAqB,CAAC,GACnC,YAAY,CAAC,qBAAqB,CAAC,EAAE,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,GAAG,SAAS,CAM5E"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/Accordion.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,oBAAoB,CAAC;AAG5B,YAAY,EAAE,iBAAiB,EAAE,CAAC;AAElC,KAAK,cAAc,GAAG;IACpB,QAAQ,EACJ,YAAY,CAAC,qBAAqB,CAAC,GACnC,YAAY,CAAC,qBAAqB,CAAC,EAAE,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B,CAAC;AAOF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,QAAiB,EACjB,gBAAgB,GACjB,EAAE,cAAc,GAAG,SAAS,CAW5B"}

package/dist/components/02-molecules/Accordion/Accordion.jsx

@@ -1,7 +1,11 @@
 'use client';
 import React from 'react';
-import { AccordionContextProvider } from './AccordionContext';
+import { AccordionContextProvider, } from './AccordionContext';
 import clsx from 'clsx';
+const styleMap = {
+    pill: 'gap-3',
+    plain: 'divide-gray-5 dark:divide-gray-1 divide-y',
+};
 /**
  * Accordion component for displaying a list of collapsible sections.
  *
@@ -9,19 +13,29 @@ import clsx from 'clsx';
  * @example
  * // Example usage of Accordion component
  * <Accordion className="custom-class">
- *   <AccordionSection title="Section 1">Content 1</AccordionSection>
- *   <AccordionSection title="Section 2">Content 2</AccordionSection>
+ *   <AccordionSection title="Section 1" id="1">Content 1</AccordionSection>
+ *   <AccordionSection title="Section 2" id="2">Content 2</AccordionSection>
+ * </Accordion>
+ *
+ * @example
+ * // Flat headers, with the first section open on mount
+ * <Accordion modifier="plain" defaultActivated={['1']}>
+ *   <AccordionSection title="Section 1" id="1">Content 1</AccordionSection>
  * </Accordion>
  *
  * @param {Object} props - The properties of the Accordion component.
  * @param {ReactElement<AccordionSectionProps> | ReactElement<AccordionSectionProps>[]} props.children - The AccordionSection components to be displayed within the Accordion.
  * @param {string} [props.className] - Optional additional class names for the Accordion container.
+ * @param {AccordionModifier} [props.modifier='pill'] - `pill` draws each header as a pill with a bottom border; `plain` draws a flat header and separates the sections with a rule.
+ * @param {string[]} [props.defaultActivated=[]] - Ids of the sections that start open. Read on mount only; afterwards the user toggles them.
  *
  * @returns {ReactNode} The rendered Accordion component.
  */
-export function Accordion({ children, className }) {
-    return (<div className={clsx('grid gap-3', className)}>
-      <AccordionContextProvider>{children}</AccordionContextProvider>
+export function Accordion({ children, className, modifier = 'pill', defaultActivated, }) {
+    return (<div className={clsx('grid', styleMap[modifier], className)}>
+      <AccordionContextProvider defaultActivated={defaultActivated} modifier={modifier}>
+        {children}
+      </AccordionContextProvider>
     </div>);
 }
 //# sourceMappingURL=Accordion.jsx.map

package/dist/components/02-molecules/Accordion/Accordion.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAkC,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,IAAI,MAAM,MAAM,CAAC;AASxB;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAkB;IAC/D,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAC5C;MAAA,CAAC,wBAAwB,CAAC,CAAC,QAAQ,CAAC,EAAE,wBAAwB,CAChE;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Accordion.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAkC,MAAM,OAAO,CAAC;AAEvD,OAAO,EAEL,wBAAwB,GACzB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,IAAI,MAAM,MAAM,CAAC;AAaxB,MAAM,QAAQ,GAAsC;IAClD,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,2CAA2C;CACnD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,QAAQ,GAAG,MAAM,EACjB,gBAAgB,GACD;IACf,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC,CAC1D;MAAA,CAAC,wBAAwB,CACvB,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAEnB;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,wBAAwB,CAC5B;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

package/dist/components/02-molecules/Accordion/AccordionContext.d.ts

@@ -1,9 +1,13 @@
+export type AccordionModifier = 'pill' | 'plain';
 export interface AccordionContextProps {
     activated: string[];
     toggleId: (id: string) => void;
+    modifier: AccordionModifier;
 }
-export declare function AccordionContextProvider({ children, }: {
+export declare function AccordionContextProvider({ children, defaultActivated, modifier, }: {
     readonly children: React.ReactNode;
+    readonly defaultActivated?: string[];
+    readonly modifier?: AccordionModifier;
 }): import("react").JSX.Element;
 export declare function useAccordionContext(): AccordionContextProps;
 //# sourceMappingURL=AccordionContext.d.ts.map

package/dist/components/02-molecules/Accordion/AccordionContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContext.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/AccordionContext.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAMD,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,GACT,EAAE;IACD,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC,+BAwBA;AAED,wBAAgB,mBAAmB,0BAUlC"}
+{"version":3,"file":"AccordionContext.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/AccordionContext.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEjD,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAMD,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,gBAAqB,EACrB,QAAiB,GAClB,EAAE;IACD,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IACrC,QAAQ,CAAC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CACvC,+BAyBA;AAED,wBAAgB,mBAAmB,0BAUlC"}

package/dist/components/02-molecules/Accordion/AccordionContext.jsx

@@ -1,8 +1,8 @@
 'use client';
 import { createContext, useContext, useMemo, useState } from 'react';
 const AccordionContext = createContext(undefined);
-export function AccordionContextProvider({ children, }) {
-    const [activated, setActivated] = useState([]);
+export function AccordionContextProvider({ children, defaultActivated = [], modifier = 'pill', }) {
+    const [activated, setActivated] = useState(defaultActivated);
     const stableActivated = useMemo(() => [...activated], [activated]);
     const toggleId = (id) => {
         if (activated.includes(id)) {
@@ -15,7 +15,8 @@ export function AccordionContextProvider({ children, }) {
     const value = useMemo(() => ({
         activated: stableActivated,
         toggleId,
-    }), [stableActivated]);
+        modifier,
+    }), [stableActivated, modifier]);
     return (<AccordionContext.Provider value={value}>
       {children}
     </AccordionContext.Provider>);

package/dist/components/02-molecules/Accordion/AccordionContext.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContext.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/AccordionContext.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAOrE,MAAM,gBAAgB,GAAG,aAAa,CACpC,SAAS,CACV,CAAC;AAEF,MAAM,UAAU,wBAAwB,CAAC,EACvC,QAAQ,GAGT;IACC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACzD,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IACnE,MAAM,QAAQ,GAAG,CAAC,EAAU,EAAE,EAAE;QAC9B,IAAI,SAAS,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;YAC3B,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC;QACxD,CAAC;aAAM,CAAC;YACN,YAAY,CAAC,CAAC,GAAG,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,SAAS,EAAE,eAAe;QAC1B,QAAQ;KACT,CAAC,EACF,CAAC,eAAe,CAAC,CAClB,CAAC;IAEF,OAAO,CACL,CAAC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CACtC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAC7B,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,mBAAmB;IACjC,MAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAE7C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,oEAAoE,CACrE,CAAC;IACJ,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC"}
+{"version":3,"file":"AccordionContext.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/AccordionContext.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAUrE,MAAM,gBAAgB,GAAG,aAAa,CACpC,SAAS,CACV,CAAC;AAEF,MAAM,UAAU,wBAAwB,CAAC,EACvC,QAAQ,EACR,gBAAgB,GAAG,EAAE,EACrB,QAAQ,GAAG,MAAM,GAKlB;IACC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAW,gBAAgB,CAAC,CAAC;IACvE,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IACnE,MAAM,QAAQ,GAAG,CAAC,EAAU,EAAE,EAAE;QAC9B,IAAI,SAAS,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;YAC3B,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC;QACxD,CAAC;aAAM,CAAC;YACN,YAAY,CAAC,CAAC,GAAG,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,SAAS,EAAE,eAAe;QAC1B,QAAQ;QACR,QAAQ;KACT,CAAC,EACF,CAAC,eAAe,EAAE,QAAQ,CAAC,CAC5B,CAAC;IAEF,OAAO,CACL,CAAC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CACtC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAC7B,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,mBAAmB;IACjC,MAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAE7C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,oEAAoE,CACrE,CAAC;IACJ,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/dist/components/02-molecules/Accordion/AccordionSection.d.ts

@@ -6,6 +6,7 @@ export type AccordionSectionProps = {
 };
 /**
  * AccordionSection component for displaying a collapsible section within an Accordion.
+ * The header takes the `modifier` of the parent Accordion.
  *
  * @component
  * @example
@@ -17,7 +18,7 @@ export type AccordionSectionProps = {
  * @param {Object} props - The properties of the AccordionSection component.
  * @param {string} props.title - The title of the section.
  * @param {ReactNode} props.children - The content to be displayed within the section.
- * @param {string} props.id - The unique identifier for the section.
+ * @param {string} props.id - The unique identifier for the section, also used by the Accordion `defaultActivated` prop.
  *
  * @returns {ReactNode} The rendered AccordionSection component.
  */

package/dist/components/02-molecules/Accordion/AccordionSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionSection.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/AccordionSection.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,SAAS,EAMV,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,EAAE,GACH,EAAE,qBAAqB,GAAG,SAAS,CA+DnC"}
+{"version":3,"file":"AccordionSection.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/AccordionSection.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,SAAS,EAMV,MAAM,OAAO,CAAC;AAOf,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AA0BF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,EAAE,GACH,EAAE,qBAAqB,GAAG,SAAS,CA8EnC"}

package/dist/components/02-molecules/Accordion/AccordionSection.jsx

@@ -2,9 +2,28 @@
 import clsx from 'clsx';
 import { useCallback, useEffect, useId, useRef, useState, } from 'react';
 import { FaChevronDown } from 'react-icons/fa';
-import { useAccordionContext } from './AccordionContext';
+import { useAccordionContext, } from './AccordionContext';
+const triggerStyleMap = {
+    pill: 'mb-2 rounded-full border-b-[3px] px-4 py-2',
+    plain: 'rounded-sm py-3',
+};
+const triggerStateStyleMap = {
+    pill: {
+        active: 'border-lavender dark:border-lavender-dark',
+        inactive: 'border-gray-2 dark:border-gray-1',
+    },
+    plain: {
+        active: '',
+        inactive: '',
+    },
+};
+const chevronStyleMap = {
+    pill: '',
+    plain: 'size-3 text-gray-1 dark:text-gray-2',
+};
 /**
  * AccordionSection component for displaying a collapsible section within an Accordion.
+ * The header takes the `modifier` of the parent Accordion.
  *
  * @component
  * @example
@@ -16,7 +35,7 @@ import { useAccordionContext } from './AccordionContext';
  * @param {Object} props - The properties of the AccordionSection component.
  * @param {string} props.title - The title of the section.
  * @param {ReactNode} props.children - The content to be displayed within the section.
- * @param {string} props.id - The unique identifier for the section.
+ * @param {string} props.id - The unique identifier for the section, also used by the Accordion `defaultActivated` prop.
  *
  * @returns {ReactNode} The rendered AccordionSection component.
  */
@@ -24,7 +43,8 @@ export function AccordionSection({ title, children, id, }) {
     const context = useAccordionContext();
     const isActivated = context.activated.includes(id);
     const contentRef = useRef(null);
-    const [maxHeight, setMaxHeight] = useState('0px');
+    // A section that starts open renders at full height instead of animating in.
+    const [maxHeight, setMaxHeight] = useState(isActivated ? 'none' : '0px');
     const generatedId = useId();
     const triggerId = `${generatedId}-trigger`;
     const panelId = `${generatedId}-panel`;
@@ -41,15 +61,22 @@ export function AccordionSection({ title, children, id, }) {
         window.addEventListener('resize', updateHeight);
         return () => window.removeEventListener('resize', updateHeight);
     }, [updateHeight]);
+    useEffect(() => {
+        const content = contentRef.current?.firstElementChild;
+        if (!content || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(updateHeight);
+        observer.observe(content);
+        return () => observer.disconnect();
+    }, [updateHeight]);
     return (<section className="text-black dark:text-white">
-      <button type="button" id={triggerId} aria-expanded={isActivated} aria-controls={panelId} className={clsx('focus-visible:ring-lavender mb-2 flex w-full cursor-pointer items-center justify-between rounded-full border-b-[3px] px-4 py-2 text-left text-sm font-semibold transition-colors duration-300 ease-in-out focus-visible:ring-2 focus-visible:outline-none', isActivated
-            ? 'border-lavender dark:border-lavender-dark'
-            : 'border-gray-2 dark:border-gray-1')} onClick={() => context.toggleId(id)}>
+      <button type="button" id={triggerId} aria-expanded={isActivated} aria-controls={panelId} className={clsx('focus-visible:ring-lavender flex w-full cursor-pointer items-center justify-between text-left text-sm font-semibold transition-colors duration-300 ease-in-out focus-visible:ring-2 focus-visible:outline-none', triggerStyleMap[context.modifier], triggerStateStyleMap[context.modifier][isActivated ? 'active' : 'inactive'])} onClick={() => context.toggleId(id)}>
         <span>{title}</span>
-        <FaChevronDown aria-hidden className={clsx('transition-transform duration-300 ease-in-out', isActivated && 'rotate-180 transform')}/>
+        <FaChevronDown aria-hidden className={clsx('transition-transform duration-300 ease-in-out', chevronStyleMap[context.modifier], isActivated && 'rotate-180 transform')}/>
       </button>
       <div ref={contentRef} id={panelId} role="region" aria-labelledby={triggerId} hidden={!isActivated} style={{ maxHeight }} className="overflow-hidden text-black transition-all duration-300 ease-in-out dark:text-white">
-        {children}
+        <div>{children}</div>
       </div>
     </section>);
 }

package/dist/components/02-molecules/Accordion/AccordionSection.jsx.map

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

package/dist/components/02-molecules/Accordion/index.d.ts

@@ -1,3 +1,4 @@
 export { Accordion } from './Accordion';
+export type { AccordionModifier } from './Accordion';
 export { AccordionSection } from './AccordionSection';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/02-molecules/Accordion/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/02-molecules/Accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/02-molecules/Autocomplete/Autocomplete.d.ts

@@ -14,7 +14,11 @@ type AutocompleteInput = {
     error?: string;
     value?: string;
     isMutedWhenEmpty?: boolean;
+    hideLabel?: boolean;
+    placeholder?: string;
     toggleButtonLabel?: string;
+    /** Hides the dropdown-toggle chevron — use for search-as-you-type fields with no closed list to browse. */
+    hideToggleButton?: boolean;
     noOptionsText?: string;
 };
 /**
@@ -41,11 +45,16 @@ type AutocompleteInput = {
  * @param {string} props.label - The label text for the input field.
  * @param {string} [props.helperText] - Helper text displayed below the input.
  * @param {boolean} [props.isMutedWhenEmpty] - Renders the border and label in gray while the field has no value.
+ * @param {boolean} [props.hideLabel] - Keeps the label for assistive technology only and drops the floating label. Use it when a heading outside the field already names it.
+ * @param {string} [props.placeholder] - Placeholder shown inside the field. Only rendered together with `hideLabel`.
+ * @param {string} [props.toggleButtonLabel] - Accessible name of the button that opens and closes the list.
+ * @param {boolean} [props.hideToggleButton] - Hides the dropdown-toggle chevron, for search-as-you-type fields with no closed list to browse.
+ * @param {string} [props.noOptionsText='No hay opciones'] - Text shown when the query matches nothing.
  * @param {string} [props.error] - Error message displayed below the input.
  * @param {string} [props.value=''] - The controlled value of the input.
  *
  * @returns {ReactNode} The rendered Autocomplete component.
  */
-export declare function Autocomplete({ options, onSelect, onChange, onDebouncedChange, debounceDelay, onHandleKeyDown, disabled, label, helperText, error, value, isMutedWhenEmpty, toggleButtonLabel, noOptionsText, }: Readonly<AutocompleteInput>): ReactNode;
+export declare function Autocomplete({ options, onSelect, onChange, onDebouncedChange, debounceDelay, onHandleKeyDown, disabled, label, helperText, error, value, isMutedWhenEmpty, hideLabel, placeholder, toggleButtonLabel, hideToggleButton, noOptionsText, }: Readonly<AutocompleteInput>): ReactNode;
 export {};
 //# sourceMappingURL=Autocomplete.d.ts.map

package/dist/components/02-molecules/Autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI5C,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,iBAAiB,CAAC,EAAE,CAClB,KAAK,EAAE,MAAM,KACV,IAAI,GAAG,UAAU,EAAE,GAAG,OAAO,CAAC,IAAI,GAAG,UAAU,EAAE,CAAC,CAAC;IACxD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,UAAU,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,aAAmB,EACnB,eAAe,EACf,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAK,EACL,KAAK,EACL,gBAAgB,EAChB,iBAAiB,EACjB,aAAiC,GAClC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,GAAG,SAAS,CA6RzC"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI5C,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,iBAAiB,CAAC,EAAE,CAClB,KAAK,EAAE,MAAM,KACV,IAAI,GAAG,UAAU,EAAE,GAAG,OAAO,CAAC,IAAI,GAAG,UAAU,EAAE,CAAC,CAAC;IACxD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,UAAU,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2GAA2G;IAC3G,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,aAAmB,EACnB,eAAe,EACf,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAK,EACL,KAAK,EACL,gBAAgB,EAChB,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,aAAiC,GAClC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,GAAG,SAAS,CA4SzC"}

package/dist/components/02-molecules/Autocomplete/Autocomplete.jsx

@@ -28,16 +28,24 @@ import { debounce } from '../../../utils';
  * @param {string} props.label - The label text for the input field.
  * @param {string} [props.helperText] - Helper text displayed below the input.
  * @param {boolean} [props.isMutedWhenEmpty] - Renders the border and label in gray while the field has no value.
+ * @param {boolean} [props.hideLabel] - Keeps the label for assistive technology only and drops the floating label. Use it when a heading outside the field already names it.
+ * @param {string} [props.placeholder] - Placeholder shown inside the field. Only rendered together with `hideLabel`.
+ * @param {string} [props.toggleButtonLabel] - Accessible name of the button that opens and closes the list.
+ * @param {boolean} [props.hideToggleButton] - Hides the dropdown-toggle chevron, for search-as-you-type fields with no closed list to browse.
+ * @param {string} [props.noOptionsText='No hay opciones'] - Text shown when the query matches nothing.
  * @param {string} [props.error] - Error message displayed below the input.
  * @param {string} [props.value=''] - The controlled value of the input.
  *
  * @returns {ReactNode} The rendered Autocomplete component.
  */
-export function Autocomplete({ options, onSelect, onChange, onDebouncedChange, debounceDelay = 200, onHandleKeyDown, disabled, label, helperText, error, value, isMutedWhenEmpty, toggleButtonLabel, noOptionsText = 'No hay opciones', }) {
+export function Autocomplete({ options, onSelect, onChange, onDebouncedChange, debounceDelay = 200, onHandleKeyDown, disabled, label, helperText, error, value, isMutedWhenEmpty, hideLabel, placeholder, toggleButtonLabel, hideToggleButton, noOptionsText = 'No hay opciones', }) {
     const [query, setQuery] = useState(value ?? '');
     const [filteredOptions, setFilteredOptions] = useState([]);
     const [isOpen, setIsOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(-1);
+    // True between a keystroke and its debounced remote result: the "no options" row
+    // must not flash while the consumer is still fetching.
+    const [isSearching, setIsSearching] = useState(false);
     const listboxId = useId();
     const containerRef = useRef(null);
     const justSelectedRef = useRef(false);
@@ -55,9 +63,18 @@ export function Autocomplete({ options, onSelect, onChange, onDebouncedChange, d
             setFilteredOptions([]);
             setIsOpen(false);
             setActiveIndex(-1);
+            setIsSearching(false);
             return;
         }
-        const result = await onDebouncedChangeRef.current?.(q);
+        let result;
+        try {
+            result = await onDebouncedChangeRef.current?.(q);
+        }
+        finally {
+            if (latestQueryRef.current === q) {
+                setIsSearching(false);
+            }
+        }
         if (latestQueryRef.current !== q) {
             return;
         }
@@ -84,6 +101,7 @@ export function Autocomplete({ options, onSelect, onChange, onDebouncedChange, d
         }
         setFilteredOptions(options.filter((option) => option.label.toLowerCase().includes(newQuery.toLowerCase())));
         setIsOpen(true);
+        setIsSearching(Boolean(onDebouncedChangeRef.current));
         onChange?.(newQuery);
         debouncedCallback(newQuery);
     };
@@ -214,14 +232,15 @@ export function Autocomplete({ options, onSelect, onChange, onDebouncedChange, d
             'aria-activedescendant': isOpen && activeIndex >= 0
                 ? `${listboxId}-option-${activeIndex}`
                 : undefined,
-        }} iconR={handleIcon()} helperText={helperText} error={error} isMutedWhenEmpty={isMutedWhenEmpty}/>
-      {!!isOpen && (<ul id={listboxId} role="listbox" className="dark:bg-black-1 absolute z-40 flex max-h-28 w-full flex-col gap-y-1 overflow-y-auto rounded-md bg-white px-3 py-2 shadow-lg dark:text-white">
-          {filteredOptions?.length > 0 ? (filteredOptions.map((option, index) => (<li key={option.value} id={`${listboxId}-option-${index}`} role="option" aria-selected={activeIndex === index} className={clsx('hover:bg-gray-5 dark:hover:bg-gray-1 cursor-pointer rounded-sm px-1 py-0.5', activeIndex === index && 'bg-gray-5 dark:bg-gray-1')} onMouseEnter={() => setActiveIndex(index)} onMouseDown={(event) => event.preventDefault()} onClick={() => handleOptionClick(option)}>
-                {option.label}
-              </li>))) : hasSearchQuery ? (<li role="option" aria-disabled="true" className="autocomplete-option no-options">
-              {noOptionsText}
-            </li>) : null}
-        </ul>)}
+        }} iconR={hideToggleButton ? undefined : handleIcon()} helperText={helperText} error={error} isMutedWhenEmpty={isMutedWhenEmpty} hideLabel={hideLabel} placeholder={placeholder}/>
+      {!!isOpen &&
+            (filteredOptions.length > 0 || (hasSearchQuery && !isSearching)) && (<ul id={listboxId} role="listbox" className="dark:bg-black-1 absolute z-40 flex max-h-28 w-full flex-col gap-y-1 overflow-y-auto rounded-md bg-white px-3 py-2 shadow-lg dark:text-white">
+            {filteredOptions?.length > 0 ? (filteredOptions.map((option, index) => (<li key={option.value} id={`${listboxId}-option-${index}`} role="option" aria-selected={activeIndex === index} className={clsx('hover:bg-gray-5 dark:hover:bg-gray-1 cursor-pointer rounded-sm px-1 py-0.5', activeIndex === index && 'bg-gray-5 dark:bg-gray-1')} onMouseEnter={() => setActiveIndex(index)} onMouseDown={(event) => event.preventDefault()} onClick={() => handleOptionClick(option)}>
+                  {option.label}
+                </li>))) : hasSearchQuery && !isSearching ? (<li role="option" aria-disabled="true" className="autocomplete-option no-options">
+                {noOptionsText}
+              </li>) : null}
+          </ul>)}
     </div>);
 }
 //# sourceMappingURL=Autocomplete.jsx.map