@homefile/components-v2 2.6.0 → 2.6.1

package/dist/stories/appBar/UserProfile.stories.js

@@ -9,7 +9,7 @@ export default {
         firstName: 'John',
         userName: 'John Doe',
         avatarUrl: '',
-        menuItems: menuMock
+        menuItems: menuMock,
     },
 };
 export const UserProfileComponent = (args) => (_jsx(Box, { p: "base", bg: "white", w: "fit-content", children: _jsx(UserProfile, Object.assign({}, args)) }));

package/dist/stories/badge/NewBadge.stories.js

@@ -10,5 +10,5 @@ export const NewBadgeComponent = (args) => {
 };
 NewBadgeComponent.args = {
     bg: 'white',
-    color: 'black'
+    color: 'black',
 };

package/dist/stories/folderPanel/folderDetails/FilesUploader.stories.js

@@ -18,7 +18,7 @@ FilesUploaderWithoutFiles.args = {
     totalShowing: 0,
     initialHeight: '100%',
 };
-export const FilesUploaderWithFiles = (args) => _jsx(FilesUploader, Object.assign({}, args));
+export const FilesUploaderWithFiles = (args) => (_jsx(FilesUploader, Object.assign({}, args)));
 FilesUploaderWithFiles.args = {
     totalFiles: 2,
     totalShowing: 2,

package/dist/stories/homeBoard/Files.stories.js

@@ -10,6 +10,6 @@ export const FilesComponent = (args) => {
     return (_jsx(Flex, { gap: "base", p: "base", bg: "white", children: _jsx(Files, Object.assign({}, args)) }));
 };
 FilesComponent.args = {
-    panelSize: "md",
-    files: fileDB
+    panelSize: 'md',
+    files: fileDB,
 };

package/dist/stories/icons/CustomIcon.stories.js

@@ -10,5 +10,5 @@ export const CustomIconComponent = (args) => {
 };
 CustomIconComponent.args = {
     type: Close,
-    size: 8
+    size: 8,
 };

package/dist/stories/myProfile/payment/NewCreditCard/NewCreditCard.stories.js

@@ -6,5 +6,5 @@ export default {
     component: NewCreditCard,
 };
 export const NewCreditCardComponent = (props) => {
-    return (_jsx(Box, { w: ['full', 'md'], p: ["0", "base"], bg: "lightBlue.1", children: _jsx(NewCreditCard, Object.assign({}, props)) }));
+    return (_jsx(Box, { w: ['full', 'md'], p: ['0', 'base'], bg: "lightBlue.1", children: _jsx(NewCreditCard, Object.assign({}, props)) }));
 };

package/dist/stories/overlay/index.stories.js

@@ -6,7 +6,7 @@ export default {
     component: Overlay,
 };
 export const OverlayComponent = (args) => {
-    return (_jsxs(Center, { w: ["full", "500px"], h: "10rem", bg: "lightBlue.4", children: [_jsx(Overlay, Object.assign({ position: "absolute", w: "inherit", h: "inherit" }, args)), _jsx(Text, { children: "Component behind overlay" })] }));
+    return (_jsxs(Center, { w: ['full', '500px'], h: "10rem", bg: "lightBlue.4", children: [_jsx(Overlay, Object.assign({ position: "absolute", w: "inherit", h: "inherit" }, args)), _jsx(Text, { children: "Component behind overlay" })] }));
 };
 OverlayComponent.args = {
     showOverlay: true,

package/dist/stories/partner/ShortPartnerTile.stories.js

@@ -15,7 +15,7 @@ export default {
         partnerName: 'Audrey Scheck',
         socialLinks: socialLinksMock,
         websiteUrl: 'http://www.audreyscheckdesign.com',
-        _id: "1"
+        _id: '1',
     },
     argTypes: {
         menuItems: {
@@ -24,5 +24,5 @@ export default {
     },
 };
 export const ShortPartnerTileComponent = (args) => {
-    return _jsx(Flex, { maxW: '380px', children: _jsx(ShortPartnerTile, Object.assign({}, args)) });
+    return (_jsx(Flex, { maxW: '380px', children: _jsx(ShortPartnerTile, Object.assign({}, args)) }));
 };

package/dist/stories/receipts/displayReceipts/ItemReceipt.stories.js

@@ -7,6 +7,6 @@ export default {
     component: ItemReceipt,
 };
 export const ItemReceiptComponent = (args) => {
-    return (_jsx(Box, { p: ["0", "1rem"], w: ['full', '500px'], children: _jsx(ItemReceipt, Object.assign({}, args)) }));
+    return (_jsx(Box, { p: ['0', '1rem'], w: ['full', '500px'], children: _jsx(ItemReceipt, Object.assign({}, args)) }));
 };
 ItemReceiptComponent.args = Object.assign({ menuItems: [menuMock[0]] }, receiptsReceivedMock[0]);

package/dist/stories/receipts/displayReceipts/itemReceipts.stories.js

@@ -7,7 +7,7 @@ export default {
     component: ItemReceipts,
 };
 export const ItemReceiptsComponent = (args) => {
-    return (_jsx(Wrap, { p: ["0", "1rem"], w: ["100%", "500px"], children: _jsx(ItemReceipts, Object.assign({}, args)) }));
+    return (_jsx(Wrap, { p: ['0', '1rem'], w: ['100%', '500px'], children: _jsx(ItemReceipts, Object.assign({}, args)) }));
 };
 ItemReceiptsComponent.args = {
     menuItems: [menuMock[0]],

package/dist/stories/receipts/receipt/ReceiptFilters.stories.js

@@ -6,7 +6,7 @@ export default {
     component: ReceiptFilters,
 };
 export const ReceiptFiltersComponent = (args) => {
-    return (_jsx(Box, { p: ["0", "base"], bg: "white", w: ['full', 'fit-content'], children: _jsx(ReceiptFilters, Object.assign({}, args)) }));
+    return (_jsx(Box, { p: ['0', 'base'], bg: "white", w: ['full', 'fit-content'], children: _jsx(ReceiptFilters, Object.assign({}, args)) }));
 };
 ReceiptFiltersComponent.args = {
     leftOptions: ['Last 30 days', 'Last 60 days', 'Last 90 days'],

package/dist/stories/sendDocument/DocumentNameHeader.stories.js

@@ -6,7 +6,7 @@ export default {
     component: DocumentNameHeader,
 };
 export const DocumentNameHeaderComponent = (args) => {
-    return (_jsx(Box, { w: ["full", "60%"], bg: "white", p: "base", children: _jsx(DocumentNameHeader, Object.assign({}, args)) }));
+    return (_jsx(Box, { w: ['full', '60%'], bg: "white", p: "base", children: _jsx(DocumentNameHeader, Object.assign({}, args)) }));
 };
 DocumentNameHeaderComponent.args = {
     value: 'Progress Report  - Jan 12-16 2022',

package/dist/stories/sendDocument/InputOrText.stories.js

@@ -6,7 +6,7 @@ export default {
     component: InputOrText,
 };
 export const InputOrTextComponent = (args) => {
-    return (_jsx(Box, { w: ["full", "60%"], bg: "white", p: "base", children: _jsx(InputOrText, Object.assign({}, args)) }));
+    return (_jsx(Box, { w: ['full', '60%'], bg: "white", p: "base", children: _jsx(InputOrText, Object.assign({}, args)) }));
 };
 InputOrTextComponent.args = {
     value: 'Progress Report  - Jan 12-16 2022',

package/dist/stories/sendDocument/RecipientForm.stories.js

@@ -6,5 +6,5 @@ export default {
     component: RecipientForm,
 };
 export const RecipientFormComponent = (args) => {
-    return (_jsx(Flex, { justify: "flex-end", children: _jsx(Box, { w: ["full", "fit-content"], bg: "white", p: "base", children: _jsx(RecipientForm, Object.assign({}, args)) }) }));
+    return (_jsx(Flex, { justify: "flex-end", children: _jsx(Box, { w: ['full', 'fit-content'], bg: "white", p: "base", children: _jsx(RecipientForm, Object.assign({}, args)) }) }));
 };

package/dist/stories/sendDocument/SendCommunication.stories.js

@@ -7,7 +7,7 @@ export default {
     component: SendCommunication,
 };
 export const SendCommunicationComponent = (args) => {
-    return (_jsx(Box, { w: ["full", "25rem"], children: _jsx(SendCommunication, Object.assign({}, args)) }));
+    return (_jsx(Box, { w: ['full', '25rem'], children: _jsx(SendCommunication, Object.assign({}, args)) }));
 };
 SendCommunicationComponent.args = {
     documentList: documents,

package/dist/stories/subscription/HomesDropdown.stories.js

@@ -26,7 +26,7 @@ export default {
         totalStorage: 756,
     },
     decorators: [
-        (Story) => (_jsx(Box, { w: ["full", "30rem"], bg: "lightBlue.1", children: _jsx(Story, {}) })),
+        (Story) => (_jsx(Box, { w: ['full', '30rem'], bg: "lightBlue.1", children: _jsx(Story, {}) })),
     ],
 };
 export const HomesDropdownComponent = (args) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",
@@ -23,20 +23,18 @@
   ],
   "devDependencies": {
     "@chakra-ui/storybook-addon": "^5.2.5",
-    "@chromatic-com/storybook": "^2.0.2",
+    "@chromatic-com/storybook": "^3.2.2",
     "@faker-js/faker": "^9.0.3",
-    "@storybook/addon-a11y": "^8.3.5",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-interactions": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
-    "@storybook/addon-onboarding": "^8.3.5",
-    "@storybook/addon-viewport": "^8.3.5",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/builder-vite": "^8.3.5",
-    "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^8.3.5",
-    "@storybook/react-vite": "^8.3.5",
-    "@storybook/test": "^8.3.5",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/addon-viewport": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
     "@types/node": "^22.7.6",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
@@ -49,8 +47,8 @@
     "json-loader": "^0.5.7",
     "rimraf": "^6.0.1",
     "semantic-release": "^24.1.2",
-    "storybook": "^8.3.5",
-    "storybook-react-i18next": "^3.1.7",
+    "storybook": "^8.4.7",
+    "storybook-react-i18next": "^3.1.8",
     "tsconfig-replace-paths": "^0.0.14",
     "tscpaths": "^0.0.9",
     "typescript": "^5.6.3",

package/src/stories/addItemWizard/flows/FlowCard.stories.tsx

@@ -18,4 +18,4 @@ FlowCardComponent.args = {
   icon: WizardQuick,
   onClick: () => null,
   title: 'Title',
-}
+}

package/src/stories/addItemWizard/flows/FlowStep.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta,  } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { FlowStep } from '@/components'
 import { FlowStepI } from '@/interfaces'
 
@@ -10,4 +10,3 @@ export default {
 export const FlowStepComponent = (args: FlowStepI) => {
   return <FlowStep {...args} />
 }
-

package/src/stories/addItemWizard/mediaDetails/MediaDetailsStep.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta,  } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { Box } from '@chakra-ui/react'
 import { AddItemContainer, RightPanel, MediaDetailsStep } from '@/components'
 import { images } from '@/helpers'
@@ -52,4 +52,4 @@ MediaDetailsStepWithImage.args = {
   currentStep: 1,
   totalSteps: 3,
   images,
-}
+}

package/src/stories/addItemWizard/wellDone/WellDone.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta,  } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { AddItemContainer, RightPanel, WellDone } from '@/components'
 
 export default {
@@ -15,5 +15,3 @@ export const WellDoneComponent: typeof WellDone = (args) => {
     </RightPanel>
   )
 }
-
-

package/src/stories/appBar/HomefileLogo.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta,  } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { HomefileLogo } from '@/components'
 import { Box } from '@chakra-ui/react'
 import { HomefileLogoI } from '@/interfaces'
@@ -13,5 +13,3 @@ export const HomefileLogoComponent = (args: HomefileLogoI) => (
     <HomefileLogo {...args} />
   </Box>
 )
-
-

package/src/stories/appBar/StorageUsed.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta,  } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { StorageUsed } from '@/components'
 import { Box } from '@chakra-ui/react'
 import { StorageUsedI } from '@/interfaces'
@@ -17,5 +17,3 @@ export const StorageUsedComponent = (args: StorageUsedI) => (
     <StorageUsed {...args} />
   </Box>
 )
-
-

package/src/stories/appBar/TourButton.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta,  } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { TourButton } from '@/components'
 import { Box } from '@chakra-ui/react'
 import { TourButtonI } from '@/interfaces'
