@antscorp/antsomi-ui 1.3.3-beta.7 → 1.3.3-beta.71

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

@@ -72,3 +72,112 @@ export const ADVANCED_PICKER_TYPE = {
         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 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' },
+// ];
+// Granularity according to value type (semantic)
+export const GRANULARITY_MAPPING = {
+    YEAR: ['years'],
+    YEAR_QUARTER: ['years', 'quarters'],
+    YEAR_MONTH: ['years', 'quarters', 'months'],
+    YEAR_WEEK: ['years', 'quarters', 'months', 'weeks'],
+    YEAR_MONTH_DAY: ['years', 'quarters', 'months', 'weeks', 'days'],
+    YEAR_MONTH_DAY_HOUR: ['years', 'quarters', 'months', 'weeks', 'days', 'hours'],
+    YEAR_MONTH_DAY_MINUTE: ['years', 'quarters', 'months', 'weeks', 'days', 'hours', 'minutes'],
+    YEAR_MONTH_DAY_SECOND: [
+        'years',
+        'quarters',
+        'months',
+        'weeks',
+        'days',
+        'hours',
+        'minutes',
+        'seconds',
+    ],
+    QUARTER: ['years', 'quarters'],
+    MONTH: ['years', 'quarters', 'months'],
+    WEEK: ['years', 'quarters', 'months', 'weeks'],
+    MONTH_DAY: ['years', 'quarters', 'months', 'weeks', 'days'],
+    DAY_OF_WEEK: ['years', 'quarters', 'months', 'weeks', 'days'],
+    /** Day of Month */
+    DAY: ['years', 'quarters', 'months', 'weeks', 'days'],
+    HOUR: ['years', 'quarters', 'months', 'weeks', 'days', 'hours'],
+    MINUTE: ['years', 'quarters', 'months', 'weeks', 'days', 'hours', 'minutes'],
+    INPUT_NUMBER: ['years', 'months', 'weeks', 'days'],
+    INPUT_TEXT: ['years', 'months', 'weeks', 'days'],
+    INPUT_TEXT_NO_FIELD: ['years', 'months', 'weeks', 'days'],
+    MATCHES_ANY: ['years', 'months', 'weeks', 'days'],
+};

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

@@ -1,4 +1,4 @@
-var _a, _b, _c;
+var _a, _b, _c, _d, _e;
 // Libraries
 import { THEME } from '../../../../../constants';
 import styled from 'styled-components';
@@ -8,6 +8,50 @@ export const DropdownContent = styled.div `
   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;
@@ -17,7 +61,7 @@ export const DropdownHeader = styled.div `
   text-align: center;
 
   > .__title {
-    color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw6};
+    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw6};
   }
 `;
 export const DropdownFooter = styled.div `
