@puckeditor/core 0.21.3 → 0.22.0-canary.08eaa6ba

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.
Files changed (41) hide show
  1. package/README.md +1 -4
  2. package/dist/{Editor-MCVDFQH6.mjs → Editor-K6FPIMNH.mjs} +8 -8
  3. package/dist/{actions-C3e2nJ9v.d.mts → actions-Csn3gOP8.d.mts} +3 -1
  4. package/dist/{actions-C3e2nJ9v.d.ts → actions-Csn3gOP8.d.ts} +3 -1
  5. package/dist/{chunk-DPDJ67KA.mjs → chunk-4X2SLJRQ.mjs} +1 -1
  6. package/dist/{chunk-4HOGLOEA.mjs → chunk-6MO3E35Y.mjs} +5 -3
  7. package/dist/{chunk-X2ZFWNCU.mjs → chunk-CO6PRTVM.mjs} +12 -9
  8. package/dist/{chunk-6XCJ3Y7O.mjs → chunk-DVZWVU66.mjs} +55 -2
  9. package/dist/{chunk-TDQEUXB2.mjs → chunk-FE7T3PZI.mjs} +3 -3
  10. package/dist/{chunk-ZMTK7SMX.mjs → chunk-GFIZBMKN.mjs} +1 -1
  11. package/dist/{chunk-LODTL5KW.mjs → chunk-MQKADUDK.mjs} +1 -1
  12. package/dist/{chunk-YXFTA2VL.mjs → chunk-MYHXN3XX.mjs} +3131 -319
  13. package/dist/{chunk-HGJWUFLT.mjs → chunk-NWL4JLKR.mjs} +7 -7
  14. package/dist/{chunk-O7FT3KAM.mjs → chunk-OVPTKQ2P.mjs} +4 -3
  15. package/dist/{full-5QCBHXRC.mjs → full-L4ITHDQO.mjs} +7 -7
  16. package/dist/{index-Cx46WIFC.d.ts → index-B1b1cFug.d.ts} +1 -1
  17. package/dist/{index-zHrchQGY.d.mts → index-ClzBCbx_.d.mts} +1 -1
  18. package/dist/index.css +60 -54
  19. package/dist/index.d.mts +4 -4
  20. package/dist/index.d.ts +4 -4
  21. package/dist/index.js +3206 -326
  22. package/dist/index.mjs +10 -10
  23. package/dist/internal.d.mts +2 -2
  24. package/dist/internal.d.ts +2 -2
  25. package/dist/internal.js +48 -2
  26. package/dist/internal.mjs +1 -1
  27. package/dist/{loaded-Y4ZWZC55.mjs → loaded-2QS7VXZ6.mjs} +4 -4
  28. package/dist/{loaded-OMRIYZIQ.mjs → loaded-A7UUCT2O.mjs} +4 -4
  29. package/dist/{loaded-54625GTL.mjs → loaded-JHBS3QYA.mjs} +4 -4
  30. package/dist/no-external.css +60 -54
  31. package/dist/no-external.d.mts +3 -3
  32. package/dist/no-external.d.ts +3 -3
  33. package/dist/no-external.js +3206 -326
  34. package/dist/no-external.mjs +10 -10
  35. package/dist/rsc.d.mts +2 -2
  36. package/dist/rsc.d.ts +2 -2
  37. package/dist/rsc.js +16 -11
  38. package/dist/rsc.mjs +2 -2
  39. package/dist/{walk-tree-BJoNgZ0l.d.mts → walk-tree-BrW9VQ_t.d.mts} +1 -1
  40. package/dist/{walk-tree-f8Yzs5o3.d.ts → walk-tree-CWrsBHHe.d.ts} +1 -1
  41. package/package.json +13 -5
