@eocrm/design-system 0.6.24 → 0.8.0

package/src/components/Alert/Alert.tokens.scss

@@ -1,60 +0,0 @@
-// Alert.tokens.scss — Component-scoped tokens for <Alert>. Per-tone bg/fg/icon/border-color pairs for info/success/warning/danger, plus shared shape and typography defaults. Each token defaults to the primitive the SCSS used before this migration.
-:root {
-  // Shared shape + typography
-  --alert-bg: var(--color-bg);
-  --alert-fg: var(--color-fg);
-  --alert-border-color: var(--color-fg-muted);
-  --alert-border-width: var(--border-width-strong);
-  --alert-radius: var(--radius-md);
-  --alert-padding-y: var(--space-3);
-  --alert-padding-x: var(--space-4);
-  --alert-gap: var(--space-3);
-  --alert-icon: var(--color-fg-muted);
-
-  // Title
-  --alert-title-fg: var(--color-fg);
-  --alert-title-font-size: var(--font-size-md);
-  --alert-title-font-weight: var(--font-weight-medium);
-
-  // Icon box height = the title's line box (font-size × 1.4 line-height), so the
-  // icon centers with the first text line instead of top-aligning above it.
-  --alert-icon-row-height: calc(var(--alert-title-font-size) * 1.4);
-
-  // Description
-  --alert-description-fg: var(--color-fg-muted);
-  --alert-description-font-size: var(--font-size-sm);
-
-  // Internal spacing (title-to-description, body-to-actions)
-  --alert-title-description-gap: var(--space-1);
-  --alert-actions-gap: var(--space-2);
-
-  // Per-tone surfaces (background + border + icon)
-  --alert-bg-info: var(--color-info-bg-subtle);
-  --alert-fg-info: var(--color-fg);
-  --alert-icon-info: var(--color-info);
-  --alert-border-color-info: var(--color-info);
-
-  --alert-bg-success: var(--color-success-bg-subtle);
-  --alert-fg-success: var(--color-fg);
-  --alert-icon-success: var(--color-success);
-  --alert-border-color-success: var(--color-success);
-
-  --alert-bg-warning: var(--color-warning-bg-subtle);
-  --alert-fg-warning: var(--color-fg);
-
-  // warning uses --color-warning-strong, not --color-warning, which measures
-  // @contrast --color-warning on --color-bg = 2.14:1 light
-  // @contrast --color-warning-strong on --color-bg = 5.95:1 light
-  // @contrast --color-warning on --color-warning-bg-subtle = 2.01:1 light
-  // @contrast --color-warning-strong on --color-warning-bg-subtle = 5.61:1 light
-  // 2.01:1 on the light tint (and 2.14:1 as an icon or border on --color-bg), below WCAG AA
-  // for text and below 1.4.11's 3:1 for a graphical object. The strong variant
-  // clears both. Dark is unaffected — the two resolve to the same value there.
-  --alert-icon-warning: var(--color-warning-strong);
-  --alert-border-color-warning: var(--color-warning-strong);
-
-  --alert-bg-danger: var(--color-danger-bg-subtle);
-  --alert-fg-danger: var(--color-fg);
-  --alert-icon-danger: var(--color-danger);
-  --alert-border-color-danger: var(--color-danger);
-}

package/src/components/Alert/Alert.tsx

