@strapi/content-type-builder 5.12.3 → 5.12.5

package/dist/admin/components/IconPicker/IconPicker.js

@@ -35,13 +35,18 @@ const IconPick = ({ iconKey, name, onChange, isSelected, ariaLabel })=>{
                         })
                     ]
                 }),
-                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                    padding: 2,
-                    cursor: "pointer",
-                    hasRadius: true,
-                    background: isSelected ? 'primary200' : undefined,
-                    children: /*#__PURE__*/ jsxRuntime.jsx(Icon, {
-                        fill: isSelected ? 'primary600' : 'neutral300'
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+                    label: iconKey,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                        padding: 2,
+                        cursor: "pointer",
+                        hasRadius: true,
+                        background: isSelected ? 'primary200' : undefined,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Icon, {
+                            width: '2rem',
+                            height: '2rem',
+                            fill: isSelected ? 'primary600' : 'neutral300'
+                        })
                     })
                 })
             ]

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

@@ -1 +1 @@
-{"version":3,"file":"IconPicker.js","sources":["../../../../admin/src/components/IconPicker/IconPicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport {\n  Box,\n  Field,\n  Flex,\n  IconButton,\n  inputFocusStyle,\n  Searchbar,\n  Tooltip,\n  Typography,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { Search, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../utils';\n\nimport { COMPONENT_ICONS } from './constants';\n\nimport type { IntlLabel } from '../../types';\n\nconst IconPickerWrapper = styled(Flex)`\n  label {\n    ${inputFocusStyle()}\n    border-radius: ${({ theme }) => theme.borderRadius};\n    border: 1px solid ${({ theme }) => theme.colors.neutral100};\n  }\n`;\n\ntype Icons = keyof typeof COMPONENT_ICONS;\n\ninterface IconPickProps {\n  iconKey: Icons;\n  name: string;\n  onChange: (value: any) => void;\n  isSelected: boolean;\n  ariaLabel: string;\n}\n\nconst IconPick = ({ iconKey, name, onChange, isSelected, ariaLabel }: IconPickProps) => {\n  const Icon = COMPONENT_ICONS[iconKey];\n\n  return (\n    <Field.Root name={name} required={false}>\n      <Field.Label>\n        <VisuallyHidden>\n          {ariaLabel}\n          <Field.Input\n            type=\"radio\"\n            checked={isSelected}\n            onChange={onChange}\n            value={iconKey}\n            aria-checked={isSelected}\n          />\n        </VisuallyHidden>\n        <Flex\n          padding={2}\n          cursor=\"pointer\"\n          hasRadius\n          background={isSelected ? 'primary200' : undefined}\n        >\n          <Icon fill={isSelected ? 'primary600' : 'neutral300'} />\n        </Flex>\n      </Field.Label>\n    </Field.Root>\n  );\n};\n\nexport interface IconPickerProps {\n  intlLabel: IntlLabel;\n  name: string;\n  onChange: (value: { target: { name: string; value: string } }) => void;\n  value?: string;\n}\n\nexport const IconPicker = ({ intlLabel, name, onChange, value = '' }: IconPickerProps) => {\n  const { formatMessage } = useIntl();\n  const [showSearch, setShowSearch] = useState(false);\n  const [search, setSearch] = useState('');\n  const allIcons = Object.keys(COMPONENT_ICONS) as Icons[];\n  const [icons, setIcons] = useState(allIcons);\n  const searchIconRef = useRef(null);\n  const searchBarRef = useRef(null);\n\n  const toggleSearch = () => {\n    setShowSearch(!showSearch);\n  };\n\n  const onChangeSearch = ({ target: { value } }: { target: { value: string } }) => {\n    setSearch(value);\n    setIcons(() => allIcons.filter((icon) => icon.toLowerCase().includes(value.toLowerCase())));\n  };\n\n  const onClearSearch = () => {\n    toggleSearch();\n    setSearch('');\n    setIcons(allIcons);\n  };\n\n  const removeIconSelected = () => {\n    onChange({ target: { name, value: '' } });\n  };\n\n  useEffect(() => {\n    if (showSearch) {\n      (searchBarRef.current as unknown as HTMLInputElement)?.focus();\n    }\n  }, [showSearch]);\n\n  return (\n    <>\n      <Flex justifyContent=\"space-between\" paddingBottom={2}>\n        <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"neutral800\" tag=\"label\">\n          {formatMessage(intlLabel)}\n        </Typography>\n        <Flex gap={1}>\n          {showSearch ? (\n            <Searchbar\n              ref={searchBarRef}\n              name=\"searchbar\"\n              placeholder={formatMessage({\n                id: getTrad('ComponentIconPicker.search.placeholder'),\n                defaultMessage: 'Search for an icon',\n              })}\n              onBlur={() => {\n                if (!search) {\n                  toggleSearch();\n                }\n              }}\n              onChange={onChangeSearch}\n              value={search}\n              onClear={onClearSearch}\n              clearLabel={formatMessage({\n                id: getTrad('IconPicker.search.clear.label'),\n                defaultMessage: 'Clear the icon search',\n              })}\n            >\n              {formatMessage({\n                id: getTrad('IconPicker.search.placeholder.label'),\n                defaultMessage: 'Search for an icon',\n              })}\n            </Searchbar>\n          ) : (\n            <IconButton\n              ref={searchIconRef}\n              onClick={toggleSearch}\n              withTooltip={false}\n              label={formatMessage({\n                id: getTrad('IconPicker.search.button.label'),\n                defaultMessage: 'Search icon button',\n              })}\n              variant=\"ghost\"\n            >\n              <Search />\n            </IconButton>\n          )}\n          {value && (\n            <Tooltip\n              label={formatMessage({\n                id: getTrad('IconPicker.remove.tooltip'),\n                defaultMessage: 'Remove the selected icon',\n              })}\n            >\n              <IconButton\n                onClick={removeIconSelected}\n                withTooltip={false}\n                label={formatMessage({\n                  id: getTrad('IconPicker.remove.button'),\n                  defaultMessage: 'Remove the selected icon',\n                })}\n                variant=\"ghost\"\n              >\n                <Trash />\n              </IconButton>\n            </Tooltip>\n          )}\n        </Flex>\n      </Flex>\n      <IconPickerWrapper\n        position=\"relative\"\n        padding={1}\n        background=\"neutral100\"\n        hasRadius\n        wrap=\"wrap\"\n        gap={2}\n        maxHeight=\"126px\"\n        overflow=\"auto\"\n        textAlign=\"center\"\n      >\n        {icons.length > 0 ? (\n          icons.map((iconKey) => (\n            <IconPick\n              key={iconKey}\n              iconKey={iconKey}\n              name={name}\n              onChange={onChange}\n              isSelected={iconKey === value}\n              ariaLabel={formatMessage(\n                {\n                  id: getTrad('IconPicker.icon.label'),\n                  defaultMessage: 'Select {icon} icon',\n                },\n                { icon: iconKey }\n              )}\n            />\n          ))\n        ) : (\n          <Box padding={4} grow={2}>\n            <Typography variant=\"delta\" textColor=\"neutral600\" textAlign=\"center\">\n              {formatMessage({\n                id: getTrad('IconPicker.emptyState.label'),\n                defaultMessage: 'No icon found',\n              })}\n            </Typography>\n          </Box>\n        )}\n      </IconPickerWrapper>\n    </>\n  );\n};\n"],"names":["IconPickerWrapper","styled","Flex","inputFocusStyle","theme","borderRadius","colors","neutral100","IconPick","iconKey","name","onChange","isSelected","ariaLabel","Icon","COMPONENT_ICONS","_jsx","Field","Root","required","_jsxs","Label","VisuallyHidden","Input","type","checked","value","aria-checked","padding","cursor","hasRadius","background","undefined","fill","IconPicker","intlLabel","formatMessage","useIntl","showSearch","setShowSearch","useState","search","setSearch","allIcons","Object","keys","icons","setIcons","searchIconRef","useRef","searchBarRef","toggleSearch","onChangeSearch","target","filter","icon","toLowerCase","includes","onClearSearch","removeIconSelected","useEffect","current","focus","_Fragment","justifyContent","paddingBottom","Typography","variant","fontWeight","textColor","tag","gap","Searchbar","ref","placeholder","id","getTrad","defaultMessage","onBlur","onClear","clearLabel","IconButton","onClick","withTooltip","label","Search","Tooltip","Trash","position","wrap","maxHeight","overflow","textAlign","length","map","Box","grow"],"mappings":"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"}
+{"version":3,"file":"IconPicker.js","sources":["../../../../admin/src/components/IconPicker/IconPicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport {\n  Box,\n  Field,\n  Flex,\n  IconButton,\n  inputFocusStyle,\n  Searchbar,\n  Tooltip,\n  Typography,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { Search, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../utils';\n\nimport { COMPONENT_ICONS } from './constants';\n\nimport type { IntlLabel } from '../../types';\n\nconst IconPickerWrapper = styled(Flex)`\n  label {\n    ${inputFocusStyle()}\n    border-radius: ${({ theme }) => theme.borderRadius};\n    border: 1px solid ${({ theme }) => theme.colors.neutral100};\n  }\n`;\n\ntype Icons = keyof typeof COMPONENT_ICONS;\n\ninterface IconPickProps {\n  iconKey: Icons;\n  name: string;\n  onChange: (value: any) => void;\n  isSelected: boolean;\n  ariaLabel: string;\n}\n\nconst IconPick = ({ iconKey, name, onChange, isSelected, ariaLabel }: IconPickProps) => {\n  const Icon = COMPONENT_ICONS[iconKey];\n\n  return (\n    <Field.Root name={name} required={false}>\n      <Field.Label>\n        <VisuallyHidden>\n          {ariaLabel}\n          <Field.Input\n            type=\"radio\"\n            checked={isSelected}\n            onChange={onChange}\n            value={iconKey}\n            aria-checked={isSelected}\n          />\n        </VisuallyHidden>\n        <Tooltip label={iconKey}>\n          <Flex\n            padding={2}\n            cursor=\"pointer\"\n            hasRadius\n            background={isSelected ? 'primary200' : undefined}\n          >\n            <Icon width={'2rem'} height={'2rem'} fill={isSelected ? 'primary600' : 'neutral300'} />\n          </Flex>\n        </Tooltip>\n      </Field.Label>\n    </Field.Root>\n  );\n};\n\nexport interface IconPickerProps {\n  intlLabel: IntlLabel;\n  name: string;\n  onChange: (value: { target: { name: string; value: string } }) => void;\n  value?: string;\n}\n\nexport const IconPicker = ({ intlLabel, name, onChange, value = '' }: IconPickerProps) => {\n  const { formatMessage } = useIntl();\n  const [showSearch, setShowSearch] = useState(false);\n  const [search, setSearch] = useState('');\n  const allIcons = Object.keys(COMPONENT_ICONS) as Icons[];\n  const [icons, setIcons] = useState(allIcons);\n  const searchIconRef = useRef(null);\n  const searchBarRef = useRef(null);\n\n  const toggleSearch = () => {\n    setShowSearch(!showSearch);\n  };\n\n  const onChangeSearch = ({ target: { value } }: { target: { value: string } }) => {\n    setSearch(value);\n    setIcons(() => allIcons.filter((icon) => icon.toLowerCase().includes(value.toLowerCase())));\n  };\n\n  const onClearSearch = () => {\n    toggleSearch();\n    setSearch('');\n    setIcons(allIcons);\n  };\n\n  const removeIconSelected = () => {\n    onChange({ target: { name, value: '' } });\n  };\n\n  useEffect(() => {\n    if (showSearch) {\n      (searchBarRef.current as unknown as HTMLInputElement)?.focus();\n    }\n  }, [showSearch]);\n\n  return (\n    <>\n      <Flex justifyContent=\"space-between\" paddingBottom={2}>\n        <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"neutral800\" tag=\"label\">\n          {formatMessage(intlLabel)}\n        </Typography>\n        <Flex gap={1}>\n          {showSearch ? (\n            <Searchbar\n              ref={searchBarRef}\n              name=\"searchbar\"\n              placeholder={formatMessage({\n                id: getTrad('ComponentIconPicker.search.placeholder'),\n                defaultMessage: 'Search for an icon',\n              })}\n              onBlur={() => {\n                if (!search) {\n                  toggleSearch();\n                }\n              }}\n              onChange={onChangeSearch}\n              value={search}\n              onClear={onClearSearch}\n              clearLabel={formatMessage({\n                id: getTrad('IconPicker.search.clear.label'),\n                defaultMessage: 'Clear the icon search',\n              })}\n            >\n              {formatMessage({\n                id: getTrad('IconPicker.search.placeholder.label'),\n                defaultMessage: 'Search for an icon',\n              })}\n            </Searchbar>\n          ) : (\n            <IconButton\n              ref={searchIconRef}\n              onClick={toggleSearch}\n              withTooltip={false}\n              label={formatMessage({\n                id: getTrad('IconPicker.search.button.label'),\n                defaultMessage: 'Search icon button',\n              })}\n              variant=\"ghost\"\n            >\n              <Search />\n            </IconButton>\n          )}\n          {value && (\n            <Tooltip\n              label={formatMessage({\n                id: getTrad('IconPicker.remove.tooltip'),\n                defaultMessage: 'Remove the selected icon',\n              })}\n            >\n              <IconButton\n                onClick={removeIconSelected}\n                withTooltip={false}\n                label={formatMessage({\n                  id: getTrad('IconPicker.remove.button'),\n                  defaultMessage: 'Remove the selected icon',\n                })}\n                variant=\"ghost\"\n              >\n                <Trash />\n              </IconButton>\n            </Tooltip>\n          )}\n        </Flex>\n      </Flex>\n      <IconPickerWrapper\n        position=\"relative\"\n        padding={1}\n        background=\"neutral100\"\n        hasRadius\n        wrap=\"wrap\"\n        gap={2}\n        maxHeight=\"126px\"\n        overflow=\"auto\"\n        textAlign=\"center\"\n      >\n        {icons.length > 0 ? (\n          icons.map((iconKey) => (\n            <IconPick\n              key={iconKey}\n              iconKey={iconKey}\n              name={name}\n              onChange={onChange}\n              isSelected={iconKey === value}\n              ariaLabel={formatMessage(\n                {\n                  id: getTrad('IconPicker.icon.label'),\n                  defaultMessage: 'Select {icon} icon',\n                },\n                { icon: iconKey }\n              )}\n            />\n          ))\n        ) : (\n          <Box padding={4} grow={2}>\n            <Typography variant=\"delta\" textColor=\"neutral600\" textAlign=\"center\">\n              {formatMessage({\n                id: getTrad('IconPicker.emptyState.label'),\n                defaultMessage: 'No icon found',\n              })}\n            </Typography>\n          </Box>\n        )}\n      </IconPickerWrapper>\n    </>\n  );\n};\n"],"names":["IconPickerWrapper","styled","Flex","inputFocusStyle","theme","borderRadius","colors","neutral100","IconPick","iconKey","name","onChange","isSelected","ariaLabel","Icon","COMPONENT_ICONS","_jsx","Field","Root","required","_jsxs","Label","VisuallyHidden","Input","type","checked","value","aria-checked","Tooltip","label","padding","cursor","hasRadius","background","undefined","width","height","fill","IconPicker","intlLabel","formatMessage","useIntl","showSearch","setShowSearch","useState","search","setSearch","allIcons","Object","keys","icons","setIcons","searchIconRef","useRef","searchBarRef","toggleSearch","onChangeSearch","target","filter","icon","toLowerCase","includes","onClearSearch","removeIconSelected","useEffect","current","focus","_Fragment","justifyContent","paddingBottom","Typography","variant","fontWeight","textColor","tag","gap","Searchbar","ref","placeholder","id","getTrad","defaultMessage","onBlur","onClear","clearLabel","IconButton","onClick","withTooltip","Search","Trash","position","wrap","maxHeight","overflow","textAlign","length","map","Box","grow"],"mappings":"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"}

