@developer_tribe/react-builder 1.2.25 → 1.2.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (119) hide show
  1. package/dist/attributes-editor/AttributesEditorFields.d.ts +1 -1
  2. package/dist/attributes-editor/SpecialCategorySection.d.ts +1 -1
  3. package/dist/build-components/CountDown/CountDownProps.generated.d.ts +3 -4
  4. package/dist/build-components/PaywallOptions/PaywallOptionButton.d.ts +1 -1
  5. package/dist/build-components/PaywallProvider/PaywallContext.d.ts +1 -2
  6. package/dist/build-components/index.d.ts +1 -3
  7. package/dist/build-components/patterns.generated.d.ts +759 -1637
  8. package/dist/index.cjs.js +4 -4
  9. package/dist/index.cjs.js.map +1 -1
  10. package/dist/index.d.ts +1 -0
  11. package/dist/index.esm.js +4 -4
  12. package/dist/index.esm.js.map +1 -1
  13. package/dist/index.web.cjs.js +3 -3
  14. package/dist/index.web.cjs.js.map +1 -1
  15. package/dist/index.web.esm.js +3 -3
  16. package/dist/index.web.esm.js.map +1 -1
  17. package/dist/paywall/hooks/index.d.ts +0 -1
  18. package/dist/styles.css +1 -1
  19. package/dist/utils/index.d.ts +1 -0
  20. package/dist/utils/projectColors.d.ts +7 -0
  21. package/package.json +3 -3
  22. package/src/DeviceMockFrame.tsx +0 -2
  23. package/src/RenderPage.tsx +0 -9
  24. package/src/assets/.DS_Store +0 -0
  25. package/src/assets/meta.json +1 -1
  26. package/src/assets/samples/paywall-1.json +0 -1
  27. package/src/assets/samples/paywall-2.json +2 -3
  28. package/src/assets/samples/paywall-app-delete-offer.json +2 -3
  29. package/src/assets/samples/paywall-app-open-offer.json +2 -3
  30. package/src/assets/samples/paywall-back-offer.json +2 -3
  31. package/src/assets/samples/paywall-notification-offer.json +2 -3
  32. package/src/assets/samples/vpn-onboard-1.json +15 -15
  33. package/src/assets/samples/vpn-onboard-2.json +15 -15
  34. package/src/assets/samples/vpn-onboard-3.json +15 -15
  35. package/src/assets/samples/vpn-onboard-4.json +15 -15
  36. package/src/assets/samples/vpn-onboard-5.json +21 -21
  37. package/src/assets/samples/vpn-onboard-6.json +15 -15
  38. package/src/attributes-editor/AttributesEditorFields.tsx +0 -1
  39. package/src/attributes-editor/AttributesEditorView.tsx +0 -2
  40. package/src/attributes-editor/Field.tsx +1 -1
  41. package/src/attributes-editor/SpecialCategorySection.tsx +0 -1
  42. package/src/attributes-editor/useAttributesEditorModel.ts +18 -8
  43. package/src/build-components/BIcon/BIcon.tsx +1 -1
  44. package/src/build-components/BIcon/pattern.json +1 -3
  45. package/src/build-components/BackgroundImage/pattern.json +2 -10
  46. package/src/build-components/Button/pattern.json +1 -3
  47. package/src/build-components/Carousel/Carousel.tsx +1 -1
  48. package/src/build-components/Carousel/pattern.json +2 -8
  49. package/src/build-components/CarouselButtons/pattern.json +2 -9
  50. package/src/build-components/CarouselDots/pattern.json +1 -3
  51. package/src/build-components/CarouselItem/pattern.json +1 -3
  52. package/src/build-components/CarouselProvider/CarouselProvider.tsx +1 -1
  53. package/src/build-components/CarouselProvider/pattern.json +1 -4
  54. package/src/build-components/CountDown/CountDown.tsx +25 -1
  55. package/src/build-components/CountDown/CountDownProps.generated.ts +3 -4
  56. package/src/build-components/CountDown/pattern.json +9 -4
  57. package/src/build-components/Main/pattern.json +1 -3
  58. package/src/build-components/NavigationBarColor/pattern.json +1 -3
  59. package/src/build-components/Onboard/pattern.json +2 -6
  60. package/src/build-components/OnboardButton/OnboardButton.tsx +1 -4
  61. package/src/build-components/OnboardButton/pattern.json +3 -14
  62. package/src/build-components/OnboardButtons/OnboardButtons.tsx +1 -9
  63. package/src/build-components/OnboardButtons/pattern.json +4 -15
  64. package/src/build-components/OnboardDot/OnboardDot.tsx +2 -1
  65. package/src/build-components/OnboardDot/pattern.json +1 -3
  66. package/src/build-components/OnboardFooter/pattern.json +1 -3
  67. package/src/build-components/OnboardImage/pattern.json +1 -5
  68. package/src/build-components/OnboardItem/OnboardItem.tsx +1 -1
  69. package/src/build-components/OnboardItem/pattern.json +3 -11
  70. package/src/build-components/OnboardProvider/OnboardProvider.tsx +0 -1
  71. package/src/build-components/OnboardProvider/pattern.json +2 -8
  72. package/src/build-components/OnboardSubtitle/pattern.json +1 -4
  73. package/src/build-components/OnboardTitle/pattern.json +1 -4
  74. package/src/build-components/PaywallBackground/pattern.json +1 -3
  75. package/src/build-components/PaywallCloseButton/pattern.json +1 -3
  76. package/src/build-components/PaywallOptions/PaywallOptionButton.tsx +1 -2
  77. package/src/build-components/PaywallOptions/pattern.json +1 -3
  78. package/src/build-components/PaywallProvider/PaywallContext.ts +1 -1
  79. package/src/build-components/PaywallProvider/PaywallProvider.tsx +0 -10
  80. package/src/build-components/PaywallProvider/pattern.json +1 -3
  81. package/src/build-components/PaywallSubscribeButton/PaywallSubscribeButton.tsx +1 -1
  82. package/src/build-components/PaywallSubscribeButton/pattern.json +1 -3
  83. package/src/build-components/RadioButton/RadioButton.tsx +1 -1
  84. package/src/build-components/RadioButton/pattern.json +1 -3
  85. package/src/build-components/RenderNode.generated.tsx +0 -10
  86. package/src/build-components/Separator/pattern.json +1 -3
  87. package/src/build-components/StatusBarColor/pattern.json +1 -3
  88. package/src/build-components/Text/pattern.json +2 -9
  89. package/src/build-components/View/pattern.json +4 -16
  90. package/src/build-components/index.ts +0 -10
  91. package/src/build-components/patterns.generated.ts +789 -1700
  92. package/src/components/Builder.tsx +5 -0
  93. package/src/components/BuilderProvider.tsx +2 -37
  94. package/src/hooks/useSafeAreaViewStyle.ts +1 -3
  95. package/src/index.ts +4 -0
  96. package/src/mockOS/managers/navigationManager.ts +1 -1
  97. package/src/pages/ProjectPage.tsx +2 -0
  98. package/src/pages/tabs/SideTool.tsx +1 -22
  99. package/src/paywall/hooks/index.ts +0 -1
  100. package/src/store.ts +1 -6
  101. package/src/styles/base/_global.scss +2 -0
  102. package/src/utils/analyseNodeByPatterns.ts +4 -0
  103. package/src/utils/index.ts +1 -0
  104. package/src/utils/logRenderStore.ts +0 -1
  105. package/src/utils/novaToJson.ts +1 -5
  106. package/src/utils/parseColor.ts +1 -0
  107. package/src/utils/projectColors.ts +71 -0
  108. package/dist/build-components/Counter/Counter.d.ts +0 -2
  109. package/dist/build-components/Counter/CounterProps.generated.d.ts +0 -61
  110. package/dist/build-components/PaywallCounter/PaywallCounter.d.ts +0 -2
  111. package/dist/build-components/PaywallCounter/PaywallCounterProps.generated.d.ts +0 -61
  112. package/dist/paywall/hooks/useHandleGoBack.d.ts +0 -1
  113. package/src/build-components/Counter/Counter.tsx +0 -44
  114. package/src/build-components/Counter/CounterProps.generated.ts +0 -78
  115. package/src/build-components/Counter/pattern.json +0 -29
  116. package/src/build-components/PaywallCounter/PaywallCounter.tsx +0 -46
  117. package/src/build-components/PaywallCounter/PaywallCounterProps.generated.ts +0 -78
  118. package/src/build-components/PaywallCounter/pattern.json +0 -26
  119. package/src/paywall/hooks/useHandleGoBack.ts +0 -60
package/src/assets/samples/vpn-onboard-2.json CHANGED
@@ -314,7 +314,7 @@
314
314
  "styles": {
315
315
  "width": "100%",
316
316
  "height": 2,
317
- "backgroundColor": "STATIC_COLORS.SEPARATOR_COLOR"
317
+ "backgroundColor": "STATIC_COLORS.ONBOARD_SEPARATOR_COLOR"
318
318
  }
319
319
  }
320
320
  },
@@ -337,7 +337,7 @@
337
337
  "type": "OnboardButton",
338
338
  "attributes": {
339
339
  "labelKey": "onboard.skip.one-page",
340
- "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
340
+ "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
341
341
  "animation": "line-animation",
342
342
  "animation_color": "STATIC_COLORS.WHITE",
343
343
  "button_background_color": "STATIC_COLORS.TRANSPARENT",
@@ -357,9 +357,9 @@
357
357
  "type": "OnboardButton",
358
358
  "attributes": {
359
359
  "labelKey": "onboard.next.one-page",
360
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
360
+ "button_text_color": "STATIC_COLORS.WHITE",
361
361
  "animation": "simple-animation",
362
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
362
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
363
363
  "events": [
364
364
  {
365
365
  "type": "Navigate",
@@ -393,7 +393,7 @@
393
393
  "type": "OnboardButton",
394
394
  "attributes": {
395
395
  "labelKey": "onboard.skip.two-page",
396
- "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
396
+ "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
397
397
  "button_background_color": "STATIC_COLORS.TRANSPARENT",
398
398
  "events": [
399
399
  {
@@ -415,8 +415,8 @@
415
415
  "type": "OnboardButton",
416
416
  "attributes": {
417
417
  "labelKey": "onboard.next.two-page",
418
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
419
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
418
+ "button_text_color": "STATIC_COLORS.WHITE",
419
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
420
420
  "events": [
421
421
  {
422
422
  "type": "Permission",
@@ -454,7 +454,7 @@
454
454
  "type": "OnboardButton",
455
455
  "attributes": {
456
456
  "labelKey": "onboard.skip.three-page",
457
- "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
457
+ "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
458
458
  "button_background_color": "STATIC_COLORS.TRANSPARENT",
459
459
  "events": [
460
460
  {
@@ -472,8 +472,8 @@
472
472
  "type": "OnboardButton",
473
473
  "attributes": {
474
474
  "labelKey": "onboard.next.three-page",
475
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
476
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
475
+ "button_text_color": "STATIC_COLORS.WHITE",
476
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
477
477
  "events": [
478
478
  {
479
479
  "type": "Permission",
@@ -511,8 +511,8 @@
511
511
  "type": "OnboardButton",
512
512
  "attributes": {
513
513
  "labelKey": "onboard.allow.four-page",
514
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
515
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
514
+ "button_text_color": "STATIC_COLORS.WHITE",
515
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
516
516
  "events": [
517
517
  {
518
518
  "type": "Permission",
@@ -546,14 +546,14 @@
546
546
  "attributes": {
547
547
  "textLocalizationKey": "view.onboarding.footer.description",
548
548
  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
549
- "linkedWordFirstColor": "STATIC_COLORS.LINK_COLOR",
549
+ "linkedWordFirstColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
550
550
  "linkedWordFirstPage": "privacy",
551
551
  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
552
- "linkedWordSecondColor": "STATIC_COLORS.LINK_COLOR",
552
+ "linkedWordSecondColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
553
553
  "linkedWordSecondPage": "terms",
554
554
  "styles": {
555
555
  "gap": 8,
556
- "color": "THEME_COLORS.FOOTER_TEXT"
556
+ "color": "THEME_COLORS.ONBOARD_FOOTER_TEXT"
557
557
  }
558
558
  }
559
559
  }
package/src/assets/samples/vpn-onboard-3.json CHANGED
@@ -300,7 +300,7 @@
300
300
  "styles": {
301
301
  "width": "100%",
302
302
  "height": 2,
303
- "backgroundColor": "STATIC_COLORS.SEPARATOR_COLOR"
303
+ "backgroundColor": "STATIC_COLORS.ONBOARD_SEPARATOR_COLOR"
304
304
  }
305
305
  }
306
306
  },
@@ -323,7 +323,7 @@
323
323
  "type": "OnboardButton",
324
324
  "attributes": {
325
325
  "labelKey": "onboard.skip.one-page",
326
- "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
326
+ "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
327
327
  "button_background_color": "STATIC_COLORS.TRANSPARENT",
328
328
  "events": [
329
329
  {
@@ -341,8 +341,8 @@
341
341
  "type": "OnboardButton",
342
342
  "attributes": {
343
343
  "labelKey": "onboard.next.one-page",
344
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
345
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
344
+ "button_text_color": "STATIC_COLORS.WHITE",
345
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
346
346
  "events": [
347
347
  {
348
348
  "type": "Navigate",
@@ -376,7 +376,7 @@
376
376
  "type": "OnboardButton",
377
377
  "attributes": {
378
378
  "labelKey": "onboard.skip.two-page",
379
- "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
379
+ "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
380
380
  "button_background_color": "STATIC_COLORS.TRANSPARENT",
381
381
  "events": [
382
382
  {
@@ -398,8 +398,8 @@
398
398
  "type": "OnboardButton",
399
399
  "attributes": {
400
400
  "labelKey": "onboard.next.two-page",
401
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
402
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
401
+ "button_text_color": "STATIC_COLORS.WHITE",
402
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
403
403
  "events": [
404
404
  {
405
405
  "type": "Permission",
@@ -437,7 +437,7 @@
437
437
  "type": "OnboardButton",
438
438
  "attributes": {
439
439
  "labelKey": "onboard.skip.three-page",
440
- "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
440
+ "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
441
441
  "button_background_color": "STATIC_COLORS.TRANSPARENT",
442
442
  "events": [
443
443
  {
@@ -455,8 +455,8 @@
455
455
  "type": "OnboardButton",
456
456
  "attributes": {
457
457
  "labelKey": "onboard.next.three-page",
458
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
459
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
458
+ "button_text_color": "STATIC_COLORS.WHITE",
459
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
460
460
  "events": [
461
461
  {
462
462
  "type": "Permission",
@@ -494,8 +494,8 @@
494
494
  "type": "OnboardButton",
495
495
  "attributes": {
496
496
  "labelKey": "onboard.allow.four-page",
497
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
498
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
497
+ "button_text_color": "STATIC_COLORS.WHITE",
498
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
499
499
  "events": [
500
500
  {
501
501
  "type": "Permission",
@@ -529,14 +529,14 @@
529
529
  "attributes": {
530
530
  "textLocalizationKey": "view.onboarding.footer.description",
531
531
  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
532
- "linkedWordFirstColor": "STATIC_COLORS.LINK_COLOR",
532
+ "linkedWordFirstColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
533
533
  "linkedWordFirstPage": "privacy",
534
534
  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
535
- "linkedWordSecondColor": "STATIC_COLORS.LINK_COLOR",
535
+ "linkedWordSecondColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
536
536
  "linkedWordSecondPage": "terms",
537
537
  "styles": {
538
538
  "gap": 8,
539
- "color": "THEME_COLORS.FOOTER_TEXT"
539
+ "color": "THEME_COLORS.ONBOARD_FOOTER_TEXT"
540
540
  }
541
541
  }
542
542
  }
package/src/assets/samples/vpn-onboard-4.json CHANGED
@@ -300,7 +300,7 @@
300
300
  "styles": {
301
301
  "width": "100%",
302
302
  "height": 2,
303
- "backgroundColor": "STATIC_COLORS.SEPARATOR_COLOR"
303
+ "backgroundColor": "STATIC_COLORS.ONBOARD_SEPARATOR_COLOR"
304
304
  }
305
305
  }
306
306
  },
@@ -323,7 +323,7 @@
323
323
  "type": "OnboardButton",
324
324
  "attributes": {
325
325
  "labelKey": "onboard.skip.one-page",
326
- "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
326
+ "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
327
327
  "button_background_color": "STATIC_COLORS.TRANSPARENT",
328
328
  "events": [
329
329
  {
@@ -341,8 +341,8 @@
341
341
  "type": "OnboardButton",
342
342
  "attributes": {
343
343
  "labelKey": "onboard.next.one-page",
344
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
345
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
344
+ "button_text_color": "STATIC_COLORS.WHITE",
345
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
346
346
  "events": [
347
347
  {
348
348
  "type": "Navigate",
@@ -376,7 +376,7 @@
376
376
  "type": "OnboardButton",
377
377
  "attributes": {
378
378
  "labelKey": "onboard.skip.two-page",
379
- "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
379
+ "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
380
380
  "button_background_color": "STATIC_COLORS.TRANSPARENT",
381
381
  "events": [
382
382
  {
@@ -398,8 +398,8 @@
398
398
  "type": "OnboardButton",
399
399
  "attributes": {
400
400
  "labelKey": "onboard.next.two-page",
401
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
402
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
401
+ "button_text_color": "STATIC_COLORS.WHITE",
402
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
403
403
  "events": [
404
404
  {
405
405
  "type": "Permission",
@@ -437,7 +437,7 @@
437
437
  "type": "OnboardButton",
438
438
  "attributes": {
439
439
  "labelKey": "onboard.skip.three-page",
440
- "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
440
+ "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
441
441
  "button_background_color": "STATIC_COLORS.TRANSPARENT",
442
442
  "events": [
443
443
  {
@@ -455,8 +455,8 @@
455
455
  "type": "OnboardButton",
456
456
  "attributes": {
457
457
  "labelKey": "onboard.next.three-page",
458
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
459
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
458
+ "button_text_color": "STATIC_COLORS.WHITE",
459
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
460
460
  "events": [
461
461
  {
462
462
  "type": "Permission",
@@ -494,8 +494,8 @@
494
494
  "type": "OnboardButton",
495
495
  "attributes": {
496
496
  "labelKey": "onboard.allow.four-page",
497
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
498
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
497
+ "button_text_color": "STATIC_COLORS.WHITE",
498
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
499
499
  "events": [
500
500
  {
501
501
  "type": "Permission",
@@ -529,14 +529,14 @@
529
529
  "attributes": {
530
530
  "textLocalizationKey": "view.onboarding.footer.description",
531
531
  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
532
- "linkedWordFirstColor": "STATIC_COLORS.LINK_COLOR",
532
+ "linkedWordFirstColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
533
533
  "linkedWordFirstPage": "privacy",
534
534
  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
535
- "linkedWordSecondColor": "STATIC_COLORS.LINK_COLOR",
535
+ "linkedWordSecondColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
536
536
  "linkedWordSecondPage": "terms",
537
537
  "styles": {
538
538
  "gap": 8,
539
- "color": "THEME_COLORS.FOOTER_TEXT"
539
+ "color": "THEME_COLORS.ONBOARD_FOOTER_TEXT"
540
540
  }
541
541
  }
542
542
  }
package/src/assets/samples/vpn-onboard-5.json CHANGED
@@ -400,7 +400,7 @@
400
400
  "styles": {
401
401
  "width": "100%",
402
402
  "height": 2,
403
- "backgroundColor": "STATIC_COLORS.SEPARATOR_COLOR"
403
+ "backgroundColor": "STATIC_COLORS.ONBOARD_SEPARATOR_COLOR"
404
404
  }
405
405
  }
406
406
  },
@@ -423,7 +423,7 @@
423
423
  "type": "OnboardButton",
424
424
  "attributes": {
425
425
  "labelKey": "onboard.skip.one-page",
426
- "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
426
+ "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
427
427
  "button_background_color": "THEME_COLORS.LINE",
428
428
  "events": [
429
429
  {
@@ -441,8 +441,8 @@
441
441
  "type": "OnboardButton",
442
442
  "attributes": {
443
443
  "labelKey": "onboard.next.one-page",
444
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
445
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
444
+ "button_text_color": "STATIC_COLORS.WHITE",
445
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
446
446
  "events": [
447
447
  {
448
448
  "type": "Navigate",
@@ -476,7 +476,7 @@
476
476
  "type": "OnboardButton",
477
477
  "attributes": {
478
478
  "labelKey": "onboard.skip.two-page",
479
- "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
479
+ "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
480
480
  "button_background_color": "THEME_COLORS.LINE",
481
481
  "events": [
482
482
  {
@@ -494,8 +494,8 @@
494
494
  "type": "OnboardButton",
495
495
  "attributes": {
496
496
  "labelKey": "onboard.next.two-page",
497
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
498
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
497
+ "button_text_color": "STATIC_COLORS.WHITE",
498
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
499
499
  "events": [
500
500
  {
501
501
  "type": "Navigate",
@@ -529,7 +529,7 @@
529
529
  "type": "OnboardButton",
530
530
  "attributes": {
531
531
  "labelKey": "onboard.skip.three-page",
532
- "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
532
+ "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
533
533
  "button_background_color": "THEME_COLORS.LINE",
534
534
  "events": [
535
535
  {
@@ -547,8 +547,8 @@
547
547
  "type": "OnboardButton",
548
548
  "attributes": {
549
549
  "labelKey": "onboard.next.three-page",
550
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
551
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
550
+ "button_text_color": "STATIC_COLORS.WHITE",
551
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
552
552
  "events": [
553
553
  {
554
554
  "type": "Navigate",
@@ -582,7 +582,7 @@
582
582
  "type": "OnboardButton",
583
583
  "attributes": {
584
584
  "labelKey": "onboard.skip.five-page",
585
- "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
585
+ "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
586
586
  "button_background_color": "THEME_COLORS.LINE",
587
587
  "events": [
588
588
  {
@@ -600,8 +600,8 @@
600
600
  "type": "OnboardButton",
601
601
  "attributes": {
602
602
  "labelKey": "onboard.next.five-page",
603
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
604
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
603
+ "button_text_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_TEXT",
604
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
605
605
  "events": [
606
606
  {
607
607
  "type": "Permission",
@@ -639,7 +639,7 @@
639
639
  "type": "OnboardButton",
640
640
  "attributes": {
641
641
  "labelKey": "onboard.skip.five-page",
642
- "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
642
+ "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
643
643
  "button_background_color": "THEME_COLORS.LINE",
644
644
  "events": [
645
645
  {
@@ -657,8 +657,8 @@
657
657
  "type": "OnboardButton",
658
658
  "attributes": {
659
659
  "labelKey": "onboard.next.five-page",
660
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
661
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
660
+ "button_text_color": "STATIC_COLORS.WHITE",
661
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
662
662
  "events": [
663
663
  {
664
664
  "type": "Permission",
@@ -696,8 +696,8 @@
696
696
  "type": "OnboardButton",
697
697
  "attributes": {
698
698
  "labelKey": "onboard.allow.four-page",
699
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
700
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
699
+ "button_text_color": "STATIC_COLORS.WHITE",
700
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
701
701
  "events": [
702
702
  {
703
703
  "type": "Permission",
@@ -731,14 +731,14 @@
731
731
  "attributes": {
732
732
  "textLocalizationKey": "view.onboarding.footer.description",
733
733
  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
734
- "linkedWordFirstColor": "STATIC_COLORS.LINK_COLOR",
734
+ "linkedWordFirstColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
735
735
  "linkedWordFirstPage": "privacy",
736
736
  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
737
- "linkedWordSecondColor": "STATIC_COLORS.LINK_COLOR",
737
+ "linkedWordSecondColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
738
738
  "linkedWordSecondPage": "terms",
739
739
  "styles": {
740
740
  "gap": 8,
741
- "color": "THEME_COLORS.FOOTER_TEXT"
741
+ "color": "THEME_COLORS.ONBOARD_FOOTER_TEXT"
742
742
  }
743
743
  }
744
744
  }
package/src/assets/samples/vpn-onboard-6.json CHANGED
@@ -314,7 +314,7 @@
314
314
  "styles": {
315
315
  "width": "100%",
316
316
  "height": 2,
317
- "backgroundColor": "STATIC_COLORS.SEPARATOR_COLOR"
317
+ "backgroundColor": "STATIC_COLORS.ONBOARD_SEPARATOR_COLOR"
318
318
  }
319
319
  }
320
320
  },
@@ -337,7 +337,7 @@
337
337
  "type": "OnboardButton",
338
338
  "attributes": {
339
339
  "labelKey": "onboard.skip.one-page",
340
- "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
340
+ "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
341
341
  "button_background_color": "THEME_COLORS.TEXT",
342
342
  "events": [
343
343
  {
@@ -355,8 +355,8 @@
355
355
  "type": "OnboardButton",
356
356
  "attributes": {
357
357
  "labelKey": "onboard.next.one-page",
358
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
359
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
358
+ "button_text_color": "STATIC_COLORS.WHITE",
359
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
360
360
  "events": [
361
361
  {
362
362
  "type": "Navigate",
@@ -390,7 +390,7 @@
390
390
  "type": "OnboardButton",
391
391
  "attributes": {
392
392
  "labelKey": "onboard.skip.two-page",
393
- "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
393
+ "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
394
394
  "button_background_color": "THEME_COLORS.TEXT",
395
395
  "events": [
396
396
  {
@@ -408,8 +408,8 @@
408
408
  "type": "OnboardButton",
409
409
  "attributes": {
410
410
  "labelKey": "onboard.next.two-page",
411
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
412
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
411
+ "button_text_color": "STATIC_COLORS.WHITE",
412
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
413
413
  "events": [
414
414
  {
415
415
  "type": "Navigate",
@@ -443,7 +443,7 @@
443
443
  "type": "OnboardButton",
444
444
  "attributes": {
445
445
  "labelKey": "onboard.skip.three-page",
446
- "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
446
+ "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
447
447
  "button_background_color": "THEME_COLORS.TEXT",
448
448
  "events": [
449
449
  {
@@ -461,8 +461,8 @@
461
461
  "type": "OnboardButton",
462
462
  "attributes": {
463
463
  "labelKey": "onboard.next.three-page",
464
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
465
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
464
+ "button_text_color": "STATIC_COLORS.WHITE",
465
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
466
466
  "events": [
467
467
  {
468
468
  "type": "Permission",
@@ -500,8 +500,8 @@
500
500
  "type": "OnboardButton",
501
501
  "attributes": {
502
502
  "labelKey": "onboard.allow.four-page",
503
- "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
504
- "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
503
+ "button_text_color": "STATIC_COLORS.WHITE",
504
+ "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
505
505
  "events": [
506
506
  {
507
507
  "type": "Permission",
@@ -535,14 +535,14 @@
535
535
  "attributes": {
536
536
  "textLocalizationKey": "view.onboarding.footer.description",
537
537
  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
538
- "linkedWordFirstColor": "STATIC_COLORS.LINK_COLOR",
538
+ "linkedWordFirstColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
539
539
  "linkedWordFirstPage": "privacy",
540
540
  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
541
- "linkedWordSecondColor": "STATIC_COLORS.LINK_COLOR",
541
+ "linkedWordSecondColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
542
542
  "linkedWordSecondPage": "terms",
543
543
  "styles": {
544
544
  "gap": 8,
545
- "color": "THEME_COLORS.FOOTER_TEXT"
545
+ "color": "THEME_COLORS.ONBOARD_FOOTER_TEXT"
546
546
  }
547
547
  }
548
548
  }
package/src/attributes-editor/AttributesEditorFields.tsx CHANGED
@@ -14,7 +14,6 @@ type IconTypePickerFieldProps = {
14
14
  };
15
15
 
16
16
  export function IconTypePickerField({
17
- name,
18
17
  value,
19
18
  onChange,
20
19
  }: IconTypePickerFieldProps) {
package/src/attributes-editor/AttributesEditorView.tsx CHANGED
@@ -13,7 +13,6 @@ import type {
13
13
  AttributesEditorModel,
14
14
  AttributesEditorSpecialSection,
15
15
  } from './attributesEditorModelTypes';
16
- import type { NodeDefaultAttribute } from '../types/Node';
17
16
 
18
17
  type AttributesEditorViewProps = AttributesEditorModel;
19
18
 
@@ -75,7 +74,6 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
75
74
  projectColorsForPicker,
76
75
  layoutContext,
77
76
  viewAttributes,
78
- styleBag,
79
77
  attributes,
80
78
  projectFonts,
81
79
  loadedFonts,
package/src/attributes-editor/Field.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useCallback, useEffect, useMemo, useState } from 'react';
1
+ import React, { useMemo, useState } from 'react';
2
2
  import type { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
3
3
  import { ColorModal, resolveProjectColorValue } from '../modals/ColorModal';
4
4
  import type { ProjectColors } from '../types/Project';
package/src/attributes-editor/SpecialCategorySection.tsx CHANGED
@@ -41,7 +41,6 @@ export function SpecialCategorySection({
41
41
  category,
42
42
  entries,
43
43
  attributeMeta,
44
- attributes,
45
44
  getAttributeValue,
46
45
  onAttributeChange,
47
46
  componentType,
package/src/attributes-editor/useAttributesEditorModel.ts CHANGED
@@ -83,9 +83,14 @@ export function useAttributesEditorModel({
83
83
  projectColors,
84
84
  }: AttributesEditorProps): AttributesEditorModel {
85
85
  const isInvalidNode = !node || isNodeString(node);
86
- const baseData: NodeData<NodeDefaultAttribute> = isInvalidNode
87
- ? { type: 'View', children: null, attributes: {} }
88
- : (node as NodeData<NodeDefaultAttribute>);
86
+ // Memoize baseData to prevent it from changing on every render
87
+ const baseData = useMemo<NodeData<NodeDefaultAttribute>>(
88
+ () =>
89
+ isInvalidNode
90
+ ? { type: 'View', children: null, attributes: {} }
91
+ : (node as NodeData<NodeDefaultAttribute>),
92
+ [isInvalidNode, node],
93
+ );
89
94
 
90
95
  const data = useNode(baseData);
91
96
  const {
@@ -102,12 +107,17 @@ export function useAttributesEditorModel({
102
107
  addError: state.addError,
103
108
  }));
104
109
 
105
- const schema = (getAttributeSchema(data?.type) ?? {}) as Record<
106
- string,
107
- unknown
108
- >;
110
+ // Memoize schema to prevent it from changing on every render
111
+ const schema = useMemo(
112
+ () => (getAttributeSchema(data?.type) ?? {}) as Record<string, unknown>,
113
+ [data?.type],
114
+ );
109
115
  const attributeMeta = getAttributeMeta(data?.type);
110
- const attributes = (data?.attributes ?? {}) as NodeDefaultAttribute;
116
+ // Memoize attributes to prevent it from changing on every render
117
+ const attributes = useMemo(
118
+ () => (data?.attributes ?? {}) as NodeDefaultAttribute,
119
+ [data?.attributes],
120
+ );
111
121
 
112
122
  const styleAttributeKeys = useMemo(() => getStyleAttributeKeySet(), []);
113
123
  const styleBagInfo = useMemo(
package/src/build-components/BIcon/BIcon.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useId, useMemo } from 'react';
1
+ import React, { useId } from 'react';
2
2
  import type { BIconComponentProps } from './BIconProps.generated';
3
3
  import useNode from '../useNode';
4
4
  import { useBuilderParams } from '../../components/BuilderProvider';
package/src/build-components/BIcon/pattern.json CHANGED
@@ -13,9 +13,7 @@
13
13
  }
14
14
  },
15
15
  "meta": {
16
- "desiredParent": [
17
- "all"
18
- ],
16
+ "desiredParent": ["all"],
19
17
  "label": "BIcon",
20
18
  "description": "Renders an icon from the icon set.",
21
19
  "styles": {},