@eocrm/design-system 0.6.24 → 0.8.0

package/src/components/Drawer/Drawer.module.scss

@@ -1,232 +0,0 @@
-@use '../../styles/mixins' as *;
-@use './Drawer.tokens';
-
-// ─── Overlay ────────────────────────────────────────────────────────────
-// stylelint-disable property-disallowed-list -- internal positioning, not consumer layout
-.overlay {
-  // stylelint-disable-next-line declaration-property-value-disallowed-list -- overlay must be fixed
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  width: 100dvw;
-  height: 100vh;
-  height: 100dvh;
-  background: var(--drawer-overlay-bg);
-  z-index: calc(var(--drawer-overlay-z) + var(--modal-depth, 0) * 2);
-  opacity: var(--drag-opacity, var(--drawer-overlay-opacity-visible));
-  transition: opacity var(--drawer-overlay-transition);
-  overscroll-behavior: contain;
-
-  // Hint to the browser to promote this element to its own compositor
-  // layer BEFORE the animation starts, so opacity transitions are smooth
-  // from frame 1 instead of after the first paint upgrade.
-  will-change: opacity;
-
-  // Isolate paint + layout from the rest of the page so opening the
-  // overlay doesn't invalidate sibling layout/paint trees.
-  contain: layout paint;
-
-  @starting-style {
-    opacity: var(--drawer-overlay-opacity-hidden);
-  }
-}
-
-.overlay[data-state='closed'] {
-  opacity: var(--drawer-overlay-opacity-hidden);
-}
-
-.overlay[data-stack-position='hidden'] {
-  display: none;
-}
-
-.overlay[data-variant='blur'] {
-  background: var(--drawer-overlay-bg-blur);
-  // stylelint-disable-next-line scale-unlimited/declaration-strict-value
-  backdrop-filter: blur(4px);
-  // stylelint-disable-next-line property-no-vendor-prefix, scale-unlimited/declaration-strict-value
-  -webkit-backdrop-filter: blur(4px);
-}
-
-.overlay[data-overlay-paint='no'] {
-  background: transparent;
-  backdrop-filter: none;
-  // stylelint-disable-next-line property-no-vendor-prefix
-  -webkit-backdrop-filter: none;
-}
-// stylelint-enable property-disallowed-list
-
-// ─── Content (dialog) ───────────────────────────────────────────────────
-// stylelint-disable property-disallowed-list
-.content {
-  // stylelint-disable-next-line declaration-property-value-disallowed-list -- drawer is fixed to a viewport edge
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  background: var(--drawer-bg);
-  box-shadow: var(--drawer-shadow);
-  z-index: calc(var(--drawer-overlay-z) + var(--modal-depth, 0) * 2 + 1);
-  transition: transform var(--drawer-transition);
-  overscroll-behavior: contain;
-
-  // Promote to its own compositor layer for smooth slide animation.
-  // transform is GPU-friendly already; will-change makes the browser
-  // upgrade the layer BEFORE the animation starts rather than during it.
-  will-change: transform;
-
-  // Isolate from the rest of the page — the drawer is fixed and doesn't
-  // affect parent layout/paint, so contain prevents reverse-invalidation.
-  contain: layout paint;
-}
-
-// Per-side positioning + slide animation. The drawer animates in from off-screen
-// (@starting-style) and animates out via [data-state='closed']. During drag,
-// --drag-translate-{x|y} on .content overrides via the base transform expression.
-.content.side-right {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: min(var(--drawer-size, var(--drawer-content-size-md)), 100vw - 32px);
-  width: min(var(--drawer-size, var(--drawer-content-size-md)), 100dvw - 32px);
-  transform: translateX(var(--drag-translate-x, 0));
-
-  @starting-style {
-    transform: translateX(100%);
-  }
-}
-
-.content.side-right[data-state='closed'] {
-  transform: translateX(100%);
-}
-
-.content.side-left {
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: min(var(--drawer-size, var(--drawer-content-size-md)), 100vw - 32px);
-  width: min(var(--drawer-size, var(--drawer-content-size-md)), 100dvw - 32px);
-  transform: translateX(var(--drag-translate-x, 0));
-
-  @starting-style {
-    transform: translateX(-100%);
-  }
-}
-
-.content.side-left[data-state='closed'] {
-  transform: translateX(-100%);
-}
-
-.content.side-top {
-  top: 0;
-  left: 0;
-  right: 0;
-  height: min(var(--drawer-size, var(--drawer-content-size-md)), 100vh - 32px);
-  height: min(var(--drawer-size, var(--drawer-content-size-md)), 100dvh - 32px);
-  transform: translateY(var(--drag-translate-y, 0));
-
-  @starting-style {
-    transform: translateY(-100%);
-  }
-}
-
-.content.side-top[data-state='closed'] {
-  transform: translateY(-100%);
-}
-
-.content.side-bottom {
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: min(var(--drawer-size, var(--drawer-content-size-md)), 100vh - 32px);
-  height: min(var(--drawer-size, var(--drawer-content-size-md)), 100dvh - 32px);
-  transform: translateY(var(--drag-translate-y, 0));
-
-  @starting-style {
-    transform: translateY(100%);
-  }
-}
-
-.content.side-bottom[data-state='closed'] {
-  transform: translateY(100%);
-}
-// stylelint-enable property-disallowed-list
-
-// Size presets drive --drawer-size which the side rules consume via min().
-.size-sm {
-  --drawer-size: var(--drawer-content-size-sm);
-}
-
-.size-md {
-  --drawer-size: var(--drawer-content-size-md);
-}
-
-.size-lg {
-  --drawer-size: var(--drawer-content-size-lg);
-}
-
-// ─── Header ─────────────────────────────────────────────────────────────
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--drawer-header-gap);
-  padding: var(--drawer-header-padding);
-  border-bottom: var(--border-width) solid var(--drawer-header-border-color);
-  touch-action: none;
-  cursor: grab;
-}
-
-.headerTitle {
-  // stylelint-disable-next-line property-disallowed-list -- reset h2 default margin; internal
-  margin: 0;
-  font-size: var(--drawer-header-title-font-size);
-  font-weight: var(--drawer-header-title-font-weight);
-  color: var(--drawer-header-title-fg);
-}
-
-// ─── Body ───────────────────────────────────────────────────────────────
-.body {
-  padding: var(--drawer-body-padding);
-  overflow-y: auto;
-  flex: 1 1 auto;
-  overscroll-behavior: contain;
-}
-
-.bodyPaddingNone {
-  padding: 0;
-}
-
-// ─── Footer ─────────────────────────────────────────────────────────────
-.footer {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--drawer-footer-gap);
-  padding: var(--drawer-footer-padding);
-  border-top: var(--border-width) solid var(--drawer-footer-border-color);
-}
-
-.footerAlign-start {
-  justify-content: flex-start;
-}
-
-.footerAlign-end {
-  justify-content: flex-end;
-}
-
-.footerAlign-space-between {
-  justify-content: space-between;
-}
-
-// ─── Reduced motion ─────────────────────────────────────────────────────
-@media (prefers-reduced-motion: reduce) {
-  .overlay,
-  .content {
-    transition: none;
-
-    @starting-style {
-      opacity: var(--drawer-opacity-visible);
-      transform: none;
-    }
-  }
-}