package/dist/admin/components/IconPicker/IconPicker.mjs

@@ -33,13 +33,18 @@ const IconPick = ({ iconKey, name, onChange, isSelected, ariaLabel })=>{
                         })
                     ]
                 }),
-                /*#__PURE__*/ jsx(Flex, {
-                    padding: 2,
-                    cursor: "pointer",
-                    hasRadius: true,
-                    background: isSelected ? 'primary200' : undefined,
-                    children: /*#__PURE__*/ jsx(Icon, {
-                        fill: isSelected ? 'primary600' : 'neutral300'
+                /*#__PURE__*/ jsx(Tooltip, {
+                    label: iconKey,
+                    children: /*#__PURE__*/ jsx(Flex, {
+                        padding: 2,
+                        cursor: "pointer",
+                        hasRadius: true,
+                        background: isSelected ? 'primary200' : undefined,
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            width: '2rem',
+                            height: '2rem',
+                            fill: isSelected ? 'primary600' : 'neutral300'
+                        })
                     })
                 })
             ]

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

@@ -1 +1 @@
-{"version":3,"file":"IconPicker.mjs","sources":["../../../../admin/src/components/IconPicker/IconPicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport {\n  Box,\n  Field,\n  Flex,\n  IconButton,\n  inputFocusStyle,\n  Searchbar,\n  Tooltip,\n  Typography,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { Search, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../utils';\n\nimport { COMPONENT_ICONS } from './constants';\n\nimport type { IntlLabel } from '../../types';\n\nconst IconPickerWrapper = styled(Flex)`\n  label {\n    ${inputFocusStyle()}\n    border-radius: ${({ theme }) => theme.borderRadius};\n    border: 1px solid ${({ theme }) => theme.colors.neutral100};\n  }\n`;\n\ntype Icons = keyof typeof COMPONENT_ICONS;\n\ninterface IconPickProps {\n  iconKey: Icons;\n  name: string;\n  onChange: (value: any) => void;\n  isSelected: boolean;\n  ariaLabel: string;\n}\n\nconst IconPick = ({ iconKey, name, onChange, isSelected, ariaLabel }: IconPickProps) => {\n  const Icon = COMPONENT_ICONS[iconKey];\n\n  return (\n    <Field.Root name={name} required={false}>\n      <Field.Label>\n        <VisuallyHidden>\n          {ariaLabel}\n          <Field.Input\n            type=\"radio\"\n            checked={isSelected}\n            onChange={onChange}\n            value={iconKey}\n            aria-checked={isSelected}\n          />\n        </VisuallyHidden>\n        <Flex\n          padding={2}\n          cursor=\"pointer\"\n          hasRadius\n          background={isSelected ? 'primary200' : undefined}\n        >\n          <Icon fill={isSelected ? 'primary600' : 'neutral300'} />\n        </Flex>\n      </Field.Label>\n    </Field.Root>\n  );\n};\n\nexport interface IconPickerProps {\n  intlLabel: IntlLabel;\n  name: string;\n  onChange: (value: { target: { name: string; value: string } }) => void;\n  value?: string;\n}\n\nexport const IconPicker = ({ intlLabel, name, onChange, value = '' }: IconPickerProps) => {\n  const { formatMessage } = useIntl();\n  const [showSearch, setShowSearch] = useState(false);\n  const [search, setSearch] = useState('');\n  const allIcons = Object.keys(COMPONENT_ICONS) as Icons[];\n  const [icons, setIcons] = useState(allIcons);\n  const searchIconRef = useRef(null);\n  const searchBarRef = useRef(null);\n\n  const toggleSearch = () => {\n    setShowSearch(!showSearch);\n  };\n\n  const onChangeSearch = ({ target: { value } }: { target: { value: string } }) => {\n    setSearch(value);\n    setIcons(() => allIcons.filter((icon) => icon.toLowerCase().includes(value.toLowerCase())));\n  };\n\n  const onClearSearch = () => {\n    toggleSearch();\n    setSearch('');\n    setIcons(allIcons);\n  };\n\n  const removeIconSelected = () => {\n    onChange({ target: { name, value: '' } });\n  };\n\n  useEffect(() => {\n    if (showSearch) {\n      (searchBarRef.current as unknown as HTMLInputElement)?.focus();\n    }\n  }, [showSearch]);\n\n  return (\n    <>\n      <Flex justifyContent=\"space-between\" paddingBottom={2}>\n        <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"neutral800\" tag=\"label\">\n          {formatMessage(intlLabel)}\n        </Typography>\n        <Flex gap={1}>\n          {showSearch ? (\n            <Searchbar\n              ref={searchBarRef}\n              name=\"searchbar\"\n              placeholder={formatMessage({\n                id: getTrad('ComponentIconPicker.search.placeholder'),\n                defaultMessage: 'Search for an icon',\n              })}\n              onBlur={() => {\n                if (!search) {\n                  toggleSearch();\n                }\n              }}\n              onChange={onChangeSearch}\n              value={search}\n              onClear={onClearSearch}\n              clearLabel={formatMessage({\n                id: getTrad('IconPicker.search.clear.label'),\n                defaultMessage: 'Clear the icon search',\n              })}\n            >\n              {formatMessage({\n                id: getTrad('IconPicker.search.placeholder.label'),\n                defaultMessage: 'Search for an icon',\n              })}\n            </Searchbar>\n          ) : (\n            <IconButton\n              ref={searchIconRef}\n              onClick={toggleSearch}\n              withTooltip={false}\n              label={formatMessage({\n                id: getTrad('IconPicker.search.button.label'),\n                defaultMessage: 'Search icon button',\n              })}\n              variant=\"ghost\"\n            >\n              <Search />\n            </IconButton>\n          )}\n          {value && (\n            <Tooltip\n              label={formatMessage({\n                id: getTrad('IconPicker.remove.tooltip'),\n                defaultMessage: 'Remove the selected icon',\n              })}\n            >\n              <IconButton\n                onClick={removeIconSelected}\n                withTooltip={false}\n                label={formatMessage({\n                  id: getTrad('IconPicker.remove.button'),\n                  defaultMessage: 'Remove the selected icon',\n                })}\n                variant=\"ghost\"\n              >\n                <Trash />\n              </IconButton>\n            </Tooltip>\n          )}\n        </Flex>\n      </Flex>\n      <IconPickerWrapper\n        position=\"relative\"\n        padding={1}\n        background=\"neutral100\"\n        hasRadius\n        wrap=\"wrap\"\n        gap={2}\n        maxHeight=\"126px\"\n        overflow=\"auto\"\n        textAlign=\"center\"\n      >\n        {icons.length > 0 ? (\n          icons.map((iconKey) => (\n            <IconPick\n              key={iconKey}\n              iconKey={iconKey}\n              name={name}\n              onChange={onChange}\n              isSelected={iconKey === value}\n              ariaLabel={formatMessage(\n                {\n                  id: getTrad('IconPicker.icon.label'),\n                  defaultMessage: 'Select {icon} icon',\n                },\n                { icon: iconKey }\n              )}\n            />\n          ))\n        ) : (\n          <Box padding={4} grow={2}>\n            <Typography variant=\"delta\" textColor=\"neutral600\" textAlign=\"center\">\n              {formatMessage({\n                id: getTrad('IconPicker.emptyState.label'),\n                defaultMessage: 'No icon found',\n              })}\n            </Typography>\n          </Box>\n        )}\n      </IconPickerWrapper>\n    </>\n  );\n};\n"],"names":["IconPickerWrapper","styled","Flex","inputFocusStyle","theme","borderRadius","colors","neutral100","IconPick","iconKey","name","onChange","isSelected","ariaLabel","Icon","COMPONENT_ICONS","_jsx","Field","Root","required","_jsxs","Label","VisuallyHidden","Input","type","checked","value","aria-checked","padding","cursor","hasRadius","background","undefined","fill","IconPicker","intlLabel","formatMessage","useIntl","showSearch","setShowSearch","useState","search","setSearch","allIcons","Object","keys","icons","setIcons","searchIconRef","useRef","searchBarRef","toggleSearch","onChangeSearch","target","filter","icon","toLowerCase","includes","onClearSearch","removeIconSelected","useEffect","current","focus","_Fragment","justifyContent","paddingBottom","Typography","variant","fontWeight","textColor","tag","gap","Searchbar","ref","placeholder","id","getTrad","defaultMessage","onBlur","onClear","clearLabel","IconButton","onClick","withTooltip","label","Search","Tooltip","Trash","position","wrap","maxHeight","overflow","textAlign","length","map","Box","grow"],"mappings":"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"}
+{"version":3,"file":"IconPicker.mjs","sources":["../../../../admin/src/components/IconPicker/IconPicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport {\n  Box,\n  Field,\n  Flex,\n  IconButton,\n  inputFocusStyle,\n  Searchbar,\n  Tooltip,\n  Typography,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { Search, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../utils';\n\nimport { COMPONENT_ICONS } from './constants';\n\nimport type { IntlLabel } from '../../types';\n\nconst IconPickerWrapper = styled(Flex)`\n  label {\n    ${inputFocusStyle()}\n    border-radius: ${({ theme }) => theme.borderRadius};\n    border: 1px solid ${({ theme }) => theme.colors.neutral100};\n  }\n`;\n\ntype Icons = keyof typeof COMPONENT_ICONS;\n\ninterface IconPickProps {\n  iconKey: Icons;\n  name: string;\n  onChange: (value: any) => void;\n  isSelected: boolean;\n  ariaLabel: string;\n}\n\nconst IconPick = ({ iconKey, name, onChange, isSelected, ariaLabel }: IconPickProps) => {\n  const Icon = COMPONENT_ICONS[iconKey];\n\n  return (\n    <Field.Root name={name} required={false}>\n      <Field.Label>\n        <VisuallyHidden>\n          {ariaLabel}\n          <Field.Input\n            type=\"radio\"\n            checked={isSelected}\n            onChange={onChange}\n            value={iconKey}\n            aria-checked={isSelected}\n          />\n        </VisuallyHidden>\n        <Tooltip label={iconKey}>\n          <Flex\n            padding={2}\n            cursor=\"pointer\"\n            hasRadius\n            background={isSelected ? 'primary200' : undefined}\n          >\n            <Icon width={'2rem'} height={'2rem'} fill={isSelected ? 'primary600' : 'neutral300'} />\n          </Flex>\n        </Tooltip>\n      </Field.Label>\n    </Field.Root>\n  );\n};\n\nexport interface IconPickerProps {\n  intlLabel: IntlLabel;\n  name: string;\n  onChange: (value: { target: { name: string; value: string } }) => void;\n  value?: string;\n}\n\nexport const IconPicker = ({ intlLabel, name, onChange, value = '' }: IconPickerProps) => {\n  const { formatMessage } = useIntl();\n  const [showSearch, setShowSearch] = useState(false);\n  const [search, setSearch] = useState('');\n  const allIcons = Object.keys(COMPONENT_ICONS) as Icons[];\n  const [icons, setIcons] = useState(allIcons);\n  const searchIconRef = useRef(null);\n  const searchBarRef = useRef(null);\n\n  const toggleSearch = () => {\n    setShowSearch(!showSearch);\n  };\n\n  const onChangeSearch = ({ target: { value } }: { target: { value: string } }) => {\n    setSearch(value);\n    setIcons(() => allIcons.filter((icon) => icon.toLowerCase().includes(value.toLowerCase())));\n  };\n\n  const onClearSearch = () => {\n    toggleSearch();\n    setSearch('');\n    setIcons(allIcons);\n  };\n\n  const removeIconSelected = () => {\n    onChange({ target: { name, value: '' } });\n  };\n\n  useEffect(() => {\n    if (showSearch) {\n      (searchBarRef.current as unknown as HTMLInputElement)?.focus();\n    }\n  }, [showSearch]);\n\n  return (\n    <>\n      <Flex justifyContent=\"space-between\" paddingBottom={2}>\n        <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"neutral800\" tag=\"label\">\n          {formatMessage(intlLabel)}\n        </Typography>\n        <Flex gap={1}>\n          {showSearch ? (\n            <Searchbar\n              ref={searchBarRef}\n              name=\"searchbar\"\n              placeholder={formatMessage({\n                id: getTrad('ComponentIconPicker.search.placeholder'),\n                defaultMessage: 'Search for an icon',\n              })}\n              onBlur={() => {\n                if (!search) {\n                  toggleSearch();\n                }\n              }}\n              onChange={onChangeSearch}\n              value={search}\n              onClear={onClearSearch}\n              clearLabel={formatMessage({\n                id: getTrad('IconPicker.search.clear.label'),\n                defaultMessage: 'Clear the icon search',\n              })}\n            >\n              {formatMessage({\n                id: getTrad('IconPicker.search.placeholder.label'),\n                defaultMessage: 'Search for an icon',\n              })}\n            </Searchbar>\n          ) : (\n            <IconButton\n              ref={searchIconRef}\n              onClick={toggleSearch}\n              withTooltip={false}\n              label={formatMessage({\n                id: getTrad('IconPicker.search.button.label'),\n                defaultMessage: 'Search icon button',\n              })}\n              variant=\"ghost\"\n            >\n              <Search />\n            </IconButton>\n          )}\n          {value && (\n            <Tooltip\n              label={formatMessage({\n                id: getTrad('IconPicker.remove.tooltip'),\n                defaultMessage: 'Remove the selected icon',\n              })}\n            >\n              <IconButton\n                onClick={removeIconSelected}\n                withTooltip={false}\n                label={formatMessage({\n                  id: getTrad('IconPicker.remove.button'),\n                  defaultMessage: 'Remove the selected icon',\n                })}\n                variant=\"ghost\"\n              >\n                <Trash />\n              </IconButton>\n            </Tooltip>\n          )}\n        </Flex>\n      </Flex>\n      <IconPickerWrapper\n        position=\"relative\"\n        padding={1}\n        background=\"neutral100\"\n        hasRadius\n        wrap=\"wrap\"\n        gap={2}\n        maxHeight=\"126px\"\n        overflow=\"auto\"\n        textAlign=\"center\"\n      >\n        {icons.length > 0 ? (\n          icons.map((iconKey) => (\n            <IconPick\n              key={iconKey}\n              iconKey={iconKey}\n              name={name}\n              onChange={onChange}\n              isSelected={iconKey === value}\n              ariaLabel={formatMessage(\n                {\n                  id: getTrad('IconPicker.icon.label'),\n                  defaultMessage: 'Select {icon} icon',\n                },\n                { icon: iconKey }\n              )}\n            />\n          ))\n        ) : (\n          <Box padding={4} grow={2}>\n            <Typography variant=\"delta\" textColor=\"neutral600\" textAlign=\"center\">\n              {formatMessage({\n                id: getTrad('IconPicker.emptyState.label'),\n                defaultMessage: 'No icon found',\n              })}\n            </Typography>\n          </Box>\n        )}\n      </IconPickerWrapper>\n    </>\n  );\n};\n"],"names":["IconPickerWrapper","styled","Flex","inputFocusStyle","theme","borderRadius","colors","neutral100","IconPick","iconKey","name","onChange","isSelected","ariaLabel","Icon","COMPONENT_ICONS","_jsx","Field","Root","required","_jsxs","Label","VisuallyHidden","Input","type","checked","value","aria-checked","Tooltip","label","padding","cursor","hasRadius","background","undefined","width","height","fill","IconPicker","intlLabel","formatMessage","useIntl","showSearch","setShowSearch","useState","search","setSearch","allIcons","Object","keys","icons","setIcons","searchIconRef","useRef","searchBarRef","toggleSearch","onChangeSearch","target","filter","icon","toLowerCase","includes","onClearSearch","removeIconSelected","useEffect","current","focus","_Fragment","justifyContent","paddingBottom","Typography","variant","fontWeight","textColor","tag","gap","Searchbar","ref","placeholder","id","getTrad","defaultMessage","onBlur","onClear","clearLabel","IconButton","onClick","withTooltip","Search","Trash","position","wrap","maxHeight","overflow","textAlign","length","map","Box","grow"],"mappings":"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"}

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

@@ -35,6 +35,9 @@ const IconWrapper = styledComponents.styled(designSystem.Box)`
   &:disabled {
     cursor: not-allowed;
   }
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
 const InfosWrapper = styledComponents.styled(designSystem.Flex)`
   position: absolute;

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

@@ -1 +1 @@
-{"version":3,"file":"Components.js","sources":["../../../../../admin/src/components/Relation/RelationNaturePicker/Components.tsx"],"sourcesContent":["import { Box, BoxComponent, Flex, FlexComponent } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst Wrapper = styled<BoxComponent>(Box)`\n  position: relative;\n  width: 100%;\n  &::before {\n    content: '';\n    position: absolute;\n    top: calc(50% - 0px);\n    height: 2px;\n    width: 100%;\n    background-color: ${({ theme }) => theme.colors.primary600};\n    z-index: 0;\n  }\n`;\n\nconst IconWrapper = styled<BoxComponent<'button'>>(Box)<{ $isSelected: boolean }>`\n  background: ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary100' : 'neutral0']};\n  border: 1px solid\n    ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary700' : 'neutral200']};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  z-index: 1;\n  flex: 0 0 2.4rem;\n  svg {\n    width: 2.4rem;\n    height: 2.4rem;\n    max-width: unset;\n    path {\n      fill: ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary700' : 'neutral500']};\n    }\n  }\n  cursor: pointer;\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\n\nconst InfosWrapper = styled<FlexComponent>(Flex)`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n`;\n\nexport { IconWrapper, InfosWrapper, Wrapper };\n"],"names":["Wrapper","styled","Box","theme","colors","primary600","IconWrapper","$isSelected","borderRadius","InfosWrapper","Flex"],"mappings":";;;;;AAGMA,MAAAA,OAAAA,GAAUC,uBAAqBC,CAAAA,gBAAAA,CAAI;;;;;;;;;sBASnB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;AAG/D;AAEMC,MAAAA,WAAAA,GAAcL,uBAA+BC,CAAAA,gBAAAA,CAA8B;AACnE,cAAA,EAAE,CAAC,EAAEC,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAc,GAAA,YAAA,GAAe,WAAW,CAAC;;AAE9F,IAAA,EAAE,CAAC,EAAEJ,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAc,GAAA,YAAA,GAAe,aAAa,CAAC;AACzE,iBAAA,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMK,YAAY,CAAC;;;;;;;;AAQzC,YAAA,EAAE,CAAC,EAAEL,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAc,GAAA,YAAA,GAAe,aAAa,CAAC;;;;;;;AAOlG;AAEME,MAAAA,YAAAA,GAAeR,uBAAsBS,CAAAA,iBAAAA,CAAK;;;;;AAKhD;;;;;;"}
+{"version":3,"file":"Components.js","sources":["../../../../../admin/src/components/Relation/RelationNaturePicker/Components.tsx"],"sourcesContent":["import { Box, BoxComponent, Flex, FlexComponent } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst Wrapper = styled<BoxComponent>(Box)`\n  position: relative;\n  width: 100%;\n  &::before {\n    content: '';\n    position: absolute;\n    top: calc(50% - 0px);\n    height: 2px;\n    width: 100%;\n    background-color: ${({ theme }) => theme.colors.primary600};\n    z-index: 0;\n  }\n`;\n\nconst IconWrapper = styled<BoxComponent<'button'>>(Box)<{ $isSelected: boolean }>`\n  background: ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary100' : 'neutral0']};\n  border: 1px solid\n    ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary700' : 'neutral200']};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  z-index: 1;\n  flex: 0 0 2.4rem;\n  svg {\n    width: 2.4rem;\n    height: 2.4rem;\n    max-width: unset;\n    path {\n      fill: ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary700' : 'neutral500']};\n    }\n  }\n  cursor: pointer;\n  &:disabled {\n    cursor: not-allowed;\n  }\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst InfosWrapper = styled<FlexComponent>(Flex)`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n`;\n\nexport { IconWrapper, InfosWrapper, Wrapper };\n"],"names":["Wrapper","styled","Box","theme","colors","primary600","IconWrapper","$isSelected","borderRadius","InfosWrapper","Flex"],"mappings":";;;;;AAGMA,MAAAA,OAAAA,GAAUC,uBAAqBC,CAAAA,gBAAAA,CAAI;;;;;;;;;sBASnB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;AAG/D;AAEMC,MAAAA,WAAAA,GAAcL,uBAA+BC,CAAAA,gBAAAA,CAA8B;AACnE,cAAA,EAAE,CAAC,EAAEC,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAc,GAAA,YAAA,GAAe,WAAW,CAAC;;AAE9F,IAAA,EAAE,CAAC,EAAEJ,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAc,GAAA,YAAA,GAAe,aAAa,CAAC;AACzE,iBAAA,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMK,YAAY,CAAC;;;;;;;;AAQzC,YAAA,EAAE,CAAC,EAAEL,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAc,GAAA,YAAA,GAAe,aAAa,CAAC;;;;;;;;;;AAUlG;AAEME,MAAAA,YAAAA,GAAeR,uBAAsBS,CAAAA,iBAAAA,CAAK;;;;;AAKhD;;;;;;"}

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

@@ -33,6 +33,9 @@ const IconWrapper = styled(Box)`
   &:disabled {
     cursor: not-allowed;
   }
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
 const InfosWrapper = styled(Flex)`
   position: absolute;

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

@@ -1 +1 @@
-{"version":3,"file":"Components.mjs","sources":["../../../../../admin/src/components/Relation/RelationNaturePicker/Components.tsx"],"sourcesContent":["import { Box, BoxComponent, Flex, FlexComponent } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst Wrapper = styled<BoxComponent>(Box)`\n  position: relative;\n  width: 100%;\n  &::before {\n    content: '';\n    position: absolute;\n    top: calc(50% - 0px);\n    height: 2px;\n    width: 100%;\n    background-color: ${({ theme }) => theme.colors.primary600};\n    z-index: 0;\n  }\n`;\n\nconst IconWrapper = styled<BoxComponent<'button'>>(Box)<{ $isSelected: boolean }>`\n  background: ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary100' : 'neutral0']};\n  border: 1px solid\n    ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary700' : 'neutral200']};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  z-index: 1;\n  flex: 0 0 2.4rem;\n  svg {\n    width: 2.4rem;\n    height: 2.4rem;\n    max-width: unset;\n    path {\n      fill: ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary700' : 'neutral500']};\n    }\n  }\n  cursor: pointer;\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\n\nconst InfosWrapper = styled<FlexComponent>(Flex)`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n`;\n\nexport { IconWrapper, InfosWrapper, Wrapper };\n"],"names":["Wrapper","styled","Box","theme","colors","primary600","IconWrapper","$isSelected","borderRadius","InfosWrapper","Flex"],"mappings":";;;AAGMA,MAAAA,OAAAA,GAAUC,MAAqBC,CAAAA,GAAAA,CAAI;;;;;;;;;sBASnB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;AAG/D;AAEMC,MAAAA,WAAAA,GAAcL,MAA+BC,CAAAA,GAAAA,CAA8B;AACnE,cAAA,EAAE,CAAC,EAAEC,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAc,GAAA,YAAA,GAAe,WAAW,CAAC;;AAE9F,IAAA,EAAE,CAAC,EAAEJ,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAc,GAAA,YAAA,GAAe,aAAa,CAAC;AACzE,iBAAA,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMK,YAAY,CAAC;;;;;;;;AAQzC,YAAA,EAAE,CAAC,EAAEL,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAc,GAAA,YAAA,GAAe,aAAa,CAAC;;;;;;;AAOlG;AAEME,MAAAA,YAAAA,GAAeR,MAAsBS,CAAAA,IAAAA,CAAK;;;;;AAKhD;;;;"}
+{"version":3,"file":"Components.mjs","sources":["../../../../../admin/src/components/Relation/RelationNaturePicker/Components.tsx"],"sourcesContent":["import { Box, BoxComponent, Flex, FlexComponent } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst Wrapper = styled<BoxComponent>(Box)`\n  position: relative;\n  width: 100%;\n  &::before {\n    content: '';\n    position: absolute;\n    top: calc(50% - 0px);\n    height: 2px;\n    width: 100%;\n    background-color: ${({ theme }) => theme.colors.primary600};\n    z-index: 0;\n  }\n`;\n\nconst IconWrapper = styled<BoxComponent<'button'>>(Box)<{ $isSelected: boolean }>`\n  background: ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary100' : 'neutral0']};\n  border: 1px solid\n    ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary700' : 'neutral200']};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  z-index: 1;\n  flex: 0 0 2.4rem;\n  svg {\n    width: 2.4rem;\n    height: 2.4rem;\n    max-width: unset;\n    path {\n      fill: ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary700' : 'neutral500']};\n    }\n  }\n  cursor: pointer;\n  &:disabled {\n    cursor: not-allowed;\n  }\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst InfosWrapper = styled<FlexComponent>(Flex)`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n`;\n\nexport { IconWrapper, InfosWrapper, Wrapper };\n"],"names":["Wrapper","styled","Box","theme","colors","primary600","IconWrapper","$isSelected","borderRadius","InfosWrapper","Flex"],"mappings":";;;AAGMA,MAAAA,OAAAA,GAAUC,MAAqBC,CAAAA,GAAAA,CAAI;;;;;;;;;sBASnB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;AAG/D;AAEMC,MAAAA,WAAAA,GAAcL,MAA+BC,CAAAA,GAAAA,CAA8B;AACnE,cAAA,EAAE,CAAC,EAAEC,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAc,GAAA,YAAA,GAAe,WAAW,CAAC;;AAE9F,IAAA,EAAE,CAAC,EAAEJ,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAc,GAAA,YAAA,GAAe,aAAa,CAAC;AACzE,iBAAA,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMK,YAAY,CAAC;;;;;;;;AAQzC,YAAA,EAAE,CAAC,EAAEL,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAc,GAAA,YAAA,GAAe,aAAa,CAAC;;;;;;;;;;AAUlG;AAEME,MAAAA,YAAAA,GAAeR,MAAsBS,CAAAA,IAAAA,CAAK;;;;;AAKhD;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/content-type-builder",
-  "version": "5.12.3",
+  "version": "5.12.5",
   "description": "Create and manage content types",
   "repository": {
     "type": "git",
@@ -62,10 +62,10 @@
   "dependencies": {
     "@reduxjs/toolkit": "1.9.7",
     "@sindresorhus/slugify": "1.1.0",
-    "@strapi/design-system": "2.0.0-rc.18",
-    "@strapi/generators": "5.12.3",
-    "@strapi/icons": "2.0.0-rc.18",
-    "@strapi/utils": "5.12.3",
+    "@strapi/design-system": "2.0.0-rc.21",
+    "@strapi/generators": "5.12.5",
+    "@strapi/icons": "2.0.0-rc.21",
+    "@strapi/utils": "5.12.5",
     "date-fns": "2.30.0",
     "fs-extra": "11.2.0",
     "immer": "9.0.21",
@@ -77,8 +77,8 @@
     "yup": "0.32.9"
   },
   "devDependencies": {
-    "@strapi/admin": "5.12.3",
-    "@strapi/types": "5.12.3",
+    "@strapi/admin": "5.12.5",
+    "@strapi/types": "5.12.5",
     "@testing-library/dom": "10.1.0",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "14.5.2",