@@ -16,4 +16,3 @@ export const TourButtonComponent = (args: TourButtonI) => (
     <TourButton {...args} />
   </Box>
 )
-

package/src/stories/appBar/TutorialsButton.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta,  } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { TutorialsButton } from '@/components'
 import { Box } from '@chakra-ui/react'
 import { TutorialsButtonI } from '@/interfaces'
@@ -13,4 +13,3 @@ export const TutorialsButtonComponent = (args: TutorialsButtonI) => (
     <TutorialsButton {...args} />
   </Box>
 )
-

package/src/stories/appBar/UserProfile.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta,  } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { UserProfile } from '@/components'
 import { Box } from '@chakra-ui/react'
 import { menuMock } from '@/mocks'
@@ -11,7 +11,7 @@ export default {
     firstName: 'John',
     userName: 'John Doe',
     avatarUrl: '',
-    menuItems: menuMock
+    menuItems: menuMock,
   },
 } as Meta<UserProfileI>
 
@@ -20,5 +20,3 @@ export const UserProfileComponent = (args: UserProfileI) => (
     <UserProfile {...args} />
   </Box>
 )
-
-

package/src/stories/badge/LetterBadge.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta,  } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { LetterBadge } from '@/components'
 import { Box } from '@chakra-ui/react'
 import { LetterBadgeI } from '@/interfaces'

