@clicoh/orion-library 1.2.0-beta.24 → 1.2.0-beta.26

package/assets/css/expresivo.css

@@ -50,6 +50,10 @@
   --exp-row-edge: var(--color-gray-5);
   --exp-row-edge-hover: #c9c3fd;
 
+  --exp-code-bg: var(--color-lavender-3);
+  --exp-code-drop: 0 2px 8px rgba(106, 93, 249, 0.06);
+  --exp-code-drop-hover: 0 8px 20px rgba(106, 93, 249, 0.14);
+
   --exp-nav-glow: rgba(106, 93, 249, 0.22);
 
   --exp-hero-dots: rgba(106, 93, 249, 0.14);
@@ -99,6 +103,10 @@
   --exp-row-edge: var(--color-gray-1);
   --exp-row-edge-hover: #4a3fd0;
 
+  --exp-code-bg: var(--color-gray-dark-2);
+  --exp-code-drop: none;
+  --exp-code-drop-hover: none;
+
   --exp-nav-glow: rgba(137, 128, 255, 0.35);
 
   --exp-hero-dots: rgba(137, 128, 255, 0.16);
@@ -224,17 +232,24 @@
   animation: exp-swing 3.2s ease-in-out infinite;
 }
 
-/* Page hero (ExpPageHero): a band only on wide screens ------------------ */
+/* Page hero (ExpPageHero): a band on wide screens, and below them only with
+   narrowLayout="band" ---------------------------------------------------- */
+
+.exp-hero {
+  border: 1px solid var(--exp-hero-edge);
+  border-radius: 1rem;
+  background:
+    radial-gradient(var(--exp-hero-dots) 1px, transparent 1.4px) 0 0 / 14px 14px,
+    var(--exp-hero-bg);
+  box-shadow: var(--exp-hero-drop);
+}
 
