@true-engineering/true-react-common-ui-kit 2.6.0 → 3.0.0-alpha.0

package/dist/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.styles.d.ts

@@ -1,83 +1,7 @@
-import { ComponentStyles } from '../../../../types';
-export declare const styles: {
-    root: {
-        borderRadius: 6;
-        backgroundColor: "#ffffff";
-        border: (string | number)[];
-        boxShadow: string;
-        overflow: string;
-    };
-    searchContainer: {
-        width: string;
-        height: 48;
-        display: string;
-        alignItems: string;
-        boxSizing: string;
-        padding: number[];
-        borderBottom: (string | number)[];
-    };
-    icon: {
-        width: number;
-        height: number;
-    };
-    searchIcon: {
-        extend: string;
-        color: "#7a869a";
-        flexShrink: number;
-    };
-    flagList: {
-        maxHeight: number;
-        padding: number[];
-    } | {
-        maxHeight: number;
-        padding: number[];
-    };
-    listItem: {
-        height: number;
-        padding: number[];
-        display: string;
-        alignItems: string;
-        cursor: string;
-        fontSize: number;
-        lineHeight: string;
-        letterSpacing: number;
-        whiteSpace: string;
-        boxSizing: string;
-    };
-    selectedCountry: {
-        backgroundColor: "#f6f8fc";
-    };
-    activeCountry: {
-        backgroundColor: "#eceff5";
-    };
-    flag: {
-        width: number;
-        height: number;
-        flexShrink: number;
-    };
-    countryName: {
-        color: "#222a37";
-        overflowX: string;
-        textOverflow: string;
-        margin: number[];
-    };
-    dialCode: {
-        color: "#95a0b3";
-    };
-    emptyResult: {
-        color: "#7a869a";
-        padding: number[];
-    };
-    tweakInput: {
-        inputWrapper: {
-            border: string;
-            height: string;
-        };
-        input: {
-            fontSize: number;
-            lineHeight: string;
-            letterSpacing: number;
-        };
-    };
-};
-export declare type PhoneInputCountryListStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../../../theme';
+import { IInputStyles } from '../../../Input';
+export declare const useStyles: import("../../../../theme").IUseStyles<"dialCode" | "root" | "icon" | "flag" | "searchContainer" | "searchIcon" | "flagList" | "listItem" | "selectedCountry" | "activeCountry" | "countryName" | "emptyResult", unknown>;
+export declare const inputStyles: IInputStyles;
+export declare type IPhoneInputCountryListStyles = ITweakStyles<typeof useStyles, {
+    tweakInput: IInputStyles;
+}>;

package/dist/components/PhoneInput/components/PhoneInputCountryList/index.d.ts

@@ -1,2 +1,2 @@
 export * from './PhoneInputCountryList';
-export type { PhoneInputCountryListStyles } from './PhoneInputCountryList.styles';
+export type { IPhoneInputCountryListStyles } from './PhoneInputCountryList.styles';

package/dist/components/PhoneInput/index.d.ts

@@ -1,5 +1,5 @@
 export * from './PhoneInput';
 export { phoneInfo } from './phone-info';
 export * from './types';
-export type { PhoneInputStyles } from './PhoneInput.styles';
-export type { PhoneInputCountryListStyles } from './components';
+export type { IPhoneInputStyles } from './PhoneInput.styles';
+export type { IPhoneInputCountryListStyles } from './components';

package/dist/components/RadioButton/RadioButton.d.ts

@@ -1,8 +1,7 @@
 import { ReactNode } from 'react';
 import { ICommonProps } from '../../types';
