@hellobetterdigitalnz/selwynui 0.0.1-1

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

@@ -0,0 +1,93 @@
+.testimonyCard {
+
+}
+
+.testimonyCardWrapper {
+  display: flex;
+  gap: 69px;
+  align-items: center;
+}
+
+.testimonyCardLeft {
+  flex-shrink: 0;
+  padding-top: 96px;
+  padding-bottom: 96px;
+
+
+  img {
+    width: 333px;
+    height: 333px;
+    border-radius: 2px 2px 96px 2px;
+    object-fit: cover;
+
+  }
+}
+
+.testimonyCardRight {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+
+
+  p {
+    font-size: 14px;
+    font-weight: var(--font-weight-h5);
+    letter-spacing: -0.14px;
+    line-height: var(--line-height-body-regular);
+    padding-left: 70px;
+  }
+}
+
+.testimonyContent {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+
+  .quoteIcon {
+
+    svg{
+      font-size: 80px;
+      line-height: 0.8;
+      flex-shrink: 0;
+      margin-top: 0;
+    }
+
+  }
+
+  h6 {
+    font-size: var(--font-size-h6);
+    line-height: 1.3;
+    font-weight: var(--font-weight-body-sm);
+    letter-spacing: -0.48px;
+  }
+}
+
+.pagination {
+  display: flex;
+  gap: 12px;
+  padding-left: 70px;
+
+  .dot {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    background-color: var(--color-taste);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.active::before {
+      content: '';
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: var(--color-visit);
+    }
+  }
+}

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,55 @@
+// @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",
+        size: "default",
+        pillar: "main",
+        level: "primary"
+    },
+};
+
+export const Secondary: Story = {
+    args: {
+        label: "BUTTON TEXT",
+        size: "default",
+        level: "secondary"
+    }
+}
+
+export const Linkable: Story = {
+  args: {
+    label: "Link",
+    linkable: true,
+    link: {
+      url: "https://google.com",
+      target: "_blank",
+      rel: "noopener noreferrer",
+    },
+    style: "no-border",
+    size: "default",
+  },
+};
+
+export const WithIcon: Story = {
+    args: {
+        label: "BUTTON TEXT",
+        style: "solid",
+        size: "default",
+        level: "primary",
+      secondaryIcon: <ArrowRight/>
+    }
+}

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

