chore: remove pxToRem and replace it with the returning value of the function (#19771)

* chore: remove pxToRem from the helper plugin utils

* chore: fix prettier errors

packages/core/admin/admin/src/components/GuidedTour/Homepage.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Flex, Typography } from '@strapi/design-system';
 import { LinkButton } from '@strapi/design-system/v2';
-import { GuidedTourContextValue, pxToRem, useGuidedTour, useTracking } from '@strapi/helper-plugin';
+import { GuidedTourContextValue, useGuidedTour, useTracking } from '@strapi/helper-plugin';
 import { ArrowRight } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { NavLink } from 'react-router-dom';
@@ -62,7 +62,7 @@ const GuidedTourHomepage = () => {
             return (
               <Box key={section.key}>
                 <Flex>
-                  <Box minWidth={pxToRem(30)} marginRight={5}>
+                  <Box minWidth={`${30 / 16}rem`} marginRight={5}>
                     <Number state={state}>{index + 1}</Number>
                   </Box>
                   <Typography variant="delta" as="h3">
@@ -72,7 +72,7 @@ const GuidedTourHomepage = () => {
                 <Flex alignItems="flex-start">
                   <Flex
                     justifyContent="center"
-                    minWidth={pxToRem(30)}
+                    minWidth={`${30 / 16}rem`}
                     marginBottom={3}
                     marginTop={3}
                     marginRight={5}

packages/core/admin/admin/src/components/GuidedTour/Modal.tsx

@@ -10,7 +10,7 @@ import {
   Typography,
 } from '@strapi/design-system';
 import { LinkButton } from '@strapi/design-system/v2';
-import { GuidedTourContextValue, pxToRem, useGuidedTour, useTracking } from '@strapi/helper-plugin';
+import { GuidedTourContextValue, useGuidedTour, useTracking } from '@strapi/helper-plugin';
 import { ArrowRight, Cross } from '@strapi/icons';
 import get from 'lodash/get';
 import { MessageDescriptor, useIntl } from 'react-intl';
@@ -75,7 +75,7 @@ const GuidedTourModal = () => {
             direction="column"
             alignItems="stretch"
             background="neutral0"
-            width={pxToRem(660)}
+            width={`${660 / 16}rem`}
             shadow="popupShadow"
             hasRadius
             padding={4}
@@ -171,8 +171,10 @@ const GuidedTourStepper = ({
   return (
     <>
       <Flex alignItems="stretch">
-        <Flex marginRight={8} justifyContent="center" minWidth={pxToRem(30)}>
+        <Flex marginRight={8} justifyContent="center" minWidth={`${30 / 16}rem`}>
-          {hasSectionBefore && <VerticalDivider state={STATES.IS_DONE} minHeight={pxToRem(24)} />}
+          {hasSectionBefore && (
+            <VerticalDivider state={STATES.IS_DONE} minHeight={`${24 / 16}rem`} />
+          )}
         </Flex>
         <Typography variant="sigma" textColor="primary600">
           {formatMessage({
@@ -182,7 +184,7 @@ const GuidedTourStepper = ({
         </Typography>
       </Flex>
       <Flex>
-        <Flex marginRight={8} minWidth={pxToRem(30)}>
+        <Flex marginRight={8} minWidth={`${30 / 16}rem`}>
           <Number
             state={hasStepsBefore ? STATES.IS_DONE : STATES.IS_ACTIVE}
             paddingTop={3}
@@ -198,7 +200,7 @@ const GuidedTourStepper = ({
         )}
       </Flex>
       <Flex alignItems="stretch">
-        <Flex marginRight={8} direction="column" justifyContent="center" minWidth={pxToRem(30)}>
+        <Flex marginRight={8} direction="column" justifyContent="center" minWidth={`${30 / 16}rem`}>
           {hasSectionAfter && (
             <>
               <VerticalDivider state={STATES.IS_DONE} />
@@ -232,8 +234,8 @@ const GuidedTourStepper = ({
       </Flex>
       {hasStepsBefore && hasSectionAfter && (
         <Box paddingTop={3}>
-          <Flex marginRight={8} justifyContent="center" width={pxToRem(30)}>
+          <Flex marginRight={8} justifyContent="center" width={`${30 / 16}rem`}>
-            <VerticalDivider state={STATES.IS_DONE} minHeight={pxToRem(24)} />
+            <VerticalDivider state={STATES.IS_DONE} minHeight={`${24 / 16}rem`} />
           </Flex>
         </Box>
       )}

packages/core/admin/admin/src/components/GuidedTour/Ornaments.tsx

@@ -1,5 +1,4 @@
 import { Box, BoxProps, Flex, FlexProps, Typography } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
 import { Check } from '@strapi/icons';
 
 import { STATES, States } from './constants';
@@ -19,13 +18,13 @@ const Number = ({ children, state, ...props }: NumberProps) => {
       background="primary600"
       padding={2}
       borderRadius="50%"
-      width={pxToRem(30)}
+      width={`${30 / 16}rem`}
-      height={pxToRem(30)}
+      height={`${30 / 16}rem`}
       justifyContent="center"
       {...props}
     >
       {state === STATES.IS_DONE ? (
-        <Check aria-hidden width={pxToRem(16)} color="neutral0" />
+        <Check aria-hidden width={`${16 / 16}rem`} color="neutral0" />
       ) : (
         <Typography fontWeight="semiBold" textColor="neutral0">
           {children}
@@ -39,8 +38,8 @@ const Number = ({ children, state, ...props }: NumberProps) => {
       borderStyle="solid"
       padding={2}
       borderRadius="50%"
-      width={pxToRem(30)}
+      width={`${30 / 16}rem`}
-      height={pxToRem(30)}
+      height={`${30 / 16}rem`}
       justifyContent="center"
       {...props}
     >
@@ -61,11 +60,11 @@ interface VerticalDividerProps extends BoxProps {
 
 const VerticalDivider = ({ state, ...props }: VerticalDividerProps) => (
   <Box
-    width={pxToRem(2)}
+    width={`${2 / 16}rem`}
     height="100%"
     background={state === STATES.IS_NOT_DONE ? 'neutral300' : 'primary500'}
     hasRadius
-    minHeight={state === STATES.IS_ACTIVE ? pxToRem(85) : pxToRem(65)}
+    minHeight={state === STATES.IS_ACTIVE ? `${85 / 16}rem` : `${65 / 16}rem`}
     {...props}
   />
 );

packages/core/admin/admin/src/content-manager/components/DragPreviews/CardDragPreview.tsx

@@ -1,5 +1,4 @@
 import { Flex, Typography } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
 import { Cross, Drag, Pencil } from '@strapi/icons';
 import styled from 'styled-components';
 
@@ -17,7 +16,7 @@ const CardDragPreview = ({ label, isSibling = false }: CardDragPreviewProps) =>
       hasRadius
       justifyContent="space-between"
       isSibling={isSibling}
-      max-height={pxToRem(32)}
+      max-height={`${32 / 16}rem`}
       maxWidth="min-content"
     >
       <Flex gap={3}>

packages/core/admin/admin/src/content-manager/components/DragPreviews/ComponentDragPreview.tsx

@@ -1,5 +1,4 @@
 import { Flex, IconButton, Typography } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
 import { CarretDown, Drag, Trash } from '@strapi/icons';
 import styled from 'styled-components';
 
@@ -15,7 +14,7 @@ const ComponentDragPreview = ({ displayedValue }: ComponentDragPreviewProps) =>
       justifyContent="space-between"
       gap={3}
       padding={3}
-      width={pxToRem(300)}
+      width={`${300 / 16}rem`}
     >
       <ToggleButton type="button">
         <Flex gap={6}>
@@ -23,13 +22,13 @@ const ComponentDragPreview = ({ displayedValue }: ComponentDragPreviewProps) =>
             alignItems="center"
             justifyContent="center"
             background="neutral200"
-            height={pxToRem(32)}
+            height={`${32 / 16}rem`}
-            width={pxToRem(32)}
+            width={`${32 / 16}rem`}
           >
             <CarretDown />
           </DropdownIconWrapper>
 
-          <Flex maxWidth={pxToRem(150)}>
+          <Flex maxWidth={`${150 / 16}rem`}>
             <Typography textColor="neutral700" ellipsis>
               {displayedValue}
             </Typography>

packages/core/admin/admin/src/content-manager/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 
 import { createContext } from '@radix-ui/react-context';
 import { IconButton, Divider, VisuallyHidden } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
 import { Expand } from '@strapi/icons';
 import { type Attribute } from '@strapi/types';
 import { MessageDescriptor, useIntl } from 'react-intl';
@@ -117,8 +116,8 @@ const EditorDivider = styled(Divider)`
 
 const ExpandIconButton = styled(IconButton)`
   position: absolute;
-  bottom: ${pxToRem(12)};
+  bottom: ${12 / 16}rem;
-  right: ${pxToRem(12)};
+  right: ${12 / 16}rem;
 `;
 
 /**

packages/core/admin/admin/src/content-manager/pages/EditView/components/FormInputs/BlocksInput/BlocksToolbar.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 
 import * as Toolbar from '@radix-ui/react-toolbar';
 import { Flex, Icon, Tooltip, SingleSelect, SingleSelectOption, Box } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
 import { Link } from '@strapi/icons';
 import { MessageDescriptor, useIntl } from 'react-intl';
 import { Editor, Transforms, Element as SlateElement, Node, type Ancestor } from 'slate';
@@ -27,7 +26,7 @@ const ToolbarWrapper = styled(Flex)`
 const Separator = styled(Toolbar.Separator)`
   background: ${({ theme }) => theme.colors.neutral150};
   width: 1px;
-  height: ${pxToRem(24)};
+  height: ${24 / 16}rem;
 `;
 
 const FlexButton = styled(Flex)`

packages/core/admin/admin/src/content-manager/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Box, Flex, FocusTrap, Portal, IconButton, InputWrapper } from '@strapi/design-system';
-import { useLockScroll, pxToRem } from '@strapi/helper-plugin';
+import { useLockScroll } from '@strapi/helper-plugin';
 import { Collapse } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
@@ -12,8 +12,8 @@ import { useBlocksEditorContext } from './BlocksEditor';
 
 const CollapseIconButton = styled(IconButton)`
   position: absolute;
-  bottom: ${pxToRem(12)};
+  bottom: ${12 / 16}rem;
-  right: ${pxToRem(12)};
+  right: ${12 / 16}rem;
 `;
 
 const ExpandWrapper = styled(Flex)`

packages/core/admin/admin/src/content-manager/pages/EditView/components/FormInputs/Component/Initializer.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 import { Box, Flex, Typography } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
 import { PlusCircle } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
@@ -57,8 +56,8 @@ const Initializer = ({ disabled, name, onClick }: InitializerProps) => {
 };
 
 const CircleIcon = styled(PlusCircle)`
-  width: ${pxToRem(24)};
+  width: ${24 / 16}rem;
-  height: ${pxToRem(24)};
+  height: ${24 / 16}rem;
   > circle {
     fill: ${({ theme }) => theme.colors.primary200};
   }

packages/core/admin/admin/src/content-manager/pages/EditView/components/FormInputs/DynamicZone/ComponentCard.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 import { Flex, Typography } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
 import styled from 'styled-components';
 
 import { ComponentIcon, ComponentIconProps } from '../../../../../components/ComponentIcon';
@@ -23,7 +22,7 @@ const ComponentCard = ({ children, onClick, icon }: ComponentCardProps) => {
       justifyContent="center"
       alignItems="center"
       shrink={0}
-      height={pxToRem(84)}
+      height={`${84 / 16}rem`}
     >
       <Flex direction="column" gap={1} alignItems="center" justifyContent="center">
         <ComponentIcon icon={icon} />

packages/core/admin/admin/src/content-manager/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.tsx

@@ -9,7 +9,6 @@ import {
   Flex,
   Typography,
 } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
@@ -64,7 +63,7 @@ const ComponentCategory = ({
                 justifyContent="center"
                 onClick={onAddComponent(uid)}
                 hasRadius
-                height={pxToRem(84)}
+                height={`${84 / 16}rem`}
                 shrink={0}
                 borderColor="neutral200"
               >

packages/core/admin/admin/src/content-manager/pages/EditView/components/FormInputs/DynamicZone/DynamicZoneLabel.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 import { Box, Flex, Typography } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
 
 interface DynamicZoneLabelProps {
   label?: React.ReactNode;
@@ -33,7 +32,7 @@ const DynamicZoneLabel = ({
         color="neutral500"
       >
         <Flex direction="column" justifyContent="center">
-          <Flex maxWidth={pxToRem(356)}>
+          <Flex maxWidth={`${356 / 16}rem`}>
             <Typography variant="pi" textColor="neutral600" fontWeight="bold" ellipsis>
               {label || name}&nbsp;
             </Typography>
@@ -44,7 +43,7 @@ const DynamicZoneLabel = ({
             {labelAction && <Box paddingLeft={1}>{labelAction}</Box>}
           </Flex>
           {hint && (
-            <Box paddingTop={1} maxWidth={pxToRem(356)}>
+            <Box paddingTop={1} maxWidth={`${356 / 16}rem`}>
               <Typography variant="pi" textColor="neutral600" ellipsis>
                 {hint}
               </Typography>

packages/core/admin/admin/src/content-manager/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { BaseButton, Box, Flex, FocusTrap, Portal, Typography } from '@strapi/design-system';
-import { pxToRem, useLockScroll } from '@strapi/helper-plugin';
+import { useLockScroll } from '@strapi/helper-plugin';
 import { Collapse } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
@@ -56,7 +56,7 @@ const EditorLayout = ({
                 </BoxWithBorder>
                 <Flex alignItems="start" direction="column" flex={1} height="100%" width="100%">
                   <Flex
-                    height={pxToRem(48)}
+                    height={`${48 / 16}rem`}
                     background="neutral100"
                     justifyContent="flex-end"
                     shrink={0}

packages/core/admin/admin/src/pages/Marketplace/components/NpmPackageCard.tsx

@@ -2,7 +2,6 @@ import { Box, Flex, Icon, Tooltip, Typography, Divider, Button } from '@strapi/d
 import { LinkButton } from '@strapi/design-system/v2';
 import {
   useTracking,
-  pxToRem,
   AppInfoContextValue,
   useNotification,
   useClipboard,
@@ -323,8 +322,14 @@ const PackageStats = ({ githubStars = 0, npmDownloads = 0, npmPackageType }: Pac
     <Flex gap={1}>
       {!!githubStars && (
         <>
-          <Icon as={Github} height={pxToRem(12)} width={pxToRem(12)} aria-hidden />
+          <Icon as={Github} height={`${12 / 16}rem`} width={`${12 / 16}rem`} aria-hidden />
-          <Icon as={Star} height={pxToRem(12)} width={pxToRem(12)} color="warning500" aria-hidden />
+          <Icon
+            as={Star}
+            height={`${12 / 16}rem`}
+            width={`${12 / 16}rem`}
+            color="warning500"
+            aria-hidden
+          />
           <p
             aria-label={formatMessage(
               {
@@ -344,7 +349,7 @@ const PackageStats = ({ githubStars = 0, npmDownloads = 0, npmPackageType }: Pac
           <VerticalDivider unsetMargin={false} />
         </>
       )}
-      <Icon as={Download} height={pxToRem(12)} width={pxToRem(12)} aria-hidden />
+      <Icon as={Download} height={`${12 / 16}rem`} width={`${12 / 16}rem`} aria-hidden />
       <p
         aria-label={formatMessage(
           {
@@ -366,7 +371,7 @@ const PackageStats = ({ githubStars = 0, npmDownloads = 0, npmPackageType }: Pac
 };
 
 const VerticalDivider = styled(Divider)`
-  width: ${pxToRem(12)};
+  width: ${12 / 16}rem;
   transform: rotate(90deg);
 `;
 

packages/core/admin/admin/src/pages/Marketplace/components/OfflineLayout.tsx

@@ -1,5 +1,4 @@
 import { Box, Flex, Layout, Main, Typography } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
 import { PageHeader } from './PageHeader';
@@ -16,7 +15,7 @@ const OfflineLayout = () => {
           direction="column"
           alignItems="center"
           justifyContent="center"
-          paddingTop={pxToRem(120)}
+          paddingTop={`${120 / 16}rem`}
         >
           <Box paddingBottom={2}>
             <Typography textColor="neutral700" variant="alpha">

packages/core/admin/admin/src/pages/Settings/components/Tokens/Table.tsx

@@ -6,7 +6,6 @@ import {
   ConfirmDialog,
   DynamicTable,
   onRowClick,
-  pxToRem,
   useQueryParams,
   useTracking,
   TableProps as DynamicTableProps,
@@ -133,12 +132,12 @@ const TableRows = ({
               condition: canUpdate,
             })}
           >
-            <Td maxWidth={pxToRem(250)}>
+            <Td maxWidth={`${250 / 16}rem`}>
               <Typography textColor="neutral800" fontWeight="bold" ellipsis>
                 {token.name}
               </Typography>
             </Td>
-            <Td maxWidth={pxToRem(250)}>
+            <Td maxWidth={`${250 / 16}rem`}>
               <Typography textColor="neutral800" ellipsis>
                 {token.description}
               </Typography>

packages/core/admin/admin/src/pages/Settings/pages/ApplicationInfo/components/LogoInput.tsx

@@ -36,7 +36,6 @@ import {
   TextInputProps,
   Typography,
 } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
 import { PicturePlus, Plus, Refresh } from '@strapi/icons';
 import axios, { AxiosError } from 'axios';
 import { useIntl } from 'react-intl';
@@ -375,8 +374,8 @@ const ComputerForm = () => {
               >
                 <Icon
                   color="primary600"
-                  width={pxToRem(60)}
+                  width={`${60 / 16}rem`}
-                  height={pxToRem(60)}
+                  height={`${60 / 16}rem`}
                   as={PicturePlus}
                   aria-hidden
                 />
@@ -494,7 +493,7 @@ const PendingLogoDialog = ({ onChangeLogo }: PendingLogoDialogProps) => {
             })}
           </Button>
         </Flex>
-        <Box maxWidth={pxToRem(180)}>
+        <Box maxWidth={`${180 / 16}rem`}>
           {localImage?.url ? <ImageCardAsset asset={localImage} /> : null}
         </Box>
       </Box>

packages/core/admin/admin/src/pages/Settings/pages/Roles/components/RoleRow.tsx

@@ -1,5 +1,5 @@
 import { Box, Flex, IconButton, IconButtonProps, Td, Tr, Typography } from '@strapi/design-system';
-import { onRowClick, pxToRem, stopPropagation } from '@strapi/helper-plugin';
+import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
 import type { AdminRole } from '../../../../../hooks/useAdminRoles';
@@ -41,12 +41,12 @@ const RoleRow = ({
           })
         : {})}
     >
-      <Td maxWidth={pxToRem(130)}>
+      <Td maxWidth={`${130 / 16}rem`}>
         <Typography ellipsis textColor="neutral800">
           {name}
         </Typography>
       </Td>
-      <Td maxWidth={pxToRem(250)}>
+      <Td maxWidth={`${250 / 16}rem`}>
         <Typography ellipsis textColor="neutral800">
           {description}
         </Typography>

packages/core/admin/admin/src/pages/Settings/pages/Webhooks/components/TriggerContainer.tsx

@@ -1,5 +1,4 @@
 import { Box, Flex, Grid, GridItem, Typography } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
 import { Check, Cross, Loader } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import styled, { DefaultTheme, css } from 'styled-components';
@@ -156,7 +155,7 @@ const Message = ({ statusCode, message }: MessageProps) => {
   if (statusCode >= 300) {
     return (
       <Flex justifyContent="flex-end">
-        <Flex maxWidth={pxToRem(250)} justifyContent="flex-end" title={message}>
+        <Flex maxWidth={`${250 / 16}rem`} justifyContent="flex-end" title={message}>
           <Typography ellipsis textColor="neutral600">
             {message}
           </Typography>

packages/core/admin/admin/src/pages/UseCasePage.tsx

@@ -11,7 +11,7 @@ import {
   TextInput,
   Typography,
 } from '@strapi/design-system';
-import { pxToRem, useNotification } from '@strapi/helper-plugin';
+import { useNotification } from '@strapi/helper-plugin';
 import { parse } from 'qs';
 import { useIntl } from 'react-intl';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -122,7 +122,7 @@ const UseCasePage = () => {
           <form onSubmit={(e) => handleSubmit(e, false)}>
             <Flex direction="column" paddingBottom={7}>
               <Logo />
-              <Box paddingTop={6} paddingBottom={1} width={pxToRem(250)}>
+              <Box paddingTop={6} paddingBottom={1} width={`${250 / 16}rem`}>
                 <TypographyCenter variant="alpha" as="h1" id="usecase-title">
                   {formatMessage({
                     id: 'Usecase.title',

packages/core/admin/ee/admin/src/content-manager/pages/ListView/components/ReviewWorkflowsStageEE.tsx

@@ -1,5 +1,4 @@
 import { Box, Flex, Typography } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
 
 import { STAGE_COLOR_DEFAULT } from '../../../../pages/SettingsPage/pages/ReviewWorkflows/constants';
 import { getStageColorByHex } from '../../../../pages/SettingsPage/pages/ReviewWorkflows/utils/colors';
@@ -16,7 +15,7 @@ const ReviewWorkflowsStageEE = ({
   const { themeColorName } = getStageColorByHex(color) ?? {};
 
   return (
-    <Flex alignItems="center" gap={2} maxWidth={pxToRem(300)}>
+    <Flex alignItems="center" gap={2} maxWidth={`${300 / 16}rem`}>
       <Box
         height={2}
         background={color}

packages/core/admin/ee/admin/src/pages/SettingsPage/pages/ApplicationInfoPage/components/AdminSeatInfo.tsx

@@ -1,6 +1,6 @@
 import { Flex, GridItem, Icon, Tooltip, Typography } from '@strapi/design-system';
 import { Link } from '@strapi/design-system/v2';
-import { pxToRem, useRBAC } from '@strapi/helper-plugin';
+import { useRBAC } from '@strapi/helper-plugin';
 import { ExclamationMarkCircle, ExternalLink } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
@@ -83,8 +83,8 @@ export const AdminSeatInfoEE = () => {
             })}
           >
             <Icon
-              width={pxToRem(14)}
+              width={`${14 / 16}rem`}
-              height={pxToRem(14)}
+              height={`${14 / 16}rem`}
               color="danger500"
               as={ExclamationMarkCircle}
             />

packages/core/admin/ee/admin/src/pages/SettingsPage/pages/ReviewWorkflows/ListPage.tsx

@@ -18,7 +18,6 @@ import { Link, LinkButton } from '@strapi/design-system/v2';
 import {
   ConfirmDialog,
   onRowClick,
-  pxToRem,
   useAPIErrorHandler,
   useNotification,
   useRBAC,
@@ -41,15 +40,15 @@ import { useReviewWorkflows } from './hooks/useReviewWorkflows';
 
 const ActionLink = styled(Link)`
   align-items: center;
-  height: ${pxToRem(32)};
+  height: ${32 / 16}rem;
   display: flex;
   justify-content: center;
   padding: ${({ theme }) => `${theme.spaces[2]}}`};
-  width: ${pxToRem(32)};
+  width: ${32 / 16}rem;
 
   svg {
-    height: ${pxToRem(12)};
+    height: ${12 / 16}rem;
-    width: ${pxToRem(12)};
+    width: ${12 / 16}rem;
 
     path {
       fill: ${({ theme }) => theme.colors.neutral500};
@@ -312,7 +311,7 @@ export const ReviewWorkflowsListView = () => {
                   })}
                   key={`workflow-${workflow.id}`}
                 >
-                  <Td width={pxToRem(250)}>
+                  <Td width={`${250 / 16}rem`}>
                     <Typography textColor="neutral800" fontWeight="bold" ellipsis>
                       {workflow.name}
                     </Typography>

packages/core/admin/ee/admin/src/pages/SettingsPage/pages/ReviewWorkflows/components/StageDragPreview.tsx

@@ -1,5 +1,4 @@
 import { Flex, Typography } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
 import { CarretDown } from '@strapi/icons';
 import styled from 'styled-components';
 
@@ -24,7 +23,7 @@ export const StageDragPreview = ({ name }: StageDragPreviewType) => {
       hasRadius
       padding={3}
       shadow="tableShadow"
-      width={pxToRem(300)}
+      width={`${300 / 16}rem`}
     >
       <Toggle
         alignItems="center"

packages/core/content-type-builder/admin/src/components/AttributeIcon.tsx

@@ -1,5 +1,5 @@
 import { Box } from '@strapi/design-system';
-import { pxToRem, useCustomFields, CustomFieldUID } from '@strapi/helper-plugin';
+import { useCustomFields, CustomFieldUID } from '@strapi/helper-plugin';
 import {
   Boolean,
   CollectionType,
@@ -86,7 +86,7 @@ export const AttributeIcon = ({ type, customField = null, ...rest }: AttributeIc
   }
 
   return (
-    <IconBox height={pxToRem(24)} width={pxToRem(32)} shrink={0} {...rest} aria-hidden>
+    <IconBox height={`${24 / 16}rem`} width={`${32 / 16}rem`} shrink={0} {...rest} aria-hidden>
       <Box as={Compo} />
     </IconBox>
   );

packages/core/content-type-builder/admin/src/components/ComponentCard/ComponentCard.tsx

@@ -1,5 +1,4 @@
 import { Box, Flex, Typography } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
 import { Cross } from '@strapi/icons';
 import get from 'lodash/get';
 import styled from 'styled-components';
@@ -21,11 +20,11 @@ const CloseButton = styled(Box)`
   position: absolute;
   display: none;
   top: 5px;
-  right: ${pxToRem(8)};
+  right: ${8 / 16}rem;
 
   svg {
-    width: ${pxToRem(10)};
+    width: ${10 / 16}rem;
-    height: ${pxToRem(10)};
+    height: ${10 / 16}rem;
 
     path {
       fill: ${({ theme }) => theme.colors.primary600};
@@ -34,8 +33,8 @@ const CloseButton = styled(Box)`
 `;
 
 const ComponentBox = styled(Flex)`
-  width: ${pxToRem(140)};
+  width: ${140 / 16}rem;
-  height: ${pxToRem(80)};
+  height: ${80 / 16}rem;
   position: relative;
   border: 1px solid ${({ theme }) => theme.colors.neutral200};
   background: ${({ theme }) => theme.colors.neutral100};

packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/ContentTypeBuilderNav.tsx

@@ -9,7 +9,6 @@ import {
   SubNavSection,
   SubNavSections,
 } from '@strapi/design-system/v2';
-import { pxToRem } from '@strapi/helper-plugin';
 import { Plus } from '@strapi/icons';
 import upperFirst from 'lodash/upperFirst';
 import { useIntl } from 'react-intl';
@@ -89,7 +88,7 @@ export const ContentTypeBuilderNav = () => {
               <Box paddingLeft={7}>
                 <TextButton
                   onClick={section.customLink.onClick}
-                  startIcon={<Icon as={Plus} width={pxToRem(8)} height={pxToRem(8)} />}
+                  startIcon={<Icon as={Plus} width={`${8 / 16}rem`} height={`${8 / 16}rem`} />}
                   marginTop={2}
                 >
                   {formatMessage({

packages/core/content-type-builder/admin/src/components/DynamicZoneList.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 
 import { Box, Flex, Typography } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
 import { Plus } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
@@ -24,10 +23,10 @@ interface DynamicZoneListProps {
 }
 
 const StyledAddIcon = styled(Plus)`
-  width: ${pxToRem(32)};
+  width: ${32 / 16}rem;
-  height: ${pxToRem(32)};
+  height: ${32 / 16}rem;
-  padding: ${pxToRem(9)};
+  padding: ${9 / 16}rem;
-  border-radius: ${pxToRem(64)};
+  border-radius: ${64 / 16}rem;
   background: ${({ theme }) => theme.colors.primary100};
   path {
     fill: ${({ theme }) => theme.colors.primary600};
@@ -35,7 +34,7 @@ const StyledAddIcon = styled(Plus)`
 `;
 
 const FixedBox = styled(Box)`
-  height: ${pxToRem(90)};
+  height: ${90 / 16}rem;
   position: absolute;
   width: 100%;
   top: 0;
@@ -48,13 +47,13 @@ const ScrollableStack = styled(Flex)`
 `;
 
 const ComponentContentBox = styled(Box)`
-  padding-top: ${pxToRem(90)};
+  padding-top: ${90 / 16}rem;
 `;
 
 const ComponentStack = styled(Flex)`
   flex-shrink: 0;
-  width: ${pxToRem(140)};
+  width: ${140 / 16}rem;
-  height: ${pxToRem(80)};
+  height: ${80 / 16}rem;
   justify-content: center;
   align-items: center;
 `;

packages/core/content-type-builder/admin/src/components/GenericInputs.tsx

@@ -46,7 +46,6 @@ interface CustomInputProps<TAttribute extends Attribute.Any>
   ref?: React.Ref<HTMLElement>;
   hint?: string | React.JSX.Element | (string | React.JSX.Element)[];
 }
-const pxToRem = (px: number) => `${px / 16}rem`;
 
 interface GenericInputProps<TAttribute extends Attribute.Any = Attribute.Any> {
   attribute?: TAttribute;
@@ -228,8 +227,8 @@ const GenericInput = ({
                 : json;
             onChange({ target: { name, value } }, false);
           }}
-          minHeight={pxToRem(252)}
+          minHeight={`${252 / 16}rem`}
-          maxHeight={pxToRem(504)}
+          maxHeight={`${504 / 16}rem`}
         />
       );
     }

packages/core/content-type-builder/admin/src/components/ListRow.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 
 import { Box, Flex, IconButton, Typography } from '@strapi/design-system';
-import { onRowClick, pxToRem, stopPropagation } from '@strapi/helper-plugin';
+import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
 import { Lock, Pencil, Trash } from '@strapi/icons';
 import get from 'lodash/get';
 import { useIntl } from 'react-intl';
@@ -184,7 +184,7 @@ export const ListRow = memo(
             we need to reserve the same space, otherwise the height of the
             row might collapse, leading to bad positioned curve icons
           */
-            <Box height={pxToRem(32)} />
+            <Box height={`${32 / 16}rem`} />
           )}
         </td>
       </BoxWrapper>

packages/core/content-type-builder/admin/src/components/Tr.tsx

@@ -1,4 +1,3 @@
-import { pxToRem } from '@strapi/helper-plugin';
 import styled from 'styled-components';
 
 interface TrProps {
@@ -18,12 +17,12 @@ export const Tr = styled.tr<TrProps>`
     }
 
     > td:first-of-type {
-      padding: 0 0 0 ${pxToRem(20)};
+      padding: 0 0 0 ${20 / 16}rem;
       position: relative;
 
       &::before {
         content: '';
-        width: ${pxToRem(4)};
+        width: ${4 / 16}rem;
         height: calc(100% - 40px);
         position: absolute;
         top: -7px;

packages/core/helper-plugin/MIGRATION_GUIDE.md

@@ -482,6 +482,22 @@ This util has been removed and not replaced. If you feel like you need this util
 
 This util has been removed and not replaced. If you feel like you need this util, please open an issue on the Strapi repository to discuss your usecase.
 
+### pxToRem
+
+This util has been removed and not replaced. You should use directly this code in place of the pxToRem:
+
+```tsx
+// Before
+pxToRem(
+  32
+) // After
+`${32 / 16}rem`;
+// or
+('2rem');
+```
+
+If you feel like you need this util, please open an issue on the Strapi repository to discuss your usecase.
+
 ### setHexOpacity
 
 This util has been removed and not replaced, use the native CSS opacity property instead. If you feel like you need this util, please open an issue on the Strapi repository to discuss your usecase.

packages/core/helper-plugin/src/features/AutoReloadOverlayBlocker.tsx

@@ -7,8 +7,6 @@ import { createPortal } from 'react-dom';
 import { MessageDescriptor, useIntl } from 'react-intl';
 import styled, { keyframes } from 'styled-components';
 
-import { pxToRem } from '../utils/pxToRem';
-
 /**
  * TODO: realistically a lot of this logic is isolated to the `core/admin` package.
  * However, we want to expose the `useAutoReloadOverlayBlocker` hook to the plugins.
@@ -147,12 +145,12 @@ const Blocker = ({ displayedIcon, description, title, isOpen }: BlockerProps) =>
           </Flex>
           {displayedIcon === 'reload' && (
             <IconBox padding={6} background="primary100" borderColor="primary200">
-              <LoaderReload width={pxToRem(36)} height={pxToRem(36)} />
+              <LoaderReload width={`${36 / 16}rem`} height={`${36 / 16}rem`} />
             </IconBox>
           )}
           {displayedIcon === 'time' && (
             <IconBox padding={6} background="primary100" borderColor="primary200">
-              <Clock width={pxToRem(40)} height={pxToRem(40)} />
+              <Clock width={`${40 / 16}rem`} height={`${40 / 16}rem`} />
             </IconBox>
           )}
           <Box marginTop={2}>
@@ -191,7 +189,7 @@ const Overlay = styled(Flex)`
   left: 0;
   /* TODO: set this up in the theme for consistence z-index values */
   z-index: 1140;
-  padding-top: ${pxToRem(160)};
+  padding-top: ${160 / 16}rem;
 
   & > * {
     position: relative;

packages/core/helper-plugin/src/index.ts

@@ -51,7 +51,6 @@ export * from './utils/hasPermissions';
 export * from './utils/normalizeAPIError';
 export * from './utils/prefixFileUrlWithBackendUrl';
 export * from './utils/prefixPluginTranslations';
-export * from './utils/pxToRem';
 export * from './utils/request';
 export * from './utils/stopPropagation';
 export * from './utils/translatedErrors';

packages/core/helper-plugin/src/utils/pxToRem.stories.mdx

@@ -1,27 +0,0 @@
-{/* - pxToRem.stories.mdx - */}
-
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="utils/pxToRem" />
-
-# pxToRem
-
-Converts px to rem.
-
-## Usage
-
-```js
-import { pxToRem } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system';
-import styled from 'styled-components'
-
-const StyledBox = styled(Box)`
-  width: ${pxToRem}
-`
-
-const HomePage = () =>
-  return (
-    <StyledBox>I'm a sized box</StyledBox>
-  );
-};
-```

packages/core/helper-plugin/src/utils/pxToRem.ts

@@ -1,3 +0,0 @@
-const pxToRem = (px: number) => `${px / 16}rem`;
-
-export { pxToRem };

packages/core/helper-plugin/src/utils/tests/pxToRem.test.ts

@@ -1,17 +0,0 @@
-import { pxToRem } from '../pxToRem';
-
-describe('HELPER_PLUGIN | utils | pxToRem', () => {
-  it('should return 2rem if data is 32', () => {
-    const data = 32;
-    const expected = '2rem';
-
-    expect(pxToRem(data)).toEqual(expected);
-  });
-
-  it('should return 1rem if data is 16', () => {
-    const data = 16;
-    const expected = '1rem';
-
-    expect(pxToRem(data)).toEqual(expected);
-  });
-});

packages/core/upload/admin/src/components/AssetCard/DocAssetCard.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { Flex } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
 import { File, FilePdf } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
@@ -24,7 +23,7 @@ export const DocAssetCard = ({ name, extension, size, ...restProps }) => {
     <AssetCardBase name={name} extension={extension} {...restProps} variant="Doc">
       <CardAsset
         width="100%"
-        height={size === 'S' ? pxToRem(88) : pxToRem(164)}
+        height={size === 'S' ? `${88 / 16}rem` : `${164 / 16}rem`}
         justifyContent="center"
       >
         <IconWrapper>

packages/core/upload/admin/src/components/AssetDialog/index.jsx

@@ -17,7 +17,7 @@ import {
   Tabs,
   Typography,
 } from '@strapi/design-system';
-import { pxToRem, useSelectionState } from '@strapi/helper-plugin';
+import { useSelectionState } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
@@ -39,7 +39,7 @@ import { SelectedStep } from './SelectedStep';
 
 const LoadingBody = styled(Flex)`
   /* 80px are coming from the Tabs component that is not included in the ModalBody */
-  min-height: ${() => `calc(60vh + ${pxToRem(80)})`};
+  min-height: ${() => `calc(60vh + ${80 / 16}rem)`};
 `;
 
 export const AssetDialog = ({

packages/core/upload/admin/src/components/EditAssetDialog/index.jsx

@@ -19,7 +19,7 @@ import {
   TextInput,
   VisuallyHidden,
 } from '@strapi/design-system';
-import { pxToRem, useTracking } from '@strapi/helper-plugin';
+import { useTracking } from '@strapi/helper-plugin';
 import { Form, Formik } from 'formik';
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
@@ -41,7 +41,7 @@ import { ReplaceMediaButton } from './ReplaceMediaButton';
 
 const LoadingBody = styled(Flex)`
   /* 80px are coming from the Tabs component that is not included in the ModalBody */
-  min-height: ${() => `calc(60vh + ${pxToRem(80)})`};
+  min-height: ${() => `calc(60vh + ${80 / 16}rem)`};
 `;
 
 const fileInfoSchema = yup.object({

packages/core/upload/admin/src/components/FolderCard/FolderCard/FolderCard.jsx

@@ -1,7 +1,6 @@
 import React, { forwardRef, useMemo } from 'react';
 
 import { Box, CardAction, Flex } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
 import { Folder } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
@@ -83,7 +82,7 @@ export const FolderCard = forwardRef(
               paddingRight={3}
               paddingTop={2}
             >
-              <StyledFolder width={pxToRem(24)} height={pxToRem(24)} />
+              <StyledFolder width={`${24 / 16}rem`} height={`${24 / 16}rem`} />
             </Box>
 
             {children}

packages/core/upload/admin/src/components/SelectTree/Option.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { Flex, Icon, Typography } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
 import { ChevronDown, ChevronUp } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
@@ -10,8 +9,8 @@ import styled from 'styled-components';
 
 const ToggleButton = styled(Flex)`
   align-self: flex-end;
-  height: ${pxToRem(22)};
+  height: ${22 / 16}rem;
-  width: ${pxToRem(28)};
+  width: ${28 / 16}rem;
 
   &:hover,
   &:focus {
@@ -52,7 +51,11 @@ const Option = ({ children, data, selectProps, ...props }) => {
               onOptionToggle(value);
             }}
           >
-            <Icon width={pxToRem(14)} color="neutral500" as={isOpen ? ChevronUp : ChevronDown} />
+            <Icon
+              width={`${14 / 16}rem`}
+              color="neutral500"
+              as={isOpen ? ChevronUp : ChevronDown}
+            />
           </ToggleButton>
         )}
       </Flex>

packages/core/upload/admin/src/components/TableList/PreviewCell.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Avatar, Box, Icon, Initials } from '@strapi/design-system';
-import { prefixFileUrlWithBackendUrl, pxToRem } from '@strapi/helper-plugin';
+import { prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin';
 import { Folder } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
@@ -29,7 +29,7 @@ export const PreviewCell = ({ type, content }) => {
   if (type === 'folder') {
     return (
       <Initials background="secondary100" textColor="secondary600">
-        <Icon color="secondary500" width={pxToRem(16)} height={pxToRem(16)} as={Folder} />
+        <Icon color="secondary500" width={`${16 / 16}rem`} height={`${16 / 16}rem`} as={Folder} />
       </Initials>
     );
   }

packages/plugins/users-permissions/admin/src/pages/Roles/pages/ListPage/components/TableBody.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Flex, IconButton, Link, Tbody, Td, Tr, Typography } from '@strapi/design-system';
-import { CheckPermissions, onRowClick, pxToRem, stopPropagation } from '@strapi/helper-plugin';
+import { CheckPermissions, onRowClick, stopPropagation } from '@strapi/helper-plugin';
 import { Pencil, Trash } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
@@ -10,15 +10,15 @@ import styled from 'styled-components';
 
 const EditLink = styled(Link)`
   align-items: center;
-  height: ${pxToRem(32)};
+  height: ${32 / 16}rem;
   display: flex;
   justify-content: center;
   padding: ${({ theme }) => `${theme.spaces[2]}}`};
-  width: ${pxToRem(32)};
+  width: ${32 / 16}rem;
 
   svg {
-    height: ${pxToRem(12)};
+    height: ${12 / 16}rem;
-    width: ${pxToRem(12)};
+    width: ${12 / 16}rem;
 
     path {
       fill: ${({ theme }) => theme.colors.neutral500};