odaptos_design_system 1.0.0 → 1.2.0

package/src/Buttons/Button.tsx

@@ -1,10 +1,58 @@
-import React, { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';
+import { TextForButton } from '../Typography/TextForButton';
+import styles from './Button.modules.scss';
 
-export interface Props extends HTMLAttributes<HTMLButtonElement> {
-  variant: 'text' | 'icon';
-  children: string;
+export interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'tertiary-alt'
+    | 'alert'
+    | 'success';
+  size?: 'sm' | 'base' | 'lg';
+  iconLeft?: JSX.Element;
+  iconRight?: JSX.Element;
+  text: string;
+  className?: string;
 }
 
-export const Button = ({ variant, children, ...props }: Props) => (
-  <button {...props}>{children}</button>
-);
+/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=131-253&mode=dev */
+export const Button = ({
+  variant = 'primary',
+  size = 'base',
+  iconLeft,
+  iconRight,
+  text,
+  className,
+  ...props
+}: ButtonProps) => {
+  const getStylesByVariant = (): string => {
+    if (variant === 'primary') return styles.button_primary;
+    else if (variant === 'secondary') return styles.button_secondary;
+    else if (variant === 'tertiary') return styles.button_tertiary;
+    else if (variant === 'tertiary-alt') return styles.button_tertiary_alt;
+    else if (variant === 'alert') return styles.button_alert;
+    else if (variant === 'success') return styles.button_success;
+    else return styles.button_primary;
+  };
+  const getStylesBySize = (): string => {
+    if (size === 'sm') return styles.button_sm;
+    else if (size === 'base') return styles.button_base;
+    else if (size === 'lg') return styles.button_lg;
+    else return styles.button_base;
+  };
+
+  return (
+    <button
+      className={`${
+        styles.button
+      } ${getStylesByVariant()} ${getStylesBySize()} ${className ?? ''}`}
+      {...props}
+    >
+      {iconLeft && iconLeft}
+      <TextForButton text={text} size={size} />
+      {iconRight && iconRight}
+    </button>
+  );
+};

package/src/Buttons/IconButton.modules.scss

@@ -0,0 +1,185 @@
+.icon_button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.icon_button_primary {
+  background: var(--color-neutral-basics-black, #00040a);
+  border: 1px solid var(--color-neutral-basics-black, #00040a);
+
+  &:hover {
+    background: var(--color-neutral-dark-shades-900, #32353a);
+    border: 1px solid var(--color-neutral-dark-shades-900, #32353a);
+  }
+  &:active {
+    background: var(--color-neutral-dark-shades-800, #4b4e52);
+    border: 1px solidvar(--color-neutral-dark-shades-800, #4b4e52);
+  }
+  &:disabled {
+    background: var(--color-neutral-clear-shades-300, #d5d5d6);
+    border: 1px solid var(--color-neutral-clear-shades-300, #d5d5d6);
+  }
+  svg {
+    stroke: white !important;
+    fill: white !important;
+  }
+}
+
+.icon_button_secondary {
+  background: transparent;
+  border: 1px solid var(--color-neutral-basics-black, #00040a);
+  &:hover {
+    border: 1px solid var(--color-neutral-basics-black, #00040a);
+    background: var(--color-neutral-clear-shades-200, #e1e1e2);
+  }
+  &:active {
+    border: 1px solid var(--color-neutral-basics-black, #00040a);
+    background: var(--color-neutral-clear-shades-300, #d5d5d6);
+  }
+  &:disabled {
+    background: var(--color-neutral-clear-shades-300, #d5d5d6);
+    border: 1px solid var(--color-neutral-clear-shades-300, #d5d5d6);
+    svg {
+      stroke: #96989a !important;
+      fill: #96989a !important;
+    }
+  }
+  svg {
+    stroke: var(--color-neutral-basics-black, #00040a) !important;
+    fill: var(--color-neutral-basics-black, #00040a) !important;
+  }
+}
+
+.icon_button_tertiary {
+  background: transparent;
+  border: 1px solid transparent;
+  &:hover {
+    border: 1px solid var(--color-neutral-clear-shades-200, #e1e1e2);
+    background: var(--color-neutral-clear-shades-200, #e1e1e2);
+  }
+  &:active {
+    background: var(--color-neutral-clear-shades-300, #d5d5d6);
+    border: 1px solid var(--color-neutral-clear-shades-300, #d5d5d6);
+  }
+  &:disabled {
+    background: transparent;
+    border: 1px solid transparent;
+
+    svg {
+      stroke: #96989a !important;
+      fill: #96989a !important;
+    }
+  }
+
+  svg {
+    stroke: var(--color-neutral-basics-black, #00040a) !important;
+    fill: var(--color-neutral-basics-black, #00040a) !important;
+  }
+}
+
+.icon_button_tertiary_alt {
+  background: transparent;
+  border: 1px solid transparent;
+  &:hover {
+    background: var(--color-neutral-clear-shades-150, #eee);
+    border: 1px solid var(--color-neutral-clear-shades-150, #eee);
+  }
+  &:active {
+    background: var(--color-neutral-clear-shades-100, #fafafa);
+    border: 1px solid var(--color-neutral-clear-shades-100, #fafafa);
+  }
+  &:disabled {
+    background: transparent;
+    border: 1px solid transparent;
+    svg {
+      stroke: #99c9ff !important;
+      fill: #99c9ff !important;
+    }
+  }
+  svg {
+    stroke: #0077ff !important;
+    fill: #0077ff !important;
+  }
+}
+
+.icon_button_alert {
+  background: transparent;
+  border: 1px solid transparent;
+  &:hover {
+    border: 1px solid var(--color-extended-red-50, #fff6f6);
+    background: var(--color-extended-red-50, #fff6f6);
+  }
+  &:active {
+    background: var(--color-extended-red-100, #fddbdb);
+    border: 1px solid var(--color-extended-red-100, #fddbdb);
+  }
+  &:disabled {
+    background: transparent;
+    border: 1px solid transparent;
+    svg {
+      stroke: #fbb7b7 !important;
+      fill: #fbb7b7 !important;
+    }
+  }
+  svg {
+    stroke: #f54c4c !important;
+    fill: #f54c4c !important;
+  }
+}
+
+.icon_button_success {
+  background: var(--color-extended-green-400, #7dc984);
+  border: 1px solid var(--color-extended-green-400, #7dc984);
+  &:hover {
+    border: 1px solid var(--color-extended-green-300, #9dd6a3);
+    background: var(--color-extended-green-300, #9dd6a3);
+  }
+  &:active {
+    background: var(--color-extended-green-500, #5cbb65);
+    border: 1px solid var(--color-extended-green-500, #5cbb65);
+  }
+  &:disabled {
+    background: var(--color-extended-green-200, #d5edd8);
+    border: 1px solid var(--color-extended-green-200, #d5edd8);
+  }
+  svg {
+    stroke: #ffffff !important;
+    fill: #ffffff !important;
+  }
+}
+
+.icon_button_xxs {
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+}
+.icon_button_xs {
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+.icon_button_base {
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}
+.icon_button_lg {
+  padding: 0.625rem;
+  border-radius: 0.5rem;
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+}

package/src/Buttons/IconButton.tsx

@@ -0,0 +1,53 @@
+import { HTMLAttributes } from 'react';
+import styles from './IconButton.modules.scss';
+import { MinusCircledIcon } from '../';
+
+export interface IconButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'tertiary-alt'
+    | 'alert'
+    | 'success';
+  size?: 'xxs' | 'xs' | 'base' | 'lg';
+  icon: JSX.Element;
+  className?: string;
+}
+
+/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=422-2878&mode=dev */
+export const IconButton = ({
+  variant = 'primary',
+  size = 'base',
+  icon,
+  className,
+  ...props
+}: IconButtonProps) => {
+  const getStylesByVariant = (): string => {
+    if (variant === 'primary') return styles.icon_button_primary;
+    else if (variant === 'secondary') return styles.icon_button_secondary;
+    else if (variant === 'tertiary') return styles.icon_button_tertiary;
+    else if (variant === 'tertiary-alt') return styles.icon_button_tertiary_alt;
+    else if (variant === 'alert') return styles.icon_button_alert;
+    else if (variant === 'success') return styles.icon_button_success;
+    else return styles.icon_button_primary;
+  };
+  const getStylesBySize = (): string => {
+    if (size === 'xxs') return styles.icon_button_xxs;
+    if (size === 'xs') return styles.icon_button_xs;
+    else if (size === 'base') return styles.icon_button_base;
+    else if (size === 'lg') return styles.icon_button_lg;
+    else return styles.icon_button_base;
+  };
+
+  return (
+    <button
+      className={`${
+        styles.icon_button
+      } ${getStylesByVariant()} ${getStylesBySize()} ${className ?? ''}`}
+      {...props}
+    >
+      {icon ?? <MinusCircledIcon />}
+    </button>
+  );
+};

package/src/Cards/Card.modules.scss

@@ -0,0 +1,12 @@
+.card {
+  width: 100%;
+  padding: 1rem 1.5rem 1.5rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  background: var(--color-neutral-basics-white, #fff);
+  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.08),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.15);
+}

package/src/Cards/Card.tsx

@@ -0,0 +1,14 @@
+import React, { HTMLAttributes } from 'react';
+import { Title } from '../index';
+import styles from './Card.modules.scss';
+
+export interface CardProps extends HTMLAttributes<HTMLButtonElement> {
+  children: string;
+  className: string;
+}
+
+export const Card = ({ children, className }: CardProps) => (
+  <div className={`${styles.card} ${className}`}>
+    <Title text={children} />
+  </div>
+);

package/src/Cards/CardButton.modules.scss

@@ -0,0 +1,23 @@
+.card_button {
+  display: flex;
+  width: 16.5rem;
+  height: 14.25rem;
+  padding: 1rem;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  border-radius: 1rem;
+  background: var(--color-neutral-basics-white, #fff);
+  cursor: pointer;
+  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.08),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.15);
+}
+.card_button:hover {
+  transform: translate(0, -0.5rem);
+  outline: 0px solid transparent;
+  padding: 1rem;
+  border: 1px solid var(--sdColorPrimary500);
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}

package/src/Cards/CardButton.tsx

@@ -0,0 +1,14 @@
+import React, { HTMLAttributes } from 'react';
+import { Title } from '../index';
+import styles from './CardButton.modules.scss';
+
+export interface CardButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  children: string;
+  className: string;
+}
+
+export const CardButton = ({ children, className }: CardButtonProps) => (
+  <div className={`${styles.card_button} ${className}`}>
+    <Title text={children} />
+  </div>
+);

package/src/Checkbox/Checkbox.module.scss

@@ -0,0 +1,4 @@
+.checkboxContainer {
+  display: flex;
+  align-items: center;
+}

package/src/Checkbox/Checkbox.tsx

@@ -0,0 +1,120 @@
+import { styled } from '@mui/material/styles';
+import { Checkbox as MuiCheckbox } from '@mui/material';
+import styles from './Checkbox.module.scss';
+import { Text } from '../Typography/Text';
+
+const BpIcon = styled('span')(() => ({
+  borderRadius: '0.25rem',
+  border: `1px solid #8A8B8E`,
+  width: '1rem',
+  height: '1rem',
+  margin: 0,
+  padding: 0,
+  backgroundColor: '#f5f8fa',
+  backgroundImage:
+    'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
+  '.Mui-focusVisible &': {
+    outline: '2px auto #0077FF',
+    outlineOffset: 2,
+  },
+  'input:disabled ~ &': {
+    border: `1px solid #E1E1E2`,
+    background: '#FAFAFA',
+    cursor: 'not-allowed',
+  },
+}));
+
+const BpCheckedIcon = styled(BpIcon)({
+  backgroundColor: '#0077FF',
+  backgroundImage:
+    'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
+  border: `1px solid #0077FF`,
+  '&:before': {
+    display: 'block',
+    width: '1rem',
+    height: '1rem',
+    backgroundImage:
+      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
+      " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
+      "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
+    content: '""',
+  },
+  'input:disabled ~ &': {
+    border: `1px solid #E1E1E2`,
+    background: '#E1E1E2',
+    cursor: 'not-allowed',
+  },
+});
+
+interface BpCheckboxProps {
+  checked: boolean;
+  disabled?: boolean;
+  onChange: () => void;
+  required?: boolean;
+  onBlur?: () => void;
+}
+
+function BpCheckbox({
+  checked,
+  disabled = false,
+  onChange,
+  required,
+  onBlur,
+}: BpCheckboxProps) {
+  return (
+    <MuiCheckbox
+      sx={{
+        '&:hover': { bgcolor: 'transparent' },
+      }}
+      disableRipple
+      color="default"
+      checkedIcon={<BpCheckedIcon />}
+      icon={<BpIcon />}
+      inputProps={{ 'aria-label': 'Checkbox demo' }}
+      checked={checked}
+      disabled={disabled}
+      required={required}
+      onChange={onChange}
+      onBlur={onBlur}
+    />
+  );
+}
+
+interface CheckboxProps {
+  label?: string;
+  leftLabel?: string;
+  onChange: () => void;
+  onBlur?: () => void;
+  checked: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  className?: string;
+}
+
+export const Checkbox = ({
+  label,
+  leftLabel,
+  onBlur,
+  checked,
+  disabled,
+  onChange,
+  required,
+  className,
+}: CheckboxProps) => {
+  return (
+    <div
+      className={`${styles.checkboxContainer} ${className}`}
+      style={{ cursor: disabled ? 'not-allowed' : 'auto' }}
+    >
+      {leftLabel && <Text text={leftLabel} size="sm" color="black" />}
+      <BpCheckbox
+        checked={checked}
+        disabled={disabled}
+        onChange={onChange}
+        required={required}
+        onBlur={onBlur}
+      />
+      {label && <Text text={label} size="sm" />}
+    </div>
+  );
+};

package/src/ColorGuide/colors.ts

@@ -0,0 +1,99 @@
+interface ColorPalette {
+  [key: string]: string;
+}
+export const colors: ColorPalette = {
+  // BLUE
+  blue_50: '#F2F8FF',
+  blue_100: '#E5F1FF',
+  blue_200: '#99C9FF',
+  blue_300: '#66ADFF',
+  blue_400: '#3392FF',
+  blue_500: '#0077FF',
+  blue_600: '#005FCC',
+  blue_700: '#004799',
+  blue_800: '#003066',
+  blue_900: '#001E40',
+  blue_950: '#001833',
+  // PURPLE
+  purple_50: '#FAF4FF',
+  purple_100: '#E9D3FD',
+  purple_200: '#D3A7FC',
+  purple_300: '#BC7CFA',
+  purple_400: '#A650F8',
+  purple_500: '#9024F6',
+  purple_600: '#761FC5',
+  purple_700: '#5C1994',
+  purple_800: '#411462',
+  purple_900: '#270E31',
+  purple_950: '#1A0C19',
+  // YELLOW
+  yellow_50: '#FFFCF2',
+  yellow_100: '#FFF3D6',
+  yellow_200: '#FFE299',
+  yellow_300: '#FFD466',
+  yellow_400: '#FFC633',
+  yellow_500: '#FFB800',
+  yellow_600: '#CF9500',
+  yellow_700: '#9E7200',
+  yellow_800: '#6E4F00',
+  yellow_900: '#3D2C00',
+  yellow_950: '#251B00',
+  // RED
+  red_50: '#FFF6F6',
+  red_100: '#FDDBDB',
+  red_200: '#FBB7B7',
+  red_300: '#F99494',
+  red_400: '#F77070',
+  red_500: '#F54C4C',
+  red_600: '#C73F3D',
+  red_700: '#98312E',
+  red_800: '#6A241E',
+  red_900: '#3B160F',
+  red_950: '#241008',
+  // GREEN
+  green_50: '#F7FCF7',
+  green_100: '#E8F5EA',
+  green_200: '#D5EDD8',
+  green_300: '#9DD6A3',
+  green_400: '#7DC984',
+  green_500: '#5CBB65',
+  green_600: '#4C9751',
+  green_700: '#3C743D',
+  green_800: '#2D5028',
+  green_900: '#1D2D14',
+  green_950: '#151B0A',
+  // NEUTRAL
+  neutral_100: '#FAFAFA',
+  neutral_150: '#EEEEEE',
+  neutral_200: '#E1E1E2',
+  neutral_300: '#D5D5D6',
+  neutral_350: '#BCBDBE',
+  neutral_500: '#96989A',
+  neutral_550: '#8A8B8E',
+  neutral_600: '#717376',
+  neutral_700: '#64666A',
+  neutral_800: '#4B4E52',
+  neutral_900: '#32353A',
+  neutral_950: '#26292E',
+  // BASICS
+  black: '#00040A',
+  white: '#ffffff',
+};
+
+export const getColor = (
+  colorName: string,
+  shade: string
+): string | undefined => {
+  const colorKey = `${colorName}_${shade}`;
+  if (colorName === 'black') {
+    return colors.black;
+  }
+  if (colorName === 'white') {
+    return colors.white;
+  }
+  if (colors.hasOwnProperty(colorKey)) {
+    return colors[colorKey];
+  }
+  console.warn(`Color ${colorKey} not found`);
+  return undefined;
+};

package/src/Icons/Arrows/ArrowDoubleLineDownIcon.tsx

@@ -0,0 +1,44 @@
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export default function ArrowDoubleLineDownIcon({
+  stroke,
+  strokeWidth,
+  fill,
+  ...rest
+}: SvgIconProps) {
+  return (
+    <SvgIcon
+      strokeWidth={strokeWidth ?? 0.1}
+      stroke={stroke ? stroke : 'currentColor'}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <g clipPath="url(#clip0_112_1021)">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0.219645 11.7807C0.512525 11.4878 0.987399 11.4878 1.28031 11.7806L12 22.4993L22.7197 11.7806C23.0126 11.4878 23.4875 11.4878 23.7804 11.7807C24.0732 12.0736 24.0732 12.5485 23.7803 12.8414L13.0607 23.5599C13.0607 23.56 13.0607 23.5599 13.0607 23.5599C12.9215 23.6994 12.7561 23.81 12.5741 23.8854C12.3921 23.9609 12.197 23.9998 12 23.9998C11.803 23.9998 11.6079 23.9609 11.4259 23.8854C11.2439 23.81 11.0785 23.6994 10.9393 23.56C10.9393 23.56 10.9393 23.56 10.9393 23.56L0.219695 12.8414C-0.0732122 12.5485 -0.0732344 12.0736 0.219645 11.7807Z"
+            fill={fill}
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0.219645 0.530692C0.512525 0.237785 0.987398 0.237763 1.28031 0.530642L12 11.2493L22.7197 0.530642C23.0126 0.237763 23.4875 0.237785 23.7804 0.530692C24.0732 0.823599 24.0732 1.29847 23.7803 1.59135L13.0607 12.3099C13.0607 12.31 13.0607 12.3099 13.0607 12.3099C12.9215 12.4494 12.7561 12.56 12.5741 12.6354C12.3921 12.7109 12.197 12.7498 12 12.7498C11.803 12.7498 11.6079 12.7109 11.4259 12.6354C11.2439 12.56 11.0785 12.4494 10.9393 12.31C10.9393 12.31 10.9393 12.31 10.9393 12.31L0.219695 1.59135C-0.0732122 1.29847 -0.0732344 0.823599 0.219645 0.530692Z"
+            fill={fill}
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_112_1021">
+            <rect width="24" height="24" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </SvgIcon>
+  );
+}

package/src/Icons/Arrows/ArrowDoubleLineLeftIcon.tsx

@@ -0,0 +1,44 @@
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export default function ArrowDoubleLineLeftIcon({
+  stroke,
+  strokeWidth,
+  fill,
+  ...rest
+}: SvgIconProps) {
+  return (
+    <SvgIcon
+      strokeWidth={strokeWidth ?? 0.1}
+      stroke={stroke ? stroke : 'currentColor'}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <g clipPath="url(#clip0_112_1023)">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12.2191 0.219645C12.512 0.512525 12.512 0.987398 12.2191 1.28031L1.50041 12L12.2191 22.7197C12.512 23.0126 12.512 23.4875 12.2191 23.7804C11.9262 24.0732 11.4513 24.0732 11.1584 23.7803L0.439802 13.0607C0.43978 13.0607 0.439824 13.0607 0.439802 13.0607C0.300414 12.9215 0.189763 12.7561 0.114309 12.5741C0.0388434 12.3921 0 12.197 0 12C0 11.803 0.0388434 11.6079 0.114309 11.4259C0.189763 11.2439 0.300347 11.0786 0.439735 10.9394C0.439713 10.9394 0.439757 10.9393 0.439735 10.9394L11.1584 0.219695C11.4513 -0.0732122 11.9262 -0.0732344 12.2191 0.219645Z"
+            fill={fill}
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M23.2191 0.219645C23.512 0.512525 23.512 0.987398 23.2191 1.28031L12.5004 12L23.2191 22.7197C23.512 23.0126 23.512 23.4875 23.2191 23.7804C22.9262 24.0732 22.4513 24.0732 22.1584 23.7803L11.4398 13.0607C11.4398 13.0607 11.4398 13.0607 11.4398 13.0607C11.3004 12.9215 11.1898 12.7561 11.1143 12.5741C11.0388 12.3921 11 12.197 11 12C11 11.803 11.0388 11.6079 11.1143 11.4259C11.1898 11.2439 11.3003 11.0786 11.4397 10.9394C11.4397 10.9394 11.4398 10.9393 11.4397 10.9394L22.1584 0.219695C22.4513 -0.0732122 22.9262 -0.0732344 23.2191 0.219645Z"
+            fill={fill}
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_112_1023">
+            <rect width="24" height="24" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </SvgIcon>
+  );
+}