@@ -34,8 +78,8 @@ export const DatePickerHeader = styled.div `
   line-height: 1.6 !important;
 `;
 export const DatePickerCustomInput = styled.input `
-  font-family: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontFamily};
-  color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw10} !important;
+  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;

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

@@ -1,3 +1,4 @@
+import { VALUE_TYPES } from './constants';
 export type TOption = {
     dateType: TDateType;
     calculationType: TCalculationType;
@@ -12,3 +13,24 @@ export type TCalculationType = 'minus' | 'plus' | '';
 export type TCalculationDate = 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'quarters' | 'years' | '';
 export type TOperatorKey = 'after' | 'between' | 'before';
 export type TAdvancedType = 'startDate' | 'endDate';
+/**
+ * @description Mapping ValueTypes to Semantic
+ * @example ```valueType -> semantic```
+ * @type YEAR -> 'YYYY'
+ * @type YEAR_QUARTER -> 'QQ YYYY'
+ * @type YEAR_MONTH -> 'MM YYYY'
+ * @type YEAR_WEEK -> 'WW YYYY'
+ * @type YEAR_MONTH_DAY -> 'MM DD YYYY'
+ * @type YEAR_MONTH_DAY_HOUR -> 'MM DD YYYY HH'
+ * @type YEAR_MONTH_DAY_MINUTE -> 'MM DD YYYY HH MM'
+ * @type YEAR_MONTH_DAY_SECOND -> 'MM DD YYYY HH MM SS'
+ * @type QUARTER -> 'QQ'
+ * @type MONTH -> 'MM'
+ * @type WEEK -> 'WW'
+ * @type MONTH_DAY -> 'MM DD'
+ * @type DAY_OF_WEEK -> 'D'
+ * @type DAY -> 'DD'
+ * @type HOUR -> 'HH'
+ * @type MINUTE -> 'MM'
+ */
+export type ValueTypes = (typeof VALUE_TYPES)[keyof typeof VALUE_TYPES];

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

@@ -1,3 +1,6 @@
+import type { Dayjs } from 'dayjs';
+import type { CellRenderInfo } from 'rc-picker/es/interface';
+import { ValueTypes } from './types';
 /**
  * Calculates a new date based on the given parameters.
  * @param {string} [dateTypeKey='today'] - Key to determine the type of date to be used as the starting point.
@@ -13,3 +16,20 @@
  * @returns {string} The new date in the specified format.
  */
 export declare const calculationDateAdvanced: (dateTypeKey?: string, calculationTypeKey?: string, calculationDateKey?: any, value?: number, dateFormat?: string) => any;
+/**
+ * Get text of calendar cell base on valueType (semantic/date format)
+ * @link https://ant.design/components/date-picker#components-date-picker-demo-cell-render
+ * @param {number | Dayjs} current params of cellRender function
+ * @param {CellRenderInfo<Dayjs>} info params of cellRender function
+ * @param {ValueTypes} valueType type of value (get from component props)
+ * @returns {number | string} label of cell according to valueType
+ */
+export declare const getCellRender: (current: number | Dayjs, valueType: ValueTypes, info: CellRenderInfo<Dayjs>) => number | string;
+/**
+ * @param {ValueTypes} valueType type of value (get from component props)
+ * @returns {'date' | 'week' | 'month' | 'quarter' | 'year'} picker ant-design props to render type of calendar
+ */
+export declare const getPickerRender: (valueType: ValueTypes) => 'date' | 'week' | 'month' | 'quarter' | 'year';
+export declare const getTimePickerRender: (valueType: ValueTypes) => "HH" | "HHmm" | "HHmmss" | "mm" | undefined;
+export declare function getLabelQuarterRange(day: string, format: string, locale: string, showYear?: boolean): string;
+export declare function getLabelQuarterRange(quarter: number, year?: number): string;

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

@@ -4,7 +4,7 @@ import dayjs from 'dayjs';
 import isoWeek from 'dayjs/plugin/isoWeek';
 import quarterOfYear from 'dayjs/plugin/quarterOfYear';
 // Constants
-import { DEFAULT_DATE_FORMAT } from './constants';
+import { DEFAULT_DATE_FORMAT, MONTH_LABEL_SHORT } from './constants';
 dayjs.extend(isoWeek);
 dayjs.extend(quarterOfYear);
 /**
@@ -82,3 +82,92 @@ export const calculationDateAdvanced = (dateTypeKey = 'today', calculationTypeKe
     }
     return newDate.format(dateFormat);
 };
+/**
+ * Get text of calendar cell base on valueType (semantic/date format)
+ * @link https://ant.design/components/date-picker#components-date-picker-demo-cell-render
+ * @param {number | Dayjs} current params of cellRender function
+ * @param {CellRenderInfo<Dayjs>} info params of cellRender function
+ * @param {ValueTypes} valueType type of value (get from component props)
+ * @returns {number | string} label of cell according to valueType
+ */
+export const getCellRender = (current, valueType, info) => {
+    if (typeof current === 'number')
+        return current;
+    if (info.type === 'decade')
+        return `${current.year()}-${current.year() + 10}`;
+    if (info.type === 'year')
+        return current.year();
+    if (info.type === 'month')
+        return MONTH_LABEL_SHORT[current.month()];
+    switch (valueType) {
+        case 'DAY':
+            return current.date();
+        case 'QUARTER':
+        case 'YEAR_QUARTER':
+            return `Quarter ${current.quarter()}`;
+        case 'MONTH':
+        case 'YEAR_MONTH':
+            return MONTH_LABEL_SHORT[current.month()];
+        case 'WEEK':
+            return current.isoWeek();
+        default:
+            return current.date();
+    }
+};
+/**
+ * @param {ValueTypes} valueType type of value (get from component props)
+ * @returns {'date' | 'week' | 'month' | 'quarter' | 'year'} picker ant-design props to render type of calendar
+ */
+export const getPickerRender = (valueType) => {
+    switch (valueType) {
+        case 'DAY':
+            return 'date';
+        case 'YEAR':
+            return 'year';
+        case 'QUARTER':
+        case 'YEAR_QUARTER':
+            return 'quarter';
+        case 'MONTH':
+        case 'YEAR_MONTH':
+            return 'month';
+        case 'WEEK':
+        case 'YEAR_WEEK':
+            return 'week';
+        default:
+            return 'date';
+    }
+};
+export const getTimePickerRender = (valueType) => {
+    switch (valueType) {
+        case 'HOUR':
+        case 'YEAR_MONTH_DAY_HOUR':
+            return 'HH';
+        case 'YEAR_MONTH_DAY_MINUTE':
+            return 'HHmm';
+        case 'YEAR_MONTH_DAY_SECOND':
+            return 'HHmmss';
+        case 'MINUTE':
+            return 'mm';
+        default:
+            return undefined;
+    }
+};
+export function getLabelQuarterRange(quarterOrDay, yearOrFormat, locale, showYear = true) {
+    const dayObj = typeof quarterOrDay === 'number'
+        ? null
+        : dayjs(quarterOrDay || new Date(), yearOrFormat).locale(locale || 'en');
+    const currQuarter = dayObj ? dayObj.quarter() : quarterOrDay;
+    const currYear = dayObj
+        ? showYear
+            ? dayObj.year()
+            : null
+        : typeof yearOrFormat === 'number'
+            ? yearOrFormat
+            : null;
+    const startMonthQuarter = [undefined, 'January', 'April', 'July', 'October'];
+    const endMonthQuarter = [undefined, 'March', 'June', 'September', 'December'];
+    const endDayQuarter = [undefined, 31, 30, 30, 31];
+    return currYear
+        ? `${startMonthQuarter[currQuarter]} 01, ${currYear} - ${endMonthQuarter[currQuarter]} ${endDayQuarter[currQuarter]}, ${currYear}`
+        : `${startMonthQuarter[currQuarter]} 01 - ${endMonthQuarter[currQuarter]} ${endDayQuarter[currQuarter]}`;
+}

package/es/components/molecules/Drawer/Drawer.d.ts

@@ -1 +1,5 @@
-export declare const Drawer: any;
+import React from 'react';
+import { DrawerProps as AtndDrawerProps } from 'antd';
+export interface DrawerProps extends AtndDrawerProps {
+}
+export declare const Drawer: React.FC<DrawerProps>;

package/es/components/molecules/Drawer/Drawer.js

@@ -1,2 +1,4 @@
+// Libraries
+import React from 'react';
 import { Drawer as AntdDrawer } from 'antd';
-export const Drawer = AntdDrawer;
+export const Drawer = props => React.createElement(AntdDrawer, Object.assign({}, props));

package/es/components/molecules/Drawer/index.d.ts

@@ -1 +1,2 @@
 export { Drawer } from './Drawer';
+export type { DrawerProps } from './Drawer';

package/es/components/molecules/EditorScript/EditorScript.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import { IAceEditorProps } from 'react-ace';
+import 'ace-builds/webpack-resolver';
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/mode-css';
+import 'ace-builds/src-noconflict/theme-tomorrow';
+import 'ace-builds/src-noconflict/ext-language_tools';
+interface EditorScriptProps extends IAceEditorProps {
+    label?: string | ReactNode;
+    expandModalLabel?: string | ReactNode;
+    hideExpand?: boolean | ReactNode;
+}
+export declare const EditorScript: React.FC<EditorScriptProps>;
+export {};

package/es/components/molecules/EditorScript/EditorScript.js

@@ -0,0 +1,89 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { useState } from 'react';
+import AceEditor from 'react-ace';
+// Translations
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Atoms
+import { Button, Icon } from '../../atoms';
+// Molecules
+import { Modal } from '../Modal';
+// Styled
+import { EditorScriptWrapper } from './styled';
+// Ace editor
+import 'ace-builds/webpack-resolver';
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/mode-css';
+import 'ace-builds/src-noconflict/theme-tomorrow';
+import 'ace-builds/src-noconflict/ext-language_tools';
+// Utils
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+const PATH = 'src/components/molecules/EditorScript/EditorScript.tsx';
+export const EditorScript = props => {
+    // Props
+    const { label, expandModalLabel, className, height, setOptions, hideExpand } = props, restOf = __rest(props, ["label", "expandModalLabel", "className", "height", "setOptions", "hideExpand"]);
+    // State
+    const [isExpandEditor, setExpandEditor] = useState(false);
+    const { t } = i18nInstance;
+    const renderAceEditor = (aceHeight = height) => {
+        try {
+            return (React.createElement(AceEditor, Object.assign({ setOptions: Object.assign({ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, showLineNumbers: true, tabSize: 2 }, setOptions) }, restOf, { style: { width: '100%', height: aceHeight } })));
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'renderAceEditor',
+                args: {},
+            });
+        }
+    };
+    const onCancelModal = () => {
+        try {
+            setExpandEditor(false);
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onCancelModal',
+                args: {},
+            });
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(EditorScriptWrapper, { className: className },
+            label && React.createElement("div", { className: "ants-mb-5" }, label),
+            renderAceEditor(),
+            !hideExpand && (React.createElement(Button, { type: "text", className: "ants-mt-5px", onClick: () => {
+                    setExpandEditor(true);
+                } },
+                React.createElement(Icon, { type: "icon-ants-expand", size: 14, style: {
+                        transform: 'scaleX(-1)',
+                    } }),
+                t(translations.expandEditor.title)))),
+        React.createElement(Modal, { visible: isExpandEditor, title: expandModalLabel, onCancel: onCancelModal, centered: true, width: 1000, footer: React.createElement(Button, { onClick: onCancelModal }, t(translations.close)) }, renderAceEditor('500px'))));
+};
+EditorScript.defaultProps = {
+    expandModalLabel: 'Editor Script',
+    mode: 'javascript',
+    theme: 'tomorrow',
+    name: 'Editor Script',
+    placeholder: '',
+    fontSize: 12,
+    showPrintMargin: true,
+    showGutter: true,
+    highlightActiveLine: true,
+    setOptions: {},
+    hideExpand: false,
+    height: '267px',
+};

package/es/components/molecules/EditorScript/index.d.ts

@@ -0,0 +1 @@
+export * from './EditorScript';

package/es/components/molecules/EditorScript/index.js

@@ -0,0 +1 @@
+export * from './EditorScript';

package/es/components/molecules/EditorScript/styled.d.ts

@@ -0,0 +1 @@
+export declare const EditorScriptWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/EditorScript/styled.js

@@ -0,0 +1,3 @@
+// Libraries
+import styled from 'styled-components';
+export const EditorScriptWrapper = styled.div ``;

package/es/components/molecules/Form/Form.d.ts

@@ -0,0 +1 @@
+export { Form } from 'antd';

package/es/components/molecules/Form/Form.js

@@ -0,0 +1 @@
+export { Form } from 'antd';

package/es/components/molecules/Form/index.d.ts

@@ -0,0 +1 @@
+export { Form } from './Form';

package/es/components/molecules/Form/index.js

@@ -0,0 +1 @@
+export { Form } from './Form';

package/es/components/molecules/IconSelection/styled.d.ts

@@ -2,14 +2,7 @@
 export declare const IconSelectionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WrapperListRender: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WrapperListItemRender: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CustomButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Partial<{
-    href: string;
-    target?: string | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLAnchorElement> | undefined;
-} & import("antd/es/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "type" | "onClick"> & {
-    htmlType?: "button" | "reset" | "submit" | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
-} & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick">> & import("react").RefAttributes<HTMLElement>> & {
+export declare const CustomButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
     Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
 }, any, {}, never>;
 export declare const Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/Modal/Modal.d.ts

@@ -14,10 +14,10 @@ export declare const Modal: string & import("styled-components").StyledComponent
     useModal: typeof import("antd/es/modal/useModal").default;
     destroyAll: () => void;
     config: typeof import("antd/es/modal/confirm").modalGlobalConfig;
-    _InternalPanelDoNotUseOrYouWillBeFired: React.FC<import("antd/es/modal/PurePanel").PurePanelProps>;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => React.JSX.Element;
 }, any, import("./styled").CustomModalProps, never> & import("hoist-non-react-statics").NonReactStatics<React.FC<AntdModalProps> & import("antd/es/modal/confirm").ModalStaticFunctions & {
     useModal: typeof import("antd/es/modal/useModal").default;
     destroyAll: () => void;
     config: typeof import("antd/es/modal/confirm").modalGlobalConfig;
-    _InternalPanelDoNotUseOrYouWillBeFired: React.FC<import("antd/es/modal/PurePanel").PurePanelProps>;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => React.JSX.Element;
 }, {}> & React.FC<ModalProps>;

package/es/components/molecules/Modal/index.d.ts

@@ -1 +1,2 @@
 export { Modal } from './Modal';
+export type { ModalProps } from './Modal';

package/es/components/molecules/Modal/styled.d.ts

@@ -10,6 +10,6 @@ export declare const StyledModal: import("styled-components").StyledComponent<im
     useModal: typeof import("antd/es/modal/useModal").default;
     destroyAll: () => void;
     config: typeof import("antd/es/modal/confirm").modalGlobalConfig;
-    _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/modal/PurePanel").PurePanelProps>;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => import("react").JSX.Element;
 }, any, CustomModalProps, never>;
 export declare const WrapperSpin: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/Modal/styled.js

@@ -18,6 +18,8 @@ export const StyledModal = styled(AntdModal) `
         width: 50px;
         height: 50px;
         line-height: 50px;
