@tenstorrent/vesper 0.1.0

package/dist/components/range/range.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Slider as BaseSlider, } from "@base-ui/react/slider";
+import { Typography } from "../typography/typography.js";
+import { cn } from "../../utils/cn.js";
+const toValues = (value) => Array.isArray(value) ? value : [value];
+/**
+ * A multi-thumb range input for selecting a span of numeric values between a minimum and maximum.
+ *
+ * @param {string[]} props.thumbAriaLabels - Accessible `aria-label` attributes for each thumb, in the same order as the values
+ * @param {number[]} [props.values] - (optional) The values of each thumb (controlled). One thumb is rendered per entry
+ * @param {number[]} [props.defaultValues] - (optional) The initial thumb values (uncontrolled). @default [min, max]
+ * @param {(value: number[]) => void} [props.onValuesChange] - (optional) Callback fired as thumb values change during interaction
+ * @param {(value: number[]) => void} [props.onValuesCommit] - (optional) Callback fired when thumb interaction is completed
+ * @param {number} [props.min] - (optional) The minimum allowed value. @default 0
+ * @param {number} [props.max] - (optional) The maximum allowed value. @default 100
+ * @param {number} [props.step] - (optional) The stepping interval. @default 1
+ * @param {number} [props.minStepsBetweenThumbs] - (optional) The minimum number of steps required between thumbs. @default 1
+ * @param {boolean} [props.showTicks] - (optional) Whether to render tick marks at each step interval. @default false
+ * @param {boolean} [props.showValueLabels] - (optional) Whether to display a value label above each thumb. @default false
+ * @param {string[]} [props.valueLabels] - (optional) Custom display labels for each thumb, falling back to that thumb's current value
+ * @param {boolean} [props.disabled] - (optional) Whether to prevent interaction. @default false
+ * @param {string} [props.name] - (optional) The form field name each thumb submits its value under
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * <Range
+ *   min={0}
+ *   max={100}
+ *   defaultValues={[20, 80]}
+ *   onValuesCommit={(values) => console.log(values)}
+ *   thumbAriaLabels={["Volume (min)", "Volume (max)"]}
+ * />
+ *
+ * @example
+ * <Range
+ *   min={0}
+ *   max={50}
+ *   step={5}
+ *   showTicks
+ *   showValueLabels
+ *   values={range}
+ *   onValuesChange={setRange}
+ *   thumbAriaLabels={["Volume (min)", "Volume (max)"]}
+ * />
+ *
+ * @example
+ * <Range
+ *   variant="error"
+ *   values={price}
+ *   onValuesChange={setPrice}
+ *   thumbAriaLabels={["Price (min)", "Price (max)"]}
+ * />
+ */
+export function Range(props) {
+    const { className, thumbAriaLabels, values, valueLabels, onValuesChange, onValuesCommit, showTicks = false, showValueLabels, minStepsBetweenThumbs = 1, min = 0, max = 100, step = 1, disabled, name, form, defaultValues = [min, max], ...rest } = props;
+    const tickPositions = useMemo(() => {
+        if (!showTicks)
+            return [];
+        const span = max - min;
+        if (!Number.isFinite(span) ||
+            !Number.isFinite(step) ||
+            span <= 0 ||
+            step <= 0) {
+            return [];
+        }
+        const numTicks = Math.max(Math.ceil(span / step) - 1, 0);
+        return Array.from({ length: numTicks }, (_, i) => ((i + 1) * step) / span);
+    }, [min, max, step, showTicks]);
+    const thumbValues = values ?? defaultValues;
+    return (_jsx(BaseSlider.Root, { ...rest, role: "group", className: cn("vesper-range", showValueLabels && "vesper-range-labeled", className), value: values, defaultValue: defaultValues, onValueChange: (value) => onValuesChange?.(toValues(value)), onValueCommitted: (value) => onValuesCommit?.(toValues(value)), min: min, max: max, step: step, disabled: disabled, name: name, form: form, minStepsBetweenValues: minStepsBetweenThumbs, thumbAlignment: "edge", thumbCollisionBehavior: "none", children: _jsx(BaseSlider.Control, { children: _jsxs(BaseSlider.Track, { className: "vesper-range-track", children: [showTicks &&
+                        tickPositions.map((position, i) => (_jsx("span", { className: "vesper-range-tick", style: {
+                                ["--vesper-range-tick-position"]: position,
+                            } }, i))), _jsx(BaseSlider.Indicator, { className: "vesper-range-range" }), thumbValues.map((_, index) => (_jsx(Typography, { as: BaseSlider.Thumb, variant: "label-xs", index: index, className: cn("vesper-range-thumb", showValueLabels && "vesper-range-thumb-labeled"), onPointerDown: (e) => {
+                            e.currentTarget.setPointerCapture(e.pointerId);
+                        }, "aria-label": thumbAriaLabels[index], getAriaValueText: (_, value, index) => valueLabels?.[index] ?? `${value}`, style: (state) => {
+                            if (!showValueLabels)
+                                return {};
+                            const thumbLabel = `"${valueLabels?.[index] ?? state.values[index]}"`;
+                            return {
+                                ["--vesper-range-thumb-label"]: thumbLabel,
+                            };
+                        } }, index)))] }) }) }));
+}
+//# sourceMappingURL=range.js.map

