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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theroutingcompany/components",
-  "version": "0.0.26-alpha.1",
+  "version": "0.0.26-alpha.4",
   "description": "The Routing Company Components",
   "main": "./dist/trc-components.umd.js",
   "module": "./dist/trc-components.es.js",
@@ -36,9 +36,7 @@
     "build:components": "vite build",
     "build": "npm run clean && npm run build:components && npm run build:types",
     "chromatic": "npx chromatic --project-token=df154c51409f",
-    "deploy": "npm run chromatic",
-    "cy:open": "cypress open",
-    "cy:run": "cypress run"
+    "deploy": "npm run chromatic"
   },
   "sideEffects": false,
   "license": "UNLICENSED",
@@ -101,8 +99,11 @@
     "@react-types/overlays": "^3.7.2",
     "@react-types/select": "^3.8.1",
     "@tanstack/react-table": "^8.9.1",
-    "@theroutingcompany/design-tokens": "0.0.4-alpha.0",
-    "csstype": "^3.1.2"
+    "@theroutingcompany/design-tokens": "0.0.4-alpha.2",
+    "@types/styled-system": "^5.1.16",
+    "csstype": "^3.1.2",
+    "react-transition-group": "^4.4.5",
+    "styled-system": "^5.1.5"
   },
   "peerDependencies": {
     "@material-ui/icons": "^4.11.3",
@@ -135,7 +136,6 @@
     "@typescript-eslint/parser": "^5.58.0",
     "@vitejs/plugin-react": "^3.1.0",
     "chromatic": "^6.17.3",
-    "cypress": "^12.14.0",
     "eslint": "^8.38.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -21,15 +21,15 @@ export declare const TextAreaFormControl: import("react").ForwardRefExoticCompon
 } & AriaFieldProps & {
     children?: ReactNode;
 } & ComponentPropsWithoutStyles<"textarea"> & {
-    type?: "url" | "search" | "text" | (string & {}) | "tel" | "email" | "password" | undefined;
     label?: ReactNode;
     pattern?: string | undefined;
+    type?: "search" | "text" | (string & {}) | "tel" | "url" | "email" | "password" | undefined;
     name?: string | undefined;
     defaultValue?: string | undefined;
     autoFocus?: boolean | undefined;
     id?: string | undefined;
     placeholder?: string | undefined;
-    inputMode?: "url" | "search" | "text" | "none" | "tel" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
     'aria-describedby'?: string | undefined;
@@ -55,10 +55,10 @@ export declare const TextAreaFormControl: import("react").ForwardRefExoticCompon
     disabled?: boolean | undefined;
     value?: string | undefined;
     autoComplete?: string | undefined;
-    required?: boolean | undefined;
     maxLength?: number | undefined;
     minLength?: number | undefined;
     readOnly?: boolean | undefined;
+    required?: boolean | undefined;
     description?: ReactNode;
     onFocusChange?: ((isFocused: boolean) => void) | undefined;
     excludeFromTabOrder?: boolean | undefined;

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

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

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

@@ -4,9 +4,10 @@ export type InputRadius = typeof tokens.border_radius_0 | typeof tokens.border_r
 export type InputBaseProps = {
     paddingSize?: InputSize;
     borderRadius?: InputRadius;
+    flex?: string;
 };
 export declare const InputBase: import("styled-components").StyledComponent<"input", any, InputBaseProps, never>;
-export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputWrapper: import("styled-components").StyledComponent<import("../..").ForwardRefComponent<"div", import("components/Box/Box").BoxProps>, any, {}, never>;
 export declare const InputErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const InputDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const EndIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -9,6 +9,8 @@ interface CustomTextInputProps {
     connectLeft?: React.ReactNode | null;
     connectRight?: React.ReactNode | null;
     className?: string;
+    display?: string;
+    flex?: string;
 }
 export type TextInputProps = ReactAriaInputProps & InputBaseProps & CustomTextInputProps;
 export declare const TextInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & InputBaseProps & CustomTextInputProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,29 @@
+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;
+};
+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,23 @@
+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;
+    /**
+     * Positions children horizontally.
+     * Styled-system responsive arrays work here.
+     */
+    align?: ResponsiveValue<AlignX>;
+    /**
+     * Sets the gutter space between children.
+     * Styled-system responsive arrays work here.
+     */
+    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}/index.d.ts

@@ -4,9 +4,9 @@ export * from './Badge/Badge';
 export * from './Box/Box';
 export * from './Breadcrumbs/Breadcrumbs';
 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 +30,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 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,87 @@
+import type { ComponentPropsWithoutRef, ElementType } 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 {};

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 {};