@popsure/dirty-swan 0.58.3 → 0.58.5

package/src/lib/components/icon/assets/stamp.svg

@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_44145_9396)">
+<path d="M3.125 17.5H16.875" stroke="#91919C" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.93118 10.625L7.54212 4.14062C7.48393 3.86746 7.48751 3.58474 7.55258 3.31313C7.61766 3.04153 7.74259 2.78788 7.91824 2.57074C8.0939 2.3536 8.31585 2.17845 8.56788 2.05808C8.8199 1.9377 9.09564 1.87516 9.37493 1.875H10.6249C10.9043 1.87504 11.1801 1.9375 11.4322 2.05783C11.6844 2.17815 11.9064 2.35329 12.0822 2.57044C12.2579 2.7876 12.3829 3.04128 12.448 3.31294C12.5131 3.58461 12.5167 3.86739 12.4585 4.14062L11.0695 10.625" stroke="#91919C" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.25 10.625H3.75C3.40482 10.625 3.125 10.9048 3.125 11.25V14.375C3.125 14.7202 3.40482 15 3.75 15H16.25C16.5952 15 16.875 14.7202 16.875 14.375V11.25C16.875 10.9048 16.5952 10.625 16.25 10.625Z" stroke="#91919C" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_44145_9396">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/lib/components/icon/assets/translation.svg

@@ -0,0 +1,15 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_44145_9287)">
+<ellipse cx="11.2498" cy="8.75008" rx="7.08333" ry="7.08333" stroke="#91919C" stroke-width="1.8"/>
+<path d="M11.6668 1.66675C8.85912 3.90414 7.82514 7.55498 8.56488 10.8334" stroke="#91919C" stroke-width="1.8" stroke-linecap="round"/>
+<path d="M10.8332 1.66675C15.2776 5.20841 15.2776 12.2917 10.8332 15.8334" stroke="#91919C" stroke-width="1.8" stroke-linecap="round"/>
+<path d="M5 6.66675C7.77778 6.66675 16.4107 6.66675 17.5 6.66675" stroke="#91919C" stroke-width="1.8" stroke-linecap="round"/>
+<path d="M5 10.8333C7.77778 10.8333 16.4107 10.8333 17.5 10.8333" stroke="#91919C" stroke-width="1.8" stroke-linecap="round"/>
+<path d="M9.99984 16.1458C9.99984 16.422 9.89145 16.687 9.69851 16.8823C9.50557 17.0777 9.24389 17.1874 8.97103 17.1874H3.72412L1.6665 18.3333V11.8749C1.6665 11.5987 1.7749 11.3337 1.96783 11.1383C2.16077 10.943 2.42245 10.8333 2.69531 10.8333H8.97103C9.24389 10.8333 9.50557 10.943 9.69851 11.1383C9.89145 11.3337 9.99984 11.5987 9.99984 11.8749V16.1458Z" fill="white" stroke="#91919C" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_44145_9287">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/lib/components/icon/icons/Bone.tsx

@@ -0,0 +1,23 @@
+/* Generated file. Do not modify. */
+import { createElement } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import type { IconWrapperProps } from '../IconWrapper';
+export default (props: IconWrapperProps) =>
+  createElement(
+    IconWrapper,
+    props,
+    <g clipPath="url(#bone_svg__a)">
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.8}
+        d="M4.4 15.6a2.188 2.188 0 1 1 .821-4.017.625.625 0 0 0 .781-.084l5.499-5.498a.625.625 0 0 0 .083-.781 2.187 2.187 0 1 1 4.018-.821 2.188 2.188 0 1 1-.822 4.017.625.625 0 0 0-.78.083l-5.5 5.499a.625.625 0 0 0-.083.781A2.188 2.188 0 1 1 4.4 15.6Z"
+      />
+    </g>,
+    <defs>
+      <clipPath id="bone_svg__a">
+        <path fill="#fff" d="M0 0h20v20H0z" />
+      </clipPath>
+    </defs>
+  );

package/src/lib/components/icon/icons/Car.tsx

