@cntrl-site/sdk-nextjs 0.19.1 → 0.19.2

package/lib/components/items/RectangleItem.js

@@ -34,8 +34,7 @@ const RectangleItem = ({ item, sectionId, onResize }) => {
                         transform: `rotate(${angle}deg)`,
                         filter: blur !== 0 ? `blur(${blur * 100}vw)` : 'unset',
                         backdropFilter: backdropFilterValue,
-                        // @ts-ignore
-                        '-webkit-backdrop-filter': backdropFilterValue,
+                        WebkitBackdropFilter: backdropFilterValue,
                     } }), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
         @supports not (color: oklch(42% 0.3 90 / 1)) {
           .rectangle-${item.id} {

package/lib/components/items/RichTextItem.js

@@ -15,6 +15,7 @@ const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRichTextItemValues_1 = require("./useRichTextItemValues");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
 const getFontFamilyValue_1 = require("../../utils/getFontFamilyValue");
+const useExemplary_1 = require("../../common/useExemplary");
 const RichTextItem = ({ item, sectionId, onResize }) => {
     const [content, styles] = (0, useRichTextItem_1.useRichTextItem)(item);
     const id = (0, react_1.useId)();
@@ -22,12 +23,13 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { angle, blur, wordSpacing, letterSpacing, color } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
     const textColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(color), [color]);
+    const exemplary = (0, useExemplary_1.useExemplary)();
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ ref: setRef, className: `rich-text-wrapper-${item.id}`, style: {
                     transform: `rotate(${angle}deg)`,
-                    filter: `blur(${blur * 100}vw)`,
-                    letterSpacing: `${letterSpacing * 100}vw`,
-                    wordSpacing: `${wordSpacing * 100}vw`,
+                    filter: `blur(${blur * exemplary}px)`,
+                    letterSpacing: `${letterSpacing * exemplary}px`,
+                    wordSpacing: `${wordSpacing * exemplary}px`,
                     color: `${textColor.toCss()}`
                 } }, { children: content })), (0, jsx_runtime_1.jsxs)(style_1.default, Object.assign({ id: id }, { children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                         return (`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.19.1",
+  "version": "0.19.2",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",

package/src/components/items/RectangleItem.tsx

@@ -35,8 +35,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
             transform: `rotate(${angle}deg)`,
             filter: blur !== 0 ? `blur(${blur * 100}vw)` : 'unset',
             backdropFilter: backdropFilterValue,
-            // @ts-ignore
-            '-webkit-backdrop-filter': backdropFilterValue,
+            WebkitBackdropFilter: backdropFilterValue,
           }}
         />
         <JSXStyle id={id}>{`

package/src/components/items/RichTextItem.tsx

@@ -9,6 +9,7 @@ import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverSty
 import { useRichTextItemValues } from './useRichTextItemValues';
 import { useRegisterResize } from "../../common/useRegisterResize";
 import { getFontFamilyValue } from '../../utils/getFontFamilyValue';
+import { useExemplary } from '../../common/useExemplary';
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize }) => {
   const [content, styles] = useRichTextItem(item);
@@ -17,6 +18,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
   const { layouts } = useCntrlContext();
   const { angle, blur, wordSpacing, letterSpacing, color } = useRichTextItemValues(item, sectionId);
   const textColor = useMemo(() => CntrlColor.parse(color), [color]);
+  const exemplary = useExemplary();
   useRegisterResize(ref, onResize);
 
   return (
@@ -26,9 +28,9 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
         className={`rich-text-wrapper-${item.id}`}
         style={{
           transform: `rotate(${angle}deg)`,
-          filter: `blur(${blur * 100}vw)`,
-          letterSpacing: `${letterSpacing * 100}vw`,
-          wordSpacing: `${wordSpacing * 100}vw`,
+          filter: `blur(${blur * exemplary}px)`,
+          letterSpacing: `${letterSpacing * exemplary}px`,
+          wordSpacing: `${wordSpacing * exemplary}px`,
           color: `${textColor.toCss()}`
         }}
       >