Toggles:

const toggles = [
  { label: 'Default', element: <Toggle /> },
  { label: 'Checked', element: <Toggle checked /> },
  { label: 'Disabled unchecked', element: <Toggle disabled /> },
  { label: 'Disabled checked', element: <Toggle disabled checked /> },
  { label: 'Default with label', element: <Toggle label="My toggle label" /> },
  {
    label: 'Default with label and sublabel',
    element: <Toggle label="My toggle" sublabel="Some text for the sublabel" />,
  },
];

// Generate test cases
const ToggleRow = ({ backgroundColor, variant }) => {
  return (
    <tr
      style={{
        backgroundColor: backgroundColor,
        verticalAlign: 'center',
      }}
    >
      {toggles.map((toggle, index) => (
        <td key={index} style={{ verticalAlign: 'top' }}>
          {variant === 'dark' && (
            <div style={{ color: '#6a7685', marginBottom: '12px', fontStyle: 'italic' }}>{toggle.label}</div>
          )}
          {React.cloneElement(toggle.element, { variant })}
        </td>
      ))}
    </tr>
  );
};

<table>
  <tbody>
    {[{ backgroundColor: '#fff', variant: 'dark' }, { backgroundColor: '#1B4686', variant: 'light' }].map(
      (row, index) => <ToggleRow backgroundColor={row.backgroundColor} variant={row.variant} key={index} />
    )}
  </tbody>
</table>;