@@ -1,136 +0,0 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
-import { AlertTriangle, CheckCircle2, Info, X, XCircle } from 'lucide-react';
-import clsx from 'clsx';
-import { Button } from '../Button';
-import { useTranslation } from '../../i18n/useTranslation';
-import styles from './Alert.module.scss';
-
-/**
- * Tone — drives icon, accent stripe color, tinted background, and ARIA role.
- *
- * - `'info'` — blue accent. Neutral updates ("Synced 5 minutes ago").
- * - `'success'` — green accent. Confirmations ("Changes saved").
- * - `'warning'` — dark amber accent. Non-blocking heads-up ("Storage at 85%").
- * - `'error'` — red accent. Failures. ALSO sets `role="alert"` (assertive); the
- *   other tones use `role="status"` (polite). With `live={false}` every tone
- *   is a static `role="note"` instead.
- */
-export type AlertTone = 'info' | 'success' | 'warning' | 'error';
-
-export interface AlertProps extends Omit<HTMLAttributes<HTMLElement>, 'role' | 'title'> {
-  /** Tone. Defaults to `'info'`. See `AlertTone` for full descriptions. */
-  tone?: AlertTone;
-
-  /**
-   * Optional bold heading. Renders above the description. ReactNode so you
-   * can embed inline emphasis (`<>Update <strong>1.2.3</strong> available</>`).
-   *
-   * The native HTML `title` attribute (tooltip-on-hover) is collapsed by this
-   * prop. Use `aria-label` if you need that.
-   */
-  title?: ReactNode;
-
-  /** Description body. Rendered below the title in muted color. */
-  children?: ReactNode;
-
-  /**
-   * Override the tone's default icon. Pass any ReactNode (typically a
-   * lucide-react icon). Pass `null` to hide the icon entirely.
-   *
-   * Defaults: `info` → `Info`, `success` → `CheckCircle2`,
-   * `warning` → `AlertTriangle`, `error` → `XCircle`.
-   */
-  icon?: ReactNode | null;
-
-  /**
-   * Optional action row rendered below the description. Typically a single
-   * Button or a Cluster of two ("Retry", "Dismiss"). The component doesn't
-   * manage the action row's layout — pass a pre-laid-out node.
-   */
-  actions?: ReactNode;
-
-  /**
-   * Whether the Alert is a live region. Defaults to `true`: `role="status"`
-   * (polite), or `role="alert"` (assertive) for `tone="error"` — right for a
-   * message that APPEARS in response to something (a save failed, an update
-   * arrived).
-   *
-   * Pass `false` for a callout that is simply part of the page when it opens —
-   * a "Needs action" note in each card of a list, a standing warning in a
-   * form. It renders `role="note"` with the same visuals and no live
-   * semantics, so screen readers read it in place instead of announcing it.
-   * N live Alerts mounting together can queue N announcements (#547).
-   *
-   * The tone is shown by the icon's shape and the colour only; it is not
-   * exposed to assistive tech in either mode (the icon is decorative). With
-   * `live={false}`, `tone="error"` also loses the "alert" role that browse-mode
-   * readers speak. So put the urgency in `title` ("Needs action").
-   *
-   * Decide it at mount: flipping `false` → `true` on a mounted Alert turns
-   * content that is already there into a live region, which announces nothing.
-   * @default true
-   */
-  live?: boolean;
-
-  /**
-   * Called when the user clicks the close (×) button. When set, the close
-   * button renders; when omitted, no close button. Alert is **controlled** —
-   * the component does NOT manage internal hidden state. Hide via
-   * conditional render in the consumer:
-   *
-   * ```tsx
-   * const [show, setShow] = useState(true);
-   * {show && <Alert tone="success" onDismiss={() => setShow(false)}>Saved</Alert>}
-   * ```
-   */
-  onDismiss?: () => void;
-}
-
-const DEFAULT_ICONS: Record<AlertTone, ReactNode> = {
-  info: <Info size={16} aria-hidden="true" />,
-  success: <CheckCircle2 size={16} aria-hidden="true" />,
-  warning: <AlertTriangle size={16} aria-hidden="true" />,
-  error: <XCircle size={16} aria-hidden="true" />,
-};
-
-/**
- * Persistent in-flow notification.
- * @see docs/components/Alert.md
- */
-export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
-  { tone = 'info', title, children, icon, actions, live = true, onDismiss, className, ...props },
-  ref,
-) {
-  const t = useTranslation();
-  const role = !live ? 'note' : tone === 'error' ? 'alert' : 'status';
-  const renderedIcon = icon === null ? null : (icon ?? DEFAULT_ICONS[tone]);
-
-  return (
-    <div
-      ref={ref}
-      {...props}
-      // {...props} first so role / data-tone (the ARIA contract) win.
-      role={role}
-      data-tone={tone}
-      className={clsx(styles.alert, className)}
-    >
-      {renderedIcon && <div className={styles.icon}>{renderedIcon}</div>}
-      <div className={styles.body}>
-        {title && <strong className={styles.title}>{title}</strong>}
-        {children && <div className={styles.description}>{children}</div>}
-        {actions && <div className={styles.actions}>{actions}</div>}
-      </div>
-      {onDismiss && (
-        <Button
-          variant="ghost"
-          size="xs"
-          iconOnly
-          aria-label={t('alert.dismiss')}
-          onClick={onDismiss}
-        >
-          <X size={14} aria-hidden="true" />
-        </Button>
-      )}
-    </div>
-  );
-});

