@aws-amplify/ui-react 3.0.4 → 3.2.1

package/dist/types/primitives/shared/constants.d.ts

@@ -1,540 +1,14 @@
-export declare const ComponentClassObject: {
-    readonly Alert: {
-        readonly className: "amplify-alert";
-        readonly components: readonly ["Alert"];
-        readonly description: "Top level element that wraps the Alert primitive";
-    };
-    readonly AlertIcon: {
-        readonly className: "amplify-alert__icon";
-        readonly components: readonly ["Alert"];
-        readonly description: "Class applied to Icon component within the Alert primitive";
-    };
-    readonly AlertHeading: {
-        readonly className: "amplify-alert__heading";
-        readonly components: readonly ["Alert"];
-        readonly description: "Class applied to the heading View";
-    };
-    readonly AlertBody: {
-        readonly className: "amplify-alert__body";
-        readonly components: readonly ["Alert"];
-        readonly description: "Class applied to the body View";
-    };
-    readonly AlertDismiss: {
-        readonly className: "amplify-alert__dismiss";
-        readonly components: readonly ["Alert"];
-        readonly description: "Class applied to the close Button";
-    };
-    readonly Badge: {
-        readonly className: "amplify-badge";
-        readonly components: readonly ["Badge"];
-        readonly description: "Top level element that wraps the Badge component";
-    };
-    readonly Button: {
-        readonly className: "amplify-button";
-        readonly components: readonly ["Button"];
-        readonly description: "Top level element that wraps the Button primitive";
-    };
-    readonly ButtonGroup: {
-        readonly className: "amplify-buttongroup";
-    };
-    readonly ButtonLoaderWrapper: {
-        readonly className: "amplify-button__loader-wrapper";
-        readonly components: readonly ["Button"];
-        readonly description: "Class applied to the Loader component within the Button Loading state";
-    };
-    readonly Card: {
-        readonly className: "amplify-card";
-        readonly components: readonly ["Card"];
-        readonly description: "Top level element that wraps the Card primitive";
-    };
-    readonly Checkbox: {
-        readonly className: "amplify-checkbox";
-        readonly components: readonly ["Checkbox"];
-        readonly description: "Top level element that wraps the Checkbox primitive";
-    };
-    readonly CheckboxButton: {
-        readonly className: "amplify-checkbox__button";
-        readonly components: readonly ["Checkbox"];
-        readonly description: "Wrapper for the checked icon within the Checkbox primitive";
-    };
-    readonly CheckboxIcon: {
-        readonly className: "amplify-checkbox__icon";
-        readonly components: readonly ["Checkbox"];
-        readonly description: "Class applied to the checked icon within the Checkbox primitive";
-    };
-    readonly CheckboxInput: {
-        readonly className: "amplify-checkbox__input";
-        readonly components: readonly ["Checkbox"];
-        readonly description: "Class applied to the visually hidden checkbox input within the Checkbox primitive";
-    };
-    readonly CheckboxLabel: {
-        readonly className: "amplify-checkbox__label";
-        readonly components: readonly ["Checkbox"];
-        readonly description: "Class applied to the label within the Checkbox primitive";
-    };
-    readonly CheckboxField: {
-        readonly className: "amplify-checkboxfield";
-        readonly components: readonly ["CheckboxField"];
-        readonly description: "Top level element that wraps the CheckboxField primitive";
-    };
-    readonly Collection: {
-        readonly className: "amplify-collection";
-        readonly components: readonly ["Collection"];
-        readonly description: "Top level element that wraps the Collection primitive";
-    };
-    readonly CollectionItems: {
-        readonly className: "amplify-collection-items";
-        readonly components: readonly ["Collection"];
-        readonly description: "Class applied to the element that wraps all the items in a collection";
-    };
-    readonly CollectionSearch: {
-        readonly className: "amplify-collection-search";
-        readonly components: readonly ["Collection"];
-        readonly description: "Class applied to the element that wraps the collection search box";
-    };
-    readonly CollectionPagination: {
-        readonly className: "amplify-collection-pagination";
-        readonly components: readonly ["Collection"];
-        readonly description: "Class applied to the element that wraps the pagination component in a collection";
-    };
-    readonly CountryCodeSelect: {
-        readonly className: "amplify-countrycodeselect";
-        readonly components: readonly ["PhoneNumberField"];
-        readonly description: "Class applied to the Country Code Select within the PhoneNumberField primitive";
-    };
-    readonly Divider: {
-        readonly className: "amplify-divider";
-        readonly components: readonly ["Divider"];
-        readonly description: "Top level element that wraps the Divider primitive";
-    };
-    readonly DividerLabel: {
-        readonly className: "amplify-divider--label";
-        readonly components: readonly ["Divider"];
-        readonly description: "Class applied to the label of the Divider component";
-    };
-    readonly Expander: {
-        readonly className: "amplify-expander";
-        readonly components: readonly ["Expander"];
-        readonly description: "Top level element that wraps the Expander primitive";
-    };
-    readonly ExpanderContent: {
-        readonly className: "amplify-expander__content";
-        readonly components: readonly ["Expander"];
-        readonly description: "Expander content container";
-    };
-    readonly ExpanderContentText: {
-        readonly className: "amplify-expander__content__text";
-        readonly components: readonly ["Expander"];
-        readonly description: "Expander content text";
-    };
-    readonly ExpanderHeader: {
-        readonly className: "amplify-expander__header";
-        readonly components: readonly ["Expander"];
-        readonly description: "Expander item header";
-    };
-    readonly ExpanderIcon: {
-        readonly className: "amplify-expander__icon";
-        readonly components: readonly ["Expander"];
-        readonly description: "Icon to indicate whether an item is expanded or collapsed";
-    };
-    readonly ExpanderItem: {
-        readonly className: "amplify-expander__item";
-        readonly components: readonly ["Expander"];
-        readonly description: "Expander item(containier for header, trigger, and content)";
-    };
-    readonly ExpanderTrigger: {
-        readonly className: "amplify-expander__trigger";
-        readonly components: readonly ["Expander"];
-        readonly description: "Expander item trigger(button)";
-    };
-    readonly Field: {
-        readonly className: "amplify-field";
-    };
-    readonly FieldDescription: {
-        readonly className: "amplify-field__description";
-    };
-    readonly FieldErrorMessage: {
-        readonly className: "amplify-field__error-message";
-    };
-    readonly FieldGroup: {
-        readonly className: "amplify-field-group";
-    };
-    readonly FieldGroupControl: {
-        readonly className: "amplify-field-group__control";
-    };
-    readonly FieldGroupOuterEnd: {
-        readonly className: "amplify-field-group__outer-end";
-    };
-    readonly FieldGroupOuterStart: {
-        readonly className: "amplify-field-group__outer-start";
-    };
-    readonly FieldGroupInnerEnd: {
-        readonly className: "amplify-field-group__inner-end";
-    };
-    readonly FieldGroupInnerStart: {
-        readonly className: "amplify-field-group__inner-start";
-    };
-    readonly FieldGroupIcon: {
-        readonly className: "amplify-field-group__icon";
-    };
-    readonly FieldGroupIconButton: {
-        readonly className: "amplify-field-group__icon-button";
-    };
-    readonly FieldGroupHasInnerEnd: {
-        readonly className: "amplify-field-group--has-inner-end";
-    };
-    readonly FieldGroupHasInnerStart: {
-        readonly className: "amplify-field-group--has-inner-start";
-    };
-    readonly FieldShowPassword: {
-        readonly className: "amplify-field__show-password";
-    };
-    readonly FieldGroupFieldWrapper: {
-        readonly className: "amplify-field-group__field-wrapper";
-    };
-    readonly Flex: {
-        readonly className: "amplify-flex";
-        readonly components: readonly ["Flex"];
-        readonly description: "Top level element that wraps the Flex primitive";
-    };
-    readonly Grid: {
-        readonly className: "amplify-grid";
-        readonly components: readonly ["Grid"];
-        readonly description: "Top level element that wraps the Grid primitive";
-    };
-    readonly Heading: {
-        readonly className: "amplify-heading";
-        readonly components: readonly ["Heading"];
-        readonly description: "Top level element that wraps the Heading primitive";
-    };
-    readonly Icon: {
-        readonly className: "amplify-icon";
-        readonly components: readonly ["Icon"];
-        readonly description: "Top level element that wraps the Icon primitive";
-    };
-    readonly Image: {
-        readonly className: "amplify-image";
-        readonly components: readonly ["Image"];
-        readonly description: "Top level element that wraps the Image primitive";
-    };
-    readonly Input: {
-        readonly className: "amplify-input";
-    };
-    readonly Label: {
-        readonly className: "amplify-label";
-    };
-    readonly Link: {
-        readonly className: "amplify-link";
-        readonly components: readonly ["Link"];
-        readonly description: "Top level element that wraps the Link primitive";
-    };
-    readonly Loader: {
-        readonly className: "amplify-loader";
-        readonly components: readonly ["Loader"];
-        readonly description: "Top level element that wraps the Loader primitive";
-    };
-    readonly LoaderDeterminate: {
-        readonly className: "amplify-loader--determinate";
-        readonly components: readonly ["Loader"];
-        readonly description: "Class applied to a determinate loader";
-    };
-    readonly LoaderPercentageText: {
-        readonly className: "amplify-loader__percentage-text";
-        readonly components: readonly ["Loader"];
-        readonly description: "Class applied to the percentage text of loader";
-    };
-    readonly MenuContent: {
-        readonly className: "amplify-menu-content";
-        readonly components: readonly ["Menu"];
-        readonly description: "Menu content container (Flex)";
-    };
-    readonly MenuItem: {
-        readonly className: "amplify-menu-content__item";
-        readonly components: readonly ["Menu"];
-        readonly description: "Menu item button (MenuButton, wrapped in amplify-menu-content class)";
-    };
-    readonly MenuTrigger: {
-        readonly className: "amplify-menu-trigger";
-        readonly components: readonly ["Menu"];
-        readonly description: "Menu trigger button (MenuButton, not wrapped in amplify-menu-content class)";
-    };
-    readonly Pagination: {
-        readonly className: "amplify-pagination";
-        readonly components: readonly ["Pagination"];
-        readonly description: "Top level element that wraps the Pagination primitive";
-    };
-    readonly PaginationItemButton: {
-        readonly className: "amplify-pagination__item-button";
-        readonly components: readonly ["Pagination"];
-        readonly description: "Class applied to the pagination buttons";
-    };
-    readonly PaginationItemCurrent: {
-        readonly className: "amplify-pagination__item-current";
-        readonly components: readonly ["Pagination"];
-        readonly description: "Class applied to the currently selected pagination button";
-    };
-    readonly PaginationItemEllipsis: {
-        readonly className: "amplify-pagination__item-ellipsis";
-        readonly components: readonly ["Pagination"];
-        readonly description: "Class applied to the ellipsis within the Pagination primitive";
-    };
-    readonly PasswordField: {
-        readonly className: "amplify-passwordfield";
-        readonly components: readonly ["PasswordField"];
-        readonly description: "Top level element that wraps the PasswordField primitive";
-    };
-    readonly PhoneNumberField: {
-        readonly className: "amplify-phonenumberfield";
-        readonly components: readonly ["PhoneNumberField"];
-        readonly description: "Top level element that wraps the PhoneNumberField primitive";
-    };
-    readonly Placeholder: {
-        readonly className: "amplify-placeholder";
-        readonly components: readonly ["Placeholder"];
-        readonly description: "Top level element that wraps the Placeholder primitive";
-    };
-    readonly Radio: {
-        readonly className: "amplify-radio";
-        readonly components: readonly ["RadioGroupField", "Radio"];
-        readonly description: "Top level element that wraps the Radio primitive";
-    };
-    readonly RadioButton: {
-        readonly className: "amplify-radio__button";
-        readonly components: readonly ["RadioGroupField", "Radio"];
-        readonly description: "Class applied to the displayed radio button";
-    };
-    readonly RadioInput: {
-        readonly className: "amplify-radio__input";
-        readonly components: readonly ["RadioGroupField", "Radio"];
-        readonly description: "Class applied to the visually hidden radio input";
-    };
-    readonly RadioLabel: {
-        readonly className: "amplify-radio__label";
-        readonly components: readonly ["RadioGroupField", "Radio"];
-        readonly description: "Class applied to the radio label";
-    };
-    readonly RadioGroupField: {
-        readonly className: "amplify-radiogroupfield";
-        readonly components: readonly ["RadioGroupField"];
-        readonly description: "Top level element that wraps the RadioGroupField primitive";
-    };
-    readonly RadioGroup: {
-        readonly className: "amplify-radiogroup";
-        readonly components: readonly ["RadioGroupField"];
-        readonly description: "Class applied to the radio group wrapper";
-    };
-    readonly Rating: {
-        readonly className: "amplify-rating";
-        readonly components: readonly ["Rating"];
-        readonly description: "Top level element that wraps the Rating primitive";
-    };
-    readonly ScrollView: {
-        readonly className: "amplify-scrollview";
-        readonly components: readonly ["ScrollView"];
-        readonly description: "Top level element that wraps the ScrollView primitive";
-    };
-    readonly SearchField: {
-        readonly className: "amplify-searchfield";
-        readonly components: readonly ["SearchField"];
-        readonly description: "Top level element that wraps the SearchField primitive";
-    };
-    readonly SearchFieldClear: {
-        readonly className: "amplify-searchfield__clear";
-        readonly components: readonly ["SearchField"];
-        readonly description: "Class applied to the search field clear button";
-    };
-    readonly SearchFieldSearch: {
-        readonly className: "amplify-searchfield__search";
-        readonly components: readonly ["SearchField"];
-        readonly description: "Class applied to the search button";
-    };
-    readonly Select: {
-        readonly className: "amplify-select";
-        readonly components: readonly ["Select", "SelectField"];
-        readonly description: "Class applied to the select element";
-    };
-    readonly SelectField: {
-        readonly className: "amplify-selectfield";
-        readonly components: readonly ["SelectField"];
-        readonly description: "Top level element that wraps the SelectField primitive";
-    };
-    readonly SelectWrapper: {
-        readonly className: "amplify-select__wrapper";
-        readonly components: readonly ["Select", "SelectField"];
-        readonly description: "Class applied to the select wrapper";
-    };
-    readonly SelectIconWrapper: {
-        readonly className: "amplify-select__icon-wrapper";
-        readonly components: readonly ["Select", "SelectField"];
-        readonly description: "Class applied to the select icon wrapper";
-    };
-    readonly SliderField: {
-        readonly className: "amplify-sliderfield";
-        readonly components: readonly ["SliderField"];
-        readonly description: "Top level element that wraps the SliderField primitive";
-    };
-    readonly SliderFieldGroup: {
-        readonly className: "amplify-sliderfield__group";
-        readonly components: readonly ["SliderField"];
-        readonly description: "Class applied to the element that wraps the slider root";
-    };
-    readonly SliderFieldLabel: {
-        readonly className: "amplify-sliderfield__label";
-        readonly components: readonly ["SliderField"];
-        readonly description: "Class applied to the slider label";
-    };
-    readonly SliderFieldRange: {
-        readonly className: "amplify-sliderfield__range";
-        readonly components: readonly ["SliderField"];
-        readonly description: "Class applied to the filled in portion of the slider track";
-    };
-    readonly SliderFieldRoot: {
-        readonly className: "amplify-sliderfield__root";
-        readonly components: readonly ["SliderField"];
-        readonly description: "Class applied to the slider root which wraps the track and thumb";
-    };
-    readonly SliderFieldThumb: {
-        readonly className: "amplify-sliderfield__thumb";
-        readonly components: readonly ["SliderField"];
-        readonly description: "Class applied to the slider thumb";
-    };
-    readonly SliderFieldTrack: {
-        readonly className: "amplify-sliderfield__track";
-        readonly components: readonly ["SliderField"];
-        readonly description: "Class applied to the slider track";
-    };
-    readonly StepperField: {
-        readonly className: "amplify-stepperfield";
-        readonly components: readonly ["StepperField"];
-        readonly description: "Top level element that wraps the StepperField primitive";
-    };
-    readonly StepperFieldButtonDecrease: {
-        readonly className: "amplify-stepperfield__button--decrease";
-        readonly components: readonly ["StepperField"];
-        readonly description: "Class applied to the decrease button";
-    };
-    readonly StepperFieldButtonIncrease: {
-        readonly className: "amplify-stepperfield__button--increase";
-        readonly components: readonly ["StepperField"];
-        readonly description: "Class applied to the increase button";
-    };
-    readonly StepperFieldInput: {
-        readonly className: "amplify-stepperfield__input";
-        readonly components: readonly ["StepperField"];
-        readonly description: "Class applied to the StepperField input";
-    };
-    readonly SwitchField: {
-        readonly className: "amplify-switchfield";
-        readonly components: readonly ["SwitchField"];
-        readonly description: "Top level element that wraps the SwitchField primitive";
-    };
-    readonly SwitchLabel: {
-        readonly className: "amplify-switch-label";
-        readonly components: readonly ["SwitchField"];
-        readonly description: "Class applied to the SwitchField label text";
-    };
-    readonly SwitchThumb: {
-        readonly className: "amplify-switch-thumb";
-        readonly components: readonly ["SwitchField"];
-        readonly description: "Class applied to the SwitchField thumb";
-    };
-    readonly SwitchTrack: {
-        readonly className: "amplify-switch-track";
-        readonly components: readonly ["SwitchField"];
-        readonly description: "Class applied to the SwitchField track";
-    };
-    readonly SwitchWrapper: {
-        readonly className: "amplify-switch__wrapper";
-        readonly components: readonly ["SwitchField"];
-        readonly description: "Class applied to the label element that wraps the SwitchField label and track";
-    };
-    readonly Table: {
-        readonly className: "amplify-table";
-        readonly components: readonly ["Table"];
-        readonly description: "Top level element that wraps the Table primitive";
-    };
-    readonly TableCaption: {
-        readonly className: "amplify-table__caption";
-        readonly components: readonly ["Table"];
-        readonly description: "Class applied to the content provided as the caption prop";
-    };
-    readonly TableBody: {
-        readonly className: "amplify-table__body";
-        readonly components: readonly ["Table"];
-        readonly description: "Class applied to TableBody component";
-    };
-    readonly TableTd: {
-        readonly className: "amplify-table__td";
-        readonly components: readonly ["Table"];
-        readonly description: "Class applied to TableCell component rendered as a <td> element (<TableCell as=\"td\" />)";
-    };
-    readonly TableTh: {
-        readonly className: "amplify-table__th";
-        readonly components: readonly ["Table"];
-        readonly description: "Class applied to TableCell comopnent rendered as a <th> element (<TableCell as=\"th\" />)";
-    };
-    readonly TableFoot: {
-        readonly className: "amplify-table__foot";
-        readonly components: readonly ["Table"];
-        readonly description: "Class applied to TableFoot component";
-    };
-    readonly TableHead: {
-        readonly className: "amplify-table__head";
-        readonly components: readonly ["Table"];
-        readonly description: "Class applied to TableHead component";
-    };
-    readonly TableRow: {
-        readonly className: "amplify-table__row";
-        readonly components: readonly ["Table"];
-        readonly description: "Class applied to TableRow component";
-    };
-    readonly Tabs: {
-        readonly className: "amplify-tabs";
-        readonly components: readonly ["Tabs"];
-        readonly description: "Top level element that wraps the Tabs primitive";
-    };
-    readonly TabItems: {
-        readonly className: "amplify-tabs-item";
-        readonly components: readonly ["Tabs"];
-        readonly description: "Top level element that wraps the TabItem primitive";
-    };
-    readonly Text: {
-        readonly className: "amplify-text";
-        readonly components: readonly ["Text"];
-        readonly description: "Top level element that wraps the Text primitive";
-    };
-    readonly Textarea: {
-        readonly className: "amplify-textarea";
-        readonly components: readonly ["TextAreaField"];
-        readonly description: "Class applied to the text area";
-    };
-    readonly TextAreaField: {
-        readonly className: "amplify-textareafield";
-        readonly components: readonly ["TextAreaField"];
-        readonly description: "Top level element that wraps the TextAreaField primitive";
-    };
-    readonly TextField: {
-        readonly className: "amplify-textfield";
-        readonly components: readonly ["TextField"];
-        readonly description: "Top level element that wraps the TextField primitive";
-    };
-    readonly ToggleButton: {
-        readonly className: "amplify-togglebutton";
-        readonly components: readonly ["ToggleButton"];
-        readonly description: "Top level element that wraps the ToggleButton primitive";
-    };
-    readonly ToggleButtonGroup: {
-        readonly className: "amplify-togglebuttongroup";
-        readonly components: readonly ["ToggleButton", "ToggleButtonGroup"];
-        readonly description: "Top level element that wraps the ToggleButtonGroup primitive";
-    };
-    readonly VisuallyHidden: {
-        readonly className: "amplify-visually-hidden";
-        readonly components: readonly ["VisuallyHidden"];
-        readonly description: "Top level element that wraps the VisuallyHidden primitive";
-    };
-};
+import { ThemeStylePropKey, ThemeTokenKey } from '../types/theme';
+import { ComponentClassNames as ComponentClassNamesType, ComponentClassNameItems } from './types';
+/**
+ * @internal May be removed in a future release
+ */
+export declare const ComponentClassObject: ComponentClassNameItems;
+export declare const ComponentClassNames: ComponentClassNamesType;
 export declare const ComponentText: {
+    Alert: {
+        dismissButtonLabel: string;
+    };
     Collection: {
         searchButtonLabel: string;
     };
@@ -554,17 +28,13 @@ export declare const ComponentText: {
         searchButtonLabel: string;
     };
     PasswordField: {
-        showPasswordButtonLabel: string;
-        hidePasswordButtonLabel: string;
+        passwordIsHidden: string;
+        passwordIsShown: string;
+        showPassword: string;
     };
     StepperField: {
         increaseButtonLabel: string;
         decreaseButtonLabel: string;
     };
 };
