@theroutingcompany/components 0.0.8 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theroutingcompany/components",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "The Routing Company Components",
   "main": "./dist/trc-components.umd.js",
   "module": "./dist/trc-components.es.js",
@@ -21,12 +21,14 @@
     "types"
   ],
   "scripts": {
-    "prebuild": "npm run clean",
+    "postpublish": "npm run chromatic",
+    "prepublish": "npm run build",
+    "publish": "npm publish  --access public",
     "format": "prettier ./dist/**/*.{js,css,scss} --write --no-config",
     "clean": "rimraf ./dist ./types",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "lint": "eslint  src",
+    "lint": "eslint --cache src",
     "lint:css": "stylelint src/components/**/*.{tsx,ts}",
     "prepublishOnly": "npm run build",
     "build:types": "tsc --incremental",
@@ -49,15 +51,18 @@
     "@radix-ui/react-select": "^1.1.2",
     "@radix-ui/react-separator": "^1.0.1",
     "@radix-ui/react-switch": "^1.0.1",
+    "@radix-ui/react-tabs": "^1.0.1",
     "@radix-ui/react-toast": "^1.1.2",
     "@radix-ui/react-toggle-group": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
     "@react-aria/breadcrumbs": "^3.4.1",
     "@react-aria/button": "^3.6.4",
+    "@react-aria/dnd": "^3.0.1",
     "@react-aria/focus": "^3.10.1",
     "@react-aria/interactions": "^3.13.1",
     "@react-aria/label": "^3.4.4",
     "@react-aria/numberfield": "^3.3.4",
+    "@react-aria/progress": "^3.3.4",
     "@react-aria/radio": "^3.4.2",
     "@react-aria/searchfield": "^3.4.4",
     "@react-aria/textfield": "^3.8.1",
@@ -66,7 +71,7 @@
     "@react-stately/radio": "^3.6.2",
     "@react-stately/searchfield": "^3.3.4",
     "@tanstack/react-table": "^8.7.6",
-    "@theroutingcompany/design-tokens": "^0.0.2",
+    "@theroutingcompany/design-tokens": "^0.0.3",
     "styled-components": "^5.3.6"
   },
   "peerDependencies": {
@@ -87,9 +92,10 @@
     "@storybook/addon-interactions": "^7.0.0-beta.2",
     "@storybook/addon-links": "^7.0.0-beta.2",
     "@storybook/react": "^7.0.0-beta.2",
-    "@storybook/react-vite": "^7.0.0-beta.2",
+    "@storybook/react-vite": "^7.0.0-alpha.25",
     "@storybook/testing-library": "^0.0.14-next.0",
     "@types/eslint": "^8.4.10",
+    "@types/mime-types": "^2.1.1",
     "@types/prettier": "^2.7.2",
     "@types/react": "^17.0.0 || ^18.0.0",
     "@types/react-dom": "^17.0.0 || ^18.0.0",
@@ -100,12 +106,13 @@
     "@vitejs/plugin-react": "^3.0.1",
     "chromatic": "^6.14.0",
     "csstype": "^3.1.1",
-    "eslint": "^8.31.0",
+    "eslint": "^8.32.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-jsx-a11y": "^6.7.0",
     "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-storybook": "^0.6.10",
     "postcss-styled-syntax": "^0.3.1",
-    "prettier": "^2.8.2",
+    "prettier": "^2.8.3",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-is": "^16.13.1 || ^17.0.0 || ^18.0.0",

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

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithRef, type PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 import { type AriaButtonProps } from '@react-aria/button';
 import type { RenameMisprefixedProps } from 'helpers';
 type Variant = 'primary' | 'secondary' | 'danger' | 'inverse';
@@ -20,36 +20,8 @@ export type ButtonBaseProps = {
     paddingSize: Size;
 };
 type ReactAriaProps = RenameMisprefixedProps<AriaButtonProps, 'is', 'isDisabled'>;
-export type ButtonProps = PropsWithChildren<ButtonDesignProps> & ComponentPropsWithRef<'button'> & ReactAriaProps;
-export declare const Button: import("react").ForwardRefExoticComponent<(Pick<{
-    emphasis?: "low" | undefined;
-    variant?: "primary" | "danger" | "inverse" | undefined;
-    size?: Size | undefined;
-} & {
-    children?: import("react").ReactNode;
-} & Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-} & Omit<AriaButtonProps<"button">, "isDisabled"> & {
-    disabled?: boolean | undefined;
-}, "key" | "size" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | "target" | "href" | "rel" | "elementType" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "excludeFromTabOrder" | "emphasis" | "variant"> | Pick<{
-    emphasis?: "medium" | undefined;
-    variant?: "primary" | "danger" | "inverse" | undefined;
-    size?: Size | undefined;
-} & {
-    children?: import("react").ReactNode;
-} & Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-} & Omit<AriaButtonProps<"button">, "isDisabled"> & {
-    disabled?: boolean | undefined;
-}, "key" | "size" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | "target" | "href" | "rel" | "elementType" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "excludeFromTabOrder" | "emphasis" | "variant"> | Pick<{
-    emphasis?: "high" | undefined;
-    variant?: Variant | undefined;
-    size?: Size | undefined;
-} & {
-    children?: import("react").ReactNode;
-} & Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-} & Omit<AriaButtonProps<"button">, "isDisabled"> & {
-    disabled?: boolean | undefined;
-}, "key" | "size" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | "target" | "href" | "rel" | "elementType" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "excludeFromTabOrder" | "emphasis" | "variant">) & import("react").RefAttributes<HTMLButtonElement>>;
+export type ButtonProps = PropsWithChildren<ButtonDesignProps> & ReactAriaProps & {
+    onClick?: ReactAriaProps["onPress"];
+};
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import type { ComponentPropsWithRef } from 'react';
 export declare const overlayShow: import("styled-components").Keyframes;
