@hellobetterdigitalnz/selwynui 0.0.1-22 → 0.0.1-25

package/src/Components/DataDisplay/ContactsBlock/contactsBlock.module.scss

@@ -0,0 +1,143 @@
+.contactsBlock {
+    background-color: var(--color-block-bg);
+    color: var(--color-block-text);
+
+    .contactsBlockHeader {
+        padding-bottom: 36px;
+        font-size: var(--font-size-h3);
+    }
+
+    .contactsCardsWrapper {
+        width: 100%;
+        
+        .contactCard {
+            background-color: var(--color-block-bg);
+            border-radius: 12px;
+            border: 1px solid var(--color-taste);
+            transition: all ease 0.3s;
+            margin-bottom: 24px;
+            
+
+            &:hover {
+                background-color: var(--color-bg);
+                color: var(--color-text);
+            }
+
+            img {
+                object-fit: cover;
+                border-radius: 12px 12px 0 0;
+                width: 100%;
+            }
+
+            .contactContentWrapper {
+                padding: 24px;
+
+                .contactCardHeader {
+                    h1 {
+                        font-size: var(--font-size-h6);
+                        font-weight: var(--font-weight-bold);
+                        line-height: var(--line-height-h6);
+                    }
+
+                    h2 {
+                        font-size: var(--font-size-h6);
+                        font-weight: var(--font-weight-h4);
+                        line-height: var(--line-height-h6);
+                    }
+                }
+
+                .contactMiddleContent {
+                    padding-block: 24px;
+
+                    p {
+                        font-size: var(--font-size-small);
+                        font-weight: var(--font-weight-h4);
+                    }
+                }
+
+                .contactLink {
+                    display: flex;
+                    justify-content: space-between;
+                    font-size: var(--font-size-regular-sm);
+                    font-weight: var(--font-weight-bold);
+                    cursor: pointer;
+                }
+            }
+
+        }
+    }
+}
+
+
+@media screen and (min-width: 992px) {
+    .contactsBlock {
+    
+        .contactsBlockHeader {
+            padding-bottom: 72px;
+            font-size: var(--font-size-h3);
+        }
+
+        .contactsCardsWrapper {
+            display: flex;
+            flex-wrap: wrap;
+            flex-grow: 1;
+            gap: 24px;
+            width: 100%;
+
+            .contactCard {
+                background-color: var(--color-block-bg);
+                border-radius: 12px;
+                border: 1px solid var(--color-taste);
+                width: 33.33%;
+                transition: all ease 0.3s;
+
+                &:hover {
+                    background-color: var(--color-bg);
+                    color: var(--color-text);
+                }
+
+                img {
+                    object-fit: cover;
+                    border-radius: 12px 12px 0 0;
+                    width: 100%;
+                }
+
+                .contactContentWrapper {
+                    padding: 24px;
+
+                    .contactCardHeader {
+                        h1 {
+                            font-size: var(--font-size-h6);
+                            font-weight: var(--font-weight-bold);
+                            line-height: var(--line-height-h6);
+                        }
+
+                        h2 {
+                            font-size: var(--font-size-h6);
+                            font-weight: var(--font-weight-h4);
+                            line-height: var(--line-height-h6);
+                        }
+                    }
+
+                    .contactMiddleContent {
+                        padding-block: 24px;
+
+                        p {
+                            font-size: var(--font-size-small);
+                            font-weight: var(--font-weight-h4);
+                        }
+                    }
+
+                    .contactLink {
+                        display: flex;
+                        justify-content: space-between;
+                        font-size: var(--font-size-regular-sm);
+                        font-weight: var(--font-weight-bold);
+                        cursor: pointer;
+                    }
+                }
+
+            }
+        }
+    }
+}

package/src/Components/DataDisplay/ImageContent/imageContent.module.scss

