@node-core/ui-components 1.0.1-9592ede0c373887bc655fce1377f06f063194424 → 1.0.1-a0f03ae69979a5fea7c16262ff88cbeef11452c2

package/Common/AlertBox/index.module.css

@@ -73,4 +73,11 @@
       @apply bg-danger-700;
     }
   }
+
+  code {
+    /* Ignore the styles from `markdown.css` */
+    all: unset;
+
+    @apply font-ibm-plex-mono;
+  }
 }

package/Common/AlertBox/index.stories.tsx

@@ -6,6 +6,12 @@ import AlertBox from '#ui/Common/AlertBox';
 type Story = StoryObj<typeof AlertBox>;
 type Meta = MetaObj<typeof AlertBox>;
 
+const withMain = (args: React.ComponentProps<typeof AlertBox>) => (
+  <main>
+    <AlertBox {...args} />
+  </main>
+);
+
 export const Info: Story = {
   args: {
     level: 'info',
@@ -46,6 +52,23 @@ export const Danger: Story = {
   },
 };
 
+export const InMarkdown: Story = {
+  args: {
+    level: 'danger',
+    title: '0',
+    children: (
+      <>
+        In a markdown component, <code>Code renders correctly,</code>{' '}
+        <a href="#">
+          <code>even when in a link</code>
+        </a>
+      </>
+    ),
+    size: 'default',
+  },
+  render: withMain,
+};
+
 export const WithIcon: Story = {
   args: {
     level: 'info',

package/Common/BaseButton/index.module.css

@@ -73,11 +73,14 @@
 
   &.secondary {
     @apply rounded-lg
+      border
+      border-neutral-200
       text-neutral-800
+      dark:border-neutral-900
       dark:text-neutral-200;
 
     &:hover:not([aria-disabled='true']) {
-      @apply bg-neutral-100
+      @apply bg-neutral-200
         text-neutral-800
         dark:bg-neutral-900
         dark:text-neutral-200;

package/Common/ChangeHistory/index.module.css

@@ -0,0 +1,83 @@
+@reference "../../styles/index.css";
+
+.summary {
+  @apply outline-hidden
+    flex
+    h-9
+    cursor-pointer
+    select-none
+    items-center
+    gap-2
+    rounded-md
+    border
+    border-neutral-200
+    p-2
+    text-sm
+    text-neutral-700
+    motion-safe:transition-colors
+    dark:border-neutral-900
+    dark:text-neutral-300;
+
+  &:hover,
+  &:focus-visible {
+    @apply bg-neutral-100
+      dark:bg-neutral-900;
+  }
+}
+
+.dropdownContentWrapper {
+  @apply absolute
+    right-0
+    top-full
+    z-50
+    mt-1
+    max-h-80
+    w-52
+    overflow-hidden
+    rounded-sm
+    border
+    border-neutral-200
+    bg-white
+    shadow-lg
+    dark:border-neutral-900
+    dark:bg-neutral-950;
+}
+
+.dropdownContentInner {
+  @apply max-h-80
+    w-52
+    overflow-y-auto;
+}
+
+.dropdownItem {
+  @apply outline-hidden
+    block
+    px-2.5
+    py-1.5
+    text-sm
+    font-medium
+    text-neutral-800
+    no-underline
+    motion-safe:transition-colors
+    dark:text-white;
+
+  &:hover,
+  &:focus-visible {
+    @apply bg-green-600
+      text-white;
+  }
+}
+
+.dropdownLabel {
+  @apply block
+    text-sm
+    font-medium
+    leading-tight;
+}
+
+.dropdownVersions {
+  @apply block
+    text-xs
+    leading-tight
+    opacity-75;
+}

package/Common/ChangeHistory/index.stories.tsx

@@ -0,0 +1,130 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import ChangeHistory from '#ui/Common/ChangeHistory';
+
+type Story = StoryObj<typeof ChangeHistory>;
+type Meta = MetaObj<typeof ChangeHistory>;
+
+const SAMPLE_CHANGES = [
+  {
+    versions: ['v15.4.0'],
+    label: 'No longer experimental',
+    url: 'https://github.com/nodejs/node/pull/12345',
+  },
+  {
+    versions: ['v15.0.0', 'v14.17.0'],
+    label: 'Added in v15.0.0, v14.17.0',
+    url: 'https://github.com/nodejs/node/pull/67890',
+  },
+  {
+    versions: ['v16.0.0'],
+    label: 'Deprecated in 16',
+  },
+];
+
+const LARGE_SAMPLE_CHANGES = [
+  {
+    versions: ['v20.0.0'],
+    label: 'Breaking change in v20',
+    url: 'https://github.com/nodejs/node/pull/50001',
+  },
+  {
+    versions: ['v19.8.0'],
+    label: 'Performance improvement',
+    url: 'https://github.com/nodejs/node/pull/49999',
+  },
+  {
+    versions: ['v19.0.0'],
+    label: 'API redesign',
+    url: 'https://github.com/nodejs/node/pull/49000',
+  },
+  {
+    versions: ['v18.17.0', 'v18.16.1'],
+    label: 'Security fix backported',
+    url: 'https://github.com/nodejs/node/pull/48500',
+  },
+  {
+    versions: ['v18.0.0'],
+    label: 'Major version release',
+    url: 'https://github.com/nodejs/node/pull/47000',
+  },
+  {
+    versions: ['v17.9.0'],
+    label: 'Experimental feature added',
+    url: 'https://github.com/nodejs/node/pull/46500',
+  },
+  {
+    versions: ['v17.0.0'],
+    label: 'Node.js 17 release',
+    url: 'https://github.com/nodejs/node/pull/45000',
+  },
+  {
+    versions: ['v16.15.0', 'v16.14.2'],
+    label: 'Bug fix release',
+    url: 'https://github.com/nodejs/node/pull/44000',
+  },
+  {
+    versions: ['v16.0.0'],
+    label: 'Deprecated in v16',
+    url: 'https://github.com/nodejs/node/pull/43000',
+  },
+  {
+    versions: ['v15.14.0'],
+    label: 'Feature enhancement',
+    url: 'https://github.com/nodejs/node/pull/42000',
+  },
+  {
+    versions: ['v15.0.0', 'v14.17.0'],
+    label: 'Initial implementation',
+    url: 'https://github.com/nodejs/node/pull/41000',
+  },
+  {
+    versions: ['v14.18.0'],
+    label: 'Documentation update',
+    url: 'https://github.com/nodejs/node/pull/40000',
+  },
+  {
+    versions: ['v14.0.0'],
+    label: 'Added to stable API',
+    url: 'https://github.com/nodejs/node/pull/39000',
+  },
+  {
+    versions: ['v13.14.0'],
+    label: 'Experimental flag removed',
+    url: 'https://github.com/nodejs/node/pull/38000',
+  },
+  {
+    versions: ['v12.22.0', 'v12.21.0'],
+    label: 'Backported to LTS',
+    url: 'https://github.com/nodejs/node/pull/37000',
+  },
+  {
+    versions: ['v12.0.0'],
+    label: 'First experimental version',
+    url: 'https://github.com/nodejs/node/pull/36000',
+  },
+];
+
+export const Default: Story = {
+  render: args => (
+    <div className="right-0 flex justify-end">
+      <ChangeHistory {...args} />
+    </div>
+  ),
+  args: {
+    changes: SAMPLE_CHANGES,
+  },
+};
+
+export const LargeHistory: Story = {
+  render: args => (
+    <div className="right-0 flex justify-end">
+      <ChangeHistory {...args} />
+    </div>
+  ),
+  args: {
+    changes: LARGE_SAMPLE_CHANGES,
+  },
+};
+
+export default { component: ChangeHistory } as Meta;

package/Common/ChangeHistory/index.tsx

@@ -0,0 +1,67 @@
+import { ChevronDownIcon, ClockIcon } from '@heroicons/react/24/outline';
+import classNames from 'classnames';
+import type { FC, ComponentProps } from 'react';
+
+import type { LinkLike } from '#ui/types.js';
+
+import styles from './index.module.css';
+
+export type HistoryChange = {
+  versions: Array<string>;
+  label: string;
+  url?: string;
+};
+
+type ChangeHistoryProps = ComponentProps<'div'> & {
+  label: string;
+  changes: Array<HistoryChange>;
+  as?: LinkLike;
+};
+
+const ChangeHistory: FC<ChangeHistoryProps> = ({
+  label = 'History',
+  changes = [],
+  className,
+  as: As = 'a',
+  'aria-label': ariaLabel = label,
+  ...props
+}) => (
+  <div className={classNames('relative', 'inline-block', className)} {...props}>
+    <details className="group">
+      <summary className={styles.summary} role="button" aria-haspopup="menu">
+        <ClockIcon className="size-4" />
+        <span>{label}</span>
+        <ChevronDownIcon className="size-3 group-open:rotate-180 motion-safe:transition-transform" />
+      </summary>
+      <div
+        className={styles.dropdownContentWrapper}
+        role="menu"
+        aria-label={ariaLabel}
+      >
+        <div className={styles.dropdownContentInner}>
+          {changes.map((change, index) => {
+            const MenuItem = change.url ? As : 'div';
+
+            return (
+              <MenuItem
+                key={index}
+                className={styles.dropdownItem}
+                role="menuitem"
+                tabIndex={0}
+                aria-label={`${change.label}: ${change.versions.join(', ')}`}
+                href={change.url}
+              >
+                <div className={styles.dropdownLabel}>{change.label}</div>
+                <div className={styles.dropdownVersions}>
+                  {change.versions.join(', ')}
+                </div>
+              </MenuItem>
+            );
+          })}
+        </div>
+      </div>
+    </details>
+  </div>
+);
+
+export default ChangeHistory;

package/Common/Modal/index.module.css

@@ -17,6 +17,7 @@
       w-full
       max-w-3xl
       flex-col
+      gap-2
       overflow-y-auto
       rounded
       border
@@ -47,8 +48,7 @@
   }
 
   .title {
-    @apply mb-2
-      text-3xl
+    @apply text-3xl
       font-semibold
       text-neutral-900
       dark:text-white;
@@ -56,7 +56,7 @@
 
   .description {
     @apply font-regular
-      mb-4
+      mb-2
       text-lg
       text-neutral-800
       dark:text-neutral-200;

package/Common/Modal/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Modal from '#ui/Common/Modal';
+import { Modal, Title, Description, Content } from '#ui/Common/Modal';
 
 type Story = StoryObj<typeof Modal>;
 type Meta = MetaObj<typeof Modal>;
@@ -8,10 +8,12 @@ type Meta = MetaObj<typeof Modal>;
 export const Default: Story = {
   args: {
     open: true,
-    heading: 'Node.js Versions Information',
-    subheading: 'Get all information about Node.js versions and their changes.',
     children: (
-      <>
+      <Content>
+        <Title>Node.js Versions Information</Title>
+        <Description>
+          Get all information about Node.js versions and their changes.
+        </Description>
         <p>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto
           atque sint doloremque, sapiente recusandae debitis libero nostrum
@@ -24,7 +26,7 @@ export const Default: Story = {
           amet minus sit architecto blanditiis hic sed odit cumque numquam
           dignissimos delectus.
         </p>
-      </>
+      </Content>
     ),
   },
 };

package/Common/Modal/index.tsx

@@ -7,15 +7,11 @@ import type { FC, PropsWithChildren } from 'react';
 import styles from './index.module.css';
 
 type ModalProps = PropsWithChildren<{
-  heading: string;
-  subheading?: string;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
 }>;
 
 const Modal: FC<ModalProps> = ({
-  heading,
-  subheading,
   children,
   open = false,
   onOpenChange = () => {},
@@ -28,15 +24,7 @@ const Modal: FC<ModalProps> = ({
             <XMarkIcon />
           </Dialog.Trigger>
 
-          <Dialog.Title className={styles.title}>{heading}</Dialog.Title>
-
-          {subheading && (
-            <Dialog.Description className={styles.description}>
-              {subheading}
-            </Dialog.Description>
-          )}
-
-          <main className={styles.wrapper}>{children}</main>
+          {children}
 
           <Dialog.Close />
         </Dialog.Content>
@@ -45,4 +33,18 @@ const Modal: FC<ModalProps> = ({
   </Dialog.Root>
 );
 
-export default Modal;
+const Title = ({ children }: PropsWithChildren) => (
+  <Dialog.Title className={styles.title}>{children}</Dialog.Title>
+);
+
+const Description = ({ children }: PropsWithChildren) => (
+  <Dialog.Description className={styles.description}>
+    {children}
+  </Dialog.Description>
+);
+
+const Content = ({ children }: PropsWithChildren) => (
+  <main className={styles.wrapper}>{children}</main>
+);
+
+export { Modal, Title, Description, Content };

package/Containers/Sidebar/index.tsx

@@ -15,6 +15,7 @@ type SidebarProps = {
   onSelect: (value: string) => void;
   as?: LinkLike;
   showProgressionIcons?: boolean;
+  placeholder?: string;
 };
 
 const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
@@ -25,6 +26,7 @@ const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
   as,
   showProgressionIcons = false,
   children,
+  placeholder,
 }) => {
   const selectItems = groups.map(({ items, groupName }) => ({
     label: groupName,
@@ -44,6 +46,7 @@ const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
           label={title}
           values={selectItems}
           defaultValue={currentItem?.value}
+          placeholder={placeholder}
           onChange={onSelect}
           className={styles.mobileSelect}
         />

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/package.json

@@ -13,11 +13,11 @@
   "files": [
     "Common",
     "Containers",
-    "MDX",
     "Icons",
+    "MDX",
+    "stylelint",
     "styles",
-    "types.ts",
-    "stylelint"
+    "types.ts"
   ],
   "dependencies": {
     "@heroicons/react": "^2.2.0",
@@ -37,8 +37,8 @@
     "tailwindcss": "~4.0.17"
   },
   "devDependencies": {
-    "@storybook/addon-themes": "^9.0.3",
     "@storybook/addon-styling-webpack": "^1.0.1",
+    "@storybook/addon-themes": "^9.0.3",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
     "@storybook/react": "^9.0.3",
     "@storybook/react-webpack5": "^9.0.3",
@@ -74,17 +74,17 @@
   "engines": {
     "node": ">=20"
   },
-  "version": "1.0.1-9592ede0c373887bc655fce1377f06f063194424",
+  "version": "1.0.1-a0f03ae69979a5fea7c16262ff88cbeef11452c2",
   "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"
   }
 }