@it-consultis/page-builder 1.1.34

package/controls/MediaLibraryControl/MediaLibraryControl.js

@@ -0,0 +1,537 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _DeleteOutline = _interopRequireDefault(require("@mui/icons-material/DeleteOutline"));
+var _SettingsOutlined = _interopRequireDefault(require("@mui/icons-material/SettingsOutlined"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Container = _interopRequireDefault(require("@mui/material/Container"));
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _OutlinedInput = _interopRequireDefault(require("@mui/material/OutlinedInput"));
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+var _styles = require("@mui/material/styles");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _reactQuery = require("@tanstack/react-query");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _itcFileBrowser = require("itc-file-browser");
+var _react = _interopRequireWildcard(require("react"));
+var _store = require("../../store");
+var _useSortable = _interopRequireDefault(require("../../hooks/useSortable"));
+var _FileBrowserDialog = _interopRequireDefault(require("./FileBrowserDialog"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const normalizeClassName = className => {
+  if (!className) return [];
+  return Array.isArray(className) ? className : [className];
+};
+const PREFIX = 'MediaControl';
+const classes = {
+  root: `${PREFIX}-root`,
+  header: `${PREFIX}-header`,
+  media: `${PREFIX}-media`,
+  mediaThumbnail: `${PREFIX}-mediaThumbnail`,
+  mediaImg: `${PREFIX}-mediaImg`,
+  mediaName: `${PREFIX}-mediaName`,
+  mediaActions: `${PREFIX}-mediaActions`,
+  mediaActionBtn: `${PREFIX}-mediaActionBtn`,
+  mediaActionIcon: `${PREFIX}-mediaActionIcon`,
+  help: `${PREFIX}-help`,
+  required: `${PREFIX}-required`,
+  loader: `${PREFIX}-loader`
+};
+const Root = (0, _styles.styled)(_Container.default)(({
+  theme
+}) => ({
+  '*': {
+    boxSizing: 'border-box'
+  },
+  [`&.${classes.root}`]: {
+    border: '1px solid #eee',
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+    width: '100%',
+    marginLeft: 0,
+    padding: theme.spacing(2),
+    fontSize: theme.typography.fontSize,
+    position: 'relative'
+  },
+  [`& .${classes.media}`]: {
+    border: '1px solid #eee',
+    position: 'relative',
+    cursor: 'move'
+  },
+  [`& .${classes.mediaThumbnail}`]: {
+    width: '100%',
+    height: 100,
+    padding: theme.spacing(1),
+    background: '#eee',
+    position: 'relative',
+    textAlign: 'center'
+  },
+  [`& .${classes.mediaImg}`]: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain'
+  },
+  [`& .${classes.mediaName}`]: {
+    borderTop: '1px solid #eee',
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    lineHeight: theme.spacing(3),
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  },
+  [`& .${classes.mediaActions}`]: {
+    position: 'absolute',
+    display: 'flex',
+    justifyContent: 'flex-end',
+    left: 0,
+    top: 0,
+    width: '100%',
+    padding: 4,
+    gap: 4
+  },
+  [`& .${classes.mediaActionBtn}`]: {
+    padding: 3,
+    minWidth: 0,
+    borderRadius: '100%'
+  },
+  [`& .${classes.mediaActionIcon}`]: {
+    width: 16,
+    height: 16
+  },
+  [`& .${classes.help}`]: {
+    marginTop: theme.spacing(1)
+  },
+  [`& .${classes.required}`]: {
+    color: theme.palette.error.main
+  },
+  [`& .${classes.loader}`]: {
+    top: 0,
+    left: 0,
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 10,
+    background: 'rgba(255, 255, 255, 0.5)'
+  }
+}));
+const extensionsByType = {
+  image: ['.jpg', '.jpeg', '.png', '.svg', '.webp'],
+  video: ['.mp4', '.webm'],
+  document: ['.pdf', '.docx', '.doc', '.txt']
+};
+const FiltersMenu = props => {
+  const {
+    media,
+    onChange
+  } = props;
+  const [open, setOpen] = (0, _react.useState)(false);
+  const settingsButtonRef = (0, _react.useRef)(null);
+  const settings = media.settings || {
+    version: 0,
+    filter: {
+      name: '',
+      value: 100
+    }
+  };
+  const values = {
+    '': [100],
+    brightness: [0, 50, 75, 90, 95, 100, 105, 110, 125, 150],
+    contrast: [0, 50, 75, 100, 125, 150],
+    saturate: [0, 50, 100, 150, 200],
+    grayscale: [0, 100],
+    sepia: [0, 100]
+  };
+  const handleChange = partialSettings => {
+    const newSettings = {
+      ...settings,
+      version: settings.version + 1,
+      ...partialSettings
+    };
+    onChange({
+      ...media,
+      settings: newSettings
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      className: classes.mediaActionBtn,
+      "aria-label": "Settings",
+      color: "primary",
+      variant: "contained",
+      size: "small",
+      ref: settingsButtonRef,
+      onClick: () => {
+        setOpen(true);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsOutlined.default, {
+        className: classes.mediaActionIcon
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
+      sx: {},
+      anchorEl: settingsButtonRef.current,
+      open: open,
+      onClose: () => {
+        setOpen(false);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+        disableRipple: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
+          width: 260,
+          spacing: 1,
+          container: true,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+            item: true,
+            xs: 8,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
+              size: "small",
+              variant: "outlined",
+              fullWidth: true,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+                shrink: true,
+                children: "Filter"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Select.default, {
+                input: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OutlinedInput.default, {
+                  notched: true,
+                  label: "Filter"
+                }),
+                value: settings.filter.name,
+                onChange: ev => {
+                  const filterName = ev.target.value;
+                  const filterValues = values[filterName];
+                  const value = filterValues.includes(settings.filter.value) ? settings.filter.value : filterValues[filterValues.length - 1];
+                  handleChange({
+                    filter: {
+                      ...settings.filter,
+                      name: filterName,
+                      value
+                    }
+                  });
+                },
+                displayEmpty: true,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+                  disableRipple: true,
+                  value: "",
+                  children: "None"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+                  disableRipple: true,
+                  value: "brightness",
+                  children: "Brightness"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+                  disableRipple: true,
+                  value: "contrast",
+                  children: "Contrast"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+                  disableRipple: true,
+                  value: "saturate",
+                  children: "Saturate"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+                  disableRipple: true,
+                  value: "grayscale",
+                  children: "Grayscale"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+                  disableRipple: true,
+                  value: "sepia",
+                  children: "Sepia"
+                })]
+              })]
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+            item: true,
+            xs: 4,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl.default, {
+              size: "small",
+              disabled: settings.filter.name === '',
+              fullWidth: true,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+                value: settings.filter.value,
+                onChange: ev => {
+                  handleChange({
+                    filter: {
+                      ...settings.filter,
+                      value: ev.target.value
+                    }
+                  });
+                },
+                children: values[settings.filter.name].map(v => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+                  value: v,
+                  children: v
+                }, v))
+              })
+            })
+          })]
+        })
+      })
+    })]
+  });
+};
+const MediaControlItem = props => {
+  const {
+    media,
+    type,
+    size,
+    onRemove,
+    onChange,
+    disableFilters
+  } = props;
+  const storage = (0, _store.useObjectStorage)();
+  const mediaUrlQuery = (0, _reactQuery.useQuery)({
+    queryKey: ['mediaUrl', media.id],
+    queryFn() {
+      if (!storage) {
+        throw new Error('ObjectStorage is not defined');
+      }
+      if (type === 'image') {
+        return storage.imagePreviewUrl({
+          key: media.key,
+          width: 144
+        });
+      }
+      return storage.objectUrl({
+        key: media.key
+      });
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+    "data-id": media.id,
+    ...size,
+    item: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _clsx.default)(classes.media, 'sortable-item'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: classes.mediaThumbnail,
+        children: [type === 'image' && mediaUrlQuery.data && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: mediaUrlQuery.data,
+          className: classes.mediaImg,
+          alt: ""
+        }), type === 'image' && media.key && !mediaUrlQuery.data && !mediaUrlQuery.isError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+          size: 24
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classes.mediaName,
+        children: media.name
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: classes.mediaActions,
+        children: [!disableFilters && /*#__PURE__*/(0, _jsxRuntime.jsx)(FiltersMenu, {
+          media: media,
+          onChange: onChange
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          className: classes.mediaActionBtn,
+          "aria-label": "Delete",
+          color: "primary",
+          variant: "contained",
+          size: "small",
+          onClick: () => onRemove(media.id),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteOutline.default, {
+            className: classes.mediaActionIcon
+          })
+        })]
+      })]
+    })
+  }, media.id);
+};
+const MediaControlComponent = props => {
+  const {
+    type,
+    cardinality = 1,
+    onChange,
+    initialData,
+    label,
+    required,
+    permissions: propsPermissions,
+    mediaGridItemSize = {
+      xs: 6
+    },
+    itemActions,
+    disableFilters,
+    className
+  } = props;
+  const allowedExtensions = (0, _react.useMemo)(() => {
+    if (type) {
+      return extensionsByType[type];
+    }
+    return [];
+  }, [type]);
+  const permissions = (0, _react.useMemo)(() => {
+    if (propsPermissions) {
+      return propsPermissions;
+    }
+    return {
+      ..._itcFileBrowser.denyAllPermissions,
+      canUpload: true,
+      canMkdir: true
+    };
+  }, [propsPermissions]);
+  const initialDataArray = (0, _react.useMemo)(() => {
+    if (!initialData) {
+      return [];
+    }
+    return Array.isArray(initialData) ? initialData : [initialData];
+  }, [initialData]);
+  const [open, setOpen] = (0, _react.useState)(false);
+  const [data, setData] = (0, _react.useState)(initialDataArray);
+  const dataRef = (0, _react.useRef)(data);
+  const isExternalUpdateRef = (0, _react.useRef)(false);
+  const isInitializedRef = (0, _react.useRef)(false);
+  dataRef.current = data;
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const remaining = cardinality - data.length;
+  const addMedias = async medias => {
+    isInitializedRef.current = false;
+    isExternalUpdateRef.current = false;
+    setData([...data, ...medias.filter(newMedia => !data.find(m => m.id === newMedia.id))]);
+  };
+  const sortable = (0, _useSortable.default)({
+    disabled: data.length <= 1,
+    onUpdate(_, instance) {
+      const ids = instance.toArray();
+      if (!ids) {
+        return;
+      }
+      isInitializedRef.current = false;
+      isExternalUpdateRef.current = false;
+      setData(ids.map(id => {
+        return dataRef.current.find(datum => datum.id === id);
+      }));
+    }
+  });
+  const removeMedia = (0, _react.useCallback)(mediaId => {
+    isInitializedRef.current = false;
+    isExternalUpdateRef.current = false;
+    setData(data.filter(m => {
+      if (m.id === mediaId) {
+        return false;
+      }
+      return true;
+    }));
+  }, [data]);
+  const onMediaChange = newMedia => {
+    isInitializedRef.current = false;
+    isExternalUpdateRef.current = false;
+    setData(data.map(m => {
+      if (m.id === newMedia.id) {
+        return newMedia;
+      }
+      return m;
+    }));
+  };
+  (0, _react.useEffect)(() => {
+    const initialIds = initialDataArray.map(m => `${m.id}:${m.settings?.version || 0}`).join(',');
+    const ids = data.map(m => `${m.id}:${m.settings?.version || 0}`).join(',');
+    if (initialIds === ids) {
+      return;
+    }
+    if (isExternalUpdateRef.current) {
+      isExternalUpdateRef.current = false;
+      return;
+    }
+    const isExternalDataChange = isInitializedRef.current && initialIds !== ids && (initialDataArray.length > 0 && data.length === 0 || initialDataArray.length === 0 && data.length > 0);
+    if (isExternalDataChange) {
+      isExternalUpdateRef.current = true;
+      setData(initialDataArray);
+      return;
+    }
+    const isUserOperation = isInitializedRef.current && (initialDataArray.length === 0 && data.length > 0 || initialDataArray.length > 0 && data.length > 0 && initialIds !== ids);
+    if (isUserOperation) {
+      isInitializedRef.current = false;
+    }
+    if (!isInitializedRef.current) {
+      isInitializedRef.current = true;
+    }
+    if (cardinality > 1 || cardinality < 0) {
+      onChange(data);
+    } else if (data.length >= 1) {
+      onChange(data[0]);
+    } else {
+      onChange(null);
+    }
+  }, [cardinality, data, initialDataArray, onChange]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+    className: (0, _clsx.default)(classes.root, ...normalizeClassName(className)),
+    disableGutters: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
+      container: true,
+      spacing: 2,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FileBrowserDialog.default, {
+        allowedExtensions: allowedExtensions,
+        cardinality: remaining,
+        open: open,
+        onClose: () => {
+          setOpen(false);
+        },
+        onSelect: addMedias,
+        permissions: permissions
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
+        item: true,
+        xs: 12,
+        className: classes.header,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: "body1",
+          component: "span",
+          children: label
+        }), required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: "body1",
+          component: "span",
+          className: classes.required,
+          children: "*"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+        item: true,
+        xs: 12,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
+          container: true,
+          spacing: 2,
+          ref: sortable.containerRef,
+          children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: classes.loader,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+              size: 24
+            })
+          }), data.map(media => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(MediaControlItem, {
+              onChange: onMediaChange,
+              media: media,
+              onRemove: removeMedia,
+              size: mediaGridItemSize,
+              type: type,
+              disableFilters: disableFilters,
+              Actions: itemActions
+            }, media.id);
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
+        item: true,
+        xs: 12,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          onClick: () => setOpen(true),
+          disabled: remaining === 0 || loading,
+          color: "primary",
+          variant: "outlined",
+          size: "small",
+          children: "Select media"
+        }), cardinality >= 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+          className: classes.help,
+          variant: "caption",
+          component: "p",
+          children: [remaining <= 0 && 'The maximum number of media items have been selected.', remaining === 1 && 'One media item remaining.', remaining > 1 && `${remaining} media items remaining.`]
+        })]
+      })]
+    })
+  });
+};
+const MediaControl = /*#__PURE__*/(0, _react.memo)(MediaControlComponent);
+var _default = exports.default = MediaControl;