package/src/components/Drawer/Drawer.tokens.scss

@@ -1,38 +0,0 @@
-// Drawer.tokens.scss — Component-scoped tokens for <Drawer>. Each token defaults to the primitive the SCSS used before this migration. Drawer shares the modal z-index stack and overlay scrim with <Modal>; per-side slide transforms and the drag-to-close routing vars (--drag-translate-x/-y, --drag-opacity, --drawer-size, --modal-depth) are internal to the SCSS and not consumer-facing tokens.
-:root {
-  // Overlay (scrim)
-  --drawer-overlay-bg: var(--color-bg-overlay);
-  --drawer-overlay-bg-blur: var(--color-bg-overlay-blur);
-  --drawer-overlay-z: var(--z-modal);
-  --drawer-overlay-opacity-hidden: var(--opacity-hidden);
-  --drawer-overlay-opacity-visible: var(--opacity-visible);
-  --drawer-overlay-transition: var(--transition-base);
-
-  // Content (panel)
-  --drawer-bg: var(--color-bg);
-  --drawer-shadow: var(--shadow-lg);
-  --drawer-transition: var(--transition-base);
-  --drawer-opacity-visible: var(--opacity-visible);
-
-  // Size variants — width/height per size
-  --drawer-content-size-sm: var(--size-drawer-sm);
-  --drawer-content-size-md: var(--size-drawer-md);
-  --drawer-content-size-lg: var(--size-drawer-lg);
-
-  // Header
-  --drawer-header-gap: var(--space-3);
-  --drawer-header-padding: var(--space-4);
-  --drawer-header-border-color: var(--color-border);
-
-  --drawer-header-title-font-size: var(--font-size-lg);
-  --drawer-header-title-font-weight: var(--font-weight-semibold);
-  --drawer-header-title-fg: var(--color-fg);
-
-  // Body
-  --drawer-body-padding: var(--space-4);
-
-  // Footer
-  --drawer-footer-gap: var(--space-2);
-  --drawer-footer-padding: var(--space-4);
-  --drawer-footer-border-color: var(--color-border);
-}

