@levo-so/blocks 0.1.84 → 0.1.86

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.
@@ -174,6 +174,204 @@ const DEFAULT_CONTENT = {
174
174
 
175
175
  export type INavbar2Content = typeof DEFAULT_CONTENT;
176
176
 
177
+ const DESKTOP_NAV_MENU_BASE_STYLE_GROUP = {
178
+ "desktop-nav-menu_levoGroup": {
179
+ display: "flex",
180
+ "align-items": "center",
181
+ "column-gap": "lg",
182
+ tablet: {
183
+ display: "none",
184
+ },
185
+ },
186
+ "desktop-nav-menu_levoGroupItem": {
187
+ "nav-item-title": {
188
+ "font-size": "base",
189
+ "font-weight": 400,
190
+ "white-space": "nowrap",
191
+ color: "text-1",
192
+ },
193
+ "nav-item-dropdown-trigger": {
194
+ display: "flex",
195
+ "column-gap": "2xs",
196
+ "align-items": "center",
197
+ cursor: "pointer",
198
+ },
199
+ "nav-item-dropdown-trigger-title": {
200
+ width: "fit-content",
201
+ "font-size": "base",
202
+ "line-height": 1.5,
203
+ "font-weight": 400,
204
+ "white-space": "nowrap",
205
+ color: "text-1",
206
+ },
207
+ "sub-items_levoGroup": {
208
+ display: "flex",
209
+ "padding-right": "4xs",
210
+ "padding-left": "4xs",
211
+ "padding-top": "4xs",
212
+ "padding-bottom": "4xs",
213
+ "flex-direction": "column",
214
+ "border-radius": "base",
215
+ width: "fit-content",
216
+ "background-color": "#ffffff",
217
+ "box-shadow": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
218
+ },
219
+ "sub-items_levoGroupItem": {
220
+ "sub-item-link": {
221
+ display: "flex",
222
+ "padding-top": "sm",
223
+ "padding-bottom": "sm",
224
+ "padding-left": "sm",
225
+ "padding-right": "sm",
226
+ "column-gap": "sm",
227
+ "align-items": "center",
228
+ "border-radius": "base",
229
+ width: "100%",
230
+ _hover: {
231
+ "background-color": "rgba(241 245 249 / 0.5)",
232
+ },
233
+ },
234
+ "sub-item-icon-container": {
235
+ "aspect-ratio": "1",
236
+ display: "flex",
237
+ "justify-content": "center",
238
+ "align-items": "center",
239
+ "border-radius": "base",
240
+ height: "42px",
241
+ width: "42px",
242
+ "background-color": "rgb(241 245 249 / 1)",
243
+ },
244
+ "sub-item-icon": {
245
+ "object-fit": "contain",
246
+ width: "24px",
247
+ height: "24px",
248
+ },
249
+ "sub-item-text-container": {
250
+ display: "flex",
251
+ "flex-direction": "column",
252
+ flex: "1 1 0%",
253
+ "row-gap": "5xs",
254
+ },
255
+ "sub-item-title": {
256
+ "font-size": "sm",
257
+ "font-weight": 600,
258
+ color: "text-1",
259
+ },
260
+ "sub-item-description": {
261
+ "font-size": "xs",
262
+ "font-weight": 400,
263
+ color: "text-2",
264
+ },
265
+ },
266
+ },
267
+ };
268
+
269
+ const DESKTOP_NAV_MENUS_STYLE_GROUPS = {
270
+ "left-desktop-nav-menu_levoGroup":
271
+ DESKTOP_NAV_MENU_BASE_STYLE_GROUP?.["desktop-nav-menu_levoGroup"],
272
+ "left-desktop-nav-menu_levoGroupItem":
273
+ DESKTOP_NAV_MENU_BASE_STYLE_GROUP?.["desktop-nav-menu_levoGroupItem"],
274
+ "right-desktop-nav-menu_levoGroup":
275
+ DESKTOP_NAV_MENU_BASE_STYLE_GROUP?.["desktop-nav-menu_levoGroup"],
276
+ "right-desktop-nav-menu_levoGroupItem":
277
+ DESKTOP_NAV_MENU_BASE_STYLE_GROUP?.["desktop-nav-menu_levoGroupItem"],
278
+ };
279
+
280
+ const MOBILE_NAV_MENU_STYLE_GROUPS = {
281
+ "mobile-nav-menu_levoGroup": {
282
+ display: "flex",
283
+ "flex-direction": "column",
284
+ "row-gap": "2xs",
285
+ },
286
+ "mobile-nav-menu_levoGroupItem": {
287
+ "nav-item-title-container": { width: "100%" },
288
+ "nav-item-title": {
289
+ "padding-top": "2xs",
290
+ "padding-bottom": "2xs",
291
+ "column-gap": "2xs",
292
+ "justify-content": "flex-start",
293
+ width: "100%",
294
+
295
+ color: "text-1",
296
+ },
297
+ "nav-item-dropdown-container": {
298
+ display: "flex",
299
+ "flex-direction": "column",
300
+ width: "100%",
301
+ },
302
+ "nav-item-dropdown-trigger": {
303
+ display: "flex",
304
+ "padding-top": "2xs",
305
+ "padding-bottom": "2xs",
306
+ "column-gap": "2xs",
307
+ "justify-content": "space-between",
308
+ "align-items": "center",
309
+ width: "100%",
310
+ "font-size": "lg",
311
+ "line-height": 1.625,
312
+ "font-weight": 600,
313
+ // color: "#ffffff",
314
+ cursor: "pointer",
315
+ },
316
+ "nav-item-dropdown-trigger-title": {
317
+ "font-size": "lg",
318
+ "line-height": "28px",
319
+ "font-weight": 600,
320
+ color: "var(--color-text-1)",
321
+ },
322
+ "sub-items_levoGroup": {
323
+ display: "flex",
324
+ "flex-direction": "column",
325
+ "row-gap": "4xs",
326
+ width: "100%",
327
+ },
328
+ "sub-items_levoGroupItem": {
329
+ "sub-item-link": {
330
+ display: "flex",
331
+ "padding-top": "2xs",
332
+ "padding-bottom": "2xs",
333
+ "padding-left": "2xs",
334
+ "padding-right": "2xs",
335
+ "column-gap": "sm",
336
+ "align-items": "center",
337
+ "border-radius": "sm",
338
+ width: "100%",
339
+ _hover: { "--bg-opacity": "0.5" },
340
+ },
341
+ "sub-item-icon-container": {
342
+ "aspect-ratio": "1 / 1",
343
+ display: "flex",
344
+ "justify-content": "center",
345
+ "align-items": "center",
346
+ "border-radius": "base",
347
+ "--bg-opacity": "0.6",
348
+ },
349
+ "sub-item-icon": {
350
+ "object-fit": "contain",
351
+ width: "24px",
352
+ height: "24px",
353
+ },
354
+ "sub-item-text-container": {
355
+ display: "flex",
356
+ "flex-direction": "column",
357
+ flex: "1 1 0%",
358
+ "row-gap": "4xs",
359
+ },
360
+ "sub-item-title-container": {},
361
+ "sub-item-title": {
362
+ "font-size": "sm",
363
+ "font-weight": 600,
364
+ color: "text-1",
365
+ },
366
+ "sub-item-description": {
367
+ "font-size": "xs",
368
+ "font-weight": 400,
369
+ color: "text-2",
370
+ },
371
+ },
372
+ },
373
+ };
374
+
177
375
  export const Navbar2: IBlock = {
178
376
  category_id: "navbar",
179
377
  title: "Navbar 2",
@@ -456,6 +654,8 @@ export const Navbar2: IBlock = {
456
654
  key: "default",
457
655
  title: "Default",
458
656
  styles: {
657
+ ...DESKTOP_NAV_MENUS_STYLE_GROUPS,
658
+ ...MOBILE_NAV_MENU_STYLE_GROUPS,
459
659
  layout: {
460
660
  position: "fixed",
461
661
  top: "2rem",
@@ -491,194 +691,6 @@ export const Navbar2: IBlock = {
491
691
  display: "flex",
492
692
  "column-gap": "xl",
493
693
  },
494
- "left-desktop-nav-menu_levoGroup": {
495
- display: "flex",
496
- "align-items": "center",
497
- "column-gap": "lg",
498
- tablet: {
499
- display: "none",
500
- },
501
- },
502
- "right-desktop-nav-menu_levoGroup": {
503
- display: "flex",
504
- "align-items": "center",
505
- "column-gap": "lg",
506
- tablet: {
507
- display: "none",
508
- },
509
- },
510
- "left-desktop-nav-menu": Array(3)
511
- ?.fill(0)
512
- ?.map(() => ({
513
- "nav-item-title": {
514
- "font-size": "base",
515
- "font-weight": 400,
516
- "white-space": "nowrap",
517
- color: "text-1",
518
- },
519
- "nav-item-dropdown-trigger": {
520
- display: "flex",
521
- "column-gap": "2xs",
522
- "align-items": "center",
523
- cursor: "pointer",
524
- },
525
- "nav-item-dropdown-trigger-title": {
526
- width: "fit-content",
527
- "font-size": "base",
528
- "line-height": 1.5,
529
- "font-weight": 400,
530
- "white-space": "nowrap",
531
- color: "text-1",
532
- },
533
- "sub-items_levoGroup": {
534
- display: "flex",
535
- "padding-right": "4xs",
536
- "padding-left": "4xs",
537
- "padding-top": "4xs",
538
- "padding-bottom": "4xs",
539
- "flex-direction": "column",
540
- "border-radius": "base",
541
- width: "fit-content",
542
- "background-color": "#ffffff",
543
- "box-shadow":
544
- "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
545
- },
546
- "sub-items": Array(3)
547
- ?.fill(0)
548
- ?.map(() => ({
549
- "sub-item-link": {
550
- display: "flex",
551
- "padding-top": "sm",
552
- "padding-bottom": "sm",
553
- "padding-left": "sm",
554
- "padding-right": "sm",
555
- "column-gap": "sm",
556
- "align-items": "center",
557
- "border-radius": "base",
558
- width: "100%",
559
- _hover: {
560
- "background-color": "rgba(241 245 249 / 0.5)",
561
- },
562
- },
563
- "sub-item-icon-container": {
564
- "aspect-ratio": "1",
565
- display: "flex",
566
- "justify-content": "center",
567
- "align-items": "center",
568
- "border-radius": "base",
569
- height: "42px",
570
- width: "42px",
571
- "background-color": "rgb(241 245 249 / 1)",
572
- },
573
- "sub-item-icon": {
574
- "object-fit": "contain",
575
- width: "24px",
576
- height: "24px",
577
- },
578
- "sub-item-text-container": {
579
- display: "flex",
580
- "flex-direction": "column",
581
- flex: "1 1 0%",
582
- "row-gap": "5xs",
583
- },
584
- "sub-item-title": {
585
- "font-size": "sm",
586
- "font-weight": 600,
587
- color: "text-1",
588
- },
589
- "sub-item-description": {
590
- "font-size": "xs",
591
- "font-weight": 400,
592
- color: "text-2",
593
- },
594
- })),
595
- })),
596
- "right-desktop-nav-menu": Array(3)
597
- ?.fill(0)
598
- ?.map(() => ({
599
- "nav-item-title": {
600
- "font-size": "base",
601
- "font-weight": 400,
602
- "white-space": "nowrap",
603
- color: "text-1",
604
- },
605
- "nav-item-dropdown-trigger": {
606
- display: "flex",
607
- "column-gap": "2xs",
608
- "align-items": "center",
609
- cursor: "pointer",
610
- },
611
- "nav-item-dropdown-trigger-title": {
612
- width: "fit-content",
613
- "font-size": "base",
614
- "line-height": 1.5,
615
- "font-weight": 400,
616
- "white-space": "nowrap",
617
- color: "text-1",
618
- },
619
- "sub-items_levoGroup": {
620
- display: "flex",
621
- "padding-right": "4xs",
622
- "padding-left": "4xs",
623
- "padding-top": "4xs",
624
- "padding-bottom": "4xs",
625
- "flex-direction": "column",
626
- "border-radius": "base",
627
- width: "fit-content",
628
- "background-color": "#ffffff",
629
- "box-shadow":
630
- "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
631
- },
632
- "sub-items": Array(3)
633
- ?.fill(0)
634
- ?.map(() => ({
635
- "sub-item-link": {
636
- display: "flex",
637
- "padding-top": "sm",
638
- "padding-bottom": "sm",
639
- "padding-left": "sm",
640
- "padding-right": "sm",
641
- "column-gap": "sm",
642
- "align-items": "center",
643
- "border-radius": "base",
644
- width: "100%",
645
- _hover: {
646
- "background-color": "rgba(241 245 249 / 0.5)",
647
- },
648
- },
649
- "sub-item-icon-container": {
650
- "aspect-ratio": "1",
651
- display: "flex",
652
- "justify-content": "center",
653
- "align-items": "center",
654
- "border-radius": "base",
655
- height: "42px",
656
- width: "42px",
657
- "background-color": "rgb(241 245 249 / 1)",
658
- },
659
- "sub-item-icon": {
660
- "object-fit": "contain",
661
- width: "24px",
662
- height: "24px",
663
- },
664
- "sub-item-text-container": {
665
- display: "flex",
666
- "flex-direction": "column",
667
- flex: "1 1 0%",
668
- "row-gap": "5xs",
669
- },
670
- "sub-item-title": {
671
- "font-size": "sm",
672
- "font-weight": 600,
673
- color: "text-1",
674
- },
675
- "sub-item-description": {
676
- "font-size": "xs",
677
- "font-weight": 400,
678
- color: "text-2",
679
- },
680
- })),
681
- })),
682
694
  "desktop-cta-group_levoGroup": {
683
695
  display: "flex",
684
696
  "column-gap": "sm",
@@ -727,102 +739,6 @@ export const Navbar2: IBlock = {
727
739
  "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
728
740
  transform: "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
729
741
  },
730
- "mobile-nav-menu_levoGroup": {
731
- display: "flex",
732
- "flex-direction": "column",
733
- "row-gap": "2xs",
734
- },
735
- "mobile-nav-menu": Array(3)
736
- ?.fill(0)
737
- ?.map(() => ({
738
- "nav-item-title-container": { width: "100%" },
739
- "nav-item-title": {
740
- "padding-top": "2xs",
741
- "padding-bottom": "2xs",
742
- "column-gap": "2xs",
743
- "justify-content": "flex-start",
744
- width: "100%",
745
-
746
- color: "text-1",
747
- },
748
- "nav-item-dropdown-container": {
749
- display: "flex",
750
- "flex-direction": "column",
751
- width: "100%",
752
- },
753
- "nav-item-dropdown-trigger": {
754
- display: "flex",
755
- "padding-top": "2xs",
756
- "padding-bottom": "2xs",
757
- "column-gap": "2xs",
758
- "justify-content": "space-between",
759
- "align-items": "center",
760
- width: "100%",
761
- "font-size": "lg",
762
- "line-height": 1.625,
763
- "font-weight": 600,
764
- // color: "#ffffff",
765
- cursor: "pointer",
766
- },
767
- "nav-item-dropdown-trigger-title": {
768
- "font-size": "lg",
769
- "line-height": "28px",
770
- "font-weight": 600,
771
- color: "var(--color-text-1)",
772
- },
773
- "sub-items_levoGroup": {
774
- display: "flex",
775
- "flex-direction": "column",
776
- "row-gap": "4xs",
777
- width: "100%",
778
- },
779
- "sub-items": Array(3)
780
- ?.fill(0)
781
- ?.map(() => ({
782
- "sub-item-link": {
783
- display: "flex",
784
- "padding-top": "2xs",
785
- "padding-bottom": "2xs",
786
- "padding-left": "2xs",
787
- "padding-right": "2xs",
788
- "column-gap": "sm",
789
- "align-items": "center",
790
- "border-radius": "sm",
791
- width: "100%",
792
- _hover: { "--bg-opacity": "0.5" },
793
- },
794
- "sub-item-icon-container": {
795
- "aspect-ratio": "1 / 1",
796
- display: "flex",
797
- "justify-content": "center",
798
- "align-items": "center",
799
- "border-radius": "base",
800
- "--bg-opacity": "0.6",
801
- },
802
- "sub-item-icon": {
803
- "object-fit": "contain",
804
- width: "24px",
805
- height: "24px",
806
- },
807
- "sub-item-text-container": {
808
- display: "flex",
809
- "flex-direction": "column",
810
- flex: "1 1 0%",
811
- "row-gap": "4xs",
812
- },
813
- "sub-item-title-container": {},
814
- "sub-item-title": {
815
- "font-size": "sm",
816
- "font-weight": 600,
817
- color: "text-1",
818
- },
819
- "sub-item-description": {
820
- "font-size": "xs",
821
- "font-weight": 400,
822
- color: "text-2",
823
- },
824
- })),
825
- })),
826
742
  "mobile-cta-group_levoGroup": {
827
743
  "margin-top": "2xs",
828
744
  width: "100%",
@@ -866,6 +782,8 @@ export const Navbar2: IBlock = {
866
782
  key: "default-search",
867
783
  title: "Default with search",
868
784
  styles: {
785
+ ...DESKTOP_NAV_MENUS_STYLE_GROUPS,
786
+ ...MOBILE_NAV_MENU_STYLE_GROUPS,
869
787
  layout: {
870
788
  position: "fixed",
871
789
  top: "2rem",
@@ -901,194 +819,6 @@ export const Navbar2: IBlock = {
901
819
  display: "flex",
902
820
  "column-gap": "xl",
903
821
  },
904
- "left-desktop-nav-menu_levoGroup": {
905
- display: "flex",
906
- "align-items": "center",
907
- "column-gap": "lg",
908
- tablet: {
909
- display: "none",
910
- },
911
- },
912
- "right-desktop-nav-menu_levoGroup": {
913
- display: "flex",
914
- "align-items": "center",
915
- "column-gap": "lg",
916
- tablet: {
917
- display: "none",
918
- },
919
- },
920
- "left-desktop-nav-menu": Array(3)
921
- ?.fill(0)
922
- ?.map(() => ({
923
- "nav-item-title": {
924
- "font-size": "base",
925
- "font-weight": 400,
926
- "white-space": "nowrap",
927
- color: "text-1",
928
- },
929
- "nav-item-dropdown-trigger": {
930
- display: "flex",
931
- "column-gap": "2xs",
932
- "align-items": "center",
933
- cursor: "pointer",
934
- },
935
- "nav-item-dropdown-trigger-title": {
936
- width: "fit-content",
937
- "font-size": "base",
938
- "line-height": 1.5,
939
- "font-weight": 400,
940
- "white-space": "nowrap",
941
- color: "text-1",
942
- },
943
- "sub-items_levoGroup": {
944
- display: "flex",
945
- "padding-right": "4xs",
946
- "padding-left": "4xs",
947
- "padding-top": "4xs",
948
- "padding-bottom": "4xs",
949
- "flex-direction": "column",
950
- "border-radius": "base",
951
- width: "fit-content",
952
- "background-color": "#ffffff",
953
- "box-shadow":
954
- "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
955
- },
956
- "sub-items": Array(3)
957
- ?.fill(0)
958
- ?.map(() => ({
959
- "sub-item-link": {
960
- display: "flex",
961
- "padding-top": "sm",
962
- "padding-bottom": "sm",
963
- "padding-left": "sm",
964
- "padding-right": "sm",
965
- "column-gap": "sm",
966
- "align-items": "center",
967
- "border-radius": "base",
968
- width: "100%",
969
- _hover: {
970
- "background-color": "rgba(241 245 249 / 0.5)",
971
- },
972
- },
973
- "sub-item-icon-container": {
974
- "aspect-ratio": "1",
975
- display: "flex",
976
- "justify-content": "center",
977
- "align-items": "center",
978
- "border-radius": "base",
979
- height: "42px",
980
- width: "42px",
981
- "background-color": "rgb(241 245 249 / 1)",
982
- },
983
- "sub-item-icon": {
984
- "object-fit": "contain",
985
- width: "24px",
986
- height: "24px",
987
- },
988
- "sub-item-text-container": {
989
- display: "flex",
990
- "flex-direction": "column",
991
- flex: "1 1 0%",
992
- "row-gap": "5xs",
993
- },
994
- "sub-item-title": {
995
- "font-size": "sm",
996
- "font-weight": 600,
997
- color: "text-1",
998
- },
999
- "sub-item-description": {
1000
- "font-size": "xs",
1001
- "font-weight": 400,
1002
- color: "text-2",
1003
- },
1004
- })),
1005
- })),
1006
- "right-desktop-nav-menu": Array(3)
1007
- ?.fill(0)
1008
- ?.map(() => ({
1009
- "nav-item-title": {
1010
- "font-size": "base",
1011
- "font-weight": 400,
1012
- "white-space": "nowrap",
1013
- color: "text-1",
1014
- },
1015
- "nav-item-dropdown-trigger": {
1016
- display: "flex",
1017
- "column-gap": "2xs",
1018
- "align-items": "center",
1019
- cursor: "pointer",
1020
- },
1021
- "nav-item-dropdown-trigger-title": {
1022
- width: "fit-content",
1023
- "font-size": "base",
1024
- "line-height": 1.5,
1025
- "font-weight": 400,
1026
- "white-space": "nowrap",
1027
- color: "text-1",
1028
- },
1029
- "sub-items_levoGroup": {
1030
- display: "flex",
1031
- "padding-right": "4xs",
1032
- "padding-left": "4xs",
1033
- "padding-top": "4xs",
1034
- "padding-bottom": "4xs",
1035
- "flex-direction": "column",
1036
- "border-radius": "base",
1037
- width: "fit-content",
1038
- "background-color": "#ffffff",
1039
- "box-shadow":
1040
- "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
1041
- },
1042
- "sub-items": Array(3)
1043
- ?.fill(0)
1044
- ?.map(() => ({
1045
- "sub-item-link": {
1046
- display: "flex",
1047
- "padding-top": "sm",
1048
- "padding-bottom": "sm",
1049
- "padding-left": "sm",
1050
- "padding-right": "sm",
1051
- "column-gap": "sm",
1052
- "align-items": "center",
1053
- "border-radius": "base",
1054
- width: "100%",
1055
- _hover: {
1056
- "background-color": "rgba(241 245 249 / 0.5)",
1057
- },
1058
- },
1059
- "sub-item-icon-container": {
1060
- "aspect-ratio": "1",
1061
- display: "flex",
1062
- "justify-content": "center",
1063
- "align-items": "center",
1064
- "border-radius": "base",
1065
- height: "42px",
1066
- width: "42px",
1067
- "background-color": "rgb(241 245 249 / 1)",
1068
- },
1069
- "sub-item-icon": {
1070
- "object-fit": "contain",
1071
- width: "24px",
1072
- height: "24px",
1073
- },
1074
- "sub-item-text-container": {
1075
- display: "flex",
1076
- "flex-direction": "column",
1077
- flex: "1 1 0%",
1078
- "row-gap": "5xs",
1079
- },
1080
- "sub-item-title": {
1081
- "font-size": "sm",
1082
- "font-weight": 600,
1083
- color: "text-1",
1084
- },
1085
- "sub-item-description": {
1086
- "font-size": "xs",
1087
- "font-weight": 400,
1088
- color: "text-2",
1089
- },
1090
- })),
1091
- })),
1092
822
  "desktop-cta-group_levoGroup": {
1093
823
  display: "flex",
1094
824
  "column-gap": "sm",
@@ -1137,102 +867,6 @@ export const Navbar2: IBlock = {
1137
867
  "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
1138
868
  transform: "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
1139
869
  },
1140
- "mobile-nav-menu_levoGroup": {
1141
- display: "flex",
1142
- "flex-direction": "column",
1143
- "row-gap": "2xs",
1144
- },
1145
- "mobile-nav-menu": Array(3)
1146
- ?.fill(0)
1147
- ?.map(() => ({
1148
- "nav-item-title-container": { width: "100%" },
1149
- "nav-item-title": {
1150
- "padding-top": "2xs",
1151
- "padding-bottom": "2xs",
1152
- "column-gap": "2xs",
1153
- "justify-content": "flex-start",
1154
- width: "100%",
1155
-
1156
- color: "text-1",
1157
- },
1158
- "nav-item-dropdown-container": {
1159
- display: "flex",
1160
- "flex-direction": "column",
1161
- width: "100%",
1162
- },
1163
- "nav-item-dropdown-trigger": {
1164
- display: "flex",
1165
- "padding-top": "2xs",
1166
- "padding-bottom": "2xs",
1167
- "column-gap": "2xs",
1168
- "justify-content": "space-between",
1169
- "align-items": "center",
1170
- width: "100%",
1171
- "font-size": "lg",
1172
- "line-height": 1.625,
1173
- "font-weight": 600,
1174
- // color: "#ffffff",
1175
- cursor: "pointer",
1176
- },
1177
- "nav-item-dropdown-trigger-title": {
1178
- "font-size": "lg",
1179
- "line-height": "28px",
1180
- "font-weight": 600,
1181
- color: "var(--color-text-1)",
1182
- },
1183
- "sub-items_levoGroup": {
1184
- display: "flex",
1185
- "flex-direction": "column",
1186
- "row-gap": "4xs",
1187
- width: "100%",
1188
- },
1189
- "sub-items": Array(3)
1190
- ?.fill(0)
1191
- ?.map(() => ({
1192
- "sub-item-link": {
1193
- display: "flex",
1194
- "padding-top": "2xs",
1195
- "padding-bottom": "2xs",
1196
- "padding-left": "2xs",
1197
- "padding-right": "2xs",
1198
- "column-gap": "sm",
1199
- "align-items": "center",
1200
- "border-radius": "sm",
1201
- width: "100%",
1202
- _hover: { "--bg-opacity": "0.5" },
1203
- },
1204
- "sub-item-icon-container": {
1205
- "aspect-ratio": "1 / 1",
1206
- display: "flex",
1207
- "justify-content": "center",
1208
- "align-items": "center",
1209
- "border-radius": "base",
1210
- "--bg-opacity": "0.6",
1211
- },
1212
- "sub-item-icon": {
1213
- "object-fit": "contain",
1214
- width: "24px",
1215
- height: "24px",
1216
- },
1217
- "sub-item-text-container": {
1218
- display: "flex",
1219
- "flex-direction": "column",
1220
- flex: "1 1 0%",
1221
- "row-gap": "4xs",
1222
- },
1223
- "sub-item-title-container": {},
1224
- "sub-item-title": {
1225
- "font-size": "sm",
1226
- "font-weight": 600,
1227
- color: "text-1",
1228
- },
1229
- "sub-item-description": {
1230
- "font-size": "xs",
1231
- "font-weight": 400,
1232
- color: "text-2",
1233
- },
1234
- })),
1235
- })),
1236
870
  "mobile-cta-group_levoGroup": {
1237
871
  "margin-top": "2xs",
1238
872
  width: "100%",
@@ -1270,6 +904,8 @@ export const Navbar2: IBlock = {
1270
904
  key: "full-width",
1271
905
  title: "Full Width",
1272
906
  styles: {
907
+ ...DESKTOP_NAV_MENUS_STYLE_GROUPS,
908
+ ...MOBILE_NAV_MENU_STYLE_GROUPS,
1273
909
  layout: {
1274
910
  position: "fixed",
1275
911
  top: "0",
@@ -1296,194 +932,6 @@ export const Navbar2: IBlock = {
1296
932
  display: "flex",
1297
933
  "column-gap": "xl",
1298
934
  },
1299
- "left-desktop-nav-menu_levoGroup": {
1300
- display: "flex",
1301
- "align-items": "center",
1302
- "column-gap": "lg",
1303
- tablet: {
1304
- display: "none",
1305
- },
1306
- },
1307
- "right-desktop-nav-menu_levoGroup": {
1308
- display: "flex",
1309
- "align-items": "center",
1310
- "column-gap": "lg",
1311
- tablet: {
1312
- display: "none",
1313
- },
1314
- },
1315
- "left-desktop-nav-menu": Array(3)
1316
- ?.fill(0)
1317
- ?.map(() => ({
1318
- "nav-item-title": {
1319
- "font-size": "base",
1320
- "font-weight": 400,
1321
- "white-space": "nowrap",
1322
- color: "text-1",
1323
- },
1324
- "nav-item-dropdown-trigger": {
1325
- display: "flex",
1326
- "column-gap": "2xs",
1327
- "align-items": "center",
1328
- cursor: "pointer",
1329
- },
1330
- "nav-item-dropdown-trigger-title": {
1331
- width: "fit-content",
1332
- "font-size": "base",
1333
- "line-height": 1.5,
1334
- "font-weight": 400,
1335
- "white-space": "nowrap",
1336
- color: "text-1",
1337
- },
1338
- "sub-items_levoGroup": {
1339
- display: "flex",
1340
- "padding-right": "4xs",
1341
- "padding-left": "4xs",
1342
- "padding-top": "4xs",
1343
- "padding-bottom": "4xs",
1344
- "flex-direction": "column",
1345
- "border-radius": "base",
1346
- width: "fit-content",
1347
- "background-color": "#ffffff",
1348
- "box-shadow":
1349
- "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
1350
- },
1351
- "sub-items": Array(3)
1352
- ?.fill(0)
1353
- ?.map(() => ({
1354
- "sub-item-link": {
1355
- display: "flex",
1356
- "padding-top": "sm",
1357
- "padding-bottom": "sm",
1358
- "padding-left": "sm",
1359
- "padding-right": "sm",
1360
- "column-gap": "sm",
1361
- "align-items": "center",
1362
- "border-radius": "base",
1363
- width: "100%",
1364
- _hover: {
1365
- "background-color": "rgba(241 245 249 / 0.5)",
1366
- },
1367
- },
1368
- "sub-item-icon-container": {
1369
- "aspect-ratio": "1",
1370
- display: "flex",
1371
- "justify-content": "center",
1372
- "align-items": "center",
1373
- "border-radius": "base",
1374
- height: "42px",
1375
- width: "42px",
1376
- "background-color": "rgb(241 245 249 / 1)",
1377
- },
1378
- "sub-item-icon": {
1379
- "object-fit": "contain",
1380
- width: "24px",
1381
- height: "24px",
1382
- },
1383
- "sub-item-text-container": {
1384
- display: "flex",
1385
- "flex-direction": "column",
1386
- flex: "1 1 0%",
1387
- "row-gap": "5xs",
1388
- },
1389
- "sub-item-title": {
1390
- "font-size": "sm",
1391
- "font-weight": 600,
1392
- color: "text-1",
1393
- },
1394
- "sub-item-description": {
1395
- "font-size": "xs",
1396
- "font-weight": 400,
1397
- color: "text-2",
1398
- },
1399
- })),
1400
- })),
1401
- "right-desktop-nav-menu": Array(3)
1402
- ?.fill(0)
1403
- ?.map(() => ({
1404
- "nav-item-title": {
1405
- "font-size": "base",
1406
- "font-weight": 400,
1407
- "white-space": "nowrap",
1408
- color: "text-1",
1409
- },
1410
- "nav-item-dropdown-trigger": {
1411
- display: "flex",
1412
- "column-gap": "2xs",
1413
- "align-items": "center",
1414
- cursor: "pointer",
1415
- },
1416
- "nav-item-dropdown-trigger-title": {
1417
- width: "fit-content",
1418
- "font-size": "base",
1419
- "line-height": 1.5,
1420
- "font-weight": 400,
1421
- "white-space": "nowrap",
1422
- color: "text-1",
1423
- },
1424
- "sub-items_levoGroup": {
1425
- display: "flex",
1426
- "padding-right": "4xs",
1427
- "padding-left": "4xs",
1428
- "padding-top": "4xs",
1429
- "padding-bottom": "4xs",
1430
- "flex-direction": "column",
1431
- "border-radius": "base",
1432
- width: "fit-content",
1433
- "background-color": "#ffffff",
1434
- "box-shadow":
1435
- "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
1436
- },
1437
- "sub-items": Array(3)
1438
- ?.fill(0)
1439
- ?.map(() => ({
1440
- "sub-item-link": {
1441
- display: "flex",
1442
- "padding-top": "sm",
1443
- "padding-bottom": "sm",
1444
- "padding-left": "sm",
1445
- "padding-right": "sm",
1446
- "column-gap": "sm",
1447
- "align-items": "center",
1448
- "border-radius": "base",
1449
- width: "100%",
1450
- _hover: {
1451
- "background-color": "rgba(241 245 249 / 0.5)",
1452
- },
1453
- },
1454
- "sub-item-icon-container": {
1455
- "aspect-ratio": "1",
1456
- display: "flex",
1457
- "justify-content": "center",
1458
- "align-items": "center",
1459
- "border-radius": "base",
1460
- height: "42px",
1461
- width: "42px",
1462
- "background-color": "rgb(241 245 249 / 1)",
1463
- },
1464
- "sub-item-icon": {
1465
- "object-fit": "contain",
1466
- width: "24px",
1467
- height: "24px",
1468
- },
1469
- "sub-item-text-container": {
1470
- display: "flex",
1471
- "flex-direction": "column",
1472
- flex: "1 1 0%",
1473
- "row-gap": "5xs",
1474
- },
1475
- "sub-item-title": {
1476
- "font-size": "sm",
1477
- "font-weight": 600,
1478
- color: "text-1",
1479
- },
1480
- "sub-item-description": {
1481
- "font-size": "xs",
1482
- "font-weight": 400,
1483
- color: "text-2",
1484
- },
1485
- })),
1486
- })),
1487
935
  "desktop-cta-group_levoGroup": {
1488
936
  display: "flex",
1489
937
  "column-gap": "sm",
@@ -1532,102 +980,6 @@ export const Navbar2: IBlock = {
1532
980
  "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
1533
981
  transform: "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
1534
982
  },
1535
- "mobile-nav-menu_levoGroup": {
1536
- display: "flex",
1537
- "flex-direction": "column",
1538
- "row-gap": "2xs",
1539
- },
1540
- "mobile-nav-menu": Array(3)
1541
- ?.fill(0)
1542
- ?.map(() => ({
1543
- "nav-item-title-container": { width: "100%" },
1544
- "nav-item-title": {
1545
- "padding-top": "2xs",
1546
- "padding-bottom": "2xs",
1547
- "column-gap": "2xs",
1548
- "justify-content": "flex-start",
1549
- width: "100%",
1550
-
1551
- color: "text-1",
1552
- },
1553
- "nav-item-dropdown-container": {
1554
- display: "flex",
1555
- "flex-direction": "column",
1556
- width: "100%",
1557
- },
1558
- "nav-item-dropdown-trigger": {
1559
- display: "flex",
1560
- "padding-top": "2xs",
1561
- "padding-bottom": "2xs",
1562
- "column-gap": "2xs",
1563
- "justify-content": "space-between",
1564
- "align-items": "center",
1565
- width: "100%",
1566
- "font-size": "lg",
1567
- "line-height": 1.625,
1568
- "font-weight": 600,
1569
- // color: "#ffffff",
1570
- cursor: "pointer",
1571
- },
1572
- "nav-item-dropdown-trigger-title": {
1573
- "font-size": "lg",
1574
- "line-height": "28px",
1575
- "font-weight": 600,
1576
- color: "var(--color-text-1)",
1577
- },
1578
- "sub-items_levoGroup": {
1579
- display: "flex",
1580
- "flex-direction": "column",
1581
- "row-gap": "4xs",
1582
- width: "100%",
1583
- },
1584
- "sub-items": Array(3)
1585
- ?.fill(0)
1586
- ?.map(() => ({
1587
- "sub-item-link": {
1588
- display: "flex",
1589
- "padding-top": "2xs",
1590
- "padding-bottom": "2xs",
1591
- "padding-left": "2xs",
1592
- "padding-right": "2xs",
1593
- "column-gap": "sm",
1594
- "align-items": "center",
1595
- "border-radius": "sm",
1596
- width: "100%",
1597
- _hover: { "--bg-opacity": "0.5" },
1598
- },
1599
- "sub-item-icon-container": {
1600
- "aspect-ratio": "1 / 1",
1601
- display: "flex",
1602
- "justify-content": "center",
1603
- "align-items": "center",
1604
- "border-radius": "base",
1605
- "--bg-opacity": "0.6",
1606
- },
1607
- "sub-item-icon": {
1608
- "object-fit": "contain",
1609
- width: "24px",
1610
- height: "24px",
1611
- },
1612
- "sub-item-text-container": {
1613
- display: "flex",
1614
- "flex-direction": "column",
1615
- flex: "1 1 0%",
1616
- "row-gap": "4xs",
1617
- },
1618
- "sub-item-title-container": {},
1619
- "sub-item-title": {
1620
- "font-size": "sm",
1621
- "font-weight": 600,
1622
- color: "text-1",
1623
- },
1624
- "sub-item-description": {
1625
- "font-size": "xs",
1626
- "font-weight": 400,
1627
- color: "text-2",
1628
- },
1629
- })),
1630
- })),
1631
983
  "mobile-cta-group_levoGroup": {
1632
984
  "margin-top": "2xs",
1633
985
  width: "100%",
@@ -1669,6 +1021,8 @@ export const Navbar2: IBlock = {
1669
1021
  key: "full-width-search",
1670
1022
  title: "Full Width with Search",
1671
1023
  styles: {
1024
+ ...DESKTOP_NAV_MENUS_STYLE_GROUPS,
1025
+ ...MOBILE_NAV_MENU_STYLE_GROUPS,
1672
1026
  layout: {
1673
1027
  position: "fixed",
1674
1028
  top: "0",
@@ -1695,194 +1049,6 @@ export const Navbar2: IBlock = {
1695
1049
  display: "flex",
1696
1050
  "column-gap": "xl",
1697
1051
  },
1698
- "left-desktop-nav-menu_levoGroup": {
1699
- display: "flex",
1700
- "align-items": "center",
1701
- "column-gap": "lg",
1702
- tablet: {
1703
- display: "none",
1704
- },
1705
- },
1706
- "right-desktop-nav-menu_levoGroup": {
1707
- display: "flex",
1708
- "align-items": "center",
1709
- "column-gap": "lg",
1710
- tablet: {
1711
- display: "none",
1712
- },
1713
- },
1714
- "left-desktop-nav-menu": Array(3)
1715
- ?.fill(0)
1716
- ?.map(() => ({
1717
- "nav-item-title": {
1718
- "font-size": "base",
1719
- "font-weight": 400,
1720
- "white-space": "nowrap",
1721
- color: "text-1",
1722
- },
1723
- "nav-item-dropdown-trigger": {
1724
- display: "flex",
1725
- "column-gap": "2xs",
1726
- "align-items": "center",
1727
- cursor: "pointer",
1728
- },
1729
- "nav-item-dropdown-trigger-title": {
1730
- width: "fit-content",
1731
- "font-size": "base",
1732
- "line-height": 1.5,
1733
- "font-weight": 400,
1734
- "white-space": "nowrap",
1735
- color: "text-1",
1736
- },
1737
- "sub-items_levoGroup": {
1738
- display: "flex",
1739
- "padding-right": "4xs",
1740
- "padding-left": "4xs",
1741
- "padding-top": "4xs",
1742
- "padding-bottom": "4xs",
1743
- "flex-direction": "column",
1744
- "border-radius": "base",
1745
- width: "fit-content",
1746
- "background-color": "#ffffff",
1747
- "box-shadow":
1748
- "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
1749
- },
1750
- "sub-items": Array(3)
1751
- ?.fill(0)
1752
- ?.map(() => ({
1753
- "sub-item-link": {
1754
- display: "flex",
1755
- "padding-top": "sm",
1756
- "padding-bottom": "sm",
1757
- "padding-left": "sm",
1758
- "padding-right": "sm",
1759
- "column-gap": "sm",
1760
- "align-items": "center",
1761
- "border-radius": "base",
1762
- width: "100%",
1763
- _hover: {
1764
- "background-color": "rgba(241 245 249 / 0.5)",
1765
- },
1766
- },
1767
- "sub-item-icon-container": {
1768
- "aspect-ratio": "1",
1769
- display: "flex",
1770
- "justify-content": "center",
1771
- "align-items": "center",
1772
- "border-radius": "base",
1773
- height: "42px",
1774
- width: "42px",
1775
- "background-color": "rgb(241 245 249 / 1)",
1776
- },
1777
- "sub-item-icon": {
1778
- "object-fit": "contain",
1779
- width: "24px",
1780
- height: "24px",
1781
- },
1782
- "sub-item-text-container": {
1783
- display: "flex",
1784
- "flex-direction": "column",
1785
- flex: "1 1 0%",
1786
- "row-gap": "5xs",
1787
- },
1788
- "sub-item-title": {
1789
- "font-size": "sm",
1790
- "font-weight": 600,
1791
- color: "text-1",
1792
- },
1793
- "sub-item-description": {
1794
- "font-size": "xs",
1795
- "font-weight": 400,
1796
- color: "text-2",
1797
- },
1798
- })),
1799
- })),
1800
- "right-desktop-nav-menu": Array(3)
1801
- ?.fill(0)
1802
- ?.map(() => ({
1803
- "nav-item-title": {
1804
- "font-size": "base",
1805
- "font-weight": 400,
1806
- "white-space": "nowrap",
1807
- color: "text-1",
1808
- },
1809
- "nav-item-dropdown-trigger": {
1810
- display: "flex",
1811
- "column-gap": "2xs",
1812
- "align-items": "center",
1813
- cursor: "pointer",
1814
- },
1815
- "nav-item-dropdown-trigger-title": {
1816
- width: "fit-content",
1817
- "font-size": "base",
1818
- "line-height": 1.5,
1819
- "font-weight": 400,
1820
- "white-space": "nowrap",
1821
- color: "text-1",
1822
- },
1823
- "sub-items_levoGroup": {
1824
- display: "flex",
1825
- "padding-right": "4xs",
1826
- "padding-left": "4xs",
1827
- "padding-top": "4xs",
1828
- "padding-bottom": "4xs",
1829
- "flex-direction": "column",
1830
- "border-radius": "base",
1831
- width: "fit-content",
1832
- "background-color": "#ffffff",
1833
- "box-shadow":
1834
- "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
1835
- },
1836
- "sub-items": Array(3)
1837
- ?.fill(0)
1838
- ?.map(() => ({
1839
- "sub-item-link": {
1840
- display: "flex",
1841
- "padding-top": "sm",
1842
- "padding-bottom": "sm",
1843
- "padding-left": "sm",
1844
- "padding-right": "sm",
1845
- "column-gap": "sm",
1846
- "align-items": "center",
1847
- "border-radius": "base",
1848
- width: "100%",
1849
- _hover: {
1850
- "background-color": "rgba(241 245 249 / 0.5)",
1851
- },
1852
- },
1853
- "sub-item-icon-container": {
1854
- "aspect-ratio": "1",
1855
- display: "flex",
1856
- "justify-content": "center",
1857
- "align-items": "center",
1858
- "border-radius": "base",
1859
- height: "42px",
1860
- width: "42px",
1861
- "background-color": "rgb(241 245 249 / 1)",
1862
- },
1863
- "sub-item-icon": {
1864
- "object-fit": "contain",
1865
- width: "24px",
1866
- height: "24px",
1867
- },
1868
- "sub-item-text-container": {
1869
- display: "flex",
1870
- "flex-direction": "column",
1871
- flex: "1 1 0%",
1872
- "row-gap": "5xs",
1873
- },
1874
- "sub-item-title": {
1875
- "font-size": "sm",
1876
- "font-weight": 600,
1877
- color: "text-1",
1878
- },
1879
- "sub-item-description": {
1880
- "font-size": "xs",
1881
- "font-weight": 400,
1882
- color: "text-2",
1883
- },
1884
- })),
1885
- })),
1886
1052
  "desktop-cta-group_levoGroup": {
1887
1053
  display: "flex",
1888
1054
  "column-gap": "sm",
@@ -1931,102 +1097,6 @@ export const Navbar2: IBlock = {
1931
1097
  "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
1932
1098
  transform: "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
1933
1099
  },
1934
- "mobile-nav-menu_levoGroup": {
1935
- display: "flex",
1936
- "flex-direction": "column",
1937
- "row-gap": "2xs",
1938
- },
1939
- "mobile-nav-menu": Array(3)
1940
- ?.fill(0)
1941
- ?.map(() => ({
1942
- "nav-item-title-container": { width: "100%" },
1943
- "nav-item-title": {
1944
- "padding-top": "2xs",
1945
- "padding-bottom": "2xs",
1946
- "column-gap": "2xs",
1947
- "justify-content": "flex-start",
1948
- width: "100%",
1949
-
1950
- color: "text-1",
1951
- },
1952
- "nav-item-dropdown-container": {
1953
- display: "flex",
1954
- "flex-direction": "column",
1955
- width: "100%",
1956
- },
1957
- "nav-item-dropdown-trigger": {
1958
- display: "flex",
1959
- "padding-top": "2xs",
1960
- "padding-bottom": "2xs",
1961
- "column-gap": "2xs",
1962
- "justify-content": "space-between",
1963
- "align-items": "center",
1964
- width: "100%",
1965
- "font-size": "lg",
1966
- "line-height": 1.625,
1967
- "font-weight": 600,
1968
- // color: "#ffffff",
1969
- cursor: "pointer",
1970
- },
1971
- "nav-item-dropdown-trigger-title": {
1972
- "font-size": "lg",
1973
- "line-height": "28px",
1974
- "font-weight": 600,
1975
- color: "var(--color-text-1)",
1976
- },
1977
- "sub-items_levoGroup": {
1978
- display: "flex",
1979
- "flex-direction": "column",
1980
- "row-gap": "4xs",
1981
- width: "100%",
1982
- },
1983
- "sub-items": Array(3)
1984
- ?.fill(0)
1985
- ?.map(() => ({
1986
- "sub-item-link": {
1987
- display: "flex",
1988
- "padding-top": "2xs",
1989
- "padding-bottom": "2xs",
1990
- "padding-left": "2xs",
1991
- "padding-right": "2xs",
1992
- "column-gap": "sm",
1993
- "align-items": "center",
1994
- "border-radius": "sm",
1995
- width: "100%",
1996
- _hover: { "--bg-opacity": "0.5" },
1997
- },
1998
- "sub-item-icon-container": {
1999
- "aspect-ratio": "1 / 1",
2000
- display: "flex",
2001
- "justify-content": "center",
2002
- "align-items": "center",
2003
- "border-radius": "base",
2004
- "--bg-opacity": "0.6",
2005
- },
2006
- "sub-item-icon": {
2007
- "object-fit": "contain",
2008
- width: "24px",
2009
- height: "24px",
2010
- },
2011
- "sub-item-text-container": {
2012
- display: "flex",
2013
- "flex-direction": "column",
2014
- flex: "1 1 0%",
2015
- "row-gap": "4xs",
2016
- },
2017
- "sub-item-title-container": {},
2018
- "sub-item-title": {
2019
- "font-size": "sm",
2020
- "font-weight": 600,
2021
- color: "text-1",
2022
- },
2023
- "sub-item-description": {
2024
- "font-size": "xs",
2025
- "font-weight": 400,
2026
- color: "text-2",
2027
- },
2028
- })),
2029
- })),
2030
1100
  "mobile-cta-group_levoGroup": {
2031
1101
  "margin-top": "2xs",
2032
1102
  width: "100%",