@eocrm/design-system 0.6.24 → 0.8.0

package/src/components/Pagination/Pagination.tokens.scss

@@ -1,54 +0,0 @@
-// Pagination.tokens.scss — Component-scoped tokens for <Pagination>. Covers
-// the cluster gap, the per-button chrome (bg / border / fg), the per-state
-// (hover / active / disabled / current) overrides, and the per-size height +
-// padding. Current-page button uses --pagination-current-* so an override can
-// retint the "selected" state without touching the accent palette globally.
-:root {
-  // Outer cluster
-  --pagination-gap: var(--space-1);
-
-  // Button base
-  --pagination-button-gap: var(--space-1);
-  --pagination-button-border-color: var(--color-border);
-  --pagination-button-radius: var(--radius-md);
-  --pagination-button-bg: var(--color-bg);
-  --pagination-button-fg: var(--color-fg);
-  --pagination-button-font-weight: var(--font-weight-medium);
-  --pagination-button-bg-hover: var(--color-bg-hover);
-  --pagination-button-bg-active: var(--color-bg-sunken);
-  --pagination-button-fg-disabled: var(--color-fg-disabled);
-
-  // Page button (square)
-  --pagination-page-button-min-width-sm: var(--size-sm);
-  --pagination-page-button-min-width-md: var(--size-md);
-  --pagination-page-button-min-width-lg: var(--size-lg);
-  --pagination-page-button-height-sm: var(--size-sm);
-  --pagination-page-button-height-md: var(--size-md);
-  --pagination-page-button-height-lg: var(--size-lg);
-
-  // Nav button (prev / next)
-  --pagination-nav-button-height-sm: var(--size-sm);
-  --pagination-nav-button-height-md: var(--size-md);
-  --pagination-nav-button-height-lg: var(--size-lg);
-  --pagination-nav-button-padding-x-md: var(--space-2);
-  --pagination-nav-button-padding-x-lg: var(--space-3);
-
-  // Current-page button (selected look, uses accent)
-  --pagination-current-bg: var(--color-accent);
-  --pagination-current-border-color: var(--color-accent);
-  --pagination-current-fg: var(--color-accent-fg);
-
-  // Ellipsis
-  --pagination-ellipsis-min-width-sm: var(--size-sm);
-  --pagination-ellipsis-min-width-md: var(--size-md);
-  --pagination-ellipsis-min-width-lg: var(--size-lg);
-  --pagination-ellipsis-height-sm: var(--size-sm);
-  --pagination-ellipsis-height-md: var(--size-md);
-  --pagination-ellipsis-height-lg: var(--size-lg);
-  --pagination-ellipsis-fg: var(--color-fg-muted);
-
-  // Per-size typography
-  --pagination-font-size-sm: var(--font-size-sm);
-  --pagination-font-size-md: var(--font-size-md);
-  --pagination-font-size-lg: var(--font-size-md);
-}

package/src/components/Pagination/Pagination.tsx

