@developer_tribe/react-builder 1.2.20 → 1.2.22

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 (151) hide show
  1. package/dist/attribute-analyser/style/web/useExtractTextStyle.d.ts +1 -1
  2. package/dist/build-components/BIcon/BIconProps.generated.d.ts +2 -0
  3. package/dist/build-components/BackgroundImage/BackgroundImageProps.generated.d.ts +2 -0
  4. package/dist/build-components/Button/ButtonProps.generated.d.ts +2 -0
  5. package/dist/build-components/Carousel/CarouselProps.generated.d.ts +2 -0
  6. package/dist/build-components/CarouselButtons/CarouselButtonsProps.generated.d.ts +2 -0
  7. package/dist/build-components/CarouselDots/CarouselDotsProps.generated.d.ts +2 -0
  8. package/dist/build-components/CarouselItem/CarouselItemProps.generated.d.ts +2 -0
  9. package/dist/build-components/CarouselProvider/CarouselProviderProps.generated.d.ts +2 -0
  10. package/dist/build-components/CountDown/CountDownProps.generated.d.ts +2 -0
  11. package/dist/build-components/Counter/CounterProps.generated.d.ts +2 -0
  12. package/dist/build-components/Image/ImageProps.generated.d.ts +2 -0
  13. package/dist/build-components/Main/MainProps.generated.d.ts +2 -0
  14. package/dist/build-components/Onboard/OnboardProps.generated.d.ts +2 -0
  15. package/dist/build-components/OnboardButton/OnboardButtonProps.generated.d.ts +2 -0
  16. package/dist/build-components/OnboardButtons/OnboardButtonsProps.generated.d.ts +2 -0
  17. package/dist/build-components/OnboardDot/OnboardDotProps.generated.d.ts +2 -0
  18. package/dist/build-components/OnboardFooter/OnboardFooterProps.generated.d.ts +2 -0
  19. package/dist/build-components/OnboardImage/OnboardImageProps.generated.d.ts +2 -0
  20. package/dist/build-components/OnboardItem/OnboardItemProps.generated.d.ts +2 -0
  21. package/dist/build-components/OnboardProvider/OnboardProviderProps.generated.d.ts +2 -0
  22. package/dist/build-components/OnboardSubtitle/OnboardSubtitleProps.generated.d.ts +2 -0
  23. package/dist/build-components/OnboardTitle/OnboardTitleProps.generated.d.ts +2 -0
  24. package/dist/build-components/PaywallBackground/PaywallBackgroundProps.generated.d.ts +2 -0
  25. package/dist/build-components/PaywallCloseButton/PaywallCloseButtonProps.generated.d.ts +2 -0
  26. package/dist/build-components/PaywallCounter/PaywallCounterProps.generated.d.ts +2 -0
  27. package/dist/build-components/PaywallOptions/PaywallOptionsProps.generated.d.ts +2 -0
  28. package/dist/build-components/PaywallProvider/PaywallProviderProps.generated.d.ts +2 -0
  29. package/dist/build-components/PaywallSubscribeButton/PaywallSubscribeButtonProps.generated.d.ts +2 -0
  30. package/dist/build-components/RadioButton/RadioButtonProps.generated.d.ts +2 -0
  31. package/dist/build-components/Text/TextProps.generated.d.ts +2 -0
  32. package/dist/build-components/View/View.d.ts +1 -1
  33. package/dist/build-components/View/ViewProps.generated.d.ts +2 -0
  34. package/dist/build-components/patterns.generated.d.ts +287 -2
  35. package/dist/components/BuilderButton.d.ts +3 -1
  36. package/dist/index.cjs.js +3 -3
  37. package/dist/index.cjs.js.map +1 -1
  38. package/dist/index.esm.js +4 -4
  39. package/dist/index.esm.js.map +1 -1
  40. package/dist/index.web.cjs.js +4 -4
  41. package/dist/index.web.cjs.js.map +1 -1
  42. package/dist/index.web.esm.js +4 -4
  43. package/dist/index.web.esm.js.map +1 -1
  44. package/dist/store.d.ts +2 -0
  45. package/dist/styles.css +1 -1
  46. package/dist/utils/extractTextStyle/extractTextStyle.d.ts +1 -0
  47. package/package.json +1 -1
  48. package/scripts/migrate-patterns-to-v2.mjs +13 -8
  49. package/scripts/prebuild/icon-generator.js +34 -37
  50. package/src/assets/loading_animation.json +2587 -1
  51. package/src/assets/meta.json +1 -1
  52. package/src/assets/samples/carousel-sample.json +279 -197
  53. package/src/assets/samples/getSamples.ts +16 -1
  54. package/src/assets/samples/paywall-1.json +16 -0
  55. package/src/assets/samples/paywall-2.json +2 -2
  56. package/src/assets/samples/paywall-app-delete-offer.json +353 -0
  57. package/src/assets/samples/paywall-app-open-offer.json +353 -0
  58. package/src/assets/samples/paywall-back-offer.json +353 -0
  59. package/src/assets/samples/paywall-notification-offer.json +353 -0
  60. package/src/assets/samples/vpn-onboard-1.json +23 -12
  61. package/src/assets/samples/vpn-onboard-2.json +23 -12
  62. package/src/assets/samples/vpn-onboard-3.json +23 -12
  63. package/src/assets/samples/vpn-onboard-4.json +23 -12
  64. package/src/assets/samples/vpn-onboard-5.json +23 -12
  65. package/src/assets/samples/vpn-onboard-6.json +23 -12
  66. package/src/attribute-analyser/style/web/useExtractTextStyle.ts +9 -2
  67. package/src/build-components/BIcon/BIconProps.generated.ts +2 -0
  68. package/src/build-components/BackgroundImage/BackgroundImageProps.generated.ts +2 -0
  69. package/src/build-components/Button/ButtonProps.generated.ts +2 -0
  70. package/src/build-components/Carousel/CarouselProps.generated.ts +2 -0
  71. package/src/build-components/Carousel/pattern.json +2 -8
  72. package/src/build-components/CarouselButtons/CarouselButtonsProps.generated.ts +2 -0
  73. package/src/build-components/CarouselButtons/pattern.json +2 -9
  74. package/src/build-components/CarouselDots/CarouselDotsProps.generated.ts +2 -0
  75. package/src/build-components/CarouselDots/pattern.json +1 -3
  76. package/src/build-components/CarouselItem/CarouselItemProps.generated.ts +2 -0
  77. package/src/build-components/CarouselItem/pattern.json +1 -3
  78. package/src/build-components/CarouselProvider/CarouselProvider.tsx +5 -44
  79. package/src/build-components/CarouselProvider/CarouselProviderProps.generated.ts +2 -0
  80. package/src/build-components/CarouselProvider/pattern.json +6 -0
  81. package/src/build-components/CountDown/CountDownProps.generated.ts +2 -0
  82. package/src/build-components/CountDown/pattern.json +0 -1
  83. package/src/build-components/Counter/CounterProps.generated.ts +2 -0
  84. package/src/build-components/Counter/pattern.json +0 -1
  85. package/src/build-components/Image/Image.tsx +1 -1
  86. package/src/build-components/Image/ImageProps.generated.ts +2 -0
  87. package/src/build-components/Main/MainProps.generated.ts +2 -0
  88. package/src/build-components/Main/pattern.json +1 -3
  89. package/src/build-components/Onboard/OnboardProps.generated.ts +2 -0
  90. package/src/build-components/Onboard/pattern.json +2 -6
  91. package/src/build-components/OnboardButton/OnboardButton.tsx +0 -4
  92. package/src/build-components/OnboardButton/OnboardButtonProps.generated.ts +2 -0
  93. package/src/build-components/OnboardButton/pattern.json +9 -14
  94. package/src/build-components/OnboardButtons/OnboardButtons.tsx +17 -20
  95. package/src/build-components/OnboardButtons/OnboardButtonsProps.generated.ts +2 -0
  96. package/src/build-components/OnboardButtons/pattern.json +15 -15
  97. package/src/build-components/OnboardDot/OnboardDot.tsx +0 -3
  98. package/src/build-components/OnboardDot/OnboardDotProps.generated.ts +2 -0
  99. package/src/build-components/OnboardFooter/OnboardFooter.tsx +63 -51
  100. package/src/build-components/OnboardFooter/OnboardFooterProps.generated.ts +2 -0
  101. package/src/build-components/OnboardFooter/pattern.json +6 -3
  102. package/src/build-components/OnboardImage/OnboardImageProps.generated.ts +2 -0
  103. package/src/build-components/OnboardImage/pattern.json +1 -5
  104. package/src/build-components/OnboardItem/OnboardItemProps.generated.ts +2 -0
  105. package/src/build-components/OnboardItem/pattern.json +3 -11
  106. package/src/build-components/OnboardProvider/OnboardProviderProps.generated.ts +2 -0
  107. package/src/build-components/OnboardProvider/pattern.json +2 -8
  108. package/src/build-components/OnboardSubtitle/OnboardSubtitleProps.generated.ts +2 -0
  109. package/src/build-components/OnboardSubtitle/pattern.json +1 -4
  110. package/src/build-components/OnboardTitle/OnboardTitleProps.generated.ts +2 -0
  111. package/src/build-components/OnboardTitle/pattern.json +1 -4
  112. package/src/build-components/PaywallBackground/PaywallBackgroundProps.generated.ts +2 -0
  113. package/src/build-components/PaywallCloseButton/PaywallCloseButtonProps.generated.ts +2 -0
  114. package/src/build-components/PaywallCloseButton/pattern.json +1 -3
  115. package/src/build-components/PaywallCounter/PaywallCounterProps.generated.ts +2 -0
  116. package/src/build-components/PaywallCounter/pattern.json +0 -1
  117. package/src/build-components/PaywallOptions/PaywallOptions.tsx +1 -1
  118. package/src/build-components/PaywallOptions/PaywallOptionsProps.generated.ts +2 -0
  119. package/src/build-components/PaywallOptions/pattern.json +1 -3
  120. package/src/build-components/PaywallProvider/PaywallProviderProps.generated.ts +2 -0
  121. package/src/build-components/PaywallProvider/pattern.json +1 -3
  122. package/src/build-components/PaywallSubscribeButton/PaywallSubscribeButtonProps.generated.ts +2 -0
  123. package/src/build-components/PaywallSubscribeButton/pattern.json +1 -3
  124. package/src/build-components/RadioButton/RadioButtonProps.generated.ts +2 -0
  125. package/src/build-components/RadioButton/pattern.json +1 -3
  126. package/src/build-components/RenderNode.generated.tsx +1 -1
  127. package/src/build-components/Text/TextProps.generated.ts +2 -0
  128. package/src/build-components/View/View.tsx +11 -7
  129. package/src/build-components/View/ViewProps.generated.ts +2 -0
  130. package/src/build-components/View/pattern.json +8 -0
  131. package/src/build-components/patterns.generated.ts +277 -2
  132. package/src/build-components/useNode.ts +2 -2
  133. package/src/components/Builder.tsx +98 -8
  134. package/src/components/BuilderButton.tsx +39 -7
  135. package/src/components/DeviceButton.tsx +5 -1
  136. package/src/pages/DebugJsonPage.tsx +30 -1
  137. package/src/pages/ProjectDebug.tsx +0 -1
  138. package/src/pages/ProjectPage.tsx +2 -2
  139. package/src/store.ts +8 -0
  140. package/src/styles/base/_global.scss +0 -5
  141. package/src/styles/components/_editor-shell.scss +18 -3
  142. package/src/styles/components/_onboard.scss +0 -17
  143. package/src/styles/foundation/_colors.scss +1 -4
  144. package/src/styles/foundation/_typography.scss +0 -1
  145. package/src/styles/layout/_builder.scss +20 -0
  146. package/src/styles/modals/_product-presets-modal.scss +0 -2
  147. package/src/utils/extractTextStyle/extractTextStyle.ts +47 -13
  148. package/src/utils/extractViewStyle/extractViewStyle.ts +118 -39
  149. package/src/utils/logRenderStore.ts +7 -9
  150. package/src/utils/logger.ts +1 -5
  151. package/src/utils/repairNodeKeys.ts +1 -4
