@bethinkpl/design-system 26.2.4 → 26.2.6

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.
Files changed (78) hide show
  1. package/dist/design-system.umd.cjs +11 -11
  2. package/dist/design-system.umd.cjs.map +1 -1
  3. package/dist/lib/js/components/DatePickers/DatePicker/DatePicker.vue.d.ts +1 -0
  4. package/dist/lib/js/components/Statuses/AccessStatus/AccessStatus.vue.d.ts +1 -1
  5. package/dist/lib/js/consts/user.d.ts +1 -0
  6. package/docs/assets/AccessStatus-ClS84vSe.js +1 -0
  7. package/docs/assets/{AccessStatus.stories-bA7hnj_D.js → AccessStatus.stories-BWcMsDLk.js} +1 -1
  8. package/docs/assets/{BasicRichListItem-BrctvsYu.js → BasicRichListItem-D3pse0_L.js} +1 -1
  9. package/docs/assets/{BasicRichListItem.stories-7iv3WcxV.js → BasicRichListItem.stories-R4YjJiK0.js} +1 -1
  10. package/docs/assets/{BlockadeStatus-BfAr-sGX.js → BlockadeStatus-Eq8qNk3H.js} +1 -1
  11. package/docs/assets/{BlockedeStatus.stories-CQ-hCDNG.js → BlockedeStatus.stories-DxdPcwwM.js} +1 -1
  12. package/docs/assets/{Color-ERTF36HU-D12h-CxJ.js → Color-ERTF36HU-DGAUXabj.js} +1 -1
  13. package/docs/assets/{DatePicker-DJlkbpv1.js → DatePicker-BfdMp2Je.js} +1 -1
  14. package/docs/assets/{DatePicker.stories-BB2cRdGS.js → DatePicker.stories-Bsx5Xu0M.js} +2 -2
  15. package/docs/assets/{DateRangePicker-CSyiSZb3.js → DateRangePicker-CUiFvBeH.js} +1 -1
  16. package/docs/assets/{DateRangePicker.stories-_EiYHUQg.js → DateRangePicker.stories-o2LbDeo0.js} +1 -1
  17. package/docs/assets/{DocsRenderer-CFRXHY34-BipAnbdT.js → DocsRenderer-CFRXHY34-CcxdCD7d.js} +5 -5
  18. package/docs/assets/GroupRichListItem-BYkqOl05.js +1 -0
  19. package/docs/assets/{GroupRichListItem.stories-DMua_uKP.js → GroupRichListItem.stories-DPUDfrpm.js} +1 -1
  20. package/docs/assets/{RichListItem.stories-DXC1qEaB.js → RichListItem.stories-B2GCMaq5.js} +1 -1
  21. package/docs/assets/{SelectionTile-BVM_pPTl.js → SelectionTile-DPhe1Out.js} +1 -1
  22. package/docs/assets/{SelectionTile.stories-CkRcSde_.js → SelectionTile.stories-Cm-RfjFi.js} +1 -1
  23. package/docs/assets/{iframe-cb3rle_L.js → iframe-Bnjlc0fj.js} +5 -5
  24. package/docs/assets/{index-CV7uOb4R.js → index-CGLvZumt.js} +1 -1
  25. package/docs/assets/{index-C3EaQzPU.js → index-D3KB6m-q.js} +1 -1
  26. package/docs/assets/{preview-CMJ18cUL.js → preview-BGKwGc0h.js} +2 -2
  27. package/docs/assets/{preview-buvoF0KJ.js → preview-CkGD9a49.js} +1 -1
  28. package/docs/assets/user-_JB5aHqq.js +1 -0
  29. package/docs/iframe.html +1 -1
  30. package/docs/project.json +1 -1
  31. package/lib/js/components/DatePickers/DatePicker/DatePicker.stories.ts +1 -1
  32. package/lib/js/components/DatePickers/DatePicker/DatePicker.vue +9 -3
  33. package/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.vue +2 -2
  34. package/lib/js/components/RichList/RichListItem/RichListItem.vue +2 -2
  35. package/lib/js/components/Statuses/AccessStatus/AccessStatus.vue +3 -0
  36. package/lib/js/consts/user.ts +1 -0
  37. package/package.json +1 -1
  38. package/dist/storybook/favicon.svg +0 -1
  39. package/dist/storybook/index.html +0 -165
  40. package/dist/storybook/index.json +0 -1
  41. package/dist/storybook/nunito-sans-bold-italic.woff2 +0 -0
  42. package/dist/storybook/nunito-sans-bold.woff2 +0 -0
  43. package/dist/storybook/nunito-sans-italic.woff2 +0 -0
  44. package/dist/storybook/nunito-sans-regular.woff2 +0 -0
  45. package/dist/storybook/sb-addons/actions-1/manager-bundle.js +0 -3
  46. package/dist/storybook/sb-addons/actions-1/manager-bundle.js.LEGAL.txt +0 -0
  47. package/dist/storybook/sb-addons/controls-3/manager-bundle.js +0 -394
  48. package/dist/storybook/sb-addons/controls-3/manager-bundle.js.LEGAL.txt +0 -0
  49. package/dist/storybook/sb-addons/designs-2/register-panel-bundle.js +0 -665
  50. package/dist/storybook/sb-addons/designs-2/register-panel-bundle.js.LEGAL.txt +0 -127
  51. package/dist/storybook/sb-addons/storybook-6/manager-bundle.js +0 -3
  52. package/dist/storybook/sb-addons/storybook-6/manager-bundle.js.LEGAL.txt +0 -0
  53. package/dist/storybook/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js +0 -3
  54. package/dist/storybook/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js.LEGAL.txt +0 -0
  55. package/dist/storybook/sb-addons/storysource-4/manager-bundle.js +0 -3
  56. package/dist/storybook/sb-addons/storysource-4/manager-bundle.js.LEGAL.txt +0 -0
  57. package/dist/storybook/sb-addons/viewport-5/manager-bundle.js +0 -3
  58. package/dist/storybook/sb-addons/viewport-5/manager-bundle.js.LEGAL.txt +0 -0
  59. package/dist/storybook/sb-common-assets/favicon.svg +0 -1
  60. package/dist/storybook/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
  61. package/dist/storybook/sb-common-assets/nunito-sans-bold.woff2 +0 -0
  62. package/dist/storybook/sb-common-assets/nunito-sans-italic.woff2 +0 -0
  63. package/dist/storybook/sb-common-assets/nunito-sans-regular.woff2 +0 -0
  64. package/dist/storybook/sb-manager/globals-module-info.js +0 -1006
  65. package/dist/storybook/sb-manager/globals-runtime.js +0 -54400
  66. package/dist/storybook/sb-manager/globals.js +0 -48
  67. package/dist/storybook/sb-manager/runtime.js +0 -12089
  68. package/dist/storybook/sb-preview/globals.js +0 -33
  69. package/dist/storybook/sb-preview/runtime.js +0 -9498
  70. package/dist/storybook/~design-system/lib/fonts/lato/lato-ext-300.woff2 +0 -0
  71. package/dist/storybook/~design-system/lib/fonts/lato/lato-ext-700.woff2 +0 -0
  72. package/dist/storybook/~design-system/lib/fonts/lato/lato-ext.woff2 +0 -0
  73. package/dist/storybook/~design-system/lib/fonts/lato/lato-latin-300.woff2 +0 -0
  74. package/dist/storybook/~design-system/lib/fonts/lato/lato-latin-700.woff2 +0 -0
  75. package/dist/storybook/~design-system/lib/fonts/lato/lato-latin.woff2 +0 -0
  76. package/docs/assets/AccessStatus-DRDZqpES.js +0 -1
  77. package/docs/assets/GroupRichListItem-ByTKILI0.js +0 -1
  78. package/docs/assets/user-DY5hg_iu.js +0 -1
@@ -1,665 +0,0 @@
1
- try{
2
- (()=>{var Mo=Object.defineProperty;var To=(o,e)=>{for(var t in e)Mo(o,t,{get:e[t],enumerable:!0})};var g={NODE_ENV:"production",NODE_PATH:[],STORYBOOK:"true",PUBLIC_URL:".",JSON_BIN_X_ACCESS_KEY:"//3e092N/X5piKe8Ks7v/FXiDtcw5gvflYe"};var le={};To(le,{Children:()=>No,Component:()=>Te,Fragment:()=>_,Profiler:()=>Ro,PureComponent:()=>Oo,StrictMode:()=>Bo,Suspense:()=>ke,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:()=>Lo,cloneElement:()=>Ho,createContext:()=>Io,createElement:()=>Fo,createFactory:()=>Uo,createRef:()=>jo,default:()=>Po,forwardRef:()=>Do,isValidElement:()=>zo,lazy:()=>Pe,memo:()=>Vo,startTransition:()=>Yo,unstable_act:()=>Wo,useCallback:()=>T,useContext:()=>Go,useDebugValue:()=>Zo,useDeferredValue:()=>qo,useEffect:()=>N,useId:()=>Xo,useImperativeHandle:()=>Ko,useInsertionEffect:()=>Jo,useLayoutEffect:()=>Qo,useMemo:()=>W,useReducer:()=>er,useRef:()=>tr,useState:()=>k,useSyncExternalStore:()=>or,useTransition:()=>rr,version:()=>ir});var Po=__REACT__,{Children:No,Component:Te,Fragment:_,Profiler:Ro,PureComponent:Oo,StrictMode:Bo,Suspense:ke,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:Lo,cloneElement:Ho,createContext:Io,createElement:Fo,createFactory:Uo,createRef:jo,forwardRef:Do,isValidElement:zo,lazy:Pe,memo:Vo,startTransition:Yo,unstable_act:Wo,useCallback:T,useContext:Go,useDebugValue:Zo,useDeferredValue:qo,useEffect:N,useId:Xo,useImperativeHandle:Ko,useInsertionEffect:Jo,useLayoutEffect:Qo,useMemo:W,useReducer:er,useRef:tr,useState:k,useSyncExternalStore:or,useTransition:rr,version:ir}=__REACT__;var ci=__STORYBOOK_THEMING__,{CacheProvider:di,ClassNames:hi,Global:pi,ThemeProvider:ui,background:fi,color:mi,convert:gi,create:vi,createCache:yi,createGlobal:bi,createReset:xi,css:P,darken:wi,ensure:_i,ignoreSsrWarning:$i,isPropValid:Ei,jsx:p,keyframes:Si,lighten:Ai,styled:Ci,themes:Mi,typography:Ti,useTheme:ki,withTheme:Pi}=__STORYBOOK_THEMING__;var Li=__STORYBOOK_COMPONENTS__,{A:Hi,ActionBar:Ii,AddonPanel:ht,Badge:Fi,Bar:Ui,Blockquote:ji,Button:Di,ClipboardCode:zi,Code:Vi,DL:Yi,Div:Wi,DocumentWrapper:Gi,EmptyTabContent:Zi,ErrorFormatter:qi,FlexBar:pt,Form:Xi,H1:Ki,H2:Ji,H3:Qi,H4:es,H5:ts,H6:os,HR:rs,IconButton:ce,IconButtonSkeleton:is,Icons:de,Img:ss,LI:ns,Link:K,ListItem:as,Loader:ls,Modal:cs,OL:ds,P:hs,Placeholder:I,Pre:ps,ResetWrapper:us,ScrollArea:fs,Separator:ut,Spaced:ms,Span:gs,StorybookIcon:vs,StorybookLogo:ys,Symbols:bs,SyntaxHighlighter:xs,TT:ws,TabBar:_s,TabButton:$s,TabWrapper:Es,Table:Ss,Tabs:ft,TabsState:As,TooltipLinkList:Cs,TooltipMessage:Ms,TooltipNote:Ts,UL:ks,WithTooltip:Ps,WithTooltipPure:Ns,Zoom:Rs,codeCommon:Os,components:Bs,createCopyToClipboardFunction:Ls,getStoryHref:Hs,icons:Is,interleaveSeparators:Fs,nameSpaceClassNames:Us,resetComponents:js,withReset:Ds}=__STORYBOOK_COMPONENTS__;var he=window,pe=he.ShadowRoot&&(he.ShadyCSS===void 0||he.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,Ne=Symbol(),mt=new WeakMap,J=class{constructor(e,t,r){if(this._$cssResult$=!0,r!==Ne)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o,t=this.t;if(pe&&e===void 0){let r=t!==void 0&&t.length===1;r&&(e=mt.get(t)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),r&&mt.set(t,e))}return e}toString(){return this.cssText}},gt=o=>new J(typeof o=="string"?o:o+"",void 0,Ne),A=(o,...e)=>{let t=o.length===1?o[0]:e.reduce((r,i,s)=>r+(n=>{if(n._$cssResult$===!0)return n.cssText;if(typeof n=="number")return n;throw Error("Value passed to 'css' function must be a 'css' function result: "+n+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+o[s+1],o[0]);return new J(t,o,Ne)},Re=(o,e)=>{pe?o.adoptedStyleSheets=e.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet):e.forEach(t=>{let r=document.createElement("style"),i=he.litNonce;i!==void 0&&r.setAttribute("nonce",i),r.textContent=t.cssText,o.appendChild(r)})},ue=pe?o=>o:o=>o instanceof CSSStyleSheet?(e=>{let t="";for(let r of e.cssRules)t+=r.cssText;return gt(t)})(o):o;var Oe,fe=window,vt=fe.trustedTypes,sr=vt?vt.emptyScript:"",yt=fe.reactiveElementPolyfillSupport,Le={toAttribute(o,e){switch(e){case Boolean:o=o?sr:null;break;case Object:case Array:o=o==null?o:JSON.stringify(o)}return o},fromAttribute(o,e){let t=o;switch(e){case Boolean:t=o!==null;break;case Number:t=o===null?null:Number(o);break;case Object:case Array:try{t=JSON.parse(o)}catch{t=null}}return t}},bt=(o,e)=>e!==o&&(e==e||o==o),Be={attribute:!0,type:String,converter:Le,reflect:!1,hasChanged:bt},He="finalized",B=class extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this._$Eu()}static addInitializer(e){var t;this.finalize(),((t=this.h)!==null&&t!==void 0?t:this.h=[]).push(e)}static get observedAttributes(){this.finalize();let e=[];return this.elementProperties.forEach((t,r)=>{let i=this._$Ep(r,t);i!==void 0&&(this._$Ev.set(i,r),e.push(i))}),e}static createProperty(e,t=Be){if(t.state&&(t.attribute=!1),this.finalize(),this.elementProperties.set(e,t),!t.noAccessor&&!this.prototype.hasOwnProperty(e)){let r=typeof e=="symbol"?Symbol():"__"+e,i=this.getPropertyDescriptor(e,r,t);i!==void 0&&Object.defineProperty(this.prototype,e,i)}}static getPropertyDescriptor(e,t,r){return{get(){return this[t]},set(i){let s=this[e];this[t]=i,this.requestUpdate(e,s,r)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)||Be}static finalize(){if(this.hasOwnProperty(He))return!1;this[He]=!0;let e=Object.getPrototypeOf(this);if(e.finalize(),e.h!==void 0&&(this.h=[...e.h]),this.elementProperties=new Map(e.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){let t=this.properties,r=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(let i of r)this.createProperty(i,t[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(e){let t=[];if(Array.isArray(e)){let r=new Set(e.flat(1/0).reverse());for(let i of r)t.unshift(ue(i))}else e!==void 0&&t.push(ue(e));return t}static _$Ep(e,t){let r=t.attribute;return r===!1?void 0:typeof r=="string"?r:typeof e=="string"?e.toLowerCase():void 0}_$Eu(){var e;this._$E_=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$Eg(),this.requestUpdate(),(e=this.constructor.h)===null||e===void 0||e.forEach(t=>t(this))}addController(e){var t,r;((t=this._$ES)!==null&&t!==void 0?t:this._$ES=[]).push(e),this.renderRoot!==void 0&&this.isConnected&&((r=e.hostConnected)===null||r===void 0||r.call(e))}removeController(e){var t;(t=this._$ES)===null||t===void 0||t.splice(this._$ES.indexOf(e)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach((e,t)=>{this.hasOwnProperty(t)&&(this._$Ei.set(t,this[t]),delete this[t])})}createRenderRoot(){var e;let t=(e=this.shadowRoot)!==null&&e!==void 0?e:this.attachShadow(this.constructor.shadowRootOptions);return Re(t,this.constructor.elementStyles),t}connectedCallback(){var e;this.renderRoot===void 0&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(e=this._$ES)===null||e===void 0||e.forEach(t=>{var r;return(r=t.hostConnected)===null||r===void 0?void 0:r.call(t)})}enableUpdating(e){}disconnectedCallback(){var e;(e=this._$ES)===null||e===void 0||e.forEach(t=>{var r;return(r=t.hostDisconnected)===null||r===void 0?void 0:r.call(t)})}attributeChangedCallback(e,t,r){this._$AK(e,r)}_$EO(e,t,r=Be){var i;let s=this.constructor._$Ep(e,r);if(s!==void 0&&r.reflect===!0){let n=(((i=r.converter)===null||i===void 0?void 0:i.toAttribute)!==void 0?r.converter:Le).toAttribute(t,r.type);this._$El=e,n==null?this.removeAttribute(s):this.setAttribute(s,n),this._$El=null}}_$AK(e,t){var r;let i=this.constructor,s=i._$Ev.get(e);if(s!==void 0&&this._$El!==s){let n=i.getPropertyOptions(s),c=typeof n.converter=="function"?{fromAttribute:n.converter}:((r=n.converter)===null||r===void 0?void 0:r.fromAttribute)!==void 0?n.converter:Le;this._$El=s,this[s]=c.fromAttribute(t,n.type),this._$El=null}}requestUpdate(e,t,r){let i=!0;e!==void 0&&(((r=r||this.constructor.getPropertyOptions(e)).hasChanged||bt)(this[e],t)?(this._$AL.has(e)||this._$AL.set(e,t),r.reflect===!0&&this._$El!==e&&(this._$EC===void 0&&(this._$EC=new Map),this._$EC.set(e,r))):i=!1),!this.isUpdatePending&&i&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(t){Promise.reject(t)}let e=this.scheduleUpdate();return e!=null&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var e;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach((i,s)=>this[s]=i),this._$Ei=void 0);let t=!1,r=this._$AL;try{t=this.shouldUpdate(r),t?(this.willUpdate(r),(e=this._$ES)===null||e===void 0||e.forEach(i=>{var s;return(s=i.hostUpdate)===null||s===void 0?void 0:s.call(i)}),this.update(r)):this._$Ek()}catch(i){throw t=!1,this._$Ek(),i}t&&this._$AE(r)}willUpdate(e){}_$AE(e){var t;(t=this._$ES)===null||t===void 0||t.forEach(r=>{var i;return(i=r.hostUpdated)===null||i===void 0?void 0:i.call(r)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(e){return!0}update(e){this._$EC!==void 0&&(this._$EC.forEach((t,r)=>this._$EO(r,this[r],t)),this._$EC=void 0),this._$Ek()}updated(e){}firstUpdated(e){}};B[He]=!0,B.elementProperties=new Map,B.elementStyles=[],B.shadowRootOptions={mode:"open"},yt?.({ReactiveElement:B}),((Oe=fe.reactiveElementVersions)!==null&&Oe!==void 0?Oe:fe.reactiveElementVersions=[]).push("1.6.3");var Ie,me=window,G=me.trustedTypes,xt=G?G.createPolicy("lit-html",{createHTML:o=>o}):void 0,Ue="$lit$",F=`lit$${(Math.random()+"").slice(9)}$`,Ct="?"+F,nr=`<${Ct}>`,V=document,ee=()=>V.createComment(""),te=o=>o===null||typeof o!="object"&&typeof o!="function",Mt=Array.isArray,ar=o=>Mt(o)||typeof o?.[Symbol.iterator]=="function",Fe=`[
3
- \f\r]`,Q=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,wt=/-->/g,_t=/>/g,D=RegExp(`>|${Fe}(?:([^\\s"'>=/]+)(${Fe}*=${Fe}*(?:[^
4
- \f\r"'\`<>=]|("|')|))|$)`,"g"),$t=/'/g,Et=/"/g,Tt=/^(?:script|style|textarea|title)$/i,kt=o=>(e,...t)=>({_$litType$:o,strings:e,values:t}),b=kt(1),C=kt(2),L=Symbol.for("lit-noChange"),$=Symbol.for("lit-nothing"),St=new WeakMap,z=V.createTreeWalker(V,129,null,!1);function Pt(o,e){if(!Array.isArray(o)||!o.hasOwnProperty("raw"))throw Error("invalid template strings array");return xt!==void 0?xt.createHTML(e):e}var lr=(o,e)=>{let t=o.length-1,r=[],i,s=e===2?"<svg>":"",n=Q;for(let c=0;c<t;c++){let a=o[c],d,l,h=-1,u=0;for(;u<a.length&&(n.lastIndex=u,l=n.exec(a),l!==null);)u=n.lastIndex,n===Q?l[1]==="!--"?n=wt:l[1]!==void 0?n=_t:l[2]!==void 0?(Tt.test(l[2])&&(i=RegExp("</"+l[2],"g")),n=D):l[3]!==void 0&&(n=D):n===D?l[0]===">"?(n=i??Q,h=-1):l[1]===void 0?h=-2:(h=n.lastIndex-l[2].length,d=l[1],n=l[3]===void 0?D:l[3]==='"'?Et:$t):n===Et||n===$t?n=D:n===wt||n===_t?n=Q:(n=D,i=void 0);let f=n===D&&o[c+1].startsWith("/>")?" ":"";s+=n===Q?a+nr:h>=0?(r.push(d),a.slice(0,h)+Ue+a.slice(h)+F+f):a+F+(h===-2?(r.push(void 0),c):f)}return[Pt(o,s+(o[t]||"<?>")+(e===2?"</svg>":"")),r]},oe=class o{constructor({strings:e,_$litType$:t},r){let i;this.parts=[];let s=0,n=0,c=e.length-1,a=this.parts,[d,l]=lr(e,t);if(this.el=o.createElement(d,r),z.currentNode=this.el.content,t===2){let h=this.el.content,u=h.firstChild;u.remove(),h.append(...u.childNodes)}for(;(i=z.nextNode())!==null&&a.length<c;){if(i.nodeType===1){if(i.hasAttributes()){let h=[];for(let u of i.getAttributeNames())if(u.endsWith(Ue)||u.startsWith(F)){let f=l[n++];if(h.push(u),f!==void 0){let m=i.getAttribute(f.toLowerCase()+Ue).split(F),x=/([.?@])?(.*)/.exec(f);a.push({type:1,index:s,name:x[2],strings:m,ctor:x[1]==="."?De:x[1]==="?"?ze:x[1]==="@"?Ve:q})}else a.push({type:6,index:s})}for(let u of h)i.removeAttribute(u)}if(Tt.test(i.tagName)){let h=i.textContent.split(F),u=h.length-1;if(u>0){i.textContent=G?G.emptyScript:"";for(let f=0;f<u;f++)i.append(h[f],ee()),z.nextNode(),a.push({type:2,index:++s});i.append(h[u],ee())}}}else if(i.nodeType===8)if(i.data===Ct)a.push({type:2,index:s});else{let h=-1;for(;(h=i.data.indexOf(F,h+1))!==-1;)a.push({type:7,index:s}),h+=F.length-1}s++}}static createElement(e,t){let r=V.createElement("template");return r.innerHTML=e,r}};function Z(o,e,t=o,r){var i,s,n,c;if(e===L)return e;let a=r!==void 0?(i=t._$Co)===null||i===void 0?void 0:i[r]:t._$Cl,d=te(e)?void 0:e._$litDirective$;return a?.constructor!==d&&((s=a?._$AO)===null||s===void 0||s.call(a,!1),d===void 0?a=void 0:(a=new d(o),a._$AT(o,t,r)),r!==void 0?((n=(c=t)._$Co)!==null&&n!==void 0?n:c._$Co=[])[r]=a:t._$Cl=a),a!==void 0&&(e=Z(o,a._$AS(o,e.values),a,r)),e}var je=class{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){var t;let{el:{content:r},parts:i}=this._$AD,s=((t=e?.creationScope)!==null&&t!==void 0?t:V).importNode(r,!0);z.currentNode=s;let n=z.nextNode(),c=0,a=0,d=i[0];for(;d!==void 0;){if(c===d.index){let l;d.type===2?l=new re(n,n.nextSibling,this,e):d.type===1?l=new d.ctor(n,d.name,d.strings,this,e):d.type===6&&(l=new Ye(n,this,e)),this._$AV.push(l),d=i[++a]}c!==d?.index&&(n=z.nextNode(),c++)}return z.currentNode=V,s}v(e){let t=0;for(let r of this._$AV)r!==void 0&&(r.strings!==void 0?(r._$AI(e,r,t),t+=r.strings.length-2):r._$AI(e[t])),t++}},re=class o{constructor(e,t,r,i){var s;this.type=2,this._$AH=$,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=r,this.options=i,this._$Cp=(s=i?.isConnected)===null||s===void 0||s}get _$AU(){var e,t;return(t=(e=this._$AM)===null||e===void 0?void 0:e._$AU)!==null&&t!==void 0?t:this._$Cp}get parentNode(){let e=this._$AA.parentNode,t=this._$AM;return t!==void 0&&e?.nodeType===11&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=Z(this,e,t),te(e)?e===$||e==null||e===""?(this._$AH!==$&&this._$AR(),this._$AH=$):e!==this._$AH&&e!==L&&this._(e):e._$litType$!==void 0?this.g(e):e.nodeType!==void 0?this.$(e):ar(e)?this.T(e):this._(e)}k(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}$(e){this._$AH!==e&&(this._$AR(),this._$AH=this.k(e))}_(e){this._$AH!==$&&te(this._$AH)?this._$AA.nextSibling.data=e:this.$(V.createTextNode(e)),this._$AH=e}g(e){var t;let{values:r,_$litType$:i}=e,s=typeof i=="number"?this._$AC(e):(i.el===void 0&&(i.el=oe.createElement(Pt(i.h,i.h[0]),this.options)),i);if(((t=this._$AH)===null||t===void 0?void 0:t._$AD)===s)this._$AH.v(r);else{let n=new je(s,this),c=n.u(this.options);n.v(r),this.$(c),this._$AH=n}}_$AC(e){let t=St.get(e.strings);return t===void 0&&St.set(e.strings,t=new oe(e)),t}T(e){Mt(this._$AH)||(this._$AH=[],this._$AR());let t=this._$AH,r,i=0;for(let s of e)i===t.length?t.push(r=new o(this.k(ee()),this.k(ee()),this,this.options)):r=t[i],r._$AI(s),i++;i<t.length&&(this._$AR(r&&r._$AB.nextSibling,i),t.length=i)}_$AR(e=this._$AA.nextSibling,t){var r;for((r=this._$AP)===null||r===void 0||r.call(this,!1,!0,t);e&&e!==this._$AB;){let i=e.nextSibling;e.remove(),e=i}}setConnected(e){var t;this._$AM===void 0&&(this._$Cp=e,(t=this._$AP)===null||t===void 0||t.call(this,e))}},q=class{constructor(e,t,r,i,s){this.type=1,this._$AH=$,this._$AN=void 0,this.element=e,this.name=t,this._$AM=i,this.options=s,r.length>2||r[0]!==""||r[1]!==""?(this._$AH=Array(r.length-1).fill(new String),this.strings=r):this._$AH=$}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(e,t=this,r,i){let s=this.strings,n=!1;if(s===void 0)e=Z(this,e,t,0),n=!te(e)||e!==this._$AH&&e!==L,n&&(this._$AH=e);else{let c=e,a,d;for(e=s[0],a=0;a<s.length-1;a++)d=Z(this,c[r+a],t,a),d===L&&(d=this._$AH[a]),n||(n=!te(d)||d!==this._$AH[a]),d===$?e=$:e!==$&&(e+=(d??"")+s[a+1]),this._$AH[a]=d}n&&!i&&this.j(e)}j(e){e===$?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}},De=class extends q{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===$?void 0:e}},cr=G?G.emptyScript:"",ze=class extends q{constructor(){super(...arguments),this.type=4}j(e){e&&e!==$?this.element.setAttribute(this.name,cr):this.element.removeAttribute(this.name)}},Ve=class extends q{constructor(e,t,r,i,s){super(e,t,r,i,s),this.type=5}_$AI(e,t=this){var r;if((e=(r=Z(this,e,t,0))!==null&&r!==void 0?r:$)===L)return;let i=this._$AH,s=e===$&&i!==$||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,n=e!==$&&(i===$||s);s&&this.element.removeEventListener(this.name,this,i),n&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){var t,r;typeof this._$AH=="function"?this._$AH.call((r=(t=this.options)===null||t===void 0?void 0:t.host)!==null&&r!==void 0?r:this.element,e):this._$AH.handleEvent(e)}},Ye=class{constructor(e,t,r){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=r}get _$AU(){return this._$AM._$AU}_$AI(e){Z(this,e)}};var At=me.litHtmlPolyfillSupport;At?.(oe,re),((Ie=me.litHtmlVersions)!==null&&Ie!==void 0?Ie:me.litHtmlVersions=[]).push("2.8.0");var Nt=(o,e,t)=>{var r,i;let s=(r=t?.renderBefore)!==null&&r!==void 0?r:e,n=s._$litPart$;if(n===void 0){let c=(i=t?.renderBefore)!==null&&i!==void 0?i:null;s._$litPart$=n=new re(e.insertBefore(ee(),c),c,void 0,t??{})}return n._$AI(o),n};var We,Ge;var R=class extends B{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var e,t;let r=super.createRenderRoot();return(e=(t=this.renderOptions).renderBefore)!==null&&e!==void 0||(t.renderBefore=r.firstChild),r}update(e){let t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=Nt(t,this.renderRoot,this.renderOptions)}connectedCallback(){var e;super.connectedCallback(),(e=this._$Do)===null||e===void 0||e.setConnected(!0)}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this._$Do)===null||e===void 0||e.setConnected(!1)}render(){return L}};R.finalized=!0,R._$litElement$=!0,(We=globalThis.litElementHydrateSupport)===null||We===void 0||We.call(globalThis,{LitElement:R});var Rt=globalThis.litElementPolyfillSupport;Rt?.({LitElement:R});((Ge=globalThis.litElementVersions)!==null&&Ge!==void 0?Ge:globalThis.litElementVersions=[]).push("3.3.3");var dr=(o,e)=>e.kind==="method"&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(t){t.createProperty(e.key,o)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){typeof e.initializer=="function"&&(this[e.key]=e.initializer.call(this))},finisher(t){t.createProperty(e.key,o)}},hr=(o,e,t)=>{e.constructor.createProperty(t,o)};function E(o){return(e,t)=>t!==void 0?hr(o,e,t):dr(o,e)}var Ze,pa=((Ze=window.HTMLSlotElement)===null||Ze===void 0?void 0:Ze.prototype.assignedElements)!=null?(o,e)=>o.assignedElements(e):(o,e)=>o.assignedNodes(e).filter(t=>t.nodeType===Node.ELEMENT_NODE);var H=({title:o,children:e})=>b`
5
- <div class="error-background">
6
- <div class="error-container">
7
- <span class="error-title"
8
- ><span class="error-badge">Error</span>${o}</span
9
- >
10
- <span class="error-description">${e}</span>
11
- </div>
12
- </div>
13
- `,Ot=A`
14
- .error-background {
15
- position: absolute;
16
- top: 0;
17
- left: 0;
18
- width: 100%;
19
- height: 100%;
20
-
21
- background: var(--error-bg);
22
- color: var(--error-fg);
23
- }
24
-
25
- .error-container {
26
- max-width: 800px;
27
- margin: auto;
28
- padding: 1em;
29
- }
30
-
31
- .error-badge {
32
- display: inline-block;
33
- font-size: 0.8em;
34
- padding: 0.2em 0.5em;
35
- margin-inline-end: 0.5em;
36
-
37
- background: var(--error-color);
38
- border-radius: 2px;
39
- color: var(--error-bg);
40
- text-transform: uppercase;
41
- }
42
-
43
- .error-title {
44
- display: block;
45
- font-size: 1.2em;
46
-
47
- font-weight: bold;
48
- text-transform: capitalize;
49
- }
50
-
51
- .error-description {
52
- display: block;
53
- margin-block-start: 1em;
54
- }
55
- `;var Bt={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},Lt=o=>(...e)=>({_$litDirective$:o,values:e}),ge=class{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,r){this._$Ct=e,this._$AM=t,this._$Ci=r}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}};var Ht="important",pr=" !"+Ht,Y=Lt(class extends ge{constructor(o){var e;if(super(o),o.type!==Bt.ATTRIBUTE||o.name!=="style"||((e=o.strings)===null||e===void 0?void 0:e.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(o){return Object.keys(o).reduce((e,t)=>{let r=o[t];return r==null?e:e+`${t=t.includes("-")?t:t.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${r};`},"")}update(o,[e]){let{style:t}=o.element;if(this.ht===void 0){this.ht=new Set;for(let r in e)this.ht.add(r);return this.render(e)}this.ht.forEach(r=>{e[r]==null&&(this.ht.delete(r),r.includes("-")?t.removeProperty(r):t[r]="")});for(let r in e){let i=e[r];if(i!=null){this.ht.add(r);let s=typeof i=="string"&&i.endsWith(pr);r.includes("-")||s?t.setProperty(r,s?i.slice(0,-11):i,s?Ht:""):t[r]=i}}return L}});function It(o){return{top:o.y,right:o.x+o.width,bottom:o.y+o.height,left:o.x}}function Ut(o,e){let t=It(o),r=It(e),i=!(t.top>r.bottom||t.bottom<r.top),s=!(t.left>r.right||t.right<r.left);if(s&&i){let l={x:(Math.max(t.left,r.left)+Math.min(t.right,r.right))/2,y:(Math.max(t.top,r.top)+Math.min(t.bottom,r.bottom))/2};return[{points:[{x:t.left,y:l.y},{x:r.left,y:l.y}]},{points:[{x:t.right,y:l.y},{x:r.right,y:l.y}]},{points:[{y:t.top,x:l.x},{y:r.top,x:l.x}]},{points:[{y:t.bottom,x:l.x},{y:r.bottom,x:l.x}]}]}let n=t.left>r.right,c=t.top>r.bottom,a={x:o.x+o.width/2,y:o.y+o.height/2};return[s?null:{points:[{x:n?t.left:t.right,y:a.y},{x:n?r.right:r.left,y:a.y}],bisector:i?void 0:[{x:n?r.right:r.left,y:a.y},{x:n?r.right:r.left,y:c?r.bottom:r.top}]},i?null:{points:[{y:c?t.top:t.bottom,x:a.x},{y:c?r.bottom:r.top,x:a.x}],bisector:s?void 0:[{y:c?r.bottom:r.top,x:a.x},{y:c?r.bottom:r.top,x:n?r.right:r.left}]}].filter(l=>!!l)}function se(o){return Math.round(o*100)/100}function ve(o,e){return[...Ft(o),...Ft(e)]}function Ft(o){return o?o instanceof Array?o:[o]:[]}var ur=function(o,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(o,e,t,r);else for(var c=o.length-1;c>=0;c--)(n=o[c])&&(s=(i<3?n(s):i>3?n(e,t,s):n(e,t))||s);return i>3&&s&&Object.defineProperty(e,t,s),s},jt=o=>{class e extends o{constructor(...r){super(...r),this.selectedNode=null}updated(r){super.updated(r),r.has("selectedNode")&&this.dispatchEvent(new CustomEvent("nodeselect",{detail:{selectedNode:this.selectedNode}}))}}return ur([E({attribute:!1})],e.prototype,"selectedNode",void 0),e};function ye(o){return o.touches.length===0||o.touches.length>2}function fr(o,e){return Math.sqrt(Math.pow(o.x-e.x,2)+Math.pow(o.y-e.y,2))}var Dt=o=>class extends o{constructor(...t){super(...t),this.previousTouches=null,this.addEventListener("touchstart",r=>{ye(r)||(r.preventDefault(),this.previousTouches=r.touches)}),this.addEventListener("touchend",r=>{ye(r)||(r.preventDefault(),this.previousTouches=null)}),this.addEventListener("touchcancel",r=>{ye(r)||(r.preventDefault(),this.previousTouches=null)}),this.addEventListener("touchmove",r=>{if(ye(r))return;let i=Array.from(this.previousTouches||[]),s=Array.from(r.touches);if(this.previousTouches=r.touches,!(s.length!==i.length||!s.every(n=>i.some(c=>c.identifier===n.identifier)))){if(s.length===1){this.onTouchPan({x:s[0].pageX-i[0].pageX,y:s[0].pageY-i[0].pageY});return}this.onTouchPinch(fr({x:s[0].pageX,y:s[0].pageY},{x:i[0].pageX,y:i[0].pageY}))}})}get isTouching(){return!!(this.previousTouches&&this.previousTouches.length>0)}onTouchPan(t){}onTouchPinch(t){}};var ne=function(o,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(o,e,t,r);else for(var c=o.length-1;c>=0;c--)(n=o[c])&&(s=(i<3?n(s):i>3?n(e,t,s):n(e,t))||s);return i>3&&s&&Object.defineProperty(e,t,s),s},O=function(o,e,t,r){if(t==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?o!==e||!r:!e.has(o))throw new TypeError("Cannot read private member from an object whose class did not declare it");return t==="m"?r:t==="a"?r.call(o):r?r.value:e.get(o)},zt=function(o,e,t,r,i){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?o!==e||!i:!e.has(o))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?i.call(o,t):i?i.value=t:e.set(o,t),t},Vt=o=>{var e,t,r,i,s;class n extends Dt(o){constructor(...a){super(...a),this.panX=0,this.panY=0,this.scale=1,this.zoomSpeed=500,this.panSpeed=500,e.set(this,!1),t.set(this,(l,h)=>{this.panX+=l/this.scale/window.devicePixelRatio,this.panY+=h/this.scale/window.devicePixelRatio}),r.set(this,l=>{l.code==="Space"&&!O(this,e,"f")&&(zt(this,e,!0,"f"),document.body.style.cursor="grab")}),i.set(this,l=>{l.code==="Space"&&O(this,e,"f")&&(zt(this,e,!1,"f"),document.body.style.cursor="auto")}),s.set(this,()=>{document.addEventListener("keyup",O(this,i,"f")),document.addEventListener("keydown",O(this,r,"f"))}),this.addEventListener("wheel",l=>{if(this.isMovable)if(l.preventDefault(),l.ctrlKey){let{deltaY:h}=l;l.deltaMode===1&&(h*=15);let u=this.scale;this.scale*=1-h/((1e3-this.zoomSpeed)*.5);let f=l.offsetX-this.offsetWidth/2,m=l.offsetY-this.offsetHeight/2;this.panX+=f/this.scale-f/u,this.panY+=m/this.scale-m/u}else{let h=this.panSpeed*.002;this.panX-=l.deltaX*h/this.scale,this.panY-=l.deltaY*h/this.scale}},{passive:!1});let d=1;this.addEventListener("gesturestart",l=>{l.preventDefault(),d=this.scale}),this.addEventListener("gesturechange",l=>{let h=l;h.preventDefault(),this.scale=d*h.scale}),this.addEventListener("pointermove",l=>{l.buttons&4&&(l.preventDefault(),O(this,t,"f").call(this,l.movementX,l.movementY))}),O(this,s,"f").call(this),this.onmousedown=()=>{O(this,e,"f")&&(document.body.style.cursor="grabbing",this.onmousemove=({movementX:l,movementY:h})=>{O(this,t,"f").call(this,l,h)},this.onmouseup=()=>{document.body.style.cursor="grab",this.onmousemove=null,this.onmouseup=null})}}get isMovable(){return!0}get canvasTransform(){return[`scale(${this.scale})`,`translate(${this.panX}px, ${this.panY}px)`]}disconnectedCallback(){document.removeEventListener("keyup",O(this,i,"f")),document.removeEventListener("keydown",O(this,r,"f")),super.disconnectedCallback()}updated(a){super.updated(a),a.has("scale")&&this.dispatchEvent(new CustomEvent("scalechange",{detail:{scale:this.scale}})),(a.has("panX")||a.has("panY"))&&this.dispatchEvent(new CustomEvent("positionchange",{detail:{x:this.panX,y:this.panY}}))}onTouchPan(a){this.panX+=a.x/this.scale,this.panY+=a.y/this.scale}onTouchPinch(a){this.scale*=1-a/1e3}}return e=new WeakMap,t=new WeakMap,r=new WeakMap,i=new WeakMap,s=new WeakMap,ne([E({attribute:!1})],n.prototype,"panX",void 0),ne([E({attribute:!1})],n.prototype,"panY",void 0),ne([E({attribute:!1})],n.prototype,"scale",void 0),ne([E({type:Number,attribute:"zoom-speed"})],n.prototype,"zoomSpeed",void 0),ne([E({type:Number,attribute:"pan-speed"})],n.prototype,"panSpeed",void 0),n};var mr=({guide:o,reverseScale:e})=>{let t=Math.abs(o.points[0].x-o.points[1].x),r=Math.abs(o.points[0].y-o.points[1].y);return t===0&&r===0?null:C`
56
- <line
57
- class="distance-line"
58
- x1=${o.points[0].x}
59
- y1=${o.points[0].y}
60
- x2=${o.points[1].x}
61
- y2=${o.points[1].y}
62
- />
63
-
64
- ${o.bisector&&C`
65
- <line
66
- class="distance-line"
67
- x1=${o.bisector[0].x}
68
- y1=${o.bisector[0].y}
69
- x2=${o.bisector[1].x}
70
- y2=${o.bisector[1].y}
71
- style=${Y({strokeDasharray:`${4*e}`})}
72
- shape-rendering="geometricPrecision"
73
- fill="none"
74
- />
75
- `}
76
- `},gr=({guide:o,reverseScale:e,fontSize:t})=>{let r=Math.abs(o.points[0].x-o.points[1].x),i=Math.abs(o.points[0].y-o.points[1].y);if(r===0&&i===0)return null;let s=se(Math.max(r,i)).toString(10),n=s.length*t*.5,c=t*.25,a=t*.25,d=t*.5,l=r>i?(o.points[0].x+o.points[1].x)/2-n/2:o.points[0].x,h=r>i?o.points[0].y:(o.points[0].y+o.points[1].y)/2-t/2,u=[`scale(${e})`,r>i?`translate(0, ${c+a})`:`translate(${c+d}, 0)`].join(" "),f=l+n/2,m=h+t/2,x=r>i?`${f} ${h}`:`${l} ${m}`;return C`
77
- <g class="distance-tooltip">
78
- <rect
79
- x=${l-d}
80
- y=${h-a}
81
- rx="2"
82
- width=${n+d*2}
83
- height=${t+a*2}
84
- transform=${u}
85
- transform-origin=${x}
86
- stroke="none"
87
- />
88
-
89
- <text
90
- x=${f}
91
- y=${h+t-a/2}
92
- text-anchor="middle"
93
- transform=${u}
94
- transform-origin=${x}
95
- stroke="none"
96
- fill="white"
97
- style="font-size: ${t}px"
98
- >
99
- ${s}
100
- </text>
101
- </g>
102
- `},Yt=new Map,Wt=({node:o,distanceTo:e,reverseScale:t,fontSize:r})=>{let i=o.id+`
103
- `+e.id,s=Yt.get(i);return s||(s=Ut(o.absoluteBoundingBox,e.absoluteBoundingBox),Yt.set(i,s)),[...s.map(n=>mr({guide:n,reverseScale:t})),...s.map(n=>gr({guide:n,reverseScale:t,fontSize:r}))]},Gt=A`
104
- .distance-line {
105
- shape-rendering: geometricPrecision;
106
- fill: none;
107
- opacity: 0;
108
- }
109
-
110
- .distance-tooltip {
111
- opacity: 0;
112
- }
113
-
114
- .guide:hover ~ .distance-line,
115
- .guide:hover ~ .distance-tooltip {
116
- opacity: 1;
117
- }
118
- `;var Zt=({onClick:o=()=>{}})=>C`
119
- <svg @click=${o} title="close icon" width="14" height="14" viewBox="0 0 20 20" fill="none">
120
- <path d="M1 19L19 1M19 19L1 1" stroke="#B3B3B3" stroke-width="2"/>
121
- </svg>
122
- `,Xe=({onClick:o=()=>{}})=>C`
123
- <svg @click=${o} title="copy icon" width="14" height="14" viewBox="0 0 30 30" fill="none">
124
- <path d="M21 25.5C21 24.9477 20.5523 24.5 20 24.5C19.4477 24.5 19 24.9477 19 25.5H21ZM13 2H25V0H13V2ZM28 5V21H30V5H28ZM25 24H13V26H25V24ZM10 21V5H8V21H10ZM13 24C11.3431 24 10 22.6569 10 21H8C8 23.7614 10.2386 26 13 26V24ZM28 21C28 22.6569 26.6569 24 25 24V26C27.7614 26 30 23.7614 30 21H28ZM25 2C26.6569 2 28 3.34315 28 5H30C30 2.23858 27.7614 0 25 0V2ZM13 0C10.2386 0 8 2.23858 8 5H10C10 3.34315 11.3431 2 13 2V0ZM16.5 28H5V30H16.5V28ZM2 25V10H0V25H2ZM5 28C3.34315 28 2 26.6569 2 25H0C0 27.7614 2.23858 30 5 30V28ZM5 7H8V5H5V7ZM2 10C2 8.34315 3.34315 7 5 7V5C2.23858 5 0 7.23858 0 10H2ZM16.5 30C18.9853 30 21 27.9853 21 25.5H19C19 26.8807 17.8807 28 16.5 28V30Z" fill="#B3B3B3"/>
125
- </svg>
126
- `,qt=()=>C`
127
- <svg title="horizontal padding" width="14" height="14" viewBox="0 0 29 28" fill="none">
128
- <rect x="7" y="8" width="14" height="14" stroke="#B3B3B3" stroke-width="2"/>
129
- <path d="M27 1V28" stroke="#B3B3B3" stroke-width="2"/>
130
- <path d="M1 0V28" stroke="#B3B3B3" stroke-width="2"/>
131
- </svg>
132
- `,Xt=()=>C`
133
- <svg title="vertical padding" width="14" height="14" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
134
- <rect x="8" y="21" width="14" height="14" transform="rotate(-90 8 21)" stroke="#B3B3B3" stroke-width="2"/>
135
- <path d="M1 1L28 0.999999" stroke="#B3B3B3" stroke-width="2"/>
136
- <path d="M0 27L28 27" stroke="#B3B3B3" stroke-width="2"/>
137
- </svg>
138
- `,Kt=()=>C`
139
- <svg title="figma logo" width="11" height="16" viewBox="0 0 12 17" xmlns="http://www.w3.org/2000/svg">
140
- <path
141
- d="M5.5 1.5h-2c-1.105 0-2 .895-2 2 0 1.105.895 2 2 2h2v-4zm-5 2c0 1.043.533 1.963 1.341 2.5C1.033 6.537.5 7.457.5 8.5c0 1.043.533 1.963 1.341 2.5C1.033 11.537.5 12.457.5 13.5c0 1.657 1.343 3 3 3 1.657 0 3-1.343 3-3V10.736c.53.475 1.232.764 2 .764 1.657 0 3-1.343 3-3 0-1.043-.533-1.963-1.341-2.5.808-.537 1.341-1.457 1.341-2.5 0-1.657-1.343-3-3-3h-5c-1.657 0-3 1.343-3 3zm1 5c0-1.105.895-2 2-2h2v4h-2c-1.105 0-2-.895-2-2zm0 5c0-1.105.895-2 2-2h2v2c0 1.105-.895 2-2 2-1.105 0-2-.895-2-2zm7-3c-1.105 0-2-.895-2-2 0-1.105.895-2 2-2 1.105 0 2 .895 2 2 0 1.105-.895 2-2 2zm0-5h-2v-4h2c1.105 0 2 .895 2 2 0 1.105-.895 2-2 2z"
142
- fill-rule="evenodd"
143
- fill-opacity="1"
144
- fill="#000"
145
- stroke="none"
146
- ></path>
147
- </svg>
148
- `;var X=o=>o.a===0?"transparent":o.a<1?`rgba(${Jt(o).join(", ")}, ${o.a.toFixed(2)})`:br(o),yr=o=>new Ke(o).cssColor,Ke=class{constructor(e){this.gradientHandles={start:e.gradientHandlePositions[0],end:e.gradientHandlePositions[1]},this.colors=e.gradientStops,this.colorObjects=this.createColorObjects(this.colors),this.angle=this.calculateAngle(this.gradientHandles.start,this.gradientHandles.end)}get cssGradientArray(){return this.colorObjects.map((e,t)=>{let r=this.floatToPercent(this.colors[t].position);return e+" "+r})}get cssColor(){let e=this.cssGradientArray;return e.unshift(this.angle+"deg"),`linear-gradient(${e.join(", ")})`}createColorObjects(e){return e.map(({color:t})=>X(t))}floatToPercent(e){return(e*=100).toFixed(0)+"%"}calculateAngle(e,t){let r=Math.atan(this.calculateGradient(e,t));return parseInt(this.radToDeg(r).toFixed(1))}calculateGradient(e,t){return(t.y-e.y)/(t.x-e.x)*-1}radToDeg(e){return 180*e/Math.PI}},be=class{constructor(e){var t,r,i;if(this.hasPadding=!1,this.height=`${Math.trunc(e.absoluteBoundingBox.height)}px`,this.width=`${Math.trunc(e.absoluteBoundingBox.width)}px`,(e.horizontalPadding||e.verticalPadding)&&(this.hasPadding=!0,this.horizontalPadding=`${e.horizontalPadding}px`,this.verticalPadding=`${e.verticalPadding}px`),e.style&&(this.fontFamily=e.style.fontFamily,this.fontPostScriptName=(t=e.style.fontPostScriptName)===null||t===void 0?void 0:t.replace("-"," "),this.fontWeight=e.style.fontWeight,this.fontSize=`${Math.ceil(e.style.fontSize)}px`,this.lineHeight=`${Math.trunc(e.style.lineHeightPx)}px`),e.rectangleCornerRadii&&(this.borderRadius=e.rectangleCornerRadii.filter(n=>n===e.cornerRadius).length<4?`${e.rectangleCornerRadii.join("px ")}px`:`${e.cornerRadius}px`),e.backgroundColor||e.backgroundColor){let n=e.backgroundColor||((r=e.background)===null||r===void 0?void 0:r[0].color);this.background=X(n)}let s=(i=e.fills)===null||i===void 0?void 0:i[0];if(s&&s.visible!==!1&&(e.type==="TEXT"?this.color=X(s.color):s.type.includes("GRADIENT")?this.backgroundImage=yr(s):s.type==="SOLID"&&(this.background=X(s.color))),e.strokes&&e.strokes.length>0&&(this.borderColor=X(e.strokes[0].color),this.border=`${e.strokeWeight}px solid ${this.borderColor}`),e.effects&&e.effects.length>0){let{offset:n,radius:c,color:a}=e.effects[0];this.boxShadowColor=X(a),this.boxShadow=`${n?.x||0}px ${n?.y||0}px 0 ${c} ${this.boxShadowColor}`}}getStyles(){return[this.height&&{property:"height",value:this.height},this.width&&{property:"width",value:this.width},this.fontFamily&&{property:"font-family",value:this.fontFamily},this.fontSize&&{property:"font-size",value:this.fontSize},this.fontWeight&&{property:"font-weight",value:this.fontWeight},this.lineHeight&&{property:"line-height",value:this.lineHeight},this.borderRadius&&{property:"border-radius",value:this.borderRadius},this.backgroundImage&&{property:"background-image",value:this.backgroundImage},this.boxShadow&&{property:"box-shadow",value:this.boxShadow,color:this.boxShadowColor},this.border&&{property:"border",value:this.border,color:this.borderColor},this.background&&{property:"background",value:this.background,color:this.background},this.color&&{property:"color",value:this.color,color:this.color}].filter(Boolean)}getStyleSheet(){return this.getStyles().map(Je).join(`
149
- `)}},Jt=o=>[Math.trunc(255*o.r),Math.trunc(255*o.g),Math.trunc(255*o.b)],br=o=>{let[e,t,r]=Jt(o);return"#"+((1<<24)+(e<<16)+(t<<8)+r).toString(16).slice(1)},Je=({property:o,value:e})=>`${o}: ${e};`;var xr=function(o,e,t,r){function i(s){return s instanceof t?s:new t(function(n){n(s)})}return new(t||(t=Promise))(function(s,n){function c(l){try{d(r.next(l))}catch(h){n(h)}}function a(l){try{d(r.throw(l))}catch(h){n(h)}}function d(l){l.done?s(l.value):i(l.value).then(c,a)}d((r=r.apply(o,e||[])).next())})},Qe=o=>xr(void 0,void 0,void 0,function*(){yield navigator.clipboard.writeText(o)}),Qt=({node:o,onClose:e})=>{if(!o)return null;let t=new be(o),r=i=>i.stopPropagation();return b`
150
- <div
151
- class="inspector-view"
152
- @click=${r}
153
- @wheel=${r}
154
- @keydown=${r}
155
- @keyup=${r}
156
- @pointermove=${r}
157
- >
158
- <div class="inspector-section selectable-content">
159
- <div class="title-section">
160
- <h4>${o.name}</h4>
161
- ${Zt({onClick:e})}
162
- </div>
163
- <div class="properties-overview">
164
- <div class="title-section">
165
- <p class="inspector-property">
166
- <span>W: </span>${t.width}
167
- </p>
168
- <p class="inspector-property" style="margin-left: 16px;">
169
- <span>H: </span>${t.height}
170
- </p>
171
- </div>
172
- ${t.fontPostScriptName?b`<p class="inspector-property">
173
- <span>Font:</span>
174
- ${t.fontPostScriptName}
175
- </p>`:null}
176
- </div>
177
- </div>
178
- ${t.hasPadding?b`<div class="inspector-section">
179
- <h4>Layout</h4>
180
- ${t.horizontalPadding&&b`<p class="inspector-property">
181
- ${qt()} ${t.horizontalPadding}
182
- </p>`}
183
- ${t.verticalPadding&&b`<p class="inspector-property">
184
- ${Xt()} ${t.verticalPadding}
185
- </p>`}
186
- </div>`:null}
187
- ${o.characters?b`<div class="inspector-section">
188
- <div class="title-section">
189
- <h4>Content</h4>
190
- ${Xe({onClick:()=>Qe(o.characters)})}
191
- </div>
192
- <p class="node-content code-section selectable-content">
193
- ${o.characters}
194
- </p>
195
- </div>`:null}
196
- ${wr(t)}
197
- </div>
198
- `},wr=o=>{let e=()=>Qe(o.getStyleSheet()),t=o.getStyles();return b`<div class="inspector-section">
199
- <div class="title-section style-section">
200
- <h4>CSS</h4>
201
- ${Xe({onClick:e})}
202
- </div>
203
- <div class="code-section selectable-content">
204
- ${t.map(_r)}
205
- </div>
206
- </div>`},_r=o=>{let{property:e,value:t,color:r}=o,i=null;switch(e){case"background":case"fill":case"border":case"box-shadow":case"color":i=b`<span
207
- class="color-preview"
208
- style="background-color: ${r}"
209
- ></span>`;break;case"background-image":i=b`<span
210
- class="color-preview"
211
- style="background-image: ${t}"
212
- ></span>`;break}return b`<div class="css-property" @click=${()=>Qe(Je(o))}>
213
- <span>${e}:</span>${i}<span class="css-value">${t}</span>;</span>
214
- </div>`},eo=A`
215
- .inspector-view {
216
- height: 100%;
217
- width: 300px;
218
- position: absolute;
219
- right: 0;
220
- background: white;
221
- border-left: 1px solid #ccc;
222
- overflow-y: auto;
223
- z-index: calc(var(--z-index) + 2);
224
- }
225
-
226
- .inspector-view h4 {
227
- font-size: 16px;
228
- margin: 0;
229
- }
230
-
231
- .style-section {
232
- margin-bottom: 12px;
233
- }
234
-
235
- .title-section {
236
- display: flex;
237
- align-items: center;
238
- }
239
-
240
- .code-section {
241
- padding: 8px;
242
- background: #f3f3f3;
243
- font-family: monospace;
244
- }
245
-
246
- .title-section svg {
247
- cursor: pointer;
248
- margin-left: auto;
249
- }
250
-
251
- .inspector-section {
252
- padding: 16px;
253
- border-bottom: 1px solid #eee;
254
- }
255
-
256
- .properties-overview {
257
- font-family: monospace;
258
- color: #518785;
259
- }
260
-
261
- .properties-overview p span {
262
- color: #121212;
263
- }
264
-
265
- .inspector-property {
266
- display: flex;
267
- align-items: center;
268
- margin-bottom: 0;
269
- }
270
-
271
- .inspector-property span {
272
- color: #b3b3b3;
273
- margin-right: 4px;
274
- }
275
-
276
- .inspector-property svg {
277
- margin-right: 8px;
278
- }
279
-
280
- .css-property {
281
- margin: 8px;
282
- transition: background-color ease-in-out 100ms;
283
- }
284
-
285
- .css-property:hover {
286
- cursor: pointer;
287
- background-color: #e8e8e8;
288
- }
289
-
290
- .css-value {
291
- color: #518785;
292
- margin-left: 4px;
293
- }
294
-
295
- .color-preview {
296
- display: inline-block;
297
- width: 12px;
298
- height: 12px;
299
- border: 1px solid #ccc;
300
- margin-left: 4px;
301
- vertical-align: middle;
302
- }
303
-
304
- .selectable-content {
305
- cursor: text;
306
- user-select: text;
307
- }
308
- `;var et=({node:o,selected:e=!1,computedThickness:t,onClick:r})=>{let{x:i,y:s,width:n,height:c}=o.absoluteBoundingBox,a="cornerRadius"in o&&o.cornerRadius?{topLeft:o.cornerRadius,topRight:o.cornerRadius,bottomRight:o.cornerRadius,bottomLeft:o.cornerRadius}:"rectangleCornerRadii"in o&&o.rectangleCornerRadii?{topLeft:o.rectangleCornerRadii[0],topRight:o.rectangleCornerRadii[1],bottomRight:o.rectangleCornerRadii[2],bottomLeft:o.rectangleCornerRadii[3]}:{topLeft:0,topRight:0,bottomRight:0,bottomLeft:0},d=t/2,l=(m,x)=>`M${m},${x}`,h=(m,x)=>`L${m},${x}`,u=(m,x,S)=>`A${m},${m} 0 0 1 ${x},${S}`,f=[l(a.topLeft+d,d),h(n-a.topRight,d),u(a.topRight-d,n-d,a.topRight),h(n-d,c-a.bottomRight),u(a.bottomRight-d,n-a.bottomRight,c-d),h(a.bottomLeft,c-d),u(a.bottomLeft-d,d,c-a.bottomLeft),h(d,a.topLeft),u(a.topLeft-d,a.topLeft,d),"Z"].join(" ");return C`
309
- <path
310
- class="guide"
311
- d=${f}
312
- shape-rendering="geometricPrecision"
313
- fill="none"
314
- transform="translate(${i}, ${s})"
315
- ?data-selected=${e}
316
- @click=${r}
317
- />
318
- `},to=({nodeSize:{x:o,y:e,width:t,height:r},offsetX:i,offsetY:s,reverseScale:n})=>{let c={top:`${s+e+r}px`,left:`${i+o+t/2}px`,transform:`translateX(-50%) scale(${n}) translateY(0.25em)`};return b`
319
- <div class="tooltip" style="${Y(c)}">
320
- ${se(t)} x ${se(r)}
321
- </div>
322
- `},oo=A`
323
- .guide {
324
- /*
325
- * SVGs cannot be pixel perfect, especially floating values.
326
- * Since many platform renders them visually incorrectly (probably they
327
- * are following the spec), it's safe to set overflow to visible.
328
- * Cropped borders are hard to visible and ugly.
329
- */
330
- overflow: visible;
331
-
332
- pointer-events: all;
333
-
334
- opacity: 0;
335
- }
336
- .guide:hover {
337
- opacity: 1;
338
- }
339
- .guide[data-selected] {
340
- opacity: 1;
341
- stroke: var(--guide-selected-color);
342
- }
343
-
344
- .tooltip {
345
- position: absolute;
346
- padding: 0.25em 0.5em;
347
- font-size: var(--guide-tooltip-font-size);
348
-
349
- color: var(--guide-selected-tooltip-fg);
350
- background-color: var(--guide-selected-tooltip-bg);
351
- border-radius: 2px;
352
- pointer-events: none;
353
- z-index: calc(var(--z-index) + 1);
354
-
355
- transform-origin: top center;
356
- }
357
- `;var Sr=[{gte:31536e6,divisor:31536e6,unit:"year"},{gte:2592e6,divisor:2592e6,unit:"month"},{gte:6048e5,divisor:6048e5,unit:"week"},{gte:864e5,divisor:864e5,unit:"day"},{gte:36e5,divisor:36e5,unit:"hour"},{gte:6e4,divisor:6e4,unit:"minute"},{gte:3e4,divisor:1e3,unit:"seconds"},{gte:0,divisor:1,text:"just now"}],ro=o=>(typeof o=="object"?o:new Date(o)).getTime(),io=(o,e=Date.now(),t=new Intl.RelativeTimeFormat(void 0,{numeric:"auto"}))=>{let i=ro(e)-ro(o),s=Math.abs(i);for(let n of Sr)if(s>=n.gte){let c=Math.round(Math.abs(i)/n.divisor),a=i<0,d=n.unit;return d?t.format(a?c:-c,d):n.text}};var so=A`
358
- .figma-footer {
359
- flex: 0;
360
- z-index: calc(var(--z-index) + 1);
361
- border-top: 1px solid #ccc;
362
- min-height: 48px;
363
- padding: 0 16px;
364
- text-decoration: none;
365
- display: flex;
366
- flex-direction: row;
367
- justify-content: start;
368
- align-items: center;
369
- background-color: #fff;
370
- overflow-x: auto;
371
- cursor: pointer;
372
- font-size: 12px;
373
- color: rgba(0, 0, 0, 0.8);
374
- }
375
-
376
- .figma-footer--icon {
377
- margin-right: 12px;
378
- }
379
-
380
- .figma-footer--title {
381
- font-weight: 600;
382
- margin-right: 4px;
383
-
384
- white-space: nowrap;
385
- overflow: hidden;
386
- text-overflow: ellipsis;
387
- }
388
-
389
- .figma-footer--timestamp {
390
- white-space: nowrap;
391
- overflow: hidden;
392
- }
393
- `,no=o=>{if(!o||!o.link||o.link===void 0||o.link==="undefined")return null;let{link:e,timestamp:t,fileName:r}=o;return b`<a
394
- class="figma-footer"
395
- target="_blank"
396
- rel="noopener"
397
- title="Open in Figma"
398
- href="${e}"
399
- >
400
- <span class="figma-footer--icon"> ${Kt()} </span>
401
- <span class="figma-footer--title"> ${r} </span>
402
- <span
403
- title="Last time edited: ${new Date(t).toUTCString()}"
404
- class="figma-footer--timestamp"
405
- >
406
- Edited ${io(t)}
407
- </span>
408
- </a>`};var ao=function(o,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(o,e,t,r);else for(var c=o.length-1;c>=0;c--)(n=o[c])&&(s=(i<3?n(s):i>3?n(e,t,s):n(e,t))||s);return i>3&&s&&Object.defineProperty(e,t,s),s},M=function(o,e,t,r){if(t==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?o!==e||!r:!e.has(o))throw new TypeError("Cannot read private member from an object whose class did not declare it");return t==="m"?r:t==="a"?r.call(o):r?r.value:e.get(o)},tt=function(o,e,t,r,i){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?o!==e||!i:!e.has(o))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?i.call(o,t):i?i.value=t:e.set(o,t),t},we=o=>{var e,t,r,i,s;class n extends jt(Vt(o)){constructor(...a){super(...a),this.zoomMargin=50,this.link="",e.set(this,void 0),t.set(this,void 0),r.set(this,void 0),i.set(this,d=>l=>{l.preventDefault(),l.stopPropagation(),this.selectedNode=d}),s.set(this,d=>{var l,h;return(h=(l=M(this,r,"f"))===null||l===void 0?void 0:l.find(u=>u.id===d))!==null&&h!==void 0?h:null})}static get styles(){let a=super.styles;return ve(a,[A`
409
- :host {
410
- --default-error-bg: #fff;
411
- --default-error-fg: #333;
412
-
413
- --bg: var(--figspec-viewer-bg, #e5e5e5);
414
- --z-index: var(--figspec-viewer-z-index, 0);
415
- --error-bg: var(--figspec-viewer-error-bg, var(--default-error-bg));
416
- --error-fg: var(--figspec-viewer-error-fg, var(--default-error-fg));
417
- --error-color: var(--figspec-viewer-error-color, tomato);
418
-
419
- --guide-thickness: var(--figspec-viewer-guide-thickness, 1.5px);
420
- --guide-color: var(--figspec-viewer-guide-color, tomato);
421
- --guide-selected-color: var(
422
- --figspec-viewer-guide-selected-color,
423
- dodgerblue
424
- );
425
- --guide-tooltip-fg: var(--figspec-viewer-guide-tooltip-fg, white);
426
- --guide-selected-tooltip-fg: var(
427
- --figspec-viewer-guide-selected-tooltip-fg,
428
- white
429
- );
430
- --guide-tooltip-bg: var(
431
- --figspec-viewer-guide-tooltip-bg,
432
- var(--guide-color)
433
- );
434
- --guide-selected-tooltip-bg: var(
435
- --figspec-viewer-guide-selected-tooltip-bg,
436
- var(--guide-selected-color)
437
- );
438
- --guide-tooltip-font-size: var(
439
- --figspec-viewer-guide-tooltip-font-size,
440
- 12px
441
- );
442
-
443
- position: relative;
444
- display: block;
445
-
446
- background-color: var(--bg);
447
- user-select: none;
448
- overflow: hidden;
449
- z-index: var(--z-index);
450
- }
451
-
452
- @media (prefers-color-scheme: dark) {
453
- :host {
454
- --default-error-bg: #222;
455
- --default-error-fg: #fff;
456
- }
457
- }
458
-
459
- .spec-canvas-wrapper {
460
- position: absolute;
461
- top: 0;
462
- left: 0;
463
- width: 100%;
464
- height: 100%;
465
- display: flex;
466
- flex-direction: column-reverse;
467
- }
468
-
469
- .canvas {
470
- position: absolute;
471
- top: 50%;
472
- left: 50%;
473
- flex: 1;
474
- }
475
-
476
- .rendered-image {
477
- position: absolute;
478
- top: 0;
479
- left: 0;
480
- }
481
-
482
- .guides {
483
- position: absolute;
484
-
485
- overflow: visible;
486
- stroke: var(--guide-color);
487
- fill: var(--guide-color);
488
- pointer-events: none;
489
- z-index: calc(var(--z-index) + 2);
490
- }
491
- `,oo,Ot,Gt,eo,so])}get __images(){return{}}deselectNode(){this.selectedNode=null}get error(){return!M(this,e,"f")||!M(this,r,"f")?H({title:"Error",children:"Please call `__updateTree/1` method with a valid parameter."}):null}render(){if(this.error)return this.error instanceof Error?H({title:this.error.name||"Error",children:this.error.message}):typeof this.error=="string"?H({title:"Error",children:this.error}):this.error;let a=M(this,e,"f"),d=1/this.scale,l=`calc(var(--guide-thickness) * ${d})`,h=parseFloat(getComputedStyle(this).getPropertyValue("--guide-thickness")),u=parseFloat(getComputedStyle(this).getPropertyValue("--guide-tooltip-font-size"));return b`
492
- <div class="spec-canvas-wrapper" @click=${this.deselectNode}>
493
- <div
494
- class="canvas"
495
- style="
496
- width: ${a.width}px;
497
- height: ${a.height}px;
498
-
499
- transform: translate(-50%, -50%) ${this.canvasTransform.join(" ")}
500
- "
501
- >
502
- ${Object.entries(this.__images).map(([f,m])=>{var x;let S=M(this,s,"f").call(this,f);if(!S||!("absoluteBoundingBox"in S)||!(!((x=M(this,t,"f"))===null||x===void 0)&&x[S.id]))return null;let w=M(this,t,"f")[S.id];return b`
503
- <img
504
- class="rendered-image"
505
- src="${m}"
506
- style=${Y({top:`${S.absoluteBoundingBox.y-a.y}px`,left:`${S.absoluteBoundingBox.x-a.x}px`,marginTop:`${-w.top}px`,marginLeft:`${-w.left}px`,width:S.absoluteBoundingBox.width+w.left+w.right+"px",height:S.absoluteBoundingBox.height+w.top+w.bottom+"px"})}
507
- />
508
- `})}
509
- ${this.selectedNode&&to({nodeSize:this.selectedNode.absoluteBoundingBox,offsetX:-a.x,offsetY:-a.y,reverseScale:d})}
510
- ${C`
511
- <svg
512
- class="guides"
513
- viewBox="0 0 ${a.width} ${a.height}"
514
- width=${a.width}
515
- height=${a.height}
516
- style=${Y({left:`${-a.x}px`,top:`${-a.y}px`,strokeWidth:l})}
517
- >
518
- ${this.selectedNode&&et({node:this.selectedNode,selected:!0,computedThickness:h*d})}
519
-
520
- ${M(this,r,"f").map(f=>{var m;return f.id===((m=this.selectedNode)===null||m===void 0?void 0:m.id)?null:C`
521
- <g>
522
- ${et({node:f,computedThickness:h*d,onClick:M(this,i,"f").call(this,f)})}
523
- ${this.selectedNode&&Wt({node:f,distanceTo:this.selectedNode,reverseScale:d,fontSize:u})}
524
- </g>
525
- `})}
526
- </svg>
527
- `}
528
- </div>
529
- ${Qt({node:this.selectedNode,onClose:this.deselectNode})}
530
- ${no(this.getMetadata())}
531
- </div>
532
- `}getMetadata(){}connectedCallback(){super.connectedCallback(),this.resetZoom()}updated(a){super.updated(a)}__updateTree(a){if(!(a.type==="CANVAS"||a.type==="FRAME"||a.type==="COMPONENT"||a.type==="COMPONENT_SET"))throw new Error("Cannot update node tree: Top level node MUST be one of CANVAS, FRAME, COMPONENT, or COMPONENT_SET");tt(this,e,a.type==="CANVAS"?Cr(a):a.absoluteBoundingBox,"f"),tt(this,r,xe(a),"f"),this.requestUpdate()}__updateEffectMargins(){if(!this.__images)return;let a=Object.keys(this.__images).map(M(this,s,"f")).filter(d=>!!d);tt(this,t,a.reduce((d,l)=>"absoluteBoundingBox"in l?Object.assign(Object.assign({},d),{[l.id]:Mr(l,xe(l))}):d,{}),"f"),this.requestUpdate()}resetZoom(){if(M(this,e,"f")){let{width:a,height:d}=M(this,e,"f"),{width:l,height:h}=this.getBoundingClientRect(),u=l/(a+this.zoomMargin*2),f=h/(d+this.zoomMargin*2);this.scale=Math.min(u,f,1)}}}return e=new WeakMap,t=new WeakMap,r=new WeakMap,i=new WeakMap,s=new WeakMap,ao([E({type:Number,attribute:"zoom-margin"})],n.prototype,"zoomMargin",void 0),ao([E({type:String,attribute:"link"})],n.prototype,"link",void 0),n};function Cr(o){let e=[],t=[],r=[],i=[];for(let c of o.children){if(c.type!=="FRAME"&&c.type!=="COMPONENT")continue;let{x:a,y:d,width:l,height:h}=c.absoluteBoundingBox;e.push(a),t.push(a+l),r.push(d),i.push(d+h)}let s=Math.min(...e),n=Math.min(...r);return{x:s,y:n,width:Math.abs(Math.max(...t)-s),height:Math.abs(Math.min(...i)-n)}}function Mr(o,e){let t=e.map(i=>{if(!("effects"in i))return{top:i.absoluteBoundingBox.y,right:i.absoluteBoundingBox.x+i.absoluteBoundingBox.width,bottom:i.absoluteBoundingBox.y+i.absoluteBoundingBox.height,left:i.absoluteBoundingBox.x};let s=i.effects.filter(a=>a.visible&&a.type==="LAYER_BLUR").map(a=>a.radius),n=i.effects.filter(a=>a.visible&&a.type==="DROP_SHADOW"&&!!a.offset).map(a=>({left:a.radius-a.offset.x,top:a.radius-a.offset.y,right:a.radius+a.offset.x,bottom:a.radius+a.offset.y})),c={top:Math.max(0,...s,...n.map(a=>a.top)),right:Math.max(0,...s,...n.map(a=>a.right)),bottom:Math.max(0,...s,...n.map(a=>a.bottom)),left:Math.max(0,...s,...n.map(a=>a.left))};return{top:i.absoluteBoundingBox.y-c.top,right:i.absoluteBoundingBox.x+i.absoluteBoundingBox.width+c.right,bottom:i.absoluteBoundingBox.y+i.absoluteBoundingBox.height+c.bottom,left:i.absoluteBoundingBox.x-c.left}}),r={top:Math.min(...t.map(i=>i.top)),right:Math.max(...t.map(i=>i.right)),bottom:Math.max(...t.map(i=>i.bottom)),left:Math.min(...t.map(i=>i.left))};return{top:o.absoluteBoundingBox.y-r.top,right:r.right-o.absoluteBoundingBox.x-o.absoluteBoundingBox.width,bottom:r.bottom-o.absoluteBoundingBox.y-o.absoluteBoundingBox.height,left:o.absoluteBoundingBox.x-r.left}}function xe(o,e=0){return"absoluteBoundingBox"in o?!("children"in o)||o.children.length===0?[Object.assign(Object.assign({},o),{depth:e})]:[Object.assign(Object.assign({},o),{depth:e}),...o.children.map(t=>xe(t,e+1)).flat()]:o.children.map(t=>xe(t,e+1)).flat()}var lo=function(o,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(o,e,t,r);else for(var c=o.length-1;c>=0;c--)(n=o[c])&&(s=(i<3?n(s):i>3?n(e,t,s):n(e,t))||s);return i>3&&s&&Object.defineProperty(e,t,s),s},U=class extends we(R){constructor(){super(...arguments),this.nodes=null,this.renderedImage=null}get isMovable(){return!!(this.nodes&&this.renderedImage&&this.documentNode)}get documentNode(){if(!this.nodes)return null;let e=Object.values(this.nodes.nodes)[0];return!e||!("absoluteBoundingBox"in e.document)?null:e.document}get __images(){return!this.documentNode||!this.renderedImage?{}:{[this.documentNode.id]:this.renderedImage}}get error(){if(!this.nodes||!this.renderedImage)return H({title:"Parameter error",children:b`<span>
533
- Both <code>nodes</code> and <code>rendered-image</code> are required.
534
- </span>`});if(!this.documentNode)return H({title:"Parameter Error",children:b`
535
- <span> Document node is empty or does not have size. </span>
536
- `});if(super.error)return super.error}getMetadata(){return{fileName:this.nodes.name,timestamp:this.nodes.lastModified,link:this.link}}connectedCallback(){super.connectedCallback(),this.documentNode&&(this.__updateTree(this.documentNode),this.__updateEffectMargins(),this.resetZoom())}updated(e){if(super.updated(e),e.has("nodes")){if(!this.documentNode)return;this.__updateTree(this.documentNode),this.resetZoom()}e.has("renderedImage")&&this.__updateEffectMargins()}};lo([E({type:Object})],U.prototype,"nodes",void 0);lo([E({type:String,attribute:"rendered-image"})],U.prototype,"renderedImage",void 0);var co=function(o,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(o,e,t,r);else for(var c=o.length-1;c>=0;c--)(n=o[c])&&(s=(i<3?n(s):i>3?n(e,t,s):n(e,t))||s);return i>3&&s&&Object.defineProperty(e,t,s),s},ot=function(o,e,t,r){if(t==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?o!==e||!r:!e.has(o))throw new TypeError("Cannot read private member from an object whose class did not declare it");return t==="m"?r:t==="a"?r.call(o):r?r.value:e.get(o)},_e,rt,j=class extends we(R){constructor(){super(...arguments),this.documentNode=null,this.renderedImages=null,this.selectedPage=null,_e.set(this,()=>{var e;if(!this.documentNode){this.selectedPage=null;return}this.selectedPage=(e=this.documentNode.document.children.filter(t=>t.type==="CANVAS")[0])!==null&&e!==void 0?e:null}),rt.set(this,e=>{var t,r;let i=e.currentTarget;this.selectedPage=(r=(t=this.documentNode)===null||t===void 0?void 0:t.document.children.find(s=>s.id===i.value))!==null&&r!==void 0?r:null,this.selectedPage&&(this.__updateTree(this.selectedPage),this.resetZoom(),this.__updateEffectMargins(),this.panX=0,this.panY=0)})}get isMovable(){return!!(this.renderedImages&&this.documentNode)}get __images(){return this.renderedImages||{}}get error(){if(!this.documentNode||!this.renderedImages)return H({title:"Parameter error",children:b`<span>
537
- Both <code>document-node</code> and <code>rendered-images</code> are
538
- required.
539
- </span>`});if(super.error)return super.error}static get styles(){return ve(super.styles,[A`
540
- :host {
541
- --figspec-control-bg-default: #fcfcfc;
542
- --figspec-control-fg-default: #333;
543
-
544
- --control-bg: var(
545
- --figspec-control-bg,
546
- var(--figspec-control-bg-default)
547
- );
548
- --control-fg: var(
549
- --figspec-control-bg,
550
- var(--figspec-control-fg-default)
551
- );
552
- --control-shadow: var(
553
- --figspec-control-shadow,
554
- 0 2px 4px rgba(0, 0, 0, 0.3)
555
- );
556
- --padding: var(--figspec-control-padding, 8px 16px);
557
-
558
- display: flex;
559
- flex-direction: column;
560
- }
561
-
562
- @media (prefers-color-scheme: dark) {
563
- :host {
564
- --figspec-control-bg-default: #222;
565
- --figspec-control-fg-default: #fff;
566
- }
567
- }
568
-
569
- .controls {
570
- flex-shrink: 0;
571
- padding: var(--padding);
572
-
573
- background-color: var(--control-bg);
574
- box-shadow: var(--control-shadow);
575
- color: var(--control-fg);
576
- z-index: 1;
577
- }
578
-
579
- .view {
580
- position: relative;
581
- flex-grow: 1;
582
- flex-shrink: 1;
583
- }
584
- `])}render(){var e;return b`
585
- <div class="controls">
586
- <select @change=${ot(this,rt,"f")}>
587
- ${(e=this.documentNode)===null||e===void 0?void 0:e.document.children.map(t=>b`<option value=${t.id}>${t.name}</option>`)}
588
- </select>
589
- </div>
590
-
591
- <div class="view">${super.render()}</div>
592
- `}getMetadata(){return{fileName:this.documentNode.name,timestamp:this.documentNode.lastModified,link:this.link}}connectedCallback(){super.connectedCallback(),this.documentNode&&(ot(this,_e,"f").call(this),this.selectedPage&&(this.__updateTree(this.selectedPage),this.resetZoom()))}updated(e){super.updated(e),e.has("documentNode")&&(ot(this,_e,"f").call(this),this.selectedPage&&(this.__updateTree(this.selectedPage),this.resetZoom())),e.has("renderedImages")&&this.__updateEffectMargins()}};_e=new WeakMap,rt=new WeakMap;co([E({type:Object,attribute:"document-node"})],j.prototype,"documentNode",void 0);co([E({type:Object,attribute:"rendered-images"})],j.prototype,"renderedImages",void 0);customElements.get("figspec-file-viewer")||customElements.define("figspec-file-viewer",j);customElements.get("figspec-frame-viewer")||customElements.define("figspec-frame-viewer",U);var Tr=new Set(["children","localName","ref","style","className"]),ho=new WeakMap,kr=(o,e,t,r,i)=>{let s=i?.[e];s===void 0||t===r?t==null&&e in HTMLElement.prototype?o.removeAttribute(e):o[e]=t:((n,c,a)=>{let d=ho.get(n);d===void 0&&ho.set(n,d=new Map);let l=d.get(c);a!==void 0?l===void 0?(d.set(c,l={handleEvent:a}),n.addEventListener(c,l)):l.handleEvent=a:l!==void 0&&(d.delete(c),n.removeEventListener(c,l))})(o,s,t)},Pr=(o,e)=>{typeof o=="function"?o(e):o.current=e};function $e(o=window.React,e,t,r,i){let s,n,c;if(e===void 0){let f=o;({tagName:n,elementClass:c,events:r,displayName:i}=f),s=f.react}else s=o,c=t,n=e;let a=s.Component,d=s.createElement,l=new Set(Object.keys(r??{}));class h extends a{constructor(){super(...arguments),this.o=null}t(m){if(this.o!==null)for(let x in this.i)kr(this.o,x,this.props[x],m?m[x]:void 0,r)}componentDidMount(){var m;this.t(),(m=this.o)===null||m===void 0||m.removeAttribute("defer-hydration")}componentDidUpdate(m){this.t(m)}render(){let{_$Gl:m,...x}=this.props;this.h!==m&&(this.u=w=>{m!==null&&Pr(m,w),this.o=w,this.h=m}),this.i={};let S={ref:this.u};for(let[w,Me]of Object.entries(x))Tr.has(w)?S[w==="className"?"class":w]=Me:l.has(w)||w in c.prototype?this.i[w]=Me:S[w]=Me;return S.suppressHydrationWarning=!0,d(n,S)}}h.displayName=i??c.name;let u=s.forwardRef((f,m)=>d(h,{...f,_$Gl:m},f?.children));return u.displayName=h.displayName,u}var po=$e(le,"figspec-frame-viewer",U,{onNodeSelect:"nodeselect",onPositionChange:"positionchange",onScaleChange:"scalechange"}),uo=$e(le,"figspec-file-viewer",j,{onNodeSelect:"nodeselect",onPositionChange:"positionchange",onScaleChange:"scalechange"});var Jc=__STORYBOOK_API__,{ActiveTabs:Qc,Consumer:ed,ManagerContext:td,Provider:od,RequestResponseError:rd,addons:Ee,combineParameters:id,controlOrMetaKey:sd,controlOrMetaSymbol:nd,eventMatchesShortcut:ad,eventToShortcut:ld,experimental_requestResponse:cd,isMacLike:dd,isShortcutTaken:hd,keyToSymbol:pd,merge:ud,mockChannel:fd,optionOrAltSymbol:md,shortcutMatchesShortcut:gd,shortcutToHumanString:vd,types:it,useAddonState:yd,useArgTypes:bd,useArgs:xd,useChannel:wd,useGlobalTypes:_d,useGlobals:$d,useParameter:st,useSharedState:Ed,useStoryPrepared:Sd,useStorybookApi:Ad,useStorybookState:fo}=__STORYBOOK_API__;var Nr=Object.defineProperty,ct=(o,e)=>()=>(o&&(e=o(o=0)),e),Rr=(o,e)=>{for(var t in e)Nr(o,t,{get:e[t],enumerable:!0})},Ce,mo,go,vo,dt=ct(()=>{Ce=({config:o,defer:e=!1})=>{let[t,r]=k(e?void 0:o.url),[i,s]=k(!1);return N(()=>{if(!e)return;let n=requestAnimationFrame(()=>{r(o.url)});return()=>cancelAnimationFrame(n)},[e,o.url]),N(()=>{s(!1)},[t]),p("div",{css:mo},!i&&p(I,{css:go},"Loading..."),p("iframe",{css:vo,src:t,allowFullScreen:o.allowFullscreen,onLoad:()=>s(!0)}))},mo=P`
593
- position: absolute;
594
- top: 0;
595
- right: 0;
596
- bottom: 0;
597
- left: 0;
598
-
599
- overflow: hidden;
600
- `,go=P`
601
- position: absolute;
602
- top: 50%;
603
- left: 50%;
604
-
605
- transform: translate(-50%, -50%);
606
- `,vo=P`
607
- position: relative;
608
- width: 100%;
609
- height: 100%;
610
- border: none;
611
-
612
- z-index: 1;
613
- `}),at,yo,_o,$o=ct(()=>{dt(),at=/https:\/\/[\w.-]+\.?figma.com\/([\w-]+)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/,yo=o=>at.test(o),_o=({config:o})=>{let e=W(()=>yo(o.url)?{url:`https://www.figma.com/embed?embed_host=${o.embedHost||location.hostname}&url=${o.url}`,allowFullscreen:o.allowFullscreen}:(console.warn(`[storybook-addon-designs] The URL you specified is not valid Figma URL.
614
- The addon fallbacks to normal iframe mode.For more detail, please check <https://www.figma.com/developers/embed>.`),o),[o.url,o.allowFullscreen,o.embedHost]);return p(Ce,{defer:!0,config:e})}}),Eo={};Rr(Eo,{Figspec:()=>lt,default:()=>Ao});function Se(o){return o.status!==200?Promise.reject(o.statusText):o.json()}function Or(o){if(o.accessToken)return o.accessToken;try{return g.STORYBOOK_FIGMA_ACCESS_TOKEN??null}catch{return null}}function So(o){return"absoluteBoundingBox"in o?[o]:!o.children||o.children.length===0?[]:o.children.map(So).reduce((e,t)=>e.concat(t),[])}var nt,lt,Ao,Br=ct(()=>{$o(),nt=P`
615
- position: absolute;
616
- top: 0;
617
- right: 0;
618
- bottom: 0;
619
- left: 0;
620
- `,lt=({config:o})=>{let[e,t]=k({state:"loading"}),r=async i=>{t({state:"loading"});try{let s=o.url.match(at);if(!s)throw new Error(o.url+" is not a valid Figma URL.");let[,,n]=s,c=new URL(o.url).searchParams.get("node-id"),a=Or(o);if(!a)throw new Error("Personal Access Token is required.");let d={"X-FIGMA-TOKEN":a},l=new URL(`https://api.figma.com/v1/files/${n}`),h=new URL(`https://api.figma.com/v1/images/${n}`);if(h.searchParams.set("format","svg"),!c){let m=await fetch(l.href,{headers:d,signal:i}).then(w=>Se(w)),x=So(m.document);h.searchParams.set("ids",x.map(w=>w.id).join(","));let S=await fetch(h.href,{headers:d,signal:i}).then(w=>Se(w));t({state:"fetched",value:{type:"file",props:{documentNode:m,renderedImages:S.images,link:o.url}}});return}l.pathname+="/nodes",l.searchParams.set("ids",c),h.searchParams.set("ids",c);let[u,f]=await Promise.all([fetch(l.href,{headers:d,signal:i}).then(m=>Se(m)),fetch(h.href,{headers:d,signal:i}).then(m=>Se(m))]);t({state:"fetched",value:{type:"frame",props:{nodes:u,renderedImage:Object.values(f.images)[0],link:o.url}}})}catch(s){if(s instanceof DOMException&&s.code===DOMException.ABORT_ERR)return;console.error(s),t({state:"failed",error:s instanceof Error?s.message:String(s)})}};switch(N(()=>{let i=!1,s=()=>{i=!0},n=new AbortController;return r(n.signal).then(s,s),()=>{i||n.abort()}},[o.url]),e.state){case"loading":return p(I,null,p(_,null,"Loading Figma file..."));case"failed":return p(I,null,p(_,null,"Failed to load Figma file"),p(_,null,e.error));case"fetched":return e.value.type==="file"?p(uo,{css:nt,...e.value.props}):p(po,{css:nt,...e.value.props})}},Ao=lt}),Co="STORYBOOK_ADDON_DESIGNS",bo=Co+"/panel",Ae="design",xo=class extends Te{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(o){return{hasError:!0,error:o}}componentDidCatch(o,e){console.group("An error occurred during rendering Addon panel of storybook-addon-designs"),console.log("--- Error ---"),console.error(o),console.log("--- React Component Stack ---"),console.error(e.componentStack),console.groupEnd()}render(){return this.state.hasError?p(I,null,p(_,null,"Failed to render addon UI"),p(_,null,p("p",null,"Sorry, this addon has crashed due to the below error has thrown during rendering the addon UI."),p("pre",null,String(this.state.error)),p("p",null,"See console log for more details. To clear the error state, please reload the page."," ",p(K,{href:"https://github.com/storybookjs/addon-designs/issues/new?assignees=&labels=category%3A+bug&template=bug_report.yml",target:"_blank",rel:"noopener",withArrow:!0,cancel:!1},"Bug report")))):this.props.children}};$o();dt();var Lr=(o,e)=>{let[t,r]=k([0,0]),[i,s]=k(!1),n=T(u=>{u.button===0&&(r([u.screenX,u.screenY]),s(!0))},[s,r]),c=T(u=>{let f=u.touches[0];r([f.screenX,f.screenY]),s(!0)},[s,r]),a=T(u=>{i&&r(f=>(o([u[0]-f[0],u[1]-f[1]]),u))},[r,i,...e]),d=T(u=>{let{screenX:f,screenY:m}=u;a([f,m])},[a]),l=T(u=>{let{screenX:f,screenY:m}=u.touches[0];a([f,m])},[r,i,...e]),h=T(()=>{r([0,0]),s(!1)},[s,r]);return{onMouseDown:n,onMouseMove:d,onMouseUp:h,onMouseLeave:h,onTouchStart:c,onTouchMove:l,onTouchCancel:h,onTouchEnd:h}},Hr=({children:o,className:e,style:t,defaultValue:r,value:i,onChange:s})=>{let[n,c]=k([0,0]);N(()=>{c(r||i||[0,0])},[r]);let a=Lr(l=>{s&&s(l),c(h=>[h[0]+l[0],h[1]+l[1]])},[c,s]),d=W(()=>{let l=i||n;return{transform:`translate(${l[0]}px, ${l[1]}px)`}},[i,n]);return p("div",{css:Ir,className:e,style:t,...a},p("div",{css:Fr,style:d},o))},Ir=P`
621
- position: relative;
622
- overflow: hidden;
623
-
624
- &:active {
625
- cursor: move;
626
- }
627
- `,Fr=P`
628
- position: absolute;
629
- top: 0;
630
- right: 0;
631
- bottom: 0;
632
- left: 0;
633
- `,Ur=({onZoomIn:o,onZoomOut:e,onReset:t})=>p(_,null,p(ce,{onClick:o},p(de,{icon:"zoom"})),p(ce,{onClick:e},p(de,{icon:"zoomout"})),p(ce,{onClick:t},p(de,{icon:"zoomreset"}))),jr=(o,e)=>{let[t,r]=k(1);N(()=>{r(o)},e);let i=T(()=>{r(c=>c+.1)},[r]),s=T(()=>{r(c=>Math.max(c-.1,.1))},[r]),n=T(()=>{r(1)},[r]);return{scale:t,zoomIn:i,zoomOut:s,resetZoom:n}},Dr=({config:o})=>{let e=jr(o.scale||1,[o.scale]),t=W(()=>({transform:`scale(${e.scale})`}),[e.scale]);return p("div",{css:zr},p(pt,{border:!0},p(_,{key:"left"},p("p",null,p("b",null,"Image")),p(ut,null),p(Ur,{onReset:e.resetZoom,onZoomIn:e.zoomIn,onZoomOut:e.zoomOut}))),p(Hr,{css:Vr,defaultValue:o.offset},p("img",{css:Yr,src:o.url,style:t})))},zr=P`
634
- position: absolute;
635
- top: 0;
636
- right: 0;
637
- bottom: 0;
638
- left: 0;
639
- display: flex;
640
- flex-direction: column;
641
- align-items: stretch;
642
- `,Vr=P`
643
- flex-grow: 1;
644
- `,Yr=P`
645
- position: absolute;
646
- top: 0;
647
- right: 0;
648
- bottom: 0;
649
- left: 0;
650
- margin: auto;
651
-
652
- pointer-events: none;
653
- border-radius: 1px;
654
- box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
655
- `,Wr=({config:o})=>p("div",{css:Gr},p(K,{cancel:!1,href:o.url,target:o.target??"_blank",rel:o.rel??"noopener",withArrow:o.showArrow??!0},o.label||o.url)),Gr=P`
656
- position: absolute;
657
- top: 0;
658
- right: 0;
659
- bottom: 0;
660
- left: 0;
661
- display: flex;
662
- justify-content: center;
663
- align-items: center;
664
- `;dt();var Zr=o=>{if(o.protocol!=="https:")return{valid:!1,error:p(_,null,"Expected HTTPS link, received ",p("code",null,o.protocol),".")};if(o.hostname!=="www.sketch.com")return{valid:!1,error:p(_,null,"Expected a hostname ",p("code",null,"www.sketch.com"),", received"," ",p("code",null,o.hostname))};let e=p(_,null,"Expected pathname ",p("code",null,"/s/<string>/a/<string>"),", received"," ",p("code",null,o.pathname),"."),t=o.pathname.split("/").slice(1);if(t.length<4)return{valid:!1,error:e};if(t[0]==="embed")return{valid:!0,data:{url:o.href,offscreen:!1}};let[r,i,s,n]=t;return r!=="s"||!i||s!=="a"||!n?{valid:!1,error:e}:{valid:!0,data:{url:`https://www.sketch.com/embed/s/${i}/a/${n}`,offscreen:!1}}},qr=({config:o})=>{let e=W(()=>{let t=Zr(new URL(o.url));return t.valid?{...t,data:{...o,...t.data}}:t},[o]);return e.valid?p(Ce,{defer:!0,config:e.data}):p(I,null,p(_,null,"Invalid Sketch URL"),p(_,null,e.error))},Xr=({tabs:o,deps:e=[]})=>{let[t,r]=k(o[0].id);return N(()=>{r(o[0].id)},e),p(ft,{absolute:!0,selected:t,actions:{onSelect:r}},o.map(i=>p("div",{key:i.id,id:i.id,title:i.name},i.offscreen||t===i.id?i.content:null)))},Kr=Pe(()=>Promise.resolve().then(()=>(Br(),Eo))),Jr=({config:o})=>{if(!o||"length"in o&&o.length===0)return p(I,null,p(_,null,"No designs found"),p(_,null,"Learn how to"," ",p(K,{href:"https://github.com/storybookjs/addon-designs#3-add-it-to-story",target:"_blank",rel:"noopener",withArrow:!0,cancel:!1},"display design preview for the story")));let e=[...o instanceof Array?o:[o]].map(t=>{let r={id:JSON.stringify(t),name:t.name||t.type?.toUpperCase()||"ERROR",offscreen:t.offscreen??!0};switch(t.type){case"iframe":return{...r,content:p(Ce,{config:t})};case"figma":return{...r,content:p(_o,{config:t}),offscreen:!1};case"sketch":return{...r,content:p(qr,{config:t})};case"figspec":case"experimental-figspec":return t.type==="experimental-figspec"&&console.warn("[storybook-addon-designs] `experimental-figspec` is deprecated. We will remove it in v7.0. Please replace it to `figspec` type."),{...r,content:p(ke,{fallback:"Preparing Figspec viewer..."},p(Kr,{config:t})),offscreen:!1};case"image":return{...r,content:p(Dr,{config:t})};case"link":return{...r,content:p(Wr,{config:t})}}return{...r,content:p(I,null,p(_,null,"Invalid config type"),p(_,null,"Config type you set is not supported. Please choose one from"," ",p(K,{href:"https://github.com/storybookjs/addon-designs/blob/master/packages/storybook-addon-designs/src/config.ts",target:"_blank",rel:"noopener",withArrow:!0,cancel:!1},"available config types")))}});return e.length===1?p("div",null,e[0].content):p(Xr,{tabs:e,deps:[o]})},wo=({active:o})=>{let e=fo(),t=st(Ae),[r,i]=k(o);return N(()=>{i(o)},[t]),N(()=>{o&&i(!0)},[o]),r?p(Jr,{key:e.storyId,config:t}):null},ae="Design";function Qr(o){Ee.register(Co,e=>{let t=function(){let r=st(Ae);return r?Array.isArray(r)?r.length>0?`${ae} (${r.length})`:ae:(r.name||ae)+" (1)":ae};o==="tab"?Ee.add(bo,{title:ae,render({active:r}){return r?p(xo,null,p(wo,{active:!0})):p("noscript",null)},type:it.TAB,paramKey:Ae}):Ee.add(bo,{type:it.PANEL,title:t,paramKey:Ae,render({active:r}){return p(ht,{active:!!r},p(xo,null,p(wo,{active:!!r})))}})})}Qr("panel");})();
665
- }catch(e){ console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e); }