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

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 (118) 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-43KmCNQE.js → ComponentConfigurationPage-DMq0wvcL.js} +3 -3
  6. package/dist/_chunks/{ComponentConfigurationPage-43KmCNQE.js.map → ComponentConfigurationPage-DMq0wvcL.js.map} +1 -1
  7. package/dist/_chunks/{ComponentConfigurationPage--2aLCv-G.mjs → ComponentConfigurationPage-uTMkLI60.mjs} +3 -3
  8. package/dist/_chunks/{ComponentConfigurationPage--2aLCv-G.mjs.map → ComponentConfigurationPage-uTMkLI60.mjs.map} +1 -1
  9. package/dist/_chunks/{EditConfigurationPage-CUcGHHvQ.mjs → EditConfigurationPage-B2HhCh-b.mjs} +3 -3
  10. package/dist/_chunks/{EditConfigurationPage-CUcGHHvQ.mjs.map → EditConfigurationPage-B2HhCh-b.mjs.map} +1 -1
  11. package/dist/_chunks/{EditConfigurationPage-BfFzJ4Br.js → EditConfigurationPage-BFpQwwbc.js} +3 -3
  12. package/dist/_chunks/{EditConfigurationPage-BfFzJ4Br.js.map → EditConfigurationPage-BFpQwwbc.js.map} +1 -1
  13. package/dist/_chunks/{EditViewPage-Bm8lgcm6.mjs → EditViewPage-BVIrgjyG.mjs} +4 -4
  14. package/dist/_chunks/EditViewPage-BVIrgjyG.mjs.map +1 -0
  15. package/dist/_chunks/{EditViewPage-CzOT5Kpj.js → EditViewPage-CXXue16T.js} +5 -7
  16. package/dist/_chunks/EditViewPage-CXXue16T.js.map +1 -0
  17. package/dist/_chunks/{Field-Dlh0uGnL.mjs → Field-0_2h1vuK.mjs} +303 -294
  18. package/dist/_chunks/Field-0_2h1vuK.mjs.map +1 -0
  19. package/dist/_chunks/{Field-Caef4JjM.js → Field-ZgzKlgxR.js} +363 -355
  20. package/dist/_chunks/Field-ZgzKlgxR.js.map +1 -0
  21. package/dist/_chunks/{Form-EnaQL_6L.mjs → Form-B7TUnQDd.mjs} +14 -14
  22. package/dist/_chunks/Form-B7TUnQDd.mjs.map +1 -0
  23. package/dist/_chunks/{Form-BzuAjtRq.js → Form-DgTc2qkx.js} +14 -15
  24. package/dist/_chunks/Form-DgTc2qkx.js.map +1 -0
  25. package/dist/_chunks/{History-C17LiyRg.js → History-DtHjQuqM.js} +28 -40
  26. package/dist/_chunks/History-DtHjQuqM.js.map +1 -0
  27. package/dist/_chunks/{History-D6sbCJvo.mjs → History-Dug_4HIA.mjs} +28 -39
  28. package/dist/_chunks/History-Dug_4HIA.mjs.map +1 -0
  29. package/dist/_chunks/{ListConfigurationPage-Dks5SX6f.js → ListConfigurationPage-BuSdTjfa.js} +17 -19
  30. package/dist/_chunks/ListConfigurationPage-BuSdTjfa.js.map +1 -0
  31. package/dist/_chunks/{ListConfigurationPage-Ce4qs7qE.mjs → ListConfigurationPage-CmEeNg6T.mjs} +14 -14
  32. package/dist/_chunks/ListConfigurationPage-CmEeNg6T.mjs.map +1 -0
  33. package/dist/_chunks/{ListViewPage-BwrZrPsh.js → ListViewPage-CExWwa4S.js} +24 -37
  34. package/dist/_chunks/ListViewPage-CExWwa4S.js.map +1 -0
  35. package/dist/_chunks/{ListViewPage-Be7S5aKL.mjs → ListViewPage-Dsoa3wEA.mjs} +21 -33
  36. package/dist/_chunks/ListViewPage-Dsoa3wEA.mjs.map +1 -0
  37. package/dist/_chunks/{NoContentTypePage-Cu5r1-JT.js → NoContentTypePage-DCUL8gVi.js} +5 -5
  38. package/dist/_chunks/NoContentTypePage-DCUL8gVi.js.map +1 -0
  39. package/dist/_chunks/{NoContentTypePage-CIPmYQMm.mjs → NoContentTypePage-Dh38hBXB.mjs} +7 -7
  40. package/dist/_chunks/NoContentTypePage-Dh38hBXB.mjs.map +1 -0
  41. package/dist/_chunks/{NoPermissionsPage-C-j6TEUF.js → NoPermissionsPage-BK-XCpIy.js} +4 -5
  42. package/dist/_chunks/NoPermissionsPage-BK-XCpIy.js.map +1 -0
  43. package/dist/_chunks/{NoPermissionsPage-DhJ7LYrr.mjs → NoPermissionsPage-Dt2O40ey.mjs} +5 -6
  44. package/dist/_chunks/NoPermissionsPage-Dt2O40ey.mjs.map +1 -0
  45. package/dist/_chunks/{Relations-Czs-uZ-s.js → Relations-CNypkp-g.js} +66 -59
  46. package/dist/_chunks/Relations-CNypkp-g.js.map +1 -0
  47. package/dist/_chunks/{Relations-CY7AtkDA.mjs → Relations-DZyjWZHl.mjs} +62 -54
  48. package/dist/_chunks/Relations-DZyjWZHl.mjs.map +1 -0
  49. package/dist/_chunks/{index-DNVx8ssZ.mjs → index-B3c-4it4.mjs} +54 -41
  50. package/dist/_chunks/index-B3c-4it4.mjs.map +1 -0
  51. package/dist/_chunks/{index-X_2tafck.js → index-DFK7LwDW.js} +59 -47
  52. package/dist/_chunks/index-DFK7LwDW.js.map +1 -0
  53. package/dist/_chunks/{layout-Dnh0PNp9.mjs → layout-B5cm7cZj.mjs} +10 -10
  54. package/dist/_chunks/layout-B5cm7cZj.mjs.map +1 -0
  55. package/dist/_chunks/{layout-dBc7wN7L.js → layout-DLih5-_W.js} +11 -13
  56. package/dist/_chunks/layout-DLih5-_W.js.map +1 -0
  57. package/dist/_chunks/{relations-Dx7tMKJN.mjs → relations-BZkrMa2z.mjs} +2 -2
  58. package/dist/_chunks/{relations-Dx7tMKJN.mjs.map → relations-BZkrMa2z.mjs.map} +1 -1
  59. package/dist/_chunks/{relations-4pHtBrHJ.js → relations-CTvkuINQ.js} +2 -2
  60. package/dist/_chunks/{relations-4pHtBrHJ.js.map → relations-CTvkuINQ.js.map} +1 -1
  61. package/dist/_chunks/useDragAndDrop-DdHgKsqq.mjs.map +1 -1
  62. package/dist/_chunks/useDragAndDrop-J0TUUbR6.js.map +1 -1
  63. package/dist/admin/index.js +1 -1
  64. package/dist/admin/index.mjs +1 -1
  65. package/dist/admin/src/hooks/useDocumentLayout.d.ts +1 -1
  66. package/dist/admin/src/hooks/useDragAndDrop.d.ts +4 -4
  67. package/dist/admin/src/hooks/useKeyboardDragAndDrop.d.ts +1 -1
  68. package/dist/admin/src/pages/EditView/components/FormInputs/Relations.d.ts +8 -3
  69. package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.d.ts +3 -49
  70. package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/WysiwygStyles.d.ts +48 -54
  71. package/dist/admin/src/utils/api.d.ts +6 -7
  72. package/dist/server/index.js +333 -327
  73. package/dist/server/index.js.map +1 -1
  74. package/dist/server/index.mjs +340 -334
  75. package/dist/server/index.mjs.map +1 -1
  76. package/dist/server/src/controllers/collection-types.d.ts.map +1 -1
  77. package/dist/server/src/controllers/validation/index.d.ts +1 -1
  78. package/dist/server/src/history/services/history.d.ts +2 -4
  79. package/dist/server/src/history/services/history.d.ts.map +1 -1
  80. package/dist/server/src/history/services/index.d.ts +6 -2
  81. package/dist/server/src/history/services/index.d.ts.map +1 -1
  82. package/dist/server/src/history/services/lifecycles.d.ts +9 -0
  83. package/dist/server/src/history/services/lifecycles.d.ts.map +1 -0
  84. package/dist/server/src/history/services/utils.d.ts +41 -9
  85. package/dist/server/src/history/services/utils.d.ts.map +1 -1
  86. package/dist/server/src/history/utils.d.ts +6 -2
  87. package/dist/server/src/history/utils.d.ts.map +1 -1
  88. package/dist/server/src/index.d.ts +11 -11
  89. package/dist/server/src/services/document-manager.d.ts +12 -11
  90. package/dist/server/src/services/document-manager.d.ts.map +1 -1
  91. package/dist/server/src/services/index.d.ts +11 -11
  92. package/dist/shared/contracts/collection-types.d.ts +3 -1
  93. package/dist/shared/contracts/collection-types.d.ts.map +1 -1
  94. package/package.json +10 -11
  95. package/dist/_chunks/CardDragPreview-DSVYodBX.js.map +0 -1
  96. package/dist/_chunks/CardDragPreview-ikSG4M46.mjs.map +0 -1
  97. package/dist/_chunks/EditViewPage-Bm8lgcm6.mjs.map +0 -1
  98. package/dist/_chunks/EditViewPage-CzOT5Kpj.js.map +0 -1
  99. package/dist/_chunks/Field-Caef4JjM.js.map +0 -1
  100. package/dist/_chunks/Field-Dlh0uGnL.mjs.map +0 -1
  101. package/dist/_chunks/Form-BzuAjtRq.js.map +0 -1
  102. package/dist/_chunks/Form-EnaQL_6L.mjs.map +0 -1
  103. package/dist/_chunks/History-C17LiyRg.js.map +0 -1
  104. package/dist/_chunks/History-D6sbCJvo.mjs.map +0 -1
  105. package/dist/_chunks/ListConfigurationPage-Ce4qs7qE.mjs.map +0 -1
  106. package/dist/_chunks/ListConfigurationPage-Dks5SX6f.js.map +0 -1
  107. package/dist/_chunks/ListViewPage-Be7S5aKL.mjs.map +0 -1
  108. package/dist/_chunks/ListViewPage-BwrZrPsh.js.map +0 -1
  109. package/dist/_chunks/NoContentTypePage-CIPmYQMm.mjs.map +0 -1
  110. package/dist/_chunks/NoContentTypePage-Cu5r1-JT.js.map +0 -1
  111. package/dist/_chunks/NoPermissionsPage-C-j6TEUF.js.map +0 -1
  112. package/dist/_chunks/NoPermissionsPage-DhJ7LYrr.mjs.map +0 -1
  113. package/dist/_chunks/Relations-CY7AtkDA.mjs.map +0 -1
  114. package/dist/_chunks/Relations-Czs-uZ-s.js.map +0 -1
  115. package/dist/_chunks/index-DNVx8ssZ.mjs.map +0 -1
  116. package/dist/_chunks/index-X_2tafck.js.map +0 -1
  117. package/dist/_chunks/layout-Dnh0PNp9.mjs.map +0 -1
  118. package/dist/_chunks/layout-dBc7wN7L.js.map +0 -1
