sdaia-ui 1.0.1

package/src/components/Dropdown/Dropdown.variants.ts

@@ -0,0 +1,73 @@
+/*
+ * Dropdown variant maps
+ *
+ * Figma source: node 6069:90934 "Dropdown"
+ * Variables traced to get_variable_defs / get_design_context output dated 2026-04-14.
+ *
+ * Trigger layout:
+ *   Button/Avatar → h-[40px] (ButtonMenu md size)
+ *   Icon          → size-[24px] (more-vertical icon button)
+ *
+ * Open focus ring (all trigger types):
+ *   border-2 border-[rgba(27,131,84,0.7)] rounded-[8px] p-spacing-xxs
+ *   Avatar: rounded-full
+ *
+ * Panel:
+ *   absolute bg-white rounded-[8px] shadow-xl w-[250px] py-spacing-xs
+ *   Button/Avatar → top-[50px]
+ *   Icon          → top-[34px]
+ *   Horizontal position determined by alignment prop.
+ */
+
+/* ── Open state focus ring ───────────────────────────────────────────────────
+ * Figma: 2px border rgba(27,131,84,0.7) with spacing-xxs (2px) gap.
+ * Applied as a CSS outline directly on the trigger element so it has zero
+ * layout impact — no wrapper div, no height expansion.
+ *   outline        = drawn outside the border-box (no size change)
+ *   outline-offset = replicates the spacing-xxs (2px) padding of the Figma wrapper
+ * ──────────────────────────────────────────────────────────────────────────── */
+export const OPEN_RING =
+  'outline outline-2 outline-[rgba(27,131,84,0.7)] outline-offset-[2px]';
+
+export const OPEN_RING_ROUNDED = 'rounded-[8px]';
+export const OPEN_RING_ROUNDED_FULL = 'rounded-full';
+
+/* ── Icon trigger (more-vertical / ⋮) ───────────────────────────────────────
+ * Figma: 24×24 icon button — no background, no border, pure icon.
+ * Hover/active states match neutral button interactive states.
+ * ──────────────────────────────────────────────────────────────────────────── */
+export const ICON_TRIGGER_BASE =
+  'inline-flex items-center justify-center size-[24px] cursor-pointer motion-feedback';
+
+export const ICON_TRIGGER_RADIUS = 'rounded-[6px]';
+
+export const ICON_TRIGGER_INTERACTIVE =
+  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(255,255,255,0.08)] active:bg-[rgba(229,231,235,1)] dark:active:bg-[rgba(255,255,255,0.13)]';
+
+export const ICON_TRIGGER_FOCUS =
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(22,22,22,1)] dark:focus-visible:ring-[rgba(229,231,235,1)]';
+
+export const ICON_COLOR =
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+
+export const ICON_DISABLED_COLOR =
+  'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]';
+
+
+/* ── Dropdown panel ──────────────────────────────────────────────────────────
+ * Background: Background/background-white
+ * Shadow: Shadows/shadow-xl (0px 8px 8px -4px + 0px 20px 24px -4px)
+ * Radius: 8px
+ * Width: 250px
+ * ──────────────────────────────────────────────────────────────────────────── */
+export const PANEL_BG = 'bg-white dark:bg-[rgba(17,25,39,1)]';
+
+export const PANEL_SHADOW =
+  'shadow-[0px_8px_8px_-4px_rgba(16,24,40,0.03),0px_20px_24px_-4px_rgba(16,24,40,0.08)]';
+
+export const PANEL_RADIUS = 'rounded-[8px]';
+
+/* ── Disabled ────────────────────────────────────────────────────────────────
+ * Matches ContextMenuDropdown disabled container pattern.
+ * ──────────────────────────────────────────────────────────────────────────── */
+export const DISABLED_CONTAINER = 'pointer-events-none cursor-default opacity-50';

package/src/components/Dropdown/index.ts

@@ -0,0 +1,9 @@
+export { Dropdown } from './Dropdown';
+export type {
+  DropdownProps,
+  DropdownTriggerType,
+  DropdownAlignment,
+  DropdownItem,
+  DropdownNavEntry,
+  DropdownDivider,
+} from './Dropdown.types';