package/src/components/Drawer/Drawer.tsx

@@ -1,23 +0,0 @@
-import { DrawerRoot } from './DrawerRoot';
-import { Header } from './Header';
-import { Body } from './Body';
-import { Footer } from './Footer';
-import { Close } from './Close';
-
-/**
- * Compound `<Drawer>` family: `Drawer.Header`, `Body`, `Footer` and `Close` attached via `Object.assign`.
- * @see docs/components/Drawer.md
- */
-export const Drawer = Object.assign(DrawerRoot, {
-  Header,
-  Body,
-  Footer,
-  Close,
-});
-
-export type { DrawerProps } from './DrawerRoot';
-export type { DrawerSide, DrawerSize, DrawerOverlayVariant, DrawerStackMode } from './context';
-export type { DrawerHeaderProps } from './Header';
-export type { DrawerBodyProps } from './Body';
-export type { DrawerFooterProps } from './Footer';
-export type { DrawerCloseProps } from './Close';

package/src/components/Drawer/DrawerRoot.tsx

@@ -1,190 +0,0 @@
-import {
-  useCallback,
-  useEffect,
-  useId,
-  useLayoutEffect,
-  useRef,
-  useState,
-  type CSSProperties,
-  type ReactNode,
-  type RefObject,
-} from 'react';
-import {
-  isFocusLost,
-  restoreFocusTo,
-  useOverlayStack,
-  useScrollLock,
-  type OverlayStackMode,
-} from '../_internal/overlay';
-import { sanitizeId } from '../_internal/refs';
-import {
-  DrawerContext,
-  type DrawerContextValue,
-  type DrawerOverlayVariant,
-  type DrawerSide,
-  type DrawerSize,
-  type DrawerStackMode,
-} from './context';
-import { Overlay } from './Overlay';
-import { Content } from './Content';
-
-export interface DrawerProps {
-  /** Controlled open state. Required — Drawer has no uncontrolled mode. */
-  open: boolean;
-  /** Fired when Drawer wants to change open state — Esc, overlay click, Close, swipe, programmatic. */
-  onOpenChange: (open: boolean) => void;
-
-  /** Edge the drawer slides in from: `left`, `right` (default), `top`, `bottom`. */
-  side?: DrawerSide;
-
-  /** Size preset: `sm` 320px, `md` 440px (default), `lg` 640px. Width for left/right, height for top/bottom. Capped to `viewport - 32px` on narrow viewports; always edge-anchored, never fullscreen. */
-  size?: DrawerSize;
-
-  /** Overlay variant. 'solid' (default) | 'blur' (frosted glass, `backdrop-filter: blur(4px)`). */
-  overlay?: DrawerOverlayVariant;
-
-  /**
-   * How this drawer relates to other open overlays (Modals or Drawers).
-   * 'overlay' (default): parent stays visible. 'replace': parent hidden via display:none.
-   */
-  stackMode?: DrawerStackMode;
-
-  /** Disable Escape-to-close. Default false. */
-  disableEscapeClose?: boolean;
-  /** When false, overlay click does NOT close. Default true. */
-  dismissOnOverlayClick?: boolean;
-  /** Enable swipe-to-close gesture on touch devices (from Header). Default true. */
-  dragToClose?: boolean;
-
-  /** Initial focus target on open. */
-  initialFocusRef?: RefObject<HTMLElement | null>;
-
-  children: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-  'aria-label'?: string;
-  'aria-describedby'?: string;
-}
-
-/**
- * Edge-anchored slide-in dialog sharing Modal's focus-lock, scroll-lock and overlay stack.
- * @see docs/components/Drawer.md
- */
-export function DrawerRoot({
-  open,
-  onOpenChange,
-  side = 'right',
-  size = 'md',
-  overlay = 'solid',
-  stackMode = 'overlay',
-  disableEscapeClose = false,
-  dismissOnOverlayClick = true,
-  dragToClose = true,
-  initialFocusRef,
-  children,
-  className,
-  style,
-  'aria-label': ariaLabel,
-  'aria-describedby': ariaDescribedBy,
-}: DrawerProps) {
-  const rawId = useId();
-  const drawerId = `drawer-${sanitizeId(rawId)}`;
-
-  const contentRef = useRef<HTMLDivElement | null>(null);
-  const [headingId, setHeadingId] = useState<string | null>(null);
-
-  // previouslyFocused — captured in a useLayoutEffect BEFORE Content's auto-focus microtask.
-  // prevOpenRef starts false (not `open`) so mounting already open counts as an
-  // opening and captures the opener; the cleanup below restores it when the
-  // Drawer unmounts while still open (#557 — port of Modal's #450 fix).
-  const previouslyFocusedRef = useRef<HTMLElement | null>(null);
-  const prevOpenRef = useRef(false);
-  const focusEffectGenerationRef = useRef(0);
-  const restoreFocus = useCallback(() => {
-    const target = previouslyFocusedRef.current;
-    previouslyFocusedRef.current = null;
-    if (target && document.contains(target)) {
-      restoreFocusTo(target);
-    }
-  }, []);
-  useLayoutEffect(() => {
-    const generation = ++focusEffectGenerationRef.current;
-    if (open && !prevOpenRef.current) {
-      previouslyFocusedRef.current = (document.activeElement as HTMLElement | null) ?? null;
-    }
-    if (!open && prevOpenRef.current) {
-      restoreFocus();
-    }
-    prevOpenRef.current = open;
-    // Unmounted while open: defer until React tears down the dialog and its
-    // focus trap. A later effect run (a normal close) bumps the generation and
-    // cancels this fallback, and restoreFocus clears its ref, so focus moves once.
-    // Only when focus was actually lost — a consumer that focused something
-    // after the unmount (e.g. the next row) keeps it.
-    if (open) {
-      return () => {
-        queueMicrotask(() => {
-          // eslint-disable-next-line react-hooks/exhaustive-deps -- the generation counter must be read at cleanup time
-          if (focusEffectGenerationRef.current === generation && isFocusLost()) restoreFocus();
-        });
-      };
-    }
-  }, [open, restoreFocus]);
-
-  const { depth, isTop, topMode } = useOverlayStack(drawerId, open, stackMode as OverlayStackMode);
-  useScrollLock(open);
-
-  const setOpen = useCallback((next: boolean) => onOpenChange(next), [onOpenChange]);
-
-  // Dev warning — deferred to microtask so <Drawer.Header>'s registration effect can run.
-  useEffect(() => {
-    if (!open) return;
-    if (process.env.NODE_ENV === 'production') return;
-    let cancelled = false;
-    queueMicrotask(() => {
-      if (cancelled) return;
-      if (!headingId && !ariaLabel) {
-        console.warn(
-          '<Drawer> must be labelled. Either render <Drawer.Header> or pass an `aria-label` prop.',
-        );
-      }
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [open, headingId, ariaLabel]);
-
-  const value: DrawerContextValue = {
-    open,
-    setOpen,
-    drawerId,
-    contentRef,
-    headingId,
-    setHeadingId,
-    side,
-    size,
-    overlay,
-    stackMode,
-    disableEscapeClose,
-    dismissOnOverlayClick,
-    dragToClose,
-    initialFocusRef,
-    ariaLabel,
-    ariaDescribedBy,
-    depth: depth ?? 0,
-    isTop,
-    topMode: topMode as DrawerStackMode | null,
-  };
-
-  return (
-    <DrawerContext.Provider value={value}>
-      {open && (
-        <Overlay>
-          <Content className={className} style={style}>
-            {children}
-          </Content>
-        </Overlay>
-      )}
-    </DrawerContext.Provider>
-  );
-}

package/src/components/Drawer/Footer.tsx

@@ -1,24 +0,0 @@
-import { forwardRef, type HTMLAttributes } from 'react';
-import clsx from 'clsx';
-import styles from './Drawer.module.scss';
-
-export interface DrawerFooterProps extends HTMLAttributes<HTMLDivElement> {
-  /** Horizontal action alignment. Default 'end'. */
-  align?: 'start' | 'end' | 'space-between';
-}
-
-export const Footer = forwardRef<HTMLDivElement, DrawerFooterProps>(function Footer(
-  { align = 'end', className, children, ...rest },
-  ref,
-) {
-  return (
-    <div
-      ref={ref}
-      role="group"
-      className={clsx(styles.footer, styles[`footerAlign-${align}`], className)}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-});

package/src/components/Drawer/Header.tsx

@@ -1,64 +0,0 @@
-import { forwardRef, useEffect, useId, useRef, type HTMLAttributes } from 'react';
-import clsx from 'clsx';
-import { X } from 'lucide-react';
-import { Button } from '../Button';
-import { useTranslation } from '../../i18n/useTranslation';
-import { useDrawerContext } from './context';
-import { sanitizeId, mergeRefs } from '../_internal/refs';
-import { useDragToClose } from './useDragToClose';
-import styles from './Drawer.module.scss';
-
-export interface DrawerHeaderProps extends HTMLAttributes<HTMLDivElement> {
-  /** Show the built-in × close button. Default true. */
-  closeButton?: boolean;
-}
-
-/**
- * Title bar at the top of the drawer: names the dialog, shows a close button and is the drag-to-close origin.
- * @see docs/components/Drawer.md
- */
-export const Header = forwardRef<HTMLDivElement, DrawerHeaderProps>(function Header(
-  { closeButton = true, className, children, ...rest },
-  ref,
-) {
-  const t = useTranslation();
-  const ctx = useDrawerContext('Header');
-  const rawId = useId();
-  const headingId = `drawer-heading-${sanitizeId(rawId)}`;
-  const internalRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    ctx.setHeadingId(headingId);
-    return () => ctx.setHeadingId(null);
-  }, [ctx, headingId]);
-
-  useDragToClose(internalRef, {
-    side: ctx.side,
-    active: ctx.dragToClose && ctx.isTop && ctx.open,
-    onDismiss: () => ctx.setOpen(false),
-    contentRef: ctx.contentRef,
-  });
-
-  return (
-    <div
-      ref={mergeRefs<HTMLDivElement>(internalRef, ref)}
-      className={clsx(styles.header, className)}
-      {...rest}
-    >
-      <h2 id={headingId} className={styles.headerTitle}>
-        {children}
-      </h2>
-      {closeButton && (
-        <Button
-          variant="ghost"
-          size="xs"
-          iconOnly
-          aria-label={t('drawer.close')}
-          onClick={() => ctx.setOpen(false)}
-        >
-          <X size={16} aria-hidden="true" />
-        </Button>
-      )}
-    </div>
-  );
-});

package/src/components/Drawer/Overlay.tsx

@@ -1,82 +0,0 @@
-import {
-  useEffect,
-  type CSSProperties,
-  type MouseEvent as ReactMouseEvent,
-  type ReactNode,
-} from 'react';
-import { createPortal } from 'react-dom';
-import { useDrawerContext } from './context';
-import styles from './Drawer.module.scss';
-
-export interface OverlayProps {
-  children: ReactNode;
-}
-
-const PORTAL_EXEMPT_SELECTOR =
-  '[data-modal-portal-root], [data-drawer-portal-root], [data-tour-portal-root]';
-
-/**
- * Portaled dimming / blurred backdrop. Owns the inert-background attribute
- * on body children (exempting modal AND drawer portals) + overlay-click
- * dismissal. Three data-attributes consumed by SCSS:
- * - data-variant         : 'solid' | 'blur'
- * - data-stack-position  : 'top' | 'underneath' | 'hidden'
- * - data-overlay-paint   : 'yes' | 'no'
- */
-export function Overlay({ children }: OverlayProps) {
-  const ctx = useDrawerContext('Overlay');
-
-  useEffect(() => {
-    if (!ctx.isTop) return;
-    const bodyChildren = Array.from(document.body.children) as HTMLElement[];
-    const toRestore: Array<{ el: HTMLElement; had: boolean }> = [];
-    for (const el of bodyChildren) {
-      if (el.matches(PORTAL_EXEMPT_SELECTOR)) continue;
-      const had = el.hasAttribute('inert');
-      if (!had) el.setAttribute('inert', '');
-      toRestore.push({ el, had });
-    }
-    return () => {
-      for (const { el, had } of toRestore) {
-        if (!had) el.removeAttribute('inert');
-      }
-    };
-  }, [ctx.isTop]);
-
-  const onClick = (e: ReactMouseEvent<HTMLDivElement>) => {
-    if (e.target !== e.currentTarget) return;
-    if (!ctx.dismissOnOverlayClick) return;
-    if (!ctx.isTop) return;
-    ctx.setOpen(false);
-  };
-
-  let stackPosition: 'top' | 'hidden' | 'underneath';
-  if (ctx.isTop) {
-    stackPosition = 'top';
-  } else if (ctx.topMode === 'replace') {
-    stackPosition = 'hidden';
-  } else {
-    stackPosition = 'underneath';
-  }
-
-  const paint =
-    (ctx.topMode === 'replace' && ctx.isTop) || (ctx.topMode === 'overlay' && ctx.depth === 0);
-
-  const style = { ['--modal-depth' as string]: String(ctx.depth) } as CSSProperties;
-
-  return createPortal(
-    <div
-      data-drawer-portal-root=""
-      data-state={ctx.open ? 'open' : 'closed'}
-      data-variant={ctx.overlay}
-      data-stack-position={stackPosition}
-      data-overlay-paint={paint ? 'yes' : 'no'}
-      className={styles.overlay}
-      style={style}
-      onClick={onClick}
-    >
-      {children}
-    </div>,
-    document.body,
-  );
-}

package/src/components/Drawer/context.ts

@@ -1,44 +0,0 @@
-import { createContext, useContext, type RefObject } from 'react';
-import type { OverlayStackMode } from '../_internal/overlay';
-import type { DrawerSide } from './useDragToClose';
-
-export type DrawerSize = 'sm' | 'md' | 'lg';
-export type DrawerOverlayVariant = 'solid' | 'blur';
-/** Alias of {@link OverlayStackMode}. */
-export type DrawerStackMode = OverlayStackMode;
-export type { DrawerSide };
-
-export interface DrawerContextValue {
-  open: boolean;
-  setOpen: (next: boolean) => void;
-  /** Stable drawer id, used by the stack registry. */
-  drawerId: string;
-  /** Ref to the dialog container, populated by <Content>. */
-  contentRef: RefObject<HTMLDivElement | null>;
-  /** Stable id for the heading registered by <Header>. */
-  headingId: string | null;
-  setHeadingId: (id: string | null) => void;
-  side: DrawerSide;
-  size: DrawerSize;
-  overlay: DrawerOverlayVariant;
-  stackMode: DrawerStackMode;
-  disableEscapeClose: boolean;
-  dismissOnOverlayClick: boolean;
-  dragToClose: boolean;
-  initialFocusRef: RefObject<HTMLElement | null> | undefined;
-  ariaLabel: string | undefined;
-  ariaDescribedBy: string | undefined;
-  depth: number;
-  isTop: boolean;
-  topMode: DrawerStackMode | null;
-}
-
-export const DrawerContext = createContext<DrawerContextValue | null>(null);
-
-export function useDrawerContext(componentName: string): DrawerContextValue {
-  const ctx = useContext(DrawerContext);
-  if (!ctx) {
-    throw new Error(`<Drawer.${componentName}> must be used inside <Drawer>.`);
-  }
-  return ctx;
-}