@mailstep/design-system 0.7.39 → 0.7.40-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.39",
+  "version": "0.7.40-beta.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

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

@@ -9,7 +9,7 @@ export declare const ItemLabel: import("styled-components").StyledComponent<"div
     $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, {
+export declare const ItemDropdownArrow: import("styled-components").StyledComponent<import("react").FC<import("../..").IconProps>, import("@xstyled/system").Theme, {
     $lightMode?: boolean | undefined;
 }, never>;
 export declare const TooltipItemLabel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

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

@@ -3,7 +3,7 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
 export declare const LoadingIconWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     $addMarginRight: boolean;
 }, never>;
-export declare const StyledIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: import("../Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
+export declare const StyledIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/system").Theme, {
     $addMarginRight?: boolean | undefined;
     $addMarginLeft?: boolean | undefined;
 }, never>;

package/ui/Elements/Icon/Icon.d.ts

@@ -1,8 +1,9 @@
-import { IconDefinition } from '@fortawesome/fontawesome-common-types';
-import { FlipProp } from '@fortawesome/fontawesome-svg-core';
-import { IconProps } from './types';
+import type { FC } from 'react';
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
+import type { FlipProp } from '@fortawesome/fontawesome-svg-core';
+import type { IconProps } from './types';
 export declare const iconDictionary: {
     [name: string]: IconDefinition | [IconDefinition, FlipProp];
 };