@@ -0,0 +1,30 @@
+/* Generated file. Do not modify. */
+import { createElement } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import type { IconWrapperProps } from '../IconWrapper';
+export default (props: IconWrapperProps) =>
+  createElement(
+    IconWrapper,
+    props,
+    <g
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      clipPath="url(#car_svg__a)"
+    >
+      <path
+        strokeWidth={1.8}
+        d="M1.25 8.75h17.5M17.5 13.75v1.875a.624.624 0 0 1-.625.625H15a.624.624 0 0 1-.625-.625V13.75M5.625 13.75v1.875A.625.625 0 0 1 5 16.25H3.125a.625.625 0 0 1-.625-.625V13.75"
+      />
+      <path strokeWidth={1.3} d="M5 11.25h1.25M13.75 11.25H15" />
+      <path
+        strokeWidth={1.8}
+        d="m17.5 8.75-2.335-5.254a.625.625 0 0 0-.571-.371H5.406a.625.625 0 0 0-.57.371L2.5 8.75v5h15v-5Z"
+      />
+    </g>,
+    <defs>
+      <clipPath id="car_svg__a">
+        <path fill="#fff" d="M0 0h20v20H0z" />
+      </clipPath>
+    </defs>
+  );

package/src/lib/components/icon/icons/Files.tsx

@@ -0,0 +1,24 @@
+/* Generated file. Do not modify. */
+import { createElement } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import type { IconWrapperProps } from '../IconWrapper';
+export default (props: IconWrapperProps) =>
+  createElement(
+    IconWrapper,
+    props,
+    <g
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.8}
+      clipPath="url(#files_svg__a)"
+    >
+      <path d="M13.125 17.5h-8.75a.625.625 0 0 1-.625-.625V5.625A.625.625 0 0 1 4.375 5h6.25l3.125 3.125v8.75a.624.624 0 0 1-.625.625Z" />
+      <path d="M6.25 5V3.125a.625.625 0 0 1 .625-.625h6.25l3.125 3.125v8.75a.624.624 0 0 1-.625.625H13.75M6.875 11.875h3.75M6.875 14.375h3.75" />
+    </g>,
+    <defs>
+      <clipPath id="files_svg__a">
+        <path fill="#fff" d="M0 0h20v20H0z" />
+      </clipPath>
+    </defs>
+  );

package/src/lib/components/icon/icons/Id.tsx

@@ -0,0 +1,24 @@
+/* Generated file. Do not modify. */
+import { createElement } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import type { IconWrapperProps } from '../IconWrapper';
+export default (props: IconWrapperProps) =>
+  createElement(
+    IconWrapper,
+    props,
+    <g
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.8}
+      clipPath="url(#id_svg__a)"
+    >
+      <path d="M11.875 8.75H15M11.875 11.25H15M16.875 3.75H3.125a.625.625 0 0 0-.625.625v11.25c0 .345.28.625.625.625h13.75c.345 0 .625-.28.625-.625V4.375a.625.625 0 0 0-.625-.625Z" />
+      <path d="M7.5 11.25a1.875 1.875 0 1 0 0-3.75 1.875 1.875 0 0 0 0 3.75ZM5 13.125c.277-1.078 1.335-1.875 2.5-1.875s2.223.796 2.5 1.875" />
+    </g>,
+    <defs>
+      <clipPath id="id_svg__a">
+        <path fill="#fff" d="M0 0h20v20H0z" />
+      </clipPath>
+    </defs>
+  );

package/src/lib/components/icon/icons/Prohibit.tsx

@@ -0,0 +1,25 @@
+/* Generated file. Do not modify. */
+import { createElement } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import type { IconWrapperProps } from '../IconWrapper';
+export default (props: IconWrapperProps) =>
+  createElement(
+    IconWrapper,
+    props,
+    <g stroke="currentColor" strokeWidth={1.8} clipPath="url(#prohibit_svg__a)">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.303 15.303 4.697 4.697"
+      />
+      <path
+        strokeMiterlimit={10}
+        d="M10 17.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15Z"
+      />
+    </g>,
+    <defs>
+      <clipPath id="prohibit_svg__a">
+        <path fill="#fff" d="M0 0h20v20H0z" />
+      </clipPath>
+    </defs>
+  );

package/src/lib/components/icon/icons/Receipt.tsx

