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

package/expresivo/ExpBubble/ExpBubble.jsx

@@ -0,0 +1,74 @@
+'use client';
+import clsx from 'clsx';
+import { InlineMessage, } from '@clicoh/orion-library';
+import { useExpScopeOptions } from '../ExpScope/ExpScope';
+import { ExpMascot } from '../ExpMascot/ExpMascot';
+const layoutMap = {
+    left: 'flex-row-reverse items-start',
+    right: 'flex-row items-start',
+    bottom: 'flex-col items-start',
+};
+const tailMap = {
+    left: '-left-1.5 top-[22px] border-t-0 border-r-0',
+    right: '-right-1.5 top-[22px] border-b-0 border-l-0',
+    bottom: '-bottom-1.5 left-7 border-t-0 border-l-0',
+};
+/**
+ * Speech bubble with a tail, optionally spoken by a mascot. Use it for a short
+ * remark from the product (an empty state, a tip, a result), never for errors
+ * that block the user.
+ *
+ * It is a polite live region (`role="status"`). Outside an `ExpScope` it falls
+ * back to the core `InlineMessage`, with the title and the text in one line.
+ *
+ * @component
+ * @example
+ * <ExpBubble title="Nothing to review" mascot="oculus-08-satisfecho">
+ *   Every case has an answer.
+ * </ExpBubble>
+ *
+ * @example
+ * // Above the mascot, with the title in the display font
+ * <ExpBubble tail="bottom" display title="Found it" mascot="fixi-06-celebrando" badge="Solved" />
+ *
+ * @param {Object} props - The properties of the ExpBubble component.
+ * @param {ReactNode} [props.title] - First line, in semibold.
+ * @param {ReactNode} [props.children] - Body text, under the title.
+ * @param {'left' | 'right' | 'bottom'} [props.tail='left'] - Side the tail points to, and the side of the mascot.
+ * @param {boolean} [props.display=false] - Larger title in the display font when the scope uses `titles="playful"`.
+ * @param {ReactNode} [props.badge] - Short success note under the text.
+ * @param {ExpMascotName} [props.mascot] - Mascot that speaks the bubble. Hidden when the scope hides mascots.
+ * @param {number} [props.mascotSize=64] - Mascot size, in pixels.
+ * @param {'info' | 'warning' | 'error' | 'success'} [props.fallbackModifier='info'] - Tone of the `InlineMessage` outside an `ExpScope`.
+ *
+ * @returns {ReactNode} The bubble, or an `InlineMessage` outside an `ExpScope`.
+ */
+export function ExpBubble({ title, children, tail = 'left', display = false, badge, mascot, mascotSize = 64, fallbackModifier = 'info', ...restProps }) {
+    const options = useExpScopeOptions();
+    if (!options) {
+        return (<InlineMessage {...restProps} modifier={fallbackModifier}>
+        {!!title && <strong className="font-semibold">{title} </strong>}
+        {children}
+        {!!badge && <> · {badge}</>}
+      </InlineMessage>);
+    }
+    const playfulTitle = display && options.titles === 'playful';
+    return (<div role="status" {...restProps} className={clsx('inline-flex gap-3', layoutMap[tail], restProps.className)}>
+      <div className="border-gray-5 dark:border-gray-1 relative max-w-[280px] rounded-lg border bg-white px-4 py-3 shadow-[0_2px_3px_rgba(34,35,41,0.08)] dark:bg-black">
+        <span aria-hidden="true" className={clsx('border-gray-5 dark:border-gray-1 absolute size-2.5 rotate-45 border bg-white dark:bg-black', tailMap[tail])}/>
+        {!!title && (<p className={clsx('font-semibold text-black dark:text-white', playfulTitle
+                ? 'font-(family-name:--exp-title-font) text-lg leading-6'
+                : 'text-sm leading-5')}>
+            {title}
+          </p>)}
+        {!!children && (<p className={clsx('text-gray-1 dark:text-gray-2 text-xs leading-[18px] text-pretty', !!title && 'mt-0.5')}>
+            {children}
+          </p>)}
+        {!!badge && (<span className="border-success text-success-strong dark:text-success mt-2 inline-flex rounded-full border px-2 py-px text-[11px] leading-4 font-semibold">
+            {badge}
+          </span>)}
+      </div>
+      {!!mascot && (<ExpMascot name={mascot} size={mascotSize} className={clsx(tail === 'bottom' && 'ml-2')}/>)}
+    </div>);
+}
+//# sourceMappingURL=ExpBubble.jsx.map

