@lunit/oui 1.0.1-alpha.9 → 1.0.1

package/.git-ftp-include

@@ -0,0 +1 @@
+!./dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "1.0.1-alpha.9",
+  "version": "1.0.1",
   "validate-branch-name": {
     "pattern": "^(main|develop)|(feature|fix|release|hotfix|qe)/.+$",
     "errorMsg": "The branch name is not correct. Please check the pattern. (ex. feature/add-something)"
@@ -195,16 +195,20 @@
     "webpack-cli": "^5.1.4",
     "webpack-node-externals": "^3.0.0"
   },
-  "files": ["dist"],
   "description": "Lunit Oncology UI components",
-  "main": "dist/index.js",
+  "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "sideEffects": false,
   "exports": {
-    "./icons": {
-      "import": "./dist/icons/index.js",
-      "default": "./dist/icons/index.js",
-      "types": "./dist/types/icons/index.d.ts"
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/cjs/index.js"
+    },
+    "./*": {
+      "import": "./dist/components/*/index.js",
+      "require": "./dist/cjs/components/*/index.js",
+      "default": "./dist/cjs/components/*/index.js"
     }
   },
   "types": "dist/types/index.d.ts",

package/src/assets/ic-bell-noti-outlined-20px.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcBellNotioutlined20Px = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M10 1.5c.557 0 1.072.049 1.547.142a5.021 5.021 0 0 0-1.128.869A8.062 8.062 0 0 0 10 2.5c-1.258 0-2.214.278-2.944.717-.731.439-1.265 1.056-1.653 1.778-.785 1.461-.955 3.326-.914 4.872.044 1.62-.343 3.313-1.36 4.633h13.742c-.831-1.078-1.241-2.406-1.34-3.739.344-.11.672-.257.98-.436.039 1.495.502 2.935 1.493 3.96a.717.717 0 0 1-.515 1.215H12.5a2.5 2.5 0 0 1-5 0H2.511a.717.717 0 0 1-.515-1.215c1.086-1.123 1.538-2.745 1.494-4.39-.044-1.606.124-3.682 1.032-5.373.458-.854 1.11-1.616 2.019-2.162.91-.547 2.05-.86 3.459-.86Zm-1.5 14a1.5 1.5 0 0 0 3 0h-3Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="#E63B28"
+      d="M18 6a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
+    />
+  </svg>
+);
+export default SvgIcBellNotioutlined20Px;

package/src/assets/ic-close-large-outlined-20px.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcCloseLargeoutlined20Px = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M4.854 15.854a.5.5 0 0 1-.708-.708L9.293 10 4.146 4.854a.5.5 0 1 1 .708-.708L10 9.293l5.146-5.147a.5.5 0 0 1 .708.708L10.707 10l5.147 5.146a.5.5 0 0 1-.708.708L10 10.707l-5.146 5.147Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgIcCloseLargeoutlined20Px;

package/src/assets/ic-close-small-outlined-20px.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcCloseSmalloutlined20Px = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M10 9.293 5.854 5.146a.5.5 0 1 0-.708.708L9.293 10l-4.147 4.146a.5.5 0 1 0 .708.708L10 10.707l4.146 4.147a.5.5 0 0 0 .708-.708L10.707 10l4.147-4.146a.5.5 0 0 0-.708-.708L10 9.293Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgIcCloseSmalloutlined20Px;

package/src/assets/ic-download-pdf-outlined-20px.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcDownloadPdfoutlined20Px = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M3.051 2.343V8h1.014V6.086h1.088c1.307 0 2.009-.785 2.009-1.87 0-1.08-.694-1.873-1.995-1.873H3.051Zm1.014 2.906V3.193h.947c.768 0 1.11.42 1.11 1.022 0 .603-.342 1.034-1.104 1.034h-.953ZM9.939 2.343h-1.95V8h1.914c1.724 0 2.74-1.066 2.74-2.834 0-1.763-1.016-2.823-2.704-2.823Zm-.937 4.776V3.224h.882c1.152 0 1.751.643 1.751 1.942 0 1.3-.6 1.953-1.782 1.953h-.85Z"
+      clipRule="evenodd"
+    />
+    <path d="M14.565 5.594V8H13.55V2.343h3.619v.856h-2.605V4.74h2.356v.854h-2.356ZM13.124 13.67l-2.624 3V11a.5.5 0 1 0-1 0v5.67l-2.624-3a.5.5 0 1 0-.752.66l3.5 4a.5.5 0 0 0 .752 0l3.5-4a.5.5 0 0 0-.752-.66Z" />
+  </svg>
+);
+export default SvgIcDownloadPdfoutlined20Px;

package/src/assets/ic-ellipse-outlined-20px.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcEllipseoutlined20Px = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0 1a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgIcEllipseoutlined20Px;

package/src/assets/ic-filter-noti-outlined-20px.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcFilterNotioutlined20Px = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M10.1 5H6.937a2 2 0 0 0-3.874 0H2a.5.5 0 0 0 0 1h1.063a2 2 0 0 0 3.874 0H10c0-.342.034-.677.1-1Zm2.55 4.238a2 2 0 0 1 3.787.262h.501a3.973 3.973 0 0 1-1.438.47 1 1 0 0 0-1.962-.245 3.993 3.993 0 0 1-.888-.487Zm-1.22.262H2a.5.5 0 0 0 0 1h10.563a2 2 0 0 0 3.76.323 5.005 5.005 0 0 1-1.669.165 1.002 1.002 0 0 1-.544-.067A4.989 4.989 0 0 1 11.43 9.5Zm5.752 1H18a.5.5 0 0 0 .384-.82 5.01 5.01 0 0 1-1.202.82ZM11 6c0-.345.044-.68.126-1H18a.5.5 0 0 1 0 1h-7Zm-7-.5a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm6.437 9.5a2 2 0 0 1-3.874 0H2a.5.5 0 0 1 0-1h4.563a2 2 0 0 1 3.874 0H18a.5.5 0 0 1 0 1h-7.563ZM7.5 14.5a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="#E63B28"
+      d="M19 6a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
+    />
+  </svg>
+);
+export default SvgIcFilterNotioutlined20Px;