package/src/stories/badge/NewBadge.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta,  } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { NewBadge } from '@/components'
 import { Box } from '@chakra-ui/react'
 import { NewBadgeI } from '@/interfaces'
@@ -18,5 +18,5 @@ export const NewBadgeComponent = (args: NewBadgeI) => {
 
 NewBadgeComponent.args = {
   bg: 'white',
-  color: 'black'
+  color: 'black',
 }

package/src/stories/badge/NumberBadge.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta,  } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { NumberBadge } from '@/components'
 import { Box } from '@chakra-ui/react'
 import { NumberBadgeI } from '@/interfaces'

package/src/stories/badge/TextBadge.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta,  } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { TextBadge } from '@/components'
 import { TextBadgeI } from '@/interfaces'
 

package/src/stories/folderPanel/folderDetails/DisplayOptions.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta,  } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { Box } from '@chakra-ui/react'
 import { DisplayOptions } from '@/components'
 import { DisplayOptionsI } from '@/interfaces'
@@ -18,4 +18,3 @@ export const DisplayOptionsComponent = (args: DisplayOptionsI) => {
     </Box>
   )
 }
-

package/src/stories/folderPanel/folderDetails/FilesUploader.stories.tsx

@@ -27,11 +27,13 @@ FilesUploaderWithoutFiles.args = {
   initialHeight: '100%',
 }
 
