@hellobetterdigitalnz/selwynui 0.0.1

package/src/Components/DataDisplay/PromoBannerBlock/PromoBannerBlockProps.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+
+interface PromoBannerBlockProps {
+    IntroTitle?: string;
+    IntroText?: string;
+    BrandPiller?: string;
+    PillerTitle?: 'Visit' | 'Live' | 'Business' | 'Participate' | 'Taste' | 'Main';
+    Title?: string;
+    BoldTitle?: string;
+    Content?: string;
+    Image?: string;
+    Button?: ReactNode;
+    extraClass?: string;
+}
+
+export default PromoBannerBlockProps;

package/src/Components/DataDisplay/PromoBannerBlock/promo-banner-bg-design.tsx

@@ -0,0 +1,14 @@
+const PromoBannerBgDesign = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="543" height="490" viewBox="0 0 543 490" fill="none">
+            <g opacity="0.05">
+                <path d="M0 251.765C145.603 251.765 263.669 358.442 263.669 490H0V251.765Z" fill="#92C134" />
+                <path d="M0 0.0778264C145.603 0.0778264 263.669 106.755 263.669 238.313H0V0.0778264Z" fill="#92C134" />
+                <path d="M543 489.922C543 358.364 424.934 251.687 279.331 251.687V489.922H543Z" fill="#92C134" />
+                <path d="M543 238.235C543 106.677 424.934 0 279.331 0V238.235H543Z" fill="#92C134" />
+            </g>
+        </svg>
+    )
+}
+
+export default PromoBannerBgDesign;

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

@@ -0,0 +1,172 @@
+.promoBannerBlock {
+    overflow-x: hidden;
+    padding: 48px 16px;
+
+    .promoBannerBlockContainer {
+        .promoBannerTop {
+            .promoBannerTopLeft {
+                padding: 0 16px;
+
+                h1 {
+                    font-size: var(--font-size-h5);
+                    line-height: var(--line-height-h5);
+                    font-weight: var(--font-weight-h4);
+                }
+            }
+
+            .promoBannerTopRight {
+                padding: 48px 16px;
+
+                h1 {
+                    font-size: var(--font-size-regular);
+                    font-weight: var(--font-weight-body-regular);
+                    line-height: var(--line-height-label);
+                }
+            }
+
+            .promoBannerBgDesignContainer {
+                display: none;
+            }
+
+        }
+
+        .promoBannerBottom {
+            background-color: var(--pathway-card-bg);
+            border-radius: 16px 16px 100px 0;
+            margin-bottom: -30px;
+            
+
+            .promoBannerBottomLeft {
+                color: var(--pathway-card-text);
+                padding: 32px 16px;
+
+                .promoBannerBrandPiller {
+                    display: flex;
+                    align-items: center;
+                    gap: 16px;
+                    margin: auto;
+                    font-size: var(--font-size-body-regular);
+                }
+
+                .promoBannerTitleContainer {
+                    padding-block: 32px;
+
+                    h1 {
+                        font-size: var(--font-size-small);
+                        font-weight: var(--font-weight-body-sm);
+                        line-height: var(--line-height-h5);
+                    }
+
+                    h2 {
+                        font-size: var(--font-size-small);
+                        font-weight: var(--font-weight-bold);
+                        line-height: var(--line-height-body-regular);
+                    }
+                }
+
+                p {
+                    font-size: var(--font-size-body-regular);
+                    font-weight: var(--font-weight-body-regular);
+                    line-height: var(--line-height-body-regular);
+                    padding-bottom: 32px;
+                }
+            }
+
+            .promoBannerBottomRight {
+                img {
+                    height: 100%;
+                    width: 100%;
+                    object-fit: cover;
+                }
+            }
+        }
+    }
+
+    @media screen and (min-width: 992px) {
+        padding: 120px 0;
+
+        .promoBannerBlockContainer {
+            .promoBannerTop {
+                display: flex;
+                flex-grow: 1;
+                margin: 0 -72px;
+                position: relative;
+
+                .promoBannerTopLeft {
+                    padding: 0 72px;
+                    width: 50%;
+
+                    h1 {
+                        font-size: var(--font-size-h4);
+                        line-height: var(--line-height-h4);
+                    }
+                }
+
+                .promoBannerTopRight {
+                    width: 50%;
+                    padding: 0 72px;
+
+                    h1 {
+                        font-size: var(--font-size-small);
+                    }
+                }
+
+                .promoBannerVerticalLine {
+                    background: var(--color-text);
+                    width: 1px;
+                }
+
+                .promoBannerBgDesignContainer {
+                    display: block;
+                    position: absolute;
+                    top: -120px;
+                    bottom: 0;
+                    right: -120px;
+                }
+
+            }
+
+            .promoBannerBottom {
+                display: flex;
+                padding-top: 90px;
+                background-color: transparent;
+
+                .promoBannerBottomLeft {
+                    background-color: var(--pathway-card-bg);
+                    padding: 72px 90px 72px 72px;
+                    border-radius: 16px 0 0 16px;
+                    width: 50%;
+
+                    .promoBannerTitleContainer {
+                        padding-block: 48px;
+
+                        h1 {
+                            font-size: var(--font-size-h3);
+                            font-weight: var(--font-weight-h3);
+                            line-height: var(--line-height-h3);
+                        }
+
+                        h2 {
+                            font-size: var(--font-size-h3);
+                            line-height: var(--line-height-h3);
+                        }
+                    }
+
+                    p {
+                        padding-bottom: 48px;
+                    }
+                }
+
+                .promoBannerBottomRight {
+                    width: 50%;
+
+                    img {
+                        border-radius: 0 16px 96px 0;
+                    }
+                }
+            }
+
+        }
+    }
+
+}

