@measured/puck 0.20.0-canary.5780043 → 0.20.0-canary.5cc56415

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;
@@ -1150,27 +1152,31 @@ textarea._Input-input_py9hf_26 {
1150
1152
  }
1151
1153
 
1152
1154
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
1153
- ._DraggableComponent_qzbgx_1 {
1155
+ ._DraggableComponent_1vaqy_1 {
1154
1156
  position: absolute;
1155
1157
  pointer-events: none;
1156
1158
  --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1157
1159
  }
1158
- ._DraggableComponent-overlay_qzbgx_12 {
1159
- cursor: pointer;
1160
+ ._DraggableComponent-overlayWrapper_1vaqy_12 {
1160
1161
  height: 100%;
1161
1162
  width: 100%;
1162
1163
  top: 0;
1163
- outline: 2px var(--puck-color-azure-09) solid;
1164
- outline-offset: -2px;
1165
1164
  position: absolute;
1166
1165
  pointer-events: none;
1167
1166
  box-sizing: border-box;
1168
1167
  z-index: 1;
1169
1168
  }
1170
- ._DraggableComponent_qzbgx_1:focus-visible > ._DraggableComponent-overlay_qzbgx_12 {
1169
+ ._DraggableComponent-overlay_1vaqy_12 {
1170
+ cursor: pointer;
1171
+ height: 100%;
1172
+ outline: 2px var(--puck-color-azure-09) solid;
1173
+ outline-offset: -2px;
1174
+ width: 100%;
1175
+ }
1176
+ ._DraggableComponent_1vaqy_1:focus-visible > ._DraggableComponent-overlayWrapper_1vaqy_12 {
1171
1177
  outline: 1px solid var(--puck-color-azure-05);
1172
1178
  }
1173
- ._DraggableComponent-loadingOverlay_qzbgx_29 {
1179
+ ._DraggableComponent-loadingOverlay_1vaqy_34 {
1174
1180
  background: var(--puck-color-white);
1175
1181
  color: var(--puck-color-grey-03);
1176
1182
  border-radius: 4px;
@@ -1185,29 +1191,27 @@ textarea._Input-input_py9hf_26 {
1185
1191
  opacity: 0.8;
1186
1192
  z-index: 1;
1187
1193
  }
1188
- ._DraggableComponent--hover_qzbgx_45:not(._DraggableComponent--isLocked_qzbgx_45) > ._DraggableComponent-overlay_qzbgx_12 {
1194
+ ._DraggableComponent--hover_1vaqy_50 > ._DraggableComponent-overlayWrapper_1vaqy_12 > ._DraggableComponent-overlay_1vaqy_12 {
1189
1195
  background: var(--overlay-background);
1190
- }
1191
- ._DraggableComponent--hover_qzbgx_45 > ._DraggableComponent-overlay_qzbgx_12 {
1192
1196
  outline: 2px var(--puck-color-azure-09) solid;
1193
1197
  }
1194
- ._DraggableComponent--isSelected_qzbgx_54 > ._DraggableComponent-overlay_qzbgx_12 {
1198
+ ._DraggableComponent--isSelected_1vaqy_57 > ._DraggableComponent-overlayWrapper_1vaqy_12 > ._DraggableComponent-overlay_1vaqy_12 {
1195
1199
  outline-color: var(--puck-color-azure-07);
1196
1200
  }
1197
- ._DraggableComponent_qzbgx_1:has(._DraggableComponent--hover_qzbgx_45 > ._DraggableComponent-overlay_qzbgx_12) > ._DraggableComponent-overlay_qzbgx_12 {
1201
+ ._DraggableComponent_1vaqy_1:has(._DraggableComponent--hover_1vaqy_50 > ._DraggableComponent-overlayWrapper_1vaqy_12) > ._DraggableComponent-overlayWrapper_1vaqy_12 {
1198
1202
  display: none;
1199
1203
  }
1200
- ._DraggableComponent-actionsOverlay_qzbgx_66 {
1204
+ ._DraggableComponent-actionsOverlay_1vaqy_71 {
1201
1205
  position: sticky;
1202
1206
  opacity: 0;
1203
1207
  pointer-events: none;
1204
1208
  z-index: 2;
1205
1209
  }
1206
- ._DraggableComponent--isSelected_qzbgx_54 ._DraggableComponent-actionsOverlay_qzbgx_66 {
1210
+ ._DraggableComponent--isSelected_1vaqy_57 ._DraggableComponent-actionsOverlay_1vaqy_71 {
1207
1211
  opacity: 1;
1208
1212
  pointer-events: auto;
1209
1213
  }
1210
- ._DraggableComponent-actions_qzbgx_66 {
1214
+ ._DraggableComponent-actions_1vaqy_71 {
1211
1215
  position: absolute;
1212
1216
  width: auto;
1213
1217
  cursor: grab;
@@ -1307,180 +1311,31 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1307
1311
  opacity: 0 !important;
1308
1312
  }
1309
1313
 
1310
- /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1311
- ._SidebarSection_8boj8_1 {
1312
- display: flex;
1313
- position: relative;
1314
- flex-direction: column;
1315
- color: var(--puck-color-black);
1316
- }
1317
- ._SidebarSection_8boj8_1:last-of-type {
1318
- flex-grow: 1;
1319
- }
1320
- ._SidebarSection-title_8boj8_12 {
1321
- background: var(--puck-color-white);
1322
- padding: 16px;
1323
- border-bottom: 1px solid var(--puck-color-grey-09);
1324
- border-top: 1px solid var(--puck-color-grey-09);
1325
- overflow-x: auto;
1326
- }
1327
- ._SidebarSection--noBorderTop_8boj8_20 > ._SidebarSection-title_8boj8_12 {
1328
- border-top: 0px;
1329
- }
1330
- ._SidebarSection-content_8boj8_24 {
1331
- padding: 16px;
1332
- }
1333
- ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24 {
1334
- padding: 0px;
1335
- }
1336
- ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24:last-child {
1337
- padding-bottom: 4px;
1338
- }
1339
- ._SidebarSection_8boj8_1:last-of-type ._SidebarSection-content_8boj8_24 {
1340
- border-bottom: none;
1341
- flex-grow: 1;
1342
- }
1343
- ._SidebarSection-breadcrumbLabel_8boj8_41 {
1344
- background: none;
1345
- border: 0;
1346
- border-radius: 2px;
1347
- color: var(--puck-color-azure-04);
1348
- cursor: pointer;
1349
- font: inherit;
1350
- flex-shrink: 0;
1351
- padding: 0;
1352
- transition: color 50ms ease-in;
1314
+ /* lib/overlay-portal/styles.css */
1315
+ [data-puck-overlay-portal],
1316
+ [data-puck-overlay-portal] * {
1317
+ pointer-events: auto !important;
1353
1318
  }
1354
- ._SidebarSection-breadcrumbLabel_8boj8_41:focus-visible {
1355
- outline: 2px solid var(--puck-color-azure-05);
1319
+ [data-puck-overlay-portal]:hover {
1320
+ outline: 2px var(--puck-color-azure-09) dashed;
1356
1321
  outline-offset: 2px;
1357
1322
  }
1358
- @media (hover: hover) and (pointer: fine) {
1359
- ._SidebarSection-breadcrumbLabel_8boj8_41:hover {
1360
- color: var(--puck-color-azure-03);
1361
- transition: none;
1362
- }
1363
- }
1364
- ._SidebarSection-breadcrumbLabel_8boj8_41:active {
1365
- color: var(--puck-color-azure-02);
1366
- transition: none;
1367
- }
1368
- ._SidebarSection-breadcrumbs_8boj8_70 {
1369
- align-items: center;
1370
- display: flex;
1371
- gap: 4px;
1372
- }
1373
- ._SidebarSection-breadcrumb_8boj8_41 {
1374
- align-items: center;
1375
- display: flex;
1376
- gap: 4px;
1377
- }
1378
- ._SidebarSection-heading_8boj8_82 {
1379
- padding-inline-end: 16px;
1380
- }
1381
- ._SidebarSection-loadingOverlay_8boj8_86 {
1382
- background: var(--puck-color-white);
1383
- display: flex;
1384
- justify-content: center;
1385
- align-items: center;
1386
- height: 100%;
1387
- width: 100%;
1388
- top: 0;
1389
- position: absolute;
1390
- z-index: 1;
1391
- pointer-events: all;
1392
- box-sizing: border-box;
1393
- opacity: 0.8;
1323
+ [data-puck-overlay-portal]:focus-within {
1324
+ outline: 2px var(--puck-color-azure-07) solid;
1325
+ outline-offset: 2px;
1394
1326
  }
1395
1327
 
1396
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
1397
- ._Puck_dnlfp_19 {
1398
- --puck-space-px: 16px;
1399
- font-family: var(--puck-font-family);
1400
- overflow-x: hidden;
1401
- }
1402
- @media (min-width: 766px) {
1403
- ._Puck_dnlfp_19 {
1404
- overflow-x: auto;
1405
- }
1406
- }
1407
- ._Puck-portal_dnlfp_31 {
1408
- position: relative;
1409
- z-index: 2;
1410
- }
1411
- ._PuckLayout-inner_dnlfp_38 {
1412
- --puck-frame-width: auto;
1413
- --puck-side-bar-width: 0px;
1414
- display: grid;
1415
- grid-template-areas: "header header header" "left editor right";
1416
- grid-template-columns: 0 var(--puck-frame-width) 0;
1417
- grid-template-rows: min-content auto;
1418
- height: 100dvh;
1419
- position: relative;
1420
- z-index: 0;
1421
- }
1422
- ._PuckLayout--mounted_dnlfp_50 ._PuckLayout-inner_dnlfp_38 {
1423
- --puck-side-bar-width: 186px;
1424
- }
1425
- ._PuckLayout--leftSideBarVisible_dnlfp_54 ._PuckLayout-inner_dnlfp_38 {
1426
- grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
1427
- }
1428
- ._PuckLayout--rightSideBarVisible_dnlfp_60 ._PuckLayout-inner_dnlfp_38 {
1429
- grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
1430
- }
1431
- ._PuckLayout--leftSideBarVisible_dnlfp_54._PuckLayout--rightSideBarVisible_dnlfp_60 ._PuckLayout-inner_dnlfp_38 {
1432
- grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
1433
- }
1434
- @media (min-width: 458px) {
1435
- ._PuckLayout-mounted_dnlfp_74 ._PuckLayout-inner_dnlfp_38 {
1436
- --puck-frame-width: minmax(266px, auto);
1437
- }
1438
- }
1439
- @media (min-width: 638px) {
1440
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1441
- --puck-side-bar-width: minmax(186px, 250px);
1442
- }
1443
- }
1444
- @media (min-width: 766px) {
1445
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1446
- --puck-frame-width: auto;
1447
- }
1448
- }
1449
- @media (min-width: 990px) {
1450
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1451
- --puck-side-bar-width: 256px;
1452
- }
1453
- }
1454
- @media (min-width: 1198px) {
1455
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1456
- --puck-side-bar-width: 274px;
1457
- }
1458
- }
1459
- @media (min-width: 1398px) {
1460
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1461
- --puck-side-bar-width: 290px;
1462
- }
1463
- }
1464
- @media (min-width: 1598px) {
1465
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1466
- --puck-side-bar-width: 320px;
1467
- }
1328
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css/#css-module-data */
1329
+ ._InlineTextField_ilw2a_1 {
1330
+ cursor: text;
1331
+ display: inline-block;
1468
1332
  }
1469
- ._PuckLayout-leftSideBar_dnlfp_115 {
1470
- background: var(--puck-color-grey-12);
1471
- border-inline-end: 1px solid var(--puck-color-grey-09);
1472
- display: flex;
1473
- flex-direction: column;
1474
- grid-area: left;
1475
- overflow-y: auto;
1333
+ [data-dnd-dragging] ._InlineTextField_ilw2a_1 {
1334
+ cursor: none;
1335
+ caret-color: transparent;
1476
1336
  }
1477
- ._PuckLayout-rightSideBar_dnlfp_124 {
1478
- background: var(--puck-color-white);
1479
- border-inline-start: 1px solid var(--puck-color-grey-09);
1480
- display: flex;
1481
- flex-direction: column;
1482
- grid-area: right;
1483
- overflow-y: auto;
1337
+ [data-dnd-dragging] ._InlineTextField_ilw2a_1::selection {
1338
+ display: none;
1484
1339
  }
1485
1340
 
1486
1341
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
@@ -1688,111 +1543,85 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1688
1543
  margin-top: 4px;
1689
1544
  }
1690
1545
 
1691
- /* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
1692
- ._ViewportControls_gejzr_1 {
1693
- display: flex;
1694
- background: var(--puck-color-grey-11);
1695
- box-sizing: border-box;
1696
- border-inline-start: 2px solid var(--puck-color-grey-11);
1697
- justify-content: center;
1698
- gap: 8px;
1699
- min-width: 358px;
1700
- padding-bottom: 16px;
1701
- padding-inline-start: var(--puck-space-px);
1702
- padding-inline-end: var(--puck-space-px);
1703
- z-index: 1;
1546
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Layout/styles.module.css/#css-module-data */
1547
+ ._Puck_1qd4v_19 {
1548
+ --puck-space-px: 16px;
1549
+ font-family: var(--puck-font-family);
1550
+ overflow-x: hidden;
1704
1551
  }
1705
- ._ViewportControls-divider_gejzr_15 {
1706
- border-inline-end: 1px solid var(--puck-color-grey-09);
1707
- margin-inline-start: 8px;
1708
- margin-inline-end: 8px;
1552
+ @media (min-width: 766px) {
1553
+ ._Puck_1qd4v_19 {
1554
+ overflow-x: auto;
1555
+ }
1709
1556
  }
1710
- ._ViewportControls-zoomSelect_gejzr_21 {
1711
- appearance: none;
1712
- 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;
1713
- background-size: 10px;
1714
- background-position: calc(100% - 12px) calc(50% + 3px);
1715
- background-repeat: no-repeat;
1716
- border: 0;
1717
- font-size: var(--puck-font-size-xxxs);
1718
- padding: 0;
1719
- width: 96px;
1557
+ ._Puck-portal_1qd4v_31 {
1558
+ position: relative;
1559
+ z-index: 2;
1720
1560
  }
1721
- ._ViewportControls-zoomSelect_gejzr_21:dir(rtl) {
1722
- background-position: 12px calc(50% + 3px);
1561
+ ._PuckLayout-inner_1qd4v_36 {
1562
+ --puck-frame-width: auto;
1563
+ --puck-side-bar-width: 0px;
1564
+ display: grid;
1565
+ grid-template-areas: "header header header header" "sidenav left editor right";
1566
+ grid-template-columns: var(--puck-side-nav-width) 0 var(--puck-frame-width) 0;
1567
+ grid-template-rows: min-content auto;
1568
+ height: 100dvh;
1569
+ position: relative;
1570
+ z-index: 0;
1723
1571
  }
1724
- ._ViewportButton--isActive_gejzr_38 ._ViewportButton-inner_gejzr_38 {
1725
- color: var(--puck-color-azure-04);
1572
+ ._PuckLayout--mounted_1qd4v_48 ._PuckLayout-inner_1qd4v_36 {
1573
+ --puck-side-bar-width: 186px;
1574
+ --puck-left-side-bar-width: var( --puck-user-left-side-bar-width, --puck-side-bar-width );
1575
+ --puck-right-side-bar-width: var( --puck-user-right-side-bar-width, --puck-side-bar-width );
1576
+ --puck-side-nav-width: 68px;
1726
1577
  }
1727
-
1728
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
1729
- ._PuckCanvas_18jay_1 {
1730
- background: var(--puck-color-grey-11);
1731
- display: flex;
1732
- grid-area: editor;
1733
- flex-direction: column;
1734
- padding: var(--puck-space-px);
1735
- overflow: auto;
1578
+ ._PuckLayout--leftSideBarVisible_1qd4v_61 ._PuckLayout-inner_1qd4v_36 {
1579
+ grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) 0;
1736
1580
  }
1737
- @media (min-width: 1198px) {
1738
- ._PuckCanvas_18jay_1 {
1739
- padding: calc(var(--puck-space-px) * 1.5);
1740
- padding-top: var(--puck-space-px);
1741
- }
1742
- ._PuckCanvas_18jay_1:not(._PuckCanvas_18jay_1:has(._PuckCanvas-controls_18jay_16)) {
1743
- padding-top: calc(var(--puck-space-px) * 1.5);
1744
- }
1581
+ ._PuckLayout--rightSideBarVisible_1qd4v_69 ._PuckLayout-inner_1qd4v_36 {
1582
+ grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
1745
1583
  }
1746
- ._PuckCanvas-inner_18jay_21 {
1747
- display: flex;
1748
- height: 100%;
1749
- justify-content: center;
1750
- min-width: 358px;
1751
- position: relative;
1752
- width: 100%;
1584
+ ._PuckLayout--leftSideBarVisible_1qd4v_61._PuckLayout--rightSideBarVisible_1qd4v_69 ._PuckLayout-inner_1qd4v_36 {
1585
+ grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) var(--puck-right-side-bar-width);
1753
1586
  }
1754
- ._PuckCanvas-root_18jay_30 {
1755
- background: white;
1756
- border: 1px solid var(--puck-color-grey-09);
1757
- box-sizing: content-box;
1758
- min-width: 321px;
1759
- position: absolute;
1760
- pointer-events: none;
1761
- transform-origin: top;
1762
- top: 0;
1763
- bottom: 0;
1764
- opacity: 0;
1587
+ @media (min-width: 458px) {
1588
+ ._PuckLayout-mounted_1qd4v_85 ._PuckLayout-inner_1qd4v_36 {
1589
+ --puck-frame-width: minmax(266px, auto);
1590
+ }
1765
1591
  }
1766
- @media (min-width: 1198px) {
1767
- ._PuckCanvas-root_18jay_30 {
1768
- min-width: unset;
1592
+ @media (min-width: 638px) {
1593
+ ._PuckLayout_1qd4v_36 ._PuckLayout-inner_1qd4v_36 {
1594
+ --puck-side-bar-width: minmax(186px, 250px);
1769
1595
  }
1770
1596
  }
1771
- @media (prefers-reduced-motion: reduce) {
1772
- ._PuckCanvas-root_18jay_30 {
1773
- transition: none !important;
1597
+ @media (min-width: 766px) {
1598
+ ._PuckLayout_1qd4v_36 ._PuckLayout-inner_1qd4v_36 {
1599
+ --puck-frame-width: auto;
1774
1600
  }
1775
1601
  }
1776
- ._PuckCanvas--ready_18jay_55 ._PuckCanvas-root_18jay_30 {
1777
- pointer-events: unset;
1778
- opacity: 1;
1602
+ @media (min-width: 990px) {
1603
+ ._PuckLayout_1qd4v_36 ._PuckLayout-inner_1qd4v_36 {
1604
+ --puck-side-bar-width: 256px;
1605
+ }
1779
1606
  }
1780
- ._PuckCanvas-loader_18jay_60 {
1781
- align-items: center;
1782
- color: var(--puck-color-grey-06);
1783
- display: flex;
1784
- height: 100%;
1785
- justify-content: center;
1786
- transition: opacity 250ms ease-out;
1787
- opacity: 0;
1607
+ @media (min-width: 1198px) {
1608
+ ._PuckLayout_1qd4v_36 ._PuckLayout-inner_1qd4v_36 {
1609
+ --puck-side-bar-width: 274px;
1610
+ }
1788
1611
  }
1789
- ._PuckCanvas--showLoader_18jay_70 ._PuckCanvas-loader_18jay_60 {
1790
- opacity: 1;
1612
+ @media (min-width: 1398px) {
1613
+ ._PuckLayout_1qd4v_36 ._PuckLayout-inner_1qd4v_36 {
1614
+ --puck-side-bar-width: 290px;
1615
+ }
1791
1616
  }
1792
- ._PuckCanvas--showLoader_18jay_70._PuckCanvas--ready_18jay_55 ._PuckCanvas-loader_18jay_60 {
1793
- opacity: 0;
1794
- height: 0;
1795
- transition: none;
1617
+ @media (min-width: 1598px) {
1618
+ ._PuckLayout_1qd4v_36 ._PuckLayout-inner_1qd4v_36 {
1619
+ --puck-side-bar-width: 320px;
1620
+ }
1621
+ }
1622
+ ._PuckLayout-nav_1qd4v_126 {
1623
+ border-right: 1px solid var(--puck-color-grey-09);
1624
+ background-color: var(--puck-color-grey-12);
1796
1625
  }
1797
1626
 
1798
1627
  /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
@@ -1840,7 +1669,7 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1840
1669
  }
1841
1670
 
1842
1671
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css/#css-module-data */
1843
- ._PuckHeader_15xnq_1 {
1672
+ ._PuckHeader_1ehbp_1 {
1844
1673
  background: var(--puck-color-white);
1845
1674
  border-bottom: 1px solid var(--puck-color-grey-09);
1846
1675
  color: var(--puck-color-black);
@@ -1848,8 +1677,14 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1848
1677
  position: relative;
1849
1678
  max-width: 100vw;
1850
1679
  }
1851
- ._PuckHeader-inner_15xnq_10 {
1680
+ @media (min-width: 638px) {
1681
+ ._PuckHeader_1ehbp_1 {
1682
+ padding-left: 67px;
1683
+ }
1684
+ }
1685
+ ._PuckHeader-inner_1ehbp_16 {
1852
1686
  align-items: end;
1687
+ border-left: 1px solid var(--puck-color-grey-09);
1853
1688
  display: grid;
1854
1689
  gap: var(--puck-space-px);
1855
1690
  grid-template-areas: "left middle right";
@@ -1857,39 +1692,390 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1857
1692
  grid-template-rows: auto;
1858
1693
  padding: var(--puck-space-px);
1859
1694
  }
1860
- ._PuckHeader-toggle_15xnq_20 {
1695
+ @media (min-width: 638px) {
1696
+ ._PuckHeader-inner_1ehbp_16 {
1697
+ border-left: 1px solid var(--puck-color-grey-09);
1698
+ }
1699
+ }
1700
+ ._PuckHeader-toggle_1ehbp_33 {
1861
1701
  color: var(--puck-color-grey-05);
1862
1702
  display: flex;
1863
1703
  margin-inline-start: -4px;
1864
1704
  padding-top: 2px;
1865
1705
  }
1866
- ._PuckHeader--rightSideBarVisible_15xnq_27 ._PuckHeader-rightSideBarToggle_15xnq_27,
1867
- ._PuckHeader--leftSideBarVisible_15xnq_28 ._PuckHeader-leftSideBarToggle_15xnq_28 {
1706
+ ._PuckHeader--rightSideBarVisible_1ehbp_40 ._PuckHeader-rightSideBarToggle_1ehbp_40,
1707
+ ._PuckHeader--leftSideBarVisible_1ehbp_41 ._PuckHeader-leftSideBarToggle_1ehbp_41 {
1868
1708
  color: var(--puck-color-black);
1869
1709
  }
1870
- ._PuckHeader-title_15xnq_32 {
1710
+ ._PuckHeader-title_1ehbp_45 {
1871
1711
  align-self: center;
1872
1712
  }
1873
- ._PuckHeader-path_15xnq_36 {
1713
+ ._PuckHeader-path_1ehbp_49 {
1874
1714
  font-family: var(--puck-font-family-monospaced);
1875
1715
  font-size: var(--puck-font-size-xxs);
1876
1716
  font-weight: normal;
1877
1717
  word-break: break-all;
1878
1718
  }
1879
- ._PuckHeader-tools_15xnq_43 {
1719
+ ._PuckHeader-tools_1ehbp_56 {
1880
1720
  display: flex;
1881
1721
  gap: 16px;
1882
1722
  justify-content: flex-end;
1883
1723
  }
1884
- ._PuckHeader-menuButton_15xnq_49 {
1724
+ ._PuckHeader-menuButton_1ehbp_62 {
1885
1725
  color: var(--puck-color-grey-05);
1886
1726
  margin-inline-start: -4px;
1887
1727
  }
1888
- ._PuckHeader--menuOpen_15xnq_54 ._PuckHeader-menuButton_15xnq_49 {
1728
+ ._PuckHeader--menuOpen_1ehbp_67 ._PuckHeader-menuButton_1ehbp_62 {
1889
1729
  color: var(--puck-color-black);
1890
1730
  }
1891
1731
  @media (min-width: 638px) {
1892
- ._PuckHeader-menuButton_15xnq_49 {
1732
+ ._PuckHeader-menuButton_1ehbp_62 {
1893
1733
  display: none;
1894
1734
  }
1895
1735
  }
1736
+
1737
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1738
+ ._SidebarSection_8boj8_1 {
1739
+ display: flex;
1740
+ position: relative;
1741
+ flex-direction: column;
1742
+ color: var(--puck-color-black);
1743
+ }
1744
+ ._SidebarSection_8boj8_1:last-of-type {
1745
+ flex-grow: 1;
1746
+ }
1747
+ ._SidebarSection-title_8boj8_12 {
1748
+ background: var(--puck-color-white);
1749
+ padding: 16px;
1750
+ border-bottom: 1px solid var(--puck-color-grey-09);
1751
+ border-top: 1px solid var(--puck-color-grey-09);
1752
+ overflow-x: auto;
1753
+ }
1754
+ ._SidebarSection--noBorderTop_8boj8_20 > ._SidebarSection-title_8boj8_12 {
1755
+ border-top: 0px;
1756
+ }
1757
+ ._SidebarSection-content_8boj8_24 {
1758
+ padding: 16px;
1759
+ }
1760
+ ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24 {
1761
+ padding: 0px;
1762
+ }
1763
+ ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24:last-child {
1764
+ padding-bottom: 4px;
1765
+ }
1766
+ ._SidebarSection_8boj8_1:last-of-type ._SidebarSection-content_8boj8_24 {
1767
+ border-bottom: none;
1768
+ flex-grow: 1;
1769
+ }
1770
+ ._SidebarSection-breadcrumbLabel_8boj8_41 {
1771
+ background: none;
1772
+ border: 0;
1773
+ border-radius: 2px;
1774
+ color: var(--puck-color-azure-04);
1775
+ cursor: pointer;
1776
+ font: inherit;
1777
+ flex-shrink: 0;
1778
+ padding: 0;
1779
+ transition: color 50ms ease-in;
1780
+ }
1781
+ ._SidebarSection-breadcrumbLabel_8boj8_41:focus-visible {
1782
+ outline: 2px solid var(--puck-color-azure-05);
1783
+ outline-offset: 2px;
1784
+ }
1785
+ @media (hover: hover) and (pointer: fine) {
1786
+ ._SidebarSection-breadcrumbLabel_8boj8_41:hover {
1787
+ color: var(--puck-color-azure-03);
1788
+ transition: none;
1789
+ }
1790
+ }
1791
+ ._SidebarSection-breadcrumbLabel_8boj8_41:active {
1792
+ color: var(--puck-color-azure-02);
1793
+ transition: none;
1794
+ }
1795
+ ._SidebarSection-breadcrumbs_8boj8_70 {
1796
+ align-items: center;
1797
+ display: flex;
1798
+ gap: 4px;
1799
+ }
1800
+ ._SidebarSection-breadcrumb_8boj8_41 {
1801
+ align-items: center;
1802
+ display: flex;
1803
+ gap: 4px;
1804
+ }
1805
+ ._SidebarSection-heading_8boj8_82 {
1806
+ padding-inline-end: 16px;
1807
+ }
1808
+ ._SidebarSection-loadingOverlay_8boj8_86 {
1809
+ background: var(--puck-color-white);
1810
+ display: flex;
1811
+ justify-content: center;
1812
+ align-items: center;
1813
+ height: 100%;
1814
+ width: 100%;
1815
+ top: 0;
1816
+ position: absolute;
1817
+ z-index: 1;
1818
+ pointer-events: all;
1819
+ box-sizing: border-box;
1820
+ opacity: 0.8;
1821
+ }
1822
+
1823
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
1824
+ ._ViewportControls_gejzr_1 {
1825
+ display: flex;
1826
+ background: var(--puck-color-grey-11);
1827
+ box-sizing: border-box;
1828
+ border-inline-start: 2px solid var(--puck-color-grey-11);
1829
+ justify-content: center;
1830
+ gap: 8px;
1831
+ min-width: 358px;
1832
+ padding-bottom: 16px;
1833
+ padding-inline-start: var(--puck-space-px);
1834
+ padding-inline-end: var(--puck-space-px);
1835
+ z-index: 1;
1836
+ }
1837
+ ._ViewportControls-divider_gejzr_15 {
1838
+ border-inline-end: 1px solid var(--puck-color-grey-09);
1839
+ margin-inline-start: 8px;
1840
+ margin-inline-end: 8px;
1841
+ }
1842
+ ._ViewportControls-zoomSelect_gejzr_21 {
1843
+ appearance: none;
1844
+ 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;
1845
+ background-size: 10px;
1846
+ background-position: calc(100% - 12px) calc(50% + 3px);
1847
+ background-repeat: no-repeat;
1848
+ border: 0;
1849
+ font-size: var(--puck-font-size-xxxs);
1850
+ padding: 0;
1851
+ width: 96px;
1852
+ }
1853
+ ._ViewportControls-zoomSelect_gejzr_21:dir(rtl) {
1854
+ background-position: 12px calc(50% + 3px);
1855
+ }
1856
+ ._ViewportButton--isActive_gejzr_38 ._ViewportButton-inner_gejzr_38 {
1857
+ color: var(--puck-color-azure-04);
1858
+ }
1859
+
1860
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
1861
+ ._PuckCanvas_18jay_1 {
1862
+ background: var(--puck-color-grey-11);
1863
+ display: flex;
1864
+ grid-area: editor;
1865
+ flex-direction: column;
1866
+ padding: var(--puck-space-px);
1867
+ overflow: auto;
1868
+ }
1869
+ @media (min-width: 1198px) {
1870
+ ._PuckCanvas_18jay_1 {
1871
+ padding: calc(var(--puck-space-px) * 1.5);
1872
+ padding-top: var(--puck-space-px);
1873
+ }
1874
+ ._PuckCanvas_18jay_1:not(._PuckCanvas_18jay_1:has(._PuckCanvas-controls_18jay_16)) {
1875
+ padding-top: calc(var(--puck-space-px) * 1.5);
1876
+ }
1877
+ }
1878
+ ._PuckCanvas-inner_18jay_21 {
1879
+ display: flex;
1880
+ height: 100%;
1881
+ justify-content: center;
1882
+ min-width: 358px;
1883
+ position: relative;
1884
+ width: 100%;
1885
+ }
1886
+ ._PuckCanvas-root_18jay_30 {
1887
+ background: white;
1888
+ border: 1px solid var(--puck-color-grey-09);
1889
+ box-sizing: content-box;
1890
+ min-width: 321px;
1891
+ position: absolute;
1892
+ pointer-events: none;
1893
+ transform-origin: top;
1894
+ top: 0;
1895
+ bottom: 0;
1896
+ opacity: 0;
1897
+ }
1898
+ @media (min-width: 1198px) {
1899
+ ._PuckCanvas-root_18jay_30 {
1900
+ min-width: unset;
1901
+ }
1902
+ }
1903
+ @media (prefers-reduced-motion: reduce) {
1904
+ ._PuckCanvas-root_18jay_30 {
1905
+ transition: none !important;
1906
+ }
1907
+ }
1908
+ ._PuckCanvas--ready_18jay_55 ._PuckCanvas-root_18jay_30 {
1909
+ pointer-events: unset;
1910
+ opacity: 1;
1911
+ }
1912
+ ._PuckCanvas-loader_18jay_60 {
1913
+ align-items: center;
1914
+ color: var(--puck-color-grey-06);
1915
+ display: flex;
1916
+ height: 100%;
1917
+ justify-content: center;
1918
+ transition: opacity 250ms ease-out;
1919
+ opacity: 0;
1920
+ }
1921
+ ._PuckCanvas--showLoader_18jay_70 ._PuckCanvas-loader_18jay_60 {
1922
+ opacity: 1;
1923
+ }
1924
+ ._PuckCanvas--showLoader_18jay_70._PuckCanvas--ready_18jay_55 ._PuckCanvas-loader_18jay_60 {
1925
+ opacity: 0;
1926
+ height: 0;
1927
+ transition: none;
1928
+ }
1929
+
1930
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css/#css-module-data */
1931
+ ._ResizeHandle_v7w0r_1 {
1932
+ position: absolute;
1933
+ width: 5px;
1934
+ height: 100%;
1935
+ cursor: col-resize;
1936
+ z-index: 10;
1937
+ background: transparent;
1938
+ top: 0;
1939
+ }
1940
+ ._ResizeHandle_v7w0r_1:hover {
1941
+ background: rgba(0, 0, 0, 0.1);
1942
+ }
1943
+ ._ResizeHandle--left_v7w0r_15 {
1944
+ right: -3px;
1945
+ }
1946
+ ._ResizeHandle--right_v7w0r_19 {
1947
+ left: -3px;
1948
+ }
1949
+
1950
+ /* components/Puck/components/ResizeHandle/styles.css */
1951
+ [data-resize-overlay] {
1952
+ position: fixed;
1953
+ top: 0;
1954
+ left: 0;
1955
+ right: 0;
1956
+ bottom: 0;
1957
+ z-index: 9999;
1958
+ cursor: col-resize;
1959
+ }
1960
+
1961
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Sidebar/styles.module.css/#css-module-data */
1962
+ ._Sidebar_2pzs4_1 {
1963
+ position: relative;
1964
+ display: flex;
1965
+ flex-direction: column;
1966
+ overflow-y: auto;
1967
+ }
1968
+ ._Sidebar--left_2pzs4_8 {
1969
+ background: var(--puck-color-grey-12);
1970
+ border-inline-end: 1px solid var(--puck-color-grey-09);
1971
+ grid-area: left;
1972
+ padding: 16px;
1973
+ }
1974
+ ._Sidebar--right_2pzs4_15 {
1975
+ background: var(--puck-color-white);
1976
+ border-inline-start: 1px solid var(--puck-color-grey-09);
1977
+ grid-area: right;
1978
+ }
1979
+ ._Sidebar-resizeHandle_2pzs4_21 {
1980
+ position: absolute;
1981
+ height: 100%;
1982
+ }
1983
+ ._Sidebar--left_2pzs4_8 + ._Sidebar-resizeHandle_2pzs4_21 {
1984
+ grid-area: left;
1985
+ justify-self: end;
1986
+ }
1987
+ ._Sidebar--right_2pzs4_15 + ._Sidebar-resizeHandle_2pzs4_21 {
1988
+ grid-area: right;
1989
+ justify-self: start;
1990
+ }
1991
+
1992
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Nav/styles.module.css/#css-module-data */
1993
+ ._Nav-list_b6txo_1 {
1994
+ list-style: none;
1995
+ margin: 0;
1996
+ padding: 0;
1997
+ }
1998
+ ._NavSection_b6txo_7 {
1999
+ padding: 16px;
2000
+ }
2001
+ ._NavSection_b6txo_7:first-of-type {
2002
+ padding-top: 32px;
2003
+ }
2004
+ ._Nav--slim_b6txo_15 ._NavSection_b6txo_7 {
2005
+ padding-left: 0;
2006
+ padding-right: 0;
2007
+ }
2008
+ ._Nav--slim_b6txo_15 ._NavSection_b6txo_7 + ._NavSection_b6txo_7 {
2009
+ border-top: 1px solid var(--puck-color-grey-09);
2010
+ }
2011
+ ._NavSection-list_b6txo_24 {
2012
+ display: flex;
2013
+ flex-direction: column;
2014
+ list-style: none;
2015
+ margin: 0;
2016
+ padding: 0;
2017
+ }
2018
+ ._Nav--slim_b6txo_15 ._NavSection-list_b6txo_24 {
2019
+ gap: 16px;
2020
+ }
2021
+ ._NavSection-title_b6txo_36 {
2022
+ font-weight: 700;
2023
+ margin-bottom: 8px;
2024
+ padding-left: 8px;
2025
+ padding-right: 8px;
2026
+ }
2027
+ ._Nav--slim_b6txo_15 ._NavSection-title_b6txo_36 {
2028
+ opacity: 0;
2029
+ }
2030
+ ._NavItem-link_b6txo_47 {
2031
+ align-items: center;
2032
+ color: var(--puck-color-grey-03);
2033
+ display: flex;
2034
+ gap: 8px;
2035
+ text-decoration: none;
2036
+ cursor: pointer;
2037
+ border-radius: 4px;
2038
+ padding: 8px 4px;
2039
+ }
2040
+ ._Nav--slim_b6txo_15 ._NavItem-link_b6txo_47 {
2041
+ border-left: 4px solid transparent;
2042
+ border-right: 4px solid transparent;
2043
+ border-radius: 0;
2044
+ flex-direction: column;
2045
+ font-size: var(--puck-font-size-xxxs);
2046
+ }
2047
+ ._NavItem-linkIcon_b6txo_67 {
2048
+ height: 24px;
2049
+ width: 24px;
2050
+ }
2051
+ ._NavItem--active_b6txo_72 > ._NavItem-link_b6txo_47 {
2052
+ background-color: var(--puck-color-azure-10);
2053
+ color: var(--puck-color-azure-04);
2054
+ font-weight: 600;
2055
+ }
2056
+ ._Nav--slim_b6txo_15 ._NavItem--active_b6txo_72 > ._NavItem-link_b6txo_47 {
2057
+ background-color: transparent;
2058
+ border-right-color: var(--puck-color-azure-04);
2059
+ border-top-right-radius: 0;
2060
+ border-bottom-right-radius: 0;
2061
+ font-weight: 600;
2062
+ }
2063
+ ._NavItem_b6txo_47:not(._NavItem--active_b6txo_72) > ._NavItem-link_b6txo_47:hover {
2064
+ background-color: var(--puck-color-azure-11);
2065
+ color: var(--puck-color-azure-04);
2066
+ }
2067
+ ._NavItem-list_b6txo_91 {
2068
+ border-left: 1px solid var(--puck-color-grey-09);
2069
+ display: flex;
2070
+ flex-direction: column;
2071
+ list-style: none;
2072
+ margin-top: 8px;
2073
+ margin-left: 4px;
2074
+ padding: 0;
2075
+ padding-left: 8px;
2076
+ }
2077
+ ._Nav--slim_b6txo_15 ._NavItem-list_b6txo_91 {
2078
+ border-left: 0;
2079
+ padding-left: 0;
2080
+ margin-left: 0;
2081
+ }