@redocly/theme 0.0.0-react18-20231120182601

package/src/icons/ExternalIcon/ExternalIcon.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+
+// TODO use with "Sidebar/ExternalIcon"
+const Icon = ({
+  className,
+  dataComponentName,
+}: {
+  className?: string;
+  dataComponentName?: string;
+}): JSX.Element => (
+  <span data-component-name={dataComponentName ?? 'icons/ExternalIcon'}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      x="0px"
+      y="0px"
+      viewBox="0 0 110 110"
+      enableBackground="new 0 0 110 110"
+      className={className}
+    >
+      <path d="M-408.167-318.5" />
+      <line
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="0.25"
+        strokeMiterlimit="10"
+        x1="57.5"
+        y1="11.75"
+        x2="57.5"
+        y2="17.5"
+      />
+      <path d="M98.57,4.784c-0.024-0.113-0.047-0.223-0.074-0.334c-0.035-0.117-0.075-0.231-0.117-0.346 c-0.023-0.062-0.037-0.125-0.064-0.187c-0.016-0.032-0.03-0.06-0.049-0.092c-0.048-0.119-0.107-0.227-0.17-0.336 c-0.05-0.089-0.095-0.179-0.152-0.265c-0.062-0.1-0.139-0.195-0.209-0.292C97.67,2.85,97.611,2.77,97.545,2.69 c-0.081-0.092-0.172-0.178-0.258-0.262c-0.07-0.068-0.139-0.139-0.212-0.202c-0.093-0.083-0.196-0.158-0.3-0.232 c-0.08-0.058-0.152-0.114-0.236-0.163c-0.104-0.069-0.219-0.128-0.329-0.186c-0.091-0.046-0.175-0.093-0.262-0.132 c-0.044-0.019-0.081-0.043-0.121-0.061c-0.074-0.03-0.154-0.046-0.234-0.072c-0.095-0.033-0.19-0.065-0.288-0.092 c-0.123-0.034-0.246-0.059-0.369-0.083c-0.096-0.019-0.188-0.036-0.289-0.046c-0.131-0.018-0.263-0.022-0.393-0.028 c-0.064-0.002-0.12-0.012-0.186-0.012L63.77,1.305c-2.535,0.017-4.566,2.078-4.554,4.605c0.019,2.525,2.084,4.563,4.604,4.546 l19.258-0.121l-29.79,30.162c-1.112,1.126-1.526,2.678-1.233,4.118c0.174,0.863,0.596,1.691,1.272,2.357 c0.897,0.888,2.073,1.325,3.245,1.32c1.17-0.007,2.337-0.459,3.227-1.361l0.002-0.001l29.787-30.158l0.121,19.255 c0.014,2.523,2.07,4.564,4.602,4.545c1.268-0.005,2.408-0.526,3.233-1.357c0.817-0.834,1.325-1.98,1.317-3.242L98.675,5.665 c0-0.063-0.016-0.124-0.016-0.189c-0.009-0.123-0.015-0.25-0.032-0.375C98.616,4.992,98.592,4.89,98.57,4.784z" />
+      <path d="M6.542,83.279c0,5.717,4.635,10.354,10.354,10.354l55.616,0.065c5.719,0,10.354-4.636,10.354-10.354l-0.091-40.782h6.135 v40.849c0,9.014-7.307,16.319-16.319,16.319l-56.36-0.066c-8.597,0-15.564-6.969-15.564-15.562L0.585,27.821 c0-9.014,7.306-16.32,16.32-16.32l41.138-0.084v6.142L16.98,17.535c-5.718,0-10.354,4.635-10.354,10.354L6.542,83.279z" />
+    </svg>
+  </span>
+);
+
+export const ExternalIcon = styled(Icon)`
+  width: 10px;
+  height: 10px;
+  margin-left: 5px;
+  fill: currentColor;
+`;

package/src/icons/ExternalIcon/index.ts

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