package/dist/components/range/range.js.map

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

package/dist/components/select/select.css

@@ -0,0 +1 @@
+.vesper-select{color:var(--vesper-text-primary);border:var(--vesper-stroke-base) solid var(--vesper-border-primary);background:var(--vesper-tint-neutral-100);align-items:center;display:flex}.vesper-select:not(:disabled){cursor:pointer}.vesper-select[data-popup-open] .vesper-select-state-indicator-closed{display:none}.vesper-select:not([data-popup-open]) .vesper-select-state-indicator-open{display:none}.vesper-select:disabled{border-color:var(--vesper-border-disabled);color:var(--vesper-text-disabled);background:var(--vesper-background-disabled)}.vesper-select:disabled .vesper-select-icon{color:var(--vesper-icon-disabled)}.vesper-select:disabled .vesper-select-state-indicator{color:var(--vesper-icon-disabled)}.vesper-select[data-popup-open]{border-color:var(--vesper-border-strong);box-shadow:var(--vesper-shadow-focus-ring)}@media (forced-colors:active){.vesper-select[data-popup-open]{outline:var(--vesper-stroke-strong) solid CanvasText}}@media not (forced-colors:active){.vesper-select[data-popup-open]{box-shadow:var(--vesper-shadow-focus-ring)}}.vesper-select:focus-visible{border-color:var(--vesper-border-strong);box-shadow:var(--vesper-shadow-focus-ring)}@media (forced-colors:active){.vesper-select:focus-visible{outline:var(--vesper-stroke-strong) solid CanvasText}}@media not (forced-colors:active){.vesper-select:focus-visible{box-shadow:var(--vesper-shadow-focus-ring)}}.vesper-select-item-checkmark{color:var(--vesper-icon-secondary);width:1.25rem;height:1.25rem;display:block}.vesper-select-state-indicator{margin-left:auto}.vesper-select-lg{padding:0 var(--vesper-spacing-3);gap:var(--vesper-spacing-2);border-radius:var(--vesper-radius-2);height:3rem}.vesper-select-lg .vesper-select-icon{color:var(--vesper-icon-secondary);width:1.25rem;height:1.25rem;display:block}.vesper-select-lg .vesper-select-state-indicator{color:var(--vesper-icon-secondary);width:1.25rem;height:1.25rem;display:block}.vesper-select-md{padding:0 var(--vesper-spacing-3);gap:var(--vesper-spacing-2);border-radius:var(--vesper-radius-2);height:2.5rem}.vesper-select-md .vesper-select-icon{color:var(--vesper-icon-secondary);width:1rem;height:1rem;display:block}.vesper-select-md .vesper-select-state-indicator{color:var(--vesper-icon-secondary);width:1rem;height:1rem;display:block}.vesper-select-sm{padding:0 var(--vesper-spacing-2);gap:var(--vesper-spacing-1);border-radius:var(--vesper-radius-1);height:2rem}.vesper-select-sm .vesper-select-icon{color:var(--vesper-icon-secondary);width:.875rem;height:.875rem;display:block}.vesper-select-sm .vesper-select-state-indicator{color:var(--vesper-icon-secondary);width:.875rem;height:.875rem;display:block}.vesper-select-success{border:var(--vesper-stroke-base) solid var(--vesper-border-success-base)}.vesper-select-warning{border:var(--vesper-stroke-base) solid var(--vesper-border-warning-base)}.vesper-select-error{border:var(--vesper-stroke-base) solid var(--vesper-border-error-base)}.vesper-select-positioner{min-width:var(--anchor-width);border-radius:var(--vesper-radius-3);border:var(--vesper-stroke-base) solid var(--vesper-border-tertiary);background:linear-gradient(0deg, var(--vesper-alpha-stone-50) 0%, var(--vesper-alpha-stone-50) 100%), var(--vesper-background-primary);box-shadow:var(--vesper-shadow-200);overflow:hidden}.vesper-select-popup{color:var(--vesper-text-primary);max-height:min(var(--available-height), 20rem);outline:none;overflow-y:auto}.vesper-select-viewport{padding:var(--vesper-spacing-2);gap:var(--vesper-spacing-half);flex-direction:column;display:flex}.vesper-select-item{cursor:pointer;justify-content:space-between;align-items:center;gap:var(--vesper-spacing-2);height:2.25rem;padding:var(--vesper-spacing-2);border-radius:var(--vesper-radius-1);display:flex}.vesper-select-item[data-highlighted]{background:var(--vesper-state-neutral-hover)}@media (forced-colors:active){.vesper-select-item[data-highlighted]{outline:var(--vesper-stroke-base) solid CanvasText}}.vesper-select-item[data-selected]{background:var(--vesper-tint-neutral-200)}

package/dist/components/select/select.d.ts

