Update phosphor package

package.json

@@ -39,7 +39,7 @@
   "size-limit": [
     {
       "path": "dist/boemly.cjs.production.min.js",
-      "limit": "1.2 MB"
+      "limit": "1.8 MB"
     },
     {
       "path": "dist/boemly.esm.js",
@@ -84,9 +84,9 @@
     "@chakra-ui/react": "^2.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
+    "@phosphor-icons/react": "^2.0.14",
     "framer-motion": "^7.3.6",
     "markdown-to-jsx": "^7.1.6",
-    "phosphor-react": "^1.4.0",
     "react-datepicker": "^4.8.0",
     "react-syntax-highlighter": "^15.5.0",
     "react-use": "^17.4.0"

src/components/BoemlyAlert/BoemlyAlert.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { Alert, CloseButton, Flex, Text, useToken } from '@chakra-ui/react';
-import { CheckCircle, Info, WarningCircle, WarningOctagon } from 'phosphor-react';
+import { CheckCircle, Info, WarningCircle, WarningOctagon } from '@phosphor-icons/react';
 
 export interface BoemlyAlertProps {
   status?: 'success' | 'error' | 'warning' | 'info';

src/components/BoemlyFormControl/BoemlyFormControl.stories.tsx

@@ -8,7 +8,7 @@ import {
   InputRightAddon,
   InputRightElement,
 } from '@chakra-ui/react';
-import { Heart } from 'phosphor-react';
+import { Heart } from '@phosphor-icons/react';
 import { BoemlyFormControl } from './BoemlyFormControl';
 import { INPUT_SIZES } from '../../constants/inputSizes';
 

src/components/BoemlyFormControl/BoemlyFormControl.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { InputLeftElement, InputRightElement } from '@chakra-ui/react';
-import { Heart } from 'phosphor-react';
+import { Heart } from '@phosphor-icons/react';
 import { render, screen } from '../../test/testUtils';
 import { BoemlyFormControlProps } from './BoemlyFormControl';
 import { BoemlyFormControl } from '.';

src/components/BoemlyFormControl/BoemlyFormControl.tsx

@@ -25,7 +25,7 @@ import {
   useMediaQuery,
   useToken,
 } from '@chakra-ui/react';
-import { CaretDown, CaretUp, Check, WarningOctagon } from 'phosphor-react';
+import { CaretDown, CaretUp, Check, WarningOctagon } from '@phosphor-icons/react';
 import { DatePicker, DatePickerProps } from '../DatePicker/DatePicker';
 import InputSize from '../../types/InputSize';
 import { SliderProps } from '../Slider/Slider';

src/components/BoemlyList/BoemlyList.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
-import { Heart } from 'phosphor-react';
+import { Heart } from '@phosphor-icons/react';
 import { BoemlyList } from './BoemlyList';
 import { TEXT_SIZES } from '../../constants/textSizes';
 

src/components/BoemlyList/BoemlyList.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Heart } from 'phosphor-react';
+import { Heart } from '@phosphor-icons/react';
 import { render, screen } from '../../test/testUtils';
 import { BoemlyListProps } from './BoemlyList';
 import { BoemlyList } from '.';

src/components/BoemlySteps/BoemlySteps.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Flex, Text, useToken, Stack } from '@chakra-ui/react';
 import type { StackDirection } from '@chakra-ui/react';
-import { Check } from 'phosphor-react';
+import { Check } from '@phosphor-icons/react';
 import StepDivider from './StepDivider';
 
 export interface BoemlyStepsProps {

src/components/BoemlyThemeProvider/BoemlyThemeProvider.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChakraProvider, Colors } from '@chakra-ui/react';
-import { IconContext } from 'phosphor-react';
+import { IconContext } from '@phosphor-icons/react';
 import { Global } from '@emotion/react';
 import getTheme from '../../utils/getTheme';
 import iconCustomizations from '../../constants/iconCustomizations';

src/components/ContactArea/ContactArea.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Button, Divider, Heading, Text } from '@chakra-ui/react';
-import { ArrowRight } from 'phosphor-react';
+import { ArrowRight } from '@phosphor-icons/react';
 import { AvatarWithName, AvatarWithNameProps } from '../AvatarWithName/AvatarWithName';
 import { Container } from '../Container';
 

