@soul-refiner/design-system 0.0.26 → 0.1.0

package/src/components/atoms/typography/paragraph.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Typography, TypographyProps } from './typography';
+
+export interface CommonProps extends TypographyProps {
+  as?: React.ElementType;
+  $textAlign?: 'center' | 'inherit' | 'justify' | 'left' | 'right';
+}
+
+export interface ParagraphProps extends CommonProps {
+  $fontSize?: 10 | 11 | 12 | 14 | 16;
+  $lineHeight?: 14 | 16 | 20 | 24;
+}
+
+export const P = ({
+  as = 'p',
+  children,
+  $fontSize = 16,
+  $lineHeight = 24,
+  $textAlign = 'left',
+  ...rest
+}: ParagraphProps) => (
+  <StyledP
+    as={as}
+    $fontSize={$fontSize}
+    $lineHeight={$lineHeight}
+    $textAlign={$textAlign}
+    {...rest}
+  >
+    {children}
+  </StyledP>
+);
+
+const StyledP = styled(Typography)<ParagraphProps>`
+  font-size: ${({ $fontSize }) => $fontSize + 'px'};
+  line-height: ${({ $lineHeight }) => $lineHeight + 'px'};
+  text-align: ${({ $textAlign }) => $textAlign || 'left'};
+`;

package/src/components/atoms/typography/typography.tsx

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+import { Styles } from 'common';
+import {
+  Color,
+  Styleable,
+  TextClamp,
+  TypographyStyle,
+  TypographyWeight,
+} from 'types';
+
+export type TypographyProps = Pick<
+  React.HTMLAttributes<HTMLParagraphElement>,
+  | 'children'
+  | 'className'
+  | 'dangerouslySetInnerHTML'
+  | 'id'
+  | 'onBlur'
+  | 'onBlurCapture'
+  | 'onClick'
+  | 'onChange'
+  | 'onCopy'
+  | 'onCut'
+  | 'onKeyDown'
+  | 'onKeyDownCapture'
+  | 'onKeyUp'
+  | 'onKeyUpCapture'
+  | 'onMouseDown'
+  | 'onMouseDownCapture'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onMouseOut'
+  | 'onMouseOver'
+> & { value?: string } & Color &
+  Styleable &
+  TextClamp &
+  TypographyStyle &
+  TypographyWeight;
+
+export const Typography = styled.p<TypographyProps>`
+  margin: 0px;
+  font-family: Inter;
+  ${Styles.color}
+  ${Styles.weight}
+  ${Styles.typography}
+  ${Styles.textClamp}
+  ${Styles.styleable}
+`;

package/src/components/iconography/avatar/avatar.tsx

@@ -0,0 +1,278 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, H, P } from 'components';
+import {
+  Approved,
+  Busy,
+  Declined,
+  Default,
+  Focus,
+  Locked,
+  Offline,
+  Online,
+  Subscribed,
+} from './icons';
+
+type NativeProps = Pick<
+  React.HTMLAttributes<HTMLAnchorElement>,
+  | 'onBlur'
+  | 'onBlurCapture'
+  | 'onClick'
+  | 'onChange'
+  | 'onCopy'
+  | 'onCut'
+  | 'onKeyDown'
+  | 'onKeyDownCapture'
+  | 'onKeyUp'
+  | 'onKeyUpCapture'
+  | 'onMouseDown'
+  | 'onMouseDownCapture'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onMouseOut'
+  | 'onMouseOver'
+> & { value?: string };
+
+type Status =
+  | 'offline'
+  | 'focus'
+  | 'busy'
+  | 'online'
+  | 'subscribed'
+  | 'locked'
+  | 'declined'
+  | 'approved';
+
+type Size = 96 | 72 | 64 | 56 | 48 | 40 | 36 | 32 | 24;
+type SizeStrings = '96' | '72' | '64' | '56' | '48' | '40' | '36' | '32' | '24';
+
+export interface AvatarProps extends NativeProps {
+  as?: React.ElementType;
+  href?: string;
+  image: string;
+  size: Size;
+  status?: Status;
+  subtitle?: React.ReactNode;
+  textPosition?: 'left' | 'right';
+  title?: React.ReactNode;
+}
+
+/**
+ * Lookup tables for sizes
+ */
+const iconReference: Record<
+  Status | 'none',
+  React.JSXElementConstructor<SVGElement>
+> = {
+  approved: Approved,
+  busy: Busy,
+  declined: Declined,
+  focus: Focus,
+  locked: Locked,
+  none: () => <></>,
+  online: Online,
+  offline: Offline,
+  subscribed: Subscribed,
+};
+
+const iconSize: Record<SizeStrings, number> = {
+  '96': 18,
+  '72': 18,
+  '64': 18,
+  '56': 15,
+  '48': 15,
+  '40': 15,
+  '36': 14,
+  '32': 14,
+  '24': 12,
+};
+
+const iconOffsetX: Record<SizeStrings, number> = {
+  '96': -23,
+  '72': -21,
+  '64': -20,
+  '56': -16,
+  '48': -15,
+  '40': -13,
+  '36': -12,
+  '32': -12,
+  '24': -10,
+};
+
+const iconOffsetY: Record<SizeStrings, number> = {
+  '96': 5,
+  '72': 3,
+  '64': 2,
+  '56': 1,
+  '48': 0,
+  '40': -2,
+  '36': -2,
+  '32': -2,
+  '24': -2,
+};
+
+/**
+ *
+ * Avatar
+ */
+const Avatar = ({
+  as = 'button',
+  href,
+  image,
+  size = 64,
+  status,
+  subtitle,
+  textPosition = 'left',
+  title,
+  ...rest
+}: AvatarProps) => {
+  const [displayDefault, setDisplayDefault] = React.useState(false);
+
+  const Icon = iconReference?.[status ?? 'none'];
+
+  return (
+    <Box $align="center" $gap={18} {...rest}>
+      <Container as={as} $size={size} href={href}>
+        {!displayDefault && (
+          <img src={image ?? ''} onError={() => setDisplayDefault(true)} />
+        )}
+        {displayDefault && <Default />}
+        <div>
+          <Icon />
+        </div>
+      </Container>
+      {(title || subtitle) && (
+        <TextContainer $textPosition={textPosition}>
+          {title && (
+            <H
+              as="h3"
+              $bold
+              $color="grey-2"
+              $textClampLines={1}
+              sx="font-size: 26px;"
+            >
+              {title}
+            </H>
+          )}
+          {subtitle && (
+            <P $color="grey-4" $textClampLines={1}>
+              {subtitle}
+            </P>
+          )}
+        </TextContainer>
+      )}
+    </Box>
+  );
+};
+
+Avatar.displayName = 'Avatar';
+
+const Container = styled.div<{
+  $size: number;
+  href?: string;
+}>`
+  display: flex;
+  flex-flow: row nowrap;
+  cursor: pointer;
+  padding: 0px;
+  border: 0px;
+  position: relative;
+  background-color: transparent;
+
+  > img,
+  > svg {
+    border-radius: 50%;
+    overflow: hidden;
+    object-fit: cover;
+
+    ${({ $size }) => `
+    width: ${$size}px;
+    height: ${$size}px;
+    `}
+  }
+
+  div > svg {
+    position: relative;
+    width: ${({ $size }) => iconSize[`${$size}` as SizeStrings]}px;
+    margin-left: ${({ $size }) => iconOffsetX[`${$size}` as SizeStrings]}px;
+    top: ${({ $size }) => iconOffsetY[`${$size}` as SizeStrings]}px;
+  }
+`;
+
+const TextContainer = styled.div<{
+  $textPosition: 'left' | 'right';
+}>`
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 4px;
+  order: ${({ $textPosition }) => ($textPosition === 'left' ? -1 : 1)};
+`;
+
+/**
+ * Avatar Group
+ */
+export interface AvatarGroupProps extends React.PropsWithChildren {
+  numDisplayed: number;
+  total: number;
+}
+
+const Group = ({ children, numDisplayed, total }: AvatarGroupProps) => {
+  let size = 0;
+  // filter out ReactNodes and ReactElements that are not Avatars
+  const displayedElements = React.Children.map(
+    children as React.ReactElement[],
+    (child, index) => {
+      if (
+        React.isValidElement(child) &&
+        (child.type as any).displayName === 'Avatar'
+      ) {
+        size = (child.props as { size: number }).size;
+
+        return <AvatarWrapper $index={index}>{child}</AvatarWrapper>;
+      }
+      return null;
+    }
+  ).slice(0, numDisplayed);
+
+  displayedElements.push(
+    <Total $index={displayedElements.length + 1} $size={size}>
+      <P $fontSize={11} $lineHeight={20}>
+        +{total - numDisplayed}
+      </P>
+    </Total>
+  );
+
+  return <Box>{displayedElements}</Box>;
+};
+
+Group.displayName = 'Avatar.Group';
+Avatar.Group = Group;
+
+const AvatarWrapper = styled.div<{
+  $index: number;
+}>`
+  position: relative;
+  z-index: ${({ $index }) => `-${$index}`};
+  border-radius: 50%;
+  border: 2px solid var(--color-white);
+  margin-right: -8px;
+`;
+
+const Total = styled.div<{
+  $index: number;
+  $size: number;
+}>`
+  position: relative;
+  z-index: ${({ $index }) => `-${$index}`};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  ${({ $size }) => `
+    width: ${$size}px;
+    height: ${$size}px;
+  `}
+  border-radius: 50%;
+  background-color: var(--color-grey-9);
+`;
+
+export { Avatar };