package/expresivo/ExpBubble/ExpBubble.jsx.map

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

package/expresivo/ExpBubble/index.d.ts

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

package/expresivo/ExpBubble/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpBubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC"}

package/expresivo/ExpBubble/index.js

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

package/expresivo/ExpBubble/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpBubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/expresivo/ExpChip/ExpChip.d.ts

@@ -0,0 +1,40 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type ExpChipTone = 'neutral' | 'success' | 'warning' | 'error' | 'info' | 'progress';
+export type ExpChipProps = {
+    /** One character or a tiny icon before the label. Decorative. */
+    glyph?: ReactNode;
+    /** A figure before the label, such as a count. Unlike the glyph, it is read. */
+    value?: ReactNode;
+    /** Color of the glyph and of the value. */
+    tone?: ExpChipTone;
+    children: ReactNode;
+} & Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
+/**
+ * White pill with a hairline border, for a short fact under the page title,
+ * such as a guarantee. The label carries the message; the glyph before it only
+ * decorates it.
+ *
+ * With `value` it shows a figure: the value in bold and in the tone color,
+ * then the label in gray, as in a row of stats under the title.
+ *
+ * Outside an `ExpScope` it falls back to the core `Badge` `neutral`, with the
+ * glyph as its icon and the value before the label.
+ *
+ * @component
+ * @example
+ * <ExpChip glyph="✓">Sensitive data protected before the analysis</ExpChip>
+ *
+ * @example
+ * // A figure
+ * <ExpChip value="3" tone="success">direct</ExpChip>
+ *
+ * @param {ExpChipProps} props - The properties of the ExpChip component.
+ * @param {ReactNode} [props.glyph] - One character or a tiny icon before the label.
+ * @param {ReactNode} [props.value] - A figure before the label, such as a count.
+ * @param {'neutral' | 'success' | 'warning' | 'error' | 'info' | 'progress'} [props.tone='success'] - Color of the glyph and of the value.
+ * @param {ReactNode} props.children - Label of the chip.
+ *
+ * @returns {ReactNode} The chip, or a core `Badge` outside an `ExpScope`.
+ */
+export declare function ExpChip({ glyph, value, tone, children, ...restProps }: ExpChipProps): ReactNode;
+//# sourceMappingURL=ExpChip.d.ts.map

package/expresivo/ExpChip/ExpChip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpChip.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpChip/ExpChip.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,GACN,UAAU,CAAC;AAEf,MAAM,MAAM,YAAY,GAAG;IACzB,iEAAiE;IACjE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gFAAgF;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC;AAYtD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,IAAgB,EAChB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,YAAY,GAAG,SAAS,CAwD1B"}

package/expresivo/ExpChip/ExpChip.jsx

