@fewangsit/wangsvue-presets 1.0.108-alpha.0 → 1.0.108

package/fixedasset/index.es.js

@@ -1,7 +1,7 @@
 var j = Object.defineProperty;
-var A = (e, t, r) => t in e ? j(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
-var b = (e, t, r) => A(e, typeof t != "symbol" ? t + "" : t, r);
-const T = {
+var A = (e, r, t) => r in e ? j(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t;
+var b = (e, r, t) => A(e, typeof r != "symbol" ? r + "" : r, t);
+const _ = {
   accordiontab: {
     header: ({ props: e }) => ({
       class: [
@@ -63,7 +63,7 @@ const T = {
       leaveToClass: "max-h-0"
     }
   }
-}, _ = {
+}, P = {
   root: ({ props: e }) => ({
     class: [
       "relative",
@@ -79,7 +79,7 @@ const T = {
       }
     ]
   }),
-  container: ({ props: e, state: t }) => ({
+  container: ({ props: e, state: r }) => ({
     class: [
       // Font
       "font-sans sm:text-sm leading-none",
@@ -102,8 +102,8 @@ const T = {
       // States
       "focus:outline-none focus:outline-offset-0",
       {
-        "ring-1 ring-inset ring-surface-300": !t.focused,
-        "ring-2 ring-primary-500": t.focused
+        "ring-1 ring-inset ring-surface-300": !r.focused,
+        "ring-2 ring-primary-500": r.focused
       },
       // Transition
       "transition duration-200 ease-in-out",
@@ -292,9 +292,9 @@ const T = {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, N = {
-  root: ({ props: e, parent: t }) => {
-    var r, i, n;
+}, T = {
+  root: ({ props: e, parent: r }) => {
+    var t, a, n;
     return {
       class: [
         // Font
@@ -313,17 +313,17 @@ const T = {
           "w-12 h-12": e.size == "large",
           "w-16 h-16": e.size == "xlarge"
         },
-        { "-ml-4": ((r = t.instance.$style) == null ? void 0 : r.name) == "avatargroup" },
+        { "-ml-4": ((t = r.instance.$style) == null ? void 0 : t.name) == "avatargroup" },
         // Shapes
         {
           "rounded-lg": e.shape == "square",
           "rounded-full": e.shape == "circle"
         },
-        { "border-[0.5px]": ((i = t.instance.$style) == null ? void 0 : i.name) == "avatargroup" },
+        { "border-[0.5px]": ((a = r.instance.$style) == null ? void 0 : a.name) == "avatargroup" },
         // Colors
         "bg-general-300",
         {
-          "border-gray-100": ((n = t.instance.$style) == null ? void 0 : n.name) == "avatargroup"
+          "border-gray-100": ((n = r.instance.$style) == null ? void 0 : n.name) == "avatargroup"
         },
         "text-white"
       ]
@@ -332,13 +332,13 @@ const T = {
   image: {
     class: "h-full w-full rounded-full"
   }
-}, I = {
+}, N = {
   root: {
     class: "flex items-center ml-4",
     "data-wv-name": "usergroup",
     "data-wv-section": "root"
   }
-}, c = {
+}, d = {
   root: ({ props: e }) => ({
     class: [
       // Alignment
@@ -349,23 +349,23 @@ const T = {
       "rounded-lg	",
       // Color
       {
-        "text-general-400 bg-general-100": e.disabled,
-        "text-success-500 bg-success-100": !e.disabled && e.severity == "success",
-        "text-primary-500 bg-primary-50": !e.disabled && (e.severity == null || e.severity == "primary"),
-        "text-grayscale-800 bg-grayscale-200": !e.disabled && e.severity == "dark",
-        "text-warning-600 bg-warning-100": !e.disabled && e.severity == "warning",
-        "text-danger-600 bg-danger-100": !e.disabled && e.severity == "danger"
+        "text-primary-500 bg-primary-50 dark:text-primary-800 dark:bg-primary-300": !e.disabled && (e.severity === "primary" || e.severity === null),
+        "text-success-500 bg-success-100 dark:text-success-800 dark:bg-success-200": !e.disabled && e.severity === "success",
+        "text-warning-600 bg-warning-100 dark:text-warning-800 dark:bg-warning-400": !e.disabled && e.severity === "warning",
+        "text-danger-600 bg-danger-100 dark:text-danger-700 dark:bg-danger-200": !e.disabled && e.severity === "danger",
+        "text-grayscale-800 bg-grayscale-200 dark:text-grayscale-50 dark:bg-grayscale-800": !e.disabled && e.severity === "dark",
+        "text-general-400 bg-general-100 dark:text-general-100 dark:bg-general-400": e.disabled
       }
     ],
     "data-wv-name": "badge",
     "data-wv-section": "root"
   }),
-  input: ({ props: e, context: t }) => ({
+  input: ({ props: e, context: r }) => ({
     class: [
       "text-nowrap whitespace-nowrap font-semibold text-[9px] leading-3 tracking-[0.02em]",
       {
         "caret-primary-700": e.editable,
-        "cursor-default": !!t.badgeTooltip
+        "cursor-default": !!r.badgeTooltip
       }
     ]
   }),
@@ -373,18 +373,18 @@ const T = {
     class: [
       "!p-0 !w-[10px] !h-[10px] ml-1",
       {
-        "text-primary-500": !e.disabled && (!e.badgeSeverity || e.badgeSeverity === "primary"),
-        "text-success-500": !e.disabled && e.badgeSeverity === "success",
-        "text-danger-600": !e.disabled && e.badgeSeverity === "danger",
-        "text-warning-600": !e.disabled && e.badgeSeverity === "warning",
-        "text-grayscale-800 hover:bg-grayscale-300": !e.disabled && e.badgeSeverity === "dark",
-        "text-general-400": e.disabled
+        "text-primary-500 dark:text-primary-800": !e.disabled && (!e.badgeSeverity || e.badgeSeverity === "primary"),
+        "text-success-500 dark:text-success-800": !e.disabled && e.badgeSeverity === "success",
+        "text-danger-600 dark:text-danger-700": !e.disabled && e.badgeSeverity === "danger",
+        "text-warning-600 dark:text-warning-800": !e.disabled && e.badgeSeverity === "warning",
+        "text-grayscale-800 hover:bg-grayscale-50 dark:text-grayscale-50 dark:hover:bg-grayscale-700": !e.disabled && e.badgeSeverity === "dark",
+        "text-general-400 dark:text-general-100": e.disabled
       }
     ],
     "icon-class": "w-[10px] h-[10px] !text-[10px]",
     "data-wv-section": "removebutton"
   })
-}, P = {
+}, I = {
   root: ({ context: e }) => ({
     class: [
       // Font
@@ -423,7 +423,7 @@ const T = {
     ]
   })
 }, S = {
-  root: ({ props: e, context: t }) => ({
+  root: ({ props: e, context: r }) => ({
     class: [
       "relative",
       // Alignments
@@ -459,13 +459,13 @@ const T = {
       },
       // Plain Button
       {
-        "text-white bg-gray-500 ring-1 ring-gray-500": e.plain && !e.outlined && !e.text
+        "text-white dark:text-black bg-gray-500 dark:bg-gray-300 ring-1 ring-gray-500 dark:ring-gray-300": e.plain && !e.outlined && !e.text
       },
       // Plain Text Button
-      { "text-primary-500": e.plain && e.text },
+      { "text-primary-500 dark:text-primary-300": e.plain && e.text },
       // Plain Outlined Button
       {
-        "text-primary-500 ring-1 ring-gray-500": e.plain && e.outlined
+        "text-primary-500 dark:text-primary-300 ring-1 ring-gray-500 dark:ring-gray-300": e.plain && e.outlined
       },
       // Text Button
       { "bg-transparent ring-transparent": e.text && !e.plain },
@@ -474,45 +474,39 @@ const T = {
       // --- Severity Buttons ---
       // Secondary Button
       {
-        "text-white": !e.link && e.severity === "secondary" && !e.text && !e.outlined && !e.plain,
-        "bg-grayscale-900": !e.link && e.severity === "secondary" && !e.text && !e.outlined && !e.plain,
-        "ring-1 ring-grayscale-900": !e.link && e.severity === "secondary" && !e.text && !e.outlined && !e.plain
+        "text-white bg-grayscale-900 ring-1 ring-grayscale-900 dark:text-general-900 dark:bg-general-50 dark:ring-general-50": !e.link && e.severity === "secondary" && !e.text && !e.outlined && !e.plain
       },
       // Secondary Text Button
       {
-        "text-grayscale-900": e.text && e.severity === "secondary" && !e.plain
+        "text-grayscale-900 dark:text-general-50": e.text && e.severity === "secondary" && !e.plain
       },
       // Secondary Outlined Button
       {
-        "text-grayscale-900 ring-1 ring-grayscale-900": e.outlined && e.severity === "secondary" && !e.plain
+        "text-grayscale-900 ring-1 ring-grayscale-900 dark:text-general-50 dark:ring-general-50": e.outlined && e.severity === "secondary" && !e.plain
       },
       // Primary Blue Button
       {
-        "text-white": (e.severity == null || e.severity === "primary") && !e.text && !e.outlined && !e.plain,
-        "bg-primary-500": (e.severity == null || e.severity === "primary") && !e.text && !e.outlined && !e.plain,
-        "ring-1 ring-primary-500": (e.severity == null || e.severity === "primary") && !e.text && !e.outlined && !e.plain
+        "text-white bg-primary-500 ring-1 ring-primary-500 dark:text-primary-800 dark:bg-primary-300 dark:ring-primary-300": (e.severity == null || e.severity === "primary") && !e.text && !e.outlined && !e.plain
       },
       // Primary Blue Text Button
       {
-        "text-primary-500": e.text && (e.severity == null || e.severity === "primary") && !e.plain
+        "text-primary-500 dark:text-primary-300": e.text && (e.severity == null || e.severity === "primary") && !e.plain
       },
       // Primary Blue Outlined Button
       {
-        "text-primary-500 ring-1 ring-primary-500 hover:bg-primary-500/20": e.outlined && (e.severity == null || e.severity === "primary") && !e.plain
+        "text-primary-500 ring-1 ring-primary-500 hover:bg-primary-500/20 dark:text-primary-300 dark:ring-primary-300 dark:hover:bg-primary-900/40": e.outlined && (e.severity == null || e.severity === "primary") && !e.plain
       },
       // Success Button
       {
-        "text-white": e.severity === "success" && !e.text && !e.outlined && !e.plain,
-        "bg-success-500": e.severity === "success" && !e.text && !e.outlined && !e.plain,
-        "ring-1 ring-success-500": e.severity === "success" && !e.text && !e.outlined && !e.plain
+        "text-white bg-success-500 ring-1 ring-success-500 dark:text-success-900 dark:bg-success-300 dark:ring-success-300": e.severity === "success" && !e.text && !e.outlined && !e.plain
       },
       // Success Text Button
       {
-        "text-success-500": e.text && e.severity === "success" && !e.plain
+        "text-success-500 dark:text-success-300": e.text && e.severity === "success" && !e.plain
       },
       // Success Outlined Button
       {
-        "text-success-500 ring-1 ring-success-500 hover:bg-success-300/20": e.outlined && e.severity === "success" && !e.plain
+        "text-success-500 ring-1 ring-success-500 hover:bg-success-300/20 dark:text-success-300 dark:ring-success-300 dark:hover:bg-success-900/40": e.outlined && e.severity === "success" && !e.plain
       },
       // Info Button
       {
@@ -530,17 +524,15 @@ const T = {
       },
       // Warning Button
       {
-        "text-white": e.severity === "warning" && !e.text && !e.outlined && !e.plain,
-        "bg-warning-500": e.severity === "warning" && !e.text && !e.outlined && !e.plain,
-        "ring-1 ring-warning-500": e.severity === "warning" && !e.text && !e.outlined && !e.plain
+        "text-white bg-warning-500 ring-1 ring-warning-500 dark:text-warning-800 dark:bg-warning-300 dark:ring-warning-300": e.severity === "warning" && !e.text && !e.outlined && !e.plain
       },
       // Warning Text Button
       {
-        "text-warning-500": e.text && e.severity === "warning" && !e.plain
+        "text-warning-500 dark:text-warning-300": e.text && e.severity === "warning" && !e.plain
       },
       // Warning Outlined Button
       {
-        "text-warning-500 ring-1 ring-warning-500 hover:bg-warning-300/20": e.outlined && e.severity === "warning" && !e.plain
+        "text-warning-500 ring-1 ring-warning-500 hover:bg-warning-300/20 dark:text-warning-300 dark:ring-warning-300 dark:hover:bg-warning-900/40": e.outlined && e.severity === "warning" && !e.plain
       },
       // Help Button
       {
@@ -558,17 +550,15 @@ const T = {
       },
       // Danger Button
       {
-        "text-white": e.severity === "danger" && !e.text && !e.outlined && !e.plain,
-        "bg-danger-500": e.severity === "danger" && !e.text && !e.outlined && !e.plain,
-        "ring-1 ring-danger-500": e.severity === "danger" && !e.text && !e.outlined && !e.plain
+        "text-white bg-danger-500 ring-1 ring-danger-500 dark:text-danger-800 dark:bg-danger-200 dark:ring-danger-200": e.severity === "danger" && !e.text && !e.outlined && !e.plain
       },
       // Danger Text Button
       {
-        "text-danger-500": e.text && e.severity === "danger" && !e.plain
+        "text-danger-500 dark:text-danger-200": e.text && e.severity === "danger" && !e.plain
       },
       // Danger Outlined Button
       {
-        "text-danger-500 ring-1 ring-danger-500 hover:bg-danger-300/20": e.outlined && e.severity === "danger" && !e.plain
+        "text-danger-500 ring-1 ring-danger-500 hover:bg-danger-300/20 dark:text-danger-200 dark:ring-danger-200 dark:hover:bg-danger-900/40": e.outlined && e.severity === "danger" && !e.plain
       },
       // Contrast Button
       {
@@ -587,29 +577,29 @@ const T = {
       // --- Severity Button States ---
       "focus:outline-none focus:outline-offset-0",
       // Link
-      { "focus:ring-grayscale-900": e.link },
+      { "focus:ring-grayscale-900 dark:focus:ring-grayscale-100": e.link },
       // Plain
       {
-        "hover:bg-gray-600 hover:ring-gray-600": e.plain && !e.outlined && !e.text
+        "hover:bg-gray-600 dark:hover:bg-gray-300 hover:ring-gray-600 dark:hover:ring-gray-300": e.plain && !e.outlined && !e.text
       },
       // Text & Outlined Button
       {
-        "hover:bg-primary-500/20": e.plain && (e.text || e.outlined)
+        "hover:bg-primary-500/20 dark:hover:bg-primary-300/20": e.plain && (e.text || e.outlined)
       },
       // Secondary
       {
-        "hover:bg-grayscale-900/[8%] active:bg-grayscale-900/[12%] ": e.severity === "secondary",
-        "hover:shadow-hover active:!shadow-none hover:!bg-grayscale-900/90 active:bg-grayscale-900/90 hover:ring-0": !e.link && e.severity === "secondary" && !e.text && !e.outlined && !e.plain
+        "hover:bg-grayscale-900/[8%] active:bg-grayscale-900/[12%] dark:hover:bg-grayscale-50/[8%] dark:active:bg-grayscale-50/[12%]": e.severity === "secondary",
+        "hover:shadow-hover active:!shadow-none hover:!bg-grayscale-900/90 active:bg-grayscale-900/90 dark:hover:!bg-grayscale-50/90 dark:active:!bg-grayscale-50/90 hover:ring-0": !e.link && e.severity === "secondary" && !e.text && !e.outlined && !e.plain
       },
       // Primary
       {
-        "hover:bg-primary-500/[8%] active:bg-primary-500/[12%] ": e.severity == null || e.severity === "primary",
-        "hover:shadow-hover active:!shadow-none hover:!bg-primary-500/90 active:bg-primary-500/90 hover:ring-0": !e.link && (e.severity == null || e.severity === "primary") && !e.text && !e.outlined && !t.disabled && !e.plain
+        "hover:bg-primary-500/[8%] active:bg-primary-500/[12%] dark:hover:bg-primary-300/[8%] dark:active:bg-primary-300/[12%]": e.severity == null || e.severity === "primary",
+        "hover:shadow-hover active:!shadow-none hover:!bg-primary-500/90 active:bg-primary-500/90 dark:bg-primary-300/90 dark:active:bg-primary-300/90 hover:ring-0": !e.link && (e.severity == null || e.severity === "primary") && !e.text && !e.outlined && !r.disabled && !e.plain
       },
       // Success
       {
-        "hover:bg-success-500/[8%] active:bg-success-500/[12%] ": e.severity === "success",
-        "hover:shadow-hover active:!shadow-none hover:!bg-success-500/90 active:bg-success-500/90 hover:ring-0": !e.link && e.severity === "success" && !e.text && !e.outlined && !e.plain
+        "hover:bg-success-500/[8%] active:bg-success-500/[12%] dark:hover:bg-success-300/[8%] dark:active:bg-success-300/[12%]": e.severity === "success",
+        "hover:shadow-hover active:!shadow-none hover:!bg-success-500/90 active:bg-success-500/90 dark:bg-success-300/90 dark:active:bg-success-300/90 hover:ring-0": !e.link && e.severity === "success" && !e.text && !e.outlined && !e.plain
       },
       // Info
       {
@@ -624,12 +614,12 @@ const T = {
       },
       // Warning
       {
-        "hover:bg-warning-500/[8%] active:bg-warning-500/[12%] ": e.severity === "warning",
-        "hover:shadow-hover active:!shadow-none hover:!bg-warning-500/90 active:bg-warning-500/90 hover:ring-0": !e.link && e.severity === "warning" && !e.text && !e.outlined && !e.plain
+        "hover:bg-warning-500/[8%] active:bg-warning-500/[12%] dark:hover:bg-warning-300/[8%] dark:active:bg-warning-300/[12%]": e.severity === "warning",
+        "hover:shadow-hover active:!shadow-none hover:!bg-warning-500/90 active:bg-warning-500/90 dark:hover:!bg-warning-300/90 dark:active:!bg-warning-300/90 hover:ring-0": !e.link && e.severity === "warning" && !e.text && !e.outlined && !e.plain
       },
       // Text & Outlined Button
       {
-        "hover:bg-warning-300/20": (e.text || e.outlined) && e.severity === "warning" && !e.plain
+        "hover:bg-warning-300/20 dark:hover:bg-warning-900/40": (e.text || e.outlined) && e.severity === "warning" && !e.plain
       },
       // Help
       {
@@ -644,19 +634,19 @@ const T = {
       },
       // Danger
       {
-        "hover:bg-danger-500/[8%] active:bg-danger-500/[12%] ": e.severity === "danger",
-        "hover:shadow-hover active:!shadow-none hover:!bg-danger-500/90 active:bg-danger-500/90 hover:ring-0": !e.link && e.severity === "danger" && !e.text && !e.outlined && !e.plain
+        "hover:bg-danger-500/[8%] active:bg-danger-500/[12%] dark:hover:bg-danger-300/[8%] dark:active:bg-danger-300/[12%]": e.severity === "danger",
+        "hover:shadow-hover active:!shadow-none hover:!bg-danger-500/90 active:bg-danger-500/90 dark:bg-danger-300/90 dark:active:bg-danger-300/90 hover:ring-0": !e.link && e.severity === "danger" && !e.text && !e.outlined && !e.plain
       },
       // Text & Outlined Button
       {
-        "hover:bg-danger-300/20": (e.text || e.outlined) && e.severity === "danger" && !e.plain
+        "hover:bg-danger-300/20 dark:hover:bg-danger-900/40": (e.text || e.outlined) && e.severity === "danger" && !e.plain
       },
       // Contrast
       {
         "hover:bg-surface-800 hover:ring-surface-800": e.severity === "contrast" && !e.text && !e.outlined && !e.plain
       },
       {
-        "focus:ring-primary-500": e.severity === "contrast"
+        "focus:ring-primary-500 dark:focus:ring-primary-300": e.severity === "contrast"
       },
       // Text & Outlined Button
       {
@@ -664,10 +654,10 @@ const T = {
       },
       // Disabled
       {
-        "pointer-events-none cursor-default": t.disabled,
-        "!text-general-300": t.disabled && (e.outlined || e.text),
-        "!ring-general-300": t.disabled && e.outlined,
-        "!bg-general-300 !text-white !ring-0": t.disabled && !e.outlined && !e.text
+        "pointer-events-none cursor-default": r.disabled,
+        "!text-general-300 dark:!text-grayscale-500": r.disabled && (e.outlined || e.text),
+        "!ring-general-300 dark:!ring-grayscale-700": r.disabled && e.outlined,
+        "!bg-general-300 !text-white !ring-0 dark:!bg-grayscale-700 dark:!text-grayscale-500": r.disabled && !e.outlined && !e.text
       },
       // Transitions
       "transition duration-200 ease-in-out",
@@ -717,13 +707,13 @@ const T = {
       }
     ]
   })
-}, F = {
+}, $ = {
   root: ({ props: e }) => ({
     class: [
-      "rounded ring-1 ring-success-500 p-[5px] ring-inset",
-      "focus-within:ring-2 focus-within:ring-primary-500 focus-within:outline-none",
+      "rounded ring-1 ring-success-500 dark:ring-success-300 p-[5px] ring-inset",
+      "focus-within:ring-2 focus-within:ring-primary-500 dark:focus-within:ring-primary-300 focus-within:outline-none",
       "flex gap-1 items-center",
-      "text-success-500",
+      "text-success-500 dark:text-success-300",
       { "px-3": e.label }
     ],
     "data-wv-name": "buttondownload",
@@ -734,54 +724,51 @@ const T = {
     "data-wv-section": "icon",
     severity: "success"
   }
-}, V = {
+}, F = {
   root: ({ context: e }) => ({
     class: [
-      "rounded ring-1 ring-general-500 p-[5px] ring-inset",
+      "rounded ring-1 ring-general-500 dark:ring-general-100 p-[5px] ring-inset",
       "focus-within:ring-2 focus-within:outline-none",
-      { "bg-general-500": e.active }
+      { "bg-general-500 dark:bg-general-300": e.active }
     ],
     "data-wv-name": "buttonfilter",
     "data-wv-section": "root"
   }),
   icon: ({ context: e }) => ({
-    class: [
-      "text-base",
-      { "text-general-400": !e.active, "text-white": e.active }
-    ],
+    class: ["text-base"],
     "data-wv-section": "icon"
   })
-}, U = {
+}, V = {
   buttontrigger: {
     root: ({ context: e }) => ({
       class: [
         { "w-max": !e.showSearchInput },
-        "ring-1 ring-general-500 rounded p-[5px] ring-inset",
-        "focus-within:ring-2 focus-within:ring-primary-500 focus-within:outline-none"
+        "ring-1 ring-general-500 dark:ring-general-100 rounded p-[5px] ring-inset",
+        "focus-within:ring-2 focus-within:ring-primary-500 dark:focus-within:ring-primary-300 focus-within:outline-none"
       ],
       "data-wv-section": "buttontrigger"
     }),
     icon: {
-      class: "w-4 h-4 text-general-400 shrink-0"
+      class: "w-4 h-4 text-general-400 dark:text-general-100 shrink-0"
     }
   },
   collapsebutton: {
     root: ({ context: e }) => ({
       class: [
         { "w-max": !e.showSearchInput },
-        "focus-within:ring-2 focus-within:ring-primary-500 focus-within:outline-none rounded"
+        "focus-within:ring-2 focus-within:ring-primary-500 dark:focus-within:ring-primary-300 focus-within:outline-none rounded"
       ],
       "data-wv-section": "collapsebutton"
     }),
     icon: {
-      class: "w-4 h-4 text-general-400 shrink-0"
+      class: "w-4 h-4 text-general-400 dark:text-general-100 shrink-0"
     }
   },
   resetbutton: {
     root: ({ query: e }) => ({
       class: [
         { invisible: !e },
-        "focus-within:ring-2 focus-within:ring-primary-500 focus-within:outline-none rounded"
+        "focus-within:ring-2 focus-within:ring-primary-500 dark:focus-within:ring-primary-300 focus-within:outline-none rounded"
       ],
       "data-wv-section": "resetbutton"
     }),
@@ -793,14 +780,14 @@ const T = {
       { show: e.showSearchInput },
       "grid grid-cols-[max-content,auto,max-content] items-center gap-1",
       "py-[5px] px-2 h-max max-w-[224px]",
-      "ring-inset ring-1 ring-general-500 rounded focus-within:outline-none focus-within:ring-primary-500 focus-within:ring-2"
+      "ring-inset ring-1 ring-general-500 dark:ring-general-300 rounded focus-within:outline-none focus-within:ring-primary-500 dark:focus-within:ring-primary-300 focus-within:ring-2"
     ],
     "data-wv-section": "form"
   }),
   inputtext: {
     class: "!h-max !py-0 !px-0"
   }
-}, E = {
+}, U = {
   root: ["w-max"],
   button: {
     class: [
@@ -831,21 +818,24 @@ const T = {
       "text-xs font-normal placeholder:font-normal",
       // Colors
       {
-        "text-grayscale-900": !e.disabled,
-        "text-general-200": e.disabled
+        "text-grayscale-900 dark:text-white": !e.disabled,
+        "text-general-200 dark:text-grayscale-500": e.disabled
       },
-      "placeholder:text-general-200",
+      "bg-transparent dark:bg-transparent",
+      "placeholder:text-general-200 dark:placeholder:text-general-600",
       // Shape
       "appearance-none",
       // Transitions
       "transition-colors",
       "duration-200",
       // States
-      "outline-none focus:ring-primary-400"
+      "outline-none focus:ring-primary-400 dark:focus:ring-primary-400"
     ]
   }),
   inputicon: {
-    class: ["w-4 h-4 text-grayscale-900 peer-disabled:text-general-300"]
+    class: [
+      "w-4 h-4 text-grayscale-900 dark:text-white peer-disabled:text-general-300 dark:peer-disabled:text-grayscale-700"
+    ]
   },
   dropdownbutton: {
     root: {
@@ -858,13 +848,10 @@ const T = {
         // Size
         "px-2.5 py-1.5 leading-none",
         // Colors
-        "text-surface-600",
-        "bg-surface-100",
-        "ring-1 ring-inset ring-surface-300",
+        "ring-1 ring-inset",
         // States
-        "hover:bg-surface-200",
         "focus:outline-none focus:outline-offset-0 focus:ring-1",
-        "focus:ring-primary-400"
+        "focus:ring-primary-400 dark:focus:ring-primary-400"
       ]
     }
   },
@@ -875,27 +862,27 @@ const T = {
       "flex flex-col justify-start items-center",
       // Size
       "h-max p-6 gap-2.5",
-      "bg-white w-[272px] !min-w-[272px]",
+      "w-[272px] !min-w-[272px]",
       // Shape
       "rounded-lg",
       // Colors
-      "bg-white shadow-panel"
+      "bg-white dark:bg-grayscale-900 shadow-panel"
     ]
   }),
   datepickerMask: {
     class: [
       "fixed top-0 left-0 w-full h-full",
       "flex items-center justify-center",
-      "bg-black bg-opacity-90"
+      "bg-black dark:bg-white bg-opacity-90"
     ]
   },
-  header: ({ props: e, state: t }) => {
-    var r;
+  header: ({ props: e, state: r }) => {
+    var t;
     return {
       class: [
         "h-6 w-full",
         {
-          hidden: !((r = e.dateFormat) != null && r.toString().toLowerCase().includes("y")) && t.currentView === "month"
+          hidden: !((t = e.dateFormat) != null && t.toString().toLowerCase().includes("y")) && r.currentView === "month"
         },
         //Font
         "text-xs font-normal",
@@ -904,8 +891,8 @@ const T = {
         // Shape
         "rounded-t-md",
         // Colors
-        "text-grayscale-900",
-        "bg-white"
+        "text-grayscale-900 dark:text-white",
+        "bg-white dark:bg-grayscale-900"
       ]
     };
   },
@@ -924,11 +911,11 @@ const T = {
       // Size
       "p-1.5 m-0",
       // Colors
-      "text-grayscale-900",
+      "text-grayscale-900 dark:text-white",
       "border-0 ",
-      "bg-transparent",
+      "bg-transparent dark:bg-transparent",
       // States
-      "hover:bg-general-50",
+      "hover:bg-general-50 dark:hover:bg-general-900",
       // Misc
       "cursor-pointer overflow-hidden"
     ]
@@ -952,36 +939,36 @@ const T = {
       //Font
       "text-xs font-normal",
       // Colors
-      "text-grayscale-900",
-      "bg-white",
+      "text-grayscale-900 dark:text-white",
+      "bg-white dark:bg-grayscale-900",
       // Transitions
       "transition duration-200",
       // Spacing
       "mr-1",
       // States
-      "hover:text-primary-400",
+      "hover:text-primary-400 dark:hover:text-primary-400",
       // Misc
       "cursor-pointer"
     ]
   },
   yearTitle: ({ props: e }) => {
-    var t;
+    var r;
     return {
       class: [
         {
-          hidden: !((t = e.dateFormat) != null && t.toString().toLowerCase().includes("y"))
+          hidden: !((r = e.dateFormat) != null && r.toString().toLowerCase().includes("y"))
         },
         //Font
         "text-xs font-normal",
         // Colors
-        "text-grayscale-900",
-        "bg-white",
+        "text-grayscale-900 dark:text-white",
+        "bg-white dark:bg-grayscale-900",
         // Transitions
         "transition duration-200",
         // Spacing
         "m-0 mr-1",
         // States
-        "hover:text-primary-600",
+        "hover:text-primary-600 dark:hover:text-primary-600",
         // Misc
         "cursor-pointer"
       ]
@@ -1001,11 +988,11 @@ const T = {
       // Size
       "p-1.5 m-0",
       // Colors
-      "text-grayscale-900",
+      "text-grayscale-900 dark:text-white",
       "border-0 ",
-      "bg-transparent",
+      "bg-transparent dark:bg-transparent",
       // States
-      "hover:bg-general-50",
+      "hover:bg-general-50 dark:hover:bg-general-900",
       // Misc
       "cursor-pointer overflow-hidden"
     ]
@@ -1020,7 +1007,7 @@ const T = {
       "m-0",
       "[&_th]:text-xs [&_td]:text-xs",
       "[&_th]:font-normal [&_td]:font-normal",
-      "[&_th]:text-grayscale-900 [&_td]:text-grayscale-900",
+      "[&_th]:text-grayscale-900 dark:[&_th]:text-white [&_td]:text-grayscale-900 dark:[&_td]:text-white",
       // Hide the other months day
       '[&_[data-p-other-month="true"]]:invisible'
     ]
@@ -1042,13 +1029,12 @@ const T = {
   weekheader: {
     class: [
       "leading-6 text-sm font-normal",
-      "text-surface-600/70",
       "opacity-40 cursor-default",
       "mb-2"
     ]
   },
   weeknumber: {
-    class: ["text-surface-600/70 font-normal", "opacity-40 cursor-default"]
+    class: ["font-normal", "opacity-40 cursor-default"]
   },
   weekday: {
     class: [
@@ -1075,14 +1061,11 @@ const T = {
       "border-transparent border",
       // Colors
       {
-        "text-surface-600/70 bg-transparent": !e.selected && !e.disabled,
-        "text-primary-400 ": e.selected && !e.disabled
+        "bg-transparent": !e.selected && !e.disabled,
+        "text-primary-400 dark:text-primary-400": e.selected && !e.disabled
       },
       // States
-      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50",
-      {
-        "hover:bg-surface-100": !e.disabled
-      },
+      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-400/50",
       {
         "opacity-40 cursor-default": e.disabled,
         "cursor-pointer": !e.disabled
@@ -1100,9 +1083,9 @@ const T = {
       "w-8 h-8",
       // Colors
       {
-        "bg-general-100": e.date.today && !e.selected,
-        "bg-primary-200 rounded-none": e.selected && !(e.firstSelected || e.lastSelected) && !e.disabled,
-        "rounded-full bg-primary-500 text-white": e.firstSelected || e.lastSelected
+        "bg-general-100 dark:bg-general-500": e.date.today && !e.selected,
+        "bg-primary-200 dark:bg-general-600 rounded-none": e.selected && !(e.firstSelected || e.lastSelected) && !e.disabled,
+        "rounded-full bg-primary-500 dark:bg-primary-300 text-white dark:text-grayscale-900": e.firstSelected || e.lastSelected
       },
       {
         "!rounded-full": !e.selected
@@ -1110,10 +1093,10 @@ const T = {
       // States
       "focus:outline-none focus-visible:outline-none",
       {
-        "hover:bg-primary-200/90": e.selected,
-        "hover:!bg-primary-500/90": e.lastSelected || e.firstSelected,
-        "hover:bg-general-50": !e.selected && !e.date.today,
-        "hover:bg-general-100/90": e.date.today
+        "hover:bg-primary-200/90 dark:hover:bg-primary-300/90": e.selected,
+        "hover:!bg-primary-500/90 dark:hover:!bg-primary-300/90": e.lastSelected || e.firstSelected,
+        "hover:bg-general-50 dark:hover:bg-general-900": !e.selected && !e.date.today,
+        "hover:bg-general-100/90 dark:hover:bg-general-500/90": e.date.today
       },
       {
         "opacity-40 cursor-default": e.disabled,
@@ -1139,17 +1122,17 @@ const T = {
       "!rounded-[20px]",
       // Colors
       {
-        "text-grayscale-900 bg-transparent": !e.selected && !e.disabled,
-        "bg-primary-400 text-white": e.selected && !e.disabled,
-        "cursor-default text-general-200": e.disabled
+        "text-grayscale-900 dark:text-white bg-transparent dark:bg-transparent": !e.selected && !e.disabled,
+        "bg-primary-400 dark:bg-primary-400 text-white dark:text-grayscale-900": e.selected && !e.disabled,
+        "cursor-default text-general-200 dark:text-general-600": e.disabled
       },
       /*
        * States
        * 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-400',
        */
       {
-        "hover:bg-primary-50": !e.selected && !e.disabled,
-        "hover:bg-primary-400/90": e.selected && !e.disabled
+        "hover:bg-primary-50 dark:hover:bg-grayscale-800": !e.selected && !e.disabled,
+        "hover:bg-primary-400/90 dark:hover:bg-primary-400/90": e.selected && !e.disabled
       },
       // Misc
       "cursor-pointer"
@@ -1173,17 +1156,17 @@ const T = {
       "!rounded-[20px]",
       // Colors
       {
-        "text-grayscale-900 bg-transparent": !e.selected && !e.disabled,
-        "bg-primary-400 text-white": e.selected && !e.disabled,
-        "cursor-default text-general-200": e.disabled
+        "text-grayscale-900 dark:text-white bg-transparent dark:bg-transparent": !e.selected && !e.disabled,
+        "bg-primary-400 dark:bg-primary-400 text-white dark:text-grayscale-900": e.selected && !e.disabled,
+        "cursor-default text-general-200 dark:text-general-600": e.disabled
       },
       /*
        * States
        * 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-400',
        */
       {
-        "hover:bg-primary-50": !e.selected && !e.disabled,
-        "hover:bg-primary-400/90": e.selected && !e.disabled
+        "hover:bg-primary-50 dark:hover:bg-grayscale-800": !e.selected && !e.disabled,
+        "hover:bg-primary-400/90 dark:hover:bg-primary-400/90": e.selected && !e.disabled
       },
       // Misc
       "cursor-pointer"
@@ -1265,7 +1248,7 @@ const T = {
   },
   timepickerlabel: {
     class: [
-      "w-[39px] h-[26px] flex justify-center items-center ring-general-200 rounded",
+      "w-[39px] h-[26px] flex justify-center items-center ring-general-200 dark:ring-general-200 rounded",
       {
         "ring-1": !x,
         "ring-[0.5px]": x
@@ -1281,9 +1264,9 @@ const T = {
       "p-0.5 m-0",
       "!h-6 !w-6",
       // Colors
-      "text-grayscale-900",
+      "text-grayscale-900 dark:text-white",
       "border-0",
-      "bg-transparent",
+      "bg-transparent dark:bg-transparent",
       /*
        * States
        * 'hover:text-surface-700',
@@ -1307,9 +1290,9 @@ const T = {
       "p-0.5 m-0",
       "!h-6 !w-6",
       // Colors
-      "text-grayscale-900",
+      "text-grayscale-900 dark:text-white",
       "border-0",
-      "bg-transparent",
+      "bg-transparent dark:bg-transparent",
       /*
        * States
        * 'hover:text-surface-700',
@@ -1326,7 +1309,9 @@ const T = {
     ]
   },
   container: {
-    class: ["text-grayscale-900 text-xs flex flex-col gap-1 w-full"]
+    class: [
+      "text-grayscale-900 dark:text-white text-xs flex flex-col gap-1 w-full"
+    ]
   },
   group: {
     class: []
@@ -1338,7 +1323,7 @@ const T = {
       // Spacing
       "pt-2.5 pb-1.5 px-0",
       // Shape
-      "border-t border-surface-200"
+      "border-t"
     ]
   },
   todaybutton: {
@@ -1351,8 +1336,8 @@ const T = {
         // Shape
         "",
         // Colors
-        "bg-transparent border-transparent",
-        "text-primary-400",
+        "bg-transparent dark:bg-transparent border-transparent dark:border-transparent",
+        "text-primary-400 dark:text-primary-400",
         // Transitions
         "transition-colors duration-200 ease-in-out",
         /*
@@ -1374,14 +1359,14 @@ const T = {
         "px-2.5 py-1.5 text-sm leading-none",
         // Shape
         // Colors
-        "bg-transparent border-transparent",
-        "text-primary-400",
+        "bg-transparent dark:bg-transparent border-transparent dark:border-transparent",
+        "text-primary-400 dark:text-primary-400",
         // Transitions
         "transition-colors duration-200 ease-in-out",
         // States
         "focus:outline-none focus:outline-offset-0 focus:ring-2 ring-inset",
-        "focus:ring-primary-400",
-        "hover:bg-primary-300/20",
+        "focus:ring-primary-400 dark:focus:ring-primary-400",
+        "hover:bg-primary-300/20 dark:hover:bg-primary-300/20",
         // Misc
         "cursor-pointer"
       ]
@@ -1393,15 +1378,15 @@ const T = {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, G = {
+}, E = {
   root: {
     class: [
       //Shape
       "rounded-lg p-6",
       "flex flex-col gap-y-3",
       //Color
-      "bg-white",
-      "text-general-800"
+      "bg-white dark:bg-grayscale-900",
+      "text-general-800 dark:text-general-100"
     ]
   },
   header: {
@@ -1422,7 +1407,7 @@ const T = {
   footer: {
     class: ["inline-flex gap-1 text-xs items-center"]
   }
-}, $ = {
+}, G = {
   root: {
     class: [
       // Flexbox
@@ -1537,7 +1522,7 @@ const T = {
     ]
   })
 }, O = {
-  root: ({ props: e, state: t }) => ({
+  root: ({ props: e, state: r }) => ({
     class: [
       // Display and Position
       "inline-flex",
@@ -1550,8 +1535,8 @@ const T = {
       "bg-surface-0",
       // States
       {
-        "ring-1 ring-inset ring-surface-300": !t.focused,
-        "ring-2 ring-inset ring-primary-500": t.focused
+        "ring-1 ring-inset ring-surface-300": !r.focused,
+        "ring-2 ring-inset ring-primary-500": r.focused
       },
       // Misc
       "cursor-default",
@@ -1716,9 +1701,9 @@ const T = {
     leaveToClass: "opacity-0"
   }
 }, L = {
-  button: ({ props: e, buttonClass: t }) => ({
+  button: ({ props: e, buttonClass: r }) => ({
     class: [
-      t,
+      r,
       "w-max",
       "rounded p-[5px] ring-inset",
       "focus-within:ring-2 focus-within:ring-primary-500 focus-within:outline-none",
@@ -1754,7 +1739,7 @@ const T = {
   buttondownload: {
     "data-wv-section": "changelog-dialog-button-download"
   }
-}, d = {
+}, c = {
   root: {
     class: [
       "relative",
@@ -1768,7 +1753,7 @@ const T = {
       "duration-200"
     ]
   },
-  box: ({ props: e, context: t }) => ({
+  box: ({ props: e, context: r }) => ({
     class: [
       // Alignment
       "flex",
@@ -1780,30 +1765,30 @@ const T = {
       "rounded",
       "border-2",
       // Colors
-      "text-white",
+      "text-white dark:text-grayscale-900",
       {
-        "border-general-200": e.disabled,
-        "border-general-100": !e.disabled && !t.checked && !t.partialChecked,
-        "bg-white": !(t.checked || t.partialChecked) && !e.disabled,
-        "bg-general-50": !(t.checked || t.partialChecked) && e.disabled,
-        "bg-primary-500 border-primary-500": (t.checked || t.partialChecked) && !e.disabled,
-        "bg-general-200": (t.checked || t.partialChecked) && e.disabled
+        "border-general-200 dark:border-general-400": e.disabled,
+        "border-general-100 dark:border-general-300": !e.disabled && !r.checked && !r.partialChecked,
+        "bg-white dark:bg-grayscale-800": !(r.checked || r.partialChecked) && !e.disabled,
+        "bg-general-50 dark:bg-general-300": !(r.checked || r.partialChecked) && e.disabled,
+        "bg-primary-500 border-primary-500 dark:bg-primary-300 dark:border-primary-300": (r.checked || r.partialChecked) && !e.disabled,
+        "bg-general-200 dark:bg-general-400": (r.checked || r.partialChecked) && e.disabled
       },
       {
-        "ring-8 ring-primary-400/[12%]": !e.disabled && t.focused
+        "ring-8 ring-primary-400/[12%] dark:ring-primary-200/[12%]": !e.disabled && r.focused
       },
       // States
       {
-        "peer-focus-visible:ring-8 peer-focus-visible:ring-offset-0 peer-focus-visible:ring-primary-400/[8%]": !e.disabled,
-        "peer-active:ring-8 peer-active:ring-offset-0 peer-active:ring-primary-400/[12%]": !e.disabled,
-        "cursor-default bg-general-50 border-general-200": e.disabled && !(t.checked || t.partialChecked),
-        "bg-general-200 border-general-200": e.disabled && (t.checked || t.partialChecked)
+        "peer-focus-visible:ring-8 peer-focus-visible:ring-offset-0 peer-focus-visible:ring-primary-400/[8%] dark:peer-focus-visible:ring-primary-200/[8%]": !e.disabled,
+        "peer-active:ring-8 peer-active:ring-offset-0 peer-active:ring-primary-400/[12%] dark:peer-active:ring-primary-200/[12%]": !e.disabled,
+        "cursor-default bg-general-50 dark:bg-general-300 border-general-200 dark:border-general-400": e.disabled && !(r.checked || r.partialChecked),
+        "bg-general-200 dark:bg-general-400 border-general-200 dark:border-general-400": e.disabled && (r.checked || r.partialChecked)
       },
       // Icon state
       {
-        "[&_i]:bg-transparent": e.disabled && !(t.checked || t.partialChecked),
-        "[&_i]:text-white": t.checked || t.partialChecked,
-        "[&_i]:text-transparent": !(t.checked || t.partialChecked)
+        "[&_i]:bg-transparent [&_i]:dark:bg-transparent": e.disabled && !(r.checked || r.partialChecked),
+        "[&_i]:text-white [&_i]:dark:text-grayscale-900": r.checked || r.partialChecked,
+        "[&_i]:text-transparent [&_i]:dark:text-transparent": !(r.checked || r.partialChecked)
       },
       // Transitions
       "transition-all",
@@ -1857,12 +1842,12 @@ const T = {
   label: ({ props: e }) => ({
     class: [
       "flex items-start gap-px select-none text-xs tracking-[0.02em] font-medium",
-      "text-general-800",
+      "text-general-800 dark:text-general-100",
       e.labelClass
     ]
   }),
   tooltipicon: {
-    class: "text-primary-500 w-[10px] h-[10px]"
+    class: "text-primary-500 dark:text-primary-300 w-[10px] h-[10px]"
   }
 }, R = {
   root: {
@@ -1995,19 +1980,19 @@ const T = {
     class: "peer-hover:visible scale-125 !absolute top-2 right-2 z-50"
   },
   body: {
-    class: "relative rounded text-xs font-normal peer text-grayscale-900 bg-primary-50 overflow-x-auto overflow-y-hidden tracking-normal"
+    class: "relative rounded text-xs font-normal peer text-grayscale-900 bg-primary-50 overflow-x-auto overflow-y-hidden tracking-normal dark:text-general-500 dark:bg-general-700"
   },
   textarea: {
     class: [
       "whitespace-nowrap overflow-x-auto pr-1.5 mt-1",
       "absolute bg-transparent text-transparent z-30 leading-5 w-full h-full border-0 outline-none !font-poppins resize-none px-1.5",
-      "caret-primary-500"
+      "caret-primary-500 dark:caret-primary-300"
     ]
   },
   linenumber: {
     class: [
       "font-poppins tracking-0.5px]",
-      "px-2 bg-primary-100 sticky left-0 text-right select-none"
+      "px-2 bg-primary-100 sticky left-0 text-right select-none dark:bg-general-800 dark:text-general-50"
     ]
   }
 }, D = {
@@ -2328,11 +2313,11 @@ const T = {
   menustart: {
     class: ""
   },
-  menuitem: ({ context: e, props: t }) => ({
+  menuitem: ({ context: e, props: r }) => ({
     class: [
       "flex gap-1 py-[7px] px-4 transition-transform",
       {
-        "!pl-0.5 !pr-2 !py-[4.5px]": t.type === "flat"
+        "!pl-0.5 !pr-2 !py-[4.5px]": r.type === "flat"
       },
       {
         "cursor-grab [&_label]:cursor-grab ": e.dragable,
@@ -2344,7 +2329,7 @@ const T = {
   }),
   dragicon: ({ context: e }) => ({
     class: [
-      "!cursor-move w-[18px] h-[18px] !text-general-200 shrink-0",
+      "!cursor-move w-[18px] h-[18px] !text-general-200 dark:!text-grayscale-700 shrink-0",
       { invisible: e.dragable === !1 }
     ]
   })
@@ -2364,7 +2349,7 @@ const T = {
   table: {
     class: [
       "min-w-max w-full h-1",
-      "!border-separate !border-spacing-0 border !border-solid !border-general-100 !border-t-0 !border-l-0 !border-r-0 !rounded-lg"
+      "!border-separate !border-spacing-0 border !border-solid !border-general-100 dark:!border-general-500 !border-t-0 !border-l-0 !border-r-0 !rounded-lg"
     ],
     "data-wv-section": "table"
   },
@@ -2379,54 +2364,57 @@ const T = {
     class: ["sticky top-0 z-50"]
   },
   headerrow: {
-    class: ["border-b border-general-100"]
+    class: ["border-b border-general-100 dark:border-general-500"]
   },
-  bodyrow: ({ context: e, props: t }) => ({
+  bodyrow: ({ context: e, props: r }) => ({
     class: [
-      "border-b border-general-100 group",
+      "border-b border-general-100 dark:border-general-500 group",
       {
-        "!h-[28px]": t.rowHeight === "fixed"
+        "!h-[28px]": r.rowHeight === "fixed"
         // Style(DXJCiX2e): set table row height to fixed 35px
       },
       // Color
-      "text-general-800 text-xs font-medium",
+      "text-general-800 dark:text-general-50 text-xs font-medium",
       {
         "bg-transparent": !e.selected,
-        "bg-primary-50 [&>td]:border-primary-200": e.selected
+        'bg-primary-50 [&>td]:border-primary-200 [&_[data-wv-section="multi-row"]]:border-primary-200': e.selected,
+        'dark:bg-primary-100 dark:[&>td]:border-primary-300 dark:[&_[data-wv-section="multi-row"]]:border-primary-300 dark:text-primary-800 dark:[&_button>i]:!text-primary-800': e.selected
       },
       // State
       {
-        "focus:outline-none focus:outline-offset-0": t.selectionType,
+        "focus:outline-none focus:outline-offset-0": r.selectionType,
         // To sets the bg to single action td
-        "hover:!bg-grayscale-50": !e.highlighted && !e.selected,
-        "hover:!bg-warning-300 !bg-warning-200": e.highlighted
+        "hover:!bg-grayscale-50 dark:hover:!bg-grayscale-800": !e.highlighted && !e.selected,
+        "hover:!bg-warning-300 !bg-warning-200 dark:hover:!bg-warning-300 dark:!bg-warning-200 dark:text-primary-800": e.highlighted
       },
       // Transition
       {
-        "transition duration-200": t.selectionType && !e.selected || t.rowHover
+        "transition duration-200": r.selectionType && !e.selected || r.rowHover
       },
       "px-4 transition-transform",
       { "select-none": e.dragging, "select-auto": !e.dragging },
       { "!cursor-grab [&_label]:!cursor-grab": e.draggable },
       // Misc
-      { "cursor-pointer": t.selectionType !== "none" && !e.disabled }
+      { "cursor-pointer": r.selectionType !== "none" && !e.disabled }
     ]
   }),
   headercell: ({ context: e }) => ({
     class: [
-      "text-xs font-bold text-general-800 p-2 cursor-pointer tracking-[0.02em]",
+      "text-xs font-bold text-general-800 dark:text-general-800 p-2 cursor-pointer tracking-[0.02em]",
       {
         "text-center": e.isParentHeader,
         "text-left": !e.isParentHeader
       },
-      { "bg-primary-200": !e.sorted || !e.sortable },
-      { "bg-primary-300": e.sorted },
       {
-        "sticky right-0 hover:bg-primary-300": e.customColumn,
+        "bg-primary-200 dark:bg-primary-300": !e.sorted || !e.sortable
+      },
+      { "bg-primary-300 dark:bg-primary-400": e.sorted },
+      {
+        "sticky right-0 hover:bg-primary-300 hover:dark:bg-primary-400": e.customColumn,
         "!cursor-default": !e.customColumn && !e.sortable
       },
       "border-0 !border-b border-solid",
-      "border-general-100"
+      "border-general-100 dark:border-general-500"
     ],
     "data-wv-section": "headercell"
   }),
@@ -2444,7 +2432,7 @@ const T = {
   headercheckbox: ({ context: e }) => ({
     class: [
       {
-        "[&_[data-pc-section=box]]:!border-general-100 [&_[data-pc-section=box]]:!bg-white": !e.isSelectedAll
+        "[&_[data-pc-section=box]]:!border-general-100 dark:[&_[data-pc-section=box]]:!border-general-500 [&_[data-pc-section=box]]:!bg-white dark:[&_[data-pc-section=box]]:!bg-grayscale-800": !e.isSelectedAll
       }
     ],
     "data-wv-section": "headercheckbox"
@@ -2467,7 +2455,7 @@ const T = {
       { "rotate-180": e.isExpandedAll },
       { "rotate-0": !e.isExpandedAll }
     ],
-    "icon-class": "w-6 h-6 text-general-800",
+    "icon-class": "w-6 h-6 text-general-800 dark:text-general-800",
     "data-wv-section": "headertogglerbutton"
   }),
   rowcheckbox: {
@@ -2477,7 +2465,7 @@ const T = {
   bodycell: {
     class: [
       "text-xs px-2 py-[4.5px]",
-      "border-0 !border-b !border-solid border-general-100",
+      "border-0 !border-b !border-solid border-general-100 dark:border-general-500",
       "justify-items-start",
       "[&:has([data-wv-section=rowcheckbox])]:text-center",
       "[&:has([data-wv-section=rowcheckbox])]:text-center"
@@ -2493,7 +2481,9 @@ const T = {
   multirow: ({ context: e }) => ({
     class: [
       "min-h-[35px] h-full flex items-center px-2",
-      { "border-t border-general-100 border-solid": !e.firstIndex }
+      {
+        "border-t border-general-100 dark:border-general-500 border-solid": !e.firstIndex
+      }
     ]
   }),
   rowtogglerbutton: ({ context: e }) => ({
@@ -2502,7 +2492,7 @@ const T = {
       { "rotate-180": e.isRowExpanded },
       { "rotate-0": !e.isRowExpanded }
     ],
-    "icon-class": "w-6 h-6 text-general-800",
+    "icon-class": "w-6 h-6 text-general-800 dark:text-general-50",
     "data-wv-section": "rowtogglerbutton"
   }),
   childrowheader: {
@@ -2512,18 +2502,18 @@ const T = {
   celleditableelement: {
     class: [
       "focus:px-2",
-      "w-full inline-block py-2 focus:outline-grayscale-600 focus:outline-1"
+      "w-full inline-block py-2 focus:outline-grayscale-600 dark:focus:outline-grayscale-600 focus:outline-1"
     ],
     "data-wv-section": "celleditableelement"
   },
-  rowsingleactioncell: ({ props: e, context: t }) => ({
+  rowsingleactioncell: ({ props: e, context: r }) => ({
     class: [
       "w-[35px]",
       {
-        "sticky right-0 bg-white": e.useOption,
-        "!bg-primary-50": t.selected,
-        "group-hover:!bg-grayscale-50": !t.highlighted && !t.selected,
-        "group-hover:!bg-warning-300 !bg-warning-200": t.highlighted
+        "sticky right-0 bg-white dark:bg-grayscale-900": e.useOption,
+        "!bg-primary-50 dark:!bg-primary-100": r.selected,
+        "group-hover:!bg-grayscale-50 dark:group-hover:!bg-grayscale-800": !r.highlighted && !r.selected,
+        "group-hover:!bg-warning-300 !bg-warning-200 dark:group-hover:!bg-warning-300 dark:!bg-warning-200": r.highlighted
       }
     ],
     "data-wv-section": "rowsingleactioncell"
@@ -2535,7 +2525,7 @@ const T = {
   singleactionbutton: ({ props: e }) => ({
     class: [
       {
-        "pointer-events-none !border-general-100 [&>i]:text-general-200": e.disableAllRows
+        "pointer-events-none !border-general-100 dark:!border-general-500 [&>i]:text-general-200 dark:[&>i]:text-general-400": e.disableAllRows
       },
       { "pointer-events-auto": !e.disableAllRows },
       "!rounded-full"
@@ -2663,7 +2653,7 @@ const T = {
       "p-6",
       "gap-3",
       // Background
-      "bg-white",
+      "bg-white dark:bg-grayscale-900",
       // Size
       "max-h-[90vh]",
       { "sm:max-w-[90vw]": !e.maximized },
@@ -2692,12 +2682,12 @@ const T = {
       "rounded-tl-lg",
       "rounded-tr-lg",
       // Colors
-      "text-general-800"
+      "text-general-800 dark:text-general-50"
     ]
   },
   title: {
     class: [
-      "text-general-800 text-sm font-bold leading-[19.12px] tracking-[0.24px]"
+      "text-general-800 dark:text-general-50 text-sm font-bold leading-[19.12px] tracking-[0.24px]"
     ]
   },
   icons: {
@@ -2714,12 +2704,12 @@ const T = {
       "border-0",
       "rounded-full",
       // Colors
-      "text-general-200",
+      "text-general-200 dark:text-general-400",
       "bg-transparent",
       // Transitions
       "transition duration-200 ease-in-out",
       // States
-      "hover:bg-general-50 hover:text-general-300",
+      "hover:bg-general-50 hover:text-general-300 dark:hover:bg-grayscale-700 dark:hover:text-general-200",
       // Misc
       "overflow-hidden"
     ]
@@ -2737,15 +2727,14 @@ const T = {
       "border-0",
       "rounded-full",
       // Colors
-      "text-surface-500",
+      "text-surface-500 dark:text-general-300",
       "bg-transparent",
       // Transitions
       "transition duration-200 ease-in-out",
       // States
-      "hover:text-surface-700",
-      "hover:bg-surface-100",
+      "hover:bg-general-50 hover:text-general-300 dark:hover:bg-grayscale-700 dark:hover:text-general-200",
       "focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset",
-      "focus:ring-primary-500",
+      "focus:ring-primary-500 dark:focus:ring-primary-800",
       // Misc
       "overflow-hidden"
     ]
@@ -2755,7 +2744,7 @@ const T = {
       // Display
       "inline-block",
       // Color
-      "text-general-200",
+      "text-general-200 dark:text-general-200",
       // Size
       "w-3.5",
       "h-3.5"
@@ -2770,16 +2759,16 @@ const T = {
       "h-3"
     ]
   },
-  content: ({ state: e, instance: t }) => ({
+  content: ({ state: e, instance: r }) => ({
     class: [
       // Font
-      "!text-general-800 text-xs font-medium tracking-[0.02em]",
+      "!text-general-800 dark:!text-general-100 text-xs font-medium tracking-[0.02em]",
       "pr-1.5 -mr-1.5 pl-1.5 -ml-1.5 pt-1.5 -mt-1.5 !pb-1.5 -mb-1.5",
       // Layout
       "flex flex-col gap-3",
       // Shape
       // Colors
-      "text-surface-600",
+      "text-surface-600 dark:text-surface-200",
       // Misc
       "overflow-y-auto scrollbar-w-none",
       {
@@ -2801,7 +2790,7 @@ const T = {
       "empty:hidden",
       // Colors
       "bg-inherit",
-      "text-surface-700/80"
+      "text-surface-700/80 dark:text-surface-200/80"
     ]
   },
   mask: ({ props: e }) => ({
@@ -2812,7 +2801,7 @@ const T = {
       { "p-5": !e.position == "full" },
       // Background and Effects
       {
-        "has-[.mask-active]:bg-transparent bg-dialog-mask": e.modal,
+        "has-[.mask-active]:bg-transparent bg-dialog-mask dark:bg-grayscale-950/80": e.modal,
         "has-[.mask-active]:backdrop-blur-none backdrop-blur-sm": e.modal
       }
     ]
@@ -2836,7 +2825,7 @@ const T = {
     enterFromClass: "opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active",
     enterActiveClass: "transition-all duration-200 ease-out",
     leaveActiveClass: "transition-all duration-200 ease-out",
-    leaveToClass: "opacity-0 scale-75 opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active"
+    leaveToClass: "opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active"
   } : {
     enterFromClass: "opacity-0 scale-75 mask-active",
     enterActiveClass: "transition-all duration-200 ease-out",
@@ -2860,7 +2849,7 @@ const T = {
   headertitle: (e) => ({
     class: [
       "!text-[14px] leading-6 !font-bold tracking-[0.02em]",
-      "text-general-800"
+      "text-general-800 dark:text-general-50"
     ],
     "data-wv-section": "dialog-confirm-title"
   }),
@@ -2896,7 +2885,7 @@ const T = {
   },
   headericon: { class: "text-2xl", "data-wv-section": "headericon" },
   headertitle: {
-    class: "mr-auto text-general-800 text-center !text-[0.9rem] leading-[1.125rem] !font-bold tracking-[0.28px]",
+    class: "mr-auto text-general-800 dark:text-general-50 text-center !text-[0.9rem] leading-[1.125rem] !font-bold tracking-[0.28px]",
     "data-wv-section": "dialog-form-title"
   },
   expandasidebutton: {
@@ -2904,7 +2893,7 @@ const T = {
     "data-wv-section": "expand-aside-button"
   },
   closedialog: {
-    class: "!p-0.5 !text-general-200",
+    class: "!p-0.5 !text-general-200 dark:!text-general-500",
     "data-wv-section": "closebutton"
   },
   container: (e) => ({
@@ -2918,13 +2907,13 @@ const T = {
     class: ["flex flex-col gap-3 w-full"],
     "data-wv-section": "dialog-form-main"
   },
-  asidesection: (e, t) => ({
+  asidesection: (e, r) => ({
     class: [
       "flex flex-col gap-3 shrink-0",
       { "opacity-0": !e },
       { "opacity-100": e }
     ],
-    style: `width: ${e ? t - 24 : 0}px`,
+    style: `width: ${e ? r - 24 : 0}px`,
     "data-wv-section": "dialog-form-aside"
   }),
   form: {
@@ -3007,7 +2996,7 @@ const T = {
       "bg-surface-0"
     ]
   }
-}, te = {
+}, re = {
   root: ({ props: e }) => ({
     class: [
       // Positioning
@@ -3052,15 +3041,15 @@ const T = {
       "outline-none"
     ]
   }),
-  menuitem: ({ props: e, context: t, instance: r }) => ({
+  menuitem: ({ props: e, context: r, instance: t }) => ({
     class: [
       // Spacing & Shape
       "p-2 rounded-md",
       // Conditional Scaling
       {
-        "hover:scale-150": r.currentIndex === t.index,
-        "scale-125": r.currentIndex - 1 === t.index || r.currentIndex + 1 === t.index,
-        "scale-110": r.currentIndex - 2 === t.index || r.currentIndex + 2 === t.index
+        "hover:scale-150": t.currentIndex === r.index,
+        "scale-125": t.currentIndex - 1 === r.index || t.currentIndex + 1 === r.index,
+        "scale-110": t.currentIndex - 2 === r.index || t.currentIndex + 2 === r.index
       },
       // Positioning & Hover States
       {
@@ -3085,8 +3074,8 @@ const T = {
       "cursor-default overflow-hidden"
     ]
   }
-}, s = {
-  root: ({ props: e, state: t }) => ({
+}, i = {
+  root: ({ props: e, state: r }) => ({
     class: [
       // Display and Position
       "inline-flex",
@@ -3103,7 +3092,7 @@ const T = {
     class: "overflow-hidden flex flex-auto items-center cursor-pointer py-[3px] h-[26px] px-3 pr-0"
   },
   label: ({ props: e }) => {
-    var t, r;
+    var r, t;
     return {
       class: [
         "flex gap-1",
@@ -3114,8 +3103,8 @@ const T = {
         "rounded-none",
         // Color
         {
-          "text-general-200": !((t = e.modelValue) != null && t.length),
-          "text-grayscale-900": (r = e.modelValue) == null ? void 0 : r.length
+          "text-general-200 dark:text-general-500": !((r = e.modelValue) != null && r.length),
+          "text-general-800 dark:text-general-50": (t = e.modelValue) == null ? void 0 : t.length
         },
         // Transitions
         "transition duration-200",
@@ -3124,21 +3113,21 @@ const T = {
       ]
     };
   },
-  token: c.root({ props: { severity: "dark" } }),
-  tokenLabel: c.input({ props: {}, context: {} }),
-  removeTokenIcon: c.removebutton({
+  token: d.root({ props: { severity: "dark" } }),
+  tokenLabel: d.input({ props: {}, context: {} }),
+  removeTokenIcon: d.removebutton({
     props: { badgeSeverity: "dark" }
   }),
   loadingplaceholder: {
-    class: "text-general-200 font-light"
+    class: "text-general-200 dark:text-general-500 font-light"
   },
   loadingicon: {
-    class: "text-xs animate-spin duration-200 !text-general-500",
+    class: "text-xs animate-spin duration-200 !text-general-500 dark:!text-general-100",
     icon: "spinner"
   },
   dropdownicon: ({ state: e }) => ({
     class: [
-      "w-full h-full transition-transform !text-general-500",
+      "w-full h-full transition-transform !text-general-500 dark:!text-general-100",
       { "rotate-180": e.isShowOverlay }
     ],
     icon: "arrow-drop-down"
@@ -3153,8 +3142,7 @@ const T = {
       "flex items-center justify-center",
       "shrink-0",
       // Color and Background
-      "bg-transparent",
-      "text-surface-500",
+      "bg-transparent dark:bg-transparent",
       // Size
       "w-6",
       // Shape
@@ -3172,7 +3160,7 @@ const T = {
       "rounded-lg",
       "shadow-panel",
       // Color
-      "bg-grayscale-100"
+      "bg-grayscale-100 dark:bg-general-600"
     ]
   },
   header: {
@@ -3204,12 +3192,12 @@ const T = {
     ]
   },
   headerCheckbox: {
-    ...d,
+    ...c,
     root: {
-      class: ["!mx-auto", ...d.root.class]
+      class: ["!mx-auto", ...c.root.class]
     }
   },
-  itemCheckbox: d,
+  itemCheckbox: c,
   closeButton: {
     class: ["hidden"]
   },
@@ -3228,7 +3216,7 @@ const T = {
       "max-h-[15rem]",
       // Shape
       // Color
-      "bg-white",
+      "bg-white dark:bg-grayscale-900",
       // Misc
       "overflow-auto",
       "rounded-br-lg",
@@ -3254,20 +3242,20 @@ const T = {
       "py-1.5 px-4",
       // Color
       {
-        "text-general-800": !e.focused && !e.selected && !e.disabled
+        "text-general-800 dark:text-general-50": !e.focused && !e.selected && !e.disabled
       },
       {
-        "text-general-400": !e.focused && !e.selected && e.disabled
+        "text-general-400 dark:text-general-100": !e.focused && !e.selected && e.disabled
       },
-      { "bg-primary-50": e.focused },
+      { "bg-primary-50 dark:bg-grayscale-800": e.focused },
       {
-        "text-primary-500": e.focused || e.selected
+        "text-primary-500 dark:text-primary-300": e.focused || e.selected
       },
       {
-        "text-general-900": !e.focused && e.selected
+        "text-general-900 dark:text-general-100": !e.focused && e.selected
       },
       //States
-      "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500",
+      "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-300",
       // Misc
       { "pointer-events-none cursor-default": e.disabled },
       { "cursor-pointer": !e.disabled },
@@ -3287,8 +3275,6 @@ const T = {
       "m-0",
       "py-2 px-4",
       // Color
-      "text-surface-800",
-      "bg-surface-0",
       // Misc
       "cursor-auto"
     ]
@@ -3302,20 +3288,21 @@ const T = {
       // Sizing
       "w-full py-2 px-3",
       //Color
-      "text-general-100",
-      "bg-white",
+      "text-general-100 dark:text-general-500",
+      "bg-white dark:bg-grayscale-900",
       // Shape
-      "ring-inset ring-1 ring-general-500",
+      "ring-inset ring-1 ring-general-200 dark:ring-grayscale-600",
       "rounded-[6px]"
     ]
   },
   filterinput: {
     class: [
       "w-full",
-      "text-general-800",
+      "bg-white dark:bg-grayscale-900",
+      "text-general-800 dark:text-general-100",
       "text-xs tracking-[0.02em]",
       "font-medium",
-      "placeholder:text-general-200",
+      "placeholder:text-general-200 dark:placeholder:text-general-600",
       "placeholder:font-light",
       // Misc
       "appearance-none",
@@ -3324,13 +3311,12 @@ const T = {
     ]
   },
   filtericon: {
-    class: ["text-base text-general-400"],
+    class: ["text-base text-general-100 dark:text-general-300"],
     icon: "search"
   },
   clearicon: {
     class: [
       // Color
-      "text-surface-500",
       // Position
       "absolute",
       "top-1/2",
@@ -3347,8 +3333,8 @@ const T = {
       // Spacing
       "py-2 px-4",
       // Color
-      "text-grayscale-800",
-      "bg-transparent"
+      "text-grayscale-800 dark:text-grayscale-50",
+      "bg-transparent dark:bg-transparent"
     ]
   },
   transition: {
@@ -3357,8 +3343,8 @@ const T = {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, re = {
-  root: ({ props: e, state: t }) => ({
+}, te = {
+  root: ({ props: e, state: r }) => ({
     class: [
       // Display and Position
       "inline-flex items-center justify-between",
@@ -3377,14 +3363,14 @@ const T = {
       //Font
       "text-xs tracking-[0.02em]",
       {
-        "!text-general-200 font-light": e.modelValue == null,
-        "text-general-800 font-medium": e.modelValue != null
+        "!text-general-200 dark:text-general-600 font-light": e.modelValue == null,
+        "text-general-800 font-medium dark:text-general-50": e.modelValue != null
       },
       // Display
       "flex items-center",
       // Color and Background
-      "bg-transparent",
-      "placeholder:text-general-200",
+      "bg-transparent dark:bg-transparent",
+      "placeholder:text-general-200 dark:placeholder:text-general-600",
       // Sizing and Spacing
       "h-[26px] w-full",
       "px-3 pr-0",
@@ -3414,8 +3400,8 @@ const T = {
       "flex items-center justify-center",
       "shrink-0",
       // Color and Background
-      "bg-transparent",
-      "text-general-200",
+      "bg-transparent dark:bg-transparent",
+      "text-general-200 dark:text-grayscale-900",
       // Size
       "w-6 h-6",
       // Shape
@@ -3437,7 +3423,7 @@ const T = {
       "shadow-panel",
       "overflow-clip",
       // Color
-      "bg-grayscale-100"
+      "bg-grayscale-100 dark:bg-general-600"
     ]
   }),
   wrapper: ({ props: e }) => ({
@@ -3445,7 +3431,8 @@ const T = {
       // Sizing
       "max-h-[15rem]",
       // Color
-      "bg-white",
+      "bg-white dark:bg-grayscale-900",
+      "text-general-800 dark:text-general-100",
       // Misc
       "overflow-auto",
       {
@@ -3475,20 +3462,20 @@ const T = {
       "py-1.5 px-4",
       // Color
       {
-        "text-general-800": !e.focused && !e.selected && !e.disabled
+        "text-general-800 dark:text-general-50": !e.focused && !e.selected && !e.disabled
       },
       {
-        "text-general-400": !e.focused && !e.selected && e.disabled
+        "text-general-400 dark:text-general-100": !e.focused && !e.selected && e.disabled
       },
-      { "bg-primary-50": e.focused },
+      { "bg-primary-50 dark:bg-grayscale-800": e.focused },
       {
-        "text-primary-500": e.focused || e.selected
+        "text-primary-500 dark:text-primary-300": e.focused || e.selected
       },
       {
-        "text-general-900": !e.focused && e.selected
+        "text-general-900 dark:text-general-100": !e.focused && e.selected
       },
       //States
-      "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500",
+      "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-300",
       // Misc
       { "pointer-events-none cursor-default": e.disabled },
       { "cursor-pointer": !e.disabled },
@@ -3505,8 +3492,6 @@ const T = {
       "m-0",
       "py-2 px-4",
       // Color
-      "text-surface-800",
-      "bg-surface-0",
       // Misc
       "cursor-auto"
     ]
@@ -3518,20 +3503,19 @@ const T = {
       // Spacing
       "py-2 px-4",
       // Color
-      "text-surface-800",
-      "bg-transparent"
+      "bg-transparent dark:bg-transparent"
     ]
   },
-  header: s == null ? void 0 : s.header,
-  filtercontainer: s == null ? void 0 : s.filtercontainer,
-  filterinput: s == null ? void 0 : s.filterinput,
-  filtericon: s == null ? void 0 : s.filtericon,
-  loadingicon: s == null ? void 0 : s.loadingicon,
-  dropdownicon: ({ state: e }) => s.dropdownicon({ state: e }),
+  header: i == null ? void 0 : i.header,
+  filtercontainer: i == null ? void 0 : i.filtercontainer,
+  filterinput: i == null ? void 0 : i.filterinput,
+  filtericon: i == null ? void 0 : i.filtericon,
+  loadingicon: i == null ? void 0 : i.loadingicon,
+  dropdownicon: ({ state: e }) => i.dropdownicon({ state: e }),
   clearicon: {
     class: [
       // Color
-      "text-general-200",
+      "text-general-200 dark:text-grayscale-800",
       // Position
       "absolute",
       "top-1/2",
@@ -3547,9 +3531,9 @@ const T = {
     leaveToClass: "opacity-0"
   },
   loadingplaceholder: {
-    class: "text-general-200 font-light"
+    class: "text-general-200 dark:text-grayscale-500 font-light"
   }
-}, ie = {
+}, ae = {
   root: {
     class: [
       "block",
@@ -3627,11 +3611,11 @@ const T = {
     leaveActiveClass: "overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]",
     leaveToClass: "max-h-0"
   }
-}, se = {
+}, ie = {
   // :class="['ts-form', { 'sticky-buttons': props.stickyButtons }]"
   root: () => ({
     class: [
-      "flex flex-col gap-3 text-general-800 text-[0.75rem] font-medium leading-[16.8px] tracking-[0.02em]"
+      "flex flex-col gap-3 text-general-800 text-[0.75rem] font-medium leading-[16.8px] tracking-[0.02em] dark:text-general-100"
     ],
     "data-wv-section": "root"
   }),
@@ -3677,8 +3661,8 @@ const T = {
     "ring-[0.5px] p-[0.5px]": !navigator.userAgent.includes("Firefox")
   },
   "ring-inset",
-  "ring-general-200"
-], ae = {
+  "ring-general-200 dark:ring-grayscale-600"
+], se = {
   css: `
     *[data-pd-ripple="true"]{
         overflow: hidden;
@@ -3770,13 +3754,13 @@ const T = {
       height: `${e.width}px`
     } : void 0
   }),
-  image: ({ props: e, context: t }) => ({
+  image: ({ props: e, context: r }) => ({
     class: [
       "object-cover",
       { "!rounded-full": e.rounded },
       { "!rounded-lg": !e.rounded }
     ],
-    style: `width: ${t.imageSize}px; height: ${t.imageSize}px;`
+    style: `width: ${r.imageSize}px; height: ${r.imageSize}px;`
   }),
   button: {
     class: [
@@ -3784,20 +3768,20 @@ const T = {
       "absolute",
       "w-full h-full",
       "inset-0 opacity-0 transition-opacity duration-300",
-      "bg-transparent text-white",
-      "hover:cursor-pointer hover:bg-grayscale-900 hover:opacity-50"
+      "bg-transparent dark:bg-transparent text-white dark:text-grayscale-900",
+      "hover:cursor-pointer hover:bg-grayscale-900 dark:hover:bg-grayscale-900 hover:opacity-50"
     ],
     style: "border-radius: inherit"
   },
   icon: {
-    class: "text-white w-6 h-6 opacity-100 max-w-[50%]"
+    class: "text-white dark:text-white w-6 h-6 opacity-100 max-w-[50%]"
   },
   mask: {
     class: [
       "flex items-center justify-center",
       "fixed top-0 left-0",
       "w-full h-full",
-      "bg-grayscale-950/90"
+      "bg-grayscale-950/90 dark:bg-grayscale-950/90"
     ]
   },
   toolbar: {
@@ -3810,9 +3794,9 @@ const T = {
       "w-6 h-6",
       "mr-2",
       "rounded-full",
-      "text-white bg-transparent",
-      "hover:text-white hover:bg-white/10",
-      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50",
+      "text-white dark:text-white bg-transparent dark:bg-transparent",
+      "hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/10",
+      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-400/50",
       "transition duration-200 ease-in-out"
     ]
   },
@@ -3826,9 +3810,9 @@ const T = {
       "w-6 h-6",
       "mr-2",
       "rounded-full",
-      "text-white bg-transparent",
-      "hover:text-white hover:bg-white/10",
-      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50",
+      "text-white dark:text-white bg-transparent dark:bg-transparent",
+      "hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/10",
+      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-400/50",
       "transition duration-200 ease-in-out"
     ]
   },
@@ -3842,9 +3826,9 @@ const T = {
       "w-6 h-6",
       "mr-2",
       "rounded-full",
-      "text-white bg-transparent",
-      "hover:text-white hover:bg-white/10",
-      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50",
+      "text-white dark:text-white bg-transparent dark:bg-transparent",
+      "hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/10",
+      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-400/50",
       "transition duration-200 ease-in-out"
     ]
   },
@@ -3858,9 +3842,9 @@ const T = {
       "w-6 h-6",
       "mr-2",
       "rounded-full",
-      "text-white bg-transparent",
-      "hover:text-white hover:bg-white/10",
-      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50",
+      "text-white dark:text-white bg-transparent dark:bg-transparent",
+      "hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/10",
+      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-400/50",
       "transition duration-200 ease-in-out"
     ]
   },
@@ -3874,9 +3858,9 @@ const T = {
       "w-6 h-6",
       "mr-2",
       "rounded-full",
-      "text-white bg-transparent",
-      "hover:text-white hover:bg-white/10",
-      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50",
+      "text-white dark:text-white bg-transparent dark:bg-transparent",
+      "hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/10",
+      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-400/50",
       "transition duration-200 ease-in-out"
     ]
   },
@@ -3895,9 +3879,9 @@ const T = {
       "rounded-md p-3",
       "w-full",
       {
-        "bg-success-50 text-success-500": e.severity == "success",
-        "bg-danger-50 text-danger-500": e.severity == "danger",
-        "bg-grayscale-50 text-general-800": e.severity == "secondary"
+        "bg-success-50 dark:bg-success-50 text-success-500 dark:text-success-600": e.severity == "success",
+        "bg-danger-50 dark:bg-danger-50 text-danger-500 dark:text-danger-600": e.severity == "danger",
+        "bg-grayscale-50 dark:bg-grayscale-800 text-general-800 dark:text-general-50": e.severity == "secondary"
       }
     ],
     "data-wv-name": "inlinemessage",
@@ -3906,7 +3890,9 @@ const T = {
   icon: ({ props: e }) => ({
     class: [
       "w-4 h-4 !cursor-auto",
-      { "animate-spin duration-200 text-general-100": e.loading }
+      {
+        "animate-spin duration-200 text-general-100 dark:text-general-400": e.loading
+      }
     ],
     "data-wv-section": "messageicon"
   }),
@@ -3920,83 +3906,84 @@ const T = {
     ]
   }
 }, z = {
-  root: ({ props: e, context: t, parent: r }) => {
-    var i, n;
+  root: ({ props: e, context: r, parent: t }) => {
+    var a, n;
     return {
       class: [
-        "px-3 py-[5px] w-full bg-transparent",
+        "px-3 py-[5px] w-full bg-transparent dark:bg-transparent",
         // Size
         "h-max",
         {
-          "max-h-[43px]": (n = (i = r.instance) == null ? void 0 : i.placeholder) == null ? void 0 : n.includes("password")
+          "max-h-[43px]": (n = (a = t.instance) == null ? void 0 : a.placeholder) == null ? void 0 : n.includes("password")
         },
         // Font
-        "text-general-800 text-xs tracking-[0.02em] font-medium",
-        "placeholder:text-general-200",
+        "text-general-800 dark:text-general-50 text-xs tracking-[0.02em] font-medium",
+        "placeholder:text-general-200 dark:placeholder:text-general-600",
         "placeholder:!font-light",
         "appearance-none",
         // Interactions
         {
-          "outline-none": !t.disabled,
-          "!text-general-200 select-none pointer-events-none cursor-default": t.disabled
+          "outline-none": !r.disabled,
+          "!text-general-200 dark:!text-grayscale-500 select-none pointer-events-none cursor-default": r.disabled
         }
       ]
     };
   }
-}, v = navigator.userAgent.includes("Chrome"), ce = {
+}, y = navigator.userAgent.includes("Chrome"), de = {
   root: ({ context: e }) => ({
     class: [
       "flex flex-wrap gap-x-0.5 gap-y-[5px] items-center",
       "min-h-[26px] h-fit w-full",
       "ring-inset rounded px-[12px] py-[3px]",
       {
-        "ring-[1px]": !v,
-        "ring-[0.5px]": v
+        "ring-[1px]": !y,
+        "ring-[0.5px]": y
       },
-      { "!ring-danger-500 !dark:ring-danger-500": e.invalidInput },
-      { "!ring-general-200 !dark:ring-general-200": !e.invalidInput },
+      { "!ring-danger-500 !dark:ring-danger-300": e.invalidInput },
+      { "!ring-general-200 !dark:ring-grayscale-600": !e.invalidInput },
       { "pointer-events-none": e.disabled }
     ]
   }),
-  input: ({ context: e, parent: t, props: r }) => ({
+  input: ({ context: e, parent: r, props: t }) => ({
     class: [
       ...z.root({
-        props: r,
+        props: t,
         context: e,
-        parent: t
+        parent: r
       }).class,
       "outline-none !w-full !bg-transparent !p-0 !shadow-none h-max !leading-4 min-w-[70px]",
       { "placeholder:text-transparent": e.showPlaceholder },
-      "focus:placeholder:text-general-200"
+      // TODO: Doesn't work on dark mode
+      "focus:placeholder:text-general-200 dark:focus:placeholder:text-general-600"
     ]
   }),
   erroricon: {
-    class: ["mr-1 text-warning-600 text-base"]
+    class: ["mr-1 text-warning-600 dark:text-warning-800 text-base"]
   },
   erroroverlaypanel: {
-    class: ["px-3 py-1 text-[12px] text-general-800"]
+    class: ["px-3 py-1 text-[12px] text-general-800 dark:text-general-50"]
   }
-}, h = navigator.userAgent.includes("Chrome"), de = {
+}, v = navigator.userAgent.includes("Chrome"), ce = {
   root: ({ props: e }) => ({
     class: [
       {
-        "!ring-danger-500 [&_.inputgroupaddon]:ring-danger-500": e.invalid && e.ring !== "none",
-        "[&_.inputgroupaddon]:ring-general-200": !e.invalid && e.ring !== "none",
-        "!bg-general-50 ": e.disabled
+        "!ring-danger-500 [&_.inputgroupaddon]:ring-danger-500 dark:!ring-danger-300 dark:[&_.inputgroupaddon]:ring-danger-300": e.invalid && e.ring !== "none",
+        "[&_.inputgroupaddon]:ring-general-200 dark:[&_.inputgroupaddon]:ring-grayscale-600": !e.invalid && e.ring !== "none",
+        "!bg-general-50 dark:!bg-grayscale-700": e.disabled
       },
       {
-        "[&:has(:focus)]:!ring-primary-500 [&:has(:focus)_.inputgroupaddon]:!ring-primary-500": e.ring !== "none"
+        "[&:has(:focus)]:!ring-primary-500 [&:has(:focus)_.inputgroupaddon]:!ring-primary-500 dark:[&:has(:focus)]:!ring-primary-300 dark:[&:has(:focus)_.inputgroupaddon]:!ring-primary-300": e.ring !== "none"
       },
       {
-        "ring-[1px] [&_.inputgroupaddon]:ring-[1px]": !h && e.ring !== "none",
-        "ring-[0.5px] [&_.inputgroupaddon]:ring-[0.5px]": h && e.ring !== "none"
+        "ring-[1px] [&_.inputgroupaddon]:ring-[1px]": !v && e.ring !== "none",
+        "ring-[0.5px] [&_.inputgroupaddon]:ring-[0.5px]": v && e.ring !== "none"
       },
       "[&_.inputgroupaddon[data-addon-variant=plain]]:!ring-[0px]",
       "[&:has(input)]:cursor-text",
       "flex items-stretch",
       "w-full",
-      "ring-inset ring-general-200 rounded",
-      "bg-white",
+      "ring-inset ring-general-200 dark:ring-grayscale-600 rounded",
+      "bg-white dark:bg-grayscale-900",
       e.class
     ],
     "data-wv-section": "inputgroup"
@@ -4019,19 +4006,19 @@ const T = {
       // Size
       "w-max",
       // Font
-      "text-general-800",
+      "text-general-800 dark:text-general-50",
       "text-xs font-medium leading-none tracking-tight",
       // Color
-      { "bg-general-50": e.addonVariant !== "plain" },
+      { "bg-general-50 dark:bg-grayscale-700": e.addonVariant !== "plain" },
       {
-        "!text-general-200": e.disabled,
+        "!text-general-200 dark:!text-grayscale-500": e.disabled,
         "!px-2": e.showButtons
       }
     ],
     "data-addon-variant": e.addonVariant
     // Used in inputgroup to set styling
   })
-}, fe = {
+}, ge = {
   root: ({ context: e }) => ({
     class: [
       // Font
@@ -4054,8 +4041,8 @@ const T = {
       }
     ]
   })
-}, y = "text-xs font-medium tracking-[0.02em] leading-[18px]", w = "h-[26px]", ge = {
-  root: ({ props: e, parent: t }) => ({
+}, h = "text-xs font-medium tracking-[0.02em] leading-[18px]", w = "h-[26px]", fe = {
+  root: ({ props: e, parent: r }) => ({
     class: [
       // Layout
       "flex items-center self-stretch shrink-0 grow",
@@ -4069,19 +4056,19 @@ const T = {
     ]
   }),
   input: {
-    root: ({ parent: e, context: t }) => ({
+    root: ({ parent: e, context: r }) => ({
       class: [
         "border-0 h-full w-full outline-none",
         "bg-inherit",
-        y,
-        "placeholder:text-general-200 placeholder:font-light",
-        t.disabled ? "text-general-200" : "text-general-800"
+        h,
+        "placeholder:text-general-200 dark:placeholder:text-general-600 placeholder:font-light",
+        r.disabled ? "text-general-200 dark:text-grayscale-500" : "text-general-800 dark:text-general-50"
       ]
     })
   },
   inputresizer: {
     class: [
-      y,
+      h,
       w,
       "user-select-none py-1 px-3 block min-w-4 text-transparent"
     ]
@@ -4107,7 +4094,7 @@ const T = {
   },
   incrementicon: ({ props: e }) => ({
     class: [
-      "!text-base text-general-500",
+      "!text-base text-general-500 dark:text-general-100",
       {
         "!text-general-200": e.disabled
       }
@@ -4115,15 +4102,15 @@ const T = {
   }),
   decrementicon: ({ props: e }) => ({
     class: [
-      "!text-base text-general-500",
+      "!text-base text-general-500 dark:text-general-100",
       {
         "!text-general-200": e.disabled
       }
     ]
   })
 };
-function m(e, t) {
-  return { [e]: t }[e];
+function m(e, r) {
+  return { [e]: r }[e];
 }
 m("WANGS-TAB-MENU", {
   root: {
@@ -4144,8 +4131,8 @@ m("WANGS-TAB-MENU", {
   menuitem: {
     class: "mr-0"
   },
-  action: ({ props: e, context: t }) => {
-    var r, i;
+  action: ({ props: e, context: r }) => {
+    var t, a;
     return {
       class: [
         "relative",
@@ -4160,36 +4147,36 @@ m("WANGS-TAB-MENU", {
           rounded: e.type === "segmented",
           "p-2 pb-1.5 pt-0.5 !h-6": e.type === "tab",
           "py-[5px] px-3 !h-6": e.type === "segmented",
-          "ml-1": e.type === "pill" && t.index !== 0,
-          "gap-1": t.item.icon
+          "ml-1": e.type === "pill" && r.index !== 0,
+          "gap-1": r.item.icon
         },
         // Shape
         {
           "border-b-2": e.type === "tab",
-          "shadow-[-2px_2px_2px_rgba(0,0,0,0.25)] overflow-visible": e.type === "segmented" && t.active
+          "shadow-[-2px_2px_2px_rgba(0,0,0,0.25)] overflow-visible": e.type === "segmented" && r.active
         },
         // Colors and Conditions
         {
-          "border-primary-700": t.active,
-          "border-grayscale-400": !t.active,
-          "text-grayscale-600": !t.active && e.type === "tab",
-          "text-primary-700": t.active && e.type === "tab",
-          "bg-primary-700 text-white": e.type === "pill" && t.active,
-          "bg-grayscale-100 text-grayscale-800": e.type === "pill" && !t.active,
-          "bg-primary-500 text-white": e.type === "segmented" && t.active,
-          "!text-general-800": e.type === "segmented" && !t.active,
-          "bg-transparent ": e.type !== "pill" && !t.active
+          "border-primary-700": r.active,
+          "border-grayscale-400": !r.active,
+          "text-grayscale-600": !r.active && e.type === "tab",
+          "text-primary-700": r.active && e.type === "tab",
+          "bg-primary-700 text-white": e.type === "pill" && r.active,
+          "bg-grayscale-100 text-grayscale-800": e.type === "pill" && !r.active,
+          "bg-primary-500 text-white": e.type === "segmented" && r.active,
+          "!text-general-800": e.type === "segmented" && !r.active,
+          "bg-transparent ": e.type !== "pill" && !r.active
         },
         // States
         { "hover:bg-primary-50": e.type === "tab" },
         "focus-visible:outline-none focus-visible:outline-offset-0",
         {
-          "focus-visible:border-primary-200 focus-visible:text-primary-400": !t.active
+          "focus-visible:border-primary-200 focus-visible:text-primary-400": !r.active
         },
         // Disabled States
         {
-          "pointer-events-none": (r = t.item) == null ? void 0 : r.disabled,
-          "opacity-60": (i = t.item) == null ? void 0 : i.disabled
+          "pointer-events-none": (t = r.item) == null ? void 0 : t.disabled,
+          "opacity-60": (a = r.item) == null ? void 0 : a.disabled
         },
         // Transitions
         "transition-all duration-200",
@@ -4218,24 +4205,24 @@ m("WANGS-INPUT-OTP", {
       "w-max"
     ]
   },
-  input: ({ props: e, context: t, parent: r }) => ({
+  input: ({ props: e, context: r, parent: t }) => ({
     class: [
       // Font
       "text-[14px] leading-none font-medium",
       // Flex & Alignment
-      { "flex-1 w-[1%]": r.tagName == "WANGS-INPUT-GROUP" },
+      { "flex-1 w-[1%]": t.tagName == "WANGS-INPUT-GROUP" },
       "text-center",
       // Spacing
       "m-0",
       // Size
       "w-[42px] h-[42px]",
       // Shape
-      { "rounded-md": r.tagName !== "WANGS-INPUT-GROUP" },
+      { "rounded-md": t.tagName !== "WANGS-INPUT-GROUP" },
       {
-        "first:rounded-l-md rounded-none last:rounded-r-md": r.tagName == "WANGS-INPUT-GROUP"
+        "first:rounded-l-md rounded-none last:rounded-r-md": t.tagName == "WANGS-INPUT-GROUP"
       },
       {
-        "border-0 border-y border-l last:border-r": r.tagName == "WANGS-INPUT-GROUP"
+        "border-0 border-y border-l last:border-r": t.tagName == "WANGS-INPUT-GROUP"
       },
       // Colors
       "text-general-800 dark:text-general-800",
@@ -4250,36 +4237,36 @@ m("WANGS-INPUT-OTP", {
       { "ring-danger-500 dark:ring-danger-500": e.invalid },
       // States
       {
-        "hover:bg-primary-50/50 hover:ring-primary-500 dark:hover:ring-primary-400": !t.disabled && !e.invalid,
-        "focus:bg-primary-50/50 focus:ring-primary-500 dark:focus:ring-primary-400": !t.disabled && !e.invalid,
-        "focus:outline-none focus:outline-offset-0": !t.disabled,
-        "opacity-60 select-none pointer-events-none cursor-default": t.disabled
+        "hover:bg-primary-50/50 hover:ring-primary-500 dark:hover:ring-primary-400": !r.disabled && !e.invalid,
+        "focus:bg-primary-50/50 focus:ring-primary-500 dark:focus:ring-primary-400": !r.disabled && !e.invalid,
+        "focus:outline-none focus:outline-offset-0": !r.disabled,
+        "opacity-60 select-none pointer-events-none cursor-default": r.disabled
       },
       // Filled State *for FloatLabel
-      { filled: r.tagName == "WANGS-FLOAT-LABEL" && t.filled },
+      { filled: t.tagName == "WANGS-FLOAT-LABEL" && r.filled },
       // Misc
       "appearance-none",
       "transition-colors duration-200"
     ]
   })
 });
-const a = class a {
+const s = class s {
   constructor() {
     /**
      * Stores base URLs associated with different app identifiers.
      */
     b(this, "_baseUrl", "");
-    if (globalThis[a.SINGLETON_KEY])
-      return globalThis[a.SINGLETON_KEY];
-    globalThis[a.SINGLETON_KEY] = this;
+    if (globalThis[s.SINGLETON_KEY])
+      return globalThis[s.SINGLETON_KEY];
+    globalThis[s.SINGLETON_KEY] = this;
   }
   /**
    * Registers a base URL for a specific app.
    *
    * @param base - The base URL to be used as a prefix for all routes in that app.
    */
-  setNavigationBaseUrl(t) {
-    this._baseUrl = this.normalizeBase(t);
+  setNavigationBaseUrl(r) {
+    this._baseUrl = this.normalizeBase(r);
   }
   /**
    * Retrieves the base URL for a specific app.
@@ -4295,8 +4282,8 @@ const a = class a {
    * @param base - The base URL to normalize.
    * @returns A clean base URL ending with a single `/`.
    */
-  normalizeBase(t) {
-    return t.replace(/\/+$/, "").concat("/");
+  normalizeBase(r) {
+    return r.replace(/\/+$/, "").concat("/");
   }
   /**
    * Prepends the base URL (if any) to the given path.
@@ -4304,14 +4291,14 @@ const a = class a {
    * @param path - The relative path to normalize.
    * @returns A fully normalized path prefixed with the base URL if applicable.
    */
-  normalizePath(t) {
-    if (!t.startsWith("/"))
-      return new URL(t, window.location.href).pathname;
-    const r = this.getNavigationBaseUrl();
-    if (!r)
-      return t;
-    const i = t.slice(1);
-    return `${r}${i}`;
+  normalizePath(r) {
+    if (!r.startsWith("/"))
+      return new URL(r, window.location.href).pathname;
+    const t = this.getNavigationBaseUrl();
+    if (!t)
+      return r;
+    const a = r.slice(1);
+    return `${t}${a}`;
   }
   /**
    * Removes the specified base path from the beginning of a given route path.
@@ -4329,8 +4316,8 @@ const a = class a {
    * stripBase('/about', '/base');     // returns '/about' (base not present)
    * stripBase('/base', '/base');      // returns '/'
    */
-  stripBase(t, r) {
-    return r || (r = this.getNavigationBaseUrl()), r !== "/" && t.startsWith(r) ? "/" + t.slice(r.length).replace(/^\/+/, "") : t;
+  stripBase(r, t) {
+    return t || (t = this.getNavigationBaseUrl()), t !== "/" && r.startsWith(t) ? "/" + r.slice(t.length).replace(/^\/+/, "") : r;
   }
   /**
    * Pushes a new entry to the browser's history stack.
@@ -4342,18 +4329,18 @@ const a = class a {
    * @example
    * Router.push('/about', { from: 'home' });
    */
-  push(t, r = {}, i = "") {
+  push(r, t = {}, a = "") {
     var l;
     const n = {
-      ...r,
+      ...t,
       ...history.state ?? {},
-      current: t,
+      current: r,
       back: (l = history.state) == null ? void 0 : l.current,
       forward: void 0,
       replaced: !1,
       position: history.length + 1
     };
-    window.history.pushState(n, i, t);
+    window.history.pushState(n, a, r);
   }
   /**
    * Replaces the current entry in the browser's history stack.
@@ -4365,15 +4352,15 @@ const a = class a {
    * @example
    * Router.replace('/login', { reason: 'session expired' });
    */
-  replace(t, r = {}, i = "") {
+  replace(r, t = {}, a = "") {
     const n = {
-      ...r,
+      ...t,
       ...history.state ?? {},
       forward: void 0,
-      current: t,
+      current: r,
       replaced: !0
     };
-    window.history.replaceState(n, i, t);
+    window.history.replaceState(n, a, r);
   }
   /**
    * Dispatches a custom event before navigation occurs.
@@ -4383,9 +4370,9 @@ const a = class a {
    * @param mode - The navigation mode ('push' or 'replace').
    * @param data - Optional state object for the navigation.
    */
-  dispatchBeforeNavigationEvent(t, r, i) {
+  dispatchBeforeNavigationEvent(r, t, a) {
     window.dispatchEvent(new CustomEvent("wangs-ui-core:before-navigation-event", {
-      detail: { route: t, mode: r, state: i }
+      detail: { route: r, mode: t, state: a }
     }));
   }
   /**
@@ -4396,9 +4383,9 @@ const a = class a {
    * @param mode - The navigation mode ('push' or 'replace').
    * @param data - Optional state object for the navigation.
    */
-  dispatchNavigationEvent(t, r, i) {
+  dispatchNavigationEvent(r, t, a) {
     window.dispatchEvent(new CustomEvent("wangs-ui-core:navigation-event", {
-      detail: { route: t, mode: r, state: i }
+      detail: { route: r, mode: t, state: a }
     }));
   }
   /**
@@ -4418,17 +4405,17 @@ const a = class a {
    * @example
    * router.navigateToRoute('/about', 'push', { some: 'state' }, '',);
    */
-  navigateToRoute(t, r = "push", i = history.state, n = "") {
-    if (!t)
+  navigateToRoute(r, t = "push", a = history.state, n = "") {
+    if (!r)
       return;
-    const l = typeof t == "string" ? t : t.toString(), o = this.normalizePath(l);
+    const l = typeof r == "string" ? r : r.toString(), o = this.normalizePath(l);
     if (o === location.pathname)
       return console.warn("[WangsUIRouter] Navigation aborted: target route is the same as the current route.");
-    this.dispatchBeforeNavigationEvent(o, r, i), r === "push" ? this.push(o, i, n) : this.replace(o, i, n), this.dispatchNavigationEvent(o, r, i);
+    this.dispatchBeforeNavigationEvent(o, t, a), t === "push" ? this.push(o, a, n) : this.replace(o, a, n), this.dispatchNavigationEvent(o, t, a);
   }
 };
-b(a, "SINGLETON_KEY", "__WANGS_UI_ROUTER_INSTANCE__");
-let p = a;
+b(s, "SINGLETON_KEY", "__WANGS_UI_ROUTER_INSTANCE__");
+let p = s;
 new p();
 const me = m("WANGS-INPUT-OTP", {
   root: {
@@ -4439,73 +4426,72 @@ const me = m("WANGS-INPUT-OTP", {
       "w-max"
     ]
   },
-  input: ({ props: e, context: t, parent: r }) => ({
+  input: ({ props: e, context: r, parent: t }) => ({
     class: [
       // Font
       "text-[14px] leading-none font-medium",
       // Flex & Alignment
-      { "flex-1 w-[1%]": r.tagName == "WANGS-INPUT-GROUP" },
+      { "flex-1 w-[1%]": t.tagName == "WANGS-INPUT-GROUP" },
       "text-center",
       // Spacing
       "m-0",
       // Size
       "w-[42px] h-[42px]",
       // Shape
-      { "rounded-md": r.tagName !== "WANGS-INPUT-GROUP" },
+      { "rounded-md": t.tagName !== "WANGS-INPUT-GROUP" },
       {
-        "first:rounded-l-md rounded-none last:rounded-r-md": r.tagName == "WANGS-INPUT-GROUP"
+        "first:rounded-l-md rounded-none last:rounded-r-md": t.tagName == "WANGS-INPUT-GROUP"
       },
       {
-        "border-0 border-y border-l last:border-r": r.tagName == "WANGS-INPUT-GROUP"
+        "border-0 border-y border-l last:border-r": t.tagName == "WANGS-INPUT-GROUP"
       },
       // Colors
-      "text-general-800 dark:text-general-800",
-      "placeholder:text-surface-400 dark:placeholder:text-surface-500",
-      "bg-white dark:bg-white",
+      "text-general-800 dark:text-general-50",
+      "bg-white dark:bg-grayscale-900",
       {
         "ring-1": navigator.userAgent.includes("Firefox"),
         "ring-[0.5px]": !navigator.userAgent.includes("Firefox")
       },
-      { "ring-general-200 dark:ring-general-200": !e.invalid },
+      { "ring-general-200 dark:ring-grayscale-600": !e.invalid },
       // Invalid State
-      { "ring-danger-500 dark:ring-danger-500": e.invalid },
+      { "ring-danger-500 dark:ring-danger-600": e.invalid },
       // States
       {
-        "hover:bg-primary-50/30 hover:ring-primary-500 dark:hover:ring-primary-400": !t.disabled && !e.invalid,
-        "focus:bg-primary-50/30 focus:ring-primary-500 dark:focus:ring-primary-400": !t.disabled && !e.invalid,
-        "focus:outline-none focus:outline-offset-0": !t.disabled,
-        "opacity-60 select-none pointer-events-none cursor-default": t.disabled
+        "hover:bg-primary-50/30 dark:hover:bg-grayscale-800/30 hover:ring-primary-500 dark:hover:ring-primary-300": !r.disabled && !e.invalid,
+        "focus:bg-primary-50/30 dark:focus:bg-grayscale-800/30 focus:ring-primary-500 dark:focus:ring-primary-300": !r.disabled && !e.invalid,
+        "focus:outline-none focus:outline-offset-0": !r.disabled,
+        "opacity-60 select-none pointer-events-none cursor-default": r.disabled
       },
       // Filled State *for FloatLabel
-      { filled: r.tagName == "WANGS-FLOAT-LABEL" && t.filled },
+      { filled: t.tagName == "WANGS-FLOAT-LABEL" && r.filled },
       // Misc
       "appearance-none",
       "transition-colors duration-200"
     ]
   })
-}), f = ({ isChromeBased: e, invalidInput: t }) => [
+}), g = ({ isChromeBased: e, invalidInput: r }) => [
   { "ring-[1px]": !e, "ring-[0.5px]": e },
-  { "!ring-danger-500": t },
+  { "!ring-danger-500 dark:!ring-danger-300": r },
   "ring-inset",
-  "ring-general-200",
+  "ring-general-200 dark:ring-grayscale-600",
   "[&:has(:focus)]:bg-none",
-  "[&:has(:focus)]:ring-primary-500",
+  "[&:has(:focus)]:ring-primary-500 dark:[&:has(:focus)]:ring-primary-300",
   "[&:has(:focus)]:ring-1",
-  "bg-white",
+  "bg-white dark:bg-grayscale-900",
   "z-[0] [&:has(:focus)]:z-[12]"
 ], be = {
   dialcode: {
     root: (e) => ({
-      class: [...f(e), "!rounded-l !rounded-r-none"]
+      class: [...g(e), "!rounded-l !rounded-r-none"]
     }),
-    dropdownicon: ({ state: e }) => s.dropdownicon({ state: e })
+    dropdownicon: ({ state: e }) => i.dropdownicon({ state: e })
   },
   input: (e) => ({
     class: [
-      ...f(e),
+      ...g(e),
       "!rounded-r !rounded-l-none -ml-[1px]",
       "focus:bg-none",
-      "focus:ring-primary-500",
+      "focus:ring-primary-500 dark:focus:ring-primary-300",
       "focus:ring-1"
     ]
   })
@@ -4680,7 +4666,7 @@ const me = m("WANGS-INPUT-OTP", {
       "bg-transparent"
     ]
   }
-}, ve = {
+}, ye = {
   root: ({ props: e }) => ({
     class: [
       "relative",
@@ -4737,21 +4723,21 @@ const me = m("WANGS-INPUT-OTP", {
       }
     ]
   }),
-  content: ({ props: e, context: t }) => ({
+  content: ({ props: e, context: r }) => ({
     class: [
       // Shape
       { "rounded-md": e.level < 1 },
       //  Colors
       {
-        "text-surface-500/70": !t.focused && !t.active,
-        "text-surface-500/70 bg-surface-200": t.focused && !t.active,
-        "text-surface-900/80 bg-surface-50": t.focused && t.active,
-        "text-surface-900/80 bg-surface-50": !t.focused && t.active
+        "text-surface-500/70": !r.focused && !r.active,
+        "text-surface-500/70 bg-surface-200": r.focused && !r.active,
+        "text-surface-900/80 bg-surface-50": r.focused && r.active,
+        "text-surface-900/80 bg-surface-50": !r.focused && r.active
       },
       // Hover States
       {
-        "hover:bg-surface-50": !t.active,
-        "hover:bg-surface-100 text-surface-900/80": t.active
+        "hover:bg-surface-50": !r.active,
+        "hover:bg-surface-100 text-surface-900/80": r.active
       },
       // Transitions
       "transition-all",
@@ -4861,7 +4847,7 @@ const me = m("WANGS-INPUT-OTP", {
   end: {
     class: "ml-auto self-center"
   }
-}, he = {
+}, ve = {
   root: {
     class: [
       // Position
@@ -4880,8 +4866,8 @@ const me = m("WANGS-INPUT-OTP", {
       "shadow",
       "overflow-hidden",
       // Colors
-      "bg-white",
-      "text-general-800"
+      "bg-white dark:bg-grayscale-900",
+      "text-general-800 dark:text-general-100"
     ]
   },
   menu: {
@@ -4922,7 +4908,7 @@ const me = m("WANGS-INPUT-OTP", {
     class: [
       "flex items-center justify-start gap-2",
       "px-4 py-[7px]",
-      "hover:bg-primary-50/80",
+      "hover:bg-primary-50/80 dark:hover:bg-grayscale-800/80",
       "text-xs",
       // 'relative',
       // Font
@@ -4947,7 +4933,10 @@ const me = m("WANGS-INPUT-OTP", {
     ]
   },
   label: ({ props: e }) => ({
-    class: ["text-inherit", { "!text-danger-500": e.danger }]
+    class: [
+      "text-inherit",
+      { "!text-danger-500 dark:!text-danger-600": e.danger }
+    ]
   }),
   submenuheader: {
     class: [
@@ -4961,7 +4950,7 @@ const me = m("WANGS-INPUT-OTP", {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, ye = {
+}, he = {
   root: {
     class: [
       "relative",
@@ -5011,20 +5000,20 @@ const me = m("WANGS-INPUT-OTP", {
   menuitem: {
     class: "sm:relative sm:w-auto w-full static"
   },
-  content: ({ props: e, context: t }) => ({
+  content: ({ props: e, context: r }) => ({
     class: [
       // Shape
       { "rounded-md": e.root },
       //  Colors
       {
-        "text-surface-500/70": !t.focused && !t.active,
-        "text-surface-500/70 bg-surface-200": t.focused && !t.active,
-        "text-surface-900/80 bg-surface-50": !t.focused && t.active
+        "text-surface-500/70": !r.focused && !r.active,
+        "text-surface-500/70 bg-surface-200": r.focused && !r.active,
+        "text-surface-900/80 bg-surface-50": !r.focused && r.active
       },
       // Hover States
       {
-        "hover:bg-surface-50": !t.active,
-        "hover:bg-surface-100 text-surface-900/80": t.active
+        "hover:bg-surface-50": !r.active,
+        "hover:bg-surface-100 text-surface-900/80": r.active
       },
       // Transitions
       "transition-all",
@@ -5547,8 +5536,8 @@ const me = m("WANGS-INPUT-OTP", {
       "absolute left-0 top-0 mt-2",
       "z-40 transform origin-center",
       // Color
-      "bg-white",
-      "text-general-800",
+      "bg-white dark:bg-grayscale-900",
+      "text-general-800 dark:text-white",
       // Before: Triangle
       "before:absolute before:-top-2 before:ml-4 before:z-50",
       "before:w-0 before:h-0 before:shadow-xl"
@@ -5571,8 +5560,8 @@ const me = m("WANGS-INPUT-OTP", {
     class: [
       // Flex & Alignment
       "flex items-center justify-start flex-wrap gap-0.5",
-      "bg-white",
-      "text-grayscale-900"
+      "bg-white dark:bg-grayscale-900",
+      "text-grayscale-900 dark:text-grayscale-50"
     ]
   },
   paginatorwrapper: {
@@ -5593,7 +5582,7 @@ const me = m("WANGS-INPUT-OTP", {
       // Size
       "w-6 h-6",
       // Color
-      "text-general-300",
+      "text-general-300 dark:text-grayscale-500 ",
       // Transition
       "transition duration-200",
       // Misc
@@ -5613,7 +5602,7 @@ const me = m("WANGS-INPUT-OTP", {
       // Size
       "w-6 h-6",
       // Color
-      "text-general-300",
+      "text-general-300 dark:text-grayscale-500 ",
       // Transition
       "transition duration-200",
       // Misc
@@ -5633,7 +5622,7 @@ const me = m("WANGS-INPUT-OTP", {
       // Size
       "w-6 h-6",
       // Color
-      "text-general-300",
+      "text-general-300 dark:text-grayscale-500 ",
       // Transition
       "transition duration-200",
       // Misc
@@ -5653,7 +5642,7 @@ const me = m("WANGS-INPUT-OTP", {
       // Size
       "w-6 h-6",
       // Color
-      "text-general-300",
+      "text-general-300 dark:text-grayscale-500 ",
       // Transition
       "transition duration-200",
       // Misc
@@ -5672,13 +5661,13 @@ const me = m("WANGS-INPUT-OTP", {
       "w-6 h-6",
       // Color
       {
-        "text-general-300 border-none hover:bg-grayscale-50": !e.active,
-        "text-white bg-primary-500": e.active
+        "text-general-300 dark:text-grayscale-700  border-none hover:bg-grayscale-50 dark:hover:bg-grayscale-800": !e.active,
+        "text-white dark:text-primary-800 bg-primary-500 dark:bg-primary-300": e.active
       },
       // State
       {
         "hover:border-surface-300": !e.disabled && !e.active,
-        "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-primary-500": !e.disabled
+        "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-300": !e.disabled
       },
       // Transition
       "transition duration-200",
@@ -5688,7 +5677,7 @@ const me = m("WANGS-INPUT-OTP", {
     ]
   }),
   rowperpagedropdown: {
-    root: ({ props: e, state: t }) => ({
+    root: ({ props: e, state: r }) => ({
       class: [
         // Display and Position
         "inline-flex items-center justify-center",
@@ -5700,13 +5689,13 @@ const me = m("WANGS-INPUT-OTP", {
         "rounded-[50px]",
         // Color and Background
         "bg-transparent",
-        "border-[0.5px] border-general-200",
+        "border-[0.5px] border-general-200 dark:border-grayscale-600",
         // Transitions
         "transition-all",
         "duration-200",
         // States
         {
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600": !t.focused
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 dark:focus-visible:ring-primary-400": !r.focused
         },
         // Misc
         "cursor-pointer",
@@ -5728,7 +5717,7 @@ const me = m("WANGS-INPUT-OTP", {
         "flex items-center",
         // Color and Background
         "bg-transparent",
-        "text-general-800",
+        "text-general-800 dark:text-general-50",
         // Sizing and Spacing
         "w-max",
         // 'py-1.5 px-3 pr-0',
@@ -5776,9 +5765,9 @@ const me = m("WANGS-INPUT-OTP", {
         "rounded-md",
         // 'shadow-md',
         // Color
-        "bg-white",
-        "text-general-800",
-        "ring-1 ring-inset ring-general-200"
+        "bg-white dark:bg-grayscale-900",
+        "text-general-800 dark:text-general-100",
+        "ring-1 ring-inset ring-general-200 dark:ring-grayscale-600"
       ]
     },
     wrapper: {
@@ -5820,7 +5809,7 @@ const me = m("WANGS-INPUT-OTP", {
         //     !context.focused && context.selected,
         // },
         //States
-        "hover:bg-primary-50",
+        "hover:bg-primary-50 dark:hover:bg-grayscale-800",
         // Misc
         "cursor-pointer",
         "overflow-hidden",
@@ -5845,8 +5834,8 @@ const me = m("WANGS-INPUT-OTP", {
           "flex-auto",
           // Color and Background
           "bg-transparent",
-          "border-general-200 border-[0.5px]",
-          "text-general-800",
+          "border-general-200 dark:border-grayscale-600 border-[0.5px]",
+          "text-general-800 dark:text-general-100",
           // Sizing and Spacing
           "max-w-[3rem] w-fit",
           "px-3 py-1",
@@ -5856,7 +5845,7 @@ const me = m("WANGS-INPUT-OTP", {
           "transition",
           "duration-200",
           // States
-          "hover:ring-general-200",
+          "hover:ring-general-200 dark:hover:ring-grayscale-600",
           "focus-visible:outline-none focus-visible:shadow-none",
           // 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-body',
           // Misc
@@ -5869,7 +5858,7 @@ const me = m("WANGS-INPUT-OTP", {
     }
   },
   jumptopagedropdown: {
-    root: ({ props: e, state: t }) => ({
+    root: ({ props: e, state: r }) => ({
       class: [
         // Display and Position
         "inline-flex",
@@ -5886,7 +5875,7 @@ const me = m("WANGS-INPUT-OTP", {
         "duration-200",
         // States
         {
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600": !t.focused
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 dark:focus-visible:ring-primary-400": !r.focused
         },
         // Misc
         "cursor-pointer",
@@ -5993,13 +5982,13 @@ const me = m("WANGS-INPUT-OTP", {
           "text-surface-700/80": !e.focused && !e.selected
         },
         {
-          "bg-primary-500 text-white": e.focused && e.selected
+          "bg-primary-500 dark:bg-primary-300 text-white dark:text-primary-800": e.focused && e.selected
         },
         {
           "bg-transparent text-surface-700/80": !e.focused && e.selected
         },
         //States
-        "hover:bg-primary-500 hover:text-white",
+        "hover:bg-primary-500 hover:text-white dark:hover:bg-primary-300 dark:hover:text-primary-800",
         // Misc
         "cursor-pointer",
         "overflow-hidden",
@@ -6089,7 +6078,7 @@ const me = m("WANGS-INPUT-OTP", {
     leaveActiveClass: "overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]",
     leaveToClass: "max-h-0"
   }
-}, Te = {
+}, _e = {
   panel: {
     class: "mb-1"
   },
@@ -6100,15 +6089,15 @@ const me = m("WANGS-INPUT-OTP", {
       "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-primary-400/50"
     ]
   },
-  headercontent: ({ context: e, instance: t }) => {
-    var r, i;
+  headercontent: ({ context: e, instance: r }) => {
+    var t, a;
     return {
       class: [
         // Shape
         "rounded-t-md",
         {
-          "rounded-br-md rounded-bl-md": !e.active || ((r = t.activeItem) == null ? void 0 : r.items) === void 0,
-          "rounded-br-0 rounded-bl-0": e.active && ((i = t.activeItem) == null ? void 0 : i.items) !== void 0
+          "rounded-br-md rounded-bl-md": !e.active || ((t = r.activeItem) == null ? void 0 : t.items) === void 0,
+          "rounded-br-0 rounded-bl-0": e.active && ((a = r.activeItem) == null ? void 0 : a.items) !== void 0
         },
         // Color
         "border border-surface-200",
@@ -6206,13 +6195,13 @@ const me = m("WANGS-INPUT-OTP", {
     leaveActiveClass: "overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]",
     leaveToClass: "max-h-0"
   }
-}, _e = {
+}, Pe = {
   root: ({ props: e }) => ({
     class: [
       "w-full",
       "inline-flex relative",
       // 'border-[0.5px] border-general-200 rounded',
-      "text-general-800",
+      "text-general-800 dark:text-general-50",
       {
         "opacity-60 select-none pointer-events-none cursor-default": e.disabled
       }
@@ -6220,7 +6209,7 @@ const me = m("WANGS-INPUT-OTP", {
   }),
   input: {
     class: [
-      "!bg-primary-500",
+      "!bg-primary-500 dark:!bg-primary-300",
       "placeholder:!font-normal"
       // 'bg-white text-general-800 placeholder:text-general-200 placeholder:font-light',
       // 'w-full h-full !max-h-[43px]',
@@ -6239,8 +6228,8 @@ const me = m("WANGS-INPUT-OTP", {
       "border-0",
       "shadow-md rounded-md",
       // Colors
-      "bg-white",
-      "text-general-800",
+      "bg-white dark:bg-grayscale-900",
+      "text-general-800 dark:text-general-50",
       ""
     ]
   },
@@ -6254,22 +6243,21 @@ const me = m("WANGS-INPUT-OTP", {
       "h-2",
       "rounded-md",
       // Spacing
-      "mb-2",
+      "mb-2"
       // Colors
-      "bg-surface-100"
     ]
   },
   meterlabel: ({ instance: e }) => {
-    var t, r, i;
+    var r, t, a;
     return {
       class: [
         // Size
         "h-full",
         // Colors
         {
-          "bg-red-500/50": ((t = e == null ? void 0 : e.meter) == null ? void 0 : t.strength) == "weak",
-          "bg-orange-500/50": ((r = e == null ? void 0 : e.meter) == null ? void 0 : r.strength) == "medium",
-          "bg-green-500/50": ((i = e == null ? void 0 : e.meter) == null ? void 0 : i.strength) == "strong"
+          "bg-red-500/50 dark:bg-red-600/50": ((r = e == null ? void 0 : e.meter) == null ? void 0 : r.strength) == "weak",
+          "bg-orange-500/50 dark:bg-orange-600/50": ((t = e == null ? void 0 : e.meter) == null ? void 0 : t.strength) == "medium",
+          "bg-green-500/50 dark:bg-green-600/50": ((a = e == null ? void 0 : e.meter) == null ? void 0 : a.strength) == "strong"
         },
         // Transitions
         "transition-all duration-1000 ease-in-out"
@@ -6279,15 +6267,15 @@ const me = m("WANGS-INPUT-OTP", {
   showicon: {
     class: [
       "absolute top-[54%] right-3 -mt-2",
-      "text-general-200",
-      "focus-visible:text-general-500 hover:text-general-500",
+      "text-general-200 dark:text-general-400",
+      "focus-visible:text-general-500 dark:focus-visible:text-general-100 hover:text-general-500 dark:hover:text-general-100",
       "[&>.icon]:!w-4 [&>.icon]:!h-4"
     ]
   },
   hideicon: {
     class: [
       "absolute top-[54%] right-3 -mt-2",
-      "text-general-200"
+      "text-general-200 dark:text-general-400"
     ]
   },
   transition: {
@@ -6296,7 +6284,7 @@ const me = m("WANGS-INPUT-OTP", {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, Ne = {
+}, Te = {
   root: {
     class: [
       // Flexbox
@@ -6867,7 +6855,7 @@ const me = m("WANGS-INPUT-OTP", {
     leaveActiveClass: "!transition-none",
     leaveToClass: "!transition-none"
   }
-}, Ie = {
+}, Ne = {
   root: ({ props: e }) => ({
     class: [
       {
@@ -6993,21 +6981,21 @@ const me = m("WANGS-INPUT-OTP", {
       "ring-1",
       { "ring-1": !k, "ring-[0.5px]": k },
       {
-        "before:bg-white": e.modelValue == e.trueValue,
-        "before:bg-general-100": e.modelValue !== e.trueValue,
+        "before:bg-white dark:before:bg-grayscale-900": e.modelValue == e.trueValue,
+        "before:bg-general-100 dark:before:bg-general-500": e.modelValue !== e.trueValue,
         // Inactive and Enabled
-        "bg-white ring-general-100": e.modelValue !== e.trueValue && !e.disabled,
+        "bg-transparent ring-general-100 dark:ring-general-500": e.modelValue !== e.trueValue && !e.disabled,
         // Active and Enabled
-        "bg-primary-500 ring-transparent": e.modelValue == e.trueValue && !e.disabled,
+        "bg-primary-500 dark:bg-primary-300 ring-transparent": e.modelValue == e.trueValue && !e.disabled,
         // Active and Disabled
-        "bg-general-200  ring-transparent": e.modelValue == e.trueValue && e.disabled,
+        "bg-general-200 dark:bg-general-400  ring-transparent": e.modelValue == e.trueValue && e.disabled,
         // Inactive and Disabled
-        "bg-general-200 ring-general-100": e.modelValue !== e.trueValue && e.disabled
+        "bg-general-200 dark:bg-general-400 ring-general-100 dark:ring-general-500": e.modelValue !== e.trueValue && e.disabled
       },
       // TriState colors
       e.triState && {
-        "!bg-danger-500 before:!bg-white ring-transparent": e.modelValue == e.falseValue && !e.disabled,
-        "!bg-success-500 before:!bg-white ring-transparent": e.modelValue == e.trueValue && !e.disabled
+        "!bg-danger-500 dark:!bg-danger-200 before:!bg-white dark:before:!bg-grayscale-900 ring-transparent": e.modelValue == e.falseValue && !e.disabled,
+        "!bg-success-500 dark:!bg-success-300 before:!bg-white dark:before:!bg-grayscale-900 ring-transparent": e.modelValue == e.trueValue && !e.disabled
       },
       // States
       "peer-focus-visible:!outline peer-focus-visible:!outline-offset-0 peer-focus-visible:!outline-primary-500/[5%]",
@@ -7049,7 +7037,7 @@ const me = m("WANGS-INPUT-OTP", {
       "relative",
       "w-max h-max items-start cursor-pointer",
       "flex items-start select-none text-xs tracking-[0.02em] font-medium",
-      "text-general-800",
+      "text-general-800 dark:text-general-100",
       "shrink-0",
       // Alignment
       "inline-flex",
@@ -7063,10 +7051,10 @@ const me = m("WANGS-INPUT-OTP", {
     class: "ml-1 leading-4"
   },
   tooltipicon: {
-    class: "text-primary-500 w-[10px] h-[10px]"
+    class: "text-primary-500 dark:text-primary-300 w-[10px] h-[10px]"
   }
-}, Pe = {
-  root: ({ props: e, state: t }) => ({
+}, Ie = {
+  root: ({ props: e, state: r }) => ({
     class: [
       "relative",
       // Flexbox & Alignment
@@ -7079,14 +7067,14 @@ const me = m("WANGS-INPUT-OTP", {
       "rounded-full",
       // Colors
       {
-        "bg-white": !e.disabled || t.checked,
-        "bg-general-50": e.disabled && !t.checked,
-        "ring-general-100": !e.disabled && !t.checked,
-        "ring-primary-500": !e.disabled && t.checked,
-        "ring-general-200": e.disabled
+        "bg-white dark:bg-grayscale-800": !e.disabled || r.checked,
+        "bg-general-50 dark:bg-grayscale-300": e.disabled && !r.checked,
+        "ring-general-100 dark:ring-general-300": !e.disabled && !r.checked,
+        "ring-primary-500 dark:ring-primary-300": !e.disabled && r.checked,
+        "ring-general-200 dark:ring-general-400": e.disabled
       },
       {
-        "!ring-danger-500": e.invalid
+        "!ring-danger-500 dark:!ring-danger-600": e.invalid
       },
       // Misc
       "cursor-pointer"
@@ -7094,7 +7082,7 @@ const me = m("WANGS-INPUT-OTP", {
     "data-wv-name": "buttonradio",
     "data-wv-section": "root"
   }),
-  box: ({ props: e, state: t }) => ({
+  box: ({ props: e, state: r }) => ({
     class: [
       // Size
       "w-2 h-2",
@@ -7109,13 +7097,13 @@ const me = m("WANGS-INPUT-OTP", {
       "transition duration-200 ease-in-out",
       // Colors
       {
-        "bg-primary-500": t.checked && e.value !== void 0 && !e.disabled,
-        "bg-general-200": t.checked && e.value !== void 0 && e.disabled
+        "bg-primary-500 dark:bg-primary-400": r.checked && e.value !== void 0 && !e.disabled,
+        "bg-general-200 dark:bg-general-400": r.checked && e.value !== void 0 && e.disabled
       },
       // States
       {
         "outline-none outline-offset-0": !e.disabled,
-        "peer-focus-visible:ring-8 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-primary-400/[8%]": !e.disabled
+        "peer-focus-visible:ring-8 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-primary-400/[8%] dark:peer-focus-visible:ring-primary-300": !e.disabled
       }
     ]
   }),
@@ -7180,13 +7168,13 @@ const me = m("WANGS-INPUT-OTP", {
       "text-red-500"
     ]
   },
-  item: ({ props: e, context: t }) => ({
+  item: ({ props: e, context: r }) => ({
     class: [
       // Flex & Alignment
       "inline-flex items-center",
       // State
       {
-        "outline-none ring-2 ring-primary-500": t.focused
+        "outline-none ring-2 ring-primary-500": r.focused
       },
       // Misc
       {
@@ -7217,12 +7205,12 @@ const me = m("WANGS-INPUT-OTP", {
       "transition duration-200 ease-in"
     ]
   })
-}, Fe = {
+}, $e = {
   root: {
     class: ["block absolute bg-surface-0/50 rounded-full pointer-events-none"],
     style: "transform: scale(0)"
   }
-}, Ve = {
+}, Fe = {
   wrapper: {
     class: [
       // Size & Position
@@ -7281,7 +7269,7 @@ const me = m("WANGS-INPUT-OTP", {
       "relative"
     ]
   }
-}, Ue = {
+}, Ve = {
   root: ({ props: e }) => ({
     class: [
       // Flex & Alignment
@@ -7317,7 +7305,7 @@ const me = m("WANGS-INPUT-OTP", {
     leaveActiveClass: "transition-opacity duration-150",
     leaveToClass: "opacity-0"
   }
-}, Ee = {
+}, Ue = {
   root: ({ props: e }) => ({
     class: [
       "shadow-sm flex flex-col min-w-[43px] w-max"
@@ -7489,7 +7477,7 @@ const me = m("WANGS-INPUT-OTP", {
     leaveActiveClass: "transition-opacity duration-400 ease-in",
     leaveToClass: "opacity-0 mask-active"
   }
-}, Ge = {
+}, Ee = {
   root: ({ props: e }) => ({
     class: [
       "overflow-hidden",
@@ -7505,7 +7493,7 @@ const me = m("WANGS-INPUT-OTP", {
       "bg-general-50"
     ]
   })
-}, $e = {
+}, Ge = {
   root: ({ props: e }) => ({
     class: [
       "relative",
@@ -8136,7 +8124,7 @@ const me = m("WANGS-INPUT-OTP", {
       "justify-center"
     ]
   },
-  action: ({ props: e, context: t, state: r }) => ({
+  action: ({ props: e, context: r, state: t }) => ({
     class: [
       // Flexbox
       "inline-flex items-start relative",
@@ -8146,7 +8134,7 @@ const me = m("WANGS-INPUT-OTP", {
       "rounded-md",
       // Spacing
       {
-        "pr-4 min-[576px]:pr-32 md:pr-40": e.model.length !== t.index + 1
+        "pr-4 min-[576px]:pr-32 md:pr-40": e.model.length !== r.index + 1
       },
       // Colors
       "bg-surface-0",
@@ -8156,10 +8144,10 @@ const me = m("WANGS-INPUT-OTP", {
       // After
       "after:border-t-2",
       {
-        "after:border-surface-200": r.d_activeStep <= t.index
+        "after:border-surface-200": t.d_activeStep <= r.index
       },
       {
-        "after:border-primary-500": r.d_activeStep > t.index
+        "after:border-primary-500": t.d_activeStep > r.index
       },
       "after:w-full",
       "after:absolute",
@@ -8167,10 +8155,10 @@ const me = m("WANGS-INPUT-OTP", {
       "after:left-0",
       "after:transform",
       "after:-mt-3",
-      { "after:hidden": e.model.length == t.index + 1 }
+      { "after:hidden": e.model.length == r.index + 1 }
     ]
   }),
-  step: ({ context: e, props: t, state: r }) => ({
+  step: ({ context: e, props: r, state: t }) => ({
     class: [
       // Flexbox
       "flex items-center justify-center",
@@ -8186,22 +8174,22 @@ const me = m("WANGS-INPUT-OTP", {
       "leading-[2rem]",
       // Colors
       {
-        "text-surface-400/60": !e.active && r.d_activeStep < e.index,
-        "border-surface-100": !e.active && r.d_activeStep < e.index,
-        "bg-surface-0": r.d_activeStep <= e.index
+        "text-surface-400/60": !e.active && t.d_activeStep < e.index,
+        "border-surface-100": !e.active && t.d_activeStep < e.index,
+        "bg-surface-0": t.d_activeStep <= e.index
       },
       {
         "border-primary-500": e.active,
         "text-primary-500": e.active
       },
       {
-        "bg-primary-500": r.d_activeStep > e.index,
-        "text-surface-0": r.d_activeStep > e.index,
-        "border-primary-500": r.d_activeStep > e.index
+        "bg-primary-500": t.d_activeStep > e.index,
+        "text-surface-0": t.d_activeStep > e.index,
+        "border-primary-500": t.d_activeStep > e.index
       },
       // States
       {
-        "hover:border-surface-300": !e.active && !t.readonly
+        "hover:border-surface-300": !e.active && !r.readonly
       },
       // Transition
       "transition-colors duration-200 ease-in-out"
@@ -8241,17 +8229,17 @@ const me = m("WANGS-INPUT-OTP", {
       "list-none",
       "p-0 m-0",
       // Colors
-      "text-general-100",
+      "text-general-100 dark:text-general-100",
       {
-        "w-max ring-1 ring-inset ring-general-100 rounded !m-[2px]": e.type === "segmented"
+        "w-max ring-1 ring-inset ring-general-100 dark:ring-general-100 rounded !m-[2px]": e.type === "segmented"
       }
     ]
   }),
   menuitem: {
     class: "mr-0"
   },
-  action: ({ context: e, props: t }) => {
-    var r, i;
+  action: ({ context: e, props: r }) => {
+    var t, a;
     return {
       class: [
         "relative",
@@ -8262,37 +8250,37 @@ const me = m("WANGS-INPUT-OTP", {
         "flex items-center",
         // Spacing
         {
-          "rounded-xl py-1 px-3": t.type === "pill",
-          rounded: t.type === "segmented",
-          "p-2 pb-1.5 pt-0.5 !h-6": t.type === "tab",
-          "py-[5px] px-3 !h-[26px]": t.type === "segmented",
-          "ml-1": t.type === "pill" && e.index !== 0
+          "rounded-xl py-1 px-3": r.type === "pill",
+          rounded: r.type === "segmented",
+          "p-2 pb-1.5 pt-0.5 !h-6": r.type === "tab",
+          "py-[5px] px-3 !h-[26px]": r.type === "segmented",
+          "ml-1": r.type === "pill" && e.index !== 0
         },
         // Shape
         {
-          "border-b-2": t.type === "tab"
+          "border-b-2": r.type === "tab"
         },
         // Colors and Conditions
         {
-          "border-primary-500": e.active,
-          "border-grayscale-400": !e.active,
-          "text-grayscale-600": !e.active,
-          "text-primary-500": e.active && t.type !== "segmented",
-          "bg-primary-50 text-primary-500": t.type === "pill" && e.active,
-          "bg-grayscale-200 text-grayscale-800": t.type === "pill" && !e.active,
-          "bg-primary-500 text-white shadow-[-2px_2px_2px_rgba(0,0,0,0.25)]": t.type === "segmented" && e.active,
-          "!text-general-800": t.type === "segmented" && !e.active,
-          "bg-transparent ": t.type !== "pill" && !e.active
+          "border-primary-500 dark:border-primary-300": e.active,
+          "border-grayscale-400 dark:border-grayscale-600": !e.active,
+          "text-grayscale-600 dark:text-grayscale-600": !e.active,
+          "text-primary-500 dark:text-primary-300": e.active && r.type !== "segmented",
+          "bg-primary-50 text-primary-500 dark:bg-primary-300 dark:text-primary-800": r.type === "pill" && e.active,
+          "bg-grayscale-200 text-grayscale-800 dark:bg-grayscale-800 dark:text-grayscale-50": r.type === "pill" && !e.active,
+          "bg-primary-500 text-white shadow-[-2px_2px_2px_rgba(0,0,0,0.25)] dark:bg-primary-300 dark:text-primary-800": r.type === "segmented" && e.active,
+          "!text-general-800 dark:!text-general-50": r.type === "segmented" && !e.active,
+          "bg-transparent dark:bg-transparent": r.type !== "pill" && !e.active
         },
         // States
         "focus-visible:outline-none focus-visible:outline-offset-0",
         {
-          "focus-visible:border-primary-200 focus-visible:text-primary-400": !e.active
+          "focus-visible:border-primary-200 dark:focus-visible:border-primary-300 focus-visible:text-primary-400 dark:focus-visible:text-primary-500": !e.active
         },
         // Disabled States
         {
-          "pointer-events-none": (r = e.item) == null ? void 0 : r.disabled,
-          "opacity-60": (i = e.item) == null ? void 0 : i.disabled
+          "pointer-events-none": (t = e.item) == null ? void 0 : t.disabled,
+          "opacity-60": (a = e.item) == null ? void 0 : a.disabled
         },
         // Transitions
         "transition-all duration-200",
@@ -8310,7 +8298,7 @@ const me = m("WANGS-INPUT-OTP", {
   },
   inkbar: ({ props: e }) => ({
     class: [
-      "grow border-b-2 border-primary-100",
+      "grow border-b-2 border-grayscale-400 dark:border-grayscale-600",
       {
         hidden: e.type === "pill" || e.useTrailingLine === !1 || e.type === "segmented"
       }
@@ -8392,7 +8380,7 @@ const me = m("WANGS-INPUT-OTP", {
         }
       ]
     }),
-    headerAction: ({ parent: e, context: t }) => ({
+    headerAction: ({ parent: e, context: r }) => ({
       class: [
         "relative",
         // Font
@@ -8408,20 +8396,20 @@ const me = m("WANGS-INPUT-OTP", {
         "rounded-t-md",
         // Colors and Conditions
         {
-          "border-surface-200": e.state.d_activeIndex !== t.index,
-          "bg-surface-0": e.state.d_activeIndex !== t.index,
-          "text-surface-700/80": e.state.d_activeIndex !== t.index,
-          "bg-surface-0": e.state.d_activeIndex === t.index,
-          "border-primary-500": e.state.d_activeIndex === t.index,
-          "text-primary-500": e.state.d_activeIndex === t.index
+          "border-surface-200": e.state.d_activeIndex !== r.index,
+          "bg-surface-0": e.state.d_activeIndex !== r.index,
+          "text-surface-700/80": e.state.d_activeIndex !== r.index,
+          "bg-surface-0": e.state.d_activeIndex === r.index,
+          "border-primary-500": e.state.d_activeIndex === r.index,
+          "text-primary-500": e.state.d_activeIndex === r.index
         },
         // States
         "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-inset",
         "focus-visible:ring-primary-500",
         {
-          "hover:bg-surface-0": e.state.d_activeIndex !== t.index,
-          "hover:border-surface-400": e.state.d_activeIndex !== t.index,
-          "hover:text-surface-900": e.state.d_activeIndex !== t.index
+          "hover:bg-surface-0": e.state.d_activeIndex !== r.index,
+          "hover:border-surface-400": e.state.d_activeIndex !== r.index,
+          "hover:text-surface-900": e.state.d_activeIndex !== r.index
         },
         // Transitions
         "transition-all duration-200",
@@ -8536,17 +8524,17 @@ const me = m("WANGS-INPUT-OTP", {
     ]
   }
 }, He = {
-  root: ({ context: e, props: t }) => ({
+  root: ({ context: e, props: r }) => ({
     class: [
       // Font
       "font-medium text-xs tracking-[0.02em]",
-      "placeholder:text-general-200 placeholder:!font-light",
+      "placeholder:text-general-200 dark:placeholder:text-general-600 placeholder:!font-light",
       "w-full",
       {
-        "resize-none": t.autoResize,
-        resize: !t.autoResize
+        "resize-none": r.autoResize,
+        resize: !r.autoResize
       },
-      t.inputClass,
+      r.inputClass,
       // Spacing
       "m-0",
       "py-1 px-3",
@@ -8555,19 +8543,19 @@ const me = m("WANGS-INPUT-OTP", {
       "appearance-none",
       ...ne,
       {
-        "!ring-danger-500": e.invalidInput
+        "!ring-danger-500 dark:!ring-danger-300": e.invalidInput
       },
       // // States
       {
-        "bg-white text-general-800": !e.disabled,
-        "bg-general-50 text-general-200": e.disabled
+        "bg-white text-general-800 dark:bg-grayscale-900 dark:text-general-50": !e.disabled,
+        "bg-general-50 dark:bg-general-700 text-general-200 dark:text-general-500": e.disabled
       },
       "focus-visible:outline-none",
       // Misc
       "appearance-none",
       "transition-colors duration-200"
     ],
-    style: `min-height: ${t.rows * 26}px`,
+    style: `min-height: ${r.rows * 26}px`,
     "data-wv-name": "textarea",
     "data-wv-section": "root"
   })
@@ -8673,23 +8661,26 @@ const me = m("WANGS-INPUT-OTP", {
   separator: {
     class: "border-t border-surface-200 my-1"
   }
-}, g = (e) => {
+}, f = (e) => {
   if (!e) return !0;
-  const t = Object.keys(e);
-  return t.length ? t.every((r) => {
-    const i = e[r];
-    return typeof i == "object" ? Array.isArray(i) ? !i.length || i.every(
-      (n) => typeof n == "object" ? g(n) : n == null
-    ) : g(i) : i == null;
+  const r = Object.keys(e);
+  return r.length ? r.every((t) => {
+    const a = e[t];
+    return typeof a == "object" ? Array.isArray(a) ? !a.length || a.every(
+      (n) => typeof n == "object" ? f(n) : n == null
+    ) : f(a) : a == null;
   }) : !0;
 }, Ke = {
   root: ({ props: e }) => ({
-    class: ["flex flex-col grow", "text-xs font-normal text-grayscale-900"]
+    class: [
+      "flex flex-col grow",
+      "text-xs font-normal text-grayscale-900 dark:text-general-100"
+    ]
   }),
-  event: ({ props: e, context: t }) => ({
+  event: ({ props: e, context: r }) => ({
     class: ["grid grid-cols-[max-content,1fr] gap-x-[10px] gap-y-1"]
   }),
-  opposite: ({ props: e, context: t }) => ({
+  opposite: ({ props: e, context: r }) => ({
     class: "hidden"
   }),
   separator: ({ props: e }) => ({
@@ -8706,22 +8697,22 @@ const me = m("WANGS-INPUT-OTP", {
       "w-[22px] h-[22px]",
       "rounded-full",
       "bg-transparent",
-      "ring-1 ring-inset ring-general-100 p-0.5",
+      "ring-1 ring-inset ring-general-100 dark:ring-general-500 p-0.5",
       "flex items-center justify-center"
     ]
   },
   markerArrow: (e) => ({
     class: [
-      "!w-3 !h-3 hidden transition-transform duration-200 ease-in-out text-grayscale-900",
-      { "!flex": e.detail && !g(e.detail) },
+      "!w-3 !h-3 hidden transition-transform duration-200 ease-in-out text-grayscale-900 dark:text-general-100",
+      { "!flex": e.detail && !f(e.detail) },
       { "rotate-180": e.showDetail }
     ],
     "data-wv-section": "markerArrow"
   }),
   markerDot: (e) => ({
     class: [
-      "hidden w-[6px] h-[6px] m-[3px] rounded-full bg-black",
-      { "!flex": !e.detail || g(e.detail) }
+      "hidden w-[6px] h-[6px] m-[3px] rounded-full bg-black dark:bg-general-100",
+      { "!flex": !e.detail || f(e.detail) }
     ],
     "data-wv-section": "markerDot"
   }),
@@ -8729,18 +8720,18 @@ const me = m("WANGS-INPUT-OTP", {
     class: ["leading-5 cursor-pointer truncate !text-xs !font-bold"]
   },
   contentDetailKey: {
-    class: ["text-general-400 whitespace-nowrap"]
+    class: ["text-general-400 dark:text-general-200 whitespace-nowrap"]
   },
   contentDetailValue: {
-    class: ["text-xs text-general-800"]
+    class: ["text-xs text-general-800 dark:text-general-50"]
   },
   contentDate: {
     class: ["text-xs font-medium"]
   },
   connector: ({ props: e }) => ({
-    class: ["w-[1px] grow bg-general-100"]
+    class: ["w-[1px] grow bg-general-100 dark:bg-general-500"]
   }),
-  content: ({ props: e, context: t }) => ({
+  content: ({ props: e, context: r }) => ({
     class: ["grid grid-rows-[max-content,auto] pb-2.5 gap-1"]
   })
 }, qe = {
@@ -8762,9 +8753,9 @@ const me = m("WANGS-INPUT-OTP", {
       "shadow-lg",
       // Colors
       {
-        "border-success-500 text-success-500 bg-success-50": e.message.severity === "success",
-        "border-danger-500 text-danger-500 bg-danger-50": e.message.severity === "error",
-        "border-primary-500 text-primary-500 bg-primary-50": e.message.severity === "info"
+        "border-success-500 text-success-500 bg-success-50 dark:bg-success-50 dark:border-success-600 dark:text-success-600": e.message.severity === "success",
+        "border-danger-500 text-danger-500 bg-danger-50 dark:bg-danger-50 dark:border-danger-600 dark:text-danger-600": e.message.severity === "error",
+        "border-primary-500 text-primary-500 bg-primary-50 dark:bg-primary-50  dark:border-primary-600 dark:text-primary-600": e.message.severity === "info"
       }
     ],
     "data-wv-severity": e.message.severity
@@ -8801,9 +8792,9 @@ const me = m("WANGS-INPUT-OTP", {
       // Colors
       "bg-transparent",
       {
-        "text-success-500 hover:bg-success-100": e.message.severity === "success",
-        "text-danger-500 hover:bg-danger-100": e.message.severity === "error",
-        "text-primary-500 hover:bg-primary-100": e.message.severity === "info"
+        "text-success-500 dark:text-success-600 hover:bg-success-100 dark:hover:bg-success-200": e.message.severity === "success",
+        "text-danger-500 dark:text-danger-600 hover:bg-danger-100 dark:hover:bg-danger-200": e.message.severity === "error",
+        "text-primary-500 dark:text-primary-600 hover:bg-primary-100 dark:hover:bg-primary-200": e.message.severity === "info"
       },
       // Transitions
       "transition duration-200 ease-in-out",
@@ -8924,7 +8915,7 @@ const me = m("WANGS-INPUT-OTP", {
     class: "flex items-center"
   }
 }, Ze = {
-  root: ({ context: e, props: t }) => ({
+  root: ({ context: e, props: r }) => ({
     class: [
       // Position
       "absolute",
@@ -8946,13 +8937,13 @@ const me = m("WANGS-INPUT-OTP", {
       // Shape
       "rounded-lg",
       // Background
-      "bg-primary-50",
+      "bg-primary-50 dark:bg-primary-100",
       // Spacing
       "px-2 py-1",
       // Typography
       "text-[0.7rem] font-light leading-4 text-left",
       // Color
-      "text-grayscale-900",
+      "text-general-900 dark:text-general-900",
       // Misc
       "whitespace-pre-line",
       "break-words"
@@ -8992,7 +8983,7 @@ const me = m("WANGS-INPUT-OTP", {
       "focus:outline-none focus:outline-offset-0"
     ]
   },
-  content: ({ context: e, props: t }) => ({
+  content: ({ context: e, props: r }) => ({
     class: [
       // Flex and Alignment
       "flex items-center",
@@ -9001,22 +8992,21 @@ const me = m("WANGS-INPUT-OTP", {
       // Spacing
       "p-1",
       // Colors
-      "text-surface-700",
       {
-        "bg-primary-50 !text-primary-500 [&_*]:text-primary-500": e.selected && t.selectionMode === "single"
+        "bg-primary-50 dark:bg-primary-100 !text-primary-500 dark:!text-primary-300 [&_*]:text-primary-500 dark:[&_*]:text-primary-300 dark:[&_*]:hover:text-primary-300": e.selected && r.selectionMode === "single"
       },
       // States
       {
-        "hover:bg-primary-50": (t.selectionMode == "single" || t.selectionMode == "multiple" || t.selectionMode == "checkbox") && !e.disabled && !e.exactDisabled
+        "hover:bg-primary-50 dark:hover:bg-primary-100 dark:[&_*]:hover:text-general-800 group": (r.selectionMode == "single" || r.selectionMode == "multiple" || r.selectionMode == "checkbox") && !e.disabled && !e.exactDisabled
       },
       {
-        "!text-general-200": e.disabled && !e.exactDisabled,
+        "!text-general-200 dark:!text-grayscale-500": e.disabled && !e.exactDisabled,
         "!pointer-events-none !cursor-default": e.disabled || e.exactDisabled
       },
       // Transition
       "transition-shadow duration-200",
       {
-        "cursor-pointer select-none": t.selectionMode == "single" || t.selectionMode == "multiple"
+        "cursor-pointer select-none": r.selectionMode == "single" || r.selectionMode == "multiple"
       },
       // Miscelanous
       { "cursor-pointer": !e.disabled }
@@ -9034,13 +9024,12 @@ const me = m("WANGS-INPUT-OTP", {
       // Spacing
       "mr-0.5",
       // Colors
-      "text-general-800",
-      "bg-transparent",
+      "text-general-800 dark:text-general-100",
+      "bg-transparent dark:bg-transparent",
       {
         invisible: e.leaf
       },
       // States
-      "hover:bg-surface-100",
       // Transition
       "transition duration-200",
       // Misc
@@ -9072,7 +9061,7 @@ const me = m("WANGS-INPUT-OTP", {
         "select-none"
       ]
     },
-    box: ({ props: e, context: t }) => ({
+    box: ({ props: e, context: r }) => ({
       class: [
         // Alignment
         "flex",
@@ -9085,18 +9074,16 @@ const me = m("WANGS-INPUT-OTP", {
         "rounded",
         "border",
         // Colors
-        "text-surface-600",
         {
-          "border-surface-300 bg-surface-0": !t.checked,
-          "border-primary-500 bg-primary-500": t.checked
+          "border-primary-500 bg-primary-500 dark:border-primary-300 dark:bg-primary-300": r.checked
         },
         {
-          "ring-2 ring-primary-500": !e.disabled && t.focused,
+          "ring-2 ring-primary-500 dark:ring-primary-300": !e.disabled && r.focused,
           "cursor-default opacity-60": e.disabled
         },
         // States
         {
-          "peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500": !e.disabled,
+          "peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-300": !e.disabled,
           "cursor-default opacity-60": e.disabled
         },
         // Transitions
@@ -9124,7 +9111,7 @@ const me = m("WANGS-INPUT-OTP", {
         "opacity-0",
         "rounded-md",
         "outline-none",
-        "border-2 border-surface-300",
+        "border-2",
         // Misc
         "appareance-none"
       ]
@@ -9137,7 +9124,7 @@ const me = m("WANGS-INPUT-OTP", {
         "w-3",
         "h-3",
         // Colors
-        "text-white",
+        "text-white dark:text-general-800",
         // Transitions
         "transition-all",
         "duration-200"
@@ -9173,13 +9160,10 @@ const me = m("WANGS-INPUT-OTP", {
       // Shape
       "rounded-md",
       // Colors
-      "text-surface-900",
-      "placeholder:text-surface-400",
-      "bg-surface-0",
-      "ring-1 ring-inset ring-surface-300",
+      "ring-1 ring-inset dark:ring-white",
       // States
-      "hover:border-primary-500",
-      "focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-500",
+      "hover:border-primary-500 dark:hover:border-primary-300",
+      "focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-500 dark:focus:ring-primary-300",
       // Transition & Misc
       "appearance-none",
       "transition-colors duration-200"
@@ -9187,30 +9171,29 @@ const me = m("WANGS-INPUT-OTP", {
   },
   loadingicon: {
     class: [
-      "text-general-400",
+      "text-general-400 dark:text-general-100",
       "absolute text-lg top-[50%] right-[50%] -mt-2 -mr-2 animate-spin"
     ]
   },
   searchicon: {
     class: [
       // Position
-      "absolute top-1/2 -mt-2 right-3",
+      "absolute top-1/2 -mt-2 right-3"
       // Color
-      "text-surface-600"
     ]
   },
-  label: ({ props: e, context: t }) => ({
+  label: ({ props: e, context: r }) => ({
     class: [
       "inline-flex justify-between items-center gap-2",
       "w-full",
       {
-        "!text-general-200 !cursor-default": t.exactDisabled && e.node.key != -1
+        "!text-general-200 !cursor-default": r.exactDisabled && e.node.key != -1
       },
-      "text-xs font-medium text-general-800"
+      "text-xs font-medium text-general-800 dark:text-general-100"
     ]
   })
-}, et = {
-  root: ({ props: e, state: t }) => ({
+}, er = {
+  root: ({ props: e, state: r }) => ({
     class: [
       // Display and Position
       "inline-flex",
@@ -9223,8 +9206,8 @@ const me = m("WANGS-INPUT-OTP", {
       "bg-surface-0",
       // States
       {
-        "ring-1 ring-inset ring-surface-300": !t.focused,
-        "ring-2 ring-inset ring-primary-500": t.focused
+        "ring-1 ring-inset ring-surface-300": !r.focused,
+        "ring-2 ring-inset ring-primary-500": r.focused
       },
       // Misc
       "cursor-default",
@@ -9314,7 +9297,7 @@ const me = m("WANGS-INPUT-OTP", {
         "focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-500"
       ]
     },
-    content: ({ context: e, props: t }) => ({
+    content: ({ context: e, props: r }) => ({
       class: [
         // Flex and Alignment
         "flex items-center",
@@ -9329,12 +9312,12 @@ const me = m("WANGS-INPUT-OTP", {
         },
         // States
         {
-          "hover:bg-surface-200": t.selectionMode == "single" || t.selectionMode == "multiple"
+          "hover:bg-surface-200": r.selectionMode == "single" || r.selectionMode == "multiple"
         },
         // Transition
         "transition-shadow duration-200",
         {
-          "cursor-pointer select-none": t.selectionMode == "single" || t.selectionMode == "multiple"
+          "cursor-pointer select-none": r.selectionMode == "single" || r.selectionMode == "multiple"
         }
       ]
     }),
@@ -9391,7 +9374,7 @@ const me = m("WANGS-INPUT-OTP", {
           "select-none"
         ]
       },
-      box: ({ props: e, context: t }) => ({
+      box: ({ props: e, context: r }) => ({
         class: [
           // Alignment
           "flex",
@@ -9406,11 +9389,11 @@ const me = m("WANGS-INPUT-OTP", {
           // Colors
           "text-surface-600",
           {
-            "border-surface-300 bg-surface-0": !t.checked,
-            "border-primary-500 bg-primary-500": t.checked
+            "border-surface-300 bg-surface-0": !r.checked,
+            "border-primary-500 bg-primary-500": r.checked
           },
           {
-            "ring-2 ring-primary-500": !e.disabled && t.focused,
+            "ring-2 ring-primary-500": !e.disabled && r.focused,
             "cursor-default opacity-60": e.disabled
           },
           // States
@@ -9530,7 +9513,7 @@ const me = m("WANGS-INPUT-OTP", {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, tt = {
+}, rr = {
   root: {
     class: [
       "relative",
@@ -9543,7 +9526,7 @@ const me = m("WANGS-INPUT-OTP", {
       "duration-200"
     ]
   },
-  box: ({ props: e, context: t }) => ({
+  box: ({ props: e, context: r }) => ({
     class: [
       // Alignment
       "flex",
@@ -9558,18 +9541,18 @@ const me = m("WANGS-INPUT-OTP", {
       // Colors
       "text-surface-0",
       {
-        "border-general-100 bg-surface-0": !t.active && !e.disabled,
-        "border-primary-500 bg-primary-500": t.active && !e.disabled
+        "border-general-100 bg-surface-0": !r.active && !e.disabled,
+        "border-primary-500 bg-primary-500": r.active && !e.disabled
       },
       {
-        "ring-2 ring-primary-500": !e.disabled && t.focused,
+        "ring-2 ring-primary-500": !e.disabled && r.focused,
         "cursor-default": e.disabled
       },
       // States
       {
         "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-primary": !e.disabled,
-        "cursor-default bg-general-50 border-general-200": e.disabled && !t.active,
-        "bg-general-200 border-general-200": e.disabled && t.active
+        "cursor-default bg-general-50 border-general-200": e.disabled && !r.active,
+        "bg-general-200 border-general-200": e.disabled && r.active
       },
       // Transitions
       "transition-colors",
@@ -9630,13 +9613,15 @@ const me = m("WANGS-INPUT-OTP", {
       "duration-200"
     ]
   }
-}, rt = {
+}, tr = {
   root: {
-    class: ["!mt-0 text-danger-500 text-xs font-light tracking-[0.02em]"],
+    class: [
+      "!mt-0 text-danger-500 text-xs font-light tracking-[0.02em] dark:text-danger-300"
+    ],
     "data-wv-name": "validatormessage",
     "data-wv-section": "root"
   }
-}, it = {
+}, ar = {
   root: {
     class: "flex gap-2 items-center shrink-0",
     "data-wv-name": "buttonbulkaction",
@@ -9648,7 +9633,7 @@ const me = m("WANGS-INPUT-OTP", {
     "data-wv-section": "menu"
   },
   selectionmessage: {
-    class: "text-xs text-grayscale-900 cursor-default whitespace-nowrap",
+    class: "text-xs text-grayscale-900 dark:text-white cursor-default whitespace-nowrap",
     "data-wv-section": "selectionmessage"
   },
   buttonselectall: ({ context: e }) => ({
@@ -9663,23 +9648,25 @@ const me = m("WANGS-INPUT-OTP", {
     "data-wv-section": "bulkactiontoggle"
   },
   dropdownmenu: {
-    root: ({ props: e, state: t }) => ({
+    root: ({ props: e, state: r }) => ({
       class: [
         "flex items-center gap-1 transition-all shrink-0",
         "py-[5px] px-3",
-        "ring-inset ring-1 ring-primary-500 rounded",
+        "ring-inset ring-1 ring-primary-500 dark:ring-primary-300 rounded",
         { "opacity-60": e.disabled, "pointer-events-none": e.disabled }
       ],
       "data-wv-section": "dropdownmenu"
     }),
-    input: ({ props: e, state: t }) => ({
+    input: ({ props: e, state: r }) => ({
       class: [
-        "w-full h-full transition-transform !text-primary-500 cursor-pointer",
+        "w-full h-full transition-transform !text-primary-500 dark:!text-primary-300 cursor-pointer",
         "text-xs font-medium outline-none tracking-[0.02em] leading-4"
       ]
     }),
     trigger: {
-      class: ["text-primary-500 [&_i]:w-4 [&_i]:h-4 shrink-0"]
+      class: [
+        "text-primary-500 dark:text-primary-300 [&_i]:w-4 [&_i]:h-4 shrink-0"
+      ]
     },
     item: () => ""
   },
@@ -9691,14 +9678,14 @@ const me = m("WANGS-INPUT-OTP", {
     class: "!p-0 !w-6 !h-6 [&_.icon]:!w-5 [&_.icon]:!h-5",
     "data-wv-section": "buttonclearselection"
   }
-}, st = {
+}, ir = {
   root: {
     class: "flex flex-nowrap items-center gap-1",
     "data-wv-name": "badgegroup",
     "data-wv-section": "root"
   },
   showmorebutton: {
-    class: "!p-1 !h-auto text-primary-500 !font-medium text-xs leading-4 tracking-[0.02em]",
+    class: "!p-1 !h-auto text-primary-500 dark:text-primary-300 !font-medium text-xs leading-4 tracking-[0.02em]",
     "data-wv-section": "showmorebutton"
   },
   showmoredialog: {
@@ -9707,7 +9694,9 @@ const me = m("WANGS-INPUT-OTP", {
       "data-wv-section": "showmoredialog"
     },
     title: {
-      class: ["text-general-900 text-sm font-semibold leading-5"],
+      class: [
+        "text-general-900 dark:text-general-100 text-sm font-semibold leading-5"
+      ],
       "data-wv-section": "showmoredialogtitle"
     },
     content: {
@@ -9716,11 +9705,11 @@ const me = m("WANGS-INPUT-OTP", {
     }
     // All section in Dialog Preset can be added here
   }
-}, nt = {
+}, nr = {
   root: {
     class: [
       "flex gap-[5px] items-center text-left h-[26px]",
-      "text-general-800",
+      "text-general-800 dark:text-general-100",
       "text-xs font-medium leading-4 tracking-[0.02em]"
     ],
     "data-wv-name": "breadcrumb",
@@ -9728,29 +9717,29 @@ const me = m("WANGS-INPUT-OTP", {
   },
   item: ({ context: e }) => ({
     class: {
-      "font-bold text-general-400": e.lastItem,
-      "text-primary-500": !e.lastItem && !e.firstItem
+      "font-bold text-general-400 dark:text-general-50": e.lastItem,
+      "text-primary-500 dark:text-primary-300": !e.lastItem && !e.firstItem
     },
     "data-wv-section": "breadcrumb-menu"
   }),
   itemlink: {
-    class: "cursor-pointer text-primary",
+    class: "cursor-pointer",
     "data-wv-section": "itemlink"
   },
   separator: {
     content: ">",
     "data-wv-section": "separator"
   }
-}, at = {
+}, sr = {
   currency: (e) => ({
-    class: [...f(e), "!rounded-l !rounded-r-none"],
+    class: [...g(e), "!rounded-l !rounded-r-none"],
     "data-wv-section": "currency"
   }),
   value: (e) => ({
-    class: [...f(e), "!rounded-r !rounded-l-none -ml-[1px]"],
+    class: [...g(e), "!rounded-r !rounded-l-none -ml-[1px]"],
     "data-wv-section": "value"
   })
-}, ot = {
+}, or = {
   root: {
     "data-wv-name": "fileupload",
     "data-wv-section": "root"
@@ -9772,7 +9761,7 @@ const me = m("WANGS-INPUT-OTP", {
   requirements: {
     class: "flex justify-start"
   }
-}, lt = {
+}, lr = {
   root: {
     class: [
       "flex flex-col items-start justify-start relative gap-1 w-full shrink-0 overflow-hidden"
@@ -9780,28 +9769,28 @@ const me = m("WANGS-INPUT-OTP", {
     "data-wv-name": "fieldwrapper",
     "data-wv-section": "root"
   },
-  label: ({ props: e, slots: t }) => ({
+  label: ({ props: e, slots: r }) => ({
     class: [
       [
-        "text-general-900 text-xs flex gap-[2px] font-medium tracking-[0.02em]",
+        "text-general-900 dark:text-general-100 text-xs flex gap-[2px] font-medium tracking-[0.02em]",
         e.labelClass
       ],
       {
-        "w-full": t["label-addon"]
+        "w-full": r["label-addon"]
       }
     ],
     "data-wv-section": "fieldlabel"
   }),
   info: {
-    class: "w-2.5 h-2.5 text-primary-500"
+    class: "w-2.5 h-2.5 text-primary-500 dark:text-primary-300"
   },
   optionaltext: {
-    class: "text-grayscale-700 text-[10px] font-normal leading-4"
+    class: "text-grayscale-700 dark:text-general-200 text-[10px] font-normal leading-4"
   },
   arterisksign: {
-    class: "text-danger-500"
+    class: "text-danger-500 dark:text-danger-500"
   }
-}, ct = {
+}, dr = {
   next: ({ context: e }) => ({
     class: [
       "text-2xl text-general-900",
@@ -9825,40 +9814,43 @@ const me = m("WANGS-INPUT-OTP", {
       }
     ]
   })
-}, dt = {
+}, cr = {
   root: {
     class: [
-      "bg-general-50 rounded-lg [&>*]:w-full [&>*]min-w-0",
+      "bg-general-50 dark:bg-grayscale-800 rounded-lg [&>*]:w-full [&>*]min-w-0",
       "grid items-end p-3 gap-x-3 gap-y-4"
     ]
   }
-}, ut = {
+}, ur = {
   root: {
     class: [
       "w-screen h-screen fixed top-0 left-0 z-[9999999]",
-      "bg-white",
+      "bg-white dark:bg-grayscale-900",
+      "text-black dark:text-primary-50",
       "text-base",
       "flex flex-col items-center justify-center",
       "transition-opacity"
     ]
   },
   animation: {
-    class: ["w-[700px] h-auto"]
+    class: ["w-[700px] dark:w-[200px] dark:my-[150px] h-auto"]
   }
-}, ft = {
+}, gr = {
   root: {
     class: "flex items-center gap-1"
   },
   displayname: ({ props: e }) => ({
     class: [
       "text-xs font-medium cursor-pointer",
-      { "text-primary-500 cursor-pointer": e.type === "icon" },
-      { "text-general-800": e.type !== "icon" }
+      {
+        "text-primary-500 dark:text-primary-300 cursor-pointer": e.type === "icon"
+      },
+      { "text-general-800 dark:text-general-50": e.type !== "icon" }
     ]
   }),
   panel: {
     background: {
-      class: "bg-primary-100 absolute top-0 h-[42px] w-full"
+      class: "bg-primary-100 dark:bg-primary-900 absolute top-0 h-[42px] w-full"
     },
     username: {
       class: "font-semibold text-[10px] leading-[15px] text-center text-balance"
@@ -9870,64 +9862,64 @@ const me = m("WANGS-INPUT-OTP", {
       class: "text-[8px] font-normal leading-3"
     },
     userdetaillink: {
-      class: "underline text-primary-400 text-[10px] leading-4 cursor-pointer hover:text-primary-500 transition-colors duration-100"
+      class: "underline text-primary-400 dark:text-primary-300 text-[10px] leading-4 cursor-pointer hover:text-primary-500 dark:hover:text-primary-400 transition-colors duration-100"
     },
     contentwrapper: {
-      class: "relative overflow-hidden flex flex-col gap-2 w-[200px] h-max items-center justify-center p-3 rounded-[10px] border border-grayscale-900 text-grayscale-900"
+      class: "relative overflow-hidden flex flex-col gap-2 w-[200px] h-max items-center justify-center p-3 rounded-[10px] border border-grayscale-900 dark:border-white text-grayscale-900 dark:text-white"
     },
     detailwrapper: {
       class: "flex flex-col gap-0.5 items-center justify-center"
     }
   }
-}, gt = {
-  badge: P,
-  ripple: Fe,
+}, fr = {
+  badge: I,
+  ripple: $e,
   tooltip: Ze
-}, bt = {
-  global: ae,
-  directives: gt,
+}, br = {
+  global: se,
+  directives: fr,
   // Forms
-  form: se,
-  filtercontainer: dt,
-  autocomplete: _,
-  dropdown: re,
-  inputnumber: ge,
+  form: ie,
+  filtercontainer: cr,
+  autocomplete: P,
+  dropdown: te,
+  inputnumber: fe,
   inputphonenumber: be,
-  inputcurrency: at,
+  inputcurrency: sr,
   inputotp: me,
   inputtext: z,
-  inputbadge: ce,
+  inputbadge: de,
   calendar: B,
-  checkbox: d,
-  buttonradio: Pe,
-  selectbutton: Ee,
-  slider: $e,
+  checkbox: c,
+  buttonradio: Ie,
+  selectbutton: Ue,
+  slider: Ge,
   chips: M,
   rating: Se,
-  multiselect: s,
+  multiselect: i,
   togglebutton: Je,
   toggleswitch: u,
   cascadeselect: O,
   listbox: xe,
   colorpicker: D,
-  inputgroup: de,
+  inputgroup: ce,
   inputgroupaddon: ue,
-  inputmask: fe,
+  inputmask: ge,
   knob: pe,
-  treeselect: et,
-  tristatecheckbox: tt,
+  treeselect: er,
+  tristatecheckbox: rr,
   textarea: He,
-  password: _e,
-  validatormessage: rt,
-  fileupload: ot,
-  fieldwrapper: lt,
+  password: Pe,
+  validatormessage: tr,
+  fileupload: or,
+  fieldwrapper: lr,
   // Buttons
   button: S,
-  buttondownload: F,
-  buttonbulkaction: it,
-  buttonsearch: U,
-  buttonsplit: E,
-  buttonfilter: V,
+  buttondownload: $,
+  buttonbulkaction: ar,
+  buttonsearch: V,
+  buttonsplit: U,
+  buttonfilter: F,
   splitbutton: Oe,
   // Data
   paginator: je,
@@ -9938,28 +9930,28 @@ const me = m("WANGS-INPUT-OTP", {
   dataviewlayoutoptions: X,
   organizationchart: Ce,
   orderlist: ke,
-  picklist: Ne,
+  picklist: Te,
   timeline: Ke,
   changelog: L,
   // Panels
-  accordion: T,
+  accordion: _,
   panel: Ae,
-  fieldset: ie,
-  card: G,
+  fieldset: ae,
+  card: E,
   tabview: Me,
   divider: ee,
   toolbar: Xe,
-  scrollpanel: Ve,
+  scrollpanel: Fe,
   // Menu
   contextmenu: Y,
-  menu: he,
-  menubar: ye,
+  menu: ve,
+  menubar: he,
   steps: Le,
-  breadcrumb: nt,
+  breadcrumb: nr,
   tieredmenu: Ye,
-  panelmenu: Te,
-  megamenu: ve,
-  dock: te,
+  panelmenu: _e,
+  megamenu: ye,
+  dock: re,
   tabmenu: Re,
   // Overlays
   dialog: C,
@@ -9973,24 +9965,24 @@ const me = m("WANGS-INPUT-OTP", {
   inlinemessage: le,
   toast: qe,
   // Media
-  carousel: $,
+  carousel: G,
   // Misc
-  badge: c,
-  badgegroup: st,
-  avatar: N,
-  avatargroup: I,
+  badge: d,
+  badgegroup: ir,
+  avatar: T,
+  avatargroup: N,
   tag: We,
   chip: R,
-  progressbar: Ie,
-  skeleton: Ge,
-  scrolltop: Ue,
+  progressbar: Ne,
+  skeleton: Ee,
+  scrolltop: Ve,
   terminal: De,
   image: oe,
-  workcalendar: ct,
-  loading: ut,
+  workcalendar: dr,
+  loading: ur,
   codesnippet: W,
-  username: ft
+  username: gr
 };
 export {
-  bt as default
+  br as default
 };