@@ -0,0 +1,82 @@
+import { type ReactNode } from "react";
+import { type PortalContainer } from "../../utils/getPortalContainer.js";
+import { FormInputProps } from "../../utils/splitFormInputProps.js";
+export declare const SELECT_VARIANTS: readonly ["default", "warning", "error", "success"];
+export declare const SELECT_SIZES: readonly ["sm", "md", "lg"];
+export type SelectVariant = (typeof SELECT_VARIANTS)[number];
+export type SelectSize = (typeof SELECT_SIZES)[number];
+export interface SelectItem {
+    /** The underlying value submitted with form data and passed to `onValueChange`. Must be unique across all options. */
+    value: string;
+    /** The human-readable text displayed for this option in the dropdown list. */
+    label: string;
+}
+export interface SelectProps extends FormInputProps<"button", "button", "value" | "defaultValue"> {
+    /** An optional icon rendered at the leading edge of the select trigger. */
+    icon?: ReactNode;
+    /** The size variant of the select trigger. Affects padding, height, and typography. @default md */
+    size?: SelectSize;
+    /** The visual variant of the select trigger, which determines its color scheme and message icon. @default default */
+    variant?: SelectVariant;
+    /** Placeholder text shown in the trigger when no value is selected. @default Select an option */
+    placeholder?: string;
+    /** The list of selectable options displayed in the dropdown */
+    options: (SelectItem | string)[];
+    /** The initial selected value for uncontrolled usage */
+    defaultValue?: string | null;
+    /** The currently selected value for controlled usage. Pass `null` to represent no selection. */
+    value?: string | null;
+    /** Callback invoked with the new value whenever the selection changes, or `null` when the selection is cleared. */
+    onValueChange?(value: string | null): void;
+    /** When `true`, marks the underlying select as required for form validation */
+    required?: boolean;
+    /** Specify the element or shadow root to portal the dropdown into */
+    container?: PortalContainer;
+}
+/**
+ * A form-ready dropdown select component, supporting both controlled and uncontrolled usage patterns with options for:
+ * - Three size variants: `sm`, `md`, `lg`
+ * - An optional leading icon
+ * - Automatic portal handling for use inside dialogs
+ *
+ * @param {(SelectItem | string)[]} props.options - The list of selectable options displayed in the dropdown. See {@link SelectItem} for the shape of each option
+ * @param {SelectSize} [props.size] - (optional) Size variant of the select trigger. Affects padding, height, and typography. @default md
+ * @param {SelectVariant} [props.variant] - (optional) The visual variant determining color scheme and message icon. @default default
+ * @param {string} [props.placeholder] - (optional) Placeholder text shown when no value is selected. @default Select an option
+ * @param {ReactNode} [props.icon] - (optional) An icon rendered at the leading edge of the select trigger
+ * @param {string} [props.value] - (optional) The currently selected value for controlled usage
+ * @param {string} [props.defaultValue] - (optional) The initial selected value for uncontrolled usage
+ * @param {(value: string) => void} [props.onValueChange] - (optional) Callback invoked with the new value whenever the selection changes
+ * @param {boolean} [props.required] - (optional) Marks the select as required for form validation
+ * @param {PortalContainer} [props.container] - (optional) Specify the element or shadow root to portal the dropdown into
+ * @param {Ref<HTMLButtonElement>} [props.ref] - (optional) A ref forwarded to the select trigger `<button>` element
+ * @param {string} [props.name] - (optional) Form field name submitted with form data
+ *
+ * You may also pass any additional props to the underlying trigger `<button>` element
+ *
+ * @example
+ * <Select
+ *   required
+ *   aria-label="Fruit"
+ *   name="fruit"
+ *   options={[
+ *     { value: "apple", label: "Apple" },
+ *     { value: "banana", label: "Banana" },
+ *     { value: "cherry", label: "Cherry" },
+ *   ]}
+ *   placeholder="Pick a fruit"
+ *   onValueChange={(value) => console.log(value)}
+ * />
+ *
+ * @example
+ * <Select
+ *   size="sm"
+ *   icon={<ChatSolid />}
+ *   options={chatOptions}
+ *   value={selectedChatOption}
+ *   onValueChange={setSelectedChatOption}
+ *   aria-label="Select default chat behavior"
+ * />
+ */
+export declare function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAU1D,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EACL,cAAc,EAEf,MAAM,6BAA6B,CAAC;AAErC,eAAO,MAAM,eAAe,qDAKlB,CAAC;AAEX,eAAO,MAAM,YAAY,6BAA8B,CAAC;AAExD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvD,MAAM,WAAW,UAAU;IACzB,sHAAsH;IACtH,KAAK,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CACjD,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,cAAc,CACzB;IACC,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mGAAmG;IACnG,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qHAAqH;IACrH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,iGAAiG;IACjG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,OAAO,EAAE,CAAC,UAAU,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,gGAAgG;IAChG,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,mHAAmH;IACnH,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3C,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,SAAS,CAAC,EAAE,eAAe,CAAC;CAC7B;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,2CA4FxC"}