@@ -5,11 +5,11 @@ 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-DFK7LwDW.js");
9
9
  const fractionalIndexing = require("fractional-indexing");
10
- const Relations = require("./Relations-Czs-uZ-s.js");
10
+ const Relations = require("./Relations-CNypkp-g.js");
11
11
  const Icons = require("@strapi/icons");
12
- const styled = require("styled-components");
12
+ const styledComponents = require("styled-components");
13
13
  const ComponentIcon = require("./ComponentIcon-BBQsYCVn.js");
14
14
  const reactDndHtml5Backend = require("react-dnd-html5-backend");
15
15
  const useDragAndDrop = require("./useDragAndDrop-J0TUUbR6.js");
@@ -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.attrs({ role: "code" })`
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
  }
@@ -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,12 +1624,12 @@ 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
1635
  "aria-label": formatMessage({
@@ -1641,7 +1640,7 @@ const DragAndDropElement = ({
1641
1640
  "aria-disabled": disabled,
1642
1641
  disabled,
1643
1642
  draggable: true,
1644
- dragHandleTopMargin,
1643
+ $dragHandleTopMargin: dragHandleTopMargin,
1645
1644
  children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, { color: "neutral600" })
1646
1645
  }
1647
1646
  ),
@@ -1653,17 +1652,17 @@ const DragAndDropElement = ({
1653
1652
  };
1654
1653
  const CloneDragItem = ({ children, dragHandleTopMargin }) => {
1655
1654
  const { formatMessage } = reactIntl.useIntl();
1656
- return /* @__PURE__ */ jsxRuntime.jsxs(DragItem, { gap: 2, paddingLeft: 2, alignItems: "start", dragVisibility: "visible", children: [
1655
+ return /* @__PURE__ */ jsxRuntime.jsxs(DragItem, { gap: 2, paddingLeft: 2, alignItems: "start", $dragVisibility: "visible", children: [
1657
1656
  /* @__PURE__ */ jsxRuntime.jsx(
1658
1657
  DragIconButton,
1659
1658
  {
1660
- forwardedAs: "div",
1659
+ tag: "div",
1661
1660
  role: "button",
1662
1661
  "aria-label": formatMessage({
1663
1662
  id: index.getTranslation("components.DragHandle-label"),
1664
1663
  defaultMessage: "Drag"
1665
1664
  }),
1666
- dragHandleTopMargin,
1665
+ $dragHandleTopMargin: dragHandleTopMargin,
1667
1666
  children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, { color: "neutral600" })
1668
1667
  }
1669
1668
  ),
@@ -1910,12 +1909,12 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
1910
1909
  }
1911
1910
  );
1912
1911
  };
1913
- const CollapseIconButton = styled__default.default(designSystem.IconButton)`
1912
+ const CollapseIconButton = styledComponents.styled(designSystem.IconButton)`
1914
1913
  position: absolute;
1915
1914
  bottom: 1.2rem;
1916
1915
  right: 1.2rem;
1917
1916
  `;
