@basic-ui/material 0.1.13 → 1.0.0-alpha.0

package/src/Paper/Paper.story.tsx

@@ -1,15 +1,31 @@
 import { useState } from 'react';
 import { Paper } from './';
-import { storiesOf } from '@storybook/react';
 import { Text } from '../Text';
 import { Box } from '../Box';
+import { rem } from 'polished';
+
+export default {
+  title: 'components/Paper',
+};
 
 const Example = ({}) => {
   const [elevation, setElevation] = useState(0);
 
   return (
-    <Box p="6" bg={'surface'} color={'on.surface'} width="100%" height="100vh">
-      <Paper outlined width="300px" height="300px" elevation={elevation} mb="4">
+    <Box
+      p="6"
+      bg={'surface'}
+      color={'on.primary-container'}
+      width="100%"
+      height="100vh"
+    >
+      <Paper
+        width="216px"
+        height="216px"
+        elevation={elevation}
+        mb="4"
+        sx={{ borderRadius: 'large' }}
+      >
         <Text variant="h3">Hello</Text>
         <Text variant="body1">This is looking cool</Text>
         Pretty cool.
@@ -21,7 +37,7 @@ const Example = ({}) => {
         <input
           type="range"
           min={0}
-          max={24}
+          max={5}
           value={elevation}
           onChange={(e) => setElevation(Number(e.target.value))}
         />
@@ -30,6 +46,4 @@ const Example = ({}) => {
   );
 };
 
-const stories = storiesOf('Components/Paper', module);
-
-stories.add('paper', () => <Example />);
+export const Default = () => <Example />;

package/src/Paper/Paper.tsx

@@ -3,7 +3,7 @@ import type * as React from 'react';
 import { Box, BoxProps } from '../Box';
 import { useTheme } from '../theme';
 import { rem } from 'polished';
-import { alpha, getDarkThemeBackgroundOverlay } from '../color';
+import { alpha, getBackgroundOverlay } from '../color';
 
 export interface PaperProps extends BoxProps {
   as?: React.ElementType<any>;
@@ -43,7 +43,11 @@ export const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(
               borderColor: alpha('on.surface', 0.12),
             }
           : {}),
-        ...getDarkThemeBackgroundOverlay(theme, backgroundOverlay ?? elevation),
+        ...getBackgroundOverlay(
+          theme,
+          backgroundOverlay ?? elevation,
+          'primary'
+        ),
         ...__css,
       }}
       {...otherProps}

package/src/ProgressSpinner/ProgressSpinner.story.tsx

@@ -1,8 +1,11 @@
 import { useEffect, useState } from 'react';
 import { ProgressSpinner } from './';
-import { storiesOf } from '@storybook/react';
 import { Box } from '../Box';
 
