@redocly/theme 0.0.0-react18-20231120182601

package/src/icons/AlertIcon/AlertIcon.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface AlertIconProps {
+  type: 'warning' | 'success' | 'danger' | 'attention' | 'info';
+  className?: string;
+}
+
+function Icon({ type, className }: AlertIconProps) {
+  switch (type) {
+    case 'warning':
+      return (
+        <svg
+          className={className}
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          id="Layer_1"
+          x="0"
+          y="0"
+          viewBox="0 0 500.6 500.6"
+          enableBackground="new 0 0 500.6 500.6"
+        >
+          <path d="M250.3 15.1c-132.5 0-239.8 107.2-239.8 239.8 0 132.5 107.2 239.8 239.8 239.8 132.5 0 239.8-107.2 239.8-239.8C490.1 122.3 382.8 15.1 250.3 15.1zM250.3 457.1C138.5 457.1 48 366.7 48 254.8 48 143 138.5 52.5 250.3 52.5c111.8 0 202.3 90.5 202.3 202.3C452.6 366.7 362.1 457.1 250.3 457.1z" />
+          <path d="M250.3 135.8c-10.3 0-18.7 8.4-18.7 18.7v120.6c0 10.3 8.4 18.7 18.7 18.7s18.7-8.4 18.7-18.7V154.5C269 144.2 260.7 135.8 250.3 135.8z" />
+          <circle cx="250.3" cy="342.1" r="25.3" />
+        </svg>
+      );
+    case 'success':
+      return (
+        <svg
+          className={className}
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          id="Layer_1"
+          x="0"
+          y="0"
+          viewBox="0 0 500.6 500.6"
+          enableBackground="new 0 0 500.6 500.6"
+        >
+          <path d="M250.3 490.1c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 382.8 117.8 490.1 250.3 490.1zM250.3 48c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 452.6 48 362.1 48 250.3 48 138.5 138.5 48 250.3 48z" />
+          <path d="M224.7 349.6c8.5 5.9 20.2 3.8 26.1-4.6L355 195.7c5.9-8.5 3.8-20.2-4.6-26.1s-20.2-3.8-26.1 4.6L220 323.5C214.1 332 216.2 343.7 224.7 349.6z" />
+          <path d="M247.1 346.2c7.3-7.3 7.3-19.2 0-26.5l-55.9-55.9c-7.3-7.3-19.2-7.3-26.5 0s-7.3 19.2 0 26.5l55.9 55.9C228 353.5 239.8 353.5 247.1 346.2z" />
+        </svg>
+      );
+    case 'danger':
+      return (
+        <svg
+          className={className}
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          id="Layer_1"
+          x="0"
+          y="0"
+          viewBox="0 0 500.6 500.6"
+          enableBackground="new 0 0 500.6 500.6"
+        >
+          <path d="M250.3 490.1c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 382.8 117.8 490.1 250.3 490.1zM250.3 48c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 452.6 48 362.1 48 250.3 48 138.5 138.5 48 250.3 48z" />
+          <path d="M168.4 332.2c7.3 7.3 19.2 7.3 26.5 0l137.3-137.3c7.3-7.3 7.3-19.2 0-26.5 -7.3-7.3-19.2-7.3-26.5 0L168.4 305.7C161.1 313 161.1 324.9 168.4 332.2z" />
+          <path d="M168.4 168.4c-7.3 7.3-7.3 19.2 0 26.5l137.3 137.3c7.3 7.3 19.2 7.3 26.5 0 7.3-7.3 7.3-19.2 0-26.5L194.9 168.4C187.6 161.1 175.7 161.1 168.4 168.4z" />
+        </svg>
+      );
+    case 'attention':
+      return (
+        <svg
+          className={className}
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          id="Layer_1"
+          x="0"
+          y="0"
+          viewBox="0 0 500.6 500.6"
+          enableBackground="new 0 0 500.6 500.6"
+        >
+          <path d="M250.3 301.8c-8.3 0-15-6.7-15-15V181.9c0-8.3 6.7-15 15-15 8.3 0 15 6.7 15 15v104.9C265.3 295.1 258.6 301.8 250.3 301.8zM483.7 377L297.2 66.1c-21.2-35.3-72.6-35.4-93.8 0L16.9 377c-17.6 29.4 3.6 67.1 38 67.1h390.8C480.1 444.1 501.4 406.4 483.7 377L483.7 377zM445.7 414.1H54.9c-11.2 0-18-12.2-12.3-21.7L229.1 81.5c9.6-16 32.8-16 42.4 0L458 392.4C463.7 401.9 456.9 414.1 445.7 414.1z" />
+          <circle cx="250.3" cy="339.2" r="22.5" />
+        </svg>
+      );
+    default:
+      return (
+        <svg
+          className={className}
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          id="Layer_1"
+          x="0"
+          y="0"
+          viewBox="0 0 500.6 500.6"
+          enableBackground="new 0 0 500.6 500.6"
+        >
+          <path d="M250.3 490.7c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 383.5 117.8 490.7 250.3 490.7zM250.3 48.6c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 453.2 48 362.7 48 250.9 48 139.1 138.5 48.6 250.3 48.6z" />
+          <path d="M250.3 370c10.3 0 18.7-8.4 18.7-18.7V230.6c0-10.3-8.4-18.7-18.7-18.7 -10.3 0-18.7 8.4-18.7 18.7v120.6C231.6 361.6 240 370 250.3 370z" />
+          <circle cx="250.3" cy="163.7" r="25.3" />
+        </svg>
+      );
+  }
+}
+
+export const AlertIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/AlertIcon/AlertIcon',
+}))`
+  width: var(--admonition-icon-size);
+  height: var(--admonition-icon-size);
+  flex-shrink: 0;
+
+  fill: ${({ type }) => `var(--admonition-${type}-icon-color)`};
+
+  background-image: ${({ type }) => `var(--admonition-${type}-icon)`};
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+`;

