@ceed/cds 0.0.87 → 0.0.89

package/framer/index.js

@@ -5726,10 +5726,7 @@ var require_createStyled = __commonJS({
 
 // src/framer-entrypoint.ts
 import { ControlType as ControlType28 } from "framer";
-import React184, {
-  useEffect as useEffect37,
-  useState as useState29
-} from "react";
+import React184, { useEffect as useEffect37, useState as useState29 } from "react";
 
 // ../../node_modules/@mui/joy/colors/colors.js
 var colors = {
@@ -44467,11 +44464,99 @@ var commonPropertyControls = {
     type: ControlType28.Number,
     defaultValue: 1,
     hidden: ({ useNumbering }) => !useNumbering
+  },
+  useResponsiveMargin: {
+    title: "\u{1F4AB} Responsive Margin",
+    type: ControlType28.Boolean,
+    defaultValue: false
+  },
+  responsiveMargin: {
+    title: " ",
+    type: ControlType28.Object,
+    buttonTitle: "Set Margin",
+    hidden: ({ useResponsiveMargin }) => !useResponsiveMargin,
+    controls: {
+      xs: {
+        type: ControlType28.FusedNumber,
+        defaultValue: 0,
+        toggleKey: "xsMixed",
+        toggleTitles: ["All", "Individual"],
+        valueKeys: [
+          "xsMarginTop",
+          "xsMarginRight",
+          "xsMarginBottom",
+          "xsMarginLeft"
+        ],
+        valueLabels: ["T", "R", "B", "L"]
+      },
+      sm: {
+        type: ControlType28.FusedNumber,
+        defaultValue: 0,
+        toggleKey: "smMixed",
+        toggleTitles: ["All", "Individual"],
+        valueKeys: [
+          "smMarginTop",
+          "smMarginRight",
+          "smMarginBottom",
+          "smMarginLeft"
+        ],
+        valueLabels: ["T", "R", "B", "L"]
+      },
+      md: {
+        type: ControlType28.FusedNumber,
+        defaultValue: 0,
+        toggleKey: "mdMixed",
+        toggleTitles: ["All", "Individual"],
+        valueKeys: [
+          "mdMarginTop",
+          "mdMarginRight",
+          "mdMarginBottom",
+          "mdMarginLeft"
+        ],
+        valueLabels: ["T", "R", "B", "L"]
+      },
+      lg: {
+        type: ControlType28.FusedNumber,
+        defaultValue: 0,
+        toggleKey: "lgMixed",
+        toggleTitles: ["All", "Individual"],
+        valueKeys: [
+          "lgMarginTop",
+          "lgMarginRight",
+          "lgMarginBottom",
+          "lgMarginLeft"
+        ],
+        valueLabels: ["T", "R", "B", "L"]
+      },
+      xl: {
+        type: ControlType28.FusedNumber,
+        defaultValue: 0,
+        toggleKey: "xlMixed",
+        toggleTitles: ["All", "Individual"],
+        valueKeys: [
+          "xlMarginTop",
+          "xlMarginRight",
+          "xlMarginBottom",
+          "xlMarginLeft"
+        ],
+        valueLabels: ["T", "R", "B", "L"]
+      }
+    }
   }
 };
 var withCommonControls = (Component) => {
   return (_a) => {
-    var _b = _a, { useNumbering, numbering } = _b, props = __objRest(_b, ["useNumbering", "numbering"]);
+    var _b = _a, {
+      useNumbering,
+      numbering,
+      useResponsiveMargin,
+      responsiveMargin
+    } = _b, props = __objRest(_b, [
+      "useNumbering",
+      "numbering",
+      "useResponsiveMargin",
+      "responsiveMargin"
+    ]);
     const components = [{ Component, props }];
     if (useNumbering) {
       components.push({
@@ -44490,7 +44575,57 @@ var withCommonControls = (Component) => {
       });
     }
     return components.reduce((acc, { Component: Component2, props: props2 }) => {
-      return [React184.createElement(Component2, props2, ...acc)];
+      return [
+        React184.createElement(
+          Component2,
+          __spreadProps(__spreadValues({}, props2), {
+            sx: (() => {
+              let styles2 = {};
+              if (useResponsiveMargin) {
+                styles2 = __spreadProps(__spreadValues({}, styles2), {
+                  margin: {
+                    xs: !responsiveMargin.xsMixed ? responsiveMargin.xs : void 0,
+                    sm: !responsiveMargin.smMixed ? responsiveMargin.sm : void 0,
+                    md: !responsiveMargin.mdMixed ? responsiveMargin.md : void 0,
+                    lg: !responsiveMargin.lgMixed ? responsiveMargin.lg : void 0,
+                    xl: !responsiveMargin.xlMixed ? responsiveMargin.xl : void 0
+                  },
+                  marginLeft: {
+                    xs: !responsiveMargin.xsMixed ? void 0 : responsiveMargin.xsMarginLeft,
+                    sm: !responsiveMargin.smMixed ? void 0 : responsiveMargin.smMarginLeft,
+                    md: !responsiveMargin.mdMixed ? void 0 : responsiveMargin.mdMarginLeft,
+                    lg: !responsiveMargin.lgMixed ? void 0 : responsiveMargin.lgMarginLeft,
+                    xl: !responsiveMargin.xlMixed ? void 0 : responsiveMargin.xlMarginLeft
+                  },
+                  marginRight: {
+                    xs: !responsiveMargin.xsMixed ? void 0 : responsiveMargin.xsMarginRight,
+                    sm: !responsiveMargin.smMixed ? void 0 : responsiveMargin.smMarginRight,
+                    md: !responsiveMargin.mdMixed ? void 0 : responsiveMargin.mdMarginRight,
+                    lg: !responsiveMargin.lgMixed ? void 0 : responsiveMargin.lgMarginRight,
+                    xl: !responsiveMargin.xlMixed ? void 0 : responsiveMargin.xlMarginRight
+                  },
+                  marginTop: {
+                    xs: !responsiveMargin.xsMixed ? void 0 : responsiveMargin.xsMarginTop,
+                    sm: !responsiveMargin.smMixed ? void 0 : responsiveMargin.smMarginTop,
+                    md: !responsiveMargin.mdMixed ? void 0 : responsiveMargin.mdMarginTop,
+                    lg: !responsiveMargin.lgMixed ? void 0 : responsiveMargin.lgMarginTop,
+                    xl: !responsiveMargin.xlMixed ? void 0 : responsiveMargin.xlMarginTop
+                  },
+                  marginBottom: {
+                    xs: !responsiveMargin.xsMixed ? void 0 : responsiveMargin.xsMarginBottom,
+                    sm: !responsiveMargin.smMixed ? void 0 : responsiveMargin.smMarginBottom,
+                    md: !responsiveMargin.mdMixed ? void 0 : responsiveMargin.mdMarginBottom,
+                    lg: !responsiveMargin.lgMixed ? void 0 : responsiveMargin.lgMarginBottom,
+                    xl: !responsiveMargin.xlMixed ? void 0 : responsiveMargin.xlMarginBottom
+                  }
+                });
+              }
+              return styles2;
+            })()
+          }),
+          ...acc
+        )
+      ];
     }, []);
   };
 };
@@ -44511,7 +44646,18 @@ var useResponsive = (breakpoint, rootElement) => {
   return matches;
 };
 var ResponsiveEmitter = (props) => {
-  const { children, onSmChange, onMdChange, onLgChange, onXlChange } = props;
+  const {
+    children,
+    onXsChange,
+    onSmChange,
+    onMdChange,
+    onLgChange,
+    onXlChange
+  } = props;
+  const isXs = useResponsive(
+    "xs",
+    document.querySelector("#canvas-container .groundNodeWrapper > div[id]") || document.body
+  );
   const isSm = useResponsive(
     "sm",
     document.querySelector("#canvas-container .groundNodeWrapper > div[id]") || document.body
@@ -44541,11 +44687,29 @@ var ResponsiveEmitter = (props) => {
     } else if (isSm && onSmChange) {
       onSmChange();
       return;
+    } else if (isXs && onXsChange) {
+      onXsChange();
+      return;
     }
-  }, [isSm, isMd, isLg, isXl, onSmChange, onMdChange, onLgChange, onXlChange]);
+  }, [
+    isXs,
+    isSm,
+    isMd,
+    isLg,
+    isXl,
+    onXsChange,
+    onSmChange,
+    onMdChange,
+    onLgChange,
+    onXlChange
+  ]);
   return children;
 };
 var responsiveEmitterPropertyControls = {
+  onXsChange: {
+    title: "onXsChange",
+    type: ControlType28.EventHandler
+  },
   onSmChange: {
     title: "onSmChange",
     type: ControlType28.EventHandler

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceed/cds",
-  "version": "0.0.87",
+  "version": "0.0.89",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",