@@ -0,0 +1,23 @@
+/* Generated file. Do not modify. */
+import { createElement } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import type { IconWrapperProps } from '../IconWrapper';
+export default (props: IconWrapperProps) =>
+  createElement(
+    IconWrapper,
+    props,
+    <g
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.8}
+      clipPath="url(#receipt_svg__a)"
+    >
+      <path d="M6.25 8.125h7.5M6.25 10.625h7.5M2.5 16.25V4.375a.625.625 0 0 1 .625-.625h13.75a.625.625 0 0 1 .625.625V16.25L15 15l-2.5 1.25L10 15l-2.5 1.25L5 15l-2.5 1.25Z" />
+    </g>,
+    <defs>
+      <clipPath id="receipt_svg__a">
+        <path fill="#fff" d="M0 0h20v20H0z" />
+      </clipPath>
+    </defs>
+  );

package/src/lib/components/icon/icons/Signature.tsx

@@ -0,0 +1,23 @@
+/* Generated file. Do not modify. */
+import { createElement } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import type { IconWrapperProps } from '../IconWrapper';
+export default (props: IconWrapperProps) =>
+  createElement(
+    IconWrapper,
+    props,
+    <g
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.8}
+      clipPath="url(#signature_svg__a)"
+    >
+      <path d="M1.875 14h16.25M1.875 17.5s9.025-15 4.212-15C2.505 2.5 2.467 17.587 10 8.14c0 0 .634 3.081 2.127 3.11.603.012 1.348-.493 2.248-1.875 0 0 0 1.875 3.75 1.875" />
+    </g>,
+    <defs>
+      <clipPath id="signature_svg__a">
+        <path fill="#fff" d="M0 0h20v20H0z" />
+      </clipPath>
+    </defs>
+  );

package/src/lib/components/icon/icons/Stamp.tsx

@@ -0,0 +1,23 @@
+/* Generated file. Do not modify. */
+import { createElement } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import type { IconWrapperProps } from '../IconWrapper';
+export default (props: IconWrapperProps) =>
+  createElement(
+    IconWrapper,
+    props,
+    <g
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.8}
+      clipPath="url(#stamp_svg__a)"
+    >
+      <path d="M3.125 17.5h13.75M8.931 10.625 7.542 4.141a1.875 1.875 0 0 1 1.833-2.266h1.25a1.875 1.875 0 0 1 1.834 2.266l-1.39 6.484M16.25 10.625H3.75a.625.625 0 0 0-.625.625v3.125c0 .345.28.625.625.625h12.5c.345 0 .625-.28.625-.625V11.25a.625.625 0 0 0-.625-.625Z" />
+    </g>,
+    <defs>
+      <clipPath id="stamp_svg__a">
+        <path fill="#fff" d="M0 0h20v20H0z" />
+      </clipPath>
+    </defs>
+  );

package/src/lib/components/icon/icons/Translation.tsx

@@ -0,0 +1,35 @@
+/* Generated file. Do not modify. */
+import { createElement } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import type { IconWrapperProps } from '../IconWrapper';
+export default (props: IconWrapperProps) =>
+  createElement(
+    IconWrapper,
+    props,
+    <g
+      stroke="currentColor"
+      strokeWidth={1.8}
+      clipPath="url(#translation_svg__a)"
+    >
+      <circle cx={11.25} cy={8.75} r={7.083} />
+      <path
+        strokeLinecap="round"
+        d="M11.667 1.667c-2.808 2.237-3.842 5.888-3.102 9.166"
+      />
+      <path
+        strokeLinecap="round"
+        d="M10.833 1.667c4.445 3.541 4.445 10.625 0 14.166M5 6.667h12.5M5 10.833h12.5"
+      />
+      <path
+        fill="#fff"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M10 16.146c0 .276-.109.541-.301.736a1.022 1.022 0 0 1-.728.305H3.724l-2.058 1.146v-6.458c0-.276.109-.541.302-.737.193-.195.454-.305.727-.305h6.276c.273 0 .535.11.728.305.192.196.3.46.3.737v4.27Z"
+      />
+    </g>,
+    <defs>
+      <clipPath id="translation_svg__a">
+        <path fill="#fff" d="M0 0h20v20H0z" />
+      </clipPath>
+    </defs>
+  );

package/src/lib/components/icon/icons/index.ts

@@ -52,6 +52,7 @@ export { default as BikeBicycleIcon } from './BikeBicycle';
 export { default as BlogIcon } from './Blog';
 export { default as BluetoothIcon } from './Bluetooth';
 export { default as BoldIcon } from './Bold';
