@mailstep/design-system 0.7.66 → 0.7.68-beta.0

package/ui/Blocks/SideMenu/MenuItem.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
-import { type MenuItemType } from './types';
+import { default as React } from 'react';
+import { MenuItemType } from './types';
+
 type Props = MenuItemType & {
     isSubitem?: boolean;
     isCompact: boolean;
@@ -8,5 +9,5 @@ type Props = MenuItemType & {
     isLeftMenuOpen?: boolean;
     onCloseLeftMenu?: () => void;
 };
-declare const _default: React.MemoExoticComponent<({ icon, title, link, items, id, isSubitem, isCompact, lightMode, separator, isLeftMenuOpen, onCloseLeftMenu }: Props) => JSX.Element | null>;
+declare const _default: React.NamedExoticComponent<Props>;
 export default _default;

package/ui/Blocks/SideMenu/SideMenu.d.ts

@@ -1,3 +1,5 @@
+import { FC } from 'react';
 import { SideMenuProps } from './types';
-declare const SideMenu: ({ menuItems, isCompact, setIsCompact, isLeftMenuOpen, onCloseLeftMenu, variant, children }: SideMenuProps) => JSX.Element;
+
+declare const SideMenu: FC<SideMenuProps>;
 export default SideMenu;

package/ui/Blocks/SideMenu/components/Footer.d.ts

@@ -1,14 +1,16 @@
-export declare const FooterWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+import { FC } from 'react';
+
+export declare const FooterWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     isCompact: boolean;
 }, never>;
-export declare const SizeToggle: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const SizeToggle: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     isCompact: boolean;
-    $lightMode?: boolean | undefined;
+    $lightMode?: boolean;
 }, never>;
 type Props = {
     isCompact: boolean;
     setIsCompact?: (compact: boolean) => void;
     lightMode?: boolean;
 };
-declare const MenuFooter: ({ isCompact, setIsCompact, lightMode }: Props) => JSX.Element;
+declare const MenuFooter: FC<Props>;
 export default MenuFooter;

package/ui/Blocks/SideMenu/components/Footer.js

@@ -4,11 +4,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import styled, { css } from '@xstyled/styled-components';
-import { th } from '@xstyled/system';
 import { MenuItems } from '../../../Elements/Icon/icons/MenuItems';
 import { Paragraph4 } from '../../../Elements/Typography';
 import { Trans } from '@lingui/react';
+import styled, { css } from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
 export var FooterWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  height: 24px;\n  width: 100%;\n  margin-bottom: 24px;\n  justify-content: ", ";\n  padding-left: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  height: 24px;\n  width: 100%;\n  margin-bottom: 24px;\n  justify-content: ", ";\n  padding-left: ", ";\n"])), function (props) { return (props.isCompact ? 'center' : 'flex-start'); }, function (props) { return (props.isCompact ? '0' : '22px'); });
 export var SizeToggle = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: none;\n  @media (min-width: 1024px) {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    color: ", ";\n    font-size: 11px;\n    & svg {\n      transform: ", ";\n      ", "\n\n      & > path {\n        stroke: ", ";\n      }\n    }\n  }\n"], ["\n  display: none;\n  @media (min-width: 1024px) {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    color: ", ";\n    font-size: 11px;\n    & svg {\n      transform: ", ";\n      ", "\n\n      & > path {\n        stroke: ", ";\n      }\n    }\n  }\n"])), function (_a) {
     var $lightMode = _a.$lightMode;