package/src/components/DropdownListHeader/DropdownListHeader.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { UserIcon } from '../../icons/IconFactory';
+import type { DropdownListHeaderProps } from './DropdownListHeader.types';
+import {
+  CONTAINER_BASE,
+  USER_ROW,
+  AVATAR_WRAPPER,
+  AVATAR_IMG,
+  AVATAR_FALLBACK,
+  AVATAR_ICON_WRAPPER,
+  STATUS_DOT,
+  TEXT_WRAPPER,
+  NAME_CLASS,
+  EMAIL_CLASS,
+  HEADER_ROW,
+  HEADER_LABEL_CLASS,
+} from './DropdownListHeader.variants';
+
+function AvatarSlot({ src, alt }: { src?: string; alt?: string }) {
+  return (
+    <div data-slot="avatar" className={AVATAR_WRAPPER}>
+      {src ? (
+        <img src={src} alt={alt ?? ''} className={AVATAR_IMG} />
+      ) : (
+        <div className={AVATAR_FALLBACK}>
+          <div className={AVATAR_ICON_WRAPPER}>
+            <UserIcon aria-hidden="true" />
+          </div>
+        </div>
+      )}
+      <span data-slot="status-dot" className={STATUS_DOT} aria-hidden="true" />
+    </div>
+  );
+}
+
+export const DropdownListHeader = forwardRef<HTMLDivElement, DropdownListHeaderProps>(
+  function DropdownListHeader(
+    { type = 'User', dir, avatarSrc, avatarAlt, name, email, label, className },
+    ref
+  ) {
+    if (type === 'Header') {
+      return (
+        <div
+          ref={ref}
+          dir={dir}
+          data-slot="dropdown-list-header"
+          className={cn(CONTAINER_BASE, HEADER_ROW, className)}
+        >
+          <p data-slot="label" className={HEADER_LABEL_CLASS}>
+            {label ?? 'Menu'}
+          </p>
+        </div>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        dir={dir}
+        data-slot="dropdown-list-header"
+        className={cn(
+          CONTAINER_BASE,
+          USER_ROW,
+          dir === 'rtl' && 'flex-row-reverse',
+          className
+        )}
+      >
+        <AvatarSlot src={avatarSrc} alt={avatarAlt} />
+        <div data-slot="user-info" className={TEXT_WRAPPER}>
+          <span data-slot="name" className={NAME_CLASS}>{name ?? 'Name Surname'}</span>
+          <span data-slot="email" className={EMAIL_CLASS}>{email ?? 'email@example.com'}</span>
+        </div>
+      </div>
+    );
+  }
+);

package/src/components/DropdownListHeader/DropdownListHeader.types.ts

@@ -0,0 +1,24 @@
+export type DropdownListHeaderType = 'User' | 'Header';
+
+export interface DropdownListHeaderProps {
+  /** Structural variant: 'User' renders avatar + name/email; 'Header' renders a menu section label. */
+  type?: DropdownListHeaderType;
+  /** Layout direction — pass 'rtl' to flip the avatar to the trailing side. */
+  dir?: 'ltr' | 'rtl';
+
+  // ── User type ────────────────────────────────────────────────────────────────
+  /** URL for the user avatar image. When omitted a generic person icon is shown. */
+  avatarSrc?: string;
+  /** Alt text for the avatar image. */
+  avatarAlt?: string;
+  /** User's display name. */
+  name?: string;
+  /** User's email address. */
+  email?: string;
+
+  // ── Header type ──────────────────────────────────────────────────────────────
+  /** Menu section label shown in the Header variant. */
+  label?: string;
+
+  className?: string;
+}

package/src/components/DropdownListHeader/DropdownListHeader.variants.ts

@@ -0,0 +1,65 @@
+/**
+ * DropdownListHeader.variants.ts
+ *
+ * Class-name constants traced from Figma node 6069:90551.
+ *
+ * Color tokens:
+ *   Border/border-neutral-secondary   → #e5e7eb  / dark: rgba(56,66,80)
+ *   Background/background-primary     → #1b8354  (status dot background)
+ *   Border/border-neutral-tertiary    → #f3f4f6  (status dot ring) / dark: rgba(31,42,55) card bg
+ *   Text/text-display                 → #1f2a37  / dark: rgba(229,231,235)
+ *   Text/text-secondary-paragraph     → #6c737f  / dark: rgba(156,163,175)
+ *   Text/text-primary-paragraph       → #384250  / dark: rgba(156,163,175)
+ */
+
+// ─── Container ────────────────────────────────────────────────────────────────
+// Width 220px, padding spacing-lg, bottom divider border
+
+export const CONTAINER_BASE =
+  'border-b border-[rgba(229,231,235,1)] dark:border-[rgba(56,66,80,1)] p-spacing-lg w-[220px]';
+
+// ─── User layout ──────────────────────────────────────────────────────────────
+
+export const USER_ROW = 'flex items-center gap-spacing-md';
+
+// ─── Avatar ───────────────────────────────────────────────────────────────────
+// 40×40px circular image + 12px green status dot at bottom-right (RTL: bottom-left)
+
+export const AVATAR_WRAPPER = 'relative shrink-0 size-[40px]';
+
+export const AVATAR_IMG =
+  'size-[40px] rounded-full object-cover block';
+
+export const AVATAR_FALLBACK =
+  'size-[40px] rounded-full flex items-center justify-center ' +
+  'bg-[rgba(243,244,246,1)] dark:bg-[rgba(56,66,80,1)]';
+
+export const AVATAR_ICON_WRAPPER =
+  'size-[16px] text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+
+// Status dot: absolute, 12px, green bg, 2px white ring
+// Uses inset-inline-end (logical) so it flips to the correct corner in RTL
+export const STATUS_DOT =
+  'absolute bottom-[-4px] end-[-4px] size-[12px] rounded-full ' +
+  'bg-[rgba(27,131,84,1)] ring-2 ring-[rgba(243,244,246,1)] dark:ring-[rgba(31,42,55,1)]';
+
+// ─── Text content ─────────────────────────────────────────────────────────────
+
+export const TEXT_WRAPPER = 'flex flex-col min-w-0';
+
+export const NAME_CLASS =
+  'text-text-sm font-semibold truncate ' +
+  'text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]';
+
+export const EMAIL_CLASS =
+  'text-text-sm font-normal truncate ' +
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+
+// ─── Header variant ───────────────────────────────────────────────────────────
+// 44px height, single semibold label, no avatar
+
+export const HEADER_ROW = 'flex items-center h-[44px]';
+
+export const HEADER_LABEL_CLASS =
+  'text-text-sm font-semibold ' +
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)]';