package/dist/components/select/select.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { CaretDown, CaretUp, Checkmark } from "../icons/icons.js";
+import { Typography, } from "../typography/typography.js";
+import { cn } from "../../utils/cn.js";
+import { getPortalContainer, } from "../../utils/getPortalContainer.js";
+import { useBaseRemSize } from "../../utils/hooks/useBaseRemSize.js";
+import { useMergedRefs } from "../../utils/hooks/useMergedRefs.js";
+import { splitFormInputProps, } from "../../utils/splitFormInputProps.js";
+export const SELECT_VARIANTS = [
+    "default",
+    "warning",
+    "error",
+    "success",
+];
+export const SELECT_SIZES = ["sm", "md", "lg"];
+const SELECT_TRIGGER_TYPOGRAPHY = {
+    sm: "copy-xs",
+    md: "copy-sm",
+    lg: "copy-md",
+};
+/**
+ * A form-ready dropdown select component, supporting both controlled and uncontrolled usage patterns with options for:
+ * - Three size variants: `sm`, `md`, `lg`
+ * - An optional leading icon
+ * - Automatic portal handling for use inside dialogs
+ *
+ * @param {(SelectItem | string)[]} props.options - The list of selectable options displayed in the dropdown. See {@link SelectItem} for the shape of each option
+ * @param {SelectSize} [props.size] - (optional) Size variant of the select trigger. Affects padding, height, and typography. @default md
+ * @param {SelectVariant} [props.variant] - (optional) The visual variant determining color scheme and message icon. @default default
+ * @param {string} [props.placeholder] - (optional) Placeholder text shown when no value is selected. @default Select an option
+ * @param {ReactNode} [props.icon] - (optional) An icon rendered at the leading edge of the select trigger
+ * @param {string} [props.value] - (optional) The currently selected value for controlled usage
+ * @param {string} [props.defaultValue] - (optional) The initial selected value for uncontrolled usage
+ * @param {(value: string) => void} [props.onValueChange] - (optional) Callback invoked with the new value whenever the selection changes
+ * @param {boolean} [props.required] - (optional) Marks the select as required for form validation
+ * @param {PortalContainer} [props.container] - (optional) Specify the element or shadow root to portal the dropdown into
+ * @param {Ref<HTMLButtonElement>} [props.ref] - (optional) A ref forwarded to the select trigger `<button>` element
+ * @param {string} [props.name] - (optional) Form field name submitted with form data
+ *
+ * You may also pass any additional props to the underlying trigger `<button>` element
+ *
+ * @example
+ * <Select
+ *   required
+ *   aria-label="Fruit"
+ *   name="fruit"
+ *   options={[
+ *     { value: "apple", label: "Apple" },
+ *     { value: "banana", label: "Banana" },
+ *     { value: "cherry", label: "Cherry" },
+ *   ]}
+ *   placeholder="Pick a fruit"
+ *   onValueChange={(value) => console.log(value)}
+ * />
+ *
+ * @example
+ * <Select
+ *   size="sm"
+ *   icon={<ChatSolid />}
+ *   options={chatOptions}
+ *   value={selectedChatOption}
+ *   onValueChange={setSelectedChatOption}
+ *   aria-label="Select default chat behavior"
+ * />
+ */
+export function Select(props) {
+    const { className, options, onValueChange, size = "md", variant = "default", icon, container, placeholder = "Select an option", ref, ...rest } = props;
+    const { ariaProps, controlProps, formProps, wrapperProps } = splitFormInputProps(rest);
+    const [trigger, setTrigger] = useState(null);
+    const mergedTriggerRef = useMergedRefs(setTrigger, ref);
+    const portalContainer = getPortalContainer(container, trigger);
+    const baseRemSize = useBaseRemSize();
+    const items = useMemo(() => options.map((option) => typeof option === "string" ? { value: option, label: option } : option), [options]);
+    return (_jsxs(BaseSelect.Root, { ...formProps, items: items, onValueChange: (next) => onValueChange?.(next), children: [_jsxs(BaseSelect.Trigger, { ...ariaProps, ...wrapperProps, ...controlProps, ref: mergedTriggerRef, className: cn("vesper-select", `vesper-select-${size}`, `vesper-select-${variant}`, className), children: [icon && _jsx("span", { className: "vesper-select-icon", children: icon }), _jsx(Typography, { as: "span", variant: SELECT_TRIGGER_TYPOGRAPHY[size], children: _jsx(BaseSelect.Value, { placeholder: placeholder }) }), _jsxs("span", { className: "vesper-select-state-indicator", children: [_jsx(CaretDown, { className: "vesper-select-state-indicator-closed" }), _jsx(CaretUp, { className: "vesper-select-state-indicator-open" })] })] }), _jsx(BaseSelect.Portal, { container: portalContainer, children: _jsx(BaseSelect.Positioner, { className: "vesper-select-positioner", side: "bottom", align: "start", alignItemWithTrigger: false, sideOffset: 12 * (baseRemSize / 16), children: _jsx(BaseSelect.Popup, { className: "vesper-select-popup", children: _jsx(BaseSelect.List, { className: "vesper-select-viewport", children: items.map((o) => (_jsxs(BaseSelect.Item, { value: o.value, className: "vesper-select-item", children: [_jsx(BaseSelect.ItemText, { render: _jsx(Typography, { variant: "label-md" }), children: o.label }), _jsx(BaseSelect.ItemIndicator, { className: "vesper-select-item-checkmark", children: _jsx(Checkmark, {}) })] }, o.value))) }) }) }) })] }));
+}
+//# sourceMappingURL=select.js.map