@@ -20,7 +20,7 @@ export var SizeToggle = styled.div(templateObject_3 || (templateObject_3 = __mak
 var MenuFooter = function (_a) {
     var isCompact = _a.isCompact, setIsCompact = _a.setIsCompact, lightMode = _a.lightMode;
     var toggleIsCompact = useCallback(function () {
-        setIsCompact && setIsCompact(!isCompact);
+        setIsCompact === null || setIsCompact === void 0 ? void 0 : setIsCompact(!isCompact);
     }, [setIsCompact, isCompact]);
     return (_jsx(FooterWrap, { isCompact: isCompact, children: _jsxs(SizeToggle, { onClick: toggleIsCompact, isCompact: isCompact, "$lightMode": lightMode, children: [_jsx(MenuItems, { stroke: "none", width: "24px" }), !isCompact && (_jsx(Paragraph4, { ml: 2, variant: "semiBold", children: _jsx(Trans, { id: "footer.collapse", message: "Collapse" }) }))] }) }));
 };

package/ui/Blocks/SideMenu/components/SubitemTooltip.d.ts

@@ -1,5 +1,6 @@
-import { MutableRefObject } from 'react';
+import { MutableRefObject, FC } from 'react';
 import { MenuItemType } from '../types';
+
 type Props = {
     itemsOpen?: number;
     childRef: MutableRefObject<HTMLElement | null>;
@@ -9,5 +10,5 @@ type Props = {
     onCloseLeftMenu?: () => void;
     lightMode?: boolean;
 };
-declare const SubitemTooltip: ({ items, childRef, parentRef, isLeftMenuOpen, onCloseLeftMenu, lightMode }: Props) => JSX.Element;
+declare const SubitemTooltip: FC<Props>;
 export default SubitemTooltip;

package/ui/Blocks/SideMenu/context/LeftMenuContext.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import { default as React } from 'react';
+
 type LeftMenuContextType = {
     expandedItem: string | null;
     expandItem: (item: string | null) => void;

package/ui/Blocks/SideMenu/hooks/useOutsideHover.d.ts

@@ -1,4 +1,5 @@
 import { MutableRefObject } from 'react';
+
 interface Props {
     parentRef: MutableRefObject<HTMLDivElement | null | undefined>;
 }

package/ui/Blocks/SideMenu/index.d.ts

@@ -1,7 +1,8 @@
 import { HamburgerMenuButton } from './components/HamburgerMenu';
 import { compactMenuWidth, expandedMenuWidth } from './utils/constants';
-import SideMenu from './SideMenu';
+import { default as SideMenu } from './SideMenu';
 import { MenuItemType } from './types';
+
 export type { MenuItemType };
 export { HamburgerMenuButton, compactMenuWidth, expandedMenuWidth };
 export default SideMenu;

package/ui/Blocks/SideMenu/stories/SideMenu.stories.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 declare const meta: {
     title: string;
-    component: ({ menuItems, isCompact, setIsCompact, isLeftMenuOpen, onCloseLeftMenu, variant, children }: import("../types").SideMenuProps) => JSX.Element;
+    component: import('react').FC<import('../types').SideMenuProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Blocks/SideMenu/styles.d.ts

@@ -1,43 +1,43 @@
-/// <reference types="react" />
 import { NavLink } from 'react-router-dom';
-export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    isLeftMenuOpen?: boolean | undefined;
-}, never>;
-export declare const SubItemsWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const ItemsSeparator: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const ItemLabel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    $isCompact?: boolean | undefined;
-    isSubitem?: boolean | undefined;
-}, never>;
-export declare const ItemDropdownArrow: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: import("../..").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
-    $lightMode?: boolean | undefined;
-}, never>;
-export declare const TooltipItemLabel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const ItemLinkWrap: import("styled-components").StyledComponent<typeof NavLink, import("@xstyled/system").Theme, {
-    $isCompact?: boolean | undefined;
-    $lightMode?: boolean | undefined;
-    appearance?: "default" | "gray" | undefined;
-}, never>;
-export declare const MenuItemContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    $isCompact?: boolean | undefined;
-    $lightMode?: boolean | undefined;
-    hasChildren?: boolean | undefined;
-    isHovering?: boolean | undefined;
-}, never>;
-export declare const ItemIcon: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {
-    $isCompact?: boolean | undefined;
-}, never>;
-export declare const TooltipWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    $lightMode?: boolean | undefined;
-}, never>;
-export declare const OverflowWithEllipsis: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
-export declare const TopLevelWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+
+export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+    isLeftMenuOpen?: boolean;
+}, never>;
+export declare const SubItemsWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const ItemsSeparator: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const ItemLabel: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+    $isCompact?: boolean;
+    isSubitem?: boolean;
+}, never>;
+export declare const ItemDropdownArrow: import('styled-components').StyledComponent<import('react').FC<import('../..').IconProps>, import('@xstyled/system').Theme, {
+    $lightMode?: boolean;
+}, never>;
+export declare const TooltipItemLabel: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const ItemLinkWrap: import('styled-components').StyledComponent<typeof NavLink, import('@xstyled/system').Theme, {
+    $isCompact?: boolean;
+    $lightMode?: boolean;
+    appearance?: "gray" | "default";
+}, never>;
+export declare const MenuItemContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+    $isCompact?: boolean;
+    $lightMode?: boolean;
+    hasChildren?: boolean;
+    isHovering?: boolean;
+}, never>;
+export declare const ItemIcon: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {
+    $isCompact?: boolean;
+}, never>;
+export declare const TooltipWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+    $lightMode?: boolean;
+}, never>;
+export declare const OverflowWithEllipsis: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
+export declare const TopLevelWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     isCompact: boolean;
-    isLeftMenuOpen?: boolean | undefined;
-    lightMode?: boolean | undefined;
+    isLeftMenuOpen?: boolean;
+    lightMode?: boolean;
 }, never>;
