@purple/phoenix-components 5.28.2 → 5.30.0

package/dist/index.d.ts

@@ -1,7 +1,8 @@
-import React$1, { HTMLAttributes, JSX, PropsWithChildren, ReactElement, InputHTMLAttributes, FocusEventHandler, JSXElementConstructor, MouseEventHandler, TextareaHTMLAttributes } from 'react';
-import * as styled_components from 'styled-components';
-import { DefaultTheme, IntrinsicElementsKeys } from 'styled-components';
+import * as React$1 from 'react';
+import React__default, { HTMLAttributes, JSX, PropsWithChildren, ReactElement, InputHTMLAttributes, FocusEventHandler, JSXElementConstructor, MouseEventHandler, TextareaHTMLAttributes } from 'react';
 import { LayoutProps, FlexboxProps, GridProps, BackgroundColorProps, BackgroundProps, OpacityProps, PositionProps, BorderProps, DisplayProps } from 'styled-system';
+import * as styled_components from 'styled-components';
+import { DefaultTheme } from 'styled-components';
 import * as CSS from 'csstype';
 import { Props } from 'react-select';
 import { DayPickerSingleProps, DayPickerProps, DayPickerRangeProps } from 'react-day-picker';
@@ -82,9 +83,9 @@ interface GapProps {
 }
 
 interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, LayoutProps, FlexboxProps, GridProps, MarginProps, PaddingProps, BackgroundColorProps, BackgroundProps, OpacityProps, PositionProps, TextAlignProp, BorderProps, GenericComponentProps, GapProps {
-    element?: IntrinsicElementsKeys;
+    element?: keyof JSX.IntrinsicElements;
 }
-declare const Box: React$1.FC<BoxProps>;
+declare const Box: React__default.FC<BoxProps>;
 
 declare const IconAlignment: readonly ["left", "right"];
 type IconAlignment = typeof IconAlignment[number];
@@ -349,24 +350,24 @@ interface CommonButtonProps extends MarginProps {
     loading?: boolean;
 }
 