package/src/icons/AlertIcon/index.ts

@@ -0,0 +1,2 @@
+export { AlertIcon } from '@theme/icons/AlertIcon/AlertIcon';
+export type { AlertIconProps } from '@theme/icons/AlertIcon/AlertIcon';

package/src/icons/AnchorIcon/AnchorIcon.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface AnchorIconProps {
+  className?: string;
+}
+
+const Icon = ({ className }: AnchorIconProps) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="16"
+    version="1.1"
+    viewBox="0 0 16 16"
+    width="16"
+    className={className}
+  >
+    <path
+      fillRule="evenodd"
+      d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"
+    />
+  </svg>
+);
+
+export const AnchorIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/AnchorIcon/AnchorIcon',
+}))`
+  fill: var(--heading-anchor-color);
+  visibility: hidden;
+  cursor: pointer;
+
+  background-image: var(--heading-anchor-icon);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+`;

package/src/icons/AnchorIcon/index.ts

@@ -0,0 +1,2 @@
+export { AnchorIcon } from '@theme/icons/AnchorIcon/AnchorIcon';
+export type { AnchorIconProps } from '@theme/icons/AnchorIcon/AnchorIcon';

package/src/icons/ArrowIcon/ArrowIcon.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+function directionToTransform({ direction }: { direction?: string }) {
+  switch (direction) {
+    case 'up':
+      return 180;
+    case 'right':
+      return -90;
+    case 'left':
+      return 90;
+    default:
+      return 0;
+  }
+}
+
+export interface ArrowIconProps {
+  className?: string;
+  weight?: 'regular' | 'thin';
+  direction?: 'up' | 'right' | 'left' | 'down';
+  visibility?: 'visible' | 'hidden';
+}
+
+const Icon = ({ className, weight }: ArrowIconProps) => (
+  <span data-component-name="icons/ArrowIcon/ArrowIcon">
+    {weight === 'thin' ? (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={className}
+      >
+        <path
+          d="M8 11L3 5.99999L3.7 5.29999L8 9.59999L12.3 5.29999L13 5.99999L8 11Z"
+          fill="currentColor"
+        />
+      </svg>
+    ) : (
+      <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 5" className={className}>
+        <path d="M3.5 2.51L5.806.205a.7.7 0 01.99.99l-2.8 2.8a.698.698 0 01-.99 0l-2.8-2.8a.7.7 0 11.99-.99L3.5 2.51z" />
+      </svg>
+    )}
+  </span>
+);
+
+export const ArrowIcon = styled(Icon)<Pick<ArrowIconProps, 'weight'>>`
+  ${({ weight }) =>
+    weight !== 'thin' &&
+    css`
+      width: var(--sidebar-group-item-chevron-size);
+      height: var(--sidebar-group-item-chevron-size);
+    `}
+
+  fill: var(--sidebar-group-item-chevron-color);
+  transform: rotate(${directionToTransform}deg);
+  visibility: ${({ visibility = 'visible' }) => visibility};
+
+  vertical-align: middle;
+`;

