@nanisoft/prism-ui 0.10.2 → 0.15.0

package/dist/components/ui/carousel.js

@@ -0,0 +1,209 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { useCallback, useEffect, useId, useRef, useState, } from 'react';
+import { cn } from '../../lib/utils.js';
+/**
+ * A set of slides with controls that move between them.
+ *
+ * **A carousel hides content, so it must never be the only route to it.** That is
+ * the decision worth making, and it is a constraint on the caller as much as on
+ * this Component. Everything a carousel shows, a reader must be able to reach some
+ * other way: a tab, a section below it, a list. A carousel used as the only
+ * presentation of a set of images is a set of images a reader on a keyboard, on a
+ * screen reader, or with the controls hidden by a stylesheet cannot see at all,
+ * and the Component cannot detect that case. So the rule is here, in the
+ * documentation, where a caller meets it, rather than assumed.
+ *
+ * **The controls say where the reader is, and the position is a sentence the
+ * caller writes.** `position` is required and is a function of the index and the
+ * total, so a reader is told "3 of 7" rather than being left to infer it. A
+ * carousel with no position indicator is a guessing game: a reader moved three
+ * times with nothing counting has no way to know whether there are three slides
+ * left or three hundred, and the only way to find out is to keep pressing. The
+ * current position is also in `aria-live="polite"` on the position, because a
+ * carousel that moves silently under a reader who did not press anything is a
+ * carousel a reader cannot follow.
+ *
+ * **One slide is the whole content, with no controls.** A carousel of one slide is
+ * a picture with two buttons that do nothing, and it is the state a filtered or
+ * partially-loaded set passes through. The controls are absent rather than
+ * disabled, and the position says 1 of 1, because "there is one slide and you are
+ * on it" is a true and useful thing to tell a reader.
+ *
+ * **No slide is authored rather than rendered as an empty frame.** Zero slides is
+ * a state a caller reaches before their data arrives or after a filter excludes
+ * everything, and a region with an empty track and two dead controls is a gap
+ * rather than a state.
+ *
+ * **It is operable from the keyboard, and the arrow keys do what a reader
+ * expects.** Left and Right move between slides when the carousel has focus, Home
+ * and End jump to the first and last, and the controls are real buttons so Tab
+ * reaches them and Enter and Space press them. Nothing here is a div with a
+ * handler, which is the version a consumer cannot assemble for themselves because
+ * every one of those keys is a chance to get one wrong.
+ *
+ * **A slide that is holding the caret keeps the keys.** The handler is on the
+ * region, so it sees everything that bubbles out of a slide, and a slide is the
+ * caller's slot: it can hold a field, a `select` or an editable region, and in all
+ * three those four keys belong to the value. So a key is answered only when it did
+ * not land in one of them, which is the discipline `ResizableHandle` applies to the
+ * same keys on the other axis.
+ *
+ * **The slide transition is a state change and not an entrance.** The track moves
+ * with `duration-base ease-out`, which is the reader's own press being reported
+ * back, and there is no fade on mount and no motion a reader did not ask for.
+ *
+ * It is a client Component, because a carousel holds a position and answers keys.
+ */
+function Carousel({ slides, label, position, className, empty, previousLabel = 'Previous slide', nextLabel = 'Next slide', initialIndex = 0, index, onIndexChange, ...props }) {
+    const [uncontrolled, setUncontrolled] = useState(() => clamp(initialIndex, slides.length));
+    const controlled = index !== undefined;
+    const at = controlled ? clamp(index, slides.length) : uncontrolled;
+    const total = slides.length;
+    const set = useCallback((next) => {
+        const bounded = clamp(next, total);
+        if (!controlled)
+            setUncontrolled(bounded);
+        onIndexChange?.(bounded);
+    }, [controlled, onIndexChange, total]);
+    const labelId = useId();
+    const root = useRef(null);
+    const previous = useRef(null);
+    const next = useRef(null);
+    const atFirst = at <= 0;
+    const atLast = at >= total - 1;
+    // The reader's own arrow keys, which are the reason this is a Component rather
+    // than a stack of divs with two buttons beside them.
+    //
+    // The handler is on the region, so it sees every key that bubbles up out of a
+    // slide, and a slide is a caller's slot: it can hold a text field, a number input,
+    // a code block that scrolls sideways or a `contenteditable`. Left and right are the
+    // caret keys in all four, and this Component was calling `preventDefault()` on
+    // them unconditionally, so a reader typing a value into a caption field moved the
+    // carousel instead. So the keys are answered only when nothing inside the carousel
+    // is using them, which is the discipline `ResizableHandle` follows for the same
+    // keys on the other axis: only what a Component owns is consumed.
+    const onKeyDown = (event) => {
+        const keys = ['ArrowLeft', 'ArrowRight', 'Home', 'End'];
+        if (!keys.includes(event.key))
+            return;
+        if (total <= 1)
+            return;
+        if (usesItsOwnArrows(event.target))
+            return;
+        event.preventDefault();
+        if (event.key === 'Home')
+            set(0);
+        else if (event.key === 'End')
+            set(total - 1);
+        else
+            set(at + (event.key === 'ArrowRight' ? 1 : -1));
+    };
+    useEffect(() => {
+        // A carousel that has lost slides must not leave the reader past the end, and
+        // the failure is silent: the track is translated to an offset with no slide
+        // there, so the reader is looking at blank space in a carousel that is
+        // working perfectly well.
+        if (at > total - 1)
+            set(total - 1);
+    }, [at, set, total]);
+    useEffect(() => {
+        // A control that has just been disabled must not keep the reader's focus.
+        //
+        // A disabled button is out of the tab order but it does not give up focus, so
+        // a reader who pressed "next" on the last-but-one slide is left focused on a
+        // control that can no longer answer anything: not Enter, not Space, and not
+        // the arrow keys this Component listens for on the way past. The reader is
+        // stranded inside the carousel with no working control under their fingers and
+        // no way to know why. So focus is handed to the sibling that is still live,
+        // which is the same thing a browser does when focus lands on something that
+        // has become inert.
+        const active = document.activeElement;
+        if (!(active instanceof HTMLButtonElement))
+            return;
+        if (active !== previous.current && active !== next.current)
+            return;
+        if (active.disabled !== true)
+            return;
+        const live = active === previous.current ? next.current : previous.current;
+        if (live === null || live.disabled)
+            return;
+        live.focus();
+    });
+    if (total === 0) {
+        // A region with an empty track and two dead controls is a gap rather than a
+        // state, so the empty case is authored.
+        return (_jsx("div", { "data-slot": "carousel-empty", className: cn('text-muted-foreground text-sm', className), children: empty ?? null }));
+    }
+    return (_jsxs("div", { ref: root, "data-slot": "carousel", 
+        // A carousel is a region, and it is named, because a page with two of them
+        // is a page where a reader cannot tell which set of slides they are in.
+        role: "region", "aria-roledescription": "carousel", "aria-label": label, onKeyDown: onKeyDown, className: cn('flex flex-col gap-3', className), ...props, children: [_jsx("div", { "data-slot": "carousel-viewport", className: "overflow-hidden", style: {
+                    // A track width of one slide each is what makes the translate a whole
+                    // slide, and a negative margin of the track's own width is what puts the
+                    // first slide at zero. Both are the layout rather than a value, so they
+                    // are the two numbers this Component is allowed to hold.
+                    width: `${100 / total}%`,
+                    marginInlineStart: `${-(100 * (total - 1)) / total}%`,
+                    transform: `translateX(${(at * 100) / total}%)`,
+                }, children: _jsx("div", { "data-slot": "carousel-track", 
+                    // A state change, reported with a token. There is no fade on mount and no
+                    // motion a reader did not ask for, because there is no decorative or
+                    // entrance animation in this system.
+                    className: "flex transition-transform duration-base ease-out", style: { width: `${100 * total}%` }, children: slides.map((slide, slideAt) => {
+                        const current = slideAt === at;
+                        return (_jsx("div", { "data-slot": "carousel-slide", "data-current": current ? 'true' : undefined, id: `${labelId}-slide-${slideAt}`, role: "group", "aria-label": slide.label, "aria-roledescription": "slide", "aria-hidden": current ? undefined : true, className: "w-full shrink-0", children: slide.children }, slide.id));
+                    }) }) }), total > 1 ? (_jsxs("div", { "data-slot": "carousel-controls", className: "flex items-center justify-between gap-3", children: [_jsx("button", { type: "button", ref: previous, "data-slot": "carousel-previous", "aria-label": previousLabel, disabled: atFirst, onClick: () => set(at - 1), className: cn('border-input bg-background text-foreground inline-flex size-9 items-center justify-center rounded-md border outline-none', 
+                        // The coarse-pointer floor, as a step, because these are bordered icon
+                        // buttons at the two ends of a row with a text between them and nothing
+                        // adjacent to either. Growing them pushes the position readout inward by
+                        // ten pixels, which is the whole of the cost and is the right trade: a
+                        // band on a bordered box would reach four pixels past the box on each side
+                        // into an eight pixel gap and reach nothing at all on the ends of the row.
+                        // See DESIGN.md, The coarse-pointer floor.
+                        'pointer-coarse:size-11', 'transition-colors duration-fast ease-out', 'hover:bg-accent hover:text-accent-foreground', 'focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:opacity-50'), children: _jsx(ChevronLeftIcon, { className: "size-4", "aria-hidden": "true" }) }), _jsx("p", { "data-slot": "carousel-position", "aria-live": "polite", className: "text-muted-foreground text-sm tabular-nums", children: position(at + 1, total) }), _jsx("button", { type: "button", ref: next, "data-slot": "carousel-next", "aria-label": nextLabel, disabled: atLast, onClick: () => set(at + 1), className: cn('border-input bg-background text-foreground inline-flex size-9 items-center justify-center rounded-md border outline-none', 
+                        // The coarse-pointer floor, as a step, because these are bordered icon
+                        // buttons at the two ends of a row with a text between them and nothing
+                        // adjacent to either. Growing them pushes the position readout inward by
+                        // ten pixels, which is the whole of the cost and is the right trade: a
+                        // band on a bordered box would reach four pixels past the box on each side
+                        // into an eight pixel gap and reach nothing at all on the ends of the row.
+                        // See DESIGN.md, The coarse-pointer floor.
+                        'pointer-coarse:size-11', 'transition-colors duration-fast ease-out', 'hover:bg-accent hover:text-accent-foreground', 'focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:opacity-50'), children: _jsx(ChevronRightIcon, { className: "size-4", "aria-hidden": "true" }) })] })) : (
+            // One slide is the whole content, and the position still says so rather
+            // than the reader being left to infer that there is nothing to move to.
+            _jsx("p", { "data-slot": "carousel-position", "aria-live": "polite", className: "text-muted-foreground text-sm tabular-nums", children: position(1, 1) }))] }));
+}
+/** An index inside the set, so a caller cannot move the reader past either end. */
+function clamp(value, total) {
+    if (!Number.isFinite(value))
+        return 0;
+    if (total === 0)
+        return 0;
+    return Math.min(Math.max(Math.trunc(value), 0), total - 1);
+}
+/**
+ * Whether the element a key landed in spends that key itself.
+ *
+ * Four answers and no more, because those four are the ways a slide can hold
+ * something that reads the arrow keys: a text field, a number field, a `select` and
+ * an editable region. Left and right move the caret in the first three and move the
+ * insertion point in the fourth, and `Home` and `End` move to the start and the end
+ * of the value. A scroll container answers them too, but a slide is a caller's slot
+ * and this Component cannot see whether the caller made one, so a caller who puts a
+ * horizontally scrolling element in a slide and wants the carousel to keep answering
+ * those keys stops the event at it. That is the cheaper of the two mistakes: a key
+ * that does nothing inside a text field is invisible, and a key that moves the
+ * carousel while a reader is typing is not.
+ */
+function usesItsOwnArrows(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.isContentEditable)
+        return true;
+    return (target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        target instanceof HTMLSelectElement);
+}
+export { Carousel };

