@yogiswara/honcho-editor-ui 1.0.0

package/dist/components/editor/HAccordionLight.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 HAccordionLight(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    const formatValue = (value) => {
+        if (value > 0)
+            return `+${value}`;
+        return value.toString();
+    };
+    const focusedInputStyle = {
+        backgroundColor: "#1C1B1FB2",
+        borderRadius: '5px 5px 0px 0px',
+        borderBottom: 'none',
+        pl: '2px',
+    };
+    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, { children: [_jsxs(Stack, { direction: "column", gap: "4px", sx: { pt: '6px', pb: '2px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "exposure-input", onDoubleClick: () => props.onExposureChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Exposure" }), _jsx(TextField, { hiddenLabel: true, id: "exposure-input", value: formatValue(props.ExposureScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onExposureChange), sx: {
+                                        width: "40px",
+                                        height: "10px",
+                                        alignItems: "center",
+                                        textAlign: "right",
+                                        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',
+                                                // pr: '8px',
+                                                pl: '2px',
+                                            }
+                                        }
+                                    } })] }), _jsx(Slider, { sx: {
+                                width: "200px",
+                                color: colors.onSurfaceVariant,
+                                '& .MuiSlider-rail': {
+                                    background: colors.onSurfaceVariant,
+                                    opacity: 1,
+                                },
+                                '& .MuiSlider-thumb': {
+                                    background: colors.surface,
+                                    opacity: 1,
+                                    boxShadow: 'none',
+                                }
+                            }, size: "small", value: props.ExposureScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onExposureChange(newValue), onDoubleClick: () => props.onExposureChange(0) })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "contrast-input", onDoubleClick: () => props.onContrastChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Contrast" }), _jsx(TextField, { hiddenLabel: true, id: "contrast-input", value: formatValue(props.ContrastScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onContrastChange), sx: {
+                                        width: "40px",
+                                        height: "10px",
+                                        alignItems: "center",
+                                        textAlign: "right",
+                                        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',
+                                                // pr: '8px',
+                                                pl: '2px',
+                                            }
+                                        }
+                                    } })] }), _jsx(Slider, { sx: {
+                                width: "200px",
+                                color: colors.onSurfaceVariant,
+                                '& .MuiSlider-rail': {
+                                    background: colors.onSurfaceVariant,
+                                    opacity: 1,
+                                },
+                                '& .MuiSlider-thumb': {
+                                    background: colors.surface,
+                                    opacity: 1,
+                                    boxShadow: 'none',
+                                }
+                            }, size: "small", value: props.ContrastScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onContrastChange(newValue), onDoubleClick: () => props.onContrastChange(0) })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "highlights-input", onDoubleClick: () => props.onHighlightsChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Highlights" }), _jsx(TextField, { hiddenLabel: true, id: "highlights-input", value: formatValue(props.HighlightsScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onHighlightsChange), sx: {
+                                        width: "40px",
+                                        height: "10px",
+                                        alignItems: "center",
+                                        textAlign: "right",
+                                        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',
+                                                // pr: '8px',
+                                                pl: '2px',
+                                            }
+                                        }
+                                    } })] }), _jsx(Slider, { sx: {
+                                width: "200px",
+                                color: colors.onSurfaceVariant,
+                                '& .MuiSlider-rail': {
+                                    background: colors.onSurfaceVariant,
+                                    opacity: 1,
+                                },
+                                '& .MuiSlider-thumb': {
+                                    background: colors.surface,
+                                    opacity: 1,
+                                    boxShadow: 'none',
+                                }
+                            }, size: "small", value: props.HighlightsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onHighlightsChange(newValue), onDoubleClick: () => props.onHighlightsChange(0) })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "shadows-input", onDoubleClick: () => props.onShadowsChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Shadows" }), _jsx(TextField, { hiddenLabel: true, id: "shadows-input", value: formatValue(props.ShadowsScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onShadowsChange), sx: {
+                                        width: "40px",
+                                        height: "10px",
+                                        alignItems: "center",
+                                        textAlign: "right",
+                                        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',
+                                                // pr: '8px',
+                                                pl: '2px',
+                                            }
+                                        }
+                                    } })] }), _jsx(Slider, { sx: {
+                                width: "200px",
+                                color: colors.onSurfaceVariant,
+                                '& .MuiSlider-rail': {
+                                    background: colors.onSurfaceVariant,
+                                    opacity: 1,
+                                },
+                                '& .MuiSlider-thumb': {
+                                    background: colors.surface,
+                                    opacity: 1,
+                                    boxShadow: 'none',
+                                }
+                            }, size: "small", value: props.ShadowsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange(newValue), onDoubleClick: () => props.onShadowsChange(0) })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "whites-input", onDoubleClick: () => props.onWhitesChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Whites" }), _jsx(TextField, { hiddenLabel: true, id: "whites-input", value: formatValue(props.WhitesScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onWhitesChange), sx: {
+                                        width: "40px",
+                                        height: "10px",
+                                        alignItems: "center",
+                                        textAlign: "right",
+                                        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',
+                                                // pr: '8px',
+                                                pl: '2px',
+                                            }
+                                        }
+                                    } })] }), _jsx(Slider, { sx: {
+                                width: "200px",
+                                color: colors.onSurfaceVariant,
+                                '& .MuiSlider-rail': {
+                                    background: colors.onSurfaceVariant,
+                                    opacity: 1,
+                                },
+                                '& .MuiSlider-thumb': {
+                                    background: colors.surface,
+                                    opacity: 1,
+                                    boxShadow: 'none',
+                                }
+                            }, size: "small", value: props.WhitesScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onWhitesChange(newValue), onDoubleClick: () => props.onWhitesChange(0) })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "blacks-input", onDoubleClick: () => props.onBlacksChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Blacks" }), _jsx(TextField, { hiddenLabel: true, id: "blacks-input", value: formatValue(props.BlacksScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onBlacksChange), sx: {
+                                        width: "40px",
+                                        height: "10px",
+                                        alignItems: "center",
+                                        textAlign: "right",
+                                        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',
+                                                // pr: '8px',
+                                                pl: '2px',
+                                            }
+                                        }
+                                    } })] }), _jsx(Slider, { sx: {
+                                width: "200px",
+                                color: colors.onSurfaceVariant,
+                                '& .MuiSlider-rail': {
+                                    background: colors.onSurfaceVariant,
+                                    opacity: 1,
+                                },
+                                '& .MuiSlider-thumb': {
+                                    background: colors.surface,
+                                    opacity: 1,
+                                    boxShadow: 'none',
+                                }
+                            }, size: "small", value: props.BlacksScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange(newValue), onDoubleClick: () => props.onBlacksChange(0) })] })] }) }));
+}

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

