@rowsncolumns/spreadsheet 10.2.74 → 10.2.76

package/dist/esm/components/text-to-columns-dialog/index.js

@@ -0,0 +1,147 @@
+import { Cross1Icon } from "@rowsncolumns/icons";
+import { Button, Dialog, DialogBody, DialogCloseButton, DialogContent, DialogDescription, DialogTitle, Input, Separator, } from "@rowsncolumns/ui";
+import React, { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { useRegisterTextToColumnsDialogHost, useTextToColumnsDialogState, } from "../../atoms/text-to-columns-dialog.atom";
+const DELIMITERS = [
+    { label: "Comma", value: "," },
+    { label: "Semicolon", value: ";" },
+    { label: "Tab", value: "\t" },
+    { label: "Space", value: " " },
+    { label: "Period", value: "." },
+    { label: "Pipe", value: "|" },
+];
+/** Cuts `text` at ascending character positions (the dialog's own preview). */
+const cutAt = (text, breaks) => {
+    const parts = [];
+    let start = 0;
+    for (const position of breaks) {
+        parts.push(text.slice(start, position));
+        start = position;
+    }
+    parts.push(text.slice(start));
+    return parts;
+};
+const parseBreaks = (text) => [
+    ...new Set(text
+        .split(/[\s,;]+/)
+        .map((part) => Number.parseInt(part, 10))
+        .filter((n) => Number.isInteger(n) && n > 0)),
+].sort((a, b) => a - b);
+/**
+ * Excel's Convert Text to Columns wizard, condensed: choose Delimited (pick
+ * a delimiter or type another) or Fixed width (click the ruler to add or
+ * remove break lines, or type the positions), with a live preview of the
+ * first rows.
+ */
+export const TextToColumnsDialog = memo(({ open, onOpenChange, preview, initialMode = "delimited", onApply, }) => {
+    const [mode, setMode] = useState(initialMode);
+    const [delimiter, setDelimiter] = useState(",");
+    const [customDelimiter, setCustomDelimiter] = useState("");
+    const [breaks, setBreaks] = useState([]);
+    const [breaksText, setBreaksText] = useState("");
+    useEffect(() => {
+        if (open) {
+            setMode(initialMode);
+            setDelimiter(",");
+            setCustomDelimiter("");
+            setBreaks([]);
+            setBreaksText("");
+        }
+        // Only reset on open transitions.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    const sample = useMemo(() => preview.slice(0, 6), [preview]);
+    const rulerLength = useMemo(() => Math.min(120, Math.max(10, ...sample.map((text) => text.length))), [sample]);
+    const toggleBreak = useCallback((position) => {
+        setBreaks((prev) => {
+            const next = prev.includes(position)
+                ? prev.filter((p) => p !== position)
+                : [...prev, position].sort((a, b) => a - b);
+            setBreaksText(next.join(", "));
+            return next;
+        });
+    }, []);
+    const effectiveDelimiter = delimiter === "custom" ? customDelimiter : delimiter;
+    const canApply = mode === "delimited" ? effectiveDelimiter.length > 0 : breaks.length > 0;
+    const commit = useCallback(() => {
+        if (mode === "fixed") {
+            onApply({ delimiter: ",", columnBreaks: breaks });
+        }
+        else {
+            onApply({ delimiter: effectiveDelimiter });
+        }
+        onOpenChange(false);
+    }, [mode, breaks, effectiveDelimiter, onApply, onOpenChange]);
+    return (React.createElement(Dialog, { open: open, onOpenChange: onOpenChange },
+        React.createElement(DialogContent, { className: "w-[520px] max-w-[92vw] pointer-events-auto" },
+            React.createElement(DialogTitle, null, "Text to columns"),
+            React.createElement(DialogDescription, null, "Split the selected column into several columns."),
+            React.createElement(DialogCloseButton, { onClick: () => onOpenChange(false) },
+                React.createElement(Cross1Icon, null)),
+            React.createElement(DialogBody, { className: "flex flex-col gap-3 font-system text-sm" },
+                React.createElement("div", { className: "flex gap-4", role: "radiogroup", "aria-label": "Original data type" },
+                    React.createElement("label", { className: "flex items-center gap-1" },
+                        React.createElement("input", { type: "radio", name: "text-to-columns-mode", value: "delimited", checked: mode === "delimited", onChange: () => setMode("delimited") }),
+                        "Delimited"),
+                    React.createElement("label", { className: "flex items-center gap-1" },
+                        React.createElement("input", { type: "radio", name: "text-to-columns-mode", value: "fixed", checked: mode === "fixed", onChange: () => setMode("fixed") }),
+                        "Fixed width")),
+                mode === "delimited" ? (React.createElement("div", { className: "flex flex-col gap-2" },
+                    React.createElement("label", { className: "flex flex-col gap-1 text-xs font-medium" },
+                        "Delimiter",
+                        React.createElement("select", { className: "h-8 rounded border border-rnc-border bg-transparent px-2 text-sm", value: delimiter, onChange: (e) => setDelimiter(e.target.value), "aria-label": "Delimiter" },
+                            DELIMITERS.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.label))),
+                            React.createElement("option", { value: "custom" }, "Other\u2026"))),
+                    delimiter === "custom" ? (React.createElement("label", { className: "flex flex-col gap-1 text-xs font-medium" },
+                        "Other delimiter",
+                        React.createElement(Input, { value: customDelimiter, maxLength: 5, "aria-label": "Other delimiter", onChange: (e) => setCustomDelimiter(e.target.value) }))) : null)) : (React.createElement("div", { className: "flex flex-col gap-2" },
+                    React.createElement("div", { className: "text-xs text-rnc-foreground/70" }, "Click the ruler to create a break line; click it again to remove it."),
+                    React.createElement("div", { className: "overflow-x-auto rounded border border-rnc-border p-2 font-mono text-xs leading-5", "data-testid": "fixed-width-ruler" },
+                        React.createElement("div", { className: "flex select-none" }, Array.from({ length: rulerLength }, (_, index) => {
+                            const position = index + 1;
+                            const active = breaks.includes(position);
+                            return (React.createElement("button", { key: position, type: "button", "aria-label": `Break after character ${position}`, "aria-pressed": active, className: `w-[1ch] shrink-0 border-r ${active ? "border-rnc-primary bg-rnc-primary/20" : "border-transparent"} hover:bg-rnc-accent`, onClick: () => toggleBreak(position) }, position % 10 === 0 ? String(position / 10) : "·"));
+                        })),
+                        sample.map((text, rowIndex) => (React.createElement("div", { key: rowIndex, className: "flex whitespace-pre" }, Array.from({ length: rulerLength }, (_, index) => {
+                            const position = index + 1;
+                            const active = breaks.includes(position);
+                            return (React.createElement("span", { key: position, className: `w-[1ch] shrink-0 border-r ${active ? "border-rnc-primary" : "border-transparent"}` }, text[index] ?? " "));
+                        }))))),
+                    React.createElement("label", { className: "flex flex-col gap-1 text-xs font-medium" },
+                        "Break positions (characters before each break)",
+                        React.createElement(Input, { value: breaksText, placeholder: "e.g. 4, 10", "aria-label": "Break positions", onChange: (e) => {
+                                setBreaksText(e.target.value);
+                                setBreaks(parseBreaks(e.target.value));
+                            } })))),
+                React.createElement("div", { className: "flex flex-col gap-1" },
+                    React.createElement("span", { className: "text-xs font-medium" }, "Data preview"),
+                    React.createElement("div", { className: "max-h-[120px] overflow-auto rounded border border-rnc-border p-2 font-mono text-xs", "data-testid": "text-to-columns-preview" }, sample.map((text, rowIndex) => {
+                        const parts = mode === "fixed"
+                            ? cutAt(text, breaks)
+                            : effectiveDelimiter
+                                ? text.split(effectiveDelimiter)
+                                : [text];
+                        return (React.createElement("div", { key: rowIndex, className: "flex gap-1 whitespace-pre" }, parts.map((part, partIndex) => (React.createElement("span", { key: partIndex, className: "border-r border-rnc-border pr-1 last:border-r-0" }, part.trim() || " ")))));
+                    }))),
+                React.createElement(Separator, null),
+                React.createElement("div", { className: "flex justify-end gap-2" },
+                    React.createElement(Button, { variant: "outline", size: "sm", type: "button", onClick: () => onOpenChange(false) }, "Cancel"),
+                    React.createElement(Button, { size: "sm", type: "button", onClick: commit, disabled: !canApply }, "Finish"))))));
+});
+TextToColumnsDialog.displayName = "TextToColumnsDialog";
+/**
+ * Host-mounted, atom-driven wrapper around {@link TextToColumnsDialog}.
+ * Mount once in the host (alongside the other editor dialogs); the context
+ * menu opens it via `useOpenTextToColumnsDialog`. Without a host the menu
+ * keeps its one-click delimiter items only.
+ */
+export const TextToColumnsDialogHost = () => {
+    useRegisterTextToColumnsDialogHost();
+    const [request, setRequest] = useTextToColumnsDialogState();
+    const close = useCallback(() => setRequest(null), [setRequest]);
+    return (React.createElement(TextToColumnsDialog, { open: request != null, onOpenChange: (open) => {
+            if (!open)
+                close();
+        }, preview: request?.preview ?? [], initialMode: "fixed", onApply: (options) => request?.onApply(options) }));
+};
+TextToColumnsDialogHost.displayName = "TextToColumnsDialogHost";

