@antscorp/antsomi-ui 1.3.3-beta.47 → 1.3.3-beta.49

package/es/components/molecules/DatePicker/components/AdvancedPicker/constants.d.ts

@@ -1,68 +1,68 @@
-import { TAdvancedType } from './types';
-export declare const DATE_TYPES: {
-    value: string;
-    label: string;
-}[];
-export declare const CALCULATION_TYPES: {
-    value: string;
-    label: string;
-}[];
-export declare const CALCULATION_DATES: {
-    value: string;
-    label: string;
-}[];
-export declare const VALUE_TYPES: {
-    readonly INPUT_TEXT: "INPUT_TEXT";
-    readonly INPUT_NUMBER: "INPUT_NUMBER";
-    readonly MATCHES_ANY: "MATCHES_ANY";
-    readonly YEAR: "YEAR";
-    readonly YEAR_QUARTER: "YEAR_QUARTER";
-    readonly YEAR_MONTH: "YEAR_MONTH";
-    readonly YEAR_WEEK: "YEAR_WEEK";
-    readonly YEAR_MONTH_DAY: "YEAR_MONTH_DAY";
-    readonly YEAR_MONTH_DAY_HOUR: "YEAR_MONTH_DAY_HOUR";
-    readonly YEAR_MONTH_DAY_MINUTE: "YEAR_MONTH_DAY_MINUTE";
-    readonly YEAR_MONTH_DAY_SECOND: "YEAR_MONTH_DAY_SECOND";
-    readonly QUARTER: "QUARTER";
-    readonly MONTH: "MONTH";
-    readonly WEEK: "WEEK";
-    readonly MONTH_DAY: "MONTH_DAY";
-    readonly DAY_OF_WEEK: "DAY_OF_WEEK";
-    readonly DAY: "DAY";
-    readonly HOUR: "HOUR";
-    readonly MINUTE: "MINUTE";
-    readonly INPUT_TEXT_NO_FIELD: "INPUT_TEXT_NO_FIELD";
-};
-export declare const DEFAULT_DATE_FORMAT = "YYYYMMDDHHmmss";
-export declare const DEFAULT_TIME_FORMAT = "HH:mm:ss";
-export declare const DEFAULT_DATE_DISPLAY_FORMAT = "DD/MM/YYYY HH:mm:ss";
-export declare const TIME_PICKER_TYPE: {
-    DATE_TIME: string;
-    DATE_HOUR: string;
-    DATE_HOUR_MINUTE: string;
-    DATE: string;
-};
-export declare const YEAR_PICKER_TYPE: {
-    YEAR: string;
-    MONTH: string;
-    QUARTER: string;
-};
-export declare const ADVANCED_PICKER_TYPE: Record<string, {
-    value: TAdvancedType;
-    label: string;
-}>;
-export declare const MONTH_LABEL_SHORT: string[];
-export declare const MONTH_LABEL_FULL: string[];
-export declare const DAY_LABEL_SHORT: string[];
-export declare const WEEK_ARR: number[];
-export declare const MONTH_DAY_31: number[];
-export declare const MONTH_DAY_30: number[];
-export declare const MONTH_DAY_FEB: number[];
-export declare const MONTH_31: number[];
-export declare const MONTH_30: number[];
-export declare const DAY_OF_MONTH: number[][];
-/** The year with full 366 days of year, use for select day/day of month with include edge case (February 29th) */
-export declare const ANCHOR_LEAP_YEAR = 2024;
-export declare const QUARTER_PLACEHOLDER = "%q%";
-export declare const WEEK_PLACEHOLDER = "%t%";
-export declare const HIDE_TIME_LABEL_ARR: string[];
+import { TAdvancedType } from './types';
+export declare const DATE_TYPES: {
+    value: string;
+    label: string;
+}[];
+export declare const CALCULATION_TYPES: {
+    value: string;
+    label: string;
+}[];
+export declare const CALCULATION_DATES: {
+    value: string;
+    label: string;
+}[];
+export declare const VALUE_TYPES: {
+    readonly INPUT_TEXT: "INPUT_TEXT";
+    readonly INPUT_NUMBER: "INPUT_NUMBER";
+    readonly MATCHES_ANY: "MATCHES_ANY";
+    readonly YEAR: "YEAR";
+    readonly YEAR_QUARTER: "YEAR_QUARTER";
+    readonly YEAR_MONTH: "YEAR_MONTH";
+    readonly YEAR_WEEK: "YEAR_WEEK";
+    readonly YEAR_MONTH_DAY: "YEAR_MONTH_DAY";
+    readonly YEAR_MONTH_DAY_HOUR: "YEAR_MONTH_DAY_HOUR";
+    readonly YEAR_MONTH_DAY_MINUTE: "YEAR_MONTH_DAY_MINUTE";
+    readonly YEAR_MONTH_DAY_SECOND: "YEAR_MONTH_DAY_SECOND";
+    readonly QUARTER: "QUARTER";
+    readonly MONTH: "MONTH";
+    readonly WEEK: "WEEK";
+    readonly MONTH_DAY: "MONTH_DAY";
+    readonly DAY_OF_WEEK: "DAY_OF_WEEK";
+    readonly DAY: "DAY";
+    readonly HOUR: "HOUR";
+    readonly MINUTE: "MINUTE";
+    readonly INPUT_TEXT_NO_FIELD: "INPUT_TEXT_NO_FIELD";
+};
+export declare const DEFAULT_DATE_FORMAT = "YYYYMMDDHHmmss";
+export declare const DEFAULT_TIME_FORMAT = "HH:mm:ss";
+export declare const DEFAULT_DATE_DISPLAY_FORMAT = "DD/MM/YYYY HH:mm:ss";
+export declare const TIME_PICKER_TYPE: {
+    DATE_TIME: string;
+    DATE_HOUR: string;
+    DATE_HOUR_MINUTE: string;
+    DATE: string;
+};
+export declare const YEAR_PICKER_TYPE: {
+    YEAR: string;
+    MONTH: string;
+    QUARTER: string;
+};
+export declare const ADVANCED_PICKER_TYPE: Record<string, {
+    value: TAdvancedType;
+    label: string;
+}>;
+export declare const MONTH_LABEL_SHORT: string[];
+export declare const MONTH_LABEL_FULL: string[];
+export declare const DAY_LABEL_SHORT: string[];
+export declare const WEEK_ARR: number[];
+export declare const MONTH_DAY_31: number[];
+export declare const MONTH_DAY_30: number[];
+export declare const MONTH_DAY_FEB: number[];
+export declare const MONTH_31: number[];
+export declare const MONTH_30: number[];
+export declare const DAY_OF_MONTH: number[][];
+/** The year with full 366 days of year, use for select day/day of month with include edge case (February 29th) */
+export declare const ANCHOR_LEAP_YEAR = 2024;
+export declare const QUARTER_PLACEHOLDER = "%q%";
+export declare const WEEK_PLACEHOLDER = "%t%";
+export declare const HIDE_TIME_LABEL_ARR: string[];

