\"\n })];\n }\n });\n }\n });\n }\n });\n }\n }), \"\\n\", createComponent(_components.h3, {\n id: \"position\",\n children: \"Position\"\n }), \"\\n\", createComponent(_components.p, {\n children: \"Set the place where the toast will be rendered.\"\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: \"// Available positions:\"\n });\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return createComponent(_components.span, {\n style: {\n color: \"#6A737D\"\n },\n children: \"// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right\"\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: \"#6F42C1\"\n },\n children: \" position\"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"=\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"\\\"bottom-right\\\"\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" />\"\n })];\n }\n })];\n }\n });\n }\n });\n }\n }), \"\\n\", createComponent(_components.h3, {\n id: \"styling-all-toasts\",\n children: \"Styling all toasts\"\n }), \"\\n\", createComponent(_components.p, {\n get children() {\n return [\"You can customzie all toasts at once with \", createComponent(_components.code, {\n children: \"toastOptions\"\n }), \" prop. These options will act as the default for all toasts.\"];\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: \"#24292E\"\n },\n children: \"\x3C\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \"Toaster\"\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: \" toastOptions\"\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: \" style: { background: \"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'red'\"\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: \" className: \"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'my-toast'\"\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: \"api-reference\",\n children: \"API Reference\"\n }), \"\\n\", createComponent(_components.table, {\n get children() {\n return [createComponent(_components.thead, {\n get children() {\n return createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.th, {\n style: {\n textAlign: \"left\"\n },\n children: \"Property\"\n }), createComponent(_components.th, {\n style: {\n textAlign: \"center\"\n },\n children: \"Description\"\n }), createComponent(_components.th, {\n style: {\n textAlign: \"right\"\n },\n children: \"Default\"\n })];\n }\n });\n }\n }), createComponent(_components.tbody, {\n get children() {\n return [createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"theme\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n get children() {\n return [\"Toast's theme, either \", createComponent(_components.code, {\n children: \"light\"\n }), \", \", createComponent(_components.code, {\n children: \"dark\"\n }), \", or \", createComponent(_components.code, {\n children: \"system\"\n })];\n }\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"light\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"richColors\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Makes error and success state more colorful\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"false\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"expand\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Toasts will be expanded by default\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"false\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"visibleToasts\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Amount of visible toasts\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"3\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"position\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Place where the toasts will be rendered\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"bottom-right\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"closeButton\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Adds a close button to all toasts\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"false\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"offset\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Offset from the edges of the screen.\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"32px\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"dir\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Directionality of toast's text\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"ltr\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"invert\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Dark toasts in light mode and vice versa.\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"false\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"gap\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Gap between toasts when expanded\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"14\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"loadingIcon\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Changes the default loading icon\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"-\"\n });\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 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 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 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 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\n /*@jsxRuntime automatic @jsxImportSource solid-jsx*/\n /*| icons | Changes the default icons | `-` |\n | toastOptions | These will act as default options for all toasts. See [toast()](/toast) for all available options. | `4000` |\n | hotkey | Keyboard shortcut that will move focus to the toaster area. | `⌥/alt + T` |*/\n const frontmatter = {\n \"title\": \"Toaster\"\n };\n function _createMdxContent(props) {\n const _components = {\n code: \"code\",\n figure: \"figure\",\n h2: \"h2\",\n h3: \"h3\",\n p: \"p\",\n pre: \"pre\",\n span: \"span\",\n table: \"table\",\n tbody: \"tbody\",\n td: \"td\",\n th: \"th\",\n thead: \"thead\",\n tr: \"tr\",\n ...props.components\n };\n return [createComponent(_components.p, {\n children: \"This component renders all the toasts, you can place it anywhere in your app.\"\n }), \"\\n\", createComponent(_components.h2, {\n id: \"customization\",\n children: \"Customization\"\n }), \"\\n\", createComponent(_components.h3, {\n id: \"expand\",\n children: \"Expand\"\n }), \"\\n\", createComponent(_components.p, {\n get children() {\n return [\"Toasts will collapse by default and expand only when you hover on one of them. You are able to modify this behaviour by setting the \", createComponent(_components.code, {\n children: \"expand\"\n }), \" prop to \", createComponent(_components.code, {\n children: \"true\"\n }), \", and customize it even further with the \", createComponent(_components.code, {\n children: \"visibleToasts\"\n }), \" prop.\"];\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: \"#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: \"#6F42C1\"\n },\n children: \" expand\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \" visibleToasts\"\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: \"#005CC5\"\n },\n children: \"9\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"} />\"\n })];\n }\n });\n }\n });\n }\n });\n }\n }), \"\\n\", createComponent(_components.h3, {\n id: \"position\",\n children: \"Position\"\n }), \"\\n\", createComponent(_components.p, {\n children: \"Set the place where the toast will be rendered.\"\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: \"// Available positions:\"\n });\n }\n }), \"\\n\", createComponent(_components.span, {\n \"data-line\": \"\",\n get children() {\n return createComponent(_components.span, {\n style: {\n color: \"#6A737D\"\n },\n children: \"// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right\"\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: \"#6F42C1\"\n },\n children: \" position\"\n }), createComponent(_components.span, {\n style: {\n color: \"#D73A49\"\n },\n children: \"=\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"\\\"bottom-right\\\"\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \" />\"\n })];\n }\n })];\n }\n });\n }\n });\n }\n }), \"\\n\", createComponent(_components.h3, {\n id: \"styling-all-toasts\",\n children: \"Styling all toasts\"\n }), \"\\n\", createComponent(_components.p, {\n get children() {\n return [\"You can customzie all toasts at once with \", createComponent(_components.code, {\n children: \"toastOptions\"\n }), \" prop. These options will act as the default for all toasts.\"];\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: \"#24292E\"\n },\n children: \"\x3C\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \"Toaster\"\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: \" toastOptions\"\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: \" style: { background: \"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'red'\"\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: \" className: \"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'my-toast'\"\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: \"api-reference\",\n children: \"API Reference\"\n }), \"\\n\", createComponent(_components.table, {\n get children() {\n return [createComponent(_components.thead, {\n get children() {\n return createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.th, {\n style: {\n textAlign: \"left\"\n },\n children: \"Property\"\n }), createComponent(_components.th, {\n style: {\n textAlign: \"center\"\n },\n children: \"Description\"\n }), createComponent(_components.th, {\n style: {\n textAlign: \"right\"\n },\n children: \"Default\"\n })];\n }\n });\n }\n }), createComponent(_components.tbody, {\n get children() {\n return [createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"theme\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n get children() {\n return [\"Toast's theme, either \", createComponent(_components.code, {\n children: \"light\"\n }), \", \", createComponent(_components.code, {\n children: \"dark\"\n }), \", or \", createComponent(_components.code, {\n children: \"system\"\n })];\n }\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"light\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"richColors\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Makes error and success state more colorful\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"false\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"expand\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Toasts will be expanded by default\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"false\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"visibleToasts\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Amount of visible toasts\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"3\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"position\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Place where the toasts will be rendered\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"bottom-right\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"closeButton\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Adds a close button to all toasts\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"false\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"offset\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Offset from the edges of the screen.\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"32px\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"dir\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Directionality of toast's text\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"ltr\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"invert\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Dark toasts in light mode and vice versa.\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"false\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"gap\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Gap between toasts when expanded\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"14\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"loadingIcon\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Changes the default loading icon\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"-\"\n });\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: Toaster\n---\n\nThis component renders all the toasts, you can place it anywhere in your app.\n\n## Customization\n\n### Expand\n\nToasts will collapse by default and expand only when you hover on one of them. You are able to modify this behaviour by setting the `expand` prop to `true`, and customize it even further with the `visibleToasts` prop.\n\n```tsx\n\x3CToaster expand visibleToasts={9} />\n```\n\n### Position\n\nSet the place where the toast will be rendered.\n\n```tsx\n// Available positions:\n// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right\n\x3CToaster position=\"bottom-right\" />\n```\n\n### Styling all toasts\n\nYou can customzie all toasts at once with `toastOptions` prop. These options will act as the default for all toasts.\n\n```tsx\n\x3CToaster\n toastOptions={{\n style: { background: 'red' },\n className: 'my-toast',\n }}\n/>\n```\n\n## API Reference\n| Property | Description | Default |\n| :-------------------- | :-----------------------------------------------------------------------------------------------------------------------------: | ----------------------------------: |\n| theme | Toast's theme, either `light`, `dark`, or `system` | `light` |\n| richColors | Makes error and success state more colorful | `false` |\n| expand | Toasts will be expanded by default | `false` |\n| visibleToasts | Amount of visible toasts | `3` |\n| position | Place where the toasts will be rendered | `bottom-right` |\n| closeButton | Adds a close button to all toasts | `false` |\n| offset | Offset from the edges of the screen. | `32px` |\n| dir | Directionality of toast's text | `ltr` |\n| invert | Dark toasts in light mode and vice versa. | `false` |\n| gap | Gap between toasts when expanded | `14` |\n| loadingIcon | Changes the default loading icon | `-` |\n\n{/* | icons | Changes the default icons | `-` |\n| toastOptions | These will act as default options for all toasts. See [toast()](/toast) for all available options. | `4000` |\n| hotkey | Keyboard shortcut that will move focus to the toaster area. | `⌥/alt + T` | */}",toc:$R[5]=[$R[6]={id:"customization",title:"Customization",children:$R[7]=[$R[8]={id:"expand",title:"Expand",children:$R[9]=[]},$R[10]={id:"position",title:"Position",children:$R[11]=[]},$R[12]={id:"styling-all-toasts",title:"Styling all toasts",children:$R[13]=[]}]},$R[14]={id:"api-reference",title:"API Reference",children:$R[15]=[]}],matter:$R[16]={title:"Toaster"}},matter:$R[16],raw:"---\ntitle: Toaster\n---\n\nThis component renders all the toasts, you can place it anywhere in your app.\n\n## Customization\n\n### Expand\n\nToasts will collapse by default and expand only when you hover on one of them. You are able to modify this behaviour by setting the `expand` prop to `true`, and customize it even further with the `visibleToasts` prop.\n\n```tsx\n\x3CToaster expand visibleToasts={9} />\n```\n\n### Position\n\nSet the place where the toast will be rendered.\n\n```tsx\n// Available positions:\n// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right\n\x3CToaster position=\"bottom-right\" />\n```\n\n### Styling all toasts\n\nYou can customzie all toasts at once with `toastOptions` prop. These options will act as the default for all toasts.\n\n```tsx\n\x3CToaster\n toastOptions={{\n style: { background: 'red' },\n className: 'my-toast',\n }}\n/>\n```\n\n## API Reference\n| Property | Description | Default |\n| :-------------------- | :-----------------------------------------------------------------------------------------------------------------------------: | ----------------------------------: |\n| theme | Toast's theme, either `light`, `dark`, or `system` | `light` |\n| richColors | Makes error and success state more colorful | `false` |\n| expand | Toasts will be expanded by default | `false` |\n| visibleToasts | Amount of visible toasts | `3` |\n| position | Place where the toasts will be rendered | `bottom-right` |\n| closeButton | Adds a close button to all toasts | `false` |\n| offset | Offset from the edges of the screen. | `32px` |\n| dir | Directionality of toast's text | `ltr` |\n| invert | Dark toasts in light mode and vice versa. | `false` |\n| gap | Gap between toasts when expanded | `14` |\n| loadingIcon | Changes the default loading icon | `-` |\n\n{/* | icons | Changes the default icons | `-` |\n| toastOptions | These will act as default options for all toasts. See [toast()](/toast) for all available options. | `4000` |\n| hotkey | Keyboard shortcut that will move focus to the toaster area. | `⌥/alt + T` | */}",toc:$R[5],[$R[17]=Symbol.toStringTag]:"Module"})),Object.seal($R[3]),$R[2]);$R[18]($R[0],!0);