package/dist/index.js CHANGED
@@ -160,26 +160,26 @@ var init_get_class_name_factory = __esm({
160
160
  "use strict";
161
161
  init_react_import();
162
162
  import_classnames = __toESM(require_classnames());
163
- getClassNameFactory = (rootClass, styles2, config = { baseClass: "" }) => (options = {}) => {
163
+ getClassNameFactory = (rootClass, styles, config = { baseClass: "" }) => (options = {}) => {
164
164
  if (typeof options === "string") {
165
165
  const descendant = options;
166
- const style = styles2[`${rootClass}-${descendant}`];
166
+ const style = styles[`${rootClass}-${descendant}`];
167
167
  if (style) {
168
- return config.baseClass + styles2[`${rootClass}-${descendant}`] || "";
168
+ return config.baseClass + styles[`${rootClass}-${descendant}`] || "";
169
169
  }
170
170
  return "";
171
171
  } else if (typeof options === "object") {
172
172
  const modifiers = options;
173
173
  const prefixedModifiers = {};
174
174
  for (let modifier in modifiers) {
175
- prefixedModifiers[styles2[`${rootClass}--${modifier}`]] = modifiers[modifier];
175
+ prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers[modifier];
176
176
  }
177
- const c = styles2[rootClass];
177
+ const c = styles[rootClass];
178
178
  return config.baseClass + (0, import_classnames.default)(__spreadValues({
179
179
  [c]: !!c
180
180
  }, prefixedModifiers));
181
181
  } else {
182
- return config.baseClass + styles2[rootClass] || "";
182
+ return config.baseClass + styles[rootClass] || "";
183
183
  }
184
184
  };
185
185
  get_class_name_factory_default = getClassNameFactory;
@@ -1828,14 +1828,84 @@ var init_insert = __esm({
1828
1828
  }
1829
1829
  });
1830
1830
 
1831
+ // lib/uuid/rng.ts
1832
+ function rng() {
1833
+ return crypto.getRandomValues(rnds8);
1834
+ }
1835
+ var rnds8;
1836
+ var init_rng = __esm({
1837
+ "lib/uuid/rng.ts"() {
1838
+ "use strict";
1839
+ init_react_import();
1840
+ rnds8 = new Uint8Array(16);
1841
+ }
1842
+ });
1843
+
1844
+ // lib/uuid/stringify.ts
1845
+ function unsafeStringify(arr, offset = 0) {
1846
+ return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
1847
+ }
1848
+ var byteToHex;
1849
+ var init_stringify = __esm({
1850
+ "lib/uuid/stringify.ts"() {
1851
+ "use strict";
1852
+ init_react_import();
1853
+ byteToHex = [];
1854
+ for (let i = 0; i < 256; ++i) {
1855
+ byteToHex.push((i + 256).toString(16).slice(1));
1856
+ }
1857
+ }
1858
+ });
1859
+
1860
+ // lib/uuid/index.ts
1861
+ function v4(options, buf, offset) {
1862
+ if (!buf && !options && crypto.randomUUID) {
1863
+ return crypto.randomUUID();
1864
+ }
1865
+ return _v4(options, buf, offset);
1866
+ }
1867
+ function _v4(options, buf, offset) {
1868
+ var _a, _b, _c;
1869
+ options = options || {};
1870
+ const rnds = (_c = (_b = options.random) != null ? _b : (_a = options.rng) == null ? void 0 : _a.call(options)) != null ? _c : rng();
1871
+ if (rnds.length < 16) {
1872
+ throw new Error("Random bytes length must be >= 16");
1873
+ }
1874
+ rnds[6] = rnds[6] & 15 | 64;
1875
+ rnds[8] = rnds[8] & 63 | 128;
1876
+ if (buf) {
1877
+ offset = offset || 0;
1878
+ if (offset < 0 || offset + 16 > buf.length) {
1879
+ throw new RangeError(
1880
+ `UUID byte range ${offset}:${offset + 15} is out of buffer bounds`
1881
+ );
1882
+ }
1883
+ for (let i = 0; i < 16; ++i) {
1884
+ buf[offset + i] = rnds[i];
1885
+ }
1886
+ return buf;
1887
+ }
1888
+ return unsafeStringify(rnds);
1889
+ }
1890
+ var uuid_default;
1891
+ var init_uuid = __esm({
1892
+ "lib/uuid/index.ts"() {
1893
+ "use strict";
1894
+ init_react_import();
1895
+ init_rng();
1896
+ init_stringify();
1897
+ uuid_default = v4;
1898
+ }
1899
+ });
1900
+
1831
1901
  // lib/generate-id.ts
1832
- var import_uuid, generateId;
1902
+ var generateId;
1833
1903
  var init_generate_id = __esm({
1834
1904
  "lib/generate-id.ts"() {
1835
1905
  "use strict";
1836
1906
  init_react_import();
1837
- import_uuid = require("uuid");
1838
- generateId = (type) => type ? `${type}-${(0, import_uuid.v4)()}` : (0, import_uuid.v4)();
1907
+ init_uuid();
1908
+ generateId = (type) => type ? `${type}-${uuid_default()}` : uuid_default();
1839
1909
  }
1840
1910
  });
1841
1911
 
@@ -3128,7 +3198,7 @@ var init_resolve_component_data = __esm({
3128
3198
  init_get_changed();
3129
3199
  import_fast_equals2 = require("fast-equals");
3130
3200
  cache = { lastChange: {} };
3131
- resolveComponentData = (_0, _1, ..._2) => __async(null, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace", parent = null) {
3201
+ resolveComponentData = (_0, _1, ..._2) => __async(null, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace", parent = null, root = { props: {} }) {
3132
3202
  const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
3133
3203
  const resolvedItem = __spreadValues({}, item);
3134
3204
  const shouldRunResolver = (configForItem == null ? void 0 : configForItem.resolveData) && item.props;
@@ -3155,7 +3225,8 @@ var init_resolve_component_data = __esm({
3155
3225
  lastData: oldItem,
3156
3226
  metadata: __spreadValues(__spreadValues({}, metadata), configForItem.metadata),
3157
3227
  trigger,
3158
- parent
3228
+ parent,
3229
+ root
3159
3230
  });
3160
3231
  resolvedItem.props = __spreadValues(__spreadValues({}, item.props), resolvedProps);
3161
3232
  if (Object.keys(readOnly).length) {
@@ -3178,7 +3249,8 @@ var init_resolve_component_data = __esm({
3178
3249
  onResolveStart,
3179
3250
  onResolveEnd,
3180
3251
  trigger,
3181
- itemAsComponentData
3252
+ itemAsComponentData,
3253
+ root
3182
3254
  )).node;
3183
3255
  })
3184
3256
  )
@@ -3440,7 +3512,8 @@ var init_store = __esm({
3440
3512
  timeouts[id]();
3441
3513
  }),
3442
3514
  trigger,
3443
- parentData
3515
+ parentData,
3516
+ state.data.root
3444
3517
  );
3445
3518
  }),
3446
3519
  resolveAndCommitData: () => __async(null, null, function* () {
@@ -3582,24 +3655,24 @@ var init_css_box_model_esm = __esm({
3582
3655
  !!isNaN(result) ? process.env.NODE_ENV !== "production" ? invariant(false, "Could not parse value [raw: " + raw + ", without suffix: " + value + "]") : invariant(false) : void 0;
3583
3656
  return result;
3584
3657
  };
3585
- calculateBox = function calculateBox2(borderBox, styles2) {
3658
+ calculateBox = function calculateBox2(borderBox, styles) {
3586
3659
  var margin = {
3587
- top: parse(styles2.marginTop),
3588
- right: parse(styles2.marginRight),
3589
- bottom: parse(styles2.marginBottom),
3590
- left: parse(styles2.marginLeft)
3660
+ top: parse(styles.marginTop),
3661
+ right: parse(styles.marginRight),
3662
+ bottom: parse(styles.marginBottom),
3663
+ left: parse(styles.marginLeft)
3591
3664
  };
3592
3665
  var padding = {
3593
- top: parse(styles2.paddingTop),
3594
- right: parse(styles2.paddingRight),
3595
- bottom: parse(styles2.paddingBottom),
3596
- left: parse(styles2.paddingLeft)
3666
+ top: parse(styles.paddingTop),
3667
+ right: parse(styles.paddingRight),
3668
+ bottom: parse(styles.paddingBottom),
3669
+ left: parse(styles.paddingLeft)
3597
3670
  };
3598
3671
  var border = {
3599
- top: parse(styles2.borderTopWidth),
3600
- right: parse(styles2.borderRightWidth),
3601
- bottom: parse(styles2.borderBottomWidth),
3602
- left: parse(styles2.borderLeftWidth)
3672
+ top: parse(styles.borderTopWidth),
3673
+ right: parse(styles.borderRightWidth),
3674
+ bottom: parse(styles.borderBottomWidth),
3675
+ left: parse(styles.borderLeftWidth)
3603
3676
  };
3604
3677
  return createBox({
3605
3678
  borderBox,
@@ -3610,8 +3683,8 @@ var init_css_box_model_esm = __esm({
3610
3683
  };
3611
3684
  getBox = function getBox2(el) {
3612
3685
  var borderBox = el.getBoundingClientRect();
3613
- var styles2 = window.getComputedStyle(el);
3614
- return calculateBox(borderBox, styles2);
3686
+ var styles = window.getComputedStyle(el);
3687
+ return calculateBox(borderBox, styles);
3615
3688
  };
3616
3689
  }
3617
3690
  });
@@ -5757,12 +5830,16 @@ var import_react14 = require("@dnd-kit/react");
5757
5830
  init_react_import();
5758
5831
  var import_react12 = require("react");
5759
5832
  var import_react13 = require("@dnd-kit/react");
5833
+ var import_dom = require("@dnd-kit/dom");
5760
5834
  var import_utilities = require("@dnd-kit/dom/utilities");
5761
- var touchDefault = { delay: { value: 200, tolerance: 10 } };
5762
- var otherDefault = {
5763
- delay: { value: 200, tolerance: 10 },
5764
- distance: { value: 5 }
5765
- };
5835
+ var { Delay, Distance } = import_dom.PointerActivationConstraints;
5836
+ var touchDefault = [
5837
+ new Delay({ value: 200, tolerance: 10 })
5838
+ ];
5839
+ var otherDefault = [
5840
+ new Delay({ value: 200, tolerance: 10 }),
5841
+ new Distance({ value: 5 })
5842
+ ];
5766
5843
  var useSensors = ({
5767
5844
  other = otherDefault,
5768
5845
  mouse,
@@ -6107,6 +6184,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
6107
6184
 
6108
6185
  // components/Sortable/index.tsx
6109
6186
  var import_sortable = require("@dnd-kit/react/sortable");
6187
+ var import_dom2 = require("@dnd-kit/dom");
6110
6188
  var import_jsx_runtime6 = require("react/jsx-runtime");
6111
6189
  var SortableProvider = ({
6112
6190
  children,
@@ -6115,7 +6193,7 @@ var SortableProvider = ({
6115
6193
  onMove
6116
6194
  }) => {
6117
6195
  const sensors = useSensors({
6118
- mouse: { distance: { value: 5 } }
6196
+ mouse: [new import_dom2.PointerActivationConstraints.Distance({ value: 5 })]
6119
6197
  });
6120
6198
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
6121
6199
  import_react14.DragDropProvider,
@@ -7869,7 +7947,7 @@ init_react_import();
7869
7947
  var import_react69 = require("@dnd-kit/react");
7870
7948
  init_store();
7871
7949
  var import_react70 = require("react");
7872
- var import_dom = require("@dnd-kit/dom");
7950
+ var import_dom4 = require("@dnd-kit/dom");
7873
7951
 
7874
7952
  // components/DropZone/index.tsx
7875
7953
  init_react_import();
@@ -7890,6 +7968,7 @@ init_store();
7890
7968
  init_Loader();
7891
7969
  init_ActionBar();
7892
7970
  var import_react_dom2 = require("react-dom");
7971
+ var import_dom3 = require("@dnd-kit/dom");
7893
7972
 
7894
7973
  // lib/get-deep-scroll-position.ts
7895
7974
  init_react_import();
@@ -8138,7 +8217,10 @@ var DraggableComponent = ({
8138
8217
  duration: 200,
8139
8218
  easing: "cubic-bezier(0.2, 0, 0, 1)"
8140
8219
  },
8141
- feedback: "clone"
8220
+ plugins: (defaults) => [
8221
+ ...defaults,
8222
+ import_dom3.Feedback.configure({ feedback: "clone" })
8223
+ ]
8142
8224
  });
8143
8225
  (0, import_react51.useEffect)(() => {
8144
8226
  const isEnabled = zoneStore.getState().enabledIndex[zoneCompound];
@@ -10724,7 +10806,7 @@ var DragDropContextClient = ({
10724
10806
  }
10725
10807
  }, []);
10726
10808
  const [plugins] = (0, import_react70.useState)(() => [
10727
- ...disableAutoScroll ? import_dom.defaultPreset.plugins.filter((plugin) => plugin !== import_dom.AutoScroller) : import_dom.defaultPreset.plugins,
10809
+ ...disableAutoScroll ? import_dom4.defaultPreset.plugins.filter((plugin) => plugin !== import_dom4.AutoScroller) : import_dom4.defaultPreset.plugins,
10728
10810
  createNestedDroppablePlugin(
10729
10811
  {
10730
10812
  onChange: (params, manager) => {
@@ -11504,233 +11586,3040 @@ var Components = () => {
11504
11586
  // components/Puck/components/Preview/index.tsx
11505
11587
  init_react_import();
11506
11588
  init_root_droppable_id();
11507
- var import_react78 = require("react");
11589
+ var import_react79 = require("react");
11508
11590
  init_store();
11509
11591
 
11510
11592
  // components/AutoFrame/index.tsx
11511
11593
  init_react_import();
11512
- var import_react77 = require("react");
11594
+ var import_react78 = require("react");
11513
11595
  var import_object_hash = __toESM(require("object-hash"));
11514
11596
  var import_react_dom3 = require("react-dom");
11515
- var import_jsx_runtime75 = require("react/jsx-runtime");
11516
- var styleSelector = 'style, link[rel="stylesheet"]';
11517
- var collectStyles = (doc) => {
11518
- const collected = [];
11519
- doc.querySelectorAll(styleSelector).forEach((style) => {
11520
- if (style.tagName === "STYLE") {
11521
- const hasContent = !!style.innerHTML.trim();
11522
- if (hasContent) {
11523
- collected.push(style);
11524
- }
11525
- } else {
11526
- collected.push(style);
11527
- }
11528
- });
11529
- return collected;
11530
- };
11531
- var getStyleSheet = (el) => {
11532
- return Array.from(document.styleSheets).find((ss) => {
11533
- const ownerNode = ss.ownerNode;
11534
- return ownerNode.href === el.href;
11535
- });
11536
- };
11537
- var getStyles = (styleSheet) => {
11538
- if (styleSheet) {
11539
- try {
11540
- return Array.from(styleSheet.cssRules).map((rule) => rule.cssText).join("");
11541
- } catch (e) {
11542
- console.warn(
11543
- "Access to stylesheet %s is denied. Ignoring\u2026",
11544
- styleSheet.href
11545
- );
11546
- }
11597
+
11598
+ // lib/use-inject-css.ts
11599
+ init_react_import();
11600
+ var import_react77 = require("react");
11601
+
11602
+ // puck-runtime-css:puck-runtime-css
11603
+ init_react_import();
11604
+ var defaultUiStyles = `@import "https://rsms.me/inter/inter.css";
11605
+
11606
+ /* styles/color.css */
11607
+ :root {
11608
+ --puck-color-rose-01: #4a001c;
11609
+ --puck-color-rose-02: #670833;
11610
+ --puck-color-rose-03: #87114c;
11611
+ --puck-color-rose-04: #a81a66;
11612
+ --puck-color-rose-05: #bc5089;
11613
+ --puck-color-rose-06: #cc7ca5;
11614
+ --puck-color-rose-07: #d89aba;
11615
+ --puck-color-rose-08: #e3b8cf;
11616
+ --puck-color-rose-09: #efd6e3;
11617
+ --puck-color-rose-10: #f6eaf1;
11618
+ --puck-color-rose-11: #faf4f8;
11619
+ --puck-color-rose-12: #fef8fc;
11620
+ --puck-color-azure-01: #00175d;
11621
+ --puck-color-azure-02: #002c77;
11622
+ --puck-color-azure-03: #014292;
11623
+ --puck-color-azure-04: #0158ad;
11624
+ --puck-color-azure-05: #3479be;
11625
+ --puck-color-azure-06: #6499cf;
11626
+ --puck-color-azure-07: #88b0da;
11627
+ --puck-color-azure-08: #abc7e5;
11628
+ --puck-color-azure-09: #cfdff0;
11629
+ --puck-color-azure-10: #e7eef7;
11630
+ --puck-color-azure-11: #f3f6fb;
11631
+ --puck-color-azure-12: #f7faff;
11632
+ --puck-color-green-01: #002000;
11633
+ --puck-color-green-02: #043604;
11634
+ --puck-color-green-03: #084e08;
11635
+ --puck-color-green-04: #0c680c;
11636
+ --puck-color-green-05: #1d882f;
11637
+ --puck-color-green-06: #2faa53;
11638
+ --puck-color-green-07: #56c16f;
11639
+ --puck-color-green-08: #7dd78b;
11640
+ --puck-color-green-09: #b8e8bf;
11641
+ --puck-color-green-10: #ddf3e0;
11642
+ --puck-color-green-11: #eff8f0;
11643
+ --puck-color-green-12: #f3fcf4;
11644
+ --puck-color-yellow-01: #211000;
11645
+ --puck-color-yellow-02: #362700;
11646
+ --puck-color-yellow-03: #4c4000;
11647
+ --puck-color-yellow-04: #645a00;
11648
+ --puck-color-yellow-05: #877614;
11649
+ --puck-color-yellow-06: #ab9429;
11650
+ --puck-color-yellow-07: #bfac4e;
11651
+ --puck-color-yellow-08: #d4c474;
11652
+ --puck-color-yellow-09: #e6deb1;
11653
+ --puck-color-yellow-10: #f3efd9;
11654
+ --puck-color-yellow-11: #f9f7ed;
11655
+ --puck-color-yellow-12: #fcfaf0;
11656
+ --puck-color-red-01: #4c0000;
11657
+ --puck-color-red-02: #6a0a10;
11658
+ --puck-color-red-03: #8a1422;
11659
+ --puck-color-red-04: #ac1f35;
11660
+ --puck-color-red-05: #bf5366;
11661
+ --puck-color-red-06: #ce7e8e;
11662
+ --puck-color-red-07: #d99ca8;
11663
+ --puck-color-red-08: #e4b9c2;
11664
+ --puck-color-red-09: #efd7db;
11665
+ --puck-color-red-10: #f6eaec;
11666
+ --puck-color-red-11: #faf4f5;
11667
+ --puck-color-red-12: #fff9fa;
11668
+ --puck-color-grey-01: #181818;
11669
+ --puck-color-grey-02: #292929;
11670
+ --puck-color-grey-03: #404040;
11671
+ --puck-color-grey-04: #5a5a5a;
11672
+ --puck-color-grey-05: #767676;
11673
+ --puck-color-grey-06: #949494;
11674
+ --puck-color-grey-07: #ababab;
11675
+ --puck-color-grey-08: #c3c3c3;
11676
+ --puck-color-grey-09: #dcdcdc;
11677
+ --puck-color-grey-10: #efefef;
11678
+ --puck-color-grey-11: #f5f5f5;
11679
+ --puck-color-grey-12: #fafafa;
11680
+ --puck-color-black: #000000;
11681
+ --puck-color-white: #ffffff;
11682
+ }
11683
+
11684
+ /* styles/typography.css */
11685
+ :root {
11686
+ --puck-font-size-scale-base-unitless: 12;
11687
+ --puck-font-size-xxxs-unitless: 12;
11688
+ --puck-font-size-xxs-unitless: 14;
11689
+ --puck-font-size-xs-unitless: 16;
11690
+ --puck-font-size-s-unitless: 18;
11691
+ --puck-font-size-m-unitless: 21;
11692
+ --puck-font-size-l-unitless: 24;
11693
+ --puck-font-size-xl-unitless: 28;
11694
+ --puck-font-size-xxl-unitless: 36;
11695
+ --puck-font-size-xxxl-unitless: 48;
11696
+ --puck-font-size-xxxxl-unitless: 56;
11697
+ --puck-font-size-xxxs: calc(1rem * var(--puck-font-size-xxxs-unitless) / 16);
11698
+ --puck-font-size-xxs: calc(1rem * var(--puck-font-size-xxs-unitless) / 16);
11699
+ --puck-font-size-xs: calc(1rem * var(--puck-font-size-xs-unitless) / 16);
11700
+ --puck-font-size-s: calc(1rem * var(--puck-font-size-s-unitless) / 16);
11701
+ --puck-font-size-m: calc(1rem * var(--puck-font-size-m-unitless) / 16);
11702
+ --puck-font-size-l: calc(1rem * var(--puck-font-size-l-unitless) / 16);
11703
+ --puck-font-size-xl: calc(1rem * var(--puck-font-size-xl-unitless) / 16);
11704
+ --puck-font-size-xxl: calc(1rem * var(--puck-font-size-xxl-unitless) / 16);
11705
+ --puck-font-size-xxxl: calc(1rem * var(--puck-font-size-xxxl-unitless) / 16);
11706
+ --puck-font-size-xxxxl: calc( 1rem * var(--puck-font-size-xxxxl-unitless) / 16 );
11707
+ --puck-font-size-base: var(--puck-font-size-xs);
11708
+ --line-height-reset: 1;
11709
+ --line-height-xs: calc( var(--space-m-unitless) / var(--puck-font-size-m-unitless) );
11710
+ --line-height-s: calc( var(--space-m-unitless) / var(--puck-font-size-s-unitless) );
11711
+ --line-height-m: calc( var(--space-m-unitless) / var(--puck-font-size-xs-unitless) );
11712
+ --line-height-l: calc( var(--space-m-unitless) / var(--puck-font-size-xxs-unitless) );
11713
+ --line-height-xl: calc( var(--space-m-unitless) / var(--puck-font-size-scale-base-unitless) );
11714
+ --line-height-base: var(--line-height-m);
11715
+ --fallback-font-stack:
11716
+ -apple-system,
11717
+ BlinkMacSystemFont,
11718
+ Segoe UI,
11719
+ Helvetica Neue,
11720
+ sans-serif,
11721
+ Apple Color Emoji,
11722
+ Segoe UI Emoji,
11723
+ Segoe UI Symbol;
11724
+ --puck-font-family: Inter, var(--fallback-font-stack);
11725
+ --puck-font-family-monospaced:
11726
+ ui-monospace,
11727
+ "Cascadia Code",
11728
+ "Source Code Pro",
11729
+ Menlo,
11730
+ Consolas,
11731
+ "DejaVu Sans Mono",
11732
+ monospace;
11733
+ }
11734
+ @supports (font-variation-settings: normal) {
11735
+ :root {
11736
+ --puck-font-family: InterVariable, var(--fallback-font-stack);
11547
11737
  }
11548
- return "";
11549
- };
11550
- var syncAttributes = (sourceElement, targetElement) => {
11551
- const attributes = sourceElement.attributes;
11552
- if ((attributes == null ? void 0 : attributes.length) > 0) {
11553
- Array.from(attributes).forEach((attribute) => {
11554
- targetElement.setAttribute(attribute.name, attribute.value);
11555
- });
11738
+ }
11739
+
11740
+ /* bundle/core.css */
11741
+ #frame-root {
11742
+ height: 1px;
11743
+ min-height: 100vh;
11744
+ }
11745
+ [data-puck-entry] {
11746
+ position: relative;
11747
+ z-index: 0;
11748
+ }
11749
+
11750
+ /* bundle/index.css */
11751
+
11752
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */
11753
+ ._ActionBar_1nmyk_1 {
11754
+ align-items: center;
11755
+ cursor: default;
11756
+ display: flex;
11757
+ width: auto;
11758
+ padding: 4px;
11759
+ padding-inline-start: 0;
11760
+ padding-inline-end: 0;
11761
+ border-top-left-radius: 8px;
11762
+ border-top-right-radius: 8px;
11763
+ border-radius: 8px;
11764
+ background: var(--puck-color-grey-01);
11765
+ color: var(--puck-color-white);
11766
+ font-family: var(--puck-font-family);
11767
+ min-height: 26px;
11768
+ }
11769
+ ._ActionBar-label_1nmyk_18 {
11770
+ color: var(--puck-color-grey-08);
11771
+ font-size: var(--puck-font-size-xxxs);
11772
+ font-weight: 500;
11773
+ padding-inline-start: 8px;
11774
+ padding-inline-end: 8px;
11775
+ margin-inline-start: 4px;
11776
+ margin-inline-end: 4px;
11777
+ text-overflow: ellipsis;
11778
+ white-space: nowrap;
11779
+ }
11780
+ ._ActionBarAction_1nmyk_30 + ._ActionBar-label_1nmyk_18 {
11781
+ padding-inline-start: 0;
11782
+ }
11783
+ ._ActionBar-label_1nmyk_18 + ._ActionBarAction_1nmyk_30 {
11784
+ margin-inline-start: -4px;
11785
+ }
11786
+ ._ActionBar-group_1nmyk_38 {
11787
+ align-items: center;
11788
+ border-inline-start: 0.5px solid var(--puck-color-grey-05);
11789
+ display: flex;
11790
+ height: 100%;
11791
+ padding-inline-start: 4px;
11792
+ padding-inline-end: 4px;
11793
+ }
11794
+ ._ActionBar-group_1nmyk_38:first-of-type {
11795
+ border-inline-start: 0;
11796
+ }
11797
+ ._ActionBar-group_1nmyk_38:empty {
11798
+ display: none;
11799
+ }
11800
+ ._ActionBarAction_1nmyk_30 {
11801
+ background: transparent;
11802
+ border: none;
11803
+ color: var(--puck-color-grey-08);
11804
+ cursor: pointer;
11805
+ padding: 6px;
11806
+ margin-inline-start: 4px;
11807
+ margin-inline-end: 4px;
11808
+ border-radius: 4px;
11809
+ overflow: hidden;
11810
+ display: flex;
11811
+ align-items: center;
11812
+ justify-content: center;
11813
+ transition: color 50ms ease-in;
11814
+ }
11815
+ ._ActionBarAction--disabled_1nmyk_71 {
11816
+ cursor: auto;
11817
+ color: var(--puck-color-grey-06);
11818
+ }
11819
+ ._ActionBarAction_1nmyk_30 svg {
11820
+ max-width: none !important;
11821
+ }
11822
+ ._ActionBarAction_1nmyk_30:focus-visible {
11823
+ outline: 2px solid var(--puck-color-azure-05);
11824
+ outline-offset: -2px;
11825
+ }
11826
+ @media (hover: hover) and (pointer: fine) {
11827
+ ._ActionBarAction_1nmyk_30:hover:not(._ActionBarAction--disabled_1nmyk_71) {
11828
+ color: var(--puck-color-azure-06);
11829
+ transition: none;
11556
11830
  }
11557
- };
11558
- var defer = (fn) => setTimeout(fn, 0);
11559
- var CopyHostStyles = ({
11560
- children,
11561
- debug = false,
11562
- onStylesLoaded = () => null
11563
- }) => {
11564
- const { document: doc, window: win } = useFrame();
11565
- (0, import_react77.useEffect)(() => {
11566
- if (!win || !doc) {
11567
- return () => {
11568
- };
11569
- }
11570
- let elements = [];
11571
- const hashes = {};
11572
- const lookupEl = (el) => elements.findIndex((elementMap) => elementMap.original === el);
11573
- const mirrorEl = (el, inlineStyles = false) => __async(null, null, function* () {
11574
- let mirror;
11575
- if (el.nodeName === "LINK" && inlineStyles) {
11576
- mirror = document.createElement("style");
11577
- mirror.type = "text/css";
11578
- let styleSheet = getStyleSheet(el);
11579
- if (!styleSheet) {
11580
- yield new Promise((resolve) => {
11581
- const fn = () => {
11582
- resolve();
11583
- el.removeEventListener("load", fn);
11584
- };
11585
- el.addEventListener("load", fn);
11586
- });
11587
- styleSheet = getStyleSheet(el);
11588
- }
11589
- const styles2 = getStyles(styleSheet);
11590
- if (!styles2) {
11591
- if (debug) {
11592
- console.warn(
11593
- `Tried to load styles for link element, but couldn't find them. Skipping...`
11594
- );
11595
- }
11596
- return;
11597
- }
11598
- mirror.innerHTML = styles2;
11599
- mirror.setAttribute("data-href", el.getAttribute("href"));
11600
- } else {
11601
- mirror = el.cloneNode(true);
11602
- }
11603
- return mirror;
11604
- });
11605
- const addEl = (el) => __async(null, null, function* () {
11606
- const index = lookupEl(el);
11607
- if (index > -1) {
11608
- if (debug)
11609
- console.log(
11610
- `Tried to add an element that was already mirrored. Updating instead...`
11611
- );
11612
- elements[index].mirror.innerText = el.innerText;
11613
- return;
11614
- }
11615
- const mirror = yield mirrorEl(el);
11616
- if (!mirror) {
11617
- return;
11618
- }
11619
- const elHash = (0, import_object_hash.default)(mirror.outerHTML);
11620
- if (hashes[elHash]) {
11621
- if (debug)
11622
- console.log(
11623
- `iframe already contains element that is being mirrored. Skipping...`
11624
- );
11625
- return;
11626
- }
11627
- hashes[elHash] = true;
11628
- doc.head.append(mirror);
11629
- elements.push({ original: el, mirror });
11630
- if (debug) console.log(`Added style node ${el.outerHTML}`);
11631
- });
11632
- const removeEl = (el) => {
11633
- var _a, _b;
11634
- const index = lookupEl(el);
11635
- if (index === -1) {
11636
- if (debug)
11637
- console.log(
11638
- `Tried to remove an element that did not exist. Skipping...`
11639
- );
11640
- return;
11641
- }
11642
- const elHash = (0, import_object_hash.default)(el.outerHTML);
11643
- (_b = (_a = elements[index]) == null ? void 0 : _a.mirror) == null ? void 0 : _b.remove();
11644
- delete hashes[elHash];
11645
- if (debug) console.log(`Removed style node ${el.outerHTML}`);
11646
- };
11647
- const observer = new MutationObserver((mutations) => {
11648
- mutations.forEach((mutation) => {
11649
- if (mutation.type === "childList") {
11650
- mutation.addedNodes.forEach((node) => {
11651
- if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE) {
11652
- const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
11653
- if (el && el.matches(styleSelector)) {
11654
- defer(() => addEl(el));
11655
- }
11656
- }
11657
- });
11658
- mutation.removedNodes.forEach((node) => {
11659
- if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE) {
11660
- const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
11661
- if (el && el.matches(styleSelector)) {
11662
- defer(() => removeEl(el));
11663
- }
11664
- }
11665
- });
11666
- }
11667
- });
11668
- });
11669
- const parentDocument = win.parent.document;
11670
- const collectedStyles = collectStyles(parentDocument);
11671
- const hrefs = [];
11672
- let stylesLoaded = 0;
11673
- const parentHtml = parentDocument.getElementsByTagName("html")[0];
11674
- syncAttributes(parentHtml, doc.documentElement);
11675
- const parentBody = parentDocument.getElementsByTagName("body")[0];
11676
- syncAttributes(parentBody, doc.body);
11677
- Promise.all(
11678
- collectedStyles.map((styleNode, i) => __async(null, null, function* () {
11679
- if (styleNode.nodeName === "LINK") {
11680
- const linkHref = styleNode.href;
11681
- if (hrefs.indexOf(linkHref) > -1) {
11682
- return;
11683
- }
11684
- hrefs.push(linkHref);
11685
- }
11686
- const mirror = yield mirrorEl(styleNode);
11687
- if (!mirror) return;
11688
- elements.push({ original: styleNode, mirror });
11689
- return mirror;
11690
- }))
11691
- ).then((mirrorStyles) => {
11692
- const filtered = mirrorStyles.filter(
11693
- (el) => typeof el !== "undefined"
11694
- );
11695
- filtered.forEach((mirror) => {
11696
- mirror.onload = () => {
11697
- stylesLoaded = stylesLoaded + 1;
11698
- if (stylesLoaded >= filtered.length) {
11699
- onStylesLoaded();
11700
- }
11701
- };
11702
- mirror.onerror = () => {
11703
- console.warn(`AutoFrame couldn't load a stylesheet`);
11704
- stylesLoaded = stylesLoaded + 1;
11705
- if (stylesLoaded >= filtered.length) {
11706
- onStylesLoaded();
11707
- }
11708
- };
11709
- });
11710
- doc.head.innerHTML = "";
11711
- doc.head.append(...filtered);
11712
- filtered.forEach((mirror) => {
11713
- if (mirror.nodeName === "STYLE") {
11714
- stylesLoaded = stylesLoaded + 1;
11715
- }
11716
- });
11717
- if (stylesLoaded >= filtered.length) {
11718
- onStylesLoaded();
11719
- }
11720
- observer.observe(parentDocument.head, { childList: true, subtree: true });
11721
- filtered.forEach((el) => {
11722
- const elHash = (0, import_object_hash.default)(el.outerHTML);
11831
+ }
11832
+ ._ActionBarAction_1nmyk_30:active:not(._ActionBarAction--disabled_1nmyk_71),
11833
+ ._ActionBarAction--active_1nmyk_93 {
11834
+ color: var(--puck-color-azure-07);
11835
+ transition: none;
11836
+ }
11837
+ ._ActionBar-group_1nmyk_38 * {
11838
+ margin: 0;
11839
+ }
11840
+ ._ActionBar-separator_1nmyk_102 {
11841
+ background: var(--puck-color-grey-05);
11842
+ margin-inline: 4px;
11843
+ width: 0.5px;
11844
+ height: 100%;
11845
+ }
11846
+
11847
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
11848
+ ._InputWrapper_bsxfo_1 + ._InputWrapper_bsxfo_1 {
11849
+ margin-top: 12px;
11850
+ }
11851
+ ._Input-label_bsxfo_5 {
11852
+ align-items: center;
11853
+ color: var(--puck-color-grey-04);
11854
+ display: flex;
11855
+ padding-bottom: 12px;
11856
+ font-size: var(--puck-font-size-xxs);
11857
+ font-weight: 600;
11858
+ }
11859
+ ._Input-labelIcon_bsxfo_14 {
11860
+ color: var(--puck-color-grey-07);
11861
+ display: flex;
11862
+ margin-inline-end: 4px;
11863
+ padding-inline-start: 4px;
11864
+ }
11865
+ ._Input-disabledIcon_bsxfo_21 {
11866
+ color: var(--puck-color-grey-05);
11867
+ margin-inline-start: auto;
11868
+ }
11869
+ ._Input-input_bsxfo_26 {
11870
+ background: var(--puck-color-white);
11871
+ border-width: 1px;
11872
+ border-style: solid;
11873
+ border-color: var(--puck-color-grey-09);
11874
+ border-radius: 4px;
11875
+ box-sizing: border-box;
11876
+ font-family: inherit;
11877
+ font-size: 16px;
11878
+ padding: 12px 15px;
11879
+ transition: border-color 50ms ease-in;
11880
+ width: 100%;
11881
+ max-width: 100%;
11882
+ }
11883
+ @media (min-width: 458px) {
11884
+ ._Input-input_bsxfo_26 {
11885
+ font-size: 14px;
11886
+ }
11887
+ }
11888
+ select._Input-input_bsxfo_26 {
11889
+ appearance: none;
11890
+ 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;
11891
+ background-size: 12px;
11892
+ background-position: calc(100% - 12px) calc(50% + 3px);
11893
+ background-repeat: no-repeat;
11894
+ background-color: var(--puck-color-white);
11895
+ cursor: pointer;
11896
+ }
11897
+ select._Input-input_bsxfo_26:dir(rtl) {
11898
+ background-position: 12px calc(50% + 3px);
11899
+ }
11900
+ @media (hover: hover) and (pointer: fine) {
11901
+ ._Input_bsxfo_1:has(> input):hover ._Input-input_bsxfo_26:not([readonly]),
11902
+ ._Input_bsxfo_1:has(> textarea):hover ._Input-input_bsxfo_26:not([readonly]) {
11903
+ border-color: var(--puck-color-grey-05);
11904
+ transition: none;
11905
+ }
11906
+ ._Input_bsxfo_1:has(> select):hover ._Input-input_bsxfo_26:not([disabled]) {
11907
+ background-color: var(--puck-color-azure-12);
11908
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a5a5a'><polygon points='0,0 100,0 50,50'/></svg>");
11909
+ border-color: var(--puck-color-grey-05);
11910
+ transition: none;
11911
+ }
11912
+ }
11913
+ ._Input-input_bsxfo_26:focus {
11914
+ border-color: var(--puck-color-grey-05);
11915
+ outline: 2px solid var(--puck-color-azure-05);
11916
+ transition: none;
11917
+ }
11918
+ ._Input--readOnly_bsxfo_82 > ._Input-input_bsxfo_26,
11919
+ ._Input--readOnly_bsxfo_82 > select._Input-input_bsxfo_26 {
11920
+ background-color: var(--puck-color-grey-11);
11921
+ border-color: var(--puck-color-grey-09);
11922
+ color: var(--puck-color-grey-04);
11923
+ cursor: default;
11924
+ opacity: 1;
11925
+ outline: 0;
11926
+ transition: none;
11927
+ }
11928
+ ._Input-radioGroupItems_bsxfo_93 {
11929
+ display: flex;
11930
+ border: 1px solid var(--puck-color-grey-09);
11931
+ border-radius: 4px;
11932
+ flex-wrap: wrap;
11933
+ }
11934
+ ._Input-radio_bsxfo_93 {
11935
+ border-inline-end: 1px solid var(--puck-color-grey-09);
11936
+ flex-grow: 1;
11937
+ }
11938
+ ._Input-radio_bsxfo_93:first-of-type {
11939
+ border-bottom-left-radius: 4px;
11940
+ border-top-left-radius: 4px;
11941
+ }
11942
+ ._Input-radio_bsxfo_93:first-of-type ._Input-radioInner_bsxfo_110 {
11943
+ border-bottom-left-radius: 3px;
11944
+ border-top-left-radius: 3px;
11945
+ }
11946
+ ._Input-radio_bsxfo_93:last-of-type {
11947
+ border-bottom-right-radius: 4px;
11948
+ border-inline-end: 0;
11949
+ border-top-right-radius: 4px;
11950
+ }
11951
+ ._Input-radio_bsxfo_93:last-of-type ._Input-radioInner_bsxfo_110 {
11952
+ border-bottom-right-radius: 3px;
11953
+ border-top-right-radius: 3px;
11954
+ }
11955
+ ._Input-radioInner_bsxfo_110 {
11956
+ background-color: var(--puck-color-white);
11957
+ color: var(--puck-color-grey-04);
11958
+ cursor: pointer;
11959
+ font-size: var(--puck-font-size-xxxs);
11960
+ padding: 8px 12px;
11961
+ text-align: center;
11962
+ transition: background-color 50ms ease-in;
11963
+ }
11964
+ ._Input-radio_bsxfo_93:has(:focus-visible) {
11965
+ outline: 2px solid var(--puck-color-azure-05);
11966
+ outline-offset: 2px;
11967
+ position: relative;
11968
+ }
11969
+ @media (hover: hover) and (pointer: fine) {
11970
+ ._Input-radioInner_bsxfo_110:hover {
11971
+ background-color: var(--puck-color-azure-12);
11972
+ transition: none;
11973
+ }
11974
+ }
11975
+ ._Input--readOnly_bsxfo_82 ._Input-radioInner_bsxfo_110 {
11976
+ background-color: var(--puck-color-white);
11977
+ color: var(--puck-color-grey-04);
11978
+ cursor: default;
11979
+ }
11980
+ ._Input-radio_bsxfo_93 ._Input-radioInput_bsxfo_155:checked ~ ._Input-radioInner_bsxfo_110 {
11981
+ background-color: var(--puck-color-azure-11);
11982
+ color: var(--puck-color-azure-04);
11983
+ font-weight: 500;
11984
+ }
11985
+ ._Input--readOnly_bsxfo_82 ._Input-radioInput_bsxfo_155:checked ~ ._Input-radioInner_bsxfo_110 {
11986
+ background-color: var(--puck-color-grey-11);
11987
+ color: var(--puck-color-grey-04);
11988
+ }
11989
+ ._Input-radio_bsxfo_93 ._Input-radioInput_bsxfo_155 {
11990
+ clip: rect(0 0 0 0);
11991
+ clip-path: inset(100%);
11992
+ height: 1px;
11993
+ overflow: hidden;
11994
+ position: absolute;
11995
+ white-space: nowrap;
11996
+ width: 1px;
11997
+ }
11998
+ textarea._Input-input_bsxfo_26 {
11999
+ margin-bottom: -4px;
12000
+ }
12001
+
12002
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/fields/ArrayField/styles.module.css/#css-module-data */
12003
+ ._ArrayField_1vaho_5 {
12004
+ display: flex;
12005
+ flex-direction: column;
12006
+ background: var(--puck-color-azure-11);
12007
+ border: 1px solid var(--puck-color-grey-09);
12008
+ border-radius: 4px;
12009
+ }
12010
+ ._ArrayField--isDraggingFrom_1vaho_13 {
12011
+ background-color: var(--puck-color-azure-11);
12012
+ overflow: hidden;
12013
+ }
12014
+ ._ArrayField-addButton_1vaho_18 {
12015
+ background-color: var(--puck-color-white);
12016
+ border: none;
12017
+ border-radius: 3px;
12018
+ display: flex;
12019
+ color: var(--puck-color-azure-05);
12020
+ justify-content: center;
12021
+ cursor: pointer;
12022
+ width: 100%;
12023
+ margin: 0;
12024
+ padding: 14px;
12025
+ text-align: left;
12026
+ transition: background-color 50ms ease-in;
12027
+ }
12028
+ ._ArrayField--hasItems_1vaho_33 > ._ArrayField-addButton_1vaho_18 {
12029
+ border-top: 1px solid var(--puck-color-grey-09);
12030
+ border-top-left-radius: 0;
12031
+ border-top-right-radius: 0;
12032
+ }
12033
+ ._ArrayField-addButton_1vaho_18:focus-visible {
12034
+ outline: 2px solid var(--puck-color-azure-05);
12035
+ outline-offset: 2px;
12036
+ position: relative;
12037
+ }
12038
+ @media (hover: hover) and (pointer: fine) {
12039
+ ._ArrayField_1vaho_5:not(._ArrayField--isDraggingFrom_1vaho_13) > ._ArrayField-addButton_1vaho_18:hover {
12040
+ background: var(--puck-color-azure-12);
12041
+ color: var(--puck-color-azure-04);
12042
+ transition: none;
12043
+ }
12044
+ }
12045
+ ._ArrayField_1vaho_5:not(._ArrayField--isDraggingFrom_1vaho_13) > ._ArrayField-addButton_1vaho_18:active {
12046
+ background: var(--puck-color-azure-11);
12047
+ color: var(--puck-color-azure-04);
12048
+ transition: none;
12049
+ }
12050
+ ._ArrayField-inner_1vaho_59 {
12051
+ margin-top: -1px;
12052
+ }
12053
+ ._ArrayFieldItem_1vaho_67 {
12054
+ border-top-left-radius: 3px;
12055
+ border-top-right-radius: 3px;
12056
+ display: block;
12057
+ position: relative;
12058
+ }
12059
+ ._ArrayFieldItem_1vaho_67 {
12060
+ border-top: 1px solid var(--puck-color-grey-09);
12061
+ }
12062
+ ._ArrayFieldItem--isDragging_1vaho_78 {
12063
+ border-top: transparent;
12064
+ }
12065
+ ._ArrayFieldItem--isExpanded_1vaho_82::before {
12066
+ display: none;
12067
+ }
12068
+ ._ArrayFieldItem--isExpanded_1vaho_82 {
12069
+ border-bottom: 0;
12070
+ outline-offset: 0px !important;
12071
+ outline: 1px solid var(--puck-color-azure-07) !important;
12072
+ z-index: 2;
12073
+ }
12074
+ ._ArrayFieldItem--isDragging_1vaho_78 {
12075
+ outline: 2px var(--puck-color-azure-09) solid !important;
12076
+ }
12077
+ ._ArrayFieldItem--isDragging_1vaho_78 ._ArrayFieldItem-summary_1vaho_97:active {
12078
+ background-color: var(--puck-color-white);
12079
+ }
12080
+ ._ArrayFieldItem_1vaho_67 + ._ArrayFieldItem_1vaho_67 {
12081
+ border-top-left-radius: 0;
12082
+ border-top-right-radius: 0;
12083
+ }
12084
+ ._ArrayFieldItem-summary_1vaho_97 {
12085
+ background: var(--puck-color-white);
12086
+ color: var(--puck-color-grey-04);
12087
+ cursor: pointer;
12088
+ display: flex;
12089
+ align-items: center;
12090
+ gap: 2px;
12091
+ justify-content: space-between;
12092
+ font-size: var(--puck-font-size-xxs);
12093
+ list-style: none;
12094
+ padding: 12px 15px;
12095
+ position: relative;
12096
+ overflow: hidden;
12097
+ transition: background-color 50ms ease-in;
12098
+ }
12099
+ ._ArrayFieldItem--noFields_1vaho_122 > ._ArrayFieldItem-summary_1vaho_97 {
12100
+ cursor: grab;
12101
+ }
12102
+ ._ArrayFieldItem_1vaho_67:first-of-type > ._ArrayFieldItem-summary_1vaho_97 {
12103
+ border-top-left-radius: 3px;
12104
+ border-top-right-radius: 3px;
12105
+ }
12106
+ ._ArrayField--addDisabled_1vaho_131 > ._ArrayField-inner_1vaho_59 > ._ArrayFieldItem_1vaho_67:last-of-type:not(._ArrayFieldItem--isExpanded_1vaho_82) > ._ArrayFieldItem-summary_1vaho_97 {
12107
+ border-bottom-left-radius: 3px;
12108
+ border-bottom-right-radius: 3px;
12109
+ }
12110
+ ._ArrayField--addDisabled_1vaho_131 > ._ArrayField-inner_1vaho_59 > ._ArrayFieldItem--isExpanded_1vaho_82:last-of-type {
12111
+ border-bottom-left-radius: 3px;
12112
+ border-bottom-right-radius: 3px;
12113
+ }
12114
+ ._ArrayFieldItem-summary_1vaho_97:focus-visible {
12115
+ outline: 2px solid var(--puck-color-azure-05);
12116
+ outline-offset: 2px;
12117
+ }
12118
+ @media (hover: hover) and (pointer: fine) {
12119
+ ._ArrayFieldItem-summary_1vaho_97:hover {
12120
+ background-color: var(--puck-color-azure-12);
12121
+ transition: none;
12122
+ }
12123
+ }
12124
+ ._ArrayFieldItem-summary_1vaho_97:active {
12125
+ background-color: var(--puck-color-azure-11);
12126
+ transition: none;
12127
+ }
12128
+ ._ArrayFieldItem--isExpanded_1vaho_82 > ._ArrayFieldItem-summary_1vaho_97 {
12129
+ background: var(--puck-color-azure-11);
12130
+ color: var(--puck-color-azure-04);
12131
+ font-weight: 600;
12132
+ transition: none;
12133
+ }
12134
+ ._ArrayFieldItem-body_1vaho_170 {
12135
+ background: var(--puck-color-white);
12136
+ display: none;
12137
+ }
12138
+ ._ArrayFieldItem--isExpanded_1vaho_82 > ._ArrayFieldItem-body_1vaho_170 {
12139
+ display: block;
12140
+ }
12141
+ ._ArrayFieldItem-fieldset_1vaho_179 {
12142
+ border: none;
12143
+ border-top: 1px solid var(--puck-color-grey-09);
12144
+ margin: 0;
12145
+ min-width: 0;
12146
+ padding: 16px 15px;
12147
+ }
12148
+ ._ArrayFieldItem-rhs_1vaho_187 {
12149
+ display: flex;
12150
+ gap: 4px;
12151
+ align-items: center;
12152
+ }
12153
+ ._ArrayFieldItem-actions_1vaho_193 {
12154
+ color: var(--puck-color-grey-04);
12155
+ display: flex;
12156
+ gap: 4px;
12157
+ opacity: 0;
12158
+ }
12159
+ ._ArrayFieldItem-summary_1vaho_97:focus-within > ._ArrayFieldItem-rhs_1vaho_187 > ._ArrayFieldItem-actions_1vaho_193,
12160
+ ._ArrayFieldItem-summary_1vaho_97:hover > ._ArrayFieldItem-rhs_1vaho_187 > ._ArrayFieldItem-actions_1vaho_193 {
12161
+ opacity: 1;
12162
+ }
12163
+
12164
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css/#css-module-data */
12165
+ ._IconButton_1c68y_1 {
12166
+ align-items: center;
12167
+ background: transparent;
12168
+ border: none;
12169
+ border-radius: 4px;
12170
+ color: currentColor;
12171
+ display: flex;
12172
+ font-family: var(--puck-font-family);
12173
+ justify-content: center;
12174
+ padding: 4px;
12175
+ transition: background-color 50ms ease-in, color 50ms ease-in;
12176
+ }
12177
+ ._IconButton--active_1c68y_14 {
12178
+ color: var(--puck-color-azure-04);
12179
+ }
12180
+ ._IconButton_1c68y_1:focus-visible {
12181
+ outline: 2px solid var(--puck-color-azure-05);
12182
+ outline-offset: -2px;
12183
+ }
12184
+ @media (hover: hover) and (pointer: fine) {
12185
+ ._IconButton_1c68y_1:hover:not(._IconButton--disabled_1c68y_24) {
12186
+ background: var(--puck-color-grey-10);
12187
+ color: var(--puck-color-azure-04);
12188
+ cursor: pointer;
12189
+ transition: none;
12190
+ }
12191
+ }
12192
+ ._IconButton_1c68y_1:active {
12193
+ background: var(--puck-color-azure-11);
12194
+ transition: none;
12195
+ }
12196
+ ._IconButton--disabled_1c68y_24 {
12197
+ color: var(--puck-color-grey-07);
12198
+ }
12199
+
12200
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Loader/styles.module.css/#css-module-data */
12201
+ @keyframes _loader-animation_nacdm_1 {
12202
+ 0% {
12203
+ transform: rotate(0deg) scale(1);
12204
+ }
12205
+ 50% {
12206
+ transform: rotate(180deg) scale(0.8);
12207
+ }
12208
+ 100% {
12209
+ transform: rotate(360deg) scale(1);
12210
+ }
12211
+ }
12212
+ ._Loader_nacdm_13 {
12213
+ background: transparent;
12214
+ border-radius: 100%;
12215
+ border: 2px solid currentColor;
12216
+ border-bottom-color: transparent;
12217
+ display: inline-block;
12218
+ animation: _loader-animation_nacdm_1 1s 0s infinite linear;
12219
+ animation-fill-mode: both;
12220
+ }
12221
+
12222
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css/#css-module-data */
12223
+ ._DragIcon_17p8x_1 {
12224
+ color: var(--puck-color-grey-05);
12225
+ cursor: grab;
12226
+ padding: 4px;
12227
+ border-radius: 4px;
12228
+ }
12229
+ ._DragIcon--disabled_17p8x_8 {
12230
+ cursor: no-drop;
12231
+ }
12232
+ @media (hover: hover) and (pointer: fine) {
12233
+ ._DragIcon_17p8x_1:not(._DragIcon--disabled_17p8x_8):hover {
12234
+ color: var(--puck-color-azure-05);
12235
+ background-color: var(--puck-color-azure-12);
12236
+ }
12237
+ }
12238
+
12239
+ /* components/Sortable/styles.css */
12240
+ [data-dnd-placeholder] * {
12241
+ opacity: 0 !important;
12242
+ }
12243
+ [data-dnd-placeholder] {
12244
+ background: var(--puck-color-azure-09) !important;
12245
+ border: none !important;
12246
+ color: #00000000 !important;
12247
+ opacity: 0.3 !important;
12248
+ outline: none !important;
12249
+ transition: none !important;
12250
+ }
12251
+
12252
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
12253
+ ._ExternalInput-actions_91ls0_1 {
12254
+ display: flex;
12255
+ }
12256
+ ._ExternalInput-button_91ls0_5 {
12257
+ display: flex;
12258
+ gap: 8px;
12259
+ align-items: center;
12260
+ justify-content: center;
12261
+ background-color: var(--puck-color-white);
12262
+ border: 1px solid var(--puck-color-grey-09);
12263
+ border-radius: 4px;
12264
+ color: var(--puck-color-azure-04);
12265
+ padding: 12px 16px;
12266
+ font-weight: 500;
12267
+ white-space: nowrap;
12268
+ text-overflow: ellipsis;
12269
+ transition: background-color 50ms ease-in;
12270
+ position: relative;
12271
+ overflow: hidden;
12272
+ flex-grow: 1;
12273
+ }
12274
+ ._ExternalInput--dataSelected_91ls0_24 ._ExternalInput-button_91ls0_5 {
12275
+ color: var(--puck-color-grey-03);
12276
+ display: block;
12277
+ border-top-right-radius: 0px;
12278
+ border-bottom-right-radius: 0px;
12279
+ }
12280
+ ._ExternalInput--readOnly_91ls0_31 ._ExternalInput-button_91ls0_5 {
12281
+ background-color: var(--puck-color-grey-11);
12282
+ }
12283
+ ._ExternalInput-detachButton_91ls0_35 {
12284
+ border: 1px solid var(--puck-color-grey-09);
12285
+ border-top-right-radius: 4px;
12286
+ border-bottom-right-radius: 4px;
12287
+ background-color: var(--puck-color-grey-12);
12288
+ color: var(--puck-color-grey-05);
12289
+ display: flex;
12290
+ gap: 8px;
12291
+ align-items: center;
12292
+ justify-content: center;
12293
+ padding: 8px 12px;
12294
+ position: relative;
12295
+ transition: background-color 50ms ease-in, color 50ms ease-in;
12296
+ margin-inline-start: -1px;
12297
+ }
12298
+ ._ExternalInput-button_91ls0_5:focus-visible,
12299
+ ._ExternalInput-detachButton_91ls0_35:focus-visible {
12300
+ outline: 2px solid var(--puck-color-azure-05);
12301
+ outline-offset: 2px;
12302
+ z-index: 1;
12303
+ }
12304
+ @media (hover: hover) and (pointer: fine) {
12305
+ ._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-button_91ls0_5:hover,
12306
+ ._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-detachButton_91ls0_35:hover {
12307
+ background: var(--puck-color-azure-12);
12308
+ transition: none;
12309
+ }
12310
+ ._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-detachButton_91ls0_35:hover {
12311
+ color: var(--puck-color-azure-04);
12312
+ }
12313
+ }
12314
+ ._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-button_91ls0_5:active,
12315
+ ._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-detachButton_91ls0_35:active {
12316
+ background: var(--puck-color-azure-11);
12317
+ transition: none;
12318
+ }
12319
+ ._ExternalInputModal_91ls0_79 {
12320
+ color: var(--puck-color-black);
12321
+ display: grid;
12322
+ grid-template-rows: min-content minmax(128px, 100%) min-content;
12323
+ grid-template-columns: 100%;
12324
+ position: relative;
12325
+ min-height: 50dvh;
12326
+ max-height: 90dvh;
12327
+ }
12328
+ ._ExternalInputModal-grid_91ls0_89 {
12329
+ display: flex;
12330
+ flex-direction: column;
12331
+ }
12332
+ @media (min-width: 458px) {
12333
+ ._ExternalInputModal-grid_91ls0_89 {
12334
+ display: grid;
12335
+ grid-template-columns: 100%;
12336
+ }
12337
+ ._ExternalInputModal--filtersToggled_91ls0_100 ._ExternalInputModal-grid_91ls0_89 {
12338
+ grid-template-columns: 25% 75%;
12339
+ }
12340
+ }
12341
+ ._ExternalInputModal-filters_91ls0_105 {
12342
+ border-bottom: 1px solid var(--puck-color-grey-09);
12343
+ }
12344
+ ._ExternalInputModal--filtersToggled_91ls0_100 ._ExternalInputModal-filters_91ls0_105 {
12345
+ display: none;
12346
+ }
12347
+ @media (min-width: 458px) {
12348
+ ._ExternalInputModal-filters_91ls0_105 {
12349
+ border-inline-end: 1px solid var(--puck-color-grey-09);
12350
+ display: none;
12351
+ }
12352
+ ._ExternalInputModal--filtersToggled_91ls0_100 ._ExternalInputModal-filters_91ls0_105 {
12353
+ display: block;
12354
+ }
12355
+ }
12356
+ ._ExternalInputModal-masthead_91ls0_124 {
12357
+ background-color: var(--puck-color-grey-12);
12358
+ border-bottom: 1px solid var(--puck-color-grey-09);
12359
+ display: flex;
12360
+ flex-wrap: wrap;
12361
+ gap: 24px;
12362
+ padding: 24px;
12363
+ }
12364
+ ._ExternalInputModal-tableWrapper_91ls0_133 {
12365
+ position: relative;
12366
+ overflow-x: auto;
12367
+ overflow-y: auto;
12368
+ flex-grow: 1;
12369
+ }
12370
+ ._ExternalInputModal-table_91ls0_133 {
12371
+ border-collapse: unset;
12372
+ border-spacing: 0px;
12373
+ color: var(--puck-color-grey-02);
12374
+ position: relative;
12375
+ z-index: 0;
12376
+ min-width: 100%;
12377
+ }
12378
+ ._ExternalInputModal-thead_91ls0_149 {
12379
+ background-color: var(--puck-color-white);
12380
+ position: sticky;
12381
+ top: 0;
12382
+ z-index: 1;
12383
+ }
12384
+ ._ExternalInputModal-th_91ls0_149 {
12385
+ border-bottom: 1px solid var(--puck-color-grey-09);
12386
+ color: var(--puck-color-grey-04);
12387
+ font-weight: 500;
12388
+ font-size: 14px;
12389
+ padding: 16px 24px;
12390
+ }
12391
+ ._ExternalInputModal-td_91ls0_164 {
12392
+ border-bottom: 1px solid var(--puck-color-grey-10);
12393
+ padding: 16px 24px;
12394
+ }
12395
+ ._ExternalInputModal-tr_91ls0_169 ._ExternalInputModal-td_91ls0_164:first-of-type {
12396
+ font-weight: 500;
12397
+ width: 1%;
12398
+ white-space: nowrap;
12399
+ }
12400
+ @media (hover: hover) and (pointer: fine) {
12401
+ ._ExternalInputModal-tbody_91ls0_176 ._ExternalInputModal-tr_91ls0_169:hover {
12402
+ background: var(--puck-color-azure-12);
12403
+ color: var(--puck-color-azure-04);
12404
+ cursor: pointer;
12405
+ position: relative;
12406
+ margin-inline-start: -5px;
12407
+ }
12408
+ ._ExternalInputModal-tbody_91ls0_176 ._ExternalInputModal-tr_91ls0_169:hover ._ExternalInputModal-td_91ls0_164:first-of-type {
12409
+ border-inline-start: 4px solid var(--puck-color-azure-04);
12410
+ padding-inline-start: 20px;
12411
+ }
12412
+ }
12413
+ ._ExternalInputModal-tbody_91ls0_176 ._ExternalInputModal-tr_91ls0_169:last-of-type ._ExternalInputModal-td_91ls0_164 {
12414
+ border-bottom: none;
12415
+ }
12416
+ ._ExternalInputModal-tableWrapper_91ls0_133 {
12417
+ display: none;
12418
+ }
12419
+ ._ExternalInputModal--hasData_91ls0_202 ._ExternalInputModal-tableWrapper_91ls0_133 {
12420
+ display: block;
12421
+ }
12422
+ ._ExternalInputModal-loadingBanner_91ls0_206 {
12423
+ display: none;
12424
+ background-color: color-mix(in srgb, var(--puck-color-white) 90%, transparent);
12425
+ padding: 64px;
12426
+ align-items: center;
12427
+ justify-content: center;
12428
+ position: absolute;
12429
+ top: 0;
12430
+ left: 0;
12431
+ right: 0;
12432
+ bottom: 0;
12433
+ }
12434
+ ._ExternalInputModal--isLoading_91ls0_223 ._ExternalInputModal-loadingBanner_91ls0_206 {
12435
+ display: flex;
12436
+ }
12437
+ ._ExternalInputModal-searchForm_91ls0_227 {
12438
+ display: flex;
12439
+ flex-wrap: wrap;
12440
+ gap: 12px;
12441
+ flex-grow: 1;
12442
+ }
12443
+ @media (min-width: 458px) {
12444
+ ._ExternalInputModal-searchForm_91ls0_227 {
12445
+ flex-wrap: nowrap;
12446
+ }
12447
+ }
12448
+ ._ExternalInputModal-search_91ls0_227 {
12449
+ display: flex;
12450
+ background: var(--puck-color-white);
12451
+ border-width: 1px;
12452
+ border-style: solid;
12453
+ border-color: var(--puck-color-grey-09);
12454
+ border-radius: 4px;
12455
+ flex-grow: 1;
12456
+ transition: border-color 50ms ease-in;
12457
+ }
12458
+ ._ExternalInputModal-search_91ls0_227:focus-within {
12459
+ border-color: var(--puck-color-grey-05);
12460
+ outline: 2px solid var(--puck-color-azure-05);
12461
+ transition: none;
12462
+ }
12463
+ @media (hover: hover) and (pointer: fine) {
12464
+ ._ExternalInputModal-search_91ls0_227:hover {
12465
+ border-color: var(--puck-color-grey-05);
12466
+ transition: none;
12467
+ }
12468
+ }
12469
+ ._ExternalInputModal-searchIcon_91ls0_264 {
12470
+ align-items: center;
12471
+ background: var(--puck-color-grey-12);
12472
+ border-bottom-left-radius: 4px;
12473
+ border-top-left-radius: 4px;
12474
+ border-inline-end: 1px solid var(--puck-color-grey-09);
12475
+ color: var(--puck-color-grey-07);
12476
+ display: flex;
12477
+ justify-content: center;
12478
+ padding: 12px 15px;
12479
+ transition: color 50ms ease-in;
12480
+ }
12481
+ ._ExternalInputModal-search_91ls0_227:focus-within ._ExternalInputModal-searchIcon_91ls0_264 {
12482
+ color: var(--puck-color-grey-04);
12483
+ transition: none;
12484
+ }
12485
+ @media (hover: hover) and (pointer: fine) {
12486
+ ._ExternalInputModal-search_91ls0_227:hover ._ExternalInputModal-searchIcon_91ls0_264 {
12487
+ color: var(--puck-color-grey-04);
12488
+ transition: none;
12489
+ }
12490
+ }
12491
+ ._ExternalInputModal-searchIconText_91ls0_289 {
12492
+ clip: rect(0 0 0 0);
12493
+ clip-path: inset(100%);
12494
+ height: 1px;
12495
+ overflow: hidden;
12496
+ position: absolute;
12497
+ white-space: nowrap;
12498
+ width: 1px;
12499
+ }
12500
+ ._ExternalInputModal-searchInput_91ls0_299 {
12501
+ border: none;
12502
+ border-radius: 4px;
12503
+ background: var(--puck-color-white);
12504
+ font-family: inherit;
12505
+ font-size: 14px;
12506
+ padding: 12px 15px;
12507
+ width: 100%;
12508
+ }
12509
+ ._ExternalInputModal-searchInput_91ls0_299:focus {
12510
+ outline: 0;
12511
+ }
12512
+ ._ExternalInputModal-searchActions_91ls0_313 {
12513
+ display: flex;
12514
+ gap: 8px;
12515
+ height: 44px;
12516
+ width: 100%;
12517
+ }
12518
+ @media (min-width: 458px) {
12519
+ ._ExternalInputModal-searchActions_91ls0_313 {
12520
+ width: auto;
12521
+ }
12522
+ }
12523
+ ._ExternalInputModal-searchActionIcon_91ls0_326 {
12524
+ align-self: center;
12525
+ }
12526
+ ._ExternalInputModal-footerContainer_91ls0_330 {
12527
+ background-color: var(--puck-color-grey-12);
12528
+ border-top: 1px solid var(--puck-color-grey-09);
12529
+ color: var(--puck-color-grey-04);
12530
+ padding: 16px;
12531
+ }
12532
+ ._ExternalInputModal-footer_91ls0_330 {
12533
+ font-weight: 500;
12534
+ font-size: 14px;
12535
+ text-align: right;
12536
+ }
12537
+ ._ExternalInputModal-field_91ls0_343 {
12538
+ color: var(--puck-color-grey-04);
12539
+ margin: 16px;
12540
+ margin-bottom: 12px;
12541
+ display: block;
12542
+ }
12543
+
12544
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css/#css-module-data */
12545
+ ._Modal_ikbaj_1 {
12546
+ background: color-mix(in srgb, var(--puck-color-black) 75%, transparent);
12547
+ display: none;
12548
+ justify-content: center;
12549
+ align-items: center;
12550
+ position: fixed;
12551
+ top: 0;
12552
+ left: 0;
12553
+ bottom: 0;
12554
+ right: 0;
12555
+ z-index: 1;
12556
+ padding: 32px;
12557
+ }
12558
+ ._Modal--isOpen_ikbaj_15 {
12559
+ display: flex;
12560
+ }
12561
+ ._Modal-inner_ikbaj_19 {
12562
+ width: 100%;
12563
+ max-width: 1024px;
12564
+ border-radius: 8px;
12565
+ overflow: hidden;
12566
+ background: var(--puck-color-white);
12567
+ display: flex;
12568
+ flex-direction: column;
12569
+ max-height: 90dvh;
12570
+ }
12571
+
12572
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css/#css-module-data */
12573
+ ._Heading_qxrry_1 {
12574
+ display: block;
12575
+ color: var(--puck-color-black);
12576
+ font-weight: 700;
12577
+ margin: 0;
12578
+ }
12579
+ ._Heading_qxrry_1 b {
12580
+ font-weight: 700;
12581
+ }
12582
+ ._Heading--xxxxl_qxrry_12 {
12583
+ font-size: var(--puck-font-size-xxxxl);
12584
+ letter-spacing: 0.08ch;
12585
+ font-weight: 800;
12586
+ }
12587
+ ._Heading--xxxl_qxrry_18 {
12588
+ font-size: var(--puck-font-size-xxxl);
12589
+ }
12590
+ ._Heading--xxl_qxrry_22 {
12591
+ font-size: var(--puck-font-size-xxl);
12592
+ }
12593
+ ._Heading--xl_qxrry_26 {
12594
+ font-size: var(--puck-font-size-xl);
12595
+ }
12596
+ ._Heading--l_qxrry_30 {
12597
+ font-size: var(--puck-font-size-l);
12598
+ }
12599
+ ._Heading--m_qxrry_34 {
12600
+ font-size: var(--puck-font-size-m);
12601
+ }
12602
+ ._Heading--s_qxrry_38 {
12603
+ font-size: var(--puck-font-size-s);
12604
+ }
12605
+ ._Heading--xs_qxrry_42 {
12606
+ font-size: var(--puck-font-size-xs);
12607
+ }
12608
+
12609
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css/#css-module-data */
12610
+ ._Button_10byl_1 {
12611
+ appearance: none;
12612
+ background: none;
12613
+ border: 1px solid transparent;
12614
+ border-radius: 4px;
12615
+ color: var(--puck-color-white);
12616
+ display: inline-flex;
12617
+ align-items: center;
12618
+ gap: 8px;
12619
+ letter-spacing: 0.05ch;
12620
+ font-family: var(--puck-font-family);
12621
+ font-size: 14px;
12622
+ font-weight: 400;
12623
+ box-sizing: border-box;
12624
+ line-height: 1;
12625
+ text-align: center;
12626
+ text-decoration: none;
12627
+ transition: background-color 50ms ease-in;
12628
+ cursor: pointer;
12629
+ white-space: nowrap;
12630
+ margin: 0;
12631
+ }
12632
+ ._Button_10byl_1:hover,
12633
+ ._Button_10byl_1:active {
12634
+ transition: none;
12635
+ }
12636
+ ._Button--medium_10byl_29 {
12637
+ min-height: 34px;
12638
+ padding-bottom: 7px;
12639
+ padding-inline-start: 19px;
12640
+ padding-inline-end: 19px;
12641
+ padding-top: 7px;
12642
+ }
12643
+ ._Button--large_10byl_37 {
12644
+ padding-bottom: 11px;
12645
+ padding-inline-start: 19px;
12646
+ padding-inline-end: 19px;
12647
+ padding-top: 11px;
12648
+ }
12649
+ ._Button-icon_10byl_44 {
12650
+ margin-top: 2px;
12651
+ }
12652
+ ._Button--primary_10byl_48 {
12653
+ background: var(--puck-color-azure-04);
12654
+ }
12655
+ ._Button_10byl_1:focus-visible {
12656
+ outline: 2px solid var(--puck-color-azure-05);
12657
+ outline-offset: 2px;
12658
+ }
12659
+ @media (hover: hover) and (pointer: fine) {
12660
+ ._Button--primary_10byl_48:hover {
12661
+ background-color: var(--puck-color-azure-03);
12662
+ }
12663
+ }
12664
+ ._Button--primary_10byl_48:active {
12665
+ background-color: var(--puck-color-azure-02);
12666
+ }
12667
+ ._Button--secondary_10byl_67 {
12668
+ border: 1px solid currentColor;
12669
+ color: currentColor;
12670
+ }
12671
+ @media (hover: hover) and (pointer: fine) {
12672
+ ._Button--secondary_10byl_67:hover {
12673
+ background-color: var(--puck-color-azure-12);
12674
+ color: var(--puck-color-black);
12675
+ }
12676
+ }
12677
+ ._Button--secondary_10byl_67:active {
12678
+ background-color: var(--puck-color-azure-11);
12679
+ color: var(--puck-color-black);
12680
+ }
12681
+ ._Button--flush_10byl_84 {
12682
+ border-radius: 0;
12683
+ }
12684
+ ._Button--disabled_10byl_88,
12685
+ ._Button--disabled_10byl_88:hover {
12686
+ background-color: var(--puck-color-grey-07);
12687
+ color: var(--puck-color-grey-03);
12688
+ cursor: not-allowed;
12689
+ }
12690
+ ._Button--fullWidth_10byl_95 {
12691
+ justify-content: center;
12692
+ width: 100%;
12693
+ }
12694
+ ._Button-spinner_10byl_100 {
12695
+ padding-inline-start: 8px;
12696
+ }
12697
+
12698
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/RichTextMenu/styles.module.css/#css-module-data */
12699
+ ._RichTextMenu_k97eh_1 {
12700
+ display: flex;
12701
+ flex-direction: row;
12702
+ flex-wrap: nowrap;
12703
+ }
12704
+ ._RichTextMenu--form_k97eh_7 {
12705
+ border-top-left-radius: 4px;
12706
+ border-top-right-radius: 4px;
12707
+ padding: 6px 6px;
12708
+ background-color: var(--puck-color-grey-12);
12709
+ position: relative;
12710
+ scrollbar-width: none;
12711
+ overflow-x: auto;
12712
+ }
12713
+ ._RichTextMenu-group_k97eh_17 {
12714
+ display: flex;
12715
+ align-items: space-between;
12716
+ flex-direction: row;
12717
+ flex-wrap: nowrap;
12718
+ padding-inline: 6px;
12719
+ gap: 2px;
12720
+ position: relative;
12721
+ }
12722
+ ._RichTextMenu-group_k97eh_17:first-of-type {
12723
+ padding-left: 0;
12724
+ }
12725
+ ._RichTextMenu-group_k97eh_17:last-of-type {
12726
+ padding-right: 0;
12727
+ }
12728
+ ._RichTextMenu--inline_k97eh_35 ._RichTextMenu-group_k97eh_17 {
12729
+ color: var(--puck-color-grey-08);
12730
+ gap: 0px;
12731
+ flex-wrap: nowrap;
12732
+ }
12733
+ ._RichTextMenu-group_k97eh_17 + ._RichTextMenu-group_k97eh_17 {
12734
+ border-left: 1px solid var(--puck-color-grey-10);
12735
+ }
12736
+ ._RichTextMenu--inline_k97eh_35 ._RichTextMenu-group_k97eh_17 + ._RichTextMenu-group_k97eh_17 {
12737
+ border-left: 0.5px solid var(--puck-color-grey-05);
12738
+ }
12739
+
12740
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/RichTextMenu/components/Control/styles.module.css/#css-module-data */
12741
+ ._Control_1aveu_1 .lucide {
12742
+ height: 18px;
12743
+ width: 18px;
12744
+ }
12745
+ ._Control--inline_1aveu_6 .lucide {
12746
+ height: 16px;
12747
+ width: 16px;
12748
+ }
12749
+
12750
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Select/styles.module.css/#css-module-data */
12751
+ ._Select_xjbef_1 {
12752
+ position: relative;
12753
+ z-index: 1;
12754
+ }
12755
+ ._Select-button_xjbef_6 {
12756
+ align-items: center;
12757
+ background: transparent;
12758
+ border: none;
12759
+ border-radius: 4px;
12760
+ display: flex;
12761
+ justify-content: center;
12762
+ gap: 0px;
12763
+ height: 100%;
12764
+ padding: 4px;
12765
+ padding-right: 2px;
12766
+ }
12767
+ ._Select--hasOptions_xjbef_19 ._Select-button_xjbef_6 {
12768
+ color: currentColor;
12769
+ }
12770
+ ._Select--hasOptions_xjbef_19:not(._Select--disabled_xjbef_23) ._Select-button_xjbef_6 {
12771
+ cursor: pointer;
12772
+ }
12773
+ ._Select-buttonIcon_xjbef_27 {
12774
+ align-items: center;
12775
+ display: flex;
12776
+ justify-content: center;
12777
+ }
12778
+ ._Select--standalone_xjbef_33 ._Select-buttonIcon_xjbef_27 .lucide {
12779
+ height: 18px;
12780
+ width: 18px;
12781
+ }
12782
+ ._Select--actionBar_xjbef_38 ._Select-buttonIcon_xjbef_27 .lucide {
12783
+ height: 16px;
12784
+ width: 16px;
12785
+ }
12786
+ ._Select--hasOptions_xjbef_19:not(._Select--disabled_xjbef_23) ._Select-button_xjbef_6:hover,
12787
+ ._Select--hasValue_xjbef_44 ._Select-button_xjbef_6 {
12788
+ background: var(--puck-color-grey-10);
12789
+ color: var(--puck-color-azure-04);
12790
+ }
12791
+ ._Select--disabled_xjbef_23 ._Select-button_xjbef_6 {
12792
+ color: var(--puck-color-grey-07);
12793
+ }
12794
+ ._Select--actionBar_xjbef_38 {
12795
+ &._Select--hasOptions_xjbef_19 ._Select-button_xjbef_6:hover,
12796
+ &._Select--hasValue_xjbef_44 ._Select-button_xjbef_6 {
12797
+ background: none;
12798
+ color: var(--puck-color-azure-07);
12799
+ }
12800
+ }
12801
+ ._Select-items_xjbef_61 {
12802
+ background: white;
12803
+ border: 1px solid var(--puck-color-grey-09);
12804
+ border-radius: 8px;
12805
+ margin: 10px 8px;
12806
+ margin-left: 0;
12807
+ padding: 4px;
12808
+ z-index: 2;
12809
+ list-style: none;
12810
+ }
12811
+ ._SelectItem_xjbef_72 {
12812
+ background: transparent;
12813
+ border-radius: 4px;
12814
+ border: none;
12815
+ color: var(--puck-color-grey-04);
12816
+ cursor: pointer;
12817
+ display: flex;
12818
+ gap: 8px;
12819
+ align-items: center;
12820
+ font-size: var(--puck-font-size-xxs);
12821
+ margin: 0;
12822
+ padding: 8px 12px;
12823
+ width: 100%;
12824
+ }
12825
+ ._SelectItem--isSelected_xjbef_87 {
12826
+ background: var(--puck-color-azure-11);
12827
+ color: var(--puck-color-azure-04);
12828
+ font-weight: 500;
12829
+ }
12830
+ ._SelectItem--isSelected_xjbef_87 ._SelectItem-icon_xjbef_93 {
12831
+ color: var(--puck-color-azure-04);
12832
+ }
12833
+ ._SelectItem_xjbef_72:hover {
12834
+ background: var(--puck-color-azure-11);
12835
+ color: var(--puck-color-azure-04);
12836
+ }
12837
+
12838
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/RichTextEditor/styles.module.css/#css-module-data */
12839
+ ._RichTextEditor_z25h4_1 .ProseMirror {
12840
+ white-space: pre-wrap;
12841
+ word-wrap: break-word;
12842
+ cursor: text;
12843
+ outline: none;
12844
+ position: relative;
12845
+ }
12846
+ ._RichTextEditor_z25h4_1 .rich-text * {
12847
+ white-space: pre-wrap;
12848
+ user-select: auto;
12849
+ -webkit-user-select: auto;
12850
+ }
12851
+ ._RichTextEditor_z25h4_1 .rich-text blockquote {
12852
+ margin: 1em 0;
12853
+ padding: 0 1em;
12854
+ border-left: 4px solid var(--puck-color-grey-09);
12855
+ }
12856
+ ._RichTextEditor_z25h4_1 .rich-text code {
12857
+ background-color: var(--puck-color-grey-11);
12858
+ padding: 4px 8px;
12859
+ border-radius: 4px;
12860
+ }
12861
+ ._RichTextEditor_z25h4_1 .rich-text p:empty::before {
12862
+ content: "\\a0";
12863
+ }
12864
+ ._RichTextEditor_z25h4_1 .rich-text pre code {
12865
+ display: block;
12866
+ padding: 8px 12px;
12867
+ }
12868
+ ._RichTextEditor_z25h4_1 .rich-text > *:first-child,
12869
+ ._RichTextEditor_z25h4_1 .ProseMirror > *:first-child,
12870
+ ._RichTextEditor_z25h4_1 .rich-text * p:first-of-type {
12871
+ margin-top: 0;
12872
+ }
12873
+ ._RichTextEditor_z25h4_1 .rich-text > *:last-child,
12874
+ ._RichTextEditor_z25h4_1 .ProseMirror > *:last-child,
12875
+ ._RichTextEditor_z25h4_1 .rich-text * p:last-of-type {
12876
+ margin-bottom: 0;
12877
+ }
12878
+ ._RichTextEditor--editor_z25h4_50 {
12879
+ background: var(--puck-color-white);
12880
+ border-width: 1px;
12881
+ border-style: solid;
12882
+ border-color: var(--puck-color-grey-09);
12883
+ border-radius: 4px;
12884
+ box-sizing: border-box;
12885
+ display: flex;
12886
+ flex-direction: column;
12887
+ font-family: inherit;
12888
+ font-size: var(--puck-font-size-xxs);
12889
+ resize: vertical;
12890
+ text-align: initial;
12891
+ transition: border-color 50ms ease-in;
12892
+ width: 100%;
12893
+ max-width: 100%;
12894
+ min-height: 128px;
12895
+ }
12896
+ ._RichTextEditor--editor_z25h4_50 .rich-text {
12897
+ flex-grow: 1;
12898
+ }
12899
+ ._RichTextEditor--editor_z25h4_50 .rich-text:not(:has(.ProseMirror)),
12900
+ ._RichTextEditor--editor_z25h4_50 .rich-text .ProseMirror {
12901
+ height: 100%;
12902
+ padding: 12px 15px;
12903
+ }
12904
+ ._RichTextEditor--editor_z25h4_50 .rich-text ul,
12905
+ ._RichTextEditor--editor_z25h4_50 .rich-text ol {
12906
+ padding-left: 24px;
12907
+ }
12908
+ ._RichTextEditor--editor_z25h4_50 .rich-text li {
12909
+ line-height: 1.5;
12910
+ }
12911
+ ._RichTextEditor--editor_z25h4_50 .rich-text p {
12912
+ margin-block: 12px;
12913
+ }
12914
+ ._RichTextEditor--editor_z25h4_50 .rich-text ul {
12915
+ list-style: disc;
12916
+ }
12917
+ ._RichTextEditor--editor_z25h4_50 .rich-text ol {
12918
+ list-style: decimal;
12919
+ }
12920
+ ._RichTextEditor--editor_z25h4_50:focus-within {
12921
+ border-color: var(--puck-color-grey-05);
12922
+ outline: 2px solid var(--puck-color-azure-05);
12923
+ transition: none;
12924
+ }
12925
+ ._RichTextEditor--editor_z25h4_50._RichTextEditor--disabled_z25h4_107 {
12926
+ background: var(--puck-color-grey-11);
12927
+ }
12928
+ ._RichTextEditor_z25h4_1:not(:focus-within):not(._RichTextEditor--isActive_z25h4_111) .ProseMirror ::selection {
12929
+ background-color: transparent;
12930
+ }
12931
+ ._RichTextEditor-menu_z25h4_117 {
12932
+ border-bottom: 1px solid var(--puck-color-grey-10);
12933
+ position: sticky;
12934
+ top: 0;
12935
+ z-index: 1;
12936
+ }
12937
+ ._RichTextEditor--disabled_z25h4_107 ._RichTextEditor-menu_z25h4_117 {
12938
+ border-bottom: 1px solid var(--puck-color-grey-09);
12939
+ }
12940
+
12941
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/fields/ObjectField/styles.module.css/#css-module-data */
12942
+ ._ObjectField_1ua3y_5 {
12943
+ display: flex;
12944
+ flex-direction: column;
12945
+ background-color: var(--puck-color-white);
12946
+ border: 1px solid var(--puck-color-grey-09);
12947
+ border-radius: 4px;
12948
+ }
12949
+ ._ObjectField-fieldset_1ua3y_13 {
12950
+ border: none;
12951
+ margin: 0;
12952
+ min-width: 0;
12953
+ padding: 16px 15px;
12954
+ }
12955
+
12956
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */
12957
+ ._Drawer_pl7z0_1 {
12958
+ display: flex;
12959
+ flex-direction: column;
12960
+ font-family: var(--puck-font-family);
12961
+ gap: 12px;
12962
+ }
12963
+ ._Drawer-draggable_pl7z0_8 {
12964
+ position: relative;
12965
+ }
12966
+ ._Drawer-draggableBg_pl7z0_12 {
12967
+ position: absolute;
12968
+ top: 0;
12969
+ right: 0;
12970
+ bottom: 0;
12971
+ left: 0;
12972
+ pointer-events: none;
12973
+ z-index: -1;
12974
+ }
12975
+ ._DrawerItem-draggable_pl7z0_22 {
12976
+ background: var(--puck-color-white);
12977
+ cursor: grab;
12978
+ padding: 12px;
12979
+ display: flex;
12980
+ border: 1px var(--puck-color-grey-09) solid;
12981
+ border-radius: 4px;
12982
+ font-size: var(--puck-font-size-xxs);
12983
+ justify-content: space-between;
12984
+ align-items: center;
12985
+ transition: background-color 50ms ease-in, color 50ms ease-in;
12986
+ }
12987
+ ._DrawerItem--disabled_pl7z0_35 ._DrawerItem-draggable_pl7z0_22 {
12988
+ background: var(--puck-color-grey-11);
12989
+ color: var(--puck-color-grey-05);
12990
+ cursor: not-allowed;
12991
+ }
12992
+ ._DrawerItem_pl7z0_22:focus-visible {
12993
+ outline: 0;
12994
+ }
12995
+ ._Drawer_pl7z0_1:not(._Drawer--isDraggingFrom_pl7z0_45) ._DrawerItem_pl7z0_22:focus-visible ._DrawerItem-draggable_pl7z0_22 {
12996
+ border-radius: 4px;
12997
+ outline: 2px solid var(--puck-color-azure-05);
12998
+ outline-offset: 2px;
12999
+ }
13000
+ @media (hover: hover) and (pointer: fine) {
13001
+ ._Drawer_pl7z0_1:not(._Drawer--isDraggingFrom_pl7z0_45) ._DrawerItem_pl7z0_22:not(._DrawerItem--disabled_pl7z0_35) ._DrawerItem-draggable_pl7z0_22:hover {
13002
+ background-color: var(--puck-color-azure-12);
13003
+ color: var(--puck-color-azure-04);
13004
+ transition: none;
13005
+ }
13006
+ }
13007
+ ._DrawerItem-name_pl7z0_63 {
13008
+ overflow-x: hidden;
13009
+ text-overflow: ellipsis;
13010
+ white-space: nowrap;
13011
+ }
13012
+
13013
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
13014
+ ._DraggableComponent_1vaqy_1 {
13015
+ position: absolute;
13016
+ pointer-events: none;
13017
+ --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
13018
+ }
13019
+ ._DraggableComponent-overlayWrapper_1vaqy_12 {
13020
+ height: 100%;
13021
+ width: 100%;
13022
+ top: 0;
13023
+ position: absolute;
13024
+ pointer-events: none;
13025
+ box-sizing: border-box;
13026
+ z-index: 1;
13027
+ }
13028
+ ._DraggableComponent-overlay_1vaqy_12 {
13029
+ cursor: pointer;
13030
+ height: 100%;
13031
+ outline: 2px var(--puck-color-azure-09) solid;
13032
+ outline-offset: -2px;
13033
+ width: 100%;
13034
+ }
13035
+ ._DraggableComponent_1vaqy_1:focus-visible > ._DraggableComponent-overlayWrapper_1vaqy_12 {
13036
+ outline: 1px solid var(--puck-color-azure-05);
13037
+ }
13038
+ ._DraggableComponent-loadingOverlay_1vaqy_34 {
13039
+ background: var(--puck-color-white);
13040
+ color: var(--puck-color-grey-03);
13041
+ border-radius: 4px;
13042
+ display: flex;
13043
+ padding: 8px;
13044
+ top: 8px;
13045
+ right: 8px;
13046
+ position: absolute;
13047
+ z-index: 1;
13048
+ pointer-events: all;
13049
+ box-sizing: border-box;
13050
+ opacity: 0.8;
13051
+ z-index: 1;
13052
+ }
13053
+ ._DraggableComponent--hover_1vaqy_50 > ._DraggableComponent-overlayWrapper_1vaqy_12 > ._DraggableComponent-overlay_1vaqy_12 {
13054
+ background: var(--overlay-background);
13055
+ outline: 2px var(--puck-color-azure-09) solid;
13056
+ }
13057
+ ._DraggableComponent--isSelected_1vaqy_57 > ._DraggableComponent-overlayWrapper_1vaqy_12 > ._DraggableComponent-overlay_1vaqy_12 {
13058
+ outline-color: var(--puck-color-azure-07);
13059
+ }
13060
+ ._DraggableComponent_1vaqy_1:has(._DraggableComponent--hover_1vaqy_50 > ._DraggableComponent-overlayWrapper_1vaqy_12) > ._DraggableComponent-overlayWrapper_1vaqy_12 {
13061
+ display: none;
13062
+ }
13063
+ ._DraggableComponent-actionsOverlay_1vaqy_71 {
13064
+ position: sticky;
13065
+ opacity: 0;
13066
+ pointer-events: none;
13067
+ z-index: 2;
13068
+ }
13069
+ ._DraggableComponent--isSelected_1vaqy_57 ._DraggableComponent-actionsOverlay_1vaqy_71 {
13070
+ opacity: 1;
13071
+ pointer-events: auto;
13072
+ }
13073
+ ._DraggableComponent-actions_1vaqy_71 {
13074
+ position: absolute;
13075
+ width: auto;
13076
+ cursor: grab;
13077
+ display: flex;
13078
+ box-sizing: border-box;
13079
+ transform-origin: right top;
13080
+ min-height: 36px;
13081
+ }
13082
+
13083
+ /* components/DraggableComponent/styles.css */
13084
+ [data-puck-component] * {
13085
+ pointer-events: none;
13086
+ user-select: none;
13087
+ -webkit-user-select: none;
13088
+ }
13089
+ [data-puck-component] {
13090
+ cursor: grab;
13091
+ pointer-events: auto !important;
13092
+ user-select: none;
13093
+ -webkit-user-select: none;
13094
+ }
13095
+ [data-puck-dropzone] {
13096
+ pointer-events: auto !important;
13097
+ }
13098
+ [data-puck-disabled] {
13099
+ cursor: pointer;
13100
+ }
13101
+ [data-dnd-placeholder] {
13102
+ background: var(--puck-color-azure-06, #6499cf) !important;
13103
+ border: none !important;
13104
+ color: #00000000 !important;
13105
+ opacity: 0.3 !important;
13106
+ outline: none !important;
13107
+ transition: none !important;
13108
+ }
13109
+ [data-dnd-placeholder] *,
13110
+ [data-dnd-placeholder]::after,
13111
+ [data-dnd-placeholder]::before {
13112
+ opacity: 0 !important;
13113
+ }
13114
+ [data-dnd-dragging][data-puck-component] {
13115
+ pointer-events: none !important;
13116
+ outline: 2px var(--puck-color-azure-09, #cfdff0) solid !important;
13117
+ outline-offset: -2px !important;
13118
+ }
13119
+ [data-dnd-dragging][data-puck-component] > :first-child {
13120
+ margin-top: 0 !important;
13121
+ }
13122
+ [data-dnd-dragging][data-puck-component] > :last-child {
13123
+ margin-bottom: 0 !important;
13124
+ }
13125
+
13126
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
13127
+ ._DropZone_1i2sv_1 {
13128
+ --resize-animation-ms: 150ms;
13129
+ position: relative;
13130
+ height: 100%;
13131
+ min-height: var(--min-empty-height);
13132
+ outline-offset: -2px;
13133
+ width: 100%;
13134
+ }
13135
+ ._DropZone--hasChildren_1i2sv_11 {
13136
+ min-height: 0;
13137
+ }
13138
+ ._DropZone_1i2sv_1:empty {
13139
+ min-height: var(--min-empty-height);
13140
+ }
13141
+ [data-puck-entry]:not([data-puck-dragging]) ._DropZone_1i2sv_1 {
13142
+ transition: min-height var(--resize-animation-ms) ease-in;
13143
+ }
13144
+ ._DropZone--isAreaSelected_1i2sv_24,
13145
+ ._DropZone--hoveringOverArea_1i2sv_25:not(._DropZone--isRootZone_1i2sv_25) {
13146
+ background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
13147
+ outline: 2px dashed var(--puck-color-azure-08);
13148
+ }
13149
+ ._DropZone_1i2sv_1:empty {
13150
+ background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
13151
+ outline: 2px dashed var(--puck-color-azure-08);
13152
+ }
13153
+ ._DropZone--isDestination_1i2sv_35 {
13154
+ outline: 2px dashed var(--puck-color-azure-04) !important;
13155
+ }
13156
+ ._DropZone--isDestination_1i2sv_35:not(._DropZone--isRootZone_1i2sv_25) {
13157
+ background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent) !important;
13158
+ }
13159
+ ._DropZone-item_1i2sv_47 {
13160
+ position: relative;
13161
+ }
13162
+ ._DropZone-hitbox_1i2sv_51 {
13163
+ position: absolute;
13164
+ bottom: -12px;
13165
+ height: 24px;
13166
+ width: 100%;
13167
+ z-index: 1;
13168
+ }
13169
+ [data-puck-dragging] ._DropZone--isEnabled_1i2sv_59 {
13170
+ outline: 2px dashed var(--puck-color-azure-06);
13171
+ }
13172
+ ._DropZone_1i2sv_1 > *:not([data-puck-component]) {
13173
+ opacity: 0;
13174
+ }
13175
+ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
13176
+ opacity: 0 !important;
13177
+ }
13178
+
13179
+ /* lib/overlay-portal/styles.css */
13180
+ [data-puck-overlay-portal],
13181
+ [data-puck-overlay-portal] * {
13182
+ pointer-events: auto !important;
13183
+ }
13184
+ [data-puck-overlay-portal]:hover {
13185
+ outline: 2px var(--puck-color-azure-09, #cfdff0) dashed;
13186
+ outline-offset: 2px;
13187
+ }
13188
+ [data-puck-overlay-portal]:focus-within {
13189
+ outline: 2px var(--puck-color-azure-07, #88b0da) dashed;
13190
+ outline-offset: 2px;
13191
+ }
13192
+
13193
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css/#css-module-data */
13194
+ ._InlineTextField_104qp_1 {
13195
+ cursor: text;
13196
+ display: inline-block;
13197
+ white-space: pre-wrap;
13198
+ text-decoration: inherit;
13199
+ }
13200
+ [data-dnd-dragging] ._InlineTextField_104qp_1 {
13201
+ cursor: none;
13202
+ caret-color: transparent;
13203
+ }
13204
+ [data-dnd-dragging] ._InlineTextField_104qp_1::selection {
13205
+ display: none;
13206
+ }
13207
+
13208
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
13209
+ ._PuckFields_10bh7_1 {
13210
+ position: relative;
13211
+ font-family: var(--puck-font-family);
13212
+ }
13213
+ ._PuckFields--isLoading_10bh7_6 {
13214
+ min-height: 48px;
13215
+ }
13216
+ ._PuckFields-loadingOverlay_10bh7_10 {
13217
+ background: var(--puck-color-white);
13218
+ display: flex;
13219
+ justify-content: flex-end;
13220
+ align-items: flex-start;
13221
+ height: 100%;
13222
+ width: 100%;
13223
+ top: 0px;
13224
+ position: absolute;
13225
+ z-index: 1;
13226
+ pointer-events: all;
13227
+ box-sizing: border-box;
13228
+ opacity: 0.8;
13229
+ }
13230
+ ._PuckFields-loadingOverlayInner_10bh7_25 {
13231
+ display: flex;
13232
+ padding: 16px;
13233
+ position: sticky;
13234
+ top: 0;
13235
+ }
13236
+ ._PuckFields-field_10bh7_32 * {
13237
+ box-sizing: border-box;
13238
+ }
13239
+ ._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 {
13240
+ color: var(--puck-color-grey-04);
13241
+ padding: 16px;
13242
+ padding-bottom: 12px;
13243
+ display: block;
13244
+ }
13245
+ ._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 + ._PuckFields-field_10bh7_32 {
13246
+ border-top: 1px solid var(--puck-color-grey-09);
13247
+ margin-top: 8px;
13248
+ }
13249
+
13250
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
13251
+ ._ComponentList_1rrlt_1 {
13252
+ max-width: 100%;
13253
+ }
13254
+ ._ComponentList--isExpanded_1rrlt_5 + ._ComponentList_1rrlt_1 {
13255
+ margin-top: 12px;
13256
+ }
13257
+ ._ComponentList-content_1rrlt_9 {
13258
+ display: none;
13259
+ }
13260
+ ._ComponentList--isExpanded_1rrlt_5 > ._ComponentList-content_1rrlt_9 {
13261
+ display: block;
13262
+ }
13263
+ ._ComponentList-title_1rrlt_17 {
13264
+ background-color: transparent;
13265
+ border: 0;
13266
+ color: var(--puck-color-grey-05);
13267
+ cursor: pointer;
13268
+ display: flex;
13269
+ font: inherit;
13270
+ font-size: var(--puck-font-size-xxxs);
13271
+ list-style: none;
13272
+ margin-bottom: 6px;
13273
+ padding: 8px;
13274
+ text-transform: uppercase;
13275
+ transition: background-color 50ms ease-in, color 50ms ease-in;
13276
+ gap: 4px;
13277
+ border-radius: 4px;
13278
+ width: 100%;
13279
+ }
13280
+ ._ComponentList-title_1rrlt_17:focus-visible {
13281
+ outline: 2px solid var(--puck-color-azure-05);
13282
+ outline-offset: 2px;
13283
+ }
13284
+ @media (hover: hover) and (pointer: fine) {
13285
+ ._ComponentList-title_1rrlt_17:hover {
13286
+ background-color: var(--puck-color-azure-11);
13287
+ color: var(--puck-color-azure-04);
13288
+ transition: none;
13289
+ }
13290
+ }
13291
+ ._ComponentList-title_1rrlt_17:active {
13292
+ background-color: var(--puck-color-azure-10);
13293
+ transition: none;
13294
+ }
13295
+ ._ComponentList-titleIcon_1rrlt_53 {
13296
+ margin-inline-start: auto;
13297
+ }
13298
+
13299
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
13300
+ ._PuckPreview_z2rgu_1 {
13301
+ position: relative;
13302
+ height: 100%;
13303
+ }
13304
+ ._PuckPreview-frame_z2rgu_6 {
13305
+ border: none;
13306
+ height: 100%;
13307
+ width: 100%;
13308
+ }
13309
+
13310
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css/#css-module-data */
13311
+ ._LayerTree_7rx04_1 {
13312
+ color: var(--puck-color-grey-03);
13313
+ font-family: var(--puck-font-family);
13314
+ font-size: var(--puck-font-size-xxs);
13315
+ margin: 0;
13316
+ position: relative;
13317
+ list-style: none;
13318
+ padding: 0;
13319
+ }
13320
+ ._LayerTree-zoneTitle_7rx04_11 {
13321
+ color: var(--puck-color-grey-05);
13322
+ font-size: var(--puck-font-size-xxxs);
13323
+ text-transform: uppercase;
13324
+ }
13325
+ ._LayerTree-helper_7rx04_17 {
13326
+ text-align: center;
13327
+ color: var(--puck-color-grey-07);
13328
+ margin: 8px 4px;
13329
+ }
13330
+ ._Layer_7rx04_1 {
13331
+ position: relative;
13332
+ border: 1px solid transparent;
13333
+ border-radius: 4px;
13334
+ }
13335
+ ._Layer-inner_7rx04_29 {
13336
+ border: 1px solid transparent;
13337
+ border-radius: 4px;
13338
+ transition: color 50ms ease-in;
13339
+ }
13340
+ ._Layer--containsZone_7rx04_35 > ._Layer-inner_7rx04_29 {
13341
+ padding-inline-start: 0;
13342
+ }
13343
+ ._Layer-clickable_7rx04_39 {
13344
+ align-items: center;
13345
+ background: none;
13346
+ border: 0;
13347
+ border-radius: 4px;
13348
+ color: inherit;
13349
+ cursor: pointer;
13350
+ display: flex;
13351
+ font: inherit;
13352
+ padding-inline-start: 12px;
13353
+ padding-inline-end: 4px;
13354
+ width: 100%;
13355
+ }
13356
+ ._Layer-clickable_7rx04_39:focus-visible {
13357
+ outline: 2px solid var(--puck-color-azure-05);
13358
+ outline-offset: 2px;
13359
+ position: relative;
13360
+ z-index: 1;
13361
+ }
13362
+ @media (hover: hover) and (pointer: fine) {
13363
+ ._Layer_7rx04_1:not(._Layer--isSelected_7rx04_61) > ._Layer-inner_7rx04_29:hover {
13364
+ border-color: var(--puck-color-azure-10);
13365
+ background: var(--puck-color-azure-11);
13366
+ color: var(--puck-color-azure-04);
13367
+ transition: none;
13368
+ }
13369
+ }
13370
+ ._Layer--isSelected_7rx04_61 {
13371
+ border-color: var(--puck-color-azure-08);
13372
+ }
13373
+ ._Layer--isSelected_7rx04_61 > ._Layer-inner_7rx04_29 {
13374
+ background: var(--puck-color-azure-10);
13375
+ }
13376
+ ._Layer--isSelected_7rx04_61 > ._Layer-inner_7rx04_29 > ._Layer-clickable_7rx04_39 > ._Layer-chevron_7rx04_77,
13377
+ ._Layer--childIsSelected_7rx04_78 > ._Layer-inner_7rx04_29 > ._Layer-clickable_7rx04_39 > ._Layer-chevron_7rx04_77 {
13378
+ transform: scaleY(-1);
13379
+ }
13380
+ ._Layer-zones_7rx04_82 {
13381
+ display: none;
13382
+ margin-inline-start: 12px;
13383
+ }
13384
+ ._Layer--isSelected_7rx04_61 > ._Layer-zones_7rx04_82,
13385
+ ._Layer--childIsSelected_7rx04_78 > ._Layer-zones_7rx04_82 {
13386
+ display: block;
13387
+ }
13388
+ ._Layer-zones_7rx04_82 > ._LayerTree_7rx04_1 {
13389
+ margin-inline-start: 12px;
13390
+ }
13391
+ ._Layer-title_7rx04_96,
13392
+ ._LayerTree-zoneTitle_7rx04_11 {
13393
+ display: flex;
13394
+ gap: 8px;
13395
+ align-items: center;
13396
+ margin: 8px 4px;
13397
+ overflow-x: hidden;
13398
+ }
13399
+ ._Layer-name_7rx04_105 {
13400
+ overflow-x: hidden;
13401
+ text-overflow: ellipsis;
13402
+ white-space: nowrap;
13403
+ }
13404
+ ._Layer-icon_7rx04_111 {
13405
+ color: var(--puck-color-rose-07);
13406
+ margin-top: 4px;
13407
+ }
13408
+ ._Layer-zoneIcon_7rx04_116 {
13409
+ color: var(--puck-color-grey-08);
13410
+ margin-top: 4px;
13411
+ }
13412
+
13413
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Layout/styles.module.css/#css-module-data */
13414
+ ._Puck_cgc86_19 {
13415
+ --puck-space-px: 16px;
13416
+ font-family: var(--puck-font-family);
13417
+ overflow-x: hidden;
13418
+ visibility: visible !important;
13419
+ }
13420
+ @media (min-width: 766px) {
13421
+ ._Puck_cgc86_19 {
13422
+ overflow-x: auto;
13423
+ }
13424
+ }
13425
+ ._Puck-portal_cgc86_32 {
13426
+ position: relative;
13427
+ z-index: 2;
13428
+ }
13429
+ ._PuckLayout_cgc86_37 {
13430
+ height: 100dvh;
13431
+ }
13432
+ ._PuckLayout-inner_cgc86_41 {
13433
+ --puck-frame-width: auto;
13434
+ --puck-side-nav-width: min-content;
13435
+ --puck-side-bar-width: 0px;
13436
+ --puck-left-side-bar-width: var( --puck-user-left-side-bar-width, var(--puck-side-bar-width) );
13437
+ --puck-right-side-bar-width: var( --puck-user-right-side-bar-width, var(--puck-side-bar-width) );
13438
+ background-color: var(--puck-color-grey-12);
13439
+ display: grid;
13440
+ grid-template-areas: "header" "editor" "left" "right" "sidenav";
13441
+ grid-template-columns: var(--puck-frame-width);
13442
+ grid-template-rows: min-content auto 0 0 var(--puck-side-nav-width);
13443
+ height: 100%;
13444
+ position: relative;
13445
+ transition: grid-template-rows 150ms ease-in;
13446
+ z-index: 0;
13447
+ overflow: hidden;
13448
+ }
13449
+ @media (min-width: 638px) {
13450
+ ._PuckLayout-inner_cgc86_41 {
13451
+ --puck-side-nav-width: 68px;
13452
+ grid-template-areas: "header header header header" "sidenav left editor right";
13453
+ grid-template-columns: var(--puck-side-nav-width) 0 var(--puck-frame-width) 0;
13454
+ grid-template-rows: min-content auto;
13455
+ }
13456
+ ._Puck--hidePlugins_cgc86_73 ._PuckLayout-inner_cgc86_41 {
13457
+ --puck-side-nav-width: 0;
13458
+ }
13459
+ }
13460
+ ._PuckLayout--mounted_cgc86_78 ._PuckLayout-inner_cgc86_41 {
13461
+ --puck-side-bar-width: 186px;
13462
+ }
13463
+ ._PuckLayout--mobilePanelHeightToggle_cgc86_82._PuckLayout--leftSideBarVisible_cgc86_82 ._PuckLayout-inner_cgc86_41 {
13464
+ grid-template-rows: 0 auto 30% 0 var(--puck-side-nav-width);
13465
+ }
13466
+ ._PuckLayout--mobilePanelHeightToggle_cgc86_82._PuckLayout--leftSideBarVisible_cgc86_82._PuckLayout--isExpanded_cgc86_88 ._PuckLayout-inner_cgc86_41 {
13467
+ grid-template-rows: 0 auto 55% 0 var(--puck-side-nav-width);
13468
+ }
13469
+ @media (min-width: 638px) {
13470
+ ._PuckLayout--mobilePanelHeightToggle_cgc86_82._PuckLayout--leftSideBarVisible_cgc86_82 ._PuckLayout-inner_cgc86_41 {
13471
+ grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) 0;
13472
+ grid-template-rows: min-content auto;
13473
+ }
13474
+ }
13475
+ ._PuckLayout--mobilePanelHeightMinContent_cgc86_106._PuckLayout--leftSideBarVisible_cgc86_82 ._PuckLayout-inner_cgc86_41,
13476
+ ._PuckLayout--mobilePanelHeightMinContent_cgc86_106._PuckLayout--leftSideBarVisible_cgc86_82._PuckLayout--isExpanded_cgc86_88 ._PuckLayout-inner_cgc86_41 {
13477
+ grid-template-rows: 0 auto min-content 0 var(--puck-side-nav-width);
13478
+ }
13479
+ @media (min-width: 638px) {
13480
+ ._PuckLayout--mobilePanelHeightToggle_cgc86_82._PuckLayout--leftSideBarVisible_cgc86_82 ._PuckLayout-inner_cgc86_41,
13481
+ ._PuckLayout--mobilePanelHeightToggle_cgc86_82._PuckLayout--leftSideBarVisible_cgc86_82._PuckLayout--isExpanded_cgc86_88 ._PuckLayout-inner_cgc86_41,
13482
+ ._PuckLayout--mobilePanelHeightMinContent_cgc86_106._PuckLayout--leftSideBarVisible_cgc86_82 ._PuckLayout-inner_cgc86_41,
13483
+ ._PuckLayout--mobilePanelHeightMinContent_cgc86_106._PuckLayout--leftSideBarVisible_cgc86_82._PuckLayout--isExpanded_cgc86_88 ._PuckLayout-inner_cgc86_41 {
13484
+ grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) 0;
13485
+ grid-template-rows: min-content auto;
13486
+ }
13487
+ }
13488
+ @media (min-width: 638px) {
13489
+ ._PuckLayout--rightSideBarVisible_cgc86_133 ._PuckLayout-inner_cgc86_41 {
13490
+ grid-template-columns: var(--puck-side-nav-width) 0 var(--puck-frame-width) var(--puck-right-side-bar-width);
13491
+ }
13492
+ }
13493
+ @media (min-width: 638px) {
13494
+ ._PuckLayout--leftSideBarVisible_cgc86_82._PuckLayout--rightSideBarVisible_cgc86_133 ._PuckLayout-inner_cgc86_41 {
13495
+ grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) var(--puck-right-side-bar-width);
13496
+ }
13497
+ }
13498
+ @media (min-width: 458px) {
13499
+ ._PuckLayout-mounted_cgc86_152 ._PuckLayout-inner_cgc86_41 {
13500
+ --puck-frame-width: minmax(266px, auto);
13501
+ }
13502
+ }
13503
+ @media (min-width: 638px) {
13504
+ ._PuckLayout_cgc86_37 ._PuckLayout-inner_cgc86_41 {
13505
+ --puck-side-bar-width: minmax(186px, 250px);
13506
+ }
13507
+ }
13508
+ @media (min-width: 766px) {
13509
+ ._PuckLayout_cgc86_37 ._PuckLayout-inner_cgc86_41 {
13510
+ --puck-frame-width: auto;
13511
+ }
13512
+ }
13513
+ @media (min-width: 990px) {
13514
+ ._PuckLayout_cgc86_37 ._PuckLayout-inner_cgc86_41 {
13515
+ --puck-side-bar-width: 256px;
13516
+ }
13517
+ }
13518
+ @media (min-width: 1198px) {
13519
+ ._PuckLayout_cgc86_37 ._PuckLayout-inner_cgc86_41 {
13520
+ --puck-side-bar-width: 274px;
13521
+ }
13522
+ }
13523
+ @media (min-width: 1398px) {
13524
+ ._PuckLayout_cgc86_37 ._PuckLayout-inner_cgc86_41 {
13525
+ --puck-side-bar-width: 290px;
13526
+ }
13527
+ }
13528
+ @media (min-width: 1598px) {
13529
+ ._PuckLayout_cgc86_37 ._PuckLayout-inner_cgc86_41 {
13530
+ --puck-side-bar-width: 320px;
13531
+ }
13532
+ }
13533
+ ._PuckLayout-nav_cgc86_193 {
13534
+ border-top: 1px solid var(--puck-color-grey-09);
13535
+ background-color: var(--puck-color-grey-12);
13536
+ grid-area: sidenav;
13537
+ overflow: hidden;
13538
+ width: 100%;
13539
+ }
13540
+ @media (min-width: 638px) {
13541
+ ._PuckLayout-nav_cgc86_193 {
13542
+ border-top: 0;
13543
+ border-right: 1px solid var(--puck-color-grey-09);
13544
+ box-sizing: border-box;
13545
+ }
13546
+ }
13547
+ ._PuckLayout-header_cgc86_209 {
13548
+ grid-area: header;
13549
+ }
13550
+ ._PuckLayout--leftSideBarVisible_cgc86_82 ._PuckLayout-header_cgc86_209 {
13551
+ overflow: hidden;
13552
+ }
13553
+ @media (min-width: 638px) {
13554
+ ._PuckLayout--leftSideBarVisible_cgc86_82 ._PuckLayout-header_cgc86_209 {
13555
+ overflow: auto;
13556
+ }
13557
+ }
13558
+ ._PuckPluginTab_cgc86_223 {
13559
+ display: none;
13560
+ flex-grow: 1;
13561
+ max-height: 100%;
13562
+ }
13563
+ ._PuckPluginTab--visible_cgc86_229 {
13564
+ display: flex;
13565
+ flex-direction: column;
13566
+ }
13567
+ ._PuckPluginTab-body_cgc86_234 {
13568
+ flex-grow: 1;
13569
+ max-height: 100%;
13570
+ }
13571
+
13572
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
13573
+ ._MenuBar_8pf8c_1 {
13574
+ background-color: var(--puck-color-white);
13575
+ border-bottom: 1px solid var(--puck-color-grey-09);
13576
+ display: none;
13577
+ left: 0;
13578
+ margin-top: 1px;
13579
+ padding: 8px 16px;
13580
+ position: absolute;
13581
+ right: 0;
13582
+ top: 100%;
13583
+ z-index: 2;
13584
+ }
13585
+ ._MenuBar--menuOpen_8pf8c_14 {
13586
+ display: block;
13587
+ }
13588
+ @media (min-width: 638px) {
13589
+ ._MenuBar_8pf8c_1 {
13590
+ border: none;
13591
+ display: block;
13592
+ margin-top: 0;
13593
+ overflow-y: visible;
13594
+ padding: 0;
13595
+ position: static;
13596
+ }
13597
+ }
13598
+ ._MenuBar-inner_8pf8c_29 {
13599
+ align-items: center;
13600
+ display: flex;
13601
+ flex-wrap: wrap;
13602
+ gap: 8px 16px;
13603
+ justify-content: flex-end;
13604
+ }
13605
+ @media (min-width: 638px) {
13606
+ ._MenuBar-inner_8pf8c_29 {
13607
+ display: flex;
13608
+ flex-direction: row;
13609
+ flex-wrap: nowrap;
13610
+ }
13611
+ }
13612
+ ._MenuBar-history_8pf8c_45 {
13613
+ display: flex;
13614
+ }
13615
+
13616
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css/#css-module-data */
13617
+ ._PuckHeader_63pti_1 {
13618
+ background: var(--puck-color-white);
13619
+ border-bottom: 1px solid var(--puck-color-grey-09);
13620
+ color: var(--puck-color-black);
13621
+ grid-area: header;
13622
+ position: relative;
13623
+ max-width: 100vw;
13624
+ }
13625
+ @media (min-width: 638px) {
13626
+ ._PuckHeader_63pti_1 {
13627
+ padding-left: 67px;
13628
+ }
13629
+ ._PuckHeader--hidePlugins_63pti_15 {
13630
+ padding-left: 0;
13631
+ }
13632
+ }
13633
+ ._PuckHeader-inner_63pti_20 {
13634
+ align-items: end;
13635
+ display: grid;
13636
+ gap: var(--puck-space-px);
13637
+ grid-template-areas: "left middle right";
13638
+ grid-template-columns: 1fr auto 1fr;
13639
+ grid-template-rows: auto;
13640
+ padding: var(--puck-space-px);
13641
+ }
13642
+ @media (min-width: 638px) {
13643
+ ._PuckHeader-inner_63pti_20 {
13644
+ border-left: 1px solid var(--puck-color-grey-09);
13645
+ }
13646
+ ._PuckHeader--hidePlugins_63pti_15 ._PuckHeader-inner_63pti_20 {
13647
+ border-left: none;
13648
+ }
13649
+ }
13650
+ ._PuckHeader-toggle_63pti_40 {
13651
+ color: var(--puck-color-grey-05);
13652
+ display: flex;
13653
+ margin-inline-start: -4px;
13654
+ padding-top: 2px;
13655
+ }
13656
+ ._PuckHeader--rightSideBarVisible_63pti_47 ._PuckHeader-rightSideBarToggle_63pti_47,
13657
+ ._PuckHeader--leftSideBarVisible_63pti_48 ._PuckHeader-leftSideBarToggle_63pti_48 {
13658
+ color: var(--puck-color-black);
13659
+ }
13660
+ ._PuckHeader-rightSideBarToggle_63pti_47,
13661
+ ._PuckHeader-leftSideBarToggle_63pti_48 {
13662
+ display: none;
13663
+ }
13664
+ @media (min-width: 638px) {
13665
+ ._PuckHeader-rightSideBarToggle_63pti_47,
13666
+ ._PuckHeader-leftSideBarToggle_63pti_48 {
13667
+ display: block;
13668
+ }
13669
+ }
13670
+ ._PuckHeader-title_63pti_64 {
13671
+ align-self: center;
13672
+ }
13673
+ ._PuckHeader-path_63pti_68 {
13674
+ font-family: var(--puck-font-family-monospaced);
13675
+ font-size: var(--puck-font-size-xxs);
13676
+ font-weight: normal;
13677
+ word-break: break-all;
13678
+ }
13679
+ ._PuckHeader-tools_63pti_75 {
13680
+ display: flex;
13681
+ gap: 16px;
13682
+ justify-content: flex-end;
13683
+ }
13684
+ ._PuckHeader-menuButton_63pti_81 {
13685
+ color: var(--puck-color-grey-05);
13686
+ margin-inline-start: -4px;
13687
+ }
13688
+ ._PuckHeader--menuOpen_63pti_86 ._PuckHeader-menuButton_63pti_81 {
13689
+ color: var(--puck-color-black);
13690
+ }
13691
+ @media (min-width: 638px) {
13692
+ ._PuckHeader-menuButton_63pti_81 {
13693
+ display: none;
13694
+ }
13695
+ }
13696
+
13697
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
13698
+ ._SidebarSection_5otpt_1 {
13699
+ display: flex;
13700
+ position: relative;
13701
+ flex-direction: column;
13702
+ color: var(--puck-color-black);
13703
+ }
13704
+ ._SidebarSection_5otpt_1:last-of-type {
13705
+ flex-grow: 1;
13706
+ }
13707
+ ._SidebarSection-title_5otpt_12 {
13708
+ background: var(--puck-color-white);
13709
+ padding: 16px;
13710
+ border-bottom: 1px solid var(--puck-color-grey-09);
13711
+ border-top: 1px solid var(--puck-color-grey-09);
13712
+ overflow-x: auto;
13713
+ }
13714
+ ._SidebarSection--noBorderTop_5otpt_20 > ._SidebarSection-title_5otpt_12 {
13715
+ border-top: 0px;
13716
+ }
13717
+ ._SidebarSection-content_5otpt_24:last-child {
13718
+ padding-bottom: 4px;
13719
+ }
13720
+ ._SidebarSection_5otpt_1:last-of-type ._SidebarSection-content_5otpt_24 {
13721
+ border-bottom: none;
13722
+ flex-grow: 1;
13723
+ }
13724
+ ._SidebarSection-breadcrumbLabel_5otpt_33 {
13725
+ background: none;
13726
+ border: 0;
13727
+ border-radius: 2px;
13728
+ color: var(--puck-color-azure-04);
13729
+ cursor: pointer;
13730
+ font: inherit;
13731
+ flex-shrink: 0;
13732
+ padding: 0;
13733
+ transition: color 50ms ease-in;
13734
+ }
13735
+ ._SidebarSection-breadcrumbLabel_5otpt_33:focus-visible {
13736
+ outline: 2px solid var(--puck-color-azure-05);
13737
+ outline-offset: 2px;
13738
+ }
13739
+ @media (hover: hover) and (pointer: fine) {
13740
+ ._SidebarSection-breadcrumbLabel_5otpt_33:hover {
13741
+ color: var(--puck-color-azure-03);
13742
+ transition: none;
13743
+ }
13744
+ }
13745
+ ._SidebarSection-breadcrumbLabel_5otpt_33:active {
13746
+ color: var(--puck-color-azure-02);
13747
+ transition: none;
13748
+ }
13749
+ ._SidebarSection-breadcrumbs_5otpt_62 {
13750
+ align-items: center;
13751
+ display: flex;
13752
+ gap: 4px;
13753
+ }
13754
+ ._SidebarSection-breadcrumb_5otpt_33 {
13755
+ align-items: center;
13756
+ display: flex;
13757
+ gap: 4px;
13758
+ }
13759
+ ._SidebarSection-heading_5otpt_74 {
13760
+ padding-inline-end: 16px;
13761
+ }
13762
+ ._SidebarSection-loadingOverlay_5otpt_78 {
13763
+ background: var(--puck-color-white);
13764
+ display: flex;
13765
+ justify-content: center;
13766
+ align-items: center;
13767
+ height: 100%;
13768
+ width: 100%;
13769
+ top: 0;
13770
+ position: absolute;
13771
+ z-index: 1;
13772
+ pointer-events: all;
13773
+ box-sizing: border-box;
13774
+ opacity: 0.8;
13775
+ }
13776
+
13777
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Breadcrumbs/styles.module.css/#css-module-data */
13778
+ ._Breadcrumbs_1c9yh_1 {
13779
+ align-items: center;
13780
+ display: flex;
13781
+ gap: 4px;
13782
+ }
13783
+ ._Breadcrumbs-breadcrumbLabel_1c9yh_7 {
13784
+ background: none;
13785
+ border: 0;
13786
+ border-radius: 2px;
13787
+ color: var(--puck-color-azure-04);
13788
+ cursor: pointer;
13789
+ font: inherit;
13790
+ flex-shrink: 0;
13791
+ padding: 0;
13792
+ transition: color 50ms ease-in;
13793
+ }
13794
+ ._Breadcrumbs-breadcrumbLabel_1c9yh_7:focus-visible {
13795
+ outline: 2px solid var(--puck-color-azure-05);
13796
+ outline-offset: 2px;
13797
+ }
13798
+ @media (hover: hover) and (pointer: fine) {
13799
+ ._Breadcrumbs-breadcrumbLabel_1c9yh_7:hover {
13800
+ color: var(--puck-color-azure-03);
13801
+ transition: none;
13802
+ }
13803
+ }
13804
+ ._Breadcrumbs-breadcrumbLabel_1c9yh_7:active {
13805
+ color: var(--puck-color-azure-02);
13806
+ transition: none;
13807
+ }
13808
+ ._Breadcrumbs-breadcrumb_1c9yh_7 {
13809
+ align-items: center;
13810
+ display: flex;
13811
+ gap: 4px;
13812
+ }
13813
+
13814
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
13815
+ ._ViewportControls_e3unb_1 {
13816
+ position: relative;
13817
+ }
13818
+ ._ViewportControls--fullScreen_e3unb_5 {
13819
+ border-radius: 32px;
13820
+ display: flex;
13821
+ position: absolute;
13822
+ bottom: 12px;
13823
+ right: 12px;
13824
+ overflow: hidden;
13825
+ }
13826
+ ._ViewportControls-toggleButton_e3unb_14 {
13827
+ display: none;
13828
+ }
13829
+ ._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-toggleButton_e3unb_14 {
13830
+ align-items: center;
13831
+ background-color: var(--puck-color-grey-02);
13832
+ border: 1px solid var(--puck-color-grey-04);
13833
+ border-radius: 30px;
13834
+ cursor: pointer;
13835
+ color: var(--puck-color-grey-11);
13836
+ display: flex;
13837
+ justify-content: center;
13838
+ width: 42px;
13839
+ height: 42px;
13840
+ z-index: 1;
13841
+ }
13842
+ ._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-toggleButton_e3unb_14:hover {
13843
+ background-color: var(--puck-color-grey-02);
13844
+ border: 1px solid var(--puck-color-azure-04);
13845
+ color: var(--puck-color-azure-07);
13846
+ }
13847
+ ._ViewportControls--isExpanded_e3unb_38 ._ViewportControls-toggleButton_e3unb_14 {
13848
+ background-color: var(--puck-color-grey-03);
13849
+ }
13850
+ ._ViewportControls-actions_e3unb_42 {
13851
+ display: flex;
13852
+ }
13853
+ ._ViewportControls-actionsInner_e3unb_46 {
13854
+ display: flex;
13855
+ box-sizing: border-box;
13856
+ justify-content: center;
13857
+ margin-left: auto;
13858
+ margin-right: auto;
13859
+ z-index: 0;
13860
+ overflow: hidden;
13861
+ }
13862
+ ._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-actionsInner_e3unb_46 {
13863
+ background: var(--puck-color-grey-11);
13864
+ border: 1px solid var(--puck-color-grey-09);
13865
+ border-radius: 30px;
13866
+ margin-left: none;
13867
+ margin-right: none;
13868
+ padding-right: 42px;
13869
+ }
13870
+ ._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-actionsInner_e3unb_46 {
13871
+ transform: translateX(100%);
13872
+ transition: transform 150ms ease-in-out;
13873
+ }
13874
+ ._ViewportControls--fullScreen_e3unb_5._ViewportControls--isExpanded_e3unb_38 ._ViewportControls-actionsInner_e3unb_46 {
13875
+ transform: translateX(42px);
13876
+ }
13877
+ ._ViewportControls-divider_e3unb_75 {
13878
+ border-inline-end: 1px solid var(--puck-color-grey-09);
13879
+ margin-bottom: 8px;
13880
+ margin-top: 8px;
13881
+ }
13882
+ ._ViewportControls-zoomSelect_e3unb_81 {
13883
+ appearance: none;
13884
+ 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;
13885
+ background-size: 10px;
13886
+ background-position: calc(100% - 12px) calc(50% + 3px);
13887
+ background-repeat: no-repeat;
13888
+ border: 0;
13889
+ font-size: var(--puck-font-size-xxxs);
13890
+ padding: 0;
13891
+ padding-left: 8px;
13892
+ width: 96px;
13893
+ }
13894
+ ._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-zoom_e3unb_81 {
13895
+ display: none;
13896
+ }
13897
+ @media (min-width: 638px) {
13898
+ ._ViewportControls-zoom_e3unb_81,
13899
+ ._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-zoom_e3unb_81 {
13900
+ display: flex;
13901
+ justify-content: center;
13902
+ }
13903
+ }
13904
+ ._ViewportControls-zoomSelect_e3unb_81:dir(rtl) {
13905
+ background-position: 12px calc(50% + 3px);
13906
+ }
13907
+ ._ViewportButton-inner_e3unb_111 {
13908
+ align-items: center;
13909
+ display: flex;
13910
+ justify-content: center;
13911
+ height: 32px;
13912
+ width: 32px;
13913
+ }
13914
+ ._ViewportButton--isActive_e3unb_119 ._ViewportButton-inner_e3unb_111 {
13915
+ color: var(--puck-color-azure-04);
13916
+ }
13917
+
13918
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
13919
+ ._PuckCanvas_t6s9b_1 {
13920
+ background: var(--puck-color-grey-11);
13921
+ display: flex;
13922
+ grid-area: editor;
13923
+ flex-direction: column;
13924
+ padding: var(--puck-space-px);
13925
+ position: relative;
13926
+ overflow: auto;
13927
+ }
13928
+ @media (min-width: 1198px) {
13929
+ ._PuckCanvas_t6s9b_1 {
13930
+ padding: calc(var(--puck-space-px) * 1.5);
13931
+ padding-top: calc(var(--puck-space-px) * 0.5);
13932
+ }
13933
+ ._PuckCanvas_t6s9b_1:not(._PuckCanvas_t6s9b_1:has(._PuckCanvas-controls_t6s9b_17)) {
13934
+ padding-top: calc(var(--puck-space-px) * 1.5);
13935
+ }
13936
+ }
13937
+ ._PuckCanvas--fullScreen_t6s9b_22 {
13938
+ padding: 0;
13939
+ overflow: hidden;
13940
+ }
13941
+ @media (min-width: 1198px) {
13942
+ ._PuckCanvas--fullScreen_t6s9b_22 {
13943
+ padding: 0;
13944
+ }
13945
+ }
13946
+ ._PuckCanvas-inner_t6s9b_33 {
13947
+ display: flex;
13948
+ height: 100%;
13949
+ justify-content: center;
13950
+ min-width: 288px;
13951
+ position: relative;
13952
+ width: 100%;
13953
+ }
13954
+ ._PuckCanvas-root_t6s9b_42 {
13955
+ background: white;
13956
+ outline: 1px solid var(--puck-color-grey-09);
13957
+ box-sizing: content-box;
13958
+ min-width: 321px;
13959
+ position: absolute;
13960
+ pointer-events: none;
13961
+ transform-origin: top;
13962
+ top: 0;
13963
+ bottom: 0;
13964
+ opacity: 0;
13965
+ }
13966
+ @media (min-width: 1198px) {
13967
+ ._PuckCanvas-root_t6s9b_42 {
13968
+ min-width: unset;
13969
+ }
13970
+ }
13971
+ @media (prefers-reduced-motion: reduce) {
13972
+ ._PuckCanvas-root_t6s9b_42 {
13973
+ transition: none !important;
13974
+ }
13975
+ }
13976
+ ._PuckCanvas--ready_t6s9b_67 ._PuckCanvas-root_t6s9b_42 {
13977
+ pointer-events: unset;
13978
+ opacity: 1;
13979
+ }
13980
+ ._PuckCanvas-loader_t6s9b_72 {
13981
+ align-items: center;
13982
+ color: var(--puck-color-grey-06);
13983
+ display: flex;
13984
+ height: 100%;
13985
+ justify-content: center;
13986
+ transition: opacity 250ms ease-out;
13987
+ opacity: 0;
13988
+ }
13989
+ ._PuckCanvas--showLoader_t6s9b_82 ._PuckCanvas-loader_t6s9b_72 {
13990
+ opacity: 1;
13991
+ }
13992
+ ._PuckCanvas--showLoader_t6s9b_82._PuckCanvas--ready_t6s9b_67 ._PuckCanvas-loader_t6s9b_72 {
13993
+ opacity: 0;
13994
+ height: 0;
13995
+ transition: none;
13996
+ }
13997
+ ._PuckCanvas-controls_t6s9b_17 {
13998
+ padding-bottom: calc(var(--puck-space-px) * 0.5);
13999
+ }
14000
+ ._PuckCanvas--fullScreen_t6s9b_22 ._PuckCanvas-controls_t6s9b_17 {
14001
+ padding-bottom: 0;
14002
+ z-index: 1;
14003
+ }
14004
+
14005
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css/#css-module-data */
14006
+ @media (min-width: 766px) {
14007
+ ._ResizeHandle_144bf_2 {
14008
+ position: absolute;
14009
+ width: 5px;
14010
+ height: 100%;
14011
+ cursor: col-resize;
14012
+ z-index: 10;
14013
+ background: transparent;
14014
+ top: 0;
14015
+ }
14016
+ ._ResizeHandle_144bf_2:hover {
14017
+ background: rgba(0, 0, 0, 0.1);
14018
+ }
14019
+ ._ResizeHandle--left_144bf_16 {
14020
+ right: -3px;
14021
+ }
14022
+ ._ResizeHandle--right_144bf_20 {
14023
+ left: -3px;
14024
+ }
14025
+ }
14026
+
14027
+ /* components/Puck/components/ResizeHandle/styles.css */
14028
+ [data-resize-overlay] {
14029
+ position: fixed;
14030
+ top: 0;
14031
+ left: 0;
14032
+ right: 0;
14033
+ bottom: 0;
14034
+ z-index: 9999;
14035
+ cursor: col-resize;
14036
+ }
14037
+
14038
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Sidebar/styles.module.css/#css-module-data */
14039
+ ._Sidebar_o396p_1 {
14040
+ border-block-start: 1px solid var(--puck-color-grey-09);
14041
+ position: relative;
14042
+ display: none;
14043
+ flex-direction: column;
14044
+ overflow-y: auto;
14045
+ }
14046
+ ._Sidebar--isVisible_o396p_9 {
14047
+ display: flex;
14048
+ }
14049
+ ._Sidebar--left_o396p_13 {
14050
+ background: var(--puck-color-grey-12);
14051
+ grid-area: left;
14052
+ }
14053
+ @media (min-width: 766px) {
14054
+ ._Sidebar--left_o396p_13 {
14055
+ border-block-start: 0;
14056
+ border-inline-end: 1px solid var(--puck-color-grey-09);
14057
+ }
14058
+ }
14059
+ ._Sidebar--right_o396p_25 {
14060
+ background: var(--puck-color-white);
14061
+ grid-area: right;
14062
+ }
14063
+ @media (min-width: 766px) {
14064
+ ._Sidebar--right_o396p_25 {
14065
+ border-block-start: 0;
14066
+ border-inline-start: 1px solid var(--puck-color-grey-09);
14067
+ }
14068
+ }
14069
+ ._Sidebar-resizeHandle_o396p_37 {
14070
+ position: absolute;
14071
+ height: 100%;
14072
+ }
14073
+ ._Sidebar--left_o396p_13 + ._Sidebar-resizeHandle_o396p_37 {
14074
+ grid-area: left;
14075
+ justify-self: end;
14076
+ }
14077
+ ._Sidebar--right_o396p_25 + ._Sidebar-resizeHandle_o396p_37 {
14078
+ grid-area: right;
14079
+ justify-self: start;
14080
+ }
14081
+
14082
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Nav/styles.module.css/#css-module-data */
14083
+ ._Nav_1tvxq_1 {
14084
+ display: flex;
14085
+ }
14086
+ ._Nav-list_1tvxq_5 {
14087
+ display: flex;
14088
+ list-style: none;
14089
+ margin: 0;
14090
+ padding: 0;
14091
+ overflow-x: auto;
14092
+ gap: 8px;
14093
+ }
14094
+ @media (min-width: 638px) {
14095
+ ._Nav-list_1tvxq_5 {
14096
+ padding-top: 32px;
14097
+ flex-direction: column;
14098
+ gap: 16px;
14099
+ width: 100%;
14100
+ }
14101
+ }
14102
+ ._Nav-mobileActions_1tvxq_23 {
14103
+ align-items: center;
14104
+ display: flex;
14105
+ justify-content: center;
14106
+ margin-inline-start: auto;
14107
+ padding: 4px 16px;
14108
+ border-inline-start: 1px solid var(--puck-color-grey-09);
14109
+ }
14110
+ @media (min-width: 638px) {
14111
+ ._Nav-mobileActions_1tvxq_23 {
14112
+ display: none;
14113
+ }
14114
+ }
14115
+ ._NavItem-link_1tvxq_38 {
14116
+ text-align: center;
14117
+ align-items: center;
14118
+ color: var(--puck-color-grey-03);
14119
+ display: flex;
14120
+ gap: 8px;
14121
+ text-decoration: none;
14122
+ cursor: pointer;
14123
+ border-radius: 4px;
14124
+ padding: 8px 4px;
14125
+ width: 64px;
14126
+ box-sizing: border-box;
14127
+ }
14128
+ @media (min-width: 638px) {
14129
+ ._NavItem-link_1tvxq_38 {
14130
+ width: auto;
14131
+ }
14132
+ }
14133
+ ._NavItem_1tvxq_38:first-of-type {
14134
+ padding-left: 16px;
14135
+ }
14136
+ ._NavItem_1tvxq_38:last-of-type {
14137
+ padding-right: 16px;
14138
+ }
14139
+ @media (min-width: 638px) {
14140
+ ._NavItem_1tvxq_38:first-of-type,
14141
+ ._NavItem_1tvxq_38:last-of-type {
14142
+ padding: 0;
14143
+ }
14144
+ }
14145
+ ._NavItem-link_1tvxq_38 {
14146
+ border-top: 4px solid transparent;
14147
+ border-bottom: 4px solid transparent;
14148
+ border-radius: 0;
14149
+ flex-direction: column;
14150
+ font-size: var(--puck-font-size-xxxs);
14151
+ }
14152
+ @media (min-width: 638px) {
14153
+ ._NavItem-link_1tvxq_38 {
14154
+ border: 0;
14155
+ border-left: 4px solid transparent;
14156
+ border-right: 4px solid transparent;
14157
+ }
14158
+ }
14159
+ ._NavItem-linkIcon_1tvxq_89 {
14160
+ height: 24px;
14161
+ width: 24px;
14162
+ }
14163
+ ._NavItem--active_1tvxq_94 > ._NavItem-link_1tvxq_38 {
14164
+ background-color: var(--puck-color-azure-10);
14165
+ color: var(--puck-color-azure-04);
14166
+ font-weight: 600;
14167
+ }
14168
+ ._NavItem--active_1tvxq_94 > ._NavItem-link_1tvxq_38 {
14169
+ background-color: transparent;
14170
+ border-top-color: var(--puck-color-azure-04);
14171
+ border-top-right-radius: 0;
14172
+ border-bottom-right-radius: 0;
14173
+ font-weight: 600;
14174
+ }
14175
+ @media (min-width: 638px) {
14176
+ ._NavItem--active_1tvxq_94 > ._NavItem-link_1tvxq_38 {
14177
+ border-top-color: transparent;
14178
+ border-right-color: var(--puck-color-azure-04);
14179
+ }
14180
+ }
14181
+ ._NavItem_1tvxq_38:not(._NavItem--active_1tvxq_94) > ._NavItem-link_1tvxq_38:hover {
14182
+ background-color: var(--puck-color-azure-11);
14183
+ color: var(--puck-color-azure-04);
14184
+ }
14185
+ @media (min-width: 638px) {
14186
+ ._NavItem--mobileOnly_1tvxq_121 {
14187
+ display: none;
14188
+ }
14189
+ }
14190
+ ._NavItem--desktopOnly_1tvxq_126 {
14191
+ display: none;
14192
+ }
14193
+ @media (min-width: 638px) {
14194
+ ._NavItem--desktopOnly_1tvxq_126 {
14195
+ display: block;
14196
+ }
14197
+ }
14198
+
14199
+ /* css-module:/home/runner/work/puck/puck/packages/core/plugins/blocks/styles.module.css/#css-module-data */
14200
+ ._BlocksPlugin_1ey1i_1 {
14201
+ padding: 16px;
14202
+ height: 100%;
14203
+ overflow-y: auto;
14204
+ box-sizing: border-box;
14205
+ }
14206
+
14207
+ /* css-module:/home/runner/work/puck/puck/packages/core/plugins/outline/styles.module.css/#css-module-data */
14208
+ ._OutlinePlugin_q92j6_1 {
14209
+ padding: 16px;
14210
+ height: 100%;
14211
+ overflow-y: auto;
14212
+ box-sizing: border-box;
14213
+ }
14214
+
14215
+ /* css-module:/home/runner/work/puck/puck/packages/core/plugins/fields/styles.module.css/#css-module-data */
14216
+ ._FieldsPlugin_nd930_1 {
14217
+ background: white;
14218
+ height: 100%;
14219
+ overflow-y: auto;
14220
+ }
14221
+ ._FieldsPlugin-header_nd930_7 {
14222
+ border-bottom: 1px solid var(--puck-color-grey-09);
14223
+ font-weight: 600;
14224
+ padding-bottom: 8px;
14225
+ padding-left: 16px;
14226
+ padding-right: 16px;
14227
+ padding-top: 8px;
14228
+ }
14229
+ @media (min-width: 638px) {
14230
+ ._FieldsPlugin-header_nd930_7 {
14231
+ padding: 16px;
14232
+ }
14233
+ }`;
14234
+ var iframeInteractionStyles = '/* styles/color.css */\n:root {\n --puck-color-rose-01: #4a001c;\n --puck-color-rose-02: #670833;\n --puck-color-rose-03: #87114c;\n --puck-color-rose-04: #a81a66;\n --puck-color-rose-05: #bc5089;\n --puck-color-rose-06: #cc7ca5;\n --puck-color-rose-07: #d89aba;\n --puck-color-rose-08: #e3b8cf;\n --puck-color-rose-09: #efd6e3;\n --puck-color-rose-10: #f6eaf1;\n --puck-color-rose-11: #faf4f8;\n --puck-color-rose-12: #fef8fc;\n --puck-color-azure-01: #00175d;\n --puck-color-azure-02: #002c77;\n --puck-color-azure-03: #014292;\n --puck-color-azure-04: #0158ad;\n --puck-color-azure-05: #3479be;\n --puck-color-azure-06: #6499cf;\n --puck-color-azure-07: #88b0da;\n --puck-color-azure-08: #abc7e5;\n --puck-color-azure-09: #cfdff0;\n --puck-color-azure-10: #e7eef7;\n --puck-color-azure-11: #f3f6fb;\n --puck-color-azure-12: #f7faff;\n --puck-color-green-01: #002000;\n --puck-color-green-02: #043604;\n --puck-color-green-03: #084e08;\n --puck-color-green-04: #0c680c;\n --puck-color-green-05: #1d882f;\n --puck-color-green-06: #2faa53;\n --puck-color-green-07: #56c16f;\n --puck-color-green-08: #7dd78b;\n --puck-color-green-09: #b8e8bf;\n --puck-color-green-10: #ddf3e0;\n --puck-color-green-11: #eff8f0;\n --puck-color-green-12: #f3fcf4;\n --puck-color-yellow-01: #211000;\n --puck-color-yellow-02: #362700;\n --puck-color-yellow-03: #4c4000;\n --puck-color-yellow-04: #645a00;\n --puck-color-yellow-05: #877614;\n --puck-color-yellow-06: #ab9429;\n --puck-color-yellow-07: #bfac4e;\n --puck-color-yellow-08: #d4c474;\n --puck-color-yellow-09: #e6deb1;\n --puck-color-yellow-10: #f3efd9;\n --puck-color-yellow-11: #f9f7ed;\n --puck-color-yellow-12: #fcfaf0;\n --puck-color-red-01: #4c0000;\n --puck-color-red-02: #6a0a10;\n --puck-color-red-03: #8a1422;\n --puck-color-red-04: #ac1f35;\n --puck-color-red-05: #bf5366;\n --puck-color-red-06: #ce7e8e;\n --puck-color-red-07: #d99ca8;\n --puck-color-red-08: #e4b9c2;\n --puck-color-red-09: #efd7db;\n --puck-color-red-10: #f6eaec;\n --puck-color-red-11: #faf4f5;\n --puck-color-red-12: #fff9fa;\n --puck-color-grey-01: #181818;\n --puck-color-grey-02: #292929;\n --puck-color-grey-03: #404040;\n --puck-color-grey-04: #5a5a5a;\n --puck-color-grey-05: #767676;\n --puck-color-grey-06: #949494;\n --puck-color-grey-07: #ababab;\n --puck-color-grey-08: #c3c3c3;\n --puck-color-grey-09: #dcdcdc;\n --puck-color-grey-10: #efefef;\n --puck-color-grey-11: #f5f5f5;\n --puck-color-grey-12: #fafafa;\n --puck-color-black: #000000;\n --puck-color-white: #ffffff;\n}\n\n/* styles/typography.css */\n:root {\n --puck-font-size-scale-base-unitless: 12;\n --puck-font-size-xxxs-unitless: 12;\n --puck-font-size-xxs-unitless: 14;\n --puck-font-size-xs-unitless: 16;\n --puck-font-size-s-unitless: 18;\n --puck-font-size-m-unitless: 21;\n --puck-font-size-l-unitless: 24;\n --puck-font-size-xl-unitless: 28;\n --puck-font-size-xxl-unitless: 36;\n --puck-font-size-xxxl-unitless: 48;\n --puck-font-size-xxxxl-unitless: 56;\n --puck-font-size-xxxs: calc(1rem * var(--puck-font-size-xxxs-unitless) / 16);\n --puck-font-size-xxs: calc(1rem * var(--puck-font-size-xxs-unitless) / 16);\n --puck-font-size-xs: calc(1rem * var(--puck-font-size-xs-unitless) / 16);\n --puck-font-size-s: calc(1rem * var(--puck-font-size-s-unitless) / 16);\n --puck-font-size-m: calc(1rem * var(--puck-font-size-m-unitless) / 16);\n --puck-font-size-l: calc(1rem * var(--puck-font-size-l-unitless) / 16);\n --puck-font-size-xl: calc(1rem * var(--puck-font-size-xl-unitless) / 16);\n --puck-font-size-xxl: calc(1rem * var(--puck-font-size-xxl-unitless) / 16);\n --puck-font-size-xxxl: calc(1rem * var(--puck-font-size-xxxl-unitless) / 16);\n --puck-font-size-xxxxl: calc( 1rem * var(--puck-font-size-xxxxl-unitless) / 16 );\n --puck-font-size-base: var(--puck-font-size-xs);\n --line-height-reset: 1;\n --line-height-xs: calc( var(--space-m-unitless) / var(--puck-font-size-m-unitless) );\n --line-height-s: calc( var(--space-m-unitless) / var(--puck-font-size-s-unitless) );\n --line-height-m: calc( var(--space-m-unitless) / var(--puck-font-size-xs-unitless) );\n --line-height-l: calc( var(--space-m-unitless) / var(--puck-font-size-xxs-unitless) );\n --line-height-xl: calc( var(--space-m-unitless) / var(--puck-font-size-scale-base-unitless) );\n --line-height-base: var(--line-height-m);\n --fallback-font-stack:\n -apple-system,\n BlinkMacSystemFont,\n Segoe UI,\n Helvetica Neue,\n sans-serif,\n Apple Color Emoji,\n Segoe UI Emoji,\n Segoe UI Symbol;\n --puck-font-family: Inter, var(--fallback-font-stack);\n --puck-font-family-monospaced:\n ui-monospace,\n "Cascadia Code",\n "Source Code Pro",\n Menlo,\n Consolas,\n "DejaVu Sans Mono",\n monospace;\n}\n@supports (font-variation-settings: normal) {\n :root {\n --puck-font-family: InterVariable, var(--fallback-font-stack);\n }\n}\n\n/* bundle/core.css */\n#frame-root {\n height: 1px;\n min-height: 100vh;\n}\n[data-puck-entry] {\n position: relative;\n z-index: 0;\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */\n._ActionBar_1nmyk_1 {\n align-items: center;\n cursor: default;\n display: flex;\n width: auto;\n padding: 4px;\n padding-inline-start: 0;\n padding-inline-end: 0;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n border-radius: 8px;\n background: var(--puck-color-grey-01);\n color: var(--puck-color-white);\n font-family: var(--puck-font-family);\n min-height: 26px;\n}\n._ActionBar-label_1nmyk_18 {\n color: var(--puck-color-grey-08);\n font-size: var(--puck-font-size-xxxs);\n font-weight: 500;\n padding-inline-start: 8px;\n padding-inline-end: 8px;\n margin-inline-start: 4px;\n margin-inline-end: 4px;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n._ActionBarAction_1nmyk_30 + ._ActionBar-label_1nmyk_18 {\n padding-inline-start: 0;\n}\n._ActionBar-label_1nmyk_18 + ._ActionBarAction_1nmyk_30 {\n margin-inline-start: -4px;\n}\n._ActionBar-group_1nmyk_38 {\n align-items: center;\n border-inline-start: 0.5px solid var(--puck-color-grey-05);\n display: flex;\n height: 100%;\n padding-inline-start: 4px;\n padding-inline-end: 4px;\n}\n._ActionBar-group_1nmyk_38:first-of-type {\n border-inline-start: 0;\n}\n._ActionBar-group_1nmyk_38:empty {\n display: none;\n}\n._ActionBarAction_1nmyk_30 {\n background: transparent;\n border: none;\n color: var(--puck-color-grey-08);\n cursor: pointer;\n padding: 6px;\n margin-inline-start: 4px;\n margin-inline-end: 4px;\n border-radius: 4px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: color 50ms ease-in;\n}\n._ActionBarAction--disabled_1nmyk_71 {\n cursor: auto;\n color: var(--puck-color-grey-06);\n}\n._ActionBarAction_1nmyk_30 svg {\n max-width: none !important;\n}\n._ActionBarAction_1nmyk_30:focus-visible {\n outline: 2px solid var(--puck-color-azure-05);\n outline-offset: -2px;\n}\n@media (hover: hover) and (pointer: fine) {\n ._ActionBarAction_1nmyk_30:hover:not(._ActionBarAction--disabled_1nmyk_71) {\n color: var(--puck-color-azure-06);\n transition: none;\n }\n}\n._ActionBarAction_1nmyk_30:active:not(._ActionBarAction--disabled_1nmyk_71),\n._ActionBarAction--active_1nmyk_93 {\n color: var(--puck-color-azure-07);\n transition: none;\n}\n._ActionBar-group_1nmyk_38 * {\n margin: 0;\n}\n._ActionBar-separator_1nmyk_102 {\n background: var(--puck-color-grey-05);\n margin-inline: 4px;\n width: 0.5px;\n height: 100%;\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */\n._DraggableComponent_1vaqy_1 {\n position: absolute;\n pointer-events: none;\n --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );\n}\n._DraggableComponent-overlayWrapper_1vaqy_12 {\n height: 100%;\n width: 100%;\n top: 0;\n position: absolute;\n pointer-events: none;\n box-sizing: border-box;\n z-index: 1;\n}\n._DraggableComponent-overlay_1vaqy_12 {\n cursor: pointer;\n height: 100%;\n outline: 2px var(--puck-color-azure-09) solid;\n outline-offset: -2px;\n width: 100%;\n}\n._DraggableComponent_1vaqy_1:focus-visible > ._DraggableComponent-overlayWrapper_1vaqy_12 {\n outline: 1px solid var(--puck-color-azure-05);\n}\n._DraggableComponent-loadingOverlay_1vaqy_34 {\n background: var(--puck-color-white);\n color: var(--puck-color-grey-03);\n border-radius: 4px;\n display: flex;\n padding: 8px;\n top: 8px;\n right: 8px;\n position: absolute;\n z-index: 1;\n pointer-events: all;\n box-sizing: border-box;\n opacity: 0.8;\n z-index: 1;\n}\n._DraggableComponent--hover_1vaqy_50 > ._DraggableComponent-overlayWrapper_1vaqy_12 > ._DraggableComponent-overlay_1vaqy_12 {\n background: var(--overlay-background);\n outline: 2px var(--puck-color-azure-09) solid;\n}\n._DraggableComponent--isSelected_1vaqy_57 > ._DraggableComponent-overlayWrapper_1vaqy_12 > ._DraggableComponent-overlay_1vaqy_12 {\n outline-color: var(--puck-color-azure-07);\n}\n._DraggableComponent_1vaqy_1:has(._DraggableComponent--hover_1vaqy_50 > ._DraggableComponent-overlayWrapper_1vaqy_12) > ._DraggableComponent-overlayWrapper_1vaqy_12 {\n display: none;\n}\n._DraggableComponent-actionsOverlay_1vaqy_71 {\n position: sticky;\n opacity: 0;\n pointer-events: none;\n z-index: 2;\n}\n._DraggableComponent--isSelected_1vaqy_57 ._DraggableComponent-actionsOverlay_1vaqy_71 {\n opacity: 1;\n pointer-events: auto;\n}\n._DraggableComponent-actions_1vaqy_71 {\n position: absolute;\n width: auto;\n cursor: grab;\n display: flex;\n box-sizing: border-box;\n transform-origin: right top;\n min-height: 36px;\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */\n._Drawer_pl7z0_1 {\n display: flex;\n flex-direction: column;\n font-family: var(--puck-font-family);\n gap: 12px;\n}\n._Drawer-draggable_pl7z0_8 {\n position: relative;\n}\n._Drawer-draggableBg_pl7z0_12 {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n pointer-events: none;\n z-index: -1;\n}\n._DrawerItem-draggable_pl7z0_22 {\n background: var(--puck-color-white);\n cursor: grab;\n padding: 12px;\n display: flex;\n border: 1px var(--puck-color-grey-09) solid;\n border-radius: 4px;\n font-size: var(--puck-font-size-xxs);\n justify-content: space-between;\n align-items: center;\n transition: background-color 50ms ease-in, color 50ms ease-in;\n}\n._DrawerItem--disabled_pl7z0_35 ._DrawerItem-draggable_pl7z0_22 {\n background: var(--puck-color-grey-11);\n color: var(--puck-color-grey-05);\n cursor: not-allowed;\n}\n._DrawerItem_pl7z0_22:focus-visible {\n outline: 0;\n}\n._Drawer_pl7z0_1:not(._Drawer--isDraggingFrom_pl7z0_45) ._DrawerItem_pl7z0_22:focus-visible ._DrawerItem-draggable_pl7z0_22 {\n border-radius: 4px;\n outline: 2px solid var(--puck-color-azure-05);\n outline-offset: 2px;\n}\n@media (hover: hover) and (pointer: fine) {\n ._Drawer_pl7z0_1:not(._Drawer--isDraggingFrom_pl7z0_45) ._DrawerItem_pl7z0_22:not(._DrawerItem--disabled_pl7z0_35) ._DrawerItem-draggable_pl7z0_22:hover {\n background-color: var(--puck-color-azure-12);\n color: var(--puck-color-azure-04);\n transition: none;\n }\n}\n._DrawerItem-name_pl7z0_63 {\n overflow-x: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */\n._DropZone_1i2sv_1 {\n --resize-animation-ms: 150ms;\n position: relative;\n height: 100%;\n min-height: var(--min-empty-height);\n outline-offset: -2px;\n width: 100%;\n}\n._DropZone--hasChildren_1i2sv_11 {\n min-height: 0;\n}\n._DropZone_1i2sv_1:empty {\n min-height: var(--min-empty-height);\n}\n[data-puck-entry]:not([data-puck-dragging]) ._DropZone_1i2sv_1 {\n transition: min-height var(--resize-animation-ms) ease-in;\n}\n._DropZone--isAreaSelected_1i2sv_24,\n._DropZone--hoveringOverArea_1i2sv_25:not(._DropZone--isRootZone_1i2sv_25) {\n background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);\n outline: 2px dashed var(--puck-color-azure-08);\n}\n._DropZone_1i2sv_1:empty {\n background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);\n outline: 2px dashed var(--puck-color-azure-08);\n}\n._DropZone--isDestination_1i2sv_35 {\n outline: 2px dashed var(--puck-color-azure-04) !important;\n}\n._DropZone--isDestination_1i2sv_35:not(._DropZone--isRootZone_1i2sv_25) {\n background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent) !important;\n}\n._DropZone-item_1i2sv_47 {\n position: relative;\n}\n._DropZone-hitbox_1i2sv_51 {\n position: absolute;\n bottom: -12px;\n height: 24px;\n width: 100%;\n z-index: 1;\n}\n[data-puck-dragging] ._DropZone--isEnabled_1i2sv_59 {\n outline: 2px dashed var(--puck-color-azure-06);\n}\n._DropZone_1i2sv_1 > *:not([data-puck-component]) {\n opacity: 0;\n}\nbody:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {\n opacity: 0 !important;\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css/#css-module-data */\n._InlineTextField_104qp_1 {\n cursor: text;\n display: inline-block;\n white-space: pre-wrap;\n text-decoration: inherit;\n}\n[data-dnd-dragging] ._InlineTextField_104qp_1 {\n cursor: none;\n caret-color: transparent;\n}\n[data-dnd-dragging] ._InlineTextField_104qp_1::selection {\n display: none;\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/Loader/styles.module.css/#css-module-data */\n@keyframes _loader-animation_nacdm_1 {\n 0% {\n transform: rotate(0deg) scale(1);\n }\n 50% {\n transform: rotate(180deg) scale(0.8);\n }\n 100% {\n transform: rotate(360deg) scale(1);\n }\n}\n._Loader_nacdm_13 {\n background: transparent;\n border-radius: 100%;\n border: 2px solid currentColor;\n border-bottom-color: transparent;\n display: inline-block;\n animation: _loader-animation_nacdm_1 1s 0s infinite linear;\n animation-fill-mode: both;\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/RichTextMenu/styles.module.css/#css-module-data */\n._RichTextMenu_k97eh_1 {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n}\n._RichTextMenu--form_k97eh_7 {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n padding: 6px 6px;\n background-color: var(--puck-color-grey-12);\n position: relative;\n scrollbar-width: none;\n overflow-x: auto;\n}\n._RichTextMenu-group_k97eh_17 {\n display: flex;\n align-items: space-between;\n flex-direction: row;\n flex-wrap: nowrap;\n padding-inline: 6px;\n gap: 2px;\n position: relative;\n}\n._RichTextMenu-group_k97eh_17:first-of-type {\n padding-left: 0;\n}\n._RichTextMenu-group_k97eh_17:last-of-type {\n padding-right: 0;\n}\n._RichTextMenu--inline_k97eh_35 ._RichTextMenu-group_k97eh_17 {\n color: var(--puck-color-grey-08);\n gap: 0px;\n flex-wrap: nowrap;\n}\n._RichTextMenu-group_k97eh_17 + ._RichTextMenu-group_k97eh_17 {\n border-left: 1px solid var(--puck-color-grey-10);\n}\n._RichTextMenu--inline_k97eh_35 ._RichTextMenu-group_k97eh_17 + ._RichTextMenu-group_k97eh_17 {\n border-left: 0.5px solid var(--puck-color-grey-05);\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/RichTextMenu/components/Control/styles.module.css/#css-module-data */\n._Control_1aveu_1 .lucide {\n height: 18px;\n width: 18px;\n}\n._Control--inline_1aveu_6 .lucide {\n height: 16px;\n width: 16px;\n}\n\n/* components/DraggableComponent/styles.css */\n[data-puck-component] * {\n pointer-events: none;\n user-select: none;\n -webkit-user-select: none;\n}\n[data-puck-component] {\n cursor: grab;\n pointer-events: auto !important;\n user-select: none;\n -webkit-user-select: none;\n}\n[data-puck-dropzone] {\n pointer-events: auto !important;\n}\n[data-puck-disabled] {\n cursor: pointer;\n}\n[data-dnd-placeholder] {\n background: var(--puck-color-azure-06, #6499cf) !important;\n border: none !important;\n color: #00000000 !important;\n opacity: 0.3 !important;\n outline: none !important;\n transition: none !important;\n}\n[data-dnd-placeholder] *,\n[data-dnd-placeholder]::after,\n[data-dnd-placeholder]::before {\n opacity: 0 !important;\n}\n[data-dnd-dragging][data-puck-component] {\n pointer-events: none !important;\n outline: 2px var(--puck-color-azure-09, #cfdff0) solid !important;\n outline-offset: -2px !important;\n}\n[data-dnd-dragging][data-puck-component] > :first-child {\n margin-top: 0 !important;\n}\n[data-dnd-dragging][data-puck-component] > :last-child {\n margin-bottom: 0 !important;\n}\n\n/* lib/overlay-portal/styles.css */\n[data-puck-overlay-portal],\n[data-puck-overlay-portal] * {\n pointer-events: auto !important;\n}\n[data-puck-overlay-portal]:hover {\n outline: 2px var(--puck-color-azure-09, #cfdff0) dashed;\n outline-offset: 2px;\n}\n[data-puck-overlay-portal]:focus-within {\n outline: 2px var(--puck-color-azure-07, #88b0da) dashed;\n outline-offset: 2px;\n}';
14235
+
14236
+ // lib/use-inject-css.ts
14237
+ var PUCK_STYLE_SOURCE_ATTRIBUTE = "data-puck-style-source";
14238
+ var PUCK_STYLE_SOURCE_VALUE = "puck";
14239
+ var PUCK_STYLE_ID_ATTRIBUTE = "data-puck-style-id";
14240
+ var PUCK_STYLE_IDS = {
14241
+ uiDefault: "ui-default",
14242
+ iframeInteractions: "iframe-styles"
14243
+ };
14244
+ var styleRegistry = /* @__PURE__ */ new WeakMap();
14245
+ var getTargetDocument = (target) => {
14246
+ if (target) {
14247
+ return target;
14248
+ }
14249
+ if (typeof document === "undefined") {
14250
+ return void 0;
14251
+ }
14252
+ return document;
14253
+ };
14254
+ var getStyleMap = (target) => {
14255
+ const existing = styleRegistry.get(target);
14256
+ if (existing) {
14257
+ return existing;
14258
+ }
14259
+ const created = /* @__PURE__ */ new Map();
14260
+ styleRegistry.set(target, created);
14261
+ return created;
14262
+ };
14263
+ var attachStyleElement = (target, el, prepend = false) => {
14264
+ const head = target.head;
14265
+ if (!head) {
14266
+ return;
14267
+ }
14268
+ if (el.parentElement !== head) {
14269
+ if (prepend) {
14270
+ head.prepend(el);
14271
+ } else {
14272
+ head.append(el);
14273
+ }
14274
+ return;
14275
+ }
14276
+ if (prepend && head.firstChild !== el) {
14277
+ head.prepend(el);
14278
+ }
14279
+ if (!prepend && head.lastChild !== el) {
14280
+ head.append(el);
14281
+ }
14282
+ };
14283
+ var createStyleElement = (target, id, cssText, prepend = false) => {
14284
+ const el = target.createElement("style");
14285
+ el.setAttribute(PUCK_STYLE_SOURCE_ATTRIBUTE, PUCK_STYLE_SOURCE_VALUE);
14286
+ el.setAttribute(PUCK_STYLE_ID_ATTRIBUTE, id);
14287
+ el.textContent = cssText;
14288
+ attachStyleElement(target, el, prepend);
14289
+ return el;
14290
+ };
14291
+ var isPuckStyleElement = (el) => (el == null ? void 0 : el.getAttribute(PUCK_STYLE_SOURCE_ATTRIBUTE)) === PUCK_STYLE_SOURCE_VALUE;
14292
+ var useInjectStyleSheet = (options) => {
14293
+ const targetDocument = getTargetDocument(options == null ? void 0 : options.document);
14294
+ (0, import_react77.useInsertionEffect)(() => {
14295
+ if (!options || !targetDocument) {
14296
+ return;
14297
+ }
14298
+ const registry = getStyleMap(targetDocument);
14299
+ const existing = registry.get(options.id);
14300
+ if (existing) {
14301
+ existing.count = existing.count + 1;
14302
+ if (existing.el.textContent !== options.cssText) {
14303
+ existing.el.textContent = options.cssText;
14304
+ }
14305
+ attachStyleElement(targetDocument, existing.el, options.prepend);
14306
+ } else {
14307
+ const el = createStyleElement(
14308
+ targetDocument,
14309
+ options.id,
14310
+ options.cssText,
14311
+ options.prepend
14312
+ );
14313
+ registry.set(options.id, {
14314
+ count: 1,
14315
+ el
14316
+ });
14317
+ }
14318
+ return () => {
14319
+ const current = registry.get(options.id);
14320
+ if (!current) {
14321
+ return;
14322
+ }
14323
+ current.count = current.count - 1;
14324
+ if (current.count <= 0) {
14325
+ current.el.remove();
14326
+ registry.delete(options.id);
14327
+ }
14328
+ };
14329
+ }, [
14330
+ options == null ? void 0 : options.cssText,
14331
+ options == null ? void 0 : options.id,
14332
+ options == null ? void 0 : options.prepend,
14333
+ options == null ? void 0 : options.document,
14334
+ targetDocument
14335
+ ]);
14336
+ };
14337
+ var staticCssDetected = null;
14338
+ var hasStaticPuckCss = () => {
14339
+ if (staticCssDetected !== null) return staticCssDetected;
14340
+ if (typeof document === "undefined") return false;
14341
+ staticCssDetected = getComputedStyle(document.documentElement).getPropertyValue("--puck-color-azure-05").trim() !== "";
14342
+ return staticCssDetected;
14343
+ };
14344
+ var useInjectUiCss = () => {
14345
+ const skip = hasStaticPuckCss();
14346
+ useInjectStyleSheet(
14347
+ skip ? null : {
14348
+ cssText: defaultUiStyles,
14349
+ id: PUCK_STYLE_IDS.uiDefault,
14350
+ prepend: true
14351
+ }
14352
+ );
14353
+ (0, import_react77.useEffect)(() => {
14354
+ if (skip && process.env.NODE_ENV !== "production") {
14355
+ console.info(
14356
+ "Puck: Skipped runtime style injection as Puck styles are already loaded. As of Puck 0.22, you can safely remove CSS imports, or ignore this message."
14357
+ );
14358
+ }
14359
+ }, []);
14360
+ };
14361
+ var useInjectIframeCss = (targetDocument) => {
14362
+ useInjectStyleSheet(
14363
+ targetDocument ? {
14364
+ cssText: iframeInteractionStyles,
14365
+ document: targetDocument,
14366
+ id: PUCK_STYLE_IDS.iframeInteractions
14367
+ } : null
14368
+ );
14369
+ };
14370
+
14371
+ // components/AutoFrame/index.tsx
14372
+ var import_jsx_runtime75 = require("react/jsx-runtime");
14373
+ var styleSelector = 'style, link[rel="stylesheet"]';
14374
+ var mirroredStyleAttribute = "data-puck-style-mirror";
14375
+ var shouldMirrorStyleElement = (style) => {
14376
+ if (!style.matches(styleSelector) || isPuckStyleElement(style)) {
14377
+ return false;
14378
+ }
14379
+ if (style.tagName === "STYLE") {
14380
+ return !!style.innerHTML.trim();
14381
+ }
14382
+ return true;
14383
+ };
14384
+ var collectStyles = (doc) => {
14385
+ const collected = [];
14386
+ doc.querySelectorAll(styleSelector).forEach((style) => {
14387
+ if (shouldMirrorStyleElement(style)) {
14388
+ collected.push(style);
14389
+ }
14390
+ });
14391
+ return collected;
14392
+ };
14393
+ var getStyleSheet = (el) => {
14394
+ return Array.from(document.styleSheets).find((ss) => {
14395
+ const ownerNode = ss.ownerNode;
14396
+ return ownerNode.href === el.href;
14397
+ });
14398
+ };
14399
+ var getStyles = (styleSheet) => {
14400
+ if (styleSheet) {
14401
+ try {
14402
+ return Array.from(styleSheet.cssRules).map((rule) => rule.cssText).join("");
14403
+ } catch (e) {
14404
+ console.warn(
14405
+ "Access to stylesheet %s is denied. Ignoring\u2026",
14406
+ styleSheet.href
14407
+ );
14408
+ }
14409
+ }
14410
+ return "";
14411
+ };
14412
+ var syncAttributes = (sourceElement, targetElement) => {
14413
+ const attributes = sourceElement.attributes;
14414
+ if ((attributes == null ? void 0 : attributes.length) > 0) {
14415
+ Array.from(attributes).forEach((attribute) => {
14416
+ targetElement.setAttribute(attribute.name, attribute.value);
14417
+ });
14418
+ }
14419
+ };
14420
+ var defer = (fn) => setTimeout(fn, 0);
14421
+ var CopyHostStyles = ({
14422
+ children,
14423
+ debug = false,
14424
+ onStylesLoaded = () => null,
14425
+ syncHostStyles = true
14426
+ }) => {
14427
+ const { document: doc, window: win } = useFrame();
14428
+ useInjectIframeCss(doc);
14429
+ (0, import_react78.useEffect)(() => {
14430
+ if (!win || !doc) {
14431
+ return () => {
14432
+ };
14433
+ }
14434
+ let elements = [];
14435
+ const hashes = {};
14436
+ const removeAllMirrors = () => {
14437
+ elements.forEach(({ mirror }) => {
14438
+ mirror.remove();
14439
+ });
14440
+ elements = [];
14441
+ Array.from(
14442
+ doc.head.querySelectorAll(`[${mirroredStyleAttribute}="true"]`)
14443
+ ).forEach((mirror) => {
14444
+ mirror.remove();
14445
+ });
14446
+ Object.keys(hashes).forEach((key) => {
14447
+ delete hashes[key];
14448
+ });
14449
+ };
14450
+ const lookupEl = (el) => elements.findIndex((elementMap) => elementMap.original === el);
14451
+ const mirrorEl = (el, inlineStyles = false) => __async(null, null, function* () {
14452
+ let mirror;
14453
+ if (el.nodeName === "LINK" && inlineStyles) {
14454
+ mirror = document.createElement("style");
14455
+ mirror.type = "text/css";
14456
+ let styleSheet = getStyleSheet(el);
14457
+ if (!styleSheet) {
14458
+ yield new Promise((resolve) => {
14459
+ const fn = () => {
14460
+ resolve();
14461
+ el.removeEventListener("load", fn);
14462
+ };
14463
+ el.addEventListener("load", fn);
14464
+ });
14465
+ styleSheet = getStyleSheet(el);
14466
+ }
14467
+ const styles = getStyles(styleSheet);
14468
+ if (!styles) {
14469
+ if (debug) {
14470
+ console.warn(
14471
+ `Tried to load styles for link element, but couldn't find them. Skipping...`
14472
+ );
14473
+ }
14474
+ return;
14475
+ }
14476
+ mirror.innerHTML = styles;
14477
+ mirror.setAttribute("data-href", el.getAttribute("href"));
14478
+ } else {
14479
+ mirror = el.cloneNode(true);
14480
+ }
14481
+ mirror.setAttribute(mirroredStyleAttribute, "true");
14482
+ return mirror;
14483
+ });
14484
+ const addEl = (el) => __async(null, null, function* () {
14485
+ const index = lookupEl(el);
14486
+ if (index > -1) {
14487
+ if (debug)
14488
+ console.log(
14489
+ `Tried to add an element that was already mirrored. Updating instead...`
14490
+ );
14491
+ elements[index].mirror.innerText = el.innerText;
14492
+ return;
14493
+ }
14494
+ const mirror = yield mirrorEl(el);
14495
+ if (!mirror) {
14496
+ return;
14497
+ }
14498
+ const elHash = (0, import_object_hash.default)(mirror.outerHTML);
14499
+ if (hashes[elHash]) {
14500
+ if (debug)
14501
+ console.log(
14502
+ `iframe already contains element that is being mirrored. Skipping...`
14503
+ );
14504
+ return;
14505
+ }
14506
+ hashes[elHash] = true;
14507
+ doc.head.append(mirror);
14508
+ elements.push({ original: el, mirror });
14509
+ if (debug) console.log(`Added style node ${el.outerHTML}`);
14510
+ });
14511
+ const removeEl = (el) => {
14512
+ var _a, _b;
14513
+ const index = lookupEl(el);
14514
+ if (index === -1) {
14515
+ if (debug)
14516
+ console.log(
14517
+ `Tried to remove an element that did not exist. Skipping...`
14518
+ );
14519
+ return;
14520
+ }
14521
+ const elHash = (0, import_object_hash.default)(el.outerHTML);
14522
+ (_b = (_a = elements[index]) == null ? void 0 : _a.mirror) == null ? void 0 : _b.remove();
14523
+ delete hashes[elHash];
14524
+ if (debug) console.log(`Removed style node ${el.outerHTML}`);
14525
+ };
14526
+ const observer = new MutationObserver((mutations) => {
14527
+ mutations.forEach((mutation) => {
14528
+ if (mutation.type === "childList") {
14529
+ mutation.addedNodes.forEach((node) => {
14530
+ if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE) {
14531
+ const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
14532
+ if (el && shouldMirrorStyleElement(el)) {
14533
+ defer(() => addEl(el));
14534
+ }
14535
+ }
14536
+ });
14537
+ mutation.removedNodes.forEach((node) => {
14538
+ if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE) {
14539
+ const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
14540
+ if (el && el.matches(styleSelector) && !isPuckStyleElement(el)) {
14541
+ defer(() => removeEl(el));
14542
+ }
14543
+ }
14544
+ });
14545
+ }
14546
+ });
14547
+ });
14548
+ if (!syncHostStyles) {
14549
+ onStylesLoaded();
14550
+ return () => {
14551
+ observer.disconnect();
14552
+ removeAllMirrors();
14553
+ };
14554
+ }
14555
+ const parentDocument = win.parent.document;
14556
+ const collectedStyles = collectStyles(parentDocument);
14557
+ const hrefs = [];
14558
+ let stylesLoaded = 0;
14559
+ const parentHtml = parentDocument.getElementsByTagName("html")[0];
14560
+ syncAttributes(parentHtml, doc.documentElement);
14561
+ const parentBody = parentDocument.getElementsByTagName("body")[0];
14562
+ syncAttributes(parentBody, doc.body);
14563
+ Promise.all(
14564
+ collectedStyles.map((styleNode, i) => __async(null, null, function* () {
14565
+ if (styleNode.nodeName === "LINK") {
14566
+ const linkHref = styleNode.href;
14567
+ if (hrefs.indexOf(linkHref) > -1) {
14568
+ return;
14569
+ }
14570
+ hrefs.push(linkHref);
14571
+ }
14572
+ const mirror = yield mirrorEl(styleNode);
14573
+ if (!mirror) return;
14574
+ elements.push({ original: styleNode, mirror });
14575
+ return mirror;
14576
+ }))
14577
+ ).then((mirrorStyles) => {
14578
+ const filtered = mirrorStyles.filter(
14579
+ (el) => typeof el !== "undefined"
14580
+ );
14581
+ filtered.forEach((mirror) => {
14582
+ mirror.onload = () => {
14583
+ stylesLoaded = stylesLoaded + 1;
14584
+ if (stylesLoaded >= filtered.length) {
14585
+ onStylesLoaded();
14586
+ }
14587
+ };
14588
+ mirror.onerror = () => {
14589
+ console.warn(`AutoFrame couldn't load a stylesheet`);
14590
+ stylesLoaded = stylesLoaded + 1;
14591
+ if (stylesLoaded >= filtered.length) {
14592
+ onStylesLoaded();
14593
+ }
14594
+ };
14595
+ });
14596
+ doc.head.querySelectorAll(`[${mirroredStyleAttribute}="true"]`).forEach((el) => {
14597
+ el.remove();
14598
+ });
14599
+ doc.head.append(...filtered);
14600
+ filtered.forEach((mirror) => {
14601
+ if (mirror.nodeName === "STYLE") {
14602
+ stylesLoaded = stylesLoaded + 1;
14603
+ }
14604
+ });
14605
+ if (stylesLoaded >= filtered.length) {
14606
+ onStylesLoaded();
14607
+ }
14608
+ observer.observe(parentDocument.head, { childList: true, subtree: true });
14609
+ filtered.forEach((el) => {
14610
+ const elHash = (0, import_object_hash.default)(el.outerHTML);
11723
14611
  hashes[elHash] = true;
11724
14612
  });
11725
14613
  });
11726
14614
  return () => {
11727
14615
  observer.disconnect();
14616
+ removeAllMirrors();
11728
14617
  };
11729
- }, []);
14618
+ }, [syncHostStyles]);
11730
14619
  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_jsx_runtime75.Fragment, { children });