package/es/components/molecules/DatePicker/components/AdvancedPicker/constants.js

@@ -1,140 +1,140 @@
-export const DATE_TYPES = [
-    { value: 'today', label: 'datePicker.dateTypes.today' },
-    { value: 'first_day_of_week_mon_sun', label: 'datePicker.dateTypes.firstDayOfWeekMonSun' },
-    { value: 'first_day_of_week_sun_sat', label: 'datePicker.dateTypes.firstDayOfWeekSunSat' },
-    { value: 'first_day_of_month', label: 'datePicker.dateTypes.firstDayOfMonth' },
-    { value: 'first_day_of_quarter', label: 'datePicker.dateTypes.firstDayOfQuarter' },
-    { value: 'first_day_of_year', label: 'datePicker.dateTypes.firstDayOfYear' },
-    { value: 'last_day_of_week_mon_sun', label: 'datePicker.dateTypes.lastDayOfWeekMonSun' },
-    { value: 'last_day_of_week_sun_sat', label: 'datePicker.dateTypes.lastDayOfWeekSunSat' },
-    { value: 'last_day_of_month', label: 'datePicker.dateTypes.lastDayOfMonth' },
-    { value: 'last_day_of_quarter', label: 'datePicker.dateTypes.lastDayOfQuarter' },
-    { value: 'last_day_of_year', label: 'datePicker.dateTypes.lastDayOfYear' },
-    { value: 'fixed', label: 'datePicker.dateTypes.fixed' },
-];
-export const CALCULATION_TYPES = [
-    { value: 'minus', label: 'global.minus' },
-    { value: 'plus', label: 'global.plus' },
-];
-export const CALCULATION_DATES = [
-    { value: 'seconds', label: 'datePicker.seconds' },
-    { value: 'minutes', label: 'datePicker.minutes' },
-    { value: 'hours', label: 'datePicker.hours' },
-    { value: 'days', label: 'datePicker.days' },
-    { value: 'weeks', label: 'datePicker.weeks' },
-    { value: 'months', label: 'datePicker.months' },
-    { value: 'quarters', label: 'datePicker.quarters' },
-    { value: 'years', label: 'datePicker.years' },
-];
-export const VALUE_TYPES = {
-    INPUT_TEXT: 'INPUT_TEXT',
-    INPUT_NUMBER: 'INPUT_NUMBER',
-    MATCHES_ANY: 'MATCHES_ANY',
-    YEAR: 'YEAR',
-    YEAR_QUARTER: 'YEAR_QUARTER',
-    YEAR_MONTH: 'YEAR_MONTH',
-    YEAR_WEEK: 'YEAR_WEEK',
-    YEAR_MONTH_DAY: 'YEAR_MONTH_DAY',
-    YEAR_MONTH_DAY_HOUR: 'YEAR_MONTH_DAY_HOUR',
-    YEAR_MONTH_DAY_MINUTE: 'YEAR_MONTH_DAY_MINUTE',
-    YEAR_MONTH_DAY_SECOND: 'YEAR_MONTH_DAY_SECOND',
-    QUARTER: 'QUARTER',
-    MONTH: 'MONTH',
-    WEEK: 'WEEK',
-    MONTH_DAY: 'MONTH_DAY',
-    DAY_OF_WEEK: 'DAY_OF_WEEK',
-    DAY: 'DAY',
-    HOUR: 'HOUR',
-    MINUTE: 'MINUTE',
-    INPUT_TEXT_NO_FIELD: 'INPUT_TEXT_NO_FIELD',
-};
-export const DEFAULT_DATE_FORMAT = 'YYYYMMDDHHmmss';
-export const DEFAULT_TIME_FORMAT = 'HH:mm:ss';
-export const DEFAULT_DATE_DISPLAY_FORMAT = 'DD/MM/YYYY HH:mm:ss';
-export const TIME_PICKER_TYPE = {
-    DATE_TIME: 'DateTime',
-    DATE_HOUR: 'DateHour',
-    DATE_HOUR_MINUTE: 'DateHourMinute',
-    DATE: 'Date',
-};
-export const YEAR_PICKER_TYPE = {
-    YEAR: 'year',
-    MONTH: 'month',
-    QUARTER: 'quarter',
-};
-export const ADVANCED_PICKER_TYPE = {
-    START_DATE: {
-        value: 'startDate',
-        label: 'datePicker.startDate',
-    },
-    END_DATE: {
-        value: 'endDate',
-        label: 'datePicker.endDate',
-    },
-};
-export const MONTH_LABEL_SHORT = [
-    'Jan',
-    'Feb',
-    'Mar',
-    'Apr',
-    'May',
-    'Jun',
-    'Jul',
-    'Aug',
-    'Sep',
-    'Oct',
-    'Nov',
-    'Dec',
-];
-export const MONTH_LABEL_FULL = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-];
-export const DAY_LABEL_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'];
-export const WEEK_ARR = Array.from({ length: 53 }, (_, i) => i + 1);
-export const MONTH_DAY_31 = Array.from({ length: 31 }, (_, i) => i + 1);
-export const MONTH_DAY_30 = Array.from({ length: 30 }, (_, i) => i + 1);
-export const MONTH_DAY_FEB = Array.from({ length: 29 }, (_, i) => i + 1);
-export const MONTH_31 = [0, 2, 4, 6, 7, 9, 11];
-export const MONTH_30 = [3, 5, 8, 10];
-export const DAY_OF_MONTH = [
-    MONTH_DAY_31,
-    MONTH_DAY_FEB,
-    MONTH_DAY_31,
-    MONTH_DAY_30,
-    MONTH_DAY_31,
-    MONTH_DAY_30,
-    MONTH_DAY_31,
-    MONTH_DAY_31,
-    MONTH_DAY_30,
-    MONTH_DAY_31,
-    MONTH_DAY_30,
-    MONTH_DAY_31,
-];
-/** The year with full 366 days of year, use for select day/day of month with include edge case (February 29th) */
-export const ANCHOR_LEAP_YEAR = 2024;
-export const QUARTER_PLACEHOLDER = '%q%';
-export const WEEK_PLACEHOLDER = '%t%';
-export const HIDE_TIME_LABEL_ARR = [
-    'YEAR',
-    'YEAR_MONTH',
-    'YEAR_MONTH_DAY',
-    'QUARTER',
-    'MONTH',
-    'WEEK',
-    'HOUR',
-    'MINUTE',
-    'MONTH_DAY',
-    'DAY_OF_WEEK',
-    'DAY',
-];
+export const DATE_TYPES = [
+    { value: 'today', label: 'datePicker.dateTypes.today' },
+    { value: 'first_day_of_week_mon_sun', label: 'datePicker.dateTypes.firstDayOfWeekMonSun' },
+    { value: 'first_day_of_week_sun_sat', label: 'datePicker.dateTypes.firstDayOfWeekSunSat' },
+    { value: 'first_day_of_month', label: 'datePicker.dateTypes.firstDayOfMonth' },
+    { value: 'first_day_of_quarter', label: 'datePicker.dateTypes.firstDayOfQuarter' },
+    { value: 'first_day_of_year', label: 'datePicker.dateTypes.firstDayOfYear' },
+    { value: 'last_day_of_week_mon_sun', label: 'datePicker.dateTypes.lastDayOfWeekMonSun' },
+    { value: 'last_day_of_week_sun_sat', label: 'datePicker.dateTypes.lastDayOfWeekSunSat' },
+    { value: 'last_day_of_month', label: 'datePicker.dateTypes.lastDayOfMonth' },
+    { value: 'last_day_of_quarter', label: 'datePicker.dateTypes.lastDayOfQuarter' },
+    { value: 'last_day_of_year', label: 'datePicker.dateTypes.lastDayOfYear' },
+    { value: 'fixed', label: 'datePicker.dateTypes.fixed' },
+];
+export const CALCULATION_TYPES = [
+    { value: 'minus', label: 'global.minus' },
+    { value: 'plus', label: 'global.plus' },
+];
+export const CALCULATION_DATES = [
+    { value: 'seconds', label: 'datePicker.seconds' },
+    { value: 'minutes', label: 'datePicker.minutes' },
+    { value: 'hours', label: 'datePicker.hours' },
+    { value: 'days', label: 'datePicker.days' },
+    { value: 'weeks', label: 'datePicker.weeks' },
+    { value: 'months', label: 'datePicker.months' },
+    { value: 'quarters', label: 'datePicker.quarters' },
+    { value: 'years', label: 'datePicker.years' },
+];
+export const VALUE_TYPES = {
+    INPUT_TEXT: 'INPUT_TEXT',
+    INPUT_NUMBER: 'INPUT_NUMBER',
+    MATCHES_ANY: 'MATCHES_ANY',
+    YEAR: 'YEAR',
+    YEAR_QUARTER: 'YEAR_QUARTER',
+    YEAR_MONTH: 'YEAR_MONTH',
+    YEAR_WEEK: 'YEAR_WEEK',
+    YEAR_MONTH_DAY: 'YEAR_MONTH_DAY',
+    YEAR_MONTH_DAY_HOUR: 'YEAR_MONTH_DAY_HOUR',
+    YEAR_MONTH_DAY_MINUTE: 'YEAR_MONTH_DAY_MINUTE',
+    YEAR_MONTH_DAY_SECOND: 'YEAR_MONTH_DAY_SECOND',
+    QUARTER: 'QUARTER',
+    MONTH: 'MONTH',
+    WEEK: 'WEEK',
+    MONTH_DAY: 'MONTH_DAY',
+    DAY_OF_WEEK: 'DAY_OF_WEEK',
+    DAY: 'DAY',
+    HOUR: 'HOUR',
+    MINUTE: 'MINUTE',
+    INPUT_TEXT_NO_FIELD: 'INPUT_TEXT_NO_FIELD',
+};
+export const DEFAULT_DATE_FORMAT = 'YYYYMMDDHHmmss';
+export const DEFAULT_TIME_FORMAT = 'HH:mm:ss';
+export const DEFAULT_DATE_DISPLAY_FORMAT = 'DD/MM/YYYY HH:mm:ss';
+export const TIME_PICKER_TYPE = {
+    DATE_TIME: 'DateTime',
+    DATE_HOUR: 'DateHour',
+    DATE_HOUR_MINUTE: 'DateHourMinute',
+    DATE: 'Date',
+};
+export const YEAR_PICKER_TYPE = {
+    YEAR: 'year',
+    MONTH: 'month',
+    QUARTER: 'quarter',
+};
+export const ADVANCED_PICKER_TYPE = {
+    START_DATE: {
+        value: 'startDate',
+        label: 'datePicker.startDate',
+    },
+    END_DATE: {
+        value: 'endDate',
+        label: 'datePicker.endDate',
+    },
+};
+export const MONTH_LABEL_SHORT = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+];
+export const MONTH_LABEL_FULL = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
+export const DAY_LABEL_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'];
+export const WEEK_ARR = Array.from({ length: 53 }, (_, i) => i + 1);
+export const MONTH_DAY_31 = Array.from({ length: 31 }, (_, i) => i + 1);
+export const MONTH_DAY_30 = Array.from({ length: 30 }, (_, i) => i + 1);
+export const MONTH_DAY_FEB = Array.from({ length: 29 }, (_, i) => i + 1);
+export const MONTH_31 = [0, 2, 4, 6, 7, 9, 11];
+export const MONTH_30 = [3, 5, 8, 10];
+export const DAY_OF_MONTH = [
+    MONTH_DAY_31,
+    MONTH_DAY_FEB,
+    MONTH_DAY_31,
+    MONTH_DAY_30,
+    MONTH_DAY_31,
+    MONTH_DAY_30,
+    MONTH_DAY_31,
+    MONTH_DAY_31,
+    MONTH_DAY_30,
+    MONTH_DAY_31,
+    MONTH_DAY_30,
+    MONTH_DAY_31,
+];
+/** The year with full 366 days of year, use for select day/day of month with include edge case (February 29th) */
+export const ANCHOR_LEAP_YEAR = 2024;
+export const QUARTER_PLACEHOLDER = '%q%';
+export const WEEK_PLACEHOLDER = '%t%';
+export const HIDE_TIME_LABEL_ARR = [
+    'YEAR',
+    'YEAR_MONTH',
+    'YEAR_MONTH_DAY',
+    'QUARTER',
+    'MONTH',
+    'WEEK',
+    'HOUR',
+    'MINUTE',
+    'MONTH_DAY',
+    'DAY_OF_WEEK',
+    'DAY',
+];

