Updates

Co-Authored-By: Claude Opus 5.5 <[email protected]>

components/elements/HtmlToReactComponent.tsx

@@ -1,10 +1,9 @@
 import type { DetailedHTMLProps, HTMLAttributes } from "react";
-import HtmlToReact from "html-to-react";
 import { twMerge } from "tailwind-merge";
 
-export type TWUI_TOGGLE_PROPS = DetailedHTMLProps<
-    HTMLAttributes<HTMLDivElement>,
-    HTMLDivElement
+export type TWUI_TOGGLE_PROPS = Omit<
+    DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    "dangerouslySetInnerHTML"
 > & {
     html: string;
     componentRef?: React.RefObject<any>;
@@ -12,6 +11,9 @@ export type TWUI_TOGGLE_PROPS = DetailedHTMLProps<
 
 /**
  * # HTML String to React Component
+ * Renders the HTML as-is, so only pass trusted or already-escaped HTML.
+ * Uses `dangerouslySetInnerHTML` rather than an HTML-to-React parser so
+ * it works in both server and browser bundles.
  * @className_wrapper twui-html-react
  */
 export default function HtmlToReactComponent({
@@ -19,16 +21,12 @@ export default function HtmlToReactComponent({
     componentRef,
     ...props
 }: TWUI_TOGGLE_PROPS) {
-    const htmlToReactParser = HtmlToReact.Parser();
-    const reactElement = htmlToReactParser.parse(html);
-
     return (
         <div
             {...props}
-            className={twMerge("", props.className)}
+            className={twMerge("twui-html-react", props.className)}
             ref={componentRef}
-        >
-            {reactElement}
-        </div>
+            dangerouslySetInnerHTML={{ __html: html }}
+        />
     );
 }

components/elements/Toast.tsx

@@ -77,9 +77,9 @@ export default function Toast({
                 "fixed bottom-4 right-4 z-[250] border-none",
                 "pl-6 pr-8 py-4 bg-primary dark:bg-primary-dark",
                 color == "success"
-                    ? "bg-success-dark dark:bg-success-dark twui-toast-success"
+                    ? "bg-success dark:bg-success-dark-fill twui-toast-success"
                     : color == "error"
-                      ? "bg-error dark:bg-error-dark twui-toast-error"
+                      ? "bg-error dark:bg-error-dark-fill twui-toast-error"
                       : "",
                 props.className,
                 "twui-toast",