@strapi/content-type-builder 5.12.1 → 5.12.2

package/dist/admin/components/AllowedTypesSelect.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var upperFirst = require('lodash/upperFirst');
+var reactIntl = require('react-intl');
+
+const options = [
+    {
+        label: 'All',
+        children: [
+            {
+                label: 'images (JPEG, PNG, GIF, SVG, TIFF, ICO, DVU)',
+                value: 'images'
+            },
+            {
+                label: 'videos (MPEG, MP4, Quicktime, WMV, AVI, FLV)',
+                value: 'videos'
+            },
+            {
+                label: 'audios (MP3, WAV, OGG)',
+                value: 'audios'
+            },
+            {
+                label: 'files (CSV, ZIP, PDF, Excel, JSON, ...)',
+                value: 'files'
+            }
+        ]
+    }
+];
+const AllowedTypesSelect = ({ intlLabel, name, onChange, value = null })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    /* eslint-disable indent */ const displayedValue = value === null || value?.length === 0 ? formatMessage({
+        id: 'global.none',
+        defaultMessage: 'None'
+    }) : [
+        ...value
+    ].sort().map((v)=>upperFirst(v)).join(', ');
+    /* eslint-enable indent */ const label = intlLabel.id ? formatMessage({
+        id: intlLabel.id,
+        defaultMessage: intlLabel.defaultMessage
+    }) : name;
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+        name: name,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.MultiSelectNested, {
+                customizeContent: ()=>displayedValue,
+                onChange: (values)=>{
+                    if (values.length > 0) {
+                        onChange({
+                            target: {
+                                name,
+                                value: values,
+                                type: 'allowed-types-select'
+                            }
+                        });
+                    } else {
+                        onChange({
+                            target: {
+                                name,
+                                value: null,
+                                type: 'allowed-types-select'
+                            }
+                        });
+                    }
+                },
+                options: options,
+                value: value || []
+            })
+        ]
+    });
+};
+
+exports.AllowedTypesSelect = AllowedTypesSelect;
+//# sourceMappingURL=AllowedTypesSelect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AllowedTypesSelect.js","sources":["../../../admin/src/components/AllowedTypesSelect.tsx"],"sourcesContent":["import { Field, MultiSelectNested } from '@strapi/design-system';\nimport upperFirst from 'lodash/upperFirst';\nimport { useIntl } from 'react-intl';\n\nimport { IntlLabel } from '../types';\n\ninterface AllowedTypesSelectProps {\n  intlLabel: IntlLabel;\n  name: string;\n  onChange: (value: any) => void;\n  value?: any;\n}\n\nconst options = [\n  {\n    label: 'All',\n    children: [\n      { label: 'images (JPEG, PNG, GIF, SVG, TIFF, ICO, DVU)', value: 'images' },\n      { label: 'videos (MPEG, MP4, Quicktime, WMV, AVI, FLV)', value: 'videos' },\n      { label: 'audios (MP3, WAV, OGG)', value: 'audios' },\n      { label: 'files (CSV, ZIP, PDF, Excel, JSON, ...)', value: 'files' },\n    ],\n  },\n];\n\nexport const AllowedTypesSelect = ({\n  intlLabel,\n  name,\n  onChange,\n  value = null,\n}: AllowedTypesSelectProps) => {\n  const { formatMessage } = useIntl();\n\n  /* eslint-disable indent */\n  const displayedValue =\n    value === null || value?.length === 0\n      ? formatMessage({ id: 'global.none', defaultMessage: 'None' })\n      : [...value]\n          .sort()\n          .map((v) => upperFirst(v))\n          .join(', ');\n\n  /* eslint-enable indent */\n\n  const label = intlLabel.id\n    ? formatMessage({ id: intlLabel.id, defaultMessage: intlLabel.defaultMessage })\n    : name;\n\n  return (\n    <Field.Root name={name}>\n      <Field.Label>{label}</Field.Label>\n      <MultiSelectNested\n        customizeContent={() => displayedValue}\n        onChange={(values: any[]) => {\n          if (values.length > 0) {\n            onChange({ target: { name, value: values, type: 'allowed-types-select' } });\n          } else {\n            onChange({ target: { name, value: null, type: 'allowed-types-select' } });\n          }\n        }}\n        options={options}\n        value={value || []}\n      />\n    </Field.Root>\n  );\n};\n"],"names":["options","label","children","value","AllowedTypesSelect","intlLabel","name","onChange","formatMessage","useIntl","displayedValue","length","id","defaultMessage","sort","map","v","upperFirst","join","_jsxs","Field","Root","_jsx","Label","MultiSelectNested","customizeContent","values","target","type"],"mappings":";;;;;;;AAaA,MAAMA,OAAU,GAAA;AACd,IAAA;QACEC,KAAO,EAAA,KAAA;QACPC,QAAU,EAAA;AACR,YAAA;gBAAED,KAAO,EAAA,8CAAA;gBAAgDE,KAAO,EAAA;AAAS,aAAA;AACzE,YAAA;gBAAEF,KAAO,EAAA,8CAAA;gBAAgDE,KAAO,EAAA;AAAS,aAAA;AACzE,YAAA;gBAAEF,KAAO,EAAA,wBAAA;gBAA0BE,KAAO,EAAA;AAAS,aAAA;AACnD,YAAA;gBAAEF,KAAO,EAAA,yCAAA;gBAA2CE,KAAO,EAAA;AAAQ;AACpE;AACH;AACD,CAAA;AAEYC,MAAAA,kBAAAA,GAAqB,CAAC,EACjCC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRJ,KAAQ,GAAA,IAAI,EACY,GAAA;IACxB,MAAM,EAAEK,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;gCAG1B,MAAMC,cACJP,GAAAA,KAAAA,KAAU,QAAQA,KAAOQ,EAAAA,MAAAA,KAAW,IAChCH,aAAc,CAAA;QAAEI,EAAI,EAAA,aAAA;QAAeC,cAAgB,EAAA;KACnD,CAAA,GAAA;AAAIV,QAAAA,GAAAA;KAAM,CACPW,IAAI,GACJC,GAAG,CAAC,CAACC,CAAMC,GAAAA,UAAAA,CAAWD,CACtBE,CAAAA,CAAAA,CAAAA,IAAI,CAAC,IAAA,CAAA;AAEd,+BAEA,MAAMjB,KAAAA,GAAQI,SAAUO,CAAAA,EAAE,GACtBJ,aAAc,CAAA;AAAEI,QAAAA,EAAAA,EAAIP,UAAUO,EAAE;AAAEC,QAAAA,cAAAA,EAAgBR,UAAUQ;KAC5DP,CAAAA,GAAAA,IAAAA;IAEJ,qBACEa,eAAA,CAACC,mBAAMC,IAAI,EAAA;QAACf,IAAMA,EAAAA,IAAAA;;AAChB,0BAAAgB,cAAA,CAACF,mBAAMG,KAAK,EAAA;AAAEtB,gBAAAA,QAAAA,EAAAA;;0BACdqB,cAACE,CAAAA,8BAAAA,EAAAA;AACCC,gBAAAA,gBAAAA,EAAkB,IAAMf,cAAAA;AACxBH,gBAAAA,QAAAA,EAAU,CAACmB,MAAAA,GAAAA;oBACT,IAAIA,MAAAA,CAAOf,MAAM,GAAG,CAAG,EAAA;wBACrBJ,QAAS,CAAA;4BAAEoB,MAAQ,EAAA;AAAErB,gCAAAA,IAAAA;gCAAMH,KAAOuB,EAAAA,MAAAA;gCAAQE,IAAM,EAAA;AAAuB;AAAE,yBAAA,CAAA;qBACpE,MAAA;wBACLrB,QAAS,CAAA;4BAAEoB,MAAQ,EAAA;AAAErB,gCAAAA,IAAAA;gCAAMH,KAAO,EAAA,IAAA;gCAAMyB,IAAM,EAAA;AAAuB;AAAE,yBAAA,CAAA;AACzE;AACF,iBAAA;gBACA5B,OAASA,EAAAA,OAAAA;AACTG,gBAAAA,KAAAA,EAAOA,SAAS;;;;AAIxB;;;;"}

