@akbarsafari00/bonyan-content-type-builder 5.52.1-fa.2

package/dist/admin/components/AttributeIcon.mjs

@@ -0,0 +1,71 @@
+import { jsx } from 'react/jsx-runtime';
+import { useStrapiApp } from '@strapi/admin/strapi-admin';
+import { Box } from '@strapi/design-system';
+import { UidField, DateField, TextField, SingleType, MarkdownField, RelationField, PasswordField, NumberField, MediaField, JsonField, EnumerationField, EmailField, DynamicZoneField, CollectionType, ComponentField, BooleanField, BlocksField } from '@strapi/icons/symbols';
+import { styled } from 'styled-components';
+
+const iconByTypes = {
+    biginteger: NumberField,
+    blocks: BlocksField,
+    boolean: BooleanField,
+    collectionType: CollectionType,
+    component: ComponentField,
+    contentType: CollectionType,
+    date: DateField,
+    datetime: DateField,
+    decimal: NumberField,
+    dynamiczone: DynamicZoneField,
+    email: EmailField,
+    enum: EnumerationField,
+    enumeration: EnumerationField,
+    file: MediaField,
+    files: MediaField,
+    float: NumberField,
+    integer: NumberField,
+    json: JsonField,
+    JSON: JsonField,
+    media: MediaField,
+    number: NumberField,
+    password: PasswordField,
+    relation: RelationField,
+    richtext: MarkdownField,
+    singleType: SingleType,
+    string: TextField,
+    text: TextField,
+    time: DateField,
+    timestamp: DateField,
+    uid: UidField
+};
+const IconBox = styled(Box)`
+  svg {
+    height: 100%;
+    width: 100%;
+  }
+`;
+const AttributeIcon = ({ type, customField = null, ...rest })=>{
+    const getCustomField = useStrapiApp('AttributeIcon', (state)=>state.customFields.get);
+    let Compo = iconByTypes[type];
+    if (customField) {
+        const customFieldObject = getCustomField(customField);
+        const icon = customFieldObject?.icon;
+        if (icon !== undefined) {
+            Compo = icon;
+        }
+    }
+    if (!iconByTypes[type]) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx(IconBox, {
+        width: "3.2rem",
+        height: "3.2rem",
+        shrink: 0,
+        ...rest,
+        "aria-hidden": true,
+        children: /*#__PURE__*/ jsx(Box, {
+            tag: Compo
+        })
+    });
+};
+
+export { AttributeIcon };
+//# sourceMappingURL=AttributeIcon.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttributeIcon.mjs","sources":["../../../admin/src/components/AttributeIcon.tsx"],"sourcesContent":["import { ComponentType, SVGProps } from 'react';\r\n\r\nimport { useStrapiApp } from '@strapi/admin/strapi-admin';\r\nimport { Box } from '@strapi/design-system';\r\nimport {\r\n  BooleanField,\r\n  CollectionType,\r\n  ComponentField,\r\n  DateField,\r\n  DynamicZoneField,\r\n  EmailField,\r\n  EnumerationField,\r\n  JsonField,\r\n  MediaField,\r\n  NumberField,\r\n  PasswordField,\r\n  RelationField,\r\n  MarkdownField,\r\n  SingleType,\r\n  TextField,\r\n  UidField,\r\n  BlocksField,\r\n} from '@strapi/icons/symbols';\r\nimport { styled } from 'styled-components';\r\n\r\nconst iconByTypes: Record<string, ComponentType<SVGProps<SVGSVGElement>>> = {\r\n  biginteger: NumberField,\r\n  blocks: BlocksField,\r\n  boolean: BooleanField,\r\n  collectionType: CollectionType,\r\n  component: ComponentField,\r\n  contentType: CollectionType,\r\n  date: DateField,\r\n  datetime: DateField,\r\n  decimal: NumberField,\r\n  dynamiczone: DynamicZoneField,\r\n  email: EmailField,\r\n  enum: EnumerationField,\r\n  enumeration: EnumerationField,\r\n  file: MediaField,\r\n  files: MediaField,\r\n  float: NumberField,\r\n  integer: NumberField,\r\n  json: JsonField,\r\n  JSON: JsonField,\r\n  media: MediaField,\r\n  number: NumberField,\r\n  password: PasswordField,\r\n  relation: RelationField,\r\n  richtext: MarkdownField,\r\n  singleType: SingleType,\r\n  string: TextField,\r\n  text: TextField,\r\n  time: DateField,\r\n  timestamp: DateField,\r\n  uid: UidField,\r\n};\r\n\r\nconst IconBox = styled(Box)`\r\n  svg {\r\n    height: 100%;\r\n    width: 100%;\r\n  }\r\n`;\r\n\r\nexport type IconByType = keyof typeof iconByTypes;\r\n\r\ntype AttributeIconProps = {\r\n  type: IconByType;\r\n  customField?: string | null;\r\n};\r\n\r\nexport const AttributeIcon = ({ type, customField = null, ...rest }: AttributeIconProps) => {\r\n  const getCustomField = useStrapiApp('AttributeIcon', (state) => state.customFields.get);\r\n\r\n  let Compo = iconByTypes[type];\r\n\r\n  if (customField) {\r\n    const customFieldObject = getCustomField(customField);\r\n    const icon = customFieldObject?.icon as ComponentType<SVGProps<SVGSVGElement>> | undefined;\r\n    if (icon !== undefined) {\r\n      Compo = icon;\r\n    }\r\n  }\r\n\r\n  if (!iconByTypes[type]) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <IconBox width=\"3.2rem\" height=\"3.2rem\" shrink={0} {...rest} aria-hidden>\r\n      <Box tag={Compo} />\r\n    </IconBox>\r\n  );\r\n};\r\n"],"names":["iconByTypes","biginteger","NumberField","blocks","BlocksField","boolean","BooleanField","collectionType","CollectionType","component","ComponentField","contentType","date","DateField","datetime","decimal","dynamiczone","DynamicZoneField","email","EmailField","enum","EnumerationField","enumeration","file","MediaField","files","float","integer","json","JsonField","JSON","media","number","password","PasswordField","relation","RelationField","richtext","MarkdownField","singleType","SingleType","string","TextField","text","time","timestamp","uid","UidField","IconBox","styled","Box","AttributeIcon","type","customField","rest","getCustomField","useStrapiApp","state","customFields","get","Compo","customFieldObject","icon","undefined","_jsx","width","height","shrink","aria-hidden","tag"],"mappings":";;;;;;AAyBA,MAAMA,WAAAA,GAAsE;IAC1EC,UAAAA,EAAYC,WAAAA;IACZC,MAAAA,EAAQC,WAAAA;IACRC,OAAAA,EAASC,YAAAA;IACTC,cAAAA,EAAgBC,cAAAA;IAChBC,SAAAA,EAAWC,cAAAA;IACXC,WAAAA,EAAaH,cAAAA;IACbI,IAAAA,EAAMC,SAAAA;IACNC,QAAAA,EAAUD,SAAAA;IACVE,OAAAA,EAASb,WAAAA;IACTc,WAAAA,EAAaC,gBAAAA;IACbC,KAAAA,EAAOC,UAAAA;IACPC,IAAAA,EAAMC,gBAAAA;IACNC,WAAAA,EAAaD,gBAAAA;IACbE,IAAAA,EAAMC,UAAAA;IACNC,KAAAA,EAAOD,UAAAA;IACPE,KAAAA,EAAOxB,WAAAA;IACPyB,OAAAA,EAASzB,WAAAA;IACT0B,IAAAA,EAAMC,SAAAA;IACNC,IAAAA,EAAMD,SAAAA;IACNE,KAAAA,EAAOP,UAAAA;IACPQ,MAAAA,EAAQ9B,WAAAA;IACR+B,QAAAA,EAAUC,aAAAA;IACVC,QAAAA,EAAUC,aAAAA;IACVC,QAAAA,EAAUC,aAAAA;IACVC,UAAAA,EAAYC,UAAAA;IACZC,MAAAA,EAAQC,SAAAA;IACRC,IAAAA,EAAMD,SAAAA;IACNE,IAAAA,EAAM/B,SAAAA;IACNgC,SAAAA,EAAWhC,SAAAA;IACXiC,GAAAA,EAAKC;AACP,CAAA;AAEA,MAAMC,OAAAA,GAAUC,MAAAA,CAAOC,GAAAA,CAAI,CAAC;;;;;AAK5B,CAAC;AASM,MAAMC,aAAAA,GAAgB,CAAC,EAAEC,IAAI,EAAEC,WAAAA,GAAc,IAAI,EAAE,GAAGC,IAAAA,EAA0B,GAAA;IACrF,MAAMC,cAAAA,GAAiBC,aAAa,eAAA,EAAiB,CAACC,QAAUA,KAAAA,CAAMC,YAAY,CAACC,GAAG,CAAA;IAEtF,IAAIC,KAAAA,GAAQ5D,WAAW,CAACoD,IAAAA,CAAK;AAE7B,IAAA,IAAIC,WAAAA,EAAa;AACf,QAAA,MAAMQ,oBAAoBN,cAAAA,CAAeF,WAAAA,CAAAA;AACzC,QAAA,MAAMS,OAAOD,iBAAAA,EAAmBC,IAAAA;AAChC,QAAA,IAAIA,SAASC,SAAAA,EAAW;YACtBH,KAAAA,GAAQE,IAAAA;AACV,QAAA;AACF,IAAA;AAEA,IAAA,IAAI,CAAC9D,WAAW,CAACoD,IAAAA,CAAK,EAAE;QACtB,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,qBACEY,GAAA,CAAChB,OAAAA,EAAAA;QAAQiB,KAAAA,EAAM,QAAA;QAASC,MAAAA,EAAO,QAAA;QAASC,MAAAA,EAAQ,CAAA;AAAI,QAAA,GAAGb,IAAI;QAAEc,aAAW,EAAA,IAAA;AACtE,QAAA,QAAA,gBAAAJ,GAAA,CAACd,GAAAA,EAAAA;YAAImB,GAAAA,EAAKT;;;AAGhB;;;;"}

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

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var AttributeOption = require('./AttributeOption.js');
+
+const AttributeList = ({ attributes })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.KeyboardNavigable, {
+        tagName: "button",
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+            direction: "column",
+            alignItems: "stretch",
+            gap: 8,
+            children: attributes.map((attributeRow, index)=>{
+                return(// eslint-disable-next-line react/no-array-index-key
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
+                    gap: 3,
+                    children: attributeRow.map((attribute)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                            col: 6,
+                            xs: 12,
+                            direction: "column",
+                            alignItems: "stretch",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(AttributeOption.AttributeOption, {
+                                type: attribute
+                            })
+                        }, attribute))
+                }, index));
+            })
+        })
+    });
+
+exports.AttributeList = AttributeList;
+//# sourceMappingURL=AttributeList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttributeList.js","sources":["../../../../admin/src/components/AttributeOptions/AttributeList.tsx"],"sourcesContent":["import { Flex, Grid, KeyboardNavigable } from '@strapi/design-system';\r\n\r\nimport { IconByType } from '../AttributeIcon';\r\n\r\nimport { AttributeOption } from './AttributeOption';\r\n\r\ntype AttributeListProps = {\r\n  attributes: IconByType[][];\r\n};\r\n\r\nexport const AttributeList = ({ attributes }: AttributeListProps) => (\r\n  <KeyboardNavigable tagName=\"button\">\r\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={8}>\r\n      {attributes.map((attributeRow, index) => {\r\n        return (\r\n          // eslint-disable-next-line react/no-array-index-key\r\n          <Grid.Root key={index} gap={3}>\r\n            {attributeRow.map((attribute) => (\r\n              <Grid.Item key={attribute} col={6} xs={12} direction=\"column\" alignItems=\"stretch\">\r\n                <AttributeOption type={attribute} />\r\n              </Grid.Item>\r\n            ))}\r\n          </Grid.Root>\r\n        );\r\n      })}\r\n    </Flex>\r\n  </KeyboardNavigable>\r\n);\r\n"],"names":["AttributeList","attributes","_jsx","KeyboardNavigable","tagName","Flex","direction","alignItems","gap","map","attributeRow","index","Grid","Root","attribute","Item","col","xs","AttributeOption","type"],"mappings":";;;;;;MAUaA,aAAAA,GAAgB,CAAC,EAAEC,UAAU,EAAsB,iBAC9DC,cAAA,CAACC,8BAAAA,EAAAA;QAAkBC,OAAAA,EAAQ,QAAA;AACzB,QAAA,QAAA,gBAAAF,cAAA,CAACG,iBAAAA,EAAAA;YAAKC,SAAAA,EAAU,QAAA;YAASC,UAAAA,EAAW,SAAA;YAAUC,GAAAA,EAAK,CAAA;sBAChDP,UAAAA,CAAWQ,GAAG,CAAC,CAACC,YAAAA,EAAcC,KAAAA,GAAAA;AAC7B,gBAAA;AAEE,8BAAAT,cAAA,CAACU,kBAAKC,IAAI,EAAA;oBAAaL,GAAAA,EAAK,CAAA;AACzBE,oBAAAA,QAAAA,EAAAA,YAAAA,CAAaD,GAAG,CAAC,CAACK,SAAAA,iBACjBZ,cAAA,CAACU,kBAAKG,IAAI,EAAA;4BAAiBC,GAAAA,EAAK,CAAA;4BAAGC,EAAAA,EAAI,EAAA;4BAAIX,SAAAA,EAAU,QAAA;4BAASC,UAAAA,EAAW,SAAA;AACvE,4BAAA,QAAA,gBAAAL,cAAA,CAACgB,+BAAAA,EAAAA;gCAAgBC,IAAAA,EAAML;;AADTA,yBAAAA,EAAAA,SAAAA,CAAAA;AAFJH,iBAAAA,EAAAA,KAAAA,CAAAA;AAQpB,YAAA,CAAA;;AAGJ,KAAA;;;;"}

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

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { KeyboardNavigable, Flex, Grid } from '@strapi/design-system';
+import { AttributeOption } from './AttributeOption.mjs';
+
+const AttributeList = ({ attributes })=>/*#__PURE__*/ jsx(KeyboardNavigable, {
+        tagName: "button",
+        children: /*#__PURE__*/ jsx(Flex, {
+            direction: "column",
+            alignItems: "stretch",
+            gap: 8,
+            children: attributes.map((attributeRow, index)=>{
+                return(// eslint-disable-next-line react/no-array-index-key
+                /*#__PURE__*/ jsx(Grid.Root, {
+                    gap: 3,
+                    children: attributeRow.map((attribute)=>/*#__PURE__*/ jsx(Grid.Item, {
+                            col: 6,
+                            xs: 12,
+                            direction: "column",
+                            alignItems: "stretch",
+                            children: /*#__PURE__*/ jsx(AttributeOption, {
+                                type: attribute
+                            })
+                        }, attribute))
+                }, index));
+            })
+        })
+    });
+
+export { AttributeList };
+//# sourceMappingURL=AttributeList.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttributeList.mjs","sources":["../../../../admin/src/components/AttributeOptions/AttributeList.tsx"],"sourcesContent":["import { Flex, Grid, KeyboardNavigable } from '@strapi/design-system';\r\n\r\nimport { IconByType } from '../AttributeIcon';\r\n\r\nimport { AttributeOption } from './AttributeOption';\r\n\r\ntype AttributeListProps = {\r\n  attributes: IconByType[][];\r\n};\r\n\r\nexport const AttributeList = ({ attributes }: AttributeListProps) => (\r\n  <KeyboardNavigable tagName=\"button\">\r\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={8}>\r\n      {attributes.map((attributeRow, index) => {\r\n        return (\r\n          // eslint-disable-next-line react/no-array-index-key\r\n          <Grid.Root key={index} gap={3}>\r\n            {attributeRow.map((attribute) => (\r\n              <Grid.Item key={attribute} col={6} xs={12} direction=\"column\" alignItems=\"stretch\">\r\n                <AttributeOption type={attribute} />\r\n              </Grid.Item>\r\n            ))}\r\n          </Grid.Root>\r\n        );\r\n      })}\r\n    </Flex>\r\n  </KeyboardNavigable>\r\n);\r\n"],"names":["AttributeList","attributes","_jsx","KeyboardNavigable","tagName","Flex","direction","alignItems","gap","map","attributeRow","index","Grid","Root","attribute","Item","col","xs","AttributeOption","type"],"mappings":";;;;MAUaA,aAAAA,GAAgB,CAAC,EAAEC,UAAU,EAAsB,iBAC9DC,GAAA,CAACC,iBAAAA,EAAAA;QAAkBC,OAAAA,EAAQ,QAAA;AACzB,QAAA,QAAA,gBAAAF,GAAA,CAACG,IAAAA,EAAAA;YAAKC,SAAAA,EAAU,QAAA;YAASC,UAAAA,EAAW,SAAA;YAAUC,GAAAA,EAAK,CAAA;sBAChDP,UAAAA,CAAWQ,GAAG,CAAC,CAACC,YAAAA,EAAcC,KAAAA,GAAAA;AAC7B,gBAAA;AAEE,8BAAAT,GAAA,CAACU,KAAKC,IAAI,EAAA;oBAAaL,GAAAA,EAAK,CAAA;AACzBE,oBAAAA,QAAAA,EAAAA,YAAAA,CAAaD,GAAG,CAAC,CAACK,SAAAA,iBACjBZ,GAAA,CAACU,KAAKG,IAAI,EAAA;4BAAiBC,GAAAA,EAAK,CAAA;4BAAGC,EAAAA,EAAI,EAAA;4BAAIX,SAAAA,EAAU,QAAA;4BAASC,UAAAA,EAAW,SAAA;AACvE,4BAAA,QAAA,gBAAAL,GAAA,CAACgB,eAAAA,EAAAA;gCAAgBC,IAAAA,EAAML;;AADTA,yBAAAA,EAAAA,SAAAA,CAAAA;AAFJH,iBAAAA,EAAAA,KAAAA,CAAAA;AAQpB,YAAA,CAAA;;AAGJ,KAAA;;;;"}

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