@@ -14,11 +13,11 @@ type StyledContentProps = {
 };
 export type DialogContentProps = StyledContentProps & DialogPrimitive.DialogContentProps & ComponentPropsWithRef<'div'>;
 export declare function DialogContent({ children, size, ...props }: DialogContentProps): JSX.Element;
-export declare const DialogTitle: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>, any, {}, never>;
-export declare const DialogDescription: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>, any, {}, never>;
+export declare const DialogTitle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>, any, {}, never>;
+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 Dialog: React.FC<DialogPrimitive.DialogProps>;
-export declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+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>>;
 export {};

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

@@ -1,9 +1,22 @@
 /// <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,
+/** 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)
+ *
  * This 'compound component' makes it known to child input components via React context (for example for react-aria input hooks)
+ *
+ * ```jsx
+ * <fieldset disabled>
+ *  <Input> // ❌ Not disabled!
+ * </fieldset>
+ * ```
+ *
+ * ```jsx
+ * <Fieldset disabled>
+ *   <Input> // ✅ Disabled by Fieldset context
+ * </Fieldset>
+ * ```
  */
 export declare function Fieldset({ children, disabled, ...fieldsetProps }: ComponentPropsWithoutStyles<'fieldset'>): JSX.Element;
 export declare function useFieldset(): boolean;

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

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

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

@@ -1,9 +1,11 @@
+/// <reference types="react" />
 import { type AriaButtonProps } from '@react-aria/button';
-import { type ComponentPropsWithRef } from 'react';
 type Size = 'small' | 'large';
 type Variant = 'primary' | 'secondary' | 'danger' | 'inverse';
 type Shape = 'circle' | 'square';