+export { default as BoneIcon } from './Bone';
 export { default as BookOpenIcon } from './BookOpen';
 export { default as BookIcon } from './Book';
 export { default as BookmarkIcon } from './Bookmark';
@@ -67,6 +68,7 @@ export { default as CalendarIcon } from './Calendar';
 export { default as CameraOffIcon } from './CameraOff';
 export { default as CameraIcon } from './Camera';
 export { default as CarTrafficIcon } from './CarTraffic';
+export { default as CarIcon } from './Car';
 export { default as CastIcon } from './Cast';
 export { default as ChainBikeBrokenIcon } from './ChainBikeBroken';
 export { default as CheckCircleIcon } from './CheckCircle';
@@ -156,6 +158,7 @@ export { default as FileMinusIcon } from './FileMinus';
 export { default as FilePlusIcon } from './FilePlus';
 export { default as FileTextIcon } from './FileText';
 export { default as FileIcon } from './File';
+export { default as FilesIcon } from './Files';
 export { default as FilmIcon } from './Film';
 export { default as FilterIcon } from './Filter';
 export { default as FireIcon } from './Fire';
@@ -184,6 +187,7 @@ export { default as HeartIcon } from './Heart';
 export { default as HexagonIcon } from './Hexagon';
 export { default as HomeIcon } from './Home';
 export { default as HospitalBuildingIcon } from './HospitalBuilding';
+export { default as IdIcon } from './Id';
 export { default as ImagePictureIcon } from './ImagePicture';
 export { default as InboxIcon } from './Inbox';
 export { default as InfoFilledIcon } from './InfoFilled';
@@ -269,10 +273,12 @@ export { default as PowerIcon } from './Power';
 export { default as PregnacyIcon } from './Pregnacy';
 export { default as PrinterIcon } from './Printer';
 export { default as ProgressIcon } from './Progress';
+export { default as ProhibitIcon } from './Prohibit';
 export { default as QrCodeIcon } from './QrCode';
 export { default as QuestionmarkHelpCircleIcon } from './QuestionmarkHelpCircle';
 export { default as QuotationMarksIcon } from './QuotationMarks';
 export { default as RadioIcon } from './Radio';
+export { default as ReceiptIcon } from './Receipt';
 export { default as RefreshCcwIcon } from './RefreshCcw';
 export { default as RefreshCwIcon } from './RefreshCw';
 export { default as RepeatIcon } from './Repeat';
@@ -298,6 +304,7 @@ export { default as ShoppingBagIcon } from './ShoppingBag';
 export { default as ShoppingCartIcon } from './ShoppingCart';
 export { default as ShuffleIcon } from './Shuffle';
 export { default as SidebarIcon } from './Sidebar';
+export { default as SignatureIcon } from './Signature';
 export { default as SkipBackIcon } from './SkipBack';
 export { default as SkipForwardIcon } from './SkipForward';
 export { default as SlackIcon } from './Slack';
@@ -308,6 +315,7 @@ export { default as SmileIcon } from './Smile';
 export { default as SofaIcon } from './Sofa';
 export { default as SpeakerIcon } from './Speaker';
 export { default as SquareIcon } from './Square';
+export { default as StampIcon } from './Stamp';
 export { default as StarFilledIcon } from './StarFilled';
 export { default as StarHalfIcon } from './StarHalf';
 export { default as StarIcon } from './Star';
@@ -329,6 +337,7 @@ export { default as ToggleRightIcon } from './ToggleRight';
 export { default as ToolIcon } from './Tool';
 export { default as ToothFillingCrackedIcon } from './ToothFillingCracked';
 export { default as TrailerPartsIcon } from './TrailerParts';
+export { default as TranslationIcon } from './Translation';
 export { default as Trash2Icon } from './Trash2';
 export { default as TrashIcon } from './Trash';
 export { default as TrelloIcon } from './Trello';

package/src/lib/components/multiDropzone/index.stories.tsx