+export default {
+  title: 'components/ProgressSpinner',
+};
+
 const Example = () => {
   const steps = [0, 25, 50, 75, 100];
   const [currentProgress, setCurrentProgress] = useState(0);
@@ -28,6 +31,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Components/ProgressSpinner', module);
-
-stories.add('controlled', () => <Example />);
+export const Default = () => <Example />;

package/src/RadioButton/RadioButton.story.tsx

@@ -1,9 +1,12 @@
 import { useState } from 'react';
 import type * as React from 'react';
 import { RadioButton, RadioGroup, Box } from '../';
-import { storiesOf } from '@storybook/react';
 // import './styles.css';
 
+export default {
+  title: 'components/RadioButton',
+};
+
 const Example = (props) => {
   return (
     <>
@@ -29,7 +32,7 @@ const Example = (props) => {
   );
 };
 
-const Standalone = (props) => {
+const StandaloneExample = (props) => {
   const [selectedValue, setSelectedValue] = useState('a');
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSelectedValue(e.target.value);
@@ -90,17 +93,16 @@ const Standalone = (props) => {
   );
 };
 
-const stories = storiesOf('Components/RadioButton', module);
-
-stories.add('controlled', () => (
+export const Controlled = () => (
   <>
     <Example name="demo-1" />
     <Example name="demo-2" />
   </>
-));
-stories.add('standalone', () => (
+);
+
+export const Standalone = () => (
   <>
-    <Standalone name="demo-1" />
-    <Standalone name="demo-2" />
+    <StandaloneExample name="demo-1" />
+    <StandaloneExample name="demo-2" />
   </>
-));
+);

package/src/RadioButton/RadioButton.tsx

@@ -50,7 +50,7 @@ const RadioButtonInner = forwardRef<
             outline: 'none',
           },
           border: 'none',
-          borderRadius: '50%',
+          borderRadius: 'full',
           zIndex: 1,
           position: 'absolute',
           ...__css,

package/src/RadioButton/RadioButtonIcon.tsx

@@ -19,7 +19,7 @@ export const RadioButtonIcon = forwardRef<HTMLDivElement, RadioButtonIconProps>(
         __css={{
           borderColor: 'currentColor',
           borderStyle: 'solid',
-          borderRadius: '50%',
+          borderRadius: 'full',
           borderWidth: rem(2),
           width: '100%',
           height: '100%',
@@ -30,7 +30,7 @@ export const RadioButtonIcon = forwardRef<HTMLDivElement, RadioButtonIconProps>(
         <Box
           __css={{
             backgroundColor: 'currentColor',
-            borderRadius: '50%',
+            borderRadius: 'full',
             width: '100%',
             height: '100%',
             transition:

package/src/Ripple/Ripple.story.tsx

@@ -3,10 +3,13 @@ import { Ripple, useRipple } from './';
 import { Box } from '../Box';
 import { Text } from '../Text';
 import { Button } from '../Button';
-import { storiesOf } from '@storybook/react';
 import { useTheme } from '../theme';
 import { get } from '@styled-system/css';
 
+export default {
+  title: 'helper components/Ripple',
+};
+
 const Example = () => {
   const theme = useTheme();
   const ref = useRef<HTMLDivElement>();
@@ -31,7 +34,7 @@ const Example = () => {
         bg="#eee"
         sx={{
           position: 'relative',
-          borderRadius: 30,
+          borderRadius: 'extra-large',
           overflow: 'hidden',
           willChange: 'transform',
         }}
@@ -66,6 +69,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Helper Components/Ripple', module);
-
-stories.add('controlled', () => <Example />);
+export const Controlled = () => <Example />;

package/src/Ripple/Ripple.tsx

@@ -22,7 +22,7 @@ export const rippleStyle = ({
   backgroundColor: `var(${RIPPLE_BACKGROUND_COLOR})`,
   transformOrigin: 'center center',
   opacity: 0,
-  borderRadius: '50%',
+  borderRadius: '999999px',
   animation,
   willChange: 'opacity,transform',
 });

package/src/Ripple/RippleBox.tsx

@@ -28,6 +28,7 @@ export const RippleBox: <
       rippleColor, // eslint-disable-line @typescript-eslint/no-unused-vars
       center, // eslint-disable-line @typescript-eslint/no-unused-vars
       disabled, // eslint-disable-line @typescript-eslint/no-unused-vars
+      rippleEnabled, // eslint-disable-line @typescript-eslint/no-unused-vars
       style, // eslint-disable-line @typescript-eslint/no-unused-vars
       ...otherProps
     } = props;

package/src/Ripple/useRippleSurface.ts

@@ -7,11 +7,12 @@ import { wrapEvent } from '@basic-ui/core';
 import { SxStyleProp } from '../Box';
 
 export interface UseRippleSurfaceOptions<T extends HTMLElement> {
-  baseOpacity?: string | number;
-  hoverOpacity?: string | number;
-  focusOpacity?: string | number;
-  pressedOpacity?: string | number;
+  baseOpacity?: number;
+  hoverOpacity?: number;
+  focusOpacity?: number;
+  pressedOpacity?: number;
   rippleColor?: string;
+  rippleEnabled?: boolean;
   center?: boolean;
   disabled?: boolean;
   style?: CSSProperties;
@@ -35,6 +36,7 @@ export function useRippleSurface<T extends HTMLElement>(
     onPointerDown,
     style = {},
     disabled,
+    rippleEnabled = true,
     ...rippleProps
   } = opts;
 
@@ -84,18 +86,40 @@ export function useRippleSurface<T extends HTMLElement>(
     '&:hover::before': {
       opacity: hoverOpacity,
     },
-    '&:focus::before': {
+    '&:focus-visible::before': {
       opacity: focusOpacity,
     },
+    ...(!rippleEnabled && {
+      '&:active::before': {
+        opacity: pressedOpacity,
+      },
+    }),
+    '&[aria-pressed="true"]::before': {
+      opacity: baseOpacity + pressedOpacity,
+    },
+    '&[aria-pressed="true"]:hover::before': {
+      opacity: pressedOpacity + hoverOpacity,
+    },
+    '&[aria-pressed="true"]:focus-visible::before': {
+      opacity: pressedOpacity + focusOpacity,
+    },
+    ...(!rippleEnabled && {
+      '&[aria-pressed="true"]:active::before': {
+        opacity: pressedOpacity + pressedOpacity,
+      },
+    }),
     ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +
-    '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,&[data-disabled]:active::before']: {
+    '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +
+    '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before']: {
       opacity: 0,
     },
     '&:disabled,&[data-disabled]': {
       cursor: 'default',
     },
     // ripple
-    '&::after': { ...rippleStyle({ animation }) },
+    ...(rippleEnabled && {
+      '&::after': { ...rippleStyle({ animation }) },
+    }),
   };
 
   return {

package/src/Select/PaymentMethodSelect.story.tsx

@@ -0,0 +1,321 @@
+import { Box, Select, SelectItem, SelectProps } from '../';
+import { forwardRef, useState } from 'react';
+import type { ReactElement, ComponentType } from 'react';
+
+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}
+    />
+  );
+};

package/src/Select/Select.story.tsx

@@ -1,11 +1,27 @@
 import { useState } from 'react';
 import { Select } from './';
 import { SelectItem } from '../SelectItem';
-import { storiesOf } from '@storybook/react';
 import { Box } from '../Box';
 import { CheckBox } from '../CheckBox';
 // import './styles.css';
 
+export default {
+  title: 'components/Select',
+};
+
+const SearchIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={24}
+    width={24}
+    viewBox="0 0 48 48"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z" />
+  </svg>
+);
+
 const Example = ({ variant, native = false }) => {
   const [error, setError] = useState<boolean | string>(false);
   const [color, setColor] = useState<'primary' | 'secondary'>('primary');
@@ -183,7 +199,19 @@ const Example = ({ variant, native = false }) => {
             label=""
             helperText="Helper text"
             children={children}
-            leadingIcon={'O'}
+            leadingIcon={<SearchIcon />}
+          />
+        </Box>
+        <Box mb={3} width={230}>
+          <Select
+            error={error}
+            color={color}
+            native={native}
+            variant={variant}
+            label="Standard"
+            helperText="Helper text"
+            children={children}
+            leadingIcon={<SearchIcon />}
           />
         </Box>
       </Box>
@@ -191,9 +219,7 @@ const Example = ({ variant, native = false }) => {
   );
 };
 
-const stories = storiesOf('Components/Select', module);
-
-stories.add('filled', () => <Example variant="filled" />);
-stories.add('outlined', () => <Example variant="outlined" />);
-stories.add('filled, native', () => <Example variant="filled" native />);
-stories.add('outlined, native', () => <Example variant="outlined" native />);
+export const Filled = () => <Example variant="filled" />;
+export const Outlined = () => <Example variant="outlined" />;
+export const FilledNative = () => <Example variant="filled" native />;
+export const OutlinedNative = () => <Example variant="outlined" native />;