@astral/ui 4.17.4 → 4.17.6

package/node/components/TreeLikeAsyncAutocomplete/OptionsModal/ErrorMessage/styles.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
-const styles_1 = require("../../../styles");
-exports.Wrapper = styles_1.styled.div `
+const styled_1 = require("../../../styled");
+exports.Wrapper = styled_1.styled.div `
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(3)};

package/node/components/TreeLikeAsyncAutocomplete/OptionsModal/Loader/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/TreeLikeAsyncAutocomplete/OptionsModal/Loader/styles.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
-const styles_1 = require("../../../styles");
-exports.Wrapper = styles_1.styled.div `
+const styled_1 = require("../../../styled");
+exports.Wrapper = styled_1.styled.div `
   display: flex;
   align-items: center;
   justify-content: center;

package/node/components/TreeLikeAsyncAutocomplete/OptionsModal/NoData/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/TreeLikeAsyncAutocomplete/OptionsModal/NoData/styles.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
-const styles_1 = require("../../../styles");
-exports.Wrapper = styles_1.styled.div `
+const styled_1 = require("../../../styled");
+exports.Wrapper = styled_1.styled.div `
   display: flex;
   align-items: center;
   justify-content: center;

package/node/components/TreeLikeAsyncAutocomplete/OptionsModal/SearchSuggestion/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/TreeLikeAsyncAutocomplete/OptionsModal/SearchSuggestion/styles.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
-const styles_1 = require("../../../styles");
-exports.Wrapper = styles_1.styled.div `
+const styled_1 = require("../../../styled");
+exports.Wrapper = styled_1.styled.div `
   display: flex;
   align-items: center;
   justify-content: center;

package/node/components/TreeLikeAsyncAutocomplete/OptionsModal/styles.d.ts

@@ -1,18 +1,18 @@
 /// <reference types="react" />
 type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export declare const StyledDialogContent: import("@emotion/styled").StyledComponent<import("../../DialogContent").DialogContentProps & {
+export declare const StyledDialogContent: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../DialogContent").DialogContentProps & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
     $size: Size;
 }, {}, {}>;
-export declare const TreeListWrapper: import("@emotion/styled").StyledComponent<{
+export declare const TreeListWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledSearchField: import("@emotion/styled").StyledComponent<Omit<import("../../SearchField").SearchFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const StyledSearchField: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../SearchField").SearchFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const UserHintWrapper: import("@emotion/styled").StyledComponent<{
+export declare const UserHintWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/TreeLikeAsyncAutocomplete/OptionsModal/styles.js

@@ -5,9 +5,9 @@ const material_1 = require("@mui/material");
 const Dialog_1 = require("../../Dialog");
 const DialogContent_1 = require("../../DialogContent");
 const SearchField_1 = require("../../SearchField");
-const styles_1 = require("../../styles");
+const styled_1 = require("../../styled");
 const Tree_1 = require("../../Tree");
-exports.StyledDialogContent = (0, styles_1.styled)(DialogContent_1.DialogContent, {
+exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent, {
     shouldForwardProp: (prop) => !['$size'].includes(prop),
 }) `
   display: grid;
@@ -23,7 +23,7 @@ exports.StyledDialogContent = (0, styles_1.styled)(DialogContent_1.DialogContent
     width: auto;
   }
 `;
-exports.TreeListWrapper = styles_1.styled.div `
+exports.TreeListWrapper = styled_1.styled.div `
     overflow: auto;
 
     height: 100%;
@@ -33,7 +33,7 @@ exports.TreeListWrapper = styles_1.styled.div `
     min-width: max-content;
   }
 `;
-exports.StyledSearchField = (0, styles_1.styled)(SearchField_1.SearchField) `
+exports.StyledSearchField = (0, styled_1.styled)(SearchField_1.SearchField) `
   & .${material_1.formHelperTextClasses.root} {
     display: flex;
 
@@ -42,7 +42,7 @@ exports.StyledSearchField = (0, styles_1.styled)(SearchField_1.SearchField) `
     color: ${({ theme }) => theme.palette.grey[500]};
   }
 `;
-exports.UserHintWrapper = styles_1.styled.div `
+exports.UserHintWrapper = styled_1.styled.div `
   display: flex;
   align-items: center;
   justify-content: center;

package/node/components/TreeLikeAsyncAutocomplete/useLogic/useLogic.d.ts

@@ -11,7 +11,7 @@ export declare const useLogic: ({ onBlur, isError, value, isDisabled, fetchDelay
         translate?: "no" | "yes" | undefined;
         fullWidth?: boolean | undefined;
         focused?: boolean | undefined;
-        size?: import("@mui/types").OverridableStringUnion<"small" | "medium", import("@mui/material").TextFieldPropsSizeOverrides> | undefined;
+        size?: import("@mui/types").OverridableStringUnion<"medium" | "small", import("@mui/material").TextFieldPropsSizeOverrides> | undefined;
         classes?: Partial<import("@mui/material").TextFieldClasses> | undefined;
         children?: import("react").ReactNode;
         defaultChecked?: boolean | undefined;
@@ -301,13 +301,13 @@ export declare const useLogic: ({ onBlur, isError, value, isDisabled, fetchDelay
         treeProps: import("../..").TreeAutocompleteTreeProps | undefined;
         dialogProps: {
             onClose: (event: SyntheticEvent<HTMLButtonElement>) => void;
-            slot?: string | undefined;
-            style?: import("react").CSSProperties | undefined;
-            title?: string | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[] | undefined;
             components?: {
                 Root?: import("react").ElementType<any> | undefined;
                 Backdrop?: import("react").ElementType<any> | undefined;
             } | undefined;
+            slot?: string | undefined;
+            style?: import("react").CSSProperties | undefined;
+            title?: string | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[] | undefined;
             color?: string | undefined;
             content?: string | undefined;
             transitionDuration?: number | {

package/node/components/TreeLikeAutocomplete/Input/styles.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
-export declare const StyledTextField: import("@emotion/styled").StyledComponent<Omit<import("../../TextField").TextFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const StyledTextField: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../TextField").TextFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
     $isHidden: boolean;
 }, {}, {}>;
 export declare const StyledTagsList: <TData extends import("../../TagsList").TagValue>(props: import("../../TagsList").TagsListProps<TData>) => JSX.Element;
-export declare const EndAdornmentWrapper: import("@emotion/styled").StyledComponent<{
+export declare const EndAdornmentWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledLoader: import("@emotion/styled").StyledComponent<import("../../Loader").LoaderProps & {
+export declare const StyledLoader: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../Loader").LoaderProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/node/components/TreeLikeAutocomplete/Input/styles.js

@@ -3,22 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledLoader = exports.EndAdornmentWrapper = exports.StyledTagsList = exports.StyledTextField = void 0;
 const material_1 = require("@mui/material");
 const Loader_1 = require("../../Loader");
-const styles_1 = require("../../styles");
+const styled_1 = require("../../styled");
 const TagsList_1 = require("../../TagsList");
 const TextField_1 = require("../../TextField");
-exports.StyledTextField = (0, styles_1.styled)(TextField_1.TextField, {
+exports.StyledTextField = (0, styled_1.styled)(TextField_1.TextField, {
     shouldForwardProp: (prop) => !['$isHidden'].includes(prop),
 }) `
   .${material_1.inputBaseClasses.input} {
     width: ${({ $isHidden }) => $isHidden && 0};
   }
 `;
-exports.StyledTagsList = (0, styles_1.styled)(TagsList_1.TagsList) `
+exports.StyledTagsList = (0, styled_1.styled)(TagsList_1.TagsList) `
   overflow: hidden;
 
   width: 100%;
 `;
-exports.EndAdornmentWrapper = styles_1.styled.div `
+exports.EndAdornmentWrapper = styled_1.styled.div `
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
   align-items: center;
@@ -26,7 +26,7 @@ exports.EndAdornmentWrapper = styles_1.styled.div `
   margin-left: auto;
   padding-left: ${({ theme }) => theme.spacing(1)};
 `;
-exports.StyledLoader = (0, styles_1.styled)(Loader_1.Loader) `
+exports.StyledLoader = (0, styled_1.styled)(Loader_1.Loader) `
   width: 20px;
   height: 20px;
 `;

package/node/components/TreeLikeAutocomplete/OptionsModal/ErrorMessage/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/TreeLikeAutocomplete/OptionsModal/ErrorMessage/styles.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
-const styles_1 = require("../../../styles");
-exports.Wrapper = styles_1.styled.div `
+const styled_1 = require("../../../styled");
+exports.Wrapper = styled_1.styled.div `
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(3)};

package/node/components/TreeLikeAutocomplete/OptionsModal/Loader/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/TreeLikeAutocomplete/OptionsModal/Loader/styles.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
-const styles_1 = require("../../../styles");
-exports.Wrapper = styles_1.styled.div `
+const styled_1 = require("../../../styled");
+exports.Wrapper = styled_1.styled.div `
   display: flex;
   align-items: center;
   justify-content: center;

package/node/components/TreeLikeAutocomplete/OptionsModal/NoData/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/TreeLikeAutocomplete/OptionsModal/NoData/styles.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
-const styles_1 = require("../../../styles");
-exports.Wrapper = styles_1.styled.div `
+const styled_1 = require("../../../styled");
+exports.Wrapper = styled_1.styled.div `
   display: flex;
   align-items: center;
   justify-content: center;

package/node/components/TreeLikeAutocomplete/OptionsModal/styles.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-export declare const StyledDialogContent: import("@emotion/styled").StyledComponent<import("../../DialogContent").DialogContentProps & {
+export declare const StyledDialogContent: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../DialogContent").DialogContentProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const TreeListWrapper: import("@emotion/styled").StyledComponent<{
+export declare const TreeListWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/TreeLikeAutocomplete/OptionsModal/styles.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeListWrapper = exports.StyledDialogContent = void 0;
 const DialogContent_1 = require("../../DialogContent");
-const styles_1 = require("../../styles");
-exports.StyledDialogContent = (0, styles_1.styled)(DialogContent_1.DialogContent) `
+const styled_1 = require("../../styled");
+exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent) `
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: max-content 1fr;
@@ -12,7 +12,7 @@ exports.StyledDialogContent = (0, styles_1.styled)(DialogContent_1.DialogContent
   width: 100%;
   height: 500px;
 `;
-exports.TreeListWrapper = styles_1.styled.div `
+exports.TreeListWrapper = styled_1.styled.div `
   overflow: auto;
 
   min-width: 500px;

package/node/components/TreeLikeList/TreeItem/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StyledCheckbox: import("@emotion/styled").StyledComponent<import("react").HTMLAttributes<HTMLDivElement> & {
+export declare const StyledCheckbox: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("react").HTMLAttributes<HTMLDivElement> & {
     checked?: boolean | undefined;
     indeterminate?: boolean | undefined;
     isError?: boolean | undefined;
@@ -14,7 +14,7 @@ export declare const StyledCheckbox: import("@emotion/styled").StyledComponent<i
 } & import("react").RefAttributes<HTMLInputElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const StyledTreeItem: import("@emotion/styled").StyledComponent<{
+export declare const StyledTreeItem: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     className?: string | undefined;
     prefixId?: string | undefined;
     isSelected: boolean;
@@ -33,14 +33,14 @@ export declare const StyledTreeItem: import("@emotion/styled").StyledComponent<{
 } & Omit<any, ""> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const List: import("@emotion/styled").StyledComponent<{
+export declare const List: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
-export declare const StyledTooltip: import("@emotion/styled").StyledComponent<Omit<import("../../Tooltip").TooltipProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const StyledTooltip: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../Tooltip").TooltipProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const PopoverContent: import("@emotion/styled").StyledComponent<{
+export declare const PopoverContent: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/TreeLikeList/TreeItem/styles.js

@@ -3,15 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopoverContent = exports.StyledTooltip = exports.List = exports.StyledTreeItem = exports.StyledCheckbox = void 0;
 const material_1 = require("@mui/material");
 const Checkbox_1 = require("../../Checkbox");
-const styles_1 = require("../../styles");
-const mixins_1 = require("../../styles/mixins");
+const styled_1 = require("../../styled");
+const mixins_1 = require("../../styled/mixins");
 const Tooltip_1 = require("../../Tooltip");
 const Tree_1 = require("../../Tree");
-exports.StyledCheckbox = (0, styles_1.styled)(Checkbox_1.Checkbox) `
+exports.StyledCheckbox = (0, styled_1.styled)(Checkbox_1.Checkbox) `
   padding-top: 0;
   padding-bottom: 0;
 `;
-exports.StyledTreeItem = (0, styles_1.styled)(Tree_1.TreeItem) `
+exports.StyledTreeItem = (0, styled_1.styled)(Tree_1.TreeItem) `
   .${Tree_1.treeClassnames.note} {
     /* cSpell:ignore чекбоксом */
 
@@ -19,10 +19,10 @@ exports.StyledTreeItem = (0, styles_1.styled)(Tree_1.TreeItem) `
     margin-left: ${({ theme }) => `calc(${theme.spacing(1)} + 32px)`};
   }
 `;
-exports.List = styles_1.styled.ul `
+exports.List = styled_1.styled.ul `
   ${mixins_1.listContainer};
 `;
-exports.StyledTooltip = (0, styles_1.styled)(Tooltip_1.Tooltip) `
+exports.StyledTooltip = (0, styled_1.styled)(Tooltip_1.Tooltip) `
   .${material_1.tooltipClasses.tooltip} {
     margin-left: 0 !important;
 
@@ -30,6 +30,6 @@ exports.StyledTooltip = (0, styles_1.styled)(Tooltip_1.Tooltip) `
     box-shadow: ${({ theme }) => theme.elevation[200]};
   }
 `;
-exports.PopoverContent = styles_1.styled.div `
+exports.PopoverContent = styled_1.styled.div `
   padding: ${({ theme }) => theme.spacing(1)};
 `;

package/node/components/TreeLikeList/styles.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-export declare const List: import("@emotion/styled").StyledComponent<{
+export declare const List: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
-export declare const InnerList: import("@emotion/styled").StyledComponent<{
+export declare const InnerList: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & import("react").ClassAttributes<HTMLUListElement> & import("react").HTMLAttributes<HTMLUListElement> & {

package/node/components/TreeLikeList/styles.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InnerList = exports.List = void 0;
-const styles_1 = require("../styles");
-const mixins_1 = require("../styles/mixins");
-exports.List = styles_1.styled.ul `
+const styled_1 = require("../styled");
+const mixins_1 = require("../styled/mixins");
+exports.List = styled_1.styled.ul `
   ${mixins_1.listContainer};
   overflow: hidden;
 `;
-exports.InnerList = (0, styles_1.styled)(exports.List) `
+exports.InnerList = (0, styled_1.styled)(exports.List) `
   overflow: unset;
 `;

package/node/components/Typography/styles.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TypographyWrapper = void 0;
 const material_1 = require("@mui/material");
-const styles_1 = require("../styles");
-exports.TypographyWrapper = (0, styles_1.styled)(material_1.Typography, {
+const styled_1 = require("../styled");
+exports.TypographyWrapper = (0, styled_1.styled)(material_1.Typography, {
     shouldForwardProp: (prop) => prop !== 'isUpperCase',
 }) `
   text-transform: ${({ isUpperCase }) => (isUpperCase ? 'uppercase' : 'none')};

package/node/components/WelcomeScreen/styles.d.ts

@@ -1,23 +1,23 @@
 /// <reference types="react" />
-export declare const FirstStep: import("@emotion/styled").StyledComponent<{
+export declare const FirstStep: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LastStep: import("@emotion/styled").StyledComponent<{
+export declare const LastStep: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ProductWrapper: import("@emotion/styled").StyledComponent<{
+export declare const ProductWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const GreetingWrapper: import("@emotion/styled").StyledComponent<{
+export declare const GreetingWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Greeting: import("@emotion/styled").StyledComponent<{
+export declare const Greeting: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     children?: import("react").ReactNode;
-    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
+    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
     gutterBottom?: boolean | undefined;
     noWrap?: boolean | undefined;
     paragraph?: boolean | undefined;
@@ -25,14 +25,14 @@ export declare const Greeting: import("@emotion/styled").StyledComponent<{
     color?: import("../Typography").TypographyColor | undefined;
     variant?: import("../Typography").TypographyVariant | undefined;
     colorIntensity?: import("../Typography").Intensity | undefined;
-    component?: ("symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "clipPath" | "filter" | "marker" | "mask" | "center" | "text" | "big" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
+    component?: ("symbol" | "object" | "main" | "body" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "caption" | "button" | "link" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "clipPath" | "filter" | "marker" | "mask" | "center" | "text" | "big" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
     isUpperCase?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const UserName: import("@emotion/styled").StyledComponent<{
+export declare const UserName: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     children?: import("react").ReactNode;
-    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
+    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
     gutterBottom?: boolean | undefined;
     noWrap?: boolean | undefined;
     paragraph?: boolean | undefined;
@@ -40,7 +40,7 @@ export declare const UserName: import("@emotion/styled").StyledComponent<{
     color?: import("../Typography").TypographyColor | undefined;
     variant?: import("../Typography").TypographyVariant | undefined;
     colorIntensity?: import("../Typography").Intensity | undefined;
-    component?: ("symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "clipPath" | "filter" | "marker" | "mask" | "center" | "text" | "big" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
+    component?: ("symbol" | "object" | "main" | "body" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "caption" | "button" | "link" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "clipPath" | "filter" | "marker" | "mask" | "center" | "text" | "big" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
     isUpperCase?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;

package/node/components/WelcomeScreen/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UserName = exports.Greeting = exports.GreetingWrapper = exports.ProductWrapper = exports.LastStep = exports.FirstStep = void 0;
-const styles_1 = require("../styles");
+const styled_1 = require("../styled");
 const Typography_1 = require("../Typography");
 const constants_1 = require("./constants");
 const createStepKeyframes = (stepStartShowing, stepEndShowing) => `
@@ -18,9 +18,9 @@ const createStepKeyframes = (stepStartShowing, stepEndShowing) => `
     opacity: 0;
   }
 `;
-const fadeFirstStep = (0, styles_1.keyframes) `${createStepKeyframes('30%', '60%')}`;
-const fadeLastStep = (0, styles_1.keyframes) `${createStepKeyframes('20%', '90%')}`;
-const appearTextKeyframes = (0, styles_1.keyframes) `
+const fadeFirstStep = (0, styled_1.keyframes) `${createStepKeyframes('30%', '60%')}`;
+const fadeLastStep = (0, styled_1.keyframes) `${createStepKeyframes('20%', '90%')}`;
+const appearTextKeyframes = (0, styled_1.keyframes) `
   from {
     opacity: 0;
   }
@@ -28,7 +28,7 @@ const appearTextKeyframes = (0, styles_1.keyframes) `
     opacity: 1;
   }
 `;
-exports.FirstStep = styles_1.styled.div `
+exports.FirstStep = styled_1.styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -45,7 +45,7 @@ exports.FirstStep = styles_1.styled.div `
   animation: ${fadeFirstStep} ${constants_1.FIRST_STEP_DURATION_MS}ms linear;
   animation-fill-mode: both;
 `;
-exports.LastStep = styles_1.styled.div `
+exports.LastStep = styled_1.styled.div `
   position: absolute;
   top: 0;
 
@@ -64,7 +64,7 @@ exports.LastStep = styles_1.styled.div `
   animation-fill-mode: both;
   animation-delay: ${constants_1.FIRST_STEP_DURATION_MS}ms;
 `;
-exports.ProductWrapper = styles_1.styled.div `
+exports.ProductWrapper = styled_1.styled.div `
   display: flex;
   gap: ${({ theme }) => theme.spacing(3)};
   align-items: center;
@@ -76,12 +76,12 @@ exports.ProductWrapper = styles_1.styled.div `
     height: 48px;
   }
 `;
-exports.GreetingWrapper = styles_1.styled.div `
+exports.GreetingWrapper = styled_1.styled.div `
   display: flex;
   flex-direction: column;
   justify-content: center;
 `;
-exports.Greeting = (0, styles_1.styled)(Typography_1.Typography) `
+exports.Greeting = (0, styled_1.styled)(Typography_1.Typography) `
   margin-top: -50%;
 
   font-size: ${({ theme }) => theme.typography.pxToRem(24)};
@@ -94,7 +94,7 @@ exports.Greeting = (0, styles_1.styled)(Typography_1.Typography) `
   animation-fill-mode: both;
   animation-delay: ${constants_1.FIRST_STEP_DURATION_MS + constants_1.APPEAR_DURATION_TEXT_IN_LAST_STEP_MS}ms;
 `;
-exports.UserName = (0, styles_1.styled)(Typography_1.Typography) `
+exports.UserName = (0, styled_1.styled)(Typography_1.Typography) `
   font-size: ${({ theme }) => theme.typography.pxToRem(28)};
   line-height: ${({ theme }) => theme.typography.pxToRem(32)};