package/src/assets/ic-hide-large-outlined-20px.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcHideLargeoutlined20Px = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    {...props}
+  >
+    <path d="M3.975 6.344a.5.5 0 0 0-.95.31L3.5 6.5l-.475.155v.003l.002.005.006.016.019.052c.016.043.04.103.071.178.065.149.163.356.303.599.222.385.55.864 1.017 1.342l-1.296 1.297a.5.5 0 1 0 .707.707l1.34-1.34c.458.348 1.003.669 1.646.923l-.8 1.866a.5.5 0 1 0 .92.394l.837-1.954a8.805 8.805 0 0 0 1.703.245V13.5a.5.5 0 1 0 1 0v-2.512a8.804 8.804 0 0 0 1.703-.245l.838 1.954a.5.5 0 1 0 .919-.394l-.8-1.866a6.913 6.913 0 0 0 1.646-.923l1.39 1.39a.42.42 0 0 0 .632-.026.5.5 0 0 0 .026-.731L15.557 8.85a6.77 6.77 0 0 0 1.018-1.342 5.823 5.823 0 0 0 .374-.777l.018-.052.006-.016.002-.005v-.003L16.5 6.5l.476.155a.5.5 0 0 0-.951-.31l-.002.005a4.82 4.82 0 0 1-.315.659c-.236.41-.619.95-1.197 1.456a5.943 5.943 0 0 1-2.17 1.201 7.826 7.826 0 0 1-2.34.334 7.825 7.825 0 0 1-2.342-.334 5.943 5.943 0 0 1-2.17-1.201 5.783 5.783 0 0 1-1.197-1.456 4.814 4.814 0 0 1-.304-.628 1.486 1.486 0 0 1-.01-.031l-.003-.006Z" />
+  </svg>
+);
+export default SvgIcHideLargeoutlined20Px;

package/src/assets/ic-hide-small-outlined-20px.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcHideSmalloutlined20Px = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M14.926 7.644a.494.494 0 1 0-.948-.288v.002a3.655 3.655 0 0 1-.208.477c-.159.3-.412.692-.795 1.06-.354.34-.82.659-1.428.867a4.752 4.752 0 0 1-1.547.24 4.752 4.752 0 0 1-1.547-.24 3.831 3.831 0 0 1-1.428-.867 4.161 4.161 0 0 1-.96-1.42 2.268 2.268 0 0 1-.036-.096l-.007-.021v-.003a.494.494 0 0 0-.616-.334.506.506 0 0 0-.331.625v.001l.002.005.003.012a2.073 2.073 0 0 0 .065.18 5.216 5.216 0 0 0 .577 1.054l-1.057.993a.548.548 0 0 0-.048.73c.172.216.474.24.673.052l1.087-1.021c.273.257.597.503.98.714l-.663 1.257a.542.542 0 0 0 .177.706c.23.142.52.055.652-.193l.731-1.387c.378.119.794.201 1.251.236V12.5c0 .277.222.501.495.501a.498.498 0 0 0 .495-.5v-1.515a5.579 5.579 0 0 0 1.212-.224l.725 1.375c.13.248.422.335.651.193a.541.541 0 0 0 .178-.706l-.653-1.238a4.811 4.811 0 0 0 1.015-.733l1.087 1.02c.2.188.5.165.673-.051a.548.548 0 0 0-.048-.73l-1.057-.993a5.198 5.198 0 0 0 .577-1.054 3.23 3.23 0 0 0 .064-.18l.005-.012v-.005l.001-.001v-.002Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgIcHideSmalloutlined20Px;

package/src/assets/ic-information-large-outlined-20px.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcInformationLargeoutlined20Px = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-9 8a9 9 0 1 1 18 0 9 9 0 0 1-18 0Zm8.25 4.247c0 .38.283.694.65.743a.503.503 0 0 0 .2 0 .75.75 0 0 0 .65-.743v-5.5a.75.75 0 0 0-1.5 0v5.5ZM10 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgIcInformationLargeoutlined20Px;

package/src/assets/ic-information-small-outlined-20px.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcInformationSmalloutlined20Px = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M4 10a6 6 0 1 1 12 0 6 6 0 0 1-12 0Zm6-7a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm.09 6.008a.501.501 0 0 0-.18 0 .75.75 0 0 0-.66.745v3.5a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.66-.745ZM10 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgIcInformationSmalloutlined20Px;

package/src/assets/ic-manufacturer-outlined-20px.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcManufactureroutlined20Px = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={24}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#000"
+      fillRule="evenodd"
+      d="M19.48.004v23H0v-8.543l2.977-6.178 2.253 4.682 2.254-4.682 2.256 4.682 2.254-4.682 2.256 4.682V.005h5.23Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgIcManufactureroutlined20Px;

package/src/assets/ic-rectangle-outlined-20px.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcRectangleoutlined20Px = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M1 2a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2Zm1 0v16h16V2H2Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgIcRectangleoutlined20Px;

