@developer_tribe/react-builder 1.2.1 → 1.2.2

package/dist/utils/extractTextStyle/extractTextStyle.d.ts

@@ -0,0 +1,9 @@
+import type { NodeData } from '../../types/Node';
+import type { TextPropsGenerated } from '../../build-components/Text/TextProps.generated';
+import type { AppConfig } from '../../types/PreviewConfig';
+import type { ProjectColors } from '../../types/Project';
+export type ExtractTextStyleOptions = {
+    appConfig?: AppConfig;
+    projectColors?: ProjectColors;
+};
+export declare function extractTextStyle<T extends TextPropsGenerated['attributes']>(node: NodeData<T>, options?: ExtractTextStyleOptions): import("react").CSSProperties;

package/dist/utils/extractTextStyle.d.ts

@@ -1,10 +1,2 @@
-import type { NodeData } from '../types/Node';
-import type { TextPropsGenerated } from '../build-components/Text/TextProps.generated';
-import type { AppConfig } from '../types/PreviewConfig';
-import type { ProjectColors } from '../types/Project';
-type ExtractTextStyleOptions = {
-    appConfig?: AppConfig;
-    projectColors?: ProjectColors;
-};
-export declare function extractTextStyle<T extends TextPropsGenerated['attributes']>(node: NodeData<T>, options?: ExtractTextStyleOptions): import("react").CSSProperties;
-export {};
+export type { ExtractTextStyleOptions } from './extractTextStyle/extractTextStyle';
+export { extractTextStyle } from './extractTextStyle/extractTextStyle';

package/dist/utils/extractViewStyle/extractViewStyle.d.ts

@@ -0,0 +1,9 @@
+import { ViewPropsGenerated } from '../../build-components/View/ViewProps.generated';
+import type { NodeData } from '../../types/Node';
+import type { AppConfig } from '../../types/PreviewConfig';
+import type { ProjectColors } from '../../types/Project';
+export type ExtractViewStyleOptions = {
+    appConfig?: AppConfig;
+    projectColors?: ProjectColors;
+};
+export declare function extractViewStyle<T extends ViewPropsGenerated['attributes']>(node: NodeData<T>, options?: ExtractViewStyleOptions): import("react").CSSProperties;

package/dist/utils/extractViewStyle.d.ts

@@ -1,9 +1,2 @@
-import { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
-import type { NodeData } from '../types/Node';
-import type { AppConfig } from '../types/PreviewConfig';
-import type { ProjectColors } from '../types/Project';
-export type ExtractViewStyleOptions = {
-    appConfig?: AppConfig;
-    projectColors?: ProjectColors;
-};
-export declare function extractViewStyle<T extends ViewPropsGenerated['attributes']>(node: NodeData<T>, options?: ExtractViewStyleOptions): import("react").CSSProperties;
+export type { ExtractViewStyleOptions } from './extractViewStyle/extractViewStyle';
+export { extractViewStyle } from './extractViewStyle/extractViewStyle';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "license": "UNLICENSED",
   "type": "module",
   "restricted": true,

package/src/build-components/BIcon/BIcon.tsx

@@ -2,13 +2,12 @@ import React, { useId, useMemo } from 'react';
 import type { BIconComponentProps } from './BIconProps.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
-import { extractViewStyle } from '../../utils/extractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { Icon } from '../../components/Icon.generated';
 import { IconsType } from '../../types/Icons';
-import { extractTextStyle } from '../../utils/extractTextStyle';
+import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
 
 function BIcon({ node }: BIconComponentProps) {
   useLogRender('BIcon');
@@ -26,10 +25,10 @@ function BIcon({ node }: BIconComponentProps) {
     }),
   );
 
-  const baseStyle = useMemo(
-    () => extractTextStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractTextStyle(node as any, {
+    appConfig,
+    projectColors,
+  });
   const isSelected = isNodeSelected({ previewMode, current, node });
   const style = useMergedStyle(
     baseStyle,

package/src/build-components/BackgroundImage/BackgroundImage.tsx

@@ -2,7 +2,7 @@ import React, { useId, useMemo } from 'react';
 import type { BackgroundImageComponentProps } from './BackgroundImageProps.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { resolveImageSrc } from '../../utils/getImage';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
@@ -25,10 +25,7 @@ function BackgroundImage({ node }: BackgroundImageComponentProps) {
     }),
   );
 
-  const baseStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractViewStyle(node, { appConfig, projectColors });
   const backgroundStyle = useMemo(() => {
     const attrs = node.attributes;
     const style: React.CSSProperties = {

package/src/build-components/Button/Button.tsx

@@ -3,8 +3,8 @@ import type { ButtonComponentProps } from './ButtonProps.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractViewStyle } from '../../utils/extractViewStyle';
-import { extractTextStyle } from '../../utils/extractTextStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { useLocalize } from '../../hooks/useLocalize';
@@ -24,22 +24,27 @@ function Button({ node }: ButtonComponentProps) {
     }),
   );
   const localize = useLocalize();
-  const baseStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractViewStyle(node as any, {
+    appConfig,
+    projectColors,
+  });
+  const combinedTextStyle = useExtractTextStyle(node as any, {
+    appConfig,
+    projectColors,
+  });
   const textStyle = useMemo(() => {
-    const combined = extractTextStyle(node as any, {
-      appConfig,
-      projectColors,
-    });
     return {
-      color: combined.color,
-      fontSize: combined.fontSize,
-      fontWeight: combined.fontWeight,
-      textAlign: combined.textAlign,
+      color: combinedTextStyle.color,
+      fontSize: combinedTextStyle.fontSize,
+      fontWeight: combinedTextStyle.fontWeight,
+      textAlign: combinedTextStyle.textAlign,
     } as React.CSSProperties;
-  }, [node, appConfig, projectColors]);
+  }, [
+    combinedTextStyle.color,
+    combinedTextStyle.fontSize,
+    combinedTextStyle.fontWeight,
+    combinedTextStyle.textAlign,
+  ]);
   const buttonDefaults = useMemo(() => {
     const hasExplicitBackground =
       node?.attributes?.backgroundColor !== undefined &&

package/src/build-components/Carousel/Carousel.tsx

@@ -5,7 +5,7 @@ import { isCarouselItem } from '../../utils/isCarousel';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 
@@ -23,10 +23,10 @@ function Carousel({ node }: CarouselComponentProps) {
       projectColors: s.projectColors,
     }),
   );
-  const baseStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractViewStyle(node as any, {
+    appConfig,
+    projectColors,
+  });
   const isSelected = isNodeSelected({ previewMode, current, node });
   const style = useMergedStyle(
     baseStyle,

package/src/build-components/CarouselButtons/CarouselButtons.tsx

@@ -1,9 +1,9 @@
-import React, { useContext, useId, useMemo } from 'react';
+import React, { useContext, useId } from 'react';
 import type { CarouselButtonsComponentProps } from './CarouselButtonsProps.generated';
 import { carouselContext } from '../CarouselProvider/CarouselProvider';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useRenderStore } from '../../store';
 
 function CarouselButtons({ node }: CarouselButtonsComponentProps) {
@@ -17,10 +17,7 @@ function CarouselButtons({ node }: CarouselButtonsComponentProps) {
     appConfig: s.appConfig,
     projectColors: s.projectColors,
   }));
-  const style = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const style = useExtractViewStyle(node as any, { appConfig, projectColors });
   const emblaApi = useContext(carouselContext);
   const buttonTypes = node.attributes?.buttonType || [
     'previous_button',

package/src/build-components/CarouselDots/CarouselDots.tsx

@@ -1,10 +1,10 @@
-import React, { useContext, useEffect, useId, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useId, useState } from 'react';
 import type { CarouselDotsComponentProps } from './CarouselDotsProps.generated';
 import { carouselContext } from '../CarouselProvider/CarouselProvider';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useRenderStore } from '../../store';
 
 function CarouselDots({ node }: CarouselDotsComponentProps) {
@@ -23,9 +23,7 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
     projectColors: s.projectColors,
   }));
 
