@theroutingcompany/components 0.0.18 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theroutingcompany/components",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "The Routing Company Components",
   "main": "./dist/trc-components.umd.js",
   "module": "./dist/trc-components.es.js",
@@ -39,20 +39,21 @@
   "dependencies": {
     "@internationalized/date": "3.1.0",
     "@material-ui/icons": "^4.11.3",
-    "@radix-ui/react-accessible-icon": "^1.0.1",
-    "@radix-ui/react-alert-dialog": "^1.0.2",
-    "@radix-ui/react-checkbox": "^1.0.2",
-    "@radix-ui/react-collapsible": "^1.0.1",
-    "@radix-ui/react-dialog": "^1.0.2",
+    "@radix-ui/react-accessible-icon": "^1.0.2",
+    "@radix-ui/react-alert-dialog": "^1.0.3",
+    "@radix-ui/react-checkbox": "^1.0.3",
+    "@radix-ui/react-collapsible": "^1.0.2",
+    "@radix-ui/react-dialog": "^1.0.3",
+    "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@radix-ui/react-polymorphic": "^0.0.14",
-    "@radix-ui/react-popover": "^1.0.4",
-    "@radix-ui/react-radio-group": "^1.1.1",
-    "@radix-ui/react-select": "^1.2.0",
-    "@radix-ui/react-separator": "^1.0.1",
-    "@radix-ui/react-switch": "^1.0.1",
-    "@radix-ui/react-tabs": "^1.0.2",
-    "@radix-ui/react-toast": "^1.1.2",
-    "@radix-ui/react-toggle-group": "^1.0.2",
+    "@radix-ui/react-popover": "^1.0.5",
+    "@radix-ui/react-radio-group": "^1.1.2",
+    "@radix-ui/react-select": "^1.2.1",
+    "@radix-ui/react-separator": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.3",
+    "@radix-ui/react-toast": "^1.1.3",
+    "@radix-ui/react-toggle-group": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.4",
     "@react-aria/breadcrumbs": "3.5.0",
     "@react-aria/button": "3.7.0",
@@ -90,14 +91,17 @@
     "@react-types/select": "3.7.0",
     "@tanstack/react-table": "^8.7.9",
     "@theroutingcompany/design-tokens": "^0.0.3",
-    "styled-components": "^5.3.6"
+    "csstype": "^3.1.1"
   },
   "peerDependencies": {
     "@material-ui/icons": "^4.11.3",
-    "react": "^18.0.0",
-    "react-dom": " ^18.0.0",
-    "react-is": " ^18.0.0",
-    "styled-components": "^5.3.6"
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "csstype": "^3.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "styled-components": "^5.3.9"
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",
@@ -122,11 +126,11 @@
     "@typescript-eslint/parser": "^5.54.0",
     "@vitejs/plugin-react": "^3.1.0",
     "chromatic": "^6.17.1",
-    "csstype": "^3.1.1",
     "eslint": "^8.35.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.11",
     "postcss-styled-syntax": "^0.3.3",
     "prettier": "^2.8.4",
@@ -135,6 +139,7 @@
     "react-is": "^18.2.0",
     "rimraf": "^4.1.2",
     "storybook": "^7.0.0-beta.21",
+    "styled-components": "^5.3.9",
     "stylelint": "^15.2.0",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-standard": "^30.0.1",

package/types/components/AlertDialog/AlertDialog.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import type { ComponentPropsWithRef } from 'react';
-import { dialogWidths } from 'components/Dialog/Dialog';
+import { dialogWidths } from '../../components/Dialog/Dialog';
 type DialogWidth = keyof typeof dialogWidths;
 type StyledContentProps = {
     size?: DialogWidth;
@@ -15,4 +15,6 @@ export declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps
 export declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
+/** AlertDialog Cancel Button positioned in top right with × */
+export declare const AlertDialogCancelButton: ({ children, ...buttonProps }: AlertDialogPrimitive.AlertDialogCancelProps) => JSX.Element;
 export {};

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

@@ -0,0 +1,133 @@
+import type { Property } from 'csstype';
+import type { PropsWithChildren } from 'react';
+import type { BorderRadiusToken, ElevationToken, RemoveVendorProperties, SizingToken, SpacingToken } from '../../helpers/tokenUtils';
+export type BoxProps = PropsWithChildren<{
+    display?: 'block' | 'inline-block' | 'contents' | 'none' | 'inline';
+    position?: RemoveVendorProperties<Property.Position>;
+    top?: Property.Top<SpacingToken>;
+    bottom?: Property.Bottom<SpacingToken>;
+    left?: Property.Left<SpacingToken>;
+    right?: Property.Right<SpacingToken>;
+    zIndex?: Property.ZIndex;
+    /** width */
+    w?: RemoveVendorProperties<Property.Width<SizingToken>>;
+    /** min-width */
+    minW?: RemoveVendorProperties<Property.MinWidth<SizingToken>>;
+    /** max-width */
+    maxW?: RemoveVendorProperties<Property.MaxWidth<SizingToken>>;
+    /** height */
+    h?: RemoveVendorProperties<Property.Height<SizingToken>>;
+    /** min-height */
+    minH?: RemoveVendorProperties<Property.MinHeight<SizingToken>>;
+    /** max-height */
+    maxH?: RemoveVendorProperties<Property.MaxHeight<SizingToken>>;
+    /** margin */
+    m?: RemoveVendorProperties<Property.Margin<SpacingToken>>;
+    /** margin-top */
+    mt?: RemoveVendorProperties<Property.MarginTop<SpacingToken>>;
+    /** margin-bottom */
+    mb?: RemoveVendorProperties<Property.MarginBottom<SpacingToken>>;
+    /** margin-left */
+    ml?: RemoveVendorProperties<Property.MarginLeft<SpacingToken>>;
+    /** margin-right */
+    mr?: RemoveVendorProperties<Property.MarginRight<SpacingToken>>;
+    /** padding */
+    p?: RemoveVendorProperties<Property.Padding<SpacingToken>>;
+    /** padding-top */
+    pt?: RemoveVendorProperties<Property.PaddingTop<SpacingToken>>;
+    /** padding-right */
+    pr?: RemoveVendorProperties<Property.PaddingRight<SpacingToken>>;
+    /** padding-bottom */
+    pb?: RemoveVendorProperties<Property.PaddingBottom<SpacingToken>>;
+    /** padding-left */
+    pl?: RemoveVendorProperties<Property.PaddingLeft<SpacingToken>>;
+    borderRadius?: Property.BorderRadius<BorderRadiusToken>;
+    borderTopLeftRadius?: Property.BorderTopLeftRadius<BorderRadiusToken>;
+    borderTopRightRadius?: Property.BorderTopRightRadius<BorderRadiusToken>;
+    borderBottomLeftRadius?: Property.BorderBottomLeftRadius<BorderRadiusToken>;
+    borderBottomRightRadius?: Property.BorderBottomRightRadius<BorderRadiusToken>;
+    /** box-shadow */
+    elevation?: ElevationToken;
+    flexShrink?: RemoveVendorProperties<Property.FlexShrink>;
+    flexGrow?: RemoveVendorProperties<Property.FlexGrow>;
+    flexBasis?: RemoveVendorProperties<Property.FlexBasis<SizingToken>>;
+    flex?: Property.Flex<SizingToken>;
+    alignSelf?: Property.AlignSelf;
+    order?: Property.Order;
+    border?: Property.Border;
+    borderColor?: Property.BorderColor;
+    borderWidth?: Property.BorderWidth;
+    /** background */
+    bg?: Property.Background;
+    /** background-color */
+    bgColor?: Property.BackgroundColor;
+    opacity?: Property.Background;
+    color?: Property.Color;
+    overflow?: RemoveVendorProperties<Property.Overflow>;
+}>;
+export declare const Box: import("styled-components").StyledComponent<"div", any, {
+    display?: "none" | "inline" | "block" | "inline-block" | "contents" | undefined;
+    position?: "inherit" | "fixed" | "static" | "initial" | "revert" | "revert-layer" | "unset" | "absolute" | "relative" | "sticky" | undefined;
+    top?: Property.Top<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
+    bottom?: Property.Bottom<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
+    left?: Property.Left<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
+    right?: Property.Right<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
+    zIndex?: Property.ZIndex | undefined;
+    /** width */
+    w?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "intrinsic" | "max-content" | "min-content" | "min-intrinsic" | undefined;
+    /** min-width */
+    minW?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "intrinsic" | "max-content" | "min-content" | "min-intrinsic" | undefined;
+    /** max-width */
+    maxW?: "0" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "none" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "intrinsic" | "max-content" | "min-content" | undefined;
+    /** height */
+    h?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | undefined;
+    /** min-height */
+    minH?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "intrinsic" | "max-content" | "min-content" | undefined;
+    /** max-height */
+    maxH?: "0" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "none" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "intrinsic" | "max-content" | "min-content" | undefined;
+    /** margin */
+    m?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
+    /** margin-top */
+    mt?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
+    /** margin-bottom */
+    mb?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
+    /** margin-left */
+    ml?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
+    /** margin-right */
+    mr?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
+    /** padding */
+    p?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
+    /** padding-top */
+    pt?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
+    /** padding-right */
+    pr?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
+    /** padding-bottom */
+    pb?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
+    /** padding-left */
+    pl?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
+    borderRadius?: Property.BorderRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
+    borderTopLeftRadius?: Property.BorderTopLeftRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
+    borderTopRightRadius?: Property.BorderTopRightRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
+    borderBottomLeftRadius?: Property.BorderBottomLeftRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
+    borderBottomRightRadius?: Property.BorderBottomRightRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
+    /** box-shadow */
+    elevation?: ElevationToken | undefined;
+    flexShrink?: (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (number & {}) | undefined;
+    flexGrow?: (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (number & {}) | undefined;
+    flexBasis?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "content" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | undefined;
+    flex?: Property.Flex<"0" | "1000" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500"> | undefined;
+    alignSelf?: Property.AlignSelf | undefined;
+    order?: Property.Order | undefined;
+    border?: Property.Border<0 | (string & {})> | undefined;
+    borderColor?: Property.BorderColor | undefined;
+    borderWidth?: Property.BorderWidth<0 | (string & {})> | undefined;
+    /** background */
+    bg?: Property.Background<0 | (string & {})> | undefined;
+    /** background-color */
+    bgColor?: Property.BackgroundColor | undefined;
+    opacity?: Property.Background<0 | (string & {})> | undefined;
+    color?: Property.Color | undefined;
+    overflow?: "auto" | "hidden" | (string & {}) | "inherit" | "clip" | "initial" | "revert" | "revert-layer" | "unset" | "scroll" | "visible" | undefined;
+} & {
+    children?: import("react").ReactNode;
+}, never>;

package/types/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,18 +1,18 @@
 import { type ReactNode } from 'react';
 import { type AriaBreadcrumbItemProps, type AriaBreadcrumbsProps } from '@react-aria/breadcrumbs';
-import type { RenameMisprefixedProps } from 'helpers/typeHelpers';
+import type { RenameMisprefixedProps } from '../../helpers/typeHelpers';
 export declare const BreadcrumbListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const BreadcrumbLink: import("styled-components").StyledComponent<"a", any, {}, never>;
 export declare const Breadcrumbs: import("react").ForwardRefExoticComponent<AriaBreadcrumbsProps & {
     children?: ReactNode;
 } & import("react").RefAttributes<HTMLOListElement>>;
 export type BreadcrumbItemProps<ExtraProps = unknown> = RenameMisprefixedProps<AriaBreadcrumbItemProps, 'is', 'isDisabled'> & {
-    LinkComponent: JSX.Element;
+    LinkComponent?: JSX.Element | "a";
     href?: string | undefined;
 } & ExtraProps;
 export declare const BreadcrumbItem: import("react").ForwardRefExoticComponent<Omit<AriaBreadcrumbItemProps, "isDisabled"> & {
     disabled?: boolean | undefined;
 } & {
-    LinkComponent: JSX.Element;
+    LinkComponent?: "a" | JSX.Element | undefined;
     href?: string | undefined;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

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

@@ -1,6 +1,6 @@
-import { type PropsWithChildren } from 'react';
+import { type ComponentPropsWithoutRef, type PropsWithChildren } from 'react';
 import { type AriaButtonProps } from '@react-aria/button';
-import type { RenameMisprefixedProps } from 'helpers';
+import type { Prettify, RenameMisprefixedProps } from '../../helpers';
 type Variant = 'primary' | 'secondary' | 'danger' | 'inverse';
 type Size = 'small' | 'large';
 type ButtonDesignProps = {
@@ -20,8 +20,8 @@ export type ButtonBaseProps = {
     paddingSize: Size;
 };
 type ReactAriaProps = RenameMisprefixedProps<AriaButtonProps, 'is', 'isDisabled'>;
-export type ButtonProps = PropsWithChildren<ButtonDesignProps> & ReactAriaProps & {
+export type ButtonProps = Prettify<PropsWithChildren<ButtonDesignProps & ReactAriaProps & {
     onClick?: ReactAriaProps['onPress'];
-};
+} & Pick<ComponentPropsWithoutRef<'button'>, 'form'>>>;
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/types/components/Checkbox/Checkbox.d.ts

@@ -4,4 +4,6 @@ export type CheckedState = CheckboxPrimitive.CheckedState;
 export type CheckboxProps = Omit<CheckboxPrimitive.CheckboxProps, 'defaultChecked'> & {
     invalid?: boolean;
 };
-export declare function Checkbox({ disabled, checked, invalid, onCheckedChange, ...props }: CheckboxProps): JSX.Element;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps, "defaultChecked"> & {
+    invalid?: boolean | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/types/components/Dialog/Dialog.d.ts

@@ -1,7 +1,6 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import type { ComponentPropsWithRef } from 'react';
-export declare const overlayShow: import("styled-components").Keyframes;
-export declare const contentShow: import("styled-components").Keyframes;
+export declare const overlayStyles: import("styled-components").FlattenSimpleInterpolation;
 export declare const dialogWidths: {
     readonly small: "360px";
     readonly medium: "540px";
@@ -11,12 +10,17 @@ type DialogWidth = keyof typeof dialogWidths;
 type StyledContentProps = {
     size?: DialogWidth;
 };
+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 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;
 export declare const DialogDescription: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>, any, {}, never>;
 export declare const DialogFooter: import("styled-components").StyledComponent<"footer", any, {}, never>;
-export declare const DialogCloseButton: import("styled-components").StyledComponent<"button", 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 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/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+export type { DropdownMenuCheckboxItemProps, DropdownMenuContentProps, DropdownMenuItemIndicatorProps, DropdownMenuLabelProps, MenuSubTriggerProps, MenuSubContentProps, MenuSeparatorProps, } from '@radix-ui/react-dropdown-menu';
+export declare function DropdownMenuContent({ children, forceMount, ...props }: DropdownMenuPrimitive.DropdownMenuContentProps): JSX.Element;
+export declare const DropdownMenu: import("react").FC<DropdownMenuPrimitive.DropdownMenuProps>;
+export declare const DropdownMenuPortal: import("react").FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+export declare const DropdownMenuGroup: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DropdownMenuRadioGroup: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const DropdownMenuRadioItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const DropdownMenuCheckboxItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const DropdownMenuItemIndicator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const DropdownMenuArrow: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuArrowProps & import("react").RefAttributes<SVGSVGElement>>, any, {}, never>;
+export declare const DropdownMenuLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const DropdownMenuSeparator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const DropdownMenuSub: import("react").FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+export declare const DropdownMenuSubTrigger: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const DropdownMenuSubContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuSubContentProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/types/components/Fieldset/Fieldset.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { ComponentPropsWithoutStyles } from 'helpers/typeHelpers';
+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,
  *  the problem is that React won't know about that they the input components are disabled (prop-wise)

package/types/components/FileUpload/FileUpload.d.ts

@@ -4,10 +4,10 @@ export type FileDescription = {
     mime: `${string}/${string}`;
 };
 type DropTargetProps = {
-    file: File | null;
+    file?: File | null | undefined;
     fileTypes: FileDescription[];
     onAddFile: (f: File) => void;
-    onDeleteFile: () => void;
+    onDeleteFile?: (() => void) | undefined;
 };
 export declare const FileUpload: import("react").ForwardRefExoticComponent<DropTargetProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -0,0 +1,73 @@
+import type { PropsWithChildren } from 'react';
+import type { Property } from 'csstype';
+import { type SpacingToken } from '../../helpers/tokenUtils';
+export type FlexProps = PropsWithChildren<{
+    display?: 'flex' | "inline-flex";
+    wrap?: Property.FlexWrap;
+    direction?: Property.FlexDirection;
+    alignItems?: Property.AlignItems;
+    alignContent?: Property.AlignContent;
+    justifyContent?: Property.JustifyContent;
+    flow?: Property.FlexFlow;
+    gap?: Property.Gap<SpacingToken>;
+    columnGap?: Property.ColumnGap<SpacingToken>;
+    rowGap?: Property.RowGap<SpacingToken>;
+}>;
+export declare const Flex: import("styled-components").StyledComponent<"div", any, {
+    display?: "none" | "inline" | "block" | "inline-block" | "contents" | undefined;
+    position?: "inherit" | "fixed" | "static" | "initial" | "revert" | "revert-layer" | "unset" | "absolute" | "relative" | "sticky" | undefined;
+    top?: Property.Top<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
+    bottom?: Property.Bottom<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
+    left?: Property.Left<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
+    right?: Property.Right<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
+    zIndex?: Property.ZIndex | undefined;
+    w?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "intrinsic" | "max-content" | "min-content" | "min-intrinsic" | undefined;
+    minW?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "intrinsic" | "max-content" | "min-content" | "min-intrinsic" | undefined;
+    maxW?: "0" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "none" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "intrinsic" | "max-content" | "min-content" | undefined;
+    h?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | undefined;
+    minH?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "intrinsic" | "max-content" | "min-content" | undefined;
+    maxH?: "0" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "none" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "intrinsic" | "max-content" | "min-content" | undefined;
+    m?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
+    mt?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
+    mb?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
+    ml?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
+    mr?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
+    p?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
+    pt?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
+    pr?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
+    pb?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
+    pl?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
+    borderRadius?: Property.BorderRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
+    borderTopLeftRadius?: Property.BorderTopLeftRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
+    borderTopRightRadius?: Property.BorderTopRightRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
+    borderBottomLeftRadius?: Property.BorderBottomLeftRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
+    borderBottomRightRadius?: Property.BorderBottomRightRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
+    elevation?: import("../../helpers/tokenUtils").ElevationToken | undefined;
+    flexShrink?: (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (number & {}) | undefined;
+    flexGrow?: (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (number & {}) | undefined;
+    flexBasis?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "content" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | undefined;
+    flex?: Property.Flex<"0" | "1000" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500"> | undefined;
+    alignSelf?: Property.AlignSelf | undefined;
+    order?: Property.Order | undefined;
+    border?: Property.Border<0 | (string & {})> | undefined;
+    borderColor?: Property.BorderColor | undefined;
+    borderWidth?: Property.BorderWidth<0 | (string & {})> | undefined;
+    bg?: Property.Background<0 | (string & {})> | undefined;
+    bgColor?: Property.BackgroundColor | undefined;
+    opacity?: Property.Background<0 | (string & {})> | undefined;
+    color?: Property.Color | undefined;
+    overflow?: "auto" | "hidden" | (string & {}) | "inherit" | "clip" | "initial" | "revert" | "revert-layer" | "unset" | "scroll" | "visible" | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    display?: "flex" | "inline-flex" | undefined;
+    wrap?: Property.FlexWrap | undefined;
+    direction?: Property.FlexDirection | undefined;
+    alignItems?: Property.AlignItems | undefined;
+    alignContent?: Property.AlignContent | undefined;
+    justifyContent?: Property.JustifyContent | undefined;
+    flow?: Property.FlexFlow | undefined;
+    gap?: Property.Gap<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
+    columnGap?: Property.ColumnGap<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
+    rowGap?: Property.RowGap<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
+}, never>;

package/types/components/FormControl/FormControl.d.ts

@@ -1,7 +1,7 @@
 import { type PropsWithChildren, type ReactNode } from 'react';
 import { type AriaFieldProps, type FieldAria } from '@react-aria/label';
 import type { AriaTextFieldProps } from '@react-aria/textfield';
-import type { ComponentPropsWithoutStyles } from 'helpers/typeHelpers';
+import type { ComponentPropsWithoutStyles } from '../../helpers/typeHelpers';
 type FormControlProps<FieldProps = AriaFieldProps> = PropsWithChildren<{
     tooltipContent?: string;
     tooltipIcon?: ReactNode;
@@ -70,7 +70,7 @@ export declare const NumberFormControl: import("react").ForwardRefExoticComponen
     tooltipIcon?: ReactNode;
 } & AriaFieldProps & {
     children?: ReactNode;
-} & Omit<import("helpers/typeHelpers").RenameBooleanProps<import("@react-types/numberfield").AriaNumberFieldProps>, "minValue" | "maxValue"> & {
+} & Omit<import("../../helpers/typeHelpers").RenameBooleanProps<import("@react-types/numberfield").AriaNumberFieldProps>, "minValue" | "maxValue"> & {
     min?: number | undefined;
     max?: number | undefined;
 } & import("components/Input/InputBase").InputBaseProps & {

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

@@ -12,7 +12,7 @@ export type StyledIconButtonProps = AriaButtonProps & {
     shape?: Shape;
     disabled?: boolean;
 };
-/** Be sure to add add a `label` prop.
+/** 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/>

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { type AriaNumberFieldProps } from '@react-aria/numberfield';
 import { type NumberFieldStateOptions } from '@react-stately/numberfield';
-import type { ComponentPropsWithoutStyles, RenameBooleanProps, RenameMissuffixedProps } from 'helpers/typeHelpers';
+import type { ComponentPropsWithoutStyles, RenameBooleanProps, RenameMissuffixedProps } from '../../../helpers/typeHelpers';
 import { type InputBaseProps } from '../InputBase';
 type ReactAriaNumberInputProps = RenameMissuffixedProps<RenameBooleanProps<AriaNumberFieldProps>, 'Value', 'minValue' | 'maxValue'>;
 type ShowStepper = {

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type AriaTextFieldOptions } from '@react-aria/textfield';
-import type { RenameBooleanProps } from 'helpers/typeHelpers';
+import type { RenameBooleanProps } from '../../../helpers/typeHelpers';
 import { type InputBaseProps } from '../InputBase';
 type ReactAriaInputProps = Omit<RenameBooleanProps<AriaTextFieldOptions<'textarea'>>, 'inputElementType'>;
 export type TextAreaInputProps = ReactAriaInputProps & InputBaseProps;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type AriaTextFieldOptions } from '@react-aria/textfield';
-import type { RenameBooleanProps } from 'helpers/typeHelpers';
+import type { RenameBooleanProps } from '../../../helpers/typeHelpers';
 import { type InputBaseProps } from '../InputBase';
 type ReactAriaInputProps = Omit<RenameBooleanProps<AriaTextFieldOptions<'input'>>, 'inputElementType'>;
 export type TextInputProps = ReactAriaInputProps & InputBaseProps;

package/types/components/Label/Label.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { ComponentPropsWithoutStyles } from 'helpers/typeHelpers';
+import type { ComponentPropsWithoutStyles } from '../../helpers/typeHelpers';
 export interface LabelProps extends ComponentPropsWithoutStyles<'label'> {
     size?: 'small' | 'medium' | 'large';
     bold?: boolean;

package/types/components/MultiSelect/MultiSelect.d.ts

@@ -1,7 +1,7 @@
-import { CollectionChildren } from "@react-types/shared";
-import React from "react";
-import { useMultiSelectState } from "./useMultiSelectState";
-export { Item as MultiSelectItem, Section as MultiSelectSection } from "@react-stately/collections";
+import type { CollectionChildren } from '@react-types/shared';
+import React from 'react';
+import { useMultiSelectState } from './useMultiSelectState';
+export { Item as MultiSelectItem, Section as MultiSelectSection, } from '@react-stately/collections';
 export type OptionItem = {
     children?: never;
     id: string;
@@ -25,9 +25,9 @@ type MultiSelectProps = {
     /** Sets the default open state of the field (uncontrolled). */
     defaultOpen?: boolean;
     /** The initial selected keys in the collection (uncontrolled). */
-    defaultSelectedKeys?: Parameters<typeof useMultiSelectState>["0"]["defaultSelectedKeys"];
+    defaultSelectedKeys?: Parameters<typeof useMultiSelectState>['0']['defaultSelectedKeys'];
     /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
-    disabledKeys?: Parameters<typeof useMultiSelectState>["0"]["disabledKeys"];
+    disabledKeys?: Parameters<typeof useMultiSelectState>['0']['disabledKeys'];
     excludeFromTabOrder?: boolean;
     items: Option[];
     /** Whether the field can be emptied. */
@@ -43,13 +43,13 @@ type MultiSelectProps = {
     /** The content to display as the placeholder. */
     placeholder?: string;
     /** Handler that is called when the select's open state changes. */
-    onOpenChange?: Parameters<typeof useMultiSelectState>["0"]["onOpenChange"];
+    onOpenChange?: Parameters<typeof useMultiSelectState>['0']['onOpenChange'];
     /** Handler that is called when the selection changes. */
-    onSelectionChange?: Parameters<typeof useMultiSelectState>["0"]["onSelectionChange"];
+    onSelectionChange?: Parameters<typeof useMultiSelectState>['0']['onSelectionChange'];
     /** The currently selected keys in the collection (controlled). */
-    selectedKeys?: Parameters<typeof useMultiSelectState>["0"]["selectedKeys"];
+    selectedKeys?: Parameters<typeof useMultiSelectState>['0']['selectedKeys'];
     /** The type of selection that is allowed in the collection. */
-    selectionMode: "single" | "multiple";
+    selectionMode: 'single' | 'multiple';
     tooltipContent?: string;
     tooltipIcon?: string;
 };

package/types/components/NavigationMenu/NavigationMenu.d.ts

@@ -43,8 +43,11 @@ interface ItemProps<T extends React.ElementType> {
     as?: T;
     children?: React.ReactNode;
 }
-export declare function Item<T extends React.ElementType = "div">({ as, ...props }: ItemProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof ItemProps<T>>): JSX.Element;
-declare function Separator(): JSX.Element;
+export declare function Item<T extends React.ElementType = 'div'>({ as, ...props }: ItemProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof ItemProps<T>>): JSX.Element;
+/**
+ * Separator
+ */
+export declare const Separator: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const NavigationMenu: CompoundedComponent & {
     Trigger: ({ children }: TriggerProps) => JSX.Element;
     List: ({ children, portalIdOverride, }: {
@@ -52,7 +55,7 @@ declare const NavigationMenu: CompoundedComponent & {
         portalIdOverride?: string | undefined;
     }) => React.ReactPortal;
     Item: typeof Item;
-    Separator: typeof Separator;
+    Separator: import("styled-components").StyledComponent<"div", any, {}, never>;
 };
 declare const NavigationMenuPortal: () => JSX.Element;
 export { NavigationMenu, NavigationMenuPortal };