@vacano/ui 1.2.1 → 1.3.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/dist/index.cjs +310 -272
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +20 -0
- package/dist/index.js +1552 -1393
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./X-CI1qRJDP.cjs"),ie=require("@emotion/react"),g=require("react"),t=require("./media-OVL6YjWb.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./X-CI1qRJDP.cjs"),ie=require("@emotion/react"),g=require("react"),t=require("./media-OVL6YjWb.cjs"),I=require("./tooling-Dflq0Y98.cjs"),ge=require("react-dom");function qo(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,i.get?i:{enumerable:!0,get:()=>e[r]})}}return o.default=e,Object.freeze(o)}const Ce=qo(g);function Ot(){return Ot=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var r=arguments[o];for(var i in r)({}).hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e},Ot.apply(null,arguments)}const Ko=ie.css`
|
|
2
2
|
*,
|
|
3
3
|
*::before,
|
|
4
4
|
*::after {
|
|
@@ -141,13 +141,13 @@
|
|
|
141
141
|
:focus:not(:focus-visible) {
|
|
142
142
|
outline: none;
|
|
143
143
|
}
|
|
144
|
-
`,
|
|
144
|
+
`,Zo=()=>a.jsx(ie.Global,{styles:Ko});var Jo=/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|fetchpriority|fetchPriority|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|popover|popoverTarget|popoverTargetAction|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/,Qo=a.memoize(function(e){return Jo.test(e)||e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&e.charCodeAt(2)<91}),er=Qo,tr=function(o){return o!=="theme"},Lt=function(o){return typeof o=="string"&&o.charCodeAt(0)>96?er:tr},zt=function(o,r,i){var n;if(r){var l=r.shouldForwardProp;n=o.__emotion_forwardProp&&l?function(c){return o.__emotion_forwardProp(c)&&l(c)}:l}return typeof n!="function"&&i&&(n=o.__emotion_forwardProp),n},or=function(o){var r=o.cache,i=o.serialized,n=o.isStringTag;return a.registerStyles(r,i,n),a.useInsertionEffectAlwaysWithSyncFallback(function(){return a.insertStyles(r,i,n)}),null},rr=function e(o,r){var i=o.__emotion_real===o,n=i&&o.__emotion_base||o,l,c;r!==void 0&&(l=r.label,c=r.target);var d=zt(o,r,i),p=d||Lt(n),h=!p("as");return function(){var u=arguments,f=i&&o.__emotion_styles!==void 0?o.__emotion_styles.slice(0):[];if(l!==void 0&&f.push("label:"+l+";"),u[0]==null||u[0].raw===void 0)f.push.apply(f,u);else{var O=u[0];f.push(O[0]);for(var k=u.length,y=1;y<k;y++)f.push(u[y],O[y])}var S=ie.withEmotionCache(function($,x,v){var b=h&&$.as||n,L="",j=[],E=$;if($.theme==null){E={};for(var G in $)E[G]=$[G];E.theme=Ce.useContext(ie.ThemeContext)}typeof $.className=="string"?L=a.getRegisteredStyles(x.registered,j,$.className):$.className!=null&&(L=$.className+" ");var P=a.serializeStyles(f.concat(j),x.registered,E);L+=x.key+"-"+P.name,c!==void 0&&(L+=" "+c);var D=h&&d===void 0?Lt(b):p,N={};for(var C in $)h&&C==="as"||D(C)&&(N[C]=$[C]);return N.className=L,v&&(N.ref=v),Ce.createElement(Ce.Fragment,null,Ce.createElement(or,{cache:x,serialized:P,isStringTag:typeof b=="string"}),Ce.createElement(b,N))});return S.displayName=l!==void 0?l:"Styled("+(typeof n=="string"?n:n.displayName||n.name||"Component")+")",S.defaultProps=o.defaultProps,S.__emotion_real=S,S.__emotion_base=n,S.__emotion_styles=f,S.__emotion_forwardProp=d,Object.defineProperty(S,"toString",{value:function(){return"."+c}}),S.withComponent=function($,x){var v=e($,Ot({},r,x,{shouldForwardProp:zt(S,x,!0)}));return v.apply(void 0,f)},S}},ir=["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","marquee","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"],s=rr.bind(null);ir.forEach(function(e){s[e]=s(e)});const Pt={compact:{height:"32px",padding:"0 8px",radius:"12px",iconSize:"16px"},default:{height:"40px",padding:"0 12px",radius:"16px",iconSize:"20px"}},jt={normal:{background:{static:t.COLORS["steel-blue"],hover:t.alpha(t.COLORS["steel-blue"],90),active:t.alpha(t.COLORS["steel-blue"],80),disabled:t.alpha(t.COLORS["steel-blue"],50)},color:{static:t.COLORS.white,hover:t.COLORS.white,active:t.COLORS.white,disabled:t.COLORS.white},borderColor:{static:"transparent",hover:"transparent",active:"transparent",disabled:"transparent"}},system:{background:{static:t.COLORS.black,hover:t.alpha(t.COLORS.black,90),active:t.alpha(t.COLORS.black,80),disabled:t.alpha(t.COLORS.black,50)},color:{static:t.COLORS.white,hover:t.COLORS.white,active:t.COLORS.white,disabled:t.COLORS.white},borderColor:{static:"transparent",hover:"transparent",active:"transparent",disabled:"transparent"}},success:{background:{static:t.COLORS.green,hover:t.alpha(t.COLORS.green,90),active:t.alpha(t.COLORS.green,80),disabled:t.alpha(t.COLORS.green,50)},color:{static:t.COLORS.white,hover:t.COLORS.white,active:t.COLORS.white,disabled:t.COLORS.white},borderColor:{static:"transparent",hover:"transparent",active:"transparent",disabled:"transparent"}},warning:{background:{static:t.COLORS.yellow,hover:t.alpha(t.COLORS.yellow,90),active:t.alpha(t.COLORS.yellow,80),disabled:t.alpha(t.COLORS.yellow,50)},color:{static:t.COLORS.black,hover:t.COLORS.black,active:t.COLORS.black,disabled:t.COLORS.black},borderColor:{static:"transparent",hover:"transparent",active:"transparent",disabled:"transparent"}},danger:{background:{static:t.COLORS.red,hover:t.alpha(t.COLORS.red,90),active:t.alpha(t.COLORS.red,80),disabled:t.alpha(t.COLORS.red,50)},color:{static:t.COLORS.white,hover:t.COLORS.white,active:t.COLORS.white,disabled:t.COLORS.white},borderColor:{static:"transparent",hover:"transparent",active:"transparent",disabled:"transparent"}},transparent:{background:{static:t.alpha(t.COLORS["iron-grey"],1),hover:t.alpha(t.COLORS["iron-grey"],5),active:t.alpha(t.COLORS["iron-grey"],10),disabled:t.alpha(t.COLORS["iron-grey"],5)},color:{static:t.COLORS.black,hover:t.COLORS.black,active:t.COLORS.black,disabled:t.alpha(t.COLORS.black,30)},borderColor:{static:t.alpha(t.COLORS["iron-grey"],20),hover:t.alpha(t.COLORS["iron-grey"],20),active:t.alpha(t.COLORS["iron-grey"],20),disabled:t.alpha(t.COLORS["iron-grey"],10)}}},J=e=>{const o=jt[e];return o||jt.normal},oe=e=>{const o=Pt[e];return o||Pt.default},nr=e=>e?"auto":"fit-content",ar=s.button`
|
|
145
145
|
display: flex;
|
|
146
146
|
gap: 6px;
|
|
147
147
|
text-decoration: none;
|
|
148
148
|
align-items: center;
|
|
149
149
|
justify-content: center;
|
|
150
|
-
width: ${e=>e.$iconOnly?oe(e.$size).height:
|
|
150
|
+
width: ${e=>e.$iconOnly?oe(e.$size).height:nr(!!e.$fullWidth)};
|
|
151
151
|
color: ${e=>J(e.$variant).color.static};
|
|
152
152
|
background-color: ${e=>J(e.$variant).background.static};
|
|
153
153
|
height: ${e=>oe(e.$size).height};
|
|
@@ -177,7 +177,7 @@
|
|
|
177
177
|
background-color: ${e=>J(e.$variant).background.disabled};
|
|
178
178
|
border-color: ${e=>J(e.$variant).borderColor.disabled};
|
|
179
179
|
}
|
|
180
|
-
`,
|
|
180
|
+
`,lr=s.div`
|
|
181
181
|
display: grid;
|
|
182
182
|
place-items: center;
|
|
183
183
|
width: ${e=>oe(e.$size).iconSize};
|
|
@@ -187,19 +187,19 @@
|
|
|
187
187
|
width: ${e=>oe(e.$size).iconSize};
|
|
188
188
|
height: ${e=>oe(e.$size).iconSize};
|
|
189
189
|
}
|
|
190
|
-
`,
|
|
190
|
+
`,dr=s.span`
|
|
191
191
|
font-weight: 600;
|
|
192
192
|
overflow: hidden;
|
|
193
193
|
white-space: nowrap;
|
|
194
194
|
text-overflow: ellipsis;
|
|
195
|
-
`,
|
|
195
|
+
`,cr=s(a.LoaderCircle)`
|
|
196
196
|
width: ${e=>oe(e.$size).iconSize};
|
|
197
197
|
height: ${e=>oe(e.$size).iconSize};
|
|
198
198
|
animation: ${t.KEYFRAMES.rotate} 0.8s linear infinite;
|
|
199
|
-
`,
|
|
199
|
+
`,sr=s.div`
|
|
200
200
|
display: flex;
|
|
201
201
|
gap: 3px;
|
|
202
|
-
`,
|
|
202
|
+
`,pr=s.span`
|
|
203
203
|
text-align: center;
|
|
204
204
|
display: flex;
|
|
205
205
|
justify-content: center;
|
|
@@ -212,12 +212,12 @@
|
|
|
212
212
|
border-radius: 4px;
|
|
213
213
|
width: fit-content;
|
|
214
214
|
background-color: ${e=>e.$variant==="light"?t.alpha(t.COLORS.white,25):t.alpha(t.COLORS.black,25)};
|
|
215
|
-
`,
|
|
215
|
+
`,ur=I.newClassNameGetter("key-symbol"),bo=({className:e,ref:o,symbol:r,variant:i="light",...n})=>r?a.jsx(pr,{...n,ref:o,className:ur("container",e),$variant:i,children:r}):null,Et=I.newClassNameGetter("key-bindings"),go=({className:e,classnames:o,keys:r,ref:i,variant:n,...l})=>{const c=g.useMemo(()=>t.getKeySymbols(r),[r]);return c.length===0?null:a.jsx(sr,{...l,ref:i,className:Et("container",e),children:c.map(d=>a.jsx(bo,{symbol:d,className:Et("item",o==null?void 0:o.item),variant:n},d))})},Tt=I.newClassNameGetter("button"),Ie=({children:e,className:o,classnames:r,disabled:i,fullWidth:n,icon:l,loading:c,onClick:d,ref:p=null,keyBindings:h=[],size:u="default",type:f="button",variant:O="normal",...k})=>{const y=g.useRef(null);g.useImperativeHandle(p,()=>y.current,[]),t.useKeyBinding(h,()=>{var $;($=y.current)==null||$.click()});const S=g.useMemo(()=>{switch(f){case"link":return"button";default:return f}},[f]);return a.jsxs(ar,{...k,onClick:d,ref:y,type:S,disabled:i,className:Tt("container",o),$variant:O,$size:u,$fullWidth:!!n,$iconOnly:!!l&&!(e||(h==null?void 0:h.length)>0),children:[c&&a.jsx(cr,{$size:u}),l&&!c&&a.jsx(lr,{$size:u,children:l}),e&&a.jsx(dr,{className:Tt("label",r==null?void 0:r.label),children:e}),a.jsx(go,{keys:h,variant:O==="system"?"light":"dark"})]})},hr=s.div`
|
|
216
216
|
background-color: ${t.COLORS.white};
|
|
217
217
|
border-radius: 16px;
|
|
218
218
|
border: ${e=>e.$border?`1px solid ${t.alpha(t.COLORS["iron-grey"],15)}`:"none"};
|
|
219
219
|
box-shadow: ${e=>e.$shadow?`0 2px 8px ${t.alpha(t.COLORS.black,10)}`:"none"};
|
|
220
|
-
`,
|
|
220
|
+
`,br=I.newClassNameGetter("card"),gr=({children:e,className:o,ref:r,border:i=!1,shadow:n=!1,...l})=>a.jsx(hr,{...l,ref:r,className:br("container",o),$border:i,$shadow:n,children:e}),Nt={normal:{box:{border:t.alpha(t.COLORS["iron-grey"],30),borderChecked:t.COLORS["iron-grey"],background:t.COLORS.white,backgroundChecked:t.COLORS.black,focusShadow:t.alpha(t.COLORS["iron-grey"],30)},label:t.COLORS.black,icon:t.COLORS.white},error:{box:{border:t.COLORS.red,borderChecked:t.COLORS.red,background:t.COLORS.white,backgroundChecked:t.COLORS.red,focusShadow:t.alpha(t.COLORS.red,30)},label:t.COLORS.red,icon:t.COLORS.white}},ue=e=>Nt[e]??Nt.normal,fr=s.label`
|
|
221
221
|
display: inline-flex;
|
|
222
222
|
align-items: center;
|
|
223
223
|
gap: 8px;
|
|
@@ -225,15 +225,15 @@
|
|
|
225
225
|
opacity: ${e=>e.$disabled?.5:1};
|
|
226
226
|
|
|
227
227
|
&:has(input:focus-visible) > span:first-of-type {
|
|
228
|
-
box-shadow: 0 0 0 2px ${e=>
|
|
228
|
+
box-shadow: 0 0 0 2px ${e=>ue(e.$variant).box.focusShadow};
|
|
229
229
|
}
|
|
230
|
-
`,
|
|
230
|
+
`,xr=s.input`
|
|
231
231
|
position: absolute;
|
|
232
232
|
opacity: 0;
|
|
233
233
|
width: 0;
|
|
234
234
|
height: 0;
|
|
235
235
|
pointer-events: none;
|
|
236
|
-
`,
|
|
236
|
+
`,Or=s.span`
|
|
237
237
|
display: inline-flex;
|
|
238
238
|
align-items: center;
|
|
239
239
|
justify-content: center;
|
|
@@ -242,17 +242,17 @@
|
|
|
242
242
|
height: 18px;
|
|
243
243
|
border-radius: 6px;
|
|
244
244
|
border: 1.5px solid
|
|
245
|
-
${e=>e.$checked||e.$indeterminate?
|
|
246
|
-
background-color: ${e=>e.$checked||e.$indeterminate?
|
|
245
|
+
${e=>e.$checked||e.$indeterminate?ue(e.$variant).box.borderChecked:ue(e.$variant).box.border};
|
|
246
|
+
background-color: ${e=>e.$checked||e.$indeterminate?ue(e.$variant).box.backgroundChecked:ue(e.$variant).box.background};
|
|
247
247
|
transition:
|
|
248
248
|
border-color 0.15s ease,
|
|
249
249
|
background-color 0.15s ease,
|
|
250
250
|
box-shadow 0.15s ease;
|
|
251
|
-
|
|
251
|
+
`,$r=s.span`
|
|
252
252
|
display: inline-flex;
|
|
253
253
|
align-items: center;
|
|
254
254
|
justify-content: center;
|
|
255
|
-
color: ${e=>
|
|
255
|
+
color: ${e=>ue(e.$variant).icon};
|
|
256
256
|
opacity: ${e=>e.$visible?1:0};
|
|
257
257
|
transform: ${e=>e.$visible?"scale(1)":"scale(0.5)"};
|
|
258
258
|
transition:
|
|
@@ -263,13 +263,13 @@
|
|
|
263
263
|
width: 12px;
|
|
264
264
|
height: 12px;
|
|
265
265
|
}
|
|
266
|
-
`,
|
|
266
|
+
`,Sr=s.span`
|
|
267
267
|
font-size: 14px;
|
|
268
268
|
font-weight: 500;
|
|
269
269
|
line-height: 1;
|
|
270
|
-
color: ${e=>
|
|
270
|
+
color: ${e=>ue(e.$variant).label};
|
|
271
271
|
user-select: none;
|
|
272
|
-
`,
|
|
272
|
+
`,Re=I.newClassNameGetter("checkbox"),Je=({checked:e,className:o,classnames:r,disabled:i,indeterminate:n=!1,label:l,onChange:c,ref:d,variant:p="normal",...h})=>a.jsxs(fr,{className:Re("container",o),$disabled:!!i,$variant:p,children:[a.jsx(xr,{...h,ref:d,type:"checkbox",className:Re("input",r==null?void 0:r.input),checked:e,disabled:i,onChange:c}),a.jsx(Or,{className:Re("box",r==null?void 0:r.box),$checked:e,$indeterminate:n,$variant:p,children:a.jsx($r,{className:Re("icon",r==null?void 0:r.icon),$visible:n||e,$variant:p,children:n?a.jsx(a.Minus,{}):a.jsx(a.Check,{})})}),l&&a.jsx(Sr,{className:Re("label",r==null?void 0:r.label),$variant:p,children:l})]}),It={normal:{border:{static:t.alpha(t.COLORS.black,20),hover:t.alpha(t.COLORS.black,40),active:t.alpha(t.COLORS.black,40),disabled:t.alpha(t.COLORS.black,10)},borderChecked:t.COLORS.black,background:{static:t.COLORS.white,hover:t.COLORS.white,active:t.COLORS.white,disabled:t.alpha(t.COLORS.black,5)},backgroundChecked:t.alpha(t.COLORS.black,5),focusRing:t.alpha(t.COLORS.black,20),label:{static:t.COLORS.black,hover:t.COLORS.black,active:t.COLORS.black,disabled:t.alpha(t.COLORS.black,40)},description:{static:t.alpha(t.COLORS.black,60),hover:t.alpha(t.COLORS.black,60),active:t.alpha(t.COLORS.black,60),disabled:t.alpha(t.COLORS.black,30)}},error:{border:{static:t.COLORS.red,hover:t.COLORS.red,active:t.COLORS.red,disabled:t.alpha(t.COLORS.red,30)},borderChecked:t.COLORS.red,background:{static:t.COLORS.white,hover:t.COLORS.white,active:t.COLORS.white,disabled:t.alpha(t.COLORS.red,5)},backgroundChecked:t.alpha(t.COLORS.red,5),focusRing:t.alpha(t.COLORS.red,20),label:{static:t.COLORS.red,hover:t.COLORS.red,active:t.COLORS.red,disabled:t.alpha(t.COLORS.red,40)},description:{static:t.alpha(t.COLORS.red,70),hover:t.alpha(t.COLORS.red,70),active:t.alpha(t.COLORS.red,70),disabled:t.alpha(t.COLORS.red,40)}}},ce=e=>It[e]??It.normal,yr=s.label`
|
|
273
273
|
display: grid;
|
|
274
274
|
grid-template-columns: auto 1fr;
|
|
275
275
|
align-items: start;
|
|
@@ -298,7 +298,7 @@
|
|
|
298
298
|
.vacano_checkbox_container {
|
|
299
299
|
pointer-events: none;
|
|
300
300
|
}
|
|
301
|
-
`,
|
|
301
|
+
`,vr=s.input`
|
|
302
302
|
position: absolute;
|
|
303
303
|
width: 1px;
|
|
304
304
|
height: 1px;
|
|
@@ -308,12 +308,12 @@
|
|
|
308
308
|
clip: rect(0, 0, 0, 0);
|
|
309
309
|
white-space: nowrap;
|
|
310
310
|
border: 0;
|
|
311
|
-
`,
|
|
311
|
+
`,mr=s.div`
|
|
312
312
|
display: flex;
|
|
313
313
|
flex-direction: column;
|
|
314
314
|
gap: 2px;
|
|
315
315
|
min-width: 0;
|
|
316
|
-
|
|
316
|
+
`,wr=s.span`
|
|
317
317
|
font-size: 14px;
|
|
318
318
|
font-weight: 500;
|
|
319
319
|
line-height: 1.4;
|
|
@@ -322,7 +322,7 @@
|
|
|
322
322
|
label[data-disabled='true'] & {
|
|
323
323
|
color: ${e=>ce(e.$variant).label.disabled};
|
|
324
324
|
}
|
|
325
|
-
`,
|
|
325
|
+
`,Cr=s.span`
|
|
326
326
|
font-size: 12px;
|
|
327
327
|
font-weight: 400;
|
|
328
328
|
line-height: 1.4;
|
|
@@ -331,21 +331,21 @@
|
|
|
331
331
|
label[data-disabled='true'] & {
|
|
332
332
|
color: ${e=>ce(e.$variant).description.disabled};
|
|
333
333
|
}
|
|
334
|
-
`,
|
|
334
|
+
`,Fe=I.newClassNameGetter("checkbox-card"),Rr=({checked:e,className:o,classnames:r,description:i,disabled:n,fullWidth:l=!1,label:c,onChange:d,ref:p,variant:h="normal",...u})=>a.jsxs(yr,{className:Fe("container",o),$checked:e,$disabled:!!n,$fullWidth:l,$variant:h,"data-disabled":n,children:[a.jsx(vr,{...u,ref:p,type:"checkbox",checked:e,disabled:n,onChange:d}),a.jsx(Je,{className:r==null?void 0:r.checkbox,checked:e,disabled:n,variant:h,onChange:()=>{},tabIndex:-1,"aria-hidden":!0}),a.jsxs(mr,{className:Fe("content",r==null?void 0:r.content),children:[a.jsx(wr,{className:Fe("label",r==null?void 0:r.label),$variant:h,children:c}),i&&a.jsx(Cr,{className:Fe("description",r==null?void 0:r.description),$variant:h,children:i})]})]}),At={label:{color:t.COLORS.black,disabledColor:t.alpha(t.COLORS.black,40)}},kr=s.div`
|
|
335
335
|
display: flex;
|
|
336
336
|
flex-direction: column;
|
|
337
337
|
gap: 8px;
|
|
338
|
-
`,
|
|
338
|
+
`,Lr=s.span`
|
|
339
339
|
font-size: 13px;
|
|
340
340
|
font-weight: 500;
|
|
341
341
|
line-height: 1.5;
|
|
342
|
-
color: ${e=>e.$disabled?
|
|
342
|
+
color: ${e=>e.$disabled?At.label.disabledColor:At.label.color};
|
|
343
343
|
margin-bottom: 4px;
|
|
344
|
-
`,
|
|
344
|
+
`,zr=s.div`
|
|
345
345
|
display: flex;
|
|
346
346
|
flex-direction: column;
|
|
347
347
|
gap: 12px;
|
|
348
|
-
`,
|
|
348
|
+
`,tt=I.newClassNameGetter("checkbox-group"),Pr=({className:e,classnames:o,disabled:r,label:i,onChange:n,options:l,ref:c,value:d,...p})=>{const h=(u,f)=>{n(f?[...d,u]:d.filter(O=>O!==u))};return a.jsxs(kr,{...p,ref:c,className:tt("container",e),children:[i&&a.jsx(Lr,{className:tt("label",o==null?void 0:o.label),$disabled:r,children:i}),a.jsx(zr,{className:tt("options",o==null?void 0:o.options),children:l.map(u=>a.jsx(Je,{className:o==null?void 0:o.checkbox,checked:d.includes(u.value),label:u.label,disabled:r,onChange:f=>h(u.value,f.target.checked)},u.value))})]})},Dt={gray:{background:t.alpha(t.COLORS["iron-grey"],10),color:t.COLORS["iron-grey"],deleteHover:t.alpha(t.COLORS["iron-grey"],20)},red:{background:t.alpha(t.COLORS.red,10),color:t.COLORS.red,deleteHover:t.alpha(t.COLORS.red,20)},blue:{background:t.alpha(t.COLORS["steel-blue"],10),color:t.COLORS["steel-blue"],deleteHover:t.alpha(t.COLORS["steel-blue"],20)},black:{background:t.COLORS.black,color:t.COLORS.white,deleteHover:t.alpha(t.COLORS.white,20)}},$t=e=>Dt[e]??Dt.gray,jr=s.span`
|
|
349
349
|
display: inline-flex;
|
|
350
350
|
align-items: center;
|
|
351
351
|
gap: 4px;
|
|
@@ -355,9 +355,9 @@
|
|
|
355
355
|
font-size: 12px;
|
|
356
356
|
font-weight: 500;
|
|
357
357
|
line-height: 1.5;
|
|
358
|
-
background-color: ${e
|
|
359
|
-
color: ${e
|
|
360
|
-
`,
|
|
358
|
+
background-color: ${e=>$t(e.$variant).background};
|
|
359
|
+
color: ${e=>$t(e.$variant).color};
|
|
360
|
+
`,Er=s.button`
|
|
361
361
|
display: inline-flex;
|
|
362
362
|
align-items: center;
|
|
363
363
|
justify-content: center;
|
|
@@ -372,17 +372,17 @@
|
|
|
372
372
|
transition: background-color 0.15s ease;
|
|
373
373
|
|
|
374
374
|
&:hover {
|
|
375
|
-
background-color: ${e
|
|
375
|
+
background-color: ${e=>$t(e.$variant).deleteHover};
|
|
376
376
|
}
|
|
377
377
|
|
|
378
378
|
& svg {
|
|
379
379
|
width: 14px;
|
|
380
380
|
height: 14px;
|
|
381
381
|
}
|
|
382
|
-
`,
|
|
382
|
+
`,Tr=s.span`
|
|
383
383
|
flex: 1 0 auto;
|
|
384
384
|
text-align: center;
|
|
385
|
-
`,
|
|
385
|
+
`,ot=I.newClassNameGetter("chip"),Ke=({children:e,className:o,classnames:r,deletable:i,onDelete:n,ref:l,variant:c="gray",...d})=>a.jsxs(jr,{...d,ref:l,className:ot("container",o),$variant:c,$deletable:!!i,children:[a.jsx(Tr,{className:ot("label",r==null?void 0:r.label),children:e}),i&&a.jsx(Er,{type:"button",className:ot("delete",r==null?void 0:r.delete),$variant:c,onClick:n,children:a.jsx(a.X,{})})]}),Nr="Confirm",Ir="Cancel",Ar=ie.keyframes`
|
|
386
386
|
from {
|
|
387
387
|
opacity: 0;
|
|
388
388
|
transform: translateX(-50%) translateY(100%);
|
|
@@ -391,7 +391,7 @@
|
|
|
391
391
|
opacity: 1;
|
|
392
392
|
transform: translateX(-50%) translateY(0);
|
|
393
393
|
}
|
|
394
|
-
`,
|
|
394
|
+
`,Dr=ie.keyframes`
|
|
395
395
|
from {
|
|
396
396
|
opacity: 1;
|
|
397
397
|
transform: translateX(-50%) translateY(0);
|
|
@@ -400,7 +400,7 @@
|
|
|
400
400
|
opacity: 0;
|
|
401
401
|
transform: translateX(-50%) translateY(100%);
|
|
402
402
|
}
|
|
403
|
-
`,
|
|
403
|
+
`,_r=s.div`
|
|
404
404
|
position: fixed;
|
|
405
405
|
bottom: 24px;
|
|
406
406
|
left: 50%;
|
|
@@ -415,53 +415,53 @@
|
|
|
415
415
|
box-shadow:
|
|
416
416
|
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
417
417
|
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
418
|
-
animation: ${({$open:e})=>e?
|
|
418
|
+
animation: ${({$open:e})=>e?Ar:Dr} 0.2s ease-out forwards;
|
|
419
419
|
z-index: 1000;
|
|
420
|
-
`,
|
|
420
|
+
`,Mr=s.p`
|
|
421
421
|
margin: 0;
|
|
422
422
|
font-size: 14px;
|
|
423
423
|
color: ${t.COLORS.black};
|
|
424
424
|
white-space: nowrap;
|
|
425
|
-
`,
|
|
425
|
+
`,Fr=s.div`
|
|
426
426
|
display: flex;
|
|
427
427
|
align-items: center;
|
|
428
428
|
gap: 8px;
|
|
429
|
-
`,
|
|
429
|
+
`,ke=I.newClassNameGetter("confirmation"),Br=({cancelBindings:e,cancelLabel:o=Ir,className:r,classnames:i,confirmLabel:n=Nr,loading:l=!1,message:c,onCancel:d,onConfirm:p,open:h=!0,ref:u,submitBindings:f,...O})=>h?a.jsxs(_r,{...O,ref:u,className:ke("container",r),$open:h,children:[a.jsx(Mr,{className:ke("message",i==null?void 0:i.message),children:c}),a.jsxs(Fr,{className:ke("actions",i==null?void 0:i.actions),children:[a.jsx(Ie,{variant:"system",size:"compact",onClick:d,keyBindings:e,className:ke("cancel-button",i==null?void 0:i.cancelButton),children:o}),a.jsx(Ie,{variant:"danger",size:"compact",onClick:p,loading:l,keyBindings:f,className:ke("confirm-button",i==null?void 0:i.confirmButton),children:n})]})]}):null,Le={sm:`${t.BREAKPOINTS.sm}px`,md:`${t.BREAKPOINTS.md}px`,lg:`${t.BREAKPOINTS.lg}px`,xl:`${t.BREAKPOINTS.xl}px`,"2xl":`${t.BREAKPOINTS["2xl"]}px`},Yr=s.div`
|
|
430
430
|
width: 100%;
|
|
431
431
|
|
|
432
432
|
${t.mediaUp("sm")} {
|
|
433
|
-
max-width: ${
|
|
433
|
+
max-width: ${Le.sm};
|
|
434
434
|
}
|
|
435
435
|
|
|
436
436
|
${t.mediaUp("md")} {
|
|
437
|
-
max-width: ${
|
|
437
|
+
max-width: ${Le.md};
|
|
438
438
|
}
|
|
439
439
|
|
|
440
440
|
${t.mediaUp("lg")} {
|
|
441
|
-
max-width: ${
|
|
441
|
+
max-width: ${Le.lg};
|
|
442
442
|
}
|
|
443
443
|
|
|
444
444
|
${t.mediaUp("xl")} {
|
|
445
|
-
max-width: ${
|
|
445
|
+
max-width: ${Le.xl};
|
|
446
446
|
}
|
|
447
447
|
|
|
448
448
|
${t.mediaUp("2xl")} {
|
|
449
|
-
max-width: ${
|
|
449
|
+
max-width: ${Le["2xl"]};
|
|
450
450
|
}
|
|
451
|
-
`,
|
|
451
|
+
`,Hr=I.newClassNameGetter("container"),Gr=({children:e,className:o,ref:r,...i})=>a.jsx(Yr,{...i,ref:r,className:Hr("container",o),children:e}),qe={compact:{height:"32px",padding:"0 10px",radius:"14px",iconSize:16},default:{height:"40px",padding:"0 14px",radius:"16px",iconSize:20}},$e={normal:{background:{static:t.alpha(t.COLORS.black,2),disabled:t.alpha(t.COLORS.black,10)},border:{static:t.alpha(t.COLORS.black,60),disabled:t.alpha(t.COLORS.black,10)},color:{static:t.COLORS.black,disabled:t.alpha(t.COLORS.black,65)},placeholder:{static:t.alpha(t.COLORS.black,40),disabled:t.alpha(t.COLORS.black,65)},focus:t.alpha(t.COLORS["iron-grey"],30)},error:{background:{static:t.alpha(t.COLORS.red,2),disabled:t.alpha(t.COLORS.red,10)},border:{static:t.alpha(t.COLORS.red,60),disabled:t.alpha(t.COLORS.red,10)},color:{static:t.COLORS.red,disabled:t.alpha(t.COLORS.red,65)},placeholder:{static:t.alpha(t.COLORS.red,40),disabled:t.alpha(t.COLORS.red,65)},focus:t.alpha(t.COLORS.red,30)}},ne=36,Qe=2,Vr=12,fo=(e,o,r="en")=>{const i=e.getFullYear(),n=e.getMonth(),l=e.getDate(),c=e.getHours(),d=e.getMinutes(),p=e.getSeconds(),h=c%12||12,u=c>=12,f=new Intl.DateTimeFormat(r,{month:"long"}).format(e),O=new Intl.DateTimeFormat(r,{month:"short"}).format(e),k=new Intl.DateTimeFormat(r,{weekday:"long"}).format(e),y=new Intl.DateTimeFormat(r,{weekday:"short"}).format(e),S=L=>L.toString().padStart(2,"0"),$=L=>L.toString().padStart(2," "),x=L=>`\0${L}\0`,v=[["2006","YEARFOUR",i.toString()],["January","MONTHLONG",f],["Monday","WEEKDAYLONG",k],["Jan","MONTHSHORT",O],["Mon","WEEKDAYSHORT",y],["06","YEARTWO",i.toString().slice(-2)],["01","MONTHPAD",S(n+1)],["_2","DAYSPACE",$(l)],["02","DAYPAD",S(l)],["15","HOURTWENTYFOUR",S(c)],["03","HOURTWELVEPAD",S(h)],["04","MINUTE",S(d)],["05","SECOND",S(p)],["PM","AMPMUP",u?"PM":"AM"],["pm","AMPMLOW",u?"pm":"am"],["1","MONTH",(n+1).toString()],["2","DAY",l.toString()],["3","HOURTWELVE",h.toString()]];let b=o;for(const[L,j]of v)b=b.split(L).join(x(j));for(const[,L,j]of v)b=b.split(x(L)).join(j);return b},Wr=(e,o)=>new Date(e,o+1,0).getDate(),Ur=(e,o)=>new Date(e,o,1).getDay(),Xr=(e,o,r=1)=>{const i=Wr(e,o);let l=Ur(e,o)-r;l<0&&(l+=7);const c=[];for(let d=0;d<l;d++)c.push(null);for(let d=1;d<=i;d++)c.push(d);for(;c.length<42;)c.push(null);return c},qr=(e,o=1)=>{const r=[];for(let i=0;i<7;i++){const n=(o+i)%7,l=new Date(2024,0,7+n);r.push(new Intl.DateTimeFormat(e,{weekday:"short"}).format(l))}return r},Kr=e=>{const o=[];for(let r=0;r<12;r++){const i=new Date(2024,r,1);o.push(new Intl.DateTimeFormat(e,{month:"short"}).format(i))}return o},_t=(e,o)=>e.getFullYear()===o.getFullYear()&&e.getMonth()===o.getMonth()&&e.getDate()===o.getDate(),Mt=(e,o)=>e.getFullYear()===o.getFullYear()&&e.getMonth()===o.getMonth(),Zr=(e,o)=>e.getFullYear()===o.getFullYear(),Ft=(e,o,r,i,n)=>{const l=new Date(e,o,r);if(i){const c=new Date(i.getFullYear(),i.getMonth(),i.getDate());if(l<c)return!0}if(n){const c=new Date(n.getFullYear(),n.getMonth(),n.getDate());if(l>c)return!0}return!1},Bt=(e,o,r,i)=>{if(r){const n=r.getFullYear(),l=r.getMonth();if(e<n||e===n&&o<l)return!0}if(i){const n=i.getFullYear(),l=i.getMonth();if(e>n||e===n&&o>l)return!0}return!1},Yt=(e,o,r)=>!!(o&&e<o.getFullYear()||r&&e>r.getFullYear()),Jr=(e,o=12)=>{const r=e-Math.floor(o/2),i=[];for(let n=0;n<o;n++)i.push(r+n);return i},Qr=e=>{switch(e){case"date":return"02.01.2006";case"month":return"January 2006";case"year":return"2006"}},ei=s.span`
|
|
452
452
|
font-size: 12px;
|
|
453
453
|
font-weight: 500;
|
|
454
454
|
color: ${e=>e.$variant==="normal"?t.COLORS.black:t.COLORS.red};
|
|
455
|
-
`,
|
|
455
|
+
`,ti=I.newClassNameGetter("field-label"),fe=({children:e,className:o,ref:r,required:i,variant:n="normal",...l})=>e?a.jsxs(ei,{...l,ref:r,className:ti("container",o),$variant:n,children:[e," ",i&&"*"]}):null,oi=s.div`
|
|
456
456
|
position: relative;
|
|
457
457
|
display: inline-flex;
|
|
458
458
|
flex-direction: column;
|
|
459
459
|
gap: 2px;
|
|
460
460
|
min-width: 180px;
|
|
461
461
|
width: ${({$fullWidth:e})=>e?"100%":"fit-content"};
|
|
462
|
-
`,
|
|
462
|
+
`,ri=s(fe)`
|
|
463
463
|
margin-left: 6px;
|
|
464
|
-
`,
|
|
464
|
+
`,ii=s.button`
|
|
465
465
|
display: flex;
|
|
466
466
|
align-items: center;
|
|
467
467
|
justify-content: space-between;
|
|
@@ -472,68 +472,68 @@
|
|
|
472
472
|
font-size: 14px;
|
|
473
473
|
font-weight: 500;
|
|
474
474
|
text-align: left;
|
|
475
|
-
height: ${({$size:e})=>
|
|
476
|
-
padding: ${({$size:e})=>
|
|
477
|
-
border-radius: ${({$size:e})=>
|
|
478
|
-
color: ${({$variant:e,$disabled:o,$hasValue:r})=>r
|
|
475
|
+
height: ${({$size:e})=>qe[e].height};
|
|
476
|
+
padding: ${({$size:e})=>qe[e].padding};
|
|
477
|
+
border-radius: ${({$size:e})=>qe[e].radius};
|
|
478
|
+
color: ${({$variant:e,$disabled:o,$hasValue:r})=>r?$e[e].color[o?"disabled":"static"]:$e[e].placeholder[o?"disabled":"static"]};
|
|
479
479
|
border: 1px solid
|
|
480
|
-
${({$variant:e,$disabled:o})
|
|
481
|
-
background-color: ${({$variant:e,$disabled:o})
|
|
480
|
+
${({$variant:e,$disabled:o})=>$e[e].border[o?"disabled":"static"]};
|
|
481
|
+
background-color: ${({$variant:e,$disabled:o})=>$e[e].background[o?"disabled":"static"]};
|
|
482
482
|
|
|
483
483
|
&:focus-visible {
|
|
484
|
-
outline: 2px solid ${({$variant:e})
|
|
484
|
+
outline: 2px solid ${({$variant:e})=>$e[e].focus};
|
|
485
485
|
}
|
|
486
486
|
|
|
487
487
|
${({$open:e,$variant:o})=>e&&`
|
|
488
|
-
outline: 2px solid ${
|
|
488
|
+
outline: 2px solid ${$e[o].focus};
|
|
489
489
|
`}
|
|
490
|
-
`,
|
|
490
|
+
`,ni=s.span`
|
|
491
491
|
flex: 1;
|
|
492
492
|
overflow: hidden;
|
|
493
493
|
text-overflow: ellipsis;
|
|
494
494
|
white-space: nowrap;
|
|
495
|
-
`,
|
|
495
|
+
`,ai=s.span`
|
|
496
496
|
display: flex;
|
|
497
497
|
align-items: center;
|
|
498
498
|
justify-content: center;
|
|
499
499
|
flex-shrink: 0;
|
|
500
500
|
transition: transform 0.15s ease;
|
|
501
501
|
transform: ${({$open:e})=>e?"rotate(180deg)":"rotate(0deg)"};
|
|
502
|
-
`,
|
|
502
|
+
`,xo=`
|
|
503
503
|
z-index: 100;
|
|
504
504
|
background-color: ${t.COLORS.white};
|
|
505
505
|
border: 1px solid ${t.alpha(t.COLORS.black,15)};
|
|
506
506
|
border-radius: 12px;
|
|
507
507
|
box-shadow: 0 4px 16px ${t.alpha(t.COLORS.black,12)};
|
|
508
|
-
padding: ${
|
|
509
|
-
`,
|
|
508
|
+
padding: ${Vr}px;
|
|
509
|
+
`,Oo=(e,o)=>e?"translateY(0)":o==="bottom"?"translateY(-8px)":"translateY(8px)",li=s.div`
|
|
510
510
|
position: absolute;
|
|
511
511
|
${({$position:e})=>e==="bottom"?"top: calc(100% + 4px);":"bottom: calc(100% + 4px);"}
|
|
512
512
|
left: 0;
|
|
513
|
-
${
|
|
513
|
+
${xo}
|
|
514
514
|
opacity: ${({$open:e})=>e?1:0};
|
|
515
515
|
visibility: ${({$open:e})=>e?"visible":"hidden"};
|
|
516
|
-
transform: ${({$open:e,$position:o})=>
|
|
516
|
+
transform: ${({$open:e,$position:o})=>Oo(e,o)};
|
|
517
517
|
transition:
|
|
518
518
|
opacity 0.15s ease,
|
|
519
519
|
transform 0.15s ease,
|
|
520
520
|
visibility 0.15s;
|
|
521
|
-
`,
|
|
521
|
+
`,di=s.div`
|
|
522
522
|
position: fixed;
|
|
523
|
-
${
|
|
523
|
+
${xo}
|
|
524
524
|
opacity: ${({$open:e})=>e?1:0};
|
|
525
525
|
visibility: ${({$open:e})=>e?"visible":"hidden"};
|
|
526
|
-
transform: ${({$open:e,$position:o})=>
|
|
526
|
+
transform: ${({$open:e,$position:o})=>Oo(e,o)};
|
|
527
527
|
transition:
|
|
528
528
|
opacity 0.15s ease,
|
|
529
529
|
transform 0.15s ease,
|
|
530
530
|
visibility 0.15s;
|
|
531
|
-
`,
|
|
531
|
+
`,rt=s.div`
|
|
532
532
|
display: flex;
|
|
533
533
|
align-items: center;
|
|
534
534
|
justify-content: space-between;
|
|
535
535
|
margin-bottom: 8px;
|
|
536
|
-
`,
|
|
536
|
+
`,it=s.button`
|
|
537
537
|
display: flex;
|
|
538
538
|
align-items: center;
|
|
539
539
|
gap: 4px;
|
|
@@ -553,7 +553,7 @@
|
|
|
553
553
|
&:focus-visible {
|
|
554
554
|
outline: 2px solid ${t.alpha(t.COLORS.black,20)};
|
|
555
555
|
}
|
|
556
|
-
`,
|
|
556
|
+
`,Se=s.button`
|
|
557
557
|
display: flex;
|
|
558
558
|
align-items: center;
|
|
559
559
|
justify-content: center;
|
|
@@ -581,15 +581,15 @@
|
|
|
581
581
|
background: transparent;
|
|
582
582
|
}
|
|
583
583
|
}
|
|
584
|
-
`,
|
|
584
|
+
`,nt=s.div`
|
|
585
585
|
display: flex;
|
|
586
586
|
gap: 4px;
|
|
587
|
-
`,
|
|
587
|
+
`,ci=s.div`
|
|
588
588
|
display: grid;
|
|
589
589
|
grid-template-columns: repeat(7, ${ne}px);
|
|
590
|
-
gap: ${
|
|
590
|
+
gap: ${Qe}px;
|
|
591
591
|
margin-bottom: 4px;
|
|
592
|
-
`,
|
|
592
|
+
`,si=s.div`
|
|
593
593
|
display: flex;
|
|
594
594
|
align-items: center;
|
|
595
595
|
justify-content: center;
|
|
@@ -598,11 +598,11 @@
|
|
|
598
598
|
font-weight: 500;
|
|
599
599
|
color: ${t.alpha(t.COLORS.black,50)};
|
|
600
600
|
text-transform: uppercase;
|
|
601
|
-
`,
|
|
601
|
+
`,pi=s.div`
|
|
602
602
|
display: grid;
|
|
603
603
|
grid-template-columns: repeat(7, ${ne}px);
|
|
604
|
-
gap: ${
|
|
605
|
-
`,
|
|
604
|
+
gap: ${Qe}px;
|
|
605
|
+
`,ui=s.button`
|
|
606
606
|
display: flex;
|
|
607
607
|
align-items: center;
|
|
608
608
|
justify-content: center;
|
|
@@ -632,12 +632,12 @@
|
|
|
632
632
|
&:disabled {
|
|
633
633
|
cursor: not-allowed;
|
|
634
634
|
}
|
|
635
|
-
`,
|
|
635
|
+
`,hi=s.div`
|
|
636
636
|
display: grid;
|
|
637
637
|
grid-template-columns: repeat(3, 1fr);
|
|
638
638
|
gap: 8px;
|
|
639
|
-
width: ${7*ne+6*
|
|
640
|
-
`,
|
|
639
|
+
width: ${7*ne+6*Qe}px;
|
|
640
|
+
`,bi=s.button`
|
|
641
641
|
display: flex;
|
|
642
642
|
align-items: center;
|
|
643
643
|
justify-content: center;
|
|
@@ -662,12 +662,12 @@
|
|
|
662
662
|
outline: 2px solid ${t.alpha(t.COLORS.black,30)};
|
|
663
663
|
outline-offset: 1px;
|
|
664
664
|
}
|
|
665
|
-
`,
|
|
665
|
+
`,gi=s.div`
|
|
666
666
|
display: grid;
|
|
667
667
|
grid-template-columns: repeat(3, 1fr);
|
|
668
668
|
gap: 8px;
|
|
669
|
-
width: ${7*ne+6*
|
|
670
|
-
`,
|
|
669
|
+
width: ${7*ne+6*Qe}px;
|
|
670
|
+
`,fi=s.button`
|
|
671
671
|
display: flex;
|
|
672
672
|
align-items: center;
|
|
673
673
|
justify-content: center;
|
|
@@ -692,10 +692,10 @@
|
|
|
692
692
|
outline: 2px solid ${t.alpha(t.COLORS.black,30)};
|
|
693
693
|
outline-offset: 1px;
|
|
694
694
|
}
|
|
695
|
-
`,
|
|
695
|
+
`,xi=s.div`
|
|
696
696
|
width: ${ne}px;
|
|
697
697
|
height: ${ne}px;
|
|
698
|
-
`,K=
|
|
698
|
+
`,K=I.newClassNameGetter("date-picker"),Be=4,Oi=300,$i=({value:e,onChange:o,mode:r="date",displayFormat:i,placeholder:n,locale:l="en",weekStartsOn:c=1,minDate:d,maxDate:p,size:h="default",variant:u="normal",disabled:f=!1,fullWidth:O=!1,label:k,portalRenderNode:y,open:S,onOpen:$,onClose:x,className:v,classnames:b,ref:L,...j})=>{const E=g.useMemo(()=>new Date,[]),[G,P]=g.useState(!1),[D,N]=g.useState({top:0,left:0}),[C,F]=g.useState("bottom"),[m,T]=g.useState(()=>r==="year"?"years":r==="month"?"months":"days"),[R,_]=g.useState(()=>e??E),[Y,M]=g.useState(()=>((e==null?void 0:e.getFullYear())??E.getFullYear())-6),H=g.useRef(null),z=g.useRef(null),A=g.useRef(null),X=S!==void 0,q=X?S:G,xe=i??Qr(r),Ae=g.useMemo(()=>qr(l,c),[l,c]),et=g.useMemo(()=>Kr(l),[l]),jo=g.useMemo(()=>Xr(R.getFullYear(),R.getMonth(),c),[R,c]),De=g.useMemo(()=>Jr(Y+6,12),[Y]),wt=g.useMemo(()=>e?fo(e,xe,l):null,[e,xe,l]),Eo=n??xe.replace(/2006|06|January|Jan|01|02/g,"__"),ve=g.useCallback(()=>{var we;if(!z.current)return;const w=z.current.getBoundingClientRect(),B=((we=A.current)==null?void 0:we.offsetHeight)??Oi,me=window.innerHeight-w.bottom-Be,_e=w.top-Be,Oe=me<B&&_e>me?"top":"bottom";if(F(Oe),y){const Me=Oe==="bottom"?w.bottom+Be:w.top-B-Be;N({top:Me,left:w.left})}},[y]),Ct=g.useCallback(()=>{if(f)return;X||P(!0),$==null||$(),T(r==="year"?"years":r==="month"?"months":"days");const w=e??E;_(w),M(w.getFullYear()-6)},[f,X,$,r,e,E]),Z=g.useCallback(()=>{X||P(!1),x==null||x()},[X,x]),To=g.useCallback(()=>{q?Z():Ct()},[q,Z,Ct]),No=g.useCallback(w=>{const B=new Date(R.getFullYear(),R.getMonth(),w);o==null||o(B),Z()},[R,o,Z]),Io=g.useCallback(w=>{if(r==="month"){const B=new Date(R.getFullYear(),w,1);o==null||o(B),Z()}else _(new Date(R.getFullYear(),w,1)),T("days")},[r,R,o,Z]),Ao=g.useCallback(w=>{if(r==="year"){const B=new Date(w,0,1);o==null||o(B),Z()}else r==="month"?(_(new Date(w,R.getMonth(),1)),T("months")):(_(new Date(w,R.getMonth(),1)),T("months"))},[r,R,o,Z]),Do=g.useCallback(()=>{_(w=>new Date(w.getFullYear(),w.getMonth()-1,1))},[]),_o=g.useCallback(()=>{_(w=>new Date(w.getFullYear(),w.getMonth()+1,1))},[]),Mo=g.useCallback(()=>{_(w=>new Date(w.getFullYear()-1,w.getMonth(),1))},[]),Fo=g.useCallback(()=>{_(w=>new Date(w.getFullYear()+1,w.getMonth(),1))},[]),Bo=g.useCallback(()=>{M(w=>w-12)},[]),Yo=g.useCallback(()=>{M(w=>w+12)},[]),Rt=g.useCallback(()=>{m==="days"?T("months"):m==="months"&&T("years")},[m]);g.useLayoutEffect(()=>{q&&ve()},[q,ve]),g.useEffect(()=>{const w=Oe=>{const we=Oe.target,Me=H.current&&!H.current.contains(we),Xo=A.current&&!A.current.contains(we);y?Me&&Xo&&Z():Me&&Z()},B=Oe=>{Oe.key==="Escape"&&Z()},me=()=>{q&&y&&ve()},_e=()=>{q&&y&&ve()};return q&&(document.addEventListener("mousedown",w),document.addEventListener("keydown",B),y&&(window.addEventListener("scroll",me,!0),window.addEventListener("resize",_e))),()=>{document.removeEventListener("mousedown",w),document.removeEventListener("keydown",B),window.removeEventListener("scroll",me,!0),window.removeEventListener("resize",_e)}},[q,Z,y,ve]);const Ho=qe[h].iconSize,Go=()=>a.jsxs(a.Fragment,{children:[a.jsxs(rt,{className:K("header",b==null?void 0:b.header),children:[a.jsx(it,{onClick:Rt,type:"button",children:new Intl.DateTimeFormat(l,{month:"long",year:"numeric"}).format(R)}),a.jsxs(nt,{children:[a.jsx(Se,{onClick:Do,type:"button","aria-label":"Previous month",children:a.jsx(a.ChevronLeft,{size:16})}),a.jsx(Se,{onClick:_o,type:"button","aria-label":"Next month",children:a.jsx(a.ChevronRight,{size:16})})]})]}),a.jsx(ci,{children:Ae.map((w,B)=>a.jsx(si,{children:w},B))}),a.jsx(pi,{className:K("grid",b==null?void 0:b.grid),children:jo.map((w,B)=>w===null?a.jsx(xi,{},B):a.jsx(ui,{type:"button",className:K("cell",b==null?void 0:b.cell),$selected:e?_t(e,new Date(R.getFullYear(),R.getMonth(),w)):!1,$today:_t(E,new Date(R.getFullYear(),R.getMonth(),w)),$disabled:Ft(R.getFullYear(),R.getMonth(),w,d,p),disabled:Ft(R.getFullYear(),R.getMonth(),w,d,p),onClick:()=>No(w),children:w},B))})]}),Vo=()=>a.jsxs(a.Fragment,{children:[a.jsxs(rt,{className:K("header",b==null?void 0:b.header),children:[a.jsx(it,{onClick:Rt,type:"button",children:R.getFullYear()}),a.jsxs(nt,{children:[a.jsx(Se,{onClick:Mo,type:"button","aria-label":"Previous year",children:a.jsx(a.ChevronLeft,{size:16})}),a.jsx(Se,{onClick:Fo,type:"button","aria-label":"Next year",children:a.jsx(a.ChevronRight,{size:16})})]})]}),a.jsx(hi,{className:K("grid",b==null?void 0:b.grid),children:et.map((w,B)=>a.jsx(bi,{type:"button",className:K("cell",b==null?void 0:b.cell),$selected:e?Mt(e,new Date(R.getFullYear(),B,1)):!1,$current:Mt(E,new Date(R.getFullYear(),B,1)),$disabled:Bt(R.getFullYear(),B,d,p),disabled:Bt(R.getFullYear(),B,d,p),onClick:()=>Io(B),children:w},B))})]}),Wo=()=>a.jsxs(a.Fragment,{children:[a.jsxs(rt,{className:K("header",b==null?void 0:b.header),children:[a.jsxs(it,{type:"button",style:{cursor:"default"},children:[De[0]," - ",De[De.length-1]]}),a.jsxs(nt,{children:[a.jsx(Se,{onClick:Bo,type:"button","aria-label":"Previous years",children:a.jsx(a.ChevronLeft,{size:16})}),a.jsx(Se,{onClick:Yo,type:"button","aria-label":"Next years",children:a.jsx(a.ChevronRight,{size:16})})]})]}),a.jsx(gi,{className:K("grid",b==null?void 0:b.grid),children:De.map(w=>a.jsx(fi,{type:"button",className:K("cell",b==null?void 0:b.cell),$selected:e?Zr(e,new Date(w,0,1)):!1,$current:E.getFullYear()===w,$disabled:Yt(w,d,p),disabled:Yt(w,d,p),onClick:()=>Ao(w),children:w},w))})]}),kt=()=>{switch(m){case"days":return Go();case"months":return Vo();case"years":return Wo()}},Uo=y?ge.createPortal(a.jsx(di,{ref:A,$open:q,$position:C,className:K("calendar",b==null?void 0:b.calendar),style:{top:D.top,left:D.left},children:kt()}),y):a.jsx(li,{ref:A,$open:q,$position:C,className:K("calendar",b==null?void 0:b.calendar),children:kt()});return a.jsxs(oi,{...j,ref:L??H,$fullWidth:O,className:K("container",v),children:[k&&a.jsx(ri,{children:k}),a.jsxs(ii,{ref:z,type:"button",onClick:To,disabled:f,$size:h,$variant:u,$disabled:f,$open:q,$hasValue:!!wt,className:K("trigger",b==null?void 0:b.trigger),children:[a.jsx(ni,{children:wt??Eo}),a.jsx(ai,{$open:q,children:a.jsx(a.ChevronDown,{size:Ho})})]}),Uo]})},Si={left:t.KEYFRAMES.slideInLeft,right:t.KEYFRAMES.slideInRight,top:t.KEYFRAMES.slideInTop,bottom:t.KEYFRAMES.slideInBottom},yi=(e,o)=>{switch(e){case"left":return`
|
|
699
699
|
top: 0;
|
|
700
700
|
left: 0;
|
|
701
701
|
height: 100%;
|
|
@@ -715,19 +715,19 @@
|
|
|
715
715
|
left: 0;
|
|
716
716
|
width: 100%;
|
|
717
717
|
height: ${o};
|
|
718
|
-
`}},
|
|
718
|
+
`}},vi=s.div`
|
|
719
719
|
position: fixed;
|
|
720
720
|
z-index: 1001;
|
|
721
721
|
background-color: ${t.COLORS.white};
|
|
722
722
|
box-shadow: 0 4px 24px ${t.alpha(t.COLORS.black,20)};
|
|
723
|
-
${e=>
|
|
724
|
-
animation: ${e=>
|
|
725
|
-
`,
|
|
723
|
+
${e=>yi(e.$position,e.$size)}
|
|
724
|
+
animation: ${e=>Si[e.$position]} ${e=>e.$animated?"0.05s":"0s"} ease-out forwards;
|
|
725
|
+
`,mi=I.newClassNameGetter("drawer"),wi=({animated:e,children:o,className:r,open:i,position:n="right",ref:l,size:c="400px",...d})=>i?ge.createPortal(a.jsx(vi,{...d,ref:l,className:mi("container",r),$animated:!!e,$position:n,$size:c,children:o}),document.body):null,Ci=s.div`
|
|
726
726
|
position: relative;
|
|
727
727
|
display: inline-block;
|
|
728
|
-
`,
|
|
728
|
+
`,Ri=s.div`
|
|
729
729
|
cursor: pointer;
|
|
730
|
-
|
|
730
|
+
`,$o=`
|
|
731
731
|
z-index: 100;
|
|
732
732
|
min-width: 160px;
|
|
733
733
|
padding: 8px;
|
|
@@ -735,33 +735,33 @@
|
|
|
735
735
|
border: 1px solid ${t.COLORS.gray};
|
|
736
736
|
border-radius: 8px;
|
|
737
737
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
738
|
-
`,
|
|
738
|
+
`,So=(e,o)=>e?"translateY(0)":o==="bottom"?"translateY(-8px)":"translateY(8px)",ki=s.div`
|
|
739
739
|
position: absolute;
|
|
740
740
|
${({$position:e})=>e==="bottom"?"top: calc(100% + 4px);":"bottom: calc(100% + 4px);"}
|
|
741
741
|
${({$align:e})=>e==="left"?"left: 0;":"right: 0;"}
|
|
742
|
-
${
|
|
742
|
+
${$o}
|
|
743
743
|
opacity: ${({$open:e})=>e?1:0};
|
|
744
744
|
visibility: ${({$open:e})=>e?"visible":"hidden"};
|
|
745
|
-
transform: ${({$open:e,$position:o})=>
|
|
745
|
+
transform: ${({$open:e,$position:o})=>So(e,o)};
|
|
746
746
|
transition:
|
|
747
747
|
opacity 0.15s ease,
|
|
748
748
|
transform 0.15s ease,
|
|
749
749
|
visibility 0.15s;
|
|
750
|
-
`,
|
|
750
|
+
`,Li=s.div`
|
|
751
751
|
position: fixed;
|
|
752
|
-
${
|
|
752
|
+
${$o}
|
|
753
753
|
opacity: ${({$open:e})=>e?1:0};
|
|
754
754
|
visibility: ${({$open:e})=>e?"visible":"hidden"};
|
|
755
|
-
transform: ${({$open:e,$position:o})=>
|
|
755
|
+
transform: ${({$open:e,$position:o})=>So(e,o)};
|
|
756
756
|
transition:
|
|
757
757
|
opacity 0.15s ease,
|
|
758
758
|
transform 0.15s ease,
|
|
759
759
|
visibility 0.15s;
|
|
760
|
-
`,
|
|
760
|
+
`,Ye=I.newClassNameGetter("dropdown"),He=4,zi=100,Pi=({align:e="left",children:o,className:r,classnames:i,onClose:n,onOpen:l,open:c,portalRenderNode:d,ref:p,trigger:h,...u})=>{const[f,O]=g.useState(!1),[k,y]=g.useState({top:0,left:0}),[S,$]=g.useState("bottom"),x=g.useRef(null),v=g.useRef(null),b=g.useRef(null),L=c!==void 0,j=L?c:f,E=g.useCallback(()=>{var _,Y;if(!v.current)return;const N=v.current.getBoundingClientRect(),C=((_=b.current)==null?void 0:_.offsetHeight)??zi,F=((Y=b.current)==null?void 0:Y.offsetWidth)??160,m=window.innerHeight-N.bottom-He,T=N.top-He,R=m<C&&T>m?"top":"bottom";if($(R),d){let M;e==="left"?M=N.left:M=N.right-F;const H=R==="bottom"?N.bottom+He:N.top-C-He;y({top:H,left:M})}},[e,d]),G=g.useCallback(()=>{L?j?n==null||n():l==null||l():O(N=>{const C=!N;return C?l==null||l():n==null||n(),C})},[L,j,n,l]),P=g.useCallback(()=>{L||O(!1),n==null||n()},[L,n]);g.useLayoutEffect(()=>{j&&E()},[j,E]),g.useEffect(()=>{const N=T=>{const R=T.target,_=x.current&&!x.current.contains(R),Y=b.current&&!b.current.contains(R);d?_&&Y&&P():_&&P()},C=T=>{T.key==="Escape"&&P()},F=()=>{j&&d&&E()},m=()=>{j&&d&&E()};return j&&(document.addEventListener("mousedown",N),document.addEventListener("keydown",C),d&&(window.addEventListener("scroll",F,!0),window.addEventListener("resize",m))),()=>{document.removeEventListener("mousedown",N),document.removeEventListener("keydown",C),window.removeEventListener("scroll",F,!0),window.removeEventListener("resize",m)}},[j,P,d,E]);const D=d?ge.createPortal(a.jsx(Li,{ref:b,$open:j,$position:S,className:Ye("content",i==null?void 0:i.content),style:{top:k.top,left:k.left},children:o}),d):a.jsx(ki,{ref:b,$align:e,$open:j,$position:S,className:Ye("content",i==null?void 0:i.content),children:o});return a.jsxs(Ci,{...u,ref:p??x,className:Ye("container",r),children:[a.jsx(Ri,{ref:v,onClick:G,className:Ye("trigger",i==null?void 0:i.trigger),children:g.cloneElement(h)}),D]})},ji=s.div`
|
|
761
761
|
display: flex;
|
|
762
762
|
flex-direction: column;
|
|
763
763
|
gap: 12px;
|
|
764
|
-
`,
|
|
764
|
+
`,Ei=s.div`
|
|
765
765
|
width: ${({$size:e})=>e}px;
|
|
766
766
|
height: ${({$size:e})=>e}px;
|
|
767
767
|
border-radius: 8px;
|
|
@@ -777,10 +777,10 @@
|
|
|
777
777
|
height: 100%;
|
|
778
778
|
object-fit: cover;
|
|
779
779
|
}
|
|
780
|
-
`,
|
|
780
|
+
`,Ti=s.span`
|
|
781
781
|
font-size: 12px;
|
|
782
782
|
color: ${t.COLORS["iron-grey"]};
|
|
783
|
-
`,
|
|
783
|
+
`,Ni=e=>`
|
|
784
784
|
.${e} {
|
|
785
785
|
padding: 7px 16px;
|
|
786
786
|
font-size: 14px;
|
|
@@ -798,7 +798,7 @@
|
|
|
798
798
|
.${e}:active {
|
|
799
799
|
transform: translate(0, 1px);
|
|
800
800
|
}
|
|
801
|
-
`,
|
|
801
|
+
`,Ii=e=>`
|
|
802
802
|
.${e} {
|
|
803
803
|
display: flex;
|
|
804
804
|
flex: 1 1 auto;
|
|
@@ -822,7 +822,7 @@
|
|
|
822
822
|
max-height: 70vh;
|
|
823
823
|
}
|
|
824
824
|
}
|
|
825
|
-
`,
|
|
825
|
+
`,Ai=e=>`
|
|
826
826
|
.${e} {
|
|
827
827
|
padding: 7px 16px;
|
|
828
828
|
font-size: 14px;
|
|
@@ -840,7 +840,7 @@
|
|
|
840
840
|
.${e}:active {
|
|
841
841
|
transform: translate(0, 1px);
|
|
842
842
|
}
|
|
843
|
-
`,
|
|
843
|
+
`,Di=e=>`
|
|
844
844
|
.${e} {
|
|
845
845
|
display: flex;
|
|
846
846
|
flex-direction: column;
|
|
@@ -858,7 +858,7 @@
|
|
|
858
858
|
border-radius: 8px;
|
|
859
859
|
}
|
|
860
860
|
}
|
|
861
|
-
`,
|
|
861
|
+
`,_i=e=>`
|
|
862
862
|
.${e} {
|
|
863
863
|
display: flex;
|
|
864
864
|
justify-content: flex-end;
|
|
@@ -877,7 +877,7 @@
|
|
|
877
877
|
gap: 8px;
|
|
878
878
|
}
|
|
879
879
|
}
|
|
880
|
-
`,
|
|
880
|
+
`,Mi=e=>`
|
|
881
881
|
.${e} {
|
|
882
882
|
display: flex;
|
|
883
883
|
justify-content: flex-start;
|
|
@@ -899,7 +899,7 @@
|
|
|
899
899
|
font-size: 14px;
|
|
900
900
|
}
|
|
901
901
|
}
|
|
902
|
-
`,
|
|
902
|
+
`,Fi=e=>`
|
|
903
903
|
.${e} {
|
|
904
904
|
display: block;
|
|
905
905
|
z-index: 101;
|
|
@@ -917,27 +917,27 @@
|
|
|
917
917
|
position: absolute;
|
|
918
918
|
touch-action: none;
|
|
919
919
|
}
|
|
920
|
-
`,
|
|
920
|
+
`,Bi=e=>`
|
|
921
921
|
.${e} {
|
|
922
922
|
position: absolute;
|
|
923
923
|
z-index: 2;
|
|
924
924
|
background-color: rgba(0, 0, 0, 0.6);
|
|
925
925
|
touch-action: none;
|
|
926
926
|
}
|
|
927
|
-
`,
|
|
927
|
+
`,Yi=e=>`
|
|
928
928
|
.${e} {
|
|
929
929
|
position: absolute;
|
|
930
930
|
z-index: 3;
|
|
931
931
|
touch-action: none;
|
|
932
932
|
}
|
|
933
|
-
`,
|
|
933
|
+
`,Hi=e=>`
|
|
934
934
|
.${e} {
|
|
935
935
|
backface-visibility: hidden;
|
|
936
936
|
perspective: 1000px;
|
|
937
937
|
max-inline-size: unset !important;
|
|
938
938
|
max-block-size: unset !important;
|
|
939
939
|
}
|
|
940
|
-
`,
|
|
940
|
+
`,Gi=e=>`
|
|
941
941
|
.${e} {
|
|
942
942
|
position: absolute;
|
|
943
943
|
z-index: 100;
|
|
@@ -948,7 +948,7 @@
|
|
|
948
948
|
overflow: hidden;
|
|
949
949
|
border-radius: 50%;
|
|
950
950
|
}
|
|
951
|
-
`,
|
|
951
|
+
`,Vi={tl:"nw-resize",tr:"ne-resize",bl:"sw-resize",br:"se-resize"},Wi={tl:{h:"left",v:"top"},tr:{h:"right",v:"top"},bl:{h:"left",v:"bottom"},br:{h:"right",v:"bottom"}},Ge=(e,o)=>{const r=Vi[o],{h:i,v:n}=Wi[o];return`
|
|
952
952
|
.${e} {
|
|
953
953
|
display: block;
|
|
954
954
|
z-index: 102;
|
|
@@ -974,7 +974,7 @@
|
|
|
974
974
|
${n}: -12px;
|
|
975
975
|
}
|
|
976
976
|
}
|
|
977
|
-
`},
|
|
977
|
+
`},Ui=e=>`
|
|
978
978
|
.${e} {
|
|
979
979
|
display: flex;
|
|
980
980
|
align-items: center;
|
|
@@ -1000,7 +1000,7 @@
|
|
|
1000
1000
|
padding-bottom: env(safe-area-inset-bottom, 8px);
|
|
1001
1001
|
}
|
|
1002
1002
|
}
|
|
1003
|
-
`,
|
|
1003
|
+
`,Xi=e=>`
|
|
1004
1004
|
.${e} {
|
|
1005
1005
|
backface-visibility: hidden;
|
|
1006
1006
|
user-select: none;
|
|
@@ -1013,25 +1013,25 @@
|
|
|
1013
1013
|
position: absolute;
|
|
1014
1014
|
z-index: 1;
|
|
1015
1015
|
}
|
|
1016
|
-
`,
|
|
1017
|
-
${
|
|
1018
|
-
${
|
|
1019
|
-
${
|
|
1020
|
-
${
|
|
1021
|
-
${
|
|
1022
|
-
${
|
|
1023
|
-
${
|
|
1024
|
-
${
|
|
1025
|
-
${
|
|
1026
|
-
${
|
|
1027
|
-
${
|
|
1028
|
-
${
|
|
1029
|
-
${
|
|
1030
|
-
${
|
|
1031
|
-
${
|
|
1032
|
-
${
|
|
1033
|
-
${
|
|
1034
|
-
`,i=document.createElement("style");return i.innerHTML=r,document.getElementsByTagName("head")[0].prepend(i),o};let Vi=0;const Ui=e=>{const o=new Map,r=new Proxy({...e},{set(i,n,l){return Reflect.set(i,n,l),(o.get(n)||[]).forEach(c=>c.action(l,i,n)),!0}});return{getState:()=>({...r}),setState:i=>{for(const n of Object.keys(i)){const l=i[n];l!==void 0&&(r[n]=l)}},subscribe:(i,n)=>{const l=String(++Vi),c=o.get(i)||[];return o.set(i,[...c,{action:n,id:l}]),l},unsubscribe:i=>{for(const[n,l]of o.entries()){const c=l.filter(d=>d.id!==i);if(c.length!==l.length){o.set(n,c);return}}},unsubscribeAll:()=>{o.clear()}}},xt={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"]}},Xi=(e={},o={})=>Ui({...xt,config:{...xt.config,...e},css:Wi(o)}),qi=(e,o)=>{var x;const r=e(),i=document.querySelector(`.${(x=r.css)==null?void 0:x.body[0]}`);if(!i)return r.frame;const{width:n,height:l}=i.getBoundingClientRect(),c=n/l,d=o.width/o.height;let p,h,u=0,f=0;return c>d?(p=l*d,h=l,f=(n-p)/2):(p=n,h=n*(o.height/o.width),u=(l-h)/2),{width:p,height:h,left:f,top:u}},Ki=(e,o,r)=>{const[i,n]=o,l=i+e>r.width?(r.width-e)/2:i,c=n+e>r.height?(r.height-e)/2:n;return[l,c]},Zi=(e,o)=>{const{config:r}=e(),i=Math.min(o.width,o.height)-r.framePadding*2,n=r.portalSize>i?i:r.portalSize;if(Array.isArray(r.portalPosition)&&r.portalPosition.length===2){const[l,c]=Ki(n,r.portalPosition,o);return{left:l,top:c,size:n}}return r.portalPosition==="center"?{size:n,left:(o.width-n)/2,top:(o.height-n)/2}:{left:0,top:0,size:n}};var te=(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))(te||{});const Ji=e=>{var i;const o=e(),r=document.createElement("span");return V(r,(i=o.css)==null?void 0:i.handlerMove),r.setAttribute("data-action",te.MOVE),r},Qi=e=>{var i;const o=e(),r=document.createElement("span");return V(r,(i=o.css)==null?void 0:i.handlerResizeBottomLeft),r.setAttribute("data-action",te.RESIZE_BL),r},en=e=>{var i;const o=e(),r=document.createElement("span");return V(r,(i=o.css)==null?void 0:i.handlerResizeBottomRight),r.setAttribute("data-action",te.RESIZE_BR),r},tn=e=>{var i;const o=e(),r=document.createElement("span");return V(r,(i=o.css)==null?void 0:i.handlerResizeTopLeft),r.setAttribute("data-action",te.RESIZE_TL),r},on=e=>{var i;const o=e(),r=document.createElement("span");return V(r,(i=o.css)==null?void 0:i.handlerResizeTopRight),r.setAttribute("data-action",te.RESIZE_TR),r},rn=e=>{var i;const o=e(),r=document.createElement("img");return V(r,(i=o.css)==null?void 0:i.previewImage),r},nn=e=>{var i;const o=e(),r=document.createElement("div");return V(r,(i=o.css)==null?void 0:i.preview),r.appendChild(rn(e)),r},an=e=>{var i;const o=e(),r=document.createElement("div");return V(r,(i=o.css)==null?void 0:i.portal),r.appendChild(nn(e)),r.appendChild(Ji(e)),r.appendChild(tn(e)),r.appendChild(on(e)),r.appendChild(Qi(e)),r.appendChild(en(e)),r},ln=e=>{var i;const o=e(),r=document.createElement("div");return V(r,(i=o.css)==null?void 0:i.portalArea),r.appendChild(an(e)),r},dn=e=>{var i;const o=e(),r=document.createElement("img");return V(r,(i=o.css)==null?void 0:i.sourceImage),r.setAttribute("alt","source"),r.setAttribute("crossOrigin","anonymous"),r.setAttribute("draggable","false"),r.setAttribute("src",o.sourceBase64),r},cn=e=>{var i;const o=e(),r=document.createElement("div");return V(r,(i=o.css)==null?void 0:i.body),r.appendChild(dn(e)),r.appendChild(ln(e)),r},sn=(e,o)=>{var n;const r=e(),i=document.createElement("div");return V(i,(n=r.css)==null?void 0:n.applyButton),i.setAttribute("role","button"),i.innerText=r.config.applyButtonLabel,i.addEventListener("click",o),i},pn=(e,o)=>{var n;const r=e(),i=document.createElement("div");return V(i,(n=r.css)==null?void 0:n.cancelButton),i.setAttribute("role","button"),i.innerText=r.config.cancelButtonLabel,i.addEventListener("click",o),i},un=(e,o,r)=>{var l;const i=e(),n=document.createElement("div");return V(n,(l=i.css)==null?void 0:l.footer),n.appendChild(pn(e,r)),n.appendChild(sn(e,o)),n},hn=e=>{var i;const o=e(),r=document.createElement("div");return V(r,(i=o.css)==null?void 0:i.header),r},bn=(e,o,r)=>{var l;const i=e(),n=document.createElement("div");return V(n,(l=i.css)==null?void 0:l.container),n.appendChild(hn(e)),n.appendChild(cn(e)),n.appendChild(un(e,o,r)),n},gn=(e,o,r)=>{var l;const i=e(),n=document.createElement("div");V(n,(l=i.css)==null?void 0:l.root),n.appendChild(bn(e,o,r)),document.body.appendChild(n)},fn=e=>{const o=document.createElement("input");return o.style.display="none",o.setAttribute("type","file"),o.setAttribute("accept","image/x-png,image/jpeg"),o.addEventListener("change",e,!1),document.body.appendChild(o),o},je=new Map,xn={header:"header",sourceImage:"sourceImage",portalArea:"portalArea",portal:"portal",previewImage:"previewImage"},ue=(e,o)=>{if(je.has(e))return je.get(e);if(!o)return null;const r=o[xn[e]],i=document.querySelector(`.${r[0]}`);return je.set(e,i),i},On=()=>{je.clear()},$n=()=>{je.clear()},Sn=(e,o)=>{const r=ue("header",o.css);r&&(r.innerText=e)},yn=(e,o)=>{const r=ue("sourceImage",o.css);r&&(r.setAttribute("src",e),r.style.height=`${o.frame.height}px`,r.style.width=`${o.frame.width}px`,r.style.left=`${o.frame.left}px`,r.style.top=`${o.frame.top}px`);const i=ue("portalArea",o.css);i&&(i.style.height=`${o.frame.height}px`,i.style.width=`${o.frame.width}px`,i.style.left=`${o.frame.left}px`,i.style.top=`${o.frame.top}px`);const n=ue("portal",o.css);n&&(n.style.width=`${o.portal.size}px`,n.style.height=`${o.portal.size}px`,n.style.left=`${o.portal.left}px`,n.style.top=`${o.portal.top}px`);const l=ue("previewImage",o.css);l&&(l.setAttribute("src",e),l.style.height=`${o.frame.height}px`,l.style.width=`${o.frame.width}px`,l.style.marginLeft=`-${o.portal.left}px`,l.style.marginTop=`-${o.portal.top}px`)},vn=(e,o)=>{const r=ue("portal",o.css);r&&(r.style.left=`${e.left}px`,r.style.top=`${e.top}px`,r.style.width=`${e.size}px`,r.style.height=`${e.size}px`);const i=ue("previewImage",o.css);i&&(i.style.marginLeft=`-${e.left}px`,i.style.marginTop=`-${e.top}px`)},it=1,mn=e=>{var k,S;const o=e(),r=document.createElement("canvas"),i=o.frame.width||it,n=o.frame.height||it,l=o.sourceWidth/i,c=o.sourceHeight/n,d=o.portal.left*l,p=o.portal.top*c,h=Math.max(o.portal.size*Math.min(l,c),it),u=o.config.outputSize>0?o.config.outputSize:h;r.width=u,r.height=u;const f=document.querySelector(`.${(k=o.css)==null?void 0:k.sourceImage[0]}`);f&&((S=r.getContext("2d"))==null||S.drawImage(f,d,p,h,h,0,0,u,u));const x=r.toDataURL(`image/${o.config.type}`,o.config.compression);return new Promise(($,y)=>{try{r.toBlob(O=>{if(r.remove(),!O){y(new Error(`Failed to create blob for type: image/${o.config.type}`));return}$([x,O])},`image/${o.config.type}`,o.config.compression)}catch(O){r.remove(),y(O)}})},Cn=(e,o,r)=>{const{emitted:i,portal:n,frame:l,config:c}=o();let d=i.left-i.X+e.clientX,p=i.top-i.Y+e.clientY;const h=c.framePadding,u=l.width-c.framePadding-n.size,f=c.framePadding,x=l.height-c.framePadding-n.size;d<h&&(d=h),d>u&&(d=u),p<f&&(p=f),p>x&&(p=x),r({portal:{...n,left:d,top:p}})},wn=(e,o,r)=>{const{action:i,emitted:n,portal:l,frame:c,config:d}=o(),p=e.pageX-n.X,h=e.pageY-n.Y;switch(i){case te.RESIZE_BR:{let u=n.size+Math.max(p,h);return u<d.minPortalSize&&(u=d.minPortalSize),n.top+u>c.height-d.framePadding&&(u=c.height-n.top-d.framePadding),n.left+u>c.width-d.framePadding&&(u=c.width-n.left-d.framePadding),r({portal:{...l,size:u}})}case te.RESIZE_TR:{let u=p+h>0?n.size+p:n.size-h,f=p+h>0?n.top-p:n.top+h;return u<d.minPortalSize&&(f=n.top+n.size-d.minPortalSize,u=d.minPortalSize),n.left+u>c.width-d.framePadding&&(u=c.width-n.left-d.framePadding,f=n.top-c.width+n.left+n.size),f<d.framePadding&&(u=n.top+n.size,f=d.framePadding),r({portal:{...l,top:f,size:u}})}case te.RESIZE_TL:{const u=Math.min(p,h);let f=n.size-u,x=n.left+u,k=n.top+u;if(f<d.minPortalSize){const S=n.size-d.minPortalSize;f=d.minPortalSize,x=n.left+S,k=n.top+S}if(k<d.framePadding){const S=d.framePadding-k;k=d.framePadding,x=x+S,f=f-S}if(x<d.framePadding){const S=d.framePadding-x;x=d.framePadding,k=k+S,f=f-S}return r({portal:{...l,top:k,left:x,size:f}})}case te.RESIZE_BL:{let u=p+h>0?n.size+h:n.size-p,f=p+h>0?n.left-h:n.left+p;return u<d.minPortalSize&&(f=n.left+n.size-d.minPortalSize,u=d.minPortalSize),u+n.top>c.height-d.framePadding&&(f=n.left-c.height+n.top+n.size,u=c.height-n.top-d.framePadding),f<d.framePadding&&(f=d.framePadding,u=n.left+n.size-d.framePadding),r({portal:{...l,left:f,size:u}})}default:return}},Ft=e=>{if("touches"in e&&e.touches.length>0){const r=e.touches[0];return{clientX:r.clientX,clientY:r.clientY,pageX:r.pageX,pageY:r.pageY}}if("changedTouches"in e&&e.changedTouches.length>0){const r=e.changedTouches[0];return{clientX:r.clientX,clientY:r.clientY,pageX:r.pageX,pageY:r.pageY}}const o=e;return{clientX:o.clientX,clientY:o.clientY,pageX:o.pageX,pageY:o.pageY}},Rn=(e,o)=>{var x,k,S;const r=e(),i=document.querySelector(`.${(x=r.css)==null?void 0:x.portal[0]}`),n=document.querySelector(`.${(k=r.css)==null?void 0:k.portalArea[0]}`),l=document.querySelector(`.${(S=r.css)==null?void 0:S.root[0]}`);let c=null,d=null;const p=$=>{$.preventDefault();const{portal:y}=e(),O=Ft($);if($.target){const L=$.target.getAttribute("data-action"),b={X:O.pageX,Y:O.pageY,left:y.left,top:y.top,size:y.size};o({action:L,emitted:b})}},h=()=>{const{action:$}=e();c!==null&&(cancelAnimationFrame(c),c=null),d=null,$&&o({action:null})},u=()=>{if(c=null,!d)return;const $=d;d=null;const{action:y}=e();if(y)switch(y){case te.MOVE:Cn($,e,o);break;default:wn($,e,o)}},f=$=>{const{action:y}=e();y&&($.preventDefault(),d=Ft($),c===null&&(c=requestAnimationFrame(u)))};return l&&(l.addEventListener("mouseup",h),l.addEventListener("touchend",h),l.addEventListener("touchcancel",h)),i&&(i.addEventListener("mousedown",p),i.addEventListener("touchstart",p,{passive:!1})),n&&(n.addEventListener("mousemove",f),n.addEventListener("touchmove",f,{passive:!1})),()=>{c!==null&&cancelAnimationFrame(c),l&&(l.removeEventListener("mouseup",h),l.removeEventListener("touchend",h),l.removeEventListener("touchcancel",h)),i&&(i.removeEventListener("mousedown",p),i.removeEventListener("touchstart",p)),n&&(n.removeEventListener("mousemove",f),n.removeEventListener("touchmove",f))}},Bt=1024*1024,kn=(e,o)=>{if(!o.allowedTypes.includes(e.type))return`Invalid file type "${e.type}". Allowed types: ${o.allowedTypes.join(", ")}`;if(o.maxFileSize>0&&e.size>o.maxFileSize){const r=(o.maxFileSize/Bt).toFixed(2);return`File size (${(e.size/Bt).toFixed(2)}MB) exceeds maximum allowed size (${r}MB)`}return null},Ln=(e,o,r,i,n,l,c)=>{const d=O=>{c?c(O):console.error(`HqCropper: ${O}`)};if(!e.target.files||e.target.files.length===0){d("Can't read file input");return}const p=e.target.files[0],{config:h}=o(),u=kn(p,h);if(u){d(u),e.target.value="";return}const f=new FileReader;let x=null;const k=()=>{var b;const O=o(),L=document.querySelector(`.${(b=O.css)==null?void 0:b.root[0]}`);L&&(L.remove(),document.removeEventListener("keydown",S),x==null||x(),$n(),l(),r(xt))},S=O=>{O.key==="Escape"&&o().sourceBase64&&$(O)},$=O=>{O.preventDefault(),k()},y=O=>{O.preventDefault();const L=o();mn(o).then(([b,z])=>{i(b,z,L),$(O)}).catch(b=>{d(b instanceof Error?b.message:"Failed to crop image")})};f.onload=O=>{const L=new Image;if(!O.target||typeof O.target.result!="string"){d("Can't load result image");return}L.src=O.target.result,L.onerror=()=>{d("Failed to load image")},L.onload=()=>{var j;gn(o,y,$),On(),n("fileName",Sn),n("sourceBase64",yn),n("portal",vn);const b=qi(o,L),z=Zi(o,b);r({frame:b,portal:z,fileName:p.name,sourceBase64:(j=O.target)==null?void 0:j.result,sourceHeight:L.height,sourceWidth:L.width}),x=Rn(o,r),document.addEventListener("keydown",S)}},f.onerror=()=>{d("Failed to read file")},f.readAsDataURL(p),e.target.value=""},zn=(e,o,r,i)=>{const{getState:n,setState:l,subscribe:c,unsubscribeAll:d}=Xi(o,r),p=fn(h=>Ln(h,n,l,e,c,d,i));return{open:()=>p.click()}},ae={portalSize:200,outputSize:400,compression:.9,type:"jpeg",maxFileSize:10*1024*1024,allowedTypes:["image/jpeg","image/png","image/webp"],applyLabel:"Apply",cancelLabel:"Cancel"},Yt="vacano-image-cropper-styles",Pn=`
|
|
1016
|
+
`,qi=e=>{let o=5381;for(let r=0;r<e.length;r++)o=(o<<5)+o^e.charCodeAt(r);return Math.abs(o).toString(36)},V=e=>`hq-cropper__${qi(e)}`,W=e=>e||[],U=(e,o)=>{if(o)for(const r of o)e.classList.add(r)},Ki=e=>{const o={applyButton:[V("applyButton"),...W(e.applyButton)],cancelButton:[V("cancelButton"),...W(e.cancelButton)],container:[V("container"),...W(e.container)],handlerMove:[V("handlerMove"),...W(e.handlerMove)],handlerResizeTopLeft:[V("handlerResizeTopLeft"),...W(e.handlerResizeTopLeft)],handlerResizeTopRight:[V("handlerResizeTopRight"),...W(e.handlerResizeTopRight)],handlerResizeBottomLeft:[V("handlerResizeBottomLeft"),...W(e.handlerResizeBottomLeft)],handlerResizeBottomRight:[V("handlerResizeBottomRight"),...W(e.handlerResizeBottomRight)],sourceImage:[V("sourceImage"),...W(e.sourceImage)],portalArea:[V("portalArea"),...W(e.portalArea)],previewImage:[V("previewImage"),...W(e.previewImage)],body:[V("body"),...W(e.body)],header:[V("header"),...W(e.header)],footer:[V("footer"),...W(e.footer)],portal:[V("portal"),...W(e.portal)],preview:[V("preview"),...W(e.preview)],root:[V("root"),...W(e.root)]},r=`
|
|
1017
|
+
${Ni(o.applyButton[0])}
|
|
1018
|
+
${Ii(o.body[0])}
|
|
1019
|
+
${Ai(o.cancelButton[0])}
|
|
1020
|
+
${Di(o.container[0])}
|
|
1021
|
+
${_i(o.footer[0])}
|
|
1022
|
+
${Mi(o.header[0])}
|
|
1023
|
+
${Fi(o.handlerMove[0])}
|
|
1024
|
+
${Bi(o.portalArea[0])}
|
|
1025
|
+
${Yi(o.portal[0])}
|
|
1026
|
+
${Hi(o.previewImage[0])}
|
|
1027
|
+
${Gi(o.preview[0])}
|
|
1028
|
+
${Ge(o.handlerResizeBottomLeft[0],"bl")}
|
|
1029
|
+
${Ge(o.handlerResizeBottomRight[0],"br")}
|
|
1030
|
+
${Ge(o.handlerResizeTopLeft[0],"tl")}
|
|
1031
|
+
${Ge(o.handlerResizeTopRight[0],"tr")}
|
|
1032
|
+
${Ui(o.root[0])}
|
|
1033
|
+
${Xi(o.sourceImage[0])}
|
|
1034
|
+
`,i=document.createElement("style");return i.innerHTML=r,document.getElementsByTagName("head")[0].prepend(i),o};let Zi=0;const Ji=e=>{const o=new Map,r=new Proxy({...e},{set(i,n,l){return Reflect.set(i,n,l),(o.get(n)||[]).forEach(c=>c.action(l,i,n)),!0}});return{getState:()=>({...r}),setState:i=>{for(const n of Object.keys(i)){const l=i[n];l!==void 0&&(r[n]=l)}},subscribe:(i,n)=>{const l=String(++Zi),c=o.get(i)||[];return o.set(i,[...c,{action:n,id:l}]),l},unsubscribe:i=>{for(const[n,l]of o.entries()){const c=l.filter(d=>d.id!==i);if(c.length!==l.length){o.set(n,c);return}}},unsubscribeAll:()=>{o.clear()}}},St={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"]}},Qi=(e={},o={})=>Ji({...St,config:{...St.config,...e},css:Ki(o)}),en=(e,o)=>{var O;const r=e(),i=document.querySelector(`.${(O=r.css)==null?void 0:O.body[0]}`);if(!i)return r.frame;const{width:n,height:l}=i.getBoundingClientRect(),c=n/l,d=o.width/o.height;let p,h,u=0,f=0;return c>d?(p=l*d,h=l,f=(n-p)/2):(p=n,h=n*(o.height/o.width),u=(l-h)/2),{width:p,height:h,left:f,top:u}},tn=(e,o,r)=>{const[i,n]=o,l=i+e>r.width?(r.width-e)/2:i,c=n+e>r.height?(r.height-e)/2:n;return[l,c]},on=(e,o)=>{const{config:r}=e(),i=Math.min(o.width,o.height)-r.framePadding*2,n=r.portalSize>i?i:r.portalSize;if(Array.isArray(r.portalPosition)&&r.portalPosition.length===2){const[l,c]=tn(n,r.portalPosition,o);return{left:l,top:c,size:n}}return r.portalPosition==="center"?{size:n,left:(o.width-n)/2,top:(o.height-n)/2}:{left:0,top:0,size:n}};var te=(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))(te||{});const rn=e=>{var i;const o=e(),r=document.createElement("span");return U(r,(i=o.css)==null?void 0:i.handlerMove),r.setAttribute("data-action",te.MOVE),r},nn=e=>{var i;const o=e(),r=document.createElement("span");return U(r,(i=o.css)==null?void 0:i.handlerResizeBottomLeft),r.setAttribute("data-action",te.RESIZE_BL),r},an=e=>{var i;const o=e(),r=document.createElement("span");return U(r,(i=o.css)==null?void 0:i.handlerResizeBottomRight),r.setAttribute("data-action",te.RESIZE_BR),r},ln=e=>{var i;const o=e(),r=document.createElement("span");return U(r,(i=o.css)==null?void 0:i.handlerResizeTopLeft),r.setAttribute("data-action",te.RESIZE_TL),r},dn=e=>{var i;const o=e(),r=document.createElement("span");return U(r,(i=o.css)==null?void 0:i.handlerResizeTopRight),r.setAttribute("data-action",te.RESIZE_TR),r},cn=e=>{var i;const o=e(),r=document.createElement("img");return U(r,(i=o.css)==null?void 0:i.previewImage),r},sn=e=>{var i;const o=e(),r=document.createElement("div");return U(r,(i=o.css)==null?void 0:i.preview),r.appendChild(cn(e)),r},pn=e=>{var i;const o=e(),r=document.createElement("div");return U(r,(i=o.css)==null?void 0:i.portal),r.appendChild(sn(e)),r.appendChild(rn(e)),r.appendChild(ln(e)),r.appendChild(dn(e)),r.appendChild(nn(e)),r.appendChild(an(e)),r},un=e=>{var i;const o=e(),r=document.createElement("div");return U(r,(i=o.css)==null?void 0:i.portalArea),r.appendChild(pn(e)),r},hn=e=>{var i;const o=e(),r=document.createElement("img");return U(r,(i=o.css)==null?void 0:i.sourceImage),r.setAttribute("alt","source"),r.setAttribute("crossOrigin","anonymous"),r.setAttribute("draggable","false"),r.setAttribute("src",o.sourceBase64),r},bn=e=>{var i;const o=e(),r=document.createElement("div");return U(r,(i=o.css)==null?void 0:i.body),r.appendChild(hn(e)),r.appendChild(un(e)),r},gn=(e,o)=>{var n;const r=e(),i=document.createElement("div");return U(i,(n=r.css)==null?void 0:n.applyButton),i.setAttribute("role","button"),i.innerText=r.config.applyButtonLabel,i.addEventListener("click",o),i},fn=(e,o)=>{var n;const r=e(),i=document.createElement("div");return U(i,(n=r.css)==null?void 0:n.cancelButton),i.setAttribute("role","button"),i.innerText=r.config.cancelButtonLabel,i.addEventListener("click",o),i},xn=(e,o,r)=>{var l;const i=e(),n=document.createElement("div");return U(n,(l=i.css)==null?void 0:l.footer),n.appendChild(fn(e,r)),n.appendChild(gn(e,o)),n},On=e=>{var i;const o=e(),r=document.createElement("div");return U(r,(i=o.css)==null?void 0:i.header),r},$n=(e,o,r)=>{var l;const i=e(),n=document.createElement("div");return U(n,(l=i.css)==null?void 0:l.container),n.appendChild(On(e)),n.appendChild(bn(e)),n.appendChild(xn(e,o,r)),n},Sn=(e,o,r)=>{var l;const i=e(),n=document.createElement("div");U(n,(l=i.css)==null?void 0:l.root),n.appendChild($n(e,o,r)),document.body.appendChild(n)},yn=e=>{const o=document.createElement("input");return o.style.display="none",o.setAttribute("type","file"),o.setAttribute("accept","image/x-png,image/jpeg"),o.addEventListener("change",e,!1),document.body.appendChild(o),o},Te=new Map,vn={header:"header",sourceImage:"sourceImage",portalArea:"portalArea",portal:"portal",previewImage:"previewImage"},he=(e,o)=>{if(Te.has(e))return Te.get(e);if(!o)return null;const r=o[vn[e]],i=document.querySelector(`.${r[0]}`);return Te.set(e,i),i},mn=()=>{Te.clear()},wn=()=>{Te.clear()},Cn=(e,o)=>{const r=he("header",o.css);r&&(r.innerText=e)},Rn=(e,o)=>{const r=he("sourceImage",o.css);r&&(r.setAttribute("src",e),r.style.height=`${o.frame.height}px`,r.style.width=`${o.frame.width}px`,r.style.left=`${o.frame.left}px`,r.style.top=`${o.frame.top}px`);const i=he("portalArea",o.css);i&&(i.style.height=`${o.frame.height}px`,i.style.width=`${o.frame.width}px`,i.style.left=`${o.frame.left}px`,i.style.top=`${o.frame.top}px`);const n=he("portal",o.css);n&&(n.style.width=`${o.portal.size}px`,n.style.height=`${o.portal.size}px`,n.style.left=`${o.portal.left}px`,n.style.top=`${o.portal.top}px`);const l=he("previewImage",o.css);l&&(l.setAttribute("src",e),l.style.height=`${o.frame.height}px`,l.style.width=`${o.frame.width}px`,l.style.marginLeft=`-${o.portal.left}px`,l.style.marginTop=`-${o.portal.top}px`)},kn=(e,o)=>{const r=he("portal",o.css);r&&(r.style.left=`${e.left}px`,r.style.top=`${e.top}px`,r.style.width=`${e.size}px`,r.style.height=`${e.size}px`);const i=he("previewImage",o.css);i&&(i.style.marginLeft=`-${e.left}px`,i.style.marginTop=`-${e.top}px`)},at=1,Ln=e=>{var k,y;const o=e(),r=document.createElement("canvas"),i=o.frame.width||at,n=o.frame.height||at,l=o.sourceWidth/i,c=o.sourceHeight/n,d=o.portal.left*l,p=o.portal.top*c,h=Math.max(o.portal.size*Math.min(l,c),at),u=o.config.outputSize>0?o.config.outputSize:h;r.width=u,r.height=u;const f=document.querySelector(`.${(k=o.css)==null?void 0:k.sourceImage[0]}`);f&&((y=r.getContext("2d"))==null||y.drawImage(f,d,p,h,h,0,0,u,u));const O=r.toDataURL(`image/${o.config.type}`,o.config.compression);return new Promise((S,$)=>{try{r.toBlob(x=>{if(r.remove(),!x){$(new Error(`Failed to create blob for type: image/${o.config.type}`));return}S([O,x])},`image/${o.config.type}`,o.config.compression)}catch(x){r.remove(),$(x)}})},zn=(e,o,r)=>{const{emitted:i,portal:n,frame:l,config:c}=o();let d=i.left-i.X+e.clientX,p=i.top-i.Y+e.clientY;const h=c.framePadding,u=l.width-c.framePadding-n.size,f=c.framePadding,O=l.height-c.framePadding-n.size;d<h&&(d=h),d>u&&(d=u),p<f&&(p=f),p>O&&(p=O),r({portal:{...n,left:d,top:p}})},Pn=(e,o,r)=>{const{action:i,emitted:n,portal:l,frame:c,config:d}=o(),p=e.pageX-n.X,h=e.pageY-n.Y;switch(i){case te.RESIZE_BR:{let u=n.size+Math.max(p,h);return u<d.minPortalSize&&(u=d.minPortalSize),n.top+u>c.height-d.framePadding&&(u=c.height-n.top-d.framePadding),n.left+u>c.width-d.framePadding&&(u=c.width-n.left-d.framePadding),r({portal:{...l,size:u}})}case te.RESIZE_TR:{let u=p+h>0?n.size+p:n.size-h,f=p+h>0?n.top-p:n.top+h;return u<d.minPortalSize&&(f=n.top+n.size-d.minPortalSize,u=d.minPortalSize),n.left+u>c.width-d.framePadding&&(u=c.width-n.left-d.framePadding,f=n.top-c.width+n.left+n.size),f<d.framePadding&&(u=n.top+n.size,f=d.framePadding),r({portal:{...l,top:f,size:u}})}case te.RESIZE_TL:{const u=Math.min(p,h);let f=n.size-u,O=n.left+u,k=n.top+u;if(f<d.minPortalSize){const y=n.size-d.minPortalSize;f=d.minPortalSize,O=n.left+y,k=n.top+y}if(k<d.framePadding){const y=d.framePadding-k;k=d.framePadding,O=O+y,f=f-y}if(O<d.framePadding){const y=d.framePadding-O;O=d.framePadding,k=k+y,f=f-y}return r({portal:{...l,top:k,left:O,size:f}})}case te.RESIZE_BL:{let u=p+h>0?n.size+h:n.size-p,f=p+h>0?n.left-h:n.left+p;return u<d.minPortalSize&&(f=n.left+n.size-d.minPortalSize,u=d.minPortalSize),u+n.top>c.height-d.framePadding&&(f=n.left-c.height+n.top+n.size,u=c.height-n.top-d.framePadding),f<d.framePadding&&(f=d.framePadding,u=n.left+n.size-d.framePadding),r({portal:{...l,left:f,size:u}})}default:return}},Ht=e=>{if("touches"in e&&e.touches.length>0){const r=e.touches[0];return{clientX:r.clientX,clientY:r.clientY,pageX:r.pageX,pageY:r.pageY}}if("changedTouches"in e&&e.changedTouches.length>0){const r=e.changedTouches[0];return{clientX:r.clientX,clientY:r.clientY,pageX:r.pageX,pageY:r.pageY}}const o=e;return{clientX:o.clientX,clientY:o.clientY,pageX:o.pageX,pageY:o.pageY}},jn=(e,o)=>{var O,k,y;const r=e(),i=document.querySelector(`.${(O=r.css)==null?void 0:O.portal[0]}`),n=document.querySelector(`.${(k=r.css)==null?void 0:k.portalArea[0]}`),l=document.querySelector(`.${(y=r.css)==null?void 0:y.root[0]}`);let c=null,d=null;const p=S=>{S.preventDefault();const{portal:$}=e(),x=Ht(S);if(S.target){const v=S.target.getAttribute("data-action"),b={X:x.pageX,Y:x.pageY,left:$.left,top:$.top,size:$.size};o({action:v,emitted:b})}},h=()=>{const{action:S}=e();c!==null&&(cancelAnimationFrame(c),c=null),d=null,S&&o({action:null})},u=()=>{if(c=null,!d)return;const S=d;d=null;const{action:$}=e();if($)switch($){case te.MOVE:zn(S,e,o);break;default:Pn(S,e,o)}},f=S=>{const{action:$}=e();$&&(S.preventDefault(),d=Ht(S),c===null&&(c=requestAnimationFrame(u)))};return l&&(l.addEventListener("mouseup",h),l.addEventListener("touchend",h),l.addEventListener("touchcancel",h)),i&&(i.addEventListener("mousedown",p),i.addEventListener("touchstart",p,{passive:!1})),n&&(n.addEventListener("mousemove",f),n.addEventListener("touchmove",f,{passive:!1})),()=>{c!==null&&cancelAnimationFrame(c),l&&(l.removeEventListener("mouseup",h),l.removeEventListener("touchend",h),l.removeEventListener("touchcancel",h)),i&&(i.removeEventListener("mousedown",p),i.removeEventListener("touchstart",p)),n&&(n.removeEventListener("mousemove",f),n.removeEventListener("touchmove",f))}},Gt=1024*1024,En=(e,o)=>{if(!o.allowedTypes.includes(e.type))return`Invalid file type "${e.type}". Allowed types: ${o.allowedTypes.join(", ")}`;if(o.maxFileSize>0&&e.size>o.maxFileSize){const r=(o.maxFileSize/Gt).toFixed(2);return`File size (${(e.size/Gt).toFixed(2)}MB) exceeds maximum allowed size (${r}MB)`}return null},Tn=(e,o,r,i,n,l,c)=>{const d=x=>{c?c(x):console.error(`HqCropper: ${x}`)};if(!e.target.files||e.target.files.length===0){d("Can't read file input");return}const p=e.target.files[0],{config:h}=o(),u=En(p,h);if(u){d(u),e.target.value="";return}const f=new FileReader;let O=null;const k=()=>{var b;const x=o(),v=document.querySelector(`.${(b=x.css)==null?void 0:b.root[0]}`);v&&(v.remove(),document.removeEventListener("keydown",y),O==null||O(),wn(),l(),r(St))},y=x=>{x.key==="Escape"&&o().sourceBase64&&S(x)},S=x=>{x.preventDefault(),k()},$=x=>{x.preventDefault();const v=o();Ln(o).then(([b,L])=>{i(b,L,v),S(x)}).catch(b=>{d(b instanceof Error?b.message:"Failed to crop image")})};f.onload=x=>{const v=new Image;if(!x.target||typeof x.target.result!="string"){d("Can't load result image");return}v.src=x.target.result,v.onerror=()=>{d("Failed to load image")},v.onload=()=>{var j;Sn(o,$,S),mn(),n("fileName",Cn),n("sourceBase64",Rn),n("portal",kn);const b=en(o,v),L=on(o,b);r({frame:b,portal:L,fileName:p.name,sourceBase64:(j=x.target)==null?void 0:j.result,sourceHeight:v.height,sourceWidth:v.width}),O=jn(o,r),document.addEventListener("keydown",y)}},f.onerror=()=>{d("Failed to read file")},f.readAsDataURL(p),e.target.value=""},Nn=(e,o,r,i)=>{const{getState:n,setState:l,subscribe:c,unsubscribeAll:d}=Qi(o,r),p=yn(h=>Tn(h,n,l,e,c,d,i));return{open:()=>p.click()}},ae={portalSize:200,outputSize:400,compression:.9,type:"jpeg",maxFileSize:10*1024*1024,allowedTypes:["image/jpeg","image/png","image/webp"],applyLabel:"Apply",cancelLabel:"Cancel"},Vt="vacano-image-cropper-styles",In=`
|
|
1035
1035
|
.vacano-cropper-root {
|
|
1036
1036
|
background-color: rgba(0, 0, 0, 0.5);
|
|
1037
1037
|
backdrop-filter: blur(4px);
|
|
@@ -1079,22 +1079,22 @@
|
|
|
1079
1079
|
.vacano-cropper-apply-button:hover {
|
|
1080
1080
|
background-color: ${t.COLORS["iron-grey"]};
|
|
1081
1081
|
}
|
|
1082
|
-
`,
|
|
1082
|
+
`,An=()=>{if(typeof document>"u"||document.getElementById(Vt))return;const e=document.createElement("style");e.id=Vt,e.textContent=In,document.head.appendChild(e)},Dn={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"]},yo=(e={})=>{const{allowedTypes:o=ae.allowedTypes,applyLabel:r=ae.applyLabel,cancelLabel:i=ae.cancelLabel,compression:n=ae.compression,maxFileSize:l=ae.maxFileSize,onCrop:c,onError:d,outputSize:p=ae.outputSize,portalSize:h=ae.portalSize,type:u=ae.type}=e,f=g.useRef(null);return{open:g.useCallback(()=>{f.current||(An(),f.current=Nn((k,y,S)=>{y&&(c==null||c({base64:k,blob:y,state:S}))},{portalSize:h,outputSize:p,compression:n,type:u,maxFileSize:l,allowedTypes:o,applyButtonLabel:r,cancelButtonLabel:i},Dn,k=>{d==null||d({code:"CROPPER_ERROR",message:k})})),f.current.open()},[o,r,i,n,l,c,d,p,h,u])}},lt=I.newClassNameGetter("image-cropper"),_n=({allowedTypes:e,applyLabel:o,buttonLabel:r="Select Image",cancelLabel:i,className:n,classnames:l,compression:c,maxFileSize:d,onCrop:p,onError:h,outputSize:u,portalSize:f,previewSize:O=120,ref:k,type:y,value:S,...$})=>{const[x,v]=g.useState(S??null),{open:b}=yo({allowedTypes:e,applyLabel:o,cancelLabel:i,compression:c,maxFileSize:d,onCrop:L=>{v(L.base64),p==null||p(L)},onError:h,outputSize:u,portalSize:f,type:y});return a.jsxs(ji,{...$,ref:k,className:lt("container",n),children:[a.jsx(Ei,{$size:O,className:lt("preview",l==null?void 0:l.preview),children:x?a.jsx("img",{src:x,alt:"Preview"}):a.jsx(Ti,{children:"No image"})}),a.jsx(Ie,{variant:"system",onClick:b,className:lt("button",l==null?void 0:l.button),style:{width:O},children:r})]})},Wt={compact:{height:"32px",padding:"0 10px",radius:"14px",prefixSize:"16px"},default:{height:"40px",padding:"0 14px",radius:"16px",prefixSize:"20px"}},Ut={normal:{background:{static:t.alpha(t.COLORS.black,2),disabled:t.alpha(t.COLORS.black,10)},border:{static:t.alpha(t.COLORS.black,60),disabled:t.alpha(t.COLORS.black,10)},color:{static:t.COLORS.black,disabled:t.alpha(t.COLORS.black,65)},placeholder:{static:t.alpha(t.COLORS.black,40),disabled:t.alpha(t.COLORS.black,65)},focus:t.alpha(t.COLORS["iron-grey"],30)},error:{background:{static:t.alpha(t.COLORS.red,2),disabled:t.alpha(t.COLORS.red,10)},border:{static:t.alpha(t.COLORS.red,60),disabled:t.alpha(t.COLORS.red,10)},color:{static:t.COLORS.red,disabled:t.alpha(t.COLORS.red,65)},placeholder:{static:t.alpha(t.COLORS.red,40),disabled:t.alpha(t.COLORS.red,65)},focus:t.alpha(t.COLORS.red,30)}},re=e=>Ut[e]??Ut.normal,dt=e=>Wt[e]??Wt.default,Mn=s.div`
|
|
1083
1083
|
display: grid;
|
|
1084
1084
|
flex-direction: column;
|
|
1085
1085
|
gap: 2px;
|
|
1086
1086
|
width: ${e=>e.$fullWidth?"100%":"fit-content"};
|
|
1087
|
-
`,
|
|
1087
|
+
`,Fn=s(fe)`
|
|
1088
1088
|
margin-left: 6px;
|
|
1089
|
-
`,
|
|
1089
|
+
`,Bn=s.input`
|
|
1090
1090
|
flex: 1;
|
|
1091
1091
|
min-width: 0;
|
|
1092
1092
|
outline: none;
|
|
1093
1093
|
font-size: 14px;
|
|
1094
1094
|
font-weight: 500;
|
|
1095
|
-
height: ${e=>
|
|
1096
|
-
padding: ${e=>
|
|
1097
|
-
border-radius: ${e=>
|
|
1095
|
+
height: ${e=>dt(e.$size).height};
|
|
1096
|
+
padding: ${e=>dt(e.$size).padding};
|
|
1097
|
+
border-radius: ${e=>dt(e.$size).radius};
|
|
1098
1098
|
|
|
1099
1099
|
color: ${e=>re(e.$variant).color.static};
|
|
1100
1100
|
border: 1px solid ${e=>re(e.$variant).border.static};
|
|
@@ -1118,7 +1118,7 @@
|
|
|
1118
1118
|
&:focus-visible {
|
|
1119
1119
|
outline: 2px solid ${e=>re(e.$variant).focus};
|
|
1120
1120
|
}
|
|
1121
|
-
`,
|
|
1121
|
+
`,ct=I.newClassNameGetter("input"),vo=({className:e,classnames:o,disabled:r,fullWidth:i,label:n,ref:l,size:c="default",variant:d="normal",...p})=>a.jsxs(Mn,{className:ct("container",e),$fullWidth:!!i,children:[a.jsx(Fn,{variant:d,className:ct("label",o==null?void 0:o.label),children:n}),a.jsx(Bn,{...p,ref:l,disabled:r,$size:c,$variant:d,className:ct("input",o==null?void 0:o.input)})]}),Yn=s.div`
|
|
1122
1122
|
position: fixed;
|
|
1123
1123
|
inset: 0;
|
|
1124
1124
|
z-index: 1000;
|
|
@@ -1127,7 +1127,7 @@
|
|
|
1127
1127
|
justify-content: center;
|
|
1128
1128
|
background-color: ${t.alpha(t.COLORS.black,50)};
|
|
1129
1129
|
animation: ${t.KEYFRAMES.fadeIn} ${e=>e.$animated?"0.15s":"0s"} ease-out forwards;
|
|
1130
|
-
`,
|
|
1130
|
+
`,Hn=s.div`
|
|
1131
1131
|
position: relative;
|
|
1132
1132
|
z-index: 1001;
|
|
1133
1133
|
width: ${e=>e.$width};
|
|
@@ -1138,21 +1138,21 @@
|
|
|
1138
1138
|
border-radius: 16px;
|
|
1139
1139
|
box-shadow: 0 8px 32px ${t.alpha(t.COLORS.black,20)};
|
|
1140
1140
|
animation: ${t.KEYFRAMES.scaleIn} ${e=>e.$animated?"0.15s":"0s"} ease-out forwards;
|
|
1141
|
-
`,
|
|
1141
|
+
`,Xt=I.newClassNameGetter("modal"),mo=({animated:e,children:o,className:r,classnames:i,open:n,ref:l,width:c="500px",...d})=>n?ge.createPortal(a.jsx(Yn,{className:Xt("overlay",i==null?void 0:i.overlay),$animated:!!e,children:a.jsx(Hn,{...d,ref:l,className:Xt("content",r,i==null?void 0:i.content),$animated:!!e,$width:c,children:o})}),document.body):null,wo={normal:{border:t.COLORS["iron-grey"],label:t.COLORS.black},error:{border:t.COLORS.red,label:t.COLORS.red}},Gn=s.div`
|
|
1142
1142
|
display: flex;
|
|
1143
1143
|
flex-direction: column;
|
|
1144
1144
|
gap: 4px;
|
|
1145
|
-
`,
|
|
1145
|
+
`,Vn=s(fe)`
|
|
1146
1146
|
margin-left: 6px;
|
|
1147
|
-
color: ${e
|
|
1148
|
-
`,
|
|
1147
|
+
color: ${e=>wo[e.$variant].label};
|
|
1148
|
+
`,Wn=s.button`
|
|
1149
1149
|
display: flex;
|
|
1150
1150
|
flex-wrap: wrap;
|
|
1151
1151
|
align-items: center;
|
|
1152
1152
|
gap: 6px;
|
|
1153
1153
|
min-height: 44px;
|
|
1154
1154
|
padding: 8px 12px;
|
|
1155
|
-
border: 1px dashed ${e
|
|
1155
|
+
border: 1px dashed ${e=>wo[e.$variant].border};
|
|
1156
1156
|
border-radius: 8px;
|
|
1157
1157
|
background: ${t.COLORS.white};
|
|
1158
1158
|
cursor: ${e=>e.$disabled?"not-allowed":"pointer"};
|
|
@@ -1169,31 +1169,31 @@
|
|
|
1169
1169
|
${e=>e.$variant==="error"?t.COLORS.red:t.COLORS["steel-blue"]};
|
|
1170
1170
|
outline-offset: 2px;
|
|
1171
1171
|
}
|
|
1172
|
-
`,
|
|
1172
|
+
`,Un=s.span`
|
|
1173
1173
|
color: ${t.COLORS["iron-grey"]};
|
|
1174
1174
|
font-size: 14px;
|
|
1175
|
-
`,
|
|
1175
|
+
`,Xn=s.div`
|
|
1176
1176
|
display: flex;
|
|
1177
1177
|
flex-direction: column;
|
|
1178
1178
|
padding: 20px;
|
|
1179
1179
|
gap: 16px;
|
|
1180
|
-
`,
|
|
1180
|
+
`,qn=s.div`
|
|
1181
1181
|
display: flex;
|
|
1182
1182
|
align-items: center;
|
|
1183
1183
|
justify-content: space-between;
|
|
1184
|
-
`,
|
|
1184
|
+
`,Kn=s.h3`
|
|
1185
1185
|
margin: 0;
|
|
1186
1186
|
font-size: 18px;
|
|
1187
1187
|
font-weight: 600;
|
|
1188
1188
|
color: ${t.COLORS.black};
|
|
1189
|
-
`,
|
|
1189
|
+
`,Zn=s.div`
|
|
1190
1190
|
display: flex;
|
|
1191
1191
|
flex-direction: column;
|
|
1192
1192
|
gap: 4px;
|
|
1193
1193
|
min-height: 200px;
|
|
1194
1194
|
max-height: 300px;
|
|
1195
1195
|
overflow-y: auto;
|
|
1196
|
-
`,
|
|
1196
|
+
`,Jn=s.label`
|
|
1197
1197
|
display: flex;
|
|
1198
1198
|
align-items: center;
|
|
1199
1199
|
gap: 10px;
|
|
@@ -1206,10 +1206,10 @@
|
|
|
1206
1206
|
&:hover {
|
|
1207
1207
|
background-color: ${e=>e.$disabled?"transparent":t.COLORS.gray};
|
|
1208
1208
|
}
|
|
1209
|
-
`,
|
|
1209
|
+
`,Qn=s.span`
|
|
1210
1210
|
font-size: 14px;
|
|
1211
1211
|
color: ${t.COLORS.black};
|
|
1212
|
-
`,
|
|
1212
|
+
`,ea=s.div`
|
|
1213
1213
|
display: flex;
|
|
1214
1214
|
align-items: center;
|
|
1215
1215
|
justify-content: center;
|
|
@@ -1217,44 +1217,82 @@
|
|
|
1217
1217
|
color: ${t.COLORS["iron-grey"]};
|
|
1218
1218
|
font-size: 14px;
|
|
1219
1219
|
text-align: center;
|
|
1220
|
-
`,Q=
|
|
1220
|
+
`,Q=I.newClassNameGetter("multi-select"),ta=({className:e,classnames:o,disabled:r=!1,emptyMessage:i="No options found",label:n,maxVisible:l=1/0,modalTitle:c="Select options",onChange:d,options:p,placeholder:h="Select...",ref:u,searchPlaceholder:f="Search...",value:O,variant:k="normal",...y})=>{const[S,$]=g.useState(!1),[x,v]=g.useState(""),b=g.useMemo(()=>p.filter(C=>O.includes(C.value)),[p,O]),L=g.useMemo(()=>{if(!x.trim())return p;const C=x.toLowerCase().trim();return p.filter(F=>F.label.toLowerCase().includes(C))},[p,x]),j=l===1/0?b:b.slice(0,l),E=b.length-j.length,G=()=>{r||($(!0),v(""))},P=()=>{$(!1),v("")},D=C=>{O.includes(C)?d(O.filter(F=>F!==C)):d([...O,C])},N=C=>{d(O.filter(F=>F!==C))};return a.jsxs(Gn,{...y,ref:u,className:Q("container",e),children:[n&&a.jsx(Vn,{$variant:k,className:Q("label",o==null?void 0:o.trigger),children:n}),a.jsx(Wn,{type:"button",$variant:k,$disabled:r,disabled:r,onClick:G,className:Q("trigger",o==null?void 0:o.trigger),children:b.length===0?a.jsx(Un,{className:Q("placeholder",o==null?void 0:o.placeholder),children:h}):a.jsxs(a.Fragment,{children:[j.map(C=>a.jsx(Ke,{deletable:!0,onDelete:()=>N(C.value),onClick:F=>F.stopPropagation(),className:Q("chip",o==null?void 0:o.chip),children:C.label},C.value)),E>0&&a.jsxs(Ke,{variant:"gray",onClick:C=>C.stopPropagation(),className:Q("chip",o==null?void 0:o.chip),children:["+",E]})]})}),a.jsx(mo,{open:S,width:"400px",animated:!0,className:Q("modal",o==null?void 0:o.modal),children:a.jsxs(Xn,{children:[a.jsxs(qn,{children:[a.jsx(Kn,{children:c}),a.jsx(Ie,{variant:"transparent",size:"compact",icon:a.jsx(a.X,{}),onClick:P})]}),a.jsx(vo,{type:"text",value:x,onChange:C=>v(C.target.value),placeholder:f,autoFocus:!0,fullWidth:!0,className:Q("search",o==null?void 0:o.search)}),a.jsx(Zn,{className:Q("options",o==null?void 0:o.options),children:L.length===0?a.jsx(ea,{className:Q("empty",o==null?void 0:o.empty),children:i}):L.map(C=>a.jsxs(Jn,{$disabled:!!C.disabled,className:Q("option",o==null?void 0:o.option),children:[a.jsx(Je,{checked:O.includes(C.value),disabled:C.disabled,onChange:()=>D(C.value)}),a.jsx(Qn,{children:C.label})]},C.value))})]})})]})},qt={compact:{width:"36px",height:"40px",fontSize:"16px",radius:"10px",gap:"8px"},default:{width:"44px",height:"52px",fontSize:"20px",radius:"12px",gap:"10px"}},Kt={normal:{background:{static:t.alpha(t.COLORS.black,2),disabled:t.alpha(t.COLORS.black,10)},border:{static:t.alpha(t.COLORS.black,60),disabled:t.alpha(t.COLORS.black,10)},color:{static:t.COLORS.black,disabled:t.alpha(t.COLORS.black,65)},focus:t.alpha(t.COLORS["iron-grey"],30)},error:{background:{static:t.alpha(t.COLORS.red,2),disabled:t.alpha(t.COLORS.red,10)},border:{static:t.alpha(t.COLORS.red,60),disabled:t.alpha(t.COLORS.red,10)},color:{static:t.COLORS.red,disabled:t.alpha(t.COLORS.red,65)},focus:t.alpha(t.COLORS.red,30)}},Ee=e=>qt[e]??qt.default,pe=e=>Kt[e]??Kt.normal,oa=s.div`
|
|
1221
|
+
display: inline-flex;
|
|
1222
|
+
flex-direction: column;
|
|
1223
|
+
gap: 2px;
|
|
1224
|
+
`,ra=s(fe)`
|
|
1225
|
+
margin-left: 6px;
|
|
1226
|
+
`,ia=s.div`
|
|
1227
|
+
display: flex;
|
|
1228
|
+
gap: ${e=>Ee(e.$size).gap};
|
|
1229
|
+
`,na=s.input`
|
|
1230
|
+
width: ${e=>Ee(e.$size).width};
|
|
1231
|
+
height: ${e=>Ee(e.$size).height};
|
|
1232
|
+
border-radius: ${e=>Ee(e.$size).radius};
|
|
1233
|
+
font-size: ${e=>Ee(e.$size).fontSize};
|
|
1234
|
+
font-weight: 600;
|
|
1235
|
+
text-align: center;
|
|
1236
|
+
outline: none;
|
|
1237
|
+
border: 1px solid ${e=>pe(e.$variant).border.static};
|
|
1238
|
+
background-color: ${e=>pe(e.$variant).background.static};
|
|
1239
|
+
color: ${e=>pe(e.$variant).color.static};
|
|
1240
|
+
transition:
|
|
1241
|
+
border-color 0.15s ease,
|
|
1242
|
+
box-shadow 0.15s ease;
|
|
1243
|
+
|
|
1244
|
+
&:disabled {
|
|
1245
|
+
cursor: not-allowed;
|
|
1246
|
+
color: ${e=>pe(e.$variant).color.disabled};
|
|
1247
|
+
background-color: ${e=>pe(e.$variant).background.disabled};
|
|
1248
|
+
border-color: ${e=>pe(e.$variant).border.disabled};
|
|
1249
|
+
}
|
|
1250
|
+
|
|
1251
|
+
&:focus-visible {
|
|
1252
|
+
outline: 2px solid ${e=>pe(e.$variant).focus};
|
|
1253
|
+
}
|
|
1254
|
+
|
|
1255
|
+
&::selection {
|
|
1256
|
+
background-color: transparent;
|
|
1257
|
+
}
|
|
1258
|
+
`,st=I.newClassNameGetter("otp-code"),aa=({className:e,classnames:o,disabled:r,label:i,length:n=6,onChange:l,ref:c,size:d="default",value:p="",variant:h="normal",...u})=>{const f=g.useRef([]),O=g.useCallback($=>{const x=f.current[$];x&&(x.focus(),x.select())},[]),k=g.useCallback(($,x)=>{const b=x.target.value.replace(/\D/g,"").slice(-1);if(!b)return;const L=p.padEnd(n," ").split(""),j=L.findIndex(D=>D===" "||D===""),E=j!==-1?j:$;L[E]=b;const G=L.join("").replace(/ /g,"");l==null||l(G);const P=E+1;P<n&&O(P)},[p,n,l,O]),y=g.useCallback(($,x)=>{if(x.key==="Backspace"){x.preventDefault();const v=p.split("");v[$]?(v[$]="",l==null||l(v.join(""))):$>0&&(v[$-1]="",l==null||l(v.join("")),O($-1))}else x.key==="ArrowLeft"&&$>0?(x.preventDefault(),O($-1)):x.key==="ArrowRight"&&$<n-1&&(x.preventDefault(),O($+1))},[p,n,l,O]),S=g.useCallback($=>{$.preventDefault();const x=$.clipboardData.getData("text").replace(/\D/g,"").slice(0,n);if(x){l==null||l(x);const v=Math.min(x.length,n-1);O(v)}},[n,l,O]);return a.jsxs(oa,{ref:c,className:st("container",e),...u,children:[i&&a.jsx(ra,{variant:h,className:st("label",o==null?void 0:o.label),children:i}),a.jsx(ia,{$size:d,children:Array.from({length:n}).map(($,x)=>a.jsx(na,{ref:v=>{f.current[x]=v},type:"text",inputMode:"numeric",autoComplete:"one-time-code",maxLength:2,disabled:r,value:p[x]??"",onChange:v=>k(x,v),onKeyDown:v=>y(x,v),onPaste:S,onFocus:v=>v.target.select(),$size:d,$variant:h,className:st("input",o==null?void 0:o.input)},x))})]})},Zt={light:{background:t.COLORS.white,border:t.alpha(t.COLORS.black,30),title:t.COLORS.black,description:t.COLORS["iron-grey"]},dark:{background:t.alpha(t.COLORS.white,5),border:t.alpha(t.COLORS.white,30),title:t.COLORS.white,description:"#9ca3af"}},Ze=e=>Zt[e]??Zt.light,la=s.div`
|
|
1221
1259
|
display: flex;
|
|
1222
1260
|
flex-direction: column;
|
|
1223
1261
|
gap: 16px;
|
|
1224
1262
|
padding: 12px;
|
|
1225
|
-
border: 1px dashed ${({$variant:e})=>
|
|
1263
|
+
border: 1px dashed ${({$variant:e})=>Ze(e).border};
|
|
1226
1264
|
border-radius: 16px;
|
|
1227
|
-
background-color: ${({$variant:e})=>
|
|
1228
|
-
`,
|
|
1265
|
+
background-color: ${({$variant:e})=>Ze(e).background};
|
|
1266
|
+
`,da=s.div`
|
|
1229
1267
|
display: flex;
|
|
1230
1268
|
flex-direction: column;
|
|
1231
1269
|
gap: 4px;
|
|
1232
|
-
`,
|
|
1270
|
+
`,ca=s.div`
|
|
1233
1271
|
font-size: 18px;
|
|
1234
1272
|
font-weight: 600;
|
|
1235
1273
|
line-height: 1.4;
|
|
1236
|
-
color: ${({$variant:e})=>
|
|
1237
|
-
`,
|
|
1274
|
+
color: ${({$variant:e})=>Ze(e).title};
|
|
1275
|
+
`,sa=s.div`
|
|
1238
1276
|
font-size: 14px;
|
|
1239
1277
|
line-height: 1.5;
|
|
1240
|
-
color: ${({$variant:e})=>
|
|
1241
|
-
`,
|
|
1278
|
+
color: ${({$variant:e})=>Ze(e).description};
|
|
1279
|
+
`,pa=s.div`
|
|
1242
1280
|
display: flex;
|
|
1243
1281
|
flex-wrap: wrap;
|
|
1244
1282
|
gap: 8px;
|
|
1245
|
-
`,
|
|
1283
|
+
`,Ve=I.newClassNameGetter("panel"),ua=({children:e,className:o,classnames:r,description:i,ref:n,title:l,variant:c="light",...d})=>{const p=l||i;return a.jsxs(la,{...d,ref:n,className:Ve("container",o),$variant:c,children:[p&&a.jsxs(da,{children:[l&&a.jsx(ca,{className:Ve("title",r==null?void 0:r.title),$variant:c,children:l}),i&&a.jsx(sa,{className:Ve("description",r==null?void 0:r.description),$variant:c,children:i})]}),a.jsx(pa,{className:Ve("content",r==null?void 0:r.content),children:e})]})},yt={compact:{height:4,radius:2},default:{height:8,radius:4}},ha=s.div`
|
|
1246
1284
|
width: 100%;
|
|
1247
|
-
height: ${({$size:e})=>
|
|
1248
|
-
border-radius: ${({$size:e})=>
|
|
1285
|
+
height: ${({$size:e})=>yt[e].height}px;
|
|
1286
|
+
border-radius: ${({$size:e})=>yt[e].radius}px;
|
|
1249
1287
|
background-color: ${t.COLORS.gray};
|
|
1250
1288
|
overflow: hidden;
|
|
1251
|
-
`,
|
|
1289
|
+
`,ba=s.div`
|
|
1252
1290
|
height: 100%;
|
|
1253
1291
|
width: ${({$value:e})=>Math.min(100,Math.max(0,e))}%;
|
|
1254
|
-
border-radius: ${({$size:e})=>
|
|
1292
|
+
border-radius: ${({$size:e})=>yt[e].radius}px;
|
|
1255
1293
|
background-color: ${t.COLORS.black};
|
|
1256
1294
|
transition: width 0.2s ease;
|
|
1257
|
-
`,
|
|
1295
|
+
`,Jt=I.newClassNameGetter("progress"),ga=({value:e,size:o="default",className:r,classnames:i,ref:n,...l})=>a.jsx(ha,{...l,ref:n,$size:o,className:Jt("track",r,i==null?void 0:i.track),role:"progressbar","aria-valuenow":e,"aria-valuemin":0,"aria-valuemax":100,children:a.jsx(ba,{$size:o,$value:e,className:Jt("bar",i==null?void 0:i.bar)})}),Qt={normal:{box:{border:t.alpha(t.COLORS["iron-grey"],30),borderChecked:t.COLORS["iron-grey"],background:t.COLORS.white,backgroundChecked:t.COLORS.white,focusShadow:t.alpha(t.COLORS["iron-grey"],30)},dot:t.COLORS.black,label:t.COLORS.black},error:{box:{border:t.COLORS.red,borderChecked:t.COLORS.red,background:t.COLORS.white,backgroundChecked:t.COLORS.white,focusShadow:t.alpha(t.COLORS.red,30)},dot:t.COLORS.red,label:t.COLORS.red}},be=e=>Qt[e]??Qt.normal,fa=s.label`
|
|
1258
1296
|
display: inline-flex;
|
|
1259
1297
|
align-items: center;
|
|
1260
1298
|
gap: 8px;
|
|
@@ -1262,15 +1300,15 @@
|
|
|
1262
1300
|
opacity: ${e=>e.$disabled?.5:1};
|
|
1263
1301
|
|
|
1264
1302
|
&:has(input:focus-visible) > span:first-of-type {
|
|
1265
|
-
box-shadow: 0 0 0 2px ${e=>
|
|
1303
|
+
box-shadow: 0 0 0 2px ${e=>be(e.$variant).box.focusShadow};
|
|
1266
1304
|
}
|
|
1267
|
-
`,
|
|
1305
|
+
`,xa=s.input`
|
|
1268
1306
|
position: absolute;
|
|
1269
1307
|
opacity: 0;
|
|
1270
1308
|
width: 0;
|
|
1271
1309
|
height: 0;
|
|
1272
1310
|
pointer-events: none;
|
|
1273
|
-
`,
|
|
1311
|
+
`,Oa=s.span`
|
|
1274
1312
|
display: inline-flex;
|
|
1275
1313
|
align-items: center;
|
|
1276
1314
|
justify-content: center;
|
|
@@ -1279,29 +1317,29 @@
|
|
|
1279
1317
|
height: 18px;
|
|
1280
1318
|
border-radius: 50%;
|
|
1281
1319
|
border: 1.5px solid
|
|
1282
|
-
${e=>e.$checked?
|
|
1283
|
-
background-color: ${e=>e.$checked?
|
|
1320
|
+
${e=>e.$checked?be(e.$variant).box.borderChecked:be(e.$variant).box.border};
|
|
1321
|
+
background-color: ${e=>e.$checked?be(e.$variant).box.backgroundChecked:be(e.$variant).box.background};
|
|
1284
1322
|
transition:
|
|
1285
1323
|
border-color 0.15s ease,
|
|
1286
1324
|
background-color 0.15s ease,
|
|
1287
1325
|
box-shadow 0.15s ease;
|
|
1288
|
-
|
|
1326
|
+
`,$a=s.span`
|
|
1289
1327
|
width: 8px;
|
|
1290
1328
|
height: 8px;
|
|
1291
1329
|
border-radius: 50%;
|
|
1292
|
-
background-color: ${e=>
|
|
1330
|
+
background-color: ${e=>be(e.$variant).dot};
|
|
1293
1331
|
opacity: ${e=>e.$visible?1:0};
|
|
1294
1332
|
transform: ${e=>e.$visible?"scale(1)":"scale(0.5)"};
|
|
1295
1333
|
transition:
|
|
1296
1334
|
opacity 0.15s ease,
|
|
1297
1335
|
transform 0.15s ease;
|
|
1298
|
-
`,
|
|
1336
|
+
`,Sa=s.span`
|
|
1299
1337
|
font-size: 14px;
|
|
1300
1338
|
font-weight: 500;
|
|
1301
1339
|
line-height: 1.5;
|
|
1302
|
-
color: ${e=>
|
|
1340
|
+
color: ${e=>be(e.$variant).label};
|
|
1303
1341
|
user-select: none;
|
|
1304
|
-
`,
|
|
1342
|
+
`,ze=I.newClassNameGetter("radio"),mt=({checked:e,className:o,classnames:r,disabled:i,label:n,onChange:l,ref:c,variant:d="normal",...p})=>a.jsxs(fa,{className:ze("container",o),$disabled:!!i,$variant:d,children:[a.jsx(xa,{...p,ref:c,type:"radio",className:ze("input",r==null?void 0:r.input),checked:e,disabled:i,onChange:l}),a.jsx(Oa,{className:ze("box",r==null?void 0:r.box),$checked:e,$variant:d,children:a.jsx($a,{className:ze("dot",r==null?void 0:r.dot),$visible:e,$variant:d})}),n&&a.jsx(Sa,{className:ze("label",r==null?void 0:r.label),$variant:d,children:n})]}),eo={normal:{border:{static:t.alpha(t.COLORS.black,20),hover:t.alpha(t.COLORS.black,40),active:t.alpha(t.COLORS.black,40),disabled:t.alpha(t.COLORS.black,10)},borderChecked:t.COLORS.black,background:{static:t.COLORS.white,hover:t.COLORS.white,active:t.COLORS.white,disabled:t.alpha(t.COLORS.black,5)},backgroundChecked:t.alpha(t.COLORS.black,5),focusRing:t.alpha(t.COLORS.black,20),label:{static:t.COLORS.black,hover:t.COLORS.black,active:t.COLORS.black,disabled:t.alpha(t.COLORS.black,40)},description:{static:t.alpha(t.COLORS.black,60),hover:t.alpha(t.COLORS.black,60),active:t.alpha(t.COLORS.black,60),disabled:t.alpha(t.COLORS.black,30)}},error:{border:{static:t.COLORS.red,hover:t.COLORS.red,active:t.COLORS.red,disabled:t.alpha(t.COLORS.red,30)},borderChecked:t.COLORS.red,background:{static:t.COLORS.white,hover:t.COLORS.white,active:t.COLORS.white,disabled:t.alpha(t.COLORS.red,5)},backgroundChecked:t.alpha(t.COLORS.red,5),focusRing:t.alpha(t.COLORS.red,20),label:{static:t.COLORS.red,hover:t.COLORS.red,active:t.COLORS.red,disabled:t.alpha(t.COLORS.red,40)},description:{static:t.alpha(t.COLORS.red,70),hover:t.alpha(t.COLORS.red,70),active:t.alpha(t.COLORS.red,70),disabled:t.alpha(t.COLORS.red,40)}}},se=e=>eo[e]??eo.normal,ya=s.label`
|
|
1305
1343
|
display: grid;
|
|
1306
1344
|
grid-template-columns: auto 1fr;
|
|
1307
1345
|
align-items: start;
|
|
@@ -1330,7 +1368,7 @@
|
|
|
1330
1368
|
.vacano_radio_container {
|
|
1331
1369
|
pointer-events: none;
|
|
1332
1370
|
}
|
|
1333
|
-
`,
|
|
1371
|
+
`,va=s.input`
|
|
1334
1372
|
position: absolute;
|
|
1335
1373
|
width: 1px;
|
|
1336
1374
|
height: 1px;
|
|
@@ -1340,12 +1378,12 @@
|
|
|
1340
1378
|
clip: rect(0, 0, 0, 0);
|
|
1341
1379
|
white-space: nowrap;
|
|
1342
1380
|
border: 0;
|
|
1343
|
-
`,
|
|
1381
|
+
`,ma=s.div`
|
|
1344
1382
|
display: flex;
|
|
1345
1383
|
flex-direction: column;
|
|
1346
1384
|
gap: 2px;
|
|
1347
1385
|
min-width: 0;
|
|
1348
|
-
`,
|
|
1386
|
+
`,wa=s.span`
|
|
1349
1387
|
font-size: 14px;
|
|
1350
1388
|
font-weight: 500;
|
|
1351
1389
|
line-height: 1.4;
|
|
@@ -1354,7 +1392,7 @@
|
|
|
1354
1392
|
label[data-disabled='true'] & {
|
|
1355
1393
|
color: ${e=>se(e.$variant).label.disabled};
|
|
1356
1394
|
}
|
|
1357
|
-
`,
|
|
1395
|
+
`,Ca=s.span`
|
|
1358
1396
|
font-size: 12px;
|
|
1359
1397
|
font-weight: 400;
|
|
1360
1398
|
line-height: 1.4;
|
|
@@ -1363,29 +1401,29 @@
|
|
|
1363
1401
|
label[data-disabled='true'] & {
|
|
1364
1402
|
color: ${e=>se(e.$variant).description.disabled};
|
|
1365
1403
|
}
|
|
1366
|
-
`,
|
|
1404
|
+
`,We=I.newClassNameGetter("radio-card"),Ra=({checked:e,className:o,classnames:r,description:i,disabled:n,fullWidth:l=!1,label:c,onChange:d,ref:p,variant:h="normal",...u})=>a.jsxs(ya,{className:We("container",o),$checked:e,$disabled:!!n,$fullWidth:l,$variant:h,"data-disabled":n,children:[a.jsx(va,{...u,ref:p,type:"radio",checked:e,disabled:n,onChange:d}),a.jsx(mt,{className:r==null?void 0:r.radio,checked:e,disabled:n,variant:h,onChange:()=>{},tabIndex:-1,"aria-hidden":!0}),a.jsxs(ma,{className:We("content",r==null?void 0:r.content),children:[a.jsx(wa,{className:We("label",r==null?void 0:r.label),$variant:h,children:c}),i&&a.jsx(Ca,{className:We("description",r==null?void 0:r.description),$variant:h,children:i})]})]}),to={label:{color:t.COLORS.black,disabledColor:t.alpha(t.COLORS.black,40)}},ka=s.div`
|
|
1367
1405
|
display: flex;
|
|
1368
1406
|
flex-direction: column;
|
|
1369
1407
|
gap: 8px;
|
|
1370
|
-
`,
|
|
1408
|
+
`,La=s.span`
|
|
1371
1409
|
font-size: 13px;
|
|
1372
1410
|
font-weight: 500;
|
|
1373
1411
|
line-height: 1.5;
|
|
1374
|
-
color: ${e=>e.$disabled?
|
|
1412
|
+
color: ${e=>e.$disabled?to.label.disabledColor:to.label.color};
|
|
1375
1413
|
margin-bottom: 4px;
|
|
1376
|
-
|
|
1414
|
+
`,za=s.div`
|
|
1377
1415
|
display: flex;
|
|
1378
1416
|
flex-direction: column;
|
|
1379
1417
|
gap: 12px;
|
|
1380
|
-
`,
|
|
1418
|
+
`,pt=I.newClassNameGetter("radio-group"),Pa=({className:e,classnames:o,disabled:r,label:i,name:n,onChange:l,options:c,ref:d,value:p,...h})=>a.jsxs(ka,{...h,ref:d,className:pt("container",e),children:[i&&a.jsx(La,{className:pt("label",o==null?void 0:o.label),$disabled:r,children:i}),a.jsx(za,{className:pt("options",o==null?void 0:o.options),children:c.map(u=>a.jsx(mt,{className:o==null?void 0:o.radio,name:n,checked:p===u.value,label:u.label,disabled:r,onChange:()=>l(u.value)},u.value))})]}),ut=40,Pe=4,oo={compact:{height:"32px",padding:"0 10px",radius:"14px"},default:{height:"40px",padding:"0 14px",radius:"16px"}},ro={normal:{background:{static:t.alpha(t.COLORS.black,2),disabled:t.alpha(t.COLORS.black,10)},border:{static:t.alpha(t.COLORS.black,60),disabled:t.alpha(t.COLORS.black,10)},color:{static:t.COLORS.black,disabled:t.alpha(t.COLORS.black,65)},placeholder:t.alpha(t.COLORS.black,40),focus:t.alpha(t.COLORS["iron-grey"],30)},error:{background:{static:t.alpha(t.COLORS.red,2),disabled:t.alpha(t.COLORS.red,10)},border:{static:t.alpha(t.COLORS.red,60),disabled:t.alpha(t.COLORS.red,10)},color:{static:t.COLORS.red,disabled:t.alpha(t.COLORS.red,65)},placeholder:t.alpha(t.COLORS.red,40),focus:t.alpha(t.COLORS.red,30)}},ht=e=>oo[e]??oo.default,le=e=>ro[e]??ro.normal,ja=s.div`
|
|
1381
1419
|
position: relative;
|
|
1382
1420
|
display: grid;
|
|
1383
1421
|
gap: 2px;
|
|
1384
1422
|
min-width: 180px;
|
|
1385
1423
|
width: ${e=>e.$fullWidth?"100%":"fit-content"};
|
|
1386
|
-
`,
|
|
1424
|
+
`,Ea=s(fe)`
|
|
1387
1425
|
margin-left: 6px;
|
|
1388
|
-
`,
|
|
1426
|
+
`,Ta=s.button`
|
|
1389
1427
|
display: flex;
|
|
1390
1428
|
align-items: center;
|
|
1391
1429
|
justify-content: space-between;
|
|
@@ -1396,9 +1434,9 @@
|
|
|
1396
1434
|
font-weight: 500;
|
|
1397
1435
|
text-align: left;
|
|
1398
1436
|
cursor: ${e=>e.$disabled?"not-allowed":"pointer"};
|
|
1399
|
-
height: ${e=>
|
|
1400
|
-
padding: ${e=>
|
|
1401
|
-
border-radius: ${e=>
|
|
1437
|
+
height: ${e=>ht(e.$size).height};
|
|
1438
|
+
padding: ${e=>ht(e.$size).padding};
|
|
1439
|
+
border-radius: ${e=>ht(e.$size).radius};
|
|
1402
1440
|
|
|
1403
1441
|
color: ${e=>e.$hasValue?e.$disabled?le(e.$variant).color.disabled:le(e.$variant).color.static:le(e.$variant).placeholder};
|
|
1404
1442
|
border: 1px solid
|
|
@@ -1408,35 +1446,35 @@
|
|
|
1408
1446
|
&:focus-visible {
|
|
1409
1447
|
outline: 2px solid ${e=>le(e.$variant).focus};
|
|
1410
1448
|
}
|
|
1411
|
-
`,
|
|
1449
|
+
`,Na=s.span`
|
|
1412
1450
|
flex: 1;
|
|
1413
1451
|
min-width: 0;
|
|
1414
1452
|
overflow: hidden;
|
|
1415
1453
|
text-overflow: ellipsis;
|
|
1416
1454
|
white-space: nowrap;
|
|
1417
|
-
`,
|
|
1455
|
+
`,Ia=s.span`
|
|
1418
1456
|
display: flex;
|
|
1419
1457
|
align-items: center;
|
|
1420
1458
|
justify-content: center;
|
|
1421
1459
|
flex-shrink: 0;
|
|
1422
1460
|
transition: transform 0.2s ease;
|
|
1423
1461
|
transform: rotate(${e=>e.$open?"180deg":"0deg"});
|
|
1424
|
-
`,
|
|
1462
|
+
`,Co=`
|
|
1425
1463
|
padding: 4px;
|
|
1426
1464
|
background: ${t.COLORS.white};
|
|
1427
1465
|
border: 1px solid ${t.alpha(t.COLORS.black,10)};
|
|
1428
1466
|
border-radius: 16px;
|
|
1429
1467
|
box-shadow: 0 4px 20px ${t.alpha(t.COLORS.black,15)};
|
|
1430
1468
|
z-index: 1000;
|
|
1431
|
-
`,
|
|
1469
|
+
`,Aa=s.div`
|
|
1432
1470
|
position: absolute;
|
|
1433
1471
|
left: -4px;
|
|
1434
1472
|
width: calc(100% + 8px);
|
|
1435
|
-
${
|
|
1436
|
-
`,
|
|
1473
|
+
${Co}
|
|
1474
|
+
`,Da=s.div`
|
|
1437
1475
|
position: fixed;
|
|
1438
|
-
${
|
|
1439
|
-
`,
|
|
1476
|
+
${Co}
|
|
1477
|
+
`,_a=s.button`
|
|
1440
1478
|
display: flex;
|
|
1441
1479
|
align-items: center;
|
|
1442
1480
|
justify-content: space-between;
|
|
@@ -1462,28 +1500,28 @@
|
|
|
1462
1500
|
outline: none;
|
|
1463
1501
|
background: ${t.alpha(t.COLORS.black,8)};
|
|
1464
1502
|
}
|
|
1465
|
-
`,
|
|
1503
|
+
`,Ma=s.span`
|
|
1466
1504
|
display: flex;
|
|
1467
1505
|
align-items: center;
|
|
1468
1506
|
justify-content: center;
|
|
1469
1507
|
flex-shrink: 0;
|
|
1470
1508
|
color: ${t.COLORS.black};
|
|
1471
|
-
|
|
1509
|
+
`,ye=I.newClassNameGetter("select"),Fa=({className:e,classnames:o,disabled:r=!1,fullWidth:i=!1,label:n,onChange:l,options:c,placeholder:d="Select...",portalRenderNode:p,ref:h,size:u="default",value:f,variant:O="normal",...k})=>{const[y,S]=g.useState(!1),[$,x]=g.useState({top:0,left:0,width:0}),v=g.useRef(null),b=g.useRef(null),L=g.useRef(null),j=c.find(m=>m.value===f),E=Math.max(0,c.findIndex(m=>m.value===f)),G=-(E*ut+Pe),P=()=>{if(!b.current||!p)return;const m=b.current.getBoundingClientRect(),T=E*ut+Pe;let R=m.top-T;const _=c.length*ut+Pe*2,Y=8,M=window.innerHeight-_-8;R<Y&&(R=Y),R>M&&(R=M),x({top:R,left:m.left-Pe,width:m.width+Pe*2})},D=m=>{var T;l==null||l(m),S(!1),(T=b.current)==null||T.focus()},N=m=>{r||(m.key==="Enter"||m.key===" "?(m.preventDefault(),S(T=>!T)):m.key==="Escape"&&y?(m.preventDefault(),S(!1)):m.key==="ArrowDown"&&!y&&(m.preventDefault(),S(!0)))};g.useLayoutEffect(()=>{y&&p&&P()},[y,p,E,c.length]),g.useEffect(()=>{if(!y)return;const m=_=>{const Y=_.target,M=v.current&&!v.current.contains(Y),H=L.current&&!L.current.contains(Y);p?M&&H&&S(!1):M&&S(!1)},T=()=>{p&&P()},R=()=>{p&&P()};return document.addEventListener("mousedown",m),p&&(window.addEventListener("scroll",T,!0),window.addEventListener("resize",R)),()=>{document.removeEventListener("mousedown",m),window.removeEventListener("scroll",T,!0),window.removeEventListener("resize",R)}},[y,p]);const C=()=>c.map(m=>a.jsxs(_a,{type:"button",role:"option",$selected:m.value===f,$disabled:m.disabled??!1,disabled:m.disabled,"aria-selected":m.value===f,onClick:()=>D(m.value),className:ye("option",o==null?void 0:o.option),children:[a.jsx("span",{children:m.label}),m.value===f&&a.jsx(Ma,{children:a.jsx(a.Check,{size:16})})]},m.value)),F=p?ge.createPortal(a.jsx(Da,{ref:L,role:"listbox",style:{top:$.top,left:$.left,width:$.width},className:ye("dropdown",o==null?void 0:o.dropdown),children:C()}),p):a.jsx(Aa,{ref:L,role:"listbox",style:{top:G},className:ye("dropdown",o==null?void 0:o.dropdown),children:C()});return a.jsxs(ja,{...k,ref:m=>{v.current=m,typeof h=="function"?h(m):h&&(h.current=m)},$fullWidth:i,className:ye("container",e),children:[n&&a.jsx(Ea,{className:ye("label",o==null?void 0:o.label),children:n}),a.jsxs(Ta,{ref:b,type:"button",$size:u,$variant:O,$disabled:r,$hasValue:!!j,disabled:r,onClick:()=>!r&&S(m=>!m),onKeyDown:N,"aria-haspopup":"listbox","aria-expanded":y,className:ye("trigger",o==null?void 0:o.trigger),children:[a.jsx(Na,{children:(j==null?void 0:j.label)??d}),a.jsx(Ia,{$open:y,children:a.jsx(a.ChevronDown,{size:16})})]}),y&&F]})},io={xs:{size:"16px",borderWidth:"2px"},sm:{size:"20px",borderWidth:"2px"},md:{size:"32px",borderWidth:"3px"},lg:{size:"48px",borderWidth:"4px"}},no={track:t.alpha(t.COLORS.black,15),indicator:t.COLORS.black},bt=e=>io[e]??io.md,Ba=ie.keyframes`
|
|
1472
1510
|
0% {
|
|
1473
1511
|
transform: rotate(0deg);
|
|
1474
1512
|
}
|
|
1475
1513
|
100% {
|
|
1476
1514
|
transform: rotate(360deg);
|
|
1477
1515
|
}
|
|
1478
|
-
`,
|
|
1516
|
+
`,Ya=s.div`
|
|
1479
1517
|
display: inline-block;
|
|
1480
|
-
width: ${e=>
|
|
1481
|
-
height: ${e=>
|
|
1482
|
-
border: ${e=>
|
|
1483
|
-
border-top-color: ${
|
|
1518
|
+
width: ${e=>bt(e.$size).size};
|
|
1519
|
+
height: ${e=>bt(e.$size).size};
|
|
1520
|
+
border: ${e=>bt(e.$size).borderWidth} solid ${no.track};
|
|
1521
|
+
border-top-color: ${no.indicator};
|
|
1484
1522
|
border-radius: 50%;
|
|
1485
|
-
animation: ${
|
|
1486
|
-
`,
|
|
1523
|
+
animation: ${Ba} 0.8s linear infinite;
|
|
1524
|
+
`,Ha=I.newClassNameGetter("spinner"),Ga=({"aria-label":e="Loading",className:o,ref:r,size:i="md",...n})=>a.jsx(Ya,{...n,ref:r,className:Ha("container",o),role:"status","aria-label":e,$size:i}),ao={positive:t.COLORS.green,negative:t.COLORS.red,neutral:t.COLORS["iron-grey"]},Va=e=>ao[e]??ao.neutral,Wa=s.div`
|
|
1487
1525
|
display: flex;
|
|
1488
1526
|
flex-direction: column;
|
|
1489
1527
|
gap: 4px;
|
|
@@ -1492,16 +1530,16 @@
|
|
|
1492
1530
|
border-radius: 16px;
|
|
1493
1531
|
border: ${({$border:e})=>e?"1px solid #e5e7eb":"none"};
|
|
1494
1532
|
box-shadow: ${({$shadow:e})=>e?"0 4px 6px -1px rgba(0, 0, 0, 0.1)":"none"};
|
|
1495
|
-
`,
|
|
1533
|
+
`,Ua=s.div`
|
|
1496
1534
|
display: flex;
|
|
1497
1535
|
align-items: center;
|
|
1498
1536
|
justify-content: space-between;
|
|
1499
1537
|
gap: 8px;
|
|
1500
|
-
`,
|
|
1538
|
+
`,Xa=s.p`
|
|
1501
1539
|
margin: 0;
|
|
1502
1540
|
font-size: 13px;
|
|
1503
1541
|
color: ${t.COLORS["iron-grey"]};
|
|
1504
|
-
`,
|
|
1542
|
+
`,qa=s.div`
|
|
1505
1543
|
display: flex;
|
|
1506
1544
|
align-items: center;
|
|
1507
1545
|
justify-content: center;
|
|
@@ -1515,21 +1553,21 @@
|
|
|
1515
1553
|
width: 18px;
|
|
1516
1554
|
height: 18px;
|
|
1517
1555
|
}
|
|
1518
|
-
`,
|
|
1556
|
+
`,Ka=s.h3`
|
|
1519
1557
|
margin: 0;
|
|
1520
1558
|
font-size: 28px;
|
|
1521
1559
|
font-weight: 600;
|
|
1522
1560
|
line-height: 1.2;
|
|
1523
1561
|
color: ${t.COLORS.black};
|
|
1524
|
-
`,
|
|
1562
|
+
`,Za=s.p`
|
|
1525
1563
|
margin: 0;
|
|
1526
1564
|
font-size: 12px;
|
|
1527
|
-
color: ${({$variant:e})=>
|
|
1528
|
-
`,
|
|
1565
|
+
color: ${({$variant:e})=>Va(e)};
|
|
1566
|
+
`,Ue=I.newClassNameGetter("status-card"),Ja=({border:e=!1,className:o,classnames:r,icon:i,label:n,ref:l,shadow:c=!1,trend:d,trendVariant:p="neutral",value:h,...u})=>a.jsxs(Wa,{...u,ref:l,className:Ue("container",o),$border:e,$shadow:c,children:[a.jsxs(Ua,{children:[a.jsx(Xa,{className:Ue("label",r==null?void 0:r.label),children:n}),i&&a.jsx(qa,{children:i})]}),a.jsx(Ka,{className:Ue("value",r==null?void 0:r.value),children:h}),d&&a.jsx(Za,{className:Ue("trend",r==null?void 0:r.trend),$variant:p,children:d})]}),Qa=s.div`
|
|
1529
1567
|
display: flex;
|
|
1530
1568
|
align-items: ${e=>e.$orientation==="vertical"?"flex-start":"center"};
|
|
1531
1569
|
flex-direction: ${e=>e.$orientation==="vertical"?"column":"row"};
|
|
1532
|
-
`,
|
|
1570
|
+
`,el=s.div`
|
|
1533
1571
|
display: flex;
|
|
1534
1572
|
align-items: ${e=>e.$orientation==="vertical"?"flex-start":"center"};
|
|
1535
1573
|
flex-direction: ${e=>e.$orientation==="vertical"?"column":"row"};
|
|
@@ -1538,7 +1576,7 @@
|
|
|
1538
1576
|
&:last-child {
|
|
1539
1577
|
flex: 0;
|
|
1540
1578
|
}
|
|
1541
|
-
`,
|
|
1579
|
+
`,tl=s.button`
|
|
1542
1580
|
display: flex;
|
|
1543
1581
|
align-items: center;
|
|
1544
1582
|
gap: 10px;
|
|
@@ -1556,7 +1594,7 @@
|
|
|
1556
1594
|
outline-offset: 2px;
|
|
1557
1595
|
}
|
|
1558
1596
|
}
|
|
1559
|
-
`,
|
|
1597
|
+
`,ol=s.div`
|
|
1560
1598
|
display: flex;
|
|
1561
1599
|
align-items: center;
|
|
1562
1600
|
justify-content: center;
|
|
@@ -1580,13 +1618,13 @@
|
|
|
1580
1618
|
border: 2px solid ${t.COLORS.gray};
|
|
1581
1619
|
color: ${t.COLORS["iron-grey"]};
|
|
1582
1620
|
`}
|
|
1583
|
-
`,
|
|
1621
|
+
`,rl=s.span`
|
|
1584
1622
|
font-size: 14px;
|
|
1585
1623
|
font-weight: 500;
|
|
1586
1624
|
white-space: nowrap;
|
|
1587
1625
|
color: ${e=>e.$active||e.$completed?t.COLORS.black:t.COLORS["iron-grey"]};
|
|
1588
1626
|
transition: color 0.2s ease;
|
|
1589
|
-
`,
|
|
1627
|
+
`,il=s.div`
|
|
1590
1628
|
background-color: ${e=>e.$completed?t.COLORS.black:t.COLORS.gray};
|
|
1591
1629
|
transition: background-color 0.2s ease;
|
|
1592
1630
|
|
|
@@ -1600,22 +1638,22 @@
|
|
|
1600
1638
|
min-width: 16px;
|
|
1601
1639
|
margin: 0 12px;
|
|
1602
1640
|
`}
|
|
1603
|
-
`,
|
|
1641
|
+
`,je=I.newClassNameGetter("stepper"),nl=({className:e,classnames:o,onChange:r,orientation:i="horizontal",ref:n,steps:l,value:c,...d})=>{const p=g.useMemo(()=>l.findIndex(h=>h.value===c),[l,c]);return a.jsx(Qa,{...d,ref:n,$orientation:i,className:je("container",e),children:l.map((h,u)=>{const f=h.value===c,O=u<p,k=u===l.length-1;return a.jsxs(el,{$orientation:i,children:[a.jsxs(tl,{type:"button",$active:f,$completed:O,$clickable:!!r,onClick:()=>r==null?void 0:r(h.value),className:je("step",o==null?void 0:o.step),children:[a.jsx(ol,{$active:f,$completed:O,className:je("circle",o==null?void 0:o.circle),children:u+1}),a.jsx(rl,{$active:f,$completed:O,className:je("label",o==null?void 0:o.label),children:h.label})]}),!k&&a.jsx(il,{$completed:O,$orientation:i,className:je("line",o==null?void 0:o.line)})]},h.value)})})},vt={normal:{border:t.COLORS["iron-grey"],label:t.COLORS.black},error:{border:t.COLORS.red,label:t.COLORS.red}},al=s.div`
|
|
1604
1642
|
position: relative;
|
|
1605
1643
|
display: flex;
|
|
1606
1644
|
flex-direction: column;
|
|
1607
1645
|
gap: 4px;
|
|
1608
|
-
`,
|
|
1646
|
+
`,ll=s(fe)`
|
|
1609
1647
|
margin-left: 6px;
|
|
1610
|
-
color: ${e
|
|
1611
|
-
`,
|
|
1648
|
+
color: ${e=>vt[e.$variant].label};
|
|
1649
|
+
`,dl=s.div`
|
|
1612
1650
|
display: flex;
|
|
1613
1651
|
flex-wrap: wrap;
|
|
1614
1652
|
align-items: center;
|
|
1615
1653
|
gap: 6px;
|
|
1616
1654
|
min-height: 44px;
|
|
1617
1655
|
padding: 8px 12px;
|
|
1618
|
-
border: 1px dashed ${e
|
|
1656
|
+
border: 1px dashed ${e=>vt[e.$variant].border};
|
|
1619
1657
|
border-radius: 8px;
|
|
1620
1658
|
background: ${t.COLORS.white};
|
|
1621
1659
|
cursor: ${e=>e.$disabled?"not-allowed":"text"};
|
|
@@ -1623,14 +1661,14 @@
|
|
|
1623
1661
|
transition: border-color 0.15s ease;
|
|
1624
1662
|
|
|
1625
1663
|
&:hover {
|
|
1626
|
-
border-color: ${e=>e.$disabled
|
|
1664
|
+
border-color: ${e=>e.$disabled?vt[e.$variant].border:e.$variant==="error"?t.COLORS.red:t.COLORS.black};
|
|
1627
1665
|
}
|
|
1628
1666
|
|
|
1629
1667
|
${e=>e.$focused&&`
|
|
1630
1668
|
outline: 2px solid ${e.$variant==="error"?t.COLORS.red:t.COLORS["steel-blue"]};
|
|
1631
1669
|
outline-offset: 2px;
|
|
1632
1670
|
`}
|
|
1633
|
-
`,
|
|
1671
|
+
`,cl=s.input`
|
|
1634
1672
|
flex: 1;
|
|
1635
1673
|
min-width: 80px;
|
|
1636
1674
|
border: none;
|
|
@@ -1647,7 +1685,7 @@
|
|
|
1647
1685
|
&:disabled {
|
|
1648
1686
|
cursor: not-allowed;
|
|
1649
1687
|
}
|
|
1650
|
-
`,
|
|
1688
|
+
`,Ro=`
|
|
1651
1689
|
z-index: 100;
|
|
1652
1690
|
background-color: ${t.COLORS.white};
|
|
1653
1691
|
border: 1px solid ${t.alpha(t.COLORS.black,15)};
|
|
@@ -1655,28 +1693,28 @@
|
|
|
1655
1693
|
box-shadow: 0 4px 16px ${t.alpha(t.COLORS.black,12)};
|
|
1656
1694
|
max-height: 200px;
|
|
1657
1695
|
overflow-y: auto;
|
|
1658
|
-
`,
|
|
1696
|
+
`,ko=(e,o)=>e?"translateY(0)":o==="bottom"?"translateY(-8px)":"translateY(8px)",Lo=`
|
|
1659
1697
|
opacity 0.15s ease,
|
|
1660
1698
|
transform 0.15s ease,
|
|
1661
1699
|
visibility 0.15s;
|
|
1662
|
-
`,
|
|
1700
|
+
`,sl=s.div`
|
|
1663
1701
|
position: absolute;
|
|
1664
1702
|
left: 0;
|
|
1665
1703
|
right: 0;
|
|
1666
1704
|
${e=>e.$position==="bottom"?"top: calc(100% + 4px);":"bottom: calc(100% + 4px);"}
|
|
1667
|
-
${
|
|
1705
|
+
${Ro}
|
|
1668
1706
|
opacity: ${e=>e.$open?1:0};
|
|
1669
1707
|
visibility: ${e=>e.$open?"visible":"hidden"};
|
|
1670
|
-
transform: ${e=>
|
|
1671
|
-
transition: ${
|
|
1672
|
-
`,
|
|
1708
|
+
transform: ${e=>ko(e.$open,e.$position)};
|
|
1709
|
+
transition: ${Lo};
|
|
1710
|
+
`,pl=s.div`
|
|
1673
1711
|
position: fixed;
|
|
1674
|
-
${
|
|
1712
|
+
${Ro}
|
|
1675
1713
|
opacity: ${e=>e.$open?1:0};
|
|
1676
1714
|
visibility: ${e=>e.$open?"visible":"hidden"};
|
|
1677
|
-
transform: ${e=>
|
|
1678
|
-
transition: ${
|
|
1679
|
-
`,
|
|
1715
|
+
transform: ${e=>ko(e.$open,e.$position)};
|
|
1716
|
+
transition: ${Lo};
|
|
1717
|
+
`,lo=s.button`
|
|
1680
1718
|
display: flex;
|
|
1681
1719
|
align-items: center;
|
|
1682
1720
|
width: 100%;
|
|
@@ -1704,7 +1742,7 @@
|
|
|
1704
1742
|
&:only-child {
|
|
1705
1743
|
border-radius: 7px;
|
|
1706
1744
|
}
|
|
1707
|
-
`,
|
|
1745
|
+
`,co=s.div`
|
|
1708
1746
|
display: flex;
|
|
1709
1747
|
align-items: center;
|
|
1710
1748
|
justify-content: center;
|
|
@@ -1712,11 +1750,11 @@
|
|
|
1712
1750
|
color: ${t.COLORS["iron-grey"]};
|
|
1713
1751
|
font-size: 14px;
|
|
1714
1752
|
text-align: center;
|
|
1715
|
-
`,ee=
|
|
1753
|
+
`,ee=I.newClassNameGetter("tags"),Xe=4,ul=({className:e,classnames:o,createKey:r="Tab",disabled:i=!1,emptyMessage:n="No options",freeSolo:l=!0,label:c,onChange:d,options:p=[],placeholder:h="Add tag...",portalRenderNode:u,ref:f,value:O,variant:k="normal",...y})=>{const S=g.useRef(null),$=g.useRef(null),x=g.useRef(null),v=g.useRef(null),[b,L]=g.useState(""),[j,E]=g.useState(!1),[G,P]=g.useState("bottom"),[D,N]=g.useState({top:0,left:0,width:0}),C=g.useMemo(()=>{const z=p.filter(X=>!O.includes(X.value));if(!b.trim())return z;const A=b.toLowerCase().trim();return z.filter(X=>X.label.toLowerCase().includes(A))},[p,O,b]),F=j&&p.length>0,m=g.useCallback(()=>{var Ae;if(!$.current)return;const z=$.current.getBoundingClientRect(),A=((Ae=x.current)==null?void 0:Ae.offsetHeight)??200,X=window.innerHeight-z.bottom-Xe,q=z.top-Xe,xe=X<A&&q>X?"top":"bottom";if(P(xe),u){const et=xe==="bottom"?z.bottom+Xe:z.top-A-Xe;N({top:et,left:z.left,width:z.width})}},[u]);g.useEffect(()=>{if(j)return m(),window.addEventListener("scroll",m,!0),window.addEventListener("resize",m),()=>{window.removeEventListener("scroll",m,!0),window.removeEventListener("resize",m)}},[j,m]);const T=g.useCallback(z=>{const A=z.trim();return!A||O.includes(A)?!1:(d([...O,A]),L(""),!0)},[O,d]),R=z=>{if(z.key===r&&b.trim())if(z.preventDefault(),l)T(b);else{const A=C.find(X=>X.label.toLowerCase()===b.toLowerCase().trim());A&&T(A.value)}else z.key==="Backspace"&&!b&&O.length>0&&d(O.slice(0,-1))},_=z=>{var A;T(z),(A=v.current)==null||A.focus()},Y=z=>{d(O.filter(A=>A!==z))},M=()=>{var z;i||(z=v.current)==null||z.focus()},H=z=>{const A=p.find(X=>X.value===z);return(A==null?void 0:A.label)??z};return a.jsxs(al,{...y,ref:f,className:ee("container",e),children:[c&&a.jsx(ll,{$variant:k,className:ee("label"),children:c}),a.jsxs("div",{ref:S,style:{position:"relative"},children:[a.jsxs(dl,{ref:$,$variant:k,$disabled:i,$focused:j,onClick:M,className:ee("trigger",o==null?void 0:o.trigger),children:[O.map(z=>a.jsx(Ke,{deletable:!i,onDelete:()=>Y(z),className:ee("chip",o==null?void 0:o.chip),children:H(z)},z)),a.jsx(cl,{ref:v,type:"text",value:b,onChange:z=>L(z.target.value),onFocus:()=>E(!0),onBlur:()=>setTimeout(()=>E(!1),150),onKeyDown:R,placeholder:O.length===0?h:"",disabled:i,$disabled:i,className:ee("input",o==null?void 0:o.input)})]}),p.length>0&&(u?ge.createPortal(a.jsx(pl,{ref:x,$open:F,$position:G,style:{top:D.top,left:D.left,width:D.width},className:ee("dropdown",o==null?void 0:o.dropdown),children:C.length===0?a.jsx(co,{className:ee("empty",o==null?void 0:o.empty),children:n}):C.map(z=>a.jsx(lo,{type:"button",onMouseDown:A=>A.preventDefault(),onClick:()=>_(z.value),className:ee("option",o==null?void 0:o.option),children:z.label},z.value))}),u):a.jsx(sl,{ref:x,$open:F,$position:G,className:ee("dropdown",o==null?void 0:o.dropdown),children:C.length===0?a.jsx(co,{className:ee("empty",o==null?void 0:o.empty),children:n}):C.map(z=>a.jsx(lo,{type:"button",onMouseDown:A=>A.preventDefault(),onClick:()=>_(z.value),className:ee("option",o==null?void 0:o.option),children:z.label},z.value))}))]})]})},hl=s.div`
|
|
1716
1754
|
display: flex;
|
|
1717
1755
|
align-items: center;
|
|
1718
1756
|
gap: 6px;
|
|
1719
|
-
`,
|
|
1757
|
+
`,bl=s.button`
|
|
1720
1758
|
padding: 6px 16px;
|
|
1721
1759
|
border: none;
|
|
1722
1760
|
border-radius: 12px;
|
|
@@ -1739,7 +1777,7 @@
|
|
|
1739
1777
|
outline: 2px solid ${t.COLORS["steel-blue"]};
|
|
1740
1778
|
outline-offset: 2px;
|
|
1741
1779
|
}
|
|
1742
|
-
`,
|
|
1780
|
+
`,so=I.newClassNameGetter("tabs"),gl=({className:e,classnames:o,onChange:r,ref:i,tabs:n,value:l,...c})=>a.jsx(hl,{...c,ref:i,className:so("container",e),role:"tablist",children:n.map(d=>a.jsx(bl,{type:"button",role:"tab","aria-selected":l===d.value,$active:l===d.value,$disabled:!!d.disabled,disabled:d.disabled,onClick:()=>r(d.value),className:so("tab",o==null?void 0:o.tab),children:d.label},d.value))}),zo=g.createContext(null),gt=3,po={default:{background:"#374151",text:t.COLORS.white,border:"#374151"},success:{background:t.COLORS.green,text:t.COLORS.white,border:t.COLORS.green},warning:{background:t.COLORS.yellow,text:t.COLORS.white,border:t.COLORS.yellow},danger:{background:t.COLORS.red,text:t.COLORS.white,border:t.COLORS.red}},fl=(e,o)=>{switch(o.type){case"ADD_TOAST":{const r=o.payload;return e.toasts.length<gt?{...e,toasts:[...e.toasts,r]}:{...e,queue:[...e.queue,r]}}case"REMOVE_TOAST":{const r=o.payload,i=e.toasts.filter(l=>l.id!==r),n=e.queue[0];return n&&i.length<gt?{toasts:[...i,n],queue:e.queue.slice(1)}:{...e,toasts:i}}case"SHOW_NEXT_FROM_QUEUE":{const r=e.queue[0];return!r||e.toasts.length>=gt?e:{toasts:[...e.toasts,r],queue:e.queue.slice(1)}}default:return e}},xl={toasts:[],queue:[]},ft=e=>po[e]??po.default,Ol=ie.keyframes`
|
|
1743
1781
|
from {
|
|
1744
1782
|
transform: translateY(100%);
|
|
1745
1783
|
opacity: 0;
|
|
@@ -1748,7 +1786,7 @@
|
|
|
1748
1786
|
transform: translateY(0);
|
|
1749
1787
|
opacity: 1;
|
|
1750
1788
|
}
|
|
1751
|
-
|
|
1789
|
+
`,$l=ie.keyframes`
|
|
1752
1790
|
from {
|
|
1753
1791
|
transform: translateY(0);
|
|
1754
1792
|
opacity: 1;
|
|
@@ -1757,7 +1795,7 @@
|
|
|
1757
1795
|
transform: translateY(100%);
|
|
1758
1796
|
opacity: 0;
|
|
1759
1797
|
}
|
|
1760
|
-
`,
|
|
1798
|
+
`,Sl=s.div`
|
|
1761
1799
|
position: fixed;
|
|
1762
1800
|
bottom: 24px;
|
|
1763
1801
|
left: 24px;
|
|
@@ -1768,29 +1806,29 @@
|
|
|
1768
1806
|
pointer-events: none;
|
|
1769
1807
|
width: auto;
|
|
1770
1808
|
max-width: 90vw;
|
|
1771
|
-
`,
|
|
1809
|
+
`,yl=s.div`
|
|
1772
1810
|
display: flex;
|
|
1773
1811
|
align-items: center;
|
|
1774
1812
|
justify-content: space-between;
|
|
1775
1813
|
gap: 12px;
|
|
1776
1814
|
min-height: 32px;
|
|
1777
1815
|
padding: 8px 8px 8px 16px;
|
|
1778
|
-
background-color: ${({$variant:e})=>
|
|
1779
|
-
color: ${({$variant:e})=>
|
|
1780
|
-
border: 1px solid ${({$variant:e})=>
|
|
1816
|
+
background-color: ${({$variant:e})=>ft(e).background};
|
|
1817
|
+
color: ${({$variant:e})=>ft(e).text};
|
|
1818
|
+
border: 1px solid ${({$variant:e})=>ft(e).border};
|
|
1781
1819
|
border-radius: 96px;
|
|
1782
1820
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
1783
|
-
animation: ${({$isExiting:e})=>e
|
|
1821
|
+
animation: ${({$isExiting:e})=>e?$l:Ol} 0.3s ease-out;
|
|
1784
1822
|
pointer-events: auto;
|
|
1785
1823
|
max-width: 500px;
|
|
1786
|
-
`,
|
|
1824
|
+
`,vl=s.span`
|
|
1787
1825
|
font-size: 14px;
|
|
1788
1826
|
font-weight: 500;
|
|
1789
1827
|
line-height: 1.4;
|
|
1790
1828
|
white-space: nowrap;
|
|
1791
1829
|
overflow: hidden;
|
|
1792
1830
|
text-overflow: ellipsis;
|
|
1793
|
-
`,
|
|
1831
|
+
`,ml=s.button`
|
|
1794
1832
|
display: flex;
|
|
1795
1833
|
align-items: center;
|
|
1796
1834
|
justify-content: center;
|
|
@@ -1808,13 +1846,13 @@
|
|
|
1808
1846
|
&:hover {
|
|
1809
1847
|
opacity: 1;
|
|
1810
1848
|
}
|
|
1811
|
-
`,
|
|
1849
|
+
`,wl=s.div`
|
|
1812
1850
|
display: flex;
|
|
1813
1851
|
align-items: center;
|
|
1814
1852
|
justify-content: space-between;
|
|
1815
1853
|
gap: 12px;
|
|
1816
1854
|
width: 100%;
|
|
1817
|
-
`,
|
|
1855
|
+
`,Cl=s.div`
|
|
1818
1856
|
display: flex;
|
|
1819
1857
|
align-items: center;
|
|
1820
1858
|
justify-content: center;
|
|
@@ -1829,7 +1867,7 @@
|
|
|
1829
1867
|
font-weight: 500;
|
|
1830
1868
|
white-space: nowrap;
|
|
1831
1869
|
margin-left: auto;
|
|
1832
|
-
`,
|
|
1870
|
+
`,uo=({toast:e,onRemove:o})=>{const[r,i]=g.useState(!1),n=()=>{i(!0),setTimeout(()=>{o(e.id)},300)};return g.useEffect(()=>{if(e.duration){const l=setTimeout(()=>{n()},e.duration);return()=>clearTimeout(l)}},[e.duration,e.id]),a.jsxs(yl,{$variant:e.variant,$isExiting:r,children:[a.jsx(vl,{children:e.message}),a.jsx(ml,{onClick:n,children:a.jsx(a.X,{style:{width:16,height:16}})})]})},Rl=({toasts:e,queueCount:o,removeToast:r})=>{if(e.length===0)return null;const i=e.length-1;return a.jsx(Sl,{children:e.map((n,l)=>l===i&&o>0?a.jsxs(wl,{children:[a.jsx(uo,{toast:n,onRemove:r}),a.jsxs(Cl,{children:["+",o]})]},n.id):a.jsx(uo,{toast:n,onRemove:r},n.id))})},kl=({children:e})=>{const[o,r]=g.useReducer(fl,xl),i=g.useCallback((l,c="default",d)=>{const p=`toast-${Date.now()}-${Math.random().toString(36).substr(2,9)}`;r({type:"ADD_TOAST",payload:{id:p,message:l,variant:c,duration:d}})},[]),n=g.useCallback(l=>{r({type:"REMOVE_TOAST",payload:l})},[]);return a.jsxs(zo.Provider,{value:{addToast:i,removeToast:n},children:[e,a.jsx(Rl,{toasts:o.toasts,queueCount:o.queue.length,removeToast:n})]})},Ll=()=>{const e=g.useContext(zo);if(!e)throw new Error("useToast must be used within ToastProvider");return e},ho={dark:{background:t.COLORS.black,text:t.COLORS.white},light:{background:t.COLORS.white,text:t.COLORS.black,border:t.COLORS.gray},success:{background:t.COLORS.green,text:t.COLORS.white},warning:{background:t.COLORS.yellow,text:t.COLORS.white},danger:{background:t.COLORS.red,text:t.COLORS.white}},Ne=e=>ho[e]??ho.dark,zl=(e,o)=>{const r=Ne(o).background;switch(e){case"top":return`
|
|
1833
1871
|
bottom: -12px;
|
|
1834
1872
|
left: 50%;
|
|
1835
1873
|
margin-left: -6px;
|
|
@@ -1849,7 +1887,7 @@
|
|
|
1849
1887
|
top: 50%;
|
|
1850
1888
|
margin-top: -6px;
|
|
1851
1889
|
border-right-color: ${r};
|
|
1852
|
-
`;default:return""}},
|
|
1890
|
+
`;default:return""}},Pl=(e,o)=>{if(o!=="light")return"";const r=Ne(o).border;switch(e){case"top":return`
|
|
1853
1891
|
&::after {
|
|
1854
1892
|
bottom: -14px;
|
|
1855
1893
|
left: 50%;
|
|
@@ -1877,11 +1915,11 @@
|
|
|
1877
1915
|
margin-top: -7px;
|
|
1878
1916
|
border-right-color: ${r};
|
|
1879
1917
|
}
|
|
1880
|
-
`;default:return""}},
|
|
1918
|
+
`;default:return""}},Po=e=>`
|
|
1881
1919
|
z-index: 1000;
|
|
1882
1920
|
padding: 6px 12px;
|
|
1883
|
-
background-color: ${
|
|
1884
|
-
color: ${
|
|
1921
|
+
background-color: ${Ne(e.$variant).background};
|
|
1922
|
+
color: ${Ne(e.$variant).text};
|
|
1885
1923
|
font-size: 13px;
|
|
1886
1924
|
line-height: 1.4;
|
|
1887
1925
|
border-radius: 6px;
|
|
@@ -1895,7 +1933,7 @@
|
|
|
1895
1933
|
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
|
|
1896
1934
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
1897
1935
|
|
|
1898
|
-
${e.$variant==="light"?`border: 1px solid ${
|
|
1936
|
+
${e.$variant==="light"?`border: 1px solid ${Ne(e.$variant).border};`:""}
|
|
1899
1937
|
|
|
1900
1938
|
&::before {
|
|
1901
1939
|
content: '';
|
|
@@ -1903,7 +1941,7 @@
|
|
|
1903
1941
|
width: 0;
|
|
1904
1942
|
height: 0;
|
|
1905
1943
|
border: 6px solid transparent;
|
|
1906
|
-
${
|
|
1944
|
+
${zl(e.$placement,e.$variant)}
|
|
1907
1945
|
}
|
|
1908
1946
|
|
|
1909
1947
|
${e.$variant==="light"?`
|
|
@@ -1916,11 +1954,11 @@
|
|
|
1916
1954
|
}
|
|
1917
1955
|
`:""}
|
|
1918
1956
|
|
|
1919
|
-
${
|
|
1920
|
-
`,
|
|
1957
|
+
${Pl(e.$placement,e.$variant)}
|
|
1958
|
+
`,jl=s.div`
|
|
1921
1959
|
position: relative;
|
|
1922
1960
|
display: inline-block;
|
|
1923
|
-
`,
|
|
1961
|
+
`,El=e=>{switch(e){case"top":return`
|
|
1924
1962
|
bottom: calc(100% + 8px);
|
|
1925
1963
|
left: 50%;
|
|
1926
1964
|
transform: translateX(-50%);
|
|
@@ -1936,12 +1974,12 @@
|
|
|
1936
1974
|
left: calc(100% + 8px);
|
|
1937
1975
|
top: 50%;
|
|
1938
1976
|
transform: translateY(-50%);
|
|
1939
|
-
`;default:return""}},
|
|
1977
|
+
`;default:return""}},Tl=s.div`
|
|
1940
1978
|
position: absolute;
|
|
1941
|
-
${e=>
|
|
1942
|
-
${({$placement:e})=>
|
|
1943
|
-
`,
|
|
1979
|
+
${e=>Po(e)}
|
|
1980
|
+
${({$placement:e})=>El(e)}
|
|
1981
|
+
`,Nl=s.div`
|
|
1944
1982
|
position: fixed;
|
|
1945
|
-
${e=>
|
|
1946
|
-
`,
|
|
1983
|
+
${e=>Po(e)}
|
|
1984
|
+
`,xt=I.newClassNameGetter("tooltip"),de=8,Il=({children:e,className:o,classnames:r,content:i,delay:n=200,placement:l="top",portalRenderNode:c,ref:d,variant:p="dark",...h})=>{const[u,f]=g.useState(!1),[O,k]=g.useState(null),[y,S]=g.useState(l),[$,x]=g.useState({top:0,left:0}),v=g.useRef(null),b=g.useRef(null),L=g.useCallback(()=>{var _,Y;if(!v.current)return;const P=v.current.getBoundingClientRect(),D=((_=b.current)==null?void 0:_.offsetWidth)??100,N=((Y=b.current)==null?void 0:Y.offsetHeight)??30,C=P.top-de,F=window.innerHeight-P.bottom-de,m=P.left-de,T=window.innerWidth-P.right-de;let R=l;if(l==="top"&&C<N&&F>C?R="bottom":l==="bottom"&&F<N&&C>F?R="top":l==="left"&&m<D&&T>m?R="right":l==="right"&&T<D&&m>T&&(R="left"),S(R),c){let M,H;switch(R){case"top":M=P.top-N-de,H=P.left+P.width/2-D/2;break;case"bottom":M=P.bottom+de,H=P.left+P.width/2-D/2;break;case"left":M=P.top+P.height/2-N/2,H=P.left-D-de;break;case"right":M=P.top+P.height/2-N/2,H=P.right+de;break;default:M=0,H=0}const z=8;H=Math.max(z,Math.min(H,window.innerWidth-D-z)),M=Math.max(z,Math.min(M,window.innerHeight-N-z)),x({top:M,left:H})}},[l,c]);g.useLayoutEffect(()=>{u&&L()},[u,L]);const j=()=>{const P=setTimeout(()=>{f(!0)},n);k(P)},E=()=>{O&&(clearTimeout(O),k(null)),f(!1)},G=c?ge.createPortal(a.jsx(Nl,{ref:b,className:xt("content",r==null?void 0:r.content),$placement:y,$variant:p,$visible:u,style:{top:$.top,left:$.left},children:i}),c):a.jsx(Tl,{ref:b,className:xt("content",r==null?void 0:r.content),$placement:y,$variant:p,$visible:u,children:i});return a.jsxs(jl,{...h,ref:P=>{v.current=P,typeof d=="function"?d(P):d&&(d.current=P)},className:xt("wrapper",o),onMouseEnter:j,onMouseLeave:E,children:[e,G]})};exports.Button=Ie;exports.Card=gr;exports.Checkbox=Je;exports.CheckboxCard=Rr;exports.CheckboxGroup=Pr;exports.Chip=Ke;exports.Confirmation=Br;exports.Container=Gr;exports.DatePicker=$i;exports.Drawer=wi;exports.Dropdown=Pi;exports.FieldLabel=fe;exports.GlobalStyle=Zo;exports.ImageCropper=_n;exports.Input=vo;exports.KeySymbol=bo;exports.KeysBindings=go;exports.Modal=mo;exports.MultiSelect=ta;exports.OtpCode=aa;exports.Panel=ua;exports.Progress=ga;exports.Radio=mt;exports.RadioCard=Ra;exports.RadioGroup=Pa;exports.Select=Fa;exports.Spinner=Ga;exports.StatusCard=Ja;exports.Stepper=nl;exports.Tabs=gl;exports.Tags=ul;exports.ToastProvider=kl;exports.Tooltip=Il;exports.formatDateGo=fo;exports.useImageCropper=yo;exports.useToast=Ll;
|
|
1947
1985
|
//# sourceMappingURL=index.cjs.map
|