@nswds/app 1.92.0 → 1.94.0

package/dist/globals.css

@@ -2470,12 +2470,6 @@
       border-color: color-mix(in oklab, var(--color-grey-950) 5%, transparent);
     }
   }
-  .border-grey-950\/10 {
-    border-color: var(--color-grey-950);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-grey-950) 10%, transparent);
-    }
-  }
   .border-inherit {
     border-color: inherit;
   }
@@ -2674,15 +2668,6 @@
   .bg-grey-800 {
     background-color: var(--color-grey-800);
   }
-  .bg-grey-950 {
-    background-color: var(--color-grey-950);
-  }
-  .bg-grey-950\/\[2\.5\%\] {
-    background-color: var(--color-grey-950);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-grey-950) 2.5%, transparent);
-    }
-  }
   .bg-lime-500 {
     background-color: var(--color-lime-500);
   }
@@ -2995,9 +2980,6 @@
   .px-0 {
     padding-inline: calc(var(--spacing) * 0);
   }
-  .px-0\.5 {
-    padding-inline: calc(var(--spacing) * 0.5);
-  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
@@ -9588,14 +9570,6 @@
       }
     }
   }
-  .dark\:border-white\/20 {
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: color-mix(in srgb, #fff 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
-      }
-    }
-  }
   .dark\:bg-\(--badge-bg\) {
     &:where([data-theme=dark], [data-theme=dark] *) {
       background-color: var(--badge-bg);
@@ -9718,6 +9692,11 @@
       }
     }
   }
+  .dark\:bg-grey-600 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-grey-600);
+    }
+  }
   .dark\:bg-grey-700 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       background-color: var(--color-grey-700);
@@ -10698,6 +10677,23 @@
       }
     }
   }
+  .dark\:focus\:bg-primary-200\/10 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      &:focus {
+        background-color: var(--color-primary-200);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-primary-200) 10%, transparent);
+        }
+      }
+    }
+  }
+  .dark\:focus\:text-primary-200 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      &:focus {
+        color: var(--color-primary-200);
+      }
+    }
+  }
   .dark\:focus\:ring-primary-700\/30 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       &:focus {
@@ -10890,6 +10886,13 @@
       }
     }
   }
+  .dark\:data-\[placeholder\]\:text-grey-400 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      &[data-placeholder] {
+        color: var(--color-grey-400);
+      }
+    }
+  }
   .dark\:\*\:data-\[slot\=icon\]\:fill-zinc-400 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       :is(& > *) {
@@ -11646,6 +11649,13 @@
       color: var(--muted-foreground);
     }
   }
+  .dark\:\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-grey-400 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      & svg:not([class*='text-']) {
+        color: var(--color-grey-400);
+      }
+    }
+  }
   .\[\&_svg\:not\(\[class\*\=\\\"size-\\\"\]\)\]\:size-4 {
     & svg:not([class*=\"size-\"]) {
       width: calc(var(--spacing) * 4);
@@ -12970,138 +12980,138 @@
     bottom: 0;
     right: 0;
   }
-  .dark .code-responsive-wrapper {
+  .dark .code-responsive-wrapper, [data-theme='dark'] .code-responsive-wrapper {
     background-color: #111827;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fillRule='evenodd'%3E%3Cg fill='%236b7280' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
   }
-  .dark code[class*='language-'], .dark pre[class*='language-'] {
+  .dark code[class*='language-'], .dark pre[class*='language-'], pre.dark[class*='language-'], [data-theme='dark'] code[class*='language-'], [data-theme='dark'] pre[class*='language-'], pre[data-theme='dark'][class*='language-'] {
     --tw-text-opacity: 1;
     color: rgb(241 126 184 / var(--tw-text-opacity, 1));
   }
-  .dark .highlight-line {
+  .dark .highlight-line, [data-theme='dark'] .highlight-line {
     --tw-bg-opacity: 1;
     background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
   }
-  .dark .code-preview-wrapper + .code-syntax-wrapper > .code-syntax > .relative > [data-code-wrapper] > .highlight > pre[class*='language-'], .dark .highlight pre[class*='language-'], .dark :not(pre) > code[class*='language-'], .dark pre[class*='language-'] {
+  .dark .code-preview-wrapper + .code-syntax-wrapper > .code-syntax > .relative > [data-code-wrapper] > .highlight > pre[class*='language-'], [data-theme='dark'] .code-preview-wrapper + .code-syntax-wrapper > .code-syntax > .relative > [data-code-wrapper] > .highlight > pre[class*='language-'], .dark .highlight pre[class*='language-'], [data-theme='dark'] .highlight pre[class*='language-'], .dark :not(pre) > code[class*='language-'], [data-theme='dark'] :not(pre) > code[class*='language-'], .dark pre[class*='language-'], [data-theme='dark'] pre[class*='language-'], pre.dark[class*='language-'], pre[data-theme='dark'][class*='language-'] {
     --tw-bg-opacity: 1;
     background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
   }
-  .dark .token.cdata, .dark .token.comment, .dark .token.doctype, .dark .token.prolog {
+  .dark .token.cdata, .dark .token.comment, .dark .token.doctype, .dark .token.prolog, [data-theme='dark'] .token.cdata, [data-theme='dark'] .token.comment, [data-theme='dark'] .token.doctype, [data-theme='dark'] .token.prolog {
     --tw-text-opacity: 1;
     color: rgb(156 163 175 / var(--tw-text-opacity, 1));
   }
-  .dark .token.punctuation {
+  .dark .token.punctuation, [data-theme='dark'] .token.punctuation {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity, 1));
   }
-  .dark .token.class-name, .dark .token.keyword, .dark .token.property, .dark .token.tag {
+  .dark .token.class-name, .dark .token.keyword, .dark .token.property, .dark .token.tag, [data-theme='dark'] .token.class-name, [data-theme='dark'] .token.keyword, [data-theme='dark'] .token.property, [data-theme='dark'] .token.tag {
     --tw-text-opacity: 1;
     color: rgb(172 148 250 / var(--tw-text-opacity, 1));
   }
-  .dark .token.boolean, .dark .token.constant {
+  .dark .token.boolean, .dark .token.constant, [data-theme='dark'] .token.boolean, [data-theme='dark'] .token.constant {
     --tw-text-opacity: 1;
     color: rgb(52 211 153 / var(--tw-text-opacity, 1));
   }
-  .dark .token.deleted, .dark .token.symbol {
+  .dark .token.deleted, .dark .token.symbol, [data-theme='dark'] .token.deleted, [data-theme='dark'] .token.symbol {
     --tw-text-opacity: 1;
     color: rgb(249 128 128 / var(--tw-text-opacity, 1));
   }
-  .dark .token.number {
+  .dark .token.number, [data-theme='dark'] .token.number {
     --tw-text-opacity: 1;
     color: rgb(241 126 184 / var(--tw-text-opacity, 1));
   }
-  .dark .token.attr-name, .dark .token.builtin, .dark .token.char, .dark .token.inserted, .dark .token.selector, .dark .token.string {
+  .dark .token.attr-name, .dark .token.builtin, .dark .token.char, .dark .token.inserted, .dark .token.selector, .dark .token.string, [data-theme='dark'] .token.attr-name, [data-theme='dark'] .token.builtin, [data-theme='dark'] .token.char, [data-theme='dark'] .token.inserted, [data-theme='dark'] .token.selector, [data-theme='dark'] .token.string {
     --tw-text-opacity: 1;
     color: rgb(56 189 248 / var(--tw-text-opacity, 1));
   }
-  .dark .token.variable {
+  .dark .token.variable, [data-theme='dark'] .token.variable {
     --tw-text-opacity: 1;
     color: rgb(172 148 250 / var(--tw-text-opacity, 1));
   }
-  .dark .token.operator {
+  .dark .token.operator, [data-theme='dark'] .token.operator {
     --tw-text-opacity: 1;
     color: rgb(156 163 175 / var(--tw-text-opacity, 1));
   }
-  .dark .token.entity {
+  .dark .token.entity, [data-theme='dark'] .token.entity {
     --tw-text-opacity: 1;
     color: rgb(250 202 21 / var(--tw-text-opacity, 1));
   }
-  .dark .token.url {
+  .dark .token.url, [data-theme='dark'] .token.url {
     --tw-text-opacity: 1;
     color: rgb(6 182 212 / var(--tw-text-opacity, 1));
   }
-  .dark .language-css .token.string, .dark .style .token.string {
+  .dark .language-css .token.string, .dark .style .token.string, [data-theme='dark'] .language-css .token.string, [data-theme='dark'] .style .token.string {
     --tw-text-opacity: 1;
     color: rgb(249 128 128 / var(--tw-text-opacity, 1));
   }
-  .dark .token.atrule, .dark .token.attr-value {
+  .dark .token.atrule, .dark .token.attr-value, [data-theme='dark'] .token.atrule, [data-theme='dark'] .token.attr-value {
     --tw-text-opacity: 1;
     color: rgb(110 231 183 / var(--tw-text-opacity, 1));
   }
-  .dark .token.function {
+  .dark .token.function, [data-theme='dark'] .token.function {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity, 1));
   }
-  .dark .token {
+  .dark .token, [data-theme='dark'] .token {
     --tw-text-opacity: 1;
     color: rgb(156 163 175 / var(--tw-text-opacity, 1));
   }
-  .dark code.language-bash, .dark code.language-tsx, .dark pre.language-bash {
+  .dark code.language-bash, .dark code.language-tsx, .dark pre.language-bash, [data-theme='dark'] code.language-bash, [data-theme='dark'] code.language-tsx, [data-theme='dark'] pre.language-bash {
     --tw-text-opacity: 1;
     color: rgb(34 211 238 / var(--tw-text-opacity, 1));
   }
-  .dark code.language-tsx .token.function {
+  .dark code.language-tsx .token.function, [data-theme='dark'] code.language-tsx .token.function {
     --tw-text-opacity: 1;
     color: rgb(132 225 188 / var(--tw-text-opacity, 1));
   }
-  .dark code.language-tsx .token.punctuation {
+  .dark code.language-tsx .token.punctuation, [data-theme='dark'] code.language-tsx .token.punctuation {
     --tw-text-opacity: 1;
     color: rgb(107 114 128 / var(--tw-text-opacity, 1));
   }
-  .dark code.language-tsx .token.keyword {
+  .dark code.language-tsx .token.keyword, [data-theme='dark'] code.language-tsx .token.keyword {
     --tw-text-opacity: 1;
     color: rgb(232 121 249 / var(--tw-text-opacity, 1));
   }
-  .dark code.language-tsx .token.comment {
+  .dark code.language-tsx .token.comment, [data-theme='dark'] code.language-tsx .token.comment {
     --tw-text-opacity: 1;
     color: rgb(107 114 128 / var(--tw-text-opacity, 1));
   }
-  .dark code.language-tsx .token.class-name, .dark code.language-tsx .token.string {
+  .dark code.language-tsx .token.class-name, .dark code.language-tsx .token.string, [data-theme='dark'] code.language-tsx .token.class-name, [data-theme='dark'] code.language-tsx .token.string {
     --tw-text-opacity: 1;
     color: rgb(172 148 250 / var(--tw-text-opacity, 1));
   }
-  .dark code.language-html .token.tag {
+  .dark code.language-html .token.tag, [data-theme='dark'] code.language-html .token.tag {
     --tw-text-opacity: 1;
     color: rgb(232 121 249 / var(--tw-text-opacity, 1));
   }
-  .dark code.language-html .token.attr-name {
+  .dark code.language-html .token.attr-name, [data-theme='dark'] code.language-html .token.attr-name {
     color: rgb(156 163 175 / var(--tw-text-opacity, 1));
   }
-  .dark code.language-html .token.attr-value {
+  .dark code.language-html .token.attr-value, [data-theme='dark'] code.language-html .token.attr-value {
     --tw-text-opacity: 1;
     color: rgb(34 211 238 / var(--tw-text-opacity, 1));
   }
-  .dark code.language-html .token.punctuation {
+  .dark code.language-html .token.punctuation, [data-theme='dark'] code.language-html .token.punctuation {
     --tw-text-opacity: 1;
     color: rgb(107 114 128 / var(--tw-text-opacity, 1));
   }
-  .dark code.language-html .token.attr-name {
+  .dark code.language-html .token.attr-name, [data-theme='dark'] code.language-html .token.attr-name {
     --tw-text-opacity: 1;
     color: rgb(49 196 141 / var(--tw-text-opacity, 1));
   }
-  .dark code.language-html .token.comment {
+  .dark code.language-html .token.comment, [data-theme='dark'] code.language-html .token.comment {
     --tw-text-opacity: 1;
     color: rgb(107 114 128 / var(--tw-text-opacity, 1));
   }
-  .dark #carbonads {
+  .dark #carbonads, [data-theme='dark'] #carbonads {
     --tw-bg-opacity: 1;
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity, 1));
   }
-  .dark #carbonads, .dark #carbonads .carbon-poweredby {
+  .dark #carbonads, .dark #carbonads .carbon-poweredby, [data-theme='dark'] #carbonads, [data-theme='dark'] #carbonads .carbon-poweredby {
     background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
   }
-  .dark #carbonads .carbon-poweredby {
+  .dark #carbonads .carbon-poweredby, [data-theme='dark'] #carbonads .carbon-poweredby {
     --tw-bg-opacity: 1;
   }
   .prose {

package/dist/index.cjs

@@ -13602,17 +13602,27 @@ function CodeHighlight({
   language,
   className,
   withCopy = false,
+  "data-theme": dataTheme,
   ...props
 }) {
   const highlightedCode = Prism__default.default.highlight(code.trim(), Prism__default.default.languages[language], language);
   const Component2 = withCopy ? PreWithCopy : "pre";
-  return /* @__PURE__ */ jsxRuntime.jsx(Component2, { className: tailwindMerge.twMerge(`language-${language}`, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "code",
+  const themeClassName = dataTheme !== void 0 ? dataTheme === "dark" ? "dark" : "light" : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component2,
     {
-      className: `language-${language}`,
-      dangerouslySetInnerHTML: { __html: highlightedCode }
+      className: tailwindMerge.twMerge(`language-${language}`, themeClassName, className),
+      "data-theme": dataTheme,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "code",
+        {
+          className: `language-${language}`,
+          dangerouslySetInnerHTML: { __html: highlightedCode }
+        }
+      )
     }
-  ) });
+  );
 }
 function Popover({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { "data-slot": "popover", ...props });
@@ -13727,7 +13737,7 @@ function SelectTrigger({
       "data-size": size,
       className: cn(
         // Base styles
-        "flex w-full items-center justify-between gap-2 rounded-sm border border-grey-600 bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-grey-600",
+        "flex w-full items-center justify-between gap-2 rounded-sm border border-grey-600 bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-grey-600 dark:[&_svg:not([class*='text-'])]:text-grey-400",
         // Disabled styles
         "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
         // aria-invalid styles
@@ -13735,9 +13745,9 @@ function SelectTrigger({
         // Focus styles
         "focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-primary-650/70",
         // Placeholder styles
-        "data-[placeholder]:text-grey-600",
+        "data-[placeholder]:text-grey-600 dark:data-[placeholder]:text-grey-400",
         // Dark mode styles
-        "dark:bg-input/30 dark:hover:bg-input/50",
+        "dark:bg-input/30 dark:hover:bg-input/50 dark:border-grey-700",
         // Size styles
         "data-[size=default]:h-12 data-[size=sm]:h-9",
         className
@@ -13762,7 +13772,7 @@ function SelectContent({
       "data-slot": "select-content",
       className: cn(
         // Base styles
-        "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-sm border border-grey-200 bg-white text-grey-800 shadow-md",
+        "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-sm border border-grey-200 bg-white text-grey-800 shadow-md dark:border-grey-700 dark:bg-grey-900 dark:text-grey-100",
         // State styles
         "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
@@ -13792,7 +13802,7 @@ function SelectLabel({ className, ...props }) {
     SelectPrimitive__namespace.Label,
     {
       "data-slot": "select-label",
-      className: cn("px-2 py-1.5 text-xs text-grey-600", className),
+      className: cn("px-2 py-1.5 text-xs text-grey-600 dark:text-grey-400", className),
       ...props
     }
   );
@@ -13807,7 +13817,7 @@ function SelectItem({
     {
       "data-slot": "select-item",
       className: cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-primary-800/10 focus:font-bold focus:text-primary-800 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6 [&_svg:not([class*='text-'])]:text-grey-600 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-primary-800/10 focus:font-bold focus:text-primary-800 dark:focus:bg-primary-200/10 dark:focus:text-primary-200 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6 [&_svg:not([class*='text-'])]:text-grey-600 dark:[&_svg:not([class*='text-'])]:text-grey-400 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       ),
       ...props,
@@ -13826,7 +13836,10 @@ function SelectSeparator({
     SelectPrimitive__namespace.Separator,
     {
       "data-slot": "select-separator",
-      className: cn("pointer-events-none -mx-1 my-1 h-px bg-primary-800/20", className),
+      className: cn(
+        "pointer-events-none -mx-1 my-1 h-px bg-primary-800/20 dark:bg-grey-700",
+        className
+      ),
       ...props
     }
   );
@@ -14286,18 +14299,18 @@ function TooltipContent({
 function CodeDemoLoading() {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 animate-pulse", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full rounded-t-xl border border-grey-200 bg-grey-50 p-4 dark:border-grey-600 dark:bg-grey-700", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-32 rounded bg-grey-200" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-32 rounded bg-grey-200" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-32 rounded bg-grey-200 dark:bg-grey-600" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-32 rounded bg-grey-200 dark:bg-grey-600" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-20 rounded bg-grey-200" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-16 rounded bg-grey-200" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-10 rounded bg-grey-200" })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-20 rounded bg-grey-200 dark:bg-grey-600" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-16 rounded bg-grey-200 dark:bg-grey-600" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-10 rounded bg-grey-200 dark:bg-grey-600" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex border-x border-grey-200 bg-white bg-gradient-to-r p-5 dark:border-grey-600 dark:bg-grey-900", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 w-full rounded bg-grey-200" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex border-x border-grey-200 bg-white bg-gradient-to-r p-5 dark:border-grey-600 dark:bg-grey-900", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 w-full rounded bg-grey-200 dark:bg-grey-600" }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border border-grey-200 dark:border-grey-600", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full rounded-t-md border-b border-grey-200 bg-grey-50 p-2 dark:border-grey-600 dark:bg-grey-700", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-24 rounded bg-grey-200" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-48 bg-grey-100" })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full rounded-t-md border-b border-grey-200 bg-grey-50 p-2 dark:border-grey-600 dark:bg-grey-700", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-24 rounded bg-grey-200 dark:bg-grey-600" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-48 bg-grey-100 dark:bg-grey-800" })
     ] })
   ] });
 }
@@ -14453,6 +14466,7 @@ function CodeDemoContent({ data, showCode = true, controls = defaultControls })
   const codeItems = getCodeItems(code);
   const current = getCurrent(codeItems, tabIndex);
   const shouldExpand = getShouldExpand(current.code.trim());
+  const codeTheme = isDarkMode === null ? void 0 : isDarkMode ? "dark" : "light";
   const variantLabels = React5__namespace.default.useMemo(() => {
     const explicit = data.labels ?? {};
     return Object.fromEntries(variants.map((v) => [v, explicit[v] ?? humaniseVariant(v)]));
@@ -14561,7 +14575,8 @@ function CodeDemoContent({ data, showCode = true, controls = defaultControls })
                 {
                   className: "!mb-0 !rounded-none",
                   code: current.code,
-                  language: current.language
+                  language: current.language,
+                  "data-theme": codeTheme
                 }
               )
             }
@@ -14584,12 +14599,21 @@ function CodeDemo(props) {
 var IFrame = React5__namespace.default.forwardRef(
   ({ iframe, isRTL, isDarkMode }, ref) => {
     React5.useEffect(() => {
-      const document2 = ref?.current?.contentDocument;
-      const root = document2?.documentElement;
-      if (document2 && root) {
+      const frame2 = ref?.current;
+      if (!frame2) return;
+      const applyFrameSettings = () => {
+        const document2 = frame2.contentDocument;
+        const root = document2?.documentElement;
+        if (!document2 || !root) return;
         root.setAttribute("dir", isRTL ? "rtl" : "ltr");
-        root.classList.toggle("dark", !!isDarkMode);
-      }
+        if (isDarkMode !== null) {
+          root.setAttribute("data-theme", isDarkMode ? "dark" : "light");
+          root.classList.toggle("dark", !!isDarkMode);
+        }
+      };
+      applyFrameSettings();
+      frame2.addEventListener("load", applyFrameSettings);
+      return () => frame2.removeEventListener("load", applyFrameSettings);
     }, [isRTL, isDarkMode, ref]);
     if (typeof iframe === "number") {
       return /* @__PURE__ */ jsxRuntime.jsx("iframe", { ref, src: "", height: iframe, width: "100%", className: "w-full" });
@@ -14646,9 +14670,9 @@ function CodePreview({
         {
           className: tailwindMerge.twMerge(
             "code-responsive-wrapper w-full",
-            isDarkMode !== null && (isDarkMode ? "dark" : "light")
+            isDarkMode !== null ? isDarkMode ? "dark" : "light" : void 0
           ),
-          "data-theme": isDarkMode !== null && (isDarkMode ? "dark" : "light"),
+          "data-theme": isDarkMode !== null ? isDarkMode ? "dark" : "light" : void 0,
           children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -17572,7 +17596,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.91.0"};
+  version: "1.93.0"};
 var SluggerContext = React5__namespace.default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";
@@ -18976,13 +19000,15 @@ function Strong({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("strong", { ...props, className: clsx12__default.default(className, "font-medium text-grey-950 dark:text-white") });
 }
 function Code({ className, ...props }) {
+  const hasLanguageClass = typeof className === "string" && className.includes("language-");
   return /* @__PURE__ */ jsxRuntime.jsx(
     "code",
     {
       ...props,
       className: clsx12__default.default(
         className,
-        "rounded-sm border border-grey-950/10 bg-grey-950/[2.5%] px-0.5 text-sm font-medium text-grey-950 sm:text-[0.8125rem] dark:border-white/20 dark:bg-white/5 dark:text-white"
+        !hasLanguageClass && "language-plaintext",
+        "text-sm sm:text-[0.8125rem]"
       )
     }
   );