package/src/components/DropdownListHeader/index.ts

@@ -0,0 +1,2 @@
+export { DropdownListHeader } from './DropdownListHeader';
+export type { DropdownListHeaderProps, DropdownListHeaderType } from './DropdownListHeader.types';

package/src/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,221 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { Button } from '../Button';
+import { IllustrationInstance } from '../IllustrationInstance';
+import type { EmptyStateProps, EmptyStateType } from './EmptyState.types';
+import {
+  CONNECTION_LOST_DESC,
+  CONNECTION_LOST_TEXT_WRAP,
+  CONNECTION_LOST_TITLE,
+  CONTENT_CENTER,
+  DESCRIPTION_LG,
+  DESCRIPTION_MD,
+  DESCRIPTION_SM,
+  PAGE_NOT_FOUND_404,
+  PAGE_NOT_FOUND_CONTENT,
+  PAGE_NOT_FOUND_DESC,
+  PAGE_NOT_FOUND_STACK,
+  PAGE_NOT_FOUND_TITLE,
+  ROOT_BASE,
+  ROOT_BY_TYPE,
+  SPLIT_ILLUSTRATION_WRAP,
+  SPLIT_ITEM,
+  TEXT_STACK,
+  TITLE_DISPLAY_XS,
+  TITLE_XL,
+} from './EmptyState.variants';
+
+type Copy = { title: string; description: string; buttonLabel?: string };
+
+const COPY_BY_TYPE: Record<EmptyStateType, Copy> = {
+  'no-data': {
+    title: 'No items yet',
+    description: 'You don’t have anything here yet. Start by creating a new item.',
+    buttonLabel: 'Create New',
+  },
+  'no-connection': {
+    title: 'No Connection',
+    description: 'Your internet connection was interrupted, Please retry.',
+    buttonLabel: 'Retry',
+  },
+  error: {
+    title: 'Page not found',
+    description: 'The page you were looking for does not exist',
+    buttonLabel: 'Back Home',
+  },
+  'no-notifications': {
+    title: 'No Notifications',
+    description: 'You currently have no notifications',
+    buttonLabel: 'Back Home',
+  },
+  'connection-lost': {
+    title: 'Connection Lost',
+    description: 'The page you were looking for does not exist',
+    buttonLabel: 'Retry',
+  },
+  'page-not-found': {
+    title: 'Page not found!',
+    description: 'The page you were looking for does not exist',
+    buttonLabel: 'Back Home',
+  },
+};
+
+const ILLUSTRATION_SIZE_BY_TYPE: Record<EmptyStateType, { width: number; height: number }> = {
+  'no-data': { width: 80, height: 80 },
+  'no-connection': { width: 340, height: 203 },
+  error: { width: 200, height: 90 },
+  'no-notifications': { width: 155, height: 155 },
+  'connection-lost': { width: 400, height: 400 },
+  'page-not-found': { width: 490, height: 490 },
+};
+
+export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(
+  {
+    type = 'no-data',
+    dir: dirProp,
+    rtl = false,
+    illustration,
+    heading = true,
+    helperText = true,
+    button = true,
+    headingContent,
+    helperTextContent,
+    buttonLabel,
+    onButtonClick,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const resolvedDir = dirProp ?? (rtl ? 'rtl' : undefined);
+  const copy = COPY_BY_TYPE[type];
+  const resolvedTitle = headingContent ?? copy.title;
+  const resolvedDescription = helperTextContent ?? copy.description;
+  const resolvedButtonLabel = buttonLabel ?? copy.buttonLabel;
+
+  const illustrationNode =
+    illustration ??
+    (() => {
+      const { width, height } = ILLUSTRATION_SIZE_BY_TYPE[type];
+      return <IllustrationInstance width={width} height={height} />;
+    })();
+
+  return (
+    <div
+      ref={ref}
+      dir={resolvedDir}
+      data-slot="empty-state"
+      className={cn(ROOT_BASE, ROOT_BY_TYPE[type], className)}
+      {...rest}
+    >
+      {/* Order matches Figma per type */}
+      {(type === 'no-data' || type === 'no-connection' || type === 'error' || type === 'no-notifications') && (
+        <div data-slot="illustration" className="w-full flex justify-center shrink-0">
+          {illustrationNode}
+        </div>
+      )}
+
+      {(type === 'page-not-found' || type === 'error' || type === 'no-notifications') && (
+        <div data-slot="content" className={type === 'page-not-found' ? PAGE_NOT_FOUND_CONTENT : CONTENT_CENTER}>
+          {type === 'page-not-found' && (
+            <>
+              <p
+                data-slot="status-code"
+                className={PAGE_NOT_FOUND_404}
+                style={{
+                  backgroundImage:
+                    'linear-gradient(0.04162157269563238deg, rgba(255, 255, 255, 0) 9.2005%, rgba(31, 42, 55, 1) 102.07%)',
+                }}
+              >
+                404
+              </p>
+              <div data-slot="text-and-button" className={PAGE_NOT_FOUND_STACK}>
+                <div data-slot="text" className={cn('flex flex-col gap-spacing-md items-start w-full text-center')}>
+                  {heading && <div data-slot="title" className={PAGE_NOT_FOUND_TITLE}>{resolvedTitle}</div>}
+                  {helperText && <div data-slot="description" className={PAGE_NOT_FOUND_DESC}>{resolvedDescription}</div>}
+                </div>
+                {button && resolvedButtonLabel ? (
+                  <Button data-slot="button" variant="neutral" size="lg" onClick={onButtonClick}>
+                    {resolvedButtonLabel}
+                  </Button>
+                ) : null}
+              </div>
+            </>
+          )}
+
+          {(type === 'error' || type === 'no-notifications') && (
+            <>
+              <div data-slot="text" className={cn('flex flex-col gap-spacing-lg items-start w-full text-center')}>
+                {heading && <div data-slot="title" className={TITLE_DISPLAY_XS}>{resolvedTitle}</div>}
+                {helperText && <div data-slot="description" className={DESCRIPTION_LG}>{resolvedDescription}</div>}
+              </div>
+              {button && resolvedButtonLabel ? (
+                <Button data-slot="button" variant="neutral" size="lg" onClick={onButtonClick}>
+                  {resolvedButtonLabel}
+                </Button>
+              ) : null}
+            </>
+          )}
+        </div>
+      )}
+
+      {(type === 'no-data' || type === 'no-connection') && (
+        <>
+          <div data-slot="text" className={TEXT_STACK}>
+            {heading && <div data-slot="title" className={TITLE_XL}>{resolvedTitle}</div>}
+            {helperText && (
+              <div
+                data-slot="description"
+                className={cn(type === 'no-data' ? DESCRIPTION_SM : DESCRIPTION_MD)}
+              >
+                {resolvedDescription}
+              </div>
+            )}
+          </div>
+          {button && resolvedButtonLabel ? (
+            <Button
+              data-slot="button"
+              variant="primary"
+              size="lg"
+              onClick={onButtonClick}
+            >
+              {resolvedButtonLabel}
+            </Button>
+          ) : null}
+        </>
+      )}
+
+      {type === 'connection-lost' && (
+        <>
+          <div data-slot="content" className={cn(CONNECTION_LOST_TEXT_WRAP, SPLIT_ITEM, resolvedDir === 'rtl' && 'items-end')}>
+            <div data-slot="text" className={cn('flex flex-col gap-spacing-lg items-start w-full')}>
+              {heading && <div data-slot="title" className={CONNECTION_LOST_TITLE}>{resolvedTitle}</div>}
+              {helperText && <div data-slot="description" className={CONNECTION_LOST_DESC}>{resolvedDescription}</div>}
+            </div>
+            {button && resolvedButtonLabel ? (
+              <Button data-slot="button" variant="neutral" size="lg" onClick={onButtonClick}>
+                {resolvedButtonLabel}
+              </Button>
+            ) : null}
+          </div>
+
+          <div data-slot="illustration" className={cn(SPLIT_ILLUSTRATION_WRAP, 'shrink-0')}>
+            {illustrationNode}
+          </div>
+        </>
+      )}
+
+      {type === 'page-not-found' && (
+        <>
+          {/* content block is already rendered above in the "page-not-found" group */}
+          <div data-slot="illustration" className={cn(SPLIT_ILLUSTRATION_WRAP, 'shrink-0')}>
+            {illustrationNode}
+          </div>
+        </>
+      )}
+    </div>
+  );
+});
+