-  const style = useMemo(() => {
-    return extractViewStyle(node, { appConfig, projectColors });
-  }, [node, appConfig, projectColors]);
+  const style = useExtractViewStyle(node as any, { appConfig, projectColors });
 
   // Use the appropriate context based on sourceType
   const isOnboard = (node as any)?.sourceType === 'OnboardDot';

package/src/build-components/CarouselItem/CarouselItem.tsx

@@ -1,9 +1,9 @@
-import React, { useId, useMemo } from 'react';
+import React, { useId } from 'react';
 import type { CarouselItemComponentProps } from './CarouselItemProps.generated';
 import RenderNode from '../RenderNode.generated';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useRenderStore } from '../../store';
 
 export function CarouselItem({ node }: CarouselItemComponentProps) {
@@ -17,10 +17,7 @@ export function CarouselItem({ node }: CarouselItemComponentProps) {
     appConfig: s.appConfig,
     projectColors: s.projectColors,
   }));
-  const style = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const style = useExtractViewStyle(node as any, { appConfig, projectColors });
   return (
     <div
       className="embla__slide"

package/src/build-components/CarouselProvider/CarouselProvider.tsx

@@ -3,7 +3,7 @@ import type { CarouselProviderComponentProps } from './CarouselProviderProps.gen
 import RenderNode from '../RenderNode.generated';
 import useEmblaCarousel from 'embla-carousel-react';
 import useNode from '../useNode';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useRenderStore } from '../../store';
 import { isCarousel } from '../../utils/isCarousel';
 import type { Node, NodeData } from '../../types/Node';
@@ -20,10 +20,7 @@ function CarouselProvider({ node }: CarouselProviderComponentProps) {
     appConfig: s.appConfig,
     projectColors: s.projectColors,
   }));
-  const viewStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const viewStyle = useExtractViewStyle(node, { appConfig, projectColors });
 
   const { carouselChild, otherChildren } = useMemo(() => {
     const children = node.children as Node;

package/src/build-components/Main/Main.tsx

@@ -1,10 +1,10 @@
-import React, { useId, useMemo } from 'react';
+import React, { useId } from 'react';
 import type { MainComponentProps } from './MainProps.generated';
 import RenderNode from '../RenderNode.generated';
 import type { Node } from '../../types/Node';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -29,13 +29,9 @@ function Main({ node }: MainComponentProps) {
     }),
   );
 
-  const baseStyle = useMemo(
-    () =>
-      extractViewStyle(node as NodeData<ViewPropsGenerated['attributes']>, {
-        appConfig,
-        projectColors,
-      }),
-    [node, appConfig, projectColors],
+  const baseStyle = useExtractViewStyle(
+    node as NodeData<ViewPropsGenerated['attributes']>,
+    { appConfig, projectColors },
   );
 
   const useSafeAreaView = (node.attributes as any)?.useSafeAreaView ?? true;

package/src/build-components/OnboardButton/OnboardButton.tsx

@@ -7,7 +7,7 @@ import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useMockOSContext, useMockPermission } from '../../mockOS';
 
 function OnboardButton({ node }: OnboardButtonComponentProps) {
@@ -36,10 +36,10 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
   const flex = node.attributes?.flex ?? 1;
   const textColor = node.attributes?.button_text_color ?? '#FFFFFF';
   const backgroundColor = node.attributes?.button_background_color ?? '#0066FF';
-  const viewStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const viewStyle = useExtractViewStyle(node as any, {
+    appConfig,
+    projectColors,
+  });
 
   const handleClick = () => {
     //TODO: any ??

package/src/build-components/OnboardButtons/OnboardButtons.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useId, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useId, useState } from 'react';
 import type { Node } from '../../types/Node';
 import type { OnboardButtonsComponentProps } from './OnboardButtonsProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
@@ -6,7 +6,7 @@ import RenderNode from '../RenderNode.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 
 function OnboardButtons({ node }: OnboardButtonsComponentProps) {
   useLogRender('OnboardButtons');
@@ -44,10 +44,10 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
     return <RenderNode node={node.children as Node} />;
   };
 
-  const viewStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const viewStyle = useExtractViewStyle(node as any, {
+    appConfig,
+    projectColors,
+  });
 
   // NOTE: Hooks must not be called conditionally.
   // Generate the id before any early returns so the hook order stays stable.

package/src/build-components/OnboardDot/OnboardDot.tsx

@@ -3,7 +3,7 @@ import type { OnboardDotComponentProps } from './OnboardDotProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useRenderStore } from '../../store';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -42,11 +42,15 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     [activeDotColor, appConfig, projectColors],
   );
 
