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

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

@@ -12,18 +12,18 @@ interface MultiSelectListBoxProps extends AriaListBoxOptions<unknown> {
     listBoxRef?: React.RefObject<HTMLUListElement>;
     state: MultiSelectState<unknown>;
 }
-export declare function ListBox(props: ListBoxProps): JSX.Element;
-export declare function MultiSelectListBox(props: MultiSelectListBoxProps): JSX.Element;
+export declare function ListBox(props: ListBoxProps): import("react/jsx-runtime").JSX.Element;
+export declare function MultiSelectListBox(props: MultiSelectListBoxProps): import("react/jsx-runtime").JSX.Element;
 export declare function OptionLabel({ children }: {
     children: React.ReactNode;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function OptionDescription({ children }: {
     children: React.ReactNode;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
     children: React.ReactNode;
     state: OverlayTriggerState;
     popoverRef?: React.RefObject<HTMLDivElement>;
 }
-export declare function Popover(props: PopoverProps): JSX.Element;
+export declare function Popover(props: PopoverProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/types/{src/components → components}/MultiSelect/MultiSelectListBox.d.ts

@@ -5,5 +5,5 @@ interface ListBoxProps<T> extends AriaListBoxOptions<T> {
     listBoxRef?: React.RefObject<HTMLUListElement>;
     state: MultiSelectState<T>;
 }
-export declare const MultiSelectListBox: <T>(props: ListBoxProps<T>) => JSX.Element;
+export declare const MultiSelectListBox: <T>(props: ListBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/types/{src/components → components}/MultiSelect/MultiSelectPopover.d.ts

@@ -7,5 +7,5 @@ type PopoverProps = {
     triggerRef: React.RefObject<HTMLButtonElement>;
 };
 /** Do we really need two different popovers */
-export declare function Popover({ isOpen, onClose, children, className, triggerRef, }: PopoverProps): JSX.Element;
+export declare function Popover({ isOpen, onClose, children, className, triggerRef, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -23,7 +23,7 @@ export type TriggerProps = PropsWithChildren<{
     open?: boolean;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
 }>;
-declare const Trigger: ({ children }: TriggerProps) => JSX.Element;
+declare const Trigger: ({ children }: TriggerProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * List
  */
@@ -43,13 +43,13 @@ 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;
+export declare function Item<T extends React.ElementType = 'div'>({ as, ...props }: ItemProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof ItemProps<T>>): import("react/jsx-runtime").JSX.Element;
 /**
  * Separator
  */
 export declare const Separator: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const NavigationMenu: CompoundedComponent & {
-    Trigger: ({ children }: TriggerProps) => JSX.Element;
+    Trigger: ({ children }: TriggerProps) => import("react/jsx-runtime").JSX.Element;
     List: ({ children, portalIdOverride, }: {
         children: React.ReactNode[];
         portalIdOverride?: string | undefined;
@@ -57,5 +57,5 @@ declare const NavigationMenu: CompoundedComponent & {
     Item: typeof Item;
     Separator: import("styled-components").StyledComponent<"div", any, {}, never>;
 };
-declare const NavigationMenuPortal: () => JSX.Element;
+declare const NavigationMenuPortal: () => import("react/jsx-runtime").JSX.Element;
 export { NavigationMenu, NavigationMenuPortal };

package/types/{src/components → components}/Page/PageHeader.d.ts

@@ -8,5 +8,5 @@ import type { ComponentPropsWithoutRef } from 'react';
 
  */
 export declare const PageHeader: import("styled-components").StyledComponent<"header", any, {}, never>;
-export declare const StickyPageHeader: ({ children, className, }: ComponentPropsWithoutRef<'div'>) => JSX.Element;
+export declare const StickyPageHeader: ({ children, className, }: ComponentPropsWithoutRef<'div'>) => import("react/jsx-runtime").JSX.Element;
 export declare const PageHeaderContent: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -17,5 +17,5 @@ type PaginationProps = {
     className?: string | undefined;
     displayAtMost?: number | undefined;
 };
-export declare function Pagination({ nrOfPages, currentPage, onPrevious, onClick, onNext, className, ariaLabel, displayAtMost, }: PaginationProps): JSX.Element;
+export declare function Pagination({ nrOfPages, currentPage, onPrevious, onClick, onNext, className, ariaLabel, displayAtMost, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 export type { PopoverCloseProps, PopoverContentProps, } from '@radix-ui/react-popover';
-export declare function PopoverContent({ children, forceMount, ...props }: PopoverPrimitive.PopoverContentProps): JSX.Element;
+export declare function PopoverContent({ children, forceMount, ...props }: PopoverPrimitive.PopoverContentProps): import("react/jsx-runtime").JSX.Element;
 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>;

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

@@ -2,5 +2,5 @@
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 export declare const RadioGroupRadio: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadioGroupPrimitive.RadioGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 export declare const RadioGroupIndicator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadioGroupPrimitive.RadioGroupIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
-export declare function RadioGroup({ children, disabled, loop, onValueChange, ...props }: RadioGroupPrimitive.RadioGroupProps): JSX.Element;
-export declare function Radio({ disabled, ...props }: RadioGroupPrimitive.RadioGroupItemProps): JSX.Element;
+export declare function RadioGroup({ children, disabled, loop, onValueChange, ...props }: RadioGroupPrimitive.RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function Radio({ disabled, ...props }: RadioGroupPrimitive.RadioGroupItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,4 +2,4 @@ import { type ComponentPropsWithoutRef } from 'react';
 import { type AriaButtonProps } from '@react-aria/button';
 export type ReactAriaButtonProps = AriaButtonProps & ComponentPropsWithoutRef<'button'>;
 /**  For internal use only! */
-export declare function ReactAriaButton(props: ReactAriaButtonProps): JSX.Element;
+export declare function ReactAriaButton(props: ReactAriaButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -4,5 +4,5 @@ export declare const StyledSegmentControlRoot: import("styled-components").Style
 export type SegmentControlRootProps = Omit<ToggleGroup.ToggleGroupSingleProps, 'type' | 'style' | 'className'> & {
     size?: 'small' | 'large';
 };
-export declare const SegmentControlRoot: ({ children, size, ...props }: SegmentControlRootProps) => JSX.Element;
+export declare const SegmentControlRoot: ({ children, size, ...props }: SegmentControlRootProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SegmentControlItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<ToggleGroup.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import * as SelectPrimitive from '@radix-ui/react-select';
 export declare const StyledTrigger: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<SelectPrimitive.SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
-export declare function SelectContent({ children, ...props }: SelectPrimitive.SelectContentProps): JSX.Element;
+export declare function SelectContent({ children, ...props }: SelectPrimitive.SelectContentProps): import("react/jsx-runtime").JSX.Element;
 export declare const Select: import("react").FC<SelectPrimitive.SelectProps>;
 export declare const SelectTrigger: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<SelectPrimitive.SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 export declare const SelectValue: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
@@ -18,5 +18,5 @@ export declare const SelectScrollDownButton: import("styled-components").StyledC
 type SingleSelectProps = {
     items: string[];
 } & SelectPrimitive.SelectProps;
-export declare function SingleSelect({ items, ...selectProps }: SingleSelectProps): JSX.Element;
+export declare function SingleSelect({ items, ...selectProps }: SingleSelectProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { AriaSelectProps } from '@react-types/select';
 export { Item as SingleSelectItem, Section as SingleSelectSection, } from '@react-stately/collections';
 type SingleSelectProps<T> = AriaSelectProps<T> & {
@@ -8,4 +7,4 @@ type SingleSelectProps<T> = AriaSelectProps<T> & {
 };
 export declare function SingleSelect<T extends object>(props: SingleSelectProps<T> & {
     hideLabel?: boolean | undefined;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/types/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,30 @@
+import { type BoxProps } from 'components/Box/Box';
+import React from 'react';
+export declare const Animator: import("styled-components").StyledComponent<import("../..").ForwardRefComponent<"div", BoxProps>, any, Omit<BoxProps, "as">, never>;
+export type SkeletonHeaderProps = {
+    'data-id'?: string;
+    looksLike?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    width?: string;
+};
+export declare const SkeletonHeader: React.ForwardRefExoticComponent<SkeletonHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export type SkeletonBodyProps = {
+    'data-id'?: string;
+    lines?: number;
+    height?: string;
+};
+export declare const SkeletonBody: React.ForwardRefExoticComponent<SkeletonBodyProps & React.RefAttributes<HTMLDivElement>>;
+export type SkeletonBoxProps = Omit<BoxProps, 'as'> & {
+    'data-id'?: string;
+};
+export declare const SkeletonBox: React.ForwardRefExoticComponent<Omit<BoxProps, "as"> & {
+    'data-id'?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare function Skeleton(): null;
+declare namespace Skeleton {
+    var Header: React.ForwardRefExoticComponent<SkeletonHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    var Box: React.ForwardRefExoticComponent<Omit<BoxProps, "as"> & {
+        'data-id'?: string | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
+    var Body: React.ForwardRefExoticComponent<SkeletonBodyProps & React.RefAttributes<HTMLDivElement>>;
+}
+export default Skeleton;

package/types/components/Stack/Stack.d.ts

@@ -0,0 +1,15 @@
+import type { AlignX } from 'helpers';
+import { type SpacingTokenValues } from 'helpers/tokenUtils';
+import React from 'react';
+import type { ResponsiveValue } from 'styled-system';
+export type StackProps = {
+    children?: React.ReactNode;
+    align?: ResponsiveValue<AlignX>;
+    space?: ResponsiveValue<SpacingTokenValues>;
+    'data-id'?: string;
+};
+export declare function Stack(props: StackProps): JSX.Element;
+export declare namespace Stack {
+    var displayName: string;
+}
+export default Stack;

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

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 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;
+export declare const TableSortButtons: () => import("react/jsx-runtime").JSX.Element;

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

@@ -6,12 +6,12 @@ export declare const ToastClose: import("styled-components").StyledComponent<imp
 export declare const ToastSeparator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<SeparatorPrimitive.SeparatorProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 type Sentiment = 'inverse' | 'negative' | 'info';
 export declare const ToastViewport: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<ToastPrimitive.ToastViewportProps & import("react").RefAttributes<HTMLOListElement>>, any, {}, never>;
-export declare function ToastProvider({ children, ...props }: ToastPrimitive.ToastProviderProps): JSX.Element;
+export declare function ToastProvider({ children, ...props }: ToastPrimitive.ToastProviderProps): import("react/jsx-runtime").JSX.Element;
 export type ToastProps = PropsWithChildren<{
     sentiment: Sentiment;
     title: string;
     onDismiss?: () => void;
 }> & ToastPrimitive.ToastProps;
 export type ToastActionProps = ToastPrimitive.ToastActionProps;
-export declare function Toast({ title, children, sentiment, onDismiss, ...toastRootProps }: ToastProps): JSX.Element;
+export declare function Toast({ title, children, sentiment, onDismiss, ...toastRootProps }: ToastProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/types/{src/components → components}/Tooltip/IconTooltip.d.ts

@@ -4,5 +4,5 @@ type IconTooltipProps = {
     label?: string;
     icon?: ReactNode;
 };
-export declare function IconTooltip({ children, icon, label, }: IconTooltipProps): JSX.Element;
+export declare function IconTooltip({ children, icon, label, }: IconTooltipProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 export type { TooltipContentProps, TooltipProps, } from '@radix-ui/react-tooltip';
-declare function Content({ children, ...props }: TooltipPrimitive.TooltipContentProps): JSX.Element;
+declare function Content({ children, ...props }: TooltipPrimitive.TooltipContentProps): import("react/jsx-runtime").JSX.Element;
 export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const TooltipProvider: import("react").FC<TooltipPrimitive.TooltipProviderProps>;
 export declare const Tooltip: import("react").FC<TooltipPrimitive.TooltipProps>;

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

@@ -2,11 +2,13 @@ export * from './AccessibleIcon/AccessibleIcon';
 export * from './AlertDialog/AlertDialog';
 export * from './Badge/Badge';
 export * from './Box/Box';
+export * from './Stack/Stack';
 export * from './Breadcrumbs/Breadcrumbs';
+export * from './Button/ButtonBase';
 export * from './Button/Button';
+export * from './ButtonV2/ButtonV2';
 export * from './Calendar';
 export * from './Drawer/Drawer';
-export * from './Button/ButtonBase';
 export * from './Checkbox/Checkbox';
 export * from './Dialog/Dialog';
 export * from './DropdownMenu/DropdownMenu';
@@ -30,6 +32,7 @@ export * from './RadioGroup/RadioGroup';
 export * from './Search/Search';
 export * from './SingleSelect/SingleSelect';
 export * from './Switch/Switch';
+export * from './IconButton/IconButton';
 export * from './Tabs/Tabs';
 export * from './Text/Text';
 export * from './Title/Title';

package/types/{src/helpers → helpers}/index.d.ts

@@ -1 +1,2 @@
 export * from './typeHelpers';
+export * from './props';

package/types/helpers/props.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Omits styled system props from an object
+ * @param {Object} props
+ * @param {Array} names
+ *
+ * @example
+ *  import { margin } from 'styled-system';
+ *
+ * omit({ my: '100', className: 'classs' }, margin.propNames)
+ *  > { className: 'class' }
+ */
+export declare function omit(props: {
+    [k: string]: any;
+}, names: string[]): {
+    [k: string]: any;
+};
+/**
+ * Picks styled system props from an object
+ * @param {Object} props
+ * @param {Array} names
+ *
+ * @example
+ *  import { margin } from 'styled-system';
+ *
+ * pick({ my: '100', py: '100' }, margin.propNames)
+ *  > { my: '100' }
+ */
+export declare function pick(props: {
+    [k: string]: any;
+}, names: string[]): {
+    [k: string]: any;
+};
+/**
+ * Returns a configuration object for styled-components with omitted props, to be used with .withConfig
+ * @param {Array} arr
+ * @param {Object} config
+ *
+ * @see https://styled-components.com/docs/api#shouldforwardprop
+ */
+export declare function clean(arr?: string[], config?: {
+    [k: string]: any;
+}): {
+    shouldForwardProp: (prop: string, defaultFn: (prop: string) => boolean) => boolean;
+    [k: string]: any;
+};

package/types/{src/helpers → helpers}/tokenUtils.d.ts

@@ -1,9 +1,12 @@
 import type { CSSProperties } from 'react';
 import nestedTokens from '@theroutingcompany/design-tokens/dist/json/tokens.json';
+import type flatTokens from '@theroutingcompany/design-tokens/dist/ts/tokens';
 export declare function filterDefined(obj: Record<PropertyKey, unknown> | CSSProperties | undefined): {
     [k: string]: any;
 } | undefined;
 export type RemoveVendorProperties<P extends string | number> = P extends `-moz-${string}` | `-webkit-${string}` ? never : P;
+type FlatTokenNames = keyof typeof flatTokens;
+export type SpacingTokenValues = (typeof flatTokens)[Extract<FlatTokenNames, `spacing_${string}`>];
 type Spacing = (typeof nestedTokens)['spacing'];
 export type SpacingToken = keyof Spacing;
 export declare const getSpacingValue: (token: string) => string;

package/types/helpers/typeHelpers.d.ts

@@ -0,0 +1,90 @@
+import type { ComponentPropsWithoutRef, ElementType, FocusEventHandler, MouseEventHandler } from 'react';
+declare module 'csstype' {
+    interface Properties {
+        [index: `--${string}`]: string | number | undefined;
+    }
+}
+export type Falsy = '' | 0 | false | null | undefined;
+/** Util for filtering arrays with type guard to remove falsy values from the type */
+export declare function typedBoolean<T>(value: T): value is Exclude<T, Falsy>;
+/** Utility type to get pretty readout of all of the members of an intersection. TS Quirk */
+export type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+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];
+};
+type RemoveSuffix<S extends string, Suffix extends string = 'Value'> = S extends `${infer R}${Suffix}` ? Uncapitalize<R> : never;
+export type RenameMissuffixedProps<InputProps extends Record<PropertyKey, any>, Suffix extends string, MisnamedKeys extends `${string}${Suffix}`> = Omit<InputProps, MisnamedKeys> & {
+    [S in MisnamedKeys as RemoveSuffix<S, Suffix>]?: InputProps[S];
+};
+/** Get a type warning when an `errorMessage` is passed without a `validationState` prop. */
+type MisprefixedBooleanProps = 'isDisabled' | 'isRequired' | 'isReadOnly';
+/** renames `isDisabled`, `isRequired,` and `isReadonly` to `disabled`, `required,` and `readOnly` in an object type */
+export type RenameBooleanProps<InputProps extends Record<PropertyKey, any>> = RenameMisprefixedProps<InputProps, 'is', MisprefixedBooleanProps>;
+export type Merge<P1 = {
+    [key: string]: any;
+}, P2 = {
+    [key: string]: any;
+}> = Omit<P1, keyof P2> & P2;
+/**
+ * Infers the OwnProps if E is a ForwardRefExoticComponentWithAs
+ */
+export type OwnProps<E> = E extends ForwardRefComponent<any, infer P> ? P : {
+    [key: string]: any;
+};
+/**
+ * Infers the JSX.IntrinsicElement if E is a ForwardRefExoticComponentWithAs
+ */
+export type IntrinsicElement<E> = E extends ForwardRefComponent<infer I, any> ? I : never;
+export type ForwardRefExoticComponent<E, OwnProps> = React.ForwardRefExoticComponent<Merge<E extends React.ElementType ? React.ComponentPropsWithRef<E> : never, OwnProps & {
+    as?: E;
+}>>;
+export interface ForwardRefComponent<IntrinsicElementString, OwnProps = {
+    [key: string]: any;
+}> extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
+    /**
+     * When `as` prop is passed, use this overload.
+     * Merges original own props (without DOM props) and the inferred props
+     * from `as` element with the own props taking precendence.
+     *
+     * We explicitly avoid `React.ElementType` and manually narrow the prop types
+     * so that events are typed when using JSX.IntrinsicElements.
+     */
+    <As = IntrinsicElementString>(props: As extends '' ? {
+        as: keyof JSX.IntrinsicElements;
+    } : As extends React.ComponentType<infer P> ? Merge<P, OwnProps & {
+        as: As;
+    }> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
+        as: As;
+    }> : never): React.ReactElement | null;
+}
+/**
+ * Alignment Types
+ */
+export type AlignX = 'center' | 'left' | 'right';
+export type AlignY = 'center' | 'top' | 'bottom';
+export type Breakpoints = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type BreakpointsWithoutDefault = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type LinkActionProps = {
+    to?: string | {
+        [key: string]: any;
+    };
+    disabled?: boolean;
+    external?: boolean;
+    /**
+     * @deprecated Use `as` instead
+     */
+    component?: React.ElementType;
+    /**
+     * @deprecated Use `as` instead
+     */
+    Component?: React.ElementType;
+};
+export type ClickHandler = MouseEventHandler<HTMLButtonElement>;
+export type FocusHandler = FocusEventHandler<HTMLButtonElement>;
+export type TODOFIXME = any;
+export {};

package/types/styles/index.d.ts

@@ -0,0 +1,34 @@
+export declare const buttonReset = "\n  border: none;\n  margin: 0;\n  padding: 0;\n  overflow: visible;\n  width: auto;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  line-height: normal;\n  -webkit-font-smoothing: inherit;\n  -moz-osx-font-smoothing: inherit;\n  -webkit-appearance: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n    padding: 0;\n  }\n";
+export declare const visuallyHidden = "\n  border: 0 !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  clip-path: inset(50%) !important;\n  height: 1px !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  width: 1px !important;\n  word-wrap: normal !important;\n";
+type FocusOutline = {
+    /**
+     * Color of the focus ring. Defaults to color_blue_700.
+     */
+    color?: string;
+    /**
+     * CSS selector to target the pseudo-element with the ring. Defaults to '&:focus'.
+     */
+    modifier?: string;
+    /**
+     * Pixel offset of the focus ring. Defaults to '3px'.
+     */
+    offset?: string;
+    /**
+     * Border radius of the focus ring. Defaults to borderRadius_200.
+     */
+    radius?: string;
+};
+/**
+ * Creates focus styles on an :after pseudo-element.
+ * @param string Color of the focus ring. Defaults to color_blue_700.
+ * @param modifier CSS selector to target the pseudo-element with the ring, defaults to '&:focus'
+ * @param offset Pixel offset of the focus ring. Defaults to '3px'.
+ * @param radius Border radius of the focus ring. Defaults to borderRadius_200.
+ *
+ * @example
+ * const Styled = styled.div`
+ *   ${focusOutline({ color: 'gray', modifier: '&:focus-within' })}
+ * `;
+ */
+export declare const focusOutline: ({ modifier, offset, }?: FocusOutline) => string;
+export {};

package/types/cypress/support/component.d.ts

@@ -1,9 +0,0 @@
-import { mount } from 'cypress/react18';
-import './commands';
-declare global {
-    namespace Cypress {
-        interface Chainable {
-            mount: typeof mount;
-        }
-    }
-}

package/types/cypress.config.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="cypress" />
-declare const _default: Cypress.ConfigOptions<any>;
-export default _default;

package/types/src/components/Badge/Badge.cy.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,133 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import type { Property } from 'csstype';
-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?: RemoveVendorProperties<Property.Position> | 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?: RemoveVendorProperties<Property.Width<"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;
-    /** min-width */
-    minW?: RemoveVendorProperties<Property.MinWidth<"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;
-    /** max-width */
-    maxW?: RemoveVendorProperties<Property.MaxWidth<"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;
-    /** height */
-    h?: RemoveVendorProperties<Property.Height<"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;
-    /** min-height */
-    minH?: RemoveVendorProperties<Property.MinHeight<"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;
-    /** max-height */
-    maxH?: RemoveVendorProperties<Property.MaxHeight<"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;
-    /** margin */
-    m?: RemoveVendorProperties<Property.Margin<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
-    /** margin-top */
-    mt?: RemoveVendorProperties<Property.MarginTop<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
-    /** margin-bottom */
-    mb?: RemoveVendorProperties<Property.MarginBottom<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
-    /** margin-left */
-    ml?: RemoveVendorProperties<Property.MarginLeft<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
-    /** margin-right */
-    mr?: RemoveVendorProperties<Property.MarginRight<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
-    /** padding */
-    p?: RemoveVendorProperties<Property.Padding<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
-    /** padding-top */
-    pt?: RemoveVendorProperties<Property.PaddingTop<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
-    /** padding-right */
-    pr?: RemoveVendorProperties<Property.PaddingRight<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
-    /** padding-bottom */
-    pb?: RemoveVendorProperties<Property.PaddingBottom<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
-    /** padding-left */
-    pl?: RemoveVendorProperties<Property.PaddingLeft<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
-    borderRadius?: Property.BorderRadius<"circle" | "0" | "400" | "100" | "200" | "800" | "pill"> | undefined;
-    borderTopLeftRadius?: Property.BorderTopLeftRadius<"circle" | "0" | "400" | "100" | "200" | "800" | "pill"> | undefined;
-    borderTopRightRadius?: Property.BorderTopRightRadius<"circle" | "0" | "400" | "100" | "200" | "800" | "pill"> | undefined;
-    borderBottomLeftRadius?: Property.BorderBottomLeftRadius<"circle" | "0" | "400" | "100" | "200" | "800" | "pill"> | undefined;
-    borderBottomRightRadius?: Property.BorderBottomRightRadius<"circle" | "0" | "400" | "100" | "200" | "800" | "pill"> | undefined;
-    /** box-shadow */
-    elevation?: ElevationToken | undefined;
-    flexShrink?: RemoveVendorProperties<Property.FlexShrink> | undefined;
-    flexGrow?: RemoveVendorProperties<Property.FlexGrow> | undefined;
-    flexBasis?: RemoveVendorProperties<Property.FlexBasis<"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;
-    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?: RemoveVendorProperties<Property.Overflow> | undefined;
-} & {
-    children?: import("react").ReactNode;
-}, never>;