@telepix-lab/telepix-ui 0.0.1 → 0.1.2

package/README.md

@@ -1,74 +1,107 @@
-# TelePIX UI
+## telepix-ui
 
-텔레픽스 디자인 시스템 반영을 위한 공통 라이브러리 입니다.
+### 프로젝트 개요
 
-## 설치 방법
+- 목적
+  - 텔레픽스 [디자인 시스템](https://www.figma.com/design/YLBhLFHGoA6zBis0W2iU6n/Simple-Design-System?node-id=942-1584&m=dev) 반영을 위한 공통 라이브러리 제작
+  - 불필요하고 반복 작성되는 컴포넌트 개발 공수를 줄여 개발 속도 향상
+- 핵심 기능
+  - 자주 사용되는 공통 컴포넌트를 import하여 자유롭게 컴포넌트 조작
 
-```bash
-# npm
-npm install @telepix-lab/telepix-ui
-
-# yarn
-yarn add @telepix-lab/telepix-ui
-
-# pnpm
-pnpm add @telepix-lab/telepix-ui
-```
+<br/>
 
-## 사용 방법
-
-```jsx
-import { Button, Text } from "@telepix-lab/telepix-ui";
-import "@telepix-lab/telepix-ui/styles.css"; // 스타일 불러오기
-
-function App() {
-  return (
-    <div>
-      <Text size="xl" weight="bold">
-        안녕하세요, TelePIX UI입니다!
-      </Text>
-      <Button variant="primary" size="md">
-        버튼
-      </Button>
-    </div>
-  );
-}
-```
+### 기술 스택
 
-## tailwindcss와 사용하는 경우
+- TypeScript
+- React
+- [Stylex](https://stylexjs.com/)
+- [Storybook](https://storybook.js.org/docs)
+- [Radix-ui Primitives](https://www.radix-ui.com/primitives)
+- [react-day-picker](https://daypicker.dev/)
+- [dayjs](https://day.js.org/)
 
-tailwind를 import하는 css보다 telepix-ui css가 더 먼저 정의되어있어야 합니다.
-`import "@telepix-lab/telepix-ui/styles.css";`
 <br/>
 
-tailwindcss와 사용하는 경우에 `@import "tailwindcss"` 대신에 아래와 같이 적용합니다.
-tailwindcss/preflight로 인하여 디자인 시스템의 디자인이 적용되지 않을 수 있어 주의합니다.
+### 디렉터리 구조
 
-```
-@layer theme, base, components, utilities;
-@import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities);
-// @import "tailwindcss/preflight.css" 제외
+```bash
+📦 .storybook
+ ┣ 📜 index.css
+ ┣ 📜 main.ts
+ ┣ 📜 preview.jsx
+ ┗ 📜 props-table.tsx
+ 📦 src
+ ┣ 📂 autocomplete
+ ┣ 📂 button
+ ┣ 📂 calendar
+ ┣ 📂 card
+ ┣ 📂 checkbox
+ ┣ 📂 context-menu
+ ┣ 📂 data-table
+ ┣ 📂 date-picker
+ ┣ 📂 dialog
+ ┣ 📂 horizontal-tab
+ ┣ 📂 input
+ ┣ 📂 interactive-list-item
+ ┣ 📂 mode-tab
+ ┣ 📂 multiple-select
+ ┣ 📂 pagination
+ ┣ 📂 radio-group
+ ┣ 📂 select
+ ┣ 📂 styles
+ ┣ 📂 table
+ ┣ 📂 tag
+ ┣ 📂 text
+ ┣ 📂 textarea
+ ┣ 📂 tooltip
+ ┣ 📂 vertical-menu
+ ┣ 📜 GettingStarted.mdx
+ ┣ 📜 index.ts
+ ┗ 📜 tailwind.css
+ 📜 eslint.config.js
+ 📜 package.json
+ 📜 pnpm-lock.yaml
+ 📜 postcss.config.js
+ 📜 prettier.config.mjs
+ 📜 README.md
+ 📜 rollup.config.js
+ 📜 tailwind.config.js
+ 📜 tsconfig.build.json
+ 📜 tsconfig.json
 ```
 
-## 개발
+<br/>
 
-각 컴포넌트의 사용방법은 storybook을 실행하여 확인합니다.
+### 설치 및 실행 방법
 
 ```bash
-# 개발 모드 실행
-pnpm dev
+# 의존성 설치
+pnpm install
 
 # 스토리북 실행
-pnpm storybook
+npm run storybook
+```
 
-# 빌드
-pnpm build
+<br/>
 
-# 테스트
-pnpm test
+### Design System 링크
+
+- [Simple Design System](https://www.figma.com/design/YLBhLFHGoA6zBis0W2iU6n/Simple-Design-System?node-id=942-752&m=dev)
+
+<br/>
+
+### 배포 관련 정보
+
+배포 시, 아래와 같이 package.json의 version을 올리고 push를 하게 되면, Pipeline에 의해 자동으로 배포됩니다.
+
+```bash
+npm version patch    # 또는 minor / major
+
+git push origin main --follow-tags
 ```
 
-## 라이센스
+<br/>
+
+### 커밋 메세지 컨벤션
 
-ISC
+커밋 메세지 컨벤션은 [frontend 코드 컨벤션](https://telepix.atlassian.net/wiki/spaces/SDT/pages/1676968101)을 따릅니다.

package/dist/cjs/autocomplete/index.d.ts

@@ -0,0 +1,16 @@
+interface AutocompleteProps<T> {
+    placeholder?: string;
+    data: T[];
+    value?: string;
+    displayValue: (item: T) => string;
+    onSelect?: (selectedItem: T | null) => void;
+    onChange?: (value: string) => void;
+    noResultsMessage?: string;
+    maxResults?: number;
+    debounceTime?: number;
+    wrapperClassName?: string;
+    contentClassName?: string;
+    itemClassName?: string;
+}
+export declare const Autocomplete: <T>({ placeholder, data, value, displayValue, onSelect, onChange, noResultsMessage, maxResults, debounceTime, wrapperClassName, contentClassName, itemClassName, }: AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/autocomplete/styles.d.ts

@@ -0,0 +1,50 @@
+export declare const autocompleteStyles: Readonly<{
+    readonly wrapper: Readonly<{
+        readonly position: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"position", "relative">;
+    }>;
+    readonly content: Readonly<{
+        readonly position: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"position", "absolute">;
+        readonly top: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"top", "calc(100% - 10px)">;
+        readonly left: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"left", 0>;
+        readonly zIndex: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"zIndex", 20>;
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "8px">;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly boxShadow: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"boxShadow", string>;
+        readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", `1px solid ${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>}`>;
+        readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", "8px">;
+        readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "calc(100% - 16px)">;
+    }>;
+    readonly item: Readonly<{
+        readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", "4px">;
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "8px">;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+        readonly listStyleType: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"listStyleType", "none">;
+        readonly ":hover": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":hover", {
+            readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+        }>;
+    }>;
+    readonly highlight: Readonly<{
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+    }>;
+    readonly matched: Readonly<{
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+    }>;
+    readonly noResults: Readonly<{
+        readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", "4px">;
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "8px">;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+        readonly listStyleType: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"listStyleType", "none">;
+        readonly textAlign: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"textAlign", "center">;
+    }>;
+}>;

package/dist/cjs/calendar/index.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { DayPicker } from "react-day-picker";
+import "react-day-picker/style.css";
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+export declare const Calendar: ({ className, classNames, showOutsideDays, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/calendar/styles.d.ts

@@ -0,0 +1,103 @@
+export declare const calendarStyles: Readonly<{
+    readonly months: Readonly<{
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "12px">;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", `1px solid ${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>}`>;
+        readonly boxShadow: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"boxShadow", string>;
+        readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", "8px">;
+        readonly position: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"position", "relative">;
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly flexWrap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"flexWrap", "wrap">;
+        readonly gap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"gap", "var(--rdp-months-gap)">;
+        readonly maxWidth: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"maxWidth", "fit-content">;
+    }>;
+    readonly monthCaption: Readonly<{
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
+        readonly marginBottom: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"marginBottom", "16px">;
+        readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "var(--rdp-nav-height)">;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", "bold">;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", "large">;
+        readonly marginInlineStart: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"marginInlineStart", "var(--rdp-nav_button-width)">;
+        readonly marginInlineEnd: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"marginInlineEnd", "var(--rdp-nav_button-width)">;
+        readonly position: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"position", "relative">;
+    }>;
+    readonly captionLabel: Readonly<{
+        readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "28px">;
+        readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+        readonly zIndex: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"zIndex", 1>;
+        readonly position: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"position", "relative">;
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "inline-flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly whiteSpace: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"whiteSpace", "nowrap">;
+        readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", 0>;
+    }>;
+    readonly navButton: Readonly<{
+        readonly stroke: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"stroke", string>;
+        readonly ":is([data-orientation='right'])": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":is([data-orientation='right'])", {
+            readonly transform: "rotate(180deg)";
+        }>;
+    }>;
+    readonly monthGrid: Readonly<{
+        readonly borderSpacing: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderSpacing", "0 8px">;
+        readonly borderCollapse: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderCollapse", "separate">;
+    }>;
+    readonly weekday: Readonly<{
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+        readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "32px">;
+        readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "32px">;
+    }>;
+    readonly day: Readonly<{
+        readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", "6px">;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+        readonly ":not(:is([data-selected='true']))": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":not(:is([data-selected='true']))", {
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+        }>;
+        readonly ":hover:not(:is([data-selected='true']))": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":hover:not(:is([data-selected='true']))", {
+            readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            readonly cursor: "pointer";
+        }>;
+    }>;
+    readonly selected: Readonly<{
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly rangeStart: Readonly<{
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", `${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>} !important`>;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", `${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>} !important`>;
+        readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", "6px 0 0 6px !important">;
+        readonly ":is(.range-end)": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":is(.range-end)", {
+            readonly borderRadius: "6px !important";
+        }>;
+    }>;
+    readonly rangeEnd: Readonly<{
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", `${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>} !important`>;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", `${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>} !important`>;
+        readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", "0 6px 6px 0 !important">;
+    }>;
+    readonly rangeMiddle: Readonly<{
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", `${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>} !important`>;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", `${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>} !important`>;
+        readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", "0 !important">;
+    }>;
+    readonly outside: Readonly<{
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", `${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>} !important`>;
+        readonly ":hover": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":hover", {
+            readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            readonly cursor: "pointer";
+        }>;
+    }>;
+}>;

package/dist/cjs/card/styles.d.ts

@@ -4,7 +4,6 @@ export declare const cardStyles: Readonly<{
         readonly flexDirection: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"flexDirection", "column">;
         readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", string>;
         readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", `1px solid ${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>}`>;
-        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", string>;
         readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
     }>;
 }>;

package/dist/cjs/context-menu/index.d.ts

@@ -0,0 +1,21 @@
+import { ContextMenu as ContextMenuRadix } from "radix-ui";
+export declare const ContextMenu: import("react").FC<ContextMenuRadix.ContextMenuProps>;
+export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<ContextMenuRadix.ContextMenuTriggerProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const ContextMenuContent: (props: React.ComponentProps<typeof ContextMenuRadix.Content>) => import("react/jsx-runtime").JSX.Element;
+export declare const ContextMenuArrow: import("react").ForwardRefExoticComponent<ContextMenuRadix.ContextMenuArrowProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ContextMenuLabel: (props: React.ComponentProps<typeof ContextMenuRadix.Label>) => import("react/jsx-runtime").JSX.Element;
+interface ContextMenuItemProps extends Omit<React.ComponentProps<typeof ContextMenuRadix.Item>, "children"> {
+    leftIcon?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+}
+export declare const ContextMenuItem: ({ leftIcon, rightSlot, textValue, ...rest }: ContextMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContextMenuGroup: import("react").ForwardRefExoticComponent<ContextMenuRadix.ContextMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSub: import("react").FC<ContextMenuRadix.ContextMenuSubProps>;
+export declare const ContextMenuSubTrigger: import("react").ForwardRefExoticComponent<ContextMenuRadix.ContextMenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSubContent: (props: React.ComponentProps<typeof ContextMenuRadix.SubContent>) => import("react/jsx-runtime").JSX.Element;
+export declare const ContextMenuSeparator: (props: React.ComponentProps<typeof ContextMenuRadix.Separator>) => import("react/jsx-runtime").JSX.Element;
+export declare const ContextMenuCheckboxItem: import("react").ForwardRefExoticComponent<ContextMenuRadix.ContextMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuRadioGroup: import("react").ForwardRefExoticComponent<ContextMenuRadix.ContextMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuRadioItem: import("react").ForwardRefExoticComponent<ContextMenuRadix.ContextMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuItemIndicator: (props: React.ComponentProps<typeof ContextMenuRadix.ItemIndicator>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/context-menu/styleVariable.stylex.d.ts

@@ -0,0 +1,4 @@
+import * as stylex from "@stylexjs/stylex";
+export declare const styleVariable: stylex.VarGroup<Readonly<{
+    childColor: string;
+}>, symbol>;

package/dist/cjs/context-menu/styles.d.ts

@@ -0,0 +1,103 @@
+export declare const contextMenuContentStyles: Readonly<{
+    readonly content: Readonly<{
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "8px">;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly boxShadow: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"boxShadow", string>;
+        readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", `1px solid ${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>}`>;
+        readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", "8px">;
+        readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "320px">;
+    }>;
+    readonly item: Readonly<{
+        readonly [x: string]: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<string, string | {
+            readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            readonly cursor?: undefined;
+            readonly default?: undefined;
+            readonly ":hover:not(:is([data-disabled]))"?: undefined;
+            readonly ":active:not(:is([data-disabled]))"?: undefined;
+            readonly ':is([data-state="open"])'?: undefined;
+            readonly ":is([data-disabled])"?: undefined;
+        } | {
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            readonly cursor: "not-allowed";
+            readonly default?: undefined;
+            readonly ":hover:not(:is([data-disabled]))"?: undefined;
+            readonly ":active:not(:is([data-disabled]))"?: undefined;
+            readonly ':is([data-state="open"])'?: undefined;
+            readonly ":is([data-disabled])"?: undefined;
+        }>;
+        readonly outline: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"outline", "none">;
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "8px">;
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "space-between">;
+        readonly gap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"gap", "8px">;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", `1px solid ${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>}`>;
+        readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", "4px">;
+        readonly ":hover:not(:is([data-disabled]))": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":hover:not(:is([data-disabled]))", {
+            readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+        }>;
+        readonly ":active:not(:is([data-disabled]))": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":active:not(:is([data-disabled]))", {
+            readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+        }>;
+        readonly ":is([data-state='open'])": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":is([data-state='open'])", {
+            readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+        }>;
+        readonly ":is([data-disabled])": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":is([data-disabled])", {
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            readonly cursor: "not-allowed";
+        }>;
+    }>;
+    readonly itemContent: Readonly<{
+        readonly flex: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"flex", 1>;
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly gap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"gap", "8px">;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", "inherit">;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", "inherit">;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", "inherit">;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", "inherit">;
+        readonly overflow: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"overflow", "hidden">;
+    }>;
+    readonly textValue: Readonly<{
+        readonly textOverflow: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"textOverflow", "ellipsis">;
+        readonly overflow: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"overflow", "hidden">;
+        readonly whiteSpace: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"whiteSpace", "nowrap">;
+    }>;
+    readonly leftIcon: Readonly<{
+        readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "16px">;
+        readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "16px">;
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", "inherit">;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", "inherit">;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", "inherit">;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", "inherit">;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", "transparent">;
+    }>;
+    readonly rightSlot: Readonly<{
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", "inherit">;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", "inherit">;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", "inherit">;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+    }>;
+    readonly separator: Readonly<{
+        readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "1px">;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly margin: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"margin", "4px 0">;
+    }>;
+}>;

package/dist/cjs/data-table/index.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+/** table 기반 config로 테이블 완성 component */
+interface TableInfo<T> {
+    header: string;
+    renderFn: (item: T) => React.ReactNode;
+    minWidth?: number;
+    maxWidth?: number;
+    showTooltip?: boolean;
+}
+export type DataTableConfig<T> = TableInfo<T>[];
+export interface DataTableProps<T> {
+    config: DataTableConfig<T>;
+    data: T[];
+    emptyMessage?: string;
+    onRowClick?: (item: T) => void;
+    enableSelection?: boolean;
+    shouldLastBorderRender?: boolean;
+    classNames?: {
+        table?: string;
+        header?: string;
+        head?: string;
+        body?: string;
+        row?: string;
+        cell?: string;
+    };
+    refs?: {
+        tableRef?: React.Ref<HTMLTableElement>;
+        headerRef?: React.Ref<HTMLTableRowElement>;
+        bodyRef?: React.Ref<HTMLTableSectionElement>;
+        rowRef?: React.Ref<HTMLTableRowElement>;
+        cellRef?: React.Ref<HTMLTableCellElement>;
+        headRef?: React.Ref<HTMLTableCellElement>;
+    };
+}
+export declare const DataTable: <T extends object>({ config, data, emptyMessage, onRowClick, enableSelection, shouldLastBorderRender, classNames, refs, }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/date-picker/index.d.ts

@@ -0,0 +1,16 @@
+import { Popover } from "radix-ui";
+import { CalendarProps } from "../calendar";
+import { DateRange } from "react-day-picker";
+type AllDatePickerTypes = Date | undefined | DateRange | Date[];
+interface DatePicker {
+    size: "regular" | "large";
+    placeholder?: string;
+    format?: string;
+    value?: AllDatePickerTypes;
+    onChange?: (date: AllDatePickerTypes) => void;
+    isInstantClose?: boolean;
+    disabled?: boolean;
+}
+export type DatePickerProps = DatePicker & CalendarProps & Popover.PopoverProps & Popover.PopoverContentProps;
+export declare const DatePicker: ({ size, placeholder, format, value, mode, onChange, isInstantClose, open: openProp, onOpenChange: onOpenChangeProp, disabled, ...rest }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/date-picker/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const datePickerStyles: Readonly<{
+    readonly wrapper: Readonly<{
+        readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "start">;
+    }>;
+}>;

package/dist/cjs/index.css

@@ -0,0 +1 @@
+.rdp-root{--rdp-accent-color:blue;--rdp-accent-background-color:#f0f0ff;--rdp-day-height:44px;--rdp-day-width:44px;--rdp-day_button-border-radius:100%;--rdp-day_button-border:2px solid transparent;--rdp-day_button-height:42px;--rdp-day_button-width:42px;--rdp-selected-border:2px solid var(--rdp-accent-color);--rdp-disabled-opacity:0.5;--rdp-outside-opacity:0.75;--rdp-today-color:var(--rdp-accent-color);--rdp-dropdown-gap:0.5rem;--rdp-months-gap:2rem;--rdp-nav_button-disabled-opacity:0.5;--rdp-nav_button-height:2.25rem;--rdp-nav_button-width:2.25rem;--rdp-nav-height:2.75rem;--rdp-range_middle-background-color:var(--rdp-accent-background-color);--rdp-range_middle-color:inherit;--rdp-range_start-color:#fff;--rdp-range_start-background:linear-gradient(var(--rdp-gradient-direction),transparent 50%,var(--rdp-range_middle-background-color) 50%);--rdp-range_start-date-background-color:var(--rdp-accent-color);--rdp-range_end-background:linear-gradient(var(--rdp-gradient-direction),var(--rdp-range_middle-background-color) 50%,transparent 50%);--rdp-range_end-color:#fff;--rdp-range_end-date-background-color:var(--rdp-accent-color);--rdp-week_number-border-radius:100%;--rdp-week_number-border:2px solid transparent;--rdp-week_number-height:var(--rdp-day-height);--rdp-week_number-opacity:0.75;--rdp-week_number-width:var(--rdp-day-width);--rdp-weeknumber-text-align:center;--rdp-weekday-opacity:0.75;--rdp-weekday-padding:0.5rem 0rem;--rdp-weekday-text-align:center;--rdp-gradient-direction:90deg;--rdp-animation_duration:0.3s;--rdp-animation_timing:cubic-bezier(0.4,0,0.2,1)}.rdp-root[dir=rtl]{--rdp-gradient-direction:-90deg}.rdp-root[data-broadcast-calendar=true]{--rdp-outside-opacity:unset}.rdp-root{position:relative}.rdp-root,.rdp-root *{box-sizing:border-box}.rdp-day{height:var(--rdp-day-height);text-align:center;width:var(--rdp-day-width)}.rdp-day_button{align-items:center;background:none;border:var(--rdp-day_button-border);border-radius:var(--rdp-day_button-border-radius);color:inherit;cursor:pointer;display:flex;font:inherit;height:var(--rdp-day_button-height);justify-content:center;margin:0;padding:0;width:var(--rdp-day_button-width)}.rdp-day_button:disabled{cursor:revert}.rdp-caption_label{align-items:center;border:0;display:inline-flex;position:relative;white-space:nowrap;z-index:1}.rdp-dropdown:focus-visible~.rdp-caption_label{outline:5px auto Highlight;outline:5px auto -webkit-focus-ring-color}.rdp-button_next,.rdp-button_previous{align-items:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:none;border:none;color:inherit;cursor:pointer;display:inline-flex;font:inherit;height:var(--rdp-nav_button-height);justify-content:center;margin:0;padding:0;position:relative;width:var(--rdp-nav_button-width)}.rdp-button_next:disabled,.rdp-button_next[aria-disabled=true],.rdp-button_previous:disabled,.rdp-button_previous[aria-disabled=true]{cursor:revert;opacity:var(--rdp-nav_button-disabled-opacity)}.rdp-chevron{fill:var(--rdp-accent-color);display:inline-block}.rdp-root[dir=rtl] .rdp-nav .rdp-chevron{transform:rotate(180deg);transform-origin:50%}.rdp-dropdowns{align-items:center;display:inline-flex;gap:var(--rdp-dropdown-gap);position:relative}.rdp-dropdown{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:inherit;inset-block-end:0;inset-block-start:0;inset-inline-start:0;line-height:inherit;margin:0;opacity:0;padding:0;position:absolute;width:100%;z-index:2}.rdp-dropdown_root{align-items:center;display:inline-flex;position:relative}.rdp-dropdown_root[data-disabled=true] .rdp-chevron{opacity:var(--rdp-disabled-opacity)}.rdp-month_caption{align-content:center;display:flex;font-size:large;font-weight:700;height:var(--rdp-nav-height)}.rdp-root[data-nav-layout=after] .rdp-month,.rdp-root[data-nav-layout=around] .rdp-month{position:relative}.rdp-root[data-nav-layout=around] .rdp-month_caption{justify-content:center;margin-inline-end:var(--rdp-nav_button-width);margin-inline-start:var(--rdp-nav_button-width);position:relative}.rdp-root[data-nav-layout=around] .rdp-button_previous{display:inline-flex;height:var(--rdp-nav-height);inset-inline-start:0;position:absolute;top:0}.rdp-root[data-nav-layout=around] .rdp-button_next{display:inline-flex;height:var(--rdp-nav-height);inset-inline-end:0;justify-content:center;position:absolute;top:0}.rdp-months{display:flex;flex-wrap:wrap;gap:var(--rdp-months-gap);max-width:-moz-fit-content;max-width:fit-content;position:relative}.rdp-month_grid{border-collapse:collapse}.rdp-nav{align-items:center;display:flex;height:var(--rdp-nav-height);inset-block-start:0;inset-inline-end:0;position:absolute}.rdp-weekday{font-size:smaller;font-weight:500;opacity:var(--rdp-weekday-opacity);padding:var(--rdp-weekday-padding);text-align:var(--rdp-weekday-text-align);text-transform:var(--rdp-weekday-text-transform)}.rdp-week_number{border:var(--rdp-week_number-border);border-radius:var(--rdp-week_number-border-radius);font-size:small;font-weight:400;height:var(--rdp-week_number-height);opacity:var(--rdp-week_number-opacity);text-align:var(--rdp-weeknumber-text-align);width:var(--rdp-week_number-width)}.rdp-today:not(.rdp-outside){color:var(--rdp-today-color)}.rdp-selected{font-size:large;font-weight:700}.rdp-selected .rdp-day_button{border:var(--rdp-selected-border)}.rdp-outside{opacity:var(--rdp-outside-opacity)}.rdp-disabled{opacity:var(--rdp-disabled-opacity)}.rdp-hidden{color:var(--rdp-range_start-color);visibility:hidden}.rdp-range_start{background:var(--rdp-range_start-background)}.rdp-range_start .rdp-day_button{background-color:var(--rdp-range_start-date-background-color);color:var(--rdp-range_start-color)}.rdp-range_middle{background-color:var(--rdp-range_middle-background-color)}.rdp-range_middle .rdp-day_button{border:unset;border-radius:unset;color:var(--rdp-range_middle-color)}.rdp-range_end{background:var(--rdp-range_end-background);color:var(--rdp-range_end-color)}.rdp-range_end .rdp-day_button{background-color:var(--rdp-range_end-date-background-color);color:var(--rdp-range_start-color)}.rdp-range_start.rdp-range_end{background:revert}.rdp-focusable{cursor:pointer}@keyframes rdp-slide_in_left{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes rdp-slide_in_right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes rdp-slide_out_left{0%{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes rdp-slide_out_right{0%{transform:translateX(0)}to{transform:translateX(100%)}}.rdp-weeks_before_enter{animation:rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}.rdp-weeks_before_exit{animation:rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}.rdp-weeks_after_enter{animation:rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}.rdp-weeks_after_exit{animation:rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}.rdp-root[dir=rtl] .rdp-weeks_after_enter{animation:rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}.rdp-root[dir=rtl] .rdp-weeks_before_exit{animation:rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}.rdp-root[dir=rtl] .rdp-weeks_before_enter{animation:rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}.rdp-root[dir=rtl] .rdp-weeks_after_exit{animation:rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}@keyframes rdp-fade_in{0%{opacity:0}to{opacity:1}}@keyframes rdp-fade_out{0%{opacity:1}to{opacity:0}}.rdp-caption_after_enter{animation:rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}.rdp-caption_after_exit{animation:rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}.rdp-caption_before_enter{animation:rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}.rdp-caption_before_exit{animation:rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards}