\"\n });\n }\n }), \" if you have provided any.\"];\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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \" 'sonner'\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \";\"\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: \"#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: \"'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: \" className: \"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'my-classname'\"\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: \" description: \"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'My description'\"\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: \"#6A737D\"\n },\n children: \"// duration: 5000,\"\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: \" icon: \x3C\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \"MyIcon\"\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\", createComponent(_components.h2, {\n id: \"creating-toasts\",\n children: \"Creating toasts\"\n }), \"\\n\", createComponent(_components.h3, {\n id: \"success\",\n children: \"Success\"\n }), \"\\n\", createComponent(_components.p, {\n children: \"Renders a checkmark icon in front of the message.\"\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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \"toast.\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \"success\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"(\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'My success toast'\"\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: \"error\",\n children: \"Error\"\n }), \"\\n\", createComponent(_components.p, {\n children: \"Renders an error icon in front of the message.\"\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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \"toast.\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \"error\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"(\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'My error toast'\"\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: \"action\",\n children: \"Action\"\n }), \"\\n\", createComponent(_components.p, {\n get children() {\n return [\"Renders a primary button, clicking it will close the toast and run the callback passed via \", createComponent(_components.code, {\n children: \"onClick\"\n }), \". You can prevent the toast from closing by calling \", createComponent(_components.code, {\n children: \"event.preventDefault()\"\n }), \" in the \", createComponent(_components.code, {\n children: \"onClick\"\n }), \" callback.\"];\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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \"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: \"'My action 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: \" action: {\"\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: \" label: \"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'Action'\"\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: \"#6F42C1\"\n },\n children: \" onClick\"\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: \" console.\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \"log\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"(\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'Action!'\"\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.h3, {\n id: \"cancel\",\n children: \"Cancel\"\n }), \"\\n\", createComponent(_components.p, {\n get children() {\n return [\"Renders a secondary button, clicking it will close the toast and run the callback passed via \", createComponent(_components.code, {\n children: \"onClick\"\n }), \".\"];\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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \"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: \"'My cancel 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: \" cancel: {\"\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: \" label: \"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'Cancel'\"\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: \"#6F42C1\"\n },\n children: \" onClick\"\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: \" console.\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \"log\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"(\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'Cancel!'\"\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.h3, {\n id: \"promise\",\n children: \"Promise\"\n }), \"\\n\", createComponent(_components.p, {\n children: \"Starts in a loading state and will update automatically after the promise resolves or fails.\\nYou can pass a function to the success/error messages to incorporate the result/error of the promise.\"\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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \"toast.\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \"promise\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"(myPromise, {\"\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: \" loading: \"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'Loading...'\"\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: \"#6F42C1\"\n },\n children: \" success\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \": (\"\n }), createComponent(_components.span, {\n style: {\n color: \"#E36209\"\n },\n children: \"data\"\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: \"#032F62\"\n },\n children: \" `${\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"data\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \".\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"name\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"} toast has been added`\"\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: \" error: \"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'Error'\"\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\", createComponent(_components.h3, {\n id: \"loading\",\n children: \"Loading\"\n }), \"\\n\", createComponent(_components.p, {\n children: \"Renders a toast with a loading spinner. Useful when you want to handle various states yourself instead of using a promise toast.\"\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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \"toast.\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \"loading\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"(\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'Loading data'\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \");\"\n })];\n }\n });\n }\n });\n }\n });\n }\n }), \"\\n\", \"\\n\", \"\\n\", createComponent(_components.h3, {\n id: \"dynamic-position\",\n children: \"Dynamic Position\"\n }), \"\\n\", createComponent(_components.p, {\n get children() {\n return [\"You can change the position of the toast dynamically by passing a \", createComponent(_components.code, {\n children: \"position\"\n }), \" prop to the toast\\nfunction. It will not affect the positioning of other 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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \"#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: \", {\"\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: \" position: \"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'top-center'\"\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\", createComponent(_components.h2, {\n id: \"other\",\n children: \"Other\"\n }), \"\\n\", createComponent(_components.h3, {\n id: \"updating-toasts\",\n children: \"Updating toasts\"\n }), \"\\n\", createComponent(_components.p, {\n get children() {\n return [\"You can update a toast by using the \", createComponent(_components.code, {\n children: \"toast\"\n }), \" function and passing it the id of the toast you want to update, the rest stays the same.\"];\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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \"const\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \" toastId\"\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: \"'Sonner'\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \");\"\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: \"#24292E\"\n },\n children: \"toast.\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \"success\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"(\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'Toast has been updated'\"\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: \" id: toastId,\"\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.h3, {\n id: \"on-close-callback\",\n children: \"On Close Callback\"\n }), \"\\n\", createComponent(_components.p, {\n get children() {\n return [\"You can pass \", createComponent(_components.code, {\n children: \"onDismiss\"\n }), \" and \", createComponent(_components.code, {\n children: \"onAutoClose\"\n }), \" callbacks to each toast. \", createComponent(_components.code, {\n children: \"onDismiss\"\n }), \" gets fired when either the close button gets clicked or the toast is swiped. \", createComponent(_components.code, {\n children: \"onAutoClose\"\n }), \" fires when the toast disappears automatically after it's timeout (\", createComponent(_components.code, {\n children: \"duration\"\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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \"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: \"'Event has been created'\"\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: \"#6F42C1\"\n },\n children: \" onDismiss\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \": (\"\n }), createComponent(_components.span, {\n style: {\n color: \"#E36209\"\n },\n children: \"t\"\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: \" console.\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \"log\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"(\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"`Toast with id ${\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"t\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \".\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"id\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"} has been dismissed`\"\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: \"#6F42C1\"\n },\n children: \" onAutoClose\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \": (\"\n }), createComponent(_components.span, {\n style: {\n color: \"#E36209\"\n },\n children: \"t\"\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: \" console.\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \"log\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"(\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"`Toast with id ${\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"t\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \".\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"id\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"} has been closed automatically`\"\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\", createComponent(_components.p, {\n get children() {\n return [\"You can also dismiss all toasts at once by calling \", createComponent(_components.code, {\n children: \"toast.dismiss()\"\n }), \" without an id.\"];\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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \"toast.\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \"dismiss\"\n }), 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: \"description\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Toast's description, renders underneath the title.\"\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 }), 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: \"Position of the toast.\"\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: \"duration\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Time in milliseconds that should elapse before automatically closing the toast.\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"4000\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"dismissible\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n get children() {\n return [\"If \", createComponent(_components.code, {\n children: \"false\"\n }), \", it'll prevent the user from dismissing the toast.\"];\n }\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"true\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"icon\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Icon displayed in front of toast's text, aligned vertically.\"\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 }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"action\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Renders a primary button, clicking it will close the toast.\"\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 }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"cancel\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Renders a secondary button, clicking it will close the toast.\"\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 }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"id\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Custom id for the toast.\"\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 }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"onDismiss\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"The function gets called when either the close button is clicked, or the toast is swiped.\"\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 }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"onAutoClose\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Function that gets called when the toast disappears automatically after it's timeout (duration` prop).\"\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 }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"unstyled\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Removes the default styling, which allows for easier customization.\"\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: \"actionButtonStyles\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Styles for the action button\"\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 }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"cancelButtonStyles\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Styles for the cancel button\"\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 /*### Custom\n\n You can pass jsx as the first argument instead of a string to render a custom toast while maintaining default styling.\n\n ```jsx\n toast(\x3Cdiv>A custom toast with default styling\x3C/div>, { duration: 5000 });\n ```*/\n /*### Headless\n\n Use it to render an unstyled toast with custom jsx while maintaining the functionality. This function receives the `Toast` as an argument, giving you access to all properties.\n\n ```jsx\n toast.custom((t) => (\n \x3Cdiv>\n This is a custom component \x3Cbutton onClick={() => toast.dismiss(t)}>close\x3C/button>\n \x3C/div>\n ));\n ```*/\n /*### Dismissing toasts programmatically\n\n To remove a toast programmatically use `toast.dismiss(id)`. The `toast()` function return the id of the toast.\n\n ```jsx\n const toastId = toast('Event has been created');\n\n toast.dismiss(toastId);\n ```*/\n /*| important | Control the sensitivity of the toast for screen readers | `false` |\n | closeButton | Adds a close button. | `false` |\n | invert | Dark toast in light mode and vice versa. | `false` |*/\n const frontmatter = {\n \"title\": \"toast()\"\n };\n function _createMdxContent(props) {\n const _components = {\n a: \"a\",\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: \"Use it to render a toast. You can call it from anywhere, even outside of Solid.js.\"\n }), \"\\n\", createComponent(_components.h2, {\n id: \"rendering-the-toast\",\n children: \"Rendering the toast\"\n }), \"\\n\", createComponent(_components.p, {\n children: \"You can call it with just a string.\"\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: \" 'sonner'\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \";\"\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: \"#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: \");\"\n })];\n }\n })];\n }\n });\n }\n });\n }\n }), \"\\n\", createComponent(_components.p, {\n get children() {\n return [\"Or provide an object as the second argument with more options. They will overwrite the options passed to \", createComponent(_components.a, {\n href: \"/docs/toaster\",\n get children() {\n return createComponent(_components.code, {\n children: \"\x3CToaster />\"\n });\n }\n }), \" if you have provided any.\"];\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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \" 'sonner'\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \";\"\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: \"#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: \"'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: \" className: \"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'my-classname'\"\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: \" description: \"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'My description'\"\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: \"#6A737D\"\n },\n children: \"// duration: 5000,\"\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: \" icon: \x3C\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \"MyIcon\"\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\", createComponent(_components.h2, {\n id: \"creating-toasts\",\n children: \"Creating toasts\"\n }), \"\\n\", createComponent(_components.h3, {\n id: \"success\",\n children: \"Success\"\n }), \"\\n\", createComponent(_components.p, {\n children: \"Renders a checkmark icon in front of the message.\"\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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \"toast.\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \"success\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"(\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'My success toast'\"\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: \"error\",\n children: \"Error\"\n }), \"\\n\", createComponent(_components.p, {\n children: \"Renders an error icon in front of the message.\"\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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \"toast.\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \"error\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"(\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'My error toast'\"\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: \"action\",\n children: \"Action\"\n }), \"\\n\", createComponent(_components.p, {\n get children() {\n return [\"Renders a primary button, clicking it will close the toast and run the callback passed via \", createComponent(_components.code, {\n children: \"onClick\"\n }), \". You can prevent the toast from closing by calling \", createComponent(_components.code, {\n children: \"event.preventDefault()\"\n }), \" in the \", createComponent(_components.code, {\n children: \"onClick\"\n }), \" callback.\"];\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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \"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: \"'My action 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: \" action: {\"\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: \" label: \"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'Action'\"\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: \"#6F42C1\"\n },\n children: \" onClick\"\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: \" console.\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \"log\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"(\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'Action!'\"\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.h3, {\n id: \"cancel\",\n children: \"Cancel\"\n }), \"\\n\", createComponent(_components.p, {\n get children() {\n return [\"Renders a secondary button, clicking it will close the toast and run the callback passed via \", createComponent(_components.code, {\n children: \"onClick\"\n }), \".\"];\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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \"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: \"'My cancel 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: \" cancel: {\"\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: \" label: \"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'Cancel'\"\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: \"#6F42C1\"\n },\n children: \" onClick\"\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: \" console.\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \"log\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"(\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'Cancel!'\"\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.h3, {\n id: \"promise\",\n children: \"Promise\"\n }), \"\\n\", createComponent(_components.p, {\n children: \"Starts in a loading state and will update automatically after the promise resolves or fails.\\nYou can pass a function to the success/error messages to incorporate the result/error of the promise.\"\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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \"toast.\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \"promise\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"(myPromise, {\"\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: \" loading: \"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'Loading...'\"\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: \"#6F42C1\"\n },\n children: \" success\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \": (\"\n }), createComponent(_components.span, {\n style: {\n color: \"#E36209\"\n },\n children: \"data\"\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: \"#032F62\"\n },\n children: \" `${\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"data\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \".\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"name\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"} toast has been added`\"\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: \" error: \"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'Error'\"\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\", createComponent(_components.h3, {\n id: \"loading\",\n children: \"Loading\"\n }), \"\\n\", createComponent(_components.p, {\n children: \"Renders a toast with a loading spinner. Useful when you want to handle various states yourself instead of using a promise toast.\"\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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \"toast.\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \"loading\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"(\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'Loading data'\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \");\"\n })];\n }\n });\n }\n });\n }\n });\n }\n }), \"\\n\", \"\\n\", \"\\n\", createComponent(_components.h3, {\n id: \"dynamic-position\",\n children: \"Dynamic Position\"\n }), \"\\n\", createComponent(_components.p, {\n get children() {\n return [\"You can change the position of the toast dynamically by passing a \", createComponent(_components.code, {\n children: \"position\"\n }), \" prop to the toast\\nfunction. It will not affect the positioning of other 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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \"#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: \", {\"\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: \" position: \"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'top-center'\"\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\", createComponent(_components.h2, {\n id: \"other\",\n children: \"Other\"\n }), \"\\n\", createComponent(_components.h3, {\n id: \"updating-toasts\",\n children: \"Updating toasts\"\n }), \"\\n\", createComponent(_components.p, {\n get children() {\n return [\"You can update a toast by using the \", createComponent(_components.code, {\n children: \"toast\"\n }), \" function and passing it the id of the toast you want to update, the rest stays the same.\"];\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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \"const\"\n }), createComponent(_components.span, {\n style: {\n color: \"#005CC5\"\n },\n children: \" toastId\"\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: \"'Sonner'\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \");\"\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: \"#24292E\"\n },\n children: \"toast.\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \"success\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"(\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"'Toast has been updated'\"\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: \" id: toastId,\"\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.h3, {\n id: \"on-close-callback\",\n children: \"On Close Callback\"\n }), \"\\n\", createComponent(_components.p, {\n get children() {\n return [\"You can pass \", createComponent(_components.code, {\n children: \"onDismiss\"\n }), \" and \", createComponent(_components.code, {\n children: \"onAutoClose\"\n }), \" callbacks to each toast. \", createComponent(_components.code, {\n children: \"onDismiss\"\n }), \" gets fired when either the close button gets clicked or the toast is swiped. \", createComponent(_components.code, {\n children: \"onAutoClose\"\n }), \" fires when the toast disappears automatically after it's timeout (\", createComponent(_components.code, {\n children: \"duration\"\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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \"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: \"'Event has been created'\"\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: \"#6F42C1\"\n },\n children: \" onDismiss\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \": (\"\n }), createComponent(_components.span, {\n style: {\n color: \"#E36209\"\n },\n children: \"t\"\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: \" console.\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \"log\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"(\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"`Toast with id ${\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"t\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \".\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"id\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"} has been dismissed`\"\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: \"#6F42C1\"\n },\n children: \" onAutoClose\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \": (\"\n }), createComponent(_components.span, {\n style: {\n color: \"#E36209\"\n },\n children: \"t\"\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: \" console.\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \"log\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"(\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"`Toast with id ${\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"t\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \".\"\n }), createComponent(_components.span, {\n style: {\n color: \"#24292E\"\n },\n children: \"id\"\n }), createComponent(_components.span, {\n style: {\n color: \"#032F62\"\n },\n children: \"} has been closed automatically`\"\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\", createComponent(_components.p, {\n get children() {\n return [\"You can also dismiss all toasts at once by calling \", createComponent(_components.code, {\n children: \"toast.dismiss()\"\n }), \" without an id.\"];\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\": \"jsx\",\n \"data-theme\": \"github-light\",\n get children() {\n return createComponent(_components.code, {\n \"data-language\": \"jsx\",\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: \"toast.\"\n }), createComponent(_components.span, {\n style: {\n color: \"#6F42C1\"\n },\n children: \"dismiss\"\n }), 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: \"description\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Toast's description, renders underneath the title.\"\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 }), 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: \"Position of the toast.\"\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: \"duration\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Time in milliseconds that should elapse before automatically closing the toast.\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"4000\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"dismissible\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n get children() {\n return [\"If \", createComponent(_components.code, {\n children: \"false\"\n }), \", it'll prevent the user from dismissing the toast.\"];\n }\n }), createComponent(_components.td, {\n style: {\n textAlign: \"right\"\n },\n get children() {\n return createComponent(_components.code, {\n children: \"true\"\n });\n }\n })];\n }\n }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"icon\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Icon displayed in front of toast's text, aligned vertically.\"\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 }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"action\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Renders a primary button, clicking it will close the toast.\"\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 }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"cancel\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Renders a secondary button, clicking it will close the toast.\"\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 }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"id\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Custom id for the toast.\"\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 }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"onDismiss\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"The function gets called when either the close button is clicked, or the toast is swiped.\"\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 }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"onAutoClose\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Function that gets called when the toast disappears automatically after it's timeout (duration` prop).\"\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 }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"unstyled\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Removes the default styling, which allows for easier customization.\"\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: \"actionButtonStyles\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Styles for the action button\"\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 }), createComponent(_components.tr, {\n get children() {\n return [createComponent(_components.td, {\n style: {\n textAlign: \"left\"\n },\n children: \"cancelButtonStyles\"\n }), createComponent(_components.td, {\n style: {\n textAlign: \"center\"\n },\n children: \"Styles for the cancel button\"\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: toast()\n---\n\nUse it to render a toast. You can call it from anywhere, even outside of Solid.js.\n\n## Rendering the toast\n\nYou can call it with just a string.\n\n```tsx\nimport { toast } from 'sonner';\n\ntoast('Hello World!');\n```\n\nOr provide an object as the second argument with more options. They will overwrite the options passed to [`\x3CToaster />`](/docs/toaster) if you have provided any.\n\n```jsx\nimport { toast } from 'sonner';\n\ntoast('My toast', {\n className: 'my-classname',\n description: 'My description',\n// duration: 5000,\n icon: \x3CMyIcon />,\n});\n```\n\n## Creating toasts\n\n### Success\n\nRenders a checkmark icon in front of the message.\n\n```jsx\ntoast.success('My success toast');\n```\n\n### Error\n\nRenders an error icon in front of the message.\n\n```jsx\ntoast.error('My error toast');\n```\n\n### Action\n\nRenders a primary button, clicking it will close the toast and run the callback passed via `onClick`. You can prevent the toast from closing by calling `event.preventDefault()` in the `onClick` callback.\n\n```jsx\ntoast('My action toast', {\n action: {\n label: 'Action',\n onClick: () => console.log('Action!'),\n },\n});\n```\n\n### Cancel\n\nRenders a secondary button, clicking it will close the toast and run the callback passed via `onClick`.\n\n```jsx\ntoast('My cancel toast', {\n cancel: {\n label: 'Cancel',\n onClick: () => console.log('Cancel!'),\n },\n});\n```\n\n### Promise\n\nStarts in a loading state and will update automatically after the promise resolves or fails.\nYou can pass a function to the success/error messages to incorporate the result/error of the promise.\n\n```jsx\ntoast.promise(myPromise, {\n loading: 'Loading...',\n success: (data) => {\n return `${data.name} toast has been added`;\n },\n error: 'Error',\n});\n```\n\n### Loading\n\nRenders a toast with a loading spinner. Useful when you want to handle various states yourself instead of using a promise toast.\n\n```jsx\ntoast.loading('Loading data');\n```\n\n{/* ### Custom\n\nYou can pass jsx as the first argument instead of a string to render a custom toast while maintaining default styling.\n\n```jsx\ntoast(\x3Cdiv>A custom toast with default styling\x3C/div>, { duration: 5000 });\n``` */}\n\n{/* ### Headless\n\nUse it to render an unstyled toast with custom jsx while maintaining the functionality. This function receives the `Toast` as an argument, giving you access to all properties.\n\n```jsx\ntoast.custom((t) => (\n \x3Cdiv>\n This is a custom component \x3Cbutton onClick={() => toast.dismiss(t)}>close\x3C/button>\n \x3C/div>\n));\n``` */}\n\n### Dynamic Position\n\nYou can change the position of the toast dynamically by passing a `position` prop to the toast\nfunction. It will not affect the positioning of other toasts.\n\n```jsx\n// Available positions:\n// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right\ntoast('Hello World', {\n position: 'top-center',\n});\n```\n\n## Other\n\n### Updating toasts\n\nYou can update a toast by using the `toast` function and passing it the id of the toast you want to update, the rest stays the same.\n\n```jsx\nconst toastId = toast('Sonner');\n\ntoast.success('Toast has been updated', {\n id: toastId,\n});\n```\n\n### On Close Callback\n\nYou can pass `onDismiss` and `onAutoClose` callbacks to each toast. `onDismiss` gets fired when either the close button gets clicked or the toast is swiped. `onAutoClose` fires when the toast disappears automatically after it's timeout (`duration` prop).\n\n```jsx\ntoast('Event has been created', {\n onDismiss: (t) => console.log(`Toast with id ${t.id} has been dismissed`),\n onAutoClose: (t) => console.log(`Toast with id ${t.id} has been closed automatically`),\n});\n```\n\n{/* ### Dismissing toasts programmatically\n\nTo remove a toast programmatically use `toast.dismiss(id)`. The `toast()` function return the id of the toast.\n\n```jsx\nconst toastId = toast('Event has been created');\n\ntoast.dismiss(toastId);\n``` */}\n\nYou can also dismiss all toasts at once by calling `toast.dismiss()` without an id.\n\n```jsx\ntoast.dismiss();\n```\n\n## API Reference\n\n| Property | Description | Default |\n| :----------------- | :----------------------------------------------------------------------------------------------------: | -------------: |\n| description | Toast's description, renders underneath the title. | `-` |\n| position | Position of the toast. | `bottom-right` |\n| duration | Time in milliseconds that should elapse before automatically closing the toast. | `4000` |\n| dismissible | If `false`, it'll prevent the user from dismissing the toast. | `true` |\n| icon | Icon displayed in front of toast's text, aligned vertically. | `-` |\n| action | Renders a primary button, clicking it will close the toast. | `-` |\n| cancel | Renders a secondary button, clicking it will close the toast. | `-` |\n| id | Custom id for the toast. | `-` |\n| onDismiss | The function gets called when either the close button is clicked, or the toast is swiped. | `-` |\n| onAutoClose | Function that gets called when the toast disappears automatically after it's timeout (duration` prop). | `-` |\n| unstyled | Removes the default styling, which allows for easier customization. | `false` |\n| actionButtonStyles | Styles for the action button | `{}` |\n| cancelButtonStyles | Styles for the cancel button | `{}` |\n\n{/* | important | Control the sensitivity of the toast for screen readers | `false` |\n| closeButton | Adds a close button. | `false` |\n| invert | Dark toast in light mode and vice versa. | `false` | */}",toc:$R[5]=[$R[6]={id:"rendering-the-toast",title:"Rendering the toast",children:$R[7]=[]},$R[8]={id:"creating-toasts",title:"Creating toasts",children:$R[9]=[$R[10]={id:"success",title:"Success",children:$R[11]=[]},$R[12]={id:"error",title:"Error",children:$R[13]=[]},$R[14]={id:"action",title:"Action",children:$R[15]=[]},$R[16]={id:"cancel",title:"Cancel",children:$R[17]=[]},$R[18]={id:"promise",title:"Promise",children:$R[19]=[]},$R[20]={id:"loading",title:"Loading",children:$R[21]=[]}]},$R[22]={id:"other",title:"Other",children:$R[23]=[$R[24]={id:"updating-toasts",title:"Updating toasts",children:$R[25]=[]},$R[26]={id:"on-close-callback",title:"On Close Callback",children:$R[27]=[]}]},$R[28]={id:"api-reference",title:"API Reference",children:$R[29]=[]}],matter:$R[30]={title:"toast()"}},matter:$R[30],raw:"---\ntitle: toast()\n---\n\nUse it to render a toast. You can call it from anywhere, even outside of Solid.js.\n\n## Rendering the toast\n\nYou can call it with just a string.\n\n```tsx\nimport { toast } from 'sonner';\n\ntoast('Hello World!');\n```\n\nOr provide an object as the second argument with more options. They will overwrite the options passed to [`\x3CToaster />`](/docs/toaster) if you have provided any.\n\n```jsx\nimport { toast } from 'sonner';\n\ntoast('My toast', {\n className: 'my-classname',\n description: 'My description',\n// duration: 5000,\n icon: \x3CMyIcon />,\n});\n```\n\n## Creating toasts\n\n### Success\n\nRenders a checkmark icon in front of the message.\n\n```jsx\ntoast.success('My success toast');\n```\n\n### Error\n\nRenders an error icon in front of the message.\n\n```jsx\ntoast.error('My error toast');\n```\n\n### Action\n\nRenders a primary button, clicking it will close the toast and run the callback passed via `onClick`. You can prevent the toast from closing by calling `event.preventDefault()` in the `onClick` callback.\n\n```jsx\ntoast('My action toast', {\n action: {\n label: 'Action',\n onClick: () => console.log('Action!'),\n },\n});\n```\n\n### Cancel\n\nRenders a secondary button, clicking it will close the toast and run the callback passed via `onClick`.\n\n```jsx\ntoast('My cancel toast', {\n cancel: {\n label: 'Cancel',\n onClick: () => console.log('Cancel!'),\n },\n});\n```\n\n### Promise\n\nStarts in a loading state and will update automatically after the promise resolves or fails.\nYou can pass a function to the success/error messages to incorporate the result/error of the promise.\n\n```jsx\ntoast.promise(myPromise, {\n loading: 'Loading...',\n success: (data) => {\n return `${data.name} toast has been added`;\n },\n error: 'Error',\n});\n```\n\n### Loading\n\nRenders a toast with a loading spinner. Useful when you want to handle various states yourself instead of using a promise toast.\n\n```jsx\ntoast.loading('Loading data');\n```\n\n{/* ### Custom\n\nYou can pass jsx as the first argument instead of a string to render a custom toast while maintaining default styling.\n\n```jsx\ntoast(\x3Cdiv>A custom toast with default styling\x3C/div>, { duration: 5000 });\n``` */}\n\n{/* ### Headless\n\nUse it to render an unstyled toast with custom jsx while maintaining the functionality. This function receives the `Toast` as an argument, giving you access to all properties.\n\n```jsx\ntoast.custom((t) => (\n \x3Cdiv>\n This is a custom component \x3Cbutton onClick={() => toast.dismiss(t)}>close\x3C/button>\n \x3C/div>\n));\n``` */}\n\n### Dynamic Position\n\nYou can change the position of the toast dynamically by passing a `position` prop to the toast\nfunction. It will not affect the positioning of other toasts.\n\n```jsx\n// Available positions:\n// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right\ntoast('Hello World', {\n position: 'top-center',\n});\n```\n\n## Other\n\n### Updating toasts\n\nYou can update a toast by using the `toast` function and passing it the id of the toast you want to update, the rest stays the same.\n\n```jsx\nconst toastId = toast('Sonner');\n\ntoast.success('Toast has been updated', {\n id: toastId,\n});\n```\n\n### On Close Callback\n\nYou can pass `onDismiss` and `onAutoClose` callbacks to each toast. `onDismiss` gets fired when either the close button gets clicked or the toast is swiped. `onAutoClose` fires when the toast disappears automatically after it's timeout (`duration` prop).\n\n```jsx\ntoast('Event has been created', {\n onDismiss: (t) => console.log(`Toast with id ${t.id} has been dismissed`),\n onAutoClose: (t) => console.log(`Toast with id ${t.id} has been closed automatically`),\n});\n```\n\n{/* ### Dismissing toasts programmatically\n\nTo remove a toast programmatically use `toast.dismiss(id)`. The `toast()` function return the id of the toast.\n\n```jsx\nconst toastId = toast('Event has been created');\n\ntoast.dismiss(toastId);\n``` */}\n\nYou can also dismiss all toasts at once by calling `toast.dismiss()` without an id.\n\n```jsx\ntoast.dismiss();\n```\n\n## API Reference\n\n| Property | Description | Default |\n| :----------------- | :----------------------------------------------------------------------------------------------------: | -------------: |\n| description | Toast's description, renders underneath the title. | `-` |\n| position | Position of the toast. | `bottom-right` |\n| duration | Time in milliseconds that should elapse before automatically closing the toast. | `4000` |\n| dismissible | If `false`, it'll prevent the user from dismissing the toast. | `true` |\n| icon | Icon displayed in front of toast's text, aligned vertically. | `-` |\n| action | Renders a primary button, clicking it will close the toast. | `-` |\n| cancel | Renders a secondary button, clicking it will close the toast. | `-` |\n| id | Custom id for the toast. | `-` |\n| onDismiss | The function gets called when either the close button is clicked, or the toast is swiped. | `-` |\n| onAutoClose | Function that gets called when the toast disappears automatically after it's timeout (duration` prop). | `-` |\n| unstyled | Removes the default styling, which allows for easier customization. | `false` |\n| actionButtonStyles | Styles for the action button | `{}` |\n| cancelButtonStyles | Styles for the cancel button | `{}` |\n\n{/* | important | Control the sensitivity of the toast for screen readers | `false` |\n| closeButton | Adds a close button. | `false` |\n| invert | Dark toast in light mode and vice versa. | `false` | */}",toc:$R[5],[$R[31]=Symbol.toStringTag]:"Module"})),Object.seal($R[3]),$R[2]);$R[32]($R[0],!0);