-@media (min-width: 64rem) {
-  .exp-hero {
-    border: 1px solid var(--exp-hero-edge);
-    border-radius: 1rem;
-    background:
-      radial-gradient(var(--exp-hero-dots) 1px, transparent 1.4px) 0 0 / 14px
-        14px,
-      var(--exp-hero-bg);
-    box-shadow: var(--exp-hero-drop);
+@media (max-width: 63.99rem) {
+  .exp-hero[data-narrow='row'] {
+    border: 0;
+    border-radius: 0;
+    background: none;
+    box-shadow: none;
   }
 }
 
@@ -1014,6 +1029,108 @@
   background: var(--exp-row-bg-hover);
 }
 
+/* Rows that open a detail: one tbody per row, so the gap moves from
+   border-spacing to a spacer row and the open row joins its detail. */
+
+:root:has(.exp-scope[data-exp-tables='cards'])
+  [data-orion-part='table']:has(> [data-orion-part='table-group']):not(
+    [data-orion-part='data-table'][data-modifier='card'] *
+  ) {
+  border-spacing: 0;
+}
+
+:root:has(.exp-scope[data-exp-tables='cards'])
+  [data-orion-part='table-group']:not(
+    [data-orion-part='data-table'][data-modifier='card'] *
+  )::before {
+  content: '';
+  display: table-row;
+  height: 8px;
+}
+
+:root:has(.exp-scope[data-exp-tables='cards'])
+  [data-orion-part='table-row'][data-expanded]:not(
+    [data-orion-part='data-table'][data-modifier='card'] *
+  )
+  > td {
+  border-color: var(--exp-row-edge-hover);
+  border-bottom-color: var(--exp-row-edge);
+  background: var(--exp-row-bg-hover);
+}
+
+:root:has(.exp-scope[data-exp-tables='cards'])
+  [data-orion-part='table-row'][data-expanded]:not(
+    [data-orion-part='data-table'][data-modifier='card'] *
+  )
+  > td:first-child {
+  border-radius: 14px 0 0 0;
+}
+
+:root:has(.exp-scope[data-exp-tables='cards'])
+  [data-orion-part='table-row'][data-expanded]:not(
+    [data-orion-part='data-table'][data-modifier='card'] *
+  )
+  > td:last-child {
+  border-radius: 0 14px 0 0;
+}
+
+:root:has(.exp-scope[data-exp-tables='cards'])
+  [data-orion-part='table-detail']:not(
+    [data-orion-part='data-table'][data-modifier='card'] *
+  ) {
+  border: 0;
+  background: transparent;
+}
+
+:root:has(.exp-scope[data-exp-tables='cards'])
+  [data-orion-part='table-detail']:not(
+    [data-orion-part='data-table'][data-modifier='card'] *
+  )
+  > td {
+  padding: 16px 16px 20px;
+  border: 1px solid var(--exp-row-edge-hover);
+  border-top: 0;
+  border-radius: 0 0 14px 14px;
+  background: var(--exp-code-bg);
+}
+
+/* Skin: code blocks with a title (CodeBlock title) ---------------------- */
+
+/* A titled block stands alone, as a card: the band along the top and the
+   code on a tinted surface. */
+:root:has(.exp-scope)
+  [data-orion-part='code-block']:has([data-orion-part='code-block-title']) {
+  border-color: var(--exp-card-edge);
+  border-radius: 16px;
+  padding-top: 3px;
+  background:
+    var(--exp-card-band) top / 100% 3px no-repeat,
+    var(--exp-card-bg);
+  box-shadow: var(--exp-code-drop);
+  transition:
+    transform 200ms var(--exp-ease-out),
+    box-shadow 200ms ease;
+}
+
+:root:has(.exp-scope)
+  [data-orion-part='code-block']:has(
+    [data-orion-part='code-block-title']
+  ):hover {
+  box-shadow: var(--exp-code-drop-hover);
+}
+
+:root:has(.exp-scope)
+  [data-orion-part='code-block']:has([data-orion-part='code-block-title'])
+  > [data-orion-part='code-block-header'] {
+  padding: 8px 8px 8px 16px;
+}
+
+:root:has(.exp-scope)
+  [data-orion-part='code-block']:has([data-orion-part='code-block-title'])
+  > pre {
+  background: var(--exp-code-bg);
+}
+
 /* Hover movement, only without reduced motion --------------------------- */
 
 @media (prefers-reduced-motion: no-preference) {
@@ -1063,10 +1180,17 @@
   :root:has(.exp-scope[data-exp-tables='cards'])
     [data-orion-part='table-row']:not(
       [data-orion-part='data-table'][data-modifier='card'] *
-    ):is(:hover, :focus-visible, [data-selected])
+    ):not([data-expanded]):is(:hover, :focus-visible, [data-selected])
     > td {
     transform: translateY(-2px);
   }
+
+  :root:has(.exp-scope)
+    [data-orion-part='code-block']:has(
+      [data-orion-part='code-block-title']
+    ):hover {
+    transform: translateY(-2px);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -1096,6 +1220,7 @@
   :root:has(.exp-scope) textarea[data-orion-part='field-control'],
   :root:has(.exp-scope) [data-orion-part='field-icon'],
   :root:has(.exp-scope) [data-orion-part='table-row'] > td,
+  :root:has(.exp-scope) [data-orion-part='code-block'],
   :root:has(.exp-scope) [data-orion-part='menu-link']::before {
     transition: none;
   }

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

@@ -10,6 +10,12 @@ export type CodeBlockProps = {
     copiedLabel: string;
     /** Shown in the header (`ts`, `sql`, `diff`). No syntax coloring is applied. */
     language?: string;
+    /** Header content before the language, such as where the excerpt comes from. */
+    title?: ReactNode;
+    /** What the copy button writes, when it is not the code itself. */
+    copyText?: string;
+    /** Text to mark wherever it appears in the code, ignoring case. */
+    mark?: string;
     /** Number of the first line. Line numbers are shown only when it is set. */
     startLine?: number;
     /** Lines to emphasize, as inclusive ranges in the same numbering. */
@@ -18,7 +24,7 @@ export type CodeBlockProps = {
     wrap?: boolean;
     /** Called when the browser refuses to write to the clipboard. */
     onCopyError?: (error: unknown) => void;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'>;
 /**
  * Read-only block of source code with a copy button. Shows an excerpt
  * exactly as written: monospace and, by default, no wrapping, with horizontal
@@ -26,12 +32,17 @@ export type CodeBlockProps = {
  *
  * With `wrap`, a line longer than the block continues on the next row, under
  * the code and not under the line numbers. Use it where scrolling sideways is
- * awkward, such as narrow screens or a command to read whole. Copying always
- * takes the original text.
+ * awkward, such as narrow screens or a command to read whole. Copying takes
+ * the original text, or `copyText` when the button should copy something
+ * else, such as the file and line the excerpt comes from.
  *
  * Setting `startLine` numbers the lines, so an excerpt from the middle of a
  * file keeps its real line numbers; `highlight` then marks ranges in that
- * same numbering. There is no syntax coloring.
+ * same numbering, and `mark` marks every match of a text inside the lines,
+ * such as the query that found the excerpt. There is no syntax coloring.
+ *
+ * `title` goes in the header, before the language label: where the excerpt
+ * comes from, as a file path or a set of badges.
  *
  * Copying uses the Clipboard API, which browsers only expose on secure
  * origins (`https` or `localhost`). When it fails the button stays as it was
@@ -53,6 +64,9 @@ export type CodeBlockProps = {
  * @param {string} props.copyLabel - Accessible name and tooltip of the copy button.
  * @param {string} props.copiedLabel - Shown and announced right after copying.
  * @param {string} [props.language] - Label shown in the header.
+ * @param {ReactNode} [props.title] - Header content before the language label.
+ * @param {string} [props.copyText] - What the copy button writes; defaults to `code`.
+ * @param {string} [props.mark] - Text marked wherever it appears in the code, ignoring case.
  * @param {number} [props.startLine] - Number of the first line; enables line numbers.
  * @param {CodeBlockRange[]} [props.highlight=[]] - Inclusive line ranges to emphasize.
  * @param {boolean} [props.wrap=false] - Long lines continue on the next row instead of scrolling.
@@ -60,5 +74,5 @@ export type CodeBlockProps = {
  *
  * @returns {ReactNode} The rendered CodeBlock component.
  */
-export declare function CodeBlock({ code, copyLabel, copiedLabel, language, startLine, highlight, wrap, onCopyError, ...restProps }: CodeBlockProps): ReactNode;
+export declare function CodeBlock({ code, copyLabel, copiedLabel, language, title, copyText, mark, startLine, highlight, wrap, onCopyError, ...restProps }: CodeBlockProps): ReactNode;
 //# sourceMappingURL=CodeBlock.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAKf,iEAAiE;AACjE,MAAM,MAAM,cAAc,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,CAAC,CAAC;AAExD,MAAM,MAAM,cAAc,GAAG;IAC3B,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,SAAS,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAC7B,yEAAyE;IACzE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAQrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,EACT,SAAc,EACd,IAAY,EACZ,WAAW,EACX,GAAG,SAAS,EACb,EAAE,cAAc,GAAG,SAAS,CAmG5B"}
+{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAKf,iEAAiE;AACjE,MAAM,MAAM,cAAc,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,CAAC,CAAC;AAExD,MAAM,MAAM,cAAc,GAAG;IAC3B,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,SAAS,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAC7B,yEAAyE;IACzE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC;AAmC/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,SAAS,EACT,WAAW,EACX,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,SAAc,EACd,IAAY,EACZ,WAAW,EACX,GAAG,SAAS,EACb,EAAE,cAAc,GAAG,SAAS,CAgH5B"}

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

@@ -2,12 +2,32 @@
 import clsx from 'clsx';
 import { useEffect, useRef, useState, } from 'react';
 import { FiCheck, FiCopy } from 'react-icons/fi';
-import { Each } from '../../00-base';
+import { Each, Show } from '../../00-base';
 import { IconButton } from '../IconButton';
 const COPIED_FEEDBACK_MS = 1600;
 function isHighlighted(line, ranges) {
     return ranges.some(([from, to]) => line >= from && line <= to);
 }
+function markPattern(mark) {
+    const text = mark?.trim();
+    if (!text)
+        return undefined;
+    return new RegExp(`(${text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'i');
+}
+function renderLine(line, pattern) {
+    if (!line)
+        return ' ';
+    if (!pattern)
+        return line;
+    return (<Each of={line.split(pattern)} render={(part, index) => (<Show>
+          <Show.When isTrue={index % 2 === 1}>
+            <mark className="dark:bg-lavender-dark-1 bg-lavender-1 rounded-sm text-current shadow-[0_0_0_1px_rgba(106,93,249,0.35)]">
+              {part}
+            </mark>
+          </Show.When>
+          <Show.Else>{part}</Show.Else>
+        </Show>)}/>);
+}
 /**
  * Read-only block of source code with a copy button. Shows an excerpt
  * exactly as written: monospace and, by default, no wrapping, with horizontal
@@ -15,12 +35,17 @@ function isHighlighted(line, ranges) {
  *
  * With `wrap`, a line longer than the block continues on the next row, under
  * the code and not under the line numbers. Use it where scrolling sideways is
- * awkward, such as narrow screens or a command to read whole. Copying always
- * takes the original text.
+ * awkward, such as narrow screens or a command to read whole. Copying takes
+ * the original text, or `copyText` when the button should copy something
+ * else, such as the file and line the excerpt comes from.
  *
  * Setting `startLine` numbers the lines, so an excerpt from the middle of a
  * file keeps its real line numbers; `highlight` then marks ranges in that
- * same numbering. There is no syntax coloring.
+ * same numbering, and `mark` marks every match of a text inside the lines,
+ * such as the query that found the excerpt. There is no syntax coloring.
+ *
+ * `title` goes in the header, before the language label: where the excerpt
+ * comes from, as a file path or a set of badges.
  *
  * Copying uses the Clipboard API, which browsers only expose on secure
  * origins (`https` or `localhost`). When it fails the button stays as it was
@@ -42,6 +67,9 @@ function isHighlighted(line, ranges) {
  * @param {string} props.copyLabel - Accessible name and tooltip of the copy button.
  * @param {string} props.copiedLabel - Shown and announced right after copying.
  * @param {string} [props.language] - Label shown in the header.
+ * @param {ReactNode} [props.title] - Header content before the language label.
+ * @param {string} [props.copyText] - What the copy button writes; defaults to `code`.
+ * @param {string} [props.mark] - Text marked wherever it appears in the code, ignoring case.
  * @param {number} [props.startLine] - Number of the first line; enables line numbers.
  * @param {CodeBlockRange[]} [props.highlight=[]] - Inclusive line ranges to emphasize.
  * @param {boolean} [props.wrap=false] - Long lines continue on the next row instead of scrolling.
@@ -49,7 +77,7 @@ function isHighlighted(line, ranges) {
  *
  * @returns {ReactNode} The rendered CodeBlock component.
  */
-export function CodeBlock({ code, copyLabel, copiedLabel, language, startLine, highlight = [], wrap = false, onCopyError, ...restProps }) {
+export function CodeBlock({ code, copyLabel, copiedLabel, language, title, copyText, mark, startLine, highlight = [], wrap = false, onCopyError, ...restProps }) {
     const [isCopied, setIsCopied] = useState(false);
     const resetTimer = useRef(undefined);
     useEffect(() => () => clearTimeout(resetTimer.current), []);
@@ -57,9 +85,10 @@ export function CodeBlock({ code, copyLabel, copiedLabel, language, startLine, h
     const isNumbered = startLine !== undefined;
     const firstLine = startLine ?? 1;
     const gutterWidth = `${String(firstLine + lines.length - 1).length}ch`;
+    const pattern = markPattern(mark);
     const copy = async () => {
         try {
-            await navigator.clipboard.writeText(code);
+            await navigator.clipboard.writeText(copyText ?? code);
         }
         catch (error) {
             onCopyError?.(error);
@@ -69,8 +98,11 @@ export function CodeBlock({ code, copyLabel, copiedLabel, language, startLine, h
         clearTimeout(resetTimer.current);
         resetTimer.current = setTimeout(() => setIsCopied(false), COPIED_FEEDBACK_MS);
     };
-    return (<div {...restProps} className={clsx('border-gray-5 bg-gray-7 dark:border-gray-1 dark:bg-black-1 min-w-0 overflow-hidden rounded-lg border', restProps.className)}>
-      <div className="border-gray-5 dark:border-gray-1 flex items-center justify-between gap-2 border-b py-1 pr-1 pl-3">
+    return (<div {...restProps} data-orion-part="code-block" className={clsx('border-gray-5 bg-gray-7 dark:border-gray-1 dark:bg-black-1 min-w-0 overflow-hidden rounded-lg border', restProps.className)}>
+      <div data-orion-part="code-block-header" className="border-gray-5 dark:border-gray-1 flex items-center justify-between gap-2 border-b py-1 pr-1 pl-3">
+        {!!title && (<div data-orion-part="code-block-title" className="flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-1 py-1">
+            {title}
+          </div>)}
         <span className="text-gray-1 dark:text-gray-2 truncate text-xs leading-4">
           {language}
         </span>
@@ -93,7 +125,7 @@ export function CodeBlock({ code, copyLabel, copiedLabel, language, startLine, h
                   <span className={clsx('pr-3', wrap
                     ? 'min-w-0 flex-1 wrap-anywhere whitespace-pre-wrap'
                     : 'whitespace-pre', !isNumbered && 'pl-3')}>
-                    {line || ' '}
+                    {renderLine(line, pattern)}
                   </span>
                   {'\n'}
                 </span>);

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

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

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

@@ -3,6 +3,7 @@ export type OptionType = {
     value: number | string;
     label: string;
 };
+export type TMultiSelectSelectionDisplay = 'count' | 'chips';
 type MultiSelectProps = {
     label: string;
     options: OptionType[];
@@ -13,10 +14,17 @@ type MultiSelectProps = {
     error?: string;
     isMutedWhenEmpty?: boolean;
     clearButtonAriaLabel?: string;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'onClick'>;
+    selectionDisplay?: TMultiSelectSelectionDisplay;
+    removeLabel?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'onChange'>;
 /**
  * MultiSelect component for rendering a multi-select dropdown.
  *
+ * By default the field shows how many options are selected. With
+ * `selectionDisplay="chips"` the field stays as the prompt and every selected
+ * option sits as a chip under it, in the order it was picked; with
+ * `removeLabel`, each chip has a button that removes it.
+ *
  * @component
  * @example
  * // Example usage of MultiSelect component
@@ -36,20 +44,33 @@ type MultiSelectProps = {
  *   error=""
  * />
  *
+ * @example
+ * // Selected options as removable chips
+ * <MultiSelect
+ *   label="Countries"
+ *   options={options}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   selectionDisplay="chips"
+ *   removeLabel="Remove"
+ * />
+ *
  * @param {MultiSelectProps} props - The properties of the MultiSelect component.
  * @param {string} props.label - The label for the multi-select input.
  * @param {OptionType[]} props.options - Array of options to be displayed in the dropdown.
  * @param {OptionType[]} [props.value] - Array of selected options.
- * @param {function} [props.onChange] - Callback function to handle change in selected options.
+ * @param {(selectedOptions: OptionType[]) => void} [props.onChange] - Called with every selected option after each change. It replaces the container's HTML `onChange`, which is not forwarded.
  * @param {boolean} [props.disabled] - Boolean to disable the multi-select input.
  * @param {string} [props.helperText] - Helper text to be displayed below the input.
  * @param {string} [props.error] - Error message to be displayed below the input.
  * @param {boolean} [props.isMutedWhenEmpty] - Renders the border and label in gray while nothing is selected.
  * @param {string} [props.clearButtonAriaLabel] - Accessible label for the button that clears the selection.
- * @param {HTMLAttributes<HTMLDivElement>} [props.restProps] - Additional HTML attributes for the container div.
+ * @param {TMultiSelectSelectionDisplay} [props.selectionDisplay='count'] - `count` writes the number of selected options in the field; `chips` lists them as chips under the field instead.
+ * @param {string} [props.removeLabel] - Accessible name of each chip's remove button, followed by the option label (`Remove Option 1`). Without it the chips have no remove button and the selection changes from the list only. Only used with `chips`.
+ * @param {HTMLAttributes<HTMLDivElement>} [props.restProps] - Additional HTML attributes for the container div, except `onClick` and `onChange`.
  *
  * @returns {ReactNode} The rendered MultiSelect component.
  */
-export declare function MultiSelect({ options, value, onChange, label, disabled, helperText, error, isMutedWhenEmpty, clearButtonAriaLabel, ...restProps }: MultiSelectProps): ReactNode;
+export declare function MultiSelect({ options, value, onChange, label, disabled, helperText, error, isMutedWhenEmpty, clearButtonAriaLabel, selectionDisplay, removeLabel, ...restProps }: MultiSelectProps): ReactNode;
 export {};
 //# sourceMappingURL=MultiSelect.d.ts.map

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

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

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

@@ -2,7 +2,7 @@
 import clsx from 'clsx';
 import { useEffect, useRef, useState, } from 'react';
 import { FaSortDown } from 'react-icons/fa';
-import { FiCheck } from 'react-icons/fi';
+import { FiCheck, FiX } from 'react-icons/fi';
 import { IoIosSearch, IoMdCloseCircleOutline } from 'react-icons/io';
 import { generateUniqueId } from '../../../utils';
 import { Each, Show } from '../../00-base';
@@ -12,6 +12,11 @@ const EMPTY_OPTIONS = [];
 /**
  * MultiSelect component for rendering a multi-select dropdown.
  *
+ * By default the field shows how many options are selected. With
+ * `selectionDisplay="chips"` the field stays as the prompt and every selected
+ * option sits as a chip under it, in the order it was picked; with
+ * `removeLabel`, each chip has a button that removes it.
+ *
  * @component
  * @example
  * // Example usage of MultiSelect component
@@ -31,21 +36,34 @@ const EMPTY_OPTIONS = [];
  *   error=""
  * />
  *
+ * @example
+ * // Selected options as removable chips
+ * <MultiSelect
+ *   label="Countries"
+ *   options={options}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   selectionDisplay="chips"
+ *   removeLabel="Remove"
+ * />
+ *
  * @param {MultiSelectProps} props - The properties of the MultiSelect component.
  * @param {string} props.label - The label for the multi-select input.
  * @param {OptionType[]} props.options - Array of options to be displayed in the dropdown.
  * @param {OptionType[]} [props.value] - Array of selected options.
- * @param {function} [props.onChange] - Callback function to handle change in selected options.
+ * @param {(selectedOptions: OptionType[]) => void} [props.onChange] - Called with every selected option after each change. It replaces the container's HTML `onChange`, which is not forwarded.
  * @param {boolean} [props.disabled] - Boolean to disable the multi-select input.
  * @param {string} [props.helperText] - Helper text to be displayed below the input.
  * @param {string} [props.error] - Error message to be displayed below the input.
  * @param {boolean} [props.isMutedWhenEmpty] - Renders the border and label in gray while nothing is selected.
  * @param {string} [props.clearButtonAriaLabel] - Accessible label for the button that clears the selection.
- * @param {HTMLAttributes<HTMLDivElement>} [props.restProps] - Additional HTML attributes for the container div.
+ * @param {TMultiSelectSelectionDisplay} [props.selectionDisplay='count'] - `count` writes the number of selected options in the field; `chips` lists them as chips under the field instead.
+ * @param {string} [props.removeLabel] - Accessible name of each chip's remove button, followed by the option label (`Remove Option 1`). Without it the chips have no remove button and the selection changes from the list only. Only used with `chips`.
+ * @param {HTMLAttributes<HTMLDivElement>} [props.restProps] - Additional HTML attributes for the container div, except `onClick` and `onChange`.
  *
  * @returns {ReactNode} The rendered MultiSelect component.
  */
-export function MultiSelect({ options, value = EMPTY_OPTIONS, onChange, label, disabled, helperText, error, isMutedWhenEmpty, clearButtonAriaLabel, ...restProps }) {
+export function MultiSelect({ options, value = EMPTY_OPTIONS, onChange, label, disabled, helperText, error, isMutedWhenEmpty, clearButtonAriaLabel, selectionDisplay = 'count', removeLabel, ...restProps }) {
     const [id, setId] = useState('');
     const [filteredOptions, setFilteredOptions] = useState(options);
     const [selectedOptions, setSelectedOptions] = useState(value);
@@ -68,6 +86,7 @@ export function MultiSelect({ options, value = EMPTY_OPTIONS, onChange, label, d
     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:bg-black dark:text-white dark:focus:text-white');
     const isMuted = Boolean(isMutedWhenEmpty) && !selectedOptions.length;
+    const showsChips = selectionDisplay === 'chips';
     const { labelProps, legendClasses, fieldsetClasses } = generateBorder(error, {
         isMuted,
     });
@@ -85,6 +104,11 @@ export function MultiSelect({ options, value = EMPTY_OPTIONS, onChange, label, d
         setSelectedOptions(newSelectedOptions);
         onChange?.(newSelectedOptions);
     };
+    const removeOption = (option) => {
+        const newSelectedOptions = selectedOptions.filter((selectedOption) => selectedOption.value !== option.value);
+        setSelectedOptions(newSelectedOptions);
+        onChange?.(newSelectedOptions);
+    };
     const handleQueryChange = (e) => {
         const newQuery = e.target.value;
         setQuery(newQuery);
@@ -172,7 +196,7 @@ export function MultiSelect({ options, value = EMPTY_OPTIONS, onChange, label, d
     }, []);
     return (<div {...restProps} className={clsx('relative w-full', restProps.className)} ref={containerRef}>
       <div className={clsx('relative h-9 rounded-full', disabled ? 'pointer-events-none select-none' : 'cursor-pointer')} onClick={handleToggleDropdown}>
-        <input ref={triggerRef} id={id} role="combobox" placeholder=" " value={selectedOptions.length
+        <input ref={triggerRef} id={id} role="combobox" placeholder=" " value={selectedOptions.length && !showsChips
             ? `${selectedOptions.length} seleccionado(s)`
             : ''} readOnly className={inputClasses} disabled={disabled} aria-expanded={isOpen} aria-haspopup="listbox" aria-controls={listboxId} aria-invalid={Boolean(error)} aria-describedby={error || helperText ? feedbackId : undefined} onKeyDown={handleTriggerKeyDown}/>
         <label {...labelProps} htmlFor={id || undefined} className={clsx(labelProps.className, 'dark:peer-disabled:text-gray-2', error
@@ -191,6 +215,16 @@ export function MultiSelect({ options, value = EMPTY_OPTIONS, onChange, label, d
           <legend className={legendClasses}>{label}</legend>
         </fieldset>
       </div>
+      {!!showsChips && selectedOptions.length > 0 && (<ul aria-label={label} className="mt-2 flex flex-wrap gap-1.5">
+          <Each of={selectedOptions} render={(option) => (<li key={option.value} className={clsx('bg-lavender-2 dark:bg-lavender-dark-1 inline-flex h-7 max-w-full items-center gap-1 rounded-full pl-3 text-xs font-medium', removeLabel ? 'pr-1' : 'pr-3', disabled
+                    ? 'text-gray-3 dark:text-gray-2'
+                    : 'text-black dark:text-white')}>
+                <span className="truncate">{option.label}</span>
+                {!!removeLabel && (<button type="button" aria-label={`${removeLabel} ${option.label}`} disabled={disabled} onClick={() => removeOption(option)} className="text-gray-1 dark:text-gray-2 disabled:text-gray-3 flex size-5 shrink-0 items-center justify-center rounded-full transition-colors not-disabled:hover:bg-black not-disabled:hover:text-white disabled:cursor-not-allowed dark:not-disabled:hover:bg-white dark:not-disabled:hover:text-black">
+                    <FiX size={12} aria-hidden="true"/>
+                  </button>)}
+              </li>)}/>
+        </ul>)}
       <div id={feedbackId}>
         <RenderErrorOrHelperText disabled={disabled} helperText={helperText} error={error} className={clsx('pl-6', error && !disabled ? 'dark:text-error-dark' : 'dark:text-gray-2')}/>
       </div>

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAKL,SAAS,EACT,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAmBjF,MAAM,aAAa,GAAiB,EAAE,CAAC;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,GAAG,aAAa,EACrB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,oBAAoB,EACpB,GAAG,SAAS,EACK;IACjB,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAe,OAAO,CAAC,CAAC;IAC9E,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAe,KAAK,CAAC,CAAC;IAC5E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACrD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;IAEvD,4EAA4E;IAC5E,2EAA2E;IAC3E,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,IAAI,KAAK,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;QACvD,QAAQ,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;QAC7B,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO;YAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;QAC3D,IAAI,KAAK,CAAC,KAAK,KAAK,KAAK;YAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACvD,CAAC;IAED,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,MAAM,CAA8B,EAAE,CAAC,CAAC;IAC3D,MAAM,SAAS,GAAG,GAAG,EAAE,UAAU,CAAC;IAClC,MAAM,UAAU,GAAG,GAAG,EAAE,WAAW,CAAC;IAEpC,MAAM,YAAY,GAAG,IAAI,CACvB,iQAAiQ,CAClQ,CAAC;IAEF,MAAM,OAAO,GAAG,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC;IAErE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,cAAc,CAAC,KAAK,EAAE;QAC3E,OAAO;KACR,CAAC,CAAC;IAEH,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QACD,SAAS,CAAC,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC;IAC/C,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,MAAkB,EAAE,EAAE;QAC/C,MAAM,UAAU,GAAG,eAAe,CAAC,IAAI,CACrC,CAAC,cAAc,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAC1D,CAAC;QACF,MAAM,kBAAkB,GAAG,UAAU;YACnC,CAAC,CAAC,eAAe,CAAC,MAAM,CACpB,CAAC,cAAc,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAC1D;YACH,CAAC,CAAC,CAAC,GAAG,eAAe,EAAE,MAAM,CAAC,CAAC;QAEjC,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;QACvC,QAAQ,EAAE,CAAC,kBAAkB,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC7D,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAChC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,MAAM,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAC7C,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAC5D,CAAC;QACF,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC/C,IACE,YAAY,CAAC,OAAO;YACpB,CAAC,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EACpD,CAAC;YACD,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,kBAAkB,CAAC,EAAE,CAAC,CAAC;QACvB,kBAAkB,CAAC,OAAO,CAAC,CAAC;QAC5B,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE;QACpC,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC;IACrC,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAG,CAAC,KAAsC,EAAE,EAAE;QACtE,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QAED,IACE,KAAK,CAAC,GAAG,KAAK,OAAO;YACrB,KAAK,CAAC,GAAG,KAAK,GAAG;YACjB,KAAK,CAAC,GAAG,KAAK,WAAW,EACzB,CAAC;YACD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;QACnC,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAClC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,KAAsC,EAAE,EAAE;QACrE,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,aAAa,EAAE,CAAC;QAClB,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YACrC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,WAAW,CAAC,CAAC,CAAC,CAAC;QACjB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAC1B,KAAmC,EACnC,KAAa,EACb,MAAkB,EAClB,EAAE;QACF,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;QAC/D,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YACnC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QACtC,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE,CAAC;YAChC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,WAAW,CAAC,CAAC,CAAC,CAAC;QACjB,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;YAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,WAAW,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC1C,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACtD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,iBAAiB,CAAC,MAAM,CAAC,CAAC;QAC5B,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAClC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,aAAa,EAAE,CAAC;QAClB,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,kJAAkJ;QAClJ,KAAK,CAAC,gBAAgB,EAAE,CAAC,CAAC;QAE1B,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,CAAC,GAAG,CACF,IAAI,SAAS,CAAC,CACd,SAAS,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CACxD,GAAG,CAAC,CAAC,YAAY,CAAC,CAElB;MAAA,CAAC,GAAG,CACF,SAAS,CAAC,CAAC,IAAI,CACb,2BAA2B,EAC3B,QAAQ,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,gBAAgB,CAChE,CAAC,CACF,OAAO,CAAC,CAAC,oBAAoB,CAAC,CAE9B;QAAA,CAAC,KAAK,CACJ,GAAG,CAAC,CAAC,UAAU,CAAC,CAChB,EAAE,CAAC,CAAC,EAAE,CAAC,CACP,IAAI,CAAC,UAAU,CACf,WAAW,CAAC,GAAG,CACf,KAAK,CAAC,CACJ,eAAe,CAAC,MAAM;YACpB,CAAC,CAAC,GAAG,eAAe,CAAC,MAAM,kBAAkB;YAC7C,CAAC,CAAC,EACN,CAAC,CACD,QAAQ,CACR,SAAS,CAAC,CAAC,YAAY,CAAC,CACxB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,aAAa,CAAC,CAAC,MAAM,CAAC,CACtB,aAAa,CAAC,SAAS,CACvB,aAAa,CAAC,CAAC,SAAS,CAAC,CACzB,YAAY,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAC7B,gBAAgB,CAAC,CAAC,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAC/D,SAAS,CAAC,CAAC,oBAAoB,CAAC,EAElC;QAAA,CAAC,KAAK,CACJ,IAAI,UAAU,CAAC,CACf,OAAO,CAAC,CAAC,EAAE,IAAI,SAAS,CAAC,CACzB,SAAS,CAAC,CAAC,IAAI,CACb,UAAU,CAAC,SAAS,EACpB,gCAAgC,EAChC,KAAK;YACH,CAAC,CAAC,sBAAsB;YACxB,CAAC,CAAC,OAAO;gBACP,CAAC,CAAC,kBAAkB;gBACpB,CAAC,CAAC,iBAAiB,CACxB,CAAC,CAEF;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,KAAK,CACP;QAAA,CAAC,UAAU,CACT,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CACb,iFAAiF,EACjF,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,iBAAiB,CAC7D,CAAC,EAEJ;QAAA,CAAC,QAAQ,CACP,SAAS,CAAC,CAAC,IAAI,CACb,eAAe,EACf,kCAAkC,EAClC,KAAK;YACH,CAAC,CAAC,wBAAwB;YAC1B,CAAC,CAAC,OAAO;gBACP,CAAC,CAAC,oBAAoB;gBACtB,CAAC,CAAC,mBAAmB,CAC1B,CAAC,CAEF;UAAA,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,MAAM,CACnD;QAAA,EAAE,QAAQ,CACZ;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,CAClB;QAAA,CAAC,uBAAuB,CACtB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,SAAS,CAAC,CAAC,IAAI,CACb,MAAM,EACN,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,kBAAkB,CACjE,CAAC,EAEN;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,CAAC,CAAC,MAAM,IAAI,CACX,CAAC,GAAG,CAAC,SAAS,CAAC,wJAAwJ,CACrK;UAAA,CAAC,GAAG,CAAC,SAAS,CAAC,gCAAgC,CAC7C;YAAA,CAAC,GAAG,CAAC,SAAS,CAAC,sBAAsB,CACnC;cAAA,CAAC,KAAK,CACJ,IAAI,CAAC,MAAM,CACX,UAAU,CAAC,CAAC,KAAK,CAAC,CAClB,aAAa,CAAC,CAAC,SAAS,CAAC,CACzB,SAAS,CAAC,+GAA+G,CACzH,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CAAC,CAAC,iBAAiB,CAAC,CAC5B,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAC/B,SAAS,CAAC,CAAC,mBAAmB,CAAC,EAEjC;cAAA,CAAC,WAAW,CACV,WAAW,CAAC,MAAM,CAClB,IAAI,CAAC,CAAC,EAAE,CAAC,CACT,SAAS,CAAC,wBAAwB,EAEtC;YAAA,EAAE,GAAG,CACL;YAAA,CAAC,MAAM,CACL,IAAI,CAAC,QAAQ,CACb,UAAU,CAAC,CAAC,oBAAoB,CAAC,CACjC,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAC3B,SAAS,CAAC,yNAAyN,CAEnO;cAAA,CAAC,sBAAsB,CAAC,WAAW,CAAC,MAAM,EAC5C;YAAA,EAAE,MAAM,CACV;UAAA,EAAE,GAAG,CACL;UAAA,CAAC,EAAE,CACD,EAAE,CAAC,CAAC,SAAS,CAAC,CACd,IAAI,CAAC,SAAS,CACd,oBAAoB,CAAC,MAAM,CAC3B,SAAS,CAAC,yEAAyE,CAEnF;YAAA,CAAC,IAAI,CACH;cAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CACjD;gBAAA,CAAC,IAAI,CACH,EAAE,CAAC,CAAC,eAAe,CAAC,CACpB,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;gBACxB,MAAM,UAAU,GAAG,eAAe,CAAC,IAAI,CACrC,CAAC,cAAc,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAC1D,CAAC;gBAEF,OAAO,CACL,CAAC,EAAE,CACD,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE;wBACf,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC;oBACtC,CAAC,CAAC,CACF,IAAI,CAAC,QAAQ,CACb,aAAa,CAAC,CAAC,UAAU,CAAC,CAC1B,QAAQ,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAC/B,SAAS,CAAC,0IAA0I,CACpJ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAClB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CACzC,SAAS,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,CACnB,mBAAmB,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAC1C,CAAC,CAED;wBAAA,CAAC,IAAI,CACH,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CACb,oEAAoE,EACpE,UAAU;wBACR,CAAC,CAAC,kFAAkF;wBACpF,CAAC,CAAC,2DAA2D,CAChE,CAAC,CAEF;0BAAA,CAAC,IAAI,CACH;4BAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAC5B;8BAAA,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,EAC7B;4BAAA,EAAE,IAAI,CAAC,IAAI,CACb;0BAAA,EAAE,IAAI,CACR;wBAAA,EAAE,IAAI,CACN;wBAAA,CAAC,IAAI,CAAC,SAAS,CAAC,2BAA2B,CACzC;0BAAA,CAAC,MAAM,CAAC,KAAK,CACf;wBAAA,EAAE,IAAI,CACR;sBAAA,EAAE,EAAE,CAAC,CACN,CAAC;YACJ,CAAC,CAAC,EAEN;cAAA,EAAE,IAAI,CAAC,IAAI,CACX;cAAA,CAAC,IAAI,CAAC,IAAI,CACR;gBAAA,CAAC,EAAE,CACD,IAAI,CAAC,QAAQ,CACb,aAAa,CAAC,CAAC,KAAK,CAAC,CACrB,aAAa,CAAC,MAAM,CACpB,SAAS,CAAC,KAAK,CAEf;;gBACF,EAAE,EAAE,CACN;cAAA,EAAE,IAAI,CAAC,IAAI,CACb;YAAA,EAAE,IAAI,CACR;UAAA,EAAE,EAAE,CACN;QAAA,EAAE,GAAG,CAAC,CACP,CACH;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"MultiSelect.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"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"}

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

@@ -1,3 +1,3 @@
 export { MultiSelect } from './MultiSelect';
-export type { OptionType } from './MultiSelect';
+export type { OptionType, TMultiSelectSelectionDisplay } from './MultiSelect';
 //# sourceMappingURL=index.d.ts.map

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

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

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

@@ -37,7 +37,7 @@ type SelectProps = {
  * @param {boolean} [props.isMutedWhenEmpty] - Renders the border and label in gray while no option is selected.
  * @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; pair it with `placeholder`.
  * @param {ReactNode} [props.labelAddon] - Element rendered right after the floating label, inside the border notch — typically an info icon wrapped in a `Tooltip`. It stays interactive and is not part of the label's accessible name. Ignored with `hideLabel`.
- * @param {boolean} [props.customList=false] - Opens Orion's own option list instead of the native popup, which each browser and OS paints its own way. Same `options`, `select.value` and `select.onChange`: picking an option fires the native `change` event.
+ * @param {boolean} [props.customList=false] - Opens Orion's own option list instead of the native popup, which each browser and OS paints its own way. Same `options`, `select.value` and `select.onChange`: picking an option fires the native `change` event. The list opens under the field, as wide as it, and Escape closes only the list (a surrounding `Modal` stays open). Prefer it inside a `Modal`: the native popup is placed and sized by the browser, outside the dialog.
  * @param {ReactNode} [props.iconL] - Element at the left of the chosen option, as in `Input`: an icon or a `CountryFlag` that follows the value. Decorative: the option text carries the meaning.
  *
  * @returns {ReactNode} The rendered Select component.