Text field and select

import { TextField } from '@orbex/sonar-components/field'
import type { ComponentProps } from 'react'
import searchSymbol from '@material-symbols/svg-400/rounded/search.svg?raw'

/* Material Symbols Rounded, weight 400, as icon components (Foundations › Icons) */
const symbol = (svg: string) => {
  const path = svg.match(/ d="([^"]+)"/)?.[1]
  return (props: ComponentProps<'svg'>) => (
    <svg viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" {...props}>
      <path d={path} />
    </svg>
  )
}

const SearchIcon = symbol(searchSymbol)

export default function TextFields() {
  return (
    <>
      <TextField label="Product" placeholder="Name or code" />
      <TextField label="Quantity" type="number" inputMode="numeric" defaultValue="40" description="In pallets. Up to 120 per order." />
      <TextField label="Delivery date" defaultValue="May 3" error="Choose a date from May 12 on: earlier days are closed." />
      <TextField label="Search orders" type="search" icon={<SearchIcon />} placeholder="Order, product or carrier" />
      <TextField label="Account" defaultValue="Northwind Foods" disabled />
    </>
  )
}

import { SelectField } from '@orbex/sonar-components/field'

export default function Select() {
  return (
    <>
      <SelectField label="Warehouse" defaultValue="north">
        <option value="north">North · Valencia</option>
        <option value="south">South · Seville</option>
        <option value="central">Central · Madrid</option>
      </SelectField>
      <SelectField label="Carrier" size="small" defaultValue="">
        <option value="" disabled>
          Choose a carrier
        </option>
        <option>Iberia Freight</option>
        <option>Atlas Logistics</option>
      </SelectField>
    </>
  )
}