package/src/icons/ArrowIcon/index.ts

@@ -0,0 +1,2 @@
+export { ArrowIcon } from '@theme/icons/ArrowIcon/ArrowIcon';
+export type { ArrowIconProps } from '@theme/icons/ArrowIcon/ArrowIcon';

package/src/icons/BurgerIcon/BurgerIcon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export const Icon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="inherit" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21.1875 3.75H2.8125C2.70937 3.75 2.625 3.83437 2.625 3.9375V5.4375C2.625 5.54062 2.70937 5.625 2.8125 5.625H21.1875C21.2906 5.625 21.375 5.54062 21.375 5.4375V3.9375C21.375 3.83437 21.2906 3.75 21.1875 3.75ZM21.1875 18.375H2.8125C2.70937 18.375 2.625 18.4594 2.625 18.5625V20.0625C2.625 20.1656 2.70937 20.25 2.8125 20.25H21.1875C21.2906 20.25 21.375 20.1656 21.375 20.0625V18.5625C21.375 18.4594 21.2906 18.375 21.1875 18.375ZM21.1875 11.0625H2.8125C2.70937 11.0625 2.625 11.1469 2.625 11.25V12.75C2.625 12.8531 2.70937 12.9375 2.8125 12.9375H21.1875C21.2906 12.9375 21.375 12.8531 21.375 12.75V11.25C21.375 11.1469 21.2906 11.0625 21.1875 11.0625Z" />
+  </svg>
+);
+
+export const BurgerIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/BurgerIcon/BurgerIcon',
+}))``;

package/src/icons/BurgerIcon/index.ts

@@ -0,0 +1 @@
+export { BurgerIcon } from '@theme/icons/BurgerIcon/BurgerIcon';