package/src/components/Alert/index.ts

@@ -1,2 +0,0 @@
-export { Alert } from './Alert';
-export type { AlertProps, AlertTone } from './Alert';

package/src/components/AppLayout/AppLayout.module.scss

@@ -1,130 +0,0 @@
-// AppLayout is a layout-owning primitive — the documented exception to the
-// "no layout properties on components" rule (like Page / Screen / Rail). Owning
-// the viewport-filling shell is its whole job. The topBar / sidebar slots bring
-// their own surfaces; the main region's only own-styling is its content gutter
-// (--app-layout-content-padding) + subtle canvas (--app-layout-content-background)
-// — the canonical shell look, so a DS-only consumer needs no raw CSS. Matches the
-// CRM shell topology
-// (see the playground AppShell): a full-height sidebar down the left, the top bar
-// over the content column, and the main content below it. (stylelint's
-// property-disallowed-list blocks flex-grow / flex-basis but not the `flex`
-// shorthand, min-height, or min-width, so no disable is needed here.)
-@use './AppLayout.tokens';
-
-// Column: optional full-window banner above the [sidebar | column] row.
-.root {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-
-  // Own stacking context so a nested AppLayout's --z-app-chrome topBar can't
-  // tie with (and win tree-order over) an ancestor AppLayout's topBar —
-  // nesting is sanctioned (demos mount several inside the app's own shell;
-  // see the component JSDoc). `isolation` creates a stacking context WITHOUT
-  // creating a containing block, so it doesn't affect portaled overlays
-  // (Modal/Drawer/Popover — those escape to document.body regardless) or any
-  // in-content `position: fixed` element.
-  isolation: isolate;
-}
-
-.banner,
-.contextBanner {
-  flex: none;
-}
-
-// The original shell row. flex: 1 fills the root's min-height (and a
-// consumer's fixed `height: 100vh` override); min-height: 0 lets that
-// fixed-height mode shrink the row so Rail / main manage their own overflow.
-.row {
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-
-  // Explicit (it's the default) — the full-height sidebar depends on the row
-  // stretching its items to the row's height; don't change this to center/start.
-  align-items: stretch;
-  min-height: 0;
-}
-
-// Full-height sidebar down the left (stretches to the row height). Sets its own
-// width.
-.sidebar {
-  flex: none;
-}
-
-// Viewport-pinned sidebar (sidebarPinned): the sidebar spans exactly the
-// screen, not the row/page. sticky (not fixed) so it keeps its flex-row slot
-// and width; a DEFINITE 100dvh height gives a Rail's `height: 100%` something
-// to resolve against, which is what lets its footer pin to the viewport
-// bottom (the Rail's own scroll body does the pinning, not a spacer).
-// dvh tracks mobile dynamic toolbars;
-// the vh line is the older-engine fallback. overflow-y: auto scrolls an
-// over-tall rail inside the pinned box instead of growing the page.
-.sidebarPinned {
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  height: 100dvh;
-  overflow-y: auto;
-}
-
-// The top bar + content column to the right of the sidebar. min-width:0 lets the
-// column (and wide content like tables) shrink instead of pushing the sidebar.
-.body {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-width: 0;
-}
-
-// Top bar over the content column; natural height. Also sticky (redundant
-// with the <TopBar> primitive's own `position: sticky; top: 0`, which alone
-// isn't enough): a sticky element's range is capped by its containing
-// block's box, and this wrapper's containing block is itself — sized to the
-// bar's own content height by `flex: none`. Without its own sticky here, the
-// wrapper (and the bar riding inside it) unsticks and scrolls away the
-// instant the page scrolls past the bar's own height. Stickying the wrapper
-// against `.body` (which spans the full scrollable column) gives it room to
-// stay pinned for the page's whole height. z-index keeps it painting over
-// scrolled-under content — `--z-app-chrome` sits above unpositioned page
-// content but below every overlay tier (dropdown/popover/modal/toast/
-// tooltip), so it never fights a real overlay for stacking order.
-.topBar {
-  flex: none;
-  position: sticky;
-  top: 0;
-  z-index: var(--z-app-chrome);
-}
-
-// Main content fills the rest of the column. Carries the canonical shell content
-// gutter by default (--app-layout-content-padding = --space-6) so a DS-only
-// consumer gets padded routed content with no prop and no raw CSS; override the
-// token to `0` for a full-bleed main region.
-.main {
-  flex: 1;
-  min-width: 0;
-  padding: var(--app-layout-content-padding);
-
-  // Subtle content canvas so page Cards lift off it (default
-  // --color-bg-subtle; override the token to `transparent` for a flat area).
-  background: var(--app-layout-content-background);
-}
-
-// Overlay sidebar (sidebarOverlayBelow): the Drawer panel is 320px
-// (--size-drawer-sm, the sanctioned nav-drawer width) but a <Rail> inside sets
-// its own 240px width and would leave a dead strip. Rebinding the rail's own
-// width token — its documented override surface — makes the rail fill the
-// panel instead. Scoped to this class so it can't leak to an in-flow rail.
-.overlaySidebar {
-  --rail-width-expanded: 100%;
-  --rail-width-collapsed: 100%;
-}
-
-// The Drawer header consumes part of the fixed-height panel. Give the sidebar
-// the remaining block space and allow it to shrink below its automatic
-// min-content size, so a 100%-height Rail keeps its footer inside the panel on
-// short touch viewports.
-.overlaySidebarContent {
-  flex: 1 1 auto;
-  min-height: 0;
-}

