@imc0nt0/mirror 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,428 @@
1
+ # @imc0nt0/mirror
2
+
3
+ 심플한 React 컴포넌트 라이브러리
4
+
5
+ ## 설치
6
+
7
+ ```bash
8
+ npm install @imc0nt0/mirror framer-motion bootstrap-icons
9
+ ```
10
+
11
+ ## Color System
12
+
13
+ ```json
14
+ {
15
+ "primary": "#b8e8fd",
16
+ "secondary": "#f4f4fe",
17
+ "error": "#cc0000",
18
+ "success": "#4bd964",
19
+ "warning": "#ff4d00"
20
+ }
21
+ ```
22
+
23
+ ## 컴포넌트
24
+
25
+ ### Button
26
+ 버튼 컴포넌트
27
+
28
+ ```jsx
29
+ import { Button } from '@imc0nt0/mirror';
30
+
31
+ <Button variant="primary">클릭</Button>
32
+ <Button variant="secondary" size="large">큰 버튼</Button>
33
+ <Button fullWidth>전체 너비</Button>
34
+ ```
35
+
36
+ **Props:**
37
+ - `variant`: 'primary' | 'secondary' | 'outline' | 'ghost'
38
+ - `size`: 'small' | 'medium' | 'large'
39
+ - `disabled`: boolean
40
+ - `fullWidth`: boolean
41
+
42
+ ### Card
43
+ 카드 컨테이너
44
+
45
+ ```jsx
46
+ import { Card } from '@imc0nt0/mirror';
47
+
48
+ <Card>
49
+ <h2>제목</h2>
50
+ <p>내용</p>
51
+ </Card>
52
+ ```
53
+
54
+ **Props:**
55
+ - `hoverable`: boolean - 호버 효과
56
+ - `noPadding`: boolean - 패딩 제거
57
+ - `onClick`: function - 클릭 이벤트
58
+
59
+ ### TextField
60
+ 텍스트 입력 필드
61
+
62
+ ```jsx
63
+ import { TextField } from '@imc0nt0/mirror';
64
+
65
+ <TextField
66
+ label="이름"
67
+ placeholder="이름을 입력하세요"
68
+ fullWidth
69
+ />
70
+ ```
71
+
72
+ **Props:**
73
+ - `label`: string - 라벨 텍스트
74
+ - `placeholder`: string
75
+ - `value`: string
76
+ - `onChange`: function
77
+ - `error`: string - 에러 메시지
78
+ - `disabled`: boolean
79
+ - `fullWidth`: boolean
80
+
81
+ **스타일:**
82
+ - 호버 시 배경색 변경 (#fafbfc)
83
+ - 호버 시 테두리 색상 변경 (#d4f1fd)
84
+ - 포커스 시 테두리 강조 (#b8e8fd)
85
+ - 모션 효과 없음 (성능 최적화)
86
+
87
+ ### IconButton
88
+ 아이콘만 있는 버튼
89
+
90
+ ```jsx
91
+ import { IconButton } from '@imc0nt0/mirror';
92
+
93
+ <IconButton icon="bi-heart-fill" variant="primary" />
94
+ <IconButton icon="bi-trash-fill" variant="danger" />
95
+ <IconButton icon="bi-search" variant="ghost" size="small" />
96
+ ```
97
+
98
+ **Props:**
99
+ - `icon`: string - Bootstrap Icons 클래스명 (예: 'bi-heart-fill')
100
+ - `variant`: 'primary' | 'secondary' | 'ghost' | 'danger' (기본값: 'ghost')
101
+ - `size`: 'small' | 'medium' | 'large' (기본값: 'medium')
102
+ - `disabled`: boolean
103
+ - `rounded`: boolean - 완전히 둥근 모양 (기본값: true)
104
+ - `onClick`: function
105
+
106
+ **Variants:**
107
+ - `primary`: #b8e8fd 배경
108
+ - `secondary`: #f4f4fe 배경
109
+ - `ghost`: 투명 배경, 호버 시 회색
110
+ - `danger`: 투명 배경, 빨간색 아이콘
111
+
112
+ ### ListRow
113
+ 깔끔한 스타일의 리스트 행
114
+
115
+ ```jsx
116
+ import { ListRow, ColorBlock, ListSection } from '@imc0nt0/mirror';
117
+
118
+ // 기본 사용
119
+ <ListRow
120
+ left={<ColorBlock color="#ff6b6b" />}
121
+ title="ListRow"
122
+ description="ListRow"
123
+ showArrow
124
+ onClick={() => console.log('클릭')}
125
+ />
126
+
127
+ // 아이콘과 함께
128
+ <ListRow
129
+ left={<i className="bi bi-bell-fill"></i>}
130
+ title="알림 설정"
131
+ right={<Switch />}
132
+ />
133
+
134
+ // 섹션으로 그룹화
135
+ <ListSection title="카드 관리">
136
+ <ListRow title="카드 1" showArrow />
137
+ <ListRow title="카드 2" showArrow />
138
+ </ListSection>
139
+ ```
140
+
141
+ **ListRow Props:**
142
+ - `left`: ReactNode - 왼쪽 콘텐츠 (아이콘, 색상 블록 등)
143
+ - `title`: string - 제목 (필수)
144
+ - `description`: string - 설명 (옵션)
145
+ - `right`: ReactNode - 오른쪽 콘텐츠 (아이콘, 스위치, 텍스트 등)
146
+ - `showArrow`: boolean - 오른쪽 화살표 표시 (기본값: false)
147
+ - `divider`: boolean - 하단 구분선 표시 (기본값: true)
148
+ - `onClick`: function - 클릭 이벤트
149
+ - `disabled`: boolean - 비활성화 여부
150
+
151
+ **ColorBlock Props:**
152
+ - `color`: string - 색상 (기본값: '#b8e8fd')
153
+ - `size`: number - 크기 (px, 기본값: 44)
154
+
155
+ **ListSection Props:**
156
+ - `title`: string - 섹션 제목
157
+ - `children`: ReactNode - ListRow 컴포넌트들
158
+
159
+ **디자인 개선:**
160
+ - 세련된 타이포그래피 (letter-spacing, font-weight)
161
+ - 부드러운 hover 애니메이션 (x축 이동)
162
+ - 둥근 모서리 카드 스타일
163
+ - 은은한 그림자 효과
164
+ - 개선된 색상 대비
165
+
166
+ ### Toast
167
+ 토스트 알림 (Bootstrap Icons + Framer Motion)
168
+
169
+ ```jsx
170
+ import { Toast, useToast } from '@imc0nt0/mirror';
171
+
172
+ function App() {
173
+ const { showToast, ToastComponent } = useToast();
174
+
175
+ const handleClick = () => {
176
+ showToast('성공했습니다!', 'success', 'top');
177
+ };
178
+
179
+ return (
180
+ <div>
181
+ <button onClick={handleClick}>토스트 띄우기</button>
182
+ {ToastComponent}
183
+ </div>
184
+ );
185
+ }
186
+ ```
187
+
188
+ **아이콘:**
189
+ - Success: `bi-check-circle-fill` (체크 원형)
190
+ - Error: `bi-x-circle-fill` (X 원형)
191
+ - Warning: `bi-exclamation-triangle-fill` (경고 삼각형)
192
+ - Info: `bi-info-circle-fill` (정보 원형)
193
+
194
+ **애니메이션:**
195
+ - Spring 기반 바운스 효과
196
+ - 아이콘 회전 + 스케일 애니메이션
197
+ - 텍스트 페이드인 + 슬라이드
198
+ - **반복 표시 시마다 애니메이션 재생** (고유 key 사용)
199
+
200
+ **useToast Hook:**
201
+ - `showToast(message, type, position, duration)` - 토스트 표시
202
+ - `type`: 'success' | 'error' | 'warning' | 'info'
203
+ - `position`: 'top' | 'bottom' (기본값: 'bottom')
204
+ - `duration`: number (ms, 기본값 3000)
205
+ - `hideToast()` - 토스트 숨기기
206
+ - `ToastComponent` - 렌더링할 컴포넌트
207
+
208
+ **Toast Component Props:**
209
+ - `message`: string - 메시지
210
+ - `type`: 'success' | 'error' | 'warning' | 'info'
211
+ - `position`: 'top' | 'bottom' - 위치
212
+ - `duration`: number - 표시 시간
213
+ - `isOpen`: boolean
214
+ - `onClose`: function
215
+
216
+ ### Modal
217
+ 모달 다이얼로그 (Normal, Confirm)
218
+
219
+ ```jsx
220
+ import { Modal, useModal } from '@imc0nt0/mirror';
221
+
222
+ function App() {
223
+ const { isOpen, openModal, closeModal } = useModal();
224
+
225
+ return (
226
+ <div>
227
+ <button onClick={openModal}>모달 열기</button>
228
+
229
+ {/* Normal Modal */}
230
+ <Modal
231
+ isOpen={isOpen}
232
+ onClose={closeModal}
233
+ title="알림"
234
+ type="normal"
235
+ >
236
+ <p>모달 내용입니다.</p>
237
+ </Modal>
238
+
239
+ {/* Confirm Modal */}
240
+ <Modal
241
+ isOpen={isOpen}
242
+ onClose={closeModal}
243
+ title="삭제 확인"
244
+ type="confirm"
245
+ confirmText="삭제"
246
+ cancelText="취소"
247
+ onConfirm={() => console.log('삭제됨')}
248
+ >
249
+ <p>정말로 삭제하시겠습니까?</p>
250
+ </Modal>
251
+ </div>
252
+ );
253
+ }
254
+ ```
255
+
256
+ **Modal Props:**
257
+ - `isOpen`: boolean - 모달 표시 여부
258
+ - `onClose`: function - 닫기 콜백
259
+ - `title`: string - 모달 제목
260
+ - `children`: ReactNode - 모달 내용
261
+ - `type`: 'normal' | 'confirm' - 모달 타입 (기본값: 'normal')
262
+ - `confirmText`: string - 확인 버튼 텍스트 (기본값: '확인')
263
+ - `cancelText`: string - 취소 버튼 텍스트 (기본값: '취소')
264
+ - `onConfirm`: function - 확인 버튼 콜백 (confirm 타입)
265
+ - `showCloseButton`: boolean - X 닫기 버튼 표시 (기본값: true)
266
+
267
+ **기능:**
268
+ - ESC 키로 닫기
269
+ - 외부 클릭으로 닫기
270
+ - 모달 열릴 때 스크롤 방지
271
+ - Spring 애니메이션
272
+
273
+ **useModal Hook:**
274
+ - `isOpen`: boolean - 모달 열림 상태
275
+ - `openModal()`: function - 모달 열기
276
+ - `closeModal()`: function - 모달 닫기
277
+
278
+ ## 애니메이션
279
+
280
+ ### 모션 프리셋
281
+
282
+ 미리 정의된 애니메이션을 제공합니다.
283
+
284
+ ```jsx
285
+ import { Animate, AnimateOnView, AnimateStagger, motions } from '@imc0nt0/mirror';
286
+
287
+ // 기본 애니메이션
288
+ <Animate motion="fadeIn">
289
+ <div>페이드 인</div>
290
+ </Animate>
291
+
292
+ <Animate motion="slideUp" delay={0.2}>
293
+ <div>슬라이드 업</div>
294
+ </Animate>
295
+ ```
296
+
297
+ **사용 가능한 모션:**
298
+ - `fadeIn`, `fadeOut` - 페이드 효과
299
+ - `slideUp`, `slideDown`, `slideLeft`, `slideRight` - 슬라이드 효과
300
+ - `scaleIn`, `scaleOut`, `scaleBounce` - 스케일 효과
301
+ - `rotateIn` - 회전 효과
302
+ - `blurIn` - 블러 효과
303
+ - `entrance` - 입장 효과 (슬라이드 + 페이드 + 블러)
304
+ - `pop` - 팝 효과 (바운스)
305
+
306
+ ### AnimateOnView
307
+
308
+ 뷰포트에 진입할 때 애니메이션을 실행합니다.
309
+
310
+ ```jsx
311
+ <AnimateOnView motion="slideUp" once={true}>
312
+ <div>스크롤 시 나타남</div>
313
+ </AnimateOnView>
314
+ ```
315
+
316
+ **Props:**
317
+ - `motion`: string - 모션 프리셋 이름
318
+ - `delay`: number - 지연 시간(초)
319
+ - `once`: boolean - 한 번만 실행 (기본값: true)
320
+ - `amount`: number - 얼마나 보일 때 실행할지 (0-1, 기본값: 0.3)
321
+
322
+ ### AnimateStagger
323
+
324
+ 자식 요소들을 순차적으로 애니메이션합니다.
325
+
326
+ ```jsx
327
+ <AnimateStagger motion="fadeIn" staggerDelay={0.1}>
328
+ {items.map(item => (
329
+ <div key={item.id}>{item.name}</div>
330
+ ))}
331
+ </AnimateStagger>
332
+ ```
333
+
334
+ **Props:**
335
+ - `motion`: string - 모션 프리셋 이름
336
+ - `staggerDelay`: number - 자식 간 지연 시간(초, 기본값: 0.1)
337
+
338
+ ### useAnimation Hook
339
+
340
+ 프로그래매틱하게 애니메이션을 제어합니다.
341
+
342
+ ```jsx
343
+ import { useAnimation, motions } from '@imc0nt0/mirror';
344
+
345
+ function MyComponent() {
346
+ const { scope, play, serial, parallel, stagger, timeline } = useAnimation();
347
+
348
+ const handleClick = async () => {
349
+ // 단일 실행
350
+ await play('.target', motions.fadeIn);
351
+
352
+ // 순차 실행
353
+ await serial([
354
+ { target: '.item1', motion: motions.fadeIn },
355
+ { target: '.item2', motion: motions.slideUp },
356
+ ]);
357
+
358
+ // 동시 실행
359
+ await parallel([
360
+ { target: '.item1', motion: motions.fadeIn },
361
+ { target: '.item2', motion: motions.fadeIn },
362
+ ]);
363
+
364
+ // 스태거 실행
365
+ await stagger([
366
+ { target: '.item1', motion: motions.fadeIn },
367
+ { target: '.item2', motion: motions.fadeIn },
368
+ ], 0.1);
369
+
370
+ // 타임라인
371
+ await timeline([
372
+ { type: 'parallel', animations: [...] },
373
+ { type: 'wait', duration: 0.5 },
374
+ { type: 'serial', animations: [...] },
375
+ ]);
376
+ };
377
+
378
+ return (
379
+ <div ref={scope}>
380
+ <div className="target">애니메이션 대상</div>
381
+ </div>
382
+ );
383
+ }
384
+ ```
385
+
386
+ **메서드:**
387
+ - `play(target, motion, options)` - 단일 모션 실행
388
+ - `serial(animations)` - 순차 실행
389
+ - `parallel(animations)` - 동시 실행
390
+ - `stagger(animations, delayBetween)` - 스태거 실행
391
+ - `timeline(sequence)` - 복합 타임라인
392
+
393
+ ### 커스텀 모션
394
+
395
+ ```jsx
396
+ import { createMotion, easings } from '@imc0nt0/mirror';
397
+
398
+ const customMotion = createMotion({
399
+ from: { opacity: 0, y: 20 },
400
+ to: { opacity: 1, y: 0 },
401
+ duration: 0.5,
402
+ ease: easings.toss,
403
+ });
404
+
405
+ <Animate motion={customMotion}>
406
+ <div>커스텀 애니메이션</div>
407
+ </Animate>
408
+ ```
409
+
410
+ **이징 함수:**
411
+ - `linear`, `ease`, `easeIn`, `easeOut`, `easeInOut`
412
+ - `spring`, `springBouncy`, `springSoft`
413
+ - `toss`, `smooth`, `bounce`, `anticipate`
414
+
415
+ ### 모션 결합
416
+
417
+ ```jsx
418
+ import { combineMotions, motions } from '@imc0nt0/mirror';
419
+
420
+ const combined = combineMotions(
421
+ motions.fadeIn,
422
+ motions.slideUp
423
+ );
424
+ ```
425
+
426
+ ## 라이선스
427
+
428
+ MIT
@@ -0,0 +1 @@
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`framer-motion`),t=require(`react/jsx-runtime`),n=require(`react`);function r({children:n,variant:r=`primary`,size:i=`medium`,disabled:a=!1,fullWidth:o=!1,onClick:s,className:c=``,...l}){let u={primary:{background:`#b8e8fd`,color:`#000000`,border:`none`},secondary:{background:`#f4f4fe`,color:`#000000`,border:`none`},outline:{background:`transparent`,color:`#b8e8fd`,border:`1px solid #b8e8fd`},ghost:{background:`transparent`,color:`#212529`,border:`none`}},d={small:{padding:`8px 16px`,fontSize:`13px`,borderRadius:`8px`},medium:{padding:`14px 20px`,fontSize:`15px`,borderRadius:`10px`},large:{padding:`18px 24px`,fontSize:`16px`,borderRadius:`12px`}},f={...u[r],...d[i],cursor:a?`not-allowed`:`pointer`,fontWeight:`600`,width:o?`100%`:`auto`,opacity:a?.4:1,display:`inline-flex`,alignItems:`center`,justifyContent:`center`,gap:`6px`,transition:`all 0.2s`};return(0,t.jsx)(e.motion.button,{style:f,className:c,onClick:a?void 0:s,disabled:a,whileHover:a?{}:{opacity:.9,scale:1.02},whileTap:a?{}:{scale:.98},transition:{duration:.15},...l,children:n})}function i({children:n,hoverable:r=!1,onClick:i,noPadding:a=!1,className:o=``,...s}){let c={background:`#ffffff`,borderRadius:`16px`,boxShadow:`0 1px 3px rgba(0,0,0,0.08)`,padding:a?`0`:`20px`,cursor:i?`pointer`:`default`,overflow:`hidden`};return(0,t.jsx)(e.motion.div,{style:c,className:o,onClick:i,whileHover:r||i?{boxShadow:`0 4px 12px rgba(0,0,0,0.12)`,y:-2}:{},whileTap:i?{scale:.98}:{},transition:{duration:.2},...s,children:n})}function a({label:e,placeholder:r,error:i,disabled:a=!1,fullWidth:o=!1,type:s=`text`,value:c,onChange:l,className:u=``,...d}){let[f,p]=(0,n.useState)(!1),[m,h]=(0,n.useState)(!1),g={display:`flex`,flexDirection:`column`,gap:`8px`,width:o?`100%`:`auto`},_={padding:`12px 16px`,fontSize:`16px`,borderRadius:`8px`,border:i?`2px solid #ef4444`:f?`2px solid #b8e8fd`:m?`2px solid #d4f1fd`:`2px solid #e5e7eb`,outline:`none`,transition:`all 0.2s`,background:a?`#f9fafb`:m?`#fafbfc`:`#ffffff`,cursor:a?`not-allowed`:`text`,width:`100%`,color:`#212529`},v={fontSize:`14px`,fontWeight:`600`,color:`#374151`},y={fontSize:`12px`,color:`#ef4444`,marginTop:`4px`};return(0,t.jsxs)(`div`,{style:g,className:u,children:[e&&(0,t.jsx)(`label`,{style:v,children:e}),(0,t.jsx)(`input`,{type:s,style:_,placeholder:r,disabled:a,value:c,onChange:l,onFocus:()=>p(!0),onBlur:()=>p(!1),onMouseEnter:()=>h(!0),onMouseLeave:()=>h(!1),...d}),i&&(0,t.jsx)(`span`,{style:y,children:i})]})}function o({message:r,type:i=`info`,position:a=`bottom`,duration:o=3e3,onClose:s,isOpen:c=!0}){let[l,u]=(0,n.useState)(c);(0,n.useEffect)(()=>{u(c)},[c]),(0,n.useEffect)(()=>{if(l&&o>0){let e=setTimeout(()=>{u(!1),s?.()},o);return()=>clearTimeout(e)}},[l,o,s]);let d={success:{icon:`bi-check-circle-fill`,iconBg:`#4bd964`},error:{icon:`bi-x-circle-fill`,iconBg:`#cc0000`},warning:{icon:`bi-exclamation-triangle-fill`,iconBg:`#ff4d00`},info:{icon:`bi-info-circle-fill`,iconBg:`#b8e8fd`}},f={position:`fixed`,...a===`top`?{top:`24px`}:{bottom:`24px`},left:`50%`,transform:`translateX(-50%)`,background:`rgba(50, 50, 50, 0.95)`,backdropFilter:`blur(10px)`,color:`#ffffff`,padding:`14px 20px`,borderRadius:`12px`,fontSize:`14px`,fontWeight:`500`,boxShadow:`0 4px 16px rgba(0,0,0,0.25)`,zIndex:9999,maxWidth:`90%`,minWidth:`200px`,display:`flex`,alignItems:`center`,gap:`12px`},p={width:`24px`,height:`24px`,display:`flex`,alignItems:`center`,justifyContent:`center`,flexShrink:0},m={fontSize:`20px`,color:d[i].iconBg},h=a===`top`?{initial:{opacity:0,y:-50,scale:.8},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,y:-50,scale:.8}}:{initial:{opacity:0,y:50,scale:.8},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,y:50,scale:.8}};return(0,t.jsx)(e.AnimatePresence,{children:l&&(0,t.jsxs)(e.motion.div,{style:f,...h,transition:{type:`spring`,stiffness:400,damping:25,mass:.5},children:[(0,t.jsx)(e.motion.div,{style:p,initial:{scale:0,rotate:-180},animate:{scale:1,rotate:0},transition:{delay:.1,type:`spring`,stiffness:500,damping:15},children:(0,t.jsx)(`i`,{className:`bi ${d[i].icon}`,style:m})}),(0,t.jsx)(e.motion.span,{initial:{opacity:0,x:-10},animate:{opacity:1,x:0},transition:{delay:.15},children:r})]})})}function s(){let[e,r]=(0,n.useState)(null),i=(e,t=`info`,n=`bottom`,i=3e3)=>{r({id:Date.now()+Math.random(),message:e,type:t,position:n,duration:i,isOpen:!0})},a=()=>{r(e=>e?{...e,isOpen:!1}:null)};return{toast:e,showToast:i,hideToast:a,ToastComponent:e?(0,t.jsx)(o,{message:e.message,type:e.type,position:e.position,duration:e.duration,isOpen:e.isOpen,onClose:a},e.id):null}}function c({isOpen:r=!1,onClose:i,title:a,children:o,type:s=`normal`,confirmText:c=`확인`,cancelText:l=`취소`,onConfirm:u,showCloseButton:d=!0}){(0,n.useEffect)(()=>{let e=e=>{e.key===`Escape`&&r&&i?.()};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[r,i]),(0,n.useEffect)(()=>(r?document.body.style.overflow=`hidden`:document.body.style.overflow=`unset`,()=>{document.body.style.overflow=`unset`}),[r]);let f={position:`fixed`,top:0,left:0,right:0,bottom:0,background:`rgba(0, 0, 0, 0.5)`,backdropFilter:`blur(4px)`,display:`flex`,alignItems:`center`,justifyContent:`center`,zIndex:1e4,padding:`20px`},p={background:`#ffffff`,borderRadius:`16px`,boxShadow:`0 8px 32px rgba(0,0,0,0.2)`,maxWidth:`500px`,width:`100%`,maxHeight:`90vh`,overflow:`hidden`,display:`flex`,flexDirection:`column`},m={padding:`24px 24px 16px`,borderBottom:`1px solid #f1f3f5`,display:`flex`,alignItems:`center`,justifyContent:`space-between`},h={fontSize:`18px`,fontWeight:`700`,color:`#212529`,margin:0},g={background:`transparent`,border:`none`,fontSize:`24px`,color:`#868e96`,cursor:`pointer`,padding:`4px`,display:`flex`,alignItems:`center`,justifyContent:`center`,width:`32px`,height:`32px`,borderRadius:`8px`,transition:`all 0.2s`},_={padding:`24px`,overflowY:`auto`,flex:1,fontSize:`14px`,color:`#495057`,lineHeight:`1.6`},v={padding:`16px 24px`,borderTop:`1px solid #f1f3f5`,display:`flex`,gap:`12px`,justifyContent:`flex-end`},y={padding:`10px 20px`,borderRadius:`8px`,fontSize:`14px`,fontWeight:`600`,cursor:`pointer`,border:`none`,transition:`all 0.2s`},b={...y,background:`#f1f3f5`,color:`#212529`},x={...y,background:`#b8e8fd`,color:`#000000`};return(0,t.jsx)(e.AnimatePresence,{children:r&&(0,t.jsx)(e.motion.div,{style:f,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},onClick:i,children:(0,t.jsxs)(e.motion.div,{style:p,initial:{scale:.8,opacity:0,y:20},animate:{scale:1,opacity:1,y:0},exit:{scale:.8,opacity:0,y:20},transition:{type:`spring`,stiffness:300,damping:25},onClick:e=>e.stopPropagation(),children:[(0,t.jsxs)(`div`,{style:m,children:[(0,t.jsx)(`h2`,{style:h,children:a}),d&&(0,t.jsx)(e.motion.button,{style:g,onClick:i,whileHover:{background:`#f1f3f5`},whileTap:{scale:.95},children:(0,t.jsx)(`i`,{className:`bi bi-x-lg`})})]}),(0,t.jsx)(`div`,{style:_,children:o}),s===`confirm`&&(0,t.jsxs)(`div`,{style:v,children:[(0,t.jsx)(e.motion.button,{style:b,onClick:i,whileHover:{opacity:.8},whileTap:{scale:.98},children:l}),(0,t.jsx)(e.motion.button,{style:x,onClick:()=>{u?.(),i?.()},whileHover:{opacity:.9},whileTap:{scale:.98},children:c})]})]})})})}function l(){let[e,t]=(0,n.useState)(!1);return{isOpen:e,openModal:()=>t(!0),closeModal:()=>t(!1)}}function u({icon:n,variant:r=`ghost`,size:i=`medium`,disabled:a=!1,rounded:o=!0,onClick:s,className:c=``,...l}){let u={primary:{background:`#b8e8fd`,color:`#000000`,border:`none`},secondary:{background:`#f4f4fe`,color:`#000000`,border:`none`},ghost:{background:`transparent`,color:`#212529`,border:`none`},danger:{background:`transparent`,color:`#cc0000`,border:`none`}},d={small:{width:`32px`,height:`32px`,fontSize:`16px`,borderRadius:o?`50%`:`6px`},medium:{width:`40px`,height:`40px`,fontSize:`20px`,borderRadius:o?`50%`:`8px`},large:{width:`48px`,height:`48px`,fontSize:`24px`,borderRadius:o?`50%`:`10px`}},f={...u[r],...d[i],cursor:a?`not-allowed`:`pointer`,opacity:a?.4:1,display:`inline-flex`,alignItems:`center`,justifyContent:`center`,transition:`all 0.2s`,padding:0};return(0,t.jsx)(e.motion.button,{style:f,className:c,onClick:a?void 0:s,disabled:a,whileHover:a?{}:{ghost:{background:`#f1f3f5`},primary:{opacity:.9},secondary:{opacity:.9},danger:{background:`#fff5f5`}}[r],whileTap:a?{}:{scale:.95},transition:{duration:.15},...l,children:(0,t.jsx)(`i`,{className:`bi ${n}`})})}function d({left:n,title:r,description:i,right:a,showArrow:o=!1,divider:s=!0,onClick:c,disabled:l=!1,className:u=``,...d}){let f={display:`flex`,alignItems:`center`,padding:`18px 0`,gap:`14px`,background:`transparent`,borderBottom:s?`1px solid #f1f3f5`:`none`,cursor:c&&!l?`pointer`:`default`,transition:`all 0.2s ease`,userSelect:`none`,position:`relative`},p={display:`flex`,alignItems:`center`,justifyContent:`center`,flexShrink:0},m={flex:1,display:`flex`,flexDirection:`column`,gap:`5px`,minWidth:0},h={fontSize:`16px`,fontWeight:`600`,color:l?`#adb5bd`:`#191f28`,lineHeight:`1.5`,letterSpacing:`-0.3px`,textAlign:`left`},g={fontSize:`14px`,color:l?`#ced4da`:`#8b95a1`,lineHeight:`1.5`,letterSpacing:`-0.2px`,textAlign:`left`},_={display:`flex`,alignItems:`center`,gap:`6px`,flexShrink:0,color:`#8b95a1`,fontSize:`15px`,fontWeight:`500`},v={fontSize:`18px`,color:`#b0b8c1`,marginLeft:`2px`};return(0,t.jsxs)(e.motion.div,{style:f,className:u,onClick:c&&!l?c:void 0,whileHover:c&&!l?{x:2}:{},transition:{duration:.2,ease:`easeOut`},...d,children:[n&&(0,t.jsx)(`div`,{style:p,children:n}),(0,t.jsxs)(`div`,{style:m,children:[(0,t.jsx)(`div`,{style:h,children:r}),i&&(0,t.jsx)(`div`,{style:g,children:i})]}),(a||o)&&(0,t.jsxs)(`div`,{style:_,children:[a,o&&(0,t.jsx)(`i`,{className:`bi bi-chevron-right`,style:v})]})]})}function f({color:e=`#b8e8fd`,size:n=44}){return(0,t.jsx)(`div`,{style:{width:`${n}px`,height:`${n}px`,borderRadius:`12px`,background:e,flexShrink:0}})}function p({title:e,children:n,className:r=``,...i}){let a={marginBottom:`32px`},o={fontSize:`14px`,fontWeight:`700`,color:`#6b7684`,padding:`0 0 12px 0`,letterSpacing:`-0.2px`},s={background:`#ffffff`,borderRadius:`12px`,padding:`0 20px`,boxShadow:`0 1px 3px rgba(0,0,0,0.04)`};return(0,t.jsxs)(`div`,{style:a,className:r,...i,children:[e&&(0,t.jsx)(`div`,{style:o,children:e}),(0,t.jsx)(`div`,{style:s,children:n})]})}function m({steps:e=[],currentStep:n=null,className:r=``,style:i={},...a}){return(0,t.jsx)(`div`,{style:{background:`#ffffff`,borderRadius:`12px`,padding:`0`,boxShadow:`0 1px 3px rgba(0,0,0,0.04)`,overflow:`hidden`,...i},className:r,...a,children:e.map((r,i)=>(0,t.jsx)(h,{stepNumber:i+1,title:r.title,description:r.description,icon:r.icon||`bi-chevron-right`,onClick:r.onClick,isLast:i===e.length-1,isActive:n!==null&&i===n},i))})}function h({stepNumber:r,title:i,description:a,icon:o,onClick:s,isLast:c,isActive:l}){let[u,d]=(0,n.useState)(!1),f={display:`flex`,alignItems:`center`,gap:`16px`,padding:`20px 20px`,borderBottom:c?`none`:`1px solid #f1f3f5`,cursor:s?`pointer`:`default`,background:l?`#fafbfc`:`#ffffff`,transition:`background 0.2s ease`},p={width:`32px`,height:`32px`,borderRadius:`50%`,background:l?`#b8e8fd`:`#f1f3f5`,color:l?`#212529`:`#868e96`,display:`flex`,alignItems:`center`,justifyContent:`center`,fontSize:`14px`,fontWeight:`600`,flexShrink:0},m={flex:1,minWidth:0},h={fontSize:`16px`,fontWeight:`600`,color:`#212529`,marginBottom:a?`4px`:`0`,textAlign:`left`};return(0,t.jsxs)(e.motion.div,{style:f,onClick:s,onMouseEnter:()=>d(!0),onMouseLeave:()=>d(!1),whileHover:s?{backgroundColor:`#fafbfc`}:{},animate:s&&u?{x:[0,4,0]}:{x:0},transition:{duration:.3},children:[(0,t.jsx)(`div`,{style:p,children:r}),(0,t.jsxs)(`div`,{style:m,children:[(0,t.jsx)(`div`,{style:h,children:i}),a&&(0,t.jsx)(`div`,{style:{fontSize:`14px`,color:`#868e96`,lineHeight:`1.4`,textAlign:`left`},children:a})]}),o&&(0,t.jsx)(`div`,{style:{fontSize:`20px`,color:`#adb5bd`,flexShrink:0},children:typeof o==`string`?(0,t.jsx)(`i`,{className:o}):o})]})}function g({variant:n=`rect`,width:r=`100%`,height:i=`20px`,animation:a=!0,className:o=``,style:s={},...c}){let l={display:`inline-block`,background:`linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)`,backgroundSize:`200% 100%`,width:typeof r==`number`?`${r}px`:r,height:typeof i==`number`?`${i}px`:i,...s},u={text:{borderRadius:`4px`,height:i||`16px`},circle:{borderRadius:`50%`,width:r||i||`40px`,height:i||r||`40px`},rect:{borderRadius:`8px`}},d={...l,...u[n]};return(0,t.jsx)(e.motion.div,{style:d,className:o,animate:a?{backgroundPosition:[`0% 0%`,`100% 0%`]}:{},transition:{duration:1.5,repeat:1/0,ease:`linear`},...c})}function _({lines:e=3,lastLineWidth:n=`60%`,spacing:r=`12px`}){return(0,t.jsx)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:r,width:`100%`},children:Array.from({length:e},(r,i)=>(0,t.jsx)(g,{variant:`text`,width:i===e-1?n:`100%`},i))})}function v({hasImage:e=!0,hasAvatar:n=!1}){return(0,t.jsxs)(`div`,{style:{background:`#ffffff`,borderRadius:`12px`,padding:`20px`,boxShadow:`0 1px 3px rgba(0,0,0,0.04)`},children:[e&&(0,t.jsx)(g,{variant:`rect`,width:`100%`,height:`180px`,style:{marginBottom:`16px`}}),n&&(0,t.jsxs)(`div`,{style:{display:`flex`,gap:`12px`,marginBottom:`16px`,alignItems:`center`},children:[(0,t.jsx)(g,{variant:`circle`,width:`40px`,height:`40px`}),(0,t.jsx)(`div`,{style:{flex:1},children:(0,t.jsx)(g,{variant:`text`,width:`40%`,height:`14px`})})]}),(0,t.jsxs)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`12px`},children:[(0,t.jsx)(g,{variant:`text`,width:`80%`,height:`18px`}),(0,t.jsx)(_,{lines:2,lastLineWidth:`60%`})]})]})}function y({count:e=3,hasIcon:n=!0}){let r={background:`#ffffff`,borderRadius:`12px`,padding:`0 20px`,boxShadow:`0 1px 3px rgba(0,0,0,0.04)`},i={display:`flex`,alignItems:`center`,gap:`14px`,padding:`18px 0`,borderBottom:`1px solid #f1f3f5`},a={...i,borderBottom:`none`},o={flex:1,display:`flex`,flexDirection:`column`,gap:`8px`};return(0,t.jsx)(`div`,{style:r,children:Array.from({length:e},(r,s)=>(0,t.jsxs)(`div`,{style:s===e-1?a:i,children:[n&&(0,t.jsx)(g,{variant:`circle`,width:`44px`,height:`44px`}),(0,t.jsxs)(`div`,{style:o,children:[(0,t.jsx)(g,{variant:`text`,width:`60%`,height:`16px`}),(0,t.jsx)(g,{variant:`text`,width:`40%`,height:`14px`})]}),(0,t.jsx)(g,{variant:`text`,width:`20px`,height:`20px`})]},s))})}function b({icon:n=`✅`,title:r,description:i,buttonText:a,onButtonClick:o,type:s=`success`,className:c=``,style:l={},...u}){let d={display:`flex`,flexDirection:`column`,alignItems:`center`,textAlign:`center`,gap:`14px`,paddingTop:`32px`,...l},f={fontSize:`48px`,lineHeight:1,marginBottom:`4px`,fontFamily:`var(--font-emoji, TossFace)`},p={fontSize:`20px`,fontWeight:`700`,lineHeight:1.3,margin:0,letterSpacing:`-0.3px`,color:`#191f28`},m={fontSize:`13px`,color:`#888`,lineHeight:1.65,margin:0,wordBreak:`keep-all`},h={width:`100%`,padding:`14px`,background:`#b8e8fd`,color:`#111`,fontSize:`15px`,fontWeight:`700`,border:`none`,borderRadius:`50px`,cursor:`pointer`,fontFamily:`inherit`,position:`relative`,overflow:`hidden`},g={hidden:{scale:.25,opacity:0},visible:{scale:[.25,1.22,.9,1],opacity:1,transition:{duration:.58,ease:[.34,1.56,.64,1]}}};return(0,t.jsxs)(e.motion.div,{style:d,className:c,initial:`hidden`,animate:`visible`,variants:{hidden:{opacity:0,y:14,filter:`blur(3px)`},visible:{opacity:1,y:0,filter:`blur(0px)`,transition:{duration:.28,ease:[.22,1,.36,1]}}},...u,children:[(0,t.jsx)(e.motion.div,{style:f,variants:g,children:n}),r&&(0,t.jsx)(`p`,{style:p,children:r}),i&&(0,t.jsx)(`p`,{style:m,children:i}),a&&o&&(0,t.jsx)(e.motion.button,{style:h,onClick:o,whileHover:{opacity:.92,y:-1,boxShadow:`0 6px 22px rgba(184, 232, 253, 0.65)`},whileTap:{scale:.97,y:0,boxShadow:`none`,transition:{duration:.08}},children:a})]})}function x({children:e,width:n=1,color:r=`#e9ecef`,style:i=`solid`,radius:a=0,top:o,right:s,bottom:c,left:l,padding:u,className:d=``,...f}){let p=o!==void 0||s!==void 0||c!==void 0||l!==void 0,m=(e,t)=>{if(t===!1)return`none`;if(t===!0)return`${n}px ${i} ${r}`;if(typeof t==`string`)return`${n}px ${i} ${t}`};return(0,t.jsx)(`div`,{style:{...p?{borderTop:o===void 0?`none`:m(`top`,o),borderRight:s===void 0?`none`:m(`right`,s),borderBottom:c===void 0?`none`:m(`bottom`,c),borderLeft:l===void 0?`none`:m(`left`,l)}:{border:`${n}px ${i} ${r}`},borderRadius:typeof a==`number`?`${a}px`:a,...u&&{padding:typeof u==`number`?`${u}px`:u}},className:d,...f,children:e})}function S({children:e,variant:n=`default`,padding:r=20,className:i=``,...a}){return(0,t.jsx)(`div`,{style:{...{default:{border:`1px solid #e9ecef`,borderRadius:`12px`},primary:{border:`2px solid #b8e8fd`,borderRadius:`12px`},secondary:{border:`2px solid #f4f4fe`,borderRadius:`12px`},dashed:{border:`2px dashed #e9ecef`,borderRadius:`12px`},shadow:{border:`1px solid #e9ecef`,borderRadius:`12px`,boxShadow:`0 2px 8px rgba(0,0,0,0.04)`}}[n],padding:typeof r==`number`?`${r}px`:r},className:i,...a,children:e})}function C({orientation:e=`horizontal`,color:n=`#f1f3f5`,thickness:r=1,spacing:i=20,dashed:a=!1,className:o=``,style:s={},...c}){let l=e===`horizontal`;return(0,t.jsx)(`div`,{style:{background:a?`transparent`:n,...a&&{borderTop:l?`${r}px dashed ${n}`:`none`,borderLeft:l?`none`:`${r}px dashed ${n}`},...l?{width:`100%`,height:a?`0`:`${r}px`,margin:`${i}px 0`}:{width:a?`0`:`${r}px`,height:`100%`,margin:`0 ${i}px`},...s},className:o,...c})}function w({children:e,title:n,divider:r=!0,padding:i=20,className:a=``,...o}){let s={background:`#ffffff`,borderRadius:`12px`,border:`1px solid #f1f3f5`,overflow:`hidden`},c={fontSize:`16px`,fontWeight:`600`,color:`#191f28`,padding:typeof i==`number`?`${i}px`:i,borderBottom:r?`1px solid #f1f3f5`:`none`,margin:0},l={padding:typeof i==`number`?`${i}px`:i};return(0,t.jsxs)(`div`,{style:s,className:a,...o,children:[n&&(0,t.jsx)(`div`,{style:c,children:n}),(0,t.jsx)(`div`,{style:l,children:e})]})}function T(){let[e,t]=(0,n.useState)(!1);return{isOpen:e,openDialog:()=>t(!0),closeDialog:()=>t(!1)}}function E({isOpen:r,onClose:i,title:a,children:o,confirmText:s=`확인`,icon:c,type:l=`info`,...u}){(0,n.useEffect)(()=>{if(!r)return;let e=e=>{e.key===`Escape`&&i()};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[r,i]);let{icon:d,color:f}=(()=>{switch(l){case`success`:return{icon:`✅`,color:`#4bd964`};case`warning`:return{icon:`⚠️`,color:`#ff4d00`};case`error`:return{icon:`❌`,color:`#cc0000`};default:return{icon:`ℹ️`,color:`#b8e8fd`}}})(),p={position:`fixed`,inset:0,background:`rgba(0, 0, 0, 0.5)`,display:`flex`,alignItems:`center`,justifyContent:`center`,zIndex:1e3,padding:`20px`},m={background:`#ffffff`,borderRadius:`16px`,maxWidth:`400px`,width:`100%`,boxShadow:`0 20px 60px rgba(0, 0, 0, 0.3)`,overflow:`hidden`},h={padding:`32px 24px 24px`,textAlign:`center`},g={fontSize:`48px`,marginBottom:`16px`,lineHeight:1,fontFamily:`var(--font-emoji, TossFace)`},_={fontSize:`20px`,fontWeight:`700`,color:`#191f28`,marginBottom:`12px`,lineHeight:1.3},v={fontSize:`14px`,color:`#6b7684`,lineHeight:1.6,marginBottom:`24px`},y={width:`100%`,padding:`14px`,background:f,color:l===`warning`||l===`error`?`#ffffff`:`#111111`,fontSize:`15px`,fontWeight:`700`,border:`none`,borderRadius:`8px`,cursor:`pointer`,fontFamily:`inherit`};return(0,t.jsx)(e.AnimatePresence,{children:r&&(0,t.jsx)(e.motion.div,{style:p,onClick:i,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.2},...u,children:(0,t.jsx)(e.motion.div,{style:m,onClick:e=>e.stopPropagation(),initial:{scale:.9,opacity:0,y:20},animate:{scale:1,opacity:1,y:0},exit:{scale:.9,opacity:0,y:20},transition:{type:`spring`,damping:25,stiffness:300},children:(0,t.jsxs)(`div`,{style:h,children:[(c||d)&&(0,t.jsx)(e.motion.div,{style:g,initial:{scale:0,rotate:-180},animate:{scale:1,rotate:0},transition:{type:`spring`,damping:15,stiffness:200,delay:.1},children:c||d}),a&&(0,t.jsx)(`div`,{style:_,children:a}),o&&(0,t.jsx)(`div`,{style:v,children:o}),(0,t.jsx)(e.motion.button,{style:y,onClick:i,whileHover:{opacity:.9},whileTap:{scale:.97},children:s})]})})})})}function D({isOpen:r,onClose:i,onConfirm:a,title:o,children:s,confirmText:c=`확인`,cancelText:l=`취소`,icon:u,type:d=`info`,...f}){(0,n.useEffect)(()=>{if(!r)return;let e=e=>{e.key===`Escape`&&i()};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[r,i]);let p=()=>{a?.(),i()},{icon:m,color:h}=(()=>{switch(d){case`success`:return{icon:`✅`,color:`#4bd964`};case`warning`:return{icon:`⚠️`,color:`#ff4d00`};case`error`:return{icon:`❌`,color:`#cc0000`};default:return{icon:`❓`,color:`#b8e8fd`}}})(),g={position:`fixed`,inset:0,background:`rgba(0, 0, 0, 0.5)`,display:`flex`,alignItems:`center`,justifyContent:`center`,zIndex:1e3,padding:`20px`},_={background:`#ffffff`,borderRadius:`16px`,maxWidth:`400px`,width:`100%`,boxShadow:`0 20px 60px rgba(0, 0, 0, 0.3)`,overflow:`hidden`},v={padding:`32px 24px 24px`,textAlign:`center`},y={fontSize:`48px`,marginBottom:`16px`,lineHeight:1,fontFamily:`var(--font-emoji, TossFace)`},b={fontSize:`20px`,fontWeight:`700`,color:`#191f28`,marginBottom:`12px`,lineHeight:1.3},x={fontSize:`14px`,color:`#6b7684`,lineHeight:1.6,marginBottom:`24px`},S={display:`flex`,gap:`12px`},C={flex:1,padding:`14px`,background:`#f1f3f5`,color:`#495057`,fontSize:`15px`,fontWeight:`600`,border:`none`,borderRadius:`8px`,cursor:`pointer`,fontFamily:`inherit`},w={flex:1,padding:`14px`,background:h,color:d===`warning`||d===`error`?`#ffffff`:`#111111`,fontSize:`15px`,fontWeight:`700`,border:`none`,borderRadius:`8px`,cursor:`pointer`,fontFamily:`inherit`};return(0,t.jsx)(e.AnimatePresence,{children:r&&(0,t.jsx)(e.motion.div,{style:g,onClick:i,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.2},...f,children:(0,t.jsx)(e.motion.div,{style:_,onClick:e=>e.stopPropagation(),initial:{scale:.9,opacity:0,y:20},animate:{scale:1,opacity:1,y:0},exit:{scale:.9,opacity:0,y:20},transition:{type:`spring`,damping:25,stiffness:300},children:(0,t.jsxs)(`div`,{style:v,children:[(u||m)&&(0,t.jsx)(e.motion.div,{style:y,initial:{scale:0,rotate:-180},animate:{scale:1,rotate:0},transition:{type:`spring`,damping:15,stiffness:200,delay:.1},children:u||m}),o&&(0,t.jsx)(`div`,{style:b,children:o}),s&&(0,t.jsx)(`div`,{style:x,children:s}),(0,t.jsxs)(`div`,{style:S,children:[(0,t.jsx)(e.motion.button,{style:C,onClick:i,whileHover:{opacity:.9},whileTap:{scale:.97},children:l}),(0,t.jsx)(e.motion.button,{style:w,onClick:p,whileHover:{opacity:.9},whileTap:{scale:.97},children:c})]})]})})})})}var O={linear:[0,0,1,1],ease:[.25,.1,.25,1],easeIn:[.42,0,1,1],easeOut:[0,0,.58,1],easeInOut:[.42,0,.58,1],spring:{type:`spring`,damping:25,stiffness:300},springBouncy:{type:`spring`,damping:15,stiffness:200},springSoft:{type:`spring`,damping:30,stiffness:150},toss:[.22,1,.36,1],smooth:[.34,1.56,.64,1],bounce:[.68,-.55,.265,1.55],anticipate:[.36,0,.66,-.56]},k={fadeIn:{from:{opacity:0},to:{opacity:1},duration:.3,ease:O.ease},fadeOut:{from:{opacity:1},to:{opacity:0},duration:.3,ease:O.ease},slideUp:{from:{y:20,opacity:0},to:{y:0,opacity:1},duration:.4,ease:O.toss},slideDown:{from:{y:-20,opacity:0},to:{y:0,opacity:1},duration:.4,ease:O.toss},slideLeft:{from:{x:20,opacity:0},to:{x:0,opacity:1},duration:.4,ease:O.toss},slideRight:{from:{x:-20,opacity:0},to:{x:0,opacity:1},duration:.4,ease:O.toss},scaleIn:{from:{scale:.8,opacity:0},to:{scale:1,opacity:1},duration:.3,ease:O.smooth},scaleOut:{from:{scale:1,opacity:1},to:{scale:.8,opacity:0},duration:.3,ease:O.ease},scaleBounce:{from:{scale:.25,opacity:0},to:{scale:1,opacity:1},duration:.58,ease:O.smooth},rotateIn:{from:{rotate:-180,scale:0,opacity:0},to:{rotate:0,scale:1,opacity:1},duration:.5,ease:O.spring},blurIn:{from:{filter:`blur(10px)`,opacity:0},to:{filter:`blur(0px)`,opacity:1},duration:.4,ease:O.ease},entrance:{from:{y:20,opacity:0,filter:`blur(3px)`},to:{y:0,opacity:1,filter:`blur(0px)`},duration:.5,ease:O.toss},pop:{from:{scale:.9,opacity:0},to:{scale:[.9,1.05,1],opacity:1},duration:.4,ease:O.bounce}};function A(){let[t,n]=(0,e.useAnimate)(),r=async(e,t,r={})=>{let{from:i,to:a,duration:o,ease:s,delay:c=0}={...t,...r};return i&&await n(e,i,{duration:0}),n(e,a,{duration:o,ease:s,delay:c})},i=async e=>{for(let t of e){let{target:e,motion:n,options:i}=t;await r(e,n,i)}},a=async e=>{let t=e.map(({target:e,motion:t,options:n})=>r(e,t,n));return Promise.all(t)},o=async(e,t=.1)=>{let n=e.map(({target:e,motion:n,options:i},a)=>r(e,n,{...i,delay:(i?.delay||0)+t*a}));return Promise.all(n)};return{scope:t,animate:n,play:r,serial:i,parallel:a,stagger:o,timeline:async e=>{for(let t of e)t.type===`serial`?await i(t.animations):t.type===`parallel`?await a(t.animations):t.type===`stagger`?await o(t.animations,t.delayBetween):t.type===`wait`&&await new Promise(e=>setTimeout(e,t.duration*1e3))}}}function j({from:e,to:t,duration:n=.3,ease:r=O.ease}){return{from:e,to:t,duration:n,ease:r}}function M(...e){return e.reduce((e,t)=>({from:{...e.from,...t.from},to:{...e.to,...t.to},duration:Math.max(e.duration||0,t.duration||0),ease:t.ease||e.ease}),{})}function N({children:n,motion:r=`fadeIn`,delay:i=0,onComplete:a,className:o=``,style:s={},...c}){let{from:l,to:u,duration:d,ease:f}=k[r]||k.fadeIn;return(0,t.jsx)(e.motion.div,{initial:l,animate:u,transition:{duration:d,ease:f,delay:i},onAnimationComplete:a,className:o,style:s,...c,children:n})}function P({children:n,motion:r=`slideUp`,delay:i=0,once:a=!0,amount:o=.3,className:s=``,style:c={},...l}){let{from:u,to:d,duration:f,ease:p}=k[r]||k.slideUp;return(0,t.jsx)(e.motion.div,{initial:u,whileInView:d,viewport:{once:a,amount:o},transition:{duration:f,ease:p,delay:i},className:s,style:c,...l,children:n})}function F({children:n,motion:r=`fadeIn`,staggerDelay:i=.1,className:a=``,style:o={},...s}){let{from:c,to:l,duration:u,ease:d}=k[r]||k.fadeIn;return(0,t.jsx)(e.motion.div,{initial:`hidden`,animate:`visible`,variants:{hidden:{},visible:{transition:{staggerChildren:i}}},className:a,style:o,...s,children:Array.isArray(n)?n.map((n,r)=>(0,t.jsx)(e.motion.div,{variants:{hidden:c,visible:l},transition:{duration:u,ease:d},children:n},r)):(0,t.jsx)(e.motion.div,{variants:{hidden:c,visible:l},transition:{duration:u,ease:d},children:n})})}exports.AlertDialog=E,exports.Animate=N,exports.AnimateOnView=P,Object.defineProperty(exports,`AnimatePresence`,{enumerable:!0,get:function(){return e.AnimatePresence}}),exports.AnimateStagger=F,exports.Border=x,exports.BorderBox=S,exports.Button=r,exports.Card=i,exports.ColorBlock=f,exports.ConfirmDialog=D,exports.Divider=C,exports.IconButton=u,exports.ListRow=d,exports.ListSection=p,exports.Modal=c,exports.Section=w,exports.Skeleton=g,exports.SkeletonCard=v,exports.SkeletonListRow=y,exports.SkeletonText=_,exports.StatusSection=b,exports.Stepper=m,exports.TextField=a,exports.Toast=o,exports.combineMotions=M,exports.createMotion=j,exports.easings=O,exports.motions=k,exports.useAnimation=A,exports.useDialog=T,exports.useModal=l,exports.useToast=s;