@cntrl-site/sdk-nextjs 1.9.71-4 → 1.9.71-6

package/lib/components/StructuredBlockItem/StructuredBlockItem.js

@@ -28,15 +28,17 @@ const StructuredBlockItem = ({ block, maxWidthMap }) => {
     const ItemComponent = itemsMap[block.type] || noop;
     return ((0, jsx_runtime_1.jsxs)("div", { className: `structured-block-item-${block.id}`, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { block: block }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hidden, maxWidth]) => {
+                    var _a, _b;
                     const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
                     return (`
                 .structured-block-item-${block.id} {
                   display: ${hidden ? 'none' : 'block'};
+                  align-self: ${getAlignSelf((_a = area.alignment) !== null && _a !== void 0 ? _a : 'center')};
                   width: ${sizingAxis.x === 'manual' && area.width ? `${area.width * 100}vw` : maxWidth !== null && maxWidth !== void 0 ? maxWidth : 'max-content'};
                   height: ${sizingAxis.y === 'manual' && area.height ? `${area.height * 100}vw` : 'unset'};
                   padding-top: ${area.paddingTop ? `${area.paddingTop * 100}vw` : 'unset'};
-                  margin: 0 auto;
                   outline: none;
+                  left: ${((_b = area.horizontalOffset) !== null && _b !== void 0 ? _b : 0) * 100}vw;
                   position: relative;
                 }
               `);
@@ -44,3 +46,13 @@ const StructuredBlockItem = ({ block, maxWidthMap }) => {
         ` })] }));
 };
 exports.StructuredBlockItem = StructuredBlockItem;
+function getAlignSelf(alignment) {
+    switch (alignment) {
+        case 'left':
+            return 'start';
+        case 'right':
+            return 'end';
+        default:
+            return 'center';
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.71-4",
+  "version": "1.9.71-6",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -31,9 +31,9 @@
   "dependencies": {
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
-    "@cntrl-site/components": "^1.0.12-alpha.3",
+    "@cntrl-site/components": "^1.0.12-alpha.4",
     "@cntrl-site/effects": "^1.4.2",
-    "@cntrl-site/sdk": "1.28.0-6",
+    "@cntrl-site/sdk": "1.28.0-7",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/components/StructuredBlockItem/StructuredBlockItem.tsx

@@ -41,11 +41,12 @@ export const StructuredBlockItem: FC<Props> = ({ block, maxWidthMap }) => {
           return (`
                 .structured-block-item-${block.id} {
                   display: ${hidden ? 'none' : 'block'};
+                  align-self: ${getAlignSelf(area.alignment ?? 'center')};
                   width: ${sizingAxis.x === 'manual' && area.width ? `${area.width * 100}vw` : maxWidth ?? 'max-content'};
                   height: ${sizingAxis.y === 'manual' && area.height ? `${area.height * 100}vw` : 'unset'};
                   padding-top: ${area.paddingTop ? `${area.paddingTop * 100}vw` : 'unset'};
-                  margin: 0 auto;
                   outline: none;
+                  left: ${(area.horizontalOffset ?? 0) * 100}vw;
                   position: relative;
                 }
               `);
@@ -55,3 +56,14 @@ export const StructuredBlockItem: FC<Props> = ({ block, maxWidthMap }) => {
     </div>
   );
 };
+
+function getAlignSelf(alignment: 'left' | 'center' | 'right') {
+  switch (alignment) {
+    case 'left':
+      return 'start';
+    case 'right':
+      return 'end';
+    default:
+      return 'center';
+  }
+}