\"\n }), \" component anywhere in your app, such as App.tsx\"];\n }\n }), \"\\n\", createComponent(_components.figure, {\n \"data-rehype-pretty-code-figure\": \"\",\n get children() {\n return createComponent(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"tsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"tsx\",\n \"data-theme\": \"github-light\",\n style: {\n display: \"grid\"\n },\n get children() {\n return [createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return createComponent(_components.span, {\n style: {\n color: \"#6A737D\"\n },\n children: \"// @refresh reload\"\n });\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"import\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" { Suspense } \"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"from\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \" 'solid-js'\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"import\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" { Toaster } \"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"from\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \" 'solid-sonner-toast'\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n children: \" \"\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"import\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" { Router } \"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"from\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \" '@solidjs/router'\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"import\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" { FileRoutes } \"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"from\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \" '@solidjs/start'\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n children: \" \"\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"import\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \" './app.css'\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"import\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" BaseLayout \"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"from\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \" './components/base-layout'\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n children: \" \"\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"export\"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \" default\"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \" function\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \" App\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"() {\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \" return\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" (\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" \x3C\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \"Router\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \" root\"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"=\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"{(\"\n }), createComponent(_components.span, {\n style: {\n color: \"#E36209\"\n },\n children: \"props\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \") \"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"=>\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" (\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" \x3C\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \"BaseLayout\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \">\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" \x3C\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \"Suspense\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \">{props.children}\x3C/\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \"Suspense\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \">\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" \x3C/\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \"BaseLayout\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \">\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" )}\"\n });\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" >\"\n });\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" \x3C\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \"Toaster\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" />\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" \x3C\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \"FileRoutes\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" />\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" \x3C/\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \"Router\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \">\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" )\"\n });\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"}\"\n });\n }\n })];\n }\n });\n }\n });\n }\n }), \"\\n\", createComponent(_components.h2, {\n id: \"render-a-toast\",\n children: \"Render a toast\"\n }), \"\\n\", createComponent(_components.p, {\n get children() {\n return [\"Use \", createComponent(_components.code, {\n children: \"toast()\"\n }), \" to render a toast\"];\n }\n }), \"\\n\", createComponent(_components.figure, {\n \"data-rehype-pretty-code-figure\": \"\",\n get children() {\n return createComponent(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"tsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"tsx\",\n \"data-theme\": \"github-light\",\n style: {\n display: \"grid\"\n },\n get children() {\n return [createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"import\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" { toast } \"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"from\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \" 'solid-sonner-toast'\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n children: \" \"\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"const\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \" Button\"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \" =\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" () \"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"=>\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" {\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \" return\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" \x3C\"\n }), createComponent(_components.span, {\n style: {\n color: \"#22863A\"\n },\n children: \"button\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \" onClick\"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"=\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"{() \"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"=>\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \" toast\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"(\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'Hello world'\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \")}>Hello world\x3C/\"\n }), createComponent(_components.span, {\n style: {\n color: \"#22863A\"\n },\n children: \"button\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \">\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"}\"\n });\n }\n })];\n }\n });\n }\n });\n }\n })];\n }\n function MDXContent(props = {}) {\n const {\n wrapper: MDXLayout\n } = props.components || {};\n return MDXLayout ? createComponent(MDXLayout, mergeProps(props, {\n get children() {\n return createComponent(_createMdxContent, props);\n }\n })) : _createMdxContent(props);\n }\n\n exports.default = MDXContent;\n exports.frontmatter = frontmatter;\n\n Object.defineProperty(exports, '__esModule', { value: true });\n\n return exports;\n\n})({});\n; return Component",default:$R[4]={code:"var Component = (function (exports) {\n 'use strict';\n\n const equalFn = (a, b) => a === b;\n const $PROXY = Symbol(\"solid-proxy\");\n const $TRACK = Symbol(\"solid-track\");\n const signalOptions = {\n equals: equalFn\n };\n let runEffects = runQueue;\n const STALE = 1;\n const PENDING = 2;\n const UNOWNED = {\n owned: null,\n cleanups: null,\n context: null,\n owner: null\n };\n var Owner = null;\n let Transition = null;\n let ExternalSourceConfig = null;\n let Listener = null;\n let Updates = null;\n let Effects = null;\n let ExecCount = 0;\n function createRoot(fn, detachedOwner) {\n const listener = Listener,\n owner = Owner,\n unowned = fn.length === 0,\n current = detachedOwner === undefined ? owner : detachedOwner,\n root = unowned ? UNOWNED : {\n owned: null,\n cleanups: null,\n context: current ? current.context : null,\n owner: current\n },\n updateFn = unowned ? fn : () => fn(() => untrack(() => cleanNode(root)));\n Owner = root;\n Listener = null;\n try {\n return runUpdates(updateFn, true);\n } finally {\n Listener = listener;\n Owner = owner;\n }\n }\n function createSignal(value, options) {\n options = options ? Object.assign({}, signalOptions, options) : signalOptions;\n const s = {\n value,\n observers: null,\n observerSlots: null,\n comparator: options.equals || undefined\n };\n const setter = value => {\n if (typeof value === \"function\") {\n value = value(s.value);\n }\n return writeSignal(s, value);\n };\n return [readSignal.bind(s), setter];\n }\n function createRenderEffect(fn, value, options) {\n const c = createComputation(fn, value, false, STALE);\n updateComputation(c);\n }\n function createMemo(fn, value, options) {\n options = options ? Object.assign({}, signalOptions, options) : signalOptions;\n const c = createComputation(fn, value, true, 0);\n c.observers = null;\n c.observerSlots = null;\n c.comparator = options.equals || undefined;\n updateComputation(c);\n return readSignal.bind(c);\n }\n function untrack(fn) {\n if (Listener === null) return fn();\n const listener = Listener;\n Listener = null;\n try {\n if (ExternalSourceConfig) ;\n return fn();\n } finally {\n Listener = listener;\n }\n }\n function onCleanup(fn) {\n if (Owner === null) ;else if (Owner.cleanups === null) Owner.cleanups = [fn];else Owner.cleanups.push(fn);\n return fn;\n }\n function createContext(defaultValue, options) {\n const id = Symbol(\"context\");\n return {\n id,\n Provider: createProvider(id),\n defaultValue\n };\n }\n function useContext(context) {\n return Owner && Owner.context && Owner.context[context.id] !== undefined ? Owner.context[context.id] : context.defaultValue;\n }\n function children(fn) {\n const children = createMemo(fn);\n const memo = createMemo(() => resolveChildren(children()));\n memo.toArray = () => {\n const c = memo();\n return Array.isArray(c) ? c : c != null ? [c] : [];\n };\n return memo;\n }\n function readSignal() {\n if (this.sources && (this.state)) {\n if ((this.state) === STALE) updateComputation(this);else {\n const updates = Updates;\n Updates = null;\n runUpdates(() => lookUpstream(this), false);\n Updates = updates;\n }\n }\n if (Listener) {\n const sSlot = this.observers ? this.observers.length : 0;\n if (!Listener.sources) {\n Listener.sources = [this];\n Listener.sourceSlots = [sSlot];\n } else {\n Listener.sources.push(this);\n Listener.sourceSlots.push(sSlot);\n }\n if (!this.observers) {\n this.observers = [Listener];\n this.observerSlots = [Listener.sources.length - 1];\n } else {\n this.observers.push(Listener);\n this.observerSlots.push(Listener.sources.length - 1);\n }\n }\n return this.value;\n }\n function writeSignal(node, value, isComp) {\n let current = node.value;\n if (!node.comparator || !node.comparator(current, value)) {\n node.value = value;\n if (node.observers && node.observers.length) {\n runUpdates(() => {\n for (let i = 0; i \x3C node.observers.length; i += 1) {\n const o = node.observers[i];\n const TransitionRunning = Transition && Transition.running;\n if (TransitionRunning && Transition.disposed.has(o)) ;\n if (TransitionRunning ? !o.tState : !o.state) {\n if (o.pure) Updates.push(o);else Effects.push(o);\n if (o.observers) markDownstream(o);\n }\n if (!TransitionRunning) o.state = STALE;\n }\n if (Updates.length > 10e5) {\n Updates = [];\n if (false) ;\n throw new Error();\n }\n }, false);\n }\n }\n return value;\n }\n function updateComputation(node) {\n if (!node.fn) return;\n cleanNode(node);\n const time = ExecCount;\n runComputation(node, node.value, time);\n }\n function runComputation(node, value, time) {\n let nextValue;\n const owner = Owner,\n listener = Listener;\n Listener = Owner = node;\n try {\n nextValue = node.fn(value);\n } catch (err) {\n if (node.pure) {\n {\n node.state = STALE;\n node.owned && node.owned.forEach(cleanNode);\n node.owned = null;\n }\n }\n node.updatedAt = time + 1;\n return handleError(err);\n } finally {\n Listener = listener;\n Owner = owner;\n }\n if (!node.updatedAt || node.updatedAt \x3C= time) {\n if (node.updatedAt != null && \"observers\" in node) {\n writeSignal(node, nextValue);\n } else node.value = nextValue;\n node.updatedAt = time;\n }\n }\n function createComputation(fn, init, pure, state = STALE, options) {\n const c = {\n fn,\n state: state,\n updatedAt: null,\n owned: null,\n sources: null,\n sourceSlots: null,\n cleanups: null,\n value: init,\n owner: Owner,\n context: Owner ? Owner.context : null,\n pure\n };\n if (Owner === null) ;else if (Owner !== UNOWNED) {\n {\n if (!Owner.owned) Owner.owned = [c];else Owner.owned.push(c);\n }\n }\n return c;\n }\n function runTop(node) {\n if ((node.state) === 0) return;\n if ((node.state) === PENDING) return lookUpstream(node);\n if (node.suspense && untrack(node.suspense.inFallback)) return node.suspense.effects.push(node);\n const ancestors = [node];\n while ((node = node.owner) && (!node.updatedAt || node.updatedAt \x3C ExecCount)) {\n if (node.state) ancestors.push(node);\n }\n for (let i = ancestors.length - 1; i >= 0; i--) {\n node = ancestors[i];\n if ((node.state) === STALE) {\n updateComputation(node);\n } else if ((node.state) === PENDING) {\n const updates = Updates;\n Updates = null;\n runUpdates(() => lookUpstream(node, ancestors[0]), false);\n Updates = updates;\n }\n }\n }\n function runUpdates(fn, init) {\n if (Updates) return fn();\n let wait = false;\n if (!init) Updates = [];\n if (Effects) wait = true;else Effects = [];\n ExecCount++;\n try {\n const res = fn();\n completeUpdates(wait);\n return res;\n } catch (err) {\n if (!wait) Effects = null;\n Updates = null;\n handleError(err);\n }\n }\n function completeUpdates(wait) {\n if (Updates) {\n runQueue(Updates);\n Updates = null;\n }\n if (wait) return;\n const e = Effects;\n Effects = null;\n if (e.length) runUpdates(() => runEffects(e), false);\n }\n function runQueue(queue) {\n for (let i = 0; i \x3C queue.length; i++) runTop(queue[i]);\n }\n function lookUpstream(node, ignore) {\n node.state = 0;\n for (let i = 0; i \x3C node.sources.length; i += 1) {\n const source = node.sources[i];\n if (source.sources) {\n const state = source.state;\n if (state === STALE) {\n if (source !== ignore && (!source.updatedAt || source.updatedAt \x3C ExecCount)) runTop(source);\n } else if (state === PENDING) lookUpstream(source, ignore);\n }\n }\n }\n function markDownstream(node) {\n for (let i = 0; i \x3C node.observers.length; i += 1) {\n const o = node.observers[i];\n if (!o.state) {\n o.state = PENDING;\n if (o.pure) Updates.push(o);else Effects.push(o);\n o.observers && markDownstream(o);\n }\n }\n }\n function cleanNode(node) {\n let i;\n if (node.sources) {\n while (node.sources.length) {\n const source = node.sources.pop(),\n index = node.sourceSlots.pop(),\n obs = source.observers;\n if (obs && obs.length) {\n const n = obs.pop(),\n s = source.observerSlots.pop();\n if (index \x3C obs.length) {\n n.sourceSlots[s] = index;\n obs[index] = n;\n source.observerSlots[index] = s;\n }\n }\n }\n }\n if (node.owned) {\n for (i = node.owned.length - 1; i >= 0; i--) cleanNode(node.owned[i]);\n node.owned = null;\n }\n if (node.cleanups) {\n for (i = node.cleanups.length - 1; i >= 0; i--) node.cleanups[i]();\n node.cleanups = null;\n }\n node.state = 0;\n }\n function castError(err) {\n if (err instanceof Error) return err;\n return new Error(typeof err === \"string\" ? err : \"Unknown error\", {\n cause: err\n });\n }\n function handleError(err, owner = Owner) {\n const error = castError(err);\n throw error;\n }\n function resolveChildren(children) {\n if (typeof children === \"function\" && !children.length) return resolveChildren(children());\n if (Array.isArray(children)) {\n const results = [];\n for (let i = 0; i \x3C children.length; i++) {\n const result = resolveChildren(children[i]);\n Array.isArray(result) ? results.push.apply(results, result) : results.push(result);\n }\n return results;\n }\n return children;\n }\n function createProvider(id, options) {\n return function provider(props) {\n let res;\n createRenderEffect(() => res = untrack(() => {\n Owner.context = {\n ...Owner.context,\n [id]: props.value\n };\n return children(() => props.children);\n }), undefined);\n return res;\n };\n }\n const FALLBACK = Symbol(\"fallback\");\n function dispose(d) {\n for (let i = 0; i \x3C d.length; i++) d[i]();\n }\n function mapArray(list, mapFn, options = {}) {\n let items = [],\n mapped = [],\n disposers = [],\n len = 0,\n indexes = mapFn.length > 1 ? [] : null;\n onCleanup(() => dispose(disposers));\n return () => {\n let newItems = list() || [],\n i,\n j;\n newItems[$TRACK];\n return untrack(() => {\n let newLen = newItems.length,\n newIndices,\n newIndicesNext,\n temp,\n tempdisposers,\n tempIndexes,\n start,\n end,\n newEnd,\n item;\n if (newLen === 0) {\n if (len !== 0) {\n dispose(disposers);\n disposers = [];\n items = [];\n mapped = [];\n len = 0;\n indexes && (indexes = []);\n }\n if (options.fallback) {\n items = [FALLBACK];\n mapped[0] = createRoot(disposer => {\n disposers[0] = disposer;\n return options.fallback();\n });\n len = 1;\n }\n } else if (len === 0) {\n mapped = new Array(newLen);\n for (j = 0; j \x3C newLen; j++) {\n items[j] = newItems[j];\n mapped[j] = createRoot(mapper);\n }\n len = newLen;\n } else {\n temp = new Array(newLen);\n tempdisposers = new Array(newLen);\n indexes && (tempIndexes = new Array(newLen));\n for (start = 0, end = Math.min(len, newLen); start \x3C end && items[start] === newItems[start]; start++);\n for (end = len - 1, newEnd = newLen - 1; end >= start && newEnd >= start && items[end] === newItems[newEnd]; end--, newEnd--) {\n temp[newEnd] = mapped[end];\n tempdisposers[newEnd] = disposers[end];\n indexes && (tempIndexes[newEnd] = indexes[end]);\n }\n newIndices = new Map();\n newIndicesNext = new Array(newEnd + 1);\n for (j = newEnd; j >= start; j--) {\n item = newItems[j];\n i = newIndices.get(item);\n newIndicesNext[j] = i === undefined ? -1 : i;\n newIndices.set(item, j);\n }\n for (i = start; i \x3C= end; i++) {\n item = items[i];\n j = newIndices.get(item);\n if (j !== undefined && j !== -1) {\n temp[j] = mapped[i];\n tempdisposers[j] = disposers[i];\n indexes && (tempIndexes[j] = indexes[i]);\n j = newIndicesNext[j];\n newIndices.set(item, j);\n } else disposers[i]();\n }\n for (j = start; j \x3C newLen; j++) {\n if (j in temp) {\n mapped[j] = temp[j];\n disposers[j] = tempdisposers[j];\n if (indexes) {\n indexes[j] = tempIndexes[j];\n indexes[j](j);\n }\n } else mapped[j] = createRoot(mapper);\n }\n mapped = mapped.slice(0, len = newLen);\n items = newItems.slice(0);\n }\n return mapped;\n });\n function mapper(disposer) {\n disposers[j] = disposer;\n if (indexes) {\n const [s, set] = createSignal(j);\n indexes[j] = set;\n return mapFn(newItems[j], s);\n }\n return mapFn(newItems[j]);\n }\n };\n }\n function createComponent(Comp, props) {\n return untrack(() => Comp(props || {}));\n }\n function trueFn() {\n return true;\n }\n const propTraps = {\n get(_, property, receiver) {\n if (property === $PROXY) return receiver;\n return _.get(property);\n },\n has(_, property) {\n if (property === $PROXY) return true;\n return _.has(property);\n },\n set: trueFn,\n deleteProperty: trueFn,\n getOwnPropertyDescriptor(_, property) {\n return {\n configurable: true,\n enumerable: true,\n get() {\n return _.get(property);\n },\n set: trueFn,\n deleteProperty: trueFn\n };\n },\n ownKeys(_) {\n return _.keys();\n }\n };\n function resolveSource(s) {\n return !(s = typeof s === \"function\" ? s() : s) ? {} : s;\n }\n function resolveSources() {\n for (let i = 0, length = this.length; i \x3C length; ++i) {\n const v = this[i]();\n if (v !== undefined) return v;\n }\n }\n function mergeProps(...sources) {\n let proxy = false;\n for (let i = 0; i \x3C sources.length; i++) {\n const s = sources[i];\n proxy = proxy || !!s && $PROXY in s;\n sources[i] = typeof s === \"function\" ? (proxy = true, createMemo(s)) : s;\n }\n if (proxy) {\n return new Proxy({\n get(property) {\n for (let i = sources.length - 1; i >= 0; i--) {\n const v = resolveSource(sources[i])[property];\n if (v !== undefined) return v;\n }\n },\n has(property) {\n for (let i = sources.length - 1; i >= 0; i--) {\n if (property in resolveSource(sources[i])) return true;\n }\n return false;\n },\n keys() {\n const keys = [];\n for (let i = 0; i \x3C sources.length; i++) keys.push(...Object.keys(resolveSource(sources[i])));\n return [...new Set(keys)];\n }\n }, propTraps);\n }\n const sourcesMap = {};\n const defined = Object.create(null);\n for (let i = sources.length - 1; i >= 0; i--) {\n const source = sources[i];\n if (!source) continue;\n const sourceKeys = Object.getOwnPropertyNames(source);\n for (let i = sourceKeys.length - 1; i >= 0; i--) {\n const key = sourceKeys[i];\n if (key === \"__proto__\" || key === \"constructor\") continue;\n const desc = Object.getOwnPropertyDescriptor(source, key);\n if (!defined[key]) {\n defined[key] = desc.get ? {\n enumerable: true,\n configurable: true,\n get: resolveSources.bind(sourcesMap[key] = [desc.get.bind(source)])\n } : desc.value !== undefined ? desc : undefined;\n } else {\n const sources = sourcesMap[key];\n if (sources) {\n if (desc.get) sources.push(desc.get.bind(source));else if (desc.value !== undefined) sources.push(() => desc.value);\n }\n }\n }\n }\n const target = {};\n const definedKeys = Object.keys(defined);\n for (let i = definedKeys.length - 1; i >= 0; i--) {\n const key = definedKeys[i],\n desc = defined[key];\n if (desc && desc.get) Object.defineProperty(target, key, desc);else target[key] = desc ? desc.value : undefined;\n }\n return target;\n }\n const narrowedError = name => `Stale read from \x3C${name}>.`;\n function For(props) {\n const fallback = \"fallback\" in props && {\n fallback: () => props.fallback\n };\n return createMemo(mapArray(() => props.each, props.children, fallback || undefined));\n }\n function Show(props) {\n const keyed = props.keyed;\n const condition = createMemo(() => props.when, undefined, {\n equals: (a, b) => keyed ? a === b : !a === !b\n });\n return createMemo(() => {\n const c = condition();\n if (c) {\n const child = props.children;\n const fn = typeof child === \"function\" && child.length > 0;\n return fn ? untrack(() => child(keyed ? c : () => {\n if (!untrack(condition)) throw narrowedError(\"Show\");\n return props.when;\n })) : child;\n }\n return props.fallback;\n }, undefined, undefined);\n }\n\n function reconcileArrays(parentNode, a, b) {\n let bLength = b.length,\n aEnd = a.length,\n bEnd = bLength,\n aStart = 0,\n bStart = 0,\n after = a[aEnd - 1].nextSibling,\n map = null;\n while (aStart \x3C aEnd || bStart \x3C bEnd) {\n if (a[aStart] === b[bStart]) {\n aStart++;\n bStart++;\n continue;\n }\n while (a[aEnd - 1] === b[bEnd - 1]) {\n aEnd--;\n bEnd--;\n }\n if (aEnd === aStart) {\n const node = bEnd \x3C bLength ? bStart ? b[bStart - 1].nextSibling : b[bEnd - bStart] : after;\n while (bStart \x3C bEnd) parentNode.insertBefore(b[bStart++], node);\n } else if (bEnd === bStart) {\n while (aStart \x3C aEnd) {\n if (!map || !map.has(a[aStart])) a[aStart].remove();\n aStart++;\n }\n } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {\n const node = a[--aEnd].nextSibling;\n parentNode.insertBefore(b[bStart++], a[aStart++].nextSibling);\n parentNode.insertBefore(b[--bEnd], node);\n a[aEnd] = b[bEnd];\n } else {\n if (!map) {\n map = new Map();\n let i = bStart;\n while (i \x3C bEnd) map.set(b[i], i++);\n }\n const index = map.get(a[aStart]);\n if (index != null) {\n if (bStart \x3C index && index \x3C bEnd) {\n let i = aStart,\n sequence = 1,\n t;\n while (++i \x3C aEnd && i \x3C bEnd) {\n if ((t = map.get(a[i])) == null || t !== index + sequence) break;\n sequence++;\n }\n if (sequence > index - bStart) {\n const node = a[aStart];\n while (bStart \x3C index) parentNode.insertBefore(b[bStart++], node);\n } else parentNode.replaceChild(b[bStart++], a[aStart++]);\n } else aStart++;\n } else a[aStart++].remove();\n }\n }\n }\n const $$EVENTS = \"_$DX_DELEGATE\";\n function template(html, isCE, isSVG) {\n let node;\n const create = () => {\n const t = document.createElement(\"template\");\n t.innerHTML = html;\n return isSVG ? t.content.firstChild.firstChild : t.content.firstChild;\n };\n const fn = isCE ? () => untrack(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);\n fn.cloneNode = fn;\n return fn;\n }\n function delegateEvents(eventNames, document = window.document) {\n const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());\n for (let i = 0, l = eventNames.length; i \x3C l; i++) {\n const name = eventNames[i];\n if (!e.has(name)) {\n e.add(name);\n document.addEventListener(name, eventHandler);\n }\n }\n }\n function classList(node, value, prev = {}) {\n const classKeys = Object.keys(value || {}),\n prevKeys = Object.keys(prev);\n let i, len;\n for (i = 0, len = prevKeys.length; i \x3C len; i++) {\n const key = prevKeys[i];\n if (!key || key === \"undefined\" || value[key]) continue;\n toggleClassKey(node, key, false);\n delete prev[key];\n }\n for (i = 0, len = classKeys.length; i \x3C len; i++) {\n const key = classKeys[i],\n classValue = !!value[key];\n if (!key || key === \"undefined\" || prev[key] === classValue || !classValue) continue;\n toggleClassKey(node, key, true);\n prev[key] = classValue;\n }\n return prev;\n }\n function insert(parent, accessor, marker, initial) {\n if (marker !== undefined && !initial) initial = [];\n if (typeof accessor !== \"function\") return insertExpression(parent, accessor, initial, marker);\n createRenderEffect(current => insertExpression(parent, accessor(), current, marker), initial);\n }\n function toggleClassKey(node, key, value) {\n const classNames = key.trim().split(/\\s+/);\n for (let i = 0, nameLen = classNames.length; i \x3C nameLen; i++) node.classList.toggle(classNames[i], value);\n }\n function eventHandler(e) {\n const key = `$$${e.type}`;\n let node = e.composedPath && e.composedPath()[0] || e.target;\n if (e.target !== node) {\n Object.defineProperty(e, \"target\", {\n configurable: true,\n value: node\n });\n }\n Object.defineProperty(e, \"currentTarget\", {\n configurable: true,\n get() {\n return node || document;\n }\n });\n while (node) {\n const handler = node[key];\n if (handler && !node.disabled) {\n const data = node[`${key}Data`];\n data !== undefined ? handler.call(node, data, e) : handler.call(node, e);\n if (e.cancelBubble) return;\n }\n node = node._$host || node.parentNode || node.host;\n }\n }\n function insertExpression(parent, value, current, marker, unwrapArray) {\n while (typeof current === \"function\") current = current();\n if (value === current) return current;\n const t = typeof value,\n multi = marker !== undefined;\n parent = multi && current[0] && current[0].parentNode || parent;\n if (t === \"string\" || t === \"number\") {\n if (t === \"number\") value = value.toString();\n if (multi) {\n let node = current[0];\n if (node && node.nodeType === 3) {\n node.data !== value && (node.data = value);\n } else node = document.createTextNode(value);\n current = cleanChildren(parent, current, marker, node);\n } else {\n if (current !== \"\" && typeof current === \"string\") {\n current = parent.firstChild.data = value;\n } else current = parent.textContent = value;\n }\n } else if (value == null || t === \"boolean\") {\n current = cleanChildren(parent, current, marker);\n } else if (t === \"function\") {\n createRenderEffect(() => {\n let v = value();\n while (typeof v === \"function\") v = v();\n current = insertExpression(parent, v, current, marker);\n });\n return () => current;\n } else if (Array.isArray(value)) {\n const array = [];\n const currentArray = current && Array.isArray(current);\n if (normalizeIncomingArray(array, value, current, unwrapArray)) {\n createRenderEffect(() => current = insertExpression(parent, array, current, marker, true));\n return () => current;\n }\n if (array.length === 0) {\n current = cleanChildren(parent, current, marker);\n if (multi) return current;\n } else if (currentArray) {\n if (current.length === 0) {\n appendNodes(parent, array, marker);\n } else reconcileArrays(parent, current, array);\n } else {\n current && cleanChildren(parent);\n appendNodes(parent, array);\n }\n current = array;\n } else if (value.nodeType) {\n if (Array.isArray(current)) {\n if (multi) return current = cleanChildren(parent, current, marker, value);\n cleanChildren(parent, current, null, value);\n } else if (current == null || current === \"\" || !parent.firstChild) {\n parent.appendChild(value);\n } else parent.replaceChild(value, parent.firstChild);\n current = value;\n } else ;\n return current;\n }\n function normalizeIncomingArray(normalized, array, current, unwrap) {\n let dynamic = false;\n for (let i = 0, len = array.length; i \x3C len; i++) {\n let item = array[i],\n prev = current && current[i],\n t;\n if (item == null || item === true || item === false) ;else if ((t = typeof item) === \"object\" && item.nodeType) {\n normalized.push(item);\n } else if (Array.isArray(item)) {\n dynamic = normalizeIncomingArray(normalized, item, prev) || dynamic;\n } else if (t === \"function\") {\n if (unwrap) {\n while (typeof item === \"function\") item = item();\n dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item], Array.isArray(prev) ? prev : [prev]) || dynamic;\n } else {\n normalized.push(item);\n dynamic = true;\n }\n } else {\n const value = String(item);\n if (prev && prev.nodeType === 3 && prev.data === value) normalized.push(prev);else normalized.push(document.createTextNode(value));\n }\n }\n return dynamic;\n }\n function appendNodes(parent, array, marker = null) {\n for (let i = 0, len = array.length; i \x3C len; i++) parent.insertBefore(array[i], marker);\n }\n function cleanChildren(parent, current, marker, replacement) {\n if (marker === undefined) return parent.textContent = \"\";\n const node = replacement || document.createTextNode(\"\");\n if (current.length) {\n let inserted = false;\n for (let i = current.length - 1; i >= 0; i--) {\n const el = current[i];\n if (node !== el) {\n const isParent = el.parentNode === parent;\n if (!inserted && !i) isParent ? parent.replaceChild(node, el) : parent.insertBefore(node, marker);else isParent && el.remove();\n } else inserted = true;\n }\n } else parent.insertBefore(node, marker);\n return [node];\n }\n\n var _tmpl$ = /*#__PURE__*/template(`\x3Cdiv class=\"mt-4 flex w-max min-w-full border-b border-gray-200 pb-px dark:border-neutral-800\">`),\n _tmpl$2 = /*#__PURE__*/template(`\x3Cdiv>`),\n _tmpl$3 = /*#__PURE__*/template(`\x3Cbutton>`);\n const TabsContext = createContext();\n const Tab = props => {\n const tabsContext = useContext(TabsContext);\n return createComponent(Show, {\n get when() {\n return props.value === tabsContext?.activeValue();\n },\n get children() {\n return props.children;\n }\n });\n };\n const Tabs = props => {\n const [activeValue, setActiveValue] = createSignal(props.items?.[0]);\n return createComponent(TabsContext.Provider, {\n value: {\n activeValue\n },\n get children() {\n return [(() => {\n var _el$ = _tmpl$();\n insert(_el$, createComponent(For, {\n get each() {\n return props.items;\n },\n children: item => {\n return (() => {\n var _el$3 = _tmpl$3();\n _el$3.$$click = () => setActiveValue(item);\n insert(_el$3, item);\n createRenderEffect(_$p => classList(_el$3, {\n 'mr-2 rounded-t p-2 font-medium leading-5 transition-colors -mb-0.5 select-none': true,\n 'border-b-2 border-blue-500 text-blue-600': item === activeValue()\n }, _$p));\n return _el$3;\n })();\n }\n }));\n return _el$;\n })(), (() => {\n var _el$2 = _tmpl$2();\n insert(_el$2, () => props.children);\n return _el$2;\n })()];\n }\n });\n };\n delegateEvents([\"click\"]);\n\n /*@jsxRuntime automatic @jsxImportSource solid-jsx*/\n const frontmatter = {\n \"title\": \"Getting Started\"\n };\n function _createMdxContent(props) {\n const _components = {\n a: \"a\",\n code: \"code\",\n figure: \"figure\",\n h2: \"h2\",\n p: \"p\",\n pre: \"pre\",\n span: \"span\",\n strong: \"strong\",\n ...props.components\n };\n return [createComponent(_components.p, {\n get children() {\n return [createComponent(_components.strong, {\n children: \"solid-sonner-toast\"\n }), \" is an unofficial port of \", createComponent(_components.a, {\n href: \"https://sonner.emilkowal.ski/\",\n children: \"Sonner\"\n }), \" for Solid.js.\"];\n }\n }), \"\\n\", createComponent(_components.p, {\n get children() {\n return [\"And there is \", createComponent(_components.a, {\n href: \"https://solid-sonner.vercel.app/\",\n children: \"Solid Sonner\"\n }), \" you can use in Solid.js.\"];\n }\n }), \"\\n\", createComponent(_components.p, {\n get children() {\n return [\"You can still try using solid-sonner-toast, and you can read \", createComponent(_components.a, {\n href: \"https://kenh-blog.vercel.app/article/build-solid-sonner-toast_en\",\n children: \"here\"\n }), \" how I implemented it.\"];\n }\n }), \"\\n\", createComponent(_components.h2, {\n id: \"install\",\n children: \"Install\"\n }), \"\\n\", createComponent(Tabs, {\n items: ['pnpm', 'npm', 'yarn'],\n get children() {\n return [createComponent(Tab, {\n value: \"pnpm\",\n get children() {\n return createComponent(_components.figure, {\n \"data-rehype-pretty-code-figure\": \"\",\n get children() {\n return createComponent(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"sh\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"sh\",\n \"data-theme\": \"github-light\",\n style: {\n display: \"grid\"\n },\n get children() {\n return createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \" pnpm\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \" i\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \" solid-sonner-toast\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" \"\n })];\n }\n });\n }\n });\n }\n });\n }\n });\n }\n }), createComponent(Tab, {\n value: \"yarn\",\n get children() {\n return createComponent(_components.figure, {\n \"data-rehype-pretty-code-figure\": \"\",\n get children() {\n return createComponent(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"sh\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"sh\",\n \"data-theme\": \"github-light\",\n style: {\n display: \"grid\"\n },\n get children() {\n return createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \" yarn\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \" solid-sonner-toast\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" \"\n })];\n }\n });\n }\n });\n }\n });\n }\n });\n }\n }), createComponent(Tab, {\n value: \"npm\",\n get children() {\n return createComponent(_components.figure, {\n \"data-rehype-pretty-code-figure\": \"\",\n get children() {\n return createComponent(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"sh\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"sh\",\n \"data-theme\": \"github-light\",\n style: {\n display: \"grid\"\n },\n get children() {\n return createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \" npm\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \" i\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \" solid-sonner-toast\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" \"\n })];\n }\n });\n }\n });\n }\n });\n }\n });\n }\n })];\n }\n }), \"\\n\", createComponent(_components.h2, {\n id: \"add-toaster-to-your-app\",\n children: \"Add Toaster to your App\"\n }), \"\\n\", createComponent(_components.p, {\n get children() {\n return [\"You can place the \", createComponent(_components.code, {\n children: \"\x3CToaster />\"\n }), \" component anywhere in your app, such as App.tsx\"];\n }\n }), \"\\n\", createComponent(_components.figure, {\n \"data-rehype-pretty-code-figure\": \"\",\n get children() {\n return createComponent(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"tsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"tsx\",\n \"data-theme\": \"github-light\",\n style: {\n display: \"grid\"\n },\n get children() {\n return [createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return createComponent(_components.span, {\n style: {\n color: \"#6A737D\"\n },\n children: \"// @refresh reload\"\n });\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"import\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" { Suspense } \"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"from\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \" 'solid-js'\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"import\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" { Toaster } \"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"from\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \" 'solid-sonner-toast'\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n children: \" \"\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"import\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" { Router } \"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"from\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \" '@solidjs/router'\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"import\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" { FileRoutes } \"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"from\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \" '@solidjs/start'\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n children: \" \"\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"import\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \" './app.css'\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"import\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" BaseLayout \"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"from\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \" './components/base-layout'\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n children: \" \"\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"export\"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \" default\"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \" function\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \" App\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"() {\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \" return\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" (\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" \x3C\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \"Router\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \" root\"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"=\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"{(\"\n }), createComponent(_components.span, {\n style: {\n color: \"#E36209\"\n },\n children: \"props\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \") \"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"=>\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" (\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" \x3C\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \"BaseLayout\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \">\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" \x3C\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \"Suspense\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \">{props.children}\x3C/\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \"Suspense\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \">\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" \x3C/\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \"BaseLayout\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \">\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" )}\"\n });\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" >\"\n });\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" \x3C\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \"Toaster\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" />\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" \x3C\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \"FileRoutes\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" />\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" \x3C/\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \"Router\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \">\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" )\"\n });\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"}\"\n });\n }\n })];\n }\n });\n }\n });\n }\n }), \"\\n\", createComponent(_components.h2, {\n id: \"render-a-toast\",\n children: \"Render a toast\"\n }), \"\\n\", createComponent(_components.p, {\n get children() {\n return [\"Use \", createComponent(_components.code, {\n children: \"toast()\"\n }), \" to render a toast\"];\n }\n }), \"\\n\", createComponent(_components.figure, {\n \"data-rehype-pretty-code-figure\": \"\",\n get children() {\n return createComponent(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"tsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"tsx\",\n \"data-theme\": \"github-light\",\n style: {\n display: \"grid\"\n },\n get children() {\n return [createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"import\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" { toast } \"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"from\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \" 'solid-sonner-toast'\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n children: \" \"\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"const\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \" Button\"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \" =\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" () \"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"=>\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" {\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return [createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \" return\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" \x3C\"\n }), createComponent(_components.span, {\n style: {\n color: \"#22863A\"\n },\n children: \"button\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \" onClick\"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"=\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"{() \"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"=>\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \" toast\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"(\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'Hello world'\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \")}>Hello world\x3C/\"\n }), createComponent(_components.span, {\n style: {\n color: \"#22863A\"\n },\n children: \"button\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \">\"\n })];\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"}\"\n });\n }\n })];\n }\n });\n }\n });\n }\n })];\n }\n function MDXContent(props = {}) {\n const {\n wrapper: MDXLayout\n } = props.components || {};\n return MDXLayout ? createComponent(MDXLayout, mergeProps(props, {\n get children() {\n return createComponent(_createMdxContent, props);\n }\n })) : _createMdxContent(props);\n }\n\n exports.default = MDXContent;\n exports.frontmatter = frontmatter;\n\n Object.defineProperty(exports, '__esModule', { value: true });\n\n return exports;\n\n})({});\n; return Component",raw:"---\ntitle: Getting Started\n---\n\nimport Tabs, { Tab } from '../components/tabs'\n\n**solid-sonner-toast** is an unofficial port of [Sonner](https://sonner.emilkowal.ski/) for Solid.js. \n\nAnd there is [Solid Sonner](https://solid-sonner.vercel.app/) you can use in Solid.js.\n\nYou can still try using solid-sonner-toast, and you can read [here](https://kenh-blog.vercel.app/article/build-solid-sonner-toast_en) how I implemented it.\n\n## Install\n\n\x3CTabs items={['pnpm', 'npm', 'yarn']}>\n \x3CTab value=\"pnpm\">\n ```sh \n pnpm i solid-sonner-toast \n ```\n \x3C/Tab>\n \x3CTab value=\"yarn\">\n ```sh \n yarn solid-sonner-toast \n ```\n \x3C/Tab>\n \x3CTab value=\"npm\">\n ```sh \n npm i solid-sonner-toast \n ```\n \x3C/Tab>\n\x3C/Tabs>\n\n## Add Toaster to your App\n\nYou can place the `\x3CToaster />` component anywhere in your app, such as App.tsx\n\n```tsx App.tsx\n// @refresh reload\nimport { Suspense } from 'solid-js'\nimport { Toaster } from 'solid-sonner-toast'\n\nimport { Router } from '@solidjs/router'\nimport { FileRoutes } from '@solidjs/start'\n\nimport './app.css'\nimport BaseLayout from './components/base-layout'\n\nexport default function App() {\n return (\n \x3CRouter\n root={(props) => (\n \x3CBaseLayout>\n \x3CSuspense>{props.children}\x3C/Suspense>\n \x3C/BaseLayout>\n )}\n >\n \x3CToaster />\n \x3CFileRoutes />\n \x3C/Router>\n )\n}\n```\n\n## Render a toast\nUse `toast()` to render a toast\n```tsx\nimport { toast } from 'solid-sonner-toast'\n\nconst Button = () => {\n return \x3Cbutton onClick={() => toast('Hello world')}>Hello world\x3C/button>\n}\n```",toc:$R[5]=[$R[6]={id:"install",title:"Install",children:$R[7]=[]},$R[8]={id:"add-toaster-to-your-app",title:"Add Toaster to your App",children:$R[9]=[]},$R[10]={id:"render-a-toast",title:"Render a toast",children:$R[11]=[]}],matter:$R[12]={title:"Getting Started"}},matter:$R[12],raw:"---\ntitle: Getting Started\n---\n\nimport Tabs, { Tab } from '../components/tabs'\n\n**solid-sonner-toast** is an unofficial port of [Sonner](https://sonner.emilkowal.ski/) for Solid.js. \n\nAnd there is [Solid Sonner](https://solid-sonner.vercel.app/) you can use in Solid.js.\n\nYou can still try using solid-sonner-toast, and you can read [here](https://kenh-blog.vercel.app/article/build-solid-sonner-toast_en) how I implemented it.\n\n## Install\n\n\x3CTabs items={['pnpm', 'npm', 'yarn']}>\n \x3CTab value=\"pnpm\">\n ```sh \n pnpm i solid-sonner-toast \n ```\n \x3C/Tab>\n \x3CTab value=\"yarn\">\n ```sh \n yarn solid-sonner-toast \n ```\n \x3C/Tab>\n \x3CTab value=\"npm\">\n ```sh \n npm i solid-sonner-toast \n ```\n \x3C/Tab>\n\x3C/Tabs>\n\n## Add Toaster to your App\n\nYou can place the `\x3CToaster />` component anywhere in your app, such as App.tsx\n\n```tsx App.tsx\n// @refresh reload\nimport { Suspense } from 'solid-js'\nimport { Toaster } from 'solid-sonner-toast'\n\nimport { Router } from '@solidjs/router'\nimport { FileRoutes } from '@solidjs/start'\n\nimport './app.css'\nimport BaseLayout from './components/base-layout'\n\nexport default function App() {\n return (\n \x3CRouter\n root={(props) => (\n \x3CBaseLayout>\n \x3CSuspense>{props.children}\x3C/Suspense>\n \x3C/BaseLayout>\n )}\n >\n \x3CToaster />\n \x3CFileRoutes />\n \x3C/Router>\n )\n}\n```\n\n## Render a toast\nUse `toast()` to render a toast\n```tsx\nimport { toast } from 'solid-sonner-toast'\n\nconst Button = () => {\n return \x3Cbutton onClick={() => toast('Hello world')}>Hello world\x3C/button>\n}\n```",toc:$R[5],[$R[13]=Symbol.toStringTag]:"Module"})),Object.seal($R[3]),$R[2]);$R[14]($R[0],!0);