<s-section padding="none">
  <s-stack gap="small-200">
    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center" paddingInline="base" paddingBlockStart="base">
      <s-grid gridTemplateColumns="1fr auto" gap="small-200" alignItems="center">
        <s-text-field icon="search" placeholder="Filter customers"></s-text-field>
        <s-button commandFor="tagged-with">Tagged with</s-button>
        <s-popover id="tagged-with">
          <s-stack gap="small-200" padding="small-200">
            <s-text-field value="VIP" placeholder="Add tag"></s-text-field>
            <s-link href="">Clear</s-link>
          </s-stack>
        </s-popover>
      </s-grid>
      <s-button variant="secondary">Save</s-button>
    </s-grid>

    <s-stack direction="inline"  gap="small-400" paddingInline="base">
      <s-clickable-chip removable>Tagged with VIP</s-clickable-chip>
    </s-stack>
    
    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center" paddingInline="base">
      <s-checkbox label="Showing 2 customers"></s-checkbox>
      <s-select>
        <s-option value="newest">Newest update</s-option>
        <s-option value="oldest">Oldest update</s-option>
      </s-select>
    </s-grid>
    
    <s-stack>
      <s-clickable borderStyle="solid none none none" border="base" paddingInline="base" paddingBlock="small">
        <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
          <s-stack direction="inline" gap="small" alignItems="center">
            <s-checkbox></s-checkbox>
            <s-avatar></s-avatar>
            <s-stack>
              <s-heading>Mae Jemison</s-heading>
              <s-text>Decatur, USA</s-text>
            </s-stack>
          </s-stack>
          <s-button icon="menu-horizontal" variant="tertiary" accessibilityLabel="Actions for Mae Jemison"></s-button>
        </s-grid>
      </s-clickable>
      <s-clickable borderStyle="solid none none none" border="base" paddingInline="base" paddingBlock="small">
        <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
          <s-stack direction="inline" gap="small" alignItems="center">
            <s-checkbox></s-checkbox>
            <s-avatar></s-avatar>
            <s-stack>
              <s-heading>Ellen Ochoa</s-heading>
              <s-text>Los Angeles, USA</s-text>
            </s-stack>
          </s-stack>
          <s-button icon="menu-horizontal" variant="tertiary" accessibilityLabel="Actions for Ellen Ochoa"></s-button>
        </s-grid>
      </s-clickable>
    </s-stack>
  </s-stack>
</s-section>