@developer_tribe/react-builder 1.2.30 → 1.2.32

package/src/build-components/patterns.generated.ts

@@ -13,7 +13,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -478,7 +478,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -879,7 +879,7 @@ export const patterns = [
       children: 'string',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -1297,7 +1297,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -1678,7 +1678,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -2072,7 +2072,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -2129,6 +2129,10 @@ export const patterns = [
           'sliding_dot',
           'liquid_like',
         ],
+        dot_thickness: 'size',
+        inactive_dot_opacity: 'number',
+        inactive_dot_color: 'color',
+        active_dot_color: 'color',
       },
     },
     meta: {
@@ -2453,6 +2457,11 @@ export const patterns = [
         flexGrow: 0,
         flexShrink: 0,
       },
+      dotType: 'expanding_dot',
+      dot_thickness: 10,
+      inactive_dot_opacity: 0.3,
+      active_dot_color: 'STATIC_COLORS.ONBOARD_DOT_ACTIVE',
+      inactive_dot_color: 'THEME_COLORS.BACKGROUND',
     },
     types: {},
   },
@@ -2465,7 +2474,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -2843,7 +2852,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -3226,7 +3235,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -3674,7 +3683,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -4069,7 +4078,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -4462,7 +4471,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -4841,7 +4850,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -5220,7 +5229,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -5268,9 +5277,9 @@ export const patterns = [
           left: 'size',
           right: 'size',
           zIndex: 'number',
+          color: 'color',
         },
         labelKey: 'string',
-        button_text_color: 'color',
         animation: [
           'simple-animation',
           'line-animation',
@@ -5279,8 +5288,6 @@ export const patterns = [
           'blur-line-animation',
         ],
         animation_color: 'color',
-        button_background_color: 'color',
-        flex: 'number',
         events: 'EventObject[]',
       },
     },
@@ -5330,34 +5337,6 @@ export const patterns = [
           sort: 21,
           preferredScale: 's',
         },
