@lunit/oui 1.0.0-alpha.1

package/dist/types/foundations/typography.d.ts

@@ -0,0 +1,152 @@
+/// <reference types="react" />
+import { TypographyOptions } from '@mui/material/styles/createTypography';
+declare module '@mui/material/styles' {
+    interface TypographyVariants {
+        h7: React.CSSProperties;
+        h8: React.CSSProperties;
+        h9: React.CSSProperties;
+        h10: React.CSSProperties;
+        subtitle3: React.CSSProperties;
+        body_b1: React.CSSProperties;
+        body_b2: React.CSSProperties;
+        body_sb1: React.CSSProperties;
+        body_sb2: React.CSSProperties;
+        body_sb3: React.CSSProperties;
+        body_sb4: React.CSSProperties;
+        body_sb5: React.CSSProperties;
+        body_m1: React.CSSProperties;
+        body_m2: React.CSSProperties;
+        body1: React.CSSProperties;
+        body2: React.CSSProperties;
+        body3: React.CSSProperties;
+        body4: React.CSSProperties;
+        body5: React.CSSProperties;
+        body6: React.CSSProperties;
+        body7: React.CSSProperties;
+        body8: React.CSSProperties;
+        small_body_b1: React.CSSProperties;
+        small_body_b2: React.CSSProperties;
+        small_body_b3: React.CSSProperties;
+        small_body_b4: React.CSSProperties;
+        small_body_b5: React.CSSProperties;
+        small_body_sb1: React.CSSProperties;
+        small_body_m1: React.CSSProperties;
+        small_body_m2: React.CSSProperties;
+        small_body_m3: React.CSSProperties;
+        small_body_m4: React.CSSProperties;
+        small_body_m5: React.CSSProperties;
+        small_body_m6: React.CSSProperties;
+        small_body_m7: React.CSSProperties;
+        small_body1: React.CSSProperties;
+        small_body2: React.CSSProperties;
+        small_body3: React.CSSProperties;
+        small_body4: React.CSSProperties;
+        small_body5: React.CSSProperties;
+        small_body_l1: React.CSSProperties;
+        small_body_l2: React.CSSProperties;
+        overline: React.CSSProperties;
+        button1: React.CSSProperties;
+        button2: React.CSSProperties;
+        caption: React.CSSProperties;
+    }
+    interface TypographyVariantsOptions {
+        h7?: React.CSSProperties;
+        h8?: React.CSSProperties;
+        h9?: React.CSSProperties;
+        h10?: React.CSSProperties;
+        subtitle3?: React.CSSProperties;
+        body_b1?: React.CSSProperties;
+        body_b2?: React.CSSProperties;
+        body_sb1?: React.CSSProperties;
+        body_sb2?: React.CSSProperties;
+        body_sb3?: React.CSSProperties;
+        body_sb4?: React.CSSProperties;
+        body_sb5?: React.CSSProperties;
+        body_m1?: React.CSSProperties;
+        body_m2?: React.CSSProperties;
+        body1?: React.CSSProperties;
+        body2?: React.CSSProperties;
+        body3?: React.CSSProperties;
+        body4?: React.CSSProperties;
+        body5?: React.CSSProperties;
+        body6?: React.CSSProperties;
+        body7?: React.CSSProperties;
+        body8?: React.CSSProperties;
+        small_body_b1?: React.CSSProperties;
+        small_body_b2?: React.CSSProperties;
+        small_body_b3?: React.CSSProperties;
+        small_body_b4?: React.CSSProperties;
+        small_body_b5?: React.CSSProperties;
+        small_body_sb1?: React.CSSProperties;
+        small_body_m1?: React.CSSProperties;
+        small_body_m2?: React.CSSProperties;
+        small_body_m3?: React.CSSProperties;
+        small_body_m4?: React.CSSProperties;
+        small_body_m5?: React.CSSProperties;
+        small_body_m6?: React.CSSProperties;
+        small_body_m7?: React.CSSProperties;
+        small_body1?: React.CSSProperties;
+        small_body2?: React.CSSProperties;
+        small_body3?: React.CSSProperties;
+        small_body4?: React.CSSProperties;
+        small_body5?: React.CSSProperties;
+        small_body_l1?: React.CSSProperties;
+        small_body_l2?: React.CSSProperties;
+        overline?: React.CSSProperties;
+        button1?: React.CSSProperties;
+        button2?: React.CSSProperties;
+        caption?: React.CSSProperties;
+    }
+}
+declare module '@mui/material/Typography' {
+    interface TypographyPropsVariantOverrides {
+        h7: true;
+        h8: true;
+        h9: true;
+        h10: true;
+        subtitle3: true;
+        body_b1: true;
+        body_b2: true;
+        body_sb1: true;
+        body_sb2: true;
+        body_sb3: true;
+        body_sb4: true;
+        body_sb5: true;
+        body_m1: true;
+        body_m2: true;
+        body1: true;
+        body2: true;
+        body3: true;
+        body4: true;
+        body5: true;
+        body6: true;
+        body7: true;
+        body8: true;
+        small_body_b1: true;
+        small_body_b2: true;
+        small_body_b3: true;
+        small_body_b4: true;
+        small_body_b5: true;
+        small_body_sb1: true;
+        small_body_m1: true;
+        small_body_m2: true;
+        small_body_m3: true;
+        small_body_m4: true;
+        small_body_m5: true;
+        small_body_m6: true;
+        small_body_m7: true;
+        small_body1: true;
+        small_body2: true;
+        small_body3: true;
+        small_body4: true;
+        small_body5: true;
+        small_body_l1: true;
+        small_body_l2: true;
+        overline: true;
+        button1: true;
+        button2: true;
+        caption: true;
+    }
+}
+declare const typographyOptions: TypographyOptions;
+export default typographyOptions;

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+import theme from './theme';
+export { theme };
+export * from './components';

