@rowsncolumns/spreadsheet 10.2.68

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

@@ -0,0 +1,521 @@
+import { MdOutlineArrowDropDown } from "@rowsncolumns/icons";
+import { MdBrush } from "@rowsncolumns/icons";
+import { DropdownMenuItem, Separator } from "@rowsncolumns/ui";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuPortal, DropdownMenuTrigger, IconButton, } from "@rowsncolumns/ui";
+import { DropdownMenuSeparator } from "@rowsncolumns/ui";
+import { cn } from "@rowsncolumns/ui";
+import React, { memo, useMemo, useRef } from "react";
+import { useFocusSheet } from "../../atoms";
+import { getCurrencySymbol } from "../../helpers";
+import { getStringifiedColor } from "../../themes";
+export const getCellStyles = (theme, currencySymbol) => {
+    return new Map([
+        [
+            "Good, Bad and Neutral",
+            [
+                ["Normal", {}],
+                [
+                    "Good",
+                    {
+                        textFormat: {
+                            color: "#0B5001",
+                        },
+                        backgroundColor: "#BBEDC2",
+                    },
+                    {
+                        backgroundColor: "#BBEDC2",
+                        color: "#0B5001",
+                    },
+                ],
+                [
+                    "Bad",
+                    {
+                        textFormat: {
+                            color: "#920014",
+                        },
+                        backgroundColor: "#FDB9C3",
+                    },
+                    {
+                        backgroundColor: "#FDB9C3",
+                        color: "#920014",
+                    },
+                ],
+                [
+                    "Neutral",
+                    {
+                        textFormat: {
+                            color: "#894402",
+                        },
+                        backgroundColor: "#FFE88B",
+                    },
+                    {
+                        backgroundColor: "#FFE88B",
+                        color: "#894402",
+                    },
+                ],
+            ],
+        ],
+        [
+            "Data and Model",
+            [
+                [
+                    "Calculation",
+                    {
+                        backgroundColor: "#EFEFEF",
+                        textFormat: {
+                            color: "#F66806",
+                            bold: true,
+                            fontSize: 12,
+                        },
+                        borders: {
+                            top: { width: 1, style: "solid", color: { theme: 3 } },
+                            bottom: { width: 1, style: "solid", color: { theme: 3 } },
+                            left: { width: 1, style: "solid", color: { theme: 3 } },
+                            right: { width: 1, style: "solid", color: { theme: 3 } },
+                        },
+                    },
+                    {
+                        backgroundColor: "#EFEFEF",
+                        color: "#F66806",
+                        fontWeight: "bold",
+                        fontSize: 12,
+                        border: `1px solid ${getStringifiedColor({ theme: 3 }, theme)}`,
+                    },
+                ],
+                [
+                    "Check Cell",
+                    {
+                        backgroundColor: "#949494",
+                        textFormat: {
+                            color: { theme: 0 },
+                            bold: true,
+                            fontSize: 12,
+                        },
+                        borders: {
+                            top: { width: 2, style: "double", color: { theme: 3 } },
+                            bottom: { width: 2, style: "double", color: { theme: 3 } },
+                            left: { width: 2, style: "double", color: { theme: 3 } },
+                            right: { width: 2, style: "double", color: { theme: 3 } },
+                        },
+                    },
+                    {
+                        backgroundColor: "#949494",
+                        color: getStringifiedColor({ theme: 0 }, theme),
+                        fontWeight: "bold",
+                        fontSize: 12,
+                        border: `2px double ${getStringifiedColor({ theme: 3 }, theme)}`,
+                    },
+                ],
+                [
+                    "Explanatory text",
+                    {
+                        backgroundColor: { theme: 0 },
+                        textFormat: {
+                            color: { theme: 1 },
+                            italic: true,
+                            fontSize: 12,
+                        },
+                    },
+                    {
+                        backgroundColor: getStringifiedColor({ theme: 0 }, theme),
+                        color: getStringifiedColor({ theme: 1 }, theme),
+                        fontStyle: "italic",
+                        fontSize: 12,
+                    },
+                ],
+                [
+                    "Followed hype",
+                    {
+                        textFormat: {
+                            color: { theme: 10 },
+                            underline: true,
+                            fontSize: 11,
+                        },
+                    },
+                    {
+                        backgroundColor: getStringifiedColor({ theme: 0 }, theme),
+                        color: getStringifiedColor({ theme: 10 }, theme),
+                        textDecoration: "underline",
+                        fontSize: 11,
+                    },
+                ],
+                [
+                    "Hyperlink",
+                    {
+                        textFormat: {
+                            color: {
+                                theme: 10,
+                            },
+                            underline: true,
+                        },
+                    },
+                    {
+                        color: getStringifiedColor({ theme: 10 }, theme),
+                        textDecoration: "underline",
+                    },
+                ],
+                [
+                    "Input",
+                    {
+                        backgroundColor: "#FEC188",
+                        textFormat: {
+                            color: { theme: 1 },
+                            fontSize: 12,
+                        },
+                        borders: {
+                            top: { width: 2, style: "solid", color: { theme: 1, tint: 0.4 } },
+                            bottom: {
+                                width: 2,
+                                style: "solid",
+                                color: { theme: 1, tint: 0.4 },
+                            },
+                            left: {
+                                width: 2,
+                                style: "solid",
+                                color: { theme: 1, tint: 0.4 },
+                            },
+                            right: {
+                                width: 2,
+                                style: "solid",
+                                color: { theme: 1, tint: 0.4 },
+                            },
+                        },
+                    },
+                    {
+                        backgroundColor: "#FEC188",
+                        color: getStringifiedColor({ theme: 1 }, theme),
+                        fontSize: 12,
+                        border: `1px solid ${getStringifiedColor({ theme: 1, tint: 0.4 }, theme)}`,
+                    },
+                ],
+                [
+                    "Note",
+                    {
+                        backgroundColor: "#FFFFC1",
+                        textFormat: {
+                            color: { theme: 1 },
+                        },
+                    },
+                    {
+                        background: "#FFFFC1",
+                        color: getStringifiedColor({ theme: 1 }, theme),
+                    },
+                ],
+                [
+                    "Output",
+                    {
+                        backgroundColor: "#EFEFEF",
+                        textFormat: {
+                            bold: true,
+                            fontSize: 12,
+                            color: { theme: 3 },
+                        },
+                        borders: {
+                            top: { width: 1, style: "solid", color: { theme: 3 } },
+                            bottom: { width: 1, style: "solid", color: { theme: 3 } },
+                            left: { width: 1, style: "solid", color: { theme: 3 } },
+                            right: { width: 1, style: "solid", color: { theme: 3 } },
+                        },
+                    },
+                    {
+                        backgroundColor: "#EFEFEF",
+                        fontWeight: "bold",
+                        fontSize: 12,
+                        border: `1px solid ${getStringifiedColor({ theme: 3 }, theme)}`,
+                        color: getStringifiedColor({ theme: 3 }, theme),
+                    },
+                ],
+                [
+                    "Warning text",
+                    {
+                        textFormat: {
+                            color: "#FB0006",
+                            fontSize: 12,
+                        },
+                    },
+                    {
+                        color: "#FB0006",
+                        fontSize: 12,
+                    },
+                ],
+            ],
+        ],
+        [
+            "Title and Headings",
+            [
+                [
+                    "Heading 1",
+                    {
+                        textFormat: {
+                            color: { theme: 3 },
+                            fontSize: 15,
+                            bold: true,
+                        },
+                        borders: {
+                            bottom: {
+                                width: 2,
+                                style: "solid_medium",
+                                color: { theme: 4 },
+                            },
+                        },
+                    },
+                    {
+                        color: getStringifiedColor({ theme: 3 }, theme),
+                        fontWeight: "bold",
+                        fontSize: 15,
+                        borderBottomWidth: 2,
+                        borderBottomStyle: "solid",
+                        borderBottomColor: getStringifiedColor({ theme: 4 }, theme),
+                    },
+                ],
+                [
+                    "Heading 2",
+                    {
+                        textFormat: {
+                            color: { theme: 3 },
+                            fontSize: 13,
+                            bold: true,
+                        },
+                        borders: {
+                            bottom: {
+                                width: 2,
+                                style: "solid_medium",
+                                color: { theme: 4, tint: 0.4 },
+                            },
+                        },
+                    },
+                    {
+                        color: getStringifiedColor({ theme: 3 }, theme),
+                        fontWeight: "bold",
+                        fontSize: 13,
+                        borderBottomWidth: 2,
+                        borderBottomStyle: "solid",
+                        borderBottomColor: getStringifiedColor({ theme: 4, tint: 0.4 }, theme),
+                    },
+                ],
+                [
+                    "Heading 3",
+                    {
+                        textFormat: {
+                            color: { theme: 3 },
+                            fontSize: 11,
+                            bold: true,
+                        },
+                        borders: {
+                            bottom: {
+                                width: 2,
+                                style: "solid_medium",
+                                color: { theme: 4, tint: 0.4 },
+                            },
+                        },
+                    },
+                    {
+                        color: getStringifiedColor({ theme: 3 }, theme),
+                        fontWeight: "bold",
+                        fontSize: 11,
+                        borderBottomWidth: 2,
+                        borderBottomStyle: "solid",
+                        borderBottomColor: getStringifiedColor({ theme: 4, tint: 0.4 }, theme),
+                    },
+                ],
+                [
+                    "Heading 4",
+                    {
+                        textFormat: {
+                            color: { theme: 3 },
+                            fontSize: 11,
+                            bold: true,
+                        },
+                    },
+                    {
+                        color: getStringifiedColor({ theme: 3 }, theme),
+                        fontWeight: "bold",
+                        fontSize: 11,
+                    },
+                ],
+                [
+                    "Heading 5",
+                    {
+                        textFormat: {
+                            color: { theme: 3 },
+                            fontSize: 18,
+                        },
+                    },
+                    {
+                        color: getStringifiedColor({ theme: 3 }, theme),
+                        fontSize: 14,
+                    },
+                ],
+                [
+                    "Total",
+                    {
+                        textFormat: {
+                            color: { theme: 3 },
+                            fontSize: 11,
+                            bold: true,
+                        },
+                        borders: {
+                            bottom: {
+                                width: 2,
+                                style: "double",
+                                color: { theme: 4 },
+                            },
+                            top: {
+                                width: 1,
+                                style: "solid",
+                                color: { theme: 4 },
+                            },
+                        },
+                    },
+                    {
+                        color: getStringifiedColor({ theme: 3 }, theme),
+                        fontWeight: "bold",
+                        fontSize: 11,
+                        borderBottomWidth: 2,
+                        borderBottomStyle: "double",
+                        borderBottomColor: getStringifiedColor({ theme: 4 }, theme),
+                        borderTopWidth: 1,
+                        borderTopStyle: "solid",
+                        borderTopColor: getStringifiedColor({ theme: 4 }, theme),
+                    },
+                ],
+            ],
+        ],
+    ]);
+};
+export const CellStyleSelector = memo(({ currency, locale, theme, selectedFormat, 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]);
+    // Number formats
+    const numberFormats = [
+        [
+            "Comma",
+            {
+                type: "NUMBER",
+                pattern: "#,##0.00",
+            },
+        ],
+        [
+            "Comma[0]",
+            {
+                type: "NUMBER",
+                pattern: "#,##0",
+            },
+        ],
+        [
+            "Currency",
+            {
+                type: "CURRENCY",
+                pattern: `_("${currencySymbol}"* #,##0.00_);_("${currencySymbol}"* (#,##0.00);_("${currencySymbol}"* "-"??_);_(@_)`,
+            },
+        ],
+        [
+            "Currency[0]",
+            {
+                type: "CURRENCY",
+                pattern: `_("${currencySymbol}"* #,##0_);_("${currencySymbol}"* (#,##0);_("${currencySymbol}"* "-"??_);_(@_)`,
+            },
+        ],
+        [
+            "Percent",
+            {
+                type: "PERCENT",
+                pattern: "0%",
+            },
+        ],
+    ];
+    const hoverClass = "rounded-none hover:outline-solid hover:outline-1 hover:outline hover:outline-offset-1 hover:outline-rnc-primary focus:outline focus:outline-offset-1 focus:outline-rnc-primary hover:bg-transparent focus:bg-transparent text-rnc-foreground";
+    const activeClass = "outline-solid outline outline-offset-1 outline-rnc-primary";
+    const headingClass = "text-xs font-system pt-2 pb-1 text-rnc-foreground";
+    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(MdBrush, null),
+                React.createElement("div", { className: "text-xs" }, "Cell styles"),
+                React.createElement(MdOutlineArrowDropDown, null))),
+        React.createElement(DropdownMenuPortal, null,
+            React.createElement(DropdownMenuContent, { loop: true, align: "start", onFocusOutside: (event) => event.preventDefault(), onCloseAutoFocus: (event) => {
+                    event.preventDefault();
+                    if (shouldFocusSheetRef.current) {
+                        focusSheet?.();
+                    }
+                }, onInteractOutside: () => {
+                    shouldFocusSheetRef.current = false;
+                } },
+                React.createElement("div", { className: "max-w-dropdown md:min-w-[400px] p-2 pt-0" },
+                    cellStyles.map(([category, cellStyleList]) => {
+                        return (React.createElement("div", { key: category },
+                            React.createElement("div", { className: headingClass }, category),
+                            React.createElement(Separator, { className: "mb-2" }),
+                            React.createElement("div", { className: gridClass }, cellStyleList.map(([type, cellFormat, style], index) => {
+                                return (React.createElement(DropdownMenuItem, { onClick: () => {
+                                        if (Object.keys(cellFormat).length) {
+                                            onChangeFormatting(cellFormat);
+                                        }
+                                        else {
+                                            onClearFormatting();
+                                        }
+                                    }, className: hoverClass, key: index, style: style }, type));
+                            }))));
+                    }),
+                    React.createElement("div", { className: headingClass }, "Themed Cell Styles"),
+                    React.createElement(Separator, { className: "mb-2" }),
+                    React.createElement("div", { className: gridClass }, colorIndexes.map((unit, colorIndex) => {
+                        return (React.createElement("div", { className: "grid grid-rows-4 gap-1", key: unit }, colorTints.map((tint, index) => {
+                            const title = tint !== 0
+                                ? ((1 - tint) * 100).toFixed(0) + "% - "
+                                : "";
+                            const backgroundTheme = { theme: unit, tint };
+                            const backgroundColor = getStringifiedColor({ theme: unit, tint }, theme);
+                            const colorTheme = {
+                                theme: index === colorTints.length - 1 ? 0 : 1,
+                            };
+                            const color = getStringifiedColor(colorTheme, theme);
+                            const isActive = isSameColor(selectedFormat?.textFormat?.color, colorTheme, theme) &&
+                                isSameColor(selectedFormat?.backgroundColor, backgroundTheme, theme);
+                            return (React.createElement(DropdownMenuItem, { onClick: () => {
+                                    onChangeFormatting?.({
+                                        backgroundColor: {
+                                            theme: unit,
+                                            tint,
+                                        },
+                                        textFormat: {
+                                            color: colorTheme,
+                                        },
+                                    });
+                                }, style: {
+                                    backgroundColor,
+                                    color,
+                                }, className: cn(hoverClass, isActive ? activeClass : undefined), key: tint },
+                                title,
+                                "Accent ",
+                                colorIndex + 1,
+                                " ",
+                                unit,
+                                " ",
+                                tint));
+                        })));
+                    })),
+                    React.createElement("div", { className: headingClass }, "Number Format"),
+                    React.createElement(Separator, { className: "mb-2" }),
+                    React.createElement("div", { className: gridClass }, numberFormats.map(([type, numberFormat], index) => {
+                        return (React.createElement(DropdownMenuItem, { onClick: () => {
+                                onChangeFormatting("numberFormat", numberFormat);
+                            }, className: hoverClass, key: index }, type));
+                    }))),
+                canAddCustomStyle ? (React.createElement(React.Fragment, null,
+                    React.createElement(DropdownMenuSeparator, null),
+                    React.createElement(DropdownMenuItem, null, "New Cell Style"))) : null))));
+});
+// Check if 2 colors are the same
+const isSameColor = (a, b, theme) => {
+    if (typeof a === "string" && typeof b === "string") {
+        return a === b;
+    }
+    return getStringifiedColor(a, theme) === getStringifiedColor(b, theme);
+};

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