+        align-items: center;
+        justify-content: center;
       }
     }
     .antsomi-modal-header {

package/es/components/molecules/ModalV2/ModalV2.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ModalProps } from 'antd';
+export interface ModalV2Props extends ModalProps {
+}
+export declare const ModalV2: React.FC<ModalV2Props>;

package/es/components/molecules/ModalV2/ModalV2.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React from 'react';
+import { StyledModal } from './styled';
+// Components
+import { Button, Flex } from '../../atoms';
+export const ModalV2 = props => {
+    const { okButtonProps, cancelButtonProps, okText, cancelText, onCancel, onOk } = props;
+    const restOfProps = __rest(props, []);
+    return (React.createElement(StyledModal, Object.assign({ footer: React.createElement(Flex, { gap: 10, align: "center" },
+            React.createElement(Button, Object.assign({ type: "primary", onClick: onOk }, okButtonProps), okText || 'OK'),
+            React.createElement(Button, Object.assign({ onClick: onCancel }, cancelButtonProps), cancelText || 'Cancel')) }, restOfProps)));
+};
+ModalV2.defaultProps = {
+// footer,
+};

package/es/components/molecules/ModalV2/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ModalV2';
+export type { ModalProps } from 'antd';

package/es/components/molecules/ModalV2/index.js