@@ -2,6 +2,8 @@ import { useState } from 'react';
 import { MultiDropzone, MultiDropzoneProps } from '.';
 import { UploadedFile } from './types';
 
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
 const story = {
   title: 'JSX/MultiDropzone',
   component: MultiDropzone,
@@ -11,26 +13,31 @@ const story = {
     },
     uploading: {
       defaultValue: false,
-      description: 'Property that allows to display component in an uploading state',
+      description:
+        'Property that allows to display component in an uploading state',
     },
     isCondensed: {
       defaultValue: false,
-      description: 'Property that allows to display component in a smaller layout',
+      description:
+        'Property that allows to display component in a smaller layout',
     },
     maxFiles: {
-      description: 'Property that allows to display the maximum number of files allowed',
+      description:
+        'Property that allows to display the maximum number of files allowed',
       table: {
         category: 'File Validation',
       },
     },
     maxSize: {
-      description: 'Property that allows to display the maximum size of files allowed',
+      description:
+        'Property that allows to display the maximum size of files allowed',
       table: {
         category: 'File Validation',
       },
     },
     accept: {
-      description: 'Property that allows to define which file types are accepted',
+      description:
+        'Property that allows to define which file types are accepted',
       table: {
         category: 'File Validation',
       },
@@ -54,17 +61,20 @@ const story = {
     },
   },
   args: {
-    uploadedFiles: [{
-      id: '123456789',
-      name: 'my-code-doesnt-work-i-have-no-idea-why-my-code-works.jpg'
-    }],
+    uploadedFiles: [
+      {
+        id: '123456789',
+        name: 'my-code-doesnt-work-i-have-no-idea-why-my-code-works.jpg',
+      },
+    ],
     uploading: false,
     isCondensed: false,
     textOverrides: {},
-    maxFiles: 0
+    maxFiles: 0,
   },
   parameters: {
-    componentSubtitle: 'MultiDropzone component allows upload of multiple documents / files.',
+    componentSubtitle:
+      'MultiDropzone component allows upload of multiple documents / files.',
   },
 };
 