@@ -19,6 +19,7 @@ export const patterns = [
19
19
  fontWeight: 'fontWeight',
20
20
  textAlign: ['left', 'center', 'right', 'justify'],
21
21
  flexDirection: ['row', 'column'],
22
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
22
23
  alignItems: [
23
24
  'flex-start',
24
25
  'center',
@@ -144,6 +145,13 @@ export const patterns = [
144
145
  specialCategory: null,
145
146
  sort: 4,
146
147
  },
148
+ flexWrap: {
149
+ label: 'Flex Wrap',
150
+ description: 'Controls whether flex items wrap to multiple lines.',
151
+ category: 'container',
152
+ specialCategory: null,
153
+ sort: 4.5,
154
+ },
147
155
  alignItems: {
148
156
  label: 'Align Items',
149
157
  description: 'Controls cross-axis alignment.',
@@ -469,6 +477,7 @@ export const patterns = [
469
477
  scrollable: 'boolean',
470
478
  style: {
471
479
  flexDirection: ['row', 'column'],
480
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
472
481
  alignItems: [
473
482
  'flex-start',
474
483
  'center',
@@ -602,6 +611,13 @@ export const patterns = [
602
611
  specialCategory: null,
603
612
  sort: 4,
604
613
  },
614
+ flexWrap: {
615
+ label: 'Flex Wrap',
616
+ description: 'Controls whether flex items wrap to multiple lines.',
617
+ category: 'container',
618
+ specialCategory: null,
619
+ sort: 4.5,
620
+ },
605
621
  alignItems: {
606
622
  label: 'Align Items',
607
623
  description: 'Controls cross-axis alignment.',
@@ -874,6 +890,7 @@ export const patterns = [
874
890
  scrollable: 'boolean',
875
891
  style: {
876
892
  flexDirection: ['row', 'column'],
893
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
877
894
  alignItems: [
878
895
  'flex-start',
879
896
  'center',
@@ -1022,6 +1039,13 @@ export const patterns = [
1022
1039
  specialCategory: null,
1023
1040
  sort: 4,
1024
1041
  },
1042
+ flexWrap: {
1043
+ label: 'Flex Wrap',
1044
+ description: 'Controls whether flex items wrap to multiple lines.',
1045
+ category: 'container',
1046
+ specialCategory: null,
1047
+ sort: 4.5,
1048
+ },
1025
1049
  alignItems: {
1026
1050
  label: 'Align Items',
1027
1051
  description: 'Controls cross-axis alignment.',
@@ -1284,6 +1308,7 @@ export const patterns = [
1284
1308
  scrollable: 'boolean',
1285
1309
  style: {
1286
1310
  flexDirection: ['row', 'column'],
1311
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
1287
1312
  alignItems: [
1288
1313
  'flex-start',
1289
1314
  'center',
@@ -1399,6 +1424,13 @@ export const patterns = [
1399
1424
  specialCategory: null,
1400
1425
  sort: 4,
1401
1426
  },
1427
+ flexWrap: {
1428
+ label: 'Flex Wrap',
1429
+ description: 'Controls whether flex items wrap to multiple lines.',
1430
+ category: 'container',
1431
+ specialCategory: null,
1432
+ sort: 4.5,
1433
+ },
1402
1434
  alignItems: {
1403
1435
  label: 'Align Items',
1404
1436
  description: 'Controls cross-axis alignment.',
@@ -1657,6 +1689,7 @@ export const patterns = [
1657
1689
  scrollable: 'boolean',
1658
1690
  style: {
1659
1691
  flexDirection: ['row', 'column'],
1692
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
1660
1693
  alignItems: [
1661
1694
  'flex-start',
1662
1695
  'center',
@@ -1771,6 +1804,13 @@ export const patterns = [
1771
1804
  specialCategory: null,
1772
1805
  sort: 4,
1773
1806
  },
1807
+ flexWrap: {
1808
+ label: 'Flex Wrap',
1809
+ description: 'Controls whether flex items wrap to multiple lines.',
1810
+ category: 'container',
1811
+ specialCategory: null,
1812
+ sort: 4.5,
1813
+ },
1774
1814
  alignItems: {
1775
1815
  label: 'Align Items',
1776
1816
  description: 'Controls cross-axis alignment.',
@@ -2043,6 +2083,7 @@ export const patterns = [
2043
2083
  scrollable: 'boolean',
2044
2084
  style: {
2045
2085
  flexDirection: ['row', 'column'],
2086
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
2046
2087
  alignItems: [
2047
2088
  'flex-start',
2048
2089
  'center',
@@ -2170,6 +2211,13 @@ export const patterns = [
2170
2211
  specialCategory: null,
2171
2212
  sort: 4,
2172
2213
  },
2214
+ flexWrap: {
2215
+ label: 'Flex Wrap',
2216
+ description: 'Controls whether flex items wrap to multiple lines.',
2217
+ category: 'container',
2218
+ specialCategory: null,
2219
+ sort: 4.5,
2220
+ },
2173
2221
  alignItems: {
2174
2222
  label: 'Align Items',
2175
2223
  description: 'Controls cross-axis alignment.',
@@ -2428,6 +2476,7 @@ export const patterns = [
2428
2476
  scrollable: 'boolean',
2429
2477
  style: {
2430
2478
  flexDirection: ['row', 'column'],
2479
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
2431
2480
  alignItems: [
2432
2481
  'flex-start',
2433
2482
  'center',
@@ -2540,6 +2589,13 @@ export const patterns = [
2540
2589
  specialCategory: null,
2541
2590
  sort: 4,
2542
2591
  },
2592
+ flexWrap: {
2593
+ label: 'Flex Wrap',
2594
+ description: 'Controls whether flex items wrap to multiple lines.',
2595
+ category: 'container',
2596
+ specialCategory: null,
2597
+ sort: 4.5,
2598
+ },
2543
2599
  alignItems: {
2544
2600
  label: 'Align Items',
2545
2601
  description: 'Controls cross-axis alignment.',
@@ -2798,6 +2854,7 @@ export const patterns = [
2798
2854
  scrollable: 'boolean',
2799
2855
  style: {
2800
2856
  flexDirection: ['row', 'column'],
2857
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
2801
2858
  alignItems: [
2802
2859
  'flex-start',
2803
2860
  'center',
@@ -2847,6 +2904,7 @@ export const patterns = [
2847
2904
  title: 'title',
2848
2905
  description: 'description',
2849
2906
  },
2907
+ defaults: { style: { width: '100%', height: '100%' } },
2850
2908
  },
2851
2909
  meta: {
2852
2910
  desiredParent: ['root', '>View'],
@@ -2910,6 +2968,13 @@ export const patterns = [
2910
2968
  specialCategory: null,
2911
2969
  sort: 4,
2912
2970
  },
2971
+ flexWrap: {
2972
+ label: 'Flex Wrap',
2973
+ description: 'Controls whether flex items wrap to multiple lines.',
2974
+ category: 'container',
2975
+ specialCategory: null,
2976
+ sort: 4.5,
2977
+ },
2913
2978
  alignItems: {
2914
2979
  label: 'Align Items',
2915
2980
  description: 'Controls cross-axis alignment.',
@@ -3155,6 +3220,8 @@ export const patterns = [
3155
3220
  alignSelf: 'flex-start',
3156
3221
  flexGrow: 0,
3157
3222
  flexShrink: 0,
3223
+ width: '100%',
3224
+ height: '100%',
3158
3225
  },
3159
3226
  },
3160
3227
  allowUnknownAttributes: false,
@@ -3178,6 +3245,7 @@ export const patterns = [
3178
3245
  fontWeight: 'fontWeight',
3179
3246
  textAlign: ['left', 'center', 'right', 'justify'],
3180
3247
  flexDirection: ['row', 'column'],
3248
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
3181
3249
  alignItems: [
3182
3250
  'flex-start',
3183
3251
  'center',
@@ -3307,6 +3375,13 @@ export const patterns = [
3307
3375
  specialCategory: null,
3308
3376
  sort: 4,
3309
3377
  },
3378
+ flexWrap: {
3379
+ label: 'Flex Wrap',
3380
+ description: 'Controls whether flex items wrap to multiple lines.',
3381
+ category: 'container',
3382
+ specialCategory: null,
3383
+ sort: 4.5,
3384
+ },
3310
3385
  alignItems: {
3311
3386
  label: 'Align Items',
3312
3387
  description: 'Controls cross-axis alignment.',
@@ -3616,6 +3691,7 @@ export const patterns = [
3616
3691
  fontWeight: 'fontWeight',
3617
3692
  textAlign: ['left', 'center', 'right', 'justify'],
3618
3693
  flexDirection: ['row', 'column'],
3694
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
3619
3695
  alignItems: [
3620
3696
  'flex-start',
3621
3697
  'center',
@@ -3739,6 +3815,13 @@ export const patterns = [
3739
3815
  specialCategory: null,
3740
3816
  sort: 4,
3741
3817
  },
3818
+ flexWrap: {
3819
+ label: 'Flex Wrap',
3820
+ description: 'Controls whether flex items wrap to multiple lines.',
3821
+ category: 'container',
3822
+ specialCategory: null,
3823
+ sort: 4.5,
3824
+ },
3742
3825
  alignItems: {
3743
3826
  label: 'Align Items',
3744
3827
  description: 'Controls cross-axis alignment.',
@@ -4047,6 +4130,7 @@ export const patterns = [
4047
4130
  scrollable: 'boolean',
4048
4131
  style: {
4049
4132
  flexDirection: ['row', 'column'],
4133
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
4050
4134
  alignItems: [
4051
4135
  'flex-start',
4052
4136
  'center',
@@ -4163,6 +4247,13 @@ export const patterns = [
4163
4247
  specialCategory: null,
4164
4248
  sort: 4,
4165
4249
  },
4250
+ flexWrap: {
4251
+ label: 'Flex Wrap',
4252
+ description: 'Controls whether flex items wrap to multiple lines.',
4253
+ category: 'container',
4254
+ specialCategory: null,
4255
+ sort: 4.5,
4256
+ },
4166
4257
  alignItems: {
4167
4258
  label: 'Align Items',
4168
4259
  description: 'Controls cross-axis alignment.',
@@ -4433,6 +4524,7 @@ export const patterns = [
4433
4524
  scrollable: 'boolean',
4434
4525
  style: {
4435
4526
  flexDirection: ['row', 'column'],
4527
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
4436
4528
  alignItems: [
4437
4529
  'flex-start',
4438
4530
  'center',
@@ -4546,6 +4638,13 @@ export const patterns = [
4546
4638
  specialCategory: null,
4547
4639
  sort: 4,
4548
4640
  },
4641
+ flexWrap: {
4642
+ label: 'Flex Wrap',
4643
+ description: 'Controls whether flex items wrap to multiple lines.',
4644
+ category: 'container',
4645
+ specialCategory: null,
4646
+ sort: 4.5,
4647
+ },
4549
4648
  alignItems: {
4550
4649
  label: 'Align Items',
4551
4650
  description: 'Controls cross-axis alignment.',
@@ -4818,6 +4917,7 @@ export const patterns = [
4818
4917
  scrollable: 'boolean',
4819
4918
  style: {
4820
4919
  flexDirection: ['row', 'column'],
4920
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
4821
4921
  alignItems: [
4822
4922
  'flex-start',
4823
4923
  'center',
@@ -4930,6 +5030,13 @@ export const patterns = [
4930
5030
  specialCategory: null,
4931
5031
  sort: 4,
4932
5032
  },
5033
+ flexWrap: {
5034
+ label: 'Flex Wrap',
5035
+ description: 'Controls whether flex items wrap to multiple lines.',
5036
+ category: 'container',
5037
+ specialCategory: null,
5038
+ sort: 4.5,
5039
+ },
4933
5040
  alignItems: {
4934
5041
  label: 'Align Items',
4935
5042
  description: 'Controls cross-axis alignment.',
@@ -5189,6 +5296,7 @@ export const patterns = [
5189
5296
  scrollable: 'boolean',
5190
5297
  style: {
5191
5298
  flexDirection: ['row', 'column'],
5299
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
5192
5300
  alignItems: [
5193
5301
  'flex-start',
5194
5302
  'center',
@@ -5251,6 +5359,7 @@ export const patterns = [
5251
5359
  flex: 'number',
5252
5360
  events: 'EventObject[]',
5253
5361
  },
5362
+ defaults: { style: { height: '40@vs', borderRadius: '12@s' } },
5254
5363
  },
5255
5364
  meta: {
5256
5365
  desiredParent: ['=OnboardButtons'],
@@ -5342,6 +5451,13 @@ export const patterns = [
5342
5451
  specialCategory: null,
5343
5452
  sort: 4,
5344
5453
  },
5454
+ flexWrap: {
5455
+ label: 'Flex Wrap',
5456
+ description: 'Controls whether flex items wrap to multiple lines.',
5457
+ category: 'container',
5458
+ specialCategory: null,
5459
+ sort: 4.5,
5460
+ },
5345
5461
  alignItems: {
5346
5462
  label: 'Align Items',
5347
5463
  description: 'Controls cross-axis alignment.',
@@ -5601,6 +5717,8 @@ export const patterns = [
5601
5717
  alignSelf: 'flex-start',
5602
5718
  flexGrow: 0,
5603
5719
  flexShrink: 0,
5720
+ height: '40@vs',
5721
+ borderRadius: '12@s',
5604
5722
  },
5605
5723
  },
5606
5724
  types: {
@@ -5621,6 +5739,7 @@ export const patterns = [
5621
5739
  scrollable: 'boolean',
5622
5740
  style: {
5623
5741
  flexDirection: ['row', 'column'],
5742
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
5624
5743
  alignItems: [
5625
5744
  'flex-start',
5626
5745
  'center',
@@ -5677,6 +5796,17 @@ export const patterns = [
5677
5796
  condition: ['carousel-index'],
5678
5797
  conditionVariable: 'number',
5679
5798
  },
5799
+ defaults: {
5800
+ style: {
5801
+ display: 'flex',
5802
+ flexDirection: 'row',
5803
+ gap: 12,
5804
+ alignItems: 'center',
5805
+ justifyContent: 'center',
5806
+ marginVertical: '12@vs',
5807
+ marginHorizontal: '24@s',
5808
+ },
5809
+ },
5680
5810
  },
5681
5811
  meta: {
5682
5812
  desiredParent: ['=OnboardItem'],
@@ -5747,6 +5877,13 @@ export const patterns = [
5747
5877
  specialCategory: null,
5748
5878
  sort: 4,
5749
5879
  },
5880
+ flexWrap: {
5881
+ label: 'Flex Wrap',
5882
+ description: 'Controls whether flex items wrap to multiple lines.',
5883
+ category: 'container',
5884
+ specialCategory: null,
5885
+ sort: 4.5,
5886
+ },
5750
5887
  alignItems: {
5751
5888
  label: 'Align Items',
5752
5889
  description: 'Controls cross-axis alignment.',
@@ -6028,12 +6165,18 @@ export const patterns = [
6028
6165
  },
6029
6166
  defaults: {
6030
6167
  style: {
6031
- flexDirection: 'column',
6168
+ flexDirection: 'row',
6032
6169
  position: 'relative',
6033
6170
  zIndex: 1,
6034
6171
  alignSelf: 'flex-start',
6035
6172
  flexGrow: 0,
6036
6173
  flexShrink: 0,
6174
+ display: 'flex',
6175
+ gap: 12,
6176
+ alignItems: 'center',
6177
+ justifyContent: 'center',
6178
+ marginVertical: '12@vs',
6179
+ marginHorizontal: '24@s',
6037
6180
  },
6038
6181
  },
6039
6182
  types: {},
@@ -6047,6 +6190,7 @@ export const patterns = [
6047
6190
  scrollable: 'boolean',
6048
6191
  style: {
6049
6192
  flexDirection: ['row', 'column'],
6193
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
6050
6194
  alignItems: [
6051
6195
  'flex-start',
6052
6196
  'center',
@@ -6209,6 +6353,13 @@ export const patterns = [
6209
6353
  specialCategory: null,
6210
6354
  sort: 4,
6211
6355
  },
6356
+ flexWrap: {
6357
+ label: 'Flex Wrap',
6358
+ description: 'Controls whether flex items wrap to multiple lines.',
6359
+ category: 'container',
6360
+ specialCategory: null,
6361
+ sort: 4.5,
6362
+ },
6212
6363
  alignItems: {
6213
6364
  label: 'Align Items',
6214
6365
  description: 'Controls cross-axis alignment.',
@@ -6482,6 +6633,7 @@ export const patterns = [
6482
6633
  fontWeight: 'fontWeight',
6483
6634
  textAlign: ['left', 'center', 'right', 'justify'],
6484
6635
  flexDirection: ['row', 'column'],
6636
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
6485
6637
  alignItems: [
6486
6638
  'flex-start',
6487
6639
  'center',
@@ -6611,6 +6763,13 @@ export const patterns = [
6611
6763
  specialCategory: null,
6612
6764
  sort: 4,
6613
6765
  },
6766
+ flexWrap: {
6767
+ label: 'Flex Wrap',
6768
+ description: 'Controls whether flex items wrap to multiple lines.',
6769
+ category: 'container',
6770
+ specialCategory: null,
6771
+ sort: 4.5,
6772
+ },
6614
6773
  alignItems: {
6615
6774
  label: 'Align Items',
6616
6775
  description: 'Controls cross-axis alignment.',
@@ -6942,12 +7101,16 @@ export const patterns = [
6942
7101
  },
6943
7102
  defaults: {
6944
7103
  style: {
6945
- flexDirection: 'column',
7104
+ flexDirection: 'row',
6946
7105
  position: 'relative',
6947
7106
  zIndex: 1,
6948
7107
  alignSelf: 'flex-start',
6949
7108
  flexGrow: 0,
6950
7109
  flexShrink: 0,
7110
+ flexWrap: 'wrap',
7111
+ alignItems: 'center',
7112
+ justifyContent: 'center',
7113
+ textAlign: 'center',
6951
7114
  paddingHorizontal: '24@s',
6952
7115
  },
6953
7116
  },
@@ -6968,6 +7131,7 @@ export const patterns = [
6968
7131
  scrollable: 'boolean',
6969
7132
  style: {
6970
7133
  flexDirection: ['row', 'column'],
7134
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
6971
7135
  alignItems: [
6972
7136
  'flex-start',
6973
7137
  'center',
@@ -7084,6 +7248,13 @@ export const patterns = [
7084
7248
  specialCategory: null,
7085
7249
  sort: 4,
7086
7250
  },
7251
+ flexWrap: {
7252
+ label: 'Flex Wrap',
7253
+ description: 'Controls whether flex items wrap to multiple lines.',
7254
+ category: 'container',
7255
+ specialCategory: null,
7256
+ sort: 4.5,
7257
+ },
7087
7258
  alignItems: {
7088
7259
  label: 'Align Items',
7089
7260
  description: 'Controls cross-axis alignment.',
@@ -7366,6 +7537,7 @@ export const patterns = [
7366
7537
  scrollable: 'boolean',
7367
7538
  style: {
7368
7539
  flexDirection: ['row', 'column'],
7540
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
7369
7541
  alignItems: [
7370
7542
  'flex-start',
7371
7543
  'center',
@@ -7482,6 +7654,13 @@ export const patterns = [
7482
7654
  specialCategory: null,
7483
7655
  sort: 3,
7484
7656
  },
7657
+ flexWrap: {
7658
+ label: 'Flex Wrap',
7659
+ description: 'Controls whether flex items wrap to multiple lines.',
7660
+ category: 'container',
7661
+ specialCategory: null,
7662
+ sort: 4.5,
7663
+ },
7485
7664
  alignItems: {
7486
7665
  label: 'Align Items',
7487
7666
  description: 'Controls cross-axis alignment.',
@@ -7748,6 +7927,7 @@ export const patterns = [
7748
7927
  scrollable: 'boolean',
7749
7928
  style: {
7750
7929
  flexDirection: ['row', 'column'],
7930
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
7751
7931
  alignItems: [
7752
7932
  'flex-start',
7753
7933
  'center',
@@ -7862,6 +8042,13 @@ export const patterns = [
7862
8042
  specialCategory: null,
7863
8043
  sort: 4,
7864
8044
  },
8045
+ flexWrap: {
8046
+ label: 'Flex Wrap',
8047
+ description: 'Controls whether flex items wrap to multiple lines.',
8048
+ category: 'container',
8049
+ specialCategory: null,
8050
+ sort: 4.5,
8051
+ },
7865
8052
  alignItems: {
7866
8053
  label: 'Align Items',
7867
8054
  description: 'Controls cross-axis alignment.',
@@ -8134,6 +8321,7 @@ export const patterns = [
8134
8321
  fontWeight: 'fontWeight',
8135
8322
  textAlign: ['left', 'center', 'right', 'justify'],
8136
8323
  flexDirection: ['row', 'column'],
8324
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
8137
8325
  alignItems: [
8138
8326
  'flex-start',
8139
8327
  'center',
@@ -8256,6 +8444,13 @@ export const patterns = [
8256
8444
  specialCategory: null,
8257
8445
  sort: 4,
8258
8446
  },
8447
+ flexWrap: {
8448
+ label: 'Flex Wrap',
8449
+ description: 'Controls whether flex items wrap to multiple lines.',
8450
+ category: 'container',
8451
+ specialCategory: null,
8452
+ sort: 4.5,
8453
+ },
8259
8454
  alignItems: {
8260
8455
  label: 'Align Items',
8261
8456
  description: 'Controls cross-axis alignment.',
@@ -8567,6 +8762,7 @@ export const patterns = [
8567
8762
  fontWeight: 'fontWeight',
8568
8763
  textAlign: ['left', 'center', 'right', 'justify'],
8569
8764
  flexDirection: ['row', 'column'],
8765
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
8570
8766
  alignItems: [
8571
8767
  'flex-start',
8572
8768
  'center',
@@ -8689,6 +8885,13 @@ export const patterns = [
8689
8885
  specialCategory: null,
8690
8886
  sort: 4,
8691
8887
  },
8888
+ flexWrap: {
8889
+ label: 'Flex Wrap',
8890
+ description: 'Controls whether flex items wrap to multiple lines.',
8891
+ category: 'container',
8892
+ specialCategory: null,
8893
+ sort: 4.5,
8894
+ },
8692
8895
  alignItems: {
8693
8896
  label: 'Align Items',
8694
8897
  description: 'Controls cross-axis alignment.',
@@ -8997,6 +9200,7 @@ export const patterns = [
8997
9200
  scrollable: 'boolean',
8998
9201
  style: {
8999
9202
  flexDirection: ['row', 'column'],
9203
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
9000
9204
  alignItems: [
9001
9205
  'flex-start',
9002
9206
  'center',
@@ -9133,6 +9337,13 @@ export const patterns = [
9133
9337
  specialCategory: null,
9134
9338
  sort: 4,
9135
9339
  },
9340
+ flexWrap: {
9341
+ label: 'Flex Wrap',
9342
+ description: 'Controls whether flex items wrap to multiple lines.',
9343
+ category: 'container',
9344
+ specialCategory: null,
9345
+ sort: 4.5,
9346
+ },
9136
9347
  alignItems: {
9137
9348
  label: 'Align Items',
9138
9349
  description: 'Controls cross-axis alignment.',
@@ -9409,6 +9620,7 @@ export const patterns = [
9409
9620
  fontWeight: 'fontWeight',
9410
9621
  textAlign: ['left', 'center', 'right', 'justify'],
9411
9622
  flexDirection: ['row', 'column'],
9623
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
9412
9624
  alignItems: [
9413
9625
  'flex-start',
9414
9626
  'center',
@@ -9569,6 +9781,13 @@ export const patterns = [
9569
9781
  specialCategory: null,
9570
9782
  sort: 4,
9571
9783
  },
9784
+ flexWrap: {
9785
+ label: 'Flex Wrap',
9786
+ description: 'Controls whether flex items wrap to multiple lines.',
9787
+ category: 'container',
9788
+ specialCategory: null,
9789
+ sort: 4.5,
9790
+ },
9572
9791
  alignItems: {
9573
9792
  label: 'Align Items',
9574
9793
  description: 'Controls cross-axis alignment.',
@@ -9870,6 +10089,7 @@ export const patterns = [
9870
10089
  fontWeight: 'fontWeight',
9871
10090
  textAlign: ['left', 'center', 'right', 'justify'],
9872
10091
  flexDirection: ['row', 'column'],
10092
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
9873
10093
  alignItems: [
9874
10094
  'flex-start',
9875
10095
  'center',
@@ -10000,6 +10220,13 @@ export const patterns = [
10000
10220
  specialCategory: null,
10001
10221
  sort: 4,
10002
10222
  },
10223
+ flexWrap: {
10224
+ label: 'Flex Wrap',
10225
+ description: 'Controls whether flex items wrap to multiple lines.',
10226
+ category: 'container',
10227
+ specialCategory: null,
10228
+ sort: 4.5,
10229
+ },
10003
10230
  alignItems: {
10004
10231
  label: 'Align Items',
10005
10232
  description: 'Controls cross-axis alignment.',
@@ -10301,6 +10528,7 @@ export const patterns = [
10301
10528
  scrollable: 'boolean',
10302
10529
  style: {
10303
10530
  flexDirection: ['row', 'column'],
10531
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
10304
10532
  alignItems: [
10305
10533
  'flex-start',
10306
10534
  'center',
@@ -10413,6 +10641,13 @@ export const patterns = [
10413
10641
  specialCategory: null,
10414
10642
  sort: 4,
10415
10643
  },
10644
+ flexWrap: {
10645
+ label: 'Flex Wrap',
10646
+ description: 'Controls whether flex items wrap to multiple lines.',
10647
+ category: 'container',
10648
+ specialCategory: null,
10649
+ sort: 4.5,
10650
+ },
10416
10651
  alignItems: {
10417
10652
  label: 'Align Items',
10418
10653
  description: 'Controls cross-axis alignment.',
@@ -10674,6 +10909,7 @@ export const patterns = [
10674
10909
  scrollable: 'boolean',
10675
10910
  style: {
10676
10911
  flexDirection: ['row', 'column'],
10912
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
10677
10913
  alignItems: [
10678
10914
  'flex-start',
10679
10915
  'center',
@@ -10787,6 +11023,13 @@ export const patterns = [
10787
11023
  specialCategory: null,
10788
11024
  sort: 4,
10789
11025
  },
11026
+ flexWrap: {
11027
+ label: 'Flex Wrap',
11028
+ description: 'Controls whether flex items wrap to multiple lines.',
11029
+ category: 'container',
11030
+ specialCategory: null,
11031
+ sort: 4.5,
11032
+ },
10790
11033
  alignItems: {
10791
11034
  label: 'Align Items',
10792
11035
  description: 'Controls cross-axis alignment.',
@@ -11072,6 +11315,7 @@ export const patterns = [
11072
11315
  '900',
11073
11316
  ],
11074
11317
  flexDirection: ['row', 'column'],
11318
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
11075
11319
  alignItems: [
11076
11320
  'flex-start',
11077
11321
  'center',
@@ -11204,6 +11448,13 @@ export const patterns = [
11204
11448
  specialCategory: null,
11205
11449
  sort: 4,
11206
11450
  },
11451
+ flexWrap: {
11452
+ label: 'Flex Wrap',
11453
+ description: 'Controls whether flex items wrap to multiple lines.',
11454
+ category: 'container',
11455
+ specialCategory: null,
11456
+ sort: 4.5,
11457
+ },
11207
11458
  alignItems: {
11208
11459
  label: 'Align Items',
11209
11460
  description: 'Controls cross-axis alignment.',
@@ -11472,6 +11723,7 @@ export const patterns = [
11472
11723
  scrollable: 'boolean',
11473
11724
  style: {
11474
11725
  flexDirection: ['row', 'column'],
11726
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
11475
11727
  alignItems: [
11476
11728
  'flex-start',
11477
11729
  'center',
@@ -11601,6 +11853,13 @@ export const patterns = [
11601
11853
  specialCategory: null,
11602
11854
  sort: 4,
11603
11855
  },
11856
+ flexWrap: {
11857
+ label: 'Flex Wrap',
11858
+ description: 'Controls whether flex items wrap to multiple lines.',
11859
+ category: 'container',
11860
+ specialCategory: null,
11861
+ sort: 4.5,
11862
+ },
11604
11863
  alignItems: {
11605
11864
  label: 'Align Items',
11606
11865
  description: 'Controls cross-axis alignment.',
@@ -11866,6 +12125,7 @@ export const patterns = [
11866
12125
  scrollable: 'boolean',
11867
12126
  style: {
11868
12127
  flexDirection: ['row', 'column'],
12128
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
11869
12129
  alignItems: [
11870
12130
  'flex-start',
11871
12131
  'center',
@@ -11985,6 +12245,13 @@ export const patterns = [
11985
12245
  specialCategory: null,
11986
12246
  sort: 4,
11987
12247
  },
12248
+ flexWrap: {
12249
+ label: 'Flex Wrap',
12250
+ description: 'Controls whether flex items wrap to multiple lines.',
12251
+ category: 'container',
12252
+ specialCategory: null,
12253
+ sort: 4.5,
12254
+ },
11988
12255
  alignItems: {
11989
12256
  label: 'Align Items',
11990
12257
  description: 'Controls cross-axis alignment.',
@@ -12297,6 +12564,7 @@ export const patterns = [
12297
12564
  scrollable: 'boolean',
12298
12565
  style: {
12299
12566
  flexDirection: ['row', 'column'],
12567
+ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
12300
12568
  alignItems: [
12301
12569
  'flex-start',
12302
12570
  'center',
@@ -12407,6 +12675,13 @@ export const patterns = [
12407
12675
  specialCategory: null,
12408
12676
  sort: 4,
12409
12677
  },
12678
+ flexWrap: {
12679
+ label: 'Flex Wrap',
12680
+ description: 'Controls whether flex items wrap to multiple lines.',
12681
+ category: 'container',
12682
+ specialCategory: null,
12683
+ sort: 4.5,
12684
+ },
12410
12685
  alignItems: {
12411
12686
  label: 'Align Items',
12412
12687
  description: 'Controls cross-axis alignment.',