@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
@@ -2,14 +2,14 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
2
  import * as React from "react";
3
3
  import { useState, useEffect, useCallback } from "react";
4
4
  import { useStrapiApp, createContext, useField, useNotification, useForm, useAPIErrorHandler, useQueryParams, useFocusInputField, InputRenderer as InputRenderer$1 } from "@strapi/admin/strapi-admin";
5
- import { Typography, Flex, Box, BaseLink, Button, useComposedRefs, Popover, Field, FieldLabel, FieldInput, Tooltip, SingleSelect, SingleSelectOption, IconButton, Portal, FocusTrap, InputWrapper, Divider, VisuallyHidden, FieldHint, FieldError, Grid as Grid$1, GridItem, TextButton, KeyboardNavigable, Accordion, AccordionToggle, AccordionContent as AccordionContent$1, BaseButton, TextInput, FieldAction, IconButtonGroup, Menu, MenuItem } from "@strapi/design-system";
5
+ import { Typography, Flex, Box, BaseLink, Button, useComposedRefs, Popover, Field, Tooltip, SingleSelect, SingleSelectOption, IconButton, Portal, FocusTrap, Divider, VisuallyHidden, Grid as Grid$1, GridItem, TextButton, KeyboardNavigable, Accordion, AccordionToggle, AccordionContent as AccordionContent$1, BaseButton, TextInput, IconButtonGroup, Menu, MenuItem } from "@strapi/design-system";
6
6
  import pipe$1 from "lodash/fp/pipe";
7
7
  import { useIntl } from "react-intl";
8
- import { l as DOCUMENT_META_FIELDS, g as getTranslation, b as useDoc, d as contentManagerApi, c as buildValidParams, e as useDocumentRBAC, m as useDocLayout } from "./index-DNVx8ssZ.mjs";
8
+ import { l as DOCUMENT_META_FIELDS, g as getTranslation, b as useDoc, d as contentManagerApi, c as buildValidParams, e as useDocumentRBAC, m as useDocLayout } from "./index-B3c-4it4.mjs";
9
9
  import { generateNKeysBetween } from "fractional-indexing";
10
- import { u as useComponent, C as ComponentProvider, R as RelationsField } from "./Relations-CY7AtkDA.mjs";
10
+ import { u as useComponent, C as ComponentProvider, R as RelationsField } from "./Relations-DZyjWZHl.mjs";
11
11
  import { Code, HeadingOne, HeadingTwo, HeadingThree, HeadingFour, HeadingFive, HeadingSix, Image as Image$1, NumberList, BulletList, Paragraph, Quotes, Link as Link$1, Drag, Collapse, Bold, Italic, Underline, StrikeThrough, Expand, PlusCircle, Plus, Trash, EyeStriked, CheckCircle, WarningCircle, Loader, ArrowClockwise, More } from "@strapi/icons";
12
- import styled, { css, keyframes } from "styled-components";
12
+ import { styled, css, keyframes } from "styled-components";
13
13
  import { C as ComponentIcon } from "./ComponentIcon-BOFnK76n.mjs";
14
14
  import { getEmptyImage } from "react-dnd-html5-backend";
15
15
  import { a as DIRECTIONS, u as useDragAndDrop, I as ItemTypes } from "./useDragAndDrop-DdHgKsqq.mjs";
@@ -258,27 +258,27 @@ const codeBlocks = {
258
258
  dragHandleTopMargin: "10px"
259
259
  }
260
260
  };
261
- const H1 = styled(Typography).attrs({ as: "h1" })`
261
+ const H1 = styled(Typography).attrs({ tag: "h1" })`
262
262
  font-size: 4.2rem;
263
263
  line-height: ${({ theme }) => theme.lineHeights[1]};
264
264
  `;
265
- const H2 = styled(Typography).attrs({ as: "h2" })`
265
+ const H2 = styled(Typography).attrs({ tag: "h2" })`
266
266
  font-size: 3.5rem;
267
267
  line-height: ${({ theme }) => theme.lineHeights[1]};
268
268
  `;
269
- const H3 = styled(Typography).attrs({ as: "h3" })`
269
+ const H3 = styled(Typography).attrs({ tag: "h3" })`
270
270
  font-size: 2.9rem;
271
271
  line-height: ${({ theme }) => theme.lineHeights[1]};
272
272
  `;
273
- const H4 = styled(Typography).attrs({ as: "h4" })`
273
+ const H4 = styled(Typography).attrs({ tag: "h4" })`
274
274
  font-size: 2.4rem;
275
275
  line-height: ${({ theme }) => theme.lineHeights[1]};
276
276
  `;
277
- const H5 = styled(Typography).attrs({ as: "h5" })`
277
+ const H5 = styled(Typography).attrs({ tag: "h5" })`
278
278
  font-size: 2rem;
279
279
  line-height: ${({ theme }) => theme.lineHeights[1]};
280
280
  `;
281
- const H6 = styled(Typography).attrs({ as: "h6" })`
281
+ const H6 = styled(Typography).attrs({ tag: "h6" })`
282
282
  font-size: 1.6rem;
283
283
  line-height: ${({ theme }) => theme.lineHeights[1]};
284
284
  `;