package/src/assets/ic-refresh-left-outlined-20px.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcRefreshLeftoutlined20Px = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M3.673 7a7 7 0 1 1-.275 5.333.5.5 0 0 0-.943.334A8 8 0 1 0 3 6.125V3.5a.5.5 0 0 0-1 0v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 0-1H3.673Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgIcRefreshLeftoutlined20Px;

package/src/assets/ic-refresh-right-outlined-20px.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcRefreshRightoutlined20Px = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    {...props}
+  >
+    <path d="M14.436 3.343a8 8 0 1 0 3.294 8.718.5.5 0 0 0-.966-.258 7 7 0 1 1-.273-4.424h-2.957a.5.5 0 0 0 0 1h4.243a.5.5 0 0 0 .5-.5V3.636a.5.5 0 0 0-1 0v3.04a8 8 0 0 0-2.84-3.333Z" />
+  </svg>
+);
+export default SvgIcRefreshRightoutlined20Px;

package/src/assets/ic-show-large-outlined-20px.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcShowLargeoutlined20Px = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M3.025 10.228C3.445 9.238 5.178 6 9.977 6c4.789 0 6.559 3.222 6.997 4.224a.23.23 0 0 1-.004.204C16.523 11.285 14.748 14 9.977 14c-4.782 0-6.519-2.728-6.948-3.575a.227.227 0 0 1-.004-.197ZM9.977 5C4.59 5 2.59 8.685 2.1 9.839c-.14.33-.135.706.032 1.036C2.672 11.942 4.7 15 9.977 15c5.262 0 7.325-3.039 7.885-4.112.175-.337.18-.724.033-1.063C17.386 8.662 15.349 5 9.977 5Zm-2.009 5c0-1.105.9-2 2.01-2 1.109 0 2.008.895 2.008 2s-.899 2-2.009 2c-1.11 0-2.009-.895-2.009-2Zm2.01-3a3.007 3.007 0 0 0-3.014 3c0 1.657 1.349 3 3.013 3a3.007 3.007 0 0 0 3.014-3c0-1.657-1.35-3-3.014-3Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgIcShowLargeoutlined20Px;

package/src/assets/ic-show-small-outlined-20px.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcShowSmalloutlined20Px = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M10 7c3.305 0 4.591 2.345 4.975 3.276C14.593 11.042 13.312 13 10 13c-3.312 0-4.593-1.958-4.975-2.724C5.41 9.346 6.695 7 10 7Zm5.95 3.02a.722.722 0 0 1-.016.567C15.538 11.447 14.024 14 10 14c-4.023 0-5.538-2.552-5.934-3.413a.722.722 0 0 1-.016-.566C4.422 9.058 5.923 6 10 6s5.578 3.058 5.95 4.02ZM11 10a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm1 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgIcShowSmalloutlined20Px;

package/src/assets/ic_bell_noti=outlined_20px.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 20 20" fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.99999 1.5C10.5571 1.5 11.0721 1.54893 11.5474 1.64184C11.1304 1.87701 10.7506 2.17028 10.4188 2.51068C10.2831 2.50362 10.1435 2.5 9.99999 2.5C8.7422 2.5 7.78644 2.77802 7.05583 3.21684C6.32505 3.65576 5.79079 4.27282 5.4029 4.99518C4.61826 6.45635 4.44756 8.3213 4.48929 9.86741C4.53301 11.4875 4.1461 13.1803 3.1294 14.5H16.8706C16.0399 13.4217 15.6296 12.0944 15.5312 10.7612C15.8753 10.6506 16.2031 10.5038 16.5102 10.3252C16.5499 11.8196 17.0132 13.2603 18.004 14.2849C18.4439 14.7398 18.1215 15.5 17.4887 15.5L12.5 15.5C12.5 16.8807 11.3807 18 10 18C8.61929 18 7.5 16.8807 7.5 15.5L2.5113 15.5C1.87845 15.5 1.55608 14.7398 1.99601 14.2849C3.08178 13.1621 3.53405 11.5397 3.48965 9.89439C3.44633 8.28898 3.61362 6.21348 4.52188 4.52208C4.98044 3.66815 5.63135 2.9059 6.54094 2.35958C7.45071 1.81315 8.59053 1.5 9.99999 1.5ZM8.5 15.5C8.5 16.3284 9.17157 17 10 17C10.8284 17 11.5 16.3284 11.5 15.5H8.5Z" fill="currentColor"/>
+  <path d="M18 6C18 8.20914 16.2091 10 14 10C11.7909 10 10 8.20914 10 6C10 3.79086 11.7909 2 14 2C16.2091 2 18 3.79086 18 6Z" fill="#E63B28"/>
+</svg>

package/src/assets/ic_close_large=outlined_20px.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg">
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M4.85355 15.8536C4.65829 16.0488 4.34171 16.0488 4.14645 15.8536C3.95118 15.6583 3.95118 15.3417 4.14645 15.1464L9.29289 10L4.14645 4.85355C3.95118 4.65829 3.95118 4.34171 4.14645 4.14645C4.34171 3.95118 4.65829 3.95118 4.85355 4.14645L10 9.29289L15.1464 4.14645C15.3417 3.95118 15.6583 3.95118 15.8536 4.14645C16.0488 4.34171 16.0488 4.65829 15.8536 4.85355L10.7071 10L15.8536 15.1464C16.0488 15.3417 16.0488 15.6583 15.8536 15.8536C15.6583 16.0488 15.3417 16.0488 15.1464 15.8536L10 10.7071L4.85355 15.8536Z" fill="currentColor"/>
+</svg>

