@akbarsafari00/bonyan-content-manager 5.52.1-fa.2

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/AddComponentButton.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var styledComponents = require('styled-components');
+
+const AddComponentButton = ({ hasError, isDisabled, isOpen, children, onClick })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(StyledButton, {
+        type: "button",
+        onClick: onClick,
+        disabled: isDisabled,
+        background: "neutral0",
+        style: {
+            cursor: isDisabled ? 'not-allowed' : 'pointer'
+        },
+        variant: "tertiary",
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            tag: "span",
+            gap: 2,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(StyledAddIcon, {
+                    "aria-hidden": true,
+                    $isOpen: isOpen,
+                    $hasError: hasError && !isOpen
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    variant: "pi",
+                    fontWeight: "bold",
+                    textColor: hasError && !isOpen ? 'danger600' : 'neutral600',
+                    children: children
+                })
+            ]
+        })
+    });
+};
+const StyledAddIcon = styledComponents.styled(Icons.PlusCircle)`
+  height: ${({ theme })=>theme.spaces[6]};
+  width: ${({ theme })=>theme.spaces[6]};
+  transform: ${({ $isOpen })=>$isOpen ? 'rotate(45deg)' : 'rotate(0deg)'};
+
+  > circle {
+    fill: ${({ theme, $hasError })=>$hasError ? theme.colors.danger200 : theme.colors.neutral150};
+  }
+  > path {
+    fill: ${({ theme, $hasError })=>$hasError ? theme.colors.danger600 : theme.colors.neutral500};
+  }
+`;
+const StyledButton = styledComponents.styled(designSystem.Button)`
+  padding-inline-start: ${({ theme })=>theme.spaces[3]};
+  padding-top: ${({ theme })=>theme.spaces[2]};
+  padding-bottom: ${({ theme })=>theme.spaces[2]};
+  border-radius: 26px;
+  box-shadow: ${({ theme })=>theme.shadows.filterShadow};
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    padding-inline-start: ${({ theme })=>theme.spaces[3]};
+    padding-top: ${({ theme })=>theme.spaces[0]};
+    padding-bottom: ${({ theme })=>theme.spaces[0]};
+    height: 5rem;
+  }
+`;
+
+exports.AddComponentButton = AddComponentButton;
+//# sourceMappingURL=AddComponentButton.js.map

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/AddComponentButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddComponentButton.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/AddComponentButton.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Flex, Typography } from '@strapi/design-system';\nimport { PlusCircle } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\ninterface AddComponentButtonProps {\n  children: React.ReactNode;\n  hasError?: boolean;\n  isDisabled?: boolean;\n  isOpen?: boolean;\n  onClick: React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\n}\n\nconst AddComponentButton = ({\n  hasError,\n  isDisabled,\n  isOpen,\n  children,\n  onClick,\n}: AddComponentButtonProps) => {\n  return (\n    <StyledButton\n      type=\"button\"\n      onClick={onClick}\n      disabled={isDisabled}\n      background=\"neutral0\"\n      style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}\n      variant=\"tertiary\"\n    >\n      <Flex tag=\"span\" gap={2}>\n        <StyledAddIcon aria-hidden $isOpen={isOpen} $hasError={hasError && !isOpen} />\n        <Typography\n          variant=\"pi\"\n          fontWeight=\"bold\"\n          textColor={hasError && !isOpen ? 'danger600' : 'neutral600'}\n        >\n          {children}\n        </Typography>\n      </Flex>\n    </StyledButton>\n  );\n};\n\nconst StyledAddIcon = styled(PlusCircle)<{ $isOpen?: boolean; $hasError?: boolean }>`\n  height: ${({ theme }) => theme.spaces[6]};\n  width: ${({ theme }) => theme.spaces[6]};\n  transform: ${({ $isOpen }) => ($isOpen ? 'rotate(45deg)' : 'rotate(0deg)')};\n\n  > circle {\n    fill: ${({ theme, $hasError }) =>\n      $hasError ? theme.colors.danger200 : theme.colors.neutral150};\n  }\n  > path {\n    fill: ${({ theme, $hasError }) =>\n      $hasError ? theme.colors.danger600 : theme.colors.neutral500};\n  }\n`;\n\nconst StyledButton = styled(Button)`\n  padding-inline-start: ${({ theme }) => theme.spaces[3]};\n  padding-top: ${({ theme }) => theme.spaces[2]};\n  padding-bottom: ${({ theme }) => theme.spaces[2]};\n  border-radius: 26px;\n  box-shadow: ${({ theme }) => theme.shadows.filterShadow};\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    padding-inline-start: ${({ theme }) => theme.spaces[3]};\n    padding-top: ${({ theme }) => theme.spaces[0]};\n    padding-bottom: ${({ theme }) => theme.spaces[0]};\n    height: 5rem;\n  }\n`;\n\nexport { AddComponentButton };\nexport type { AddComponentButtonProps };\n"],"names":["AddComponentButton","hasError","isDisabled","isOpen","children","onClick","_jsx","StyledButton","type","disabled","background","style","cursor","variant","_jsxs","Flex","tag","gap","StyledAddIcon","aria-hidden","$isOpen","$hasError","Typography","fontWeight","textColor","styled","PlusCircle","theme","spaces","colors","danger200","neutral150","danger600","neutral500","Button","shadows","filterShadow","breakpoints","medium"],"mappings":";;;;;;;;AAcA,MAAMA,kBAAAA,GAAqB,CAAC,EAC1BC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACiB,GAAA;AACxB,IAAA,qBACEC,cAAA,CAACC,YAAAA,EAAAA;QACCC,IAAAA,EAAK,QAAA;QACLH,OAAAA,EAASA,OAAAA;QACTI,QAAAA,EAAUP,UAAAA;QACVQ,UAAAA,EAAW,UAAA;QACXC,KAAAA,EAAO;AAAEC,YAAAA,MAAAA,EAAQV,aAAa,aAAA,GAAgB;AAAU,SAAA;QACxDW,OAAAA,EAAQ,UAAA;AAER,QAAA,QAAA,gBAAAC,eAAA,CAACC,iBAAAA,EAAAA;YAAKC,GAAAA,EAAI,MAAA;YAAOC,GAAAA,EAAK,CAAA;;8BACpBX,cAAA,CAACY,aAAAA,EAAAA;oBAAcC,aAAW,EAAA,IAAA;oBAACC,OAAAA,EAASjB,MAAAA;AAAQkB,oBAAAA,SAAAA,EAAWpB,YAAY,CAACE;;8BACpEG,cAAA,CAACgB,uBAAAA,EAAAA;oBACCT,OAAAA,EAAQ,IAAA;oBACRU,UAAAA,EAAW,MAAA;oBACXC,SAAAA,EAAWvB,QAAAA,IAAY,CAACE,MAAAA,GAAS,WAAA,GAAc,YAAA;AAE9CC,oBAAAA,QAAAA,EAAAA;;;;;AAKX;AAEA,MAAMc,aAAAA,GAAgBO,uBAAAA,CAAOC,gBAAAA,CAAuD;UAC1E,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;SAClC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;AAC7B,aAAA,EAAE,CAAC,EAAER,OAAO,EAAE,GAAMA,OAAAA,GAAU,kBAAkB,cAAA,CAAgB;;;AAGnE,UAAA,EAAE,CAAC,EAAEO,KAAK,EAAEN,SAAS,EAAE,GAC3BA,SAAAA,GAAYM,KAAAA,CAAME,MAAM,CAACC,SAAS,GAAGH,MAAME,MAAM,CAACE,UAAU,CAAC;;;AAGzD,UAAA,EAAE,CAAC,EAAEJ,KAAK,EAAEN,SAAS,EAAE,GAC3BA,SAAAA,GAAYM,KAAAA,CAAME,MAAM,CAACG,SAAS,GAAGL,MAAME,MAAM,CAACI,UAAU,CAAC;;AAEnE,CAAC;AAED,MAAM1B,YAAAA,GAAekB,uBAAAA,CAAOS,mBAAAA,CAAO;wBACX,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;eAC1C,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;kBAC9B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;;cAErC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMQ,OAAO,CAACC,YAAY,CAAC;;EAExD,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAAA,CAAMU,WAAW,CAACC,MAAM,CAAC;0BAClB,EAAE,CAAC,EAAEX,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;iBAC1C,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;oBAC9B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;;;AAGrD,CAAC;;;;"}

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/AddComponentButton.mjs

