@strapi/content-manager 5.0.0-beta.6 → 5.0.0-beta.8

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 (175) hide show
  1. package/dist/_chunks/{CardDragPreview-DSVYodBX.js → CardDragPreview-C0QyJgRA.js} +10 -14
  2. package/dist/_chunks/CardDragPreview-C0QyJgRA.js.map +1 -0
  3. package/dist/_chunks/{CardDragPreview-ikSG4M46.mjs → CardDragPreview-DOxamsuj.mjs} +7 -9
  4. package/dist/_chunks/CardDragPreview-DOxamsuj.mjs.map +1 -0
  5. package/dist/_chunks/{ComponentConfigurationPage--2aLCv-G.mjs → ComponentConfigurationPage-CuWgXugY.mjs} +3 -3
  6. package/dist/_chunks/{ComponentConfigurationPage--2aLCv-G.mjs.map → ComponentConfigurationPage-CuWgXugY.mjs.map} +1 -1
  7. package/dist/_chunks/{ComponentConfigurationPage-43KmCNQE.js → ComponentConfigurationPage-by0e_kNd.js} +3 -3
  8. package/dist/_chunks/{ComponentConfigurationPage-43KmCNQE.js.map → ComponentConfigurationPage-by0e_kNd.js.map} +1 -1
  9. package/dist/_chunks/{ComponentIcon-BBQsYCVn.js → ComponentIcon-BXdiCGQp.js} +8 -2
  10. package/dist/_chunks/ComponentIcon-BXdiCGQp.js.map +1 -0
  11. package/dist/_chunks/{ComponentIcon-BOFnK76n.mjs → ComponentIcon-u4bIXTFY.mjs} +9 -3
  12. package/dist/_chunks/ComponentIcon-u4bIXTFY.mjs.map +1 -0
  13. package/dist/_chunks/{EditConfigurationPage-BfFzJ4Br.js → EditConfigurationPage-CqBeCPGH.js} +3 -3
  14. package/dist/_chunks/{EditConfigurationPage-BfFzJ4Br.js.map → EditConfigurationPage-CqBeCPGH.js.map} +1 -1
  15. package/dist/_chunks/{EditConfigurationPage-CUcGHHvQ.mjs → EditConfigurationPage-DbI4KMyz.mjs} +3 -3
  16. package/dist/_chunks/{EditConfigurationPage-CUcGHHvQ.mjs.map → EditConfigurationPage-DbI4KMyz.mjs.map} +1 -1
  17. package/dist/_chunks/{EditViewPage-CzOT5Kpj.js → EditViewPage-ChgloMyO.js} +7 -9
  18. package/dist/_chunks/EditViewPage-ChgloMyO.js.map +1 -0
  19. package/dist/_chunks/{EditViewPage-Bm8lgcm6.mjs → EditViewPage-dFPBya9U.mjs} +6 -6
  20. package/dist/_chunks/EditViewPage-dFPBya9U.mjs.map +1 -0
  21. package/dist/_chunks/{Field-Dlh0uGnL.mjs → Field-C1nUKcdS.mjs} +500 -608
  22. package/dist/_chunks/Field-C1nUKcdS.mjs.map +1 -0
  23. package/dist/_chunks/{Field-Caef4JjM.js → Field-dLk-vgLL.js} +552 -661
  24. package/dist/_chunks/Field-dLk-vgLL.js.map +1 -0
  25. package/dist/_chunks/{Form-BzuAjtRq.js → Form-CbXtmHC_.js} +21 -19
  26. package/dist/_chunks/Form-CbXtmHC_.js.map +1 -0
  27. package/dist/_chunks/{Form-EnaQL_6L.mjs → Form-DOlpi7Js.mjs} +21 -18
  28. package/dist/_chunks/Form-DOlpi7Js.mjs.map +1 -0
  29. package/dist/_chunks/{History-D6sbCJvo.mjs → History-BFNUAiGc.mjs} +32 -43
  30. package/dist/_chunks/History-BFNUAiGc.mjs.map +1 -0
  31. package/dist/_chunks/{History-C17LiyRg.js → History-BjDfohBr.js} +32 -44
  32. package/dist/_chunks/History-BjDfohBr.js.map +1 -0
  33. package/dist/_chunks/{ListConfigurationPage-Ce4qs7qE.mjs → ListConfigurationPage-DDi0KqFm.mjs} +14 -14
  34. package/dist/_chunks/ListConfigurationPage-DDi0KqFm.mjs.map +1 -0
  35. package/dist/_chunks/{ListConfigurationPage-Dks5SX6f.js → ListConfigurationPage-IQBgWTaa.js} +17 -19
  36. package/dist/_chunks/ListConfigurationPage-IQBgWTaa.js.map +1 -0
  37. package/dist/_chunks/{ListViewPage-Be7S5aKL.mjs → ListViewPage-BPjljUsH.mjs} +25 -45
  38. package/dist/_chunks/ListViewPage-BPjljUsH.mjs.map +1 -0
  39. package/dist/_chunks/{ListViewPage-BwrZrPsh.js → ListViewPage-CZYGqlvF.js} +31 -51
  40. package/dist/_chunks/ListViewPage-CZYGqlvF.js.map +1 -0
  41. package/dist/_chunks/{NoContentTypePage-Cu5r1-JT.js → NoContentTypePage-BOAI6VZ1.js} +5 -5
  42. package/dist/_chunks/NoContentTypePage-BOAI6VZ1.js.map +1 -0
  43. package/dist/_chunks/{NoContentTypePage-CIPmYQMm.mjs → NoContentTypePage-DaWw67K-.mjs} +7 -7
  44. package/dist/_chunks/NoContentTypePage-DaWw67K-.mjs.map +1 -0
  45. package/dist/_chunks/{NoPermissionsPage-DhJ7LYrr.mjs → NoPermissionsPage-CZrJH00p.mjs} +5 -6
  46. package/dist/_chunks/NoPermissionsPage-CZrJH00p.mjs.map +1 -0
  47. package/dist/_chunks/{NoPermissionsPage-C-j6TEUF.js → NoPermissionsPage-cYEtLc_e.js} +4 -5
  48. package/dist/_chunks/NoPermissionsPage-cYEtLc_e.js.map +1 -0
  49. package/dist/_chunks/{Relations-CY7AtkDA.mjs → Relations-DTowyge2.mjs} +66 -56
  50. package/dist/_chunks/Relations-DTowyge2.mjs.map +1 -0
  51. package/dist/_chunks/{Relations-Czs-uZ-s.js → Relations-DU6B7irU.js} +70 -61
  52. package/dist/_chunks/Relations-DU6B7irU.js.map +1 -0
  53. package/dist/_chunks/{en-C-V1_90f.js → en-DTULi5-d.js} +3 -1
  54. package/dist/_chunks/{en-C-V1_90f.js.map → en-DTULi5-d.js.map} +1 -1
  55. package/dist/_chunks/{en-MBPul9Su.mjs → en-GCOTL6jR.mjs} +3 -1
  56. package/dist/_chunks/{en-MBPul9Su.mjs.map → en-GCOTL6jR.mjs.map} +1 -1
  57. package/dist/_chunks/{index-DNVx8ssZ.mjs → index-BaGHmIir.mjs} +507 -202
  58. package/dist/_chunks/index-BaGHmIir.mjs.map +1 -0
  59. package/dist/_chunks/{index-X_2tafck.js → index-CCJeB7Rw.js} +502 -198
  60. package/dist/_chunks/index-CCJeB7Rw.js.map +1 -0
  61. package/dist/_chunks/{layout-Dnh0PNp9.mjs → layout-BinjszSQ.mjs} +13 -13
  62. package/dist/_chunks/layout-BinjszSQ.mjs.map +1 -0
  63. package/dist/_chunks/{layout-dBc7wN7L.js → layout-ni_L9kT1.js} +14 -16
  64. package/dist/_chunks/layout-ni_L9kT1.js.map +1 -0
  65. package/dist/_chunks/{relations-4pHtBrHJ.js → relations-CeJAJc5I.js} +2 -2
  66. package/dist/_chunks/{relations-4pHtBrHJ.js.map → relations-CeJAJc5I.js.map} +1 -1
  67. package/dist/_chunks/{relations-Dx7tMKJN.mjs → relations-c91ji5eR.mjs} +2 -2
  68. package/dist/_chunks/{relations-Dx7tMKJN.mjs.map → relations-c91ji5eR.mjs.map} +1 -1
  69. package/dist/_chunks/useDragAndDrop-DdHgKsqq.mjs.map +1 -1
  70. package/dist/_chunks/useDragAndDrop-J0TUUbR6.js.map +1 -1
  71. package/dist/_chunks/usePrev-B9w_-eYc.js +15 -0
  72. package/dist/_chunks/usePrev-B9w_-eYc.js.map +1 -0
  73. package/dist/_chunks/usePrev-DH6iah0A.mjs +16 -0
  74. package/dist/_chunks/usePrev-DH6iah0A.mjs.map +1 -0
  75. package/dist/admin/index.js +2 -1
  76. package/dist/admin/index.js.map +1 -1
  77. package/dist/admin/index.mjs +5 -4
  78. package/dist/admin/src/components/ComponentIcon.d.ts +6 -3
  79. package/dist/admin/src/content-manager.d.ts +3 -3
  80. package/dist/admin/src/exports.d.ts +1 -0
  81. package/dist/admin/src/history/services/historyVersion.d.ts +1 -1
  82. package/dist/admin/src/hooks/useDocument.d.ts +5 -8
  83. package/dist/admin/src/hooks/useDocumentActions.d.ts +24 -3
  84. package/dist/admin/src/hooks/useDocumentLayout.d.ts +2 -2
  85. package/dist/admin/src/hooks/useDragAndDrop.d.ts +4 -4
  86. package/dist/admin/src/hooks/useKeyboardDragAndDrop.d.ts +1 -1
  87. package/dist/admin/src/pages/EditView/components/DocumentActions.d.ts +3 -1
  88. package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksInput.d.ts +3 -3
  89. package/dist/admin/src/pages/EditView/components/FormInputs/Component/Input.d.ts +2 -2
  90. package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.d.ts +3 -5
  91. package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/Field.d.ts +1 -1
  92. package/dist/admin/src/pages/EditView/components/FormInputs/Relations.d.ts +10 -18
  93. package/dist/admin/src/pages/EditView/components/FormInputs/UID.d.ts +2 -2
  94. package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.d.ts +3 -49
  95. package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/Field.d.ts +2 -2
  96. package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/WysiwygStyles.d.ts +67 -52
  97. package/dist/admin/src/pages/EditView/components/InputRenderer.d.ts +2 -10
  98. package/dist/admin/src/services/api.d.ts +2 -3
  99. package/dist/admin/src/services/components.d.ts +2 -2
  100. package/dist/admin/src/services/contentTypes.d.ts +5 -5
  101. package/dist/admin/src/services/documents.d.ts +29 -17
  102. package/dist/admin/src/services/init.d.ts +2 -2
  103. package/dist/admin/src/services/relations.d.ts +3 -3
  104. package/dist/admin/src/services/uid.d.ts +3 -3
  105. package/dist/admin/src/utils/api.d.ts +4 -18
  106. package/dist/admin/src/utils/validation.d.ts +1 -6
  107. package/dist/server/index.js +529 -407
  108. package/dist/server/index.js.map +1 -1
  109. package/dist/server/index.mjs +537 -415
  110. package/dist/server/index.mjs.map +1 -1
  111. package/dist/server/src/controllers/collection-types.d.ts.map +1 -1
  112. package/dist/server/src/controllers/single-types.d.ts.map +1 -1
  113. package/dist/server/src/controllers/utils/metadata.d.ts +8 -0
  114. package/dist/server/src/controllers/utils/metadata.d.ts.map +1 -0
  115. package/dist/server/src/controllers/validation/dimensions.d.ts +9 -0
  116. package/dist/server/src/controllers/validation/dimensions.d.ts.map +1 -0
  117. package/dist/server/src/controllers/validation/index.d.ts +1 -1
  118. package/dist/server/src/history/services/history.d.ts +2 -4
  119. package/dist/server/src/history/services/history.d.ts.map +1 -1
  120. package/dist/server/src/history/services/index.d.ts +6 -2
  121. package/dist/server/src/history/services/index.d.ts.map +1 -1
  122. package/dist/server/src/history/services/lifecycles.d.ts +9 -0
  123. package/dist/server/src/history/services/lifecycles.d.ts.map +1 -0
  124. package/dist/server/src/history/services/utils.d.ts +41 -9
  125. package/dist/server/src/history/services/utils.d.ts.map +1 -1
  126. package/dist/server/src/history/utils.d.ts +6 -2
  127. package/dist/server/src/history/utils.d.ts.map +1 -1
  128. package/dist/server/src/index.d.ts +18 -39
  129. package/dist/server/src/index.d.ts.map +1 -1
  130. package/dist/server/src/services/document-manager.d.ts +13 -12
  131. package/dist/server/src/services/document-manager.d.ts.map +1 -1
  132. package/dist/server/src/services/document-metadata.d.ts +8 -29
  133. package/dist/server/src/services/document-metadata.d.ts.map +1 -1
  134. package/dist/server/src/services/index.d.ts +18 -39
  135. package/dist/server/src/services/index.d.ts.map +1 -1
  136. package/dist/server/src/services/utils/populate.d.ts +8 -1
  137. package/dist/server/src/services/utils/populate.d.ts.map +1 -1
  138. package/dist/shared/contracts/collection-types.d.ts +14 -6
  139. package/dist/shared/contracts/collection-types.d.ts.map +1 -1
  140. package/dist/shared/contracts/relations.d.ts +2 -2
  141. package/dist/shared/contracts/relations.d.ts.map +1 -1
  142. package/package.json +13 -14
  143. package/dist/_chunks/CardDragPreview-DSVYodBX.js.map +0 -1
  144. package/dist/_chunks/CardDragPreview-ikSG4M46.mjs.map +0 -1
  145. package/dist/_chunks/ComponentIcon-BBQsYCVn.js.map +0 -1
  146. package/dist/_chunks/ComponentIcon-BOFnK76n.mjs.map +0 -1
  147. package/dist/_chunks/EditViewPage-Bm8lgcm6.mjs.map +0 -1
  148. package/dist/_chunks/EditViewPage-CzOT5Kpj.js.map +0 -1
  149. package/dist/_chunks/Field-Caef4JjM.js.map +0 -1
  150. package/dist/_chunks/Field-Dlh0uGnL.mjs.map +0 -1
  151. package/dist/_chunks/Form-BzuAjtRq.js.map +0 -1
  152. package/dist/_chunks/Form-EnaQL_6L.mjs.map +0 -1
  153. package/dist/_chunks/History-C17LiyRg.js.map +0 -1
  154. package/dist/_chunks/History-D6sbCJvo.mjs.map +0 -1
  155. package/dist/_chunks/ListConfigurationPage-Ce4qs7qE.mjs.map +0 -1
  156. package/dist/_chunks/ListConfigurationPage-Dks5SX6f.js.map +0 -1
  157. package/dist/_chunks/ListViewPage-Be7S5aKL.mjs.map +0 -1
  158. package/dist/_chunks/ListViewPage-BwrZrPsh.js.map +0 -1
  159. package/dist/_chunks/NoContentTypePage-CIPmYQMm.mjs.map +0 -1
  160. package/dist/_chunks/NoContentTypePage-Cu5r1-JT.js.map +0 -1
  161. package/dist/_chunks/NoPermissionsPage-C-j6TEUF.js.map +0 -1
  162. package/dist/_chunks/NoPermissionsPage-DhJ7LYrr.mjs.map +0 -1
  163. package/dist/_chunks/Relations-CY7AtkDA.mjs.map +0 -1
  164. package/dist/_chunks/Relations-Czs-uZ-s.js.map +0 -1
  165. package/dist/_chunks/index-DNVx8ssZ.mjs.map +0 -1
  166. package/dist/_chunks/index-X_2tafck.js.map +0 -1
  167. package/dist/_chunks/layout-Dnh0PNp9.mjs.map +0 -1
  168. package/dist/_chunks/layout-dBc7wN7L.js.map +0 -1
  169. package/dist/_chunks/urls-CbOsUOoW.mjs +0 -7
  170. package/dist/_chunks/urls-CbOsUOoW.mjs.map +0 -1
  171. package/dist/_chunks/urls-DzZya_gm.js +0 -6
  172. package/dist/_chunks/urls-DzZya_gm.js.map +0 -1
  173. package/dist/admin/src/pages/ListView/components/BulkActions/PublishAction.d.ts +0 -31
  174. package/dist/server/src/controllers/utils/dimensions.d.ts +0 -5
  175. package/dist/server/src/controllers/utils/dimensions.d.ts.map +0 -1