package/dist/types/reportWebVitals.d.ts

@@ -0,0 +1,3 @@
+import { ReportHandler } from 'web-vitals';
+declare const reportWebVitals: (onPerfEntry?: ReportHandler) => void;
+export default reportWebVitals;

package/dist/types/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/systems/drawer.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { ThemeOptions } from '@mui/material';
+declare module '@mui/material/styles' {
+    interface Theme {
+        leftDrawer: {
+            width: React.CSSProperties['width'];
+        };
+        rightDrawer: {
+            width: React.CSSProperties['width'];
+        };
+    }
+    interface ThemeOptions {
+        leftDrawer: {
+            width: React.CSSProperties['width'];
+        };
+        rightDrawer: {
+            width: React.CSSProperties['width'];
+        };
+    }
+}
+declare const drawer: ThemeOptions;
+export default drawer;

package/dist/types/systems/index.d.ts

@@ -0,0 +1,6 @@
+export declare const SCROLLBAR_WIDTH = 10;
+export declare const SMALL_SCROLLBAR_WIDTH = 6;
+export declare const DRAWER_WIDTH_OPEN = 280;
+export declare const DRAWER_WIDTH_CLOSE = 52;
+export declare const VIEWER_DRAWER_WIDTH_OPEN = 280;
+export { default as drawer } from './drawer';

package/dist/types/theme.d.ts

@@ -0,0 +1,2 @@
+declare const theme: import("@mui/material/styles").Theme;
+export default theme;

package/package.json