package/dist/admin/components/AllowedTypesSelect.mjs

@@ -0,0 +1,76 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Field, MultiSelectNested } from '@strapi/design-system';
+import upperFirst from 'lodash/upperFirst';
+import { useIntl } from 'react-intl';
+
+const options = [
+    {
+        label: 'All',
+        children: [
+            {
+                label: 'images (JPEG, PNG, GIF, SVG, TIFF, ICO, DVU)',
+                value: 'images'
+            },
+            {
+                label: 'videos (MPEG, MP4, Quicktime, WMV, AVI, FLV)',
+                value: 'videos'
+            },
+            {
+                label: 'audios (MP3, WAV, OGG)',
+                value: 'audios'
+            },
+            {
+                label: 'files (CSV, ZIP, PDF, Excel, JSON, ...)',
+                value: 'files'
+            }
+        ]
+    }
+];
+const AllowedTypesSelect = ({ intlLabel, name, onChange, value = null })=>{
+    const { formatMessage } = useIntl();
+    /* eslint-disable indent */ const displayedValue = value === null || value?.length === 0 ? formatMessage({
+        id: 'global.none',
+        defaultMessage: 'None'
+    }) : [
+        ...value
+    ].sort().map((v)=>upperFirst(v)).join(', ');
+    /* eslint-enable indent */ const label = intlLabel.id ? formatMessage({
+        id: intlLabel.id,
+        defaultMessage: intlLabel.defaultMessage
+    }) : name;
+    return /*#__PURE__*/ jsxs(Field.Root, {
+        name: name,
+        children: [
+            /*#__PURE__*/ jsx(Field.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ jsx(MultiSelectNested, {
+                customizeContent: ()=>displayedValue,
+                onChange: (values)=>{
+                    if (values.length > 0) {
+                        onChange({
+                            target: {
+                                name,
+                                value: values,
+                                type: 'allowed-types-select'
+                            }
+                        });
+                    } else {
+                        onChange({
+                            target: {
+                                name,
+                                value: null,
+                                type: 'allowed-types-select'
+                            }
+                        });
+                    }
+                },
+                options: options,
+                value: value || []
+            })
+        ]
+    });
+};
+
+export { AllowedTypesSelect };
+//# sourceMappingURL=AllowedTypesSelect.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AllowedTypesSelect.mjs","sources":["../../../admin/src/components/AllowedTypesSelect.tsx"],"sourcesContent":["import { Field, MultiSelectNested } from '@strapi/design-system';\nimport upperFirst from 'lodash/upperFirst';\nimport { useIntl } from 'react-intl';\n\nimport { IntlLabel } from '../types';\n\ninterface AllowedTypesSelectProps {\n  intlLabel: IntlLabel;\n  name: string;\n  onChange: (value: any) => void;\n  value?: any;\n}\n\nconst options = [\n  {\n    label: 'All',\n    children: [\n      { label: 'images (JPEG, PNG, GIF, SVG, TIFF, ICO, DVU)', value: 'images' },\n      { label: 'videos (MPEG, MP4, Quicktime, WMV, AVI, FLV)', value: 'videos' },\n      { label: 'audios (MP3, WAV, OGG)', value: 'audios' },\n      { label: 'files (CSV, ZIP, PDF, Excel, JSON, ...)', value: 'files' },\n    ],\n  },\n];\n\nexport const AllowedTypesSelect = ({\n  intlLabel,\n  name,\n  onChange,\n  value = null,\n}: AllowedTypesSelectProps) => {\n  const { formatMessage } = useIntl();\n\n  /* eslint-disable indent */\n  const displayedValue =\n    value === null || value?.length === 0\n      ? formatMessage({ id: 'global.none', defaultMessage: 'None' })\n      : [...value]\n          .sort()\n          .map((v) => upperFirst(v))\n          .join(', ');\n\n  /* eslint-enable indent */\n\n  const label = intlLabel.id\n    ? formatMessage({ id: intlLabel.id, defaultMessage: intlLabel.defaultMessage })\n    : name;\n\n  return (\n    <Field.Root name={name}>\n      <Field.Label>{label}</Field.Label>\n      <MultiSelectNested\n        customizeContent={() => displayedValue}\n        onChange={(values: any[]) => {\n          if (values.length > 0) {\n            onChange({ target: { name, value: values, type: 'allowed-types-select' } });\n          } else {\n            onChange({ target: { name, value: null, type: 'allowed-types-select' } });\n          }\n        }}\n        options={options}\n        value={value || []}\n      />\n    </Field.Root>\n  );\n};\n"],"names":["options","label","children","value","AllowedTypesSelect","intlLabel","name","onChange","formatMessage","useIntl","displayedValue","length","id","defaultMessage","sort","map","v","upperFirst","join","_jsxs","Field","Root","_jsx","Label","MultiSelectNested","customizeContent","values","target","type"],"mappings":";;;;;AAaA,MAAMA,OAAU,GAAA;AACd,IAAA;QACEC,KAAO,EAAA,KAAA;QACPC,QAAU,EAAA;AACR,YAAA;gBAAED,KAAO,EAAA,8CAAA;gBAAgDE,KAAO,EAAA;AAAS,aAAA;AACzE,YAAA;gBAAEF,KAAO,EAAA,8CAAA;gBAAgDE,KAAO,EAAA;AAAS,aAAA;AACzE,YAAA;gBAAEF,KAAO,EAAA,wBAAA;gBAA0BE,KAAO,EAAA;AAAS,aAAA;AACnD,YAAA;gBAAEF,KAAO,EAAA,yCAAA;gBAA2CE,KAAO,EAAA;AAAQ;AACpE;AACH;AACD,CAAA;AAEYC,MAAAA,kBAAAA,GAAqB,CAAC,EACjCC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRJ,KAAQ,GAAA,IAAI,EACY,GAAA;IACxB,MAAM,EAAEK,aAAa,EAAE,GAAGC,OAAAA,EAAAA;gCAG1B,MAAMC,cACJP,GAAAA,KAAAA,KAAU,QAAQA,KAAOQ,EAAAA,MAAAA,KAAW,IAChCH,aAAc,CAAA;QAAEI,EAAI,EAAA,aAAA;QAAeC,cAAgB,EAAA;KACnD,CAAA,GAAA;AAAIV,QAAAA,GAAAA;KAAM,CACPW,IAAI,GACJC,GAAG,CAAC,CAACC,CAAMC,GAAAA,UAAAA,CAAWD,CACtBE,CAAAA,CAAAA,CAAAA,IAAI,CAAC,IAAA,CAAA;AAEd,+BAEA,MAAMjB,KAAAA,GAAQI,SAAUO,CAAAA,EAAE,GACtBJ,aAAc,CAAA;AAAEI,QAAAA,EAAAA,EAAIP,UAAUO,EAAE;AAAEC,QAAAA,cAAAA,EAAgBR,UAAUQ;KAC5DP,CAAAA,GAAAA,IAAAA;IAEJ,qBACEa,IAAA,CAACC,MAAMC,IAAI,EAAA;QAACf,IAAMA,EAAAA,IAAAA;;AAChB,0BAAAgB,GAAA,CAACF,MAAMG,KAAK,EAAA;AAAEtB,gBAAAA,QAAAA,EAAAA;;0BACdqB,GAACE,CAAAA,iBAAAA,EAAAA;AACCC,gBAAAA,gBAAAA,EAAkB,IAAMf,cAAAA;AACxBH,gBAAAA,QAAAA,EAAU,CAACmB,MAAAA,GAAAA;oBACT,IAAIA,MAAAA,CAAOf,MAAM,GAAG,CAAG,EAAA;wBACrBJ,QAAS,CAAA;4BAAEoB,MAAQ,EAAA;AAAErB,gCAAAA,IAAAA;gCAAMH,KAAOuB,EAAAA,MAAAA;gCAAQE,IAAM,EAAA;AAAuB;AAAE,yBAAA,CAAA;qBACpE,MAAA;wBACLrB,QAAS,CAAA;4BAAEoB,MAAQ,EAAA;AAAErB,gCAAAA,IAAAA;gCAAMH,KAAO,EAAA,IAAA;gCAAMyB,IAAM,EAAA;AAAuB;AAAE,yBAAA,CAAA;AACzE;AACF,iBAAA;gBACA5B,OAASA,EAAAA,OAAAA;AACTG,gBAAAA,KAAAA,EAAOA,SAAS;;;;AAIxB;;;;"}

package/dist/admin/components/AttributeIcon.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttributeIcon.js","sources":["../../../admin/src/components/AttributeIcon.tsx"],"sourcesContent":["import { ComponentType, SVGProps } from 'react';\n\nimport { useStrapiApp } from '@strapi/admin/strapi-admin';\nimport { Box } from '@strapi/design-system';\nimport {\n  BooleanField,\n  CollectionType,\n  ComponentField,\n  DateField,\n  DynamicZoneField,\n  EmailField,\n  EnumerationField,\n  JsonField,\n  MediaField,\n  NumberField,\n  PasswordField,\n  RelationField,\n  MarkdownField,\n  SingleType,\n  TextField,\n  UidField,\n  BlocksField,\n} from '@strapi/icons/symbols';\nimport { styled } from 'styled-components';\n\nconst iconByTypes: Record<string, ComponentType<SVGProps<SVGSVGElement>>> = {\n  biginteger: NumberField,\n  blocks: BlocksField,\n  boolean: BooleanField,\n  collectionType: CollectionType,\n  component: ComponentField,\n  contentType: CollectionType,\n  date: DateField,\n  datetime: DateField,\n  decimal: NumberField,\n  dynamiczone: DynamicZoneField,\n  email: EmailField,\n  enum: EnumerationField,\n  enumeration: EnumerationField,\n  file: MediaField,\n  files: MediaField,\n  float: NumberField,\n  integer: NumberField,\n  json: JsonField,\n  JSON: JsonField,\n  media: MediaField,\n  number: NumberField,\n  password: PasswordField,\n  relation: RelationField,\n  richtext: MarkdownField,\n  singleType: SingleType,\n  string: TextField,\n  text: TextField,\n  time: DateField,\n  timestamp: DateField,\n  uid: UidField,\n};\n\nconst IconBox = styled(Box)`\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n`;\n\nexport type IconByType = keyof typeof iconByTypes;\n\ntype AttributeIconProps = {\n  type: IconByType;\n  customField?: string | null;\n};\n\nexport const AttributeIcon = ({ type, customField = null, ...rest }: AttributeIconProps) => {\n  const getCustomField = useStrapiApp('AttributeIcon', (state) => state.customFields.get);\n\n  let Compo: any = iconByTypes[type];\n\n  if (customField) {\n    const customFieldObject = getCustomField(customField);\n    const icon = customFieldObject?.icon;\n    if (icon) {\n      Compo = icon;\n    }\n  }\n\n  if (!iconByTypes[type]) {\n    return null;\n  }\n\n  return (\n    <IconBox width=\"3.2rem\" shrink={0} {...rest} aria-hidden>\n      <Box tag={Compo} />\n    </IconBox>\n  );\n};\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","_jsx","width","shrink","aria-hidden","tag"],"mappings":";;;;;;;;AAyBA,MAAMA,WAAsE,GAAA;IAC1EC,UAAYC,EAAAA,mBAAAA;IACZC,MAAQC,EAAAA,mBAAAA;IACRC,OAASC,EAAAA,oBAAAA;IACTC,cAAgBC,EAAAA,sBAAAA;IAChBC,SAAWC,EAAAA,sBAAAA;IACXC,WAAaH,EAAAA,sBAAAA;IACbI,IAAMC,EAAAA,iBAAAA;IACNC,QAAUD,EAAAA,iBAAAA;IACVE,OAASb,EAAAA,mBAAAA;IACTc,WAAaC,EAAAA,wBAAAA;IACbC,KAAOC,EAAAA,kBAAAA;IACPC,IAAMC,EAAAA,wBAAAA;IACNC,WAAaD,EAAAA,wBAAAA;IACbE,IAAMC,EAAAA,kBAAAA;IACNC,KAAOD,EAAAA,kBAAAA;IACPE,KAAOxB,EAAAA,mBAAAA;IACPyB,OAASzB,EAAAA,mBAAAA;IACT0B,IAAMC,EAAAA,iBAAAA;IACNC,IAAMD,EAAAA,iBAAAA;IACNE,KAAOP,EAAAA,kBAAAA;IACPQ,MAAQ9B,EAAAA,mBAAAA;IACR+B,QAAUC,EAAAA,qBAAAA;IACVC,QAAUC,EAAAA,qBAAAA;IACVC,QAAUC,EAAAA,qBAAAA;IACVC,UAAYC,EAAAA,kBAAAA;IACZC,MAAQC,EAAAA,iBAAAA;IACRC,IAAMD,EAAAA,iBAAAA;IACNE,IAAM/B,EAAAA,iBAAAA;IACNgC,SAAWhC,EAAAA,iBAAAA;IACXiC,GAAKC,EAAAA;AACP,CAAA;AAEA,MAAMC,OAAAA,GAAUC,uBAAOC,CAAAA,gBAAAA,CAAI;;;;;AAK3B,CAAC;AASM,MAAMC,aAAgB,GAAA,CAAC,EAAEC,IAAI,EAAEC,WAAc,GAAA,IAAI,EAAE,GAAGC,IAA0B,EAAA,GAAA;IACrF,MAAMC,cAAAA,GAAiBC,yBAAa,eAAiB,EAAA,CAACC,QAAUA,KAAMC,CAAAA,YAAY,CAACC,GAAG,CAAA;IAEtF,IAAIC,KAAAA,GAAa5D,WAAW,CAACoD,IAAK,CAAA;AAElC,IAAA,IAAIC,WAAa,EAAA;AACf,QAAA,MAAMQ,oBAAoBN,cAAeF,CAAAA,WAAAA,CAAAA;AACzC,QAAA,MAAMS,OAAOD,iBAAmBC,EAAAA,IAAAA;AAChC,QAAA,IAAIA,IAAM,EAAA;YACRF,KAAQE,GAAAA,IAAAA;AACV;AACF;AAEA,IAAA,IAAI,CAAC9D,WAAW,CAACoD,IAAAA,CAAK,EAAE;QACtB,OAAO,IAAA;AACT;AAEA,IAAA,qBACEW,cAACf,CAAAA,OAAAA,EAAAA;QAAQgB,KAAM,EAAA,QAAA;QAASC,MAAQ,EAAA,CAAA;AAAI,QAAA,GAAGX,IAAI;QAAEY,aAAW,EAAA,IAAA;AACtD,QAAA,QAAA,gBAAAH,cAACb,CAAAA,gBAAAA,EAAAA;YAAIiB,GAAKP,EAAAA;;;AAGhB;;;;"}

package/dist/admin/components/AttributeIcon.mjs

@@ -0,0 +1,70 @@
+import { jsx } from 'react/jsx-runtime';
+import { useStrapiApp } from '@strapi/admin/strapi-admin';
+import { Box } from '@strapi/design-system';
+import { NumberField, BlocksField, BooleanField, CollectionType, ComponentField, DateField, DynamicZoneField, EmailField, EnumerationField, MediaField, JsonField, PasswordField, RelationField, MarkdownField, SingleType, TextField, UidField } 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) {
+            Compo = icon;
+        }
+    }
+    if (!iconByTypes[type]) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx(IconBox, {
+        width: "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';\n\nimport { useStrapiApp } from '@strapi/admin/strapi-admin';\nimport { Box } from '@strapi/design-system';\nimport {\n  BooleanField,\n  CollectionType,\n  ComponentField,\n  DateField,\n  DynamicZoneField,\n  EmailField,\n  EnumerationField,\n  JsonField,\n  MediaField,\n  NumberField,\n  PasswordField,\n  RelationField,\n  MarkdownField,\n  SingleType,\n  TextField,\n  UidField,\n  BlocksField,\n} from '@strapi/icons/symbols';\nimport { styled } from 'styled-components';\n\nconst iconByTypes: Record<string, ComponentType<SVGProps<SVGSVGElement>>> = {\n  biginteger: NumberField,\n  blocks: BlocksField,\n  boolean: BooleanField,\n  collectionType: CollectionType,\n  component: ComponentField,\n  contentType: CollectionType,\n  date: DateField,\n  datetime: DateField,\n  decimal: NumberField,\n  dynamiczone: DynamicZoneField,\n  email: EmailField,\n  enum: EnumerationField,\n  enumeration: EnumerationField,\n  file: MediaField,\n  files: MediaField,\n  float: NumberField,\n  integer: NumberField,\n  json: JsonField,\n  JSON: JsonField,\n  media: MediaField,\n  number: NumberField,\n  password: PasswordField,\n  relation: RelationField,\n  richtext: MarkdownField,\n  singleType: SingleType,\n  string: TextField,\n  text: TextField,\n  time: DateField,\n  timestamp: DateField,\n  uid: UidField,\n};\n\nconst IconBox = styled(Box)`\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n`;\n\nexport type IconByType = keyof typeof iconByTypes;\n\ntype AttributeIconProps = {\n  type: IconByType;\n  customField?: string | null;\n};\n\nexport const AttributeIcon = ({ type, customField = null, ...rest }: AttributeIconProps) => {\n  const getCustomField = useStrapiApp('AttributeIcon', (state) => state.customFields.get);\n\n  let Compo: any = iconByTypes[type];\n\n  if (customField) {\n    const customFieldObject = getCustomField(customField);\n    const icon = customFieldObject?.icon;\n    if (icon) {\n      Compo = icon;\n    }\n  }\n\n  if (!iconByTypes[type]) {\n    return null;\n  }\n\n  return (\n    <IconBox width=\"3.2rem\" shrink={0} {...rest} aria-hidden>\n      <Box tag={Compo} />\n    </IconBox>\n  );\n};\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","_jsx","width","shrink","aria-hidden","tag"],"mappings":";;;;;;AAyBA,MAAMA,WAAsE,GAAA;IAC1EC,UAAYC,EAAAA,WAAAA;IACZC,MAAQC,EAAAA,WAAAA;IACRC,OAASC,EAAAA,YAAAA;IACTC,cAAgBC,EAAAA,cAAAA;IAChBC,SAAWC,EAAAA,cAAAA;IACXC,WAAaH,EAAAA,cAAAA;IACbI,IAAMC,EAAAA,SAAAA;IACNC,QAAUD,EAAAA,SAAAA;IACVE,OAASb,EAAAA,WAAAA;IACTc,WAAaC,EAAAA,gBAAAA;IACbC,KAAOC,EAAAA,UAAAA;IACPC,IAAMC,EAAAA,gBAAAA;IACNC,WAAaD,EAAAA,gBAAAA;IACbE,IAAMC,EAAAA,UAAAA;IACNC,KAAOD,EAAAA,UAAAA;IACPE,KAAOxB,EAAAA,WAAAA;IACPyB,OAASzB,EAAAA,WAAAA;IACT0B,IAAMC,EAAAA,SAAAA;IACNC,IAAMD,EAAAA,SAAAA;IACNE,KAAOP,EAAAA,UAAAA;IACPQ,MAAQ9B,EAAAA,WAAAA;IACR+B,QAAUC,EAAAA,aAAAA;IACVC,QAAUC,EAAAA,aAAAA;IACVC,QAAUC,EAAAA,aAAAA;IACVC,UAAYC,EAAAA,UAAAA;IACZC,MAAQC,EAAAA,SAAAA;IACRC,IAAMD,EAAAA,SAAAA;IACNE,IAAM/B,EAAAA,SAAAA;IACNgC,SAAWhC,EAAAA,SAAAA;IACXiC,GAAKC,EAAAA;AACP,CAAA;AAEA,MAAMC,OAAAA,GAAUC,MAAOC,CAAAA,GAAAA,CAAI;;;;;AAK3B,CAAC;AASM,MAAMC,aAAgB,GAAA,CAAC,EAAEC,IAAI,EAAEC,WAAc,GAAA,IAAI,EAAE,GAAGC,IAA0B,EAAA,GAAA;IACrF,MAAMC,cAAAA,GAAiBC,aAAa,eAAiB,EAAA,CAACC,QAAUA,KAAMC,CAAAA,YAAY,CAACC,GAAG,CAAA;IAEtF,IAAIC,KAAAA,GAAa5D,WAAW,CAACoD,IAAK,CAAA;AAElC,IAAA,IAAIC,WAAa,EAAA;AACf,QAAA,MAAMQ,oBAAoBN,cAAeF,CAAAA,WAAAA,CAAAA;AACzC,QAAA,MAAMS,OAAOD,iBAAmBC,EAAAA,IAAAA;AAChC,QAAA,IAAIA,IAAM,EAAA;YACRF,KAAQE,GAAAA,IAAAA;AACV;AACF;AAEA,IAAA,IAAI,CAAC9D,WAAW,CAACoD,IAAAA,CAAK,EAAE;QACtB,OAAO,IAAA;AACT;AAEA,IAAA,qBACEW,GAACf,CAAAA,OAAAA,EAAAA;QAAQgB,KAAM,EAAA,QAAA;QAASC,MAAQ,EAAA,CAAA;AAAI,QAAA,GAAGX,IAAI;QAAEY,aAAW,EAAA,IAAA;AACtD,QAAA,QAAA,gBAAAH,GAACb,CAAAA,GAAAA,EAAAA;YAAIiB,GAAKP,EAAAA;;;AAGhB;;;;"}

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

