@epa-wg/custom-element-dist 0.0.21 → 0.0.22

package/storybook-static/assets/preview-DRnyIGXK.js

@@ -0,0 +1,48 @@
+import{i as O,d as p,E as j,t as de,I as D,s as U,R as pe}from"./index-DuIEV_9C.js";function fe(e,t){const r=e.emit;if(r._isPiped)return;const s=function(i,...n){return t.emit(i,...n),r.call(this,i,...n)};s._isPiped=!0,e.emit=s}function ge(e){const t=[...e];return Object.freeze(t),t}class me{subscriptions=[];dispose(){let t;for(;t=this.subscriptions.shift();)t()}}class ye{constructor(t){this.initialHandlers=t,this.handlers=[...t]}handlers;prepend(t){this.handlers.unshift(...t)}reset(t){this.handlers=t.length>0?[...t]:[...this.initialHandlers]}currentHandlers(){return this.handlers}}class ve extends me{handlersController;emitter;publicEmitter;events;constructor(...t){super(),O(this.validateHandlers(t),p.formatMessage("Failed to apply given request handlers: invalid input. Did you forget to spread the request handlers Array?")),this.handlersController=new ye(t),this.emitter=new j,this.publicEmitter=new j,fe(this.emitter,this.publicEmitter),this.events=this.createLifeCycleEvents(),this.subscriptions.push(()=>{this.emitter.removeAllListeners(),this.publicEmitter.removeAllListeners()})}validateHandlers(t){return t.every(r=>!Array.isArray(r))}use(...t){O(this.validateHandlers(t),p.formatMessage('Failed to call "use()" with the given request handlers: invalid input. Did you forget to spread the array of request handlers?')),this.handlersController.prepend(t)}restoreHandlers(){this.handlersController.currentHandlers().forEach(t=>{t.isUsed=!1})}resetHandlers(...t){this.handlersController.reset(t)}listHandlers(){return ge(this.handlersController.currentHandlers())}createLifeCycleEvents(){return{on:(...t)=>this.publicEmitter.on(...t),removeListener:(...t)=>this.publicEmitter.removeListener(...t),removeAllListeners:(...t)=>this.publicEmitter.removeAllListeners(...t)}}}var we=async e=>{try{return{error:null,data:await e().catch(r=>{throw r})}}catch(t){return{error:t,data:null}}};const be=async({request:e,requestId:t,handlers:r,resolutionContext:s})=>{let o=null,i=null;for(const n of r)if(i=await n.run({request:e,requestId:t,resolutionContext:s}),i!==null&&(o=n),i?.response)break;return o?{handler:o,parsedResult:i?.parsedResult,response:i?.response}:null};async function Ee(e,t="warn"){const r=new URL(e.url),s=de(r)+r.search,o=`intercepted a request without a matching request handler:
+
+  • ${e.method} ${s}
+
+If you still wish to intercept this unhandled request, please create a request handler for it.
+Read more: https://mswjs.io/docs/getting-started/mocks`;function i(n){switch(n){case"error":throw p.error("Error: %s",o),new D(p.formatMessage('Cannot bypass a request when using the "error" strategy for the "onUnhandledRequest" option.'));case"warn":{p.warn("Warning: %s",o);break}case"bypass":break;default:throw new D(p.formatMessage('Failed to react to an unhandled request: unknown strategy "%s". Please provide one of the supported strategies ("bypass", "warn", "error") or a custom callback function as the value of the "onUnhandledRequest" option.',n))}}if(typeof t=="function"){t(e,{warning:i.bind(null,"warn"),error:i.bind(null,"error")});return}r.protocol!=="file:"&&i(t)}function Re(e,t){U.add({...e,url:e.url.toString()},t),U.persist()}async function J(e,t,r,s,o,i){if(o.emit("request:start",{request:e,requestId:t}),e.headers.get("x-msw-intention")==="bypass"){o.emit("request:end",{request:e,requestId:t}),i?.onPassthroughResponse?.(e);return}const n=await we(()=>be({request:e,requestId:t,handlers:r,resolutionContext:i?.resolutionContext}));if(n.error)throw o.emit("unhandledException",{error:n.error,request:e,requestId:t}),n.error;if(!n.data){await Ee(e,s.onUnhandledRequest),o.emit("request:unhandled",{request:e,requestId:t}),o.emit("request:end",{request:e,requestId:t}),i?.onPassthroughResponse?.(e);return}const{response:a}=n.data;if(!a){o.emit("request:end",{request:e,requestId:t}),i?.onPassthroughResponse?.(e);return}if(a.status===302&&a.headers.get("x-msw-intention")==="passthrough"){o.emit("request:end",{request:e,requestId:t}),i?.onPassthroughResponse?.(e);return}Re(e,a),o.emit("request:match",{request:e,requestId:t});const c=n.data,l=i?.transformResponse?.(a)||a;return i?.onMockedResponse?.(l,c),o.emit("request:end",{request:e,requestId:t}),l}function ke(e){return{status:e.status,statusText:e.statusText,headers:Object.fromEntries(e.headers.entries())}}function B(e){return e!=null&&typeof e=="object"&&!Array.isArray(e)}function z(e,t){return Object.entries(t).reduce((r,[s,o])=>{const i=r[s];return Array.isArray(i)&&Array.isArray(o)?(r[s]=i.concat(o),r):B(i)&&B(o)?(r[s]=z(i,o),r):(r[s]=o,r)},Object.assign({},e))}var qe={},Le=/(%?)(%([sdijo]))/g;function Se(e,t){switch(t){case"s":return e;case"d":case"i":return Number(e);case"j":return JSON.stringify(e);case"o":{if(typeof e=="string")return e;const r=JSON.stringify(e);return r==="{}"||r==="[]"||/^\[object .+?\]$/.test(r)?e:r}}}function q(e,...t){if(t.length===0)return e;let r=0,s=e.replace(Le,(o,i,n,a)=>{const c=t[r],l=Se(c,a);return i?o:(r++,l)});return r<t.length&&(s+=` ${t.slice(r).join(" ")}`),s=s.replace(/%{2,2}/g,"%"),s}var Te=2;function xe(e){if(!e.stack)return;const t=e.stack.split(`
+`);t.splice(1,Te),e.stack=t.join(`
+`)}var Pe=class extends Error{constructor(e,...t){super(e),this.message=e,this.name="Invariant Violation",this.message=q(e,...t),xe(this)}},w=(e,t,...r)=>{if(!e)throw new Pe(t,...r)};w.as=(e,t,r,...s)=>{if(!t){const o=s.length===0?r:q(r,s);let i;try{i=Reflect.construct(e,[o])}catch{i=e(o)}throw i}};function H(){if(typeof navigator<"u"&&navigator.product==="ReactNative")return!0;if(typeof process<"u"){const e=process.type;return e==="renderer"||e==="worker"?!1:!!(process.versions&&process.versions.node)}return!1}var W=async e=>{try{return{error:null,data:await e().catch(r=>{throw r})}}catch(t){return{error:t,data:null}}};function Me(e){return new URL(e,location.href).href}function P(e,t,r){return[e.active,e.installing,e.waiting].filter(n=>n!=null).find(n=>r(n.scriptURL,t))||null}var Ae=async(e,t={},r)=>{const s=Me(e),o=await navigator.serviceWorker.getRegistrations().then(a=>a.filter(c=>P(c,s,r)));!navigator.serviceWorker.controller&&o.length>0&&location.reload();const[i]=o;if(i)return i.update().then(()=>[P(i,s,r),i]);const n=await W(async()=>{const a=await navigator.serviceWorker.register(e,t);return[P(a,s,r),a]});if(n.error){if(n.error.message.includes("(404)")){const c=new URL(t?.scope||"/",location.href);throw new Error(p.formatMessage(`Failed to register a Service Worker for scope ('${c.href}') with script ('${s}'): Service Worker script does not exist at the given path.
+
+Did you forget to run "npx msw init <PUBLIC_DIR>"?
+
+Learn more about creating the Service Worker script: https://mswjs.io/docs/cli/init`))}throw new Error(p.formatMessage(`Failed to register the Service Worker:
+
+%s`,n.error.message))}return n.data};function Y(e={}){if(e.quiet)return;const t=e.message||"Mocking enabled.";console.groupCollapsed(`%c${p.formatMessage(t)}`,"color:orangered;font-weight:bold;"),console.log("%cDocumentation: %chttps://mswjs.io/docs","font-weight:bold","font-weight:normal"),console.log("Found an issue? https://github.com/mswjs/msw/issues"),e.workerUrl&&console.log("Worker script URL:",e.workerUrl),e.workerScope&&console.log("Worker scope:",e.workerScope),console.groupEnd()}async function Ie(e,t){if(e.workerChannel.send("MOCK_ACTIVATE"),await e.events.once("MOCKING_ENABLED"),e.isMockingEnabled){p.warn('Found a redundant "worker.start()" call. Note that starting the worker while mocking is already enabled will have no effect. Consider removing this "worker.start()" call.');return}e.isMockingEnabled=!0,Y({quiet:t.quiet,workerScope:e.registration?.scope,workerUrl:e.worker?.scriptURL})}var Ce=class{constructor(e){this.port=e}postMessage(e,...t){const[r,s]=t;this.port.postMessage({type:e,data:r},{transfer:s})}};function He(e){if(!["HEAD","GET"].includes(e.method))return e.body}function We(e){return new Request(e.url,{...e,body:He(e)})}var _e=(e,t)=>async(r,s)=>{const o=new Ce(r.ports[0]),i=s.payload.id,n=We(s.payload),a=n.clone(),c=n.clone();pe.cache.set(n,c),e.requests.set(i,c);try{await J(n,i,e.getRequestHandlers(),t,e.emitter,{onPassthroughResponse(){o.postMessage("PASSTHROUGH")},async onMockedResponse(l,{handler:h,parsedResult:u}){const d=l.clone(),g=l.clone(),f=ke(l);if(e.supports.readableStreamTransfer){const m=l.body;o.postMessage("MOCK_RESPONSE",{...f,body:m},m?[m]:void 0)}else{const m=l.body===null?null:await d.arrayBuffer();o.postMessage("MOCK_RESPONSE",{...f,body:m})}t.quiet||e.emitter.once("response:mocked",()=>{h.log({request:a,response:g,parsedResult:u})})}})}catch(l){l instanceof Error&&(p.error(`Uncaught exception in the request handler for "%s %s":
+
+%s
+
+This exception has been gracefully handled as a 500 response, however, it's strongly recommended to resolve this error, as it indicates a mistake in your code. If you wish to mock an error response, please see this guide: https://mswjs.io/docs/recipes/mocking-error-responses`,n.method,n.url,l.stack??l),o.postMessage("MOCK_RESPONSE",{status:500,statusText:"Request Handler Error",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:l.name,message:l.message,stack:l.stack})}))}};async function Oe(e){e.workerChannel.send("INTEGRITY_CHECK_REQUEST");const{payload:t}=await e.events.once("INTEGRITY_CHECK_RESPONSE");t.checksum!=="26357c79639bfa20d64c0efca2a87423"&&p.warn(`The currently registered Service Worker has been generated by a different version of MSW (${t.packageVersion}) and may not be fully compatible with the installed version.
+
+It's recommended you update your worker script by running this command:
+
+  • npx msw init <PUBLIC_DIR>
+
+You can also automate this process and make the worker script update automatically upon the library installations. Read more: https://mswjs.io/docs/cli/init.`)}var je=new TextEncoder;function De(e){return je.encode(e)}function Ue(e,t){return new TextDecoder(t).decode(e)}function Be(e){return e.buffer.slice(e.byteOffset,e.byteOffset+e.byteLength)}var R=Symbol("isPatchedModule");function $e(e,t){try{return e[t],!0}catch{return!1}}var Ne=new Set([101,103,204,205,304]);function Q(e){return Ne.has(e)}function Z(e){return new Response(JSON.stringify(e instanceof Error?{name:e.name,message:e.message,stack:e.stack}:e),{status:500,statusText:"Unhandled Exception",headers:{"Content-Type":"application/json"}})}function S(e){return $e(e,"type")&&e.type==="error"}var Fe=Object.defineProperty,Ge=(e,t)=>{for(var r in t)Fe(e,r,{get:t[r],enumerable:!0})},M={};Ge(M,{blue:()=>Ve,gray:()=>A,green:()=>Je,red:()=>Ke,yellow:()=>Xe});function Xe(e){return`\x1B[33m${e}\x1B[0m`}function Ve(e){return`\x1B[34m${e}\x1B[0m`}function A(e){return`\x1B[90m${e}\x1B[0m`}function Ke(e){return`\x1B[31m${e}\x1B[0m`}function Je(e){return`\x1B[32m${e}\x1B[0m`}var x=H(),ee=class{constructor(e){this.name=e,this.prefix=`[${this.name}]`;const t=$("DEBUG"),r=$("LOG_LEVEL");t==="1"||t==="true"||typeof t<"u"&&this.name.startsWith(t)?(this.debug=k(r,"debug")?v:this.debug,this.info=k(r,"info")?v:this.info,this.success=k(r,"success")?v:this.success,this.warning=k(r,"warning")?v:this.warning,this.error=k(r,"error")?v:this.error):(this.info=v,this.success=v,this.warning=v,this.error=v,this.only=v)}prefix;extend(e){return new ee(`${this.name}:${e}`)}debug(e,...t){this.logEntry({level:"debug",message:A(e),positionals:t,prefix:this.prefix,colors:{prefix:"gray"}})}info(e,...t){this.logEntry({level:"info",message:e,positionals:t,prefix:this.prefix,colors:{prefix:"blue"}});const r=new ze;return(s,...o)=>{r.measure(),this.logEntry({level:"info",message:`${s} ${A(`${r.deltaTime}ms`)}`,positionals:o,prefix:this.prefix,colors:{prefix:"blue"}})}}success(e,...t){this.logEntry({level:"info",message:e,positionals:t,prefix:`✔ ${this.prefix}`,colors:{timestamp:"green",prefix:"green"}})}warning(e,...t){this.logEntry({level:"warning",message:e,positionals:t,prefix:`⚠ ${this.prefix}`,colors:{timestamp:"yellow",prefix:"yellow"}})}error(e,...t){this.logEntry({level:"error",message:e,positionals:t,prefix:`✖ ${this.prefix}`,colors:{timestamp:"red",prefix:"red"}})}only(e){e()}createEntry(e,t){return{timestamp:new Date,level:e,message:t}}logEntry(e){const{level:t,message:r,prefix:s,colors:o,positionals:i=[]}=e,n=this.createEntry(t,r),a=o?.timestamp||"gray",c=o?.prefix||"gray",l={timestamp:M[a],prefix:M[c]};this.getWriter(t)([l.timestamp(this.formatTimestamp(n.timestamp))].concat(s!=null?l.prefix(s):[]).concat(N(r)).join(" "),...i.map(N))}formatTimestamp(e){return`${e.toLocaleTimeString("en-GB")}:${e.getMilliseconds()}`}getWriter(e){switch(e){case"debug":case"success":case"info":return Ye;case"warning":return Qe;case"error":return Ze}}},ze=class{startTime;endTime;deltaTime;constructor(){this.startTime=performance.now()}measure(){this.endTime=performance.now();const e=this.endTime-this.startTime;this.deltaTime=e.toFixed(2)}},v=()=>{};function Ye(e,...t){if(x){process.stdout.write(q(e,...t)+`
+`);return}console.log(e,...t)}function Qe(e,...t){if(x){process.stderr.write(q(e,...t)+`
+`);return}console.warn(e,...t)}function Ze(e,...t){if(x){process.stderr.write(q(e,...t)+`
+`);return}console.error(e,...t)}function $(e){return x?qe[e]:globalThis[e]?.toString()}function k(e,t){return e!==void 0&&e!==t}function N(e){return typeof e>"u"?"undefined":e===null?"null":typeof e=="string"?e:typeof e=="object"?JSON.stringify(e):e.toString()}var et=class extends Error{constructor(e,t,r){super(`Possible EventEmitter memory leak detected. ${r} ${t.toString()} listeners added. Use emitter.setMaxListeners() to increase limit`),this.emitter=e,this.type=t,this.count=r,this.name="MaxListenersExceededWarning"}},te=class{static listenerCount(e,t){return e.listenerCount(t)}constructor(){this.events=new Map,this.maxListeners=te.defaultMaxListeners,this.hasWarnedAboutPotentialMemoryLeak=!1}_emitInternalEvent(e,t,r){this.emit(e,t,r)}_getListeners(e){return Array.prototype.concat.apply([],this.events.get(e))||[]}_removeListener(e,t){const r=e.indexOf(t);return r>-1&&e.splice(r,1),[]}_wrapOnceListener(e,t){const r=(...s)=>(this.removeListener(e,r),t.apply(this,s));return Object.defineProperty(r,"name",{value:t.name}),r}setMaxListeners(e){return this.maxListeners=e,this}getMaxListeners(){return this.maxListeners}eventNames(){return Array.from(this.events.keys())}emit(e,...t){const r=this._getListeners(e);return r.forEach(s=>{s.apply(this,t)}),r.length>0}addListener(e,t){this._emitInternalEvent("newListener",e,t);const r=this._getListeners(e).concat(t);if(this.events.set(e,r),this.maxListeners>0&&this.listenerCount(e)>this.maxListeners&&!this.hasWarnedAboutPotentialMemoryLeak){this.hasWarnedAboutPotentialMemoryLeak=!0;const s=new et(this,e,this.listenerCount(e));console.warn(s)}return this}on(e,t){return this.addListener(e,t)}once(e,t){return this.addListener(e,this._wrapOnceListener(e,t))}prependListener(e,t){const r=this._getListeners(e);if(r.length>0){const s=[t].concat(r);this.events.set(e,s)}else this.events.set(e,r.concat(t));return this}prependOnceListener(e,t){return this.prependListener(e,this._wrapOnceListener(e,t))}removeListener(e,t){const r=this._getListeners(e);return r.length>0&&(this._removeListener(r,t),this.events.set(e,r),this._emitInternalEvent("removeListener",e,t)),this}off(e,t){return this.removeListener(e,t)}removeAllListeners(e){return e?this.events.delete(e):this.events.clear(),this}listeners(e){return Array.from(this._getListeners(e))}listenerCount(e){return this._getListeners(e).length}rawListeners(e){return this.listeners(e)}},re=te;re.defaultMaxListeners=10;var tt="x-interceptors-internal-request-id";function F(e){return globalThis[e]||void 0}function rt(e,t){globalThis[e]=t}function st(e){delete globalThis[e]}var _=class{constructor(e){this.symbol=e,this.readyState="INACTIVE",this.emitter=new re,this.subscriptions=[],this.logger=new ee(e.description),this.emitter.setMaxListeners(0),this.logger.info("constructing the interceptor...")}checkEnvironment(){return!0}apply(){const e=this.logger.extend("apply");if(e.info("applying the interceptor..."),this.readyState==="APPLIED"){e.info("intercepted already applied!");return}if(!this.checkEnvironment()){e.info("the interceptor cannot be applied in this environment!");return}this.readyState="APPLYING";const r=this.getInstance();if(r){e.info("found a running instance, reusing..."),this.on=(s,o)=>(e.info('proxying the "%s" listener',s),r.emitter.addListener(s,o),this.subscriptions.push(()=>{r.emitter.removeListener(s,o),e.info('removed proxied "%s" listener!',s)}),this),this.readyState="APPLIED";return}e.info("no running instance found, setting up a new instance..."),this.setup(),this.setInstance(),this.readyState="APPLIED"}setup(){}on(e,t){const r=this.logger.extend("on");return this.readyState==="DISPOSING"||this.readyState==="DISPOSED"?(r.info("cannot listen to events, already disposed!"),this):(r.info('adding "%s" event listener:',e,t),this.emitter.on(e,t),this)}once(e,t){return this.emitter.once(e,t),this}off(e,t){return this.emitter.off(e,t),this}removeAllListeners(e){return this.emitter.removeAllListeners(e),this}dispose(){const e=this.logger.extend("dispose");if(this.readyState==="DISPOSED"){e.info("cannot dispose, already disposed!");return}if(e.info("disposing the interceptor..."),this.readyState="DISPOSING",!this.getInstance()){e.info("no interceptors running, skipping dispose...");return}if(this.clearInstance(),e.info("global symbol deleted:",F(this.symbol)),this.subscriptions.length>0){e.info("disposing of %d subscriptions...",this.subscriptions.length);for(const t of this.subscriptions)t();this.subscriptions=[],e.info("disposed of all subscriptions!",this.subscriptions.length)}this.emitter.removeAllListeners(),e.info("destroyed the listener!"),this.readyState="DISPOSED"}getInstance(){var e;const t=F(this.symbol);return this.logger.info("retrieved global instance:",(e=t?.constructor)==null?void 0:e.name),t}setInstance(){rt(this.symbol,this),this.logger.info("set global instance!",this.symbol.description)}clearInstance(){st(this.symbol),this.logger.info("cleared global instance!",this.symbol.description)}};function se(){return Math.random().toString(16).slice(2)}var I=class extends _{constructor(e){I.symbol=Symbol(e.name),super(I.symbol),this.interceptors=e.interceptors}setup(){const e=this.logger.extend("setup");e.info("applying all %d interceptors...",this.interceptors.length);for(const t of this.interceptors)e.info('applying "%s" interceptor...',t.constructor.name),t.apply(),e.info("adding interceptor dispose subscription"),this.subscriptions.push(()=>t.dispose())}on(e,t){for(const r of this.interceptors)r.on(e,t);return this}once(e,t){for(const r of this.interceptors)r.once(e,t);return this}off(e,t){for(const r of this.interceptors)r.off(e,t);return this}removeAllListeners(e){for(const t of this.interceptors)t.removeAllListeners(e);return this}};function nt(e){return(t,r)=>{const{payload:s}=r,{requestId:o}=s,i=e.requests.get(o);if(e.requests.delete(o),s.type?.includes("opaque"))return;const n=s.status===0?Response.error():new Response(Q(s.status)?null:s.body,s);n.url||Object.defineProperty(n,"url",{value:i.url,enumerable:!0,writable:!1}),e.emitter.emit(s.isMockedResponse?"response:mocked":"response:bypass",{response:n,request:i,requestId:s.requestId})}}function ot(e,t){!t?.quiet&&!location.href.startsWith(e.scope)&&p.warn(`Cannot intercept requests on this page because it's outside of the worker's scope ("${e.scope}"). If you wish to mock API requests on this page, you must resolve this scope issue.
+
+- (Recommended) Register the worker at the root level ("/") of your application.
+- Set the "Service-Worker-Allowed" response header to allow out-of-scope workers.`)}var it=e=>function(r,s){return(async()=>{e.events.removeAllListeners(),e.workerChannel.on("REQUEST",_e(e,r)),e.workerChannel.on("RESPONSE",nt(e));const n=await Ae(r.serviceWorker.url,r.serviceWorker.options,r.findWorker),[a,c]=n;if(!a){const l=s?.findWorker?p.formatMessage(`Failed to locate the Service Worker registration using a custom "findWorker" predicate.
+
+Please ensure that the custom predicate properly locates the Service Worker registration at "%s".
+More details: https://mswjs.io/docs/api/setup-worker/start#findworker
+`,r.serviceWorker.url):p.formatMessage(`Failed to locate the Service Worker registration.
+
+This most likely means that the worker script URL "%s" cannot resolve against the actual public hostname (%s). This may happen if your application runs behind a proxy, or has a dynamic hostname.
+
+Please consider using a custom "serviceWorker.url" option to point to the actual worker script location, or a custom "findWorker" option to resolve the Service Worker registration manually. More details: https://mswjs.io/docs/api/setup-worker/start`,r.serviceWorker.url,location.host);throw new Error(l)}return e.worker=a,e.registration=c,e.events.addListener(window,"beforeunload",()=>{a.state!=="redundant"&&e.workerChannel.send("CLIENT_CLOSED"),window.clearInterval(e.keepAliveInterval)}),await Oe(e).catch(l=>{p.error("Error while checking the worker script integrity. Please report this on GitHub (https://github.com/mswjs/msw/issues), including the original error below."),console.error(l)}),e.keepAliveInterval=window.setInterval(()=>e.workerChannel.send("KEEPALIVE_REQUEST"),5e3),ot(c,e.startOptions),c})().then(async n=>{const a=n.installing||n.waiting;return a&&await new Promise(c=>{a.addEventListener("statechange",()=>{if(a.state==="activated")return c()})}),await Ie(e,r).catch(c=>{throw new Error(`Failed to enable mocking: ${c?.message}`)}),n})};function ne(e={}){e.quiet||console.log(`%c${p.formatMessage("Mocking disabled.")}`,"color:orangered;font-weight:bold;")}var at=e=>function(){if(!e.isMockingEnabled){p.warn('Found a redundant "worker.stop()" call. Note that stopping the worker while mocking already stopped has no effect. Consider removing this "worker.stop()" call.');return}e.workerChannel.send("MOCK_DEACTIVATE"),e.isMockingEnabled=!1,window.clearInterval(e.keepAliveInterval),ne({quiet:e.startOptions?.quiet})},lt={serviceWorker:{url:"/mockServiceWorker.js",options:null},quiet:!1,waitUntilReady:!0,onUnhandledRequest:"warn",findWorker(e,t){return e===t}};function ct(){const e=(t,r)=>{e.state="pending",e.resolve=s=>{if(e.state!=="pending")return;e.result=s;const o=i=>(e.state="fulfilled",i);return t(s instanceof Promise?s:Promise.resolve(s).then(o))},e.reject=s=>{if(e.state==="pending")return queueMicrotask(()=>{e.state="rejected"}),r(e.rejectionReason=s)}};return e}var C=class extends Promise{#e;resolve;reject;constructor(e=null){const t=ct();super((r,s)=>{t(r,s),e?.(t.resolve,t.reject)}),this.#e=t,this.resolve=this.#e.resolve,this.reject=this.#e.reject}get state(){return this.#e.state}get rejectionReason(){return this.#e.rejectionReason}then(e,t){return this.#t(super.then(e,t))}catch(e){return this.#t(super.catch(e))}finally(e){return this.#t(super.finally(e))}#t(e){return Object.defineProperties(e,{resolve:{configurable:!0,value:this.resolve},reject:{configurable:!0,value:this.reject}})}},ut=class{constructor(e){this.request=e,this.responsePromise=new C}respondWith(e){w(this.responsePromise.state==="pending",'Failed to respond to "%s %s" request: the "request" event has already been responded to.',this.request.method,this.request.url),this.responsePromise.resolve(e)}};function oe(e){const t=new ut(e);return Reflect.set(e,"respondWith",t.respondWith.bind(t)),{interactiveRequest:e,requestController:t}}async function T(e,t,...r){const s=e.listeners(t);if(s.length!==0)for(const o of s)await o.apply(e,r)}function ht(e){try{return new URL(e),!0}catch{return!1}}var ie=class extends _{constructor(){super(ie.symbol)}checkEnvironment(){return typeof globalThis<"u"&&typeof globalThis.fetch<"u"}async setup(){const e=globalThis.fetch;w(!e[R],'Failed to patch the "fetch" module: already patched.'),globalThis.fetch=async(t,r)=>{var s;const o=se(),i=typeof t=="string"&&typeof location<"u"&&!ht(t)?new URL(t,location.origin):t,n=new Request(i,r);this.logger.info("[%s] %s",n.method,n.url);const{interactiveRequest:a,requestController:c}=oe(n);this.logger.info('emitting the "request" event for %d listener(s)...',this.emitter.listenerCount("request")),this.emitter.once("request",({requestId:y})=>{y===o&&c.responsePromise.state==="pending"&&c.responsePromise.resolve(void 0)}),this.logger.info("awaiting for the mocked response...");const l=a.signal,h=new C;l&&l.addEventListener("abort",()=>{h.reject(l.reason)},{once:!0});const u=new C,d=y=>{if(this.logger.info("responding with a mock response:",y),this.emitter.listenerCount("response")>0){this.logger.info('emitting the "response" event...');const b=y.clone();this.emitter.emit("response",{response:b,isMockedResponse:!0,request:a,requestId:o})}Object.defineProperty(y,"url",{writable:!1,enumerable:!0,configurable:!1,value:n.url}),u.resolve(y)},g=y=>{u.reject(y)},f=await W(async()=>{const y=T(this.emitter,"request",{request:a,requestId:o});await Promise.race([h,y,c.responsePromise]),this.logger.info("all request listeners have been resolved!");const b=await c.responsePromise;return this.logger.info("event.respondWith called with:",b),b});if(h.state==="rejected")return this.logger.info("request has been aborted:",h.rejectionReason),u.reject(h.rejectionReason),u;if(f.error)return this.logger.info("request listerner threw an error:",f.error),f.error instanceof Response&&(S(f.error)?g(G(f.error)):d(f.error)),this.emitter.listenerCount("unhandledException")>0&&(await T(this.emitter,"unhandledException",{error:f.error,request:n,requestId:o,controller:{respondWith:d,errorWith:g}}),u.state!=="pending")||d(Z(f.error)),u;const m=f.data;return m&&!((s=n.signal)!=null&&s.aborted)?(this.logger.info("received mocked response:",m),S(m)?(this.logger.info("received a network error response, rejecting the request promise..."),g(G(m))):d(m),u):(this.logger.info("no mocked response received!"),e(n).then(y=>{if(this.logger.info("original fetch performed",y),this.emitter.listenerCount("response")>0){this.logger.info('emitting the "response" event...');const b=y.clone();this.emitter.emit("response",{response:b,isMockedResponse:!1,request:a,requestId:o})}return y}))},Object.defineProperty(globalThis.fetch,R,{enumerable:!0,configurable:!0,value:!0}),this.subscriptions.push(()=>{Object.defineProperty(globalThis.fetch,R,{value:void 0}),globalThis.fetch=e,this.logger.info('restored native "globalThis.fetch"!',globalThis.fetch.name)})}},ae=ie;ae.symbol=Symbol("fetch");function G(e){return Object.assign(new TypeError("Failed to fetch"),{cause:e})}function dt(e,t){const r=new Uint8Array(e.byteLength+t.byteLength);return r.set(e,0),r.set(t,e.byteLength),r}var le=class{constructor(e,t){this.AT_TARGET=0,this.BUBBLING_PHASE=0,this.CAPTURING_PHASE=0,this.NONE=0,this.type="",this.srcElement=null,this.currentTarget=null,this.eventPhase=0,this.isTrusted=!0,this.composed=!1,this.cancelable=!0,this.defaultPrevented=!1,this.bubbles=!0,this.lengthComputable=!0,this.loaded=0,this.total=0,this.cancelBubble=!1,this.returnValue=!0,this.type=e,this.target=t?.target||null,this.currentTarget=t?.currentTarget||null,this.timeStamp=Date.now()}composedPath(){return[]}initEvent(e,t,r){this.type=e,this.bubbles=!!t,this.cancelable=!!r}preventDefault(){this.defaultPrevented=!0}stopPropagation(){}stopImmediatePropagation(){}},pt=class extends le{constructor(e,t){super(e),this.lengthComputable=t?.lengthComputable||!1,this.composed=t?.composed||!1,this.loaded=t?.loaded||0,this.total=t?.total||0}},ft=typeof ProgressEvent<"u";function gt(e,t,r){const s=["error","progress","loadstart","loadend","load","timeout","abort"],o=ft?ProgressEvent:pt;return s.includes(t)?new o(t,{lengthComputable:!0,loaded:r?.loaded||0,total:r?.total||0}):new le(t,{target:e,currentTarget:e})}function ce(e,t){if(!(t in e))return null;if(Object.prototype.hasOwnProperty.call(e,t))return e;const s=Reflect.getPrototypeOf(e);return s?ce(s,t):null}function X(e,t){return new Proxy(e,mt(t))}function mt(e){const{constructorCall:t,methodCall:r,getProperty:s,setProperty:o}=e,i={};return typeof t<"u"&&(i.construct=function(n,a,c){const l=Reflect.construct.bind(null,n,a,c);return t.call(c,a,l)}),i.set=function(n,a,c){const l=()=>{const h=ce(n,a)||n,u=Reflect.getOwnPropertyDescriptor(h,a);return typeof u?.set<"u"?(u.set.apply(n,[c]),!0):Reflect.defineProperty(h,a,{writable:!0,enumerable:!0,configurable:!0,value:c})};return typeof o<"u"?o.call(n,[a,c],l):l()},i.get=function(n,a,c){const l=()=>n[a],h=typeof s<"u"?s.call(n,[a,c],l):l();return typeof h=="function"?(...u)=>{const d=h.bind(n,...u);return typeof r<"u"?r.call(n,[a,u],d):d()}:h},i}function yt(e){return["application/xhtml+xml","application/xml","image/svg+xml","text/html","text/xml"].some(r=>e.startsWith(r))}function vt(e){try{return JSON.parse(e)}catch{return null}}function wt(e,t){const r=Q(e.status)?null:t;return new Response(r,{status:e.status,statusText:e.statusText,headers:bt(e.getAllResponseHeaders())})}function bt(e){const t=new Headers,r=e.split(/[\r\n]+/);for(const s of r){if(s.trim()==="")continue;const[o,...i]=s.split(": "),n=i.join(": ");t.append(o,n)}return t}var V=Symbol("isMockedResponse"),Et=H(),Rt=class{constructor(e,t){this.initialRequest=e,this.logger=t,this.method="GET",this.url=null,this.events=new Map,this.requestId=se(),this.requestHeaders=new Headers,this.responseBuffer=new Uint8Array,this.request=X(e,{setProperty:([r,s],o)=>{switch(r){case"ontimeout":{const i=r.slice(2);return this.request.addEventListener(i,s),o()}default:return o()}},methodCall:([r,s],o)=>{var i;switch(r){case"open":{const[n,a]=s;return typeof a>"u"?(this.method="GET",this.url=K(n)):(this.method=n,this.url=K(a)),this.logger=this.logger.extend(`${this.method} ${this.url.href}`),this.logger.info("open",this.method,this.url.href),o()}case"addEventListener":{const[n,a]=s;return this.registerEvent(n,a),this.logger.info("addEventListener",n,a),o()}case"setRequestHeader":{const[n,a]=s;return this.requestHeaders.set(n,a),this.logger.info("setRequestHeader",n,a),o()}case"send":{const[n]=s;n!=null&&(this.requestBody=typeof n=="string"?De(n):n),this.request.addEventListener("load",()=>{if(typeof this.onResponse<"u"){const l=wt(this.request,this.request.response);this.onResponse.call(this,{response:l,isMockedResponse:V in this.request,request:a,requestId:this.requestId})}});const a=this.toFetchApiRequest();(((i=this.onRequest)==null?void 0:i.call(this,{request:a,requestId:this.requestId}))||Promise.resolve()).finally(()=>{if(this.request.readyState<this.request.LOADING)return this.logger.info("request callback settled but request has not been handled (readystate %d), performing as-is...",this.request.readyState),Et&&this.request.setRequestHeader(tt,this.requestId),o()});break}default:return o()}}})}registerEvent(e,t){const s=(this.events.get(e)||[]).concat(t);this.events.set(e,s),this.logger.info('registered event "%s"',e,t)}respondWith(e){this.logger.info("responding with a mocked response: %d %s",e.status,e.statusText),E(this.request,V,!0),E(this.request,"status",e.status),E(this.request,"statusText",e.statusText),E(this.request,"responseURL",this.url.href),this.request.getResponseHeader=new Proxy(this.request.getResponseHeader,{apply:(s,o,i)=>{if(this.logger.info("getResponseHeader",i[0]),this.request.readyState<this.request.HEADERS_RECEIVED)return this.logger.info("headers not received yet, returning null"),null;const n=e.headers.get(i[0]);return this.logger.info('resolved response header "%s" to',i[0],n),n}}),this.request.getAllResponseHeaders=new Proxy(this.request.getAllResponseHeaders,{apply:()=>{if(this.logger.info("getAllResponseHeaders"),this.request.readyState<this.request.HEADERS_RECEIVED)return this.logger.info("headers not received yet, returning empty string"),"";const o=Array.from(e.headers.entries()).map(([i,n])=>`${i}: ${n}`).join(`\r
+`);return this.logger.info("resolved all response headers to",o),o}}),Object.defineProperties(this.request,{response:{enumerable:!0,configurable:!1,get:()=>this.response},responseText:{enumerable:!0,configurable:!1,get:()=>this.responseText},responseXML:{enumerable:!0,configurable:!1,get:()=>this.responseXML}});const t=e.headers.has("Content-Length")?Number(e.headers.get("Content-Length")):void 0;this.logger.info("calculated response body length",t),this.trigger("loadstart",{loaded:0,total:t}),this.setReadyState(this.request.HEADERS_RECEIVED),this.setReadyState(this.request.LOADING);const r=()=>{this.logger.info("finalizing the mocked response..."),this.setReadyState(this.request.DONE),this.trigger("load",{loaded:this.responseBuffer.byteLength,total:t}),this.trigger("loadend",{loaded:this.responseBuffer.byteLength,total:t})};if(e.body){this.logger.info("mocked response has body, streaming...");const s=e.body.getReader(),o=async()=>{const{value:i,done:n}=await s.read();if(n){this.logger.info("response body stream done!"),r();return}i&&(this.logger.info("read response body chunk:",i),this.responseBuffer=dt(this.responseBuffer,i),this.trigger("progress",{loaded:this.responseBuffer.byteLength,total:t})),o()};o()}else r()}responseBufferToText(){return Ue(this.responseBuffer)}get response(){if(this.logger.info("getResponse (responseType: %s)",this.request.responseType),this.request.readyState!==this.request.DONE)return null;switch(this.request.responseType){case"json":{const e=vt(this.responseBufferToText());return this.logger.info("resolved response JSON",e),e}case"arraybuffer":{const e=Be(this.responseBuffer);return this.logger.info("resolved response ArrayBuffer",e),e}case"blob":{const e=this.request.getResponseHeader("Content-Type")||"text/plain",t=new Blob([this.responseBufferToText()],{type:e});return this.logger.info("resolved response Blob (mime type: %s)",t,e),t}default:{const e=this.responseBufferToText();return this.logger.info('resolving "%s" response type as text',this.request.responseType,e),e}}}get responseText(){if(w(this.request.responseType===""||this.request.responseType==="text","InvalidStateError: The object is in invalid state."),this.request.readyState!==this.request.LOADING&&this.request.readyState!==this.request.DONE)return"";const e=this.responseBufferToText();return this.logger.info('getResponseText: "%s"',e),e}get responseXML(){if(w(this.request.responseType===""||this.request.responseType==="document","InvalidStateError: The object is in invalid state."),this.request.readyState!==this.request.DONE)return null;const e=this.request.getResponseHeader("Content-Type")||"";return typeof DOMParser>"u"?(console.warn("Cannot retrieve XMLHttpRequest response body as XML: DOMParser is not defined. You are likely using an environment that is not browser or does not polyfill browser globals correctly."),null):yt(e)?new DOMParser().parseFromString(this.responseBufferToText(),e):null}errorWith(e){this.logger.info("responding with an error"),this.setReadyState(this.request.DONE),this.trigger("error"),this.trigger("loadend")}setReadyState(e){if(this.logger.info("setReadyState: %d -> %d",this.request.readyState,e),this.request.readyState===e){this.logger.info("ready state identical, skipping transition...");return}E(this.request,"readyState",e),this.logger.info("set readyState to: %d",e),e!==this.request.UNSENT&&(this.logger.info('triggerring "readystatechange" event...'),this.trigger("readystatechange"))}trigger(e,t){const r=this.request[`on${e}`],s=gt(this.request,e,t);this.logger.info('trigger "%s"',e,t||""),typeof r=="function"&&(this.logger.info('found a direct "%s" callback, calling...',e),r.call(this.request,s));for(const[o,i]of this.events)o===e&&(this.logger.info('found %d listener(s) for "%s" event, calling...',i.length,e),i.forEach(n=>n.call(this.request,s)))}toFetchApiRequest(){this.logger.info("converting request to a Fetch API Request...");const e=new Request(this.url.href,{method:this.method,headers:this.requestHeaders,credentials:this.request.withCredentials?"include":"same-origin",body:["GET","HEAD"].includes(this.method)?null:this.requestBody}),t=X(e.headers,{methodCall:([r,s],o)=>{switch(r){case"append":case"set":{const[i,n]=s;this.request.setRequestHeader(i,n);break}case"delete":{const[i]=s;console.warn(`XMLHttpRequest: Cannot remove a "${i}" header from the Fetch API representation of the "${e.method} ${e.url}" request. XMLHttpRequest headers cannot be removed.`);break}}return o()}});return E(e,"headers",t),this.logger.info("converted request to a Fetch API Request!",e),e}};function K(e){return typeof location>"u"?new URL(e):new URL(e.toString(),location.href)}function E(e,t,r){Reflect.defineProperty(e,t,{writable:!0,enumerable:!0,value:r})}function kt({emitter:e,logger:t}){return new Proxy(globalThis.XMLHttpRequest,{construct(s,o,i){t.info("constructed new XMLHttpRequest");const n=Reflect.construct(s,o,i),a=Object.getOwnPropertyDescriptors(s.prototype);for(const l in a)Reflect.defineProperty(n,l,a[l]);const c=new Rt(n,t);return c.onRequest=async function({request:l,requestId:h}){const{interactiveRequest:u,requestController:d}=oe(l);this.logger.info("awaiting mocked response..."),e.once("request",({requestId:m})=>{m===h&&d.responsePromise.state==="pending"&&d.respondWith(void 0)});const g=await W(async()=>{this.logger.info('emitting the "request" event for %s listener(s)...',e.listenerCount("request")),await T(e,"request",{request:u,requestId:h}),this.logger.info('all "request" listeners settled!');const m=await d.responsePromise;return this.logger.info("event.respondWith called with:",m),m});if(g.error){if(this.logger.info("request listener threw an exception, aborting request...",g.error),g.error instanceof Response){S(g.error)?c.errorWith(new TypeError("Network error")):this.respondWith(g.error);return}if(e.listenerCount("unhandledException")>0&&(await T(e,"unhandledException",{error:g.error,request:l,requestId:h,controller:{respondWith:c.respondWith.bind(c),errorWith:c.errorWith.bind(c)}}),n.readyState>XMLHttpRequest.OPENED))return;c.respondWith(Z(g.error));return}const f=g.data;if(typeof f<"u"){if(this.logger.info("received mocked response: %d %s",f.status,f.statusText),S(f)){this.logger.info("received a network error response, rejecting the request promise..."),c.errorWith(new TypeError("Network error"));return}return c.respondWith(f)}this.logger.info("no mocked response received, performing request as-is...")},c.onResponse=async function({response:l,isMockedResponse:h,request:u,requestId:d}){this.logger.info('emitting the "response" event for %s listener(s)...',e.listenerCount("response")),e.emit("response",{response:l,isMockedResponse:h,request:u,requestId:d})},c.request}})}var ue=class extends _{constructor(){super(ue.interceptorSymbol)}checkEnvironment(){return typeof globalThis.XMLHttpRequest<"u"}setup(){const e=this.logger.extend("setup");e.info('patching "XMLHttpRequest" module...');const t=globalThis.XMLHttpRequest;w(!t[R],'Failed to patch the "XMLHttpRequest" module: already patched.'),globalThis.XMLHttpRequest=kt({emitter:this.emitter,logger:this.logger}),e.info('native "XMLHttpRequest" module patched!',globalThis.XMLHttpRequest.name),Object.defineProperty(globalThis.XMLHttpRequest,R,{enumerable:!0,configurable:!0,value:!0}),this.subscriptions.push(()=>{Object.defineProperty(globalThis.XMLHttpRequest,R,{value:void 0}),globalThis.XMLHttpRequest=t,e.info('native "XMLHttpRequest" module restored!',globalThis.XMLHttpRequest.name)})}},he=ue;he.interceptorSymbol=Symbol("xhr");function qt(e,t){const r=new I({name:"fallback",interceptors:[new ae,new he]});return r.on("request",async({request:s,requestId:o})=>{const i=s.clone(),n=await J(s,o,e.getRequestHandlers(),t,e.emitter,{onMockedResponse(a,{handler:c,parsedResult:l}){t.quiet||e.emitter.once("response:mocked",({response:h})=>{c.log({request:i,response:h,parsedResult:l})})}});n&&s.respondWith(n)}),r.on("response",({response:s,isMockedResponse:o,request:i,requestId:n})=>{e.emitter.emit(o?"response:mocked":"response:bypass",{response:s,request:i,requestId:n})}),r.apply(),r}function Lt(e){return async function(r){e.fallbackInterceptor=qt(e,r),Y({message:"Mocking enabled (fallback mode).",quiet:r.quiet})}}function St(e){return function(){e.fallbackInterceptor?.dispose(),ne({quiet:e.startOptions?.quiet})}}function Tt(){try{const e=new ReadableStream({start:r=>r.close()});return new MessageChannel().port1.postMessage(e,[e]),!0}catch{return!1}}var xt=class extends ve{context;startHandler=null;stopHandler=null;listeners;constructor(...e){super(...e),w(!H(),p.formatMessage("Failed to execute `setupWorker` in a non-browser environment. Consider using `setupServer` for Node.js environment instead.")),this.listeners=[],this.context=this.createWorkerContext()}createWorkerContext(){const e={isMockingEnabled:!1,startOptions:null,worker:null,getRequestHandlers:()=>this.handlersController.currentHandlers(),registration:null,requests:new Map,emitter:this.emitter,workerChannel:{on:(t,r)=>{this.context.events.addListener(navigator.serviceWorker,"message",s=>{if(s.source!==this.context.worker)return;const o=s.data;o&&o.type===t&&r(s,o)})},send:t=>{this.context.worker?.postMessage(t)}},events:{addListener:(t,r,s)=>(t.addEventListener(r,s),this.listeners.push({eventType:r,target:t,callback:s}),()=>{t.removeEventListener(r,s)}),removeAllListeners:()=>{for(const{target:t,eventType:r,callback:s}of this.listeners)t.removeEventListener(r,s);this.listeners=[]},once:t=>{const r=[];return new Promise((s,o)=>{const i=n=>{try{const a=n.data;a.type===t&&s(a)}catch(a){o(a)}};r.push(this.context.events.addListener(navigator.serviceWorker,"message",i),this.context.events.addListener(navigator.serviceWorker,"messageerror",o))}).finally(()=>{r.forEach(s=>s())})}},supports:{serviceWorkerApi:!("serviceWorker"in navigator)||location.protocol==="file:",readableStreamTransfer:Tt()}};return this.startHandler=e.supports.serviceWorkerApi?Lt(e):it(e),this.stopHandler=e.supports.serviceWorkerApi?St(e):at(e),e}async start(e={}){return e.waitUntilReady===!0&&p.warn('The "waitUntilReady" option has been deprecated. Please remove it from this "worker.start()" call. Follow the recommended Browser integration (https://mswjs.io/docs/integrations/browser) to eliminate any race conditions between the Service Worker registration and any requests made by your application on initial render.'),this.context.startOptions=z(lt,e),await this.startHandler(this.context.startOptions,e)}stop(){super.dispose(),this.context.events.removeAllListeners(),this.context.emitter.removeAllListeners(),this.stopHandler()}};function Pt(...e){return new xt(...e)}var Mt=/\.(js|jsx|ts|tsx|mjs|woff|woff2|ttf|otf|eot)$/,At=["sb-common-assets","node_modules","node-modules","hot-update.json","__webpack_hmr","sb-vite"],It=e=>!!(Mt.test(e)||At.some(r=>e.includes(r))),Ct=e=>typeof e?.onUnhandledRequest=="string"?e:{...e,onUnhandledRequest:(...t)=>{const[{url:r},s]=t;if(!It(r)){if(!e?.onUnhandledRequest){s.warning();return}typeof e?.onUnhandledRequest=="function"&&e.onUnhandledRequest(...t)}}},L;function Ht(e,t=[]){const r=Pt(...t);return r.start(Ct(e)),L=r,r}function Wt(e){for(var t=[],r=1;r<arguments.length;r++)t[r-1]=arguments[r];var s=Array.from(typeof e=="string"?[e]:e);s[s.length-1]=s[s.length-1].replace(/\r?\n([\t ]*)$/,"");var o=s.reduce(function(a,c){var l=c.match(/\n([\t ]+|(?!\s).)/g);return l?a.concat(l.map(function(h){var u,d;return(d=(u=h.match(/[\t ]/g))===null||u===void 0?void 0:u.length)!==null&&d!==void 0?d:0})):a},[]);if(o.length){var i=new RegExp(`
+[	 ]{`+Math.min.apply(Math,o)+"}","g");s=s.map(function(a){return a.replace(i,`
+`)})}s[0]=s[0].replace(/^\r?\n/,"");var n=s[0];return t.forEach(function(a,c){var l=n.match(/(?:^|\n)( *)$/),h=l?l[1]:"",u=a;typeof a=="string"&&a.includes(`
+`)&&(u=String(a).split(`
+`).map(function(d,g){return g===0?d:""+h+d}).join(`
+`)),n+=u+s[c+1]}),n}function _t(e){let t=!1,r;return(...o)=>(t||(t=!0,r=e(...o)),r)}function Ot(e){return _t(()=>{console.warn(Wt(e))})}var jt=Ot(`
+[msw-storybook-addon] You are using parameters.msw as an Array instead of an Object with a property "handlers". This usage is deprecated and will be removed in the next release. Please use the Object syntax instead.
+
+More info: https://github.com/mswjs/msw-storybook-addon/blob/main/MIGRATION.md#parametersmsw-array-notation-deprecated-in-favor-of-object-notation
+`);function Dt(e){if(L?.resetHandlers(),e!=null){if(Array.isArray(e)&&e.length>0){jt(),L.use(...e);return}if("handlers"in e&&e.handlers){const t=Object.values(e.handlers).filter(Boolean).reduce((r,s)=>r.concat(s),[]);t.length>0&&L.use(...t);return}}}var Ut=async e=>(Dt(e.parameters.msw),typeof window<"u"&&"navigator"in window&&navigator.serviceWorker?.controller&&await navigator.serviceWorker.ready,{});Ht({onUnhandledRequest:"bypass"});const $t={parameters:{controls:{matchers:{color:/(background|color)$/i,date:/Date$/i}}},loaders:[Ut]};export{$t as default};

package/storybook-static/assets/preview-FpHGYA1q.js

@@ -0,0 +1 @@
+let l;const b=new Uint8Array(16);function x(){if(!l&&(l=typeof crypto<"u"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!l))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return l(b)}const i=[];for(let e=0;e<256;++e)i.push((e+256).toString(16).slice(1));function S(e,t=0){return i[e[t+0]]+i[e[t+1]]+i[e[t+2]]+i[e[t+3]]+"-"+i[e[t+4]]+i[e[t+5]]+"-"+i[e[t+6]]+i[e[t+7]]+"-"+i[e[t+8]]+i[e[t+9]]+"-"+i[e[t+10]]+i[e[t+11]]+i[e[t+12]]+i[e[t+13]]+i[e[t+14]]+i[e[t+15]]}const v=typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto),y={randomUUID:v};function A(e,t,n){if(y.randomUUID&&!t&&!e)return y.randomUUID();e=e||{};const r=e.random||(e.rng||x)();return r[6]=r[6]&15|64,r[8]=r[8]&63|128,S(r)}const{addons:w}=__STORYBOOK_MODULE_PREVIEW_API__,{global:p}=__STORYBOOK_MODULE_GLOBAL__,{ImplicitActionsDuringRendering:D}=__STORYBOOK_MODULE_CORE_EVENTS_PREVIEW_ERRORS__;var I="storybook/actions",U=`${I}/action-event`,f={depth:10,clearOnStoryChange:!0,limit:50},m=(e,t)=>{let n=Object.getPrototypeOf(e);return!n||t(n)?n:m(n,t)},j=e=>!!(typeof e=="object"&&e&&m(e,t=>/^Synthetic(?:Base)?Event$/.test(t.constructor.name))&&typeof e.persist=="function"),V=e=>{if(j(e)){let t=Object.create(e.constructor.prototype,Object.getOwnPropertyDescriptors(e));t.persist();let n=Object.getOwnPropertyDescriptor(t,"view"),r=n?.value;return typeof r=="object"&&r?.constructor.name==="Window"&&Object.defineProperty(t,"view",{...n,value:Object.create(r.constructor.prototype)}),t}return e},C=()=>typeof crypto=="object"&&typeof crypto.getRandomValues=="function"?A():Date.now().toString(36)+Math.random().toString(36).substring(2);function u(e,t={}){let n={...f,...t},r=function(...c){if(t.implicit){let g=("__STORYBOOK_PREVIEW__"in p?p.__STORYBOOK_PREVIEW__:void 0)?.storyRenders.find(d=>d.phase==="playing"||d.phase==="rendering");if(g){let d=!window?.FEATURES?.disallowImplicitActionsInRenderV8,O=new D({phase:g.phase,name:e,deprecated:d});if(d)console.warn(O);else throw O}}let o=w.getChannel(),s=C(),a=5,_=c.map(V),E=c.length>1?_:_[0],T={id:s,count:0,data:{name:e,args:E},options:{...n,maxDepth:a+(n.depth||3),allowFunction:n.allowFunction||!1}};o.emit(U,T)};return r.isAction=!0,r.implicit=t.implicit,r}var h=(e,t)=>typeof t[e]>"u"&&!(e in t),K=e=>{let{initialArgs:t,argTypes:n,id:r,parameters:{actions:c}}=e;if(!c||c.disable||!c.argTypesRegex||!n)return{};let o=new RegExp(c.argTypesRegex);return Object.entries(n).filter(([s])=>!!o.test(s)).reduce((s,[a,_])=>(h(a,t)&&(s[a]=u(a,{implicit:!0,id:r})),s),{})},L=e=>{let{initialArgs:t,argTypes:n,parameters:{actions:r}}=e;return r?.disable||!n?{}:Object.entries(n).filter(([c,o])=>!!o.action).reduce((c,[o,s])=>(h(o,t)&&(c[o]=u(typeof s.action=="string"?s.action:o)),c),{})},M=[L,K],R=!1,B=e=>{let{parameters:{actions:t}}=e;if(!t?.disable&&!R&&"__STORYBOOK_TEST_ON_MOCK_CALL__"in p&&typeof p.__STORYBOOK_TEST_ON_MOCK_CALL__=="function"){let n=p.__STORYBOOK_TEST_ON_MOCK_CALL__;n((r,c)=>{let o=r.getMockName();o!=="spy"&&(!/^next\/.*::/.test(o)||["next/router::useRouter()","next/navigation::useRouter()","next/navigation::redirect","next/cache::","next/headers::cookies().set","next/headers::cookies().delete","next/headers::headers().set","next/headers::headers().delete"].some(s=>o.startsWith(s)))&&u(o)(c)}),R=!0}},P=[B];export{M as argsEnhancers,P as loaders};

package/storybook-static/assets/{preview-PxUn-cIn.js → preview-TCN6m6T-.js}

@@ -1 +1 @@
-import"./index-Dkj0J1ds.js";const{global:O}=__STORYBOOK_MODULE_GLOBAL__,{makeDecorator:E,addons:_}=__STORYBOOK_MODULE_PREVIEW_API__,{STORY_CHANGED:l,SELECT_STORY:L}=__STORYBOOK_MODULE_CORE_EVENTS__;var c="links",{document:i,HTMLElement:m}=O,v=e=>_.getChannel().emit(L,e),o=e=>{let{target:t}=e;if(!(t instanceof m))return;let s=t,{sbKind:a,sbStory:r}=s.dataset;(a||r)&&(e.preventDefault(),v({kind:a,story:r}))},n=!1,d=()=>{n||(n=!0,i.addEventListener("click",o))},k=()=>{n&&(n=!1,i.removeEventListener("click",o))},R=E({name:"withLinks",parameterName:c,wrapper:(e,t)=>(d(),_.getChannel().once(l,k),e(t))}),T=[R];export{T as decorators};
+import"./index-DXimoRZY.js";const{global:O}=__STORYBOOK_MODULE_GLOBAL__,{makeDecorator:E,addons:_}=__STORYBOOK_MODULE_PREVIEW_API__,{STORY_CHANGED:l,SELECT_STORY:L}=__STORYBOOK_MODULE_CORE_EVENTS__;var c="links",{document:i,HTMLElement:m}=O,v=e=>_.getChannel().emit(L,e),o=e=>{let{target:t}=e;if(!(t instanceof m))return;let s=t,{sbKind:a,sbStory:r}=s.dataset;(a||r)&&(e.preventDefault(),v({kind:a,story:r}))},n=!1,d=()=>{n||(n=!0,i.addEventListener("click",o))},k=()=>{n&&(n=!1,i.removeEventListener("click",o))},R=E({name:"withLinks",parameterName:c,wrapper:(e,t)=>(d(),_.getChannel().once(l,k),e(t))}),T=[R];export{T as decorators};

package/storybook-static/assets/slice-events.test.stories-BSXCLIA5.js

@@ -0,0 +1,231 @@
+import{w as d,e as c,u}from"./custom-element-BV8-hRQS.js";import"./index-CVRyq5ci.js";function i(e){return new Promise(t=>setTimeout(t,e))}function h(e){const{title:t,body:a}=e;return`
+        <fieldset>
+            <legend>${t}</legend>
+            ${a}
+        </fieldset>
+  `}const B={title:"slice-events",render:h},o={args:{title:"Slice initialization, change on event",body:`
+    <p>initial value should be 0; + and - should change the number in input field</p>
+    <custom-element>
+            <template>
+                <button slice="clickcount" slice-event="click" slice-value="//clickcount + 1">+</button>
+                <button slice="clickcount" slice-event="click" slice-value="//clickcount - 1">-</button>
+                <input  slice="clickcount" type="number" value="{//clickcount ?? 0}">
+                <code data-testid="slice-value">{ //clickcount }</code>
+            </template>
+        </custom-element>
+`},play:async({canvasElement:e})=>{const t=o.args.title,a=d(e);await a.findByText(t);const n=await a.findByTestId("slice-value"),s=await e.querySelector('[type="number"]');await c(n).toBeInTheDocument(),c(n.textContent).to.equal("0","initial slot value 0"),c(s.value).to.equal("0","initial input value 0"),e.querySelector('[slice-value="//clickcount + 1"]').click(),await i(10),c(n.textContent).to.equal("1","increment to 1"),c(s.value).to.equal("1","increment input 1"),e.querySelector('[slice-value="//clickcount + 1"]').click(),await i(10),e.querySelector('[slice-value="//clickcount + 1"]').click(),await i(10),c(n.textContent).to.equal("3","double increment to 3"),c(s.value).to.equal("3","double increment input to 3"),e.querySelector('[slice-value="//clickcount - 1"]').click(),await i(10),c(n.textContent).to.equal("2","decrement to 2"),c(s.value).to.equal("2","decrement input to 2")}},l={args:{title:"Realtime Slice data on event",body:`
+    <p>move the mouse over TEXTAREA and click to see slice and slice event changed</p>
+    <custom-element>
+        <template>
+            <textarea   slice="s" slice-value="concat('x:', //@pageX)" slice-event="mousemove click"
+                        style="width:16rem;height:16rem;box-shadow: inset {//@offsetX}px {//@offsetY}px gold;"></textarea><br/>
+            //slice/s                   : <code data-testid="//slice/s"                 >{ //slice/s                }</code>  <br/>
+            //slice/s/event/@offsetY    : <code data-testid="//slice/s/event/@offsetY"  >{ //slice/s/event/@offsetY }</code>  <br/>
+            event type                  : <code data-testid="//slice/s/event/@type"     >{ //slice/s/event/@type    }</code>
+        </template>
+    </custom-element>
+`},play:async({canvasElement:e})=>{const t=l.args.title,a=d(e);await a.findByText(t);const n=()=>a.getByTestId("//slice/s").textContent,s=()=>a.getByTestId("//slice/s/event/@offsetY").textContent,y=()=>a.getByTestId("//slice/s/event/@type").textContent,b=await e.querySelector("textarea");c(n()).to.equal("","initial slot value blank"),c(s()).to.equal("","initial slot offsetY blank"),c(y()).to.equal("","initial slot event blank"),((v,f,x)=>{const w=new MouseEvent(x,{screenX:v,screenY:f,clientX:v,clientY:f,offsetX:v,offsetY:f});b.dispatchEvent(w)})(20,20,"click"),await i(10),c(n()).to.equal("x:20","click slot value 20"),c(Number(s())).to.be.lessThan(0,"offsetY click"),c(y()).to.equal("click","click event type")}},p={args:{title:'slice-event="change submit change submit" ',body:`
+    <p> double same event should be treated as one.</p>
+    <custom-element>
+        <template>
+            <form slice-event="submit submit change change" slice="form-1">
+                <input slice-event="change change" required slice="field-1" data-testid="f1" name="f1"/>
+                <input name="f2" value="populated in form-data"/>
+                <button>next</button> <code>slices count {count(/datadom/slice/*)}</code>
+            </form>
+        </template>
+    </custom-element>
+`},play:async({canvasElement:e})=>{const t=d(e),a=await t.findByTestId("f1");a.focus(),await u.type(a,"AB"),t.getByRole("button").focus(),await u.clear(a),await u.click(t.getByRole("button")),c(await t.findByText("slices count 2")).toBeInTheDocument()}},r={args:{title:'slice="/datadom/attributes/emotion | s1" ',body:`
+    <p> double same event should be treated as one.</p>
+    <custom-element>
+        <template>
+            <input  slice="s1|s2" 
+                    slice-event="input"
+                    data-testid="f1"
+                    /><br/>
+            Type to update s1 and s2 slices <br/>
+            slice <code>s1: {//slice/s1}</code><br/>
+            slice <code>s2: {//slice/s2}</code><br/>
+        </template>
+    </custom-element>
+`},play:async({canvasElement:e})=>{const t=d(e),a=await t.findByTestId("f1");a.focus(),await u.type(a,"AB"),await c(await t.findByText("s1: AB")).toBeInTheDocument(),await c(await t.findByText("s2: AB")).toBeInTheDocument()}},m={args:{title:'slice="/datadom/attributes/emotion | s1" ',body:`
+    <p> double same event should be treated as one.</p>
+    <custom-element>
+        <template>
+            <attribute name="emotion">😃</attribute>
+            <input  slice-event="input" slice="/datadom/attributes/emotion | s1" data-testid="f1"/>
+            <p>Type to update </p>
+            <p>emotion attribute: {emotion}</p>
+            <p>slice: {//slice/s1}</p>
+        </template>
+    </custom-element>
+`},play:async({canvasElement:e})=>{const t=d(e),a=await t.findByTestId("f1");a.focus(),await u.type(a,"AB"),await c(await t.findByText("emotion attribute: AB")).toBeInTheDocument()}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'Slice initialization, change on event',
+    body: \`
+    <p>initial value should be 0; + and - should change the number in input field</p>
+    <custom-element>
+            <template>
+                <button slice="clickcount" slice-event="click" slice-value="//clickcount + 1">+</button>
+                <button slice="clickcount" slice-event="click" slice-value="//clickcount - 1">-</button>
+                <input  slice="clickcount" type="number" value="{//clickcount ?? 0}">
+                <code data-testid="slice-value">{ //clickcount }</code>
+            </template>
+        </custom-element>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const titleText = (SliceInitChangeEvent.args!.title as string);
+    const canvas = within(canvasElement);
+    await canvas.findByText(titleText);
+    const code = await canvas.findByTestId('slice-value');
+    const input = (await canvasElement.querySelector('[type="number"]') as HTMLInputElement);
+    await expect(code).toBeInTheDocument();
+    expect(code.textContent).to.equal('0', 'initial slot value 0');
+    expect(input.value).to.equal('0', 'initial input value 0');
+    canvasElement.querySelector('[slice-value="//clickcount + 1"]').click();
+    await sleep(10);
+    expect(code.textContent).to.equal('1', 'increment to 1');
+    expect(input.value).to.equal('1', 'increment input 1');
+    canvasElement.querySelector('[slice-value="//clickcount + 1"]').click();
+    await sleep(10);
+    canvasElement.querySelector('[slice-value="//clickcount + 1"]').click();
+    await sleep(10);
+    expect(code.textContent).to.equal('3', 'double increment to 3');
+    expect(input.value).to.equal('3', 'double increment input to 3');
+    canvasElement.querySelector('[slice-value="//clickcount - 1"]').click();
+    await sleep(10);
+    expect(code.textContent).to.equal('2', 'decrement to 2');
+    expect(input.value).to.equal('2', 'decrement input to 2');
+  }
+}`,...o.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'Realtime Slice data on event',
+    body: \`
+    <p>move the mouse over TEXTAREA and click to see slice and slice event changed</p>
+    <custom-element>
+        <template>
+            <textarea   slice="s" slice-value="concat('x:', //@pageX)" slice-event="mousemove click"
+                        style="width:16rem;height:16rem;box-shadow: inset {//@offsetX}px {//@offsetY}px gold;"></textarea><br/>
+            //slice/s                   : <code data-testid="//slice/s"                 >{ //slice/s                }</code>  <br/>
+            //slice/s/event/@offsetY    : <code data-testid="//slice/s/event/@offsetY"  >{ //slice/s/event/@offsetY }</code>  <br/>
+            event type                  : <code data-testid="//slice/s/event/@type"     >{ //slice/s/event/@type    }</code>
+        </template>
+    </custom-element>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const titleText = (RealtimeEventInSlice.args!.title as string);
+    const canvas = within(canvasElement);
+    await canvas.findByText(titleText);
+    const sliceText = () => canvas.getByTestId('//slice/s').textContent,
+      offsetY = () => canvas.getByTestId('//slice/s/event/@offsetY').textContent,
+      eventType = () => canvas.getByTestId('//slice/s/event/@type').textContent;
+    const input = await canvasElement.querySelector('textarea');
+    // expect(input).toBeInTheDocument();
+    expect(sliceText()).to.equal('', 'initial slot value blank');
+    expect(offsetY()).to.equal('', 'initial slot offsetY blank');
+    expect(eventType()).to.equal('', 'initial slot event blank');
+    const emitXy = (x, y, eventName) => {
+      const ev = new MouseEvent(eventName, {
+        screenX: x,
+        screenY: y,
+        clientX: x,
+        clientY: y,
+        offsetX: x,
+        offsetY: y
+      });
+      input.dispatchEvent(ev);
+    };
+    emitXy(20, 20, 'click');
+    await sleep(10);
+    expect(sliceText()).to.equal('x:20', 'click slot value 20');
+    expect(Number(offsetY())).to.be.lessThan(0, 'offsetY click');
+    expect(eventType()).to.equal('click', 'click event type');
+  }
+}`,...l.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'slice-event="change submit change submit" ',
+    body: \`
+    <p> double same event should be treated as one.</p>
+    <custom-element>
+        <template>
+            <form slice-event="submit submit change change" slice="form-1">
+                <input slice-event="change change" required slice="field-1" data-testid="f1" name="f1"/>
+                <input name="f2" value="populated in form-data"/>
+                <button>next</button> <code>slices count {count(/datadom/slice/*)}</code>
+            </form>
+        </template>
+    </custom-element>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    const input = await canvas.findByTestId('f1');
+    input.focus();
+    await userEvent.type(input, 'AB');
+    canvas.getByRole('button').focus();
+    await userEvent.clear(input);
+    await userEvent.click(canvas.getByRole('button'));
+    expect(await canvas.findByText('slices count 2')).toBeInTheDocument();
+  }
+}`,...p.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'slice="/datadom/attributes/emotion | s1" ',
+    body: \`
+    <p> double same event should be treated as one.</p>
+    <custom-element>
+        <template>
+            <input  slice="s1|s2" 
+                    slice-event="input"
+                    data-testid="f1"
+                    /><br/>
+            Type to update s1 and s2 slices <br/>
+            slice <code>s1: {//slice/s1}</code><br/>
+            slice <code>s2: {//slice/s2}</code><br/>
+        </template>
+    </custom-element>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    const input = await canvas.findByTestId('f1');
+    input.focus();
+    await userEvent.type(input, 'AB');
+    await expect(await canvas.findByText('s1: AB')).toBeInTheDocument();
+    await expect(await canvas.findByText('s2: AB')).toBeInTheDocument();
+  }
+}`,...r.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'slice="/datadom/attributes/emotion | s1" ',
+    body: \`
+    <p> double same event should be treated as one.</p>
+    <custom-element>
+        <template>
+            <attribute name="emotion">😃</attribute>
+            <input  slice-event="input" slice="/datadom/attributes/emotion | s1" data-testid="f1"/>
+            <p>Type to update </p>
+            <p>emotion attribute: {emotion}</p>
+            <p>slice: {//slice/s1}</p>
+        </template>
+    </custom-element>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    const input = await canvas.findByTestId('f1');
+    input.focus();
+    await userEvent.type(input, 'AB');
+    await expect(await canvas.findByText('emotion attribute: AB')).toBeInTheDocument();
+  }
+}`,...m.parameters?.docs?.source}}};const q=["SliceInitChangeEvent","RealtimeEventInSlice","DoubleEventInSlice","MultipleSlices","SlicesInAttrAndName"];export{p as DoubleEventInSlice,r as MultipleSlices,l as RealtimeEventInSlice,o as SliceInitChangeEvent,m as SlicesInAttrAndName,q as __namedExportsOrder,B as default};

package/storybook-static/assets/slots.test.stories-B1vqfHmN.js

@@ -0,0 +1,214 @@
+import{w as o,e as l}from"./custom-element-BV8-hRQS.js";import"./index-CVRyq5ci.js";function y(t){const{title:a,tag:n,attributes:e,slot:s,payload:g}=t;return`
+        <fieldset>
+            <legend>${a}</legend>
+            <custom-element
+                tag="${n}"
+                hidden
+                >
+                ${s}
+            </custom-element>
+            <${n} ${e}>${g}</${n}>
+        </fieldset>
+  `}const h={title:"slots",render:y},i={args:{title:"custom-element",tag:"my-component",slot:"Hello World",payload:"🍋"},play:async({canvasElement:t})=>{const a=i.args.title;await o(t).findByText(a);const e=t;l(e.querySelectorAll("my-component").length).to.equal(1),l(e.querySelector("my-component").innerHTML).to.include("Hello World")}},r={args:{title:"named slot",tag:"dce-1-slot",slot:'<slot name="slot1"> 🥦</slot>',payload:'<i slot="slot1">🥕</i>'},play:async({canvasElement:t})=>{const a=r.args.title;await o(t).findByText(a);const e=t;l(e.querySelectorAll("dce-1-slot").length).to.equal(1),l(e.querySelector("dce-1-slot").innerText).to.equal("🥕")}},c={args:{title:"same slot can be used multiple times in template",tag:"dce-2-slots",slot:'<slot name="slot2"> 😃</slot> and again: <slot name="slot2"> 😃</slot>',payload:'<i slot="slot2">🥕</i>'},play:async({canvasElement:t})=>{const a=c.args.title;await o(t).findByText(a);const e=t;l(e.querySelectorAll("dce-2-slots").length).to.equal(1),l(e.querySelector("dce-2-slots").innerText).to.equal("🥕 and again: 🥕")}},d={args:{title:"named and un-named default slot",tag:"dce-4-slot",slot:`#1 <slot name=""> 😃</slot> <br/>
+                #2 <slot> 😃</slot>`,payload:'<i slot="">🥕</i>'},play:async({canvasElement:t})=>{const a=d.args.title;await o(t).findByText(a);const e=t;l(e.querySelectorAll("dce-4-slot").length).to.equal(1),l(e.querySelector("dce-4-slot").innerText).to.include("#1 🥕"),l(e.querySelector("dce-4-slot").innerText).to.include("#2 🥕")}},u={args:{title:"two named default slot",tag:"dce-3-slot",slot:`#1 <slot name=""> 😃</slot> <br/>
+                #2 <slot name=""> 😃</slot>`,payload:'<i slot="">🥕</i>'},play:async({canvasElement:t})=>{const a=u.args.title;await o(t).findByText(a);const e=t;l(e.querySelectorAll("dce-3-slot").length).to.equal(1),l(e.querySelector("dce-3-slot").innerText).to.include("#1 🥕"),l(e.querySelector("dce-3-slot").innerText).to.include("#2 🥕")}},m={args:{title:"default slot",tag:"greet-element",slot:"<slot> Hello </slot> World!",payload:"👋"},play:async({canvasElement:t})=>{const a=m.args.title;await o(t).findByText(a);const e=t;l(e.querySelectorAll("greet-element").length).to.equal(1),l(e.querySelector("greet-element").innerText).to.include("👋 World!")}},p={args:{title:"💪 DCE template",tag:"pokemon-tile",attributes:' title="bulbasaur" data-smile="👼" pokemon-id="1" ',slot:`
+<template>
+    <h3><value-of select="title"></value-of></h3> <!-- title is an attribute in instance
+                                                 mapped into /*/attributes/title -->
+    <if test="//smile">                 <!-- data-smile DCE instance attribute,
+                                                 mapped into /*/dataset/smile
+                                                 used in condition -->
+                                            <!-- data-smile DCE instance attribute, used as HTML -->
+        <div>Smile as: <value-of select="//smile"></value-of></div>
+    </if>
+    <!-- image would not be visible in sandbox, see live demo -->
+    <img src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg" alt="{title} image">
+                                            <!-- image-src and title are DCE instance attributes,
+                                                 mapped into /*/attributes/
+                                                 used within output attribute via curly brackets -->
+
+                                            <!-- \`slot name=xxx\` replaced with elements with \`slot=xxx\` attribute -->
+    <p><slot name="description"><i>description is not available</i></slot></p>
+    <for-each select="//*[@pokemon-id]">
+                                            <!-- loop over payload elements with \`pokemon-id\` attribute -->
+        <button>
+            <img height="32"
+                src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
+                alt="{text()}"/>
+            <br/>
+            <value-of select='text()'/>
+        </button>
+
+    </for-each>
+</template>
+`,payload:`<p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
+                the seed grows in size as the Pokémon  does.</p>
+            <ul>
+                <li pokemon-id="2">ivysaur</li>
+                <li pokemon-id="3">venusaur</li>
+            </ul>
+`},play:async({canvasElement:t})=>{const a=p.args.title;await o(t).findByText(a);const e=t;l(e.querySelectorAll("pokemon-tile").length).to.equal(1);const s=e.querySelector("pokemon-tile");l(s.querySelector("img").src).to.equal("https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/1.svg"),l(s.querySelector("h3").innerText).to.equal("bulbasaur"),l(s.innerText).to.include("Smile as: 👼"),l(s.querySelector('[slot="description"]').innerText).to.include("Bulbasaur is a cute Pokémon")}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'custom-element',
+    tag: 'my-component',
+    slot: \`Hello World\`,
+    payload: \`🍋\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const titleText = (Regular.args!.title as string);
+    const canvas = within(canvasElement);
+    await canvas.findByText(titleText);
+    const el = canvasElement;
+    expect(el.querySelectorAll('my-component').length).to.equal(1);
+    expect(el.querySelector('my-component').innerHTML).to.include(\`Hello World\`);
+  }
+}`,...i.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'named slot',
+    tag: 'dce-1-slot',
+    slot: \`<slot name="slot1"> 🥦</slot>\`,
+    payload: \`<i slot="slot1">🥕</i>\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const titleText = (NamedSlot.args!.title as string);
+    const canvas = within(canvasElement);
+    await canvas.findByText(titleText);
+    const el = canvasElement;
+    expect(el.querySelectorAll('dce-1-slot').length).to.equal(1);
+    expect(el.querySelector('dce-1-slot').innerText).to.equal(\`🥕\`);
+  }
+}`,...r.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'same slot can be used multiple times in template',
+    tag: 'dce-2-slots',
+    slot: \`<slot name="slot2"> 😃</slot> and again: <slot name="slot2"> 😃</slot>\`,
+    payload: \`<i slot="slot2">🥕</i>\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const titleText = (DoubleSlot.args!.title as string);
+    const canvas = within(canvasElement);
+    await canvas.findByText(titleText);
+    const el = canvasElement;
+    expect(el.querySelectorAll('dce-2-slots').length).to.equal(1);
+    expect(el.querySelector('dce-2-slots').innerText).to.equal(\`🥕 and again: 🥕\`);
+  }
+}`,...c.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'named and un-named default slot',
+    tag: 'dce-4-slot',
+    slot: \`#1 <slot name=""> 😃</slot> <br/>
+                #2 <slot> 😃</slot>\`,
+    payload: \`<i slot="">🥕</i>\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const titleText = (NamedUnnamedDefaultSlot.args!.title as string);
+    const canvas = within(canvasElement);
+    await canvas.findByText(titleText);
+    const el = canvasElement;
+    expect(el.querySelectorAll('dce-4-slot').length).to.equal(1);
+    expect(el.querySelector('dce-4-slot').innerText).to.include(\`#1 🥕\`);
+    expect(el.querySelector('dce-4-slot').innerText).to.include(\`#2 🥕\`);
+  }
+}`,...d.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'two named default slot',
+    tag: 'dce-3-slot',
+    slot: \`#1 <slot name=""> 😃</slot> <br/>
+                #2 <slot name=""> 😃</slot>\`,
+    payload: \`<i slot="">🥕</i>\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const titleText = (NamedDefaultSlot.args!.title as string);
+    const canvas = within(canvasElement);
+    await canvas.findByText(titleText);
+    const el = canvasElement;
+    expect(el.querySelectorAll('dce-3-slot').length).to.equal(1);
+    expect(el.querySelector('dce-3-slot').innerText).to.include(\`#1 🥕\`);
+    expect(el.querySelector('dce-3-slot').innerText).to.include(\`#2 🥕\`);
+  }
+}`,...u.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'default slot',
+    tag: 'greet-element',
+    slot: \`<slot> Hello </slot> World!\`,
+    payload: \`👋\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const titleText = (DefaultSlot.args!.title as string);
+    const canvas = within(canvasElement);
+    await canvas.findByText(titleText);
+    const el = canvasElement;
+    expect(el.querySelectorAll('greet-element').length).to.equal(1);
+    expect(el.querySelector('greet-element').innerText).to.include(\`👋 World!\`);
+  }
+}`,...m.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: '💪 DCE template',
+    tag: 'pokemon-tile',
+    attributes: \` title="bulbasaur" data-smile="👼" pokemon-id="1" \`,
+    slot: \`
+<template>
+    <h3><value-of select="title"></value-of></h3> <!-- title is an attribute in instance
+                                                 mapped into /*/attributes/title -->
+    <if test="//smile">                 <!-- data-smile DCE instance attribute,
+                                                 mapped into /*/dataset/smile
+                                                 used in condition -->
+                                            <!-- data-smile DCE instance attribute, used as HTML -->
+        <div>Smile as: <value-of select="//smile"></value-of></div>
+    </if>
+    <!-- image would not be visible in sandbox, see live demo -->
+    <img src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg" alt="{title} image">
+                                            <!-- image-src and title are DCE instance attributes,
+                                                 mapped into /*/attributes/
+                                                 used within output attribute via curly brackets -->
+
+                                            <!-- \\\`slot name=xxx\\\` replaced with elements with \\\`slot=xxx\\\` attribute -->
+    <p><slot name="description"><i>description is not available</i></slot></p>
+    <for-each select="//*[@pokemon-id]">
+                                            <!-- loop over payload elements with \\\`pokemon-id\\\` attribute -->
+        <button>
+            <img height="32"
+                src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
+                alt="{text()}"/>
+            <br/>
+            <value-of select='text()'/>
+        </button>
+
+    </for-each>
+</template>
+\`,
+    payload: \`<p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
+                the seed grows in size as the Pokémon  does.</p>
+            <ul>
+                <li pokemon-id="2">ivysaur</li>
+                <li pokemon-id="3">venusaur</li>
+            </ul>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const titleText = (TemplateWithAttributesAndCondition.args!.title as string);
+    const canvas = within(canvasElement);
+    await canvas.findByText(titleText);
+    const el = canvasElement;
+    expect(el.querySelectorAll('pokemon-tile').length).to.equal(1);
+    const p = el.querySelector('pokemon-tile');
+    expect(p.querySelector('img').src).to.equal('https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/1.svg');
+    expect(p.querySelector('h3').innerText).to.equal('bulbasaur');
+    expect(p.innerText).to.include('Smile as: 👼');
+    expect(p.querySelector('[slot="description"]').innerText).to.include('Bulbasaur is a cute Pokémon');
+  }
+}`,...p.parameters?.docs?.source}}};const b=["Regular","NamedSlot","DoubleSlot","NamedUnnamedDefaultSlot","NamedDefaultSlot","DefaultSlot","TemplateWithAttributesAndCondition"];export{m as DefaultSlot,c as DoubleSlot,u as NamedDefaultSlot,r as NamedSlot,d as NamedUnnamedDefaultSlot,i as Regular,p as TemplateWithAttributesAndCondition,b as __namedExportsOrder,h as default};

package/storybook-static/assets/syntaxhighlighter-BP7B2CQK-BWFH_0wQ.js

@@ -0,0 +1 @@
+import{S as s,c as m,s as g,a as n}from"./index-CEZitmnt.js";import"./iframe-CM82WlGY.js";import"../sb-preview/runtime.js";import"./index-Cc7K62zD.js";import"./index-DXimoRZY.js";import"./index-DrFu-skq.js";export{s as SyntaxHighlighter,m as createCopyToClipboardFunction,g as default,n as supportedLanguages};