@@ -0,0 +1 @@
+export * from './ModalV2';

package/es/components/molecules/ModalV2/styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("antd").ModalProps> & import("antd/es/modal/confirm").ModalStaticFunctions & {
+    useModal: typeof import("antd/es/modal/useModal").default;
+    destroyAll: () => void;
+    config: typeof import("antd/es/modal/confirm").modalGlobalConfig;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => import("react").JSX.Element;
+}, any, {}, never>;

package/es/components/molecules/ModalV2/styled.js

@@ -0,0 +1,22 @@
+// Libraries
+import { Modal } from 'antd';
+import styled from 'styled-components';
+export const StyledModal = styled(Modal) `
+  .antsomi-modal-content {
+    .antsomi-modal-close {
+      position: absolute;
+      top: 10px !important;
+      right: 10px !important;
+      width: 24px !important;
+      height: 24px !important;
+    }
+
+    .antsomi-modal-body {
+      padding: 15px;
+    }
+
+    .antsomi-modal-header {
+      padding: 15px 15px 0px 15px;
+    }
+  }
+`;

package/es/components/molecules/Popconfirm/Popconfirm.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 export declare const Popconfirm: import("react").ForwardRefExoticComponent<import("antd").PopconfirmProps & import("react").RefAttributes<unknown>> & {
-    _InternalPanelDoNotUseOrYouWillBeFired: typeof import("antd/es/popconfirm/PurePanel").default;
+    _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/popconfirm/PurePanel").PurePanelProps>;
 };

package/es/components/molecules/PreviewModal/PreviewModal.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ModalProps } from '../ModalV2';
+export interface PreviewModalProps extends ModalProps {
+    modalHeaderClassName?: string;
+    modalBodyClassName?: string;
+}
+export declare const PreviewModal: React.FC<PreviewModalProps>;