package/src/components/iconography/avatar/icons/approved.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const Approved = () => (
+  <svg fill="none" viewBox="0 0 18 18">
+    <rect width="16" height="16" x="1" y="1" fill="#09B3A1" rx="8" />
+    <path
+      fill="#fff"
+      d="M6.485 8.521a1.1 1.1 0 1 0-1.555 1.555l2.199 2.199a1.1 1.1 0 0 0 1.555 0l4.398-4.398a1.1 1.1 0 0 0-1.555-1.555l-3.62 3.62-1.422-1.421Z"
+    />
+    <rect
+      width="16"
+      height="16"
+      x="1"
+      y="1"
+      stroke="#F8F9F9"
+      strokeWidth="2"
+      rx="8"
+    />
+  </svg>
+);

package/src/components/iconography/avatar/icons/busy.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const Busy = () => (
+  <svg fill="none" viewBox="0 0 18 18">
+    <rect width="16" height="16" x="1" y="1" fill="#F34436" rx="8" />
+    <path
+      fill="#fff"
+      d="m7.839 5.526 4.622 4.622c.33.33.33.825 0 1.155l-1.156 1.155a.798.798 0 0 1-1.155 0L5.528 7.838a.798.798 0 0 1 0-1.156l1.156-1.155a.798.798 0 0 1 1.155 0Z"
+    />
+    <rect
+      width="16"
+      height="16"
+      x="1"
+      y="1"
+      stroke="#F8F9F9"
+      strokeWidth="2"
+      rx="8"
+    />
+  </svg>
+);

package/src/components/iconography/avatar/icons/declined.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const Declined = () => (
+  <svg fill="none" viewBox="0 0 18 18">
+    <rect width="16" height="16" x="1" y="1" fill="#F34436" rx="8" />
+    <path
+      fill="#fff"
+      d="M10.47 9.015 12 7.479c.402-.404.4-1.056-.005-1.457a1.034 1.034 0 0 0-1.46.005L9.013 7.555 7.464 6.003A1.034 1.034 0 0 0 6.004 6 1.028 1.028 0 0 0 6 7.457l1.556 1.559-1.522 1.528c-.402.403-.4 1.056.004 1.457.404.4 1.058.399 1.46-.005l1.515-1.52 1.486 1.489a1.034 1.034 0 0 0 1.46.003 1.028 1.028 0 0 0 .003-1.457L10.47 9.015Z"
+    />
+    <rect
+      width="16"
+      height="16"
+      x="1"
+      y="1"
+      stroke="#F8F9F9"
+      strokeWidth="2"
+      rx="8"
+    />
+  </svg>
+);

