@levo-so/blocks 0.1.68 → 0.1.72

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.
@@ -317,6 +317,11 @@ export const Navbar2: IBlock = {
317
317
  },
318
318
  ],
319
319
  },
320
+ {
321
+ key: "desktop-search-container",
322
+ label: "Desktop Search Container",
323
+ field_interface: "BoxWidget",
324
+ },
320
325
  {
321
326
  key: "desktop-cta-group",
322
327
  label: "Desktop CTA Group",
@@ -335,6 +340,16 @@ export const Navbar2: IBlock = {
335
340
  label: "Mobile Background Overlay",
336
341
  field_interface: "BoxWidget",
337
342
  },
343
+ {
344
+ key: "mobile-nav-container",
345
+ label: "Mobile Nav Container",
346
+ field_interface: "BoxWidget",
347
+ },
348
+ {
349
+ key: "mobile-search-container",
350
+ label: "Mobile Search Container",
351
+ field_interface: "BoxWidget",
352
+ },
338
353
  {
339
354
  key: "mobile-nav-menu-button",
340
355
  label: "Mobile Nav Menu Button",
@@ -822,26 +837,56 @@ export const Navbar2: IBlock = {
822
837
  width: "100%",
823
838
  },
824
839
  })),
840
+ "mobile-nav-container": {
841
+ display: "none",
842
+ _hover: {
843
+ opacity: "0.9",
844
+ },
845
+ tablet: {
846
+ display: "flex",
847
+ "column-gap": "base",
848
+ },
849
+ mobile: {
850
+ "column-gap": "xs",
851
+ },
852
+ },
853
+ "desktop-search-container": {
854
+ display: "none",
855
+ },
856
+ "mobile-search-container": {
857
+ tablet: {
858
+ display: "none",
859
+ },
860
+ },
825
861
  },
826
862
  content: DEFAULT_CONTENT,
827
863
  config: {},
828
864
  },
829
865
  {
830
- key: "full-width",
831
- title: "Full Width",
866
+ key: "default-search",
867
+ title: "Default with search",
832
868
  styles: {
833
869
  layout: {
834
870
  position: "fixed",
835
- top: "0",
836
- left: "0",
837
- right: "0",
871
+ top: "2rem",
872
+ left: "50%",
838
873
  "z-index": 30,
839
874
  width: "100%",
875
+ "max-width": "1200px",
876
+ "border-radius": "base",
840
877
  "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
841
878
  "background-color": "rgba(255,255,255,0.8)",
842
879
  "backdrop-filter": "blur(20px)",
843
- "padding-top": "lg",
844
- "padding-bottom": "lg",
880
+ transform: "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
881
+ "padding-top": "sm",
882
+ "padding-bottom": "sm",
883
+ tablet: {
884
+ top: "2rem",
885
+ "max-width": "98%",
886
+ },
887
+ mobile: {
888
+ top: "20px",
889
+ },
845
890
  },
846
891
  "nav-container": {
847
892
  display: "flex",
@@ -1202,6 +1247,815 @@ export const Navbar2: IBlock = {
1202
1247
  width: "100%",
1203
1248
  },
1204
1249
  })),
