@trafilea/afrodita-components 4.0.1-beta.1 → 4.0.2-beta.10

package/build/index.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+import { IconWrapperProps } from 'src/components/Icon-wrapper/IconWrapper';
 import React, { ReactNode, FC, AriaAttributes, CSSProperties, AnchorHTMLAttributes, LabelHTMLAttributes, ElementType, RefObject } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+import { ButtonProps } from 'src/components/shared/button/Button';
 import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
 import { SearchBarOptionItem as SearchBarOptionItem$1 } from 'src/types/types';
 import { ThemeBreakpoints as ThemeBreakpoints$1 } from 'src/core/theme/Theme';
@@ -27,7 +29,7 @@ declare enum InputValidationType {
     Empty = 2
 }
 
-interface IconProps {
+interface IconProps$1 {
     width?: number;
     height?: number;
     fill?: string;
@@ -76,7 +78,7 @@ declare type ImageType = {
     imageUrl: string;
     alt: string;
 };
-interface IconWithOpacityProps extends IconProps {
+interface IconWithOpacityProps extends IconProps$1 {
     opacity?: number;
 }
 interface WithTestId {
@@ -107,7 +109,7 @@ interface SearchBarOptionItem {
     title: string;
 }
 
-declare const SixtyDaysGuarantee: ({ height, width, fill, title }: IconProps) => JSX.Element;
+declare const SixtyDaysGuarantee: ({ height, width, fill, title }: IconProps$1) => JSX.Element;
 
 declare const Custom_SixtyDaysGuarantee: typeof SixtyDaysGuarantee;
 declare namespace Custom {
@@ -116,22 +118,22 @@ declare namespace Custom {
   };
 }
 
-declare const Check: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Check: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const ClearLight: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const ClearLight: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const LightExclamation: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const LightExclamation: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-interface LightCheckProps extends IconProps {
+interface LightCheckProps extends IconProps$1 {
     strokeWidth?: number;
 }
 declare const LightCheck: ({ height, width, fill, strokeWidth }: LightCheckProps) => JSX.Element;
 
-declare const Question: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Question: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const Close: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Close: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const Trash: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Trash: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
 declare const Actions_Check: typeof Check;
 declare const Actions_ClearLight: typeof ClearLight;
@@ -154,16 +156,16 @@ declare namespace Actions {
   };
 }
 
-declare const FitPredictor$1: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const FitPredictor$1: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-interface LoadingProps extends IconProps {
+interface LoadingProps extends IconProps$1 {
     backgroundColor: string;
 }
 declare const Loading: ({ height, width, fill, backgroundColor }: LoadingProps) => JSX.Element;
 
-declare const Shapermint: ({ height, width }: IconProps) => JSX.Element;
+declare const Shapermint: ({ height, width }: IconProps$1) => JSX.Element;
 
-declare const McAfee: ({ height, width }: IconProps) => JSX.Element;
+declare const McAfee: ({ height, width }: IconProps$1) => JSX.Element;
 
 type Other_LoadingProps = LoadingProps;
 declare const Other_Loading: typeof Loading;
@@ -179,19 +181,19 @@ declare namespace Other {
   };
 }
 
-declare const ChevronDown: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const ChevronDown: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
 declare const ChevronLeft: ({ height, width, fill, opacity }: IconWithOpacityProps) => JSX.Element;
 
 declare const ChevronRight: ({ height, width, fill, opacity }: IconWithOpacityProps) => JSX.Element;
 
-declare const ChevronRightVariant: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const ChevronRightVariant: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const ChevronUp: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const ChevronUp: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const ChevronUpSolid: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const ChevronUpSolid: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const CircleUp: ({ width, height, fill }: IconProps) => JSX.Element;
+declare const CircleUp: ({ width, height, fill }: IconProps$1) => JSX.Element;
 
 declare const Arrows_ChevronDown: typeof ChevronDown;
 declare const Arrows_ChevronLeft: typeof ChevronLeft;
@@ -212,25 +214,25 @@ declare namespace Arrows {
   };
 }
 
-declare const Clock: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Clock: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const FlagUSA: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const FlagUSA: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const Minus: ({ height, width, fill, title }: IconProps) => JSX.Element;
+declare const Minus: ({ height, width, fill, title }: IconProps$1) => JSX.Element;
 
-declare const Plus: ({ height, width, fill, title }: IconProps) => JSX.Element;
+declare const Plus: ({ height, width, fill, title }: IconProps$1) => JSX.Element;
 
-declare const Rule: ({ width, height, fill }: IconProps) => JSX.Element;
+declare const Rule: ({ width, height, fill }: IconProps$1) => JSX.Element;
 
-declare const Star: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Star: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const StarEmpty: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const StarEmpty: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const StarHalf: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const StarHalf: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const Stopwatch: ({ height, width, fill, title }: IconProps) => JSX.Element;
+declare const Stopwatch: ({ height, width, fill, title }: IconProps$1) => JSX.Element;
 
-declare const Shipping: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Shipping: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
 declare const PDP_Clock: typeof Clock;
 declare const PDP_FlagUSA: typeof FlagUSA;
@@ -257,19 +259,19 @@ declare namespace PDP {
   };
 }
 
-declare const Facebook: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Facebook: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const FacebookSolid: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const FacebookSolid: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const Instagram: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Instagram: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const InstagramSolid: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const InstagramSolid: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const Pinterest: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Pinterest: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const Twitter: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Twitter: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const Youtube: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Youtube: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
 declare const SocialMedia_Facebook: typeof Facebook;
 declare const SocialMedia_FacebookSolid: typeof FacebookSolid;
@@ -290,13 +292,13 @@ declare namespace SocialMedia {
   };
 }
 
-declare const Search: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Search: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const User: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const User: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const ShoppingBag: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const ShoppingBag: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const MapMarker: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const MapMarker: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
 declare const Navigation_Search: typeof Search;
 declare const Navigation_User: typeof User;
@@ -311,26 +313,40 @@ declare namespace Navigation {
   };
 }
 