-declare const Icon: ({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: IconProps) => JSX.Element;
+declare const Icon: FC<IconProps>;
 export default Icon;

package/ui/Elements/Icon/Icon.js

@@ -20,6 +20,7 @@ import { faBell } from '@fortawesome/pro-regular-svg-icons/faBell';
 import { faBox as faBoxRegular } from '@fortawesome/pro-regular-svg-icons/faBox';
 import { faCalendar } from '@fortawesome/pro-regular-svg-icons/faCalendar';
 import { faCalendarPlus } from '@fortawesome/pro-regular-svg-icons/faCalendarPlus';
+import { faCartFlatbedBoxes } from '@fortawesome/pro-regular-svg-icons/faCartFlatbedBoxes';
 import { faChevronDown } from '@fortawesome/pro-regular-svg-icons/faChevronDown';
 import { faChevronRight as farChevronRight } from '@fortawesome/pro-regular-svg-icons/faChevronRight';
 import { faChevronUp } from '@fortawesome/pro-regular-svg-icons/faChevronUp';
@@ -48,7 +49,6 @@ import { faPenToSquare } from '@fortawesome/pro-regular-svg-icons/faPenToSquare'
 import { faShareSquare } from '@fortawesome/pro-regular-svg-icons/faShareSquare';
 import { faSquareMinus } from '@fortawesome/pro-regular-svg-icons/faSquareMinus';
 import { faTrashCan } from '@fortawesome/pro-regular-svg-icons/faTrashCan';
-import { faCartFlatbedBoxes } from '@fortawesome/pro-regular-svg-icons/faCartFlatbedBoxes';
 import { faTriangleExclamation as farTriangleExclamation } from '@fortawesome/pro-regular-svg-icons/faTriangleExclamation';
 import { faAngleLeft } from '@fortawesome/pro-solid-svg-icons/faAngleLeft';
 import { faAngleRight } from '@fortawesome/pro-solid-svg-icons/faAngleRight';
@@ -58,12 +58,12 @@ import { faArrowLeft } from '@fortawesome/pro-solid-svg-icons/faArrowLeft';
 import { faArrowsRotate } from '@fortawesome/pro-solid-svg-icons/faArrowsRotate';
 import { faBadgeCheck } from '@fortawesome/pro-solid-svg-icons/faBadgeCheck';
 import { faBan } from '@fortawesome/pro-solid-svg-icons/faBan';
+import { faBatteryBolt } from '@fortawesome/pro-solid-svg-icons/faBatteryBolt';
 import { faBox } from '@fortawesome/pro-solid-svg-icons/faBox';
 import { faBoxArchive } from '@fortawesome/pro-solid-svg-icons/faBoxArchive';
 import { faBoxCircleCheck } from '@fortawesome/pro-solid-svg-icons/faBoxCircleCheck';
 import { faBoxOpen } from '@fortawesome/pro-solid-svg-icons/faBoxOpen';
 import { faBoxesStacked } from '@fortawesome/pro-solid-svg-icons/faBoxesStacked';
-import { faUpDownLeftRight } from '@fortawesome/pro-solid-svg-icons/faUpDownLeftRight';
 import { faCamera } from '@fortawesome/pro-solid-svg-icons/faCamera';
 import { faCartArrowDown } from '@fortawesome/pro-solid-svg-icons/faCartArrowDown';
 import { faChartLine } from '@fortawesome/pro-solid-svg-icons/faChartLine';
@@ -80,13 +80,10 @@ import { faComputerMouseScrollwheel } from '@fortawesome/pro-solid-svg-icons/faC
 import { faCrop } from '@fortawesome/pro-solid-svg-icons/faCrop';
 import { faCube } from '@fortawesome/pro-solid-svg-icons/faCube';
 import { faEquals } from '@fortawesome/pro-solid-svg-icons/faEquals';
-import { faFluxCapacitor } from '@fortawesome/pro-solid-svg-icons/faFluxCapacitor';
-import { faWineGlassCrack } from '@fortawesome/pro-solid-svg-icons/faWineGlassCrack';
-import { faBatteryBolt } from '@fortawesome/pro-solid-svg-icons/faBatteryBolt';
-import { faPaperPlane } from '@fortawesome/pro-solid-svg-icons/faPaperPlane';
-import { faFlaskRoundPotion } from '@fortawesome/pro-solid-svg-icons/faFlaskRoundPotion';
 import { faExchange } from '@fortawesome/pro-solid-svg-icons/faExchange';
 import { faFlag } from '@fortawesome/pro-solid-svg-icons/faFlag';
+import { faFlaskRoundPotion } from '@fortawesome/pro-solid-svg-icons/faFlaskRoundPotion';
+import { faFluxCapacitor } from '@fortawesome/pro-solid-svg-icons/faFluxCapacitor';
 import { faGlobe } from '@fortawesome/pro-solid-svg-icons/faGlobe';
 import { faGreaterThanEqual } from '@fortawesome/pro-solid-svg-icons/faGreaterThanEqual';
 import { faHome } from '@fortawesome/pro-solid-svg-icons/faHome';
@@ -98,6 +95,7 @@ import { faLuggageCart } from '@fortawesome/pro-solid-svg-icons/faLuggageCart';
 import { faMinus } from '@fortawesome/pro-solid-svg-icons/faMinus';
 import { faNotEqual } from '@fortawesome/pro-solid-svg-icons/faNotEqual';
 import { faNoteSticky } from '@fortawesome/pro-solid-svg-icons/faNoteSticky';
+import { faPaperPlane } from '@fortawesome/pro-solid-svg-icons/faPaperPlane';
 import { faPen } from '@fortawesome/pro-solid-svg-icons/faPen';
 import { faPeopleCarry as fasPeopleCarry } from '@fortawesome/pro-solid-svg-icons/faPeopleCarry';
 import { faPlus } from '@fortawesome/pro-solid-svg-icons/faPlus';
@@ -110,14 +108,15 @@ import { faTags } from '@fortawesome/pro-solid-svg-icons/faTags';
 import { faTriangleExclamation } from '@fortawesome/pro-solid-svg-icons/faTriangleExclamation';
 import { faTruck } from '@fortawesome/pro-solid-svg-icons/faTruck';
 import { faTruckRampBox } from '@fortawesome/pro-solid-svg-icons/faTruckRampBox';
+import { faUpDownLeftRight } from '@fortawesome/pro-solid-svg-icons/faUpDownLeftRight';
 import { faUser } from '@fortawesome/pro-solid-svg-icons/faUser';
 import { faUsersGear } from '@fortawesome/pro-solid-svg-icons/faUsersGear';
 import { faWatch } from '@fortawesome/pro-solid-svg-icons/faWatch';
 import { faWebhook } from '@fortawesome/pro-solid-svg-icons/faWebhook';
+import { faWineGlassCrack } from '@fortawesome/pro-solid-svg-icons/faWineGlassCrack';
 import { faXmark as fasXmark } from '@fortawesome/pro-solid-svg-icons/faXmark';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import styled, { useTheme } from '@xstyled/styled-components';
-import { th } from '@xstyled/styled-components';
+import styled, { useTheme, th } from '@xstyled/styled-components';
 export var iconDictionary = {
     greaterThan: faAngleRight,
     startsWith: faAnglesRight,
@@ -255,7 +254,7 @@ var Icon = function (_a) {
     var theme = useTheme();
     var colorFill = fill && th.color(fill)({ theme: theme }); // React.Text wont return number here
     var colorSecondary = secondaryColor && th.color(secondaryColor)({ theme: theme });
-    var namedIcon = (typeof icon == 'string' && (iconDictionary === null || iconDictionary === void 0 ? void 0 : iconDictionary[icon])) || false;
+    var namedIcon = (typeof icon === 'string' && (iconDictionary === null || iconDictionary === void 0 ? void 0 : iconDictionary[icon])) || false;
     var iconProp = React.useMemo(function () {
         if (namedIcon) {
             return Array.isArray(namedIcon) ? namedIcon[0] : namedIcon;
@@ -263,6 +262,10 @@ var Icon = function (_a) {
         return [iconPrefixMap[style], icon];
     }, [icon, style, namedIcon]);
     var flipProp = (namedIcon && Array.isArray(namedIcon) && namedIcon[1]) || undefined;
+    if (!namedIcon && typeof icon === 'function') {
+        var IconComponent = icon;
+        return _jsx(IconComponent, { width: size, height: size, fill: colorFill, stroke: colorSecondary });
+    }
     return (_jsx(FaIconSizing, { size: size, className: className !== null && className !== void 0 ? className : '', "$colorSecondary": colorSecondary, "$fixedWidth": fixedWidth, children: _jsx(FontAwesomeIcon, { color: colorFill, flip: flipProp, icon: iconProp, className: "faIcon ".concat(fixedWidth ? 'fa-fw' : '', " ").concat(spinning ? 'fa-spin' : '') }) }));
 };
 export default Icon;

package/ui/Elements/Icon/icons/Valuable.d.ts

@@ -1,3 +1,2 @@
-import { type FC } from 'react';
-import { type SvgProps } from '../types';
-export declare const Valuable: FC<SvgProps>;
+import { type FC, type SVGProps } from 'react';
+export declare const Valuable: FC<SVGProps<SVGSVGElement>>;

package/ui/Elements/Icon/icons/Valuable.js

@@ -10,4 +10,4 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export var Valuable = function (props) { return (_jsxs("svg", __assign({ width: "100", height: "100", viewBox: "0 0 24 24", stroke: "black", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [_jsx("path", { d: "M2 9L6 2H18L22 9L12 22L2 9Z", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M12 22L8 9M12 22L16 9M2 9H22", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6 2L12 9L18 2", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
+export var Valuable = function (props) { return (_jsxs("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", stroke: "black", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [_jsx("path", { d: "M2 9L6 2H18L22 9L12 22L2 9Z", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M12 22L8 9M12 22L16 9M2 9H22", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6 2L12 9L18 2", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };

package/ui/Elements/Icon/stories/BadgeIcon.stories.d.ts

@@ -7,7 +7,7 @@ declare const meta: {
     } & import("..").IconProps) => JSX.Element;
     decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react/dist/types-a5624094").R, {
         badge: "warning";
-        icon: string;
+        icon: string | import("react").FC<import("react").SVGProps<SVGSVGElement>>;
         style?: "normal" | "light" | "solid" | undefined;
         fill?: string | undefined;
         size?: string | number | undefined;

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

@@ -2,7 +2,7 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: import("../types").IconProps) => JSX.Element;
+    component: import("react").FC<import("../types").IconProps>;
     tags: string[];
     argTypes: {};
 };
@@ -14,3 +14,4 @@ export declare const SmallExpedition: Story;
 export declare const BigExpedition: Story;
 export declare const ExpeditionPink: Story;
 export declare const ExpeditionPinkSolid: Story;
+export declare const CustomIcon: Story;

package/ui/Elements/Icon/stories/Icon.stories.js

@@ -1,48 +1,57 @@
 import { Icon } from '../';
+import { Valuable } from '../icons/Valuable';
 var meta = {
     title: 'Elements/Icon',
     component: Icon,
     tags: ['autodocs'],
-    argTypes: {},
+    argTypes: {}
 };
 export default meta;
 export var Expedition = {
     args: {
         icon: 'expedition',
-        size: '40px',
-    },
+        size: '40px'
+    }
 };
 export var Spinning = {
     args: {
         icon: 'expedition',
         size: '40px',
         spinning: true
-    },
+    }
 };
 export var SmallExpedition = {
     args: {
         icon: 'expedition',
-        size: '20px',
-    },
+        size: '20px'
+    }
 };
 export var BigExpedition = {
     args: {
         icon: 'expedition',
-        size: '80px',
-    },
+        size: '80px'
+    }
 };
 export var ExpeditionPink = {
     args: {
         icon: 'expedition',
         fill: 'pink',
-        size: '40px',
-    },
+        size: '40px'
+    }
 };
 export var ExpeditionPinkSolid = {
     args: {
         icon: 'expedition',
         style: 'solid',
         fill: 'pink',
-        size: '40px',
-    },
+        size: '40px'
+    }
+};
+export var CustomIcon = {
+    args: {
+        icon: Valuable,
+        size: '60px',
+        fill: 'pink',
+        secondaryColor: 'red1'
+    }
 };

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

@@ -1,6 +1,6 @@
-import { MouseEventHandler } from 'react';
+import type { MouseEventHandler, SVGProps } from 'react';
 export type IconProps = {
-    icon: string;
+    icon: string | React.FC<SVGProps<SVGSVGElement>>;
     style?: 'normal' | 'light' | 'solid';
     fill?: string;
     size?: number | string;

package/ui/Elements/Pagination/styled.d.ts

@@ -3,10 +3,10 @@ export declare const Wrapper: import("styled-components").StyledComponent<(props
 export declare const Btn: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {
     disabled: boolean;
 }, never>;
-export declare const ArrowIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: import("../Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
+export declare const ArrowIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/system").Theme, {
     isActive: boolean;
 }, never>;
-export declare const GoIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: import("../Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
+export declare const GoIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/system").Theme, {
     isActive: boolean;
 }, never>;
 export declare const DotsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Forms/Checkbox/styles.d.ts

@@ -2,7 +2,7 @@
 export declare const FakeInput: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     size: string | number;
 }, never>;
-export declare const CheckIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: import("../../Elements/Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
+export declare const CheckIcon: import("styled-components").StyledComponent<import("react").FC<import("../../Elements/Icon").IconProps>, import("@xstyled/system").Theme, {
     size: string | number;
 }, never>;
 export declare const CheckboxWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {