@mailstep/design-system 0.8.28 → 0.8.29-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.28",
+  "version": "0.8.29-beta.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -60,6 +60,7 @@
     "@typescript-eslint/eslint-plugin": "^5.59.6",
     "@typescript-eslint/parser": "^5.59.6",
     "@xstyled/styled-components": "^3.8.0",
+    "@xstyled/system": "^3.8.0",
     "babel-loader": "^10.1.1",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
@@ -118,6 +119,7 @@
     "@lingui/react": "^5.0.0",
     "@popperjs/core": "^2.11.8",
     "@xstyled/styled-components": "^3.8.0",
+    "@xstyled/system": "^3.8.0",
     "immer": "^9.0.19",
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",

package/ui/Blocks/CommonGrid/components/ActionHead/components/ActionDropdownMenu.js

@@ -1,6 +1,6 @@
 import "react";
 import styled$1 from "@xstyled/styled-components";
-import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { th as th$1 } from "@xstyled/system";
 import { jsx } from "react/jsx-runtime";
 //#region packages/ui/Blocks/CommonGrid/components/ActionHead/components/ActionDropdownMenu.tsx
 const StyledDropdownWrap = styled$1.div`

package/ui/Blocks/CommonGrid/components/ActionHead/components/ActionDropdownSelect.js

@@ -3,7 +3,7 @@ import Popover from "../../../../Popover/index.js";
 import ActionDropdownMenu from "./ActionDropdownMenu.js";
 import React, { memo, useRef } from "react";
 import styled$1 from "@xstyled/styled-components";
-import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { th as th$1 } from "@xstyled/system";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Blocks/CommonGrid/components/ActionHead/components/ActionDropdownSelect.tsx

package/ui/Blocks/CommonGrid/components/ControlButtons/styles.js

@@ -1,7 +1,7 @@
 import Button from "../../../../Elements/Button/Button.js";
 import "../../../../Elements/Button/index.js";
 import styled$1 from "@xstyled/styled-components";
-import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { th as th$1 } from "@xstyled/system";
 //#region packages/ui/Blocks/CommonGrid/components/ControlButtons/styles.ts
 const ControlButtonsContainer = styled$1.div`
   display: flex;

package/ui/Blocks/CommonGrid/components/DropdownButton/DropdownButton.js

@@ -7,7 +7,7 @@ import "../../../../Elements/DropdownMenu/index.js";
 import { useClickOutside } from "../../../Modal/hooks/useClickOutside.js";
 import React, { useCallback, useState } from "react";
 import styled$1 from "@xstyled/styled-components";
-import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { th as th$1 } from "@xstyled/system";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Blocks/CommonGrid/components/DropdownButton/DropdownButton.tsx
 const ButtonWrapper = styled$1.div`

package/ui/Blocks/CommonGrid/components/IconList/IconList.js

@@ -1,7 +1,7 @@
 import Icon from "../../../../Elements/Icon/Icon.js";
 import React from "react";
 import styled$1 from "@xstyled/styled-components";
-import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { th as th$1 } from "@xstyled/system";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Blocks/CommonGrid/components/IconList/IconList.tsx
 const List = styled$1.ul`

package/ui/Blocks/CommonGrid/styles.js

@@ -1,7 +1,7 @@
 import "./utils/constants.js";
 import CommonGrid from "./CommonGrid.js";
 import styled$1, { x } from "@xstyled/styled-components";
-import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { th as th$1 } from "@xstyled/system";
 //#region packages/ui/Blocks/CommonGrid/styles.tsx
 const BottomWrapper = styled$1(x.div)`
   position: relative;

package/ui/Blocks/ImageList/components/ImageElement/styles.js

@@ -1,5 +1,5 @@
 import styled$1 from "@xstyled/styled-components";
-import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { th as th$1 } from "@xstyled/system";
 //#region packages/ui/Blocks/ImageList/components/ImageElement/styles.ts
 const Container = styled$1.div``;
 const Image = styled$1.img`

package/ui/Blocks/LoginPage/styles.js

@@ -1,8 +1,8 @@
 import Logo from "../../Elements/Logo/Logo.js";
-import mailship_default from "./assets/mailship.js";
 import styled$1, { th } from "@xstyled/styled-components";
+import mailship from "./assets/mailship.jpg";
 //#region packages/ui/Blocks/LoginPage/styles.ts
-const backgroundImageMap = { mailship: mailship_default };
+const backgroundImageMap = { mailship };
 const Wrapper = styled$1.div`
   position: absolute;
   top: 0;

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

@@ -3,7 +3,7 @@ import { Paragraph4 } from "../../../Elements/Typography/Typography.js";
 import "../../../Elements/Typography/index.js";
 import { useCallback } from "react";
 import styled$1, { css } from "@xstyled/styled-components";
-import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { th as th$1 } from "@xstyled/system";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Blocks/SideMenu/components/Footer.tsx

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

@@ -2,7 +2,7 @@ import { HamburgerMenu } from "../../../Elements/Icon/icons/HamburgerMenu.js";
 import { MobileCancel } from "../../../Elements/Icon/icons/MobileCancel.js";
 import "react";
 import { css, useTheme, x } from "@xstyled/styled-components";
-import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { th as th$1 } from "@xstyled/system";
 import { jsx } from "react/jsx-runtime";
 import styled$2 from "styled-components";
 //#region packages/ui/Blocks/SideMenu/components/HamburgerMenu.tsx

package/ui/Blocks/SideMenu/styles.js

@@ -2,7 +2,7 @@ import Icon from "../../Elements/Icon/Icon.js";
 import { createRgba } from "../../utils/CreateRgba/createRgba.js";
 import "./utils/constants.js";
 import styled$1, { css } from "@xstyled/styled-components";
-import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { th as th$1 } from "@xstyled/system";
 import { NavLink } from "react-router-dom";
 //#region packages/ui/Blocks/SideMenu/styles.ts
 const leftMenuAfter = css`

package/ui/Elements/DatePicker/Datetime/components/Timepicker.js

@@ -3,7 +3,7 @@ import { FooterRow } from "./FooterRow.js";
 import { FooterRowLabel } from "./FooterRowLabel.js";
 import { useCallback, useEffect, useState } from "react";
 import styled$1, { x } from "@xstyled/styled-components";
-import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { th as th$1 } from "@xstyled/system";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { i18n } from "@lingui/core";
 //#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker.tsx

package/ui/Elements/DatePicker/styles.js

@@ -1,5 +1,5 @@
 import styled$1, { x } from "@xstyled/styled-components";
-import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { th as th$1 } from "@xstyled/system";
 //#region packages/ui/Elements/DatePicker/styles.ts
 const DatePickerBase = styled$1(x.div)`
   .rdt {

package/ui/Elements/HighlightBox/HighlightBox.js

@@ -1,6 +1,6 @@
 import "react";
 import styled$1, { useTheme } from "@xstyled/styled-components";
-import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { th as th$1 } from "@xstyled/system";
 import { jsx } from "react/jsx-runtime";
 //#region packages/ui/Elements/HighlightBox/HighlightBox.tsx
 const StyledHighlightBox = styled$1.div`

package/ui/Elements/Logo/Logo.js

@@ -1,20 +1,20 @@
-import logo_black_default from "./assets/mailship/logo_black.js";
-import logo_m_default from "./assets/mailship/logo_m.js";
-import logo_white_default from "./assets/mailship/logo_white.js";
-import mailship_logo_default from "./assets/mailship/mailship-logo.js";
-import mailstep_black_default from "./assets/mailstep/mailstep_black.js";
-import mailstep_white_default from "./assets/mailstep/mailstep_white.js";
-import mailstock_default from "./assets/mailstock/mailstock.js";
-import mailwiseLogo_default from "./assets/mailwise/mailwiseLogo.js";
-import mailwiseLogoSmall_default from "./assets/mailwise/mailwiseLogoSmall.js";
-import mailwrapLogo_default from "./assets/mailwrap/mailwrapLogo.js";
-import mailwrapLogoSmall_default from "./assets/mailwrap/mailwrapLogoSmall.js";
-import manager2_default from "./assets/warehouse/manager2.js";
-import manager3_default from "./assets/warehouse/manager3.js";
-import manager_default from "./assets/warehouse/manager.js";
 import "react";
 import styled$1 from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import logoBlackImage from "./assets/mailship/logo_black.png";