1918
- const ExpandWrapper$1 = styled__default.default(designSystem.Flex)`
1917
+ const ExpandWrapper$1 = styledComponents.styled(designSystem.Flex)`
1919
1918
  // Background with 20% opacity
1920
1919
  background: ${({ theme }) => `${theme.colors.neutral800}1F`};
1921
1920
  `;
@@ -1980,13 +1979,13 @@ const EditorLayout$1 = ({
1980
1979
  ) }) });
1981
1980
  }
1982
1981
  return /* @__PURE__ */ jsxRuntime.jsx(
1983
- designSystem.InputWrapper,
1982
+ InputWrapper,
1984
1983
  {
1985
1984
  direction: "column",
1986
1985
  alignItems: "flex-start",
1987
1986
  height: "512px",
1988
- disabled,
1989
- hasError: Boolean(error),
1987
+ $disabled: disabled,
1988
+ $hasError: Boolean(error),
1990
1989
  style: { overflow: "hidden" },
1991
1990
  "aria-describedby": ariaDescriptionId,
1992
1991
  position: "relative",
@@ -1994,25 +1993,52 @@ const EditorLayout$1 = ({
1994
1993
  }
1995
1994
  );
1996
1995
  };
1997
- const stylesToInherit = styled.css`
1996
+ const InputWrapper = styledComponents.styled(designSystem.Flex)`
1997
+ border: 1px solid
1998
+ ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
1999
+ border-radius: ${({ theme }) => theme.borderRadius};
2000
+ background: ${({ theme }) => theme.colors.neutral0};
2001
+
2002
+ ${({ theme, $hasError = false }) => styledComponents.css`
2003
+ outline: none;
2004
+ box-shadow: 0;
2005
+ transition-property: border-color, box-shadow, fill;
2006
+ transition-duration: 0.2s;
2007
+
2008
+ &:focus-within {
2009
+ border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};
2010
+ box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;
2011
+ }
2012
+ `}
2013
+
2014
+ ${({ theme, $disabled }) => $disabled ? styledComponents.css`
2015
+ color: ${theme.colors.neutral600};
2016
+ background: ${theme.colors.neutral150};
2017
+ ` : void 0}
2018
+ `;
2019
+ const stylesToInherit = styledComponents.css`
1998
2020
  font-size: inherit;
1999
2021
  color: inherit;
2000
2022
  line-height: inherit;
2001
2023
  `;
2002
- const BoldText = styled__default.default(designSystem.Typography).attrs({ fontWeight: "bold" })`
2024
+ const BoldText = styledComponents.styled(designSystem.Typography).attrs({ fontWeight: "bold" })`
2003
2025
  ${stylesToInherit}
2004
2026
  `;
2005
- const ItalicText = styled__default.default(designSystem.Typography)`
2027
+ const ItalicText = styledComponents.styled(designSystem.Typography)`
2006
2028
  font-style: italic;
2007
2029
  ${stylesToInherit}
2008
2030
  `;
2009
- const UnderlineText = styled__default.default(designSystem.Typography).attrs({ textDecoration: "underline" })`
2031
+ const UnderlineText = styledComponents.styled(designSystem.Typography).attrs({
2032
+ textDecoration: "underline"
2033
+ })`
2010
2034
  ${stylesToInherit}
2011
2035
  `;
2012
- const StrikeThroughText = styled__default.default(designSystem.Typography).attrs({ textDecoration: "line-through" })`
2036
+ const StrikeThroughText = styledComponents.styled(designSystem.Typography).attrs({
2037
+ textDecoration: "line-through"
2038
+ })`
2013
2039
  ${stylesToInherit}
2014
2040
  `;
2015
- const InlineCode = styled__default.default.code`
2041
+ const InlineCode = styledComponents.styled.code`
2016
2042
  background-color: ${({ theme }) => theme.colors.neutral150};
2017
2043
  border-radius: ${({ theme }) => theme.borderRadius};
2018
2044
  padding: ${({ theme }) => `0 ${theme.spaces[2]}`};
@@ -2182,10 +2208,10 @@ function useBlocksEditorContext(consumerName) {
2182
2208
  editor
2183
2209
  };
2184
2210
  }
2185
- const EditorDivider = styled__default.default(designSystem.Divider)`
2211
+ const EditorDivider = styledComponents.styled(designSystem.Divider)`
2186
2212
  background: ${({ theme }) => theme.colors.neutral200};
2187
2213
  `;
2188
- const ExpandIconButton = styled__default.default(designSystem.IconButton)`
2214
+ const ExpandIconButton = styledComponents.styled(designSystem.IconButton)`
2189
2215
  position: absolute;
2190
2216
  bottom: 1.2rem;
2191
2217
  right: 1.2rem;
@@ -2300,8 +2326,8 @@ const BlocksInput = React__namespace.forwardRef(
2300
2326
  ({ label, name: name2, required = false, hint, labelAction, ...editorProps }, forwardedRef) => {
2301
2327
  const id = React__namespace.useId();
2302
2328
  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 }),
2329
+ 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: [
2330
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
2305
2331
  /* @__PURE__ */ jsxRuntime.jsx(
2306
2332
  BlocksEditor,
2307
2333
  {
@@ -2314,8 +2340,8 @@ const BlocksInput = React__namespace.forwardRef(
2314
2340
  ...editorProps
2315
2341
  }
2316
2342
  ),
2317
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldHint, {}),
2318
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldError, {})
2343
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
2344
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
2319
2345
  ] }) });
2320
2346
  }
2321
2347
  );
@@ -2346,7 +2372,7 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
2346
2372
  /* @__PURE__ */ jsxRuntime.jsx(
2347
2373
  designSystem.Box,
2348
2374
  {
2349
- as: "button",
2375
+ tag: "button",
2350
2376
  background: "neutral100",
2351
2377
  borderColor: field.error ? "danger600" : "neutral200",
2352
2378
  hasRadius: true,
@@ -2367,7 +2393,7 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
2367
2393
  field.error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", variant: "pi", children: field.error })
2368
2394
  ] });
2369
2395
  };
2370
- const CircleIcon = styled__default.default(Icons.PlusCircle)`
2396
+ const CircleIcon = styledComponents.styled(Icons.PlusCircle)`
2371
2397
  width: 2.4rem;
2372
2398
  height: 2.4rem;
2373
2399
  > circle {
@@ -2585,7 +2611,7 @@ const RepeatableComponent = ({
2585
2611
  ] })
2586
2612
  ] });
2587
2613
  };
2588
- const TextButtonCustom = styled__default.default(designSystem.TextButton)`
2614
+ const TextButtonCustom = styledComponents.styled(designSystem.TextButton)`
2589
2615
  height: 100%;
2590
2616
  width: 100%;
2591
2617
  border-radius: 0 0 4px 4px;
@@ -2596,14 +2622,14 @@ const TextButtonCustom = styled__default.default(designSystem.TextButton)`
2596
2622
  font-size: 14px;
