sud-ui 1.9.0 → 1.9.2

package/README.md

@@ -1,26 +1,14 @@
-<p align="center">
-  <a href="https://sud.co.kr" target="_blank">
-    <img src="https://www.sud.co.kr/sud-logo.svg" alt="Sud UI 로고" width="400"/>
-  </a>
-</p>
+# Soon UI Design Library [![npm version](https://img.shields.io/badge/npm-1.9.2-blue)](https://www.npmjs.com/package/sud-ui)
 
-# Soon UI Design Library [![npm version](https://img.shields.io/badge/npm-1.9.0-blue)](https://www.npmjs.com/package/sud-ui)
-
-**Soon UI Design (SUD)** is a React UI library that helps you quickly build responsive and polished interfaces using reusable components and customizable design tokens.
-
-<p align="center">
-  <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbtRhyi%2FbtsOO8VbNm1%2FAAAAAAAAAAAAAAAAAAAAAJQ7ZrjHvQP0ibh2VnYpFA9AYuvUPgkFpFKfLMAVyY-z%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DlwvrqCVV70OtiZXnxprySVHTBiI%253D" alt="Sud UI Components Preview"/>
-</p>
-
----
+## **Soon UI Design (SUD)** is a React UI library that helps you quickly build responsive and polished interfaces using reusable components and customizable design tokens.
 
 ## ✨ Features
 
-- 🎨 Consistent design system with Tailwind-like syntax
+- 🎨 Tailwind CSS utilities with SUD-specific animations and design tokens
 - 🧩 50+ reusable components (Button, Modal, Table, etc.)
 - 🌗 Light/Dark theme support
 - ⚙️ Fully customizable theme and styles
-- 🌀 Utility-first class support (e.g., `pd-10`, `mg-4`)
+- 🧪 Local demo page for visual QA before publishing
 
 ## 📦 Installation
 
@@ -102,6 +90,12 @@ Sud UI provides a comprehensive suite of ready-to-use components:
 
 ## 🎨 Theme & Customization
 
