@yogiswara/honcho-editor-ui 2.7.14 → 2.7.16

package/dist/components/editor/HAccordionLight.js

@@ -0,0 +1,414 @@
+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 "../../themes/honchoTheme";
+import useColors from '../../themes/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", 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, (val) => props.onExposureChange("exposureScore", val)), 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("exposureScore", newValue), onDoubleClick: () => props.onExposureChange("exposureScore", 0), onMouseDown: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onMouseUp: () => {
+                                props.onDragEnd();
+                            }, onTouchStart: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onTouchEnd: () => {
+                                props.onDragEnd();
+                            } })] }), _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", 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, (val) => props.onContrastChange("contrastScore", val)), 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("contrastScore", newValue), onDoubleClick: () => props.onContrastChange("contrastScore", 0), onMouseDown: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onMouseUp: () => {
+                                props.onDragEnd();
+                            }, onTouchStart: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onTouchEnd: () => {
+                                props.onDragEnd();
+                            } })] }), _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", 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, (val) => props.onHighlightsChange("highlightsScore", val)), 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("highlightsScore", newValue), onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0), onMouseDown: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onMouseUp: () => {
+                                props.onDragEnd();
+                            }, onTouchStart: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onTouchEnd: () => {
+                                props.onDragEnd();
+                            } })] }), _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", 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, (val) => props.onShadowsChange("shadowsScore", val)), 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("shadowsScore", newValue), onDoubleClick: () => props.onShadowsChange("shadowsScore", 0), onMouseDown: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onMouseUp: () => {
+                                props.onDragEnd();
+                            }, onTouchStart: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onTouchEnd: () => {
+                                props.onDragEnd();
+                            } })] }), _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", 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, (val) => props.onWhitesChange("whitesScore", val)), 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("whitesScore", newValue), onDoubleClick: () => props.onWhitesChange("whitesScore", 0), onMouseDown: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onMouseUp: () => {
+                                props.onDragEnd();
+                            }, onTouchStart: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onTouchEnd: () => {
+                                props.onDragEnd();
+                            } })] }), _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", 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, (val) => props.onBlacksChange("blacksScore", val)), 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("blacksScore", newValue), onDoubleClick: () => props.onBlacksChange("blacksScore", 0), onMouseDown: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onMouseUp: () => {
+                                props.onDragEnd();
+                            }, onTouchStart: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onTouchEnd: () => {
+                                props.onDragEnd();
+                            } })] })] }) }));
+}

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,52 @@
+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 "../../themes/honchoTheme";
+import useColors from '../../themes/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: _jsx(Box, { children: _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('preset'), onChange: props.onChange('preset'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, 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: "4px" }, 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", alignItems: "center", sx: { width: "100%" }, children: [_jsx(Box, { sx: { width: 100, flexShrink: 0 }, children: _jsx(Button, { sx: {
+                                                    width: '100px',
+                                                    textWrap: 'nowrap',
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    display: 'block',
+                                                    textTransform: 'none',
+                                                    color: colors.surface,
+                                                    // pr: "120px", // No longer needed since the button is full width
+                                                    pl: "0px",
+                                                    ml: "0px",
+                                                    justifyContent: 'flex-start',
+                                                    ...typography.bodyMedium
+                                                }, onClick: () => props.onSelectPreset(preset.id), children: _jsx(Box, { component: "span", sx: {
+                                                        overflow: "hidden",
+                                                        textOverflow: "ellipsis",
+                                                        whiteSpace: "nowrap",
+                                                        minWidth: 0,
+                                                    }, children: preset.name }) }) }), _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { ml: "auto" }, 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: { p: 0, m: 0 }, 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",
+                                        textTransform: 'none',
+                                    }, onClick: props.onOpenPresetModal, children: "Create Preset" })] }) })] }) }) }));
+}

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

@@ -0,0 +1,8 @@
+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 declare function HAlertPresetSave(): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HAlertBox.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert, IconButton } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import useColors from '../../themes/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' },
+            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' },
+            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' },
+            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: "Connection Problem" }));
+}
+export function HAlertPresetSave() {
+    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' },
+            zIndex: 1300,
+            backgroundColor: colors.onBackground,
+            color: colors.surface
+        }, children: "Saved" }));
+}

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 {};