@strapi/content-type-builder 5.12.1 → 5.12.3

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListRow.mjs","sources":["../../../admin/src/components/ListRow.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport { Box, Flex, IconButton, Typography } from '@strapi/design-system';\nimport { Lock, Pencil, Trash } from '@strapi/icons';\nimport get from 'lodash/get';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useDataManager } from '../hooks/useDataManager';\nimport { Curve } from '../icons/Curve';\nimport { getTrad } from '../utils/getTrad';\n\nimport { AttributeIcon, IconByType } from './AttributeIcon';\nimport { DisplayedType } from './DisplayedType';\nimport { UpperFirst } from './UpperFirst';\n\nimport type { SchemaType } from '../types';\n\nexport const BoxWrapper = styled(Box)`\n  position: relative;\n`;\n\ntype ListRowProps = {\n  configurable?: boolean;\n  customField?: string | null;\n  editTarget: SchemaType;\n  firstLoopComponentUid?: string | null;\n  isFromDynamicZone?: boolean;\n  name: string;\n  onClick: (\n    editTarget: string,\n    targetUid: string | null,\n    attributeName: string,\n    attributeType: string,\n    customField: string | null\n  ) => void;\n  relation?: string;\n  repeatable?: boolean;\n  secondLoopComponentUid?: string | null;\n  target?: string | null;\n  targetUid?: string | null;\n  type: IconByType;\n};\n\nexport const ListRow = memo(\n  ({\n    configurable = true,\n    customField = null,\n    editTarget,\n    firstLoopComponentUid = null,\n    isFromDynamicZone = false,\n    name,\n    onClick,\n    relation = '',\n    repeatable = false,\n    secondLoopComponentUid = null,\n    target = null,\n    targetUid = null,\n    type,\n  }: ListRowProps) => {\n    const { contentTypes, isInDevelopmentMode, removeAttribute } = useDataManager();\n    const { formatMessage } = useIntl();\n\n    const isMorph = type === 'relation' && relation.includes('morph');\n    const ico = ['integer', 'biginteger', 'float', 'decimal'].includes(type) ? 'number' : type;\n\n    const contentType = get(contentTypes, [target as keyof typeof contentTypes], {});\n    const contentTypeFriendlyName = get(contentType, ['schema', 'displayName'], '');\n    const isPluginContentType = get(contentType, 'plugin');\n\n    const src = target ? 'relation' : ico;\n\n    const handleClick = () => {\n      if (isMorph) {\n        return;\n      }\n\n      if (configurable !== false) {\n        const attrType = type;\n\n        onClick(\n          // Tells where the attribute is located in the main modifiedData object : contentType, component or components\n          editTarget,\n          // main data type uid\n          secondLoopComponentUid || firstLoopComponentUid || targetUid,\n          // Name of the attribute\n          name,\n          // Type of the attribute\n          attrType,\n          customField\n        );\n      }\n    };\n    let loopNumber;\n\n    if (secondLoopComponentUid && firstLoopComponentUid) {\n      loopNumber = 2;\n    } else if (firstLoopComponentUid) {\n      loopNumber = 1;\n    } else {\n      loopNumber = 0;\n    }\n\n    return (\n      <BoxWrapper\n        tag=\"tr\"\n        onClick={isInDevelopmentMode && configurable && !isMorph ? handleClick : undefined}\n      >\n        <td style={{ position: 'relative' }}>\n          {loopNumber !== 0 && <Curve color={isFromDynamicZone ? 'primary200' : 'neutral150'} />}\n          <Flex paddingLeft={2} gap={4}>\n            <AttributeIcon type={src} customField={customField} />\n            <Typography textColor=\"neutral800\" fontWeight=\"bold\">\n              {name}\n            </Typography>\n          </Flex>\n        </td>\n        <td>\n          {target ? (\n            <Typography textColor=\"neutral800\">\n              {formatMessage({\n                id: getTrad(\n                  `modelPage.attribute.${isMorph ? 'relation-polymorphic' : 'relationWith'}`\n                ),\n                defaultMessage: 'Relation with',\n              })}\n              &nbsp;\n              <span style={{ fontStyle: 'italic' }}>\n                <UpperFirst content={contentTypeFriendlyName} />\n                &nbsp;\n                {isPluginContentType &&\n                  `(${formatMessage({\n                    id: getTrad(`from`),\n                    defaultMessage: 'from',\n                  })}: ${isPluginContentType})`}\n              </span>\n            </Typography>\n          ) : (\n            <DisplayedType type={type} customField={customField} repeatable={repeatable} />\n          )}\n        </td>\n        <td>\n          {isInDevelopmentMode ? (\n            <Flex justifyContent=\"flex-end\" onClick={(e) => e.stopPropagation()}>\n              {configurable ? (\n                <Flex gap={1}>\n                  {!isMorph && (\n                    <IconButton\n                      onClick={handleClick}\n                      label={`${formatMessage({\n                        id: 'app.utils.edit',\n                        defaultMessage: 'Edit',\n                      })} ${name}`}\n                      variant=\"ghost\"\n                    >\n                      <Pencil />\n                    </IconButton>\n                  )}\n                  <IconButton\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      removeAttribute(\n                        editTarget,\n                        name,\n                        secondLoopComponentUid || firstLoopComponentUid || ''\n                      );\n                    }}\n                    label={`${formatMessage({\n                      id: 'global.delete',\n                      defaultMessage: 'Delete',\n                    })} ${name}`}\n                    variant=\"ghost\"\n                  >\n                    <Trash />\n                  </IconButton>\n                </Flex>\n              ) : (\n                <Lock />\n              )}\n            </Flex>\n          ) : (\n            /*\n            In production mode the edit icons aren't visible, therefore\n            we need to reserve the same space, otherwise the height of the\n            row might collapse, leading to bad positioned curve icons\n          */\n            <Box height=\"3.2rem\" />\n          )}\n        </td>\n      </BoxWrapper>\n    );\n  }\n);\n"],"names":["BoxWrapper","styled","Box","ListRow","memo","configurable","customField","editTarget","firstLoopComponentUid","isFromDynamicZone","name","onClick","relation","repeatable","secondLoopComponentUid","target","targetUid","type","contentTypes","isInDevelopmentMode","removeAttribute","useDataManager","formatMessage","useIntl","isMorph","includes","ico","contentType","get","contentTypeFriendlyName","isPluginContentType","src","handleClick","attrType","loopNumber","_jsxs","tag","undefined","td","style","position","_jsx","Curve","color","Flex","paddingLeft","gap","AttributeIcon","Typography","textColor","fontWeight","id","getTrad","defaultMessage","span","fontStyle","UpperFirst","content","DisplayedType","justifyContent","e","stopPropagation","IconButton","label","variant","Pencil","Trash","Lock","height"],"mappings":"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"}

package/dist/admin/components/NestedFooter.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var styledComponents = require('styled-components');
+
+const IconBox = styledComponents.styled(designSystem.Box)`
+  height: 2.4rem;
+  width: 2.4rem;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+
+  svg path {
+    fill: ${({ theme, color })=>theme.colors[`${color}600`]};
+  }
+`;
+const ButtonBox = styledComponents.styled(designSystem.Box)`
+  border-radius: 0 0 ${({ theme })=>theme.borderRadius} ${({ theme })=>theme.borderRadius};
+  display: block;
+  width: 100%;
+  border: none;
+  position: relative;
+  left: -0.4rem;
+`;
+const NestedTFooter = ({ children, icon, color, ...props })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(ButtonBox, {
+        paddingBottom: 4,
+        paddingTop: 4,
+        tag: "button",
+        type: "button",
+        ...props,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(IconBox, {
+                    color: color,
+                    "aria-hidden": true,
+                    background: `${color}200`,
+                    children: icon
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                    paddingLeft: 3,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        variant: "pi",
+                        fontWeight: "bold",
+                        textColor: `${color}600`,
+                        children: children
+                    })
+                })
+            ]
+        })
+    });
+};
+
+exports.NestedTFooter = NestedTFooter;
+//# sourceMappingURL=NestedFooter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NestedFooter.js","sources":["../../../admin/src/components/NestedFooter.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst IconBox = styled(Box)`\n  height: 2.4rem;\n  width: 2.4rem;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    height: 1rem;\n    width: 1rem;\n  }\n\n  svg path {\n    fill: ${({ theme, color }) => theme.colors[`${color}600`]};\n  }\n`;\n\nconst ButtonBox = styled(Box)`\n  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};\n  display: block;\n  width: 100%;\n  border: none;\n  position: relative;\n  left: -0.4rem;\n`;\n\ninterface NestedTFooterProps {\n  color: string;\n  children: ReactNode;\n  icon: ReactNode;\n  onClick?: () => void;\n}\n\nexport const NestedTFooter = ({ children, icon, color, ...props }: NestedTFooterProps) => {\n  return (\n    <ButtonBox paddingBottom={4} paddingTop={4} tag=\"button\" type=\"button\" {...props}>\n      <Flex>\n        <IconBox color={color} aria-hidden background={`${color}200`}>\n          {icon}\n        </IconBox>\n        <Box paddingLeft={3}>\n          <Typography variant=\"pi\" fontWeight=\"bold\" textColor={`${color}600`}>\n            {children}\n          </Typography>\n        </Box>\n      </Flex>\n    </ButtonBox>\n  );\n};\n"],"names":["IconBox","styled","Box","theme","color","colors","ButtonBox","borderRadius","NestedTFooter","children","icon","props","_jsx","paddingBottom","paddingTop","tag","type","_jsxs","Flex","aria-hidden","background","paddingLeft","Typography","variant","fontWeight","textColor"],"mappings":";;;;;;AAKA,MAAMA,OAAAA,GAAUC,uBAAOC,CAAAA,gBAAAA,CAAI;;;;;;;;;;;;;;AAcjB,UAAA,EAAE,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAKD,KAAAA,CAAME,MAAM,CAAC,CAAC,EAAED,KAAAA,CAAM,GAAG,CAAC,CAAC,CAAC;;AAE9D,CAAC;AAED,MAAME,SAAAA,GAAYL,uBAAOC,CAAAA,gBAAAA,CAAI;AACR,qBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,MAAMI,YAAY,CAAC,CAAC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMI,YAAY,CAAC;;;;;;AAM9F,CAAC;AASM,MAAMC,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAEN,KAAK,EAAE,GAAGO,KAA2B,EAAA,GAAA;AACnF,IAAA,qBACEC,cAACN,CAAAA,SAAAA,EAAAA;QAAUO,aAAe,EAAA,CAAA;QAAGC,UAAY,EAAA,CAAA;QAAGC,GAAI,EAAA,QAAA;QAASC,IAAK,EAAA,QAAA;AAAU,QAAA,GAAGL,KAAK;AAC9E,QAAA,QAAA,gBAAAM,eAACC,CAAAA,iBAAAA,EAAAA;;8BACCN,cAACZ,CAAAA,OAAAA,EAAAA;oBAAQI,KAAOA,EAAAA,KAAAA;oBAAOe,aAAW,EAAA,IAAA;AAACC,oBAAAA,UAAAA,EAAY,CAAC,EAAEhB,KAAM,CAAA,GAAG,CAAC;AACzDM,oBAAAA,QAAAA,EAAAA;;8BAEHE,cAACV,CAAAA,gBAAAA,EAAAA;oBAAImB,WAAa,EAAA,CAAA;AAChB,oBAAA,QAAA,gBAAAT,cAACU,CAAAA,uBAAAA,EAAAA;wBAAWC,OAAQ,EAAA,IAAA;wBAAKC,UAAW,EAAA,MAAA;AAAOC,wBAAAA,SAAAA,EAAW,CAAC,EAAErB,KAAM,CAAA,GAAG,CAAC;AAChEK,wBAAAA,QAAAA,EAAAA;;;;;;AAMb;;;;"}