src/components/DatePicker/DatePicker.tsx

@@ -11,7 +11,7 @@ import {
   Select,
   Spacer,
 } from '@chakra-ui/react';
-import { CalendarBlank, CaretLeft, CaretRight } from 'phosphor-react';
+import { CalendarBlank, CaretLeft, CaretRight } from '@phosphor-icons/react';
 import React, { useMemo, useRef } from 'react';
 import ReactDatePicker, { registerLocale } from 'react-datepicker';
 import de from 'date-fns/locale/de';

src/components/Expandable/Expandable.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
-import { Heart } from 'phosphor-react';
+import { Heart } from '@phosphor-icons/react';
 import { Heading, Tag, useDisclosure } from '@chakra-ui/react';
 import { Expandable } from './Expandable';
 

src/components/Expandable/Expandable.tsx

@@ -1,6 +1,6 @@
 import { Box, Heading, IconButton, Flex, Text, Spinner } from '@chakra-ui/react';
 import { motion, useAnimation } from 'framer-motion';
-import { CaretDown, CaretUp } from 'phosphor-react';
+import { CaretDown, CaretUp } from '@phosphor-icons/react';
 import React, { useEffect } from 'react';
 import { Container } from '../Container';
 

src/components/PortfolioCard/PortfolioCard.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Center, Divider, Flex, Heading, SimpleGrid, Text } from '@chakra-ui/react';
 import { css } from '@emotion/react';
-import { Heart } from 'phosphor-react';
+import { Heart } from '@phosphor-icons/react';
 import React, { ReactNode } from 'react';
 
 export interface PortfolioCardProps {

src/components/ProjectCard/ProjectCard.tsx

@@ -1,6 +1,6 @@
 import { Box, Divider, Heading, SimpleGrid, Text, useToken } from '@chakra-ui/react';
 import { css } from '@emotion/react';
-import { ArrowsOutSimple, MapPin } from 'phosphor-react';
+import { ArrowsOutSimple, MapPin } from '@phosphor-icons/react';
 import React, { ReactNode } from 'react';
 
 export interface ProjectCardProps {

src/components/RichText/RichText.stories.tsx

@@ -3,7 +3,7 @@ import { StoryFn, Meta } from '@storybook/react';
 
 import { RichText } from './RichText';
 import { storybookCoverUrl } from '../../test/storybookMedia';
-import { Heart } from 'phosphor-react';
+import { Heart } from '@phosphor-icons/react';
 
 export default {
   title: 'components/RichText',

src/components/TextCardWithIcon/TextCardWithIcon.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
 import { TextCardWithIcon } from './TextCardWithIcon';
-import { Heart } from 'phosphor-react';
+import { Heart } from '@phosphor-icons/react';
 
 export default {
   title: 'components/TextCardWithIcon',

src/constants/componentCustomizations.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CaretDown } from 'phosphor-react';
+import { CaretDown } from '@phosphor-icons/react';
 
 export const CustomizedHeading = {
   baseStyle: {

src/constants/iconCustomizations.ts

@@ -1,4 +1,4 @@
-import { IconProps } from 'phosphor-react';
+import { IconProps } from '@phosphor-icons/react';
 import { COLORS } from './customizations';
 
 const iconCustomizations: IconProps = {

src/stories/components/Button.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 
 import { Button } from '../..';
-import { Heart } from 'phosphor-react';
+import { Heart } from '@phosphor-icons/react';
 import { COLOR_SCHEMES } from '../../constants/colorSchemes';
 import { BUTTON_VARIANTS } from '../../constants/buttonVariants';
 

src/stories/components/IconButton.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 
 import { IconButton } from '../..';
-import { Heart } from 'phosphor-react';
+import { Heart } from '@phosphor-icons/react';
 import { COLOR_SCHEMES } from '../../constants/colorSchemes';
 import { BUTTON_VARIANTS } from '../../constants/buttonVariants';