@@ -0,0 +1,122 @@
+import cx from "classnames";
+import ButtonProps from "./ButtonProps";
+import styles from "./button.module.scss";
+
+/**
+ * Primary UI component for user interaction
+ */
+const Button = (props: ButtonProps) => {
+  const {
+    type = "button",
+    size = "default",
+    style = "solid",
+    disabled = false,
+    pillar = "main",
+    level = 'primary',
+    label,
+    primaryIcon,
+    secondaryIcon,
+    bilingualTitle,
+    extraClass,
+    loading,
+    linkable,
+    link,
+    ...args
+  } = props;
+
+  const classes = [
+    "button",
+    "btn",
+    `btn-${size}`,
+    `btn-${style}`,
+    `${pillar}`,
+    `${pillar}--${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 (style === "solid") {
+    classes.push(styles.solid);
+    classes.push(styles[`solid-${pillar}`]);
+  } else if (style === "hollow") {
+    classes.push(styles.hollow);
+    classes.push(styles[`hollow-${pillar}`]);
+  } else if (style === "no-border") {
+    classes.push(styles.noBorder);
+    classes.push(styles[`no-border-${pillar}`]);
+  }
+
+  if (disabled) {
+    classes.push(styles.disabled);
+  }
+
+  if (loading) {
+    classes.push(styles.loadingBtn);
+  }
+
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+
+
+  if (linkable && link?.url) {
+    return (
+      <a
+        href={link.url}
+        target={link.target}
+        rel={link.rel || (link.target === "_blank" ? "noopener noreferrer" : undefined)}
+        className={cx(classes)}
+        {...args}
+      >
+        {primaryIcon && <div className={styles.primaryIcon}>{primaryIcon}</div>}
+        <div className={styles.text}>
+          <div className={styles.labelContainer}>
+            <div className={styles.textWrapper}>
+              <span className={styles.label}>{label}</span>
+              {bilingualTitle && <small>{bilingualTitle}</small>}
+            </div>
+          </div>
+          {loading && (
+            <div className={styles.loaderContainer}>
+              <div className={`${styles.customLoader}`}></div>
+            </div>
+          )}
+        </div>
+        {secondaryIcon && (
+          <div className={styles.secondaryIcon}>{secondaryIcon}</div>
+        )}
+      </a>
+    );
+  }
+
+
+
+  return (
+    <button type={type} className={cx(classes)} disabled={disabled} {...args}>
+      {primaryIcon && <div className={styles.primaryIcon}>{primaryIcon}</div>}
+      <div className={styles.text}>
+        <div className={styles.labelContainer}>
+          <div className={styles.textWrapper}>
+            <span className={styles.label}>{label}</span>
+            {bilingualTitle && <small>{bilingualTitle}</small>}
+          </div>
+        </div>
+        {loading &&
+            <div className={styles.loaderContainer}>
+                <div className={styles.customLoader}></div>
+            </div>}
+      </div>
+      {secondaryIcon && (
+        <div className={styles.secondaryIcon}>{secondaryIcon}</div>
+      )}
+    </button>
+  );
+};
+
+export default Button;

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

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+
+interface ButtonProps {
+  type?: "button" | "submit" | "reset";
+  size?: "default" | "large" | "small";
+  style?: "solid" | "hollow" | "no-border";
+  level?: 'primary' | 'secondary' | 'light'
+  pillar?: 'main' | 'live' | 'visit' | 'taste' | 'business' | 'participate'
+  linkable?: boolean;
+  extraClass?: string;
+  link?:{
+    url?: string;
+    target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
+    rel?: string | undefined
+  }
+  disabled?: boolean;
+  primaryIcon?: ReactNode;
+  secondaryIcon?: ReactNode;
+  loading?:boolean;
+  bilingualTitle?:string;
+  label: string;
+  onClick?: () => void;
+  onHover?: () => void;
+  onFocus?: () => void;
+}
+
+export default ButtonProps;

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

@@ -0,0 +1,91 @@
+@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;
+  background: var(--color-bg-btn);
+  color: var(--color-text-btn);
+
+  span {
+    font-size: var(--font-size-button);
+    font-weight: var(--font-weight-button);
+    line-height: var(--line-height-button);
+  }
+
+  &.solid{
+    &:hover:enabled , &:hover{
+      background: var(--color-text-btn);
+      color: var(--color-bg-btn);
+    }
+  }
+
+  &.hollow{
+    background: transparent;
+    border:1px solid var(--color-bg-btn);
+    color: var(--color-text-btn);
+
+    &:hover:enabled , &:hover{
+      background: var(--color-bg-btn);
+    }
+  }
+
+  &.noBorder{
+    background: transparent;
+    color: var(--color-text-btn);
+
+    span{
+      text-decoration: underline;
+    }
+
+    &:hover:enabled , &:hover{
+      background: var(--color-bg-btn);
+    }
+
+  }
+
+
+  &.default {
+    padding: var(--spacing-1\/2) var(--spacing-2);
+    min-height: 50px;
+
+    &.noBorder {
+      padding: var(--spacing-1\/2) var(--spacing-2);
+    }
+  }
+
+  &.large {
+    padding: var(--spacing-1\/2) var(--spacing-2-1\/2);
+    height: 54px;
+
+    &.noBorder {
+      padding: var(--spacing-1\/2) var(--spacing-2-1\/2);
+    }
+  }
+
+  &.small {
+    padding: var(--spacing-1\/4) var(--spacing-3\/4);
+    min-height: 32px;
+
+    &.noBorder {
+      padding: var(--spacing-1\/4) var(--spacing-1\/2);
+    }
+  }
+
+
+  .secondaryIcon{
+    margin-left: 24px;
+    svg{
+      flex-shrink: 0;
+      height: 24px;
+      width: 24px;
+    }
+  }
+
+}

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;

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

@@ -0,0 +1,49 @@
+import IconProps from "../../IconProps";
+
+const ArrowsDownUp = ({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="M14.354 21.6463C14.4005 21.6927 14.4374 21.7479 14.4626 21.8086C14.4877 21.8693 14.5007 21.9343 14.5007 22C14.5007 22.0657 14.4877 22.1308 14.4626 22.1915C14.4374 22.2522 14.4005 22.3073 14.354 22.3538L10.354 26.3538C10.3076 26.4003 10.2524 26.4371 10.1917 26.4623C10.131 26.4875 10.066 26.5004 10.0003 26.5004C9.93457 26.5004 9.86951 26.4875 9.80881 26.4623C9.74811 26.4371 9.69296 26.4003 9.64653 26.3538L5.64653 22.3538C5.55271 22.26 5.5 22.1327 5.5 22C5.5 21.8673 5.55271 21.7401 5.64653 21.6463C5.74035 21.5525 5.8676 21.4997 6.00028 21.4997C6.13296 21.4997 6.26021 21.5525 6.35403 21.6463L9.50028 24.7925V6.00003C9.50028 5.86742 9.55296 5.74024 9.64672 5.64647C9.74049 5.55271 9.86767 5.50003 10.0003 5.50003C10.1329 5.50003 10.2601 5.55271 10.3538 5.64647C10.4476 5.74024 10.5003 5.86742 10.5003 6.00003V24.7925L13.6465 21.6463C13.693 21.5998 13.7481 21.5629 13.8088 21.5377C13.8695 21.5126 13.9346 21.4996 14.0003 21.4996C14.066 21.4996 14.131 21.5126 14.1917 21.5377C14.2524 21.5629 14.3076 21.5998 14.354 21.6463ZM26.354 9.64628L22.354 5.64628C22.3076 5.59979 22.2524 5.56291 22.1917 5.53775C22.1311 5.51259 22.066 5.49963 22.0003 5.49963C21.9346 5.49963 21.8695 5.51259 21.8088 5.53775C21.7481 5.56291 21.693 5.59979 21.6465 5.64628L17.6465 9.64628C17.5527 9.7401 17.5 9.86735 17.5 10C17.5 10.1327 17.5527 10.26 17.6465 10.3538C17.7403 10.4476 17.8676 10.5003 18.0003 10.5003C18.133 10.5003 18.2602 10.4476 18.354 10.3538L21.5003 7.20753V26C21.5003 26.1326 21.553 26.2598 21.6467 26.3536C21.7405 26.4473 21.8677 26.5 22.0003 26.5C22.1329 26.5 22.2601 26.4473 22.3538 26.3536C22.4476 26.2598 22.5003 26.1326 22.5003 26V7.20753L25.6465 10.3538C25.693 10.4002 25.7481 10.4371 25.8088 10.4622C25.8695 10.4874 25.9346 10.5003 26.0003 10.5003C26.066 10.5003 26.131 10.4874 26.1917 10.4622C26.2524 10.4371 26.3076 10.4002 26.354 10.3538C26.4005 10.3073 26.4373 10.2522 26.4625 10.1915C26.4876 10.1308 26.5006 10.0657 26.5006 10C26.5006 9.93433 26.4876 9.86928 26.4625 9.80858C26.4373 9.74788 26.4005 9.69273 26.354 9.64628Z"
+        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="M14.7081 21.2926C14.801 21.3854 14.8748 21.4957 14.9251 21.6171C14.9754 21.7385 15.0013 21.8686 15.0013 22.0001C15.0013 22.1315 14.9754 22.2616 14.9251 22.383C14.8748 22.5044 14.801 22.6147 14.7081 22.7076L10.7081 26.7076C10.6152 26.8005 10.5049 26.8743 10.3835 26.9246C10.2621 26.9749 10.132 27.0008 10.0006 27.0008C9.86914 27.0008 9.73901 26.9749 9.61762 26.9246C9.49622 26.8743 9.38593 26.8005 9.29306 26.7076L5.29306 22.7076C5.20015 22.6146 5.12645 22.5043 5.07616 22.3829C5.02588 22.2616 5 22.1314 5 22.0001C5 21.8687 5.02588 21.7386 5.07616 21.6172C5.12645 21.4958 5.20015 21.3855 5.29306 21.2926C5.4807 21.1049 5.73519 20.9995 6.00056 20.9995C6.13195 20.9995 6.26206 21.0254 6.38345 21.0757C6.50485 21.1259 6.61515 21.1996 6.70806 21.2926L9.00056 23.5863V6.00005C9.00056 5.73484 9.10591 5.48048 9.29345 5.29295C9.48099 5.10541 9.73534 5.00005 10.0006 5.00005C10.2658 5.00005 10.5201 5.10541 10.7077 5.29295C10.8952 5.48048 11.0006 5.73484 11.0006 6.00005V23.5863L13.2931 21.2926C13.3859 21.1996 13.4962 21.1258 13.6176 21.0755C13.739 21.0252 13.8691 20.9993 14.0006 20.9993C14.132 20.9993 14.2621 21.0252 14.3835 21.0755C14.5049 21.1258 14.6152 21.1996 14.7081 21.2926ZM26.7081 9.29255L22.7081 5.29255C22.6152 5.19958 22.5049 5.12582 22.3835 5.07549C22.2621 5.02517 22.132 4.99927 22.0006 4.99927C21.8691 4.99927 21.739 5.02517 21.6176 5.07549C21.4962 5.12582 21.3859 5.19958 21.2931 5.29255L17.2931 9.29255C17.1054 9.48019 17 9.73469 17 10.0001C17 10.2654 17.1054 10.5199 17.2931 10.7076C17.4807 10.8952 17.7352 11.0006 18.0006 11.0006C18.2659 11.0006 18.5204 10.8952 18.7081 10.7076L21.0006 8.4138V26.0001C21.0006 26.2653 21.1059 26.5196 21.2934 26.7072C21.481 26.8947 21.7353 27.0001 22.0006 27.0001C22.2658 27.0001 22.5201 26.8947 22.7077 26.7072C22.8952 26.5196 23.0006 26.2653 23.0006 26.0001V8.4138L25.2931 10.7076C25.4807 10.8952 25.7352 11.0006 26.0006 11.0006C26.2659 11.0006 26.5204 10.8952 26.7081 10.7076C26.8957 10.5199 27.0011 10.2654 27.0011 10.0001C27.0011 9.73469 26.8957 9.48019 26.7081 9.29255Z"
+        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="M15.0612 20.9387C15.201 21.0781 15.312 21.2437 15.3877 21.426C15.4634 21.6083 15.5024 21.8038 15.5024 22.0012C15.5024 22.1987 15.4634 22.3941 15.3877 22.5765C15.312 22.7588 15.201 22.9244 15.0612 23.0637L11.0612 27.0637C10.9218 27.2036 10.7563 27.3145 10.5739 27.3902C10.3916 27.466 10.1961 27.5049 9.9987 27.5049C9.80127 27.5049 9.6058 27.466 9.42347 27.3902C9.24114 27.3145 9.07555 27.2036 8.9362 27.0637L4.9362 23.0637C4.79667 22.9242 4.68599 22.7586 4.61047 22.5763C4.53496 22.394 4.49609 22.1986 4.49609 22.0012C4.49609 21.8039 4.53496 21.6085 4.61047 21.4262C4.68599 21.2439 4.79667 21.0783 4.9362 20.9387C5.07572 20.7992 5.24137 20.6885 5.42367 20.613C5.60598 20.5375 5.80137 20.4986 5.9987 20.4986C6.19602 20.4986 6.39141 20.5375 6.57372 20.613C6.75602 20.6885 6.92167 20.7992 7.0612 20.9387L8.49995 22.375V5.99999C8.49995 5.60217 8.65798 5.22064 8.93929 4.93933C9.22059 4.65803 9.60212 4.49999 9.99995 4.49999C10.3978 4.49999 10.7793 4.65803 11.0606 4.93933C11.3419 5.22064 11.4999 5.60217 11.4999 5.99999V22.375L12.9387 20.935C13.0783 20.7958 13.2439 20.6854 13.4261 20.6103C13.6083 20.5351 13.8036 20.4966 14.0007 20.4969C14.1978 20.4973 14.393 20.5365 14.5749 20.6123C14.7569 20.6881 14.9221 20.799 15.0612 20.9387ZM27.0612 8.93874L23.0612 4.93874C22.9218 4.7989 22.7563 4.68795 22.5739 4.61224C22.3916 4.53653 22.1961 4.49756 21.9987 4.49756C21.8013 4.49756 21.6058 4.53653 21.4235 4.61224C21.2411 4.68795 21.0756 4.7989 20.9362 4.93874L16.9362 8.93874C16.6544 9.22053 16.4961 9.60273 16.4961 10.0012C16.4961 10.3998 16.6544 10.7819 16.9362 11.0637C17.218 11.3455 17.6002 11.5038 17.9987 11.5038C18.3972 11.5038 18.7794 11.3455 19.0612 11.0637L20.4999 9.62499V26C20.4999 26.3978 20.658 26.7793 20.9393 27.0606C21.2206 27.342 21.6021 27.5 21.9999 27.5C22.3978 27.5 22.7793 27.342 23.0606 27.0606C23.3419 26.7793 23.4999 26.3978 23.4999 26V9.62499L24.9387 11.065C25.2205 11.3468 25.6027 11.5051 26.0012 11.5051C26.3997 11.5051 26.7819 11.3468 27.0637 11.065C27.3455 10.7832 27.5038 10.401 27.5038 10.0025C27.5038 9.60398 27.3455 9.22178 27.0637 8.93999L27.0612 8.93874Z"
+        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="M14.9245 21.6176C15.0003 21.8003 15.0202 22.0013 14.9818 22.1954C14.9433 22.3894 14.8481 22.5676 14.7083 22.7076L10.7083 26.7076C10.6154 26.8005 10.5051 26.8743 10.3837 26.9246C10.2623 26.9749 10.1322 27.0008 10.0008 27.0008C9.86937 27.0008 9.73925 26.9749 9.61785 26.9246C9.49645 26.8743 9.38616 26.8005 9.29329 26.7076L5.29329 22.7076C5.15328 22.5677 5.05791 22.3894 5.01926 22.1954C4.98061 22.0013 5.00041 21.8001 5.07616 21.6173C5.15192 21.4344 5.28021 21.2782 5.44481 21.1683C5.6094 21.0585 5.80289 20.9999 6.00079 21.0001H9.00079V6.00005C9.00079 5.73484 9.10615 5.48048 9.29368 5.29295C9.48122 5.10541 9.73557 5.00005 10.0008 5.00005C10.266 5.00005 10.5204 5.10541 10.7079 5.29295C10.8954 5.48048 11.0008 5.73484 11.0008 6.00005V21.0001H14.0008C14.1986 21.0001 14.3919 21.0588 14.5563 21.1687C14.7207 21.2786 14.8489 21.4348 14.9245 21.6176ZM26.7083 9.29255L22.7083 5.29255C22.6154 5.19958 22.5051 5.12582 22.3837 5.07549C22.2623 5.02517 22.1322 4.99927 22.0008 4.99927C21.8694 4.99927 21.7392 5.02517 21.6178 5.07549C21.4965 5.12582 21.3862 5.19958 21.2933 5.29255L17.2933 9.29255C17.1533 9.43241 17.0579 9.61066 17.0193 9.80475C16.9806 9.99883 17.0004 10.2 17.0762 10.3828C17.1519 10.5657 17.2802 10.7219 17.4448 10.8318C17.6094 10.9416 17.8029 11.0002 18.0008 11.0001H21.0008V26.0001C21.0008 26.2653 21.1061 26.5196 21.2937 26.7072C21.4812 26.8947 21.7356 27.0001 22.0008 27.0001C22.266 27.0001 22.5204 26.8947 22.7079 26.7072C22.8954 26.5196 23.0008 26.2653 23.0008 26.0001V11.0001H26.0008C26.1987 11.0002 26.3922 10.9416 26.5568 10.8318C26.7214 10.7219 26.8497 10.5657 26.9254 10.3828C27.0012 10.2 27.021 9.99883 26.9823 9.80475C26.9437 9.61066 26.8483 9.43241 26.7083 9.29255Z"
+        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="M26 10H18L22 6L26 10ZM10 26L14 22H6L10 26Z" fill="currentColor"/>
+      <path
+        d="M14.0008 21.0001H11.0008V6.00005C11.0008 5.73484 10.8954 5.48048 10.7079 5.29295C10.5204 5.10541 10.266 5.00005 10.0008 5.00005C9.73557 5.00005 9.48122 5.10541 9.29368 5.29295C9.10615 5.48048 9.00079 5.73484 9.00079 6.00005V21.0001H6.00079C5.80289 20.9999 5.6094 21.0585 5.44481 21.1683C5.28021 21.2782 5.15192 21.4344 5.07616 21.6173C5.00041 21.8001 4.98061 22.0013 5.01926 22.1954C5.05791 22.3894 5.15328 22.5677 5.29329 22.7076L9.29329 26.7076C9.38616 26.8005 9.49645 26.8743 9.61785 26.9246C9.73925 26.9749 9.86937 27.0008 10.0008 27.0008C10.1322 27.0008 10.2623 26.9749 10.3837 26.9246C10.5051 26.8743 10.6154 26.8005 10.7083 26.7076L14.7083 22.7076C14.8483 22.5677 14.9437 22.3894 14.9823 22.1954C15.021 22.0013 15.0012 21.8001 14.9254 21.6173C14.8497 21.4344 14.7214 21.2782 14.5568 21.1683C14.3922 21.0585 14.1987 20.9999 14.0008 21.0001ZM10.0008 24.5863L8.41454 23.0001H11.587L10.0008 24.5863ZM26.7083 9.29255L22.7083 5.29255C22.6154 5.19958 22.5051 5.12582 22.3837 5.07549C22.2623 5.02517 22.1322 4.99927 22.0008 4.99927C21.8694 4.99927 21.7392 5.02517 21.6178 5.07549C21.4965 5.12582 21.3862 5.19958 21.2933 5.29255L17.2933 9.29255C17.1533 9.43241 17.0579 9.61066 17.0193 9.80475C16.9806 9.99883 17.0004 10.2 17.0762 10.3828C17.1519 10.5657 17.2802 10.7219 17.4448 10.8318C17.6094 10.9416 17.8029 11.0002 18.0008 11.0001H21.0008V26.0001C21.0008 26.2653 21.1061 26.5196 21.2937 26.7072C21.4812 26.8947 21.7356 27.0001 22.0008 27.0001C22.266 27.0001 22.5204 26.8947 22.7079 26.7072C22.8954 26.5196 23.0008 26.2653 23.0008 26.0001V11.0001H26.0008C26.1987 11.0002 26.3922 10.9416 26.5568 10.8318C26.7214 10.7219 26.8497 10.5657 26.9254 10.3828C27.0012 10.2 27.021 9.99883 26.9823 9.80475C26.9437 9.61066 26.8483 9.43241 26.7083 9.29255ZM20.4145 9.00005L22.0008 7.4138L23.587 9.00005H20.4145Z"
+        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="M14.5308 21.47C14.6713 21.6106 14.7502 21.8012 14.7502 22C14.7502 22.1988 14.6713 22.3894 14.5308 22.53L10.5308 26.53C10.3902 26.6705 10.1996 26.7493 10.0008 26.7493C9.80207 26.7493 9.61145 26.6705 9.47082 26.53L5.47082 22.53C5.33834 22.3878 5.26622 22.1998 5.26965 22.0055C5.27308 21.8112 5.35179 21.6258 5.4892 21.4884C5.62661 21.351 5.812 21.2723 6.0063 21.2688C6.2006 21.2654 6.38865 21.3375 6.53082 21.47L9.25082 24.1887V6C9.25082 5.80109 9.32984 5.61032 9.47049 5.46967C9.61115 5.32902 9.80191 5.25 10.0008 5.25C10.1997 5.25 10.3905 5.32902 10.5312 5.46967C10.6718 5.61032 10.7508 5.80109 10.7508 6V24.1887L13.4708 21.47C13.6114 21.3295 13.8021 21.2507 14.0008 21.2507C14.1996 21.2507 14.3902 21.3295 14.5308 21.47ZM26.5308 9.47L22.5308 5.47C22.3902 5.32955 22.1996 5.25066 22.0008 5.25066C21.8021 5.25066 21.6114 5.32955 21.4708 5.47L17.4708 9.47C17.3383 9.61217 17.2662 9.80022 17.2696 9.99452C17.2731 10.1888 17.3518 10.3742 17.4892 10.5116C17.6266 10.649 17.812 10.7277 18.0063 10.7312C18.2006 10.7346 18.3886 10.6625 18.5308 10.53L21.2508 7.81125V26C21.2508 26.1989 21.3298 26.3897 21.4705 26.5303C21.6111 26.671 21.8019 26.75 22.0008 26.75C22.1997 26.75 22.3905 26.671 22.5312 26.5303C22.6718 26.3897 22.7508 26.1989 22.7508 26V7.81125L25.4708 10.53C25.613 10.6625 25.801 10.7346 25.9953 10.7312C26.1896 10.7277 26.375 10.649 26.5124 10.5116C26.6499 10.3742 26.7286 10.1888 26.732 9.99452C26.7354 9.80022 26.6633 9.61217 26.5308 9.47Z"
+      fill="currentColor"/>
+  </svg>
+};
+
+export default ArrowsDownUp;