package/dist/admin/components/NestedFooter.mjs

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, Flex, Typography } from '@strapi/design-system';
+import { styled } from 'styled-components';
+
+const IconBox = styled(Box)`
+  height: 2.4rem;
+  width: 2.4rem;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+
+  svg path {
+    fill: ${({ theme, color })=>theme.colors[`${color}600`]};
+  }
+`;
+const ButtonBox = styled(Box)`
+  border-radius: 0 0 ${({ theme })=>theme.borderRadius} ${({ theme })=>theme.borderRadius};
+  display: block;
+  width: 100%;
+  border: none;
+  position: relative;
+  left: -0.4rem;
+`;
+const NestedTFooter = ({ children, icon, color, ...props })=>{
+    return /*#__PURE__*/ jsx(ButtonBox, {
+        paddingBottom: 4,
+        paddingTop: 4,
+        tag: "button",
+        type: "button",
+        ...props,
+        children: /*#__PURE__*/ jsxs(Flex, {
+            children: [
+                /*#__PURE__*/ jsx(IconBox, {
+                    color: color,
+                    "aria-hidden": true,
+                    background: `${color}200`,
+                    children: icon
+                }),
+                /*#__PURE__*/ jsx(Box, {
+                    paddingLeft: 3,
+                    children: /*#__PURE__*/ jsx(Typography, {
+                        variant: "pi",
+                        fontWeight: "bold",
+                        textColor: `${color}600`,
+                        children: children
+                    })
+                })
+            ]
+        })
+    });
+};
+
+export { NestedTFooter };
+//# sourceMappingURL=NestedFooter.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NestedFooter.mjs","sources":["../../../admin/src/components/NestedFooter.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst IconBox = styled(Box)`\n  height: 2.4rem;\n  width: 2.4rem;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    height: 1rem;\n    width: 1rem;\n  }\n\n  svg path {\n    fill: ${({ theme, color }) => theme.colors[`${color}600`]};\n  }\n`;\n\nconst ButtonBox = styled(Box)`\n  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};\n  display: block;\n  width: 100%;\n  border: none;\n  position: relative;\n  left: -0.4rem;\n`;\n\ninterface NestedTFooterProps {\n  color: string;\n  children: ReactNode;\n  icon: ReactNode;\n  onClick?: () => void;\n}\n\nexport const NestedTFooter = ({ children, icon, color, ...props }: NestedTFooterProps) => {\n  return (\n    <ButtonBox paddingBottom={4} paddingTop={4} tag=\"button\" type=\"button\" {...props}>\n      <Flex>\n        <IconBox color={color} aria-hidden background={`${color}200`}>\n          {icon}\n        </IconBox>\n        <Box paddingLeft={3}>\n          <Typography variant=\"pi\" fontWeight=\"bold\" textColor={`${color}600`}>\n            {children}\n          </Typography>\n        </Box>\n      </Flex>\n    </ButtonBox>\n  );\n};\n"],"names":["IconBox","styled","Box","theme","color","colors","ButtonBox","borderRadius","NestedTFooter","children","icon","props","_jsx","paddingBottom","paddingTop","tag","type","_jsxs","Flex","aria-hidden","background","paddingLeft","Typography","variant","fontWeight","textColor"],"mappings":";;;;AAKA,MAAMA,OAAAA,GAAUC,MAAOC,CAAAA,GAAAA,CAAI;;;;;;;;;;;;;;AAcjB,UAAA,EAAE,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAKD,KAAAA,CAAME,MAAM,CAAC,CAAC,EAAED,KAAAA,CAAM,GAAG,CAAC,CAAC,CAAC;;AAE9D,CAAC;AAED,MAAME,SAAAA,GAAYL,MAAOC,CAAAA,GAAAA,CAAI;AACR,qBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,MAAMI,YAAY,CAAC,CAAC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMI,YAAY,CAAC;;;;;;AAM9F,CAAC;AASM,MAAMC,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAEN,KAAK,EAAE,GAAGO,KAA2B,EAAA,GAAA;AACnF,IAAA,qBACEC,GAACN,CAAAA,SAAAA,EAAAA;QAAUO,aAAe,EAAA,CAAA;QAAGC,UAAY,EAAA,CAAA;QAAGC,GAAI,EAAA,QAAA;QAASC,IAAK,EAAA,QAAA;AAAU,QAAA,GAAGL,KAAK;AAC9E,QAAA,QAAA,gBAAAM,IAACC,CAAAA,IAAAA,EAAAA;;8BACCN,GAACZ,CAAAA,OAAAA,EAAAA;oBAAQI,KAAOA,EAAAA,KAAAA;oBAAOe,aAAW,EAAA,IAAA;AAACC,oBAAAA,UAAAA,EAAY,CAAC,EAAEhB,KAAM,CAAA,GAAG,CAAC;AACzDM,oBAAAA,QAAAA,EAAAA;;8BAEHE,GAACV,CAAAA,GAAAA,EAAAA;oBAAImB,WAAa,EAAA,CAAA;AAChB,oBAAA,QAAA,gBAAAT,GAACU,CAAAA,UAAAA,EAAAA;wBAAWC,OAAQ,EAAA,IAAA;wBAAKC,UAAW,EAAA,MAAA;AAAOC,wBAAAA,SAAAA,EAAW,CAAC,EAAErB,KAAM,CAAA,GAAG,CAAC;AAChEK,wBAAAA,QAAAA,EAAAA;;;;;;AAMb;;;;"}