@@ -0,0 +1,64 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { Button, Flex, Typography } from '@strapi/design-system';
+import { PlusCircle } from '@strapi/icons';
+import { styled } from 'styled-components';
+
+const AddComponentButton = ({ hasError, isDisabled, isOpen, children, onClick })=>{
+    return /*#__PURE__*/ jsx(StyledButton, {
+        type: "button",
+        onClick: onClick,
+        disabled: isDisabled,
+        background: "neutral0",
+        style: {
+            cursor: isDisabled ? 'not-allowed' : 'pointer'
+        },
+        variant: "tertiary",
+        children: /*#__PURE__*/ jsxs(Flex, {
+            tag: "span",
+            gap: 2,
+            children: [
+                /*#__PURE__*/ jsx(StyledAddIcon, {
+                    "aria-hidden": true,
+                    $isOpen: isOpen,
+                    $hasError: hasError && !isOpen
+                }),
+                /*#__PURE__*/ jsx(Typography, {
+                    variant: "pi",
+                    fontWeight: "bold",
+                    textColor: hasError && !isOpen ? 'danger600' : 'neutral600',
+                    children: children
+                })
+            ]
+        })
+    });
+};
+const StyledAddIcon = styled(PlusCircle)`
+  height: ${({ theme })=>theme.spaces[6]};
+  width: ${({ theme })=>theme.spaces[6]};
+  transform: ${({ $isOpen })=>$isOpen ? 'rotate(45deg)' : 'rotate(0deg)'};
+
+  > circle {
+    fill: ${({ theme, $hasError })=>$hasError ? theme.colors.danger200 : theme.colors.neutral150};
+  }
+  > path {
+    fill: ${({ theme, $hasError })=>$hasError ? theme.colors.danger600 : theme.colors.neutral500};
+  }
+`;
+const StyledButton = styled(Button)`
+  padding-inline-start: ${({ theme })=>theme.spaces[3]};
+  padding-top: ${({ theme })=>theme.spaces[2]};
+  padding-bottom: ${({ theme })=>theme.spaces[2]};
+  border-radius: 26px;
+  box-shadow: ${({ theme })=>theme.shadows.filterShadow};
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    padding-inline-start: ${({ theme })=>theme.spaces[3]};
+    padding-top: ${({ theme })=>theme.spaces[0]};
+    padding-bottom: ${({ theme })=>theme.spaces[0]};
+    height: 5rem;
+  }
+`;
+
+export { AddComponentButton };
+//# sourceMappingURL=AddComponentButton.mjs.map

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/AddComponentButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddComponentButton.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/AddComponentButton.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Flex, Typography } from '@strapi/design-system';\nimport { PlusCircle } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\ninterface AddComponentButtonProps {\n  children: React.ReactNode;\n  hasError?: boolean;\n  isDisabled?: boolean;\n  isOpen?: boolean;\n  onClick: React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\n}\n\nconst AddComponentButton = ({\n  hasError,\n  isDisabled,\n  isOpen,\n  children,\n  onClick,\n}: AddComponentButtonProps) => {\n  return (\n    <StyledButton\n      type=\"button\"\n      onClick={onClick}\n      disabled={isDisabled}\n      background=\"neutral0\"\n      style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}\n      variant=\"tertiary\"\n    >\n      <Flex tag=\"span\" gap={2}>\n        <StyledAddIcon aria-hidden $isOpen={isOpen} $hasError={hasError && !isOpen} />\n        <Typography\n          variant=\"pi\"\n          fontWeight=\"bold\"\n          textColor={hasError && !isOpen ? 'danger600' : 'neutral600'}\n        >\n          {children}\n        </Typography>\n      </Flex>\n    </StyledButton>\n  );\n};\n\nconst StyledAddIcon = styled(PlusCircle)<{ $isOpen?: boolean; $hasError?: boolean }>`\n  height: ${({ theme }) => theme.spaces[6]};\n  width: ${({ theme }) => theme.spaces[6]};\n  transform: ${({ $isOpen }) => ($isOpen ? 'rotate(45deg)' : 'rotate(0deg)')};\n\n  > circle {\n    fill: ${({ theme, $hasError }) =>\n      $hasError ? theme.colors.danger200 : theme.colors.neutral150};\n  }\n  > path {\n    fill: ${({ theme, $hasError }) =>\n      $hasError ? theme.colors.danger600 : theme.colors.neutral500};\n  }\n`;\n\nconst StyledButton = styled(Button)`\n  padding-inline-start: ${({ theme }) => theme.spaces[3]};\n  padding-top: ${({ theme }) => theme.spaces[2]};\n  padding-bottom: ${({ theme }) => theme.spaces[2]};\n  border-radius: 26px;\n  box-shadow: ${({ theme }) => theme.shadows.filterShadow};\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    padding-inline-start: ${({ theme }) => theme.spaces[3]};\n    padding-top: ${({ theme }) => theme.spaces[0]};\n    padding-bottom: ${({ theme }) => theme.spaces[0]};\n    height: 5rem;\n  }\n`;\n\nexport { AddComponentButton };\nexport type { AddComponentButtonProps };\n"],"names":["AddComponentButton","hasError","isDisabled","isOpen","children","onClick","_jsx","StyledButton","type","disabled","background","style","cursor","variant","_jsxs","Flex","tag","gap","StyledAddIcon","aria-hidden","$isOpen","$hasError","Typography","fontWeight","textColor","styled","PlusCircle","theme","spaces","colors","danger200","neutral150","danger600","neutral500","Button","shadows","filterShadow","breakpoints","medium"],"mappings":";;;;;;AAcA,MAAMA,kBAAAA,GAAqB,CAAC,EAC1BC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACiB,GAAA;AACxB,IAAA,qBACEC,GAAA,CAACC,YAAAA,EAAAA;QACCC,IAAAA,EAAK,QAAA;QACLH,OAAAA,EAASA,OAAAA;QACTI,QAAAA,EAAUP,UAAAA;QACVQ,UAAAA,EAAW,UAAA;QACXC,KAAAA,EAAO;AAAEC,YAAAA,MAAAA,EAAQV,aAAa,aAAA,GAAgB;AAAU,SAAA;QACxDW,OAAAA,EAAQ,UAAA;AAER,QAAA,QAAA,gBAAAC,IAAA,CAACC,IAAAA,EAAAA;YAAKC,GAAAA,EAAI,MAAA;YAAOC,GAAAA,EAAK,CAAA;;8BACpBX,GAAA,CAACY,aAAAA,EAAAA;oBAAcC,aAAW,EAAA,IAAA;oBAACC,OAAAA,EAASjB,MAAAA;AAAQkB,oBAAAA,SAAAA,EAAWpB,YAAY,CAACE;;8BACpEG,GAAA,CAACgB,UAAAA,EAAAA;oBACCT,OAAAA,EAAQ,IAAA;oBACRU,UAAAA,EAAW,MAAA;oBACXC,SAAAA,EAAWvB,QAAAA,IAAY,CAACE,MAAAA,GAAS,WAAA,GAAc,YAAA;AAE9CC,oBAAAA,QAAAA,EAAAA;;;;;AAKX;AAEA,MAAMc,aAAAA,GAAgBO,MAAAA,CAAOC,UAAAA,CAAuD;UAC1E,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;SAClC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;AAC7B,aAAA,EAAE,CAAC,EAAER,OAAO,EAAE,GAAMA,OAAAA,GAAU,kBAAkB,cAAA,CAAgB;;;AAGnE,UAAA,EAAE,CAAC,EAAEO,KAAK,EAAEN,SAAS,EAAE,GAC3BA,SAAAA,GAAYM,KAAAA,CAAME,MAAM,CAACC,SAAS,GAAGH,MAAME,MAAM,CAACE,UAAU,CAAC;;;AAGzD,UAAA,EAAE,CAAC,EAAEJ,KAAK,EAAEN,SAAS,EAAE,GAC3BA,SAAAA,GAAYM,KAAAA,CAAME,MAAM,CAACG,SAAS,GAAGL,MAAME,MAAM,CAACI,UAAU,CAAC;;AAEnE,CAAC;AAED,MAAM1B,YAAAA,GAAekB,MAAAA,CAAOS,MAAAA,CAAO;wBACX,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;eAC1C,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;kBAC9B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;;cAErC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMQ,OAAO,CAACC,YAAY,CAAC;;EAExD,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAAA,CAAMU,WAAW,CAACC,MAAM,CAAC;0BAClB,EAAE,CAAC,EAAEX,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;iBAC1C,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;oBAC9B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;;;AAGrD,CAAC;;;;"}

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.js