@@ -0,0 +1,23 @@
+import React from "react";
+type Preset = {
+    id: string;
+    name: string;
+};
+interface Props {
+    presets: Preset[];
+    expandedPanels: string[];
+    selectedPreset: string | null;
+    presetMenuAnchorEl: null | HTMLElement;
+    activePresetMenuId: string | null;
+    onChange: (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => void;
+    onOpenPresetModal: () => void;
+    onOpenWatermarkView: () => void;
+    onSelectPreset: (id: string) => void;
+    onPresetMenuClick: (event: React.MouseEvent<HTMLElement>, presetId: string) => void;
+    onPresetMenuClose: () => void;
+    onRemovePreset: () => void;
+    onRenamePreset: () => void;
+    onDeletePreset: () => void;
+}
+export default function HAccordionPreset(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HAccordionPreset.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Accordion, AccordionDetails, AccordionSummary, Button, Stack, Typography, CardMedia, IconButton } from "@mui/material";
+import useHonchoTypography from "@/honchoTheme";
+import useColors from "@/colors";
+// --- The static presets array has been REMOVED from this component ---
+export default function HAccordionPreset(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    const isMenuOpen = Boolean(props.presetMenuAnchorEl);
+    const accordionStyle = {
+        backgroundColor: colors.onBackground,
+        color: colors.surface,
+        '& .MuiAccordionSummary-root': {
+            backgroundColor: colors.onBackground,
+            color: colors.surface,
+        },
+        '& .MuiAccordionDetails-root': {
+            backgroundColor: colors.onBackground,
+            color: colors.surface,
+        },
+        '& .MuiTypography-root': {
+            color: colors.surface,
+        },
+        '& .MuiSvgIcon-root': {
+            color: colors.surface,
+        }
+    };
+    const isPanelExpanded = (panelName) => props.expandedPanels.includes(panelName);
+    return (_jsx(_Fragment, { children: _jsxs(Box, { children: [_jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('preset'), onChange: props.onChange('preset'), disableGutters: true, children: [_jsx(AccordionSummary, { children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium, color: colors.surface }, children: "Preset" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('preset') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: '10px' }, children: _jsxs(Stack, { direction: "column", gap: "8px", sx: { pt: '0px', pb: '0px', mx: '0px', width: '100%' }, children: [props.presets.map((preset) => (_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [props.selectedPreset != preset.id && (_jsx(Button, { sx: {
+                                                    width: '100px',
+                                                    textWrap: 'nowrap',
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    display: 'block',
+                                                    textTransform: 'none',
+                                                    color: colors.surface,
+                                                    pr: "120px",
+                                                    pl: "0px",
+                                                    ml: "0px",
+                                                    justifyContent: 'flex-start',
+                                                    ...typography.bodyMedium
+                                                }, onClick: () => props.onSelectPreset(preset.id), children: preset.name })), props.selectedPreset === preset.id && (_jsx(Button, { sx: {
+                                                    width: '84px',
+                                                    textWrap: 'nowrap',
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    display: 'block',
+                                                    color: colors.surface,
+                                                    pr: "82px",
+                                                    pl: "0px",
+                                                    ml: "0px",
+                                                    justifyContent: 'flex-start',
+                                                    ...typography.bodyMedium
+                                                }, 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" } })), _jsx(IconButton, { "aria-label": preset.name, onClick: (event) => props.onPresetMenuClick(event, preset.id), sx: { padding: "0px", margin: "0px" }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg", alt: "Options", sx: { padding: "0px", margin: "0px" } }) })] })] }, preset.id))), _jsx(Button, { variant: "text", sx: { color: colors.surface, border: "1px solid",
+                                            borderColor: colors.surface,
+                                            borderRadius: "40px",
+                                            textTransform: 'none',
+                                        }, onClick: props.onOpenPresetModal, children: "Create Preset" })] }) })] }), _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('watermark'), onChange: props.onChange('watermark'), disableGutters: true, children: [_jsx(AccordionSummary, { children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium, color: colors.surface }, children: "Watermark" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('watermark') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { children: _jsxs(Stack, { direction: "column", children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { color: "initial", children: "Jonathan" }), _jsx(IconButton, { "aria-label": "options", children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg", alt: "Options" }) })] }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { color: "initial", children: "Jonathan" }), _jsx(IconButton, { "aria-label": "options", children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg", alt: "Options" }) })] }), _jsx(Button, { variant: "text", sx: { color: colors.surface, border: "1px solid", borderColor: colors.surface, borderRadius: "40px", textTransform: 'none', }, onClick: props.onOpenWatermarkView, children: "Create Watermark" })] }) })] })] }) }));
+}

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