package/src/components/iconography/avatar/icons/default.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const Default = () => (
+  <svg fill="none" viewBox="0 0 40 40">
+    <path
+      fill="#9DA7B2"
+      fillRule="evenodd"
+      d="M18.86 4.074c-1.343.172-2.791.707-3.872 1.43-.68.454-1.672 1.376-2.148 1.995a9.549 9.549 0 0 0-1.714 3.824c-.158.832-.16 2.573-.006 3.384a9.399 9.399 0 0 0 1.436 3.447c.466.701 1.46 1.711 2.167 2.202l.556.387-.517.182c-.705.247-2.2.992-2.906 1.447-1.454.938-3.103 2.506-4.07 3.87a15.669 15.669 0 0 0-2.603 6.205c-.177.989-.242 2.697-.114 3.005.146.353.466.548.898.548.683 0 1.054-.389 1.055-1.105.001-.562.13-1.684.282-2.448.26-1.312.87-2.892 1.563-4.043.814-1.356 2.114-2.808 3.308-3.694 1.842-1.368 3.803-2.192 6.015-2.529.28-.043 1.124-.111 1.874-.153.75-.04 1.601-.13 1.891-.198.691-.161 1.536-.467 2.167-.785.792-.399 1.841-1.187 2.437-1.831 1.223-1.322 1.991-2.866 2.334-4.687.138-.735.12-2.41-.033-3.186-.372-1.869-1.231-3.456-2.576-4.756-.395-.382-.928-.837-1.186-1.011a9.262 9.262 0 0 0-3.797-1.466 8.33 8.33 0 0 0-2.442-.034Zm2.677 2.178c.755.18 1.733.618 2.408 1.077.589.4 1.345 1.152 1.732 1.723.587.865 1 1.867 1.174 2.854.045.255.082.77.082 1.143 0 1.708-.668 3.39-1.866 4.697-.822.895-1.965 1.591-3.266 1.986-.6.182-.82.208-1.778.209-.886.001-1.213-.031-1.718-.17-1.257-.343-2.528-1.093-3.378-1.99-.742-.785-1.377-1.945-1.674-3.057-.08-.302-.166-.935-.19-1.408-.036-.683-.014-1.01.109-1.601.085-.409.265-1.01.401-1.335.628-1.51 1.874-2.844 3.326-3.563 1.078-.534 1.831-.709 3.084-.716.647-.005 1.082.038 1.554.15Zm7.33 17.533c-.284.154-.45.494-.45.921 0 .288.052.414.303.726.167.208.503.571.747.808.52.504 1.295 1.529 1.745 2.31.708 1.226 1.296 2.848 1.535 4.234.064.373.147 1.132.184 1.686l.067 1.008.285.26c.252.232.335.262.723.262.398 0 .464-.026.715-.276l.276-.277-.044-1.266c-.053-1.488-.27-2.65-.762-4.079-.398-1.157-1.243-2.815-1.908-3.745-.606-.847-1.5-1.864-2.062-2.343-.363-.31-.455-.35-.776-.348-.2.002-.46.055-.578.119Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/src/components/iconography/avatar/icons/focus.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const Focus = () => (
+  <svg fill="none" viewBox="0 0 18 18">
+    <rect width="16" height="16" x="1" y="1" fill="#fff" rx="8" />
+    <path
+      fill="#A246C1"
+      d="M9 16A7 7 0 1 1 9 2a7 7 0 0 1 0 14Zm0-2.333a4.667 4.667 0 1 0 0-9.334 4.667 4.667 0 0 0 0 9.334Zm0-2.334a2.333 2.333 0 1 1 0-4.666 2.333 2.333 0 0 1 0 4.666Z"
+    />
+    <rect
+      width="16"
+      height="16"
+      x="1"
+      y="1"
+      stroke="#F8F9F9"
+      strokeWidth="2"
+      rx="8"
+    />
+  </svg>
+);

package/src/components/iconography/avatar/icons/index.ts

@@ -0,0 +1,9 @@
+export { Approved } from './approved';
+export { Busy } from './busy';
+export { Declined } from './declined';
+export { Default } from './default';
+export { Focus } from './focus';
+export { Locked } from './locked';
+export { Offline } from './offline';
+export { Online } from './online';
+export { Subscribed } from './subscribed';