+import logoMImage from "./assets/mailship/logo_m.png";
+import logoWhiteImage from "./assets/mailship/logo_white.png";
+import logoSvg from "./assets/mailship/mailship-logo.svg";
+import logoMailstepBlack from "./assets/mailstep/mailstep_black.svg";
+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 logoMailwrap from "./assets/mailwrap/mailwrapLogo.svg";
+import logoMailwrapSmall from "./assets/mailwrap/mailwrapLogoSmall.svg";
+import warehouseManager2 from "./assets/warehouse/manager2.svg";
+import warehouseManager3 from "./assets/warehouse/manager3.svg";
+import warehouseManager from "./assets/warehouse/manager.svg";
 //#region packages/ui/Elements/Logo/Logo.tsx
 const defaultSizes = {
 	small: "30px",
@@ -23,28 +23,28 @@ const defaultSizes = {
 };
 const variantMap = {
 	mailship: {
-		white: logo_white_default,
-		black: logo_black_default,
-		m: logo_m_default,
-		s: mailship_logo_default
+		white: logoWhiteImage,
+		black: logoBlackImage,
+		m: logoMImage,
+		s: logoSvg
 	},
 	mailwise: {
-		black: mailwiseLogo_default,
-		s: mailwiseLogoSmall_default
+		black: logoMailwise,
+		s: logoMailwiseSmall
 	},
-	mailstock: { black: mailstock_default },
+	mailstock: { black: logoMailstock },
 	mailstep: {
-		black: mailstep_black_default,
-		white: mailstep_white_default
+		black: logoMailstepBlack,
+		white: logoMailstepWhite
 	},
 	mailwrap: {
-		black: mailwrapLogo_default,
-		s: mailwrapLogoSmall_default
+		black: logoMailwrap,
+		s: logoMailwrapSmall
 	},
 	warehouse: {
-		black: manager_default,
-		m: manager2_default,
-		s: manager3_default
+		black: warehouseManager,
+		m: warehouseManager2,
+		s: warehouseManager3
 	}
 };
 const StyledImage = styled$1.img`

package/ui/Elements/Pagination/styled.js

@@ -1,6 +1,6 @@
 import Icon_default from "../Icon/index.js";
 import styled$1, { x } from "@xstyled/styled-components";
-import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { th as th$1 } from "@xstyled/system";
 //#region packages/ui/Elements/Pagination/styled.tsx
 const Wrapper = styled$1(x.div)`
   display: inline-flex;

package/ui/Elements/Select/styles.js

@@ -1,5 +1,5 @@
 import styled$1 from "@xstyled/styled-components";
-import { system as system$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { system as system$1 } from "@xstyled/system";
 import ReactSelect from "react-select";
 import AsyncSelect from "react-select/async";
 //#region packages/ui/Elements/Select/styles.ts

package/ui/Elements/Select/themes/selectStyles.js

@@ -1,4 +1,4 @@
-import { th } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { th } from "@xstyled/system";
 //#region packages/ui/Elements/Select/themes/selectStyles.ts
 const CustomStyles = {
 	control: (styles, { selectProps, theme, isFocused, isDisabled }) => {

package/ui/Forms/TextArea/styles.js

@@ -1,5 +1,5 @@
 import styled$1, { css } from "@xstyled/styled-components";
-import { system as system$1, th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { system as system$1, th as th$1 } from "@xstyled/system";
 //#region packages/ui/Forms/TextArea/styles.ts
 const IconWrap = styled$1.div`
   font-size: 12px;

package/ui/System/Fonts/index.js

@@ -1,10 +1,10 @@
-import Inter_Light_mailstep_default from "../../packages/assets/fonts/Inter-Light_mailstep.js";
-import Inter_Regular_mailstep_default from "../../packages/assets/fonts/Inter-Regular_mailstep.js";
-import Inter_Medium_mailstep_default from "../../packages/assets/fonts/Inter-Medium_mailstep.js";
-import Inter_SemiBold_mailstep_default from "../../packages/assets/fonts/Inter-SemiBold_mailstep.js";
-import Inter_Bold_mailstep_default from "../../packages/assets/fonts/Inter-Bold_mailstep.js";
 import { jsx } from "react/jsx-runtime";
 import { Helmet } from "react-helmet";
+import InterLightMailstep from "../../../assets/fonts/Inter-Light_mailstep.woff2";
+import InterRegularMailstep from "../../../assets/fonts/Inter-Regular_mailstep.woff2";
+import InterMediumMailstep from "../../../assets/fonts/Inter-Medium_mailstep.woff2";
+import InterSemiBoldMailstep from "../../../assets/fonts/Inter-SemiBold_mailstep.woff2";
+import InterBoldMailstep from "../../../assets/fonts/Inter-Bold_mailstep.woff2";
 //#region packages/ui/System/Fonts/index.tsx
 const Fonts = () => /* @__PURE__ */ jsx(Helmet, { children: /* @__PURE__ */ jsx("style", {
 	type: "text/css",
@@ -14,7 +14,7 @@ const Fonts = () => /* @__PURE__ */ jsx(Helmet, { children: /* @__PURE__ */ jsx(
           font-style: normal;
           font-weight: 300;
           font-display: swap;
-          src: url(${Inter_Light_mailstep_default}) format('woff2');
+          src: url(${InterLightMailstep}) format('woff2');
         }
 
         @font-face {
@@ -22,7 +22,7 @@ const Fonts = () => /* @__PURE__ */ jsx(Helmet, { children: /* @__PURE__ */ jsx(
           font-style: normal;
           font-weight: 400;
           font-display: swap;
-          src: url(${Inter_Regular_mailstep_default}) format('woff2');
+          src: url(${InterRegularMailstep}) format('woff2');
         }
       
         @font-face {
@@ -30,7 +30,7 @@ const Fonts = () => /* @__PURE__ */ jsx(Helmet, { children: /* @__PURE__ */ jsx(
           font-style: normal;
           font-weight: 500;
           font-display: swap;
-          src: url(${Inter_Medium_mailstep_default}) format('woff2');
+          src: url(${InterMediumMailstep}) format('woff2');
         }
 
         @font-face {
@@ -38,7 +38,7 @@ const Fonts = () => /* @__PURE__ */ jsx(Helmet, { children: /* @__PURE__ */ jsx(
           font-style: normal;
           font-weight: 600;
           font-display: swap;
-          src: url(${Inter_SemiBold_mailstep_default}) format('woff2');
+          src: url(${InterSemiBoldMailstep}) format('woff2');
         }
       
         @font-face {
@@ -46,7 +46,7 @@ const Fonts = () => /* @__PURE__ */ jsx(Helmet, { children: /* @__PURE__ */ jsx(
           font-style: normal;
           font-weight: 700;
           font-display: swap;
-          src: url(${Inter_Bold_mailstep_default}) format('woff2');
+          src: url(${InterBoldMailstep}) format('woff2');
         }
     `
 }) });

package/ui/Blocks/LoginPage/assets/mailship.js

@@ -1,4 +0,0 @@
-//#region packages/ui/Blocks/LoginPage/assets/mailship.jpg
-var mailship_default = "./mailship.jpg";
-//#endregion
-export { mailship_default as default };

package/ui/Elements/Logo/assets/mailship/logo_black.js

@@ -1,4 +0,0 @@
-//#region packages/ui/Elements/Logo/assets/mailship/logo_black.png
-var logo_black_default = "./logo_black.png";
-//#endregion
-export { logo_black_default as default };

package/ui/Elements/Logo/assets/mailship/logo_m.js

@@ -1,4 +0,0 @@
-//#region packages/ui/Elements/Logo/assets/mailship/logo_m.png
-var logo_m_default = "./logo_m.png";
-//#endregion
-export { logo_m_default as default };

package/ui/Elements/Logo/assets/mailship/logo_white.js

@@ -1,4 +0,0 @@
-//#region packages/ui/Elements/Logo/assets/mailship/logo_white.png
-var logo_white_default = "./logo_white.png";
-//#endregion
-export { logo_white_default as default };

package/ui/Elements/Logo/assets/mailship/mailship-logo.js

@@ -1,4 +0,0 @@
-//#region packages/ui/Elements/Logo/assets/mailship/mailship-logo.svg
-var mailship_logo_default = "./mailship-logo.svg";
-//#endregion
-export { mailship_logo_default as default };

package/ui/Elements/Logo/assets/mailstep/mailstep_black.js

@@ -1,4 +0,0 @@
-//#region packages/ui/Elements/Logo/assets/mailstep/mailstep_black.svg
-var mailstep_black_default = "./mailstep_black.svg";
-//#endregion
-export { mailstep_black_default as default };

package/ui/Elements/Logo/assets/mailstep/mailstep_white.js

@@ -1,4 +0,0 @@
-//#region packages/ui/Elements/Logo/assets/mailstep/mailstep_white.svg
-var mailstep_white_default = "./mailstep_white.svg";
-//#endregion
-export { mailstep_white_default as default };

package/ui/Elements/Logo/assets/mailstock/mailstock.js

@@ -1,4 +0,0 @@
-//#region packages/ui/Elements/Logo/assets/mailstock/mailstock.svg
-var mailstock_default = "./mailstock.svg";
-//#endregion
-export { mailstock_default as default };

package/ui/Elements/Logo/assets/mailwise/mailwiseLogo.js

@@ -1,4 +0,0 @@
-//#region packages/ui/Elements/Logo/assets/mailwise/mailwiseLogo.svg
-var mailwiseLogo_default = "./mailwiseLogo.svg";
-//#endregion
-export { mailwiseLogo_default as default };

package/ui/Elements/Logo/assets/mailwise/mailwiseLogoSmall.js

@@ -1,4 +0,0 @@
-//#region packages/ui/Elements/Logo/assets/mailwise/mailwiseLogoSmall.svg
-var mailwiseLogoSmall_default = "./mailwiseLogoSmall.svg";
-//#endregion
-export { mailwiseLogoSmall_default as default };

package/ui/Elements/Logo/assets/mailwrap/mailwrapLogo.js

@@ -1,4 +0,0 @@
-//#region packages/ui/Elements/Logo/assets/mailwrap/mailwrapLogo.svg
-var mailwrapLogo_default = "./mailwrapLogo.svg";
-//#endregion
-export { mailwrapLogo_default as default };

package/ui/Elements/Logo/assets/mailwrap/mailwrapLogoSmall.js

@@ -1,4 +0,0 @@
-//#region packages/ui/Elements/Logo/assets/mailwrap/mailwrapLogoSmall.svg
-var mailwrapLogoSmall_default = "./mailwrapLogoSmall.svg";
-//#endregion
-export { mailwrapLogoSmall_default as default };

package/ui/Elements/Logo/assets/warehouse/manager.js

@@ -1,4 +0,0 @@
-//#region packages/ui/Elements/Logo/assets/warehouse/manager.svg
-var manager_default = "./manager.svg";
-//#endregion
-export { manager_default as default };

package/ui/Elements/Logo/assets/warehouse/manager2.js

@@ -1,4 +0,0 @@
-//#region packages/ui/Elements/Logo/assets/warehouse/manager2.svg
-var manager2_default = "./manager2.svg";
-//#endregion
-export { manager2_default as default };

package/ui/Elements/Logo/assets/warehouse/manager3.js

@@ -1,4 +0,0 @@
-//#region packages/ui/Elements/Logo/assets/warehouse/manager3.svg
-var manager3_default = "./manager3.svg";
-//#endregion
-export { manager3_default as default };

package/ui/packages/assets/fonts/Inter-Bold_mailstep.js

@@ -1,4 +0,0 @@
-//#region packages/assets/fonts/Inter-Bold_mailstep.woff2
-var Inter_Bold_mailstep_default = "./Inter-Bold_mailstep.woff2";
-//#endregion
-export { Inter_Bold_mailstep_default as default };

package/ui/packages/assets/fonts/Inter-Light_mailstep.js

@@ -1,4 +0,0 @@
-//#region packages/assets/fonts/Inter-Light_mailstep.woff2
-var Inter_Light_mailstep_default = "./Inter-Light_mailstep.woff2";
-//#endregion
-export { Inter_Light_mailstep_default as default };

package/ui/packages/assets/fonts/Inter-Medium_mailstep.js

@@ -1,4 +0,0 @@
-//#region packages/assets/fonts/Inter-Medium_mailstep.woff2
-var Inter_Medium_mailstep_default = "./Inter-Medium_mailstep.woff2";
-//#endregion
-export { Inter_Medium_mailstep_default as default };

package/ui/packages/assets/fonts/Inter-Regular_mailstep.js

@@ -1,4 +0,0 @@
-//#region packages/assets/fonts/Inter-Regular_mailstep.woff2
-var Inter_Regular_mailstep_default = "./Inter-Regular_mailstep.woff2";
-//#endregion
-export { Inter_Regular_mailstep_default as default };

package/ui/packages/assets/fonts/Inter-SemiBold_mailstep.js

@@ -1,4 +0,0 @@
-//#region packages/assets/fonts/Inter-SemiBold_mailstep.woff2
-var Inter_SemiBold_mailstep_default = "./Inter-SemiBold_mailstep.woff2";
-//#endregion
-export { Inter_SemiBold_mailstep_default as default };