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

package/assets/css/base.css

@@ -1,4 +1,5 @@
 @import 'react-toastify/dist/ReactToastify.min.css' layer(base);
+@import 'leaflet/dist/leaflet.css' layer(base);
 
 @import 'tailwindcss';
 
@@ -96,6 +97,18 @@
   --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);
+
+  --animate-progress-indeterminate: progress-indeterminate 1.5s ease-in-out
+    infinite;
+
+  @keyframes progress-indeterminate {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(250%);
+    }
+  }
 }
 
 /*
@@ -125,7 +138,7 @@
 
 .dark {
   --body-text-color: var(--color-white);
-  --body-bg-color: var(--color-black);
+  --body-bg-color: var(--color-black-1);
   color-scheme: dark;
 }
 
@@ -179,3 +192,13 @@ body {
 .dark .Toastify__close-button {
   color: var(--color-white);
 }
+
+.orion-map-pin {
+  background: transparent;
+  border: none;
+}
+
+.leaflet-container {
+  font: inherit;
+  z-index: 0;
+}

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

@@ -1,7 +1,8 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 type BadgeProps = {
-    modifier: 'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled' | 'violet' | 'cyan' | 'olive' | 'amber';
+    modifier: 'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled' | 'violet' | 'cyan' | 'olive' | 'amber' | 'neutral';
     accentLabel?: boolean;
+    icon?: ReactNode;
 } & HTMLAttributes<HTMLSpanElement>;
 /**
  * Badge component used for indicating different statuses.
@@ -10,6 +11,10 @@ type BadgeProps = {
  * 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.
  *
+ * `neutral` is the one filled variant: a gray chip without the status dot, for
+ * informative attributes (a time window, a count) that carry no status. It is
+ * the only modifier meant to be paired with `icon`.
+ *
  * @component
  * @example
  * // Default label color
@@ -19,13 +24,18 @@ type BadgeProps = {
  * // Label in the modifier color
  * <Badge modifier="info" accentLabel>Reviewing</Badge>
  *
+ * @example
+ * // Filled informative chip with an icon
+ * <Badge modifier="neutral" icon={<FiClock />}>08:00–12:00</Badge>
+ *
  * @param {Object} props - The properties of the Badge component.
- * @param {'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled' | 'violet' | 'cyan' | 'olive' | 'amber'} props.modifier - The modifier to determine the badge style.
+ * @param {'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled' | 'violet' | 'cyan' | 'olive' | 'amber' | 'neutral'} props.modifier - The modifier to determine the badge style.
  * @param {boolean} [props.accentLabel] - Whether the label takes the modifier color.
+ * @param {ReactNode} [props.icon] - Small icon rendered before the label. Sized by the badge; pass the bare icon element.
  * @param {ReactNode} props.children - The content to be displayed inside the badge.
  *
  * @returns {ReactNode} The rendered Badge component.
  */