-declare const QuestionCircle: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const QuestionCircle: ({ height, width, fill }: IconProps$1) => JSX.Element;
+
+declare const Messenger: ({ height, width, fill }: IconProps$1) => JSX.Element;
+
+declare const Comment: ({ height, width, fill }: IconProps$1) => JSX.Element;
 
-declare const Messenger: ({ height, width, fill }: IconProps) => JSX.Element;
+interface IconProps {
+    width?: number;
+    height?: number;
+    fill?: string;
+    title?: string;
+}
+declare const Message: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const Comment: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Mail: ({ height, width }: IconWrapperProps) => JSX.Element;
 
 declare const Messaging_QuestionCircle: typeof QuestionCircle;
 declare const Messaging_Messenger: typeof Messenger;
 declare const Messaging_Comment: typeof Comment;
+declare const Messaging_Message: typeof Message;
+declare const Messaging_Mail: typeof Mail;
 declare namespace Messaging {
   export {
     Messaging_QuestionCircle as QuestionCircle,
     Messaging_Messenger as Messenger,
     Messaging_Comment as Comment,
+    Messaging_Message as Message,
+    Messaging_Mail as Mail,
   };
 }
 
-declare const AppleStore: ({ height, width }: IconProps) => JSX.Element;
+declare const AppleStore: ({ height, width }: IconProps$1) => JSX.Element;
 
-declare const GooglePlay: ({ height, width }: IconProps) => JSX.Element;
+declare const GooglePlay: ({ height, width }: IconProps$1) => JSX.Element;
 
 declare const Download_AppleStore: typeof AppleStore;
 declare const Download_GooglePlay: typeof GooglePlay;
@@ -341,19 +357,19 @@ declare namespace Download {
   };
 }
 
-declare const Visa: ({ height, width }: IconProps) => JSX.Element;
+declare const Visa: ({ height, width }: IconProps$1) => JSX.Element;
 
-declare const MasterCard: ({ height, width }: IconProps) => JSX.Element;
+declare const MasterCard: ({ height, width }: IconProps$1) => JSX.Element;
 
-declare const AMEX: ({ height, width }: IconProps) => JSX.Element;
+declare const AMEX: ({ height, width }: IconProps$1) => JSX.Element;
 
-declare const JCB: ({ height, width }: IconProps) => JSX.Element;
+declare const JCB: ({ height, width }: IconProps$1) => JSX.Element;
 
-declare const Paypal: ({ height, width }: IconProps) => JSX.Element;
+declare const Paypal: ({ height, width }: IconProps$1) => JSX.Element;
 
-declare const Klarna: ({ height, width }: IconProps) => JSX.Element;
+declare const Klarna: ({ height, width }: IconProps$1) => JSX.Element;
 
-declare const Amazon: ({ height, width }: IconProps) => JSX.Element;
+declare const Amazon: ({ height, width }: IconProps$1) => JSX.Element;
 
 declare const Payment_Visa: typeof Visa;
 declare const Payment_MasterCard: typeof MasterCard;