@@ -0,0 +1,7 @@
+export declare function HAlertInternetBox(): import("react/jsx-runtime").JSX.Element;
+export declare function HAlertCopyBox(): import("react/jsx-runtime").JSX.Element;
+interface InternetConProps {
+    onClose: () => void;
+}
+export declare function HAlertInternetConnectionBox(props: InternetConProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HAlertBox.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert, IconButton } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import useColors from "@/colors";
+export function HAlertInternetBox() {
+    const colors = useColors();
+    return (_jsx(Alert, { icon: _jsx("img", { src: "v1/svg/check-ratio-editor.svg" }), sx: { position: 'absolute',
+            top: '10%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: { xs: '90%', sm: 'auto' },
+            minWidth: '270px',
+            zIndex: 1300,
+            backgroundColor: colors.onBackground,
+            color: colors.surface
+        }, children: "No Internet Connection" }));
+}
+export function HAlertCopyBox() {
+    const colors = useColors();
+    return (_jsx(Alert, { icon: _jsx("img", { src: "v1/svg/check-ratio-editor.svg" }), sx: { position: 'absolute',
+            top: '10%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: { xs: '90%', sm: 'auto' },
+            minWidth: '270px',
+            zIndex: 1300,
+            backgroundColor: colors.onBackground,
+            color: colors.surface
+        }, children: "Copied!" }));
+}
+export function HAlertInternetConnectionBox(props) {
+    const colors = useColors();
+    return (_jsx(Alert, { icon: _jsx("img", { src: "v1/svg/check-ratio-editor.svg" }), sx: {
+            position: 'absolute',
+            top: '10%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: { xs: '90%', sm: 'auto' },
+            minWidth: '270px',
+            zIndex: 1300,
+            backgroundColor: colors.onBackground,
+            color: colors.surface
+        }, 
+        // Use the 'action' prop for the close button
+        action: _jsx(IconButton, { "aria-label": "close", color: "inherit", size: "small", onClick: props.onClose, children: _jsx(CloseIcon, { fontSize: "inherit" }) }), children: "No Internet Connection" }));
+}