-export type StyledIconButtonProps = ComponentPropsWithRef<'button'> & AriaButtonProps & {
+export type StyledIconButtonProps = AriaButtonProps & {
+    onClick?: AriaButtonProps['onPress'] | undefined;
+} & {
     label: string;
     size?: Size;
     variant?: Variant;
@@ -17,5 +19,13 @@ export type StyledIconButtonProps = ComponentPropsWithRef<'button'> & AriaButton
  * </IconButton>
  *
  */
-export declare const IconButton: import("react").ForwardRefExoticComponent<Pick<StyledIconButtonProps, "form" | "label" | "slot" | "style" | "title" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "isDisabled" | "target" | "href" | "rel" | "shape" | "elementType" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "excludeFromTabOrder" | "variant"> & import("react").RefAttributes<HTMLButtonElement>>;
+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/TextInput/TextInput.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { type AriaTextFieldOptions } from '@react-aria/textfield';
-import type { ComponentPropsWithoutStyles, 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 & ComponentPropsWithoutStyles<'input'>;
+export type TextInputProps = ReactAriaInputProps & InputBaseProps;
 /**
  * 1. With custom label element as prop
  * ```jsx
@@ -23,5 +23,5 @@ export type TextInputProps = ReactAriaInputProps & InputBaseProps & ComponentPro
  * </label>
  * ```
  */
-export declare const TextInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & InputBaseProps & ComponentPropsWithoutStyles<"input"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const TextInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & InputBaseProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { ReactNode } from 'react';
 import type { ComponentPropsWithoutStyles } from 'helpers/typeHelpers';
 interface LabelProps extends ComponentPropsWithoutStyles<'label'> {
     size?: 'small' | 'medium' | 'large';
@@ -6,6 +6,7 @@ interface LabelProps extends ComponentPropsWithoutStyles<'label'> {
     /** Screen Reader Only */
     srOnly?: boolean;
     display?: 'flex' | 'inline-flex' | 'inline' | 'black';
+    children: ReactNode;
 }
 export declare function Label({ children, bold, size, display, srOnly, ...remainingProps }: LabelProps): JSX.Element;
 export {};

package/types/components/Paginator/Paginator.d.ts

@@ -1,40 +1,12 @@
-import { type ComponentPropsWithRef } from 'react';
-type PaginatorButtonProps = ComponentPropsWithRef<'button'> & {
+/// <reference types="react" />
+import { type ButtonProps } from 'components';
+type PaginatorButtonProps = ButtonProps & {
     label: string;
     direction: 'left' | 'right';
+    title?: string;
 };
-export declare const PaginatorButton: import("react").ForwardRefExoticComponent<Pick<PaginatorButtonProps, "label" | "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | "direction"> & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const PaginatorNumber: import("react").ForwardRefExoticComponent<(Pick<{
-    emphasis?: "low" | undefined;
-    variant?: "primary" | "danger" | "inverse" | undefined;
-    size?: ("small" | "large") | undefined;
-} & {
-    children?: import("react").ReactNode;
-} & Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-} & Omit<import("@react-types/button").AriaButtonProps<"button">, "isDisabled"> & {
-    disabled?: boolean | undefined;
-}, "key" | "size" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | "target" | "href" | "rel" | "elementType" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "excludeFromTabOrder" | "emphasis" | "variant"> | Pick<{
-    emphasis?: "medium" | undefined;
-    variant?: "primary" | "danger" | "inverse" | undefined;
-    size?: ("small" | "large") | undefined;
-} & {
-    children?: import("react").ReactNode;
-} & Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-} & Omit<import("@react-types/button").AriaButtonProps<"button">, "isDisabled"> & {
-    disabled?: boolean | undefined;
-}, "key" | "size" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | "target" | "href" | "rel" | "elementType" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "excludeFromTabOrder" | "emphasis" | "variant"> | Pick<{
-    emphasis?: "high" | undefined;
-    variant?: ("primary" | "secondary" | "danger" | "inverse") | undefined;
-    size?: ("small" | "large") | undefined;
-} & {
-    children?: import("react").ReactNode;
-} & Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-} & Omit<import("@react-types/button").AriaButtonProps<"button">, "isDisabled"> & {
-    disabled?: boolean | undefined;
-}, "key" | "size" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | "target" | "href" | "rel" | "elementType" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "excludeFromTabOrder" | "emphasis" | "variant">) & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PaginatorButton: import("react").ForwardRefExoticComponent<PaginatorButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PaginatorNumber: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 type PaginationProps = {
     nrOfPages: number;
     currentPage: number;

package/types/components/Popover/Popover.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import * as PopoverPrimitive from '@radix-ui/react-popover';
-export type { PopoverCloseProps, PopoverContentProps } from '@radix-ui/react-popover';
+export type { PopoverCloseProps, PopoverContentProps, } from '@radix-ui/react-popover';
 export declare function PopoverContent({ children, ...props }: PopoverPrimitive.PopoverContentProps): JSX.Element;
-export declare const PopoverClose: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+export declare const PopoverClose: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PopoverCloseCross: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 export declare const Popover: import("react").FC<PopoverPrimitive.PopoverProps>;
 export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/types/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type AriaProgressBarProps } from '@react-aria/progress';