package/dist/admin/components/PluralName.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var pluralize = require('pluralize');
+var reactIntl = require('react-intl');
+var nameToSlug = require('../utils/nameToSlug.js');
+
+const PluralName = ({ description, error, intlLabel, modifiedData, name, onChange, value })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const onChangeRef = React.useRef(onChange);
+    const displayName = modifiedData?.displayName || '';
+    React.useEffect(()=>{
+        if (displayName) {
+            const value = nameToSlug.nameToSlug(displayName);
+            try {
+                const plural = pluralize(value, 2);
+                onChangeRef.current({
+                    target: {
+                        name,
+                        value: plural
+                    }
+                });
+            } catch (err) {
+                onChangeRef.current({
+                    target: {
+                        name,
+                        value
+                    }
+                });
+            }
+        } else {
+            onChangeRef.current({
+                target: {
+                    name,
+                    value: ''
+                }
+            });
+        }
+    }, [
+        displayName,
+        name
+    ]);
+    const errorMessage = error ? formatMessage({
+        id: error,
+        defaultMessage: error
+    }) : '';
+    const hint = description ? formatMessage({
+        id: description.id,
+        defaultMessage: description.defaultMessage
+    }, {
+        ...description.values
+    }) : '';
+    const label = formatMessage(intlLabel);
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+        error: errorMessage,
+        hint: hint,
+        name: name,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextInput, {
+                onChange: onChange,
+                value: value || ''
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {})
+        ]
+    });
+};
+
+exports.PluralName = PluralName;
+//# sourceMappingURL=PluralName.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PluralName.js","sources":["../../../admin/src/components/PluralName.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport { Field, TextInput } from '@strapi/design-system';\nimport pluralize from 'pluralize';\nimport { useIntl } from 'react-intl';\n\nimport { nameToSlug } from '../utils/nameToSlug';\n\nimport type { IntlLabel } from '../types';\n\ninterface Description {\n  id: string;\n  defaultMessage: string;\n  values?: Record<string, any>;\n}\n\ninterface PluralNameProps {\n  description?: Description;\n  error?: string;\n  intlLabel: IntlLabel;\n  modifiedData: Record<string, any>;\n  name: string;\n  onChange: (value: { target: { name: string; value: string } }) => void;\n  value?: string;\n}\n\nexport const PluralName = ({\n  description,\n  error,\n  intlLabel,\n  modifiedData,\n  name,\n  onChange,\n  value,\n}: PluralNameProps) => {\n  const { formatMessage } = useIntl();\n  const onChangeRef = useRef(onChange);\n  const displayName = modifiedData?.displayName || '';\n\n  useEffect(() => {\n    if (displayName) {\n      const value = nameToSlug(displayName);\n\n      try {\n        const plural = pluralize(value, 2);\n        onChangeRef.current({ target: { name, value: plural } });\n      } catch (err) {\n        onChangeRef.current({ target: { name, value } });\n      }\n    } else {\n      onChangeRef.current({ target: { name, value: '' } });\n    }\n  }, [displayName, name]);\n\n  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';\n  const hint = description\n    ? formatMessage(\n        { id: description.id, defaultMessage: description.defaultMessage },\n        { ...description.values }\n      )\n    : '';\n  const label = formatMessage(intlLabel);\n\n  return (\n    <Field.Root error={errorMessage} hint={hint} name={name}>\n      <Field.Label>{label}</Field.Label>\n      <TextInput onChange={onChange} value={value || ''} />\n      <Field.Error />\n    </Field.Root>\n  );\n};\n"],"names":["PluralName","description","error","intlLabel","modifiedData","name","onChange","value","formatMessage","useIntl","onChangeRef","useRef","displayName","useEffect","nameToSlug","plural","pluralize","current","target","err","errorMessage","id","defaultMessage","hint","values","label","_jsxs","Field","Root","_jsx","Label","TextInput","Error"],"mappings":";;;;;;;;;MA0BaA,UAAa,GAAA,CAAC,EACzBC,WAAW,EACXC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,IAAI,EACJC,QAAQ,EACRC,KAAK,EACW,GAAA;IAChB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAMC,cAAcC,YAAOL,CAAAA,QAAAA,CAAAA;IAC3B,MAAMM,WAAAA,GAAcR,cAAcQ,WAAe,IAAA,EAAA;IAEjDC,eAAU,CAAA,IAAA;AACR,QAAA,IAAID,WAAa,EAAA;AACf,YAAA,MAAML,QAAQO,qBAAWF,CAAAA,WAAAA,CAAAA;YAEzB,IAAI;gBACF,MAAMG,MAAAA,GAASC,UAAUT,KAAO,EAAA,CAAA,CAAA;AAChCG,gBAAAA,WAAAA,CAAYO,OAAO,CAAC;oBAAEC,MAAQ,EAAA;AAAEb,wBAAAA,IAAAA;wBAAME,KAAOQ,EAAAA;AAAO;AAAE,iBAAA,CAAA;AACxD,aAAA,CAAE,OAAOI,GAAK,EAAA;AACZT,gBAAAA,WAAAA,CAAYO,OAAO,CAAC;oBAAEC,MAAQ,EAAA;AAAEb,wBAAAA,IAAAA;AAAME,wBAAAA;AAAM;AAAE,iBAAA,CAAA;AAChD;SACK,MAAA;AACLG,YAAAA,WAAAA,CAAYO,OAAO,CAAC;gBAAEC,MAAQ,EAAA;AAAEb,oBAAAA,IAAAA;oBAAME,KAAO,EAAA;AAAG;AAAE,aAAA,CAAA;AACpD;KACC,EAAA;AAACK,QAAAA,WAAAA;AAAaP,QAAAA;AAAK,KAAA,CAAA;IAEtB,MAAMe,YAAAA,GAAelB,QAAQM,aAAc,CAAA;QAAEa,EAAInB,EAAAA,KAAAA;QAAOoB,cAAgBpB,EAAAA;KAAW,CAAA,GAAA,EAAA;IACnF,MAAMqB,IAAAA,GAAOtB,cACTO,aACE,CAAA;AAAEa,QAAAA,EAAAA,EAAIpB,YAAYoB,EAAE;AAAEC,QAAAA,cAAAA,EAAgBrB,YAAYqB;KAClD,EAAA;AAAE,QAAA,GAAGrB,YAAYuB;KAEnB,CAAA,GAAA,EAAA;AACJ,IAAA,MAAMC,QAAQjB,aAAcL,CAAAA,SAAAA,CAAAA;IAE5B,qBACEuB,eAAA,CAACC,mBAAMC,IAAI,EAAA;QAAC1B,KAAOkB,EAAAA,YAAAA;QAAcG,IAAMA,EAAAA,IAAAA;QAAMlB,IAAMA,EAAAA,IAAAA;;AACjD,0BAAAwB,cAAA,CAACF,mBAAMG,KAAK,EAAA;AAAEL,gBAAAA,QAAAA,EAAAA;;0BACdI,cAACE,CAAAA,sBAAAA,EAAAA;gBAAUzB,QAAUA,EAAAA,QAAAA;AAAUC,gBAAAA,KAAAA,EAAOA,KAAS,IAAA;;AAC/C,0BAAAsB,cAAA,CAACF,mBAAMK,KAAK,EAAA,EAAA;;;AAGlB;;;;"}

package/dist/admin/components/PluralName.mjs

@@ -0,0 +1,72 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { Field, TextInput } from '@strapi/design-system';
+import pluralize from 'pluralize';
+import { useIntl } from 'react-intl';
+import { nameToSlug } from '../utils/nameToSlug.mjs';
+
+const PluralName = ({ description, error, intlLabel, modifiedData, name, onChange, value })=>{
+    const { formatMessage } = useIntl();
+    const onChangeRef = useRef(onChange);
+    const displayName = modifiedData?.displayName || '';
+    useEffect(()=>{
+        if (displayName) {
+            const value = nameToSlug(displayName);
+            try {
+                const plural = pluralize(value, 2);
+                onChangeRef.current({
+                    target: {
+                        name,
+                        value: plural
+                    }
+                });
+            } catch (err) {
+                onChangeRef.current({
+                    target: {
+                        name,
+                        value
+                    }
+                });
+            }
+        } else {
+            onChangeRef.current({
+                target: {
+                    name,
+                    value: ''
+                }
+            });
+        }
+    }, [
+        displayName,
+        name
+    ]);
+    const errorMessage = error ? formatMessage({
+        id: error,
+        defaultMessage: error
+    }) : '';
+    const hint = description ? formatMessage({
+        id: description.id,
+        defaultMessage: description.defaultMessage
+    }, {
+        ...description.values
+    }) : '';
+    const label = formatMessage(intlLabel);
+    return /*#__PURE__*/ jsxs(Field.Root, {
+        error: errorMessage,
+        hint: hint,
+        name: name,
+        children: [
+            /*#__PURE__*/ jsx(Field.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ jsx(TextInput, {
+                onChange: onChange,
+                value: value || ''
+            }),
+            /*#__PURE__*/ jsx(Field.Error, {})
+        ]
+    });
+};
+
+export { PluralName };
+//# sourceMappingURL=PluralName.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PluralName.mjs","sources":["../../../admin/src/components/PluralName.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport { Field, TextInput } from '@strapi/design-system';\nimport pluralize from 'pluralize';\nimport { useIntl } from 'react-intl';\n\nimport { nameToSlug } from '../utils/nameToSlug';\n\nimport type { IntlLabel } from '../types';\n\ninterface Description {\n  id: string;\n  defaultMessage: string;\n  values?: Record<string, any>;\n}\n\ninterface PluralNameProps {\n  description?: Description;\n  error?: string;\n  intlLabel: IntlLabel;\n  modifiedData: Record<string, any>;\n  name: string;\n  onChange: (value: { target: { name: string; value: string } }) => void;\n  value?: string;\n}\n\nexport const PluralName = ({\n  description,\n  error,\n  intlLabel,\n  modifiedData,\n  name,\n  onChange,\n  value,\n}: PluralNameProps) => {\n  const { formatMessage } = useIntl();\n  const onChangeRef = useRef(onChange);\n  const displayName = modifiedData?.displayName || '';\n\n  useEffect(() => {\n    if (displayName) {\n      const value = nameToSlug(displayName);\n\n      try {\n        const plural = pluralize(value, 2);\n        onChangeRef.current({ target: { name, value: plural } });\n      } catch (err) {\n        onChangeRef.current({ target: { name, value } });\n      }\n    } else {\n      onChangeRef.current({ target: { name, value: '' } });\n    }\n  }, [displayName, name]);\n\n  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';\n  const hint = description\n    ? formatMessage(\n        { id: description.id, defaultMessage: description.defaultMessage },\n        { ...description.values }\n      )\n    : '';\n  const label = formatMessage(intlLabel);\n\n  return (\n    <Field.Root error={errorMessage} hint={hint} name={name}>\n      <Field.Label>{label}</Field.Label>\n      <TextInput onChange={onChange} value={value || ''} />\n      <Field.Error />\n    </Field.Root>\n  );\n};\n"],"names":["PluralName","description","error","intlLabel","modifiedData","name","onChange","value","formatMessage","useIntl","onChangeRef","useRef","displayName","useEffect","nameToSlug","plural","pluralize","current","target","err","errorMessage","id","defaultMessage","hint","values","label","_jsxs","Field","Root","_jsx","Label","TextInput","Error"],"mappings":";;;;;;;MA0BaA,UAAa,GAAA,CAAC,EACzBC,WAAW,EACXC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,IAAI,EACJC,QAAQ,EACRC,KAAK,EACW,GAAA;IAChB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAMC,cAAcC,MAAOL,CAAAA,QAAAA,CAAAA;IAC3B,MAAMM,WAAAA,GAAcR,cAAcQ,WAAe,IAAA,EAAA;IAEjDC,SAAU,CAAA,IAAA;AACR,QAAA,IAAID,WAAa,EAAA;AACf,YAAA,MAAML,QAAQO,UAAWF,CAAAA,WAAAA,CAAAA;YAEzB,IAAI;gBACF,MAAMG,MAAAA,GAASC,UAAUT,KAAO,EAAA,CAAA,CAAA;AAChCG,gBAAAA,WAAAA,CAAYO,OAAO,CAAC;oBAAEC,MAAQ,EAAA;AAAEb,wBAAAA,IAAAA;wBAAME,KAAOQ,EAAAA;AAAO;AAAE,iBAAA,CAAA;AACxD,aAAA,CAAE,OAAOI,GAAK,EAAA;AACZT,gBAAAA,WAAAA,CAAYO,OAAO,CAAC;oBAAEC,MAAQ,EAAA;AAAEb,wBAAAA,IAAAA;AAAME,wBAAAA;AAAM;AAAE,iBAAA,CAAA;AAChD;SACK,MAAA;AACLG,YAAAA,WAAAA,CAAYO,OAAO,CAAC;gBAAEC,MAAQ,EAAA;AAAEb,oBAAAA,IAAAA;oBAAME,KAAO,EAAA;AAAG;AAAE,aAAA,CAAA;AACpD;KACC,EAAA;AAACK,QAAAA,WAAAA;AAAaP,QAAAA;AAAK,KAAA,CAAA;IAEtB,MAAMe,YAAAA,GAAelB,QAAQM,aAAc,CAAA;QAAEa,EAAInB,EAAAA,KAAAA;QAAOoB,cAAgBpB,EAAAA;KAAW,CAAA,GAAA,EAAA;IACnF,MAAMqB,IAAAA,GAAOtB,cACTO,aACE,CAAA;AAAEa,QAAAA,EAAAA,EAAIpB,YAAYoB,EAAE;AAAEC,QAAAA,cAAAA,EAAgBrB,YAAYqB;KAClD,EAAA;AAAE,QAAA,GAAGrB,YAAYuB;KAEnB,CAAA,GAAA,EAAA;AACJ,IAAA,MAAMC,QAAQjB,aAAcL,CAAAA,SAAAA,CAAAA;IAE5B,qBACEuB,IAAA,CAACC,MAAMC,IAAI,EAAA;QAAC1B,KAAOkB,EAAAA,YAAAA;QAAcG,IAAMA,EAAAA,IAAAA;QAAMlB,IAAMA,EAAAA,IAAAA;;AACjD,0BAAAwB,GAAA,CAACF,MAAMG,KAAK,EAAA;AAAEL,gBAAAA,QAAAA,EAAAA;;0BACdI,GAACE,CAAAA,SAAAA,EAAAA;gBAAUzB,QAAUA,EAAAA,QAAAA;AAAUC,gBAAAA,KAAAA,EAAOA,KAAS,IAAA;;AAC/C,0BAAAsB,GAAA,CAACF,MAAMK,KAAK,EAAA,EAAA;;;AAGlB;;;;"}

package/dist/admin/components/Relation/Relation.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var getRelationType = require('../../utils/getRelationType.js');
+var RelationField = require('./RelationField/RelationField.js');
+var RelationNaturePicker = require('./RelationNaturePicker/RelationNaturePicker.js');
+
+const Relation = ({ formErrors, mainBoxHeader, modifiedData, naturePickerType, onChange })=>{
+    const relationType = getRelationType.getRelationType(modifiedData.relation, modifiedData.targetAttribute);
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        style: {
+            position: 'relative'
+        },
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(RelationField.RelationFormBox, {
+                isMain: true,
+                header: mainBoxHeader,
+                error: formErrors?.name || null,
+                name: "name",
+                onChange: onChange,
+                value: modifiedData?.name || ''
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(RelationNaturePicker.RelationNaturePicker, {
+                naturePickerType: naturePickerType,
+                oneThatIsCreatingARelationWithAnother: mainBoxHeader,
+                relationType: relationType,
+                target: modifiedData.target
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(RelationField.RelationFormBox, {
+                disabled: [
+                    'oneWay',
+                    'manyWay'
+                ].includes(relationType),
+                error: formErrors?.targetAttribute || null,
+                name: "targetAttribute",
+                onChange: onChange,
+                oneThatIsCreatingARelationWithAnother: mainBoxHeader,
+                target: modifiedData.target,
+                value: modifiedData?.targetAttribute || ''
+            })
+        ]
+    });
+};
+
+exports.Relation = Relation;
+//# sourceMappingURL=Relation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Relation.js","sources":["../../../../admin/src/components/Relation/Relation.tsx"],"sourcesContent":["import { Flex } from '@strapi/design-system';\n\nimport { getRelationType } from '../../utils/getRelationType';\n\nimport { RelationFormBox } from './RelationField/RelationField';\nimport { RelationNaturePicker } from './RelationNaturePicker/RelationNaturePicker';\n\ninterface RelationProps {\n  formErrors: Record<string, any>;\n  mainBoxHeader: string;\n  modifiedData: Record<string, any>;\n  onChange: (value: any) => void;\n  naturePickerType: string;\n}\n\nexport const Relation = ({\n  formErrors,\n  mainBoxHeader,\n  modifiedData,\n  naturePickerType,\n  onChange,\n}: RelationProps) => {\n  const relationType = getRelationType(modifiedData.relation, modifiedData.targetAttribute);\n\n  return (\n    <Flex style={{ position: 'relative' }}>\n      <RelationFormBox\n        isMain\n        header={mainBoxHeader}\n        error={formErrors?.name || null}\n        name=\"name\"\n        onChange={onChange}\n        value={modifiedData?.name || ''}\n      />\n      <RelationNaturePicker\n        naturePickerType={naturePickerType}\n        oneThatIsCreatingARelationWithAnother={mainBoxHeader}\n        relationType={relationType!}\n        target={modifiedData.target}\n      />\n      <RelationFormBox\n        disabled={['oneWay', 'manyWay'].includes(relationType!)}\n        error={formErrors?.targetAttribute || null}\n        name=\"targetAttribute\"\n        onChange={onChange}\n        oneThatIsCreatingARelationWithAnother={mainBoxHeader}\n        target={modifiedData.target}\n        value={modifiedData?.targetAttribute || ''}\n      />\n    </Flex>\n  );\n};\n"],"names":["Relation","formErrors","mainBoxHeader","modifiedData","naturePickerType","onChange","relationType","getRelationType","relation","targetAttribute","_jsxs","Flex","style","position","_jsx","RelationFormBox","isMain","header","error","name","value","RelationNaturePicker","oneThatIsCreatingARelationWithAnother","target","disabled","includes"],"mappings":";;;;;;;;AAeaA,MAAAA,QAAAA,GAAW,CAAC,EACvBC,UAAU,EACVC,aAAa,EACbC,YAAY,EACZC,gBAAgB,EAChBC,QAAQ,EACM,GAAA;AACd,IAAA,MAAMC,eAAeC,+BAAgBJ,CAAAA,YAAAA,CAAaK,QAAQ,EAAEL,aAAaM,eAAe,CAAA;AAExF,IAAA,qBACEC,eAACC,CAAAA,iBAAAA,EAAAA;QAAKC,KAAO,EAAA;YAAEC,QAAU,EAAA;AAAW,SAAA;;0BAClCC,cAACC,CAAAA,6BAAAA,EAAAA;gBACCC,MAAM,EAAA,IAAA;gBACNC,MAAQf,EAAAA,aAAAA;AACRgB,gBAAAA,KAAAA,EAAOjB,YAAYkB,IAAQ,IAAA,IAAA;gBAC3BA,IAAK,EAAA,MAAA;gBACLd,QAAUA,EAAAA,QAAAA;AACVe,gBAAAA,KAAAA,EAAOjB,cAAcgB,IAAQ,IAAA;;0BAE/BL,cAACO,CAAAA,yCAAAA,EAAAA;gBACCjB,gBAAkBA,EAAAA,gBAAAA;gBAClBkB,qCAAuCpB,EAAAA,aAAAA;gBACvCI,YAAcA,EAAAA,YAAAA;AACdiB,gBAAAA,MAAAA,EAAQpB,aAAaoB;;0BAEvBT,cAACC,CAAAA,6BAAAA,EAAAA;gBACCS,QAAU,EAAA;AAAC,oBAAA,QAAA;AAAU,oBAAA;AAAU,iBAAA,CAACC,QAAQ,CAACnB,YAAAA,CAAAA;AACzCY,gBAAAA,KAAAA,EAAOjB,YAAYQ,eAAmB,IAAA,IAAA;gBACtCU,IAAK,EAAA,iBAAA;gBACLd,QAAUA,EAAAA,QAAAA;gBACViB,qCAAuCpB,EAAAA,aAAAA;AACvCqB,gBAAAA,MAAAA,EAAQpB,aAAaoB,MAAM;AAC3BH,gBAAAA,KAAAA,EAAOjB,cAAcM,eAAmB,IAAA;;;;AAIhD;;;;"}

package/dist/admin/components/Relation/Relation.mjs

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Flex } from '@strapi/design-system';
+import { getRelationType } from '../../utils/getRelationType.mjs';
+import { RelationFormBox } from './RelationField/RelationField.mjs';
+import { RelationNaturePicker } from './RelationNaturePicker/RelationNaturePicker.mjs';
+
+const Relation = ({ formErrors, mainBoxHeader, modifiedData, naturePickerType, onChange })=>{
+    const relationType = getRelationType(modifiedData.relation, modifiedData.targetAttribute);
+    return /*#__PURE__*/ jsxs(Flex, {
+        style: {
+            position: 'relative'
+        },
+        children: [
+            /*#__PURE__*/ jsx(RelationFormBox, {
+                isMain: true,
+                header: mainBoxHeader,
+                error: formErrors?.name || null,
+                name: "name",
+                onChange: onChange,
+                value: modifiedData?.name || ''
+            }),
+            /*#__PURE__*/ jsx(RelationNaturePicker, {
+                naturePickerType: naturePickerType,
+                oneThatIsCreatingARelationWithAnother: mainBoxHeader,
+                relationType: relationType,
+                target: modifiedData.target
+            }),
+            /*#__PURE__*/ jsx(RelationFormBox, {
+                disabled: [
+                    'oneWay',
+                    'manyWay'
+                ].includes(relationType),
+                error: formErrors?.targetAttribute || null,
+                name: "targetAttribute",
+                onChange: onChange,
+                oneThatIsCreatingARelationWithAnother: mainBoxHeader,
+                target: modifiedData.target,
+                value: modifiedData?.targetAttribute || ''
+            })
+        ]
+    });
+};
+
+export { Relation };
+//# sourceMappingURL=Relation.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Relation.mjs","sources":["../../../../admin/src/components/Relation/Relation.tsx"],"sourcesContent":["import { Flex } from '@strapi/design-system';\n\nimport { getRelationType } from '../../utils/getRelationType';\n\nimport { RelationFormBox } from './RelationField/RelationField';\nimport { RelationNaturePicker } from './RelationNaturePicker/RelationNaturePicker';\n\ninterface RelationProps {\n  formErrors: Record<string, any>;\n  mainBoxHeader: string;\n  modifiedData: Record<string, any>;\n  onChange: (value: any) => void;\n  naturePickerType: string;\n}\n\nexport const Relation = ({\n  formErrors,\n  mainBoxHeader,\n  modifiedData,\n  naturePickerType,\n  onChange,\n}: RelationProps) => {\n  const relationType = getRelationType(modifiedData.relation, modifiedData.targetAttribute);\n\n  return (\n    <Flex style={{ position: 'relative' }}>\n      <RelationFormBox\n        isMain\n        header={mainBoxHeader}\n        error={formErrors?.name || null}\n        name=\"name\"\n        onChange={onChange}\n        value={modifiedData?.name || ''}\n      />\n      <RelationNaturePicker\n        naturePickerType={naturePickerType}\n        oneThatIsCreatingARelationWithAnother={mainBoxHeader}\n        relationType={relationType!}\n        target={modifiedData.target}\n      />\n      <RelationFormBox\n        disabled={['oneWay', 'manyWay'].includes(relationType!)}\n        error={formErrors?.targetAttribute || null}\n        name=\"targetAttribute\"\n        onChange={onChange}\n        oneThatIsCreatingARelationWithAnother={mainBoxHeader}\n        target={modifiedData.target}\n        value={modifiedData?.targetAttribute || ''}\n      />\n    </Flex>\n  );\n};\n"],"names":["Relation","formErrors","mainBoxHeader","modifiedData","naturePickerType","onChange","relationType","getRelationType","relation","targetAttribute","_jsxs","Flex","style","position","_jsx","RelationFormBox","isMain","header","error","name","value","RelationNaturePicker","oneThatIsCreatingARelationWithAnother","target","disabled","includes"],"mappings":";;;;;;AAeaA,MAAAA,QAAAA,GAAW,CAAC,EACvBC,UAAU,EACVC,aAAa,EACbC,YAAY,EACZC,gBAAgB,EAChBC,QAAQ,EACM,GAAA;AACd,IAAA,MAAMC,eAAeC,eAAgBJ,CAAAA,YAAAA,CAAaK,QAAQ,EAAEL,aAAaM,eAAe,CAAA;AAExF,IAAA,qBACEC,IAACC,CAAAA,IAAAA,EAAAA;QAAKC,KAAO,EAAA;YAAEC,QAAU,EAAA;AAAW,SAAA;;0BAClCC,GAACC,CAAAA,eAAAA,EAAAA;gBACCC,MAAM,EAAA,IAAA;gBACNC,MAAQf,EAAAA,aAAAA;AACRgB,gBAAAA,KAAAA,EAAOjB,YAAYkB,IAAQ,IAAA,IAAA;gBAC3BA,IAAK,EAAA,MAAA;gBACLd,QAAUA,EAAAA,QAAAA;AACVe,gBAAAA,KAAAA,EAAOjB,cAAcgB,IAAQ,IAAA;;0BAE/BL,GAACO,CAAAA,oBAAAA,EAAAA;gBACCjB,gBAAkBA,EAAAA,gBAAAA;gBAClBkB,qCAAuCpB,EAAAA,aAAAA;gBACvCI,YAAcA,EAAAA,YAAAA;AACdiB,gBAAAA,MAAAA,EAAQpB,aAAaoB;;0BAEvBT,GAACC,CAAAA,eAAAA,EAAAA;gBACCS,QAAU,EAAA;AAAC,oBAAA,QAAA;AAAU,oBAAA;AAAU,iBAAA,CAACC,QAAQ,CAACnB,YAAAA,CAAAA;AACzCY,gBAAAA,KAAAA,EAAOjB,YAAYQ,eAAmB,IAAA,IAAA;gBACtCU,IAAK,EAAA,iBAAA;gBACLd,QAAUA,EAAAA,QAAAA;gBACViB,qCAAuCpB,EAAAA,aAAAA;AACvCqB,gBAAAA,MAAAA,EAAQpB,aAAaoB,MAAM;AAC3BH,gBAAAA,KAAAA,EAAOjB,cAAcM,eAAmB,IAAA;;;;AAIhD;;;;"}

package/dist/admin/components/Relation/RelationField/RelationField.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var getTrad = require('../../../utils/getTrad.js');
+var GenericInputs = require('../../GenericInputs.js');
+var RelationTargetPicker = require('./RelationTargetPicker/RelationTargetPicker.js');
+
+const RelationFormBox = ({ disabled = false, error, header, isMain = false, name, onChange, oneThatIsCreatingARelationWithAnother = '', target = '', value = '' })=>{
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+        background: "neutral100",
+        hasRadius: true,
+        borderColor: "neutral200",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                paddingTop: isMain ? 4 : 1,
+                paddingBottom: isMain ? 3 : 1,
+                justifyContent: "center",
+                children: isMain ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    variant: "pi",
+                    fontWeight: "bold",
+                    textColor: "neutral800",
+                    children: header
+                }) : /*#__PURE__*/ jsxRuntime.jsx(RelationTargetPicker.RelationTargetPicker, {
+                    target: target,
+                    oneThatIsCreatingARelationWithAnother: oneThatIsCreatingARelationWithAnother
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Divider, {
+                background: "neutral200"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                padding: 4,
+                children: /*#__PURE__*/ jsxRuntime.jsx(GenericInputs.GenericInput, {
+                    disabled: disabled,
+                    error: error?.id || null,
+                    intlLabel: {
+                        id: getTrad.getTrad('form.attribute.item.defineRelation.fieldName'),
+                        defaultMessage: 'Field name'
+                    },
+                    name: name,
+                    onChange: onChange,
+                    type: "text",
+                    value: value
+                })
+            })
+        ]
+    });
+};
+
+exports.RelationFormBox = RelationFormBox;
+//# sourceMappingURL=RelationField.js.map

