@clicoh/orion-library 1.2.0-beta.2 → 1.2.0-beta.21

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

@@ -8,6 +8,9 @@ type SelectProps = {
     readonly error?: string;
     readonly isMutedWhenEmpty?: boolean;
     readonly hideLabel?: boolean;
+    readonly labelAddon?: ReactNode;
+    readonly customList?: boolean;
+    readonly iconL?: ReactNode;
 };
 /**
  * Select component for rendering a dropdown with customizable options, labels, helper text, and error messages.
@@ -33,9 +36,12 @@ type SelectProps = {
  * @param {string} [props.error] - Optional error message to be displayed below the select dropdown.
  * @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 {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.
  */
-export declare function Select({ label, options, select, placeholder, helperText, error, isMutedWhenEmpty, hideLabel, }: SelectProps): ReactNode;
+export declare function Select({ label, options, select, placeholder, helperText, error, isMutedWhenEmpty, hideLabel, labelAddon, customList, iconL, }: SelectProps): ReactNode;
 export {};
 //# sourceMappingURL=Select.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Select/Select.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,oBAAoB,EAE1B,MAAM,OAAO,CAAC;AAMf,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,CAAC;IAClD,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CACpB,iBAAiB,CACf,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,EACD,UAAU,CACX,CAAC;IACF,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IACpC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAO,EACP,MAAM,EACN,WAAW,EACX,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,SAAiB,GAClB,EAAE,WAAW,GAAG,SAAS,CA4FzB"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Select/Select.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,oBAAoB,EAI1B,MAAM,OAAO,CAAC;AAOf,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,CAAC;IAClD,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CACpB,iBAAiB,CACf,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,EACD,UAAU,CACX,CAAC;IACF,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IACpC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAO,EACP,MAAM,EACN,WAAW,EACX,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,SAAiB,EACjB,UAAU,EACV,UAAkB,EAClB,KAAK,GACN,EAAE,WAAW,GAAG,SAAS,CAuKzB"}

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

@@ -1,10 +1,11 @@
 'use client';
 import clsx from 'clsx';
-import { useId, } from 'react';
+import { useId, useRef, useState, } from 'react';
 import { FaSortDown } from 'react-icons/fa';
-import { Each } from '../../00-base';
+import { Each, Show } from '../../00-base';
 import { generateBorder } from '../Input/utils/border';
 import { RenderErrorOrHelperText } from '../Input/utils/RenderErrorOrHelperText';
+import { SelectList } from './SelectList';
 /**
  * Select component for rendering a dropdown with customizable options, labels, helper text, and error messages.
  *
@@ -29,10 +30,13 @@ import { RenderErrorOrHelperText } from '../Input/utils/RenderErrorOrHelperText'
  * @param {string} [props.error] - Optional error message to be displayed below the select dropdown.
  * @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 {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.
  */
