@stack-spot/citric-react 0.1.0

package/dist/components/Select/types.d.ts

@@ -0,0 +1,118 @@
+import { HTMLExtension, WithColorScheme } from '../../types.js';
+interface CommonSelectProps<T> extends WithColorScheme {
+    /**
+     * All the items (options) to render.
+     */
+    options: T[];
+    /**
+     * If the value is undefined or "", an empty option is rendered. This option will disappear as soon as a valid option is selected, unless
+     * "required" is set to false.
+     */
+    value?: T;
+    /**
+     * Called whenever the selected option changes.
+     * @param value the currently selected item.
+     */
+    onChange?: (value: T | undefined) => void;
+    /**
+     * A function to render the item label.
+     * @example
+     * `(option) => option.name`
+     * @default "the item's toString() result."
+     * @param option the item to render.
+     * @returns a React Node to render.
+     */
+    renderLabel?: (value: T) => string;
+    /**
+     * A function to render the item value, a unique identifier for the option.
+     * @example
+     * `(option) => option.id`
+     * @default "if the item is a string or a number, the stringified item. Otherwise, undefined."
+     * @param option the item to compute a key for.
+     * @returns a string key.
+     */
+    renderKey?: (value: T) => string | number | undefined;
+    /**
+     * Whether or not this input is required. This is also used to figure out if an empty option should be rendered or not.
+     *
+     * An empty option is rendered whenever "required" is false or "value" is "" or undefined.
+     * @default true
+     */
+    required?: boolean;
+    /**
+     * Whether or not to show a loading feedback to the user.
+     *
+     * Attention: selects that are loading should normally also be disabled.
+     */
+    loading?: boolean;
+    /**
+     * Whether or not this field is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Function to run when the element receives focus. If the native select element received focus, a Select element is the target, otherwise
+     * the wrapping div element is.
+     *
+     * If `rich` is false, the target will always be a select element.
+     */
+    onFocus?: React.EventHandler<React.FocusEvent<HTMLDivElement | HTMLSelectElement>>;
+    /**
+     * Function to run when the element loses focus. If the native select element received focus, a Select element is the target, otherwise
+     * the wrapping div element is.
+     *
+     * If `rich` is false, the target will always be a select element.
+     */
+    onBlur?: React.EventHandler<React.FocusEvent<HTMLDivElement | HTMLSelectElement>>;
+    /**
+     * If the type is "simple", the native select element is rendered.
+     *
+     * If the type is "rich", a custom select is rendered and more options are enabled, like "searchable".
+     *
+     * @default 'rich'
+     */
+    type?: 'simple' | 'rich';
+}
+export interface SimpleSelectProps<T> extends CommonSelectProps<T> {
+    type: 'simple';
+}
+export interface RichSelectProps<T> extends CommonSelectProps<T> {
+    type?: 'rich';
+    /**
+     * Whether or not to render a search field. The search is based on the value returned by `renderLabel`.
+     *
+     * @default false
+     */
+    searchable?: boolean;
+    /**
+     * A function to render the option in the selectable list.
+     *
+     * The `renderLabel` function is used if this is not provided.
+     * @param value the option.
+     * @returns the React Node.
+     */
+    renderOption?: (value: T) => React.ReactNode;
+    /**
+     * A function to render the selected option in the header.
+     *
+     * The `renderOption` function is used if this is not provided.
+     * @param value the option.
+     * @returns the React Node.
+     */
+    renderHeader?: (value: T | undefined) => React.ReactNode;
+    /**
+     * The maximum height of the options list in pixels.
+     *
+     * @default 300
+     */
+    maxHeight?: number;
+    /**
+     * Whether or not to show the arrow inside the select's header.
+     * @default true
+     */
+    showArrow?: boolean;
+}
+export type BaseSelectProps<T> = SimpleSelectProps<T> | RichSelectProps<T>;
+export type SelectProps<T> = HTMLExtension<'div', BaseSelectProps<T>, 'onChange' | 'children'>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/Select/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE5D,UAAU,iBAAiB,CAAC,CAAC,CAAE,SAAQ,eAAe;IACpD;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;IAC1C;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;IACnC;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACtD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC;IACnF;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC;IAClF;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAAE,SAAQ,iBAAiB,CAAC,CAAC,CAAC;IAChE,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,iBAAiB,CAAC,CAAC,CAAC;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IACzD;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAE1E,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,aAAa,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,CAAA"}