-        button_text_color: {
-          label: 'Button Text Color',
-          description: 'Text color of the button.',
-          category: 'style',
-          specialCategory: null,
-          sort: 2,
-        },
-        animation: {
-          label: 'Animation',
-          description: 'Animation style for the button.',
-          category: 'style',
-          specialCategory: null,
-          sort: 3,
-        },
-        animation_color: {
-          label: 'Animation Color',
-          description: 'Color used by the animation.',
-          category: 'style',
-          specialCategory: null,
-          sort: 4,
-        },
-        button_background_color: {
-          label: 'Button Background Color',
-          description: 'Background color of the button.',
-          category: 'style',
-          specialCategory: null,
-          sort: 5,
-        },
       },
       attributes: {
         scrollable: {
@@ -5565,9 +5544,9 @@ export const patterns = [
         },
         flex: {
           label: 'Flex',
-          description: 'Flex grow value in layout.',
+          description: 'Flex grow factor (e.g. 1 fills available space).',
           category: 'container',
-          specialCategory: null,
+          specialCategory: 'size',
           sort: 6,
         },
         position: {
@@ -5630,6 +5609,29 @@ export const patterns = [
           specialCategory: null,
           sort: 7,
         },
+        animation: {
+          label: 'Animation',
+          description: 'Animation style for the button.',
+          category: 'style',
+          specialCategory: null,
+          sort: 3,
+        },
+        animation_color: {
+          label: 'Animation Color',
+          description: 'Color used by the animation.',
+          category: 'style',
+          specialCategory: null,
+          sort: 4,
+        },
+        styles: {
+          color: {
+            label: 'Color',
+            description: 'Text color.',
+            category: 'style',
+            specialCategory: null,
+            sort: 1,
+          },
+        },
       },
     },
     defaults: {
@@ -5642,6 +5644,7 @@ export const patterns = [
         flexShrink: 0,
         height: '40@vs',
         borderRadius: '12@s',
+        color: 'THEME_COLORS.ONBOARD_BUTTON_PRIMARY_TEXT',
       },
     },
     types: {
@@ -5662,7 +5665,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -6102,7 +6105,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -6524,7 +6527,8 @@ export const patterns = [
       dotType: 'expanding_dot',
       dot_thickness: 10,
       inactive_dot_opacity: 0.3,
-      active_dot_color: '#007AFF',
+      active_dot_color: 'STATIC_COLORS.ONBOARD_DOT_ACTIVE',
+      inactive_dot_color: 'THEME_COLORS.BACKGROUND',
     },
     types: {},
   },
@@ -6539,7 +6543,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -7039,7 +7043,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         src: 'string',
-        style: {
+        styles: {
           resizeMode: ['cover', 'contain', 'stretch', 'center'],
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
@@ -7450,7 +7454,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -7840,7 +7844,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -8228,7 +8232,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -8669,7 +8673,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -9111,7 +9115,7 @@ export const patterns = [
         src: 'string',
         resizeMode: ['cover', 'contain', 'stretch', 'center'],
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -9515,7 +9519,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -9982,7 +9986,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -10363,7 +10367,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -10752,7 +10756,7 @@ export const patterns = [
       description: 'description',
       children: 'string',
       attributes: {
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontWeight: [
@@ -11179,7 +11183,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -11646,7 +11650,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -12089,7 +12093,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -12530,7 +12534,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -12931,7 +12935,7 @@ export const patterns = [
       description: 'description',
       children: 'never',
       attributes: {
-        style: {
+        styles: {
           backgroundColor: 'color',
           width: 'size',
           height: 'size',
@@ -12987,7 +12991,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -13366,7 +13370,7 @@ export const patterns = [
       children: 'string',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -13807,7 +13811,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [

package/src/build-components/useNode.ts

@@ -2,7 +2,6 @@ import { NodeData, NodeDefaultAttribute } from '../types/Node';
 import { getDefaultsForType } from '../utils/patterns';
 
 type WithStyleBags = {
-  style?: Record<string, unknown>;
   styles?: Record<string, unknown>;
 };
 
@@ -15,29 +14,16 @@ export default function useNode<
   const nodeAttributes = ((node.attributes as T) ?? ({} as T)) as T &
     WithStyleBags;
   const defaultAttributes = defaults as T & WithStyleBags;
-  // Merge styles from both defaults and node (schemaVersion=2 uses `styles` only).
-  // Read legacy `style` for back-compat with old persisted data, but output only `styles`.
-  const defaultStyle = {
-    ...(defaultAttributes?.style ?? {}),
+  // Deep-merge styles so default style values aren't lost when the node provides partial overrides.
+  const mergedStyle = {
     ...(defaultAttributes?.styles ?? {}),
-  };
-  const nodeStyle = {
-    ...(nodeAttributes?.style ?? {}),
     ...(nodeAttributes?.styles ?? {}),
   };
-  const mergedStyle = {
-    ...defaultStyle,
-    ...nodeStyle,
-  };
   const mergedRecord: Record<string, unknown> = {
     ...(defaultAttributes as Record<string, unknown>),
     ...(nodeAttributes as Record<string, unknown>),
-    // Deep merge styles so default style values aren't lost when the node provides partial overrides.
-    // Only use `styles` (schemaVersion=2). Remove legacy `style` to avoid validator rejection.
     styles: mergedStyle,
   };
-  // Remove legacy `style` key if it was inherited from defaults or node attributes.
-  delete mergedRecord.style;
   if (
     typeof mergedRecord.styles === 'object' &&
     mergedRecord.styles != null &&

package/src/components/BuilderProvider.tsx

@@ -67,7 +67,7 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
     const lang = params.mockDefaultLanguage ?? defaultLanguage;
     return {
       ...params,
-      // Ensure defaults if missing
+      // Ensure defaults if mxissing
       mockProducts: params.mockProducts ?? [],
       mockBenefits: params.mockBenefits ?? {},
       mockTheme: theme,

package/src/hooks/useLocalize.ts

@@ -14,7 +14,7 @@ export function useLocalize(options?: {
     localization: builderLocalization,
     mockDefaultLanguage: builderDefaultLanguage,
   } = useBuilderParams();
-
+  //TODO: genelle (react-native ksımına export et)
   const localization =
     options?.localization ?? builderLocalization ?? defaultLocalization;
   const defaultLanguage =

package/src/migrations/migrations/1.1.2_extract_component_attributes_from_style.ts

@@ -50,11 +50,16 @@ function normalizeStyleAttributes(node: Node, styleKeys: Set<string>): Node {
   }
 
   const nextAttrs: Record<string, unknown> = { ...(record.attributes ?? {}) };
-  const prevStyle = isPlainObject(nextAttrs.style) ? nextAttrs.style : {};
-  const nextStyle: Record<string, unknown> = { ...prevStyle };
+  // Read from both legacy `style` and `styles` for backwards compatibility.
+  const prevStyleLegacy = isPlainObject(nextAttrs.style) ? nextAttrs.style : {};
+  const prevStyles = isPlainObject(nextAttrs.styles) ? nextAttrs.styles : {};
+  const nextStyle: Record<string, unknown> = {
+    ...prevStyleLegacy,
+    ...prevStyles,
+  };
 
   for (const [k, v] of Object.entries(nextAttrs)) {
-    if (k === 'style') continue;
+    if (k === 'style' || k === 'styles') continue;
     if (!styleKeys.has(k)) continue;
 
     // If already set in style, prefer style (drop legacy flat key).
@@ -62,8 +67,10 @@ function normalizeStyleAttributes(node: Node, styleKeys: Set<string>): Node {
     delete nextAttrs[k];
   }
 
+  // Always output as `styles` (schemaVersion=2). Remove legacy `style`.
+  delete nextAttrs.style;
   if (Object.keys(nextStyle).length > 0) {
-    nextAttrs.style = nextStyle;
+    nextAttrs.styles = nextStyle;
   }
 
   return {
@@ -77,16 +84,16 @@ function getStyleSubSchemaKeys(
   schema: Record<string, unknown> | undefined,
 ): Set<string> {
   if (!schema) return new Set();
-  const style = schema.style;
-  if (!isPlainObject(style)) return new Set();
-  return new Set(Object.keys(style));
+  const styles = schema.styles;
+  if (!isPlainObject(styles)) return new Set();
+  return new Set(Object.keys(styles));
 }
 
 function getTopLevelAttributeKeys(
   schema: Record<string, unknown> | undefined,
 ): Set<string> {
   if (!schema) return new Set();
-  const keys = Object.keys(schema).filter((k) => k !== 'style');
+  const keys = Object.keys(schema).filter((k) => k !== 'styles');
   return new Set(keys);
 }
 
@@ -131,7 +138,18 @@ function extractAttributesFromStyle(
   }
 
   const nextAttrs: Record<string, unknown> = { ...(record.attributes ?? {}) };
-  const style = nextAttrs.style;
+  // Read from both legacy `style` and canonical `styles`.
+  const legacyStyle = nextAttrs.style;
+  const canonicalStyles = nextAttrs.styles;
+  const style = isPlainObject(canonicalStyles)
+    ? canonicalStyles
+    : isPlainObject(legacyStyle)
+      ? legacyStyle
+      : undefined;
+
+  if (!style) {
+    return { ...record, children: nextChildren, attributes: nextAttrs };
+  }
 
   if (!isPlainObject(style)) {
     return { ...record, children: nextChildren, attributes: nextAttrs };
@@ -174,8 +192,11 @@ function extractAttributesFromStyle(
 
   if (Object.keys(nextStyle).length === 0) {
     delete nextAttrs.style;
+    delete nextAttrs.styles;
   } else {
-    nextAttrs.style = nextStyle;
+    // Always output as `styles` (schemaVersion=2). Remove legacy `style`.
+    delete nextAttrs.style;
+    nextAttrs.styles = nextStyle;
   }
 
   return {

package/src/utils/analyseNodeByPatterns.ts

@@ -22,7 +22,7 @@ export type AnalyseResultWithPath = {
 };
 
 type AttributeTypeSpec = string | string[];
-// schema v2 supports nesting style specs under `attributes.style` (one level deep)
+// schema v2 supports nesting style specs under `attributes.styles` (one level deep)
 type NestedAttributeSchema = Record<string, AttributeTypeSpec>;
 type AttributeSchema = Record<
   string,
@@ -60,7 +60,7 @@ function getStyleSubSchema(
   schema: AttributeSchema | undefined,
 ): AttributeSchema {
   if (!schema) return {};
-  const maybe = schema.style;
+  const maybe = schema.styles;
   if (!maybe) return {};
   if (typeof maybe === 'string' || Array.isArray(maybe)) return {};
   return (maybe ?? {}) as AttributeSchema;

package/src/utils/attributeStyle.ts

@@ -1,19 +1,25 @@
 /**
  * Shared utilities for attribute/style bag access.
- * schemaVersion=2 uses `attributes.styles`, legacy uses `attributes.style`.
+ * schemaVersion=2 uses `attributes.styles` exclusively.
  */
 
 import type { NodeDefaultAttribute } from '../types/Node';
 
-/** Returns styles or style bag from attributes (schemaVersion=2 uses styles, legacy uses style). */
+/** Returns styles bag from attributes (schemaVersion=2 uses `styles` only). Throws if legacy `style` is found. */
 export function getStyleBag(
   attributes: NodeDefaultAttribute | undefined,
 ): Record<string, unknown> | undefined {
   const record = toAttributeRecord(attributes);
-  const bag = record.styles ?? record.style;
+  if ('style' in record && record.style != null) {
+    throw new Error(
+      '[getStyleBag] Legacy "style" key detected in attributes. Use "styles" instead (schemaVersion=2).',
+    );
+  }
+  const bag = record.styles;
   return isPlainObject(bag) ? (bag as Record<string, unknown>) : undefined;
 }
 
+//TODO: sil
 /** Safe indexed access to attributes. Use for reading style/direct props. */
 export function toAttributeRecord(
   attributes: unknown,

package/src/utils/extractImageStyle.ts

@@ -19,9 +19,9 @@ export function extractImageStyle<T extends ImagePropsGenerated['attributes']>(
 
   if (!attributes) return style;
 
-  // Map resizeMode to CSS object-fit (schemaVersion=2 uses `styles`, fallback to legacy `style`)
+  // Map resizeMode to CSS object-fit (schemaVersion=2 uses `styles`)
   const stylesBag = getStyleBag(attributes) as
-    | ImagePropsGenerated['attributes']['style']
+    | ImagePropsGenerated['attributes']['styles']
     | undefined;
   const resizeMode: ResizeModeOptionType | undefined =
     stylesBag?.resizeMode ?? (attributes as any).resizeMode;
@@ -40,9 +40,9 @@ export function extractImageStyleNative<
   const attributes = node.attributes;
   if (!attributes) return {};
 
-  // schemaVersion=2 uses `styles`, fallback to legacy `style`
+  // schemaVersion=2 uses `styles`
   const nativeStylesBag = getStyleBag(attributes) as
-    | ImagePropsGenerated['attributes']['style']
+    | ImagePropsGenerated['attributes']['styles']
     | undefined;
   const resizeMode: ResizeModeOptionType | undefined =
     nativeStylesBag?.resizeMode ?? (attributes as any).resizeMode;

package/src/utils/patterns.ts

@@ -73,7 +73,7 @@ function normalizePlatform(platform?: BuilderPlatform | null): BuilderPlatform {
 
 /**
  * Keys that conceptually behave like component props (behavior/flags) rather than
- * style properties. These should NOT be normalized into `attributes.style`.
+ * style properties. These should NOT be normalized into `attributes.styles`.
  */
 export const NON_STYLE_ATTRIBUTE_KEYS = new Set<string>([
   'scrollable',
@@ -82,7 +82,7 @@ export const NON_STYLE_ATTRIBUTE_KEYS = new Set<string>([
 ]);
 
 /**
- * schemaVersion=2 stores style-like keys inside `attributes.style`.
+ * schemaVersion=2 stores style-like keys inside `attributes.styles`.
  *
  * We treat View+Text schema keys as style-like by default, but explicitly exclude
  * known non-style props (behavior flags).
@@ -97,7 +97,7 @@ export function getStyleAttributeKeySet(): Set<string> {
     unknown
   >;
   const getNestedStyleKeys = (schema: Record<string, unknown>): string[] => {
-    const nested = schema.style;
+    const nested = schema.styles;
     return typeof nested === 'object' && nested
       ? Object.keys(nested)
       : Object.keys(schema);