package/src/Components/DataDisplay/index.ts

@@ -0,0 +1,19 @@
+// DetailsCard
+export { default as DetailsCard } from './DetailsCard/DetailsCard';
+export type { default as DetailsCardProps } from './DetailsCard/DetailsCardProps';
+
+// IntroBlock
+export { default as IntroBlock } from './IntroBlock/IntroBlock';
+export type { default as IntroBlockProps } from './IntroBlock/IntroBlockProps';
+
+// KPIBlock
+export { default as KPIBlock } from './KPIBlock/KPIBlock';
+export type { default as KPIBlockProps } from './KPIBlock/KPIBlockProps';
+
+// Pathway
+export { default as Pathway } from './Pathway/Pathway';
+export type { default as PathwayProps } from './Pathway/PathwayProps';
+
+// PromoBanner
+export { default as PromoBannerBlock } from './PromoBannerBlock/PromoBannerBlock';
+export type { default as PromoBannerBlockProps } from './PromoBannerBlock/PromoBannerBlockProps';

package/src/Components/Form/Button/Button.stories.tsx

@@ -0,0 +1,42 @@
+// @ts-ignore
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Button from './Button';
+import ArrowRight from '../../Icons/Arrows/ArrowRight/ArrowRight';
+
+const meta : Meta<typeof Button> = {
+    title: "Form / Button",
+    component: Button,
+
+}
+
+export default meta;
+type Story = StoryObj<typeof Button>
+
+export const Primary: Story = {
+    args: {
+        label: "BUTTON TEXT",
+        style: "solid",
+        size: "default",
+        level: "primary"
+    },
+};
+
+export const Secondary: Story = {
+    args: {
+        label: "BUTTON TEXT",
+        style: "hollow",
+        size: "default",
+        level: "secondary"
+    }
+}
+
+export const WithIcon: Story = {
+    args: {
+        label: "BUTTON TEXT",
+        style: "solid",
+        size: "default",
+        level: "primary",
+        icon: <ArrowRight/>
+    }
+}

package/src/Components/Form/Button/Button.tsx

@@ -0,0 +1,69 @@
+import cx from "classnames";
+import ButtonProps from './ButtonProps';
+import styles from "./button.module.scss";
+
+const Button = (props: ButtonProps) => {
+    const {
+        type = "button",
+        size = "default",
+        piller = "visit",
+        style = "solid",
+        level = "primary",
+        icon,
+        label,
+        ...args
+    } = props;
+
+    const classes = [
+        "button",
+        "btn",
+        `btn-${piller}`,
+        `btn-${size}`,
+        `btn-${style}`,
+        `btn-${level}`,
+        styles.button
+    ];
+
+    if (size === "large") {
+        classes.push(styles.large);
+    } else if (size === "small") {
+        classes.push(styles.small);
+    } else if (size === "default") {
+        classes.push(styles.default);
+    }
+
+    if (piller === "visit") {
+        classes.push(styles.visit);
+    } else if (piller === "taste") {
+        classes.push(styles.taste);
+    } else if (piller === "live") {
+        classes.push(styles.live);
+    } else if (piller === "business") {
+        classes.push(styles.business);
+    } else if (piller === "main") {
+        classes.push(styles.main);
+    } else if (piller === "participate") {
+        classes.push(styles.participate)
+    }
+
+    if (style === "solid") {
+        classes.push(styles.solid);
+        classes.push(styles[`solid-${level}`]);
+    } else if (style === "hollow") {
+        classes.push(styles.hollow);
+        classes.push(styles[`hollow-${level}`]);
+    }
+
+    return (
+        <button type={type} className={cx(classes)} {...args}>
+            <div className={styles.text}>
+                <div className={styles.labelContainer}>
+                    <div className={styles.buttonLabel}>{label} </div>
+                    {icon && <span className={styles.buttonIcon}>{icon}</span>}
+                </div>
+            </div>
+        </button>
+    );
+}
+
+export default Button;

package/src/Components/Form/Button/ButtonProps.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+
+interface ButtonProps {
+    type?: "button"
+    size?: "default" | "large" | "small";
+    style?: "solid" | "hollow";
+    label: string;
+    piller?: 'visit' | 'live' | 'business' | 'participate' | 'taste' | 'main';
+    level?: "primary" | "secondary" | "light"; 
+    icon?: ReactNode;
+    onClick?: () => void;
+    onHover?: () => void;
+    onFocus?: () => void;
+}
+
+export default ButtonProps;

package/src/Components/Form/Button/button.module.scss