@@ -0,0 +1,92 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var getTrad = require('../../utils/getTrad.js');
+var AttributeIcon = require('../AttributeIcon.js');
+var useFormModalNavigation = require('../FormModalNavigation/useFormModalNavigation.js');
+var OptionBoxWrapper = require('./OptionBoxWrapper.js');
+
+const newAttributes = [];
+const NewBadge = ()=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+        grow: 1,
+        justifyContent: "flex-end",
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            gap: 1,
+            hasRadius: true,
+            background: "alternative100",
+            padding: `0.2rem 0.4rem`,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(Icons.Sparkle, {
+                    width: `1rem`,
+                    height: `1rem`,
+                    fill: "alternative600"
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    textColor: "alternative600",
+                    variant: "sigma",
+                    children: "New"
+                })
+            ]
+        })
+    });
+const AttributeOption = ({ type = 'text' })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { onClickSelectField } = useFormModalNavigation.useFormModalNavigation();
+    const handleClick = ()=>{
+        const step = type === 'component' ? '1' : null;
+        onClickSelectField({
+            attributeType: type,
+            step
+        });
+    };
+    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
+                }),
+                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+                    paddingLeft: 4,
+                    width: "100%",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            justifyContent: "space-between",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                    fontWeight: "bold",
+                                    textColor: "neutral800",
+                                    children: formatMessage({
+                                        id: getTrad.getTrad(`attribute.${type}`),
+                                        defaultMessage: type
+                                    })
+                                }),
+                                newAttributes.includes(type) && /*#__PURE__*/ jsxRuntime.jsx(NewBadge, {})
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                variant: "pi",
+                                textColor: "neutral600",
+                                children: formatMessage({
+                                    id: getTrad.getTrad(`attribute.${type}.description`),
+                                    defaultMessage: 'A type for modeling data'
+                                })
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+exports.AttributeOption = AttributeOption;
+//# sourceMappingURL=AttributeOption.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttributeOption.js","sources":["../../../../admin/src/components/AttributeOptions/AttributeOption.tsx"],"sourcesContent":["/**\r\n *\r\n * AttributeOption\r\n *\r\n */\r\n\r\nimport { Box, Flex, Typography } from '@strapi/design-system';\r\nimport { Sparkle } from '@strapi/icons';\r\nimport { useIntl } from 'react-intl';\r\n\r\nimport { getTrad } from '../../utils/getTrad';\r\nimport { AttributeIcon, IconByType } from '../AttributeIcon';\r\nimport { useFormModalNavigation } from '../FormModalNavigation/useFormModalNavigation';\r\n\r\nimport { OptionBoxWrapper } from './OptionBoxWrapper';\r\n\r\nconst newAttributes: string[] = [];\r\n\r\nconst NewBadge = () => (\r\n  <Flex grow={1} justifyContent=\"flex-end\">\r\n    <Flex gap={1} hasRadius background=\"alternative100\" padding={`0.2rem 0.4rem`}>\r\n      <Sparkle width={`1rem`} height={`1rem`} fill=\"alternative600\" />\r\n      <Typography textColor=\"alternative600\" variant=\"sigma\">\r\n        New\r\n      </Typography>\r\n    </Flex>\r\n  </Flex>\r\n);\r\n\r\ntype AttributeOptionProps = {\r\n  type: IconByType;\r\n};\r\n\r\nexport const AttributeOption = ({ type = 'text' }: AttributeOptionProps) => {\r\n  const { formatMessage } = useIntl();\r\n\r\n  const { onClickSelectField } = useFormModalNavigation();\r\n\r\n  const handleClick = () => {\r\n    const step = type === 'component' ? '1' : null;\r\n\r\n    onClickSelectField({\r\n      attributeType: type,\r\n      step,\r\n    });\r\n  };\r\n\r\n  return (\r\n    <OptionBoxWrapper padding={4} tag=\"button\" hasRadius type=\"button\" onClick={handleClick}>\r\n      <Flex>\r\n        <AttributeIcon type={type} />\r\n        <Box paddingLeft={4} width=\"100%\">\r\n          <Flex justifyContent=\"space-between\">\r\n            <Typography fontWeight=\"bold\" textColor=\"neutral800\">\r\n              {formatMessage({ id: getTrad(`attribute.${type}`), defaultMessage: type })}\r\n            </Typography>\r\n            {newAttributes.includes(type) && <NewBadge />}\r\n          </Flex>\r\n          <Flex>\r\n            <Typography variant=\"pi\" textColor=\"neutral600\">\r\n              {formatMessage({\r\n                id: getTrad(`attribute.${type}.description`),\r\n                defaultMessage: 'A type for modeling data',\r\n              })}\r\n            </Typography>\r\n          </Flex>\r\n        </Box>\r\n      </Flex>\r\n    </OptionBoxWrapper>\r\n  );\r\n};\r\n"],"names":["newAttributes","NewBadge","_jsx","Flex","grow","justifyContent","_jsxs","gap","hasRadius","background","padding","Sparkle","width","height","fill","Typography","textColor","variant","AttributeOption","type","formatMessage","useIntl","onClickSelectField","useFormModalNavigation","handleClick","step","attributeType","OptionBoxWrapper","tag","onClick","AttributeIcon","Box","paddingLeft","fontWeight","id","getTrad","defaultMessage","includes"],"mappings":";;;;;;;;;;;AAgBA,MAAMA,gBAA0B,EAAE;AAElC,MAAMC,QAAAA,GAAW,kBACfC,cAAA,CAACC,iBAAAA,EAAAA;QAAKC,IAAAA,EAAM,CAAA;QAAGC,cAAAA,EAAe,UAAA;AAC5B,QAAA,QAAA,gBAAAC,eAAA,CAACH,iBAAAA,EAAAA;YAAKI,GAAAA,EAAK,CAAA;YAAGC,SAAS,EAAA,IAAA;YAACC,UAAAA,EAAW,gBAAA;YAAiBC,OAAAA,EAAS,CAAC,aAAa,CAAC;;8BAC1ER,cAAA,CAACS,aAAAA,EAAAA;oBAAQC,KAAAA,EAAO,CAAC,IAAI,CAAC;oBAAEC,MAAAA,EAAQ,CAAC,IAAI,CAAC;oBAAEC,IAAAA,EAAK;;8BAC7CZ,cAAA,CAACa,uBAAAA,EAAAA;oBAAWC,SAAAA,EAAU,gBAAA;oBAAiBC,OAAAA,EAAQ,OAAA;AAAQ,oBAAA,QAAA,EAAA;;;;;MAWhDC,eAAAA,GAAkB,CAAC,EAAEC,IAAAA,GAAO,MAAM,EAAwB,GAAA;IACrE,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAE1B,MAAM,EAAEC,kBAAkB,EAAE,GAAGC,6CAAAA,EAAAA;AAE/B,IAAA,MAAMC,WAAAA,GAAc,IAAA;QAClB,MAAMC,IAAAA,GAAON,IAAAA,KAAS,WAAA,GAAc,GAAA,GAAM,IAAA;QAE1CG,kBAAAA,CAAmB;YACjBI,aAAAA,EAAeP,IAAAA;AACfM,YAAAA;AACF,SAAA,CAAA;AACF,IAAA,CAAA;AAEA,IAAA,qBACEvB,cAAA,CAACyB,iCAAAA,EAAAA;QAAiBjB,OAAAA,EAAS,CAAA;QAAGkB,GAAAA,EAAI,QAAA;QAASpB,SAAS,EAAA,IAAA;QAACW,IAAAA,EAAK,QAAA;QAASU,OAAAA,EAASL,WAAAA;AAC1E,QAAA,QAAA,gBAAAlB,eAAA,CAACH,iBAAAA,EAAAA;;8BACCD,cAAA,CAAC4B,2BAAAA,EAAAA;oBAAcX,IAAAA,EAAMA;;8BACrBb,eAAA,CAACyB,gBAAAA,EAAAA;oBAAIC,WAAAA,EAAa,CAAA;oBAAGpB,KAAAA,EAAM,MAAA;;sCACzBN,eAAA,CAACH,iBAAAA,EAAAA;4BAAKE,cAAAA,EAAe,eAAA;;8CACnBH,cAAA,CAACa,uBAAAA,EAAAA;oCAAWkB,UAAAA,EAAW,MAAA;oCAAOjB,SAAAA,EAAU,YAAA;8CACrCI,aAAAA,CAAc;AAAEc,wCAAAA,EAAAA,EAAIC,eAAAA,CAAQ,CAAC,UAAU,EAAEhB,IAAAA,CAAAA,CAAM,CAAA;wCAAGiB,cAAAA,EAAgBjB;AAAK,qCAAA;;gCAEzEnB,aAAAA,CAAcqC,QAAQ,CAAClB,IAAAA,CAAAA,kBAASjB,cAAA,CAACD,QAAAA,EAAAA,EAAAA;;;sCAEpCC,cAAA,CAACC,iBAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAD,cAAA,CAACa,uBAAAA,EAAAA;gCAAWE,OAAAA,EAAQ,IAAA;gCAAKD,SAAAA,EAAU,YAAA;0CAChCI,aAAAA,CAAc;AACbc,oCAAAA,EAAAA,EAAIC,gBAAQ,CAAC,UAAU,EAAEhB,IAAAA,CAAK,YAAY,CAAC,CAAA;oCAC3CiB,cAAAA,EAAgB;AAClB,iCAAA;;;;;;;;AAOd;;;;"}

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

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Flex, Box, Typography } from '@strapi/design-system';
+import { Sparkle } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../../utils/getTrad.mjs';
+import { AttributeIcon } from '../AttributeIcon.mjs';
+import { useFormModalNavigation } from '../FormModalNavigation/useFormModalNavigation.mjs';
+import { OptionBoxWrapper } from './OptionBoxWrapper.mjs';
+
+const newAttributes = [];
+const NewBadge = ()=>/*#__PURE__*/ jsx(Flex, {
+        grow: 1,
+        justifyContent: "flex-end",
+        children: /*#__PURE__*/ jsxs(Flex, {
+            gap: 1,
+            hasRadius: true,
+            background: "alternative100",
+            padding: `0.2rem 0.4rem`,
+            children: [
+                /*#__PURE__*/ jsx(Sparkle, {
+                    width: `1rem`,
+                    height: `1rem`,
+                    fill: "alternative600"
+                }),
+                /*#__PURE__*/ jsx(Typography, {
+                    textColor: "alternative600",
+                    variant: "sigma",
+                    children: "New"
+                })
+            ]
+        })
+    });
+const AttributeOption = ({ type = 'text' })=>{
+    const { formatMessage } = useIntl();
+    const { onClickSelectField } = useFormModalNavigation();
+    const handleClick = ()=>{
+        const step = type === 'component' ? '1' : null;
+        onClickSelectField({
+            attributeType: type,
+            step
+        });
+    };
+    return /*#__PURE__*/ jsx(OptionBoxWrapper, {
+        padding: 4,
+        tag: "button",
+        hasRadius: true,
+        type: "button",
+        onClick: handleClick,
+        children: /*#__PURE__*/ jsxs(Flex, {
+            children: [
+                /*#__PURE__*/ jsx(AttributeIcon, {
+                    type: type
+                }),
+                /*#__PURE__*/ jsxs(Box, {
+                    paddingLeft: 4,
+                    width: "100%",
+                    children: [
+                        /*#__PURE__*/ jsxs(Flex, {
+                            justifyContent: "space-between",
+                            children: [
+                                /*#__PURE__*/ jsx(Typography, {
+                                    fontWeight: "bold",
+                                    textColor: "neutral800",
+                                    children: formatMessage({
+                                        id: getTrad(`attribute.${type}`),
+                                        defaultMessage: type
+                                    })
+                                }),
+                                newAttributes.includes(type) && /*#__PURE__*/ jsx(NewBadge, {})
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Flex, {
+                            children: /*#__PURE__*/ jsx(Typography, {
+                                variant: "pi",
+                                textColor: "neutral600",
+                                children: formatMessage({
+                                    id: getTrad(`attribute.${type}.description`),
+                                    defaultMessage: 'A type for modeling data'
+                                })
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+export { AttributeOption };
+//# sourceMappingURL=AttributeOption.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttributeOption.mjs","sources":["../../../../admin/src/components/AttributeOptions/AttributeOption.tsx"],"sourcesContent":["/**\r\n *\r\n * AttributeOption\r\n *\r\n */\r\n\r\nimport { Box, Flex, Typography } from '@strapi/design-system';\r\nimport { Sparkle } from '@strapi/icons';\r\nimport { useIntl } from 'react-intl';\r\n\r\nimport { getTrad } from '../../utils/getTrad';\r\nimport { AttributeIcon, IconByType } from '../AttributeIcon';\r\nimport { useFormModalNavigation } from '../FormModalNavigation/useFormModalNavigation';\r\n\r\nimport { OptionBoxWrapper } from './OptionBoxWrapper';\r\n\r\nconst newAttributes: string[] = [];\r\n\r\nconst NewBadge = () => (\r\n  <Flex grow={1} justifyContent=\"flex-end\">\r\n    <Flex gap={1} hasRadius background=\"alternative100\" padding={`0.2rem 0.4rem`}>\r\n      <Sparkle width={`1rem`} height={`1rem`} fill=\"alternative600\" />\r\n      <Typography textColor=\"alternative600\" variant=\"sigma\">\r\n        New\r\n      </Typography>\r\n    </Flex>\r\n  </Flex>\r\n);\r\n\r\ntype AttributeOptionProps = {\r\n  type: IconByType;\r\n};\r\n\r\nexport const AttributeOption = ({ type = 'text' }: AttributeOptionProps) => {\r\n  const { formatMessage } = useIntl();\r\n\r\n  const { onClickSelectField } = useFormModalNavigation();\r\n\r\n  const handleClick = () => {\r\n    const step = type === 'component' ? '1' : null;\r\n\r\n    onClickSelectField({\r\n      attributeType: type,\r\n      step,\r\n    });\r\n  };\r\n\r\n  return (\r\n    <OptionBoxWrapper padding={4} tag=\"button\" hasRadius type=\"button\" onClick={handleClick}>\r\n      <Flex>\r\n        <AttributeIcon type={type} />\r\n        <Box paddingLeft={4} width=\"100%\">\r\n          <Flex justifyContent=\"space-between\">\r\n            <Typography fontWeight=\"bold\" textColor=\"neutral800\">\r\n              {formatMessage({ id: getTrad(`attribute.${type}`), defaultMessage: type })}\r\n            </Typography>\r\n            {newAttributes.includes(type) && <NewBadge />}\r\n          </Flex>\r\n          <Flex>\r\n            <Typography variant=\"pi\" textColor=\"neutral600\">\r\n              {formatMessage({\r\n                id: getTrad(`attribute.${type}.description`),\r\n                defaultMessage: 'A type for modeling data',\r\n              })}\r\n            </Typography>\r\n          </Flex>\r\n        </Box>\r\n      </Flex>\r\n    </OptionBoxWrapper>\r\n  );\r\n};\r\n"],"names":["newAttributes","NewBadge","_jsx","Flex","grow","justifyContent","_jsxs","gap","hasRadius","background","padding","Sparkle","width","height","fill","Typography","textColor","variant","AttributeOption","type","formatMessage","useIntl","onClickSelectField","useFormModalNavigation","handleClick","step","attributeType","OptionBoxWrapper","tag","onClick","AttributeIcon","Box","paddingLeft","fontWeight","id","getTrad","defaultMessage","includes"],"mappings":";;;;;;;;;AAgBA,MAAMA,gBAA0B,EAAE;AAElC,MAAMC,QAAAA,GAAW,kBACfC,GAAA,CAACC,IAAAA,EAAAA;QAAKC,IAAAA,EAAM,CAAA;QAAGC,cAAAA,EAAe,UAAA;AAC5B,QAAA,QAAA,gBAAAC,IAAA,CAACH,IAAAA,EAAAA;YAAKI,GAAAA,EAAK,CAAA;YAAGC,SAAS,EAAA,IAAA;YAACC,UAAAA,EAAW,gBAAA;YAAiBC,OAAAA,EAAS,CAAC,aAAa,CAAC;;8BAC1ER,GAAA,CAACS,OAAAA,EAAAA;oBAAQC,KAAAA,EAAO,CAAC,IAAI,CAAC;oBAAEC,MAAAA,EAAQ,CAAC,IAAI,CAAC;oBAAEC,IAAAA,EAAK;;8BAC7CZ,GAAA,CAACa,UAAAA,EAAAA;oBAAWC,SAAAA,EAAU,gBAAA;oBAAiBC,OAAAA,EAAQ,OAAA;AAAQ,oBAAA,QAAA,EAAA;;;;;MAWhDC,eAAAA,GAAkB,CAAC,EAAEC,IAAAA,GAAO,MAAM,EAAwB,GAAA;IACrE,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAE1B,MAAM,EAAEC,kBAAkB,EAAE,GAAGC,sBAAAA,EAAAA;AAE/B,IAAA,MAAMC,WAAAA,GAAc,IAAA;QAClB,MAAMC,IAAAA,GAAON,IAAAA,KAAS,WAAA,GAAc,GAAA,GAAM,IAAA;QAE1CG,kBAAAA,CAAmB;YACjBI,aAAAA,EAAeP,IAAAA;AACfM,YAAAA;AACF,SAAA,CAAA;AACF,IAAA,CAAA;AAEA,IAAA,qBACEvB,GAAA,CAACyB,gBAAAA,EAAAA;QAAiBjB,OAAAA,EAAS,CAAA;QAAGkB,GAAAA,EAAI,QAAA;QAASpB,SAAS,EAAA,IAAA;QAACW,IAAAA,EAAK,QAAA;QAASU,OAAAA,EAASL,WAAAA;AAC1E,QAAA,QAAA,gBAAAlB,IAAA,CAACH,IAAAA,EAAAA;;8BACCD,GAAA,CAAC4B,aAAAA,EAAAA;oBAAcX,IAAAA,EAAMA;;8BACrBb,IAAA,CAACyB,GAAAA,EAAAA;oBAAIC,WAAAA,EAAa,CAAA;oBAAGpB,KAAAA,EAAM,MAAA;;sCACzBN,IAAA,CAACH,IAAAA,EAAAA;4BAAKE,cAAAA,EAAe,eAAA;;8CACnBH,GAAA,CAACa,UAAAA,EAAAA;oCAAWkB,UAAAA,EAAW,MAAA;oCAAOjB,SAAAA,EAAU,YAAA;8CACrCI,aAAAA,CAAc;AAAEc,wCAAAA,EAAAA,EAAIC,OAAAA,CAAQ,CAAC,UAAU,EAAEhB,IAAAA,CAAAA,CAAM,CAAA;wCAAGiB,cAAAA,EAAgBjB;AAAK,qCAAA;;gCAEzEnB,aAAAA,CAAcqC,QAAQ,CAAClB,IAAAA,CAAAA,kBAASjB,GAAA,CAACD,QAAAA,EAAAA,EAAAA;;;sCAEpCC,GAAA,CAACC,IAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAD,GAAA,CAACa,UAAAA,EAAAA;gCAAWE,OAAAA,EAAQ,IAAA;gCAAKD,SAAAA,EAAU,YAAA;0CAChCI,aAAAA,CAAc;AACbc,oCAAAA,EAAAA,EAAIC,QAAQ,CAAC,UAAU,EAAEhB,IAAAA,CAAK,YAAY,CAAC,CAAA;oCAC3CiB,cAAAA,EAAgB;AAClB,iCAAA;;;;;;;;AAOd;;;;"}

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":["/**\r\n *\r\n * AttributeOptions\r\n *\r\n */\r\n\r\nimport { Divider, Flex, Modal, Tabs, Typography } from '@strapi/design-system';\r\nimport { useIntl } from 'react-intl';\r\n\r\nimport { getTrad } from '../../utils';\r\nimport { IconByType } from '../AttributeIcon';\r\n\r\nimport { AttributeList } from './AttributeList';\r\nimport { CustomFieldsList } from './CustomFieldsList';\r\n\r\ntype AttributeOptionsProps = {\r\n  attributes: IconByType[][];\r\n  forTarget: string;\r\n  kind: string;\r\n};\r\n\r\nexport const AttributeOptions = ({ attributes, forTarget, kind }: AttributeOptionsProps) => {\r\n  const { formatMessage } = useIntl();\r\n\r\n  const defaultTabId = getTrad('modalForm.tabs.default');\r\n  const customTabId = getTrad('modalForm.tabs.custom');\r\n\r\n  const titleIdSuffix = forTarget.includes('component') ? 'component' : kind;\r\n  const titleId = getTrad(`modalForm.sub-header.chooseAttribute.${titleIdSuffix}`);\r\n\r\n  return (\r\n    <Modal.Body>\r\n      <Tabs.Root variant=\"simple\" defaultValue=\"default\">\r\n        <Flex justifyContent=\"space-between\">\r\n          <Typography variant=\"beta\" tag=\"h2\">\r\n            {formatMessage({ id: titleId, defaultMessage: 'Select a field' })}\r\n          </Typography>\r\n          <Tabs.List>\r\n            <Tabs.Trigger value=\"default\">\r\n              {formatMessage({ id: defaultTabId, defaultMessage: 'Default' })}\r\n            </Tabs.Trigger>\r\n            <Tabs.Trigger value=\"custom\">\r\n              {formatMessage({ id: customTabId, defaultMessage: 'Custom' })}\r\n            </Tabs.Trigger>\r\n          </Tabs.List>\r\n        </Flex>\r\n        <Divider marginBottom={6} />\r\n        <Tabs.Content value=\"default\">\r\n          <AttributeList attributes={attributes} />\r\n        </Tabs.Content>\r\n        <Tabs.Content value=\"custom\">\r\n          <CustomFieldsList />\r\n        </Tabs.Content>\r\n      </Tabs.Root>\r\n    </Modal.Body>\r\n  );\r\n};\r\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,eAAAA,CAAQ,wBAAA,CAAA;AAC7B,IAAA,MAAMC,cAAcD,eAAAA,CAAQ,uBAAA,CAAA;AAE5B,IAAA,MAAME,aAAAA,GAAgBP,SAAAA,CAAUQ,QAAQ,CAAC,eAAe,WAAA,GAAcP,IAAAA;AACtE,IAAA,MAAMQ,OAAAA,GAAUJ,eAAAA,CAAQ,CAAC,qCAAqC,EAAEE,aAAAA,CAAAA,CAAe,CAAA;IAE/E,qBACEG,cAAA,CAACC,mBAAMC,IAAI,EAAA;gCACTC,eAAA,CAACC,kBAAKC,IAAI,EAAA;YAACC,OAAAA,EAAQ,QAAA;YAASC,YAAAA,EAAa,SAAA;;8BACvCJ,eAAA,CAACK,iBAAAA,EAAAA;oBAAKC,cAAAA,EAAe,eAAA;;sCACnBT,cAAA,CAACU,uBAAAA,EAAAA;4BAAWJ,OAAAA,EAAQ,MAAA;4BAAOK,GAAAA,EAAI,IAAA;sCAC5BnB,aAAAA,CAAc;gCAAEoB,EAAAA,EAAIb,OAAAA;gCAASc,cAAAA,EAAgB;AAAiB,6BAAA;;AAEjE,sCAAAV,eAAA,CAACC,kBAAKU,IAAI,EAAA;;AACR,8CAAAd,cAAA,CAACI,kBAAKW,OAAO,EAAA;oCAACC,KAAAA,EAAM,SAAA;8CACjBxB,aAAAA,CAAc;wCAAEoB,EAAAA,EAAIlB,YAAAA;wCAAcmB,cAAAA,EAAgB;AAAU,qCAAA;;AAE/D,8CAAAb,cAAA,CAACI,kBAAKW,OAAO,EAAA;oCAACC,KAAAA,EAAM,QAAA;8CACjBxB,aAAAA,CAAc;wCAAEoB,EAAAA,EAAIhB,WAAAA;wCAAaiB,cAAAA,EAAgB;AAAS,qCAAA;;;;;;8BAIjEb,cAAA,CAACiB,oBAAAA,EAAAA;oBAAQC,YAAAA,EAAc;;AACvB,8BAAAlB,cAAA,CAACI,kBAAKe,OAAO,EAAA;oBAACH,KAAAA,EAAM,SAAA;AAClB,oBAAA,QAAA,gBAAAhB,cAAA,CAACoB,2BAAAA,EAAAA;wBAAc/B,UAAAA,EAAYA;;;AAE7B,8BAAAW,cAAA,CAACI,kBAAKe,OAAO,EAAA;oBAACH,KAAAA,EAAM,QAAA;AAClB,oBAAA,QAAA,gBAAAhB,cAAA,CAACqB,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":["/**\r\n *\r\n * AttributeOptions\r\n *\r\n */\r\n\r\nimport { Divider, Flex, Modal, Tabs, Typography } from '@strapi/design-system';\r\nimport { useIntl } from 'react-intl';\r\n\r\nimport { getTrad } from '../../utils';\r\nimport { IconByType } from '../AttributeIcon';\r\n\r\nimport { AttributeList } from './AttributeList';\r\nimport { CustomFieldsList } from './CustomFieldsList';\r\n\r\ntype AttributeOptionsProps = {\r\n  attributes: IconByType[][];\r\n  forTarget: string;\r\n  kind: string;\r\n};\r\n\r\nexport const AttributeOptions = ({ attributes, forTarget, kind }: AttributeOptionsProps) => {\r\n  const { formatMessage } = useIntl();\r\n\r\n  const defaultTabId = getTrad('modalForm.tabs.default');\r\n  const customTabId = getTrad('modalForm.tabs.custom');\r\n\r\n  const titleIdSuffix = forTarget.includes('component') ? 'component' : kind;\r\n  const titleId = getTrad(`modalForm.sub-header.chooseAttribute.${titleIdSuffix}`);\r\n\r\n  return (\r\n    <Modal.Body>\r\n      <Tabs.Root variant=\"simple\" defaultValue=\"default\">\r\n        <Flex justifyContent=\"space-between\">\r\n          <Typography variant=\"beta\" tag=\"h2\">\r\n            {formatMessage({ id: titleId, defaultMessage: 'Select a field' })}\r\n          </Typography>\r\n          <Tabs.List>\r\n            <Tabs.Trigger value=\"default\">\r\n              {formatMessage({ id: defaultTabId, defaultMessage: 'Default' })}\r\n            </Tabs.Trigger>\r\n            <Tabs.Trigger value=\"custom\">\r\n              {formatMessage({ id: customTabId, defaultMessage: 'Custom' })}\r\n            </Tabs.Trigger>\r\n          </Tabs.List>\r\n        </Flex>\r\n        <Divider marginBottom={6} />\r\n        <Tabs.Content value=\"default\">\r\n          <AttributeList attributes={attributes} />\r\n        </Tabs.Content>\r\n        <Tabs.Content value=\"custom\">\r\n          <CustomFieldsList />\r\n        </Tabs.Content>\r\n      </Tabs.Root>\r\n    </Modal.Body>\r\n  );\r\n};\r\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,OAAAA,CAAQ,wBAAA,CAAA;AAC7B,IAAA,MAAMC,cAAcD,OAAAA,CAAQ,uBAAA,CAAA;AAE5B,IAAA,MAAME,aAAAA,GAAgBP,SAAAA,CAAUQ,QAAQ,CAAC,eAAe,WAAA,GAAcP,IAAAA;AACtE,IAAA,MAAMQ,OAAAA,GAAUJ,OAAAA,CAAQ,CAAC,qCAAqC,EAAEE,aAAAA,CAAAA,CAAe,CAAA;IAE/E,qBACEG,GAAA,CAACC,MAAMC,IAAI,EAAA;gCACTC,IAAA,CAACC,KAAKC,IAAI,EAAA;YAACC,OAAAA,EAAQ,QAAA;YAASC,YAAAA,EAAa,SAAA;;8BACvCJ,IAAA,CAACK,IAAAA,EAAAA;oBAAKC,cAAAA,EAAe,eAAA;;sCACnBT,GAAA,CAACU,UAAAA,EAAAA;4BAAWJ,OAAAA,EAAQ,MAAA;4BAAOK,GAAAA,EAAI,IAAA;sCAC5BnB,aAAAA,CAAc;gCAAEoB,EAAAA,EAAIb,OAAAA;gCAASc,cAAAA,EAAgB;AAAiB,6BAAA;;AAEjE,sCAAAV,IAAA,CAACC,KAAKU,IAAI,EAAA;;AACR,8CAAAd,GAAA,CAACI,KAAKW,OAAO,EAAA;oCAACC,KAAAA,EAAM,SAAA;8CACjBxB,aAAAA,CAAc;wCAAEoB,EAAAA,EAAIlB,YAAAA;wCAAcmB,cAAAA,EAAgB;AAAU,qCAAA;;AAE/D,8CAAAb,GAAA,CAACI,KAAKW,OAAO,EAAA;oCAACC,KAAAA,EAAM,QAAA;8CACjBxB,aAAAA,CAAc;wCAAEoB,EAAAA,EAAIhB,WAAAA;wCAAaiB,cAAAA,EAAgB;AAAS,qCAAA;;;;;;8BAIjEb,GAAA,CAACiB,OAAAA,EAAAA;oBAAQC,YAAAA,EAAc;;AACvB,8BAAAlB,GAAA,CAACI,KAAKe,OAAO,EAAA;oBAACH,KAAAA,EAAM,SAAA;AAClB,oBAAA,QAAA,gBAAAhB,GAAA,CAACoB,aAAAA,EAAAA;wBAAc/B,UAAAA,EAAYA;;;AAE7B,8BAAAW,GAAA,CAACI,KAAKe,OAAO,EAAA;oBAACH,KAAAA,EAAM,QAAA;AAClB,oBAAA,QAAA,gBAAAhB,GAAA,CAACqB,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 AttributeIcon = require('../AttributeIcon.js');
+var useFormModalNavigation = require('../FormModalNavigation/useFormModalNavigation.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';\r\n\r\nimport { StrapiAppContextValue } from '@strapi/admin/strapi-admin';\r\nimport { Box, Flex, Typography } from '@strapi/design-system';\r\nimport { useIntl } from 'react-intl';\r\n\r\nimport { AttributeIcon, IconByType } from '../AttributeIcon';\r\nimport { useFormModalNavigation } from '../FormModalNavigation/useFormModalNavigation';\r\n\r\nimport { OptionBoxWrapper } from './OptionBoxWrapper';\r\n\r\nexport type CustomFieldOption = {\r\n  name: string;\r\n  type: IconByType;\r\n  icon: React.ComponentType;\r\n  intlLabel: {\r\n    id: string;\r\n    defaultMessage: string;\r\n  };\r\n  intlDescription: {\r\n    id: string;\r\n    defaultMessage: string;\r\n  };\r\n};\r\n\r\ntype CustomFieldOptionProps = {\r\n  customFieldUid: string;\r\n  customField: NonNullable<ReturnType<StrapiAppContextValue['customFields']['get']>>;\r\n};\r\n\r\nexport const CustomFieldOption = ({ customFieldUid, customField }: CustomFieldOptionProps) => {\r\n  const { type, intlLabel, intlDescription } = customField;\r\n  const { formatMessage } = useIntl();\r\n\r\n  const { onClickSelectCustomField } = useFormModalNavigation();\r\n\r\n  const handleClick = () => {\r\n    onClickSelectCustomField({\r\n      attributeType: type,\r\n      customFieldUid,\r\n    });\r\n  };\r\n\r\n  return (\r\n    <OptionBoxWrapper padding={4} tag=\"button\" hasRadius type=\"button\" onClick={handleClick}>\r\n      <Flex>\r\n        <AttributeIcon type={type} customField={customFieldUid} />\r\n        <Box paddingLeft={4}>\r\n          <Flex>\r\n            <Typography fontWeight=\"bold\" textColor=\"neutral800\">\r\n              {formatMessage(intlLabel)}\r\n            </Typography>\r\n          </Flex>\r\n          <Flex>\r\n            <Typography variant=\"pi\" textColor=\"neutral600\">\r\n              {formatMessage(intlDescription)}\r\n            </Typography>\r\n          </Flex>\r\n        </Box>\r\n      </Flex>\r\n    </OptionBoxWrapper>\r\n  );\r\n};\r\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,iBAAAA,GAAoB,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,WAAAA,GAAc,IAAA;QAClBF,wBAAAA,CAAyB;YACvBG,aAAAA,EAAeR,IAAAA;AACfF,YAAAA;AACF,SAAA,CAAA;AACF,IAAA,CAAA;AAEA,IAAA,qBACEW,cAAA,CAACC,iCAAAA,EAAAA;QAAiBC,OAAAA,EAAS,CAAA;QAAGC,GAAAA,EAAI,QAAA;QAASC,SAAS,EAAA,IAAA;QAACb,IAAAA,EAAK,QAAA;QAASc,OAAAA,EAASP,WAAAA;AAC1E,QAAA,QAAA,gBAAAQ,eAAA,CAACC,iBAAAA,EAAAA;;8BACCP,cAAA,CAACQ,2BAAAA,EAAAA;oBAAcjB,IAAAA,EAAMA,IAAAA;oBAAMD,WAAAA,EAAaD;;8BACxCiB,eAAA,CAACG,gBAAAA,EAAAA;oBAAIC,WAAAA,EAAa,CAAA;;sCAChBV,cAAA,CAACO,iBAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAP,cAAA,CAACW,uBAAAA,EAAAA;gCAAWC,UAAAA,EAAW,MAAA;gCAAOC,SAAAA,EAAU,YAAA;0CACrCnB,aAAAA,CAAcF,SAAAA;;;sCAGnBQ,cAAA,CAACO,iBAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAP,cAAA,CAACW,uBAAAA,EAAAA;gCAAWG,OAAAA,EAAQ,IAAA;gCAAKD,SAAAA,EAAU,YAAA;0CAChCnB,aAAAA,CAAcD,eAAAA;;;;;;;;AAO7B;;;;"}