11731
14620
  };
11732
- var autoFrameContext = (0, import_react77.createContext)({});
11733
- var useFrame = () => (0, import_react77.useContext)(autoFrameContext);
14621
+ var autoFrameContext = (0, import_react78.createContext)({});
14622
+ var useFrame = () => (0, import_react78.useContext)(autoFrameContext);
11734
14623
  function AutoFrame(_a) {
11735
14624
  var _b = _a, {
11736
14625
  children,
@@ -11741,7 +14630,8 @@ function AutoFrame(_a) {
11741
14630
  },
11742
14631
  onNotReady = () => {
11743
14632
  },
11744
- frameRef
14633
+ frameRef,
14634
+ syncHostStyles = true
11745
14635
  } = _b, props = __objRest(_b, [
11746
14636
  "children",
11747
14637
  "className",
@@ -11749,13 +14639,19 @@ function AutoFrame(_a) {
11749
14639
  "id",
11750
14640
  "onReady",
11751
14641
  "onNotReady",
11752
- "frameRef"
14642
+ "frameRef",
14643
+ "syncHostStyles"
11753
14644
  ]);
11754
- const [loaded, setLoaded] = (0, import_react77.useState)(false);
11755
- const [ctx, setCtx] = (0, import_react77.useState)({});
11756
- const [mountTarget, setMountTarget] = (0, import_react77.useState)();
11757
- const [stylesLoaded, setStylesLoaded] = (0, import_react77.useState)(false);
11758
- (0, import_react77.useEffect)(() => {
14645
+ const [loaded, setLoaded] = (0, import_react78.useState)(false);
14646
+ const [ctx, setCtx] = (0, import_react78.useState)({});
14647
+ const [mountTarget, setMountTarget] = (0, import_react78.useState)();
14648
+ const [stylesLoaded, setStylesLoaded] = (0, import_react78.useState)(false);
14649
+ (0, import_react78.useEffect)(() => {
14650
+ if (loaded) {
14651
+ setStylesLoaded(!syncHostStyles);
14652
+ }
14653
+ }, [loaded, syncHostStyles]);
14654
+ (0, import_react78.useEffect)(() => {
11759
14655
  var _a2;
11760
14656
  if (frameRef.current) {
11761
14657
  const doc = frameRef.current.contentDocument;
@@ -11789,6 +14685,7 @@ function AutoFrame(_a) {
11789
14685
  {
11790
14686
  debug,
11791
14687
  onStylesLoaded: () => setStylesLoaded(true),
14688
+ syncHostStyles,
11792
14689
  children: (0, import_react_dom3.createPortal)(children, mountTarget)
11793
14690
  }
11794
14691
  ) })
@@ -11808,7 +14705,7 @@ var import_jsx_runtime76 = require("react/jsx-runtime");
11808
14705
  var getClassName29 = get_class_name_factory_default("PuckPreview", styles_module_default20);
11809
14706
  var useBubbleIframeEvents = (ref) => {
11810
14707
  const status = useAppStore((s) => s.status);
11811
- (0, import_react78.useEffect)(() => {
14708
+ (0, import_react79.useEffect)(() => {
11812
14709
  if (ref.current && status === "READY") {
11813
14710
  const iframe = ref.current;
11814
14711
  const handlePointerMove = (event) => {
@@ -11817,6 +14714,9 @@ var useBubbleIframeEvents = (ref) => {
11817
14714
  cancelable: false,
11818
14715
  clientX: event.clientX,
11819
14716
  clientY: event.clientY,
14717
+ pointerId: event.pointerId,
14718
+ pointerType: event.pointerType,
14719
+ isPrimary: event.isPrimary,
11820
14720
  originalTarget: event.target
11821
14721
  }));
11822
14722
  iframe.dispatchEvent(evt);
@@ -11857,7 +14757,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
11857
14757
  const renderData = useAppStore(
11858
14758
  (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
11859
14759
  );
11860
- const Page = (0, import_react78.useCallback)(
14760
+ const Page = (0, import_react79.useCallback)(
11861
14761
  (pageProps) => {
11862
14762
  var _a, _b, _c, _d;
11863
14763
  const propsWithSlots = useSlots(
@@ -11875,9 +14775,9 @@ var Preview2 = ({ id = "puck-preview" }) => {
11875
14775
  },
11876
14776
  [config]
11877
14777
  );
11878
- const Frame = (0, import_react78.useMemo)(() => overrides.iframe, [overrides]);
14778
+ const Frame = (0, import_react79.useMemo)(() => overrides.iframe, [overrides]);
11879
14779
  const rootProps = root.props || root;
11880
- const ref = (0, import_react78.useRef)(null);
14780
+ const ref = (0, import_react79.useRef)(null);
11881
14781
  useBubbleIframeEvents(ref);
11882
14782
  const inner = !renderData ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
11883
14783
  Page,
@@ -11892,7 +14792,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
11892
14792
  children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DropZonePure, { zone: rootDroppableId })
11893
14793
  })
11894
14794
  ) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Render, { data: renderData, config, metadata });
11895
- (0, import_react78.useEffect)(() => {
14795
+ (0, import_react79.useEffect)(() => {
11896
14796
  if (!iframe.enabled) {
11897
14797
  setStatus("READY");
11898
14798
  }
@@ -11915,6 +14815,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
11915
14815
  id: "preview-frame",
11916
14816
  className: getClassName29("frame"),
11917
14817
  "data-rfd-iframe": true,
14818
+ syncHostStyles: iframe.syncHostStyles,
11918
14819
  onReady: () => {
11919
14820
  setStatus("READY");
11920
14821
  },
@@ -11957,7 +14858,7 @@ var styles_module_default21 = { "LayerTree": "_LayerTree_7rx04_1", "LayerTree-zo
11957
14858
  init_get_class_name_factory();
11958
14859
  init_lucide_react();
11959
14860
  init_root_droppable_id();
11960
- var import_react79 = require("react");
14861
+ var import_react80 = require("react");
11961
14862
  init_store();
11962
14863
  var import_react_virtual2 = require("@tanstack/react-virtual");
11963
14864
  var import_jsx_runtime77 = require("react/jsx-runtime");
@@ -12066,7 +14967,7 @@ var getScrollParent = (el) => {
12066
14967
  }
12067
14968
  return null;
12068
14969
  };
12069
- var Layer = (0, import_react79.forwardRef)(function Layer2({
14970
+ var Layer = (0, import_react80.forwardRef)(function Layer2({
12070
14971
  childIsSelected,
12071
14972
  dataIndex,
12072
14973
  depth,
@@ -12076,13 +14977,13 @@ var Layer = (0, import_react79.forwardRef)(function Layer2({
12076
14977
  selectedPathIds
12077
14978
  }, ref) {
12078
14979
  const dispatch = useAppStore((s) => s.dispatch);
12079
- const zoneStore = (0, import_react79.useContext)(ZoneStoreContext);
14980
+ const zoneStore = (0, import_react80.useContext)(ZoneStoreContext);
12080
14981
  const isHovering = useContextStore(
12081
14982
  ZoneStoreContext,
12082
14983
  (s) => s.hoveringComponent === node.itemId
12083
14984
  );
12084
14985
  const containsZone = node.childZones.length > 0;
12085
- const setItemSelector = (0, import_react79.useCallback)(
14986
+ const setItemSelector = (0, import_react80.useCallback)(
12086
14987
  (itemSelector) => {
12087
14988
  dispatch({ type: "setUi", ui: { itemSelector } });
12088
14989
  },
@@ -12221,7 +15122,7 @@ var VirtualizedLayerTreeItems = ({
12221
15122
  selectedPathIds,
12222
15123
  tree
12223
15124
  }) => {
12224
- const listRef = (0, import_react79.useRef)(null);
15125
+ const listRef = (0, import_react80.useRef)(null);
12225
15126
  const virtualizer = (0, import_react_virtual2.useVirtualizer)({
12226
15127
  count: tree.items.length,
12227
15128
  estimateSize: (index) => getEstimatedRowHeight(tree.items[index].itemId),
@@ -12313,7 +15214,7 @@ var LayerTree = ({
12313
15214
 
12314
15215
  // components/Puck/components/Outline/index.tsx
12315
15216
  init_store();
12316
- var import_react80 = require("react");
15217
+ var import_react81 = require("react");
12317
15218
 
12318
15219
  // lib/data/find-zones-for-area.ts
12319
15220
  init_react_import();
@@ -12338,14 +15239,14 @@ var Outline = () => {
12338
15239
  const rootZones = useAppStore(
12339
15240
  (0, import_shallow8.useShallow)((s) => findZonesForArea(s.state, "root"))
12340
15241
  );
12341
- const selectedPathIds = (0, import_react80.useMemo)(() => {
15242
+ const selectedPathIds = (0, import_react81.useMemo)(() => {
12342
15243
  var _a;
12343
15244
  const selectedPath = selectedId ? (_a = nodes[selectedId]) == null ? void 0 : _a.path : null;
12344
15245
  return new Set(
12345
15246
  (selectedPath == null ? void 0 : selectedPath.map((candidate) => candidate.split(":")[0]).filter(Boolean)) || []
12346
15247
  );
12347
15248
  }, [nodes, selectedId]);
12348
- const trees = (0, import_react80.useMemo)(
15249
+ const trees = (0, import_react81.useMemo)(
12349
15250
  () => rootZones.map(
12350
15251
  (zoneCompound) => buildLayerTree({
12351
15252
  config,
@@ -12357,7 +15258,7 @@ var Outline = () => {
12357
15258
  ),
12358
15259
  [config, nodes, rootZones, zones]
12359
15260
  );
12360
- const Wrapper = (0, import_react80.useMemo)(() => outlineOverride || "div", [outlineOverride]);
15261
+ const Wrapper = (0, import_react81.useMemo)(() => outlineOverride || "div", [outlineOverride]);
12361
15262
  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
12362
15263
  LayerTree,
12363
15264
  {
@@ -12373,7 +15274,7 @@ init_default_viewports();
12373
15274
 
12374
15275
  // lib/use-loaded-overrides.ts
12375
15276
  init_react_import();
12376
- var import_react81 = require("react");
15277
+ var import_react82 = require("react");
12377
15278
 
12378
15279
  // lib/load-overrides.ts
12379
15280
  init_react_import();
@@ -12415,7 +15316,7 @@ var useLoadedOverrides = ({
12415
15316
  overrides,
12416
15317
  plugins
12417
15318
  }) => {
12418
- return (0, import_react81.useMemo)(() => {
15319
+ return (0, import_react82.useMemo)(() => {
12419
15320
  return loadOverrides({ overrides, plugins });
12420
15321
  }, [plugins, overrides]);
12421
15322
  };
@@ -12426,7 +15327,7 @@ init_permissions();
12426
15327
 
12427
15328
  // lib/use-puck.ts
12428
15329
  init_react_import();
12429
- var import_react82 = require("react");
15330
+ var import_react83 = require("react");
12430
15331
  var import_zustand7 = require("zustand");
12431
15332
  init_make_state_public();
12432
15333
  init_get_item();
@@ -12536,7 +15437,7 @@ var generateUsePuck = (store, getState) => {
12536
15437
  };
12537
15438
  return storeData;
12538
15439
  };
12539
- var UsePuckStoreContext = (0, import_react82.createContext)(
15440
+ var UsePuckStoreContext = (0, import_react83.createContext)(
12540
15441
  null
12541
15442
  );
12542
15443
  var convertToPickedStore = (store) => {
@@ -12550,7 +15451,7 @@ var convertToPickedStore = (store) => {
12550
15451
  };
12551
15452
  };
12552
15453
  var useRegisterUsePuckStore = (appStore) => {
12553
- const [usePuckStore] = (0, import_react82.useState)(
15454
+ const [usePuckStore] = (0, import_react83.useState)(
12554
15455
  () => (0, import_zustand7.createStore)(
12555
15456
  () => generateUsePuck(
12556
15457
  convertToPickedStore(appStore.getState()),
@@ -12558,7 +15459,7 @@ var useRegisterUsePuckStore = (appStore) => {
12558
15459
  )
12559
15460
  )
12560
15461
  );
12561
- (0, import_react82.useEffect)(() => {
15462
+ (0, import_react83.useEffect)(() => {
12562
15463
  return appStore.subscribe(
12563
15464
  (store) => convertToPickedStore(store),
12564
15465
  (pickedStore) => {
@@ -12570,7 +15471,7 @@ var useRegisterUsePuckStore = (appStore) => {
12570
15471
  };
12571
15472
  function createUsePuck() {
12572
15473
  return function usePuck2(selector) {
12573
- const usePuckApi = (0, import_react82.useContext)(UsePuckStoreContext);
15474
+ const usePuckApi = (0, import_react83.useContext)(UsePuckStoreContext);
12574
15475
  if (!usePuckApi) {
12575
15476
  throw new Error("usePuck must be used inside <Puck>.");
12576
15477
  }
@@ -12582,7 +15483,7 @@ function createUsePuck() {
12582
15483
  };
12583
15484
  }
12584
15485
  function usePuck() {
12585
- (0, import_react82.useEffect)(() => {
15486
+ (0, import_react83.useEffect)(() => {
12586
15487
  console.warn(
12587
15488
  "You're using the `usePuck` method without a selector, which may cause unnecessary re-renders. Replace with `createUsePuck` and provide a selector for improved performance."
12588
15489
  );
@@ -12590,7 +15491,7 @@ function usePuck() {
12590
15491
  return createUsePuck()((s) => s);
12591
15492
  }
12592
15493
  function useGetPuck() {
12593
- const usePuckApi = (0, import_react82.useContext)(UsePuckStoreContext);
15494
+ const usePuckApi = (0, import_react83.useContext)(UsePuckStoreContext);
12594
15495
  if (!usePuckApi) {
12595
15496
  throw new Error("usePuckGet must be used inside <Puck>.");
12596
15497
  }
@@ -12610,34 +15511,7 @@ init_lib();
12610
15511
 
12611
15512
  // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Layout/styles.module.css#css-module
12612
15513
  init_react_import();
12613
- var styles_module_default22 = { "Puck": "_Puck_1dd16_19", "Puck-portal": "_Puck-portal_1dd16_31", "PuckLayout": "_PuckLayout_1dd16_36", "PuckLayout-inner": "_PuckLayout-inner_1dd16_40", "Puck--hidePlugins": "_Puck--hidePlugins_1dd16_72", "PuckLayout--mounted": "_PuckLayout--mounted_1dd16_77", "PuckLayout--mobilePanelHeightToggle": "_PuckLayout--mobilePanelHeightToggle_1dd16_81", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_1dd16_81", "PuckLayout--isExpanded": "_PuckLayout--isExpanded_1dd16_87", "PuckLayout--mobilePanelHeightMinContent": "_PuckLayout--mobilePanelHeightMinContent_1dd16_105", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_1dd16_132", "PuckLayout-mounted": "_PuckLayout-mounted_1dd16_151", "PuckLayout-nav": "_PuckLayout-nav_1dd16_192", "PuckLayout-header": "_PuckLayout-header_1dd16_208", "PuckPluginTab": "_PuckPluginTab_1dd16_222", "PuckPluginTab--visible": "_PuckPluginTab--visible_1dd16_228", "PuckPluginTab-body": "_PuckPluginTab-body_1dd16_233" };
12614
-
12615
- // lib/use-inject-css.ts
12616
- init_react_import();
12617
- var import_react83 = require("react");
12618
- var styles = ``;
12619
- var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
12620
- const [el, setEl] = (0, import_react83.useState)();
12621
- (0, import_react83.useEffect)(() => {
12622
- setEl(document.createElement("style"));
12623
- }, []);
12624
- (0, import_react83.useEffect)(() => {
12625
- var _a;
12626
- if (!el || typeof window === "undefined") {
12627
- return;
12628
- }
12629
- el.innerHTML = initialStyles;
12630
- if (iframeEnabled) {
12631
- const frame = getFrame();
12632
- (_a = frame == null ? void 0 : frame.head) == null ? void 0 : _a.appendChild(el);
12633
- }
12634
- document.head.appendChild(el);
12635
- }, [iframeEnabled, el]);
12636
- return el;
12637
- };
12638
- var useInjectGlobalCss = (iframeEnabled) => {
12639
- return useInjectStyleSheet(styles, iframeEnabled);
12640
- };
15514
+ var styles_module_default22 = { "Puck": "_Puck_cgc86_19", "Puck-portal": "_Puck-portal_cgc86_32", "PuckLayout": "_PuckLayout_cgc86_37", "PuckLayout-inner": "_PuckLayout-inner_cgc86_41", "Puck--hidePlugins": "_Puck--hidePlugins_cgc86_73", "PuckLayout--mounted": "_PuckLayout--mounted_cgc86_78", "PuckLayout--mobilePanelHeightToggle": "_PuckLayout--mobilePanelHeightToggle_cgc86_82", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_cgc86_82", "PuckLayout--isExpanded": "_PuckLayout--isExpanded_cgc86_88", "PuckLayout--mobilePanelHeightMinContent": "_PuckLayout--mobilePanelHeightMinContent_cgc86_106", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_cgc86_133", "PuckLayout-mounted": "_PuckLayout-mounted_cgc86_152", "PuckLayout-nav": "_PuckLayout-nav_cgc86_193", "PuckLayout-header": "_PuckLayout-header_cgc86_209", "PuckPluginTab": "_PuckPluginTab_cgc86_223", "PuckPluginTab--visible": "_PuckPluginTab--visible_cgc86_229", "PuckPluginTab-body": "_PuckPluginTab-body_cgc86_234" };
12641
15515
 
12642
15516
  // components/Puck/components/Layout/index.tsx
12643
15517
  init_store();
@@ -13219,7 +16093,7 @@ var ViewportControls = ({
13219
16093
 
13220
16094
  // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css#css-module
13221
16095
  init_react_import();
13222
- var styles_module_default28 = { "PuckCanvas": "_PuckCanvas_ur8dl_1", "PuckCanvas-controls": "_PuckCanvas-controls_ur8dl_17", "PuckCanvas--fullScreen": "_PuckCanvas--fullScreen_ur8dl_22", "PuckCanvas-inner": "_PuckCanvas-inner_ur8dl_33", "PuckCanvas-root": "_PuckCanvas-root_ur8dl_42", "PuckCanvas--ready": "_PuckCanvas--ready_ur8dl_67", "PuckCanvas-loader": "_PuckCanvas-loader_ur8dl_72", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_ur8dl_83" };
16096
+ var styles_module_default28 = { "PuckCanvas": "_PuckCanvas_t6s9b_1", "PuckCanvas-controls": "_PuckCanvas-controls_t6s9b_17", "PuckCanvas--fullScreen": "_PuckCanvas--fullScreen_t6s9b_22", "PuckCanvas-inner": "_PuckCanvas-inner_t6s9b_33", "PuckCanvas-root": "_PuckCanvas-root_t6s9b_42", "PuckCanvas--ready": "_PuckCanvas--ready_t6s9b_67", "PuckCanvas-loader": "_PuckCanvas-loader_t6s9b_72", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_t6s9b_82" };
13223
16097
 
13224
16098
  // components/Puck/components/Canvas/index.tsx
13225
16099
  init_lib();
@@ -13872,11 +16746,20 @@ var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
13872
16746
  mobileOnly: desktopSideBar === "right"
13873
16747
  });
13874
16748
 
16749
+ // lib/style-config.ts
16750
+ init_react_import();
16751
+ var normalizeIframeConfig = (iframe) => __spreadValues({
16752
+ enabled: true,
16753
+ waitForStyles: true,
16754
+ syncHostStyles: true
16755
+ }, iframe);
16756
+
13875
16757
  // components/Puck/components/Layout/index.tsx
13876
16758
  var import_jsx_runtime93 = require("react/jsx-runtime");
13877
16759
  var getClassName43 = get_class_name_factory_default("Puck", styles_module_default22);
13878
16760
  var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default22);
13879
16761
  var getPluginTabClassName = get_class_name_factory_default("PuckPluginTab", styles_module_default22);
16762
+ var useBrowserLayoutEffect = typeof window === "undefined" ? import_react93.useEffect : import_react93.useLayoutEffect;
13880
16763
  var FieldSideBar = () => {
13881
16764
  const title = useAppStore(
13882
16765
  (s) => {
@@ -13902,13 +16785,10 @@ var Layout = ({ children }) => {
13902
16785
  height
13903
16786
  } = usePropsContext();
13904
16787
  const iframe = (0, import_react93.useMemo)(
13905
- () => __spreadValues({
13906
- enabled: true,
13907
- waitForStyles: true
13908
- }, _iframe),
16788
+ () => normalizeIframeConfig(_iframe),
13909
16789
  [_iframe]
13910
16790
  );
13911
- useInjectGlobalCss(iframe.enabled);
16791
+ useInjectUiCss();
13912
16792
  const dispatch = useAppStore((s) => s.dispatch);
13913
16793
  const leftSideBarVisible = useAppStore((s) => s.state.ui.leftSideBarVisible);
13914
16794
  const rightSideBarVisible = useAppStore(
@@ -13956,7 +16836,7 @@ var Layout = ({ children }) => {
13956
16836
  [overrides]
13957
16837
  );
13958
16838
  const [mounted, setMounted] = (0, import_react93.useState)(false);
13959
- (0, import_react93.useEffect)(() => {
16839
+ useBrowserLayoutEffect(() => {
13960
16840
  setMounted(true);
13961
16841
  }, []);
13962
16842
  const ready = useAppStore((s) => s.status === "READY");
@@ -14056,7 +16936,7 @@ var Layout = ({ children }) => {
14056
16936
  hidePlugins: hasLegacySideBarPlugin
14057
16937
  })}`,
14058
16938
  id: instanceId,
14059
- style: { height },
16939
+ style: { height, visibility: "hidden" },
14060
16940
  children: [
14061
16941
  /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(FrameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
14062
16942
  "div",
@@ -14166,10 +17046,7 @@ function PuckProvider({ children }) {
14166
17046
  _experimentalVirtualization
14167
17047
  } = usePropsContext();
14168
17048
  const iframe = (0, import_react94.useMemo)(
14169
- () => __spreadValues({
14170
- enabled: true,
14171
- waitForStyles: true
14172
- }, _iframe),
17049
+ () => normalizeIframeConfig(_iframe),
14173
17050
  [_iframe]
14174
17051
  );
14175
17052
  const [generatedAppState] = (0, import_react94.useState)(() => {
@@ -14525,7 +17402,7 @@ function resolveAllData(_0, _1) {
14525
17402
  const defaultedData = defaultData(data);
14526
17403
  const zonesByComponent = groupZonesByComponent(defaultedData);
14527
17404
  let resolvedZones = {};
14528
- const resolveNode = (_node, parent) => __async(null, null, function* () {
17405
+ const resolveNode = (_node, parent, root) => __async(null, null, function* () {
14529
17406
  const node = toComponent(_node);
14530
17407
  onResolveStart == null ? void 0 : onResolveStart(node);
14531
17408
  const resolved = (yield resolveComponentData(
@@ -14537,13 +17414,14 @@ function resolveAllData(_0, _1) {
14537
17414
  () => {
14538
17415
  },
14539
17416
  "force",
14540
- parent
17417
+ parent,
17418
+ root
14541
17419
  )).node;
14542
17420
  const resolvedAsComponent = toComponent(resolved);
14543
17421
  const resolvedDeepPromise = mapFields(
14544
17422
  resolved,
14545
17423
  {
14546
- slot: ({ value }) => processContent(value, resolvedAsComponent)
17424
+ slot: ({ value }) => processContent(value, resolvedAsComponent, root)
14547
17425
  },
14548
17426
  config
14549
17427
  );
@@ -14553,7 +17431,8 @@ function resolveAllData(_0, _1) {
14553
17431
  (_02) => __async(null, [_02], function* ({ zoneCompound, content }) {
14554
17432
  resolvedZones[zoneCompound] = yield processContent(
14555
17433
  content,
14556
- resolvedAsComponent
17434
+ resolvedAsComponent,
17435
+ root
14557
17436
  );
14558
17437
  })
14559
17438
  );
@@ -14563,14 +17442,15 @@ function resolveAllData(_0, _1) {
14563
17442
  onResolveEnd == null ? void 0 : onResolveEnd(toComponent(resolvedDeep));
14564
17443
  return resolvedDeep;
14565
17444
  });
14566
- const processContent = (content, parent) => __async(null, null, function* () {
14567
- return Promise.all(content.map((item) => resolveNode(item, parent)));
17445
+ const processContent = (content, parent, root) => __async(null, null, function* () {
17446
+ return Promise.all(content.map((item) => resolveNode(item, parent, root)));
14568
17447
  });
14569
17448
  const result = defaultData({});
14570
- result.root = yield resolveNode(defaultedData.root, null);
17449
+ result.root = yield resolveNode(defaultedData.root, null, defaultedData.root);
14571
17450
  result.content = yield processContent(
14572
17451
  defaultedData.content,
14573
- toComponent(result.root)
17452
+ toComponent(result.root),
17453
+ result.root
14574
17454
  );
14575
17455
  result.zones = resolvedZones;
14576
17456
  return result;