@lunit/oui 1.0.1 → 1.1.0-alpha.1

package/README.md

@@ -12,6 +12,9 @@ In React component
 ```
 // Load Button component
 import { Button } from '@lunit/oui';
+
+// Use icons
+import { ArrowDoubleDown } from '@lunit/oui/icons';
 ```
 
 ## Storybook

package/dist/components/EllipsisTypography/EllipsisTypography.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useRef, useState } from 'react';
+import StyledTypography from './EllipsisTypography.styled';
+import { Tooltip } from '../Tooltip';
+import { ResizeObserverContext } from '../ResizeObserver/ResizeObserverContext';
+function EllipsisTypography({ children, heightThreshold: heightThresholdProp, tooltipPlacement = 'bottom', maxLines = 1, ...otherProps }) {
+    const typographyRef = useRef(null);
+    const direction = otherProps.direction || 'row';
+    const heightThreshold = heightThresholdProp != null ? heightThresholdProp : 1;
+    const [showTooltip, setShowTooltip] = useState(false);
+    const { addResizeHandler, removeResizeHandler } = useContext(ResizeObserverContext);
+    useEffect(() => {
+        if (typographyRef.current) {
+            const target = typographyRef.current;
+            const resizeHandler = () => {
+                switch (direction) {
+                    case 'row':
+                        if (target.scrollHeight - target.clientHeight > heightThreshold && !showTooltip) {
+                            setShowTooltip(true);
+                        }
+                        else if (target.scrollHeight - target.clientHeight <= heightThreshold &&
+                            showTooltip) {
+                            setShowTooltip(false);
+                        }
+                        break;
+                    case 'column':
+                    default:
+                        if (target.scrollHeight - target.clientHeight > heightThreshold && !showTooltip) {
+                            setShowTooltip(true);
+                        }
+                        else if (target.scrollHeight - target.clientHeight <= heightThreshold &&
+                            showTooltip) {
+                            setShowTooltip(false);
+                        }
+                }
+            };
+            if (addResizeHandler) {
+                console.log(addResizeHandler);
+                addResizeHandler(target, resizeHandler);
+            }
+            return () => {
+                if (removeResizeHandler)
+                    removeResizeHandler(target);
+            };
+        }
+        return () => { };
+    }, [
+        typographyRef,
+        direction,
+        showTooltip,
+        heightThreshold,
+        addResizeHandler,
+        removeResizeHandler,
+    ]);
+    console.log(showTooltip);
+    if (showTooltip) {
+        return (_jsx(Tooltip, { title: children, placement: tooltipPlacement, size: "small", children: _jsx(StyledTypography, { ...otherProps, ref: typographyRef, direction: direction, maxLines: maxLines, children: children }) }));
+    }
+    return (_jsx(StyledTypography, { ...otherProps, ref: typographyRef, direction: direction, maxLines: maxLines, children: children }));
+}
+export default EllipsisTypography;
+//# sourceMappingURL=EllipsisTypography.js.map

package/dist/components/EllipsisTypography/EllipsisTypography.styled.js

