Merged in refactor/design-system-input-label (pull request #2326)

refactor: move input and label to design system

Approved-by: Arvid Norlin

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/Filter/index.tsx

@@ -2,7 +2,7 @@
 
 import { useIntl } from "react-intl"
 
-import Select from "@/components/TempDesignSystem/Select"
+import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
 
 import styles from "./filter.module.css"
 
@@ -30,7 +30,7 @@ export default function Filter({
 
   return (
     <form className={styles.filterForm}>
-      <Select
+      <DeprecatedSelect
         items={countryFilters}
         defaultSelectedKey={""}
         label={intl.formatMessage({
@@ -42,7 +42,7 @@ export default function Filter({
         name="country"
         onSelect={(value) => onFilterChange(JobylonFilterKey.country, value)}
       />
-      <Select
+      <DeprecatedSelect
         items={cityFilters}
         defaultSelectedKey={""}
         label={intl.formatMessage({
@@ -54,7 +54,7 @@ export default function Filter({
         name="city"
         onSelect={(value) => onFilterChange(JobylonFilterKey.city, value)}
       />
-      <Select
+      <DeprecatedSelect
         items={departmentFilters}
         defaultSelectedKey={""}
         label={intl.formatMessage({
@@ -66,7 +66,7 @@ export default function Filter({
         name="department"
         onSelect={(value) => onFilterChange(JobylonFilterKey.department, value)}
       />
-      <Select
+      <DeprecatedSelect
         items={categoryFilters}
         defaultSelectedKey={""}
         label={intl.formatMessage({

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/Client.tsx

@@ -9,7 +9,7 @@ import {
 } from "@/constants/membershipLevels"
 
 import MembershipLevelIcon from "@/components/Levels/Icon"
-import Select from "@/components/TempDesignSystem/Select"
+import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
 
 import LargeTable from "./LargeTable"
 import LevelSummary from "./LevelSummary"
@@ -98,7 +98,7 @@ export default function OverviewTableClient({
           }
           showDescription={false}
         />
-        <Select
+        <DeprecatedSelect
           aria-label={intl.formatMessage({
             defaultMessage: "Level",
           })}
@@ -137,7 +137,7 @@ export default function OverviewTableClient({
         return null
     }
     return (
-      <Select
+      <DeprecatedSelect
         aria-label={intl.formatMessage({
           defaultMessage: "Level",
         })}

apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsFormClient.tsx

@@ -16,13 +16,13 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Input } from "@scandic-hotels/design-system/Input"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { SAS_TRANSFER_POINT_KEY } from "@/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/sasUtils"
 import Image from "@/components/Image"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
-import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
 
 import styles from "./transferPoints.module.css"
 
@@ -86,7 +86,7 @@ export function TransferPointsFormClient({
       </I18nProvider>
       <div className={styles.inputsWrapper}>
         <TextField type="number" isDisabled={disabled}>
-          <AriaInputWithLabel
+          <Input
             label={intl.formatMessage({
               defaultMessage: "EB points to transfer",
             })}

apps/scandic-web/components/DestinationFilterAndSort/Sort/index.tsx

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
 
-import Select from "@/components/TempDesignSystem/Select"
+import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
 
 import type { SortItem } from "@/types/components/destinationFilterAndSort"
 import type { SortOption } from "@/types/enums/destinationFilterAndSort"
@@ -21,7 +21,7 @@ export default function Sort({ sortItems }: SortProps) {
   }))
 
   return (
-    <Select
+    <DeprecatedSelect
       items={sortItems}
       defaultSelectedKey={pendingSort}
       label={intl.formatMessage({

apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx

@@ -5,7 +5,7 @@ import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
-import Select from "@/components/TempDesignSystem/Select"
+import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import styles from "./child-selector.module.css"
@@ -100,7 +100,7 @@ export default function ChildInfoSelector({
     <>
       <div key={index} className={styles.childInfoContainer}>
         <div>
-          <Select
+          <DeprecatedSelect
             required={true}
             items={ageList}
             label={ageLabel}
@@ -116,7 +116,7 @@ export default function ChildInfoSelector({
         </div>
         <div>
           {child.age >= 0 ? (
-            <Select
+            <DeprecatedSelect
               items={getAvailableBeds(child.age)}
               label={bedLabel}
               aria-label={bedLabel}

apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/index.tsx

@@ -19,7 +19,7 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { useHotelFilterStore } from "@/stores/hotel-filters"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Select from "@/components/TempDesignSystem/Select"
+import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useInitializeFiltersFromUrl from "@/hooks/useInitializeFiltersFromUrl"
@@ -167,7 +167,7 @@ export default function FilterAndSortModal({
                     </Subtitle>
                   </header>
                   <div className={styles.sorter}>
-                    <Select
+                    <DeprecatedSelect
                       items={sortItems}
                       defaultSelectedKey={
                         searchParams.get("sort") ?? DEFAULT_SORT

apps/scandic-web/components/HotelReservation/SelectHotel/HotelSorter/index.tsx

@@ -4,7 +4,7 @@ import { usePathname, useSearchParams } from "next/navigation"
 import { useCallback } from "react"
 import { useIntl } from "react-intl"
 
-import Select from "@/components/TempDesignSystem/Select"
+import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
 import { trackEvent } from "@/utils/tracking/base"
 
 import {
@@ -71,7 +71,7 @@ export default function HotelSorter({ discreet }: HotelSorterProps) {
   ]
 
   return (
-    <Select
+    <DeprecatedSelect
       items={sortItems}
       defaultSelectedKey={searchParams.get("sort") ?? DEFAULT_SORT}
       label={intl.formatMessage({

apps/scandic-web/components/TempDesignSystem/DeprecatedSelect/index.tsx

@@ -10,7 +10,8 @@ import {
   SelectValue,
 } from "react-aria-components"
 
-import Label from "@/components/TempDesignSystem/Form/Label"
+import { Label } from "@scandic-hotels/design-system/Label"
+
 import Body from "@/components/TempDesignSystem/Text/Body"
 import useSetOverflowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"
 

apps/scandic-web/components/TempDesignSystem/DeprecatedSelect/select.module.css

@@ -123,20 +123,3 @@
 .listBoxItem[data-selected="true"].showRadioButton:before {
   box-shadow: inset 0 0 0 8px var(--Surface-UI-Fill-Active);
 }
-
-/* Use global react aria classnames here since setting a css modules classname overrides
-   the class set by react aria.We use that class to style the child label component. */
-.select:not(.discreet) :global(.react-aria-SelectValue) {
-  display: grid;
-  transition: height 200ms ease;
-}
-
-.input :global(.react-aria-SelectValue) {
-  height: 18px;
-  overflow: hidden;
-}
-
-.input :global(.react-aria-SelectValue):has(:nth-child(2)) {
-  height: 38px;
-  overflow: visible;
-}

apps/scandic-web/components/TempDesignSystem/Form/Country/country.module.css

@@ -3,6 +3,7 @@
   border: 1px solid var(--Border-Interactive-Default);
   border-radius: var(--Corner-radius-md);
   position: relative;
+  height: 56px;
 
   &[data-required] .label::after {
     content: " *";
@@ -15,7 +16,8 @@
   }
 
   &[data-focused] {
-    border-color: var(--Border-Interactive-Focus);
+    outline-offset: -2px;
+    outline: 2px solid var(--Border-Interactive-Focus);
 
     .button,
     .input {
@@ -54,9 +56,9 @@
   box-sizing: border-box;
   display: flex;
   gap: var(--Space-x1);
-  height: 56px;
   padding: var(--Space-x15);
   width: 100%;
+  height: 100%;
 }
 
 .displayText {

apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css

@@ -1,55 +0,0 @@
-.container {
-  align-content: center;
-  background-color: var(--Surface-Primary-Default);
-  border-color: var(--Border-Interactive-Default);
-  border-style: solid;
-  border-width: 1px;
-  border-radius: var(--Corner-radius-md);
-  display: grid;
-  min-width: 0; /* allow shrinkage */
-  height: 60px;
-  padding: var(--Space-x1) var(--Space-x2);
-  transition: border-color 200ms ease;
-}
-
-.container:has(.input:focus) {
-  border-color: var(--Border-Interactive-Focus);
-}
-
-.container:has(.input:disabled) {
-  background-color: var(--Surface-Primary-Disabled);
-  border: none;
-  color: var(--Text-Interactive-Disabled);
-}
-
-.container:has(.input[data-invalid="true"], .input[aria-invalid="true"]) {
-  border-color: var(--Border-Interactive-Error);
-
-  &:focus-within {
-    outline-offset: -2px;
-    outline: 2px solid var(--Border-Interactive-Error);
-  }
-}
-
-.input {
-  background: none;
-  border: none;
-  color: var(--Text-Default);
-  height: 1px;
-  margin: 0;
-  order: 2;
-  overflow: visible;
-  padding: 0;
-  transition: height 150ms ease;
-}
-
-.input:focus,
-.input:placeholder-shown,
-.input[value]:not([value=""]) {
-  height: 18px;
-  outline: none;
-}
-
-.input:disabled {
-  color: var(--Text-Interactive-Disabled);
-}

apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.ts

@@ -1,4 +0,0 @@
-export interface AriaInputWithLabelProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  label: string
-}

apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx

@@ -6,8 +6,8 @@ import { Controller, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Input as InputWithLabel } from "@scandic-hotels/design-system/Input"
 
-import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import { getErrorMessage } from "./errors"
@@ -63,7 +63,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
           validationBehavior="aria"
           value={field.value}
         >
-          <AriaInputWithLabel
+          <InputWithLabel
             {...field}
             ref={ref}
             aria-labelledby={field.name}

apps/scandic-web/components/TempDesignSystem/Form/Label/index.tsx

@@ -1,18 +0,0 @@
-import { labelVariants } from "./variants"
-
-import type { LabelProps } from "./label"
-
-export default function Label({
-  children,
-  className,
-  required,
-  size,
-}: LabelProps) {
-  const classNames = labelVariants({
-    className,
-    size,
-    required,
-  })
-
-  return <span className={classNames}>{children}</span>
-}

apps/scandic-web/components/TempDesignSystem/Form/Label/label.module.css

@@ -1,57 +0,0 @@
-.label {
-  color: var(--Text-Interactive-Placeholder);
-  font-family: "fira sans";
-  font-weight: 400;
-  letter-spacing: 0.03px;
-  line-height: 120%;
-  text-align: left;
-  transition: font-size 100ms ease;
-  user-select: none;
-}
-
-span.small {
-  display: block;
-  font-size: 12px;
-}
-
-span.regular {
-  font-size: 16px;
-  order: 1;
-}
-
-span.discreet {
-  color: var(--Text-Interactive-Default);
-  font-weight: 500;
-  order: unset;
-}
-
-span.required:after {
-  content: " *";
-}
-
-/* Handle input and textarea fields */
-input:focus ~ .label,
-input:placeholder-shown ~ .label,
-input[value]:not([value=""]) ~ .label,
-textarea:focus ~ .label textarea:placeholder-shown ~ .label,
-textarea[value]:not([value=""]) ~ .label {
-  font-size: 12px;
-  margin-bottom: var(--Space-x05);
-}
-
-input:disabled ~ .label,
-textarea:disabled ~ .label,
-:global(.select-container)[data-disabled] .label {
-  color: var(--Text-Interactive-Disabled);
-}
-
-/* Handle select fields */
-:global(.select-button) .label {
-  order: unset;
-}
-
-:global(.select-container)[data-open="true"] .label:not(.discreet),
-:global(.react-aria-SelectValue):has(:nth-child(2)) .label:not(.discreet) {
-  font-size: 12px;
-  margin-bottom: var(--Space-x05);
-}

apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx

@@ -6,9 +6,9 @@ import { Controller, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Input } from "@scandic-hotels/design-system/Input"
 
 import Button from "@/components/TempDesignSystem/Button"
-import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { passwordValidators } from "@/utils/zod/passwordValidator"
 
@@ -62,7 +62,7 @@ export default function PasswordInput({
             }
           >
             <div className={styles.inputWrapper}>
-              <AriaInputWithLabel
+              <Input
                 {...field}
                 aria-labelledby={field.name}
                 id={field.name}

apps/scandic-web/components/TempDesignSystem/Form/Phone/index.tsx

@@ -12,12 +12,12 @@ import {
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Input } from "@scandic-hotels/design-system/Input"
+import { Label } from "@scandic-hotels/design-system/Label"
 
 import { getDefaultCountryFromLang } from "@/constants/languages"
 
 import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
-import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
-import Label from "@/components/TempDesignSystem/Form/Label"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import useLang from "@/hooks/useLang"
 
@@ -114,7 +114,7 @@ export default function Phone({
         type="tel"
         value={phoneNumber}
       >
-        <AriaInputWithLabel
+        <Input
           {...register(name, registerOptions)}
           autoComplete="tel-national"
           label={label}

apps/scandic-web/components/TempDesignSystem/Form/Phone/phone.module.css

@@ -61,17 +61,22 @@
 .select {
   align-content: center;
   background-color: var(--Main-Grey-White);
-  border-color: var(--Scandic-Beige-40);
+  border-color: var(--Border-Interactive-Default);
   border-style: solid;
   border-width: 1px;
   border-radius: var(--Corner-radius-md);
   display: grid;
   gap: var(--Space-x05);
   grid-template-rows: auto auto;
-  height: 60px;
+  height: 56px;
-  padding: var(--Space-x1) var(--Space-x2);
+  padding: var(--Space-x15);
   transition: border-color 200ms ease;
   width: 100%;
+
+  &:focus {
+    outline-offset: -2px;
+    outline: 2px solid var(--Border-Interactive-Focus);
+  }
 }
 
 .select[aria-expanded="true"] .chevron {

apps/scandic-web/components/TempDesignSystem/Form/Select/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { useController, useFormContext } from "react-hook-form"
 
-import ReactAriaSelect from "@/components/TempDesignSystem/Select"
+import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
 
 import type { SelectProps } from "./select"
 
@@ -22,7 +22,7 @@ export default function Select({
   })
 
   return (
-    <ReactAriaSelect
+    <DeprecatedSelect
       className={className}
       defaultSelectedKey={field.value}
       disabled={disabled || field.disabled}

apps/scandic-web/components/TempDesignSystem/Form/Select/select.ts

@@ -1,6 +1,6 @@
 import type { RegisterOptions } from "react-hook-form"
 
-import type { SelectProps as ReactAriaSelectProps } from "@/components/TempDesignSystem/Select/select"
+import type { SelectProps as ReactAriaSelectProps } from "@/components/TempDesignSystem/DeprecatedSelect/select"
 
 export interface SelectProps
   extends Omit<

apps/scandic-web/components/TempDesignSystem/Form/TextArea/index.tsx

@@ -9,8 +9,8 @@ import {
 import { Controller, useFormContext } from "react-hook-form"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Label } from "@scandic-hotels/design-system/Label"
 
-import Label from "@/components/TempDesignSystem/Form/Label"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import Body from "../../Text/Body"

packages/design-system/lib/components/Input/Input.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Input } from './Input'
+import { TextField } from 'react-aria-components'
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: ({ isInvalid, ...props }) => (
+    <TextField isInvalid={isInvalid}>
+      <Input {...props} />
+    </TextField>
+  ),
+  argTypes: {},
+}
+
+export default meta
+
+type Story = StoryObj<typeof Input>
+
+export const Default: Story = {
+  args: {
+    label: 'Label',
+    name: 'foo',
+    required: false,
+  },
+}
+
+export const Filled: Story = {
+  args: {
+    label: 'Label',
+    name: 'foo',
+    value: 'Value',
+  },
+}
+
+export const Error: Story = {
+  args: {
+    label: 'Label',
+    name: 'foo',
+    // @ts-expect-error Input does not support this, but wrapping <TextField> does
+    isInvalid: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    label: 'Label',
+    name: 'foo',
+    disabled: true,
+  },
+}
+
+export const DisabledFilled: Story = {
+  args: {
+    label: 'Label',
+    name: 'foo',
+    disabled: true,
+    value: 'Value',
+  },
+}

packages/design-system/lib/components/Input/Input.tsx

@@ -1,22 +1,22 @@
-import { cx } from "class-variance-authority"
+import { cx } from 'class-variance-authority'
 import {
   type ForwardedRef,
   forwardRef,
   useId,
   useImperativeHandle,
   useRef,
-} from "react"
+} from 'react'
-import { Input as AriaInput, Label as AriaLabel } from "react-aria-components"
+import { Input as AriaInput, Label as AriaLabel } from 'react-aria-components'
 
-import Label from "@/components/TempDesignSystem/Form/Label"
+import { Label } from '../Label'
-import Body from "@/components/TempDesignSystem/Text/Body"
 
-import styles from "./input.module.css"
+import styles from './input.module.css'
 
-import type { AriaInputWithLabelProps } from "./input"
+import type { InputProps } from './types'
+import { Typography } from '../Typography'
 
-const AriaInputWithLabel = forwardRef(function AriaInputWithLabelComponent(
+export const Input = forwardRef(function AriaInputWithLabelComponent(
-  { label, ...props }: AriaInputWithLabelProps,
+  { label, ...props }: InputProps,
   forwardedRef: ForwardedRef<HTMLInputElement>
 ) {
   const ref = useRef<HTMLInputElement>(null)
@@ -31,17 +31,16 @@ const AriaInputWithLabel = forwardRef(function AriaInputWithLabelComponent(
 
   return (
     <AriaLabel className={styles.container}>
-      <Body asChild fontOnly>
+      <Typography variant="Body/Paragraph/mdRegular">
         <AriaInput
           {...props}
+          placeholder={props.placeholder}
           className={cx(styles.input, props.className)}
           ref={ref}
           id={inputId}
         />
-      </Body>
+      </Typography>
       <Label required={props.required}>{label}</Label>
     </AriaLabel>
   )
 })
-
-export default AriaInputWithLabel

packages/design-system/lib/components/Input/index.ts

@@ -0,0 +1 @@
+export { Input } from './Input'

packages/design-system/lib/components/Input/input.module.css

@@ -0,0 +1,60 @@
+.container {
+  align-content: center;
+  background-color: var(--Surface-Primary-Default);
+  border: 1px solid var(--Border-Interactive-Default);
+  border-radius: var(--Corner-radius-md);
+  display: grid;
+  min-width: 0; /* allow shrinkage */
+  height: 56px;
+  padding: var(--Space-x15);
+  box-sizing: border-box;
+  cursor: text;
+
+  &:has(.input:focus) {
+    outline-offset: -2px;
+    outline: 2px solid var(--Border-Interactive-Focus);
+  }
+
+  &:has(.input:disabled) {
+    background-color: var(--Surface-Primary-Disabled);
+    border: transparent;
+    cursor: unset;
+  }
+
+  &:has(.input[data-invalid='true'], .input[aria-invalid='true']) {
+    border-color: var(--Border-Interactive-Error);
+
+    &:focus-within {
+      outline-offset: -2px;
+      outline: 2px solid var(--Border-Interactive-Error);
+    }
+  }
+}
+
+.input {
+  background: none;
+  border: none;
+  color: var(--Text-Default);
+  height: 1px;
+  order: 2;
+  padding: 0;
+  transition: height 150ms ease;
+
+  &:focus,
+  &:placeholder-shown,
+  &[value]:not([value='']) {
+    height: 18px;
+    outline: none;
+  }
+
+  &:disabled {
+    color: var(--Text-Interactive-Disabled);
+  }
+}
+
+@media (hover: hover) {
+  .input:active:not(:disabled) {
+    height: 18px;
+    outline: none;
+  }
+}

packages/design-system/lib/components/Input/types.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from 'react'
+import { Input } from 'react-aria-components'
+
+export interface InputProps extends ComponentProps<typeof Input> {
+  label: string
+}

packages/design-system/lib/components/Label/Label.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Label } from './Label'
+
+const meta: Meta<typeof Label> = {
+  title: 'Components/Label',
+  component: Label,
+  argTypes: {},
+}
+
+export default meta
+
+type Story = StoryObj<typeof Label>
+
+export const Default: Story = {
+  args: {
+    children: 'Label',
+    required: false,
+  },
+}
+
+export const Discreet: Story = {
+  args: {
+    children: 'Label',
+    size: 'discreet',
+  },
+}
+
+export const Small: Story = {
+  args: {
+    children: 'Label',
+    size: 'small',
+  },
+}

packages/design-system/lib/components/Label/Label.tsx

@@ -0,0 +1,13 @@
+import { labelVariants } from './variants'
+
+import type { LabelProps } from './types'
+
+export function Label({ children, className, required, size }: LabelProps) {
+  const classNames = labelVariants({
+    className,
+    size,
+    required,
+  })
+
+  return <span className={classNames}>{children}</span>
+}

packages/design-system/lib/components/Label/index.ts

@@ -0,0 +1 @@
+export { Label } from './Label'

packages/design-system/lib/components/Label/label.module.css

@@ -0,0 +1,98 @@
+.label {
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
+  font-size: var(--Body-Paragraph-Size);
+  font-weight: var(--Body-Paragraph-Font-weight);
+  letter-spacing: var(--Body-Paragraph-Letter-spacing);
+  text-transform: unset;
+  line-height: 1.5;
+  text-decoration: none;
+
+  transition: font-size 100ms ease;
+  text-align: left;
+  color: var(--Text-Interactive-Placeholder);
+  user-select: none;
+}
+
+.small {
+  font-family: var(--Label-Font-family), var(--Label-Font-fallback);
+  font-size: var(--Label-Size);
+  font-weight: var(--Label-Font-weight);
+  letter-spacing: var(--Label-Letter-spacing);
+  text-transform: unset;
+  line-height: 1.5;
+  text-decoration: none;
+}
+
+.discreet {
+  font-family:
+    var(--Body-Supporting-text-Font-family),
+    var(--Body-Supporting-text-Font-fallback);
+  font-size: var(--Body-Supporting-text-Size);
+  font-weight: var(--Body-Supporting-text-Font-weight-2);
+  letter-spacing: var(--Body-Supporting-text-Letter-spacing);
+  text-transform: unset;
+  line-height: 1.4;
+  text-decoration: none;
+
+  color: var(--Text-Default);
+  order: unset;
+}
+
+.required:after {
+  content: ' *';
+}
+
+input:focus,
+input:placeholder-shown,
+input[value]:not([value='']),
+textarea:focus,
+textarea:placeholder-shown,
+textarea[value]:not([value='']) {
+  & ~ .label {
+    font-family: var(--Label-Font-family), var(--Label-Font-fallback);
+    font-size: var(--Label-Size);
+    font-weight: var(--Label-Font-weight);
+    letter-spacing: var(--Label-Letter-spacing);
+    text-transform: unset;
+    line-height: 1.5;
+    text-decoration: none;
+
+    margin-bottom: var(--Space-x05);
+  }
+}
+
+input:disabled,
+textarea:disabled {
+  & ~ .label {
+    color: var(--Text-Interactive-Disabled);
+  }
+}
+
+@media (hover: hover) {
+  input:active:not(:disabled) ~ .label {
+    font-family: var(--Label-Font-family), var(--Label-Font-fallback);
+    font-size: var(--Label-Size);
+    font-weight: var(--Label-Font-weight);
+    letter-spacing: var(--Label-Letter-spacing);
+    text-transform: unset;
+    line-height: 1.5;
+    text-decoration: none;
+
+    margin-bottom: var(--Space-x05);
+  }
+}
+
+/* Legacy selector for deprecated select component */
+:global(.select-container)[data-disabled] .label {
+  color: var(--Text-Interactive-Disabled);
+}
+
+:global(.select-button) .label {
+  order: unset;
+}
+
+:global(.select-container)[data-open='true'] .label:not(.discreet),
+:global(.react-aria-SelectValue):has(:nth-child(2)) .label:not(.discreet) {
+  font-size: 12px;
+}

packages/design-system/lib/components/Label/types.ts

@@ -1,6 +1,6 @@
-import type { VariantProps } from "class-variance-authority"
+import type { VariantProps } from 'class-variance-authority'
 
-import type { labelVariants } from "./variants"
+import type { labelVariants } from './variants'
 
 export interface LabelProps
   extends React.PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>,

packages/design-system/lib/components/Label/variants.ts

@@ -1,6 +1,6 @@
-import { cva } from "class-variance-authority"
+import { cva } from 'class-variance-authority'
 
-import styles from "./label.module.css"
+import styles from './label.module.css'
 
 export const labelVariants = cva(styles.label, {
   variants: {
@@ -11,11 +11,10 @@ export const labelVariants = cva(styles.label, {
     },
     required: {
       true: styles.required,
-      false: "",
     },
   },
   defaultVariants: {
-    size: "regular",
+    size: 'regular',
     required: false,
   },
 })

packages/design-system/lib/components/Select/select.module.css

@@ -3,6 +3,7 @@
   background-color: var(--Surface-UI-Fill-Default);
   border: 1px solid var(--Border-Interactive-Default);
   border-radius: var(--Corner-radius-md);
+  height: 56px;
 
   &[data-required] .label::after {
     content: ' *';
@@ -17,7 +18,8 @@
     }
   }
   &[data-focused] {
-    border-color: var(--Border-Interactive-Focus);
+    outline-offset: -2px;
+    outline: 2px solid var(--Border-Interactive-Focus);
 
     .button,
     .input {

packages/design-system/package.json

@@ -10,6 +10,8 @@
     "./ChipLink": "./dist/components/ChipLink/index.js",
     "./Chips": "./dist/components/Chips/index.js",
     "./Divider": "./dist/components/Divider/index.js",
+    "./Input": "./dist/components/Input/index.js",
+    "./Label": "./dist/components/Label/index.js",
     "./Select": "./dist/components/Select/index.js",
     "./Typography": "./dist/components/Typography/index.js",
     "./RegularRateCard": "./dist/components/RateCard/Regular/index.js",