@mailstep/design-system 0.6.2-beta.1 → 0.6.2-beta.3

package/ui/Blocks/CommonGrid/components/HeadRow.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -18,24 +42,28 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState } from 'react';
-import { DragDropContext, Droppable, Draggable, } from 'react-beautiful-dnd';
-import { Row, Cell } from './Table';
-import HeadCell from './HeadCell';
-import { getActionCellSizeProps, getCellSizeProps, getSortName } from '../utils';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importStar(require("react"));
+var react_beautiful_dnd_1 = require("react-beautiful-dnd");
+var Table_1 = require("./Table");
+var HeadCell_1 = __importDefault(require("./HeadCell"));
+var utils_1 = require("../utils");
 var getStickyComponent = function (columns, stickyTo, displayColumnsWidth) {
     var _a;
-    return (_a = columns === null || columns === void 0 ? void 0 : columns.filter(function (item) { return item.sticky && item.stickTo === stickyTo; })) === null || _a === void 0 ? void 0 : _a.map(function (column) { return (_jsx(HeadCell, __assign({ name: column.name, systemName: column.systemName, isSortable: false, hasResize: false, isDragging: false, sortValue: null }, getCellSizeProps(column, displayColumnsWidth[column.name]), { title: column.title, sticky: column.sticky, stickTo: column.stickTo }), column.name)); });
+    return (_a = columns === null || columns === void 0 ? void 0 : columns.filter(function (item) { return item.sticky && item.stickTo === stickyTo; })) === null || _a === void 0 ? void 0 : _a.map(function (column) { return ((0, jsx_runtime_1.jsx)(HeadCell_1.default, __assign({ name: column.name, systemName: column.systemName, isSortable: false, hasResize: false, isDragging: false, sortValue: null }, (0, utils_1.getCellSizeProps)(column, displayColumnsWidth[column.name]), { title: column.title, sticky: column.sticky, stickTo: column.stickTo }), column.name)); });
 };
 var HeadRow = function (_a) {
     var _b;
     var columns = _a.columns, actionColumn = _a.actionColumn, onAddSort = _a.onAddSort, setColumnsOrder = _a.setColumnsOrder, columnsOrder = _a.columnsOrder, _c = _a.sortingValues, sortingValues = _c === void 0 ? [] : _c, displayColumnsWidth = _a.displayColumnsWidth, columnLayout = _a.columnLayout, handleResizeDrag = _a.handleResizeDrag, groups = _a.groups;
-    var _d = useState(false), showUIElements = _d[0], setShowUIElements = _d[1];
-    useEffect(function () {
+    var _d = (0, react_1.useState)(false), showUIElements = _d[0], setShowUIElements = _d[1];
+    (0, react_1.useEffect)(function () {
         setShowUIElements(true);
     }, []);
-    var handleDragEnd = React.useCallback(function (item) {
+    var handleDragEnd = react_1.default.useCallback(function (item) {
         var _a, _b;
         var to = (_a = item.destination) === null || _a === void 0 ? void 0 : _a.index;
         var from = (_b = item.source) === null || _b === void 0 ? void 0 : _b.index;
@@ -51,19 +79,19 @@ var HeadRow = function (_a) {
         newOrderColumns.splice(toIndex, 0, column);
         setColumnsOrder(newOrderColumns);
     }, [setColumnsOrder, columnsOrder, columns]);
-    var _e = useState(false), isDragDisabled = _e[0], setIsDragDisabled = _e[1];
-    var onResizeOver = React.useCallback(function () {
+    var _e = (0, react_1.useState)(false), isDragDisabled = _e[0], setIsDragDisabled = _e[1];
+    var onResizeOver = react_1.default.useCallback(function () {
         setIsDragDisabled(true);
     }, [setIsDragDisabled]);
-    var onResizeOut = React.useCallback(function () {
+    var onResizeOut = react_1.default.useCallback(function () {
         setIsDragDisabled(false);
     }, [setIsDragDisabled]);
     var displayReadEditCell = ((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes);
-    return (_jsx(_Fragment, { children: showUIElements && (_jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", isDropDisabled: isDragDisabled, children: function (droppableProvided) { return (_jsxs(Row, __assign({ className: "headRow", accountForScrollbar: false, innerRef: droppableProvided.innerRef }, droppableProvided.droppableProps, { children: [actionColumn && (_jsxs(_Fragment, { children: [displayReadEditCell && (_jsx(Cell, { className: "cell", style: Object.assign(__assign({}, getActionCellSizeProps(actionColumn))) })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(Cell, { className: "cell", style: Object.assign(__assign({}, getActionCellSizeProps(actionColumn))) }))] })), getStickyComponent(columns, 'left', displayColumnsWidth), columns
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showUIElements && ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.DragDropContext, { onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Droppable, { droppableId: "droppable", direction: "horizontal", isDropDisabled: isDragDisabled, children: function (droppableProvided) { return ((0, jsx_runtime_1.jsxs)(Table_1.Row, __assign({ className: "headRow", accountForScrollbar: false, innerRef: droppableProvided.innerRef }, droppableProvided.droppableProps, { children: [actionColumn && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayReadEditCell && ((0, jsx_runtime_1.jsx)(Table_1.Cell, { className: "cell", style: Object.assign(__assign({}, (0, utils_1.getActionCellSizeProps)(actionColumn))) })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && ((0, jsx_runtime_1.jsx)(Table_1.Cell, { className: "cell", style: Object.assign(__assign({}, (0, utils_1.getActionCellSizeProps)(actionColumn))) }))] })), getStickyComponent(columns, 'left', displayColumnsWidth), columns
                             .filter(function (item) { return !item.sticky; })
-                            .map(function (column, key) { return (_jsx(Draggable, { draggableId: column.name, index: key, isDragDisabled: isDragDisabled || column.sticky, children: function (draggableProvided, snapshot) {
+                            .map(function (column, key) { return ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Draggable, { draggableId: column.name, index: key, isDragDisabled: isDragDisabled || column.sticky, children: function (draggableProvided, snapshot) {
                                 var _a;
-                                return (_jsx(HeadCell, __assign({ name: column.name, systemName: column.systemName, onAddSort: onAddSort, isSortable: !!column.sorting, sortValue: ((_a = sortingValues.find(function (sorting) { return sorting.column == getSortName(column); })) === null || _a === void 0 ? void 0 : _a.direction) || null, innerRef: draggableProvided.innerRef, handleResizeDrag: handleResizeDrag, hasResize: columnLayout == 'normal' || !!columns[key + 1], draggableProps: draggableProvided.draggableProps, dragHandleProps: draggableProvided.dragHandleProps, isDragging: snapshot.isDragging, onResizeOver: onResizeOver, onResizeOut: onResizeOut }, getCellSizeProps(column, displayColumnsWidth[column.name]), { group: groups[key], title: column.title, sticky: column.sticky, stickTo: column.stickTo })));
+                                return ((0, jsx_runtime_1.jsx)(HeadCell_1.default, __assign({ name: column.name, systemName: column.systemName, onAddSort: onAddSort, isSortable: !!column.sorting, sortValue: ((_a = sortingValues.find(function (sorting) { return sorting.column == (0, utils_1.getSortName)(column); })) === null || _a === void 0 ? void 0 : _a.direction) || null, innerRef: draggableProvided.innerRef, handleResizeDrag: handleResizeDrag, hasResize: columnLayout == 'normal' || !!columns[key + 1], draggableProps: draggableProvided.draggableProps, dragHandleProps: draggableProvided.dragHandleProps, isDragging: snapshot.isDragging, onResizeOver: onResizeOver, onResizeOut: onResizeOut }, (0, utils_1.getCellSizeProps)(column, displayColumnsWidth[column.name]), { group: groups[key], title: column.title, sticky: column.sticky, stickTo: column.stickTo })));
                             } }, column.name)); }), getStickyComponent(columns, 'right', displayColumnsWidth), droppableProvided.placeholder] }))); } }) })) }));
 };
-export default HeadRow;
+exports.default = HeadRow;

package/ui/Blocks/CommonGrid/components/IconList/IconList.js

@@ -1,15 +1,21 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import styled from '@xstyled/styled-components';
-import { th } from '@xstyled/system';
-import Icon from '../../../../Elements/Icon/Icon';
-export var List = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: white;\n  box-shadow: dropShadow;\n  border-radius: 10px;\n  padding: 2;\n  min-width: 130px;\n"], ["\n  background-color: white;\n  box-shadow: dropShadow;\n  border-radius: 10px;\n  padding: 2;\n  min-width: 130px;\n"])));
-export var ListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  padding: 1 0;\n  cursor: pointer;\n\n  &:hover > span {\n    background-color: bgLightGray1;\n  }\n"], ["\n  border-bottom: 1px solid ", ";\n  padding: 1 0;\n  cursor: pointer;\n\n  &:hover > span {\n    background-color: bgLightGray1;\n  }\n"])), th('colors.bgLightGray1'));
-export var ListItemContent = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 8px 10px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: ", ";\n  color: ", ";\n  background-color: ", ";\n  &:hover {\n    font-weight: bold;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 8px 10px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: ", ";\n  color: ", ";\n  background-color: ", ";\n  &:hover {\n    font-weight: bold;\n  }\n"])), function (_a) {
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItemIcon = exports.ListItemContent = exports.ListItem = exports.List = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
+var system_1 = require("@xstyled/system");
+var Icon_1 = __importDefault(require("../../../../Elements/Icon/Icon"));
+exports.List = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: white;\n  box-shadow: dropShadow;\n  border-radius: 10px;\n  padding: 2;\n  min-width: 130px;\n"], ["\n  background-color: white;\n  box-shadow: dropShadow;\n  border-radius: 10px;\n  padding: 2;\n  min-width: 130px;\n"])));
+exports.ListItem = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  padding: 1 0;\n  cursor: pointer;\n\n  &:hover > span {\n    background-color: bgLightGray1;\n  }\n"], ["\n  border-bottom: 1px solid ", ";\n  padding: 1 0;\n  cursor: pointer;\n\n  &:hover > span {\n    background-color: bgLightGray1;\n  }\n"])), (0, system_1.th)('colors.bgLightGray1'));
+exports.ListItemContent = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 8px 10px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: ", ";\n  color: ", ";\n  background-color: ", ";\n  &:hover {\n    font-weight: bold;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 8px 10px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: ", ";\n  color: ", ";\n  background-color: ", ";\n  &:hover {\n    font-weight: bold;\n  }\n"])), function (_a) {
     var selected = _a.selected;
     return (selected ? 'bold' : 'normal');
 }, function (_a) {
@@ -19,11 +25,11 @@ export var ListItemContent = styled.span(templateObject_3 || (templateObject_3 =
     var selected = _a.selected;
     return (selected ? 'white' : 'transparent');
 });
-export var ListItemIcon = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  border: 1px solid;\n  border-color: blue2;\n  border-radius: 2px;\n  margin-right: 2;\n  width: 12px;\n  height: 12px;\n  line-height: 6px;\n  padding-top: 1px;\n"], ["\n  display: inline-block;\n  border: 1px solid;\n  border-color: blue2;\n  border-radius: 2px;\n  margin-right: 2;\n  width: 12px;\n  height: 12px;\n  line-height: 6px;\n  padding-top: 1px;\n"])));
+exports.ListItemIcon = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  border: 1px solid;\n  border-color: blue2;\n  border-radius: 2px;\n  margin-right: 2;\n  width: 12px;\n  height: 12px;\n  line-height: 6px;\n  padding-top: 1px;\n"], ["\n  display: inline-block;\n  border: 1px solid;\n  border-color: blue2;\n  border-radius: 2px;\n  margin-right: 2;\n  width: 12px;\n  height: 12px;\n  line-height: 6px;\n  padding-top: 1px;\n"])));
 var IconList = function (_a) {
     var list = _a.list, selected = _a.selected, onClick = _a.onClick;
-    var handleClick = React.useCallback(function (item) { return function () { return onClick(item); }; }, [onClick]);
-    return (_jsx(List, { className: "ignore-element-for-closing-hook", children: list.map(function (item) { return (_jsx(ListItem, { onClick: handleClick(item), children: _jsxs(ListItemContent, { selected: selected === item.value, children: [_jsx(ListItemIcon, { children: _jsx(Icon, { icon: item.icon, fill: "red1", size: "8px" }) }), item.label] }) }, item.value)); }) }));
+    var handleClick = react_1.default.useCallback(function (item) { return function () { return onClick(item); }; }, [onClick]);
+    return ((0, jsx_runtime_1.jsx)(exports.List, { className: "ignore-element-for-closing-hook", children: list.map(function (item) { return ((0, jsx_runtime_1.jsx)(exports.ListItem, { onClick: handleClick(item), children: (0, jsx_runtime_1.jsxs)(exports.ListItemContent, { selected: selected === item.value, children: [(0, jsx_runtime_1.jsx)(exports.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { icon: item.icon, fill: "red1", size: "8px" }) }), item.label] }) }, item.value)); }) }));
 };
-export default IconList;
+exports.default = IconList;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Blocks/CommonGrid/components/IconList/index.js

@@ -1,2 +1,7 @@
-import IconList from './IconList';
-export default IconList;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var IconList_1 = __importDefault(require("./IconList"));
+exports.default = IconList_1.default;

package/ui/Blocks/CommonGrid/components/ManageColumnForm/ManageColumnForm.js

@@ -1,20 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
-import { x } from '@xstyled/styled-components';
-import { ActionRow } from './components/ActionRow';
-import { Input } from '../../../../Forms/Input/Input';
-import { i18n } from '@lingui/core';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = require("@xstyled/styled-components");
+var ActionRow_1 = require("./components/ActionRow");
+var Input_1 = require("../../../../Forms/Input/Input");
+var core_1 = require("@lingui/core");
 var ManageColumnForm = function (_a) {
     var columns = _a.columns, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions;
-    var _b = useState(''), searchedValue = _b[0], setSearchedValue = _b[1];
-    var onChangeInputValue = useCallback(function (e) {
+    var _b = (0, react_1.useState)(''), searchedValue = _b[0], setSearchedValue = _b[1];
+    var onChangeInputValue = (0, react_1.useCallback)(function (e) {
         setSearchedValue(e.target.value);
     }, [setSearchedValue]);
-    var clear = useCallback(function () {
+    var clear = (0, react_1.useCallback)(function () {
         setSearchedValue('');
     }, [setSearchedValue]);
-    return (_jsxs(x.div, { children: [_jsx(Input, { icon: "search", type: "text", value: searchedValue, placeholder: i18n._({ id: 'manageColumn.searchPlaceholder', message: 'Find column...' }), onChange: onChangeInputValue, onClear: clear, variant: "gray" }), _jsx(x.div, { h: "400px", overflowY: "scroll", mt: "20px", children: columns === null || columns === void 0 ? void 0 : columns.map(function (column, index) {
-                    return (_jsx(ActionRow, { column: column, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, searchedValue: searchedValue }, index));
+    return ((0, jsx_runtime_1.jsxs)(styled_components_1.x.div, { children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { icon: "search", type: "text", value: searchedValue, placeholder: core_1.i18n._({ id: 'manageColumn.searchPlaceholder', message: 'Find column...' }), onChange: onChangeInputValue, onClear: clear, variant: "gray" }), (0, jsx_runtime_1.jsx)(styled_components_1.x.div, { h: "400px", overflowY: "scroll", mt: "20px", children: columns === null || columns === void 0 ? void 0 : columns.map(function (column, index) {
+                    return ((0, jsx_runtime_1.jsx)(ActionRow_1.ActionRow, { column: column, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, searchedValue: searchedValue }, index));
                 }) })] }));
 };
-export default ManageColumnForm;
+exports.default = ManageColumnForm;

package/ui/Blocks/CommonGrid/components/ManageColumnForm/components/ActionRow.js

@@ -1,3 +1,4 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -13,35 +14,41 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
-import { x, th } from '@xstyled/styled-components';
-import styled from 'styled-components';
-import Toggle from '../../../../../Elements/Toggle/Toggle';
-import { Group } from '../../../../../Elements/Icon/icons/Group';
-import { isObject } from 'lodash';
-import { H6 } from '../../../../../Elements/Typography/Typography';
-import { i18n } from '@lingui/core';
-var RowLayout = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"], ["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"])), function (_a) {
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionRow = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = require("@xstyled/styled-components");
+var styled_components_2 = __importDefault(require("styled-components"));
+var Toggle_1 = __importDefault(require("../../../../../Elements/Toggle/Toggle"));
+var Group_1 = require("../../../../../Elements/Icon/icons/Group");
+var lodash_1 = require("lodash");
+var Typography_1 = require("../../../../../Elements/Typography/Typography");
+var core_1 = require("@lingui/core");
+var RowLayout = (0, styled_components_2.default)(styled_components_1.x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"], ["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"])), function (_a) {
     var $isVisible = _a.$isVisible;
     return ($isVisible ? 'flex' : 'none');
-}, th.color('lightGray6'));
-export var ActionRow = function (_a) {
+}, styled_components_1.th.color('lightGray6'));
+var ActionRow = function (_a) {
     var _b, _c, _d, _e, _f;
     var column = _a.column, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, searchedValue = _a.searchedValue;
-    var _g = useState((_b = columnsConfigValues === null || columnsConfigValues === void 0 ? void 0 : columnsConfigValues.includes(column.name)) !== null && _b !== void 0 ? _b : false), isSelected = _g[0], setIsSelected = _g[1];
-    var translatedValue = isObject(column === null || column === void 0 ? void 0 : column.title) &&
+    var _g = (0, react_1.useState)((_b = columnsConfigValues === null || columnsConfigValues === void 0 ? void 0 : columnsConfigValues.includes(column.name)) !== null && _b !== void 0 ? _b : false), isSelected = _g[0], setIsSelected = _g[1];
+    var translatedValue = (0, lodash_1.isObject)(column === null || column === void 0 ? void 0 : column.title) &&
         'props' in column.title &&
         ((_c = column.title) === null || _c === void 0 ? void 0 : _c.props) &&
-        i18n._({ id: (_e = (_d = column.title) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e.id, message: (_f = column.title) === null || _f === void 0 ? void 0 : _f.props.message });
+        core_1.i18n._({ id: (_e = (_d = column.title) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e.id, message: (_f = column.title) === null || _f === void 0 ? void 0 : _f.props.message });
     var isVisible = translatedValue && translatedValue.toLocaleLowerCase().includes(searchedValue.toLocaleLowerCase());
-    var handleToggleChange = useCallback(function () {
+    var handleToggleChange = (0, react_1.useCallback)(function () {
         setColumnsConfigOptions(function (prevOptions) {
             var _a;
             return __assign(__assign({}, prevOptions), (_a = {}, _a[column.name] = !isSelected ? {} : { isHidden: true }, _a));
         });
         setIsSelected(!isSelected);
     }, [setColumnsConfigOptions, isSelected, column.name]);
-    return (_jsxs(RowLayout, { "$isVisible": isVisible, children: [_jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsx(x.div, { w: "28px", children: _jsx(Toggle, { name: "", variant: "grid", onChange: handleToggleChange, spaceAround: false, checked: isSelected }) }), _jsx(H6, { variant: "medium", ml: "8px", children: translatedValue })] }), _jsx(Group, {})] }));
+    return ((0, jsx_runtime_1.jsxs)(RowLayout, { "$isVisible": isVisible, children: [(0, jsx_runtime_1.jsxs)(styled_components_1.x.div, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(styled_components_1.x.div, { w: "28px", children: (0, jsx_runtime_1.jsx)(Toggle_1.default, { name: "", variant: "grid", onChange: handleToggleChange, spaceAround: false, checked: isSelected }) }), (0, jsx_runtime_1.jsx)(Typography_1.H6, { variant: "medium", ml: "8px", children: translatedValue })] }), (0, jsx_runtime_1.jsx)(Group_1.Group, {})] }));
 };
+exports.ActionRow = ActionRow;
 var templateObject_1;

package/ui/Blocks/CommonGrid/components/ManageColumnForm/index.js

@@ -1,2 +1,7 @@
-import ManageColumnForm from './ManageColumnForm';
-export default ManageColumnForm;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var ManageColumnForm_1 = __importDefault(require("./ManageColumnForm"));
+exports.default = ManageColumnForm_1.default;

package/ui/Blocks/CommonGrid/components/NumberRange/NumberRange.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -20,47 +21,51 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
-import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
-import { Input } from '../../../../Forms/Input/Input';
-import IconList from '../IconList';
-import { i18n } from '@lingui/core';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var useClickOutside_1 = require("../../../Modal/hooks/useClickOutside");
+var Input_1 = require("../../../../Forms/Input/Input");
+var IconList_1 = __importDefault(require("../IconList"));
+var core_1 = require("@lingui/core");
 var OverlayComponentDefault = function (_a) {
     var children = _a.children;
-    return _jsx("div", { children: children });
+    return (0, jsx_runtime_1.jsx)("div", { children: children });
 };
 var createNumberComparators = function () { return [
-    { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
-    { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
-    { label: i18n._({ id: 'dataGrid.comparator.lessThan', message: 'Less than' }), value: 'lt', icon: 'lessThen' },
+    { label: core_1.i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
+    { label: core_1.i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
+    { label: core_1.i18n._({ id: 'dataGrid.comparator.lessThan', message: 'Less than' }), value: 'lt', icon: 'lessThen' },
     {
-        label: i18n._({ id: 'dataGrid.comparator.lessThanOrEquals', message: 'Less than or equals' }),
+        label: core_1.i18n._({ id: 'dataGrid.comparator.lessThanOrEquals', message: 'Less than or equals' }),
         value: 'lte',
         icon: 'lessThanEqual',
     },
-    { label: i18n._({ id: 'dataGrid.comparator.greaterThan', message: 'Greater than' }), value: 'gt', icon: 'greaterThan' },
+    { label: core_1.i18n._({ id: 'dataGrid.comparator.greaterThan', message: 'Greater than' }), value: 'gt', icon: 'greaterThan' },
     {
-        label: i18n._({ id: 'dataGrid.comparator.greaterThanOrEquals', message: 'Greater than or equal' }),
+        label: core_1.i18n._({ id: 'dataGrid.comparator.greaterThanOrEquals', message: 'Greater than or equal' }),
         value: 'gte',
         icon: 'greaterThanEqual',
     },
 ]; };
 var createEqualComparators = [
-    { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
-    { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
+    { label: core_1.i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
+    { label: core_1.i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
 ];
 var NumberRange = function (props) {
     var numberComparators = createNumberComparators();
     var name = props.name, _a = props.value, value = _a === void 0 ? {} : _a, label = props.label, onChange = props.onChange, decimals = props.decimals, className = props.className, _b = props.OverlayComponent, OverlayComponent = _b === void 0 ? OverlayComponentDefault : _b, isEqual = props.isEqual, rest = __rest(props, ["name", "value", "label", "onChange", "decimals", "className", "OverlayComponent", "isEqual"]);
-    var _c = useState(false), isOpen = _c[0], setOpen = _c[1];
+    var _c = (0, react_1.useState)(false), isOpen = _c[0], setOpen = _c[1];
     var comparator = (value === null || value === void 0 ? void 0 : value.comparator) || numberComparators[0].value;
     var renderedComparator = isEqual ? createEqualComparators : numberComparators;
     var fieldValue = (value === null || value === void 0 ? void 0 : value.value) || (value === null || value === void 0 ? void 0 : value.value) === 0 ? value.value : '';
-    var onClose = useCallback(function () { return setOpen(false); }, []);
-    var pickerRef = useClickOutside({ onClose: onClose });
-    var togglePicker = useCallback(function () { return setOpen(!isOpen); }, [isOpen, setOpen]);
-    var onChangeTextInput = useCallback(function (event) {
+    var onClose = (0, react_1.useCallback)(function () { return setOpen(false); }, []);
+    var pickerRef = (0, useClickOutside_1.useClickOutside)({ onClose: onClose });
+    var togglePicker = (0, react_1.useCallback)(function () { return setOpen(!isOpen); }, [isOpen, setOpen]);
+    var onChangeTextInput = (0, react_1.useCallback)(function (event) {
         var fieldValue = event.target.value.replace(',', '.');
         var number = !decimals
             ? parseInt(fieldValue)
@@ -68,9 +73,9 @@ var NumberRange = function (props) {
         var isValid = number || number === 0;
         onChange({ comparator: comparator, value: isValid ? number : '' });
     }, [onChange, comparator, decimals, value]);
-    var onChangeComparator = useCallback(function (option) {
+    var onChangeComparator = (0, react_1.useCallback)(function (option) {
         onChange({ comparator: option.value, value: fieldValue });
     }, []);
-    return (_jsxs("div", { ref: pickerRef, children: [_jsx(Input, __assign({ name: name, value: fieldValue, label: label, "data-cy": "".concat(name, "Inp"), onChange: onChangeTextInput, iconOnClick: togglePicker, appearance: "grid", icon: "ellipsisVertical", iconPlacement: "right", type: "text", className: className, autoComplete: "off" }, rest)), isOpen && (_jsx(OverlayComponent, { children: _jsx(IconList, { list: renderedComparator, selected: comparator, onClick: onChangeComparator }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: pickerRef, children: [(0, jsx_runtime_1.jsx)(Input_1.Input, __assign({ name: name, value: fieldValue, label: label, "data-cy": "".concat(name, "Inp"), onChange: onChangeTextInput, iconOnClick: togglePicker, appearance: "grid", icon: "ellipsisVertical", iconPlacement: "right", type: "text", className: className, autoComplete: "off" }, rest)), isOpen && ((0, jsx_runtime_1.jsx)(OverlayComponent, { children: (0, jsx_runtime_1.jsx)(IconList_1.default, { list: renderedComparator, selected: comparator, onClick: onChangeComparator }) }))] }));
 };
-export default NumberRange;
+exports.default = NumberRange;

package/ui/Blocks/CommonGrid/components/NumberRange/index.js

@@ -1,2 +1,7 @@
-import NumberRange from './NumberRange';
-export default NumberRange;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var NumberRange_1 = __importDefault(require("./NumberRange"));
+exports.default = NumberRange_1.default;

package/ui/Blocks/CommonGrid/components/NumberRange/types.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ui/Blocks/CommonGrid/components/OversizedScroll.js

@@ -1,21 +1,49 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import styled, { css } from '@xstyled/styled-components';
-var ScrollWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n\n  min-height: ", ";\n"], ["\n  ", ";\n\n  min-height: ", ";\n"])), function (props) {
-    return props.columnLayout != 'no-scroll' && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      overflow-x: ", ";\n      position: relative;\n      @media (min-width: 1024px) {\n        overflow-x: auto;\n      }\n    "], ["\n      overflow-x: ", ";\n      position: relative;\n      @media (min-width: 1024px) {\n        overflow-x: auto;\n      }\n    "])), props.columnLayout == 'sticky' ? 'inherit' : 'auto');
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("@xstyled/styled-components"));
+var ScrollWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n\n  min-height: ", ";\n"], ["\n  ", ";\n\n  min-height: ", ";\n"])), function (props) {
+    return props.columnLayout != 'no-scroll' && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      overflow-x: ", ";\n      position: relative;\n      @media (min-width: 1024px) {\n        overflow-x: auto;\n      }\n    "], ["\n      overflow-x: ", ";\n      position: relative;\n      @media (min-width: 1024px) {\n        overflow-x: auto;\n      }\n    "])), props.columnLayout == 'sticky' ? 'inherit' : 'auto');
 }, function (props) { return (props.columnLayout == 'normal' ? '360px' : '0'); });
-var ScrollSizer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (props) {
-    return props.columnLayout != 'no-scroll' && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: ", "px;\n    "], ["\n      width: ", "px;\n    "])), props.totalColumnsWidth);
+var ScrollSizer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (props) {
+    return props.columnLayout != 'no-scroll' && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: ", "px;\n    "], ["\n      width: ", "px;\n    "])), props.totalColumnsWidth);
 });
-var FloatPosition = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: sticky;\n  left: 0;\n"], ["\n  position: sticky;\n  left: 0;\n"])));
+var FloatPosition = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: sticky;\n  left: 0;\n"], ["\n  position: sticky;\n  left: 0;\n"])));
 var OversizedScroll = function (_a, ref) {
     var columnLayout = _a.columnLayout, isLoading = _a.isLoading, children = _a.children, floatingChildren = _a.floatingChildren, totalColumnsWidth = _a.totalColumnsWidth;
-    return (_jsxs(ScrollWrapper, { columnLayout: columnLayout, isLoading: isLoading, className: "gridWrapper", ref: ref, children: [_jsx(ScrollSizer, { columnLayout: columnLayout, totalColumnsWidth: totalColumnsWidth, children: children }), floatingChildren && _jsx(FloatPosition, { children: floatingChildren })] }));
+    return ((0, jsx_runtime_1.jsxs)(ScrollWrapper, { columnLayout: columnLayout, isLoading: isLoading, className: "gridWrapper", ref: ref, children: [(0, jsx_runtime_1.jsx)(ScrollSizer, { columnLayout: columnLayout, totalColumnsWidth: totalColumnsWidth, children: children }), floatingChildren && (0, jsx_runtime_1.jsx)(FloatPosition, { children: floatingChildren })] }));
 };
-var forwardedWrapper = React.forwardRef(OversizedScroll);
-export default forwardedWrapper;
+var forwardedWrapper = react_1.default.forwardRef(OversizedScroll);
+exports.default = forwardedWrapper;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/ui/Blocks/CommonGrid/components/ReadEditButtonCell/ReadEditButtonCell.js

@@ -1,26 +1,28 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo } from 'react';
-import { isFunction } from 'lodash/fp';
-import { RowActionsCell } from '../gridCells';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var fp_1 = require("lodash/fp");
+var gridCells_1 = require("../gridCells");
 var getReadEditButtonCell = function (actionColumn) {
     return function ReadEditButtonCell(_a) {
         var rowData = _a.rowData, onRowAction = _a.onRowAction;
-        var canEdit = isFunction(actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit) ? actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit(rowData) : actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit;
-        var canRead = isFunction(actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead) ? actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead(rowData) : actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead;
+        var canEdit = (0, fp_1.isFunction)(actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit) ? actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit(rowData) : actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit;
+        var canRead = (0, fp_1.isFunction)(actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead) ? actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead(rowData) : actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead;
         // if canEdit and canRead are both true, canEdit supersedes canRead
-        var handleOnClick = useCallback(function () {
+        var handleOnClick = (0, react_1.useCallback)(function () {
             var action = canEdit ? 'row_edit' : 'row_read';
             if (onRowAction)
                 onRowAction(rowData === null || rowData === void 0 ? void 0 : rowData.id, action, rowData);
         }, [canEdit, onRowAction, rowData]);
-        var linkTo = useMemo(function () {
+        var linkTo = (0, react_1.useMemo)(function () {
             var _a;
             var mode = canEdit ? 'edit' : 'read';
             return (_a = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.createLink) === null || _a === void 0 ? void 0 : _a.call(actionColumn, { mode: mode, id: rowData === null || rowData === void 0 ? void 0 : rowData.id });
         }, [canEdit, rowData === null || rowData === void 0 ? void 0 : rowData.id]);
         if (!canEdit && !canRead)
             return null;
-        return _jsx(RowActionsCell, { canEdit: !!canEdit, onClick: handleOnClick, linkTo: linkTo });
+        return (0, jsx_runtime_1.jsx)(gridCells_1.RowActionsCell, { canEdit: !!canEdit, onClick: handleOnClick, linkTo: linkTo });
     };
 };
-export default getReadEditButtonCell;
+exports.default = getReadEditButtonCell;

package/ui/Blocks/CommonGrid/components/ReadEditButtonCell/index.js

@@ -1,2 +1,7 @@
-import ReadEditButtonCell from './ReadEditButtonCell';
-export default ReadEditButtonCell;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var ReadEditButtonCell_1 = __importDefault(require("./ReadEditButtonCell"));
+exports.default = ReadEditButtonCell_1.default;

package/ui/Blocks/CommonGrid/components/Resize.js

@@ -1,14 +1,19 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import styled from '@xstyled/styled-components';
-var Resizer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 7px;\n  cursor: col-resize;\n  position: absolute;\n  z-index: 2;\n  right: 0px;\n  top: 0px;\n  border-left: 1px dotted;\n  border-right: 1px dotted;\n  border-left-color: primary;\n  border-right-color: primary;\n  opacity: 0;\n  transition: opacity 0.6s;\n  &:hover {\n    opacity: 1;\n  }\n"], ["\n  height: 100%;\n  width: 7px;\n  cursor: col-resize;\n  position: absolute;\n  z-index: 2;\n  right: 0px;\n  top: 0px;\n  border-left: 1px dotted;\n  border-right: 1px dotted;\n  border-left-color: primary;\n  border-right-color: primary;\n  opacity: 0;\n  transition: opacity 0.6s;\n  &:hover {\n    opacity: 1;\n  }\n"])));
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
+var Resizer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 7px;\n  cursor: col-resize;\n  position: absolute;\n  z-index: 2;\n  right: 0px;\n  top: 0px;\n  border-left: 1px dotted;\n  border-right: 1px dotted;\n  border-left-color: primary;\n  border-right-color: primary;\n  opacity: 0;\n  transition: opacity 0.6s;\n  &:hover {\n    opacity: 1;\n  }\n"], ["\n  height: 100%;\n  width: 7px;\n  cursor: col-resize;\n  position: absolute;\n  z-index: 2;\n  right: 0px;\n  top: 0px;\n  border-left: 1px dotted;\n  border-right: 1px dotted;\n  border-left-color: primary;\n  border-right-color: primary;\n  opacity: 0;\n  transition: opacity 0.6s;\n  &:hover {\n    opacity: 1;\n  }\n"])));
 var Resize = function (_a) {
     var onResize = _a.onResize, onResizeOver = _a.onResizeOver, onResizeOut = _a.onResizeOut;
-    var handleMouseDown = useCallback(function (downEvent) {
+    var handleMouseDown = (0, react_1.useCallback)(function (downEvent) {
         if ((downEvent === null || downEvent === void 0 ? void 0 : downEvent.button) !== 0) {
             return;
         }
@@ -27,7 +32,7 @@ var Resize = function (_a) {
         downEvent.stopPropagation();
         downEvent.preventDefault();
     }, [onResize]);
-    return _jsx(Resizer, { className: "resizer", onMouseDown: handleMouseDown, onMouseOver: onResizeOver, onMouseOut: onResizeOut });
+    return (0, jsx_runtime_1.jsx)(Resizer, { className: "resizer", onMouseDown: handleMouseDown, onMouseOver: onResizeOver, onMouseOut: onResizeOut });
 };
-export default Resize;
+exports.default = Resize;
 var templateObject_1;