1250
+ "mobile-nav-container": {
1251
+ display: "none",
1252
+ _hover: {
1253
+ opacity: "0.9",
1254
+ },
1255
+ tablet: {
1256
+ display: "flex",
1257
+ "column-gap": "base",
1258
+ },
1259
+ mobile: {
1260
+ "column-gap": "xs",
1261
+ },
1262
+ },
1263
+ "desktop-search-container": {},
1264
+ "mobile-search-container": {},
1265
+ },
1266
+ content: DEFAULT_CONTENT,
1267
+ config: {},
1268
+ },
1269
+ {
1270
+ key: "full-width",
1271
+ title: "Full Width",
1272
+ styles: {
1273
+ layout: {
1274
+ position: "fixed",
1275
+ top: "0",
1276
+ left: "0",
1277
+ right: "0",
1278
+ "z-index": 30,
1279
+ width: "100%",
1280
+ "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
1281
+ "background-color": "rgba(255,255,255,0.8)",
1282
+ "backdrop-filter": "blur(20px)",
1283
+ "padding-top": "lg",
1284
+ "padding-bottom": "lg",
1285
+ },
1286
+ "nav-container": {
1287
+ display: "flex",
1288
+ "justify-content": "space-between",
1289
+ "align-items": "center",
1290
+ },
1291
+ "nav-logo": {
1292
+ height: "36px",
1293
+ },
1294
+ // Desktop
1295
+ "right-container": {
1296
+ display: "flex",
1297
+ "column-gap": "xl",
1298
+ },
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
+ "desktop-cta-group_levoGroup": {
1488
+ display: "flex",
1489
+ "column-gap": "sm",
1490
+ tablet: {
1491
+ display: "none",
1492
+ },
1493
+ },
1494
+ "desktop-cta-group": Array(2)
1495
+ ?.fill(0)
1496
+ ?.map(() => ({
1497
+ cta: {},
1498
+ })),
1499
+ // Mobile
1500
+ "mobile-background-overlay": {
1501
+ position: "fixed",
1502
+ top: "0",
1503
+ right: "0",
1504
+ bottom: "0",
1505
+ left: "0",
1506
+ "z-index": 20,
1507
+ },
1508
+ "mobile-nav-menu-button": {
1509
+ display: "none",
1510
+ tablet: {
1511
+ display: "flex",
1512
+ },
1513
+ _hover: {
1514
+ opacity: "0.9",
1515
+ },
1516
+ },
1517
+ "mobile-nav-menu-wrapper": {
1518
+ display: "flex",
1519
+ "justify-content": "center",
1520
+ "border-radius": "base",
1521
+ "background-color": "#ffffff",
1522
+ color: "brandForeground",
1523
+ "padding-top": "12px",
1524
+ "padding-bottom": "12px",
1525
+ "padding-left": "28px",
1526
+ "padding-right": "28px",
1527
+ "flex-direction": "column",
1528
+ position: "fixed",
1529
+ top: "70px",
1530
+ left: "50%",
1531
+ width: "98%",
1532
+ "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
1533
+ transform: "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
1534
+ },
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
+ "mobile-cta-group_levoGroup": {
1632
+ "margin-top": "2xs",
1633
+ width: "100%",
1634
+ display: "flex",
1635
+ "flex-direction": "column",
1636
+ "row-gap": "2xs",
1637
+ },
1638
+ "mobile-cta-group": Array(2)
1639
+ ?.fill(0)
1640
+ ?.map(() => ({
1641
+ cta: {
1642
+ width: "100%",
1643
+ },
1644
+ })),
1645
+ "mobile-nav-container": {
1646
+ display: "none",
1647
+ _hover: {
1648
+ opacity: "0.9",
1649
+ },
1650
+ tablet: {
1651
+ display: "flex",
1652
+ "column-gap": "base",
1653
+ },
1654
+ mobile: {
1655
+ "column-gap": "xs",
1656
+ },
1657
+ },
1658
+ "desktop-search-container": {
1659
+ display: "none",
1660
+ },
1661
+ "mobile-search-container": {
1662
+ display: "none",
1663
+ },
1664
+ },
1665
+ content: DEFAULT_CONTENT,
1666
+ config: {},
1667
+ },
1668
+ {
1669
+ key: "full-width-search",
1670
+ title: "Full Width with Search",
1671
+ styles: {
1672
+ layout: {
1673
+ position: "fixed",
1674
+ top: "0",
1675
+ left: "0",
1676
+ right: "0",
1677
+ "z-index": 30,
1678
+ width: "100%",
1679
+ "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
1680
+ "background-color": "rgba(255,255,255,0.8)",
1681
+ "backdrop-filter": "blur(20px)",
1682
+ "padding-top": "lg",
1683
+ "padding-bottom": "lg",
1684
+ },
1685
+ "nav-container": {
1686
+ display: "flex",
1687
+ "justify-content": "space-between",
1688
+ "align-items": "center",
1689
+ },
1690
+ "nav-logo": {
1691
+ height: "36px",
1692
+ },
1693
+ // Desktop
1694
+ "right-container": {
1695
+ display: "flex",
1696
+ "column-gap": "xl",
1697
+ },
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
+ "desktop-cta-group_levoGroup": {
1887
+ display: "flex",
1888
+ "column-gap": "sm",
1889
+ tablet: {
1890
+ display: "none",
1891
+ },
1892
+ },
1893
+ "desktop-cta-group": Array(2)
1894
+ ?.fill(0)
1895
+ ?.map(() => ({
1896
+ cta: {},
1897
+ })),
1898
+ // Mobile
1899
+ "mobile-background-overlay": {
1900
+ position: "fixed",
1901
+ top: "0",
1902
+ right: "0",
1903
+ bottom: "0",
1904
+ left: "0",
1905
+ "z-index": 20,
1906
+ },
1907
+ "mobile-nav-menu-button": {
1908
+ display: "none",
1909
+ tablet: {
1910
+ display: "flex",
1911
+ },
1912
+ _hover: {
1913
+ opacity: "0.9",
1914
+ },
1915
+ },
1916
+ "mobile-nav-menu-wrapper": {
1917
+ display: "flex",
1918
+ "justify-content": "center",
1919
+ "border-radius": "base",
1920
+ "background-color": "#ffffff",
1921
+ color: "brandForeground",
1922
+ "padding-top": "12px",
1923
+ "padding-bottom": "12px",
1924
+ "padding-left": "28px",
1925
+ "padding-right": "28px",
1926
+ "flex-direction": "column",
1927
+ position: "fixed",
1928
+ top: "70px",
1929
+ left: "50%",
1930
+ width: "98%",
1931
+ "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
1932
+ transform: "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
1933
+ },
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
+ "mobile-cta-group_levoGroup": {
2031
+ "margin-top": "2xs",
2032
+ width: "100%",
2033
+ display: "flex",
2034
+ "flex-direction": "column",
2035
+ "row-gap": "2xs",
2036
+ },
2037
+ "mobile-cta-group": Array(2)
2038
+ ?.fill(0)
2039
+ ?.map(() => ({
2040
+ cta: {
2041
+ width: "100%",
2042
+ },
2043
+ })),
2044
+ "mobile-nav-container": {
2045
+ display: "none",
2046
+ _hover: {
2047
+ opacity: "0.9",
2048
+ },
2049
+ tablet: {
2050
+ display: "flex",
2051
+ "column-gap": "base",
2052
+ },
2053
+ mobile: {
2054
+ "column-gap": "xs",
2055
+ },
2056
+ },
2057
+ "desktop-search-container": {},
2058
+ "mobile-search-container": {},
1205
2059
  },
1206
2060
  content: DEFAULT_CONTENT,
1207
2061
  config: {},