-export function Select({ label, options, select, placeholder, helperText, error, isMutedWhenEmpty, hideLabel = false, }) {
+export function Select({ label, options, select, placeholder, helperText, error, isMutedWhenEmpty, hideLabel = false, labelAddon, customList = false, iconL, }) {
     const generatedId = useId();
     const id = select?.id ?? generatedId;
     const descriptionId = error || helperText ? `${id}-description` : undefined;
@@ -41,16 +45,32 @@ export function Select({ label, options, select, placeholder, helperText, error,
     const selectProps = !select || !Object.hasOwn(select, 'value')
         ? { ...select, defaultValue: '' }
         : select;
+    const selectRef = useRef(null);
+    const isControlled = Boolean(select && Object.hasOwn(select, 'value'));
+    const [uncontrolledValue, setUncontrolledValue] = useState(String(selectProps.defaultValue ?? ''));
+    const currentValue = isControlled
+        ? String(selectProps.value ?? '')
+        : uncontrolledValue;
+    const labelId = `${id}-label`;
+    const chooseFromList = (value) => {
+        const element = selectRef.current;
+        if (!element || element.value === value)
+            return;
+        element.value = value;
+        element.dispatchEvent(new Event('change', { bubbles: true }));
+        if (!isControlled)
+            setUncontrolledValue(value);
+    };
     const isMuted = Boolean(isMutedWhenEmpty && !selectProps.value && !selectProps.defaultValue);
-    const selectClasses = clsx('peer disabled:text-gray-3 dark:disabled:text-gray-2 h-full w-full appearance-none rounded-full border border-none bg-transparent px-5 text-sm font-normal outline-0 transition-all dark:bg-black', isMuted ? 'text-gray-2 dark:text-gray-2' : 'text-black dark:text-white', select?.className);
+    const selectClasses = clsx('peer disabled:text-gray-3 dark:disabled:text-gray-2 h-full w-full appearance-none rounded-full border border-none bg-transparent text-sm font-normal outline-0 transition-all dark:bg-black', iconL ? 'pr-5 pl-11' : 'px-5', isMuted ? 'text-gray-2 dark:text-gray-2' : 'text-black dark:text-white', select?.className);
     const { labelProps, legendClasses, fieldsetClasses } = generateBorder(error, {
         isMuted,
         hideLabel,
     });
     labelProps.htmlFor = id;
-    return (<div className="w-full max-w-full">
-      <div className="relative h-9">
-        <select {...selectProps} id={id} className={selectClasses} aria-invalid={error ? true : select?.['aria-invalid']} aria-describedby={describedBy}>
+    return (<div data-orion-part="field" className="w-full max-w-full">
+      <div data-orion-part="field-box" className="relative h-9">
+        <select {...selectProps} data-orion-part="field-control" ref={selectRef} id={id} tabIndex={customList ? -1 : selectProps.tabIndex} aria-hidden={customList || undefined} className={clsx(selectClasses, customList && 'pointer-events-none')} aria-invalid={error ? true : select?.['aria-invalid']} aria-describedby={describedBy}>
           {!!placeholder && (<option value="" disabled hidden className="bg-white text-black dark:bg-black dark:text-white">
               {placeholder}
             </option>)}
@@ -58,17 +78,45 @@ export function Select({ label, options, select, placeholder, helperText, error,
                 {text}
               </option>)}/>
         </select>
-        {hideLabel ? (<label htmlFor={id} className="sr-only">
-            {label}
-          </label>) : (<label {...labelProps}>{label}</label>)}
-        <FaSortDown aria-hidden="true" className={clsx('peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 absolute top-2 right-4', error
+        {!!customList && (<SelectList id={id} labelId={labelId} options={Object.entries(options)} value={currentValue} disabled={select?.disabled} invalid={Boolean(error)} describedBy={describedBy} onChoose={chooseFromList}/>)}
+        <Show>
+          <Show.When isTrue={hideLabel}>
+            <label id={labelId} htmlFor={id} className="sr-only">
+              {label}
+            </label>
+          </Show.When>
+          <Show.When isTrue={Boolean(labelAddon)}>
+            <div data-orion-part="field-label" className={clsx(labelProps.className, 'flex items-center gap-1')}>
+              <label id={labelId} htmlFor={id}>
+                {label}
+              </label>
+              <span className="pointer-events-auto flex">{labelAddon}</span>
+            </div>
+          </Show.When>
+          <Show.Else>
+            <label {...labelProps} id={labelId} data-orion-part="field-label">
+              {label}
+            </label>
+          </Show.Else>
+        </Show>
+        <FaSortDown aria-hidden="true" data-orion-part="field-icon" className={clsx('peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 pointer-events-none absolute top-2 right-4', error
             ? 'text-error dark:text-error-dark'
             : isMuted
                 ? 'text-gray-2 dark:text-gray-2'
                 : 'text-black dark:text-white')}/>
-        <fieldset className={fieldsetClasses}>
-          {!hideLabel && <legend className={legendClasses}>{label}</legend>}
+        <fieldset data-orion-part="field-outline" className={fieldsetClasses}>
+          {!hideLabel && (<legend className={legendClasses}>
+              {label}
+              {!!labelAddon && (<span aria-hidden="true" className="ml-1 inline-flex">
+                  {labelAddon}
+                </span>)}
+            </legend>)}
         </fieldset>
+        {!!iconL && (<span aria-hidden="true" data-orion-part="field-icon" className={clsx('peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 pointer-events-none 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}
+          </span>)}
       </div>
       <RenderErrorOrHelperText id={descriptionId} disabled={select?.disabled} helperText={helperText} error={error} className="pl-6"/>
     </div>);

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

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

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

@@ -0,0 +1,41 @@
+import { type ReactNode } from 'react';
+type SelectListProps = {
+    readonly id: string;
+    readonly labelId: string;
+    readonly options: [string, string][];
+    readonly value: string;
+    readonly disabled?: boolean;
+    readonly invalid?: boolean;
+    readonly describedBy?: string;
+    readonly onChoose: (value: string) => void;
+};
+/**
+ * SelectList draws the option list of a `Select` with `customList`, in place of the
+ * native popup the browser and the OS paint. A transparent button covers the field and
+ * owns focus and keyboard; the native `<select>` underneath keeps the value.
+ *
+ * @component
+ * @example
+ * <SelectList
+ *   id="hour-list"
+ *   labelId="hour-label"
+ *   options={[['08:00', '08:00'], ['08:30', '08:30']]}
+ *   value="08:00"
+ *   onChoose={(value) => console.log(value)}
+ * />
+ *
+ * @param {SelectListProps} props - The properties of the SelectList component.
+ * @param {string} props.id - Base id for the listbox and its options.
+ * @param {string} props.labelId - Id of the visible label, which names the trigger.
+ * @param {[string, string][]} props.options - Value and text of each option, in order.
+ * @param {string} props.value - Value currently selected.
+ * @param {boolean} [props.disabled] - Disables the trigger.
+ * @param {boolean} [props.invalid] - Marks the trigger as invalid for assistive technology.
+ * @param {string} [props.describedBy] - Id of the helper or error text.
+ * @param {(value: string) => void} props.onChoose - Fired with the value the user picks.
+ *
+ * @returns {ReactNode} The trigger and, while open, the option list.
+ */
+export declare function SelectList({ id, labelId, options, value, disabled, invalid, describedBy, onChoose, }: SelectListProps): ReactNode;
+export {};
+//# sourceMappingURL=SelectList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectList.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Select/SelectList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAGf,KAAK,eAAe,GAAG;IACrB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IACrC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAOF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,OAAO,EACP,OAAO,EACP,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,QAAQ,GACT,EAAE,eAAe,GAAG,SAAS,CAgI7B"}

package/dist/components/01-atoms/Select/SelectList.jsx

@@ -0,0 +1,116 @@
+'use client';
+import clsx from 'clsx';
+import { useEffect, useRef, useState, } from 'react';
+import { Each } from '../../00-base';
+const listClasses = clsx('absolute top-full left-0 z-40 mt-1 max-h-[200px] min-w-full overflow-y-auto rounded-sm border py-1 shadow-md', 'border-gray-5 dark:border-gray-1 dark:bg-black-1 bg-white text-black dark:text-white');
+/**
+ * SelectList draws the option list of a `Select` with `customList`, in place of the
+ * native popup the browser and the OS paint. A transparent button covers the field and
+ * owns focus and keyboard; the native `<select>` underneath keeps the value.
+ *
+ * @component
+ * @example
+ * <SelectList
+ *   id="hour-list"
+ *   labelId="hour-label"
+ *   options={[['08:00', '08:00'], ['08:30', '08:30']]}
+ *   value="08:00"
+ *   onChoose={(value) => console.log(value)}
+ * />
+ *
+ * @param {SelectListProps} props - The properties of the SelectList component.
+ * @param {string} props.id - Base id for the listbox and its options.
+ * @param {string} props.labelId - Id of the visible label, which names the trigger.
+ * @param {[string, string][]} props.options - Value and text of each option, in order.
+ * @param {string} props.value - Value currently selected.
+ * @param {boolean} [props.disabled] - Disables the trigger.
+ * @param {boolean} [props.invalid] - Marks the trigger as invalid for assistive technology.
+ * @param {string} [props.describedBy] - Id of the helper or error text.
+ * @param {(value: string) => void} props.onChoose - Fired with the value the user picks.
+ *
+ * @returns {ReactNode} The trigger and, while open, the option list.
+ */
+export function SelectList({ id, labelId, options, value, disabled, invalid, describedBy, onChoose, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const rootRef = useRef(null);
+    const listRef = useRef(null);
+    const listboxId = `${id}-listbox`;
+    const selectedIndex = options.findIndex(([optionValue]) => optionValue === value);
+    const open = () => {
+        setActiveIndex(Math.max(selectedIndex, 0));
+        setIsOpen(true);
+    };
+    const close = () => {
+        setIsOpen(false);
+        setActiveIndex(-1);
+    };
+    const choose = (index) => {
+        const option = options[index];
+        if (option)
+            onChoose(option[0]);
+        close();
+    };
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleOutsideClick = (event) => {
+            if (rootRef.current && !rootRef.current.contains(event.target)) {
+                close();
+            }
+        };
+        document.addEventListener('mousedown', handleOutsideClick);
+        return () => document.removeEventListener('mousedown', handleOutsideClick);
+    }, [isOpen]);
+    useEffect(() => {
+        if (!isOpen || activeIndex < 0)
+            return;
+        listRef.current
+            ?.querySelector(`#${CSS.escape(`${listboxId}-${activeIndex}`)}`)
+            ?.scrollIntoView({ block: 'nearest' });
+    }, [isOpen, activeIndex, listboxId]);
+    const handleKeyDown = (event) => {
+        const last = options.length - 1;
+        if (!isOpen) {
+            if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(event.key)) {
+                event.preventDefault();
+                open();
+            }
+            return;
+        }
+        const moves = {
+            ArrowDown: Math.min(activeIndex + 1, last),
+            ArrowUp: Math.max(activeIndex - 1, 0),
+            Home: 0,
+            End: last,
+        };
+        if (event.key in moves) {
+            event.preventDefault();
+            setActiveIndex(moves[event.key]);
+        }
+        else if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            choose(activeIndex);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            close();
+        }
+        else if (event.key === 'Tab') {
+            close();
+        }
+    };
+    return (<div ref={rootRef} className="absolute inset-0">
+      <button type="button" disabled={disabled} aria-haspopup="listbox" aria-expanded={isOpen} aria-controls={listboxId} aria-labelledby={`${labelId} ${id}-value`} aria-describedby={describedBy} aria-invalid={invalid} aria-activedescendant={isOpen && activeIndex >= 0 ? `${listboxId}-${activeIndex}` : undefined} onClick={() => (isOpen ? close() : open())} onKeyDown={handleKeyDown} className="h-full w-full cursor-pointer rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-black/20 disabled:cursor-not-allowed dark:focus-visible:ring-white/30">
+        <span id={`${id}-value`} className="sr-only">
+          {selectedIndex >= 0 ? options[selectedIndex][1] : ''}
+        </span>
+      </button>
+      {!!isOpen && (<ul ref={listRef} id={listboxId} role="listbox" aria-labelledby={labelId} className={listClasses}>
+          <Each of={options} render={([optionValue, text], index) => (<li key={optionValue} id={`${listboxId}-${index}`} role="option" aria-selected={index === selectedIndex} onMouseEnter={() => setActiveIndex(index)} onMouseDown={(event) => event.preventDefault()} onClick={() => choose(index)} className={clsx('cursor-pointer px-3 py-2 text-sm whitespace-nowrap', index === activeIndex && 'bg-gray-6 dark:bg-gray-1', index === selectedIndex && 'font-semibold')}>
+                {text}
+              </li>)}/>
+        </ul>)}
+    </div>);
+}
+//# sourceMappingURL=SelectList.jsx.map

package/dist/components/01-atoms/Select/SelectList.jsx.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"SmallInput.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/SmallInput/SmallInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAGf,KAAK,eAAe,GAAG;IACrB,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,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,cAAc,GACf,EAAE,eAAe,GAAG,SAAS,CA6B7B"}
+{"version":3,"file":"SmallInput.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/SmallInput/SmallInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAGf,KAAK,eAAe,GAAG;IACrB,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,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,cAAc,GACf,EAAE,eAAe,GAAG,SAAS,CA8B7B"}

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

@@ -7,6 +7,7 @@ export function SmallInput({ input, error, classContainer, }) {
     const id = input.id ?? (generatedId || undefined);
     useEffect(() => {
         if (!input.id) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect -- the id is generated on the client after mount so the server and client markup match
             setGeneratedId(generateUniqueId('small-input'));
         }
     }, [input.id]);

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

@@ -1 +1 @@
-{"version":3,"file":"SmallInput.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/SmallInput/SmallInput.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAIL,SAAS,EACT,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAmBlD,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,cAAc,GACE;IAChB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,EAAE,GAAG,KAAK,CAAC,EAAE,IAAI,CAAC,WAAW,IAAI,SAAS,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;YACd,cAAc,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC;QAClD,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,cAAc,IAAI,SAAS,CAAC,CAAC,CAC9D;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,cAAc,CAC3B;QAAA,CAAC,KAAK,CACJ,IAAI,KAAK,CAAC,CACV,EAAE,CAAC,CAAC,EAAE,CAAC,CACP,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CACnD,SAAS,CAAC,CAAC,IAAI,CACb,kLAAkL,EAClL,8DAA8D,EAC9D,+GAA+G,EAC/G,+FAA+F,EAC/F,KAAK,CAAC,SAAS,CAChB,CAAC,CACF,WAAW,CAAC,EAAE,EAElB;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"SmallInput.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/SmallInput/SmallInput.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAIL,SAAS,EACT,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAmBlD,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,cAAc,GACE;IAChB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,EAAE,GAAG,KAAK,CAAC,EAAE,IAAI,CAAC,WAAW,IAAI,SAAS,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;YACd,kJAAkJ;YAClJ,cAAc,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC;QAClD,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,cAAc,IAAI,SAAS,CAAC,CAAC,CAC9D;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,cAAc,CAC3B;QAAA,CAAC,KAAK,CACJ,IAAI,KAAK,CAAC,CACV,EAAE,CAAC,CAAC,EAAE,CAAC,CACP,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CACnD,SAAS,CAAC,CAAC,IAAI,CACb,kLAAkL,EAClL,8DAA8D,EAC9D,+GAA+G,EAC/G,+FAA+F,EAC/F,KAAK,CAAC,SAAS,CAChB,CAAC,CACF,WAAW,CAAC,EAAE,EAElB;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

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

@@ -1,7 +1,28 @@
 import { type ReactNode } from 'react';
-type SpinnerProps = {
+export type SpinnerSize = 'sm' | 'md';
+export type SpinnerProps = {
     label?: string;
+    size?: SpinnerSize;
 };
-export declare function Spinner({ label }: SpinnerProps): ReactNode;
-export {};
+/**
+ * Indeterminate loading indicator.
+ *
+ * The root is a `span` so it can sit inside a `button` or a line of text; it
+ * still renders as a block of its own size.
+ *
+ * @component
+ * @example
+ * <Spinner label="Loading orders" />
+ *
+ * @example
+ * // Inline, next to a short text
+ * <Spinner size="sm" label="Saving" />
+ *
+ * @param {Object} props - The properties of the Spinner component.
+ * @param {string} [props.label] - Accessible name announced by the `status` role.
+ * @param {'sm' | 'md'} [props.size='md'] - `md` is 32px, for a section that is loading. `sm` is 16px, for a button or a line of text.
+ *
+ * @returns {ReactNode} The rendered Spinner component.
+ */
+export declare function Spinner({ label, size }: SpinnerProps): ReactNode;
 //# sourceMappingURL=Spinner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,YAAY,GAAG;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,GAAG,SAAS,CAS1D"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Spinner/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC;AAOF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,IAAW,EAAE,EAAE,YAAY,GAAG,SAAS,CAkBvE"}

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

@@ -1,6 +1,32 @@
-export function Spinner({ label }) {
-    return (<div role="status" aria-label={label} className="size-8">
-      <span aria-hidden="true" className="border-gray-2 border-b-lavender dark:border-gray-1 dark:border-b-lavender-dark inline-block size-8 animate-spin rounded-full border-4"/>
-    </div>);
+import clsx from 'clsx';
+const sizeMap = {
+    sm: { box: 'size-4', ring: 'size-4 border-2' },
+    md: { box: 'size-8', ring: 'size-8 border-4' },
+};
+/**
+ * Indeterminate loading indicator.
+ *
+ * The root is a `span` so it can sit inside a `button` or a line of text; it
+ * still renders as a block of its own size.
+ *
+ * @component
+ * @example
+ * <Spinner label="Loading orders" />
+ *
+ * @example
+ * // Inline, next to a short text
+ * <Spinner size="sm" label="Saving" />
+ *
+ * @param {Object} props - The properties of the Spinner component.
+ * @param {string} [props.label] - Accessible name announced by the `status` role.
+ * @param {'sm' | 'md'} [props.size='md'] - `md` is 32px, for a section that is loading. `sm` is 16px, for a button or a line of text.
+ *
+ * @returns {ReactNode} The rendered Spinner component.
+ */
+export function Spinner({ label, size = 'md' }) {
+    const sizing = sizeMap[size];
+    return (<span role="status" aria-label={label} className={clsx('block', sizing.box)}>
+      <span aria-hidden="true" className={clsx('border-gray-2 border-b-lavender dark:border-gray-2 dark:border-b-lavender-dark inline-block animate-spin rounded-full', sizing.ring)}/>
+    </span>);
 }
 //# sourceMappingURL=Spinner.jsx.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Spinner/Spinner.tsx"],"names":[],"mappings":"AAMA,MAAM,UAAU,OAAO,CAAC,EAAE,KAAK,EAAgB;IAC7C,OAAO,CACL,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,QAAQ,CACtD;MAAA,CAAC,IAAI,CACH,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,uIAAuI,EAErJ;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Spinner.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAUxB,MAAM,OAAO,GAAuD;IAClE,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,iBAAiB,EAAE;IAC9C,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,iBAAiB,EAAE;CAC/C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,IAAI,EAAgB;IAC1D,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE7B,OAAO,CACL,CAAC,IAAI,CACH,IAAI,CAAC,QAAQ,CACb,UAAU,CAAC,CAAC,KAAK,CAAC,CAClB,SAAS,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAErC;MAAA,CAAC,IAAI,CACH,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CACb,uHAAuH,EACvH,MAAM,CAAC,IAAI,CACZ,CAAC,EAEN;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}

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

@@ -1,2 +1,3 @@
 export { Spinner } from './Spinner';
+export type { SpinnerProps, SpinnerSize } from './Spinner';
 //# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,47 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type StatTone = 'default' | 'success' | 'warning' | 'error';
+export type StatProps = {
+    /** What the number measures. */
+    label: string;
+    /** The figure, already formatted. */
+    value: ReactNode;
+    /** Change against a previous period, already formatted (`+12 %`). */
+    delta?: string;
+    /** Short context under the value (`last 30 days`). */
+    hint?: string;
+    /** Dot next to the label that grades the value. `default` shows none. */
+    tone?: StatTone;
+    /** Decorative icon in the top right corner, hidden from screen readers. */
+    icon?: ReactNode;
+    /** Holds the space with placeholders while the value loads. */
+    isLoading?: boolean;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+/**
+ * Card with one key figure: a label, the value in large type and an optional
+ * line of context. Meant for summary rows above a list or a report, where
+ * several of them sit side by side in a grid.
+ *
+ * `tone` adds a dot next to the label to grade the value. Color is never the
+ * only signal: the label, the delta or the hint has to say it in words too.
+ *
+ * @component
+ * @example
+ * <Stat label="Resolved" value="84 %" delta="+6 pts" hint="last 30 days" tone="success" />
+ *
+ * @example
+ * // While loading
+ * <Stat label="Average cost" value="" isLoading />
+ *
+ * @param {Object} props - The properties of the Stat component.
+ * @param {string} props.label - What the number measures.
+ * @param {ReactNode} props.value - The figure, already formatted.
+ * @param {string} [props.delta] - Change against a previous period, already formatted.
+ * @param {string} [props.hint] - Short context shown after the delta.
+ * @param {'default' | 'success' | 'warning' | 'error'} [props.tone='default'] - Dot next to the label that grades the value.
+ * @param {ReactNode} [props.icon] - Decorative icon in the top right corner.
+ * @param {boolean} [props.isLoading=false] - Shows placeholders instead of the value and the context line.
+ *
+ * @returns {ReactNode} The rendered Stat component.
+ */
+export declare function Stat({ label, value, delta, hint, tone, icon, isLoading, ...restProps }: StatProps): ReactNode;
+//# sourceMappingURL=Stat.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stat.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Stat/Stat.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE,MAAM,MAAM,SAAS,GAAG;IACtB,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,KAAK,EAAE,SAAS,CAAC;IACjB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAUrD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAgB,EAChB,IAAI,EACJ,SAAiB,EACjB,GAAG,SAAS,EACb,EAAE,SAAS,GAAG,SAAS,CAkDvB"}

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

@@ -0,0 +1,64 @@
+import clsx from 'clsx';
+import { Show } from '../../00-base';
+import { Skeleton } from '../Skeleton';
+// `warning` uses the amber family, like `ProgressBar`: the yellow token sits
+// below the 3:1 a graphic needs against the surface.
+const toneMap = {
+    success: 'bg-success dark:bg-success-dark',
+    warning: 'bg-amber dark:bg-amber-dark',
+    error: 'bg-error dark:bg-error-dark',
+};
+/**
+ * Card with one key figure: a label, the value in large type and an optional
+ * line of context. Meant for summary rows above a list or a report, where
+ * several of them sit side by side in a grid.
+ *
+ * `tone` adds a dot next to the label to grade the value. Color is never the
+ * only signal: the label, the delta or the hint has to say it in words too.
+ *
+ * @component
+ * @example
+ * <Stat label="Resolved" value="84 %" delta="+6 pts" hint="last 30 days" tone="success" />
+ *
+ * @example
+ * // While loading
+ * <Stat label="Average cost" value="" isLoading />
+ *
+ * @param {Object} props - The properties of the Stat component.
+ * @param {string} props.label - What the number measures.
+ * @param {ReactNode} props.value - The figure, already formatted.
+ * @param {string} [props.delta] - Change against a previous period, already formatted.
+ * @param {string} [props.hint] - Short context shown after the delta.
+ * @param {'default' | 'success' | 'warning' | 'error'} [props.tone='default'] - Dot next to the label that grades the value.
+ * @param {ReactNode} [props.icon] - Decorative icon in the top right corner.
+ * @param {boolean} [props.isLoading=false] - Shows placeholders instead of the value and the context line.
+ *
+ * @returns {ReactNode} The rendered Stat component.
+ */
+export function Stat({ label, value, delta, hint, tone = 'default', icon, isLoading = false, ...restProps }) {
+    const context = [delta, hint].filter(Boolean).join(' · ');
+    return (<div {...restProps} data-orion-part="stat" aria-busy={isLoading || undefined} className={clsx('border-gray-5 dark:border-gray-1 flex min-w-0 flex-col gap-1 rounded-lg border p-4', !!icon && 'relative pr-14', restProps.className)}>
+      {!!icon && (<span aria-hidden="true" data-orion-part="stat-icon" className="absolute top-3.5 right-3.5 flex">
+          {icon}
+        </span>)}
+      <p className="text-gray-1 dark:text-gray-2 flex items-center gap-1.5 text-xs leading-4">
+        {tone !== 'default' && (<span aria-hidden="true" className={clsx('size-1.5 shrink-0 rounded-full', toneMap[tone])}/>)}
+        {label}
+      </p>
+      <Show>
+        <Show.When isTrue={isLoading}>
+          <Skeleton shape="rect" className="h-8 w-24"/>
+          <Skeleton className="mt-1.5 w-32"/>
+        </Show.When>
+        <Show.Else>
+          <div className="text-2xl leading-8 font-semibold whitespace-nowrap text-black dark:text-white">
+            {value}
+          </div>
+          {!!context && (<p className="text-gray-1 dark:text-gray-2 text-xs leading-4">
+              {context}
+            </p>)}
+        </Show.Else>
+      </Show>
+    </div>);
+}
+//# sourceMappingURL=Stat.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stat.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Stat/Stat.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAqBvC,6EAA6E;AAC7E,qDAAqD;AACrD,MAAM,OAAO,GAAiD;IAC5D,OAAO,EAAE,iCAAiC;IAC1C,OAAO,EAAE,6BAA6B;IACtC,KAAK,EAAE,6BAA6B;CACrC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAI,GAAG,SAAS,EAChB,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,GAAG,SAAS,EACF;IACV,MAAM,OAAO,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAE1D,OAAO,CACL,CAAC,GAAG,CACF,IAAI,SAAS,CAAC,CACd,eAAe,CAAC,MAAM,CACtB,SAAS,CAAC,CAAC,SAAS,IAAI,SAAS,CAAC,CAClC,SAAS,CAAC,CAAC,IAAI,CACb,oFAAoF,EACpF,CAAC,CAAC,IAAI,IAAI,gBAAgB,EAC1B,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,CAAC,CAAC,IAAI,IAAI,CACT,CAAC,IAAI,CACH,WAAW,CAAC,MAAM,CAClB,eAAe,CAAC,WAAW,CAC3B,SAAS,CAAC,iCAAiC,CAE3C;UAAA,CAAC,IAAI,CACP;QAAA,EAAE,IAAI,CAAC,CACR,CACD;MAAA,CAAC,CAAC,CAAC,SAAS,CAAC,0EAA0E,CACrF;QAAA,CAAC,IAAI,KAAK,SAAS,IAAI,CACrB,CAAC,IAAI,CACH,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CAAC,gCAAgC,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EACjE,CACH,CACD;QAAA,CAAC,KAAK,CACR;MAAA,EAAE,CAAC,CACH;MAAA,CAAC,IAAI,CACH;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,CAC3B;UAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,EAC3C;UAAA,CAAC,QAAQ,CAAC,SAAS,CAAC,aAAa,EACnC;QAAA,EAAE,IAAI,CAAC,IAAI,CACX;QAAA,CAAC,IAAI,CAAC,IAAI,CACR;UAAA,CAAC,GAAG,CAAC,SAAS,CAAC,+EAA+E,CAC5F;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,GAAG,CACL;UAAA,CAAC,CAAC,CAAC,OAAO,IAAI,CACZ,CAAC,CAAC,CAAC,SAAS,CAAC,gDAAgD,CAC3D;cAAA,CAAC,OAAO,CACV;YAAA,EAAE,CAAC,CAAC,CACL,CACH;QAAA,EAAE,IAAI,CAAC,IAAI,CACb;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

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

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

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

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

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

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

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

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