package/es/components/molecules/DatePicker/components/AdvancedPicker/index.d.ts

@@ -1,3 +1,3 @@
-export { AdvancedPicker } from './AdvancedPicker';
-export type { AdvancedPickerProps } from './AdvancedPicker';
-export type { TOption as TAdvancedPickerOption } from './types';
+export { AdvancedPicker } from './AdvancedPicker';
+export type { AdvancedPickerProps } from './AdvancedPicker';
+export type { TOption as TAdvancedPickerOption } from './types';

package/es/components/molecules/DatePicker/components/AdvancedPicker/index.js

@@ -1 +1 @@
-export { AdvancedPicker } from './AdvancedPicker';
+export { AdvancedPicker } from './AdvancedPicker';

package/es/components/molecules/DatePicker/components/AdvancedPicker/styled.d.ts

@@ -1,7 +1,7 @@
-export declare const DropdownContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DropdownHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DropdownFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DatePickerHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DatePickerCustomInput: import("styled-components").StyledComponent<"input", any, {}, never>;
-export declare const DatePickerFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CalendarIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DatePickerHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DatePickerCustomInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const DatePickerFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CalendarIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/DatePicker/components/AdvancedPicker/styled.js

@@ -1,93 +1,93 @@
-var _a, _b, _c, _d, _e;
-// Libraries
-import { THEME } from '../../../../../constants';
-import styled from 'styled-components';
-export const DropdownContent = styled.div `
-  width: 230px;
-  padding: 10px 10px 0px 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
-  .custom-picker-content {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    row-gap: 12px;
-    height: 120px;
-    overflow-y: auto;
-
-    &.day-of-month-container {
-      grid-template-columns: repeat(7, 1fr);
-    }
-
-    & > .custom-picker-item {
-      padding: 2px 8px;
-      cursor: pointer;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      &.custom-picker-item-selected {
-        background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary};
-        color: #fff;
-        &:hover {
-          background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary};
-        }
-      }
-
-      &:hover {
-        background-color: rgba(34, 34, 34, 0.04);
-      }
-    }
-  }
-
-  .month-controller {
-    display: flex;
-    justify-content: space-around;
-    user-select: none;
-    i {
-      cursor: pointer;
-      &:hover {
-        color: #000;
-      }
-    }
-  }
-`;
-export const DropdownHeader = styled.div `
-  padding: 10px 10px 0px 10px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-
-  > .__title {
-    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw6};
-  }
-`;
-export const DropdownFooter = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 10px 10px 10px;
-`;
-export const DatePickerHeader = styled.div `
-  padding: 10px 10px 0px 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  line-height: 1.6 !important;
-`;
-export const DatePickerCustomInput = styled.input `
-  font-family: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.fontFamily};
-  color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw10} !important;
-`;
-export const DatePickerFooter = styled.div `
-  position: absolute;
-  bottom: 0px;
-  width: 100%;
-`;
-export const CalendarIconWrapper = styled.div `
-  display: inline-flex;
-  cursor: pointer;
-  pointer-events: all;
-`;
+var _a, _b, _c, _d, _e;
+// Libraries
+import { THEME } from '../../../../../constants';
+import styled from 'styled-components';
+export const DropdownContent = styled.div `
+  width: 230px;
+  padding: 10px 10px 0px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .custom-picker-content {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    row-gap: 12px;
+    height: 120px;
+    overflow-y: auto;
+
+    &.day-of-month-container {
+      grid-template-columns: repeat(7, 1fr);
+    }
+
+    & > .custom-picker-item {
+      padding: 2px 8px;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &.custom-picker-item-selected {
+        background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary};
+        color: #fff;
+        &:hover {
+          background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary};
+        }
+      }
+
+      &:hover {
+        background-color: rgba(34, 34, 34, 0.04);
+      }
+    }
+  }
+
+  .month-controller {
+    display: flex;
+    justify-content: space-around;
+    user-select: none;
+    i {
+      cursor: pointer;
+      &:hover {
+        color: #000;
+      }
+    }
+  }
+`;
+export const DropdownHeader = styled.div `
+  padding: 10px 10px 0px 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+
+  > .__title {
+    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw6};
+  }
+`;
+export const DropdownFooter = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px 10px 10px;
+`;
+export const DatePickerHeader = styled.div `
+  padding: 10px 10px 0px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  line-height: 1.6 !important;
+`;
+export const DatePickerCustomInput = styled.input `
+  font-family: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.fontFamily};
+  color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw10} !important;
+`;
+export const DatePickerFooter = styled.div `
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+`;
+export const CalendarIconWrapper = styled.div `
+  display: inline-flex;
+  cursor: pointer;
+  pointer-events: all;
+`;