@strapi/content-type-builder 5.12.1 → 5.12.2

package/dist/admin/components/AttributeOptions/AttributeOptions.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var getTrad = require('../../utils/getTrad.js');
+var AttributeList = require('./AttributeList.js');
+var CustomFieldsList = require('./CustomFieldsList.js');
+
+const AttributeOptions = ({ attributes, forTarget, kind })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const defaultTabId = getTrad.getTrad('modalForm.tabs.default');
+    const customTabId = getTrad.getTrad('modalForm.tabs.custom');
+    const titleIdSuffix = forTarget.includes('component') ? 'component' : kind;
+    const titleId = getTrad.getTrad(`modalForm.sub-header.chooseAttribute.${titleIdSuffix}`);
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Body, {
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Tabs.Root, {
+            variant: "simple",
+            defaultValue: "default",
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                    justifyContent: "space-between",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            variant: "beta",
+                            tag: "h2",
+                            children: formatMessage({
+                                id: titleId,
+                                defaultMessage: 'Select a field'
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Tabs.List, {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tabs.Trigger, {
+                                    value: "default",
+                                    children: formatMessage({
+                                        id: defaultTabId,
+                                        defaultMessage: 'Default'
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tabs.Trigger, {
+                                    value: "custom",
+                                    children: formatMessage({
+                                        id: customTabId,
+                                        defaultMessage: 'Custom'
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Divider, {
+                    marginBottom: 6
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tabs.Content, {
+                    value: "default",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(AttributeList.AttributeList, {
+                        attributes: attributes
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tabs.Content, {
+                    value: "custom",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(CustomFieldsList.CustomFieldsList, {})
+                })
+            ]
+        })
+    });
+};
+
+exports.AttributeOptions = AttributeOptions;
+//# sourceMappingURL=AttributeOptions.js.map

package/dist/admin/components/AttributeOptions/AttributeOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttributeOptions.js","sources":["../../../../admin/src/components/AttributeOptions/AttributeOptions.tsx"],"sourcesContent":["/**\n *\n * AttributeOptions\n *\n */\n\nimport { Divider, Flex, Modal, Tabs, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../utils';\nimport { IconByType } from '../AttributeIcon';\n\nimport { AttributeList } from './AttributeList';\nimport { CustomFieldsList } from './CustomFieldsList';\n\ntype AttributeOptionsProps = {\n  attributes: IconByType[][];\n  forTarget: string;\n  kind: string;\n};\n\nexport const AttributeOptions = ({ attributes, forTarget, kind }: AttributeOptionsProps) => {\n  const { formatMessage } = useIntl();\n\n  const defaultTabId = getTrad('modalForm.tabs.default');\n  const customTabId = getTrad('modalForm.tabs.custom');\n\n  const titleIdSuffix = forTarget.includes('component') ? 'component' : kind;\n  const titleId = getTrad(`modalForm.sub-header.chooseAttribute.${titleIdSuffix}`);\n\n  return (\n    <Modal.Body>\n      <Tabs.Root variant=\"simple\" defaultValue=\"default\">\n        <Flex justifyContent=\"space-between\">\n          <Typography variant=\"beta\" tag=\"h2\">\n            {formatMessage({ id: titleId, defaultMessage: 'Select a field' })}\n          </Typography>\n          <Tabs.List>\n            <Tabs.Trigger value=\"default\">\n              {formatMessage({ id: defaultTabId, defaultMessage: 'Default' })}\n            </Tabs.Trigger>\n            <Tabs.Trigger value=\"custom\">\n              {formatMessage({ id: customTabId, defaultMessage: 'Custom' })}\n            </Tabs.Trigger>\n          </Tabs.List>\n        </Flex>\n        <Divider marginBottom={6} />\n        <Tabs.Content value=\"default\">\n          <AttributeList attributes={attributes} />\n        </Tabs.Content>\n        <Tabs.Content value=\"custom\">\n          <CustomFieldsList />\n        </Tabs.Content>\n      </Tabs.Root>\n    </Modal.Body>\n  );\n};\n"],"names":["AttributeOptions","attributes","forTarget","kind","formatMessage","useIntl","defaultTabId","getTrad","customTabId","titleIdSuffix","includes","titleId","_jsx","Modal","Body","_jsxs","Tabs","Root","variant","defaultValue","Flex","justifyContent","Typography","tag","id","defaultMessage","List","Trigger","value","Divider","marginBottom","Content","AttributeList","CustomFieldsList"],"mappings":";;;;;;;;;AAqBO,MAAMA,mBAAmB,CAAC,EAAEC,UAAU,EAAEC,SAAS,EAAEC,IAAI,EAAyB,GAAA;IACrF,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,MAAMC,eAAeC,eAAQ,CAAA,wBAAA,CAAA;AAC7B,IAAA,MAAMC,cAAcD,eAAQ,CAAA,uBAAA,CAAA;AAE5B,IAAA,MAAME,aAAgBP,GAAAA,SAAAA,CAAUQ,QAAQ,CAAC,eAAe,WAAcP,GAAAA,IAAAA;AACtE,IAAA,MAAMQ,UAAUJ,eAAQ,CAAA,CAAC,qCAAqC,EAAEE,cAAc,CAAC,CAAA;IAE/E,qBACEG,cAAA,CAACC,mBAAMC,IAAI,EAAA;gCACTC,eAAA,CAACC,kBAAKC,IAAI,EAAA;YAACC,OAAQ,EAAA,QAAA;YAASC,YAAa,EAAA,SAAA;;8BACvCJ,eAACK,CAAAA,iBAAAA,EAAAA;oBAAKC,cAAe,EAAA,eAAA;;sCACnBT,cAACU,CAAAA,uBAAAA,EAAAA;4BAAWJ,OAAQ,EAAA,MAAA;4BAAOK,GAAI,EAAA,IAAA;sCAC5BnB,aAAc,CAAA;gCAAEoB,EAAIb,EAAAA,OAAAA;gCAASc,cAAgB,EAAA;AAAiB,6BAAA;;AAEjE,sCAAAV,eAAA,CAACC,kBAAKU,IAAI,EAAA;;AACR,8CAAAd,cAAA,CAACI,kBAAKW,OAAO,EAAA;oCAACC,KAAM,EAAA,SAAA;8CACjBxB,aAAc,CAAA;wCAAEoB,EAAIlB,EAAAA,YAAAA;wCAAcmB,cAAgB,EAAA;AAAU,qCAAA;;AAE/D,8CAAAb,cAAA,CAACI,kBAAKW,OAAO,EAAA;oCAACC,KAAM,EAAA,QAAA;8CACjBxB,aAAc,CAAA;wCAAEoB,EAAIhB,EAAAA,WAAAA;wCAAaiB,cAAgB,EAAA;AAAS,qCAAA;;;;;;8BAIjEb,cAACiB,CAAAA,oBAAAA,EAAAA;oBAAQC,YAAc,EAAA;;AACvB,8BAAAlB,cAAA,CAACI,kBAAKe,OAAO,EAAA;oBAACH,KAAM,EAAA,SAAA;AAClB,oBAAA,QAAA,gBAAAhB,cAACoB,CAAAA,2BAAAA,EAAAA;wBAAc/B,UAAYA,EAAAA;;;AAE7B,8BAAAW,cAAA,CAACI,kBAAKe,OAAO,EAAA;oBAACH,KAAM,EAAA,QAAA;AAClB,oBAAA,QAAA,gBAAAhB,cAACqB,CAAAA,iCAAAA,EAAAA,EAAAA;;;;;AAKX;;;;"}

package/dist/admin/components/AttributeOptions/AttributeOptions.mjs

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Modal, Tabs, Flex, Typography, Divider } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../../utils/getTrad.mjs';
+import { AttributeList } from './AttributeList.mjs';
+import { CustomFieldsList } from './CustomFieldsList.mjs';
+
+const AttributeOptions = ({ attributes, forTarget, kind })=>{
+    const { formatMessage } = useIntl();
+    const defaultTabId = getTrad('modalForm.tabs.default');
+    const customTabId = getTrad('modalForm.tabs.custom');
+    const titleIdSuffix = forTarget.includes('component') ? 'component' : kind;
+    const titleId = getTrad(`modalForm.sub-header.chooseAttribute.${titleIdSuffix}`);
+    return /*#__PURE__*/ jsx(Modal.Body, {
+        children: /*#__PURE__*/ jsxs(Tabs.Root, {
+            variant: "simple",
+            defaultValue: "default",
+            children: [
+                /*#__PURE__*/ jsxs(Flex, {
+                    justifyContent: "space-between",
+                    children: [
+                        /*#__PURE__*/ jsx(Typography, {
+                            variant: "beta",
+                            tag: "h2",
+                            children: formatMessage({
+                                id: titleId,
+                                defaultMessage: 'Select a field'
+                            })
+                        }),
+                        /*#__PURE__*/ jsxs(Tabs.List, {
+                            children: [
+                                /*#__PURE__*/ jsx(Tabs.Trigger, {
+                                    value: "default",
+                                    children: formatMessage({
+                                        id: defaultTabId,
+                                        defaultMessage: 'Default'
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Tabs.Trigger, {
+                                    value: "custom",
+                                    children: formatMessage({
+                                        id: customTabId,
+                                        defaultMessage: 'Custom'
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Divider, {
+                    marginBottom: 6
+                }),
+                /*#__PURE__*/ jsx(Tabs.Content, {
+                    value: "default",
+                    children: /*#__PURE__*/ jsx(AttributeList, {
+                        attributes: attributes
+                    })
+                }),
+                /*#__PURE__*/ jsx(Tabs.Content, {
+                    value: "custom",
+                    children: /*#__PURE__*/ jsx(CustomFieldsList, {})
+                })
+            ]
+        })
+    });
+};
+
+export { AttributeOptions };
+//# sourceMappingURL=AttributeOptions.mjs.map

package/dist/admin/components/AttributeOptions/AttributeOptions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttributeOptions.mjs","sources":["../../../../admin/src/components/AttributeOptions/AttributeOptions.tsx"],"sourcesContent":["/**\n *\n * AttributeOptions\n *\n */\n\nimport { Divider, Flex, Modal, Tabs, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../utils';\nimport { IconByType } from '../AttributeIcon';\n\nimport { AttributeList } from './AttributeList';\nimport { CustomFieldsList } from './CustomFieldsList';\n\ntype AttributeOptionsProps = {\n  attributes: IconByType[][];\n  forTarget: string;\n  kind: string;\n};\n\nexport const AttributeOptions = ({ attributes, forTarget, kind }: AttributeOptionsProps) => {\n  const { formatMessage } = useIntl();\n\n  const defaultTabId = getTrad('modalForm.tabs.default');\n  const customTabId = getTrad('modalForm.tabs.custom');\n\n  const titleIdSuffix = forTarget.includes('component') ? 'component' : kind;\n  const titleId = getTrad(`modalForm.sub-header.chooseAttribute.${titleIdSuffix}`);\n\n  return (\n    <Modal.Body>\n      <Tabs.Root variant=\"simple\" defaultValue=\"default\">\n        <Flex justifyContent=\"space-between\">\n          <Typography variant=\"beta\" tag=\"h2\">\n            {formatMessage({ id: titleId, defaultMessage: 'Select a field' })}\n          </Typography>\n          <Tabs.List>\n            <Tabs.Trigger value=\"default\">\n              {formatMessage({ id: defaultTabId, defaultMessage: 'Default' })}\n            </Tabs.Trigger>\n            <Tabs.Trigger value=\"custom\">\n              {formatMessage({ id: customTabId, defaultMessage: 'Custom' })}\n            </Tabs.Trigger>\n          </Tabs.List>\n        </Flex>\n        <Divider marginBottom={6} />\n        <Tabs.Content value=\"default\">\n          <AttributeList attributes={attributes} />\n        </Tabs.Content>\n        <Tabs.Content value=\"custom\">\n          <CustomFieldsList />\n        </Tabs.Content>\n      </Tabs.Root>\n    </Modal.Body>\n  );\n};\n"],"names":["AttributeOptions","attributes","forTarget","kind","formatMessage","useIntl","defaultTabId","getTrad","customTabId","titleIdSuffix","includes","titleId","_jsx","Modal","Body","_jsxs","Tabs","Root","variant","defaultValue","Flex","justifyContent","Typography","tag","id","defaultMessage","List","Trigger","value","Divider","marginBottom","Content","AttributeList","CustomFieldsList"],"mappings":";;;;;;;AAqBO,MAAMA,mBAAmB,CAAC,EAAEC,UAAU,EAAEC,SAAS,EAAEC,IAAI,EAAyB,GAAA;IACrF,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,MAAMC,eAAeC,OAAQ,CAAA,wBAAA,CAAA;AAC7B,IAAA,MAAMC,cAAcD,OAAQ,CAAA,uBAAA,CAAA;AAE5B,IAAA,MAAME,aAAgBP,GAAAA,SAAAA,CAAUQ,QAAQ,CAAC,eAAe,WAAcP,GAAAA,IAAAA;AACtE,IAAA,MAAMQ,UAAUJ,OAAQ,CAAA,CAAC,qCAAqC,EAAEE,cAAc,CAAC,CAAA;IAE/E,qBACEG,GAAA,CAACC,MAAMC,IAAI,EAAA;gCACTC,IAAA,CAACC,KAAKC,IAAI,EAAA;YAACC,OAAQ,EAAA,QAAA;YAASC,YAAa,EAAA,SAAA;;8BACvCJ,IAACK,CAAAA,IAAAA,EAAAA;oBAAKC,cAAe,EAAA,eAAA;;sCACnBT,GAACU,CAAAA,UAAAA,EAAAA;4BAAWJ,OAAQ,EAAA,MAAA;4BAAOK,GAAI,EAAA,IAAA;sCAC5BnB,aAAc,CAAA;gCAAEoB,EAAIb,EAAAA,OAAAA;gCAASc,cAAgB,EAAA;AAAiB,6BAAA;;AAEjE,sCAAAV,IAAA,CAACC,KAAKU,IAAI,EAAA;;AACR,8CAAAd,GAAA,CAACI,KAAKW,OAAO,EAAA;oCAACC,KAAM,EAAA,SAAA;8CACjBxB,aAAc,CAAA;wCAAEoB,EAAIlB,EAAAA,YAAAA;wCAAcmB,cAAgB,EAAA;AAAU,qCAAA;;AAE/D,8CAAAb,GAAA,CAACI,KAAKW,OAAO,EAAA;oCAACC,KAAM,EAAA,QAAA;8CACjBxB,aAAc,CAAA;wCAAEoB,EAAIhB,EAAAA,WAAAA;wCAAaiB,cAAgB,EAAA;AAAS,qCAAA;;;;;;8BAIjEb,GAACiB,CAAAA,OAAAA,EAAAA;oBAAQC,YAAc,EAAA;;AACvB,8BAAAlB,GAAA,CAACI,KAAKe,OAAO,EAAA;oBAACH,KAAM,EAAA,SAAA;AAClB,oBAAA,QAAA,gBAAAhB,GAACoB,CAAAA,aAAAA,EAAAA;wBAAc/B,UAAYA,EAAAA;;;AAE7B,8BAAAW,GAAA,CAACI,KAAKe,OAAO,EAAA;oBAACH,KAAM,EAAA,QAAA;AAClB,oBAAA,QAAA,gBAAAhB,GAACqB,CAAAA,gBAAAA,EAAAA,EAAAA;;;;;AAKX;;;;"}

package/dist/admin/components/AttributeOptions/CustomFieldOption.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var useFormModalNavigation = require('../../hooks/useFormModalNavigation.js');
+var AttributeIcon = require('../AttributeIcon.js');
+var OptionBoxWrapper = require('./OptionBoxWrapper.js');
+
+const CustomFieldOption = ({ customFieldUid, customField })=>{
+    const { type, intlLabel, intlDescription } = customField;
+    const { formatMessage } = reactIntl.useIntl();
+    const { onClickSelectCustomField } = useFormModalNavigation.useFormModalNavigation();
+    const handleClick = ()=>{
+        onClickSelectCustomField({
+            attributeType: type,
+            customFieldUid
+        });
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(OptionBoxWrapper.OptionBoxWrapper, {
+        padding: 4,
+        tag: "button",
+        hasRadius: true,
+        type: "button",
+        onClick: handleClick,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(AttributeIcon.AttributeIcon, {
+                    type: type,
+                    customField: customFieldUid
+                }),
+                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+                    paddingLeft: 4,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                fontWeight: "bold",
+                                textColor: "neutral800",
+                                children: formatMessage(intlLabel)
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                variant: "pi",
+                                textColor: "neutral600",
+                                children: formatMessage(intlDescription)
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+exports.CustomFieldOption = CustomFieldOption;
+//# sourceMappingURL=CustomFieldOption.js.map

package/dist/admin/components/AttributeOptions/CustomFieldOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomFieldOption.js","sources":["../../../../admin/src/components/AttributeOptions/CustomFieldOption.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { StrapiAppContextValue } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useFormModalNavigation } from '../../hooks/useFormModalNavigation';\nimport { AttributeIcon, IconByType } from '../AttributeIcon';\n\nimport { OptionBoxWrapper } from './OptionBoxWrapper';\n\nexport type CustomFieldOption = {\n  name: string;\n  type: IconByType;\n  icon: React.ComponentType;\n  intlLabel: {\n    id: string;\n    defaultMessage: string;\n  };\n  intlDescription: {\n    id: string;\n    defaultMessage: string;\n  };\n};\n\ntype CustomFieldOptionProps = {\n  customFieldUid: string;\n  customField: NonNullable<ReturnType<StrapiAppContextValue['customFields']['get']>>;\n};\n\nexport const CustomFieldOption = ({ customFieldUid, customField }: CustomFieldOptionProps) => {\n  const { type, intlLabel, intlDescription } = customField;\n  const { formatMessage } = useIntl();\n\n  const { onClickSelectCustomField } = useFormModalNavigation();\n\n  const handleClick = () => {\n    onClickSelectCustomField({\n      attributeType: type,\n      customFieldUid,\n    });\n  };\n\n  return (\n    <OptionBoxWrapper padding={4} tag=\"button\" hasRadius type=\"button\" onClick={handleClick}>\n      <Flex>\n        <AttributeIcon type={type} customField={customFieldUid} />\n        <Box paddingLeft={4}>\n          <Flex>\n            <Typography fontWeight=\"bold\" textColor=\"neutral800\">\n              {formatMessage(intlLabel)}\n            </Typography>\n          </Flex>\n          <Flex>\n            <Typography variant=\"pi\" textColor=\"neutral600\">\n              {formatMessage(intlDescription)}\n            </Typography>\n          </Flex>\n        </Box>\n      </Flex>\n    </OptionBoxWrapper>\n  );\n};\n"],"names":["CustomFieldOption","customFieldUid","customField","type","intlLabel","intlDescription","formatMessage","useIntl","onClickSelectCustomField","useFormModalNavigation","handleClick","attributeType","_jsx","OptionBoxWrapper","padding","tag","hasRadius","onClick","_jsxs","Flex","AttributeIcon","Box","paddingLeft","Typography","fontWeight","textColor","variant"],"mappings":";;;;;;;;;;MA8BaA,iBAAoB,GAAA,CAAC,EAAEC,cAAc,EAAEC,WAAW,EAA0B,GAAA;AACvF,IAAA,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAEC,eAAe,EAAE,GAAGH,WAAAA;IAC7C,MAAM,EAAEI,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAE1B,MAAM,EAAEC,wBAAwB,EAAE,GAAGC,6CAAAA,EAAAA;AAErC,IAAA,MAAMC,WAAc,GAAA,IAAA;QAClBF,wBAAyB,CAAA;YACvBG,aAAeR,EAAAA,IAAAA;AACfF,YAAAA;AACF,SAAA,CAAA;AACF,KAAA;AAEA,IAAA,qBACEW,cAACC,CAAAA,iCAAAA,EAAAA;QAAiBC,OAAS,EAAA,CAAA;QAAGC,GAAI,EAAA,QAAA;QAASC,SAAS,EAAA,IAAA;QAACb,IAAK,EAAA,QAAA;QAASc,OAASP,EAAAA,WAAAA;AAC1E,QAAA,QAAA,gBAAAQ,eAACC,CAAAA,iBAAAA,EAAAA;;8BACCP,cAACQ,CAAAA,2BAAAA,EAAAA;oBAAcjB,IAAMA,EAAAA,IAAAA;oBAAMD,WAAaD,EAAAA;;8BACxCiB,eAACG,CAAAA,gBAAAA,EAAAA;oBAAIC,WAAa,EAAA,CAAA;;sCAChBV,cAACO,CAAAA,iBAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAP,cAACW,CAAAA,uBAAAA,EAAAA;gCAAWC,UAAW,EAAA,MAAA;gCAAOC,SAAU,EAAA,YAAA;0CACrCnB,aAAcF,CAAAA,SAAAA;;;sCAGnBQ,cAACO,CAAAA,iBAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAP,cAACW,CAAAA,uBAAAA,EAAAA;gCAAWG,OAAQ,EAAA,IAAA;gCAAKD,SAAU,EAAA,YAAA;0CAChCnB,aAAcD,CAAAA,eAAAA;;;;;;;;AAO7B;;;;"}

package/dist/admin/components/AttributeOptions/CustomFieldOption.mjs

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { Flex, Box, Typography } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { useFormModalNavigation } from '../../hooks/useFormModalNavigation.mjs';
+import { AttributeIcon } from '../AttributeIcon.mjs';
+import { OptionBoxWrapper } from './OptionBoxWrapper.mjs';
+
+const CustomFieldOption = ({ customFieldUid, customField })=>{
+    const { type, intlLabel, intlDescription } = customField;
+    const { formatMessage } = useIntl();
+    const { onClickSelectCustomField } = useFormModalNavigation();
+    const handleClick = ()=>{
+        onClickSelectCustomField({
+            attributeType: type,
+            customFieldUid
+        });
+    };
+    return /*#__PURE__*/ jsx(OptionBoxWrapper, {
+        padding: 4,
+        tag: "button",
+        hasRadius: true,
+        type: "button",
+        onClick: handleClick,
+        children: /*#__PURE__*/ jsxs(Flex, {
+            children: [
+                /*#__PURE__*/ jsx(AttributeIcon, {
+                    type: type,
+                    customField: customFieldUid
+                }),
+                /*#__PURE__*/ jsxs(Box, {
+                    paddingLeft: 4,
+                    children: [
+                        /*#__PURE__*/ jsx(Flex, {
+                            children: /*#__PURE__*/ jsx(Typography, {
+                                fontWeight: "bold",
+                                textColor: "neutral800",
+                                children: formatMessage(intlLabel)
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Flex, {
+                            children: /*#__PURE__*/ jsx(Typography, {
+                                variant: "pi",
+                                textColor: "neutral600",
+                                children: formatMessage(intlDescription)
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+export { CustomFieldOption };
+//# sourceMappingURL=CustomFieldOption.mjs.map

package/dist/admin/components/AttributeOptions/CustomFieldOption.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomFieldOption.mjs","sources":["../../../../admin/src/components/AttributeOptions/CustomFieldOption.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { StrapiAppContextValue } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useFormModalNavigation } from '../../hooks/useFormModalNavigation';\nimport { AttributeIcon, IconByType } from '../AttributeIcon';\n\nimport { OptionBoxWrapper } from './OptionBoxWrapper';\n\nexport type CustomFieldOption = {\n  name: string;\n  type: IconByType;\n  icon: React.ComponentType;\n  intlLabel: {\n    id: string;\n    defaultMessage: string;\n  };\n  intlDescription: {\n    id: string;\n    defaultMessage: string;\n  };\n};\n\ntype CustomFieldOptionProps = {\n  customFieldUid: string;\n  customField: NonNullable<ReturnType<StrapiAppContextValue['customFields']['get']>>;\n};\n\nexport const CustomFieldOption = ({ customFieldUid, customField }: CustomFieldOptionProps) => {\n  const { type, intlLabel, intlDescription } = customField;\n  const { formatMessage } = useIntl();\n\n  const { onClickSelectCustomField } = useFormModalNavigation();\n\n  const handleClick = () => {\n    onClickSelectCustomField({\n      attributeType: type,\n      customFieldUid,\n    });\n  };\n\n  return (\n    <OptionBoxWrapper padding={4} tag=\"button\" hasRadius type=\"button\" onClick={handleClick}>\n      <Flex>\n        <AttributeIcon type={type} customField={customFieldUid} />\n        <Box paddingLeft={4}>\n          <Flex>\n            <Typography fontWeight=\"bold\" textColor=\"neutral800\">\n              {formatMessage(intlLabel)}\n            </Typography>\n          </Flex>\n          <Flex>\n            <Typography variant=\"pi\" textColor=\"neutral600\">\n              {formatMessage(intlDescription)}\n            </Typography>\n          </Flex>\n        </Box>\n      </Flex>\n    </OptionBoxWrapper>\n  );\n};\n"],"names":["CustomFieldOption","customFieldUid","customField","type","intlLabel","intlDescription","formatMessage","useIntl","onClickSelectCustomField","useFormModalNavigation","handleClick","attributeType","_jsx","OptionBoxWrapper","padding","tag","hasRadius","onClick","_jsxs","Flex","AttributeIcon","Box","paddingLeft","Typography","fontWeight","textColor","variant"],"mappings":";;;;;;;;MA8BaA,iBAAoB,GAAA,CAAC,EAAEC,cAAc,EAAEC,WAAW,EAA0B,GAAA;AACvF,IAAA,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAEC,eAAe,EAAE,GAAGH,WAAAA;IAC7C,MAAM,EAAEI,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAE1B,MAAM,EAAEC,wBAAwB,EAAE,GAAGC,sBAAAA,EAAAA;AAErC,IAAA,MAAMC,WAAc,GAAA,IAAA;QAClBF,wBAAyB,CAAA;YACvBG,aAAeR,EAAAA,IAAAA;AACfF,YAAAA;AACF,SAAA,CAAA;AACF,KAAA;AAEA,IAAA,qBACEW,GAACC,CAAAA,gBAAAA,EAAAA;QAAiBC,OAAS,EAAA,CAAA;QAAGC,GAAI,EAAA,QAAA;QAASC,SAAS,EAAA,IAAA;QAACb,IAAK,EAAA,QAAA;QAASc,OAASP,EAAAA,WAAAA;AAC1E,QAAA,QAAA,gBAAAQ,IAACC,CAAAA,IAAAA,EAAAA;;8BACCP,GAACQ,CAAAA,aAAAA,EAAAA;oBAAcjB,IAAMA,EAAAA,IAAAA;oBAAMD,WAAaD,EAAAA;;8BACxCiB,IAACG,CAAAA,GAAAA,EAAAA;oBAAIC,WAAa,EAAA,CAAA;;sCAChBV,GAACO,CAAAA,IAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAP,GAACW,CAAAA,UAAAA,EAAAA;gCAAWC,UAAW,EAAA,MAAA;gCAAOC,SAAU,EAAA,YAAA;0CACrCnB,aAAcF,CAAAA,SAAAA;;;sCAGnBQ,GAACO,CAAAA,IAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAP,GAACW,CAAAA,UAAAA,EAAAA;gCAAWG,OAAQ,EAAA,IAAA;gCAAKD,SAAU,EAAA,YAAA;0CAChCnB,aAAcD,CAAAA,eAAAA;;;;;;;;AAO7B;;;;"}

package/dist/admin/components/AttributeOptions/CustomFieldsList.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var getTrad = require('../../utils/getTrad.js');
+var CustomFieldOption = require('./CustomFieldOption.js');
+var EmptyAttributes = require('./EmptyAttributes.js');
+
+const CustomFieldsList = ()=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const getAllCustomFields = strapiAdmin.useStrapiApp('CustomFieldsList', (state)=>state.customFields.getAll);
+    // TODO change this once useCustomFields is typed (helper-plugin types are solved)
+    const registeredCustomFields = Object.entries(getAllCustomFields());
+    if (!registeredCustomFields.length) {
+        return /*#__PURE__*/ jsxRuntime.jsx(EmptyAttributes.EmptyAttributes, {});
+    }
+    // Sort the array alphabetically by customField name
+    const sortedCustomFields = registeredCustomFields.sort((a, b)=>a[1].name > b[1].name ? 1 : -1);
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.KeyboardNavigable, {
+        tagName: "button",
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            direction: "column",
+            alignItems: "stretch",
+            gap: 3,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
+                    gap: 3,
+                    children: sortedCustomFields.map(([uid, customField])=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                            col: 6,
+                            direction: "column",
+                            alignItems: "stretch",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(CustomFieldOption.CustomFieldOption, {
+                                customFieldUid: uid,
+                                customField: customField
+                            }, uid)
+                        }, uid))
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Link, {
+                    href: "https://docs.strapi.io/developer-docs/latest/development/custom-fields.html",
+                    isExternal: true,
+                    children: formatMessage({
+                        id: getTrad.getTrad('modalForm.tabs.custom.howToLink'),
+                        defaultMessage: 'How to add custom fields'
+                    })
+                })
+            ]
+        })
+    });
+};
+
+exports.CustomFieldsList = CustomFieldsList;
+//# sourceMappingURL=CustomFieldsList.js.map

package/dist/admin/components/AttributeOptions/CustomFieldsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomFieldsList.js","sources":["../../../../admin/src/components/AttributeOptions/CustomFieldsList.tsx"],"sourcesContent":["import { useStrapiApp } from '@strapi/admin/strapi-admin';\nimport { Flex, Grid, KeyboardNavigable, Link } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../utils';\n\nimport { CustomFieldOption } from './CustomFieldOption';\nimport { EmptyAttributes } from './EmptyAttributes';\n\nexport const CustomFieldsList = () => {\n  const { formatMessage } = useIntl();\n  const getAllCustomFields = useStrapiApp('CustomFieldsList', (state) => state.customFields.getAll);\n  // TODO change this once useCustomFields is typed (helper-plugin types are solved)\n  const registeredCustomFields = Object.entries(getAllCustomFields());\n\n  if (!registeredCustomFields.length) {\n    return <EmptyAttributes />;\n  }\n\n  // Sort the array alphabetically by customField name\n  const sortedCustomFields = registeredCustomFields.sort((a, b) =>\n    a[1].name > b[1].name ? 1 : -1\n  );\n\n  return (\n    <KeyboardNavigable tagName=\"button\">\n      <Flex direction=\"column\" alignItems=\"stretch\" gap={3}>\n        <Grid.Root gap={3}>\n          {sortedCustomFields.map(([uid, customField]) => (\n            <Grid.Item key={uid} col={6} direction=\"column\" alignItems=\"stretch\">\n              <CustomFieldOption key={uid} customFieldUid={uid} customField={customField} />\n            </Grid.Item>\n          ))}\n        </Grid.Root>\n        <Link\n          href=\"https://docs.strapi.io/developer-docs/latest/development/custom-fields.html\"\n          isExternal\n        >\n          {formatMessage({\n            id: getTrad('modalForm.tabs.custom.howToLink'),\n            defaultMessage: 'How to add custom fields',\n          })}\n        </Link>\n      </Flex>\n    </KeyboardNavigable>\n  );\n};\n"],"names":["CustomFieldsList","formatMessage","useIntl","getAllCustomFields","useStrapiApp","state","customFields","getAll","registeredCustomFields","Object","entries","length","_jsx","EmptyAttributes","sortedCustomFields","sort","a","b","name","KeyboardNavigable","tagName","_jsxs","Flex","direction","alignItems","gap","Grid","Root","map","uid","customField","Item","col","CustomFieldOption","customFieldUid","Link","href","isExternal","id","getTrad","defaultMessage"],"mappings":";;;;;;;;;;MASaA,gBAAmB,GAAA,IAAA;IAC9B,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAMC,kBAAAA,GAAqBC,yBAAa,kBAAoB,EAAA,CAACC,QAAUA,KAAMC,CAAAA,YAAY,CAACC,MAAM,CAAA;;IAEhG,MAAMC,sBAAAA,GAAyBC,MAAOC,CAAAA,OAAO,CAACP,kBAAAA,EAAAA,CAAAA;IAE9C,IAAI,CAACK,sBAAuBG,CAAAA,MAAM,EAAE;AAClC,QAAA,qBAAOC,cAACC,CAAAA,+BAAAA,EAAAA,EAAAA,CAAAA;AACV;;IAGA,MAAMC,kBAAAA,GAAqBN,uBAAuBO,IAAI,CAAC,CAACC,CAAGC,EAAAA,CAAAA,GACzDD,CAAC,CAAC,CAAA,CAAE,CAACE,IAAI,GAAGD,CAAC,CAAC,CAAA,CAAE,CAACC,IAAI,GAAG,IAAI,CAAC,CAAA,CAAA;AAG/B,IAAA,qBACEN,cAACO,CAAAA,8BAAAA,EAAAA;QAAkBC,OAAQ,EAAA,QAAA;AACzB,QAAA,QAAA,gBAAAC,eAACC,CAAAA,iBAAAA,EAAAA;YAAKC,SAAU,EAAA,QAAA;YAASC,UAAW,EAAA,SAAA;YAAUC,GAAK,EAAA,CAAA;;AACjD,8BAAAb,cAAA,CAACc,kBAAKC,IAAI,EAAA;oBAACF,GAAK,EAAA,CAAA;8BACbX,kBAAmBc,CAAAA,GAAG,CAAC,CAAC,CAACC,KAAKC,WAAY,CAAA,iBACzClB,cAACc,CAAAA,iBAAAA,CAAKK,IAAI,EAAA;4BAAWC,GAAK,EAAA,CAAA;4BAAGT,SAAU,EAAA,QAAA;4BAASC,UAAW,EAAA,SAAA;AACzD,4BAAA,QAAA,gBAAAZ,cAACqB,CAAAA,mCAAAA,EAAAA;gCAA4BC,cAAgBL,EAAAA,GAAAA;gCAAKC,WAAaA,EAAAA;AAAvCD,6BAAAA,EAAAA,GAAAA;AADVA,yBAAAA,EAAAA,GAAAA,CAAAA;;8BAKpBjB,cAACuB,CAAAA,iBAAAA,EAAAA;oBACCC,IAAK,EAAA,6EAAA;oBACLC,UAAU,EAAA,IAAA;8BAETpC,aAAc,CAAA;AACbqC,wBAAAA,EAAAA,EAAIC,eAAQ,CAAA,iCAAA,CAAA;wBACZC,cAAgB,EAAA;AAClB,qBAAA;;;;;AAKV;;;;"}

package/dist/admin/components/AttributeOptions/CustomFieldsList.mjs

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useStrapiApp } from '@strapi/admin/strapi-admin';
+import { KeyboardNavigable, Flex, Grid, Link } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../../utils/getTrad.mjs';
+import { CustomFieldOption } from './CustomFieldOption.mjs';
+import { EmptyAttributes } from './EmptyAttributes.mjs';
+
+const CustomFieldsList = ()=>{
+    const { formatMessage } = useIntl();
+    const getAllCustomFields = useStrapiApp('CustomFieldsList', (state)=>state.customFields.getAll);
+    // TODO change this once useCustomFields is typed (helper-plugin types are solved)
+    const registeredCustomFields = Object.entries(getAllCustomFields());
+    if (!registeredCustomFields.length) {
+        return /*#__PURE__*/ jsx(EmptyAttributes, {});
+    }
+    // Sort the array alphabetically by customField name
+    const sortedCustomFields = registeredCustomFields.sort((a, b)=>a[1].name > b[1].name ? 1 : -1);
+    return /*#__PURE__*/ jsx(KeyboardNavigable, {
+        tagName: "button",
+        children: /*#__PURE__*/ jsxs(Flex, {
+            direction: "column",
+            alignItems: "stretch",
+            gap: 3,
+            children: [
+                /*#__PURE__*/ jsx(Grid.Root, {
+                    gap: 3,
+                    children: sortedCustomFields.map(([uid, customField])=>/*#__PURE__*/ jsx(Grid.Item, {
+                            col: 6,
+                            direction: "column",
+                            alignItems: "stretch",
+                            children: /*#__PURE__*/ jsx(CustomFieldOption, {
+                                customFieldUid: uid,
+                                customField: customField
+                            }, uid)
+                        }, uid))
+                }),
+                /*#__PURE__*/ jsx(Link, {
+                    href: "https://docs.strapi.io/developer-docs/latest/development/custom-fields.html",
+                    isExternal: true,
+                    children: formatMessage({
+                        id: getTrad('modalForm.tabs.custom.howToLink'),
+                        defaultMessage: 'How to add custom fields'
+                    })
+                })
+            ]
+        })
+    });
+};
+
+export { CustomFieldsList };
+//# sourceMappingURL=CustomFieldsList.mjs.map

package/dist/admin/components/AttributeOptions/CustomFieldsList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomFieldsList.mjs","sources":["../../../../admin/src/components/AttributeOptions/CustomFieldsList.tsx"],"sourcesContent":["import { useStrapiApp } from '@strapi/admin/strapi-admin';\nimport { Flex, Grid, KeyboardNavigable, Link } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../utils';\n\nimport { CustomFieldOption } from './CustomFieldOption';\nimport { EmptyAttributes } from './EmptyAttributes';\n\nexport const CustomFieldsList = () => {\n  const { formatMessage } = useIntl();\n  const getAllCustomFields = useStrapiApp('CustomFieldsList', (state) => state.customFields.getAll);\n  // TODO change this once useCustomFields is typed (helper-plugin types are solved)\n  const registeredCustomFields = Object.entries(getAllCustomFields());\n\n  if (!registeredCustomFields.length) {\n    return <EmptyAttributes />;\n  }\n\n  // Sort the array alphabetically by customField name\n  const sortedCustomFields = registeredCustomFields.sort((a, b) =>\n    a[1].name > b[1].name ? 1 : -1\n  );\n\n  return (\n    <KeyboardNavigable tagName=\"button\">\n      <Flex direction=\"column\" alignItems=\"stretch\" gap={3}>\n        <Grid.Root gap={3}>\n          {sortedCustomFields.map(([uid, customField]) => (\n            <Grid.Item key={uid} col={6} direction=\"column\" alignItems=\"stretch\">\n              <CustomFieldOption key={uid} customFieldUid={uid} customField={customField} />\n            </Grid.Item>\n          ))}\n        </Grid.Root>\n        <Link\n          href=\"https://docs.strapi.io/developer-docs/latest/development/custom-fields.html\"\n          isExternal\n        >\n          {formatMessage({\n            id: getTrad('modalForm.tabs.custom.howToLink'),\n            defaultMessage: 'How to add custom fields',\n          })}\n        </Link>\n      </Flex>\n    </KeyboardNavigable>\n  );\n};\n"],"names":["CustomFieldsList","formatMessage","useIntl","getAllCustomFields","useStrapiApp","state","customFields","getAll","registeredCustomFields","Object","entries","length","_jsx","EmptyAttributes","sortedCustomFields","sort","a","b","name","KeyboardNavigable","tagName","_jsxs","Flex","direction","alignItems","gap","Grid","Root","map","uid","customField","Item","col","CustomFieldOption","customFieldUid","Link","href","isExternal","id","getTrad","defaultMessage"],"mappings":";;;;;;;;MASaA,gBAAmB,GAAA,IAAA;IAC9B,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAMC,kBAAAA,GAAqBC,aAAa,kBAAoB,EAAA,CAACC,QAAUA,KAAMC,CAAAA,YAAY,CAACC,MAAM,CAAA;;IAEhG,MAAMC,sBAAAA,GAAyBC,MAAOC,CAAAA,OAAO,CAACP,kBAAAA,EAAAA,CAAAA;IAE9C,IAAI,CAACK,sBAAuBG,CAAAA,MAAM,EAAE;AAClC,QAAA,qBAAOC,GAACC,CAAAA,eAAAA,EAAAA,EAAAA,CAAAA;AACV;;IAGA,MAAMC,kBAAAA,GAAqBN,uBAAuBO,IAAI,CAAC,CAACC,CAAGC,EAAAA,CAAAA,GACzDD,CAAC,CAAC,CAAA,CAAE,CAACE,IAAI,GAAGD,CAAC,CAAC,CAAA,CAAE,CAACC,IAAI,GAAG,IAAI,CAAC,CAAA,CAAA;AAG/B,IAAA,qBACEN,GAACO,CAAAA,iBAAAA,EAAAA;QAAkBC,OAAQ,EAAA,QAAA;AACzB,QAAA,QAAA,gBAAAC,IAACC,CAAAA,IAAAA,EAAAA;YAAKC,SAAU,EAAA,QAAA;YAASC,UAAW,EAAA,SAAA;YAAUC,GAAK,EAAA,CAAA;;AACjD,8BAAAb,GAAA,CAACc,KAAKC,IAAI,EAAA;oBAACF,GAAK,EAAA,CAAA;8BACbX,kBAAmBc,CAAAA,GAAG,CAAC,CAAC,CAACC,KAAKC,WAAY,CAAA,iBACzClB,GAACc,CAAAA,IAAAA,CAAKK,IAAI,EAAA;4BAAWC,GAAK,EAAA,CAAA;4BAAGT,SAAU,EAAA,QAAA;4BAASC,UAAW,EAAA,SAAA;AACzD,4BAAA,QAAA,gBAAAZ,GAACqB,CAAAA,iBAAAA,EAAAA;gCAA4BC,cAAgBL,EAAAA,GAAAA;gCAAKC,WAAaA,EAAAA;AAAvCD,6BAAAA,EAAAA,GAAAA;AADVA,yBAAAA,EAAAA,GAAAA,CAAAA;;8BAKpBjB,GAACuB,CAAAA,IAAAA,EAAAA;oBACCC,IAAK,EAAA,6EAAA;oBACLC,UAAU,EAAA,IAAA;8BAETpC,aAAc,CAAA;AACbqC,wBAAAA,EAAAA,EAAIC,OAAQ,CAAA,iCAAA,CAAA;wBACZC,cAAgB,EAAA;AAClB,qBAAA;;;;;AAKV;;;;"}

package/dist/admin/components/AttributeOptions/EmptyAttributes.js

@@ -0,0 +1,123 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var Symbols = require('@strapi/icons/symbols');
+var qs = require('qs');
+var reactIntl = require('react-intl');
+var reactRouterDom = require('react-router-dom');
+var styledComponents = require('styled-components');
+var getTrad = require('../../utils/getTrad.js');
+
+function _interopNamespaceDefault(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 qs__namespace = /*#__PURE__*/_interopNamespaceDefault(qs);
+
+const EmptyCard = styledComponents.styled(designSystem.Box)`
+  background: ${({ theme })=>`linear-gradient(180deg, rgba(234, 234, 239, 0) 0%, ${theme.colors.neutral150} 100%)`};
+  opacity: 0.33;
+`;
+const EmptyCardGrid = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+        wrap: "wrap",
+        gap: 4,
+        children: [
+            ...Array(4)
+        ].map((_, idx)=>{
+            return /*#__PURE__*/ jsxRuntime.jsx(EmptyCard, {
+                height: "138px",
+                width: "375px",
+                hasRadius: true
+            }, `empty-card-${idx}`);
+        })
+    });
+};
+const EmptyAttributes = ()=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+        position: "relative",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(EmptyCardGrid, {}),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                position: "absolute",
+                top: 6,
+                width: "100%",
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                    alignItems: "center",
+                    justifyContent: "center",
+                    direction: "column",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(Symbols.EmptyDocuments, {
+                            width: "160px",
+                            height: "88px"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                            paddingTop: 6,
+                            paddingBottom: 4,
+                            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+                                textAlign: "center",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        variant: "delta",
+                                        tag: "p",
+                                        textColor: "neutral600",
+                                        children: formatMessage({
+                                            id: getTrad.getTrad('modalForm.empty.heading'),
+                                            defaultMessage: 'Nothing in here yet.'
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                        paddingTop: 4,
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                            variant: "delta",
+                                            tag: "p",
+                                            textColor: "neutral600",
+                                            children: formatMessage({
+                                                id: getTrad.getTrad('modalForm.empty.sub-heading'),
+                                                defaultMessage: 'Find what you are looking for through a wide range of extensions.'
+                                            })
+                                        })
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.LinkButton, {
+                            tag: reactRouterDom.Link,
+                            to: `/marketplace?${qs__namespace.stringify({
+                                categories: [
+                                    'Custom fields'
+                                ]
+                            })}`,
+                            variant: "secondary",
+                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Plus, {}),
+                            children: formatMessage({
+                                id: getTrad.getTrad('modalForm.empty.button'),
+                                defaultMessage: 'Add custom fields'
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+exports.EmptyAttributes = EmptyAttributes;
+exports.EmptyCardGrid = EmptyCardGrid;
+//# sourceMappingURL=EmptyAttributes.js.map

package/dist/admin/components/AttributeOptions/EmptyAttributes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyAttributes.js","sources":["../../../../admin/src/components/AttributeOptions/EmptyAttributes.tsx"],"sourcesContent":["import { Box, Flex, Typography, LinkButton } from '@strapi/design-system';\nimport { Plus } from '@strapi/icons';\nimport { EmptyDocuments } from '@strapi/icons/symbols';\nimport * as qs from 'qs';\nimport { useIntl } from 'react-intl';\nimport { Link } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../utils';\n\nconst EmptyCard = styled(Box)`\n  background: ${({ theme }) =>\n    `linear-gradient(180deg, rgba(234, 234, 239, 0) 0%, ${theme.colors.neutral150} 100%)`};\n  opacity: 0.33;\n`;\n\nexport const EmptyCardGrid = () => {\n  return (\n    <Flex wrap=\"wrap\" gap={4}>\n      {[...Array(4)].map((_, idx) => {\n        return (\n          <EmptyCard\n            // eslint-disable-next-line react/no-array-index-key\n            key={`empty-card-${idx}`}\n            height=\"138px\"\n            width=\"375px\"\n            hasRadius\n          />\n        );\n      })}\n    </Flex>\n  );\n};\n\nexport const EmptyAttributes = () => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Box position=\"relative\">\n      <EmptyCardGrid />\n      <Box position=\"absolute\" top={6} width=\"100%\">\n        <Flex alignItems=\"center\" justifyContent=\"center\" direction=\"column\">\n          <EmptyDocuments width=\"160px\" height=\"88px\" />\n          <Box paddingTop={6} paddingBottom={4}>\n            <Box textAlign=\"center\">\n              <Typography variant=\"delta\" tag=\"p\" textColor=\"neutral600\">\n                {formatMessage({\n                  id: getTrad('modalForm.empty.heading'),\n                  defaultMessage: 'Nothing in here yet.',\n                })}\n              </Typography>\n              <Box paddingTop={4}>\n                <Typography variant=\"delta\" tag=\"p\" textColor=\"neutral600\">\n                  {formatMessage({\n                    id: getTrad('modalForm.empty.sub-heading'),\n                    defaultMessage:\n                      'Find what you are looking for through a wide range of extensions.',\n                  })}\n                </Typography>\n              </Box>\n            </Box>\n          </Box>\n          <LinkButton\n            tag={Link}\n            to={`/marketplace?${qs.stringify({ categories: ['Custom fields'] })}`}\n            variant=\"secondary\"\n            startIcon={<Plus />}\n          >\n            {formatMessage({\n              id: getTrad('modalForm.empty.button'),\n              defaultMessage: 'Add custom fields',\n            })}\n          </LinkButton>\n        </Flex>\n      </Box>\n    </Box>\n  );\n};\n"],"names":["EmptyCard","styled","Box","theme","colors","neutral150","EmptyCardGrid","_jsx","Flex","wrap","gap","Array","map","_","idx","height","width","hasRadius","EmptyAttributes","formatMessage","useIntl","_jsxs","position","top","alignItems","justifyContent","direction","EmptyDocuments","paddingTop","paddingBottom","textAlign","Typography","variant","tag","textColor","id","getTrad","defaultMessage","LinkButton","Link","to","qs","stringify","categories","startIcon","Plus"],"mappings":"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"}