update from feedback

apps/site/.stylelintrc.mjs

@@ -15,7 +15,7 @@ const CUSTOM_AT_RULES = [
 // Enforces certain selectors to be only in camelCase notation
 // We use these for id selectors and classname selectors
 const ONLY_ALLOW_CAMEL_CASE_SELECTORS = [
-  /^(?:[a-z0-9]+(?:[A-Z][a-z0-9]*)*)$/,
+  /^(?:[a-z]+(?:[A-Z][a-z]*)*)$/,
   { message: s => `Expected '${s}' to be in camelCase` },
 ];
 

apps/site/components/ApiDocs/StabilityIndex/index.module.css → apps/site/components/Common/InfoBox/index.module.css

@@ -1,47 +1,62 @@
-.stabilityIndex {
+.infoBox {
   @apply flex
     flex-row
     items-center
     gap-2
     rounded
     px-4
     py-3
+    text-sm
     text-white;
 
-  .indexLevel {
+  &.small {
+    @apply gap-1
+      py-2
+      text-xs;
+
+    .title {
+      @apply px-1;
+    }
+  }
+
+  .title {
     @apply rounded-sm
-      px-1.5
-      text-sm;
+      px-1.5;
+  }
+
+  svg {
+    @apply inline
+      size-5;
   }
 
-  &.stabilityLevel3 {
+  &.info {
     @apply bg-info-600;
 
-    .indexLevel {
+    .title {
       @apply bg-info-700;
     }
   }
 
-  &.stabilityLevel2 {
+  &.success {
     @apply bg-green-600;
 
-    .indexLevel {
+    .title {
       @apply bg-green-700;
     }
   }
 
-  &.stabilityLevel1 {
+  &.warning {
     @apply bg-warning-600;
 
-    .indexLevel {
+    .title {
       @apply bg-warning-700;
     }
   }
 
-  &.stabilityLevel0 {
+  &.error {
     @apply bg-danger-600;
 
-    .indexLevel {
+    .title {
       @apply bg-danger-700;
     }
   }

apps/site/components/Common/InfoBox/index.stories.tsx

@@ -0,0 +1,73 @@
+import { ExclamationCircleIcon } from '@heroicons/react/24/solid';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import InfoBox from '@/components/Common/InfoBox';
+
+type Story = StoryObj<typeof InfoBox>;
+type Meta = MetaObj<typeof InfoBox>;
+
+export const Info: Story = {
+  args: {
+    level: 'info',
+    title: '3',
+    children:
+      'Legacy. Although this feature is unlikely to be removed and is still covered by semantic versioning guarantees, it is no longer actively maintained, and other alternatives are available.',
+    size: 'default',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    level: 'success',
+    title: '2',
+    children:
+      'Stable. Compatibility with the npm ecosystem is a high priority.',
+    size: 'default',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    level: 'warning',
+    title: '1',
+    children:
+      'Experimental. The feature is not subject to semantic versioning rules. Non-backward compatible changes or removal may occur in any future release. Use of the feature is not recommended in production environments. Experimental features are subdivided into stages:',
+    size: 'default',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    level: 'error',
+    title: '0',
+    children:
+      'Deprecated. The feature may emit warnings. Backward compatibility is not guaranteed.',
+    size: 'default',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    level: 'info',
+    title: '3',
+    children: (
+      <p>
+        Lorem ipsum dolor sit amet <ExclamationCircleIcon /> consectetur
+        adipisicing elit. Inventore, quasi doloremque. Totam, earum velit, sunt
+        voluptates fugiat beatae praesentium quis magni explicabo repudiandae
+        nam aut molestias ex ad sequi eum!
+      </p>
+    ),
+    size: 'default',
+  },
+};
+
+export default {
+  component: InfoBox,
+  argTypes: {
+    size: {
+      options: ['default', 'small'],
+      control: { type: 'radio' },
+    },
+  },
+} as Meta;

apps/site/components/Common/InfoBox/index.tsx

@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+import type { FC, PropsWithChildren } from 'react';
+
+import styles from './index.module.css';
+
+type InfoBoxProps = PropsWithChildren<{
+  level: 'info' | 'success' | 'warning' | 'error';
+  title: string;
+  size?: 'default' | 'small';
+}>;
+
+const InfoBox: FC<InfoBoxProps> = ({
+  level,
+  title,
+  children,
+  size = 'default',
+}) => (
+  <div className={classNames(styles.infoBox, styles[level], styles[size])}>
+    <span className={styles.title}>{title}</span>
+    {children}
+  </div>
+);
+
+export default InfoBox;