@@ -0,0 +1,31 @@
+'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,
+                            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';\n\nimport { IconByType } from '../AttributeIcon';\n\nimport { AttributeOption } from './AttributeOption';\n\ntype AttributeListProps = {\n  attributes: IconByType[][];\n};\n\nexport const AttributeList = ({ attributes }: AttributeListProps) => (\n  <KeyboardNavigable tagName=\"button\">\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={8}>\n      {attributes.map((attributeRow, index) => {\n        return (\n          // eslint-disable-next-line react/no-array-index-key\n          <Grid.Root key={index} gap={3}>\n            {attributeRow.map((attribute) => (\n              <Grid.Item key={attribute} col={6} direction=\"column\" alignItems=\"stretch\">\n                <AttributeOption type={attribute} />\n              </Grid.Item>\n            ))}\n          </Grid.Root>\n        );\n      })}\n    </Flex>\n  </KeyboardNavigable>\n);\n"],"names":["AttributeList","attributes","_jsx","KeyboardNavigable","tagName","Flex","direction","alignItems","gap","map","attributeRow","index","Grid","Root","attribute","Item","col","AttributeOption","type"],"mappings":";;;;;;MAUaA,aAAgB,GAAA,CAAC,EAAEC,UAAU,EAAsB,iBAC9DC,cAACC,CAAAA,8BAAAA,EAAAA;QAAkBC,OAAQ,EAAA,QAAA;AACzB,QAAA,QAAA,gBAAAF,cAACG,CAAAA,iBAAAA,EAAAA;YAAKC,SAAU,EAAA,QAAA;YAASC,UAAW,EAAA,SAAA;YAAUC,GAAK,EAAA,CAAA;sBAChDP,UAAWQ,CAAAA,GAAG,CAAC,CAACC,YAAcC,EAAAA,KAAAA,GAAAA;AAC7B,gBAAA;AAEE,8BAAAT,cAAA,CAACU,kBAAKC,IAAI,EAAA;oBAAaL,GAAK,EAAA,CAAA;AACzBE,oBAAAA,QAAAA,EAAAA,YAAAA,CAAaD,GAAG,CAAC,CAACK,SACjB,iBAAAZ,cAAA,CAACU,kBAAKG,IAAI,EAAA;4BAAiBC,GAAK,EAAA,CAAA;4BAAGV,SAAU,EAAA,QAAA;4BAASC,UAAW,EAAA,SAAA;AAC/D,4BAAA,QAAA,gBAAAL,cAACe,CAAAA,+BAAAA,EAAAA;gCAAgBC,IAAMJ,EAAAA;;AADTA,yBAAAA,EAAAA,SAAAA,CAAAA;AAFJH,iBAAAA,EAAAA,KAAAA,CAAAA;AAQpB,aAAA;;AAGJ,KAAA;;;;"}

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