package/dist/components/editor/HAspectRatioMobile.js

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

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

@@ -0,0 +1,55 @@
+import React from "react";
+interface Props {
+    onTempDecreaseMax: () => void;
+    onTempDecrease: () => void;
+    onTempIncrease: () => void;
+    onTempIncreaseMax: () => void;
+    onTintDecreaseMax: () => void;
+    onTintDecrease: () => void;
+    onTintIncrease: () => void;
+    onTintIncreaseMax: () => void;
+    onVibranceDecreaseMax: () => void;
+    onVibranceDecrease: () => void;
+    onVibranceIncrease: () => void;
+    onVibranceIncreaseMax: () => void;
+    onSaturationDecreaseMax: () => void;
+    onSaturationDecrease: () => void;
+    onSaturationIncrease: () => void;
+    onSaturationIncreaseMax: () => void;
+    onExposureDecreaseMax: () => void;
+    onExposureDecrease: () => void;
+    onExposureIncrease: () => void;
+    onExposureIncreaseMax: () => void;
+    onContrastDecreaseMax: () => void;
+    onContrastDecrease: () => void;
+    onContrastIncrease: () => void;
+    onContrastIncreaseMax: () => void;
+    onHighlightsDecreaseMax: () => void;
+    onHighlightsDecrease: () => void;
+    onHighlightsIncrease: () => void;
+    onHighlightsIncreaseMax: () => void;
+    onShadowsDecreaseMax: () => void;
+    onShadowsDecrease: () => void;
+    onShadowsIncrease: () => void;
+    onShadowsIncreaseMax: () => void;
+    onWhitesDecreaseMax: () => void;
+    onWhitesDecrease: () => void;
+    onWhitesIncrease: () => void;
+    onWhitesIncreaseMax: () => void;
+    onBlacksDecreaseMax: () => void;
+    onBlacksDecrease: () => void;
+    onBlacksIncrease: () => void;
+    onBlacksIncreaseMax: () => void;
+    onClarityDecreaseMax: () => void;
+    onClarityDecrease: () => void;
+    onClarityIncrease: () => void;
+    onClarityIncreaseMax: () => void;
+    onSharpnessDecreaseMax: () => void;
+    onSharpnessDecrease: () => void;
+    onSharpnessIncrease: () => void;
+    onSharpnessIncreaseMax: () => void;
+    expandedPanels: string[];
+    onPanelChange: (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => void;
+}
+export default function HBulkAccordionColorAdjustment(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HBulkAccordionColorAdjustment.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Accordion, AccordionDetails, AccordionSummary, CardMedia, Stack, Typography } from "@mui/material";
+import useHonchoTypography from "@/honchoTheme";
+import useColors from "@/colors";
+import HBulkAccordionColorAdjustmentColors from "./HBulkAccordionColorAdjustmentColors";
+import HBulkAccordionColorAdjustmentLight from "./HBulkAccordionColorAdjustmentLight";
+import HBulkAccordionColorAdjustmentDetails from "./HBulkAccordionColorAdjustmentDetails";
+export default function HBulkAccordionColorAdjustment(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    const accordionStyle = {
+        backgroundColor: colors.onBackground,
+        color: colors.surface,
+        '& .MuiAccordionSummary-root': {
+            backgroundColor: colors.onBackground,
+            color: colors.surface,
+        },
+        '& .MuiAccordionDetails-root': {
+            backgroundColor: colors.onBackground,
+            color: colors.surface,
+        },
+        '& .MuiTypography-root': {
+            color: colors.surface,
+        },
+        '& .MuiSvgIcon-root': {
+            color: colors.surface,
+        }
+    };
+    const isPanelExpanded = (panelName) => props.expandedPanels.includes(panelName);
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "column", sx: { accordionStyle }, children: [_jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('whiteBalance'), onChange: props.onPanelChange('whiteBalance'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: "10px" }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium }, children: "Color" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('whiteBalance') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: 0 }, children: _jsx(HBulkAccordionColorAdjustmentColors, { onTempDecreaseMax: props.onTempDecreaseMax, onTempDecrease: props.onTempDecrease, onTempIncrease: props.onTempIncrease, onTempIncreaseMax: props.onTempIncreaseMax, onTintDecreaseMax: props.onTintDecreaseMax, onTintDecrease: props.onTintDecrease, onTintIncrease: props.onTintIncrease, onTintIncreaseMax: props.onTintIncreaseMax, onVibranceDecreaseMax: props.onVibranceDecreaseMax, onVibranceDecrease: props.onVibranceDecrease, onVibranceIncrease: props.onVibranceIncrease, onVibranceIncreaseMax: props.onVibranceIncreaseMax, onSaturationDecreaseMax: props.onSaturationDecreaseMax, onSaturationDecrease: props.onSaturationDecrease, onSaturationIncrease: props.onSaturationIncrease, onSaturationIncreaseMax: props.onSaturationIncreaseMax }) })] }), _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('light'), onChange: props.onPanelChange('light'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: "10px" }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium }, children: "Light" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('light') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: 0 }, children: _jsx(HBulkAccordionColorAdjustmentLight, { onExposureDecreaseMax: props.onExposureDecreaseMax, onExposureDecrease: props.onExposureDecrease, onExposureIncrease: props.onExposureIncrease, onExposureIncreaseMax: props.onExposureIncreaseMax, onContrastDecreaseMax: props.onContrastDecreaseMax, onContrastDecrease: props.onContrastDecrease, onContrastIncrease: props.onContrastIncrease, onContrastIncreaseMax: props.onContrastIncreaseMax, onHighlightsDecreaseMax: props.onHighlightsDecreaseMax, onHighlightsDecrease: props.onHighlightsDecrease, onHighlightsIncrease: props.onHighlightsIncrease, onHighlightsIncreaseMax: props.onHighlightsIncreaseMax, onShadowsDecreaseMax: props.onShadowsDecreaseMax, onShadowsDecrease: props.onShadowsDecrease, onShadowsIncrease: props.onShadowsIncrease, onShadowsIncreaseMax: props.onShadowsIncreaseMax, onWhitesDecreaseMax: props.onWhitesDecreaseMax, onWhitesDecrease: props.onWhitesDecrease, onWhitesIncrease: props.onWhitesIncrease, onWhitesIncreaseMax: props.onWhitesIncreaseMax, onBlacksDecreaseMax: props.onBlacksDecreaseMax, onBlacksDecrease: props.onBlacksDecrease, onBlacksIncrease: props.onBlacksIncrease, onBlacksIncreaseMax: props.onBlacksIncreaseMax }) })] }), _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('details'), onChange: props.onPanelChange('details'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: "10px" }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium }, children: "Details" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('details') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: 0 }, children: _jsx(HBulkAccordionColorAdjustmentDetails, { onClarityDecreaseMax: props.onClarityDecreaseMax, onClarityDecrease: props.onClarityDecrease, onClarityIncrease: props.onClarityIncrease, onClarityIncreaseMax: props.onClarityIncreaseMax, onSharpnessDecreaseMax: props.onSharpnessDecreaseMax, onSharpnessDecrease: props.onSharpnessDecrease, onSharpnessIncrease: props.onSharpnessIncrease, onSharpnessIncreaseMax: props.onSharpnessIncreaseMax }) })] })] }) }));
+}

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

@@ -0,0 +1,20 @@
+interface Props {
+    onTempDecreaseMax: () => void;
+    onTempDecrease: () => void;
+    onTempIncrease: () => void;
+    onTempIncreaseMax: () => void;
+    onTintDecreaseMax: () => void;
+    onTintDecrease: () => void;
+    onTintIncrease: () => void;
+    onTintIncreaseMax: () => void;
+    onVibranceDecreaseMax: () => void;
+    onVibranceDecrease: () => void;
+    onVibranceIncrease: () => void;
+    onVibranceIncreaseMax: () => void;
+    onSaturationDecreaseMax: () => void;
+    onSaturationDecrease: () => void;
+    onSaturationIncrease: () => void;
+    onSaturationIncreaseMax: () => void;
+}
+export default function HBulkAccordionColorAdjustmentColors(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};