+  const extractedStyle = useExtractViewStyle(node as any, {
+    appConfig,
+    projectColors,
+  });
   const baseStyle = useMemo(() => {
-    let innerStyle = extractViewStyle(node, { appConfig, projectColors });
-    delete innerStyle.flexDirection;
+    const innerStyle = { ...extractedStyle };
+    delete (innerStyle as any).flexDirection;
     return innerStyle;
-  }, [node, appConfig, projectColors]);
+  }, [extractedStyle]);
   const isSelected = isNodeSelected({ previewMode, current, node });
   const style = useMergedStyle(
     baseStyle,

package/src/build-components/OnboardFooter/OnboardFooter.tsx

@@ -3,8 +3,8 @@ import type { OnboardFooterComponentProps } from './OnboardFooterProps.generated
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { parseSize } from '../../size-matters';
-import { extractTextStyle } from '../../utils/extractTextStyle';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -107,14 +107,14 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
     key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
 
   const text = t(node?.attributes?.textLocalizationKey);
-  const textStyle = useMemo(
-    () => extractTextStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
-  const viewStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const textStyle = useExtractTextStyle(node as any, {
+    appConfig,
+    projectColors,
+  });
+  const viewStyle = useExtractViewStyle(node as any, {
+    appConfig,
+    projectColors,
+  });
 
   const linkStyle = (color?: string): React.CSSProperties => ({
     color,

package/src/build-components/OnboardImage/OnboardImage.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useId, useMemo, useState } from 'react';
+import React, { useEffect, useId, useState } from 'react';
 import type { OnboardImageComponentProps } from './OnboardImageProps.generated';
 import Image from '../Image/Image';
 import useNode from '../useNode';
 import Lottie from 'lottie-react';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useRenderStore } from '../../store';
 
 function OnboardImage({ node }: OnboardImageComponentProps) {
@@ -19,10 +19,10 @@ function OnboardImage({ node }: OnboardImageComponentProps) {
     appConfig: s.appConfig,
     projectColors: s.projectColors,
   }));
-  const viewStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const viewStyle = useExtractViewStyle(node as any, {
+    appConfig,
+    projectColors,
+  });
 
   useEffect(() => {
     if (node.attributes?.lottie) {

package/src/build-components/OnboardItem/OnboardItem.tsx

@@ -3,9 +3,8 @@ import type { OnboardItemComponentProps } from './OnboardItemProps.generated';
 import useNode from '../useNode';
 import RenderNode from '../RenderNode.generated';
 import { useRenderStore } from '../../store';
-import { parseSize } from '../../size-matters';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 
 function OnboardItem({ node }: OnboardItemComponentProps) {
   useLogRender('OnboardItem');
@@ -17,10 +16,10 @@ function OnboardItem({ node }: OnboardItemComponentProps) {
     appConfig: s.appConfig,
     projectColors: s.projectColors,
   }));
-  const viewStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const viewStyle = useExtractViewStyle(node as any, {
+    appConfig,
+    projectColors,
+  });
   return (
     <div
       attribute-name={attributeName}

package/src/build-components/OnboardProvider/OnboardProvider.tsx

@@ -13,7 +13,7 @@ import RenderNode from '../RenderNode.generated';
 import { useRenderStore } from '../../store';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { ViewPropsGenerated } from '../View/ViewProps.generated';
 
 export const onboardContext = createContext<any>(undefined);
@@ -75,15 +75,18 @@ function OnboardProvider({ node }: OnboardProviderComponentProps) {
   }, [theme]);*/
 
   //TODO: pattern içinde direk gömmek yerine orada da inhertince eklenebilir
-  const viewStyle = useMemo(() => {
-    const style = extractViewStyle(
-      node as NodeData<ViewPropsGenerated['attributes']>,
-      { appConfig, projectColors },
-    );
-    //NOTE: Embla için istisna
-    style.display = 'block';
-    return style;
-  }, [node, appConfig, projectColors]);
+  const baseStyle = useExtractViewStyle(
+    node as NodeData<ViewPropsGenerated['attributes']>,
+    { appConfig, projectColors },
+  );
+  const viewStyle = useMemo(
+    () => ({
+      ...baseStyle,
+      // NOTE: Embla for web expects block layout here.
+      display: 'block',
+    }),
+    [baseStyle],
+  );
 
   return (
     <onboardContext.Provider value={{ emblaApi, selectedIndex }}>

package/src/build-components/PaywallBackground/PaywallBackground.tsx

@@ -2,7 +2,7 @@ import React, { useId, useMemo } from 'react';
 import type { PaywallBackgroundComponentProps } from './PaywallBackgroundProps.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -24,10 +24,7 @@ function PaywallBackground({ node }: PaywallBackgroundComponentProps) {
     }),
   );
 
-  const baseStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractViewStyle(node, { appConfig, projectColors });
 
   const isSelected = isNodeSelected({ previewMode, current, node });
   const style = useMergedStyle(

package/src/build-components/PaywallCloseButton/PaywallCloseButton.tsx

@@ -2,7 +2,7 @@ import React, { useId, useMemo } from 'react';
 import type { PaywallCloseButtonComponentProps } from './PaywallCloseButtonProps.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
-import { extractTextStyle } from '../../utils/extractTextStyle';
+import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -29,10 +29,10 @@ function PaywallCloseButton({ node }: PaywallCloseButtonComponentProps) {
     }),
   );
 