@@ -0,0 +1,221 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var upperFirst = require('lodash/upperFirst');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var ComponentIcon = require('../../../../../components/ComponentIcon.js');
+var previewImage = require('../../../../../utils/previewImage.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
+
+/**
+ * Renders a small preview thumbnail inside the component picker tile and, on hover,
+ * a larger portaled preview so authors can read the component at a glance without picking it.
+ * Uses a controlled Popover anchored to the thumbnail — the content is portaled, so it escapes
+ * the accordion's overflow clipping.
+ */ const ComponentPreviewImage = ({ src, alt, onError })=>{
+    const [open, setOpen] = React__namespace.useState(false);
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Popover.Root, {
+        open: open,
+        onOpenChange: setOpen,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Anchor, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                    tag: "img",
+                    src: src,
+                    alt: alt,
+                    loading: "lazy",
+                    width: "100%",
+                    height: "5.2rem",
+                    hasRadius: true,
+                    style: {
+                        objectFit: 'cover'
+                    },
+                    onMouseEnter: ()=>setOpen(true),
+                    onMouseLeave: ()=>setOpen(false),
+                    onError: onError
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Content, {
+                side: "top",
+                sideOffset: 4,
+                onOpenAutoFocus: (e)=>e.preventDefault(),
+                style: {
+                    pointerEvents: 'none'
+                },
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                    padding: 2,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                        tag: "img",
+                        src: src,
+                        alt: alt,
+                        hasRadius: true,
+                        style: {
+                            display: 'block',
+                            maxWidth: 'min(60rem, 90vw)',
+                            maxHeight: 'min(45rem, 80vh)',
+                            objectFit: 'contain'
+                        }
+                    })
+                })
+            })
+        ]
+    });
+};
+/**
+ * Holds per-tile load-error state: when the preview image fails to load (missing file,
+ * unreachable CDN…), the tile falls back to the component icon instead of a broken image.
+ */ const ComponentTileVisual = ({ previewUrl, icon, displayName })=>{
+    const [hasLoadError, setHasLoadError] = React__namespace.useState(false);
+    if (!previewUrl || hasLoadError) {
+        return /*#__PURE__*/ jsxRuntime.jsx(ComponentIcon.ComponentIcon, {
+            color: "currentColor",
+            background: "primary200",
+            icon: icon
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(ComponentPreviewImage, {
+        src: previewUrl,
+        alt: displayName,
+        onError: ()=>setHasLoadError(true)
+    });
+};
+const ComponentCategory = ({ category, components = [], variant = 'primary', onAddComponent })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Accordion.Item, {
+        value: category,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Accordion.Header, {
+                variant: variant,
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Accordion.Trigger, {
+                    children: formatMessage({
+                        id: category,
+                        defaultMessage: upperFirst__default.default(category)
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(ResponsiveAccordionContent, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(Grid, {
+                    paddingTop: 4,
+                    paddingBottom: 4,
+                    paddingLeft: 3,
+                    paddingRight: 3,
+                    children: components.map(({ uid, displayName, icon, preview })=>{
+                        const previewUrl = previewImage.resolvePreviewImageUrl(preview);
+                        return /*#__PURE__*/ jsxRuntime.jsx(ComponentBox, {
+                            tag: "button",
+                            type: "button",
+                            background: "neutral100",
+                            justifyContent: "center",
+                            onClick: onAddComponent(uid),
+                            hasRadius: true,
+                            height: "8.4rem",
+                            shrink: 0,
+                            borderColor: "neutral200",
+                            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                direction: "column",
+                                gap: 1,
+                                alignItems: "center",
+                                justifyContent: "center",
+                                width: "100%",
+                                paddingLeft: 2,
+                                paddingRight: 2,
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(ComponentTileVisual, {
+                                        previewUrl: previewUrl,
+                                        icon: icon,
+                                        displayName: displayName
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+                                        label: formatMessage({
+                                            id: uid,
+                                            defaultMessage: displayName ?? uid
+                                        }),
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                            variant: "pi",
+                                            fontWeight: "bold",
+                                            ellipsis: true,
+                                            width: "100%",
+                                            children: formatMessage({
+                                                id: uid,
+                                                defaultMessage: displayName ?? uid
+                                            })
+                                        })
+                                    })
+                                ]
+                            })
+                        }, uid);
+                    })
+                })
+            })
+        ]
+    });
+};
+const ResponsiveAccordionContent = styledComponents.styled(designSystem.Accordion.Content)`
+  container-type: inline-size;
+`;
+/**
+ * TODO:
+ * JSDOM cannot handle container queries.
+ * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error
+ * for failing to parse the stylesheet.
+ */ const Grid = process.env.NODE_ENV !== 'test' ? styledComponents.styled(designSystem.Box)`
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 100%);
+        grid-gap: 12px;
+
+        ${({ theme })=>theme.breakpoints.medium} {
+          grid-template-columns: repeat(auto-fill, 14rem);
+          grid-gap: 4px;
+        }
+      ` : styledComponents.styled(designSystem.Box)`
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 100%);
+        grid-gap: 12px;
+
+        ${({ theme })=>theme.breakpoints.medium} {
+          grid-gap: 4px;
+        }
+      `;
+const ComponentBox = styledComponents.styled(designSystem.Flex)`
+  color: ${({ theme })=>theme.colors.neutral600};
+  cursor: pointer;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: color 120ms ${(props)=>props.theme.motion.easings.easeOutQuad};
+  }
+
+  &:focus,
+  &:hover {
+    border: 1px solid ${({ theme })=>theme.colors.primary200};
+    background: ${({ theme })=>theme.colors.primary100};
+    color: ${({ theme })=>theme.colors.primary600};
+  }
+`;
+
+exports.ComponentCategory = ComponentCategory;
+//# sourceMappingURL=ComponentCategory.js.map

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentCategory.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport {\r\n  Accordion,\r\n  Box,\r\n  Flex,\r\n  FlexComponent,\r\n  Popover,\r\n  Tooltip,\r\n  Typography,\r\n} from '@strapi/design-system';\r\nimport upperFirst from 'lodash/upperFirst';\r\nimport { useIntl } from 'react-intl';\r\nimport { styled } from 'styled-components';\r\n\r\nimport { ComponentIcon } from '../../../../../components/ComponentIcon';\r\nimport { resolvePreviewImageUrl } from '../../../../../utils/previewImage';\r\n\r\nimport type { Struct } from '@strapi/types';\r\n\r\ninterface ComponentCategoryProps {\r\n  category: string;\r\n  components?: Array<{\r\n    uid: string;\r\n    displayName: string;\r\n    icon?: string;\r\n    preview?: Struct.PreviewImageValue;\r\n  }>;\r\n  onAddComponent: (\r\n    componentUid: string\r\n  ) => React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\r\n  variant?: Accordion.Variant;\r\n}\r\n\r\ninterface ComponentPreviewImageProps {\r\n  src: string;\r\n  alt: string;\r\n  onError?: React.ReactEventHandler<HTMLImageElement>;\r\n}\r\n\r\n/**\r\n * Renders a small preview thumbnail inside the component picker tile and, on hover,\r\n * a larger portaled preview so authors can read the component at a glance without picking it.\r\n * Uses a controlled Popover anchored to the thumbnail — the content is portaled, so it escapes\r\n * the accordion's overflow clipping.\r\n */\r\nconst ComponentPreviewImage = ({ src, alt, onError }: ComponentPreviewImageProps) => {\r\n  const [open, setOpen] = React.useState(false);\r\n\r\n  return (\r\n    <Popover.Root open={open} onOpenChange={setOpen}>\r\n      <Popover.Anchor>\r\n        <Box\r\n          tag=\"img\"\r\n          src={src}\r\n          alt={alt}\r\n          loading=\"lazy\"\r\n          width=\"100%\"\r\n          height=\"5.2rem\"\r\n          hasRadius\r\n          style={{ objectFit: 'cover' }}\r\n          onMouseEnter={() => setOpen(true)}\r\n          onMouseLeave={() => setOpen(false)}\r\n          onError={onError}\r\n        />\r\n      </Popover.Anchor>\r\n      <Popover.Content\r\n        side=\"top\"\r\n        sideOffset={4}\r\n        onOpenAutoFocus={(e) => e.preventDefault()}\r\n        style={{ pointerEvents: 'none' }}\r\n      >\r\n        <Box padding={2}>\r\n          <Box\r\n            tag=\"img\"\r\n            src={src}\r\n            alt={alt}\r\n            hasRadius\r\n            style={{\r\n              display: 'block',\r\n              maxWidth: 'min(60rem, 90vw)',\r\n              maxHeight: 'min(45rem, 80vh)',\r\n              objectFit: 'contain',\r\n            }}\r\n          />\r\n        </Box>\r\n      </Popover.Content>\r\n    </Popover.Root>\r\n  );\r\n};\r\n\r\ninterface ComponentTileVisualProps {\r\n  previewUrl?: string;\r\n  icon?: string;\r\n  displayName: string;\r\n}\r\n\r\n/**\r\n * Holds per-tile load-error state: when the preview image fails to load (missing file,\r\n * unreachable CDN…), the tile falls back to the component icon instead of a broken image.\r\n */\r\nconst ComponentTileVisual = ({ previewUrl, icon, displayName }: ComponentTileVisualProps) => {\r\n  const [hasLoadError, setHasLoadError] = React.useState(false);\r\n\r\n  if (!previewUrl || hasLoadError) {\r\n    return <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />;\r\n  }\r\n\r\n  return (\r\n    <ComponentPreviewImage\r\n      src={previewUrl}\r\n      alt={displayName}\r\n      onError={() => setHasLoadError(true)}\r\n    />\r\n  );\r\n};\r\n\r\nconst ComponentCategory = ({\r\n  category,\r\n  components = [],\r\n  variant = 'primary',\r\n  onAddComponent,\r\n}: ComponentCategoryProps) => {\r\n  const { formatMessage } = useIntl();\r\n\r\n  return (\r\n    <Accordion.Item value={category}>\r\n      <Accordion.Header variant={variant}>\r\n        <Accordion.Trigger>\r\n          {formatMessage({ id: category, defaultMessage: upperFirst(category) })}\r\n        </Accordion.Trigger>\r\n      </Accordion.Header>\r\n      <ResponsiveAccordionContent>\r\n        <Grid paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>\r\n          {components.map(({ uid, displayName, icon, preview }) => {\r\n            const previewUrl = resolvePreviewImageUrl(preview);\r\n\r\n            return (\r\n              <ComponentBox\r\n                key={uid}\r\n                tag=\"button\"\r\n                type=\"button\"\r\n                background=\"neutral100\"\r\n                justifyContent=\"center\"\r\n                onClick={onAddComponent(uid)}\r\n                hasRadius\r\n                height=\"8.4rem\"\r\n                shrink={0}\r\n                borderColor=\"neutral200\"\r\n              >\r\n                <Flex\r\n                  direction=\"column\"\r\n                  gap={1}\r\n                  alignItems=\"center\"\r\n                  justifyContent=\"center\"\r\n                  width=\"100%\"\r\n                  paddingLeft={2}\r\n                  paddingRight={2}\r\n                >\r\n                  <ComponentTileVisual\r\n                    previewUrl={previewUrl}\r\n                    icon={icon}\r\n                    displayName={displayName}\r\n                  />\r\n\r\n                  <Tooltip label={formatMessage({ id: uid, defaultMessage: displayName ?? uid })}>\r\n                    <Typography variant=\"pi\" fontWeight=\"bold\" ellipsis width=\"100%\">\r\n                      {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\r\n                    </Typography>\r\n                  </Tooltip>\r\n                </Flex>\r\n              </ComponentBox>\r\n            );\r\n          })}\r\n        </Grid>\r\n      </ResponsiveAccordionContent>\r\n    </Accordion.Item>\r\n  );\r\n};\r\n\r\nconst ResponsiveAccordionContent = styled(Accordion.Content)`\r\n  container-type: inline-size;\r\n`;\r\n\r\n/**\r\n * TODO:\r\n * JSDOM cannot handle container queries.\r\n * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\r\n * for failing to parse the stylesheet.\r\n */\r\nconst Grid =\r\n  process.env.NODE_ENV !== 'test'\r\n    ? styled(Box)`\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fill, 100%);\r\n        grid-gap: 12px;\r\n\r\n        ${({ theme }) => theme.breakpoints.medium} {\r\n          grid-template-columns: repeat(auto-fill, 14rem);\r\n          grid-gap: 4px;\r\n        }\r\n      `\r\n    : styled(Box)`\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fill, 100%);\r\n        grid-gap: 12px;\r\n\r\n        ${({ theme }) => theme.breakpoints.medium} {\r\n          grid-gap: 4px;\r\n        }\r\n      `;\r\n\r\nconst ComponentBox = styled<FlexComponent<'button'>>(Flex)`\r\n  color: ${({ theme }) => theme.colors.neutral600};\r\n  cursor: pointer;\r\n\r\n  @media (prefers-reduced-motion: no-preference) {\r\n    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\r\n  }\r\n\r\n  &:focus,\r\n  &:hover {\r\n    border: 1px solid ${({ theme }) => theme.colors.primary200};\r\n    background: ${({ theme }) => theme.colors.primary100};\r\n    color: ${({ theme }) => theme.colors.primary600};\r\n  }\r\n`;\r\n\r\nexport { ComponentCategory };\r\nexport type { ComponentCategoryProps };\r\n"],"names":["ComponentPreviewImage","src","alt","onError","open","setOpen","React","useState","_jsxs","Popover","Root","onOpenChange","_jsx","Anchor","Box","tag","loading","width","height","hasRadius","style","objectFit","onMouseEnter","onMouseLeave","Content","side","sideOffset","onOpenAutoFocus","e","preventDefault","pointerEvents","padding","display","maxWidth","maxHeight","ComponentTileVisual","previewUrl","icon","displayName","hasLoadError","setHasLoadError","ComponentIcon","color","background","ComponentCategory","category","components","variant","onAddComponent","formatMessage","useIntl","Accordion","Item","value","Header","Trigger","id","defaultMessage","upperFirst","ResponsiveAccordionContent","Grid","paddingTop","paddingBottom","paddingLeft","paddingRight","map","uid","preview","resolvePreviewImageUrl","ComponentBox","type","justifyContent","onClick","shrink","borderColor","Flex","direction","gap","alignItems","Tooltip","label","Typography","fontWeight","ellipsis","styled","process","env","NODE_ENV","theme","breakpoints","medium","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.mjs

@@ -0,0 +1,196 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Accordion, Box, Flex, Tooltip, Typography, Popover } from '@strapi/design-system';
+import upperFirst from 'lodash/upperFirst';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { ComponentIcon } from '../../../../../components/ComponentIcon.mjs';
+import { resolvePreviewImageUrl } from '../../../../../utils/previewImage.mjs';
+
+/**
+ * Renders a small preview thumbnail inside the component picker tile and, on hover,
+ * a larger portaled preview so authors can read the component at a glance without picking it.
+ * Uses a controlled Popover anchored to the thumbnail — the content is portaled, so it escapes
+ * the accordion's overflow clipping.
+ */ const ComponentPreviewImage = ({ src, alt, onError })=>{
+    const [open, setOpen] = React.useState(false);
+    return /*#__PURE__*/ jsxs(Popover.Root, {
+        open: open,
+        onOpenChange: setOpen,
+        children: [
+            /*#__PURE__*/ jsx(Popover.Anchor, {
+                children: /*#__PURE__*/ jsx(Box, {
+                    tag: "img",
+                    src: src,
+                    alt: alt,
+                    loading: "lazy",
+                    width: "100%",
+                    height: "5.2rem",
+                    hasRadius: true,
+                    style: {
+                        objectFit: 'cover'
+                    },
+                    onMouseEnter: ()=>setOpen(true),
+                    onMouseLeave: ()=>setOpen(false),
+                    onError: onError
+                })
+            }),
+            /*#__PURE__*/ jsx(Popover.Content, {
+                side: "top",
+                sideOffset: 4,
+                onOpenAutoFocus: (e)=>e.preventDefault(),
+                style: {
+                    pointerEvents: 'none'
+                },
+                children: /*#__PURE__*/ jsx(Box, {
+                    padding: 2,
+                    children: /*#__PURE__*/ jsx(Box, {
+                        tag: "img",
+                        src: src,
+                        alt: alt,
+                        hasRadius: true,
+                        style: {
+                            display: 'block',
+                            maxWidth: 'min(60rem, 90vw)',
+                            maxHeight: 'min(45rem, 80vh)',
+                            objectFit: 'contain'
+                        }
+                    })
+                })
+            })
+        ]
+    });
+};
+/**
+ * Holds per-tile load-error state: when the preview image fails to load (missing file,
+ * unreachable CDN…), the tile falls back to the component icon instead of a broken image.
+ */ const ComponentTileVisual = ({ previewUrl, icon, displayName })=>{
+    const [hasLoadError, setHasLoadError] = React.useState(false);
+    if (!previewUrl || hasLoadError) {
+        return /*#__PURE__*/ jsx(ComponentIcon, {
+            color: "currentColor",
+            background: "primary200",
+            icon: icon
+        });
+    }
+    return /*#__PURE__*/ jsx(ComponentPreviewImage, {
+        src: previewUrl,
+        alt: displayName,
+        onError: ()=>setHasLoadError(true)
+    });
+};
+const ComponentCategory = ({ category, components = [], variant = 'primary', onAddComponent })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsxs(Accordion.Item, {
+        value: category,
+        children: [
+            /*#__PURE__*/ jsx(Accordion.Header, {
+                variant: variant,
+                children: /*#__PURE__*/ jsx(Accordion.Trigger, {
+                    children: formatMessage({
+                        id: category,
+                        defaultMessage: upperFirst(category)
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(ResponsiveAccordionContent, {
+                children: /*#__PURE__*/ jsx(Grid, {
+                    paddingTop: 4,
+                    paddingBottom: 4,
+                    paddingLeft: 3,
+                    paddingRight: 3,
+                    children: components.map(({ uid, displayName, icon, preview })=>{
+                        const previewUrl = resolvePreviewImageUrl(preview);
+                        return /*#__PURE__*/ jsx(ComponentBox, {
+                            tag: "button",
+                            type: "button",
+                            background: "neutral100",
+                            justifyContent: "center",
+                            onClick: onAddComponent(uid),
+                            hasRadius: true,
+                            height: "8.4rem",
+                            shrink: 0,
+                            borderColor: "neutral200",
+                            children: /*#__PURE__*/ jsxs(Flex, {
+                                direction: "column",
+                                gap: 1,
+                                alignItems: "center",
+                                justifyContent: "center",
+                                width: "100%",
+                                paddingLeft: 2,
+                                paddingRight: 2,
+                                children: [
+                                    /*#__PURE__*/ jsx(ComponentTileVisual, {
+                                        previewUrl: previewUrl,
+                                        icon: icon,
+                                        displayName: displayName
+                                    }),
+                                    /*#__PURE__*/ jsx(Tooltip, {
+                                        label: formatMessage({
+                                            id: uid,
+                                            defaultMessage: displayName ?? uid
+                                        }),
+                                        children: /*#__PURE__*/ jsx(Typography, {
+                                            variant: "pi",
+                                            fontWeight: "bold",
+                                            ellipsis: true,
+                                            width: "100%",
+                                            children: formatMessage({
+                                                id: uid,
+                                                defaultMessage: displayName ?? uid
+                                            })
+                                        })
+                                    })
+                                ]
+                            })
+                        }, uid);
+                    })
+                })
+            })
+        ]
+    });
+};
+const ResponsiveAccordionContent = styled(Accordion.Content)`
+  container-type: inline-size;
+`;
+/**
+ * TODO:
+ * JSDOM cannot handle container queries.
+ * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error
+ * for failing to parse the stylesheet.
+ */ const Grid = process.env.NODE_ENV !== 'test' ? styled(Box)`
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 100%);
+        grid-gap: 12px;
+
+        ${({ theme })=>theme.breakpoints.medium} {
+          grid-template-columns: repeat(auto-fill, 14rem);
+          grid-gap: 4px;
+        }
+      ` : styled(Box)`
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 100%);
+        grid-gap: 12px;
+
+        ${({ theme })=>theme.breakpoints.medium} {
+          grid-gap: 4px;
+        }
+      `;
+const ComponentBox = styled(Flex)`
+  color: ${({ theme })=>theme.colors.neutral600};
+  cursor: pointer;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: color 120ms ${(props)=>props.theme.motion.easings.easeOutQuad};
+  }
+
+  &:focus,
+  &:hover {
+    border: 1px solid ${({ theme })=>theme.colors.primary200};
+    background: ${({ theme })=>theme.colors.primary100};
+    color: ${({ theme })=>theme.colors.primary600};
+  }
+`;
+
+export { ComponentCategory };
+//# sourceMappingURL=ComponentCategory.mjs.map

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentCategory.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport {\r\n  Accordion,\r\n  Box,\r\n  Flex,\r\n  FlexComponent,\r\n  Popover,\r\n  Tooltip,\r\n  Typography,\r\n} from '@strapi/design-system';\r\nimport upperFirst from 'lodash/upperFirst';\r\nimport { useIntl } from 'react-intl';\r\nimport { styled } from 'styled-components';\r\n\r\nimport { ComponentIcon } from '../../../../../components/ComponentIcon';\r\nimport { resolvePreviewImageUrl } from '../../../../../utils/previewImage';\r\n\r\nimport type { Struct } from '@strapi/types';\r\n\r\ninterface ComponentCategoryProps {\r\n  category: string;\r\n  components?: Array<{\r\n    uid: string;\r\n    displayName: string;\r\n    icon?: string;\r\n    preview?: Struct.PreviewImageValue;\r\n  }>;\r\n  onAddComponent: (\r\n    componentUid: string\r\n  ) => React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\r\n  variant?: Accordion.Variant;\r\n}\r\n\r\ninterface ComponentPreviewImageProps {\r\n  src: string;\r\n  alt: string;\r\n  onError?: React.ReactEventHandler<HTMLImageElement>;\r\n}\r\n\r\n/**\r\n * Renders a small preview thumbnail inside the component picker tile and, on hover,\r\n * a larger portaled preview so authors can read the component at a glance without picking it.\r\n * Uses a controlled Popover anchored to the thumbnail — the content is portaled, so it escapes\r\n * the accordion's overflow clipping.\r\n */\r\nconst ComponentPreviewImage = ({ src, alt, onError }: ComponentPreviewImageProps) => {\r\n  const [open, setOpen] = React.useState(false);\r\n\r\n  return (\r\n    <Popover.Root open={open} onOpenChange={setOpen}>\r\n      <Popover.Anchor>\r\n        <Box\r\n          tag=\"img\"\r\n          src={src}\r\n          alt={alt}\r\n          loading=\"lazy\"\r\n          width=\"100%\"\r\n          height=\"5.2rem\"\r\n          hasRadius\r\n          style={{ objectFit: 'cover' }}\r\n          onMouseEnter={() => setOpen(true)}\r\n          onMouseLeave={() => setOpen(false)}\r\n          onError={onError}\r\n        />\r\n      </Popover.Anchor>\r\n      <Popover.Content\r\n        side=\"top\"\r\n        sideOffset={4}\r\n        onOpenAutoFocus={(e) => e.preventDefault()}\r\n        style={{ pointerEvents: 'none' }}\r\n      >\r\n        <Box padding={2}>\r\n          <Box\r\n            tag=\"img\"\r\n            src={src}\r\n            alt={alt}\r\n            hasRadius\r\n            style={{\r\n              display: 'block',\r\n              maxWidth: 'min(60rem, 90vw)',\r\n              maxHeight: 'min(45rem, 80vh)',\r\n              objectFit: 'contain',\r\n            }}\r\n          />\r\n        </Box>\r\n      </Popover.Content>\r\n    </Popover.Root>\r\n  );\r\n};\r\n\r\ninterface ComponentTileVisualProps {\r\n  previewUrl?: string;\r\n  icon?: string;\r\n  displayName: string;\r\n}\r\n\r\n/**\r\n * Holds per-tile load-error state: when the preview image fails to load (missing file,\r\n * unreachable CDN…), the tile falls back to the component icon instead of a broken image.\r\n */\r\nconst ComponentTileVisual = ({ previewUrl, icon, displayName }: ComponentTileVisualProps) => {\r\n  const [hasLoadError, setHasLoadError] = React.useState(false);\r\n\r\n  if (!previewUrl || hasLoadError) {\r\n    return <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />;\r\n  }\r\n\r\n  return (\r\n    <ComponentPreviewImage\r\n      src={previewUrl}\r\n      alt={displayName}\r\n      onError={() => setHasLoadError(true)}\r\n    />\r\n  );\r\n};\r\n\r\nconst ComponentCategory = ({\r\n  category,\r\n  components = [],\r\n  variant = 'primary',\r\n  onAddComponent,\r\n}: ComponentCategoryProps) => {\r\n  const { formatMessage } = useIntl();\r\n\r\n  return (\r\n    <Accordion.Item value={category}>\r\n      <Accordion.Header variant={variant}>\r\n        <Accordion.Trigger>\r\n          {formatMessage({ id: category, defaultMessage: upperFirst(category) })}\r\n        </Accordion.Trigger>\r\n      </Accordion.Header>\r\n      <ResponsiveAccordionContent>\r\n        <Grid paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>\r\n          {components.map(({ uid, displayName, icon, preview }) => {\r\n            const previewUrl = resolvePreviewImageUrl(preview);\r\n\r\n            return (\r\n              <ComponentBox\r\n                key={uid}\r\n                tag=\"button\"\r\n                type=\"button\"\r\n                background=\"neutral100\"\r\n                justifyContent=\"center\"\r\n                onClick={onAddComponent(uid)}\r\n                hasRadius\r\n                height=\"8.4rem\"\r\n                shrink={0}\r\n                borderColor=\"neutral200\"\r\n              >\r\n                <Flex\r\n                  direction=\"column\"\r\n                  gap={1}\r\n                  alignItems=\"center\"\r\n                  justifyContent=\"center\"\r\n                  width=\"100%\"\r\n                  paddingLeft={2}\r\n                  paddingRight={2}\r\n                >\r\n                  <ComponentTileVisual\r\n                    previewUrl={previewUrl}\r\n                    icon={icon}\r\n                    displayName={displayName}\r\n                  />\r\n\r\n                  <Tooltip label={formatMessage({ id: uid, defaultMessage: displayName ?? uid })}>\r\n                    <Typography variant=\"pi\" fontWeight=\"bold\" ellipsis width=\"100%\">\r\n                      {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\r\n                    </Typography>\r\n                  </Tooltip>\r\n                </Flex>\r\n              </ComponentBox>\r\n            );\r\n          })}\r\n        </Grid>\r\n      </ResponsiveAccordionContent>\r\n    </Accordion.Item>\r\n  );\r\n};\r\n\r\nconst ResponsiveAccordionContent = styled(Accordion.Content)`\r\n  container-type: inline-size;\r\n`;\r\n\r\n/**\r\n * TODO:\r\n * JSDOM cannot handle container queries.\r\n * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\r\n * for failing to parse the stylesheet.\r\n */\r\nconst Grid =\r\n  process.env.NODE_ENV !== 'test'\r\n    ? styled(Box)`\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fill, 100%);\r\n        grid-gap: 12px;\r\n\r\n        ${({ theme }) => theme.breakpoints.medium} {\r\n          grid-template-columns: repeat(auto-fill, 14rem);\r\n          grid-gap: 4px;\r\n        }\r\n      `\r\n    : styled(Box)`\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fill, 100%);\r\n        grid-gap: 12px;\r\n\r\n        ${({ theme }) => theme.breakpoints.medium} {\r\n          grid-gap: 4px;\r\n        }\r\n      `;\r\n\r\nconst ComponentBox = styled<FlexComponent<'button'>>(Flex)`\r\n  color: ${({ theme }) => theme.colors.neutral600};\r\n  cursor: pointer;\r\n\r\n  @media (prefers-reduced-motion: no-preference) {\r\n    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\r\n  }\r\n\r\n  &:focus,\r\n  &:hover {\r\n    border: 1px solid ${({ theme }) => theme.colors.primary200};\r\n    background: ${({ theme }) => theme.colors.primary100};\r\n    color: ${({ theme }) => theme.colors.primary600};\r\n  }\r\n`;\r\n\r\nexport { ComponentCategory };\r\nexport type { ComponentCategoryProps };\r\n"],"names":["ComponentPreviewImage","src","alt","onError","open","setOpen","React","useState","_jsxs","Popover","Root","onOpenChange","_jsx","Anchor","Box","tag","loading","width","height","hasRadius","style","objectFit","onMouseEnter","onMouseLeave","Content","side","sideOffset","onOpenAutoFocus","e","preventDefault","pointerEvents","padding","display","maxWidth","maxHeight","ComponentTileVisual","previewUrl","icon","displayName","hasLoadError","setHasLoadError","ComponentIcon","color","background","ComponentCategory","category","components","variant","onAddComponent","formatMessage","useIntl","Accordion","Item","value","Header","Trigger","id","defaultMessage","upperFirst","ResponsiveAccordionContent","Grid","paddingTop","paddingBottom","paddingLeft","paddingRight","map","uid","preview","resolvePreviewImageUrl","ComponentBox","type","justifyContent","onClick","shrink","borderColor","Flex","direction","gap","alignItems","Tooltip","label","Typography","fontWeight","ellipsis","styled","process","env","NODE_ENV","theme","breakpoints","medium","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600"],"mappings":"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"}