@@ -5,19 +5,19 @@ const strapiAdmin = require("@strapi/admin/strapi-admin");
5
5
  const designSystem = require("@strapi/design-system");
6
6
  const pipe$1 = require("lodash/fp/pipe");
7
7
  const reactIntl = require("react-intl");
8
- const index = require("./index-X_2tafck.js");
8
+ const index = require("./index-CCJeB7Rw.js");
9
9
  const fractionalIndexing = require("fractional-indexing");
10
- const Relations = require("./Relations-Czs-uZ-s.js");
10
+ const Relations = require("./Relations-DU6B7irU.js");
11
11
  const Icons = require("@strapi/icons");
12
- const styled = require("styled-components");
13
- const ComponentIcon = require("./ComponentIcon-BBQsYCVn.js");
12
+ const styledComponents = require("styled-components");
13
+ const ComponentIcon = require("./ComponentIcon-BXdiCGQp.js");
14
14
  const reactDndHtml5Backend = require("react-dnd-html5-backend");
15
15
  const useDragAndDrop = require("./useDragAndDrop-J0TUUbR6.js");
16
16
  const objects = require("./objects-gigeqt7s.js");
17
17
  const slate = require("slate");
18
18
  const slateHistory = require("slate-history");
19
19
  const slateReact = require("slate-react");
20
- const urls = require("./urls-DzZya_gm.js");
20
+ const usePrev = require("./usePrev-B9w_-eYc.js");
21
21
  const Toolbar = require("@radix-ui/react-toolbar");
22
22
  const reactRouterDom = require("react-router-dom");
23
23
  const CodeMirror = require("codemirror5");
@@ -56,7 +56,6 @@ function _interopNamespace(e) {
56
56
  }
57
57
  const React__namespace = /* @__PURE__ */ _interopNamespace(React);
58
58
  const pipe__default = /* @__PURE__ */ _interopDefault(pipe$1);
59
- const styled__default = /* @__PURE__ */ _interopDefault(styled);
60
59
  const Toolbar__namespace = /* @__PURE__ */ _interopNamespace(Toolbar);
61
60
  const CodeMirror__default = /* @__PURE__ */ _interopDefault(CodeMirror);
62
61
  const sanitizeHtml__default = /* @__PURE__ */ _interopDefault(sanitizeHtml);
@@ -258,7 +257,7 @@ const pressEnterTwiceToExit = (editor) => {
258
257
  });
259
258
  }
260
259
  };
261
- const CodeBlock = styled__default.default.pre.attrs({ role: "code" })`
260
+ const CodeBlock = styledComponents.styled.pre`
262
261
  border-radius: ${({ theme }) => theme.borderRadius};
263
262
  background-color: ${({ theme }) => theme.colors.neutral100};
264
263
  max-width: 100%;
@@ -293,27 +292,27 @@ const codeBlocks = {
293
292
  dragHandleTopMargin: "10px"
294
293
  }
295
294
  };
296
- const H1 = styled__default.default(designSystem.Typography).attrs({ as: "h1" })`
295
+ const H1 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h1" })`
297
296
  font-size: 4.2rem;
298
297
  line-height: ${({ theme }) => theme.lineHeights[1]};
299
298
  `;
300
- const H2 = styled__default.default(designSystem.Typography).attrs({ as: "h2" })`
299
+ const H2 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h2" })`
301
300
  font-size: 3.5rem;
302
301
  line-height: ${({ theme }) => theme.lineHeights[1]};
303
302
  `;
304
- const H3 = styled__default.default(designSystem.Typography).attrs({ as: "h3" })`
303
+ const H3 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h3" })`
305
304
  font-size: 2.9rem;
306
305
  line-height: ${({ theme }) => theme.lineHeights[1]};
307
306
  `;
308
- const H4 = styled__default.default(designSystem.Typography).attrs({ as: "h4" })`
307
+ const H4 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h4" })`
309
308
  font-size: 2.4rem;
310
309
  line-height: ${({ theme }) => theme.lineHeights[1]};
311
310
  `;
312
- const H5 = styled__default.default(designSystem.Typography).attrs({ as: "h5" })`
311
+ const H5 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h5" })`
313
312
  font-size: 2rem;
314
313
  line-height: ${({ theme }) => theme.lineHeights[1]};
315
314
  `;
316
- const H6 = styled__default.default(designSystem.Typography).attrs({ as: "h6" })`
315
+ const H6 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h6" })`
317
316
  font-size: 1.6rem;
318
317
  line-height: ${({ theme }) => theme.lineHeights[1]};
319
318
  `;
@@ -399,10 +398,10 @@ const headingBlocks = {
399
398
  dragHandleTopMargin: "-2px"
400
399
  }
401
400
  };
402
- const ImageWrapper = styled__default.default(designSystem.Flex)`
401
+ const ImageWrapper = styledComponents.styled(designSystem.Flex)`
403
402
  transition-property: box-shadow;
404
403
  transition-duration: 0.2s;
405
- ${(props) => props.isFocused && styled.css`
404
+ ${(props) => props.$isFocused && styledComponents.css`
406
405
  box-shadow: ${props.theme.colors.primary600} 0px 0px 0px 3px;
407
406
  `}
408
407
 
@@ -454,7 +453,7 @@ const Image = ({ attributes, children, element }) => {
454
453
  background: "neutral100",
455
454
  contentEditable: false,
456
455
  justifyContent: "center",
457
- isFocused: editorIsFocused && imageIsSelected,
456
+ $isFocused: editorIsFocused && imageIsSelected,
458
457
  hasRadius: true,
459
458
  children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: url, alt: alternativeText, width, height })
460
459
  }
@@ -502,7 +501,7 @@ const ImageDialog = () => {
502
501
  const nodeImage = {
503
502
  ...expectedImage,
504
503
  alternativeText: expectedImage.alternativeText || expectedImage.name,
505
- url: urls.prefixFileUrlWithBackendUrl(image.url)
504
+ url: usePrev.prefixFileUrlWithBackendUrl(image.url)
506
505
  };
507
506
  return nodeImage;
508
507
  });