@@ -0,0 +1,67 @@
+'use client';
+import { Badge } from '@clicoh/orion-library';
+import clsx from 'clsx';
+import { useExpScope } from '../ExpScope/ExpScope';
+// `warning` takes the dark amber: #FFC34C on white sits below 2:1.
+const toneMap = {
+    neutral: 'text-black dark:text-white',
+    success: 'text-success dark:text-success-dark',
+    warning: 'text-amber dark:text-warning-dark',
+    error: 'text-error dark:text-error-dark',
+    info: 'text-info dark:text-info-dark',
+    progress: 'text-lavender dark:text-lavender-dark',
+};
+/**
+ * White pill with a hairline border, for a short fact under the page title,
+ * such as a guarantee. The label carries the message; the glyph before it only
+ * decorates it.
+ *
+ * With `value` it shows a figure: the value in bold and in the tone color,
+ * then the label in gray, as in a row of stats under the title.
+ *
+ * Outside an `ExpScope` it falls back to the core `Badge` `neutral`, with the
+ * glyph as its icon and the value before the label.
+ *
+ * @component
+ * @example
+ * <ExpChip glyph="✓">Sensitive data protected before the analysis</ExpChip>
+ *
+ * @example
+ * // A figure
+ * <ExpChip value="3" tone="success">direct</ExpChip>
+ *
+ * @param {ExpChipProps} props - The properties of the ExpChip component.
+ * @param {ReactNode} [props.glyph] - One character or a tiny icon before the label.
+ * @param {ReactNode} [props.value] - A figure before the label, such as a count.
+ * @param {'neutral' | 'success' | 'warning' | 'error' | 'info' | 'progress'} [props.tone='success'] - Color of the glyph and of the value.
+ * @param {ReactNode} props.children - Label of the chip.
+ *
+ * @returns {ReactNode} The chip, or a core `Badge` outside an `ExpScope`.
+ */
+export function ExpChip({ glyph, value, tone = 'success', children, ...restProps }) {
+    const inScope = useExpScope();
+    const hasValue = value !== undefined && value !== null;
+    if (!inScope) {
+        return (<Badge {...restProps} modifier="neutral" icon={glyph}>
+        {hasValue ? (<>
+            <strong className="font-bold">{value}</strong> {children}
+          </>) : (children)}
+      </Badge>);
+    }
+    if (hasValue) {
+        return (<span {...restProps} className={clsx('border-gray-5 text-gray-1 inline-flex items-baseline gap-1 rounded-full border bg-white px-3 py-1 text-xs leading-4', 'dark:border-gray-1 dark:bg-black-1 dark:text-gray-2', restProps.className)}>
+        {!!glyph && (<span aria-hidden="true" className={clsx('font-bold', toneMap[tone])}>
+            {glyph}
+          </span>)}
+        <strong className={clsx('font-bold', toneMap[tone])}>{value}</strong>
+        {children}
+      </span>);
+    }
+    return (<span {...restProps} className={clsx('border-gray-5 inline-flex items-center gap-1.5 rounded-full border bg-white px-3 py-1 text-xs leading-4 text-black', 'dark:border-gray-1 dark:bg-black-1 dark:text-white', restProps.className)}>
+      {!!glyph && (<span aria-hidden="true" className={clsx('font-bold', toneMap[tone])}>
+          {glyph}
+        </span>)}
+      {children}
+    </span>);
+}
+//# sourceMappingURL=ExpChip.jsx.map

package/expresivo/ExpChip/ExpChip.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpChip.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpChip/ExpChip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAoBnD,mEAAmE;AACnE,MAAM,OAAO,GAAgC;IAC3C,OAAO,EAAE,4BAA4B;IACrC,OAAO,EAAE,qCAAqC;IAC9C,OAAO,EAAE,mCAAmC;IAC5C,KAAK,EAAE,iCAAiC;IACxC,IAAI,EAAE,+BAA+B;IACrC,QAAQ,EAAE,uCAAuC;CAClD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,IAAI,GAAG,SAAS,EAChB,QAAQ,EACR,GAAG,SAAS,EACC;IACb,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAC9B,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC;IAEvD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CACL,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CACnD;QAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,CACV,EACE;YAAA,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,EAAE,MAAM,CAAE,CAAA,CAAC,QAAQ,CAC1D;UAAA,GAAG,CACJ,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACH;MAAA,EAAE,KAAK,CAAC,CACT,CAAC;IACJ,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,SAAS,CAAC,CAAC,IAAI,CACb,qHAAqH,EACrH,qDAAqD,EACrD,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;QAAA,CAAC,CAAC,CAAC,KAAK,IAAI,CACV,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CACnE;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,IAAI,CAAC,CACR,CACD;QAAA,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,MAAM,CACpE;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CAAC,CACR,CAAC;IACJ,CAAC;IAED,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,SAAS,CAAC,CAAC,IAAI,CACb,oHAAoH,EACpH,oDAAoD,EACpD,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,CAAC,CAAC,KAAK,IAAI,CACV,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CACnE;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,IAAI,CAAC,CACR,CACD;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}

package/expresivo/ExpChip/index.d.ts

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

package/expresivo/ExpChip/index.d.ts.map

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

package/expresivo/ExpChip/index.js

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

package/expresivo/ExpChip/index.js.map

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

package/expresivo/ExpCollapseToggle/ExpCollapseToggle.d.ts

@@ -0,0 +1,37 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ExpCollapseToggleProps = {
+    collapsed: boolean;
+    onToggle: () => void;
+    /** Accessible name while collapsed, such as "Expand header". */
+    expandLabel: string;
+    /** Accessible name while expanded, such as "Collapse header". */
+    collapseLabel: string;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick' | 'aria-label' | 'aria-expanded'>;
+/**
+ * Round corner button that collapses or expands a section, such as a page
+ * header. While the section is expanded, a lavender ring pulses around it to
+ * invite the user to tuck it away; the chevron flips when collapsed.
+ *
+ * Pass `aria-controls` with the id of the section it toggles. Outside an
+ * `ExpScope` it falls back to the core `IconButton` with a chevron.
+ *
+ * @component
+ * @example
+ * <ExpCollapseToggle
+ *   collapsed={collapsed}
+ *   onToggle={() => setCollapsed(!collapsed)}
+ *   expandLabel="Expand header"
+ *   collapseLabel="Collapse header"
+ *   aria-controls="case-header"
+ * />
+ *
+ * @param {Object} props - The properties of the ExpCollapseToggle component.
+ * @param {boolean} props.collapsed - Whether the section is collapsed.
+ * @param {() => void} props.onToggle - Called on click.
+ * @param {string} props.expandLabel - Accessible name while collapsed.
+ * @param {string} props.collapseLabel - Accessible name while expanded.
+ *
+ * @returns {ReactNode} The toggle, or an `IconButton` outside an `ExpScope`.
+ */
+export declare function ExpCollapseToggle({ collapsed, onToggle, expandLabel, collapseLabel, ...restProps }: ExpCollapseToggleProps): ReactNode;
+//# sourceMappingURL=ExpCollapseToggle.d.ts.map

package/expresivo/ExpCollapseToggle/ExpCollapseToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpCollapseToggle.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpCollapseToggle/ExpCollapseToggle.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK7D,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gEAAgE;IAChE,WAAW,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,aAAa,EAAE,MAAM,CAAC;CACvB,GAAG,IAAI,CACN,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,SAAS,GAAG,YAAY,GAAG,eAAe,CACxD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,WAAW,EACX,aAAa,EACb,GAAG,SAAS,EACb,EAAE,sBAAsB,GAAG,SAAS,CA6CpC"}

package/expresivo/ExpCollapseToggle/ExpCollapseToggle.jsx

@@ -0,0 +1,43 @@
+'use client';
+import clsx from 'clsx';
+import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
+import { IconButton } from '@clicoh/orion-library';
+import { useExpScope } from '../ExpScope/ExpScope';
+/**
+ * Round corner button that collapses or expands a section, such as a page
+ * header. While the section is expanded, a lavender ring pulses around it to
+ * invite the user to tuck it away; the chevron flips when collapsed.
+ *
+ * Pass `aria-controls` with the id of the section it toggles. Outside an
+ * `ExpScope` it falls back to the core `IconButton` with a chevron.
+ *
+ * @component
+ * @example
+ * <ExpCollapseToggle
+ *   collapsed={collapsed}
+ *   onToggle={() => setCollapsed(!collapsed)}
+ *   expandLabel="Expand header"
+ *   collapseLabel="Collapse header"
+ *   aria-controls="case-header"
+ * />
+ *
+ * @param {Object} props - The properties of the ExpCollapseToggle component.
+ * @param {boolean} props.collapsed - Whether the section is collapsed.
+ * @param {() => void} props.onToggle - Called on click.
+ * @param {string} props.expandLabel - Accessible name while collapsed.
+ * @param {string} props.collapseLabel - Accessible name while expanded.
+ *
+ * @returns {ReactNode} The toggle, or an `IconButton` outside an `ExpScope`.
+ */
+export function ExpCollapseToggle({ collapsed, onToggle, expandLabel, collapseLabel, ...restProps }) {
+    const inScope = useExpScope();
+    const label = collapsed ? expandLabel : collapseLabel;
+    if (!inScope) {
+        return (<IconButton {...restProps} icon={collapsed ? <FiChevronDown /> : <FiChevronUp />} label={label} aria-expanded={!collapsed} onClick={onToggle}/>);
+    }
+    return (<button type="button" {...restProps} aria-label={label} aria-expanded={!collapsed} onClick={onToggle} className={clsx('border-lavender-1 text-lavender hover:border-lavender focus-visible:ring-lavender relative flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full border bg-white transition-colors focus-visible:ring-2 focus-visible:outline-none', 'dark:border-lavender-dark-1 dark:text-lavender-dark dark:hover:border-lavender-dark dark:bg-black', restProps.className)}>
+      {!collapsed && (<span aria-hidden="true" className="exp-hint-pulse border-lavender dark:border-lavender-dark pointer-events-none absolute -inset-px rounded-full border-2"/>)}
+      <FiChevronUp aria-hidden="true" strokeWidth={2.4} className={clsx('size-4 transition-transform duration-260 ease-(--exp-ease-spring) motion-reduce:transition-none', collapsed && 'rotate-180')}/>
+    </button>);
+}
+//# sourceMappingURL=ExpCollapseToggle.jsx.map

package/expresivo/ExpCollapseToggle/ExpCollapseToggle.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpCollapseToggle.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpCollapseToggle/ExpCollapseToggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAcnD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,WAAW,EACX,aAAa,EACb,GAAG,SAAS,EACW;IACvB,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAC9B,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC;IAEtD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CACL,CAAC,UAAU,CACT,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,AAAD,EAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,AAAD,EAAG,CAAC,CACtD,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CAAC,QAAQ,CAAC,EAClB,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,CAAC,MAAM,CACL,IAAI,CAAC,QAAQ,CACb,IAAI,SAAS,CAAC,CACd,UAAU,CAAC,CAAC,KAAK,CAAC,CAClB,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CAAC,QAAQ,CAAC,CAClB,SAAS,CAAC,CAAC,IAAI,CACb,2PAA2P,EAC3P,mGAAmG,EACnG,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,CAAC,SAAS,IAAI,CACb,CAAC,IAAI,CACH,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,uHAAuH,EACjI,CACH,CACD;MAAA,CAAC,WAAW,CACV,WAAW,CAAC,MAAM,CAClB,WAAW,CAAC,CAAC,GAAG,CAAC,CACjB,SAAS,CAAC,CAAC,IAAI,CACb,iGAAiG,EACjG,SAAS,IAAI,YAAY,CAC1B,CAAC,EAEN;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC"}

package/expresivo/ExpCollapseToggle/index.d.ts

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

package/expresivo/ExpCollapseToggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpCollapseToggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC"}

package/expresivo/ExpCollapseToggle/index.js

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

package/expresivo/ExpCollapseToggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpCollapseToggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/expresivo/ExpEnterIcon/ExpEnterIcon.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+export type ExpEnterIconProps = {
+    /** Width and height in pixels. */
+    size?: number;
+    /** Steps the arrow in and out of the door while the action runs. */
+    busy?: boolean;
+    /** Grays out, to match a disabled button. */
+    disabled?: boolean;
+};
+/**
+ * A door with an arrow going in, for the `iconL` of a core `Button` that
+ * signs in or enters somewhere. The arrow steps towards the door while the
+ * button is hovered and goes in and out while `busy`. It takes the text color
+ * of its button and is decorative.
+ *
+ * Outside an `ExpScope` it falls back to the plain sign-in icon.
+ *
+ * @component
+ * @example
+ * <Button type="submit" iconL={<ExpEnterIcon busy={isSending} />}>
+ *   Sign in
+ * </Button>
+ *
+ * @param {Object} props - The properties of the ExpEnterIcon component.
+ * @param {number} [props.size=16] - Width and height in pixels.
+ * @param {boolean} [props.busy=false] - Steps the arrow in and out of the door while the action runs.
+ * @param {boolean} [props.disabled=false] - Grays out, to match a disabled button.
+ *
+ * @returns {ReactNode} The door and arrow, or `FiLogIn` outside an `ExpScope`.
+ */
+export declare function ExpEnterIcon({ size, busy, disabled, }: ExpEnterIconProps): ReactNode;
+//# sourceMappingURL=ExpEnterIcon.d.ts.map

package/expresivo/ExpEnterIcon/ExpEnterIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpEnterIcon.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpEnterIcon/ExpEnterIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAS,EACT,IAAY,EACZ,QAAgB,GACjB,EAAE,iBAAiB,GAAG,SAAS,CAM/B"}

package/expresivo/ExpEnterIcon/ExpEnterIcon.jsx

@@ -0,0 +1,32 @@
+'use client';
+import { FiLogIn } from 'react-icons/fi';
+import { useExpScope } from '../ExpScope/ExpScope';
+import { EnterGlyph } from '../shared/glyphs';
+/**
+ * A door with an arrow going in, for the `iconL` of a core `Button` that
+ * signs in or enters somewhere. The arrow steps towards the door while the
+ * button is hovered and goes in and out while `busy`. It takes the text color
+ * of its button and is decorative.
+ *
+ * Outside an `ExpScope` it falls back to the plain sign-in icon.
+ *
+ * @component
+ * @example
+ * <Button type="submit" iconL={<ExpEnterIcon busy={isSending} />}>
+ *   Sign in
+ * </Button>
+ *
+ * @param {Object} props - The properties of the ExpEnterIcon component.
+ * @param {number} [props.size=16] - Width and height in pixels.
+ * @param {boolean} [props.busy=false] - Steps the arrow in and out of the door while the action runs.
+ * @param {boolean} [props.disabled=false] - Grays out, to match a disabled button.
+ *
+ * @returns {ReactNode} The door and arrow, or `FiLogIn` outside an `ExpScope`.
+ */
+export function ExpEnterIcon({ size = 16, busy = false, disabled = false, }) {
+    const inScope = useExpScope();
+    if (!inScope)
+        return <FiLogIn aria-hidden="true"/>;
+    return <EnterGlyph size={size} busy={busy} disabled={disabled}/>;
+}
+//# sourceMappingURL=ExpEnterIcon.jsx.map

package/expresivo/ExpEnterIcon/ExpEnterIcon.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpEnterIcon.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpEnterIcon/ExpEnterIcon.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAGb,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAW9C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,IAAI,GAAG,EAAE,EACT,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,KAAK,GACE;IAClB,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAE9B,IAAI,CAAC,OAAO;QAAE,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,MAAM,EAAG,CAAC;IAEpD,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAG,CAAC;AACpE,CAAC"}

package/expresivo/ExpEnterIcon/index.d.ts

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

package/expresivo/ExpEnterIcon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpEnterIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/expresivo/ExpEnterIcon/index.js

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

package/expresivo/ExpEnterIcon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpEnterIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/expresivo/ExpGrowBar/ExpGrowBar.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ExpGrowBarProps = {
+    /** Progress between 0 and 100. */
+    value: number;
+    /** Accessible name of what the bar measures. */
+    ariaLabel: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'>;
+/**
+ * Progress bar whose fill grows in the clicOH gradient when it mounts. For
+ * scores and shares shown at rest; for an operation that is still running,
+ * use the core `ProgressBar`.
+ *
+ * Outside an `ExpScope` it falls back to the core `ProgressBar`.
+ *
+ * @component
+ * @example
+ * <ExpGrowBar value={57} ariaLabel="Share of cases solved" />
+ *
+ * @param {Object} props - The properties of the ExpGrowBar component.
+ * @param {number} props.value - Progress between 0 and 100.
+ * @param {string} props.ariaLabel - Accessible name of what the bar measures.
+ *
+ * @returns {ReactNode} The bar, or a core `ProgressBar` outside an `ExpScope`.
+ */
+export declare function ExpGrowBar({ value, ariaLabel, ...restProps }: ExpGrowBarProps): ReactNode;
+//# sourceMappingURL=ExpGrowBar.d.ts.map

package/expresivo/ExpGrowBar/ExpGrowBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpGrowBar.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpGrowBar/ExpGrowBar.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,eAAe,GAAG;IAC5B,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;AAI9D;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EACb,EAAE,eAAe,GAAG,SAAS,CAiC7B"}

package/expresivo/ExpGrowBar/ExpGrowBar.jsx

@@ -0,0 +1,39 @@
+'use client';
+import clsx from 'clsx';
+import { useEffect, useState, } from 'react';
+import { ProgressBar } from '@clicoh/orion-library';
+import { useExpScope } from '../ExpScope/ExpScope';
+const clamp = (value) => Math.min(100, Math.max(0, value));
+/**
+ * Progress bar whose fill grows in the clicOH gradient when it mounts. For
+ * scores and shares shown at rest; for an operation that is still running,
+ * use the core `ProgressBar`.
+ *
+ * Outside an `ExpScope` it falls back to the core `ProgressBar`.
+ *
+ * @component
+ * @example
+ * <ExpGrowBar value={57} ariaLabel="Share of cases solved" />
+ *
+ * @param {Object} props - The properties of the ExpGrowBar component.
+ * @param {number} props.value - Progress between 0 and 100.
+ * @param {string} props.ariaLabel - Accessible name of what the bar measures.
+ *
+ * @returns {ReactNode} The bar, or a core `ProgressBar` outside an `ExpScope`.
+ */
+export function ExpGrowBar({ value, ariaLabel, ...restProps }) {
+    const inScope = useExpScope();
+    const [shown, setShown] = useState(0);
+    const percent = clamp(value);
+    useEffect(() => {
+        const timer = setTimeout(() => setShown(percent), 60);
+        return () => clearTimeout(timer);
+    }, [percent]);
+    if (!inScope) {
+        return <ProgressBar {...restProps} value={percent} ariaLabel={ariaLabel}/>;
+    }
+    return (<div {...restProps} role="progressbar" aria-label={ariaLabel} aria-valuemin={0} aria-valuemax={100} aria-valuenow={percent} className={clsx('bg-gray-5 dark:bg-gray-dark-1 relative h-2 overflow-hidden rounded-full', restProps.className)}>
+      <span className="from-lavender to-violet absolute inset-y-0 left-0 rounded-full bg-linear-90 transition-[width] duration-900 ease-[cubic-bezier(.22,1,.36,1)] motion-reduce:transition-none" style={{ width: `${shown}%` }}/>
+    </div>);
+}
+//# sourceMappingURL=ExpGrowBar.jsx.map

package/expresivo/ExpGrowBar/ExpGrowBar.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpGrowBar.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpGrowBar/ExpGrowBar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAGL,SAAS,EACT,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AASnD,MAAM,KAAK,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;AAE3E;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EACI;IAChB,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAC9B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;QACtD,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CAAC,WAAW,CAAC,IAAI,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,EAAG,CAAC;IAC9E,CAAC;IAED,OAAO,CACL,CAAC,GAAG,CACF,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,aAAa,CAClB,UAAU,CAAC,CAAC,SAAS,CAAC,CACtB,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,aAAa,CAAC,CAAC,GAAG,CAAC,CACnB,aAAa,CAAC,CAAC,OAAO,CAAC,CACvB,SAAS,CAAC,CAAC,IAAI,CACb,yEAAyE,EACzE,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,IAAI,CACH,SAAS,CAAC,4KAA4K,CACtL,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,GAAG,EAAE,CAAC,EAElC;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

package/expresivo/ExpGrowBar/index.d.ts

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

package/expresivo/ExpGrowBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpGrowBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/expresivo/ExpGrowBar/index.js

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

package/expresivo/ExpGrowBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpGrowBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/expresivo/ExpJourneyTrack/ExpJourneyTrack.d.ts

@@ -0,0 +1,69 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type StepperProps } from '@clicoh/orion-library';
+import { type ExpMascotName } from '../ExpMascot';
+export type ExpJourneyStage = {
+    id: string;
+    label: string;
+    /** Pose the mascot takes while this stage is current. */
+    mascot: ExpMascotName;
+    /** Short note shown under the label once the stage is reached. */
+    meta?: string;
+    /** Makes a reached stage clickable, to go back to it. */
+    onSelect?: () => void;
+};
+export type ExpJourneyStateLabels = Pick<StepperProps['stateLabels'], 'done' | 'current' | 'pending'>;
+export type ExpJourneyTrackProps = {
+    /** Stages in order. */
+    stages: ExpJourneyStage[];
+    /** Index of the current stage. */
+    current: number;
+    /** Accessible name of the list. */
+    ariaLabel: string;
+    /** Words for each state, read by screen readers after every label. */
+    stateLabels: ExpJourneyStateLabels;
+    /** Width and height of the mascot, in pixels. */
+    mascotSize?: number;
+    /** Walks from the first stage to `current` once when it mounts. */
+    autoplay?: boolean;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+/**
+ * Progress line with a mascot that travels to the current stage and takes
+ * that stage's pose. Reached stages get a check and the travelled part of
+ * the line fills with the clicOH gradient. Like the core `Stepper`, it only
+ * displays progress: the consumer owns `current`.
+ *
+ * The line and the mascot are decorative; the stages are an ordered list
+ * whose current item carries `aria-current="step"`.
+ *
+ * Labels sit under their dots, so the first and last columns are half as wide
+ * as the rest. When the track is narrower than 28rem every label gets the same
+ * width instead, so the end labels don't spill onto their neighbours.
+ *
+ * Outside an `ExpScope` it falls back to the core `Stepper`. When the scope
+ * hides mascots, the line renders without its traveller.
+ *
+ * @component
+ * @example
+ * <ExpJourneyTrack
+ *   ariaLabel="Progress"
+ *   stateLabels={{ done: 'done', current: 'in progress', pending: 'pending' }}
+ *   current={1}
+ *   stages={[
+ *     { id: 'read', label: 'Read', mascot: 'oculus-04-analizando-documento' },
+ *     { id: 'search', label: 'Search', mascot: 'oculus-07-buscando-rapido' },
+ *     { id: 'answer', label: 'Answer', mascot: 'oculus-08-satisfecho' },
+ *   ]}
+ * />
+ *
+ * @param {Object} props - The properties of the ExpJourneyTrack component.
+ * @param {ExpJourneyStage[]} props.stages - Stages in order, each with `id`, `label`, `mascot`, and optional `meta` and `onSelect`.
+ * @param {number} props.current - Index of the current stage.
+ * @param {string} props.ariaLabel - Accessible name of the list.
+ * @param {ExpJourneyStateLabels} props.stateLabels - Words for `done`, `current` and `pending`.
+ * @param {number} [props.mascotSize=88] - Width and height of the mascot, in pixels.
+ * @param {boolean} [props.autoplay=false] - Walks from the first stage to `current` once when it mounts. Off with reduced motion.
+ *
+ * @returns {ReactNode} The journey track, a core `Stepper` outside an `ExpScope`, or `null` without stages.
+ */
+export declare function ExpJourneyTrack({ stages, current, ariaLabel, stateLabels, mascotSize, autoplay, ...restProps }: ExpJourneyTrackProps): ReactNode;
+//# sourceMappingURL=ExpJourneyTrack.d.ts.map

package/expresivo/ExpJourneyTrack/ExpJourneyTrack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpJourneyTrack.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpJourneyTrack/ExpJourneyTrack.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC/E,OAAO,EAAa,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7D,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,MAAM,EAAE,aAAa,CAAC;IACtB,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,YAAY,CAAC,aAAa,CAAC,EAC3B,MAAM,GAAG,SAAS,GAAG,SAAS,CAC/B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,uBAAuB;IACvB,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,kCAAkC;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,sEAAsE;IACtE,WAAW,EAAE,qBAAqB,CAAC;IACnC,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AA+BrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,OAAO,EACP,SAAS,EACT,WAAW,EACX,UAAe,EACf,QAAgB,EAChB,GAAG,SAAS,EACb,EAAE,oBAAoB,GAAG,SAAS,CAyLlC"}