ferns-ui 0.47.10 → 1.0.0

package/src/Common.ts

@@ -1,10 +1,64 @@
-import {SaveFormat} from "expo-image-manipulator";
-import React, {ReactElement, ReactNode, SyntheticEvent} from "react";
-import {ListRenderItemInfo, StyleProp, ViewStyle} from "react-native";
-import {DimensionValue, FlexStyle} from "react-native/Libraries/StyleSheet/StyleSheetTypes";
+import {CountryCode} from "libphonenumber-js";
+import React, {ReactElement, ReactNode} from "react";
+import {ListRenderItemInfo, StyleProp, TextStyle, ViewStyle} from "react-native";
+import {DimensionValue} from "react-native/Libraries/StyleSheet/StyleSheetTypes";
 import {Styles} from "react-native-google-places-autocomplete";
+import {SvgProps} from "react-native-svg";
 
-import {SelectListOptions} from "./SelectList";
+import {
+  FontAwesome6BrandNames,
+  FontAwesome6RegularNames,
+  FontAwesome6SolidNames,
+} from "./CommonIconTypes";
+
+export interface AccordionProps {
+  /**
+   * The content to be displayed inside the accordion.
+   */
+  children: React.ReactNode;
+
+  /**
+   * If true, an information modal will be included.
+   * @default false
+   */
+  includeInfoModal?: boolean;
+
+  /**
+   * The content of the information modal.
+   */
+  infoModalChildren?: ModalProps["children"];
+
+  /**
+   * The subtitle of the information modal.
+   */
+  infoModalSubtitle?: ModalProps["subtitle"];
+
+  /**
+   * The text content of the information modal.
+   */
+  infoModalText?: ModalProps["text"];
+
+  /**
+   * The title of the information modal.
+   */
+  infoModalTitle?: ModalProps["title"];
+
+  /**
+   * If true, the accordion will be collapsed.
+   * @default true
+   */
+  isCollapsed?: boolean;
+
+  /*
+   * The subtitle showed below the title of the accordion.
+   */
+  subtitle?: string;
+
+  /**
+   * The title of the accordion.
+   */
+  title: string;
+}
 
 export interface BaseProfile {
   email: string;
@@ -14,1645 +68,287 @@ export interface BaseProfile {
   };
 }
 
-// For using a theme.
-export interface UnifiedTheme {
-  // TODO: make these configurable.
-  blue: string;
-  darkGray: string;
-  eggplant: string;
-  gray: string;
-  green: string;
-  springGreen: string;
-  lightGray: string;
-  maroon: string;
-  midnight: string;
-  navy: string;
-  olive: string;
-  orange: string;
-  orchid: string;
-  pine: string;
-  purple: string;
-  red: string;
-  watermelon: string;
-  white: string;
-  black: string;
-
-  info: string;
+export interface ThemePrimitiveColors {
+  neutral000: string;
+  neutral050: string;
+  neutral100: string;
+  neutral200: string;
+  neutral300: string;
+  neutral400: string;
+  neutral500: string;
+  neutral600: string;
+  neutral700: string;
+  neutral800: string;
+  neutral900: string;
+
+  primary000: string;
+  primary050: string;
+  primary100: string;
+  primary200: string;
+  primary300: string;
+  primary400: string;
+  primary500: string;
+  primary600: string;
+  primary700: string;
+  primary800: string;
+  primary900: string;
+
+  secondary000: string;
+  secondary050: string;
+  secondary100: string;
+  secondary200: string;
+  secondary300: string;
+  secondary400: string;
+  secondary500: string;
+  secondary600: string;
+  secondary700: string;
+  secondary800: string;
+  secondary900: string;
+
+  accent000: string;
+  accent050: string;
+  accent100: string;
+  accent200: string;
+  accent300: string;
+  accent400: string;
+  accent500: string;
+  accent600: string;
+  accent700: string;
+  accent800: string;
+  accent900: string;
+
+  error000: string;
+  error100: string;
+  error200: string;
+
+  warning000: string;
+  warning100: string;
+  warning200: string;
+
+  success000: string;
+  success100: string;
+  success200: string;
+}
+
+export interface ThemePrimitiveRadius {
+  radiusSm: number;
+  radiusMd: number;
+  radiusLg: number;
+  radiusXl: number;
+  radius2xl: number;
+  radius3xl: number;
+}
+
+export interface ThemePrimitiveSpacing {
+  spacing0: number;
+  spacing1: number;
+  spacing2: number;
+  spacing3: number;
+  spacing4: number;
+  spacing5: number;
+  spacing6: number;
+  spacing7: number;
+  spacing8: number;
+  spacing9: number;
+  spacing10: number;
+  spacing11: number;
+  spacing12: number;
+}
+
+export type ThemePrimitives = ThemePrimitiveColors & ThemePrimitiveRadius & ThemePrimitiveSpacing;
+
+export interface TextThemeConfig {
+  primary: keyof ThemePrimitiveColors;
+  inverted: keyof ThemePrimitiveColors;
+  secondaryLight: keyof ThemePrimitiveColors;
+  extraLight: keyof ThemePrimitiveColors;
+  secondaryDark: keyof ThemePrimitiveColors;
+  link: keyof ThemePrimitiveColors;
+  linkLight: keyof ThemePrimitiveColors;
+  accent: keyof ThemePrimitiveColors;
+  error: keyof ThemePrimitiveColors;
+  warning: keyof ThemePrimitiveColors;
+  success: keyof ThemePrimitiveColors;
+}
+
+export interface SurfaceThemeConfig {
+  base: keyof ThemePrimitiveColors;
+  primary: keyof ThemePrimitiveColors;
+  secondaryLight: keyof ThemePrimitiveColors;
+  secondaryDark: keyof ThemePrimitiveColors;
+  secondaryExtraDark: keyof ThemePrimitiveColors;
+  neutral: keyof ThemePrimitiveColors;
+  neutralLight: keyof ThemePrimitiveColors;
+  neutralDark: keyof ThemePrimitiveColors;
+  disabled: keyof ThemePrimitiveColors;
+  error: keyof ThemePrimitiveColors;
+  errorLight: keyof ThemePrimitiveColors;
+  success: keyof ThemePrimitiveColors;
+  successLight: keyof ThemePrimitiveColors;
+  warning: keyof ThemePrimitiveColors;
+  warningLight: keyof ThemePrimitiveColors;
+}
+
+export interface BorderThemeConfig {
+  default: keyof ThemePrimitiveColors;
+  dark: keyof ThemePrimitiveColors;
+  activeNeutral: keyof ThemePrimitiveColors;
+  activeAccent: keyof ThemePrimitiveColors;
+  hover: keyof ThemePrimitiveColors;
+  focus: keyof ThemePrimitiveColors;
+  error: keyof ThemePrimitiveColors;
+  success: keyof ThemePrimitiveColors;
+  warning: keyof ThemePrimitiveColors;
+}
+
+export interface StatusThemeConfig {
+  active: keyof ThemePrimitiveColors;
+  doNotDisturb: keyof ThemePrimitiveColors;
+  away: keyof ThemePrimitiveColors;
+}
+
+export interface RadiusThemeConfig {
+  minimal: keyof ThemePrimitiveRadius;
+  default: keyof ThemePrimitiveRadius;
+  full: keyof ThemePrimitiveRadius;
+  rounded: keyof ThemePrimitiveRadius;
+}
+
+export interface SpacingThemeConfig {
+  none: keyof ThemePrimitiveSpacing;
+  xs: keyof ThemePrimitiveSpacing;
+  sm: keyof ThemePrimitiveSpacing;
+  md: keyof ThemePrimitiveSpacing;
+  lg: keyof ThemePrimitiveSpacing;
+  xl: keyof ThemePrimitiveSpacing;
+  "2xl": keyof ThemePrimitiveSpacing;
+  "3xl": keyof ThemePrimitiveSpacing;
+}
+
+export interface TextTheme {
+  primary: string;
+  inverted: string;
+  secondaryLight: string;
+  extraLight: string;
+  secondaryDark: string;
+  link: string;
+  linkLight: string;
+  accent: string;
   error: string;
   warning: string;
   success: string;
-  neutral: string;
+}
 
-  primaryLighter: string;
-  primaryLight: string;
+export interface SurfaceTheme {
+  base: string;
   primary: string;
-  primaryDark: string;
-  primaryDarker: string;
-
-  secondaryLighter: string;
   secondaryLight: string;
-  secondary: string;
   secondaryDark: string;
-  secondaryDarker: string;
+  secondaryExtraDark: string;
+  neutral: string;
+  neutralLight: string;
+  neutralDark: string;
+  disabled: string;
+  error: string;
+  errorLight: string;
+  success: string;
+  successLight: string;
+  warning: string;
+  warningLight: string;
+}
 
-  accentLighter: string;
-  accentLight: string;
-  accent: string;
-  accentDark: string;
-  accentDarker: string;
-
-  tertiaryLighter: string;
-  tertiaryLight: string;
-  tertiary: string;
-  tertiaryDark: string;
-  tertiaryDarker: string;
-
-  // Support for light and dark mode.
-  background: string;
-  backgroundSecondary: string;
-  textPrimary: string;
-  textSecondary: string;
-  textDisabled: string;
-  divider: string;
+export interface BorderTheme {
+  default: string;
+  dark: string;
+  activeNeutral: string;
+  activeAccent: string;
+  hover: string;
+  focus: string;
+  error: string;
+  success: string;
+  warning: string;
+}
 
-  neutral900: string;
-  neutral800: string;
-  neutral700: string;
-  neutral600: string;
-  neutral500: string;
-  neutral400: string;
-  neutral300: string;
-  neutral200: string;
-  neutral100: string;
-  neutral90: string;
-  neutral80: string;
-  neutral70: string;
-  neutral60: string;
-  neutral50: string;
-  neutral40: string;
-  neutral30: string;
-  neutral20: string;
-  neutral10: string;
-
-  primaryFont: string;
-  primaryBoldFont: string;
-  secondaryFont: string;
-  secondaryBoldFont: string;
-  buttonFont: string;
-  accentFont: string;
-  accentBoldFont: string;
-  titleFont: string;
-}
-
-export type Font =
-  | "primary"
-  | "primaryBold"
-  | "secondary"
-  | "secondaryBold"
-  | "accent"
-  | "accentBold"
-  | "title"
-  | "button";
+export interface StatusTheme {
+  active: string;
+  doNotDisturb: string;
+  away: string;
+}
 
-// type Sizes = "small" | "xsmall" | "sm" | "small" | "medium" | "lg" | "large";
+export interface RadiusTheme {
+  minimal: number;
+  default: number;
+  full: number;
+  rounded: number;
+}
 
-export type Direction = "up" | "right" | "down" | "left";
-export type Color =
+export interface SpacingTheme {
+  none: number;
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  "2xl": number;
+  "3xl": number;
+}
+
+export type TextColor = keyof TextTheme;
+export type SurfaceColor = keyof SurfaceTheme;
+export type BorderColor = keyof BorderTheme;
+export type StatusColor = keyof StatusTheme;
+// TODO: Remove ButtonColor. Buttons no longer have colors, only types (called style in Figma)
+export type ButtonColor =
   | "blue"
-  | "darkGray"
-  | "eggplant"
   | "gray"
-  | "green"
-  | "springGreen"
-  | "lightGray"
-  | "maroon"
-  | "midnight"
-  | "navy"
-  | "olive"
-  | "orange"
-  | "orchid"
-  | "pine"
-  | "purple"
   | "red"
-  | "watermelon"
+  // | "transparent"
   | "white"
-  | "black";
-export type ThemeColor =
-  | "primaryLighter"
-  | "primaryLight"
   | "primary"
-  | "primaryDark"
-  | "primaryDarker"
-  | "secondaryLighter"
-  | "secondaryLight"
   | "secondary"
-  | "secondaryDark"
-  | "secondaryDarker"
-  | "tertiaryLighter"
-  | "tertiaryLight"
-  | "tertiary"
-  | "tertiaryDark"
-  | "tertiaryDarker"
-  | "accentLighter"
-  | "accentLight"
   | "accent"
