@rango-dev/ui 0.33.1-next.0 → 0.33.1-next.2

package/src/components/ChainToken/ChainToken.tsx

@@ -1,4 +1,4 @@
-import type { PropTypes } from './ChainToken.types';
+import type { ChainTokenPropTypes } from './ChainToken.types';
 
 import React from 'react';
 
@@ -8,7 +8,7 @@ import { Skeleton } from '../Skeleton';
 import { tokenChainSizeMap } from './ChainToken.constants';
 import { ChainImageContainer, Container } from './ChainToken.styles';
 
-export const ChainToken: React.FC<PropTypes> = (props) => {
+export const ChainToken: React.FC<ChainTokenPropTypes> = (props) => {
   const {
     tokenImage,
     chainImage,

package/src/components/ChainToken/ChainToken.types.ts

@@ -4,7 +4,7 @@ import type * as Stitches from '@stitches/react';
 type BaseProps = Stitches.VariantProps<typeof ChainImageContainer>;
 type BaseSizes = Exclude<BaseProps['size'], object>;
 
-export type PropTypes = {
+export type ChainTokenPropTypes = {
   tokenImage: string;
   chainImage: string;
   chianImageId?: string;

package/src/components/ChainToken/index.ts

@@ -1 +1,2 @@
 export { ChainToken } from './ChainToken';
+export type { ChainTokenPropTypes } from './ChainToken.types';

package/src/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import type { PropTypes } from './Checkbox.types';
+import type { CheckboxPropTypes } from './Checkbox.types';
 import type { PropsWithChildren } from 'react';
 
 import React from 'react';
@@ -13,7 +13,7 @@ import {
   Label,
 } from './Checkbox.styles';
 
-export function Checkbox(props: PropsWithChildren<PropTypes>) {
+export function Checkbox(props: PropsWithChildren<CheckboxPropTypes>) {
   const { id, label, ...otherProps } = props;
   const hasLabel = id && label;
   return (

package/src/components/Checkbox/Checkbox.types.ts

@@ -14,4 +14,5 @@ interface ComponentProps {
   label?: never;
 }
 
-export type PropTypes = RadixCheckboxProps & (ComponentProps | WithLabelProps);
+export type CheckboxPropTypes = RadixCheckboxProps &
+  (ComponentProps | WithLabelProps);

package/src/components/Checkbox/index.ts

@@ -1 +1,2 @@
 export { Checkbox } from './Checkbox';
+export type { CheckboxPropTypes } from './Checkbox.types';

package/src/components/Chip/Chip.tsx

@@ -1,4 +1,4 @@
-import type { PropTypes } from './Chip.types';
+import type { ChipPropTypes } from './Chip.types';
 
 import React from 'react';
 
@@ -6,7 +6,7 @@ import { Typography } from '../Typography';
 
 import { ChipContainer } from './Chip.styles';
 
-export function Chip(props: PropTypes) {
+export function Chip(props: ChipPropTypes) {
   const { label, selected, prefix, suffix, ...otherProps } = props;
   return (
     <ChipContainer selected={selected} {...otherProps}>

package/src/components/Chip/Chip.types.ts

@@ -12,4 +12,4 @@ interface ChipProps {
   suffix?: ReactNode;
 }
 
-export type PropTypes = ButtonElement & ChipProps;
+export type ChipPropTypes = ButtonElement & ChipProps;

package/src/components/Chip/index.ts

@@ -1 +1,2 @@
 export { Chip } from './Chip';
+export type { ChipPropTypes } from './Chip.types';

package/src/components/Collapsible/Collapsible.tsx

@@ -1,4 +1,4 @@
-import type { CollapsibleProps } from './Collapsible.types';
+import type { CollapsiblePropTypes } from './Collapsible.types';
 import type { PropsWithChildren } from 'react';
 
 import * as Collapsible from '@radix-ui/react-collapsible';
@@ -9,7 +9,7 @@ import { CollapsibleContent } from '../common/styles';
 import { Trigger } from './Collapsible.styles';
 
 export function CollapsibleComponent(
-  props: PropsWithChildren<CollapsibleProps>
+  props: PropsWithChildren<CollapsiblePropTypes>
 ) {
   const { open, onOpenChange, trigger, children, ...otherProps } = props;
   return (

package/src/components/Collapsible/Collapsible.types.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 
-export interface CollapsibleProps {
+export interface CollapsiblePropTypes {
   trigger: React.ReactNode;
   open: boolean;
   onOpenChange: (open: boolean) => void;

package/src/components/Collapsible/index.ts

@@ -1 +1,2 @@
 export { CollapsibleComponent as Collapsible } from './Collapsible';
+export type { CollapsiblePropTypes } from './Collapsible.types';

package/src/components/FullExpandedQuote/FullExpandedQuote.types.ts

@@ -1,15 +1,15 @@
-import type { SwapInputProps } from '../../containers/SwapInput/SwapInput.types';
-import type { PropTypes as ChainTokenPropTypes } from '../ChainToken/ChainToken.types';
-import type { PriceImpactProps } from '../PriceImpact/PriceImpact.types';
+import type { SwapInputPropTypes } from '../../containers/SwapInput/SwapInput.types';
+import type { ChainTokenPropTypes } from '../ChainToken';
+import type { PriceImpactPropTypes } from '../PriceImpact/PriceImpact.types';
 import type { PropTypes as QuoteCostProps } from '../QuoteCost/QuoteCost.types';
 import type { InternalSwap, Step } from '../StepDetails/StepDetails.types';
-import type { PropTypes as TooltipPropTypes } from '../Tooltip/Tooltip.types';
+import type { TooltipPropTypes } from '../Tooltip/Tooltip.types';
 import type { CSSProperties } from '@stitches/react';
 import type { RouteTag } from 'rango-sdk';
 
 type BaseProps = {
-  percentageChange?: PriceImpactProps['percentageChange'];
-  warningLevel?: PriceImpactProps['warningLevel'];
+  percentageChange?: PriceImpactPropTypes['percentageChange'];
+  warningLevel?: PriceImpactPropTypes['warningLevel'];
   tooltipContainer?: HTMLElement;
   onClick?: () => void;
   selected?: boolean;
@@ -21,7 +21,7 @@ export type DataLoadedProps = {
   tags: RouteTag[];
   time: QuoteCostProps['time'];
   fee: QuoteCostProps['fee'];
-  outputPrice: SwapInputProps['price'];
+  outputPrice: SwapInputPropTypes['price'];
   loading?: false;
 };
 type LoadingProps = {

package/src/components/IconButton/IconButton.tsx

@@ -1,4 +1,4 @@
-import type { PropTypes } from './IconButton.types';
+import type { IconButtonPropTypes } from './IconButton.types';
 import type { PropsWithChildren, Ref } from 'react';
 
 import React from 'react';
@@ -7,7 +7,7 @@ import { Button } from '../Button';
 
 // border-radius: 100% + overflow: hidden
 function IconButtonComponent(
-  props: PropsWithChildren<PropTypes>,
+  props: PropsWithChildren<IconButtonPropTypes>,
   ref: Ref<HTMLButtonElement>
 ) {
   const { style, ...otherProps } = props;

package/src/components/IconButton/IconButton.types.ts

@@ -1,7 +1,7 @@
-import type { PropTypes as ButtonPropTypes } from '../Button/Button.types';
+import type { ButtonPropTypes } from '../Button/Button.types';
 import type { CSSProperties } from 'react';
 
-export type PropTypes = {
+export type IconButtonPropTypes = {
   size?: ButtonPropTypes['size'];
   type?: ButtonPropTypes['type'];
   variant?: ButtonPropTypes['variant'];

package/src/components/IconButton/index.ts

@@ -1 +1,2 @@
 export { IconButton } from './IconButton';
+export type { IconButtonPropTypes } from './IconButton.types';

package/src/components/List/List.types.ts

@@ -1,10 +1,10 @@
-import type { ListItemProps } from '../ListItem';
+import type { ListItemPropTypes } from '../ListItem';
 import type * as Stitches from '@stitches/react';
 import type React from 'react';
 
 export interface ListPropTypes {
   type?: React.ReactElement;
-  items: (ListItemProps & {
+  items: (ListItemPropTypes & {
     id: string;
     type?: React.ReactElement;
   })[];

package/src/components/ListItem/ListItem.tsx

@@ -1,4 +1,4 @@
-import type { ListItemProps } from './ListItem.types';
+import type { ListItemPropTypes } from './ListItem.types';
 
 import React from 'react';
 
@@ -6,7 +6,7 @@ import { Typography } from '../Typography';
 
 import { BaseListItem } from './ListItem.styles';
 
-function ListItem(props: ListItemProps) {
+function ListItem(props: ListItemPropTypes) {
   const { start, title, description, end, onClick, hasDivider, ...restProps } =
     props;
 

package/src/components/ListItem/ListItem.types.ts

@@ -1,4 +1,4 @@
-export type ListItemProps = {
+export type ListItemPropTypes = {
   title?: string | React.ReactElement;
   description?: string | React.ReactElement;
   start?: React.ReactNode;

package/src/components/ListItem/index.ts

@@ -1,2 +1,2 @@
-export type { ListItemProps } from './ListItem.types';
+export type { ListItemPropTypes } from './ListItem.types';
 export { ListItem } from './ListItem';

package/src/components/ListItemButton/ListItemButton.types.ts

@@ -1,7 +1,7 @@
-import type { ListItemProps } from '../ListItem';
+import type { ListItemPropTypes } from '../ListItem';
 import type { CSSProperties } from '@stitches/react';
 
-export type ListItemButtonProps = Omit<ListItemProps, 'onClick'> & {
+export type ListItemButtonProps = Omit<ListItemPropTypes, 'onClick'> & {
   id: string;
   onClick: (id: string) => void;
   style?: CSSProperties;

package/src/components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import type { PropTypes } from './Modal.types';
+import type { ModalPropTypes } from './Modal.types';
 import type { PropsWithChildren } from 'react';
 
 import React, { useEffect, useRef, useState } from 'react';
@@ -22,7 +22,7 @@ import {
 const CLOSED_DELAY = 600;
 const OPEN_DELAY = 100;
 
-export function Modal(props: PropsWithChildren<PropTypes>) {
+export function Modal(props: PropsWithChildren<ModalPropTypes>) {
   const {
     title,
     open,

package/src/components/Modal/Modal.types.ts

@@ -5,7 +5,7 @@ import type * as Stitches from '@stitches/react';
 type BaseProps = Stitches.VariantProps<typeof BackDrop>;
 type BaseAnchor = Exclude<BaseProps['anchor'], object>;
 
-export interface PropTypes {
+export interface ModalPropTypes {
   title?: string;
   open: boolean;
   onClose: () => void;

package/src/components/Modal/index.ts

@@ -1,3 +1,3 @@
 export { Modal } from './Modal';
 export { ModalHeader } from './Modal.styles';
-export type { PropTypes as ModalPropTypes } from './Modal.types';
+export type { ModalPropTypes } from './Modal.types';

package/src/components/NotFound/NotFound.tsx

@@ -1,4 +1,4 @@
-import type { PropTypes } from './NotFound.types';
+import type { NotFoundPropTypes } from './NotFound.types';
 
 import React from 'react';
 
@@ -8,7 +8,7 @@ import { Typography } from '../Typography';
 
 import { Container } from './NotFound.styles';
 
-export function NotFound(props: PropTypes) {
+export function NotFound(props: NotFoundPropTypes) {
   return (
     <Container>
       <SearchIcon color="secondary" size={26} />

package/src/components/NotFound/NotFound.types.ts

@@ -1,4 +1,4 @@
-export type PropTypes = {
+export type NotFoundPropTypes = {
   title: string;
   description?: string;
 };

package/src/components/NotFound/index.tsx

@@ -1 +1,2 @@
 export { NotFound } from './NotFound';
+export type { NotFoundPropTypes } from './NotFound.types';

package/src/components/Popover/Popover.tsx

@@ -1,4 +1,4 @@
-import type { ContentType, PropTypes, Ref } from './Popover.types';
+import type { ContentType, PopoverPropTypes, Ref } from './Popover.types';
 import type { PropsWithChildren } from 'react';
 
 import * as RadixPopover from '@radix-ui/react-popover';
@@ -27,7 +27,7 @@ export const PopoverContentComponent = (
 const PopoverContent = React.forwardRef(PopoverContentComponent);
 PopoverContent.displayName = 'PopoverContent';
 
-export function Popover(props: PropsWithChildren<PropTypes>) {
+export function Popover(props: PropsWithChildren<PopoverPropTypes>) {
   const {
     children,
     content,

package/src/components/Popover/Popover.types.ts

@@ -24,6 +24,6 @@ export interface ContentType {
   onOpenChange?: (open: boolean) => void;
 }
 
-export type PropTypes = ContentType & {
+export type PopoverPropTypes = ContentType & {
   content: ReactNode;
 };

package/src/components/Popover/index.ts

@@ -1 +1,2 @@
 export { Popover } from './Popover';
+export type { PopoverPropTypes } from './Popover.types';

package/src/components/PriceImpact/PriceImpact.tsx

@@ -1,4 +1,4 @@
-import type { PriceImpactProps } from './PriceImpact.types';
+import type { PriceImpactPropTypes } from './PriceImpact.types';
 
 import React from 'react';
 
@@ -6,7 +6,7 @@ import { Divider, Tooltip, Typography } from '..';
 
 import { Container, OutputUsdValue } from './PriceImpact.styles';
 
-export function PriceImpact(props: PriceImpactProps) {
+export function PriceImpact(props: PriceImpactPropTypes) {
   const {
     size = 'medium',
     outputUsdValue,

package/src/components/PriceImpact/PriceImpact.types.ts

@@ -1,9 +1,9 @@
-import type { PropTypes as TooltipPropTypes } from '../Tooltip/Tooltip.types';
+import type { TooltipPropTypes } from '../Tooltip/Tooltip.types';
 import type { TypographyPropTypes } from '../Typography';
 
 export type PriceImpactWarningLevel = 'low' | 'high' | undefined;
 
-export type PriceImpactProps = {
+export type PriceImpactPropTypes = {
   size: TypographyPropTypes['size'];
   outputUsdValue?: string;
   outputColor?: string;

package/src/components/PriceImpact/index.ts

@@ -1,2 +1,5 @@
 export { PriceImpact } from './PriceImpact';
-export type { PriceImpactWarningLevel } from './PriceImpact.types';
+export type {
+  PriceImpactWarningLevel,
+  PriceImpactPropTypes,
+} from './PriceImpact.types';

package/src/components/Radio/Radio.tsx

@@ -1,10 +1,10 @@
-import type { PropTypes } from './Radio.types';
+import type { RadioPropTypes } from './Radio.types';
 
 import React from 'react';
 
 import { StyledIndicator, StyledItem } from './Radio.styles';
 
-export function Radio(props: PropTypes) {
+export function Radio(props: RadioPropTypes) {
   const { value } = props;
   return (
     <StyledItem value={value} id={value}>

package/src/components/Radio/Radio.types.tsx

@@ -1,3 +1,3 @@
-export interface PropTypes {
+export interface RadioPropTypes {
   value: string;
 }

package/src/components/Radio/index.ts

@@ -1 +1,2 @@
 export { Radio } from './Radio';
+export type { RadioPropTypes } from './Radio.types';

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,4 +1,4 @@
-import type { PropTypes } from './RadioGroup.types';
+import type { RadioGroupPropTypes } from './RadioGroup.types';
 
 import React from 'react';
 
@@ -12,7 +12,7 @@ import {
   RadioRoot,
 } from './RadioGroup.styles';
 
-export function RadioGroup(props: PropTypes) {
+export function RadioGroup(props: RadioGroupPropTypes) {
   const { value, onChange, direction = 'vertical', style, options } = props;
   return (
     <Container>

package/src/components/RadioGroup/RadioGroup.types.tsx

@@ -1,12 +1,12 @@
-import type { PropTypes as RadioType } from '../Radio/Radio.types';
+import type { RadioPropTypes } from '../Radio';
 import type { CSSProperties } from '@stitches/react';
 
-export interface PropTypes {
+export interface RadioGroupPropTypes {
   options: {
     label: string;
-    value: RadioType['value'];
+    value: RadioPropTypes['value'];
   }[];
-  value: RadioType['value'];
+  value: RadioPropTypes['value'];
   onChange: (value: string) => void;
   direction?: 'vertical' | 'horizontal';
   style?: CSSProperties;

package/src/components/RadioGroup/index.ts

@@ -1,2 +1,3 @@
 export { RadioGroup } from './RadioGroup';
 export { RadioRoot } from './RadioGroup.styles';
+export type { RadioGroupPropTypes } from './RadioGroup.types';

package/src/components/Select/Select.tsx

@@ -1,4 +1,4 @@
-import type { PropTypes } from './Select.types';
+import type { SelectPropTypes } from './Select.types';
 
 import * as Select from '@radix-ui/react-select';
 import React, { useEffect, useRef, useState } from 'react';
@@ -8,7 +8,7 @@ import { Typography } from '../Typography';
 
 import { SelectContent, SelectItem, SelectTrigger } from './Select.styles';
 
-export function SelectComponent<T extends string>(props: PropTypes<T>) {
+export function SelectComponent<T extends string>(props: SelectPropTypes<T>) {
   const [open, setOpen] = useState(false);
   const selectRef = useRef<HTMLDivElement>(null);
   const { options, value, container, handleItemClick, variant } = props;

package/src/components/Select/Select.types.ts

@@ -5,7 +5,7 @@ type Item<T> = {
 
 type Variant = 'filled' | 'outlined';
 
-export type PropTypes<T> = {
+export type SelectPropTypes<T> = {
   options: Item<T>[];
   handleItemClick?: (item: Item<T>) => void;
   value: string;

package/src/components/Select/index.ts

@@ -1 +1,2 @@
 export { SelectComponent as Select } from './Select';
+export type { SelectPropTypes } from './Select.types';

package/src/components/SelectableCategoryList/SelectableCategoryList.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
-import type { PropTypes } from './SelectableCategoryList.types';
+import type { SelectableCategoryListPropTypes } from './SelectableCategoryList.types';
 
 import { i18n } from '@lingui/core';
 import React from 'react';
@@ -15,7 +15,7 @@ import {
 import { Container } from './SelectableCategoryList.styles';
 import { BlockchainCategories } from './SelectableCategoryList.types';
 
-export function SelectableCategoryList(props: PropTypes) {
+export function SelectableCategoryList(props: SelectableCategoryListPropTypes) {
   const { setCategory, category, isLoading, blockchains } = props;
   const categories = Object.keys(
     BlockchainCategories

package/src/components/SelectableCategoryList/SelectableCategoryList.types.ts

@@ -1,6 +1,6 @@
 import type { BlockchainMeta } from 'rango-sdk';
 
-export interface PropTypes {
+export interface SelectableCategoryListPropTypes {
   setCategory: (type: string) => void;
   category: string;
   blockchains: BlockchainMeta[];

package/src/components/SelectableCategoryList/index.ts

@@ -1,3 +1,4 @@
 export { SelectableCategoryList } from './SelectableCategoryList';
+export type { SelectableCategoryListPropTypes } from './SelectableCategoryList.types';
 export { BlockchainCategories } from './SelectableCategoryList.types';
 export { getCountCategories } from './SelectableCategoryList.helpers';

package/src/components/Skeleton/Skeleton.tsx

@@ -1,10 +1,10 @@
-import type { PropTypes } from './Skeleton.types';
+import type { SkeletonPropTypes } from './Skeleton.types';
 
 import React from 'react';
 
 import { SkeletonContainer } from './Skeleton.styles';
 
-export function Skeleton(props: PropTypes) {
+export function Skeleton(props: SkeletonPropTypes) {
   const { width = '100%' } = props;
   const customCss =
     props.variant !== 'text'

package/src/components/Skeleton/Skeleton.types.ts

@@ -17,4 +17,4 @@ type OtherVariant = {
   height: number;
 };
 
-export type PropTypes = TextVariant | OtherVariant;
+export type SkeletonPropTypes = TextVariant | OtherVariant;

package/src/components/Skeleton/index.ts

@@ -1 +1,2 @@
 export { Skeleton } from './Skeleton';
+export type { SkeletonPropTypes } from './Skeleton.types';

package/src/components/Spinner/Spinner.tsx

@@ -1,4 +1,4 @@
-import type { PropTypes } from './Spinner.types';
+import type { SpinnerPropTypes } from './Spinner.types';
 
 import React from 'react';
 
@@ -6,7 +6,7 @@ import { LoadingIcon } from '../../icons';
 
 import { SpinnerContainer } from './Spinner.styles';
 
-export function Spinner(props: PropTypes) {
+export function Spinner(props: SpinnerPropTypes) {
   const { size, color, css = {} } = props;
   return (
     <SpinnerContainer css={css}>

package/src/components/Spinner/Spinner.types.ts

@@ -1,7 +1,7 @@
 import type { SvgIconProps } from '../SvgIcon';
 import type * as Stitches from '@stitches/react';
 
-export interface PropTypes {
+export interface SpinnerPropTypes {
   // eslint-disable-next-line @typescript-eslint/no-magic-numbers
   size?: 12 | 16 | 20 | 24 | 30;
   color?: SvgIconProps['color'];

package/src/components/Spinner/index.ts

@@ -1 +1,2 @@
 export { Spinner } from './Spinner';
+export type { SpinnerPropTypes } from './Spinner.types';

package/src/components/StepDetails/StepDetails.types.ts

@@ -1,13 +1,13 @@
 import type { SwapperType } from 'rango-sdk';
 import type { ReactNode } from 'react';
-import type { SwapInputProps } from 'src/containers/SwapInput/SwapInput.types';
+import type { SwapInputPropTypes } from 'src/containers/SwapInput/SwapInput.types';
 
-type BaseStep = Pick<SwapInputProps, 'chain' | 'token' | 'price'>;
+type BaseStep = Pick<SwapInputPropTypes, 'chain' | 'token' | 'price'>;
 type BaseInternalStep = {
   chain: BaseStep['chain'];
 } & Partial<Pick<BaseStep, 'token' | 'price'>>;
 
-type SwapperInfo = SwapInputProps['chain'] & {
+type SwapperInfo = SwapInputPropTypes['chain'] & {
   type?: SwapperType;
 };
 

package/src/components/SwapListItem/SwapListItem.tsx

@@ -1,4 +1,4 @@
-import type { PropTypes } from './SwapListItem.types';
+import type { SwapListItemPropTypes } from './SwapListItem.types';
 import type { PropsWithChildren } from 'react';
 
 import React from 'react';
@@ -18,7 +18,7 @@ import {
 import { StatusColors } from './SwapListItem.types';
 import { SwapToken } from './SwapToken';
 
-export function SwapListItem(props: PropsWithChildren<PropTypes>) {
+export function SwapListItem(props: PropsWithChildren<SwapListItemPropTypes>) {
   if ('isLoading' in props) {
     return (
       <LoadingMain>

package/src/components/SwapListItem/SwapListItem.types.ts

@@ -14,7 +14,7 @@ export interface LoadingProps {
   isLoading: true;
 }
 
-export type PropTypes = SwapListItemProps | LoadingProps;
+export type SwapListItemPropTypes = SwapListItemProps | LoadingProps;
 
 export const StatusColors = {
   failed: 'error500',

package/src/components/SwapListItem/index.ts

@@ -1 +1,5 @@
 export { SwapListItem } from './SwapListItem';
+export type {
+  SwapTokenData,
+  SwapListItemPropTypes,
+} from './SwapListItem.types';

package/src/components/Switch/Switch.tsx

@@ -1,10 +1,10 @@
-import type { PropTypes } from './Switch.types';
+import type { SwitchPropTypes } from './Switch.types';
 
 import React from 'react';
 
 import { StyledSwitchRoot, StyledSwitchThumb } from './Switch.styles';
 
-export function Switch(props: PropTypes) {
+export function Switch(props: SwitchPropTypes) {
   const { checked, onChange } = props;
   return (
     <StyledSwitchRoot checked={checked} onCheckedChange={onChange}>

package/src/components/Switch/Switch.types.tsx

@@ -1,4 +1,4 @@
-export interface PropTypes {
+export interface SwitchPropTypes {
   checked: boolean;
   onChange?: (checked: boolean) => void;
 }

package/src/components/Switch/index.ts

@@ -1 +1,2 @@
 export { Switch } from './Switch';
+export type { SwitchPropTypes } from './Switch.types';

package/src/components/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import type { PropTypes } from './Tabs.types';
+import type { TabsPropTypes } from './Tabs.types';
 
 import React, { useEffect, useRef, useState } from 'react';
 
@@ -8,7 +8,7 @@ import { Tooltip } from '../Tooltip';
 import { BackdropTab, Tab, Tabs } from './Tabs.styles';
 
 const INITIAL_RENDER_DELAY = 100;
-export function TabsComponent(props: PropTypes) {
+export function TabsComponent(props: TabsPropTypes) {
   const {
     items: tabItems,
     onChange,