package/controls/MediaLibraryControl/index.d.ts

@@ -0,0 +1,3 @@
+import MediaLibraryControl from './MediaLibraryControl';
+export type { MediaItem } from './MediaLibraryControl';
+export default MediaLibraryControl;

package/controls/MediaLibraryControl/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _MediaLibraryControl = _interopRequireDefault(require("./MediaLibraryControl"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _MediaLibraryControl.default;

package/controls/PaddingMarginControl/PaddingMarginControl.d.ts

@@ -0,0 +1,30 @@
+declare const padding: {
+    paddingTop: string;
+    paddingRight: string;
+    paddingBottom: string;
+    paddingLeft: string;
+};
+declare const margin: {
+    marginTop: string;
+    marginRight: string;
+    marginBottom: string;
+    marginLeft: string;
+};
+export type Margin = typeof margin;
+export type Padding = typeof padding;
+export type PaddingKey = keyof Padding;
+export type MarginKey = keyof Margin;
+export declare const paddingKeys: ("paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft")[];
+export declare const marginKeys: ("marginTop" | "marginRight" | "marginBottom" | "marginLeft")[];
+export declare const paddingMarginKeys: ("marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft")[];
+export type MarginPaddingState = {
+    default: Margin & Padding;
+    desktop: Margin & Padding;
+};
+export declare const defaultPaddingMargin: MarginPaddingState;
+type PaddingMarginControlProps = {
+    current: MarginPaddingState;
+    handleUpdate: (key: keyof MarginPaddingState, value: Margin & Padding) => void;
+};
+declare function PaddingMarginControl({ current, handleUpdate }: PaddingMarginControlProps): import("react/jsx-runtime").JSX.Element;
+export default PaddingMarginControl;

package/controls/PaddingMarginControl/PaddingMarginControl.js

@@ -0,0 +1,88 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.paddingMarginKeys = exports.paddingKeys = exports.marginKeys = exports.defaultPaddingMargin = exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _store = require("../../store");
+var _DeviceSwitcher = _interopRequireDefault(require("../DeviceSwitcher"));
+var _PaddingMarginForm = _interopRequireDefault(require("./PaddingMarginForm"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const padding = {
+  paddingTop: '0px',
+  paddingRight: '0px',
+  paddingBottom: '0px',
+  paddingLeft: '0px'
+};
+const margin = {
+  marginTop: '0px',
+  marginRight: '0px',
+  marginBottom: '0px',
+  marginLeft: '0px'
+};
+const paddingKeys = exports.paddingKeys = Object.keys(padding);
+const marginKeys = exports.marginKeys = Object.keys(margin);
+const paddingMarginKeys = exports.paddingMarginKeys = [...paddingKeys, ...marginKeys];
+const defaultPaddingMargin = exports.defaultPaddingMargin = {
+  default: {
+    ...padding,
+    ...margin
+  },
+  desktop: {
+    ...padding,
+    ...margin
+  }
+};
+function PaddingMarginControl({
+  current,
+  handleUpdate
+}) {
+  const {
+    device,
+    setDevice
+  } = (0, _store.useEditorStore)(state => state);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "margin-container container ",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeviceSwitcher.default, {
+      value: device,
+      onChange: setDevice,
+      title: "Margin & Padding (px/rem/%)",
+      children: currentDevice => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 16
+        },
+        children: [currentDevice === 'desktop' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          "data-key": "desktop",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PaddingMarginForm.default, {
+            label: "Desktop Margin",
+            current: current.desktop,
+            onChange: (key, value) => {
+              handleUpdate('desktop', {
+                ...current.desktop,
+                [key]: value
+              });
+            }
+          })
+        }), currentDevice === 'mobile' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          "data-key": "mobile",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PaddingMarginForm.default, {
+            label: "Mobile Margin",
+            current: current.default,
+            onChange: (key, value) => {
+              handleUpdate('default', {
+                ...current.default,
+                [key]: value
+              });
+            }
+          })
+        })]
+      })
+    })
+  });
+}
+var _default = exports.default = PaddingMarginControl;

package/controls/PaddingMarginControl/PaddingMarginForm.d.ts

@@ -0,0 +1,8 @@
+import { Margin, MarginKey, Padding, PaddingKey } from './PaddingMarginControl';
+type MarginPaddingFormProps = {
+    label?: string;
+    current: Margin & Padding;
+    onChange: (key: MarginKey | PaddingKey, value: string) => void;
+};
+declare function PaddingMarginForm({ label, current, onChange }: MarginPaddingFormProps): import("react/jsx-runtime").JSX.Element;
+export default PaddingMarginForm;