@@ -0,0 +1,13 @@
+import React from "react";
+import type { Color } from "../../types";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+export type ColorSelectorProps = {
+    color?: Color | null;
+    onChange?(color: Color | undefined): void;
+    theme: SpreadsheetTheme;
+    resetButtonTitle?: string;
+    userDefinedColors?: string[];
+    onAddUserDefinedColor?(color: string): void;
+};
+export declare const ColorSelector: ({ color, onChange, theme, resetButtonTitle, userDefinedColors, onAddUserDefinedColor, }: ColorSelectorProps) => React.JSX.Element;
+//# sourceMappingURL=color-selector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/color-selector.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C,KAAK,EAAE,gBAAgB,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,qBAAqB,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,yFAO3B,kBAAkB,sBA8FpB,CAAC"}

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

@@ -0,0 +1,52 @@
+import { Button, ColorPicker, EyeDropper, HexColorPicker, Stack, } from "@rowsncolumns/ui";
+import React from "react";
+import { colorKeys, colorTintsToDisplay, createColorShades, getStringifiedColor, STANDARD_COLORS, } from "../../themes";
+export const ColorSelector = ({ color, onChange, theme, resetButtonTitle = "Automatic", userDefinedColors, onAddUserDefinedColor, }) => {
+    const colorString = getStringifiedColor(color, theme);
+    // Remove hyperlink color
+    const themeColors = [...colorKeys.values()]
+        .slice(0, -1)
+        .map((value) => theme.themeColors[value]?.toLowerCase());
+    return (React.createElement(Stack, { className: "gap-1", direction: "vertical" },
+        React.createElement(Button, { variant: "outline", size: "xs", tabIndex: -1, className: "justify-center py-1", onClick: () => {
+                onChange?.(undefined);
+            } }, resetButtonTitle),
+        React.createElement("div", { className: "pt-2 text-xs text-left" },
+            "Theme colors (",
+            theme.name,
+            ")"),
+        React.createElement(ColorPicker, { value: colorString, onChange: (color) => {
+                onChange?.({
+                    theme: themeColors.indexOf(color),
+                });
+            }, className: "gap-1", colors: themeColors }),
+        React.createElement(Stack, { className: "gap-1" }, colorTintsToDisplay.map((tints, tintIndex) => {
+            const colors = createColorShades(themeColors[tintIndex], tints);
+            return (React.createElement(ColorPicker, { key: tintIndex, direction: "vertical", value: colorString, colors: colors, onChange: (color) => {
+                    const tint = tints[colors.indexOf(color)];
+                    onChange?.({
+                        theme: tintIndex,
+                        tint,
+                    });
+                } }));
+        })),
+        React.createElement("div", { className: "pt-2 text-xs text-left" }, "Standard colors"),
+        React.createElement(ColorPicker, { value: colorString, colors: STANDARD_COLORS, onChange: (color) => {
+                onChange?.(color);
+            }, className: "gap-1" }),
+        React.createElement("div", { className: "pt-2 text-xs text-left" }, "Recent colors"),
+        React.createElement("div", { className: "flex items-center gap-1 max-w-[200px] flex-wrap" },
+            userDefinedColors?.length ? (React.createElement(ColorPicker, { value: colorString, colors: userDefinedColors, onChange: (color) => {
+                    onChange?.(color);
+                }, className: "gap-1" })) : null,
+            React.createElement(HexColorPicker, { value: colorString, onChange: (color) => {
+                    onChange?.(color);
+                    // Add user defined color
+                    onAddUserDefinedColor?.(color);
+                } }),
+            React.createElement(EyeDropper, { value: colorString, onChange: (color) => {
+                    onChange?.(color);
+                    // Add user defined color
+                    onAddUserDefinedColor?.(color);
+                } }))));
+};

package/dist/esm/components/toolbar/font-family-selector.d.ts

@@ -0,0 +1,22 @@
+import type { IconButtonProps } from "@rowsncolumns/ui";
+import React from "react";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+type FontFamilySelectorProps = {
+    value: string | undefined | null;
+    theme: SpreadsheetTheme;
+    fontList?: Array<{
+        value: string;
+        label: string;
+    }>;
+    triggerVariant?: IconButtonProps["variant"];
+    /**
+     * User can provide their own font loader
+     * @param font
+     * @returns
+     */
+    onRequestFonts?: (fonts: string[]) => Promise<void | undefined>;
+    onChange(value: string | undefined): void;
+};
+export declare const FontFamilySelector: React.MemoExoticComponent<({ theme, value, fontList, triggerVariant, onRequestFonts, onChange, }: FontFamilySelectorProps) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=font-family-selector.d.ts.map

package/dist/esm/components/toolbar/font-family-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-family-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/font-family-selector.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAYxD,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI/D,KAAK,uBAAuB,GAAG;IAC7B,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,cAAc,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAC5C;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC,CAAC;IAChE,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;CAC3C,CAAC;AA6HF,eAAO,MAAM,kBAAkB,oGAQ1B,uBAAuB,uBA8D3B,CAAC"}