@basic-ui/material 0.1.13 → 0.1.16

package/src/Menu/Menu.tsx

@@ -42,6 +42,7 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
         minWidth: rem(112),
         maxWidth: rem(280),
         maxHeight: rem(300),
+        borderRadius: 'default',
         overflowY: 'auto',
         '[data-popper-placement="top"] &': {
           transformOrigin: 'bottom center',

package/src/NotchedOutline/NotchedOutline.story.tsx

@@ -1,11 +1,14 @@
 import {} from './';
-import { storiesOf } from '@storybook/react';
 import { NotchedOutline } from './NotchedOutline';
 import { Box } from '../Box';
 import { FloatingLabel } from '../FloatingLabel';
 import { rem } from 'polished';
 // import './styles.css';
 
+export default {
+  title: 'helper components/NotchedOutline',
+};
+
 const Example = () => {
   const labelWidth = 68.27;
 
@@ -92,6 +95,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Helper Components/NotchedOutline', module);
-
-stories.add('controlled', () => <Example />);
+export const Controlled = () => <Example />;

package/src/NotchedOutline/styledComponents.ts

@@ -15,7 +15,7 @@ const makeSelector = (
 ) =>
   `input:${state} ~ & [data-notch-outline-item],` +
   `select:${state} ~ & [data-notch-outline-item],` +
-  `button:${state} ~ & [data-notch-outline-item],` +
+  `[role="button"]:${state} ~ & [data-notch-outline-item],` +
   `textarea:${state} ~ & [data-notch-outline-item]`;
 
 export const InnerContainer = styled('div', {

package/src/Paper/Paper.story.tsx

@@ -1,9 +1,12 @@
 import { useState } from 'react';
 import { Paper } from './';
-import { storiesOf } from '@storybook/react';
 import { Text } from '../Text';
 import { Box } from '../Box';
 
+export default {
+  title: 'components/Paper',
+};
+
 const Example = ({}) => {
   const [elevation, setElevation] = useState(0);
 
@@ -30,6 +33,4 @@ const Example = ({}) => {
   );
 };
 
-const stories = storiesOf('Components/Paper', module);
-
-stories.add('paper', () => <Example />);
+export const Default = () => <Example />;

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/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>();
@@ -66,6 +69,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Helper Components/Ripple', module);
-
-stories.add('controlled', () => <Example />);
+export const Controlled = () => <Example />;

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 />;

package/src/Select/Select.tsx

@@ -1,25 +1,13 @@
-import {
-  forwardRef,
-  useState,
-  useRef,
-  ForwardRefExoticComponent,
-  RefAttributes,
-  useEffect,
-} from 'react';
+import { forwardRef, useState, useRef, useEffect, useId } from 'react';
 
 import type * as React from 'react';
 import {
   wrapEvent,
-  useId,
   assignMultipleRefs,
   useControlledState,
 } from '@basic-ui/core';
 import { useTheme, Theme } from '../theme';
-import {
-  Select as SelectComp,
-  SelectButton,
-  SelectProps as BaseSelectProps,
-} from './styledComponents';
+import { Select as SelectComp, SelectButton } from './styledComponents';
 import { FilledContainer } from '../TextField/FilledContainer';
 import { HelperText } from '../TextField/HelperText';
 import { OutlinedContainer } from '../TextField/OutlinedContainer';
@@ -27,7 +15,7 @@ import { SelectProvider } from './context';
 import { Menu, MenuPopover, MenuList } from '../Menu';
 import { SelectIcon } from './SelectIcon';
 import { makeDefaultRender } from './defaultRender';
-import { Box } from '../Box';
+import { Box, BoxProps } from '../Box';
 import { IconContainer } from '../TextField/IconContainer';
 
 const componentMap = {
@@ -37,7 +25,7 @@ const componentMap = {
 
 export interface SelectProps
   extends Omit<
-    React.SelectHTMLAttributes<HTMLSelectElement>,
+    BoxProps<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement>>,
     'value' | 'defaultValue' | 'onChange'
   > {
   variant?: 'outlined' | 'filled';
@@ -108,7 +96,10 @@ export const Select = forwardRef<
 
   const handleOnChange = (e: any) => {
     onChange &&
-      onChange(e as any, native ? e.target.value : e.target.dataset.value);
+      onChange(
+        e as any,
+        native ? e.target.value : e.currentTarget.dataset.value
+      );
   };
 
   const hasError = Boolean(error);
@@ -122,9 +113,9 @@ export const Select = forwardRef<
 
   const labelIsFloating = hasFocus || open || renderValue(value) !== undefined;
 
-  const Comp: ForwardRefExoticComponent<
-    BaseSelectProps & RefAttributes<HTMLSelectElement | HTMLButtonElement>
-  > = native ? SelectComp : (SelectButton as any);
+  const Comp: React.ComponentType<any> = native
+    ? (SelectComp as any)
+    : (SelectButton as any);
 
   useEffect(() => {
     // right after mounting, if the default value in the select element
@@ -170,6 +161,7 @@ export const Select = forwardRef<
               aria-describedby={helperTextId}
               hasLabel={!!label}
               leadingIcon={Boolean(leadingIcon)}
+              trailingIcon={true}
               {...otherProps}
             >
               {native ? children : renderValue(value)}
@@ -182,20 +174,6 @@ export const Select = forwardRef<
                     minWidth: buttonRef?.current?.offsetWidth,
                   }}
                   role="listbox"
-                  __css={
-                    variant === 'filled'
-                      ? {
-                          "[data-popper-placement='top'] &": {
-                            borderBottomLeftRadius: 0,
-                            borderBottomRightRadius: 0,
-                          },
-                          "[data-popper-placement='bottom'] &": {
-                            borderTopLeftRadius: 0,
-                            borderTopRightRadius: 0,
-                          },
-                        }
-                      : {}
-                  }
                 >
                   {children}
                 </MenuList>

package/src/Select/SelectIcon.tsx

@@ -3,6 +3,7 @@ import type * as React from 'react';
 import { Box, BoxProps } from '../Box';
 import { rem } from 'polished';
 import { alpha } from '../color';
+import { PADDING_RIGHT_WITH_ICON } from '../TextField/consts';
 
 export type SelectIconProps = BoxProps<
   SVGElement,
@@ -22,7 +23,7 @@ export const SelectIcon = forwardRef<SVGElement, SelectIconProps>(
         __css={{
           position: 'absolute',
           top: `calc(50% - ${rem(12)})`,
-          right: rem(7),
+          right: rem(PADDING_RIGHT_WITH_ICON),
           width: rem(24),
           height: rem(24),
           color: open ? 'primary' : alpha('on.surface', 0.54),