package/src/assets/ic_close_small=outlined_20px.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg">
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M10 9.29291L5.85355 5.14645C5.65829 4.95118 5.34171 4.95118 5.14645 5.14645C4.95118 5.34171 4.95118 5.65829 5.14645 5.85355L9.29291 10L5.14645 14.1465C4.95118 14.3417 4.95118 14.6583 5.14645 14.8536C5.34171 15.0488 5.65829 15.0488 5.85355 14.8536L10 10.7071L14.1464 14.8536C14.3417 15.0488 14.6583 15.0488 14.8536 14.8536C15.0488 14.6583 15.0488 14.3417 14.8536 14.1464L10.7071 10L14.8536 5.85358C15.0488 5.65832 15.0488 5.34174 14.8536 5.14648C14.6583 4.95121 14.3417 4.95122 14.1464 5.14648L10 9.29291Z" fill="currentColor"/>
+</svg>

package/src/assets/ic_download_pdf=outlined_20px.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 20 20" fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg">
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M3.05106 2.34253V7.99999H4.06488V6.08562H5.15327C6.4599 6.08562 7.16156 5.30109 7.16156 4.21546C7.16156 3.13535 6.46819 2.34253 5.16709 2.34253H3.05106ZM4.06488 5.24861V3.19336H5.01239C5.78035 3.19336 6.12289 3.61325 6.12289 4.21546C6.12289 4.81767 5.78035 5.24861 5.01791 5.24861H4.06488Z" fill="currentColor"/>
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M9.93884 2.34253H7.98856V7.99999H9.90293C11.6267 7.99999 12.6433 6.93369 12.6433 5.16573C12.6433 3.4033 11.6267 2.34253 9.93884 2.34253ZM9.00238 7.11877V3.22374H9.88359C11.0355 3.22374 11.635 3.86739 11.635 5.16573C11.635 6.46684 11.0355 7.11877 9.8532 7.11877H9.00238Z" fill="currentColor"/>
+	<path d="M14.5649 5.59391V7.99999H13.5511V2.34253H17.1698V3.19888H14.5649V4.74032H16.9212V5.59391H14.5649Z" fill="currentColor"/>
+	<path d="M13.1237 13.6708L10.5 16.6693L10.5 11C10.5 10.7239 10.2762 10.5 10 10.5C9.72387 10.5 9.50002 10.7239 9.50002 11L9.50002 16.6693L6.8763 13.6708C6.69446 13.4629 6.37857 13.4419 6.17076 13.6237C5.96294 13.8056 5.94188 14.1214 6.12372 14.3293L9.62372 18.3293C9.71866 18.4378 9.85583 18.5 10 18.5C10.1442 18.5 10.2814 18.4378 10.3763 18.3293L13.8763 14.3293C14.0581 14.1214 14.0371 13.8056 13.8293 13.6237C13.6214 13.4419 13.3056 13.4629 13.1237 13.6708Z" fill="currentColor"/>
+</svg>

package/src/assets/ic_ellipse=outlined_20px.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg">
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z" fill="currentColor"/>
+</svg>

package/src/assets/ic_filter_noti=outlined_20px.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 20 20" fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg">
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1 5H6.93699C6.71497 4.13739 5.93192 3.5 5 3.5C4.06808 3.5 3.28503 4.13739 3.06301 5H2C1.72386 5 1.5 5.22386 1.5 5.5C1.5 5.77614 1.72386 6 2 6H3.06301C3.28503 6.86261 4.06808 7.5 5 7.5C5.93192 7.5 6.71497 6.86261 6.93699 6H10C10 5.65753 10.0344 5.32311 10.1 5ZM12.6505 9.23758C12.9502 8.51121 13.6654 8 14.5 8C15.4319 8 16.215 8.63739 16.437 9.5H16.938C16.502 9.74193 16.0161 9.90476 15.4995 9.96911C15.4832 9.43112 15.0419 9 14.5 9C14.0433 9 13.658 9.30622 13.5384 9.72456C13.2206 9.59973 12.9226 9.43539 12.6505 9.23758ZM11.4293 9.5H2C1.72386 9.5 1.5 9.72386 1.5 10C1.5 10.2761 1.72386 10.5 2 10.5H12.563C12.785 11.3626 13.5681 12 14.5 12C15.3112 12 16.0096 11.5171 16.3234 10.823C15.9019 10.9384 15.4581 11 15 11C14.8837 11 14.7683 10.996 14.654 10.9882C14.6038 10.996 14.5524 11 14.5 11C14.3615 11 14.2296 10.9719 14.1097 10.921C13.0687 10.7339 12.1396 10.2246 11.4293 9.5ZM17.1821 10.5H18C18.2761 10.5 18.5 10.2761 18.5 10C18.5 9.87846 18.4566 9.76705 18.3845 9.68039C18.0277 10.0087 17.623 10.2858 17.1821 10.5ZM11 6C11 5.6547 11.0438 5.31962 11.126 5H18C18.2761 5 18.5 5.22386 18.5 5.5C18.5 5.77614 18.2761 6 18 6H11ZM4 5.5C4 4.94772 4.44772 4.5 5 4.5C5.55228 4.5 6 4.94772 6 5.5C6 6.05228 5.55228 6.5 5 6.5C4.44772 6.5 4 6.05228 4 5.5ZM10.437 15C10.215 15.8626 9.43192 16.5 8.5 16.5C7.56808 16.5 6.78503 15.8626 6.56301 15H2C1.72386 15 1.5 14.7761 1.5 14.5C1.5 14.2239 1.72386 14 2 14H6.56301C6.78503 13.1374 7.56808 12.5 8.5 12.5C9.43192 12.5 10.215 13.1374 10.437 14H18C18.2761 14 18.5 14.2239 18.5 14.5C18.5 14.7761 18.2761 15 18 15H10.437ZM7.5 14.5C7.5 13.9477 7.94772 13.5 8.5 13.5C9.05228 13.5 9.5 13.9477 9.5 14.5C9.5 15.0523 9.05228 15.5 8.5 15.5C7.94772 15.5 7.5 15.0523 7.5 14.5Z" fill="currentColor"/>
+	<path d="M19 6C19 8.20914 17.2091 10 15 10C12.7909 10 11 8.20914 11 6C11 3.79086 12.7909 2 15 2C17.2091 2 19 3.79086 19 6Z" fill="#E63B28"/>
+</svg>