@@ -610,11 +609,11 @@ const isLinkNode = (element) => {
610
609
  const isListNode$1 = (element) => {
611
610
  return element.type === "list";
612
611
  };
613
- const StyledBaseLink = styled__default.default(designSystem.BaseLink)`
612
+ const StyledBaseLink = styledComponents.styled(designSystem.BaseLink)`
614
613
  text-decoration: none;
615
614
  `;
616
- const RemoveButton = styled__default.default(designSystem.Button)`
617
- visibility: ${(props) => props.visible ? "visible" : "hidden"};
615
+ const RemoveButton = styledComponents.styled(designSystem.Button)`
616
+ visibility: ${(props) => props.$visible ? "visible" : "hidden"};
618
617
  `;
619
618
  const LinkContent = React__namespace.forwardRef(
620
619
  ({ link, children, attributes }, forwardedRef) => {
@@ -682,14 +681,14 @@ const LinkContent = React__namespace.forwardRef(
682
681
  children
683
682
  }
684
683
  ),
685
- popoverOpen && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover, { source: linkRef, onDismiss: handleDismiss, padding: 4, contentEditable: false, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { as: "form", onSubmit: handleSave, direction: "column", gap: 4, children: [
686
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field, { width: "368px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
687
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldLabel, { children: formatMessage({
684
+ popoverOpen && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover, { source: linkRef, onDismiss: handleDismiss, padding: 4, contentEditable: false, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "form", onSubmit: handleSave, direction: "column", gap: 4, children: [
685
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { width: "368px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
686
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
688
687
  id: "components.Blocks.popover.text",
689
688
  defaultMessage: "Text"
690
689
  }) }),
691
690
  /* @__PURE__ */ jsxRuntime.jsx(
692
- designSystem.FieldInput,
691
+ designSystem.Field.Input,
693
692
  {
694
693
  name: "text",
695
694
  placeholder: formatMessage({
@@ -703,13 +702,13 @@ const LinkContent = React__namespace.forwardRef(
703
702
  }
704
703
  )
705
704
  ] }) }),
706
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field, { width: "368px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
707
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldLabel, { children: formatMessage({
705
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { width: "368px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
706
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
708
707
  id: "components.Blocks.popover.link",
709
708
  defaultMessage: "Link"
710
709
  }) }),
711
710
  /* @__PURE__ */ jsxRuntime.jsx(
712
- designSystem.FieldInput,
711
+ designSystem.Field.Input,
713
712
  {
714
713
  ref: linkInputRef,
715
714
  name: "url",
@@ -728,7 +727,7 @@ const LinkContent = React__namespace.forwardRef(
728
727
  {
729
728
  variant: "danger-light",
730
729
  onClick: () => removeLink(editor),
731
- visible: showRemoveButton,
730
+ $visible: showRemoveButton,
732
731
  children: formatMessage({
733
732
  id: "components.Blocks.popover.remove",
734
733
  defaultMessage: "Remove"
@@ -764,7 +763,7 @@ const linkBlocks = {
764
763
  isInBlocksSelector: false
765
764
  }
766
765
  };
767
- const listStyle = styled.css`
766
+ const listStyle = styledComponents.css`
768
767
  display: flex;
769
768
  flex-direction: column;
770
769
  gap: ${({ theme }) => theme.spaces[2]};
@@ -782,12 +781,12 @@ const listStyle = styled.css`
782
781
  margin-inline-start: ${({ theme }) => theme.spaces[3]};
783
782
  }
784
783
  `;
785
- const Orderedlist = styled__default.default.ol`
786
- list-style-type: ${(props) => props.listStyleType};
784
+ const Orderedlist = styledComponents.styled.ol`
785
+ list-style-type: ${(props) => props.$listStyleType};
787
786
  ${listStyle}
788
787
  `;
789
- const Unorderedlist = styled__default.default.ul`
790
- list-style-type: ${(props) => props.listStyleType};
788
+ const Unorderedlist = styledComponents.styled.ul`
789
+ list-style-type: ${(props) => props.$listStyleType};
791
790
  ${listStyle}
792
791
  `;
793
792
  const orderedStyles = ["decimal", "lower-alpha", "upper-roman"];
@@ -800,9 +799,9 @@ const List = ({ attributes, children, element }) => {
800
799
  const nextIndex = (element.indentLevel || 0) % listStyles.length;
801
800
  const listStyleType = listStyles[nextIndex];
802
801
  if (element.format === "ordered") {
803
- return /* @__PURE__ */ jsxRuntime.jsx(Orderedlist, { listStyleType, ...attributes, children });
802
+ return /* @__PURE__ */ jsxRuntime.jsx(Orderedlist, { $listStyleType: listStyleType, ...attributes, children });
804
803
  }
805
- return /* @__PURE__ */ jsxRuntime.jsx(Unorderedlist, { listStyleType, ...attributes, children });
804
+ return /* @__PURE__ */ jsxRuntime.jsx(Unorderedlist, { $listStyleType: listStyleType, ...attributes, children });
806
805
  };
807
806
  const replaceListWithEmptyBlock = (editor, currentListPath) => {
808
807
  slate.Transforms.removeNodes(editor, { at: currentListPath });
@@ -999,7 +998,7 @@ const listBlocks = {
999
998
  snippets: ["-", "*", "+"]
1000
999
  },
1001
1000
  "list-item": {
1002
- renderElement: (props) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { as: "li", ...props.attributes, children: props.children }),
1001
+ renderElement: (props) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "li", ...props.attributes, children: props.children }),
1003
1002
  // No handleConvert, list items are created when converting to the parent list
1004
1003
  matchNode: (node) => node.type === "list-item",
1005
1004
  isInBlocksSelector: false,
@@ -1008,7 +1007,7 @@ const listBlocks = {
1008
1007
  };
1009
1008
  const paragraphBlocks = {
1010
1009
  paragraph: {
1011
- renderElement: (props) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { as: "p", variant: "omega", ...props.attributes, children: props.children }),
1010
+ renderElement: (props) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "p", variant: "omega", ...props.attributes, children: props.children }),
1012
1011
  icon: Icons.Paragraph,
1013
1012
  label: {
1014
1013
  id: "components.Blocks.blocks.text",
@@ -1056,7 +1055,7 @@ const paragraphBlocks = {
1056
1055
  }
1057
1056
  }
1058
1057
  };
1059
- const Blockquote = styled__default.default.blockquote.attrs({ role: "blockquote" })`
1058
+ const Blockquote = styledComponents.styled.blockquote.attrs({ role: "blockquote" })`
1060
1059
  font-weight: ${({ theme }) => theme.fontWeights.regular};
1061
1060
  border-left: ${({ theme }) => `${theme.spaces[1]} solid ${theme.colors.neutral200}`};
1062
1061
  padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};
@@ -1086,17 +1085,17 @@ const quoteBlocks = {
1086
1085
  dragHandleTopMargin: "6px"
1087
1086
  }
1088
1087
  };
1089
- const ToolbarWrapper = styled__default.default(designSystem.Flex)`
1088
+ const ToolbarWrapper = styledComponents.styled(designSystem.Flex)`
1090
1089
  &[aria-disabled='true'] {
1091
1090
  cursor: not-allowed;
1092
1091
  }
1093
1092
  `;
1094
- const Separator = styled__default.default(Toolbar__namespace.Separator)`
1093
+ const Separator = styledComponents.styled(Toolbar__namespace.Separator)`
1095
1094
  background: ${({ theme }) => theme.colors.neutral150};
1096
1095
  width: 1px;
1097
1096
  height: 2.4rem;
1098
1097
  `;
1099
- const FlexButton = styled__default.default(designSystem.Flex)`
1098
+ const FlexButton = styledComponents.styled(designSystem.Flex)`
1100
1099
  // Inherit the not-allowed cursor from ToolbarWrapper when disabled
1101
1100
  &[aria-disabled] {
1102
1101
  cursor: inherit;
@@ -1111,7 +1110,7 @@ const FlexButton = styled__default.default(designSystem.Flex)`
1111
1110
  }
1112
1111
  }
1113
1112
  `;
1114
- const SelectWrapper = styled__default.default(designSystem.Box)`
1113
+ const SelectWrapper = styledComponents.styled(designSystem.Box)`
1115
1114
  // Styling changes to SingleSelect component don't work, so adding wrapper to target SingleSelect
1116
1115
  div[role='combobox'] {
1117
1116
  border: none;
@@ -1174,7 +1173,7 @@ const ToolbarButton = ({
1174
1173
  children: /* @__PURE__ */ jsxRuntime.jsx(
1175
1174
  FlexButton,
1176
1175
  {
1177
- as: "button",
1176
+ tag: "button",
1178
1177
  background: isActive ? "primary100" : "",
1179
1178
  alignItems: "center",
1180
1179
  justifyContent: "center",
@@ -1458,7 +1457,7 @@ const BlocksToolbar = () => {
1458
1457
  ] }) })
1459
1458
  ] }) });
1460
1459
  };
1461
- const StyledEditable = styled__default.default(slateReact.Editable)`
1460
+ const StyledEditable = styledComponents.styled(slateReact.Editable)`
1462
1461
  // The outline style is set on the wrapper with :focus-within
1463
1462
  outline: none;
1464
1463
  display: flex;
@@ -1473,20 +1472,20 @@ const StyledEditable = styled__default.default(slateReact.Editable)`
1473
1472
  padding-bottom: ${({ theme }) => theme.spaces[3]};
1474
1473
  }
1475
1474
  `;
1476
- const Wrapper$1 = styled__default.default(designSystem.Box)`
1475
+ const Wrapper$1 = styledComponents.styled(designSystem.Box)`
1477
1476
  position: ${({ isOverDropTarget }) => isOverDropTarget && "relative"};
1478
1477
  `;
1479
- const DropPlaceholder = styled__default.default(designSystem.Box)`
1478
+ const DropPlaceholder = styledComponents.styled(designSystem.Box)`
1480
1479
  position: absolute;
1481
1480
  right: 0;
1482
1481
 
1483
1482
  // Show drop placeholder 8px above or below the drop target
1484
- ${({ dragDirection, theme, placeholderMargin }) => styled.css`
1483
+ ${({ dragDirection, theme, placeholderMargin }) => styledComponents.css`
1485
1484
  top: ${dragDirection === useDragAndDrop.DIRECTIONS.UPWARD && `-${theme.spaces[placeholderMargin]}`};
1486
1485
  bottom: ${dragDirection === useDragAndDrop.DIRECTIONS.DOWNWARD && `-${theme.spaces[placeholderMargin]}`};
1487
1486
  `}
1488
1487
  `;
1489
- const DragItem = styled__default.default(designSystem.Flex)`
1488
+ const DragItem = styledComponents.styled(designSystem.Flex)`
1490
1489
  // Style each block rendered using renderElement()
1491
1490
  & > [data-slate-node='element'] {
1492
1491
  width: 100%;
@@ -1495,14 +1494,14 @@ const DragItem = styled__default.default(designSystem.Flex)`
1495
1494
 
1496
1495
  // Set the visibility of drag button
1497
1496
  [role='button'] {
1498
- visibility: ${(props) => props.dragVisibility};
1497
+ visibility: ${(props) => props.$dragVisibility};
1499
1498
  opacity: inherit;
1500
1499
  }
1501
1500
  &[aria-disabled='true'] {
1502
1501
  user-drag: none;
1503
1502
  }
1504
1503
  `;
1505
- const DragIconButton = styled__default.default(designSystem.IconButton)`
1504
+ const DragIconButton = styledComponents.styled(designSystem.IconButton)`
1506
1505
  display: flex;
1507
1506
  align-items: center;
1508
1507
  justify-content: center;
@@ -1512,7 +1511,7 @@ const DragIconButton = styled__default.default(designSystem.IconButton)`
1512
1511
  visibility: hidden;
1513
1512
  cursor: grab;
1514
1513
  opacity: inherit;
1515
- margin-top: ${(props) => props.dragHandleTopMargin ?? 0};
1514
+ margin-top: ${(props) => props.$dragHandleTopMargin ?? 0};
1516
1515
 
1517
1516
  &:hover {
1518
1517
  background: ${({ theme }) => theme.colors.neutral200};
@@ -1587,7 +1586,7 @@ const DragAndDropElement = ({
1587
1586
  React__namespace.useEffect(() => {
1588
1587
  setDragVisibility("hidden");
1589
1588
  }, [editor.selection]);
1590
- return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$1, { ref: (ref) => composedBoxRefs(ref), isOverDropTarget, children: [
1589
+ return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$1, { ref: composedBoxRefs, isOverDropTarget, children: [
1591
1590
  isOverDropTarget && /* @__PURE__ */ jsxRuntime.jsx(
1592
1591
  DropPlaceholder,
1593
1592
  {
@@ -1625,15 +1624,16 @@ const DragAndDropElement = ({
1625
1624
  onSelect: () => setDragVisibility("visible"),
1626
1625
  onMouseLeave: () => setDragVisibility("hidden"),
1627
1626
  "aria-disabled": disabled,
1628
- dragVisibility,
1627
+ $dragVisibility: dragVisibility,
1629
1628
  children: [
1630
1629
  /* @__PURE__ */ jsxRuntime.jsx(
1631
1630
  DragIconButton,
1632
1631
  {
1633
- forwardedAs: "div",
1632
+ tag: "div",
1634
1633
  role: "button",
1635
1634
  tabIndex: 0,
1636
- "aria-label": formatMessage({
1635
+ withTooltip: false,
1636
+ label: formatMessage({
1637
1637
  id: index.getTranslation("components.DragHandle-label"),
1638
1638
  defaultMessage: "Drag"
1639
1639
  }),
@@ -1641,7 +1641,7 @@ const DragAndDropElement = ({
1641
1641
  "aria-disabled": disabled,
1642
1642
  disabled,
1643
1643
  draggable: true,
1644
- dragHandleTopMargin,
1644
+ $dragHandleTopMargin: dragHandleTopMargin,
1645
1645
  children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, { color: "neutral600" })
1646
1646
  }
1647
1647
  ),
@@ -1653,17 +1653,18 @@ const DragAndDropElement = ({
1653
1653
  };
1654
1654
  const CloneDragItem = ({ children, dragHandleTopMargin }) => {
1655
1655
  const { formatMessage } = reactIntl.useIntl();
1656
- return /* @__PURE__ */ jsxRuntime.jsxs(DragItem, { gap: 2, paddingLeft: 2, alignItems: "start", dragVisibility: "visible", children: [
1656
+ return /* @__PURE__ */ jsxRuntime.jsxs(DragItem, { gap: 2, paddingLeft: 2, alignItems: "start", $dragVisibility: "visible", children: [
1657
1657
  /* @__PURE__ */ jsxRuntime.jsx(
1658
1658
  DragIconButton,
1659
1659
  {
1660
- forwardedAs: "div",
1660
+ tag: "div",
1661
1661
  role: "button",
1662
- "aria-label": formatMessage({
1662
+ withTooltip: false,
1663
+ label: formatMessage({
1663
1664
  id: index.getTranslation("components.DragHandle-label"),
1664
1665
  defaultMessage: "Drag"
1665
1666
  }),
1666
- dragHandleTopMargin,
1667
+ $dragHandleTopMargin: dragHandleTopMargin,
1667
1668
  children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, { color: "neutral600" })
1668
1669
  }
1669
1670
  ),
@@ -1910,12 +1911,12 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
1910
1911
  }
1911
1912
  );
1912
1913
  };
1913
- const CollapseIconButton = styled__default.default(designSystem.IconButton)`
1914
+ const CollapseIconButton = styledComponents.styled(designSystem.IconButton)`
1914
1915
  position: absolute;
1915
1916
  bottom: 1.2rem;
1916
1917
  right: 1.2rem;
1917
1918
  `;
1918
- const ExpandWrapper$1 = styled__default.default(designSystem.Flex)`
1919
+ const ExpandWrapper$1 = styledComponents.styled(designSystem.Flex)`
1919
1920
  // Background with 20% opacity
1920
1921
  background: ${({ theme }) => `${theme.colors.neutral800}1F`};
1921
1922
  `;
@@ -1980,13 +1981,13 @@ const EditorLayout$1 = ({
1980
1981
  ) }) });
1981
1982
  }
1982
1983
  return /* @__PURE__ */ jsxRuntime.jsx(
1983
- designSystem.InputWrapper,
1984
+ InputWrapper,
1984
1985
  {
1985
1986
  direction: "column",
1986
1987
  alignItems: "flex-start",
1987
1988
  height: "512px",
1988
- disabled,
1989
- hasError: Boolean(error),
1989
+ $disabled: disabled,
1990
+ $hasError: Boolean(error),
1990
1991
  style: { overflow: "hidden" },
1991
1992
  "aria-describedby": ariaDescriptionId,
1992
1993
  position: "relative",
@@ -1994,25 +1995,52 @@ const EditorLayout$1 = ({
1994
1995
  }
1995
1996
  );
1996
1997
  };
1997
- const stylesToInherit = styled.css`
1998
+ const InputWrapper = styledComponents.styled(designSystem.Flex)`
1999
+ border: 1px solid
2000
+ ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
2001
+ border-radius: ${({ theme }) => theme.borderRadius};
2002
+ background: ${({ theme }) => theme.colors.neutral0};
2003
+
2004
+ ${({ theme, $hasError = false }) => styledComponents.css`
2005
+ outline: none;
2006
+ box-shadow: 0;
2007
+ transition-property: border-color, box-shadow, fill;
2008
+ transition-duration: 0.2s;
2009
+
2010
+ &:focus-within {
2011
+ border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};
2012
+ box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;
2013
+ }
2014
+ `}
2015
+
2016
+ ${({ theme, $disabled }) => $disabled ? styledComponents.css`
2017
+ color: ${theme.colors.neutral600};
2018
+ background: ${theme.colors.neutral150};
2019
+ ` : void 0}
2020
+ `;
2021
+ const stylesToInherit = styledComponents.css`
1998
2022
  font-size: inherit;
1999
2023
  color: inherit;
2000
2024
  line-height: inherit;
2001
2025
  `;
2002
- const BoldText = styled__default.default(designSystem.Typography).attrs({ fontWeight: "bold" })`
2026
+ const BoldText = styledComponents.styled(designSystem.Typography).attrs({ fontWeight: "bold" })`
2003
2027
  ${stylesToInherit}
2004
2028
  `;
2005
- const ItalicText = styled__default.default(designSystem.Typography)`
2029
+ const ItalicText = styledComponents.styled(designSystem.Typography)`
2006
2030
  font-style: italic;
2007
2031
  ${stylesToInherit}
2008
2032
  `;
2009
- const UnderlineText = styled__default.default(designSystem.Typography).attrs({ textDecoration: "underline" })`
2033
+ const UnderlineText = styledComponents.styled(designSystem.Typography).attrs({
2034
+ textDecoration: "underline"
2035
+ })`
2010
2036
  ${stylesToInherit}
2011
2037
  `;
2012
- const StrikeThroughText = styled__default.default(designSystem.Typography).attrs({ textDecoration: "line-through" })`
2038
+ const StrikeThroughText = styledComponents.styled(designSystem.Typography).attrs({
2039
+ textDecoration: "line-through"
2040
+ })`
2013
2041
  ${stylesToInherit}
2014
2042
  `;
2015
- const InlineCode = styled__default.default.code`
2043
+ const InlineCode = styledComponents.styled.code`
2016
2044
  background-color: ${({ theme }) => theme.colors.neutral150};
2017
2045
  border-radius: ${({ theme }) => theme.borderRadius};
2018
2046
  padding: ${({ theme }) => `0 ${theme.spaces[2]}`};
@@ -2182,10 +2210,10 @@ function useBlocksEditorContext(consumerName) {
2182
2210
  editor
2183
2211
  };
2184
2212
  }
2185
- const EditorDivider = styled__default.default(designSystem.Divider)`
2213
+ const EditorDivider = styledComponents.styled(designSystem.Divider)`
2186
2214
  background: ${({ theme }) => theme.colors.neutral200};
2187
2215
  `;
2188
- const ExpandIconButton = styled__default.default(designSystem.IconButton)`
2216
+ const ExpandIconButton = styledComponents.styled(designSystem.IconButton)`
2189
2217
  position: absolute;
2190
2218
  bottom: 1.2rem;
2191
2219
  right: 1.2rem;
@@ -2300,8 +2328,8 @@ const BlocksInput = React__namespace.forwardRef(
2300
2328
  ({ label, name: name2, required = false, hint, labelAction, ...editorProps }, forwardedRef) => {
2301
2329
  const id = React__namespace.useId();
2302
2330
  const field = strapiAdmin.useField(name2);
2303
- return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field, { id, name: name2, hint, error: field.error, required, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
2304
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldLabel, { action: labelAction, children: label }),
2331
+ return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { id, name: name2, hint, error: field.error, required, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
2332
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
2305
2333
  /* @__PURE__ */ jsxRuntime.jsx(
2306
2334
  BlocksEditor,
2307
2335
  {
@@ -2314,11 +2342,12 @@ const BlocksInput = React__namespace.forwardRef(
2314
2342
  ...editorProps
2315
2343
  }
2316
2344
  ),
2317
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldHint, {}),
2318
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldError, {})
2345
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
2346
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
2319
2347
  ] }) });
2320
2348
  }
2321
2349
  );
2350
+ const MemoizedBlocksInput = React__namespace.memo(BlocksInput);
2322
2351
  const createDefaultForm = (contentType, components = {}) => {
2323
2352
  const traverseSchema = (attributes) => {
2324
2353
  return Object.entries(attributes).reduce((acc, [key, attribute]) => {
@@ -2346,7 +2375,7 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
2346
2375
  /* @__PURE__ */ jsxRuntime.jsx(
2347
2376
  designSystem.Box,
2348
2377
  {
2349
- as: "button",
2378
+ tag: "button",
2350
2379
  background: "neutral100",
2351
2380
  borderColor: field.error ? "danger600" : "neutral200",
2352
2381
  hasRadius: true,
@@ -2367,7 +2396,7 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
2367
2396
  field.error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", variant: "pi", children: field.error })
2368
2397
  ] });
2369
2398
  };
2370
- const CircleIcon = styled__default.default(Icons.PlusCircle)`
2399
+ const CircleIcon = styledComponents.styled(Icons.PlusCircle)`
2371
2400
  width: 2.4rem;
2372
2401
  height: 2.4rem;
2373
2402
  > circle {
@@ -2423,7 +2452,7 @@ const RepeatableComponent = ({
2423
2452
  const moveFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.moveFieldRow);
2424
2453
  const removeFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.removeFieldRow);
2425
2454
  const { max = Infinity } = attribute;
2426
- const [collapseToOpen, setCollapseToOpen] = React__namespace.useState(null);
2455
+ const [collapseToOpen, setCollapseToOpen] = React__namespace.useState("");
2427
2456
  const [liveText, setLiveText] = React__namespace.useState("");
2428
2457
  const componentTmpKeyWithFocussedField = React__namespace.useMemo(() => {
2429
2458
  if (search.has("field")) {
@@ -2439,13 +2468,19 @@ const RepeatableComponent = ({
2439
2468
  }
2440
2469
  return void 0;
2441
2470
  }, [search, name2, value]);
2471
+ const prevValue = usePrev.usePrev(value);
2442
2472
  React__namespace.useEffect(() => {
2443
- if (typeof componentTmpKeyWithFocussedField === "number") {
2473
+ if (prevValue && prevValue.length < value.length) {
2474
+ setCollapseToOpen(value[value.length - 1].__temp_key__);
2475
+ }
2476
+ }, [value, prevValue]);
2477
+ React__namespace.useEffect(() => {
2478
+ if (typeof componentTmpKeyWithFocussedField === "string") {
2444
2479
  setCollapseToOpen(componentTmpKeyWithFocussedField);
2445
2480
  }
2446
2481
  }, [componentTmpKeyWithFocussedField]);
2447
2482
  const toggleCollapses = () => {
2448
- setCollapseToOpen(null);
2483
+ setCollapseToOpen("");
2449
2484
  };
2450
2485
  const handleClick = () => {
2451
2486
  if (value.length < max) {
@@ -2477,12 +2512,8 @@ const RepeatableComponent = ({
2477
2512
  );
2478
2513
  moveFieldRow(name2, currentIndex, newIndex);
2479
2514
  };
2480
- const handleToggle = (key) => () => {
2481
- if (collapseToOpen === key) {
2482
- setCollapseToOpen(null);
2483
- } else {
2484
- setCollapseToOpen(key);
2485
- }
2515
+ const handleValueChange = (key) => {
2516
+ setCollapseToOpen(key);
2486
2517
  };
2487
2518
  const getItemPos = (index2) => `${index2 + 1} of ${value.length}`;
2488
2519
  const handleCancel = (index$1) => {
@@ -2537,158 +2568,104 @@ const RepeatableComponent = ({
2537
2568
  defaultMessage: `Press spacebar to grab and re-order`
2538
2569
  }) }),
2539
2570
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { "aria-live": "assertive", children: liveText }),
2540
- /* @__PURE__ */ jsxRuntime.jsxs(AccordionGroup, { error, children: [
2541
- /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { "aria-describedby": ariaDescriptionId, children: value.map(({ __temp_key__: key, id }, index2) => {
2542
- const nameWithIndex = `${name2}.${index2}`;
2543
- return /* @__PURE__ */ jsxRuntime.jsx(
2544
- Relations.ComponentProvider,
2545
- {
2546
- id,
2547
- uid: attribute.component,
2548
- level: level + 1,
2549
- type: "repeatable",
2550
- children: /* @__PURE__ */ jsxRuntime.jsx(
2551
- Component,
2571
+ /* @__PURE__ */ jsxRuntime.jsxs(
2572
+ AccordionRoot,
2573
+ {
2574
+ $error: error,
2575
+ value: collapseToOpen,
2576
+ onValueChange: handleValueChange,
2577
+ "aria-describedby": ariaDescriptionId,
2578
+ children: [
2579
+ value.map(({ __temp_key__: key, id }, index2) => {
2580
+ const nameWithIndex = `${name2}.${index2}`;
2581
+ return /* @__PURE__ */ jsxRuntime.jsx(
2582
+ Relations.ComponentProvider,
2552
2583
  {
2553
- disabled,
2554
- name: nameWithIndex,
2555
- attribute,
2556
- index: index2,
2557
- isOpen: collapseToOpen === key,
2558
- mainField,
2559
- onMoveItem: handleMoveComponentField,
2560
- onClickToggle: handleToggle(key),
2561
- onDeleteComponent: () => {
2562
- removeFieldRow(name2, index2);
2563
- toggleCollapses();
2564
- },
2565
- toggleCollapses,
2566
- onCancel: handleCancel,
2567
- onDropItem: handleDropItem,
2568
- onGrabItem: handleGrabItem,
2569
- children: layout.map((row, index22) => {
2570
- return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: row.map(({ size, ...field }) => {
2571
- const completeFieldName = `${nameWithIndex}.${field.name}`;
2572
- return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
2573
- }) }, index22);
2574
- })
2575
- }
2576
- )
2577
- },
2578
- key
2579
- );
2580
- }) }),
2581
- /* @__PURE__ */ jsxRuntime.jsx(AccordionFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", height: "48px", background: "neutral0", children: /* @__PURE__ */ jsxRuntime.jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Plus, {}), children: formatMessage({
2582
- id: index.getTranslation("containers.EditView.add.new-entry"),
2583
- defaultMessage: "Add an entry"
2584
- }) }) }) })
2585
- ] })
2584
+ id,
2585
+ uid: attribute.component,
2586
+ level: level + 1,
2587
+ type: "repeatable",
2588
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2589
+ Component,
2590
+ {
2591
+ disabled,
2592
+ name: nameWithIndex,
2593
+ attribute,
2594
+ index: index2,
2595
+ mainField,
2596
+ onMoveItem: handleMoveComponentField,
2597
+ onDeleteComponent: () => {
2598
+ removeFieldRow(name2, index2);
2599
+ toggleCollapses();
2600
+ },
2601
+ toggleCollapses,
2602
+ onCancel: handleCancel,
2603
+ onDropItem: handleDropItem,
2604
+ onGrabItem: handleGrabItem,
2605
+ __temp_key__: key,
2606
+ children: layout.map((row, index22) => {
2607
+ return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: row.map(({ size, ...field }) => {
2608
+ const completeFieldName = `${nameWithIndex}.${field.name}`;
2609
+ return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
2610
+ }) }, index22);
2611
+ })
2612
+ }
2613
+ )
2614
+ },
2615
+ key
2616
+ );
2617
+ }),
2618
+ /* @__PURE__ */ jsxRuntime.jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Plus, {}), children: formatMessage({
2619
+ id: index.getTranslation("containers.EditView.add.new-entry"),
2620
+ defaultMessage: "Add an entry"
2621
+ }) })
2622
+ ]
2623
+ }
2624
+ )
2586
2625
  ] });
2587
2626
  };
2588
- const TextButtonCustom = styled__default.default(designSystem.TextButton)`
2589
- height: 100%;
2627
+ const AccordionRoot = styledComponents.styled(designSystem.Accordion.Root)`
2628
+ border: 1px solid
2629
+ ${({ theme, $error }) => $error ? theme.colors.danger600 : theme.colors.neutral200};
2630
+ `;
2631
+ const TextButtonCustom = styledComponents.styled(designSystem.TextButton)`
2590
2632
  width: 100%;
2591
- border-radius: 0 0 4px 4px;
2592
2633
  display: flex;
2593
2634
  justify-content: center;
2594
- span {
2595
- font-weight: 600;
2596
- font-size: 14px;
2597
- }
2598
- `;
2599
- const AccordionFooter = styled__default.default(designSystem.Box)`
2600
- overflow: hidden;
2601
- border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
2602
- border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
2603
- border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
2604
- border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
2605
- `;
2606
- const AccordionContent = styled__default.default(designSystem.Box)`
2607
- border-bottom: none;
2608
-
2609
- /* add the borders and make sure the top is transparent to avoid jumping with the hover effect */
2610
- & > div > div {
2611
- border: 1px solid ${({ theme }) => theme.colors.neutral200};
2612
- border-top-color: transparent;
2613
- }
2614
-
2615
- /* the top accordion _does_ need a border though */
2616
- & > div:first-child > div {
2617
- border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
2618
- }
2619
-
2620
- /* Reset all the border-radius' */
2621
- & > div > div,
2622
- & > div > div > div {
2623
- border-radius: unset;
2624
- }
2635
+ border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
2636
+ padding-inline: ${(props) => props.theme.spaces[6]};
2637
+ padding-block: ${(props) => props.theme.spaces[3]};
2625
2638
 
2626
- /* Give the border radius back to the first accordion */
2627
- & > div:first-child > div,
2628
- & > div:first-child > div > div {
2629
- border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
2630
- }
2631
-
2632
- & > div > div[data-strapi-expanded='true'] {
2633
- border: 1px solid ${({ theme }) => theme.colors.primary600};
2634
- }
2635
- `;
2636
- const AccordionGroup = ({ children, error }) => {
2637
- return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.KeyboardNavigable, { attributeName: "data-strapi-accordion-toggle", children: [
2638
- children,
2639
- error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "danger600", children: error }) })
2640
- ] });
2641
- };
2642
- const CustomIconButton$1 = styled__default.default(designSystem.IconButton)`
2643
- background-color: transparent;
2639
+ &:not([disabled]) {
2640
+ cursor: pointer;
2644
2641
 
2645
- svg {
2646
- path {
2647
- fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : theme.colors.neutral600};
2642
+ &:hover {
2643
+ background-color: ${(props) => props.theme.colors.primary100};
2648
2644
  }
2649
2645
  }
2650
2646
 
2651
- &:hover {
2652
- svg {
2653
- path {
2654
- fill: ${({ theme }) => theme.colors.primary600};
2655
- }
2656
- }
2647
+ span {
2648
+ font-weight: 600;
2649
+ font-size: 1.4rem;
2650
+ line-height: 2.4rem;
2657
2651
  }
2658
- `;
2659
- const ActionsFlex$1 = styled__default.default(designSystem.Flex)`
2660
- & .drag-handle {
2661
- background: unset;
2662
2652
 
2663
- svg {
2664
- path {
2665
- fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : void 0};
2666
- }
2667
- }
2668
-
2669
- &:hover {
2670
- svg {
2671
- path {
2672
- /* keeps the hover style of the accordion */
2673
- fill: ${({ theme }) => theme.colors.primary600};
2674
- }
2675
- }
2676
- }
2653
+ @media (prefers-reduced-motion: no-preference) {
2654
+ transition: background-color 120ms ${(props) => props.theme.easings.easeOutQuad};
2677
2655
  }
2678
2656
  `;
2679
2657
  const Component = ({
2680
2658
  disabled,
2681
2659
  index: index$1,
2682
- isOpen,
2683
2660
  name: name2,
2684
2661
  mainField = {
2685
2662
  name: "id",
2686
2663
  type: "integer"
2687
2664
  },
2688
2665
  children,
2689
- onClickToggle,
2690
2666
  onDeleteComponent,
2691
2667
  toggleCollapses,
2668
+ __temp_key__,
2692
2669
  ...dragProps
2693
2670
  }) => {
2694
2671
  const { formatMessage } = reactIntl.useIntl();
@@ -2713,50 +2690,44 @@ const Component = ({
2713
2690
  dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: false });
2714
2691
  }, [dragPreviewRef, index$1]);
2715
2692
  const composedAccordionRefs = designSystem.useComposedRefs(accordionRef, dragRef);
2716
- const composedBoxRefs = designSystem.useComposedRefs(boxRef, dropRef);
2717
- return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { ref: (ref) => composedBoxRefs(ref), children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview$1, {}) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion, { expanded: isOpen, onToggle: onClickToggle, id: name2, size: "S", children: [
2718
- /* @__PURE__ */ jsxRuntime.jsx(
2719
- designSystem.AccordionToggle,
2720
- {
2721
- action: disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(ActionsFlex$1, { gap: 0, expanded: isOpen, children: [
2722
- /* @__PURE__ */ jsxRuntime.jsx(
2723
- CustomIconButton$1,
2724
- {
2725
- expanded: isOpen,
2726
- borderWidth: 0,
2727
- onClick: onDeleteComponent,
2728
- label: formatMessage({
2729
- id: index.getTranslation("containers.Edit.delete"),
2730
- defaultMessage: "Delete"
2731
- }),
2732
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
2733
- }
2734
- ),
2735
- /* @__PURE__ */ jsxRuntime.jsx(
2736
- designSystem.IconButton,
2737
- {
2738
- className: "drag-handle",
2739
- ref: composedAccordionRefs,
2740
- forwardedAs: "div",
2741
- role: "button",
2742
- borderWidth: 0,
2743
- tabIndex: 0,
2744
- onClick: (e) => e.stopPropagation(),
2745
- "data-handler-id": handlerId,
2746
- label: formatMessage({
2747
- id: index.getTranslation("components.DragHandle-label"),
2748
- defaultMessage: "Drag"
2749
- }),
2750
- onKeyDown: handleKeyDown,
2751
- children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
2752
- }
2753
- )
2754
- ] }),
2755
- title: displayValue,
2756
- togglePosition: "left"
2757
- }
2758
- ),
2759
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
2693
+ const composedBoxRefs = designSystem.useComposedRefs(
2694
+ boxRef,
2695
+ dropRef
2696
+ );
2697
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview$1, {}) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { ref: composedBoxRefs, value: __temp_key__, children: [
2698
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Header, { children: [
2699
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: displayValue }),
2700
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Actions, { children: [
2701
+ /* @__PURE__ */ jsxRuntime.jsx(
2702
+ designSystem.IconButton,
2703
+ {
2704
+ borderWidth: 0,
2705
+ onClick: onDeleteComponent,
2706
+ label: formatMessage({
2707
+ id: index.getTranslation("containers.Edit.delete"),
2708
+ defaultMessage: "Delete"
2709
+ }),
2710
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
2711
+ }
2712
+ ),
2713
+ /* @__PURE__ */ jsxRuntime.jsx(
2714
+ designSystem.IconButton,
2715
+ {
2716
+ ref: composedAccordionRefs,
2717
+ borderWidth: 0,
2718
+ onClick: (e) => e.stopPropagation(),
2719
+ "data-handler-id": handlerId,
2720
+ label: formatMessage({
2721
+ id: index.getTranslation("components.DragHandle-label"),
2722
+ defaultMessage: "Drag"
2723
+ }),
2724
+ onKeyDown: handleKeyDown,
2725
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
2726
+ }
2727
+ )
2728
+ ] })
2729
+ ] }),
2730
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
2760
2731
  designSystem.Flex,
2761
2732
  {
2762
2733
  direction: "column",
@@ -2770,9 +2741,9 @@ const Component = ({
2770
2741
  ] }) });
2771
2742
  };
2772
2743
  const Preview$1 = () => {
2773
- return /* @__PURE__ */ jsxRuntime.jsx(StyledSpan, { as: "span", padding: 6, background: "primary100" });
2744
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
2774
2745
  };
2775
- const StyledSpan = styled__default.default(designSystem.Box)`
2746
+ const StyledSpan = styledComponents.styled(designSystem.Box)`
2776
2747
  display: block;
2777
2748
  outline: 1px dashed ${({ theme }) => theme.colors.primary500};
2778
2749
  outline-offset: -1px;
@@ -2796,29 +2767,15 @@ const ComponentInput = ({
2796
2767
  const data = transformDocument(schema, components)(form);
2797
2768
  field.onChange(name2, data);
2798
2769
  };
2799
- return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
2770
+ return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, required, children: [
2800
2771
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
2801
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { paddingBottom: 1, children: [
2802
- /* @__PURE__ */ jsxRuntime.jsxs(
2803
- designSystem.Typography,
2804
- {
2805
- textColor: "neutral800",
2806
- htmlFor: name2,
2807
- variant: "pi",
2808
- fontWeight: "bold",
2809
- as: "label",
2810
- children: [
2811
- label,
2812
- attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2813
- " (",
2814
- Array.isArray(field.value) ? field.value.length : 0,
2815
- ")"
2816
- ] }),
2817
- required && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", children: "*" })
2818
- ]
2819
- }
2820
- ),
2821
- labelAction && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 1, children: labelAction })
2772
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Label, { action: labelAction, children: [
2773
+ label,
2774
+ attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2775
+ " (",
2776
+ Array.isArray(field.value) ? field.value.length : 0,
2777
+ ")"
2778
+ ] })
2822
2779
  ] }),
2823
2780
  showResetComponent && /* @__PURE__ */ jsxRuntime.jsx(
2824
2781
  designSystem.IconButton,
@@ -2827,21 +2784,21 @@ const ComponentInput = ({
2827
2784
  id: index.getTranslation("components.reset-entry"),
2828
2785
  defaultMessage: "Reset Entry"
2829
2786
  }),
2830
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {}),
2831
2787
  borderWidth: 0,
2832
2788
  onClick: () => {
2833
2789
  field.onChange(name2, null);
2834
- }
2790
+ },
2791
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
2835
2792
  }
2836
2793
  )
2837
2794
  ] }),
2838
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
2839
- !attribute.repeatable && !field.value && /* @__PURE__ */ jsxRuntime.jsx(Initializer, { disabled, name: name2, onClick: handleInitialisationClick }),
2840
- !attribute.repeatable && field.value ? /* @__PURE__ */ jsxRuntime.jsx(NonRepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }) : null,
2841
- attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsx(RepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children })
2842
- ] })
2795
+ !attribute.repeatable && !field.value && /* @__PURE__ */ jsxRuntime.jsx(Initializer, { disabled, name: name2, onClick: handleInitialisationClick }),
2796
+ !attribute.repeatable && field.value ? /* @__PURE__ */ jsxRuntime.jsx(NonRepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }) : null,
2797
+ attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsx(RepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }),
2798
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
2843
2799
  ] });
2844
2800
  };
2801
+ const MemoizedComponentInput = React__namespace.memo(ComponentInput);
2845
2802
  const AddComponentButton = ({
2846
2803
  hasError,
2847
2804
  isDisabled,
@@ -2861,10 +2818,10 @@ const AddComponentButton = ({
2861
2818
  paddingLeft: 4,
2862
2819
  paddingRight: 4,
2863
2820
  style: { cursor: isDisabled ? "not-allowed" : "pointer" },
2864
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { as: "span", gap: 2, children: [
2821
+ children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "span", gap: 2, children: [
2865
2822
  /* @__PURE__ */ jsxRuntime.jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
2866
2823
  /* @__PURE__ */ jsxRuntime.jsx(
2867
- designSystem.Typography,
2824
+ AddComponentTitle,
2868
2825
  {
2869
2826
  variant: "pi",
2870
2827
  fontWeight: "bold",
@@ -2876,7 +2833,7 @@ const AddComponentButton = ({
2876
2833
  }
2877
2834
  );
2878
2835
  };
2879
- const StyledAddIcon = styled__default.default(Icons.PlusCircle)`
2836
+ const StyledAddIcon = styledComponents.styled(Icons.PlusCircle)`
2880
2837
  height: ${({ theme }) => theme.spaces[6]};
2881
2838
  width: ${({ theme }) => theme.spaces[6]};
2882
2839
  transform: ${({ $isOpen }) => $isOpen ? "rotate(45deg)" : "rotate(0deg)"};
@@ -2888,13 +2845,14 @@ const StyledAddIcon = styled__default.default(Icons.PlusCircle)`
2888
2845
  fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral600};
2889
2846
  }
2890
2847
  `;
2891
- const StyledButton = styled__default.default(designSystem.BaseButton)`
2848
+ const AddComponentTitle = styledComponents.styled(designSystem.Typography)``;
2849
+ const StyledButton = styledComponents.styled(designSystem.BaseButton)`
2892
2850
  border-radius: 26px;
2893
2851
  border-color: ${({ theme }) => theme.colors.neutral150};
2894
2852
  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
2895
2853
 
2896
2854
  &:hover {
2897
- ${designSystem.Typography} {
2855
+ ${AddComponentTitle} {
2898
2856
  color: ${({ theme }) => theme.colors.primary600};
2899
2857
  }
2900
2858
 
@@ -2908,7 +2866,7 @@ const StyledButton = styled__default.default(designSystem.BaseButton)`
2908
2866
  }
2909
2867
  }