package/src/components/AppLayout/AppLayout.tokens.scss

@@ -1,27 +0,0 @@
-// AppLayout.tokens.scss — Component-scoped tokens for <AppLayout>.
-@use '../_internal/collapse' as bp;
-
-:root {
-  // Padding of the main content region — the canonical shell content gutter, so
-  // a DS-only consumer gets the shell padding with no prop and no raw CSS.
-  // Defaults to --space-6 (matches the playground AppShell's .content gutter).
-  // Override to `0` (or another token) in your scope for a full-bleed main
-  // region — no prop needed.
-  --app-layout-content-padding: var(--space-6);
-
-  // Background of the main content region — a subtle canvas so page Cards lift
-  // off it (matches every playground mockup). Defaults to --color-bg-subtle.
-  // Override to `transparent` in your scope for a flat content area — no prop.
-  --app-layout-content-background: var(--color-bg-subtle);
-}
-
-// Narrow viewports: --space-6 (24px) each side costs a 380px phone 48px of its
-// width. Step the gutter down so content keeps its room. This only moves the
-// DEFAULT: a consumer override in a scope BELOW :root still wins (e.g. a class
-// on their own root element), but an override written as another :root rule is
-// the same (0,1,0) specificity as this one — whichever rule loads last wins.
-@media (max-width: bp.$collapse-md) {
-  :root {
-    --app-layout-content-padding: var(--space-4);
-  }
-}

package/src/components/AppLayout/AppLayout.tsx

@@ -1,211 +0,0 @@
-import { forwardRef, useEffect, useRef, type HTMLAttributes, type ReactNode } from 'react';
-import clsx from 'clsx';
-import { useTranslation } from '../../i18n';
-import { useBelowBreakpoint } from '../../hooks/useBelowBreakpoint';
-import type { CollapseBreakpoint } from '../_internal/collapse';
-import { useControllableState } from '../_internal/useControllableState';
-import { Drawer } from '../Drawer';
-import styles from './AppLayout.module.scss';
-
-export interface AppLayoutProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * System-wide banner slot — full WINDOW width, above the sidebar + content
-   * row. For messages that apply wherever the user is: maintenance, billing
-   * overdue, impersonation. Pass a `<Banner>` (or several, most severe first).
-   * Not sticky: it scrolls away with the page while the `topBar` stays pinned.
-   * Omit (or pass `null` / `false`) for no wrapper.
-   *
-   * With `sidebarPinned`, the pinned sidebar starts below this banner, so at
-   * scroll position 0 its bottom (a `Rail.Footer`) sits up to one banner height
-   * below the fold until the page scrolls past the banner. This is accepted —
-   * banners are temporary.
-   */
-  banner?: ReactNode;
-  /**
-   * Context banner slot — inside the content column, between the `topBar` and
-   * the padded content region, full-bleed within the column. For messages
-   * scoped to a module or route ("Email sending suspended" on the Email
-   * pages); the app decides which routes render it. Pass a `<Banner>`. Not
-   * sticky. Page-level messages belong in the content as `<Alert>` instead.
-   */
-  contextBanner?: ReactNode;
-  /**
-   * Top bar slot — sits above the main content, spanning the content column to
-   * the right of the sidebar (not the full window width). Omit for no top bar.
-   */
-  topBar?: ReactNode;
-  /**
-   * Sidebar slot — runs the full height down the left, alongside both the top
-   * bar and the content. Sets its own width (intrinsic). Omit for no sidebar.
-   */
-  sidebar?: ReactNode;
-  /**
-   * Pin the sidebar to the viewport: `position: sticky; top: 0; height: 100dvh`
-   * with internal overflow scrolling. On pages taller than the viewport the
-   * sidebar (and a `Rail` inside it — including its `Rail.Footer` /
-   * CollapseToggle) spans exactly the SCREEN, keeping the footer glued to the
-   * viewport bottom instead of the page bottom. Default `false` (sidebar
-   * stretches to the full row/page height — the original behavior).
-   *
-   * Prefer this over wrapping the sidebar slot in `Sticky` — the rail pins its
-   * footer by filling its own `height: 100%` box, which needs a DEFINITE
-   * height to resolve against. `Sticky` sets `align-self: start`, which drops
-   * the row stretch that made it definite, so the footer stops pinning.
-   *
-   * `100dvh` is always relative to the real browser viewport, never to a
-   * nested scroll container — so this only pins correctly when AppLayout is
-   * the actual outermost, page-scroll shell (its documented top-level use).
-   * Nest it inside another scrollable region and the sidebar will size to
-   * the whole window, not that region, and overflow it.
-   */
-  sidebarPinned?: boolean;
-  /**
-   * Move the sidebar out of the flow and into a left-anchored `<Drawer>` while
-   * the **viewport** is at or below a width threshold: `'sm'` 480px / `'md'`
-   * 640px / `'lg'` 768px. Omit for no responsive behavior (the default) — the
-   * sidebar always renders in the flow.
-   *
-   * Below the threshold the content column claims the full viewport width, and
-   * the sidebar is reachable only by opening the drawer. Render your own
-   * trigger (a hamburger in the `topBar`) and drive it with `sidebarOpen` +
-   * `onSidebarOpenChange` — AppLayout deliberately renders no trigger of its
-   * own, since where it belongs in the bar is the consumer's call, which means
-   * both props are effectively required together (see `sidebarOpen`'s doc).
-   * Use the exported `useBelowBreakpoint` hook to show that trigger only while
-   * the overlay mode is active.
-   *
-   * `sidebarPinned` is ignored below the threshold: the drawer owns the
-   * sidebar's box there, and a `sticky; height: 100dvh` wrapper inside it would
-   * size the rail to the window instead of the drawer.
-   *
-   * Measures the viewport (`matchMedia`), not a container — the sidebar's
-   * presence in the row is exactly what the threshold changes, so a container
-   * query would be circular. Same scale and same basis as `<Rail collapseBelow>`.
-   *
-   * The `sidebar` node moves between the in-flow slot and the `Drawer`,
-   * remounting it, so a `Rail`'s internal state (expanded `Rail.Group`s, scroll
-   * position) resets each time, by design. A `<Rail>` in the drawer scrolls its
-   * own body while its footer stays visible; a custom non-`Rail` sidebar needs
-   * its own height-filling scroll container, especially on short viewports
-   * (phone landscape, ~380px).
-   */
-  sidebarOverlayBelow?: CollapseBreakpoint;
-  /**
-   * Open state of the overlay sidebar. Technically optional, but effectively
-   * required together with `onSidebarOpenChange` whenever `sidebarOverlayBelow`
-   * is set — AppLayout renders no trigger of its own (see `sidebarOverlayBelow`),
-   * so with both omitted nothing can ever open the drawer; Esc/backdrop close it,
-   * but there's no way in. Has no effect unless `sidebarOverlayBelow` is set and
-   * the viewport is below it.
-   */
-  sidebarOpen?: boolean;
-  /** Fires whenever the overlay sidebar opens or closes — close button, Esc, backdrop click, swipe, or programmatic. Pair with `sidebarOpen` — see its doc. */
-  onSidebarOpenChange?: (open: boolean) => void;
-  /**
-   * Render the content region as a `<main>` landmark instead of a plain `<div>`.
-   * Pass it on the outermost app shell so the page gets its single `main`
-   * landmark without a wrapper element. Leave it off (default) for nested
-   * use — demos, documentation previews — so the page never gets two `main`s.
-   */
-  mainLandmark?: boolean;
-  /** Main content slot — fills the remaining space below the top bar. */
-  children: ReactNode;
-}
-
-/**
- * Viewport-filling application shell layout: full-height `sidebar`, optional `topBar` over the content column, main `children` below.
- * @see docs/components/AppLayout.md
- */
-export const AppLayout = forwardRef<HTMLDivElement, AppLayoutProps>(function AppLayout(
-  {
-    banner,
-    contextBanner,
-    topBar,
-    sidebar,
-    sidebarPinned,
-    sidebarOverlayBelow,
-    mainLandmark,
-    sidebarOpen,
-    onSidebarOpenChange,
-    children,
-    className,
-    ...props
-  },
-  ref,
-) {
-  const t = useTranslation();
-  const Main = mainLandmark ? 'main' : 'div';
-  const overlay = useBelowBreakpoint(sidebarOverlayBelow) && sidebar != null;
-  // Whether the Drawer should exist AT ALL, independent of the live viewport
-  // threshold. Kept mounted across the crossing (see below) rather than
-  // gated on `overlay` — that's what lets a still-mounted DrawerRoot receive
-  // a real open:true→false PROP transition on the up-crossing instead of
-  // being yanked from the tree mid-open.
-  const overlayConfigured = sidebarOverlayBelow != null && sidebar != null;
-
-  // Uncontrolled fallback so Esc / backdrop still close the drawer when the
-  // consumer passes `sidebarOverlayBelow` without wiring open state.
-  const [open, setOpen] = useControllableState<boolean>({
-    value: sidebarOpen,
-    defaultValue: false,
-    onChange: onSidebarOpenChange,
-  });
-
-  // Crossing back above the threshold must CLOSE the drawer via a real prop
-  // transition, not unmount it out from under an open dialog — DrawerRoot's
-  // own focus-restore effect only fires on open:true→false while mounted, so
-  // Drawer stays mounted (above) and gets `open={overlay && open}`, which
-  // flips synchronously in the same render as the crossing. That alone still
-  // leaves `open` state remembering `true`, so re-entering overlay mode later
-  // would reopen it unprompted — this effect resets the state on the
-  // overlay:true→false EDGE only (a ref, not `!overlay`), so it never fights
-  // a controlled consumer legitimately setting `sidebarOpen` while already
-  // above the threshold.
-  const wasOverlay = useRef(overlay);
-  useEffect(() => {
-    // `&& open` — otherwise every up-crossing fires onSidebarOpenChange(false)
-    // even when the drawer was never opened (setOpen is a no-op value-wise,
-    // but the callback still fires on a resize the consumer didn't ask about).
-    if (wasOverlay.current && !overlay && open) setOpen(false);
-    wasOverlay.current = overlay;
-  }, [overlay, open, setOpen]);
-
-  // Pattern A — props last: AppLayout is a consumer-overridable layout
-  // primitive (like Stack/Card), so {...props} wins over our defaults.
-  // Topology: banner above a row of [full-height sidebar | column of (topBar,
-  // contextBanner, main)] — so
-  // the sidebar spans the whole height and the top bar sits only over the
-  // content column, matching the CRM shell (see playground AppShell).
-  return (
-    <div ref={ref} className={clsx(styles.root, className)} {...props}>
-      {banner != null && banner !== false && <div className={styles.banner}>{banner}</div>}
-      <div className={styles.row}>
-        {sidebar != null && !overlay && (
-          <div className={clsx(styles.sidebar, sidebarPinned && styles.sidebarPinned)}>
-            {sidebar}
-          </div>
-        )}
-        <div className={styles.body}>
-          {topBar != null && <div className={styles.topBar}>{topBar}</div>}
-          {contextBanner != null && contextBanner !== false && (
-            <div className={styles.contextBanner}>{contextBanner}</div>
-          )}
-          <Main className={styles.main}>{children}</Main>
-        </div>
-      </div>
-      {overlayConfigured && (
-        <Drawer
-          open={overlay && open}
-          onOpenChange={setOpen}
-          side="left"
-          size="sm"
-          className={styles.overlaySidebar}
-          aria-label={t('appLayout.sidebar')}
-        >
-          <Drawer.Header>{t('appLayout.sidebar')}</Drawer.Header>
-          <div className={styles.overlaySidebarContent}>{sidebar}</div>
-        </Drawer>
-      )}
-    </div>
-  );
-});

package/src/components/AppLayout/index.ts

@@ -1,2 +0,0 @@
-export { AppLayout } from './AppLayout';
-export type { AppLayoutProps } from './AppLayout';