@basic-ui/material 0.1.15 → 0.1.16

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

@@ -9,6 +9,19 @@ 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');
@@ -186,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>

package/src/Select/Select.tsx

@@ -1,12 +1,4 @@
-import {
-  forwardRef,
-  useState,
-  useRef,
-  ForwardRefExoticComponent,
-  RefAttributes,
-  useEffect,
-  useId,
-} from 'react';
+import { forwardRef, useState, useRef, useEffect, useId } from 'react';
 
 import type * as React from 'react';
 import {
@@ -15,11 +7,7 @@ import {
   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),

package/src/Select/styledComponents.tsx

@@ -26,17 +26,21 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
 const SelectButtonInner = forwardRef<
   HTMLButtonElement,
   SelectProps & { innerAs?: React.ElementType<any> }
->(({ innerAs = 'button', ...props }, forwardedRef) => {
+>(({ innerAs = 'div', ...props }, forwardedRef) => {
   const InputButton: React.FC<
     SelectProps & React.RefAttributes<HTMLButtonElement>
   > = Input as any;
 
-  return <InputButton as={innerAs} ref={forwardedRef} {...props} />;
+  return (
+    <InputButton as={innerAs} ref={forwardedRef} tabIndex={0} {...props} />
+  );
 });
 
 export const SelectButton = forwardRef<
   HTMLButtonElement,
   SelectProps & MenuButtonProps
->(({ as, ...props }, ref) => (
-  <BaseMenuButton as={SelectButtonInner} innerAs={as} ref={ref} {...props} />
+>(({ as, children, ...props }, ref) => (
+  <BaseMenuButton as={SelectButtonInner} innerAs={as} ref={ref} {...props}>
+    {children}
+  </BaseMenuButton>
 ));

package/src/TextField/FilledContainer.tsx

@@ -7,6 +7,11 @@ import { LineRipple } from '../LineRipple';
 import { rem } from 'polished';
 import { alpha } from '../color';
 import { Box, BoxProps } from '../Box';
+import {
+  ICON_WIDTH,
+  PADDING_LEFT_WITHOUT_ICON,
+  PADDING_LEFT_WITH_ICON,
+} from './consts';
 
 const makeSelector = (
   state:
@@ -99,7 +104,8 @@ export const FilledContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
       ...otherProps
     } = props;
 
-    const labelHeight = 18;
+    const finalLabelHeight = 16;
+    const labelHeight = finalLabelHeight / 0.75;
     const inputHeight = 56;
 
     const color = error ? 'error' : colorProp;
@@ -112,6 +118,7 @@ export const FilledContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
         active={active || error}
         __css={{
           position: 'relative',
+          lineHeight: 0,
           width: '100%',
           backgroundColor: 'surface',
           overflow: 'hidden',
@@ -126,11 +133,21 @@ export const FilledContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
       >
         {label && (
           <FloatingLabel
-            height={labelHeight}
-            top={(inputHeight - labelHeight) * 0.5}
-            offsetX={leadingIcon ? 48 : 16}
+            height={inputHeight}
+            offsetX={
+              leadingIcon
+                ? PADDING_LEFT_WITH_ICON +
+                  ICON_WIDTH +
+                  PADDING_LEFT_WITHOUT_ICON
+                : PADDING_LEFT_WITHOUT_ICON
+            }
             translateX={0}
-            translateY={-labelHeight * 0.75}
+            translateY={
+              // To debug, delete these lines one by one to see it doing its work
+              -(inputHeight * 0.5) + // Put it at the top, crossing middle label
+              labelHeight * 0.75 * 0.5 + // Put it at position 0
+              8 // Add a 8px padding to the top
+            }
             active={labelIsFloating}
             htmlFor={inputId}
             color={active || error ? color : undefined}

package/src/TextField/IconContainer.tsx

@@ -1,10 +1,11 @@
 import { rem } from 'polished';
-import { VFC } from 'react';
+import { FC } from 'react';
 import type * as React from 'react';
 import { Box } from '../Box';
 import { alpha } from '../color';
+import { ICON_WIDTH, PADDING_LEFT_WITH_ICON } from './consts';
 
-export const IconContainer: VFC<{
+export const IconContainer: FC<{
   children?: React.ReactNode;
   position: 'start' | 'end';
 }> = ({ position, children }) => (
@@ -12,8 +13,8 @@ export const IconContainer: VFC<{
     position="absolute"
     __css={{
       top: 0,
-      [position === 'start' ? 'left' : 'right']: 3,
-      minWidth: rem(24),
+      [position === 'start' ? 'left' : 'right']: rem(PADDING_LEFT_WITH_ICON),
+      minWidth: rem(ICON_WIDTH),
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',

package/src/TextField/Input.tsx

@@ -2,6 +2,13 @@ import { rem } from 'polished';
 import { InputHTMLAttributes, forwardRef } from 'react';
 import { Box, BoxProps } from '../Box';
 import { alpha } from '../color';
+import {
+  ICON_WIDTH,
+  PADDING_LEFT_WITHOUT_ICON,
+  PADDING_LEFT_WITH_ICON,
+  PADDING_RIGHT_WITHOUT_ICON,
+  PADDING_RIGHT_WITH_ICON,
+} from './consts';
 
 export interface InputProps
   extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {
@@ -36,7 +43,6 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
       {...otherProps}
       __css={{
         WebkitTapHighlightColor: 'transparent',
-        boxSizing: 'border-box',
         appearance: 'none',
         outline: 'none',
         width: '100%',
@@ -50,6 +56,14 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
         color: alpha('on.surface', 0.87),
         letterSpacing: rem(0.5),
         textAlign: 'left',
+        display: 'flex',
+        alignItems: 'center',
+        ...(!multiline && {
+          lineHeight: 1,
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+        }),
         '::placeholder': {
           opacity: 0,
           color: alpha('on.surface', 0.54),
@@ -64,7 +78,7 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
         ':disabled': {
           cursor: 'default',
         },
-        'select&,button&': {
+        'select&,[role="button"]&': {
           cursor: 'pointer',
         },
         'select&': {
@@ -73,20 +87,26 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
             color: 'on.surface',
           },
         },
-        paddingLeft: leadingIcon ? rem(18 + 30) : rem(16),
-        paddingRight: trailingIcon ? rem(18 + 30) : rem(16),
+        paddingLeft: leadingIcon
+          ? rem(PADDING_LEFT_WITH_ICON + ICON_WIDTH + PADDING_LEFT_WITHOUT_ICON)
+          : rem(PADDING_LEFT_WITHOUT_ICON),
+        paddingRight: trailingIcon
+          ? rem(
+              PADDING_RIGHT_WITH_ICON + ICON_WIDTH + PADDING_RIGHT_WITHOUT_ICON
+            )
+          : rem(PADDING_RIGHT_WITHOUT_ICON),
         ...(variant === 'outlined' && {
-          paddingTop: hasLabel ? rem(12) : rem(12),
-          paddingBottom: hasLabel ? rem(14) : rem(12),
+          paddingTop: rem(16),
+          paddingBottom: rem(16),
         }),
         ...(variant === 'filled' && {
-          paddingTop: hasLabel ? rem(20) : rem(12),
-          paddingBottom: hasLabel ? rem(6) : rem(12),
+          paddingTop: hasLabel ? rem(24) : rem(16),
+          paddingBottom: hasLabel ? rem(8) : rem(16),
         }),
         ...(multiline && {
           resize: 'vertical',
           paddingTop: 0,
-          marginTop: variant === 'outlined' || !hasLabel ? rem(12) : rem(20),
+          marginTop: variant === 'outlined' || !hasLabel ? rem(18) : rem(26),
         }),
         ...__css,
       }}