2910
2868
  &:active {
2911
- ${designSystem.Typography} {
2869
+ ${AddComponentTitle} {
2912
2870
  color: ${({ theme }) => theme.colors.primary600};
2913
2871
  }
2914
2872
  ${StyledAddIcon} {
@@ -2925,27 +2883,15 @@ const ComponentCategory = ({
2925
2883
  category,
2926
2884
  components = [],
2927
2885
  variant = "primary",
2928
- isOpen,
2929
- onAddComponent,
2930
- onToggle
2886
+ onAddComponent
2931
2887
  }) => {
2932
2888
  const { formatMessage } = reactIntl.useIntl();
2933
- const handleToggle = () => {
2934
- onToggle(category);
2935
- };
2936
- return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion, { expanded: isOpen, onToggle: handleToggle, size: "S", children: [
2937
- /* @__PURE__ */ jsxRuntime.jsx(
2938
- designSystem.AccordionToggle,
2939
- {
2940
- variant,
2941
- title: formatMessage({ id: category, defaultMessage: category }),
2942
- togglePosition: "left"
2943
- }
2944
- ),
2945
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsxRuntime.jsx(
2889
+ return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: category, children: [
2890
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { variant, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: formatMessage({ id: category, defaultMessage: category }) }) }),
2891
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsxRuntime.jsx(
2946
2892
  ComponentBox,
2947
2893
  {
2948
- as: "button",
2894
+ tag: "button",
2949
2895
  type: "button",
2950
2896
  background: "neutral100",
2951
2897
  justifyContent: "center",
@@ -2955,34 +2901,32 @@ const ComponentCategory = ({
2955
2901
  shrink: 0,
2956
2902
  borderColor: "neutral200",
2957
2903
  children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
2958
- /* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { icon }),
2959
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral600", children: displayName })
2904
+ /* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { color: "currentColor", background: "primary200", icon }),
2905
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: displayName })
2960
2906
  ] })
2961
2907
  },
2962
2908
  uid
2963
- )) }) }) })
2909
+ )) }) })
2964
2910
  ] });
2965
2911
  };
2966
- const Grid = styled__default.default.div`
2912
+ const Grid = styledComponents.styled(designSystem.Box)`
2967
2913
  display: grid;
2968
2914
  grid-template-columns: repeat(auto-fit, 14rem);
2969
2915
  grid-gap: ${({ theme }) => theme.spaces[1]};
2970
2916
  `;
2971
- const ComponentBox = styled__default.default(designSystem.Flex)`
2917
+ const ComponentBox = styledComponents.styled(designSystem.Flex)`
2918
+ color: ${({ theme }) => theme.colors.neutral600};
2919
+ cursor: pointer;
2920
+
2921
+ @media (prefers-reduced-motion: no-preference) {
2922
+ transition: color 120ms ${(props) => props.theme.easings.easeOutQuad};
2923
+ }
2924
+
2972
2925
  &:focus,
2973
2926
  &:hover {
2974
2927
  border: 1px solid ${({ theme }) => theme.colors.primary200};
2975
2928
  background: ${({ theme }) => theme.colors.primary100};
2976
-
2977
- ${designSystem.Typography} {
2978
- color: ${({ theme }) => theme.colors.primary600};
2979
- }
2980
-
2981
- /* > Flex > ComponentIcon */
2982
- > div > div:first-child {
2983
- background: ${({ theme }) => theme.colors.primary200};
2984
- color: ${({ theme }) => theme.colors.primary600};
2985
- }
2929
+ color: ${({ theme }) => theme.colors.primary600};
2986
2930
  }
2987
2931
  `;
2988
2932
  const ComponentPicker = ({
@@ -2991,19 +2935,8 @@ const ComponentPicker = ({
2991
2935
  onClickAddComponent
2992
2936
  }) => {
2993
2937
  const { formatMessage } = reactIntl.useIntl();
2994
- const [categoryToOpen, setCategoryToOpen] = React__namespace.useState("");
2995
- React__namespace.useEffect(() => {
2996
- const categoryKeys = Object.keys(dynamicComponentsByCategory);
2997
- if (isOpen && categoryKeys.length > 0) {
2998
- setCategoryToOpen(categoryKeys[0]);
2999
- }
3000
- }, [isOpen, dynamicComponentsByCategory]);
3001
2938
  const handleAddComponentToDz = (componentUid) => () => {
3002
2939
  onClickAddComponent(componentUid);
3003
- setCategoryToOpen("");
3004
- };
3005
- const handleClickToggle = (categoryName) => {
3006
- setCategoryToOpen((currentCat) => currentCat === categoryName ? "" : categoryName);
3007
2940
  };
3008
2941
  if (!isOpen) {
3009
2942
  return null;
@@ -3024,14 +2957,12 @@ const ComponentPicker = ({
3024
2957
  id: index.getTranslation("components.DynamicZone.ComponentPicker-label"),
3025
2958
  defaultMessage: "Pick one component"
3026
2959
  }) }) }),
3027
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.KeyboardNavigable, { attributeName: "data-strapi-accordion-toggle", children: Object.entries(dynamicComponentsByCategory).map(([category, components], index2) => /* @__PURE__ */ jsxRuntime.jsx(
2960
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { defaultValue: Object.keys(dynamicComponentsByCategory)[0], children: Object.entries(dynamicComponentsByCategory).map(([category, components], index2) => /* @__PURE__ */ jsxRuntime.jsx(
3028
2961
  ComponentCategory,
3029
2962
  {
3030
2963
  category,
3031
2964
  components,
3032
2965
  onAddComponent: handleAddComponentToDz,
3033
- isOpen: category === categoryToOpen,
3034
- onToggle: handleClickToggle,
3035
2966
  variant: index2 % 2 === 1 ? "primary" : "secondary"
3036
2967
  },
3037
2968
  category
@@ -3046,27 +2977,21 @@ const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
3046
2977
  id: "components.NotAllowedInput.text",
3047
2978
  defaultMessage: "No permissions to see this field"
3048
2979
  });
3049
- return /* @__PURE__ */ jsxRuntime.jsx(
3050
- designSystem.TextInput,
3051
- {
3052
- disabled: true,
3053
- label,
3054
- id: name2,
3055
- hint,
3056
- name: name2,
3057
- placeholder,
3058
- required,
3059
- startAction: /* @__PURE__ */ jsxRuntime.jsx(StyledIcon, {}),
3060
- type: "text",
3061
- value: ""
3062
- }
3063
- );
2980
+ return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { id: name2, hint, name: name2, required, children: [
2981
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: label }),
2982
+ /* @__PURE__ */ jsxRuntime.jsx(
2983
+ designSystem.TextInput,
2984
+ {
2985
+ disabled: true,
2986
+ placeholder,
2987
+ startAction: /* @__PURE__ */ jsxRuntime.jsx(Icons.EyeStriked, { fill: "neutral600" }),
2988
+ type: "text",
2989
+ value: ""
2990
+ }
2991
+ ),
2992
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
2993
+ ] });
3064
2994
  };
3065
- const StyledIcon = styled__default.default(Icons.EyeStriked)`
3066
- & > path {
3067
- fill: ${({ theme }) => theme.colors.neutral600};
3068
- }
3069
- `;
3070
2995
  function useDebounce(value, delay) {
3071
2996
  const [debouncedValue, setDebouncedValue] = React.useState(value);
3072
2997
  React.useEffect(() => {
@@ -3119,188 +3044,193 @@ const uidApi = index.contentManagerApi.injectEndpoints({
3119
3044
  });
3120
3045
  const { useGenerateUIDMutation, useGetDefaultUIDQuery, useGetAvailabilityQuery } = uidApi;
3121
3046
  const UID_REGEX = /^[A-Za-z0-9-_.~]*$/;
3122
- const UIDInput = React__namespace.forwardRef((props, ref) => {
3123
- const { model, id } = index.useDoc();
3124
- const allFormValues = strapiAdmin.useForm("InputUID", (form) => form.values);
3125
- const [availability, setAvailability] = React__namespace.useState();
3126
- const [showRegenerate, setShowRegenerate] = React__namespace.useState(false);
3127
- const field = strapiAdmin.useField(props.name);
3128
- const debouncedValue = useDebounce(field.value, 300);
3129
- const { toggleNotification } = strapiAdmin.useNotification();
3130
- const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
3131
- const { formatMessage } = reactIntl.useIntl();
3132
- const [{ query }] = strapiAdmin.useQueryParams();
3133
- const params = React__namespace.useMemo(() => index.buildValidParams(query), [query]);
3134
- const {
3135
- data: defaultGeneratedUID,
3136
- isLoading: isGeneratingDefaultUID,
3137
- error: apiError
3138
- } = useGetDefaultUIDQuery(
3139
- {
3140
- contentTypeUID: model,
3141
- field: props.name,
3142
- data: {
3143
- id: id ?? "",
3144
- ...allFormValues
3145
- },
3146
- params
3147
- },
3148
- {
3149
- skip: field.value || !props.required
3150
- }
3151
- );
3152
- React__namespace.useEffect(() => {
3153
- if (apiError) {
3154
- toggleNotification({
3155
- type: "warning",
3156
- message: formatAPIError(apiError)
3157
- });
3158
- }
3159
- }, [apiError, formatAPIError, toggleNotification]);
3160
- React__namespace.useEffect(() => {
3161
- if (defaultGeneratedUID && field.value === void 0) {
3162
- field.onChange(props.name, defaultGeneratedUID);
3163
- }
3164
- }, [defaultGeneratedUID, field, props.name]);
3165
- const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
3166
- const handleRegenerateClick = async () => {
3167
- try {
3168
- const res = await generateUID({
3047
+ const UIDInput = React__namespace.forwardRef(
3048
+ ({ hint, label, labelAction, name: name2, required, ...props }, ref) => {
3049
+ const { model, id } = index.useDoc();
3050
+ const allFormValues = strapiAdmin.useForm("InputUID", (form) => form.values);
3051
+ const [availability, setAvailability] = React__namespace.useState();
3052
+ const [showRegenerate, setShowRegenerate] = React__namespace.useState(false);
3053
+ const field = strapiAdmin.useField(name2);
3054
+ const debouncedValue = useDebounce(field.value, 300);
3055
+ const { toggleNotification } = strapiAdmin.useNotification();
3056
+ const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
3057
+ const { formatMessage } = reactIntl.useIntl();
3058
+ const [{ query }] = strapiAdmin.useQueryParams();
3059
+ const params = React__namespace.useMemo(() => index.buildValidParams(query), [query]);
3060
+ const {
3061
+ data: defaultGeneratedUID,
3062
+ isLoading: isGeneratingDefaultUID,
3063
+ error: apiError
3064
+ } = useGetDefaultUIDQuery(
3065
+ {
3169
3066
  contentTypeUID: model,
3170
- field: props.name,
3171
- data: { id: id ?? "", ...allFormValues },
3067
+ field: name2,
3068
+ data: {
3069
+ id: id ?? "",
3070
+ ...allFormValues
3071
+ },
3172
3072
  params
3173
- });
3174
- if ("data" in res) {
3175
- field.onChange(props.name, res.data);
3176
- } else {
3073
+ },
3074
+ {
3075
+ skip: field.value || !required
3076
+ }
3077
+ );
3078
+ React__namespace.useEffect(() => {
3079
+ if (apiError) {
3177
3080
  toggleNotification({
3178
- type: "danger",
3179
- message: formatAPIError(res.error)
3081
+ type: "warning",
3082
+ message: formatAPIError(apiError)
3180
3083
  });
3181
3084
  }
3182
- } catch (err) {
3183
- toggleNotification({
3184
- type: "danger",
3185
- message: formatMessage({
3186
- id: "notification.error",
3187
- defaultMessage: "An error occurred."
3188
- })
3189
- });
3190
- }
3191
- };
3192
- const {
3193
- data: availabilityData,
3194
- isLoading: isCheckingAvailability,
3195
- error: availabilityError
3196
- } = useGetAvailabilityQuery(
3197
- {
3198
- contentTypeUID: model,
3199
- field: props.name,
3200
- value: debouncedValue ? debouncedValue.trim() : "",
3201
- params
3202
- },
3203
- {
3204
- skip: !Boolean(
3205
- debouncedValue !== field.initialValue && debouncedValue && UID_REGEX.test(debouncedValue.trim())
3206
- )
3207
- }
3208
- );
3209
- React__namespace.useEffect(() => {
3210
- if (availabilityError) {
3211
- toggleNotification({
3212
- type: "warning",
3213
- message: formatAPIError(availabilityError)
3214
- });
3215
- }
3216
- }, [availabilityError, formatAPIError, toggleNotification]);
3217
- React__namespace.useEffect(() => {
3218
- setAvailability(availabilityData);
3219
- let timer;
3220
- if (availabilityData?.isAvailable) {
3221
- timer = window.setTimeout(() => {
3222
- setAvailability(void 0);
3223
- }, 4e3);
3224
- }
3225
- return () => {
3226
- if (timer) {
3227
- clearTimeout(timer);
3085
+ }, [apiError, formatAPIError, toggleNotification]);
3086
+ React__namespace.useEffect(() => {
3087
+ if (defaultGeneratedUID && field.value === void 0) {
3088
+ field.onChange(name2, defaultGeneratedUID);
3089
+ }
3090
+ }, [defaultGeneratedUID, field, name2]);
3091
+ const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
3092
+ const handleRegenerateClick = async () => {
3093
+ try {
3094
+ const res = await generateUID({
3095
+ contentTypeUID: model,
3096
+ field: name2,
3097
+ data: { id: id ?? "", ...allFormValues },
3098
+ params
3099
+ });
3100
+ if ("data" in res) {
3101
+ field.onChange(name2, res.data);
3102
+ } else {
3103
+ toggleNotification({
3104
+ type: "danger",
3105
+ message: formatAPIError(res.error)
3106
+ });
3107
+ }
3108
+ } catch (err) {
3109
+ toggleNotification({
3110
+ type: "danger",
3111
+ message: formatMessage({
3112
+ id: "notification.error",
3113
+ defaultMessage: "An error occurred."
3114
+ })
3115
+ });
3228
3116
  }
3229
3117
  };
3230
- }, [availabilityData]);
3231
- const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;
3232
- const fieldRef = strapiAdmin.useFocusInputField(props.name);
3233
- const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
3234
- return (
3235
- // @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
3236
- /* @__PURE__ */ jsxRuntime.jsx(
3237
- designSystem.TextInput,
3118
+ const {
3119
+ data: availabilityData,
3120
+ isLoading: isCheckingAvailability,
3121
+ error: availabilityError
3122
+ } = useGetAvailabilityQuery(
3238
3123
  {
3239
- ref: composedRefs,
3240
- disabled: props.disabled,
3241
- error: field.error,
3242
- endAction: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { position: "relative", gap: 1, children: [
3243
- availability && !showRegenerate && /* @__PURE__ */ jsxRuntime.jsxs(
3244
- TextValidation,
3245
- {
3246
- alignItems: "center",
3247
- gap: 1,
3248
- justifyContent: "flex-end",
3249
- available: !!availability?.isAvailable,
3250
- "data-not-here-outer": true,
3251
- position: "absolute",
3252
- pointerEvents: "none",
3253
- right: 6,
3254
- width: "100px",
3255
- children: [
3256
- availability?.isAvailable ? /* @__PURE__ */ jsxRuntime.jsx(Icons.CheckCircle, {}) : /* @__PURE__ */ jsxRuntime.jsx(Icons.WarningCircle, {}),
3257
- /* @__PURE__ */ jsxRuntime.jsx(
3258
- designSystem.Typography,
3259
- {
3260
- textColor: availability.isAvailable ? "success600" : "danger600",
3261
- variant: "pi",
3262
- children: formatMessage(
3263
- availability.isAvailable ? {
3264
- id: "content-manager.components.uid.available",
3265
- defaultMessage: "Available"
3266
- } : {
3267
- id: "content-manager.components.uid.unavailable",
3268
- defaultMessage: "Unavailable"
3269
- }
3270
- )
3271
- }
3272
- )
3273
- ]
3274
- }
3275
- ),
3276
- !props.disabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3277
- showRegenerate && /* @__PURE__ */ jsxRuntime.jsx(TextValidation, { alignItems: "center", justifyContent: "flex-end", gap: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "primary600", variant: "pi", children: formatMessage({
3278
- id: "content-manager.components.uid.regenerate",
3279
- defaultMessage: "Regenerate"
3280
- }) }) }),
3281
- /* @__PURE__ */ jsxRuntime.jsx(
3282
- FieldActionWrapper,
3124
+ contentTypeUID: model,
3125
+ field: name2,
3126
+ value: debouncedValue ? debouncedValue.trim() : "",
3127
+ params
3128
+ },
3129
+ {
3130
+ skip: !Boolean(
3131
+ debouncedValue !== field.initialValue && debouncedValue && UID_REGEX.test(debouncedValue.trim())
3132
+ )
3133
+ }
3134
+ );
3135
+ React__namespace.useEffect(() => {
3136
+ if (availabilityError) {
3137
+ toggleNotification({
3138
+ type: "warning",
3139
+ message: formatAPIError(availabilityError)
3140
+ });
3141
+ }
3142
+ }, [availabilityError, formatAPIError, toggleNotification]);
3143
+ React__namespace.useEffect(() => {
3144
+ setAvailability(availabilityData);
3145
+ let timer;
3146
+ if (availabilityData?.isAvailable) {
3147
+ timer = window.setTimeout(() => {
3148
+ setAvailability(void 0);
3149
+ }, 4e3);
3150
+ }
3151
+ return () => {
3152
+ if (timer) {
3153
+ clearTimeout(timer);
3154
+ }
3155
+ };
3156
+ }, [availabilityData]);
3157
+ const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;
3158
+ const fieldRef = strapiAdmin.useFocusInputField(name2);
3159
+ const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
3160
+ return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { hint, name: name2, error: field.error, required, children: [
3161
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
3162
+ /* @__PURE__ */ jsxRuntime.jsx(
3163
+ designSystem.TextInput,
3164
+ {
3165
+ ref: composedRefs,
3166
+ disabled: props.disabled,
3167
+ endAction: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { position: "relative", gap: 1, children: [
3168
+ availability && !showRegenerate && /* @__PURE__ */ jsxRuntime.jsxs(
3169
+ TextValidation,
3283
3170
  {
3284
- onClick: handleRegenerateClick,
3285
- label: formatMessage({
3286
- id: "content-manager.components.uid.regenerate",
3287
- defaultMessage: "Regenerate"
3288
- }),
3289
- onMouseEnter: () => setShowRegenerate(true),
3290
- onMouseLeave: () => setShowRegenerate(false),
3291
- children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingWrapper, { "data-testid": "loading-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Loader, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.ArrowClockwise, {})
3171
+ alignItems: "center",
3172
+ gap: 1,
3173
+ justifyContent: "flex-end",
3174
+ $available: !!availability?.isAvailable,
3175
+ "data-not-here-outer": true,
3176
+ position: "absolute",
3177
+ pointerEvents: "none",
3178
+ right: 6,
3179
+ width: "100px",
3180
+ children: [
3181
+ availability?.isAvailable ? /* @__PURE__ */ jsxRuntime.jsx(Icons.CheckCircle, {}) : /* @__PURE__ */ jsxRuntime.jsx(Icons.WarningCircle, {}),
3182
+ /* @__PURE__ */ jsxRuntime.jsx(
3183
+ designSystem.Typography,
3184
+ {
3185
+ textColor: availability.isAvailable ? "success600" : "danger600",
3186
+ variant: "pi",
3187
+ children: formatMessage(
3188
+ availability.isAvailable ? {
3189
+ id: "content-manager.components.uid.available",
3190
+ defaultMessage: "Available"
3191
+ } : {
3192
+ id: "content-manager.components.uid.unavailable",
3193
+ defaultMessage: "Unavailable"
3194
+ }
3195
+ )
3196
+ }
3197
+ )
3198
+ ]
3292
3199
  }
3293
- )
3294
- ] })
3295
- ] }),
3296
- onChange: field.onChange,
3297
- value: field.value ?? "",
3298
- ...props
3299
- }
3300
- )
3301
- );
3302
- });
3303
- const FieldActionWrapper = styled__default.default(designSystem.FieldAction)`
3200
+ ),
3201
+ !props.disabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3202
+ showRegenerate && /* @__PURE__ */ jsxRuntime.jsx(TextValidation, { alignItems: "center", justifyContent: "flex-end", gap: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "primary600", variant: "pi", children: formatMessage({
3203
+ id: "content-manager.components.uid.regenerate",
3204
+ defaultMessage: "Regenerate"
3205
+ }) }) }),
3206
+ /* @__PURE__ */ jsxRuntime.jsx(
3207
+ FieldActionWrapper,
3208
+ {
3209
+ onClick: handleRegenerateClick,
3210
+ label: formatMessage({
3211
+ id: "content-manager.components.uid.regenerate",
3212
+ defaultMessage: "Regenerate"
3213
+ }),
3214
+ onMouseEnter: () => setShowRegenerate(true),
3215
+ onMouseLeave: () => setShowRegenerate(false),
3216
+ children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingWrapper, { "data-testid": "loading-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Loader, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.ArrowClockwise, {})
3217
+ }
3218
+ )
3219
+ ] })
3220
+ ] }),
3221
+ onChange: field.onChange,
3222
+ value: field.value ?? "",
3223
+ ...props
3224
+ }
3225
+ ),
3226
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {}),
3227
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
3228
+ ] });
3229
+ }
3230
+ );
3231
+ const FieldActionWrapper = styledComponents.styled(designSystem.Field.Action)`
3232
+ width: 1.6rem;
3233
+
3304
3234
  svg {
3305
3235
  height: 1.6rem;
3306
3236
  width: 1.6rem;
@@ -3315,17 +3245,17 @@ const FieldActionWrapper = styled__default.default(designSystem.FieldAction)`
3315
3245
  }