-  | "accentDark"
-  | "accentDarker"
-  | "background"
-  | "backgroundSecondary";
-export type NeutralColor =
-  | "neutral900"
-  | "neutral800"
-  | "neutral700"
-  | "neutral600"
-  | "neutral500"
-  | "neutral400"
-  | "neutral300"
-  | "neutral200"
-  | "neutral100"
-  | "neutral90"
-  | "neutral80"
-  | "neutral70"
-  | "neutral60"
-  | "neutral50"
-  | "neutral40"
-  | "neutral30"
-  | "neutral20"
-  | "neutral10";
-
-export type StatusIndicatorColor = "info" | "error" | "warning" | "success" | "neutral";
-
-export type AllColors = Color | ThemeColor | NeutralColor | StatusIndicatorColor;
-
-export interface OnChangeResult {
-  event?: SyntheticEvent<any>;
-  value: string;
+  | "tertiary"
+  | string;
+
+// TODO: we may want/need to expand icon color options from just text colors.
+export type IconColor = TextColor;
+
+export interface FontTheme {
+  primary: string;
+  title: string;
+}
+export type Font = keyof FontTheme;
+
+// The computed theme object that is passed to the ThemeProvider.
+export interface FernsTheme {
+  text: TextTheme;
+  surface: SurfaceTheme;
+  border: BorderTheme;
+  status: StatusTheme;
+  radius: RadiusTheme;
+  spacing: SpacingTheme;
+  font: FontTheme;
+  primitives: ThemePrimitives;
+}
+
+// A config for generating the theme object from primitives.
+export interface FernsThemeConfig {
+  text: TextThemeConfig;
+  surface: SurfaceThemeConfig;
+  border: BorderThemeConfig;
+  status: StatusThemeConfig;
+  radius: RadiusThemeConfig;
+  spacing: SpacingThemeConfig;
+  font: FontTheme;
+  primitives: ThemePrimitives;
 }
-export type OnChangeCallback = (result: OnChangeResult) => void;
+
+export type Direction = "up" | "right" | "down" | "left";
+
+export type OnChangeCallback = (result: string) => void;
 
 // Update if we start supporting more icon packs from Expo Icons.
-export type IconName = FontAwesome5IconName;
-
-export type FontAwesome5IconName =
-  | "500px"
-  | "accessible-icon"
-  | "accusoft"
-  | "acquisitions-incorporated"
-  | "ad"
-  | "address-book"
-  | "address-card"
-  | "adjust"
-  | "adn"
-  | "adversal"
-  | "affiliatetheme"
-  | "air-freshener"
-  | "airbnb"
-  | "algolia"
-  | "align-center"
-  | "align-justify"
-  | "align-left"
-  | "align-right"
-  | "alipay"
-  | "allergies"
-  | "amazon"
-  | "amazon-pay"
-  | "ambulance"
-  | "american-sign-language-interpreting"
-  | "amilia"
-  | "anchor"
-  | "android"
-  | "angellist"
-  | "angle-double-down"
-  | "angle-double-left"
-  | "angle-double-right"
-  | "angle-double-up"
-  | "angle-down"
-  | "angle-left"
-  | "angle-right"
-  | "angle-up"
-  | "angry"
-  | "angrycreative"
-  | "angular"
-  | "ankh"
-  | "app-store"
-  | "app-store-ios"
-  | "apper"
-  | "apple"
-  | "apple-alt"
-  | "apple-pay"
-  | "archive"
-  | "archway"
-  | "arrow-alt-circle-down"
-  | "arrow-alt-circle-left"
-  | "arrow-alt-circle-right"
-  | "arrow-alt-circle-up"
-  | "arrow-circle-down"
-  | "arrow-circle-left"
-  | "arrow-circle-right"
-  | "arrow-circle-up"
-  | "arrow-down"
-  | "arrow-left"
-  | "arrow-right"
-  | "arrow-up"
-  | "arrows-alt"
-  | "arrows-alt-h"
-  | "arrows-alt-v"
-  | "artstation"
-  | "assistive-listening-systems"
-  | "asterisk"
-  | "asymmetrik"
-  | "at"
-  | "atlas"
-  | "atlassian"
-  | "atom"
-  | "audible"
-  | "audio-description"
-  | "autoprefixer"
-  | "avianex"
-  | "aviato"
-  | "award"
-  | "aws"
-  | "baby"
-  | "baby-carriage"
-  | "backspace"
-  | "backward"
-  | "bacon"
-  | "bacteria"
-  | "bacterium"
-  | "bahai"
-  | "balance-scale"
-  | "balance-scale-left"
-  | "balance-scale-right"
-  | "ban"
-  | "band-aid"
-  | "bandcamp"
-  | "barcode"
-  | "bars"
-  | "baseball-ball"
-  | "basketball-ball"
-  | "bath"
-  | "battery-empty"
-  | "battery-full"
-  | "battery-half"
-  | "battery-quarter"
-  | "battery-three-quarters"
-  | "battle-net"
-  | "bed"
-  | "beer"
-  | "behance"
-  | "behance-square"
-  | "bell"
-  | "bell-slash"
-  | "bezier-curve"
-  | "bible"
-  | "bicycle"
-  | "biking"
-  | "bimobject"
-  | "binoculars"
-  | "biohazard"
-  | "birthday-cake"
-  | "bitbucket"
-  | "bitcoin"
-  | "bity"
-  | "black-tie"
-  | "blackberry"
-  | "blender"
-  | "blender-phone"
-  | "blind"
-  | "blog"
-  | "blogger"
-  | "blogger-b"
-  | "bluetooth"
-  | "bluetooth-b"
-  | "bold"
-  | "bolt"
-  | "bomb"
-  | "bone"
-  | "bong"
-  | "book"
-  | "book-dead"
-  | "book-medical"
-  | "book-open"
-  | "book-reader"
-  | "bookmark"
-  | "bootstrap"
-  | "border-all"
-  | "border-none"
-  | "border-style"
-  | "bowling-ball"
-  | "box"
-  | "box-open"
-  | "box-tissue"
-  | "boxes"
-  | "braille"
-  | "brain"
-  | "bread-slice"
-  | "briefcase"
-  | "briefcase-medical"
-  | "broadcast-tower"
-  | "broom"
-  | "brush"
-  | "btc"
-  | "buffer"
-  | "bug"
-  | "building"
-  | "bullhorn"
-  | "bullseye"
-  | "burn"
-  | "buromobelexperte"
-  | "bus"
-  | "bus-alt"
-  | "business-time"
-  | "buy-n-large"
-  | "buysellads"
-  | "calculator"
-  | "calendar"
-  | "calendar-alt"
-  | "calendar-check"
-  | "calendar-day"
-  | "calendar-minus"
-  | "calendar-plus"
-  | "calendar-times"
-  | "calendar-week"
-  | "camera"
-  | "camera-retro"
-  | "campground"
-  | "canadian-maple-leaf"
-  | "candy-cane"
-  | "cannabis"
-  | "capsules"
-  | "car"
-  | "car-alt"
-  | "car-battery"
-  | "car-crash"
-  | "car-side"
-  | "caravan"
-  | "caret-down"
-  | "caret-left"
-  | "caret-right"
-  | "caret-square-down"
-  | "caret-square-left"
-  | "caret-square-right"
-  | "caret-square-up"
-  | "caret-up"
-  | "carrot"
-  | "cart-arrow-down"
-  | "cart-plus"
-  | "cash-register"
-  | "cat"
-  | "cc-amazon-pay"
-  | "cc-amex"
-  | "cc-apple-pay"
-  | "cc-diners-club"
-  | "cc-discover"
-  | "cc-jcb"
-  | "cc-mastercard"
-  | "cc-paypal"
-  | "cc-stripe"
-  | "cc-visa"
-  | "centercode"
-  | "centos"
-  | "certificate"
-  | "chair"
-  | "chalkboard"
-  | "chalkboard-teacher"
-  | "charging-station"
-  | "chart-area"
-  | "chart-bar"
-  | "chart-line"
-  | "chart-pie"
-  | "check"
-  | "check-circle"
-  | "check-double"
-  | "check-square"
-  | "cheese"
-  | "chess"
-  | "chess-bishop"
-  | "chess-board"
-  | "chess-king"
-  | "chess-knight"
-  | "chess-pawn"
-  | "chess-queen"
-  | "chess-rook"
-  | "chevron-circle-down"
-  | "chevron-circle-left"
-  | "chevron-circle-right"
-  | "chevron-circle-up"
-  | "chevron-down"
-  | "chevron-left"
-  | "chevron-right"
-  | "chevron-up"
-  | "child"
-  | "chrome"
-  | "chromecast"
-  | "church"
-  | "circle"
-  | "circle-notch"
-  | "city"
-  | "clinic-medical"
-  | "clipboard"
-  | "clipboard-check"
-  | "clipboard-list"
-  | "clock"
-  | "clone"
-  | "closed-captioning"
-  | "cloud"
-  | "cloud-download-alt"
-  | "cloud-meatball"
-  | "cloud-moon"
-  | "cloud-moon-rain"
-  | "cloud-rain"
-  | "cloud-showers-heavy"
-  | "cloud-sun"
-  | "cloud-sun-rain"
-  | "cloud-upload-alt"
-  | "cloudflare"
-  | "cloudscale"
-  | "cloudsmith"
-  | "cloudversify"
-  | "cocktail"
-  | "code"
-  | "code-branch"
-  | "codepen"
-  | "codiepie"
-  | "coffee"
-  | "cog"
-  | "cogs"
-  | "coins"
-  | "columns"
-  | "comment"
-  | "comment-alt"
-  | "comment-dollar"
-  | "comment-dots"
-  | "comment-medical"
-  | "comment-slash"
-  | "comments"
-  | "comments-dollar"
-  | "compact-disc"
-  | "compass"
-  | "compress"
-  | "compress-alt"
-  | "compress-arrows-alt"
-  | "concierge-bell"
-  | "confluence"
-  | "connectdevelop"
-  | "contao"
-  | "cookie"
-  | "cookie-bite"
-  | "copy"
-  | "copyright"
-  | "cotton-bureau"
-  | "couch"
-  | "cpanel"
-  | "creative-commons"
-  | "creative-commons-by"
-  | "creative-commons-nc"
-  | "creative-commons-nc-eu"
-  | "creative-commons-nc-jp"
-  | "creative-commons-nd"
-  | "creative-commons-pd"
-  | "creative-commons-pd-alt"
-  | "creative-commons-remix"
-  | "creative-commons-sa"
-  | "creative-commons-sampling"
-  | "creative-commons-sampling-plus"
-  | "creative-commons-share"
-  | "creative-commons-zero"
-  | "credit-card"
-  | "critical-role"
-  | "crop"
-  | "crop-alt"
-  | "cross"
-  | "crosshairs"
-  | "crow"
-  | "crown"
-  | "crutch"
-  | "css3"
-  | "css3-alt"
-  | "cube"
-  | "cubes"
-  | "cut"
-  | "cuttlefish"
-  | "d-and-d"
-  | "d-and-d-beyond"
-  | "dailymotion"
-  | "dashcube"
-  | "database"
-  | "deaf"
-  | "deezer"
-  | "delicious"
-  | "democrat"
-  | "deploydog"
-  | "deskpro"
-  | "desktop"
-  | "dev"
-  | "deviantart"
-  | "dharmachakra"
-  | "dhl"
-  | "diagnoses"
-  | "diaspora"
-  | "dice"
-  | "dice-d20"
-  | "dice-d6"
-  | "dice-five"
-  | "dice-four"
-  | "dice-one"
-  | "dice-six"
-  | "dice-three"
-  | "dice-two"
-  | "digg"
-  | "digital-ocean"
-  | "digital-tachograph"
-  | "directions"
-  | "discord"
-  | "discourse"
-  | "disease"
-  | "divide"
-  | "dizzy"
-  | "dna"
-  | "dochub"
-  | "docker"
-  | "dog"
-  | "dollar-sign"
-  | "dolly"
-  | "dolly-flatbed"
-  | "donate"
-  | "door-closed"
-  | "door-open"
-  | "dot-circle"
-  | "dove"
-  | "download"
-  | "draft2digital"
-  | "drafting-compass"
-  | "dragon"
-  | "draw-polygon"
-  | "dribbble"
-  | "dribbble-square"
-  | "dropbox"
-  | "drum"
-  | "drum-steelpan"
-  | "drumstick-bite"
-  | "drupal"
-  | "dumbbell"
-  | "dumpster"
-  | "dumpster-fire"
-  | "dungeon"
-  | "dyalog"
-  | "earlybirds"
-  | "ebay"
-  | "edge"
-  | "edge-legacy"
-  | "edit"
-  | "egg"
-  | "eject"
-  | "elementor"
-  | "ellipsis-h"
-  | "ellipsis-v"
-  | "ello"
-  | "ember"
-  | "empire"
-  | "envelope"
-  | "envelope-open"
-  | "envelope-open-text"
-  | "envelope-square"
-  | "envira"
-  | "equals"
-  | "eraser"
-  | "erlang"
-  | "ethereum"
-  | "ethernet"
-  | "etsy"
-  | "euro-sign"
-  | "evernote"
-  | "exchange-alt"
-  | "exclamation"
-  | "exclamation-circle"
-  | "exclamation-triangle"
-  | "expand"
-  | "expand-alt"
-  | "expand-arrows-alt"
-  | "expeditedssl"
-  | "external-link-alt"
-  | "external-link-square-alt"
-  | "eye"
-  | "eye-dropper"
-  | "eye-slash"
-  | "facebook"
-  | "facebook-f"
-  | "facebook-messenger"
-  | "facebook-square"
-  | "fan"
-  | "fantasy-flight-games"
-  | "fast-backward"
-  | "fast-forward"
-  | "faucet"
-  | "fax"
-  | "feather"
-  | "feather-alt"
-  | "fedex"
-  | "fedora"
-  | "female"
-  | "fighter-jet"
-  | "figma"
-  | "file"
-  | "file-alt"
-  | "file-archive"
-  | "file-audio"
-  | "file-code"
-  | "file-contract"
-  | "file-csv"
-  | "file-download"
-  | "file-excel"
-  | "file-export"
-  | "file-image"
-  | "file-import"
-  | "file-invoice"
-  | "file-invoice-dollar"
-  | "file-medical"
-  | "file-medical-alt"
-  | "file-pdf"
-  | "file-powerpoint"
-  | "file-prescription"
-  | "file-signature"
-  | "file-upload"
-  | "file-video"
-  | "file-word"
-  | "fill"
-  | "fill-drip"
-  | "film"
-  | "filter"
-  | "fingerprint"
-  | "fire"
-  | "fire-alt"
-  | "fire-extinguisher"
-  | "firefox"
-  | "firefox-browser"
-  | "first-aid"
-  | "first-order"
-  | "first-order-alt"
-  | "firstdraft"
-  | "fish"
-  | "fist-raised"
-  | "flag"
-  | "flag-checkered"
-  | "flag-usa"
-  | "flask"
-  | "flickr"
-  | "flipboard"
-  | "flushed"
-  | "fly"
-  | "folder"
-  | "folder-minus"
-  | "folder-open"
-  | "folder-plus"
-  | "font"
-  | "font-awesome"
-  | "font-awesome-alt"
-  | "font-awesome-flag"
-  | "font-awesome-logo-full"
-  | "fonticons"
-  | "fonticons-fi"
-  | "football-ball"
-  | "fort-awesome"
-  | "fort-awesome-alt"
-  | "forumbee"
-  | "forward"
-  | "foursquare"
-  | "free-code-camp"
-  | "freebsd"
-  | "frog"
-  | "frown"
-  | "frown-open"
-  | "fulcrum"
-  | "funnel-dollar"
-  | "futbol"
-  | "galactic-republic"
-  | "galactic-senate"
-  | "gamepad"
-  | "gas-pump"
-  | "gavel"
-  | "gem"
-  | "genderless"
-  | "get-pocket"
-  | "gg"
-  | "gg-circle"
-  | "ghost"
-  | "gift"
-  | "gifts"
-  | "git"
-  | "git-alt"
-  | "git-square"
-  | "github"
-  | "github-alt"
-  | "github-square"
-  | "gitkraken"
-  | "gitlab"
-  | "gitter"
-  | "glass-cheers"
-  | "glass-martini"
-  | "glass-martini-alt"
-  | "glass-whiskey"
-  | "glasses"
-  | "glide"
-  | "glide-g"
-  | "globe"
-  | "globe-africa"
-  | "globe-americas"
-  | "globe-asia"
-  | "globe-europe"
-  | "gofore"
-  | "golf-ball"
-  | "goodreads"
-  | "goodreads-g"
-  | "google"
-  | "google-drive"
-  | "google-pay"
-  | "google-play"
-  | "google-plus"
-  | "google-plus-g"
-  | "google-plus-square"
-  | "google-wallet"
-  | "gopuram"
-  | "graduation-cap"
-  | "gratipay"
-  | "grav"
-  | "greater-than"
-  | "greater-than-equal"
-  | "grimace"
-  | "grin"
-  | "grin-alt"
-  | "grin-beam"
-  | "grin-beam-sweat"
-  | "grin-hearts"
-  | "grin-squint"
-  | "grin-squint-tears"
-  | "grin-stars"
-  | "grin-tears"
-  | "grin-tongue"
-  | "grin-tongue-squint"
-  | "grin-tongue-wink"
-  | "grin-wink"
-  | "grip-horizontal"
-  | "grip-lines"
-  | "grip-lines-vertical"
-  | "grip-vertical"
-  | "gripfire"
-  | "grunt"
-  | "guilded"
-  | "guitar"
-  | "gulp"
-  | "h-square"
-  | "hacker-news"
-  | "hacker-news-square"
-  | "hackerrank"
-  | "hamburger"
-  | "hammer"
-  | "hamsa"
-  | "hand-holding"
-  | "hand-holding-heart"
-  | "hand-holding-medical"
-  | "hand-holding-usd"
-  | "hand-holding-water"
-  | "hand-lizard"
-  | "hand-middle-finger"
-  | "hand-paper"
-  | "hand-peace"
-  | "hand-point-down"
-  | "hand-point-left"
-  | "hand-point-right"
-  | "hand-point-up"
-  | "hand-pointer"
-  | "hand-rock"
-  | "hand-scissors"
-  | "hand-sparkles"
-  | "hand-spock"
-  | "hands"
-  | "hands-helping"
-  | "hands-wash"
-  | "handshake"
-  | "handshake-alt-slash"
-  | "handshake-slash"
-  | "hanukiah"
-  | "hard-hat"
-  | "hashtag"
-  | "hat-cowboy"
-  | "hat-cowboy-side"
-  | "hat-wizard"
-  | "hdd"
-  | "head-side-cough"
-  | "head-side-cough-slash"
-  | "head-side-mask"
-  | "head-side-virus"
-  | "heading"
-  | "headphones"
-  | "headphones-alt"
-  | "headset"
-  | "heart"
-  | "heart-broken"
-  | "heartbeat"
-  | "helicopter"
-  | "highlighter"
-  | "hiking"
-  | "hippo"
-  | "hips"
-  | "hire-a-helper"
-  | "history"
-  | "hive"
-  | "hockey-puck"
-  | "holly-berry"
-  | "home"
-  | "hooli"
-  | "hornbill"
-  | "horse"
-  | "horse-head"
-  | "hospital"
-  | "hospital-alt"
-  | "hospital-symbol"
-  | "hospital-user"
-  | "hot-tub"
-  | "hotdog"
-  | "hotel"
-  | "hotjar"
-  | "hourglass"
-  | "hourglass-end"
-  | "hourglass-half"
-  | "hourglass-start"
-  | "house-damage"
-  | "house-user"
-  | "houzz"
-  | "hryvnia"
-  | "html5"
-  | "hubspot"
-  | "i-cursor"
-  | "ice-cream"
-  | "icicles"
-  | "icons"
-  | "id-badge"
-  | "id-card"
-  | "id-card-alt"
-  | "ideal"
-  | "igloo"
-  | "image"
-  | "images"
-  | "imdb"
-  | "inbox"
-  | "indent"
-  | "industry"
-  | "infinity"
-  | "info"
-  | "info-circle"
-  | "innosoft"
-  | "instagram"
-  | "instagram-square"
-  | "instalod"
-  | "intercom"
-  | "internet-explorer"
-  | "invision"
-  | "ioxhost"
-  | "italic"
-  | "itch-io"
-  | "itunes"
-  | "itunes-note"
-  | "java"
-  | "jedi"
-  | "jedi-order"
-  | "jenkins"
-  | "jira"
-  | "joget"
-  | "joint"
-  | "joomla"
-  | "journal-whills"
-  | "js"
-  | "js-square"
-  | "jsfiddle"
-  | "kaaba"
-  | "kaggle"
-  | "key"
-  | "keybase"
-  | "keyboard"
-  | "keycdn"
-  | "khanda"
-  | "kickstarter"
-  | "kickstarter-k"
-  | "kiss"
-  | "kiss-beam"
-  | "kiss-wink-heart"
-  | "kiwi-bird"
-  | "korvue"
-  | "landmark"
-  | "language"
-  | "laptop"
-  | "laptop-code"
-  | "laptop-house"
-  | "laptop-medical"
-  | "laravel"
-  | "lastfm"
-  | "lastfm-square"
-  | "laugh"
-  | "laugh-beam"
-  | "laugh-squint"
-  | "laugh-wink"
-  | "layer-group"
-  | "leaf"
-  | "leanpub"
-  | "lemon"
-  | "less"
-  | "less-than"
-  | "less-than-equal"
-  | "level-down-alt"
-  | "level-up-alt"
-  | "life-ring"
-  | "lightbulb"
-  | "line"
-  | "link"
-  | "linkedin"
-  | "linkedin-in"
-  | "linode"
-  | "linux"
-  | "lira-sign"
-  | "list"
-  | "list-alt"
-  | "list-ol"
-  | "list-ul"
-  | "location-arrow"
-  | "lock"
-  | "lock-open"
-  | "long-arrow-alt-down"
-  | "long-arrow-alt-left"
-  | "long-arrow-alt-right"
-  | "long-arrow-alt-up"
-  | "low-vision"
-  | "luggage-cart"
-  | "lungs"
-  | "lungs-virus"
-  | "lyft"
-  | "magento"
-  | "magic"
-  | "magnet"
-  | "mail-bulk"
-  | "mailchimp"
-  | "male"
-  | "mandalorian"
-  | "map"
-  | "map-marked"
-  | "map-marked-alt"
-  | "map-marker"
-  | "map-marker-alt"
-  | "map-pin"
-  | "map-signs"
-  | "markdown"
-  | "marker"
-  | "mars"
-  | "mars-double"
-  | "mars-stroke"
-  | "mars-stroke-h"
-  | "mars-stroke-v"
-  | "mask"
-  | "mastodon"
-  | "maxcdn"
-  | "mdb"
-  | "medal"
-  | "medapps"
-  | "medium"
-  | "medium-m"
-  | "medkit"
-  | "medrt"
-  | "meetup"
-  | "megaport"
-  | "meh"
-  | "meh-blank"
-  | "meh-rolling-eyes"
-  | "memory"
-  | "mendeley"
-  | "menorah"
-  | "mercury"
-  | "meteor"
-  | "microblog"
-  | "microchip"
-  | "microphone"
-  | "microphone-alt"
-  | "microphone-alt-slash"
-  | "microphone-slash"
-  | "microscope"
-  | "microsoft"
-  | "minus"
-  | "minus-circle"
-  | "minus-square"
-  | "mitten"
-  | "mix"
-  | "mixcloud"
-  | "mixer"
-  | "mizuni"
-  | "mobile"
-  | "mobile-alt"
-  | "modx"
-  | "monero"
-  | "money-bill"
-  | "money-bill-alt"
-  | "money-bill-wave"
-  | "money-bill-wave-alt"
-  | "money-check"
-  | "money-check-alt"
-  | "monument"
-  | "moon"
-  | "mortar-pestle"
-  | "mosque"
-  | "motorcycle"
-  | "mountain"
-  | "mouse"
-  | "mouse-pointer"
-  | "mug-hot"
-  | "music"
-  | "napster"
-  | "neos"
-  | "network-wired"
-  | "neuter"
-  | "newspaper"
-  | "nimblr"
-  | "node"
-  | "node-js"
-  | "not-equal"
-  | "notes-medical"
-  | "npm"
-  | "ns8"
-  | "nutritionix"
-  | "object-group"
-  | "object-ungroup"
-  | "octopus-deploy"
-  | "odnoklassniki"
-  | "odnoklassniki-square"
-  | "oil-can"
-  | "old-republic"
-  | "om"
-  | "opencart"
-  | "openid"
-  | "opera"
-  | "optin-monster"
-  | "orcid"
-  | "osi"
-  | "otter"
-  | "outdent"
-  | "page4"
-  | "pagelines"
-  | "pager"
-  | "paint-brush"
-  | "paint-roller"
-  | "palette"
-  | "palfed"
-  | "pallet"
-  | "paper-plane"
-  | "paperclip"
-  | "parachute-box"
-  | "paragraph"
-  | "parking"
-  | "passport"
-  | "pastafarianism"
-  | "paste"
-  | "patreon"
-  | "pause"
-  | "pause-circle"
-  | "paw"
-  | "paypal"
-  | "peace"
-  | "pen"
-  | "pen-alt"
-  | "pen-fancy"
-  | "pen-nib"
-  | "pen-square"
-  | "pencil-alt"
-  | "pencil-ruler"
-  | "penny-arcade"
-  | "people-arrows"
-  | "people-carry"
-  | "pepper-hot"
-  | "perbyte"
-  | "percent"
-  | "percentage"
-  | "periscope"
-  | "person-booth"
-  | "phabricator"
-  | "phoenix-framework"
-  | "phoenix-squadron"
-  | "phone"
-  | "phone-alt"
-  | "phone-slash"
-  | "phone-square"
-  | "phone-square-alt"
-  | "phone-volume"
-  | "photo-video"
-  | "php"
-  | "pied-piper"
-  | "pied-piper-alt"
-  | "pied-piper-hat"
-  | "pied-piper-pp"
-  | "pied-piper-square"
-  | "piggy-bank"
-  | "pills"
-  | "pinterest"
-  | "pinterest-p"
-  | "pinterest-square"
-  | "pizza-slice"
-  | "place-of-worship"
-  | "plane"
-  | "plane-arrival"
-  | "plane-departure"
-  | "plane-slash"
-  | "play"
-  | "play-circle"
-  | "playstation"
-  | "plug"
-  | "plus"
-  | "plus-circle"
-  | "plus-square"
-  | "podcast"
-  | "poll"
-  | "poll-h"
-  | "poo"
-  | "poo-storm"
-  | "poop"
-  | "portrait"
-  | "pound-sign"
-  | "power-off"
-  | "pray"
-  | "praying-hands"
-  | "prescription"
-  | "prescription-bottle"
-  | "prescription-bottle-alt"
-  | "print"
-  | "procedures"
-  | "product-hunt"
-  | "project-diagram"
-  | "pump-medical"
-  | "pump-soap"
-  | "pushed"
-  | "puzzle-piece"
-  | "python"
-  | "qq"
-  | "qrcode"
-  | "question"
-  | "question-circle"
-  | "quidditch"
-  | "quinscape"
-  | "quora"
-  | "quote-left"
-  | "quote-right"
-  | "quran"
-  | "r-project"
-  | "radiation"
-  | "radiation-alt"
-  | "rainbow"
-  | "random"
-  | "raspberry-pi"
-  | "ravelry"
-  | "react"
-  | "reacteurope"
-  | "readme"
-  | "rebel"
-  | "receipt"
-  | "record-vinyl"
-  | "recycle"
-  | "red-river"
-  | "reddit"
-  | "reddit-alien"
-  | "reddit-square"
-  | "redhat"
-  | "redo"
-  | "redo-alt"
-  | "registered"
-  | "remove-format"
-  | "renren"
-  | "reply"
-  | "reply-all"
-  | "replyd"
-  | "republican"
-  | "researchgate"
-  | "resolving"
-  | "restroom"
-  | "retweet"
-  | "rev"
-  | "ribbon"
-  | "ring"
-  | "road"
-  | "robot"
-  | "rocket"
-  | "rocketchat"
-  | "rockrms"
-  | "route"
-  | "rss"
-  | "rss-square"
-  | "ruble-sign"
-  | "ruler"
-  | "ruler-combined"
-  | "ruler-horizontal"
-  | "ruler-vertical"
-  | "running"
-  | "rupee-sign"
-  | "rust"
-  | "sad-cry"
-  | "sad-tear"
-  | "safari"
-  | "salesforce"
-  | "sass"
-  | "satellite"
-  | "satellite-dish"
-  | "save"
-  | "schlix"
-  | "school"
-  | "screwdriver"
-  | "scribd"
-  | "scroll"
-  | "sd-card"
-  | "search"
-  | "search-dollar"
-  | "search-location"
-  | "search-minus"
-  | "search-plus"
-  | "searchengin"
-  | "seedling"
-  | "sellcast"
-  | "sellsy"
-  | "server"
-  | "servicestack"
-  | "shapes"
-  | "share"
-  | "share-alt"
-  | "share-alt-square"
-  | "share-square"
-  | "shekel-sign"
-  | "shield-alt"
-  | "shield-virus"
-  | "ship"
-  | "shipping-fast"
-  | "shirtsinbulk"
-  | "shoe-prints"
-  | "shopify"
-  | "shopping-bag"
-  | "shopping-basket"
-  | "shopping-cart"
-  | "shopware"
-  | "shower"
-  | "shuttle-van"
-  | "sign"
-  | "sign-in-alt"
-  | "sign-language"
-  | "sign-out-alt"
-  | "signal"
-  | "signature"
-  | "sim-card"
-  | "simplybuilt"
-  | "sink"
-  | "sistrix"
-  | "sitemap"
-  | "sith"
-  | "skating"
-  | "sketch"
-  | "skiing"
-  | "skiing-nordic"
-  | "skull"
-  | "skull-crossbones"
-  | "skyatlas"
-  | "skype"
-  | "slack"
-  | "slack-hash"
-  | "slash"
-  | "sleigh"
-  | "sliders-h"
-  | "slideshare"
-  | "smile"
-  | "smile-beam"
-  | "smile-wink"
-  | "smog"
-  | "smoking"
-  | "smoking-ban"
-  | "sms"
-  | "snapchat"
-  | "snapchat-ghost"
-  | "snapchat-square"
-  | "snowboarding"
-  | "snowflake"
-  | "snowman"
-  | "snowplow"
-  | "soap"
-  | "socks"
-  | "solar-panel"
-  | "sort"
-  | "sort-alpha-down"
-  | "sort-alpha-down-alt"
-  | "sort-alpha-up"
-  | "sort-alpha-up-alt"
-  | "sort-amount-down"
-  | "sort-amount-down-alt"
-  | "sort-amount-up"
-  | "sort-amount-up-alt"
-  | "sort-down"
-  | "sort-numeric-down"
-  | "sort-numeric-down-alt"
-  | "sort-numeric-up"
-  | "sort-numeric-up-alt"
-  | "sort-up"
-  | "soundcloud"
-  | "sourcetree"
-  | "spa"
-  | "space-shuttle"
-  | "speakap"
-  | "speaker-deck"
-  | "spell-check"
-  | "spider"
-  | "spinner"
-  | "splotch"
-  | "spotify"
-  | "spray-can"
-  | "square"
-  | "square-full"
-  | "square-root-alt"
-  | "squarespace"
-  | "stack-exchange"
-  | "stack-overflow"
-  | "stackpath"
-  | "stamp"
-  | "star"
-  | "star-and-crescent"
-  | "star-half"
-  | "star-half-alt"
-  | "star-of-david"
-  | "star-of-life"
-  | "staylinked"
-  | "steam"
-  | "steam-square"
-  | "steam-symbol"
-  | "step-backward"
-  | "step-forward"
-  | "stethoscope"
-  | "sticker-mule"
-  | "sticky-note"
-  | "stop"
-  | "stop-circle"
-  | "stopwatch"
-  | "stopwatch-20"
-  | "store"
-  | "store-alt"
-  | "store-alt-slash"
-  | "store-slash"
-  | "strava"
-  | "stream"
-  | "street-view"
-  | "strikethrough"
-  | "stripe"
-  | "stripe-s"
-  | "stroopwafel"
-  | "studiovinari"
-  | "stumbleupon"
-  | "stumbleupon-circle"
-  | "subscript"
-  | "subway"
-  | "suitcase"
-  | "suitcase-rolling"
-  | "sun"
-  | "superpowers"
-  | "superscript"
-  | "supple"
-  | "surprise"
-  | "suse"
-  | "swatchbook"
-  | "swift"
-  | "swimmer"
-  | "swimming-pool"
-  | "symfony"
-  | "synagogue"
-  | "sync"
-  | "sync-alt"
-  | "syringe"
-  | "table"
-  | "table-tennis"
-  | "tablet"
-  | "tablet-alt"
-  | "tablets"
-  | "tachometer-alt"
-  | "tag"
-  | "tags"
-  | "tape"
-  | "tasks"
-  | "taxi"
-  | "teamspeak"
-  | "teeth"
-  | "teeth-open"
-  | "telegram"
-  | "telegram-plane"
-  | "temperature-high"
-  | "temperature-low"
-  | "tencent-weibo"
-  | "tenge"
-  | "terminal"
-  | "text-height"
-  | "text-width"
-  | "th"
-  | "th-large"
-  | "th-list"
-  | "the-red-yeti"
-  | "theater-masks"
-  | "themeco"
-  | "themeisle"
-  | "thermometer"
-  | "thermometer-empty"
-  | "thermometer-full"
-  | "thermometer-half"
-  | "thermometer-quarter"
-  | "thermometer-three-quarters"
-  | "think-peaks"
-  | "thumbs-down"
-  | "thumbs-up"
-  | "thumbtack"
-  | "ticket-alt"
-  | "tiktok"
-  | "times"
-  | "times-circle"
-  | "tint"
-  | "tint-slash"
-  | "tired"
-  | "toggle-off"
-  | "toggle-on"
-  | "toilet"
-  | "toilet-paper"
-  | "toilet-paper-slash"
-  | "toolbox"
-  | "tools"
-  | "tooth"
-  | "torah"
-  | "torii-gate"
-  | "tractor"
-  | "trade-federation"
-  | "trademark"
-  | "traffic-light"
-  | "trailer"
-  | "train"
-  | "tram"
-  | "transgender"
-  | "transgender-alt"
-  | "trash"
-  | "trash-alt"
-  | "trash-restore"
-  | "trash-restore-alt"
-  | "tree"
-  | "trello"
-  | "tripadvisor"
-  | "trophy"
-  | "truck"
-  | "truck-loading"
-  | "truck-monster"
-  | "truck-moving"
-  | "truck-pickup"
-  | "tshirt"
-  | "tty"
-  | "tumblr"
-  | "tumblr-square"
-  | "tv"
-  | "twitch"
-  | "twitter"
-  | "twitter-square"
-  | "typo3"
-  | "uber"
-  | "ubuntu"
-  | "uikit"
-  | "umbraco"
-  | "umbrella"
-  | "umbrella-beach"
-  | "uncharted"
-  | "underline"
-  | "undo"
-  | "undo-alt"
-  | "uniregistry"
-  | "unity"
-  | "universal-access"
-  | "university"
-  | "unlink"
-  | "unlock"
-  | "unlock-alt"
-  | "unsplash"
-  | "untappd"
-  | "upload"
-  | "ups"
-  | "usb"
-  | "user"
-  | "user-alt"
-  | "user-alt-slash"
-  | "user-astronaut"
-  | "user-check"
-  | "user-circle"
-  | "user-clock"
-  | "user-cog"
-  | "user-edit"
-  | "user-friends"
-  | "user-graduate"
-  | "user-injured"
-  | "user-lock"
-  | "user-md"
-  | "user-minus"
-  | "user-ninja"
-  | "user-nurse"
-  | "user-plus"
-  | "user-secret"
-  | "user-shield"
-  | "user-slash"
-  | "user-tag"
-  | "user-tie"
-  | "user-times"
-  | "users"
-  | "users-cog"
-  | "users-slash"
-  | "usps"
-  | "ussunnah"
-  | "utensil-spoon"
-  | "utensils"
-  | "vaadin"
-  | "vector-square"
-  | "venus"
-  | "venus-double"
-  | "venus-mars"
-  | "vest"
-  | "vest-patches"
-  | "viacoin"
-  | "viadeo"
-  | "viadeo-square"
-  | "vial"
-  | "vials"
-  | "viber"
-  | "video"
-  | "video-slash"
-  | "vihara"
-  | "vimeo"
-  | "vimeo-square"
-  | "vimeo-v"
-  | "vine"
-  | "virus"
-  | "virus-slash"
-  | "viruses"
-  | "vk"
-  | "vnv"
-  | "voicemail"
-  | "volleyball-ball"
-  | "volume-down"
-  | "volume-mute"
-  | "volume-off"
-  | "volume-up"
-  | "vote-yea"
-  | "vr-cardboard"
-  | "vuejs"
-  | "walking"
-  | "wallet"
-  | "warehouse"
-  | "watchman-monitoring"
-  | "water"
-  | "wave-square"
-  | "waze"
-  | "weebly"
-  | "weibo"
-  | "weight"
-  | "weight-hanging"
-  | "weixin"
-  | "whatsapp"
-  | "whatsapp-square"
-  | "wheelchair"
-  | "whmcs"
-  | "wifi"
-  | "wikipedia-w"
-  | "wind"
-  | "window-close"
-  | "window-maximize"
-  | "window-minimize"
-  | "window-restore"
-  | "windows"
-  | "wine-bottle"
-  | "wine-glass"
-  | "wine-glass-alt"
-  | "wix"
-  | "wizards-of-the-coast"
-  | "wodu"
-  | "wolf-pack-battalion"
-  | "won-sign"
-  | "wordpress"
-  | "wordpress-simple"
-  | "wpbeginner"
-  | "wpexplorer"
-  | "wpforms"
-  | "wpressr"
-  | "wrench"
-  | "x-ray"
-  | "xbox"
-  | "xing"
-  | "xing-square"
-  | "y-combinator"
-  | "yahoo"
-  | "yammer"
-  | "yandex"
-  | "yandex-international"
-  | "yarn"
-  | "yelp"
-  | "yen-sign"
-  | "yin-yang"
-  | "yoast"
-  | "youtube"
-  | "youtube-square"
-  | "zhihu";
+export type IconName = FontAwesome6SolidNames | FontAwesome6BrandNames | FontAwesome6RegularNames;
 
 export type AlignContent = "start" | "end" | "center" | "between" | "around" | "stretch";
 export type AlignSelf = "auto" | "start" | "end" | "center" | "baseline" | "stretch";
@@ -1675,7 +371,28 @@ export type SignedUpTo12 =
   | -1
   | UnsignedUpTo12;
 export type Margin = SignedUpTo12 | "auto";
-export const SPACING = 4;
+export const SPACING_MAP = {
+  0: 0,
+  1: 4,
+  2: 8,
+  3: 12,
+  4: 16,
+  5: 24,
+  6: 32,
+  7: 40,
+  8: 48,
+  9: 56,
+  10: 64,
+  11: 72,
+  12: 80,
+};
+
+export function getSpacing(spacing: SignedUpTo12) {
+  if (spacing < 0) {
+    return SPACING_MAP[Math.abs(spacing) as UnsignedUpTo12] * -1;
+  }
+  return SPACING_MAP[spacing as UnsignedUpTo12];
+}
 
 export type TextFieldType =
   | "date"
@@ -1683,7 +400,7 @@ export type TextFieldType =
   | "decimal"
   | "decimalRange"
   | "email"
-  | "height"
+  // | "height"
   | "password"
   | "phoneNumber"
   | "number"
@@ -1694,60 +411,33 @@ export type TextFieldType =
   | "url"
   | "username";
 
-export type IconSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 
 export const iconSizeToNumber = (size?: IconSize) => {
   return {
     xs: 8,
     sm: 12,
-    md: 14,
+    md: 16,
     lg: 20,
-    xl: 26,
+    xl: 24,
+    "2xl": 28,
   }[size || "md"];
 };
 
-export type TextSize = "xs" | "sm" | "md" | "lg";
-export type TextColor =
-  | "blue"
-  | "darkGray"
-  | "eggplant"
-  | "gray"
-  | "green"
-  | "lightGray"
-  | "maroon"
-  | "midnight"
-  | "navy"
-  | "olive"
-  | "orange"
-  | "orchid"
-  | "pine"
-  | "purple"
-  | "red"
-  | "watermelon"
-  | "white"; // default "darkGray"
-
-export type ButtonColor =
-  | "blue"
-  | "gray"
-  | "red"
-  // | "transparent"
-  | "white"
-  | "primary"
-  | "secondary"
-  | "accent"
-  | "tertiary";
+export type TextSize = "sm" | "md" | "lg" | "xl";
 
 export type IconPrefix = "far" | "fas";
 
-export interface BlurBoxProps extends BoxProps {
-  blurType?: "regular" | "dark" | "prominent";
-}
-
 export interface LayerProps {
   children: ReactChildren;
 }
 
-export interface BoxProps {
+type AccessibilityProps = {
+  accessibilityLabel: string;
+  accessibilityHint: string;
+};
+
+export interface BoxPropsBase {
   alignContent?: AlignContent;
   alignItems?: AlignItems;
   alignSelf?: AlignSelf;
@@ -1773,6 +463,7 @@ export interface BoxProps {
   lgDisplay?: "none" | "flex" | "block" | "inlineBlock" | "visuallyHidden";
   fit?: boolean;
   flex?: "grow" | "shrink" | "none";
+  gap?: SignedUpTo12;
   height?: number | string;
   justifyContent?: "start" | "end" | "center" | "between" | "around";
   left?: boolean;
@@ -1823,7 +514,7 @@ export interface BoxProps {
   lgPaddingY?: UnsignedUpTo12;
   position?: "static" | "absolute" | "relative" | "fixed";
   right?: boolean;
-  rounding?: "pill" | "circle" | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  rounding?: Rounding | "circle";
   top?: boolean;
   width?: number | string;
   wrap?: boolean;
@@ -1836,11 +527,11 @@ export interface BoxProps {
   onHoverEnd?: () => void | Promise<void>;
   scroll?: boolean;
   shadow?: boolean;
-  border?: AllColors;
-  borderBottom?: AllColors;
-  borderTop?: AllColors;
-  borderLeft?: AllColors;
-  borderRight?: AllColors;
+  border?: BorderColor;
+  borderBottom?: BorderColor;
+  borderTop?: BorderColor;
+  borderLeft?: BorderColor;
+  borderRight?: BorderColor;
 
   avoidKeyboard?: boolean;
   keyboardOffset?: number;
@@ -1850,7 +541,11 @@ export interface BoxProps {
   testID?: string;
 }
 
-export type BoxColor = AllColors | "transparent";
+// If onClick is provided, add accessibility props.
+export type BoxProps =
+  | (BoxPropsBase & {onClick?: undefined})
+  | (BoxPropsBase & {onClick: () => void} & AccessibilityProps);
+export type BoxColor = SurfaceColor | "transparent";
 
 export interface ErrorBoundaryProps {
   onError?: (error: Error, stack: any) => void;
@@ -1858,69 +553,31 @@ export interface ErrorBoundaryProps {
 }
 
 export interface IconProps {
-  prefix?: IconPrefix; // For support FA solid/regular/light/duotone, as well as other icon packs in the future.
-  name: IconName;
-  color?: AllColors;
+  iconName: IconName;
+  type?:
+    | "regular"
+    | "brand"
+    | "solid"
+    | "light"
+    | "thin"
+    | "duotone"
+    | "sharpSolid"
+    | "sharpLight"
+    | "sharp";
+  color?: IconColor;
   size?: IconSize;
-  iconStyle?: any;
-  containerStyle?: any;
   testID?: string;
 }
 
-export type TooltipDirection = "top" | "bottom" | "left" | "right";
+export type TooltipPosition = "top" | "bottom" | "left" | "right";
 
 export type IndicatorDirection = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
 
-export interface PillProps {
-  text: string;
-  color: AllColors;
-  enabled?: boolean;
-  onClick: (enabled: boolean) => void;
-}
-
-type BaseSegmentedControlProps = {
+export interface SegmentedControlProps {
   items: string[];
-  responsive?: boolean;
-  size?: "md" | "lg";
-  selectLimit?: number;
-};
-
-export type SegmentedControlPropsSingleSelect = BaseSegmentedControlProps & {
-  multiselect?: false;
-  onChange: ({activeIndex}: {activeIndex: number}) => void;
-  selectedItemIndex?: number;
-};
-
-export type SegmentedControlPropsMultiSelect = BaseSegmentedControlProps & {
-  multiselect: true;
-  onChange: ({activeIndex}: {activeIndex: number[]}) => void;
-  selectedItemIndexes?: number[];
-};
-
-export type SegmentedControlProps =
-  | SegmentedControlPropsSingleSelect
-  | SegmentedControlPropsMultiSelect;
-
-// Shared props for fields with labels, subtext, and error messages.
-export interface FieldWithLabelsProps {
-  testID?: string;
-  errorMessage?: string;
-  errorMessageColor?: AllColors; // Default: red.
-  label?: string;
-  labelColor?: AllColors;
-  helperText?: string;
-  helperTextColor?: AllColors;
-  children?: ReactChildren;
-}
-
-export interface DateTimeFieldProps extends FieldWithLabelsProps {
-  label?: string;
-  mode: "date" | "time" | "datetime";
-  value: Date;
-  onChange: (date: Date) => void;
-  dateFormat?: string;
-  pickerType?: "default" | "compact" | "inline" | "spinner";
-  showTimezone?: boolean; // defaults to true
+  size?: "md" | "lg"; // default "md"
+  onChange: (activeIndex: number) => void;
+  selectedIndex?: number;
 }
 
 export interface TimezonePickerProps {
@@ -1930,93 +587,146 @@ export interface TimezonePickerProps {
   width?: number | string; // defaults to 100
 }
 
-export interface TextFieldProps extends FieldWithLabelsProps {
-  innerRef?: any;
-  id?: string;
-  onChange: OnChangeCallback;
-  autoComplete?: "current-password" | "on" | "off" | "username";
-  disabled?: boolean;
+// extend TextStyle to include "outline" since it exists for web
+export interface TextStyleWithOutline extends TextStyle {
+  outline?: string;
+}
 
-  idealErrorDirection?: Direction;
-  name?: string;
-  onBlur?: OnChangeCallback;
-  onFocus?: OnChangeCallback;
+interface BaseFieldProps {
+  id?: string;
+  testID?: string;
+  title?: string;
   placeholder?: string;
-  type?: TextFieldType;
+  iconName?: IconName;
+  onIconClick?: () => void;
+  onBlur?: OnChangeCallback;
+  onChange: OnChangeCallback;
+  onEnter?: () => void;
+  onFocus?: () => void;
+  onSubmitEditing?: () => void;
+  blurOnSubmit?: boolean;
+  disabled?: boolean; // default false
   value?: string;
-  style?: any;
-  // If type === search, indicates whether to show the search icon or spinner
-  searching?: boolean;
+}
+
+export interface HelperTextProps {
+  helperText?: string;
+}
 
+export interface ErrorTextProps {
+  errorText?: string;
+}
+
+export interface TextFieldProps extends BaseFieldProps, HelperTextProps, ErrorTextProps {
+  type?: "email" | "password" | "phoneNumber" | "search" | "text" | "url";
+
+  autoComplete?: "current-password" | "on" | "off" | "username";
   returnKeyType?: "done" | "go" | "next" | "search" | "send";
 
-  // TODO: still needed?
-  autoFocus?: boolean;
   grow?: boolean;
-  // react-native-autofocus
-  inputRef?: any;
-  onSubmitEditing?: any;
-  onEnter?: any;
-  // blurOnSubmit defaults to true
-  // if blurOnSubmit is false and multiline is true, return will create a new line
-  blurOnSubmit?: boolean;
   multiline?: boolean;
   rows?: number;
-  height?: number;
-  // Required for type=numberRange
+
+  inputRef?: any;
+}
+
+export interface TextAreaProps extends Omit<TextFieldProps, "multiline" | "type"> {}
+
+export interface NumberFieldProps extends BaseFieldProps, HelperTextProps, ErrorTextProps {
+  type: "number" | "decimal";
   min?: number;
   max?: number;
-  // Options to translate values
-  transformValue?: TransformValueOptions;
 }
 
-export type TextAreaProps = TextFieldProps;
+export interface NumberRangeFieldProps extends BaseFieldProps, HelperTextProps, ErrorTextProps {
+  type: "numberRange" | "decimalRange";
+  min: number;
+  max: number;
+}
 
-export interface SwitchProps extends FieldWithLabelsProps {
-  id?: string;
-  onChange: (value: boolean) => void;
-  disabled?: boolean;
-  name?: string;
-  switched: boolean;
-  // Pattern Addition
-  label?: string;
+export interface DateTimeFieldProps extends BaseFieldProps, HelperTextProps, ErrorTextProps {
+  type: "date" | "datetime" | "time";
+  value?: string; // ISO string always
+  onChange: (date: string) => void;
+  dateFormat?: string;
+  pickerType?: "default" | "compact" | "inline" | "spinner";
+  showTimezone?: boolean; // defaults to true
+  timezone?: string;
 }
 
-export interface MaskProps {
-  children?: ReactChildren;
-  shape?: "circle" | "rounded" | "square";
-  height?: number | string;
-  width?: number | string;
-  maxHeight?: number | string;
-  maxWidth?: number | string;
-  rounding?: "circle" | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-  willChangeTransform?: boolean;
-  wash?: boolean;
+export interface EmailFieldProps extends BaseFieldProps, HelperTextProps, ErrorTextProps {}
+
+export interface PhoneNumberFieldProps extends BaseFieldProps, HelperTextProps, ErrorTextProps {
+  /**
+   * Defaults to "US"
+   */
+  defaultCountryCode?: CountryCode;
 }
 
-export interface IconRowProps {
-  icon: string;
-  label: string;
-  value: string;
+export interface URLFieldProps extends BaseFieldProps, HelperTextProps, ErrorTextProps {}
+
+export interface SearchFieldProps extends BaseFieldProps, HelperTextProps, ErrorTextProps {}
+
+export interface PercentFieldProps extends BaseFieldProps, HelperTextProps, ErrorTextProps {}
+
+export interface CurrencyFieldProps extends BaseFieldProps, HelperTextProps, ErrorTextProps {}
+
+export interface AddressFieldProps
+  extends Omit<BaseFieldProps, "value" | "onChange" | "onBlur">,
+    HelperTextProps,
+    ErrorTextProps {
+  includeCounty?: boolean;
+  googleMapsApiKey?: string;
+  googlePlacesMobileStyles?: Styles;
+  value: AddressInterface;
+  onChange: (value: AddressInterface) => void;
+  onBlur?: (value: AddressInterface) => void;
 }
 
 export interface LinkProps {
   href: string;
-  inline?: boolean;
-  children?: ReactChild;
+  text: string;
   onClick?: () => void;
-  target?: null | "blank";
-}
+  // TODO: support target on link
+  // target?: null | "blank";
+}
+
+export type Rounding =
+  | "minimal" // alias "sm"
+  | "default" // alias "md"
+  | "full" // alias "lg"
+  | "rounded" // alias "3xl"
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl"
+  | "2xl"
+  | "3xl";
+
+const ROUNDING_MAP = {
+  minimal: 2,
+  default: 3,
+  full: 16,
+  rounded: 360,
+  sm: 2,
+  md: 4,
+  lg: 16,
+  xl: 32,
+  "2xl": 128,
+  "3xl": 360,
+};
 
-export type Rounding = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | "circle" | "pill";
+export function getRounding(rounding: Rounding) {
+  return ROUNDING_MAP[rounding];
+}
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface HeadingProps {
   align?: "left" | "right" | "center" | "justify"; // default "left"
   children?: React.ReactNode;
-  color?: AllColors;
+  color?: TextColor;
   overflow?: "normal" | "breakWord"; // default "breakWord"
-  size?: "sm" | "md" | "lg";
+  size?: "sm" | "md" | "lg" | "xl"; // default "sm"
   truncate?: boolean; // default false
   testID?: string;
 }
@@ -2057,22 +767,32 @@ export interface BackButtonInterface {
   onBack: () => void;
 }
 
-export interface CheckBoxProps {
-  onChange: ({value}: {value: boolean}) => void;
-  checked?: boolean;
+export interface BooleanFieldProps extends HelperTextProps, ErrorTextProps {
+  title?: string;
+  variant?: "simple" | "title"; // default "simple"
   disabled?: boolean;
-  hasError?: boolean;
-  indeterminate?: boolean;
-  name?: string;
-  onClick?: any;
-  size?: "sm" | "md";
-  color?: AllColors;
-  radio?: boolean;
+  disabledHelperText?: string;
+  value: boolean;
+  onChange: (value: boolean) => void;
+}
 
-  label?: string;
-  subLabel?: string;
-  labelColor?: AllColors;
-  testID?: string;
+export interface CheckBoxProps {
+  /**
+   * The background color of the checkbox.
+   * @default "default"
+   */
+  bgColor?: "default" | "accent" | "black";
+
+  /**
+   * If true, the checkbox is selected.
+   */
+  selected: boolean;
+
+  /**
+   * The size of the checkbox.
+   * @default "md"
+   */
+  size?: "sm" | "md" | "lg";
 }
 
 interface LayoutRectangle {
@@ -2106,7 +826,7 @@ export interface SplitPageProps {
   // boolean to initiate and handle state from the app that has imported ferns-ui
   showItemList?: boolean;
   loading?: boolean;
-  color?: Color;
+  color?: SurfaceColor;
   keyboardOffset?: number;
   renderListViewItem: (itemInfo: ListRenderItemInfo<any>) => ReactElement | null;
   renderListViewHeader?: () => ReactElement | null;
@@ -2531,34 +1251,29 @@ export type ActionSheetProps = {
   onPositionChanged?: (hasReachedTop: boolean) => void;
 };
 
-export type AvatarStatus =
-  | "online"
-  | "offline"
-  | "doNotDisturb"
-  | "away"
-  | "meeting"
-  | "vacation"
-  | "sick"
-  | "outOfOffice"
-  | "commuting";
+export type AvatarStatus = "offline" | "online" | "outOfOffice" | "activeMobile" | "imagePicker";
+
+export type AvatarImagePickerEvent = {
+  avatarImageFormat?: string;
+  base64?: string;
+  uri?: string;
+  height?: number;
+  width?: number;
+};
+
+export interface CustomSvgProps extends SvgProps {
+  doNotDisturb?: boolean;
+}
 
 export interface AvatarProps {
-  // Color for the background of the circle when no src picture is present.
-  backgroundColor?: AllColors;
-  // Color for the initials when no src picture is present.
-  textColor?: AllColors;
   /**
    * The name of the user. This is used for the placeholder treatment if an image is not available.
    */
   name: string;
-  /**
-   * Override the generated initials from `name`.
-   */
-  initials?: string;
   /**
    * Adds a white border around Avatar so it's visible when displayed on other images.
    */
-  outline?: boolean;
+  hasBorder?: boolean;
   /**
    * xs: 24px, sm: 32px, md: 48px, lg: 64px, xl: 120px.
    */
@@ -2568,137 +1283,262 @@ export interface AvatarProps {
    */
   src?: string;
   /**
-   * The fit for the image within the Avatar: "cover" | "contain" | "none".
-   * Default is undefined. See Image.tsx for more info
+   * Function to handle the avatar image edit
    */
-  imageFit?: "cover" | "contain" | "none";
+  onChange?: (val: AvatarImagePickerEvent) => void;
   /**
-   * Allow user to edit the image of the avatar
+   * The status of the user to display with the avatar.
    */
-  editAvatarImage?: boolean;
+  status?: AvatarStatus;
   /**
-   * Function to handle the avatar image edit
+   * If true, the status will have a "Z" to indicate the user has snoozed notifications.
    */
-  onChange?: (val: any) => void;
+  doNotDisturb?: boolean;
   /**
-   * Resize image width. If only the width is provided, the image will preserve aspect ratio
+   * Accessibility label for the avatar image.
    */
-  avatarImageWidth?: number;
+  accessibilityLabel?: string;
+}
+
+export interface BadgeProps {
   /**
-   * Resize image height. If avatarImageWidth is also provided, the image aspect ratio may be
-   * distorted.
+   * When status is "custom", determines the badge's background color.
    */
-  avatarImageHeight?: number;
+  customBackgroundColor?: string;
   /**
-   * The image format that the image will be saved as after any edits by the expo-image-manipulator
+   * When status is "custom", determines the badge's border color.
    */
-  avatarImageFormat?: SaveFormat;
+  customBorderColor?: string;
   /**
-   * The status of the user to display with the avatar.
+   * When status is "custom", determines the badge's icon color
    */
-  status?: AvatarStatus;
+  customIconColor?: IconColor;
   /**
-   * If true, the status indicator will show a mobile icon instead of a dot, if status is one of
-   * "online", "away", "offline", or "doNotDisturb". Will show the normal status icon in other
-   * cases.
+   * When status is "custom", determines the badge's icon
    */
-  statusMobile?: boolean;
+  customIconName?: IconName;
   /**
-   * Text to show when hovering over the avatar image. Only works on web.
+   * When status is "custom", determines the badge's text color.
    */
-  statusText?: string;
+  customTextColor?: string;
   /**
-   * If edit icon should be present when no image is present
+   * The name of the icon to display in the badge.
    */
-  shouldShowEditIconIfNoImage?: boolean;
-}
+  iconName?: IconName;
 
-export interface BadgeProps {
-  // If `type` is set to "custom", a custom theme color should be provided.
-  color?: AllColors;
-  fontColor?: AllColors; // default "white"
-  fontWeight?: TextProps["weight"]; // default "bold"
-  iconProps?: IconProps;
-  // The text to display inside the badge.
-  title?: string;
-  // Position relative to the text. Top should only be used with headings.
-  position?: "bottom" | "top" | "middle"; // default "middle"
-  rounding?: Rounding;
-  size?: "xs" | "sm" | "md" | "lg"; // default "xs'
-  // Some default badge types. Occasionally, a custom badge might be required for different color
-  // schemes.
-  type?: "info" | "error" | "warning" | "success" | "neutral" | "custom"; // default "info
-}
+  // TODO: improve type discrimination
+  // used for numberOnly variant to display "${maxValue}+" when value is greater than max
 
-export interface BannerProps {
-  id: string;
-  customButtonProps?: Partial<ButtonProps>;
-  color?: BoxColor;
-  dismissible?: boolean;
-  iconName?: IconName;
-  negativeXMargin?: number;
-  onClick?: () => void;
-  shape?: Rounding;
-  subtext?: string;
-  text: string;
-  textColor?: TextColor;
-  type?: "dismiss" | "action" | "permanent" /* deprectiated */ | "customButton";
-  width?: number | string;
-}
+  /**
+   * The maximum value to display. Used for "numberOnly" variant to display "${maxValue}+" when
+   * value is greater than max.
+   */
+  maxValue?: number;
 
-export interface BodyProps {
-  scroll?: boolean;
-  loading?: boolean;
-  padding?: UnsignedUpTo12;
-  height?: number | string;
-  avoidKeyboard?: boolean; // default true
-  children?: ReactNode;
-}
+  /**
+   * If true, the badge will have a secondary style.
+   * @default false
+   */
+  secondary?: boolean;
 
-export interface ButtonProps {
-  alignSelf?: FlexStyle["alignSelf"];
-  text: string;
-  // TODO make this work for all colors
-  color?: ButtonColor | Color;
-  // default gray
-  disabled?: boolean; // default false
-  inline?: boolean; // default false
-  size?: "xs" | "sm" | "md" | "lg"; // default md
-  type?: "solid" | "ghost" | "outline"; // default solid
+  /**
+   * The status of the badge. Determines its color and appearance.
+   * @default "info"
+   */
+  status?: "info" | "error" | "warning" | "success" | "neutral" | "custom";
+
+  /**
+   * The text or number to display inside the badge.
+   */
+  value?: number | string;
+
+  /**
+   * The variant of the badge. Determines if it displays an icon or number only.
+   */
+  variant?: "iconOnly" | "numberOnly";
+}
+
+type BannerButtonProps = {
+  /**
+   * Text to display on optional banner button, will display button if provided
+   */
+  buttonText: string;
+  /**
+   * Icon to display on optional banner button
+   */
+  buttonIconName?: IconName;
+};
+
+export interface BannerPropsBase {
+  /**
+   * Used to identify if banner has been dismissed by the user.
+   */
+  id: string;
+  /**
+   * The text to display in the main body of the banner.
+   */
+  text: string;
+  /**
+   * The status of the banner changes the color of the banner.
+   * @default "info"
+   */
+  status?: "info" | "alert" | "warning";
+  /**
+   * Allows the banner to be dismissed and removed by clicking X button on the right.
+   * @default false
+   */
+  dismissible?: boolean; // default false
+  /**
+   * Renders triangle with exclamation mark icon to the left of banner content.
+   * @default false
+   */
+  hasIcon?: boolean;
+  /**
+   * Function called when optional button on banner is clicked.
+   */
+  buttonOnClick?: () => void | Promise<void>;
+}
+
+export type BannerProps =
+  | (BannerPropsBase & {buttonOnClick?: undefined})
+  | (BannerPropsBase & {buttonOnClick: () => void | Promise<void>} & BannerButtonProps);
+
+export interface BodyProps {
+  scroll?: boolean;
   loading?: boolean;
-  onClick: any;
-  icon?: IconName;
-  iconPrefix?: IconPrefix;
-  iconColor?: ButtonColor | Color;
-  withConfirmation?: boolean;
+  padding?: UnsignedUpTo12;
+  height?: number | string;
+  avoidKeyboard?: boolean; // default true
+  children?: ReactNode;
+}
+
+export interface ButtonProps {
+  /**
+   * The text content of the confirmation modal.
+   * @default "Are you sure you want to continue?"
+   */
   confirmationText?: string;
-  confirmationHeading?: string;
-  shape?: "rounded" | "pill";
+  /**
+   * If true, the button will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If true, the button will take the full width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * The name of the icon to display in the button.
+   */
+  iconName?: IconName;
+  /**
+   * The position of the icon within the button.
+   * @default "left"
+   */
+  iconPosition?: "left" | "right";
+  /**
+   * If true, a loading spinner will be shown in the button.
+   */
+  loading?: boolean;
+  /**
+   * The title of the confirmation modal.
+   * @default "Confirm"
+   */
+  modalTitle?: string;
+  /**
+   * The subtitle of the confirmation modal.
+   */
+  modalSubTitle?: string;
+  /**
+   * The test ID for the button, used for testing purposes.
+   */
   testID?: string;
-  tooltip?: {
-    text: string;
-    idealDirection?: TooltipDirection;
-  };
+  /**
+   * The text content of the button.
+   */
+  text: string;
+  /**
+   * The position of the tooltip.
+   */
+  tooltipIdealPosition?: TooltipPosition;
+  /**
+   * Include an arrow in the tooltip. Pointing to the button.
+   * @default false
+   */
+  tooltipIncludeArrow?: boolean;
+  /**
+   * The text content of the tooltip.
+   */
+  tooltipText?: string;
+  /**
+   * The type of the button, which determines its style.
+   * @default "primary"
+   */
+  variant?: "primary" | "secondary" | "muted" | "outline" | "destructive";
+  /**
+   * If true, a confirmation modal will be shown before the onClick action.
+   */
+  withConfirmation?: boolean;
+  /**
+   * The function to call when the button is clicked.
+   */
+  onClick: () => void | Promise<void>;
 }
 
-export interface CustomSelectProps {
-  value: string;
-  onChange: (value?: string) => void;
-  options: Array<{label: string; value: string}>;
+export interface CustomSelectFieldProps {
+  /**
+   * The current value of the select field.
+   */
+  value: string | undefined;
+
+  /**
+   * The function to call when the selected value changes.
+   */
+  onChange: (value: string | undefined) => void;
+
+  /**
+   * The options available for selection in the select field.
+   * Each option should have a label and a value.
+   */
+  options: FieldOption[];
+
+  /**
+   * The placeholder text to display when no option is selected.
+   */
+
   placeholder?: string;
+  /**
+   * If true, the select field will be disabled.
+   * @default false
+   */
   disabled?: boolean;
-  label?: string;
-  labelColor?: string;
+
+  /**
+   * The error text to display if there is an error.
+   */
+  errorText?: string;
+
+  /**
+   * The helper text to display below the select field.
+   */
+  helperText?: string;
+
+  /**
+   * The title of the select field.
+   */
+  title?: string;
 }
+
 export interface DateTimeActionSheetProps {
   value?: string;
-  mode?: "date" | "time" | "datetime";
+  type?: "date" | "time" | "datetime";
   // Returns an ISO 8601 string. If mode is "time", the date portion is today.
   onChange: OnChangeCallback;
   actionSheetRef: React.RefObject<any>;
   visible: boolean;
   onDismiss: () => void;
-  transformValue?: TransformValueOptions;
+  timezone?: string;
 }
 
 export interface DecimalRangeActionSheetProps {
@@ -2714,57 +1554,53 @@ export interface DecimalRangeActionSheetState {
   decimal: string;
 }
 
+export interface DismissButtonProps {
+  /**
+   * The accessibility hint describes the results of performing an action on a control or view.
+   * It should be a very brief description of the result of interacting with the button.
+   */
+  accessibilityHint: string;
+
+  /**
+   * The accessibility label attribute identifies the user interface element.
+   * It should be a very brief description of the element, such as "Dismiss".
+   */
+  accessibilityLabel: string;
+  /**
+   * A function to call when the button is clicked,
+   * function should result in hiding the element rendering the dismiss button.
+   */
+  onClick: () => void;
+  /**
+   * Color of the icon on the dismiss button
+   * @default "primary"
+   */
+  color?: IconColor;
+}
 export interface ErrorPageProps {
   error: Error;
   resetError: () => void;
 }
 
-export interface FieldProps extends FieldWithLabelsProps {
-  name?: string;
-  label?: string;
-  height?: number;
-  type?:
-    | "address"
-    | "boolean"
-    | "currency"
-    | "customSelect"
-    | "date"
-    | "datetime"
-    | "email"
-    | "multiselect"
-    | "number"
-    | "password"
-    | "percent"
-    | "phoneNumber"
-    | "select"
-    | "signature"
-    | "text"
-    | "textarea"
-    | "time"
-    | "url";
-  rows?: number;
-  value?: any;
-  onChange?: any;
-  onBlur?: any;
-  onStart?: any;
-  onEnd?: any;
-  options?: SelectListOptions;
-  placeholder?: string;
-  disabled?: boolean;
-  useCheckbox?: boolean;
-  includeCounty?: boolean;
-  googleMapsApiKey?: string;
-  googlePlacesMobileStyles?: Styles;
-  transformValue?: TransformValueOptions;
-}
-
-export interface FormLineProps {
-  name: string;
-  value: any;
-  onSave: (value: any) => void;
-  kind: "boolean" | "string" | "textarea" | "select" | "multiboolean";
-  options?: string[];
-}
+export type FieldProps =
+  | TextFieldProps
+  | NumberFieldProps
+  | NumberRangeFieldProps
+  | DateTimeFieldProps
+  | (MultiselectFieldProps & {type: "multiselect"})
+  | (TextAreaProps & {type: "textarea"})
+  | (SelectFieldProps & {type: "select"})
+  | (CustomSelectFieldProps & {type: "customSelect"})
+  | (EmailFieldProps & {type: "email"})
+  | (PhoneNumberFieldProps & {type: "phoneNumber"})
+  | (BooleanFieldProps & {type: "boolean"})
+  | (RadioFieldProps & {type: "radio"})
+  | (SignatureFieldProps & {type: "signature"})
+  | (SearchFieldProps & {type: "search"})
+  | (AddressFieldProps & {type: "address"});
+// | (CurrencyFieldProps & {type: "currency"});
+// | (PercentFieldProps & {type: "percent"});
+// | URLFieldProps
 
 export interface HeightActionSheetProps {
   value?: string;
@@ -2785,34 +1621,88 @@ export interface HyperlinkProps {
 }
 
 export interface IconButtonProps {
-  prefix?: IconPrefix;
-  icon: IconName;
+  /**
+   * The accessibility hint describes the results of performing an action on a control or view.
+   * It should be a very brief description of the result of interacting with the button.
+   */
+  accessibilityHint?: string;
+
+  /**
+   * The accessibility label attribute identifies the user interface element.
+   * It should be a very brief description of the element, such as "Add", "Play", "Deleted", etc.
+   */
   accessibilityLabel: string;
-  iconColor: "darkGray" | ButtonColor | ThemeColor | Color;
-  onClick: () => void;
-  size?: IconSize;
-  bgColor?:
-    | "transparent"
-    | "transparentDarkGray"
-    | "gray"
-    | "lightGray"
-    | "white"
-    | "primary" // used for active states
-    | "background"
-    | "backgroundSecondary"; // default transparent
-  disabled?: boolean;
-  selected?: boolean;
-  withConfirmation?: boolean;
-  confirmationText?: string;
+
+  /**
+   * The heading of the confirmation modal.
+   * @default "Confirm"
+   */
   confirmationHeading?: string;
-  tooltip?: {
-    text: string;
-    idealDirection?: TooltipDirection;
-  };
-  indicator?: boolean;
-  indicatorNumber?: number;
-  indicatorStyle?: {position: IndicatorDirection; color: AllColors};
+
+  /**
+   * The text content of the confirmation modal.
+   * @default "Are you sure you want to continue?"
+   */
+  confirmationText?: string;
+
+  /**
+   * Show a small indicator icon in the lower right corner of the button.
+   */
+  indicator?: "error" | "warning" | "success" | "primary" | "neutral";
+
+  /**
+   * The text or number to display in the indicator. If not provided,
+   * the indicator will be a solid circle.
+   */
+  indicatorText?: number | string;
+
+  /**
+   * The name of the icon to display in the button.
+   */
+  iconName: IconName;
+
+  /**
+   * If true, a loading spinner will be shown in the button.
+   */
+  loading?: boolean;
+
+  /**
+   * The test ID for the button, used for testing purposes.
+   */
   testID?: string;
+
+  /**
+   * The ideal position of the tooltip.
+   */
+  tooltipIdealPosition?: TooltipPosition;
+
+  /**
+   * Include an arrow in the tooltip. Pointing to the button.
+   * @default false
+   */
+  tooltipIncludeArrow?: boolean;
+
+  /**
+   * The text content of the tooltip.
+   */
+  tooltipText?: string;
+
+  /**
+   * The variant of the button, which determines its style.
+   * @default "primary"
+   */
+  variant?: "primary" | "secondary" | "muted" | "destructive" | "navigation";
+
+  /**
+   * If true, a confirmation modal will be shown before the onClick action.
+   * @default false
+   */
+  withConfirmation?: boolean;
+
+  /**
+   * The function to call when the button is clicked.
+   */
+  onClick: () => void | Promise<void>;
 }
 
 export interface InfoTooltipButtonProps {
@@ -2821,29 +1711,55 @@ export interface InfoTooltipButtonProps {
 }
 
 export interface ModalProps {
-  onDismiss: () => void;
-  visible: boolean;
-  // Alignment of the header. Default is "center".
-  align?: "center" | "start";
-  // Element to render in the middle part of the modal.
+  /**
+   * The content of the modal.
+   */
   children?: React.ReactElement;
-  // Element to render in the bottom of the modal. This takes precedence over primaryButton and
-  // secondaryButton.
-  footer?: React.ReactElement;
-  heading?: string;
-  size?: "sm" | "md" | "lg";
-  subHeading?: string;
-  // Renders a primary colored button all the way to the right in the footer, if no footer prop is
-  // provided.
-  primaryButtonText?: string;
-  primaryButtonOnClick?: (value?: any) => void;
+  /**
+   * If true, the primary button will be disabled.
+   * @default false
+   */
   primaryButtonDisabled?: boolean;
-  // Renders a gray button to the left of the primary button in the footer, if no footer prop is
-  // provided. Requires primaryButtonText to be defined, but is not required itself.
+  /**
+   * The text content of the primary button.
+   */
+  primaryButtonText?: string;
+  /**
+   * The text content of the secondary button.
+   */
   secondaryButtonText?: string;
-  secondaryButtonOnClick?: (value?: any) => void;
-  // Whether to show a close button in the upper left of modals or action sheets.
-  showClose?: boolean;
+  /**
+   * The size of the modal.
+   * @default "sm"
+   */
+  size?: "sm" | "md" | "lg";
+  /**
+   * The subtitle of the modal.
+   */
+  subtitle?: string;
+  /**
+   * The text content of the modal.
+   */
+  text?: string;
+  /**
+   * The title of the modal.
+   */
+  title?: string;
+  /**
+   * If true, the modal will be visible.
+   */
+  visible: boolean;
+  /**
+   */
+  onDismiss: () => void;
+  /**
+   * The function to call when the primary button is clicked.
+   */
+  primaryButtonOnClick?: (value?: any) => void | Promise<void>;
+  /**
+   * The function to call when the secondary button is clicked.
+   */
+  secondaryButtonOnClick?: (value?: any) => void | Promise<void>;
 }
 
 export interface NumberPickerActionSheetProps {
@@ -2865,7 +1781,7 @@ export interface PageProps {
   closeButton?: boolean;
   direction?: "row" | "column";
   padding?: UnsignedUpTo12;
-  color?: Color;
+  color?: SurfaceColor;
   maxWidth?: number | string;
   keyboardOffset?: number;
   footer?: any;
@@ -2875,21 +1791,32 @@ export interface PageProps {
   onError?: (error: Error, stack: any) => void;
 }
 
-export interface PogProps {
-  active?: boolean;
-  bgColor?: "transparent" | "transparentDarkGray" | "gray" | "lightGray" | "white" | "blue";
-  focused?: boolean;
-  hovered?: boolean;
+export interface ProgressBarProps {
+  color: SurfaceColor;
+  completed: number;
+}
+
+export interface RadioProps {
   selected?: boolean;
-  iconColor?: AllColors;
-  icon: IconName;
-  iconPrefix?: IconPrefix;
-  size?: IconSize;
 }
 
-export interface ProgressBarProps {
-  color: Color;
-  completed: number;
+export interface RadioFieldProps {
+  title: string;
+  variant?: "leftText" | "rightText"; // default "rightText"
+  value: string;
+  onChange: (value: string) => void;
+  options: FieldOption[];
+}
+
+export interface SignatureFieldProps {
+  disabled?: boolean; // default "default"
+  value?: string;
+  onChange: (value: any) => void;
+  title?: string; // default "Signature"
+  onStart?: () => void;
+  onEnd?: () => void;
+  disabledText?: string;
+  errorText?: string;
 }
 
 export interface SideDrawerProps {
@@ -2911,7 +1838,7 @@ export interface SideDrawerProps {
 
 export interface SpinnerProps {
   size?: "sm" | "md";
-  color?: Color;
+  color?: "light" | "dark" | "accent" | "secondary";
 }
 
 export type ColumnSortInterface = {
@@ -2928,6 +1855,19 @@ export interface TableProps {
    * Width of columns in the table. This is used to calculate the width of each column.
    * Can be numbers for pixels or strings for percentages.
    */
+  // in figma/ jos documentation for the component, TableTitle,
+  // she included the width as prop size
+  /**
+   * The size of the table title.
+   * Can be one of "sm", "md", "lg", or "xl".
+   */
+  // size: "sm" | "md" | "lg" | "xl";
+  //   const width = {
+  //   sm: 82,
+  //   md: 161,
+  //   lg: 233,
+  //   xl: 302,
+  // };
   columns: Array<number | string>;
   /**
    * Specify a border width for Table: "sm" is 1px.
@@ -2958,6 +1898,10 @@ export interface TableProps {
    * Set the page outside of the Table
    */
   setPage?: (page: number) => void;
+  /**
+   * Set the total number of pages of the Table
+   */
+  totalPages?: number;
   /**
    * If true, the table will render a next page button. Defaults to true.
    */
@@ -2968,6 +1912,12 @@ export interface TableProps {
   extraControls?: React.ReactElement;
 }
 
+export interface PaginationProps {
+  page: number;
+  setPage: (page: number) => void;
+  totalPages: number;
+}
+
 export interface TableHeaderProps {
   /**
    * Must be an instance of TableRow.
@@ -2990,10 +1940,21 @@ export interface TableHeaderCellProps {
   /**
    * The content of the table header cell.
    */
-  children: ReactElement;
+  children?: ReactElement;
   index: number;
   sortable?: boolean;
   onSortChange?: (direction: "asc" | "desc" | undefined) => void;
+  /**
+   * The alignment of the text/components in the cell. Most cells should be left aligned,
+   * unless the column is for a badge, icon, or boolean, then center align.
+   * It should be right if the column is right aligned text or numbers.
+   */
+  align?: "left" | "center" | "right";
+  /**
+   * If title is provided, the text will be wrapped in a TableTitle, saving you from having to
+   * wrap the text yourself. Alignments will match between the cell and the title.
+   */
+  title?: string;
 }
 
 export interface TableRowProps {
@@ -3041,18 +2002,14 @@ export interface TableContextProviderProps extends TableContextType {
 export interface TextProps {
   align?: "left" | "right" | "center" | "justify"; // default "left"
   children?: React.ReactNode;
-  color?: AllColors;
-  inline?: boolean; // default false
+  bold?: boolean; // default false
+  color?: TextColor;
   italic?: boolean; // default false
-  onPress?: () => void;
-  overflow?: "normal" | "breakWord"; // deprecated
   size?: TextSize; // default "md"
   truncate?: boolean; // default false
-  font?: Font;
   underline?: boolean;
   numberOfLines?: number;
   skipLinking?: boolean;
-  weight?: "bold" | "normal";
   testID?: string;
 }
 
@@ -3064,64 +2021,168 @@ export interface TextFieldPickerActionSheetProps {
 }
 
 export interface ToastProps {
-  message: string;
-  data: {
-    variant?: "default" | "warning" | "error";
-    buttonText?: string;
-    buttonOnClick?: () => void | Promise<void>;
-    persistent?: boolean;
-    onDismiss?: () => void;
-  };
+  title: string;
+  variant?: "error" | "info" | "success" | "warning";
+  secondary?: boolean;
+  size?: "sm" | "lg";
+  onDismiss?: () => void;
+  persistent?: boolean;
+  // TODO enforce these should only show if size is "lg" with type discrinimation
+  subtitle?: string;
+  // TODO Add buttons for Toast
+  // buttonText?: string;
+  // buttonOnClick?: () => void | Promise<void>;
 }
 
 export interface TooltipProps {
+  /**
+   * The content of the tooltip.
+   */
   children: React.ReactElement;
-  // If text is undefined, the children will be rendered without a tooltip.
+
+  /**
+   * If true, an arrow will be included in the tooltip.
+   * @default false
+   */
+  includeArrow?: boolean;
+
+  /**
+   * The ideal position of the tooltip.
+   * @default "top"
+   */
+  idealPosition?: "top" | "bottom" | "left" | "right";
+
+  /**
+   * The text content of the tooltip. If text is undefined,
+   * the children will be rendered without a tooltip.
+   */
   text?: string;
-  idealDirection?: "top" | "bottom" | "left" | "right";
-  bgColor?: "white" | "lightGray" | "gray" | "darkGray";
 }
 
 export interface LinkProps extends TextProps {
   href: string;
 }
 
-export interface WithLabelProps {
-  children?: ReactChildren;
-  show?: boolean;
-  label?: string;
-  labelInline?: boolean;
-  labelColor?: AllColors;
-  labelJustifyContent?: JustifyContent;
-  labelAlignItems?: AlignItems;
-  labelPlacement?: "before" | "after";
-  labelSize?: TextSize;
-}
-
-export interface TapToEditProps extends Omit<FieldProps, "onChange" | "value"> {
+export type TapToEditProps =
+  | (BaseTapToEditProps &
+      Omit<TextFieldProps, "onChange" | "value"> & {
+        type: "password" | "text" | "url";
+      })
+  | (BaseTapToEditProps &
+      Omit<NumberFieldProps, "onChange" | "value"> & {
+        type: "number" | "decimal";
+      })
+  | (BaseTapToEditProps &
+      Omit<NumberRangeFieldProps, "onChange" | "value"> & {
+        type: "numberRange" | "decimalRange";
+      })
+  | (BaseTapToEditProps &
+      Omit<DateTimeFieldProps, "onChange" | "value"> & {
+        type: "date" | "datetime" | "time";
+      })
+  | (BaseTapToEditProps &
+      Omit<MultiselectFieldProps, "onChange" | "value"> & {
+        type: "multiselect";
+      })
+  | (BaseTapToEditProps &
+      Omit<TextAreaProps, "onChange" | "value"> & {
+        type: "textarea";
+      })
+  | (BaseTapToEditProps &
+      Omit<SelectFieldProps, "onChange" | "value"> & {
+        type: "select";
+      })
+  | (BaseTapToEditProps &
+      Omit<CustomSelectFieldProps, "onChange" | "value"> & {
+        type: "customSelect";
+      })
+  | (BaseTapToEditProps &
+      Omit<EmailFieldProps, "onChange" | "value"> & {
+        type: "email";
+      })
+  | (BaseTapToEditProps &
+      Omit<PhoneNumberFieldProps, "onChange" | "value"> & {
+        type: "phoneNumber";
+      })
+  | (BaseTapToEditProps &
+      Omit<BooleanFieldProps, "onChange" | "value"> & {
+        type: "boolean";
+      })
+  | (BaseTapToEditProps &
+      Omit<RadioFieldProps, "onChange" | "value"> & {
+        type: "radio";
+      })
+  | (BaseTapToEditProps &
+      Omit<SignatureFieldProps, "onChange" | "value"> & {
+        type: "signature";
+      })
+  | (BaseTapToEditProps &
+      Omit<SearchFieldProps, "onChange" | "value"> & {
+        type: "search";
+      })
+  | (BaseTapToEditProps &
+      Omit<AddressFieldProps, "onChange" | "value"> & {
+        type: "address";
+      });
+
+export interface BaseTapToEditProps extends Omit<FieldProps, "onChange" | "value"> {
   title: string;
   value: any;
-  // Not required if not editable.
+
+  /**
+   * Not required if not editable.
+   */
   setValue?: (value: any) => void;
-  // Not required if not editable.
+
+  /**
+   * Not required if not editable.
+   */
   onSave?: (value: any) => void | Promise<void>;
-  // Defaults to true
+
+  /**
+   * If false, the field will not be editable and will be disabled
+   * @default true
+   */
   editable?: boolean;
-  // enable edit mode from outside the component
+
+  /**
+   * Enable edit mode from outside the component.
+   */
   isEditing?: boolean;
-  // For changing how the non-editing row renders
-  rowBoxProps?: Partial<BoxProps>;
   transform?: (value: any) => string;
-  fieldComponent?: (setValue: () => void) => ReactElement;
+  /**
+   * Show a confirmation modal before saving the value.
+   * @default false
+   */
   withConfirmation?: boolean;
+
+  /**
+   * The text content of the confirmation modal.
+   * @default "Are you sure you want save your changes?"
+   */
   confirmationText?: string;
-  confirmationHeading?: string;
-  description?: string;
-  openApiModel?: string;
-  openApiField?: string;
-  showDescriptionAsTooltip?: boolean;
-  // Default true. If false, description is shown below the value always.
-  onlyShowDescriptionWhileEditing?: boolean;
+
+  /**
+   * The title of the confirmation modal.
+   * @default "Confirm"
+   */
+  confirmationTitle?: string;
+
+  /**
+   * Field helperText, a description of the field surfaced in the UI
+   * @default "Confirm"
+   */
+  helperText?: string;
+
+  /**
+   * Only display the helperText in the UI while editing. if false, the helperText is always shown below the value.
+   * @default true
+   */
+  onlyShowHelperTextWhileEditing?: boolean;
+
+  // openApi to supported in future
+  // openApiModel?: string;
+  // openApiField?: string;
 }
 
 export interface APIError {
@@ -3207,3 +2268,263 @@ export interface ModelAdminCustomComponentProps extends Omit<FieldProps, "name">
   // user: User;
   editing: boolean; // Allow for inline editing of the field.
 }
+
+export interface MultiselectFieldProps extends HelperTextProps, ErrorTextProps {
+  /**
+   * The available options for the multiselect field.
+   */
+  options: FieldOption[];
+
+  /**
+   * The title of the multiselect field.
+   */
+  title: string;
+
+  /**
+   * The selected values of the multiselect field.
+   */
+  value: string[];
+
+  /**
+   * The variant of the multiselect field, which determines the position of the text.
+   * @default "rightText"
+   */
+  variant?: "rightText" | "leftText";
+
+  /**
+   * The function to call when the selected values change.
+   */
+  onChange: (selected: string[]) => void;
+}
+
+export interface TableTitleProps {
+  /**
+   * The text content of the table title.
+   */
+  title: string;
+
+  /**
+   * Most titles should be left aligned, but some may be centered, such as badges or booleans.
+   * It should match the alignment of the column.
+   * @default "left"
+   */
+  align?: "left" | "center" | "right";
+}
+
+export interface TableBooleanProps {
+  /**
+   * If true, the component is in editing mode.
+   * @default false
+   */
+  isEditing?: boolean;
+
+  /**
+   * The function to call when the value is saved.
+   */
+  onSave?: () => void | Promise<void>;
+
+  /**
+   * The boolean value to be displayed or edited.
+   */
+  value: boolean;
+}
+
+export interface TableDateProps {
+  /**
+   * If true, the date is annotated.
+   * @default false
+   */
+  annotated?: boolean;
+
+  /**
+   * If true, the component is in editing mode.
+   * @default false
+   */
+  isEditing?: boolean;
+
+  /**
+   * The function to call when the value is saved.
+   */
+  onSave?: () => void;
+
+  /**
+   * The date value to be displayed or edited. Can be a string or a Date object.
+   */
+  value: string | Date;
+}
+
+export interface TableIconButtonProps {
+  /**
+   * The name of the icon button to display in the table.
+   * Can be one of "edit", "saveAndClose", "insert", "drawerOpen", or "drawerClose".
+   */
+  tableIconButtonName: "edit" | "saveAndClose" | "insert" | "drawerOpen" | "drawerClose";
+
+  /**
+   * The function to call when the icon button is clicked.
+   */
+  onClick: () => void | Promise<void>;
+}
+
+export type FieldOption = {
+  /**
+   * The label to display for the option.
+   */
+  label: string;
+
+  /**
+   * The key of the option. Useful for uniquely identifying the option.
+   */
+  key?: string;
+
+  /**
+   * The value of the option.
+   */
+  value: string;
+};
+
+// Split up SelectField so if value is passed as a string,
+export interface SelectFieldPropsBase {
+  /**
+   * If true, the select field will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * The error text to display if there is an error.
+   */
+  errorText?: string;
+
+  /**
+   * The helper text to display below the select field.
+   */
+  helperText?: string;
+
+  /**
+   * The options available for selection in the select field.
+   * Each option should have a label and a value.
+   */
+  options: FieldOption[];
+
+  /**
+   * The placeholder text to display when no option is selected.
+   */
+  placeholder?: string;
+
+  /**
+   * The title of the select field.
+   */
+  title?: string;
+}
+
+export interface SelectFieldPropsWithoutRequire extends SelectFieldPropsBase {
+  /**
+   * Whether the select field should have an empty "---" button to return undefined.
+   * @default false
+   */
+  requireValue?: false;
+
+  /**
+   * The current value of the select field.
+   */
+  value?: string;
+
+  /**
+   * The function to call when the selected value changes.
+   */
+  onChange: (value: string | undefined) => void;
+}
+
+export interface SelectFieldPropsWithRequire extends SelectFieldPropsBase {
+  /**
+   * When requireValue is true, the value is required and onChange will return a string.
+   */
+  requireValue: true;
+
+  /**
+   * The current value of the select field.
+   */
+  value: string;
+
+  /**
+   * The function to call when the selected value changes.
+   */
+  onChange: (value: string) => void;
+}
+
+export type SelectFieldProps = SelectFieldPropsWithoutRequire | SelectFieldPropsWithRequire;
+
+export interface TableBadgeProps {
+  /**
+   * The icon name of the badge.
+   */
+  badgeIconName?: BadgeProps["iconName"];
+
+  /**
+   * The status of the badge.
+   * @default "info"
+   */
+  badgeStatus?: BadgeProps["status"];
+
+  /**
+   * If true, the component is in editing mode.
+   * @default false
+   */
+  isEditing?: boolean;
+
+  /**
+   * The options available for editing the badge.
+   */
+  editingOptions?: FieldOption[];
+
+  /**
+   * The function to call when the badge status is saved.
+   */
+  onSave?: (newStatus: string | undefined) => void | Promise<void>;
+
+  /**
+   * The value of the badge.
+   */
+  value: string;
+}
+
+export interface TableTextProps {
+  /**
+   * Whether the text field is in editing mode.
+   */
+  isEditing?: boolean;
+  /**
+   * The text to display in the text field.
+   */
+  value: string;
+  /**
+   * Callback to save the text field value.
+   */
+  onSave?: () => void | Promise<void>;
+  /**
+   * The alignment of the text field. Most text fields should be left aligned.
+   * @default "left"
+   */
+  align?: "left" | "center" | "right";
+}
+
+export interface TableNumberProps {
+  /**
+   * Whether the text field is in editing mode.
+   */
+  isEditing?: boolean;
+  /**
+   * The number to display in the text field.
+   */
+  value: string;
+  /**
+   * Callback to save the text field value.
+   */
+  onSave?: () => void | Promise<void>;
+  /**
+   * Numbers generally should be right aligned for ease of scanability.
+   * @default "right"
+   */
+  align?: "left" | "right";
+}