@@ -1,165 +0,0 @@
-import { forwardRef, type HTMLAttributes } from 'react';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import clsx from 'clsx';
-import { useTranslation } from '../../i18n/useTranslation';
-import { paginationRange } from './paginationRange';
-import styles from './Pagination.module.scss';
-
-/** Visual size. Tracks the Button / Input scale. */
-export type PaginationSize = 'sm' | 'md' | 'lg';
-
-export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
-  /**
-   * Current 1-indexed page. Values outside `[1, pageCount]` clamp at
-   * render time (defensive — same precedent as `clampHeading` in
-   * `<EmptyState>`).
-   */
-  currentPage: number;
-
-  /**
-   * Total number of pages. Values `< 1` clamp to `1`. The component still
-   * renders when `pageCount === 1` (single enabled current-page button +
-   * both prev/next disabled) so consumers don't have to conditionally hide
-   * it. The `disabled` prop still disables all three controls.
-   */
-  pageCount: number;
-
-  /**
-   * Called with the new 1-indexed page when the user clicks prev, next,
-   * or a page number. Not fired when the user clicks the current page.
-   */
-  onPageChange: (page: number) => void;
-
-  /**
-   * How many page-number buttons to show on each side of `currentPage`.
-   * Default `1`. Set to `0` for the tightest possible display (sidebar /
-   * narrow column) or `2` for wider footers. Boundary is fixed at 1 —
-   * first and last pages are always shown.
-   */
-  siblingCount?: number;
-
-  /**
-   * Visual size — `'sm'` (24px), `'md'` (32px, default), `'lg'` (40px).
-   * Tracks the Button / Input scale so Pagination sits cleanly inside
-   * a `<Cluster>` next to those components.
-   */
-  size?: PaginationSize;
-
-  /**
-   * When `true`, all buttons (prev / next / numbers) are disabled. Use
-   * during page transitions (loading, saving) to prevent double-clicks.
-   */
-  disabled?: boolean;
-
-  /**
-   * Accessible name for the `<nav>` wrapper. Defaults to `'Pagination'` when
-   * omitted OR empty — an empty string is not an explicit name, so it takes
-   * the default too. Override when multiple paginations appear on the same page (e.g.,
-   * `'Top pagination'` / `'Bottom pagination'`).
-   */
-  'aria-label'?: string;
-}
-
-function clampPageCount(pageCount: number): number {
-  if (!Number.isFinite(pageCount) || pageCount < 1) return 1;
-  return Math.floor(pageCount);
-}
-
-function clampCurrent(currentPage: number, pageCount: number): number {
-  if (!Number.isFinite(currentPage) || currentPage < 1) return 1;
-  if (currentPage > pageCount) return pageCount;
-  return Math.floor(currentPage);
-}
-
-function clampSiblings(siblingCount: number): number {
-  if (!Number.isFinite(siblingCount) || siblingCount < 0) return 0;
-  return Math.floor(siblingCount);
-}
-
-/**
- * Controlled numbered pagination with sibling windowing (`◀ Previous 1 2 … 5 6 7 … 99 100 Next ▶`).
- * @see docs/components/Pagination.md
- */
-export const Pagination = forwardRef<HTMLElement, PaginationProps>(function Pagination(
-  {
-    currentPage,
-    pageCount,
-    onPageChange,
-    siblingCount = 1,
-    size = 'md',
-    disabled = false,
-    className,
-    'aria-label': ariaLabel,
-    ...props
-  },
-  ref,
-) {
-  const t = useTranslation();
-  const clampedCount = clampPageCount(pageCount);
-  const clampedCurrent = clampCurrent(currentPage, clampedCount);
-  const items = paginationRange(clampedCurrent, clampedCount, clampSiblings(siblingCount));
-
-  // {...props} last so consumer overrides win (Pattern A). className is
-  // destructured above and re-injected into clsx() so consumer-supplied
-  // class names compose, rather than replacing the component's.
-  return (
-    <nav
-      ref={ref}
-      aria-label={ariaLabel || t('pagination.ariaLabel')}
-      className={clsx(styles.pagination, styles[`size-${size}`], className)}
-      {...props}
-    >
-      <button
-        type="button"
-        className={clsx(styles.button, styles.navButton)}
-        onClick={() => onPageChange(clampedCurrent - 1)}
-        disabled={disabled || clampedCurrent === 1}
-        aria-label={t('pagination.previousAriaLabel')}
-      >
-        <ChevronLeft size={16} aria-hidden />
-        <span>{t('pagination.previous')}</span>
-      </button>
-
-      {items.map((item) => {
-        if (item === 'ellipsis-start' || item === 'ellipsis-end') {
-          return (
-            <span key={item} className={styles.ellipsis} aria-hidden>
-              …
-            </span>
-          );
-        }
-        const isCurrent = item === clampedCurrent;
-        return (
-          <button
-            key={item}
-            type="button"
-            className={clsx(styles.button, styles.pageButton, isCurrent && styles.current)}
-            onClick={() => {
-              if (!isCurrent) onPageChange(item);
-            }}
-            disabled={disabled}
-            aria-current={isCurrent ? 'page' : undefined}
-            aria-label={
-              isCurrent
-                ? t('pagination.currentPageAriaLabel', { page: item })
-                : t('pagination.pageAriaLabel', { page: item })
-            }
-          >
-            {item}
-          </button>
-        );
-      })}
-
-      <button
-        type="button"
-        className={clsx(styles.button, styles.navButton)}
-        onClick={() => onPageChange(clampedCurrent + 1)}
-        disabled={disabled || clampedCurrent === clampedCount}
-        aria-label={t('pagination.nextAriaLabel')}
-      >
-        <span>{t('pagination.next')}</span>
-        <ChevronRight size={16} aria-hidden />
-      </button>
-    </nav>
-  );
-});

package/src/components/Pagination/index.ts

@@ -1,4 +0,0 @@
-export { Pagination } from './Pagination';
-export type { PaginationProps, PaginationSize } from './Pagination';
-export { paginationRange } from './paginationRange';
-export type { PaginationItem } from './paginationRange';

package/src/components/Pagination/paginationRange.ts

@@ -1,72 +0,0 @@
-/**
- * Discrete item in a pagination row — either a page number or one of the
- * two ellipsis markers. The two ellipsis tokens differ so React can give
- * each a stable key when both are present.
- */
-export type PaginationItem = number | 'ellipsis-start' | 'ellipsis-end';
-
-function range(start: number, end: number): number[] {
-  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
-}
-
-/**
- * Compute the items to render in a numbered pagination row.
- *
- * Mirrors MUI's `usePagination` algorithm with `boundaryCount = 1` (the
- * first and last pages are always shown). Total slot count when an
- * ellipsis is rendered: `siblingCount * 2 + 5` — 2 boundaries + 1 current
- * + 2*siblings + 2 ellipses. For `siblingCount = 1`, that's 7 slots; the
- * row's width stays constant as the user clicks between pages.
- *
- * Special rules:
- * - When `pageCount <= totalSlots`, returns a contiguous `[1, 2, …, pageCount]`
- *   (no ellipsis needed).
- * - When the sibling window starts at exactly `boundary + 2`, the would-be
- *   ellipsis collapses to the single missing number (gap-of-1 rule) —
- *   showing the number is visually cleaner than showing "…" for one page.
- *
- * Assumes valid input: callers must clamp `currentPage` to `[1, pageCount]`
- * and ensure `pageCount >= 1` before invocation. The component layer
- * handles clamping; this pure function does not.
- */
-export function paginationRange(
-  currentPage: number,
-  pageCount: number,
-  siblingCount: number,
-): PaginationItem[] {
-  const boundaryCount = 1;
-  const totalSlots = siblingCount * 2 + boundaryCount * 2 + 3;
-
-  if (pageCount <= totalSlots) {
-    return range(1, pageCount);
-  }
-
-  const startPages = range(1, boundaryCount);
-  const endPages = range(pageCount - boundaryCount + 1, pageCount);
-
-  const siblingsStart = Math.max(
-    Math.min(currentPage - siblingCount, pageCount - boundaryCount - siblingCount * 2 - 1),
-    boundaryCount + 2,
-  );
-
-  const siblingsEnd = Math.min(
-    Math.max(currentPage + siblingCount, boundaryCount + siblingCount * 2 + 2),
-    endPages[0] - 2,
-  );
-
-  return [
-    ...startPages,
-    ...(siblingsStart > boundaryCount + 2
-      ? (['ellipsis-start'] as const)
-      : boundaryCount + 1 < pageCount - boundaryCount
-        ? [boundaryCount + 1]
-        : []),
-    ...range(siblingsStart, siblingsEnd),
-    ...(siblingsEnd < pageCount - boundaryCount - 1
-      ? (['ellipsis-end'] as const)
-      : pageCount - boundaryCount > boundaryCount
-        ? [pageCount - boundaryCount]
-        : []),
-    ...endPages,
-  ];
-}

package/src/components/PasswordInput/PasswordInput.module.scss

