@basic-ui/material 1.0.0-alpha.5 → 1.0.0-alpha.51

package/src/Select/PaymentMethodSelect.story.tsx

@@ -1,323 +1,316 @@
-import { forwardRef, useState } from 'react';
-import type { ReactElement, ComponentType } from 'react';
-
-import type { SelectProps } from '../';
-import { Box, Select, SelectItem } from '../';
-
-export default {
-  title: 'components/Select/Complex',
-};
-
-const ApplePayMark = (props) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={165.521}
-    height={105.965}
-    viewBox="0 0 166 106"
-    xmlSpace="preserve"
-    {...props}
-  >
-    <path d="M150.698 0H14.823c-.566 0-1.133 0-1.698.003-.477.004-.953.009-1.43.022-1.039.028-2.087.09-3.113.274a10.51 10.51 0 0 0-2.958.975 9.932 9.932 0 0 0-4.35 4.35 10.463 10.463 0 0 0-.975 2.96C.113 9.611.052 10.658.024 11.696c-.013.477-.019.953-.022 1.43C0 13.69 0 14.256 0 14.823v76.318c0 .567 0 1.132.002 1.699.003.476.009.953.022 1.43.028 1.036.09 2.084.275 3.11a10.46 10.46 0 0 0 .974 2.96 9.897 9.897 0 0 0 1.83 2.52 9.874 9.874 0 0 0 2.52 1.83c.947.483 1.917.79 2.96.977 1.025.183 2.073.245 3.112.273.477.011.953.018 1.43.02.565.004 1.132.004 1.698.004h135.875c.565 0 1.132 0 1.697-.004a79.71 79.71 0 0 0 1.431-.02c1.037-.028 2.085-.09 3.113-.273a10.478 10.478 0 0 0 2.958-.977 9.955 9.955 0 0 0 4.35-4.35c.483-.947.789-1.917.974-2.96.186-1.026.246-2.074.274-3.11.013-.477.02-.954.022-1.43.004-.567.004-1.132.004-1.699V14.824c0-.567 0-1.133-.004-1.699a63.067 63.067 0 0 0-.022-1.429c-.028-1.038-.088-2.085-.274-3.112a10.4 10.4 0 0 0-.974-2.96 9.941 9.941 0 0 0-4.35-4.35A10.52 10.52 0 0 0 156.939.3c-1.028-.185-2.076-.246-3.113-.274a71.413 71.413 0 0 0-1.431-.022C151.83 0 151.263 0 150.698 0z" />
-    <path
-      fill="#FFF"
-      d="m150.698 3.532 1.672.003c.452.003.905.008 1.36.02.792.022 1.719.065 2.583.22.75.135 1.38.34 1.984.648a6.392 6.392 0 0 1 2.804 2.807c.306.6.51 1.226.645 1.983.154.854.197 1.783.218 2.58.013.45.019.9.02 1.36.005.557.005 1.113.005 1.671v76.318c0 .558 0 1.114-.004 1.682-.002.45-.008.9-.02 1.35-.022.796-.065 1.725-.221 2.589a6.855 6.855 0 0 1-.645 1.975 6.397 6.397 0 0 1-2.808 2.807c-.6.306-1.228.512-1.971.645-.882.157-1.847.2-2.574.22-.457.01-.912.017-1.379.019-.555.004-1.113.004-1.669.004H14.801c-.55 0-1.1 0-1.66-.004a75.086 75.086 0 0 1-1.35-.018c-.744-.02-1.71-.064-2.584-.22a6.938 6.938 0 0 1-1.986-.65 6.337 6.337 0 0 1-1.622-1.18 6.355 6.355 0 0 1-1.178-1.623 6.935 6.935 0 0 1-.647-1.985c-.155-.863-.198-1.788-.22-2.578a66.017 66.017 0 0 1-.02-1.355l-.002-1.327V14.474l.002-1.325c.003-.453.008-.905.02-1.357.022-.792.065-1.717.222-2.587a6.924 6.924 0 0 1 .646-1.981c.304-.598.7-1.144 1.18-1.622a6.385 6.385 0 0 1 1.624-1.18 6.96 6.96 0 0 1 1.98-.647c.865-.155 1.792-.198 2.586-.22.452-.012.905-.017 1.354-.02l1.677-.003h135.875"
-    />
-    <path d="M45.186 35.64c1.417-1.772 2.38-4.152 2.126-6.585-2.075.104-4.607 1.37-6.073 3.143-1.316 1.52-2.48 4-2.177 6.33 2.33.202 4.656-1.165 6.124-2.887M47.285 38.983c-3.382-.202-6.258 1.919-7.873 1.919-1.616 0-4.09-1.818-6.764-1.769-3.482.051-6.713 2.02-8.48 5.15-3.634 6.264-.959 15.556 2.575 20.657 1.717 2.524 3.785 5.303 6.51 5.203 2.575-.101 3.584-1.668 6.714-1.668 3.128 0 4.037 1.668 6.763 1.617 2.827-.05 4.594-2.525 6.31-5.051 1.969-2.877 2.775-5.655 2.825-5.808-.05-.05-5.45-2.122-5.5-8.333-.051-5.201 4.24-7.675 4.441-7.828-2.423-3.584-6.209-3.988-7.52-4.09M76.734 31.944c7.35 0 12.47 5.067 12.47 12.444 0 7.404-5.225 12.497-12.654 12.497h-8.14v12.943h-5.88V31.944h14.204zM68.41 51.949h6.747c5.12 0 8.034-2.756 8.034-7.534 0-4.778-2.914-7.509-8.008-7.509h-6.773V51.95zM90.74 61.979c0-4.831 3.702-7.798 10.266-8.166l7.56-.446v-2.126c0-3.072-2.074-4.91-5.539-4.91-3.282 0-5.33 1.575-5.828 4.043h-5.356c.315-4.988 4.568-8.664 11.394-8.664 6.695 0 10.974 3.545 10.974 9.084v19.034h-5.435v-4.542h-.13c-1.602 3.072-5.094 5.015-8.717 5.015-5.408 0-9.189-3.36-9.189-8.322zm17.826-2.494v-2.18l-6.8.42c-3.386.237-5.303 1.733-5.303 4.096 0 2.415 1.996 3.99 5.041 3.99 3.964 0 7.062-2.73 7.062-6.326zM119.342 79.989v-4.595c.419.105 1.364.105 1.837.105 2.625 0 4.043-1.102 4.909-3.938 0-.052.5-1.68.5-1.706l-9.977-27.646h6.143l6.984 22.474h.104l6.985-22.474h5.985l-10.344 29.063c-2.362 6.695-5.093 8.848-10.816 8.848-.473 0-1.891-.053-2.31-.131z" />
-  </svg>
-);
-
-const MastercardCard = (props) => (
-  <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <g fill="none">
-      <path d="M0 0h32v32H0z" fill="#000" />
-      <path d="M13.02 10.505h5.923v10.857H13.02z" fill="#ff5f00" />
-      <path
-        d="M13.396 15.935a6.944 6.944 0 0 1 2.585-5.43c-2.775-2.224-6.76-1.9-9.156.745s-2.395 6.723 0 9.368 6.38 2.969 9.156.744a6.944 6.944 0 0 1-2.585-5.427z"
-        fill="#eb001b"
-      />
-      <path
-        d="M26.934 15.935c0 2.643-1.48 5.054-3.81 6.21s-5.105.851-7.143-.783a6.955 6.955 0 0 0 2.587-5.428c0-2.118-.954-4.12-2.587-5.429 2.038-1.633 4.81-1.937 7.142-.782s3.811 3.566 3.811 6.21z"
-        fill="#f79e1b"
-      />
-    </g>
-  </svg>
-);
-
-const IDEALLogo = (props) => (
-  <svg
-    id="Layer_1"
-    xmlns="http://www.w3.org/2000/svg"
-    x={0}
-    y={0}
-    viewBox="0 0 306.1 269.8"
-    style={{
-      enableBackground: 'new 0 0 306.1 269.8',
-    }}
-    xmlSpace="preserve"
-    {...props}
-  >
-    <style>{'.st0{fill:#fff}'}</style>
-    <path
-      className="st0"
-      d="M0 20v229.8c0 11 9 20 20 20h137.3c103.8 0 148.8-58.1 148.8-135.2C306.1 57.9 261.1 0 157.3 0H20C9 0 0 9 0 20z"
-    />
-    <path
-      d="M91.9 56.4v169.8h73.9c67.1 0 96.2-37.9 96.2-91.5 0-51.3-29.1-91.1-96.2-91.1h-61.1c-7.1 0-12.8 5.8-12.8 12.8z"
-      style={{
-        fill: '#c06',
-      }}
-    />
-    <path d="M157.3 251.5H37.9c-10.6 0-19.2-8.6-19.2-19.2V37.6c0-10.6 8.6-19.2 19.2-19.2h119.4c113.3 0 130.2 72.9 130.2 116.3 0 75.3-46.3 116.8-130.2 116.8zM37.9 24.8c-7.1 0-12.8 5.7-12.8 12.8v194.7c0 7.1 5.7 12.8 12.8 12.8h119.4c79.8 0 123.8-39.2 123.8-110.4 0-95.6-77.6-109.9-123.8-109.9H37.9z" />
-    <path
-      className="st0"
-      d="M117.9 111.8c2.6 0 5 .4 7.3 1.2 2.3.8 4.2 2.1 5.9 3.7 1.6 1.7 2.9 3.8 3.9 6.2.9 2.5 1.4 5.4 1.4 8.8 0 3-.4 5.7-1.1 8.2-.8 2.5-1.9 4.7-3.4 6.5-1.5 1.8-3.4 3.2-5.7 4.3-2.3 1-5 1.6-8.1 1.6h-17.5v-40.6h17.3zm-.6 33.1c1.3 0 2.5-.2 3.8-.6 1.2-.4 2.3-1.1 3.2-2.1.9-1 1.7-2.2 2.3-3.8.6-1.6.9-3.4.9-5.7 0-2-.2-3.9-.6-5.5-.4-1.6-1.1-3.1-2-4.2s-2.1-2.1-3.6-2.7c-1.5-.6-3.3-.9-5.5-.9h-6.4V145h7.9zM172.5 111.8v7.5h-21.4v8.7h19.7v6.9h-19.7v9.9H173v7.5h-30.8v-40.6h30.3zM203.1 111.8l15.2 40.6H209l-3.1-9h-15.2l-3.2 9h-9l15.3-40.6h9.3zm.5 24.9-5.1-14.9h-.1l-5.3 14.9h10.5zM232.8 111.8v33.1h19.8v7.5h-28.7v-40.6h8.9z"
-    />
-    <circle cx={58.5} cy={132.1} r={18.7} />
-    <path d="M72.6 226.2c-15.7 0-28.3-12.7-28.3-28.3v-22.1c0-7.8 6.3-14.2 14.2-14.2 7.8 0 14.2 6.3 14.2 14.2v50.4z" />
-  </svg>
-);
-
-const GooglePayLogo = (props) => (
-  <svg
-    width={752}
-    height={400}
-    fill="none"
-    viewBox="0 0 752 400"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      d="M552 0H200C90 0 0 90 0 200s90 200 200 200h352c110 0 200-90 200-200S662 0 552 0Z"
-      fill="#fff"
-    />
-    <path
-      d="M552 16.2c24.7 0 48.7 4.9 71.3 14.5 21.9 9.3 41.5 22.6 58.5 39.5 16.9 16.9 30.2 36.6 39.5 58.5 9.6 22.6 14.5 46.6 14.5 71.3 0 24.7-4.9 48.7-14.5 71.3-9.3 21.9-22.6 41.5-39.5 58.5-16.9 16.9-36.6 30.2-58.5 39.5-22.6 9.6-46.6 14.5-71.3 14.5H200c-24.7 0-48.7-4.9-71.3-14.5-21.9-9.3-41.5-22.6-58.5-39.5-16.9-16.9-30.2-36.6-39.5-58.5-9.6-22.6-14.5-46.6-14.5-71.3 0-24.7 4.9-48.7 14.5-71.3 9.3-21.9 22.6-41.5 39.5-58.5 16.9-16.9 36.6-30.2 58.5-39.5 22.6-9.6 46.6-14.5 71.3-14.5h352ZM552 0H200C90 0 0 90 0 200s90 200 200 200h352c110 0 200-90 200-200S662 0 552 0Z"
-      fill="#3C4043"
-    />
-    <path
-      d="M358.298 214.201v60.5h-19.2v-149.4h50.9c12.9 0 23.9 4.3 32.9 12.9 9.2 8.6 13.8 19.1 13.8 31.5 0 12.7-4.6 23.2-13.8 31.7-8.9 8.5-19.9 12.7-32.9 12.7h-31.7v.1Zm0-70.5v52.1h32.1c7.6 0 14-2.6 19-7.7 5.1-5.1 7.7-11.3 7.7-18.3 0-6.9-2.6-13-7.7-18.1-5-5.3-11.3-7.9-19-7.9h-32.1v-.1ZM486.897 169.101c14.2 0 25.4 3.8 33.6 11.4 8.2 7.6 12.3 18 12.3 31.2v63h-18.3v-14.2h-.8c-7.9 11.7-18.5 17.5-31.7 17.5-11.3 0-20.7-3.3-28.3-10-7.6-6.7-11.4-15-11.4-25 0-10.6 4-19 12-25.2 8-6.3 18.7-9.4 32-9.4 11.4 0 20.8 2.1 28.1 6.3v-4.4c0-6.7-2.6-12.3-7.9-17-5.3-4.7-11.5-7-18.6-7-10.7 0-19.2 4.5-25.4 13.6l-16.9-10.6c9.3-13.5 23.1-20.2 41.3-20.2Zm-24.8 74.2c0 5 2.1 9.2 6.4 12.5 4.2 3.3 9.2 5 14.9 5 8.1 0 15.3-3 21.6-9 6.3-6 9.5-13 9.5-21.1-6-4.7-14.3-7.1-25-7.1-7.8 0-14.3 1.9-19.5 5.6-5.3 3.9-7.9 8.6-7.9 14.1ZM637.196 172.4l-64 147.2h-19.8l23.8-51.5-42.2-95.7h20.9l30.4 73.4h.4l29.6-73.4h20.9Z"
-      fill="#3C4043"
-    />
-    <path
-      d="M281.928 202c0-6.26-.56-12.25-1.6-18.01h-80.48v33l46.35.01c-1.88 10.98-7.93 20.34-17.2 26.58v21.41h27.59c16.11-14.91 25.34-36.95 25.34-62.99Z"
-      fill="#4285F4"
-    />
-    <path
-      d="M229.009 243.581c-7.68 5.18-17.57 8.21-29.14 8.21-22.35 0-41.31-15.06-48.1-35.36h-28.46v22.08c14.1 27.98 43.08 47.18 76.56 47.18 23.14 0 42.58-7.61 56.73-20.71l-27.59-21.4Z"
-      fill="#34A853"
-    />
-    <path
-      d="M149.089 200.05c0-5.7.95-11.21 2.68-16.39v-22.08h-28.46c-5.83 11.57-9.11 24.63-9.11 38.47s3.29 26.9 9.11 38.47l28.46-22.08a51.657 51.657 0 0 1-2.68-16.39Z"
-      fill="#FABB05"
-    />
-    <path
-      d="M199.869 148.3c12.63 0 23.94 4.35 32.87 12.85l24.45-24.43c-14.85-13.83-34.21-22.32-57.32-22.32-33.47 0-62.46 19.2-76.56 47.18l28.46 22.08c6.79-20.3 25.75-35.36 48.1-35.36Z"
-      fill="#E94235"
-    />
-  </svg>
-);
-
-const svgByBrand: Record<string, ComponentType<any>> = {
-  amex: MastercardCard,
-  diners: MastercardCard,
-  discover: MastercardCard,
-  jcb: MastercardCard,
-  mastercard: MastercardCard,
-  unionpay: MastercardCard,
-  visa: MastercardCard,
-  unknown: MastercardCard,
-};
-
-export type PaymentMethodCard = {
-  type: 'card';
-  id: string;
-  last4: string;
-  brand: string;
-};
-
-export type PaymentMethodSepaDebit = {
-  type: 'sepa_debit';
-  id: string;
-};
-
-export type PaymentMethodIDEAL = {
-  type: 'ideal';
-  id: 'ideal';
-};
-
-export type PaymentMethodApplePay = {
-  type: 'apple_pay';
-  id: 'apple_pay';
-};
-
-export type PaymentMethodGooglePay = {
-  type: 'google_pay';
-  id: 'google_pay';
-};
-
-export type PaymentMethodNewCard = {
-  type: 'new_card';
-  id: 'new_card';
-};
-
-export type PaymentMethod =
-  | PaymentMethodCard
-  | PaymentMethodIDEAL
-  | PaymentMethodSepaDebit
-  | PaymentMethodApplePay
-  | PaymentMethodGooglePay
-  | PaymentMethodNewCard;
-
-export interface PaymentMethodSelectProps {
-  paymentMethods: PaymentMethod[];
-  value: string;
-  onChange: SelectProps['onChange'];
-}
-
-const logoWidth = 32;
-const logoHeight = 24;
-const LogoWrapper = ({ children }: { children: ReactElement }) => (
-  <Box
-    sx={{
-      mr: 2,
-      borderRadius: '2px',
-      overflow: 'hidden',
-      width: logoWidth,
-      height: logoHeight,
-      minWidth: logoWidth,
-      minHeight: logoHeight,
-      '& > svg': { width: logoWidth, height: logoWidth },
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    }}
-  >
-    {children}
-  </Box>
-);
-
-function SelectItemContent(props: PaymentMethod): ReactElement {
-  if (props.type === 'card') {
-    const CardIcon = svgByBrand[props.brand] || svgByBrand['unknown'];
-    return (
-      <>
-        <LogoWrapper>
-          <CardIcon />
-        </LogoWrapper>
-        {props.id} •••• {props.last4}
-      </>
-    );
-  }
-  if (props.type === 'ideal') {
-    return (
-      <>
-        <LogoWrapper>
-          <IDEALLogo />
-        </LogoWrapper>
-        iDEAL
-      </>
-    );
-  }
-  if (props.type === 'apple_pay') {
-    return (
-      <>
-        <LogoWrapper>
-          <ApplePayMark />
-        </LogoWrapper>
-        Apple Pay
-      </>
-    );
-  }
-  if (props.type === 'google_pay') {
-    return (
-      <>
-        <LogoWrapper>
-          <GooglePayLogo />
-        </LogoWrapper>
-        Google Pay
-      </>
-    );
-  }
-  if (props.type === 'sepa_debit') {
-    return (
-      <>
-        <LogoWrapper>
-          <IDEALLogo />
-        </LogoWrapper>
-        Direct debit
-      </>
-    );
-  }
-  if (props.type === 'new_card') {
-    return <>Add new card...</>;
-  }
-  return <>Unknown payment method</>;
-}
-
-const PaymentMethodSelect = forwardRef<
-  HTMLButtonElement | HTMLSelectElement,
-  PaymentMethodSelectProps
->(function PaymentMethodSelect(props, ref) {
-  const { onChange, paymentMethods, value } = props;
-  return (
-    <Select
-      ref={ref}
-      label="Payment method"
-      variant="outlined"
-      onChange={onChange}
-      value={value}
-    >
-      {paymentMethods.map((m) => (
-        <SelectItem value={m.id} key={m.id}>
-          <Box display="inline-flex" alignItems="center">
-            <SelectItemContent {...m} />
-          </Box>
-        </SelectItem>
-      ))}
-    </Select>
-  );
-});
-
-export const PaymentMethodSelectControlled = () => {
-  const paymentMethods: PaymentMethod[] = [
-    {
-      type: 'apple_pay',
-      id: 'apple_pay',
-    },
-    {
-      type: 'google_pay',
-      id: 'google_pay',
-    },
-    { type: 'ideal', id: 'ideal' },
-  ];
-  for (const testCard of [
-    'amex',
-    'diners',
-    'discover',
-    'jcb',
-    'mastercard',
-    'unionpay',
-    'visa',
-    'unknown',
-  ]) {
-    for (let i = 0; i < 10; i++) {
-      paymentMethods.push({
-        type: 'card',
-        id: testCard + `_${i}`,
-        brand: testCard,
-        last4: '1234',
-      });
-    }
-  }
-  const [value, setValue] = useState(paymentMethods[0].id);
-
-  console.log({ value });
-
-  return (
-    <PaymentMethodSelect
-      value={value}
-      onChange={(_, v) => setValue(v)}
-      paymentMethods={paymentMethods}
-    />
-  );
-};
+import { forwardRef, useState } from 'react';
+import type { ReactElement, ComponentType } from 'react';
+import styled from '@emotion/styled';
+
+import type { SelectProps } from '../';
+import { Select, SelectItem } from '../';
+
+export default {
+  title: 'components/Select/Complex',
+};
+
+const ApplePayMark = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={165.521}
+    height={105.965}
+    viewBox="0 0 166 106"
+    xmlSpace="preserve"
+    {...props}
+  >
+    <path d="M150.698 0H14.823c-.566 0-1.133 0-1.698.003-.477.004-.953.009-1.43.022-1.039.028-2.087.09-3.113.274a10.51 10.51 0 0 0-2.958.975 9.932 9.932 0 0 0-4.35 4.35 10.463 10.463 0 0 0-.975 2.96C.113 9.611.052 10.658.024 11.696c-.013.477-.019.953-.022 1.43C0 13.69 0 14.256 0 14.823v76.318c0 .567 0 1.132.002 1.699.003.476.009.953.022 1.43.028 1.036.09 2.084.275 3.11a10.46 10.46 0 0 0 .974 2.96 9.897 9.897 0 0 0 1.83 2.52 9.874 9.874 0 0 0 2.52 1.83c.947.483 1.917.79 2.96.977 1.025.183 2.073.245 3.112.273.477.011.953.018 1.43.02.565.004 1.132.004 1.698.004h135.875c.565 0 1.132 0 1.697-.004a79.71 79.71 0 0 0 1.431-.02c1.037-.028 2.085-.09 3.113-.273a10.478 10.478 0 0 0 2.958-.977 9.955 9.955 0 0 0 4.35-4.35c.483-.947.789-1.917.974-2.96.186-1.026.246-2.074.274-3.11.013-.477.02-.954.022-1.43.004-.567.004-1.132.004-1.699V14.824c0-.567 0-1.133-.004-1.699a63.067 63.067 0 0 0-.022-1.429c-.028-1.038-.088-2.085-.274-3.112a10.4 10.4 0 0 0-.974-2.96 9.941 9.941 0 0 0-4.35-4.35A10.52 10.52 0 0 0 156.939.3c-1.028-.185-2.076-.246-3.113-.274a71.413 71.413 0 0 0-1.431-.022C151.83 0 151.263 0 150.698 0z" />
+    <path
+      fill="#FFF"
+      d="m150.698 3.532 1.672.003c.452.003.905.008 1.36.02.792.022 1.719.065 2.583.22.75.135 1.38.34 1.984.648a6.392 6.392 0 0 1 2.804 2.807c.306.6.51 1.226.645 1.983.154.854.197 1.783.218 2.58.013.45.019.9.02 1.36.005.557.005 1.113.005 1.671v76.318c0 .558 0 1.114-.004 1.682-.002.45-.008.9-.02 1.35-.022.796-.065 1.725-.221 2.589a6.855 6.855 0 0 1-.645 1.975 6.397 6.397 0 0 1-2.808 2.807c-.6.306-1.228.512-1.971.645-.882.157-1.847.2-2.574.22-.457.01-.912.017-1.379.019-.555.004-1.113.004-1.669.004H14.801c-.55 0-1.1 0-1.66-.004a75.086 75.086 0 0 1-1.35-.018c-.744-.02-1.71-.064-2.584-.22a6.938 6.938 0 0 1-1.986-.65 6.337 6.337 0 0 1-1.622-1.18 6.355 6.355 0 0 1-1.178-1.623 6.935 6.935 0 0 1-.647-1.985c-.155-.863-.198-1.788-.22-2.578a66.017 66.017 0 0 1-.02-1.355l-.002-1.327V14.474l.002-1.325c.003-.453.008-.905.02-1.357.022-.792.065-1.717.222-2.587a6.924 6.924 0 0 1 .646-1.981c.304-.598.7-1.144 1.18-1.622a6.385 6.385 0 0 1 1.624-1.18 6.96 6.96 0 0 1 1.98-.647c.865-.155 1.792-.198 2.586-.22.452-.012.905-.017 1.354-.02l1.677-.003h135.875"
+    />
+    <path d="M45.186 35.64c1.417-1.772 2.38-4.152 2.126-6.585-2.075.104-4.607 1.37-6.073 3.143-1.316 1.52-2.48 4-2.177 6.33 2.33.202 4.656-1.165 6.124-2.887M47.285 38.983c-3.382-.202-6.258 1.919-7.873 1.919-1.616 0-4.09-1.818-6.764-1.769-3.482.051-6.713 2.02-8.48 5.15-3.634 6.264-.959 15.556 2.575 20.657 1.717 2.524 3.785 5.303 6.51 5.203 2.575-.101 3.584-1.668 6.714-1.668 3.128 0 4.037 1.668 6.763 1.617 2.827-.05 4.594-2.525 6.31-5.051 1.969-2.877 2.775-5.655 2.825-5.808-.05-.05-5.45-2.122-5.5-8.333-.051-5.201 4.24-7.675 4.441-7.828-2.423-3.584-6.209-3.988-7.52-4.09M76.734 31.944c7.35 0 12.47 5.067 12.47 12.444 0 7.404-5.225 12.497-12.654 12.497h-8.14v12.943h-5.88V31.944h14.204zM68.41 51.949h6.747c5.12 0 8.034-2.756 8.034-7.534 0-4.778-2.914-7.509-8.008-7.509h-6.773V51.95zM90.74 61.979c0-4.831 3.702-7.798 10.266-8.166l7.56-.446v-2.126c0-3.072-2.074-4.91-5.539-4.91-3.282 0-5.33 1.575-5.828 4.043h-5.356c.315-4.988 4.568-8.664 11.394-8.664 6.695 0 10.974 3.545 10.974 9.084v19.034h-5.435v-4.542h-.13c-1.602 3.072-5.094 5.015-8.717 5.015-5.408 0-9.189-3.36-9.189-8.322zm17.826-2.494v-2.18l-6.8.42c-3.386.237-5.303 1.733-5.303 4.096 0 2.415 1.996 3.99 5.041 3.99 3.964 0 7.062-2.73 7.062-6.326zM119.342 79.989v-4.595c.419.105 1.364.105 1.837.105 2.625 0 4.043-1.102 4.909-3.938 0-.052.5-1.68.5-1.706l-9.977-27.646h6.143l6.984 22.474h.104l6.985-22.474h5.985l-10.344 29.063c-2.362 6.695-5.093 8.848-10.816 8.848-.473 0-1.891-.053-2.31-.131z" />
+  </svg>
+);
+
+const MastercardCard = (props) => (
+  <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <g fill="none">
+      <path d="M0 0h32v32H0z" fill="#000" />
+      <path d="M13.02 10.505h5.923v10.857H13.02z" fill="#ff5f00" />
+      <path
+        d="M13.396 15.935a6.944 6.944 0 0 1 2.585-5.43c-2.775-2.224-6.76-1.9-9.156.745s-2.395 6.723 0 9.368 6.38 2.969 9.156.744a6.944 6.944 0 0 1-2.585-5.427z"
+        fill="#eb001b"
+      />
+      <path
+        d="M26.934 15.935c0 2.643-1.48 5.054-3.81 6.21s-5.105.851-7.143-.783a6.955 6.955 0 0 0 2.587-5.428c0-2.118-.954-4.12-2.587-5.429 2.038-1.633 4.81-1.937 7.142-.782s3.811 3.566 3.811 6.21z"
+        fill="#f79e1b"
+      />
+    </g>
+  </svg>
+);
+
+const IDEALLogo = (props) => (
+  <svg
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    x={0}
+    y={0}
+    viewBox="0 0 306.1 269.8"
+    style={{
+      enableBackground: 'new 0 0 306.1 269.8',
+    }}
+    xmlSpace="preserve"
+    {...props}
+  >
+    <style>{'.st0{fill:#fff}'}</style>
+    <path
+      className="st0"
+      d="M0 20v229.8c0 11 9 20 20 20h137.3c103.8 0 148.8-58.1 148.8-135.2C306.1 57.9 261.1 0 157.3 0H20C9 0 0 9 0 20z"
+    />
+    <path
+      d="M91.9 56.4v169.8h73.9c67.1 0 96.2-37.9 96.2-91.5 0-51.3-29.1-91.1-96.2-91.1h-61.1c-7.1 0-12.8 5.8-12.8 12.8z"
+      style={{
+        fill: '#c06',
+      }}
+    />
+    <path d="M157.3 251.5H37.9c-10.6 0-19.2-8.6-19.2-19.2V37.6c0-10.6 8.6-19.2 19.2-19.2h119.4c113.3 0 130.2 72.9 130.2 116.3 0 75.3-46.3 116.8-130.2 116.8zM37.9 24.8c-7.1 0-12.8 5.7-12.8 12.8v194.7c0 7.1 5.7 12.8 12.8 12.8h119.4c79.8 0 123.8-39.2 123.8-110.4 0-95.6-77.6-109.9-123.8-109.9H37.9z" />
+    <path
+      className="st0"
+      d="M117.9 111.8c2.6 0 5 .4 7.3 1.2 2.3.8 4.2 2.1 5.9 3.7 1.6 1.7 2.9 3.8 3.9 6.2.9 2.5 1.4 5.4 1.4 8.8 0 3-.4 5.7-1.1 8.2-.8 2.5-1.9 4.7-3.4 6.5-1.5 1.8-3.4 3.2-5.7 4.3-2.3 1-5 1.6-8.1 1.6h-17.5v-40.6h17.3zm-.6 33.1c1.3 0 2.5-.2 3.8-.6 1.2-.4 2.3-1.1 3.2-2.1.9-1 1.7-2.2 2.3-3.8.6-1.6.9-3.4.9-5.7 0-2-.2-3.9-.6-5.5-.4-1.6-1.1-3.1-2-4.2s-2.1-2.1-3.6-2.7c-1.5-.6-3.3-.9-5.5-.9h-6.4V145h7.9zM172.5 111.8v7.5h-21.4v8.7h19.7v6.9h-19.7v9.9H173v7.5h-30.8v-40.6h30.3zM203.1 111.8l15.2 40.6H209l-3.1-9h-15.2l-3.2 9h-9l15.3-40.6h9.3zm.5 24.9-5.1-14.9h-.1l-5.3 14.9h10.5zM232.8 111.8v33.1h19.8v7.5h-28.7v-40.6h8.9z"
+    />
+    <circle cx={58.5} cy={132.1} r={18.7} />
+    <path d="M72.6 226.2c-15.7 0-28.3-12.7-28.3-28.3v-22.1c0-7.8 6.3-14.2 14.2-14.2 7.8 0 14.2 6.3 14.2 14.2v50.4z" />
+  </svg>
+);
+
+const GooglePayLogo = (props) => (
+  <svg
+    width={752}
+    height={400}
+    fill="none"
+    viewBox="0 0 752 400"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M552 0H200C90 0 0 90 0 200s90 200 200 200h352c110 0 200-90 200-200S662 0 552 0Z"
+      fill="#fff"
+    />
+    <path
+      d="M552 16.2c24.7 0 48.7 4.9 71.3 14.5 21.9 9.3 41.5 22.6 58.5 39.5 16.9 16.9 30.2 36.6 39.5 58.5 9.6 22.6 14.5 46.6 14.5 71.3 0 24.7-4.9 48.7-14.5 71.3-9.3 21.9-22.6 41.5-39.5 58.5-16.9 16.9-36.6 30.2-58.5 39.5-22.6 9.6-46.6 14.5-71.3 14.5H200c-24.7 0-48.7-4.9-71.3-14.5-21.9-9.3-41.5-22.6-58.5-39.5-16.9-16.9-30.2-36.6-39.5-58.5-9.6-22.6-14.5-46.6-14.5-71.3 0-24.7 4.9-48.7 14.5-71.3 9.3-21.9 22.6-41.5 39.5-58.5 16.9-16.9 36.6-30.2 58.5-39.5 22.6-9.6 46.6-14.5 71.3-14.5h352ZM552 0H200C90 0 0 90 0 200s90 200 200 200h352c110 0 200-90 200-200S662 0 552 0Z"
+      fill="#3C4043"
+    />
+    <path
+      d="M358.298 214.201v60.5h-19.2v-149.4h50.9c12.9 0 23.9 4.3 32.9 12.9 9.2 8.6 13.8 19.1 13.8 31.5 0 12.7-4.6 23.2-13.8 31.7-8.9 8.5-19.9 12.7-32.9 12.7h-31.7v.1Zm0-70.5v52.1h32.1c7.6 0 14-2.6 19-7.7 5.1-5.1 7.7-11.3 7.7-18.3 0-6.9-2.6-13-7.7-18.1-5-5.3-11.3-7.9-19-7.9h-32.1v-.1ZM486.897 169.101c14.2 0 25.4 3.8 33.6 11.4 8.2 7.6 12.3 18 12.3 31.2v63h-18.3v-14.2h-.8c-7.9 11.7-18.5 17.5-31.7 17.5-11.3 0-20.7-3.3-28.3-10-7.6-6.7-11.4-15-11.4-25 0-10.6 4-19 12-25.2 8-6.3 18.7-9.4 32-9.4 11.4 0 20.8 2.1 28.1 6.3v-4.4c0-6.7-2.6-12.3-7.9-17-5.3-4.7-11.5-7-18.6-7-10.7 0-19.2 4.5-25.4 13.6l-16.9-10.6c9.3-13.5 23.1-20.2 41.3-20.2Zm-24.8 74.2c0 5 2.1 9.2 6.4 12.5 4.2 3.3 9.2 5 14.9 5 8.1 0 15.3-3 21.6-9 6.3-6 9.5-13 9.5-21.1-6-4.7-14.3-7.1-25-7.1-7.8 0-14.3 1.9-19.5 5.6-5.3 3.9-7.9 8.6-7.9 14.1ZM637.196 172.4l-64 147.2h-19.8l23.8-51.5-42.2-95.7h20.9l30.4 73.4h.4l29.6-73.4h20.9Z"
+      fill="#3C4043"
+    />
+    <path
+      d="M281.928 202c0-6.26-.56-12.25-1.6-18.01h-80.48v33l46.35.01c-1.88 10.98-7.93 20.34-17.2 26.58v21.41h27.59c16.11-14.91 25.34-36.95 25.34-62.99Z"
+      fill="#4285F4"
+    />
+    <path
+      d="M229.009 243.581c-7.68 5.18-17.57 8.21-29.14 8.21-22.35 0-41.31-15.06-48.1-35.36h-28.46v22.08c14.1 27.98 43.08 47.18 76.56 47.18 23.14 0 42.58-7.61 56.73-20.71l-27.59-21.4Z"
+      fill="#34A853"
+    />
+    <path
+      d="M149.089 200.05c0-5.7.95-11.21 2.68-16.39v-22.08h-28.46c-5.83 11.57-9.11 24.63-9.11 38.47s3.29 26.9 9.11 38.47l28.46-22.08a51.657 51.657 0 0 1-2.68-16.39Z"
+      fill="#FABB05"
+    />
+    <path
+      d="M199.869 148.3c12.63 0 23.94 4.35 32.87 12.85l24.45-24.43c-14.85-13.83-34.21-22.32-57.32-22.32-33.47 0-62.46 19.2-76.56 47.18l28.46 22.08c6.79-20.3 25.75-35.36 48.1-35.36Z"
+      fill="#E94235"
+    />
+  </svg>
+);
+
+const svgByBrand: Record<string, ComponentType<any>> = {
+  amex: MastercardCard,
+  diners: MastercardCard,
+  discover: MastercardCard,
+  jcb: MastercardCard,
+  mastercard: MastercardCard,
+  unionpay: MastercardCard,
+  visa: MastercardCard,
+  unknown: MastercardCard,
+};
+
+export type PaymentMethodCard = {
+  type: 'card';
+  id: string;
+  last4: string;
+  brand: string;
+};
+
+export type PaymentMethodSepaDebit = {
+  type: 'sepa_debit';
+  id: string;
+};
+
+export type PaymentMethodIDEAL = {
+  type: 'ideal';
+  id: 'ideal';
+};
+
+export type PaymentMethodApplePay = {
+  type: 'apple_pay';
+  id: 'apple_pay';
+};
+
+export type PaymentMethodGooglePay = {
+  type: 'google_pay';
+  id: 'google_pay';
+};
+
+export type PaymentMethodNewCard = {
+  type: 'new_card';
+  id: 'new_card';
+};
+
+export type PaymentMethod =
+  | PaymentMethodCard
+  | PaymentMethodIDEAL
+  | PaymentMethodSepaDebit
+  | PaymentMethodApplePay
+  | PaymentMethodGooglePay
+  | PaymentMethodNewCard;
+
+export interface PaymentMethodSelectProps {
+  paymentMethods: PaymentMethod[];
+  value: string;
+  onChange: SelectProps['onChange'];
+}
+
+const logoWidth = 32;
+const logoHeight = 24;
+const LogoWrapper = styled.div({
+  marginInlineEnd: '8px',
+  borderRadius: '2px',
+  overflow: 'hidden',
+  width: logoWidth,
+  height: logoHeight,
+  minWidth: logoWidth,
+  minHeight: logoHeight,
+  '& > svg': { width: logoWidth, height: logoWidth },
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+function SelectItemContent(props: PaymentMethod): ReactElement {
+  if (props.type === 'card') {
+    const CardIcon = svgByBrand[props.brand] || svgByBrand['unknown'];
+    return (
+      <>
+        <LogoWrapper>
+          <CardIcon />
+        </LogoWrapper>
+        {props.id} •••• {props.last4}
+      </>
+    );
+  }
+  if (props.type === 'ideal') {
+    return (
+      <>
+        <LogoWrapper>
+          <IDEALLogo />
+        </LogoWrapper>
+        iDEAL
+      </>
+    );
+  }
+  if (props.type === 'apple_pay') {
+    return (
+      <>
+        <LogoWrapper>
+          <ApplePayMark />
+        </LogoWrapper>
+        Apple Pay
+      </>
+    );
+  }
+  if (props.type === 'google_pay') {
+    return (
+      <>
+        <LogoWrapper>
+          <GooglePayLogo />
+        </LogoWrapper>
+        Google Pay
+      </>
+    );
+  }
+  if (props.type === 'sepa_debit') {
+    return (
+      <>
+        <LogoWrapper>
+          <IDEALLogo />
+        </LogoWrapper>
+        Direct debit
+      </>
+    );
+  }
+  if (props.type === 'new_card') {
+    return <>Add new card...</>;
+  }
+  return <>Unknown payment method</>;
+}
+
+const PaymentMethodSelect = forwardRef<
+  HTMLButtonElement | HTMLSelectElement,
+  PaymentMethodSelectProps
+>(function PaymentMethodSelect(props, ref) {
+  const { onChange, paymentMethods, value } = props;
+  return (
+    <Select
+      ref={ref}
+      label="Payment method"
+      variant="outlined"
+      onChange={onChange}
+      value={value}
+    >
+      {paymentMethods.map((m) => (
+        <SelectItem value={m.id} key={m.id}>
+          <SelectItemContent {...m} />
+        </SelectItem>
+      ))}
+    </Select>
+  );
+});
+
+export const PaymentMethodSelectControlled = () => {
+  const paymentMethods: PaymentMethod[] = [
+    {
+      type: 'apple_pay',
+      id: 'apple_pay',
+    },
+    {
+      type: 'google_pay',
+      id: 'google_pay',
+    },
+    { type: 'ideal', id: 'ideal' },
+  ];
+  for (const testCard of [
+    'amex',
+    'diners',
+    'discover',
+    'jcb',
+    'mastercard',
+    'unionpay',
+    'visa',
+    'unknown',
+  ]) {
+    for (let i = 0; i < 50; i++) {
+      paymentMethods.push({
+        type: 'card',
+        id: testCard + `_${i}`,
+        brand: testCard,
+        last4: '1234',
+      });
+    }
+  }
+  const [value, setValue] = useState(paymentMethods[0].id);
+
+  console.log({ value });
+
+  return (
+    <PaymentMethodSelect
+      value={value}
+      onChange={(_, v) => setValue(v)}
+      paymentMethods={paymentMethods}
+    />
+  );
+};