package/dist/components/select/select.js.map

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

package/dist/components/sheet/sheet.css

@@ -0,0 +1 @@
+.vesper-sheet{transition:display var(--vesper-transition-duration-fast) ease allow-discrete, overlay var(--vesper-transition-duration-fast) ease allow-discrete}.vesper-sheet::-ms-backdrop{opacity:0}.vesper-sheet::backdrop{opacity:0}.vesper-sheet:not([popover]):before{content:"";transition:background var(--vesper-transition-duration-fast) ease, display var(--vesper-transition-duration-fast) ease allow-discrete, overlay var(--vesper-transition-duration-fast) ease allow-discrete;background:0 0;position:fixed;top:-100vh;bottom:-100vh;left:-100vw;right:-100vw}.vesper-sheet-right .vesper-sheet-content{transform:translate(50%)}.vesper-sheet-left .vesper-sheet-content{transform:translate(-50%)}.vesper-sheet-content{opacity:0;transition:opacity var(--vesper-transition-duration-fast) ease, transform var(--vesper-transition-duration-fast) ease;gap:var(--vesper-spacing-6);width:min(calc(100vw - var(--vesper-spacing-12)), 29.5rem);background:var(--vesper-background-primary);border:var(--vesper-stroke-base) solid var(--vesper-border-primary);border-radius:var(--vesper-radius-3);top:var(--vesper-spacing-6);height:calc(100vh - var(--vesper-spacing-12));flex-direction:column;display:flex;position:fixed;overflow:hidden}.vesper-sheet:popover-open .vesper-sheet-content{opacity:1;transform:translate(0)}.vesper-sheet:popover-open:before{background:var(--vesper-scrim-contrast-base)}.vesper-sheet[open] .vesper-sheet-content{opacity:1;transform:translate(0)}.vesper-sheet[open]:before{background:var(--vesper-scrim-contrast-base)}@starting-style{.vesper-sheet-right:popover-open .vesper-sheet-content{opacity:0;transform:translate(50%)}.vesper-sheet-right:popover-open:before{background:0 0}}@starting-style{.vesper-sheet-right[open] .vesper-sheet-content{opacity:0;transform:translate(50%)}.vesper-sheet-right[open]:before{background:0 0}}@starting-style{.vesper-sheet-left:popover-open .vesper-sheet-content{opacity:0;transform:translate(-50%)}.vesper-sheet-left:popover-open:before{background:0 0}}@starting-style{.vesper-sheet-left[open] .vesper-sheet-content{opacity:0;transform:translate(-50%)}.vesper-sheet-left[open]:before{background:0 0}}.vesper-sheet-left .vesper-sheet-content{left:var(--vesper-spacing-6)}.vesper-sheet-right .vesper-sheet-content{right:var(--vesper-spacing-6)}.vesper-sheet-header{padding:var(--vesper-spacing-6) var(--vesper-spacing-6) 0 var(--vesper-spacing-6);gap:var(--vesper-spacing-10);width:100%;display:flex}.vesper-sheet-title-description{gap:var(--vesper-spacing-2);flex-direction:column;flex:1;display:flex}.vesper-sheet-title{color:var(--vesper-text-primary)}.vesper-sheet-description{color:var(--vesper-text-secondary)}.vesper-sheet-children{padding:0 var(--vesper-spacing-6);color:var(--vesper-text-primary);flex:1;overflow-y:auto}.vesper-sheet-buttons{gap:var(--vesper-spacing-4);padding:0 var(--vesper-spacing-6) var(--vesper-spacing-6) var(--vesper-spacing-6);justify-content:flex-end;display:flex}

package/dist/components/sheet/sheet.d.ts