package/src/icons/CheckboxIcon/CheckboxIcon.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Icon = ({
+  className,
+  checked = false,
+  onClick,
+}: {
+  className?: string;
+  checked?: boolean;
+  onClick?: () => void;
+}) => (
+  <span className={className} onClick={onClick}>
+    {checked ? (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect width="16" height="16" rx="4" fill="currentColor" />
+        <path
+          d="M3.91308 7.03516H3.91326C3.99256 7.03525 4.07081 7.05331 4.14213 7.08798C4.21341 7.12262 4.27591 7.17295 4.32497 7.2352L3.91308 7.03516ZM3.91308 7.03516H3.09394C2.89031 7.03516 2.7766 7.26975 2.90232 7.4292L2.90237 7.42927L6.11214 11.4957L6.11218 11.4957C6.32247 11.7619 6.72568 11.7611 6.93667 11.4962L6.93708 11.4957L12.6597 4.24398C12.6598 4.24378 12.66 4.24358 12.6602 4.24338C12.7884 4.08295 12.6699 3.85 12.4689 3.85H11.6498C11.4894 3.85 11.3367 3.9235 11.2376 4.05044C11.2375 4.05055 11.2374 4.05066 11.2373 4.05077L6.52403 10.0216M3.91308 7.03516L6.52403 10.0216M6.52403 10.0216L4.32506 7.23531L6.52403 10.0216Z"
+          fill="currentColor"
+          stroke="var(--checkbox-mark-color)"
+        />
+      </svg>
+    ) : (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect width="16" height="16" rx="4" fill="currentColor" />
+        <rect
+          x="0.5"
+          y="0.5"
+          width="15"
+          height="15"
+          rx="3.5"
+          stroke="var(--checkbox-border-color)"
+        />
+      </svg>
+    )}
+  </span>
+);
+
+export const CheckboxIcon = styled(Icon).attrs<{ checked?: boolean }>({
+  'data-component-name': 'icons/CheckboxIcon/CheckboxIcon',
+})`
+  margin-right: var(--spacing-xs);
+  display: flex;
+
+  --checkbox-active-border-color: var(--color-primary-hover);
+  --checkbox-active-background-color: var(--color-primary-hover);
+
+  --checkbox-border-color: var(--text-placeholder);
+  --checkbox-background-color: var(--bg-base);
+
+  --checkbox-mark-color: var(--bg-base);
+`;

package/src/icons/CheckboxIcon/index.ts

@@ -0,0 +1 @@
+export { CheckboxIcon } from '@theme/icons/CheckboxIcon/CheckboxIcon';

package/src/icons/CloseIcon/CloseIcon.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export const Icon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="inherit" xmlns="http://www.w3.org/2000/svg">
+    <rect width="24" height="24" fill="none" />
+    <path d="M18 7.05L16.95 6L12 10.95L7.05 6L6 7.05L10.95 12L6 16.95L7.05 18L12 13.05L16.95 18L18 16.95L13.05 12L18 7.05Z" />
+  </svg>
+);
+
+export const CloseIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CloseIcon/CloseIcon',
+}))``;

package/src/icons/CloseIcon/index.ts

@@ -0,0 +1 @@
+export { CloseIcon } from '@theme/icons/CloseIcon/CloseIcon';

package/src/icons/CollapseIcon/CollapseIcon.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IconProps {
+  className?: string;
+  color?: string;
+}
+
+const Icon = ({ className }: IconProps) => (
+  <svg
+    data-component-name="icons/CollapseIcon"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <g clipPath="url(#clip0_906_12165)">
+      <rect width="14" height="14" fill="none" style={{ mixBlendMode: 'multiply' }} />
+      <path
+        d="M1.75 7.875V8.75H4.63138L0.875 12.5046L1.49363 13.125L5.25 9.36862V12.25H6.125V7.875H1.75Z"
+        fill="currentColor"
+      />
+      <path
+        d="M13.125 1.4945L12.509 0.875L8.75 4.63138V1.75H7.875V6.125H12.25V5.25H9.36862L13.125 1.4945Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_906_12165">
+        <rect width="14" height="14" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const CollapseIcon = styled(Icon)`
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+`;

package/src/icons/CollapseIcon/index.tsx

@@ -0,0 +1 @@
+export * from '@theme/icons/CollapseIcon/CollapseIcon';

package/src/icons/ColorModeIcon/ColorModeIcon.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface ColorModeIconProps {
+  mode?: 'dark' | 'light' | string;
+  className?: string;
+}
+
+function Icon({ mode, className }: ColorModeIconProps) {
+  switch (mode) {
+    case 'dark':
+      return (
+        <svg
+          data-testid="dark"
+          className={className + ' dark'}
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
+        </svg>
+      );
+    case 'light':
+      return (
+        <svg
+          className={className + ' light'}
+          data-testid="light"
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" />
+        </svg>
+      );
+    default:
+      return (
+        <svg
+          data-testid="custom"
+          className={className + (mode ? ' ' + mode : '')}
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13V2a6 6 0 1 1 0 12z" />
+        </svg>
+      );
+  }
+}
+
+export const ColorModeIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ColorModeIcon/ColorModeIcon',
+}))`
+  width: var(--mobile-menu-icons-size);
+  box-sizing: border-box;
+  fill: var(--navbar-text-color);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: var(--navbar-font-size);
+  }
+`;