package/dist/esm/components/toolbar/background-color-selector.d.ts

@@ -4,16 +4,28 @@ import type { Color } from "../../types";
 import type { SpreadsheetTheme } from "../canvas-grid/typings";
 import type { ColorSelectorProps } from "./color-selector";
 import { ColorSelector } from "./color-selector";
+import { type CellFill } from "./fill-selectors";
 type BackgroundColorSelectorProps = {
     disabled?: boolean;
     color?: Color | null;
     theme?: SpreadsheetTheme;
     onChange?(color: Color | undefined): void;
+    /**
+     * The active cell's fill (pattern / gradient fields) — enables the
+     * Pattern and Gradient tabs together with `onChangeFill`. Without
+     * `onChangeFill` the popover is the solid colour picker only.
+     */
+    fill?: CellFill | null;
+    /**
+     * Apply a pattern or gradient fill (Excel: Format Cells → Fill → Pattern /
+     * Fill Effects). Receives the full fill slice so cleared fields reset.
+     */
+    onChangeFill?(fill: CellFill): void;
     /**
      * Custom color selector component
      */
     ColorSelector?: ComponentType<ColorSelectorProps>;
 } & Pick<ComponentProps<typeof ColorSelector>, "userDefinedColors" | "onAddUserDefinedColor">;
