@ceed/cds 0.0.86 → 0.0.88

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,86 @@ 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: {
+      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 +44562,50 @@ 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: (() => {
+              if (useResponsiveMargin) {
+                return {
+                  margin: {
+                    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: {
+                    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: {
+                    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: {
+                    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: {
+                    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
+                  }
+                };
+              }
+            })()
+          }),
+          ...acc
+        )
+      ];
     }, []);
   };
 };
@@ -44514,19 +44629,19 @@ var ResponsiveEmitter = (props) => {
   const { children, onSmChange, onMdChange, onLgChange, onXlChange } = props;
   const isSm = useResponsive(
     "sm",
-    document.querySelector("#canvas-container .groundNodeWrapper") || document.body
+    document.querySelector("#canvas-container .groundNodeWrapper > div[id]") || document.body
   );
   const isMd = useResponsive(
     "md",
-    document.querySelector("#canvas-container .groundNodeWrapper") || document.body
+    document.querySelector("#canvas-container .groundNodeWrapper > div[id]") || document.body
   );
   const isLg = useResponsive(
     "lg",
-    document.querySelector("#canvas-container .groundNodeWrapper") || document.body
+    document.querySelector("#canvas-container .groundNodeWrapper > div[id]") || document.body
   );
   const isXl = useResponsive(
     "xl",
-    document.querySelector("#canvas-container .groundNodeWrapper") || document.body
+    document.querySelector("#canvas-container .groundNodeWrapper > div[id]") || document.body
   );
   useEffect37(() => {
     if (isXl && onXlChange) {

package/package.json

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