@@ -1,120 +0,0 @@
-@use '../../styles/mixins' as *;
-@use './PasswordInput.tokens';
-
-// Mirrors DatePicker / DateRangePicker wrapper shape — same focus-within
-// ring, same flex layout with trailing slot.
-.wrapper {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  gap: var(--password-input-gap);
-  padding: 0 var(--password-input-padding-x);
-  background: var(--password-input-bg);
-  border: var(--border-width) solid var(--password-input-border-color);
-  border-radius: var(--password-input-radius);
-  transition: border-color var(--transition-fast);
-
-  &:focus-within {
-    @include focus-ring(var(--password-input-ring-focus));
-
-    border-color: var(--password-input-border-color-focus);
-  }
-}
-
-.invalid {
-  border-color: var(--password-input-border-color-invalid);
-
-  &:focus-within {
-    @include focus-ring(var(--password-input-ring-invalid));
-
-    border-color: var(--password-input-border-color-invalid);
-  }
-}
-
-.disabled {
-  background: var(--password-input-bg-disabled);
-  color: var(--password-input-fg-disabled);
-  cursor: not-allowed;
-}
-
-// The text input fills available space.
-// Rule 4 note: `flex: 1` is internal layout — the public component IS this
-// .wrapper; the input is its child.
-.input {
-  flex: 1 1 auto;
-  min-width: 0;
-  padding: 0;
-  background: transparent;
-  border: none;
-  outline: none;
-  font-family: inherit;
-  color: var(--password-input-fg);
-
-  &::placeholder {
-    color: var(--password-input-placeholder-fg);
-  }
-
-  // Suppress browser-native reveal toggles (Edge / Chromium) so they
-  // don't stack with ours.
-  &::-ms-reveal,
-  &::-ms-clear {
-    display: none;
-  }
-
-  // Suppress autofill background (Chromium / Safari / password managers
-  // like 1Password / Bitwarden paint the input with a yellow / blue tint).
-  // The inset box-shadow trick paints OVER the autofill bg with our own
-  // --color-bg; the `transition: ... 5000s` delays the autofill color
-  // change to effectively never. -webkit-text-fill-color keeps the typed
-  // value rendered in our --color-fg instead of the autofill default.
-  // Applied to all autofill pseudo-states so hover / focus / active don't
-  // re-tint the field.
-  &:-webkit-autofill,
-  &:-webkit-autofill:hover,
-  &:-webkit-autofill:focus,
-  &:-webkit-autofill:active {
-    box-shadow: 0 0 0 100px var(--password-input-bg-autofill) inset;
-    -webkit-text-fill-color: var(--password-input-fg-autofill);
-    transition: background-color 5000s ease-in-out 0s;
-  }
-}
-
-// Warning slot icons — caps-lock + wrong-layout share styling.
-.warningIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--password-input-warning-icon-fg);
-}
-
-// Per-size — input height + font + button slot.
-.size-sm .input {
-  height: var(--password-input-height-sm);
-  font-size: var(--password-input-font-size-sm);
-}
-
-.size-md .input {
-  height: var(--password-input-height-md);
-  font-size: var(--password-input-font-size-md);
-}
-
-.size-lg .input {
-  height: var(--password-input-height-lg);
-  font-size: var(--password-input-font-size-lg);
-}
-
-// Visually-hidden recipe for the live-region spans.
-// stylelint-disable property-disallowed-list -- visually-hidden recipe; not a layout property on the public component box.
-.srOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
-// stylelint-enable property-disallowed-list

package/src/components/PasswordInput/PasswordInput.tokens.scss

@@ -1,44 +0,0 @@
-// PasswordInput.tokens.scss — component-scoped tokens for <PasswordInput>. Mirrors the wrapper shape of DatePicker/DateRangePicker; defaults preserve byte-identical visuals.
-:root {
-  // Wrapper
-  --password-input-gap: var(--space-1);
-  --password-input-padding-x: var(--space-2);
-  --password-input-bg: var(--color-bg);
-  --password-input-border-color: var(--color-border-strong);
-  --password-input-radius: var(--radius-md);
-
-  // Focus
-  --password-input-border-color-focus: var(--color-accent);
-  --password-input-ring-focus: var(--ring-accent);
-
-  // Invalid
-  --password-input-border-color-invalid: var(--color-danger);
-  --password-input-ring-invalid: var(--ring-danger);
-
-  // Disabled
-  --password-input-bg-disabled: var(--color-bg-subtle);
-  --password-input-fg-disabled: var(--color-fg-muted);
-
-  // Input text
-  --password-input-fg: var(--color-fg);
-  --password-input-placeholder-fg: var(--color-fg-muted);
-
-  // Autofill suppression — paints over Chromium/Safari/manager autofill tint
-  --password-input-bg-autofill: var(--color-bg);
-  --password-input-fg-autofill: var(--color-fg);
-
-  // Warning slot icons (caps-lock + wrong-layout)
-  // @contrast --color-warning on --color-bg = 2.14:1 light
-  // @contrast --color-warning-strong on --color-bg = 5.95:1 light
-  // warning uses --color-warning-strong; the bare --color-warning measures 2.14:1 here, below
-  // WCAG AA for text and below 1.4.11's 3:1 for a graphical object. See #481.
-  --password-input-warning-icon-fg: var(--color-warning-strong);
-
-  // Per-size — input height + font
-  --password-input-height-sm: var(--size-sm);
-  --password-input-height-md: var(--size-md);
-  --password-input-height-lg: var(--size-lg);
-  --password-input-font-size-sm: var(--font-size-sm);
-  --password-input-font-size-md: var(--font-size-md);
-  --password-input-font-size-lg: var(--font-size-lg);
-}

package/src/components/PasswordInput/PasswordInput.tsx

@@ -1,210 +0,0 @@
-import {
-  forwardRef,
-  useCallback,
-  useState,
-  type InputHTMLAttributes,
-  type KeyboardEvent,
-  type MouseEvent,
-} from 'react';
-import clsx from 'clsx';
-import { ArrowBigUpDash, Eye, EyeOff, Languages } from 'lucide-react';
-import { Button } from '../Button';
-import { Tooltip } from '../Tooltip';
-import { useTranslation } from '../../i18n/useTranslation';
-import styles from './PasswordInput.module.scss';
-
-/** Field height + type scale. Same scale as `<Input>`. */
-export type PasswordInputSize = 'sm' | 'md' | 'lg';
-
-const ICON_SIZE_FOR: Record<PasswordInputSize, number> = {
-  sm: 14,
-  md: 14,
-  lg: 16,
-};
-
-export interface PasswordInputProps extends Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'size' | 'type'
-> {
-  /** Field height + type scale. Same scale as `<Input>`. Defaults to `'md'`. */
-  size?: PasswordInputSize;
-  /** Toggles the error visual + sets `aria-invalid="true"`. */
-  invalid?: boolean;
-  /** Controlled revealed state. Pair with `onRevealChange`. */
-  revealed?: boolean;
-  /** Initial revealed state for uncontrolled use. Defaults to `false`. */
-  defaultRevealed?: boolean;
-  /** Called when the user clicks the eye toggle. Receives the next revealed state. */
-  onRevealChange?: (revealed: boolean) => void;
-  /**
-   * Whether to render the eye toggle button. Defaults to `true`. Set
-   * `revealable={false}` for compliance / kiosk screens where revealing
-   * is forbidden — the input then behaves like a plain locked-down
-   * `<input type='password'>`.
-   */
-  revealable?: boolean;
-  /**
-   * Opt-in caps-lock detection. When `true`, on every keypress the
-   * input reads `event.getModifierState('CapsLock')`; when active, a
-   * warning icon + polite `aria-live` announce it. Cleared on blur.
-   *
-   * Defaults to `false`. Opt in on screens where caps-lock matters
-   * (login, password creation, password confirmation).
-   */
-  capsLockWarning?: boolean;
-  /**
-   * Opt-in wrong-keyboard-layout detection. When `true`, detects
-   * keystrokes that produce non-ASCII single characters (e.g., Cyrillic
-   * `ф` from a Russian layout). Shows a warning icon + polite live
-   * region. Cleared on blur.
-   *
-   * Heuristic, not deterministic — any non-ASCII keystroke triggers.
-   * Only enable when the system expects Latin-only password input.
-   * Defaults to `false`.
-   */
-  wrongLayoutWarning?: boolean;
-}
-
-/**
- * Password text field with a trailing eye toggle and opt-in caps-lock / wrong-keyboard-layout warnings.
- * @see docs/components/PasswordInput.md
- */
-export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
-  function PasswordInput(
-    {
-      size = 'md',
-      invalid,
-      revealed,
-      defaultRevealed,
-      onRevealChange,
-      revealable = true,
-      capsLockWarning = false,
-      wrongLayoutWarning = false,
-      className,
-      disabled,
-      onKeyDown,
-      onBlur,
-      ...props
-    },
-    ref,
-  ) {
-    const t = useTranslation();
-    const iconSize = ICON_SIZE_FOR[size];
-
-    const isControlled = revealed !== undefined;
-    const [internalRevealed, setInternalRevealed] = useState(defaultRevealed ?? false);
-    const currentRevealed = isControlled ? revealed : internalRevealed;
-
-    const [capsOn, setCapsOn] = useState(false);
-    const [wrongLayout, setWrongLayout] = useState(false);
-
-    const handleToggle = useCallback(
-      (e: MouseEvent<HTMLButtonElement>) => {
-        e.preventDefault(); // avoid focus jump on click
-        const next = !currentRevealed;
-        if (!isControlled) setInternalRevealed(next);
-        onRevealChange?.(next);
-      },
-      [currentRevealed, isControlled, onRevealChange],
-    );
-
-    const handleKeyDown = useCallback(
-      (e: KeyboardEvent<HTMLInputElement>) => {
-        if (capsLockWarning) {
-          setCapsOn(e.getModifierState('CapsLock'));
-        }
-        if (wrongLayoutWarning) {
-          // Heuristic: any single non-ASCII printable character → wrong layout.
-          const isSingleChar = e.key.length === 1;
-          const isAscii = /^[\x20-\x7E]$/.test(e.key);
-          setWrongLayout(isSingleChar && !isAscii);
-        }
-        onKeyDown?.(e);
-      },
-      [capsLockWarning, wrongLayoutWarning, onKeyDown],
-    );
-
-    const handleBlur = useCallback(
-      (e: React.FocusEvent<HTMLInputElement>) => {
-        setCapsOn(false);
-        setWrongLayout(false);
-        onBlur?.(e);
-      },
-      [onBlur],
-    );
-
-    const ToggleIcon = currentRevealed ? EyeOff : Eye;
-
-    return (
-      <div
-        className={clsx(
-          styles.wrapper,
-          styles[`size-${size}`],
-          invalid && styles.invalid,
-          disabled && styles.disabled,
-          className,
-        )}
-      >
-        <input
-          {...props}
-          ref={ref}
-          type={currentRevealed ? 'text' : 'password'}
-          disabled={disabled}
-          aria-invalid={invalid || undefined}
-          onKeyDown={handleKeyDown}
-          onBlur={handleBlur}
-          className={styles.input}
-        />
-
-        {/* Warning icons. While active, each icon is wrapped in a Tooltip
-            that's force-`open` so sighted users see the warning text
-            float above without needing to hover. AT users still get the
-            announcement via the separate aria-live regions below — the
-            icons themselves are aria-hidden, so the tooltip's
-            aria-describedby is intentionally inert for screen readers
-            (no double-announcement). */}
-        {capsLockWarning && capsOn && (
-          <Tooltip content={t('passwordInput.capsLockOn')} open>
-            <span aria-hidden="true" className={styles.warningIcon}>
-              <ArrowBigUpDash size={iconSize} />
-            </span>
-          </Tooltip>
-        )}
-        {wrongLayoutWarning && wrongLayout && (
-          <Tooltip content={t('passwordInput.wrongLayoutOn')} open>
-            <span aria-hidden="true" className={styles.warningIcon}>
-              <Languages size={iconSize} />
-            </span>
-          </Tooltip>
-        )}
-
-        {revealable && (
-          <Button
-            variant="ghost"
-            size="xs"
-            iconOnly
-            aria-pressed={currentRevealed}
-            aria-label={currentRevealed ? t('passwordInput.hide') : t('passwordInput.show')}
-            onClick={handleToggle}
-            disabled={disabled}
-          >
-            <ToggleIcon size={iconSize} aria-hidden="true" />
-          </Button>
-        )}
-
-        {/* Polite live regions for AT. Render unconditionally so the
-            announce fires only when the textContent changes. */}
-        {capsLockWarning && (
-          <span role="status" aria-live="polite" className={styles.srOnly}>
-            {capsOn ? t('passwordInput.capsLockOn') : ''}
-          </span>
-        )}
-        {wrongLayoutWarning && (
-          <span role="status" aria-live="polite" className={styles.srOnly}>
-            {wrongLayout ? t('passwordInput.wrongLayoutOn') : ''}
-          </span>
-        )}
-      </div>
-    );
-  },
-);

package/src/components/PasswordInput/index.ts

@@ -1,2 +0,0 @@
-export { PasswordInput } from './PasswordInput';
-export type { PasswordInputProps, PasswordInputSize } from './PasswordInput';