package/dist/admin/components/Relation/RelationField/RelationField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelationField.js","sources":["../../../../../admin/src/components/Relation/RelationField/RelationField.tsx"],"sourcesContent":["import { Box, Divider, Flex, Typography } from '@strapi/design-system';\n\nimport { getTrad } from '../../../utils/getTrad';\nimport { GenericInput } from '../../GenericInputs';\n\nimport { RelationTargetPicker } from './RelationTargetPicker/RelationTargetPicker';\n\ninterface RelationFormBoxProps {\n  disabled?: boolean;\n  error?: Record<string, any>;\n  header?: string;\n  isMain?: boolean;\n  name: string;\n  onChange: (value: any) => void;\n  oneThatIsCreatingARelationWithAnother?: string;\n  target?: string;\n  value?: string;\n}\n\nexport const RelationFormBox = ({\n  disabled = false,\n  error,\n  header,\n  isMain = false,\n  name,\n  onChange,\n  oneThatIsCreatingARelationWithAnother = '',\n  target = '',\n  value = '',\n}: RelationFormBoxProps) => {\n  return (\n    <Box background=\"neutral100\" hasRadius borderColor=\"neutral200\">\n      <Flex paddingTop={isMain ? 4 : 1} paddingBottom={isMain ? 3 : 1} justifyContent=\"center\">\n        {isMain ? (\n          <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"neutral800\">\n            {header}\n          </Typography>\n        ) : (\n          <RelationTargetPicker\n            target={target}\n            oneThatIsCreatingARelationWithAnother={oneThatIsCreatingARelationWithAnother}\n          />\n        )}\n      </Flex>\n      <Divider background=\"neutral200\" />\n      <Box padding={4}>\n        <GenericInput\n          disabled={disabled}\n          error={error?.id || null}\n          intlLabel={{\n            id: getTrad('form.attribute.item.defineRelation.fieldName'),\n            defaultMessage: 'Field name',\n          }}\n          name={name}\n          onChange={onChange}\n          type=\"text\"\n          value={value}\n        />\n      </Box>\n    </Box>\n  );\n};\n"],"names":["RelationFormBox","disabled","error","header","isMain","name","onChange","oneThatIsCreatingARelationWithAnother","target","value","_jsxs","Box","background","hasRadius","borderColor","_jsx","Flex","paddingTop","paddingBottom","justifyContent","Typography","variant","fontWeight","textColor","RelationTargetPicker","Divider","padding","GenericInput","id","intlLabel","getTrad","defaultMessage","type"],"mappings":";;;;;;;;AAmBO,MAAMA,eAAkB,GAAA,CAAC,EAC9BC,QAAAA,GAAW,KAAK,EAChBC,KAAK,EACLC,MAAM,EACNC,MAAS,GAAA,KAAK,EACdC,IAAI,EACJC,QAAQ,EACRC,qCAAwC,GAAA,EAAE,EAC1CC,MAAAA,GAAS,EAAE,EACXC,KAAQ,GAAA,EAAE,EACW,GAAA;AACrB,IAAA,qBACEC,eAACC,CAAAA,gBAAAA,EAAAA;QAAIC,UAAW,EAAA,YAAA;QAAaC,SAAS,EAAA,IAAA;QAACC,WAAY,EAAA,YAAA;;0BACjDC,cAACC,CAAAA,iBAAAA,EAAAA;AAAKC,gBAAAA,UAAAA,EAAYb,SAAS,CAAI,GAAA,CAAA;AAAGc,gBAAAA,aAAAA,EAAed,SAAS,CAAI,GAAA,CAAA;gBAAGe,cAAe,EAAA,QAAA;AAC7Ef,gBAAAA,QAAAA,EAAAA,MAAAA,iBACCW,cAACK,CAAAA,uBAAAA,EAAAA;oBAAWC,OAAQ,EAAA,IAAA;oBAAKC,UAAW,EAAA,MAAA;oBAAOC,SAAU,EAAA,YAAA;AAClDpB,oBAAAA,QAAAA,EAAAA;mCAGHY,cAACS,CAAAA,yCAAAA,EAAAA;oBACChB,MAAQA,EAAAA,MAAAA;oBACRD,qCAAuCA,EAAAA;;;0BAI7CQ,cAACU,CAAAA,oBAAAA,EAAAA;gBAAQb,UAAW,EAAA;;0BACpBG,cAACJ,CAAAA,gBAAAA,EAAAA;gBAAIe,OAAS,EAAA,CAAA;AACZ,gBAAA,QAAA,gBAAAX,cAACY,CAAAA,0BAAAA,EAAAA;oBACC1B,QAAUA,EAAAA,QAAAA;AACVC,oBAAAA,KAAAA,EAAOA,OAAO0B,EAAM,IAAA,IAAA;oBACpBC,SAAW,EAAA;AACTD,wBAAAA,EAAAA,EAAIE,eAAQ,CAAA,8CAAA,CAAA;wBACZC,cAAgB,EAAA;AAClB,qBAAA;oBACA1B,IAAMA,EAAAA,IAAAA;oBACNC,QAAUA,EAAAA,QAAAA;oBACV0B,IAAK,EAAA,MAAA;oBACLvB,KAAOA,EAAAA;;;;;AAKjB;;;;"}

