@mailstep/design-system 0.13.1 → 0.13.3

package/package.json

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

package/ui/Blocks/Scheduler/components/DateChanger/index.d.ts

@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-import { type DatePickerType } from '../../../../Elements/DatePicker/DatePicker';
+import { type DatePickerType } from '../../../../Forms/DatePicker/DatePicker';
 type DateChangerProps = {
     isLoading?: boolean;
     isDatepickerOpen: boolean;

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

@@ -2,7 +2,7 @@ import { ArrowDown } from "../../../../Elements/Icon/icons/ArrowDown.js";
 import "../../../../Elements/Icon/index.js";
 import { Spinner } from "../../../../Elements/Spinner/Spinner.js";
 import { LanguageContext } from "../../../../ThemeProvider/ThemeProvider.js";
-import DatePicker_default from "../../../../Elements/DatePicker/index.js";
+import DatePicker_default from "../../../../Forms/DatePicker/index.js";
 import Popover from "../../../Popover/index.js";
 import { formatDate } from "../../utils/formatDate.js";
 import { ArrowContainer, DateChangerContainer } from "./styles.js";

package/ui/Blocks/Scheduler/hooks/useChangeDate.d.ts

@@ -1,4 +1,4 @@
-import { type DatePickerType } from '../../../Elements/DatePicker/DatePicker';
+import { type DatePickerType } from '../../../Forms/DatePicker/DatePicker';
 import type { SchedulerProps } from '../types';
 type Props = {
     closeDatePicker: () => void;

package/ui/{Elements → Forms}/DatePicker/DatePicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SpaceAround } from '../SpaceAround';
+import type { SpaceAround } from '../../Elements/SpaceAround';
 import type { DateTimeOthers, DatetimepickerProps } from './Datetime/types';
 import 'moment/dist/locale/cs';
 import 'moment/dist/locale/el';

package/ui/{Elements → Forms}/DatePicker/DatePicker.js

@@ -1,5 +1,5 @@
 import { LanguageContext } from "../../ThemeProvider/ThemeProvider.js";
-import SpaceAround_default from "../SpaceAround/index.js";
+import SpaceAround_default from "../../Elements/SpaceAround/index.js";
 import Datetime from "./Datetime/DateTime.js";
 import { DatePickerInput } from "./components/DatePickerInput/DatePickerInput.js";
 import "./components/DatePickerInput/index.js";
@@ -13,7 +13,7 @@ import "moment/dist/locale/el";
 import "moment/dist/locale/it";
 import "moment/dist/locale/ru";
 import "moment/dist/locale/sk";
-//#region packages/ui/Elements/DatePicker/DatePicker.tsx
+//#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 }) => {
 	const locale = useContext(LanguageContext);

package/ui/{Elements → Forms}/DatePicker/Datetime/DateTime.js

@@ -5,7 +5,7 @@ import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import moment from "moment";
 import onClickOutside from "react-onclickoutside";
-//#region packages/ui/Elements/DatePicker/Datetime/DateTime.tsx
+//#region packages/ui/Forms/DatePicker/Datetime/DateTime.tsx
 const viewModes = {
 	YEARS: "years",
 	MONTHS: "months",

package/ui/{Elements → Forms}/DatePicker/Datetime/components/DateRepeater.js

@@ -1,4 +1,4 @@
-import Icon_default from "../../../Icon/index.js";
+import Icon_default from "../../../../Elements/Icon/index.js";
 import "../types.js";
 import { DatePickerRepeatTrans } from "../../utils/constants.js";
 import { FooterRow } from "./FooterRow.js";
@@ -7,7 +7,7 @@ import { useCallback } from "react";
 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
+//#region packages/ui/Forms/DatePicker/Datetime/components/DateRepeater.tsx
 const DateRepeater = ({ onChangeOthers, others, reset }) => {
 	const handleChange = useCallback((e) => {
 		const dateTypeRepeater = e.target.value;
@@ -40,24 +40,30 @@ const DateRepeater = ({ onChangeOthers, others, reset }) => {
 			onChange: handleChange,
 			value: others?.dateTypeRepeater,
 			backgroundColor: "transparent",
-			color: "#22394E",
+			color: "typoPrimary",
 			cursor: "pointer",
 			border: "none",
 			children: [
-				/* @__PURE__ */ jsx("option", {
+				/* @__PURE__ */ jsx(x.option, {
+					color: "#333",
+					backgroundColor: "#fff",
 					value: "",
 					children: i18n._({
 						id: "dataGrid.noRepeat",
 						message: "No repeat"
 					})
 				}),
-				/* @__PURE__ */ jsx("option", {
+				/* @__PURE__ */ jsx(x.option, {
+					color: "#333",
+					backgroundColor: "#fff",
 					value: "every-today",
-					children: DatePickerRepeatTrans["every-today"]
+					children: DatePickerRepeatTrans()["every-today"]
 				}),
-				/* @__PURE__ */ jsx("option", {
+				/* @__PURE__ */ jsx(x.option, {
+					color: "#333",
+					backgroundColor: "#fff",
 					value: "every-yesterday",
-					children: DatePickerRepeatTrans["every-yesterday"]
+					children: DatePickerRepeatTrans()["every-yesterday"]
 				})
 			]
 		})] })

package/ui/{Elements → Forms}/DatePicker/Datetime/components/FooterRow.js

@@ -1,5 +1,5 @@
 import { styled } from "@xstyled/styled-components";
-//#region packages/ui/Elements/DatePicker/Datetime/components/FooterRow.tsx
+//#region packages/ui/Forms/DatePicker/Datetime/components/FooterRow.tsx
 const FooterRow = styled.div`
   display: flex;
   justify-content: space-between;

package/ui/{Elements → Forms}/DatePicker/Datetime/components/FooterRowLabel.js

@@ -1,5 +1,5 @@
 import styled$1 from "@xstyled/styled-components";
-//#region packages/ui/Elements/DatePicker/Datetime/components/FooterRowLabel.tsx
+//#region packages/ui/Forms/DatePicker/Datetime/components/FooterRowLabel.tsx
 const FooterRowLabel = styled$1.span`
   margin-left: 8px;
   text-align: left;

package/ui/{Elements → Forms}/DatePicker/Datetime/components/TimeInput.js

@@ -1,5 +1,5 @@
 import styled$1 from "@xstyled/styled-components";
-//#region packages/ui/Elements/DatePicker/Datetime/components/TimeInput.tsx
+//#region packages/ui/Forms/DatePicker/Datetime/components/TimeInput.tsx
 const TimeInput = styled$1.input`
   margin: 0;
   margin-right: -1px;

package/ui/{Elements → Forms}/DatePicker/Datetime/components/Timepicker/Timepicker.js

@@ -1,4 +1,4 @@
-import Icon from "../../../../Icon/Icon.js";
+import Icon_default from "../../../../../Elements/Icon/index.js";
 import { FooterRow } from "../FooterRow.js";
 import { FooterRowLabel } from "../FooterRowLabel.js";
 import "./constants.js";
@@ -12,7 +12,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 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
+//#region packages/ui/Forms/DatePicker/Datetime/components/Timepicker/Timepicker.tsx
 const Timepicker = ({ setTime, value, disabled }) => {
 	const hours = value?.getHours?.() ?? 0;
 	const minutes = value?.getMinutes?.() ?? 0;
@@ -112,7 +112,7 @@ const Timepicker = ({ setTime, value, disabled }) => {
 	}, [minutes]);
 	return /* @__PURE__ */ jsxs(FooterRow, {
 		disabled,
-		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Icon, { icon: "clock" }), /* @__PURE__ */ jsx(FooterRowLabel, { children: i18n._({
+		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Icon_default, { icon: "clock" }), /* @__PURE__ */ jsx(FooterRowLabel, { children: i18n._({
 			id: "dataGrid.filterCell.time",
 			message: "Time"
 		}) })] }), /* @__PURE__ */ jsx(x.div, {

package/ui/{Elements → Forms}/DatePicker/Datetime/components/Timepicker/constants.js

@@ -1,4 +1,4 @@
-//#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker/constants.ts
+//#region packages/ui/Forms/DatePicker/Datetime/components/Timepicker/constants.ts
 const HOURS_COUNT = 24;
 const MINUTES_COUNT = 60;
 const MINUTES_STEP = 5;

package/ui/{Elements → Forms}/DatePicker/Datetime/components/Timepicker/styles.js

@@ -1,6 +1,6 @@
 import styled$1 from "@xstyled/styled-components";
 import { th as th$1 } from "@xstyled/system";
-//#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker/styles.ts
+//#region packages/ui/Forms/DatePicker/Datetime/components/Timepicker/styles.ts
 const TimeButton = styled$1.button`
   transform: rotate(90deg);
   font-size: 20px;
@@ -10,14 +10,20 @@ const TimeButton = styled$1.button`
   background-color: transparent !important;
   border: none;
   color: ${th$1("colors.lightGray4")};
+
   &:disabled:hover {
     color: ${th$1("colors.lightGray4")};
     cursor: default;
   }
+
   &:hover {
     color: ${th$1("colors.red2")};
     background-color: transparent !important;
   }
+
+  &:focus {
+    outline: none;
+  }
 `;
 const TimeWrapper = styled$1.div`
   display: flex;
@@ -39,7 +45,7 @@ const TimeField = styled$1.input`
   border: none;
   outline: none;
   background-color: transparent;
-  color: ${th$1("colors.blue2")};
+  color: typoPrimary;
   &:disabled {
     opacity: 0.5;
   }

package/ui/{Elements → Forms}/DatePicker/Datetime/components/Timepicker/utils/isTimeFieldComplete.js

@@ -1,5 +1,5 @@
 import "../constants.js";
-//#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker/utils/isTimeFieldComplete.ts
+//#region packages/ui/Forms/DatePicker/Datetime/components/Timepicker/utils/isTimeFieldComplete.ts
 const isTimeFieldComplete = (text, value, max) => text.length >= 2 || value * 10 > max;
 //#endregion
 export { isTimeFieldComplete };

package/ui/{Elements → Forms}/DatePicker/Datetime/components/Timepicker/utils/padTime.js

@@ -1,4 +1,4 @@
-//#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker/utils/padTime.ts
+//#region packages/ui/Forms/DatePicker/Datetime/components/Timepicker/utils/padTime.ts
 const padTime = (value) => String(value).padStart(2, "0");
 //#endregion
 export { padTime };

package/ui/{Elements → Forms}/DatePicker/Datetime/components/Timepicker/utils/parseTimeField.js

@@ -1,4 +1,4 @@
-//#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker/utils/parseTimeField.ts
+//#region packages/ui/Forms/DatePicker/Datetime/components/Timepicker/utils/parseTimeField.ts
 const parseTimeField = (text, fallback) => {
 	if (text === "") return fallback;
 	const parsed = Number(text);

package/ui/{Elements → Forms}/DatePicker/Datetime/components/Timepicker/utils/sanitizeTimeField.js

@@ -1,5 +1,5 @@
 import "../constants.js";
-//#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker/utils/sanitizeTimeField.ts
+//#region packages/ui/Forms/DatePicker/Datetime/components/Timepicker/utils/sanitizeTimeField.ts
 const sanitizeTimeField = (text) => text.replace(/\D/g, "").slice(0, 2);
 //#endregion
 export { sanitizeTimeField };

package/ui/{Elements → Forms}/DatePicker/Datetime/components/ViewNavigation.js

@@ -1,6 +1,6 @@
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Elements/DatePicker/Datetime/components/ViewNavigation.tsx
+//#region packages/ui/Forms/DatePicker/Datetime/components/ViewNavigation.tsx
 function ViewNavigation({ onClickPrev, onClickSwitch, onClickNext, switchContent, switchColSpan, switchProps, label }) {
 	return /* @__PURE__ */ jsxs("tr", { children: [
 		/* @__PURE__ */ jsx("th", {

package/ui/{Elements → Forms}/DatePicker/Datetime/types.js

@@ -1,4 +1,4 @@
-//#region packages/ui/Elements/DatePicker/Datetime/types.ts
+//#region packages/ui/Forms/DatePicker/Datetime/types.ts
 let DatePickerRepeat = /* @__PURE__ */ function(DatePickerRepeat) {
 	DatePickerRepeat["EVERY_TODAY"] = "every-today";
 	DatePickerRepeat["EVERY_YESTERDAY"] = "every-yesterday";

package/ui/{Elements → Forms}/DatePicker/Datetime/views/DaysView.js

@@ -4,7 +4,7 @@ import "../components/Timepicker/index.js";
 import ViewNavigation from "../components/ViewNavigation.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Elements/DatePicker/Datetime/views/DaysView.tsx
+//#region packages/ui/Forms/DatePicker/Datetime/views/DaysView.tsx
 var DaysView = class extends React.Component {
 	constructor(..._args) {
 		super(..._args);

package/ui/{Elements → Forms}/DatePicker/Datetime/views/MonthsView.js

@@ -1,7 +1,7 @@
 import ViewNavigation from "../components/ViewNavigation.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Elements/DatePicker/Datetime/views/MonthsView.tsx
+//#region packages/ui/Forms/DatePicker/Datetime/views/MonthsView.tsx
 var MonthsView = class extends React.Component {
 	constructor(..._args) {
 		super(..._args);

package/ui/{Elements → Forms}/DatePicker/Datetime/views/YearsView.js

@@ -1,7 +1,7 @@
 import ViewNavigation from "../components/ViewNavigation.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Elements/DatePicker/Datetime/views/YearsView.tsx
+//#region packages/ui/Forms/DatePicker/Datetime/views/YearsView.tsx
 var YearsView = class extends React.Component {
 	constructor(..._args) {
 		super(..._args);

package/ui/{Elements → Forms}/DatePicker/components/DatePickerInput/DatePickerInput.js

@@ -1,11 +1,11 @@
-import Input_default from "../../../../Forms/Input/index.js";
+import Input_default from "../../../Input/index.js";
 import { applyDateMask } from "./utils/applyDateMask.js";
 import { countDigits } from "./utils/countDigits.js";
 import { getMaskedCaretPosition } from "./utils/getMaskedCaretPosition.js";
 import { isMaskableFormat } from "./utils/isMaskableFormat.js";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region packages/ui/Elements/DatePicker/components/DatePickerInput/DatePickerInput.tsx
+//#region packages/ui/Forms/DatePicker/components/DatePickerInput/DatePickerInput.tsx
 const DatePickerInput = ({ inputProps, openCalendar, format, name, label, error, disabled, icon, showInputLabel, onClear, onInputChange }) => {
 	const [typedValue, setTypedValue] = useState(null);
 	const inputRef = useRef(null);

package/ui/{Elements → Forms}/DatePicker/components/DatePickerInput/constants.js

@@ -1,4 +1,4 @@
-//#region packages/ui/Elements/DatePicker/components/DatePickerInput/constants.ts
+//#region packages/ui/Forms/DatePicker/components/DatePickerInput/constants.ts
 const MASKABLE_TOKENS = [
 	"DD",
 	"MM",

package/ui/{Elements → Forms}/DatePicker/components/DatePickerInput/utils/applyDateMask.js

@@ -1,5 +1,5 @@
 import { FORMAT_SLOT_PATTERN, NON_DIGIT_PATTERN } from "../constants.js";
-//#region packages/ui/Elements/DatePicker/components/DatePickerInput/utils/applyDateMask.ts
+//#region packages/ui/Forms/DatePicker/components/DatePickerInput/utils/applyDateMask.ts
 const applyDateMask = (value, format) => {
 	const digits = value.replace(NON_DIGIT_PATTERN, "");
 	let masked = "";

package/ui/{Elements → Forms}/DatePicker/components/DatePickerInput/utils/countDigits.js

@@ -1,5 +1,5 @@
 import { NON_DIGIT_PATTERN } from "../constants.js";
-//#region packages/ui/Elements/DatePicker/components/DatePickerInput/utils/countDigits.ts
+//#region packages/ui/Forms/DatePicker/components/DatePickerInput/utils/countDigits.ts
 const countDigits = (text) => text.replace(NON_DIGIT_PATTERN, "").length;
 //#endregion
 export { countDigits };

package/ui/{Elements → Forms}/DatePicker/components/DatePickerInput/utils/getMaskedCaretPosition.js

@@ -1,5 +1,5 @@
 import { DIGIT_PATTERN } from "../constants.js";
-//#region packages/ui/Elements/DatePicker/components/DatePickerInput/utils/getMaskedCaretPosition.ts
+//#region packages/ui/Forms/DatePicker/components/DatePickerInput/utils/getMaskedCaretPosition.ts
 const getMaskedCaretPosition = (maskedValue, digitsBeforeCaret) => {
 	if (digitsBeforeCaret <= 0) return 0;
 	let digits = 0;

package/ui/{Elements → Forms}/DatePicker/components/DatePickerInput/utils/isMaskableFormat.js

@@ -1,5 +1,5 @@
 import { FORMAT_TOKEN_PATTERN, MASKABLE_TOKENS } from "../constants.js";
-//#region packages/ui/Elements/DatePicker/components/DatePickerInput/utils/isMaskableFormat.ts
+//#region packages/ui/Forms/DatePicker/components/DatePickerInput/utils/isMaskableFormat.ts
 const isMaskableFormat = (format) => {
 	const tokens = format.match(FORMAT_TOKEN_PATTERN);
 	if (!tokens?.length) return false;

package/ui/{Elements → Forms}/DatePicker/index.js

@@ -1,6 +1,6 @@
 import { DatePickerRepeat, TimePickerRepeat } from "./Datetime/types.js";
 import DatePicker_default$1 from "./DatePicker.js";
-//#region packages/ui/Elements/DatePicker/index.ts
+//#region packages/ui/Forms/DatePicker/index.ts
 var DatePicker_default = DatePicker_default$1;
 //#endregion
 export { DatePickerRepeat, TimePickerRepeat, DatePicker_default as default };

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

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

package/ui/Forms/DatePicker/stories/hooks/useOnChange.js

@@ -0,0 +1,13 @@
+import { useCallback, useState } from "react";
+//#region packages/ui/Forms/DatePicker/stories/hooks/useOnChange.ts
+const useOnChange = () => {
+	const [value, setValue] = useState("");
+	return {
+		value,
+		handleChange: useCallback((next) => {
+			setValue(next);
+		}, [])
+	};
+};
+//#endregion
+export { useOnChange };

package/ui/{Elements → Forms}/DatePicker/styles.js

@@ -1,6 +1,6 @@
 import styled$1, { x } from "@xstyled/styled-components";
 import { th as th$1 } from "@xstyled/system";
-//#region packages/ui/Elements/DatePicker/styles.ts
+//#region packages/ui/Forms/DatePicker/styles.ts
 const DatePickerBase = styled$1(x.div)`
   .rdt {
     position: relative;
@@ -10,11 +10,11 @@ const DatePickerBase = styled$1(x.div)`
     position: absolute;
     z-index: 1;
     min-width: 250px;
-    color: #22394E;
-    background: #ffffff;
+    color: typoPrimary;
+    background-color: white;
     border: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 10px;
-    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+    box-shadow: 0px 4px 16px 0px rgba(255, 255, 255, 0.3);
     padding: 0.5rem 1.2rem;
     margin: 0.125rem 0rem;
   }
@@ -44,6 +44,10 @@ const DatePickerBase = styled$1(x.div)`
   .rdtPicker td {
     padding: 0 0.8rem;
   }
+  .rdtDay:not(.rdtActiveRange):hover {
+    border-radius: 0.5rem;
+  }
+
   .rdtPicker .rdtCounter .rdtBtn:hover,
   .rdtPicker .rdtYear:hover,
   .rdtPicker .rdtMonth:hover,
@@ -54,11 +58,12 @@ const DatePickerBase = styled$1(x.div)`
   .rdtPicker .rdtTimeToggle:hover,
   .rdtPicker .rdtSwitch:hover {
     background: #f8f9fa;
+    color: gray4;
     cursor: pointer;
   }
   .rdtPicker .rdtOld,
   .rdtPicker .rdtNew {
-    color: rgba(33, 37, 41, 0.3);
+    color: lightGray4;
   }
   .rdtPicker .rdtToday {
     position: relative;
@@ -191,7 +196,11 @@ const DatePickerBase = styled$1(x.div)`
   }
 
   .rdtPicker .rdtActiveRange {
-    background: #EFF3F8;
+    background-color: blue10;
+  }
+
+  .rdtPicker .rdtActiveRange:hover {
+    border-radius: 0.5rem;
   }
 
   .rdtPicker .rdtCounters > div :first-child {

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

@@ -0,0 +1,3 @@
+import { DatePickerRepeat, TimePickerRepeat } from '../Datetime/types';
+export declare const DatePickerRepeatTrans: () => Record<DatePickerRepeat, string>;
+export declare const TimePickerRepeatTrans: () => Record<TimePickerRepeat, string>;

package/ui/{Elements → Forms}/DatePicker/utils/constants.js

@@ -1,7 +1,7 @@
 import "../Datetime/types.js";
 import { i18n } from "@lingui/core";
-//#region packages/ui/Elements/DatePicker/utils/constants.ts
-const DatePickerRepeatTrans = {
+//#region packages/ui/Forms/DatePicker/utils/constants.ts
+const DatePickerRepeatTrans = () => ({
 	["every-today"]: i18n._({
 		id: "dataGrid.everyToday",
 		message: "Every today"
@@ -10,8 +10,8 @@ const DatePickerRepeatTrans = {
 		id: "dataGrid.everyYesterday",
 		message: "Every yesterday"
 	})
-};
-const TimePickerRepeatTrans = {
+});
+const TimePickerRepeatTrans = () => ({
 	["from"]: i18n._({
 		id: "dataGrid.timepicker.from",
 		message: "from"
@@ -24,6 +24,6 @@ const TimePickerRepeatTrans = {
 		id: "dataGrid.timepicker.at",
 		message: "at"
 	})
-};
+});
 //#endregion
 export { DatePickerRepeatTrans, TimePickerRepeatTrans };

package/ui/{Elements → Forms}/DatePicker/utils/getInputFormat.js

@@ -1,4 +1,4 @@
-//#region packages/ui/Elements/DatePicker/utils/getInputFormat.ts
+//#region packages/ui/Forms/DatePicker/utils/getInputFormat.ts
 const getInputFormat = (dateFormat, timeFormat) => {
 	const date = typeof dateFormat === "string" ? dateFormat : "";
 	const time = typeof timeFormat === "string" ? timeFormat : "";

package/ui/Forms/Input/styles.js

@@ -19,7 +19,7 @@ const InputIcon = styled$1.div`
   svg {
     stroke: lightGray3;
     cursor: pointer;
-    color: ${({ $isInvalid, hasValue, disabled }) => $isInvalid ? th.color("inputErrorColor") : disabled || !hasValue ? th.color("lightGray6") : th.color("blue2")};
+    color: ${({ $isInvalid, hasValue, disabled }) => $isInvalid ? th.color("inputErrorColor") : disabled || !hasValue ? th.color("lightGray6") : th.color("typoPrimary")};
   }
 `;
 const ClearableInputIcon = styled$1(InputIcon)`
@@ -60,12 +60,6 @@ const StyledInput = styled$1.input.attrs((props) => ({ as: props.$asTextArea ? "
   resize: none;
   overflow: hidden;
 
-  ~ ${InputIcon} {
-    svg {
-      stroke: lightGray3;
-    }
-  }
-
   ::placeholder {
     color: gray1;
     opacity: 1;
@@ -79,8 +73,8 @@ const StyledInput = styled$1.input.attrs((props) => ({ as: props.$asTextArea ? "
 
     ~ ${InputIcon} {
       svg {
-        stroke: blue2;
-        color: blue2;
+        stroke: typoPrimary; 
+        color: typoPrimary;
       }
     }
   }

package/ui/Modules/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.d.ts

@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-import type { DateTimeOthers } from '../../../../../Elements/DatePicker/Datetime/types';
+import type { DateTimeOthers } from '../../../../../Forms/DatePicker/Datetime/types';
 import type { FilterComponentProps } from '../../../types';
 type InitialView = 'past' | 'future';
 type DatePickerRangeProps = FilterComponentProps<Date[]> & {

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

@@ -1,6 +1,6 @@
 import { useClickOutside } from "../../../../../Blocks/Modal/hooks/useClickOutside.js";
 import Input_default from "../../../../../Forms/Input/index.js";
-import DatePicker_default from "../../../../../Elements/DatePicker/index.js";
+import DatePicker_default from "../../../../../Forms/DatePicker/index.js";
 import { getCleanValues } from "./utils/getCleanValues.js";
 import { pickerRangeToString } from "./utils/pickerRangeToString.js";
 import React, { useCallback, useMemo, useState } from "react";

package/ui/Modules/CommonGrid/components/Filters/DatePickerRange/utils/pickerRangeToString.d.ts

@@ -1,2 +1,2 @@
-import type { DateTimeOthers } from '../../../../../../Elements/DatePicker/Datetime/types';
+import type { DateTimeOthers } from '../../../../../../Forms/DatePicker/Datetime/types';
 export declare const pickerRangeToString: (values?: Date[], others?: DateTimeOthers[]) => string;

package/ui/Modules/CommonGrid/components/Filters/DatePickerRange/utils/pickerRangeToString.js

@@ -1,12 +1,12 @@
-import { DatePickerRepeatTrans, TimePickerRepeatTrans } from "../../../../../../Elements/DatePicker/utils/constants.js";
+import { DatePickerRepeatTrans, TimePickerRepeatTrans } from "../../../../../../Forms/DatePicker/utils/constants.js";
 import { sameDate } from "./sameDate.js";
 import { DateTime } from "luxon";
 //#region packages/ui/Modules/CommonGrid/components/Filters/DatePickerRange/utils/pickerRangeToString.ts
 const pickerRangeToString = (values = [], others) => {
 	if (others?.[0]?.dateTypeRepeater || others?.[1]?.dateTypeRepeater) return others.map((other, i) => {
 		if (!other?.dateTypeRepeater) return values[i] && DateTime.fromJSDate(values[i]).toFormat("dd.LL.yyyy HH:mm");
-		const repeaterDate = DatePickerRepeatTrans[other?.dateTypeRepeater];
-		return `${i === 0 ? TimePickerRepeatTrans.from : TimePickerRepeatTrans.to} ${repeaterDate} ${other?.time ? `${String(other?.time.h).padStart(2, "0")}:${String(other?.time.m).padStart(2, "0")}` : ""}`.trim();
+		const repeaterDate = DatePickerRepeatTrans()[other?.dateTypeRepeater];
+		return `${i === 0 ? TimePickerRepeatTrans().from : TimePickerRepeatTrans().to} ${repeaterDate} ${other?.time ? `${String(other?.time.h).padStart(2, "0")}:${String(other?.time.m).padStart(2, "0")}` : ""}`.trim();
 	}).filter(Boolean).join(" - ");
 	if (!values[0] && !values[1]) return "";
 	if (values[0] && !values[1] || sameDate(values[0], values[1])) return DateTime.fromJSDate(values[0]).toFormat("dd.LL.yyyy");

package/ui/index.d.ts

@@ -17,7 +17,6 @@ import Badge from './Elements/Badge';
 import BorderedBox from './Elements/BorderedBox';
 import Button from './Elements/Button';
 import Card from './Elements/Card';
-import DatePicker from './Elements/DatePicker';
 import Dropdown from './Elements/Dropdown';
 import DropdownSelect from './Elements/DropdownSelect';
 import ErrorMessage from './Elements/ErrorMessage';
@@ -39,6 +38,7 @@ import Tag from './Elements/Tag';
 import Toast from './Elements/Toast';
 import Toggle from './Elements/Toggle';
 import Typography from './Elements/Typography';
+import DatePicker from './Forms/DatePicker';
 import Checkbox from './Forms/Checkbox';
 import Input from './Forms/Input';
 import RadioButton from './Forms/RadioButton';
@@ -81,7 +81,7 @@ export * from './Forms/Input';
 export * from './Forms/RadioButton';
 export * from './ThemeProvider';
 export * from './utils';
-export * from './Elements/DatePicker';
+export * from './Forms/DatePicker';
 export * from './Modules/CommonGrid';
 export * from './Blocks/Popover';
 export * from './Elements/SingleSelect';

package/ui/index.js

@@ -133,9 +133,9 @@ import SpaceAroundWrap from "./Elements/SpaceAround/SpaceAround.js";
 import SpaceAround_default from "./Elements/SpaceAround/index.js";
 import Select_default from "./Elements/Select/index.js";
 import SingleSelect_default from "./Elements/SingleSelect/index.js";
-import { DatePickerRepeat, TimePickerRepeat } from "./Elements/DatePicker/Datetime/types.js";
+import { DatePickerRepeat, TimePickerRepeat } from "./Forms/DatePicker/Datetime/types.js";
 import Input_default from "./Forms/Input/index.js";
-import DatePicker_default from "./Elements/DatePicker/index.js";
+import DatePicker_default from "./Forms/DatePicker/index.js";
 import { useEvent } from "./Modules/CommonGrid/hooks/useEvent.js";
 import { useAddFilter } from "./Modules/CommonGrid/hooks/useAddFilter.js";
 import { types_exports } from "./Modules/CommonGrid/types.js";

package/ui/Elements/DatePicker/utils/constants.d.ts

@@ -1,3 +0,0 @@
-import { DatePickerRepeat, TimePickerRepeat } from '../Datetime/types';
-export declare const DatePickerRepeatTrans: Record<DatePickerRepeat, string>;
-export declare const TimePickerRepeatTrans: Record<TimePickerRepeat, string>;