-import { RadioButtonStyles } from './RadioButton.styles';
-export interface IRadioButtonProps<Value extends string> extends ICommonProps {
-    tweakStyles?: RadioButtonStyles;
+import { IRadioButtonStyles } from './RadioButton.styles';
+export interface IRadioButtonProps<Value extends string> extends ICommonProps<IRadioButtonStyles> {
     children?: ReactNode;
     value: Value;
     groupName: string;
@@ -11,4 +10,4 @@ export interface IRadioButtonProps<Value extends string> extends ICommonProps {
     isInvalid?: boolean;
     onChange(value: Value): void | Promise<void>;
 }
-export declare function RadioButton<Value extends string>({ children, value, groupName, isChecked, isDisabled, isInvalid, data, tweakStyles, onChange, }: IRadioButtonProps<Value>): JSX.Element;
+export declare function RadioButton<Value extends string>({ children, value, groupName, isChecked, isDisabled, isInvalid, data, testId, tweakStyles, onChange, }: IRadioButtonProps<Value>): JSX.Element;

package/dist/components/RadioButton/RadioButton.styles.d.ts

@@ -1,30 +1,3 @@
-import { ComponentStyles } from '../../types';
-export declare const styles: {
-    input: {
-        appearance: string;
-        cursor: string;
-        borderRadius: string;
-        width: number;
-        height: number;
-        outline: string;
-        transition: string;
-        margin: number;
-        border: (string | number)[];
-        '&:checked': {
-            border: (string | number)[];
-        };
-    };
-    label: {
-        display: string;
-        alignItems: string;
-        cursor: string;
-    };
-    content: {
-        marginLeft: number;
-    };
-    isDisabled: {
-        cursor: string;
-    };
-    isInvalid: {};
-};
-export declare type RadioButtonStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../theme';
+export declare const useStyles: import("../../theme").IUseStyles<"content" | "input" | "label" | "isDisabled" | "isInvalid", unknown>;
+export declare type IRadioButtonStyles = ITweakStyles<typeof useStyles>;

package/dist/components/RadioButton/index.d.ts

@@ -1,2 +1,2 @@
 export * from './RadioButton';
-export type { RadioButtonStyles } from './RadioButton.styles';
+export type { IRadioButtonStyles } from './RadioButton.styles';

package/dist/components/ScrollIntoViewIfNeeded/ScrollIntoViewIfNeeded.d.ts

@@ -160,11 +160,11 @@ export declare class ScrollIntoViewIfNeeded extends PureComponent<IScrollIntoVie
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        inputMode?: "search" | "none" | "email" | "text" | "tel" | "url" | "numeric" | "decimal" | undefined;
+        inputMode?: "none" | "email" | "search" | "text" | "tel" | "url" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: (boolean | "false" | "true") | undefined;
-        'aria-autocomplete'?: "none" | "list" | "both" | "inline" | undefined;
+        'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
         'aria-busy'?: (boolean | "false" | "true") | undefined;
         'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
         'aria-colcount'?: number | undefined;
@@ -175,12 +175,12 @@ export declare class ScrollIntoViewIfNeeded extends PureComponent<IScrollIntoVie
         'aria-describedby'?: string | undefined;
         'aria-details'?: string | undefined;
         'aria-disabled'?: (boolean | "false" | "true") | undefined;
-        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+        'aria-dropeffect'?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
         'aria-errormessage'?: string | undefined;
         'aria-expanded'?: (boolean | "false" | "true") | undefined;
         'aria-flowto'?: string | undefined;
         'aria-grabbed'?: (boolean | "false" | "true") | undefined;
-        'aria-haspopup'?: boolean | "grid" | "menu" | "dialog" | "listbox" | "false" | "true" | "tree" | undefined;
+        'aria-haspopup'?: boolean | "menu" | "grid" | "listbox" | "false" | "true" | "dialog" | "tree" | undefined;
         'aria-hidden'?: (boolean | "false" | "true") | undefined;
         'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
         'aria-keyshortcuts'?: string | undefined;

package/dist/components/SearchInput/SearchInput.d.ts

@@ -1,7 +1,6 @@
 import { FC } from 'react';
+import { ICommonProps } from '../../types';
 import { IInputProps } from '../Input';
-import { SearchInputStyles } from './SearchInput.styles';
-export declare type ISearchInputProps = Omit<IInputProps, 'type' | 'isInvalid' | 'errorMessage' | 'label' | 'isActive' | 'errorPosition' | 'hasFloatingLabel' | 'border' | 'tweakStyles'> & {
-    tweakStyles?: SearchInputStyles;
-};
+import { ISearchInputStyles } from './SearchInput.styles';
+export declare type ISearchInputProps = Omit<IInputProps, 'type' | 'isInvalid' | 'errorMessage' | 'label' | 'isActive' | 'errorPosition' | 'hasFloatingLabel' | 'border' | 'tweakStyles'> & ICommonProps<ISearchInputStyles>;
 export declare const SearchInput: FC<ISearchInputProps>;

package/dist/components/SearchInput/SearchInput.styles.d.ts

@@ -1,39 +1,7 @@
-import { ComponentStyles } from '../../types';
-export declare const styles: {
-    root: {
-        position: string;
-    };
-    icon: {
-        display: string;
-        alignItems: string;
-        position: string;
-        left: number;
-        height: string;
-        width: number;
-        zIndex: number;
-        color: "#95a0b3";
-    };
-    tweakInput: {
-        inputWrapper: {
-            height: number;
-            borderColor: string;
-            backgroundColor: string;
-            borderRadius: number;
-            paddingLeft: number;
-            transitionProperty: string;
-        };
-        focused: {
-            backgroundColor: "#ffffff";
-            borderColor: "#d0d6e1";
-        };
-        input: {
-            fontSize: number;
-            paddingLeft: number;
-        };
-        label: {
-            left: number;
-            fontSize: number;
-        };
-    };
-};
-export declare type SearchInputStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../theme';
+import { IInputStyles } from '../Input';
+export declare const useStyles: import("../../theme").IUseStyles<"root" | "icon", unknown>;
+export declare const inputStyles: IInputStyles;
+export declare type ISearchInputStyles = ITweakStyles<typeof useStyles, {
+    tweakInput: IInputStyles;
+}>;

package/dist/components/SearchInput/index.d.ts

@@ -1,2 +1,2 @@
 export * from './SearchInput';
-export type { SearchInputStyles } from './SearchInput.styles';
+export type { ISearchInputStyles } from './SearchInput.styles';

package/dist/components/Select/Select.d.ts

@@ -1,11 +1,10 @@
 import { ReactNode, SyntheticEvent } from 'react';
-import { IDropdownWithPopperOptions, IIcon } from '../../types';
+import { ICommonProps, IDropdownWithPopperOptions, IIcon } from '../../types';
 import { IInputProps } from '../Input';
 import { ISearchInputProps } from '../SearchInput';
 import { IMultipleSelectValue } from './types';
-import { SelectStyles } from './Select.styles';
-export interface ISelectProps<Value> extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type'> {
-    tweakStyles?: SelectStyles;
+import { ISelectStyles } from './Select.styles';
+export interface ISelectProps<Value> extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type' | 'tweakStyles'>, ICommonProps<ISelectStyles> {
     defaultOptionLabel?: string;
     allOptionsLabel?: string;
     noMatchesLabel?: string;

package/dist/components/Select/Select.styles.d.ts

@@ -1,80 +1,33 @@
-import { ComponentStyles } from '../../types';
-export declare const styles: {
-    root: {
-        width: string;
-        position: string;
-        boxSizing: string;
-    };
-    inputWrapper: {
-        width: string;
-        cursor: string;
-        position: string;
-    };
-    listWrapper: {
-        left: number;
-        zIndex: number;
-        width: string;
-        minWidth: string;
-    };
-    withoutPopper: {
-        position: string;
-        top: string;
-    };
-    listWrapperInBody: {
-        minWidth: string;
-        width: string;
-        maxWidth: string;
-    };
-    arrow: {
-        position: string;
-        right: number;
-        top: number;
-        width: number;
-        height: number;
-        cursor: string;
-        zIndex: number;
-        transition: string;
-    };
-    activeArrow: {
-        transform: string;
-    };
-    disabled: {
-        '& $arrow': {
-            cursor: string;
-        };
-    };
-    counter: {
-        '&:not(:last-child)': {
-            paddingRight: number;
-        };
-    };
-    icon: {
-        width: number;
-        height: number;
-    };
-    tweakInput: {
-        input: {
-            paddingRight: number;
-        };
-        disabled: {
-            '& $input': {
-                cursor: string;
-            };
-        };
-        controls: {
-            paddingRight: number;
-        };
-    };
-    tweakSelectList: {};
-    tweakSearchInput: {
-        tweakInput: {
-            inputWrapper: {
-                height: number;
-                borderRadius: number;
-                border: string;
-                backgroundColor: string;
-            };
-        };
-    };
-};
-export declare type SelectStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../theme';
+import { IInputStyles } from '../Input';
+import { ISearchInputStyles } from '../SearchInput';
+import { ISelectListStyles } from './components';
+export declare const useStyles: import("../../theme").IUseStyles<"arrow" | "root" | "icon" | "disabled" | "inputWrapper" | "listWrapper" | "withoutPopper" | "listWrapperInBody" | "activeArrow" | "counter", unknown>;
+export declare const readonlyInputStyles: Partial<import("jss").Styles<"top" | "bottom" | "right" | "left" | "root" | "middle" | "icon" | "disabled" | "input" | "label" | "error" | "invalid" | "loading" | "inputWrapper" | "autosize" | "focused" | "inputContent" | "unitsWrapper" | "fakeValue" | "units" | "withFloatingLabel" | "floatingLabelWithoutPadding" | "floating" | "activeLabel" | "required" | "floatingWithoutPadding" | "requiredLabel" | "activeIcon" | "border-top" | "border-bottom" | "border-left" | "border-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "controls" | "clearIcon" | "inputIcon" | "withIcons" | "withControls" | "invalidLabel" | "info" | "error-top" | "error-bottom" | "withUnits", unknown, undefined>> & Partial<{
+    tweakPreloader: Partial<import("jss").Styles<"currentColor" | "root" | "default" | "dots" | "logo", unknown, undefined>> & Partial<{
+        tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
+        tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
+    }>;
+}>;
+export declare const multiSelectInputStyles: Partial<import("jss").Styles<"top" | "bottom" | "right" | "left" | "root" | "middle" | "icon" | "disabled" | "input" | "label" | "error" | "invalid" | "loading" | "inputWrapper" | "autosize" | "focused" | "inputContent" | "unitsWrapper" | "fakeValue" | "units" | "withFloatingLabel" | "floatingLabelWithoutPadding" | "floating" | "activeLabel" | "required" | "floatingWithoutPadding" | "requiredLabel" | "activeIcon" | "border-top" | "border-bottom" | "border-left" | "border-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "controls" | "clearIcon" | "inputIcon" | "withIcons" | "withControls" | "invalidLabel" | "info" | "error-top" | "error-bottom" | "withUnits", unknown, undefined>> & Partial<{
+    tweakPreloader: Partial<import("jss").Styles<"currentColor" | "root" | "default" | "dots" | "logo", unknown, undefined>> & Partial<{
+        tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
+        tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
+    }>;
+}>;
+export declare const readonlyMultiSelectStyles: Partial<import("jss").Styles<"top" | "bottom" | "right" | "left" | "root" | "middle" | "icon" | "disabled" | "input" | "label" | "error" | "invalid" | "loading" | "inputWrapper" | "autosize" | "focused" | "inputContent" | "unitsWrapper" | "fakeValue" | "units" | "withFloatingLabel" | "floatingLabelWithoutPadding" | "floating" | "activeLabel" | "required" | "floatingWithoutPadding" | "requiredLabel" | "activeIcon" | "border-top" | "border-bottom" | "border-left" | "border-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "controls" | "clearIcon" | "inputIcon" | "withIcons" | "withControls" | "invalidLabel" | "info" | "error-top" | "error-bottom" | "withUnits", unknown, undefined>> & Partial<{
+    tweakPreloader: Partial<import("jss").Styles<"currentColor" | "root" | "default" | "dots" | "logo", unknown, undefined>> & Partial<{
+        tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
+        tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
+    }>;
+}>;
+export declare const getInputStyles: ({ hasReadonlyInput, isMultiSelect, }: {
+    hasReadonlyInput: boolean;
+    isMultiSelect: boolean;
+}) => IInputStyles;
+export declare const searchInputStyles: ISearchInputStyles;
+export declare type ISelectStyles = ITweakStyles<typeof useStyles, {
+    tweakInput: IInputStyles;
+    tweakSelectList: ISelectListStyles;
+    tweakSearchInput: ISearchInputStyles;
+}>;