package/src/components/iconography/avatar/icons/locked.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const Locked = () => (
+  <svg fill="none" viewBox="0 0 18 18">
+    <rect width="16" height="16" x="1" y="1" fill="#B3B7BC" rx="8" />
+    <path
+      fill="#4A4F55"
+      d="M9.023 4.594H8.98c-1.221 0-2.21.973-2.21 2.175V7.89h1.116V6.78c0-.6.494-1.087 1.105-1.087h.022c.61 0 1.105.486 1.105 1.087v1.11h1.116V6.77c0-1.203-.989-2.176-2.21-2.176ZM6.77 7.89h1.116V8.99H6.769V7.89Zm3.348 0h1.116V8.99h-1.116V7.89Zm0 1.099H6.77c-.616 0-1.116.492-1.116 1.099v1.648c0 .91.742 1.648 1.655 1.648h3.386c.914 0 1.655-.732 1.655-1.648v-1.648c0-.607-.5-1.1-1.116-1.1h-1.116Z"
+    />
+    <rect
+      width="16"
+      height="16"
+      x="1"
+      y="1"
+      stroke="#F8F9F9"
+      strokeWidth="2"
+      rx="8"
+    />
+  </svg>
+);

package/src/components/iconography/avatar/icons/offline.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const Offline = () => (
+  <svg fill="none" viewBox="0 0 18 18">
+    <rect width="16" height="16" x="1" y="1" fill="#4A4F55" rx="8" />
+    <path fill="#B3B7BC" d="M9 12.3a3.3 3.3 0 1 0 0-6.6 3.3 3.3 0 0 0 0 6.6Z" />
+    <rect
+      width="16"
+      height="16"
+      x="1"
+      y="1"
+      stroke="#F8F9F9"
+      strokeWidth="2"
+      rx="8"
+    />
+  </svg>
+);

package/src/components/iconography/avatar/icons/online.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export const Online = () => (
+  <svg fill="none" viewBox="0 0 18 18">
+    <rect width="16" height="16" x="1" y="1" fill="#3CC260" rx="8" />
+    <rect
+      width="16"
+      height="16"
+      x="1"
+      y="1"
+      stroke="#F8F9F9"
+      strokeWidth="2"
+      rx="8"
+    />
+  </svg>
+);