-  const baseStyle = useMemo(
-    () => extractTextStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractTextStyle(node as any, {
+    appConfig,
+    projectColors,
+  });
 
   const isSelected = isNodeSelected({ previewMode, current, node });
   const style = useMergedStyle(

package/src/build-components/PaywallOptions/PaywallOptionButton.tsx

@@ -1,6 +1,6 @@
 import { useId, useMemo } from 'react';
 import type { Product } from '../../paywall/types/paywall-types';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import type { NodeData } from '../../types/Node';
 import { useRenderStore } from '../../store';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
@@ -32,10 +32,7 @@ export function PaywallOptionButton({
     }),
   );
 
-  const baseStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractViewStyle(node, { appConfig, projectColors });
 
   const isSelected = isNodeSelected({ previewMode, current, node });
 

package/src/build-components/PaywallProvider/PaywallProvider.tsx

@@ -4,7 +4,7 @@ import RenderNode from '../RenderNode.generated';
 import type { Node } from '../../types/Node';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -55,10 +55,10 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
     return params;
   }, [benefits]);
 
-  const baseStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractViewStyle(node as any, {
+    appConfig,
+    projectColors,
+  });
 
   const isSelected = isNodeSelected({ previewMode, current, node });
   const style = useMergedStyle(