package/src/icons/ColorModeIcon/index.ts

@@ -0,0 +1,2 @@
+export { ColorModeIcon } from '@theme/icons/ColorModeIcon/ColorModeIcon';
+export type { ColorModeIconProps } from '@theme/icons/ColorModeIcon/ColorModeIcon';

package/src/icons/CopyIcon/CopyIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IconProps {
+  className?: string;
+}
+
+const Icon = ({ className }: IconProps) => (
+  <svg
+    data-component-name="icons/CopyIcon"
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    className={className}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.16667 2.66667C5.16667 2.57462 5.24129 2.5 5.33333 2.5H12C12.092 2.5 12.1667 2.57462 12.1667 2.66667V10.6667C12.1667 10.7587 12.092 10.8333 12 10.8333H10H5.33333C5.24129 10.8333 5.16667 10.7587 5.16667 10.6667V4.66667V2.66667ZM4.16667 4.16667V2.66667C4.16667 2.02233 4.689 1.5 5.33333 1.5H12C12.6443 1.5 13.1667 2.02233 13.1667 2.66667V10.6667C13.1667 11.311 12.6443 11.8333 12 11.8333H10.5V13.3333C10.5 13.6428 10.3771 13.9395 10.1583 14.1583C9.9395 14.3771 9.64275 14.5 9.33333 14.5H2.66667C2.35725 14.5 2.0605 14.3771 1.84171 14.1583C1.62292 13.9395 1.5 13.6428 1.5 13.3333V5.33333C1.5 5.02391 1.62292 4.72717 1.84171 4.50838C2.0605 4.28958 2.35725 4.16667 2.66667 4.16667H4.16667ZM9.5 11.8333V13.3333C9.5 13.3775 9.48244 13.4199 9.45118 13.4512C9.41993 13.4824 9.37754 13.5 9.33333 13.5H2.66667C2.62246 13.5 2.58007 13.4824 2.54882 13.4512C2.51756 13.4199 2.5 13.3775 2.5 13.3333V5.33333C2.5 5.28913 2.51756 5.24674 2.54882 5.21548C2.58007 5.18423 2.62246 5.16667 2.66667 5.16667H4.16667V10.6667C4.16667 11.311 4.689 11.8333 5.33333 11.8333H9.5Z"
+      fill="currentColor"
+      fillOpacity="1"
+    />
+  </svg>
+);
+
+export const CopyIcon = styled(Icon)`
+  width: 1.1em;
+  height: 1.1em;
+  vertical-align: middle;
+`;

package/src/icons/CopyIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/CopyIcon/CopyIcon';

package/src/icons/DeselectIcon/DeselectIcon.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IconProps {
+  className?: string;
+  color?: string;
+}
+
+const Icon = ({ className }: IconProps) => (
+  <svg
+    data-component-name="icons/DeselectIcon"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path d="M14.4966 10.5H9.49658V11.5H14.4966V10.5Z" fill="currentColor" />
+    <path d="M10.5 3.64746H1.5V4.64746H10.5V3.64746Z" fill="currentColor" />
+    <path d="M10.5 6.64746H1.5V7.64746H10.5V6.64746Z" fill="currentColor" />
+    <path d="M7.5 9.64746H1.5V10.6475H7.5V9.64746Z" fill="currentColor" />
+  </svg>
+);
+
+export const DeselectIcon = styled(Icon)`
+  width: 1.3em;
+  height: 1.3em;
+  vertical-align: middle;
+`;