package/dist/components/ui/chart-frame.d.ts

@@ -0,0 +1,216 @@
+import type { ComponentProps, ReactNode } from 'react';
+/**
+ * The one of the five series roles a series is drawn in.
+ *
+ * These are the token names rather than a Prism-specific alias, and that is the
+ * whole contract: `chart-1` through `chart-5` is the only five-way colour set
+ * the token contract publishes, so a consumer who wants a particular series in a
+ * particular colour names the role and gets it in every pack and both modes. A
+ * wider type here would be a wider palette, and a wider palette is a second
+ * source of truth for something the tokens already own.
+ */
+export type ChartColor = 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5';
+/**
+ * How the series are drawn.
+ *
+ * Two marks, and the split is about what the reader compares. A line is for a
+ * value that moves continuously across the categories, where the shape between
+ * two points is the point. A bar is for a value read against a baseline, where
+ * the length is the measurement and the gap between two bars means nothing. A
+ * consumer that draws a bar chart of weekly signups is drawing the right mark
+ * and saying the wrong thing; the bars invite a comparison of lengths that only
+ * means something when the value starts at zero.
+ */
+export type ChartMark = 'line' | 'bar';
+/** One series: a name, the role it is drawn in, and one value per category. */
+export type ChartSeries = {
+    /**
+     * A stable key for the series.
+     *
+     * Required, because the same series is a line, a dot, a legend entry and a
+     * table column, and a reader whose focus is in the table must land in the
+     * column for the series they were reading. Keyed on the caller's own id rather
+     * than on the position in the array, so reordering the series does not move a
+     * reader's focus to a different series.
+     */
+    id: string;
+    /**
+     * The name of the series, in the caller's words.
+     *
+     * It appears in the legend, in the table's column head, and nowhere else. This
+     * is the string that makes a colour a name: a chart drawn in `chart-2` and
+     * `chart-5` is unreadable to anyone who cannot separate teal from red, and
+     * `chart-2` measures 2.49:1 against a light card, which is a second reason the
+     * legend is not optional here.
+     */
+    label: string;
+    /**
+     * The role this series is drawn in.
+     *
+     * The caller assigns it and the Component never does, because a series colour
+     * is a claim about what a thing is: the revenue line is the brand hue and the
+     * churn line is the alarming one, and a Component that picked by position
+     * would be making that claim on the caller's behalf and getting it wrong on
+     * every chart after the first.
+     */
+    color: ChartColor;
+    /**
+     * One value per category, in the order the categories are given.
+     *
+     * A value may be `null` for a gap, and a series shorter than the categories
+     * is padded with gaps rather than shifted: a value under the wrong category is
+     * a wrong answer that looks right, and it is the failure this shape is most
+     * likely to produce. A value longer than the categories is ignored, and it does
+     * not set the vertical scale either, because a value with no category has
+     * nowhere to be drawn.
+     */
+    values: readonly (number | null)[];
+};
+/** The props the ChartFrame accepts. */
+export interface ChartFrameProps extends Omit<ComponentProps<'figure'>, 'children' | 'title'> {
+    /**
+     * The categories along the horizontal axis, in order. The caller's words.
+     *
+     * A month name, a release name, a region name, a build number. This is the
+     * array that makes a chart a claim about the caller's own domain rather than
+     * about a design system, which is why it is a prop and not a date range the
+     * Component generates: a chart that named its own months would be wrong in
+     * every product but the one it was written for.
+     */
+    categories: readonly string[];
+    /** The series, each with the role it is drawn in. */
+    series: readonly ChartSeries[];
+    /**
+     * The mark the series are drawn with. @defaultValue 'line'
+     *
+     * Every series in one chart takes the same mark. Mixing them is a chart about
+     * two different things, and a reader cannot tell which series the mark is
+     * making a claim about.
+     */
+    mark?: ChartMark;
+    /**
+     * The accessible name of the figure.
+     *
+     * Required rather than defaulted, because two charts on a dashboard are two
+     * figures a reader cannot tell apart, and because the name is the only thing
+     * that states what is being plotted. A figure named "Chart" is a Component
+     * shipping a sentence about a product it knows nothing about.
+     */
+    label: string;
+    /** The visible heading above the plot, when the surrounding layout has none. */
+    title?: ReactNode;
+    /**
+     * The words the data table is captioned with.
+     *
+     * Required, and separate from `label`, because the two are read at different
+     * points and mean different things: the name identifies the figure, the
+     * caption identifies the table a reader has just navigated into. Collapsing
+     * them would leave a caption that names the figure rather than the numbers.
+     */
+    tableCaption: ReactNode;
+    /**
+     * The head of the category column in the data table.
+     *
+     * Required for the same reason the series names are: the table's first column
+     * holds the caller's categories and a column of values with no head is a
+     * column of numbers a reader has to guess the meaning of. It is the word for
+     * whatever the categories are: "Month", "Region", "Build".
+     */
+    categoryHeading: string;
+    /**
+     * Whether the data table is seen as well as announced. @defaultValue 'visible'
+     *
+     * The table is always in the document either way. `hidden` moves it to
+     * `sr-only`, so it is still announced, still reachable by a screen reader's
+     * table navigation and still findable by the reader's own find-in-page; what
+     * changes is whether a sighted reader can see it. A consumer with a dense
+     * dashboard, where five visible tables under five plots is more surface than
+     * the page can carry, passes `hidden` and keeps the representation. A consumer
+     * whose readers are looking up exact figures leaves it visible, because a table
+     * nobody can see is a table a reader does not know to ask for.
+     */
+    table?: 'visible' | 'hidden';
+    /**
+     * The words for a value on the vertical axis, given the number.
+     *
+     * Defaults to the number itself, and deliberately not shared with the table:
+     * an axis has room for four characters and a table has room for a currency
+     * symbol, so the two jobs want different renderings and a consumer that
+     * compacts the axis wants the table to keep the exact figure. Passing `format`
+     * alone is the normal case and is exactly the split these two jobs want.
+     */
+    format?: (value: number) => string;
+    /**
+     * The words for a value in the data table, given the number.
+     *
+     * Defaults to the number itself, so a table of currency is a `tableFormat` away
+     * and a table of raw counts needs nothing.
+     */
+    tableFormat?: (value: number) => string;
+    /**
+     * What a reader is told when there is nothing to plot.
+     *
+     * An empty chart is a state a caller reaches on a first load, on a filter that
+     * matched nothing and on a range with no events in it, and an empty plot box
+     * with an axis and no marks reads as a broken chart rather than as an answer.
+     * The words are the caller's, because only the caller knows whether the answer
+     * is "no data yet" or "no results for this filter".
+     */
+    empty?: ReactNode;
+    /** Layout only, exactly as on every Component. */
+    className?: string;
+}
+/**
+ * A chart: the frame every chart in a product shares, and the numbers behind it.
+ *
+ * **One frame is the design.** Five charts that each draw their own axes are
+ * five sets of numbers that do not line up, and a dashboard where two plots
+ * disagree by six pixels looks broken in a way nobody can name, because the
+ * reader cannot see the six pixels: they can only see that the two charts do not
+ * agree. So the axis gutter, the field's height, the gridline spacing and the
+ * category row are all fixed here, and two charts in a row have the same plot box
+ * whatever their data says. The gutter in particular is a fixed width rather than
+ * a width that fits the longest label, because a gutter that grows with the
+ * numbers is the mechanism by which two charts stop aligning.
+ *
+ * **The colour is assigned by the caller and drawn from the token contract.**
+ * `chart-1` through `chart-5` arrive as the five semantic utilities, and there
+ * is no hex, no ramp step and no `rgb()` anywhere in this Component. A series
+ * colour is a claim about what a thing is, so the Component that knows nothing
+ * about the caller's product has no business choosing one.
+ *
+ * **The table is part of the frame, not a prop beside it, and that is the other
+ * half of the design.** A chart whose accessible representation is a sibling
+ * prop is a chart whose table a consumer wrote once and updated when the data
+ * changed, which is to say a chart whose table says last quarter. Here the marks
+ * and the cells are two renderings of one `series` array, so they cannot drift:
+ * there is no second copy to fall behind. The table is always in the document,
+ * and `table` decides whether it is also seen.
+ *
+ * **The legend is always drawn.** It is the only place the series-to-colour
+ * assignment is stated in words, and it is not optional because two of the five
+ * roles measure below 3:1 against a light card: `chart-2` at 2.49:1 and
+ * `chart-3` at 2.15:1 in the default pack. A mark in either is found by its
+ * position and its shape, not by its colour, so the name beside it is what makes
+ * it a series rather than a shape. Past about three series, hue is the only
+ * channel left and the table is the answer, which is a fact about the data and
+ * not about this Component.
+ *
+ * **It is a server Component.** No hook, no state, no effect and no event
+ * handler: the plot is arithmetic over props and the table is a table. A chart
+ * that animated its draw-in would be refused by this system's motion rules, and
+ * the one motion here is a bar resizing when its value changes, which is state
+ * feedback and is the only kind this system allows.
+ *
+ * **What this is not.** There is no scale beyond the one described above, no
+ * tick generation to choose, no hover tooltip, no crosshair, no zoom, no
+ * stacking, no curve interpolation, and no draw-in animation. A tooltip would be
+ * a hover affordance over a picture, and a picture a reader cannot query is the
+ * failure the table exists to prevent, so the exact value is answered by the
+ * table rather than by a surface that appears under a pointer. A consumer that
+ * needs any of those is reaching for a charting library, and this Component is
+ * the frame that library's marks should sit in rather than the library.
+ */
+declare function ChartFrame({ categories, series, mark, label, title, tableCaption, categoryHeading, table, format, tableFormat, empty, className, ...props }: ChartFrameProps): import("react").JSX.Element;
+export { ChartFrame };
+//# sourceMappingURL=chart-frame.d.ts.map

