@theroutingcompany/components 0.0.26-alpha.1 → 0.0.26-alpha.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theroutingcompany/components",
-  "version": "0.0.26-alpha.1",
+  "version": "0.0.26-alpha.11",
   "description": "The Routing Company Components",
   "main": "./dist/trc-components.umd.js",
   "module": "./dist/trc-components.es.js",
@@ -21,9 +21,11 @@
     "types"
   ],
   "scripts": {
-    "ready:prerelease": "./scripts/prerelease.sh",
-    "ready:release": "./scripts/release.sh",
-    "prepublish": "npm run build",
+    "debug:reset:modules": "rm -f -- package-lock.json && rm -rf node_modules && npm i",
+    "link:tokens": "./scripts/link-tokens.sh",
+    "break:cache": "rm -rf node_modules && npm i --package-lock && npm run start --force",
+    "ready:prerelease": "npm run build && ./scripts/prerelease.sh",
+    "ready:release": "npm run build && ./scripts/release.sh",
     "format": "prettier ./src/**/*.{ts,tsx} --write --no-config",
     "clean": "rimraf ./dist ./types",
     "storybook": "storybook dev -p 6006",
@@ -36,9 +38,7 @@
     "build:components": "vite build",
     "build": "npm run clean && npm run build:components && npm run build:types",
     "chromatic": "npx chromatic --project-token=df154c51409f",
-    "deploy": "npm run chromatic",
-    "cy:open": "cypress open",
-    "cy:run": "cypress run"
+    "deploy": "npm run chromatic"
   },
   "sideEffects": false,
   "license": "UNLICENSED",
@@ -99,10 +99,16 @@
     "@react-types/combobox": "^3.6.2",
     "@react-types/datepicker": "^3.3.1",
     "@react-types/overlays": "^3.7.2",
+    "@types/styled-system": "^5.1.16",
     "@react-types/select": "^3.8.1",
     "@tanstack/react-table": "^8.9.1",
-    "@theroutingcompany/design-tokens": "0.0.4-alpha.0",
-    "csstype": "^3.1.2"
+    "@theroutingcompany/design-tokens": "^0.0.4-alpha.3",
+    "@styled-system/prop-types": "^5.1.2",
+    "@styled-system/props": "^5.1.5",
+    "csstype": "^3.1.2",
+    "react-transition-group": "^4.4.5",
+    "styled-components": "^5.3.9",
+    "styled-system": "^5.1.5"
   },
   "peerDependencies": {
     "@material-ui/icons": "^4.11.3",
@@ -135,7 +141,6 @@
     "@typescript-eslint/parser": "^5.58.0",
     "@vitejs/plugin-react": "^3.1.0",
     "chromatic": "^6.17.3",
-    "cypress": "^12.14.0",
     "eslint": "^8.38.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
@@ -150,7 +155,7 @@
     "react-is": "^18.2.0",
     "rimraf": "^5.0.0",
     "storybook": "^7.0.3",
-    "styled-components": "^5.3.9",
+    "styled-components": "^5.3.11",
     "stylelint": "^15.2.0",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-standard": "^32.0.0",

package/types/{src/components → components}/AccessibleIcon/AccessibleIcon.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import * as AccessibleIconPrimitive from '@radix-ui/react-accessible-icon';
-export declare function AccessibleIcon({ children, label, }: AccessibleIconPrimitive.AccessibleIconProps): JSX.Element;
+export declare function AccessibleIcon({ children, label, }: AccessibleIconPrimitive.AccessibleIconProps): import("react/jsx-runtime").JSX.Element;

package/types/{src/components → components}/AlertDialog/AlertDialog.d.ts

@@ -6,7 +6,7 @@ type StyledContentProps = {
     size?: DialogWidth;
 };
 export type AlertDialogContentProps = StyledContentProps & AlertDialogPrimitive.DialogContentProps & ComponentPropsWithRef<'div'>;
-export declare function AlertDialogContent({ children, size, ...props }: AlertDialogContentProps): JSX.Element;
+export declare function AlertDialogContent({ children, size, ...props }: AlertDialogContentProps): import("react/jsx-runtime").JSX.Element;
 export declare const AlertDialogTitle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>, any, {}, never>;
 export declare const AlertDialogDescription: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>, any, {}, never>;
 export declare const AlertDialogFooter: import("styled-components").StyledComponent<"footer", any, {}, never>;
@@ -15,5 +15,5 @@ export declare const AlertDialogTrigger: import("react").ForwardRefExoticCompone
 export declare const AlertDialogAction: import("react").ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogActionProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const AlertDialogCancel: import("react").ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogCancelProps & import("react").RefAttributes<HTMLButtonElement>>;
 /** AlertDialog Cancel Button positioned in top right with × */
-export declare const AlertDialogCancelButton: ({ children, ...buttonProps }: AlertDialogPrimitive.AlertDialogCancelProps) => JSX.Element;
+export declare const AlertDialogCancelButton: ({ children, ...buttonProps }: AlertDialogPrimitive.AlertDialogCancelProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/types/{src/components → components}/Badge/Badge.d.ts

@@ -23,7 +23,7 @@ declare const colors: {
 };
 type BadgeVariant = keyof typeof colors;
 export type BadgeProps = PropsWithChildren<{
-    variant?: BadgeVariant;
+    variant: BadgeVariant;
 }>;
-export declare function Badge({ children, variant }: BadgeProps): JSX.Element;
+export declare function Badge({ children, variant }: BadgeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/types/components/Box/Box.d.ts

@@ -0,0 +1,17 @@
+import type * as Polymorphic from 'helpers';
+import { type SpacingTokenValues } from 'helpers/tokenUtils';
+import type React from 'react';
+import type { BorderProps, ColorProps, FlexboxProps, GridGapProps, GridProps, LayoutProps, PositionProps, ResponsiveValue, ShadowProps, SpaceProps, TypographyProps } from 'styled-system';
+interface CustomSpaceProps extends SpaceProps {
+    gap?: ResponsiveValue<SpacingTokenValues>;
+}
+export interface BoxProps extends BorderProps, ColorProps, FlexboxProps, GridProps, GridGapProps, LayoutProps, Omit<PositionProps, 'zIndex'>, // Override because styled-system by default only allows numbers here
+ShadowProps, CustomSpaceProps, TypographyProps {
+    truncate?: boolean;
+    children?: React.ReactNode;
+    zIndex?: ResponsiveValue<string | number>;
+}
+type PolymorphicBox = Polymorphic.ForwardRefComponent<'div', BoxProps>;
+export declare const boxSystem: import("styled-system").styleFn;
+export declare const Box: PolymorphicBox;
+export default Box;

package/types/{src/components → components}/Button/Button.d.ts

@@ -1,7 +1,5 @@
-import type React from 'react';
 import { type ComponentPropsWithoutRef, type PropsWithChildren } from 'react';
 import { type AriaButtonProps } from '@react-aria/button';
-import type { BoxProps } from 'components/Box/Box';
 import type { Prettify, RenameMisprefixedProps } from '../../helpers';
 type Variant = 'primary' | 'secondary' | 'danger' | 'inverse';
 type Size = 'small' | 'large';
@@ -18,14 +16,12 @@ type ButtonDesignProps = {
     variant?: Variant;
     size?: Size;
 };
-export type ButtonBaseProps = BoxProps & {
-    buttonPadding?: string;
+export type ButtonBaseProps = {
+    paddingSize: Size;
 };
 type ReactAriaProps = RenameMisprefixedProps<AriaButtonProps, 'is', 'isDisabled'>;
 export type ButtonProps = Prettify<PropsWithChildren<ButtonDesignProps & ReactAriaProps & {
-    test?: React.ElementType | null;
-} & {
     onClick?: ReactAriaProps['onPress'];
 } & Pick<ComponentPropsWithoutRef<'button'>, 'form'>>>;
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default Button;
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/types/components/Button/ButtonBase.d.ts

@@ -0,0 +1,6 @@
+import type { ButtonBaseProps } from './Button';
+export declare const buttonPadding: {
+    readonly small: "0.5rem 0.75rem";
+    readonly large: "0.75rem 1rem";
+};
+export declare const ButtonBase: import("styled-components").StyledComponent<"button", any, ButtonBaseProps, never>;

package/types/components/Button/HighEmphasisButton/HighEmphasisButton.d.ts

@@ -0,0 +1,6 @@
+export declare const highEmphasisButtons: {
+    readonly primary: import("styled-components").StyledComponent<"button", any, import("../Button").ButtonBaseProps, never>;
+    readonly secondary: import("styled-components").StyledComponent<"button", any, import("../Button").ButtonBaseProps, never>;
+    readonly danger: import("styled-components").StyledComponent<"button", any, import("../Button").ButtonBaseProps, never>;
+    readonly inverse: import("styled-components").StyledComponent<"button", any, import("../Button").ButtonBaseProps, never>;
+};

package/types/components/Button/LowEmphasisButton/LowEmphasisButton.d.ts

@@ -0,0 +1,5 @@
+export declare const lowEmphasisButtons: {
+    readonly primary: import("styled-components").StyledComponent<"button", any, import("../Button").ButtonBaseProps, never>;
+    readonly danger: import("styled-components").StyledComponent<"button", any, import("../Button").ButtonBaseProps, never>;
+    readonly inverse: import("styled-components").StyledComponent<"button", any, import("../Button").ButtonBaseProps, never>;
+};

package/types/components/Button/MediumEmphasisButton/MediumEmphasisButton.d.ts

@@ -0,0 +1,5 @@
+export declare const mediumEmphasisButtons: {
+    readonly primary: import("styled-components").StyledComponent<"button", any, import("../Button").ButtonBaseProps, never>;
+    readonly danger: import("styled-components").StyledComponent<"button", any, import("../Button").ButtonBaseProps, never>;
+    readonly inverse: import("styled-components").StyledComponent<"button", any, import("../Button").ButtonBaseProps, never>;
+};

package/types/components/ButtonV2/ButtonV2.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { type ClickHandler, type FocusHandler } from 'helpers';
+export type Variant = 'primary' | 'secondary' | 'tertiary' | 'danger';
+export type Size = 'small' | 'large';
+export declare const buttonV2System: import("styled-system").styleFn;
+export declare const StyledButtonBox: import("styled-components").StyledComponent<import("helpers").ForwardRefComponent<"div", import("components/Box/Box").BoxProps>, any, any, never>;
+export interface ButtonPropsV2 {
+    'data-id'?: string;
+    as?: React.ElementType;
+    to?: string;
+    toTitle?: string;
+    variant?: Variant;
+    disabled?: boolean;
+    size?: Size;
+    fullWidth?: boolean;
+    submit?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    onClick?: ClickHandler;
+    onFocus?: FocusHandler;
+    onBlur?: FocusHandler;
+}
+export declare const ButtonV2: import("react").ForwardRefExoticComponent<ButtonPropsV2 & import("react").RefAttributes<HTMLButtonElement>>;
+export default ButtonV2;

package/types/components/ButtonV2/styles.d.ts

@@ -0,0 +1,25 @@
+import type { Size, Variant } from './ButtonV2';
+export declare function focus({ buttonColor }: {
+    buttonColor?: string;
+}): string;
+export declare const reset: () => string;
+export declare const base: () => string;
+export type LoadingProp = {
+    $loading?: boolean;
+};
+export declare const childwrapper: (props: LoadingProp) => string;
+export declare const disabled: (props: {
+    disabled: boolean;
+}) => "\n      opacity: 0.6;\n      &:hover {\n        cursor: not-allowed;\n      }\n    " | undefined;
+export declare const fullWidth: (props: {
+    fullWidth: boolean;
+}) => "\n      display: block;\n      width: 100%;\n    " | undefined;
+export declare const group: () => string;
+export declare const primary: import("styled-components").FlattenSimpleInterpolation;
+export declare const secondary: import("styled-components").FlattenSimpleInterpolation;
+export declare const tertiary: import("styled-components").FlattenSimpleInterpolation;
+export declare const danger: import("styled-components").FlattenSimpleInterpolation;
+export declare const getVariantStyles: (variant: Variant) => import("styled-components").FlattenSimpleInterpolation | undefined;
+export declare const small: import("styled-components").FlattenSimpleInterpolation;
+export declare const large: import("styled-components").FlattenSimpleInterpolation;
+export declare const getDefaultSize: (size: Size) => import("styled-components").FlattenSimpleInterpolation | undefined;

package/types/{src/components → components}/Calendar/Calendar.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { type DateValue } from '@internationalized/date';
 import type { CalendarProps } from '@react-aria/calendar';
 export default function Calendar({ timeZone, ...props }: CalendarProps<DateValue> & {
     timeZone: string;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/types/components/Calendar/CalendarCell.d.ts

@@ -0,0 +1,11 @@
+import { type CalendarDate } from '@internationalized/date';
+import type { RangeCalendarState } from '@react-stately/calendar';
+type CalendarCellProps = {
+    state: RangeCalendarState;
+    date: CalendarDate;
+    currentMonth: CalendarDate;
+    disabled?: boolean | undefined;
+    today: CalendarDate;
+};
+export declare function CalendarCell({ state, date, today, disabled, currentMonth, }: CalendarCellProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/types/{src/components → components}/Calendar/CalendarGrid.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type DateDuration } from '@internationalized/date';
 import type { CalendarState, RangeCalendarState } from '@react-stately/calendar';
 interface CalendarGridProps<T> {
@@ -6,5 +5,5 @@ interface CalendarGridProps<T> {
     offset?: DateDuration;
     timeZone: string;
 }
-export declare function CalendarGrid<T extends CalendarState | RangeCalendarState>({ state, ...props }: CalendarGridProps<T>): JSX.Element;
+export declare function CalendarGrid<T extends CalendarState | RangeCalendarState>({ state, ...props }: CalendarGridProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/types/{src/components → components}/Calendar/CalendarHeader.d.ts

@@ -6,4 +6,4 @@ export declare function CalendarHeader({ state, calendarProps, prevButtonProps,
     calendarProps: DOMAttributes<any>;
     prevButtonProps: AriaButtonProps;
     nextButtonProps: AriaButtonProps;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/types/{src/components → components}/Calendar/RangeCalendar.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { type DateValue } from '@internationalized/date';
 import { type RangeCalendarProps } from '@react-aria/calendar';
 export declare function RangeCalendar({ timeZone, ...props }: RangeCalendarProps<DateValue> & {
     timeZone: string;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/types/{src/components → components}/Calendar/TimeDateSelect.d.ts

@@ -1,8 +1,10 @@
 import type { ReactNode } from 'react';
 import React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import { TODOFIXME } from 'helpers';
 export interface TimeDateSelectProps {
-    children: ReactNode;
+    onTimeChange?: TODOFIXME;
+    onDateChange?: TODOFIXME;
 }
 export declare const TimeDateSelect: React.ForwardRefExoticComponent<TimeDateSelectProps & React.RefAttributes<HTMLDivElement>>;
 export interface TimeDateSelectItemProps extends SelectPrimitive.SelectItemProps {

package/types/{src/components → components}/ComboBox/ComboBox.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import type { ComboBoxProps } from "@react-types/combobox";
 export { Item, Section } from "@react-stately/collections";
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
-export declare function ComboBox<T extends object>(props: ComboBoxProps<T>): JSX.Element;
+export declare function ComboBox<T extends object>(props: ComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;

package/types/{src/components → components}/Connect/Connect.d.ts

@@ -3,7 +3,7 @@ export type ConnectProps = {
     children?: React.ReactNode;
     left?: React.ReactNode;
     right?: React.ReactNode;
-    flexChildren?: string;
+    fullWidth?: boolean;
 };
 declare function Connect(props: ConnectProps): JSX.Element;
 declare namespace Connect {

package/types/{src/components → components}/Dialog/Dialog.d.ts

@@ -12,7 +12,7 @@ type StyledContentProps = {
 };
 export declare const dialogContentStyles: import("styled-components").FlattenSimpleInterpolation;
 export type DialogContentProps = StyledContentProps & DialogPrimitive.DialogContentProps & ComponentPropsWithRef<'div'>;
-export declare function DialogContent({ children, size, ...props }: DialogContentProps): JSX.Element;
+export declare function DialogContent({ children, size, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
 export declare const dialogTitleStyles: string;
 export declare const DialogTitle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>, any, {}, never>;
 export declare const dialogDescriptionStyles: import("styled-components").FlattenSimpleInterpolation;
@@ -20,7 +20,7 @@ export declare const DialogDescription: import("styled-components").StyledCompon
 export declare const DialogFooter: import("styled-components").StyledComponent<"footer", any, {}, never>;
 export declare const dialogCloseButtonStyles: import("styled-components").FlattenSimpleInterpolation;
 /** Dialog Close Button positioned in top right with × */
-export declare const DialogCloseButton: ({ children, ...buttonProps }: DialogPrimitive.DialogCloseProps) => JSX.Element;
+export declare const DialogCloseButton: ({ children, ...buttonProps }: DialogPrimitive.DialogCloseProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Dialog: import("react").FC<DialogPrimitive.DialogProps>;
 export declare const DialogTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const DialogClose: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;

package/types/{src/components → components}/Drawer/Drawer.d.ts

@@ -4,7 +4,7 @@ import * as Dialog from '@radix-ui/react-dialog';
 export declare const DrawerRoot: import("react").FC<Dialog.DialogProps>;
 export declare const DrawerTrigger: import("react").ForwardRefExoticComponent<Dialog.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const DrawerTitle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Dialog.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>, any, {}, never>;
-export declare const DrawerCloseButton: () => JSX.Element;
+export declare const DrawerCloseButton: () => import("react/jsx-runtime").JSX.Element;
 export declare const DrawerDescription: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Dialog.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>, any, {}, never>;
 export declare const DrawerSectionTitle: import("styled-components").StyledComponent<"span", any, {}, never>;
 declare const widths: {
@@ -16,7 +16,7 @@ export type DrawerSize = keyof typeof widths;
 type DrawerProps = PropsWithChildren<{
     size?: DrawerSize;
 }> & Dialog.DialogPortalProps;
-export declare function Drawer({ children, size, ...props }: DrawerProps): JSX.Element;
+export declare function Drawer({ children, size, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
 export declare const DrawerAccordionRoot: import("react").ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & import("react").RefAttributes<HTMLDivElement>>;
 export type DrawerSectionProps = AccordionPrimitive.AccordionItemProps;
 /** CSS Variables to control child styles of section closed/open state
@@ -32,5 +32,5 @@ export type DrawerSectionHeaderProps = {
     children: ReactNode;
     icon: ReactNode;
 };
-export declare function DrawerSectionHeader({ children, icon, }: DrawerSectionHeaderProps): JSX.Element;
+export declare function DrawerSectionHeader({ children, icon, }: DrawerSectionHeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/types/{src/components → components}/Fieldset/Fieldset.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ComponentPropsWithoutStyles } from '../../helpers/typeHelpers';
 export declare const StyledFieldSet: import("styled-components").StyledComponent<"fieldset", any, {}, never>;
 /** Adding disabled to `<fieldset>` will disable all inputs inside it HTML wise,
@@ -18,5 +17,5 @@ export declare const StyledFieldSet: import("styled-components").StyledComponent
  * </Fieldset>
  * ```
  */
-export declare function Fieldset({ children, disabled, ...fieldsetProps }: ComponentPropsWithoutStyles<'fieldset'>): JSX.Element;
+export declare function Fieldset({ children, disabled, ...fieldsetProps }: ComponentPropsWithoutStyles<'fieldset'>): import("react/jsx-runtime").JSX.Element;
 export declare function useFieldset(): boolean;

package/types/components/Flex/Flex.d.ts

@@ -0,0 +1,11 @@
+import { type BoxProps } from 'components/Box/Box';
+import type { ReactNode } from 'react';
+export type FlexProps = {
+    'data-id'?: string;
+    children?: ReactNode;
+} & BoxProps;
+export declare function Flex(props: FlexProps): JSX.Element;
+export declare namespace Flex {
+    var displayName: string;
+}
+export default Flex;

package/types/{src/components → components}/FormControl/FormControl.d.ts

@@ -8,7 +8,7 @@ type FormControlProps<FieldProps = AriaFieldProps> = PropsWithChildren<{
 } & FieldProps>;
 /** If in a `<FormControl/>`, read `fieldProps` generated by that FormControl's `useField` hook  */
 export declare function useFieldProps(): FieldAria['fieldProps'];
-export declare function FormControl({ children, label, errorMessage, description, tooltipContent, tooltipIcon, validationState, id, ...props }: FormControlProps): JSX.Element;
+export declare function FormControl({ children, label, errorMessage, description, tooltipContent, tooltipIcon, validationState, id, ...props }: FormControlProps): import("react/jsx-runtime").JSX.Element;
 export declare const TextFormControl: import("react").ForwardRefExoticComponent<{
     tooltipContent?: string | undefined;
     tooltipIcon?: ReactNode;
@@ -21,15 +21,15 @@ export declare const TextAreaFormControl: import("react").ForwardRefExoticCompon
 } & AriaFieldProps & {
     children?: ReactNode;
 } & ComponentPropsWithoutStyles<"textarea"> & {
-    type?: "url" | "search" | "text" | (string & {}) | "tel" | "email" | "password" | undefined;
     label?: ReactNode;
     pattern?: string | undefined;
+    type?: "search" | "text" | (string & {}) | "tel" | "url" | "email" | "password" | undefined;
     name?: string | undefined;
     defaultValue?: string | undefined;
     autoFocus?: boolean | undefined;
     id?: string | undefined;
     placeholder?: string | undefined;
-    inputMode?: "url" | "search" | "text" | "none" | "tel" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
     'aria-describedby'?: string | undefined;
@@ -55,16 +55,20 @@ export declare const TextAreaFormControl: import("react").ForwardRefExoticCompon
     disabled?: boolean | undefined;
     value?: string | undefined;
     autoComplete?: string | undefined;
-    required?: boolean | undefined;
     maxLength?: number | undefined;
     minLength?: number | undefined;
     readOnly?: boolean | undefined;
+    required?: boolean | undefined;
     description?: ReactNode;
     onFocusChange?: ((isFocused: boolean) => void) | undefined;
     excludeFromTabOrder?: boolean | undefined;
     validationState?: import("@react-types/shared").ValidationState | undefined;
     errorMessage?: ReactNode;
-} & import("components/Input/InputBase").InputBaseProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+} & {
+    borderRadius?: import("components/Input/InputBase").InputRadius | undefined;
+    paddingSize?: import("components/Input/InputBase").InputSize | undefined;
+    height?: string | number | undefined;
+} & import("components/Input/InputBase").FullWidth & import("react").RefAttributes<HTMLTextAreaElement>>;
 export declare const NumberFormControl: import("react").ForwardRefExoticComponent<{
     tooltipContent?: string | undefined;
     tooltipIcon?: ReactNode;
@@ -73,7 +77,11 @@ export declare const NumberFormControl: import("react").ForwardRefExoticComponen
 } & Omit<import("../../helpers/typeHelpers").RenameBooleanProps<import("@react-types/numberfield").AriaNumberFieldProps>, "minValue" | "maxValue"> & {
     min?: number | undefined;
     max?: number | undefined;
-} & import("components/Input/InputBase").InputBaseProps & {
+} & {
+    borderRadius?: import("components/Input/InputBase").InputRadius | undefined;
+    paddingSize?: import("components/Input/InputBase").InputSize | undefined;
+    height?: string | number | undefined;
+} & import("components/Input/InputBase").FullWidth & {
     name?: string | undefined;
 } & {
     showStepper?: boolean | undefined;

package/types/components/IconButton/IconButton.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { type AriaButtonProps } from '@react-aria/button';
+type Size = 'small' | 'large';
+type Variant = 'primary' | 'secondary' | 'danger' | 'inverse';
+type Shape = 'circle' | 'square';
+export type StyledIconButtonProps = AriaButtonProps & {
+    onClick?: AriaButtonProps['onPress'] | undefined;
+} & {
+    label: string;
+    size?: Size;
+    variant?: Variant;
+    shape?: Shape;
+    disabled?: boolean;
+};
+/** Be sure to add add a `label` prop. Note `aria-label` is already taken care of by the `label` prop.
+ * ```jsx
+ * <IconButton label="Add new item">
+ *   <AddIcon/>
+ * </IconButton>
+ *
+ */
+export declare const IconButton: import("react").ForwardRefExoticComponent<AriaButtonProps<"button"> & {
+    onClick?: AriaButtonProps['onPress'] | undefined;
+} & {
+    label: string;
+    size?: Size | undefined;
+    variant?: Variant | undefined;
+    shape?: Shape | undefined;
+    disabled?: boolean | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/types/components/Input/InlineEdit/InlineEdit.d.ts

@@ -0,0 +1,21 @@
+import { TODOFIXME } from 'helpers';
+import type { ReactNode } from 'react';
+export declare const EditButtonRight: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("components/Button/Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+type TextAlign = 'left' | 'center';
+export interface InlineEditProps {
+    'data-id'?: string;
+    children: ReactNode;
+    defaultValue?: string;
+    placeholder?: string;
+    fullWidth?: boolean;
+    minWidth?: string;
+    textAlign?: TextAlign;
+    hideIcon?: boolean;
+    p?: string;
+    onChange?: TODOFIXME;
+}
+export declare const InlineEdit: {
+    ({ children, placeholder, defaultValue, minWidth, hideIcon, fullWidth, textAlign, p, onChange, ...rest }: InlineEditProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/types/{src/components → components}/Input/InputBase.d.ts

@@ -1,12 +1,20 @@
 import tokens from '@theroutingcompany/design-tokens';
 export type InputSize = 'small' | 'large';
 export type InputRadius = typeof tokens.border_radius_0 | typeof tokens.border_radius_100 | typeof tokens.border_radius_200 | typeof tokens.border_radius_400 | typeof tokens.border_radius_800;
+export type FullWidth = {
+    fullWidth?: true;
+};
 export type InputBaseProps = {
-    paddingSize?: InputSize;
     borderRadius?: InputRadius;
-};
-export declare const InputBase: import("styled-components").StyledComponent<"input", any, InputBaseProps, never>;
-export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+    paddingSize?: InputSize;
+    height?: number | string;
+} & FullWidth;
+export declare const InputBase: import("styled-components").StyledComponent<"input", any, {
+    borderRadius?: InputRadius | undefined;
+    paddingSize?: InputSize | undefined;
+    height?: string | number | undefined;
+} & FullWidth, never>;
+export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, FullWidth, never>;
 export declare const InputErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const InputDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const EndIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/types/{src/components → components}/Input/NumberInput/NumberInput.d.ts

@@ -2,7 +2,7 @@
 import { type AriaNumberFieldProps } from '@react-aria/numberfield';
 import { type NumberFieldStateOptions } from '@react-stately/numberfield';
 import type { ComponentPropsWithoutStyles, RenameBooleanProps, RenameMissuffixedProps } from '../../../helpers/typeHelpers';
-import { type InputBaseProps } from '../InputBase';
+import { type FullWidth, type InputBaseProps } from '../InputBase';
 type ReactAriaNumberInputProps = RenameMissuffixedProps<RenameBooleanProps<AriaNumberFieldProps>, 'Value', 'minValue' | 'maxValue'>;
 type ShowStepper = {
     showStepper?: boolean;
@@ -35,7 +35,11 @@ export type NumberInputProps = ReactAriaNumberInputProps & InputBaseProps & Stan
 export declare const NumberInput: import("react").ForwardRefExoticComponent<Omit<RenameBooleanProps<AriaNumberFieldProps>, "minValue" | "maxValue"> & {
     min?: number | undefined;
     max?: number | undefined;
-} & InputBaseProps & StandardInputProps & ShowStepper & {
+} & {
+    borderRadius?: import("../InputBase").InputRadius | undefined;
+    paddingSize?: import("../InputBase").InputSize | undefined;
+    height?: string | number | undefined;
+} & FullWidth & StandardInputProps & ShowStepper & {
     locale?: string | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/types/{src/components → components}/Input/TextArea/TextArea.d.ts

@@ -4,5 +4,9 @@ import type { RenameBooleanProps } from '../../../helpers/typeHelpers';
 import { type InputBaseProps } from '../InputBase';
 type ReactAriaInputProps = Omit<RenameBooleanProps<AriaTextFieldOptions<'textarea'>>, 'inputElementType'>;
 export type TextAreaInputProps = ReactAriaInputProps & InputBaseProps;
-export declare const TextAreaInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & InputBaseProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export declare const TextAreaInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & {
+    borderRadius?: import("../InputBase").InputRadius | undefined;
+    paddingSize?: import("../InputBase").InputSize | undefined;
+    height?: string | number | undefined;
+} & import("../InputBase").FullWidth & import("react").RefAttributes<HTMLTextAreaElement>>;
 export {};

package/types/{src/components → components}/Input/TextInput/TextInput.d.ts

@@ -4,12 +4,18 @@ import type { RenameBooleanProps } from '../../../helpers/typeHelpers';
 import { type InputBaseProps, type InputRadius } from '../InputBase';
 type ReactAriaInputProps = Omit<RenameBooleanProps<AriaTextFieldOptions<'input'>>, 'inputElementType'>;
 interface CustomTextInputProps {
-    focus?: boolean | undefined;
+    focus?: boolean;
+    fullWidth?: boolean;
+    height?: number | string;
     inputBorderRadius?: InputRadius;
     connectLeft?: React.ReactNode | null;
     connectRight?: React.ReactNode | null;
     className?: string;
 }
 export type TextInputProps = ReactAriaInputProps & InputBaseProps & CustomTextInputProps;
-export declare const TextInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & InputBaseProps & CustomTextInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const TextInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & {
+    borderRadius?: InputRadius | undefined;
+    paddingSize?: import("../InputBase").InputSize | undefined;
+    height?: string | number | undefined;
+} & import("../InputBase").FullWidth & CustomTextInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/types/components/Input/TimeInput/TimeInput.d.ts

@@ -0,0 +1,9 @@
+import { TODOFIXME } from 'helpers';
+export { Time } from '@internationalized/date';
+interface TimeInputProps {
+    label?: string;
+    defaultValue?: TODOFIXME;
+    value?: TODOFIXME;
+    onChange?: TODOFIXME;
+}
+export declare function TimeInput(props: TimeInputProps): import("react/jsx-runtime").JSX.Element;

package/types/{src/components → components}/Label/Label.d.ts

@@ -9,4 +9,4 @@ export interface LabelProps extends ComponentPropsWithoutStyles<'label'> {
     children: ReactNode;
     as?: 'legend' | 'span' | undefined;
 }
-export declare function Label({ children, bold, size, display, srOnly, ...remainingProps }: LabelProps): JSX.Element;
+export declare function Label({ children, bold, size, display, srOnly, ...remainingProps }: LabelProps): import("react/jsx-runtime").JSX.Element;