-export declare const BackgroundColorSelector: ({ color, theme, onChange, onAddUserDefinedColor, userDefinedColors, disabled, ColorSelector: ColorSelectorComponent, }: BackgroundColorSelectorProps) => React.JSX.Element;
+export declare const BackgroundColorSelector: ({ color, theme, onChange, fill, onChangeFill, onAddUserDefinedColor, userDefinedColors, disabled, ColorSelector: ColorSelectorComponent, }: BackgroundColorSelectorProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=background-color-selector.d.ts.map

package/dist/esm/components/toolbar/background-color-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"background-color-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/background-color-selector.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,KAAK,4BAA4B,GAAG;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACnD,GAAG,IAAI,CACN,cAAc,CAAC,OAAO,aAAa,CAAC,EACpC,mBAAmB,GAAG,uBAAuB,CAC9C,CAAC;AACF,eAAO,MAAM,uBAAuB,GAAI,wHAQrC,4BAA4B,sBAqC9B,CAAC"}
+{"version":3,"file":"background-color-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/background-color-selector.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EACL,KAAK,QAAQ,EAId,MAAM,kBAAkB,CAAC;AAE1B,KAAK,4BAA4B,GAAG;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACnD,GAAG,IAAI,CACN,cAAc,CAAC,OAAO,aAAa,CAAC,EACpC,mBAAmB,GAAG,uBAAuB,CAC9C,CAAC;AACF,eAAO,MAAM,uBAAuB,GAAI,4IAUrC,4BAA4B,sBA+G9B,CAAC"}

package/dist/esm/components/toolbar/background-color-selector.js

@@ -1,28 +1,78 @@
 import { IoMdColorFill } from "@rowsncolumns/icons";
 import { Popover, PopoverContent, PopoverTrigger } from "@rowsncolumns/ui";
-import { IconButton } from "@rowsncolumns/ui";
+import { IconButton, Tabs, TabsContent, TabsList, TabsTrigger, } from "@rowsncolumns/ui";
 import React from "react";
 import { useState } from "react";
 import { useFocusSheet } from "../../atoms";
 import { defaultSpreadsheetTheme } from "../../config";
 import { getStringifiedColor } from "../../themes";
 import { ColorSelector } from "./color-selector";