@@ -0,0 +1,239 @@
+{
+  "name": "@lunit/oui",
+  "version": "1.0.0-alpha.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)"
+  },
+  "dependencies": {
+    "@babel/core": "^7.16.0",
+    "@date-io/date-fns": "^2.17.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@lunit/design-system-icons": "^1.3.1",
+    "@lunit/design-system-logo": "^1.1.0",
+    "@mui/icons-material": "^5.15.2",
+    "@mui/lab": "^5.0.0-alpha.158",
+    "@mui/material": "^5.15.2",
+    "@mui/styles": "^5.15.2",
+    "@mui/system": "^5.15.2",
+    "@mui/x-data-grid": "^6.18.6",
+    "@mui/x-date-pickers": "^6.18.6",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+    "@svgr/webpack": "^8.1.0",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.68",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@uppy/core": "^3.8.0",
+    "babel-jest": "^27.4.2",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-named-asset-import": "^0.3.8",
+    "babel-preset-react-app": "^10.0.1",
+    "bfj": "^7.0.2",
+    "browserslist": "^4.18.1",
+    "camelcase": "^6.2.1",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "clsx": "^2.0.0",
+    "css-loader": "^6.5.1",
+    "css-minimizer-webpack-plugin": "^3.2.0",
+    "date-fns": "2.30.0",
+    "dotenv": "^10.0.0",
+    "dotenv-expand": "^5.1.0",
+    "eslint": "^8.3.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-webpack-plugin": "^3.1.1",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^10.0.0",
+    "html-webpack-plugin": "^5.5.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.4.3",
+    "jest-resolve": "^27.4.2",
+    "jest-watch-typeahead": "^1.0.0",
+    "lodash": "^4.17.21",
+    "mini-css-extract-plugin": "^2.4.5",
+    "postcss": "^8.4.4",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^6.2.1",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^7.0.1",
+    "prompts": "^2.4.2",
+    "react": "^18.2.0",
+    "react-app-polyfill": "^3.0.0",
+    "react-dev-utils": "^12.0.1",
+    "react-dom": "^18.2.0",
+    "react-refresh": "^0.11.0",
+    "resolve": "^1.20.0",
+    "resolve-url-loader": "^4.0.0",
+    "sass-loader": "^12.3.0",
+    "semver": "^7.3.5",
+    "source-map-loader": "^3.0.0",
+    "style-loader": "^3.3.1",
+    "styled-components": "^6.1.1",
+    "tailwindcss": "^3.0.2",
+    "terser-webpack-plugin": "^5.2.5",
+    "tinycolor2": "^1.6.0",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4",
+    "webpack": "^5.64.4",
+    "webpack-dev-server": "^4.6.0",
+    "webpack-manifest-plugin": "^4.0.2",
+    "workbox-webpack-plugin": "^6.4.1"
+  },
+  "scripts": {
+    "build": "npm run build:transpile && npm run build:cjs",
+    "build:transpile": "tsc -p tsconfig.build.json",
+    "build:cjs": "NODE_ENV=production webpack -c config/cjs.config.js",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepare": "husky install"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest",
+      "plugin:storybook/recommended"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "jest": {
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/*.d.ts"
+    ],
+    "setupFiles": [
+      "react-app-polyfill/jsdom"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.ts"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
+      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
+    ],
+    "testEnvironment": "jsdom",
+    "transform": {
+      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
+      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+      "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
+      "^.+\\.module\\.(css|sass|scss)$"
+    ],
+    "modulePaths": [],
+    "moduleNameMapper": {
+      "^react-native$": "react-native-web",
+      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
+    },
+    "moduleFileExtensions": [
+      "web.js",
+      "js",
+      "web.ts",
+      "ts",
+      "web.tsx",
+      "tsx",
+      "json",
+      "web.jsx",
+      "jsx",
+      "node"
+    ],
+    "watchPlugins": [
+      "jest-watch-typeahead/filename",
+      "jest-watch-typeahead/testname"
+    ],
+    "resetMocks": true
+  },
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
+    "@lottiefiles/react-lottie-player": "^3.5.3",
+    "@lunit/eslint-config": "^0.5.0",
+    "@storybook/addon-actions": "^7.6.6",
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/addon-interactions": "^7.6.6",
+    "@storybook/addon-links": "^7.6.6",
+    "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/blocks": "^7.6.6",
+    "@storybook/manager-api": "^7.6.6",
+    "@storybook/react": "^7.6.6",
+    "@storybook/react-vite": "^7.6.6",
+    "@storybook/react-webpack5": "^7.6.6",
+    "@storybook/test": "^7.6.6",
+    "@storybook/theming": "^7.6.6",
+    "@tsconfig/recommended": "^1.0.3",
+    "@types/tinycolor2": "^1.4.6",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "husky": "^8.0.0",
+    "lint-staged": "^15.2.0",
+    "prettier": "^3.1.1",
+    "storybook": "^7.6.6",
+    "ts-loader": "^9.5.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-node-externals": "^3.0.0"
+  },
+  "description": "Lunit Oncology UI components",
+  "main": "dist/cjs/index.js",
+  "module": "dist/index.js",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "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",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/types/components/*/index.d.ts",
+        "dist/types/index.d.ts"
+      ]
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lunit-io/oui.git"
+  },
+  "keywords": [
+    "lunit",
+    "oui",
+    "components"
+  ],
+  "author": "og_pd_fe@lunit.io",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/lunit-io/oui/issues"
+  },
+  "homepage": "https://github.com/lunit-io/oui#readme"
+}

package/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

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;