-export const FilesUploaderWithFiles = (args: FilesUploaderI) => <FilesUploader {...args} />
+export const FilesUploaderWithFiles = (args: FilesUploaderI) => (
+  <FilesUploader {...args} />
+)
 
-  FilesUploaderWithFiles.args = {
-    totalFiles: 2,
-    totalShowing: 2,
-    displayType: 'grid',
-    onUpload: action('handleUpload'),
-  }
+FilesUploaderWithFiles.args = {
+  totalFiles: 2,
+  totalShowing: 2,
+  displayType: 'grid',
+  onUpload: action('handleUpload'),
+}

package/src/stories/folderPanel/folderDetails/FolderDetailBody.stories.tsx

@@ -36,8 +36,9 @@ export default {
 export const FolderDetailBodyComponent = (args: FolderDetailBodyI) => {
   const [showModal, setShowModal] = useState<boolean>(false)
 
-  const [currentType, setCurrentType] =
-    useState<'list' | 'grid' | 'item'>('grid')
+  const [currentType, setCurrentType] = useState<'list' | 'grid' | 'item'>(
+    'grid'
+  )
 
   const handleCloseModal = () => setShowModal(false)
 

package/src/stories/folderPanel/folderDetails/FolderDetailPanel.stories.tsx

@@ -33,8 +33,9 @@ export const FolderDetailPanel = () => {
 
   const [showModal, setShowModal] = useState<boolean>(false)
 
-  const [currentType, setCurrentType] =
-    useState<'list' | 'grid' | 'item'>('grid')
+  const [currentType, setCurrentType] = useState<'list' | 'grid' | 'item'>(
+    'grid'
+  )
 
   const handleCloseModal = () => setShowModal(false)
 

package/src/stories/homeBoard/DetailsTab.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta,  } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { Box } from '@chakra-ui/react'
 import { DetailsTab } from '@/components'
 import { DetailsTabI } from '@/interfaces'
@@ -15,4 +15,3 @@ export const DetailsTabComponent = (args: DetailsTabI) => {
     </Box>
   )
 }
-

package/src/stories/homeBoard/Files.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta,  } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { Flex } from '@chakra-ui/react'
 import { Files } from '@/components'
 import { fileDB } from '@/helpers'
