@yogiswara/honcho-editor-ui 1.0.0

package/dist/components/editor/HSliderLightMobile.js

@@ -0,0 +1,342 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Stack, Slider, Typography, TextField } from "@mui/material";
+import useHonchoTypography from "@/honchoTheme";
+import useColors from "@/colors";
+export default function HSliderLightMobile(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    const formatValue = (value) => {
+        if (value > 0)
+            return `+${value}`;
+        return value.toString();
+    };
+    const handleInputChange = (event, min, max, onChange) => {
+        const value = event.target.value;
+        if (value === '+' || value === '-')
+            return;
+        let numericValue = parseInt(value, 10);
+        if (isNaN(numericValue))
+            numericValue = 0;
+        const clampedValue = Math.max(min, Math.min(max, numericValue));
+        onChange(clampedValue);
+    };
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1 }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Exposure" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.exposureScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onExposureChange), sx: {
+                                width: "40px",
+                                alignItems: "center",
+                                textAlign: "right",
+                                pr: "4px",
+                                display: "flex",
+                                '& .MuiFilledInput-root': {
+                                    backgroundColor: 'transparent',
+                                    borderRadius: "0px",
+                                    border: 'none',
+                                    '&:before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:after': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:hover:not(.Mui-disabled):before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&.Mui-focused:after': {
+                                        borderBottom: 'none',
+                                    },
+                                },
+                                '& .MuiFilledInput-input': {
+                                    textAlign: 'right',
+                                    padding: 0,
+                                    pr: '4px',
+                                    color: colors.surface,
+                                    fontSize: "14px",
+                                },
+                                '& .Mui-focused': {
+                                    '& .MuiFilledInput-input': {
+                                        backgroundColor: "#1C1B1FB2",
+                                        textAlign: 'right',
+                                        borderRadius: '5px 5px 0px 0px',
+                                        borderBottom: 'none',
+                                        pl: '2px',
+                                    }
+                                }
+                            } })] }), _jsx(Slider, { sx: {
+                        width: "100%",
+                        color: colors.onSurfaceVariant,
+                        '& .MuiSlider-rail': {
+                            background: colors.onSurfaceVariant,
+                            opacity: 1,
+                        },
+                        '& .MuiSlider-thumb': {
+                            background: colors.surface,
+                            opacity: 1,
+                        },
+                        '& .MuiSlider-thumb:hover': {
+                            boxShadow: 'none',
+                        }
+                    }, size: "small", value: props.exposureScore, step: 0.1, min: -5, max: 5, onChange: (_event, newValue) => props.onExposureChange(newValue) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Contrast" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.contrastScore), variant: "filled", onChange: (e) => handleInputChange(e, -5, 5, props.onContrastChange), sx: {
+                                width: "40px",
+                                alignItems: "center",
+                                textAlign: "right",
+                                pr: "4px",
+                                display: "flex",
+                                '& .MuiFilledInput-root': {
+                                    backgroundColor: 'transparent',
+                                    borderRadius: "0px",
+                                    border: 'none',
+                                    '&:before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:after': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:hover:not(.Mui-disabled):before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&.Mui-focused:after': {
+                                        borderBottom: 'none',
+                                    },
+                                },
+                                '& .MuiFilledInput-input': {
+                                    textAlign: 'right',
+                                    padding: 0,
+                                    pr: '4px',
+                                    color: colors.surface,
+                                    fontSize: "14px",
+                                },
+                                '& .Mui-focused': {
+                                    '& .MuiFilledInput-input': {
+                                        backgroundColor: "#1C1B1FB2",
+                                        textAlign: 'right',
+                                        borderRadius: '5px 5px 0px 0px',
+                                        borderBottom: 'none',
+                                        pl: '2px',
+                                    }
+                                }
+                            } })] }), _jsx(Slider, { sx: {
+                        width: "100%",
+                        color: colors.onSurfaceVariant,
+                        '& .MuiSlider-rail': {
+                            background: colors.onSurfaceVariant,
+                            opacity: 1,
+                        },
+                        '& .MuiSlider-thumb': {
+                            background: colors.surface,
+                            opacity: 1,
+                        },
+                        '& .MuiSlider-thumb:hover': {
+                            boxShadow: 'none',
+                        }
+                    }, size: "small", value: props.contrastScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onContrastChange(newValue) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Highlights" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.highlightsScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onHighlightsChange), sx: {
+                                width: "40px",
+                                alignItems: "center",
+                                textAlign: "right",
+                                pr: "4px",
+                                display: "flex",
+                                '& .MuiFilledInput-root': {
+                                    backgroundColor: 'transparent',
+                                    borderRadius: "0px",
+                                    border: 'none',
+                                    '&:before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:after': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:hover:not(.Mui-disabled):before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&.Mui-focused:after': {
+                                        borderBottom: 'none',
+                                    },
+                                },
+                                '& .MuiFilledInput-input': {
+                                    textAlign: 'right',
+                                    padding: 0,
+                                    pr: '4px',
+                                    color: colors.surface,
+                                    fontSize: "14px",
+                                },
+                                '& .Mui-focused': {
+                                    '& .MuiFilledInput-input': {
+                                        backgroundColor: "#1C1B1FB2",
+                                        textAlign: 'right',
+                                        borderRadius: '5px 5px 0px 0px',
+                                        borderBottom: 'none',
+                                        pl: '2px',
+                                    }
+                                }
+                            } })] }), _jsx(Slider, { sx: {
+                        width: "100%",
+                        color: colors.onSurfaceVariant,
+                        '& .MuiSlider-rail': {
+                            background: colors.onSurfaceVariant,
+                            opacity: 1,
+                        },
+                        '& .MuiSlider-thumb': {
+                            background: colors.surface,
+                            opacity: 1,
+                        },
+                        '& .MuiSlider-thumb:hover': {
+                            boxShadow: 'none',
+                        }
+                    }, size: "small", value: props.highlightsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onHighlightsChange(newValue) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Shadows" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.shadowScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onShadowsChange), sx: {
+                                width: "40px",
+                                alignItems: "center",
+                                textAlign: "right",
+                                pr: "4px",
+                                display: "flex",
+                                '& .MuiFilledInput-root': {
+                                    backgroundColor: 'transparent',
+                                    borderRadius: "0px",
+                                    border: 'none',
+                                    '&:before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:after': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:hover:not(.Mui-disabled):before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&.Mui-focused:after': {
+                                        borderBottom: 'none',
+                                    },
+                                },
+                                '& .MuiFilledInput-input': {
+                                    textAlign: 'right',
+                                    padding: 0,
+                                    pr: '4px',
+                                    color: colors.surface,
+                                    fontSize: "14px",
+                                },
+                                '& .Mui-focused': {
+                                    '& .MuiFilledInput-input': {
+                                        backgroundColor: "#1C1B1FB2",
+                                        textAlign: 'right',
+                                        borderRadius: '5px 5px 0px 0px',
+                                        borderBottom: 'none',
+                                        pl: '2px',
+                                    }
+                                }
+                            } })] }), _jsx(Slider, { sx: {
+                        width: "100%",
+                        color: colors.onSurfaceVariant,
+                        '& .MuiSlider-rail': {
+                            background: colors.onSurfaceVariant,
+                            opacity: 1,
+                        },
+                        '& .MuiSlider-thumb': {
+                            background: colors.surface,
+                            opacity: 1,
+                        },
+                        '& .MuiSlider-thumb:hover': {
+                            boxShadow: 'none',
+                        }
+                    }, size: "small", value: props.shadowScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange(newValue) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Whites" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.whiteScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onWhitesChange), sx: {
+                                width: "40px",
+                                alignItems: "center",
+                                textAlign: "right",
+                                pr: "4px",
+                                display: "flex",
+                                '& .MuiFilledInput-root': {
+                                    backgroundColor: 'transparent',
+                                    borderRadius: "0px",
+                                    border: 'none',
+                                    '&:before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:after': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:hover:not(.Mui-disabled):before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&.Mui-focused:after': {
+                                        borderBottom: 'none',
+                                    },
+                                },
+                                '& .MuiFilledInput-input': {
+                                    textAlign: 'right',
+                                    padding: 0,
+                                    pr: '4px',
+                                    color: colors.surface,
+                                    fontSize: "14px",
+                                },
+                                '& .Mui-focused': {
+                                    '& .MuiFilledInput-input': {
+                                        backgroundColor: "#1C1B1FB2",
+                                        textAlign: 'right',
+                                        borderRadius: '5px 5px 0px 0px',
+                                        borderBottom: 'none',
+                                        pl: '2px',
+                                    }
+                                }
+                            } })] }), _jsx(Slider, { sx: {
+                        width: "100%",
+                        color: colors.onSurfaceVariant,
+                        '& .MuiSlider-rail': {
+                            background: colors.onSurfaceVariant,
+                            opacity: 1,
+                        },
+                        '& .MuiSlider-thumb': {
+                            background: colors.surface,
+                            opacity: 1,
+                        },
+                        '& .MuiSlider-thumb:hover': {
+                            boxShadow: 'none',
+                        }
+                    }, size: "small", value: props.whiteScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onWhitesChange(newValue) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Blacks" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.blackScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onBlacksChange), sx: {
+                                width: "40px",
+                                alignItems: "center",
+                                textAlign: "right",
+                                pr: "4px",
+                                display: "flex",
+                                '& .MuiFilledInput-root': {
+                                    backgroundColor: 'transparent',
+                                    borderRadius: "0px",
+                                    border: 'none',
+                                    '&:before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:after': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:hover:not(.Mui-disabled):before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&.Mui-focused:after': {
+                                        borderBottom: 'none',
+                                    },
+                                },
+                                '& .MuiFilledInput-input': {
+                                    textAlign: 'right',
+                                    padding: 0,
+                                    pr: '4px',
+                                    color: colors.surface,
+                                    fontSize: "14px",
+                                },
+                                '& .Mui-focused': {
+                                    '& .MuiFilledInput-input': {
+                                        backgroundColor: "#1C1B1FB2",
+                                        textAlign: 'right',
+                                        borderRadius: '5px 5px 0px 0px',
+                                        borderBottom: 'none',
+                                        pl: '2px',
+                                    }
+                                },
+                            } })] }), _jsx(Slider, { sx: {
+                        width: "100%",
+                        color: colors.onSurfaceVariant,
+                        '& .MuiSlider-rail': {
+                            background: colors.onSurfaceVariant,
+                            opacity: 1,
+                        },
+                        '& .MuiSlider-thumb': {
+                            background: colors.surface,
+                            opacity: 1,
+                        },
+                        '& .MuiSlider-thumb:hover': {
+                            boxShadow: 'none',
+                        }
+                    }, size: "small", value: props.blackScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange(newValue) })] }) }));
+}