@@ -367,7 +367,7 @@ const headingBlocks = {
367
367
  const ImageWrapper = styled(Flex)`
368
368
  transition-property: box-shadow;
369
369
  transition-duration: 0.2s;
370
- ${(props) => props.isFocused && css`
370
+ ${(props) => props.$isFocused && css`
371
371
  box-shadow: ${props.theme.colors.primary600} 0px 0px 0px 3px;
372
372
  `}
373
373
 
@@ -419,7 +419,7 @@ const Image = ({ attributes, children, element }) => {
419
419
  background: "neutral100",
420
420
  contentEditable: false,
421
421
  justifyContent: "center",
422
- isFocused: editorIsFocused && imageIsSelected,
422
+ $isFocused: editorIsFocused && imageIsSelected,
423
423
  hasRadius: true,
424
424
  children: /* @__PURE__ */ jsx("img", { src: url, alt: alternativeText, width, height })
425
425
  }
@@ -579,7 +579,7 @@ const StyledBaseLink = styled(BaseLink)`
579
579
  text-decoration: none;
580
580
  `;
581
581
  const RemoveButton = styled(Button)`
582
- visibility: ${(props) => props.visible ? "visible" : "hidden"};
582
+ visibility: ${(props) => props.$visible ? "visible" : "hidden"};
583
583
  `;
584
584
  const LinkContent = React.forwardRef(
585
585
  ({ link, children, attributes }, forwardedRef) => {
@@ -647,14 +647,14 @@ const LinkContent = React.forwardRef(
647
647
  children
648
648
  }
649
649
  ),
650
- popoverOpen && /* @__PURE__ */ jsx(Popover, { source: linkRef, onDismiss: handleDismiss, padding: 4, contentEditable: false, children: /* @__PURE__ */ jsxs(Flex, { as: "form", onSubmit: handleSave, direction: "column", gap: 4, children: [
651
- /* @__PURE__ */ jsx(Field, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
652
- /* @__PURE__ */ jsx(FieldLabel, { children: formatMessage({
650
+ popoverOpen && /* @__PURE__ */ jsx(Popover, { source: linkRef, onDismiss: handleDismiss, padding: 4, contentEditable: false, children: /* @__PURE__ */ jsxs(Flex, { tag: "form", onSubmit: handleSave, direction: "column", gap: 4, children: [
651
+ /* @__PURE__ */ jsx(Field.Root, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
652
+ /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
653
653
  id: "components.Blocks.popover.text",
654
654
  defaultMessage: "Text"
655
655
  }) }),
656
656
  /* @__PURE__ */ jsx(
657
- FieldInput,
657
+ Field.Input,
658
658
  {
659
659
  name: "text",
660
660
  placeholder: formatMessage({
@@ -668,13 +668,13 @@ const LinkContent = React.forwardRef(
668
668
  }
669
669
  )
670
670
  ] }) }),
671
- /* @__PURE__ */ jsx(Field, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
672
- /* @__PURE__ */ jsx(FieldLabel, { children: formatMessage({
671
+ /* @__PURE__ */ jsx(Field.Root, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
672
+ /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
673
673
  id: "components.Blocks.popover.link",
674
674
  defaultMessage: "Link"
675
675
  }) }),
676
676
  /* @__PURE__ */ jsx(
677
- FieldInput,
677
+ Field.Input,
678
678
  {
679
679
  ref: linkInputRef,
680
680
  name: "url",
@@ -693,7 +693,7 @@ const LinkContent = React.forwardRef(
693
693
  {
694
694
  variant: "danger-light",
695
695
  onClick: () => removeLink(editor),
696
- visible: showRemoveButton,
696
+ $visible: showRemoveButton,
697
697
  children: formatMessage({
698
698
  id: "components.Blocks.popover.remove",
699
699
  defaultMessage: "Remove"
@@ -748,11 +748,11 @@ const listStyle = css`
748
748
  }
749
749
  `;
750
750
  const Orderedlist = styled.ol`
751
- list-style-type: ${(props) => props.listStyleType};
751
+ list-style-type: ${(props) => props.$listStyleType};
752
752
  ${listStyle}
753
753
  `;
754
754
  const Unorderedlist = styled.ul`
755
- list-style-type: ${(props) => props.listStyleType};
755
+ list-style-type: ${(props) => props.$listStyleType};
756
756
  ${listStyle}
757
757
  `;
758
758
  const orderedStyles = ["decimal", "lower-alpha", "upper-roman"];
@@ -765,9 +765,9 @@ const List = ({ attributes, children, element }) => {
765
765
  const nextIndex = (element.indentLevel || 0) % listStyles.length;
766
766
  const listStyleType = listStyles[nextIndex];
767
767
  if (element.format === "ordered") {
768
- return /* @__PURE__ */ jsx(Orderedlist, { listStyleType, ...attributes, children });
768
+ return /* @__PURE__ */ jsx(Orderedlist, { $listStyleType: listStyleType, ...attributes, children });
769
769
  }
770
- return /* @__PURE__ */ jsx(Unorderedlist, { listStyleType, ...attributes, children });
770
+ return /* @__PURE__ */ jsx(Unorderedlist, { $listStyleType: listStyleType, ...attributes, children });
771
771
  };
772
772
  const replaceListWithEmptyBlock = (editor, currentListPath) => {
773
773
  Transforms.removeNodes(editor, { at: currentListPath });
@@ -964,7 +964,7 @@ const listBlocks = {
964
964
  snippets: ["-", "*", "+"]
965
965
  },
966
966
  "list-item": {
967
- renderElement: (props) => /* @__PURE__ */ jsx(Typography, { as: "li", ...props.attributes, children: props.children }),
967
+ renderElement: (props) => /* @__PURE__ */ jsx(Typography, { tag: "li", ...props.attributes, children: props.children }),
968
968
  // No handleConvert, list items are created when converting to the parent list
969
969
  matchNode: (node) => node.type === "list-item",
970
970
  isInBlocksSelector: false,
@@ -973,7 +973,7 @@ const listBlocks = {
973
973
  };
974
974
  const paragraphBlocks = {
975
975
  paragraph: {
976
- renderElement: (props) => /* @__PURE__ */ jsx(Typography, { as: "p", variant: "omega", ...props.attributes, children: props.children }),
976
+ renderElement: (props) => /* @__PURE__ */ jsx(Typography, { tag: "p", variant: "omega", ...props.attributes, children: props.children }),
977
977
  icon: Paragraph,
978
978
  label: {
979
979
  id: "components.Blocks.blocks.text",
@@ -1139,7 +1139,7 @@ const ToolbarButton = ({
1139
1139
  children: /* @__PURE__ */ jsx(
1140
1140
  FlexButton,
1141
1141
  {
1142
- as: "button",
1142
+ tag: "button",
1143
1143
  background: isActive ? "primary100" : "",
1144
1144
  alignItems: "center",
1145
1145
  justifyContent: "center",
@@ -1460,7 +1460,7 @@ const DragItem = styled(Flex)`
1460
1460
 
1461
1461
  // Set the visibility of drag button
1462
1462
  [role='button'] {
1463
- visibility: ${(props) => props.dragVisibility};
1463
+ visibility: ${(props) => props.$dragVisibility};
1464
1464
  opacity: inherit;
1465
1465
  }
1466
1466
  &[aria-disabled='true'] {
@@ -1477,7 +1477,7 @@ const DragIconButton = styled(IconButton)`
1477
1477
  visibility: hidden;
1478
1478
  cursor: grab;
1479
1479
  opacity: inherit;
1480
- margin-top: ${(props) => props.dragHandleTopMargin ?? 0};
1480
+ margin-top: ${(props) => props.$dragHandleTopMargin ?? 0};
1481
1481
 
1482
1482
  &:hover {
1483
1483
  background: ${({ theme }) => theme.colors.neutral200};
@@ -1552,7 +1552,7 @@ const DragAndDropElement = ({
1552
1552
  React.useEffect(() => {
1553
1553
  setDragVisibility("hidden");
1554
1554
  }, [editor.selection]);
1555
- return /* @__PURE__ */ jsxs(Wrapper$1, { ref: (ref) => composedBoxRefs(ref), isOverDropTarget, children: [
1555
+ return /* @__PURE__ */ jsxs(Wrapper$1, { ref: composedBoxRefs, isOverDropTarget, children: [
1556
1556
  isOverDropTarget && /* @__PURE__ */ jsx(
1557
1557
  DropPlaceholder,
1558
1558
  {
@@ -1590,12 +1590,12 @@ const DragAndDropElement = ({
1590
1590
  onSelect: () => setDragVisibility("visible"),
1591
1591
  onMouseLeave: () => setDragVisibility("hidden"),
1592
1592
  "aria-disabled": disabled,
1593
- dragVisibility,
1593
+ $dragVisibility: dragVisibility,
1594
1594
  children: [
1595
1595
  /* @__PURE__ */ jsx(
1596
1596
  DragIconButton,
1597
1597
  {
1598
- forwardedAs: "div",
1598
+ tag: "div",
1599
1599
  role: "button",
1600
1600
  tabIndex: 0,
1601
1601
  "aria-label": formatMessage({
@@ -1606,7 +1606,7 @@ const DragAndDropElement = ({
1606
1606
  "aria-disabled": disabled,
1607
1607
  disabled,
1608
1608
  draggable: true,
1609
- dragHandleTopMargin,
1609
+ $dragHandleTopMargin: dragHandleTopMargin,
1610
1610
  children: /* @__PURE__ */ jsx(Drag, { color: "neutral600" })
1611
1611
  }
1612
1612
  ),
@@ -1618,17 +1618,17 @@ const DragAndDropElement = ({
1618
1618
  };
1619
1619
  const CloneDragItem = ({ children, dragHandleTopMargin }) => {
1620
1620
  const { formatMessage } = useIntl();
1621
- return /* @__PURE__ */ jsxs(DragItem, { gap: 2, paddingLeft: 2, alignItems: "start", dragVisibility: "visible", children: [
1621
+ return /* @__PURE__ */ jsxs(DragItem, { gap: 2, paddingLeft: 2, alignItems: "start", $dragVisibility: "visible", children: [
1622
1622
  /* @__PURE__ */ jsx(
1623
1623
  DragIconButton,
1624
1624
  {
1625
- forwardedAs: "div",
1625
+ tag: "div",
1626
1626
  role: "button",
1627
1627
  "aria-label": formatMessage({
1628
1628
  id: getTranslation("components.DragHandle-label"),
1629
1629
  defaultMessage: "Drag"
1630
1630
  }),
1631
- dragHandleTopMargin,
1631
+ $dragHandleTopMargin: dragHandleTopMargin,
1632
1632
  children: /* @__PURE__ */ jsx(Drag, { color: "neutral600" })
1633
1633
  }
1634
1634
  ),
@@ -1950,8 +1950,8 @@ const EditorLayout$1 = ({
1950
1950
  direction: "column",
1951
1951
  alignItems: "flex-start",
1952
1952
  height: "512px",
1953
- disabled,
1954
- hasError: Boolean(error),
1953
+ $disabled: disabled,
1954
+ $hasError: Boolean(error),
1955
1955
  style: { overflow: "hidden" },
1956
1956
  "aria-describedby": ariaDescriptionId,
1957
1957
  position: "relative",
@@ -1959,6 +1959,29 @@ const EditorLayout$1 = ({
1959
1959
  }
1960
1960
  );
1961
1961
  };
1962
+ const InputWrapper = styled(Flex)`
1963
+ border: 1px solid
1964
+ ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
1965
+ border-radius: ${({ theme }) => theme.borderRadius};
1966
+ background: ${({ theme }) => theme.colors.neutral0};
1967
+
1968
+ ${({ theme, $hasError = false }) => css`
1969
+ outline: none;
1970
+ box-shadow: 0;
1971
+ transition-property: border-color, box-shadow, fill;
1972
+ transition-duration: 0.2s;
1973
+
1974
+ &:focus-within {
1975
+ border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};
1976
+ box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;
1977
+ }
1978
+ `}
1979
+
1980
+ ${({ theme, $disabled }) => $disabled ? css`
1981
+ color: ${theme.colors.neutral600};
1982
+ background: ${theme.colors.neutral150};
1983
+ ` : void 0}
1984
+ `;
1962
1985
  const stylesToInherit = css`
1963
1986
  font-size: inherit;
1964
1987
  color: inherit;
@@ -1971,10 +1994,14 @@ const ItalicText = styled(Typography)`
1971
1994
  font-style: italic;
1972
1995
  ${stylesToInherit}
1973
1996
  `;
1974
- const UnderlineText = styled(Typography).attrs({ textDecoration: "underline" })`
1997
+ const UnderlineText = styled(Typography).attrs({
1998
+ textDecoration: "underline"
1999
+ })`
1975
2000
  ${stylesToInherit}
1976
2001
  `;
1977
- const StrikeThroughText = styled(Typography).attrs({ textDecoration: "line-through" })`
2002
+ const StrikeThroughText = styled(Typography).attrs({
2003
+ textDecoration: "line-through"
2004
+ })`
1978
2005
  ${stylesToInherit}
1979
2006
  `;
1980
2007
  const InlineCode = styled.code`
@@ -2265,8 +2292,8 @@ const BlocksInput = React.forwardRef(
2265
2292
  ({ label, name: name2, required = false, hint, labelAction, ...editorProps }, forwardedRef) => {
2266
2293
  const id = React.useId();
2267
2294
  const field = useField(name2);
2268
- return /* @__PURE__ */ jsx(Field, { id, name: name2, hint, error: field.error, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
2269
- /* @__PURE__ */ jsx(FieldLabel, { action: labelAction, children: label }),
2295
+ return /* @__PURE__ */ jsx(Field.Root, { id, name: name2, hint, error: field.error, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
2296
+ /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
2270
2297
  /* @__PURE__ */ jsx(
2271
2298
  BlocksEditor,
2272
2299
  {
@@ -2279,8 +2306,8 @@ const BlocksInput = React.forwardRef(
2279
2306
  ...editorProps
2280
2307
  }
2281
2308
  ),
2282
- /* @__PURE__ */ jsx(FieldHint, {}),
2283
- /* @__PURE__ */ jsx(FieldError, {})
2309
+ /* @__PURE__ */ jsx(Field.Hint, {}),
2310
+ /* @__PURE__ */ jsx(Field.Error, {})
2284
2311
  ] }) });
2285
2312
  }
2286
2313
  );
@@ -2311,7 +2338,7 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
2311
2338
  /* @__PURE__ */ jsx(
2312
2339
  Box,
2313
2340
  {
2314
- as: "button",
2341
+ tag: "button",
2315
2342
  background: "neutral100",
2316
2343
  borderColor: field.error ? "danger600" : "neutral200",
2317
2344
  hasRadius: true,
@@ -2606,38 +2633,19 @@ const AccordionGroup = ({ children, error }) => {
2606
2633
  };
2607
2634
  const CustomIconButton$1 = styled(IconButton)`
2608
2635
  background-color: transparent;
2609
-
2610
- svg {
2611
- path {
2612
- fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : theme.colors.neutral600};
2613
- }
2614
- }
2636
+ color: ${({ theme, $expanded }) => $expanded ? theme.colors.primary600 : theme.colors.neutral600};
2615
2637
 
2616
2638
  &:hover {
2617
- svg {
2618
- path {
2619
- fill: ${({ theme }) => theme.colors.primary600};
2620
- }
2621
- }
2639
+ color: ${({ theme }) => theme.colors.primary600};
2622
2640
  }
2623
2641
  `;
2624
2642
  const ActionsFlex$1 = styled(Flex)`
2625
2643
  & .drag-handle {
2626
2644
  background: unset;
2627
-
2628
- svg {
2629
- path {
2630
- fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : void 0};
2631
- }
2632
- }
2645
+ color: ${({ theme, $expanded }) => $expanded ? theme.colors.primary600 : void 0};
2633
2646
 
2634
2647
  &:hover {
2635
- svg {
2636
- path {
2637
- /* keeps the hover style of the accordion */
2638
- fill: ${({ theme }) => theme.colors.primary600};
2639
- }
2640
- }
2648
+ color: ${({ theme }) => theme.colors.primary600};
2641
2649
  }
2642
2650
  }
2643
2651
  `;
@@ -2679,15 +2687,15 @@ const Component = ({
2679
2687
  }, [dragPreviewRef, index]);
2680
2688
  const composedAccordionRefs = useComposedRefs(accordionRef, dragRef);
2681
2689
  const composedBoxRefs = useComposedRefs(boxRef, dropRef);
2682
- return /* @__PURE__ */ jsx(Box, { ref: (ref) => composedBoxRefs(ref), children: isDragging ? /* @__PURE__ */ jsx(Preview$1, {}) : /* @__PURE__ */ jsxs(Accordion, { expanded: isOpen, onToggle: onClickToggle, id: name2, size: "S", children: [
2690
+ return /* @__PURE__ */ jsx(Box, { ref: composedBoxRefs, children: isDragging ? /* @__PURE__ */ jsx(Preview$1, {}) : /* @__PURE__ */ jsxs(Accordion, { expanded: isOpen, onToggle: onClickToggle, id: name2, size: "S", children: [
2683
2691
  /* @__PURE__ */ jsx(
2684
2692
  AccordionToggle,
2685
2693
  {
2686
- action: disabled ? null : /* @__PURE__ */ jsxs(ActionsFlex$1, { gap: 0, expanded: isOpen, children: [
2694
+ action: disabled ? null : /* @__PURE__ */ jsxs(ActionsFlex$1, { gap: 0, $expanded: isOpen, children: [
2687
2695
  /* @__PURE__ */ jsx(
2688
2696
  CustomIconButton$1,
2689
2697
  {
2690
- expanded: isOpen,
2698
+ $expanded: isOpen,
2691
2699
  borderWidth: 0,
2692
2700
  onClick: onDeleteComponent,
2693
2701
  label: formatMessage({
@@ -2702,7 +2710,7 @@ const Component = ({
2702
2710
  {
2703
2711
  className: "drag-handle",
2704
2712
  ref: composedAccordionRefs,
2705
- forwardedAs: "div",
2713
+ tag: "div",
2706
2714
  role: "button",
2707
2715
  borderWidth: 0,
2708
2716
  tabIndex: 0,
@@ -2735,7 +2743,7 @@ const Component = ({
2735
2743
  ] }) });
2736
2744
  };
2737
2745
  const Preview$1 = () => {
2738
- return /* @__PURE__ */ jsx(StyledSpan, { as: "span", padding: 6, background: "primary100" });
2746
+ return /* @__PURE__ */ jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
2739
2747
  };
2740
2748
  const StyledSpan = styled(Box)`
2741
2749
  display: block;
@@ -2771,7 +2779,7 @@ const ComponentInput = ({
2771
2779
  htmlFor: name2,
2772
2780
  variant: "pi",
2773
2781
  fontWeight: "bold",
2774
- as: "label",
2782
+ tag: "label",
2775
2783
  children: [
2776
2784
  label,
2777
2785
  attribute.repeatable && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -2826,10 +2834,10 @@ const AddComponentButton = ({
2826
2834
  paddingLeft: 4,
2827
2835
  paddingRight: 4,
2828
2836
  style: { cursor: isDisabled ? "not-allowed" : "pointer" },
2829
- children: /* @__PURE__ */ jsxs(Flex, { as: "span", gap: 2, children: [
2837
+ children: /* @__PURE__ */ jsxs(Flex, { tag: "span", gap: 2, children: [
2830
2838
  /* @__PURE__ */ jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
2831
2839
  /* @__PURE__ */ jsx(
2832
- Typography,
2840
+ AddComponentTitle,
2833
2841
  {
2834
2842
  variant: "pi",
2835
2843
  fontWeight: "bold",
@@ -2853,13 +2861,14 @@ const StyledAddIcon = styled(PlusCircle)`
2853
2861
  fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral600};
2854
2862
  }
2855
2863
  `;
2864
+ const AddComponentTitle = styled(Typography)``;
2856
2865
  const StyledButton = styled(BaseButton)`
2857
2866
  border-radius: 26px;
2858
2867
  border-color: ${({ theme }) => theme.colors.neutral150};
2859
2868
  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
2860
2869
 
2861
2870
  &:hover {
2862
- ${Typography} {
2871
+ ${AddComponentTitle} {
2863
2872
  color: ${({ theme }) => theme.colors.primary600};
2864
2873
  }
2865
2874
 
@@ -2873,7 +2882,7 @@ const StyledButton = styled(BaseButton)`
2873
2882
  }
2874
2883
  }
2875
2884
  &:active {
2876
- ${Typography} {
2885
+ ${AddComponentTitle} {
2877
2886
  color: ${({ theme }) => theme.colors.primary600};
2878
2887
  }
2879
2888
  ${StyledAddIcon} {
@@ -2910,7 +2919,7 @@ const ComponentCategory = ({
2910
2919
  /* @__PURE__ */ jsx(AccordionContent$1, { children: /* @__PURE__ */ jsx(Box, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: /* @__PURE__ */ jsx(Grid, { children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsx(
2911
2920
  ComponentBox,
2912
2921
  {
2913
- as: "button",
2922
+ tag: "button",
2914
2923
  type: "button",
2915
2924
  background: "neutral100",
2916
2925
  justifyContent: "center",
@@ -2921,7 +2930,7 @@ const ComponentCategory = ({
2921
2930
  borderColor: "neutral200",
2922
2931
  children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
2923
2932
  /* @__PURE__ */ jsx(ComponentIcon, { icon }),
2924
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral600", children: displayName })
2933
+ /* @__PURE__ */ jsx(ComponentName, { variant: "pi", fontWeight: "bold", textColor: "neutral600", children: displayName })
2925
2934
  ] })
2926
2935
  },
2927
2936
  uid
@@ -2933,13 +2942,14 @@ const Grid = styled.div`
2933
2942
  grid-template-columns: repeat(auto-fit, 14rem);
2934
2943
  grid-gap: ${({ theme }) => theme.spaces[1]};
2935
2944
  `;
2945
+ const ComponentName = styled(Typography)``;
2936
2946
  const ComponentBox = styled(Flex)`
2937
2947
  &:focus,
2938
2948
  &:hover {
2939
2949
  border: 1px solid ${({ theme }) => theme.colors.primary200};
2940
2950
  background: ${({ theme }) => theme.colors.primary100};
2941
2951
 
2942
- ${Typography} {
2952
+ ${ComponentName} {
2943
2953
  color: ${({ theme }) => theme.colors.primary600};
2944
2954
  }
2945
2955
 
@@ -3084,188 +3094,191 @@ const uidApi = contentManagerApi.injectEndpoints({
3084
3094
  });
3085
3095
  const { useGenerateUIDMutation, useGetDefaultUIDQuery, useGetAvailabilityQuery } = uidApi;
3086
3096
  const UID_REGEX = /^[A-Za-z0-9-_.~]*$/;
3087
- const UIDInput = React.forwardRef((props, ref) => {
3088
- const { model, id } = useDoc();
3089
- const allFormValues = useForm("InputUID", (form) => form.values);
3090
- const [availability, setAvailability] = React.useState();
3091
- const [showRegenerate, setShowRegenerate] = React.useState(false);
3092
- const field = useField(props.name);
3093
- const debouncedValue = useDebounce(field.value, 300);
3094
- const { toggleNotification } = useNotification();
3095
- const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
3096
- const { formatMessage } = useIntl();
3097
- const [{ query }] = useQueryParams();
3098
- const params = React.useMemo(() => buildValidParams(query), [query]);
3099
- const {
3100
- data: defaultGeneratedUID,
3101
- isLoading: isGeneratingDefaultUID,
3102
- error: apiError
3103
- } = useGetDefaultUIDQuery(
3104
- {
3105
- contentTypeUID: model,
3106
- field: props.name,
3107
- data: {
3108
- id: id ?? "",
3109
- ...allFormValues
3110
- },
3111
- params
3112
- },
3113
- {
3114
- skip: field.value || !props.required
3115
- }
3116
- );
3117
- React.useEffect(() => {
3118
- if (apiError) {
3119
- toggleNotification({
3120
- type: "warning",
3121
- message: formatAPIError(apiError)
3122
- });
3123
- }
3124
- }, [apiError, formatAPIError, toggleNotification]);
3125
- React.useEffect(() => {
3126
- if (defaultGeneratedUID && field.value === void 0) {
3127
- field.onChange(props.name, defaultGeneratedUID);
3128
- }
3129
- }, [defaultGeneratedUID, field, props.name]);
3130
- const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
3131
- const handleRegenerateClick = async () => {
3132
- try {
3133
- const res = await generateUID({
3097
+ const UIDInput = React.forwardRef(
3098
+ ({ hint, label, labelAction, name: name2, required, ...props }, ref) => {
3099
+ const { model, id } = useDoc();
3100
+ const allFormValues = useForm("InputUID", (form) => form.values);
3101
+ const [availability, setAvailability] = React.useState();
3102
+ const [showRegenerate, setShowRegenerate] = React.useState(false);
3103
+ const field = useField(name2);
3104
+ const debouncedValue = useDebounce(field.value, 300);
3105
+ const { toggleNotification } = useNotification();
3106
+ const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
3107
+ const { formatMessage } = useIntl();
3108
+ const [{ query }] = useQueryParams();
3109
+ const params = React.useMemo(() => buildValidParams(query), [query]);
3110
+ const {
3111
+ data: defaultGeneratedUID,
3112
+ isLoading: isGeneratingDefaultUID,
3113
+ error: apiError
3114
+ } = useGetDefaultUIDQuery(
3115
+ {
3134
3116
  contentTypeUID: model,
3135
- field: props.name,
3136
- data: { id: id ?? "", ...allFormValues },
3117
+ field: name2,
3118
+ data: {
3119
+ id: id ?? "",
3120
+ ...allFormValues
3121
+ },
3137
3122
  params
3138
- });
3139
- if ("data" in res) {
3140
- field.onChange(props.name, res.data);
3141
- } else {
3123
+ },
3124
+ {
3125
+ skip: field.value || !required
3126
+ }
3127
+ );
3128
+ React.useEffect(() => {
3129
+ if (apiError) {
3142
3130
  toggleNotification({
3143
- type: "danger",
3144
- message: formatAPIError(res.error)
3131
+ type: "warning",
3132
+ message: formatAPIError(apiError)
3145
3133
  });
3146
3134
  }
3147
- } catch (err) {
3148
- toggleNotification({
3149
- type: "danger",
3150
- message: formatMessage({
3151
- id: "notification.error",
3152
- defaultMessage: "An error occurred."
3153
- })
3154
- });
3155
- }
3156
- };
3157
- const {
3158
- data: availabilityData,
3159
- isLoading: isCheckingAvailability,
3160
- error: availabilityError
3161
- } = useGetAvailabilityQuery(
3162
- {
3163
- contentTypeUID: model,
3164
- field: props.name,
3165
- value: debouncedValue ? debouncedValue.trim() : "",
3166
- params
3167
- },
3168
- {
3169
- skip: !Boolean(
3170
- debouncedValue !== field.initialValue && debouncedValue && UID_REGEX.test(debouncedValue.trim())
3171
- )
3172
- }
3173
- );
3174
- React.useEffect(() => {
3175
- if (availabilityError) {
3176
- toggleNotification({
3177
- type: "warning",
3178
- message: formatAPIError(availabilityError)
3179
- });
3180
- }
3181
- }, [availabilityError, formatAPIError, toggleNotification]);
3182
- React.useEffect(() => {
3183
- setAvailability(availabilityData);
3184
- let timer;
3185
- if (availabilityData?.isAvailable) {
3186
- timer = window.setTimeout(() => {
3187
- setAvailability(void 0);
3188
- }, 4e3);
3189
- }
3190
- return () => {
3191
- if (timer) {
3192
- clearTimeout(timer);
3135
+ }, [apiError, formatAPIError, toggleNotification]);
3136
+ React.useEffect(() => {
3137
+ if (defaultGeneratedUID && field.value === void 0) {
3138
+ field.onChange(name2, defaultGeneratedUID);
3139
+ }
3140
+ }, [defaultGeneratedUID, field, name2]);
3141
+ const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
3142
+ const handleRegenerateClick = async () => {
3143
+ try {
3144
+ const res = await generateUID({
3145
+ contentTypeUID: model,
3146
+ field: name2,
3147
+ data: { id: id ?? "", ...allFormValues },
3148
+ params
3149
+ });
3150
+ if ("data" in res) {
3151
+ field.onChange(name2, res.data);
3152
+ } else {
3153
+ toggleNotification({
3154
+ type: "danger",
3155
+ message: formatAPIError(res.error)
3156
+ });
3157
+ }
3158
+ } catch (err) {
3159
+ toggleNotification({
3160
+ type: "danger",
3161
+ message: formatMessage({
3162
+ id: "notification.error",
3163
+ defaultMessage: "An error occurred."
3164
+ })
3165
+ });
3193
3166
  }
3194
3167
  };
3195
- }, [availabilityData]);
3196
- const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;
3197
- const fieldRef = useFocusInputField(props.name);
3198
- const composedRefs = useComposedRefs(ref, fieldRef);
3199
- return (
3200
- // @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
3201
- /* @__PURE__ */ jsx(
3202
- TextInput,
3168
+ const {
3169
+ data: availabilityData,
3170
+ isLoading: isCheckingAvailability,
3171
+ error: availabilityError
3172
+ } = useGetAvailabilityQuery(
3203
3173
  {
3204
- ref: composedRefs,
3205
- disabled: props.disabled,
3206
- error: field.error,
3207
- endAction: /* @__PURE__ */ jsxs(Flex, { position: "relative", gap: 1, children: [
3208
- availability && !showRegenerate && /* @__PURE__ */ jsxs(
3209
- TextValidation,
3210
- {
3211
- alignItems: "center",
3212
- gap: 1,
3213
- justifyContent: "flex-end",
3214
- available: !!availability?.isAvailable,
3215
- "data-not-here-outer": true,
3216
- position: "absolute",
3217
- pointerEvents: "none",
3218
- right: 6,
3219
- width: "100px",
3220
- children: [
3221
- availability?.isAvailable ? /* @__PURE__ */ jsx(CheckCircle, {}) : /* @__PURE__ */ jsx(WarningCircle, {}),
3222
- /* @__PURE__ */ jsx(
3223
- Typography,
3224
- {
3225
- textColor: availability.isAvailable ? "success600" : "danger600",
3226
- variant: "pi",
3227
- children: formatMessage(
3228
- availability.isAvailable ? {
3229
- id: "content-manager.components.uid.available",
3230
- defaultMessage: "Available"
3231
- } : {
3232
- id: "content-manager.components.uid.unavailable",
3233
- defaultMessage: "Unavailable"
3234
- }
3235
- )
3236
- }
3237
- )
3238
- ]
3239
- }
3240
- ),
3241
- !props.disabled && /* @__PURE__ */ jsxs(Fragment, { children: [
3242
- showRegenerate && /* @__PURE__ */ jsx(TextValidation, { alignItems: "center", justifyContent: "flex-end", gap: 1, children: /* @__PURE__ */ jsx(Typography, { textColor: "primary600", variant: "pi", children: formatMessage({
3243
- id: "content-manager.components.uid.regenerate",
3244
- defaultMessage: "Regenerate"
3245
- }) }) }),
3246
- /* @__PURE__ */ jsx(
3247
- FieldActionWrapper,
3174
+ contentTypeUID: model,
3175
+ field: name2,
3176
+ value: debouncedValue ? debouncedValue.trim() : "",
3177
+ params
3178
+ },
3179
+ {
3180
+ skip: !Boolean(
3181
+ debouncedValue !== field.initialValue && debouncedValue && UID_REGEX.test(debouncedValue.trim())
3182
+ )
3183
+ }
3184
+ );
3185
+ React.useEffect(() => {
3186
+ if (availabilityError) {
3187
+ toggleNotification({
3188
+ type: "warning",
3189
+ message: formatAPIError(availabilityError)
3190
+ });
3191
+ }
3192
+ }, [availabilityError, formatAPIError, toggleNotification]);
3193
+ React.useEffect(() => {
3194
+ setAvailability(availabilityData);
3195
+ let timer;
3196
+ if (availabilityData?.isAvailable) {
3197
+ timer = window.setTimeout(() => {
3198
+ setAvailability(void 0);
3199
+ }, 4e3);
3200
+ }
3201
+ return () => {
3202
+ if (timer) {
3203
+ clearTimeout(timer);
3204
+ }
3205
+ };
3206
+ }, [availabilityData]);
3207
+ const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;
3208
+ const fieldRef = useFocusInputField(name2);
3209
+ const composedRefs = useComposedRefs(ref, fieldRef);
3210
+ return /* @__PURE__ */ jsxs(Field.Root, { hint, name: name2, error: field.error, required, children: [
3211
+ /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
3212
+ /* @__PURE__ */ jsx(
3213
+ TextInput,
3214
+ {
3215
+ ref: composedRefs,
3216
+ disabled: props.disabled,
3217
+ endAction: /* @__PURE__ */ jsxs(Flex, { position: "relative", gap: 1, children: [
3218
+ availability && !showRegenerate && /* @__PURE__ */ jsxs(
3219
+ TextValidation,
3248
3220
  {
3249
- onClick: handleRegenerateClick,
3250
- label: formatMessage({
3251
- id: "content-manager.components.uid.regenerate",
3252
- defaultMessage: "Regenerate"
3253
- }),
3254
- onMouseEnter: () => setShowRegenerate(true),
3255
- onMouseLeave: () => setShowRegenerate(false),
3256
- children: isLoading ? /* @__PURE__ */ jsx(LoadingWrapper, { "data-testid": "loading-wrapper", children: /* @__PURE__ */ jsx(Loader, {}) }) : /* @__PURE__ */ jsx(ArrowClockwise, {})
3221
+ alignItems: "center",
3222
+ gap: 1,
3223
+ justifyContent: "flex-end",
3224
+ $available: !!availability?.isAvailable,
3225
+ "data-not-here-outer": true,
3226
+ position: "absolute",
3227
+ pointerEvents: "none",
3228
+ right: 6,
3229
+ width: "100px",
3230
+ children: [
3231
+ availability?.isAvailable ? /* @__PURE__ */ jsx(CheckCircle, {}) : /* @__PURE__ */ jsx(WarningCircle, {}),
3232
+ /* @__PURE__ */ jsx(
3233
+ Typography,
3234
+ {
3235
+ textColor: availability.isAvailable ? "success600" : "danger600",
3236
+ variant: "pi",
3237
+ children: formatMessage(
3238
+ availability.isAvailable ? {
3239
+ id: "content-manager.components.uid.available",
3240
+ defaultMessage: "Available"
3241
+ } : {
3242
+ id: "content-manager.components.uid.unavailable",
3243
+ defaultMessage: "Unavailable"
3244
+ }
3245
+ )
3246
+ }
3247
+ )
3248
+ ]
3257
3249
  }
3258
- )
3259
- ] })
3260
- ] }),
3261
- onChange: field.onChange,
3262
- value: field.value ?? "",
3263
- ...props
3264
- }
3265
- )
3266
- );
3267
- });
3268
- const FieldActionWrapper = styled(FieldAction)`
3250
+ ),
3251
+ !props.disabled && /* @__PURE__ */ jsxs(Fragment, { children: [
3252
+ showRegenerate && /* @__PURE__ */ jsx(TextValidation, { alignItems: "center", justifyContent: "flex-end", gap: 1, children: /* @__PURE__ */ jsx(Typography, { textColor: "primary600", variant: "pi", children: formatMessage({
3253
+ id: "content-manager.components.uid.regenerate",
3254
+ defaultMessage: "Regenerate"
3255
+ }) }) }),
3256
+ /* @__PURE__ */ jsx(
3257
+ FieldActionWrapper,
3258
+ {
3259
+ onClick: handleRegenerateClick,
3260
+ label: formatMessage({
3261
+ id: "content-manager.components.uid.regenerate",
3262
+ defaultMessage: "Regenerate"
3263
+ }),
3264
+ onMouseEnter: () => setShowRegenerate(true),
3265
+ onMouseLeave: () => setShowRegenerate(false),
3266
+ children: isLoading ? /* @__PURE__ */ jsx(LoadingWrapper, { "data-testid": "loading-wrapper", children: /* @__PURE__ */ jsx(Loader, {}) }) : /* @__PURE__ */ jsx(ArrowClockwise, {})
3267
+ }
3268
+ )
3269
+ ] })
3270
+ ] }),
3271
+ onChange: field.onChange,
3272
+ value: field.value ?? "",
3273
+ ...props
3274
+ }
3275
+ ),
3276
+ /* @__PURE__ */ jsx(Field.Error, {}),
3277
+ /* @__PURE__ */ jsx(Field.Hint, {})
3278
+ ] });
3279
+ }
3280
+ );
3281
+ const FieldActionWrapper = styled(Field.Action)`
3269
3282
  svg {
3270
3283
  height: 1.6rem;
3271
3284
  width: 1.6rem;
@@ -3286,7 +3299,7 @@ const TextValidation = styled(Flex)`
3286
3299
  width: 1.2rem;
3287
3300
 
3288
3301
  path {
3289
- fill: ${({ theme, available }) => available ? theme.colors.success600 : theme.colors.danger600};
3302
+ fill: ${({ theme, $available }) => $available ? theme.colors.success600 : theme.colors.danger600};
3290
3303
  }
3291
3304
  }
3292
3305
  `;
@@ -3635,7 +3648,7 @@ const Editor = React.forwardRef(
3635
3648
  [editorRef]
3636
3649
  );
3637
3650
  return /* @__PURE__ */ jsxs(EditorAndPreviewWrapper, { children: [
3638
- /* @__PURE__ */ jsx(EditorStylesContainer, { isExpandMode, disabled: disabled || isPreviewMode, children: /* @__PURE__ */ jsx("textarea", { ref: textareaRef }) }),
3651
+ /* @__PURE__ */ jsx(EditorStylesContainer, { $isExpandMode: isExpandMode, $disabled: disabled || isPreviewMode, children: /* @__PURE__ */ jsx("textarea", { ref: textareaRef }) }),
3639
3652
  isPreviewMode && /* @__PURE__ */ jsx(PreviewWysiwyg, { data: value })
3640
3653
  ] });
3641
3654
  }
@@ -3645,7 +3658,7 @@ const EditorAndPreviewWrapper = styled.div`
3645
3658
  height: calc(100% - 48px);
3646
3659
  `;
3647
3660
  const EditorStylesContainer = styled.div`
3648
- cursor: ${({ disabled }) => disabled ? "not-allowed !important" : "auto"};
3661
+ cursor: ${({ $disabled }) => $disabled ? "not-allowed !important" : "auto"};
3649
3662
  height: 100%;
3650
3663
  /* BASICS */
3651
3664
  .CodeMirror-placeholder {
@@ -3655,7 +3668,7 @@ const EditorStylesContainer = styled.div`
3655
3668
  .CodeMirror {
3656
3669
  /* Set height, width, borders, and global font properties here */
3657
3670
  font-size: 1.4rem;
3658
- height: ${({ isExpandMode }) => isExpandMode ? "100%" : "410px"}; // 512px(total height) - 48px (header) - 52px(footer) - 2px border
3671
+ height: ${({ $isExpandMode }) => $isExpandMode ? "100%" : "410px"}; // 512px(total height) - 48px (header) - 52px(footer) - 2px border
3659
3672
  color: ${({ theme }) => theme.colors.neutral800};
3660
3673
  direction: ltr;
3661
3674
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
@@ -4421,15 +4434,24 @@ const WysiwygNav = ({
4421
4434
  justifyContent: "space-between",
4422
4435
  borderRadius: `0.4rem 0.4rem 0 0`,
4423
4436
  children: [
4424
- /* @__PURE__ */ jsxs(StyledFlex, { children: [
4425
- /* @__PURE__ */ jsxs(SingleSelect, { disabled: true, placeholder: selectPlaceholder, size: "S", label: selectPlaceholder, children: [
4426
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "h1", children: "h1" }),
4427
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "h2", children: "h2" }),
4428
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "h3", children: "h3" }),
4429
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "h4", children: "h4" }),
4430
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "h5", children: "h5" }),
4431
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "h6", children: "h6" })
4432
- ] }),
4437
+ /* @__PURE__ */ jsxs(Flex, { children: [
4438
+ /* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsxs(
4439
+ SingleSelect,
4440
+ {
4441
+ disabled: true,
4442
+ placeholder: selectPlaceholder,
4443
+ size: "S",
4444
+ "aria-label": selectPlaceholder,
4445
+ children: [
4446
+ /* @__PURE__ */ jsx(SingleSelectOption, { value: "h1", children: "h1" }),
4447
+ /* @__PURE__ */ jsx(SingleSelectOption, { value: "h2", children: "h2" }),
4448
+ /* @__PURE__ */ jsx(SingleSelectOption, { value: "h3", children: "h3" }),
4449
+ /* @__PURE__ */ jsx(SingleSelectOption, { value: "h4", children: "h4" }),
4450
+ /* @__PURE__ */ jsx(SingleSelectOption, { value: "h5", children: "h5" }),
4451
+ /* @__PURE__ */ jsx(SingleSelectOption, { value: "h6", children: "h6" })
4452
+ ]
4453
+ }
4454
+ ) }),
4433
4455
  /* @__PURE__ */ jsxs(MainButtons, { children: [
4434
4456
  /* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Bold", name: "Bold", icon: /* @__PURE__ */ jsx(Bold, {}) }),
4435
4457
  /* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic", icon: /* @__PURE__ */ jsx(Italic, {}) }),
@@ -4453,12 +4475,12 @@ const WysiwygNav = ({
4453
4475
  justifyContent: "space-between",
4454
4476
  borderRadius: `0.4rem 0.4rem 0 0`,
4455
4477
  children: [
4456
- /* @__PURE__ */ jsxs(StyledFlex, { children: [
4457
- /* @__PURE__ */ jsxs(
4478
+ /* @__PURE__ */ jsxs(Flex, { children: [
4479
+ /* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsxs(
4458
4480
  SingleSelect,
4459
4481
  {
4460
4482
  placeholder: selectPlaceholder,
4461
- label: selectPlaceholder,
4483
+ "aria-label": selectPlaceholder,
4462
4484
  size: "S",
4463
4485
  onChange: (value) => onActionClick(value, editorRef),
4464
4486
  children: [
@@ -4470,7 +4492,7 @@ const WysiwygNav = ({
4470
4492
  /* @__PURE__ */ jsx(SingleSelectOption, { value: "h6", children: "h6" })
4471
4493
  ]
4472
4494
  }
4473
- ),
4495
+ ) }),
4474
4496
  /* @__PURE__ */ jsxs(MainButtons, { children: [
4475
4497
  /* @__PURE__ */ jsx(
4476
4498
  CustomIconButton,
@@ -4590,19 +4612,6 @@ const WysiwygNav = ({
4590
4612
  }
4591
4613
  );
4592
4614
  };
4593
- const StyledFlex = styled(Flex)`
4594
- /* Hide the label, every input needs a label. */
4595
- label {
4596
- border: 0;
4597
- clip: rect(0 0 0 0);
4598
- height: 1px;
4599
- margin: -1px;
4600
- overflow: hidden;
4601
- padding: 0;
4602
- position: absolute;
4603
- width: 1px;
4604
- }
4605
- `;
4606
4615
  const Wysiwyg = React.forwardRef(
4607
4616
  ({ hint, disabled, label, name: name2, placeholder, required, labelAction }, forwardedRef) => {
4608
4617
  const field = useField(name2);
@@ -4667,9 +4676,9 @@ const Wysiwyg = React.forwardRef(
4667
4676
  insertFile(editorRef, formattedFiles);
4668
4677
  setMediaLibVisible(false);
4669
4678
  };
4670
- return /* @__PURE__ */ jsxs(Field, { name: name2, hint, error: field.error, required, children: [
4679
+ return /* @__PURE__ */ jsxs(Field.Root, { name: name2, hint, error: field.error, required, children: [
4671
4680
  /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
4672
- /* @__PURE__ */ jsx(FieldLabel, { action: labelAction, children: label }),
4681
+ /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
4673
4682
  /* @__PURE__ */ jsxs(
4674
4683
  EditorLayout,
4675
4684
  {
@@ -4710,8 +4719,8 @@ const Wysiwyg = React.forwardRef(
4710
4719
  ]
4711
4720
  }
4712
4721
  ),
4713
- /* @__PURE__ */ jsx(FieldHint, {}),
4714
- /* @__PURE__ */ jsx(FieldError, {})
4722
+ /* @__PURE__ */ jsx(Field.Hint, {}),
4723
+ /* @__PURE__ */ jsx(Field.Error, {})
4715
4724
  ] }),
4716
4725
  mediaLibVisible && // @ts-expect-error – TODO: fix this way of injecting because it's not really typeable without a registry.
4717
4726
  /* @__PURE__ */ jsx(MediaLibraryDialog, { onClose: handleToggleMediaLib, onSelectAssets: handleSelectAssets })
@@ -4930,7 +4939,7 @@ const DynamicComponent = ({
4930
4939
  /* @__PURE__ */ jsx(
4931
4940
  IconButton,
4932
4941
  {
4933
- forwardedAs: "div",
4942
+ tag: "div",
4934
4943
  role: "button",
4935
4944
  borderWidth: 0,
4936
4945
  tabIndex: 0,
@@ -4948,7 +4957,7 @@ const DynamicComponent = ({
4948
4957
  /* @__PURE__ */ jsxs(Menu.Root, { children: [
4949
4958
  /* @__PURE__ */ jsxs(Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 2, paddingRight: 2, children: [
4950
4959
  /* @__PURE__ */ jsx(More, { "aria-hidden": true, focusable: false }),
4951
- /* @__PURE__ */ jsx(VisuallyHidden, { as: "span", children: formatMessage({
4960
+ /* @__PURE__ */ jsx(VisuallyHidden, { tag: "span", children: formatMessage({
4952
4961
  id: getTranslation("components.DynamicZone.more-actions"),
4953
4962
  defaultMessage: "More actions"
4954
4963
  }) })
@@ -4977,7 +4986,7 @@ const DynamicComponent = ({
4977
4986
  ] })
4978
4987
  ] })
4979
4988
  ] });
4980
- return /* @__PURE__ */ jsxs(ComponentContainer, { as: "li", width: "100%", children: [
4989
+ return /* @__PURE__ */ jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
4981
4990
  /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Rectangle, { background: "neutral200" }) }),
4982
4991
  /* @__PURE__ */ jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsx(Preview, {}) : /* @__PURE__ */ jsxs(Accordion, { expanded: isOpen, onToggle: handleToggle, size: "S", children: [
4983
4992
  /* @__PURE__ */ jsx(
@@ -5009,8 +5018,8 @@ const ActionsFlex = styled(Flex)`
5009
5018
  const IconButtonCustom = styled(IconButton)`
5010
5019
  background-color: transparent;
5011
5020
 
5012
- svg path {
5013
- fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : theme.colors.neutral600};
5021
+ svg {
5022
+ fill: ${({ theme }) => theme.colors.neutral600};
5014
5023
  }
5015
5024
  `;
5016
5025
  const StyledBox = styled(Box)`
@@ -5316,4 +5325,4 @@ export {
5316
5325
  transformDocument as t,
5317
5326
  useLazyComponents as u
5318
5327
  };
5319
- //# sourceMappingURL=Field-Dlh0uGnL.mjs.map
5328
+ //# sourceMappingURL=Field-0_2h1vuK.mjs.map