package/dist/components/Select/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/Select/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":""}

package/dist/components/SelectBox.d.ts

@@ -0,0 +1,65 @@
+import { HTMLExtension, WithColorPalette, WithColorScheme } from '../types.js';
+export interface SelectBoxLabel {
+    icon?: React.ReactElement;
+    title: string;
+    description?: string;
+}
+export interface CommonSelectBoxProps<T> extends WithColorPalette, WithColorScheme {
+    /**
+     * If multiple is true, checkboxes will be rendered instead of radio buttons.
+     *
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * The name for all checkboxes or radio buttons.
+     */
+    name?: string;
+    /**
+     * The options to show as select boxes.
+     */
+    options: T[];
+    /**
+     * A function that returns the data to render a select box for an option.
+     *
+     * @default "extracts the title by converting the option to a string"
+     */
+    renderLabel?: (option: T) => SelectBoxLabel;
+    /**
+     * A function that returns a unique identifier for an option.
+     *
+     * @default "if the option is a string, uses it as the key. Otherwise, the key won't be specified."
+     */
+    renderKey?: (option: T) => string | number | undefined;
+    /**
+     * A function that receives an option and decides if it's disabled or not.
+     */
+    isDisabled?: (option: T) => boolean;
+    /**
+     * Whether to render a row (horizontal) or a column (vertical).
+     *
+     * @default 'horizontal'
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * The background color level.
+     *
+     * @default 300
+     */
+    bgLevel?: 300 | 400 | 500 | 600 | 700;
+}
+interface CheckboxProps<T> extends CommonSelectBoxProps<T> {
+    multiple: true;
+    value?: T[];
+    onChange?: (value: T[]) => void;
+}
+interface RadioProps<T> extends CommonSelectBoxProps<T> {
+    multiple?: false;
+    value?: T;
+    onChange?: (value: T) => void;
+}
+export type BaseSelectBoxProps<T> = RadioProps<T> | CheckboxProps<T>;
+export type SelectBoxProps<T> = HTMLExtension<'div', BaseSelectBoxProps<T>, 'onChange'>;
+export declare function SelectBox<T>({ multiple, name, value, options, onChange, renderLabel, renderKey, isDisabled, className, style, direction, bgLevel, colorPalette, colorScheme, ...props }: SelectBoxProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SelectBox.d.ts.map

package/dist/components/SelectBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectBox.d.ts","sourceRoot":"","sources":["../../src/components/SelectBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAK3E,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,CAAE,SAAQ,gBAAgB,EAAE,eAAe;IAChF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,cAAc,CAAC;IAC5C;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACvC;AAED,UAAU,aAAa,CAAC,CAAC,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IACxD,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;CACjC;AAED,UAAU,UAAU,CAAC,CAAC,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAA;AAEpE,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,aAAa,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAA;AAEvF,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAC3B,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAqD,EACrD,SAA4B,EAC5B,UAAU,EACV,SAAS,EACT,KAAK,EACL,SAAS,EACT,OAAO,EACP,YAAY,EACZ,WAAW,EACX,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,CAAC,CAAC,2CA2CnB"}

package/dist/components/SelectBox.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { useMemo } from 'react';
+import { defaultRenderKey, defaultRenderLabel } from '../utils/options.js';
+import { CitricComponent } from './CitricComponent.js';
+import { layout } from './layout.js';
+export function SelectBox({ multiple, name, value, options, onChange, renderLabel = o => ({ title: defaultRenderLabel(o) }), renderKey = defaultRenderKey, isDisabled, className, style, direction, bgLevel, colorPalette, colorScheme, ...props }) {
+    const items = useMemo(() => {
+        const valueAsArray = value ? (Array.isArray(value) ? value : [value]) : [];
+        const valueKeys = valueAsArray.map(renderKey);
+        return options.map((o) => {
+            const key = renderKey(o);
+            const label = renderLabel(o);
+            return (_jsxs(CitricComponent, { tag: "label", component: "select-box", className: bgLevel ? `bg-${bgLevel}` : undefined, children: [_jsx("input", { type: multiple ? 'checkbox' : 'radio', name: name, value: key, checked: value ? valueKeys.includes(key) : undefined, disabled: isDisabled?.(o), onChange: onChange ? (e) => {
+                            if (multiple) {
+                                onChange(e.target.checked ? [...valueAsArray, o] : valueAsArray.filter(v => renderKey(v) !== key));
+                            }
+                            else {
+                                onChange(o);
+                            }
+                        } : undefined }), _jsxs("div", { className: "option", children: [label.icon, _jsx("p", { className: "title", children: label.title }), label.description && _jsx("p", { className: "description", children: label.description })] })] }, key));
+        });
+    }, [options, value, name, multiple, bgLevel]);
+    return (_jsx("div", { "data-color-palette": colorPalette, "data-color-scheme": colorScheme, className: listToClass([className, direction === 'vertical' ? layout.column : layout.row]), style: { gap: '5px', ...style }, ...props, children: items }));
+}
+//# sourceMappingURL=SelectBox.js.map

package/dist/components/SelectBox.js.map

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

package/dist/components/Skeleton.d.ts

@@ -0,0 +1,30 @@
+import { HTMLExtension } from '../types.js';
+export interface BaseSkeletonProps {
+    /**
+     * The skeleton's appearance.
+     *
+     * @default 'square'
+     */
+    appearance?: 'square' | 'circle';
+    /**
+     * The skeleton's width.
+     *
+     * @default "the available width if 'square', 50px if 'circle'".
+     */
+    width?: string;
+    /**
+     * The skeleton's width.
+     *
+     * @default "32px if 'square', 50px if 'circle'".
+     */
+    height?: string;
+    /**
+     * The background color level.
+     *
+     * @default 500
+     */
+    bgLevel?: 400 | 500 | 600;
+}
+export type SkeletonProps = HTMLExtension<'div', BaseSkeletonProps, 'children'>;
+export declare const Skeleton: ({ appearance, className, style, width, height, bgLevel, ...props }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Skeleton.d.ts.map

package/dist/components/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/components/Skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAGxC,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CAC3B;AAED,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,KAAK,EAAE,iBAAiB,EAAE,UAAU,CAAC,CAAA;AAE/E,eAAO,MAAM,QAAQ,GAAI,oEAAoE,aAAa,4CAOtG,CAAA"}

package/dist/components/Skeleton.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { CitricComponent } from './CitricComponent.js';
+export const Skeleton = ({ appearance, className, style, width, height, bgLevel, ...props }) => _jsx(CitricComponent, { tag: "div", component: "skeleton", className: listToClass([appearance, bgLevel && `bg-${bgLevel}`, className]), style: { width, height, ...style }, ...props });
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../src/components/Skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA+BnD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,EAAiB,EAAE,EAAE,CAC5G,KAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,OAAO,IAAI,MAAM,OAAO,EAAE,EAAE,SAAS,CAAC,CAAC,EAC3E,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,KAC9B,KAAK,GACT,CAAA"}

package/dist/components/Slider.d.ts

@@ -0,0 +1,32 @@
+import { HTMLExtension, WithColorPalette, WithColorScheme } from '../types.js';
+export interface BaseSliderProps extends WithColorScheme, WithColorPalette {
+    value: number;
+    /**
+     * The minimum value in the numeric range.
+     *
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The maximum value in the numeric range.
+     *
+     * @default 100
+     */
+    max?: number;
+    onChange: (value: number) => void;
+    /**
+     * When should we render the current value of the input?
+     *
+     * @default 'always'
+     */
+    showValue?: 'always' | 'hover' | 'never';
+    /**
+     * A function to customize how the value of the input is rendered.
+     *
+     * @default "{value}% if 'min' and 'max' are not provided. {value} otherwise."
+     */
+    renderValue?: (value: number) => string;
+}
+export type SliderProps = HTMLExtension<'input', BaseSliderProps, 'children' | 'type' | 'value' | 'onChange'>;
+export declare const Slider: ({ value, onChange, min, max, style, showValue, renderValue, colorPalette, colorScheme, className, ...props }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Slider.d.ts.map

package/dist/components/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/components/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI3E,MAAM,WAAW,eAAgB,SAAQ,eAAe,EAAE,gBAAgB;IACxE,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;IACzC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC;AAED,MAAM,MAAM,WAAW,GAAI,aAAa,CAAC,OAAO,EAAE,eAAe,EAAE,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC,CAAA;AAE9G,eAAO,MAAM,MAAM,GACjB,8GAA8G,WAAW,4CAsC1H,CAAA"}

package/dist/components/Slider.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { applyCSSVariable } from '../utils/css.js';
+import { CitricComponent } from './CitricComponent.js';
+export const Slider = ({ value, onChange, min, max, style, showValue, renderValue, colorPalette, colorScheme, className, ...props }) => {
+    const percent = Math.floor((value / ((max ?? 100) - (min ?? 0))) * 100);
+    style = applyCSSVariable(style, 'percent', percent);
+    const rangeProps = {
+        value,
+        min,
+        max,
+        onChange: (e) => onChange(parseInt(e.target.value)),
+        ...props,
+    };
+    return showValue === 'never'
+        ? _jsx(CitricComponent, { tag: "input", type: "range", component: "slider", style: style, className: className, colorPalette: colorPalette, colorScheme: colorScheme, ...rangeProps })
+        : (_jsxs(CitricComponent, { tag: "div", component: "labeled-slider", style: style, colorPalette: colorPalette, colorScheme: colorScheme, className: listToClass([className, showValue === 'hover' && 'value-on-hover']), children: [_jsx("input", { type: "range", ...rangeProps }), _jsx("div", { className: "value", children: renderValue ? renderValue(value) : `${value}${min === undefined && max === undefined ? '%' : ''}` })] }));
+};
+//# sourceMappingURL=Slider.js.map

package/dist/components/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../src/components/Slider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAiCnD,MAAM,CAAC,MAAM,MAAM,GAAG,CACpB,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,KAAK,EAAe,EACzH,EAAE;IACF,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAA;IACvE,KAAK,GAAG,gBAAgB,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,CAAA;IACnD,MAAM,UAAU,GAAG;QACjB,KAAK;QACL,GAAG;QACH,GAAG;QACH,QAAQ,EAAE,CAAC,CAAsC,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACxF,GAAG,KAAK;KACT,CAAA;IAED,OAAO,SAAS,KAAK,OAAO;QAC1B,CAAC,CAAC,KAAC,eAAe,IAChB,GAAG,EAAC,OAAO,EACX,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,KACpB,UAAU,GACd;QACF,CAAC,CAAC,CACA,MAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,gBAAgB,EAC1B,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,SAAS,KAAK,OAAO,IAAI,gBAAgB,CAAC,CAAC,aAE9E,gBAAO,IAAI,EAAC,OAAO,KAAK,UAAU,GAAI,EACtC,cAAK,SAAS,EAAC,OAAO,YACnB,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,GAAG,KAAK,SAAS,IAAI,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,GAC9F,IACU,CACnB,CAAA;AACL,CAAC,CAAA"}

package/dist/components/SmartTable.d.ts

@@ -0,0 +1,87 @@
+import { BaseTableProps, SortingDirection, TableProps } from './Table.js';
+export type TableColumn<T> = {
+    /**
+     * A unique identifier for the column.
+     */
+    key: string;
+    /**
+     * A label to use as the column's header.
+     *
+     * If not provided, the key will be used.
+     */
+    label?: React.ReactNode;
+    /**
+     * A custom render function. It receives the item (row) and must return a React node.
+     *
+     * If not provided, the value of `item[key]` will be converted to a string and used. If it's undefined, an empty string is rendered.
+     *
+     * @param item the current item.
+     * @returns the React Node to render.
+     */
+    render?: (item: T) => React.ReactNode;
+    /**
+     * What to do when the header is clicked (sorting)
+     */
+    onSort?: (value: SortingDirection | undefined) => void;
+    /**
+     * Which is the current direction of the sorting? Only relevant if 'onSort' is set.
+     *
+     * @default 'desc'
+     */
+    direction?: SortingDirection;
+    /**
+     * Additional properties for the "th" corresponding to this column.
+     */
+    th?: Omit<JSX.IntrinsicElements['th'], 'children'>;
+    /**
+     * Additional properties for the "td" corresponding to this column.
+     */
+    td?: Omit<JSX.IntrinsicElements['td'], 'children'>;
+};
+interface ExtraSmartTableProps<T extends Record<string, any>> {
+    /**
+     * An array where each item is a row in the table.
+     */
+    data: T[];
+    /**
+     * A function to generate a unique key for each item. If not provided, the item's index will be used.
+     * @param item
+     * @returns a unique key
+     */
+    keygen?: (item: T) => React.Key;
+    /**
+     * The columns to display in the table.
+     *
+     * Attention: always save your columns with `useMemo` to avoid unnecessary rerenders.
+     */
+    columns: TableColumn<T>[];
+    /**
+     * If set, an extra row and column for each item is rendered. The extra row is collapsed by default and can be expanded through a button
+     * that is placed in the extra column.
+     *
+     * The extra row is, effectively, an accordion. The content of this accordion is defined by whatever this function returns.
+     *
+     * @param item the current item.
+     * @returns the React Node to render.
+     */
+    renderAccordion?: (item: T) => React.ReactNode;
+    /**
+     * What should make the accordions expand or contract? A click on a button in the last column or a click anywhere in the row?
+     *
+     * Only valid if `renderAccordion` is set.
+     *
+     * @default 'button'
+     */
+    accordionTrigger?: 'button' | 'row';
+    /**
+     * The maximum height for accordion rows.
+     *
+     * @default '200px'
+     */
+    accordionMaxHeight?: string;
+}
+export type BaseSmartTableProps<T extends Record<string, any>> = BaseTableProps & ExtraSmartTableProps<T>;
+export type SmartTableProps<T extends Record<string, any>> = Omit<TableProps, 'children'> & ExtraSmartTableProps<T>;
+export declare function SmartTable<T extends Record<string, any>>({ data, keygen, columns, renderAccordion, accordionTrigger, accordionMaxHeight, id, ...props }: SmartTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SmartTable.d.ts.map

package/dist/components/SmartTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartTable.d.ts","sourceRoot":"","sources":["../../src/components/SmartTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAS,UAAU,EAAU,MAAM,SAAS,CAAA;AAErF,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;IAC3B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,KAAK,IAAI,CAAC;IACvD;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;IACnD;;OAEG;IACH,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;CACpD,CAAA;AAED,UAAU,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAC1D;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC;IAChC;;;;OAIG;IACH,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACpC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,cAAc,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAEzG,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAEnH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACtD,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC,2CAwDnH"}

package/dist/components/SmartTable.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useMemo } from 'react';
+import { Table, Th, Tr } from './Table.js';
+export function SmartTable({ data, keygen, columns, renderAccordion, accordionTrigger, accordionMaxHeight, id, ...props }) {
+    id = useMemo(() => id || `${Math.random()}`, [id]);
+    const headers = useMemo(() => columns.map((c) => (_createElement(Th, { ...c.th, key: c.key, onSort: c.onSort, direction: c.direction, tabIndex: c.onSort ? 0 : undefined }, c.label ?? c.key))), [columns]);
+    const rows = useMemo(() => data.map((item, index) => {
+        const key = keygen ? keygen(item) : index;
+        const accordionContent = renderAccordion?.(item);
+        const row = (_jsxs(Tr, { accordionTrigger: accordionContent ? accordionTrigger : undefined, children: [columns.map(c => _createElement("td", { ...c.td, key: c.key }, c.render ? c.render(item) : (item[c.key] || ''))), renderAccordion && (_jsx("td", { children: accordionContent && (_jsx("input", { type: "checkbox", "aria-controls": `${id}-${key}`, onKeyDown: e => e.key === 'Enter' && e.target instanceof HTMLElement && e.target.click() })) }))] }, key));
+        return renderAccordion ? (_jsxs("tbody", { children: [row, _jsx(Tr, { id: `${id}-${key}`, accordion: true, accordionMaxHeight: accordionMaxHeight, children: _jsx("td", { colSpan: columns.length + 1, children: _jsx("div", { children: accordionContent }) }) })] }, `${key}-group`)) : row;
+    }), [columns, data, !!renderAccordion, accordionTrigger]);
+    return (_jsxs(Table, { id: id, accordionRows: !!renderAccordion, ...props, children: [_jsx("thead", { children: _jsxs("tr", { children: [headers, renderAccordion && _jsx("th", {})] }) }), renderAccordion ? rows : _jsx("tbody", { children: rows })] }));
+}
+//# sourceMappingURL=SmartTable.js.map

package/dist/components/SmartTable.js.map

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

package/dist/components/Stepper.d.ts

@@ -0,0 +1,52 @@
+import { HTMLExtension } from '../types.js';
+import { BaseTabsProps } from './Tabs/types.js';
+export interface BaseStepperProps<Key extends string> extends BaseTabsProps<Key> {
+    /**
+     * Should we show buttons to control the step we are in?
+     *
+     * Set it to false to not show any buttons, set it to true to show a default set of buttons, set it to an object to customize the buttons.
+     *
+     * @default true
+     */
+    buttons?: boolean | {
+        /**
+         * The text for the previous button.
+         */
+        previous?: string;
+        /**
+         * The text for the next button.
+         */
+        next?: string;
+        /**
+         * The text for the finish button.
+         */
+        finish?: string;
+        /**
+         * The text for the cancel button.
+         */
+        cancel?: string;
+        /**
+         * When set, instead of not showing a previous button in the first step, it shows a cancel button. This function is run whenever the
+         * cancel button is clicked.
+         */
+        onCancel?: () => void;
+        /**
+         * An additional function to run whenever the previous button is clicked. Return false to prevent the default action (going to the
+         * previous step).
+         */
+        onPrevious?: (tab: Key) => void | boolean;
+        /**
+         * An additional function to run whenever the next button is clicked. Return false to prevent the default action (going to the
+         * next step).
+         */
+        onNext?: (tab: Key) => void | boolean;
+        /**
+         * When set, instead of not showing a next button in the final step, it shows a finish button. This function is run whenever the
+         * finish button is clicked.
+         */
+        onFinish?: () => void;
+    };
+}
+export type StepperProps<Key extends string> = HTMLExtension<'div', BaseStepperProps<Key>, 'children' | 'value' | 'onChange'>;
+export declare function Stepper<Key extends string>({ tabs: initialTabs, controller: ctrl, value, onChange, buttons, className, ...props }: StepperProps<Key>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Stepper.d.ts.map

package/dist/components/Stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/components/Stepper.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAKxC,OAAO,EAAE,aAAa,EAAO,MAAM,cAAc,CAAA;AAGjD,MAAM,WAAW,gBAAgB,CAAC,GAAG,SAAS,MAAM,CAAE,SAAQ,aAAa,CAAC,GAAG,CAAC;IAC9E;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG;QAClB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB;;;WAGG;QACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC;QAC1C;;;WAGG;QACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC;QACtC;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;KACvB,CAAC;CACH;AAED,MAAM,MAAM,YAAY,CAAC,GAAG,SAAS,MAAM,IAAI,aAAa,CAAC,KAAK,EAAE,gBAAgB,CAAC,GAAG,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC,CAAA;AAQ7H,wBAAgB,OAAO,CAAC,GAAG,SAAS,MAAM,EACxC,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAc,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,CAAC,GAAG,CAAC,2CA0DjH"}

package/dist/components/Stepper.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Button } from './Button.js';
+import { Column, Row } from './layout.js';
+import { Tabs } from './Tabs/index.js';
+import { TabController } from './Tabs/TabController.js';
+import { findSelectedIndex } from './Tabs/utils.js';
+function getTabsWithDisabled(tabs, value) {
+    let index = findSelectedIndex(tabs, value ?? '');
+    if (index < 0)
+        index = 0;
+    return tabs.map((t, i) => ({ ...t, disabled: i > index }));
+}
+export function Stepper({ tabs: initialTabs, controller: ctrl, value, onChange, buttons = true, className, ...props }) {
+    const controller = useMemo(() => ctrl ?? new TabController(initialTabs.map(t => t.key), value || initialTabs[0]?.key), []);
+    const [tabs, setTabs] = useState(getTabsWithDisabled(initialTabs, value));
+    const [selectedIndex, setSelectedIndex] = useState(findSelectedIndex(tabs, controller.getValue()));
+    const t = useTranslate(dictionary);
+    useEffect(() => controller.onChange((v) => {
+        setSelectedIndex(findSelectedIndex(tabs, v));
+    }), [tabs]);
+    useEffect(() => controller.onChange((value) => {
+        setTabs(getTabsWithDisabled(initialTabs, value));
+    }), []);
+    const onPrevious = useCallback(() => {
+        controller.previous();
+        if (typeof buttons === 'object')
+            buttons.onPrevious?.(controller.getValue());
+    }, []);
+    const onNext = useCallback(() => {
+        controller.next();
+        if (typeof buttons === 'object')
+            buttons.onNext?.(controller.getValue());
+    }, []);
+    return buttons ? (_jsxs(Column, { ...props, className: className, gap: "20px", children: [_jsx(Tabs, { tabs: tabs, controller: controller, value: value, onChange: onChange, className: "stepper" }), _jsxs(Row, { justifyContent: (typeof buttons !== 'object' || !buttons.onCancel) && selectedIndex === 0 ? 'end' : 'space-between', children: [selectedIndex === 0 && typeof buttons === 'object' && buttons.onCancel && (_jsx(Button, { onClick: buttons.onCancel, colorScheme: "inverse", appearance: "outlined", children: buttons.cancel || t.cancel })), selectedIndex > 0 && buttons && (_jsx(Button, { onClick: onPrevious, colorScheme: "inverse", appearance: "outlined", children: (typeof buttons === 'object' && buttons.previous) || t.previous })), selectedIndex < tabs.length - 1 && buttons && (_jsx(Button, { onClick: onNext, children: (typeof buttons === 'object' && buttons.next) || t.next })), selectedIndex === tabs.length - 1 && typeof buttons === 'object' && buttons.onFinish && (_jsx(Button, { onClick: buttons.onFinish, children: buttons.finish || t.finish }))] })] })) : _jsx(Tabs, { tabs: tabs, controller: controller, value: value, onChange: onChange, className: listToClass([className, 'stepper']), ...props });
+}
+const dictionary = {
+    en: {
+        cancel: 'Cancel',
+        previous: 'Previous',
+        next: 'Next',
+        finish: 'Finish',
+    },
+    pt: {
+        cancel: 'Cancelar',
+        previous: 'Anterior',
+        next: 'Próximo',
+        finish: 'Finalizar',
+    },
+};
+//# sourceMappingURL=Stepper.js.map

package/dist/components/Stepper.js.map

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

package/dist/components/Switch.d.ts

@@ -0,0 +1,10 @@
+import { HTMLExtension, WithColorScheme } from '../types.js';
+interface Props extends WithColorScheme {
+    value?: boolean;
+    onChange?: (value: boolean) => void;
+    children?: React.ReactNode;
+}
+export type SwitchProps = HTMLExtension<'input', Props, 'type'>;
+export declare const Switch: ({ value, onChange, children, className, style, ...props }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Switch.d.ts.map

package/dist/components/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/components/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAGzD,UAAU,KAAM,SAAQ,eAAe;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,MAAM,WAAW,GAAG,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;AAE/D,eAAO,MAAM,MAAM,GAAI,2DAA2D,WAAW,4CAiB5F,CAAA"}

package/dist/components/Switch.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CitricComponent } from './CitricComponent.js';
+export const Switch = ({ value, onChange, children, className, style, ...props }) => {
+    const handleChange = onChange ? () => onChange(!value) : undefined;
+    return children ? (_jsxs(CitricComponent, { tag: "label", component: "switch-row", style: style, className: className, children: [_jsx("input", { type: "checkbox", checked: value, onChange: handleChange, ...props }), children] })) : _jsx(CitricComponent, { tag: "input", type: "checkbox", component: "switch", checked: value, onChange: handleChange, className: className, style: style, ...props });
+};
+//# sourceMappingURL=Switch.js.map

package/dist/components/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/components/Switch.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAUnD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE;IAC/F,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAClE,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,MAAC,eAAe,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,aACpF,gBAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,KAAM,KAAK,GAAI,EAC3E,QAAQ,IACO,CACnB,CAAC,CAAC,CAAC,KAAC,eAAe,IAClB,GAAG,EAAC,OAAO,EACX,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,QAAQ,EAClB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,KACR,KAAK,GACT,CAAA;AACJ,CAAC,CAAA"}