@@ -0,0 +1,132 @@
+@use "../../../variable.scss" as *;
+
+.button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  transition: linear all 300ms;
+  font-family: var(--font);
+  border-radius: 48px;
+
+  span {
+    font-size: var(--font-size-button);
+    font-weight: var(--font-weight-button);
+    line-height: var(--line-height-button);
+  }
+
+
+  &.solid {}
+
+  &.hollow {}
+
+  &.noBorder {
+    border-color: transparent;
+
+    span {
+      text-decoration-line: underline;
+      --font-weight-button: 400;
+    }
+
+    .text small {
+      color: var(--color-gray-600);
+    }
+
+  }
+
+  &.default {
+    padding: var(--spacing-1\/2) var(--spacing-1-1\/4);
+    min-height: 40px;
+
+    &.noBorder {
+      padding: var(--spacing-1\/2) var(--spacing-3\/4);
+    }
+  }
+
+  &.large {
+    padding: var(--spacing-1\/2) var(--spacing-2);
+    height: 48px;
+
+    &.noBorder {
+      padding: var(--spacing-1\/2) var(--spacing-1);
+    }
+  }
+
+  &.small {
+    padding: var(--spacing-1\/4) var(--spacing-3\/4);
+    min-height: 32px;
+
+    &.noBorder {
+      padding: var(--spacing-1\/4) var(--spacing-1\/2);
+    }
+  }
+
+  @each $color in $colors {
+    &.solid-#{$color} {
+      color: var(--color-text);
+      background-color: var(--color-bg);
+
+      .text small {
+        color: var(--color-lite);
+      }
+
+
+      &:hover:enabled {
+        // background-color: var(--color-#{$color}-300);
+        // border-color: var(--color-#{$color}-300);
+      }
+
+      &:active:enabled {
+        // background-color: var(--color-#{$color}-600);
+        // border-color: var(--color-#{$color}-600);
+      }
+    }
+  }
+
+  @each $color in $colors {
+    &.hollow-#{$color} {
+      background: transparent;
+      border-color: var(--color-block-bg);
+      color: var(--color-text);
+      border-width: 2px;
+      border-style: solid;
+  
+      .customLoader {
+        border-top-color: var(--color-#{$color}-800);
+      }
+
+
+      &:hover:enabled {
+        // background: var(--color-#{$color}-100);
+      }
+
+      &:active:enabled {
+        background: var(--color-#{$color}-100);
+        border-width: 2px;
+      }
+    }
+  }
+
+  .labelContainer {
+    padding: 10px 32px;
+    border: none;
+    gap: 12px;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: var(--font-weight-h6);
+    /* Ensure the loader can be positioned relative to this container */
+  }
+
+  .buttonIcon {
+    display: inline-flex;
+  }
+
+  .buttonLabel {
+    font-family: var(--font);
+  }
+
+}

package/src/Components/Form/index.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './Button/Button';
+export type { default as ButtonProps } from './Button/ButtonProps';

package/src/Components/Icons/Arrows/ArrowLeft/ArrowLeft.tsx

