@ceed/cds 0.0.88 → 0.0.90

package/framer/index.js

@@ -44476,6 +44476,19 @@ var commonPropertyControls = {
     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,
@@ -44544,7 +44557,56 @@ var withCommonControls = (Component) => {
       "useResponsiveMargin",
       "responsiveMargin"
     ]);
-    const components = [{ Component, props }];
+    const components = [
+      {
+        Component,
+        props: __spreadProps(__spreadValues({}, props), {
+          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;
+          })()
+        })
+      }
+    ];
     if (useNumbering) {
       components.push({
         Component: Badge_default,
@@ -44562,50 +44624,7 @@ var withCommonControls = (Component) => {
       });
     }
     return components.reduce((acc, { Component: Component2, props: props2 }) => {
-      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
-        )
-      ];
+      return [React184.createElement(Component2, props2, ...acc)];
     }, []);
   };
 };
@@ -44626,7 +44645,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
@@ -44656,11 +44686,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.88",
+  "version": "0.0.90",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",