3316
3246
  }
3317
3247
  `;
3318
- const TextValidation = styled__default.default(designSystem.Flex)`
3248
+ const TextValidation = styledComponents.styled(designSystem.Flex)`
3319
3249
  svg {
3320
3250
  height: 1.2rem;
3321
3251
  width: 1.2rem;
3322
3252
 
3323
3253
  path {
3324
- fill: ${({ theme, available }) => available ? theme.colors.success600 : theme.colors.danger600};
3254
+ fill: ${({ theme, $available }) => $available ? theme.colors.success600 : theme.colors.danger600};
3325
3255
  }
3326
3256
  }
3327
3257
  `;
3328
- const rotation = styled.keyframes`
3258
+ const rotation = styledComponents.keyframes`
3329
3259
  from {
3330
3260
  transform: rotate(0deg);
3331
3261
  }
@@ -3333,9 +3263,10 @@ const rotation = styled.keyframes`
3333
3263
  transform: rotate(359deg);
3334
3264
  }
3335
3265
  `;
3336
- const LoadingWrapper = styled__default.default(designSystem.Flex)`
3266
+ const LoadingWrapper = styledComponents.styled(designSystem.Flex)`
3337
3267
  animation: ${rotation} 2s infinite linear;
3338
3268
  `;
3269
+ const MemoizedUIDInput = React__namespace.memo(UIDInput);
3339
3270
  const md = new Markdown__default.default({
3340
3271
  html: true,
3341
3272
  // Enable HTML tags in source
@@ -3378,7 +3309,7 @@ const PreviewWysiwyg = ({ data = "" }) => {
3378
3309
  );
3379
3310
  return /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: html } }) });
3380
3311
  };
3381
- const Wrapper = styled__default.default.div`
3312
+ const Wrapper = styledComponents.styled.div`
3382
3313
  position: absolute;
3383
3314
  top: 0;
3384
3315
  width: 100%;
@@ -3670,17 +3601,17 @@ const Editor = React__namespace.forwardRef(
3670
3601
  [editorRef]
3671
3602
  );
3672
3603
  return /* @__PURE__ */ jsxRuntime.jsxs(EditorAndPreviewWrapper, { children: [
3673
- /* @__PURE__ */ jsxRuntime.jsx(EditorStylesContainer, { isExpandMode, disabled: disabled || isPreviewMode, children: /* @__PURE__ */ jsxRuntime.jsx("textarea", { ref: textareaRef }) }),
3604
+ /* @__PURE__ */ jsxRuntime.jsx(EditorStylesContainer, { $isExpandMode: isExpandMode, $disabled: disabled || isPreviewMode, children: /* @__PURE__ */ jsxRuntime.jsx("textarea", { ref: textareaRef }) }),
3674
3605
  isPreviewMode && /* @__PURE__ */ jsxRuntime.jsx(PreviewWysiwyg, { data: value })
3675
3606
  ] });
3676
3607
  }
3677
3608
  );
3678
- const EditorAndPreviewWrapper = styled__default.default.div`
3609
+ const EditorAndPreviewWrapper = styledComponents.styled.div`
3679
3610
  position: relative;
3680
3611
  height: calc(100% - 48px);
3681
3612
  `;
