@ceed/cds 0.0.88 → 0.0.89

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,
@@ -44567,40 +44580,47 @@ var withCommonControls = (Component) => {
           Component2,
           __spreadProps(__spreadValues({}, props2), {
             sx: (() => {
+              let styles2 = {};
               if (useResponsiveMargin) {
-                return {
+                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
@@ -44626,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
@@ -44656,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.88",
+  "version": "0.0.89",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",