@hellobetterdigitalnz/selwynui 0.0.1-29 → 0.0.1-31

package/src/Components/DataDisplay/ChatItenaryBlock/chatItenaryBlock.module.scss

@@ -255,6 +255,37 @@
   }
 }
 
+.itineraryContainer {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.chatItineraryBlock {
+  transition: all 0.5s ease;
+
+  &.hero {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &.itinerary {
+    padding: 48px 0 0;
+    border-top: 1px solid var(--color-taste);
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: calc(100vh - 80px); // Adjust based on header height
+
+    @media (max-width: 834px) {
+      padding: 24px 0 0;
+      height: calc(100vh - 60px); // Smaller header on mobile
+    }
+  }
+}
+
 .itineraryWrapper {
   background: var(--color-sand);
   border-radius: 16px;
@@ -262,13 +293,74 @@
   position: relative;
   animation: fadeIn 0.5s ease;
   width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: calc(100vh - 380px);
 
   @media (max-width: 834px) {
     padding: 24px 16px;
     border-radius: 8px;
+    max-height: calc(100vh - 320px);
+  }
+
+  // Optional: Style the scrollbar
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+
+.bottomSpacer {
+  //height: 40px; // Reduced since we're scrolling within container
+  //
+  //@media (max-width: 834px) {
+  //  height: 20px;
+  //}
+}
+
+// Keep all other styles the same...
+.fixedFooter {
+  position: fixed;
+  bottom: 24px;
+  left: 0;
+  right: 0;
+  z-index: 100;
+
+
+  @media (max-width: 834px) {
+    padding: 16px 0;
   }
 }
 
+.footerContent {
+  display: flex;
+  flex-direction: column;
+  padding: 24px 24px 24px 24px;
+  background-color: var(--color-sand);
+  border-radius: 12px;
+  gap: 16px;
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
+
+
+  @media (max-width: 834px) {
+    gap: 12px;
+  }
+}
+
+
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -388,9 +480,9 @@
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: #2D5016;
+  background: var(--color-bg);
   border: none;
-  color: white;
+  color: var(--bg-modal-color);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -407,8 +499,8 @@
   height: 40px;
   border-radius: 50%;
   background: none;
-  border: 1px solid #2D5016;
-  color: #2D5016;
+  border: 1px solid var(--color-bg);
+  color: var(--color-bg);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -460,24 +552,23 @@
 .tags {
   display: flex;
   gap: 12px;
-  margin: 72px 0 16px 0;
+  margin: 0;
   flex-wrap: wrap;
 
   @media (max-width: 834px) {
-    margin: 40px 0 16px 0;
     gap: 8px;
   }
 }
 
 .chatInput {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   padding: 16px;
   min-height: 162px;
-  background: #F5F5F5;
+  background: var(--bg-modal-color);
   border-radius: 12px;
-  border: 2px solid #92C134;
-  margin-top: 24px;
+  border: 2px solid var(--color-taste);
+  margin: 0;
   width: 100%;
   box-sizing: border-box;
 
@@ -505,26 +596,22 @@
     background: none;
     outline: none;
     font-size: 16px;
-    color: #333;
     min-width: 0;
 
     @media (max-width: 834px) {
       font-size: 14px;
     }
 
-    &::placeholder {
-      color: #999;
-    }
   }
 }
 
 .sendButton {
-  width: 88px;
-  height: 51px;
+  width: 88px !important;
+  height: 51px !important;
   border-radius: 48px;
-  background: #2D5016;
+  background: var(--color-bg);
   border: none;
-  color: white;
+  color: var(--bg-modal-color);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -533,7 +620,7 @@
   flex-shrink: 0;
 
   &:hover {
-    background: #234010;
+    background: var(--color-bg);
   }
 
   svg {
@@ -553,11 +640,11 @@
 }
 
 .itinaryHeader {
-  border-top: 1px solid #234010;
+  border-top: 1px solid var(--color-bg);
 
   h4 {
     font-size: var(--font-size-h4);
-    color: #23461F;
+    color: var(--color-bg);
     font-weight: var(--font-weight-bold);
     line-height: var(--line-height-h3);
     letter-spacing: -1.92px;
@@ -574,7 +661,7 @@
     font-weight: var(--font-weight-h4);
     line-height: var(--line-height-h6);
     letter-spacing: -0.56px;
-    color: #23461F;
+    color: var(--color-bg);
     margin-top: 48px;
 
     @media (max-width: 834px) {
@@ -595,4 +682,48 @@
   @media (max-width: 1024px) {
     display: none;
   }
+}
+
+.chatButton {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+  min-width: 0;
+
+  button {
+    width: 100%;
+    max-width: none;
+  }
+
+  .planButtonDesktop {
+    display: block;
+
+    @media (max-width: 768px) {
+      display: none;
+    }
+  }
+
+  .planButtonMobile {
+    background: var(--color-bg);
+    cursor: pointer;
+    border: none;
+    align-items: center;
+    justify-content: center;
+    border-radius: 48px;
+    flex-shrink: 0;
+    height: 48px;
+    width: 48px;
+    display: none;
+    padding: 0;
+
+    svg {
+      color: var(--color-taste);
+      width: 20px;
+      height: 20px;
+    }
+
+    @media (max-width: 768px) {
+      display: flex;
+    }
+  }
 }

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

@@ -0,0 +1,47 @@
+// @ts-ignore
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react-vite";
+import ListingDetailBlock from "./ListingDetailBlock";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+
+const meta: Meta = {
+  title: "Layout / ListingDetailBlock",
+  component: ListingDetailBlock,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ["autodocs"]
+}
+
+export default meta;
+
+type Story = StoryObj<typeof ListingDetailBlock>;
+
+export const Default: Story = {
+  render: () => (
+    <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="visit" level="light">
+      <ListingDetailBlock
+        title="For beginners and kids the dedicated learner slope has gentle runs, easy sunkid carpet and platter lifts."
+        description={`Those more advanced can enjoy the long cruising runs by taking the Easy Rider chairlift and three T-bars to the top. For the more adventurous there's challenging terrains and a freestyle park. A fleet of rental equipment is available for hire and a range of professional lessons available.\n\nThose more advanced can enjoy the long cruising runs by taking the Easy Rider chairlift and three T-bars to the top. For the more adventurous there’s challenging terrains and a freestyle park. A fleet of rental equipment is available for hire and a range of professional lessons available.\n\nPorters Lodge at the base of the mountain provides lodging as well as a fantastic restaurant and bar. Enjoy a dedicated snow play area adjacent to the lodge for tobogganing, the perfect setting for a family adventure.`}
+        facilities={[
+          "Hot food",
+          "Ski school",
+          "Chairlift (1)",
+          "T-bars (3)",
+          "Pomas (1)",
+          "Magic carpet (1)",
+          "Beds (36)",
+          "Shuttle bus",
+          "Gear rental",
+        ]}
+        distance="91 km, approximately 1.25 hours"
+        elevation="Top 1980m / Base 1302m"
+        address="State Highway 73\nSelwyn, New Zealand"
+        hours="9am–4pm, daily during winter"
+        phone="03 318 4731"
+        websiteUrl="https://porters.nz"
+        websiteText="WEBSITE"
+      />
+    </ElementHolder>
+  ),
+};

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

@@ -0,0 +1,98 @@
+import { ListingDetailBlockProps } from "./ListingDetailBlockProps";
+import styles from "./ListingDetailBlock.module.scss";
+import {CheckCircle, Clock, DeviceMobile, MapPin, Mountains, Path} from "../../Icons";
+import {Button} from "../../Form";
+import ArrowRight from "../../Icons/Arrows/ArrowRight/ArrowRight.tsx";
+
+const ListingDetailBlock = ({
+                              title,
+                              description,
+                              facilities,
+                              distance,
+                              elevation,
+                              address,
+                              hours,
+                              phone,
+                              websiteUrl,
+                            }: ListingDetailBlockProps) => {
+  return (
+    <div className={styles.listingDetail}>
+      {/* Main Content - Left */}
+      <div className={styles.mainContent}>
+        <h2 className={styles.title}>{title}</h2>
+        <p className={styles.description}>{description}</p>
+
+        <h3 className={styles.sectionTitle}>Facilities</h3>
+        <ul className={styles.facilitiesList}>
+          {facilities.map((facility, index) => (
+            <li key={index} className={styles.facilityItem}>
+              <CheckCircle type={'fill'}/> {facility}
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {/* Sidebar - Right */}
+      <div className={styles.sidebar}>
+        {distance && (
+          <div className={styles.infoItem}>
+            <Path type={'fill'}/>
+            <div>
+              <div className={styles.infoLabel}>Distance from Christchurch Airport</div>
+              <div className={styles.infoValue}>{distance}</div>
+            </div>
+          </div>
+        )}
+
+        {elevation && (
+          <div className={styles.infoItem}>
+            <Mountains type={'fill'}/>
+            <div>
+              <div className={styles.infoLabel}>Elevations</div>
+              <div className={styles.infoValue}>{elevation}</div>
+            </div>
+          </div>
+        )}
+
+        {address && (
+          <div className={styles.infoItem}>
+            <MapPin type={'fill'}/>
+            <div>
+              <div className={styles.infoLabel}>Address</div>
+              <div className={styles.infoValue}>{address}</div>
+            </div>
+          </div>
+        )}
+
+        {hours && (
+          <div className={styles.infoItem}>
+            <Clock type={'fill'}/>
+            <div>
+              <div className={styles.infoLabel}>Hours</div>
+              <div className={styles.infoValue}>{hours}</div>
+            </div>
+          </div>
+        )}
+
+        {phone && (
+          <div className={styles.infoItem}>
+            <DeviceMobile type={'fill'}/>
+            <div>
+              <div className={styles.infoLabel}>Phone</div>
+              <div className={styles.infoValue}>{phone}</div>
+            </div>
+          </div>
+        )}
+
+        {websiteUrl && (
+
+          <div>
+          <Button label={'WEBSITE'} type={'button'} size={'default'} level={"primary"} style={'solid'} secondaryIcon={<ArrowRight/>}  />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ListingDetailBlock;

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

@@ -1,8 +1,15 @@
+// ListingDetailBlockProps.ts
+export interface ListingDetailBlockProps {
+  title: string;
+  description: string;
+  facilities: string[];
 
-export interface ListingDetailBlockProps{
-  title: string,
-  description: string
-  facilities: string[],
-  contact: string [],
-  location: string
-}
+  // New structured contact/info fields to match the design
+  distance?: string;
+  elevation?: string;
+  address?: string;
+  hours?: string;
+  phone?: string;
+  websiteUrl?: string;
+  websiteText?: string; // e.g., "WEBSITE →"
+}

package/src/Components/DataDisplay/ListingDetailBlock/listingDetailBlock.module.scss

@@ -0,0 +1,125 @@
+.listingDetail {
+    display: flex;
+    gap: 48px;
+    padding: 32px;
+    border-radius: 8px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+
+    &::before {
+        content: '';
+        position: absolute;
+        left: 50%;
+        top: 32px;
+        bottom: 32px;
+        width: 1px;
+        background: var(--color-bg);
+        transform: translateX(-50%);
+        z-index: 1;
+        pointer-events: none;
+    }
+
+    /* Optional: Hide divider on mobile when layout becomes stacked */
+    @media (max-width: 900px) {
+        &::before {
+            display: none;
+        }
+    }
+}
+
+.mainContent {
+    width: 50%;
+    padding-left: 152px;
+    padding-right: 72px;
+
+    .title {
+        font-size: 48px;
+        font-weight: 400;
+        line-height: 1;
+        letter-spacing: -1.92px;
+        margin: 0 0 72px 0;
+    }
+
+    .description {
+        font-size: 24px;
+        line-height: 1.3;
+        font-weight: 400;
+        margin-bottom: 72px;
+    }
+
+    .sectionTitle {
+        font-size: 24px;
+        font-weight: 600;
+        margin: 72px 0 32px 0;
+    }
+}
+
+.facilitiesList {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px 24px;
+}
+
+.facilityItem {
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.4;
+    gap: 12px;
+
+    svg {
+        height: 32px;
+        width: 32px;
+        color: var(--color-bg);
+    }
+}
+
+
+.sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 72px;
+    padding-left: 72px;
+}
+
+.infoItem {
+    display: flex;
+    gap: 16px;
+    align-items: flex-start;
+
+    svg {
+        color: var(--color-taste);
+        width: 48px;
+        height: 48px;
+    }
+}
+
+
+.infoLabel {
+    font-size: 24px;
+    letter-spacing: -0.48px;
+    line-height: 1.3;
+    font-weight: 700;
+}
+
+.infoValue {
+    font-size: 24px;
+    line-height: 1.3;
+    font-weight: 400;
+    margin-top: 16px;
+}
+
+
+
+// Responsive
+@media (max-width: 900px) {
+    .listingDetail {
+        grid-template-columns: 1fr;
+    }
+    .sidebar {
+        order: -1;
+    }
+}

package/src/Components/Icons/SystemAndDevice/CheckCircle/CheckCircle.tsx

@@ -0,0 +1,35 @@
+import IconProps from "../../IconProps";
+
+const CheckCircle = ({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="M21.3538 12.6462C21.4002 12.6927 21.4371 12.7478 21.4623 12.8085C21.4874 12.8692 21.5004 12.9343 21.5004 13C21.5004 13.0657 21.4874 13.1308 21.4623 13.1915C21.4371 13.2522 21.4002 13.3073 21.3538 13.3538L14.3538 20.3538C14.3073 20.4002 14.2522 20.4371 14.1915 20.4623C14.1308 20.4874 14.0657 20.5004 14 20.5004C13.9343 20.5004 13.8692 20.4874 13.8085 20.4623C13.7478 20.4371 13.6927 20.4002 13.6463 20.3538L10.6463 17.3538C10.5524 17.2599 10.4997 17.1327 10.4997 17C10.4997 16.8673 10.5524 16.7401 10.6463 16.6462C10.7401 16.5524 10.8673 16.4997 11 16.4997C11.1327 16.4997 11.2599 16.5524 11.3538 16.6462L14 19.2925L20.6463 12.6462C20.6927 12.5998 20.7478 12.5629 20.8085 12.5377C20.8692 12.5126 20.9343 12.4996 21 12.4996C21.0657 12.4996 21.1308 12.5126 21.1915 12.5377C21.2522 12.5629 21.3073 12.5998 21.3538 12.6462ZM28.5 16C28.5 18.4723 27.7669 20.889 26.3934 22.9446C25.0199 25.0002 23.0676 26.6024 20.7835 27.5485C18.4995 28.4946 15.9861 28.7421 13.5614 28.2598C11.1366 27.7775 8.90933 26.587 7.16117 24.8388C5.41301 23.0907 4.2225 20.8634 3.74019 18.4386C3.25787 16.0139 3.50542 13.5005 4.45151 11.2165C5.39761 8.93238 6.99976 6.98015 9.05538 5.60663C11.111 4.23311 13.5277 3.5 16 3.5C19.3141 3.50364 22.4914 4.82177 24.8348 7.16518C27.1782 9.5086 28.4964 12.6859 28.5 16ZM27.5 16C27.5 13.7255 26.8255 11.5021 25.5619 9.61094C24.2983 7.71978 22.5022 6.24579 20.4009 5.37539C18.2995 4.50498 15.9872 4.27724 13.7565 4.72097C11.5257 5.1647 9.47658 6.25997 7.86828 7.86827C6.25997 9.47658 5.1647 11.5257 4.72097 13.7565C4.27724 15.9872 4.50498 18.2995 5.37539 20.4009C6.2458 22.5022 7.71978 24.2983 9.61095 25.5619C11.5021 26.8255 13.7255 27.5 16 27.5C19.049 27.4967 21.9721 26.284 24.1281 24.1281C26.284 21.9721 27.4967 19.049 27.5 16Z" 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="M21.7075 12.2925C21.8005 12.3854 21.8742 12.4957 21.9246 12.6171C21.9749 12.7385 22.0008 12.8686 22.0008 13C22.0008 13.1314 21.9749 13.2615 21.9246 13.3829C21.8742 13.5043 21.8005 13.6146 21.7075 13.7075L14.7075 20.7075C14.6146 20.8005 14.5043 20.8742 14.3829 20.9246C14.2615 20.9749 14.1314 21.0008 14 21.0008C13.8686 21.0008 13.7385 20.9749 13.6171 20.9246C13.4957 20.8742 13.3854 20.8005 13.2925 20.7075L10.2925 17.7075C10.1049 17.5199 9.99945 17.2654 9.99945 17C9.99945 16.7346 10.1049 16.4801 10.2925 16.2925C10.4801 16.1049 10.7346 15.9994 11 15.9994C11.2654 15.9994 11.5199 16.1049 11.7075 16.2925L14 18.5863L20.2925 12.2925C20.3854 12.1995 20.4957 12.1258 20.6171 12.0754C20.7385 12.0251 20.8686 11.9992 21 11.9992C21.1314 11.9992 21.2615 12.0251 21.3829 12.0754C21.5043 12.1258 21.6146 12.1995 21.7075 12.2925ZM29 16C29 18.5712 28.2376 21.0846 26.8091 23.2224C25.3807 25.3603 23.3503 27.0265 20.9749 28.0104C18.5995 28.9944 15.9856 29.2518 13.4638 28.7502C10.9421 28.2486 8.6257 27.0105 6.80762 25.1924C4.98953 23.3743 3.75141 21.0579 3.2498 18.5362C2.74819 16.0144 3.00563 13.4006 3.98957 11.0251C4.97351 8.64968 6.63975 6.61935 8.77759 5.1909C10.9154 3.76244 13.4288 3 16 3C19.4467 3.00364 22.7512 4.37445 25.1884 6.81163C27.6256 9.24882 28.9964 12.5533 29 16ZM27 16C27 13.8244 26.3549 11.6977 25.1462 9.88873C23.9375 8.07979 22.2195 6.66989 20.2095 5.83733C18.1995 5.00476 15.9878 4.78692 13.854 5.21136C11.7202 5.6358 9.76021 6.68345 8.22183 8.22183C6.68345 9.7602 5.63581 11.7202 5.21137 13.854C4.78693 15.9878 5.00477 18.1995 5.83733 20.2095C6.66989 22.2195 8.07979 23.9375 9.88873 25.1462C11.6977 26.3549 13.8244 27 16 27C18.9164 26.9967 21.7123 25.8367 23.7745 23.7745C25.8367 21.7123 26.9967 18.9164 27 16Z" 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="M22.0613 11.9388C22.2011 12.0781 22.312 12.2437 22.3878 12.426C22.4635 12.6083 22.5024 12.8038 22.5024 13.0013C22.5024 13.1987 22.4635 13.3942 22.3878 13.5765C22.312 13.7588 22.2011 13.9244 22.0613 14.0638L15.0613 21.0637C14.9219 21.2036 14.7563 21.3145 14.574 21.3903C14.3917 21.466 14.1962 21.5049 13.9988 21.5049C13.8013 21.5049 13.6059 21.466 13.4235 21.3903C13.2412 21.3145 13.0756 21.2036 12.9363 21.0637L9.93626 18.0637C9.79673 17.9242 9.68605 17.7586 9.61053 17.5763C9.53502 17.394 9.49615 17.1986 9.49615 17.0012C9.49615 16.8039 9.53502 16.6085 9.61053 16.4262C9.68605 16.2439 9.79673 16.0783 9.93626 15.9388C10.0758 15.7992 10.2414 15.6885 10.4237 15.613C10.606 15.5375 10.8014 15.4986 10.9988 15.4986C11.1961 15.4986 11.3915 15.5375 11.5738 15.613C11.7561 15.6885 11.9217 15.7992 12.0613 15.9388L14 17.875L19.9388 11.935C20.0783 11.7958 20.2439 11.6854 20.4262 11.6103C20.6084 11.5351 20.8037 11.4966 21.0008 11.4969C21.1979 11.4973 21.393 11.5365 21.575 11.6123C21.757 11.6881 21.9222 11.799 22.0613 11.9388ZM29.5 16C29.5 18.67 28.7082 21.2801 27.2248 23.5002C25.7414 25.7203 23.633 27.4506 21.1662 28.4724C18.6994 29.4942 15.985 29.7615 13.3663 29.2406C10.7475 28.7197 8.34207 27.434 6.45406 25.5459C4.56606 23.6579 3.28031 21.2525 2.7594 18.6337C2.2385 16.015 2.50585 13.3006 3.52763 10.8338C4.54942 8.36697 6.27974 6.25856 8.49981 4.77516C10.7199 3.29176 13.33 2.5 16 2.5C19.5792 2.50397 23.0107 3.92756 25.5416 6.45844C28.0724 8.98932 29.496 12.4208 29.5 16ZM26.5 16C26.5 13.9233 25.8842 11.8932 24.7304 10.1665C23.5767 8.4398 21.9368 7.09399 20.0182 6.29926C18.0996 5.50454 15.9884 5.29661 13.9516 5.70175C11.9148 6.1069 10.0438 7.10693 8.57538 8.57538C7.10693 10.0438 6.10691 11.9148 5.70176 13.9516C5.29662 15.9884 5.50455 18.0996 6.29927 20.0182C7.09399 21.9368 8.4398 23.5767 10.1665 24.7304C11.8932 25.8842 13.9233 26.5 16 26.5C18.7839 26.497 21.4529 25.3898 23.4213 23.4213C25.3898 21.4528 26.497 18.7839 26.5 16Z" 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="M16 3C13.4288 3 10.9154 3.76244 8.77759 5.1909C6.63975 6.61935 4.97351 8.64968 3.98957 11.0251C3.00563 13.4006 2.74819 16.0144 3.2498 18.5362C3.75141 21.0579 4.98953 23.3743 6.80762 25.1924C8.6257 27.0105 10.9421 28.2486 13.4638 28.7502C15.9856 29.2518 18.5995 28.9944 20.9749 28.0104C23.3503 27.0265 25.3807 25.3603 26.8091 23.2224C28.2376 21.0846 29 18.5712 29 16C28.9964 12.5533 27.6256 9.24882 25.1884 6.81163C22.7512 4.37445 19.4467 3.00364 16 3ZM21.7075 13.7075L14.7075 20.7075C14.6146 20.8005 14.5043 20.8742 14.3829 20.9246C14.2615 20.9749 14.1314 21.0008 14 21.0008C13.8686 21.0008 13.7385 20.9749 13.6171 20.9246C13.4957 20.8742 13.3854 20.8005 13.2925 20.7075L10.2925 17.7075C10.1049 17.5199 9.99945 17.2654 9.99945 17C9.99945 16.7346 10.1049 16.4801 10.2925 16.2925C10.4801 16.1049 10.7346 15.9994 11 15.9994C11.2654 15.9994 11.5199 16.1049 11.7075 16.2925L14 18.5863L20.2925 12.2925C20.3854 12.1996 20.4957 12.1259 20.6171 12.0756C20.7385 12.0253 20.8686 11.9994 21 11.9994C21.1314 11.9994 21.2615 12.0253 21.3829 12.0756C21.5043 12.1259 21.6146 12.1996 21.7075 12.2925C21.8004 12.3854 21.8741 12.4957 21.9244 12.6171C21.9747 12.7385 22.0006 12.8686 22.0006 13C22.0006 13.1314 21.9747 13.2615 21.9244 13.3829C21.8741 13.5043 21.8004 13.6146 21.7075 13.7075Z" 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="M28 16C28 18.3734 27.2962 20.6935 25.9776 22.6668C24.6591 24.6402 22.7849 26.1783 20.5922 27.0866C18.3995 27.9948 15.9867 28.2324 13.6589 27.7694C11.3312 27.3064 9.19295 26.1635 7.51472 24.4853C5.83649 22.8071 4.6936 20.6689 4.23058 18.3411C3.76756 16.0133 4.0052 13.6005 4.91345 11.4078C5.8217 9.21509 7.35977 7.34094 9.33316 6.02236C11.3066 4.70379 13.6266 4 16 4C19.1826 4 22.2348 5.26428 24.4853 7.51472C26.7357 9.76516 28 12.8174 28 16Z" fill="currentColor"/>
+      <path d="M21.7075 12.2925C21.8005 12.3854 21.8742 12.4957 21.9246 12.6171C21.9749 12.7385 22.0008 12.8686 22.0008 13C22.0008 13.1314 21.9749 13.2615 21.9246 13.3829C21.8742 13.5043 21.8005 13.6146 21.7075 13.7075L14.7075 20.7075C14.6146 20.8005 14.5043 20.8742 14.3829 20.9246C14.2615 20.9749 14.1314 21.0008 14 21.0008C13.8686 21.0008 13.7385 20.9749 13.6171 20.9246C13.4957 20.8742 13.3854 20.8005 13.2925 20.7075L10.2925 17.7075C10.1049 17.5199 9.99945 17.2654 9.99945 17C9.99945 16.7346 10.1049 16.4801 10.2925 16.2925C10.4801 16.1049 10.7346 15.9994 11 15.9994C11.2654 15.9994 11.5199 16.1049 11.7075 16.2925L14 18.5863L20.2925 12.2925C20.3854 12.1995 20.4957 12.1258 20.6171 12.0754C20.7385 12.0251 20.8686 11.9992 21 11.9992C21.1314 11.9992 21.2615 12.0251 21.3829 12.0754C21.5043 12.1258 21.6146 12.1995 21.7075 12.2925ZM29 16C29 18.5712 28.2376 21.0846 26.8091 23.2224C25.3807 25.3603 23.3503 27.0265 20.9749 28.0104C18.5995 28.9944 15.9856 29.2518 13.4638 28.7502C10.9421 28.2486 8.6257 27.0105 6.80762 25.1924C4.98953 23.3743 3.75141 21.0579 3.2498 18.5362C2.74819 16.0144 3.00563 13.4006 3.98957 11.0251C4.97351 8.64968 6.63975 6.61935 8.77759 5.1909C10.9154 3.76244 13.4288 3 16 3C19.4467 3.00364 22.7512 4.37445 25.1884 6.81163C27.6256 9.24882 28.9964 12.5533 29 16ZM27 16C27 13.8244 26.3549 11.6977 25.1462 9.88873C23.9375 8.07979 22.2195 6.66989 20.2095 5.83733C18.1995 5.00476 15.9878 4.78692 13.854 5.21136C11.7202 5.6358 9.76021 6.68345 8.22183 8.22183C6.68345 9.7602 5.63581 11.7202 5.21137 13.854C4.78693 15.9878 5.00477 18.1995 5.83733 20.2095C6.66989 22.2195 8.07979 23.9375 9.88873 25.1462C11.6977 26.3549 13.8244 27 16 27C18.9164 26.9967 21.7123 25.8367 23.7745 23.7745C25.8367 21.7123 26.9967 18.9164 27 16Z" 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="M21.53 12.47C21.6705 12.6106 21.7493 12.8012 21.7493 13C21.7493 13.1988 21.6705 13.3894 21.53 13.53L14.53 20.53C14.3894 20.6705 14.1988 20.7493 14 20.7493C13.8013 20.7493 13.6106 20.6705 13.47 20.53L10.47 17.53C10.3375 17.3878 10.2654 17.1998 10.2688 17.0055C10.2723 16.8112 10.351 16.6258 10.4884 16.4884C10.6258 16.351 10.8112 16.2723 11.0055 16.2688C11.1998 16.2654 11.3878 16.3375 11.53 16.47L14 18.9387L20.47 12.47C20.6106 12.3295 20.8013 12.2507 21 12.2507C21.1988 12.2507 21.3894 12.3295 21.53 12.47ZM28.75 16C28.75 18.5217 28.0022 20.9868 26.6012 23.0835C25.2003 25.1802 23.209 26.8144 20.8792 27.7795C18.5495 28.7445 15.9859 28.997 13.5126 28.505C11.0393 28.0131 8.76751 26.7987 6.98439 25.0156C5.20127 23.2325 3.98696 20.9607 3.49499 18.4874C3.00303 16.0141 3.25552 13.4505 4.22054 11.1208C5.18556 8.79103 6.81976 6.79975 8.91648 5.39876C11.0132 3.99777 13.4783 3.25 16 3.25C19.3803 3.25397 22.621 4.59854 25.0112 6.98877C27.4015 9.379 28.746 12.6197 28.75 16ZM27.25 16C27.25 13.775 26.5902 11.5999 25.354 9.74984C24.1179 7.89978 22.3609 6.45784 20.3052 5.60636C18.2495 4.75487 15.9875 4.53208 13.8052 4.96617C11.623 5.40025 9.6184 6.47171 8.04505 8.04505C6.47171 9.61839 5.40025 11.6229 4.96617 13.8052C4.53209 15.9875 4.75488 18.2495 5.60636 20.3052C6.45785 22.3609 7.89979 24.1179 9.74984 25.354C11.5999 26.5902 13.775 27.25 16 27.25C18.9827 27.2467 21.8422 26.0604 23.9513 23.9513C26.0604 21.8422 27.2467 18.9827 27.25 16Z" fill="currentColor"/>
+  </svg>
+};
+
+export default CheckCircle;

package/src/Components/Icons/index.ts

@@ -141,6 +141,7 @@ export { default as ToggleLeft } from './SystemAndDevice/ToggleLeft/ToggleLeft.t
 export { default as CloudCheck } from './SystemAndDevice/CloudCheck/CloudCheck.tsx';
 export { default as DeviceMobile } from './SystemAndDevice/DeviceMobile/DeviceMobile.tsx';
 export { default as Desktop } from './SystemAndDevice/Desktop/Desktop.tsx';
+export { default as CheckCircle} from './SystemAndDevice/CheckCircle/CheckCircle.tsx';