2597
2623
  }
2598
2624
  `;
2599
- const AccordionFooter = styled__default.default(designSystem.Box)`
2625
+ const AccordionFooter = styledComponents.styled(designSystem.Box)`
2600
2626
  overflow: hidden;
2601
2627
  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
2602
2628
  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
2603
2629
  border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
2604
2630
  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
2605
2631
  `;
2606
- const AccordionContent = styled__default.default(designSystem.Box)`
2632
+ const AccordionContent = styledComponents.styled(designSystem.Box)`
2607
2633
  border-bottom: none;
2608
2634
 
2609
2635
  /* add the borders and make sure the top is transparent to avoid jumping with the hover effect */
@@ -2639,40 +2665,21 @@ const AccordionGroup = ({ children, error }) => {
2639
2665
  error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "danger600", children: error }) })
2640
2666
  ] });
2641
2667
  };
2642
- const CustomIconButton$1 = styled__default.default(designSystem.IconButton)`
2668
+ const CustomIconButton$1 = styledComponents.styled(designSystem.IconButton)`
2643
2669
  background-color: transparent;
2644
-
2645
- svg {
2646
- path {
2647
- fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : theme.colors.neutral600};
2648
- }
2649
- }
2670
+ color: ${({ theme, $expanded }) => $expanded ? theme.colors.primary600 : theme.colors.neutral600};
2650
2671
 
2651
2672
  &:hover {
2652
- svg {
2653
- path {
2654
- fill: ${({ theme }) => theme.colors.primary600};
2655
- }
2656
- }
2673
+ color: ${({ theme }) => theme.colors.primary600};
2657
2674
  }
2658
2675
  `;
2659
- const ActionsFlex$1 = styled__default.default(designSystem.Flex)`
2676
+ const ActionsFlex$1 = styledComponents.styled(designSystem.Flex)`
2660
2677
  & .drag-handle {
2661
2678
  background: unset;
2662
-
2663
- svg {
2664
- path {
2665
- fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : void 0};
2666
- }
2667
- }
2679
+ color: ${({ theme, $expanded }) => $expanded ? theme.colors.primary600 : void 0};
2668
2680
 
2669
2681
  &:hover {
2670
- svg {
2671
- path {
2672
- /* keeps the hover style of the accordion */
2673
- fill: ${({ theme }) => theme.colors.primary600};
2674
- }
2675
- }
2682
+ color: ${({ theme }) => theme.colors.primary600};
2676
2683
  }
2677
2684
  }
2678
2685
  `;
@@ -2714,15 +2721,15 @@ const Component = ({
2714
2721
  }, [dragPreviewRef, index$1]);
2715
2722
  const composedAccordionRefs = designSystem.useComposedRefs(accordionRef, dragRef);