-export declare const ScrollWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const BodyWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const ScrollWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const BodyWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     isCompact: boolean;
 }, never>;
-export declare const Overlay: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Overlay: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

package/ui/Blocks/SideMenu/types.d.ts

@@ -1,4 +1,5 @@
-import { type ReactNode } from 'react';
+import { ReactNode } from 'react';
+
 export type MenuItemType = {
     icon?: ReactNode;
     onClick?: () => void;

package/ui/Blocks/Stepper/Stepper.d.ts

@@ -1,3 +1,4 @@
-import { type FC } from 'react';
-import type { StepperProps } from './types';
+import { FC } from 'react';
+import { StepperProps } from './types';
+
 export declare const Stepper: FC<StepperProps>;

package/ui/Blocks/Stepper/components/StepCircle/index.d.ts

@@ -1,4 +1,5 @@
-import { type FC } from 'react';
+import { FC } from 'react';
+
 type Props = {
     icon?: string;
     isCompleted?: boolean;

package/ui/Blocks/Stepper/components/StepCircle/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const StepCircleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    isCompleted?: boolean | undefined;
-    isActiveStep?: boolean | undefined;
+export declare const StepCircleContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+    isCompleted?: boolean;
+    isActiveStep?: boolean;
 }, never>;

package/ui/Blocks/Stepper/components/StepItem/index.d.ts

@@ -1,4 +1,5 @@
-import { type FC } from 'react';
+import { FC } from 'react';
+
 type StepItemProps = {
     onClick?: () => void;
     title: string;

package/ui/Blocks/Stepper/components/StepItem/styles.d.ts

@@ -1,12 +1,12 @@
-export declare const StepItemContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const StepItemContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     isActiveStep: boolean;
-    isDisabled?: boolean | undefined;
-    isVisible?: boolean | undefined;
+    isDisabled?: boolean;
+    isVisible?: boolean;
     total: number;
-    onClick?: (() => void) | undefined;
+    onClick?: () => void;
 }, never>;
-export declare const Line: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const Line: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     isActiveStep: boolean;
     isCompletedStep: boolean;
 }, never>;
-export declare const ContentWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const ContentWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

package/ui/Blocks/Stepper/stories/Stepper.stories.d.ts

