@node-core/ui-components 1.0.1-6cb8b0a0c75c24f5ccc84bb07a1ea9b4b810abd2 → 1.0.1-6ce9ac9c19dbcf93f5af658cca3784484762d8a3

package/Icons/Logos/Nodejs.tsx

@@ -72,9 +72,9 @@ const NodejsIcon: FC<NodeJsLogoProps> = ({
         />
 
         {variant === 'pride' ? (
-          <>
+          <g clipPath="url(#clip0_1_1661)">
             <mask
-              id="mask1_12_17"
+              id="mask1_1_1661"
               style={{ maskType: 'alpha' }}
               maskUnits="userSpaceOnUse"
               x="53"
@@ -83,37 +83,77 @@ const NodejsIcon: FC<NodeJsLogoProps> = ({
               height="51"
             >
               <path
-                d="M76.2211 28.9482C75.4847 28.5316 74.6105 28.5316 73.8743 28.9482L54.5024 40.1993C53.7662 40.616 53.3521 41.4029 53.3521 42.2366V64.7846C53.3521 65.6181 53.8122 66.405 54.5024 66.8219L73.8743 78.0729C74.6105 78.4894 75.4847 78.4894 76.2211 78.0729L95.5929 66.8219C96.3288 66.405 96.7431 65.6181 96.7431 64.7846V42.2366C96.7431 41.4029 96.2832 40.616 95.5929 40.1993L76.2211 28.9482Z"
-                fill="white"
+                d="M76.3478 28.9593C75.9882 28.7545 75.5815 28.6469 75.1677 28.6469C74.7539 28.6469 74.3472 28.7545 73.9876 28.9593L54.5067 40.2057C53.7665 40.6229 53.35 41.4099 53.35 42.2422V64.7816C53.35 65.6147 53.8126 66.4016 54.5067 66.8181L73.9876 78.0645C74.3472 78.2693 74.7539 78.3769 75.1677 78.3769C75.5815 78.3769 75.9882 78.2693 76.3478 78.0645L95.8286 66.8181C96.5689 66.4016 96.9854 65.6139 96.9854 64.7816V42.2422C96.9813 41.8325 96.8729 41.4307 96.6705 41.0745C96.4681 40.7184 96.1784 40.4196 95.8286 40.2064L76.3478 28.9593Z"
+                fill="url(#paint0_linear_1_1661)"
               />
             </mask>
-            <g mask="url(#mask1_12_17)">
+            <g mask="url(#mask1_1_1661)">
               <path
-                d="M103.17 53.5459H53.4209V61.8043H103.17V53.5459Z"
-                fill="#008026"
+                d="M97.0564 70.1316H53.35V78.39H97.0564V70.1316Z"
+                fill="#750787"
               />
               <path
-                d="M103.17 61.8042H53.4209V70.1621H103.17V61.8042Z"
+                d="M97.0564 61.7731H53.35V70.131H97.0564V61.7731Z"
                 fill="#004DFF"
               />
               <path
-                d="M103.17 37.0293H53.4209V45.2877H103.17V37.0293Z"
-                fill="#FF8C00"
+                d="M97.0564 53.5147H53.35V61.7732H97.0564V53.5147Z"
+                fill="#008026"
               />
               <path
-                d="M103.17 45.2876H53.4209V53.546H103.17V45.2876Z"
+                d="M97.0564 45.2563H53.35V53.5148H97.0564V45.2563Z"
                 fill="#FFED00"
               />
               <path
-                d="M103.17 28.6714H53.4209V37.0293H103.17V28.6714Z"
+                d="M97.0564 36.998H53.35V45.2565H97.0564V36.998Z"
+                fill="#FF8C00"
+              />
+              <path
+                d="M97.0564 28.64H53.35V36.998H97.0564V28.64Z"
                 fill="#E40303"
               />
+            </g>
+            <g style={{ mixBlendMode: 'luminosity' }} opacity="0.5">
               <path
-                d="M103.17 70.1626H53.4209V78.421H103.17V70.1626Z"
-                fill="#750787"
+                d="M76.3478 28.9593C75.9882 28.7545 75.5815 28.6469 75.1677 28.6469C74.7539 28.6469 74.3472 28.7545 73.9876 28.9593L54.5067 40.2057C53.7665 40.6229 53.35 41.4099 53.35 42.2422V64.7816C53.35 65.6147 53.8126 66.4016 54.5067 66.8181L73.9876 78.0645C74.3472 78.2693 74.7539 78.3769 75.1677 78.3769C75.5815 78.3769 75.9882 78.2693 76.3478 78.0645L95.8286 66.8181C96.5689 66.4016 96.9854 65.6139 96.9854 64.7816V42.2422C96.9813 41.8325 96.8729 41.4307 96.6705 41.0745C96.4681 40.7184 96.1784 40.4196 95.8286 40.2064L76.3478 28.9593Z"
+                fill="white"
               />
+              <g style={{ mixBlendMode: 'luminosity' }}>
+                <mask
+                  id="mask2_1_1661"
+                  style={{ maskType: 'alpha' }}
+                  maskUnits="userSpaceOnUse"
+                  x="53"
+                  y="28"
+                  width="44"
+                  height="51"
+                >
+                  <path
+                    d="M76.3478 28.9593C75.9882 28.7545 75.5815 28.6469 75.1677 28.6469C74.7539 28.6469 74.3472 28.7545 73.9876 28.9593L54.5067 40.2057C53.7665 40.6229 53.35 41.4099 53.35 42.2422V64.7816C53.35 65.6147 53.8126 66.4016 54.5067 66.8181L73.9876 78.0645C74.3472 78.2693 74.7539 78.3769 75.1677 78.3769C75.5815 78.3769 75.9882 78.2693 76.3478 78.0645L95.8286 66.8181C96.5689 66.4016 96.9854 65.6139 96.9854 64.7816V42.2422C96.9813 41.8325 96.8729 41.4307 96.6705 41.0745C96.4681 40.7184 96.1784 40.4196 95.8286 40.2064L76.3478 28.9593Z"
+                    fill="url(#paint1_linear_1_1661)"
+                  />
+                </mask>
+                <g mask="url(#mask2_1_1661)">
+                  <path
+                    d="M76.3478 28.9593C75.9882 28.7545 75.5815 28.6469 75.1677 28.6469C74.7539 28.6469 74.3472 28.7545 73.9876 28.9593L54.5067 40.2057C53.7665 40.6229 53.35 41.4099 53.35 42.2422V64.7816C53.35 65.6147 53.8126 66.4016 54.5067 66.8181L73.9876 78.0645C74.3472 78.2693 74.7539 78.3769 75.1677 78.3769C75.5815 78.3769 75.9882 78.2693 76.3478 78.0645L95.8286 66.8181C96.5689 66.4016 96.9854 65.6139 96.9854 64.7816V42.2422C96.9813 41.8325 96.8729 41.4307 96.6705 41.0745C96.4681 40.7184 96.1784 40.4196 95.8286 40.2064L76.3478 28.9593Z"
+                    fill="url(#paint2_linear_1_1661)"
+                  />
+                  <g filter="url(#filter0_d_1_1661)">
+                    <path
+                      d="M95.8746 40.2064L76.301 28.9586C76.1087 28.8617 75.9073 28.7843 75.6996 28.7277L53.8153 66.2174C54.0002 66.4491 54.292 66.7869 54.5237 66.9258L73.9875 78.0645C74.5428 78.3882 75.1903 78.481 75.7924 78.2954L96.3832 40.6229C96.2478 40.4469 96.0738 40.3044 95.8746 40.2064Z"
+                      fill="url(#paint3_linear_1_1661)"
+                    />
+                  </g>
+                  <g filter="url(#filter1_d_1_1661)">
+                    <path
+                      d="M95.8265 66.8181C96.3818 66.4937 96.8826 65.8866 96.8826 65.1549L75.5587 28.6823C75.0033 28.5895 74.4019 28.6356 73.8926 28.9593L54.4585 40.1596L75.4198 78.3882C75.7247 78.3383 76.0207 78.2448 76.2989 78.1105L95.8265 66.8181Z"
+                      fill="url(#paint4_linear_1_1661)"
+                    />
+                  </g>
+                </g>
+              </g>
             </g>
-          </>
+          </g>
         ) : (
           <>
             <path
@@ -131,10 +171,154 @@ const NodejsIcon: FC<NodeJsLogoProps> = ({
           </>
         )}
       </g>
+
       {variant === 'pride' ? (
         <defs>
-          <clipPath id="clip0_12_17">
-            <rect width="267" height="79.988" fill="white" />
+          <filter
+            id="filter0_d_1_1661"
+            x="41.8153"
+            y="16.7277"
+            width="66.5679"
+            height="73.6624"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <feOffset />
+            <feGaussianBlur stdDeviation="6" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.75 0"
+            />
+            <feBlend
+              mode="normal"
+              in2="BackgroundImageFix"
+              result="effect1_dropShadow_1_1661"
+            />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="effect1_dropShadow_1_1661"
+              result="shape"
+            />
+          </filter>
+          <filter
+            id="filter1_d_1_1661"
+            x="42.4585"
+            y="16.64"
+            width="66.4241"
+            height="73.7482"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <feOffset />
+            <feGaussianBlur stdDeviation="6" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.75 0"
+            />
+            <feBlend
+              mode="normal"
+              in2="BackgroundImageFix"
+              result="effect1_dropShadow_1_1661"
+            />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="effect1_dropShadow_1_1661"
+              result="shape"
+            />
+          </filter>
+          <linearGradient
+            id="paint0_linear_1_1661"
+            x1="83.1011"
+            y1="37.3355"
+            x2="65.4825"
+            y2="73.2718"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#3F873F" />
+            <stop offset="0.33" stop-color="#3F8B3D" />
+            <stop offset="0.637" stop-color="#3E9638" />
+            <stop offset="0.934" stop-color="#3DA92E" />
+            <stop offset="1" stop-color="#3DAE2B" />
+          </linearGradient>
+          <linearGradient
+            id="paint1_linear_1_1661"
+            x1="83.1011"
+            y1="37.3355"
+            x2="65.4825"
+            y2="73.2718"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#3F873F" />
+            <stop offset="0.33" stop-color="#3F8B3D" />
+            <stop offset="0.637" stop-color="#3E9638" />
+            <stop offset="0.934" stop-color="#3DA92E" />
+            <stop offset="1" stop-color="#3DAE2B" />
+          </linearGradient>
+          <linearGradient
+            id="paint2_linear_1_1661"
+            x1="83.1011"
+            y1="37.3355"
+            x2="65.4825"
+            y2="73.2718"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#3F873F" />
+            <stop offset="0.33" stop-color="#3F8B3D" />
+            <stop offset="0.637" stop-color="#3E9638" />
+            <stop offset="0.934" stop-color="#3DA92E" />
+            <stop offset="1" stop-color="#3DAE2B" />
+          </linearGradient>
+          <linearGradient
+            id="paint3_linear_1_1661"
+            x1="72.2067"
+            y1="56.1434"
+            x2="121.636"
+            y2="19.6297"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0.138" stop-color="#3F873F" />
+            <stop offset="0.402" stop-color="#52A044" />
+            <stop offset="0.713" stop-color="#64B749" />
+            <stop offset="0.908" stop-color="#6ABF4B" />
+          </linearGradient>
+          <linearGradient
+            id="paint4_linear_1_1661"
+            x1="52.636"
+            y1="53.5048"
+            x2="97.7135"
+            y2="53.5048"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0.092" stop-color="#6ABF4B" />
+            <stop offset="0.287" stop-color="#64B749" />
+            <stop offset="0.598" stop-color="#52A044" />
+            <stop offset="0.862" stop-color="#3F873F" />
+          </linearGradient>
+          <clipPath id="clip0_1_1661">
+            <rect
+              width="43.7067"
+              height="49.75"
+              fill="white"
+              transform="translate(53.35 28.64)"
+            />
           </clipPath>
         </defs>
       ) : (

package/MDX/CodeTabs.tsx

@@ -0,0 +1,47 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import type { FC, ReactElement } from 'react';
+
+import CodeTabs from '#ui/Common/CodeTabs';
+
+type MDXCodeTabsProps = {
+  children: Array<ReactElement<unknown>>;
+  languages: string;
+  displayNames?: string;
+  defaultTab?: string;
+};
+
+const MDXCodeTabs: FC<MDXCodeTabsProps> = ({
+  languages: rawLanguages,
+  displayNames: rawDisplayNames,
+  children: codes,
+  defaultTab = '0',
+  ...props
+}) => {
+  const languages = rawLanguages.split('|');
+  const displayNames = rawDisplayNames?.split('|') ?? [];
+
+  const tabs = languages.map((language, index) => {
+    const displayName = displayNames[index];
+
+    return {
+      key: `${language}-${index}`,
+      label: displayName?.length ? displayName : language.toUpperCase(),
+    };
+  });
+
+  return (
+    <CodeTabs
+      tabs={tabs}
+      defaultValue={tabs[Number(defaultTab)].key}
+      {...props}
+    >
+      {languages.map((_, index) => (
+        <TabsPrimitive.Content key={tabs[index].key} value={tabs[index].key}>
+          {codes[index]}
+        </TabsPrimitive.Content>
+      ))}
+    </CodeTabs>
+  );
+};
+
+export default MDXCodeTabs;

package/package.json

@@ -14,55 +14,53 @@
     "Common",
     "Containers",
     "Icons",
+    "MDX",
+    "stylelint",
     "styles",
-    "types.ts",
-    "stylelint"
+    "types.ts"
   ],
   "dependencies": {
     "@heroicons/react": "^2.2.0",
-    "@radix-ui/react-avatar": "^1.1.9",
-    "@radix-ui/react-dialog": "^1.1.7",
-    "@radix-ui/react-dropdown-menu": "~2.1.6",
-    "@radix-ui/react-label": "~2.1.2",
-    "@radix-ui/react-select": "~2.2.2",
-    "@radix-ui/react-separator": "~1.1.3",
-    "@radix-ui/react-tabs": "~1.1.3",
-    "@radix-ui/react-toast": "~1.2.6",
-    "@radix-ui/react-tooltip": "~1.2.4",
-    "@tailwindcss/postcss": "~4.1.5",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "~2.1.15",
+    "@radix-ui/react-label": "~2.1.7",
+    "@radix-ui/react-select": "~2.2.5",
+    "@radix-ui/react-separator": "~1.1.7",
+    "@radix-ui/react-tabs": "~1.1.12",
+    "@radix-ui/react-toast": "~1.2.14",
+    "@radix-ui/react-tooltip": "~1.2.7",
+    "@tailwindcss/postcss": "~4.1.8",
     "@vcarl/remark-headings": "~0.1.0",
     "classnames": "~2.5.1",
     "postcss-calc": "^10.1.1",
     "tailwindcss": "~4.0.17"
   },
   "devDependencies": {
-    "@storybook/addon-controls": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-themes": "^8.6.12",
-    "@storybook/addon-viewport": "^8.6.12",
+    "@storybook/addon-themes": "^9.0.3",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-webpack5": "^8.6.12",
+    "@storybook/react": "^9.0.3",
+    "@storybook/react-webpack5": "^9.0.3",
     "@testing-library/user-event": "~14.6.1",
     "@types/node": "22.15.3",
-    "@types/react": "^19.1.0",
+    "@types/react": "^19.1.6",
     "cross-env": "^7.0.3",
     "css-loader": "~7.1.2",
     "eslint-plugin-react": "~7.37.4",
-    "eslint-plugin-storybook": "~0.12.0",
+    "eslint-plugin-storybook": "~9.0.3",
     "global-jsdom": "^26.0.0",
     "postcss-loader": "~8.1.1",
     "react": "^19.1.0",
-    "storybook": "^8.6.11",
+    "storybook": "^9.0.3",
     "style-loader": "~4.0.0",
-    "stylelint": "^16.19.1",
+    "stylelint": "^16.20.0",
     "stylelint-config-standard": "^38.0.0",
     "stylelint-order": "7.0.0",
     "stylelint-selector-bem-pattern": "4.0.1",
     "tsx": "^4.19.3",
     "typescript": "~5.8.2",
-    "typescript-eslint": "~8.31.1"
+    "typescript-eslint": "~8.33.1"
   },
   "imports": {
     "#ui/*": [
@@ -76,17 +74,17 @@
   "engines": {
     "node": ">=20"
   },
-  "version": "1.0.1-6cb8b0a0c75c24f5ccc84bb07a1ea9b4b810abd2",
+  "version": "1.0.1-6ce9ac9c19dbcf93f5af658cca3784484762d8a3",
   "scripts": {
-    "check-types": "tsc --noEmit",
     "lint": "turbo run lint:js lint:css",
     "lint:css": "stylelint \"**/*.css\" --allow-empty-input --cache --cache-strategy=content --cache-location=.stylelintcache",
-    "lint:fix": "turbo run lint:js lint:css --no-cache -- --fix",
+    "lint:fix": "node --run lint -- -- --fix",
     "lint:js": "eslint \"**/*.{js,mjs,ts,tsx}\"",
+    "lint:types": "tsc --noEmit",
     "storybook": "cross-env NODE_NO_WARNINGS=1 storybook dev -p 6006 --quiet",
     "storybook:build": "cross-env NODE_NO_WARNINGS=1 storybook build --quiet --webpack-stats-json",
-    "test": "turbo test:unit",
+    "test": "node --run test:unit",
     "test:unit": "cross-env NODE_NO_WARNINGS=1 node --experimental-test-coverage --test-coverage-exclude=**/*.test.* --enable-source-maps --import=global-jsdom/register --import=tsx --import=../../tests/setup.mjs --test **/*.test.*",
-    "test:unit:watch": "cross-env NODE_OPTIONS=\"--watch\" pnpm test:unit"
+    "test:unit:watch": "node --run test:unit -- --watch"
   }
 }

package/styles/markdown.css

@@ -157,7 +157,7 @@ main {
       @apply font-semibold;
     }
 
-    tr:last-child td {
+    tr:last-child > td {
       @apply sm:border-b-0;
 
       &:last-child {

package/Common/ProgressionSidebar/ProgressionSidebarGroup/index.module.css

@@ -1,47 +0,0 @@
-@reference "../../../styles/index.css";
-
-.group {
-  @apply flex
-    flex-col
-    gap-4
-    text-sm
-    font-medium
-    text-neutral-800
-    dark:text-neutral-200;
-
-  .items {
-    @apply relative
-      -left-1
-      flex
-      flex-col
-      gap-2
-      after:absolute
-      after:left-[0.45rem]
-      after:top-0
-      after:z-10
-      after:h-full
-      after:w-px
-      after:bg-neutral-200
-      after:content-['']
-      dark:after:bg-neutral-800;
-
-    a {
-      @apply first:before:absolute
-        first:before:bottom-[calc(50%+0.25rem)]
-        first:before:left-0
-        first:before:h-20
-        first:before:w-4
-        first:before:bg-white
-        first:before:content-['']
-        last:after:absolute
-        last:after:left-0
-        last:after:top-[calc(50%+0.25rem)]
-        last:after:h-20
-        last:after:w-4
-        last:after:bg-white
-        last:after:content-['']
-        first:dark:before:bg-neutral-950
-        last:dark:after:bg-neutral-950;
-    }
-  }
-}

package/Common/ProgressionSidebar/ProgressionSidebarGroup/index.tsx

@@ -1,35 +0,0 @@
-import type { ComponentProps, FC } from 'react';
-
-import ProgressionSidebarItem from '#ui/Common/ProgressionSidebar/ProgressionSidebarItem';
-import type { FormattedMessage, LinkLike } from '#ui/types';
-
-import styles from './index.module.css';
-
-type ProgressionSidebarGroupProps = {
-  groupName: FormattedMessage;
-  items: Array<ComponentProps<typeof ProgressionSidebarItem>>;
-  pathname?: string;
-  as?: LinkLike;
-};
-
-const ProgressionSidebarGroup: FC<ProgressionSidebarGroupProps> = ({
-  groupName,
-  items,
-  ...props
-}) => (
-  <section className={styles.group}>
-    {groupName}
-    <div className={styles.items}>
-      {items.map(({ label, link }) => (
-        <ProgressionSidebarItem
-          key={link}
-          label={label}
-          link={link}
-          {...props}
-        />
-      ))}
-    </div>
-  </section>
-);
-
-export default ProgressionSidebarGroup;

package/Common/ProgressionSidebar/ProgressionSidebarItem/index.module.css

@@ -1,39 +0,0 @@
-@reference "../../../styles/index.css";
-
-a.item {
-  @apply font-regular
-    relative
-    z-20
-    flex
-    w-full
-    items-center
-    gap-1
-    overflow-hidden
-    text-sm
-    text-neutral-800
-    dark:text-neutral-200;
-
-  &:hover {
-    @apply text-neutral-900
-      motion-safe:transition-colors
-      dark:text-white;
-  }
-
-  svg {
-    @apply shrink-0
-      fill-neutral-200
-      stroke-white
-      stroke-[4]
-      dark:fill-neutral-800
-      dark:stroke-neutral-950;
-  }
-
-  &.active {
-    @apply text-neutral-900
-      dark:text-white;
-
-    svg {
-      @apply fill-green-500;
-    }
-  }
-}

package/Common/ProgressionSidebar/ProgressionSidebarItem/index.tsx

@@ -1,32 +0,0 @@
-import type { FC } from 'react';
-
-import BaseActiveLink from '#ui/Common/BaseActiveLink';
-import ProgressionSidebarIcon from '#ui/Common/ProgressionSidebar/ProgressionSidebarIcon';
-import type { FormattedMessage, LinkLike } from '#ui/types';
-
-import styles from './index.module.css';
-
-type ProgressionSidebarItemProps = {
-  label: FormattedMessage;
-  link: string;
-  as?: LinkLike;
-  pathname?: string;
-};
-
-const ProgressionSidebarItem: FC<ProgressionSidebarItemProps> = ({
-  label,
-  link,
-  ...props
-}) => (
-  <BaseActiveLink
-    className={styles.item}
-    activeClassName={styles.active}
-    href={link}
-    {...props}
-  >
-    <ProgressionSidebarIcon />
-    {label}
-  </BaseActiveLink>
-);
-
-export default ProgressionSidebarItem;

package/Common/ProgressionSidebar/index.module.css

@@ -1,30 +0,0 @@
-@reference "../../styles/index.css";
-
-.wrapper {
-  @apply flex
-    w-full
-    flex-col
-    gap-8
-    overflow-auto
-    border-r-0
-    border-neutral-200
-    bg-white
-    px-4
-    py-6
-    sm:border-r
-    md:max-w-xs
-    lg:px-6
-    dark:border-neutral-900
-    dark:bg-neutral-950;
-
-  > section {
-    @apply hidden
-      sm:flex;
-  }
-
-  > span {
-    @apply flex
-      w-full
-      sm:hidden;
-  }
-}