package/src/icons/FileIcon/FileIcon.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IconProps {
+  className?: string;
+}
+
+const Icon = ({ className }: IconProps) => (
+  <svg
+    data-component-name="icons/FileIcon"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <rect width="14" height="14" fill="none" style={{ mixBlendMode: 'multiply' }} />
+    <path
+      d="M12.85 4.65018L9.35 1.15018C9.30601 1.10132 9.25192 1.0626 9.19149 1.0367C9.13106 1.0108 9.06572 0.998339 9 1.00018H4C3.73502 1.00096 3.48112 1.10656 3.29375 1.29393C3.10638 1.4813 3.00078 1.7352 3 2.00018V14.0002C3.00078 14.2652 3.10638 14.5191 3.29375 14.7064C3.48112 14.8938 3.73502 14.9994 4 15.0002H12C12.265 14.9994 12.5189 14.8938 12.7062 14.7064C12.8936 14.5191 12.9992 14.2652 13 14.0002V5.00018C13.0018 4.93446 12.9894 4.86912 12.9635 4.80869C12.9376 4.74826 12.8989 4.69417 12.85 4.65018ZM9 2.20018L11.8 5.00018H9V2.20018ZM12 14.0002H4V2.00018H8V5.00018C8.00078 5.26515 8.10638 5.51906 8.29375 5.70642C8.48112 5.89379 8.73502 5.9994 9 6.00018H12V14.0002Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const FileIcon = styled(Icon)`
+  width: 1.3em;
+  height: 1.3em;
+  vertical-align: middle;
+`;

package/src/icons/FileIcon/index.ts

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

package/src/icons/LanguageIcon/LanguageIcon.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Icon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M13.35 12.5141C13.3531 12.5094 13.3578 12.5047 13.3609 12.5C14.3844 11.2828 15 9.71406 15 8C15 6.28594 14.3844 4.71719 13.3625 3.5C13.3594 3.49531 13.3547 3.49219 13.3516 3.4875C13.3344 3.46719 13.3187 3.44844 13.3016 3.42969C13.2953 3.42188 13.2891 3.41563 13.2828 3.40781L13.2188 3.33437L13.2172 3.33281C13.1938 3.30625 13.1687 3.27969 13.1453 3.25312L13.1438 3.25156C13.0938 3.19844 13.0437 3.14531 12.9922 3.09375L12.9906 3.09219L12.9156 3.01719L12.9109 3.0125C12.8875 2.98906 12.8641 2.96719 12.8406 2.94531C12.8328 2.9375 12.825 2.92969 12.8156 2.92188C12.8 2.90625 12.7844 2.89219 12.7688 2.87812C12.7641 2.87344 12.7578 2.86875 12.7531 2.8625C11.5063 1.70625 9.83594 1 8 1C6.16406 1 4.49375 1.70625 3.24531 2.8625C3.24062 2.86719 3.23438 2.87187 3.22969 2.87812C3.21406 2.89219 3.19844 2.90781 3.18281 2.92344C3.175 2.93125 3.16719 2.93906 3.15781 2.94688C3.13438 2.96875 3.11094 2.99219 3.0875 3.01406L3.08281 3.01875L3.00781 3.09375L3.00625 3.09531C2.95469 3.14688 2.90469 3.2 2.85469 3.25312L2.85313 3.25469C2.82813 3.28125 2.80469 3.30781 2.78125 3.33437L2.77969 3.33594C2.75781 3.35938 2.73594 3.38437 2.71563 3.40937C2.70938 3.41719 2.70313 3.42344 2.69688 3.43125C2.67969 3.45 2.66406 3.47031 2.64687 3.48906C2.64375 3.49375 2.63906 3.49688 2.63594 3.50156C1.61562 4.71719 1 6.28594 1 8C1 9.71406 1.61563 11.2828 2.6375 12.5C2.64062 12.5047 2.64531 12.5094 2.64844 12.5141L2.69688 12.5719C2.70313 12.5797 2.70938 12.5859 2.71563 12.5938L2.77969 12.6672C2.77969 12.6687 2.78125 12.6688 2.78125 12.6703C2.80469 12.6969 2.82813 12.7234 2.85313 12.7484L2.85469 12.75C2.90469 12.8031 2.95469 12.8562 3.00469 12.9078L3.00625 12.9094C3.03125 12.9344 3.05469 12.9594 3.07969 12.9828L3.08437 12.9875C3.13594 13.0391 3.18906 13.0891 3.24219 13.1375C4.49375 14.2937 6.16406 15 8 15C9.83594 15 11.5062 14.2937 12.7547 13.1375C12.8079 13.0887 12.86 13.0387 12.9109 12.9875L12.9156 12.9828C12.9406 12.9578 12.9656 12.9344 12.9891 12.9094L12.9906 12.9078C13.0422 12.8562 13.0922 12.8031 13.1406 12.75L13.1422 12.7484C13.1656 12.7219 13.1906 12.6969 13.2141 12.6703C13.2141 12.6688 13.2156 12.6687 13.2156 12.6672C13.2375 12.6438 13.2594 12.6187 13.2797 12.5938C13.2859 12.5859 13.2922 12.5797 13.2984 12.5719C13.3161 12.553 13.3333 12.5338 13.35 12.5141ZM13.4141 10.2859C13.1984 10.7953 12.9141 11.2672 12.5672 11.6953C12.1765 11.3577 11.7494 11.0647 11.2937 10.8219C11.475 10.0891 11.5875 9.28438 11.6172 8.4375H13.8594C13.8125 9.07656 13.6625 9.69687 13.4141 10.2859ZM13.8594 7.5625H11.6172C11.5875 6.71562 11.475 5.91094 11.2937 5.17812C11.7516 4.93437 12.1781 4.64062 12.5672 4.30469C13.3212 5.23277 13.7722 6.3699 13.8594 7.5625ZM10.2859 2.58594C10.9062 2.84844 11.4703 3.21094 11.9672 3.66719C11.6785 3.91296 11.3679 4.13159 11.0391 4.32031C10.7937 3.61719 10.4797 3.00625 10.1141 2.51719C10.1719 2.53906 10.2297 2.5625 10.2859 2.58594ZM8.87031 13.5328C8.72656 13.6453 8.58281 13.7312 8.4375 13.7891V10.8906C9.05749 10.9339 9.66717 11.0719 10.2453 11.3C10.1156 11.6844 9.96562 12.0391 9.79219 12.3594C9.52031 12.8656 9.20156 13.2703 8.87031 13.5328ZM9.79219 3.64062C9.96406 3.9625 10.1156 4.31719 10.2453 4.7C9.66717 4.92806 9.05749 5.06612 8.4375 5.10938V2.2125C8.58125 2.27031 8.72656 2.35469 8.87031 2.46875C9.20156 2.72969 9.52031 3.13438 9.79219 3.64062ZM8.4375 10.0141V8.4375H10.7422C10.7172 9.12813 10.6313 9.79844 10.4875 10.4344L10.4828 10.4531C9.82708 10.2045 9.13751 10.0564 8.4375 10.0141ZM8.4375 7.5625V5.98594C9.15312 5.94219 9.84063 5.79063 10.4828 5.54688L10.4875 5.56563C10.6313 6.20156 10.7172 6.87031 10.7422 7.5625H8.4375ZM7.5625 8.4375V10.0141C6.84688 10.0578 6.15938 10.2094 5.51719 10.4531L5.5125 10.4344C5.36875 9.79844 5.28281 9.12969 5.25781 8.4375H7.5625ZM5.25781 7.5625C5.28281 6.87187 5.36875 6.20156 5.5125 5.56563L5.51719 5.54688C6.15938 5.79063 6.84531 5.94219 7.5625 5.98594V7.5625H5.25781ZM7.5625 10.8906V13.7875C7.41875 13.7297 7.27344 13.6453 7.12969 13.5312C6.79844 13.2703 6.47813 12.8641 6.20625 12.3578C6.03438 12.0359 5.88281 11.6812 5.75313 11.2984C6.33438 11.0703 6.93906 10.9344 7.5625 10.8906ZM7.5625 5.10938C6.94251 5.06612 6.33283 4.92806 5.75469 4.7C5.88437 4.31562 6.03437 3.96094 6.20781 3.64062C6.47969 3.13438 6.79844 2.72812 7.13125 2.46719C7.275 2.35469 7.41875 2.26875 7.56406 2.21094V5.10938H7.5625ZM5.71406 2.58594C5.77188 2.5625 5.82812 2.53906 5.88594 2.51719C5.52031 3.00625 5.20625 3.61719 4.96094 4.32031C4.63281 4.13281 4.32188 3.91406 4.03281 3.66719C4.52969 3.21094 5.09375 2.84844 5.71406 2.58594ZM2.58594 5.71406C2.80156 5.20469 3.08594 4.73281 3.43281 4.30469C3.82187 4.64062 4.24844 4.93437 4.70625 5.17812C4.525 5.91094 4.4125 6.71562 4.38281 7.5625H2.14062C2.1875 6.92344 2.3375 6.30313 2.58594 5.71406ZM2.14062 8.4375H4.38281C4.4125 9.28438 4.525 10.0891 4.70625 10.8219C4.25059 11.0647 3.82347 11.3577 3.43281 11.6953C2.6788 10.7672 2.22776 9.6301 2.14062 8.4375ZM5.71406 13.4141C5.09375 13.1516 4.52969 12.7891 4.03281 12.3328C4.32188 12.0859 4.63281 11.8687 4.96094 11.6797C5.20625 12.3828 5.52031 12.9938 5.88594 13.4828C5.82812 13.4609 5.77031 13.4375 5.71406 13.4141ZM10.2859 13.4141C10.2281 13.4375 10.1719 13.4609 10.1141 13.4828C10.4797 12.9938 10.7937 12.3828 11.0391 11.6797C11.3672 11.8672 11.6781 12.0859 11.9672 12.3328C11.4731 12.7872 10.9043 13.1529 10.2859 13.4141Z"
+      fill="#8D8D8D"
+    />
+  </svg>
+);
+
+export const LanguageIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/LanguageIcon/LanguageIcon',
+}))``;

package/src/icons/LanguageIcon/index.ts

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

package/src/icons/LogoutIcon/LogoutIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export const Icon = () => (
+  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="18" height="18" transform="translate(11 11)" />
+    <path
+      d="M14.375 27.875H21.125C21.4233 27.8747 21.7092 27.756 21.9201 27.5451C22.131 27.3342 22.2497 27.0483 22.25 26.75V25.0625H21.125V26.75H14.375V13.25H21.125V14.9375H22.25V13.25C22.2497 12.9517 22.131 12.6658 21.9201 12.4549C21.7092 12.244 21.4233 12.1253 21.125 12.125H14.375C14.0767 12.1253 13.7908 12.244 13.5799 12.4549C13.369 12.6658 13.2503 12.9517 13.25 13.25V26.75C13.2503 27.0483 13.369 27.3342 13.5799 27.5451C13.7908 27.756 14.0767 27.8747 14.375 27.875Z"
+      fill="#FF4D6D"
+    />
+    <path
+      d="M22.5796 22.5796L24.5968 20.5625H16.625V19.4375H24.5968L22.5796 17.4204L23.375 16.625L26.75 20L23.375 23.375L22.5796 22.5796Z"
+      fill="#FF4D6D"
+    />
+  </svg>
+);
+
+export const LogoutIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/LogoutIcon/LogoutIcon',
+}))``;

package/src/icons/LogoutIcon/index.ts

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

package/src/icons/NeutralIcon/NeutralIcon.tsx

@@ -0,0 +1,25 @@
+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="M11 10.5117H5V11.5117H11V10.5117Z" fill="currentColor" />
+  </svg>
+);
+
+export const NeutralIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/NeutralIcon/NeutralIcon',
+}))``;

package/src/icons/NeutralIcon/index.ts

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

package/src/icons/PlusIcon/PlusIcon.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export const Icon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.53125 2.375H8.46875C8.55208 2.375 8.59375 2.41667 8.59375 2.5V13.5C8.59375 13.5833 8.55208 13.625 8.46875 13.625H7.53125C7.44792 13.625 7.40625 13.5833 7.40625 13.5V2.5C7.40625 2.41667 7.44792 2.375 7.53125 2.375Z"
+      fill="inherit"
+    />
+    <path
+      d="M2.75 7.40625H13.25C13.3333 7.40625 13.375 7.44792 13.375 7.53125V8.46875C13.375 8.55208 13.3333 8.59375 13.25 8.59375H2.75C2.66667 8.59375 2.625 8.55208 2.625 8.46875V7.53125C2.625 7.44792 2.66667 7.40625 2.75 7.40625Z"
+      fill="inherit"
+    />
+  </svg>
+);
+
+export const PlusIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/PlusIcon/PlusIcon',
+}))``;

package/src/icons/PlusIcon/index.ts

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

package/src/icons/PointingArrowIcon/PointingArrowIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Icon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="#8D8D8D" xmlns="http://www.w3.org/2000/svg">
+    <rect width="16" height="16" fill="none" />
+    <path
+      d="M9 3L8.285 3.6965L12.075 7.5H2V8.5H12.075L8.285 12.2865L9 13L14 8L9 3Z"
+      fill="inherit"
+    />
+  </svg>
+);
+
+export const PointingArrowIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/PointingArrowIcon/PointingArrowIcon',
+}))``;

package/src/icons/PointingArrowIcon/index.ts

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

package/src/icons/RadioCheckButtonIcon/RadioCheckButtonIcon.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Icon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <rect width="16" height="16" fill="none" />
+    <path
+      d="M8 1C6.61553 1 5.26216 1.41054 4.11101 2.17971C2.95987 2.94888 2.06266 4.04213 1.53285 5.32122C1.00303 6.6003 0.86441 8.00776 1.13451 9.36563C1.4046 10.7235 2.07129 11.9708 3.05026 12.9497C4.02922 13.9287 5.2765 14.5954 6.63437 14.8655C7.99224 15.1356 9.3997 14.997 10.6788 14.4672C11.9579 13.9373 13.0511 13.0401 13.8203 11.889C14.5895 10.7378 15 9.38447 15 8C15 6.14348 14.2625 4.36301 12.9497 3.05025C11.637 1.7375 9.85652 1 8 1ZM8 14C6.81332 14 5.65328 13.6481 4.66658 12.9888C3.67989 12.3295 2.91085 11.3925 2.45673 10.2961C2.0026 9.19974 1.88378 7.99334 2.11529 6.82946C2.3468 5.66557 2.91825 4.59647 3.75736 3.75736C4.59648 2.91824 5.66558 2.3468 6.82946 2.11529C7.99335 1.88378 9.19975 2.0026 10.2961 2.45672C11.3925 2.91085 12.3295 3.67988 12.9888 4.66658C13.6481 5.65327 14 6.81331 14 8C14 9.5913 13.3679 11.1174 12.2426 12.2426C11.1174 13.3679 9.5913 14 8 14Z"
+      fill="currentColor"
+    />
+    <path
+      d="M7 10.625L4.5 8.145L5.295 7.375L7 9.05L10.705 5.375L11.5 6.165L7 10.625Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export const RadioCheckButtonIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/RadioCheckButtonIcon/RadioCheckButtonIcon',
+}))``;

package/src/icons/RadioCheckButtonIcon/index.ts

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

package/src/icons/ReportIcon/ReportIcon.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IconProps {
+  className?: string;
+}
+
+const Icon = ({ className }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    className={className}
+  >
+    <rect width="16" height="16" fill="none" />
+    <path
+      d="M8 10C7.85166 10 7.70666 10.044 7.58332 10.1264C7.45999 10.2088 7.36386 10.3259 7.30709 10.463C7.25032 10.6 7.23547 10.7508 7.26441 10.8963C7.29335 11.0418 7.36478 11.1754 7.46967 11.2803C7.57456 11.3852 7.7082 11.4566 7.85368 11.4856C7.99917 11.5145 8.14997 11.4997 8.28701 11.4429C8.42406 11.3861 8.54119 11.29 8.6236 11.1667C8.70601 11.0433 8.75 10.8983 8.75 10.75C8.75 10.5511 8.67098 10.3603 8.53033 10.2197C8.38968 10.079 8.19891 10 8 10Z"
+      fill="currentColor"
+      fillOpacity="1"
+    />
+    <path d="M8.5 4.5H7.5V9H8.5V4.5Z" fill="currentColor" fillOpacity="1" />
+    <path
+      d="M13 14H3C2.73488 13.9997 2.4807 13.8942 2.29323 13.7068C2.10576 13.5193 2.0003 13.2651 2 13V3C2.0003 2.73488 2.10576 2.4807 2.29323 2.29323C2.4807 2.10576 2.73488 2.0003 3 2H13C13.2651 2.0003 13.5193 2.10576 13.7068 2.29323C13.8942 2.4807 13.9997 2.73488 14 3V13C13.9997 13.2651 13.8942 13.5193 13.7068 13.7068C13.5193 13.8942 13.2651 13.9997 13 14ZM3 3V13H13.0006L13 3H3Z"
+      fill="currentColor"
+      fillOpacity="1"
+    />
+  </svg>
+);
+
+export const ReportIcon = styled(Icon)`
+  width: 1.2em;
+  height: 1.2em;
+  vertical-align: middle;
+`;

package/src/icons/ReportIcon/index.ts

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

package/src/icons/RocketIcon/RocketIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IconProps {
+  className?: string;
+  color?: string;
+}
+
+const Icon = ({ className }: IconProps) => (
+  <svg
+    data-component-name="icons/RocketIcon"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13.7002 1.55068C13.5251 1.49305 13.3388 1.47772 13.1567 1.50596L13.152 1.50671C11.8258 1.7252 9.24768 2.44828 6.43935 4.8604C5.65751 4.58592 4.81217 4.53466 3.99912 4.71587C3.07823 4.92111 2.24649 5.41394 1.62419 6.12309C1.45038 6.32115 1.46012 6.62011 1.64645 6.80644L3.21653 8.37652C3.16682 8.44409 3.11716 8.51231 3.06755 8.5812C2.92429 8.78013 2.94639 9.05359 3.11974 9.22694L3.17618 9.28339L2.5864 9.87317L2.58535 9.87422C2.36806 10.0928 2.24609 10.3885 2.24609 10.6967C2.24609 11.0049 2.36806 11.3006 2.58535 11.5192L2.5864 11.5203L4.47974 13.4136L4.48079 13.4147C4.69938 13.632 4.99507 13.7539 5.30329 13.7539C5.56764 13.7539 5.82278 13.6642 6.02797 13.5016C6.07134 13.4785 6.11147 13.449 6.14684 13.4136L6.72662 12.8338L6.77307 12.8803C6.94695 13.0542 7.22146 13.0758 7.42044 12.9313C7.48845 12.8819 7.55583 12.8324 7.62256 12.783L9.19307 14.3535C9.3794 14.5398 9.67836 14.5495 9.87642 14.3757C10.5856 13.7534 11.0784 12.9217 11.2836 12.0008C11.4657 11.1839 11.4131 10.3345 11.1352 9.54961C13.5373 6.75034 14.273 4.18993 14.4869 2.84653C14.5165 2.66498 14.5027 2.479 14.4467 2.30378C14.3906 2.1282 14.2937 1.96841 14.164 1.83751C14.0342 1.7066 13.8753 1.60831 13.7002 1.55068ZM10.3358 10.4241C9.77433 11.0018 9.13889 11.5852 8.41986 12.166L9.54647 13.2927C9.91995 12.8623 10.1826 12.3441 10.3076 11.7833C10.4077 11.334 10.4163 10.8719 10.3358 10.4241ZM7.40379 11.6944C12.1351 8.03789 13.2477 4.2709 13.4995 2.68816L13.4999 2.68582C13.5041 2.65984 13.5022 2.63321 13.4942 2.60813C13.4862 2.58305 13.4723 2.56022 13.4538 2.54152C13.4352 2.52282 13.4125 2.50878 13.3875 2.50054C13.363 2.49248 13.337 2.49021 13.3115 2.49391C12.1198 2.69072 9.6488 3.36687 6.93487 5.75486C6.90034 5.79743 6.85946 5.8334 6.81428 5.86196C5.99258 6.5985 5.15012 7.49283 4.31544 8.57889C4.29366 8.6174 4.26636 8.65363 4.23355 8.68644C4.23319 8.6868 4.23283 8.68716 4.23247 8.68752C4.19837 8.73243 4.16429 8.77767 4.13023 8.82323L4.18811 8.8811C4.20578 8.89449 4.22276 8.90921 4.23893 8.92526L7.09226 11.7586C7.12536 11.7915 7.15338 11.8285 7.17583 11.8684C7.22546 11.831 7.27471 11.7936 7.32359 11.7562C7.34864 11.7325 7.37553 11.7119 7.40379 11.6944ZM3.83102 7.57679C4.40831 6.85775 4.98895 6.22264 5.56449 5.66166C5.12019 5.58338 4.66217 5.59262 4.21666 5.69192C3.65578 5.81692 3.13757 6.07956 2.70726 6.45303L3.83102 7.57679ZM3.29456 10.5792L3.88329 9.9905L6.01952 12.1267L5.51323 12.633C5.47994 12.6533 5.44888 12.6775 5.42079 12.7055C5.38956 12.7365 5.34732 12.7539 5.30329 12.7539C5.25942 12.7539 5.21732 12.7366 5.18613 12.7058L3.29456 10.8142C3.2637 10.783 3.24609 10.7406 3.24609 10.6967C3.24609 10.6528 3.26371 10.6104 3.29456 10.5792Z"
+      fill="currentColor"
+      fillOpacity="0.87"
+    />
+  </svg>
+);
+
+export const RocketIcon = styled(Icon)`
+  width: 1em;
+  height: 1em;
+`;

package/src/icons/RocketIcon/index.tsx

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

package/src/icons/SatisfiedIcon/SatisfiedIcon.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Icon = () => (
+  <svg
+    version="1.1"
+    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"
+      style={{ mixBlendMode: 'multiply' }}
+    />
+    <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.00134 7.0972 6.96991 6.93405 6.90757 6.78179C6.84522 6.62953 6.7532 6.49121 6.63686 6.37487C6.52052 6.25853 6.38219 6.1665 6.22993 6.10416C6.07767 6.04181 5.91453 6.01039 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.5013 7.0972 11.4699 6.93405 11.4076 6.78179C11.3452 6.62953 11.2532 6.49121 11.1369 6.37487C11.0205 6.25853 10.8822 6.1665 10.7299 6.10416C10.5777 6.04181 10.4145 6.01039 10.25 6.01172Z"
+      fill="currentColor"
+    />
+    <path
+      d="M8 12.5117C8.69019 12.5106 9.36833 12.3308 9.96849 11.99C10.5687 11.6492 11.0704 11.1589 11.425 10.5667L10.57 10.0667C10.3032 10.5098 9.92631 10.8764 9.47601 11.1309C9.0257 11.3854 8.51724 11.5191 8 11.5191C7.48276 11.5191 6.97431 11.3854 6.524 11.1309C6.07369 10.8764 5.69683 10.5098 5.43 10.0667L4.575 10.5667C4.92958 11.1589 5.43135 11.6492 6.03151 11.99C6.63168 12.3308 7.30982 12.5106 8 12.5117Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const SatisfiedIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/SatisfiedIcon/SatisfiedIcon',
+}))``;

package/src/icons/SatisfiedIcon/index.ts

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

package/src/icons/SelectIcon/SelectIcon.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IconProps {
+  className?: string;
+}
+
+const Icon = ({ className }: IconProps) => (
+  <svg
+    data-component-name="icons/SelectIcon"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <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" />
+    <path
+      d="M10.5 10.9425L9.205 9.64746L8.5 10.3525L10.5 12.3525L14.5 8.35246L13.795 7.64746L10.5 10.9425Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const SelectIcon = styled(Icon)`
+  width: 1.3em;
+  height: 1.3em;
+  vertical-align: middle;
+`;

package/src/icons/SelectIcon/index.ts

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

package/src/icons/ShelfIcon/ShelfIcon.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+
+import { getCssColorVariable } from '@theme/utils';
+
+const directionMap = {
+  right: '0deg',
+  down: '90deg',
+  left: '180deg',
+  up: '270deg',
+};
+
+export interface ShelfIconProps {
+  className?: string;
+  float?: 'left' | 'right';
+  size?: string;
+  color?: string;
+  direction: 'left' | 'right' | 'up' | 'down';
+  style?: React.CSSProperties;
+}
+
+const IntShelfIcon = ({ className, style }: ShelfIconProps): JSX.Element => (
+  <svg
+    className={className}
+    style={style}
+    viewBox="0 0 4.25 7"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path d="M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z" />
+    <path d="M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z" />
+  </svg>
+);
+
+export const ShelfIcon = styled(IntShelfIcon).attrs(() => ({
+  'data-component-name': 'icons/ShelfIcon/ShelfIcon',
+}))`
+  ${({ size = '9px', float = '', direction, color }) => css`
+    height: ${size};
+    width: ${size};
+    float: ${float};
+    transform: rotateZ(${directionMap[direction]});
+    fill: ${getCssColorVariable(color)};
+  `}
+  vertical-align: middle;
+  transition: transform 0.2s ease-out;
+`;

package/src/icons/ShelfIcon/index.ts

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

package/src/icons/SpinnerIcon/SpinnerIcon.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface SpinnerIconProps {
+  className?: string;
+}
+export const Icon = ({ className }: SpinnerIconProps) => (
+  <svg className={className} viewBox="0 -1 38 40" strokeOpacity=".5">
+    <g fill="none" fillRule="evenodd">
+      <g transform="translate(1 1)" strokeWidth="4">
+        <circle strokeOpacity=".3" cx="18" cy="18" r="18" />
+        <path d="M36 18c0-9.94-8.06-18-18-18">
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 18 18"
+            to="360 18 18"
+            dur="1s"
+            repeatCount="indefinite"
+          />
+        </path>
+      </g>
+    </g>
+  </svg>
+);
+
+export const SpinnerIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/AnchorIcon/AnchorIcon',
+}))`
+  cursor: pointer;
+  width: 1em;
+  height: 1em;
+  left: 0.8em;
+  stroke: var(--search-input-text-color);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 1.2em;
+    height: 1.2em;
+  }
+`;

package/src/icons/SpinnerIcon/index.ts

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

package/src/icons/ThumbDownIcon/ThumbDownIcon.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Icon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+    <path
+      d="M12.8422 6.66036C12.8984 6.47286 12.9266 6.27911 12.9266 6.08224C12.9266 5.64005 12.7812 5.21505 12.5188 4.86818C12.575 4.68068 12.6031 4.48693 12.6031 4.29005C12.6031 3.84786 12.4578 3.42286 12.1953 3.07599C12.2516 2.88849 12.2797 2.69474 12.2797 2.49786C12.2797 1.69161 11.8 0.965052 11.0562 0.647865C10.9255 0.591503 10.7845 0.562777 10.6422 0.56349H1.25C0.973437 0.56349 0.75 0.786927 0.75 1.06349V6.75099C0.75 7.02755 0.973437 7.25099 1.25 7.25099H3.27031L4.61094 12.1072C4.82656 12.8901 5.54531 13.4369 6.35781 13.4369C6.82188 13.4369 7.25469 13.2526 7.575 12.9151C7.89531 12.5791 8.05937 12.1385 8.03594 11.6744L7.94219 9.75411H11.6906C11.8797 9.75411 12.0641 9.70411 12.2266 9.6088C12.8578 9.24161 13.25 8.57599 13.25 7.87443C13.25 7.43224 13.1047 7.00724 12.8422 6.66036ZM1.875 6.12443V1.68693H3.14062V6.12443H1.875ZM11.675 8.63068H6.7625L6.9125 11.7307C6.92188 11.9166 6.83906 12.0916 6.68437 12.2072C6.58906 12.2776 6.47188 12.3135 6.35469 12.3119C6.20497 12.3105 6.05977 12.2605 5.94087 12.1695C5.82198 12.0785 5.73581 11.9514 5.69531 11.8072L4.14062 6.17443V1.68693H10.6313C10.7874 1.75692 10.9201 1.87054 11.0132 2.01413C11.1063 2.15772 11.156 2.32515 11.1562 2.4963C11.1562 2.64786 11.1203 2.79161 11.0484 2.92286L10.8313 3.31974L11.1734 3.61661C11.2698 3.70003 11.347 3.80322 11.3998 3.91917C11.4527 4.03511 11.4799 4.16107 11.4797 4.28849C11.4797 4.44005 11.4437 4.5838 11.3719 4.71505L11.1547 5.11193L11.4969 5.4088C11.5932 5.49222 11.6704 5.59541 11.7232 5.71135C11.7761 5.82729 11.8033 5.95326 11.8031 6.08068C11.8031 6.23224 11.7672 6.37599 11.6953 6.50724L11.4766 6.90568L11.8188 7.20255C11.9151 7.28597 11.9923 7.38916 12.0451 7.5051C12.098 7.62104 12.1252 7.74701 12.125 7.87443C12.125 8.17286 11.9531 8.46036 11.675 8.63068Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const ThumbDownIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ThumbDownIcon/ThumbDownIcon',
+}))``;

package/src/icons/ThumbDownIcon/index.ts

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

package/src/icons/ThumbUpIcon/ThumbUpIcon.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Icon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+    <path
+      d="M12.8422 7.33966C13.1047 6.99279 13.25 6.56779 13.25 6.1256C13.25 5.42404 12.8578 4.75997 12.2266 4.38966C12.0641 4.29434 11.879 4.24417 11.6906 4.24435H7.94375L8.0375 2.32404C8.05938 1.85997 7.89531 1.41935 7.57656 1.08341C7.42013 0.917829 7.23141 0.786087 7.02206 0.696324C6.8127 0.606562 6.58716 0.560687 6.35938 0.561535C5.54688 0.561535 4.82812 1.10841 4.6125 1.89122L3.27031 6.7506H1.25C0.973437 6.7506 0.75 6.97404 0.75 7.2506V12.9381C0.75 13.2147 0.973437 13.4381 1.25 13.4381H10.6453C10.7891 13.4381 10.9297 13.41 11.0594 13.3537C11.8031 13.0365 12.2828 12.31 12.2828 11.5037C12.2828 11.3068 12.2547 11.1131 12.1984 10.9256C12.4609 10.5787 12.6062 10.1537 12.6062 9.71154C12.6062 9.51466 12.5781 9.32091 12.5219 9.13341C12.7844 8.78654 12.9297 8.36154 12.9297 7.91935C12.9266 7.72247 12.8984 7.52716 12.8422 7.33966ZM1.875 12.3131V7.8756H3.14062V12.3131H1.875ZM11.8188 6.79747L11.4766 7.09435L11.6938 7.49122C11.7653 7.62196 11.8024 7.76875 11.8016 7.91779C11.8016 8.1756 11.6891 8.42091 11.4953 8.58966L11.1531 8.88654L11.3703 9.28341C11.4419 9.41414 11.479 9.56094 11.4781 9.70997C11.4781 9.96779 11.3656 10.2131 11.1719 10.3818L10.8297 10.6787L11.0469 11.0756C11.1184 11.2063 11.1555 11.3531 11.1547 11.5022C11.1547 11.8522 10.9484 12.1678 10.6297 12.3115H4.14062V7.8256L5.69531 2.19279C5.7354 2.04841 5.82146 1.92104 5.94044 1.82997C6.05943 1.7389 6.20485 1.68909 6.35469 1.6881C6.47344 1.6881 6.59062 1.72247 6.68437 1.79279C6.83906 1.90841 6.92188 2.08341 6.9125 2.26935L6.7625 5.36935H11.675C11.9531 5.53966 12.125 5.82716 12.125 6.1256C12.125 6.38341 12.0125 6.62716 11.8188 6.79747Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const ThumbUpIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ThumbUpIcon/ThumbUpIcon',
+}))``;

package/src/icons/ThumbUpIcon/index.ts

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

package/src/icons/index.ts

@@ -0,0 +1,26 @@
+export * from '@theme/icons/ShelfIcon';
+export * from '@theme/icons/AlertIcon';
+export * from '@theme/icons/ArrowIcon';
+export * from '@theme/icons/ColorModeIcon';
+export * from '@theme/icons/AnchorIcon';
+export * from '@theme/icons/ExternalIcon';
+export * from '@theme/icons/SpinnerIcon';
+export * from '@theme/icons/CollapseIcon';
+export * from '@theme/icons/CopyIcon';
+export * from '@theme/icons/DeselectIcon';
+export * from '@theme/icons/ExpandIcon';
+export * from '@theme/icons/FileIcon';
+export * from '@theme/icons/ReportIcon';
+export * from '@theme/icons/SelectIcon';
+export * from '@theme/icons/BurgerIcon';
+export * from '@theme/icons/CloseIcon';
+export * from '@theme/icons/LogoutIcon';
+export * from '@theme/icons/LanguageIcon';
+export * from '@theme/icons/PointingArrowIcon';
+export * from '@theme/icons/CheckboxIcon';
+export * from '@theme/icons/ErrorIcon';
+export * from '@theme/icons/EditIcon';
+export * from '@theme/icons/RocketIcon';
+export * from '@theme/icons/SatisfiedIcon';
+export * from '@theme/icons/DissatisfiedIcon';
+export * from '@theme/icons/NeutralIcon';

package/src/index.ts

@@ -0,0 +1,10 @@
+export * from '@theme/components';
+export * from '@theme/layouts';
+export * from '@theme/icons';
+export * from '@theme/hooks';
+export * from '@theme/utils';
+export * from '@theme/globalStyle';
+export * from '@theme/types/config';
+export * from '@theme/config';
+export * from '@theme/ui';
+export * from '@theme/i18n';

package/src/layouts/Forbidden.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Button } from '@theme/components/Button';
+import { useTranslate } from '@portal/hooks';
+
+export function Forbidden(): JSX.Element {
+  const { translate } = useTranslate();
+
+  return (
+    <Wrapper data-component-name="Pages/Forbidden">
+      <Header>403</Header>
+      <Description data-translation-key="theme.page.forbidden.title">
+        {translate('theme.page.forbidden.title', 'Access forbidden')}
+      </Description>
+      <HomeButton color="primary" size="large" to="/" data-translation-key="theme.page.homeButton">
+        {translate('theme.page.homeButton', 'Open Homepage')}
+      </HomeButton>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 25px auto;
+  font-family: var(--page-403-font-family);
+  text-align: center;
+`;
+
+const Header = styled.div`
+  color: var(--page-403-header-text-color);
+  margin: var(--page-403-header-margin);
+  font-size: var(--page-403-header-font-size);
+  line-height: var(--page-403-header-line-height);
+  font-weight: var(--page-403-header-font-weight);
+`;
+
+const Description = styled.div`
+  color: var(--page-403-description-text-color);
+  margin: var(--page-403-description-margin);
+  font-size: var(--page-403-description-font-size);
+  line-height: var(--page-403-description-line-height);
+  font-weight: var(--page-403-description-font-weight);
+`;
+
+const HomeButton = styled(Button)`
+  margin-top: var(--page-403-button-margin);
+`;