package/src/components/iconography/avatar/icons/subscribed.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+export const Subscribed = () => (
+  <svg fill="none" viewBox="0 0 20 20">
+    <path
+      fill="#fff"
+      fillRule="evenodd"
+      d="M19.088 9.994a9.088 9.088 0 1 1-18.176 0 9.088 9.088 0 0 1 18.176 0Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="url(#a)"
+      d="M17.088 9.994a7.088 7.088 0 1 1-14.176 0 7.088 7.088 0 0 1 14.176 0Z"
+    />
+    <path
+      fill="#fff"
+      d="M9.25 5h1.5v.936c.338.048.648.134.927.26.458.202.813.485 1.067.847.255.362.386.781.394 1.258h-1.665a.976.976 0 0 0-.413-.734c-.244-.175-.575-.262-.992-.262-.283 0-.523.039-.718.117a1.01 1.01 0 0 0-.45.316.748.748 0 0 0-.152.461.645.645 0 0 0 .092.375c.07.107.165.2.285.278.12.075.26.141.418.199.157.054.326.101.505.14l.738.172c.359.078.688.183.988.313.299.13.559.29.778.48a2.003 2.003 0 0 1 .698 1.559c-.003.49-.131.914-.385 1.273-.252.357-.615.634-1.091.832-.302.125-.643.21-1.024.255V15h-1.5v-.942a4.002 4.002 0 0 1-.923-.242c-.49-.198-.872-.49-1.148-.879-.273-.39-.416-.873-.429-1.449h1.681c.019.269.098.492.237.672.142.177.33.311.566.402.238.089.507.133.806.133.294 0 .55-.041.767-.125.219-.083.389-.199.509-.347a.79.79 0 0 0 .18-.512c0-.18-.054-.33-.164-.453a1.248 1.248 0 0 0-.473-.313 4.908 4.908 0 0 0-.759-.234l-.894-.219c-.693-.164-1.24-.42-1.641-.77-.402-.348-.601-.818-.598-1.41-.003-.484.13-.907.397-1.269.27-.362.64-.645 1.111-.848.242-.104.5-.181.775-.232V5Z"
+    />
+    <defs>
+      <radialGradient
+        id="a"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientTransform="rotate(-49.924 18.2 -.497) scale(14.7338 19.4196)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#09B3A1" />
+        <stop offset="1" stopColor="#3AC15E" />
+      </radialGradient>
+    </defs>
+  </svg>
+);

package/src/components/iconography/avatar/index.ts

@@ -0,0 +1,2 @@
+export { Avatar } from './avatar';
+export type { AvatarGroupProps, AvatarProps } from './avatar';

package/src/components/iconography/icon/icon.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import styled from 'styled-components';
+import { COLORS, colorReference } from 'common';
+
+type NativeProps = Pick<
+  React.HTMLAttributes<SVGElement>,
+  | 'children'
+  | 'className'
+  | 'dangerouslySetInnerHTML'
+  | 'id'
+  | 'onBlur'
+  | 'onBlurCapture'
+  | 'onClick'
+  | 'onChange'
+  | 'onCopy'
+  | 'onCut'
+  | 'onKeyDown'
+  | 'onKeyDownCapture'
+  | 'onKeyUp'
+  | 'onKeyUpCapture'
+  | 'onMouseDown'
+  | 'onMouseDownCapture'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onMouseOut'
+  | 'onMouseOver'
+> & { value?: string };
+
+export interface IconProps extends NativeProps {
+  as?: React.ElementType;
+  color?: (typeof COLORS)[number];
+  size?: 16 | 20 | 24;
+}
+
+export const Icon = ({
+  as,
+  children,
+  color = 'grey-3',
+  size = 16,
+  ...rest
+}: IconProps) => {
+  return (
+    <SVG
+      as={as}
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill={colorReference[color]}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      {children}
+    </SVG>
+  );
+};
+
+const SVG = styled.svg``;

package/src/components/iconography/icon/index.ts

@@ -0,0 +1,2 @@
+export { Icon } from './icon';
+export type { IconProps } from './icon';

package/src/components/iconography/index.ts

@@ -0,0 +1,4 @@
+export { Avatar } from './avatar';
+export type { AvatarGroupProps, AvatarProps } from './avatar';
+export { Icon } from './icon';
+export type { IconProps } from './icon';

package/src/components/index.ts

@@ -0,0 +1,10 @@
+export { Box, Display, H, P, Typography } from './atoms';
+export type {
+  BoxProps,
+  DisplayProps,
+  HeadingProps,
+  ParagraphProps,
+  TypographyProps,
+} from './atoms';
+export { Avatar, Icon } from './iconography';
+export type { AvatarGroupProps, AvatarProps, IconProps } from './iconography';

package/src/icons/arrow/arrow_all.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowAll = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.0573 8.66671H8.66677V13.0572L10.1954 11.5286L11.1382 12.4714L8.0001 15.6095L4.86203 12.4714L5.80484 11.5286L7.33343 13.0572V8.66671H2.94291L4.47151 10.1953L3.5287 11.1381L0.390625 8.00004L3.5287 4.86197L4.47151 5.80478L2.94291 7.33337H7.33343V2.94285L5.80484 4.47144L4.86203 3.52864L8.0001 0.390564L11.1382 3.52864L10.1954 4.47144L8.66677 2.94285V7.33337H13.0573L11.5287 5.80478L12.4715 4.86197L15.6096 8.00004L12.4715 11.1381L11.5287 10.1953L13.0573 8.66671Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_all_diagonal.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowAllDiagonal = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.94281 8L12.6667 11.7239V9.33333H14V14H9.33333V12.6667H11.7239L8 8.94281L4.27614 12.6667H6.66667V14H2V9.33333H3.33333V11.7239L7.05719 8L3.33333 4.27614V6.66667H2V2H6.66667V3.33333H4.27614L8 7.05719L11.7239 3.33333H9.33333V2H14V6.66667H12.6667V4.27614L8.94281 8Z"
+      />
+    </Icon>
+  );
+};