@@ -0,0 +1,29 @@
+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,
+                            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';\n\nimport { IconByType } from '../AttributeIcon';\n\nimport { AttributeOption } from './AttributeOption';\n\ntype AttributeListProps = {\n  attributes: IconByType[][];\n};\n\nexport const AttributeList = ({ attributes }: AttributeListProps) => (\n  <KeyboardNavigable tagName=\"button\">\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={8}>\n      {attributes.map((attributeRow, index) => {\n        return (\n          // eslint-disable-next-line react/no-array-index-key\n          <Grid.Root key={index} gap={3}>\n            {attributeRow.map((attribute) => (\n              <Grid.Item key={attribute} col={6} direction=\"column\" alignItems=\"stretch\">\n                <AttributeOption type={attribute} />\n              </Grid.Item>\n            ))}\n          </Grid.Root>\n        );\n      })}\n    </Flex>\n  </KeyboardNavigable>\n);\n"],"names":["AttributeList","attributes","_jsx","KeyboardNavigable","tagName","Flex","direction","alignItems","gap","map","attributeRow","index","Grid","Root","attribute","Item","col","AttributeOption","type"],"mappings":";;;;MAUaA,aAAgB,GAAA,CAAC,EAAEC,UAAU,EAAsB,iBAC9DC,GAACC,CAAAA,iBAAAA,EAAAA;QAAkBC,OAAQ,EAAA,QAAA;AACzB,QAAA,QAAA,gBAAAF,GAACG,CAAAA,IAAAA,EAAAA;YAAKC,SAAU,EAAA,QAAA;YAASC,UAAW,EAAA,SAAA;YAAUC,GAAK,EAAA,CAAA;sBAChDP,UAAWQ,CAAAA,GAAG,CAAC,CAACC,YAAcC,EAAAA,KAAAA,GAAAA;AAC7B,gBAAA;AAEE,8BAAAT,GAAA,CAACU,KAAKC,IAAI,EAAA;oBAAaL,GAAK,EAAA,CAAA;AACzBE,oBAAAA,QAAAA,EAAAA,YAAAA,CAAaD,GAAG,CAAC,CAACK,SACjB,iBAAAZ,GAAA,CAACU,KAAKG,IAAI,EAAA;4BAAiBC,GAAK,EAAA,CAAA;4BAAGV,SAAU,EAAA,QAAA;4BAASC,UAAW,EAAA,SAAA;AAC/D,4BAAA,QAAA,gBAAAL,GAACe,CAAAA,eAAAA,EAAAA;gCAAgBC,IAAMJ,EAAAA;;AADTA,yBAAAA,EAAAA,SAAAA,CAAAA;AAFJH,iBAAAA,EAAAA,KAAAA,CAAAA;AAQpB,aAAA;;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 useFormModalNavigation = require('../../hooks/useFormModalNavigation.js');
+var getTrad = require('../../utils/getTrad.js');
+var AttributeIcon = require('../AttributeIcon.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":["/**\n *\n * AttributeOption\n *\n */\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { Sparkle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { useFormModalNavigation } from '../../hooks/useFormModalNavigation';\nimport { getTrad } from '../../utils/getTrad';\nimport { AttributeIcon, IconByType } from '../AttributeIcon';\n\nimport { OptionBoxWrapper } from './OptionBoxWrapper';\n\nconst newAttributes: string[] = [];\n\nconst NewBadge = () => (\n  <Flex grow={1} justifyContent=\"flex-end\">\n    <Flex gap={1} hasRadius background=\"alternative100\" padding={`0.2rem 0.4rem`}>\n      <Sparkle width={`1rem`} height={`1rem`} fill=\"alternative600\" />\n      <Typography textColor=\"alternative600\" variant=\"sigma\">\n        New\n      </Typography>\n    </Flex>\n  </Flex>\n);\n\ntype AttributeOptionProps = {\n  type: IconByType;\n};\n\nexport const AttributeOption = ({ type = 'text' }: AttributeOptionProps) => {\n  const { formatMessage } = useIntl();\n\n  const { onClickSelectField } = useFormModalNavigation();\n\n  const handleClick = () => {\n    const step = type === 'component' ? '1' : null;\n\n    onClickSelectField({\n      attributeType: type,\n      step,\n    });\n  };\n\n  return (\n    <OptionBoxWrapper padding={4} tag=\"button\" hasRadius type=\"button\" onClick={handleClick}>\n      <Flex>\n        <AttributeIcon type={type} />\n        <Box paddingLeft={4} width=\"100%\">\n          <Flex justifyContent=\"space-between\">\n            <Typography fontWeight=\"bold\" textColor=\"neutral800\">\n              {formatMessage({ id: getTrad(`attribute.${type}`), defaultMessage: type })}\n            </Typography>\n            {newAttributes.includes(type) && <NewBadge />}\n          </Flex>\n          <Flex>\n            <Typography variant=\"pi\" textColor=\"neutral600\">\n              {formatMessage({\n                id: getTrad(`attribute.${type}.description`),\n                defaultMessage: 'A type for modeling data',\n              })}\n            </Typography>\n          </Flex>\n        </Box>\n      </Flex>\n    </OptionBoxWrapper>\n  );\n};\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,cAACC,CAAAA,iBAAAA,EAAAA;QAAKC,IAAM,EAAA,CAAA;QAAGC,cAAe,EAAA,UAAA;AAC5B,QAAA,QAAA,gBAAAC,eAACH,CAAAA,iBAAAA,EAAAA;YAAKI,GAAK,EAAA,CAAA;YAAGC,SAAS,EAAA,IAAA;YAACC,UAAW,EAAA,gBAAA;YAAiBC,OAAS,EAAA,CAAC,aAAa,CAAC;;8BAC1ER,cAACS,CAAAA,aAAAA,EAAAA;oBAAQC,KAAO,EAAA,CAAC,IAAI,CAAC;oBAAEC,MAAQ,EAAA,CAAC,IAAI,CAAC;oBAAEC,IAAK,EAAA;;8BAC7CZ,cAACa,CAAAA,uBAAAA,EAAAA;oBAAWC,SAAU,EAAA,gBAAA;oBAAiBC,OAAQ,EAAA,OAAA;AAAQ,oBAAA,QAAA,EAAA;;;;;MAWhDC,eAAkB,GAAA,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,WAAc,GAAA,IAAA;QAClB,MAAMC,IAAAA,GAAON,IAAS,KAAA,WAAA,GAAc,GAAM,GAAA,IAAA;QAE1CG,kBAAmB,CAAA;YACjBI,aAAeP,EAAAA,IAAAA;AACfM,YAAAA;AACF,SAAA,CAAA;AACF,KAAA;AAEA,IAAA,qBACEvB,cAACyB,CAAAA,iCAAAA,EAAAA;QAAiBjB,OAAS,EAAA,CAAA;QAAGkB,GAAI,EAAA,QAAA;QAASpB,SAAS,EAAA,IAAA;QAACW,IAAK,EAAA,QAAA;QAASU,OAASL,EAAAA,WAAAA;AAC1E,QAAA,QAAA,gBAAAlB,eAACH,CAAAA,iBAAAA,EAAAA;;8BACCD,cAAC4B,CAAAA,2BAAAA,EAAAA;oBAAcX,IAAMA,EAAAA;;8BACrBb,eAACyB,CAAAA,gBAAAA,EAAAA;oBAAIC,WAAa,EAAA,CAAA;oBAAGpB,KAAM,EAAA,MAAA;;sCACzBN,eAACH,CAAAA,iBAAAA,EAAAA;4BAAKE,cAAe,EAAA,eAAA;;8CACnBH,cAACa,CAAAA,uBAAAA,EAAAA;oCAAWkB,UAAW,EAAA,MAAA;oCAAOjB,SAAU,EAAA,YAAA;8CACrCI,aAAc,CAAA;AAAEc,wCAAAA,EAAAA,EAAIC,eAAQ,CAAA,CAAC,UAAU,EAAEhB,KAAK,CAAC,CAAA;wCAAGiB,cAAgBjB,EAAAA;AAAK,qCAAA;;gCAEzEnB,aAAcqC,CAAAA,QAAQ,CAAClB,IAAAA,CAAAA,kBAASjB,cAACD,CAAAA,QAAAA,EAAAA,EAAAA;;;sCAEpCC,cAACC,CAAAA,iBAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAD,cAACa,CAAAA,uBAAAA,EAAAA;gCAAWE,OAAQ,EAAA,IAAA;gCAAKD,SAAU,EAAA,YAAA;0CAChCI,aAAc,CAAA;AACbc,oCAAAA,EAAAA,EAAIC,gBAAQ,CAAC,UAAU,EAAEhB,IAAAA,CAAK,YAAY,CAAC,CAAA;oCAC3CiB,cAAgB,EAAA;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 { useFormModalNavigation } from '../../hooks/useFormModalNavigation.mjs';
+import { getTrad } from '../../utils/getTrad.mjs';
+import { AttributeIcon } from '../AttributeIcon.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":["/**\n *\n * AttributeOption\n *\n */\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { Sparkle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { useFormModalNavigation } from '../../hooks/useFormModalNavigation';\nimport { getTrad } from '../../utils/getTrad';\nimport { AttributeIcon, IconByType } from '../AttributeIcon';\n\nimport { OptionBoxWrapper } from './OptionBoxWrapper';\n\nconst newAttributes: string[] = [];\n\nconst NewBadge = () => (\n  <Flex grow={1} justifyContent=\"flex-end\">\n    <Flex gap={1} hasRadius background=\"alternative100\" padding={`0.2rem 0.4rem`}>\n      <Sparkle width={`1rem`} height={`1rem`} fill=\"alternative600\" />\n      <Typography textColor=\"alternative600\" variant=\"sigma\">\n        New\n      </Typography>\n    </Flex>\n  </Flex>\n);\n\ntype AttributeOptionProps = {\n  type: IconByType;\n};\n\nexport const AttributeOption = ({ type = 'text' }: AttributeOptionProps) => {\n  const { formatMessage } = useIntl();\n\n  const { onClickSelectField } = useFormModalNavigation();\n\n  const handleClick = () => {\n    const step = type === 'component' ? '1' : null;\n\n    onClickSelectField({\n      attributeType: type,\n      step,\n    });\n  };\n\n  return (\n    <OptionBoxWrapper padding={4} tag=\"button\" hasRadius type=\"button\" onClick={handleClick}>\n      <Flex>\n        <AttributeIcon type={type} />\n        <Box paddingLeft={4} width=\"100%\">\n          <Flex justifyContent=\"space-between\">\n            <Typography fontWeight=\"bold\" textColor=\"neutral800\">\n              {formatMessage({ id: getTrad(`attribute.${type}`), defaultMessage: type })}\n            </Typography>\n            {newAttributes.includes(type) && <NewBadge />}\n          </Flex>\n          <Flex>\n            <Typography variant=\"pi\" textColor=\"neutral600\">\n              {formatMessage({\n                id: getTrad(`attribute.${type}.description`),\n                defaultMessage: 'A type for modeling data',\n              })}\n            </Typography>\n          </Flex>\n        </Box>\n      </Flex>\n    </OptionBoxWrapper>\n  );\n};\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,GAACC,CAAAA,IAAAA,EAAAA;QAAKC,IAAM,EAAA,CAAA;QAAGC,cAAe,EAAA,UAAA;AAC5B,QAAA,QAAA,gBAAAC,IAACH,CAAAA,IAAAA,EAAAA;YAAKI,GAAK,EAAA,CAAA;YAAGC,SAAS,EAAA,IAAA;YAACC,UAAW,EAAA,gBAAA;YAAiBC,OAAS,EAAA,CAAC,aAAa,CAAC;;8BAC1ER,GAACS,CAAAA,OAAAA,EAAAA;oBAAQC,KAAO,EAAA,CAAC,IAAI,CAAC;oBAAEC,MAAQ,EAAA,CAAC,IAAI,CAAC;oBAAEC,IAAK,EAAA;;8BAC7CZ,GAACa,CAAAA,UAAAA,EAAAA;oBAAWC,SAAU,EAAA,gBAAA;oBAAiBC,OAAQ,EAAA,OAAA;AAAQ,oBAAA,QAAA,EAAA;;;;;MAWhDC,eAAkB,GAAA,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,WAAc,GAAA,IAAA;QAClB,MAAMC,IAAAA,GAAON,IAAS,KAAA,WAAA,GAAc,GAAM,GAAA,IAAA;QAE1CG,kBAAmB,CAAA;YACjBI,aAAeP,EAAAA,IAAAA;AACfM,YAAAA;AACF,SAAA,CAAA;AACF,KAAA;AAEA,IAAA,qBACEvB,GAACyB,CAAAA,gBAAAA,EAAAA;QAAiBjB,OAAS,EAAA,CAAA;QAAGkB,GAAI,EAAA,QAAA;QAASpB,SAAS,EAAA,IAAA;QAACW,IAAK,EAAA,QAAA;QAASU,OAASL,EAAAA,WAAAA;AAC1E,QAAA,QAAA,gBAAAlB,IAACH,CAAAA,IAAAA,EAAAA;;8BACCD,GAAC4B,CAAAA,aAAAA,EAAAA;oBAAcX,IAAMA,EAAAA;;8BACrBb,IAACyB,CAAAA,GAAAA,EAAAA;oBAAIC,WAAa,EAAA,CAAA;oBAAGpB,KAAM,EAAA,MAAA;;sCACzBN,IAACH,CAAAA,IAAAA,EAAAA;4BAAKE,cAAe,EAAA,eAAA;;8CACnBH,GAACa,CAAAA,UAAAA,EAAAA;oCAAWkB,UAAW,EAAA,MAAA;oCAAOjB,SAAU,EAAA,YAAA;8CACrCI,aAAc,CAAA;AAAEc,wCAAAA,EAAAA,EAAIC,OAAQ,CAAA,CAAC,UAAU,EAAEhB,KAAK,CAAC,CAAA;wCAAGiB,cAAgBjB,EAAAA;AAAK,qCAAA;;gCAEzEnB,aAAcqC,CAAAA,QAAQ,CAAClB,IAAAA,CAAAA,kBAASjB,GAACD,CAAAA,QAAAA,EAAAA,EAAAA;;;sCAEpCC,GAACC,CAAAA,IAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAD,GAACa,CAAAA,UAAAA,EAAAA;gCAAWE,OAAQ,EAAA,IAAA;gCAAKD,SAAU,EAAA,YAAA;0CAChCI,aAAc,CAAA;AACbc,oCAAAA,EAAAA,EAAIC,QAAQ,CAAC,UAAU,EAAEhB,IAAAA,CAAK,YAAY,CAAC,CAAA;oCAC3CiB,cAAgB,EAAA;AAClB,iCAAA;;;;;;;;AAOd;;;;"}