3682
- const EditorStylesContainer = styled__default.default.div`
3683
- cursor: ${({ disabled }) => disabled ? "not-allowed !important" : "auto"};
3613
+ const EditorStylesContainer = styledComponents.styled.div`
3614
+ cursor: ${({ $disabled }) => $disabled ? "not-allowed !important" : "auto"};
3684
3615
  height: 100%;
3685
3616
  /* BASICS */
3686
3617
  .CodeMirror-placeholder {
@@ -3690,7 +3621,7 @@ const EditorStylesContainer = styled__default.default.div`
3690
3621
  .CodeMirror {
3691
3622
  /* Set height, width, borders, and global font properties here */
3692
3623
  font-size: 1.4rem;
3693
- height: ${({ isExpandMode }) => isExpandMode ? "100%" : "410px"}; // 512px(total height) - 48px (header) - 52px(footer) - 2px border
3624
+ height: ${({ $isExpandMode }) => $isExpandMode ? "100%" : "410px"}; // 512px(total height) - 48px (header) - 52px(footer) - 2px border
3694
3625
  color: ${({ theme }) => theme.colors.neutral800};
3695
3626
  direction: ltr;
3696
3627
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
@@ -4096,13 +4027,13 @@ const EditorLayout = ({
4096
4027
  }
4097
4028
  );
4098
4029
  };
4099
- const ExpandWrapper = styled__default.default(designSystem.Flex)`
4030
+ const ExpandWrapper = styledComponents.styled(designSystem.Flex)`
4100
4031
  background: ${({ theme }) => `${theme.colors.neutral800}${Math.floor(0.2 * 255).toString(16).padStart(2, "0")}`};
4101
4032
  `;
4102
- const BoxWithBorder = styled__default.default(designSystem.Box)`
4033
+ const BoxWithBorder = styledComponents.styled(designSystem.Box)`
4103
4034
  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
4104
4035
  `;
4105
- const ExpandButton$1 = styled__default.default(designSystem.BaseButton)`
4036
+ const ExpandButton$1 = styledComponents.styled(designSystem.BaseButton)`
4106
4037
  background-color: transparent;
4107
4038
  border: none;
4108
4039
  align-items: center;
@@ -4373,7 +4304,7 @@ const quoteAndCodeHandler = (editor, markdownType) => {
4373
4304
  insertWithoutTextToEdit(editor, markdownType, line, contentLength);
4374
4305
  }
4375
4306
  };
4376
- const CustomIconButton = styled__default.default(designSystem.IconButton)`
4307
+ const CustomIconButton = styledComponents.styled(designSystem.IconButton)`
4377
4308
  padding: ${({ theme }) => theme.spaces[2]};
4378
4309
  /* Trick to prevent the outline from overflowing because of the general outline-offset */
4379
4310
  outline-offset: -2px !important;
@@ -4383,16 +4314,16 @@ const CustomIconButton = styled__default.default(designSystem.IconButton)`
4383
4314
  height: 1.8rem;
4384
4315
  }