-export declare function Badge({ modifier, accentLabel, children, ...restProps }: BadgeProps): ReactNode;
+export declare function Badge({ modifier, accentLabel, icon, 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,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"}
+{"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,GACP,SAAS,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAyDpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,UAAU,GAAG,SAAS,CA+BxB"}

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

@@ -11,6 +11,7 @@ const styleMap = {
     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'),
+    neutral: clsx('border-gray-6 bg-gray-6 dark:border-gray-dark-1 dark:bg-gray-dark-1'),
 };
 /**
  * `warning` es la unica que no usa su propio token para la etiqueta: #FFC34C
@@ -28,6 +29,7 @@ const accentLabelMap = {
     cyan: clsx('text-cyan dark:text-cyan-dark'),
     olive: clsx('text-olive dark:text-olive-dark'),
     amber: clsx('text-amber dark:text-amber-dark'),
+    neutral: clsx('text-gray-1 dark:text-gray-2'),
 };
 /**
  * Badge component used for indicating different statuses.
@@ -36,6 +38,10 @@ const accentLabelMap = {
  * 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.
  *
+ * `neutral` is the one filled variant: a gray chip without the status dot, for
+ * informative attributes (a time window, a count) that carry no status. It is
+ * the only modifier meant to be paired with `icon`.
+ *
  * @component
  * @example
  * // Default label color
@@ -45,17 +51,28 @@ const accentLabelMap = {
  * // Label in the modifier color
  * <Badge modifier="info" accentLabel>Reviewing</Badge>
  *
+ * @example
+ * // Filled informative chip with an icon
+ * <Badge modifier="neutral" icon={<FiClock />}>08:00–12:00</Badge>
+ *
  * @param {Object} props - The properties of the Badge component.
- * @param {'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled' | 'violet' | 'cyan' | 'olive' | 'amber'} props.modifier - The modifier to determine the badge style.
+ * @param {'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled' | 'violet' | 'cyan' | 'olive' | 'amber' | 'neutral'} props.modifier - The modifier to determine the badge style.
  * @param {boolean} [props.accentLabel] - Whether the label takes the modifier color.
+ * @param {ReactNode} [props.icon] - Small icon rendered before the label. Sized by the badge; pass the bare icon element.
  * @param {ReactNode} props.children - The content to be displayed inside the badge.
  *
  * @returns {ReactNode} The rendered Badge component.
  */
-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);
+export function Badge({ modifier, accentLabel, icon, children, ...restProps }) {
+    const hasDot = modifier !== 'neutral';
+    const className = clsx('relative inline-block rounded-full border py-1 pr-2', hasDot
+        ? 'pl-6 before:absolute before:start-3 before:top-[50%] before:-mt-1 before:block before:h-[6px] before:w-[6px] before:rounded-full'
+        : 'pl-2.5', styleMap[modifier], restProps.className);
     return (<span {...restProps} className={className}>
-      <Paragraph size="chips" className={clsx('text-nowrap', accentLabel ? accentLabelMap[modifier] : 'dark:text-white')}>
+      <Paragraph size="chips" className={clsx('text-nowrap', !!icon && 'flex items-center gap-1', accentLabel ? accentLabelMap[modifier] : 'dark:text-white')}>
+        {!!icon && (<span aria-hidden="true" className="inline-flex text-[11px]">
+            {icon}
+          </span>)}
         {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;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"}
+{"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;AAmBzC,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;IACD,OAAO,EAAE,IAAI,CACX,qEAAqE,CACtE;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;IAC9C,OAAO,EAAE,IAAI,CAAC,8BAA8B,CAAC;CAC9C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,UAAU,KAAK,CAAC,EACpB,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,GAAG,SAAS,EACD;IACX,MAAM,MAAM,GAAG,QAAQ,KAAK,SAAS,CAAC;IAEtC,MAAM,SAAS,GAAG,IAAI,CACpB,qDAAqD,EACrD,MAAM;QACJ,CAAC,CAAC,kIAAkI;QACpI,CAAC,CAAC,QAAQ,EACZ,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,CAAC,CAAC,IAAI,IAAI,yBAAyB,EACnC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAC3D,CAAC,CAEF;QAAA,CAAC,CAAC,CAAC,IAAI,IAAI,CACT,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,yBAAyB,CAC1D;YAAA,CAAC,IAAI,CACP;UAAA,EAAE,IAAI,CAAC,CACR,CACD;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,SAAS,CACb;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}

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

@@ -1,10 +1,14 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
 export type ButtonProps = {
     modifier?: ButtonsVariants;
+    size?: ButtonSize;
+    tone?: ButtonTone;
     iconL?: ReactNode;
     iconR?: ReactNode;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 export type ButtonsVariants = 'principal' | 'second' | 'text' | 'action';
+export type ButtonSize = 'md' | 'field' | 'sm';
+export type ButtonTone = 'default' | 'critical';
 /**
  * Represents a button component with different modifiers.
  *
@@ -15,6 +19,8 @@ export type ButtonsVariants = 'principal' | 'second' | 'text' | 'action';
  *
  * @param {Object} props - The properties of the Button component.
  * @param {'principal' | 'second' | 'text' | 'action'} [props.modifier='principal'] - The modifier for styling the button.
+ * @param {'md' | 'field' | 'sm'} [props.size='md'] - `field` matches the 36px height of `Input`, `Select` and `DatePicker`, for buttons that sit in the same row as form controls. `sm` is the compact button for dense rows (cards, table cells): smaller padding and 12px label. All sizes share the same variants.
+ * @param {'default' | 'critical'} [props.tone='default'] - `critical` marks an action that cannot be undone (reject, delete) with the error hue, keeping the shape of the `modifier`. `action` drops its brand gradient and renders like a critical `second`: a brand accent on a destructive action would send two opposite signals.
  * @param {ReactNode} [props.iconL] - The icon to be displayed to the left of the button text.
  * @param {ReactNode} [props.iconR] - The icon to be displayed to the right of the button text.
  * @param {ReactNode} props.children - The content to be displayed inside the button.
@@ -22,5 +28,5 @@ export type ButtonsVariants = 'principal' | 'second' | 'text' | 'action';
  *
  * @returns {ReactNode} The rendered Button component.
  */
-export declare function Button({ modifier, iconL, iconR, children, ...restProps }: ButtonProps): ReactNode;
+export declare function Button({ modifier, size, tone, iconL, iconR, children, ...restProps }: ButtonProps): ReactNode;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;AAwCzE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,EACrB,QAAsB,EACtB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,WAAW,GAAG,SAAS,CAmBzB"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,OAAO,GAAG,IAAI,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;AAmHhD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CAAC,EACrB,QAAsB,EACtB,IAAW,EACX,IAAgB,EAChB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,WAAW,GAAG,SAAS,CAuBzB"}

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

@@ -1,10 +1,48 @@
 import clsx from 'clsx';
+const sizeMap = {
+    md: {
+        base: 'py-[10px] text-sm',
+        padL: 'pl-6',
+        padR: 'pr-6',
+        iconPadL: 'pl-4',
+        iconPadR: 'pr-4',
+        icon: 'text-base',
+    },
+    field: {
+        base: 'py-1.5 text-sm',
+        padL: 'pl-5',
+        padR: 'pr-5',
+        iconPadL: 'pl-4',
+        iconPadR: 'pr-4',
+        icon: 'text-base',
+    },
+    sm: {
+        base: 'py-1 text-xs',
+        padL: 'pl-4',
+        padR: 'pr-4',
+        iconPadL: 'pl-3',
+        iconPadR: 'pr-3',
+        icon: 'text-sm',
+    },
+};
 const styleMap = {
     principal: clsx('text-white not-disabled:hover:text-black not-disabled:active:text-black disabled:text-white [&:not(:disabled):not(:hover)]:focus:text-white', 'disabled:before:bg-gray-3 not-disabled:active:before:bg-gray-6 before:bg-black not-disabled:hover:before:bg-white [&:not(:disabled):not(:hover)]:focus:before:bg-black', 'disabled:after:bg-gray-3 [&:not(:disabled):not(:hover)]:focus:after:bg-clicoh not-disabled:hover:after:bg-clicoh not-disabled:active:after:bg-clicoh after:bg-black', 'dark:not-disabled:active:text-gray-6 dark:text-black dark:not-disabled:hover:text-white dark:disabled:text-white dark:[&:not(:disabled):not(:hover)]:focus:text-black', 'dark:disabled:before:bg-gray-1 dark:[&:not(:disabled):not(:hover)]:focus:before:bg-gray-5 dark:before:bg-white dark:not-disabled:hover:before:bg-black dark:not-disabled:active:before:bg-black', 'dark:disabled:after:bg-gray-1 dark:[&:not(:disabled):not(:hover)]:focus:after:bg-gray-5 dark:not-disabled:hover:after:bg-clicoh dark:not-disabled:active:after:bg-clicoh dark:after:bg-white'),
     second: clsx('text-gray-1 disabled:text-gray-3 [&:not(:disabled):not(:hover)]:focus:text-gray-1 not-disabled:active:text-gray-5 not-disabled:hover:text-white', 'disable:before:bg-white [&:not(:disabled):not(:hover)]:focus:before:bg-gray-6 before:bg-white not-disabled:hover:before:bg-black not-disabled:active:before:bg-black', 'after:bg-gray-1 disabled:after:bg-gray-3 [&:not(:disabled):not(:hover)]:focus:after:bg-gray-1 not-disabled:hover:after:bg-black not-disabled:active:after:bg-black', 'dark:disabled:text-gray-2 dark:[&:not(:disabled):not(:hover)]:focus:text-gray-5 dark:text-white dark:not-disabled:hover:text-black dark:not-disabled:active:text-black', 'dark:not-disabled:active:before:bg-gray-6 dark:before:bg-black dark:not-disabled:hover:before:bg-white dark:disabled:before:bg-white dark:[&:not(:disabled):not(:hover)]:focus:before:bg-black', 'dark:disabled:after:bg-gray-2 dark:[&:not(:disabled):not(:hover)]:focus:after:bg-gray-5 dark:not-disabled:active:after:bg-gray-6 dark:after:bg-white dark:not-disabled:hover:after:bg-white'),
     text: clsx('underline', 'text-black', 'disabled:text-gray-3', 'active:text-gray-1', 'not-disabled:hover:before:bg-gray-5', 'not-disabled:hover:after:bg-gray-5', 'dark:active:text-gray-7 dark:disabled:text-gray-2 dark:text-white', 'dark:not-disabled:hover:before:bg-gray-1', 'dark:not-disabled:hover:after:bg-gray-1'),
     action: clsx('disabled:text-gray-3 not-disabled:active:text-gray-5 text-black not-disabled:hover:text-white [&:not(:disabled):not(:hover)]:focus:text-black', '[&:not(:disabled):not(:hover)]:focus:before:bg-gray-5 before:bg-white not-disabled:hover:before:bg-black not-disabled:active:before:bg-black disabled:before:bg-white', 'after:bg-clicoh disabled:after:bg-gray-3 not-disabled:hover:after:bg-black not-disabled:hover:after:bg-none not-disabled:active:after:bg-black not-disabled:active:after:bg-none disabled:after:bg-none', 'dark:disabled:text-gray-2 dark:[&:not(:disabled):not(:hover)]:focus:text-gray-5 dark:text-white dark:not-disabled:hover:text-black dark:not-disabled:active:text-black', 'dark:not-disabled:active:before:bg-gray-5 dark:before:bg-black dark:not-disabled:hover:before:bg-white dark:disabled:before:bg-black dark:[&:not(:disabled):not(:hover)]:focus:before:bg-black', 'dark:after:bg-clicoh dark:disabled:after:bg-gray-2 dark:not-disabled:active:after:bg-gray-5 dark:not-disabled:hover:after:bg-white dark:not-disabled:hover:after:bg-none dark:not-disabled:active:after:bg-none dark:disabled:after:bg-none'),
 };
+/**
+ * El texto rojo usa `error-strong`: `error` queda por debajo de 4.5:1 sobre
+ * blanco. Los rellenos con texto blanco usan `error-strong` tambien en dark por
+ * la misma razon; el texto sobre fondo oscuro sigue la regla de `-dark`.
+ */
+const criticalOutline = clsx('text-error-strong disabled:text-gray-3 [&:not(:disabled):not(:hover)]:focus:text-error-strong not-disabled:hover:text-white not-disabled:active:text-white', 'not-disabled:hover:before:bg-error-strong not-disabled:active:before:bg-error-strong [&:not(:disabled):not(:hover)]:focus:before:bg-error-1 before:bg-white disabled:before:bg-white', 'after:bg-error-strong disabled:after:bg-gray-3 not-disabled:hover:after:bg-error-strong not-disabled:active:after:bg-error-strong [&:not(:disabled):not(:hover)]:focus:after:bg-error-strong', 'dark:text-error-dark dark:disabled:text-gray-2 dark:[&:not(:disabled):not(:hover)]:focus:text-error-dark dark:not-disabled:hover:text-white dark:not-disabled:active:text-white', 'dark:not-disabled:hover:before:bg-error-strong dark:not-disabled:active:before:bg-error-strong dark:[&:not(:disabled):not(:hover)]:focus:before:bg-error-dark-1 dark:before:bg-black dark:disabled:before:bg-black', 'dark:after:bg-error-dark dark:disabled:after:bg-gray-2 dark:not-disabled:hover:after:bg-error-strong dark:not-disabled:active:after:bg-error-strong dark:[&:not(:disabled):not(:hover)]:focus:after:bg-error-dark');
+const criticalStyleMap = {
+    principal: clsx('not-disabled:hover:text-error-strong not-disabled:active:text-error-strong text-white disabled:text-white [&:not(:disabled):not(:hover)]:focus:text-white', 'before:bg-error-strong not-disabled:active:before:bg-error-1 disabled:before:bg-gray-3 [&:not(:disabled):not(:hover)]:focus:before:bg-error-strong not-disabled:hover:before:bg-white', 'after:bg-error-strong not-disabled:hover:after:bg-error-strong not-disabled:active:after:bg-error-strong disabled:after:bg-gray-3 [&:not(:disabled):not(:hover)]:focus:after:bg-clicoh', 'dark:not-disabled:hover:text-error-dark dark:not-disabled:active:text-error-dark dark:text-white dark:disabled:text-white dark:[&:not(:disabled):not(:hover)]:focus:text-white', 'dark:before:bg-error-strong dark:not-disabled:active:before:bg-error-dark-1 dark:disabled:before:bg-gray-1 dark:[&:not(:disabled):not(:hover)]:focus:before:bg-error-strong dark:not-disabled:hover:before:bg-black', 'dark:after:bg-error-strong dark:not-disabled:hover:after:bg-error-dark dark:not-disabled:active:after:bg-error-dark dark:disabled:after:bg-gray-1 dark:[&:not(:disabled):not(:hover)]:focus:after:bg-clicoh'),
+    second: criticalOutline,
+    text: clsx('underline', 'text-error-strong', 'disabled:text-gray-3', 'active:text-error', 'not-disabled:hover:before:bg-error-1', 'not-disabled:hover:after:bg-error-1', 'dark:text-error-dark dark:disabled:text-gray-2 dark:active:text-error-dark dark:not-disabled:hover:text-white', 'dark:not-disabled:hover:before:bg-error-dark-1', 'dark:not-disabled:hover:after:bg-error-dark-1'),
+    action: criticalOutline,
+};
 /**
  * Represents a button component with different modifiers.
  *
@@ -15,6 +53,8 @@ const styleMap = {
  *
  * @param {Object} props - The properties of the Button component.
  * @param {'principal' | 'second' | 'text' | 'action'} [props.modifier='principal'] - The modifier for styling the button.
+ * @param {'md' | 'field' | 'sm'} [props.size='md'] - `field` matches the 36px height of `Input`, `Select` and `DatePicker`, for buttons that sit in the same row as form controls. `sm` is the compact button for dense rows (cards, table cells): smaller padding and 12px label. All sizes share the same variants.
+ * @param {'default' | 'critical'} [props.tone='default'] - `critical` marks an action that cannot be undone (reject, delete) with the error hue, keeping the shape of the `modifier`. `action` drops its brand gradient and renders like a critical `second`: a brand accent on a destructive action would send two opposite signals.
  * @param {ReactNode} [props.iconL] - The icon to be displayed to the left of the button text.
  * @param {ReactNode} [props.iconR] - The icon to be displayed to the right of the button text.
  * @param {ReactNode} props.children - The content to be displayed inside the button.
@@ -22,12 +62,14 @@ const styleMap = {
  *
  * @returns {ReactNode} The rendered Button component.
  */
-export function Button({ modifier = 'principal', iconL, iconR, children, ...restProps }) {
-    const className = clsx('relative isolate flex items-center justify-center py-[10px] text-center text-sm font-semibold', 'rounded-3xl border-2 border-transparent transition-colors', 'before:absolute before:inset-0 before:-z-10 before:block before:rounded-3xl before:transition-colors', 'after:absolute after:-inset-[2px] after:-z-20 after:block after:rounded-3xl after:transition-colors', iconL ? 'pl-4' : 'pl-6', iconR ? 'pr-4' : 'pr-6', styleMap[modifier], restProps.className);
+export function Button({ modifier = 'principal', size = 'md', tone = 'default', iconL, iconR, children, ...restProps }) {
+    const sizing = sizeMap[size];
+    const variantStyles = tone === 'critical' ? criticalStyleMap : styleMap;
+    const className = clsx('relative isolate flex items-center justify-center text-center font-semibold', 'rounded-3xl border-2 border-transparent transition-colors', 'before:absolute before:inset-0 before:-z-10 before:block before:rounded-3xl before:transition-colors', 'after:absolute after:-inset-[2px] after:-z-20 after:block after:rounded-3xl after:transition-colors', sizing.base, iconL ? sizing.iconPadL : sizing.padL, iconR ? sizing.iconPadR : sizing.padR, variantStyles[modifier], restProps.className);
     return (<button {...restProps} className={className}>
-      {!!iconL && <span className="pr-2 text-base">{iconL}</span>}
+      {!!iconL && <span className={clsx('pr-2', sizing.icon)}>{iconL}</span>}
       <span>{children}</span>
-      {!!iconR && <span className="pl-2 text-base">{iconR}</span>}
+      {!!iconR && <span className={clsx('pl-2', sizing.icon)}>{iconR}</span>}
     </button>);
 }
 //# sourceMappingURL=Button.jsx.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAWxB,MAAM,QAAQ,GAAoC;IAChD,SAAS,EAAE,IAAI,CACb,6IAA6I,EAC7I,wKAAwK,EACxK,qKAAqK,EACrK,uKAAuK,EACvK,iMAAiM,EACjM,8LAA8L,CAC/L;IACD,MAAM,EAAE,IAAI,CACV,iJAAiJ,EACjJ,sKAAsK,EACtK,oKAAoK,EACpK,wKAAwK,EACxK,gMAAgM,EAChM,6LAA6L,CAC9L;IACD,IAAI,EAAE,IAAI,CACR,WAAW,EACX,YAAY,EACZ,sBAAsB,EACtB,oBAAoB,EACpB,qCAAqC,EACrC,oCAAoC,EACpC,mEAAmE,EACnE,0CAA0C,EAC1C,yCAAyC,CAC1C;IACD,MAAM,EAAE,IAAI,CACV,+IAA+I,EAC/I,uKAAuK,EACvK,yMAAyM,EACzM,wKAAwK,EACxK,gMAAgM,EAChM,6OAA6O,CAC9O;CACF,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,GAAG,WAAW,EACtB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,SAAS,EACA;IACZ,MAAM,SAAS,GAAG,IAAI,CACpB,+FAA+F,EAC/F,2DAA2D,EAC3D,sGAAsG,EACtG,qGAAqG,EACrG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EACvB,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EACvB,QAAQ,CAAC,QAAQ,CAAC,EAClB,SAAS,CAAC,SAAS,CACpB,CAAC;IAEF,OAAO,CACL,CAAC,MAAM,CAAC,IAAI,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAC1C;MAAA,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAC3D;MAAA,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CACtB;MAAA,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAC7D;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Button.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Button/Button.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,28 @@
+import type { ButtonHTMLAttributes, ComponentProps, ReactNode } from 'react';
+import { Tooltip } from '../Tooltip';
+export type IconButtonProps = {
+    icon: ReactNode;
+    label: string;
+    tooltipPlacement?: ComponentProps<typeof Tooltip>['placement'];
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label'>;
+/**
+ * Button that shows only an icon, for secondary actions in dense rows (lists,
+ * timelines, cards). The `label` is required because the icon alone says
+ * nothing to a screen reader or to someone who does not recognise it: it
+ * becomes the accessible name and the tooltip shown on hover and focus.
+ *
+ * @component
+ * @example
+ * // Example usage of IconButton component
+ * <IconButton icon={<FiInfo />} label="See details" onClick={openDetails} />
+ *
+ * @param {Object} props - The properties of the IconButton component.
+ * @param {ReactNode} props.icon - The icon to render. Sized by the button's font size (16px).
+ * @param {string} props.label - Accessible name of the button and text of its tooltip.
+ * @param {UseFloatingOptions['placement']} [props.tooltipPlacement='top'] - Placement of the tooltip relative to the button.
+ * @param {ButtonHTMLAttributes<HTMLButtonElement>} restProps - Additional properties for the button element. `type` defaults to `button`.
+ *
+ * @returns {ReactNode} The rendered IconButton component.
+ */
+export declare function IconButton({ icon, label, tooltipPlacement, type, ...restProps }: IconButtonProps): ReactNode;
+//# sourceMappingURL=IconButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC;CAChE,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC;AAE7E;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,gBAAwB,EACxB,IAAe,EACf,GAAG,SAAS,EACb,EAAE,eAAe,GAAG,SAAS,CAuB7B"}

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

@@ -0,0 +1,32 @@
+import clsx from 'clsx';
+import { Tooltip } from '../Tooltip';
+/**
+ * Button that shows only an icon, for secondary actions in dense rows (lists,
+ * timelines, cards). The `label` is required because the icon alone says
+ * nothing to a screen reader or to someone who does not recognise it: it
+ * becomes the accessible name and the tooltip shown on hover and focus.
+ *
+ * @component
+ * @example
+ * // Example usage of IconButton component
+ * <IconButton icon={<FiInfo />} label="See details" onClick={openDetails} />
+ *
+ * @param {Object} props - The properties of the IconButton component.
+ * @param {ReactNode} props.icon - The icon to render. Sized by the button's font size (16px).
+ * @param {string} props.label - Accessible name of the button and text of its tooltip.
+ * @param {UseFloatingOptions['placement']} [props.tooltipPlacement='top'] - Placement of the tooltip relative to the button.
+ * @param {ButtonHTMLAttributes<HTMLButtonElement>} restProps - Additional properties for the button element. `type` defaults to `button`.
+ *
+ * @returns {ReactNode} The rendered IconButton component.
+ */
+export function IconButton({ icon, label, tooltipPlacement = 'top', type = 'button', ...restProps }) {
+    const className = clsx('flex items-center justify-center rounded-sm p-2 text-base transition-colors', 'text-gray-1 disabled:text-gray-3 not-disabled:hover:bg-black not-disabled:hover:text-white disabled:cursor-not-allowed', 'dark:text-gray-5 dark:disabled:text-gray-2 dark:not-disabled:hover:bg-white dark:not-disabled:hover:text-black', 'focus-visible:ring-lavender dark:focus-visible:ring-lavender-dark focus-visible:ring-2 focus-visible:outline-none', restProps.className);
+    return (<Tooltip message={label} placement={tooltipPlacement}>
+      <button {...restProps} type={type} aria-label={label} className={className}>
+        <span aria-hidden="true" className="flex">
+          {icon}
+        </span>
+      </button>
+    </Tooltip>);
+}
+//# sourceMappingURL=IconButton.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAQrC;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,gBAAgB,GAAG,KAAK,EACxB,IAAI,GAAG,QAAQ,EACf,GAAG,SAAS,EACI;IAChB,MAAM,SAAS,GAAG,IAAI,CACpB,6EAA6E,EAC7E,wHAAwH,EACxH,gHAAgH,EAChH,mHAAmH,EACnH,SAAS,CAAC,SAAS,CACpB,CAAC;IAEF,OAAO,CACL,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,gBAAgB,CAAC,CACnD;MAAA,CAAC,MAAM,CACL,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,UAAU,CAAC,CAAC,KAAK,CAAC,CAClB,SAAS,CAAC,CAAC,SAAS,CAAC,CAErB;QAAA,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CACvC;UAAA,CAAC,IAAI,CACP;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,MAAM,CACV;IAAA,EAAE,OAAO,CAAC,CACX,CAAC;AACJ,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/IconButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from './IconButton';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/01-atoms/IconButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

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

@@ -9,6 +9,8 @@ type InputProps = {
     iconL?: ReactNode;
     iconR?: ReactNode;
     isMutedWhenEmpty?: boolean;
+    hideLabel?: boolean;
+    placeholder?: string;
     showPasswordAriaLabel?: string;
     hidePasswordAriaLabel?: string;
 };
@@ -35,9 +37,11 @@ type InputProps = {
  * @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.
+ * @param {boolean} [props.hideLabel] - Keeps the label for assistive technology only and drops the floating label and its border notch. 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`; otherwise the floating label takes that place.
  *
  * @returns {ReactNode} The rendered Input component.
  */
-export declare function Input({ label, input, helperText, error, iconL, iconR, isMutedWhenEmpty, showPasswordAriaLabel, hidePasswordAriaLabel, }: InputProps): ReactNode;
+export declare function Input({ label, input, helperText, error, iconL, iconR, isMutedWhenEmpty, hideLabel, placeholder, 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,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"}
+{"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,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,KAAK,EACL,UAAU,EACV,KAAK,EACL,KAAK,EACL,KAAK,EACL,gBAAgB,EAChB,SAAiB,EACjB,WAAW,EACX,qBAAqB,EACrB,qBAAqB,GACtB,EAAE,UAAU,GAAG,SAAS,CA2GxB"}

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

@@ -27,10 +27,12 @@ import { RenderErrorOrHelperText } from './utils/RenderErrorOrHelperText';
  * @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.
+ * @param {boolean} [props.hideLabel] - Keeps the label for assistive technology only and drops the floating label and its border notch. 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`; otherwise the floating label takes that place.
  *
  * @returns {ReactNode} The rendered Input component.
  */
-export function Input({ label, input, helperText, error, iconL, iconR, isMutedWhenEmpty, showPasswordAriaLabel, hidePasswordAriaLabel, }) {
+export function Input({ label, input, helperText, error, iconL, iconR, isMutedWhenEmpty, hideLabel = false, placeholder, showPasswordAriaLabel, hidePasswordAriaLabel, }) {
     const generatedId = useId();
     const [showPassword, setShowPassword] = useState(false);
     const id = input.id ?? generatedId;
@@ -39,9 +41,11 @@ export function Input({ label, input, helperText, error, iconL, iconR, isMutedWh
         undefined;
     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 inputClasses = clsx('peer disabled:text-gray-3 dark:disabled:text-gray-2 h-full w-full rounded-full bg-transparent text-sm font-normal text-black outline-0 transition-all focus:text-black dark:bg-black dark:text-white dark:focus:text-white', iconL ? 'pr-5 pl-11' : 'px-5', hideLabel && 'placeholder:text-gray-2 dark:placeholder:text-gray-2', input.className);
     const { labelProps, legendClasses, fieldsetClasses } = generateBorder(error, {
         isMutedWhenEmpty,
+        hideLabel,
+        hasIconL: Boolean(iconL),
     });
     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
@@ -51,12 +55,14 @@ export function Input({ label, input, helperText, error, iconL, iconR, isMutedWh
     </button>) : (iconR);
     return (<div className="w-full max-w-full">
       <div className="relative h-9">
-        <input {...input} id={id} type={effectiveType} className={inputClasses} placeholder=" " aria-invalid={error ? true : input['aria-invalid']} aria-describedby={describedBy}/>
-        <label {...labelProps}>{label}</label>
+        <input {...input} id={id} type={effectiveType} className={inputClasses} placeholder={hideLabel ? placeholder || ' ' : ' '} aria-invalid={error ? true : input['aria-invalid']} aria-describedby={describedBy}/>
+        {hideLabel ? (<label htmlFor={id} className="sr-only">
+            {label}
+          </label>) : (<label {...labelProps}>{label}</label>)}
         <fieldset aria-hidden="true" className={fieldsetClasses}>
-          <legend className={legendClasses}>{label}</legend>
+          {!hideLabel && <legend className={legendClasses}>{label}</legend>}
         </fieldset>
-        {!!iconL && (<span aria-hidden="true" className={clsx('peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 absolute top-3 left-1', error
+        {!!iconL && (<span aria-hidden="true" className={clsx('peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 absolute top-1/2 left-4 flex -translate-y-1/2 items-center', error
                 ? 'text-error dark:text-error-dark'
                 : 'text-black dark:text-white')}>
             {iconL}

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,8 +1,10 @@
 type BorderOptions = {
     isMuted?: boolean;
     isMutedWhenEmpty?: boolean;
+    hideLabel?: boolean;
+    hasIconL?: boolean;
 };
-export declare const generateBorder: (error?: string, { isMuted, isMutedWhenEmpty }?: BorderOptions) => {
+export declare const generateBorder: (error?: string, { isMuted, isMutedWhenEmpty, hideLabel, hasIconL }?: BorderOptions) => {
     labelProps: {
         htmlFor?: string;
         className: string;

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,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"}
+{"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;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,cAAc,WACjB,MAAM,uDACsC,aAAa;;kBAEnC,MAAM;mBAAa,MAAM;;;;CAuCxD,CAAC"}

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

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
-export const generateBorder = (error, { isMuted, isMutedWhenEmpty } = {}) => {
+export const generateBorder = (error, { isMuted, isMutedWhenEmpty, hideLabel, hasIconL } = {}) => {
     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
+        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', hasIconL && 'peer-[:placeholder-shown:not(:focus)]:left-10', error
             ? 'text-error dark:text-error-dark'
             : isMuted
                 ? 'text-gray-2 dark:text-gray-2'
@@ -9,7 +9,7 @@ export const generateBorder = (error, { isMuted, isMutedWhenEmpty } = {}) => {
             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
+    const fieldsetClasses = clsx('pointer-events-none absolute left-0 w-full rounded-full border px-4', hideLabel ? 'top-0 h-full' : '-top-2 h-[calc(100%+.5rem)]', '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'
         : isMuted
             ? 'border-gray-3 dark:border-gray-2'

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;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"}
+{"version":3,"file":"border.js","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/border.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AASxB,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,KAAc,EACd,EAAE,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,QAAQ,KAAoB,EAAE,EACtE,EAAE;IACF,MAAM,UAAU,GAA4C;QAC1D,SAAS,EAAE,IAAI,CACb,sIAAsI,EACtI,0RAA0R,EAC1R,QAAQ,IAAI,+CAA+C,EAC3D,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,qEAAqE,EACrE,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,6BAA6B,EAC1D,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.jsx

@@ -56,7 +56,7 @@ export function MultiSelect({ options, value = EMPTY_OPTIONS, onChange, label, d
     const optionRefs = useRef([]);
     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 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:bg-black dark:text-white dark:focus:text-white');
     const isMuted = Boolean(isMutedWhenEmpty) && !selectedOptions.length;
     const { labelProps, legendClasses, fieldsetClasses } = generateBorder(error, {
         isMuted,
@@ -177,7 +177,7 @@ export function MultiSelect({ options, value = EMPTY_OPTIONS, onChange, label, d
                 : 'dark:text-white')}>
           {label}
         </label>
-        <FaSortDown aria-hidden="true" className={clsx('absolute top-2 right-4', isMuted ? 'text-gray-2 dark:text-gray-2' : 'dark:text-white')}/>
+        <FaSortDown aria-hidden="true" className={clsx('peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 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