-declare type ComponentNames = keyof typeof ComponentClassObject;
-export declare type ComponentClasses = typeof ComponentClassObject[ComponentNames]['className'];
-declare let ComponentClassNames: {
-    [Name in ComponentNames]?: ComponentClasses;
-};
-export { ComponentClassNames };
+export declare const stylePropsToThemeKeys: Record<ThemeStylePropKey, ThemeTokenKey>;

package/dist/types/primitives/shared/responsive/utils.d.ts

@@ -1,2 +1,8 @@
 import { Breakpoint, Breakpoints } from '../../types/responsive';
-export declare const getValueAtCurrentBreakpoint: <Value>(values: Value | Record<string, Value> | Value[], breakpoint: Breakpoint, breakpoints: Breakpoints, propKey?: string) => string | Value;
+import { ThemeStylePropKey } from '../../types/theme';
+export declare const getValueAtCurrentBreakpoint: <Value>({ breakpoint, breakpoints, propKey, values, }: {
+    values: Value | Record<string, Value> | Value[];
+    breakpoint: Breakpoint;
+    breakpoints: Breakpoints;
+    propKey?: ThemeStylePropKey;
+}) => string | Value;

package/dist/types/primitives/shared/styleUtils.d.ts

@@ -2,6 +2,9 @@ import * as React from 'react';
 import { BaseStyleProps, GridItemStyleProps, GridSpanType, ViewProps } from '../types';
 import { Breakpoint, Breakpoints } from '../types/responsive';
 import { FlexContainerStyleProps } from '../types/flex';