package/dist/components/Select/components/SelectList/SelectList.d.ts

@@ -1,8 +1,7 @@
 import { ReactNode, MouseEvent } from 'react';
 import { ICommonProps } from '../../../../types';
-import { SelectListStyles } from './SelectList.styles';
-export interface ISelectListProps<Value> extends ICommonProps {
-    tweakStyles?: SelectListStyles;
+import { ISelectListStyles } from './SelectList.styles';
+export interface ISelectListProps<Value> extends ICommonProps<ISelectListStyles> {
     options: Value[];
     focusedIndex?: number;
     activeValue?: Value | Value[];
@@ -10,7 +9,6 @@ export interface ISelectListProps<Value> extends ICommonProps {
     isLoading?: boolean;
     loadingLabel?: ReactNode;
     defaultOptionLabel?: string;
-    testId?: string;
     allOptionsLabel?: string;
     areAllOptionsSelected?: boolean;
     shouldScrollToList?: boolean;

package/dist/components/Select/components/SelectList/SelectList.styles.d.ts

@@ -1,60 +1,6 @@
-import { ComponentStyles } from '../../../../types';
+import { ITweakStyles } from '../../../../theme';
 export declare const ROW_HEIGHT = 40;
 export declare const CONTAINER_PADDING = 10;
 export declare const CELL_PADDING: number[];
-export declare const styles: {
-    root: {
-        borderRadius: 6;
-        boxShadow: string;
-        boxSizing: string;
-        padding: number[];
-        fontSize: number;
-        overflow: string;
-    };
-    withListHeader: {
-        paddingTop: number;
-    };
-    listHeader: {
-        '& + $list': {
-            borderTop: (string | number)[];
-        };
-    };
-    list: {
-        height: string;
-        maxHeight: number;
-        cursor: string;
-        backgroundColor: "#ffffff";
-    } | {
-        height: string;
-        maxHeight: number;
-        cursor: string;
-        backgroundColor: "#ffffff";
-    };
-    cell: {
-        display: string;
-        cursor: string;
-        minHeight: number;
-        width: string;
-        padding: number[];
-        alignItems: string;
-        boxSizing: string;
-        fontSize: number;
-    };
-    cellWithCheckbox: {
-        padding: number;
-    };
-    noMatchesLabel: {
-        pointerEvents: string;
-    };
-    focused: {};
-    active: {};
-    disabled: {
-        cursor: string;
-    };
-    loading: {
-        cursor: string;
-        pointerEvents: string;
-    };
-    defaultCell: {};
-};
-export declare type SelectListStyles = ComponentStyles<typeof styles>;
+export declare const useStyles: import("../../../../theme").IUseStyles<"list" | "root" | "cell" | "active" | "disabled" | "loading" | "focused" | "withListHeader" | "listHeader" | "cellWithCheckbox" | "noMatchesLabel" | "defaultCell", unknown>;
+export declare type ISelectListStyles = ITweakStyles<typeof useStyles>;

package/dist/components/Select/components/SelectList/index.d.ts

@@ -1,2 +1,2 @@
 export * from './SelectList';
-export type { SelectListStyles } from './SelectList.styles';
+export type { ISelectListStyles } from './SelectList.styles';

package/dist/components/Select/components/SelectListItem/SelectListItem.styles.d.ts

@@ -1,2 +1,2 @@
-import { CheckboxStyles } from '../../../Checkbox';
-export declare const checkboxStyles: CheckboxStyles;
+import { ICheckboxStyles } from '../../../Checkbox';
+export declare const checkboxStyles: ICheckboxStyles;

package/dist/components/Select/index.d.ts

@@ -1,4 +1,4 @@
 export * from './Select';
 export * from './types';
-export type { SelectStyles } from './Select.styles';
-export type { SelectListStyles } from './components';
+export type { ISelectStyles } from './Select.styles';
+export type { ISelectListStyles } from './components';

package/dist/components/SmartInput/SmartInput.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { IInputProps } from '../Input';
-import { TSmartType } from './types';
+import { ISmartType } from './types';
 export interface ISmartInputProps extends IInputProps {
     isUpperCase?: boolean;
-    smartType?: TSmartType;
+    smartType?: ISmartType;
     regExp?: RegExp;
     onChange: (value: string) => void;
 }

package/dist/components/SmartInput/helpers.d.ts

@@ -1,4 +1,4 @@
-import { TSmartType } from './types';
-export declare const transformCaseSensitive: (smartType: TSmartType, map: {
+import { ISmartType } from './types';
+export declare const transformCaseSensitive: (smartType: ISmartType, map: {
     [key: string]: string;
 }, symbol: string) => string;

package/dist/components/SmartInput/types.d.ts

@@ -1 +1 @@
-export declare type TSmartType = 'name' | 'nameRuEn' | 'surname' | 'surnameRuEn' | 'email' | 'agencyName' | 'default' | 'digits' | 'docNumber' | 'benefitCert';
+export declare type ISmartType = 'name' | 'nameRuEn' | 'surname' | 'surnameRuEn' | 'email' | 'agencyName' | 'default' | 'digits' | 'docNumber' | 'benefitCert';

package/dist/components/Switch/Switch.d.ts

@@ -1,9 +1,8 @@
 import { ReactNode } from 'react';
 import { ICommonProps } from '../../types';
 import { ISwitchState } from './types';
-import { SwitchStyles } from './Switch.styles';
-export interface ISwitchProps<V extends string> extends ICommonProps {
-    tweakStyles?: SwitchStyles;
+import { ISwitchStyles } from './Switch.styles';
+export interface ISwitchProps<V extends string> extends ICommonProps<ISwitchStyles> {
     children?: ReactNode;
     value: V;
     isChecked: boolean;
@@ -17,7 +16,6 @@ export interface ISwitchProps<V extends string> extends ICommonProps {
      * @default `primary`
      */
     color?: 'primary' | 'secondary';
-    testId?: string;
     onChange(state: ISwitchState<V>): void;
 }
 export declare const Switch: <V extends string>({ isDisabled, isChecked, isInvalid, value, children, labelPosition, color, data, tweakStyles, testId, onChange, }: ISwitchProps<V>) => JSX.Element;

package/dist/components/Switch/Switch.styles.d.ts

@@ -1,62 +1,3 @@
-import { ComponentStyles } from '../../types';
-export declare const styles: {
-    root: {
-        display: string;
-        alignItems: string;
-        cursor: string;
-    };
-    primary: {};
-    secondary: {};
-    invalid: {};
-    disabled: {
-        pointerEvents: string;
-        cursor: string;
-    };
-    checked: {
-        '& $switch::before': {
-            left: number;
-        };
-    };
-    switch: {
-        position: string;
-        flexShrink: number;
-        display: string;
-        width: number;
-        height: number;
-        backgroundColor: string;
-        borderRadius: number;
-        boxSizing: string;
-        transitionProperty: string;
-        transition: string;
-        '&::before': {
-            content: string;
-            position: string;
-            top: number;
-            left: number;
-            right: string;
-            display: string;
-            width: number;
-            height: number;
-            backgroundColor: string;
-            borderRadius: string;
-            zIndex: number;
-            transitionProperty: string;
-            transition: string;
-        };
-    };
-    input: {
-        display: string;
-    };
-    label: {
-        transitionProperty: string;
-        transition: string;
-    };
-    labelLeft: {
-        order: number;
-        marginRight: number;
-    };
-    labelRight: {
-        marginLeft: number;
-    };
-};
-export declare type SwitchStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../theme';
+export declare const useStyles: import("../../theme").IUseStyles<"root" | "disabled" | "input" | "label" | "switch" | "invalid" | "primary" | "secondary" | "checked" | "labelLeft" | "labelRight", unknown>;
+export declare type ISwitchStyles = ITweakStyles<typeof useStyles>;

package/dist/components/Switch/index.d.ts

@@ -1,3 +1,3 @@
 export * from './Switch';
 export * from './types';
-export type { SwitchStyles } from './Switch.styles';
+export type { ISwitchStyles } from './Switch.styles';

package/dist/components/TextArea/TextArea.d.ts

@@ -1,8 +1,7 @@
 import { FC, FormEvent, FocusEvent, ClipboardEvent } from 'react';
 import { ICommonProps } from '../../types';
-import { TextAreaStyles } from './TextArea.styles';
-export interface ITextAreaProps extends ICommonProps {
-    tweakStyles?: TextAreaStyles;
+import { ITextAreaStyles } from './TextArea.styles';
+export interface ITextAreaProps extends ICommonProps<ITextAreaStyles> {
     value?: string;
     label?: string;
     placeholder?: string;
@@ -20,7 +19,6 @@ export interface ITextAreaProps extends ICommonProps {
     shouldTrimAfterMaxLength?: boolean;
     maxLength?: number;
     rows?: number;
-    testId?: string;
     onChange(value: string, event?: FormEvent<HTMLTextAreaElement>): void;
     onFocus?(event: FocusEvent<HTMLTextAreaElement>): void;
     onBlur?(event: FocusEvent<HTMLTextAreaElement>): void;