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

package/expresivo/ExpPageHero/ExpPageHero.jsx

@@ -0,0 +1,113 @@
+'use client';
+import clsx from 'clsx';
+import { useId } from 'react';
+import { Heading } from '@clicoh/orion-library';
+import { ExpBubble } from '../ExpBubble/ExpBubble';
+import { ExpCollapseToggle } from '../ExpCollapseToggle/ExpCollapseToggle';
+import { ExpMascot } from '../ExpMascot/ExpMascot';
+import { useExpScopeOptions } from '../ExpScope/ExpScope';
+/**
+ * Page header for the top of a screen, meant for the `heading` slot of
+ * `DashboardTemplate`: an eyebrow, the title, a description, optional content
+ * under it, and a mascot with a speech bubble on the right.
+ *
+ * On wide screens it draws a band with a dotted lavender background. With
+ * `collapse`, a corner button tucks it down to the title, and the mascot hangs
+ * from a thread instead; the consumer keeps the state. On small screens it is
+ * a plain title row without eyebrow, description, mascot or bubble, and
+ * `collapse` has no effect. Children still show there.
+ *
+ * Outside an `ExpScope` it renders the core title row of `DashboardTemplate`:
+ * title, adornment, description, children and actions.
+ *
+ * @component
+ * @example
+ * <ExpPageHero
+ *   eyebrow="Case memory"
+ *   title="Cases"
+ *   description="Review past diagnoses before starting from scratch."
+ *   mascot="fixi-02-investigando"
+ *   bubble={{ title: 'Lead found', text: 'Search by ticket or symptom.' }}
+ * />
+ *
+ * @example
+ * // Collapsible, with the state kept by the consumer
+ * <ExpPageHero
+ *   title="Cases"
+ *   mascot="fixi-02-investigando"
+ *   collapse={{
+ *     collapsed,
+ *     onToggle: () => setCollapsed(!collapsed),
+ *     expandLabel: 'Expand header',
+ *     collapseLabel: 'Collapse header',
+ *   }}
+ * />
+ *
+ * @param {Object} props - The properties of the ExpPageHero component.
+ * @param {ReactNode} props.title - Page title.
+ * @param {ReactNode} [props.eyebrow] - Short uppercase line above the title, only on wide screens.
+ * @param {'h3' | 'h4' | 'h5'} [props.headingLevel='h3'] - Heading level of the title.
+ * @param {ReactNode} [props.titleAdornment] - Content next to the title, such as a `Badge`.
+ * @param {ReactNode} [props.description] - Text under the title, only on wide screens; hidden while collapsed.
+ * @param {ReactNode} [props.children] - Content under the description, such as stat chips; hidden while collapsed.
+ * @param {ReactNode} [props.actions] - Content on the right, such as buttons; it moves under the title on small screens.
+ * @param {ExpMascotName} [props.mascot] - Mascot on the right, 104px; 56px and hanging while collapsed.
+ * @param {ExpPageHeroBubble} [props.bubble] - Speech bubble next to the mascot: `title`, `text` and `badge`.
+ * @param {ExpPageHeroCollapse} [props.collapse] - Makes the header collapsible: `collapsed`, `onToggle`, `expandLabel` and `collapseLabel`.
+ *
+ * @returns {ReactNode} The page header.
+ */
+export function ExpPageHero({ title, eyebrow, headingLevel = 'h3', titleAdornment, description, children, actions, mascot, bubble, collapse, ...restProps }) {
+    const options = useExpScopeOptions();
+    const generatedId = useId();
+    const id = restProps.id ?? generatedId;
+    const collapsed = !!collapse?.collapsed;
+    const hasAside = !!mascot || !!bubble;
+    const titleRow = (<div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
+      <Heading level={headingLevel}>{title}</Heading>
+      {titleAdornment}
+    </div>);
+    if (!options) {
+        return (<div {...restProps} className={clsx('flex flex-col items-start gap-3 sm:flex-row sm:justify-between', restProps.className)}>
+        <div className="flex min-w-0 flex-col gap-1">
+          {titleRow}
+          {!!description && (<div className="text-gray-1 dark:text-gray-2 text-sm">
+              {description}
+            </div>)}
+          {children}
+        </div>
+        {actions}
+      </div>);
+    }
+    return (<div {...restProps} id={id} data-state={collapsed ? 'collapsed' : 'expanded'} className={clsx('exp-hero relative flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between lg:gap-6', collapsed
+            ? 'lg:min-h-[72px] lg:py-3.5 lg:pr-30 lg:pl-6'
+            : 'lg:px-8 lg:py-6', !collapsed && !!collapse && !hasAside && 'lg:pr-20', restProps.className)}>
+      <div className="flex min-w-0 flex-col items-start gap-1 lg:flex-[1_1_420px]">
+        {!!eyebrow && (<p className={clsx('text-lavender dark:text-lavender-dark hidden text-xs leading-4 font-semibold tracking-[0.04em] uppercase', !collapsed && 'lg:block')}>
+            <span aria-hidden="true">✦ </span>
+            {eyebrow}
+          </p>)}
+        {titleRow}
+        {!!description && (<div className={clsx('text-gray-1 dark:text-gray-2 hidden max-w-[680px] text-sm leading-[22px] text-pretty', !collapsed && 'lg:block')}>
+            {description}
+          </div>)}
+        {!!children && (<div className={clsx('mt-2 w-full', collapsed && 'lg:hidden')}>
+            {children}
+          </div>)}
+      </div>
+      {actions}
+      {!!hasAside && (<div className={clsx('hidden shrink-0 items-center gap-4', !collapsed && 'lg:flex', !!collapse && 'lg:mr-7')}>
+          {!!bubble && (<ExpBubble tail="right" title={bubble.title} badge={bubble.badge}>
+              {bubble.text}
+            </ExpBubble>)}
+          {!!mascot && <ExpMascot name={mascot} size={104}/>}
+        </div>)}
+      {!!collapsed && !!mascot && (<span className="absolute top-0 right-18 hidden lg:block">
+          <ExpMascot name={mascot} size={56} motion="hang"/>
+        </span>)}
+      {!!collapse && (<div className="absolute top-5 right-5 hidden lg:block">
+          <ExpCollapseToggle collapsed={collapsed} onToggle={collapse.onToggle} expandLabel={collapse.expandLabel} collapseLabel={collapse.collapseLabel} aria-controls={id}/>
+        </div>)}
+    </div>);
+}
+//# sourceMappingURL=ExpPageHero.jsx.map

package/expresivo/ExpPageHero/ExpPageHero.jsx.map

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

package/expresivo/ExpPageHero/index.d.ts

@@ -0,0 +1,3 @@
+export { ExpPageHero } from './ExpPageHero';
+export type { ExpPageHeroBubble, ExpPageHeroCollapse, ExpPageHeroLevel, ExpPageHeroProps, } from './ExpPageHero';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPageHero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,eAAe,CAAC"}

package/expresivo/ExpPageHero/index.js

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

package/expresivo/ExpPageHero/index.js.map

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

package/expresivo/ExpPeek/ExpPeek.d.ts

@@ -0,0 +1,56 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ExpMascotName } from '../ExpMascot/catalog';
+export type ExpPeekProps = {
+    /** What the mascots peek from behind, usually a single button. */
+    children: ReactNode;
+    /**
+     * Mascots in the order they take turns, as groups of poses. Each turn shows
+     * one pose of its group, picked at random, and the order repeats.
+     */
+    cast?: readonly (readonly ExpMascotName[])[];
+    /** Width and height of the mascot, in pixels. */
+    size?: number;
+    /** Hides the mascot and stops the turns, for instance while the action runs. */
+    paused?: boolean;
+    /** How long each mascot stays out, in milliseconds. */
+    visibleMs?: number;
+    /** Pause between one mascot and the next, in milliseconds. */
+    gapMs?: number;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+/**
+ * Wraps a button so the clicOH mascots peek out from behind its edges, one at
+ * a time: from the top edge at any point, or from the left or right side, with
+ * a random pose and tilt. Each one springs out, stays a few seconds, hides and
+ * makes room for the next, in the order of `cast`.
+ *
+ * The mascot sits behind the wrapped element, which covers its lower part;
+ * nothing is clipped, so leave some room around it. It is decorative and
+ * never takes clicks. Pause it while the action runs.
+ *
+ * Shows no mascot with reduced motion, outside an `ExpScope`, or when the
+ * scope hides mascots; the wrapped element renders as usual.
+ *
+ * @component
+ * @example
+ * <ExpPeek paused={isSending} className="w-full">
+ *   <Button type="submit" className="w-full">Sign in</Button>
+ * </ExpPeek>
+ *
+ * @example
+ * // Only Fixi, bigger and slower
+ * <ExpPeek cast={[['fixi-01-feliz', 'fixi-06-celebrando']]} size={56} visibleMs={4000}>
+ *   <Button>Fix it</Button>
+ * </ExpPeek>
+ *
+ * @param {Object} props - The properties of the ExpPeek component.
+ * @param {ReactNode} props.children - What the mascots peek from behind, usually a single button.
+ * @param {ExpMascotName[][]} [props.cast] - Mascots in turn order, as groups of poses; each turn picks one pose of its group. Defaults to Oculus searching, Bugi showing up and Fixi fixing.
+ * @param {number} [props.size=44] - Width and height of the mascot, in pixels.
+ * @param {boolean} [props.paused=false] - Hides the mascot and stops the turns.
+ * @param {number} [props.visibleMs=3000] - How long each mascot stays out, in milliseconds.
+ * @param {number} [props.gapMs=2000] - Pause between one mascot and the next, in milliseconds.
+ *
+ * @returns {ReactNode} The wrapped element with the mascots behind it.
+ */
+export declare function ExpPeek({ children, cast, size, paused, visibleMs, gapMs, className, ...restProps }: ExpPeekProps): ReactNode;
+//# sourceMappingURL=ExpPeek.d.ts.map

package/expresivo/ExpPeek/ExpPeek.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpPeek.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPeek/ExpPeek.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAe1D,MAAM,MAAM,YAAY,GAAG;IACzB,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,aAAa,EAAE,CAAC,EAAE,CAAC;IAC7C,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAoDrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,IAAiB,EACjB,IAAS,EACT,MAAc,EACd,SAAgB,EAChB,KAAY,EACZ,SAAS,EACT,GAAG,SAAS,EACb,EAAE,YAAY,GAAG,SAAS,CA6D1B"}

package/expresivo/ExpPeek/ExpPeek.jsx

@@ -0,0 +1,131 @@
+'use client';
+import clsx from 'clsx';
+import { useEffect, useState, } from 'react';
+import { ExpMascot } from '../ExpMascot/ExpMascot';
+import { useExpScopeOptions } from '../ExpScope/ExpScope';
+/** Oculus searches, Bugi shows up, Fixi fixes it. */
+const STORY_CAST = [
+    [
+        'oculus-02-investigando',
+        'oculus-07-buscando-rapido',
+        'oculus-04-analizando-documento',
+    ],
+    ['bugi-01-alerta', 'bugi-05-sorprendido', 'bugi-02-investigando'],
+    ['fixi-04-reparando', 'fixi-01-feliz', 'fixi-06-celebrando'],
+];
+/** The top edge comes up three times as often as each side. */
+const SPOTS = ['top', 'top', 'top', 'left', 'right'];
+const FIRST_DELAY_MS = 900;
+const RISE_DELAY_MS = 40;
+const HIDE_MS = 420;
+const BOUNCE = 'cubic-bezier(.34,1.56,.64,1)';
+const SINK = 'cubic-bezier(.55,0,.75,.2)';
+function pick(items) {
+    return items[Math.floor(Math.random() * items.length)];
+}
+function peekStyle(peek, size, out) {
+    const sideways = { top: '50%', marginTop: -size / 2 };
+    const place = {
+        top: { top: 0, left: `calc(${12 + peek.along * 74}% - ${size / 2}px)` },
+        left: { ...sideways, left: 10 },
+        right: { ...sideways, right: 10 },
+    };
+    const outTransform = {
+        top: `translateY(-${Math.round(size * 0.68)}px) rotate(${peek.tilt}deg)`,
+        left: `translateX(-${size * 0.95}px) rotate(-10deg)`,
+        right: `translateX(${size * 0.95}px) rotate(10deg)`,
+    };
+    return {
+        width: size,
+        height: size,
+        ...place[peek.spot],
+        transformOrigin: peek.spot === 'top' ? '50% 100%' : '50% 50%',
+        transform: out ? outTransform[peek.spot] : 'none',
+        opacity: out ? 1 : 0,
+        transition: out
+            ? `transform 520ms ${BOUNCE}, opacity 80ms linear`
+            : `transform 360ms ${SINK}, opacity 120ms linear 260ms`,
+    };
+}
+/**
+ * Wraps a button so the clicOH mascots peek out from behind its edges, one at
+ * a time: from the top edge at any point, or from the left or right side, with
+ * a random pose and tilt. Each one springs out, stays a few seconds, hides and
+ * makes room for the next, in the order of `cast`.
+ *
+ * The mascot sits behind the wrapped element, which covers its lower part;
+ * nothing is clipped, so leave some room around it. It is decorative and
+ * never takes clicks. Pause it while the action runs.
+ *
+ * Shows no mascot with reduced motion, outside an `ExpScope`, or when the
+ * scope hides mascots; the wrapped element renders as usual.
+ *
+ * @component
+ * @example
+ * <ExpPeek paused={isSending} className="w-full">
+ *   <Button type="submit" className="w-full">Sign in</Button>
+ * </ExpPeek>
+ *
+ * @example
+ * // Only Fixi, bigger and slower
+ * <ExpPeek cast={[['fixi-01-feliz', 'fixi-06-celebrando']]} size={56} visibleMs={4000}>
+ *   <Button>Fix it</Button>
+ * </ExpPeek>
+ *
+ * @param {Object} props - The properties of the ExpPeek component.
+ * @param {ReactNode} props.children - What the mascots peek from behind, usually a single button.
+ * @param {ExpMascotName[][]} [props.cast] - Mascots in turn order, as groups of poses; each turn picks one pose of its group. Defaults to Oculus searching, Bugi showing up and Fixi fixing.
+ * @param {number} [props.size=44] - Width and height of the mascot, in pixels.
+ * @param {boolean} [props.paused=false] - Hides the mascot and stops the turns.
+ * @param {number} [props.visibleMs=3000] - How long each mascot stays out, in milliseconds.
+ * @param {number} [props.gapMs=2000] - Pause between one mascot and the next, in milliseconds.
+ *
+ * @returns {ReactNode} The wrapped element with the mascots behind it.
+ */
+export function ExpPeek({ children, cast = STORY_CAST, size = 44, paused = false, visibleMs = 3000, gapMs = 2000, className, ...restProps }) {
+    const options = useExpScopeOptions();
+    const [peek, setPeek] = useState(null);
+    const [out, setOut] = useState(false);
+    const active = !!options && options.mascots !== 'hidden' && !paused;
+    const castKey = cast.map((group) => group.join(',')).join('|');
+    useEffect(() => {
+        const groups = castKey
+            .split('|')
+            .map((group) => group.split(','))
+            .filter((group) => group[0] !== '');
+        const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (!active || reduceMotion || groups.length === 0)
+            return;
+        let turn = 0;
+        const timers = [];
+        const later = (run, ms) => {
+            timers.push(setTimeout(run, ms));
+        };
+        const next = () => {
+            const group = groups[turn % groups.length];
+            turn += 1;
+            setPeek({
+                turn,
+                name: pick(group),
+                spot: pick(SPOTS),
+                along: Math.random(),
+                tilt: Math.round((Math.random() - 0.5) * 24),
+            });
+            later(() => setOut(true), RISE_DELAY_MS);
+            later(() => setOut(false), RISE_DELAY_MS + visibleMs);
+            later(next, RISE_DELAY_MS + visibleMs + HIDE_MS + gapMs);
+        };
+        later(next, FIRST_DELAY_MS);
+        return () => {
+            timers.forEach(clearTimeout);
+            setOut(false);
+        };
+    }, [active, castKey, visibleMs, gapMs]);
+    return (<div {...restProps} className={clsx('relative isolate', className)}>
+      {!!peek && (<span key={peek.turn} aria-hidden="true" className="pointer-events-none absolute z-0" style={peekStyle(peek, size, out && active)}>
+          <ExpMascot name={peek.name} size={size}/>
+        </span>)}
+      <div className="relative z-1">{children}</div>
+    </div>);
+}
+//# sourceMappingURL=ExpPeek.jsx.map

package/expresivo/ExpPeek/ExpPeek.jsx.map

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

package/expresivo/ExpPeek/index.d.ts

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

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

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

package/expresivo/ExpPeek/index.js

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

package/expresivo/ExpPeek/index.js.map

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

package/expresivo/ExpPillButton/ExpPillButton.d.ts

@@ -0,0 +1,47 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ExpPillButtonTone = 'brand' | 'soft';
+export type ExpPillButtonIcon = 'lens' | 'sync' | 'enter' | 'none';
+export type ExpPillButtonProps = {
+    tone?: ExpPillButtonTone;
+    icon?: ExpPillButtonIcon;
+    /** Blocks the button and animates its glyph while the action runs. */
+    busy?: boolean;
+    /** Label shown while `busy`. Defaults to `children`. */
+    busyLabel?: string;
+    /** Takes the full width of its container. */
+    block?: boolean;
+    /** Fills the height of its container and does not lift, for a button inside a field. */
+    flush?: boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * Light pill-shaped call to action, the same 44px height as the core
+ * `Button`. `brand` is a filled lavender pill that turns into the clicOH
+ * gradient on hover, with its glyph in a white disc; `soft` is a tinted pill
+ * for secondary actions, such as a button inside a field.
+ *
+ * Outside an `ExpScope` it falls back to the core `Button`: `brand` maps to
+ * `principal` and `soft` to `second`.
+ *
+ * @component
+ * @example
+ * <ExpPillButton onClick={search}>Search</ExpPillButton>
+ *
+ * @example
+ * <ExpPillButton tone="soft" icon="sync" busy={isSyncing} busyLabel="Syncing…">
+ *   Sync
+ * </ExpPillButton>
+ *
+ * @param {Object} props - The properties of the ExpPillButton component.
+ * @param {'brand' | 'soft'} [props.tone='brand'] - Filled lavender or tinted.
+ * @param {'lens' | 'sync' | 'enter' | 'none'} [props.icon='lens'] - Glyph before the label.
+ * @param {boolean} [props.busy=false] - Blocks the button and animates its glyph.
+ * @param {string} [props.busyLabel] - Label shown while `busy`.
+ * @param {boolean} [props.block=false] - Takes the full width of its container.
+ * @param {boolean} [props.flush=false] - Fills the height of its container and does not lift, for a button inside a field.
+ * @param {ReactNode} props.children - Label of the action.
+ * @param {ButtonHTMLAttributes<HTMLButtonElement>} restProps - Additional properties for the button element.
+ *
+ * @returns {ReactNode} The rendered pill, or a core `Button` outside an `ExpScope`.
+ */
+export declare function ExpPillButton({ tone, icon, busy, busyLabel, block, flush, disabled, children, ...restProps }: ExpPillButtonProps): ReactNode;
+//# sourceMappingURL=ExpPillButton.d.ts.map

package/expresivo/ExpPillButton/ExpPillButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpPillButton.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPillButton/ExpPillButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAW7D,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,sEAAsE;IACtE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wFAAwF;IACxF,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAiC5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAc,EACd,IAAa,EACb,IAAY,EACZ,SAAS,EACT,KAAa,EACb,KAAa,EACb,QAAgB,EAChB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,kBAAkB,GAAG,SAAS,CAiEhC"}

package/expresivo/ExpPillButton/ExpPillButton.jsx

@@ -0,0 +1,77 @@
+'use client';
+import clsx from 'clsx';
+import { FiLogIn, FiRefreshCw, FiSearch } from 'react-icons/fi';
+import { Button } from '@clicoh/orion-library';
+import { useExpScope } from '../ExpScope/ExpScope';
+import { EnterGlyph, LensGlyph, SyncBadgeGlyph, SyncGlyph, } from '../shared/glyphs';
+const fallbackIconMap = {
+    lens: <FiSearch />,
+    sync: <FiRefreshCw />,
+    enter: <FiLogIn />,
+    none: undefined,
+};
+const liftClass = 'hover:-translate-y-px active:translate-y-0 active:scale-[.98]';
+const toneMap = {
+    brand: {
+        idle: clsx('bg-lavender dark:bg-lavender-dark text-white shadow-[0_3px_10px_rgba(106,93,249,0.22)]', 'hover:from-lavender hover:to-violet hover:bg-linear-135 hover:shadow-[0_8px_20px_rgba(200,84,228,0.28)]'),
+        busy: 'bg-lavender dark:bg-lavender-dark cursor-progress text-white shadow-[0_3px_10px_rgba(106,93,249,0.22)]',
+        disabled: 'bg-gray-5 text-gray-2 dark:bg-gray-dark-1 cursor-not-allowed',
+    },
+    soft: {
+        idle: clsx('bg-lavender-2 text-lavender dark:bg-lavender-dark-1 dark:text-lavender-dark', 'hover:bg-lavender-1'),
+        busy: 'bg-lavender-2 text-lavender dark:bg-lavender-dark-1 dark:text-lavender-dark cursor-progress',
+        disabled: 'bg-gray-5 text-gray-2 dark:bg-gray-dark-1 cursor-not-allowed',
+    },
+};
+/**
+ * Light pill-shaped call to action, the same 44px height as the core
+ * `Button`. `brand` is a filled lavender pill that turns into the clicOH
+ * gradient on hover, with its glyph in a white disc; `soft` is a tinted pill
+ * for secondary actions, such as a button inside a field.
+ *
+ * Outside an `ExpScope` it falls back to the core `Button`: `brand` maps to
+ * `principal` and `soft` to `second`.
+ *
+ * @component
+ * @example
+ * <ExpPillButton onClick={search}>Search</ExpPillButton>
+ *
+ * @example
+ * <ExpPillButton tone="soft" icon="sync" busy={isSyncing} busyLabel="Syncing…">
+ *   Sync
+ * </ExpPillButton>
+ *
+ * @param {Object} props - The properties of the ExpPillButton component.
+ * @param {'brand' | 'soft'} [props.tone='brand'] - Filled lavender or tinted.
+ * @param {'lens' | 'sync' | 'enter' | 'none'} [props.icon='lens'] - Glyph before the label.
+ * @param {boolean} [props.busy=false] - Blocks the button and animates its glyph.
+ * @param {string} [props.busyLabel] - Label shown while `busy`.
+ * @param {boolean} [props.block=false] - Takes the full width of its container.
+ * @param {boolean} [props.flush=false] - Fills the height of its container and does not lift, for a button inside a field.
+ * @param {ReactNode} props.children - Label of the action.
+ * @param {ButtonHTMLAttributes<HTMLButtonElement>} restProps - Additional properties for the button element.
+ *
+ * @returns {ReactNode} The rendered pill, or a core `Button` outside an `ExpScope`.
+ */
+export function ExpPillButton({ tone = 'brand', icon = 'lens', busy = false, busyLabel, block = false, flush = false, disabled = false, children, ...restProps }) {
+    const inScope = useExpScope();
+    const label = busy && busyLabel ? busyLabel : children;
+    if (!inScope) {
+        return (<Button {...restProps} modifier={tone === 'brand' ? 'principal' : 'second'} iconL={fallbackIconMap[icon]} disabled={disabled || busy} aria-busy={busy || undefined} className={clsx(block && 'w-full', restProps.className)}>
+        {label}
+      </Button>);
+    }
+    const state = disabled ? 'disabled' : busy ? 'busy' : 'idle';
+    const hasDisc = tone === 'brand' && (icon === 'lens' || icon === 'sync');
+    return (<button {...restProps} disabled={disabled || busy} aria-busy={busy || undefined} className={clsx('items-center gap-2.5 rounded-full text-sm leading-5 font-semibold whitespace-nowrap', 'transition-[background-color,box-shadow,translate,scale] duration-200 motion-reduce:translate-none motion-reduce:scale-none motion-reduce:transition-none', flush ? 'h-full' : 'h-11', !flush && state === 'idle' && liftClass, block ? 'flex w-full justify-center' : 'inline-flex', icon === 'none' && 'px-6', icon !== 'none' && (hasDisc ? 'pr-[22px] pl-1.5' : 'pr-[18px] pl-3'), toneMap[tone][state], restProps.className)}>
+      {tone === 'brand' && icon === 'lens' && (<span aria-hidden="true" className={clsx('flex size-8 shrink-0 items-center justify-center rounded-full', disabled ? 'bg-gray-6' : 'bg-white')}>
+          <LensGlyph size={22} busy={busy} disabled={disabled}/>
+        </span>)}
+      {tone === 'brand' && icon === 'sync' && (<SyncBadgeGlyph size={32} busy={busy} disabled={disabled}/>)}
+      {tone === 'soft' && icon === 'lens' && (<LensGlyph size={20} busy={busy} disabled={disabled}/>)}
+      {tone === 'soft' && icon === 'sync' && (<SyncGlyph size={20} busy={busy} disabled={disabled}/>)}
+      {icon === 'enter' && (<EnterGlyph size={20} busy={busy} disabled={disabled}/>)}
+      {label}
+    </button>);
+}
+//# sourceMappingURL=ExpPillButton.jsx.map

package/expresivo/ExpPillButton/ExpPillButton.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpPillButton.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpPillButton/ExpPillButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EACL,UAAU,EACV,SAAS,EACT,cAAc,EACd,SAAS,GACV,MAAM,kBAAkB,CAAC;AAqB1B,MAAM,eAAe,GAAyC;IAC5D,IAAI,EAAE,CAAC,QAAQ,CAAC,AAAD,EAAG;IAClB,IAAI,EAAE,CAAC,WAAW,CAAC,AAAD,EAAG;IACrB,KAAK,EAAE,CAAC,OAAO,CAAC,AAAD,EAAG;IAClB,IAAI,EAAE,SAAS;CAChB,CAAC;AAEF,MAAM,SAAS,GACb,+DAA+D,CAAC;AAElE,MAAM,OAAO,GAAyD;IACpE,KAAK,EAAE;QACL,IAAI,EAAE,IAAI,CACR,wFAAwF,EACxF,yGAAyG,CAC1G;QACD,IAAI,EAAE,wGAAwG;QAC9G,QAAQ,EAAE,8DAA8D;KACzE;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI,CACR,6EAA6E,EAC7E,qBAAqB,CACtB;QACD,IAAI,EAAE,6FAA6F;QACnG,QAAQ,EAAE,8DAA8D;KACzE;CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,GAAG,OAAO,EACd,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,KAAK,EACZ,SAAS,EACT,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,GAAG,SAAS,EACO;IACnB,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAC9B,MAAM,KAAK,GAAG,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;IAEvD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CACL,CAAC,MAAM,CACL,IAAI,SAAS,CAAC,CACd,QAAQ,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CACpD,KAAK,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAC7B,QAAQ,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,CAC3B,SAAS,CAAC,CAAC,IAAI,IAAI,SAAS,CAAC,CAC7B,SAAS,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,QAAQ,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAExD;QAAA,CAAC,KAAK,CACR;MAAA,EAAE,MAAM,CAAC,CACV,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,GAAc,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IACxE,MAAM,OAAO,GAAG,IAAI,KAAK,OAAO,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,KAAK,MAAM,CAAC,CAAC;IAEzE,OAAO,CACL,CAAC,MAAM,CACL,IAAI,SAAS,CAAC,CACd,QAAQ,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,CAC3B,SAAS,CAAC,CAAC,IAAI,IAAI,SAAS,CAAC,CAC7B,SAAS,CAAC,CAAC,IAAI,CACb,qFAAqF,EACrF,2JAA2J,EAC3J,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EACzB,CAAC,KAAK,IAAI,KAAK,KAAK,MAAM,IAAI,SAAS,EACvC,KAAK,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,aAAa,EACpD,IAAI,KAAK,MAAM,IAAI,MAAM,EACzB,IAAI,KAAK,MAAM,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB,CAAC,EACpE,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EACpB,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,MAAM,IAAI,CACtC,CAAC,IAAI,CACH,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CACb,+DAA+D,EAC/D,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CACpC,CAAC,CAEF;UAAA,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EACtD;QAAA,EAAE,IAAI,CAAC,CACR,CACD;MAAA,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,MAAM,IAAI,CACtC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAG,CAC7D,CACD;MAAA,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,KAAK,MAAM,IAAI,CACrC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAG,CACxD,CACD;MAAA,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,KAAK,MAAM,IAAI,CACrC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAG,CACxD,CACD;MAAA,CAAC,IAAI,KAAK,OAAO,IAAI,CACnB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAG,CACzD,CACD;MAAA,CAAC,KAAK,CACR;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC"}

package/expresivo/ExpPillButton/index.d.ts

@@ -0,0 +1,3 @@
+export { ExpPillButton } from './ExpPillButton';
+export type { ExpPillButtonIcon, ExpPillButtonProps, ExpPillButtonTone, } from './ExpPillButton';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPillButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC"}

package/expresivo/ExpPillButton/index.js

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

package/expresivo/ExpPillButton/index.js.map

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

package/expresivo/ExpRepoAvatar/ExpRepoAvatar.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type ExpRepoAvatarName } from './catalog';
+export type ExpRepoAvatarProps = {
+    name: ExpRepoAvatarName;
+    /** Width and height on screen, in pixels. */
+    size?: number;
+} & Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
+/**
+ * Little creature that stands for a repository next to its name. Decorative:
+ * always `aria-hidden`, so the repo name next to it carries the meaning.
+ *
+ * Outside an `ExpScope`, or with `mascots="hidden"`, it renders nothing.
+ *
+ * @component
+ * @example
+ * <span className="flex items-center gap-2">
+ *   <ExpRepoAvatar name="pulpo-lentes" size={36} />
+ *   core-logistics
+ * </span>
+ *
+ * @param {ExpRepoAvatarProps} props - The properties of the ExpRepoAvatar component.
+ * @param {ExpRepoAvatarName} props.name - Avatar from the catalog.
+ * @param {number} [props.size=32] - Width and height on screen, in pixels.
+ *
+ * @returns {ReactNode} The avatar, or nothing outside an `ExpScope`.
+ */
+export declare function ExpRepoAvatar({ name, size, ...restProps }: ExpRepoAvatarProps): ReactNode;
+//# sourceMappingURL=ExpRepoAvatar.d.ts.map

package/expresivo/ExpRepoAvatar/ExpRepoAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpRepoAvatar.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpRepoAvatar/ExpRepoAvatar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,KAAK,iBAAiB,EAAqB,MAAM,WAAW,CAAC;AAEtE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,iBAAiB,CAAC;IACxB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC;AAEtD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,IAAS,EACT,GAAG,SAAS,EACb,EAAE,kBAAkB,GAAG,SAAS,CAqBhC"}

package/expresivo/ExpRepoAvatar/ExpRepoAvatar.jsx

@@ -0,0 +1,32 @@
+'use client';
+import clsx from 'clsx';
+import { useExpScopeOptions } from '../ExpScope/ExpScope';
+import { repoAvatarCatalog } from './catalog';
+/**
+ * Little creature that stands for a repository next to its name. Decorative:
+ * always `aria-hidden`, so the repo name next to it carries the meaning.
+ *
+ * Outside an `ExpScope`, or with `mascots="hidden"`, it renders nothing.
+ *
+ * @component
+ * @example
+ * <span className="flex items-center gap-2">
+ *   <ExpRepoAvatar name="pulpo-lentes" size={36} />
+ *   core-logistics
+ * </span>
+ *
+ * @param {ExpRepoAvatarProps} props - The properties of the ExpRepoAvatar component.
+ * @param {ExpRepoAvatarName} props.name - Avatar from the catalog.
+ * @param {number} [props.size=32] - Width and height on screen, in pixels.
+ *
+ * @returns {ReactNode} The avatar, or nothing outside an `ExpScope`.
+ */
+export function ExpRepoAvatar({ name, size = 32, ...restProps }) {
+    const options = useExpScopeOptions();
+    if (!options || options.mascots === 'hidden')
+        return null;
+    return (<span {...restProps} aria-hidden="true" className={clsx('inline-flex shrink-0', restProps.className)}>
+      <img src={repoAvatarCatalog[name].src} alt="" width={size} height={size} draggable={false} className="block object-contain"/>
+    </span>);
+}
+//# sourceMappingURL=ExpRepoAvatar.jsx.map

package/expresivo/ExpRepoAvatar/ExpRepoAvatar.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpRepoAvatar.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpRepoAvatar/ExpRepoAvatar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAA0B,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAQtE;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,IAAI,GAAG,EAAE,EACT,GAAG,SAAS,EACO;IACnB,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;IAErC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE1D,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAE7D;MAAA,CAAC,GAAG,CACF,GAAG,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CACjC,GAAG,CAAC,EAAE,CACN,KAAK,CAAC,CAAC,IAAI,CAAC,CACZ,MAAM,CAAC,CAAC,IAAI,CAAC,CACb,SAAS,CAAC,CAAC,KAAK,CAAC,CACjB,SAAS,CAAC,sBAAsB,EAEpC;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}

package/expresivo/ExpRepoAvatar/catalog.d.ts

@@ -0,0 +1,6 @@
+import type { StaticImageData } from 'next/image';
+/** Repo avatars, named after the drawing like their files. Which repo gets which one is the consumer's call. */
+export type ExpRepoAvatarName = 'pulpo' | 'pulpo-lentes' | 'pulpo-verde' | 'cohete' | 'dino' | 'caja' | 'caja-chispa';
+/** PNGs about 60px wide: sharp up to 30px on high-density screens. */
+export declare const repoAvatarCatalog: Record<ExpRepoAvatarName, StaticImageData>;
+//# sourceMappingURL=catalog.d.ts.map

package/expresivo/ExpRepoAvatar/catalog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpRepoAvatar/catalog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AASlD,gHAAgH;AAChH,MAAM,MAAM,iBAAiB,GACzB,OAAO,GACP,cAAc,GACd,aAAa,GACb,QAAQ,GACR,MAAM,GACN,MAAM,GACN,aAAa,CAAC;AAElB,sEAAsE;AACtE,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAQxE,CAAC"}

package/expresivo/ExpRepoAvatar/catalog.js

@@ -0,0 +1,18 @@
+import cajaChispa from '@clicoh/orion-library/assets/avatares/caja-chispa.png';
+import caja from '@clicoh/orion-library/assets/avatares/caja.png';
+import cohete from '@clicoh/orion-library/assets/avatares/cohete.png';
+import dino from '@clicoh/orion-library/assets/avatares/dino.png';
+import pulpoLentes from '@clicoh/orion-library/assets/avatares/pulpo-lentes.png';
+import pulpoVerde from '@clicoh/orion-library/assets/avatares/pulpo-verde.png';
+import pulpo from '@clicoh/orion-library/assets/avatares/pulpo.png';
+/** PNGs about 60px wide: sharp up to 30px on high-density screens. */
+export const repoAvatarCatalog = {
+    pulpo,
+    'pulpo-lentes': pulpoLentes,
+    'pulpo-verde': pulpoVerde,
+    cohete,
+    dino,
+    caja,
+    'caja-chispa': cajaChispa,
+};
+//# sourceMappingURL=catalog.js.map

package/expresivo/ExpRepoAvatar/catalog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog.js","sourceRoot":"","sources":["../../src/expresivo/ExpRepoAvatar/catalog.ts"],"names":[],"mappings":"AACA,OAAO,UAAU,MAAM,uDAAuD,CAAC;AAC/E,OAAO,IAAI,MAAM,gDAAgD,CAAC;AAClE,OAAO,MAAM,MAAM,kDAAkD,CAAC;AACtE,OAAO,IAAI,MAAM,gDAAgD,CAAC;AAClE,OAAO,WAAW,MAAM,wDAAwD,CAAC;AACjF,OAAO,UAAU,MAAM,uDAAuD,CAAC;AAC/E,OAAO,KAAK,MAAM,iDAAiD,CAAC;AAYpE,sEAAsE;AACtE,MAAM,CAAC,MAAM,iBAAiB,GAA+C;IAC3E,KAAK;IACL,cAAc,EAAE,WAAW;IAC3B,aAAa,EAAE,UAAU;IACzB,MAAM;IACN,IAAI;IACJ,IAAI;IACJ,aAAa,EAAE,UAAU;CAC1B,CAAC"}

package/expresivo/ExpRepoAvatar/index.d.ts

@@ -0,0 +1,4 @@
+export { ExpRepoAvatar } from './ExpRepoAvatar';
+export type { ExpRepoAvatarProps } from './ExpRepoAvatar';
+export type { ExpRepoAvatarName } from './catalog';
+//# sourceMappingURL=index.d.ts.map