+Surface defaults are intentionally conservative: content/form components use a
+border by default, floating overlays use a shadow by default, and action
+components stay flat unless `shadow` is explicitly enabled. See
+[`docs/surface-guidelines.md`](./docs/surface-guidelines.md) for the release
+checklist and surface rules.
+
 SUD provides full theming support via `SoonUIDesign`.
 
 ```jsx

package/dist/components/SoonUIDesign.d.ts

@@ -0,0 +1,11 @@
+import type { FC, ReactNode } from "react";
+import type { SUDTheme } from "../theme";
+
+export interface SoonUIDesignProps {
+  children?: ReactNode;
+  theme?: SUDTheme;
+  darkTheme?: SUDTheme;
+  isDarkMode?: boolean;
+}
+
+export declare const SoonUIDesign: FC<SoonUIDesignProps>;

package/dist/components/commonType.d.ts

@@ -52,9 +52,16 @@ export type borderType =
   | "outset"
   | "none";
 
-export type shadowType = "none" | "sm" | "md" | "lg" | "xl";
-
-export type fontSizeType =
+export type shadowType = "none" | "sm" | "md" | "lg" | "xl";
+
+export type surfaceType =
+  | "bare"
+  | "outlined"
+  | "elevated"
+  | "floating"
+  | "overlay";
+
+export type fontSizeType =
   | "xs"
   | "sm"
   | "base"

package/dist/components/dataDisplay/Card.d.ts

@@ -1,10 +1,11 @@
 import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
 import type {
-  defaultColorType,
-  shapeType,
-  borderType,
-  shadowType
-} from "../commonType";
+  defaultColorType,
+  shapeType,
+  borderType,
+  shadowType,
+  surfaceType
+} from "../commonType";
 
 export type CardVariant =
   | "card"
@@ -40,9 +41,11 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   borderWeight?: number;
   /** 카드 모양 */
   shape?: shapeType;
-  /** 그림자 효과 */
-  shadow?: shadowType;
-  /** 카드 너비 */
+  /** 그림자 효과 */
+  shadow?: shadowType;
+  /** 기본 surface 프리셋 */
+  surface?: surfaceType;
+  /** 카드 너비 */
   width?: number | string;
   /** 카드 높이 */
   height?: number | string;

package/dist/components/dataDisplay/Carousel.d.ts

@@ -2,10 +2,11 @@ import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
 
 export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
   items?: ReactNode[];
-  itemWidthRatio?: number;
-  itemCount?: number;
-  itemGap?: number;
-  autoPlay?: boolean;
+  itemWidthRatio?: number;
+  itemCount?: number;
+  itemGap?: number;
+  overlapOffsetRatio?: number;
+  autoPlay?: boolean;
   autoPlayInterval?: number;
   scaleRatio?: number;
   opacityRatio?: number;

package/dist/components/dataDisplay/Collapse.d.ts

@@ -1,10 +1,11 @@
 import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
 import type {
-  defaultColorType,
-  shapeType,
-  borderType,
-  shadowType
-} from "../commonType";
+  defaultColorType,
+  shapeType,
+  borderType,
+  shadowType,
+  surfaceType
+} from "../commonType";
 
 export type CollapseSize = "sm" | "md" | "lg";
 
@@ -28,9 +29,10 @@ export interface CollapseProps extends HTMLAttributes<HTMLDivElement> {
   headerColor?: string;
   contentColorType?: defaultColorType;
   contentBackground?: string;
-  contentColor?: string;
-  shadow?: shadowType;
-  disabledKeys?: string[];
+  contentColor?: string;
+  shadow?: shadowType;
+  surface?: surfaceType;
+  disabledKeys?: string[];
   className?: string;
   size?: CollapseSize;
   shape?: shapeType;

package/dist/components/dataDisplay/Drawer.d.ts

@@ -1,10 +1,11 @@
 import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
 import type {
-  defaultColorType,
-  shapeType,
-  borderType,
-  shadowType
-} from "../commonType";
+  defaultColorType,
+  shapeType,
+  borderType,
+  shadowType,
+  surfaceType
+} from "../commonType";
 
 export type DrawerPlacement = "left" | "right" | "top" | "bottom";
 
@@ -23,9 +24,10 @@ export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
   borderColor?: string;
   borderType?: borderType;
   borderWeight?: number;
-  shape?: shapeType;
-  shadow?: shadowType;
-  width?: number | string;
+  shape?: shapeType;
+  shadow?: shadowType;
+  surface?: surfaceType;
+  width?: number | string;
   height?: number | string;
   className?: string;
   placement?: DrawerPlacement;

package/dist/components/dataDisplay/Modal.d.ts

@@ -1,10 +1,11 @@
 import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
 import type {
-  defaultColorType,
-  shapeType,
-  borderType,
-  shadowType
-} from "../commonType";
+  defaultColorType,
+  shapeType,
+  borderType,
+  shadowType,
+  surfaceType
+} from "../commonType";
 
 export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
   open?: boolean;
@@ -20,9 +21,10 @@ export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
   borderColor?: string;
   borderType?: borderType;
   borderWeight?: number;
-  shape?: shapeType;
-  shadow?: shadowType;
-  width?: number | string;
+  shape?: shapeType;
+  shadow?: shadowType;
+  surface?: surfaceType;
+  width?: number | string;
   height?: number | string;
   className?: string;
   divider?: boolean;

package/dist/components/dataEntry/Input.d.ts

@@ -7,7 +7,12 @@ import type {
   KeyboardEvent,
   ChangeEvent
 } from "react";
-import type { shapeType, borderType, shadowType } from "../commonType";
+import type {
+  shapeType,
+  borderType,
+  shadowType,
+  surfaceType
+} from "../commonType";
 
 export type InputSize = "sm" | "md" | "lg";
 
@@ -68,6 +73,7 @@ export interface InputProps
   onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
   shape?: shapeType;
   shadow?: shadowType;
+  surface?: surfaceType;
   size?: InputSize;
   id?: string;
   name?: string;
@@ -120,9 +126,12 @@ export interface OTPProps
   length?: number;
 }
 
-declare const Input: FC<InputProps> & {
-  Textarea: FC<TextareaProps>;
-  OTP: FC<OTPProps>;
+export declare const Textarea: FC<TextareaProps>;
+export declare const OTP: FC<OTPProps>;
+
+export declare const Input: FC<InputProps> & {
+  Textarea: typeof Textarea;
+  OTP: typeof OTP;
 };
 
 export default Input;

package/dist/components/dataEntry/Rate.d.ts

@@ -20,6 +20,4 @@ export interface RateProps extends HTMLAttributes<HTMLDivElement> {
   icon?: RateIcon;
 }
 
-declare const Rate: FC<RateProps>;
-
-export default Rate;
+export declare const Rate: FC<RateProps>;

package/dist/components/dataEntry/Select.d.ts

@@ -1,11 +1,12 @@
 import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
 import type {
   defaultColorType,
-  shapeType,
-  borderType,
-  shadowType,
-  tagColorType
-} from "../commonType";
+  shapeType,
+  borderType,
+  shadowType,
+  tagColorType,
+  surfaceType
+} from "../commonType";
 
 export type SelectSize = "sm" | "md" | "lg";
 
@@ -29,9 +30,10 @@ export interface SelectProps extends HTMLAttributes<HTMLDivElement> {
   style?: CSSProperties;
   value?: string | number | (string | number)[];
   onChange?: (value: string | number | (string | number)[]) => void;
-  shape?: shapeType;
-  shadow?: shadowType;
-  size?: SelectSize;
+  shape?: shapeType;
+  shadow?: shadowType;
+  surface?: surfaceType;
+  size?: SelectSize;
   id?: string;
   tagColorType?: tagColorType;
   colorType?: defaultColorType;

package/dist/components/feedback/Progress.d.ts

@@ -4,12 +4,20 @@ import type { tagColorType } from "../commonType";
 export type ProgressType = "bar" | "circle" | "dashboard";
 export type ProgressSize = "sm" | "md" | "lg";
 
-export type ProgressValuePosition =
-  | "inside-start"
-  | "inside-center"
-  | "inside-end"
-  | "outside-left"
-  | "outside-right";
+export type ProgressValuePosition =
+  | "inside-start"
+  | "inside-center"
+  | "inside-end"
+  | "outside-left"
+  | "outside-right";
+
+export type ProgressShadow =
+  | boolean
+  | "none"
+  | {
+      gauge?: boolean | string;
+      track?: boolean | string;
+    };
 
 export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
   type?: ProgressType;
@@ -22,10 +30,11 @@ export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
   colorType?: tagColorType;
   backgroundColor?: string;
   color?: string;
-  valuePosition?: ProgressValuePosition;
-  size?: ProgressSize;
-  fontSize?: number;
-  className?: string;
+  valuePosition?: ProgressValuePosition;
+  size?: ProgressSize;
+  fontSize?: number;
+  shadow?: ProgressShadow;
+  className?: string;
   style?: CSSProperties;
 }
 

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

@@ -0,0 +1,10 @@
+export { default as Layout } from "./Layout/index.d";
+export * from "./Layout/index.d";
+export { default as Header } from "./Header/index.d";
+export * from "./Header/index.d";
+export { default as Sider } from "./Sider/index.d";
+export * from "./Sider/index.d";
+export { default as Content } from "./Content/index.d";
+export * from "./Content/index.d";
+export { default as Footer } from "./Footer/index.d";
+export * from "./Footer/index.d";

package/dist/components/navigation/Dropdown.d.ts

@@ -3,10 +3,11 @@ import type { MenuItem } from "./Menu";
 import type { PopupPlacement, PopupTrigger } from "./base/PopupBase";
 import type {
   defaultColorType,
-  shapeType,
-  borderType,
-  shadowType
-} from "../commonType";
+  shapeType,
+  borderType,
+  shadowType,
+  surfaceType
+} from "../commonType";
 
 export interface DropdownProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "style"> {
@@ -26,9 +27,10 @@ export interface DropdownProps
   borderColor?: string;
   borderType?: borderType;
   borderWeight?: number;
-  shape?: shapeType;
-  shadow?: shadowType;
-  expandType?: "accordion" | "popover";
+  shape?: shapeType;
+  shadow?: shadowType;
+  surface?: surfaceType;
+  expandType?: "accordion" | "popover";
   popupPlacement?: PopupPlacement;
   placement?: [PopupPlacement, PopupPlacement];
   colorType?: defaultColorType;

package/dist/components/navigation/base/PopupBase.d.ts

@@ -6,11 +6,12 @@ import type {
   RefObject
 } from "react";
 import type {
-  defaultColorType,
-  borderType,
-  shadowType,
-  shapeType
-} from "../../commonType";
+  defaultColorType,
+  borderType,
+  shadowType,
+  shapeType,
+  surfaceType
+} from "../../commonType";
 
 export type PopupTrigger = "click" | "hover" | "contextMenu";
 
@@ -56,9 +57,10 @@ export interface PopupBaseProps
   borderColor?: string;
   borderType?: borderType;
   borderWeight?: number;
-  shape?: shapeType;
-  shadow?: shadowType;
-  colorType?: defaultColorType;
+  shape?: shapeType;
+  shadow?: shadowType;
+  surface?: surfaceType;
+  colorType?: defaultColorType;
   style?: CSSProperties;
   wrapperStyle?: CSSProperties;
   followTrigger?: boolean;

package/dist/index.css

@@ -1 +1 @@
-.visible{visibility:visible}.collapse{visibility:collapse}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-\[10px\]{gap:10px}.gap-\[8px\]{gap:8px}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.border{border-width:1px}.underline{text-decoration-line:underline}.\!shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1) !important;--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.drop-shadow{--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / .1)) drop-shadow(0 1px 1px rgb(0 0 0 / .06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@font-face{font-family:Pretendard-T;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2) format("woff2");font-weight:100;font-display:swap}@font-face{font-family:Pretendard-EL;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2) format("woff2");font-weight:200;font-display:swap}@font-face{font-family:Pretendard-L;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2) format("woff2");font-weight:300;font-display:swap}@font-face{font-family:Pretendard-R;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Pretendard-M;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2) format("woff2");font-weight:500;font-display:swap}@font-face{font-family:Pretendard-SB;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}@font-face{font-family:Pretendard-B;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2) format("woff2");font-weight:700;font-display:swap}@font-face{font-family:Pretendard-EB;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}@font-face{font-family:Pretendard-Black;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2) format("woff2");font-weight:900;font-display:swap}@font-face{font-family:GmarketSansLight;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff) format("woff");font-display:swap}@font-face{font-family:GmarketSansMedium;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff) format("woff");font-display:swap}@font-face{font-family:GmarketSansBold;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff) format("woff");font-display:swap}@font-face{font-family:SUITE-T;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Thin.woff2) format("woff2");font-weight:100;font-display:swap}@font-face{font-family:SUITE-EL;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraLight.woff2) format("woff2");font-weight:200;font-display:swap}@font-face{font-family:SUITE-L;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2) format("woff2");font-weight:300;font-display:swap}@font-face{font-family:SUITE-R;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:SUITE-M;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2) format("woff2");font-weight:500;font-display:swap}@font-face{font-family:SUITE-SM;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}@font-face{font-family:SUITE-B;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2) format("woff2");font-weight:700;font-display:swap}@font-face{font-family:SUITE-EB;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}@font-face{font-family:SUITE-H;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Heavy.woff2) format("woff2");font-weight:900;font-display:swap}@font-face{font-family:IntelOneMono-Medium;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/intelone-mono-font-family-medium.woff2) format("woff2");font-weight:500;font-display:swap}*{box-sizing:border-box;font-family:Pretendard-R,sans-serif}.codding-font{font-family:IntelOneMono-Medium,monospace}a{color:inherit;text-decoration:none}*{scrollbar-width:thin;scrollbar-color:transparent transparent}*:hover{scrollbar-color:rgba(0,0,0,.15) transparent}*::-webkit-scrollbar{width:6px;height:6px;background:transparent}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background-color:transparent;border-radius:6px;-webkit-transition:background-color .2s;transition:background-color .2s}*:hover::-webkit-scrollbar-thumb{background-color:#00000026}*::-webkit-scrollbar-thumb:hover,*:hover::-webkit-scrollbar-thumb:hover{background-color:#0000004d}.sud-hover{animation:none}.sud-hover:hover{animation:sud-hover-flash-3 1s ease-in-out}.sud-hover-1:hover{animation:sud-hover-flash-1 1s ease-in-out}@keyframes sud-hover-flash-1{0%{filter:brightness(1)}30%{filter:brightness(1.02)}to{filter:brightness(1)}}.sud-hover-2:hover{animation:sud-hover-flash-2 1s ease-in-out}@keyframes sud-hover-flash-2{0%{filter:brightness(1)}30%{filter:brightness(1.04)}to{filter:brightness(1)}}.sud-hover-3:hover{animation:sud-hover-flash-3 1s ease-in-out}@keyframes sud-hover-flash-3{0%{filter:brightness(1)}30%{filter:brightness(1.06)}to{filter:brightness(1)}}.sud-hover-4:hover{animation:sud-hover-flash-4 1s ease-in-out}@keyframes sud-hover-flash-4{0%{filter:brightness(1)}30%{filter:brightness(1.08)}to{filter:brightness(1)}}.sud-hover-5:hover{animation:sud-hover-flash-5 1s ease-in-out}@keyframes sud-hover-flash-5{0%{filter:brightness(1)}30%{filter:brightness(1.1)}to{filter:brightness(1)}}.sud-hover-6:hover{animation:sud-hover-flash-6 1s ease-in-out}@keyframes sud-hover-flash-6{0%{filter:brightness(1)}30%{filter:brightness(1.12)}to{filter:brightness(1)}}.sud-hover-7:hover{animation:sud-hover-flash-7 1s ease-in-out}@keyframes sud-hover-flash-7{0%{filter:brightness(1)}30%{filter:brightness(1.14)}to{filter:brightness(1)}}.sud-hover-8:hover{animation:sud-hover-flash-8 1s ease-in-out}@keyframes sud-hover-flash-8{0%{filter:brightness(1)}30%{filter:brightness(1.16)}to{filter:brightness(1)}}.sud-hover-9:hover{animation:sud-hover-flash-9 1s ease-in-out}@keyframes sud-hover-flash-9{0%{filter:brightness(1)}30%{filter:brightness(1.18)}to{filter:brightness(1)}}.sud-hover-10:hover{animation:sud-hover-flash-10 1s ease-in-out}@keyframes sud-hover-flash-10{0%{filter:brightness(1)}30%{filter:brightness(1.2)}to{filter:brightness(1)}}.hover-scale-1,.hover-scale-2,.hover-scale-3,.hover-scale-4,.hover-scale-5,.hover-scale-6,.hover-scale-7,.hover-scale-8,.hover-scale-9,.hover-scale-10{transition:transform .3s ease-in-out}.hover-scale-1:hover{transform:scale(.9)}.hover-scale-2:hover{transform:scale(.93)}.hover-scale-3:hover{transform:scale(.96)}.hover-scale-4:hover{transform:scale(1)}.hover-scale-5:hover{transform:scale(1.05)}.hover-scale-6:hover{transform:scale(1.08)}.hover-scale-7:hover{transform:scale(1.12)}.hover-scale-8:hover{transform:scale(1.16)}.hover-scale-9:hover{transform:scale(1.2)}.hover-scale-10:hover{transform:scale(1.25)}@keyframes bounce-1{0%{transform:translateY(0)}20%{transform:translateY(-2px)}40%{transform:translateY(1px)}60%{transform:translateY(-0px)}80%{transform:translateY(0)}to{transform:translateY(0)}}.hover-bounce-1:hover{animation:bounce-1 .4s ease-out}@keyframes bounce-2{0%{transform:translateY(0)}20%{transform:translateY(-4px)}40%{transform:translateY(2px)}60%{transform:translateY(-1px)}80%{transform:translateY(0)}to{transform:translateY(0)}}.hover-bounce-2:hover{animation:bounce-2 .4s ease-out}@keyframes bounce-3{0%{transform:translateY(0)}20%{transform:translateY(-6px)}40%{transform:translateY(3px)}60%{transform:translateY(-1px)}80%{transform:translateY(1px)}to{transform:translateY(0)}}.hover-bounce-3:hover{animation:bounce-3 .4s ease-out}@keyframes bounce-4{0%{transform:translateY(0)}20%{transform:translateY(-8px)}40%{transform:translateY(4px)}60%{transform:translateY(-2px)}80%{transform:translateY(1px)}to{transform:translateY(0)}}.hover-bounce-4:hover{animation:bounce-4 .4s ease-out}@keyframes bounce-5{0%{transform:translateY(0)}20%{transform:translateY(-10px)}40%{transform:translateY(5px)}60%{transform:translateY(-2px)}80%{transform:translateY(1px)}to{transform:translateY(0)}}.hover-bounce-5:hover{animation:bounce-5 .4s ease-out}@keyframes bounce-6{0%{transform:translateY(0)}20%{transform:translateY(-12px)}40%{transform:translateY(6px)}60%{transform:translateY(-3px)}80%{transform:translateY(2px)}to{transform:translateY(0)}}.hover-bounce-6:hover{animation:bounce-6 .4s ease-out}@keyframes bounce-7{0%{transform:translateY(0)}20%{transform:translateY(-14px)}40%{transform:translateY(7px)}60%{transform:translateY(-3px)}80%{transform:translateY(2px)}to{transform:translateY(0)}}.hover-bounce-7:hover{animation:bounce-7 .4s ease-out}@keyframes bounce-8{0%{transform:translateY(0)}20%{transform:translateY(-16px)}40%{transform:translateY(8px)}60%{transform:translateY(-4px)}80%{transform:translateY(2px)}to{transform:translateY(0)}}.hover-bounce-8:hover{animation:bounce-8 .4s ease-out}@keyframes bounce-9{0%{transform:translateY(0)}20%{transform:translateY(-18px)}40%{transform:translateY(9px)}60%{transform:translateY(-4px)}80%{transform:translateY(3px)}to{transform:translateY(0)}}.hover-bounce-9:hover{animation:bounce-9 .4s ease-out}@keyframes bounce-10{0%{transform:translateY(0)}20%{transform:translateY(-20px)}40%{transform:translateY(10px)}60%{transform:translateY(-5px)}80%{transform:translateY(3px)}to{transform:translateY(0)}}.hover-bounce-10:hover{animation:bounce-10 .4s ease-out}@keyframes hover-pulse-1{0%{transform:scale(1)}25%{transform:scale(1.02)}50%{transform:scale(.985)}75%{transform:scale(1.01)}to{transform:scale(1)}}.hover-pulse-1:hover{animation:hover-pulse-1 .4s ease-in-out}@keyframes hover-pulse-2{0%{transform:scale(1)}25%{transform:scale(1.04)}50%{transform:scale(.97)}75%{transform:scale(1.02)}to{transform:scale(1)}}.hover-pulse-2:hover{animation:hover-pulse-2 .4s ease-in-out}@keyframes hover-pulse-3{0%{transform:scale(1)}25%{transform:scale(1.06)}50%{transform:scale(.955)}75%{transform:scale(1.03)}to{transform:scale(1)}}.hover-pulse-3:hover{animation:hover-pulse-3 .4s ease-in-out}@keyframes hover-pulse-4{0%{transform:scale(1)}25%{transform:scale(1.08)}50%{transform:scale(.94)}75%{transform:scale(1.04)}to{transform:scale(1)}}.hover-pulse-4:hover{animation:hover-pulse-4 .4s ease-in-out}@keyframes hover-pulse-5{0%{transform:scale(1)}25%{transform:scale(1.1)}50%{transform:scale(.925)}75%{transform:scale(1.05)}to{transform:scale(1)}}.hover-pulse-5:hover{animation:hover-pulse-5 .4s ease-in-out}@keyframes hover-pulse-6{0%{transform:scale(1)}25%{transform:scale(1.12)}50%{transform:scale(.91)}75%{transform:scale(1.06)}to{transform:scale(1)}}.hover-pulse-6:hover{animation:hover-pulse-6 .4s ease-in-out}@keyframes hover-pulse-7{0%{transform:scale(1)}25%{transform:scale(1.14)}50%{transform:scale(.895)}75%{transform:scale(1.07)}to{transform:scale(1)}}.hover-pulse-7:hover{animation:hover-pulse-7 .4s ease-in-out}@keyframes hover-pulse-8{0%{transform:scale(1)}25%{transform:scale(1.16)}50%{transform:scale(.88)}75%{transform:scale(1.08)}to{transform:scale(1)}}.hover-pulse-8:hover{animation:hover-pulse-8 .4s ease-in-out}@keyframes hover-pulse-9{0%{transform:scale(1)}25%{transform:scale(1.18)}50%{transform:scale(.865)}75%{transform:scale(1.09)}to{transform:scale(1)}}.hover-pulse-9:hover{animation:hover-pulse-9 .4s ease-in-out}@keyframes hover-pulse-10{0%{transform:scale(1)}25%{transform:scale(1.2)}50%{transform:scale(.85)}75%{transform:scale(1.1)}to{transform:scale(1)}}.hover-pulse-10:hover{animation:hover-pulse-10 .4s ease-in-out}@keyframes shake-1{0%,to{transform:translate(0)}50%{transform:translate(-1px)}}.hover-shake-1:hover{animation:shake-1 .2s ease-in-out}@keyframes shake-2{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.hover-shake-2:hover{animation:shake-2 .25s ease-in-out}@keyframes shake-3{0%,to{transform:translate(0)}20%{transform:translate(-3px)}50%{transform:translate(3px)}80%{transform:translate(-2px)}}.hover-shake-3:hover{animation:shake-3 .3s ease-in-out}@keyframes shake-4{0%,to{transform:translate(0)}15%{transform:translate(-4px)}30%{transform:translate(4px)}45%{transform:translate(-3px)}60%{transform:translate(3px)}75%{transform:translate(-2px)}}.hover-shake-4:hover{animation:shake-4 .3s ease-in-out}@keyframes shake-5{0%,to{transform:translate(0)}10%{transform:translate(-5px)}20%{transform:translate(5px)}30%{transform:translate(-4px)}40%{transform:translate(4px)}50%{transform:translate(-3px)}60%{transform:translate(3px)}}.hover-shake-5:hover{animation:shake-5 .35s ease-in-out}@keyframes shake-6{0%,to{transform:translate(0)}10%{transform:translate(-6px)}20%{transform:translate(6px)}30%{transform:translate(-5px)}40%{transform:translate(5px)}50%{transform:translate(-4px)}60%{transform:translate(4px)}70%{transform:translate(-3px)}80%{transform:translate(3px)}}.hover-shake-6:hover{animation:shake-6 .4s ease-in-out}@keyframes shake-7{0%,to{transform:translate(0)}8%{transform:translate(-7px)}16%{transform:translate(7px)}24%{transform:translate(-6px)}32%{transform:translate(6px)}40%{transform:translate(-5px)}48%{transform:translate(5px)}56%{transform:translate(-4px)}64%{transform:translate(4px)}72%{transform:translate(-3px)}80%{transform:translate(3px)}}.hover-shake-7:hover{animation:shake-7 .45s ease-in-out}@keyframes shake-8{0%,to{transform:translate(0)}7%{transform:translate(-8px)}14%{transform:translate(8px)}21%{transform:translate(-7px)}28%{transform:translate(7px)}35%{transform:translate(-6px)}42%{transform:translate(6px)}49%{transform:translate(-5px)}56%{transform:translate(5px)}63%{transform:translate(-4px)}70%{transform:translate(4px)}77%{transform:translate(-3px)}84%{transform:translate(3px)}}.hover-shake-8:hover{animation:shake-8 .5s ease-in-out}@keyframes shake-9{0%,to{transform:translate(0)}6%{transform:translate(-9px)}12%{transform:translate(9px)}18%{transform:translate(-8px)}24%{transform:translate(8px)}30%{transform:translate(-7px)}36%{transform:translate(7px)}42%{transform:translate(-6px)}48%{transform:translate(6px)}54%{transform:translate(-5px)}60%{transform:translate(5px)}66%{transform:translate(-4px)}72%{transform:translate(4px)}78%{transform:translate(-3px)}84%{transform:translate(3px)}}.hover-shake-9:hover{animation:shake-9 .55s ease-in-out}@keyframes shake-10{0%,to{transform:translate(0)}5%{transform:translate(-10px)}10%{transform:translate(10px)}15%{transform:translate(-9px)}20%{transform:translate(9px)}25%{transform:translate(-8px)}30%{transform:translate(8px)}35%{transform:translate(-7px)}40%{transform:translate(7px)}45%{transform:translate(-6px)}50%{transform:translate(6px)}55%{transform:translate(-5px)}60%{transform:translate(5px)}65%{transform:translate(-4px)}70%{transform:translate(4px)}75%{transform:translate(-3px)}80%{transform:translate(3px)}85%{transform:translate(-2px)}90%{transform:translate(2px)}}.hover-shake-10:hover{animation:shake-10 .6s ease-in-out}.shadow-sm{box-shadow:0 0 4px #0000001a}.shadow-md{box-shadow:0 0 8px #0003}.shadow-lg{box-shadow:0 0 16px #0000004d}.hover-shadow-1:hover{box-shadow:0 0 2px #0000000d!important}.hover-shadow-2:hover{box-shadow:0 0 4px #00000014!important}.hover-shadow-3:hover{box-shadow:0 0 6px #0000001f!important}.hover-shadow-4:hover{box-shadow:0 0 8px #00000029!important}.hover-shadow-5:hover{box-shadow:0 0 12px #0003!important}.hover-shadow-6:hover{box-shadow:0 0 16px #00000040!important}.hover-shadow-7:hover{box-shadow:0 0 20px #0000004d!important}.hover-shadow-8:hover{box-shadow:0 0 24px #00000059!important}.hover-shadow-9:hover{box-shadow:0 0 28px #0006!important}.hover-shadow-10:hover{box-shadow:0 0 32px #00000080!important}.hover-shadow-1,.hover-shadow-2,.hover-shadow-3,.hover-shadow-4,.hover-shadow-5,.hover-shadow-6,.hover-shadow-7,.hover-shadow-8,.hover-shadow-9,.hover-shadow-10{transition:box-shadow .3s ease-in-out}
+.visible{visibility:visible}.collapse{visibility:collapse}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-\[10px\]{gap:10px}.gap-\[8px\]{gap:8px}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.border{border-width:1px}.underline{text-decoration-line:underline}.\!shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1) !important;--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.drop-shadow{--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / .1)) drop-shadow(0 1px 1px rgb(0 0 0 / .06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@font-face{font-family:Pretendard-T;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2) format("woff2");font-weight:100;font-display:swap}@font-face{font-family:Pretendard-EL;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2) format("woff2");font-weight:200;font-display:swap}@font-face{font-family:Pretendard-L;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2) format("woff2");font-weight:300;font-display:swap}@font-face{font-family:Pretendard-R;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Pretendard-M;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2) format("woff2");font-weight:500;font-display:swap}@font-face{font-family:Pretendard-SB;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}@font-face{font-family:Pretendard-B;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2) format("woff2");font-weight:700;font-display:swap}@font-face{font-family:Pretendard-EB;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}@font-face{font-family:Pretendard-Black;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2) format("woff2");font-weight:900;font-display:swap}@font-face{font-family:GmarketSansLight;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff) format("woff");font-display:swap}@font-face{font-family:GmarketSansMedium;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff) format("woff");font-display:swap}@font-face{font-family:GmarketSansBold;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff) format("woff");font-display:swap}@font-face{font-family:SUITE-T;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Thin.woff2) format("woff2");font-weight:100;font-display:swap}@font-face{font-family:SUITE-EL;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraLight.woff2) format("woff2");font-weight:200;font-display:swap}@font-face{font-family:SUITE-L;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2) format("woff2");font-weight:300;font-display:swap}@font-face{font-family:SUITE-R;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:SUITE-M;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2) format("woff2");font-weight:500;font-display:swap}@font-face{font-family:SUITE-SM;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}@font-face{font-family:SUITE-B;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2) format("woff2");font-weight:700;font-display:swap}@font-face{font-family:SUITE-EB;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}@font-face{font-family:SUITE-H;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Heavy.woff2) format("woff2");font-weight:900;font-display:swap}@font-face{font-family:IntelOneMono-Medium;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/intelone-mono-font-family-medium.woff2) format("woff2");font-weight:500;font-display:swap}:where(.sud-root,[class^=sud-],[class*=" sud-"]){box-sizing:border-box;font-family:Pretendard-R,sans-serif}:where(.sud-root,[class^=sud-],[class*=" sud-"]) *,:where(.sud-root,[class^=sud-],[class*=" sud-"]) *:before,:where(.sud-root,[class^=sud-],[class*=" sud-"]) *:after{box-sizing:border-box}:where(.sud-root .codding-font,[class^=sud-].codding-font,[class*=" sud-"].codding-font){font-family:IntelOneMono-Medium,monospace}:where(.sud-root,[class^=sud-],[class*=" sud-"]) a,a:where([class^=sud-],[class*=" sud-"]){color:inherit;text-decoration:none}:where(.sud-root,[class^=sud-],[class*=" sud-"]){scrollbar-width:thin;scrollbar-color:transparent transparent}:where(.sud-root,[class^=sud-],[class*=" sud-"]):hover{scrollbar-color:rgba(0,0,0,.15) transparent}:where(.sud-root,[class^=sud-],[class*=" sud-"])::-webkit-scrollbar,:where(.sud-root,[class^=sud-],[class*=" sud-"]) *::-webkit-scrollbar{width:6px;height:6px;background:transparent}:where(.sud-root,[class^=sud-],[class*=" sud-"])::-webkit-scrollbar-track,:where(.sud-root,[class^=sud-],[class*=" sud-"]) *::-webkit-scrollbar-track{background:transparent}:where(.sud-root,[class^=sud-],[class*=" sud-"])::-webkit-scrollbar-thumb,:where(.sud-root,[class^=sud-],[class*=" sud-"]) *::-webkit-scrollbar-thumb{background-color:transparent;border-radius:6px;-webkit-transition:background-color .2s;transition:background-color .2s}:where(.sud-root,[class^=sud-],[class*=" sud-"]):hover::-webkit-scrollbar-thumb,:where(.sud-root,[class^=sud-],[class*=" sud-"]):hover *::-webkit-scrollbar-thumb{background-color:#00000026}:where(.sud-root,[class^=sud-],[class*=" sud-"])::-webkit-scrollbar-thumb:hover,:where(.sud-root,[class^=sud-],[class*=" sud-"]):hover::-webkit-scrollbar-thumb:hover,:where(.sud-root,[class^=sud-],[class*=" sud-"]):hover *::-webkit-scrollbar-thumb:hover{background-color:#0000004d}.sud-hover{animation:none}.sud-hover:hover{animation:sud-hover-flash-3 1s ease-in-out}.sud-hover-1:hover{animation:sud-hover-flash-1 1s ease-in-out}@keyframes sud-hover-flash-1{0%{filter:brightness(1)}30%{filter:brightness(1.02)}to{filter:brightness(1)}}.sud-hover-2:hover{animation:sud-hover-flash-2 1s ease-in-out}@keyframes sud-hover-flash-2{0%{filter:brightness(1)}30%{filter:brightness(1.04)}to{filter:brightness(1)}}.sud-hover-3:hover{animation:sud-hover-flash-3 1s ease-in-out}@keyframes sud-hover-flash-3{0%{filter:brightness(1)}30%{filter:brightness(1.06)}to{filter:brightness(1)}}.sud-hover-4:hover{animation:sud-hover-flash-4 1s ease-in-out}@keyframes sud-hover-flash-4{0%{filter:brightness(1)}30%{filter:brightness(1.08)}to{filter:brightness(1)}}.sud-hover-5:hover{animation:sud-hover-flash-5 1s ease-in-out}@keyframes sud-hover-flash-5{0%{filter:brightness(1)}30%{filter:brightness(1.1)}to{filter:brightness(1)}}.sud-hover-6:hover{animation:sud-hover-flash-6 1s ease-in-out}@keyframes sud-hover-flash-6{0%{filter:brightness(1)}30%{filter:brightness(1.12)}to{filter:brightness(1)}}.sud-hover-7:hover{animation:sud-hover-flash-7 1s ease-in-out}@keyframes sud-hover-flash-7{0%{filter:brightness(1)}30%{filter:brightness(1.14)}to{filter:brightness(1)}}.sud-hover-8:hover{animation:sud-hover-flash-8 1s ease-in-out}@keyframes sud-hover-flash-8{0%{filter:brightness(1)}30%{filter:brightness(1.16)}to{filter:brightness(1)}}.sud-hover-9:hover{animation:sud-hover-flash-9 1s ease-in-out}@keyframes sud-hover-flash-9{0%{filter:brightness(1)}30%{filter:brightness(1.18)}to{filter:brightness(1)}}.sud-hover-10:hover{animation:sud-hover-flash-10 1s ease-in-out}@keyframes sud-hover-flash-10{0%{filter:brightness(1)}30%{filter:brightness(1.2)}to{filter:brightness(1)}}.hover-scale-1,.hover-scale-2,.hover-scale-3,.hover-scale-4,.hover-scale-5,.hover-scale-6,.hover-scale-7,.hover-scale-8,.hover-scale-9,.hover-scale-10{transition:transform .3s ease-in-out}.hover-scale-1:hover{transform:scale(.9)}.hover-scale-2:hover{transform:scale(.93)}.hover-scale-3:hover{transform:scale(.96)}.hover-scale-4:hover{transform:scale(1)}.hover-scale-5:hover{transform:scale(1.05)}.hover-scale-6:hover{transform:scale(1.08)}.hover-scale-7:hover{transform:scale(1.12)}.hover-scale-8:hover{transform:scale(1.16)}.hover-scale-9:hover{transform:scale(1.2)}.hover-scale-10:hover{transform:scale(1.25)}@keyframes bounce-1{0%{transform:translateY(0)}20%{transform:translateY(-2px)}40%{transform:translateY(1px)}60%{transform:translateY(-0px)}80%{transform:translateY(0)}to{transform:translateY(0)}}.hover-bounce-1:hover{animation:bounce-1 .4s ease-out}@keyframes bounce-2{0%{transform:translateY(0)}20%{transform:translateY(-4px)}40%{transform:translateY(2px)}60%{transform:translateY(-1px)}80%{transform:translateY(0)}to{transform:translateY(0)}}.hover-bounce-2:hover{animation:bounce-2 .4s ease-out}@keyframes bounce-3{0%{transform:translateY(0)}20%{transform:translateY(-6px)}40%{transform:translateY(3px)}60%{transform:translateY(-1px)}80%{transform:translateY(1px)}to{transform:translateY(0)}}.hover-bounce-3:hover{animation:bounce-3 .4s ease-out}@keyframes bounce-4{0%{transform:translateY(0)}20%{transform:translateY(-8px)}40%{transform:translateY(4px)}60%{transform:translateY(-2px)}80%{transform:translateY(1px)}to{transform:translateY(0)}}.hover-bounce-4:hover{animation:bounce-4 .4s ease-out}@keyframes bounce-5{0%{transform:translateY(0)}20%{transform:translateY(-10px)}40%{transform:translateY(5px)}60%{transform:translateY(-2px)}80%{transform:translateY(1px)}to{transform:translateY(0)}}.hover-bounce-5:hover{animation:bounce-5 .4s ease-out}@keyframes bounce-6{0%{transform:translateY(0)}20%{transform:translateY(-12px)}40%{transform:translateY(6px)}60%{transform:translateY(-3px)}80%{transform:translateY(2px)}to{transform:translateY(0)}}.hover-bounce-6:hover{animation:bounce-6 .4s ease-out}@keyframes bounce-7{0%{transform:translateY(0)}20%{transform:translateY(-14px)}40%{transform:translateY(7px)}60%{transform:translateY(-3px)}80%{transform:translateY(2px)}to{transform:translateY(0)}}.hover-bounce-7:hover{animation:bounce-7 .4s ease-out}@keyframes bounce-8{0%{transform:translateY(0)}20%{transform:translateY(-16px)}40%{transform:translateY(8px)}60%{transform:translateY(-4px)}80%{transform:translateY(2px)}to{transform:translateY(0)}}.hover-bounce-8:hover{animation:bounce-8 .4s ease-out}@keyframes bounce-9{0%{transform:translateY(0)}20%{transform:translateY(-18px)}40%{transform:translateY(9px)}60%{transform:translateY(-4px)}80%{transform:translateY(3px)}to{transform:translateY(0)}}.hover-bounce-9:hover{animation:bounce-9 .4s ease-out}@keyframes bounce-10{0%{transform:translateY(0)}20%{transform:translateY(-20px)}40%{transform:translateY(10px)}60%{transform:translateY(-5px)}80%{transform:translateY(3px)}to{transform:translateY(0)}}.hover-bounce-10:hover{animation:bounce-10 .4s ease-out}@keyframes hover-pulse-1{0%{transform:scale(1)}25%{transform:scale(1.02)}50%{transform:scale(.985)}75%{transform:scale(1.01)}to{transform:scale(1)}}.hover-pulse-1:hover{animation:hover-pulse-1 .4s ease-in-out}@keyframes hover-pulse-2{0%{transform:scale(1)}25%{transform:scale(1.04)}50%{transform:scale(.97)}75%{transform:scale(1.02)}to{transform:scale(1)}}.hover-pulse-2:hover{animation:hover-pulse-2 .4s ease-in-out}@keyframes hover-pulse-3{0%{transform:scale(1)}25%{transform:scale(1.06)}50%{transform:scale(.955)}75%{transform:scale(1.03)}to{transform:scale(1)}}.hover-pulse-3:hover{animation:hover-pulse-3 .4s ease-in-out}@keyframes hover-pulse-4{0%{transform:scale(1)}25%{transform:scale(1.08)}50%{transform:scale(.94)}75%{transform:scale(1.04)}to{transform:scale(1)}}.hover-pulse-4:hover{animation:hover-pulse-4 .4s ease-in-out}@keyframes hover-pulse-5{0%{transform:scale(1)}25%{transform:scale(1.1)}50%{transform:scale(.925)}75%{transform:scale(1.05)}to{transform:scale(1)}}.hover-pulse-5:hover{animation:hover-pulse-5 .4s ease-in-out}@keyframes hover-pulse-6{0%{transform:scale(1)}25%{transform:scale(1.12)}50%{transform:scale(.91)}75%{transform:scale(1.06)}to{transform:scale(1)}}.hover-pulse-6:hover{animation:hover-pulse-6 .4s ease-in-out}@keyframes hover-pulse-7{0%{transform:scale(1)}25%{transform:scale(1.14)}50%{transform:scale(.895)}75%{transform:scale(1.07)}to{transform:scale(1)}}.hover-pulse-7:hover{animation:hover-pulse-7 .4s ease-in-out}@keyframes hover-pulse-8{0%{transform:scale(1)}25%{transform:scale(1.16)}50%{transform:scale(.88)}75%{transform:scale(1.08)}to{transform:scale(1)}}.hover-pulse-8:hover{animation:hover-pulse-8 .4s ease-in-out}@keyframes hover-pulse-9{0%{transform:scale(1)}25%{transform:scale(1.18)}50%{transform:scale(.865)}75%{transform:scale(1.09)}to{transform:scale(1)}}.hover-pulse-9:hover{animation:hover-pulse-9 .4s ease-in-out}@keyframes hover-pulse-10{0%{transform:scale(1)}25%{transform:scale(1.2)}50%{transform:scale(.85)}75%{transform:scale(1.1)}to{transform:scale(1)}}.hover-pulse-10:hover{animation:hover-pulse-10 .4s ease-in-out}@keyframes shake-1{0%,to{transform:translate(0)}50%{transform:translate(-1px)}}.hover-shake-1:hover{animation:shake-1 .2s ease-in-out}@keyframes shake-2{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.hover-shake-2:hover{animation:shake-2 .25s ease-in-out}@keyframes shake-3{0%,to{transform:translate(0)}20%{transform:translate(-3px)}50%{transform:translate(3px)}80%{transform:translate(-2px)}}.hover-shake-3:hover{animation:shake-3 .3s ease-in-out}@keyframes shake-4{0%,to{transform:translate(0)}15%{transform:translate(-4px)}30%{transform:translate(4px)}45%{transform:translate(-3px)}60%{transform:translate(3px)}75%{transform:translate(-2px)}}.hover-shake-4:hover{animation:shake-4 .3s ease-in-out}@keyframes shake-5{0%,to{transform:translate(0)}10%{transform:translate(-5px)}20%{transform:translate(5px)}30%{transform:translate(-4px)}40%{transform:translate(4px)}50%{transform:translate(-3px)}60%{transform:translate(3px)}}.hover-shake-5:hover{animation:shake-5 .35s ease-in-out}@keyframes shake-6{0%,to{transform:translate(0)}10%{transform:translate(-6px)}20%{transform:translate(6px)}30%{transform:translate(-5px)}40%{transform:translate(5px)}50%{transform:translate(-4px)}60%{transform:translate(4px)}70%{transform:translate(-3px)}80%{transform:translate(3px)}}.hover-shake-6:hover{animation:shake-6 .4s ease-in-out}@keyframes shake-7{0%,to{transform:translate(0)}8%{transform:translate(-7px)}16%{transform:translate(7px)}24%{transform:translate(-6px)}32%{transform:translate(6px)}40%{transform:translate(-5px)}48%{transform:translate(5px)}56%{transform:translate(-4px)}64%{transform:translate(4px)}72%{transform:translate(-3px)}80%{transform:translate(3px)}}.hover-shake-7:hover{animation:shake-7 .45s ease-in-out}@keyframes shake-8{0%,to{transform:translate(0)}7%{transform:translate(-8px)}14%{transform:translate(8px)}21%{transform:translate(-7px)}28%{transform:translate(7px)}35%{transform:translate(-6px)}42%{transform:translate(6px)}49%{transform:translate(-5px)}56%{transform:translate(5px)}63%{transform:translate(-4px)}70%{transform:translate(4px)}77%{transform:translate(-3px)}84%{transform:translate(3px)}}.hover-shake-8:hover{animation:shake-8 .5s ease-in-out}@keyframes shake-9{0%,to{transform:translate(0)}6%{transform:translate(-9px)}12%{transform:translate(9px)}18%{transform:translate(-8px)}24%{transform:translate(8px)}30%{transform:translate(-7px)}36%{transform:translate(7px)}42%{transform:translate(-6px)}48%{transform:translate(6px)}54%{transform:translate(-5px)}60%{transform:translate(5px)}66%{transform:translate(-4px)}72%{transform:translate(4px)}78%{transform:translate(-3px)}84%{transform:translate(3px)}}.hover-shake-9:hover{animation:shake-9 .55s ease-in-out}@keyframes shake-10{0%,to{transform:translate(0)}5%{transform:translate(-10px)}10%{transform:translate(10px)}15%{transform:translate(-9px)}20%{transform:translate(9px)}25%{transform:translate(-8px)}30%{transform:translate(8px)}35%{transform:translate(-7px)}40%{transform:translate(7px)}45%{transform:translate(-6px)}50%{transform:translate(6px)}55%{transform:translate(-5px)}60%{transform:translate(5px)}65%{transform:translate(-4px)}70%{transform:translate(4px)}75%{transform:translate(-3px)}80%{transform:translate(3px)}85%{transform:translate(-2px)}90%{transform:translate(2px)}}.hover-shake-10:hover{animation:shake-10 .6s ease-in-out}:where(.sud-root .shadow-sm,[class^=sud-].shadow-sm,[class*=" sud-"].shadow-sm){box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}:where(.sud-root .shadow-md,[class^=sud-].shadow-md,[class*=" sud-"].shadow-md){box-shadow:0 4px 6px -1px #00000029,0 2px 4px -1px #0000001f}:where(.sud-root .shadow-lg,[class^=sud-].shadow-lg,[class*=" sud-"].shadow-lg){box-shadow:0 10px 15px -3px #0003,0 4px 6px -2px #0000001f}.hover-shadow-1:hover{box-shadow:0 2px 4px #0000001f!important}.hover-shadow-2:hover{box-shadow:0 4px 6px -1px #00000024,0 2px 4px -1px #0000001a!important}.hover-shadow-3:hover{box-shadow:0 6px 8px -1px #00000029,0 3px 6px -1px #0000001f!important}.hover-shadow-4:hover{box-shadow:0 8px 12px -2px #0000002e,0 4px 8px -2px #0000001f!important}.hover-shadow-5:hover{box-shadow:0 10px 15px -3px #0003,0 4px 6px -2px #0000001f!important}.hover-shadow-6:hover{box-shadow:0 12px 20px -4px #00000038,0 6px 8px -3px #0000001f!important}.hover-shadow-7:hover{box-shadow:0 16px 24px -4px #0000003d,0 8px 12px -4px #0000001f!important}.hover-shadow-8:hover{box-shadow:0 20px 25px -5px #00000042,0 10px 10px -5px #0000001f!important}.hover-shadow-9:hover{box-shadow:0 24px 30px -6px #00000047,0 12px 14px -6px #0000001f!important}.hover-shadow-10:hover{box-shadow:0 30px 40px -8px #0000004d,0 16px 20px -8px #0000001f!important}.hover-shadow-1,.hover-shadow-2,.hover-shadow-3,.hover-shadow-4,.hover-shadow-5,.hover-shadow-6,.hover-shadow-7,.hover-shadow-8,.hover-shadow-9,.hover-shadow-10{transition:box-shadow .3s ease-in-out}

package/dist/index.d.ts

@@ -1,8 +1,11 @@
+export * from "./components/Div/Div.d";
+export * from "./components/SoonUIDesign.d";
 export * from "./components/general/Button.d";
 export * from "./components/general/Typography.d";
 export * from "./components/general/FloatButton.d";
 export * from "./components/dataDisplay/Badge.d";
 export * from "./components/dataDisplay/Accordion.d";
+export { default as Avatar } from "./components/dataDisplay/Avatar.d";
 export * from "./components/dataDisplay/Avatar.d";
 export * from "./components/dataDisplay/Calendar.d";
 export * from "./components/dataDisplay/Card.d";
@@ -15,36 +18,54 @@ export * from "./components/dataDisplay/Modal.d";
 export * from "./components/dataDisplay/Popover.d";
 export * from "./components/dataDisplay/Segmented.d";
 export * from "./components/dataDisplay/Table.d";
+export { default as Timeline } from "./components/dataDisplay/Timeline.d";
 export * from "./components/dataDisplay/Timeline.d";
+export { default as Tabs } from "./components/dataDisplay/Tabs.d";
 export * from "./components/dataDisplay/Tabs.d";
+export { default as Tag } from "./components/dataDisplay/Tag.d";
 export * from "./components/dataDisplay/Tag.d";
 export * from "./components/dataDisplay/Tooltip.d";
+export { default as Checkbox } from "./components/dataEntry/Checkbox.d";
 export * from "./components/dataEntry/Checkbox.d";
+export { default as ColorPicker } from "./components/dataEntry/ColorPicker.d";
 export * from "./components/dataEntry/ColorPicker.d";
+export { default as DatePicker } from "./components/dataEntry/DatePicker.d";
 export * from "./components/dataEntry/DatePicker.d";
+export { default as Input } from "./components/dataEntry/Input.d";
 export * from "./components/dataEntry/Input.d";
+export { default as Radio } from "./components/dataEntry/Radio.d";
 export * from "./components/dataEntry/Radio.d";
+export * from "./components/dataEntry/Rate.d";
+export { default as Select } from "./components/dataEntry/Select.d";
 export * from "./components/dataEntry/Select.d";
+export { default as Slider } from "./components/dataEntry/Slider.d";
 export * from "./components/dataEntry/Slider.d";
+export { default as Switch } from "./components/dataEntry/Switch.d";
 export * from "./components/dataEntry/Switch.d";
+export { default as TimePicker } from "./components/dataEntry/TimePicker.d";
 export * from "./components/dataEntry/TimePicker.d";
 export * from "./components/dataEntry/TimeSelector.d";
 export * from "./components/dataEntry/Upload.d";
 export * from "./components/feedback/Empty.d";
 export * from "./components/feedback/PopConfirm.d";
+export { default as Progress } from "./components/feedback/Progress.d";
 export * from "./components/feedback/Progress.d";
+export { default as Spinner } from "./components/feedback/Spinner.d";
 export * from "./components/feedback/Spinner.d";
+export { default as DotSpinner } from "./components/feedback/DotSpinner.d";
 export * from "./components/feedback/DotSpinner.d";
 export * from "./components/feedback/ToastRoot.d";
 export * from "./components/feedback/NotificationRoot.d";
-export * from "./components/layout/Layout/index.d";
-export * from "./components/layout/Header/index.d";
-export * from "./components/layout/Footer/index.d";
-export * from "./components/layout/Sider/index.d";
-export * from "./components/layout/Content/index.d";
+export * from "./components/layout";
+export { default as Breadcrumb } from "./components/navigation/Breadcrumb.d";
 export * from "./components/navigation/Breadcrumb.d";
+export { default as Pagination } from "./components/navigation/Pagination.d";
 export * from "./components/navigation/Pagination.d";
+export { default as Divider } from "./components/navigation/Divider.d";
 export * from "./components/navigation/Divider.d";
+export { default as Menu } from "./components/navigation/Menu.d";
 export * from "./components/navigation/Menu.d";
+export { default as Dropdown } from "./components/navigation/Dropdown.d";
 export * from "./components/navigation/Dropdown.d";
 export * from "./components/navigation/base/PopupBase.d";
+export * from "./theme";