-export const BackgroundColorSelector = ({ color = "transparent", theme = defaultSpreadsheetTheme, onChange, onAddUserDefinedColor, userDefinedColors, disabled, ColorSelector: ColorSelectorComponent = ColorSelector, }) => {
+import { gradientToCss, GradientFillPicker, PatternFillPicker, } from "./fill-selectors";
+export const BackgroundColorSelector = ({ color = "transparent", theme = defaultSpreadsheetTheme, onChange, fill, onChangeFill, onAddUserDefinedColor, userDefinedColors, disabled, ColorSelector: ColorSelectorComponent = ColorSelector, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const close = () => setIsOpen(false);
     const open = () => setIsOpen(true);
     const colorString = getStringifiedColor(color, theme);
     const focusSheet = useFocusSheet();
+    // The trigger underline previews the effective fill: gradient, then the
+    // pattern colour, then the solid colour.
+    const swatchStyle = fill?.gradient
+        ? {
+            borderBottom: "4px solid transparent",
+            borderImage: `${gradientToCss(fill.gradient)} 1`,
+        }
+        : {
+            borderBottom: `4px ${fill?.fillPattern &&
+                fill.fillPattern !== "none" &&
+                fill.foregroundColor
+                ? getStringifiedColor(fill.foregroundColor, theme)
+                : colorString} solid`,
+        };
+    const solidPicker = (React.createElement(ColorSelectorComponent, { color: color, onChange: (color) => {
+            // A solid pick replaces a gradient (Excel keeps them exclusive) and,
+            // with "No fill", clears the pattern too.
+            if (onChangeFill && (fill?.gradient || (!color && fill?.fillPattern))) {
+                onChangeFill({
+                    backgroundColor: color,
+                    fillPattern: color ? fill?.fillPattern ?? undefined : undefined,
+                    foregroundColor: color
+                        ? fill?.foregroundColor ?? undefined
+                        : undefined,
+                    gradient: undefined,
+                });
+            }
+            else {
+                onChange?.(color);
+            }
+            focusSheet?.();
+            close();
+        }, theme: theme, resetButtonTitle: "No fill", userDefinedColors: userDefinedColors, onAddUserDefinedColor: onAddUserDefinedColor }));
+    const applyFill = (next) => {
+        onChangeFill?.(next);
+        focusSheet?.();
+    };
     return (React.createElement(Popover, { modal: false, open: isOpen, onOpenChange: setIsOpen },
         React.createElement(PopoverTrigger, { asChild: true },
-            React.createElement(IconButton, { className: "text-base flex-row", style: {
-                    borderBottom: `4px ${colorString} solid`,
-                }, tooltip: "Fill color", onClick: open, disabled: disabled },
+            React.createElement(IconButton, { className: "text-base flex-row", style: swatchStyle, tooltip: "Fill color", "aria-label": "Fill color", onClick: open, disabled: disabled },
                 React.createElement(IoMdColorFill, null))),
-        React.createElement(PopoverContent, { align: "start" },
-            React.createElement(ColorSelectorComponent, { color: color, onChange: (color) => {
-                    onChange?.(color);
-                    focusSheet?.();
-                    close();
-                }, theme: theme, resetButtonTitle: "No fill", userDefinedColors: userDefinedColors, onAddUserDefinedColor: onAddUserDefinedColor }))));
+        React.createElement(PopoverContent, { align: "start" }, onChangeFill ? (React.createElement(Tabs, { defaultValue: fill?.gradient
+                ? "gradient"
+                : fill?.fillPattern && fill.fillPattern !== "none"
+                    ? "pattern"
+                    : "solid" },
+            React.createElement(TabsList, { className: "grid-cols-3 mb-2" },
+                React.createElement(TabsTrigger, { value: "solid" }, "Solid"),
+                React.createElement(TabsTrigger, { value: "pattern" }, "Pattern"),
+                React.createElement(TabsTrigger, { value: "gradient" }, "Gradient")),
+            React.createElement(TabsContent, { value: "solid" }, solidPicker),
+            React.createElement(TabsContent, { value: "pattern" },
+                React.createElement(PatternFillPicker, { fill: {
+                        ...fill,
+                        backgroundColor: fill?.backgroundColor ?? color,
+                    }, theme: theme, onChangeFill: applyFill })),
+            React.createElement(TabsContent, { value: "gradient" },
+                React.createElement(GradientFillPicker, { fill: {
+                        ...fill,
+                        backgroundColor: fill?.backgroundColor ?? color,
+                    }, theme: theme, onChangeFill: applyFill })))) : (solidPicker))));
 };

package/dist/esm/components/toolbar/cell-style-selector.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { CellFormat } from "../../types";
+import type { CellFormat, NamedCellStyle } from "../../types";
 import type { SpreadsheetTheme } from "../canvas-grid/typings";
 type WithCellFormat = (value: CellFormat) => void;
 type WithTypeValue<T extends keyof CellFormat> = (type: T, value: CellFormat[T]) => void;
@@ -8,6 +8,13 @@ export type CellStyleSelectorProps = {
     locale?: string;
     theme: SpreadsheetTheme;
     userDefinedStyles?: [string, CellFormat][];
+    /**
+     * Workbook named cell styles imported from `<cellStyles>` ("Heading 1",
+     * "Good", "Accent 1", …). Shown as a "Workbook styles" section ahead of
+     * the built-in gallery; hidden entries and the "Normal" base style are
+     * skipped, as is any entry whose xf resolved to no formatting.
+     */
+    namedCellStyles?: NamedCellStyle[] | null;
     selectedFormat?: CellFormat | null;
     onAddUserDefinedStyle?(name: string): void;
     onChangeFormatting: (...args: Parameters<WithCellFormat | WithTypeValue<keyof CellFormat>>) => void;
@@ -19,7 +26,13 @@ type StyleList = [
     format: CellFormat,
     style?: React.CSSProperties
 ];
+/** Named styles worth showing in the gallery (see `namedCellStyles` prop). */
+export declare const getGalleryNamedCellStyles: (namedCellStyles: NamedCellStyle[] | null | undefined) => Array<NamedCellStyle & {
+    format: CellFormat;
+}>;
+/** CSS preview of a named style's format for the gallery swatch. */
+export declare const getNamedCellStylePreview: (format: CellFormat | undefined, theme: SpreadsheetTheme) => React.CSSProperties;
 export declare const getCellStyles: (theme: SpreadsheetTheme, currencySymbol?: string) => Map<string, StyleList[]>;
-export declare const CellStyleSelector: React.MemoExoticComponent<({ currency, locale, theme, selectedFormat, canAddCustomStyle, onChangeFormatting, onClearFormatting, }: CellStyleSelectorProps) => React.JSX.Element>;
+export declare const CellStyleSelector: React.MemoExoticComponent<({ currency, locale, theme, selectedFormat, namedCellStyles, canAddCustomStyle, onChangeFormatting, onClearFormatting, }: CellStyleSelectorProps) => React.JSX.Element>;
 export {};
 //# sourceMappingURL=cell-style-selector.d.ts.map

package/dist/esm/components/toolbar/cell-style-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cell-style-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/cell-style-selector.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAMrD,OAAO,KAAK,EAAE,UAAU,EAAuB,MAAM,aAAa,CAAC;AACnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,KAAK,cAAc,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;AAClD,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,UAAU,IAAI,CAC/C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KACjB,IAAI,CAAC;AAEV,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC;IAC3C,cAAc,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACnC,qBAAqB,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,kBAAkB,EAAE,CAClB,GAAG,IAAI,EAAE,UAAU,CAAC,cAAc,GAAG,aAAa,CAAC,MAAM,UAAU,CAAC,CAAC,KAClE,IAAI,CAAC;IACV,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,MAAM;IAChB,MAAM,EAAE,UAAU;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa;CAC5B,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,gBAAgB,EACvB,iBAAiB,MAAM,6BAgYxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qIASzB,sBAAsB,uBAwM1B,CAAC"}
+{"version":3,"file":"cell-style-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/cell-style-selector.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAMrD,OAAO,KAAK,EACV,UAAU,EAEV,cAAc,EAEf,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,KAAK,cAAc,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;AAClD,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,UAAU,IAAI,CAC/C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KACjB,IAAI,CAAC;AAEV,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC;IAC3C;;;;;OAKG;IACH,eAAe,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACnC,qBAAqB,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,kBAAkB,EAAE,CAClB,GAAG,IAAI,EAAE,UAAU,CAAC,cAAc,GAAG,aAAa,CAAC,MAAM,UAAU,CAAC,CAAC,KAClE,IAAI,CAAC;IACV,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,MAAM;IAChB,MAAM,EAAE,UAAU;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa;CAC5B,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,yBAAyB,GACpC,iBAAiB,cAAc,EAAE,GAAG,IAAI,GAAG,SAAS,KACnD,KAAK,CAAC,cAAc,GAAG;IAAE,MAAM,EAAE,UAAU,CAAA;CAAE,CAQ7C,CAAC;AAcJ,oEAAoE;AACpE,eAAO,MAAM,wBAAwB,GACnC,QAAQ,UAAU,GAAG,SAAS,EAC9B,OAAO,gBAAgB,KACtB,KAAK,CAAC,aAqBR,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,gBAAgB,EACvB,iBAAiB,MAAM,6BAgYxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,sJAUzB,sBAAsB,uBAsO1B,CAAC"}

package/dist/esm/components/toolbar/cell-style-selector.js

@@ -8,6 +8,45 @@ import React, { memo, useMemo, useRef } from "react";
 import { useFocusSheet } from "../../atoms";
 import { getCurrencySymbol } from "../../helpers";
 import { getStringifiedColor } from "../../themes";
+/** Named styles worth showing in the gallery (see `namedCellStyles` prop). */
+export const getGalleryNamedCellStyles = (namedCellStyles) => (namedCellStyles ?? []).filter((style) => !style.hidden &&
+    style.builtinId !== 0 &&
+    style.name !== "Normal" &&
+    !!style.format &&
+    Object.keys(style.format).length > 0);
+const previewBorder = (border, theme) => border
+    ? `${border.width ?? 1}px ${border.style === "double" ? "double" : "solid"} ${getStringifiedColor(border.color, theme)}`
+    : undefined;
+/** CSS preview of a named style's format for the gallery swatch. */
+export const getNamedCellStylePreview = (format, theme) => {
+    if (!format)
+        return {};
+    const style = {};
+    if (format.backgroundColor) {
+        style.backgroundColor = getStringifiedColor(format.backgroundColor, theme);
+    }
+    const text = format.textFormat;
+    if (text?.color)
+        style.color = getStringifiedColor(text.color, theme);
+    if (text?.bold)
+        style.fontWeight = "bold";
+    if (text?.italic)
+        style.fontStyle = "italic";
+    if (text?.underline)
+        style.textDecoration = "underline";
+    if (text?.fontSize)
+        style.fontSize = text.fontSize;
+    if (text?.fontFamily)
+        style.fontFamily = text.fontFamily;
+    const borders = format.borders;
+    if (borders) {
+        style.borderTop = previewBorder(borders.top, theme);
+        style.borderBottom = previewBorder(borders.bottom, theme);
+        style.borderLeft = previewBorder(borders.left, theme);
+        style.borderRight = previewBorder(borders.right, theme);
+    }
+    return style;
+};
 export const getCellStyles = (theme, currencySymbol) => {
     return new Map([
         [
@@ -383,13 +422,14 @@ export const getCellStyles = (theme, currencySymbol) => {
         ],
     ]);
 };
-export const CellStyleSelector = memo(({ currency, locale, theme, selectedFormat, canAddCustomStyle = false, onChangeFormatting, onClearFormatting, }) => {
+export const CellStyleSelector = memo(({ currency, locale, theme, selectedFormat, namedCellStyles, canAddCustomStyle = false, onChangeFormatting, onClearFormatting, }) => {
     const colorIndexes = [4, 5, 6, 7, 8, 9];
     const colorTints = [0.8, 0.6, 0.4, 0];
     const currencySymbol = getCurrencySymbol(locale, currency);
     const shouldFocusSheetRef = useRef(true);
     const focusSheet = useFocusSheet();
     const cellStyles = useMemo(() => [...getCellStyles(theme, currencySymbol).entries()], [theme, currencySymbol]);
+    const workbookStyles = useMemo(() => getGalleryNamedCellStyles(namedCellStyles), [namedCellStyles]);
     // Number formats
     const numberFormats = [
         [
@@ -434,7 +474,7 @@ export const CellStyleSelector = memo(({ currency, locale, theme, selectedFormat
     const gridClass = "grid grid-cols-3 md:grid-cols-6 gap-1 pb-1";
     return (React.createElement(DropdownMenu, { modal: false },
         React.createElement(DropdownMenuTrigger, { asChild: true },
-            React.createElement(IconButton, { size: "xl", tooltip: "Cell styles", className: "gap-1" },
+            React.createElement(IconButton, { size: "xl", tooltip: "Cell styles", "aria-label": "Cell styles", className: "gap-1" },
                 React.createElement(MdBrush, null),
                 React.createElement("div", { className: "text-xs" }, "Cell styles"),
                 React.createElement(MdOutlineArrowDropDown, null))),
@@ -448,6 +488,10 @@ export const CellStyleSelector = memo(({ currency, locale, theme, selectedFormat
                     shouldFocusSheetRef.current = false;
                 } },
                 React.createElement("div", { className: "max-w-dropdown md:min-w-[400px] p-2 pt-0" },
+                    workbookStyles.length ? (React.createElement("div", null,
+                        React.createElement("div", { className: headingClass }, "Workbook styles"),
+                        React.createElement(Separator, { className: "mb-2" }),
+                        React.createElement("div", { className: gridClass }, workbookStyles.map((namedStyle) => (React.createElement(DropdownMenuItem, { onClick: () => onChangeFormatting(namedStyle.format), className: hoverClass, key: `${namedStyle.name}-${namedStyle.xfId}`, style: getNamedCellStylePreview(namedStyle.format, theme) }, namedStyle.name)))))) : null,
                     cellStyles.map(([category, cellStyleList]) => {
                         return (React.createElement("div", { key: category },
                             React.createElement("div", { className: headingClass }, category),

package/dist/esm/components/toolbar/fill-selectors.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import type { CellFormat, FillPattern, GradientFill } from "../../types";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+/** The fill-related slice of a cell format the fill popover authors. */
+export type CellFill = Pick<CellFormat, "backgroundColor" | "fillPattern" | "foregroundColor" | "gradient">;
+/** Excel's Format Cells → Fill → Pattern Style menu, in Excel's order. */
+export declare const FILL_PATTERN_OPTIONS: ReadonlyArray<{
+    pattern: FillPattern;
+    label: string;
+}>;
+/**
+ * Excel's Fill Effects → Shading styles. `degree` follows OOXML
+ * `<gradientFill degree>`: 0 runs left → right, 90 top → bottom.
+ */
+export declare const GRADIENT_PRESETS: ReadonlyArray<{
+    label: string;
+    gradient: Omit<GradientFill, "stops">;
+}>;
+/** Two-stop gradient from a preset and two colours. */
+export declare const buildGradientFill: (preset: Omit<GradientFill, "stops">, color1: string, color2: string) => GradientFill;
+/**
+ * CSS preview of a gradient fill. OOXML measures the linear angle from the
+ * left→right axis; CSS from the bottom→top axis, so CSS = degree + 90.
+ */
+export declare const gradientToCss: (gradient: GradientFill) => string;
+export type PatternFillPickerProps = {
+    fill?: CellFill | null;
+    theme: SpreadsheetTheme;
+    onChangeFill(fill: CellFill): void;
+};
+/**
+ * Pattern fill authoring (Excel: Format Cells → Fill → Pattern Color /
+ * Pattern Style). The pattern paints in `foregroundColor` over the solid
+ * `backgroundColor`; a gradient on the cell is cleared, as Excel treats the
+ * two as exclusive.
+ */
+export declare const PatternFillPicker: ({ fill, theme, onChangeFill, }: PatternFillPickerProps) => React.JSX.Element;
+export type GradientFillPickerProps = {
+    fill?: CellFill | null;
+    theme: SpreadsheetTheme;
+    onChangeFill(fill: CellFill): void;
+};
+/**
+ * Gradient fill authoring (Excel: Fill Effects → Gradient, two colours +
+ * shading style). Picking a style applies immediately with the two colours;
+ * changing a colour re-applies when the cell already has a gradient.
+ */
+export declare const GradientFillPicker: ({ fill, theme, onChangeFill, }: GradientFillPickerProps) => React.JSX.Element;
+//# sourceMappingURL=fill-selectors.d.ts.map

package/dist/esm/components/toolbar/fill-selectors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fill-selectors.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/fill-selectors.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,wEAAwE;AACxE,MAAM,MAAM,QAAQ,GAAG,IAAI,CACzB,UAAU,EACV,iBAAiB,GAAG,aAAa,GAAG,iBAAiB,GAAG,UAAU,CACnE,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,oBAAoB,EAAE,aAAa,CAAC;IAC/C,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf,CAkBA,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,aAAa,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;CACvC,CASA,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,iBAAiB,GAC5B,QAAQ,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,EACnC,QAAQ,MAAM,EACd,QAAQ,MAAM,KACb,YAMD,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,UAAU,YAAY,KAAG,MAUtD,CAAC;AAqCF,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB,KAAK,EAAE,gBAAgB,CAAC;IACxB,YAAY,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;CACpC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,gCAI/B,sBAAsB,sBA+ExB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB,KAAK,EAAE,gBAAgB,CAAC;IACxB,YAAY,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;CACpC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,gCAIhC,uBAAuB,sBA8FzB,CAAC"}

package/dist/esm/components/toolbar/fill-selectors.js

@@ -0,0 +1,162 @@
+import { Button, ColorPicker, HexColorPicker, Stack } from "@rowsncolumns/ui";
+import React, { useMemo, useState } from "react";
+import { getPatternCanvas } from "../../api/fill-patterns";
+import { getStringifiedColor, STANDARD_COLORS } from "../../themes";
+/** Excel's Format Cells → Fill → Pattern Style menu, in Excel's order. */
+export const FILL_PATTERN_OPTIONS = [
+    { pattern: "gray0625", label: "6.25% Gray" },
+    { pattern: "gray125", label: "12.5% Gray" },
+    { pattern: "lightGray", label: "25% Gray" },
+    { pattern: "mediumGray", label: "50% Gray" },
+    { pattern: "darkGray", label: "75% Gray" },
+    { pattern: "darkHorizontal", label: "Horizontal Stripe" },
+    { pattern: "darkVertical", label: "Vertical Stripe" },
+    { pattern: "darkDown", label: "Reverse Diagonal Stripe" },
+    { pattern: "darkUp", label: "Diagonal Stripe" },
+    { pattern: "darkGrid", label: "Diagonal Crosshatch" },
+    { pattern: "darkTrellis", label: "Thick Diagonal Crosshatch" },
+    { pattern: "lightHorizontal", label: "Thin Horizontal Stripe" },
+    { pattern: "lightVertical", label: "Thin Vertical Stripe" },
+    { pattern: "lightDown", label: "Thin Reverse Diagonal Stripe" },
+    { pattern: "lightUp", label: "Thin Diagonal Stripe" },
+    { pattern: "lightGrid", label: "Thin Horizontal Crosshatch" },
+    { pattern: "lightTrellis", label: "Thin Diagonal Crosshatch" },
+];
+/**
+ * Excel's Fill Effects → Shading styles. `degree` follows OOXML
+ * `<gradientFill degree>`: 0 runs left → right, 90 top → bottom.
+ */
+export const GRADIENT_PRESETS = [
+    { label: "Horizontal", gradient: { type: "linear", degree: 90 } },
+    { label: "Vertical", gradient: { type: "linear", degree: 0 } },
+    { label: "Diagonal up", gradient: { type: "linear", degree: 45 } },
+    { label: "Diagonal down", gradient: { type: "linear", degree: 135 } },
+    {
+        label: "From center",
+        gradient: { type: "path", left: 0.5, right: 0.5, top: 0.5, bottom: 0.5 },
+    },
+];
+/** Two-stop gradient from a preset and two colours. */
+export const buildGradientFill = (preset, color1, color2) => ({
+    ...preset,
+    stops: [
+        { position: 0, color: color1 },
+        { position: 1, color: color2 },
+    ],
+});
+/**
+ * CSS preview of a gradient fill. OOXML measures the linear angle from the
+ * left→right axis; CSS from the bottom→top axis, so CSS = degree + 90.
+ */
+export const gradientToCss = (gradient) => {
+    const stops = gradient.stops
+        .slice()
+        .sort((a, b) => a.position - b.position)
+        .map((stop) => `${stop.color} ${Math.round(stop.position * 100)}%`)
+        .join(", ");
+    if (gradient.type === "path") {
+        return `radial-gradient(circle, ${stops})`;
+    }
+    return `linear-gradient(${((gradient.degree ?? 0) + 90) % 360}deg, ${stops})`;
+};
+const DEFAULT_PATTERN_COLOR = "#000000";
+const PatternSwatch = ({ pattern, foregroundColor, backgroundColor, label, }) => {
+    const url = useMemo(() => {
+        const canvas = getPatternCanvas(pattern, foregroundColor, backgroundColor);
+        try {
+            return canvas?.toDataURL() ?? undefined;
+        }
+        catch {
+            return undefined;
+        }
+    }, [pattern, foregroundColor, backgroundColor]);
+    return (React.createElement("span", { "aria-hidden": "true", className: "block w-full h-full border border-solid border-rnc-border", style: url
+            ? { backgroundImage: `url(${url})`, backgroundRepeat: "repeat" }
+            : { backgroundColor }, title: label }));
+};
+/**
+ * Pattern fill authoring (Excel: Format Cells → Fill → Pattern Color /
+ * Pattern Style). The pattern paints in `foregroundColor` over the solid
+ * `backgroundColor`; a gradient on the cell is cleared, as Excel treats the
+ * two as exclusive.
+ */
+export const PatternFillPicker = ({ fill, theme, onChangeFill, }) => {
+    const background = fill?.backgroundColor
+        ? getStringifiedColor(fill.backgroundColor, theme)
+        : undefined;
+    const patternColor = fill?.foregroundColor
+        ? getStringifiedColor(fill.foregroundColor, theme)
+        : DEFAULT_PATTERN_COLOR;
+    const activePattern = fill?.fillPattern &&
+        fill.fillPattern !== "none" &&
+        fill.fillPattern !== "solid"
+        ? fill.fillPattern
+        : undefined;
+    const apply = (pattern, foregroundColor) => onChangeFill({
+        backgroundColor: fill?.backgroundColor ?? undefined,
+        fillPattern: pattern,
+        foregroundColor: pattern ? foregroundColor : undefined,
+        gradient: undefined,
+    });
+    return (React.createElement(Stack, { direction: "vertical", className: "gap-1" },
+        React.createElement(Button, { variant: "outline", size: "xs", tabIndex: -1, className: "justify-center py-1", onClick: () => apply(undefined, undefined) }, "No pattern"),
+        React.createElement("div", { className: "pt-2 text-xs text-left" }, "Pattern style"),
+        React.createElement("div", { role: "group", "aria-label": "Pattern style", className: "grid grid-cols-6 gap-1" }, FILL_PATTERN_OPTIONS.map(({ pattern, label }) => (React.createElement("button", { type: "button", key: pattern, "aria-label": label, "aria-pressed": activePattern === pattern, className: `w-6 h-6 p-0 border-2 border-solid rounded-sm bg-transparent cursor-pointer ${activePattern === pattern
+                ? "border-rnc-primary"
+                : "border-transparent"}`, onClick: () => apply(pattern, fill?.foregroundColor ? patternColor : undefined) },
+            React.createElement(PatternSwatch, { pattern: pattern, foregroundColor: patternColor, backgroundColor: background, label: label }))))),
+        React.createElement("div", { className: "pt-2 text-xs text-left" }, "Pattern color"),
+        React.createElement(ColorPicker, { value: patternColor, colors: STANDARD_COLORS, onChange: (color) => apply(activePattern ?? "darkGray", color), className: "gap-1" }),
+        React.createElement("div", { className: "flex items-center gap-1" },
+            React.createElement(HexColorPicker, { value: patternColor, onChange: (color) => apply(activePattern ?? "darkGray", color) }))));
+};
+/**
+ * Gradient fill authoring (Excel: Fill Effects → Gradient, two colours +
+ * shading style). Picking a style applies immediately with the two colours;
+ * changing a colour re-applies when the cell already has a gradient.
+ */
+export const GradientFillPicker = ({ fill, theme, onChangeFill, }) => {
+    const existing = fill?.gradient ?? undefined;
+    const [color1, setColor1] = useState(() => existing?.stops?.[0]?.color ??
+        (fill?.backgroundColor
+            ? getStringifiedColor(fill.backgroundColor, theme)
+            : "#FFFFFF"));
+    const [color2, setColor2] = useState(() => existing?.stops?.[existing.stops.length - 1]?.color ?? "#4472C4");
+    const apply = (preset, c1 = color1, c2 = color2) => onChangeFill({
+        backgroundColor: undefined,
+        fillPattern: undefined,
+        foregroundColor: undefined,
+        gradient: buildGradientFill(preset, c1, c2),
+    });
+    const reapply = (c1, c2) => {
+        if (!existing)
+            return;
+        const { stops: _stops, ...preset } = existing;
+        apply(preset, c1, c2);
+    };
+    const isActive = (preset) => !!existing &&
+        existing.type === preset.type &&
+        (preset.type === "path" || (existing.degree ?? 0) === (preset.degree ?? 0));
+    return (React.createElement(Stack, { direction: "vertical", className: "gap-1" },
+        React.createElement(Button, { variant: "outline", size: "xs", tabIndex: -1, className: "justify-center py-1", onClick: () => onChangeFill({
+                backgroundColor: fill?.backgroundColor ?? undefined,
+                fillPattern: fill?.fillPattern ?? undefined,
+                foregroundColor: fill?.foregroundColor ?? undefined,
+                gradient: undefined,
+            }) }, "No gradient"),
+        React.createElement("div", { className: "grid grid-cols-[auto_1fr] items-center gap-2 pt-2 text-xs" },
+            React.createElement("span", null, "Color 1"),
+            React.createElement(HexColorPicker, { value: color1, onChange: (color) => {
+                    setColor1(color);
+                    reapply(color, color2);
+                } }),
+            React.createElement("span", null, "Color 2"),
+            React.createElement(HexColorPicker, { value: color2, onChange: (color) => {
+                    setColor2(color);
+                    reapply(color1, color);
+                } })),
+        React.createElement("div", { className: "pt-2 text-xs text-left" }, "Shading style"),
+        React.createElement("div", { role: "group", "aria-label": "Shading style", className: "grid grid-cols-5 gap-1" }, GRADIENT_PRESETS.map(({ label, gradient }) => (React.createElement("button", { type: "button", key: label, "aria-label": label, "aria-pressed": isActive(gradient), className: `w-8 h-6 p-0 border-2 border-solid rounded-sm cursor-pointer ${isActive(gradient) ? "border-rnc-primary" : "border-rnc-border"}`, style: {
+                backgroundImage: gradientToCss(buildGradientFill(gradient, color1, color2)),
+            }, onClick: () => apply(gradient) }))))));
+};

package/dist/esm/components/toolbar/index.d.ts

@@ -4,6 +4,7 @@ export * from "./scale-selector";
 export * from "./font-size-selector";
 export * from "./text-color-selector";
 export * from "./background-color-selector";
+export * from "./fill-selectors";
 export * from "./merge-cells-selector";
 export * from "./border-selector";
 export * from "./font-family-selector";

package/dist/esm/components/toolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}