@lunit/oui 1.0.1-alpha.9 → 1.0.1

package/src/foundations/typography.ts

@@ -0,0 +1,492 @@
+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;
+  }
+}
+
+const typographyOptions: TypographyOptions = {
+  fontFamily: [
+    'Pretendard',
+    '-apple-system',
+    'BlinkMacSystemFont',
+    '"Segoe UI"',
+    'Roboto',
+    '"Helvetica Neue"',
+    'Arial',
+    'sans-serif',
+    '"Apple Color Emoji"',
+    '"Segoe UI Emoji"',
+    '"Segoe UI Symbol"',
+  ].join(','),
+  h1: {
+    fontWeight: 600,
+    fontSize: '52px',
+    lineHeight: '68px',
+  },
+  h2: {
+    fontWeight: 700,
+    fontSize: '38px',
+    lineHeight: '48px',
+  },
+  h3: {
+    fontWeight: 500,
+    fontSize: '38px',
+    lineHeight: '48px',
+  },
+  h4: {
+    fontWeight: 600,
+    fontSize: '30px',
+    lineHeight: '48px',
+  },
+  h5: {
+    fontWeight: 400,
+    fontSize: '30px',
+    lineHeight: '48px',
+  },
+  h6: {
+    fontWeight: 700,
+    fontSize: '28px',
+    lineHeight: 'auto',
+  },
+  h7: {
+    fontWeight: 600,
+    fontSize: '24px',
+    lineHeight: '36px',
+  },
+  h8: {
+    fontWeight: 600,
+    fontSize: '20px',
+    lineHeight: '28px',
+  },
+  h9: {
+    fontWeight: 600,
+    fontSize: '16px',
+    lineHeight: '24px',
+  },
+  subtitle1: {
+    fontSize: 20,
+    fontWeight: 600,
+    lineHeight: '28px',
+  },
+  subtitle2: {
+    fontSize: 18,
+    fontWeight: 600,
+    lineHeight: '24px',
+  },
+  subtitle3: {
+    fontSize: 16,
+    fontWeight: 600,
+    lineHeight: '24px',
+  },
+
+  body_b1: {
+    fontWeight: 700,
+    fontSize: '14px',
+    lineHeight: '20px',
+  },
+  body_b2: {
+    fontWeight: 700,
+    fontSize: '14px',
+    lineHeight: 'auto',
+  },
+
+  body_sb1: {
+    fontWeight: 600,
+    fontSize: '16px',
+    lineHeight: '24px',
+  },
+  body_sb2: {
+    fontWeight: 600,
+    fontSize: '16px',
+    lineHeight: '20px',
+  },
+  body_sb3: {
+    fontWeight: 700,
+    fontSize: '15px',
+    lineHeight: '16px',
+  },
+  body_sb4: {
+    fontWeight: 600,
+    fontSize: '14px',
+    lineHeight: '20px',
+  },
+  body_sb5: {
+    fontWeight: 600,
+    fontSize: '12.4px',
+    lineHeight: '16px',
+  },
+
+  body_m1: {
+    fontWeight: 500,
+    fontSize: '14px',
+    lineHeight: '20px',
+  },
+  body_m2: {
+    fontWeight: 500,
+    fontSize: '13px',
+    lineHeight: '18px',
+    letterSpacing: '0.2px',
+  },
+
+  body1: {
+    fontWeight: 400,
+    fontSize: '16px',
+    lineHeight: '24px',
+  },
+  body2: {
+    fontWeight: 400,
+    fontSize: '16px',
+    lineHeight: 'auto',
+  },
+  body3: {
+    fontWeight: 400,
+    fontSize: '15px',
+    lineHeight: '24px',
+  },
+  body4: {
+    fontWeight: 400,
+    fontSize: '14px',
+    lineHeight: '28px',
+  },
+  body5: {
+    fontWeight: 400,
+    fontSize: '14px',
+    lineHeight: '20px',
+  },
+  body6: {
+    fontWeight: 400,
+    fontSize: '13px',
+    lineHeight: '18px',
+  },
+  body7: {
+    fontWeight: 400,
+    fontSize: '12.4px',
+    lineHeight: '16px',
+  },
+  body8: {
+    fontWeight: 400,
+    fontSize: '12px',
+    lineHeight: '16px',
+  },
+
+  small_body_b1: {
+    fontWeight: 700,
+    fontSize: '12px',
+    lineHeight: '12px',
+  },
+  small_body_b2: {
+    fontWeight: 700,
+    fontSize: '12px',
+    lineHeight: '16px',
+  },
+  small_body_b3: {
+    fontWeight: 700,
+    fontSize: '10px',
+    lineHeight: 'auto',
+  },
+  small_body_b4: {
+    fontWeight: 700,
+    fontSize: '10px',
+    lineHeight: '12px',
+  },
+  small_body_b5: {
+    fontWeight: 700,
+    fontSize: '8px',
+    lineHeight: 'auto',
+  },
+
+  small_body_sb1: {
+    fontWeight: 600,
+    fontSize: '12px',
+    lineHeight: '16px',
+  },
+
+  small_body_m1: {
+    fontWeight: 500,
+    fontSize: '13px',
+    lineHeight: '20px',
+  },
+  small_body_m2: {
+    fontWeight: 500,
+    fontSize: '12px',
+    lineHeight: '20px',
+  },
+  small_body_m3: {
+    fontWeight: 500,
+    fontSize: '10px',
+    lineHeight: 'auto',
+  },
+  small_body_m4: {
+    fontWeight: 500,
+    fontSize: '10px',
+    lineHeight: '16px',
+  },
+  small_body_m5: {
+    fontWeight: 500,
+    fontSize: '8px',
+    lineHeight: 'auto',
+  },
+  small_body_m6: {
+    fontWeight: 500,
+    fontSize: '8px',
+    lineHeight: '12px',
+  },
+  small_body_m7: {
+    fontWeight: 500,
+    fontSize: '7px',
+    lineHeight: 'auto',
+  },
+
+  small_body1: {
+    fontWeight: 400,
+    fontSize: '13px',
+    lineHeight: '24px',
+  },
+  small_body2: {
+    fontWeight: 400,
+    fontSize: '12px',
+    lineHeight: '20px',
+  },
+  small_body3: {
+    fontWeight: 400,
+    fontSize: '10px',
+    lineHeight: 'auto',
+  },
+  small_body4: {
+    fontWeight: 400,
+    fontSize: '10px',
+    lineHeight: '14px',
+  },
+  small_body5: {
+    fontWeight: 400,
+    fontSize: '8px',
+    lineHeight: 'auto',
+  },
+
+  small_body_l1: {
+    fontWeight: 300,
+    fontSize: '10px',
+    lineHeight: '20px',
+  },
+  small_body_l2: {
+    fontWeight: 300,
+    fontSize: '7px',
+    lineHeight: 'auto',
+  },
+
+  overline: {
+    fontWeight: 500,
+    fontSize: '14px',
+    lineHeight: '20px',
+    letterSpacing: '1px',
+    textTransform: 'uppercase',
+  },
+
+  button1: {
+    fontWeight: 600,
+    fontSize: '16px',
+    lineHeight: '22px',
+    textTransform: 'capitalize',
+  },
+  button2: {
+    fontWeight: 600,
+    fontSize: '14px',
+    lineHeight: '20px',
+    letterSpacing: '0.2px',
+    textTransform: 'capitalize',
+  },
+
+  caption: {
+    fontWeight: 500,
+    fontSize: '12px',
+    lineHeight: '16px',
+  },
+};
+
+export default typographyOptions;

