@measured/puck 0.20.0-canary.755737e8 → 0.20.0-canary.88a4251d

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.
package/dist/index.css CHANGED
@@ -134,7 +134,7 @@
134
134
  }
135
135
  }
136
136
 
137
- /* styles.css */
137
+ /* bundle/core.css */
138
138
  #frame-root {
139
139
  height: 1px;
140
140
  min-height: 100vh;
@@ -144,6 +144,8 @@
144
144
  z-index: 0;
145
145
  }
146
146
 
147
+ /* bundle/index.css */
148
+
147
149
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */
148
150
  ._ActionBar_rvadt_1 {
149
151
  align-items: center;
@@ -1307,6 +1309,166 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1307
1309
  opacity: 0 !important;
1308
1310
  }
1309
1311
 
1312
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1313
+ ._SidebarSection_8boj8_1 {
1314
+ display: flex;
1315
+ position: relative;
1316
+ flex-direction: column;
1317
+ color: var(--puck-color-black);
1318
+ }
1319
+ ._SidebarSection_8boj8_1:last-of-type {
1320
+ flex-grow: 1;
1321
+ }
1322
+ ._SidebarSection-title_8boj8_12 {
1323
+ background: var(--puck-color-white);
1324
+ padding: 16px;
1325
+ border-bottom: 1px solid var(--puck-color-grey-09);
1326
+ border-top: 1px solid var(--puck-color-grey-09);
1327
+ overflow-x: auto;
1328
+ }
1329
+ ._SidebarSection--noBorderTop_8boj8_20 > ._SidebarSection-title_8boj8_12 {
1330
+ border-top: 0px;
1331
+ }
1332
+ ._SidebarSection-content_8boj8_24 {
1333
+ padding: 16px;
1334
+ }
1335
+ ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24 {
1336
+ padding: 0px;
1337
+ }
1338
+ ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24:last-child {
1339
+ padding-bottom: 4px;
1340
+ }
1341
+ ._SidebarSection_8boj8_1:last-of-type ._SidebarSection-content_8boj8_24 {
1342
+ border-bottom: none;
1343
+ flex-grow: 1;
1344
+ }
1345
+ ._SidebarSection-breadcrumbLabel_8boj8_41 {
1346
+ background: none;
1347
+ border: 0;
1348
+ border-radius: 2px;
1349
+ color: var(--puck-color-azure-04);
1350
+ cursor: pointer;
1351
+ font: inherit;
1352
+ flex-shrink: 0;
1353
+ padding: 0;
1354
+ transition: color 50ms ease-in;
1355
+ }
1356
+ ._SidebarSection-breadcrumbLabel_8boj8_41:focus-visible {
1357
+ outline: 2px solid var(--puck-color-azure-05);
1358
+ outline-offset: 2px;
1359
+ }
1360
+ @media (hover: hover) and (pointer: fine) {
1361
+ ._SidebarSection-breadcrumbLabel_8boj8_41:hover {
1362
+ color: var(--puck-color-azure-03);
1363
+ transition: none;
1364
+ }
1365
+ }
1366
+ ._SidebarSection-breadcrumbLabel_8boj8_41:active {
1367
+ color: var(--puck-color-azure-02);
1368
+ transition: none;
1369
+ }
1370
+ ._SidebarSection-breadcrumbs_8boj8_70 {
1371
+ align-items: center;
1372
+ display: flex;
1373
+ gap: 4px;
1374
+ }
1375
+ ._SidebarSection-breadcrumb_8boj8_41 {
1376
+ align-items: center;
1377
+ display: flex;
1378
+ gap: 4px;
1379
+ }
1380
+ ._SidebarSection-heading_8boj8_82 {
1381
+ padding-inline-end: 16px;
1382
+ }
1383
+ ._SidebarSection-loadingOverlay_8boj8_86 {
1384
+ background: var(--puck-color-white);
1385
+ display: flex;
1386
+ justify-content: center;
1387
+ align-items: center;
1388
+ height: 100%;
1389
+ width: 100%;
1390
+ top: 0;
1391
+ position: absolute;
1392
+ z-index: 1;
1393
+ pointer-events: all;
1394
+ box-sizing: border-box;
1395
+ opacity: 0.8;
1396
+ }
1397
+
1398
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
1399
+ ._Puck_vnhjy_19 {
1400
+ --puck-space-px: 16px;
1401
+ font-family: var(--puck-font-family);
1402
+ overflow-x: hidden;
1403
+ }
1404
+ @media (min-width: 766px) {
1405
+ ._Puck_vnhjy_19 {
1406
+ overflow-x: auto;
1407
+ }
1408
+ }
1409
+ ._Puck-portal_vnhjy_31 {
1410
+ position: relative;
1411
+ z-index: 2;
1412
+ }
1413
+ ._PuckLayout-inner_vnhjy_38 {
1414
+ --puck-frame-width: auto;
1415
+ --puck-side-bar-width: 0px;
1416
+ display: grid;
1417
+ grid-template-areas: "header header header" "left editor right";
1418
+ grid-template-columns: 0 var(--puck-frame-width) 0;
1419
+ grid-template-rows: min-content auto;
1420
+ height: 100dvh;
1421
+ position: relative;
1422
+ z-index: 0;
1423
+ }
1424
+ ._PuckLayout--mounted_vnhjy_50 ._PuckLayout-inner_vnhjy_38 {
1425
+ --puck-side-bar-width: 186px;
1426
+ }
1427
+ ._PuckLayout--leftSideBarVisible_vnhjy_54 ._PuckLayout-inner_vnhjy_38 {
1428
+ grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
1429
+ }
1430
+ ._PuckLayout--rightSideBarVisible_vnhjy_60 ._PuckLayout-inner_vnhjy_38 {
1431
+ grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
1432
+ }
1433
+ ._PuckLayout--leftSideBarVisible_vnhjy_54._PuckLayout--rightSideBarVisible_vnhjy_60 ._PuckLayout-inner_vnhjy_38 {
1434
+ grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
1435
+ }
1436
+ @media (min-width: 458px) {
1437
+ ._PuckLayout-mounted_vnhjy_74 ._PuckLayout-inner_vnhjy_38 {
1438
+ --puck-frame-width: minmax(266px, auto);
1439
+ }
1440
+ }
1441
+ @media (min-width: 638px) {
1442
+ ._PuckLayout_vnhjy_38 ._PuckLayout-inner_vnhjy_38 {
1443
+ --puck-side-bar-width: minmax(186px, 250px);
1444
+ }
1445
+ }
1446
+ @media (min-width: 766px) {
1447
+ ._PuckLayout_vnhjy_38 ._PuckLayout-inner_vnhjy_38 {
1448
+ --puck-frame-width: auto;
1449
+ }
1450
+ }
1451
+ @media (min-width: 990px) {
1452
+ ._PuckLayout_vnhjy_38 ._PuckLayout-inner_vnhjy_38 {
1453
+ --puck-side-bar-width: 256px;
1454
+ }
1455
+ }
1456
+ @media (min-width: 1198px) {
1457
+ ._PuckLayout_vnhjy_38 ._PuckLayout-inner_vnhjy_38 {
1458
+ --puck-side-bar-width: 274px;
1459
+ }
1460
+ }
1461
+ @media (min-width: 1398px) {
1462
+ ._PuckLayout_vnhjy_38 ._PuckLayout-inner_vnhjy_38 {
1463
+ --puck-side-bar-width: 290px;
1464
+ }
1465
+ }
1466
+ @media (min-width: 1598px) {
1467
+ ._PuckLayout_vnhjy_38 ._PuckLayout-inner_vnhjy_38 {
1468
+ --puck-side-bar-width: 320px;
1469
+ }
1470
+ }
1471
+
1310
1472
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
1311
1473
  ._PuckFields_10bh7_1 {
1312
1474
  position: relative;
@@ -1512,100 +1674,111 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1512
1674
  margin-top: 4px;
1513
1675
  }