@@ -0,0 +1,49 @@
+import IconProps from "../../IconProps";
+
+const ArrowLeft = ({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="M27.5004 16C27.5004 16.1326 27.4477 16.2598 27.3539 16.3536C27.2602 16.4473 27.133 16.5 27.0004 16.5H6.20789L14.3541 24.6463C14.448 24.7401 14.5007 24.8673 14.5007 25C14.5007 25.1327 14.448 25.2599 14.3541 25.3538C14.2603 25.4476 14.1331 25.5003 14.0004 25.5003C13.8677 25.5003 13.7405 25.4476 13.6466 25.3538L4.64664 16.3538C4.60015 16.3073 4.56328 16.2522 4.53811 16.1915C4.51295 16.1308 4.5 16.0657 4.5 16C4.5 15.9343 4.51295 15.8692 4.53811 15.8085C4.56328 15.7478 4.60015 15.6927 4.64664 15.6463L13.6466 6.64625C13.6931 6.5998 13.7482 6.56295 13.8089 6.53781C13.8696 6.51267 13.9347 6.49973 14.0004 6.49973C14.0661 6.49973 14.1311 6.51267 14.1918 6.53781C14.2525 6.56295 14.3077 6.5998 14.3541 6.64625C14.4006 6.69271 14.4374 6.74786 14.4626 6.80856C14.4877 6.86925 14.5007 6.93431 14.5007 7C14.5007 7.0657 14.4877 7.13076 14.4626 7.19145C14.4374 7.25215 14.4006 7.3073 14.3541 7.35375L6.20789 15.5H27.0004C27.133 15.5 27.2602 15.5527 27.3539 15.6465C27.4477 15.7402 27.5004 15.8674 27.5004 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="M28.0008 16C28.0008 16.2652 27.8954 16.5196 27.7079 16.7071C27.5204 16.8947 27.266 17 27.0008 17H7.41454L14.7083 24.2925C14.8012 24.3854 14.8749 24.4957 14.9252 24.6171C14.9755 24.7385 15.0013 24.8686 15.0013 25C15.0013 25.1314 14.9755 25.2615 14.9252 25.3829C14.8749 25.5043 14.8012 25.6146 14.7083 25.7075C14.6154 25.8004 14.5051 25.8741 14.3837 25.9244C14.2623 25.9747 14.1322 26.0006 14.0008 26.0006C13.8694 26.0006 13.7393 25.9747 13.6179 25.9244C13.4965 25.8741 13.3862 25.8004 13.2933 25.7075L4.29329 16.7075C4.20031 16.6146 4.12655 16.5043 4.07623 16.3829C4.0259 16.2615 4 16.1314 4 16C4 15.8686 4.0259 15.7385 4.07623 15.6171C4.12655 15.4957 4.20031 15.3854 4.29329 15.2925L13.2933 6.29251C13.4809 6.10487 13.7354 5.99945 14.0008 5.99945C14.2662 5.99945 14.5206 6.10487 14.7083 6.29251C14.8959 6.48015 15.0013 6.73464 15.0013 7.00001C15.0013 7.26537 14.8959 7.51987 14.7083 7.70751L7.41454 15H27.0008C27.266 15 27.5204 15.1054 27.7079 15.2929C27.8954 15.4804 28.0008 15.7348 28.0008 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="M28.4992 16C28.4992 16.3978 28.3412 16.7794 28.0599 17.0607C27.7786 17.342 27.3971 17.5 26.9992 17.5H8.62423L15.0642 23.9388C15.346 24.2206 15.5043 24.6027 15.5043 25.0013C15.5043 25.3998 15.346 25.782 15.0642 26.0638C14.7824 26.3456 14.4002 26.5039 14.0017 26.5039C13.6032 26.5039 13.221 26.3456 12.9392 26.0638L3.93923 17.0638C3.79939 16.9244 3.68843 16.7588 3.61273 16.5765C3.53702 16.3942 3.49805 16.1987 3.49805 16.0013C3.49805 15.8038 3.53702 15.6084 3.61273 15.426C3.68843 15.2437 3.79939 15.0781 3.93923 14.9388L12.9392 5.93876C13.0788 5.79923 13.2444 5.68855 13.4267 5.61304C13.609 5.53752 13.8044 5.49866 14.0017 5.49866C14.1991 5.49866 14.3944 5.53752 14.5768 5.61304C14.7591 5.68855 14.9247 5.79923 15.0642 5.93876C15.2038 6.07829 15.3144 6.24393 15.39 6.42624C15.4655 6.60854 15.5043 6.80393 15.5043 7.00126C15.5043 7.19858 15.4655 7.39398 15.39 7.57628C15.3144 7.75858 15.2038 7.92423 15.0642 8.06376L8.62423 14.5H26.9992C27.3971 14.5 27.7786 14.658 28.0599 14.9393C28.3412 15.2207 28.4992 15.6022 28.4992 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="M28.0008 16C28.0008 16.2652 27.8954 16.5196 27.7079 16.7071C27.5204 16.8946 27.266 17 27.0008 17H15.0008V25C15.0009 25.1979 14.9424 25.3914 14.8325 25.556C14.7226 25.7206 14.5664 25.8489 14.3836 25.9246C14.2008 26.0004 13.9996 26.0202 13.8055 25.9815C13.6114 25.9429 13.4331 25.8475 13.2933 25.7075L4.29329 16.7075C4.20031 16.6146 4.12655 16.5043 4.07623 16.3829C4.0259 16.2615 4 16.1314 4 16C4 15.8686 4.0259 15.7385 4.07623 15.6171C4.12655 15.4957 4.20031 15.3854 4.29329 15.2925L13.2933 6.29249C13.4331 6.15248 13.6114 6.05712 13.8055 6.01846C13.9996 5.97981 14.2008 5.99962 14.3836 6.07537C14.5664 6.15112 14.7226 6.27942 14.8325 6.44401C14.9424 6.60861 15.0009 6.8021 15.0008 6.99999V15H27.0008C27.266 15 27.5204 15.1054 27.7079 15.2929C27.8954 15.4804 28.0008 15.7348 28.0008 16Z"
+        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="M14 7V25L5 16L14 7Z" fill="currentColor"/>
+      <path
+        d="M27.0008 15H15.0008V6.99999C15.0009 6.8021 14.9424 6.60861 14.8325 6.44401C14.7226 6.27942 14.5664 6.15112 14.3836 6.07537C14.2008 5.99962 13.9996 5.97981 13.8055 6.01846C13.6114 6.05712 13.4331 6.15248 13.2933 6.29249L4.29329 15.2925C4.20031 15.3854 4.12655 15.4957 4.07623 15.6171C4.0259 15.7385 4 15.8686 4 16C4 16.1314 4.0259 16.2615 4.07623 16.3829C4.12655 16.5043 4.20031 16.6146 4.29329 16.7075L13.2933 25.7075C13.4331 25.8475 13.6114 25.9429 13.8055 25.9815C13.9996 26.0202 14.2008 26.0004 14.3836 25.9246C14.5664 25.8489 14.7226 25.7206 14.8325 25.556C14.9424 25.3914 15.0009 25.1979 15.0008 25V17H27.0008C27.266 17 27.5204 16.8946 27.7079 16.7071C27.8954 16.5196 28.0008 16.2652 28.0008 16C28.0008 15.7348 27.8954 15.4804 27.7079 15.2929C27.5204 15.1054 27.266 15 27.0008 15ZM13.0008 22.5862L6.41454 16L13.0008 9.41374V22.5862Z"
+        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="M27.7493 16C27.7493 16.1989 27.6703 16.3897 27.5297 16.5303C27.389 16.671 27.1983 16.75 26.9993 16.75H6.81059L14.5293 24.47C14.603 24.5387 14.6621 24.6215 14.7031 24.7135C14.7441 24.8055 14.7662 24.9048 14.7679 25.0055C14.7697 25.1062 14.7512 25.2062 14.7135 25.2996C14.6757 25.393 14.6196 25.4778 14.5484 25.549C14.4772 25.6203 14.3923 25.6764 14.2989 25.7141C14.2055 25.7518 14.1055 25.7704 14.0048 25.7686C13.9041 25.7668 13.8048 25.7448 13.7128 25.7038C13.6208 25.6628 13.538 25.6037 13.4693 25.53L4.46934 16.53C4.32889 16.3894 4.25 16.1987 4.25 16C4.25 15.8012 4.32889 15.6106 4.46934 15.47L13.4693 6.47C13.6115 6.33752 13.7996 6.2654 13.9939 6.26882C14.1882 6.27225 14.3735 6.35096 14.511 6.48838C14.6484 6.62579 14.7271 6.81118 14.7305 7.00548C14.7339 7.19978 14.6618 7.38782 14.5293 7.53L6.81059 15.25H26.9993C27.1983 15.25 27.389 15.329 27.5297 15.4697C27.6703 15.6103 27.7493 15.8011 27.7493 16Z"
+      fill="currentColor"/>
+  </svg>
+};
+
+export default ArrowLeft;

package/src/Components/Icons/Arrows/ArrowRight/ArrowRight.tsx

@@ -0,0 +1,47 @@
+import IconProps from "../../IconProps";
+
+const ArrowRight = ({ 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="M27.3537 16.3538L18.3537 25.3538C18.2599 25.4476 18.1327 25.5003 18 25.5003C17.8673 25.5003 17.7401 25.4476 17.6462 25.3538C17.5524 25.26 17.4997 25.1327 17.4997 25C17.4997 24.8674 17.5524 24.7401 17.6462 24.6463L25.7925 16.5H5C4.86739 16.5 4.74021 16.4474 4.64645 16.3536C4.55268 16.2598 4.5 16.1326 4.5 16C4.5 15.8674 4.55268 15.7402 4.64645 15.6465C4.74021 15.5527 4.86739 15.5 5 15.5H25.7925L17.6462 7.35378C17.5524 7.25996 17.4997 7.13272 17.4997 7.00003C17.4997 6.86735 17.5524 6.7401 17.6462 6.64628C17.7401 6.55246 17.8673 6.49976 18 6.49976C18.1327 6.49976 18.2599 6.55246 18.3537 6.64628L27.3537 15.6463C27.4002 15.6927 27.4371 15.7479 27.4623 15.8086C27.4874 15.8693 27.5004 15.9343 27.5004 16C27.5004 16.0657 27.4874 16.1308 27.4623 16.1915C27.4371 16.2522 27.4002 16.3073 27.3537 16.3538Z"
+                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="M27.7075 16.7076L18.7075 25.7076C18.5199 25.8952 18.2654 26.0006 18 26.0006C17.7346 26.0006 17.4801 25.8952 17.2925 25.7076C17.1049 25.5199 16.9994 25.2654 16.9994 25.0001C16.9994 24.7347 17.1049 24.4802 17.2925 24.2926L24.5863 17.0001H5C4.73478 17.0001 4.48043 16.8947 4.29289 16.7072C4.10536 16.5196 4 16.2653 4 16.0001C4 15.7349 4.10536 15.4805 4.29289 15.293C4.48043 15.1054 4.73478 15.0001 5 15.0001H24.5863L17.2925 7.70757C17.1049 7.51993 16.9994 7.26543 16.9994 7.00007C16.9994 6.7347 17.1049 6.48021 17.2925 6.29257C17.4801 6.10493 17.7346 5.99951 18 5.99951C18.2654 5.99951 18.5199 6.10493 18.7075 6.29257L27.7075 15.2926C27.8005 15.3854 27.8742 15.4957 27.9246 15.6171C27.9749 15.7385 28.0008 15.8687 28.0008 16.0001C28.0008 16.1315 27.9749 16.2616 27.9246 16.383C27.8742 16.5044 27.8005 16.6147 27.7075 16.7076Z"
+                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.0613 17.0612L19.0613 26.0612C18.7795 26.343 18.3973 26.5013 17.9988 26.5013C17.6002 26.5013 17.218 26.343 16.9363 26.0612C16.6545 25.7794 16.4961 25.3972 16.4961 24.9987C16.4961 24.6002 16.6545 24.218 16.9363 23.9362L23.375 17.5H5C4.60218 17.5 4.22064 17.3419 3.93934 17.0606C3.65804 16.7793 3.5 16.3978 3.5 16C3.5 15.6022 3.65804 15.2206 3.93934 14.9393C4.22064 14.658 4.60218 14.5 5 14.5H23.375L16.9387 8.05998C16.657 7.77818 16.4986 7.39599 16.4986 6.99747C16.4986 6.59896 16.657 6.21677 16.9387 5.93497C17.2205 5.65318 17.6027 5.49487 18.0012 5.49487C18.3998 5.49487 18.782 5.65318 19.0637 5.93497L28.0637 14.935C28.2036 15.0745 28.3145 15.2403 28.3901 15.4228C28.4657 15.6054 28.5045 15.801 28.5043 15.9986C28.5041 16.1962 28.4648 16.3918 28.3888 16.5741C28.3127 16.7565 28.2014 16.922 28.0613 17.0612Z"
+                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="M27.7075 16.7076L18.7075 25.7076C18.5676 25.8476 18.3894 25.9429 18.1953 25.9816C18.0012 26.0202 17.8 26.0004 17.6172 25.9247C17.4344 25.8489 17.2782 25.7206 17.1683 25.556C17.0584 25.3914 16.9998 25.198 17 25.0001V17.0001H5C4.73478 17.0001 4.48043 16.8947 4.29289 16.7072C4.10536 16.5196 4 16.2653 4 16.0001C4 15.7348 4.10536 15.4805 4.29289 15.2929C4.48043 15.1054 4.73478 15.0001 5 15.0001H17V7.00006C16.9998 6.80216 17.0584 6.60867 17.1683 6.44407C17.2782 6.27948 17.4344 6.15119 17.6172 6.07543C17.8 5.99968 18.0012 5.97988 18.1953 6.01853C18.3894 6.05718 18.5676 6.15254 18.7075 6.29256L27.7075 15.2926C27.8005 15.3854 27.8742 15.4957 27.9246 15.6171C27.9749 15.7385 28.0008 15.8686 28.0008 16.0001C28.0008 16.1315 27.9749 16.2616 27.9246 16.383C27.8742 16.5044 27.8005 16.6147 27.7075 16.7076Z"
+                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 16L18 25V7L27 16Z"
+                fill="currentColor" />
+            <path d="M27.7075 15.2926L18.7075 6.29256C18.5676 6.15254 18.3894 6.05718 18.1953 6.01853C18.0012 5.97988 17.8 5.99968 17.6172 6.07543C17.4344 6.15119 17.2782 6.27948 17.1683 6.44407C17.0584 6.60867 16.9998 6.80216 17 7.00006V15.0001H5C4.73478 15.0001 4.48043 15.1054 4.29289 15.2929C4.10536 15.4805 4 15.7348 4 16.0001C4 16.2653 4.10536 16.5196 4.29289 16.7072C4.48043 16.8947 4.73478 17.0001 5 17.0001H17V25.0001C16.9998 25.198 17.0584 25.3914 17.1683 25.556C17.2782 25.7206 17.4344 25.8489 17.6172 25.9247C17.8 26.0004 18.0012 26.0202 18.1953 25.9816C18.3894 25.9429 18.5676 25.8476 18.7075 25.7076L27.7075 16.7076C27.8005 16.6147 27.8742 16.5044 27.9246 16.383C27.9749 16.2616 28.0008 16.1315 28.0008 16.0001C28.0008 15.8686 27.9749 15.7385 27.9246 15.6171C27.8742 15.4957 27.8005 15.3854 27.7075 15.2926ZM19 22.5863V9.4138L25.5863 16.0001L19 22.5863Z"
+                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="M27.53 16.5301L18.53 25.5301C18.3878 25.6626 18.1998 25.7347 18.0055 25.7313C17.8112 25.7278 17.6258 25.6491 17.4884 25.5117C17.351 25.3743 17.2723 25.1889 17.2688 24.9946C17.2654 24.8003 17.3375 24.6123 17.47 24.4701L25.1887 16.7501H5C4.80109 16.7501 4.61032 16.6711 4.46967 16.5304C4.32902 16.3898 4.25 16.199 4.25 16.0001C4.25 15.8012 4.32902 15.6104 4.46967 15.4698C4.61032 15.3291 4.80109 15.2501 5 15.2501H25.1887L17.47 7.53009C17.3375 7.38792 17.2654 7.19987 17.2688 7.00557C17.2723 6.81127 17.351 6.62588 17.4884 6.48847C17.6258 6.35106 17.8112 6.27234 18.0055 6.26892C18.1998 6.26549 18.3878 6.33761 18.53 6.47009L27.53 15.4701C27.6705 15.6107 27.7493 15.8013 27.7493 16.0001C27.7493 16.1988 27.6705 16.3895 27.53 16.5301Z" fill="currentColor" />
+    </svg>
+
+}
+
+export default ArrowRight;

package/src/Components/Icons/Arrows/ArrowSquareOut/ArrowSquareOut.tsx

@@ -0,0 +1,48 @@
+import IconProps from "../../IconProps";
+
+const ArrowSquareOut = ({ 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="M27.5 13C27.5 13.1326 27.4473 13.2598 27.3536 13.3536C27.2598 13.4473 27.1326 13.5 27 13.5C26.8674 13.5 26.7402 13.4473 26.6464 13.3536C26.5527 13.2598 26.5 13.1326 26.5 13V6.2075L17.355 15.3538C17.2612 15.4476 17.1339 15.5003 17.0012 15.5003C16.8686 15.5003 16.7413 15.4476 16.6475 15.3538C16.5537 15.2599 16.501 15.1327 16.501 15C16.501 14.8673 16.5537 14.7401 16.6475 14.6462L25.7925 5.5H19C18.8674 5.5 18.7402 5.44732 18.6464 5.35355C18.5527 5.25979 18.5 5.13261 18.5 5C18.5 4.86739 18.5527 4.74021 18.6464 4.64645C18.7402 4.55268 18.8674 4.5 19 4.5H27C27.1326 4.5 27.2598 4.55268 27.3536 4.64645C27.4473 4.74021 27.5 4.86739 27.5 5V13ZM23 16.5C22.8674 16.5 22.7402 16.5527 22.6464 16.6464C22.5527 16.7402 22.5 16.8674 22.5 17V26C22.5 26.1326 22.4473 26.2598 22.3536 26.3536C22.2598 26.4473 22.1326 26.5 22 26.5H6C5.86739 26.5 5.74021 26.4473 5.64645 26.3536C5.55268 26.2598 5.5 26.1326 5.5 26V10C5.5 9.86739 5.55268 9.74021 5.64645 9.64645C5.74021 9.55268 5.86739 9.5 6 9.5H15C15.1326 9.5 15.2598 9.44732 15.3536 9.35355C15.4473 9.25979 15.5 9.13261 15.5 9C15.5 8.86739 15.4473 8.74021 15.3536 8.64645C15.2598 8.55268 15.1326 8.5 15 8.5H6C5.60218 8.5 5.22064 8.65804 4.93934 8.93934C4.65804 9.22064 4.5 9.60218 4.5 10V26C4.5 26.3978 4.65804 26.7794 4.93934 27.0607C5.22064 27.342 5.60218 27.5 6 27.5H22C22.3978 27.5 22.7794 27.342 23.0607 27.0607C23.342 26.7794 23.5 26.3978 23.5 26V17C23.5 16.8674 23.4473 16.7402 23.3536 16.6464C23.2598 16.5527 23.1326 16.5 23 16.5Z" 
+            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 13C28 13.2652 27.8946 13.5196 27.7071 13.7071C27.5196 13.8946 27.2652 14 27 14C26.7348 14 26.4804 13.8946 26.2929 13.7071C26.1054 13.5196 26 13.2652 26 13V7.415L17.7087 15.7075C17.5211 15.8951 17.2666 16.0006 17.0012 16.0006C16.7359 16.0006 16.4814 15.8951 16.2938 15.7075C16.1061 15.5199 16.0007 15.2654 16.0007 15C16.0007 14.7346 16.1061 14.4801 16.2938 14.2925L24.585 6H19C18.7348 6 18.4804 5.89464 18.2929 5.70711C18.1054 5.51957 18 5.26522 18 5C18 4.73478 18.1054 4.48043 18.2929 4.29289C18.4804 4.10536 18.7348 4 19 4H27C27.2652 4 27.5196 4.10536 27.7071 4.29289C27.8946 4.48043 28 4.73478 28 5V13ZM23 16C22.7348 16 22.4804 16.1054 22.2929 16.2929C22.1054 16.4804 22 16.7348 22 17V26H6V10H15C15.2652 10 15.5196 9.89464 15.7071 9.70711C15.8946 9.51957 16 9.26522 16 9C16 8.73478 15.8946 8.48043 15.7071 8.29289C15.5196 8.10536 15.2652 8 15 8H6C5.46957 8 4.96086 8.21071 4.58579 8.58579C4.21071 8.96086 4 9.46957 4 10V26C4 26.5304 4.21071 27.0391 4.58579 27.4142C4.96086 27.7893 5.46957 28 6 28H22C22.5304 28 23.0391 27.7893 23.4142 27.4142C23.7893 27.0391 24 26.5304 24 26V17C24 16.7348 23.8946 16.4804 23.7071 16.2929C23.5196 16.1054 23.2652 16 23 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="M28.5 13C28.5 13.3978 28.342 13.7794 28.0607 14.0607C27.7794 14.342 27.3978 14.5 27 14.5C26.6022 14.5 26.2206 14.342 25.9393 14.0607C25.658 13.7794 25.5 13.3978 25.5 13V8.625L18.0613 16.0637C17.7795 16.3455 17.3973 16.5039 16.9988 16.5039C16.6002 16.5039 16.218 16.3455 15.9362 16.0637C15.6545 15.782 15.4961 15.3998 15.4961 15.0013C15.4961 14.6027 15.6545 14.2205 15.9362 13.9388L23.375 6.5H19C18.6022 6.5 18.2206 6.34196 17.9393 6.06066C17.658 5.77936 17.5 5.39782 17.5 5C17.5 4.60218 17.658 4.22064 17.9393 3.93934C18.2206 3.65804 18.6022 3.5 19 3.5H27C27.3978 3.5 27.7794 3.65804 28.0607 3.93934C28.342 4.22064 28.5 4.60218 28.5 5V13ZM23 16C22.6022 16 22.2206 16.158 21.9393 16.4393C21.658 16.7206 21.5 17.1022 21.5 17.5V25.5H6.5V10.5H14.5C14.8978 10.5 15.2794 10.342 15.5607 10.0607C15.842 9.77936 16 9.39782 16 9C16 8.60218 15.842 8.22064 15.5607 7.93934C15.2794 7.65804 14.8978 7.5 14.5 7.5H6C5.33696 7.5 4.70107 7.76339 4.23223 8.23223C3.76339 8.70107 3.5 9.33696 3.5 10V26C3.5 26.663 3.76339 27.2989 4.23223 27.7678C4.70107 28.2366 5.33696 28.5 6 28.5H22C22.663 28.5 23.2989 28.2366 23.7678 27.7678C24.2366 27.2989 24.5 26.663 24.5 26V17.5C24.5 17.1022 24.342 16.7206 24.0607 16.4393C23.7794 16.158 23.3978 16 23 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="M24 17V26C24 26.5304 23.7893 27.0391 23.4142 27.4142C23.0391 27.7893 22.5304 28 22 28H6C5.46957 28 4.96086 27.7893 4.58579 27.4142C4.21071 27.0391 4 26.5304 4 26V10C4 9.46957 4.21071 8.96086 4.58579 8.58579C4.96086 8.21071 5.46957 8 6 8H15C15.2652 8 15.5196 8.10536 15.7071 8.29289C15.8946 8.48043 16 8.73478 16 9C16 9.26522 15.8946 9.51957 15.7071 9.70711C15.5196 9.89464 15.2652 10 15 10H6V26H22V17C22 16.7348 22.1054 16.4804 22.2929 16.2929C22.4804 16.1054 22.7348 16 23 16C23.2652 16 23.5196 16.1054 23.7071 16.2929C23.8946 16.4804 24 16.7348 24 17ZM28 5C28 4.73478 27.8946 4.48043 27.7071 4.29289C27.5196 4.10536 27.2652 4 27 4H19C18.8021 3.99984 18.6086 4.05841 18.444 4.16828C18.2794 4.27815 18.1511 4.43439 18.0754 4.61721C17.9996 4.80003 17.9798 5.00122 18.0185 5.19531C18.0571 5.38939 18.1525 5.56764 18.2925 5.7075L21.5863 9L16.2925 14.2925C16.1049 14.4801 15.9994 14.7346 15.9994 15C15.9994 15.2654 16.1049 15.5199 16.2925 15.7075C16.4801 15.8951 16.7346 16.0006 17 16.0006C17.2654 16.0006 17.5199 15.8951 17.7075 15.7075L23 10.4138L26.2925 13.7075C26.4324 13.8475 26.6106 13.9429 26.8047 13.9815C26.9988 14.0202 27.2 14.0004 27.3828 13.9246C27.5656 13.8489 27.7218 13.7206 27.8317 13.556C27.9416 13.3914 28.0002 13.1979 28 13V5Z" 
+            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="M23 10V26C23 26.2652 22.8946 26.5196 22.7071 26.7071C22.5196 26.8946 22.2652 27 22 27H6C5.73478 27 5.48043 26.8946 5.29289 26.7071C5.10536 26.5196 5 26.2652 5 26V10C5 9.73478 5.10536 9.48043 5.29289 9.29289C5.48043 9.10536 5.73478 9 6 9H22C22.2652 9 22.5196 9.10536 22.7071 9.29289C22.8946 9.48043 23 9.73478 23 10Z" 
+            fill="currentColor" />
+            <path d="M28 13C28 13.2652 27.8946 13.5196 27.7071 13.7071C27.5196 13.8946 27.2652 14 27 14C26.7348 14 26.4804 13.8946 26.2929 13.7071C26.1054 13.5196 26 13.2652 26 13V7.415L17.7087 15.7075C17.5211 15.8951 17.2666 16.0006 17.0012 16.0006C16.7359 16.0006 16.4814 15.8951 16.2938 15.7075C16.1061 15.5199 16.0007 15.2654 16.0007 15C16.0007 14.7346 16.1061 14.4801 16.2938 14.2925L24.585 6H19C18.7348 6 18.4804 5.89464 18.2929 5.70711C18.1054 5.51957 18 5.26522 18 5C18 4.73478 18.1054 4.48043 18.2929 4.29289C18.4804 4.10536 18.7348 4 19 4H27C27.2652 4 27.5196 4.10536 27.7071 4.29289C27.8946 4.48043 28 4.73478 28 5V13ZM23 16C22.7348 16 22.4804 16.1054 22.2929 16.2929C22.1054 16.4804 22 16.7348 22 17V26H6V10H15C15.2652 10 15.5196 9.89464 15.7071 9.70711C15.8946 9.51957 16 9.26522 16 9C16 8.73478 15.8946 8.48043 15.7071 8.29289C15.5196 8.10536 15.2652 8 15 8H6C5.46957 8 4.96086 8.21071 4.58579 8.58579C4.21071 8.96086 4 9.46957 4 10V26C4 26.5304 4.21071 27.0391 4.58579 27.4142C4.96086 27.7893 5.46957 28 6 28H22C22.5304 28 23.0391 27.7893 23.4142 27.4142C23.7893 27.0391 24 26.5304 24 26V17C24 16.7348 23.8946 16.4804 23.7071 16.2929C23.5196 16.1054 23.2652 16 23 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="M27.75 13C27.75 13.1989 27.671 13.3897 27.5303 13.5303C27.3897 13.671 27.1989 13.75 27 13.75C26.8011 13.75 26.6103 13.671 26.4697 13.5303C26.329 13.3897 26.25 13.1989 26.25 13V6.81125L17.5312 15.53C17.3891 15.6625 17.201 15.7346 17.0067 15.7312C16.8124 15.7277 16.627 15.649 16.4896 15.5116C16.3522 15.3742 16.2735 15.1888 16.2701 14.9945C16.2666 14.8002 16.3388 14.6122 16.4713 14.47L25.1887 5.75H19C18.8011 5.75 18.6103 5.67098 18.4697 5.53033C18.329 5.38968 18.25 5.19891 18.25 5C18.25 4.80109 18.329 4.61032 18.4697 4.46967C18.6103 4.32902 18.8011 4.25 19 4.25H27C27.1989 4.25 27.3897 4.32902 27.5303 4.46967C27.671 4.61032 27.75 4.80109 27.75 5V13ZM23 16.25C22.8011 16.25 22.6103 16.329 22.4697 16.4697C22.329 16.6103 22.25 16.8011 22.25 17V26C22.25 26.0663 22.2237 26.1299 22.1768 26.1768C22.1299 26.2237 22.0663 26.25 22 26.25H6C5.9337 26.25 5.87011 26.2237 5.82322 26.1768C5.77634 26.1299 5.75 26.0663 5.75 26V10C5.75 9.9337 5.77634 9.87011 5.82322 9.82322C5.87011 9.77634 5.9337 9.75 6 9.75H15C15.1989 9.75 15.3897 9.67098 15.5303 9.53033C15.671 9.38968 15.75 9.19891 15.75 9C15.75 8.80109 15.671 8.61032 15.5303 8.46967C15.3897 8.32902 15.1989 8.25 15 8.25H6C5.53587 8.25 5.09075 8.43437 4.76256 8.76256C4.43437 9.09075 4.25 9.53587 4.25 10V26C4.25 26.4641 4.43437 26.9092 4.76256 27.2374C5.09075 27.5656 5.53587 27.75 6 27.75H22C22.4641 27.75 22.9092 27.5656 23.2374 27.2374C23.5656 26.9092 23.75 26.4641 23.75 26V17C23.75 16.8011 23.671 16.6103 23.5303 16.4697C23.3897 16.329 23.1989 16.25 23 16.25Z" 
+        fill="currentColor" />
+    </svg>
+
+}
+
+export default ArrowSquareOut;