@@ -18,6 +18,6 @@ export const FilesComponent = (args: FilesI) => {
 }
 
 FilesComponent.args = {
-  panelSize: "md",
-  files: fileDB
-}
+  panelSize: 'md',
+  files: fileDB,
+}

package/src/stories/homeSummary/UpdateList.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta,  } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { Box } from '@chakra-ui/react'
 import { UpdateList } from '@/components'
 import { UpdateListI } from '@/interfaces'

package/src/stories/icons/CustomIcon.stories.tsx

@@ -18,5 +18,5 @@ export const CustomIconComponent = (args: IconsI) => {
 
 CustomIconComponent.args = {
   type: Close,
-  size: 8
+  size: 8,
 }

package/src/stories/inboxTile/MessagePanel.stories.tsx

@@ -22,8 +22,9 @@ export default {
 
 export const MessagePanelComponent = (args: MessagePanelI) => {
   const [showMessageChat, setShowMessageChat] = useState(false)
-  const [selectedMessage, setSelectedMessage] =
-    useState<InboxMessageI | undefined>(undefined)
+  const [selectedMessage, setSelectedMessage] = useState<
+    InboxMessageI | undefined
+  >(undefined)
   const handleMessageChatToggle = () => setShowMessageChat(!showMessageChat)
   return (
     <Fragment>

package/src/stories/myProfile/payment/NewCreditCard/NewCreditCard.stories.tsx

@@ -10,7 +10,7 @@ export default {
 
 export const NewCreditCardComponent = (props: NewCreditCardI) => {
   return (
-    <Box w={['full', 'md']} p={["0","base"]} bg="lightBlue.1">
+    <Box w={['full', 'md']} p={['0', 'base']} bg="lightBlue.1">
       <NewCreditCard {...props} />
     </Box>
   )

package/src/stories/overlay/index.stories.tsx

@@ -10,7 +10,7 @@ export default {
 
 export const OverlayComponent = (args: OverlayI) => {
   return (
-    <Center w={["full", "500px"]} h="10rem" bg="lightBlue.4">
+    <Center w={['full', '500px']} h="10rem" bg="lightBlue.4">
       <Overlay position="absolute" w="inherit" h="inherit" {...args} />
       <Text>Component behind overlay</Text>
     </Center>

package/src/stories/partner/ShortPartnerTile.stories.tsx

@@ -19,7 +19,7 @@ export default {
     partnerName: 'Audrey Scheck',
     socialLinks: socialLinksMock,
     websiteUrl: 'http://www.audreyscheckdesign.com',
-    _id: "1"
+    _id: '1',
   },
   argTypes: {
     menuItems: {
@@ -29,5 +29,9 @@ export default {
 } as Meta
 
 export const ShortPartnerTileComponent = (args: ShortPartnerTileI) => {
-  return <Flex maxW={'380px'}><ShortPartnerTile {...args} /></Flex>
+  return (
+    <Flex maxW={'380px'}>
+      <ShortPartnerTile {...args} />
+    </Flex>
+  )
 }

package/src/stories/partner/formTile/images/PartnerHero.stories.tsx

@@ -34,4 +34,3 @@ export const PartnerHeroComponent = (args: PartnerImageFormI) => {
     </Box>
   )
 }
-

package/src/stories/partner/formTile/images/PartnerImages.stories.tsx

@@ -40,4 +40,3 @@ export const PartnerImagesComponent = (args: PartnerImagesI) => {
     </Box>
   )
 }
-

package/src/stories/receipts/displayReceipts/ItemReceipt.stories.tsx

@@ -11,7 +11,7 @@ export default {
 
 export const ItemReceiptComponent = (args: ReceiptI) => {
   return (
-    <Box p={["0","1rem"]} w={['full', '500px']}>
+    <Box p={['0', '1rem']} w={['full', '500px']}>
       <ItemReceipt {...args} />
     </Box>
   )

package/src/stories/receipts/displayReceipts/itemReceipts.stories.tsx

@@ -11,7 +11,7 @@ export default {
 
 export const ItemReceiptsComponent = (args: ReceiptsDisplayListI) => {
   return (
-    <Wrap p={["0","1rem"]} w={["100%", "500px"]}>
+    <Wrap p={['0', '1rem']} w={['100%', '500px']}>
       <ItemReceipts {...args} />
     </Wrap>
   )

package/src/stories/receipts/receipt/ReceiptFilters.stories.tsx

@@ -10,7 +10,7 @@ export default {
 
 export const ReceiptFiltersComponent = (args: ReceiptFiltersI) => {
   return (
-    <Box p={["0","base"]} bg="white" w={['full', 'fit-content']}>
+    <Box p={['0', 'base']} bg="white" w={['full', 'fit-content']}>
       <ReceiptFilters {...args} />
     </Box>
   )

package/src/stories/rooms/RoomsMenuMobile.stories.tsx

@@ -22,4 +22,4 @@ RoomsMenuMobileComponent.parameters = {
   viewport: {
     defaultViewport: 'iphone6',
   },
-}
+}

package/src/stories/sendDocument/DocumentNameHeader.stories.tsx

@@ -10,7 +10,7 @@ export default {
 
 export const DocumentNameHeaderComponent = (args: DocumentNameHeaderI) => {
   return (
-    <Box w={["full","60%"]} bg="white" p="base">
+    <Box w={['full', '60%']} bg="white" p="base">
       <DocumentNameHeader {...args} />
     </Box>
   )

package/src/stories/sendDocument/InputOrText.stories.tsx

@@ -10,7 +10,7 @@ export default {
 
 export const InputOrTextComponent = (args: InputOrTextI) => {
   return (
-    <Box w={["full","60%"]} bg="white" p="base">
+    <Box w={['full', '60%']} bg="white" p="base">
       <InputOrText {...args} />
     </Box>
   )

package/src/stories/sendDocument/RecipientForm.stories.tsx

@@ -11,7 +11,7 @@ export default {
 export const RecipientFormComponent = (args: RecipientFormI) => {
   return (
     <Flex justify="flex-end">
-      <Box w={["full","fit-content"]} bg="white" p="base">
+      <Box w={['full', 'fit-content']} bg="white" p="base">
         <RecipientForm {...args} />
       </Box>
     </Flex>

package/src/stories/sendDocument/SendCommunication.stories.tsx

@@ -11,7 +11,7 @@ export default {
 
 export const SendCommunicationComponent = (args: SendCommunicationI) => {
   return (
-    <Box w={["full","25rem"]}>
+    <Box w={['full', '25rem']}>
       <SendCommunication {...args} />
     </Box>
   )

package/src/stories/subscription/HomesDropdown.stories.tsx

@@ -29,7 +29,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <Box w={["full","30rem"]} bg="lightBlue.1">
+      <Box w={['full', '30rem']} bg="lightBlue.1">
         <Story />
       </Box>
     ),