@vacano/ui 1.15.7 → 1.16.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 +1 -1
- package/dist/index.cjs +460 -782
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +0 -53
- package/dist/index.js +1936 -2969
- package/dist/index.js.map +1 -1
- package/package.json +2 -3
package/dist/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./keyboard-Cexig8lu.cjs"),F=require("./index-BUoqL3Q7.cjs"),n=require("./X-CI1qRJDP.cjs"),z=require("@emotion/react"),a=require("react"),i=require("./ToggleGroup-DXq3FgdQ.cjs"),C=require("./tooling-Dflq0Y98.cjs"),Ne=require("react-dom"),$e=require("./CircleX-BzaN6v37.cjs"),gt=z.css`
|
|
2
2
|
*,
|
|
3
3
|
*::before,
|
|
4
4
|
*::after {
|
|
@@ -100,21 +100,21 @@
|
|
|
100
100
|
:focus:not(:focus-visible) {
|
|
101
101
|
outline: none;
|
|
102
102
|
}
|
|
103
|
-
`,
|
|
103
|
+
`,ft=()=>n.jsx(z.Global,{styles:gt}),ht=i.styled.div`
|
|
104
104
|
display: flex;
|
|
105
105
|
flex-direction: column;
|
|
106
106
|
gap: ${({$variant:e})=>e==="splitted"?"8px":"0"};
|
|
107
|
-
`,
|
|
108
|
-
border-bottom: ${({$variant:e})=>e==="outlined"?`1px solid ${
|
|
107
|
+
`,yt=i.styled.div`
|
|
108
|
+
border-bottom: ${({$variant:e})=>e==="outlined"?`1px solid ${r.COLORS.gray}`:"none"};
|
|
109
109
|
border-radius: ${({$variant:e})=>e==="splitted"?"8px":"0"};
|
|
110
110
|
background-color: ${({$variant:e})=>e==="splitted"?"#f9fafb":"transparent"};
|
|
111
111
|
opacity: ${({$disabled:e})=>e?.5:1};
|
|
112
112
|
pointer-events: ${({$disabled:e})=>e?"none":"auto"};
|
|
113
113
|
|
|
114
114
|
&:first-of-type {
|
|
115
|
-
border-top: ${({$variant:e})=>e==="outlined"?`1px solid ${
|
|
115
|
+
border-top: ${({$variant:e})=>e==="outlined"?`1px solid ${r.COLORS.gray}`:"none"};
|
|
116
116
|
}
|
|
117
|
-
`,
|
|
117
|
+
`,bt=i.styled.button`
|
|
118
118
|
display: flex;
|
|
119
119
|
align-items: center;
|
|
120
120
|
justify-content: space-between;
|
|
@@ -125,43 +125,43 @@
|
|
|
125
125
|
cursor: ${({$disabled:e})=>e?"not-allowed":"pointer"};
|
|
126
126
|
font-size: 14px;
|
|
127
127
|
font-weight: 600;
|
|
128
|
-
color: ${({$expanded:e})=>e?
|
|
128
|
+
color: ${({$expanded:e})=>e?r.COLORS.black:r.COLORS["iron-grey"]};
|
|
129
129
|
text-align: left;
|
|
130
130
|
outline: none;
|
|
131
131
|
transition: color 0.2s ease;
|
|
132
132
|
|
|
133
133
|
&:hover {
|
|
134
|
-
color: ${
|
|
134
|
+
color: ${r.COLORS.black};
|
|
135
135
|
}
|
|
136
|
-
|
|
136
|
+
`,$t=i.styled.span`
|
|
137
137
|
display: flex;
|
|
138
138
|
align-items: center;
|
|
139
139
|
justify-content: center;
|
|
140
140
|
width: 20px;
|
|
141
141
|
height: 20px;
|
|
142
142
|
flex-shrink: 0;
|
|
143
|
-
color: ${
|
|
143
|
+
color: ${r.COLORS["iron-grey"]};
|
|
144
144
|
transition: transform 0.2s ease;
|
|
145
145
|
transform: rotate(${({$expanded:e})=>e?"180deg":"0deg"});
|
|
146
|
-
`,
|
|
146
|
+
`,St=i.styled.div`
|
|
147
147
|
display: grid;
|
|
148
148
|
grid-template-rows: ${({$expanded:e})=>e?"1fr":"0fr"};
|
|
149
149
|
transition: grid-template-rows 0.2s ease;
|
|
150
|
-
`,
|
|
150
|
+
`,Ot=i.styled.div`
|
|
151
151
|
overflow: hidden;
|
|
152
|
-
`,
|
|
152
|
+
`,Ct=i.styled.div`
|
|
153
153
|
padding: 0 16px 14px;
|
|
154
154
|
font-size: 14px;
|
|
155
155
|
line-height: 1.5;
|
|
156
|
-
color: ${
|
|
157
|
-
`,
|
|
156
|
+
color: ${r.COLORS["iron-grey"]};
|
|
157
|
+
`,Q=C.newClassNameGetter("accordion"),wt=()=>n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:n.jsx("polyline",{points:"6 9 12 15 18 9"})}),vt=({className:e,classnames:o,defaultValue:t=[],items:l,multiple:s=!1,onChange:d,ref:x,value:c,variant:p="outlined",...g})=>{const[f,h]=a.useState(t),y=c!==void 0,u=y?c:f,S=a.useCallback(b=>{const $=u.includes(b);let w;s?w=$?u.filter(R=>R!==b):[...u,b]:w=$?[]:[b],y||h(w),d==null||d(w)},[u,y,s,d]);return n.jsx(ht,{...g,ref:x,$variant:p,className:Q("container",e),role:"region",children:l.map(b=>{const $=u.includes(b.value);return n.jsxs(yt,{$variant:p,$disabled:!!b.disabled,className:Q("item",o==null?void 0:o.item),children:[n.jsxs(bt,{type:"button","aria-expanded":$,$disabled:!!b.disabled,$expanded:$,disabled:b.disabled,onClick:()=>S(b.value),className:Q("trigger",o==null?void 0:o.trigger),children:[b.title,n.jsx($t,{$expanded:$,className:Q("icon",o==null?void 0:o.icon),children:n.jsx(wt,{})})]}),n.jsx(St,{$expanded:$,children:n.jsx(Ot,{children:n.jsx(Ct,{className:Q("content",o==null?void 0:o.content),children:b.content})})})]},b.value)})})},mt={none:"0",sm:"8px",md:"12px",lg:"16px",full:"9999px"},kt={normal:r.COLORS.black,success:r.COLORS.green,warning:r.COLORS.yellow,danger:r.COLORS.red},Rt=i.styled.div`
|
|
158
158
|
display: flex;
|
|
159
159
|
align-items: ${({$center:e})=>e?"center":"flex-start"};
|
|
160
160
|
gap: 12px;
|
|
161
161
|
padding: 16px;
|
|
162
|
-
border-radius: ${({$radius:e})=>
|
|
163
|
-
background-color: ${
|
|
164
|
-
`,
|
|
162
|
+
border-radius: ${({$radius:e})=>mt[e]};
|
|
163
|
+
background-color: ${r.COLORS.gray};
|
|
164
|
+
`,Lt=i.styled.div`
|
|
165
165
|
flex-shrink: 0;
|
|
166
166
|
display: flex;
|
|
167
167
|
align-items: center;
|
|
@@ -169,9 +169,9 @@
|
|
|
169
169
|
width: 40px;
|
|
170
170
|
height: 40px;
|
|
171
171
|
border-radius: 50%;
|
|
172
|
-
background-color: ${
|
|
172
|
+
background-color: ${r.COLORS.white};
|
|
173
173
|
box-shadow:
|
|
174
|
-
0 0 0 4px ${
|
|
174
|
+
0 0 0 4px ${r.COLORS.gray},
|
|
175
175
|
0 0 0 5px rgba(0, 0, 0, 0.06);
|
|
176
176
|
|
|
177
177
|
&::after {
|
|
@@ -185,87 +185,87 @@
|
|
|
185
185
|
width: 28px;
|
|
186
186
|
height: 28px;
|
|
187
187
|
border-radius: 50%;
|
|
188
|
-
background-color: ${({$variant:e})=>
|
|
189
|
-
color: ${
|
|
188
|
+
background-color: ${({$variant:e})=>kt[e]};
|
|
189
|
+
color: ${r.COLORS.white};
|
|
190
190
|
}
|
|
191
191
|
|
|
192
192
|
> span svg {
|
|
193
193
|
width: 16px;
|
|
194
194
|
height: 16px;
|
|
195
195
|
}
|
|
196
|
-
`,
|
|
196
|
+
`,jt=i.styled.div`
|
|
197
197
|
display: flex;
|
|
198
198
|
flex-direction: column;
|
|
199
199
|
gap: 2px;
|
|
200
200
|
flex: 1;
|
|
201
201
|
min-width: 0;
|
|
202
|
-
`,
|
|
202
|
+
`,Nt=i.styled.div`
|
|
203
203
|
font-size: 14px;
|
|
204
204
|
font-weight: 600;
|
|
205
|
-
color: ${
|
|
205
|
+
color: ${r.COLORS.black};
|
|
206
206
|
line-height: 1.4;
|
|
207
|
-
`,
|
|
207
|
+
`,Et=i.styled.div`
|
|
208
208
|
font-size: 14px;
|
|
209
|
-
color: ${
|
|
209
|
+
color: ${r.COLORS["iron-grey"]};
|
|
210
210
|
line-height: 1.5;
|
|
211
|
-
`,
|
|
211
|
+
`,de=C.newClassNameGetter("alert"),It=({className:e,classnames:o,description:t,icon:l,radius:s="lg",ref:d,title:x,variant:c="normal",...p})=>n.jsxs(Rt,{...p,ref:d,role:"alert",className:de("container",e),$radius:s,$center:!t,children:[l&&n.jsx(Lt,{$variant:c,className:de("icon",o==null?void 0:o.icon),children:n.jsx("span",{children:l})}),n.jsxs(jt,{children:[x&&n.jsx(Nt,{className:de("title",o==null?void 0:o.title),children:x}),t&&n.jsx(Et,{className:de("description",o==null?void 0:o.description),children:t})]})]}),Tt=e=>{var t,l;const o=e.trim().split(/\s+/);if(o.length>=2){const s=((t=o[0])==null?void 0:t[0])??"",d=((l=o[o.length-1])==null?void 0:l[0])??"";return(s+d).toUpperCase()}return e.slice(0,2).toUpperCase()},le={sm:32,md:40,lg:56},Je={sm:12,md:14,lg:20},Ee={sm:18,md:22,lg:30},zt={sm:"6px",md:"10px",lg:"14px",full:"50%"},Se={default:{background:r.COLORS.gray,color:r.COLORS.black,border:r.COLORS.gray},primary:{background:r.COLORS["baltic-blue"],color:r.COLORS.white,border:r.COLORS["baltic-blue"]},success:{background:r.COLORS.green,color:r.COLORS.white,border:r.COLORS.green},warning:{background:r.COLORS.yellow,color:r.COLORS.black,border:r.COLORS.yellow},danger:{background:r.COLORS.red,color:r.COLORS.white,border:r.COLORS.red}},At=i.styled.div`
|
|
212
212
|
position: relative;
|
|
213
213
|
display: inline-flex;
|
|
214
214
|
align-items: center;
|
|
215
215
|
justify-content: center;
|
|
216
216
|
overflow: hidden;
|
|
217
|
-
width: ${({$size:e})=>
|
|
218
|
-
height: ${({$size:e})=>
|
|
219
|
-
border-radius: ${({$radius:e})=>
|
|
220
|
-
background-color: ${({$color:e})=>
|
|
221
|
-
color: ${({$color:e})=>
|
|
222
|
-
font-size: ${({$size:e})=>
|
|
217
|
+
width: ${({$size:e})=>le[e]}px;
|
|
218
|
+
height: ${({$size:e})=>le[e]}px;
|
|
219
|
+
border-radius: ${({$radius:e})=>zt[e]};
|
|
220
|
+
background-color: ${({$color:e})=>Se[e].background};
|
|
221
|
+
color: ${({$color:e})=>Se[e].color};
|
|
222
|
+
font-size: ${({$size:e})=>Je[e]}px;
|
|
223
223
|
font-weight: 600;
|
|
224
224
|
line-height: 1;
|
|
225
225
|
flex-shrink: 0;
|
|
226
226
|
user-select: none;
|
|
227
227
|
box-sizing: border-box;
|
|
228
|
-
${({$bordered:e,$color:
|
|
228
|
+
${({$bordered:e,$color:o})=>e&&`box-shadow: 0 0 0 2px #fff, 0 0 0 4px ${Se[o].border};`}
|
|
229
229
|
${({$disabled:e})=>e&&"opacity: 0.5; pointer-events: none;"}
|
|
230
|
-
`,
|
|
230
|
+
`,Pt=i.styled.img`
|
|
231
231
|
width: 100%;
|
|
232
232
|
height: 100%;
|
|
233
233
|
object-fit: cover;
|
|
234
|
-
`,
|
|
234
|
+
`,Ie=i.styled.span`
|
|
235
235
|
display: inline-flex;
|
|
236
236
|
align-items: center;
|
|
237
237
|
justify-content: center;
|
|
238
238
|
|
|
239
239
|
& svg {
|
|
240
|
-
width: ${({$size:e})=>
|
|
241
|
-
height: ${({$size:e})=>
|
|
240
|
+
width: ${({$size:e})=>Ee[e]}px;
|
|
241
|
+
height: ${({$size:e})=>Ee[e]}px;
|
|
242
242
|
}
|
|
243
|
-
`,
|
|
243
|
+
`,Bt=i.styled.span`
|
|
244
244
|
letter-spacing: 0.5px;
|
|
245
|
-
`,
|
|
245
|
+
`,J=C.newClassNameGetter("avatar"),et=({bordered:e=!1,className:o,classnames:t,color:l="default",disabled:s=!1,icon:d,name:x,radius:c="full",ref:p,size:g="md",src:f,...h})=>{const[y,u]=a.useState(!1),S=f&&!y;return n.jsx(At,{...h,ref:p,className:J("container",o),$size:g,$radius:c,$color:l,$bordered:e,$disabled:s,children:S?n.jsx(Pt,{className:J("image",t==null?void 0:t.image),src:f,alt:x||"",onError:()=>u(!0)}):d?n.jsx(Ie,{className:J("fallback",t==null?void 0:t.fallback),$size:g,children:d}):x?n.jsx(Bt,{className:J("initials",t==null?void 0:t.initials),children:Tt(x)}):n.jsx(Ie,{className:J("fallback",t==null?void 0:t.fallback),$size:g,children:n.jsx("svg",{viewBox:"0 0 24 24",fill:"currentColor",children:n.jsx("path",{d:"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"})})})})},Dt=i.styled.div`
|
|
246
246
|
display: inline-flex;
|
|
247
247
|
align-items: center;
|
|
248
248
|
|
|
249
249
|
& > * + * {
|
|
250
|
-
margin-left: -${({$size:e})=>Math.round(
|
|
250
|
+
margin-left: -${({$size:e})=>Math.round(le[e]*.25)}px;
|
|
251
251
|
}
|
|
252
|
-
`,
|
|
252
|
+
`,Mt=i.styled.div`
|
|
253
253
|
display: inline-flex;
|
|
254
254
|
align-items: center;
|
|
255
255
|
justify-content: center;
|
|
256
|
-
width: ${({$size:e})=>
|
|
257
|
-
height: ${({$size:e})=>
|
|
256
|
+
width: ${({$size:e})=>le[e]}px;
|
|
257
|
+
height: ${({$size:e})=>le[e]}px;
|
|
258
258
|
border-radius: 50%;
|
|
259
259
|
background-color: #e4e4e7;
|
|
260
260
|
color: #71717a;
|
|
261
|
-
font-size: ${({$size:e})=>
|
|
261
|
+
font-size: ${({$size:e})=>Je[e]}px;
|
|
262
262
|
font-weight: 600;
|
|
263
263
|
line-height: 1;
|
|
264
264
|
flex-shrink: 0;
|
|
265
|
-
`,
|
|
265
|
+
`,Te=C.newClassNameGetter("avatar-group"),_t=({children:e,className:o,classnames:t,max:l=5,ref:s,size:d="md",...x})=>{const c=a.Children.toArray(e).filter(a.isValidElement),p=c.slice(0,l),g=c.length-l;return n.jsxs(Dt,{...x,ref:s,className:Te("container",o),$size:d,children:[p.map(f=>a.isValidElement(f)?a.cloneElement(f,{size:d}):f),g>0&&n.jsxs(Mt,{className:Te("count",t==null?void 0:t.count),$size:d,children:["+",g]})]})},Ft={default:{bg:r.COLORS.black,text:r.COLORS.white,border:r.COLORS.black,flatBg:r.COLORS.gray},success:{bg:r.COLORS.green,text:r.COLORS.white,border:r.COLORS.green,flatBg:"#dcfce7"},warning:{bg:r.COLORS.yellow,text:r.COLORS.black,border:r.COLORS.yellow,flatBg:"#fef9c3"},danger:{bg:r.COLORS.red,text:r.COLORS.white,border:r.COLORS.red,flatBg:"#fee2e2"}},q={sm:{minWidth:16,height:16,fontSize:10,padding:"0 4px",dotSize:8},md:{minWidth:20,height:20,fontSize:11,padding:"0 5px",dotSize:10},lg:{minWidth:24,height:24,fontSize:12,padding:"0 6px",dotSize:12}},Gt=(e,o)=>{const t=o==="circle"?"10%":"0%";switch(e){case"top-right":return`top: 0; right: 0; transform: translate(50%, -50%) translate(-${t}, ${t});`;case"top-left":return`top: 0; left: 0; transform: translate(-50%, -50%) translate(${t}, ${t});`;case"bottom-right":return`bottom: 0; right: 0; transform: translate(50%, 50%) translate(-${t}, -${t});`;case"bottom-left":return`bottom: 0; left: 0; transform: translate(-50%, 50%) translate(${t}, -${t});`}},Ht=(e,o)=>{const t=Ft[o];switch(e){case"solid":return`background-color: ${t.bg}; color: ${t.text};`;case"flat":return`background-color: ${t.flatBg}; color: ${o==="default"?r.COLORS.black:t.bg};`;case"bordered":return`background-color: transparent; color: ${t.border}; border: 1.5px solid ${t.border};`}},Ut=i.styled.div`
|
|
266
266
|
position: relative;
|
|
267
267
|
display: inline-flex;
|
|
268
|
-
`,
|
|
268
|
+
`,Wt=i.styled.span`
|
|
269
269
|
position: absolute;
|
|
270
270
|
display: inline-flex;
|
|
271
271
|
align-items: center;
|
|
@@ -279,66 +279,66 @@
|
|
|
279
279
|
transform 0.15s ease,
|
|
280
280
|
opacity 0.15s ease;
|
|
281
281
|
|
|
282
|
-
${({$dot:e,$size:
|
|
283
|
-
width: ${
|
|
284
|
-
height: ${
|
|
282
|
+
${({$dot:e,$size:o})=>e?`
|
|
283
|
+
width: ${q[o].dotSize}px;
|
|
284
|
+
height: ${q[o].dotSize}px;
|
|
285
285
|
min-width: auto;
|
|
286
286
|
padding: 0;
|
|
287
287
|
`:`
|
|
288
|
-
min-width: ${
|
|
289
|
-
height: ${
|
|
290
|
-
font-size: ${
|
|
291
|
-
padding: ${
|
|
288
|
+
min-width: ${q[o].minWidth}px;
|
|
289
|
+
height: ${q[o].height}px;
|
|
290
|
+
font-size: ${q[o].fontSize}px;
|
|
291
|
+
padding: ${q[o].padding};
|
|
292
292
|
`}
|
|
293
293
|
|
|
294
|
-
${({$variant:e,$color:
|
|
294
|
+
${({$variant:e,$color:o})=>Ht(e,o)}
|
|
295
295
|
|
|
296
|
-
${({$placement:e,$shape:
|
|
296
|
+
${({$placement:e,$shape:o})=>Gt(e,o)}
|
|
297
297
|
|
|
298
298
|
${({$showOutline:e})=>e&&`
|
|
299
|
-
box-shadow: 0 0 0 2px ${
|
|
299
|
+
box-shadow: 0 0 0 2px ${r.COLORS.white};
|
|
300
300
|
`}
|
|
301
301
|
|
|
302
302
|
${({$invisible:e})=>e&&`
|
|
303
303
|
opacity: 0;
|
|
304
304
|
transform: scale(0);
|
|
305
305
|
`}
|
|
306
|
-
`,
|
|
306
|
+
`,ze=C.newClassNameGetter("badge"),Xt=({children:e,className:o,classnames:t,color:l="default",content:s,dot:d=!1,invisible:x=!1,placement:c="top-right",ref:p,shape:g="rectangle",showOutline:f=!0,size:h="md",variant:y="solid",...u})=>n.jsxs(Ut,{...u,ref:p,className:ze("container",o),children:[e,n.jsx(Wt,{className:ze("badge",t==null?void 0:t.badge),$color:l,$dot:d,$invisible:x,$placement:c,$shape:g,$showOutline:f,$size:h,$variant:y,children:!d&&s})]}),Yt=({children:e,...o})=>n.jsx("li",{...o,children:e}),K={sm:{fontSize:12,gap:4,padding:"4px 8px"},md:{fontSize:14,gap:6,padding:"6px 12px"},lg:{fontSize:16,gap:8,padding:"8px 16px"}},Kt=i.styled.nav`
|
|
307
307
|
display: inline-flex;
|
|
308
308
|
align-items: center;
|
|
309
|
-
${({$variant:e,$size:
|
|
310
|
-
background-color: ${
|
|
309
|
+
${({$variant:e,$size:o})=>{const{padding:t}=K[o];switch(e){case"solid":return`
|
|
310
|
+
background-color: ${r.COLORS.gray};
|
|
311
311
|
border-radius: 10px;
|
|
312
|
-
padding: ${
|
|
312
|
+
padding: ${t};
|
|
313
313
|
`;case"bordered":return`
|
|
314
|
-
border: 1px solid ${
|
|
314
|
+
border: 1px solid ${r.COLORS.gray};
|
|
315
315
|
border-radius: 10px;
|
|
316
|
-
padding: ${
|
|
316
|
+
padding: ${t};
|
|
317
317
|
`;default:return""}}}
|
|
318
|
-
`,
|
|
318
|
+
`,qt=i.styled.ol`
|
|
319
319
|
display: flex;
|
|
320
320
|
align-items: center;
|
|
321
|
-
gap: ${({$size:e})=>
|
|
321
|
+
gap: ${({$size:e})=>K[e].gap}px;
|
|
322
322
|
list-style: none;
|
|
323
323
|
margin: 0;
|
|
324
324
|
padding: 0;
|
|
325
325
|
flex-wrap: wrap;
|
|
326
|
-
`,
|
|
326
|
+
`,Ae=i.styled.li`
|
|
327
327
|
display: inline-flex;
|
|
328
328
|
align-items: center;
|
|
329
|
-
gap: ${({$size:e})=>
|
|
330
|
-
font-size: ${({$size:e})=>
|
|
329
|
+
gap: ${({$size:e})=>K[e].gap}px;
|
|
330
|
+
font-size: ${({$size:e})=>K[e].fontSize}px;
|
|
331
331
|
line-height: 1.5;
|
|
332
|
-
color: ${({$current:e})=>e?
|
|
332
|
+
color: ${({$current:e})=>e?r.COLORS.black:r.COLORS["iron-grey"]};
|
|
333
333
|
font-weight: ${({$current:e})=>e?600:400};
|
|
334
|
-
${({$disabled:e,$current:
|
|
335
|
-
`,
|
|
334
|
+
${({$disabled:e,$current:o})=>e&&!o&&"opacity: 0.5; pointer-events: none;"}
|
|
335
|
+
`,Vt=i.styled.a`
|
|
336
336
|
display: inline-flex;
|
|
337
337
|
align-items: center;
|
|
338
338
|
gap: 4px;
|
|
339
339
|
text-decoration: none;
|
|
340
340
|
color: inherit;
|
|
341
|
-
cursor: ${({$current:e,$disabled:
|
|
341
|
+
cursor: ${({$current:e,$disabled:o})=>e||o?"default":"pointer"};
|
|
342
342
|
transition: color 0.15s ease;
|
|
343
343
|
|
|
344
344
|
& svg {
|
|
@@ -346,48 +346,48 @@
|
|
|
346
346
|
height: 1em;
|
|
347
347
|
}
|
|
348
348
|
|
|
349
|
-
${({$current:e,$disabled:
|
|
349
|
+
${({$current:e,$disabled:o})=>!e&&!o&&`
|
|
350
350
|
&:hover {
|
|
351
|
-
color: ${
|
|
351
|
+
color: ${r.COLORS.black};
|
|
352
352
|
}
|
|
353
353
|
`}
|
|
354
|
-
`,
|
|
354
|
+
`,Zt=i.styled.span`
|
|
355
355
|
display: inline-flex;
|
|
356
356
|
align-items: center;
|
|
357
|
-
color: ${
|
|
358
|
-
font-size: ${({$size:e})=>
|
|
357
|
+
color: ${r.COLORS["iron-grey"]};
|
|
358
|
+
font-size: ${({$size:e})=>K[e].fontSize}px;
|
|
359
359
|
user-select: none;
|
|
360
360
|
|
|
361
361
|
& svg {
|
|
362
|
-
width: ${({$size:e})=>
|
|
363
|
-
height: ${({$size:e})=>
|
|
362
|
+
width: ${({$size:e})=>K[e].fontSize-2}px;
|
|
363
|
+
height: ${({$size:e})=>K[e].fontSize-2}px;
|
|
364
364
|
}
|
|
365
|
-
`,
|
|
365
|
+
`,Qt=i.styled.button`
|
|
366
366
|
display: inline-flex;
|
|
367
367
|
align-items: center;
|
|
368
368
|
justify-content: center;
|
|
369
369
|
padding: 0 4px;
|
|
370
370
|
border: none;
|
|
371
371
|
background: transparent;
|
|
372
|
-
color: ${
|
|
372
|
+
color: ${r.COLORS["iron-grey"]};
|
|
373
373
|
font-size: inherit;
|
|
374
374
|
cursor: pointer;
|
|
375
375
|
border-radius: 4px;
|
|
376
376
|
transition: background-color 0.15s ease;
|
|
377
377
|
|
|
378
378
|
&:hover {
|
|
379
|
-
background-color: ${
|
|
380
|
-
color: ${
|
|
379
|
+
background-color: ${r.COLORS.gray};
|
|
380
|
+
color: ${r.COLORS.black};
|
|
381
381
|
}
|
|
382
|
-
`,
|
|
382
|
+
`,se=C.newClassNameGetter("breadcrumbs"),Jt=()=>n.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:n.jsx("path",{d:"m9 18 6-6-6-6"})}),eo=({children:e,className:o,classnames:t,disabled:l=!1,itemsAfterCollapse:s=1,itemsBeforeCollapse:d=1,maxItems:x,ref:c,separator:p,size:g="md",variant:f="light",...h})=>{const y=a.Children.toArray(e).filter(R=>a.isValidElement(R)),u=y.length,S=x!==void 0&&u>x,b=R=>n.jsx(Zt,{className:se("separator",t==null?void 0:t.separator),$size:g,children:p||n.jsx(Jt,{})},R),$=(R,k,N)=>{const{current:I,disabled:L,href:m,startContent:v,endContent:j}=R.props,O=I||N,T=l||L&&!O;return n.jsxs(Ae,{$size:g,$current:O,$disabled:!!T,children:[n.jsxs(Vt,{as:m&&!O?"a":"span",href:m&&!O?m:void 0,$current:O,$disabled:!!T,children:[v,R.props.children,j]}),!N&&b(`sep-${k}`)]},k)},w=()=>{if(S){const R=y.slice(0,d),k=y.slice(u-s);return n.jsxs(n.Fragment,{children:[R.map((N,I)=>$(N,I,!1)),n.jsxs(Ae,{$size:g,$current:!1,$disabled:!1,children:[n.jsx(Qt,{className:se("ellipsis",t==null?void 0:t.ellipsis),"aria-label":"Show more",children:"..."}),b("sep-ellipsis")]}),k.map((N,I)=>{const L=u-s+I;return $(N,L,L===u-1)})]})}return y.map((R,k)=>$(R,k,k===u-1))};return n.jsx(Kt,{...h,ref:c,className:se("container",o),$variant:f,$size:g,"aria-label":"Breadcrumbs",children:n.jsx(qt,{className:se("list",t==null?void 0:t.list),$size:g,children:w()})})},Pe={none:"none",sm:`0 1px 2px ${r.alpha(r.COLORS.black,5)}`,md:`0 4px 14px ${r.alpha(r.COLORS.black,10)}`,lg:`0 10px 30px ${r.alpha(r.COLORS.black,15)}`},to={none:"0",sm:"8px",md:"12px",lg:"16px"},oo=i.styled.div`
|
|
383
383
|
position: relative;
|
|
384
384
|
display: flex;
|
|
385
385
|
flex-direction: column;
|
|
386
386
|
overflow: hidden;
|
|
387
|
-
background-color: ${({$blurred:e})=>e?
|
|
388
|
-
border-radius: ${({$radius:e})=>
|
|
389
|
-
border: ${({$border:e})=>e?`1px solid ${
|
|
390
|
-
box-shadow: ${({$shadow:e})=>
|
|
387
|
+
background-color: ${({$blurred:e})=>e?r.alpha(r.COLORS.white,70):r.COLORS.white};
|
|
388
|
+
border-radius: ${({$radius:e})=>to[e]};
|
|
389
|
+
border: ${({$border:e})=>e?`1px solid ${r.alpha(r.COLORS["iron-grey"],15)}`:"none"};
|
|
390
|
+
box-shadow: ${({$shadow:e})=>Pe[e]};
|
|
391
391
|
width: ${({$fullWidth:e})=>e?"100%":"auto"};
|
|
392
392
|
opacity: ${({$disabled:e})=>e?.5:1};
|
|
393
393
|
pointer-events: ${({$disabled:e})=>e?"none":"auto"};
|
|
@@ -401,9 +401,9 @@
|
|
|
401
401
|
-webkit-backdrop-filter: blur(10px);
|
|
402
402
|
`}
|
|
403
403
|
|
|
404
|
-
${({$hoverable:e,$pressable:
|
|
404
|
+
${({$hoverable:e,$pressable:o})=>(e||o)&&`
|
|
405
405
|
&:hover {
|
|
406
|
-
box-shadow: ${
|
|
406
|
+
box-shadow: ${Pe.lg};
|
|
407
407
|
}
|
|
408
408
|
`}
|
|
409
409
|
|
|
@@ -414,19 +414,19 @@
|
|
|
414
414
|
transform: scale(0.98);
|
|
415
415
|
}
|
|
416
416
|
`}
|
|
417
|
-
|
|
417
|
+
`,ro=i.styled.div`
|
|
418
418
|
display: flex;
|
|
419
419
|
align-items: center;
|
|
420
420
|
gap: 12px;
|
|
421
421
|
padding: 16px 16px 0;
|
|
422
422
|
z-index: 1;
|
|
423
|
-
`,
|
|
423
|
+
`,no=i.styled.div`
|
|
424
424
|
display: flex;
|
|
425
425
|
flex-direction: column;
|
|
426
426
|
flex: 1;
|
|
427
427
|
padding: 12px 16px;
|
|
428
428
|
z-index: 1;
|
|
429
|
-
`,
|
|
429
|
+
`,io=i.styled.div`
|
|
430
430
|
display: flex;
|
|
431
431
|
align-items: center;
|
|
432
432
|
gap: 8px;
|
|
@@ -435,18 +435,18 @@
|
|
|
435
435
|
|
|
436
436
|
${({$blurred:e})=>e&&`
|
|
437
437
|
padding: 12px 16px;
|
|
438
|
-
background-color: ${
|
|
438
|
+
background-color: ${r.alpha(r.COLORS.white,60)};
|
|
439
439
|
backdrop-filter: blur(10px);
|
|
440
440
|
-webkit-backdrop-filter: blur(10px);
|
|
441
|
-
border-top: 1px solid ${
|
|
441
|
+
border-top: 1px solid ${r.alpha(r.COLORS["iron-grey"],15)};
|
|
442
442
|
`}
|
|
443
|
-
`,
|
|
443
|
+
`,lo=C.newClassNameGetter("card"),so=({blurred:e=!1,border:o=!1,children:t,className:l,disabled:s=!1,footerBlurred:d=!1,fullWidth:x=!1,hoverable:c=!1,pressable:p=!1,radius:g="lg",ref:f,shadow:h="md",...y})=>{const u=typeof h=="boolean"?h?"md":"none":h;return n.jsx(oo,{...y,ref:f,className:lo("container",l),$blurred:e,$border:o,$disabled:s,$footerBlurred:d,$fullWidth:x,$hoverable:c,$pressable:p,$radius:g,$shadow:u,tabIndex:p&&!s?0:void 0,role:p?"button":void 0,children:t})},ao=C.newClassNameGetter("card"),co=({children:e,className:o,ref:t,...l})=>n.jsx(no,{...l,ref:t,className:ao("body",o),children:e}),po=C.newClassNameGetter("card"),xo=({blurred:e=!1,children:o,className:t,ref:l,...s})=>n.jsx(io,{...s,ref:l,className:po("footer",t),$blurred:e,children:o}),uo=C.newClassNameGetter("card"),go=({children:e,className:o,ref:t,...l})=>n.jsx(ro,{...l,ref:t,className:uo("header",o),children:e}),fo="Confirm",ho="Cancel",yo=z.keyframes`
|
|
444
444
|
from { opacity: 0; }
|
|
445
445
|
to { opacity: 1; }
|
|
446
|
-
`,
|
|
446
|
+
`,bo=z.keyframes`
|
|
447
447
|
from { opacity: 1; }
|
|
448
448
|
to { opacity: 0; }
|
|
449
|
-
|
|
449
|
+
`,$o=z.keyframes`
|
|
450
450
|
from {
|
|
451
451
|
opacity: 0;
|
|
452
452
|
transform: translateX(-50%) translateY(100%);
|
|
@@ -455,7 +455,7 @@
|
|
|
455
455
|
opacity: 1;
|
|
456
456
|
transform: translateX(-50%) translateY(0);
|
|
457
457
|
}
|
|
458
|
-
`,
|
|
458
|
+
`,So=z.keyframes`
|
|
459
459
|
from {
|
|
460
460
|
opacity: 1;
|
|
461
461
|
transform: translateX(-50%) translateY(0);
|
|
@@ -464,14 +464,14 @@
|
|
|
464
464
|
opacity: 0;
|
|
465
465
|
transform: translateX(-50%) translateY(100%);
|
|
466
466
|
}
|
|
467
|
-
`,
|
|
467
|
+
`,Oo=i.styled.div`
|
|
468
468
|
position: fixed;
|
|
469
469
|
inset: 0;
|
|
470
|
-
z-index: ${
|
|
470
|
+
z-index: ${r.Z_INDEX.confirmation};
|
|
471
471
|
background-color: rgba(0, 0, 0, 0.15);
|
|
472
472
|
backdrop-filter: blur(2px);
|
|
473
|
-
animation: ${({$isExiting:e})=>e?
|
|
474
|
-
`,
|
|
473
|
+
animation: ${({$isExiting:e})=>e?bo:yo} 0.2s ease-out forwards;
|
|
474
|
+
`,Co=i.styled.div`
|
|
475
475
|
position: fixed;
|
|
476
476
|
bottom: 24px;
|
|
477
477
|
left: 50%;
|
|
@@ -479,139 +479,139 @@
|
|
|
479
479
|
align-items: center;
|
|
480
480
|
gap: 16px;
|
|
481
481
|
padding: 12px 16px;
|
|
482
|
-
background-color: ${
|
|
483
|
-
border: 1px dashed ${
|
|
482
|
+
background-color: ${r.COLORS.white};
|
|
483
|
+
border: 1px dashed ${r.COLORS.gray};
|
|
484
484
|
border-radius: 12px;
|
|
485
485
|
box-shadow:
|
|
486
486
|
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
487
487
|
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
488
|
-
animation: ${({$isExiting:e})=>e?
|
|
489
|
-
z-index: ${
|
|
490
|
-
`,
|
|
488
|
+
animation: ${({$isExiting:e})=>e?So:$o} 0.2s ease-out forwards;
|
|
489
|
+
z-index: ${r.Z_INDEX.confirmationBar};
|
|
490
|
+
`,wo=i.styled.p`
|
|
491
491
|
margin: 0;
|
|
492
492
|
font-size: 14px;
|
|
493
|
-
color: ${
|
|
493
|
+
color: ${r.COLORS.black};
|
|
494
494
|
white-space: nowrap;
|
|
495
|
-
`,
|
|
495
|
+
`,vo=i.styled.div`
|
|
496
496
|
display: flex;
|
|
497
497
|
align-items: center;
|
|
498
498
|
gap: 8px;
|
|
499
|
-
`,
|
|
499
|
+
`,mo=({confirmation:e,onDone:o})=>{const[t,l]=a.useState(!1),[s,d]=a.useState(!1),{message:x,onConfirm:c,onCancel:p,options:g}=e,f=g.confirmLabel||fo,h=g.cancelLabel||ho,y=a.useCallback(b=>{l(!0),setTimeout(()=>{b==null||b(),o()},200)},[o]),u=a.useCallback(async()=>{const b=c();if(b instanceof Promise){d(!0);try{await b}finally{d(!1)}}y()},[y,c]),S=a.useCallback(()=>{s||y(p)},[y,s,p]);return a.useEffect(()=>{const b=$=>{$.key==="Escape"&&!s&&S()};return document.addEventListener("keydown",b),()=>document.removeEventListener("keydown",b)},[S,s]),n.jsxs(n.Fragment,{children:[n.jsx(Oo,{$isExiting:t,onClick:S}),n.jsxs(Co,{$isExiting:t,children:[n.jsx(wo,{children:x}),n.jsxs(vo,{children:[n.jsx(i.Button,{variant:"system",size:"compact",onClick:S,disabled:s,children:h}),n.jsx(i.Button,{variant:"danger",size:"compact",onClick:u,loading:s,children:f})]})]})]})},tt=a.createContext(null),ko=()=>{},Ro=({children:e})=>{const[o,t]=a.useState(null),l=a.useCallback((d,x,c,p)=>{t({open:!0,message:d,onConfirm:x,onCancel:c||ko,options:p||{}})},[]),s=a.useCallback(()=>{t(null)},[]);return n.jsxs(tt.Provider,{value:{show:l,hide:s},children:[e,o&&n.jsx(mo,{confirmation:o,onDone:s})]})},Lo=()=>{const e=a.useContext(tt);if(!e)throw new Error("useConfirmation must be used within ConfirmationProvider");return e},ee={sm:`${r.BREAKPOINTS.sm}px`,md:`${r.BREAKPOINTS.md}px`,lg:`${r.BREAKPOINTS.lg}px`,xl:`${r.BREAKPOINTS.xl}px`,"2xl":`${r.BREAKPOINTS["2xl"]}px`},jo=i.styled.div`
|
|
500
500
|
width: 100%;
|
|
501
501
|
|
|
502
|
-
${
|
|
503
|
-
max-width: ${
|
|
502
|
+
${F.mediaUp("sm")} {
|
|
503
|
+
max-width: ${ee.sm};
|
|
504
504
|
}
|
|
505
505
|
|
|
506
|
-
${
|
|
507
|
-
max-width: ${
|
|
506
|
+
${F.mediaUp("md")} {
|
|
507
|
+
max-width: ${ee.md};
|
|
508
508
|
}
|
|
509
509
|
|
|
510
|
-
${
|
|
511
|
-
max-width: ${
|
|
510
|
+
${F.mediaUp("lg")} {
|
|
511
|
+
max-width: ${ee.lg};
|
|
512
512
|
}
|
|
513
513
|
|
|
514
|
-
${
|
|
515
|
-
max-width: ${
|
|
514
|
+
${F.mediaUp("xl")} {
|
|
515
|
+
max-width: ${ee.xl};
|
|
516
516
|
}
|
|
517
517
|
|
|
518
|
-
${
|
|
519
|
-
max-width: ${
|
|
518
|
+
${F.mediaUp("2xl")} {
|
|
519
|
+
max-width: ${ee["2xl"]};
|
|
520
520
|
}
|
|
521
|
-
`,
|
|
521
|
+
`,No=C.newClassNameGetter("container"),Eo=({children:e,className:o,ref:t,...l})=>n.jsx(jo,{...l,ref:t,className:No("container",o),children:e}),Be=(e,o)=>new Intl.DateTimeFormat(o,{year:"numeric",month:"long"}).format(e),Io=i.styled.span`
|
|
522
522
|
display: inline-flex;
|
|
523
523
|
align-items: baseline;
|
|
524
524
|
gap: 5px;
|
|
525
525
|
font-size: 13px;
|
|
526
526
|
font-weight: 500;
|
|
527
|
-
color: ${
|
|
528
|
-
`,
|
|
527
|
+
color: ${r.COLORS["iron-grey"]};
|
|
528
|
+
`,To=i.styled.span`
|
|
529
529
|
font-weight: 500;
|
|
530
|
-
`,
|
|
530
|
+
`,zo=i.styled.span``,te=C.newClassNameGetter("date-range"),Ao=({className:e,classnames:o,from:t,locale:l="en",presentLabel:s="Present Time",ref:d,to:x,...c})=>n.jsxs(Io,{...c,ref:d,className:te("container",e),children:[n.jsx(To,{className:te("hash",o==null?void 0:o.hash),children:"#"}),n.jsx("span",{className:te("from",o==null?void 0:o.from),children:Be(t,l)}),n.jsx(zo,{className:te("separator",o==null?void 0:o.separator),children:"—"}),n.jsx("span",{className:te("to",o==null?void 0:o.to),children:x?Be(x,l):s})]}),Po=i.styled.div`
|
|
531
531
|
display: flex;
|
|
532
532
|
flex-direction: row;
|
|
533
533
|
align-items: center;
|
|
534
534
|
gap: 8px;
|
|
535
535
|
margin-top: ${e=>e.$spacing}px;
|
|
536
536
|
margin-bottom: ${e=>e.$spacing}px;
|
|
537
|
-
`,
|
|
537
|
+
`,De=i.styled.div`
|
|
538
538
|
flex: 1;
|
|
539
539
|
height: 1px;
|
|
540
|
-
background-color: ${
|
|
541
|
-
`,
|
|
540
|
+
background-color: ${r.COLORS.gray};
|
|
541
|
+
`,Bo=i.styled.span`
|
|
542
542
|
font-size: 12px;
|
|
543
|
-
color: ${
|
|
543
|
+
color: ${r.COLORS["iron-grey"]};
|
|
544
544
|
white-space: nowrap;
|
|
545
|
-
`,
|
|
545
|
+
`,ae=C.newClassNameGetter("divider"),Do=({children:e,className:o,classnames:t,ref:l,spacing:s=8,...d})=>n.jsxs(Po,{...d,ref:l,className:ae("container",o),$spacing:s,children:[n.jsx(De,{className:ae("line",t==null?void 0:t.line)}),e&&n.jsxs(n.Fragment,{children:[n.jsx(Bo,{className:ae("label",t==null?void 0:t.label),children:e}),n.jsx(De,{className:ae("line",t==null?void 0:t.line)})]})]}),Mo={left:r.KEYFRAMES.slideInLeft,right:r.KEYFRAMES.slideInRight,top:r.KEYFRAMES.slideInTop,bottom:r.KEYFRAMES.slideInBottom},_o=(e,o)=>{switch(e){case"left":return`
|
|
546
546
|
top: 0;
|
|
547
547
|
left: 0;
|
|
548
548
|
height: 100%;
|
|
549
|
-
width: ${
|
|
549
|
+
width: ${o};
|
|
550
550
|
`;case"right":return`
|
|
551
551
|
top: 0;
|
|
552
552
|
right: 0;
|
|
553
553
|
height: 100%;
|
|
554
|
-
width: ${
|
|
554
|
+
width: ${o};
|
|
555
555
|
`;case"top":return`
|
|
556
556
|
top: 0;
|
|
557
557
|
left: 0;
|
|
558
558
|
width: 100%;
|
|
559
|
-
height: ${
|
|
559
|
+
height: ${o};
|
|
560
560
|
`;case"bottom":return`
|
|
561
561
|
bottom: 0;
|
|
562
562
|
left: 0;
|
|
563
563
|
width: 100%;
|
|
564
|
-
height: ${
|
|
565
|
-
`}},
|
|
564
|
+
height: ${o};
|
|
565
|
+
`}},Fo=i.styled.div`
|
|
566
566
|
position: fixed;
|
|
567
|
-
z-index: ${
|
|
568
|
-
background-color: ${
|
|
569
|
-
box-shadow: 0 4px 24px ${
|
|
570
|
-
${e=>
|
|
571
|
-
animation: ${e=>
|
|
572
|
-
`,
|
|
567
|
+
z-index: ${r.Z_INDEX.modal};
|
|
568
|
+
background-color: ${r.COLORS.white};
|
|
569
|
+
box-shadow: 0 4px 24px ${r.alpha(r.COLORS.black,20)};
|
|
570
|
+
${e=>_o(e.$position,e.$size)}
|
|
571
|
+
animation: ${e=>Mo[e.$position]} ${e=>e.$animated?"0.05s":"0s"} ease-out forwards;
|
|
572
|
+
`,Go=C.newClassNameGetter("drawer"),Ho=({animated:e,children:o,className:t,open:l,position:s="right",ref:d,size:x="400px",...c})=>l?Ne.createPortal(n.jsx(Fo,{...c,ref:d,className:Go("container",t),$animated:!!e,$position:s,$size:x,children:o}),document.body):null,Uo=i.styled.div`
|
|
573
573
|
position: relative;
|
|
574
574
|
display: inline-block;
|
|
575
|
-
`,
|
|
575
|
+
`,Wo=i.styled.div`
|
|
576
576
|
cursor: pointer;
|
|
577
|
-
`,
|
|
577
|
+
`,ot=`
|
|
578
578
|
min-width: 160px;
|
|
579
579
|
padding: 8px;
|
|
580
|
-
background-color: ${
|
|
581
|
-
border: 1px solid ${
|
|
580
|
+
background-color: ${r.COLORS.white};
|
|
581
|
+
border: 1px solid ${r.COLORS.gray};
|
|
582
582
|
border-radius: 8px;
|
|
583
583
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
584
|
-
`,
|
|
584
|
+
`,rt=(e,o)=>e?"translateY(0)":o==="bottom"?"translateY(-8px)":"translateY(8px)",Xo=i.styled.div`
|
|
585
585
|
position: absolute;
|
|
586
586
|
${({$position:e})=>e==="bottom"?"top: calc(100% + 4px);":"bottom: calc(100% + 4px);"}
|
|
587
587
|
${({$align:e})=>e==="left"?"left: 0;":"right: 0;"}
|
|
588
|
-
z-index: ${
|
|
589
|
-
${
|
|
588
|
+
z-index: ${r.Z_INDEX.dropdown};
|
|
589
|
+
${ot}
|
|
590
590
|
opacity: ${({$open:e})=>e?1:0};
|
|
591
591
|
visibility: ${({$open:e})=>e?"visible":"hidden"};
|
|
592
|
-
transform: ${({$open:e,$position:
|
|
592
|
+
transform: ${({$open:e,$position:o})=>rt(e,o)};
|
|
593
593
|
transition:
|
|
594
594
|
opacity 0.15s ease,
|
|
595
595
|
transform 0.15s ease,
|
|
596
596
|
visibility 0.15s;
|
|
597
|
-
`,
|
|
597
|
+
`,Yo=i.styled.div`
|
|
598
598
|
position: fixed;
|
|
599
|
-
z-index: ${
|
|
600
|
-
${
|
|
599
|
+
z-index: ${r.Z_INDEX.portalDropdown};
|
|
600
|
+
${ot}
|
|
601
601
|
opacity: ${({$open:e})=>e?1:0};
|
|
602
602
|
visibility: ${({$open:e})=>e?"visible":"hidden"};
|
|
603
|
-
transform: ${({$open:e,$position:
|
|
603
|
+
transform: ${({$open:e,$position:o})=>rt(e,o)};
|
|
604
604
|
transition:
|
|
605
605
|
opacity 0.15s ease,
|
|
606
606
|
transform 0.15s ease,
|
|
607
607
|
visibility 0.15s;
|
|
608
|
-
`,
|
|
608
|
+
`,ce=C.newClassNameGetter("dropdown"),pe=4,Ko=100,qo=({align:e="left",autoClose:o=!0,children:t,className:l,classnames:s,onClose:d,onOpen:x,open:c,portalRenderNode:p,ref:g,trigger:f,...h})=>{const[y,u]=a.useState(!1),[S,b]=a.useState({top:0,left:0}),[$,w]=a.useState("bottom"),R=a.useRef(null),k=a.useRef(null),N=a.useRef(null),I=c!==void 0,L=I?c:y,m=a.useCallback(()=>{var B,D;if(!k.current)return;const E=k.current.getBoundingClientRect(),A=((B=N.current)==null?void 0:B.offsetHeight)??Ko,M=((D=N.current)==null?void 0:D.offsetWidth)??160,P=window.innerHeight-E.bottom-pe,G=E.top-pe,H=P<A&&G>P?"top":"bottom";if(w(H),p){let U;e==="left"?U=E.left:U=E.right-M;const ut=H==="bottom"?E.bottom+pe:E.top-A-pe;b({top:ut,left:U})}},[e,p]),v=a.useCallback(()=>{I?L?d==null||d():x==null||x():u(E=>{const A=!E;return A?x==null||x():d==null||d(),A})},[I,L,d,x]),j=a.useCallback(()=>{I||u(!1),d==null||d()},[I,d]),O=a.useCallback(()=>{o&&j()},[o,j]);a.useLayoutEffect(()=>{L&&m()},[L,m]),a.useEffect(()=>{const E=G=>{const H=G.target,B=R.current&&!R.current.contains(H),D=N.current&&!N.current.contains(H);p?B&&D&&j():B&&j()},A=G=>{G.key==="Escape"&&j()},M=()=>{L&&p&&m()},P=()=>{L&&p&&m()};return L&&(document.addEventListener("mousedown",E),document.addEventListener("keydown",A),p&&(window.addEventListener("scroll",M,!0),window.addEventListener("resize",P))),()=>{document.removeEventListener("mousedown",E),document.removeEventListener("keydown",A),window.removeEventListener("scroll",M,!0),window.removeEventListener("resize",P)}},[L,j,p,m]);const T=p?Ne.createPortal(n.jsx(Yo,{ref:N,$open:L,$position:$,className:ce("content",s==null?void 0:s.content),style:{top:S.top,left:S.left},onClick:O,children:t}),p):n.jsx(Xo,{ref:N,$align:e,$open:L,$position:$,className:ce("content",s==null?void 0:s.content),onClick:O,children:t});return n.jsxs(Uo,{...h,ref:g??R,className:ce("container",l),children:[n.jsx(Wo,{ref:k,onClick:v,className:ce("trigger",s==null?void 0:s.trigger),children:a.cloneElement(f)}),T]})},Vo=i.styled.div`
|
|
609
609
|
display: flex;
|
|
610
610
|
flex-direction: column;
|
|
611
611
|
align-items: center;
|
|
612
612
|
text-align: center;
|
|
613
613
|
padding: 40px 24px;
|
|
614
|
-
`,
|
|
614
|
+
`,Zo=i.styled.div`
|
|
615
615
|
position: relative;
|
|
616
616
|
display: flex;
|
|
617
617
|
align-items: center;
|
|
@@ -619,7 +619,7 @@
|
|
|
619
619
|
width: 200px;
|
|
620
620
|
height: 200px;
|
|
621
621
|
margin-bottom: 16px;
|
|
622
|
-
`,
|
|
622
|
+
`,Qo=i.styled.div`
|
|
623
623
|
position: absolute;
|
|
624
624
|
inset: 0;
|
|
625
625
|
|
|
@@ -628,7 +628,7 @@
|
|
|
628
628
|
content: '';
|
|
629
629
|
position: absolute;
|
|
630
630
|
border-radius: 50%;
|
|
631
|
-
border: 1px solid ${
|
|
631
|
+
border: 1px solid ${r.COLORS.gray};
|
|
632
632
|
}
|
|
633
633
|
|
|
634
634
|
&::before {
|
|
@@ -640,7 +640,7 @@
|
|
|
640
640
|
inset: 8px;
|
|
641
641
|
opacity: 0.5;
|
|
642
642
|
}
|
|
643
|
-
`,
|
|
643
|
+
`,Jo=i.styled.div`
|
|
644
644
|
position: absolute;
|
|
645
645
|
inset: 0;
|
|
646
646
|
|
|
@@ -649,7 +649,7 @@
|
|
|
649
649
|
content: '';
|
|
650
650
|
position: absolute;
|
|
651
651
|
border-radius: 50%;
|
|
652
|
-
border: 1px solid ${
|
|
652
|
+
border: 1px solid ${r.COLORS.gray};
|
|
653
653
|
}
|
|
654
654
|
|
|
655
655
|
&::before {
|
|
@@ -660,7 +660,7 @@
|
|
|
660
660
|
&::after {
|
|
661
661
|
inset: 52px;
|
|
662
662
|
}
|
|
663
|
-
`,
|
|
663
|
+
`,er=i.styled.div`
|
|
664
664
|
position: relative;
|
|
665
665
|
z-index: 1;
|
|
666
666
|
display: flex;
|
|
@@ -669,30 +669,30 @@
|
|
|
669
669
|
width: 48px;
|
|
670
670
|
height: 48px;
|
|
671
671
|
border-radius: 10px;
|
|
672
|
-
border: 1px solid ${
|
|
673
|
-
background-color: ${
|
|
674
|
-
color: ${
|
|
672
|
+
border: 1px solid ${r.COLORS.gray};
|
|
673
|
+
background-color: ${r.COLORS.white};
|
|
674
|
+
color: ${r.COLORS["iron-grey"]};
|
|
675
675
|
box-shadow:
|
|
676
676
|
0 1px 2px rgba(0, 0, 0, 0.05),
|
|
677
677
|
0 1px 3px rgba(0, 0, 0, 0.1);
|
|
678
|
-
`,
|
|
678
|
+
`,tr=i.styled.h3`
|
|
679
679
|
margin: 0 0 4px;
|
|
680
680
|
font-size: 16px;
|
|
681
681
|
font-weight: 600;
|
|
682
|
-
color: ${
|
|
682
|
+
color: ${r.COLORS.black};
|
|
683
683
|
line-height: 1.4;
|
|
684
|
-
`,
|
|
684
|
+
`,or=i.styled.p`
|
|
685
685
|
margin: 0;
|
|
686
686
|
font-size: 14px;
|
|
687
|
-
color: ${
|
|
687
|
+
color: ${r.COLORS["iron-grey"]};
|
|
688
688
|
line-height: 1.5;
|
|
689
689
|
max-width: 360px;
|
|
690
|
-
`,
|
|
690
|
+
`,rr=i.styled.div`
|
|
691
691
|
display: flex;
|
|
692
692
|
align-items: center;
|
|
693
693
|
gap: 12px;
|
|
694
694
|
margin-top: 20px;
|
|
695
|
-
`,
|
|
695
|
+
`,oe=C.newClassNameGetter("empty-state"),nr=({actions:e,className:o,classnames:t,description:l,icon:s,ref:d,title:x,...c})=>n.jsxs(Vo,{...c,ref:d,className:oe("container",o),children:[s&&n.jsxs(Zo,{className:oe("icon",t==null?void 0:t.icon),children:[n.jsx(Jo,{}),n.jsx(Qo,{}),n.jsx(er,{children:s})]}),n.jsx(tr,{className:oe("title",t==null?void 0:t.title),children:x}),l&&n.jsx(or,{className:oe("description",t==null?void 0:t.description),children:l}),e&&n.jsx(rr,{className:oe("actions",t==null?void 0:t.actions),children:e})]}),ir=i.styled.div`
|
|
696
696
|
display: grid;
|
|
697
697
|
grid-template-rows: auto 1fr auto;
|
|
698
698
|
grid-auto-flow: column;
|
|
@@ -717,19 +717,19 @@
|
|
|
717
717
|
> * > :not([class*='field-label']):not([class*='field-message']) {
|
|
718
718
|
grid-row: 2;
|
|
719
719
|
}
|
|
720
|
-
`,
|
|
720
|
+
`,lr=C.newClassNameGetter("field-row"),dr=({className:e,gap:o=16,ref:t,...l})=>n.jsx(ir,{...l,ref:t,$gap:o,className:lr("container",e)}),nt=e=>{if(e===0)return"0 B";const o=["B","KB","MB","GB"],t=Math.floor(Math.log(e)/Math.log(1024)),l=e/Math.pow(1024,t);return`${l%1===0?l:l.toFixed(1)} ${o[t]}`},Me=(e,o)=>o.split(",").map(l=>l.trim()).some(l=>l.startsWith(".")?e.name.toLowerCase().endsWith(l.toLowerCase()):l.endsWith("/*")?e.type.startsWith(l.replace("/*","/")):e.type===l),sr=i.styled.div`
|
|
721
721
|
flex-shrink: 0;
|
|
722
722
|
display: flex;
|
|
723
723
|
flex-direction: column;
|
|
724
724
|
gap: 16px;
|
|
725
|
-
`,
|
|
725
|
+
`,ar=i.styled.div`
|
|
726
726
|
display: flex;
|
|
727
727
|
flex-direction: column;
|
|
728
728
|
align-items: center;
|
|
729
729
|
justify-content: center;
|
|
730
730
|
gap: 8px;
|
|
731
731
|
padding: 24px;
|
|
732
|
-
border: 1.5px dashed ${({$dragOver:e})=>e?
|
|
732
|
+
border: 1.5px dashed ${({$dragOver:e})=>e?r.COLORS.black:r.COLORS.gray};
|
|
733
733
|
border-radius: 12px;
|
|
734
734
|
background-color: ${({$dragOver:e})=>e?"#f9fafb":"transparent"};
|
|
735
735
|
cursor: ${({$disabled:e})=>e?"not-allowed":"pointer"};
|
|
@@ -738,58 +738,58 @@
|
|
|
738
738
|
background-color 0.15s ease;
|
|
739
739
|
opacity: ${({$disabled:e})=>e?.5:1};
|
|
740
740
|
|
|
741
|
-
${({$disabled:e,$dragOver:
|
|
741
|
+
${({$disabled:e,$dragOver:o})=>!e&&!o&&`
|
|
742
742
|
&:hover {
|
|
743
|
-
border-color: ${
|
|
743
|
+
border-color: ${r.COLORS["iron-grey"]};
|
|
744
744
|
background-color: #f9fafb;
|
|
745
745
|
}
|
|
746
746
|
`}
|
|
747
|
-
`,
|
|
747
|
+
`,cr=i.styled.div`
|
|
748
748
|
display: flex;
|
|
749
749
|
align-items: center;
|
|
750
750
|
justify-content: center;
|
|
751
751
|
width: 40px;
|
|
752
752
|
height: 40px;
|
|
753
753
|
border-radius: 8px;
|
|
754
|
-
border: 1px solid ${
|
|
755
|
-
color: ${
|
|
754
|
+
border: 1px solid ${r.COLORS.gray};
|
|
755
|
+
color: ${r.COLORS["iron-grey"]};
|
|
756
756
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
757
757
|
|
|
758
758
|
& svg {
|
|
759
759
|
width: 20px;
|
|
760
760
|
height: 20px;
|
|
761
761
|
}
|
|
762
|
-
`,
|
|
762
|
+
`,pr=i.styled.div`
|
|
763
763
|
display: flex;
|
|
764
764
|
flex-direction: column;
|
|
765
765
|
align-items: center;
|
|
766
766
|
gap: 4px;
|
|
767
767
|
font-size: 14px;
|
|
768
|
-
color: ${
|
|
768
|
+
color: ${r.COLORS["iron-grey"]};
|
|
769
769
|
text-align: center;
|
|
770
|
-
`,
|
|
771
|
-
color: ${
|
|
770
|
+
`,xr=i.styled.span`
|
|
771
|
+
color: ${r.COLORS.black};
|
|
772
772
|
font-weight: 600;
|
|
773
773
|
cursor: pointer;
|
|
774
|
-
`,
|
|
774
|
+
`,ur=i.styled.div`
|
|
775
775
|
font-size: 12px;
|
|
776
|
-
color: ${
|
|
776
|
+
color: ${r.COLORS["iron-grey"]};
|
|
777
777
|
text-align: center;
|
|
778
|
-
`,
|
|
778
|
+
`,gr=i.styled.input`
|
|
779
779
|
display: none;
|
|
780
|
-
`;
|
|
780
|
+
`;i.styled.div`
|
|
781
781
|
display: flex;
|
|
782
782
|
flex-direction: column;
|
|
783
783
|
gap: 12px;
|
|
784
|
-
`;const
|
|
784
|
+
`;const fr={uploading:r.COLORS.gray,complete:r.COLORS.gray,failed:r.COLORS.red},hr=i.styled.div`
|
|
785
785
|
display: flex;
|
|
786
786
|
align-items: flex-start;
|
|
787
787
|
gap: 12px;
|
|
788
788
|
padding: 14px;
|
|
789
|
-
border: 1px solid ${({$status:e})=>
|
|
789
|
+
border: 1px solid ${({$status:e})=>fr[e]};
|
|
790
790
|
border-radius: 12px;
|
|
791
791
|
transition: border-color 0.15s ease;
|
|
792
|
-
`,
|
|
792
|
+
`,yr=i.styled.div`
|
|
793
793
|
display: flex;
|
|
794
794
|
align-items: center;
|
|
795
795
|
justify-content: center;
|
|
@@ -798,60 +798,60 @@
|
|
|
798
798
|
height: 36px;
|
|
799
799
|
border-radius: 8px;
|
|
800
800
|
background-color: ${({$status:e})=>e==="failed"?"#fef2f2":"#f9fafb"};
|
|
801
|
-
color: ${({$status:e})=>e==="failed"?
|
|
801
|
+
color: ${({$status:e})=>e==="failed"?r.COLORS.red:r.COLORS["iron-grey"]};
|
|
802
802
|
|
|
803
803
|
& svg {
|
|
804
804
|
width: 20px;
|
|
805
805
|
height: 20px;
|
|
806
806
|
}
|
|
807
|
-
`,
|
|
807
|
+
`,br=i.styled.div`
|
|
808
808
|
flex: 1;
|
|
809
809
|
min-width: 0;
|
|
810
810
|
display: flex;
|
|
811
811
|
flex-direction: column;
|
|
812
812
|
gap: 4px;
|
|
813
|
-
|
|
813
|
+
`,$r=i.styled.div`
|
|
814
814
|
display: flex;
|
|
815
815
|
align-items: flex-start;
|
|
816
816
|
justify-content: space-between;
|
|
817
817
|
gap: 8px;
|
|
818
|
-
`,
|
|
818
|
+
`,Sr=i.styled.div`
|
|
819
819
|
min-width: 0;
|
|
820
|
-
`,
|
|
820
|
+
`,Or=i.styled.div`
|
|
821
821
|
font-size: 14px;
|
|
822
822
|
font-weight: 500;
|
|
823
|
-
color: ${
|
|
823
|
+
color: ${r.COLORS.black};
|
|
824
824
|
white-space: nowrap;
|
|
825
825
|
overflow: hidden;
|
|
826
826
|
text-overflow: ellipsis;
|
|
827
|
-
`,
|
|
827
|
+
`,Cr=i.styled.div`
|
|
828
828
|
font-size: 14px;
|
|
829
|
-
color: ${
|
|
830
|
-
`,
|
|
829
|
+
color: ${r.COLORS["iron-grey"]};
|
|
830
|
+
`,wr=i.styled.div`
|
|
831
831
|
display: flex;
|
|
832
832
|
align-items: center;
|
|
833
833
|
gap: 12px;
|
|
834
834
|
margin-top: 2px;
|
|
835
|
-
`,
|
|
835
|
+
`,vr=i.styled.div`
|
|
836
836
|
flex: 1;
|
|
837
837
|
height: 8px;
|
|
838
838
|
border-radius: 4px;
|
|
839
|
-
background-color: ${
|
|
839
|
+
background-color: ${r.COLORS.gray};
|
|
840
840
|
overflow: hidden;
|
|
841
|
-
`,
|
|
841
|
+
`,mr=i.styled.div`
|
|
842
842
|
height: 100%;
|
|
843
843
|
width: ${({$value:e})=>Math.min(100,Math.max(0,e))}%;
|
|
844
844
|
border-radius: 4px;
|
|
845
|
-
background-color: ${({$status:e})=>e==="failed"?
|
|
845
|
+
background-color: ${({$status:e})=>e==="failed"?r.COLORS.red:r.COLORS.black};
|
|
846
846
|
transition: width 0.2s ease;
|
|
847
|
-
`,
|
|
847
|
+
`,kr=i.styled.span`
|
|
848
848
|
flex-shrink: 0;
|
|
849
849
|
font-size: 14px;
|
|
850
|
-
color: ${
|
|
850
|
+
color: ${r.COLORS.black};
|
|
851
851
|
font-weight: 500;
|
|
852
852
|
min-width: 36px;
|
|
853
853
|
text-align: right;
|
|
854
|
-
`,
|
|
854
|
+
`,Rr=i.styled.button`
|
|
855
855
|
display: flex;
|
|
856
856
|
align-items: center;
|
|
857
857
|
justify-content: center;
|
|
@@ -861,7 +861,7 @@
|
|
|
861
861
|
padding: 0;
|
|
862
862
|
border: none;
|
|
863
863
|
background: transparent;
|
|
864
|
-
color: ${
|
|
864
|
+
color: ${r.COLORS["iron-grey"]};
|
|
865
865
|
cursor: pointer;
|
|
866
866
|
border-radius: 4px;
|
|
867
867
|
transition: color 0.15s ease;
|
|
@@ -872,14 +872,14 @@
|
|
|
872
872
|
}
|
|
873
873
|
|
|
874
874
|
&:hover {
|
|
875
|
-
color: ${
|
|
875
|
+
color: ${r.COLORS.black};
|
|
876
876
|
}
|
|
877
|
-
`,
|
|
877
|
+
`,Lr=i.styled.button`
|
|
878
878
|
display: inline;
|
|
879
879
|
padding: 0;
|
|
880
880
|
border: none;
|
|
881
881
|
background: transparent;
|
|
882
|
-
color: ${
|
|
882
|
+
color: ${r.COLORS.red};
|
|
883
883
|
font-size: 14px;
|
|
884
884
|
font-weight: 500;
|
|
885
885
|
cursor: pointer;
|
|
@@ -888,374 +888,52 @@
|
|
|
888
888
|
&:hover {
|
|
889
889
|
text-decoration: underline;
|
|
890
890
|
}
|
|
891
|
-
`,
|
|
891
|
+
`,_e=i.styled.div`
|
|
892
892
|
display: flex;
|
|
893
893
|
align-items: center;
|
|
894
894
|
gap: 4px;
|
|
895
895
|
font-size: 14px;
|
|
896
|
-
color: ${
|
|
897
|
-
`,
|
|
896
|
+
color: ${r.COLORS["iron-grey"]};
|
|
897
|
+
`,jr=i.styled.span`
|
|
898
898
|
display: inline-flex;
|
|
899
|
-
color: ${
|
|
899
|
+
color: ${r.COLORS.green};
|
|
900
900
|
|
|
901
901
|
& svg {
|
|
902
902
|
width: 16px;
|
|
903
903
|
height: 16px;
|
|
904
904
|
}
|
|
905
|
-
|
|
905
|
+
`,xe=C.newClassNameGetter("file-upload"),Nr=()=>n.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[n.jsx("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),n.jsx("polyline",{points:"17 8 12 3 7 8"}),n.jsx("line",{x1:"12",x2:"12",y1:"3",y2:"15"})]}),Er=({accept:e,children:o,className:t,classnames:l,description:s,disabled:d=!1,hint:x,icon:c,maxSize:p,multiple:g=!1,onChange:f,onReject:h,ref:y,...u})=>{const S=a.useRef(null),[b,$]=a.useState(!1),w=a.useCallback(m=>{if(!m||m.length===0)return;const v=Array.from(m);if(e){const j=v.filter(O=>!Me(O,e));if(j.length>0){h==null||h(j,"type");const O=v.filter(T=>Me(T,e));if(O.length===0)return;f==null||f(O);return}}if(p){const j=v.filter(O=>O.size>p);if(j.length>0){h==null||h(j,"size");const O=v.filter(T=>T.size<=p);if(O.length===0)return;f==null||f(O);return}}f==null||f(v)},[e,p,f,h]),R=()=>{var m;d||(m=S.current)==null||m.click()},k=m=>{w(m.target.files),S.current&&(S.current.value="")},N=m=>{m.preventDefault(),m.stopPropagation(),d||$(!0)},I=m=>{m.preventDefault(),m.stopPropagation(),$(!1)},L=m=>{m.preventDefault(),m.stopPropagation(),$(!1),d||w(m.dataTransfer.files)};return n.jsxs(sr,{ref:y,className:t,...u,children:[n.jsxs(ar,{className:xe("dropzone",l==null?void 0:l.dropzone),$disabled:d,$dragOver:b,onClick:R,onDragOver:N,onDragLeave:I,onDrop:L,role:"button",tabIndex:d?-1:0,"aria-disabled":d,children:[n.jsx(cr,{className:xe("icon",l==null?void 0:l.icon),children:c||n.jsx(Nr,{})}),n.jsx(pr,{className:xe("text",l==null?void 0:l.text),children:s||n.jsxs("span",{children:[n.jsx(xr,{children:"Click to upload"})," or drag and drop"]})}),x&&n.jsx(ur,{className:xe("hint",l==null?void 0:l.hint),children:x})]}),n.jsx(gr,{ref:S,type:"file",accept:e,multiple:g,onChange:k,tabIndex:-1}),o]})},Y=C.newClassNameGetter("file-upload-item"),Ir=()=>n.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[n.jsx("path",{d:"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"}),n.jsx("path",{d:"M14 2v4a2 2 0 0 0 2 2h4"})]}),Tr=()=>n.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[n.jsx("path",{d:"M18 6 6 18"}),n.jsx("path",{d:"m6 6 12 12"})]}),zr=()=>n.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:n.jsx("path",{d:"M20 6 9 17l-5-5"})}),Ar=({name:e,size:o,status:t="uploading",progress:l=0,icon:s,onRemove:d,onRetry:x,className:c,classnames:p,ref:g})=>n.jsxs(hr,{ref:g,className:Y("item",c),$status:t,children:[n.jsx(yr,{className:Y("icon",p==null?void 0:p.icon),$status:t,children:s||n.jsx(Ir,{})}),n.jsxs(br,{children:[n.jsxs($r,{children:[n.jsxs(Sr,{className:Y("info",p==null?void 0:p.info),children:[n.jsx(Or,{className:Y("name",p==null?void 0:p.name),children:e}),n.jsx(Cr,{className:Y("size",p==null?void 0:p.size),children:nt(o)})]}),d&&n.jsx(Rr,{className:Y("action",p==null?void 0:p.action),onClick:d,"aria-label":"Remove file",type:"button",children:n.jsx(Tr,{})})]}),t==="uploading"&&n.jsxs(wr,{className:Y("progress",p==null?void 0:p.progress),children:[n.jsx(vr,{children:n.jsx(mr,{$value:l,$status:t})}),n.jsxs(kr,{children:[l,"%"]})]}),t==="complete"&&n.jsxs(_e,{children:[n.jsx(jr,{children:n.jsx(zr,{})}),"Complete"]}),t==="failed"&&n.jsxs(_e,{children:["Upload failed."," ",x&&n.jsx(Lr,{onClick:x,type:"button",children:"Try again"})]})]})]}),it=`
|
|
906
906
|
display: inline-flex;
|
|
907
907
|
font-size: 14px;
|
|
908
908
|
gap: 3px;
|
|
909
|
-
color: ${
|
|
909
|
+
color: ${r.COLORS["iron-grey"]};
|
|
910
910
|
transition: color 0.15s ease;
|
|
911
911
|
text-decoration: none;
|
|
912
|
-
`,
|
|
912
|
+
`,lt=`
|
|
913
913
|
cursor: pointer;
|
|
914
914
|
&:hover {
|
|
915
|
-
color: ${
|
|
915
|
+
color: ${r.COLORS["steel-blue"]};
|
|
916
916
|
}
|
|
917
|
-
`,
|
|
918
|
-
${
|
|
917
|
+
`,Pr=i.styled.span`
|
|
918
|
+
${it}
|
|
919
919
|
cursor: ${({$clickable:e})=>e?"pointer":"default"};
|
|
920
|
-
${({$clickable:e})=>e&&
|
|
921
|
-
`,
|
|
922
|
-
${
|
|
923
|
-
${
|
|
924
|
-
`,
|
|
920
|
+
${({$clickable:e})=>e&<}
|
|
921
|
+
`,Br=i.styled.a`
|
|
922
|
+
${it}
|
|
923
|
+
${lt}
|
|
924
|
+
`,Dr=i.styled.span``,Mr=i.styled.span``,ue=C.newClassNameGetter("hashtag"),_r=({children:e,className:o,classnames:t,href:l,onClick:s,ref:d,...x})=>{const c=n.jsxs(n.Fragment,{children:[n.jsx(Dr,{className:ue("hash",t==null?void 0:t.hash),children:"#"}),n.jsx(Mr,{className:ue("label",t==null?void 0:t.label),children:e})]});if(l)return n.jsx(Br,{ref:d,href:l,className:ue("container",o),onClick:s,children:c});const p=!!s;return n.jsx(Pr,{...x,ref:d,className:ue("container",o),$clickable:p,onClick:s,role:p?"button":void 0,tabIndex:p?0:void 0,children:c})},Fe={1:{fontSize:32,lineHeight:1.2},2:{fontSize:24,lineHeight:1.25},3:{fontSize:18,lineHeight:1.3},4:{fontSize:16,lineHeight:1.4},5:{fontSize:14,lineHeight:1.4},6:{fontSize:12,lineHeight:1.5}},Fr=i.styled.h1`
|
|
925
925
|
margin: 0;
|
|
926
926
|
font-weight: 700;
|
|
927
|
-
color: ${
|
|
928
|
-
font-size: ${({$level:e})=>
|
|
929
|
-
line-height: ${({$level:e})=>
|
|
930
|
-
`,
|
|
931
|
-
display: flex;
|
|
932
|
-
flex-direction: column;
|
|
933
|
-
gap: 12px;
|
|
934
|
-
`,an=d.styled.div`
|
|
935
|
-
width: ${({$size:e})=>e}px;
|
|
936
|
-
height: ${({$size:e})=>e}px;
|
|
937
|
-
border-radius: 8px;
|
|
938
|
-
border: 1px dashed ${n.COLORS.gray};
|
|
939
|
-
overflow: hidden;
|
|
940
|
-
display: flex;
|
|
941
|
-
align-items: center;
|
|
942
|
-
justify-content: center;
|
|
943
|
-
background-color: ${n.COLORS.white};
|
|
944
|
-
|
|
945
|
-
img {
|
|
946
|
-
width: 100%;
|
|
947
|
-
height: 100%;
|
|
948
|
-
object-fit: cover;
|
|
949
|
-
}
|
|
950
|
-
`,dn=d.styled.span`
|
|
951
|
-
font-size: 12px;
|
|
952
|
-
color: ${n.COLORS["iron-grey"]};
|
|
953
|
-
`,sn=e=>`
|
|
954
|
-
.${e} {
|
|
955
|
-
padding: 7px 16px;
|
|
956
|
-
font-size: 14px;
|
|
957
|
-
outline: 0;
|
|
958
|
-
border: 0;
|
|
959
|
-
background-color: #2F7FEF;
|
|
960
|
-
color: #FFFFFF;
|
|
961
|
-
border-radius: 20px;
|
|
962
|
-
user-select: none;
|
|
963
|
-
cursor: pointer;
|
|
964
|
-
-moz-user-select: none;
|
|
965
|
-
-webkit-user-select: none;
|
|
966
|
-
}
|
|
967
|
-
|
|
968
|
-
.${e}:active {
|
|
969
|
-
transform: translate(0, 1px);
|
|
970
|
-
}
|
|
971
|
-
`,cn=e=>`
|
|
972
|
-
.${e} {
|
|
973
|
-
display: flex;
|
|
974
|
-
flex: 1 1 auto;
|
|
975
|
-
background: #33393F;
|
|
976
|
-
overflow: hidden;
|
|
977
|
-
align-items: center;
|
|
978
|
-
justify-content: center;
|
|
979
|
-
position: relative;
|
|
980
|
-
width: 500px;
|
|
981
|
-
height: 500px;
|
|
982
|
-
max-width: 100%;
|
|
983
|
-
max-height: 60vh;
|
|
984
|
-
min-height: 250px;
|
|
985
|
-
}
|
|
986
|
-
|
|
987
|
-
@media (max-width: 540px) {
|
|
988
|
-
.${e} {
|
|
989
|
-
width: 100%;
|
|
990
|
-
height: auto;
|
|
991
|
-
aspect-ratio: 1;
|
|
992
|
-
max-height: 70vh;
|
|
993
|
-
}
|
|
994
|
-
}
|
|
995
|
-
`,pn=e=>`
|
|
996
|
-
.${e} {
|
|
997
|
-
padding: 7px 16px;
|
|
998
|
-
font-size: 14px;
|
|
999
|
-
outline: 0;
|
|
1000
|
-
border: 0;
|
|
1001
|
-
background-color: #E8EFF7;
|
|
1002
|
-
color: #768BA7;
|
|
1003
|
-
border-radius: 20px;
|
|
1004
|
-
cursor: pointer;
|
|
1005
|
-
user-select: none;
|
|
1006
|
-
-moz-user-select: none;
|
|
1007
|
-
-webkit-user-select: none;
|
|
1008
|
-
}
|
|
1009
|
-
|
|
1010
|
-
.${e}:active {
|
|
1011
|
-
transform: translate(0, 1px);
|
|
1012
|
-
}
|
|
1013
|
-
`,un=e=>`
|
|
1014
|
-
.${e} {
|
|
1015
|
-
display: flex;
|
|
1016
|
-
flex-direction: column;
|
|
1017
|
-
background-color: #FFFFFF;
|
|
1018
|
-
border-radius: 6px;
|
|
1019
|
-
box-shadow: 0 4px 16px rgba(77, 96, 124, 0.2);
|
|
1020
|
-
max-width: 100%;
|
|
1021
|
-
max-height: 100%;
|
|
1022
|
-
overflow: hidden;
|
|
1023
|
-
}
|
|
1024
|
-
|
|
1025
|
-
@media (max-width: 540px) {
|
|
1026
|
-
.${e} {
|
|
1027
|
-
width: 100%;
|
|
1028
|
-
border-radius: 8px;
|
|
1029
|
-
}
|
|
1030
|
-
}
|
|
1031
|
-
`,gn=e=>`
|
|
1032
|
-
.${e} {
|
|
1033
|
-
display: flex;
|
|
1034
|
-
justify-content: flex-end;
|
|
1035
|
-
gap: 10px;
|
|
1036
|
-
align-items: center;
|
|
1037
|
-
height: 60px;
|
|
1038
|
-
flex: 0 0 auto;
|
|
1039
|
-
padding: 0 20px;
|
|
1040
|
-
border-top: 1px solid #EEE;
|
|
1041
|
-
}
|
|
1042
|
-
|
|
1043
|
-
@media (max-width: 540px) {
|
|
1044
|
-
.${e} {
|
|
1045
|
-
height: 56px;
|
|
1046
|
-
padding: 0 12px;
|
|
1047
|
-
gap: 8px;
|
|
1048
|
-
}
|
|
1049
|
-
}
|
|
1050
|
-
`,xn=e=>`
|
|
1051
|
-
.${e} {
|
|
1052
|
-
display: flex;
|
|
1053
|
-
justify-content: flex-start;
|
|
1054
|
-
gap: 10px;
|
|
1055
|
-
align-items: center;
|
|
1056
|
-
height: 60px;
|
|
1057
|
-
flex: 0 0 auto;
|
|
1058
|
-
padding: 0 20px;
|
|
1059
|
-
border-top-left-radius: 6px;
|
|
1060
|
-
border-top-right-radius: 6px;
|
|
1061
|
-
border-bottom: 1px solid #EEE;
|
|
1062
|
-
overflow: hidden;
|
|
1063
|
-
}
|
|
1064
|
-
|
|
1065
|
-
@media (max-width: 540px) {
|
|
1066
|
-
.${e} {
|
|
1067
|
-
height: 48px;
|
|
1068
|
-
padding: 0 12px;
|
|
1069
|
-
font-size: 14px;
|
|
1070
|
-
}
|
|
1071
|
-
}
|
|
1072
|
-
`,hn=e=>`
|
|
1073
|
-
.${e} {
|
|
1074
|
-
display: block;
|
|
1075
|
-
z-index: 101;
|
|
1076
|
-
outline: 1px dashed #aaa;
|
|
1077
|
-
background-color: transparent;
|
|
1078
|
-
cursor: move;
|
|
1079
|
-
-webkit-user-select: none;
|
|
1080
|
-
-moz-user-select: none;
|
|
1081
|
-
-ms-user-select: none;
|
|
1082
|
-
user-select: none;
|
|
1083
|
-
left: 0;
|
|
1084
|
-
top: 0;
|
|
1085
|
-
bottom: 0;
|
|
1086
|
-
right: 0;
|
|
1087
|
-
position: absolute;
|
|
1088
|
-
touch-action: none;
|
|
1089
|
-
}
|
|
1090
|
-
`,fn=e=>`
|
|
1091
|
-
.${e} {
|
|
1092
|
-
position: absolute;
|
|
1093
|
-
z-index: 2;
|
|
1094
|
-
background-color: rgba(0, 0, 0, 0.6);
|
|
1095
|
-
touch-action: none;
|
|
1096
|
-
}
|
|
1097
|
-
`,yn=e=>`
|
|
1098
|
-
.${e} {
|
|
1099
|
-
position: absolute;
|
|
1100
|
-
z-index: 3;
|
|
1101
|
-
touch-action: none;
|
|
1102
|
-
}
|
|
1103
|
-
`,bn=e=>`
|
|
1104
|
-
.${e} {
|
|
1105
|
-
backface-visibility: hidden;
|
|
1106
|
-
perspective: 1000px;
|
|
1107
|
-
max-inline-size: unset !important;
|
|
1108
|
-
max-block-size: unset !important;
|
|
1109
|
-
}
|
|
1110
|
-
`,$n=e=>`
|
|
1111
|
-
.${e} {
|
|
1112
|
-
position: absolute;
|
|
1113
|
-
z-index: 100;
|
|
1114
|
-
left: 0;
|
|
1115
|
-
top: 0;
|
|
1116
|
-
right: 0;
|
|
1117
|
-
bottom: 0;
|
|
1118
|
-
overflow: hidden;
|
|
1119
|
-
border-radius: 50%;
|
|
1120
|
-
}
|
|
1121
|
-
`,Sn={tl:"nw-resize",tr:"ne-resize",bl:"sw-resize",br:"se-resize"},mn={tl:{h:"left",v:"top"},tr:{h:"right",v:"top"},bl:{h:"left",v:"bottom"},br:{h:"right",v:"bottom"}},me=(e,t)=>{const o=Sn[t],{h:r,v:l}=mn[t];return`
|
|
1122
|
-
.${e} {
|
|
1123
|
-
display: block;
|
|
1124
|
-
z-index: 102;
|
|
1125
|
-
background-color: rgba(255, 255, 255, .6);
|
|
1126
|
-
cursor: ${o};
|
|
1127
|
-
-webkit-user-select: none;
|
|
1128
|
-
-moz-user-select: none;
|
|
1129
|
-
-ms-user-select: none;
|
|
1130
|
-
user-select: none;
|
|
1131
|
-
${r}: -3px;
|
|
1132
|
-
${l}: -3px;
|
|
1133
|
-
position: absolute;
|
|
1134
|
-
width: 5px;
|
|
1135
|
-
height: 5px;
|
|
1136
|
-
touch-action: none;
|
|
1137
|
-
}
|
|
1138
|
-
|
|
1139
|
-
@media (max-width: 540px), (pointer: coarse) {
|
|
1140
|
-
.${e} {
|
|
1141
|
-
width: 24px;
|
|
1142
|
-
height: 24px;
|
|
1143
|
-
${r}: -12px;
|
|
1144
|
-
${l}: -12px;
|
|
1145
|
-
}
|
|
1146
|
-
}
|
|
1147
|
-
`},On=e=>`
|
|
1148
|
-
.${e} {
|
|
1149
|
-
display: flex;
|
|
1150
|
-
align-items: center;
|
|
1151
|
-
justify-content: center;
|
|
1152
|
-
background-color: rgba(0, 0, 0, .4);
|
|
1153
|
-
width: 100vw;
|
|
1154
|
-
height: 100vh;
|
|
1155
|
-
height: 100dvh;
|
|
1156
|
-
position: fixed;
|
|
1157
|
-
left: 0;
|
|
1158
|
-
top: 0;
|
|
1159
|
-
z-index: 1000;
|
|
1160
|
-
overflow-y: auto;
|
|
1161
|
-
box-sizing: border-box;
|
|
1162
|
-
padding: 16px;
|
|
1163
|
-
}
|
|
1164
|
-
|
|
1165
|
-
@media (max-width: 540px) {
|
|
1166
|
-
.${e} {
|
|
1167
|
-
padding: 8px;
|
|
1168
|
-
align-items: flex-start;
|
|
1169
|
-
padding-top: env(safe-area-inset-top, 8px);
|
|
1170
|
-
padding-bottom: env(safe-area-inset-bottom, 8px);
|
|
1171
|
-
}
|
|
1172
|
-
}
|
|
1173
|
-
`,wn=e=>`
|
|
1174
|
-
.${e} {
|
|
1175
|
-
backface-visibility: hidden;
|
|
1176
|
-
user-select: none;
|
|
1177
|
-
perspective: 1000px;
|
|
1178
|
-
overflow: hidden;
|
|
1179
|
-
display: block;
|
|
1180
|
-
transform: translateZ(0);
|
|
1181
|
-
width: auto;
|
|
1182
|
-
-webkit-user-drag: none;
|
|
1183
|
-
position: absolute;
|
|
1184
|
-
z-index: 1;
|
|
1185
|
-
}
|
|
1186
|
-
`,vn=e=>{let t=5381;for(let o=0;o<e.length;o++)t=(t<<5)+t^e.charCodeAt(o);return Math.abs(t).toString(36)},T=e=>`hq-cropper__${vn(e)}`,A=e=>e||[],B=(e,t)=>{if(t)for(const o of t)e.classList.add(o)},Cn=e=>{const t={applyButton:[T("applyButton"),...A(e.applyButton)],cancelButton:[T("cancelButton"),...A(e.cancelButton)],container:[T("container"),...A(e.container)],handlerMove:[T("handlerMove"),...A(e.handlerMove)],handlerResizeTopLeft:[T("handlerResizeTopLeft"),...A(e.handlerResizeTopLeft)],handlerResizeTopRight:[T("handlerResizeTopRight"),...A(e.handlerResizeTopRight)],handlerResizeBottomLeft:[T("handlerResizeBottomLeft"),...A(e.handlerResizeBottomLeft)],handlerResizeBottomRight:[T("handlerResizeBottomRight"),...A(e.handlerResizeBottomRight)],sourceImage:[T("sourceImage"),...A(e.sourceImage)],portalArea:[T("portalArea"),...A(e.portalArea)],previewImage:[T("previewImage"),...A(e.previewImage)],body:[T("body"),...A(e.body)],header:[T("header"),...A(e.header)],footer:[T("footer"),...A(e.footer)],portal:[T("portal"),...A(e.portal)],preview:[T("preview"),...A(e.preview)],root:[T("root"),...A(e.root)]},o=`
|
|
1187
|
-
${sn(t.applyButton[0])}
|
|
1188
|
-
${cn(t.body[0])}
|
|
1189
|
-
${pn(t.cancelButton[0])}
|
|
1190
|
-
${un(t.container[0])}
|
|
1191
|
-
${gn(t.footer[0])}
|
|
1192
|
-
${xn(t.header[0])}
|
|
1193
|
-
${hn(t.handlerMove[0])}
|
|
1194
|
-
${fn(t.portalArea[0])}
|
|
1195
|
-
${yn(t.portal[0])}
|
|
1196
|
-
${bn(t.previewImage[0])}
|
|
1197
|
-
${$n(t.preview[0])}
|
|
1198
|
-
${me(t.handlerResizeBottomLeft[0],"bl")}
|
|
1199
|
-
${me(t.handlerResizeBottomRight[0],"br")}
|
|
1200
|
-
${me(t.handlerResizeTopLeft[0],"tl")}
|
|
1201
|
-
${me(t.handlerResizeTopRight[0],"tr")}
|
|
1202
|
-
${On(t.root[0])}
|
|
1203
|
-
${wn(t.sourceImage[0])}
|
|
1204
|
-
`,r=document.createElement("style");return r.innerHTML=o,document.getElementsByTagName("head")[0].prepend(r),t};let Rn=0;const Ln=e=>{const t=new Map,o=new Proxy({...e},{set(r,l,a){return Reflect.set(r,l,a),(t.get(l)||[]).forEach(c=>c.action(a,r,l)),!0}});return{getState:()=>({...o}),setState:r=>{for(const l of Object.keys(r)){const a=r[l];a!==void 0&&(o[l]=a)}},subscribe:(r,l)=>{const a=String(++Rn),c=t.get(r)||[];return t.set(r,[...c,{action:l,id:a}]),a},unsubscribe:r=>{for(const[l,a]of t.entries()){const c=a.filter(s=>s.id!==r);if(c.length!==a.length){t.set(l,c);return}}},unsubscribeAll:()=>{t.clear()}}},_e={action:null,sourceBase64:"",fileName:"",sourceHeight:0,sourceWidth:0,frame:{left:0,top:0,width:0,height:0},portal:{left:0,top:0,size:0},emitted:{X:0,Y:0,left:0,top:0,size:0},config:{applyButtonLabel:"Apply",cancelButtonLabel:"Cancel",compression:1,framePadding:3,minPortalSize:50,portalPosition:"center",portalSize:150,outputSize:0,type:"jpeg",maxFileSize:0,allowedTypes:["image/jpeg","image/png","image/gif","image/webp"]}},kn=(e={},t={})=>Ln({..._e,config:{..._e.config,...e},css:Cn(t)}),jn=(e,t)=>{var y;const o=e(),r=document.querySelector(`.${(y=o.css)==null?void 0:y.body[0]}`);if(!r)return o.frame;const{width:l,height:a}=r.getBoundingClientRect(),c=l/a,s=t.width/t.height;let p,x,g=0,h=0;return c>s?(p=a*s,x=a,h=(l-p)/2):(p=l,x=l*(t.height/t.width),g=(a-x)/2),{width:p,height:x,left:h,top:g}},En=(e,t,o)=>{const[r,l]=t,a=r+e>o.width?(o.width-e)/2:r,c=l+e>o.height?(o.height-e)/2:l;return[a,c]},zn=(e,t)=>{const{config:o}=e(),r=Math.min(t.width,t.height)-o.framePadding*2,l=o.portalSize>r?r:o.portalSize;if(Array.isArray(o.portalPosition)&&o.portalPosition.length===2){const[a,c]=En(l,o.portalPosition,t);return{left:a,top:c,size:l}}return o.portalPosition==="center"?{size:l,left:(t.width-l)/2,top:(t.height-l)/2}:{left:0,top:0,size:l}};var G=(e=>(e.MOVE="MOVE",e.RESIZE_TL="RESIZE_TL",e.RESIZE_TR="RESIZE_TR",e.RESIZE_BR="RESIZE_BR",e.RESIZE_BL="RESIZE_BL",e))(G||{});const Nn=e=>{var r;const t=e(),o=document.createElement("span");return B(o,(r=t.css)==null?void 0:r.handlerMove),o.setAttribute("data-action",G.MOVE),o},In=e=>{var r;const t=e(),o=document.createElement("span");return B(o,(r=t.css)==null?void 0:r.handlerResizeBottomLeft),o.setAttribute("data-action",G.RESIZE_BL),o},Tn=e=>{var r;const t=e(),o=document.createElement("span");return B(o,(r=t.css)==null?void 0:r.handlerResizeBottomRight),o.setAttribute("data-action",G.RESIZE_BR),o},An=e=>{var r;const t=e(),o=document.createElement("span");return B(o,(r=t.css)==null?void 0:r.handlerResizeTopLeft),o.setAttribute("data-action",G.RESIZE_TL),o},Pn=e=>{var r;const t=e(),o=document.createElement("span");return B(o,(r=t.css)==null?void 0:r.handlerResizeTopRight),o.setAttribute("data-action",G.RESIZE_TR),o},Bn=e=>{var r;const t=e(),o=document.createElement("img");return B(o,(r=t.css)==null?void 0:r.previewImage),o},Mn=e=>{var r;const t=e(),o=document.createElement("div");return B(o,(r=t.css)==null?void 0:r.preview),o.appendChild(Bn(e)),o},_n=e=>{var r;const t=e(),o=document.createElement("div");return B(o,(r=t.css)==null?void 0:r.portal),o.appendChild(Mn(e)),o.appendChild(Nn(e)),o.appendChild(An(e)),o.appendChild(Pn(e)),o.appendChild(In(e)),o.appendChild(Tn(e)),o},Dn=e=>{var r;const t=e(),o=document.createElement("div");return B(o,(r=t.css)==null?void 0:r.portalArea),o.appendChild(_n(e)),o},Fn=e=>{var r;const t=e(),o=document.createElement("img");return B(o,(r=t.css)==null?void 0:r.sourceImage),o.setAttribute("alt","source"),o.setAttribute("crossOrigin","anonymous"),o.setAttribute("draggable","false"),o.setAttribute("src",t.sourceBase64),o},Gn=e=>{var r;const t=e(),o=document.createElement("div");return B(o,(r=t.css)==null?void 0:r.body),o.appendChild(Fn(e)),o.appendChild(Dn(e)),o},Xn=(e,t)=>{var l;const o=e(),r=document.createElement("div");return B(r,(l=o.css)==null?void 0:l.applyButton),r.setAttribute("role","button"),r.innerText=o.config.applyButtonLabel,r.addEventListener("click",t),r},Yn=(e,t)=>{var l;const o=e(),r=document.createElement("div");return B(r,(l=o.css)==null?void 0:l.cancelButton),r.setAttribute("role","button"),r.innerText=o.config.cancelButtonLabel,r.addEventListener("click",t),r},Hn=(e,t,o)=>{var a;const r=e(),l=document.createElement("div");return B(l,(a=r.css)==null?void 0:a.footer),l.appendChild(Yn(e,o)),l.appendChild(Xn(e,t)),l},Un=e=>{var r;const t=e(),o=document.createElement("div");return B(o,(r=t.css)==null?void 0:r.header),o},Wn=(e,t,o)=>{var a;const r=e(),l=document.createElement("div");return B(l,(a=r.css)==null?void 0:a.container),l.appendChild(Un(e)),l.appendChild(Gn(e)),l.appendChild(Hn(e,t,o)),l},qn=(e,t,o)=>{var a;const r=e(),l=document.createElement("div");B(l,(a=r.css)==null?void 0:a.root),l.appendChild(Wn(e,t,o)),document.body.appendChild(l)},Zn=e=>{const t=document.createElement("input");return t.style.display="none",t.setAttribute("type","file"),t.setAttribute("accept","image/x-png,image/jpeg"),t.addEventListener("change",e,!1),document.body.appendChild(t),t},pe=new Map,Kn={header:"header",sourceImage:"sourceImage",portalArea:"portalArea",portal:"portal",previewImage:"previewImage"},J=(e,t)=>{if(pe.has(e))return pe.get(e);if(!t)return null;const o=t[Kn[e]],r=document.querySelector(`.${o[0]}`);return pe.set(e,r),r},Vn=()=>{pe.clear()},Qn=()=>{pe.clear()},Jn=(e,t)=>{const o=J("header",t.css);o&&(o.innerText=e)},ei=(e,t)=>{const o=J("sourceImage",t.css);o&&(o.setAttribute("src",e),o.style.height=`${t.frame.height}px`,o.style.width=`${t.frame.width}px`,o.style.left=`${t.frame.left}px`,o.style.top=`${t.frame.top}px`);const r=J("portalArea",t.css);r&&(r.style.height=`${t.frame.height}px`,r.style.width=`${t.frame.width}px`,r.style.left=`${t.frame.left}px`,r.style.top=`${t.frame.top}px`);const l=J("portal",t.css);l&&(l.style.width=`${t.portal.size}px`,l.style.height=`${t.portal.size}px`,l.style.left=`${t.portal.left}px`,l.style.top=`${t.portal.top}px`);const a=J("previewImage",t.css);a&&(a.setAttribute("src",e),a.style.height=`${t.frame.height}px`,a.style.width=`${t.frame.width}px`,a.style.marginLeft=`-${t.portal.left}px`,a.style.marginTop=`-${t.portal.top}px`)},ti=(e,t)=>{const o=J("portal",t.css);o&&(o.style.left=`${e.left}px`,o.style.top=`${e.top}px`,o.style.width=`${e.size}px`,o.style.height=`${e.size}px`);const r=J("previewImage",t.css);r&&(r.style.marginLeft=`-${e.left}px`,r.style.marginTop=`-${e.top}px`)},je=1,oi=e=>{var f,S;const t=e(),o=document.createElement("canvas"),r=t.frame.width||je,l=t.frame.height||je,a=t.sourceWidth/r,c=t.sourceHeight/l,s=t.portal.left*a,p=t.portal.top*c,x=Math.max(t.portal.size*Math.min(a,c),je),g=t.config.outputSize>0?t.config.outputSize:x;o.width=g,o.height=g;const h=document.querySelector(`.${(f=t.css)==null?void 0:f.sourceImage[0]}`);h&&((S=o.getContext("2d"))==null||S.drawImage(h,s,p,x,x,0,0,g,g));const y=o.toDataURL(`image/${t.config.type}`,t.config.compression);return new Promise((b,$)=>{try{o.toBlob(m=>{if(o.remove(),!m){$(new Error(`Failed to create blob for type: image/${t.config.type}`));return}b([y,m])},`image/${t.config.type}`,t.config.compression)}catch(m){o.remove(),$(m)}})},ri=(e,t,o)=>{const{emitted:r,portal:l,frame:a,config:c}=t();let s=r.left-r.X+e.clientX,p=r.top-r.Y+e.clientY;const x=c.framePadding,g=a.width-c.framePadding-l.size,h=c.framePadding,y=a.height-c.framePadding-l.size;s<x&&(s=x),s>g&&(s=g),p<h&&(p=h),p>y&&(p=y),o({portal:{...l,left:s,top:p}})},ni=(e,t,o)=>{const{action:r,emitted:l,portal:a,frame:c,config:s}=t(),p=e.pageX-l.X,x=e.pageY-l.Y;switch(r){case G.RESIZE_BR:{let g=l.size+Math.max(p,x);return g<s.minPortalSize&&(g=s.minPortalSize),l.top+g>c.height-s.framePadding&&(g=c.height-l.top-s.framePadding),l.left+g>c.width-s.framePadding&&(g=c.width-l.left-s.framePadding),o({portal:{...a,size:g}})}case G.RESIZE_TR:{let g=p+x>0?l.size+p:l.size-x,h=p+x>0?l.top-p:l.top+x;return g<s.minPortalSize&&(h=l.top+l.size-s.minPortalSize,g=s.minPortalSize),l.left+g>c.width-s.framePadding&&(g=c.width-l.left-s.framePadding,h=l.top-c.width+l.left+l.size),h<s.framePadding&&(g=l.top+l.size,h=s.framePadding),o({portal:{...a,top:h,size:g}})}case G.RESIZE_TL:{const g=Math.min(p,x);let h=l.size-g,y=l.left+g,f=l.top+g;if(h<s.minPortalSize){const S=l.size-s.minPortalSize;h=s.minPortalSize,y=l.left+S,f=l.top+S}if(f<s.framePadding){const S=s.framePadding-f;f=s.framePadding,y=y+S,h=h-S}if(y<s.framePadding){const S=s.framePadding-y;y=s.framePadding,f=f+S,h=h-S}return o({portal:{...a,top:f,left:y,size:h}})}case G.RESIZE_BL:{let g=p+x>0?l.size+x:l.size-p,h=p+x>0?l.left-x:l.left+p;return g<s.minPortalSize&&(h=l.left+l.size-s.minPortalSize,g=s.minPortalSize),g+l.top>c.height-s.framePadding&&(h=l.left-c.height+l.top+l.size,g=c.height-l.top-s.framePadding),h<s.framePadding&&(h=s.framePadding,g=l.left+l.size-s.framePadding),o({portal:{...a,left:h,size:g}})}default:return}},Je=e=>{if("touches"in e&&e.touches.length>0){const o=e.touches[0];return{clientX:o.clientX,clientY:o.clientY,pageX:o.pageX,pageY:o.pageY}}if("changedTouches"in e&&e.changedTouches.length>0){const o=e.changedTouches[0];return{clientX:o.clientX,clientY:o.clientY,pageX:o.pageX,pageY:o.pageY}}const t=e;return{clientX:t.clientX,clientY:t.clientY,pageX:t.pageX,pageY:t.pageY}},ii=(e,t)=>{var y,f,S;const o=e(),r=document.querySelector(`.${(y=o.css)==null?void 0:y.portal[0]}`),l=document.querySelector(`.${(f=o.css)==null?void 0:f.portalArea[0]}`),a=document.querySelector(`.${(S=o.css)==null?void 0:S.root[0]}`);let c=null,s=null;const p=b=>{b.preventDefault();const{portal:$}=e(),m=Je(b);if(b.target){const O=b.target.getAttribute("data-action"),w={X:m.pageX,Y:m.pageY,left:$.left,top:$.top,size:$.size};t({action:O,emitted:w})}},x=()=>{const{action:b}=e();c!==null&&(cancelAnimationFrame(c),c=null),s=null,b&&t({action:null})},g=()=>{if(c=null,!s)return;const b=s;s=null;const{action:$}=e();if($)switch($){case G.MOVE:ri(b,e,t);break;default:ni(b,e,t)}},h=b=>{const{action:$}=e();$&&(b.preventDefault(),s=Je(b),c===null&&(c=requestAnimationFrame(g)))};return a&&(a.addEventListener("mouseup",x),a.addEventListener("touchend",x),a.addEventListener("touchcancel",x)),r&&(r.addEventListener("mousedown",p),r.addEventListener("touchstart",p,{passive:!1})),l&&(l.addEventListener("mousemove",h),l.addEventListener("touchmove",h,{passive:!1})),()=>{c!==null&&cancelAnimationFrame(c),a&&(a.removeEventListener("mouseup",x),a.removeEventListener("touchend",x),a.removeEventListener("touchcancel",x)),r&&(r.removeEventListener("mousedown",p),r.removeEventListener("touchstart",p)),l&&(l.removeEventListener("mousemove",h),l.removeEventListener("touchmove",h))}},et=1024*1024,li=(e,t)=>{if(!t.allowedTypes.includes(e.type))return`Invalid file type "${e.type}". Allowed types: ${t.allowedTypes.join(", ")}`;if(t.maxFileSize>0&&e.size>t.maxFileSize){const o=(t.maxFileSize/et).toFixed(2);return`File size (${(e.size/et).toFixed(2)}MB) exceeds maximum allowed size (${o}MB)`}return null},ai=(e,t,o,r,l,a,c)=>{const s=m=>{c?c(m):console.error(`HqCropper: ${m}`)};if(!e.target.files||e.target.files.length===0){s("Can't read file input");return}const p=e.target.files[0],{config:x}=t(),g=li(p,x);if(g){s(g),e.target.value="";return}const h=new FileReader;let y=null;const f=()=>{var w;const m=t(),O=document.querySelector(`.${(w=m.css)==null?void 0:w.root[0]}`);O&&(O.remove(),document.removeEventListener("keydown",S),y==null||y(),Qn(),a(),o(_e))},S=m=>{m.key==="Escape"&&t().sourceBase64&&b(m)},b=m=>{m.preventDefault(),f()},$=m=>{m.preventDefault();const O=t();oi(t).then(([w,k])=>{r(w,k,O),b(m)}).catch(w=>{s(w instanceof Error?w.message:"Failed to crop image")})};h.onload=m=>{const O=new Image;if(!m.target||typeof m.target.result!="string"){s("Can't load result image");return}O.src=m.target.result,O.onerror=()=>{s("Failed to load image")},O.onload=()=>{var z;qn(t,$,b),Vn(),l("fileName",Jn),l("sourceBase64",ei),l("portal",ti);const w=jn(t,O),k=zn(t,w);o({frame:w,portal:k,fileName:p.name,sourceBase64:(z=m.target)==null?void 0:z.result,sourceHeight:O.height,sourceWidth:O.width}),y=ii(t,o),document.addEventListener("keydown",S)}},h.onerror=()=>{s("Failed to read file")},h.readAsDataURL(p),e.target.value=""},di=(e,t,o,r)=>{const{getState:l,setState:a,subscribe:c,unsubscribeAll:s}=kn(t,o),p=Zn(x=>ai(x,l,a,e,c,s,r));return{open:()=>p.click()}},Z={portalSize:200,outputSize:400,compression:.9,type:"jpeg",maxFileSize:10*1024*1024,allowedTypes:["image/jpeg","image/png","image/webp"],applyLabel:"Apply",cancelLabel:"Cancel"},tt="vacano-image-cropper-styles",si=`
|
|
1205
|
-
.vacano-cropper-root {
|
|
1206
|
-
background-color: rgba(0, 0, 0, 0.5);
|
|
1207
|
-
backdrop-filter: blur(4px);
|
|
1208
|
-
}
|
|
1209
|
-
|
|
1210
|
-
.vacano-cropper-header {
|
|
1211
|
-
border-bottom: 1px solid ${n.COLORS.gray};
|
|
1212
|
-
padding: 16px 20px;
|
|
1213
|
-
}
|
|
1214
|
-
|
|
1215
|
-
.vacano-cropper-footer {
|
|
1216
|
-
border-top: 1px solid ${n.COLORS.gray};
|
|
1217
|
-
padding: 16px 20px;
|
|
1218
|
-
gap: 12px;
|
|
1219
|
-
}
|
|
1220
|
-
|
|
1221
|
-
.vacano-cropper-cancel-button {
|
|
1222
|
-
padding: 8px 16px;
|
|
1223
|
-
border-radius: 16px;
|
|
1224
|
-
border: 1px solid ${n.COLORS.gray};
|
|
1225
|
-
background-color: ${n.COLORS.white};
|
|
1226
|
-
color: ${n.COLORS.black};
|
|
1227
|
-
font-size: 14px;
|
|
1228
|
-
font-weight: 500;
|
|
1229
|
-
cursor: pointer;
|
|
1230
|
-
transition: background-color 0.2s;
|
|
1231
|
-
}
|
|
1232
|
-
|
|
1233
|
-
.vacano-cropper-cancel-button:hover {
|
|
1234
|
-
background-color: ${n.COLORS.gray};
|
|
1235
|
-
}
|
|
1236
|
-
|
|
1237
|
-
.vacano-cropper-apply-button {
|
|
1238
|
-
padding: 8px 16px;
|
|
1239
|
-
border-radius: 16px;
|
|
1240
|
-
border: none;
|
|
1241
|
-
background-color: ${n.COLORS.black};
|
|
1242
|
-
color: ${n.COLORS.white};
|
|
1243
|
-
font-size: 14px;
|
|
1244
|
-
font-weight: 500;
|
|
1245
|
-
cursor: pointer;
|
|
1246
|
-
transition: background-color 0.2s;
|
|
1247
|
-
}
|
|
1248
|
-
|
|
1249
|
-
.vacano-cropper-apply-button:hover {
|
|
1250
|
-
background-color: ${n.COLORS["iron-grey"]};
|
|
1251
|
-
}
|
|
1252
|
-
`,ci=()=>{if(typeof document>"u"||document.getElementById(tt))return;const e=document.createElement("style");e.id=tt,e.textContent=si,document.head.appendChild(e)},pi={root:["vacano-cropper-root"],container:["vacano-cropper-container"],header:["vacano-cropper-header"],body:["vacano-cropper-body"],footer:["vacano-cropper-footer"],cancelButton:["vacano-cropper-cancel-button"],applyButton:["vacano-cropper-apply-button"],portal:["vacano-cropper-portal"]},mt=(e={})=>{const{allowedTypes:t=Z.allowedTypes,applyLabel:o=Z.applyLabel,cancelLabel:r=Z.cancelLabel,compression:l=Z.compression,maxFileSize:a=Z.maxFileSize,onCrop:c,onError:s,outputSize:p=Z.outputSize,portalSize:x=Z.portalSize,type:g=Z.type}=e,h=u.useRef(null);return{open:u.useCallback(()=>{h.current||(ci(),h.current=di((f,S,b)=>{S&&(c==null||c({base64:f,blob:S,state:b}))},{portalSize:x,outputSize:p,compression:l,type:g,maxFileSize:a,allowedTypes:t,applyButtonLabel:o,cancelButtonLabel:r},pi,f=>{s==null||s({code:"CROPPER_ERROR",message:f})})),h.current.open()},[t,o,r,l,a,c,s,p,x,g])}},Ee=C.newClassNameGetter("image-cropper"),ui=({allowedTypes:e,applyLabel:t,buttonLabel:o="Select Image",cancelLabel:r,className:l,classnames:a,compression:c,maxFileSize:s,onCrop:p,onError:x,outputSize:g,portalSize:h,previewSize:y=120,ref:f,type:S,value:b,...$})=>{const[m,O]=u.useState(b??null),{open:w}=mt({allowedTypes:e,applyLabel:t,cancelLabel:r,compression:c,maxFileSize:s,onCrop:k=>{O(k.base64),p==null||p(k)},onError:x,outputSize:g,portalSize:h,type:S});return i.jsxs(ln,{...$,ref:f,className:Ee("container",l),children:[i.jsx(an,{$size:y,className:Ee("preview",a==null?void 0:a.preview),children:m?i.jsx("img",{src:m,alt:"Preview"}):i.jsx(dn,{children:"No image"})}),i.jsx(d.Button,{variant:"system",onClick:w,className:Ee("button",a==null?void 0:a.button),style:{width:y},children:o})]})},re={default:{box:40,line:22,weight:2.5,gap:6},compact:{box:32,line:18,weight:2,gap:5}},gi=d.styled.button`
|
|
927
|
+
color: ${r.COLORS.black};
|
|
928
|
+
font-size: ${({$level:e})=>Fe[e].fontSize}px;
|
|
929
|
+
line-height: ${({$level:e})=>Fe[e].lineHeight};
|
|
930
|
+
`,Gr=C.newClassNameGetter("heading"),Hr=({as:e,children:o,className:t,level:l=3,ref:s,...d})=>n.jsx(Fr,{...d,as:`h${e??l}`,ref:s,className:Gr("container",t),$level:l,children:o}),Z={default:{box:40,line:22,weight:2.5,gap:6},compact:{box:32,line:18,weight:2,gap:5}},Ur=i.styled.button`
|
|
1253
931
|
position: relative;
|
|
1254
932
|
display: flex;
|
|
1255
933
|
align-items: center;
|
|
1256
934
|
justify-content: center;
|
|
1257
|
-
width: ${({$size:e})=>
|
|
1258
|
-
height: ${({$size:e})=>
|
|
935
|
+
width: ${({$size:e})=>Z[e].box}px;
|
|
936
|
+
height: ${({$size:e})=>Z[e].box}px;
|
|
1259
937
|
padding: 0;
|
|
1260
938
|
border: none;
|
|
1261
939
|
border-radius: 8px;
|
|
@@ -1266,54 +944,54 @@
|
|
|
1266
944
|
transition: background-color 0.15s ease;
|
|
1267
945
|
|
|
1268
946
|
&:hover:not(:disabled) {
|
|
1269
|
-
background-color: ${
|
|
947
|
+
background-color: ${r.COLORS.gray};
|
|
1270
948
|
}
|
|
1271
949
|
|
|
1272
950
|
&:focus-visible {
|
|
1273
|
-
box-shadow: 0 0 0 2px ${
|
|
951
|
+
box-shadow: 0 0 0 2px ${r.COLORS["steel-blue"]};
|
|
1274
952
|
}
|
|
1275
|
-
`,
|
|
953
|
+
`,Wr=i.styled.div`
|
|
1276
954
|
display: flex;
|
|
1277
955
|
flex-direction: column;
|
|
1278
956
|
align-items: center;
|
|
1279
|
-
gap: ${({$size:e})=>
|
|
1280
|
-
`,
|
|
957
|
+
gap: ${({$size:e})=>Z[e].gap}px;
|
|
958
|
+
`,Oe=i.styled.span`
|
|
1281
959
|
display: block;
|
|
1282
|
-
width: ${({$size:e})=>
|
|
1283
|
-
height: ${({$size:e})=>
|
|
1284
|
-
background-color: ${
|
|
960
|
+
width: ${({$size:e})=>Z[e].line}px;
|
|
961
|
+
height: ${({$size:e})=>Z[e].weight}px;
|
|
962
|
+
background-color: ${r.COLORS.black};
|
|
1285
963
|
border-radius: 2px;
|
|
1286
964
|
transition:
|
|
1287
965
|
transform 0.3s ease,
|
|
1288
966
|
opacity 0.2s ease;
|
|
1289
967
|
transform-origin: center;
|
|
1290
968
|
|
|
1291
|
-
${({$position:e,$size:
|
|
1292
|
-
`,
|
|
969
|
+
${({$position:e,$size:o,$open:t})=>{const{gap:l,weight:s}=Z[o],d=l+s;if(e==="top")return t?`transform: translateY(${d}px) rotate(45deg);`:"";if(e==="middle")return t?"opacity: 0;":"";if(e==="bottom")return t?`transform: translateY(-${d}px) rotate(-45deg);`:""}}
|
|
970
|
+
`,ge=C.newClassNameGetter("menu-button"),Xr=({className:e,classnames:o,defaultOpen:t=!1,disabled:l=!1,onOpenChange:s,open:d,ref:x,size:c="default",...p})=>{const[g,f]=a.useState(t),h=d!==void 0,y=h?d:g,u=a.useCallback(()=>{if(l)return;const S=!y;h||f(S),s==null||s(S)},[l,y,h,s]);return n.jsx(Ur,{...p,ref:x,type:"button",disabled:l,"aria-label":y?"Close menu":"Open menu","aria-expanded":y,className:ge("container",e),$size:c,$disabled:l,onClick:u,children:n.jsxs(Wr,{$size:c,$open:y,children:[n.jsx(Oe,{$size:c,$position:"top",$open:y,className:ge("line",o==null?void 0:o.line)}),n.jsx(Oe,{$size:c,$position:"middle",$open:y,className:ge("line",o==null?void 0:o.line)}),n.jsx(Oe,{$size:c,$position:"bottom",$open:y,className:ge("line",o==null?void 0:o.line)})]})})},Yr=5e3,Ge={default:{background:"#374151",text:r.COLORS.white},success:{background:r.COLORS.green,text:r.COLORS.white},warning:{background:r.COLORS.yellow,text:r.COLORS.white},danger:{background:r.COLORS.red,text:r.COLORS.white},info:{background:r.COLORS["steel-blue"],text:r.COLORS.white}},dt=a.createContext(null),He=e=>Ge[e]??Ge.default,Kr=i.styled.div`
|
|
1293
971
|
position: fixed;
|
|
1294
972
|
top: 0;
|
|
1295
973
|
left: 0;
|
|
1296
974
|
right: 0;
|
|
1297
975
|
z-index: 9999;
|
|
1298
976
|
pointer-events: none;
|
|
1299
|
-
`,
|
|
977
|
+
`,qr=i.styled.div`
|
|
1300
978
|
display: flex;
|
|
1301
979
|
align-items: center;
|
|
1302
980
|
justify-content: center;
|
|
1303
981
|
gap: 12px;
|
|
1304
982
|
min-height: 44px;
|
|
1305
983
|
padding: 12px 48px;
|
|
1306
|
-
background-color: ${({$variant:e})=>
|
|
1307
|
-
color: ${({$variant:e})=>
|
|
1308
|
-
animation: ${({$isExiting:e})=>e?
|
|
984
|
+
background-color: ${({$variant:e})=>He(e).background};
|
|
985
|
+
color: ${({$variant:e})=>He(e).text};
|
|
986
|
+
animation: ${({$isExiting:e})=>e?r.KEYFRAMES.slideOutTopFade:r.KEYFRAMES.slideInTopFade}
|
|
1309
987
|
0.3s ease-out forwards;
|
|
1310
988
|
pointer-events: auto;
|
|
1311
|
-
|
|
989
|
+
`,Vr=i.styled.span`
|
|
1312
990
|
font-size: 14px;
|
|
1313
991
|
font-weight: 500;
|
|
1314
992
|
line-height: 1.4;
|
|
1315
993
|
text-align: center;
|
|
1316
|
-
`,
|
|
994
|
+
`,Zr=i.styled.button`
|
|
1317
995
|
position: absolute;
|
|
1318
996
|
right: 16px;
|
|
1319
997
|
top: 50%;
|
|
@@ -1334,9 +1012,9 @@
|
|
|
1334
1012
|
&:hover {
|
|
1335
1013
|
opacity: 1;
|
|
1336
1014
|
}
|
|
1337
|
-
`,
|
|
1015
|
+
`,Qr=i.styled.div`
|
|
1338
1016
|
position: relative;
|
|
1339
|
-
`,
|
|
1017
|
+
`,Jr=({notification:e,onRemove:o,onAnimationEnd:t})=>{const[l,s]=a.useState(!1),d=()=>{s(!0)},x=()=>{l&&(o(),t())};return a.useEffect(()=>{const c=setTimeout(()=>{d()},e.duration);return()=>clearTimeout(c)},[e.duration,e.id]),n.jsx(Qr,{children:n.jsxs(qr,{$variant:e.variant,$isExiting:l,onAnimationEnd:x,children:[n.jsx(Vr,{children:e.message}),n.jsx(Zr,{onClick:d,children:n.jsx(n.X,{style:{width:18,height:18}})})]})})},en=(e,o)=>{switch(o.type){case"ADD_NOTIFICATION":{const t=o.payload;return e.current?{...e,queue:[...e.queue,t]}:{...e,current:t}}case"REMOVE_CURRENT":return{...e,current:null};case"SHOW_NEXT":{const t=e.queue[0];return t?{current:t,queue:e.queue.slice(1)}:e}default:return e}},tn={current:null,queue:[]},on=({children:e})=>{const[o,t]=a.useReducer(en,tn),l=a.useCallback((c,p="default",g=Yr)=>{const f=`notification-${Date.now()}-${Math.random().toString(36).substr(2,9)}`;t({type:"ADD_NOTIFICATION",payload:{id:f,message:c,variant:p,duration:g}})},[]),s=a.useCallback(()=>{t({type:"REMOVE_CURRENT"})},[]),d=a.useCallback(()=>{t({type:"REMOVE_CURRENT"})},[]),x=a.useCallback(()=>{setTimeout(()=>{t({type:"SHOW_NEXT"})},100)},[]);return n.jsxs(dt.Provider,{value:{show:l,hide:s},children:[e,n.jsx(Kr,{children:o.current&&n.jsx(Jr,{notification:o.current,onRemove:d,onAnimationEnd:x},o.current.id)})]})},rn=()=>{const e=a.useContext(dt);if(!e)throw new Error("useNotification must be used within NotificationProvider");return e},st=a.createContext(null),nn="Agree",ln="Discard",dn=z.keyframes`
|
|
1340
1018
|
from {
|
|
1341
1019
|
opacity: 0;
|
|
1342
1020
|
transform: translateY(100%);
|
|
@@ -1345,7 +1023,7 @@
|
|
|
1345
1023
|
opacity: 1;
|
|
1346
1024
|
transform: translateY(0);
|
|
1347
1025
|
}
|
|
1348
|
-
`,
|
|
1026
|
+
`,sn=z.keyframes`
|
|
1349
1027
|
from {
|
|
1350
1028
|
opacity: 1;
|
|
1351
1029
|
transform: translateY(0);
|
|
@@ -1354,7 +1032,7 @@
|
|
|
1354
1032
|
opacity: 0;
|
|
1355
1033
|
transform: translateY(100%);
|
|
1356
1034
|
}
|
|
1357
|
-
`,
|
|
1035
|
+
`,an=i.styled.div`
|
|
1358
1036
|
position: fixed;
|
|
1359
1037
|
bottom: 24px;
|
|
1360
1038
|
right: 24px;
|
|
@@ -1362,49 +1040,49 @@
|
|
|
1362
1040
|
flex-direction: column;
|
|
1363
1041
|
max-width: 400px;
|
|
1364
1042
|
padding: 16px 16px 0 16px;
|
|
1365
|
-
background-color: ${
|
|
1366
|
-
border: 1px dashed ${
|
|
1043
|
+
background-color: ${r.COLORS.white};
|
|
1044
|
+
border: 1px dashed ${r.COLORS.gray};
|
|
1367
1045
|
border-radius: 12px;
|
|
1368
1046
|
overflow: hidden;
|
|
1369
1047
|
box-shadow:
|
|
1370
1048
|
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
1371
1049
|
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
1372
|
-
animation: ${({$isExiting:e})=>e?
|
|
1050
|
+
animation: ${({$isExiting:e})=>e?sn:dn} 0.2s ease-out forwards;
|
|
1373
1051
|
z-index: 1000;
|
|
1374
|
-
`,
|
|
1052
|
+
`,cn=i.styled.p`
|
|
1375
1053
|
margin: 0;
|
|
1376
1054
|
font-weight: 600;
|
|
1377
1055
|
font-size: 14px;
|
|
1378
|
-
color: ${
|
|
1056
|
+
color: ${r.COLORS.black};
|
|
1379
1057
|
text-align: left;
|
|
1380
|
-
`,
|
|
1058
|
+
`,pn=i.styled.p`
|
|
1381
1059
|
margin: 4px 0 0;
|
|
1382
1060
|
font-size: 13px;
|
|
1383
|
-
color: ${
|
|
1061
|
+
color: ${r.COLORS["iron-grey"]};
|
|
1384
1062
|
text-align: left;
|
|
1385
|
-
`,
|
|
1063
|
+
`,xn=i.styled.div`
|
|
1386
1064
|
display: flex;
|
|
1387
1065
|
align-items: center;
|
|
1388
1066
|
justify-content: flex-start;
|
|
1389
1067
|
gap: 8px;
|
|
1390
1068
|
margin: 12px -16px 0;
|
|
1391
1069
|
padding: 12px 16px;
|
|
1392
|
-
border-top: 1px solid ${
|
|
1070
|
+
border-top: 1px solid ${r.COLORS.gray};
|
|
1393
1071
|
background-color: rgba(0, 0, 0, 0.01);
|
|
1394
|
-
`,
|
|
1072
|
+
`,un=({confirmation:e,onDone:o})=>{const[t,l]=a.useState(!1),[s,d]=a.useState(!1),{label:x,description:c,onConfirm:p,onDiscard:g,options:f}=e,h=f.confirmLabel||nn,y=f.discardLabel||ln,u=a.useCallback($=>{l(!0),setTimeout(()=>{$==null||$(),o()},200)},[o]),S=a.useCallback(async()=>{const $=p();if($ instanceof Promise){d(!0);try{await $}finally{d(!1)}}u()},[u,p]),b=a.useCallback(()=>{s||u(g)},[u,s,g]);return a.useEffect(()=>{const $=w=>{w.key==="Escape"&&!s&&b()};return document.addEventListener("keydown",$),()=>document.removeEventListener("keydown",$)},[b,s]),n.jsxs(an,{$isExiting:t,children:[n.jsx(cn,{children:x}),n.jsx(pn,{children:c}),n.jsxs(xn,{children:[n.jsx(i.Button,{variant:"transparent",size:"compact",onClick:b,disabled:s,children:y}),n.jsx(i.Button,{variant:"system",size:"compact",onClick:S,loading:s,children:h})]})]})},gn=()=>{},fn=({children:e})=>{const[o,t]=a.useState(null),l=a.useCallback((d,x,c,p,g)=>{t({open:!0,label:d,description:x,onConfirm:c,onDiscard:p||gn,options:g||{}})},[]),s=a.useCallback(()=>{t(null)},[]);return n.jsxs(st.Provider,{value:{show:l,hide:s},children:[e,o&&n.jsx(un,{confirmation:o,onDone:s})]})},hn=()=>{const e=a.useContext(st);if(!e)throw new Error("useNotifyConfirmation must be used within NotifyConfirmationProvider");return e},yn=i.styled.div`
|
|
1395
1073
|
display: flex;
|
|
1396
1074
|
flex-direction: column;
|
|
1397
1075
|
gap: 2px;
|
|
1398
|
-
`,
|
|
1076
|
+
`,bn=i.styled.span`
|
|
1399
1077
|
font-size: 12px;
|
|
1400
1078
|
font-weight: 700;
|
|
1401
1079
|
text-transform: uppercase;
|
|
1402
1080
|
letter-spacing: 0.5px;
|
|
1403
|
-
color: ${
|
|
1404
|
-
|
|
1081
|
+
color: ${r.COLORS["iron-grey"]};
|
|
1082
|
+
`,$n=i.styled.span`
|
|
1405
1083
|
font-size: 14px;
|
|
1406
|
-
color: ${
|
|
1407
|
-
`,
|
|
1084
|
+
color: ${r.COLORS["iron-grey"]};
|
|
1085
|
+
`,Ce=C.newClassNameGetter("overline"),Sn=({children:e,className:o,classnames:t,description:l,ref:s,...d})=>n.jsxs(yn,{...d,ref:s,className:Ce("container",o),children:[n.jsx(bn,{className:Ce("label",t==null?void 0:t.label),children:e}),l&&n.jsx($n,{className:Ce("description",t==null?void 0:t.description),children:l})]}),On=i.styled.div`
|
|
1408
1086
|
position: relative;
|
|
1409
1087
|
display: flex;
|
|
1410
1088
|
flex-direction: column;
|
|
@@ -1414,17 +1092,17 @@
|
|
|
1414
1092
|
min-height: 100dvh;
|
|
1415
1093
|
padding: 40px 24px;
|
|
1416
1094
|
overflow: hidden;
|
|
1417
|
-
`,
|
|
1095
|
+
`,Cn=i.styled.div`
|
|
1418
1096
|
position: absolute;
|
|
1419
1097
|
inset: 0;
|
|
1420
1098
|
background-image:
|
|
1421
|
-
linear-gradient(${
|
|
1422
|
-
linear-gradient(90deg, ${
|
|
1099
|
+
linear-gradient(${r.COLORS.gray} 1px, transparent 1px),
|
|
1100
|
+
linear-gradient(90deg, ${r.COLORS.gray} 1px, transparent 1px);
|
|
1423
1101
|
background-size: ${({$size:e})=>`${e}px ${e}px`};
|
|
1424
1102
|
mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 20%, transparent 100%);
|
|
1425
1103
|
-webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 20%, transparent 100%);
|
|
1426
1104
|
pointer-events: none;
|
|
1427
|
-
`,
|
|
1105
|
+
`,wn=i.styled.div`
|
|
1428
1106
|
position: relative;
|
|
1429
1107
|
z-index: 1;
|
|
1430
1108
|
display: flex;
|
|
@@ -1432,71 +1110,71 @@
|
|
|
1432
1110
|
align-items: center;
|
|
1433
1111
|
width: 100%;
|
|
1434
1112
|
max-width: 400px;
|
|
1435
|
-
`,
|
|
1113
|
+
`,vn=i.styled.div`
|
|
1436
1114
|
margin-bottom: 32px;
|
|
1437
|
-
`,
|
|
1115
|
+
`,mn=i.styled.div`
|
|
1438
1116
|
display: flex;
|
|
1439
1117
|
align-items: center;
|
|
1440
1118
|
justify-content: center;
|
|
1441
1119
|
width: 48px;
|
|
1442
1120
|
height: 48px;
|
|
1443
1121
|
border-radius: 10px;
|
|
1444
|
-
border: 1px solid ${
|
|
1445
|
-
background-color: ${
|
|
1446
|
-
color: ${
|
|
1122
|
+
border: 1px solid ${r.COLORS.gray};
|
|
1123
|
+
background-color: ${r.COLORS.white};
|
|
1124
|
+
color: ${r.COLORS["iron-grey"]};
|
|
1447
1125
|
box-shadow:
|
|
1448
1126
|
0 1px 2px rgba(0, 0, 0, 0.05),
|
|
1449
1127
|
0 1px 3px rgba(0, 0, 0, 0.1);
|
|
1450
1128
|
margin-bottom: 24px;
|
|
1451
|
-
`,
|
|
1129
|
+
`,kn=i.styled.div`
|
|
1452
1130
|
display: flex;
|
|
1453
1131
|
flex-direction: column;
|
|
1454
1132
|
align-items: center;
|
|
1455
1133
|
text-align: center;
|
|
1456
1134
|
gap: 8px;
|
|
1457
1135
|
margin-bottom: 32px;
|
|
1458
|
-
`,
|
|
1136
|
+
`,Rn=i.styled.h1`
|
|
1459
1137
|
margin: 0;
|
|
1460
1138
|
font-size: 24px;
|
|
1461
1139
|
font-weight: 600;
|
|
1462
|
-
color: ${
|
|
1140
|
+
color: ${r.COLORS.black};
|
|
1463
1141
|
line-height: 1.3;
|
|
1464
|
-
`,
|
|
1142
|
+
`,Ln=i.styled.p`
|
|
1465
1143
|
margin: 0;
|
|
1466
1144
|
font-size: 14px;
|
|
1467
|
-
color: ${
|
|
1145
|
+
color: ${r.COLORS["iron-grey"]};
|
|
1468
1146
|
line-height: 1.5;
|
|
1469
1147
|
max-width: 360px;
|
|
1470
|
-
`,
|
|
1148
|
+
`,jn=i.styled.div`
|
|
1471
1149
|
width: 100%;
|
|
1472
|
-
`,
|
|
1150
|
+
`,Nn=i.styled.div`
|
|
1473
1151
|
margin-top: 32px;
|
|
1474
1152
|
text-align: center;
|
|
1475
1153
|
font-size: 14px;
|
|
1476
|
-
color: ${
|
|
1477
|
-
`,
|
|
1154
|
+
color: ${r.COLORS["iron-grey"]};
|
|
1155
|
+
`,W=C.newClassNameGetter("shell-screen"),En=({children:e,className:o,classnames:t,description:l,footer:s,gridSize:d=64,icon:x,logo:c,ref:p,title:g,...f})=>n.jsxs(On,{...f,ref:p,className:W("container",o),children:[n.jsx(Cn,{$size:d,className:W("grid",t==null?void 0:t.grid)}),n.jsxs(wn,{children:[c&&n.jsx(vn,{children:c}),x&&n.jsx(mn,{className:W("icon"),children:x}),(g||l)&&n.jsxs(kn,{className:W("header",t==null?void 0:t.header),children:[g&&n.jsx(Rn,{className:W("title",t==null?void 0:t.title),children:g}),l&&n.jsx(Ln,{className:W("description",t==null?void 0:t.description),children:l})]}),e&&n.jsx(jn,{className:W("content",t==null?void 0:t.content),children:e}),s&&n.jsx(Nn,{className:W("footer",t==null?void 0:t.footer),children:s})]})]}),In=(e,o,t,l)=>{if(t*2+3+l*2>=e)return Array.from({length:e},(y,u)=>u+1);const d=Math.max(o-t,l+1),x=Math.min(o+t,e-l),c=d>l+2,p=x<e-l-1;if(!c&&p){const y=t*2+l+2,u=Array.from({length:y},(b,$)=>$+1),S=Array.from({length:l},(b,$)=>e-l+$+1);return[...u,"dots",...S]}if(c&&!p){const y=t*2+l+2,u=Array.from({length:l},(b,$)=>$+1),S=Array.from({length:y},(b,$)=>e-y+$+1);return[...u,"dots",...S]}const g=Array.from({length:l},(y,u)=>u+1),f=Array.from({length:x-d+1},(y,u)=>d+u),h=Array.from({length:l},(y,u)=>e-l+u+1);return[...g,"dots",...f,"dots",...h]},Tn=i.styled.nav`
|
|
1478
1156
|
display: inline-flex;
|
|
1479
1157
|
align-items: center;
|
|
1480
1158
|
gap: 2px;
|
|
1481
1159
|
position: relative;
|
|
1482
|
-
`,
|
|
1160
|
+
`,zn=(e,o)=>{if(!o)switch(e){case"bordered":return`
|
|
1483
1161
|
background-color: transparent;
|
|
1484
|
-
border: 1px solid ${
|
|
1485
|
-
color: ${
|
|
1486
|
-
&:hover { background-color: ${
|
|
1162
|
+
border: 1px solid ${r.COLORS.gray};
|
|
1163
|
+
color: ${r.COLORS["iron-grey"]};
|
|
1164
|
+
&:hover { background-color: ${r.COLORS.gray}; }
|
|
1487
1165
|
`;case"light":return`
|
|
1488
1166
|
background-color: transparent;
|
|
1489
|
-
color: ${
|
|
1490
|
-
&:hover { background-color: ${
|
|
1167
|
+
color: ${r.COLORS["iron-grey"]};
|
|
1168
|
+
&:hover { background-color: ${r.COLORS.gray}; }
|
|
1491
1169
|
`;default:return`
|
|
1492
1170
|
background-color: transparent;
|
|
1493
|
-
color: ${
|
|
1494
|
-
&:hover { background-color: ${
|
|
1171
|
+
color: ${r.COLORS["iron-grey"]};
|
|
1172
|
+
&:hover { background-color: ${r.COLORS.gray}; }
|
|
1495
1173
|
`}return`
|
|
1496
|
-
color: ${
|
|
1174
|
+
color: ${r.COLORS.white};
|
|
1497
1175
|
position: relative;
|
|
1498
1176
|
z-index: 1;
|
|
1499
|
-
`},
|
|
1177
|
+
`},An=i.styled.button`
|
|
1500
1178
|
position: relative;
|
|
1501
1179
|
display: inline-flex;
|
|
1502
1180
|
align-items: center;
|
|
@@ -1513,31 +1191,31 @@
|
|
|
1513
1191
|
transition:
|
|
1514
1192
|
background-color 0.15s ease,
|
|
1515
1193
|
color 0.15s ease;
|
|
1516
|
-
${({$variant:e,$active:
|
|
1194
|
+
${({$variant:e,$active:o})=>zn(e,o)}
|
|
1517
1195
|
${({$disabled:e})=>e&&`
|
|
1518
1196
|
opacity: 0.4;
|
|
1519
1197
|
pointer-events: none;
|
|
1520
1198
|
cursor: default;
|
|
1521
1199
|
`}
|
|
1522
|
-
`,
|
|
1200
|
+
`,Pn=i.styled.span`
|
|
1523
1201
|
position: absolute;
|
|
1524
1202
|
width: 36px;
|
|
1525
1203
|
height: 36px;
|
|
1526
1204
|
border-radius: 10px;
|
|
1527
|
-
background-color: ${
|
|
1205
|
+
background-color: ${r.COLORS.black};
|
|
1528
1206
|
z-index: 0;
|
|
1529
1207
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1530
1208
|
pointer-events: none;
|
|
1531
|
-
`,
|
|
1209
|
+
`,Bn=i.styled.span`
|
|
1532
1210
|
display: inline-flex;
|
|
1533
1211
|
align-items: center;
|
|
1534
1212
|
justify-content: center;
|
|
1535
1213
|
width: 36px;
|
|
1536
1214
|
height: 36px;
|
|
1537
1215
|
font-size: 14px;
|
|
1538
|
-
color: ${
|
|
1216
|
+
color: ${r.COLORS["iron-grey"]};
|
|
1539
1217
|
user-select: none;
|
|
1540
|
-
`,
|
|
1218
|
+
`,Ue=i.styled.button`
|
|
1541
1219
|
display: inline-flex;
|
|
1542
1220
|
align-items: center;
|
|
1543
1221
|
justify-content: center;
|
|
@@ -1546,14 +1224,14 @@
|
|
|
1546
1224
|
border: none;
|
|
1547
1225
|
border-radius: 10px;
|
|
1548
1226
|
background-color: transparent;
|
|
1549
|
-
color: ${
|
|
1227
|
+
color: ${r.COLORS["iron-grey"]};
|
|
1550
1228
|
font-size: 16px;
|
|
1551
1229
|
cursor: pointer;
|
|
1552
1230
|
user-select: none;
|
|
1553
1231
|
transition: background-color 0.15s ease;
|
|
1554
1232
|
|
|
1555
1233
|
&:hover {
|
|
1556
|
-
background-color: ${
|
|
1234
|
+
background-color: ${r.COLORS.gray};
|
|
1557
1235
|
}
|
|
1558
1236
|
|
|
1559
1237
|
${({$disabled:e})=>e&&`
|
|
@@ -1561,81 +1239,81 @@
|
|
|
1561
1239
|
pointer-events: none;
|
|
1562
1240
|
cursor: default;
|
|
1563
1241
|
`}
|
|
1564
|
-
`,
|
|
1242
|
+
`,V=C.newClassNameGetter("pagination"),Dn=({boundaries:e=1,className:o,classnames:t,disabled:l=!1,initialPage:s=1,loop:d=!1,onChange:x,page:c,ref:p,showControls:g=!1,siblings:f=1,total:h,variant:y="flat",...u})=>{const S=c!==void 0,[b,$]=a.useState(s),w=S?c:b,R=a.useRef(new Map),k=a.useRef(null),N=a.useRef(null),I=In(h,w,f,e),L=a.useCallback(O=>{S||$(O),x==null||x(O)},[S,x]),m=a.useCallback(O=>{O<1||O>h||O===w||L(O)},[w,L,h]),v=a.useCallback(()=>{if(w<=1){d&&L(h);return}L(w-1)},[w,d,L,h]),j=a.useCallback(()=>{if(w>=h){d&&L(1);return}L(w+1)},[w,d,L,h]);return a.useEffect(()=>{const O=N.current,T=k.current,E=R.current.get(w);if(!O||!T||!E)return;const A=T.getBoundingClientRect(),P=E.getBoundingClientRect().left-A.left;O.style.transform=`translateX(${P}px)`},[w,I]),n.jsxs(Tn,{...u,ref:p||k,className:V("container",o),children:[n.jsx(Pn,{ref:N,className:V("cursor",t==null?void 0:t.cursor)}),g&&n.jsx(Ue,{className:V("controls",t==null?void 0:t.controls),$disabled:l||!d&&w<=1,onClick:v,"aria-label":"Previous page",children:n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:n.jsx("path",{d:"m15 18-6-6 6-6"})})}),I.map((O,T)=>O==="dots"?n.jsx(Bn,{className:V("ellipsis",t==null?void 0:t.ellipsis),children:"..."},`dots-${T}`):n.jsx(An,{ref:E=>{E?R.current.set(O,E):R.current.delete(O)},className:V("item",t==null?void 0:t.item),$active:O===w,$variant:y,$disabled:l,onClick:()=>m(O),"aria-label":`Page ${O}`,"aria-current":O===w?"page":void 0,children:O},O)),g&&n.jsx(Ue,{className:V("controls",t==null?void 0:t.controls),$disabled:l||!d&&w>=h,onClick:j,"aria-label":"Next page",children:n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:n.jsx("path",{d:"m9 18 6-6-6-6"})})})]})},We={light:{background:r.COLORS.white,border:r.alpha(r.COLORS.black,30),title:r.COLORS.black,description:r.COLORS["iron-grey"]},dark:{background:r.alpha(r.COLORS.white,5),border:r.alpha(r.COLORS.white,30),title:r.COLORS.white,description:"#9ca3af"}},be=e=>We[e]??We.light,Mn=i.styled.div`
|
|
1565
1243
|
position: relative;
|
|
1566
1244
|
display: flex;
|
|
1567
1245
|
flex-direction: column;
|
|
1568
1246
|
gap: 16px;
|
|
1569
1247
|
padding: 12px;
|
|
1570
|
-
border: 1px dashed ${({$variant:e})=>
|
|
1248
|
+
border: 1px dashed ${({$variant:e})=>be(e).border};
|
|
1571
1249
|
border-radius: 16px;
|
|
1572
|
-
background-color: ${({$variant:e})=>
|
|
1250
|
+
background-color: ${({$variant:e})=>be(e).background};
|
|
1573
1251
|
box-shadow:
|
|
1574
1252
|
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
1575
1253
|
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
1576
|
-
`,
|
|
1254
|
+
`,_n=i.styled.div`
|
|
1577
1255
|
position: absolute;
|
|
1578
1256
|
top: -1px;
|
|
1579
1257
|
right: 12px;
|
|
1580
1258
|
padding: 4px 12px;
|
|
1581
1259
|
border-radius: 0 0 8px 8px;
|
|
1582
|
-
background-color: ${
|
|
1583
|
-
color: ${
|
|
1260
|
+
background-color: ${r.COLORS.black};
|
|
1261
|
+
color: ${r.COLORS.white};
|
|
1584
1262
|
font-size: 11px;
|
|
1585
1263
|
font-weight: 600;
|
|
1586
1264
|
letter-spacing: 0.5px;
|
|
1587
1265
|
text-transform: uppercase;
|
|
1588
1266
|
line-height: 1.4;
|
|
1589
|
-
`,
|
|
1267
|
+
`,Fn=i.styled.div`
|
|
1590
1268
|
display: flex;
|
|
1591
1269
|
flex-direction: column;
|
|
1592
1270
|
gap: 4px;
|
|
1593
|
-
`,
|
|
1271
|
+
`,Gn=i.styled.div`
|
|
1594
1272
|
font-size: 18px;
|
|
1595
1273
|
font-weight: 600;
|
|
1596
1274
|
line-height: 1.4;
|
|
1597
|
-
color: ${({$variant:e})=>
|
|
1598
|
-
`,
|
|
1275
|
+
color: ${({$variant:e})=>be(e).title};
|
|
1276
|
+
`,Hn=i.styled.div`
|
|
1599
1277
|
font-size: 14px;
|
|
1600
1278
|
line-height: 1.5;
|
|
1601
|
-
color: ${({$variant:e})=>
|
|
1602
|
-
`,
|
|
1279
|
+
color: ${({$variant:e})=>be(e).description};
|
|
1280
|
+
`,Un=i.styled.div`
|
|
1603
1281
|
display: flex;
|
|
1604
1282
|
flex-wrap: wrap;
|
|
1605
1283
|
gap: 8px;
|
|
1606
|
-
`,
|
|
1284
|
+
`,re=C.newClassNameGetter("panel"),Wn=({children:e,className:o,classnames:t,description:l,label:s,ref:d,title:x,variant:c="light",...p})=>{const g=x||l;return n.jsxs(Mn,{...p,ref:d,className:re("container",o),$variant:c,children:[s&&n.jsx(_n,{className:re("label",t==null?void 0:t.label),children:s}),g&&n.jsxs(Fn,{children:[x&&n.jsx(Gn,{className:re("title",t==null?void 0:t.title),$variant:c,children:x}),l&&n.jsx(Hn,{className:re("description",t==null?void 0:t.description),$variant:c,children:l})]}),n.jsx(Un,{className:re("content",t==null?void 0:t.content),children:e})]})},Xn=["Готовим стартовый стол к запуску","Прогреваем фотонные двигатели","Запрашиваем разрешение у ЦУПа","Проверяем герметичность шлюзов","Выводим реактор на рабочую мощность","Ожидаем окно для маневра","Проверяем целостность теплозащиты","Разворачиваем солнечные паруса","Активируем систему навигации","Инициализируем бортовой компьютер","Рассчитываем вектор ускорения","Продуваем топливные магистрали","Тестируем аварийную систему спасения","Стабилизируем гироскопы на платформе","Загружаем полетное задание в память","Синхронизируем орбитальные часы","Рассчитываем траекторию кометы","Настраиваем антенну дальней связи","Считываем телеметрию со спутника","Корректируем азимут наведения","Фиксируем координаты черной дыры","Загружаем карту звездного неба","Калибруем инерциальную платформу","Принимаем эфемериды от станции","Уточняем параметры орбиты","Привязываемся к опорным звездам","Строим модель гравитационного поля","Анализируем метрики далеких звезд","Ждем прохождения первого нейтрино","Декодируем сигналы из туманности","Замеряем гравитационные волны","Отправляем зонд в пояс астероидов","Перехватываем межзвездные частицы","Обрабатываем данные телескопа","Анализируем спектр далекой звезды","Собираем пробы лунного грунта","Сканируем поверхность экзопланеты","Измеряем реликтовое излучение","Картографируем магнитные аномалии","Исследуем состав колец Сатурна","Регистрируем вспышку сверхновой","Фиксируем рентгеновский пульсар","Моделируем столкновение галактик","Наблюдаем транзит далекой планеты","Калибруем квантовый компилятор","Переводим данные в гиперпространство","Синтезируем топливо из вакуума","Компилируем нейронную матрицу","Оптимизируем квантовые вентили","Разматываем кубиты суперпозиции","Интерполируем пространство решений","Нормализуем тензорное поле","Индексируем базу знаний вселенной","Дефрагментируем пространство-время","Хешируем координаты червоточины","Верифицируем квантовую запутанность","Устанавливаем связь с Вояджером","Расшифровываем послание с Проксимы","Ретранслируем сигнал через Юпитер","Пингуем ближайший ретранслятор","Буферизуем поток тахионных данных","Шифруем канал субпространственной связи","Декомпрессируем архив звездных карт","Проверяем давление в отсеках","Балансируем нагрузку на генераторы","Охлаждаем сверхпроводящие магниты","Калибруем датчики внешней среды","Перезагружаем модуль жизнеобеспечения","Тестируем маневровые двигатели","Обновляем прошивку скафандров","Юстируем зеркала главного телескопа","Переключаем контур охлаждения","Диагностируем плазменный щит","Затягиваем болты на обшивке"],Yn=3500,Kn=e=>e&&e.length>0?e:Xn,qn=e=>e&&e>0?e:Yn,Vn=e=>Math.max(...e.map(o=>o.length)),Zn=(e,o)=>{const t=Math.floor((o-e.length)/2);return e.padStart(e.length+t).padEnd(o)},Xe=(e,o)=>{const t=Array.from({length:e},(l,s)=>s);for(let l=t.length-1;l>0;l--){const s=Math.floor(Math.random()*(l+1));[t[l],t[s]]=[t[s],t[l]]}if(o!==void 0&&t[0]===o){const l=1+Math.floor(Math.random()*(t.length-1));[t[0],t[l]]=[t[l],t[0]]}return t},Qn=z.keyframes`
|
|
1607
1285
|
from { transform: rotate(0deg) translateX(20px) rotate(0deg); }
|
|
1608
1286
|
to { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
|
|
1609
|
-
`,
|
|
1287
|
+
`,Jn=z.keyframes`
|
|
1610
1288
|
from { transform: rotate(120deg) translateX(14px) rotate(-120deg); }
|
|
1611
1289
|
to { transform: rotate(480deg) translateX(14px) rotate(-480deg); }
|
|
1612
|
-
`,
|
|
1290
|
+
`,ei=z.keyframes`
|
|
1613
1291
|
from { transform: rotate(240deg) translateX(26px) rotate(-240deg); }
|
|
1614
1292
|
to { transform: rotate(600deg) translateX(26px) rotate(-600deg); }
|
|
1615
|
-
`,
|
|
1293
|
+
`,ti=i.styled.div`
|
|
1616
1294
|
display: flex;
|
|
1617
1295
|
flex-direction: column;
|
|
1618
1296
|
align-items: center;
|
|
1619
1297
|
justify-content: center;
|
|
1620
1298
|
padding: 48px 24px;
|
|
1621
1299
|
gap: 28px;
|
|
1622
|
-
`,
|
|
1300
|
+
`,oi=i.styled.div`
|
|
1623
1301
|
position: relative;
|
|
1624
1302
|
width: 64px;
|
|
1625
1303
|
height: 64px;
|
|
1626
1304
|
display: flex;
|
|
1627
1305
|
align-items: center;
|
|
1628
1306
|
justify-content: center;
|
|
1629
|
-
`,
|
|
1307
|
+
`,we=i.styled.div`
|
|
1630
1308
|
position: absolute;
|
|
1631
1309
|
width: ${e=>e.$index===0?6:e.$index===1?4:3}px;
|
|
1632
1310
|
height: ${e=>e.$index===0?6:e.$index===1?4:3}px;
|
|
1633
1311
|
border-radius: 50%;
|
|
1634
|
-
background: ${
|
|
1312
|
+
background: ${r.COLORS.black};
|
|
1635
1313
|
opacity: ${e=>e.$index===0?1:e.$index===1?.6:.35};
|
|
1636
|
-
animation: ${e=>e.$index===0?
|
|
1314
|
+
animation: ${e=>e.$index===0?Qn:e.$index===1?Jn:ei}
|
|
1637
1315
|
${e=>e.$index===0?3:e.$index===1?2:4.5}s linear infinite;
|
|
1638
|
-
`,
|
|
1316
|
+
`,ri=i.styled.span`
|
|
1639
1317
|
position: absolute;
|
|
1640
1318
|
width: 1px;
|
|
1641
1319
|
height: 1px;
|
|
@@ -1645,14 +1323,14 @@
|
|
|
1645
1323
|
clip: rect(0, 0, 0, 0);
|
|
1646
1324
|
white-space: nowrap;
|
|
1647
1325
|
border: 0;
|
|
1648
|
-
`,
|
|
1326
|
+
`,ni=i.styled.p`
|
|
1649
1327
|
margin: 0;
|
|
1650
1328
|
font-size: 14px;
|
|
1651
|
-
color: ${
|
|
1329
|
+
color: ${r.COLORS["iron-grey"]};
|
|
1652
1330
|
line-height: 1.5;
|
|
1653
1331
|
text-align: center;
|
|
1654
1332
|
max-width: 360px;
|
|
1655
|
-
`,
|
|
1333
|
+
`,ii=40,li=200,di=30,Ye="АБВГДЕЖЗИКЛМНОПРСТУФХЦЧШЩЭЮЯабвгдежзиклмнопрстуфхцчшщэюяABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",si=()=>Ye[Math.floor(Math.random()*Ye.length)],ai=e=>li+e*di,ci=()=>ii,pi=i.styled.div`
|
|
1656
1334
|
display: flex;
|
|
1657
1335
|
justify-content: center;
|
|
1658
1336
|
white-space: pre;
|
|
@@ -1660,25 +1338,25 @@
|
|
|
1660
1338
|
font-size: 18px;
|
|
1661
1339
|
font-weight: 500;
|
|
1662
1340
|
line-height: 1.6;
|
|
1663
|
-
color: ${
|
|
1341
|
+
color: ${r.COLORS.black};
|
|
1664
1342
|
min-height: 1.6em;
|
|
1665
|
-
`,
|
|
1343
|
+
`,xi=i.styled.span`
|
|
1666
1344
|
display: inline-block;
|
|
1667
1345
|
width: 0.65em;
|
|
1668
1346
|
text-align: center;
|
|
1669
|
-
`,
|
|
1347
|
+
`,ui=C.newClassNameGetter("split-flap-text"),at=({className:e,ref:o,text:t,...l})=>{const[s,d]=a.useState(()=>t.split("")),x=a.useRef(t),c=a.useRef([]),p=a.useRef(null),g=a.useRef([]),f=a.useRef(t.split("")),h=a.useCallback(()=>{p.current&&(clearInterval(p.current),p.current=null);for(const u of g.current)clearTimeout(u);g.current=[]},[]),y=a.useCallback(u=>{h(),f.current=u,c.current=u.map(S=>S===" "),p.current=setInterval(()=>{d(S=>S.map((b,$)=>c.current[$]?f.current[$]:si()))},ci()),g.current=u.map((S,b)=>setTimeout(()=>{c.current[b]=!0,c.current.every(Boolean)&&(p.current&&(clearInterval(p.current),p.current=null),d([...f.current]))},ai(b)))},[h]);return a.useEffect(()=>{t!==x.current&&(x.current=t,y(t.split("")))},[t,y]),a.useEffect(()=>h,[h]),n.jsx(pi,{...l,ref:o,className:ui("container",e),"aria-hidden":"true",children:s.map((u,S)=>n.jsx(xi,{children:u===" "?" ":u},S))})},fe=C.newClassNameGetter("pending-screen"),gi=({className:e,classnames:o,description:t,interval:l,phrases:s,ref:d,...x})=>{const c=a.useMemo(()=>Kn(s),[s]),p=a.useMemo(()=>qn(l),[l]),g=a.useMemo(()=>Vn(c),[c]),f=a.useRef([]),h=a.useRef(0),y=a.useCallback(k=>(h.current>=f.current.length&&(f.current=Xe(c.length,k),h.current=0),f.current[h.current++]),[c.length]),[u,S]=a.useState(()=>{f.current=Xe(c.length);const k=f.current[0];return h.current=1,k}),b=a.useRef(null),$=a.useCallback(()=>{S(k=>y(k))},[y]);a.useEffect(()=>(b.current=setInterval($,p),()=>{b.current&&clearInterval(b.current)}),[$,p]);const w=c[u],R=Zn(w,g);return n.jsxs(ti,{...x,ref:d,className:fe("container",e),role:"status",children:[n.jsxs(oi,{className:fe("indicator",o==null?void 0:o.indicator),children:[n.jsx(we,{$index:0}),n.jsx(we,{$index:1}),n.jsx(we,{$index:2})]}),n.jsx(at,{text:R,className:fe("board",o==null?void 0:o.board)}),n.jsx(ri,{children:w}),t&&n.jsx(ni,{className:fe("description",o==null?void 0:o.description),children:t})]})},je={compact:{height:4,radius:2},default:{height:8,radius:4}},fi=i.styled.div`
|
|
1670
1348
|
width: 100%;
|
|
1671
|
-
height: ${({$size:e})=>
|
|
1672
|
-
border-radius: ${({$size:e})=>
|
|
1673
|
-
background-color: ${
|
|
1349
|
+
height: ${({$size:e})=>je[e].height}px;
|
|
1350
|
+
border-radius: ${({$size:e})=>je[e].radius}px;
|
|
1351
|
+
background-color: ${r.COLORS.gray};
|
|
1674
1352
|
overflow: hidden;
|
|
1675
|
-
`,
|
|
1353
|
+
`,hi=i.styled.div`
|
|
1676
1354
|
height: 100%;
|
|
1677
1355
|
width: ${({$value:e})=>Math.min(100,Math.max(0,e))}%;
|
|
1678
|
-
border-radius: ${({$size:e})=>
|
|
1679
|
-
background-color: ${
|
|
1356
|
+
border-radius: ${({$size:e})=>je[e].radius}px;
|
|
1357
|
+
background-color: ${r.COLORS.black};
|
|
1680
1358
|
transition: width 0.2s ease;
|
|
1681
|
-
`,
|
|
1359
|
+
`,Ke=C.newClassNameGetter("progress"),yi=({value:e,size:o="default",className:t,classnames:l,ref:s,...d})=>n.jsx(fi,{...d,ref:s,$size:o,className:Ke("track",t,l==null?void 0:l.track),role:"progressbar","aria-valuenow":e,"aria-valuemin":0,"aria-valuemax":100,children:n.jsx(hi,{$size:o,$value:e,className:Ke("bar",l==null?void 0:l.bar)})}),ct=a.createContext(null),bi=i.styled.div`
|
|
1682
1360
|
position: fixed;
|
|
1683
1361
|
bottom: 24px;
|
|
1684
1362
|
right: 24px;
|
|
@@ -1687,156 +1365,156 @@
|
|
|
1687
1365
|
align-items: center;
|
|
1688
1366
|
gap: 10px;
|
|
1689
1367
|
padding: 10px 16px;
|
|
1690
|
-
background-color: ${
|
|
1368
|
+
background-color: ${r.alpha(r.COLORS["iron-grey"],10)};
|
|
1691
1369
|
backdrop-filter: blur(8px);
|
|
1692
1370
|
border-radius: 24px;
|
|
1693
|
-
animation: ${
|
|
1371
|
+
animation: ${r.KEYFRAMES.fadeIn} 0.2s ease-out;
|
|
1694
1372
|
pointer-events: none;
|
|
1695
|
-
color: ${
|
|
1696
|
-
|
|
1373
|
+
color: ${r.COLORS.black};
|
|
1374
|
+
`,$i=i.styled.span`
|
|
1697
1375
|
font-size: 14px;
|
|
1698
1376
|
font-weight: 500;
|
|
1699
1377
|
white-space: nowrap;
|
|
1700
|
-
`,
|
|
1378
|
+
`,Si=({children:e,defaultMessage:o="Saving"})=>{const[t,l]=a.useState(!1),[s,d]=a.useState(o),x=a.useCallback(g=>{d(g??o),l(!0)},[o]),c=a.useCallback(()=>{l(!1)},[]),p=a.useMemo(()=>({isVisible:t,show:x,hide:c}),[t,x,c]);return n.jsxs(ct.Provider,{value:p,children:[e,t&&n.jsxs(bi,{children:[n.jsx(i.Spinner,{size:"sm"}),n.jsx($i,{children:s})]})]})},Oi=()=>{const e=a.useContext(ct);if(!e)throw new Error("useSaveProgress must be used within SaveProgressProvider");return e},Ci=z.keyframes`
|
|
1701
1379
|
0% { opacity: 1; }
|
|
1702
1380
|
50% { opacity: 0.4; }
|
|
1703
1381
|
100% { opacity: 1; }
|
|
1704
|
-
`,
|
|
1382
|
+
`,wi=z.keyframes`
|
|
1705
1383
|
0% { transform: translateX(-100%); }
|
|
1706
1384
|
60% { transform: translateX(100%); }
|
|
1707
1385
|
100% { transform: translateX(100%); }
|
|
1708
|
-
`,
|
|
1709
|
-
animation: ${
|
|
1710
|
-
`,
|
|
1386
|
+
`,vi=z.css`
|
|
1387
|
+
animation: ${Ci} 1.5s ease-in-out infinite;
|
|
1388
|
+
`,mi=z.css`
|
|
1711
1389
|
&::after {
|
|
1712
1390
|
content: '';
|
|
1713
1391
|
position: absolute;
|
|
1714
1392
|
inset: 0;
|
|
1715
1393
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
|
|
1716
|
-
animation: ${
|
|
1394
|
+
animation: ${wi} 1.6s linear infinite;
|
|
1717
1395
|
}
|
|
1718
|
-
`,
|
|
1396
|
+
`,ki={pulse:vi,wave:mi,none:null},Ri={none:"0",sm:"4px",md:"8px",lg:"12px",full:"9999px"},ve=e=>typeof e=="number"?`${e}px`:e,Li=i.styled.div`
|
|
1719
1397
|
position: relative;
|
|
1720
1398
|
overflow: hidden;
|
|
1721
1399
|
background-color: #e5e7eb;
|
|
1722
|
-
width: ${({$width:e,$circle:
|
|
1723
|
-
height: ${({$height:e})=>
|
|
1724
|
-
border-radius: ${({$circle:e,$radius:
|
|
1725
|
-
${({$animation:e})=>
|
|
1726
|
-
`,
|
|
1400
|
+
width: ${({$width:e,$circle:o,$height:t})=>ve(o?t:e)};
|
|
1401
|
+
height: ${({$height:e})=>ve(e)};
|
|
1402
|
+
border-radius: ${({$circle:e,$radius:o})=>e?"50%":Ri[o]};
|
|
1403
|
+
${({$animation:e})=>ki[e]}
|
|
1404
|
+
`,ji=C.newClassNameGetter("skeleton"),Ni=({animation:e="pulse",circle:o=!1,className:t,height:l=16,radius:s="md",ref:d,width:x="100%",...c})=>n.jsx(Li,{...c,ref:d,className:ji("container",t),$animation:e,$circle:o,$height:l,$radius:s,$width:x}),Ei=i.styled.span`
|
|
1727
1405
|
display: inline-flex;
|
|
1728
1406
|
align-items: baseline;
|
|
1729
1407
|
gap: 4px;
|
|
1730
1408
|
font-size: 13px;
|
|
1731
1409
|
color: #666;
|
|
1732
|
-
`,
|
|
1410
|
+
`,Ii=i.styled.strong`
|
|
1733
1411
|
font-weight: 700;
|
|
1734
|
-
color: ${
|
|
1735
|
-
`,
|
|
1412
|
+
color: ${r.COLORS.black};
|
|
1413
|
+
`,Ti=i.styled.span``,me=C.newClassNameGetter("stat"),zi=({className:e,classnames:o,label:t,ref:l,value:s,...d})=>n.jsxs(Ei,{...d,ref:l,className:me("container",e),children:[n.jsx(Ii,{className:me("value",o==null?void 0:o.value),children:s}),n.jsx(Ti,{className:me("label",o==null?void 0:o.label),children:t})]}),Ai=i.styled.div`
|
|
1736
1414
|
display: flex;
|
|
1737
1415
|
flex-direction: column;
|
|
1738
|
-
border: 1px solid ${
|
|
1416
|
+
border: 1px solid ${r.COLORS.gray};
|
|
1739
1417
|
border-radius: 8px;
|
|
1740
1418
|
overflow: hidden;
|
|
1741
|
-
`,
|
|
1419
|
+
`,Pi=i.styled.div`
|
|
1742
1420
|
&:not(:last-child) {
|
|
1743
|
-
border-bottom: 1px solid ${
|
|
1421
|
+
border-bottom: 1px solid ${r.COLORS.gray};
|
|
1744
1422
|
}
|
|
1745
|
-
`,
|
|
1423
|
+
`,Bi=i.styled.button`
|
|
1746
1424
|
display: flex;
|
|
1747
1425
|
align-items: center;
|
|
1748
1426
|
gap: 8px;
|
|
1749
1427
|
width: 100%;
|
|
1750
1428
|
padding: 10px 16px;
|
|
1751
|
-
background-color: ${({$expanded:e})=>e?
|
|
1429
|
+
background-color: ${({$expanded:e})=>e?r.alpha(r.COLORS.black,3):"transparent"};
|
|
1752
1430
|
border: none;
|
|
1753
1431
|
cursor: ${({$interactive:e})=>e?"pointer":"default"};
|
|
1754
1432
|
font-size: 14px;
|
|
1755
1433
|
font-weight: 500;
|
|
1756
|
-
color: ${
|
|
1434
|
+
color: ${r.COLORS.black};
|
|
1757
1435
|
text-align: left;
|
|
1758
1436
|
outline: none;
|
|
1759
1437
|
transition: background-color 0.15s ease;
|
|
1760
1438
|
|
|
1761
1439
|
&:hover {
|
|
1762
|
-
background-color: ${({$interactive:e})=>e?
|
|
1440
|
+
background-color: ${({$interactive:e})=>e?r.alpha(r.COLORS.black,3):"transparent"};
|
|
1763
1441
|
}
|
|
1764
|
-
`,
|
|
1442
|
+
`,Di=i.styled.span`
|
|
1765
1443
|
display: flex;
|
|
1766
1444
|
align-items: center;
|
|
1767
1445
|
justify-content: center;
|
|
1768
1446
|
width: 16px;
|
|
1769
1447
|
height: 16px;
|
|
1770
1448
|
flex-shrink: 0;
|
|
1771
|
-
color: ${
|
|
1449
|
+
color: ${r.COLORS["iron-grey"]};
|
|
1772
1450
|
transition: transform 0.15s ease;
|
|
1773
1451
|
transform: rotate(${({$expanded:e})=>e?"90deg":"0deg"});
|
|
1774
|
-
`,
|
|
1452
|
+
`,Mi=i.styled.span`
|
|
1775
1453
|
width: 16px;
|
|
1776
1454
|
height: 16px;
|
|
1777
1455
|
flex-shrink: 0;
|
|
1778
|
-
`,
|
|
1456
|
+
`,_i={success:r.COLORS.green,error:r.COLORS.red,running:r.COLORS["steel-blue"],pending:r.COLORS.gray},Fi=z.keyframes`
|
|
1779
1457
|
from { transform: rotate(0deg); }
|
|
1780
1458
|
to { transform: rotate(360deg); }
|
|
1781
|
-
`,
|
|
1782
|
-
animation: ${
|
|
1783
|
-
`,
|
|
1459
|
+
`,Gi=z.css`
|
|
1460
|
+
animation: ${Fi} 1s linear infinite;
|
|
1461
|
+
`,Hi=i.styled.span`
|
|
1784
1462
|
display: flex;
|
|
1785
1463
|
align-items: center;
|
|
1786
1464
|
justify-content: center;
|
|
1787
1465
|
flex-shrink: 0;
|
|
1788
|
-
color: ${({$status:e})=>
|
|
1789
|
-
${({$status:e})=>e==="running"&&
|
|
1790
|
-
`,
|
|
1466
|
+
color: ${({$status:e})=>_i[e]};
|
|
1467
|
+
${({$status:e})=>e==="running"&&Gi}
|
|
1468
|
+
`,Ui=i.styled.span`
|
|
1791
1469
|
flex: 1;
|
|
1792
1470
|
min-width: 0;
|
|
1793
1471
|
overflow: hidden;
|
|
1794
1472
|
text-overflow: ellipsis;
|
|
1795
1473
|
white-space: nowrap;
|
|
1796
|
-
color: ${({$muted:e})=>e?
|
|
1797
|
-
`,
|
|
1474
|
+
color: ${({$muted:e})=>e?r.COLORS["iron-grey"]:r.COLORS.black};
|
|
1475
|
+
`,Wi=i.styled.span`
|
|
1798
1476
|
flex-shrink: 0;
|
|
1799
1477
|
font-size: 12px;
|
|
1800
1478
|
font-weight: 400;
|
|
1801
|
-
color: ${
|
|
1479
|
+
color: ${r.COLORS["iron-grey"]};
|
|
1802
1480
|
font-variant-numeric: tabular-nums;
|
|
1803
|
-
`,
|
|
1481
|
+
`,Xi=i.styled.div`
|
|
1804
1482
|
display: grid;
|
|
1805
1483
|
grid-template-rows: ${({$expanded:e})=>e?"1fr":"0fr"};
|
|
1806
1484
|
transition: grid-template-rows 0.15s ease;
|
|
1807
|
-
`,
|
|
1485
|
+
`,Yi=i.styled.div`
|
|
1808
1486
|
overflow: hidden;
|
|
1809
|
-
`,
|
|
1487
|
+
`,Ki=i.styled.div`
|
|
1810
1488
|
padding: 8px 0;
|
|
1811
|
-
background-color: ${
|
|
1812
|
-
border-top: 1px solid ${
|
|
1489
|
+
background-color: ${r.COLORS.white};
|
|
1490
|
+
border-top: 1px solid ${r.COLORS.gray};
|
|
1813
1491
|
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
1814
1492
|
font-size: 12px;
|
|
1815
1493
|
line-height: 20px;
|
|
1816
|
-
`,
|
|
1494
|
+
`,qi=i.styled.div`
|
|
1817
1495
|
display: flex;
|
|
1818
1496
|
padding: 0 16px;
|
|
1819
1497
|
|
|
1820
1498
|
&:hover {
|
|
1821
|
-
background-color: ${
|
|
1499
|
+
background-color: ${r.alpha(r.COLORS.black,3)};
|
|
1822
1500
|
}
|
|
1823
|
-
`,
|
|
1501
|
+
`,Vi=i.styled.span`
|
|
1824
1502
|
flex-shrink: 0;
|
|
1825
1503
|
width: 40px;
|
|
1826
1504
|
text-align: right;
|
|
1827
1505
|
padding-right: 16px;
|
|
1828
|
-
color: ${
|
|
1506
|
+
color: ${r.COLORS["iron-grey"]};
|
|
1829
1507
|
user-select: none;
|
|
1830
|
-
|
|
1508
|
+
`,Zi=i.styled.span`
|
|
1831
1509
|
flex: 1;
|
|
1832
1510
|
min-width: 0;
|
|
1833
1511
|
white-space: pre;
|
|
1834
|
-
color: ${
|
|
1835
|
-
`,
|
|
1512
|
+
color: ${r.COLORS.black};
|
|
1513
|
+
`,he=C.newClassNameGetter("step-log"),Qi={success:$e.CircleCheck,error:$e.CircleX,running:n.LoaderCircle,pending:$e.Circle},Ji=({className:e,classnames:o,defaultValue:t=[],onChange:l,ref:s,steps:d,value:x,...c})=>{const[p,g]=a.useState(t),f=x!==void 0,h=f?x:p,y=a.useCallback(u=>{const b=h.includes(u)?h.filter($=>$!==u):[...h,u];f||g(b),l==null||l(b)},[h,f,l]);return n.jsx(Ai,{...c,ref:s,className:he("container",e),children:d.map(u=>{const S=h.includes(u.value),b=u.status??"pending",$=b!=="pending",w=u.lines&&u.lines.length>0,R=Qi[b];return n.jsxs(Pi,{className:he("step",o==null?void 0:o.step),children:[n.jsxs(Bi,{type:"button",$expanded:S,$interactive:$,onClick:$?()=>y(u.value):void 0,className:he("header",o==null?void 0:o.header),children:[$?n.jsx(Di,{$expanded:S,children:n.jsx(n.ChevronRight,{size:14})}):n.jsx(Mi,{}),n.jsx(Hi,{$status:b,children:n.jsx(R,{size:16})}),n.jsx(Ui,{$muted:b==="pending",children:u.title}),u.duration&&n.jsx(Wi,{children:u.duration})]}),$&&w&&n.jsx(Xi,{$expanded:S,children:n.jsx(Yi,{children:n.jsx(Ki,{className:he("log",o==null?void 0:o.log),children:u.lines.map(k=>n.jsxs(qi,{children:[n.jsx(Vi,{children:k.line}),n.jsx(Zi,{children:k.text})]},k.line))})})})]},u.value)})})},el=i.styled.div`
|
|
1836
1514
|
display: flex;
|
|
1837
1515
|
align-items: ${e=>e.$orientation==="vertical"?"flex-start":"center"};
|
|
1838
1516
|
flex-direction: ${e=>e.$orientation==="vertical"?"column":"row"};
|
|
1839
|
-
`,
|
|
1517
|
+
`,tl=i.styled.div`
|
|
1840
1518
|
display: flex;
|
|
1841
1519
|
align-items: ${e=>e.$orientation==="vertical"?"flex-start":"center"};
|
|
1842
1520
|
flex-direction: ${e=>e.$orientation==="vertical"?"column":"row"};
|
|
@@ -1845,7 +1523,7 @@
|
|
|
1845
1523
|
&:last-child {
|
|
1846
1524
|
flex: 0;
|
|
1847
1525
|
}
|
|
1848
|
-
`,
|
|
1526
|
+
`,ol=i.styled.button`
|
|
1849
1527
|
display: flex;
|
|
1850
1528
|
align-items: center;
|
|
1851
1529
|
gap: 10px;
|
|
@@ -1854,7 +1532,7 @@
|
|
|
1854
1532
|
background: transparent;
|
|
1855
1533
|
cursor: ${e=>e.$clickable?"pointer":"default"};
|
|
1856
1534
|
flex-shrink: 0;
|
|
1857
|
-
`,
|
|
1535
|
+
`,rl=i.styled.div`
|
|
1858
1536
|
display: flex;
|
|
1859
1537
|
align-items: center;
|
|
1860
1538
|
justify-content: center;
|
|
@@ -1870,22 +1548,22 @@
|
|
|
1870
1548
|
color 0.2s ease;
|
|
1871
1549
|
|
|
1872
1550
|
${e=>e.$active||e.$completed?`
|
|
1873
|
-
background-color: ${
|
|
1874
|
-
border: 2px solid ${
|
|
1875
|
-
color: ${
|
|
1551
|
+
background-color: ${r.COLORS.black};
|
|
1552
|
+
border: 2px solid ${r.COLORS.black};
|
|
1553
|
+
color: ${r.COLORS.white};
|
|
1876
1554
|
`:`
|
|
1877
1555
|
background-color: transparent;
|
|
1878
|
-
border: 2px solid ${
|
|
1879
|
-
color: ${
|
|
1556
|
+
border: 2px solid ${r.COLORS.gray};
|
|
1557
|
+
color: ${r.COLORS["iron-grey"]};
|
|
1880
1558
|
`}
|
|
1881
|
-
`,
|
|
1559
|
+
`,nl=i.styled.span`
|
|
1882
1560
|
font-size: 14px;
|
|
1883
1561
|
font-weight: 500;
|
|
1884
1562
|
white-space: nowrap;
|
|
1885
|
-
color: ${e=>e.$active||e.$completed?
|
|
1563
|
+
color: ${e=>e.$active||e.$completed?r.COLORS.black:r.COLORS["iron-grey"]};
|
|
1886
1564
|
transition: color 0.2s ease;
|
|
1887
|
-
`,
|
|
1888
|
-
background-color: ${e=>e.$completed?
|
|
1565
|
+
`,il=i.styled.div`
|
|
1566
|
+
background-color: ${e=>e.$completed?r.COLORS.black:r.COLORS.gray};
|
|
1889
1567
|
transition: background-color 0.2s ease;
|
|
1890
1568
|
|
|
1891
1569
|
${e=>e.$orientation==="vertical"?`
|
|
@@ -1898,16 +1576,16 @@
|
|
|
1898
1576
|
min-width: 16px;
|
|
1899
1577
|
margin: 0 12px;
|
|
1900
1578
|
`}
|
|
1901
|
-
`,
|
|
1579
|
+
`,ne=C.newClassNameGetter("stepper"),ll=({className:e,classnames:o,onChange:t,orientation:l="horizontal",ref:s,steps:d,value:x,...c})=>{const p=a.useMemo(()=>d.findIndex(g=>g.value===x),[d,x]);return n.jsx(el,{...c,ref:s,$orientation:l,className:ne("container",e),children:d.map((g,f)=>{const h=g.value===x,y=f<p,u=f===d.length-1;return n.jsxs(tl,{$orientation:l,children:[n.jsxs(ol,{type:"button",$active:h,$completed:y,$clickable:!!t,onClick:()=>t==null?void 0:t(g.value),className:ne("step",o==null?void 0:o.step),children:[n.jsx(rl,{$active:h,$completed:y,className:ne("circle",o==null?void 0:o.circle),children:f+1}),n.jsx(nl,{$active:h,$completed:y,className:ne("label",o==null?void 0:o.label),children:g.label})]}),!u&&n.jsx(il,{$completed:y,$orientation:l,className:ne("line",o==null?void 0:o.line)})]},g.value)})})},dl=i.styled.div`
|
|
1902
1580
|
display: flex;
|
|
1903
1581
|
align-items: center;
|
|
1904
1582
|
gap: 6px;
|
|
1905
|
-
`,
|
|
1583
|
+
`,sl=i.styled.button`
|
|
1906
1584
|
padding: 6px 16px;
|
|
1907
1585
|
border: none;
|
|
1908
1586
|
border-radius: 12px;
|
|
1909
|
-
background-color: ${e=>e.$active?
|
|
1910
|
-
color: ${
|
|
1587
|
+
background-color: ${e=>e.$active?r.COLORS.gray:"transparent"};
|
|
1588
|
+
color: ${r.COLORS.black};
|
|
1911
1589
|
font-size: 14px;
|
|
1912
1590
|
font-weight: 500;
|
|
1913
1591
|
line-height: 1.4;
|
|
@@ -1918,62 +1596,62 @@
|
|
|
1918
1596
|
opacity 0.15s ease;
|
|
1919
1597
|
|
|
1920
1598
|
&:hover:not(:disabled) {
|
|
1921
|
-
background-color: ${e=>e.$active?
|
|
1599
|
+
background-color: ${e=>e.$active?r.COLORS.gray:"rgba(0, 0, 0, 0.05)"};
|
|
1922
1600
|
}
|
|
1923
|
-
`,
|
|
1601
|
+
`,qe=C.newClassNameGetter("tabs"),al=({className:e,classnames:o,onChange:t,ref:l,tabs:s,value:d,...x})=>n.jsx(dl,{...x,ref:l,className:qe("container",e),role:"tablist",children:s.map(c=>n.jsx(sl,{type:"button",role:"tab","aria-selected":d===c.value,$active:d===c.value,$disabled:!!c.disabled,disabled:c.disabled,onClick:()=>t(c.value),className:qe("tab",o==null?void 0:o.tab),children:c.label},c.value))}),cl=i.styled.div`
|
|
1924
1602
|
display: flex;
|
|
1925
1603
|
flex-direction: column;
|
|
1926
|
-
`,
|
|
1604
|
+
`,pl=i.styled.div`
|
|
1927
1605
|
display: grid;
|
|
1928
1606
|
grid-template-columns: 20px 1fr;
|
|
1929
1607
|
gap: 0 12px;
|
|
1930
|
-
`,
|
|
1608
|
+
`,xl=i.styled.div`
|
|
1931
1609
|
display: flex;
|
|
1932
1610
|
flex-direction: column;
|
|
1933
1611
|
align-items: center;
|
|
1934
1612
|
grid-row: 1 / -1;
|
|
1935
|
-
`,
|
|
1613
|
+
`,ul=i.styled.div`
|
|
1936
1614
|
width: 10px;
|
|
1937
1615
|
height: 10px;
|
|
1938
1616
|
border-radius: 50%;
|
|
1939
|
-
background-color: ${
|
|
1617
|
+
background-color: ${r.COLORS.black};
|
|
1940
1618
|
flex-shrink: 0;
|
|
1941
1619
|
margin-top: 5px;
|
|
1942
|
-
`,
|
|
1620
|
+
`,gl=i.styled.div`
|
|
1943
1621
|
width: 2px;
|
|
1944
1622
|
flex: 1;
|
|
1945
|
-
background-color: ${
|
|
1623
|
+
background-color: ${r.COLORS.gray};
|
|
1946
1624
|
visibility: ${e=>e.$last?"hidden":"visible"};
|
|
1947
|
-
`,
|
|
1625
|
+
`,fl=i.styled.div`
|
|
1948
1626
|
padding-bottom: ${e=>e.$last?"0":"24px"};
|
|
1949
1627
|
min-width: 0;
|
|
1950
|
-
`,
|
|
1628
|
+
`,hl=i.styled.div`
|
|
1951
1629
|
display: flex;
|
|
1952
1630
|
align-items: flex-start;
|
|
1953
1631
|
justify-content: space-between;
|
|
1954
1632
|
gap: 8px;
|
|
1955
|
-
`,
|
|
1633
|
+
`,yl=i.styled.div`
|
|
1956
1634
|
font-size: 15px;
|
|
1957
1635
|
font-weight: 600;
|
|
1958
|
-
color: ${
|
|
1636
|
+
color: ${r.COLORS.black};
|
|
1959
1637
|
line-height: 20px;
|
|
1960
1638
|
min-width: 0;
|
|
1961
|
-
`,
|
|
1639
|
+
`,bl=i.styled.div`
|
|
1962
1640
|
display: flex;
|
|
1963
1641
|
align-items: center;
|
|
1964
1642
|
gap: 4px;
|
|
1965
1643
|
flex-shrink: 0;
|
|
1966
|
-
|
|
1644
|
+
`,$l=i.styled.div`
|
|
1967
1645
|
font-size: 13px;
|
|
1968
|
-
color: ${
|
|
1646
|
+
color: ${r.COLORS["iron-grey"]};
|
|
1969
1647
|
margin-top: 2px;
|
|
1970
1648
|
line-height: 1.4;
|
|
1971
|
-
`,
|
|
1649
|
+
`,Sl=i.styled.div`
|
|
1972
1650
|
font-size: 14px;
|
|
1973
|
-
color: ${
|
|
1651
|
+
color: ${r.COLORS["iron-grey"]};
|
|
1974
1652
|
margin-top: 8px;
|
|
1975
1653
|
line-height: 1.5;
|
|
1976
|
-
`,
|
|
1654
|
+
`,_=C.newClassNameGetter("timeline"),Ol=({className:e,classnames:o,items:t,ref:l,...s})=>n.jsx(cl,{...s,ref:l,className:_("container",e),children:t.map((d,x)=>{const c=x===t.length-1;return n.jsxs(pl,{className:_("item",o==null?void 0:o.item),children:[n.jsxs(xl,{$last:c,children:[n.jsx(ul,{className:_("dot",o==null?void 0:o.dot)}),n.jsx(gl,{className:_("line",o==null?void 0:o.line),$last:c})]}),n.jsxs(fl,{className:_("content",o==null?void 0:o.content),$last:c,children:[n.jsxs(hl,{children:[n.jsxs("div",{children:[n.jsx(yl,{className:_("title",o==null?void 0:o.title),children:d.title}),d.description&&n.jsx($l,{className:_("description",o==null?void 0:o.description),children:d.description})]}),d.actions&&n.jsx(bl,{className:_("actions",o==null?void 0:o.actions),children:d.actions})]}),d.content&&n.jsx(Sl,{className:_("body",o==null?void 0:o.body),children:d.content})]})]},x)})}),pt=a.createContext(null),ke=3,Ve={default:{background:"#374151",text:r.COLORS.white,border:"#374151"},success:{background:r.COLORS.green,text:r.COLORS.white,border:r.COLORS.green},warning:{background:r.COLORS.yellow,text:r.COLORS.white,border:r.COLORS.yellow},danger:{background:r.COLORS.red,text:r.COLORS.white,border:r.COLORS.red}},Cl=(e,o)=>{switch(o.type){case"ADD_TOAST":{const t=o.payload;return e.toasts.length<ke?{...e,toasts:[...e.toasts,t]}:{...e,queue:[...e.queue,t]}}case"REMOVE_TOAST":{const t=o.payload,l=e.toasts.filter(d=>d.id!==t),s=e.queue[0];return s&&l.length<ke?{toasts:[...l,s],queue:e.queue.slice(1)}:{...e,toasts:l}}case"SHOW_NEXT_FROM_QUEUE":{const t=e.queue[0];return!t||e.toasts.length>=ke?e:{toasts:[...e.toasts,t],queue:e.queue.slice(1)}}default:return e}},wl={toasts:[],queue:[]},Re=e=>Ve[e]??Ve.default,vl=i.styled.div`
|
|
1977
1655
|
position: fixed;
|
|
1978
1656
|
bottom: 24px;
|
|
1979
1657
|
left: 24px;
|
|
@@ -1984,30 +1662,30 @@
|
|
|
1984
1662
|
pointer-events: none;
|
|
1985
1663
|
width: auto;
|
|
1986
1664
|
max-width: 90vw;
|
|
1987
|
-
`,
|
|
1665
|
+
`,ml=i.styled.div`
|
|
1988
1666
|
display: flex;
|
|
1989
1667
|
align-items: center;
|
|
1990
1668
|
justify-content: space-between;
|
|
1991
1669
|
gap: 12px;
|
|
1992
1670
|
min-height: 32px;
|
|
1993
1671
|
padding: 8px 8px 8px 16px;
|
|
1994
|
-
background-color: ${({$variant:e})=>
|
|
1995
|
-
color: ${({$variant:e})=>
|
|
1996
|
-
border: 1px solid ${({$variant:e})=>
|
|
1672
|
+
background-color: ${({$variant:e})=>Re(e).background};
|
|
1673
|
+
color: ${({$variant:e})=>Re(e).text};
|
|
1674
|
+
border: 1px solid ${({$variant:e})=>Re(e).border};
|
|
1997
1675
|
border-radius: 96px;
|
|
1998
1676
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
1999
|
-
animation: ${({$isExiting:e})=>e?
|
|
1677
|
+
animation: ${({$isExiting:e})=>e?r.KEYFRAMES.slideOutBottomFade:r.KEYFRAMES.slideInBottomFade}
|
|
2000
1678
|
0.3s ease-out;
|
|
2001
1679
|
pointer-events: auto;
|
|
2002
1680
|
max-width: 500px;
|
|
2003
|
-
`,
|
|
1681
|
+
`,kl=i.styled.span`
|
|
2004
1682
|
font-size: 14px;
|
|
2005
1683
|
font-weight: 500;
|
|
2006
1684
|
line-height: 1.4;
|
|
2007
1685
|
white-space: nowrap;
|
|
2008
1686
|
overflow: hidden;
|
|
2009
1687
|
text-overflow: ellipsis;
|
|
2010
|
-
`,
|
|
1688
|
+
`,Rl=i.styled.button`
|
|
2011
1689
|
display: flex;
|
|
2012
1690
|
align-items: center;
|
|
2013
1691
|
justify-content: center;
|
|
@@ -2025,20 +1703,20 @@
|
|
|
2025
1703
|
&:hover {
|
|
2026
1704
|
opacity: 1;
|
|
2027
1705
|
}
|
|
2028
|
-
`,
|
|
1706
|
+
`,Ll=i.styled.div`
|
|
2029
1707
|
display: flex;
|
|
2030
1708
|
align-items: center;
|
|
2031
1709
|
justify-content: space-between;
|
|
2032
1710
|
gap: 12px;
|
|
2033
1711
|
width: 100%;
|
|
2034
|
-
`,
|
|
1712
|
+
`,jl=i.styled.div`
|
|
2035
1713
|
display: flex;
|
|
2036
1714
|
align-items: center;
|
|
2037
1715
|
justify-content: center;
|
|
2038
1716
|
min-height: 32px;
|
|
2039
1717
|
padding: 8px 16px;
|
|
2040
1718
|
background-color: #374151;
|
|
2041
|
-
color: ${
|
|
1719
|
+
color: ${r.COLORS.white};
|
|
2042
1720
|
border-radius: 96px;
|
|
2043
1721
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
2044
1722
|
pointer-events: auto;
|
|
@@ -2046,58 +1724,58 @@
|
|
|
2046
1724
|
font-weight: 500;
|
|
2047
1725
|
white-space: nowrap;
|
|
2048
1726
|
margin-left: auto;
|
|
2049
|
-
`,
|
|
1727
|
+
`,Ze=({toast:e,onHide:o})=>{const[t,l]=a.useState(!1),s=()=>{l(!0),setTimeout(()=>{o(e.id)},300)};return a.useEffect(()=>{if(e.duration){const d=setTimeout(()=>{s()},e.duration);return()=>clearTimeout(d)}},[e.duration,e.id]),n.jsxs(ml,{$variant:e.variant,$isExiting:t,children:[n.jsx(kl,{children:e.message}),n.jsx(Rl,{onClick:s,children:n.jsx(n.X,{style:{width:16,height:16}})})]})},Nl=({toasts:e,queueCount:o,onHide:t})=>{if(e.length===0)return null;const l=e.length-1;return n.jsx(vl,{children:e.map((s,d)=>d===l&&o>0?n.jsxs(Ll,{children:[n.jsx(Ze,{toast:s,onHide:t}),n.jsxs(jl,{children:["+",o]})]},s.id):n.jsx(Ze,{toast:s,onHide:t},s.id))})},El=({children:e})=>{const[o,t]=a.useReducer(Cl,wl),l=a.useCallback((d,x="default",c)=>{const p=`toast-${Date.now()}-${Math.random().toString(36).substr(2,9)}`;t({type:"ADD_TOAST",payload:{id:p,message:d,variant:x,duration:c}})},[]),s=a.useCallback(d=>{t({type:"REMOVE_TOAST",payload:d})},[]);return n.jsxs(pt.Provider,{value:{show:l,hide:s},children:[e,n.jsx(Nl,{toasts:o.toasts,queueCount:o.queue.length,onHide:s})]})},Il=()=>{const e=a.useContext(pt);if(!e)throw new Error("useToastr must be used within ToastProvider");return e},Qe={dark:{background:r.COLORS.black,text:r.COLORS.white},light:{background:r.COLORS.white,text:r.COLORS.black,border:r.COLORS.gray},success:{background:r.COLORS.green,text:r.COLORS.white},warning:{background:r.COLORS.yellow,text:r.COLORS.white},danger:{background:r.COLORS.red,text:r.COLORS.white}},ie=e=>Qe[e]??Qe.dark,Tl=(e,o)=>{const t=ie(o).background;switch(e){case"top":return`
|
|
2050
1728
|
bottom: -12px;
|
|
2051
1729
|
left: 50%;
|
|
2052
1730
|
margin-left: -6px;
|
|
2053
|
-
border-top-color: ${
|
|
1731
|
+
border-top-color: ${t};
|
|
2054
1732
|
`;case"bottom":return`
|
|
2055
1733
|
top: -12px;
|
|
2056
1734
|
left: 50%;
|
|
2057
1735
|
margin-left: -6px;
|
|
2058
|
-
border-bottom-color: ${
|
|
1736
|
+
border-bottom-color: ${t};
|
|
2059
1737
|
`;case"left":return`
|
|
2060
1738
|
right: -12px;
|
|
2061
1739
|
top: 50%;
|
|
2062
1740
|
margin-top: -6px;
|
|
2063
|
-
border-left-color: ${
|
|
1741
|
+
border-left-color: ${t};
|
|
2064
1742
|
`;case"right":return`
|
|
2065
1743
|
left: -12px;
|
|
2066
1744
|
top: 50%;
|
|
2067
1745
|
margin-top: -6px;
|
|
2068
|
-
border-right-color: ${
|
|
2069
|
-
`;default:return""}},
|
|
1746
|
+
border-right-color: ${t};
|
|
1747
|
+
`;default:return""}},zl=(e,o)=>{if(o!=="light")return"";const t=ie(o).border;switch(e){case"top":return`
|
|
2070
1748
|
&::after {
|
|
2071
1749
|
bottom: -14px;
|
|
2072
1750
|
left: 50%;
|
|
2073
1751
|
margin-left: -7px;
|
|
2074
|
-
border-top-color: ${
|
|
1752
|
+
border-top-color: ${t};
|
|
2075
1753
|
}
|
|
2076
1754
|
`;case"bottom":return`
|
|
2077
1755
|
&::after {
|
|
2078
1756
|
top: -14px;
|
|
2079
1757
|
left: 50%;
|
|
2080
1758
|
margin-left: -7px;
|
|
2081
|
-
border-bottom-color: ${
|
|
1759
|
+
border-bottom-color: ${t};
|
|
2082
1760
|
}
|
|
2083
1761
|
`;case"left":return`
|
|
2084
1762
|
&::after {
|
|
2085
1763
|
right: -14px;
|
|
2086
1764
|
top: 50%;
|
|
2087
1765
|
margin-top: -7px;
|
|
2088
|
-
border-left-color: ${
|
|
1766
|
+
border-left-color: ${t};
|
|
2089
1767
|
}
|
|
2090
1768
|
`;case"right":return`
|
|
2091
1769
|
&::after {
|
|
2092
1770
|
left: -14px;
|
|
2093
1771
|
top: 50%;
|
|
2094
1772
|
margin-top: -7px;
|
|
2095
|
-
border-right-color: ${
|
|
1773
|
+
border-right-color: ${t};
|
|
2096
1774
|
}
|
|
2097
|
-
`;default:return""}},
|
|
1775
|
+
`;default:return""}},xt=e=>`
|
|
2098
1776
|
padding: 6px 12px;
|
|
2099
|
-
background-color: ${
|
|
2100
|
-
color: ${
|
|
1777
|
+
background-color: ${ie(e.$variant).background};
|
|
1778
|
+
color: ${ie(e.$variant).text};
|
|
2101
1779
|
font-size: 13px;
|
|
2102
1780
|
line-height: 1.4;
|
|
2103
1781
|
border-radius: 6px;
|
|
@@ -2111,7 +1789,7 @@
|
|
|
2111
1789
|
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
|
|
2112
1790
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
2113
1791
|
|
|
2114
|
-
${e.$variant==="light"?`border: 1px solid ${
|
|
1792
|
+
${e.$variant==="light"?`border: 1px solid ${ie(e.$variant).border};`:""}
|
|
2115
1793
|
|
|
2116
1794
|
&::before {
|
|
2117
1795
|
content: '';
|
|
@@ -2119,7 +1797,7 @@
|
|
|
2119
1797
|
width: 0;
|
|
2120
1798
|
height: 0;
|
|
2121
1799
|
border: 6px solid transparent;
|
|
2122
|
-
${
|
|
1800
|
+
${Tl(e.$placement,e.$variant)}
|
|
2123
1801
|
}
|
|
2124
1802
|
|
|
2125
1803
|
${e.$variant==="light"?`
|
|
@@ -2132,12 +1810,12 @@
|
|
|
2132
1810
|
}
|
|
2133
1811
|
`:""}
|
|
2134
1812
|
|
|
2135
|
-
${
|
|
2136
|
-
`,
|
|
1813
|
+
${zl(e.$placement,e.$variant)}
|
|
1814
|
+
`,Al=i.styled.div`
|
|
2137
1815
|
position: relative;
|
|
2138
1816
|
display: inline-block;
|
|
2139
1817
|
width: fit-content;
|
|
2140
|
-
`,
|
|
1818
|
+
`,Pl=e=>{switch(e){case"top":return`
|
|
2141
1819
|
bottom: calc(100% + 8px);
|
|
2142
1820
|
left: 50%;
|
|
2143
1821
|
transform: translateX(-50%);
|
|
@@ -2153,31 +1831,31 @@
|
|
|
2153
1831
|
left: calc(100% + 8px);
|
|
2154
1832
|
top: 50%;
|
|
2155
1833
|
transform: translateY(-50%);
|
|
2156
|
-
`;default:return""}},
|
|
1834
|
+
`;default:return""}},Bl=i.styled.div`
|
|
2157
1835
|
position: absolute;
|
|
2158
|
-
z-index: ${
|
|
2159
|
-
${e=>
|
|
2160
|
-
${({$placement:e})=>
|
|
2161
|
-
`,
|
|
1836
|
+
z-index: ${r.Z_INDEX.dropdown};
|
|
1837
|
+
${e=>xt(e)}
|
|
1838
|
+
${({$placement:e})=>Pl(e)}
|
|
1839
|
+
`,Dl=i.styled.div`
|
|
2162
1840
|
position: fixed;
|
|
2163
|
-
z-index: ${
|
|
2164
|
-
${e=>
|
|
2165
|
-
`,
|
|
1841
|
+
z-index: ${r.Z_INDEX.portalDropdown};
|
|
1842
|
+
${e=>xt(e)}
|
|
1843
|
+
`,Le=C.newClassNameGetter("tooltip"),X=8,Ml=({children:e,className:o,classnames:t,content:l,delay:s=200,placement:d="top",portalRenderNode:x,ref:c,variant:p="dark",...g})=>{const[f,h]=a.useState(!1),[y,u]=a.useState(null),[S,b]=a.useState(d),[$,w]=a.useState({top:0,left:0}),R=a.useRef(null),k=a.useRef(null),N=a.useCallback(()=>{var G,H;if(!R.current)return;const v=R.current.getBoundingClientRect(),j=((G=k.current)==null?void 0:G.offsetWidth)??100,O=((H=k.current)==null?void 0:H.offsetHeight)??30,T=v.top-X,E=window.innerHeight-v.bottom-X,A=v.left-X,M=window.innerWidth-v.right-X;let P=d;if(d==="top"&&T<O&&E>T?P="bottom":d==="bottom"&&E<O&&T>E?P="top":d==="left"&&A<j&&M>A?P="right":d==="right"&&M<j&&A>M&&(P="left"),b(P),x){let B,D;switch(P){case"top":B=v.top-O-X,D=v.left+v.width/2-j/2;break;case"bottom":B=v.bottom+X,D=v.left+v.width/2-j/2;break;case"left":B=v.top+v.height/2-O/2,D=v.left-j-X;break;case"right":B=v.top+v.height/2-O/2,D=v.right+X;break;default:B=0,D=0}const U=8;D=Math.max(U,Math.min(D,window.innerWidth-j-U)),B=Math.max(U,Math.min(B,window.innerHeight-O-U)),w({top:B,left:D})}},[d,x]);a.useLayoutEffect(()=>{f&&N()},[f,N]);const I=()=>{const v=setTimeout(()=>{h(!0)},s);u(v)},L=()=>{y&&(clearTimeout(y),u(null)),h(!1)},m=x?Ne.createPortal(n.jsx(Dl,{ref:k,className:Le("content",t==null?void 0:t.content),$placement:S,$variant:p,$visible:f,style:{top:$.top,left:$.left},children:l}),x):n.jsx(Bl,{ref:k,className:Le("content",t==null?void 0:t.content),$placement:S,$variant:p,$visible:f,children:l});return n.jsxs(Al,{...g,ref:v=>{R.current=v,typeof c=="function"?c(v):c&&(c.current=v)},className:Le("wrapper",o),onMouseEnter:I,onMouseLeave:L,children:[e,m]})},_l=i.styled.div`
|
|
2166
1844
|
display: inline-flex;
|
|
2167
1845
|
align-items: center;
|
|
2168
1846
|
gap: 12px;
|
|
2169
1847
|
flex-direction: ${({$reverse:e})=>e?"row-reverse":"row"};
|
|
2170
|
-
`,
|
|
1848
|
+
`,Fl=i.styled.div`
|
|
2171
1849
|
display: flex;
|
|
2172
1850
|
flex-direction: column;
|
|
2173
1851
|
text-align: ${({$align:e})=>e};
|
|
2174
|
-
`,
|
|
1852
|
+
`,Gl=i.styled.span`
|
|
2175
1853
|
font-size: 14px;
|
|
2176
1854
|
font-weight: 600;
|
|
2177
1855
|
line-height: 1.4;
|
|
2178
|
-
`,
|
|
1856
|
+
`,Hl=i.styled.span`
|
|
2179
1857
|
font-size: 12px;
|
|
2180
1858
|
color: #666;
|
|
2181
1859
|
line-height: 1.4;
|
|
2182
|
-
`,
|
|
1860
|
+
`,ye=C.newClassNameGetter("user"),Ul=({avatarPosition:e="left",avatarProps:o,className:t,classnames:l,description:s,name:d,ref:x,src:c,...p})=>{const g=e==="right";return n.jsxs(_l,{...p,ref:x,className:ye("container",t),$reverse:g,children:[n.jsx(et,{size:"sm",...o,name:typeof d=="string"?d:void 0,src:c??(o==null?void 0:o.src),className:ye("avatar",l==null?void 0:l.avatar)}),n.jsxs(Fl,{$align:g?"right":"left",children:[n.jsx(Gl,{className:ye("name",l==null?void 0:l.name),children:d}),s&&n.jsx(Hl,{className:ye("description",l==null?void 0:l.description),children:s})]})]})};exports.BREAKPOINTS=r.BREAKPOINTS;exports.COLORS=r.COLORS;exports.KEYFRAMES=r.KEYFRAMES;exports.KEY_SYMBOLS=r.KEY_SYMBOLS;exports.Z_INDEX=r.Z_INDEX;exports.alpha=r.alpha;exports.getBrowser=r.getBrowser;exports.getKeySymbols=r.getKeySymbols;exports.getOperatingSystem=r.getOperatingSystem;exports.isValid=r.isValid;exports.toHEX=r.toHEX;exports.useKeyBinding=r.useKeyBinding;exports.mediaBetween=F.mediaBetween;exports.mediaDown=F.mediaDown;exports.mediaUp=F.mediaUp;exports.validation=F.index;exports.Autocomplete=i.Autocomplete;exports.Button=i.Button;exports.Checkbox=i.Checkbox;exports.CheckboxCard=i.CheckboxCard;exports.CheckboxGroup=i.CheckboxGroup;exports.Chip=i.Chip;exports.DatePicker=i.DatePicker;exports.FieldLabel=i.FieldLabel;exports.FieldMessage=i.FieldMessage;exports.Input=i.Input;exports.KeySymbol=i.KeySymbol;exports.KeysBindings=i.KeysBindings;exports.Modal=i.Modal;exports.MultiSelect=i.MultiSelect;exports.OtpCode=i.OtpCode;exports.Radio=i.Radio;exports.RadioCard=i.RadioCard;exports.RadioGroup=i.RadioGroup;exports.Select=i.Select;exports.Spinner=i.Spinner;exports.Tags=i.Tags;exports.Textarea=i.Textarea;exports.Toggle=i.Toggle;exports.ToggleCard=i.ToggleCard;exports.ToggleGroup=i.ToggleGroup;exports.formatDateGo=i.formatDateGo;exports.newClassNameGetter=C.newClassNameGetter;exports.Accordion=vt;exports.Alert=It;exports.Avatar=et;exports.AvatarGroup=_t;exports.Badge=Xt;exports.BreadcrumbItem=Yt;exports.Breadcrumbs=eo;exports.Card=so;exports.CardBody=co;exports.CardFooter=xo;exports.CardHeader=go;exports.ConfirmationProvider=Ro;exports.Container=Eo;exports.DateRange=Ao;exports.Divider=Do;exports.Drawer=Ho;exports.Dropdown=qo;exports.EmptyState=nr;exports.FieldRow=dr;exports.FileUpload=Er;exports.FileUploadItem=Ar;exports.GlobalStyle=ft;exports.Hashtag=_r;exports.Heading=Hr;exports.MenuButton=Xr;exports.NotificationProvider=on;exports.NotifyConfirmationProvider=fn;exports.Overline=Sn;exports.Pagination=Dn;exports.Panel=Wn;exports.PendingScreen=gi;exports.Progress=yi;exports.SaveProgressProvider=Si;exports.ShellScreen=En;exports.Skeleton=Ni;exports.SplitFlapText=at;exports.Stat=zi;exports.StepLog=Ji;exports.Stepper=ll;exports.Tabs=al;exports.Timeline=Ol;exports.ToastProvider=El;exports.Tooltip=Ml;exports.User=Ul;exports.formatFileSize=nt;exports.useConfirmation=Lo;exports.useNotification=rn;exports.useNotifyConfirmation=hn;exports.useSaveProgress=Oi;exports.useToastr=Il;
|
|
2183
1861
|
//# sourceMappingURL=index.cjs.map
|