Input with icon and kbd

export const Default = () => (
  <span className="acrm-inputwrap acrm-inputwrap--short">
    <Icon name="search" />
    <input placeholder="Search" aria-label="Search" />
    <span className="acrm-kbd">⌘K</span>
  </span>
);

export const Variants = () => (
  <div style={row}>
    <Labeled label="leading icon">
      <span className="acrm-inputwrap acrm-inputwrap--short">
        <Icon name="search" />
        <input placeholder="Search" aria-label="Search" />
      </span>
    </Labeled>
    <Labeled label="trailing kbd">
      <span className="acrm-inputwrap acrm-inputwrap--short">
        <input placeholder="Search" aria-label="Search" />
        <span className="acrm-kbd">/</span>
      </span>
    </Labeled>
    <Labeled label="icon + kbd">
      <span className="acrm-inputwrap acrm-inputwrap--short">
        <Icon name="search" />
        <input placeholder="Search" aria-label="Search" />
        <span className="acrm-kbd">⌘K</span>
      </span>
    </Labeled>
  </div>
);

export const Sizes = () => (
  <div style={grid}>
    <Labeled label="--num (88px)">
      <span className="acrm-inputwrap acrm-inputwrap--num">
        <Icon name="hash" />
        <input defaultValue="12" aria-label="Count" />
      </span>
    </Labeled>
    <Labeled label="--code (132px)">
      <span className="acrm-inputwrap acrm-inputwrap--code">
        <Icon name="id" />
        <input defaultValue="CZ12345678" aria-label="Company ID" />
      </span>
    </Labeled>
    <Labeled label="--short (210px)">
      <span className="acrm-inputwrap acrm-inputwrap--short">
        <Icon name="search" />
        <input defaultValue="acme robotics" aria-label="Search" />
        <span className="acrm-kbd">/</span>
      </span>
    </Labeled>
    <Labeled label="--email (280px)">
      <span className="acrm-inputwrap acrm-inputwrap--email">
        <Icon name="mail" />
        <input type="email" placeholder="Work e-mail" aria-label="Work e-mail" />
      </span>
    </Labeled>
    <div style={{ width: 480 }}>
      <Labeled label="default (100% of the container)">
        <span className="acrm-inputwrap">
          <Icon name="search" />
          <input placeholder="Search contacts, companies and deals" aria-label="Search" />
          <span className="acrm-kbd">⌘K</span>
        </span>
      </Labeled>
    </div>
  </div>
);

export const States = () => (
  <div style={grid}>
    <div style={row}>
      <Labeled label="rest">
        <span className="acrm-inputwrap acrm-inputwrap--short">
          <Icon name="search" />
          <input placeholder="Search" aria-label="Search" />
          <span className="acrm-kbd">⌘K</span>
        </span>
      </Labeled>
      <Labeled label="error (.is-error)">
        <span className="acrm-inputwrap acrm-inputwrap--short is-error">
          <Icon name="mail" />
          <input defaultValue="jane@" aria-label="Work e-mail" aria-invalid />
        </span>
      </Labeled>
      <Labeled label="disabled (.is-disabled)">
        <span className="acrm-inputwrap acrm-inputwrap--short is-disabled">
          <Icon name="search" />
          <input defaultValue="acme robotics" aria-label="Search" disabled />
          <span className="acrm-kbd">⌘K</span>
        </span>
      </Labeled>
    </div>
    <span style={{ color: 'var(--fg-muted)', font: 'var(--small)' }}>
      Focus-within: the wrapper border turns --accent with a 3px translucent ring (16 %).
    </span>
  </div>
);

export const WithIconAndKbd = () => (
  <div style={grid}>
    <div style={row}>
      <Labeled label="search · ⌘K">
        <span className="acrm-inputwrap acrm-inputwrap--short">
          <Icon name="search" />
          <input placeholder="Search" aria-label="Search" />
          <span className="acrm-kbd">⌘K</span>
        </span>
      </Labeled>
      <Labeled label="search · /">
        <span className="acrm-inputwrap acrm-inputwrap--short">
          <Icon name="search" />
          <input placeholder="Filter rows" aria-label="Filter rows" />
          <span className="acrm-kbd">/</span>
        </span>
      </Labeled>
    </div>
    <div style={row}>
      <Labeled label="mail">
        <span className="acrm-inputwrap acrm-inputwrap--email">
          <Icon name="mail" />
          <input type="email" placeholder="Work e-mail" aria-label="Work e-mail" />
        </span>
      </Labeled>
      <Labeled label="world (url)">
        <span className="acrm-inputwrap acrm-inputwrap--email">
          <Icon name="world" />
          <input type="url" placeholder="https://company.com" aria-label="Website" />
        </span>
      </Labeled>
      <Labeled label="phone">
        <span className="acrm-inputwrap acrm-inputwrap--short">
          <Icon name="phone" />
          <input type="tel" placeholder="+420 …" aria-label="Phone" />
        </span>
      </Labeled>
    </div>
  </div>
);

export const Composition = () => (
  <div
    style={{
      display: 'flex',
      alignItems: 'center',
      gap: 'var(--sp-3)',
      padding: 'var(--sp-3) var(--sp-4)',
      borderBottom: '1px solid var(--border)',
      width: 560,
    }}
  >
    <span className="acrm-inputwrap acrm-inputwrap--short">
      <Icon name="search" />
      <input placeholder="Search contacts" aria-label="Search contacts" />
      <span className="acrm-kbd">/</span>
    </span>
    <Button variant="ghost">
      <Icon name="filter" />
      Filter
    </Button>
    <span style={{ flex: 1 }} />
    <span style={{ font: 'var(--cell)', color: 'var(--fg-secondary)' }}>128 contacts</span>
  </div>
);