package/src/icons/BellNoti/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+import { IcBellNotiOutlined20Px as outlined } from '../../assets';
+
+const variants = ['outlined'] as const;
+type Variant = (typeof variants)[number];
+type IconProps = SvgIconProps & {
+  variant?: Variant;
+};
+const BellNoti = ({ variant = 'outlined', ...rest }: IconProps) => {
+  if (variant === 'outlined') {
+    return (
+      <SvgIcon
+        {...rest}
+        component={outlined}
+        inheritViewBox
+      />
+    );
+  }
+
+  return null;
+};
+
+BellNoti.displayName = 'BellNoti';
+BellNoti.variants = variants;
+
+export default BellNoti;

package/src/icons/CloseLarge/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+import { IcCloseLargeOutlined20Px as outlined } from '../../assets';
+
+const variants = ['outlined'] as const;
+type Variant = (typeof variants)[number];
+type IconProps = SvgIconProps & {
+  variant?: Variant;
+};
+const CloseLarge = ({ variant = 'outlined', ...rest }: IconProps) => {
+  if (variant === 'outlined') {
+    return (
+      <SvgIcon
+        {...rest}
+        component={outlined}
+        inheritViewBox
+      />
+    );
+  }
+
+  return null;
+};
+
+CloseLarge.displayName = 'CloseLarge';
+CloseLarge.variants = variants;
+
+export default CloseLarge;