package/dist/admin/components/Relation/RelationField/RelationField.mjs

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box, Flex, Typography, Divider } from '@strapi/design-system';
+import { getTrad } from '../../../utils/getTrad.mjs';
+import { GenericInput as MemoizedGenericInput } from '../../GenericInputs.mjs';
+import { RelationTargetPicker } from './RelationTargetPicker/RelationTargetPicker.mjs';
+
+const RelationFormBox = ({ disabled = false, error, header, isMain = false, name, onChange, oneThatIsCreatingARelationWithAnother = '', target = '', value = '' })=>{
+    return /*#__PURE__*/ jsxs(Box, {
+        background: "neutral100",
+        hasRadius: true,
+        borderColor: "neutral200",
+        children: [
+            /*#__PURE__*/ jsx(Flex, {
+                paddingTop: isMain ? 4 : 1,
+                paddingBottom: isMain ? 3 : 1,
+                justifyContent: "center",
+                children: isMain ? /*#__PURE__*/ jsx(Typography, {
+                    variant: "pi",
+                    fontWeight: "bold",
+                    textColor: "neutral800",
+                    children: header
+                }) : /*#__PURE__*/ jsx(RelationTargetPicker, {
+                    target: target,
+                    oneThatIsCreatingARelationWithAnother: oneThatIsCreatingARelationWithAnother
+                })
+            }),
+            /*#__PURE__*/ jsx(Divider, {
+                background: "neutral200"
+            }),
+            /*#__PURE__*/ jsx(Box, {
+                padding: 4,
+                children: /*#__PURE__*/ jsx(MemoizedGenericInput, {
+                    disabled: disabled,
+                    error: error?.id || null,
+                    intlLabel: {
+                        id: getTrad('form.attribute.item.defineRelation.fieldName'),
+                        defaultMessage: 'Field name'
+                    },
+                    name: name,
+                    onChange: onChange,
+                    type: "text",
+                    value: value
+                })
+            })
+        ]
+    });
+};
+
+export { RelationFormBox };
+//# sourceMappingURL=RelationField.mjs.map