package/dist/components/ui/chart-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-frame.d.ts","sourceRoot":"","sources":["../../../src/components/ui/chart-frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAatD;;;;;;;;;GASG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAElF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,KAAK,CAAA;AAEtC,+EAA+E;AAC/E,MAAM,MAAM,WAAW,GAAG;IACxB;;;;;;;;OAQG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;;;;;;OAQG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;OAQG;IACH,KAAK,EAAE,UAAU,CAAA;IACjB;;;;;;;;;OASG;IACH,MAAM,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;CACnC,CAAA;AAED,wCAAwC;AACxC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC3F;;;;;;;;OAQG;IACH,UAAU,EAAE,SAAS,MAAM,EAAE,CAAA;IAC7B,qDAAqD;IACrD,MAAM,EAAE,SAAS,WAAW,EAAE,CAAA;IAC9B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,gFAAgF;IAChF,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;;;;OAOG;IACH,YAAY,EAAE,SAAS,CAAA;IACvB;;;;;;;OAOG;IACH,eAAe,EAAE,MAAM,CAAA;IACvB;;;;;;;;;;;OAWG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC5B;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAkKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,iBAAS,UAAU,CAAC,EAClB,UAAU,EACV,MAAM,EACN,IAAa,EACb,KAAK,EACL,KAAK,EACL,YAAY,EACZ,eAAe,EACf,KAAiB,EACjB,MAAiB,EACjB,WAAsB,EACtB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,+BAqTjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}