package/src/assets/ic_hide_large=outlined_20px.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg">
+	<path d="M3.97517 6.34411C3.88924 6.08243 3.60772 5.93943 3.34559 6.02462C3.08297 6.10997 2.93927 6.39206 3.02462 6.65468L3.50014 6.50014C3.02462 6.65468 3.02457 6.65452 3.02462 6.65468L3.02509 6.65613L3.02572 6.65803L3.02744 6.6632L3.03281 6.67886C3.03726 6.69163 3.04347 6.70899 3.05155 6.73061C3.0677 6.77384 3.09137 6.83417 3.12348 6.90881C3.18764 7.05798 3.28582 7.26506 3.42553 7.50764C3.64755 7.89315 3.9764 8.3717 4.44304 8.85012L3.14657 10.1466C2.95131 10.3418 2.95131 10.6584 3.14657 10.8537C3.34183 11.049 3.65841 11.049 3.85368 10.8537L5.19378 9.51359C5.65189 9.86153 6.19663 10.183 6.84016 10.4374L6.04055 12.3032C5.93177 12.557 6.04935 12.8509 6.30317 12.9597C6.55698 13.0685 6.85092 12.9509 6.9597 12.6971L7.7971 10.7431C8.31452 10.872 8.881 10.9579 9.50028 10.9881L9.50014 11.0001V13.5001C9.50014 13.7763 9.724 14.0001 10.0001 14.0001C10.2763 14.0001 10.5001 13.7763 10.5001 13.5001V11.0001L10.5 10.9881C11.1193 10.9579 11.6857 10.872 12.2031 10.7431L13.0406 12.6971C13.1493 12.9509 13.4433 13.0685 13.6971 12.9597C13.9509 12.8509 14.0685 12.557 13.9597 12.3032L13.1601 10.4374C13.8036 10.183 14.3484 9.86154 14.8065 9.5136L16.1968 10.9039C16.3817 11.0888 16.6574 11.0748 16.8276 10.878C16.8365 10.8703 16.8452 10.8622 16.8537 10.8537C17.0489 10.6584 17.0489 10.3418 16.8537 10.1466L15.5572 8.85012C16.0239 8.3717 16.3527 7.89316 16.5747 7.50765C16.7144 7.26506 16.8126 7.05798 16.8768 6.90881C16.9089 6.83417 16.9326 6.77385 16.9487 6.73062C16.9568 6.70899 16.963 6.69163 16.9675 6.67886L16.9728 6.6632L16.9746 6.65803L16.9752 6.65613L16.9756 6.655C16.9756 6.65484 16.9757 6.65468 16.5001 6.50014L16.9756 6.655C17.0609 6.39238 16.9173 6.10997 16.6547 6.02462C16.3922 5.9393 16.1102 6.08286 16.0247 6.3453L16.0231 6.34982C16.0211 6.35577 16.0174 6.36614 16.012 6.3806C16.0012 6.40954 15.9835 6.45477 15.9582 6.51366C15.9075 6.63155 15.8263 6.80345 15.7082 7.00858C15.4715 7.41953 15.0895 7.95844 14.5114 8.46454C13.9752 8.93398 13.2672 9.3779 12.3415 9.66646C11.6832 9.87164 10.9089 10.0001 10.0001 10.0001C9.09133 10.0001 8.31702 9.87163 7.65877 9.66645C6.73304 9.3779 6.0251 8.93397 5.48886 8.46454C4.91072 7.95843 4.52876 7.41953 4.2921 7.00858C4.17396 6.80345 4.0928 6.63155 4.04209 6.51366C4.01676 6.45477 3.9991 6.40954 3.98829 6.3806C3.98289 6.36614 3.9792 6.35577 3.97713 6.34982L3.97517 6.34411Z" fill="currentColor"/>
+</svg>

