@measured/puck 0.21.0-canary.e9d5c0ea → 0.21.0-canary.ec77dd9f

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.
@@ -1343,6 +1343,168 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1343
1343
  display: none;
1344
1344
  }
1345
1345
 
1346
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1347
+ ._SidebarSection_8boj8_1 {
1348
+ display: flex;
1349
+ position: relative;
1350
+ flex-direction: column;
1351
+ color: var(--puck-color-black);
1352
+ }
1353
+ ._SidebarSection_8boj8_1:last-of-type {
1354
+ flex-grow: 1;
1355
+ }
1356
+ ._SidebarSection-title_8boj8_12 {
1357
+ background: var(--puck-color-white);
1358
+ padding: 16px;
1359
+ border-bottom: 1px solid var(--puck-color-grey-09);
1360
+ border-top: 1px solid var(--puck-color-grey-09);
1361
+ overflow-x: auto;
1362
+ }
1363
+ ._SidebarSection--noBorderTop_8boj8_20 > ._SidebarSection-title_8boj8_12 {
1364
+ border-top: 0px;
1365
+ }
1366
+ ._SidebarSection-content_8boj8_24 {
1367
+ padding: 16px;
1368
+ }
1369
+ ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24 {
1370
+ padding: 0px;
1371
+ }
1372
+ ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24:last-child {
1373
+ padding-bottom: 4px;
1374
+ }
1375
+ ._SidebarSection_8boj8_1:last-of-type ._SidebarSection-content_8boj8_24 {
1376
+ border-bottom: none;
1377
+ flex-grow: 1;
1378
+ }
1379
+ ._SidebarSection-breadcrumbLabel_8boj8_41 {
1380
+ background: none;
1381
+ border: 0;
1382
+ border-radius: 2px;
1383
+ color: var(--puck-color-azure-04);
1384
+ cursor: pointer;
1385
+ font: inherit;
1386
+ flex-shrink: 0;
1387
+ padding: 0;
1388
+ transition: color 50ms ease-in;
1389
+ }
1390
+ ._SidebarSection-breadcrumbLabel_8boj8_41:focus-visible {
1391
+ outline: 2px solid var(--puck-color-azure-05);
1392
+ outline-offset: 2px;
1393
+ }
1394
+ @media (hover: hover) and (pointer: fine) {
1395
+ ._SidebarSection-breadcrumbLabel_8boj8_41:hover {
1396
+ color: var(--puck-color-azure-03);
1397
+ transition: none;
1398
+ }
1399
+ }
1400
+ ._SidebarSection-breadcrumbLabel_8boj8_41:active {
1401
+ color: var(--puck-color-azure-02);
1402
+ transition: none;
1403
+ }
1404
+ ._SidebarSection-breadcrumbs_8boj8_70 {
1405
+ align-items: center;
1406
+ display: flex;
1407
+ gap: 4px;
1408
+ }
1409
+ ._SidebarSection-breadcrumb_8boj8_41 {
1410
+ align-items: center;
1411
+ display: flex;
1412
+ gap: 4px;
1413
+ }
1414
+ ._SidebarSection-heading_8boj8_82 {
1415
+ padding-inline-end: 16px;
1416
+ }
1417
+ ._SidebarSection-loadingOverlay_8boj8_86 {
1418
+ background: var(--puck-color-white);
1419
+ display: flex;
1420
+ justify-content: center;
1421
+ align-items: center;
1422
+ height: 100%;
1423
+ width: 100%;
1424
+ top: 0;
1425
+ position: absolute;
1426
+ z-index: 1;
1427
+ pointer-events: all;
1428
+ box-sizing: border-box;
1429
+ opacity: 0.8;
1430
+ }
1431
+
1432
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
1433
+ ._Puck_1yxlw_19 {
1434
+ --puck-space-px: 16px;
1435
+ font-family: var(--puck-font-family);
1436
+ overflow-x: hidden;
1437
+ }
1438
+ @media (min-width: 766px) {
1439
+ ._Puck_1yxlw_19 {
1440
+ overflow-x: auto;
1441
+ }
1442
+ }
1443
+ ._Puck-portal_1yxlw_31 {
1444
+ position: relative;
1445
+ z-index: 2;
1446
+ }
1447
+ ._PuckLayout-inner_1yxlw_38 {
1448
+ --puck-frame-width: auto;
1449
+ --puck-side-bar-width: 0px;
1450
+ --puck-left-side-bar-width: var( --puck-user-left-side-bar-width, var(--puck-side-bar-width) );
1451
+ --puck-right-side-bar-width: var( --puck-user-right-side-bar-width, var(--puck-side-bar-width) );
1452
+ display: grid;
1453
+ grid-template-areas: "header header header" "left editor right";
1454
+ grid-template-columns: 0 var(--puck-frame-width) 0;
1455
+ grid-template-rows: min-content auto;
1456
+ height: 100dvh;
1457
+ position: relative;
1458
+ z-index: 0;
1459
+ }
1460
+ ._PuckLayout--mounted_1yxlw_59 ._PuckLayout-inner_1yxlw_38 {
1461
+ --puck-side-bar-width: 186px;
1462
+ }
1463
+ ._PuckLayout--leftSideBarVisible_1yxlw_63 ._PuckLayout-inner_1yxlw_38 {
1464
+ grid-template-columns: var(--puck-left-side-bar-width) var(--puck-frame-width) 0;
1465
+ }
1466
+ ._PuckLayout--rightSideBarVisible_1yxlw_69 ._PuckLayout-inner_1yxlw_38 {
1467
+ grid-template-columns: 0 var(--puck-frame-width) var(--puck-right-side-bar-width);
1468
+ }
1469
+ ._PuckLayout--leftSideBarVisible_1yxlw_63._PuckLayout--rightSideBarVisible_1yxlw_69 ._PuckLayout-inner_1yxlw_38 {
1470
+ grid-template-columns: var(--puck-left-side-bar-width) var(--puck-frame-width) var(--puck-right-side-bar-width);
1471
+ }
1472
+ @media (min-width: 458px) {
1473
+ ._PuckLayout-mounted_1yxlw_83 ._PuckLayout-inner_1yxlw_38 {
1474
+ --puck-frame-width: minmax(266px, auto);
1475
+ }
1476
+ }
1477
+ @media (min-width: 638px) {
1478
+ ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
1479
+ --puck-side-bar-width: minmax(186px, 250px);
1480
+ }
1481
+ }
1482
+ @media (min-width: 766px) {
1483
+ ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
1484
+ --puck-frame-width: auto;
1485
+ }
1486
+ }
1487
+ @media (min-width: 990px) {
1488
+ ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
1489
+ --puck-side-bar-width: 256px;
1490
+ }
1491
+ }
1492
+ @media (min-width: 1198px) {
1493
+ ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
1494
+ --puck-side-bar-width: 274px;
1495
+ }
1496
+ }
1497
+ @media (min-width: 1398px) {
1498
+ ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
1499
+ --puck-side-bar-width: 290px;
1500
+ }
1501
+ }
1502
+ @media (min-width: 1598px) {
1503
+ ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
1504
+ --puck-side-bar-width: 320px;
1505
+ }
1506
+ }
1507
+
1346
1508
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
1347
1509
  ._PuckFields_10bh7_1 {
1348
1510
  position: relative;
@@ -1434,14 +1596,6 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1434
1596
  margin-inline-start: auto;
1435
1597
  }
