import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Box, Flex, IconButton, Text } from "@chakra-ui/react";
import { Close } from "@feedloop/icon";
import EditorContext from "@qorebase/app-runtime/src/EditorContext";
import Scrollbars from "rc-scrollbars";
import ThemePicker from "./setting/ThemePicker";
const AppearancePanel = () => {
    const editorActions = EditorContext.useActions();
    return (_jsx(Box, Object.assign({ h: "full", bg: "white", borderLeft: "1px solid", borderColor: "gray.300" }, { children: _jsxs(Scrollbars, Object.assign({ autoHide: true }, { children: [_jsxs(Flex, Object.assign({ h: "10", alignItems: "center", justifyContent: "space-between", pl: "3", borderBottom: "1px solid", borderColor: "gray.300" }, { children: [_jsx(Text, { children: "Appearance" }), _jsx(IconButton, { fontSize: "lg", "aria-label": "Exit Appearance", icon: _jsx(Close, {}), variant: "link", onClick: () => {
                                editorActions.setEditMode("select");
                                editorActions.setRightPanel({ type: "page" });
                            } })] })), _jsx(Box, Object.assign({ p: "4" }, { children: _jsx(ThemePicker, {}) }))] })) })));
};
export default AppearancePanel;
//# sourceMappingURL=AppearancePanel.js.map