package/src/icons/DeselectIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/DeselectIcon/DeselectIcon';

package/src/icons/DissatisfiedIcon/DissatisfiedIcon.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Icon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+    <rect width="16" height="16" transform="translate(0 0.511719)" fill="none" />
+    <path
+      d="M8 1.51172C6.61553 1.51172 5.26216 1.92226 4.11101 2.69143C2.95987 3.4606 2.06266 4.55385 1.53285 5.83293C1.00303 7.11202 0.86441 8.51948 1.13451 9.87735C1.4046 11.2352 2.07129 12.4825 3.05026 13.4615C4.02922 14.4404 5.2765 15.1071 6.63437 15.3772C7.99224 15.6473 9.3997 15.5087 10.6788 14.9789C11.9579 14.4491 13.0511 13.5519 13.8203 12.4007C14.5895 11.2496 15 9.89619 15 8.51172C15 6.6552 14.2625 4.87473 12.9497 3.56197C11.637 2.24922 9.85652 1.51172 8 1.51172ZM8 14.5117C6.81332 14.5117 5.65328 14.1598 4.66658 13.5005C3.67989 12.8412 2.91085 11.9042 2.45673 10.8078C2.0026 9.71146 1.88378 8.50506 2.11529 7.34118C2.3468 6.17729 2.91825 5.10819 3.75736 4.26908C4.59648 3.42996 5.66558 2.85852 6.82946 2.62701C7.99335 2.3955 9.19975 2.51432 10.2961 2.96844C11.3925 3.42257 12.3295 4.1916 12.9888 5.1783C13.6481 6.16499 14 7.32503 14 8.51172C14 10.103 13.3679 11.6291 12.2426 12.7544C11.1174 13.8796 9.5913 14.5117 8 14.5117Z"
+      fill="currentColor"
+    />
+    <path
+      d="M5.75 6.01172C5.50278 6.01172 5.2611 6.08503 5.05554 6.22238C4.84998 6.35973 4.68976 6.55496 4.59515 6.78336C4.50054 7.01177 4.47579 7.26311 4.52402 7.50558C4.57225 7.74806 4.6913 7.97079 4.86612 8.1456C5.04094 8.32042 5.26366 8.43947 5.50614 8.4877C5.74862 8.53593 5.99995 8.51118 6.22836 8.41657C6.45677 8.32196 6.65199 8.16174 6.78934 7.95618C6.92669 7.75062 7 7.50895 7 7.26172C7 6.9302 6.86831 6.61226 6.63389 6.37784C6.39947 6.14341 6.08152 6.01172 5.75 6.01172Z"
+      fill="currentColor"
+    />
+    <path
+      d="M10.25 6.01172C10.0028 6.01172 9.7611 6.08503 9.55554 6.22238C9.34998 6.35973 9.18976 6.55496 9.09515 6.78336C9.00054 7.01177 8.97579 7.26311 9.02402 7.50558C9.07225 7.74806 9.1913 7.97079 9.36612 8.1456C9.54093 8.32042 9.76366 8.43947 10.0061 8.4877C10.2486 8.53593 10.4999 8.51118 10.7284 8.41657C10.9568 8.32196 11.152 8.16174 11.2893 7.95618C11.4267 7.75062 11.5 7.50895 11.5 7.26172C11.5 6.9302 11.3683 6.61226 11.1339 6.37784C10.8995 6.14341 10.5815 6.01172 10.25 6.01172Z"
+      fill="currentColor"
+    />
+    <path
+      d="M8 10.0117C7.30982 10.0129 6.63168 10.1926 6.03151 10.5334C5.43135 10.8743 4.92958 11.3646 4.575 11.9567L5.43 12.4567C5.69683 12.0136 6.07369 11.647 6.524 11.3925C6.97431 11.1381 7.48276 11.0043 8 11.0043C8.51724 11.0043 9.0257 11.1381 9.47601 11.3925C9.92631 11.647 10.3032 12.0136 10.57 12.4567L11.425 11.9567C11.0704 11.3646 10.5687 10.8743 9.96849 10.5334C9.36833 10.1926 8.69019 10.0129 8 10.0117Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const DissatisfiedIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DissatisfiedIcon/DissatisfiedIcon',
+}))``;