+type ProgressBarProps = {
+    width?: number | undefined;
+} & AriaProgressBarProps;
+export declare function ProgressBar(props: ProgressBarProps): JSX.Element;
+export {};

package/types/components/Table/Table.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
-export declare function TableHeader({ children }: {
-    children: any;
-}): JSX.Element;
+export declare const TableHeader: import("styled-components").StyledComponent<"th", any, {}, never>;
 export declare const TableDataCell: import("styled-components").StyledComponent<"td", any, {}, never>;
 export declare const Table: import("styled-components").StyledComponent<"table", any, {}, never>;
 export declare const TableSortButtons: () => JSX.Element;

package/types/components/Tabs/Tabs.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import * as Tabs from '@radix-ui/react-tabs';
+export type { TabsContentProps, TabsTriggerProps, TabsProps, } from '@radix-ui/react-tabs';
+export declare const TabsRoot: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Tabs.TabsProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const TabsList: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Tabs.TabsListProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const TabsTrigger: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Tabs.TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+export declare const TabTriggerWithIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Tabs.TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+export declare const TabsContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Tabs.TabsContentProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/types/components/Text/Text.d.ts

@@ -30,6 +30,7 @@ type SentimentTextColorProps = {
 type TextColorProps = NormalTextColorProps | SentimentTextColorProps;
 export type TextProps = TextColorProps & Partial<NumberTextProps | CaptionTextProps | BodyTextProps> & {
     bold?: boolean;
+    italic?: boolean;
     as?: TextElements;
 };
 type PolymorphicText = Polymorphic.ForwardRefComponent<TextElements, TextProps>;

package/types/components/Title/Title.d.ts

@@ -1,9 +1,8 @@
 import type * as Polymorphic from '@radix-ui/react-polymorphic';
-interface TitleProps {
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'legend';
+export interface TitleProps {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'legend' | 'figcaption';
     size: 'small' | 'medium' | 'large' | 'xsmall';
 }
-type PolymorphicTitle = Polymorphic.ForwardRefComponent<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', // more? span? div?
+export type PolymorphicTitle = Polymorphic.ForwardRefComponent<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', // more? span? div?
 TitleProps>;
 export declare const Title: PolymorphicTitle;
-export {};

package/types/components/index.d.ts

@@ -5,19 +5,21 @@ export * from './Button/Button';
 export * from './Checkbox/Checkbox';
 export * from './Dialog/Dialog';
 export * from './Fieldset/Fieldset';
+export * from './FileUpload/FileUpload';
 export * from './FormControl/FormControl';
 export * from './Heading/Heading';
 export * from './IconButton/IconButton';
 export * from './Input/NumberInput/NumberInput';
 export * from './Input/TextInput/TextInput';
 export * from './Label/Label';
+export * from './Tabs/Tabs';
 export * from './Toast/Toast';
 export * from './Page/Page';
 export * from './Paginator/Paginator';
 export * from './Popover/Popover';
 export * from './RadioGroup/RadioGroup';
 export * from './Select/Select';
-export * from "./Search/Search";
+export * from './Search/Search';
 export * from './Switch/Switch';
 export * from './Text/Text';
 export * from './Title/Title';

package/types/helpers/typeHelpers.d.ts

@@ -5,7 +5,7 @@ declare module 'csstype' {
         [index: `--${string}`]: string | number | undefined;
     }
 }
-export type ComponentPropsWithoutStyles<E extends ElementType> = Omit<ComponentPropsWithoutRef<E>, 'style' | 'className'>;
+export type ComponentPropsWithoutStyles<E extends ElementType> = Omit<ComponentPropsWithoutRef<E>, 'style'>;
 type RemovePrefix<S extends string, Prefix extends string = 'is'> = S extends `${Prefix}${infer R}` ? Uncapitalize<R> : never;
 export type RenameMisprefixedProps<InputProps extends Record<PropertyKey, any>, Prefix extends string, MisnamedKeys extends `${Prefix}${string}`> = Omit<InputProps, MisnamedKeys> & {
     [S in MisnamedKeys as RemovePrefix<S, Prefix>]?: InputProps[S];