@mailstep/design-system 0.13.0-beta.1 → 0.13.0-beta.2

package/package.json

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

package/ui/Blocks/Header/components/UserMenu/index.js

@@ -6,8 +6,8 @@ import { UserInfoBlock } from "./components/UserInfo/index.js";
 import { useLogout } from "./hooks/useLogout.js";
 import { DropdownContentWrap, Line } from "./styles.js";
 import { useRef } from "react";
-import { th, useTheme } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { th, useTheme } from "@xstyled/styled-components";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Blocks/Header/components/UserMenu/index.tsx
 const UserMenu = ({ user, onLogout, hasUserMenu, userMenuOverride, withInitials, withChevron, withName, ignoreClickOutsideClosest }) => {

package/ui/Blocks/HidePrint/HidePrint.js

@@ -1,6 +1,6 @@
 import "react";
-import { jsx } from "react/jsx-runtime";
 import styled from "styled-components";
+import { jsx } from "react/jsx-runtime";
 //#region packages/ui/Blocks/HidePrint/HidePrint.tsx
 const HideWrapper = styled.div`
   display: contents;

package/ui/Blocks/ImageList/ImageList.js

@@ -7,8 +7,8 @@ import { useControls } from "./hooks/useControls.js";
 import { useOnElementClick } from "./hooks/useOnElementClick.js";
 import { Control, ImageListContainer } from "./styles.js";
 import { useRef } from "react";
-import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 import { useDraggable } from "react-use-draggable-scroll";
 //#region packages/ui/Blocks/ImageList/ImageList.tsx
 const ImageList = ({ onImageUpload, onImageRemove, onImageClick, lightBoxAction, lightBoxActionTitle, images, isDisabled, selectable, max }) => {

package/ui/Blocks/LoginPage/LoginPage.js

@@ -5,8 +5,8 @@ import { LoginForm } from "./components/LoginForm.js";
 import "./utils/links.js";
 import { SocialLinks } from "./components/SocialLinks.js";
 import { CardBodyWithLanguage, LanguageBox, LogoWrapper, MailTo, MainLogo, Version, Wrapper } from "./styles.js";
-import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Blocks/LoginPage/LoginPage.tsx
 const Login = ({ onSubmit, activeLanguage, onLanguageChange, children, brand, brandVariant, isSubmitting, isSubmitDisabled, withDistributionCenterSelect, distributionCenterOptions, selectedDistributionCenter, onChangeDistributionCenter, languageItems, version, backgroundImage, admin, hasSupport = true, hasSocialLinks = true, withPassword = true, withLogin = true, loginLabel, passwordLabel, formHeader }) => {

package/ui/Blocks/LoginPage/components/LoginForm.js

@@ -2,8 +2,8 @@ import Button from "../../../Elements/Button/Button.js";
 import SingleSelect from "../../../Elements/SingleSelect/SingleSelect.js";
 import { Input } from "../../../Forms/Input/Input.js";
 import { useCallback, useState } from "react";
-import styled$1, { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { x } from "@xstyled/styled-components";
 import { i18n } from "@lingui/core";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Blocks/LoginPage/components/LoginForm.tsx

package/ui/Blocks/LoginPage/components/SocialLinks.js

@@ -1,7 +1,7 @@
 import Icon from "../../../Elements/Icon/Icon.js";
 import { FACEBOOK_LINK, INSTAGRAM_LINK, LINKEDIN_LINK, TWITTER_LINK } from "../utils/links.js";
-import styled$1, { th } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { th } from "@xstyled/styled-components";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Blocks/LoginPage/components/SocialLinks.tsx
 const SocialLinksWrapper = styled$1.div`

package/ui/Blocks/Modal/Modal.js

@@ -9,8 +9,8 @@ import { Portal } from "../../Elements/Portal/index.js";
 import { ButtonsContainer, ButtonsWrapper, CloseButton, ContentContainer, DialogOverlay, DialogWindow, HeaderContainer, TitleContainer } from "./styles.js";
 import { widthMap } from "./utils.js";
 import { memo, useCallback, useEffect, useMemo } from "react";
-import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 //#region packages/ui/Blocks/Modal/Modal.tsx
 const Modal = memo(({ children, isShown = true, onExtraAction, onCancel, title, titleIcon, onConfirm, confirmLabel, cancelLabel, extraActionLabel, isLoading, isConfirmDisabled, width = "narrow", onClose, hasFooter = true, hasHeader = true, background, ignoreClickOutside = false, closeEverywhere = false, withCloseIcon = true, overlayColor, minWidth, minHeight, maxWidth, maxHeight, variant = "compact", top, name }) => {
 	const closeDialog = useCallback(() => {

package/ui/Blocks/Popover/index.js

@@ -1,8 +1,8 @@
 import { useClickOutside } from "../Modal/hooks/useClickOutside.js";
 import { Portal } from "../../Elements/Portal/index.js";
 import "react";
-import styled$1 from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 import { Popper } from "react-popper";
 //#region packages/ui/Blocks/Popover/index.tsx
 const PopoverWrapper = styled$1.div`

package/ui/Blocks/Scheduler/components/BookedTimeSlots/index.js

@@ -2,8 +2,8 @@ import { getMinutesFromTime } from "../../utils/getMinutesFromTime.js";
 import { convertDateToTime } from "../../utils/convertDateToTime.js";
 import { convertMinutesToDuration } from "../../utils/convertMinutesToDuration.js";
 import { Body, BookedTimeSlot, Header } from "./styles.js";
-import { x } from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 import get from "lodash/get";
 //#region packages/ui/Blocks/Scheduler/components/BookedTimeSlots/index.tsx
 const BookedTimeSlots = ({ bookedTimeSlots, timeSlotDefinitions, handleTimeSlotClick, time }) => {

package/ui/Blocks/Scheduler/components/DateChanger/index.js

@@ -7,8 +7,8 @@ import Popover from "../../../Popover/index.js";
 import { formatDate } from "../../utils/formatDate.js";
 import { ArrowContainer, DateChangerContainer } from "./styles.js";
 import { useContext, useRef } from "react";
-import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 //#region packages/ui/Blocks/Scheduler/components/DateChanger/index.tsx
 const DateChanger = ({ isLoading, date, handleChangeDate, closeDatePicker, handleNextDay, handlePrevDay, toggleDatepicker, isDatepickerOpen }) => {
 	const ref = useRef(null);

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

@@ -2,8 +2,8 @@ import { MenuItems } from "../../../Elements/Icon/icons/MenuItems.js";
 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 { jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { css } from "@xstyled/styled-components";
 import { th as th$1 } from "@xstyled/system";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Blocks/SideMenu/components/Footer.tsx

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

@@ -1,12 +1,12 @@
 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 styled from "styled-components";
 import { jsx } from "react/jsx-runtime";
+import { css, useTheme as useTheme$1, x } from "@xstyled/styled-components";
 import { th as th$1 } from "@xstyled/system";
-import styled$2 from "styled-components";
 //#region packages/ui/Blocks/SideMenu/components/HamburgerMenu.tsx
-const HamburgerMenuWrapper = styled$2(x.div)`
+const HamburgerMenuWrapper = styled(x.div)`
   width: 36px;
   height: 36px;
   border-radius: 70px;
@@ -36,7 +36,7 @@ const HamburgerMenuWrapper = styled$2(x.div)`
   }
 `;
 const HamburgerMenuButton = ({ isLeftMenuOpen, onClick }) => {
-	const theme = useTheme();
+	const theme = useTheme$1();
 	const neutralColor = th$1.color("neutral20")({ theme });
 	return /* @__PURE__ */ jsx(HamburgerMenuWrapper, {
 		mr: "8px",

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

@@ -2,8 +2,8 @@ import { H6 } from "../../../Elements/Typography/Typography.js";
 import { Portal } from "../../../Elements/Portal/index.js";
 import { ItemLinkWrap, TooltipItemLabel, TooltipWrap } from "../styles.js";
 import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
 import styled from "styled-components";
+import { jsx } from "react/jsx-runtime";
 import { Popper } from "react-popper";
 //#region packages/ui/Blocks/SideMenu/components/SubitemTooltip.tsx
 const TooltipItem = ({ title, link = "", lightMode }) => {

package/ui/Blocks/Stepper/components/StepItem/index.js

@@ -1,8 +1,8 @@
 import { H7, Paragraph2 } from "../../../../Elements/Typography/Typography.js";
 import { StepCircle } from "../StepCircle/index.js";
 import { ContentWrapper, Line, StepItemContainer } from "./styles.js";
-import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 import { Trans } from "@lingui/react";
 import isBoolean from "lodash/isBoolean";
 //#region packages/ui/Blocks/Stepper/components/StepItem/index.tsx

package/ui/Elements/Alert/Alert.js

@@ -1,8 +1,8 @@
 import Icon from "../Icon/Icon.js";
 import "../Icon/index.js";
 import { ActionButton, CloseBtn, Description, IconWrap, LinkWrapper, StyledAlert, Text, Title, VerticalSeparator } from "./styles.js";
-import { th, useTheme, x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { th, useTheme, x } from "@xstyled/styled-components";
 //#region packages/ui/Elements/Alert/Alert.tsx
 const alertBackgroundColor = {
 	success: "green10",

package/ui/Elements/Alert/styles.js

@@ -1,9 +1,9 @@
 import Link from "../Link/Link.js";
 import "../Link/index.js";
+import styled from "styled-components";
 import { th, x } from "@xstyled/styled-components";
-import styled$2 from "styled-components";
 //#region packages/ui/Elements/Alert/styles.ts
-const StyledAlert = styled$2(x.div)`
+const StyledAlert = styled(x.div)`
   width: calc(100vw - 20px);
   display: flex;
   min-height: 48px;
@@ -24,32 +24,32 @@ const StyledAlert = styled$2(x.div)`
     width: 100%;
   }
 `;
-const VerticalSeparator = styled$2(x.div)`
+const VerticalSeparator = styled(x.div)`
   width: 4px;
   height: 36px;
   border-radius: 94px;
   background-color: ${({ $colorFill }) => $colorFill};
 `;
-const IconWrap = styled$2(x.div)`
+const IconWrap = styled(x.div)`
   margin: 0 13px 0 9px;
 `;
-const Title = styled$2.span`
+const Title = styled.span`
   font-size: 14px;
   line-height: 18px;
   font-weight: 600;
 `;
-const Text = styled$2.span`
+const Text = styled.span`
   font-size: 14px;
   line-height: 20px;
   font-weight: 400;
 `;
-const LinkWrapper = styled$2(Link)`
+const LinkWrapper = styled(Link)`
   font-size: 14px;
   font-weight: 600;
   color: ${({ $colorFill }) => $colorFill};
   margin-right: 10px;
 `;
-const ActionButton = styled$2.button`
+const ActionButton = styled.button`
   margin-right: 10px;
   font-size: 14px;
   font-weight: 600;
@@ -58,7 +58,7 @@ const ActionButton = styled$2.button`
   background-color: transparent;
   cursor: pointer;
 `;
-const CloseBtn = styled$2.button`
+const CloseBtn = styled.button`
   height: 30px;
   width: 30px;
   display: flex;
@@ -71,7 +71,7 @@ const CloseBtn = styled$2.button`
     cursor: pointer;
   }
 `;
-const Description = styled$2.div`
+const Description = styled.div`
   position: absolute;
   top: 3px;
   right: 8px;

package/ui/Elements/Badge/Badge.js

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
-import styled$1, { css, th, useTheme } from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { css, th, useTheme } from "@xstyled/styled-components";
 //#region packages/ui/Elements/Badge/Badge.tsx
 const Circle = styled$1.div`
   min-width: 12px;

package/ui/Elements/BarChartSymbol/BarChartSymbol.js

@@ -1,6 +1,6 @@
 import { Bar } from "./styles.js";
-import { x } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 //#region packages/ui/Elements/BarChartSymbol/BarChartSymbol.tsx
 const BarChartSymbol = ({ total = 3, height = 14, minHeight = 7, selected = 3, gap = 2, width = 3, color }) => {
 	return /* @__PURE__ */ jsx(x.div, {

package/ui/Elements/BorderedBox/BorderedBox.js

@@ -1,6 +1,6 @@
 import "react";
-import styled$1, { x } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1, { x } from "@xstyled/styled-components";
 //#region packages/ui/Elements/BorderedBox/BorderedBox.tsx
 const StyledBox = styled$1(x.div)`
   display: flex;

package/ui/Elements/DatePicker/DatePicker.js

@@ -5,8 +5,8 @@ import { DatePickerInput } from "./components/DatePickerInput/DatePickerInput.js
 import "./components/DatePickerInput/index.js";
 import { DatePickerBase } from "./styles.js";
 import React, { useCallback, useContext } from "react";
-import { x } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 import "moment/dist/locale/cs";
 import "moment/dist/locale/el";
 import "moment/dist/locale/it";

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

@@ -4,8 +4,8 @@ import { DatePickerRepeatTrans } from "../../utils/constants.js";
 import { FooterRow } from "./FooterRow.js";
 import { FooterRowLabel } from "./FooterRowLabel.js";
 import { useCallback } from "react";
-import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 import { i18n } from "@lingui/core";
 //#region packages/ui/Elements/DatePicker/Datetime/components/DateRepeater.tsx
 const DateRepeater = ({ onChangeOthers, others, reset }) => {

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

@@ -7,8 +7,8 @@ import { padTime } from "./utils/padTime.js";
 import { parseTimeField } from "./utils/parseTimeField.js";
 import { sanitizeTimeField } from "./utils/sanitizeTimeField.js";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 import { i18n } from "@lingui/core";
 //#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker/Timepicker.tsx
 const Timepicker = ({ setTime, value, disabled }) => {

package/ui/Elements/Dropdown/Dropdown.js

@@ -1,6 +1,6 @@
 import "react";
-import styled$1, { th } from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { th } from "@xstyled/styled-components";
 //#region packages/ui/Elements/Dropdown/Dropdown.tsx
 const ArrowInnerB = styled$1.div``;
 const ArrowInnerA = styled$1.div``;

package/ui/Elements/DropdownMenu/DropdownMenu.js

@@ -1,8 +1,8 @@
 import MenuItem from "./components/DefaultItem.js";
 import MenuList from "./components/MenuList.js";
 import "react";
-import styled$1 from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 //#region packages/ui/Elements/DropdownMenu/DropdownMenu.tsx
 const StyledDropdownWrap = styled$1.div`
   width: fit-content;

package/ui/Elements/DropdownMenu/components/DefaultItem.js

@@ -1,6 +1,6 @@
 import "react";
-import styled$1, { css } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { css } from "@xstyled/styled-components";
 //#region packages/ui/Elements/DropdownMenu/components/DefaultItem.tsx
 const StyledListItem = styled$1.li`
   padding: 8px 10px;

package/ui/Elements/DropdownMenu/components/MenuItem.js

@@ -1,7 +1,7 @@
 import Link from "../../Link/Link.js";
 import { useCallback } from "react";
-import styled$1, { css } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1, { css } from "@xstyled/styled-components";
 import { useLocation } from "react-router";
 //#region packages/ui/Elements/DropdownMenu/components/MenuItem.tsx
 const StyledLink = styled$1(Link)`

package/ui/Elements/DropdownSelect/DropdownSelect.js

@@ -4,8 +4,8 @@ import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
 import "../DropdownMenu/index.js";
 import Popover from "../../Blocks/Popover/index.js";
 import React, { useCallback, useRef } from "react";
-import styled$1 from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 //#region packages/ui/Elements/DropdownSelect/DropdownSelect.tsx
 const ArrowIcon = styled$1(Icon)`
   flex-shrink: 0;

package/ui/Elements/ErrorMessage/ErrorMessage.js

@@ -1,6 +1,6 @@
 import "react";
-import styled$1, { css, th } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1, { css, th } from "@xstyled/styled-components";
 //#region packages/ui/Elements/ErrorMessage/ErrorMessage.tsx
 const tooltip = css`
   span {

package/ui/Elements/HighlightBox/HighlightBox.js

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

package/ui/Elements/Icon/BadgeIcon.js

@@ -1,7 +1,7 @@
 import Icon from "./Icon.js";
 import { useMemo } from "react";
-import styled$1 from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 //#region packages/ui/Elements/Icon/BadgeIcon.tsx
 const Badge = styled$1(Icon)`
   display: inline-table;

package/ui/Elements/Icon/Icon.js

@@ -1,5 +1,6 @@
 import { icons_exports } from "./icons/index.js";
 import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faFacebookF } from "@fortawesome/free-brands-svg-icons/faFacebookF";
 import { faInstagram } from "@fortawesome/free-brands-svg-icons/faInstagram";
@@ -115,7 +116,6 @@ import { faWineGlassCrack } from "@fortawesome/pro-solid-svg-icons/faWineGlassCr
 import { faXmark } from "@fortawesome/pro-solid-svg-icons/faXmark";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styled$1, { th, useTheme } from "@xstyled/styled-components";
-import { jsx } from "react/jsx-runtime";
 //#region packages/ui/Elements/Icon/Icon.tsx
 const iconDictionary = {
 	greaterThan: faAngleRight,

package/ui/Elements/Line/Line.js

@@ -1,5 +1,5 @@
-import styled$1 from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 //#region packages/ui/Elements/Line/Line.tsx
 const gabs = {
 	none: 0,

package/ui/Elements/Link/Link.js

@@ -1,8 +1,8 @@
 import { createRgba } from "../../utils/CreateRgba/createRgba.js";
 import "../../utils/index.js";
 import "react";
-import styled$1, { css, th, useTheme } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1, { css, th, useTheme } from "@xstyled/styled-components";
 import { NavLink } from "react-router-dom";
 //#region packages/ui/Elements/Link/Link.tsx
 const StyledLink = styled$1(NavLink)`

package/ui/Elements/Logo/Logo.js

@@ -1,6 +1,6 @@
 import "react";
-import styled$1 from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 import logoBlackImage from "./assets/mailship/logo_black.png";
 import logoMImage from "./assets/mailship/logo_m.png";
 import logoWhiteImage from "./assets/mailship/logo_white.png";

package/ui/Elements/Select/Select.js

@@ -6,8 +6,8 @@ import SpaceAround_default from "../SpaceAround/index.js";
 import { StyledAsyncSelect, StyledReactSelect, Wrapper } from "./styles.js";
 import { useStylesAndComponents } from "./themes/index.js";
 import { useCallback, useMemo, useRef } from "react";
-import { useTheme } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@xstyled/styled-components";
 import { i18n } from "@lingui/core";
 //#region packages/ui/Elements/Select/Select.tsx
 const emptyOptions = [];

package/ui/Elements/Select/components/CountMultiValue.js

@@ -1,5 +1,5 @@
-import styled$1, { th } from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { th } from "@xstyled/styled-components";
 import { components } from "react-select";
 //#region packages/ui/Elements/Select/components/CountMultiValue.tsx
 const StyledNumber = styled$1.div`

package/ui/Elements/Select/components/DropdownIndicator.js

@@ -1,7 +1,7 @@
 import { ArrowDown } from "../../Icon/icons/ArrowDown.js";
 import { ArrowUp } from "../../Icon/icons/ArrowUp.js";
-import styled$1 from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 import { components } from "react-select";
 //#region packages/ui/Elements/Select/components/DropdownIndicator.tsx
 const ChevronDiv = styled$1.div`

package/ui/Elements/Select/components/IconValueContainer.js

@@ -1,6 +1,6 @@
 import Icon from "../../Icon/Icon.js";
-import styled$1 from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 import { components } from "react-select";
 //#region packages/ui/Elements/Select/components/IconValueContainer.tsx
 const IconDiv = styled$1.div`

package/ui/Elements/Select/components/SelectAll.js

@@ -2,8 +2,8 @@ import Checkbox_default from "../../../Forms/Checkbox/Checkbox.js";
 import Toggle from "../../Toggle/Toggle.js";
 import SelectedIndicator from "./SelectedIndicator.js";
 import { useCallback, useEffect, useRef, useState } from "react";
-import styled$1, { th } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { th } from "@xstyled/styled-components";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Elements/Select/components/SelectAll.tsx
 const SelectAllWrap = styled$1.div`

package/ui/Elements/SpaceAround/SpaceAround.js

@@ -1,6 +1,6 @@
 import "react";
-import styled$1, { css, th, useTheme, x } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1, { css, th, useTheme, x } from "@xstyled/styled-components";
 //#region packages/ui/Elements/SpaceAround/SpaceAround.tsx
 const Wrapper = styled$1(x.div)`
   width: ${({ $marginLeft, $marginRight }) => `calc(100% - ${$marginLeft || "0px"} - ${$marginRight || "0px"})`};

package/ui/Elements/Tag/stories/components/predefinedTags.js

@@ -1,7 +1,7 @@
 import Tag from "../../Tag.js";
 import { palettes } from "../../palettes.js";
-import { x } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 //#region packages/ui/Elements/Tag/stories/components/predefinedTags.tsx
 const PredefinedTags = () => {
 	return /* @__PURE__ */ jsx(x.div, {

package/ui/Elements/Text/Text.js

@@ -1,6 +1,6 @@
 import "react";
-import { x } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 //#region packages/ui/Elements/Text/Text.tsx
 const Text = ({ as = "span", ...props }) => /* @__PURE__ */ jsx(x.div, {
 	as,

package/ui/Elements/Toast/Toast.js

@@ -3,8 +3,8 @@ import "../Icon/index.js";
 import { toastIconFill, toastIconMap, toastTitleMap } from "./constants.js";
 import { CloseWrapper, Container, ContentWrapper, Text, Title } from "./styles.js";
 import { useEffect } from "react";
-import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 //#region packages/ui/Elements/Toast/Toast.tsx
 const Toast = ({ closeToast, title, text, type, autoClose }) => {
 	const icon = toastIconMap[type];

package/ui/Elements/Toggle/Toggle.js

@@ -3,8 +3,8 @@ import "../Label/index.js";
 import SpaceAroundWrap from "../SpaceAround/SpaceAround.js";
 import "../SpaceAround/index.js";
 import "react";
-import styled$1, { css } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { css } from "@xstyled/styled-components";
 //#region packages/ui/Elements/Toggle/Toggle.tsx
 const isHorizontal = (position) => !!position && ["left", "right"].includes(position);
 const StyledSpaceAroundWrap = styled$1(SpaceAroundWrap)`

package/ui/Elements/Tooltip/Tooltip.js

@@ -2,8 +2,8 @@ import { Paragraph4 } from "../Typography/Typography.js";
 import "../Typography/index.js";
 import Popover from "../../Blocks/Popover/index.js";
 import { useRef, useState } from "react";
-import styled$1 from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 //#region packages/ui/Elements/Tooltip/Tooltip.tsx
 const Container = styled$1.div`
   width: fit-content;

package/ui/Modules/CommonGrid/CommonGrid.d.ts

@@ -7,7 +7,7 @@ type Props = CommonGridProps & {
     displayColumnsDefinitions: ColumnDefinition[];
     hasGroups: boolean;
     hasFilters: boolean;
-    onCellClick?: (columnName: string) => void;
+    onSetActiveColumn?: (columnName: string) => void;
 };
 declare const CommonGrid: FC<Props>;
 export default CommonGrid;

package/ui/Modules/CommonGrid/CommonGrid.js

@@ -11,14 +11,14 @@ import useRowsKeyControls from "./hooks/useRowsKeyControls.js";
 import useUxReset from "./hooks/useUxReset.js";
 import { initialState } from "./store/index.js";
 import { useCallback, useMemo } from "react";
-import { x } from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 //#region packages/ui/Modules/CommonGrid/CommonGrid.tsx
 const rowsStyles = { outline: "none" };
 const defaultVoidFunction = (...args) => null;
 const defaultUxState = initialState.uxState;
 const defaultColumnsWidth = {};
-const CommonGrid = ({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowClick, onAsyncLoadFilterOptions, columnLayout = "normal", displayColumnsDefinitions, className, minColumnWidth, errorMessage, floatingButtonProps, hasGroups, hasFilters, isSortTerminated, onCellClick }) => {
+const CommonGrid = ({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowClick, onAsyncLoadFilterOptions, onSetActiveColumn, columnLayout = "normal", displayColumnsDefinitions, className, minColumnWidth, errorMessage, floatingButtonProps, hasGroups, hasFilters, isSortTerminated }) => {
 	const { uxState = defaultUxState, columnsWidth = defaultColumnsWidth, columnsWidthVariant, page = 1, filter, sorting, rowsPerPage = 10 } = gridSelectors;
 	const { clearUxState, handleUxChange, addFilter = defaultVoidFunction, addSorting = defaultVoidFunction, setColumnWidth = defaultVoidFunction } = gridActions;
 	const handleRowsKeyDown = useRowsKeyControls(rowsData, uxState, handleUxChange);
@@ -61,7 +61,8 @@ const CommonGrid = ({ filters, comparators, handleDragEnd, gridSelectors, gridAc
 						handleResizeDrag,
 						groups,
 						handleDragEnd,
-						isSortTerminated
+						isSortTerminated,
+						onCellClick: onSetActiveColumn
 					}),
 					hasFilters && /* @__PURE__ */ jsx(FilterRow, {
 						filters,
@@ -75,7 +76,8 @@ const CommonGrid = ({ filters, comparators, handleDragEnd, gridSelectors, gridAc
 						rowsData,
 						uxState,
 						handleUxChange,
-						onAsyncLoadFilterOptions
+						onAsyncLoadFilterOptions,
+						onCellClick: onSetActiveColumn
 					})
 				]
 			}), /* @__PURE__ */ jsx("div", {
@@ -94,7 +96,7 @@ const CommonGrid = ({ filters, comparators, handleDragEnd, gridSelectors, gridAc
 						onRowAction,
 						onUxChange: handleUxChange,
 						onRowClick,
-						onCellClick,
+						onCellClick: onSetActiveColumn,
 						columns: displayColumnsDefinitions,
 						displayColumnsWidth,
 						groups