feat(components): Add ContentSeparator component

src/components/contentSeparator/index.tsx

@@ -0,0 +1,55 @@
+/**
+ * Component: ContentSeparator
+ *
+ * A labeled horizontal divider with the message centered between two lines.
+ * Useful for visually separating groups of content within a page.
+ *
+ * Props overview
+ * - message: string — text shown in the label (required)
+ * - variant: 'neutral' | 'info' | 'warning' | 'success' | 'danger' (default 'info')
+ * - marginTopRem, marginBottomRem: control vertical spacing (defaults 2 / 1)
+ *
+ * Usage
+ * <ContentSeparator message="Advanced configuration" />
+ */
+type Props = {
+  /** The message displayed in the center label. */
+  message: string;
+  /** Extra spacing below (in rem). Default: 1. */
+  marginBottomRem?: number;
+  /** Extra spacing above (in rem). Default: 2. */
+  marginTopRem?: number;
+  /** Optional visual style; default 'info'. */
+  variant?: 'neutral' | 'info' | 'warning' | 'success' | 'danger';
+};
+
+import styles from './style.module.scss';
+
+/**
+ * ContentSeparator
+ *
+ * A labeled horizontal separator that sits between content blocks.
+ * Example:
+ * <ContentSeparator message="Advanced configuration" />
+ */
+export function ContentSeparator({
+  message,
+  variant = 'info',
+  marginTopRem = 2,
+  marginBottomRem = 1,
+}: Props) {
+  return (
+    <section
+      className={styles.wrapper}
+      style={{marginTop: `${marginTopRem}rem`, marginBottom: `${marginBottomRem}rem`}}
+    >
+      <div className={styles.separator} role="separator" aria-label={message}>
+        <span className={styles.line} aria-hidden="true" />
+        <span className={`${styles.label} ${styles[`label--${variant}`]}`}>
+          {message}
+        </span>
+        <span className={styles.line} aria-hidden="true" />
+      </div>
+    </section>
+  );
+}

src/components/contentSeparator/style.module.scss

@@ -0,0 +1,41 @@
+.wrapper {}
+
+.separator {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+}
+
+.line {
+  flex: 1 1 auto;
+  height: 1px;
+  background: var(--gray-a5);
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.35rem 0.75rem;
+  border-radius: 6px;
+  font-weight: 500;
+  font-size: 0.95rem;
+  color: #fff;
+  background: var(--code-background);
+  border: 1px solid var(--accent-11);
+  box-shadow: 0 1px 2px var(--gray-a3);
+  max-width: 66.6667%;
+  flex: 0 1 66.6667%;
+  text-align: center;
+  justify-content: center;
+  white-space: normal;
+}
+
+.label--neutral {}
+.label--info { background: var(--accent-a3, var(--gray-a3)); border-color: var(--accent-a6, var(--gray-a6)); }
+.label--success { background: var(--green-a3, var(--gray-a3)); border-color: var(--green-a6, var(--gray-a6)); }
+.label--warning { background: var(--yellow-a3, var(--gray-a3)); border-color: var(--yellow-a6, var(--gray-a6)); }
+.label--danger { background: var(--red-a3, var(--gray-a3)); border-color: var(--red-a6, var(--gray-a6)); }
+
+.content { margin-top: 1rem; }
+

src/mdxComponents.ts

@@ -8,6 +8,7 @@ import {CodeTabs} from './components/codeTabs';
 import {CommunitySupportedPlatforms} from './components/communitySupportedPlatforms';
 import {ConfigKey} from './components/configKey';
 import {ConfigValue} from './components/configValue';
+import {ContentSeparator} from './components/contentSeparator';
 import {CreateGitHubAppForm} from './components/createGitHubAppForm';
 import {DefinitionList} from './components/definitionList';
 import {DevDocsCardGrid} from './components/devDocsCardGrid';
@@ -58,6 +59,7 @@ export function mdxComponents(
     Card,
     CliChecksumTable,
     CommunitySupportedPlatforms,
+    ContentSeparator,
     DevDocsCardGrid,
     PlatformFilter,
     CodeBlock,