package/src/icons/DissatisfiedIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/DissatisfiedIcon/DissatisfiedIcon';

package/src/icons/EditIcon/EditIcon.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IconProps {
+  className?: string;
+}
+
+const Icon = ({ className }: IconProps) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    className={className}
+    fill="none"
+    data-component-name="icons/EditIcon"
+  >
+    <rect width="16" height="16" fill="white" style={{ mixBlendMode: 'multiply' }} />
+    <path d="M15 13H1V14H15V13Z" fill="currentColor" />
+    <path
+      d="M12.7 4.5C13.1 4.1 13.1 3.5 12.7 3.1L10.9 1.3C10.5 0.9 9.9 0.9 9.5 1.3L2 8.8V12H5.2L12.7 4.5ZM10.2 2L12 3.8L10.5 5.3L8.7 3.5L10.2 2ZM3 11V9.2L8 4.2L9.8 6L4.8 11H3Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const EditIcon = styled(Icon)`
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+`;

package/src/icons/EditIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/EditIcon/EditIcon';

package/src/icons/ErrorIcon/ErrorIcon.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Icon = () => (
+  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8.5 1C4.63438 1 1.5 4.13438 1.5 8C1.5 11.8656 4.63438 15 8.5 15C12.3656 15 15.5 11.8656 15.5 8C15.5 4.13438 12.3656 1 8.5 1ZM11.0844 10.6594L10.0531 10.6547L8.5 8.80313L6.94844 10.6531L5.91563 10.6578C5.84688 10.6578 5.79063 10.6031 5.79063 10.5328C5.79063 10.5031 5.80156 10.475 5.82031 10.4516L7.85313 8.02969L5.82031 5.60938C5.80143 5.58647 5.79096 5.5578 5.79063 5.52812C5.79063 5.45937 5.84688 5.40312 5.91563 5.40312L6.94844 5.40781L8.5 7.25938L10.0516 5.40938L11.0828 5.40469C11.1516 5.40469 11.2078 5.45937 11.2078 5.52969C11.2078 5.55937 11.1969 5.5875 11.1781 5.61094L9.14844 8.03125L11.1797 10.4531C11.1984 10.4766 11.2094 10.5047 11.2094 10.5344C11.2094 10.6031 11.1531 10.6594 11.0844 10.6594Z"
+      fill="var(--color-error-base)"
+    />
+  </svg>
+);
+
+export const ErrorIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ErrorIcon/ErrorIcon',
+}))``;

package/src/icons/ErrorIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/ErrorIcon/ErrorIcon';

package/src/icons/ExpandIcon/ExpandIcon.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IconProps {
+  className?: string;
+}
+
+const Icon = ({ className }: IconProps) => (
+  <svg
+    data-component-name="icons/ExpandIcon"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <g clipPath="url(#clip0_906_12129)">
+      <rect width="14" height="14" fill="none" style={{ mixBlendMode: 'multiply' }} />
+      <path
+        d="M8.75 0.875V1.75H11.6314L7.875 5.50462L8.49362 6.125L12.25 2.36863V5.25H13.125V0.875H8.75Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.125 8.4945L5.509 7.875L1.75 11.6314V8.75H0.875V13.125H5.25V12.25H2.36863L6.125 8.4945Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_906_12129">
+        <rect width="14" height="14" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const ExpandIcon = styled(Icon)`
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+`;

package/src/icons/ExpandIcon/index.ts

@@ -0,0 +1 @@
+export { ExpandIcon } from '@theme/icons/ExpandIcon/ExpandIcon';