package/dist/admin/components/Relation/RelationField/RelationField.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelationField.mjs","sources":["../../../../../admin/src/components/Relation/RelationField/RelationField.tsx"],"sourcesContent":["import { Box, Divider, Flex, Typography } from '@strapi/design-system';\n\nimport { getTrad } from '../../../utils/getTrad';\nimport { GenericInput } from '../../GenericInputs';\n\nimport { RelationTargetPicker } from './RelationTargetPicker/RelationTargetPicker';\n\ninterface RelationFormBoxProps {\n  disabled?: boolean;\n  error?: Record<string, any>;\n  header?: string;\n  isMain?: boolean;\n  name: string;\n  onChange: (value: any) => void;\n  oneThatIsCreatingARelationWithAnother?: string;\n  target?: string;\n  value?: string;\n}\n\nexport const RelationFormBox = ({\n  disabled = false,\n  error,\n  header,\n  isMain = false,\n  name,\n  onChange,\n  oneThatIsCreatingARelationWithAnother = '',\n  target = '',\n  value = '',\n}: RelationFormBoxProps) => {\n  return (\n    <Box background=\"neutral100\" hasRadius borderColor=\"neutral200\">\n      <Flex paddingTop={isMain ? 4 : 1} paddingBottom={isMain ? 3 : 1} justifyContent=\"center\">\n        {isMain ? (\n          <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"neutral800\">\n            {header}\n          </Typography>\n        ) : (\n          <RelationTargetPicker\n            target={target}\n            oneThatIsCreatingARelationWithAnother={oneThatIsCreatingARelationWithAnother}\n          />\n        )}\n      </Flex>\n      <Divider background=\"neutral200\" />\n      <Box padding={4}>\n        <GenericInput\n          disabled={disabled}\n          error={error?.id || null}\n          intlLabel={{\n            id: getTrad('form.attribute.item.defineRelation.fieldName'),\n            defaultMessage: 'Field name',\n          }}\n          name={name}\n          onChange={onChange}\n          type=\"text\"\n          value={value}\n        />\n      </Box>\n    </Box>\n  );\n};\n"],"names":["RelationFormBox","disabled","error","header","isMain","name","onChange","oneThatIsCreatingARelationWithAnother","target","value","_jsxs","Box","background","hasRadius","borderColor","_jsx","Flex","paddingTop","paddingBottom","justifyContent","Typography","variant","fontWeight","textColor","RelationTargetPicker","Divider","padding","GenericInput","id","intlLabel","getTrad","defaultMessage","type"],"mappings":";;;;;;AAmBO,MAAMA,eAAkB,GAAA,CAAC,EAC9BC,QAAAA,GAAW,KAAK,EAChBC,KAAK,EACLC,MAAM,EACNC,MAAS,GAAA,KAAK,EACdC,IAAI,EACJC,QAAQ,EACRC,qCAAwC,GAAA,EAAE,EAC1CC,MAAAA,GAAS,EAAE,EACXC,KAAQ,GAAA,EAAE,EACW,GAAA;AACrB,IAAA,qBACEC,IAACC,CAAAA,GAAAA,EAAAA;QAAIC,UAAW,EAAA,YAAA;QAAaC,SAAS,EAAA,IAAA;QAACC,WAAY,EAAA,YAAA;;0BACjDC,GAACC,CAAAA,IAAAA,EAAAA;AAAKC,gBAAAA,UAAAA,EAAYb,SAAS,CAAI,GAAA,CAAA;AAAGc,gBAAAA,aAAAA,EAAed,SAAS,CAAI,GAAA,CAAA;gBAAGe,cAAe,EAAA,QAAA;AAC7Ef,gBAAAA,QAAAA,EAAAA,MAAAA,iBACCW,GAACK,CAAAA,UAAAA,EAAAA;oBAAWC,OAAQ,EAAA,IAAA;oBAAKC,UAAW,EAAA,MAAA;oBAAOC,SAAU,EAAA,YAAA;AAClDpB,oBAAAA,QAAAA,EAAAA;mCAGHY,GAACS,CAAAA,oBAAAA,EAAAA;oBACChB,MAAQA,EAAAA,MAAAA;oBACRD,qCAAuCA,EAAAA;;;0BAI7CQ,GAACU,CAAAA,OAAAA,EAAAA;gBAAQb,UAAW,EAAA;;0BACpBG,GAACJ,CAAAA,GAAAA,EAAAA;gBAAIe,OAAS,EAAA,CAAA;AACZ,gBAAA,QAAA,gBAAAX,GAACY,CAAAA,oBAAAA,EAAAA;oBACC1B,QAAUA,EAAAA,QAAAA;AACVC,oBAAAA,KAAAA,EAAOA,OAAO0B,EAAM,IAAA,IAAA;oBACpBC,SAAW,EAAA;AACTD,wBAAAA,EAAAA,EAAIE,OAAQ,CAAA,8CAAA,CAAA;wBACZC,cAAgB,EAAA;AAClB,qBAAA;oBACA1B,IAAMA,EAAAA,IAAAA;oBACNC,QAAUA,EAAAA,QAAAA;oBACV0B,IAAK,EAAA,MAAA;oBACLvB,KAAOA,EAAAA;;;;;AAKjB;;;;"}