@lotte-innovate/ui-component-test 0.0.47 → 0.0.49

package/README.md

@@ -1,88 +1,62 @@
-# LOTTE UI COMPONENT LIBRARY
+# 🎨 LOTTE UI LIBRARY (L-UI)
 
 <br />
 
-## 목차
+## 📌목차
 
-- [Introduction](#introduction)
-- [Installation](#installation)
-- [Setup](#setup)
-- [Usage](#usage)
-- [Components](#components)
-- [License](#license)
+- [💁 소개](#소개)
+- [🔨 기술스택](#기술스택)
+- [💻 사전설치](#사전설치)
+- [🟢 실행](#실행)
+- [🛠️ 배포](#배포)
+- [📁 구조](#구조)
 
-## Introduction
-
-모든 L-UI 구성 요소를 내보내는 단일 패키지입니다.
-
-일관되고 통일된 컴포넌트를 제공하며 사용자 정의 및 재사용 가능합니다.
-
-이 라이브러리는 React로 구축된 프로젝트를 지원합니다.
-
-## Installation
-
-패키지를 설치하기 위해 아래 명령어를 사용합니다.
-
-```bash
-  npm i @lotte-innovate/lui
-```
-
-```bash
-  yarn add @lotte-innovate/lui
-```
+<br />
 
-## Setup
+## 💁소개
 
-패키지를 설치한 후 css 스타일을 프로젝트로 가져옵니다.
+<b>Lotte Innovate 디자인 가이드를 적용한 전사 표준 UI 라이브러리입니다.</b>
 
-프로젝트 App 진입 파일에 다음 줄을 추가해줍니다.
+#### 주요 특징
 
-```
-  import '@lotte-innovate/lui/dist/globals.css';
-```
+- <b>웹 표준 및 접근성 준수</b>
 
-## Usage
+  - Headless UI Library인 radix-ui를 사용하여 웹 접근성을 보장합니다.
+  - 정부 UI/UX 가이드라인을 준수하여 개발되었습니다.
 
-React 프로젝트에서 컴포넌트를 사용하는 방법에 대한 예시입니다.
+- <b>다양한 컴포넌트</b>
 
-```javascript
-import React from 'react';
-import { Button } from '@lotte-innovate/lui';
+  - 45가지의 UI 컴포넌트와 6가지의 차트를 제공합니다.
 
-const App = () => {
-  return (
-    <div>
-      <Button onClick={() => alert('Button clicked!')}>Click Me</Button>
-    </div>
-  );
-};
+- <b>일관된 디자인</b>
 
-export default App;
-```
+  - 모든 컴포넌트와 차트에 공통 Props (Color, Radius, Scaling, Weight, Appearance, Size)를 적용하여 디자인의 통일성을 유지합니다.
+  - 다크모드에서도 표준화된 색상을 적용하여 모든 컴포넌트에 일관되게 적용욉니다.
+  - [피그마 디자인 가이드 바로가기](https://www.figma.com/design/tlcB7UYdvUNzPk5T66FqLf/UI-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EA%B3%B5%EC%9C%A0%EC%9A%A9?node-id=0-1&node-type=canvas&t=PEwpe2j6PilPTwXC-0)
 
-컴포넌트에서 아이콘을 사용하려면, 다음과 같은 방법으로 아이콘을 가져올 수 있습니다.
+- <b>스토리북 통합</b>
 
-```javascript
-import React from 'react';
-import { IconButton } from '@lotte-innovate/lui';
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+  - Storybook을 활용하여 컴포넌트를 문서화하고 테스트할 수 있습니다.
+  - [스토리북 바로가기](https://66849ef80cb87f1ca900f051-tqldgzbipz.chromatic.com/?path=/docs/welcome--docs)
 
-const App = () => {
-  return (
-    <div>
-      <IconButton>
-        <MagnifyingGlassIcon />
-      </IconButton>
-    </div>
-  );
-};
+- <b>npm 패키지 배포</b>
+  - 디자인 시스템은 npm 패키지로 배포되어, 프로젝트에 쉽게 설치하고 사용할 수 있습니다.
+  - [NPM 패키지 바로가기](https://www.npmjs.com/package/@lotte-innovate/lui)
 
-export default App;
-```
+<br />
+<details>
+  <summary>공통 Props 목록</summary>
 
-## Components
+| name       | description                                       | 단계     | option                                        |
+| ---------- | ------------------------------------------------- | -------- | --------------------------------------------- |
+| Color      | 27가지 색상을 라이트/다크/알파/알파다크 모드 제공 | 1~12단계 | blue, crimson, teal, orange, purple, amber... |
+| Radius     | 컴포넌트의 둥글기 적용                            | 5단계    | none, small, medium, large, full              |
+| Scaling    | 컴포넌트의 비율                                   | 5단계    | 90%, 95%, 100%, 105%, 110%                    |
+| Weight     | 컴포넌트의 텍스트 굵기                            | 4단계    | regular, medium, semibold, bold               |
+| Appearance | 컴포넌트의 디자인 스타일                          | 6단계    | classic, ghost, outline, soft, solid, surface |
+| Size       | 컴포넌트의 크기                                   | 5단계    | x-small, small, medium, large, x-large        |
 
-<br />
+</details>
 
 <details>
   <summary>컴포넌트 목록</summary>
@@ -112,22 +86,251 @@ export default App;
 
 </details>
 
-<details>
-  <summary>공통 Props 목록</summary>
+<br />
 
-| name       | description                                       | 단계     | option                                        |
-| ---------- | ------------------------------------------------- | -------- | --------------------------------------------- |
-| Color      | 27가지 색상을 라이트/다크/알파/알파다크 모드 제공 | 1~12단계 | blue, crimson, teal, orange, purple, amber... |
-| Radius     | 컴포넌트의 둥글기 적용                            | 5단계    | none, small, medium, large, full              |
-| Scaling    | 컴포넌트의 비율                                   | 5단계    | 90%, 95%, 100%, 105%, 110%                    |
-| Weight     | 컴포넌트의 텍스트 굵기                            | 4단계    | regular, medium, semibold, bold               |
-| Appearance | 컴포넌트의 디자인 스타일                          | 6단계    | classic, ghost, outline, soft, solid, surface |
-| Size       | 컴포넌트의 크기                                   | 5단계    | x-small, small, medium, large, x-large        |
+#### 스토리북 주요 화면
+
+<div>
+  <div>
+    <p>Light, Dark Color</p>
+    <img src="/uploads/6ff420bc359758218c69e3fdabd9ec38/color.png" width="40%" />&nbsp;
+    <img src="/uploads/5c6296dc810dd5668330520057a094f4/color-dark.png" width="40%" />
+  </div>
+  <div>
+    <p>Header, Checkbox Component</p>
+    <img src="/uploads/8a01ff02586bf822f17e3f06f70f1857/header.png" width="40%" />&nbsp;
+    <img src="/uploads/a44c67d88d699d84dcb38a16900a2654/checkbox.png" width="40%" />
+  </div>
+  <div>
+    <p>SegmentedControl, Doughnutchart Component</p>
+    <img src="/uploads/54d0265e45325d56a8f5df5a947560d4/segmented.png" width="40%" />&nbsp;
+    <img src="/uploads/1e2d25043446da8c67ce62334043618b/doughnut-chart.png" width="40%" />
+  </div>
+  <div>
+    <p>Dark 모드일때 ToggleGroup, Dropdown Component</p>
+    <img src="/uploads/059d20ecfbc22f0864f4b769f30a1723/dark-toggle.png" width="40%" />&nbsp;
+    <img src="/uploads/d4b7006f59bb35a166105dad34ee232f/dark-dropdown.png" width="40%" />
+  </div>
+</div>
 
-</details>
+<br />
+
+## 🔨기술스택
+
+#### Environment
+
+![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-007ACC?style=for-the-badge&logo=Visual%20Studio%20Code&logoColor=white)
+![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=Git&logoColor=white)
+![Github](https://img.shields.io/badge/Gitlab-FC6D26?style=for-the-badge&logo=GitLab&logoColor=white)
+
+#### Config
+
+![npm](https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white)
+
+#### Development
+
+![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=Javascript&logoColor=white)
+![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
+![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=Next.js&logoColor=white)
+![tailwind CSS](https://img.shields.io/badge/TailwindCSS-06B6D4?style=for-the-badge&logo=TailwindCSS&logoColor=white)
+![storybook](https://img.shields.io/badge/storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)
+
+#### Communication
+
+![Figma](https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=Figma&logoColor=white)
+![Github Issues](https://img.shields.io/badge/Github%20Issues-FC6D26?style=for-the-badge&logo=GitLab&logoColor=white)
+
+#### Reference
+
+![RadixUI](https://img.shields.io/badge/Radix%20UI-161618?style=for-the-badge&logo=RadixUI&logoColor=white)
+![Chartjs](https://img.shields.io/badge/Chart.js-FF6384?style=for-the-badge&logo=Chart.js&logoColor=white)
+
+<br />
+
+## 💻사전설치
+
+이 라이브러리는 React로 구축된 프로젝트를 지원하며 주요 사전 설치 라이브러리는 아래와 같습니다.
+
+- radix-ui/primitives
+  - 컴포넌트 개발 시 활용할 라이브러리로 필요한 컴포넌트 별 설치
+
+```shell
+npm install @radix-ui/react-accordion@latest -E
+```
+
+- radix-ui/theme
+  - 일부 컴포넌트는 스타일이 적용된 theme 라이브러리 설치
+
+```shell
+npm install @radix-ui/themes -E
+```
+
+- chart.js
+  - 차트 컴포넌트 개발 시 활용
+
+```shell
+npm install chart.js
+```
+
+- storybook
+  - 컴포넌트 디자인 테스트를 위해 설치
+
+```shell
+npx sb init
+npx storybook@latest add @storybook/addon-styling-webpack
+```
+
+- clsx
+  - 조건부 className 작성을 위해 사용
+
+```shell
+npm i clsx
+```
+
+- tailwind-merge
+  - 스타일 충돌 없이 자바스크립트에서 tailwind CSS 클래스를 효율적으로 병합하는 기능을 가진 라이브러리
+
+```shell
+npm i tailwind-merge
+```
+
+- class-variance-authority (CVA)
+  - 일관성 있는 UI를 정의하고 사용할 수 있도록 도와주는 툴로써 shadcn/ui 컴포넌트의 핵심 도구
+
+```shell
+npm i class-variance-authority
+```
 
 <br />
 
-## License
+## 🟢실행
+
+- 개발모드 실행
+
+```shell
+npm run dev
+```
+
+- 스토리북 실행
+
+```shell
+npm run storybook
+```
+
+> 접속주소(포트 6006 사용 시): `http://localhost:6006`
+
+- 크로마틱 배포
+  - 터미널에서 크로마틱으로 배포된 주소 확인 가능
+
+```shell
+npm run chromatic
+```
 
-@lotte-innovate
+- 빌드
+  - 패키지 배포없이 스토리북과 컴포넌트 빌드가 필요할때 사용
+
+```shell
+npm run build:all
+```
+
+<br />
+
+## 🛠️배포
+
+> NPM 패키지로 배포하는 과정
+
+- npm 로그인하기
+
+```shell
+npm login
+```
+
+- npm scope 배포
+  - npm 로그인 후, 조직 생성 시 @계정명 으로 scope 생성
+    scope로 생성된 패키지는 npm publish 시, 아래 옵션 추가
+
+```shell
+npm publish --access=public
+```
+
+- package.json "version" 수정 후 배포
+  - 버전 표기법
+    - 메이저: 기능 대거 추가 및 수정
+    - 마이너: 작은 기능 추가 및 수정
+    - 패치: 버그나 사소한 오류 수정
+
+ <br />
+
+- npm 패키지 배포는 아래 명령어를 이용
+
+```shell
+npm run publish:npm
+```
+
+- package.json 에서 명시된 아래 파일들만 배포됨
+
+```
+"files": [
+    "dist/lib",
+    "dist/tailwind.config.d.ts",
+    "dist/tailwind.config.js",
+    "dist/globals.css"
+  ],
+```
+
+<br />
+
+## 📁구조
+
+#### 디렉토리 구조
+
+```
+📦dist : 컴파일 시 생성되며 NPM 패키지로 배포됨
+📦src
+┣ 📂app
+┃ ┣ 📜layout.tsx
+┃ ┣ 📜page.tsx
+┃ ┣ 📜stories.css : 스토리북 관련 CSS 파일
+┃ ┣ 📜globals.css
+┃ ┗ 📜styles.css
+┣ 📂lib : NPM 패키지 배포에 필요한 컴포넌트가 들어있는 폴더
+┃ ┣ 📂Typography
+┃ ┃ ┣ 📂Header
+┃ ┃ ┣ 📂Text
+┃ ┃ ┗ 📜index.ts
+┃ ┣ 📂color : 컴포넌트에서 사용하는 컬러 관련 파일 모음 폴더
+┃ ┃ ┣ 📜alpha.ts
+┃ ┃ ┣ 📜constants.ts
+┃ ┃ ┣ 📜dark.ts
+┃ ┃ ┣ 📜krdsColors.ts
+┃ ┃ ┗ 📜light.ts
+┃ ┣ 📂components : 배포되는 컴포넌트들이 들어있는 폴더
+┃ ┃ ┣ 📂Accordion
+┃ ┃ ┣ 📂AlertDialog
+┃ ┃ ┣ 📂AspectRatio
+┃ ┃ ┣ ...
+┃ ┃ ┣ 📂ToggleGroup
+┃ ┃ ┣ 📂ToggleSwitch
+┃ ┃ ┣ 📂Tooltip
+┃ ┃ ┗ 📜index.ts
+┃ ┣ 📂utils
+┃ ┃ ┗ 📜utils.ts : 공통 유틸 함수
+┃ ┣ 📜README.md : NPM 전용 README 파일
+┣ 📂stories : 디자인 테스트를 위한 스토리북 폴더
+┃ ┣ 📂accordion
+┃ ┣ 📂alert-dialog
+┃ ┣ 📂aspect-ratio
+┃ ┣ 📂assets : 스토리북 관련 이미지 폴더
+┃ ┣ ...
+┃ ┣ 📂toggle
+┃ ┣ 📂tooltip
+┃ ┣ 📜DarkAlphaColors.mdx
+┃ ┣ 📜DarkColors.mdx
+┃ ┣ 📜LightAlphaColors.mdx
+┃ ┣ 📜LightColors.mdx
+┃ ┣ 📜Welcome.mdx
+┃ ┗ 📜Welcome.tsx
+┗ 📂utils : 패키지 배포에 필요한 함수 모음
+  ┣ 📜move.js
+  ┗ 📜post-publish.js
+```

package/dist/lib/Typography/Header/index.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 import React from 'react';
-import { IColor } from '../../../lib/types';
+import { IColor } from 'lib/types';
 export interface HeaderProps extends VariantProps<typeof headerVariants> {
     color?: IColor;
 }

package/dist/lib/Typography/Header/{index.js → index.jsx}

@@ -20,10 +20,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../../lib/utils/utils';
+import { cn } from 'lib/utils/utils';
 import { cva } from 'class-variance-authority';
-import { textColorStyle, weightVariants } from '../../../lib/constants';
+import { textColorStyle, weightVariants } from 'lib/constants';
 import { Heading as HeadingTheme, Theme } from '@radix-ui/themes';
 import React from 'react';
 var weights = __assign({}, weightVariants);
@@ -49,7 +48,11 @@ export var Header = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, size = _a.size, weight = _a.weight, color = _a.color, headers = _a.headers, align = _a.align, rootProps = __rest(_a, ["className", "children", "size", "weight", "color", "headers", "align"]);
     if (!headers)
         headers = 'h1';
-    return (_jsx(Theme, { children: _jsx(HeadingTheme, __assign({ ref: ref, as: headers, size: size, align: align, className: cn('leading-normal', headerVariants({ weight: weight, color: color }), className) }, rootProps, { children: children })) }));
+    return (<Theme>
+      <HeadingTheme ref={ref} as={headers} size={size} align={align} className={cn('leading-normal', headerVariants({ weight: weight, color: color }), className)} {...rootProps}>
+        {children}
+      </HeadingTheme>
+    </Theme>);
 });
 Header.displayName = 'Header';
 export default Header;

package/dist/lib/Typography/Text/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { IColor, ITypoSize } from '../../../lib/types';
+import { IColor, ITypoSize } from 'lib/types';
 export interface TextProps extends VariantProps<typeof textVariants> {
     color?: IColor;
     size?: ITypoSize;

package/dist/lib/Typography/Text/{index.js → index.jsx}

@@ -20,12 +20,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { cva } from 'class-variance-authority';
 import { Text as TextTheme, Theme } from '@radix-ui/themes';
-import { textColorStyle, weightVariants } from '../../../lib/constants';
-import { cn } from '../../../lib/utils/utils';
+import { textColorStyle, weightVariants } from 'lib/constants';
+import { cn } from 'lib/utils/utils';
 var textVariants = cva('', {
     variants: {
         weight: __assign({ light: 'font-light' }, weightVariants),
@@ -38,7 +37,11 @@ var textVariants = cva('', {
 });
 export var Text = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, as = _a.as, align = _a.align, weight = _a.weight, color = _a.color, size = _a.size, props = __rest(_a, ["className", "children", "as", "align", "weight", "color", "size"]);
-    return (_jsx(Theme, { children: _jsx(TextTheme, __assign({ as: as, ref: ref, size: size, align: align, className: cn(textVariants({ weight: weight, color: color }), className) }, props, { children: children })) }));
+    return (<Theme>
+        <TextTheme as={as} ref={ref} size={size} align={align} className={cn(textVariants({ weight: weight, color: color }), className)} {...props}>
+          {children}
+        </TextTheme>
+      </Theme>);
 });
 Text.displayName = 'Text';
 export default Text;

package/dist/lib/components/Accordion/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { VariantProps } from 'class-variance-authority';
-import { IColor } from '../../../lib/types';
+import { IColor } from 'lib/types';
 export interface AccordionProps extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof accoridanVariants> {
     defaultValue?: string;
     color?: IColor;

package/dist/lib/components/Accordion/{index.js → index.jsx}

@@ -20,13 +20,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
-import { cn } from '../../../lib/utils/utils';
+import { cn } from 'lib/utils/utils';
 import { cva } from 'class-variance-authority';
-import { scalingVariants } from '../../../lib/constants';
+import { scalingVariants } from 'lib/constants';
 var accoridanVariants = cva('', {
     variants: {
         scaling: __assign({}, scalingVariants),
@@ -37,22 +36,35 @@ var accoridanVariants = cva('', {
 });
 export var Root = React.forwardRef(function (_a, forwardedRef) {
     var className = _a.className, children = _a.children, scaling = _a.scaling, rootProps = __rest(_a, ["className", "children", "scaling"]);
-    return (_jsx(AccordionPrimitive.Root, __assign({ className: cn('w-[280px] rounded-md border border-slateA-4 dark:border-slateDarkA-4', accoridanVariants({ scaling: scaling }), className) }, rootProps, { ref: forwardedRef, children: children })));
+    return (<AccordionPrimitive.Root className={cn('w-[280px] rounded-md border border-slateA-4 dark:border-slateDarkA-4', accoridanVariants({ scaling: scaling }), className)} {...rootProps} ref={forwardedRef}>
+      {children}
+    </AccordionPrimitive.Root>);
 });
 Root.displayName = 'Accordion.Root';
 export var Item = React.forwardRef(function (_a, forwardedRef) {
     var className = _a.className, children = _a.children, rootProps = __rest(_a, ["className", "children"]);
-    return (_jsx(AccordionPrimitive.Item, __assign({}, rootProps, { ref: forwardedRef, className: cn('mt-px w-[278px] overflow-hidden first:mt-0 first:rounded-t last:rounded-b', className), children: children })));
+    return (<AccordionPrimitive.Item {...rootProps} ref={forwardedRef} className={cn('mt-px w-[278px] overflow-hidden first:mt-0 first:rounded-t last:rounded-b', className)}>
+      {children}
+    </AccordionPrimitive.Item>);
 });
 Item.displayName = 'Accordion.Item';
 export var Trigger = React.forwardRef(function (_a, forwardedRef) {
     var className = _a.className, children = _a.children, _b = _a.color, color = _b === void 0 ? 'red' : _b, rootProps = __rest(_a, ["className", "children", "color"]);
-    return (_jsx(AccordionPrimitive.Header, __assign({}, rootProps, { className: cn('flex', className), children: _jsxs(AccordionPrimitive.Trigger, __assign({}, rootProps, { ref: forwardedRef, className: cn("group flex h-[44px] w-[278px] cursor-default items-center justify-between px-[20px] py-[10px] text-base font-normal", "dark:bg-[#111113] text-".concat(color, "A-11 dark:text-").concat(color, "Dark-11 "), "hover:bg-".concat(color, "A-4 dark:hover:bg-").concat(color, "Dark-4 hover:text-").concat(color, "A-11 dark:hover:text-").concat(color, "DarkA-11"), "data-[state=open]:bg-".concat(color, "A-5 dark:data-[state=open]:bg-").concat(color, "DarkA-5"), "disabled:bg-slateA-3 disabled:text-slateA-8 disabled:dark:bg-slateDarkA-3 disabled:dark:text-slateDarkA-8", className), children: [children, _jsx(ChevronDownIcon, { className: "transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180", "aria-hidden": true })] })) })));
+    return (<AccordionPrimitive.Header {...rootProps} className={cn('flex', className)}>
+      <AccordionPrimitive.Trigger {...rootProps} ref={forwardedRef} className={cn("group flex h-[44px] w-[278px] cursor-default items-center justify-between px-[20px] py-[10px] text-base font-normal", "dark:bg-[#111113] text-".concat(color, "A-11 dark:text-").concat(color, "Dark-11 "), "hover:bg-".concat(color, "A-4 dark:hover:bg-").concat(color, "Dark-4 hover:text-").concat(color, "A-11 dark:hover:text-").concat(color, "DarkA-11"), "data-[state=open]:bg-".concat(color, "A-5 dark:data-[state=open]:bg-").concat(color, "DarkA-5"), "disabled:bg-slateA-3 disabled:text-slateA-8 disabled:dark:bg-slateDarkA-3 disabled:dark:text-slateDarkA-8", className)}>
+        {children}
+        <ChevronDownIcon className="transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180" aria-hidden/>
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>);
 });
 Trigger.displayName = 'Accordion.Trigger';
 export var Content = React.forwardRef(function (_a, forwardedRef) {
     var className = _a.className, children = _a.children, rootProps = __rest(_a, ["className", "children"]);
-    return (_jsx(AccordionPrimitive.Content, __assign({}, rootProps, { ref: forwardedRef, className: cn('max-h-[800px] w-[278px] overflow-hidden border-t border-t-slateA-4 bg-slateA-2 text-[16px] text-slateA-11 data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown dark:border-t-slateDarkA-4 dark:bg-slateDarkA-2 dark:text-slateDarkA-11', className), children: _jsx("div", { className: "h-auto max-h-[1000px] overflow-y-auto px-[20px] py-[15px] text-base font-normal", children: children }) })));
+    return (<AccordionPrimitive.Content {...rootProps} ref={forwardedRef} className={cn('max-h-[800px] w-[278px] overflow-hidden border-t border-t-slateA-4 bg-slateA-2 text-[16px] text-slateA-11 data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown dark:border-t-slateDarkA-4 dark:bg-slateDarkA-2 dark:text-slateDarkA-11', className)}>
+      <div className="h-auto max-h-[1000px] overflow-y-auto px-[20px] py-[15px] text-base font-normal">
+        {children}
+      </div>
+    </AccordionPrimitive.Content>);
 });
 Content.displayName = 'Accordion.Content';
 var Accordion = {

package/dist/lib/components/AlertDialog/AlertDialogAction.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { VariantProps } from 'class-variance-authority';
-import { IAppearance } from '../../../lib/types';
+import { IAppearance } from 'lib/types';
 export interface AlertDialogActionProps extends VariantProps<typeof alertDialogActionVariants> {
     appearance?: IAppearance;
 }

package/dist/lib/components/AlertDialog/{AlertDialogAction.js → AlertDialogAction.jsx}

@@ -20,12 +20,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
-import { cn } from '../../../lib/utils/utils';
-import { appearanceStyle, primaryColorStyle, weightVariants } from '../../../lib/constants';
+import { cn } from 'lib/utils/utils';
+import { appearanceStyle, primaryColorStyle, weightVariants } from 'lib/constants';
 import { useAlertDialogContext } from './AlertDialogRoot';
 export var alertDialogActionVariants = cva("inline-flex items-center justify-center px-[15px] outline-none focus:shadow-[0_0_0_2px] font-normal w-fit", {
     variants: {
@@ -56,6 +55,8 @@ export var AlertDialogAction = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, weight = _a.weight, props = __rest(_a, ["className", "children", "weight"]);
     var _b = useAlertDialogContext(), radius = _b.radius, size = _b.size, _c = _b.color, color = _c === void 0 ? 'red' : _c, _d = _b.appearance, appearance = _d === void 0 ? 'solid' : _d;
     var buttonClassName = cn(alertDialogActionVariants({ radius: radius, size: size, weight: weight, color: color }), appearanceStyle(appearance, color), className);
-    return (_jsx(AlertDialogPrimitive.Action, __assign({ ref: ref, className: buttonClassName }, props, { children: children })));
+    return (<AlertDialogPrimitive.Action ref={ref} className={buttonClassName} {...props}>
+      {children}
+    </AlertDialogPrimitive.Action>);
 });
 AlertDialogAction.displayName = 'AlertDialog.Action';

package/dist/lib/components/AlertDialog/AlertDialogCancel.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { VariantProps } from 'class-variance-authority';
-import { IAppearance } from '../../../lib/types';
+import { IAppearance } from 'lib/types';
 export interface AlertDialogCancelProps extends VariantProps<typeof alertDialogCancelVariants> {
     appearance?: IAppearance;
 }

package/dist/lib/components/AlertDialog/{AlertDialogCancel.js → AlertDialogCancel.jsx}

@@ -20,12 +20,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
-import { cn } from '../../../lib/utils/utils';
-import { appearanceStyle, weightVariants } from '../../../lib/constants';
+import { cn } from 'lib/utils/utils';
+import { appearanceStyle, weightVariants } from 'lib/constants';
 import { useAlertDialogContext } from './AlertDialogRoot';
 export var alertDialogCancelVariants = cva("inline-flex justify-center items-center outline-none w-fit", {
     variants: {
@@ -55,6 +54,8 @@ export var AlertDialogCancel = forwardRef(function (_a, ref) {
     var _b = useAlertDialogContext(), radius = _b.radius, size = _b.size, _c = _b.appearance, appearance = _c === void 0 ? 'solid' : _c;
     var disabledButtonStyle = "border-none text-slate-11 bg-slate-3 \n    active:bg-slate-4 active:border-none hover:cursor-pointer hover:bg-slateA-4\n    dark:text-slateDark-11 dark:bg-slateDark-3 dark:hover:bg-slateDarkA-4";
     var buttonClassName = cn(alertDialogCancelVariants({ radius: radius, size: size, weight: weight }), appearanceStyle(appearance, 'slate'), disabledButtonStyle, className);
-    return (_jsx(AlertDialogPrimitive.Cancel, __assign({ ref: ref }, props, { className: buttonClassName, children: children })));
+    return (<AlertDialogPrimitive.Cancel ref={ref} {...props} className={buttonClassName}>
+      {children}
+    </AlertDialogPrimitive.Cancel>);
 });
 AlertDialogCancel.displayName = 'AlertDialog.Cancel';

package/dist/lib/components/AlertDialog/{AlertDialogContent.js → AlertDialogContent.jsx}

@@ -20,12 +20,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
-import { cn } from '../../../lib/utils/utils';
-import { radiusVariants, scalingVariants } from '../../../lib/constants';
+import { cn } from 'lib/utils/utils';
+import { radiusVariants, scalingVariants } from 'lib/constants';
 import { useAlertDialogContext } from './AlertDialogRoot';
 export var alertDialogContentVariants = cva("fixed max-h-[85vh] top-[50%] left-[50%] focus:outline-none\n  translate-x-[-50%] translate-y-[-50%] data-[state=open]:animate-contentShow bg-white dark:bg-slateDark-1 \n  shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]", {
     variants: {
@@ -46,6 +45,11 @@ export var alertDialogContentVariants = cva("fixed max-h-[85vh] top-[50%] left-[
 export var AlertDialogContent = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
     var _b = useAlertDialogContext(), radius = _b.radius, size = _b.size, scaling = _b.scaling;
-    return (_jsxs(AlertDialogPrimitive.Portal, { children: [_jsx(AlertDialogPrimitive.Overlay, { className: "fixed data-[state=open]:animate-overlayShow inset-0" }), _jsx(AlertDialogPrimitive.Content, __assign({ className: cn(alertDialogContentVariants({ radius: radius, size: size, scaling: scaling }), className), ref: ref }, props, { children: children }))] }));
+    return (<AlertDialogPrimitive.Portal>
+      <AlertDialogPrimitive.Overlay className="fixed data-[state=open]:animate-overlayShow inset-0"/>
+      <AlertDialogPrimitive.Content className={cn(alertDialogContentVariants({ radius: radius, size: size, scaling: scaling }), className)} ref={ref} {...props}>
+        {children}
+      </AlertDialogPrimitive.Content>
+    </AlertDialogPrimitive.Portal>);
 });
 AlertDialogContent.displayName = 'AlertDialog.Content';