@@ -1,4 +1,5 @@
-import { type FC } from 'react';
+import { FC } from 'react';
+
 declare const meta: {
     title: string;
     tags: string[];

package/ui/Blocks/Stepper/styles.d.ts

@@ -1,5 +1,5 @@
-export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const ItemsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const ItemsWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     total: number;
     hasComponent: boolean;
 }, never>;

package/ui/Blocks/Stepper/types.d.ts

@@ -1,4 +1,5 @@
-import type { FC } from 'react';
+import { FC } from 'react';
+
 export type StepperProps = {
     items: StepperItem[];
     activeStep: number;

package/ui/Blocks/Table/Table.d.ts

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import { ColumnDefinitions, DataRow } from './types';
+
 type Props = {
     columnDefinitions: ColumnDefinitions;
     data?: DataRow[] | null;

package/ui/Blocks/Table/stories/Table.stories.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 declare const meta: {
     title: string;
-    component: import("react").FC<{
-        columnDefinitions: import("../types").ColumnDefinitions;
-        data?: import("../types").DataRow[] | null | undefined;
-        onRowClick?: ((dataRow: import("../types").DataRow) => void) | undefined;
+    component: import('react').FC<{
+        columnDefinitions: import('../types').ColumnDefinitions;
+        data?: import('../types').DataRow[] | null;
+        onRowClick?: (dataRow: import('../types').DataRow) => void;
     }>;
     tags: string[];
     argTypes: {};

package/ui/Blocks/Tabs/TabContent.d.ts

@@ -1,3 +1,4 @@
-import type { ReactElement } from 'react';
-import type { TabContentProps } from './types';
+import { ReactElement } from 'react';
+import { TabContentProps } from './types';
+
 export declare const TabContent: ({ activeTab, value, children }: TabContentProps) => ReactElement | null;

package/ui/Blocks/Tabs/Tabs.d.ts

@@ -1,2 +1,4 @@
-import type { TabsProps } from './types';
-export declare const Tabs: ({ tabsDefinition, activeTab, onTabSwitch, mb, mt, minTabWidth }: TabsProps) => JSX.Element;
+import { default as React } from 'react';
+import { TabsProps } from './types';
+
+export declare const Tabs: React.FC<TabsProps>;

package/ui/Blocks/Tabs/hooks/useTabs.d.ts

@@ -1,2 +1,3 @@
 import { UseTabsHook } from '../types';
+
 export declare const useTabs: UseTabsHook;

package/ui/Blocks/Tabs/index.d.ts

@@ -1,4 +1,5 @@
 import { Tabs } from './Tabs';
+
 export { TabContent } from './TabContent';
 export { useTabs } from './hooks/useTabs';
 export type { TabDefinition } from './types';

package/ui/Blocks/Tabs/stories/Tabs.stories.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 import { StoryObj } from '@storybook/react';
+
 declare const meta: {
     title: string;
-    component: ({ tabsDefinition, activeTab, onTabSwitch, mb, mt, minTabWidth }: import("../types").TabsProps) => JSX.Element;
+    component: import('react').FC<import('../types').TabsProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Blocks/Tabs/styles.d.ts

@@ -1,13 +1,12 @@
-/// <reference types="react" />
-export declare const StyledImageBox: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
-export declare const StyledTabWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const RoundedWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Tab: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const StyledImageBox: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
+export declare const StyledTabWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const RoundedWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Tab: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     active: boolean;
-    disabled?: boolean | undefined;
-    minWidth?: string | string[] | undefined;
+    disabled?: boolean;
+    minWidth?: string | string[];
 }, never>;
-export declare const TabPanel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    $mb?: string | undefined;
-    $mt?: string | undefined;
+export declare const TabPanel: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+    $mb?: string;
+    $mt?: string;
 }, never>;

package/ui/Blocks/Tabs/types.d.ts

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react';
+
 export type TabDefinition = {
     label: string;
     icon?: string;

package/ui/Elements/Alert/Alert.d.ts

@@ -1,3 +1,4 @@
 import { IAlert } from './types';
+
 declare const Alert: IAlert;
 export default Alert;

package/ui/Elements/Alert/index.d.ts

@@ -1,3 +1,4 @@
-import Alert from './Alert';
+import { default as Alert } from './Alert';
+
 export { Alert };
 export default Alert;

package/ui/Elements/Alert/stories/Alert.stories.d.ts

@@ -1,7 +1,8 @@
-import type { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
+
 declare const meta: {
     title: string;
-    component: import("../types").IAlert;
+    component: import('../types').IAlert;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Alert/styles.d.ts

@@ -1,44 +1,33 @@
-/// <reference types="react" />
-export declare const StyledAlert: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, any, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
-    $inline?: boolean | undefined;
-    $colorFill: React.ReactText;
-    $bgColor: React.ReactText;
+export declare const StyledAlert: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
+    $inline?: boolean;
+    $colorFill: string;
+    $bgColor: string;
 }, "color">;
-export declare const VerticalSeparator: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, any, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
-    $colorFill?: import("react").ReactText | undefined;
+export declare const VerticalSeparator: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
+    $colorFill?: string;
 }, "color">;
-export declare const IconWrap: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, any, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
-export declare const Title: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const Text: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const LinkWrapper: import("styled-components").StyledComponent<{
-    (props: {
-        as?: any;
-        children?: import("react").ReactNode;
-        to?: string | Function | {
-            pathname?: string | undefined;
-            search?: string | undefined;
-            hash?: string | undefined;
-            state?: object | undefined;
-        } | undefined;
-        target?: string | undefined;
-        color?: string | undefined;
-        size: number | "inherit";
-        disabled?: boolean | undefined;
-        onClick?: Function | undefined;
-    }): JSX.Element;
-    defaultProps: {
-        to: string;
-        color: string;
-        disabled: boolean;
-        size: number;
-        padding: string;
-        replace: boolean;
-    };
-}, any, {
+export declare const IconWrap: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
+export declare const Title: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const Text: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const LinkWrapper: import('styled-components').StyledComponent<import('react').FC<{
+    as?: any;
+    children?: React.ReactNode;
+    to?: string | {
+        pathname?: string;
+        search?: string;
+        hash?: string;
+        state?: object;
+    } | Function;
+    target?: string;
+    color?: string;
+    size?: number | "inherit";
+    disabled?: boolean;
+    onClick?: Function;
+}>, any, {
     $colorFill: string;
 }, never>;
-export declare const ActionButton: import("styled-components").StyledComponent<"button", any, {
-    $colorFill: React.ReactText;
+export declare const ActionButton: import('styled-components').StyledComponent<"button", any, {
+    $colorFill: string;
 }, never>;
-export declare const CloseBtn: import("styled-components").StyledComponent<"button", any, {}, never>;
-export declare const Description: import("styled-components").StyledComponent<"div", any, import("@xstyled/util").Props<import("@xstyled/system").Theme>, never>;
+export declare const CloseBtn: import('styled-components').StyledComponent<"button", any, {}, never>;
+export declare const Description: import('styled-components').StyledComponent<"div", any, import('@xstyled/util').Props<import('@xstyled/system').Theme>, never>;

package/ui/Elements/Alert/styles.js

@@ -2,10 +2,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import { Link } from '../Link';
-import { x } from '@xstyled/styled-components';
-import { th } from '@xstyled/styled-components';
 import styled from 'styled-components';
+import { Link } from '../Link';
+import { x, th } from '@xstyled/styled-components';
 export var StyledAlert = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: calc(100vw - 20px);\n  display: flex;\n  min-height: 48px;\n  align-items: center;\n  justify-content: space-between;\n  border: ", ";\n  border-radius: 8px;\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  padding: 6px 5px 6px 5px;\n  margin-bottom: 5px;\n  position: sticky;\n  left: 10px;\n  @media (min-width: 1024px) {\n    position: relative;\n    left: 0;\n    width: 100%;\n  }\n"], ["\n  width: calc(100vw - 20px);\n  display: flex;\n  min-height: 48px;\n  align-items: center;\n  justify-content: space-between;\n  border: ", ";\n  border-radius: 8px;\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  padding: 6px 5px 6px 5px;\n  margin-bottom: 5px;\n  position: sticky;\n  left: 10px;\n  @media (min-width: 1024px) {\n    position: relative;\n    left: 0;\n    width: 100%;\n  }\n"])), function (_a) {
     var $inline = _a.$inline, $colorFill = _a.$colorFill;
     return ($inline ? "solid 1px ".concat($colorFill) : 'none');

package/ui/Elements/Alert/types.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import { FC, ReactNode } from 'react';
+
 export type AlertProps = {
     intent?: 'success' | 'info' | 'warning' | 'danger';
     inline?: boolean;
@@ -8,11 +9,9 @@ export type AlertProps = {
     text?: string;
     closeAnywhere?: boolean;
     href?: string;
-    actionLabel?: React.ReactElement | string;
+    actionLabel?: ReactNode | string;
     actionType?: 'link' | 'button';
     desc?: string;
     [key: string]: any;
 };
-export interface IAlert {
-    (props: AlertProps): JSX.Element;
-}
+export type IAlert = FC<AlertProps>;

package/ui/Elements/AsyncSelect/AsyncSelect.d.ts

@@ -1,7 +1,8 @@
-import { type FC } from 'react';
-import { type Option } from '../Select/types';
-import { type SpaceAround } from '../SpaceAround';
-import { type AsyncProps } from 'react-select/async';
+import { FC } from 'react';
+import { Option } from '../Select/types';
+import { SpaceAround } from '../SpaceAround';
+import { AsyncProps } from 'react-select/async';
+
 export type AsyncSelectProps = {
     name?: string;
     error?: string;

package/ui/Elements/AsyncSelect/index.d.ts

@@ -1,3 +1,4 @@
-import { AsyncSelect, type AsyncSelectProps } from './AsyncSelect';
+import { AsyncSelect, AsyncSelectProps } from './AsyncSelect';
+
 export default AsyncSelect;
 export type { AsyncSelectProps };

package/ui/Elements/AsyncSelect/stories/AsyncSelect.stories.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 declare const meta: {
     title: string;
-    component: import("react").FC<import("../AsyncSelect").AsyncSelectProps>;
+    component: import('react').FC<import('../AsyncSelect').AsyncSelectProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/AsyncSelect/stories/AsyncSelect.stories.js

@@ -8,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/ui/Elements/Avatar/Avatar.d.ts

@@ -1,2 +1,4 @@
+import { FC } from 'react';
 import { Props } from './types';
-export declare const Avatar: ({ src, size, colorFront, colorBack, className, hoverColorBack, ...rest }: Props) => JSX.Element;
+
+export declare const Avatar: FC<Props>;

package/ui/Elements/Avatar/Avatar.js

@@ -25,9 +25,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import styled from '@xstyled/styled-components';
-import { th } from '@xstyled/styled-components';
 import { Profile } from '../Icon';
+import styled, { th } from '@xstyled/styled-components';
 var defaultDimension = 100;
 var StyledAvatarWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  overflow: hidden;\n  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  :hover {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  overflow: hidden;\n  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  :hover {\n    background-color: ", ";\n  }\n"])), function (props) { return (props.$colorFront ? th.color(props.$colorFront) : 'auto'); }, function (props) { return (props.$colorBack ? th.color(props.$colorBack) : 'auto'); }, function (props) { return "".concat(props.size, "px"); }, function (props) { return "".concat(props.size, "px"); }, function (props) { return (props.$hoverColorBack ? th.color(props.$hoverColorBack) : 'auto'); });
 export var Avatar = function (_a) {

package/ui/Elements/Avatar/index.d.ts

@@ -1,3 +1,4 @@
 import { Avatar } from './Avatar';
+
 export { Avatar } from './Avatar';
 export default Avatar;