+export declare const isSpanPrimitiveValue: (spanValue: GridItemStyleProps['rowSpan'] | GridItemStyleProps['columnSpan']) => spanValue is GridSpanType;
+export declare const getGridSpan: (spanValue: GridSpanType) => string;
+export declare const convertGridSpan: (spanValue: GridItemStyleProps['rowSpan'] | GridItemStyleProps['columnSpan']) => GridItemStyleProps['row'] | GridItemStyleProps['column'];
 /**
  * Transforms style props to another target prop
  * where the original is a simpler API than the target.
@@ -10,18 +13,17 @@ import { FlexContainerStyleProps } from '../types/flex';
  * E.g. rowSpan => row, columnSpan => column
  */
 export declare const useTransformStyleProps: (props: ViewProps) => ViewProps;
-export declare const useStyles: (props: ViewProps, style: React.CSSProperties) => any;
-export declare const isSpanPrimitiveValue: (spanValue: GridItemStyleProps['rowSpan'] | GridItemStyleProps['columnSpan']) => spanValue is GridSpanType;
-export declare const convertGridSpan: (spanValue: GridItemStyleProps['rowSpan'] | GridItemStyleProps['columnSpan']) => GridItemStyleProps['row'] | GridItemStyleProps['column'];
-export declare const getGridSpan: (spanValue: GridSpanType) => string;
-interface convertStylePropsToStyleObjParams {
+interface ConvertStylePropsToStyleObjParams {
     props: ViewProps;
     style?: React.CSSProperties;
     breakpoint: Breakpoint;
     breakpoints: Breakpoints;
 }
 export interface ConvertStylePropsToStyleObj {
-    (params: convertStylePropsToStyleObjParams): any;
+    (params: ConvertStylePropsToStyleObjParams): {
+        propStyles: React.CSSProperties;
+        nonStyleProps: Partial<ViewProps>;
+    };
 }
 /**
  * Convert style props to CSS variables for React style prop
@@ -29,6 +31,10 @@ export interface ConvertStylePropsToStyleObj {
  * @returns CSSProperties styles
  */
 export declare const convertStylePropsToStyleObj: ConvertStylePropsToStyleObj;
+export declare const useStyles: (props: ViewProps, style: React.CSSProperties) => {
+    propStyles: React.CSSProperties;
+    nonStyleProps: Partial<ViewProps>;
+};
 interface SplitProps<PrimitiveProps> {
     flexContainerStyleProps: FlexContainerStyleProps;
     baseStyleProps: BaseStyleProps;