@@ -0,0 +1,71 @@
+import { type ComponentPropsWithoutRef, type Ref } from "react";
+import { type ButtonProps } from "../button/button.js";
+interface SheetRef {
+    open(): void;
+    close(): void;
+}
+export declare const SHEET_SIDES: readonly ["left", "right"];
+export type SheetSide = (typeof SHEET_SIDES)[number];
+export interface SheetProps extends Omit<ComponentPropsWithoutRef<"dialog">, "open" | "popover"> {
+    /** The title text displayed in the sheet header. Also used for the sheet's `aria-labelledby` association. */
+    title: string;
+    /** A description displayed below the title in the sheet header. Also used for the sheet's `aria-describedby` association. */
+    description: string;
+    /** A ref that exposes imperative `open()` and `close()` methods for controlling the sheet. Can be obtained via the `useSheet` hook. */
+    ref?: Ref<SheetRef>;
+    /** The side of the viewport the sheet slides in from. @default right */
+    side?: SheetSide;
+    /** When `true`, renders the sheet as a popover instead of a modal dialog. Popovers do not render a backdrop, and allow interaction with the content behind them. @default false */
+    popover?: boolean;
+    /** An optional array of button props to render as action buttons at the bottom of the sheet. The last button defaults to `"contrast"` variant; all others default to `"tertiary"`. */
+    buttons?: Omit<ButtonProps, "size" | "as">[];
+}
+/**
+ * A slide-in panel component for supplementary content, supporting both modal and popover modes.
+ *
+ * Unlike `Modal`, which is meant to always block user interaction with underlying content, `Sheet` can be configured to allow the user to continue to interact with the rest of the page.
+ *
+ * @see packages/vesper/src/components/modal/modal.tsx
+ *
+ * @param {string} props.title - The title text displayed in the sheet header
+ * @param {string} props.description - A description displayed below the title
+ * @param {SheetSide} [props.side] - (optional) The side of the viewport the sheet slides in from. @default right
+ * @param {boolean} [props.popover] - (optional) Render as a non-modal popover instead of a modal dialog. @default false
+ * @param {Ref<SheetRef>} [props.ref] - (optional) A ref exposing imperative `open()` and `close()` methods
+ * @param {ButtonProps[]} [props.buttons] - (optional) Action buttons rendered at the bottom of the sheet
+ *
+ * You may also pass any additional props to the underlying `dialog` element
+ *
+ * @example
+ * const { ref, open, close } = useSheet();
+ *
+ * <Sheet ref={ref} title="Settings" description="Manage your preferences.">
+ *   <p>Sheet content here</p>
+ * </Sheet>
+ * <Button onClick={open}>Open Sheet</Button>
+ *
+ * @example
+ * <Sheet
+ *   title="Filters"
+ *   description="Apply filters"
+ *   side="left"
+ *   popover
+ *   buttons={[{ children: "Apply" }]}
+ * />
+ */
+export declare function Sheet(props: SheetProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * A convenience hook that returns a ref and imperative `open()` and `close()` functions for controlling a `Sheet` component.
+ *
+ * @example
+ * const { ref, open, close } = useSheet();
+ * <Sheet ref={ref} title="Example" description="An example sheet." />
+ * <Button onClick={open}>Open sheet</Button>
+ */
+export declare function useSheet(): {
+    open: () => void;
+    close: () => void;
+    ref: import("react").RefObject<SheetRef>;
+};
+export {};
+//# sourceMappingURL=sheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/sheet/sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,GAAG,EAMT,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,WAAW,EAEjB,MAAM,4BAA4B,CAAC;AAOpC,UAAU,QAAQ;IAChB,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;CACf;AAED,eAAO,MAAM,WAAW,4BAA6B,CAAC;AAEtD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAErD,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,wBAAwB,CAAC,QAAQ,CAAC,EAClC,MAAM,GAAG,SAAS,CACnB;IACC,6GAA6G;IAC7G,KAAK,EAAE,MAAM,CAAC;IACd,6HAA6H;IAC7H,WAAW,EAAE,MAAM,CAAC;IACpB,uIAAuI;IACvI,GAAG,CAAC,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC;IACpB,wEAAwE;IACxE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mLAAmL;IACnL,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sLAAsL;IACtL,OAAO,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;CAC9C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CAqHtC;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ;;;;EAYvB"}

package/dist/components/sheet/sheet.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useImperativeHandle, useRef, } from "react";
+import { Button, } from "../button/button.js";
+import { IconButton } from "../icon-button/icon-button.js";
+import { Close } from "../icons/icons.js";
+import { Typography } from "../typography/typography.js";
+import { cn } from "../../utils/cn.js";
+export const SHEET_SIDES = ["left", "right"];
+/**
+ * A slide-in panel component for supplementary content, supporting both modal and popover modes.
+ *
+ * Unlike `Modal`, which is meant to always block user interaction with underlying content, `Sheet` can be configured to allow the user to continue to interact with the rest of the page.
+ *
+ * @see packages/vesper/src/components/modal/modal.tsx
+ *
+ * @param {string} props.title - The title text displayed in the sheet header
+ * @param {string} props.description - A description displayed below the title
+ * @param {SheetSide} [props.side] - (optional) The side of the viewport the sheet slides in from. @default right
+ * @param {boolean} [props.popover] - (optional) Render as a non-modal popover instead of a modal dialog. @default false
+ * @param {Ref<SheetRef>} [props.ref] - (optional) A ref exposing imperative `open()` and `close()` methods
+ * @param {ButtonProps[]} [props.buttons] - (optional) Action buttons rendered at the bottom of the sheet
+ *
+ * You may also pass any additional props to the underlying `dialog` element
+ *
+ * @example
+ * const { ref, open, close } = useSheet();
+ *
+ * <Sheet ref={ref} title="Settings" description="Manage your preferences.">
+ *   <p>Sheet content here</p>
+ * </Sheet>
+ * <Button onClick={open}>Open Sheet</Button>
+ *
+ * @example
+ * <Sheet
+ *   title="Filters"
+ *   description="Apply filters"
+ *   side="left"
+ *   popover
+ *   buttons={[{ children: "Apply" }]}
+ * />
+ */
+export function Sheet(props) {
+    const { className, ref, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, children, side = "right", popover = false, title, description, buttons = [], ...rest } = props;
+    const titleId = useId();
+    const descriptionId = useId();
+    const innerRef = useRef(null);
+    const open = useCallback(() => {
+        if (!innerRef.current)
+            return;
+        if (!popover) {
+            if (!innerRef.current.open)
+                innerRef.current.showModal();
+        }
+        else {
+            innerRef.current?.showPopover();
+        }
+    }, [popover]);
+    const close = useCallback(() => {
+        if (!innerRef.current)
+            return;
+        if (!popover)
+            innerRef.current.close();
+        else
+            innerRef.current.hidePopover();
+    }, [popover]);
+    useImperativeHandle(ref, () => ({ open, close }), [open, close]);
+    useEffect(() => {
+        // when rendered as a modal, ensure clicking outside the container closes the sheet
+        if (!popover) {
+            const handleClick = (e) => {
+                if (e.target === innerRef.current)
+                    close();
+            };
+            window.addEventListener("click", handleClick);
+            return () => window.removeEventListener("click", handleClick);
+        }
+        // when rendered as a popover, ensure pressing the escape key closes the sheet
+        const handleKeyDown = (e) => {
+            if (e.key === "Escape")
+                close();
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [close, popover]);
+    // If an additional aria-labelledby is supplied, this ensures that both ids get used
+    const labelledBy = [ariaLabelledby, titleId].filter(Boolean).join(" ");
+    // If an additional aria-describedby is supplied, this ensures that both ids get used
+    const describedBy = [ariaDescribedby, descriptionId]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx("dialog", { ...(popover && { popover: "manual" }), ref: innerRef, className: cn("vesper-sheet", `vesper-sheet-${side}`, className), "aria-labelledby": labelledBy, "aria-describedby": describedBy, ...rest, children: _jsxs("div", { className: "vesper-sheet-content", children: [_jsxs("div", { className: "vesper-sheet-header", children: [_jsxs("div", { className: "vesper-sheet-title-description", children: [_jsx(Typography, { variant: "heading-sm", className: "vesper-sheet-title", id: titleId, children: title }), _jsx(Typography, { variant: "copy-sm", className: "vesper-sheet-description", id: descriptionId, children: description })] }), _jsx(IconButton, { "aria-label": "Close sheet", type: "button", icon: _jsx(Close, {}), size: "md", variant: "tertiary", onClick: close })] }), _jsx("div", { className: "vesper-sheet-children", children: children }), buttons.length > 0 && (_jsx("div", { className: "vesper-sheet-buttons", children: buttons.map((button, index) => {
+                        const variant = button.variant ||
+                            (index === buttons.length - 1 ? "contrast" : "tertiary");
+                        return (_jsx(Button, { size: "lg", ...button, variant: variant }, index));
+                    }) }))] }) }));
+}
+/**
+ * A convenience hook that returns a ref and imperative `open()` and `close()` functions for controlling a `Sheet` component.
+ *
+ * @example
+ * const { ref, open, close } = useSheet();
+ * <Sheet ref={ref} title="Example" description="An example sheet." />
+ * <Button onClick={open}>Open sheet</Button>
+ */
+export function useSheet() {
+    const ref = useRef({ open() { }, close() { } });
+    const open = useCallback(() => {
+        ref.current.open();
+    }, [ref]);
+    const close = useCallback(() => {
+        ref.current.close();
+    }, [ref]);
+    return { open, close, ref };
+}
+//# sourceMappingURL=sheet.js.map

package/dist/components/sheet/sheet.js.map

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

package/dist/components/show-more/show-more.css

@@ -0,0 +1 @@
+.vesper-show-more{justify-content:center;align-items:center;display:flex}.vesper-show-more:before{content:"";border-bottom:var(--vesper-stroke-base) solid var(--vesper-border-tertiary);flex:1}.vesper-show-more:after{content:"";border-bottom:var(--vesper-stroke-base) solid var(--vesper-border-tertiary);flex:1}

package/dist/components/show-more/show-more.d.ts

@@ -0,0 +1,28 @@
+import type { ComponentProps, MouseEventHandler } from "react";
+export interface ShowMoreProps extends Omit<ComponentProps<"div">, "onClick"> {
+    /** Whether or not the content is currently expanded. Controls the button label ("Show more" / "Show less") and the `aria-expanded` attribute. @default false */
+    expanded?: boolean;
+    /** When `true`, renders the button in a disabled state and prevents interaction. @default false */
+    disabled?: boolean;
+    /** Callback fired when the show more/less button is clicked. */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+/**
+ * A toggle button for expanding and collapsing content sections with an accessible "Show more" / "Show less" label.
+ *
+ * @param {boolean} [props.expanded] - (optional) Whether the content is currently expanded. @default false
+ * @param {boolean} [props.disabled] - (optional) Renders the button in a disabled state. @default false
+ * @param {MouseEventHandler<HTMLButtonElement>} [props.onClick] - (optional) Callback fired when the button is clicked
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * const [expanded, setExpanded] = useState(false);
+ *
+ * <ShowMore expanded={expanded} onClick={() => setExpanded(!expanded)} />
+ *
+ * @example
+ * <ShowMore expanded={false} disabled />
+ */
+export declare function ShowMore(props: ShowMoreProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=show-more.d.ts.map

package/dist/components/show-more/show-more.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"show-more.d.ts","sourceRoot":"","sources":["../../../src/components/show-more/show-more.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAO/D,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3E,gKAAgK;IAChK,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mGAAmG;IACnG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CAChD;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAuB5C"}

package/dist/components/show-more/show-more.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "../button/button.js";
+import { CaretDown, CaretUp } from "../icons/icons.js";
+import { cn } from "../../utils/cn.js";
+/**
+ * A toggle button for expanding and collapsing content sections with an accessible "Show more" / "Show less" label.
+ *
+ * @param {boolean} [props.expanded] - (optional) Whether the content is currently expanded. @default false
+ * @param {boolean} [props.disabled] - (optional) Renders the button in a disabled state. @default false
+ * @param {MouseEventHandler<HTMLButtonElement>} [props.onClick] - (optional) Callback fired when the button is clicked
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * const [expanded, setExpanded] = useState(false);
+ *
+ * <ShowMore expanded={expanded} onClick={() => setExpanded(!expanded)} />
+ *
+ * @example
+ * <ShowMore expanded={false} disabled />
+ */
+export function ShowMore(props) {
+    const { className, expanded = false, disabled = false, onClick, ...rest } = props;
+    return (_jsx("div", { className: cn("vesper-show-more", className), ...rest, children: _jsx(Button, { "aria-expanded": expanded ?? false, disabled: disabled, size: "sm", variant: "tertiary", iconRight: expanded ? _jsx(CaretUp, {}) : _jsx(CaretDown, {}), onClick: onClick, children: expanded ? "Show less" : "Show more" }) }));
+}
+//# sourceMappingURL=show-more.js.map

package/dist/components/show-more/show-more.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"show-more.js","sourceRoot":"","sources":["../../../src/components/show-more/show-more.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAE9D,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAWhC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EACJ,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC,KAAM,IAAI,YACzD,KAAC,MAAM,qBACU,QAAQ,IAAI,KAAK,EAChC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,UAAU,EAClB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAC,OAAO,KAAG,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,EACjD,OAAO,EAAE,OAAO,YAEf,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,GAC9B,GACL,CACP,CAAC;AACJ,CAAC"}

package/dist/components/skeleton/skeleton.css

@@ -0,0 +1 @@
+.vesper-skeleton{width:fit-content;position:relative;overflow:hidden}.vesper-skeleton-overlay{background:var(--vesper-stone-300);position:absolute;top:0;bottom:0;left:0;right:0}.vesper-skeleton-overlay:after{content:"";background:linear-gradient(to left, transparent, var(--vesper-alpha-inverse-200), transparent);width:4rem;animation:1.2s linear infinite vesper-skeleton-shimmer;position:absolute;top:0;bottom:0;left:0}@media (prefers-reduced-motion:reduce){.vesper-skeleton-overlay:after{display:none}}.vesper-skeleton-box{border-radius:var(--vesper-radius-1)}.vesper-skeleton-pill{border-radius:2147483647px}.vesper-skeleton-circle{border-radius:50%}@keyframes vesper-skeleton-shimmer{0%{left:-4rem}66%,to{left:100%}}

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,39 @@
+import type { ComponentProps } from "react";
+export declare const SKELETON_SHAPES: readonly ["box", "pill", "circle"];
+export type SkeletonShape = (typeof SKELETON_SHAPES)[number];
+export interface SkeletonProps extends ComponentProps<"div"> {
+    /** The shape of the skeleton placeholder. @default box */
+    shape?: SkeletonShape;
+    /** Sets both the `width` and `height` of the skeleton simultaneously. Accepts a number (interpreted as pixels) or a CSS string value. Overrides individual `width` and `height` props. */
+    size?: number | string;
+    /** The `width` of the skeleton. Accepts a number (interpreted as pixels) or a CSS string value. */
+    width?: number | string;
+    /** The `height` of the skeleton. Accepts a number (interpreted as pixels) or a CSS string value. */
+    height?: number | string;
+    /** When `true`, renders the skeleton overlay. When `false`, renders only the children without the skeleton. @default true */
+    show?: boolean;
+}
+/**
+ * A placeholder loading element that displays an animated shimmer overlay in configurable shapes and sizes.
+ *
+ * @param {SkeletonShape} [props.shape] - (optional) The shape of the skeleton placeholder. @default box
+ * @param {number | string} [props.size] - (optional) Sets both width and height simultaneously
+ * @param {number | string} [props.width] - (optional) The width of the skeleton
+ * @param {number | string} [props.height] - (optional) The height of the skeleton
+ * @param {boolean} [props.show] - (optional) Whether to render the skeleton overlay. @default true
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * <Skeleton width={200} height={20} />
+ *
+ * @example
+ * <Skeleton shape="circle" size={48} />
+ *
+ * @example
+ * <Skeleton show={isLoading}>
+ *   <Avatar src={user.avatar} />
+ * </Skeleton>
+ */
+export declare function Skeleton(props: SkeletonProps): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;
+//# sourceMappingURL=skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,eAAO,MAAM,eAAe,oCAAqC,CAAC;AAElE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC1D,0DAA0D;IAC1D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,0LAA0L;IAC1L,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,mGAAmG;IACnG,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,oGAAoG;IACpG,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,6HAA6H;IAC7H,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2WA6B5C"}