@@ -72,7 +72,7 @@
     }
 
     .desc{
-      margin-top: 72px;
+      margin-top: 48px;
       font-size: var(--font-size-body-regular);
       line-height: var(--line-height-body-regular);
       font-weight: 400;
@@ -220,18 +220,22 @@
       height: 100%;
       width: 100%;
       min-width: 50vw;
-      min-height: 380px;
+      position: relative;
 
 
-      &::before {
-        content: none;
+      &:before {
+        content: '';
+        display:block ;
+        padding-top: 103%;
       }
 
       img {
+        position: absolute;
+        top: 0;
+        left: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
-        object-position: center;
       }
     }
 
@@ -347,6 +351,10 @@
     .content{
       width: 50%;
       padding: 0 52px;
+
+      .desc{
+        margin-top: 72px;
+      }
     }
 
     &.left{

package/src/Components/DataDisplay/IntroBlock/IntroBlock.stories.tsx

@@ -19,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 const IntroBlockTemplate: Story = {
     render: () => {
         return (
-            <ElementHolder paddingTop="sm" paddingBottom="sm" piller="visit" level="light">
+            <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="visit" level="light">
                 <IntroBlock
                     introHeading={'A district that’s growing, grounded, and full of opportunity.'}
                     introText={'From the Southern Alps to the sea, Waikirikiri Selwyn’s diverse towns arespread across the Canterbury Plains between two mighty braided rivers. This is where ideas take root, families and businesses grow, and communities come together. We don’t just dream of a better future, we make it happen.'}

package/src/Components/DataDisplay/IntroBlock/introBlock.module.scss

@@ -1,4 +1,22 @@
 .introBlock {
+  .introBlockWrapper {
+    .introBlockLeft {
+      padding: 0 0 48px 0;
+      h1 {
+        font-size: var(--font-size-h5);
+        font-weight: var(--font-weight-h3);
+        line-height: var(--line-height-h5);
+      }
+    }
+
+    .introBlockRight {
+      h1 {
+        font-size: var(--font-size-regular);
+        font-weight: var(--font-weight-body-regular);
+        line-height: var(--line-height-label);
+      }
+    }
+  }
 
   @media screen and (min-width: 992px) {
     .introBlockWrapper {

package/src/Components/DataDisplay/KPIBlock/KPIBlock.stories.tsx

@@ -21,7 +21,7 @@ const KPIBlockTemplate: Story = {
 
     return (
       <>
-        <ElementHolder paddingTop="sm" paddingBottom="sm" piller="business" level="secondary">
+        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="business" level="secondary">
         <KPIBlock
           title={'Insights lorem ipsum dolor sit amet'}
           description={'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'}
@@ -55,7 +55,7 @@ const KPIBlockBusinessTemplate: Story = {
 
     return (
       <>
-        <ElementHolder paddingTop="sm" paddingBottom="sm" piller="business" level="secondary">
+        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="business" level="secondary">
         <KPIBlock
           title={'Business Growth Statistics'}
           description={'Our comprehensive approach to business development has yielded impressive results across multiple sectors.'}

package/src/Components/DataDisplay/ListingDetailBlock/ListingDetailBlockProps.tsx

@@ -0,0 +1,8 @@
+
+export interface ListingDetailBlockProps{
+  title: string,
+  description: string
+  facilities: string[],
+  contact: string [],
+  location: string
+}

package/src/Components/DataDisplay/PathwayBlock/PathwayBlock.stories.tsx

@@ -21,7 +21,7 @@ const PathwayBlockTemplate: Story = {
   render: () => {
     return (
       <>
-        <ElementHolder paddingTop="sm" paddingBottom="sm" piller="participate" level="light">
+        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="participate" level="light">
         <PathwayBlock
           title="Lorem ipsum"
           pillar="visit"

package/src/Components/DataDisplay/PathwayBlock/PathwayBlock.tsx

@@ -5,9 +5,9 @@ import DetailsCard from "../DetailsCard/DetailsCard.tsx";
 
 const PathwayBlock = (props: PathwayBlockProps) => {
   const {
-    title = 'Lorem ipsum',
+    title = '',
     cards = [],
-    pillar = 'visit'
+    pillar = ''
   } = props;
 
   return (

package/src/Components/DataDisplay/PromoBannerBlock/PromoBanner.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import PromoBannerBlock from './PromoBannerBlock';
 import Button from '../../Form/Button/Button';
 import ArrowRight from "../../Icons/Arrows/ArrowRight/ArrowRight";
@@ -29,9 +29,9 @@ const PromoBannerBlockTemplate: Story = {
                     title={'Spring gardens'}
                     boldTitle={'in Selwyn'}
                     content={'Visit Selwyn is for those who like to take the back roads, breathe mountain air, and find their own pace. Stay a little longer, explore deeper, and refuel with great kai and local stories along the way.'}
-                    image={'promo-banner-image.svg'}
+                    image={'/img/promo-banner-img.png'}
                     button={
-                        <Button label={'START EXPLORING'} piller={'visit'} level={'primary'} secondaryIcon={<ArrowRight />} />
+                        <Button label={'START EXPLORING'} pillar={'visit'} level={'primary'} secondaryIcon={<ArrowRight />} />
                     }
                 />
             </ElementHolder>

package/src/Components/DataDisplay/PromoBannerBlock/promoBanner.module.scss

@@ -3,9 +3,10 @@
     padding: 48px 0px;
 
     .promoBannerBlockContainer {
+
         .promoBannerTop {
             .promoBannerTopLeft {
-                padding: 0 16px;
+                padding: 0 ;
 
                 h1 {
                     font-size: var(--font-size-h5);
@@ -15,7 +16,7 @@
             }
 
             .promoBannerTopRight {
-                padding: 48px 16px;
+                padding: 48px 0px;
 
                 h1 {
                     font-size: var(--font-size-regular);
@@ -31,11 +32,12 @@
         }
 
         .promoBannerBottom {
-            border-radius: 16px 16px 100px 0;
+          border-radius: 16px 16px 96px 6px;
             background: linear-gradient(to bottom,
                     var(--pathway-card-bg) 0%,
                     var(--pathway-card-bg) 60%,
                     transparent 60%);
+          overflow: hidden;
 
             .promoBannerBottomLeft {
                 color: var(--pathway-card-text);
@@ -60,13 +62,13 @@
                     padding-block: 32px;
 
                     h1 {
-                        font-size: var(--font-size-small);
+                        font-size: var(--font-size-body-small);
                         font-weight: var(--font-weight-body-sm);
                         line-height: var(--line-height-h5);
                     }
 
                     h2 {
-                        font-size: var(--font-size-small);
+                        font-size: var(--font-size-body-small);
                         font-weight: var(--font-weight-bold);
                         line-height: var(--line-height-body-regular);
                     }
@@ -82,12 +84,12 @@
 
             .promoBannerBottomRight {
               background: var(--color-sand);
+              line-height: 0;
 
                 img {
                     height: 100%;
                     width: 100%;
                     object-fit: cover;
-                    border-radius: 0 0 0 16px;
                 }
             }
         }
@@ -138,13 +140,11 @@
 
             .promoBannerBottom {
                 display: flex;
-                padding-top: 90px;
-                background: transparent;
+                margin-top: 90px;
 
                 .promoBannerBottomLeft {
                     background-color: var(--pathway-card-bg);
                     padding: 72px 90px 72px 72px;
-                    border-radius: 16px 0 0 16px;
                     width: 50%;
 
                     .promoBannerTitleContainer {
@@ -169,10 +169,6 @@
 
                 .promoBannerBottomRight {
                     width: 50%;
-
-                    img {
-                        border-radius: 0 16px 96px 0;
-                    }
                 }
             }
 

package/src/Components/DataDisplay/TestimonyCard/TestimonyCard.stories.tsx

@@ -21,7 +21,7 @@ const TestimonyCardTemplate: Story = {
   render: () => {
     return (
       <>
-        <ElementHolder paddingTop="sm" paddingBottom="sm" piller="visit" level="light">
+        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="visit" level="light">
         <TestimonyCard
           testimonies={[
             {

package/src/Components/DataDisplay/TestimonyCard/testimonyCard.module.scss

@@ -1,11 +1,20 @@
 .testimonyCard {
+  padding: 96px 0;
 
+  @media (max-width: 834px) {
+    padding: 0 0;
+  }
 }
 
 .testimonyCardWrapper {
   display: flex;
   gap: 69px;
   align-items: center;
+
+  @media (max-width: 834px) {
+    flex-direction: column;
+    gap: 32px;
+  }
 }
 
 .testimonyCardLeft {
@@ -13,6 +22,13 @@
   padding-top: 96px;
   padding-bottom: 96px;
 
+  @media (max-width: 834px) {
+    padding-top: 0;
+    padding-bottom: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
 
   img {
     width: 333px;
@@ -20,6 +36,16 @@
     border-radius: 2px 2px 96px 2px;
     object-fit: cover;
 
+    @media (max-width: 834px) {
+      width: 100%;
+      height: 360px;
+      //aspect-ratio: 1;
+      border-radius: 2px 2px 96px 2px;
+    }
+
+    @media (max-width: 480px) {
+      border-radius: 2px 2px 96px 2px;
+    }
   }
 }
 
@@ -29,7 +55,10 @@
   flex-direction: column;
   gap: 24px;
 
-
+  @media (max-width: 834px) {
+    width: 100%;
+    gap: 16px;
+  }
 
   p {
     font-size: 14px;
@@ -37,6 +66,11 @@
     letter-spacing: -0.14px;
     line-height: var(--line-height-body-regular);
     padding-left: 70px;
+
+    @media (max-width: 834px) {
+      padding-left: 0;
+      font-size: 12px;
+    }
   }
 }
 
@@ -45,15 +79,25 @@
   gap: 16px;
   align-items: flex-start;
 
-  .quoteIcon {
+  @media (max-width: 834px) {
+    flex-direction: column;
+    gap: 12px;
+  }
 
-    svg{
+  .quoteIcon {
+    svg {
       font-size: 80px;
       line-height: 0.8;
       flex-shrink: 0;
       margin-top: 0;
-    }
+      width: 56px;
+      height: 39px;
 
+      @media (max-width: 834px) {
+        width: 40px;
+        height: 27px;
+      }
+    }
   }
 
   h6 {
@@ -61,6 +105,15 @@
     line-height: 1.3;
     font-weight: var(--font-weight-body-sm);
     letter-spacing: -0.48px;
+    white-space: pre-line;
+
+    @media (max-width: 834px) {
+      font-size: var(--font-size-body-regular);
+    }
+
+    @media (max-width: 480px) {
+      font-size: var(--font-size-body-sm);
+    }
   }
 }
 
@@ -69,6 +122,11 @@
   gap: 12px;
   padding-left: 70px;
 
+  @media (max-width: 834px) {
+    padding-left: 0;
+    gap: 8px;
+  }
+
   .dot {
     width: 20px;
     height: 20px;
@@ -82,12 +140,22 @@
     align-items: center;
     justify-content: center;
 
+    @media (max-width: 834px) {
+      width: 16px;
+      height: 16px;
+    }
+
     &.active::before {
       content: '';
       width: 12px;
       height: 12px;
       border-radius: 50%;
       background-color: var(--color-visit);
+
+      @media (max-width: 834px) {
+        width: 8px;
+        height: 8px;
+      }
     }
   }
 }

package/src/Components/DataDisplay/index.ts

@@ -1,3 +1,13 @@
+// Accordion
+export { default as Accordion } from './Accordion/Accordion';
+export type { default as AccordionProps } from './Accordion/AccordionProps';
+export { default as AccordionContext } from './Accordion/AccordionContext';
+export type { default as AccordionContextInterface } from './Accordion/AccordionContextInterface';
+export { default as AccordionItem } from './Accordion/AccordionItem';
+export type { default as AccordionItemProps } from './Accordion/AccordionItemProps';
+export { default as AccordionProvider } from './Accordion/AccordionProvider';
+export type { default as AccordionProviderInterface } from './Accordion/AccordionProviderInterface';
+
 // DetailsCard
 export { default as DetailsCard } from './DetailsCard/DetailsCard';
 export type { default as DetailsCardProps } from './DetailsCard/DetailsCardProps';
@@ -10,6 +20,18 @@ export type { default as IntroBlockProps } from './IntroBlock/IntroBlockProps';
 export { default as KPIBlock } from './KPIBlock/KPIBlock';
 export type { default as KPIBlockProps } from './KPIBlock/KPIBlockProps';
 
+// PathwayBlock
+export { default as PathwayBlock } from './PathwayBlock/PathwayBlock';
+export type { default as PathwayBlockProps } from './PathwayBlock/PathwayBlockProps';
+
+// ChatItenaryBlock
+export { default as ChatItenaryBlock } from './ChatItenaryBlock/ChatItenaryBlock';
+export type { default as ChatItenaryBlockProps } from './ChatItenaryBlock/ChatItenaryBlockProps';
+
+// TestimonyCard
+export { default as TestimonyCard } from './TestimonyCard/TestimonyCard';
+export type { default as TestimonyCardProps } from './TestimonyCard/TestimonyCardProps';
+
 // Pathway
 export { default as Pathway } from './Pathway/Pathway';
 export type { default as PathwayProps } from './Pathway/PathwayProps';
@@ -18,6 +40,11 @@ export type { default as PathwayProps } from './Pathway/PathwayProps';
 export { default as PromoBannerBlock } from './PromoBannerBlock/PromoBannerBlock';
 export type { default as PromoBannerBlockProps } from './PromoBannerBlock/PromoBannerBlockProps';
 
+// ContactBlock
+export { default as ContactBlock } from './ContactsBlock/ContactsBlock';
+export type { default as ContactBlockProps } from './ContactsBlock/ContactsBlockProps';
+export { default as ContactItem  } from './ContactsBlock/ContactItem';
+export type { default as ContactItemProps } from './ContactsBlock/ContactItemProps';
 //ImageContent
 export {default as ImageContent} from './ImageContent/ImageContent'
-export type {default as ImageContentProps} from './ImageContent/ImageContentProps'
+export type {default as ImageContentProps} from './ImageContent/ImageContentProps'

package/src/Components/Icons/Communication/PaperPlaneTilt/PaperPlaneTilt.tsx

@@ -0,0 +1,37 @@
+import IconProps from "../../IconProps";
+
+const PaperPlaneTilt = ({type}: IconProps) => {
+
+  if (type === 'thin') {
+    return <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+      <path d="M28.0586 3.94003C27.8693 3.74971 27.6319 3.61432 27.3717 3.54828C27.1115 3.48225 26.8382 3.48803 26.5811 3.56503L2.59234 10.8338C2.2982 10.9165 2.03635 11.0871 1.84181 11.3227C1.64728 11.5584 1.52935 11.8478 1.50379 12.1523C1.47824 12.4568 1.54628 12.7618 1.69882 13.0265C1.85135 13.2913 2.08111 13.5032 2.35734 13.6338L13.0586 18.7025C13.1632 18.7517 13.2476 18.8356 13.2973 18.94L18.3661 29.6425C18.4859 29.8996 18.6769 30.1169 18.9163 30.2689C19.1558 30.4208 19.4337 30.501 19.7173 30.5C19.7598 30.5 19.8036 30.5 19.8423 30.5C20.1456 30.4764 20.4342 30.3603 20.6694 30.1674C20.9046 29.9744 21.0749 29.714 21.1573 29.4213L28.4336 5.42128V5.41128C28.5096 5.15503 28.5149 4.88297 28.4489 4.62395C28.3829 4.36493 28.248 4.12861 28.0586 3.94003ZM27.4811 5.13253L20.2023 29.1325C20.1746 29.2303 20.1178 29.3174 20.0393 29.3821C19.9609 29.4467 19.8646 29.486 19.7633 29.4945C19.662 29.5031 19.5605 29.4805 19.4724 29.4299C19.3842 29.3793 19.3135 29.3031 19.2698 29.2113L14.2011 18.5125L20.3561 12.3588C20.4025 12.3123 20.4394 12.2572 20.4645 12.1965C20.4897 12.1358 20.5026 12.0707 20.5026 12.005C20.5026 11.9393 20.4897 11.8743 20.4645 11.8136C20.4394 11.7529 20.4025 11.6977 20.3561 11.6513C20.3096 11.6048 20.2545 11.568 20.1938 11.5428C20.1331 11.5177 20.068 11.5047 20.0023 11.5047C19.9366 11.5047 19.8716 11.5177 19.8109 11.5428C19.7502 11.568 19.695 11.6048 19.6486 11.6513L13.4936 17.8063L2.78609 12.73C2.69166 12.6878 2.61319 12.6166 2.56214 12.5266C2.51109 12.4366 2.49014 12.3327 2.50234 12.23C2.50979 12.126 2.55014 12.0271 2.61756 11.9475C2.68497 11.868 2.77596 11.8119 2.87734 11.7875L26.8623 4.52003C26.907 4.50688 26.9533 4.50015 26.9998 4.50003C27.1311 4.5019 27.2564 4.55533 27.3486 4.64878C27.4121 4.71007 27.4579 4.78734 27.4812 4.87247C27.5045 4.95759 27.5045 5.04743 27.4811 5.13253Z" fill="currentColor"/>
+    </svg>
+  }
+  if (type === 'regular') {
+    return <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+      <path d="M28.415 3.58509C28.1635 3.33375 27.8496 3.15401 27.5055 3.06436C27.1614 2.97472 26.7997 2.97842 26.4575 3.07509H26.4388L2.44626 10.3551C2.0557 10.4674 1.70863 10.696 1.45126 11.0105C1.19388 11.325 1.03842 11.7105 1.00557 12.1155C0.97272 12.5206 1.06404 12.926 1.26738 13.2779C1.47071 13.6297 1.77641 13.9113 2.14376 14.0851L12.8463 19.1538L17.915 29.8563C18.075 30.1991 18.3298 30.4889 18.6492 30.6915C18.9686 30.8942 19.3393 31.0013 19.7175 31.0001C19.775 31.0001 19.8325 30.9976 19.89 30.9926C20.2936 30.9599 20.6776 30.8046 20.9904 30.5474C21.3032 30.2902 21.5299 29.9435 21.64 29.5538L28.915 5.56134C28.915 5.55509 28.915 5.54884 28.915 5.54259C29.0129 5.20129 29.0182 4.84008 28.9304 4.49606C28.8425 4.15204 28.6646 3.83762 28.415 3.58509ZM19.7288 28.9813L19.7225 28.9988L14.8025 18.6126L20.7075 12.7063C20.8871 12.5173 20.9858 12.2655 20.9824 12.0048C20.9791 11.744 20.874 11.4949 20.6896 11.3105C20.5052 11.1261 20.2561 11.021 19.9953 11.0176C19.7346 11.0143 19.4828 11.113 19.2938 11.2926L13.3875 17.1976L3.00001 12.2776H3.01751L27 5.00009L19.7288 28.9813Z" fill="currentColor"/>
+    </svg>
+  }
+  if (type === 'bold') {
+    return <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+      <path d="M28.7673 3.2325C28.4531 2.91823 28.0608 2.69337 27.6309 2.5811C27.2009 2.46883 26.7488 2.4732 26.3211 2.59375L26.2936 2.6025L2.3048 9.875C1.81755 10.0163 1.38481 10.3024 1.06406 10.6955C0.743306 11.0886 0.549727 11.5699 0.509034 12.0756C0.46834 12.5813 0.582457 13.0874 0.836227 13.5267C1.09 13.9659 1.47141 14.3176 1.9298 14.535L12.4698 19.535L17.4698 30.075C17.6694 30.5031 17.9873 30.8653 18.3859 31.1186C18.7846 31.372 19.2474 31.5061 19.7198 31.505C19.791 31.505 19.8636 31.505 19.9361 31.4963C20.4413 31.456 20.9221 31.2617 21.3135 30.9396C21.7049 30.6175 21.988 30.1831 22.1248 29.695L29.3973 5.70625C29.401 5.69734 29.4039 5.68814 29.406 5.67875C29.5266 5.25103 29.531 4.7989 29.4187 4.36893C29.3064 3.93896 29.0816 3.54668 28.7673 3.2325ZM19.6248 27.615L15.4098 18.7163L21.066 13.06C21.3478 12.7782 21.5062 12.396 21.5062 11.9975C21.5062 11.599 21.3478 11.2168 21.066 10.935C20.7843 10.6532 20.4021 10.4949 20.0035 10.4949C19.605 10.4949 19.2228 10.6532 18.941 10.935L13.2848 16.5913L4.3848 12.375L26.2498 5.75L19.6248 27.615Z" fill="currentColor"/>
+    </svg>
+  }
+  if (type === 'fill') {
+    return <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+      <path d="M28.925 5.54242C28.925 5.54242 28.925 5.55492 28.925 5.56117L21.65 29.5537C21.5399 29.9434 21.3132 30.2901 21.0004 30.5472C20.6876 30.8044 20.3036 30.9597 19.9 30.9924C19.8425 30.9974 19.785 30.9999 19.7275 30.9999C19.3492 31.0011 18.9785 30.894 18.6592 30.6914C18.3398 30.4887 18.085 30.1989 17.925 29.8562L13.4612 20.4324C13.4172 20.3392 13.403 20.2346 13.4207 20.133C13.4384 20.0314 13.487 19.9378 13.56 19.8649L20.7175 12.7062C20.8971 12.5171 20.9958 12.2654 20.9924 12.0046C20.9891 11.7438 20.884 11.4947 20.6996 11.3103C20.5152 11.1259 20.2661 11.0208 20.0053 11.0175C19.7446 11.0141 19.4928 11.1128 19.3037 11.2924L12.135 18.4499C12.0621 18.5229 11.9685 18.5715 11.8669 18.5892C11.7653 18.6069 11.6607 18.5927 11.5675 18.5487L2.19249 14.1074C1.8243 13.9387 1.51444 13.6646 1.30216 13.3197C1.08987 12.9748 0.984714 12.5746 0.999992 12.1699C1.02035 11.754 1.17094 11.3549 1.43047 11.0292C1.69 10.7035 2.04533 10.4676 2.44624 10.3549L26.4387 3.07992H26.4575C26.7991 2.98394 27.1601 2.98058 27.5034 3.07017C27.8468 3.15976 28.1601 3.33908 28.4112 3.58972C28.6624 3.84037 28.8423 4.15333 28.9326 4.49648C29.0229 4.83963 29.0203 5.20062 28.925 5.54242Z" fill="currentColor"/>
+    </svg>
+  }
+  if (type === 'duotone') {
+    return <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+      <path opacity="0.2" d="M27.9612 5.27256L20.6837 29.2726C20.6281 29.4681 20.5143 29.6421 20.3574 29.7713C20.2004 29.9005 20.0078 29.9788 19.8052 29.9958C19.6027 30.0128 19.3997 29.9676 19.2235 29.8663C19.0472 29.765 18.906 29.6124 18.8187 29.4288L13.7499 18.7263C13.6511 18.5179 13.4833 18.3501 13.2749 18.2513L2.57244 13.1813C2.38886 13.094 2.23624 12.9528 2.13495 12.7765C2.03365 12.6003 1.98847 12.3973 2.00545 12.1948C2.02242 11.9922 2.10073 11.7996 2.22994 11.6426C2.35916 11.4857 2.53314 11.3719 2.72869 11.3163L26.7287 4.03882C26.8997 3.99089 27.0803 3.98936 27.2521 4.03438C27.4239 4.0794 27.5805 4.16934 27.706 4.29496C27.8315 4.42058 27.9213 4.57736 27.9662 4.74917C28.011 4.92098 28.0093 5.10163 27.9612 5.27256Z" fill="currentColor"/>
+      <path d="M28.415 3.58509C28.1635 3.33375 27.8496 3.15401 27.5055 3.06436C27.1614 2.97472 26.7997 2.97842 26.4575 3.07509H26.4388L2.44626 10.3551C2.0557 10.4674 1.70863 10.696 1.45126 11.0105C1.19388 11.325 1.03842 11.7105 1.00557 12.1155C0.97272 12.5206 1.06404 12.926 1.26738 13.2779C1.47071 13.6297 1.77641 13.9113 2.14376 14.0851L12.8463 19.1538L17.915 29.8563C18.075 30.1991 18.3298 30.4889 18.6492 30.6915C18.9686 30.8942 19.3393 31.0013 19.7175 31.0001C19.775 31.0001 19.8325 30.9976 19.89 30.9926C20.2936 30.9599 20.6776 30.8046 20.9904 30.5474C21.3032 30.2902 21.5299 29.9435 21.64 29.5538L28.915 5.56134C28.915 5.55509 28.915 5.54884 28.915 5.54259C29.0129 5.20129 29.0182 4.84008 28.9304 4.49606C28.8425 4.15204 28.6646 3.83762 28.415 3.58509ZM19.7288 28.9813L19.7225 28.9988L14.8025 18.6126L20.7075 12.7063C20.8871 12.5173 20.9858 12.2655 20.9824 12.0048C20.9791 11.744 20.874 11.4949 20.6896 11.3105C20.5052 11.1261 20.2561 11.021 19.9953 11.0176C19.7346 11.0143 19.4828 11.113 19.2938 11.2926L13.3875 17.1976L3.00001 12.2776H3.01751L27 5.00009L19.7288 28.9813Z" fill="currentColor"/>
+    </svg>
+  }
+
+  return <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+    <path d="M28.2351 3.76497C28.0165 3.54298 27.7419 3.3842 27.4405 3.30543C27.139 3.22666 26.8219 3.23082 26.5226 3.31747H26.5088L2.51759 10.5962C2.1757 10.6942 1.87177 10.8939 1.64627 11.169C1.42077 11.444 1.28441 11.7812 1.25536 12.1356C1.22631 12.4901 1.30594 12.8449 1.48365 13.153C1.66136 13.4611 1.92871 13.7077 2.25009 13.86L12.9513 18.9287C13.003 18.9541 13.0447 18.9958 13.0701 19.0475L18.1401 29.75C18.2801 30.0496 18.5029 30.303 18.7821 30.4802C19.0614 30.6574 19.3856 30.751 19.7163 30.75C19.7663 30.75 19.8176 30.75 19.8676 30.7437C20.2219 30.7159 20.5592 30.58 20.8339 30.3545C21.1086 30.1289 21.3075 29.8246 21.4038 29.4825L28.6788 5.49122V5.47747C28.766 5.17852 28.7707 4.86159 28.6926 4.56016C28.6145 4.25873 28.4564 3.98399 28.2351 3.76497ZM27.2351 5.06497L19.9663 29.0537V29.0675C19.9546 29.1176 19.9267 29.1625 19.887 29.1953C19.8472 29.228 19.7978 29.2468 19.7463 29.2487C19.6947 29.2565 19.642 29.2466 19.5967 29.2208C19.5513 29.1949 19.516 29.1546 19.4963 29.1062L14.4963 18.5612L20.5263 12.5312C20.6671 12.3905 20.7461 12.1996 20.7461 12.0006C20.7461 11.8016 20.6671 11.6107 20.5263 11.47C20.3856 11.3292 20.1947 11.2502 19.9957 11.2502C19.7967 11.2502 19.6058 11.3292 19.4651 11.47L13.4401 17.5L2.89384 12.5C2.84751 12.4784 2.8089 12.4431 2.78324 12.3989C2.75757 12.3547 2.74607 12.3037 2.7503 12.2527C2.75452 12.2018 2.77426 12.1533 2.80685 12.114C2.83945 12.0746 2.88333 12.0461 2.93259 12.0325H2.94634L26.9351 4.75997C26.9772 4.74813 27.0218 4.74793 27.0641 4.75937C27.1063 4.77081 27.1447 4.79348 27.1751 4.82497C27.2059 4.85583 27.2281 4.89422 27.2395 4.93632C27.251 4.97842 27.2511 5.02277 27.2401 5.06497H27.2351Z" fill="currentColor"/>
+  </svg>
+};
+
+export default PaperPlaneTilt;