@mailstep/design-system 0.13.7 → 0.13.9-beta.1

package/README.md

@@ -74,3 +74,4 @@ There are Elements, Blocks and Forms components. Also you can use ThemeProvider
 |----------|:-------------:|------:|
 | Theme Provider |  TBD | [More info](ui/ThemeProvider/README.md) |
 
+.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.13.7",
+  "version": "0.13.9-beta.1",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -20,7 +20,7 @@
     "deploy:win": "npm run build:win && npm publish ./build",
     "dev": "yarn storybook",
     "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\"",
-    "lint": "eslint ./packages/ui/**/*.{ts,tsx}",
+    "lint": "eslint './packages/ui/**/*.{ts,tsx}'",
     "prepare": "husky"
   },
   "lint-staged": {
@@ -45,6 +45,7 @@
     "@nivo/legends": "^0.73.0",
     "@nivo/pie": "^0.73.0",
     "@popperjs/core": "^2.11.8",
+    "@storybook-community/storybook-dark-mode": "7.1.4",
     "@storybook/addon-designs": "^11.1.4",
     "@storybook/addon-docs": "10.6.0",
     "@storybook/addon-links": "10.6.0",
@@ -55,7 +56,7 @@
     "@tsdown/css": "^0.22.3",
     "@types/faker": "^4.1.11",
     "@types/lodash": "^4.17.13",
-    "@types/luxon": "^3.4.2",
+    "@types/luxon": "^3.4.4",
     "@types/node": "^20.1.7",
     "@types/react": "^19.2.2",
     "@types/react-beautiful-dnd": "^13.1.2",
@@ -87,7 +88,6 @@
     "lint-staged": "^16.4.0",
     "lodash": "^4.18.0",
     "luxon": "^3.4.4",
-    "moment": "^2.30.1",
     "prettier": "2.8.8",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
@@ -138,7 +138,6 @@
     "immer": "^9.0.19",
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",
-    "moment": "^2.30.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-grid-layout": "^1.2.5",

package/ui/Blocks/Modal/Modal.js

@@ -41,7 +41,6 @@ const Modal = memo(({ children, isShown = true, onExtraAction, onCancel, title,
 			style: dialogStyle,
 			$backgroundColor: background,
 			top,
-			"data-cy": "dialogWindow",
 			onClick: closeEverywhere ? closeDialog : void 0,
 			$minWidth: minWidth,
 			$minHeight: minHeight,
@@ -72,7 +71,6 @@ const Modal = memo(({ children, isShown = true, onExtraAction, onCancel, title,
 				}),
 				withCloseIcon && /* @__PURE__ */ jsx(CloseButton, {
 					onClick: closeDialog,
-					"data-cy": "dialogCloseBtn",
 					children: /* @__PURE__ */ jsx(Cancel, {
 						width: "11px",
 						height: "11px"
@@ -88,7 +86,6 @@ const Modal = memo(({ children, isShown = true, onExtraAction, onCancel, title,
 						type: "button",
 						onClick: onExtraAction,
 						isLoading,
-						"data-cy": "extraActionBtn",
 						appearance: "secondary",
 						variant: "ghost",
 						children: extraActionLabel
@@ -99,7 +96,6 @@ const Modal = memo(({ children, isShown = true, onExtraAction, onCancel, title,
 							type: "button",
 							onClick: onCancel,
 							isLoading,
-							"data-cy": "cancelBtn",
 							appearance: "secondary",
 							variant: "default",
 							"data-testid": name ? `button-${name}-cancel` : void 0,
@@ -109,7 +105,6 @@ const Modal = memo(({ children, isShown = true, onExtraAction, onCancel, title,
 							onClick: onDialogConfirmClick,
 							isLoading,
 							disabled: isConfirmDisabled,
-							"data-cy": "submitBtn",
 							appearance: "primary",
 							variant: "default",
 							"data-testid": name ? `button-${name}-confirm` : void 0,

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

@@ -37,7 +37,7 @@ const StyledLink = styled$1(Link)`
 `}
 `;
 const MenuItem = ({ item, ItemComponent, onClose }) => {
-	const { onClick, link, hasSeparator, name, autoClose, disabled } = item;
+	const { onClick, link, hasSeparator, autoClose, disabled } = item;
 	const isActive = link === useLocation().pathname;
 	const onClickCallback = useCallback((e) => {
 		if (disabled) {
@@ -63,7 +63,6 @@ const MenuItem = ({ item, ItemComponent, onClose }) => {
 		$disabled: !!disabled,
 		onClick: onClickCallback,
 		$hasSeparator: !!hasSeparator,
-		"data-cy": name,
 		size: "inherit",
 		children: /* @__PURE__ */ jsx(ItemComponent, { ...item })
 	});

package/ui/Elements/DropdownSelect/DropdownSelect.js

@@ -99,7 +99,6 @@ const DropdownSelect = ({ label, appearance, variant, options, showChevron, onSe
 			variant: variant || "default",
 			onClick: toggleDropdownMenu,
 			disabled,
-			"data-cy": "createProductDropdownMenuBtn",
 			children: /* @__PURE__ */ jsxs(ContentWrapper, { children: [
 				icon && /* @__PURE__ */ jsx(CustomIconWrap, { children: icon }),
 				/* @__PURE__ */ jsx("span", { children: label }),

package/ui/Elements/HighlightBox/HighlightBox.d.ts

@@ -48,7 +48,6 @@ type HighlightBoxType = {
     size?: 'default' | 'small' | 'wide' | 'fitContent';
     className?: string;
     cursor?: string;
-    prefix?: string;
 };
 declare const HighlightBox: React.FC<HighlightBoxType>;
 export default HighlightBox;

package/ui/Elements/HighlightBox/HighlightBox.js

@@ -88,12 +88,11 @@ const flagAppearanceToFontColorMap = {
 	redBold: "#ffffff",
 	redSubtle: "red80"
 };
-const HighlightBox = ({ children, appearance, size = "default", cursor, className, prefix }) => {
+const HighlightBox = ({ children, appearance, size = "default", cursor, className }) => {
 	const theme = useTheme();
 	return /* @__PURE__ */ jsx(StyledHighlightBox, {
 		$bgcolor: th$1.color(appearance ? flagAppearanceToColorMap[appearance] : "transparent")({ theme }),
 		$fontColor: th$1.color(appearance ? flagAppearanceToFontColorMap[appearance] : "typoPrimary")({ theme }),
-		"data-cy": prefix ? `${prefix}Label` : "label",
 		$cursor: cursor,
 		children: /* @__PURE__ */ jsx(OverflowWrap, {
 			className: size + " " + (className || ""),

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

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { components } from "react-select";
 //#region packages/ui/Elements/Select/components/ChevronOption.tsx
 const ChevronOption = (props) => {
-	const { theme, isSelected, selectOption, children, data } = props;
+	const { theme, isSelected, selectOption, children } = props;
 	const showCheckbox = !!(theme.optionVariant == "checkbox");
 	const showToggle = !!(theme.optionVariant == "toggle");
 	return /* @__PURE__ */ jsxs(components.Option, {
@@ -22,7 +22,6 @@ const ChevronOption = (props) => {
 			variant: "grid"
 		})] }), /* @__PURE__ */ jsx("span", {
 			className: "label",
-			"data-cy": `dropdownModalOption${data.index}`,
 			children
 		})]
 	});

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

@@ -9,13 +9,12 @@ const ChevronDiv = styled$1.div`
   display: flex;
 `;
 const DropdownIndicator = (props) => {
-	const { menuIsOpen, name } = props.selectProps;
+	const { menuIsOpen } = props.selectProps;
 	const iconColor = props.theme.colors.placeholderTextColor;
 	return /* @__PURE__ */ jsx(components.DropdownIndicator, {
 		...props,
 		children: /* @__PURE__ */ jsx(ChevronDiv, {
 			className: "chevron",
-			"data-cy": `${name || ""}ChevronBtn`,
 			children: menuIsOpen ? /* @__PURE__ */ jsx(ArrowUp, {
 				width: "16px",
 				stroke: iconColor

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

@@ -1,7 +1,6 @@
 import { ChevronOption } from "../components/ChevronOption.js";
 import ConnectedMenu from "../components/ConnectedMenu.js";
 import CountMultiValue from "../components/CountMultiValue.js";
-import { CustomInput } from "../components/CustomInput.js";
 import { DropdownIndicator } from "../components/DropdownIndicator.js";
 import IconValueContainer from "../components/IconValueContainer.js";
 import SimplifiedOption from "../components/SimplifiedOption.js";
@@ -17,7 +16,6 @@ const useStylesAndComponents = (style = "form", optionVariant = "default", multi
 		if (multiLabelVariant === "count") components.MultiValue = CountMultiValue;
 		if (containerVariant === "search") components.DropdownIndicator = null;
 		if (showSelectAllButton) components.MenuList = ConnectedMenu;
-		components.Input = CustomInput;
 		const themes = getCustomTheme(systemTheme, optionVariant, style === "gridFilter");
 		const styles = CustomStyles;
 		components.Option = ChevronOption;

package/ui/Elements/Toggle/Toggle.js

@@ -108,7 +108,6 @@ const Toggle = ({ onChange, label, name, checked, defaultChecked, spaceAround =
 				defaultChecked,
 				onChange: !disabled ? onChange : void 0,
 				disabled,
-				"data-cy": name ? `${name}Switch` : void 0,
 				"data-testid": name ? `toggle-${name}` : void 0,
 				readOnly
 			}), /* @__PURE__ */ jsx(StyledToggle, {

package/ui/Forms/Checkbox/Checkbox.js

@@ -18,7 +18,6 @@ const Checkbox = ({ name, label, onChange, checked, defaultChecked, size = "18px
 				onChange,
 				value: "",
 				readOnly,
-				"data-cy": name ? `${name}Checkbox` : void 0,
 				"data-testid": name ? `checkbox-${name}` : void 0,
 				id
 			}),

package/ui/Forms/DatePicker/DatePicker.d.ts

@@ -1,11 +1,6 @@
 import React from 'react';
 import type { SpaceAround } from '../../Elements/SpaceAround';
 import type { DateTimeOthers, DatetimepickerProps } from './Datetime/types';
-import 'moment/dist/locale/cs';
-import 'moment/dist/locale/el';
-import 'moment/dist/locale/it';
-import 'moment/dist/locale/ru';
-import 'moment/dist/locale/sk';
 export type DatePickerType = DatetimepickerProps & {
     onChange: (value: string | Date) => void;
     disabled?: boolean;

package/ui/Forms/DatePicker/DatePicker.js

@@ -8,11 +8,6 @@ import { DatePickerBase } from "./styles.js";
 import React, { useCallback, useContext } from "react";
 import { x } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
-import "moment/dist/locale/cs";
-import "moment/dist/locale/el";
-import "moment/dist/locale/it";
-import "moment/dist/locale/ru";
-import "moment/dist/locale/sk";
 //#region packages/ui/Forms/DatePicker/DatePicker.tsx
 const defaultDateFormat = "DD.MM.YYYY";
 const DatePicker = ({ name, value, initialViewDate, error, label, disabled, isValidDate, onChange, dateFormat = defaultDateFormat, timeFormat = false, open, secondValue = null, input, icon = true, showInputLabel = false, showCalendarLabel = true, spaceAround = false, className, onClear, onInputChange, ...passProps }) => {
@@ -50,11 +45,11 @@ const DatePicker = ({ name, value, initialViewDate, error, label, disabled, isVa
 		return renderCalendar();
 	}, [label, showInputLabel]);
 	const handleChange = useCallback((value) => {
-		const parsed = typeof value === "string" ? value : value?.toDate?.();
+		const parsed = typeof value === "string" ? value : value?.toJSDate?.();
 		onChange?.(parsed);
 	}, [onChange]);
 	const handleIsValid = useCallback((current, selected) => {
-		const parsed = [current?.toDate?.(), selected?.toDate?.()];
+		const parsed = [current?.toJSDate?.(), selected?.toJSDate?.()];
 		return isValidDate ? isValidDate(...parsed) : true;
 	}, [isValidDate]);
 	return /* @__PURE__ */ jsx(SpaceAround_default, {

package/ui/Forms/DatePicker/Datetime/DateTime.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import moment from 'moment';
 import type { DatetimepickerProps } from './types';
 export default class Datetime extends React.Component<DatetimepickerProps> {
     static defaultProps: {
@@ -20,13 +19,11 @@ export default class Datetime extends React.Component<DatetimepickerProps> {
         inputProps: {};
         timeConstraints: {};
         isValidDate: () => boolean;
-        strictParsing: boolean;
         closeOnSelect: boolean;
         closeOnTab: boolean;
         closeOnClickOutside: boolean;
         renderView: (_: any, renderFunc: any) => any;
     };
-    static moment: typeof moment;
     constructor(props: any);
     render(): import("react/jsx-runtime").JSX.Element;
     renderInput(): import("react/jsx-runtime").JSX.Element | undefined;
@@ -46,13 +43,11 @@ export default class Datetime extends React.Component<DatetimepickerProps> {
     getClassName(): string;
     isOpen(): any;
     getUpdateOn(dateFormat: any): string;
-    getLocaleData(): any;
-    getDateFormat(): any;
-    getTimeFormat(): any;
-    getFormat(type: any): any;
+    getDateFormat(): string;
+    getTimeFormat(): string;
+    getFormat(type: any): string;
     _showView: (view: any, date: any) => void;
-    updateTime(op: any, amount: any, type: any, toSelected: any): void;
-    viewToMethod: {
+    viewToUnit: {
         days: string;
         months: string;
         years: string;
@@ -69,8 +64,9 @@ export default class Datetime extends React.Component<DatetimepickerProps> {
     _openCalendar: () => void;
     _closeCalendar: () => void;
     _handleClickOutside: () => void;
-    localMoment(date: any, format: any, props: any): any;
-    checkTZ(): void;
+    getZone(): string;
+    localize(date: any): any;
+    localDate(date: any, format: any): any;
     componentDidUpdate(prevProps: any): void;
     regenerateDates(): void;
     getSelectedDate(): any;

package/ui/Forms/DatePicker/Datetime/DateTime.js

@@ -1,9 +1,11 @@
+import "./utils/constants.js";
+import { toLuxonFormat } from "./utils/toLuxonFormat.js";
 import DaysView from "./views/DaysView.js";
 import MonthsView from "./views/MonthsView.js";
 import YearsView from "./views/YearsView.js";
 import React from "react";
+import { DateTime } from "luxon";
 import { jsx, jsxs } from "react/jsx-runtime";
-import moment from "moment";
 import onClickOutside from "react-onclickoutside";
 //#region packages/ui/Forms/DatePicker/Datetime/DateTime.tsx
 const viewModes = {
@@ -37,23 +39,19 @@ var Datetime = class extends React.Component {
 			isValidDate: function() {
 				return true;
 			},
-			strictParsing: true,
 			closeOnSelect: false,
 			closeOnTab: true,
 			closeOnClickOutside: true,
 			renderView: (_, renderFunc) => renderFunc()
 		};
 	}
-	static {
-		this.moment = moment;
-	}
 	constructor(props) {
 		super(props);
 		this._renderCalendar = () => {
 			const props = this.props;
 			const state = this.state;
 			let viewProps = {
-				viewDate: state.viewDate.clone(),
+				viewDate: state.viewDate,
 				label: props.label,
 				isSecondDatePicker: props.isSecondDatePicker,
 				secondValue: props.secondValue,
@@ -64,7 +62,6 @@ var Datetime = class extends React.Component {
 				onChangeOthers: props.onChangeOthers,
 				reset: this._reset,
 				navigate: this._viewNavigate,
-				moment,
 				showView: this._showView
 			};
 			switch (state.currentView) {
@@ -90,15 +87,15 @@ var Datetime = class extends React.Component {
 			}
 		};
 		this._showView = (view, date) => {
-			const d = (date || this.state.viewDate).clone();
+			const d = date || this.state.viewDate;
 			const nextView = this.props.onBeforeNavigate(view, this.state.currentView, d);
 			if (nextView && this.state.currentView !== nextView) {
 				this.props.onNavigate(nextView);
 				this.setState({ currentView: nextView });
 			}
 		};
-		this.viewToMethod = {
-			days: "date",
+		this.viewToUnit = {
+			days: "day",
 			months: "month",
 			years: "year"
 		};
@@ -110,35 +107,33 @@ var Datetime = class extends React.Component {
 		this._updateDate = (e) => {
 			let currentView = this.state.currentView;
 			let updateOnView = this.getUpdateOn(this.getFormat("date"));
-			let viewDate = this.state.viewDate.clone();
-			viewDate[this.viewToMethod[currentView]](parseInt(e.target.getAttribute("data-value"), 10));
+			const values = { [this.viewToUnit[currentView]]: parseInt(e.target.getAttribute("data-value"), 10) };
 			if (currentView === "days") {
-				viewDate.month(parseInt(e.target.getAttribute("data-month"), 10));
-				viewDate.year(parseInt(e.target.getAttribute("data-year"), 10));
+				values.month = parseInt(e.target.getAttribute("data-month"), 10);
+				values.year = parseInt(e.target.getAttribute("data-year"), 10);
 			}
+			const viewDate = this.state.viewDate.set(values);
 			let update = { viewDate };
 			if (currentView === updateOnView) {
-				update.selectedDate = viewDate.clone();
-				update.inputValue = viewDate.format(this.getFormat("datetime"));
+				update.selectedDate = viewDate;
+				update.inputValue = viewDate.toFormat(this.getFormat("datetime"));
 				if (this.props.open === void 0 && this.props.input && this.props.closeOnSelect) this._closeCalendar();
-				this.props.onChange(viewDate.clone());
+				this.props.onChange(viewDate);
 			} else this._showView(this.nextView[currentView], viewDate);
 			this.setState(update);
 		};
 		this._viewNavigate = (modifier, unit) => {
-			let viewDate = this.state.viewDate.clone();
-			viewDate.add(modifier, unit);
+			const viewDate = this.state.viewDate.plus({ [unit]: modifier });
 			if (modifier > 0) this.props.onNavigateForward(modifier, unit);
 			else this.props.onNavigateBack(-modifier, unit);
 			this.setState({ viewDate });
 		};
 		this._setTime = (type, value) => {
-			let date = (this.getSelectedDate() || this.state.viewDate).clone();
-			date[type](value);
+			const date = (this.getSelectedDate() || this.state.viewDate).set({ [type]: value });
 			if (!this.props.value) this.setState({
 				selectedDate: date,
-				viewDate: date.clone(),
-				inputValue: date.format(this.getFormat("datetime"))
+				viewDate: date,
+				inputValue: date.toFormat(this.getFormat("datetime"))
 			});
 			this.props.onChange(date);
 		};
@@ -166,14 +161,14 @@ var Datetime = class extends React.Component {
 		this._onInputChange = (e) => {
 			if (!this.callHandler(this.props.inputProps.onChange, e)) return;
 			const value = e.target ? e.target.value : e;
-			const localMoment = this.localMoment(value, this.getFormat("datetime"));
+			const parsedDate = this.localDate(value, this.getFormat("datetime"));
 			let update = { inputValue: value };
-			if (localMoment.isValid()) {
-				update.selectedDate = localMoment;
-				update.viewDate = localMoment.clone().startOf("month");
+			if (parsedDate.isValid) {
+				update.selectedDate = parsedDate;
+				update.viewDate = parsedDate.startOf("month");
 			} else update.selectedDate = null;
 			this.setState(update, () => {
-				this.props.onChange(localMoment.isValid() ? localMoment : this.state.inputValue);
+				this.props.onChange(parsedDate.isValid ? parsedDate : this.state.inputValue);
 			});
 		};
 		this._onInputKeyDown = (e) => {
@@ -218,12 +213,11 @@ var Datetime = class extends React.Component {
 		let props = this.props;
 		let inputFormat = this.getFormat("datetime");
 		let selectedDate = this.parseDate(props.value || props.initialValue, inputFormat);
-		this.checkTZ();
 		return {
 			open: !props.input,
 			currentView: props.initialViewMode || this.getInitialView(),
 			viewDate: this.getInitialViewDate(selectedDate),
-			selectedDate: selectedDate && selectedDate.isValid() ? selectedDate : void 0,
+			selectedDate: selectedDate && selectedDate.isValid ? selectedDate : void 0,
 			inputValue: this.getInitialInputValue(selectedDate)
 		};
 	}
@@ -232,15 +226,13 @@ var Datetime = class extends React.Component {
 		let viewDate;
 		if (propDate) {
 			viewDate = this.parseDate(propDate, this.getFormat("datetime"));
-			if (viewDate && viewDate.isValid()) return viewDate;
+			if (viewDate && viewDate.isValid) return viewDate;
 			else console.log("The initialViewDated given \"" + propDate + "\" is not valid. Using current date instead.");
-		} else if (selectedDate && selectedDate.isValid()) return selectedDate.clone();
+		} else if (selectedDate && selectedDate.isValid) return selectedDate;
 		return this.getInitialDate();
 	}
 	getInitialDate() {
-		let m = this.localMoment();
-		m.hour(0).minute(0).second(0).millisecond(0);
-		return m;
+		return this.localDate().startOf("day");
 	}
 	getInitialView() {
 		const dateFormat = this.getFormat("date");
@@ -248,9 +240,9 @@ var Datetime = class extends React.Component {
 	}
 	parseDate(date, dateFormat) {
 		let parsedDate;
-		if (date && typeof date === "string") parsedDate = this.localMoment(date, dateFormat);
-		else if (date) parsedDate = this.localMoment(date);
-		if (parsedDate && !parsedDate.isValid()) parsedDate = null;
+		if (date && typeof date === "string") parsedDate = this.localDate(date, dateFormat);
+		else if (date) parsedDate = this.localDate(date);
+		if (parsedDate && !parsedDate.isValid) parsedDate = null;
 		return parsedDate;
 	}
 	getClassName() {
@@ -268,27 +260,22 @@ var Datetime = class extends React.Component {
 	}
 	getUpdateOn(dateFormat) {
 		if (this.props.updateOnView) return this.props.updateOnView;
-		if (dateFormat.match(/[lLD]/)) return viewModes.DAYS;
-		if (dateFormat.indexOf("M") !== -1) return viewModes.MONTHS;
-		if (dateFormat.indexOf("Y") !== -1) return viewModes.YEARS;
+		const tokens = dateFormat.replace(/'[^']*'/g, "");
+		if (tokens.match(/[dD]/)) return viewModes.DAYS;
+		if (tokens.match(/[ML]/)) return viewModes.MONTHS;
+		if (tokens.indexOf("y") !== -1) return viewModes.YEARS;
 		return viewModes.DAYS;
 	}
-	getLocaleData() {
-		let p = this.props;
-		return this.localMoment(p.value || p.defaultValue || /* @__PURE__ */ new Date()).localeData();
-	}
 	getDateFormat() {
-		const locale = this.getLocaleData();
 		let format = this.props.dateFormat;
-		if (format === true) return locale.longDateFormat("L");
-		if (format) return format;
+		if (format === true) return "D";
+		if (format) return toLuxonFormat(format);
 		return "";
 	}
 	getTimeFormat() {
-		const locale = this.getLocaleData();
 		let format = this.props.timeFormat;
-		if (format === true) return locale.longDateFormat("LT");
-		return format || "";
+		if (format === true) return "t";
+		return format ? toLuxonFormat(format) : "";
 	}
 	getFormat(type) {
 		if (type === "date") return this.getDateFormat();
@@ -297,24 +284,23 @@ var Datetime = class extends React.Component {
 		let timeFormat = this.getTimeFormat();
 		return dateFormat && timeFormat ? dateFormat + " " + timeFormat : dateFormat || timeFormat;
 	}
-	updateTime(op, amount, type, toSelected) {
-		let update = {};
-		const date = toSelected ? "selectedDate" : "viewDate";
-		update[date] = this.state[date].clone()[op](amount, type);
-		this.setState(update);
+	getZone() {
+		if (this.props.utc) return "utc";
+		return this.props.displayTimeZone || "local";
 	}
-	localMoment(date, format, props) {
-		props = props || this.props;
-		let m = null;
-		if (props.utc) m = moment.utc(date, format, props.strictParsing);
-		else if (props.displayTimeZone) m = moment.tz(date, format, props.displayTimeZone);
-		else m = moment(date, format, props.strictParsing);
-		if (props.locale) m.locale(props.locale);
-		return m;
+	localize(date) {
+		const zoned = date.setZone(this.getZone());
+		return this.props.locale ? zoned.setLocale(this.props.locale) : zoned;
 	}
-	checkTZ() {
-		const { displayTimeZone } = this.props;
-		if (displayTimeZone && !this.tzWarning && !moment.tz) this.tzWarning = true;
+	localDate(date, format) {
+		const zone = this.getZone();
+		if (date === void 0) return this.localize(DateTime.now());
+		if (typeof date === "string") return this.localize(DateTime.fromFormat(date, format, {
+			zone,
+			locale: this.props.locale
+		}));
+		if (DateTime.isDateTime(date)) return this.localize(date);
+		return this.localize(DateTime.fromJSDate(date instanceof Date ? date : new Date(date)));
 	}
 	componentDidUpdate(prevProps) {
 		if (prevProps === this.props) return;
@@ -323,7 +309,7 @@ var Datetime = class extends React.Component {
 		[
 			"locale",
 			"utc",
-			"displayZone",
+			"displayTimeZone",
 			"dateFormat",
 			"timeFormat"
 		].forEach(function(p) {
@@ -331,49 +317,33 @@ var Datetime = class extends React.Component {
 		});
 		if (needsUpdate) this.regenerateDates();
 		if (thisProps.value && thisProps.value !== prevProps.value) this.setViewDate(thisProps.value);
-		this.checkTZ();
 	}
 	regenerateDates() {
-		const props = this.props;
-		let viewDate = this.state.viewDate.clone();
-		let selectedDate = this.state.selectedDate && this.state.selectedDate.clone();
-		if (props.locale) {
-			viewDate.locale(props.locale);
-			selectedDate && selectedDate.locale(props.locale);
-		}
-		if (props.utc) {
-			viewDate.utc();
-			selectedDate && selectedDate.utc();
-		} else if (props.displayTimeZone) {
-			viewDate.tz(props.displayTimeZone);
-			selectedDate && selectedDate.tz(props.displayTimeZone);
-		} else {
-			viewDate.locale();
-			selectedDate && selectedDate.locale();
-		}
+		const viewDate = this.localize(this.state.viewDate);
+		const selectedDate = this.state.selectedDate && this.localize(this.state.selectedDate);
 		let update = {
 			viewDate,
 			selectedDate
 		};
-		if (selectedDate && selectedDate.isValid()) update.inputValue = selectedDate.format(this.getFormat("datetime"));
+		if (selectedDate && selectedDate.isValid) update.inputValue = selectedDate.toFormat(this.getFormat("datetime"));
 		this.setState(update);
 	}
 	getSelectedDate() {
 		if (this.props.value === void 0) return this.state.selectedDate;
 		let selectedDate = this.parseDate(this.props.value, this.getFormat("datetime"));
-		return selectedDate && selectedDate.isValid() ? selectedDate : false;
+		return selectedDate && selectedDate.isValid ? selectedDate : false;
 	}
 	getInitialInputValue(selectedDate) {
 		const props = this.props;
 		if (props.inputProps.value) return props.inputProps.value;
-		if (selectedDate && selectedDate.isValid()) return selectedDate.format(this.getFormat("datetime"));
+		if (selectedDate && selectedDate.isValid) return selectedDate.toFormat(this.getFormat("datetime"));
 		if (props.value && typeof props.value === "string") return props.value;
 		if (props.initialValue && typeof props.initialValue === "string") return props.initialValue;
 		return "";
 	}
 	getInputValue() {
 		let selectedDate = this.getSelectedDate();
-		return selectedDate ? selectedDate.format(this.getFormat("datetime")) : this.state.inputValue;
+		return selectedDate ? selectedDate.toFormat(this.getFormat("datetime")) : this.state.inputValue;
 	}
 	/**
 	* Set the date that is currently shown in the calendar.
@@ -386,10 +356,8 @@ var Datetime = class extends React.Component {
 			return console.log("Invalid date passed to the `setViewDate` method: " + date);
 		};
 		if (!date) return logError();
-		let viewDate;
-		if (typeof date === "string") viewDate = this.localMoment(date, this.getFormat("datetime"));
-		else viewDate = this.localMoment(date);
-		if (!viewDate || !viewDate.isValid()) return logError();
+		const viewDate = this.localDate(date, this.getFormat("datetime"));
+		if (!viewDate || !viewDate.isValid) return logError();
 		this.setState({ viewDate });
 	}
 	/**

package/ui/Forms/DatePicker/Datetime/types.d.ts

@@ -1,5 +1,5 @@
 import type { FocusEvent, FocusEventHandler, ReactNode } from 'react';
-import type { Moment } from 'moment';
+import type { DateTime } from 'luxon';
 export type ViewMode = 'years' | 'months' | 'days' | 'time';
 export interface TimeConstraint {
     min: number;
@@ -12,11 +12,11 @@ export interface TimeConstraints {
     seconds?: TimeConstraint;
     milliseconds?: TimeConstraint;
 }
-type EventOrValueHandler<Event> = (event: Event | Moment | string) => void;
+type EventOrValueHandler<Event> = (event: Event | DateTime | string) => void;
 export interface DatetimepickerProps {
-    value?: Date | string | Moment;
-    initialValue?: Date | string | Moment;
-    initialViewDate?: Date | string | Moment;
+    value?: Date | string | DateTime;
+    initialValue?: Date | string | DateTime;
+    initialViewDate?: Date | string | DateTime;
     initialViewMode?: ViewMode;
     updateOnView?: string;
     dateFormat?: boolean | string;
@@ -26,11 +26,11 @@ export interface DatetimepickerProps {
     locale?: string;
     utc?: boolean;
     displayTimeZone?: string;
-    onChange?: (value: Moment | string) => void;
+    onChange?: (value: DateTime | string) => void;
     onOpen?: FocusEventHandler<any>;
     onClose?: EventOrValueHandler<FocusEvent<any>>;
     onNavigate?: (viewMode: string) => void;
-    onBeforeNavigate?: (nextView: string, currentView: string, viewDate: Moment) => string;
+    onBeforeNavigate?: (nextView: string, currentView: string, viewDate: DateTime) => string;
     onNavigateBack?: (amount: number, type: string) => void;
     onNavigateForward?: (amount: number, type: string) => void;
     className?: string;
@@ -41,7 +41,6 @@ export interface DatetimepickerProps {
     renderMonth?: (props: any, month: number, year: number, selectedDate: any) => ReactNode;
     renderYear?: (props: any, year: number, selectedDate: any) => ReactNode;
     renderInput?: (props: any, openCalendar: Function, closeCalendar: Function) => ReactNode;
-    strictParsing?: boolean;
     closeOnSelect?: boolean;
     timeConstraints?: TimeConstraints;
     closeOnClickOutside?: boolean;
@@ -52,8 +51,8 @@ export interface DatetimepickerProps {
 export interface DatetimepickerState {
     updateOn: string;
     inputFormat: string;
-    viewDate: Moment;
-    selectedDate: Moment;
+    viewDate: DateTime;
+    selectedDate: DateTime;
     inputValue: string;
     open: boolean;
     secondValue?: Date | null;

package/ui/Forms/DatePicker/Datetime/utils/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const MOMENT_TOKEN_PATTERN: RegExp;
+export declare const LUXON_TOKENS: Record<string, string>;
+export declare const LOCALE_DATE_FORMAT = "D";
+export declare const LOCALE_TIME_FORMAT = "t";

package/ui/Forms/DatePicker/Datetime/utils/constants.js

@@ -0,0 +1,26 @@
+//#region packages/ui/Forms/DatePicker/Datetime/utils/constants.ts
+const MOMENT_TOKEN_PATTERN = /\[([^\]]*)]|YYYY|YY|MMMM|MMM|MM|M|DD|D|HH|H|hh|h|mm|m|ss|s|A|a/g;
+const LUXON_TOKENS = {
+	YYYY: "yyyy",
+	YY: "yy",
+	MMMM: "MMMM",
+	MMM: "MMM",
+	MM: "MM",
+	M: "M",
+	DD: "dd",
+	D: "d",
+	HH: "HH",
+	H: "H",
+	hh: "hh",
+	h: "h",
+	mm: "mm",
+	m: "m",
+	ss: "ss",
+	s: "s",
+	A: "a",
+	a: "a"
+};
+const LOCALE_DATE_FORMAT = "D";
+const LOCALE_TIME_FORMAT = "t";
+//#endregion
+export { LOCALE_DATE_FORMAT, LOCALE_TIME_FORMAT, LUXON_TOKENS, MOMENT_TOKEN_PATTERN };

package/ui/Forms/DatePicker/Datetime/utils/toLuxonFormat.d.ts

@@ -0,0 +1,3 @@
+type ToLuxonFormatType = (format: string) => string;
+export declare const toLuxonFormat: ToLuxonFormatType;
+export {};

package/ui/Forms/DatePicker/Datetime/utils/toLuxonFormat.js

@@ -0,0 +1,8 @@
+import { LUXON_TOKENS, MOMENT_TOKEN_PATTERN } from "./constants.js";
+//#region packages/ui/Forms/DatePicker/Datetime/utils/toLuxonFormat.ts
+const toLuxonFormat = (format) => format.replace(MOMENT_TOKEN_PATTERN, (token, escaped) => {
+	if (escaped === void 0) return LUXON_TOKENS[token];
+	return escaped ? `'${escaped}'` : "";
+});
+//#endregion
+export { toLuxonFormat };

package/ui/Forms/DatePicker/Datetime/views/DaysView.js

@@ -3,6 +3,7 @@ import { Timepicker } from "../components/Timepicker/Timepicker.js";
 import "../components/Timepicker/index.js";
 import ViewNavigation from "../components/ViewNavigation.js";
 import React from "react";
+import { DateTime, Info } from "luxon";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Forms/DatePicker/Datetime/views/DaysView.tsx
 var DaysView = class extends React.Component {
@@ -17,7 +18,7 @@ var DaysView = class extends React.Component {
 			isValidDate: () => true,
 			renderDay: (props, date) => /* @__PURE__ */ jsx("td", {
 				...props,
-				children: date.date()
+				children: date.day
 			})
 		};
 	}
@@ -33,28 +34,27 @@ var DaysView = class extends React.Component {
 	}
 	renderNavigation() {
 		const date = this.props.viewDate;
-		const locale = date.localeData();
 		const label = this.props.label;
 		return /* @__PURE__ */ jsx(ViewNavigation, {
 			onClickPrev: () => this.props.navigate(-1, "months"),
 			onClickSwitch: () => this.props.showView("months"),
 			onClickNext: () => this.props.navigate(1, "months"),
-			switchContent: locale.months(date, "DD[]MMMM") + " " + date.year(),
+			switchContent: date.toFormat("LLLL yyyy"),
 			switchColSpan: 3,
 			label,
-			switchProps: { "data-value": this.props.viewDate.month() }
+			switchProps: { "data-value": this.props.viewDate.month - 1 }
 		});
 	}
 	renderDayHeaders() {
-		return /* @__PURE__ */ jsx("tr", { children: getDaysOfWeek(this.props.viewDate.localeData()).map((day, index) => /* @__PURE__ */ jsx("th", {
+		return /* @__PURE__ */ jsx("tr", { children: getDaysOfWeek(this.props.viewDate.locale).map((day, index) => /* @__PURE__ */ jsx("th", {
 			className: "dow",
 			children: day
 		}, day + index)) });
 	}
 	renderDays() {
 		const date = this.props.viewDate;
-		const startOfMonth = date.clone().startOf("month");
-		const endOfMonth = date.clone().endOf("month");
+		const startOfMonth = date.startOf("month");
+		const endOfMonth = date.endOf("month");
 		let rows = [
 			[],
 			[],
@@ -63,38 +63,38 @@ var DaysView = class extends React.Component {
 			[],
 			[]
 		];
-		let startDate = date.clone().subtract(1, "months");
-		startDate.date(startDate.daysInMonth()).startOf("week");
-		let endDate = startDate.clone().add(42, "d");
+		let startDate = date.minus({ months: 1 }).endOf("month").startOf("week", { useLocaleWeeks: true });
+		let endDate = startDate.plus({ days: 42 });
 		let i = 0;
-		while (startDate.isBefore(endDate)) {
+		while (startDate < endDate) {
 			getRow(rows, i++).push(this.renderDay(startDate, startOfMonth, endOfMonth));
-			startDate.add(1, "d");
+			startDate = startDate.plus({ days: 1 });
 		}
-		return rows.map((r, i) => /* @__PURE__ */ jsx("tr", { children: r }, `${endDate.month()}_${i}`));
+		return rows.map((r, i) => /* @__PURE__ */ jsx("tr", { children: r }, `${endDate.month}_${i}`));
 	}
 	renderDay(date, startOfMonth, endOfMonth) {
 		let selectedDate = this.props.selectedDate;
 		let secondValue = this.props.secondValue;
 		let dayProps = {
-			key: date.format("M_D"),
-			"data-value": date.date(),
-			"data-month": date.month(),
-			"data-year": date.year()
+			key: date.toFormat("M_d"),
+			"data-value": date.day,
+			"data-month": date.month,
+			"data-year": date.year
 		};
+		const second = secondValue && DateTime.fromJSDate(secondValue).setZone(date.zone);
 		let className = "rdtDay";
-		if (date.isBefore(startOfMonth)) className += " rdtOld";
-		else if (date.isAfter(endOfMonth)) className += " rdtNew";
-		if (secondValue && date.isBefore(secondValue) && date.isAfter(selectedDate)) className += " rdtActiveRange";
-		if (secondValue && date.isAfter(secondValue) && date.isBefore(selectedDate)) className += " rdtActiveRange";
-		if (selectedDate && date.isSame(selectedDate, "day")) className += " rdtActive";
-		if (secondValue && date.isSame(secondValue, "day")) className += " rdtActiveSecond";
-		if (date.isSame(this.props.moment(), "day")) className += " rdtToday";
+		if (date < startOfMonth) className += " rdtOld";
+		else if (date > endOfMonth) className += " rdtNew";
+		if (second && selectedDate && date < second && date > selectedDate) className += " rdtActiveRange";
+		if (second && selectedDate && date > second && date < selectedDate) className += " rdtActiveRange";
+		if (selectedDate && date.hasSame(selectedDate, "day")) className += " rdtActive";
+		if (second && date.hasSame(second, "day")) className += " rdtActiveSecond";
+		if (date.hasSame(DateTime.now().setZone(date.zone), "day")) className += " rdtToday";
 		if (this.props.isValidDate(date) && !this.props.others?.dateTypeRepeater && !this.props.disabled) dayProps.onClick = this._setDate;
 		else className += " rdtDisabled";
 		if (this.props.others?.dateTypeRepeater || this.props.disabled) className += " rdtDisabled";
 		dayProps.className = className;
-		return this.props.renderDay(dayProps, date.clone(), selectedDate && selectedDate.clone());
+		return this.props.renderDay(dayProps, date, selectedDate);
 	}
 	renderFooter() {
 		const setTime = this.props.setTime;
@@ -123,19 +123,10 @@ var DaysView = class extends React.Component {
 function getRow(rows, day) {
 	return rows[Math.floor(day / 7)];
 }
-/**
-* Get a list of the days of the week
-* depending on the current locale
-* @return {array} A list with the shortname of the days
-*/
 function getDaysOfWeek(locale) {
-	const first = locale.firstDayOfWeek();
-	let dow = [];
-	let i = 0;
-	locale._weekdaysMin.forEach(function(day) {
-		dow[(7 + i++ - first) % 7] = day;
-	});
-	return dow;
+	const weekdays = Info.weekdays("short", { locale }).map((day) => day.slice(0, 2));
+	const firstDayIndex = Info.getStartOfWeek({ locale }) - 1;
+	return [...weekdays.slice(firstDayIndex), ...weekdays.slice(0, firstDayIndex)];
 }
 //#endregion
 export { DaysView as default };

package/ui/Forms/DatePicker/Datetime/views/MonthsView.js

@@ -1,5 +1,6 @@
 import ViewNavigation from "../components/ViewNavigation.js";
 import React from "react";
+import { Info } from "luxon";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Forms/DatePicker/Datetime/views/MonthsView.tsx
 var MonthsView = class extends React.Component {
@@ -16,11 +17,12 @@ var MonthsView = class extends React.Component {
 		});
 	}
 	renderNavigation() {
+		let year = this.props.viewDate.year;
 		return /* @__PURE__ */ jsx(ViewNavigation, {
 			onClickPrev: () => this.props.navigate(-1, "years"),
 			onClickSwitch: () => this.props.showView("years"),
 			onClickNext: () => this.props.navigate(1, "years"),
-			switchContent: this.props.viewDate.year(),
+			switchContent: year,
 			switchColSpan: "2"
 		});
 	}
@@ -39,14 +41,14 @@ var MonthsView = class extends React.Component {
 		let onClick;
 		if (this.isDisabledMonth(month)) className += " rdtDisabled";
 		else onClick = this._updateSelectedMonth;
-		if (selectedDate && selectedDate.year() === this.props.viewDate.year() && selectedDate.month() === month) className += " rdtActive";
+		if (selectedDate && selectedDate.year === this.props.viewDate.year && selectedDate.month === month + 1) className += " rdtActive";
 		let props = {
 			key: month,
 			className,
-			"data-value": month,
+			"data-value": month + 1,
 			onClick
 		};
-		if (this.props.renderMonth) return this.props.renderMonth(props, month, this.props.viewDate.year(), this.props.selectedDate && this.props.selectedDate.clone());
+		if (this.props.renderMonth) return this.props.renderMonth(props, month, this.props.viewDate.year, this.props.selectedDate);
 		return /* @__PURE__ */ jsx("td", {
 			...props,
 			children: this.getMonthText(month)
@@ -55,14 +57,14 @@ var MonthsView = class extends React.Component {
 	isDisabledMonth(month) {
 		let isValidDate = this.props.isValidDate;
 		if (!isValidDate) return false;
-		let date = this.props.viewDate.clone().set({ month });
-		let day = date.endOf("month").date() + 1;
-		while (day-- > 1) if (isValidDate(date.date(day))) return false;
+		let date = this.props.viewDate.set({ month: month + 1 });
+		let day = date.daysInMonth + 1;
+		while (day-- > 1) if (isValidDate(date.set({ day }))) return false;
 		return true;
 	}
 	getMonthText(month) {
-		const localMoment = this.props.viewDate;
-		return capitalize(localMoment.localeData().monthsShort(localMoment.month(month)).substring(0, 3));
+		const monthStr = Info.months("short", { locale: this.props.viewDate.locale })[month];
+		return capitalize(monthStr.substring(0, 3));
 	}
 };
 function getRow(rows, year) {

package/ui/Forms/DatePicker/Datetime/views/YearsView.js

@@ -54,22 +54,22 @@ var YearsView = class extends React.Component {
 			"data-value": year,
 			onClick
 		};
-		return this.props.renderYear(props, year, this.props.selectedDate && this.props.selectedDate.clone());
+		return this.props.renderYear(props, year, this.props.selectedDate);
 	}
 	getViewYear() {
-		return parseInt(this.props.viewDate.year() / 10, 10) * 10;
+		return parseInt(this.props.viewDate.year / 10, 10) * 10;
 	}
 	getSelectedYear() {
-		return this.props.selectedDate && this.props.selectedDate.year();
+		return this.props.selectedDate && this.props.selectedDate.year;
 	}
 	isDisabledYear(year) {
 		let cache = this.disabledYearsCache;
 		if (cache[year] !== void 0) return cache[year];
 		let isValidDate = this.props.isValidDate;
 		if (!isValidDate) return false;
-		let date = this.props.viewDate.clone().set({ year });
-		let day = date.endOf("year").dayOfYear() + 1;
-		while (day-- > 1) if (isValidDate(date.dayOfYear(day))) {
+		let date = this.props.viewDate.set({ year });
+		let day = date.daysInYear + 1;
+		while (day-- > 1) if (isValidDate(date.set({ ordinal: day }))) {
 			cache[year] = false;
 			return false;
 		}

package/ui/Forms/DatePicker/stories/hooks/useOnChange.d.ts

@@ -1,5 +1,4 @@
-import type { Moment } from 'moment';
 export declare const useOnChange: () => {
     value: string | Date;
-    handleChange: (next: string | Date | Moment) => void;
+    handleChange: (next: string | Date) => void;
 };

package/ui/Forms/Input/Input.js

@@ -66,7 +66,6 @@ const Input = ({ appearance = "primary", type, name, label, value, icon, variant
 					className: `${appearance} ${checkIconPlacement}`,
 					type,
 					name,
-					"data-cy": name ? `${name}Inp` : void 0,
 					"data-testid": name ? `input-${name}` : void 0,
 					value,
 					$isInvalid,

package/ui/Modules/CommonGrid/components/ActionHead/ActionHead.js

@@ -93,7 +93,6 @@ const ActionHead = ({ gridActions, gridSelectors, actionOptions, onBatchAction,
 			onClick: checkAll,
 			appearance: "secondary",
 			variant: "default",
-			"data-cy": "checkAllBtn",
 			disabled: checked,
 			children: /* @__PURE__ */ jsx(Trans, {
 				id: "dataGrid.checkAll",
@@ -105,7 +104,6 @@ const ActionHead = ({ gridActions, gridSelectors, actionOptions, onBatchAction,
 			onClick: processCheckedValues,
 			appearance: "primary",
 			variant: "default",
-			"data-cy": "exportBtn",
 			disabled: !rowsData.length,
 			children: processCheckedValuesTitle || /* @__PURE__ */ jsx(Trans, {
 				id: "dataGrid.actionOptions.export",

package/ui/Modules/CommonGrid/components/ButtonMore/ButtonMore.js

@@ -32,7 +32,6 @@ const ButtonMore = ({ items, disabled, dropdownPosition }) => {
 			appearance: "secondary",
 			variant: "icon",
 			type: "button",
-			"data-cy": "gridActionBtn",
 			disabled
 		}), /* @__PURE__ */ jsx(StyledDropdownMenu, {
 			showMenu: actionsVisible,

package/ui/Modules/CommonGrid/components/ControlButtons/ControlButtons.js

@@ -67,7 +67,6 @@ const ControlButtons = ({ extraControlButtons, gridActions, gridSelectors, quick
 				onClick: onClearSettings,
 				variant: "default",
 				appearance: "secondary",
-				"data-cy": "resetFiltersBtn",
 				children: /* @__PURE__ */ jsx(Trans, {
 					id: "dataGrid.buttonClearSettings",
 					message: "Reset"
@@ -78,7 +77,6 @@ const ControlButtons = ({ extraControlButtons, gridActions, gridSelectors, quick
 			type: "button",
 			appearance: filtersCount ? "primary" : "tertiary",
 			onClick: onOpenMobileFilters,
-			"data-cy": "mobileFilterBtn",
 			children: [/* @__PURE__ */ jsx(Filter, { fill: filtersCount ? "white" : red }), /* @__PURE__ */ jsxs(H6, {
 				variant: "semiBold",
 				mt: 0,
@@ -101,7 +99,6 @@ const ControlButtons = ({ extraControlButtons, gridActions, gridSelectors, quick
 				appearance: sortCount ? "primary" : "tertiary",
 				onClick: onOpenMobileSorting,
 				disabled: isSortTerminated,
-				"data-cy": "mobileSortBtn",
 				children: [/* @__PURE__ */ jsx(Sort, { stroke: sortCount ? "white" : red }), /* @__PURE__ */ jsxs(H6, {
 					variant: "semiBold",
 					mt: 0,
@@ -158,8 +155,7 @@ const ControlButtons = ({ extraControlButtons, gridActions, gridSelectors, quick
 			title: i18n._({
 				id: "dataGrid.share.title",
 				message: "Share"
-			}),
-			"data-cy": "shareGridBtn"
+			})
 		})] }),
 		displayManageColumnButton && !isMobile && /* @__PURE__ */ jsx(StyledColumnButton, {
 			type: "button",

package/ui/Modules/CommonGrid/components/Filters/NumberRange/NumberRange.js

@@ -127,7 +127,6 @@ const NumberRange = (props) => {
 			name,
 			value: fieldValue,
 			label,
-			"data-cy": `${name}Inp`,
 			onChange: onChangeTextInput,
 			iconOnClick: togglePicker,
 			icon: "ellipsisVertical",

package/ui/Modules/CommonGrid/components/Filters/TextRange/TextRange.js

@@ -139,7 +139,6 @@ const TextRange = (props) => {
 		children: [/* @__PURE__ */ jsx(Input, {
 			name,
 			"data-test": name,
-			"data-cy": `${name}Inp`,
 			value: fieldValue,
 			label,
 			onChange: onChangeTextInput,

package/ui/Modules/CommonGrid/components/gridCells/EnumInCell.js

@@ -21,7 +21,6 @@ const EnumInCell = ({ value, enumObj, appearanceMap, size }) => {
 		children: /* @__PURE__ */ jsx(HighlightBox_default, {
 			...coloringProp,
 			size,
-			prefix: "grid",
 			children: finalLabel
 		})
 	});

package/ui/Modules/CommonGrid/components/gridCells/IconButtonInCell.js

@@ -8,7 +8,6 @@ import { Link } from "react-router-dom";
 const IconButtonInCell = ({ icon, isLoading, onClick, linkTo }) => {
 	return /* @__PURE__ */ jsx(Fragment, { children: isLoading ? /* @__PURE__ */ jsx(Spinner, { variant: "sm" }) : linkTo ? /* @__PURE__ */ jsx(Link, {
 		to: linkTo,
-		"data-cy": `${icon ?? ""}IconBtn`,
 		children: /* @__PURE__ */ jsx(Icon, {
 			icon: icon || "warning",
 			size: "16px",
@@ -16,7 +15,6 @@ const IconButtonInCell = ({ icon, isLoading, onClick, linkTo }) => {
 		})
 	}) : /* @__PURE__ */ jsx(x.span, {
 		onClick,
-		"data-cy": `${icon ?? ""}IconBtn`,
 		cursor: "pointer",
 		h: "100%",
 		display: "flex",

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

@@ -1,2 +0,0 @@
-export declare const CustomInput: (props: any) => any;
-export default CustomInput;

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

@@ -1,13 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { components } from "react-select";
-//#region packages/ui/Elements/Select/components/CustomInput.tsx
-const CustomInput = (props) => {
-	const { name } = props.selectProps;
-	const value = !!name ? `${name}Inp` : props.id;
-	return /* @__PURE__ */ jsx(components.Input, {
-		...props,
-		"data-cy": value
-	});
-};
-//#endregion
-export { CustomInput, CustomInput as default };