1436
1598
 
1437
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Components/styles.module.css/#css-module-data */
1438
- ._Components_3pbdy_1 {
1439
- padding: 16px;
1440
- height: 100%;
1441
- overflow-y: auto;
1442
- box-sizing: border-box;
1443
- }
1444
-
1445
1599
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
1446
1600
  ._PuckPreview_z2rgu_1 {
1447
1601
  position: relative;
@@ -1556,167 +1710,111 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1556
1710
  margin-top: 4px;
1557
1711
  }
1558
1712
 
1559
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Outline/styles.module.css/#css-module-data */
1560
- ._Outline_cvjlj_1 {
1561
- padding: 16px;
1562
- height: 100%;
1563
- overflow-y: auto;
1713
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
1714
+ ._ViewportControls_gejzr_1 {
1715
+ display: flex;
1716
+ background: var(--puck-color-grey-11);
1564
1717
  box-sizing: border-box;
1718
+ border-inline-start: 2px solid var(--puck-color-grey-11);
1719
+ justify-content: center;
1720
+ gap: 8px;
1721
+ min-width: 358px;
1722
+ padding-bottom: 16px;
1723
+ padding-inline-start: var(--puck-space-px);
1724
+ padding-inline-end: var(--puck-space-px);
1725
+ z-index: 1;
1565
1726
  }
1566
-
1567
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Layout/styles.module.css/#css-module-data */
1568
- ._Puck_hv23j_19 {
1569
- --puck-space-px: 16px;
1570
- font-family: var(--puck-font-family);
1571
- overflow-x: hidden;
1727
+ ._ViewportControls-divider_gejzr_15 {
1728
+ border-inline-end: 1px solid var(--puck-color-grey-09);
1729
+ margin-inline-start: 8px;
1730
+ margin-inline-end: 8px;
1572
1731
  }
1573
- @media (min-width: 766px) {
1574
- ._Puck_hv23j_19 {
1575
- overflow-x: auto;
1576
- }
1732
+ ._ViewportControls-zoomSelect_gejzr_21 {
1733
+ appearance: none;
1734
+ background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
1735
+ background-size: 10px;
1736
+ background-position: calc(100% - 12px) calc(50% + 3px);
1737
+ background-repeat: no-repeat;
1738
+ border: 0;
1739
+ font-size: var(--puck-font-size-xxxs);
1740
+ padding: 0;
1741
+ width: 96px;
1577
1742
  }
1578
- ._Puck-portal_hv23j_31 {
1579
- position: relative;
1580
- z-index: 2;
1743
+ ._ViewportControls-zoomSelect_gejzr_21:dir(rtl) {
1744
+ background-position: 12px calc(50% + 3px);
1581
1745
  }
1582
- ._PuckLayout_hv23j_36 {
1583
- height: 100%;
1746
+ ._ViewportButton--isActive_gejzr_38 ._ViewportButton-inner_gejzr_38 {
1747
+ color: var(--puck-color-azure-04);
1584
1748
  }
1585
- ._PuckLayout-inner_hv23j_40 {
1586
- --puck-frame-width: auto;
1587
- --puck-side-nav-width: min-content;
1588
- --puck-side-bar-width: 0px;
1589
- --puck-left-side-bar-width: var( --puck-user-left-side-bar-width, var(--puck-side-bar-width) );
1590
- --puck-right-side-bar-width: var( --puck-user-right-side-bar-width, var(--puck-side-bar-width) );
1591
- background-color: var(--puck-color-grey-12);
1592
- display: grid;
1593
- grid-template-areas: "header" "editor" "left" "right" "sidenav";
1594
- grid-template-columns: var(--puck-frame-width);
1595
- grid-template-rows: min-content auto 0 0 var(--puck-side-nav-width);
1596
- height: 100%;
1597
- position: relative;
1598
- transition: grid-template-rows 150ms ease-in;
1599
- z-index: 0;
1600
- overflow: hidden;
1749
+
1750
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
1751
+ ._PuckCanvas_18jay_1 {
1752
+ background: var(--puck-color-grey-11);
1753
+ display: flex;
1754
+ grid-area: editor;
1755
+ flex-direction: column;
1756
+ padding: var(--puck-space-px);
1757
+ overflow: auto;
1601
1758
  }
1602
- @media (min-width: 638px) {
1603
- ._PuckLayout-inner_hv23j_40 {
1604
- --puck-side-nav-width: 68px;
1605
- grid-template-areas: "header header header header" "sidenav left editor right";
1606
- grid-template-columns: var(--puck-side-nav-width) 0 var(--puck-frame-width) 0;
1607
- grid-template-rows: min-content auto;
1759
+ @media (min-width: 1198px) {
1760
+ ._PuckCanvas_18jay_1 {
1761
+ padding: calc(var(--puck-space-px) * 1.5);
1762
+ padding-top: var(--puck-space-px);
1608
1763
  }
1609
- }
1610
- ._PuckLayout--mounted_hv23j_73 ._PuckLayout-inner_hv23j_40 {
1611
- --puck-side-bar-width: 186px;
1612
- }
1613
- ._PuckLayout--mobilePanelHeightToggle_hv23j_77._PuckLayout--leftSideBarVisible_hv23j_77 ._PuckLayout-inner_hv23j_40 {
1614
- grid-template-rows: 0 auto 30% 0 var(--puck-side-nav-width);
1615
- }
1616
- ._PuckLayout--mobilePanelHeightToggle_hv23j_77._PuckLayout--leftSideBarVisible_hv23j_77._PuckLayout--isExpanded_hv23j_83 ._PuckLayout-inner_hv23j_40 {
1617
- grid-template-rows: 0 auto 55% 0 var(--puck-side-nav-width);
1618
- }
1619
- @media (min-width: 638px) {
1620
- ._PuckLayout--mobilePanelHeightToggle_hv23j_77._PuckLayout--leftSideBarVisible_hv23j_77 ._PuckLayout-inner_hv23j_40 {
1621
- grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) 0;
1622
- grid-template-rows: min-content auto;
1764
+ ._PuckCanvas_18jay_1:not(._PuckCanvas_18jay_1:has(._PuckCanvas-controls_18jay_16)) {
1765
+ padding-top: calc(var(--puck-space-px) * 1.5);
1623
1766
  }
1624
1767
  }
1625
- ._PuckLayout--mobilePanelHeightMinContent_hv23j_101._PuckLayout--leftSideBarVisible_hv23j_77 ._PuckLayout-inner_hv23j_40,
1626
- ._PuckLayout--mobilePanelHeightMinContent_hv23j_101._PuckLayout--leftSideBarVisible_hv23j_77._PuckLayout--isExpanded_hv23j_83 ._PuckLayout-inner_hv23j_40 {
1627
- grid-template-rows: 0 auto min-content 0 var(--puck-side-nav-width);
1628
- }
1629
- @media (min-width: 638px) {
1630
- ._PuckLayout--mobilePanelHeightToggle_hv23j_77._PuckLayout--leftSideBarVisible_hv23j_77 ._PuckLayout-inner_hv23j_40,
1631
- ._PuckLayout--mobilePanelHeightToggle_hv23j_77._PuckLayout--leftSideBarVisible_hv23j_77._PuckLayout--isExpanded_hv23j_83 ._PuckLayout-inner_hv23j_40,
1632
- ._PuckLayout--mobilePanelHeightMinContent_hv23j_101._PuckLayout--leftSideBarVisible_hv23j_77 ._PuckLayout-inner_hv23j_40,
1633
- ._PuckLayout--mobilePanelHeightMinContent_hv23j_101._PuckLayout--leftSideBarVisible_hv23j_77._PuckLayout--isExpanded_hv23j_83 ._PuckLayout-inner_hv23j_40 {
1634
- grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) 0;
1635
- grid-template-rows: min-content auto;
1636
- }
1768
+ ._PuckCanvas-inner_18jay_21 {
1769
+ display: flex;
1770
+ height: 100%;
1771
+ justify-content: center;
1772
+ min-width: 358px;
1773
+ position: relative;
1774
+ width: 100%;
1637
1775
  }
1638
- @media (min-width: 638px) {
1639
- ._PuckLayout--rightSideBarVisible_hv23j_128 ._PuckLayout-inner_hv23j_40 {
1640
- grid-template-columns: var(--puck-side-nav-width) 0 var(--puck-frame-width) var(--puck-right-side-bar-width);
1641
- }
1776
+ ._PuckCanvas-root_18jay_30 {
1777
+ background: white;
1778
+ border: 1px solid var(--puck-color-grey-09);
1779
+ box-sizing: content-box;
1780
+ min-width: 321px;
1781
+ position: absolute;
1782
+ pointer-events: none;
1783
+ transform-origin: top;
1784
+ top: 0;
1785
+ bottom: 0;
1786
+ opacity: 0;
1642
1787
  }
1643
- @media (min-width: 638px) {
1644
- ._PuckLayout--leftSideBarVisible_hv23j_77._PuckLayout--rightSideBarVisible_hv23j_128 ._PuckLayout-inner_hv23j_40 {
1645
- grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) var(--puck-right-side-bar-width);
1788
+ @media (min-width: 1198px) {
1789
+ ._PuckCanvas-root_18jay_30 {
1790
+ min-width: unset;
1646
1791
  }
1647
1792
  }
1648
- @media (min-width: 458px) {
1649
- ._PuckLayout-mounted_hv23j_147 ._PuckLayout-inner_hv23j_40 {
1650
- --puck-frame-width: minmax(266px, auto);
1793
+ @media (prefers-reduced-motion: reduce) {
1794
+ ._PuckCanvas-root_18jay_30 {
1795
+ transition: none !important;
1651
1796
  }
1652
1797
  }
1653
- @media (min-width: 638px) {
1654
- ._PuckLayout_hv23j_36 ._PuckLayout-inner_hv23j_40 {
1655
- --puck-side-bar-width: minmax(186px, 250px);
1656
- }
1798
+ ._PuckCanvas--ready_18jay_55 ._PuckCanvas-root_18jay_30 {
1799
+ pointer-events: unset;
1800
+ opacity: 1;
1657
1801
  }
1658
- @media (min-width: 766px) {
1659
- ._PuckLayout_hv23j_36 ._PuckLayout-inner_hv23j_40 {
1660
- --puck-frame-width: auto;
1661
- }
1802
+ ._PuckCanvas-loader_18jay_60 {
1803
+ align-items: center;
1804
+ color: var(--puck-color-grey-06);
1805
+ display: flex;
1806
+ height: 100%;
1807
+ justify-content: center;
1808
+ transition: opacity 250ms ease-out;
1809
+ opacity: 0;
1662
1810
  }
1663
- @media (min-width: 990px) {
1664
- ._PuckLayout_hv23j_36 ._PuckLayout-inner_hv23j_40 {
1665
- --puck-side-bar-width: 256px;
1666
- }
1811
+ ._PuckCanvas--showLoader_18jay_70 ._PuckCanvas-loader_18jay_60 {
1812
+ opacity: 1;
1667
1813
  }
1668
- @media (min-width: 1198px) {
1669
- ._PuckLayout_hv23j_36 ._PuckLayout-inner_hv23j_40 {
1670
- --puck-side-bar-width: 274px;
1671
- }
1672
- }
1673
- @media (min-width: 1398px) {
1674
- ._PuckLayout_hv23j_36 ._PuckLayout-inner_hv23j_40 {
1675
- --puck-side-bar-width: 290px;
1676
- }
1677
- }
1678
- @media (min-width: 1598px) {
1679
- ._PuckLayout_hv23j_36 ._PuckLayout-inner_hv23j_40 {
1680
- --puck-side-bar-width: 320px;
1681
- }
1682
- }
1683
- ._PuckLayout-nav_hv23j_188 {
1684
- border-top: 1px solid var(--puck-color-grey-09);
1685
- background-color: var(--puck-color-grey-12);
1686
- grid-area: sidenav;
1687
- overflow: hidden;
1688
- width: 100%;
1689
- }
1690
- @media (min-width: 638px) {
1691
- ._PuckLayout-nav_hv23j_188 {
1692
- border-top: 0;
1693
- border-right: 1px solid var(--puck-color-grey-09);
1694
- box-sizing: border-box;
1695
- }
1696
- }
1697
- ._PuckLayout-header_hv23j_204 {
1698
- grid-area: header;
1699
- }
1700
- ._PuckLayout--leftSideBarVisible_hv23j_77 ._PuckLayout-header_hv23j_204 {
1701
- overflow: hidden;
1702
- }
1703
- @media (min-width: 638px) {
1704
- ._PuckLayout--leftSideBarVisible_hv23j_77 ._PuckLayout-header_hv23j_204 {
1705
- overflow: auto;
1706
- }
1707
- }
1708
- ._PuckPluginTab_hv23j_218 {
1709
- display: none;
1710
- flex-grow: 1;
1711
- overflow: hidden;
1712
- }
1713
- ._PuckPluginTab--visible_hv23j_224 {
1714
- display: flex;
1715
- flex-direction: column;
1716
- }
1717
- ._PuckPluginTab-body_hv23j_229 {
1718
- flex-grow: 1;
1719
- overflow: hidden;
1814
+ ._PuckCanvas--showLoader_18jay_70._PuckCanvas--ready_18jay_55 ._PuckCanvas-loader_18jay_60 {
1815
+ opacity: 0;
1816
+ height: 0;
1817
+ transition: none;
1720
1818
  }
1721
1819
 
1722
1820
  /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
@@ -1764,7 +1862,7 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1764
1862
  }
1765
1863
 
1766
1864
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css/#css-module-data */
1767
- ._PuckHeader_1bhmt_1 {
1865
+ ._PuckHeader_15xnq_1 {
1768
1866
  background: var(--puck-color-white);
1769
1867
  border-bottom: 1px solid var(--puck-color-grey-09);
1770
1868
  color: var(--puck-color-black);
@@ -1772,12 +1870,7 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1772
1870
  position: relative;
1773
1871
  max-width: 100vw;
1774
1872
  }
1775
- @media (min-width: 638px) {
1776
- ._PuckHeader_1bhmt_1 {
1777
- padding-left: 67px;
1778
- }
1779
- }
1780
- ._PuckHeader-inner_1bhmt_16 {
1873
+ ._PuckHeader-inner_15xnq_10 {
1781
1874
  align-items: end;
1782
1875
  display: grid;
1783
1876
  gap: var(--puck-space-px);
@@ -1786,372 +1879,43 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1786
1879
  grid-template-rows: auto;
1787
1880
  padding: var(--puck-space-px);
1788
1881
  }
1789
- @media (min-width: 638px) {
1790
- ._PuckHeader-inner_1bhmt_16 {
1791
- border-left: 1px solid var(--puck-color-grey-09);
1792
- }
1793
- }
1794
- ._PuckHeader-toggle_1bhmt_32 {
1882
+ ._PuckHeader-toggle_15xnq_20 {
1795
1883
  color: var(--puck-color-grey-05);
1796
1884
  display: flex;
1797
1885
  margin-inline-start: -4px;
1798
1886
  padding-top: 2px;
1799
1887
  }
1800
- ._PuckHeader--rightSideBarVisible_1bhmt_39 ._PuckHeader-rightSideBarToggle_1bhmt_39,
1801
- ._PuckHeader--leftSideBarVisible_1bhmt_40 ._PuckHeader-leftSideBarToggle_1bhmt_40 {
1888
+ ._PuckHeader--rightSideBarVisible_15xnq_27 ._PuckHeader-rightSideBarToggle_15xnq_27,
1889
+ ._PuckHeader--leftSideBarVisible_15xnq_28 ._PuckHeader-leftSideBarToggle_15xnq_28 {
1802
1890
  color: var(--puck-color-black);
1803
1891
  }
1804
- ._PuckHeader-rightSideBarToggle_1bhmt_39,
1805
- ._PuckHeader-leftSideBarToggle_1bhmt_40 {
1806
- display: none;
1807
- }
1808
- @media (min-width: 638px) {
1809
- ._PuckHeader-rightSideBarToggle_1bhmt_39,
1810
- ._PuckHeader-leftSideBarToggle_1bhmt_40 {
1811
- display: block;
1812
- }
1813
- }
1814
- ._PuckHeader-title_1bhmt_56 {
1892
+ ._PuckHeader-title_15xnq_32 {
1815
1893
  align-self: center;
1816
1894
  }
1817
- ._PuckHeader-path_1bhmt_60 {
1895
+ ._PuckHeader-path_15xnq_36 {
1818
1896
  font-family: var(--puck-font-family-monospaced);
1819
1897
  font-size: var(--puck-font-size-xxs);
1820
1898
  font-weight: normal;
1821
1899
  word-break: break-all;
1822
1900
  }
1823
- ._PuckHeader-tools_1bhmt_67 {
1901
+ ._PuckHeader-tools_15xnq_43 {
1824
1902
  display: flex;
1825
1903
  gap: 16px;
1826
1904
  justify-content: flex-end;
1827
1905
  }
1828
- ._PuckHeader-menuButton_1bhmt_73 {
1906
+ ._PuckHeader-menuButton_15xnq_49 {
1829
1907
  color: var(--puck-color-grey-05);
1830
1908
  margin-inline-start: -4px;
1831
1909
  }
1832
- ._PuckHeader--menuOpen_1bhmt_78 ._PuckHeader-menuButton_1bhmt_73 {
1910
+ ._PuckHeader--menuOpen_15xnq_54 ._PuckHeader-menuButton_15xnq_49 {
1833
1911
  color: var(--puck-color-black);
1834
1912
  }
1835
1913
  @media (min-width: 638px) {
1836
- ._PuckHeader-menuButton_1bhmt_73 {
1914
+ ._PuckHeader-menuButton_15xnq_49 {
1837
1915
  display: none;
1838
1916
  }
1839
1917
  }
1840
1918
 
1841
- /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1842
- ._SidebarSection_8boj8_1 {
1843
- display: flex;
1844
- position: relative;
1845
- flex-direction: column;
1846
- color: var(--puck-color-black);
1847
- }
1848
- ._SidebarSection_8boj8_1:last-of-type {
1849
- flex-grow: 1;
1850
- }
1851
- ._SidebarSection-title_8boj8_12 {
1852
- background: var(--puck-color-white);
1853
- padding: 16px;
1854
- border-bottom: 1px solid var(--puck-color-grey-09);
1855
- border-top: 1px solid var(--puck-color-grey-09);
1856
- overflow-x: auto;
1857
- }
1858
- ._SidebarSection--noBorderTop_8boj8_20 > ._SidebarSection-title_8boj8_12 {
1859
- border-top: 0px;
1860
- }
1861
- ._SidebarSection-content_8boj8_24 {
1862
- padding: 16px;
1863
- }
1864
- ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24 {
1865
- padding: 0px;
1866
- }
1867
- ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24:last-child {
1868
- padding-bottom: 4px;
1869
- }
1870
- ._SidebarSection_8boj8_1:last-of-type ._SidebarSection-content_8boj8_24 {
1871
- border-bottom: none;
1872
- flex-grow: 1;
1873
- }
1874
- ._SidebarSection-breadcrumbLabel_8boj8_41 {
1875
- background: none;
1876
- border: 0;
1877
- border-radius: 2px;
1878
- color: var(--puck-color-azure-04);
1879
- cursor: pointer;
1880
- font: inherit;
1881
- flex-shrink: 0;
1882
- padding: 0;
1883
- transition: color 50ms ease-in;
1884
- }
1885
- ._SidebarSection-breadcrumbLabel_8boj8_41:focus-visible {
1886
- outline: 2px solid var(--puck-color-azure-05);
1887
- outline-offset: 2px;
1888
- }
1889
- @media (hover: hover) and (pointer: fine) {
1890
- ._SidebarSection-breadcrumbLabel_8boj8_41:hover {
1891
- color: var(--puck-color-azure-03);
1892
- transition: none;
1893
- }
1894
- }
1895
- ._SidebarSection-breadcrumbLabel_8boj8_41:active {
1896
- color: var(--puck-color-azure-02);
1897
- transition: none;
1898
- }
1899
- ._SidebarSection-breadcrumbs_8boj8_70 {
1900
- align-items: center;
1901
- display: flex;
1902
- gap: 4px;
1903
- }
1904
- ._SidebarSection-breadcrumb_8boj8_41 {
1905
- align-items: center;
1906
- display: flex;
1907
- gap: 4px;
1908
- }
1909
- ._SidebarSection-heading_8boj8_82 {
1910
- padding-inline-end: 16px;
1911
- }
1912
- ._SidebarSection-loadingOverlay_8boj8_86 {
1913
- background: var(--puck-color-white);
1914
- display: flex;
1915
- justify-content: center;
1916
- align-items: center;
1917
- height: 100%;
1918
- width: 100%;
1919
- top: 0;
1920
- position: absolute;
1921
- z-index: 1;
1922
- pointer-events: all;
1923
- box-sizing: border-box;
1924
- opacity: 0.8;
1925
- }
1926
-
1927
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Breadcrumbs/styles.module.css/#css-module-data */
1928
- ._Breadcrumbs_1c9yh_1 {
1929
- align-items: center;
1930
- display: flex;
1931
- gap: 4px;
1932
- }
1933
- ._Breadcrumbs-breadcrumbLabel_1c9yh_7 {
1934
- background: none;
1935
- border: 0;
1936
- border-radius: 2px;
1937
- color: var(--puck-color-azure-04);
1938
- cursor: pointer;
1939
- font: inherit;
1940
- flex-shrink: 0;
1941
- padding: 0;
1942
- transition: color 50ms ease-in;
1943
- }
1944
- ._Breadcrumbs-breadcrumbLabel_1c9yh_7:focus-visible {
1945
- outline: 2px solid var(--puck-color-azure-05);
1946
- outline-offset: 2px;
1947
- }
1948
- @media (hover: hover) and (pointer: fine) {
1949
- ._Breadcrumbs-breadcrumbLabel_1c9yh_7:hover {
1950
- color: var(--puck-color-azure-03);
1951
- transition: none;
1952
- }
1953
- }
1954
- ._Breadcrumbs-breadcrumbLabel_1c9yh_7:active {
1955
- color: var(--puck-color-azure-02);
1956
- transition: none;
1957
- }
1958
- ._Breadcrumbs-breadcrumb_1c9yh_7 {
1959
- align-items: center;
1960
- display: flex;
1961
- gap: 4px;
1962
- }
1963
-
1964
- /* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
1965
- ._ViewportControls_e3unb_1 {
1966
- position: relative;
1967
- }
1968
- ._ViewportControls--fullScreen_e3unb_5 {
1969
- border-radius: 32px;
1970
- display: flex;
1971
- position: absolute;
1972
- bottom: 12px;
1973
- right: 12px;
1974
- overflow: hidden;
1975
- }
1976
- ._ViewportControls-toggleButton_e3unb_14 {
1977
- display: none;
1978
- }
1979
- ._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-toggleButton_e3unb_14 {
1980
- align-items: center;
1981
- background-color: var(--puck-color-grey-02);
1982
- border: 1px solid var(--puck-color-grey-04);
1983
- border-radius: 30px;
1984
- cursor: pointer;
1985
- color: var(--puck-color-grey-11);
1986
- display: flex;
1987
- justify-content: center;
1988
- width: 42px;
1989
- height: 42px;
1990
- z-index: 1;
1991
- }
1992
- ._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-toggleButton_e3unb_14:hover {
1993
- background-color: var(--puck-color-grey-02);
1994
- border: 1px solid var(--puck-color-azure-04);
1995
- color: var(--puck-color-azure-07);
1996
- }
1997
- ._ViewportControls--isExpanded_e3unb_38 ._ViewportControls-toggleButton_e3unb_14 {
1998
- background-color: var(--puck-color-grey-03);
1999
- }
2000
- ._ViewportControls-actions_e3unb_42 {
2001
- display: flex;
2002
- }
2003
- ._ViewportControls-actionsInner_e3unb_46 {
2004
- display: flex;
2005
- box-sizing: border-box;
2006
- justify-content: center;
2007
- margin-left: auto;
2008
- margin-right: auto;
2009
- z-index: 0;
2010
- overflow: hidden;
2011
- }
2012
- ._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-actionsInner_e3unb_46 {
2013
- background: var(--puck-color-grey-11);
2014
- border: 1px solid var(--puck-color-grey-09);
2015
- border-radius: 30px;
2016
- margin-left: none;
2017
- margin-right: none;
2018
- padding-right: 42px;
2019
- }
2020
- ._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-actionsInner_e3unb_46 {
2021
- transform: translateX(100%);
2022
- transition: transform 150ms ease-in-out;
2023
- }
2024
- ._ViewportControls--fullScreen_e3unb_5._ViewportControls--isExpanded_e3unb_38 ._ViewportControls-actionsInner_e3unb_46 {
2025
- transform: translateX(42px);
2026
- }
2027
- ._ViewportControls-divider_e3unb_75 {
2028
- border-inline-end: 1px solid var(--puck-color-grey-09);
2029
- margin-bottom: 8px;
2030
- margin-top: 8px;
2031
- }
2032
- ._ViewportControls-zoomSelect_e3unb_81 {
2033
- appearance: none;
2034
- background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
2035
- background-size: 10px;
2036
- background-position: calc(100% - 12px) calc(50% + 3px);
2037
- background-repeat: no-repeat;
2038
- border: 0;
2039
- font-size: var(--puck-font-size-xxxs);
2040
- padding: 0;
2041
- padding-left: 8px;
2042
- width: 96px;
2043
- }
2044
- ._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-zoom_e3unb_81 {
2045
- display: none;
2046
- }
2047
- @media (min-width: 638px) {
2048
- ._ViewportControls-zoom_e3unb_81,
2049
- ._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-zoom_e3unb_81 {
2050
- display: flex;
2051
- justify-content: center;
2052
- }
2053
- }
2054
- ._ViewportControls-zoomSelect_e3unb_81:dir(rtl) {
2055
- background-position: 12px calc(50% + 3px);
2056
- }
2057
- ._ViewportButton-inner_e3unb_111 {
2058
- align-items: center;
2059
- display: flex;
2060
- justify-content: center;
2061
- height: 32px;
2062
- width: 32px;
2063
- }
2064
- ._ViewportButton--isActive_e3unb_119 ._ViewportButton-inner_e3unb_111 {
2065
- color: var(--puck-color-azure-04);
2066
- }
2067
-
2068
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
2069
- ._PuckCanvas_t6s9b_1 {
2070
- background: var(--puck-color-grey-11);
2071
- display: flex;
2072
- grid-area: editor;
2073
- flex-direction: column;
2074
- padding: var(--puck-space-px);
2075
- position: relative;
2076
- overflow: auto;
2077
- }
2078
- @media (min-width: 1198px) {
2079
- ._PuckCanvas_t6s9b_1 {
2080
- padding: calc(var(--puck-space-px) * 1.5);
2081
- padding-top: calc(var(--puck-space-px) * 0.5);
2082
- }
2083
- ._PuckCanvas_t6s9b_1:not(._PuckCanvas_t6s9b_1:has(._PuckCanvas-controls_t6s9b_17)) {
2084
- padding-top: calc(var(--puck-space-px) * 1.5);
2085
- }
2086
- }
2087
- ._PuckCanvas--fullScreen_t6s9b_22 {
2088
- padding: 0;
2089
- overflow: hidden;
2090
- }
2091
- @media (min-width: 1198px) {
2092
- ._PuckCanvas--fullScreen_t6s9b_22 {
2093
- padding: 0;
2094
- }
2095
- }
2096
- ._PuckCanvas-inner_t6s9b_33 {
2097
- display: flex;
2098
- height: 100%;
2099
- justify-content: center;
2100
- min-width: 288px;
2101
- position: relative;
2102
- width: 100%;
2103
- }
2104
- ._PuckCanvas-root_t6s9b_42 {
2105
- background: white;
2106
- outline: 1px solid var(--puck-color-grey-09);
2107
- box-sizing: content-box;
2108
- min-width: 321px;
2109
- position: absolute;
2110
- pointer-events: none;
2111
- transform-origin: top;
2112
- top: 0;
2113
- bottom: 0;
2114
- opacity: 0;
2115
- }
2116
- @media (min-width: 1198px) {
2117
- ._PuckCanvas-root_t6s9b_42 {
2118
- min-width: unset;
2119
- }
2120
- }
2121
- @media (prefers-reduced-motion: reduce) {
2122
- ._PuckCanvas-root_t6s9b_42 {
2123
- transition: none !important;
2124
- }
2125
- }
2126
- ._PuckCanvas--ready_t6s9b_67 ._PuckCanvas-root_t6s9b_42 {
2127
- pointer-events: unset;
2128
- opacity: 1;
2129
- }
2130
- ._PuckCanvas-loader_t6s9b_72 {
2131
- align-items: center;
2132
- color: var(--puck-color-grey-06);
2133
- display: flex;
2134
- height: 100%;
2135
- justify-content: center;
2136
- transition: opacity 250ms ease-out;
2137
- opacity: 0;
2138
- }
2139
- ._PuckCanvas--showLoader_t6s9b_82 ._PuckCanvas-loader_t6s9b_72 {
2140
- opacity: 1;
2141
- }
2142
- ._PuckCanvas--showLoader_t6s9b_82._PuckCanvas--ready_t6s9b_67 ._PuckCanvas-loader_t6s9b_72 {
2143
- opacity: 0;
2144
- height: 0;
2145
- transition: none;
2146
- }
2147
- ._PuckCanvas-controls_t6s9b_17 {
2148
- padding-bottom: calc(var(--puck-space-px) * 0.5);
2149
- }
2150
- ._PuckCanvas--fullScreen_t6s9b_22 ._PuckCanvas-controls_t6s9b_17 {
2151
- padding-bottom: 0;
2152
- z-index: 1;
2153
- }
2154
-
2155
1919
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css/#css-module-data */
2156
1920
  @media (min-width: 766px) {
2157
1921
  ._ResizeHandle_144bf_2 {
@@ -2186,173 +1950,31 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
2186
1950
  }
2187
1951
 
2188
1952
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Sidebar/styles.module.css/#css-module-data */
2189
- ._Sidebar_o396p_1 {
2190
- border-block-start: 1px solid var(--puck-color-grey-09);
1953
+ ._Sidebar_1xksb_1 {
2191
1954
  position: relative;
2192
- display: none;
1955
+ display: flex;
2193
1956
  flex-direction: column;
2194
1957
  overflow-y: auto;
2195
1958
  }
2196
- ._Sidebar--isVisible_o396p_9 {
2197
- display: flex;
2198
- }
2199
- ._Sidebar--left_o396p_13 {
1959
+ ._Sidebar--left_1xksb_8 {
2200
1960
  background: var(--puck-color-grey-12);
1961
+ border-inline-end: 1px solid var(--puck-color-grey-09);
2201
1962
  grid-area: left;
2202
1963
  }
2203
- @media (min-width: 766px) {
2204
- ._Sidebar--left_o396p_13 {
2205
- border-block-start: 0;
2206
- border-inline-end: 1px solid var(--puck-color-grey-09);
2207
- }
2208
- }
2209
- ._Sidebar--right_o396p_25 {
1964
+ ._Sidebar--right_1xksb_14 {
2210
1965
  background: var(--puck-color-white);
1966
+ border-inline-start: 1px solid var(--puck-color-grey-09);
2211
1967
  grid-area: right;
2212
1968
  }
2213
- @media (min-width: 766px) {
2214
- ._Sidebar--right_o396p_25 {
2215
- border-block-start: 0;
2216
- border-inline-start: 1px solid var(--puck-color-grey-09);
2217
- }
2218
- }
2219
- ._Sidebar-resizeHandle_o396p_37 {
1969
+ ._Sidebar-resizeHandle_1xksb_20 {
2220
1970
  position: absolute;
2221
1971
  height: 100%;
2222
1972
  }
2223
- ._Sidebar--left_o396p_13 + ._Sidebar-resizeHandle_o396p_37 {
1973
+ ._Sidebar--left_1xksb_8 + ._Sidebar-resizeHandle_1xksb_20 {
2224
1974
  grid-area: left;
2225
1975
  justify-self: end;
2226
1976
  }
2227
- ._Sidebar--right_o396p_25 + ._Sidebar-resizeHandle_o396p_37 {
1977
+ ._Sidebar--right_1xksb_14 + ._Sidebar-resizeHandle_1xksb_20 {
2228
1978
  grid-area: right;
2229
1979
  justify-self: start;
2230
1980
  }
2231
-
2232
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Nav/styles.module.css/#css-module-data */
2233
- ._Nav_3nnxc_1 {
2234
- display: flex;
2235
- }
2236
- ._Nav-list_3nnxc_5 {
2237
- display: flex;
2238
- list-style: none;
2239
- margin: 0;
2240
- padding: 0;
2241
- overflow-x: auto;
2242
- gap: 8px;
2243
- }
2244
- @media (min-width: 638px) {
2245
- ._Nav-list_3nnxc_5 {
2246
- padding-top: 32px;
2247
- flex-direction: column;
2248
- gap: 16px;
2249
- width: 100%;
2250
- }
2251
- }
2252
- ._Nav-mobileActions_3nnxc_23 {
2253
- align-items: center;
2254
- display: flex;
2255
- justify-content: center;
2256
- margin-inline-start: auto;
2257
- padding: 4px 16px;
2258
- border-inline-start: 1px solid var(--puck-color-grey-09);
2259
- }
2260
- @media (min-width: 638px) {
2261
- ._Nav-mobileActions_3nnxc_23 {
2262
- display: none;
2263
- }
2264
- }
2265
- ._NavItem-link_3nnxc_38 {
2266
- align-items: center;
2267
- color: var(--puck-color-grey-03);
2268
- display: flex;
2269
- gap: 8px;
2270
- text-decoration: none;
2271
- cursor: pointer;
2272
- border-radius: 4px;
2273
- padding: 8px 4px;
2274
- width: 64px;
2275
- box-sizing: border-box;
2276
- }
2277
- @media (min-width: 638px) {
2278
- ._NavItem-link_3nnxc_38 {
2279
- width: auto;
2280
- }
2281
- }
2282
- ._NavItem_3nnxc_38:first-of-type {
2283
- padding-left: 16px;
2284
- }
2285
- ._NavItem_3nnxc_38:last-of-type {
2286
- padding-right: 16px;
2287
- }
2288
- @media (min-width: 638px) {
2289
- ._NavItem_3nnxc_38:first-of-type,
2290
- ._NavItem_3nnxc_38:last-of-type {
2291
- padding: 0;
2292
- }
2293
- }
2294
- ._NavItem-link_3nnxc_38 {
2295
- border-top: 4px solid transparent;
2296
- border-bottom: 4px solid transparent;
2297
- border-radius: 0;
2298
- flex-direction: column;
2299
- font-size: var(--puck-font-size-xxxs);
2300
- }
2301
- @media (min-width: 638px) {
2302
- ._NavItem-link_3nnxc_38 {
2303
- border: 0;
2304
- border-left: 4px solid transparent;
2305
- border-right: 4px solid transparent;
2306
- }
2307
- }
2308
- ._NavItem-linkIcon_3nnxc_88 {
2309
- height: 24px;
2310
- width: 24px;
2311
- }
2312
- ._NavItem--active_3nnxc_93 > ._NavItem-link_3nnxc_38 {
2313
- background-color: var(--puck-color-azure-10);
2314
- color: var(--puck-color-azure-04);
2315
- font-weight: 600;
2316
- }
2317
- ._NavItem--active_3nnxc_93 > ._NavItem-link_3nnxc_38 {
2318
- background-color: transparent;
2319
- border-top-color: var(--puck-color-azure-04);
2320
- border-top-right-radius: 0;
2321
- border-bottom-right-radius: 0;
2322
- font-weight: 600;
2323
- }
2324
- @media (min-width: 638px) {
2325
- ._NavItem--active_3nnxc_93 > ._NavItem-link_3nnxc_38 {
2326
- border-top-color: transparent;
2327
- border-right-color: var(--puck-color-azure-04);
2328
- }
2329
- }
2330
- ._NavItem_3nnxc_38:not(._NavItem--active_3nnxc_93) > ._NavItem-link_3nnxc_38:hover {
2331
- background-color: var(--puck-color-azure-11);
2332
- color: var(--puck-color-azure-04);
2333
- }
2334
- @media (min-width: 638px) {
2335
- ._NavItem--mobileOnly_3nnxc_120 {
2336
- display: none;
2337
- }
2338
- }
2339
-
2340
- /* css-module:/home/runner/work/puck/puck/packages/core/plugins/fields/styles.module.css/#css-module-data */
2341
- ._FieldsPlugin_nd930_1 {
2342
- background: white;
2343
- height: 100%;
2344
- overflow-y: auto;
2345
- }
2346
- ._FieldsPlugin-header_nd930_7 {
2347
- border-bottom: 1px solid var(--puck-color-grey-09);
2348
- font-weight: 600;
2349
- padding-bottom: 8px;
2350
- padding-left: 16px;
2351
- padding-right: 16px;
2352
- padding-top: 8px;
2353
- }
2354
- @media (min-width: 638px) {
2355
- ._FieldsPlugin-header_nd930_7 {
2356
- padding: 16px;
2357
- }
2358
- }