@cntrl-site/sdk-nextjs 1.6.4 → 1.6.6

package/lib/components/items/RectangleItem/RectangleItem.js

@@ -63,8 +63,8 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
               border-width: ${layoutParams.strokeWidth * 100}vw;
               transform: rotate(${area.angle}deg);
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-              backdrop-filter: ${layoutParams.backdropFilter !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-              -webkit-backdrop-filter: ${layoutParams.backdropFilter !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
+              -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
             }
           `);
                     })}

package/lib/components/items/RectangleItem/useRectangleItem.js

@@ -5,7 +5,7 @@ const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
 const useLayoutContext_1 = require("../../useLayoutContext");
 const defaultColor = 'rgba(0, 0, 0, 1)';
-const useRectangleItem = (item, sectionId) => {
+function useRectangleItem(item, sectionId) {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderRadius, (item, layoutId) => {
         if (!layoutId)
@@ -44,5 +44,5 @@ const useRectangleItem = (item, sectionId) => {
         return 'backdropBlur' in layoutParams ? layoutParams.backdropBlur : 0;
     }, (animator, scroll, value) => value !== undefined ? animator.getBackdropBlur({ backdropBlur: value }, scroll).backdropBlur : undefined, sectionId, [layoutId]);
     return { fillColor, strokeWidth, radius, strokeColor, blur, backdropBlur };
-};
+}
 exports.useRectangleItem = useRectangleItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.6.4",
+  "version": "1.6.6",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",

package/src/components/items/RectangleItem/RectangleItem.tsx

@@ -83,8 +83,8 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
               border-width: ${layoutParams.strokeWidth * 100}vw;
               transform: rotate(${area.angle}deg);
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-              backdrop-filter: ${layoutParams.backdropFilter !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-              -webkit-backdrop-filter: ${layoutParams.backdropFilter !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
+              -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
             }
           `);
         })}

package/src/components/items/RectangleItem/useRectangleItem.ts

@@ -4,7 +4,7 @@ import { useLayoutContext } from '../../useLayoutContext';
 
 const defaultColor = 'rgba(0, 0, 0, 1)';
 
-export const useRectangleItem = (item: RectangleItem, sectionId: string) => {
+export function useRectangleItem(item: RectangleItem, sectionId: string) {
   const layoutId = useLayoutContext();
   const radius = useKeyframeValue(
     item,
@@ -12,7 +12,7 @@ export const useRectangleItem = (item: RectangleItem, sectionId: string) => {
     (item, layoutId) => {
       if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
-      return  'radius' in layoutParams ? layoutParams.radius : 0;
+      return 'radius' in layoutParams ? layoutParams.radius : 0;
     },
     (animator, scroll, value) => value !== undefined ? animator.getRadius({ radius: value }, scroll).radius : undefined,
     sectionId,
@@ -79,4 +79,4 @@ export const useRectangleItem = (item: RectangleItem, sectionId: string) => {
     [layoutId]
   );
   return { fillColor, strokeWidth, radius, strokeColor, blur, backdropBlur };
-};
+}