package/src/assets/ic_hide_small=outlined_20px.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg">
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9257 7.6444C15.0042 7.37966 14.8557 7.10066 14.5941 7.02124C14.3325 6.94184 14.0567 7.09222 13.9781 7.35678L13.9777 7.35802C13.9647 7.3972 13.9507 7.43595 13.9356 7.47437C13.9021 7.55967 13.8482 7.68491 13.7695 7.83468C13.6115 8.13528 13.3576 8.52748 12.975 8.89453C12.6208 9.23442 12.1551 9.55402 11.5473 9.76169C11.1149 9.90939 10.6038 10.0029 10 10.0029C9.39624 10.0029 8.88505 9.90939 8.45273 9.76169C7.84486 9.55402 7.37924 9.23442 7.025 8.89453C6.64245 8.52748 6.38847 8.13528 6.23052 7.83468C6.15183 7.68491 6.09791 7.55967 6.06443 7.47437C6.04772 7.43178 6.03618 7.39936 6.02926 7.37906L6.02229 7.35802L6.02133 7.35494C5.94209 7.09135 5.667 6.942 5.40594 7.02124C5.14715 7.09978 4.99671 7.38423 5.07468 7.64572L5.07518 7.64739L5.07651 7.65175L5.08049 7.66449C5.08375 7.67474 5.08823 7.68847 5.09401 7.70541C5.10555 7.73928 5.12232 7.78609 5.14495 7.84375C5.19015 7.95893 5.25906 8.11818 5.35697 8.30451C5.44994 8.48145 5.56991 8.68441 5.72166 8.89798L4.66472 9.89091C4.46551 10.0781 4.44397 10.4048 4.61662 10.6208C4.78927 10.8367 5.09072 10.8601 5.28993 10.6729L6.37686 9.65181C6.64957 9.90872 6.97379 10.1553 7.35631 10.3659L6.69372 11.6228C6.56293 11.8709 6.64245 12.187 6.87133 12.3288C7.10021 12.4706 7.39178 12.3844 7.52257 12.1363L8.25405 10.7487C8.63225 10.8677 9.04843 10.9504 9.50534 10.9852V12.4995C9.50534 12.7759 9.7268 13 9.99999 13C10.2732 13 10.4947 12.7759 10.4947 12.4995V10.9852C10.9358 10.9516 11.339 10.8733 11.7067 10.7608L12.4318 12.1363C12.5625 12.3844 12.8541 12.4706 13.083 12.3288C13.3119 12.1871 13.3914 11.871 13.2606 11.6229L12.6082 10.3853C13.0062 10.1705 13.342 9.91663 13.6232 9.65181L14.7101 10.6729C14.9093 10.8601 15.2107 10.8367 15.3834 10.6208C15.556 10.4048 15.5345 10.0781 15.3353 9.89091L14.2783 8.89797C14.4301 8.68441 14.5501 8.48145 14.643 8.30451C14.7409 8.11819 14.8099 7.95893 14.8551 7.84375C14.8777 7.78609 14.8945 7.73928 14.906 7.70541C14.9118 7.68847 14.9163 7.67474 14.9195 7.66449L14.9235 7.65175L14.9248 7.64739L14.9253 7.64572L14.9257 7.6444Z" fill="currentColor"/>
+</svg>

package/src/assets/ic_information_large=outlined_20px.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg">
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2ZM1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10ZM9.25 14.2466C9.25 14.6268 9.53288 14.9409 9.89965 14.9899C9.93207 14.9965 9.96563 15 10 15C10.0344 15 10.0679 14.9965 10.1004 14.9899C10.4671 14.9409 10.75 14.6268 10.75 14.2466V8.74658C10.75 8.33237 10.4142 7.99658 10 7.99658C9.58579 7.99658 9.25 8.33237 9.25 8.74658V14.2466ZM10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44771 7 10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5Z" fill="currentColor"/>
+</svg>

package/src/assets/ic_information_small=outlined_20px.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg">
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M4 10C4 6.68629 6.68629 4 10 4C13.3137 4 16 6.68629 16 10C16 13.3137 13.3137 16 10 16C6.68629 16 4 13.3137 4 10ZM10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3ZM10.0892 9.00794C10.0603 9.00272 10.0305 9 10 9C9.96955 9 9.93973 9.00272 9.91078 9.00794C9.53862 9.05205 9.25 9.36866 9.25 9.75269V13.2527C9.25 13.6669 9.58579 14.0027 10 14.0027C10.4142 14.0027 10.75 13.6669 10.75 13.2527V9.75269C10.75 9.36866 10.4614 9.05205 10.0892 9.00794ZM10 8C9.44772 8 9 7.55228 9 7C9 6.44772 9.44772 6 10 6C10.5523 6 11 6.44772 11 7C11 7.55228 10.5523 8 10 8Z" fill="currentColor"/>
+</svg>

package/src/assets/ic_manufacturer=outlined_20px.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M19.4805 0.00415039V23.0042H0V14.4609L2.9769 8.28318L5.23029 12.9653L7.48368 8.28318L9.74026 12.9653L11.9937 8.28318L14.2502 12.9653V0.00415039H19.4805Z" fill="#000"></path>
+</svg>

package/src/assets/ic_rectangle=outlined_20px.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg">
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M1 2C1 1.44772 1.44771 1 2 1H18C18.5523 1 19 1.44771 19 2V18C19 18.5523 18.5523 19 18 19H2C1.44772 19 1 18.5523 1 18V2ZM2 2V18H18V2L2 2Z" fill="currentColor"/>
+</svg>

package/src/assets/ic_refresh_left=outlined_20px.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg">
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M3.67349 7C4.79743 4.63419 7.20839 3 9.99999 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 9.99999 17C6.95293 17 4.35937 15.0528 3.39818 12.3334C3.30615 12.073 3.02049 11.9366 2.76013 12.0286C2.49978 12.1206 2.36331 12.4063 2.45534 12.6666C3.55333 15.7731 6.51596 18 9.99999 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 9.99999 2C6.98718 2 4.36428 3.66538 3 6.12421L3 3.5C3 3.22386 2.77614 3 2.5 3C2.22386 3 2 3.22386 2 3.5V7.5C2 7.77614 2.22386 8 2.5 8L6.5 8C6.77614 8 7 7.77614 7 7.5C7 7.22386 6.77614 7 6.5 7H3.67349Z" fill="currentColor"/>
+</svg>