4385
4316
  `;
4386
- const CustomLinkIconButton = styled__default.default(CustomIconButton)`
4317
+ const CustomLinkIconButton = styledComponents.styled(CustomIconButton)`
4387
4318
  svg {
4388
4319
  width: 0.8rem;
4389
4320
  height: 0.8rem;
4390
4321
  }
4391
4322
  `;
4392
- const MainButtons = styled__default.default(designSystem.IconButtonGroup)`
4323
+ const MainButtons = styledComponents.styled(designSystem.IconButtonGroup)`
4393
4324
  margin-left: ${({ theme }) => theme.spaces[4]};
4394
4325
  `;
4395
- const MoreButton = styled__default.default(designSystem.IconButton)`
4326
+ const MoreButton = styledComponents.styled(designSystem.IconButton)`
4396
4327
  margin: ${({ theme }) => `0 ${theme.spaces[2]}`};
4397
4328
  padding: ${({ theme }) => theme.spaces[2]};
4398
4329
 
@@ -4401,10 +4332,10 @@ const MoreButton = styled__default.default(designSystem.IconButton)`
4401
4332
  height: 1.8rem;
4402
4333
  }
4403
4334
  `;
4404
- const IconButtonGroupMargin = styled__default.default(designSystem.IconButtonGroup)`
4335
+ const IconButtonGroupMargin = styledComponents.styled(designSystem.IconButtonGroup)`
4405
4336
  margin-right: ${({ theme }) => `${theme.spaces[2]}`};
4406
4337
  `;
4407
- const ExpandButton = styled__default.default(designSystem.BaseButton)`
4338
+ const ExpandButton = styledComponents.styled(designSystem.BaseButton)`
4408
4339
  background-color: transparent;
4409
4340
  border: none;
4410
4341
  align-items: center;
@@ -4456,21 +4387,21 @@ const WysiwygNav = ({
4456
4387
  justifyContent: "space-between",
4457
4388
  borderRadius: `0.4rem 0.4rem 0 0`,
4458
4389
  children: [
4459
- /* @__PURE__ */ jsxRuntime.jsxs(StyledFlex, { children: [
4460
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.SingleSelect, { disabled: true, placeholder: selectPlaceholder, size: "S", label: selectPlaceholder, children: [
4390
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
4391
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.SingleSelect, { disabled: true, placeholder: selectPlaceholder, "aria-label": selectPlaceholder, children: [
4461
4392
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h1", children: "h1" }),
4462
4393
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h2", children: "h2" }),
4463
4394
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h3", children: "h3" }),
4464
4395
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h4", children: "h4" }),
4465
4396
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h5", children: "h5" }),
4466
4397
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h6", children: "h6" })
4467
- ] }),
4398
+ ] }) }),
4468
4399
  /* @__PURE__ */ jsxRuntime.jsxs(MainButtons, { children: [
4469
- /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Bold", name: "Bold", icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {}) }),
4470
- /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic", icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Italic, {}) }),
4471
- /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Underline", name: "Underline", icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Underline, {}) })
4400
+ /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Bold", name: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {}) }),
4401
+ /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Italic, {}) }),
4402
+ /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Underline", name: "Underline", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Underline, {}) })
4472
4403
  ] }),
4473
- /* @__PURE__ */ jsxRuntime.jsx(MoreButton, { disabled: true, label: "More", icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, {}) })
4404
+ /* @__PURE__ */ jsxRuntime.jsx(MoreButton, { disabled: true, label: "More", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, {}) })
4474
4405
  ] }),
4475
4406
  !isExpandMode && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onTogglePreviewMode, variant: "tertiary", children: formatMessage({
4476
4407
  id: "components.Wysiwyg.ToggleMode.markdown-mode",
@@ -4488,13 +4419,12 @@ const WysiwygNav = ({
4488
4419
  justifyContent: "space-between",
4489
4420
  borderRadius: `0.4rem 0.4rem 0 0`,
4490
4421
  children: [
4491
- /* @__PURE__ */ jsxRuntime.jsxs(StyledFlex, { children: [
4492
- /* @__PURE__ */ jsxRuntime.jsxs(
4422
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
4423
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(
4493
4424
  designSystem.SingleSelect,
4494
4425
  {
4495
4426
  placeholder: selectPlaceholder,
4496
- label: selectPlaceholder,
4497
- size: "S",
4427
+ "aria-label": selectPlaceholder,
4498
4428
  onChange: (value) => onActionClick(value, editorRef),
4499
4429
  children: [
4500
4430
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h1", children: "h1" }),
@@ -4505,7 +4435,7 @@ const WysiwygNav = ({
4505
4435
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h6", children: "h6" })
4506
4436
  ]
4507
4437
  }
4508
- ),
4438
+ ) }),
4509
4439
  /* @__PURE__ */ jsxRuntime.jsxs(MainButtons, { children: [
4510
4440
  /* @__PURE__ */ jsxRuntime.jsx(
4511
4441
  CustomIconButton,
@@ -4513,7 +4443,7 @@ const WysiwygNav = ({
4513
4443
  onClick: () => onActionClick("Bold", editorRef),
4514
4444
  label: "Bold",
4515
4445
  name: "Bold",
4516
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {})
4446
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {})
4517
4447
  }
4518
4448
  ),
4519
4449
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4522,7 +4452,7 @@ const WysiwygNav = ({
4522
4452
  onClick: () => onActionClick("Italic", editorRef),
4523
4453
  label: "Italic",
4524
4454
  name: "Italic",
4525
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Italic, {})
4455
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Italic, {})
4526
4456
  }
4527
4457
  ),
4528
4458
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4531,19 +4461,11 @@ const WysiwygNav = ({
4531
4461
  onClick: () => onActionClick("Underline", editorRef),
4532
4462
  label: "Underline",
4533
4463
  name: "Underline",
4534
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Underline, {})
4464
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Underline, {})
4535
4465
  }
4536
4466
  )
4537
4467
  ] }),
4538
- /* @__PURE__ */ jsxRuntime.jsx(
4539
- MoreButton,
4540
- {
4541
- ref: buttonMoreRef,
4542
- onClick: handleTogglePopover,
4543
- label: "More",
4544
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, {})
4545
- }
4546
- ),
4468
+ /* @__PURE__ */ jsxRuntime.jsx(MoreButton, { ref: buttonMoreRef, onClick: handleTogglePopover, label: "More", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, {}) }),
4547
4469
  visiblePopover && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover, { onDismiss: handleTogglePopover, centered: true, source: buttonMoreRef, spacing: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
4548
4470
  /* @__PURE__ */ jsxRuntime.jsxs(IconButtonGroupMargin, { children: [
4549
4471
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4552,7 +4474,7 @@ const WysiwygNav = ({
4552
4474
  onClick: () => onActionClick("Strikethrough", editorRef, handleTogglePopover),
4553
4475
  label: "Strikethrough",
4554
4476
  name: "Strikethrough",
4555
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.StrikeThrough, {})
4477
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.StrikeThrough, {})
4556
4478
  }
4557
4479
  ),
4558
4480
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4561,7 +4483,7 @@ const WysiwygNav = ({
4561
4483
  onClick: () => onActionClick("BulletList", editorRef, handleTogglePopover),
4562
4484
  label: "BulletList",
4563
4485
  name: "BulletList",
4564
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.BulletList, {})
4486
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.BulletList, {})
4565
4487
  }
4566
4488
  ),
4567
4489
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4570,7 +4492,7 @@ const WysiwygNav = ({
4570
4492
  onClick: () => onActionClick("NumberList", editorRef, handleTogglePopover),
4571
4493
  label: "NumberList",
4572
4494
  name: "NumberList",
4573
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.NumberList, {})
4495
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.NumberList, {})
4574
4496
  }
4575
4497
  )
4576
4498
  ] }),
@@ -4581,7 +4503,7 @@ const WysiwygNav = ({
4581
4503
  onClick: () => onActionClick("Code", editorRef, handleTogglePopover),
4582
4504
  label: "Code",
4583
4505
  name: "Code",
4584
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Code, {})
4506
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Code, {})
4585
4507
  }
4586
4508
  ),
4587
4509
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4593,7 +4515,7 @@ const WysiwygNav = ({
4593
4515
  },
4594
4516
  label: "Image",
4595
4517
  name: "Image",
4596
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Image, {})
4518
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Image, {})
4597
4519
  }
4598
4520
  ),
4599
4521
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4602,7 +4524,7 @@ const WysiwygNav = ({
4602
4524
  onClick: () => onActionClick("Link", editorRef, handleTogglePopover),
4603
4525
  label: "Link",
4604
4526
  name: "Link",
4605
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Link, {})
4527
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Link, {})
4606
4528
  }
4607
4529
  ),
4608
4530
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4611,7 +4533,7 @@ const WysiwygNav = ({
4611
4533
  onClick: () => onActionClick("Quote", editorRef, handleTogglePopover),
4612
4534
  label: "Quote",
4613
4535
  name: "Quote",
4614
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Quotes, {})
4536
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Quotes, {})
4615
4537
  }
4616
4538
  )
4617
4539
  ] })
@@ -4625,19 +4547,6 @@ const WysiwygNav = ({
4625
4547
  }
4626
4548
  );
4627
4549
  };
