@mailstep/design-system 0.8.34 → 0.8.36

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

@@ -90,32 +90,60 @@ import { Weight } from "./Weight.js";
 import { ArrowUpRightDownLeft } from "./ArrowUpRightDownLeft.js";
 import { Filter } from "./Filter.js";
 import { Sort } from "./Sort.js";
+import { ArrowDownLine } from "./ArrowDownLine.js";
+import { Backspace } from "./Backspace.js";
+import { BanCircle } from "./BanCircle.js";
+import { Calculator } from "./Calculator.js";
+import { CloudUpload } from "./CloudUpload.js";
+import { DangerCircle } from "./DangerCircle.js";
+import { Eco } from "./Eco.js";
+import { Exclamation } from "./Exclamation.js";
+import { EyeOpen } from "./EyeOpen.js";
+import { Key } from "./Key.js";
+import { Layers } from "./Layers.js";
+import { MailwrapLogo } from "./MailwrapLogo.js";
+import { NoImage } from "./NoImage.js";
+import { Reject } from "./Reject.js";
+import { Share } from "./Share.js";
+import { Toolbox } from "./Toolbox.js";
+import { UserHeader } from "./UserHeader.js";
+import { WarehouseShelves } from "./WarehouseShelves.js";
+import { TickCircle } from "./TickCircle.js";
 //#region packages/ui/Elements/Icon/icons/index.ts
 var icons_exports = /* @__PURE__ */ __exportAll({
 	Add: () => Add,
 	AddPhoto: () => AddPhoto,
 	Admin: () => Admin,
 	ArrowDown: () => ArrowDown,
+	ArrowDownLine: () => ArrowDownLine,
 	ArrowForward: () => ArrowForward,
 	ArrowUp: () => ArrowUp,
 	ArrowUpRightDownLeft: () => ArrowUpRightDownLeft,
 	ArrowsLeftRight: () => ArrowsLeftRight,
 	ArrowsUpDown: () => ArrowsUpDown,
+	Backspace: () => Backspace,
+	BanCircle: () => BanCircle,
 	BarcodeScan: () => BarcodeScan,
 	Box: () => Box,
+	Calculator: () => Calculator,
 	Calendar: () => Calendar,
 	Cancel: () => Cancel,
 	CheckedBox: () => CheckedBox,
 	CircleHalfStroke: () => CircleHalfStroke,
+	CloudUpload: () => CloudUpload,
 	Company: () => Company,
 	Complaint: () => Complaint,
 	Consolidation: () => Consolidation,
 	Container: () => Container,
+	DangerCircle: () => DangerCircle,
 	Dashboard: () => Dashboard,
 	Desktop: () => Desktop,
 	Dispatch: () => Dispatch,
+	Eco: () => Eco,
 	EmptyRack: () => EmptyRack,
+	Exclamation: () => Exclamation,
 	Expeditions: () => Expeditions,
+	EyeOpen: () => EyeOpen,
 	Filter: () => Filter,
 	FlagCZ: () => FlagCZ,
 	FlagEL: () => FlagEL,
@@ -140,18 +168,22 @@ var icons_exports = /* @__PURE__ */ __exportAll({
 	Integrations: () => Integrations,
 	Inventory: () => Inventory,
 	Inventory2: () => Inventory2,
+	Key: () => Key,
+	Layers: () => Layers,
 	Layout: () => Layout,
 	Link: () => Link,
 	Liquid: () => Liquid,
 	Location: () => Location,
 	Logout1: () => Logout1,
 	MachinePackingForbidden: () => MachinePackingForbidden,
+	MailwrapLogo: () => MailwrapLogo,
 	MakePhoto: () => MakePhoto,
 	MenuItems: () => MenuItems,
 	Message: () => Message,
 	MobileCancel: () => MobileCancel,
 	MobilePhone: () => MobilePhone,
 	Moon: () => Moon,
+	NoImage: () => NoImage,
 	Notification2: () => Notification2,
 	OpenBox: () => OpenBox,
 	Pallet: () => Pallet,
@@ -163,17 +195,21 @@ var icons_exports = /* @__PURE__ */ __exportAll({
 	Puzzle1: () => Puzzle1,
 	QRCode: () => QRCode,
 	Rack: () => Rack,
+	Reject: () => Reject,
 	Reload: () => Reload,
 	Return: () => Return,
 	Rows: () => Rows,
 	Settings2: () => Settings2,
+	Share: () => Share,
 	ShieldUser: () => ShieldUser,
 	ShoppingBag: () => ShoppingBag,
 	Sort: () => Sort,
 	Sun: () => Sun,
 	ThreeDots: () => ThreeDots,
+	TickCircle: () => TickCircle,
 	ToastError: () => ToastError,
 	ToastSuccess: () => ToastSuccess,
+	Toolbox: () => Toolbox,
 	Transfer: () => Transfer,
 	TrashBin: () => TrashBin,
 	Truck: () => Truck,
@@ -181,8 +217,10 @@ var icons_exports = /* @__PURE__ */ __exportAll({
 	TwoCheckedBoxes: () => TwoCheckedBoxes,
 	TwoUsers: () => TwoUsers,
 	UserCowboy: () => UserCowboy,
+	UserHeader: () => UserHeader,
 	Valuable: () => Valuable,
+	WarehouseShelves: () => WarehouseShelves,
 	Weight: () => Weight
 });
 //#endregion
-export { Add, AddPhoto, Admin, ArrowDown, ArrowForward, ArrowUp, ArrowUpRightDownLeft, ArrowsLeftRight, ArrowsUpDown, BarcodeScan, Box, Calendar, Cancel, CheckedBox, CircleHalfStroke, Company, Complaint, Consolidation, Container, Dashboard, Desktop, Dispatch, EmptyRack, Expeditions, Filter, FlagCZ, FlagEL, FlagESP, FlagHU, FlagITA, FlagNL, FlagRUS, FlagSVK, FlagUK, FlagUSA, Foldable, Fragile, Gift, Group, HamburgerMenu, HelpCircle1, HorizontalLines, ImagePlaceholder, Income, Info, Integrations, Inventory, Inventory2, Layout, Link, Liquid, Location, Logout1, MachinePackingForbidden, MakePhoto, MenuItems, Message, MobileCancel, MobilePhone, Moon, Notification2, OpenBox, Pallet, Plus1, Print, Product, Products, Profile, Puzzle1, QRCode, Rack, Reload, Return, Rows, Settings2, ShieldUser, ShoppingBag, Sort, Sun, ThreeDots, ToastError, ToastSuccess, Transfer, TrashBin, Truck, TwoBoxes, TwoCheckedBoxes, TwoUsers, UserCowboy, Valuable, Weight, icons_exports };
+export { Add, AddPhoto, Admin, ArrowDown, ArrowDownLine, ArrowForward, ArrowUp, ArrowUpRightDownLeft, ArrowsLeftRight, ArrowsUpDown, Backspace, BanCircle, BarcodeScan, Box, Calculator, Calendar, Cancel, CheckedBox, CircleHalfStroke, CloudUpload, Company, Complaint, Consolidation, Container, DangerCircle, Dashboard, Desktop, Dispatch, Eco, EmptyRack, Exclamation, Expeditions, EyeOpen, Filter, FlagCZ, FlagEL, FlagESP, FlagHU, FlagITA, FlagNL, FlagRUS, FlagSVK, FlagUK, FlagUSA, Foldable, Fragile, Gift, Group, HamburgerMenu, HelpCircle1, HorizontalLines, ImagePlaceholder, Income, Info, Integrations, Inventory, Inventory2, Key, Layers, Layout, Link, Liquid, Location, Logout1, MachinePackingForbidden, MailwrapLogo, MakePhoto, MenuItems, Message, MobileCancel, MobilePhone, Moon, NoImage, Notification2, OpenBox, Pallet, Plus1, Print, Product, Products, Profile, Puzzle1, QRCode, Rack, Reject, Reload, Return, Rows, Settings2, Share, ShieldUser, ShoppingBag, Sort, Sun, ThreeDots, TickCircle, ToastError, ToastSuccess, Toolbox, Transfer, TrashBin, Truck, TwoBoxes, TwoCheckedBoxes, TwoUsers, UserCowboy, UserHeader, Valuable, WarehouseShelves, Weight, icons_exports };

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

@@ -1,5 +1,5 @@
 import Icon from './Icon';
-export type { IconProps } from './types';
+export type { IconProps, IconName } from './types';
 export * from './icons';
 export { iconDictionary } from './Icon';
 export { Icon };

package/ui/Elements/Icon/index.js

@@ -89,9 +89,28 @@ import { Weight } from "./icons/Weight.js";
 import { ArrowUpRightDownLeft } from "./icons/ArrowUpRightDownLeft.js";
 import { Filter } from "./icons/Filter.js";
 import { Sort } from "./icons/Sort.js";
+import { ArrowDownLine } from "./icons/ArrowDownLine.js";
+import { Backspace } from "./icons/Backspace.js";
+import { BanCircle } from "./icons/BanCircle.js";
+import { Calculator } from "./icons/Calculator.js";
+import { CloudUpload } from "./icons/CloudUpload.js";
+import { DangerCircle } from "./icons/DangerCircle.js";
+import { Eco } from "./icons/Eco.js";
+import { Exclamation } from "./icons/Exclamation.js";
+import { EyeOpen } from "./icons/EyeOpen.js";
+import { Key } from "./icons/Key.js";
+import { Layers } from "./icons/Layers.js";
+import { MailwrapLogo } from "./icons/MailwrapLogo.js";
+import { NoImage } from "./icons/NoImage.js";
+import { Reject } from "./icons/Reject.js";
+import { Share } from "./icons/Share.js";
+import { Toolbox } from "./icons/Toolbox.js";
+import { UserHeader } from "./icons/UserHeader.js";
+import { WarehouseShelves } from "./icons/WarehouseShelves.js";
+import { TickCircle } from "./icons/TickCircle.js";
 import "./icons/index.js";
 import Icon, { iconDictionary } from "./Icon.js";
 //#region packages/ui/Elements/Icon/index.ts
 var Icon_default = Icon;
 //#endregion
-export { Add, AddPhoto, Admin, ArrowDown, ArrowForward, ArrowUp, ArrowUpRightDownLeft, ArrowsLeftRight, ArrowsUpDown, BarcodeScan, Box, Calendar, Cancel, CheckedBox, CircleHalfStroke, Company, Complaint, Consolidation, Container, Dashboard, Desktop, Dispatch, EmptyRack, Expeditions, Filter, FlagCZ, FlagEL, FlagESP, FlagHU, FlagITA, FlagNL, FlagRUS, FlagSVK, FlagUK, FlagUSA, Foldable, Fragile, Gift, Group, HamburgerMenu, HelpCircle1, HorizontalLines, Icon, ImagePlaceholder, Income, Info, Integrations, Inventory, Inventory2, Layout, Link, Liquid, Location, Logout1, MachinePackingForbidden, MakePhoto, MenuItems, Message, MobileCancel, MobilePhone, Moon, Notification2, OpenBox, Pallet, Plus1, Print, Product, Products, Profile, Puzzle1, QRCode, Rack, Reload, Return, Rows, Settings2, ShieldUser, ShoppingBag, Sort, Sun, ThreeDots, ToastError, ToastSuccess, Transfer, TrashBin, Truck, TwoBoxes, TwoCheckedBoxes, TwoUsers, UserCowboy, Valuable, Weight, Icon_default as default, iconDictionary };
+export { Add, AddPhoto, Admin, ArrowDown, ArrowDownLine, ArrowForward, ArrowUp, ArrowUpRightDownLeft, ArrowsLeftRight, ArrowsUpDown, Backspace, BanCircle, BarcodeScan, Box, Calculator, Calendar, Cancel, CheckedBox, CircleHalfStroke, CloudUpload, Company, Complaint, Consolidation, Container, DangerCircle, Dashboard, Desktop, Dispatch, Eco, EmptyRack, Exclamation, Expeditions, EyeOpen, Filter, FlagCZ, FlagEL, FlagESP, FlagHU, FlagITA, FlagNL, FlagRUS, FlagSVK, FlagUK, FlagUSA, Foldable, Fragile, Gift, Group, HamburgerMenu, HelpCircle1, HorizontalLines, Icon, ImagePlaceholder, Income, Info, Integrations, Inventory, Inventory2, Key, Layers, Layout, Link, Liquid, Location, Logout1, MachinePackingForbidden, MailwrapLogo, MakePhoto, MenuItems, Message, MobileCancel, MobilePhone, Moon, NoImage, Notification2, OpenBox, Pallet, Plus1, Print, Product, Products, Profile, Puzzle1, QRCode, Rack, Reject, Reload, Return, Rows, Settings2, Share, ShieldUser, ShoppingBag, Sort, Sun, ThreeDots, TickCircle, ToastError, ToastSuccess, Toolbox, Transfer, TrashBin, Truck, TwoBoxes, TwoCheckedBoxes, TwoUsers, UserCowboy, UserHeader, Valuable, WarehouseShelves, Weight, Icon_default as default, iconDictionary };

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

@@ -11,10 +11,14 @@ declare const meta: {
         fill?: string | undefined;
         stroke?: string | undefined;
         size?: number | string | undefined;
+        width?: number | string | undefined;
+        height?: number | string | undefined;
         className?: string | undefined;
         fixedWidth?: boolean | undefined;
         spinning?: boolean | undefined;
         secondaryColor?: string | undefined;
+        onClick?: React.MouseEventHandler<SVGSVGElement> | undefined;
+        cursor?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
     tags: string[];
     argTypes: {};

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

@@ -1,14 +1,19 @@
 import type { MouseEventHandler } from 'react';
+export type IconName = string;
 export type IconProps = {
     icon: string;
     style?: 'normal' | 'light' | 'solid';
     fill?: string;
     stroke?: string;
     size?: number | string;
+    width?: number | string;
+    height?: number | string;
     className?: string;
     fixedWidth?: boolean;
     spinning?: boolean;
     secondaryColor?: string;
+    onClick?: React.MouseEventHandler<SVGSVGElement>;
+    cursor?: string;
 };
 export interface SvgProps {
     width?: number | string;

package/ui/Elements/Label/Label.d.ts

@@ -1,4 +1,4 @@
-export declare const Label: import("styled-components").StyledComponent<"label", import("@xstyled/system").Theme, {
+export declare const Label: import("styled-components").StyledComponent<"label", import("@xstyled/styled-components").Theme, {
     fontSize?: number | string;
 }, never>;
-export declare const FieldLabel: import("styled-components").StyledComponent<"label", import("@xstyled/system").Theme, {}, never>;
+export declare const FieldLabel: import("styled-components").StyledComponent<"label", import("@xstyled/styled-components").Theme, {}, never>;

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

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: import("styled-components").StyledComponent<"label", import("@xstyled/system").Theme, {
+    component: import("styled-components").StyledComponent<"label", import("@xstyled/styled-components").Theme, {
         fontSize?: number | string;
     }, never>;
     tags: string[];

package/ui/Elements/Logo/Logo.js

@@ -10,6 +10,7 @@ import logoMailstepWhite from "./assets/mailstep/mailstep_white.svg";
 import logoMailstock from "./assets/mailstock/mailstock.svg";
 import logoMailwise from "./assets/mailwise/mailwiseLogo.svg";
 import logoMailwiseSmall from "./assets/mailwise/mailwiseLogoSmall.svg";
+import logoMailwiseWhiteBg from "./assets/mailwise/mailwiseLogoWhiteBg.svg";
 import logoMailwrap from "./assets/mailwrap/mailwrapLogo.svg";
 import logoMailwrapSmall from "./assets/mailwrap/mailwrapLogoSmall.svg";
 import warehouseManager2 from "./assets/warehouse/manager2.svg";
@@ -30,6 +31,7 @@ const variantMap = {
 	},
 	mailwise: {
 		black: logoMailwise,
+		white: logoMailwiseWhiteBg,
 		s: logoMailwiseSmall
 	},
 	mailstock: { black: logoMailstock },

package/ui/Elements/Logo/assets/mailwise/mailwiseLogoWhiteBg.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="143.525 169.971 204.219 43.361" width="204.219" height="43.361" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <clipPath clipPathUnits="userSpaceOnUse" id="clipPath18">
+      <path d="M 0,595.28 H 595.28 V 0 H 0 Z" id="path16" />
+    </clipPath>
+  </defs>
+  <g id="g10" transform="matrix(1.333333, 0, 0, -1.333333, -151.218994, 588.503967)">
+    <g id="g12">
+      <g id="g14" clip-path="url(#clipPath18)">
+        <g id="g20" transform="translate(242.1812,281.8203)">
+          <path
+            d="m 0,0 v 11.396 c 0,0.793 -0.088,2.202 -1.188,2.202 -1.584,0 -1.76,-2.069 -1.76,-3.213 V 0 h -7.614 v 11.309 c 0,0.924 -0.043,2.113 -1.232,2.113 -1.76,0 -1.716,-1.937 -1.716,-3.213 V 0 h -7.613 v 20.551 h 7.613 v -1.057 c 0,-0.792 -0.044,-1.584 -0.088,-2.376 1.188,2.244 2.508,3.872 5.237,3.872 2.904,0 4.401,-1.803 5.457,-4.268 0.88,2.508 2.244,4.268 5.104,4.268 1.321,0 2.641,-0.484 3.609,-1.363 C 7.437,18.13 7.613,16.15 7.613,14.082 V 0 Z"
+            style="fill:#ec2227;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path22" />
+        </g>
+        <g id="g24" transform="translate(262.3306,296.5176)">
+          <path
+            d="m 0,0 c -1.98,0 -1.936,-3.784 -1.936,-5.148 0,-1.145 0.088,-3.697 1.716,-3.697 2.025,0 1.804,3.96 1.804,5.325 C 1.584,-2.42 1.541,0 0,0 m 1.672,-14.697 c 0.089,1.143 0.177,2.332 0.265,3.476 -1.101,-2.201 -2.64,-3.917 -5.281,-3.917 -5.193,0 -6.25,6.865 -6.25,10.826 0,4.092 1.19,10.605 6.426,10.605 2.465,0 3.961,-1.628 4.929,-3.696 -0.089,1.1 -0.089,2.156 -0.22,3.257 H 9.33 v -20.551 z"
+            style="fill:#0C1F2F;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path26" />
+        </g>
+        <path
+          d="m 275.177,302.371 h 7.613 V 281.82 h -7.613 z m 3.829,1.936 c -2.464,0 -4.445,2.068 -4.445,4.489 0,2.42 2.024,4.4 4.445,4.4 2.42,0 4.445,-1.98 4.445,-4.4 0,-2.464 -1.981,-4.489 -4.445,-4.489"
+          style="fill:#0C1F2F;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path28" />
+        <path d="m 286.309,313.9 h 7.613 v -32.08 h -7.613 z"
+          style="fill:#0C1F2F;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path30" />
+        <g id="g32" transform="translate(319.707,281.8203)">
+          <path
+            d="M 0,0 H -7.525 L -9.109,12.321 -11.441,0 h -7.481 l -5.105,20.551 h 7.48 c 0.748,-4.137 1.629,-8.23 1.938,-12.41 0.396,4.18 1.408,8.317 2.332,12.41 h 6.513 c 0.703,-4.137 1.452,-8.23 1.803,-12.41 0.617,4.18 1.453,8.273 2.334,12.41 h 7.611 z"
+            style="fill:#0C1F2F;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path34" />
+        </g>
+        <path
+          d="m 327.447,302.371 h 7.613 V 281.82 h -7.613 z m 3.83,1.936 c -2.465,0 -4.445,2.068 -4.445,4.489 0,2.42 2.023,4.4 4.445,4.4 2.42,0 4.444,-1.98 4.444,-4.4 0,-2.464 -1.981,-4.489 -4.444,-4.489"
+          style="fill:#0C1F2F;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path36" />
+        <g id="g38" transform="translate(350.4609,295.5498)">
+          <path
+            d="m 0,0 c -0.791,0.792 -1.936,1.804 -3.123,1.804 -0.572,0 -1.189,-0.308 -1.189,-0.968 0,-2.464 7.261,-1.584 7.261,-7.789 0,-4.665 -3.961,-7.217 -8.273,-7.217 -2.86,0 -4.84,0.836 -7.305,2.156 l 2.772,5.677 c 0.923,-0.969 2.421,-2.156 3.83,-2.156 0.66,0 1.496,0.308 1.496,1.099 0,2.114 -7.395,1.541 -7.395,7.614 0,4.577 4.313,7.041 8.449,7.041 2.202,0 4.182,-0.703 6.118,-1.672 z"
+            style="fill:#0C1F2F;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path40" />
+        </g>
+        <g id="g42" transform="translate(366.6523,294.582)">
+          <path
+            d="M 0,0 C -0.043,1.1 -0.439,2.596 -1.805,2.596 -3.168,2.596 -3.52,1.1 -3.564,0 Z m 7.262,-5.854 c -1.057,-4.796 -4.358,-7.348 -9.155,-7.348 -6.293,0 -9.373,4.4 -9.373,10.341 0,5.809 3.346,11.046 9.594,11.046 6.293,0 9.242,-5.149 9.242,-10.87 0,-0.484 -0.045,-0.924 -0.045,-1.408 H -3.652 c 0,-1.144 0.175,-3.169 1.759,-3.169 0.881,0 1.541,0.616 1.717,1.453 z"
+            style="fill:#0C1F2F;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path44" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

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

@@ -1,14 +1,14 @@
-export declare const Wrapper: 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 Btn: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {
+export declare const Wrapper: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/styled-components").Theme, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, "color">;
+export declare const Btn: import("styled-components").StyledComponent<"button", import("@xstyled/styled-components").Theme, {
     disabled: boolean;
 }, never>;
-export declare const ArrowIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/system").Theme, {
+export declare const ArrowIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/styled-components").Theme, {
     isActive: boolean;
 }, never>;
-export declare const GoIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/system").Theme, {
+export declare const GoIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/styled-components").Theme, {
     isActive: boolean;
 }, never>;
-export declare const DotsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const PageBtn: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {
+export declare const DotsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const PageBtn: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {
     isCurrent: boolean;
 }, never>;

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

@@ -1,9 +1,9 @@
-export declare const StyledProgressBar: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const StyledProgressBar: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     status: string | null | undefined;
     variant?: "normal" | "thin";
 }, never>;
-export declare const Progress: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const Progress: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     progress: number;
     status: string | null | undefined;
 }, never>;
-export declare const ProgressDescription: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
+export declare const ProgressDescription: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Elements/Select/components/SelectedIndicator.d.ts

@@ -1,2 +1,2 @@
-declare const SelectedIndicator: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+declare const SelectedIndicator: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
 export default SelectedIndicator;

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

@@ -1,5 +1,5 @@
 import ReactSelect from 'react-select';
 import AsyncSelect from 'react-select/async';
-export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const StyledReactSelect: import("styled-components").StyledComponent<ReactSelect, import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
-export declare const StyledAsyncSelect: import("styled-components").StyledComponent<AsyncSelect, import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const StyledReactSelect: import("styled-components").StyledComponent<ReactSelect, import("@xstyled/styled-components").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
+export declare const StyledAsyncSelect: import("styled-components").StyledComponent<AsyncSelect, import("@xstyled/styled-components").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;

package/ui/Elements/SimpleLink/SimpleLink.d.ts

@@ -17,5 +17,5 @@ export type Props = {
     $decorate?: boolean;
     variant?: TextVariant;
 };
-declare const StyledLink: import("styled-components").StyledComponent<typeof ReactLink, import("@xstyled/system").Theme, Props, never>;
+declare const StyledLink: import("styled-components").StyledComponent<typeof ReactLink, import("@xstyled/styled-components").Theme, Props, never>;
 export default StyledLink;

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

@@ -1,4 +1,4 @@
-export declare const Svg: import("styled-components").StyledComponent<"svg", import("@xstyled/system").Theme, {
+export declare const Svg: import("styled-components").StyledComponent<"svg", import("@xstyled/styled-components").Theme, {
     $variant: "default" | "sm";
 }, never>;
-export declare const Circle: import("styled-components").StyledComponent<"circle", import("@xstyled/system").Theme, {}, never>;
+export declare const Circle: import("styled-components").StyledComponent<"circle", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Elements/Table/Table.d.ts

@@ -1,6 +1,6 @@
-export declare const Table: import("styled-components").StyledComponent<"table", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
-export declare const Tr: import("styled-components").StyledComponent<"tr", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
-export declare const Td: import("styled-components").StyledComponent<"td", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
-export declare const Th: import("styled-components").StyledComponent<"th", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
-export declare const Tbody: import("styled-components").StyledComponent<"tbody", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
-export declare const Thead: import("styled-components").StyledComponent<"thead", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
+export declare const Table: import("styled-components").StyledComponent<"table", import("@xstyled/styled-components").Theme, import("@xstyled/util").Props<import("@xstyled/styled-components").Theme> & import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, never>;
+export declare const Tr: import("styled-components").StyledComponent<"tr", import("@xstyled/styled-components").Theme, import("@xstyled/util").Props<import("@xstyled/styled-components").Theme> & import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, never>;
+export declare const Td: import("styled-components").StyledComponent<"td", import("@xstyled/styled-components").Theme, import("@xstyled/util").Props<import("@xstyled/styled-components").Theme> & import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, never>;
+export declare const Th: import("styled-components").StyledComponent<"th", import("@xstyled/styled-components").Theme, import("@xstyled/util").Props<import("@xstyled/styled-components").Theme> & import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, never>;
+export declare const Tbody: import("styled-components").StyledComponent<"tbody", import("@xstyled/styled-components").Theme, import("@xstyled/util").Props<import("@xstyled/styled-components").Theme> & import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, never>;
+export declare const Thead: import("styled-components").StyledComponent<"thead", import("@xstyled/styled-components").Theme, import("@xstyled/util").Props<import("@xstyled/styled-components").Theme> & import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, never>;

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

@@ -1,6 +1,6 @@
 declare const meta: {
     title: string;
-    component: import("styled-components").StyledComponent<"table", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
+    component: import("styled-components").StyledComponent<"table", import("@xstyled/styled-components").Theme, import("@xstyled/util").Props<import("@xstyled/styled-components").Theme> & import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, never>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Tag/Tag.d.ts

@@ -1,3 +1,3 @@
 import type { Props } from './types';
-declare const Tag: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, Props, never>;
+declare const Tag: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, Props, never>;
 export default Tag;

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

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, import("../types").Props, never>;
+    component: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, import("../types").Props, never>;
     tags: string[];
     argTypes: {};
 };

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

@@ -1,8 +1,8 @@
-export declare const Title: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
-export declare const Text: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
-export declare const ContentWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const CloseWrapper: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const Title: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Text: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const CloseWrapper: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     autoClose?: number;
     fill: string;
 }, never>;

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

@@ -1,10 +1,10 @@
-export declare const FakeInput: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const FakeInput: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     size: string | number;
 }, never>;
-export declare const CheckIcon: import("styled-components").StyledComponent<import("react").FC<import("../..").IconProps>, import("@xstyled/system").Theme, {
+export declare const CheckIcon: import("styled-components").StyledComponent<import("react").FC<import("../..").IconProps>, import("@xstyled/styled-components").Theme, {
     size: string | number;
 }, never>;
-export declare const CheckboxWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const CheckboxWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     size: string | number;
 }, never>;
-export declare const Label: import("styled-components").StyledComponent<"label", import("@xstyled/system").Theme, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"label", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Forms/Input/Input.js

@@ -39,11 +39,7 @@ const Input = ({ appearance = "primary", type, name, label, value, icon, variant
 	]);
 	const handleBlur = useCallback((event) => {
 		onBlur?.(event);
-		if (forceFocus) {
-			const relatedTag = event.relatedTarget?.tagName?.toLowerCase();
-			const relatedType = event.relatedTarget?.type?.toLowerCase();
-			if (!(relatedTag === "input" && allowedInputTypes.includes(relatedType)) && !(relatedTag === "textarea")) event.target?.focus();
-		}
+		if (forceFocus && (event.relatedTarget?.tagName?.toLowerCase() !== "input" || !allowedInputTypes.includes(event.relatedTarget?.type?.toLowerCase()))) event.target?.focus();
 	}, [forceFocus, onBlur]);
 	const handleKeyDown = useCallback((event) => {
 		if (event.key === "Enter") onEnter?.();

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

@@ -17,24 +17,24 @@ type InputIconProps = {
     hasValue?: boolean;
     $isInvalid?: boolean;
 };
-export declare const InputIcon: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, InputIconProps, never>;
-export declare const ClearableInputIcon: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, InputIconProps, never>;
-export declare const IconsController: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const StyledInput: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, {
+export declare const InputIcon: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, InputIconProps, never>;
+export declare const ClearableInputIcon: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, InputIconProps, never>;
+export declare const IconsController: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const StyledInput: import("styled-components").StyledComponent<"input", import("@xstyled/styled-components").Theme, {
     as: string;
 } & StyledInputProps, "as">;
-export declare const InputWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Suffix: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const InputWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Suffix: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     $isPointer: boolean;
     $isInvalid: boolean;
 }, never>;
-export declare const InputRow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const InputRow: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     hasValue: boolean;
     disabled: boolean;
     $icon?: string;
     $isInvalid?: boolean;
     variant?: string;
 }, never>;
-export declare const Tooltip: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Tooltip: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
 export {};

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

@@ -1,10 +1,10 @@
-export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Item: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const PaintoverLayer: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Item: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const PaintoverLayer: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {
     disabled: boolean;
 }, never>;
-export declare const CenterDot: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
-export declare const StyledRadio: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, {
+export declare const CenterDot: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const StyledRadio: import("styled-components").StyledComponent<"input", import("@xstyled/styled-components").Theme, {
     disabled: boolean;
 }, never>;
-export declare const Label: import("styled-components").StyledComponent<"label", import("@xstyled/system").Theme, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"label", import("@xstyled/styled-components").Theme, {}, never>;

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

@@ -1,12 +1,12 @@
-export declare const IconWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const StyledTextArea: import("styled-components").StyledComponent<"textarea", import("@xstyled/system").Theme, {
+export declare const IconWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const StyledTextArea: import("styled-components").StyledComponent<"textarea", import("@xstyled/styled-components").Theme, {
     $resize?: string;
     $isInvalid?: boolean;
     disabled?: boolean;
 }, never>;
-export declare const TextAreaWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const BorderWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const TextAreaWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const BorderWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     $isInvalid?: boolean;
     disabled?: boolean;
 }, never>;
-export declare const InnerWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const InnerWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/ThemeProvider/themes/dark.d.ts

@@ -11,12 +11,16 @@ declare const darkTheme: {
         neutral20: string;
         neutral30: string;
         neutral300: string;
+        red10: string;
         red30: string;
+        green10: string;
+        dangerColor: string;
         lightGray1: string;
         lightGray2: string;
         lightGray3: string;
         lightGray4: string;
         lightGray6: string;
+        yellow10: string;
         blue1: string;
         blue3: string;
         blue10: string;
@@ -52,7 +56,6 @@ declare const darkTheme: {
         teal70: string;
         teal80: string;
         teal90: string;
-        green10: string;
         green20: string;
         green30: string;
         green50: string;
@@ -68,7 +71,6 @@ declare const darkTheme: {
         orange50: string;
         orange60: string;
         orange80: string;
-        yellow10: string;
         yellow20: string;
         yellow60: string;
         yellow70: string;
@@ -76,7 +78,6 @@ declare const darkTheme: {
         yellow90: string;
         yellow1: string;
         yellow2: string;
-        red10: string;
         red20: string;
         red50: string;
         red70: string;
@@ -85,7 +86,6 @@ declare const darkTheme: {
         red3: string;
         red60: string;
         red80: string;
-        dangerColor: string;
         purple20: string;
         purple40: string;
         purple50: string;

package/ui/ThemeProvider/themes/dark.js

@@ -15,12 +15,16 @@ const darkTheme = {
 		neutral20: "#2e475d",
 		neutral30: "#42505d",
 		neutral300: "#d6d9df",
+		red10: "#CF2013",
 		red30: "#8594A5",
+		green10: "#198038",
+		dangerColor: "#FFDAD1",
 		lightGray1: "#162C3F",
 		lightGray2: "#1a2b38",
 		lightGray3: "#7e8489",
 		lightGray4: "#7A90A1",
 		lightGray6: "#7A90A1",
+		yellow10: "#857000",
 		blue1: "#ffffff",
 		blue3: "#05111b",
 		blue10: "#2e475d",