2716
2723
  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: [
2724
+ return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { ref: composedBoxRefs, children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview$1, {}) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion, { expanded: isOpen, onToggle: onClickToggle, id: name2, size: "S", children: [
2718
2725
  /* @__PURE__ */ jsxRuntime.jsx(
2719
2726
  designSystem.AccordionToggle,
2720
2727
  {
2721
- action: disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(ActionsFlex$1, { gap: 0, expanded: isOpen, children: [
2728
+ action: disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(ActionsFlex$1, { gap: 0, $expanded: isOpen, children: [
2722
2729
  /* @__PURE__ */ jsxRuntime.jsx(
2723
2730
  CustomIconButton$1,
2724
2731
  {
2725
- expanded: isOpen,
2732
+ $expanded: isOpen,
2726
2733
  borderWidth: 0,
2727
2734
  onClick: onDeleteComponent,
2728
2735
  label: formatMessage({
@@ -2737,7 +2744,7 @@ const Component = ({
2737
2744
  {
2738
2745
  className: "drag-handle",
2739
2746
  ref: composedAccordionRefs,
2740
- forwardedAs: "div",
2747
+ tag: "div",
2741
2748
  role: "button",
2742
2749
  borderWidth: 0,
2743
2750
  tabIndex: 0,
@@ -2770,9 +2777,9 @@ const Component = ({
2770
2777
  ] }) });
2771
2778
  };
2772
2779
  const Preview$1 = () => {
2773
- return /* @__PURE__ */ jsxRuntime.jsx(StyledSpan, { as: "span", padding: 6, background: "primary100" });
2780
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
2774
2781
  };
2775
- const StyledSpan = styled__default.default(designSystem.Box)`
2782
+ const StyledSpan = styledComponents.styled(designSystem.Box)`
2776
2783
  display: block;
2777
2784
  outline: 1px dashed ${({ theme }) => theme.colors.primary500};
2778
2785
  outline-offset: -1px;
@@ -2806,7 +2813,7 @@ const ComponentInput = ({
2806
2813
  htmlFor: name2,
2807
2814
  variant: "pi",
2808
2815
  fontWeight: "bold",
2809
- as: "label",
2816
+ tag: "label",
2810
2817
  children: [
2811
2818
  label,
2812
2819
  attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -2861,10 +2868,10 @@ const AddComponentButton = ({
2861
2868
  paddingLeft: 4,
2862
2869
  paddingRight: 4,
2863
2870
  style: { cursor: isDisabled ? "not-allowed" : "pointer" },
2864
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { as: "span", gap: 2, children: [
2871
+ children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "span", gap: 2, children: [
2865
2872
  /* @__PURE__ */ jsxRuntime.jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
2866
2873
  /* @__PURE__ */ jsxRuntime.jsx(
2867
- designSystem.Typography,
2874
+ AddComponentTitle,
2868
2875
  {
2869
2876
  variant: "pi",
2870
2877
  fontWeight: "bold",
@@ -2876,7 +2883,7 @@ const AddComponentButton = ({
2876
2883
  }
2877
2884
  );
2878
2885
  };
2879
- const StyledAddIcon = styled__default.default(Icons.PlusCircle)`
2886
+ const StyledAddIcon = styledComponents.styled(Icons.PlusCircle)`
2880
2887
  height: ${({ theme }) => theme.spaces[6]};
2881
2888
  width: ${({ theme }) => theme.spaces[6]};
2882
2889
  transform: ${({ $isOpen }) => $isOpen ? "rotate(45deg)" : "rotate(0deg)"};
@@ -2888,13 +2895,14 @@ const StyledAddIcon = styled__default.default(Icons.PlusCircle)`
2888
2895
  fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral600};
2889
2896
  }
2890
2897
  `;
2891
- const StyledButton = styled__default.default(designSystem.BaseButton)`
2898
+ const AddComponentTitle = styledComponents.styled(designSystem.Typography)``;
2899
+ const StyledButton = styledComponents.styled(designSystem.BaseButton)`
2892
2900
  border-radius: 26px;
2893
2901
  border-color: ${({ theme }) => theme.colors.neutral150};
2894
2902
  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
2895
2903
 
2896
2904
  &:hover {
2897
- ${designSystem.Typography} {
2905
+ ${AddComponentTitle} {
2898
2906
  color: ${({ theme }) => theme.colors.primary600};
2899
2907
  }
2900
2908
 
@@ -2908,7 +2916,7 @@ const StyledButton = styled__default.default(designSystem.BaseButton)`
2908
2916
  }
2909
2917
  }
2910
2918
  &:active {
2911
- ${designSystem.Typography} {
2919
+ ${AddComponentTitle} {
2912
2920
  color: ${({ theme }) => theme.colors.primary600};
2913
2921
  }
2914
2922
  ${StyledAddIcon} {
@@ -2945,7 +2953,7 @@ const ComponentCategory = ({
2945
2953
  /* @__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(
2946
2954
  ComponentBox,
2947
2955
  {
2948
- as: "button",
2956
+ tag: "button",
2949
2957
  type: "button",
2950
2958
  background: "neutral100",
2951
2959
  justifyContent: "center",
@@ -2956,25 +2964,26 @@ const ComponentCategory = ({
2956
2964
  borderColor: "neutral200",
2957
2965
  children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
2958
2966
  /* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { icon }),
2959
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral600", children: displayName })
2967
+ /* @__PURE__ */ jsxRuntime.jsx(ComponentName, { variant: "pi", fontWeight: "bold", textColor: "neutral600", children: displayName })
2960
2968
  ] })
2961
2969
  },
2962
2970
  uid
2963
2971
  )) }) }) })
2964
2972
  ] });
2965
2973
  };
2966
- const Grid = styled__default.default.div`
2974
+ const Grid = styledComponents.styled.div`
2967
2975
  display: grid;
2968
2976
  grid-template-columns: repeat(auto-fit, 14rem);
2969
2977
  grid-gap: ${({ theme }) => theme.spaces[1]};
2970
2978
  `;
2971
- const ComponentBox = styled__default.default(designSystem.Flex)`
2979
+ const ComponentName = styledComponents.styled(designSystem.Typography)``;
2980
+ const ComponentBox = styledComponents.styled(designSystem.Flex)`
2972
2981
  &:focus,
2973
2982
  &:hover {
2974
2983
  border: 1px solid ${({ theme }) => theme.colors.primary200};
2975
2984
  background: ${({ theme }) => theme.colors.primary100};
2976
2985
 
2977
- ${designSystem.Typography} {
2986
+ ${ComponentName} {
2978
2987
  color: ${({ theme }) => theme.colors.primary600};
2979
2988
  }
2980
2989
 
@@ -3062,7 +3071,7 @@ const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
3062
3071
  }
3063
3072
  );
3064
3073
  };
3065
- const StyledIcon = styled__default.default(Icons.EyeStriked)`
3074
+ const StyledIcon = styledComponents.styled(Icons.EyeStriked)`
3066
3075
  & > path {
3067
3076
  fill: ${({ theme }) => theme.colors.neutral600};
3068
3077
  }
@@ -3119,188 +3128,191 @@ const uidApi = index.contentManagerApi.injectEndpoints({
3119
3128
  });
3120
3129
  const { useGenerateUIDMutation, useGetDefaultUIDQuery, useGetAvailabilityQuery } = uidApi;
3121
3130
  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({
3131
+ const UIDInput = React__namespace.forwardRef(
3132
+ ({ hint, label, labelAction, name: name2, required, ...props }, ref) => {
3133
+ const { model, id } = index.useDoc();
3134
+ const allFormValues = strapiAdmin.useForm("InputUID", (form) => form.values);
3135
+ const [availability, setAvailability] = React__namespace.useState();
3136
+ const [showRegenerate, setShowRegenerate] = React__namespace.useState(false);
3137
+ const field = strapiAdmin.useField(name2);
3138
+ const debouncedValue = useDebounce(field.value, 300);
3139
+ const { toggleNotification } = strapiAdmin.useNotification();
3140
+ const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
3141
+ const { formatMessage } = reactIntl.useIntl();
3142
+ const [{ query }] = strapiAdmin.useQueryParams();
3143
+ const params = React__namespace.useMemo(() => index.buildValidParams(query), [query]);
3144
+ const {
3145
+ data: defaultGeneratedUID,
3146
+ isLoading: isGeneratingDefaultUID,
3147
+ error: apiError
3148
+ } = useGetDefaultUIDQuery(
3149
+ {
3169
3150
  contentTypeUID: model,
3170
- field: props.name,
3171
- data: { id: id ?? "", ...allFormValues },
3151
+ field: name2,
3152
+ data: {
3153
+ id: id ?? "",
3154
+ ...allFormValues
3155
+ },
3172
3156
  params
3173
- });
3174
- if ("data" in res) {
3175
- field.onChange(props.name, res.data);
3176
- } else {
3157
+ },
3158
+ {
3159
+ skip: field.value || !required
3160
+ }
3161
+ );
3162
+ React__namespace.useEffect(() => {
3163
+ if (apiError) {
3177
3164
  toggleNotification({
3178
- type: "danger",
3179
- message: formatAPIError(res.error)
3165
+ type: "warning",
3166
+ message: formatAPIError(apiError)
3180
3167
  });
3181
3168
  }
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);
3169
+ }, [apiError, formatAPIError, toggleNotification]);
3170
+ React__namespace.useEffect(() => {
3171
+ if (defaultGeneratedUID && field.value === void 0) {
3172
+ field.onChange(name2, defaultGeneratedUID);
3173
+ }
3174
+ }, [defaultGeneratedUID, field, name2]);
3175
+ const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
3176
+ const handleRegenerateClick = async () => {
3177
+ try {
3178
+ const res = await generateUID({
3179
+ contentTypeUID: model,
3180
+ field: name2,
3181
+ data: { id: id ?? "", ...allFormValues },
3182
+ params
3183
+ });
3184
+ if ("data" in res) {
3185
+ field.onChange(name2, res.data);
3186
+ } else {
3187
+ toggleNotification({
3188
+ type: "danger",
3189
+ message: formatAPIError(res.error)
3190
+ });
3191
+ }
3192
+ } catch (err) {
3193
+ toggleNotification({
3194
+ type: "danger",
3195
+ message: formatMessage({
3196
+ id: "notification.error",
3197
+ defaultMessage: "An error occurred."
3198
+ })
3199
+ });
3228
3200
  }
3229
3201
  };
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,
3202
+ const {
3203
+ data: availabilityData,
3204
+ isLoading: isCheckingAvailability,
3205
+ error: availabilityError
3206
+ } = useGetAvailabilityQuery(
3238
3207
  {
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,
3208
+ contentTypeUID: model,
3209
+ field: name2,
3210
+ value: debouncedValue ? debouncedValue.trim() : "",
3211
+ params
3212
+ },
3213
+ {
3214
+ skip: !Boolean(
3215
+ debouncedValue !== field.initialValue && debouncedValue && UID_REGEX.test(debouncedValue.trim())
3216
+ )
3217
+ }
3218
+ );
3219
+ React__namespace.useEffect(() => {
3220
+ if (availabilityError) {
3221
+ toggleNotification({
3222
+ type: "warning",
3223
+ message: formatAPIError(availabilityError)
3224
+ });
3225
+ }
3226
+ }, [availabilityError, formatAPIError, toggleNotification]);
3227
+ React__namespace.useEffect(() => {
3228
+ setAvailability(availabilityData);
3229
+ let timer;
3230
+ if (availabilityData?.isAvailable) {
3231
+ timer = window.setTimeout(() => {
3232
+ setAvailability(void 0);
3233
+ }, 4e3);
3234
+ }
3235
+ return () => {
3236
+ if (timer) {
3237
+ clearTimeout(timer);
3238
+ }
3239
+ };
3240
+ }, [availabilityData]);
3241
+ const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;
3242
+ const fieldRef = strapiAdmin.useFocusInputField(name2);
3243
+ const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
3244
+ return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { hint, name: name2, error: field.error, required, children: [
3245
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
3246
+ /* @__PURE__ */ jsxRuntime.jsx(
3247
+ designSystem.TextInput,
3248
+ {
3249
+ ref: composedRefs,
3250
+ disabled: props.disabled,
3251
+ endAction: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { position: "relative", gap: 1, children: [
3252
+ availability && !showRegenerate && /* @__PURE__ */ jsxRuntime.jsxs(
3253
+ TextValidation,
3283
3254
  {
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, {})
3255
+ alignItems: "center",
3256
+ gap: 1,
3257
+ justifyContent: "flex-end",
3258
+ $available: !!availability?.isAvailable,
3259
+ "data-not-here-outer": true,
3260
+ position: "absolute",
3261
+ pointerEvents: "none",
3262
+ right: 6,
3263
+ width: "100px",
3264
+ children: [
3265
+ availability?.isAvailable ? /* @__PURE__ */ jsxRuntime.jsx(Icons.CheckCircle, {}) : /* @__PURE__ */ jsxRuntime.jsx(Icons.WarningCircle, {}),
3266
+ /* @__PURE__ */ jsxRuntime.jsx(
3267
+ designSystem.Typography,
3268
+ {
3269
+ textColor: availability.isAvailable ? "success600" : "danger600",
3270
+ variant: "pi",
3271
+ children: formatMessage(
3272
+ availability.isAvailable ? {
3273
+ id: "content-manager.components.uid.available",
3274
+ defaultMessage: "Available"
3275
+ } : {
3276
+ id: "content-manager.components.uid.unavailable",
3277
+ defaultMessage: "Unavailable"
3278
+ }
3279
+ )
3280
+ }
3281
+ )
3282
+ ]
3292
3283
  }
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)`
3284
+ ),
3285
+ !props.disabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3286
+ showRegenerate && /* @__PURE__ */ jsxRuntime.jsx(TextValidation, { alignItems: "center", justifyContent: "flex-end", gap: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "primary600", variant: "pi", children: formatMessage({
3287
+ id: "content-manager.components.uid.regenerate",
3288
+ defaultMessage: "Regenerate"
3289
+ }) }) }),
3290
+ /* @__PURE__ */ jsxRuntime.jsx(
3291
+ FieldActionWrapper,
3292
+ {
3293
+ onClick: handleRegenerateClick,
3294
+ label: formatMessage({
3295
+ id: "content-manager.components.uid.regenerate",
3296
+ defaultMessage: "Regenerate"
3297
+ }),
3298
+ onMouseEnter: () => setShowRegenerate(true),
3299
+ onMouseLeave: () => setShowRegenerate(false),
3300
+ children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingWrapper, { "data-testid": "loading-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Loader, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.ArrowClockwise, {})
3301
+ }
3302
+ )
3303
+ ] })
3304
+ ] }),
3305
+ onChange: field.onChange,
3306
+ value: field.value ?? "",
3307
+ ...props
3308
+ }
3309
+ ),
3310
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {}),
3311
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
3312
+ ] });
3313
+ }
3314
+ );
3315
+ const FieldActionWrapper = styledComponents.styled(designSystem.Field.Action)`
3304
3316
  svg {
3305
3317
  height: 1.6rem;
3306
3318
  width: 1.6rem;
@@ -3315,17 +3327,17 @@ const FieldActionWrapper = styled__default.default(designSystem.FieldAction)`
3315
3327
  }
3316
3328
  }
3317
3329
  `;
3318
- const TextValidation = styled__default.default(designSystem.Flex)`
3330
+ const TextValidation = styledComponents.styled(designSystem.Flex)`
3319
3331
  svg {
3320
3332
  height: 1.2rem;
3321
3333
  width: 1.2rem;
3322
3334
 
3323
3335
  path {
3324
- fill: ${({ theme, available }) => available ? theme.colors.success600 : theme.colors.danger600};
3336
+ fill: ${({ theme, $available }) => $available ? theme.colors.success600 : theme.colors.danger600};
3325
3337
  }
3326
3338
  }
3327
3339
  `;
3328
- const rotation = styled.keyframes`
3340
+ const rotation = styledComponents.keyframes`
3329
3341
  from {
3330
3342
  transform: rotate(0deg);
3331
3343
  }
@@ -3333,7 +3345,7 @@ const rotation = styled.keyframes`
3333
3345
  transform: rotate(359deg);
3334
3346
  }
3335
3347
  `;
3336
- const LoadingWrapper = styled__default.default(designSystem.Flex)`
3348
+ const LoadingWrapper = styledComponents.styled(designSystem.Flex)`
3337
3349
  animation: ${rotation} 2s infinite linear;
3338
3350
  `;
3339
3351
  const md = new Markdown__default.default({
@@ -3378,7 +3390,7 @@ const PreviewWysiwyg = ({ data = "" }) => {
3378
3390
  );
3379
3391
  return /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: html } }) });
3380
3392
  };
3381
- const Wrapper = styled__default.default.div`
3393
+ const Wrapper = styledComponents.styled.div`
3382
3394
  position: absolute;
3383
3395
  top: 0;
3384
3396
  width: 100%;
@@ -3670,17 +3682,17 @@ const Editor = React__namespace.forwardRef(
3670
3682
  [editorRef]
3671
3683
  );
3672
3684
  return /* @__PURE__ */ jsxRuntime.jsxs(EditorAndPreviewWrapper, { children: [
3673
- /* @__PURE__ */ jsxRuntime.jsx(EditorStylesContainer, { isExpandMode, disabled: disabled || isPreviewMode, children: /* @__PURE__ */ jsxRuntime.jsx("textarea", { ref: textareaRef }) }),
3685
+ /* @__PURE__ */ jsxRuntime.jsx(EditorStylesContainer, { $isExpandMode: isExpandMode, $disabled: disabled || isPreviewMode, children: /* @__PURE__ */ jsxRuntime.jsx("textarea", { ref: textareaRef }) }),
3674
3686
  isPreviewMode && /* @__PURE__ */ jsxRuntime.jsx(PreviewWysiwyg, { data: value })
3675
3687
  ] });
3676
3688
  }
3677
3689
  );
3678
- const EditorAndPreviewWrapper = styled__default.default.div`
3690
+ const EditorAndPreviewWrapper = styledComponents.styled.div`
3679
3691
  position: relative;
3680
3692
  height: calc(100% - 48px);
3681
3693
  `;
3682
- const EditorStylesContainer = styled__default.default.div`
3683
- cursor: ${({ disabled }) => disabled ? "not-allowed !important" : "auto"};
3694
+ const EditorStylesContainer = styledComponents.styled.div`
3695
+ cursor: ${({ $disabled }) => $disabled ? "not-allowed !important" : "auto"};
3684
3696
  height: 100%;
3685
3697
  /* BASICS */
3686
3698
  .CodeMirror-placeholder {
@@ -3690,7 +3702,7 @@ const EditorStylesContainer = styled__default.default.div`
3690
3702
  .CodeMirror {
3691
3703
  /* Set height, width, borders, and global font properties here */
3692
3704
  font-size: 1.4rem;
3693
- height: ${({ isExpandMode }) => isExpandMode ? "100%" : "410px"}; // 512px(total height) - 48px (header) - 52px(footer) - 2px border
3705
+ height: ${({ $isExpandMode }) => $isExpandMode ? "100%" : "410px"}; // 512px(total height) - 48px (header) - 52px(footer) - 2px border
3694
3706
  color: ${({ theme }) => theme.colors.neutral800};
3695
3707
  direction: ltr;
3696
3708
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
@@ -4096,13 +4108,13 @@ const EditorLayout = ({
4096
4108
  }
4097
4109
  );
4098
4110
  };
4099
- const ExpandWrapper = styled__default.default(designSystem.Flex)`
4111
+ const ExpandWrapper = styledComponents.styled(designSystem.Flex)`
4100
4112
  background: ${({ theme }) => `${theme.colors.neutral800}${Math.floor(0.2 * 255).toString(16).padStart(2, "0")}`};
4101
4113
  `;
4102
- const BoxWithBorder = styled__default.default(designSystem.Box)`
4114
+ const BoxWithBorder = styledComponents.styled(designSystem.Box)`
4103
4115
  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
4104
4116
  `;
4105
- const ExpandButton$1 = styled__default.default(designSystem.BaseButton)`
4117
+ const ExpandButton$1 = styledComponents.styled(designSystem.BaseButton)`
4106
4118
  background-color: transparent;
4107
4119
  border: none;
4108
4120
  align-items: center;
@@ -4373,7 +4385,7 @@ const quoteAndCodeHandler = (editor, markdownType) => {
4373
4385
  insertWithoutTextToEdit(editor, markdownType, line, contentLength);
4374
4386
  }
4375
4387
  };
4376
- const CustomIconButton = styled__default.default(designSystem.IconButton)`
4388
+ const CustomIconButton = styledComponents.styled(designSystem.IconButton)`
4377
4389
  padding: ${({ theme }) => theme.spaces[2]};
4378
4390
  /* Trick to prevent the outline from overflowing because of the general outline-offset */
4379
4391
  outline-offset: -2px !important;
@@ -4383,16 +4395,16 @@ const CustomIconButton = styled__default.default(designSystem.IconButton)`
4383
4395
  height: 1.8rem;
4384
4396
  }
4385
4397
  `;
4386
- const CustomLinkIconButton = styled__default.default(CustomIconButton)`
4398
+ const CustomLinkIconButton = styledComponents.styled(CustomIconButton)`
4387
4399
  svg {
4388
4400
  width: 0.8rem;
4389
4401
  height: 0.8rem;
4390
4402
  }
4391
4403
  `;
4392
- const MainButtons = styled__default.default(designSystem.IconButtonGroup)`
4404
+ const MainButtons = styledComponents.styled(designSystem.IconButtonGroup)`
4393
4405
  margin-left: ${({ theme }) => theme.spaces[4]};
4394
4406
  `;
4395
- const MoreButton = styled__default.default(designSystem.IconButton)`
4407
+ const MoreButton = styledComponents.styled(designSystem.IconButton)`
4396
4408
  margin: ${({ theme }) => `0 ${theme.spaces[2]}`};
4397
4409
  padding: ${({ theme }) => theme.spaces[2]};
4398
4410
 
@@ -4401,10 +4413,10 @@ const MoreButton = styled__default.default(designSystem.IconButton)`
4401
4413
  height: 1.8rem;
4402
4414
  }
4403
4415
  `;
4404
- const IconButtonGroupMargin = styled__default.default(designSystem.IconButtonGroup)`
4416
+ const IconButtonGroupMargin = styledComponents.styled(designSystem.IconButtonGroup)`
4405
4417
  margin-right: ${({ theme }) => `${theme.spaces[2]}`};
4406
4418
  `;
4407
- const ExpandButton = styled__default.default(designSystem.BaseButton)`
4419
+ const ExpandButton = styledComponents.styled(designSystem.BaseButton)`
4408
4420
  background-color: transparent;
4409
4421
  border: none;
4410
4422
  align-items: center;
@@ -4456,15 +4468,24 @@ const WysiwygNav = ({
4456
4468
  justifyContent: "space-between",
4457
4469
  borderRadius: `0.4rem 0.4rem 0 0`,
4458
4470
  children: [
4459
- /* @__PURE__ */ jsxRuntime.jsxs(StyledFlex, { children: [
4460
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.SingleSelect, { disabled: true, placeholder: selectPlaceholder, size: "S", label: selectPlaceholder, children: [
4461
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h1", children: "h1" }),
4462
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h2", children: "h2" }),
4463
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h3", children: "h3" }),
4464
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h4", children: "h4" }),
4465
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h5", children: "h5" }),
4466
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h6", children: "h6" })
4467
- ] }),
4471
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
4472
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(
4473
+ designSystem.SingleSelect,
4474
+ {
4475
+ disabled: true,
4476
+ placeholder: selectPlaceholder,
4477
+ size: "S",
4478
+ "aria-label": selectPlaceholder,
4479
+ children: [
4480
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h1", children: "h1" }),
4481
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h2", children: "h2" }),
4482
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h3", children: "h3" }),
4483
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h4", children: "h4" }),
4484
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h5", children: "h5" }),
4485
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h6", children: "h6" })
4486
+ ]
4487
+ }
4488
+ ) }),
4468
4489
  /* @__PURE__ */ jsxRuntime.jsxs(MainButtons, { children: [
4469
4490
  /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Bold", name: "Bold", icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {}) }),
4470
4491
  /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic", icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Italic, {}) }),
@@ -4488,12 +4509,12 @@ const WysiwygNav = ({
4488
4509
  justifyContent: "space-between",
4489
4510
  borderRadius: `0.4rem 0.4rem 0 0`,
4490
4511
  children: [
4491
- /* @__PURE__ */ jsxRuntime.jsxs(StyledFlex, { children: [
4492
- /* @__PURE__ */ jsxRuntime.jsxs(
4512
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
4513
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(
4493
4514
  designSystem.SingleSelect,
4494
4515
  {
4495
4516
  placeholder: selectPlaceholder,
4496
- label: selectPlaceholder,
4517
+ "aria-label": selectPlaceholder,
4497
4518
  size: "S",
4498
4519
  onChange: (value) => onActionClick(value, editorRef),
4499
4520
  children: [
@@ -4505,7 +4526,7 @@ const WysiwygNav = ({
4505
4526
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h6", children: "h6" })
4506
4527
  ]
4507
4528
  }
4508
- ),
4529
+ ) }),
4509
4530
  /* @__PURE__ */ jsxRuntime.jsxs(MainButtons, { children: [
4510
4531
  /* @__PURE__ */ jsxRuntime.jsx(
4511
4532
  CustomIconButton,
@@ -4625,19 +4646,6 @@ const WysiwygNav = ({
4625
4646
  }
4626
4647
  );
4627
4648
  };
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
4649
  const Wysiwyg = React__namespace.forwardRef(
4642
4650
  ({ hint, disabled, label, name: name2, placeholder, required, labelAction }, forwardedRef) => {
4643
4651
  const field = strapiAdmin.useField(name2);
@@ -4702,9 +4710,9 @@ const Wysiwyg = React__namespace.forwardRef(
4702
4710
  insertFile(editorRef, formattedFiles);
4703
4711
  setMediaLibVisible(false);
4704
4712
  };
4705
- return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field, { name: name2, hint, error: field.error, required, children: [
4713
+ return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: name2, hint, error: field.error, required, children: [
4706
4714
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
4707
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldLabel, { action: labelAction, children: label }),
4715
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
4708
4716
  /* @__PURE__ */ jsxRuntime.jsxs(
4709
4717
  EditorLayout,
4710
4718
  {
@@ -4745,8 +4753,8 @@ const Wysiwyg = React__namespace.forwardRef(
4745
4753
  ]
4746
4754
  }
4747
4755
  ),
4748
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldHint, {}),
4749
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldError, {})
4756
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
4757
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
4750
4758
  ] }),
4751
4759
  mediaLibVisible && // @ts-expect-error – TODO: fix this way of injecting because it's not really typeable without a registry.
4752
4760
  /* @__PURE__ */ jsxRuntime.jsx(MediaLibraryDialog, { onClose: handleToggleMediaLib, onSelectAssets: handleSelectAssets })
@@ -4965,7 +4973,7 @@ const DynamicComponent = ({
4965
4973
  /* @__PURE__ */ jsxRuntime.jsx(
4966
4974
  designSystem.IconButton,
4967
4975
  {
4968
- forwardedAs: "div",
4976
+ tag: "div",
4969
4977
  role: "button",
4970
4978
  borderWidth: 0,
4971
4979
  tabIndex: 0,
@@ -4983,7 +4991,7 @@ const DynamicComponent = ({
4983
4991
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Root, { children: [
4984
4992
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 2, paddingRight: 2, children: [
4985
4993
  /* @__PURE__ */ jsxRuntime.jsx(Icons.More, { "aria-hidden": true, focusable: false }),
4986
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { as: "span", children: formatMessage({
4994
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { tag: "span", children: formatMessage({
4987
4995
  id: index.getTranslation("components.DynamicZone.more-actions"),
4988
4996
  defaultMessage: "More actions"
4989
4997
  }) })
@@ -5012,7 +5020,7 @@ const DynamicComponent = ({
5012
5020
  ] })
5013
5021
  ] })
5014
5022
  ] });
5015
- return /* @__PURE__ */ jsxRuntime.jsxs(ComponentContainer, { as: "li", width: "100%", children: [
5023
+ return /* @__PURE__ */ jsxRuntime.jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
5016
5024
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Rectangle, { background: "neutral200" }) }),
5017
5025
  /* @__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
5026
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -5031,7 +5039,7 @@ const DynamicComponent = ({
5031
5039
  ] }) })
5032
5040
  ] });
5033
5041
  };
5034
- const ActionsFlex = styled__default.default(designSystem.Flex)`
5042
+ const ActionsFlex = styledComponents.styled(designSystem.Flex)`
5035
5043
  /*
5036
5044
  we need to remove the background from the button but we can't
5037
5045
  wrap the element in styled because it breaks the forwardedAs which
@@ -5041,33 +5049,33 @@ const ActionsFlex = styled__default.default(designSystem.Flex)`
5041
5049
  background: transparent;
5042
5050
  }
5043
5051
  `;
5044
- const IconButtonCustom = styled__default.default(designSystem.IconButton)`
5052
+ const IconButtonCustom = styledComponents.styled(designSystem.IconButton)`
5045
5053
  background-color: transparent;
5046
5054
 
5047
- svg path {
5048
- fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : theme.colors.neutral600};
5055
+ svg {
5056
+ fill: ${({ theme }) => theme.colors.neutral600};
5049
5057
  }
5050
5058
  `;
5051
- const StyledBox = styled__default.default(designSystem.Box)`
5059
+ const StyledBox = styledComponents.styled(designSystem.Box)`
5052
5060
  > div:first-child {
5053
5061
  box-shadow: ${({ theme }) => theme.shadows.tableShadow};
5054
5062
  }
5055
5063
  `;
5056
- const AccordionContentRadius = styled__default.default(designSystem.Box)`
5064
+ const AccordionContentRadius = styledComponents.styled(designSystem.Box)`
5057
5065
  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
5058
5066
  `;
5059
- const Rectangle = styled__default.default(designSystem.Box)`
5067
+ const Rectangle = styledComponents.styled(designSystem.Box)`
5060
5068
  width: ${({ theme }) => theme.spaces[2]};
5061
5069
  height: ${({ theme }) => theme.spaces[4]};
5062
5070
  `;
5063
- const Preview = styled__default.default.span`
5071
+ const Preview = styledComponents.styled.span`
5064
5072
  display: block;
5065
5073
  background-color: ${({ theme }) => theme.colors.primary100};
5066
5074
  outline: 1px dashed ${({ theme }) => theme.colors.primary500};
5067
5075
  outline-offset: -1px;
5068
5076
  padding: ${({ theme }) => theme.spaces[6]};
5069
5077
  `;
5070
- const ComponentContainer = styled__default.default(designSystem.Box)`
5078
+ const ComponentContainer = styledComponents.styled(designSystem.Box)`
5071
5079
  list-style: none;
5072
5080
  padding: 0;
5073
5081
  margin: 0;
@@ -5349,4 +5357,4 @@ exports.transformDocument = transformDocument;
5349
5357
  exports.useDynamicZone = useDynamicZone;
5350
5358
  exports.useFieldHint = useFieldHint;
5351
5359
  exports.useLazyComponents = useLazyComponents;
5352
- //# sourceMappingURL=Field-Caef4JjM.js.map
5360
+ //# sourceMappingURL=Field-ZgzKlgxR.js.map