package/src/components/EmptyState/EmptyState.types.ts

@@ -0,0 +1,48 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type EmptyStateType =
+  | 'no-data'
+  | 'no-connection'
+  | 'error'
+  | 'no-notifications'
+  | 'connection-lost'
+  | 'page-not-found';
+
+export interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
+  /** Content/layout preset from Figma (State Types). */
+  type?: EmptyStateType;
+
+  /**
+   * Direction override. Prefer this over the deprecated `rtl` boolean.
+   * Inherited from HTMLAttributes but narrowed here for clarity.
+   * If both are provided, `dir` takes precedence.
+   */
+  dir?: 'ltr' | 'rtl';
+
+  /**
+   * @deprecated Use `dir="rtl"` instead.
+   * Kept for backwards compatibility — sets `dir="rtl"` on the root element.
+   */
+  rtl?: boolean;
+
+  /** Optional illustration element. If omitted, renders the Figma placeholder. */
+  illustration?: ReactNode;
+
+  /** Shows the heading/title area. */
+  heading?: boolean;
+  /** Shows the supporting/helper text. */
+  helperText?: boolean;
+  /** Shows the call-to-action button. */
+  button?: boolean;
+
+  /** Heading content. If omitted, a Figma-aligned default is used for the selected `type`. */
+  headingContent?: ReactNode;
+  /** Supporting text content. If omitted, a Figma-aligned default is used for the selected `type`. */
+  helperTextContent?: ReactNode;
+
+  /** Button label. If omitted, a Figma-aligned default is used for the selected `type`. */
+  buttonLabel?: string;
+  /** Click handler for the built-in button. */
+  onButtonClick?: () => void;
+}
+