@@ -0,0 +1,16 @@
+import { Typography as MUITypography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+const StyledTypography = styled(MUITypography, {
+    shouldForwardProp: (prop) => !['direction', 'heightThreshold', 'maxLines'].includes(prop.toString()),
+})(({ direction, maxLines }) => ({
+    maxWidth: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    lineBreak: 'anywhere',
+    display: '-webkit-box',
+    WebkitBoxOrient: 'vertical',
+    whiteSpace: 'normal',
+    ...(direction === 'row' ? { WebkitLineClamp: 1 } : { WebkitLineClamp: maxLines }),
+}));
+export default StyledTypography;
+//# sourceMappingURL=EllipsisTypography.styled.js.map

package/dist/components/EllipsisTypography/EllipsisTypography.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=EllipsisTypography.types.js.map

package/dist/components/EllipsisTypography/index.js

@@ -0,0 +1,3 @@
+import EllipsisTypography from './EllipsisTypography';
+export { EllipsisTypography };
+//# sourceMappingURL=index.js.map

package/dist/components/MuiCssBaseline.js

@@ -6,8 +6,24 @@ const html = {
     fontFamily: `Pretendard, sans-serif`,
     fontFeatureSettings: `'tnum', 'ss01', 'ss02', 'ss08'`,
 };
+const body = {
+    ...html,
+    width: '100vw',
+    height: '100vh',
+    margin: 0,
+    padding: 0,
+    overflow: 'hidden',
+    lineHeight: 'normal',
+    color: 'white',
+    backgroundColor: palette.neutralGrey?.[95],
+    '& a': {
+        textDecoration: 'none',
+    },
+};
 const styleOverrides = {
     html,
+    '.App': body,
+    '#root': body,
     '*::-webkit-scrollbar-track': {
         backgroundColor: 'transparent',
     },

package/dist/components/ResizeObserver/ResizeObserverContext.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useEffect, useRef } from 'react';
+import { v4 as uuidV4 } from 'uuid';
+import { cloneDeep as _cloneDeep, throttle as _throttle } from 'lodash';
+const ResizeObserverContext = createContext({});
+const { Provider } = ResizeObserverContext;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ResizeObserverProvider = ({ children }) => {
+    const observerRef = useRef(null);
+    const handlersRef = useRef({});
+    function getObserver() {
+        let current = _cloneDeep(observerRef.current);
+        if (current === null) {
+            current = new ResizeObserver(_throttle((entries) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                entries.forEach((entry) => {
+                    const resizeHandlers = handlersRef.current;
+                    const observerKey = entry.target.attributes.getNamedItem('data-resizeobkey');
+                    if (resizeHandlers[observerKey.value]) {
+                        resizeHandlers[observerKey.value](entry.target);
+                    }
+                });
+            }));
+        }
+        return current;
+    }
+    const addResizeHandler = (target, handler) => {
+        let observerKey = target.attributes.getNamedItem('data-resizeobkey');
+        if (observerKey === null) {
+            target.setAttribute('data-resizeobkey', uuidV4());
+            observerKey = target.attributes.getNamedItem('data-resizeobkey');
+        }
+        handlersRef.current[observerKey.value] = handler;
+        getObserver().observe(target);
+    };
+    const removeResizeHandler = (target) => {
+        const observerKey = target.attributes.getNamedItem('data-resizeobkey');
+        if (observerKey !== null) {
+            delete handlersRef.current[observerKey.value];
+        }
+        getObserver().unobserve(target);
+    };
+    useEffect(() => {
+        return () => {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+            }
+        };
+    }, []);
+    return (_jsx(Provider, { value: {
+            addResizeHandler,
+            removeResizeHandler,
+        }, children: children }));
+};
+export { ResizeObserverContext, ResizeObserverProvider };
+//# sourceMappingURL=ResizeObserverContext.js.map

package/dist/components/ResizeObserver/index.js

@@ -0,0 +1,3 @@
+import { ResizeObserverContext, ResizeObserverProvider } from './ResizeObserverContext';
+export { ResizeObserverContext, ResizeObserverProvider };
+//# sourceMappingURL=index.js.map

package/dist/components/index.js

@@ -8,6 +8,7 @@ export * from './DatePicker';
 export * from './Dialog';
 export * from './Divider';
 export * from './Dropdown';
+export * from './EllipsisTypography';
 export * from './FileDnDZone';
 export * from './List';
 export * from './LoadingIndicator';

package/dist/index.js

@@ -1,4 +1,5 @@
 import theme from './theme';
 export { theme };
 export * from './components';
+export * from './icons';
 //# sourceMappingURL=index.js.map

package/dist/types/components/EllipsisTypography/EllipsisTypography.d.ts