package/src/assets/ic_refresh_right=outlined_20px.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg">
+	<path d="M14.4362 3.3427C12.8211 2.26644 10.8698 1.81403 8.94585 2.06977C7.02191 2.32552 5.25655 3.27197 3.97868 4.73279C2.70081 6.19361 1.99758 8.06917 2.00001 10.01C2.00244 11.9509 2.71036 13.8247 3.99189 15.2823C5.27342 16.7399 7.04114 17.682 8.96572 17.9329C10.8903 18.1838 12.8405 17.7265 14.4529 16.6462C16.0653 15.5659 17.23 13.9362 17.73 12.0609C17.8011 11.7941 17.6425 11.5201 17.3757 11.449C17.1088 11.3778 16.8349 11.5365 16.7637 11.8033C16.3262 13.4442 15.3071 14.8702 13.8963 15.8154C12.4854 16.7607 10.779 17.1608 9.095 16.9413C7.411 16.7217 5.86424 15.8974 4.7429 14.622C3.62157 13.3466 3.00213 11.707 3.00001 10.0088C2.99788 8.31053 3.61321 6.66941 4.73134 5.39119C5.84948 4.11297 7.39417 3.28483 9.07762 3.06106C10.7611 2.83728 12.4685 3.23313 13.8817 4.17487C15.055 4.95671 15.9591 6.07056 16.485 7.36464C16.4869 7.36936 16.4889 7.37404 16.4909 7.37867H13.5341C13.258 7.37867 13.0341 7.60253 13.0341 7.87867C13.0341 8.15482 13.258 8.37867 13.5341 8.37867L17.7767 8.37867C18.0529 8.37867 18.2768 8.15482 18.2767 7.87867L18.2768 3.63603C18.2768 3.35989 18.0529 3.13603 17.7767 3.13603C17.5006 3.13603 17.2767 3.35989 17.2767 3.63603V6.676C16.662 5.33018 15.6818 4.17274 14.4362 3.3427Z" fill="currentColor"/>
+</svg>

package/src/assets/ic_show_large=outlined_20px.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.02506 10.2283C3.4458 9.23806 5.17764 6 9.97734 6C14.7656 6 16.5358 9.22232 16.9735 10.2239C17.0052 10.2963 17.0013 10.3671 16.9697 10.4277C16.523 11.2853 14.7482 14 9.97734 14C5.19465 14 3.45804 11.2719 3.02876 10.4245C2.99909 10.366 2.99543 10.298 3.02506 10.2283ZM9.97734 5C4.58863 5 2.59009 8.68489 2.09982 9.83875C1.95925 10.1696 1.96469 10.5451 2.13177 10.8748C2.67253 11.9422 4.69952 15 9.97734 15C15.2386 15 17.3025 11.9613 17.8616 10.888C18.0373 10.5506 18.0428 10.1637 17.8947 9.82494C17.3863 8.66178 15.3489 5 9.97734 5ZM7.96814 10C7.96814 8.89543 8.86769 8 9.97734 8C11.087 8 11.9865 8.89543 11.9865 10C11.9865 11.1046 11.087 12 9.97734 12C8.86769 12 7.96814 11.1046 7.96814 10ZM9.97734 7C8.31286 7 6.96354 8.34315 6.96354 10C6.96354 11.6569 8.31286 13 9.97734 13C11.6418 13 12.9911 11.6569 12.9911 10C12.9911 8.34315 11.6418 7 9.97734 7Z" fill="currentColor"/>
+</svg>

package/src/assets/ic_show_small=outlined_20px.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10 7C13.3054 7 14.5914 9.34545 14.9748 10.2758C14.5929 11.0424 13.3121 13 10 13C6.68788 13 5.40711 11.0424 5.02517 10.2758C5.40864 9.34545 6.69463 7 10 7ZM15.9495 10.0208C16.0209 10.2057 16.0172 10.407 15.9343 10.5871C15.538 11.4476 14.0235 14 10 14C5.97651 14 4.46197 11.4476 4.0657 10.5871C3.98276 10.407 3.9791 10.2057 4.05047 10.0208C4.42213 9.05757 5.923 6 10 6C14.077 6 15.5779 9.05757 15.9495 10.0208ZM10.9998 10C10.9998 10.5523 10.5522 11 9.99997 11C9.44778 11 9.00014 10.5523 9.00014 10C9.00014 9.44772 9.44778 9 9.99997 9C10.5522 9 10.9998 9.44772 10.9998 10ZM11.9997 10C11.9997 11.1046 11.1044 12 9.99997 12C8.89558 12 8.0003 11.1046 8.0003 10C8.0003 8.89543 8.89558 8 9.99997 8C11.1044 8 11.9997 8.89543 11.9997 10Z" fill="currentColor"/>
+</svg>

package/src/assets/index.ts

