@yogiswara/honcho-editor-ui 2.7.14 → 2.7.16

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 "../../themes/honchoTheme";
+import useColors from "../../themes/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: 0 }, 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: "4px" }, 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: 0 }, 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: "4px" }, 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: 0 }, 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: "4px" }, 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 {};

package/dist/components/editor/HBulkAccordionColorAdjustmentColors.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Stack, Typography, IconButton, CardMedia } from "@mui/material";
+import useHonchoTypography from "../../themes/honchoTheme";
+import useColors from '../../themes/colors';
+export default function HBulkAccordionColorAdjustmentColors(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { children: [_jsx(Stack, { direction: "row", justifyContent: "space-between", sx: { pb: "8px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium }, children: "Temperature" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "2px" }, children: [_jsx(IconButton, { onClick: props.onTempDecreaseMax, sx: {
+                                width: "38.5px",
+                                height: "26px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onTempDecrease, sx: {
+                                width: "38.5px",
+                                height: "26px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "20px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onTempIncrease, sx: {
+                                width: "38.5px",
+                                height: "26px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onTempIncreaseMax, sx: {
+                                width: "38.5px",
+                                height: "26px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", sx: { pb: "8px", pt: "16px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium }, children: "Tint" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "2px" }, children: [_jsx(IconButton, { onClick: props.onTintDecreaseMax, sx: {
+                                width: "38.5px",
+                                height: "26px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onTintDecrease, sx: {
+                                width: "38.5px",
+                                height: "26px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onTintIncrease, sx: {
+                                width: "38.5px",
+                                height: "26px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onTintIncreaseMax, sx: {
+                                width: "38.5px",
+                                height: "26px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", sx: { pb: "8px", pt: "16px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium }, children: "Vibrance" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "2px" }, children: [_jsx(IconButton, { onClick: props.onVibranceDecreaseMax, sx: {
+                                width: "38.5px",
+                                height: "26px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onVibranceDecrease, sx: {
+                                width: "38.5px",
+                                height: "26px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onVibranceIncrease, sx: {
+                                width: "38.5px",
+                                height: "26px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onVibranceIncreaseMax, sx: {
+                                width: "38.5px",
+                                height: "26px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", sx: { pb: "8px", pt: "16px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium }, children: "Saturation" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "2px" }, children: [_jsx(IconButton, { onClick: props.onSaturationDecreaseMax, sx: {
+                                width: "38.5px",
+                                height: "26px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onSaturationDecrease, sx: {
+                                width: "38.5px",
+                                height: "26px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onSaturationIncrease, sx: {
+                                width: "38.5px",
+                                height: "26px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onSaturationIncreaseMax, sx: {
+                                width: "38.5px",
+                                height: "26px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { ml: "2px" } }) })] })] }) }));
+}

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

@@ -0,0 +1,12 @@
+interface Props {
+    onClarityDecreaseMax: () => void;
+    onClarityDecrease: () => void;
+    onClarityIncrease: () => void;
+    onClarityIncreaseMax: () => void;
+    onSharpnessDecreaseMax: () => void;
+    onSharpnessDecrease: () => void;
+    onSharpnessIncrease: () => void;
+    onSharpnessIncreaseMax: () => void;
+}
+export default function HBulkAccordionColorAdjustmentDetails(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HBulkAccordionColorAdjustmentDetails.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Stack, Typography, IconButton, CardMedia } from "@mui/material";
+import useHonchoTypography from "../../themes/honchoTheme";
+import useColors from '../../themes/colors';
+export default function HBulkAccordionColorAdjustmentDetails(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { children: [_jsx(Stack, { direction: "row", justifyContent: "space-between", sx: { pb: "8px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium }, children: "Clarity" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "2px" }, children: [_jsx(IconButton, { onClick: props.onClarityDecreaseMax, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onClarityDecrease, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onClarityIncrease, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onClarityIncreaseMax, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", sx: { pb: "8px", pt: "16px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium }, children: "Sharpness" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "2px" }, children: [_jsx(IconButton, { onClick: props.onSharpnessDecreaseMax, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onSharpnessDecrease, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onSharpnessIncrease, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onSharpnessIncreaseMax, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { ml: "2px" } }) })] })] }) }));
+}

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

@@ -0,0 +1,28 @@
+interface Props {
+    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;
+}
+export default function HBulkAccordionColorAdjustmentLight(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HBulkAccordionColorAdjustmentLight.js

@@ -0,0 +1,177 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Stack, Typography, IconButton, CardMedia } from "@mui/material";
+import useHonchoTypography from "../../themes/honchoTheme";
+import useColors from '../../themes/colors';
+export default function HBulkAccordionColorAdjustmentLight(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { children: [_jsx(Stack, { direction: "row", justifyContent: "space-between", sx: { pb: "8px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium }, children: "Exposure" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "2px" }, children: [_jsx(IconButton, { onClick: props.onExposureDecreaseMax, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onExposureDecrease, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onExposureIncrease, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onExposureIncreaseMax, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", sx: { pb: "8px", pt: "16px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium }, children: "Contrast" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "2px" }, children: [_jsx(IconButton, { onClick: props.onContrastDecreaseMax, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onContrastDecrease, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onContrastIncrease, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onContrastIncreaseMax, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", sx: { pb: "8px", pt: "16px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium }, children: "Highlights" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "2px" }, children: [_jsx(IconButton, { onClick: props.onHighlightsDecreaseMax, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onHighlightsDecrease, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onHighlightsIncrease, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onHighlightsIncreaseMax, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", sx: { py: "8px", pt: "16px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium }, children: "Shadows" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "2px" }, children: [_jsx(IconButton, { onClick: props.onShadowsDecreaseMax, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onShadowsDecrease, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onShadowsIncrease, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onShadowsIncreaseMax, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", sx: { py: "8px", pt: "16px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium }, children: "Whites" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "2px" }, children: [_jsx(IconButton, { onClick: props.onWhitesDecreaseMax, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onWhitesDecrease, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onWhitesIncrease, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onWhitesIncreaseMax, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", sx: { py: "8px", pt: "16px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium }, children: "Blacks" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "2px" }, children: [_jsx(IconButton, { onClick: props.onBlacksDecreaseMax, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onBlacksDecrease, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onBlacksIncrease, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onBlacksIncreaseMax, sx: {
+                                width: "38.5px",
+                                height: "24px",
+                                py: "2px",
+                                mr: "12px",
+                                border: "1px solid white",
+                                borderRadius: "100px",
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { ml: "2px" } }) })] })] }) }));
+}

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

@@ -0,0 +1,53 @@
+interface Props {
+    activeSubPanel: string;
+    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;
+}
+export default function HBulkColorAdjustmentMobile(props: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/editor/HBulkColorAdjustmentMobile.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import HBulkColorMobile from "./HBulkColorMobile";
+import HBulkLightMobile from "./HBulkLightMobile";
+import HBulkDetailsMobile from "./HBulkDetailsMobile";
+export default function HBulkColorAdjustmentMobile(props) {
+    switch (props.activeSubPanel) {
+        case 'color':
+            return (_jsx(HBulkColorMobile, { 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 }));
+        case 'light':
+            return (_jsx(HBulkLightMobile, { 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 }));
+        case 'details':
+            return (_jsx(HBulkDetailsMobile, { onClarityDecreaseMax: props.onClarityDecreaseMax, onClarityDecrease: props.onClarityDecrease, onClarityIncrease: props.onClarityIncrease, onClarityIncreaseMax: props.onClarityIncreaseMax, onSharpnessDecreaseMax: props.onSharpnessDecreaseMax, onSharpnessDecrease: props.onSharpnessDecrease, onSharpnessIncrease: props.onSharpnessIncrease, onSharpnessIncreaseMax: props.onSharpnessIncreaseMax }));
+        default:
+            return null;
+    }
+}

package/dist/components/editor/HBulkColorMobile.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 HBulkColorMobile(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};