@@ -0,0 +1,3 @@
+import type { EllipsisTypographyProps } from './EllipsisTypography.types';
+declare function EllipsisTypography({ children, heightThreshold: heightThresholdProp, tooltipPlacement, maxLines, ...otherProps }: EllipsisTypographyProps): import("react/jsx-runtime").JSX.Element;
+export default EllipsisTypography;

package/dist/types/components/EllipsisTypography/EllipsisTypography.styled.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { BaseEllipsisTypographyProps } from './EllipsisTypography.types';
+declare const StyledTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "width" | "zIndex" | "typography" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "visibility" | "whiteSpace" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "style" | "classes" | "className" | "children" | "sx" | "variant" | "p" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & BaseEllipsisTypographyProps, {}, {}>;
+export default StyledTypography;

package/dist/types/components/EllipsisTypography/EllipsisTypography.types.d.ts

@@ -0,0 +1,9 @@
+import type { TypographyProps as MuiTypographyProps } from '@mui/material';
+export interface BaseEllipsisTypographyProps extends MuiTypographyProps {
+    direction?: 'row' | 'column';
+    maxLines?: number;
+}
+export interface EllipsisTypographyProps extends BaseEllipsisTypographyProps {
+    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+    heightThreshold?: number;
+}

package/dist/types/components/EllipsisTypography/index.d.ts

@@ -0,0 +1,4 @@
+import EllipsisTypography from './EllipsisTypography';
+import type { EllipsisTypographyProps } from './EllipsisTypography.types';
+export { EllipsisTypography };
+export type { EllipsisTypographyProps };

package/dist/types/components/ResizeObserver/ResizeObserverContext.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type EntryHandler = (entry: Element) => void;
+interface IResizeObserverContextProps {
+    addResizeHandler(target: Element, handler: EntryHandler): void;
+    removeResizeHandler(target: Element): void;
+}
+declare const ResizeObserverContext: React.Context<IResizeObserverContextProps>;
+declare const ResizeObserverProvider: ({ children }: any) => import("react/jsx-runtime").JSX.Element;
+export { ResizeObserverContext, ResizeObserverProvider };

package/dist/types/components/ResizeObserver/index.d.ts

@@ -0,0 +1,2 @@
+import { ResizeObserverContext, ResizeObserverProvider } from './ResizeObserverContext';
+export { ResizeObserverContext, ResizeObserverProvider };

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

@@ -8,6 +8,7 @@ export * from './DatePicker';
 export * from './Dialog';
 export * from './Divider';
 export * from './Dropdown';
+export * from './EllipsisTypography';
 export * from './FileDnDZone';
 export * from './List';
 export * from './LoadingIndicator';

package/dist/types/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "1.0.1",
+  "version": "1.1.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)"
@@ -196,26 +196,33 @@
     "webpack-node-externals": "^3.0.0"
   },
   "description": "Lunit Oncology UI components",
-  "main": "dist/cjs/index.js",
+  "main": "dist/index.js",
   "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
   "sideEffects": false,
   "exports": {
     ".": {
       "import": "./dist/index.js",
-      "require": "./dist/cjs/index.js",
-      "default": "./dist/cjs/index.js"
+      "module": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./*": {
       "import": "./dist/components/*/index.js",
-      "require": "./dist/cjs/components/*/index.js",
-      "default": "./dist/cjs/components/*/index.js"
+      "module": "./dist/components/*/index.js",
+      "default": "./dist/components/*/index.js"
+    },
+    "./icons": {
+      "import": "./dist/icons/index.js",
+      "module": "./dist/icons/index.js",
+      "default": "./dist/icons/index.js",
+      "types": "./dist/types/icons/index.d.ts"
     }
   },
-  "types": "dist/types/index.d.ts",
   "typesVersions": {
     "*": {
       "*": [
         "dist/types/components/*/index.d.ts",
+        "dist/types/icons/*/index.d.ts",
         "dist/types/index.d.ts"
       ]
     }

package/.git-ftp-include

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

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

@@ -1,21 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,5 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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>