@sovereignfs/ui 0.21.0

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ICONS, type IconName } from './icons';
+import { Icon } from './Icon';
+
+const ALL_NAMES = Object.keys(ICONS) as IconName[];
+
+const meta = {
+  title: 'Components/Icon',
+  component: Icon,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'SVG icon primitive. Icons are either **decorative** (`aria-hidden`) or **meaningful** (`aria-label`). Size is controlled by `--sv-icon-size-*` tokens.',
+      },
+    },
+  },
+  argTypes: {
+    name: { control: 'select', options: ALL_NAMES },
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+  },
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const Decorative: Story = {
+  args: { name: 'house', size: 'md', 'aria-hidden': true },
+};
+
+export const Meaningful: Story = {
+  args: { name: 'settings', size: 'md', 'aria-label': 'Open settings' },
+};
+
+export const SizeSmall: Story = { args: { name: 'bell', size: 'sm', 'aria-hidden': true } };
+export const SizeMedium: Story = { args: { name: 'bell', size: 'md', 'aria-hidden': true } };
+export const SizeLarge: Story = { args: { name: 'bell', size: 'lg', 'aria-hidden': true } };
+
+/** Full icon grid — every name across all three sizes. */
+export const AllIcons: Story = {
+  parameters: { layout: 'padded' },
+  args: { name: 'house', 'aria-hidden': true },
+  render: (_args) => (
+    <div>
+      {(['sm', 'md', 'lg'] as const).map((sz) => (
+        <section key={sz} style={{ marginBottom: 32 }}>
+          <h3
+            style={{
+              fontFamily: 'system-ui',
+              fontSize: 13,
+              fontWeight: 600,
+              color: 'var(--sv-color-text-muted)',
+              textTransform: 'uppercase',
+              letterSpacing: '0.08em',
+              marginBottom: 12,
+            }}
+          >
+            Size: {sz}
+          </h3>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>
+            {ALL_NAMES.map((name) => (
+              <div
+                key={name}
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  gap: 4,
+                  width: 64,
+                }}
+              >
+                <Icon name={name} size={sz} aria-hidden />
+                <span
+                  style={{
+                    fontFamily: 'monospace',
+                    fontSize: 10,
+                    color: 'var(--sv-color-text-muted)',
+                    textAlign: 'center',
+                    wordBreak: 'break-word',
+                  }}
+                >
+                  {name}
+                </span>
+              </div>
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  ),
+};

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,43 @@
+import { ICONS, type IconName } from './icons';
+import styles from './Icon.module.css';
+
+export type { IconName };
+
+/** Decorative icon — visually meaningful but described by surrounding text. */
+type DecorativeProps = { 'aria-hidden': true; 'aria-label'?: never };
+/** Meaningful icon — standalone affordance that requires a label for screen readers. */
+type MeaningfulProps = { 'aria-label': string; 'aria-hidden'?: never };
+
+export interface IconProps {
+  /** Name of the icon from the curated Sovereign set. */
+  name: IconName;
+  /** Visual size. Defaults to `"md"` (20 px). */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional CSS class applied to the SVG element. */
+  className?: string;
+}
+
+/**
+ * `<Icon>` — the Sovereign design system icon primitive.
+ *
+ * Icons are either **decorative** (described by surrounding text — pass `aria-hidden`)
+ * or **meaningful** (standalone affordance — pass `aria-label`):
+ *
+ * ```tsx
+ * <Icon name="house" aria-hidden />           // decorative
+ * <Icon name="log-out" aria-label="Sign out" /> // meaningful
+ * ```
+ *
+ * Color follows `currentColor` so an icon automatically inherits the text color
+ * of its container and recolors with theme changes — no extra CSS required.
+ */
+export function Icon({
+  name,
+  size = 'md',
+  className,
+  ...aria
+}: IconProps & (DecorativeProps | MeaningfulProps)) {
+  const Svg = ICONS[name];
+  const classes = [styles.root, styles[size], className].filter(Boolean).join(' ');
+  return <Svg className={classes} role={aria['aria-label'] ? 'img' : undefined} {...aria} />;
+}

package/src/components/Icon/__tests__/Icon.test.tsx

@@ -0,0 +1,40 @@
+// @vitest-environment jsdom
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Icon } from '../Icon';
+
+describe('Icon', () => {
+  it('renders an SVG element', () => {
+    const { container } = render(<Icon name="house" aria-hidden />);
+    expect(container.querySelector('svg')).toBeTruthy();
+  });
+
+  it('applies aria-hidden for decorative icons', () => {
+    const { container } = render(<Icon name="house" aria-hidden />);
+    expect(container.querySelector('svg')?.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('applies aria-label and role="img" for meaningful icons', () => {
+    render(<Icon name="log-out" aria-label="Sign out" />);
+    const svg = screen.getByRole('img', { name: 'Sign out' });
+    expect(svg).toBeTruthy();
+  });
+
+  it('defaults to md size', () => {
+    const { container } = render(<Icon name="settings" aria-hidden />);
+    const svg = container.querySelector('svg');
+    // SVG className is an SVGAnimatedString in the DOM — use getAttribute('class').
+    // CSS Modules are identity-mapped in the test environment, so 'md' is literal.
+    expect(svg?.getAttribute('class')).toContain('md');
+  });
+
+  it('applies the requested size class', () => {
+    const { container } = render(<Icon name="settings" size="lg" aria-hidden />);
+    expect(container.querySelector('svg')?.getAttribute('class')).toContain('lg');
+  });
+
+  it('merges an additional className', () => {
+    const { container } = render(<Icon name="x" aria-hidden className="my-class" />);
+    expect(container.querySelector('svg')?.getAttribute('class')).toContain('my-class');
+  });
+});

package/src/components/Icon/icons/activity.tsx

@@ -0,0 +1,20 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function ActivityIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/alert-triangle.tsx

@@ -0,0 +1,22 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function AlertTriangleIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+      <path d="M12 9v4" />
+      <path d="M12 17h.01" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/bell.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function BellIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M10.268 21a2 2 0 0 0 3.464 0" />
+      <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/check.tsx

@@ -0,0 +1,20 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function CheckIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/chevron-down.tsx

@@ -0,0 +1,20 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function ChevronDownIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/chevron-left.tsx

@@ -0,0 +1,20 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function ChevronLeftIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/chevron-right.tsx

@@ -0,0 +1,20 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function ChevronRightIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/chevron-up.tsx

@@ -0,0 +1,20 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function ChevronUpIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="m18 15-6-6-6 6" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/eye-off.tsx

@@ -0,0 +1,23 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function EyeOffIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" />
+      <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
+      <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />
+      <path d="m2 2 20 20" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/eye.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function EyeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/grid-2x2.tsx

@@ -0,0 +1,22 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function Grid2x2Icon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M12 3v18" />
+      <path d="M3 12h18" />
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/house.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function HouseIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
+      <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/index.ts

@@ -0,0 +1,122 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+import type { ReactElement, SVGProps } from 'react';
+import { HouseIcon } from './house';
+import { SettingsIcon } from './settings';
+import { LogOutIcon } from './log-out';
+import { ChevronRightIcon } from './chevron-right';
+import { ChevronLeftIcon } from './chevron-left';
+import { ChevronDownIcon } from './chevron-down';
+import { ChevronUpIcon } from './chevron-up';
+import { XIcon } from './x';
+import { CheckIcon } from './check';
+import { PlusIcon } from './plus';
+import { Trash2Icon } from './trash-2';
+import { PencilIcon } from './pencil';
+import { RotateCcwIcon } from './rotate-ccw';
+import { SearchIcon } from './search';
+import { UserIcon } from './user';
+import { ShieldIcon } from './shield';
+import { LockIcon } from './lock';
+import { EyeIcon } from './eye';
+import { EyeOffIcon } from './eye-off';
+import { MailIcon } from './mail';
+import { BellIcon } from './bell';
+import { ActivityIcon } from './activity';
+import { PackageIcon } from './package';
+import { Grid2x2Icon } from './grid-2x2';
+import { InfoIcon } from './info';
+import { AlertTriangleIcon } from './alert-triangle';
+import { SlidersHorizontalIcon } from './sliders-horizontal';
+import { TerminalIcon } from './terminal';
+
+export type IconName =
+  | 'house'
+  | 'settings'
+  | 'log-out'
+  | 'chevron-right'
+  | 'chevron-left'
+  | 'chevron-down'
+  | 'chevron-up'
+  | 'x'
+  | 'check'
+  | 'plus'
+  | 'trash-2'
+  | 'pencil'
+  | 'rotate-ccw'
+  | 'search'
+  | 'user'
+  | 'shield'
+  | 'lock'
+  | 'eye'
+  | 'eye-off'
+  | 'mail'
+  | 'bell'
+  | 'activity'
+  | 'package'
+  | 'grid-2x2'
+  | 'info'
+  | 'alert-triangle'
+  | 'sliders-horizontal'
+  | 'terminal';
+
+export type IconComponent = (props: SVGProps<SVGSVGElement>) => ReactElement;
+
+export const ICONS: Record<IconName, IconComponent> = {
+  house: HouseIcon,
+  settings: SettingsIcon,
+  'log-out': LogOutIcon,
+  'chevron-right': ChevronRightIcon,
+  'chevron-left': ChevronLeftIcon,
+  'chevron-down': ChevronDownIcon,
+  'chevron-up': ChevronUpIcon,
+  x: XIcon,
+  check: CheckIcon,
+  plus: PlusIcon,
+  'trash-2': Trash2Icon,
+  pencil: PencilIcon,
+  'rotate-ccw': RotateCcwIcon,
+  search: SearchIcon,
+  user: UserIcon,
+  shield: ShieldIcon,
+  lock: LockIcon,
+  eye: EyeIcon,
+  'eye-off': EyeOffIcon,
+  mail: MailIcon,
+  bell: BellIcon,
+  activity: ActivityIcon,
+  package: PackageIcon,
+  'grid-2x2': Grid2x2Icon,
+  info: InfoIcon,
+  'alert-triangle': AlertTriangleIcon,
+  'sliders-horizontal': SlidersHorizontalIcon,
+  terminal: TerminalIcon,
+};
+
+export { HouseIcon } from './house';
+export { SettingsIcon } from './settings';
+export { LogOutIcon } from './log-out';
+export { ChevronRightIcon } from './chevron-right';
+export { ChevronLeftIcon } from './chevron-left';
+export { ChevronDownIcon } from './chevron-down';
+export { ChevronUpIcon } from './chevron-up';
+export { XIcon } from './x';
+export { CheckIcon } from './check';
+export { PlusIcon } from './plus';
+export { Trash2Icon } from './trash-2';
+export { PencilIcon } from './pencil';
+export { RotateCcwIcon } from './rotate-ccw';
+export { SearchIcon } from './search';
+export { UserIcon } from './user';
+export { ShieldIcon } from './shield';
+export { LockIcon } from './lock';
+export { EyeIcon } from './eye';
+export { EyeOffIcon } from './eye-off';
+export { MailIcon } from './mail';
+export { BellIcon } from './bell';
+export { ActivityIcon } from './activity';
+export { PackageIcon } from './package';
+export { Grid2x2Icon } from './grid-2x2';
+export { InfoIcon } from './info';
+export { AlertTriangleIcon } from './alert-triangle';
+export { SlidersHorizontalIcon } from './sliders-horizontal';
+export { TerminalIcon } from './terminal';

package/src/components/Icon/icons/info.tsx

@@ -0,0 +1,22 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function InfoIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 16v-4" />
+      <path d="M12 8h.01" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/lock.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function LockIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
+      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/log-out.tsx

@@ -0,0 +1,22 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function LogOutIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="m16 17 5-5-5-5" />
+      <path d="M21 12H9" />
+      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/mail.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function MailIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" />
+      <rect x="2" y="4" width="20" height="16" rx="2" />
+    </svg>
+  );
+}