package/src/icons/CloseSmall/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+import { IcCloseSmallOutlined20Px as outlined } from '../../assets';
+
+const variants = ['outlined'] as const;
+type Variant = (typeof variants)[number];
+type IconProps = SvgIconProps & {
+  variant?: Variant;
+};
+const CloseSmall = ({ variant = 'outlined', ...rest }: IconProps) => {
+  if (variant === 'outlined') {
+    return (
+      <SvgIcon
+        {...rest}
+        component={outlined}
+        inheritViewBox
+      />
+    );
+  }
+
+  return null;
+};
+
+CloseSmall.displayName = 'CloseSmall';
+CloseSmall.variants = variants;
+
+export default CloseSmall;

package/src/icons/DownloadPdf/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+import { IcDownloadPdfOutlined20Px as outlined } from '../../assets';
+
+const variants = ['outlined'] as const;
+type Variant = (typeof variants)[number];
+type IconProps = SvgIconProps & {
+  variant?: Variant;
+};
+const DownloadPdf = ({ variant = 'outlined', ...rest }: IconProps) => {
+  if (variant === 'outlined') {
+    return (
+      <SvgIcon
+        {...rest}
+        component={outlined}
+        inheritViewBox
+      />
+    );
+  }
+
+  return null;
+};
+
+DownloadPdf.displayName = 'DownloadPdf';
+DownloadPdf.variants = variants;
+
+export default DownloadPdf;

package/src/icons/Ellipse/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+import { IcEllipseOutlined20Px as outlined } from '../../assets';
+
+const variants = ['outlined'] as const;
+type Variant = (typeof variants)[number];
+type IconProps = SvgIconProps & {
+  variant?: Variant;
+};
+const Ellipse = ({ variant = 'outlined', ...rest }: IconProps) => {
+  if (variant === 'outlined') {
+    return (
+      <SvgIcon
+        {...rest}
+        component={outlined}
+        inheritViewBox
+      />
+    );
+  }
+
+  return null;
+};
+
+Ellipse.displayName = 'Ellipse';
+Ellipse.variants = variants;
+
+export default Ellipse;

package/src/icons/FilterNoti/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+import { IcFilterNotiOutlined20Px as outlined } from '../../assets';
+
+const variants = ['outlined'] as const;
+type Variant = (typeof variants)[number];
+type IconProps = SvgIconProps & {
+  variant?: Variant;
+};
+const FilterNoti = ({ variant = 'outlined', ...rest }: IconProps) => {
+  if (variant === 'outlined') {
+    return (
+      <SvgIcon
+        {...rest}
+        component={outlined}
+        inheritViewBox
+      />
+    );
+  }
+
+  return null;
+};
+
+FilterNoti.displayName = 'FilterNoti';
+FilterNoti.variants = variants;
+
+export default FilterNoti;

package/src/icons/HideLarge/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+import { IcHideLargeOutlined20Px as outlined } from '../../assets';
+
+const variants = ['outlined'] as const;
+type Variant = (typeof variants)[number];
+type IconProps = SvgIconProps & {
+  variant?: Variant;
+};
+const HideLarge = ({ variant = 'outlined', ...rest }: IconProps) => {
+  if (variant === 'outlined') {
+    return (
+      <SvgIcon
+        {...rest}
+        component={outlined}
+        inheritViewBox
+      />
+    );
+  }
+
+  return null;
+};
+
+HideLarge.displayName = 'HideLarge';
+HideLarge.variants = variants;
+
+export default HideLarge;

package/src/icons/HideSmall/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+import { IcHideSmallOutlined20Px as outlined } from '../../assets';
+
+const variants = ['outlined'] as const;
+type Variant = (typeof variants)[number];
+type IconProps = SvgIconProps & {
+  variant?: Variant;
+};
+const HideSmall = ({ variant = 'outlined', ...rest }: IconProps) => {
+  if (variant === 'outlined') {
+    return (
+      <SvgIcon
+        {...rest}
+        component={outlined}
+        inheritViewBox
+      />
+    );
+  }
+
+  return null;
+};
+
+HideSmall.displayName = 'HideSmall';
+HideSmall.variants = variants;
+
+export default HideSmall;