-interface ButtonProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, CommonButtonProps, GenericComponentProps {
+interface ButtonProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, CommonButtonProps, GenericComponentProps {
     light?: boolean;
-    ref?: React$1.Ref<HTMLButtonElement>;
+    ref?: React__default.Ref<HTMLButtonElement>;
 }
-declare const Button: React$1.FC<ButtonProps>;
+declare const Button: React__default.FC<ButtonProps>;
 
 interface ButtonGroupProps extends GenericComponentProps {
     children: JSX.Element[];
     dividers?: boolean;
 }
-declare const ButtonGroup: React$1.FC<ButtonGroupProps>;
+declare const ButtonGroup: React__default.FC<ButtonGroupProps>;
 
 interface CardProps extends PaddingProps, MarginProps, GenericComponentProps {
     elevated?: boolean;
     disabled?: boolean;
-    onClick?: React$1.MouseEventHandler<HTMLDivElement>;
+    onClick?: React__default.MouseEventHandler<HTMLDivElement>;
 }
-declare const Card: React$1.FC<PropsWithChildren<CardProps>>;
+declare const Card: React__default.FC<PropsWithChildren<CardProps>>;
 
 type FormControlWarningType = ReactElement | string;
 type FormControlErrorType = ReactElement | string | boolean;
@@ -374,7 +375,7 @@ type FormControlErrorType = ReactElement | string | boolean;
 interface CheckboxRadioCommonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, GenericComponentProps {
     colorTheme?: ColorTheme;
     size?: SizingSmMdLg;
-    label?: React$1.ReactNode;
+    label?: React__default.ReactNode;
     warning?: FormControlWarningType;
     error?: FormControlErrorType;
 }
@@ -382,23 +383,23 @@ interface CheckboxRadioCommonProps extends Omit<InputHTMLAttributes<HTMLInputEle
 type CheckboxProps = CheckboxRadioCommonProps & {
     indeterminate?: boolean;
 };
-declare const Checkbox: React$1.FC<CheckboxProps>;
+declare const Checkbox: React__default.FC<CheckboxProps>;
 
-interface ClosableButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, GenericComponentProps {
-    onClose?: React$1.MouseEventHandler<HTMLButtonElement>;
-    ref?: React$1.Ref<HTMLButtonElement>;
+interface ClosableButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement>, GenericComponentProps {
+    onClose?: React__default.MouseEventHandler<HTMLButtonElement>;
+    ref?: React__default.Ref<HTMLButtonElement>;
 }
-declare const ClosableButton: React$1.FC<ClosableButtonProps>;
+declare const ClosableButton: React__default.FC<ClosableButtonProps>;
 
 interface ClosableItemProps extends GenericComponentProps {
-    onClose?: React$1.MouseEventHandler<HTMLButtonElement>;
+    onClose?: React__default.MouseEventHandler<HTMLButtonElement>;
 }
-declare const ClosableItem: React$1.FC<PropsWithChildren<ClosableItemProps>>;
+declare const ClosableItem: React__default.FC<PropsWithChildren<ClosableItemProps>>;
 
 interface CollapsibleProps extends GenericComponentProps {
     collapsed: boolean;
 }
-declare const Collapsible: React$1.FC<PropsWithChildren<CollapsibleProps>>;
+declare const Collapsible: React__default.FC<PropsWithChildren<CollapsibleProps>>;
 
 interface CollapsibleCardProps extends CardProps, GenericComponentProps {
     heading: ReactElement | string;
@@ -410,14 +411,14 @@ interface CollapsibleCardProps extends CardProps, GenericComponentProps {
     showCard?: boolean;
     iconRotationDeg?: number;
 }
-declare const CollapsibleCard: React$1.FC<PropsWithChildren<CollapsibleCardProps>>;
+declare const CollapsibleCard: React__default.FC<PropsWithChildren<CollapsibleCardProps>>;
 
 interface FormControlProps extends GenericComponentProps {
     label?: string;
     success?: boolean;
     warning?: FormControlWarningType;
     error?: FormControlErrorType;
-    contentRight?: string | React$1.ReactNode;
+    contentRight?: string | React__default.ReactNode;
     helperText?: string;
     size?: Sizing;
     disabled?: boolean;
@@ -449,14 +450,14 @@ interface NumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, '
     numberBelowMinErrorMessage?: string;
     numberAboveMaxErrorMessage?: string;
 }
-declare const NumberInput: React$1.FC<NumberInputProps>;
+declare const NumberInput: React__default.FC<NumberInputProps>;
 
 interface SelectProps<Option extends SelectOption = SelectOption> extends CommonSelectProps<Option, false> {
     onChange: (option: Option | null) => void;
     value?: Option | null;
     useNativeSelectOnMobile?: boolean;
 }
-declare const Select: <Option extends SelectOption = SelectOption>({ testId, useNativeSelectOnMobile, ...props }: SelectProps<Option>) => React$1.ReactElement;
+declare const Select: <Option extends SelectOption = SelectOption>({ testId, useNativeSelectOnMobile, ...props }: SelectProps<Option>) => React__default.ReactElement;
 
 interface InputLabels {
     day: string;
@@ -485,7 +486,7 @@ interface DateInputProps extends GenericComponentProps {
     monthProps?: Omit<SelectProps, 'onChange'>;
     yearProps?: Omit<NumberInputProps, 'value' | 'onChange'>;
 }
-declare const DateInput: React$1.FC<DateInputProps>;
+declare const DateInput: React__default.FC<DateInputProps>;
 
 interface DatePickerProps extends DayPickerSingleProps, GenericComponentProps {
     value: Date | null;
@@ -493,7 +494,7 @@ interface DatePickerProps extends DayPickerSingleProps, GenericComponentProps {
     dayPickerProps?: DayPickerProps;
     yearMonthSelect?: boolean;
 }
-declare const DatePicker: React$1.FC<DatePickerProps>;
+declare const DatePicker: React__default.FC<DatePickerProps>;
 
 interface DateRangeValue {
     from: Date | null;
@@ -505,13 +506,13 @@ interface DateRangePickerProps extends DayPickerRangeProps, GenericComponentProp
     dayPickerProps?: DayPickerProps;
     yearMonthSelect?: boolean;
 }
-declare const DateRangePicker: React$1.FC<DateRangePickerProps>;
+declare const DateRangePicker: React__default.FC<DateRangePickerProps>;
 
 interface DropdownProps extends Partial<Omit<TippyProps, 'content' | 'render'>>, GenericComponentProps {
     children: ReactElement<unknown, string | JSXElementConstructor<unknown>>;
-    content: (hide?: () => void) => React$1.ReactNode;
+    content: (hide?: () => void) => React__default.ReactNode;
 }
-declare const Dropdown: React$1.FC<DropdownProps>;
+declare const Dropdown: React__default.FC<DropdownProps>;
 
 interface FileWithPreview extends File {
     preview: string;
@@ -549,58 +550,60 @@ interface FileUploadProps extends GenericComponentProps, FilePreviewCommonProps,
     unsupportedFileFormatErrorMessage?: string;
 }
 
-declare const FileUpload: React$1.FC<FileUploadProps>;
+declare const FileUpload: React__default.FC<FileUploadProps>;
 
-declare const Flex: React$1.FC<BoxProps>;
+declare const Flex: React__default.FC<BoxProps>;
 
-declare const Grid: React$1.FC<BoxProps>;
+declare const Grid: React__default.FC<BoxProps>;
 
 type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4';
 interface HeadingProps extends CommonTextProps<HTMLHeadingElement>, PaddingProps, MarginProps {
     element?: HeadingElement;
 }
-declare const Heading: React$1.FC<HeadingProps>;
+declare const Heading: React__default.FC<HeadingProps>;
 
 interface HorizontalDividerProps extends MarginProps, GenericComponentProps {
     colorTheme?: ColorTheme;
     height?: number;
 }
-declare const HorizontalDivider: React$1.FC<HorizontalDividerProps>;
+declare const HorizontalDivider: React__default.FC<HorizontalDividerProps>;
 
 interface IconProps extends MarginProps, GenericComponentProps {
+    disabled?: boolean;
+    colorTheme?: ColorTheme;
     icon: PhoenixIcons;
-    size?: Spacing | CSSValue;
+    size?: Sizing | CSSValue;
     color?: Color;
-    ref?: React$1.Ref<HTMLSpanElement>;
+    ref?: React__default.Ref<HTMLSpanElement>;
 }
-declare const Icon: React$1.FC<IconProps>;
+declare const Icon: React__default.FC<IconProps>;
 
-interface ImageProps extends Omit<React$1.ImgHTMLAttributes<HTMLImageElement>, 'width' | 'height'>, MarginProps, PaddingProps, DisplayProps, GenericComponentProps {
+interface ImageProps extends Omit<React__default.ImgHTMLAttributes<HTMLImageElement>, 'width' | 'height'>, MarginProps, PaddingProps, DisplayProps, GenericComponentProps {
     width?: CSSValue;
     height?: CSSValue;
     maxWidth?: CSSValue;
     maxHeight?: CSSValue;
 }
-declare const Image: React$1.FC<ImageProps>;
+declare const Image: React__default.FC<ImageProps>;
 
-type LabelProps = React$1.LabelHTMLAttributes<HTMLLabelElement> & GenericComponentProps & PaddingProps & MarginProps;
-declare const Label: React$1.FC<LabelProps>;
+type LabelProps = React__default.LabelHTMLAttributes<HTMLLabelElement> & GenericComponentProps & PaddingProps & MarginProps;
+declare const Label: React__default.FC<LabelProps>;
 
-interface LinkProps extends React$1.AnchorHTMLAttributes<HTMLAnchorElement>, GenericComponentProps, MarginProps, PaddingProps {
+interface LinkProps extends React__default.AnchorHTMLAttributes<HTMLAnchorElement>, GenericComponentProps, MarginProps, PaddingProps {
     icon?: IconType;
     iconAlignment?: IconAlignment;
     color?: Color;
     bold?: boolean;
     noUnderline?: boolean;
-    ref?: React$1.Ref<HTMLAnchorElement>;
+    ref?: React__default.Ref<HTMLAnchorElement>;
 }
-declare const Link: React$1.FC<LinkProps>;
+declare const Link: React__default.FC<LinkProps>;
 
-interface LinkButtonProps extends React$1.AnchorHTMLAttributes<HTMLAnchorElement>, CommonButtonProps, GenericComponentProps {
+interface LinkButtonProps extends React__default.AnchorHTMLAttributes<HTMLAnchorElement>, CommonButtonProps, GenericComponentProps {
     light?: boolean;
-    ref?: React$1.Ref<HTMLAnchorElement>;
+    ref?: React__default.Ref<HTMLAnchorElement>;
 }
-declare const LinkButton: React$1.FC<LinkButtonProps>;
+declare const LinkButton: React__default.FC<LinkButtonProps>;
 
 interface ListCommonProps {
     size?: Sizing | CSSValue;
@@ -611,25 +614,25 @@ interface ListCommonProps {
 
 interface ListProps extends ListCommonProps, Omit<HTMLAttributes<HTMLUListElement>, 'color'>, PaddingProps, MarginProps, GenericComponentProps {
 }
-declare const List: React$1.FC<ListProps>;
+declare const List: React__default.FC<ListProps>;
 
 interface ListItemProps extends ListCommonProps, Omit<HTMLAttributes<HTMLLIElement>, 'size' | 'color'>, MarginProps, GenericComponentProps {
 }
-declare const ListItem: React$1.FC<ListItemProps>;
+declare const ListItem: React__default.FC<ListItemProps>;
 
 interface MenuProps extends MarginProps, PaddingProps, GenericComponentProps {
 }
-declare const Menu: React$1.FC<PropsWithChildren<MenuProps>>;
+declare const Menu: React__default.FC<PropsWithChildren<MenuProps>>;
 
 interface MenuItemProps extends MarginProps, PaddingProps, GenericComponentProps {
     target?: string;
     href?: string;
-    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
     icon?: IconType | PhoenixIconsColored;
     colorTheme?: ColorTheme;
     disabled?: boolean;
 }
-declare const MenuItem: React$1.FC<PropsWithChildren<MenuItemProps>>;
+declare const MenuItem: React__default.FC<PropsWithChildren<MenuItemProps>>;
 
 interface ModalProps extends GenericComponentProps, PaddingProps, MarginProps {
     open: boolean;
@@ -641,14 +644,14 @@ interface ModalProps extends GenericComponentProps, PaddingProps, MarginProps {
     closeOnOverlayClick?: boolean;
     container?: Element;
 }
-declare const Modal: React$1.FC<PropsWithChildren<ModalProps>>;
+declare const Modal: React__default.FC<PropsWithChildren<ModalProps>>;
 
 interface MultiSelectProps<Option extends SelectOption = SelectOption> extends CommonSelectProps<Option, true>, GenericComponentProps {
     onChange: (option: readonly Option[]) => void;
     value: Option[];
     maxVisibleSelectedItems?: number;
 }
-declare const MultiSelect: <Option extends SelectOption = SelectOption>({ value, testId, ...props }: MultiSelectProps<Option>) => React$1.ReactElement;
+declare const MultiSelect: <Option extends SelectOption = SelectOption>({ value, testId, ...props }: MultiSelectProps<Option>) => React__default.ReactElement;
 
 interface CommonSliderProps {
     range: {
@@ -706,7 +709,7 @@ interface MultiSliderProps extends CommonSliderProps, ComponentSliderProps {
     onChange(value: MultiSliderValue): void;
     onRelease?(value: MultiSliderValue): void;
 }
-declare const MultiSlider: React$1.FC<MultiSliderProps>;
+declare const MultiSlider: React__default.FC<MultiSliderProps>;
 
 interface NoticeProps extends GenericComponentProps, MarginProps, PaddingProps {
     colorTheme?: ColorTheme;
@@ -716,12 +719,12 @@ interface NoticeProps extends GenericComponentProps, MarginProps, PaddingProps {
     buttonIconAlignment?: IconAlignment;
     buttonTestId?: string;
     closeTestId?: string;
-    onClick?: (event: React$1.MouseEvent) => void;
-    onClose?: (event: React$1.MouseEvent) => void;
+    onClick?: (event: React__default.MouseEvent) => void;
+    onClose?: (event: React__default.MouseEvent) => void;
     breakpoint?: number;
     borderRadius?: CSSValue;
 }
-declare const Notice: React$1.FC<PropsWithChildren<NoticeProps>>;
+declare const Notice: React__default.FC<PropsWithChildren<NoticeProps>>;
 
 interface PaginationProps extends GenericComponentProps, MarginProps {
     onChange: (page: number) => void;
@@ -732,22 +735,22 @@ interface PaginationProps extends GenericComponentProps, MarginProps {
     colorTheme?: ColorTheme;
     size?: Sizing;
 }
-declare const Pagination: React$1.FC<PaginationProps>;
+declare const Pagination: React__default.FC<PaginationProps>;
 
 interface ParagraphProps extends CommonTextProps<HTMLParagraphElement>, PaddingProps, MarginProps {
     lineHeight?: Sizing | CSSValue;
 }
-declare const Paragraph: React$1.FC<ParagraphProps>;
+declare const Paragraph: React__default.FC<ParagraphProps>;
 
 interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, FormControlProps {
-    ref?: React$1.Ref<HTMLInputElement>;
+    ref?: React__default.Ref<HTMLInputElement>;
 }
-declare const TextInput: React$1.FC<TextInputProps>;
+declare const TextInput: React__default.FC<TextInputProps>;
 
 interface PasswordInputProps extends Omit<TextInputProps, 'type' | 'contentRight'> {
-    ref?: React$1.Ref<HTMLInputElement>;
+    ref?: React__default.Ref<HTMLInputElement>;
 }
-declare const PasswordInput: React$1.FC<PasswordInputProps>;
+declare const PasswordInput: React__default.FC<PasswordInputProps>;
 
 declare enum PasswordStrengthEnum {
     NONE = "none",
@@ -768,16 +771,16 @@ interface PasswordStrengthProps extends GenericComponentProps, MarginProps, Padd
         [PasswordStrengthEnum.EXCELLENT]?: string;
     };
 }
-declare const PasswordStrength: React$1.FC<PasswordStrengthProps>;
+declare const PasswordStrength: React__default.FC<PasswordStrengthProps>;
 
 interface ProgressBarProps extends MarginProps, GenericComponentProps {
     value?: number;
     color?: ColorTheme | CSSColor;
 }
-declare const ProgressBar: React$1.FC<ProgressBarProps>;
+declare const ProgressBar: React__default.FC<ProgressBarProps>;
 
 type RadioProps = CheckboxRadioCommonProps;
-declare const Radio: React$1.FunctionComponent<RadioProps>;
+declare const Radio: React__default.FunctionComponent<RadioProps>;
 
 interface SelectNativeProps<Option extends SelectOption = SelectOption> extends FormControlProps {
     onChange: (option: Option | null) => void;
@@ -787,7 +790,7 @@ interface SelectNativeProps<Option extends SelectOption = SelectOption> extends
     onFocus?: FocusEventHandler<HTMLSelectElement>;
     onBlur?: FocusEventHandler<HTMLSelectElement>;
 }
-declare const SelectNative: <Option extends SelectOption = SelectOption>({ testId, size, options, ...props }: SelectNativeProps<Option>) => React$1.ReactElement;
+declare const SelectNative: <Option extends SelectOption = SelectOption>({ testId, size, options, ...props }: SelectNativeProps<Option>) => React__default.ReactElement;
 
 interface SelectPickerProps extends GenericComponentProps {
     value: string | string[];
@@ -797,8 +800,8 @@ interface SelectPickerProps extends GenericComponentProps {
     multiSelect?: boolean;
     error?: string | boolean;
     warning?: string;
-    onMouseOver?: (event: React$1.MouseEvent) => void;
-    onMouseLeave?: (event: React$1.MouseEvent) => void;
+    onMouseOver?: (event: React__default.MouseEvent) => void;
+    onMouseLeave?: (event: React__default.MouseEvent) => void;
     colorTheme?: ColorTheme;
     size?: SizingMdLg;
     imageSize?: string;
@@ -810,7 +813,7 @@ interface SelectPickerOption {
     image?: string;
     isDisabled?: boolean;
 }
-declare const SelectPicker: React$1.FC<SelectPickerProps>;
+declare const SelectPicker: React__default.FC<SelectPickerProps>;
 
 type SliderValue = number | string;
 interface SliderProps extends CommonSliderProps, ComponentSliderProps {
@@ -819,17 +822,17 @@ interface SliderProps extends CommonSliderProps, ComponentSliderProps {
     onRelease?(value: SliderValue): void;
     limit?: number;
 }
-declare const Slider: React$1.FC<SliderProps>;
+declare const Slider: React__default.FC<SliderProps>;
 
 interface SpinnerProps extends MarginProps, GenericComponentProps {
     size?: Sizing | CSSValue;
     colorTheme?: ColorTheme;
     light?: boolean;
 }
-declare const Spinner: React$1.FC<SpinnerProps>;
+declare const Spinner: React__default.FC<SpinnerProps>;
 
 type TabsProps = TabsProps$1 & GenericComponentProps;
-declare const Tabs: React$1.FC<TabsProps>;
+declare const Tabs: React__default.FC<TabsProps>;
 
 interface TabListCommonProps {
     animate?: boolean;
@@ -840,20 +843,20 @@ interface TabCommonProps extends TabListCommonProps {
     disabled?: boolean;
 }
 
-interface TabProps extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, 'tabIndex'>, GenericComponentProps, TabCommonProps {
+interface TabProps extends Omit<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, 'tabIndex'>, GenericComponentProps, TabCommonProps {
     disabledClassName?: string;
     selectedClassName?: string;
     tabIndex?: string;
     id?: string;
-    ref?: React$1.Ref<HTMLAnchorElement>;
+    ref?: React__default.Ref<HTMLAnchorElement>;
 }
-type TabFunctionProps = React$1.FC<TabProps> & {
+type TabFunctionProps = React__default.FC<TabProps> & {
     tabsRole?: 'Tab';
 };
 declare const Tab: TabFunctionProps;
 
 type TabListProps = GenericComponentProps & TabListCommonProps;
-declare const TabList: React$1.FC<PropsWithChildren<TabListProps>> & {
+declare const TabList: React__default.FC<PropsWithChildren<TabListProps>> & {
     tabsRole: 'TabList';
 };
 
@@ -863,34 +866,34 @@ interface TagProps extends GenericComponentProps, MarginProps {
     secondary?: boolean;
     outline?: boolean;
 }
-declare const Tag: React$1.FC<PropsWithChildren<TagProps>>;
+declare const Tag: React__default.FC<PropsWithChildren<TagProps>>;
 
 interface TextProps extends CommonTextProps<HTMLDivElement>, PaddingProps, MarginProps {
     ellipsize?: boolean;
     element?: 'div' | 'span';
     title?: string;
 }
-declare const Text: React$1.FC<TextProps>;
+declare const Text: React__default.FC<TextProps>;
 
 interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, FormControlProps {
 }
-declare const TextArea: React$1.FC<TextAreaProps>;
+declare const TextArea: React__default.FC<TextAreaProps>;
 
 type TimezonePickerProps = Omit<SelectProps, 'options'> & GenericComponentProps;
-declare const TimezonePicker: React$1.FC<TimezonePickerProps>;
+declare const TimezonePicker: React__default.FC<TimezonePickerProps>;
 
 declare const getOptions: () => SelectOption[];
 
 interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, GenericComponentProps {
     colorTheme?: ColorTheme;
-    label?: React$1.ReactNode;
+    label?: React__default.ReactNode;
     warning?: FormControlWarningType;
     error?: FormControlErrorType;
 }
-declare const Toggle: React$1.FC<ToggleProps>;
+declare const Toggle: React__default.FC<ToggleProps>;
 
 type TooltipProps = Omit<TippyProps, 'theme'> & GenericComponentProps;
-declare const Tooltip: React$1.FC<TooltipProps>;
+declare const Tooltip: React__default.FC<TooltipProps>;
 
 declare const prefixedTheme: {
     $pc: {
@@ -1993,15 +1996,16 @@ declare const prefixedTheme: {
             };
         };
     };
+    dir: "ltr" | "rtl";
 };
 
-declare const GlobalStyles: styled_components.GlobalStyleComponent<{}, styled_components.DefaultTheme>;
+declare const GlobalStyles: React$1.NamedExoticComponent<styled_components.ExecutionProps & object>;
 
 interface ColorAndTheme {
-    $color?: Color;
+    color?: Color;
     theme: DefaultTheme;
 }
-declare const getTextColor: (brandDefault?: boolean) => ({ $color, theme }: ColorAndTheme) => string;
+declare const getTextColor: (brandDefault?: boolean) => ({ color, theme }: ColorAndTheme) => string;
 declare const getUnitlessNumber: (number: string) => number;
 declare const getLineHeightUnitless: (lineHeightPercentage: string) => number;
 interface BoxShadowObj {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purple/phoenix-components",
-  "version": "5.28.2",
+  "version": "5.30.0",
   "description": "",
   "main": "dist/bundle.umd.js",
   "module": "dist/bundle.esm.js",
@@ -32,6 +32,7 @@
     "*.{ts,tsx,js,jsx,json,d.ts}": "eslint --fix"
   },
   "dependencies": {
+    "@emotion/is-prop-valid": "1.4.0",
     "@react-hook/previous": "~1.0.1",
     "@tippyjs/react": "~4.2.6",
     "countries-and-timezones": "^3.3.0",
@@ -47,6 +48,7 @@
     "react-select": "^5.10.2",
     "react-tabs": "^6.1.0",
     "styled-system": "~5.1.5",
+    "stylis": "4.3.6",
     "zxcvbn": "~4.4.2"
   },
   "peerDependencies": {
@@ -93,7 +95,6 @@
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@types/react-tabs": "^5.0.5",
-    "@types/styled-components": "^5.1.26",
     "@types/styled-system": "^5.1.13",
     "@types/zxcvbn": "^4.4.2",
     "@typescript-eslint/eslint-plugin": "^8.34.1",
@@ -130,7 +131,7 @@
     "storybook": "^9.0.12",
     "style-dictionary": "^5.0.0",
     "style-dictionary-utils": "^4.1.0",
-    "styled-components": "^5.3.5",
+    "styled-components": "6.1.19",
     "tippy.js": "^6.3.7",
     "ts-node": "^10.9.1",
     "tslib": "^2.6.2",