package/dist/components/editor/HTabAspectRatioMobile.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/editor/HTabColorAdjustmentMobile.d.ts

@@ -0,0 +1,29 @@
+interface Props {
+    activeSubPanel: string;
+    tempScore: number;
+    tintScore: number;
+    vibranceScore: number;
+    saturationScore: number;
+    exposureScore: number;
+    highlightsScore: number;
+    shadowScore: number;
+    whiteScore: number;
+    blackScore: number;
+    contrastScore: number;
+    clarityScore: number;
+    sharpnessScore: number;
+    onTempChange: (value: number) => void;
+    onTintChange: (value: number) => void;
+    onVibranceChange: (value: number) => void;
+    onSaturationChange: (value: number) => void;
+    onExposureChange: (value: number) => void;
+    onHighlightsChange: (value: number) => void;
+    onShadowsChange: (value: number) => void;
+    onWhitesChange: (value: number) => void;
+    onBlacksChange: (value: number) => void;
+    onContrastChange: (value: number) => void;
+    onClarityChange: (value: number) => void;
+    onSharpnessChange: (value: number) => void;
+}
+export default function HTabColorAdjustmentMobile(props: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/editor/HTabColorAdjustmentMobile.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import HSliderColorMobile from "./HSliderColorMobile";
+import HSliderLightMobile from "./HSliderLightMobile";
+import HSliderDetailsMobile from "./HSliderDetailsMobile";
+export default function HTabColorAdjustmentMobile(props) {
+    switch (props.activeSubPanel) {
+        case 'color':
+            return (_jsx(HSliderColorMobile, { tempScore: props.tempScore, tintScore: props.tintScore, onTempChange: props.onTempChange, onTintChange: props.onTintChange, vibranceScore: props.vibranceScore, onVibranceChange: props.onVibranceChange, saturationScore: props.saturationScore, onSaturationChange: props.onSaturationChange }));
+        case 'light':
+            return (_jsx(HSliderLightMobile, { contrastScore: props.contrastScore, exposureScore: props.exposureScore, highlightsScore: props.highlightsScore, shadowScore: props.shadowScore, whiteScore: props.whiteScore, blackScore: props.blackScore, onExposureChange: props.onExposureChange, onContrastChange: props.onContrastChange, onHighlightsChange: props.onHighlightsChange, onShadowsChange: props.onShadowsChange, onWhitesChange: props.onWhitesChange, onBlacksChange: props.onBlacksChange }));
+        case 'details':
+            return (_jsx(HSliderDetailsMobile, { clarityScore: props.clarityScore, sharpnessScore: props.sharpnessScore, onClarityChange: props.onClarityChange, onSharpnessChange: props.onSharpnessChange }));
+        default:
+            return null;
+    }
+}

package/dist/components/editor/HTabPresetMobile.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+type Preset = {
+    id: string;
+    name: string;
+};
+interface Props {
+    presets: Preset[];
+    selectedPreset: string | null;
+    presetOptionModal: (event: React.MouseEvent<HTMLElement>, presetId: string) => void;
+    onOpenPresetModal: () => void;
+    onSelectPreset: (id: string) => void;
+}
+export default function HTabPresetMobile(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HTabPresetMobile.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Stack, IconButton, CardMedia, Button } from "@mui/material";
+import useColors from "@/colors";
+import useHonchoTypography from "@/honchoTheme";
+// Static `presets` array has been removed.
+export default function HTabPresetMobile(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "column", spacing: 0, sx: { px: "0px", mx: "0px" }, children: [props.presets.map((preset) => (_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(Button, { sx: { ...typography.bodyMedium, color: colors.surface, justifyContent: 'flex-start', flexGrow: 1, textTransform: 'none' }, onClick: () => props.onSelectPreset(preset.id), children: preset.name }), _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [props.selectedPreset === preset.id && (_jsx(CardMedia, { component: "img", image: "v1/svg/check-ratio-editor.svg", sx: { width: "20px", height: "20px", px: "2px" } })), _jsx(IconButton, { "aria-label": preset.name, sx: { px: "8px" }, onClick: (event) => props.presetOptionModal(event, preset.id), children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg", alt: "Options" }) })] })] }, preset.id))), _jsx(Button, { variant: "text", sx: { color: colors.surface, border: "1px solid", borderColor: colors.surface, borderRadius: "40px", mt: "12px", textTransform: 'none' }, onClick: props.onOpenPresetModal, children: "Create Preset" })] }) }));
+}

package/dist/components/editor/HTextField.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface Props {
+    valueName: string;
+    setName: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare function HTextField(props: Props): import("react/jsx-runtime").JSX.Element;
+interface PropsRename {
+    valueName: string;
+    setName: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onSaveRenamePreset: () => void;
+    onCancel: () => void;
+}
+export declare function HTextFieldRename(props: PropsRename): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HTextField.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextField, Stack, Button } from "@mui/material";
+import useHonchoTypography from "@/honchoTheme";
+import useColors from "@/colors";
+export function HTextField(props) {
+    const colors = useColors();
+    const typography = useHonchoTypography();
+    return (_jsx(_Fragment, { children: _jsx(TextField, { autoFocus: true, margin: "dense", id: "name", label: "Preset Name", type: "text", fullWidth: true, variant: "standard", defaultValue: props.valueName, onChange: props.setName, sx: {
+                backgroundColor: "#F6F6F6",
+                p: "7px",
+                borderRadius: "6px",
+                '& .MuiInputLabel-root': {
+                    color: colors.onSurfaceVariant, // A slightly dimmer color for the placeholder
+                    pt: '10px',
+                    pl: '10px',
+                },
+                '& .MuiInput-input': {
+                    color: colors.onSurface,
+                },
+                '& .MuiInputLabel-root.Mui-focused': {
+                    color: colors.onSurfaceVariant, // Or a different color if you prefer
+                },
+            } }) }));
+}
+export function HTextFieldRename(props) {
+    const colors = useColors();
+    const typography = useHonchoTypography();
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "column", spacing: 2, children: [_jsx(TextField, { autoFocus: true, type: "text", fullWidth: true, variant: "standard", defaultValue: props.valueName, onChange: props.setName, sx: {
+                        backgroundColor: "#F6F6F6",
+                        p: "7px",
+                        borderRadius: "6px",
+                        '& .MuiInputLabel-root': {
+                            pt: '10px',
+                            pl: '10px',
+                        },
+                    } }), _jsxs(Stack, { direction: "row", justifyContent: "end", alignItems: "center", children: [_jsx(Button, { color: "primary", onClick: props.onCancel, sx: {
+                                backgroundColor: colors.surface,
+                                color: colors.onSurface,
+                                '&:hover': {
+                                    backgroundColor: colors.onSurfaceVariant1,
+                                },
+                                ...typography.titleMedium,
+                            }, children: "Cancel" }), _jsx(Button, { color: "primary", onClick: props.onSaveRenamePreset, sx: {
+                                backgroundColor: colors.surface,
+                                color: colors.onSurface,
+                                '&:hover': {
+                                    backgroundColor: colors.onSurfaceVariant1,
+                                },
+                                ...typography.titleMedium,
+                            }, children: "Save" })] })] }) }));
+}

package/dist/components/editor/HWatermarkView.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    onSaveWatermark: () => void;
+    onCancelWatermark: () => void;
+}
+export default function HWatermarkView(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HWatermarkView.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { TextField, Button, Stack } from "@mui/material";
+import useColors from "@/colors";
+import useHonchoTypography from "@/honchoTheme";
+export default function HWatermarkView(props) {
+    const colors = useColors();
+    const typography = useHonchoTypography();
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "column", alignItems: "center", spacing: 5, sx: { pt: "20px", color: colors.surface }, children: [_jsx(TextField, { id: "watermark-name", label: "watermark name", variant: "standard", sx: {
+                        '& .MuiInput-underline:before': {
+                            borderBottomColor: colors.surface
+                        },
+                        '& .MuiInputBase-input': {
+                            color: colors.surface
+                        }
+                    } }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(Button, { variant: "text", sx: { color: colors.surface }, children: "Landscape" }), _jsx(Button, { variant: "text", sx: { color: colors.surface }, children: "Portrait" }), _jsx(Button, { variant: "text", sx: { color: colors.surface }, children: "Square" })] })] }) }));
+}