1514
1676
 
1515
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Layout/styles.module.css/#css-module-data */
1516
- ._Puck_n6ob8_19 {
1517
- --puck-space-px: 16px;
1518
- font-family: var(--puck-font-family);
1519
- overflow-x: hidden;
1520
- }
1521
- @media (min-width: 766px) {
1522
- ._Puck_n6ob8_19 {
1523
- overflow-x: auto;
1524
- }
1525
- }
1526
- ._Puck-portal_n6ob8_31 {
1527
- position: relative;
1528
- z-index: 2;
1677
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
1678
+ ._ViewportControls_gejzr_1 {
1679
+ display: flex;
1680
+ background: var(--puck-color-grey-11);
1681
+ box-sizing: border-box;
1682
+ border-inline-start: 2px solid var(--puck-color-grey-11);
1683
+ justify-content: center;
1684
+ gap: 8px;
1685
+ min-width: 358px;
1686
+ padding-bottom: 16px;
1687
+ padding-inline-start: var(--puck-space-px);
1688
+ padding-inline-end: var(--puck-space-px);
1689
+ z-index: 1;
1529
1690
  }
1530
- ._PuckLayout-inner_n6ob8_36 {
1531
- --puck-frame-width: auto;
1532
- --puck-side-bar-width: 0px;
1533
- display: grid;
1534
- grid-template-areas: "header header header header" "sidenav left editor right";
1535
- grid-template-columns: var(--puck-side-nav-width) 0 var(--puck-frame-width) 0;
1536
- grid-template-rows: min-content auto;
1537
- height: 100dvh;
1538
- position: relative;
1539
- z-index: 0;
1691
+ ._ViewportControls-divider_gejzr_15 {
1692
+ border-inline-end: 1px solid var(--puck-color-grey-09);
1693
+ margin-inline-start: 8px;
1694
+ margin-inline-end: 8px;
1540
1695
  }
1541
- ._PuckLayout--mounted_n6ob8_48 ._PuckLayout-inner_n6ob8_36 {
1542
- --puck-side-bar-width: 186px;
1543
- --puck-side-nav-width: 68px;
1696
+ ._ViewportControls-zoomSelect_gejzr_21 {
1697
+ appearance: none;
1698
+ 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;
1699
+ background-size: 10px;
1700
+ background-position: calc(100% - 12px) calc(50% + 3px);
1701
+ background-repeat: no-repeat;
1702
+ border: 0;
1703
+ font-size: var(--puck-font-size-xxxs);
1704
+ padding: 0;
1705
+ width: 96px;
1544
1706
  }
1545
- ._PuckLayout--leftSideBarVisible_n6ob8_53 ._PuckLayout-inner_n6ob8_36 {
1546
- grid-template-columns: var(--puck-side-nav-width) var(--puck-side-bar-width) var( --puck-frame-width ) 0;
1707
+ ._ViewportControls-zoomSelect_gejzr_21:dir(rtl) {
1708
+ background-position: 12px calc(50% + 3px);
1547
1709
  }
1548
- ._PuckLayout--rightSideBarVisible_n6ob8_61 ._PuckLayout-inner_n6ob8_36 {
1549
- grid-template-columns: var(--puck-side-nav-width) 0 var(--puck-frame-width) var(--puck-side-bar-width);
1710
+ ._ViewportButton--isActive_gejzr_38 ._ViewportButton-inner_gejzr_38 {
1711
+ color: var(--puck-color-azure-04);
1550
1712
  }
1551
- ._PuckLayout--leftSideBarVisible_n6ob8_53._PuckLayout--rightSideBarVisible_n6ob8_61 ._PuckLayout-inner_n6ob8_36 {
1552
- grid-template-columns: var(--puck-side-nav-width) var(--puck-side-bar-width) var( --puck-frame-width ) var(--puck-side-bar-width);
1713
+
1714
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
1715
+ ._PuckCanvas_18jay_1 {
1716
+ background: var(--puck-color-grey-11);
1717
+ display: flex;
1718
+ grid-area: editor;
1719
+ flex-direction: column;
1720
+ padding: var(--puck-space-px);
1721
+ overflow: auto;
1553
1722
  }
1554
- @media (min-width: 458px) {
1555
- ._PuckLayout-mounted_n6ob8_77 ._PuckLayout-inner_n6ob8_36 {
1556
- --puck-frame-width: minmax(266px, auto);
1723
+ @media (min-width: 1198px) {
1724
+ ._PuckCanvas_18jay_1 {
1725
+ padding: calc(var(--puck-space-px) * 1.5);
1726
+ padding-top: var(--puck-space-px);
1557
1727
  }
1558
- }
1559
- @media (min-width: 638px) {
1560
- ._PuckLayout_n6ob8_36 ._PuckLayout-inner_n6ob8_36 {
1561
- --puck-side-bar-width: minmax(186px, 250px);
1728
+ ._PuckCanvas_18jay_1:not(._PuckCanvas_18jay_1:has(._PuckCanvas-controls_18jay_16)) {
1729
+ padding-top: calc(var(--puck-space-px) * 1.5);
1562
1730
  }
1563
1731
  }
1564
- @media (min-width: 766px) {
1565
- ._PuckLayout_n6ob8_36 ._PuckLayout-inner_n6ob8_36 {
1566
- --puck-frame-width: auto;
1567
- }
1732
+ ._PuckCanvas-inner_18jay_21 {
1733
+ display: flex;
1734
+ height: 100%;
1735
+ justify-content: center;
1736
+ min-width: 358px;
1737
+ position: relative;
1738
+ width: 100%;
1568
1739
  }
1569
- @media (min-width: 990px) {
1570
- ._PuckLayout_n6ob8_36 ._PuckLayout-inner_n6ob8_36 {
1571
- --puck-side-bar-width: 256px;
1572
- }
1740
+ ._PuckCanvas-root_18jay_30 {
1741
+ background: white;
1742
+ border: 1px solid var(--puck-color-grey-09);
1743
+ box-sizing: content-box;
1744
+ min-width: 321px;
1745
+ position: absolute;
1746
+ pointer-events: none;
1747
+ transform-origin: top;
1748
+ top: 0;
1749
+ bottom: 0;
1750
+ opacity: 0;
1573
1751
  }
1574
1752
  @media (min-width: 1198px) {
1575
- ._PuckLayout_n6ob8_36 ._PuckLayout-inner_n6ob8_36 {
1576
- --puck-side-bar-width: 274px;
1753
+ ._PuckCanvas-root_18jay_30 {
1754
+ min-width: unset;
1577
1755
  }
1578
1756
  }
1579
- @media (min-width: 1398px) {
1580
- ._PuckLayout_n6ob8_36 ._PuckLayout-inner_n6ob8_36 {
1581
- --puck-side-bar-width: 290px;
1757
+ @media (prefers-reduced-motion: reduce) {
1758
+ ._PuckCanvas-root_18jay_30 {
1759
+ transition: none !important;
1582
1760
  }
1583
1761
  }
1584
- @media (min-width: 1598px) {
1585
- ._PuckLayout_n6ob8_36 ._PuckLayout-inner_n6ob8_36 {
1586
- --puck-side-bar-width: 320px;
1587
- }
1762
+ ._PuckCanvas--ready_18jay_55 ._PuckCanvas-root_18jay_30 {
1763
+ pointer-events: unset;
1764
+ opacity: 1;
1588
1765
  }
1589
- ._PuckLayout-leftSideBar_n6ob8_118 {
1590
- background: var(--puck-color-grey-12);
1591
- border-inline-end: 1px solid var(--puck-color-grey-09);
1766
+ ._PuckCanvas-loader_18jay_60 {
1767
+ align-items: center;
1768
+ color: var(--puck-color-grey-06);
1592
1769
  display: flex;
1593
- flex-direction: column;
1594
- grid-area: left;
1595
- padding: 16px;
1596
- overflow-y: auto;
1770
+ height: 100%;
1771
+ justify-content: center;
1772
+ transition: opacity 250ms ease-out;
1773
+ opacity: 0;
1597
1774
  }
1598
- ._PuckLayout-rightSideBar_n6ob8_128 {
1599
- background: var(--puck-color-white);
1600
- border-inline-start: 1px solid var(--puck-color-grey-09);
1601
- display: flex;
1602
- flex-direction: column;
1603
- grid-area: right;
1604
- overflow-y: auto;
1775
+ ._PuckCanvas--showLoader_18jay_70 ._PuckCanvas-loader_18jay_60 {
1776
+ opacity: 1;
1605
1777
  }
1606
- ._PuckLayout-nav_n6ob8_137 {
1607
- border-right: 1px solid var(--puck-color-grey-09);
1608
- background-color: var(--puck-color-grey-12);
1778
+ ._PuckCanvas--showLoader_18jay_70._PuckCanvas--ready_18jay_55 ._PuckCanvas-loader_18jay_60 {
1779
+ opacity: 0;
1780
+ height: 0;
1781
+ transition: none;
1609
1782
  }
1610
1783
 
1611
1784
  /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
@@ -1653,7 +1826,7 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1653
1826
  }
1654
1827
 
1655
1828
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css/#css-module-data */
1656
- ._PuckHeader_dlc6d_1 {
1829
+ ._PuckHeader_15xnq_1 {
1657
1830
  background: var(--puck-color-white);
1658
1831
  border-bottom: 1px solid var(--puck-color-grey-09);
1659
1832
  color: var(--puck-color-black);
@@ -1661,343 +1834,109 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1661
1834
  position: relative;
1662
1835
  max-width: 100vw;
1663
1836
  }
1664
- @media (min-width: 638px) {
1665
- ._PuckHeader_dlc6d_1 {
1666
- padding-left: 67px;
1667
- }
1668
- }
1669
- ._PuckHeader-inner_dlc6d_16 {
1837
+ ._PuckHeader-inner_15xnq_10 {
1670
1838
  align-items: end;
1671
1839
  display: grid;
1672
1840
  gap: var(--puck-space-px);
1673
1841
  grid-template-areas: "left middle right";
1674
1842
  grid-template-columns: 1fr auto 1fr;
1675
1843
  grid-template-rows: auto;
1676
- border-left: 1px solid var(--puck-color-grey-09);
1677
1844
  padding: var(--puck-space-px);
1678
1845
  }
1679
- @media (min-width: 638px) {
1680
- ._PuckHeader-inner_dlc6d_16 {
1681
- border-left: 1px solid var(--puck-color-grey-09);
1682
- }
1683
- }
1684
- ._PuckHeader-toggle_dlc6d_33 {
1846
+ ._PuckHeader-toggle_15xnq_20 {
1685
1847
  color: var(--puck-color-grey-05);
1686
1848
  display: flex;
1687
1849
  margin-inline-start: -4px;
1688
1850
  padding-top: 2px;
1689
1851
  }
1690
- ._PuckHeader--rightSideBarVisible_dlc6d_40 ._PuckHeader-rightSideBarToggle_dlc6d_40,
1691
- ._PuckHeader--leftSideBarVisible_dlc6d_41 ._PuckHeader-leftSideBarToggle_dlc6d_41 {
1852
+ ._PuckHeader--rightSideBarVisible_15xnq_27 ._PuckHeader-rightSideBarToggle_15xnq_27,
1853
+ ._PuckHeader--leftSideBarVisible_15xnq_28 ._PuckHeader-leftSideBarToggle_15xnq_28 {
1692
1854
  color: var(--puck-color-black);
1693
1855
  }
1694
- ._PuckHeader-title_dlc6d_45 {
1856
+ ._PuckHeader-title_15xnq_32 {
1695
1857
  align-self: center;
1696
1858
  }
1697
- ._PuckHeader-path_dlc6d_49 {
1859
+ ._PuckHeader-path_15xnq_36 {
1698
1860
  font-family: var(--puck-font-family-monospaced);
1699
1861
  font-size: var(--puck-font-size-xxs);
1700
1862
  font-weight: normal;
1701
1863
  word-break: break-all;
1702
1864
  }
1703
- ._PuckHeader-tools_dlc6d_56 {
1865
+ ._PuckHeader-tools_15xnq_43 {
1704
1866
  display: flex;
1705
1867
  gap: 16px;
1706
1868
  justify-content: flex-end;
1707
1869
  }
1708
- ._PuckHeader-menuButton_dlc6d_62 {
1870
+ ._PuckHeader-menuButton_15xnq_49 {
1709
1871
  color: var(--puck-color-grey-05);
1710
1872
  margin-inline-start: -4px;
1711
1873
  }
1712
- ._PuckHeader--menuOpen_dlc6d_67 ._PuckHeader-menuButton_dlc6d_62 {
1874
+ ._PuckHeader--menuOpen_15xnq_54 ._PuckHeader-menuButton_15xnq_49 {
1713
1875
  color: var(--puck-color-black);
1714
1876
  }
1715
1877
  @media (min-width: 638px) {
1716
- ._PuckHeader-menuButton_dlc6d_62 {
1878
+ ._PuckHeader-menuButton_15xnq_49 {
1717
1879
  display: none;
1718
1880
  }
1719
1881
  }
1720
1882
 
1721
- /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1722
- ._SidebarSection_8boj8_1 {
1723
- display: flex;
1724
- position: relative;
1725
- flex-direction: column;
1726
- color: var(--puck-color-black);
1727
- }
1728
- ._SidebarSection_8boj8_1:last-of-type {
1729
- flex-grow: 1;
1730
- }
1731
- ._SidebarSection-title_8boj8_12 {
1732
- background: var(--puck-color-white);
1733
- padding: 16px;
1734
- border-bottom: 1px solid var(--puck-color-grey-09);
1735
- border-top: 1px solid var(--puck-color-grey-09);
1736
- overflow-x: auto;
1737
- }
1738
- ._SidebarSection--noBorderTop_8boj8_20 > ._SidebarSection-title_8boj8_12 {
1739
- border-top: 0px;
1740
- }
1741
- ._SidebarSection-content_8boj8_24 {
1742
- padding: 16px;
1743
- }
1744
- ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24 {
1745
- padding: 0px;
1746
- }
1747
- ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24:last-child {
1748
- padding-bottom: 4px;
1749
- }
1750
- ._SidebarSection_8boj8_1:last-of-type ._SidebarSection-content_8boj8_24 {
1751
- border-bottom: none;
1752
- flex-grow: 1;
1753
- }
1754
- ._SidebarSection-breadcrumbLabel_8boj8_41 {
1755
- background: none;
1756
- border: 0;
1757
- border-radius: 2px;
1758
- color: var(--puck-color-azure-04);
1759
- cursor: pointer;
1760
- font: inherit;
1761
- flex-shrink: 0;
1762
- padding: 0;
1763
- transition: color 50ms ease-in;
1764
- }
1765
- ._SidebarSection-breadcrumbLabel_8boj8_41:focus-visible {
1766
- outline: 2px solid var(--puck-color-azure-05);
1767
- outline-offset: 2px;
1768
- }
1769
- @media (hover: hover) and (pointer: fine) {
1770
- ._SidebarSection-breadcrumbLabel_8boj8_41:hover {
1771
- color: var(--puck-color-azure-03);
1772
- transition: none;
1773
- }
1774
- }
1775
- ._SidebarSection-breadcrumbLabel_8boj8_41:active {
1776
- color: var(--puck-color-azure-02);
1777
- transition: none;
1778
- }
1779
- ._SidebarSection-breadcrumbs_8boj8_70 {
1780
- align-items: center;
1781
- display: flex;
1782
- gap: 4px;
1783
- }
1784
- ._SidebarSection-breadcrumb_8boj8_41 {
1785
- align-items: center;
1786
- display: flex;
1787
- gap: 4px;
1788
- }
1789
- ._SidebarSection-heading_8boj8_82 {
1790
- padding-inline-end: 16px;
1791
- }
1792
- ._SidebarSection-loadingOverlay_8boj8_86 {
1793
- background: var(--puck-color-white);
1794
- display: flex;
1795
- justify-content: center;
1796
- align-items: center;
1883
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css/#css-module-data */
1884
+ ._ResizeHandle_v7w0r_1 {
1885
+ position: absolute;
1886
+ width: 5px;
1797
1887
  height: 100%;
1798
- width: 100%;
1888
+ cursor: col-resize;
1889
+ z-index: 10;
1890
+ background: transparent;
1799
1891
  top: 0;
1800
- position: absolute;
1801
- z-index: 1;
1802
- pointer-events: all;
1803
- box-sizing: border-box;
1804
- opacity: 0.8;
1805
1892
  }
1806
-
1807
- /* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
1808
- ._ViewportControls_gejzr_1 {
1809
- display: flex;
1810
- background: var(--puck-color-grey-11);
1811
- box-sizing: border-box;
1812
- border-inline-start: 2px solid var(--puck-color-grey-11);
1813
- justify-content: center;
1814
- gap: 8px;
1815
- min-width: 358px;
1816
- padding-bottom: 16px;
1817
- padding-inline-start: var(--puck-space-px);
1818
- padding-inline-end: var(--puck-space-px);
1819
- z-index: 1;
1820
- }
1821
- ._ViewportControls-divider_gejzr_15 {
1822
- border-inline-end: 1px solid var(--puck-color-grey-09);
1823
- margin-inline-start: 8px;
1824
- margin-inline-end: 8px;
1825
- }
1826
- ._ViewportControls-zoomSelect_gejzr_21 {
1827
- appearance: none;
1828
- 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;
1829
- background-size: 10px;
1830
- background-position: calc(100% - 12px) calc(50% + 3px);
1831
- background-repeat: no-repeat;
1832
- border: 0;
1833
- font-size: var(--puck-font-size-xxxs);
1834
- padding: 0;
1835
- width: 96px;
1893
+ ._ResizeHandle_v7w0r_1:hover {
1894
+ background: rgba(0, 0, 0, 0.1);
1836
1895
  }
1837
- ._ViewportControls-zoomSelect_gejzr_21:dir(rtl) {
1838
- background-position: 12px calc(50% + 3px);
1896
+ ._ResizeHandle--left_v7w0r_15 {
1897
+ right: -3px;
1839
1898
  }
1840
- ._ViewportButton--isActive_gejzr_38 ._ViewportButton-inner_gejzr_38 {
1841
- color: var(--puck-color-azure-04);
1899
+ ._ResizeHandle--right_v7w0r_19 {
1900
+ left: -3px;
1842
1901
  }
1843
1902
 
1844
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
1845
- ._PuckCanvas_18jay_1 {
1846
- background: var(--puck-color-grey-11);
1847
- display: flex;
1848
- grid-area: editor;
1849
- flex-direction: column;
1850
- padding: var(--puck-space-px);
1851
- overflow: auto;
1852
- }
1853
- @media (min-width: 1198px) {
1854
- ._PuckCanvas_18jay_1 {
1855
- padding: calc(var(--puck-space-px) * 1.5);
1856
- padding-top: var(--puck-space-px);
1857
- }
1858
- ._PuckCanvas_18jay_1:not(._PuckCanvas_18jay_1:has(._PuckCanvas-controls_18jay_16)) {
1859
- padding-top: calc(var(--puck-space-px) * 1.5);
1860
- }
1861
- }
1862
- ._PuckCanvas-inner_18jay_21 {
1863
- display: flex;
1864
- height: 100%;
1865
- justify-content: center;
1866
- min-width: 358px;
1867
- position: relative;
1868
- width: 100%;
1869
- }
1870
- ._PuckCanvas-root_18jay_30 {
1871
- background: white;
1872
- border: 1px solid var(--puck-color-grey-09);
1873
- box-sizing: content-box;
1874
- min-width: 321px;
1875
- position: absolute;
1876
- pointer-events: none;
1877
- transform-origin: top;
1903
+ /* components/Puck/components/ResizeHandle/styles.css */
1904
+ [data-resize-overlay] {
1905
+ position: fixed;
1878
1906
  top: 0;
1907
+ left: 0;
1908
+ right: 0;
1879
1909
  bottom: 0;
1880
- opacity: 0;
1881
- }
1882
- @media (min-width: 1198px) {
1883
- ._PuckCanvas-root_18jay_30 {
1884
- min-width: unset;
1885
- }
1886
- }
1887
- @media (prefers-reduced-motion: reduce) {
1888
- ._PuckCanvas-root_18jay_30 {
1889
- transition: none !important;
1890
- }
1891
- }
1892
- ._PuckCanvas--ready_18jay_55 ._PuckCanvas-root_18jay_30 {
1893
- pointer-events: unset;
1894
- opacity: 1;
1895
- }
1896
- ._PuckCanvas-loader_18jay_60 {
1897
- align-items: center;
1898
- color: var(--puck-color-grey-06);
1899
- display: flex;
1900
- height: 100%;
1901
- justify-content: center;
1902
- transition: opacity 250ms ease-out;
1903
- opacity: 0;
1904
- }
1905
- ._PuckCanvas--showLoader_18jay_70 ._PuckCanvas-loader_18jay_60 {
1906
- opacity: 1;
1907
- }
1908
- ._PuckCanvas--showLoader_18jay_70._PuckCanvas--ready_18jay_55 ._PuckCanvas-loader_18jay_60 {
1909
- opacity: 0;
1910
- height: 0;
1911
- transition: none;
1910
+ z-index: 9999;
1911
+ cursor: col-resize;
1912
1912
  }
1913
1913
 
1914
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Nav/styles.module.css/#css-module-data */
1915
- ._Nav-list_b6txo_1 {
1916
- list-style: none;
1917
- margin: 0;
1918
- padding: 0;
1919
- }
1920
- ._NavSection_b6txo_7 {
1921
- padding: 16px;
1922
- }
1923
- ._NavSection_b6txo_7:first-of-type {
1924
- padding-top: 32px;
1925
- }
1926
- ._Nav--slim_b6txo_15 ._NavSection_b6txo_7 {
1927
- padding-left: 0;
1928
- padding-right: 0;
1929
- }
1930
- ._Nav--slim_b6txo_15 ._NavSection_b6txo_7 + ._NavSection_b6txo_7 {
1931
- border-top: 1px solid var(--puck-color-grey-09);
1932
- }
1933
- ._NavSection-list_b6txo_24 {
1914
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Sidebar/styles.module.css/#css-module-data */
1915
+ ._Sidebar_1xksb_1 {
1916
+ position: relative;
1934
1917
  display: flex;
1935
1918
  flex-direction: column;
1936
- list-style: none;
1937
- margin: 0;
1938
- padding: 0;
1939
- }
1940
- ._Nav--slim_b6txo_15 ._NavSection-list_b6txo_24 {
1941
- gap: 16px;
1942
- }
1943
- ._NavSection-title_b6txo_36 {
1944
- font-weight: 700;
1945
- margin-bottom: 8px;
1946
- padding-left: 8px;
1947
- padding-right: 8px;
1948
- }
1949
- ._Nav--slim_b6txo_15 ._NavSection-title_b6txo_36 {
1950
- opacity: 0;
1951
- }
1952
- ._NavItem-link_b6txo_47 {
1953
- align-items: center;
1954
- color: var(--puck-color-grey-03);
1955
- display: flex;
1956
- gap: 8px;
1957
- text-decoration: none;
1958
- cursor: pointer;
1959
- border-radius: 4px;
1960
- padding: 8px 4px;
1961
- }
1962
- ._Nav--slim_b6txo_15 ._NavItem-link_b6txo_47 {
1963
- border-left: 4px solid transparent;
1964
- border-right: 4px solid transparent;
1965
- border-radius: 0;
1966
- flex-direction: column;
1967
- font-size: var(--puck-font-size-xxxs);
1968
- }
1969
- ._NavItem-linkIcon_b6txo_67 {
1970
- height: 24px;
1971
- width: 24px;
1919
+ overflow-y: auto;
1972
1920
  }
1973
- ._NavItem--active_b6txo_72 > ._NavItem-link_b6txo_47 {
1974
- background-color: var(--puck-color-azure-10);
1975
- color: var(--puck-color-azure-04);
1976
- font-weight: 600;
1921
+ ._Sidebar--left_1xksb_8 {
1922
+ background: var(--puck-color-grey-12);
1923
+ border-inline-end: 1px solid var(--puck-color-grey-09);
1924
+ grid-area: left;
1977
1925
  }
1978
- ._Nav--slim_b6txo_15 ._NavItem--active_b6txo_72 > ._NavItem-link_b6txo_47 {
1979
- background-color: transparent;
1980
- border-right-color: var(--puck-color-azure-04);
1981
- border-top-right-radius: 0;
1982
- border-bottom-right-radius: 0;
1983
- font-weight: 600;
1926
+ ._Sidebar--right_1xksb_14 {
1927
+ background: var(--puck-color-white);
1928
+ border-inline-start: 1px solid var(--puck-color-grey-09);
1929
+ grid-area: right;
1984
1930
  }
1985
- ._NavItem_b6txo_47:not(._NavItem--active_b6txo_72) > ._NavItem-link_b6txo_47:hover {
1986
- background-color: var(--puck-color-azure-11);
1987
- color: var(--puck-color-azure-04);
1931
+ ._Sidebar-resizeHandle_1xksb_20 {
1932
+ position: absolute;
1933
+ height: 100%;
1988
1934
  }
1989
- ._NavItem-list_b6txo_91 {
1990
- border-left: 1px solid var(--puck-color-grey-09);
1991
- display: flex;
1992
- flex-direction: column;
1993
- list-style: none;
1994
- margin-top: 8px;
1995
- margin-left: 4px;
1996
- padding: 0;
1997
- padding-left: 8px;
1935
+ ._Sidebar--left_1xksb_8 + ._Sidebar-resizeHandle_1xksb_20 {
1936
+ grid-area: left;
1937
+ justify-self: end;
1998
1938
  }
1999
- ._Nav--slim_b6txo_15 ._NavItem-list_b6txo_91 {
2000
- border-left: 0;
2001
- padding-left: 0;
2002
- margin-left: 0;
1939
+ ._Sidebar--right_1xksb_14 + ._Sidebar-resizeHandle_1xksb_20 {
1940
+ grid-area: right;
1941
+ justify-self: start;
2003
1942
  }