@cntrl-site/sdk-nextjs 0.19.1 → 0.19.3

package/lib/components/Item.js

@@ -94,7 +94,7 @@ const Item = ({ item, sectionId, articleHeight }) => {
     if (!layout)
         return null;
     const styles = {
-        top: stickyTop,
+        top: `${stickyTop * 100}vw`,
         height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
     };
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: isInitialRef.current ? {} : Object.assign({ top, left }, (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})) }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles }, { children: (0, jsx_runtime_1.jsx)(RichTextWrapper, Object.assign({ isRichText: isRichText }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, style: {

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.3",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",

package/src/components/Item.tsx

@@ -117,7 +117,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
 
   if (!layout) return null;
   const styles = {
-    top: stickyTop,
+    top: `${stickyTop * 100}vw`,
     height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
   };
 

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()}`
         }}
       >

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
-  </state>
-</component>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,15 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="myValues">
-        <value>
-          <list size="1">
-            <item index="0" class="java.lang.String" itemvalue="jsx" />
-          </list>
-        </value>
-      </option>
-      <option name="myCustomValuesEnabled" value="true" />
-    </inspection_tool>
-  </profile>
-</component>