@@ -96,11 +106,11 @@ export const MultiDropzoneStory = ({
   };
 
   return (
-    <MultiDropzone 
-      onFileSelect={handleOnFileSelect} 
-      onRemoveFile={handleOnRemoveFile} 
-      uploadedFiles={localFiles} 
-      uploading={uploading} 
+    <MultiDropzone
+      onFileSelect={handleOnFileSelect}
+      onRemoveFile={handleOnRemoveFile}
+      uploadedFiles={localFiles}
+      uploading={uploading}
       isCondensed={isCondensed}
       maxFiles={maxFiles}
       maxSize={maxSize}
@@ -109,7 +119,7 @@ export const MultiDropzoneStory = ({
   );
 };
 
-MultiDropzoneStory.storyName = "MultiDropzone";
+MultiDropzoneStory.storyName = 'MultiDropzone';
 
 export const UploadingState = () => (
   <MultiDropzone
@@ -148,7 +158,6 @@ export const UploadingState = () => (
   />
 );
 
-
 export const CondensedView = () => (
   <MultiDropzone
     uploadedFiles={[
@@ -269,9 +278,30 @@ export const I18nSupport = () => (
       instructionsText: 'Datei auswählen oder per Drag & Drop platzieren',
       supportsTextShort: 'Unterstützt werden',
       currentlyUploadingText:
-        'Bitte warten während die Datei hochgeladen wird...'
+        'Bitte warten während die Datei hochgeladen wird...',
+    }}
+  />
+);
+
+export const NonDesktopDevice = () => (
+  <MultiDropzone
+    uploadedFiles={[]}
+    onFileSelect={() => {}}
+    uploading={false}
+    onRemoveFile={() => {}}
+    textOverrides={{
+      instructionsTextMobile: 'Tippen Sie, um eine Datei auszuwählen',
+      currentlyUploadingText:
+        'Bitte warten, während die Datei hochgeladen wird...',
     }}
   />
 );
 
+NonDesktopDevice.parameters = {
+  viewport: {
+    viewports: INITIAL_VIEWPORTS,
+    defaultViewport: 'iphone6',
+  },
+};
+
 export default story;

package/src/lib/components/multiDropzone/index.tsx

@@ -24,6 +24,7 @@ import {
 } from './types';
 
 import { getPlaceholder } from './utils';
+import { useMediaQuery } from '../../hooks/useMediaQuery';
 
 interface MultiDropzoneProps {
   uploadedFiles: UploadedFile[];
@@ -93,6 +94,17 @@ const MultiDropzone = ({
     onDrop,
   });
 
+  const isNonDesktopDevice = useMediaQuery('BELOW_TABLET');
+
+  const instructionsTextDesktop =
+    textOverrides?.instructionsText || 'Choose file or drag & drop';
+  const instructionsTextMobile =
+    textOverrides?.instructionsTextMobile || 'Tap to choose file';
+
+  const instructionsText = isNonDesktopDevice
+    ? instructionsTextMobile
+    : instructionsTextDesktop;
+
   return (
     <div className={styles.container}>
       <div
@@ -121,7 +133,7 @@ const MultiDropzone = ({
           {uploading
             ? textOverrides?.currentlyUploadingText ||
               'Please wait while uploading file...'
-            : textOverrides?.instructionsText || 'Choose file or drag & drop'}
+            : instructionsText}
         </div>
         <div className="p-p--small tc-grey-500">
           {textOverrides?.supportsText || placeholder}

package/src/lib/components/multiDropzone/types.ts

@@ -1,21 +1,21 @@
-import { Accept } from "react-dropzone";
+import { Accept } from 'react-dropzone';
 
 export enum FileMimeTypes {
-  avi = "video/x-msvideo",
-  bmp = "image/bmp",
-  doc = "application/msword",
-  docx = "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-  heic = "image/heic",
-  jpeg = "image/jpeg",
-  jpg = "image/jpg",
-  mov = "video/quicktime",
-  mp4 = "video/mp4",
-  pdf = "application/pdf",
-  png = "image/png",
-  svg = "image/svg+xml",
-  tif = "image/tiff",
-  tiff = "image/tiff",
-  webp = "image/webp",
+  avi = 'video/x-msvideo',
+  bmp = 'image/bmp',
+  doc = 'application/msword',
+  docx = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  heic = 'image/heic',
+  jpeg = 'image/jpeg',
+  jpg = 'image/jpg',
+  mov = 'video/quicktime',
+  mp4 = 'video/mp4',
+  pdf = 'application/pdf',
+  png = 'image/png',
+  svg = 'image/svg+xml',
+  tif = 'image/tiff',
+  tiff = 'image/tiff',
+  webp = 'image/webp',
 }
 
 // mp4, mov, avi
@@ -34,7 +34,7 @@ export const IMAGE_FILES: FileType[] = [
   'png',
   'tiff',
   'webp',
-  'svg'
+  'svg',
 ];
 
 export interface UploadedFile {
@@ -47,13 +47,14 @@ export interface UploadedFile {
   showLoadingSpinner?: boolean;
 }
 
-export type AcceptType = "document" | "image" | "video" | Accept;
+export type AcceptType = 'document' | 'image' | 'video' | Accept;
 
 export interface TextOverrides {
   currentlyUploadingText?: string;
   fileTypeError?: string;
   fileTooLargeError?: string;
   instructionsText?: string;
+  instructionsTextMobile?: string;
   sizeUpToText?: string;
   supportsText?: string;
   supportsTextShort?: string;

package/dist/esm/TableSection-ebace923.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableSection-ebace923.js","sources":["../../../src/lib/components/table/types.ts","../../../src/lib/hooks/useMediaQuery.ts","../../../src/lib/components/table/components/TableSection/TableSection.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { BaseCellProps } from './components/TableCell/BaseCell/BaseCell';\nimport { CTACellProps } from './components/TableCell/CTACell/CTACell';\nimport { ButtonCellProps } from './components/TableCell/ButtonCell/ButtonCell';\nimport { CardCellProps } from './components/TableCell/CardCell/CardCell';\n\ntype DefaultCellProps = {\n  cellId?: string;\n  colSpan?: number;\n  modalTitle?: ReactNode;\n};\n\ntype BaseCellData = BaseCellProps & { type?: undefined } & DefaultCellProps;\ntype CTACellData = CTACellProps & { type: 'CTA' } & DefaultCellProps;\ntype ButtonCellData = ButtonCellProps & { type: 'BUTTON' } & DefaultCellProps;\ntype CardCellData = CardCellProps & { type: 'CARD' } & DefaultCellProps;\n\nexport type TableCellData =\n  | BaseCellData\n  | CTACellData\n  | ButtonCellData\n  | CardCellData;\n\nexport const isBaseCell = (\n  tableCellData: TableCellData\n): tableCellData is BaseCellData => {\n  return !tableCellData.type;\n};\n\nexport type TableSectionType = {\n  title?: string;\n  icon?: ReactNode;\n};\n\nexport type ModalData = {\n  title?: ReactNode;\n  body?: ReactNode;\n};\n\nexport type TableCellRowData = TableCellData[];\n\nexport type TableSectionData = {\n  section?: TableSectionType;\n  rows: TableCellRowData[];\n};\n\nexport type TableData = TableSectionData[];\n\nexport type ModalFunction = (modalData: ModalData) => void;\n\nexport type CellReplacements = Record<string, Partial<TableCellData>>;\n","import { useEffect, useState } from 'react';\n\n// USAGE:\n// const isMobile = useMediaQuery('BELOW_MOBILE');\n\nexport const breakpointsArray = [\n  'ABOVE_MOBILE',\n  'ABOVE_TABLET',\n  'ABOVE_DESKTOP',\n  'BELOW_MOBILE',\n  'BELOW_TABLET',\n  'BELOW_DESKTOP',\n] as const;\n\nexport type Breakpoint = typeof breakpointsArray[number];\nexport type BreakpointData = { initialValue: boolean; queryString: string };\n\nexport const breakpointLookup = (breakpoint: Breakpoint): BreakpointData => {\n  if (typeof window === 'undefined') {\n    return {\n      initialValue: false,\n      queryString: '',\n    };\n  }\n\n  switch (breakpoint) {\n    case 'BELOW_TABLET':\n      return {\n        initialValue: window.innerWidth <= 720, // 45rem = 720px = tablet breakpoint\n        queryString: '(max-width: 45rem)',\n      };\n    case 'BELOW_DESKTOP':\n      return {\n        initialValue: window.innerWidth <= 1024, // 64rem = 1024px = desktop breakpoint\n        queryString: '(max-width: 64rem)',\n      };\n    case 'ABOVE_MOBILE':\n      return {\n        initialValue: window.innerWidth >= 544, // 34rem = 544px = mobile breakpoint}\n        queryString: '(min-width: 34rem)',\n      };\n    case 'ABOVE_TABLET':\n      return {\n        initialValue: window.innerWidth >= 720, // 45rem = 720px = tablet breakpoint\n        queryString: '(min-width: 45rem)',\n      };\n    case 'ABOVE_DESKTOP':\n      return {\n        initialValue: window.innerWidth >= 1024, // 64rem = 1024px = desktop breakpoint\n        queryString: '(min-width: 64rem)',\n      };\n    case 'BELOW_MOBILE':\n    default:\n      return {\n        initialValue: window.innerWidth <= 544, // 34rem = 544px = mobile breakpoint}\n        queryString: '(max-width: 34rem)',\n      };\n  }\n};\n\nexport const useMediaQuery = (breakpoint: Breakpoint) => {\n  const { initialValue, queryString } = breakpointLookup(breakpoint);\n\n  const [matchesBreakpoint, setMatchesBreakpoint] = useState(initialValue);\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia(queryString);\n\n    const updateMediaQuery = (e: MediaQueryListEvent) =>\n      setMatchesBreakpoint(e.matches);\n\n    mediaQuery.addEventListener('change', updateMediaQuery);\n\n    return () => {\n      mediaQuery.removeEventListener('change', updateMediaQuery);\n    };\n  }, [queryString]);\n\n  return matchesBreakpoint;\n};\n","import classNames from 'classnames';\n\nimport styles from './TableSection.module.scss';\nimport { TableCell } from '../TableCell/TableCell';\nimport {\n  CellReplacements,\n  isBaseCell,\n  ModalFunction,\n  TableCellData,\n  TableCellRowData,\n} from '../../types';\nimport { useCallback } from 'react';\nimport { useMediaQuery } from '../../../../hooks/useMediaQuery';\n\nexport interface TableSectionProps {\n  className?: string;\n  tableCellRows: TableCellRowData[];\n  hideColumns?: number[];\n  hideHeader?: boolean;\n  openModal?: ModalFunction;\n  title: string;\n  width?: number | string;\n  cellReplacements?: CellReplacements;\n  imageComponent?: (args: any) => JSX.Element;\n}\n\nconst TableSection = ({\n  className,\n  tableCellRows,\n  hideColumns = [],\n  hideHeader,\n  openModal,\n  title,\n  width,\n  cellReplacements,\n  imageComponent,\n}: TableSectionProps) => {\n  const headerRow = tableCellRows?.[0];\n  const isBelowDesktop = useMediaQuery('BELOW_DESKTOP');\n\n  const getModalTitleFromColumnHeader = (cellIndex: number) => {\n    const firstCellInColumn = tableCellRows?.[0]?.[cellIndex];\n    let titleFromColumn;\n\n    switch (firstCellInColumn.type) {\n      case 'BUTTON':\n        titleFromColumn = firstCellInColumn.buttonCaption;\n        break;\n      case 'CTA':\n        titleFromColumn = firstCellInColumn.title;\n        break;\n      case undefined:\n        titleFromColumn = firstCellInColumn.text || '';\n        break;\n    }\n\n    return titleFromColumn;\n  };\n\n  const getModalTitleFromRowHeader = (currentRow: TableCellRowData) => {\n    const firstCellInRow = currentRow?.[0];\n    const titleFromRow =\n      (isBaseCell(firstCellInRow) && firstCellInRow.text) || '';\n\n    return titleFromRow;\n  };\n\n  const isVisibleColumn = useCallback(\n    (cellIndex: number) => !hideColumns.includes(cellIndex),\n    [hideColumns]\n  );\n\n  return (\n    <table\n      className={classNames(className, 'w100', styles.table)}\n      width={width}\n    >\n      <caption className=\"sr-only\">{title}</caption>\n\n      {headerRow && (\n        <thead className={hideHeader ? 'sr-only' : ''}>\n          <tr>\n            {headerRow.map((tableCellData, cellIndex) => {\n              const isFirstCellInRow = cellIndex === 0;\n              const cellReplacementData =\n                (tableCellData.cellId &&\n                  cellReplacements?.[tableCellData.cellId]) ||\n                {};\n\n              const cellProps = {\n                ...tableCellData,\n                ...cellReplacementData,\n                ...{\n                  openModal,\n                  modalTitle:\n                    (isBaseCell(tableCellData) && tableCellData.text) ||\n                    getModalTitleFromColumnHeader(cellIndex),\n                  align: isFirstCellInRow ? 'left' : 'center',\n                },\n              } as TableCellData;\n\n              return (\n                isVisibleColumn(cellIndex) && (\n                  <TableCell\n                    key={cellIndex}\n                    isBelowDesktop={isBelowDesktop}\n                    isHeader\n                    isFirstCellInRow={isFirstCellInRow}\n                    isTopLeftCell={isFirstCellInRow}\n                    {...cellProps}\n                    imageComponent={imageComponent}\n                  />\n                )\n              );\n            })}\n          </tr>\n        </thead>\n      )}\n\n      <tbody>\n        {tableCellRows.map(\n          (row, rowIndex) =>\n            rowIndex > 0 && (\n              <tr key={rowIndex} className={styles.tr}>\n                {row.map((tableCellData, cellIndex) => {\n                  const key = `${rowIndex}-${cellIndex}`;\n                  const isFirstCellInRow = cellIndex === 0;\n                  const titleFromRow = getModalTitleFromRowHeader(row);\n\n                  const cellReplacementData =\n                    (tableCellData.cellId &&\n                      cellReplacements?.[tableCellData.cellId]) ||\n                    {};\n\n                  const cellProps = {\n                    ...tableCellData,\n                    ...cellReplacementData,\n                    ...{\n                      openModal,\n                      modalTitle: tableCellData?.modalTitle || titleFromRow,\n                      align: isFirstCellInRow ? 'left' : 'center',\n                    },\n                  } as TableCellData;\n\n                  return (\n                    !hideColumns.includes(cellIndex) && (\n                      <TableCell\n                        isBelowDesktop={isBelowDesktop}\n                        isFirstCellInRow={isFirstCellInRow}\n                        key={key}\n                        {...cellProps}\n                        imageComponent={imageComponent}\n                      />\n                    )\n                  );\n                })}\n              </tr>\n            )\n        )}\n      </tbody>\n    </table>\n  );\n};\n\nexport { TableSection };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}