package/src/components/EmptyState/EmptyState.variants.ts

@@ -0,0 +1,122 @@
+import type { EmptyStateType } from './EmptyState.types';
+
+/* All class-name constants mapped from Figma node 6479:94141 (Empty State). */
+
+export const ROOT_BASE = ['flex items-center', 'p-spacing-2xl', 'relative'].join(' ');
+
+export const ROOT_BY_TYPE: Record<EmptyStateType, string> = {
+  'no-data': [
+    'flex-col justify-center',
+    'gap-spacing-3xl',
+    'w-full max-w-[388px]',
+    'text-center',
+  ].join(' '),
+  'no-connection': [
+    'flex-col',
+    'gap-spacing-3xl',
+    'w-full max-w-[679px]',
+    'text-center',
+  ].join(' '),
+  error: [
+    'flex-col justify-center',
+    'gap-spacing-5xl',
+    'w-full max-w-[547px]',
+    'text-center',
+  ].join(' '),
+  'no-notifications': [
+    'flex-col justify-center',
+    'gap-spacing-5xl',
+    'w-full max-w-[547px]',
+    'text-center',
+  ].join(' '),
+  'connection-lost': [
+    'flex-row flex-wrap items-center justify-center',
+    'gap-spacing-lg',
+    'w-full max-w-[735px]',
+    'rtl:flex-row-reverse',
+  ].join(' '),
+  'page-not-found': [
+    'flex-row flex-wrap items-center justify-center',
+    'gap-spacing-xl',
+    'w-full max-w-[1225px]',
+    'rtl:flex-row-reverse',
+  ].join(' '),
+};
+
+export const TEXT_STACK = ['flex flex-col', 'gap-spacing-md', 'items-start', 'w-full', 'text-center'].join(' ');
+
+export const TITLE_XL = [
+  'text-text-xl font-[600]',
+  'text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]',
+  'w-full',
+].join(' ');
+
+export const DESCRIPTION_SM = [
+  'text-text-sm font-[400]',
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)]',
+  'w-full',
+].join(' ');
+
+export const DESCRIPTION_MD = [
+  'text-text-md font-[400]',
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)]',
+  'w-full',
+].join(' ');
+
+export const TITLE_DISPLAY_XS = [
+  'text-display-xs font-[600]',
+  'text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]',
+  'w-full',
+].join(' ');
+
+export const DESCRIPTION_LG = [
+  'text-text-lg font-[400]',
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)]',
+  'w-full',
+].join(' ');
+
+export const CONNECTION_LOST_TEXT_WRAP = ['flex flex-col', 'gap-spacing-3xl', 'items-start', 'justify-center', 'w-full'].join(' ');
+export const CONNECTION_LOST_TITLE = [
+  'text-display-sm font-[500]',
+  'text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]',
+  'w-full',
+].join(' ');
+export const CONNECTION_LOST_DESC = [
+  'text-text-lg font-[400]',
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)]',
+  'break-words',
+].join(' ');
+
+export const CONTENT_CENTER = [
+  'flex flex-col items-center justify-center',
+  'gap-spacing-3xl',
+  'w-full',
+].join(' ');
+
+/* For split layouts that must be responsive to container width (not viewport). */
+export const SPLIT_ITEM = 'flex-1 min-w-[300px]';
+export const SPLIT_ILLUSTRATION_WRAP = 'flex-1 min-w-[300px] flex justify-center';
+
+export const PAGE_NOT_FOUND_CONTENT = ['flex flex-[1_0_0] flex-col', 'items-center', 'min-w-[300px]', 'pb-[70px]'].join(' ');
+
+export const PAGE_NOT_FOUND_404 = [
+  'w-full',
+  'text-center',
+  'text-[clamp(120px,20vw,302px)] leading-[2.07]',
+  'font-[600]',
+  'h-[clamp(160px,24vw,350px)]',
+  'text-[transparent] bg-clip-text',
+].join(' ');
+
+export const PAGE_NOT_FOUND_STACK = ['flex flex-col', 'items-center', 'gap-spacing-2xl', 'w-full', 'mb-[-70px]'].join(' ');
+export const PAGE_NOT_FOUND_TITLE = [
+  'text-display-sm font-[600]',
+  'text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]',
+  'w-full',
+].join(' ');
+export const PAGE_NOT_FOUND_DESC = [
+  'text-text-lg font-[400]',
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)]',
+  'w-full',
+].join(' ');
+

package/src/components/EmptyState/index.ts

@@ -0,0 +1,3 @@
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps, EmptyStateType } from './EmptyState.types';
+