4628
- const StyledFlex = styled__default.default(designSystem.Flex)`
4629
- /* Hide the label, every input needs a label. */
4630
- label {
4631
- border: 0;
4632
- clip: rect(0 0 0 0);
4633
- height: 1px;
4634
- margin: -1px;
4635
- overflow: hidden;
4636
- padding: 0;
4637
- position: absolute;
4638
- width: 1px;
4639
- }
4640
- `;
4641
4550
  const Wysiwyg = React__namespace.forwardRef(
4642
4551
  ({ hint, disabled, label, name: name2, placeholder, required, labelAction }, forwardedRef) => {
4643
4552
  const field = strapiAdmin.useField(name2);
@@ -4696,15 +4605,15 @@ const Wysiwyg = React__namespace.forwardRef(
4696
4605
  const handleSelectAssets = (files) => {
4697
4606
  const formattedFiles = files.map((f) => ({
4698
4607
  alt: f.alternativeText || f.name,
4699
- url: urls.prefixFileUrlWithBackendUrl(f.url),
4608
+ url: usePrev.prefixFileUrlWithBackendUrl(f.url),
4700
4609
  mime: f.mime
4701
4610
  }));
4702
4611
  insertFile(editorRef, formattedFiles);
4703
4612
  setMediaLibVisible(false);
4704
4613
  };
4705
- return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field, { name: name2, hint, error: field.error, required, children: [
4614
+ return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: name2, hint, error: field.error, required, children: [
4706
4615
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
4707
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldLabel, { action: labelAction, children: label }),
4616
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
4708
4617
  /* @__PURE__ */ jsxRuntime.jsxs(
4709
4618
  EditorLayout,
4710
4619
  {
@@ -4745,14 +4654,15 @@ const Wysiwyg = React__namespace.forwardRef(
4745
4654
  ]
4746
4655
  }
4747
4656
  ),
4748
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldHint, {}),
4749
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldError, {})
4657
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
4658
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
4750
4659
  ] }),
4751
4660
  mediaLibVisible && // @ts-expect-error – TODO: fix this way of injecting because it's not really typeable without a registry.
4752
4661
  /* @__PURE__ */ jsxRuntime.jsx(MediaLibraryDialog, { onClose: handleToggleMediaLib, onSelectAssets: handleSelectAssets })
4753
4662
  ] });
4754
4663
  }
4755
4664
  );
4665
+ const MemoizedWysiwyg = React__namespace.memo(Wysiwyg);
4756
4666
  const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
4757
4667
  const { id } = index.useDoc();
4758
4668
  const isFormDisabled = strapiAdmin.useForm("InputRenderer", (state) => state.disabled);
@@ -4802,10 +4712,10 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
4802
4712
  }
4803
4713
  switch (props.type) {
4804
4714
  case "blocks":
4805
- return /* @__PURE__ */ jsxRuntime.jsx(BlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4715
+ return /* @__PURE__ */ jsxRuntime.jsx(MemoizedBlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4806
4716
  case "component":
4807
4717
  return /* @__PURE__ */ jsxRuntime.jsx(
4808
- ComponentInput,
4718
+ MemoizedComponentInput,
4809
4719
  {
4810
4720
  ...props,
4811
4721
  hint,
@@ -4817,11 +4727,11 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
4817
4727
  case "dynamiczone":
4818
4728
  return /* @__PURE__ */ jsxRuntime.jsx(DynamicZone, { ...props, hint, disabled: fieldIsDisabled });
4819
4729
  case "relation":
4820
- return /* @__PURE__ */ jsxRuntime.jsx(Relations.RelationsField, { ...props, hint, disabled: fieldIsDisabled });
4730
+ return /* @__PURE__ */ jsxRuntime.jsx(Relations.MemoizedRelationsField, { ...props, hint, disabled: fieldIsDisabled });
4821
4731
  case "richtext":
4822
- return /* @__PURE__ */ jsxRuntime.jsx(Wysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4732
+ return /* @__PURE__ */ jsxRuntime.jsx(MemoizedWysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4823
4733
  case "uid":
4824
- return /* @__PURE__ */ jsxRuntime.jsx(UIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4734
+ return /* @__PURE__ */ jsxRuntime.jsx(MemoizedUIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4825
4735
  case "enumeration":
4826
4736
  return /* @__PURE__ */ jsxRuntime.jsx(
4827
4737
  strapiAdmin.InputRenderer,
@@ -4893,6 +4803,7 @@ const getMinMax = (attribute) => {
4893
4803
  return { maximum: void 0, minimum: void 0 };
4894
4804
  }
4895
4805
  };
4806
+ const MemoizedInputRenderer = React.memo(InputRenderer);
4896
4807
  const DynamicComponent = ({
4897
4808
  componentUid,
4898
4809
  disabled,
@@ -4906,7 +4817,6 @@ const DynamicComponent = ({
4906
4817
  dynamicComponentsByCategory = {},
4907
4818
  onAddComponent
4908
4819
  }) => {
4909
- const [isOpen, setIsOpen] = React__namespace.useState(true);
4910
4820
  const { formatMessage } = reactIntl.useIntl();
4911
4821
  const formValues = strapiAdmin.useForm("DynamicComponent", (state) => state.values);
4912
4822
  const {
@@ -4915,7 +4825,7 @@ const DynamicComponent = ({
4915
4825
  const title = React__namespace.useMemo(() => {
4916
4826
  const { mainField } = components[componentUid]?.settings ?? { mainField: "id" };
4917
4827
  const mainFieldValue = objects.getIn(formValues, `${name2}.${index$1}.${mainField}`);
4918
- const displayedValue = mainField === "id" ? "" : String(mainFieldValue).trim();
4828
+ const displayedValue = mainField === "id" || !mainFieldValue ? "" : String(mainFieldValue).trim();
4919
4829
  const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
4920
4830
  return mainValue;
4921
4831
  }, [componentUid, components, formValues, name2, index$1]);
@@ -4926,9 +4836,6 @@ const DynamicComponent = ({
4926
4836
  ) ?? { icon: null, displayName: null };
4927
4837
  return { icon: icon2, displayName: displayName2 };
4928
4838
  }, [componentUid, dynamicComponentsByCategory]);
4929
- const handleToggle = () => {
4930
- setIsOpen((s) => !s);
4931
- };
4932
4839
  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop.useDragAndDrop(!disabled, {
4933
4840
  type: `${useDragAndDrop.ItemTypes.DYNAMIC_ZONE}_${name2}`,
4934
4841
  index: index$1,
@@ -4946,9 +4853,9 @@ const DynamicComponent = ({
4946
4853
  dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: false });
4947
4854
  }, [dragPreviewRef, index$1]);
4948
4855
  const composedBoxRefs = designSystem.useComposedRefs(boxRef, dropRef);
4949
- const accordionActions = disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(ActionsFlex, { gap: 0, children: [
4856
+ const accordionActions = disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
4950
4857
  /* @__PURE__ */ jsxRuntime.jsx(
4951
- IconButtonCustom,
4858
+ designSystem.IconButton,
4952
4859
  {
4953
4860
  borderWidth: 0,
4954
4861
  label: formatMessage(
@@ -4965,10 +4872,7 @@ const DynamicComponent = ({
4965
4872
  /* @__PURE__ */ jsxRuntime.jsx(
4966
4873
  designSystem.IconButton,
4967
4874
  {
4968
- forwardedAs: "div",
4969
- role: "button",
4970
4875
  borderWidth: 0,
4971
- tabIndex: 0,
4972
4876
  onClick: (e) => e.stopPropagation(),
4973
4877
  "data-handler-id": handlerId,
4974
4878
  ref: dragRef,
@@ -4983,7 +4887,7 @@ const DynamicComponent = ({
4983
4887
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Root, { children: [
4984
4888
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 2, paddingRight: 2, children: [
4985
4889
  /* @__PURE__ */ jsxRuntime.jsx(Icons.More, { "aria-hidden": true, focusable: false }),
4986
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { as: "span", children: formatMessage({
4890
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { tag: "span", children: formatMessage({
4987
4891
  id: index.getTranslation("components.DynamicZone.more-actions"),
4988
4892
  defaultMessage: "More actions"
4989
4893
  }) })
@@ -5012,62 +4916,48 @@ const DynamicComponent = ({
5012
4916
  ] })
5013
4917
  ] })
5014
4918
  ] });
5015
- return /* @__PURE__ */ jsxRuntime.jsxs(ComponentContainer, { as: "li", width: "100%", children: [
4919
+ const accordionTitle = title ? `${displayName} ${title}` : displayName;
4920
+ const accordionValue = React__namespace.useId();
4921
+ return /* @__PURE__ */ jsxRuntime.jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
5016
4922
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Rectangle, { background: "neutral200" }) }),
5017
- /* @__PURE__ */ jsxRuntime.jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview, {}) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion, { expanded: isOpen, onToggle: handleToggle, size: "S", children: [
5018
- /* @__PURE__ */ jsxRuntime.jsx(
5019
- designSystem.AccordionToggle,
5020
- {
5021
- startIcon: /* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { icon, showBackground: false, size: "S" }),
5022
- action: accordionActions,
5023
- title: `${displayName} ${title}`,
5024
- togglePosition: "left"
5025
- }
5026
- ),
5027
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: row.map(({ size, ...field }) => {
4923
+ /* @__PURE__ */ jsxRuntime.jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview, {}) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: accordionValue, children: [
4924
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Header, { children: [
4925
+ /* @__PURE__ */ jsxRuntime.jsx(
4926
+ designSystem.Accordion.Trigger,
4927
+ {
4928
+ icon: icon && ComponentIcon.COMPONENT_ICONS[icon] ? ComponentIcon.COMPONENT_ICONS[icon] : ComponentIcon.COMPONENT_ICONS.dashboard,
4929
+ children: accordionTitle
4930
+ }
4931
+ ),
4932
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Actions, { children: accordionActions })
4933
+ ] }),
4934
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: row.map(({ size, ...field }) => {
5028
4935
  const fieldName = `${name2}.${index$1}.${field.name}`;
5029
- return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, s: 12, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(InputRenderer, { ...field, name: fieldName }) }, fieldName);
4936
+ return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, s: 12, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...field, name: fieldName }) }, fieldName);
5030
4937
  }) }, rowInd)) }) }) })
5031
- ] }) })
4938
+ ] }) }) })
5032
4939
  ] });
5033
4940
  };
5034
- const ActionsFlex = styled__default.default(designSystem.Flex)`
5035
- /*
5036
- we need to remove the background from the button but we can't
5037
- wrap the element in styled because it breaks the forwardedAs which
5038
- we need for drag handler to work on firefox
5039
- */
5040
- div[role='button'] {
5041
- background: transparent;
5042
- }
5043
- `;
5044
- const IconButtonCustom = styled__default.default(designSystem.IconButton)`
5045
- background-color: transparent;
5046
-
5047
- svg path {
5048
- fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : theme.colors.neutral600};
5049
- }
5050
- `;
5051
- const StyledBox = styled__default.default(designSystem.Box)`
4941
+ const StyledBox = styledComponents.styled(designSystem.Box)`
5052
4942
  > div:first-child {
5053
4943
  box-shadow: ${({ theme }) => theme.shadows.tableShadow};
5054
4944
  }
5055
4945
  `;
5056
- const AccordionContentRadius = styled__default.default(designSystem.Box)`
4946
+ const AccordionContentRadius = styledComponents.styled(designSystem.Box)`
5057
4947
  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
5058
4948
  `;
5059
- const Rectangle = styled__default.default(designSystem.Box)`
4949
+ const Rectangle = styledComponents.styled(designSystem.Box)`
5060
4950
  width: ${({ theme }) => theme.spaces[2]};
5061
4951
  height: ${({ theme }) => theme.spaces[4]};
5062
4952
  `;
5063
- const Preview = styled__default.default.span`
4953
+ const Preview = styledComponents.styled.span`
5064
4954
  display: block;
5065
4955
  background-color: ${({ theme }) => theme.colors.primary100};
5066
4956
  outline: 1px dashed ${({ theme }) => theme.colors.primary500};
5067
4957
  outline-offset: -1px;
5068
4958
  padding: ${({ theme }) => theme.spaces[6]};
5069
4959
  `;
5070
- const ComponentContainer = styled__default.default(designSystem.Box)`
4960
+ const ComponentContainer = styledComponents.styled(designSystem.Box)`
5071
4961
  list-style: none;
5072
4962
  padding: 0;
5073
4963
  margin: 0;
@@ -5118,7 +5008,7 @@ const [DynamicZoneProvider, useDynamicZone] = strapiAdmin.createContext(
5118
5008
  );
5119
5009
  const DynamicZone = ({
5120
5010
  attribute,
5121
- disabled,
5011
+ disabled: disabledProp,
5122
5012
  hint,
5123
5013
  label,
5124
5014
  labelAction,
@@ -5128,7 +5018,8 @@ const DynamicZone = ({
5128
5018
  const { max = Infinity, min = -Infinity } = attribute ?? {};
5129
5019
  const [addComponentIsOpen, setAddComponentIsOpen] = React__namespace.useState(false);
5130
5020
  const [liveText, setLiveText] = React__namespace.useState("");
5131
- const { components } = index.useDoc();
5021
+ const { components, isLoading } = index.useDoc();
5022
+ const disabled = disabledProp || isLoading;
5132
5023
  const { addFieldRow, removeFieldRow, moveFieldRow } = strapiAdmin.useForm(
5133
5024
  "DynamicZone",
5134
5025
  ({ addFieldRow: addFieldRow2, removeFieldRow: removeFieldRow2, moveFieldRow: moveFieldRow2 }) => ({
@@ -5335,13 +5226,13 @@ const DynamicZone = ({
5335
5226
  )
5336
5227
  ] }) });
5337
5228
  };
5338
- exports.BlocksInput = BlocksInput;
5339
- exports.ComponentInput = ComponentInput;
5340
5229
  exports.DynamicZone = DynamicZone;
5341
- exports.InputRenderer = InputRenderer;
5230
+ exports.MemoizedBlocksInput = MemoizedBlocksInput;
5231
+ exports.MemoizedComponentInput = MemoizedComponentInput;
5232
+ exports.MemoizedInputRenderer = MemoizedInputRenderer;
5233
+ exports.MemoizedUIDInput = MemoizedUIDInput;
5234
+ exports.MemoizedWysiwyg = MemoizedWysiwyg;
5342
5235
  exports.NotAllowedInput = NotAllowedInput;
5343
- exports.UIDInput = UIDInput;
5344
- exports.Wysiwyg = Wysiwyg;
5345
5236
  exports.createDefaultForm = createDefaultForm;
5346
5237
  exports.prepareTempKeys = prepareTempKeys;
5347
5238
  exports.removeFieldsThatDontExistOnSchema = removeFieldsThatDontExistOnSchema;
@@ -5349,4 +5240,4 @@ exports.transformDocument = transformDocument;
5349
5240
  exports.useDynamicZone = useDynamicZone;
5350
5241
  exports.useFieldHint = useFieldHint;
5351
5242
  exports.useLazyComponents = useLazyComponents;
5352
- //# sourceMappingURL=Field-Caef4JjM.js.map
5243
+ //# sourceMappingURL=Field-dLk-vgLL.js.map