@@ -383,7 +399,7 @@ declare namespace SlideDots {
   };
 }
 
-declare type IconType = ({ height, width, fill }: IconProps) => JSX.Element;
+declare type IconType = ({ height, width, fill }: IconProps$1) => JSX.Element;
 declare const Icon: {
     Custom: typeof Custom;
     Arrows: typeof Arrows;
@@ -448,11 +464,13 @@ declare type SimpleDropdownProps<T> = CommonProps<T> & ConditionalProps<T>;
 declare function SimpleDropdown<T>({ options, disabled, initialValue, placeHolder, label, wide, sort, onChange, }: SimpleDropdownProps<T>): JSX.Element;
 
 interface SizeSelectorProps {
+    label: string;
     sizes: SizeOption[];
     selectedValue: SizeOption;
     onChange: (size: SizeOption) => void;
+    inline?: boolean;
 }
-declare const SizeSelector: ({ sizes, selectedValue, onChange }: SizeSelectorProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const SizeSelector: ({ label, sizes, selectedValue, onChange, inline, }: SizeSelectorProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface SizeFitGuideProps {
     title: string;
@@ -470,6 +488,7 @@ interface BaseButtonProps {
     type?: ButtonType;
     onClick: () => void;
     className?: string;
+    inline?: boolean;
 }
 
 declare type BaseProps = Pick<BaseButtonProps, 'disabled' | 'type' | 'onClick'>;
@@ -507,8 +526,9 @@ interface ColorPickerProps {
     selectedValue?: ColorPickerOption;
     label: string;
     onChange: (color: ColorPickerOption) => void;
+    inline?: boolean;
 }
-declare const SingleColorPicker: ({ options, selectedValue, label, onChange }: ColorPickerProps) => JSX.Element;
+declare const SingleColorPicker: ({ options, selectedValue, label, onChange, inline, }: ColorPickerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface MultiColorPickerProps {
     options?: ColorPickerOption[];
@@ -656,41 +676,50 @@ interface TimerProps extends TimeProps {
 }
 declare const Timer: ({ onTimeUp, ...rest }: TimerProps) => JSX.Element;
 
-interface BaseInputProps {
+interface BaseInputCommmonProps {
     defaultValue?: string;
     maxLength?: number;
     placeholder?: string;
     label?: string;
-    onChange?: (value: string) => void;
     onValidation?: (status: InputValidationType) => void;
     disabled?: boolean;
     required?: string;
     children?: React.ReactNode;
-}
+    size?: 'regular' | 'small';
+}
+interface BaseInputControlled extends BaseInputCommmonProps {
+    value: string;
+    onChange: (value: string) => void;
+}
+interface BaseInputUncontrolled extends BaseInputCommmonProps {
+    value?: never;
+    onChange?: (value: string) => void;
+}
+declare type BaseInputProps = BaseInputControlled | BaseInputUncontrolled;
 
-interface BasePlusIconProps extends BaseInputProps {
+declare type BasePlusIconProps = BaseInputProps & {
     Icon: IconType;
-}
+};
 
-declare type BaseInputPropsWithoutLabel = Omit<BaseInputProps, 'label'>;
-interface BasePlusButtonProps extends BaseInputPropsWithoutLabel {
-    onClick: () => void;
+declare type BasePlusButtonProps = BaseInputProps & {
+    label?: undefined;
+    onClick: (value: string) => void;
     onClickEdit: () => void;
     text: string;
     success: boolean;
     editText: string;
     successText: string;
-}
+};
 
-interface CustomProps extends BaseInputProps {
+declare type CustomProps = BaseInputProps & {
     onClick: () => void;
     text: string;
-    type: 'primary' | 'secondary';
-}
+    variant: ButtonProps['variant'];
+};
 
 declare const Input: {
-    Simple: ({ onChange, defaultValue, label, children, required, onValidation, ...rest }: BaseInputProps) => JSX.Element;
-    Custom: ({ onClick, text, type, ...rest }: CustomProps) => JSX.Element;
+    Simple: ({ value, onChange, defaultValue, label, children, required, onValidation, size, ...rest }: BaseInputProps) => JSX.Element;
+    Custom: ({ onClick, text, variant, ...rest }: CustomProps) => JSX.Element;
     SimplePlusButton: ({ onClick, onClickEdit, text, success, editText, successText, ...rest }: BasePlusButtonProps) => JSX.Element;
     SimplePlusIcon: ({ Icon, ...rest }: BasePlusIconProps) => JSX.Element;
 };
@@ -847,12 +876,13 @@ interface ImageStyleProps {
     borderRadius?: string;
     objectFit?: string;
     objectPosition?: string;
+    className?: string;
 }
 interface ImageProps extends ImageStyleProps {
     src: string;
     alt: string;
 }
-declare const Image: ({ src, alt, height, width, borderRadius, objectFit, objectPosition, }: ImageProps) => JSX.Element;
+declare const Image: ({ src, alt, height, width, borderRadius, objectFit, objectPosition, className, }: ImageProps) => JSX.Element;
 
 interface AmazonPaypalBtnProps {
     onClick: () => void;
@@ -968,7 +998,6 @@ interface PaginationProps {
 declare const Pagination: ({ from, to, currentPage, onChange, underlineActive, boldActive, disabled, }: PaginationProps) => JSX.Element;
 
 declare const Text: FC<TextProps>;
-
 declare type TextHeroProps = {
     variant: 'hero1' | 'hero2' | 'hero3';
     weight?: 'heavy' | 'bold' | 'demi';
@@ -991,7 +1020,7 @@ declare type TextDisplayProps = {
 };
 declare type TextHeadingProps = {
     variant: 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
-    weight: 'bold' | 'demi' | 'regular';
+    weight?: 'bold' | 'demi' | 'regular';
     size?: 'regular';
     underline?: never;
     disabled?: never;
@@ -1051,7 +1080,7 @@ declare type TextLabelProps = {
 } & LabelHTMLAttributes<'label'>;
 declare type TextTagProps = {
     variant: 'tag';
-    size: 'regular' | 'small' | 'x-small';
+    size?: 'regular' | 'small' | 'x-small';
     weight?: 'regular' | 'demi' | 'bold';
     underline?: never;
     disabled?: boolean;
@@ -1061,6 +1090,7 @@ declare type TextTagProps = {
 };
 declare type TextProps = AriaAttributes & {
     style?: CSSProperties;
+    className?: string;
 } & (TextHeroProps | TextDisplayProps | TextHeadingProps | TextBodyProps | TextLinkProps | TextButtonProps | TextPricingProps | TextLabelProps | TextTagProps);
 
 interface SearchBarProps {
@@ -1082,13 +1112,31 @@ interface ProductGalleryMobileProps {
 }
 declare const ProductGalleryMobile: ({ images, selectedValue, DiscountTagElement, BestSellerTagElement, productImageDataTestId, slideDotsDataTestId, }: ProductGalleryMobileProps) => JSX.Element;
 
+interface RadioProps {
+    name: string;
+    value: string;
+    id: string;
+    label: string;
+    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange: (option: RadioGroupOption) => void;
+}
+declare const RadioInput: ({ name, value, id, label, checked, disabled, onChange, size, }: RadioProps) => JSX.Element;
+
+declare type PortalProps = {
+    id: string;
+    className?: string;
+};
+declare const Portal: FC<PortalProps>;
+
 declare const ThemeProvider: FC<{
     theme: Theme;
     children: ReactNode;
 }>;
 declare const useTheme: () => Theme;
 declare const ThemeVariables: FC<{
-    theme: any;
+    theme: Theme;
     Container?: ElementType;
 }>;
 declare const AssetsProvider: FC<{
@@ -1101,6 +1149,13 @@ declare type Theme = {
     fontWeights: number[];
     lineHeights: number[];
     mediaQueries: ThemeBreakpoints;
+    radius: {
+        regular: string;
+    };
+    zIndex: {
+        modal: number;
+        overlay: number;
+    };
     colors: ThemeColors;
     component: ThemeComponent;
     typography: ThemeTypography;
@@ -1433,6 +1488,9 @@ declare type ThemeComponent = {
             color: string;
         };
     };
+    modal: {
+        minWidth: string;
+    };
 };
 declare type ThemeTypography = {
     config: {
@@ -1473,4 +1531,4 @@ declare const useWindowDimensions: (breakpoints: ThemeBreakpoints$1) => {
     };
 };
 
-export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CategoryTag, Checkbox, Collection, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pagination, Pattern, PaymentMethod, PaypalButton, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, RadioGroupInput, RadioGroupOption, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text, TextButton, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CategoryTag, Checkbox, Collection, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, IconProps$1 as IconProps, IconWithOpacityProps, Image, ImageType, Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pagination, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, RadioGroupInput, RadioGroupOption, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text, TextButton, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };