@nswds/app 1.93.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);
@@ -10703,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 {
@@ -10895,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(& > *) {
@@ -11651,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);
@@ -12975,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-'], pre.dark[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-'], pre.dark[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

@@ -13737,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
@@ -13745,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
@@ -13772,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",
@@ -13802,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
     }
   );
@@ -13817,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,
@@ -13836,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
     }
   );
@@ -17593,7 +17596,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.92.0"};
+  version: "1.93.0"};
 var SluggerContext = React5__namespace.default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";
@@ -18997,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]"
       )
     }
   );