@@ -0,0 +1,16 @@
+export { default as IcBellNotiOutlined20Px } from './ic-bell-noti-outlined-20px';
+export { default as IcCloseLargeOutlined20Px } from './ic-close-large-outlined-20px';
+export { default as IcCloseSmallOutlined20Px } from './ic-close-small-outlined-20px';
+export { default as IcDownloadPdfOutlined20Px } from './ic-download-pdf-outlined-20px';
+export { default as IcEllipseOutlined20Px } from './ic-ellipse-outlined-20px';
+export { default as IcFilterNotiOutlined20Px } from './ic-filter-noti-outlined-20px';
+export { default as IcHideLargeOutlined20Px } from './ic-hide-large-outlined-20px';
+export { default as IcHideSmallOutlined20Px } from './ic-hide-small-outlined-20px';
+export { default as IcInformationLargeOutlined20Px } from './ic-information-large-outlined-20px';
+export { default as IcInformationSmallOutlined20Px } from './ic-information-small-outlined-20px';
+export { default as IcManufacturerOutlined20Px } from './ic-manufacturer-outlined-20px';
+export { default as IcRectangleOutlined20Px } from './ic-rectangle-outlined-20px';
+export { default as IcRefreshLeftOutlined20Px } from './ic-refresh-left-outlined-20px';
+export { default as IcRefreshRightOutlined20Px } from './ic-refresh-right-outlined-20px';
+export { default as IcShowLargeOutlined20Px } from './ic-show-large-outlined-20px';
+export { default as IcShowSmallOutlined20Px } from './ic-show-small-outlined-20px';

package/src/components/Alert/Alert.styled.ts

@@ -0,0 +1,44 @@
+import { Alert as MuiAlert, alertClasses, styled, svgIconClasses } from '@mui/material';
+import type { AlertProps } from './Alert.types';
+import { getAccentColor, getBackgroundColor } from './Alert.utils';
+
+const BaseAlert = styled(MuiAlert)<AlertProps>(({ theme, severity }) => ({
+  [`&.${alertClasses.root}`]: {
+    display: 'flex',
+    padding: `${theme.spacing(2)} ${theme.spacing(4)}`,
+    maxWidth: '456px',
+    borderRadius: '8px',
+    border: `1px solid ${getAccentColor(severity)}`,
+    backgroundColor: getBackgroundColor(severity),
+    boxShadow: 'none',
+  },
+  [`& .${alertClasses.icon}`]: {
+    fontSize: '20px',
+    alignItems: 'center',
+    padding: `${theme.spacing(1)} 0`,
+    marginRight: theme.spacing(2),
+    color: `${getAccentColor(severity)} !important`,
+  },
+  [`& .${alertClasses.message}`]: {
+    padding: `${theme.spacing(1)} 0`,
+    width: '100%',
+    overflow: 'hidden',
+    display: '-webkit-box',
+    textOverflow: 'ellipsis',
+    WebkitLineClamp: '5',
+    WebkitBoxOrient: 'vertical',
+    color: theme.palette.neutralGrey[0],
+  },
+  [`& .${alertClasses.action}`]: {
+    margin: 0,
+    padding: 0,
+    paddingLeft: theme.spacing(2),
+    alignItems: 'center',
+  },
+  [`& .${svgIconClasses.root}`]: {
+    height: '20px',
+    width: '20px',
+  },
+}));
+
+export default BaseAlert;

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { forwardRef } from 'react';
+import { Close } from '../../icons';
+import BaseAlert from './Alert.styled';
+import type { AlertProps } from './Alert.types';
+import { getAccentColor, getIcons } from './Alert.utils';
+import { Button } from '../Button';
+
+const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({ title, severity, children, onClose, ...rest }: AlertProps, ref) => {
+    return (
+      <div ref={ref}>
+        <BaseAlert
+          severity={severity}
+          icon={getIcons(severity)}
+          slots={{
+            closeButton: () => (
+              <Button
+                variant="ghost"
+                icon={<Close fontSize="small" />}
+                onClick={onClose}
+                size="small"
+                sx={{
+                  color: getAccentColor(severity),
+                }}
+              />
+            ),
+          }}
+          onClose={onClose}
+          {...rest}
+        >
+          {children}
+        </BaseAlert>
+      </div>
+    );
+  },
+);
+
+export default Alert;

package/src/components/Alert/Alert.types.ts

@@ -0,0 +1,5 @@
+import type { AlertProps as MuiAlertProps } from '@mui/material';
+
+export interface AlertProps extends MuiAlertProps {
+  onClose?: () => void;
+}

package/src/components/Alert/Alert.utils.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { AlertColor } from '@mui/material';
+import { Success, Error, Information } from '../../icons';
+import theme from '../../theme';
+
+export const getIcons = (severity: AlertColor | undefined) => {
+  switch (severity) {
+    case 'info':
+      return <Information />;
+    case 'success':
+      return <Success />;
+    case 'error':
+      return <Error />;
+    default:
+      return <Error />;
+  }
+};
+
+export const getBackgroundColor = (severity: AlertColor | undefined) => {
+  switch (severity) {
+    case 'info':
+      return theme.palette.alert.InfoBG;
+    case 'success':
+      return theme.palette.alert.SuccessBG;
+    case 'error':
+      return theme.palette.alert.ErrorBG;
+    default:
+      return theme.palette.alert.WarningBG;
+  }
+};
+
+export const getAccentColor = (severity: AlertColor | undefined) => {
+  switch (severity) {
+    case 'info':
+      return theme.palette.blue[25];
+    case 'success':
+      return theme.palette.lunitTeal[40];
+    case 'error':
+      return theme.palette.red[5];
+    default:
+      return theme.palette.yellow[20];
+  }
+};

package/src/components/Alert/index.ts

@@ -0,0 +1,5 @@
+import Alert from './Alert';
+import type { AlertProps } from './Alert.types';
+
+export { Alert };
+export type { AlertProps };