@mailstep/design-system 0.5.1-beta.1 → 0.6.0

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

@@ -0,0 +1,32 @@
+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 { useCallback, useState } from 'react';
+import styled from '@xstyled/styled-components';
+import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
+import Button from '../../../../Elements/Button/Button';
+import DropdownMenu from '../../../../Elements/DropdownMenu';
+var ButtonWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: fit-content;\n"], ["\n  position: relative;\n  width: fit-content;\n"])));
+var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  right: 0;\n  width: max-content;\n  z-index: 2;\n"], ["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  right: 0;\n  width: max-content;\n  z-index: 2;\n"])), function (_a) {
+    var dropdownPosition = _a.dropdownPosition;
+    return (!dropdownPosition || dropdownPosition === 'bottom' ? 'calc(100% + 8px)' : 'auto');
+}, function (_a) {
+    var dropdownPosition = _a.dropdownPosition;
+    return (dropdownPosition === 'top' ? 'calc(100% + 13px)' : 'auto');
+});
+var ButtonMore = function (_a) {
+    var items = _a.items, disabled = _a.disabled, dropdownPosition = _a.dropdownPosition;
+    var _b = useState(false), actionsVisible = _b[0], setActionsVisible = _b[1];
+    var onClose = useCallback(function () {
+        setActionsVisible(false);
+    }, []);
+    var ref = useClickOutside({ onClose: onClose });
+    var handleClick = useCallback(function () {
+        setActionsVisible(!actionsVisible);
+    }, [actionsVisible]);
+    return (_jsxs(ButtonWrapper, { ref: ref, children: [_jsx(Button, { onClick: handleClick, icon: "ellipsisVertical", appearance: "secondaryLg", type: "button", sizing: "iconLg", "data-cy": "gridActionBtn", disabled: disabled }), _jsx(StyledDropdownMenu, { showMenu: actionsVisible, items: items, dropdownPosition: dropdownPosition })] }));
+};
+export default ButtonMore;
+var templateObject_1, templateObject_2;

package/ui/Blocks/CommonGrid/components/ButtonMore/index.d.ts

@@ -0,0 +1,2 @@
+import ButtonMore from './ButtonMore';
+export default ButtonMore;

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

@@ -0,0 +1,2 @@
+import ButtonMore from './ButtonMore';
+export default ButtonMore;

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

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { x } from '@xstyled/styled-components';
 import { Cell } from './Table';
-import { useAddFilter } from '../utils/public';
+import { useAddFilter } from '../hooks/useAddFilter';
 import { createFilterType, getStickyCollClassNames } from '../utils';
 import { getCellSizeProps, getGroupClassNames } from '../utils';
 import OverlayComponent from './FilterDropdown';

package/ui/Blocks/CommonGrid/components/ColumnTitle/ColumnTitle.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ColumnTitleComponentType } from '../../types';
+type Props = React.ComponentProps<ColumnTitleComponentType>;
+declare const ColumnTitle: ({ title, isSortable, onSetSort, sortValue }: Props) => JSX.Element | null;
+export default ColumnTitle;

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

@@ -0,0 +1,58 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect } from 'react';
+import styled, { x, css } from '@xstyled/styled-components';
+import Icon from '../../../../Elements/Icon/Icon';
+// ArrowWrap and WarningWrap need to have the same size to solve resizing issues
+var WRAPPER_WIDTH = 35;
+var Wrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  font-size: 0.8rem;\n"], ["\n  width: 100%;\n  font-size: 0.8rem;\n"])));
+var Title = styled.h4(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: unset;\n  align-self: center;\n  flex-shrink: 1;\n"], ["\n  margin: unset;\n  align-self: center;\n  flex-shrink: 1;\n"])));
+var arrowStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-direction: row;\n  & > * {\n    cursor: pointer;\n  }\n"], ["\n  flex-direction: row;\n  & > * {\n    cursor: pointer;\n  }\n"])));
+var InlineArrowWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: ", ";\n  position: static;\n  font-size: 1rem;\n  ", "\n  margin-left: 6px;\n"], ["\n  display: ", ";\n  position: static;\n  font-size: 1rem;\n  ", "\n  margin-left: 6px;\n"])), function (_a) {
+    var $isPopup = _a.$isPopup;
+    return ($isPopup ? 'none' : 'flex');
+}, arrowStyles);
+var PopupArrowWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: -24px;\n  background-color: lightGray2;\n  font-size: 0.8rem;\n  border-radius: 0.4rem;\n  padding: 0 4px;\n  ", "\n  width: ", "px;\n  box-shadow: tooltipShadow;\n  z-index: 1;\n"], ["\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: -24px;\n  background-color: lightGray2;\n  font-size: 0.8rem;\n  border-radius: 0.4rem;\n  padding: 0 4px;\n  ", "\n  width: ", "px;\n  box-shadow: tooltipShadow;\n  z-index: 1;\n"])), arrowStyles, WRAPPER_WIDTH);
+var OverflowWrap = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: none;\n  position: relative;\n  overflow: visible;\n  &:hover {\n    display: block;\n  }\n"], ["\n  display: none;\n  position: relative;\n  overflow: visible;\n  &:hover {\n    display: block;\n  }\n"])));
+var WarningWrap = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  display: ", ";\n  font-size: 0.7rem;\n  margin-right: 6px;\n  align-self: center;\n  &:hover + ", " {\n    display: flex;\n  }\n"], ["\n  position: relative;\n  display: ", ";\n  font-size: 0.7rem;\n  margin-right: 6px;\n  align-self: center;\n  &:hover + ", " {\n    display: flex;\n  }\n"])), function (_a) {
+    var $isPopup = _a.$isPopup;
+    return ($isPopup ? 'block' : 'none');
+}, OverflowWrap);
+var Content = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  justify-content: ", ";\n  display: flex;\n"], ["\n  justify-content: ", ";\n  display: flex;\n"])), function (_a) {
+    var $isPopup = _a.$isPopup;
+    return ($isPopup ? 'space-between' : 'unset');
+});
+var ColumnTitle = function (_a) {
+    var title = _a.title, isSortable = _a.isSortable, onSetSort = _a.onSetSort, sortValue = _a.sortValue;
+    var _b = useState(false), isOverflowing = _b[0], setIsOverflowing = _b[1];
+    var onSetAsc = useCallback(function () { return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort('asc'); }, [onSetSort]);
+    var onSetDesc = useCallback(function () { return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort('desc'); }, [onSetSort]);
+    var onSetNull = useCallback(function () { return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort(null); }, [onSetSort]);
+    var isAsc = sortValue == 'asc';
+    var isDesc = sortValue == 'desc';
+    var wrapRef = useRef(null);
+    var contentRef = useRef(null);
+    useEffect(function () {
+        var wrapRefCopy = wrapRef.current;
+        var contentRefCopy = contentRef.current;
+        if (!wrapRefCopy || !contentRefCopy)
+            return;
+        var resizeObserver = new ResizeObserver(function () {
+            var wrapWidth = wrapRefCopy.offsetWidth;
+            var contentWidth = contentRefCopy.offsetWidth + 42; // width of sorting buttons
+            setIsOverflowing(wrapWidth <= contentWidth);
+        });
+        resizeObserver.observe(wrapRefCopy === null || wrapRefCopy === void 0 ? void 0 : wrapRefCopy.parentNode);
+        return function () {
+            resizeObserver.unobserve(wrapRefCopy === null || wrapRefCopy === void 0 ? void 0 : wrapRefCopy.parentNode);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [wrapRef === null || wrapRef === void 0 ? void 0 : wrapRef.current]);
+    var Arrows = (_jsxs(_Fragment, { children: [_jsx(x.div, { onClick: isAsc ? onSetNull : onSetAsc, children: _jsx(Icon, { icon: "chevronUp", fill: isAsc ? 'blue2' : 'lightGray3' }) }), _jsx(x.div, { onClick: isDesc ? onSetNull : onSetDesc, children: _jsx(Icon, { icon: "chevronDown", fill: isDesc ? 'blue2' : 'lightGray3' }) })] }));
+    return (_jsx(Wrap, { ref: wrapRef, children: _jsxs(Content, { "$isPopup": isOverflowing, children: [_jsx("div", { children: _jsx(Title, { ref: contentRef, children: title }) }), isSortable && (_jsxs(_Fragment, { children: [_jsx(WarningWrap, { "$isPopup": isOverflowing, children: _jsx(Icon, { icon: "warningDual", fill: "black", secondaryColor: "yellow2" }) }), _jsx(OverflowWrap, { "$isPopup": isOverflowing, children: _jsx(PopupArrowWrap, { "$isPopup": isOverflowing, children: Arrows }) }), _jsx(InlineArrowWrap, { "$isPopup": isOverflowing, children: Arrows })] }))] }) }));
+};
+export default ColumnTitle;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/ui/Blocks/CommonGrid/components/ColumnTitle/index.d.ts

@@ -0,0 +1,2 @@
+import ColumnTitle from './ColumnTitle';
+export default ColumnTitle;

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

@@ -0,0 +1,2 @@
+import ColumnTitle from './ColumnTitle';
+export default ColumnTitle;

package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.d.ts

@@ -0,0 +1,11 @@
+import { CommonGridProps, GridActionsType, GridSelectorsType } from '../../types';
+export declare const Row: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+type Props = {
+    columns?: CommonGridProps['columnsDefinitions'];
+    extraControlButtons: CommonGridProps['extraControlButtons'];
+    eshopSelect: CommonGridProps['extraControlButtons'];
+    gridActions: GridActionsType;
+    gridSelectors: GridSelectorsType;
+};
+declare const ControlButtons: ({ extraControlButtons, eshopSelect, gridActions, gridSelectors }: Props) => JSX.Element;
+export default ControlButtons;

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

@@ -0,0 +1,20 @@
+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 styled, { x } from '@xstyled/styled-components';
+import { Trans } from '@lingui/react';
+import ExtraControlButtons from '../ExtraControlButtons';
+import { ExtraControlButtonPosition } from '../../types';
+import Button from '../../../../Elements/Button/Button';
+export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  position: sticky;\n  left: 20px;\n"], ["\n  display: flex;\n  position: sticky;\n  left: 20px;\n"])));
+var ControlButtons = function (_a) {
+    var extraControlButtons = _a.extraControlButtons, eshopSelect = _a.eshopSelect, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors;
+    var resetFilters = gridActions.resetFilters;
+    var filter = gridSelectors.filter;
+    var filtersOn = !!filter && Object.values(filter).some(function (item) { var _a; return ((_a = item.value) === null || _a === void 0 ? void 0 : _a.value) !== '' && item.value !== ''; });
+    return (_jsxs(Row, { children: [eshopSelect && (_jsx(x.div, { children: _jsx(ExtraControlButtons, { extraControlButtons: eshopSelect, targetPosition: ExtraControlButtonPosition.TopRight }) })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: filtersOn && (_jsx(Button, { type: "button", onClick: resetFilters, appearance: "secondaryLg", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }) })) })] }));
+};
+export default ControlButtons;
+var templateObject_1;

package/ui/Blocks/CommonGrid/components/ControlButtons/index.d.ts

@@ -0,0 +1,2 @@
+import ControlButtons from './ControlButtons';
+export default ControlButtons;

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

@@ -0,0 +1,2 @@
+import ControlButtons from './ControlButtons';
+export default ControlButtons;

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

@@ -31,8 +31,9 @@ import EyeOpenIcon from './icons/EyeOpen';
 import { getActionCellSizeProps } from '../utils';
 import { rowClassSymbol } from '../types';
 import { isFunction } from 'lodash/fp';
-import Context from '../CommonGridContext';
 import { useTimeMeasurement } from './utils';
+import Checkbox from '../../../Forms/Checkbox';
+import Button from '../../../Elements/Button/Button';
 var EmptySpan = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     return _jsx("span", __assign({}, props, { children: children }));
@@ -40,7 +41,6 @@ var EmptySpan = function (_a) {
 var DataRow = function (_a) {
     var _b, _c, _d;
     var columns = _a.columns, actionColumn = _a.actionColumn, rowData = _a.rowData, rowIndex = _a.rowIndex, uxState = _a.uxState, allowRowSelect = _a.allowRowSelect, allowRowSelectOnAction = _a.allowRowSelectOnAction, onUxChange = _a.onUxChange, onRowEditClick = _a.onRowEditClick, onRowReadClick = _a.onRowReadClick, onRowClick = _a.onRowClick, onRowAction = _a.onRowAction, displayColumnsWidth = _a.displayColumnsWidth, groups = _a.groups, isEven = _a.isEven;
-    var _e = React.useContext(Context), Checkbox = _e.Checkbox, Button = _e.Button;
     var isChecked = !!((_b = uxState.checkedRows) === null || _b === void 0 ? void 0 : _b[rowData.id]);
     var onCheckboxChange = React.useCallback(function () {
         var checkedRows = __assign({}, (uxState.checkedRows || {}));
@@ -82,7 +82,7 @@ var DataRow = function (_a) {
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [onRowClick, onUxChange, rowData]);
-    var _f = useTimeMeasurement({ handleRowClick: handleRowClick }), handleMouseDown = _f.handleMouseDown, handleMouseUp = _f.handleMouseUp;
+    var _e = useTimeMeasurement({ handleRowClick: handleRowClick }), handleMouseDown = _e.handleMouseDown, handleMouseUp = _e.handleMouseUp;
     var RowActionComponent = ((actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.createLink) ? Link : EmptySpan);
     var rowActionProps = React.useCallback(function (mode) {
         var _a;
@@ -105,6 +105,6 @@ var DataRow = function (_a) {
         return actionColumn ? __assign({}, getActionCellSizeProps(actionColumn)) : {};
     }, [actionColumn]);
     var displayReadEditCell = ((_c = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _c === void 0 ? void 0 : _c.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 (_jsxs(StyledDataRow, { className: rowClassName, hasRowClick: !!onRowClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, isEven: isEven, children: [actionColumn && (_jsxs(_Fragment, { children: [displayReadEditCell && (_jsxs(Cell, { className: "cell", style: actionColumnStyle, children: [((_d = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _d === void 0 ? void 0 : _d.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes) ? (_jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" })) : null, _jsxs(x.div, { children: [(isFunction(actionColumn.canRowRead) ? actionColumn.canRowRead(rowData) : actionColumn.canRowRead) && (_jsx(RowActionComponent, __assign({}, rowActionProps('read'), { children: _jsx(Button, { type: "button", appearance: "primary", margin: "5px", className: "actionColumnButton", children: _jsx(EyeOpenIcon, { width: "16px", height: "16px" }) }) }))), (isFunction(actionColumn.canRowEdit) ? actionColumn.canRowEdit(rowData) : actionColumn.canRowEdit) && (_jsx(RowActionComponent, __assign({}, rowActionProps('edit'), { children: _jsx(Button, { type: "button", appearance: "primary", margin: "5px", className: "actionColumnButton", children: _jsx(EditIcon, { width: "16px", height: "16px" }) }) })))] })] })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx(x.div, { children: rowIndex }) }))] })), columns.map(function (column, key) { return (_jsx(MemoDataCell, { column: column, rowData: rowData, onRowAction: handleRowAction, displayColumnWidth: displayColumnsWidth[column.name], group: groups === null || groups === void 0 ? void 0 : groups[key] }, column.name)); })] }));
+    return (_jsxs(StyledDataRow, { className: rowClassName, hasRowClick: !!onRowClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, isEven: isEven, children: [actionColumn && (_jsxs(_Fragment, { children: [displayReadEditCell && (_jsxs(Cell, { className: "cell", style: actionColumnStyle, children: [((_d = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _d === void 0 ? void 0 : _d.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes) ? (_jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" })) : null, _jsxs(x.div, { children: [(isFunction(actionColumn.canRowRead) ? actionColumn.canRowRead(rowData) : actionColumn.canRowRead) && (_jsx(RowActionComponent, __assign({}, rowActionProps('read'), { children: _jsx(Button, { type: "button", appearance: "primary", mb: "5px", ml: "5px", mr: "5px", className: "actionColumnButton", children: _jsx(EyeOpenIcon, { width: "16px", height: "16px" }) }) }))), (isFunction(actionColumn.canRowEdit) ? actionColumn.canRowEdit(rowData) : actionColumn.canRowEdit) && (_jsx(RowActionComponent, __assign({}, rowActionProps('edit'), { children: _jsx(Button, { type: "button", appearance: "primary", mt: "5px", mb: "5px", ml: "5px", mr: "5px", className: "actionColumnButton", children: _jsx(EditIcon, { width: "16px", height: "16px" }) }) })))] })] })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx(x.div, { children: rowIndex }) }))] })), columns.map(function (column, key) { return (_jsx(MemoDataCell, { column: column, rowData: rowData, onRowAction: handleRowAction, displayColumnWidth: displayColumnsWidth[column.name], group: groups === null || groups === void 0 ? void 0 : groups[key] }, column.name)); })] }));
 };
 export default DataRow;

package/ui/Blocks/CommonGrid/components/DatePickerRange/DatePickerRange.d.ts

@@ -0,0 +1,12 @@
+import { FilterComponentProps } from '../../types';
+type InitialView = 'past' | 'future';
+type DatePickerRangeProps = FilterComponentProps<Date[]> & {
+    filterTime?: number;
+    initialView?: InitialView;
+};
+type DateRangeProps = DatePickerRangeProps & {
+    error?: string;
+    label?: string;
+};
+declare const DatePickerRange: (props: DateRangeProps) => JSX.Element;
+export default DatePickerRange;

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

@@ -0,0 +1,113 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useCallback, useMemo } from 'react';
+import { DateTime } from 'luxon';
+import styled from '@xstyled/styled-components';
+import { sameDate } from './utils/sameDate';
+import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
+import DatePicker from '../../../../Elements/DatePicker';
+import Input from '../../../../Forms/Input';
+import { i18n } from '@lingui/core';
+var RangeWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  margin-right: 20px;\n"], ["\n  display: inline-flex;\n  margin-right: 20px;\n"
+    // User readable date range.
+])));
+// User readable date range.
+var pickerRangeToString = function (values) {
+    if (values === void 0) { values = []; }
+    // If no date is specified
+    if (!values[0] && !values[1]) {
+        return '';
+    }
+    // If only From date is specified
+    if (values[0] && !values[1]) {
+        return DateTime.fromJSDate(values[0]).toFormat('dd.LL.yyyy');
+    }
+    // If both of date are same, show only one date
+    if (sameDate(values[0], values[1])) {
+        return DateTime.fromJSDate(values[0]).toFormat('dd.LL.yyyy');
+    }
+    // Format each date separately and join together
+    return values.map(function (v) { return v && DateTime.fromJSDate(v).toFormat('dd.LL.yyyy'); }).join(' - ');
+};
+var OverlayComponentDefault = function (_a) {
+    var children = _a.children;
+    return _jsx("div", { children: children });
+};
+var DatePickerRange = function (props) {
+    var _a, _b, _c;
+    var onChange = props.onChange, error = props.error, label = props.label, value = props.value, filterTime = props.filterTime, initialView = props.initialView, _d = props.OverlayComponent, OverlayComponent = _d === void 0 ? OverlayComponentDefault : _d, rest = __rest(props, ["onChange", "error", "label", "value", "filterTime", "initialView", "OverlayComponent"]);
+    var _e = useState((_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : undefined), startRangeValue = _e[0], setStartRangeValue = _e[1];
+    var _f = useState((_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : undefined), endRangeValue = _f[0], setEndRangeValue = _f[1];
+    var timeFormat = filterTime ? 'HH:mm' : false;
+    var placeholder = i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' });
+    var cleanValue = React.useMemo(function () { return [
+        typeof (value === null || value === void 0 ? void 0 : value[0]) === 'string' ? new Date(value[0]) : (value === null || value === void 0 ? void 0 : value[0]) || undefined,
+        typeof (value === null || value === void 0 ? void 0 : value[1]) === 'string' ? new Date(value[1]) : (value === null || value === void 0 ? void 0 : value[1]) || undefined,
+    ]; }, [value]);
+    var initialViewDate = useMemo(function () {
+        if (cleanValue[0] && cleanValue[1]) {
+            return cleanValue;
+        }
+        var firstDate = new Date();
+        firstDate.setHours(0, 0, 0, 0);
+        var secondDate = new Date();
+        if (initialView === 'future') {
+            secondDate.setMonth(secondDate.getMonth() + 1);
+        }
+        else {
+            firstDate.setMonth(firstDate.getMonth() - 1);
+        }
+        return [firstDate, secondDate];
+    }, [cleanValue, initialView]);
+    var _g = useState(false), isOpen = _g[0], setOpen = _g[1];
+    var setDateFrom = useCallback(function (v) {
+        setStartRangeValue(v);
+        onChange([v, cleanValue[1]]);
+    }, [onChange, cleanValue]);
+    var setDateTo = useCallback(function (v) {
+        setEndRangeValue(v);
+        onChange([cleanValue[0], v]);
+    }, [onChange, cleanValue]);
+    var openPicker = useCallback(function () { return setOpen(true); }, [setOpen]);
+    var clear = useCallback(function () {
+        onChange([]);
+        setStartRangeValue(undefined);
+        setEndRangeValue(undefined);
+    }, [onChange]);
+    var isValidDateFrom = useCallback(function (current) { return !cleanValue[1] || DateTime.fromJSDate(cleanValue[1]) >= DateTime.fromJSDate(current); }, [cleanValue]);
+    var isValidDateTo = useCallback(function (current) { return !cleanValue[0] || DateTime.fromJSDate(current) >= DateTime.fromJSDate(cleanValue[0]); }, [cleanValue]);
+    var onClose = useCallback(function () {
+        setOpen(false);
+    }, []);
+    // Check if the second value is not selected and the first value is the same as the initial value
+    var secondDatePickerValue = cleanValue[1] === null ? cleanValue[0] : cleanValue[1];
+    var ref = useClickOutside({ onClose: onClose });
+    return (_jsxs("div", { ref: ref, children: [_jsx(Input, { name: props.name, placeholder: placeholder, type: "text", icon: "calendar", value: pickerRangeToString(cleanValue), label: props.label, onFocus: openPicker, iconOnClick: openPicker, appearance: "grid", onClear: clear, error: error, readOnly: true }), _jsx(OverlayComponent, { children: _jsx(_Fragment, { children: isOpen && (_jsxs(RangeWrapper, { className: "ignore-element-for-closing-hook", children: [_jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: (_c = cleanValue[0]) !== null && _c !== void 0 ? _c : '', initialViewDate: initialViewDate[0], secondValue: endRangeValue, onChange: setDateFrom, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.from', message: 'From' }), isValidDate: isValidDateFrom, input: false, spaceAround: true, open: true, disabled: cleanValue[0] === null })), _jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: secondDatePickerValue, initialViewDate: initialViewDate[1], secondValue: startRangeValue, onChange: setDateTo, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.to', message: 'To' }), isValidDate: isValidDateTo, input: false, spaceAround: true, open: true, disabled: secondDatePickerValue === null }))] })) }) })] }));
+};
+export default DatePickerRange;
+var templateObject_1;

package/ui/Blocks/CommonGrid/components/DatePickerRange/index.d.ts

@@ -0,0 +1,2 @@
+import DatePickerRange from './DatePickerRange';
+export default DatePickerRange;

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

@@ -0,0 +1,2 @@
+import DatePickerRange from './DatePickerRange';
+export default DatePickerRange;

package/ui/Blocks/CommonGrid/components/DatePickerRange/utils/sameDate.d.ts

@@ -0,0 +1 @@
+export declare const sameDate: (date1: Date, date2: Date) => boolean;

package/ui/Blocks/CommonGrid/components/DatePickerRange/utils/sameDate.js

@@ -0,0 +1,3 @@
+export var sameDate = function (date1, date2) {
+    return date1 && date1.getTime && date2 && date2.getTime && date1.getTime() === date2.getTime();
+};

package/ui/Blocks/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.d.ts

@@ -0,0 +1,8 @@
+import { CommonGridProps, ExtraControlButton } from '../../types';
+export declare const Row: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+type Props = {
+    extraControlButtons: CommonGridProps['extraControlButtons'];
+    targetPosition: ExtraControlButton['position'];
+};
+declare const ExtraControlButtons: ({ extraControlButtons, targetPosition }: Props) => JSX.Element;
+export default ExtraControlButtons;

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

@@ -0,0 +1,43 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import styled, { x } from '@xstyled/styled-components';
+import Button from '../../../../Elements/Button/Button';
+import DropdownSelect from '../../../../Elements/DropdownSelect';
+export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"], ["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"])));
+var StyledButton = styled(Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: none;\n\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"], ["\n  display: none;\n\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"])));
+var ControlButton = function (_a) {
+    var node = _a.node, label = _a.label, style = _a.style, disabled = _a.disabled, onClick = _a.onClick, onSelect = _a.onSelect, options = _a.options, hideChevron = _a.hideChevron;
+    if (node)
+        return _jsx(_Fragment, { children: node });
+    if (options) {
+        return (_jsx(DropdownSelect, { label: label || '', appearance: style || 'secondary', options: options, showChevron: !hideChevron, onSelect: onSelect, disabled: disabled }));
+    }
+    else {
+        return (_jsx(StyledButton, { type: "button", onClick: onClick, disabled: disabled, appearance: style || 'secondary', children: label }));
+    }
+};
+var ExtraControlButtons = function (_a) {
+    var extraControlButtons = _a.extraControlButtons, targetPosition = _a.targetPosition;
+    return (_jsx(Row, { children: (extraControlButtons || [])
+            .filter(function (_a) {
+            var position = _a.position;
+            return position == targetPosition;
+        })
+            .map(function (button, idx) { return (_jsx(x.div, { children: _jsx(ControlButton, __assign({}, button)) }, idx)); }) }));
+};
+export default ExtraControlButtons;
+var templateObject_1, templateObject_2;

package/ui/Blocks/CommonGrid/components/ExtraControlButtons/index.d.ts

@@ -0,0 +1,2 @@
+import ExtraControlButtons from './ExtraControlButtons';
+export default ExtraControlButtons;

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

@@ -0,0 +1,2 @@
+import ExtraControlButtons from './ExtraControlButtons';
+export default ExtraControlButtons;

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

@@ -16,8 +16,8 @@ import throttle from 'lodash/throttle';
 import ColumnFilterCell from './ColumnFilterCell';
 import { Row, Cell } from './Table';
 import { getActionCellSizeProps, getFilterName } from '../utils';
-import Context from '../CommonGridContext';
-import { useToggleAllCheckbox } from '../utils/public';
+import { useToggleAllCheckbox } from '../hooks/useToggleAllCheckbox';
+import Checkbox from '../../../Forms/Checkbox';
 var FilterRow = function (_a) {
     var _b, _c;
     var columns = _a.columns, groups = _a.groups, actionColumn = _a.actionColumn, onChange = _a.onChange, _d = _a.filterValues, filterValues = _d === void 0 ? {} : _d, displayColumnsWidth = _a.displayColumnsWidth, filters = _a.filters, handleUxChange = _a.handleUxChange, rowsData = _a.rowsData, uxState = _a.uxState;
@@ -26,7 +26,6 @@ var FilterRow = function (_a) {
         return actionColumn ? __assign({}, getActionCellSizeProps(actionColumn)) : {};
     }, [actionColumn]);
     var _e = useToggleAllCheckbox(rowsData, uxState, handleUxChange), allChecked = _e[0], toggleCheckbox = _e[1];
-    var Checkbox = React.useContext(Context).Checkbox;
     var displayCheckbox = (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.checkAllPosition) === 'top' && (((_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.forceCheckboxes));
     var displayRowNumberLabel = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers;
     var rowsNumberLabel = (_c = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbersLabel) !== null && _c !== void 0 ? _c : '#';

package/ui/Blocks/CommonGrid/components/FloatingButton/FloatingButton.d.ts

@@ -0,0 +1,7 @@
+import { FloatingButtonProps } from '../../types';
+export declare const StyledButton: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {}, never>;
+export declare const StyledCross: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    isOpen: boolean;
+}, never>;
+declare const FloatingButton: ({ options, onSelect, onClick }: FloatingButtonProps) => JSX.Element | null;
+export default FloatingButton;

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

@@ -0,0 +1,46 @@
+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 { useCallback, useMemo, useRef, useState } from 'react';
+import styled from '@xstyled/styled-components';
+import DropdownMenu from '../../../../Elements/DropdownMenu';
+import Popover from '../../../Popover';
+var FloatingWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  position: absolute;\n  bottom: 20px;\n  right: 24px;\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"], ["\n  display: block;\n  position: absolute;\n  bottom: 20px;\n  right: 24px;\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"])));
+var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 160px;\n  width: max-content;\n"], ["\n  min-width: 160px;\n  width: max-content;\n"])));
+export var StyledButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  border: none;\n  background-color: red1;\n  display: flex;\n  z-index: 1;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  bottom: 65px;\n  right: 24px;\n\n  :hover {\n    cursor: pointer;\n  }\n"], ["\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  border: none;\n  background-color: red1;\n  display: flex;\n  z-index: 1;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  bottom: 65px;\n  right: 24px;\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
+export var StyledCross = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  .line {\n    border: 1px solid white;\n    display: flex;\n    width: 16px;\n    background-color: white;\n    transition: 0.3s;\n  }\n  > :nth-child(1) {\n    transform: ", ";\n  }\n  > :nth-child(2) {\n    transform: ", ";\n  }\n"], ["\n  .line {\n    border: 1px solid white;\n    display: flex;\n    width: 16px;\n    background-color: white;\n    transition: 0.3s;\n  }\n  > :nth-child(1) {\n    transform: ", ";\n  }\n  > :nth-child(2) {\n    transform: ", ";\n  }\n"])), function (_a) {
+    var isOpen = _a.isOpen;
+    return (isOpen ? 'rotate(135deg) translate(1px, 0)' : 'none');
+}, function (_a) {
+    var isOpen = _a.isOpen;
+    return (isOpen ? 'rotate(45deg) translate(-1px, -1px)' : 'rotate(90deg) translate(-2px, 0)');
+});
+var FloatingButton = function (_a) {
+    var options = _a.options, onSelect = _a.onSelect, onClick = _a.onClick;
+    var _b = useState(false), showDropdownMenu = _b[0], setShowDropdownMenu = _b[1];
+    var ref = useRef(null);
+    var onClose = useCallback(function () { return setShowDropdownMenu(false); }, []);
+    var handleOnClick = useCallback(function () {
+        if (options && (options === null || options === void 0 ? void 0 : options.length) > 0) {
+            setShowDropdownMenu(function (prev) { return !prev; });
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    }, [onClick, options]);
+    var handleSelectItem = useCallback(function (item) {
+        setShowDropdownMenu(false);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value);
+    }, [onSelect]);
+    var items = useMemo(function () {
+        return options === null || options === void 0 ? void 0 : options.map(function (item) { return ({
+            title: item.label,
+            onClick: function () { return handleSelectItem(item); },
+            link: '#',
+            name: item.name,
+        }); });
+    }, [handleSelectItem, options]);
+    return (_jsx(FloatingWrapper, { children: _jsxs(StyledButton, { ref: ref, onClick: handleOnClick, children: [_jsxs(StyledCross, { isOpen: showDropdownMenu, children: [_jsx("span", { className: "line" }), _jsx("span", { className: "line" })] }), showDropdownMenu && (_jsx(Popover, { parentRef: ref, onClose: onClose, placement: "left-end", children: _jsx(StyledDropdownMenu, { showMenu: true, items: items }) }))] }) }));
+};
+export default FloatingButton;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Blocks/CommonGrid/components/FloatingButton/index.d.ts

@@ -0,0 +1,2 @@
+import FloatingButton from './FloatingButton';
+export default FloatingButton;

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

@@ -0,0 +1,2 @@
+import FloatingButton from './FloatingButton';
+export default FloatingButton;

package/ui/Blocks/CommonGrid/components/GridSelect/GridSelect.d.ts

@@ -0,0 +1,10 @@
+import { ColumnDefinition } from '../../types';
+type Props = {
+    onChange: (data: any) => void;
+    isMulti?: boolean;
+    options?: ColumnDefinition['filterOptions'];
+    value?: string | string[];
+    checkAllButton?: boolean;
+};
+declare const SelectFilter: ({ onChange, isMulti, value, options, checkAllButton }: Props) => JSX.Element;
+export default SelectFilter;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import MultiSelect from '../../../../Elements/MultiSelect';
+import SingleSelect from '../../../../Elements/SingleSelect';
+import isArray from 'lodash/isArray';
+var emptyValue = [];
+var SelectFilter = function (_a) {
+    var onChange = _a.onChange, isMulti = _a.isMulti, value = _a.value, options = _a.options, checkAllButton = _a.checkAllButton;
+    var handleOnMultiChange = useCallback(function (options) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(!isArray(options) || !(options === null || options === void 0 ? void 0 : options.length) ? null : options.map(function (option) { return option.value; }));
+    }, [onChange]);
+    if (isMulti) {
+        return (_jsx(MultiSelect, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: value || emptyValue, options: options, checkAllButton: checkAllButton, style: "gridFilter" }));
+    }
+    else {
+        return _jsx(SingleSelect, { maxMenuHeight: 250, onChange: onChange, value: value, options: options, style: "gridFilter" });
+    }
+};
+export default SelectFilter;

package/ui/Blocks/CommonGrid/components/GridSelect/index.d.ts

@@ -0,0 +1,2 @@
+import GridSelect from './GridSelect';
+export default GridSelect;

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

@@ -0,0 +1,2 @@
+import GridSelect from './GridSelect';
+export default GridSelect;

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

@@ -20,24 +20,21 @@ import { Cell } from './Table';
 import ColumnTitle from './ColumnTitle';
 import Resize from './Resize';
 import { getGroupClassNames, getStickyCollClassNames } from '../utils';
-import Context from '../CommonGridContext';
 var DraggableCell = styled(Cell)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var $isDragging = _a.$isDragging;
     return ($isDragging ? 'transparentRed' : 'transparent');
 });
 var HeadCell = function (_a) {
     var title = _a.title, _b = _a.name, name = _b === void 0 ? '' : _b, isSortable = _a.isSortable, systemName = _a.systemName, onAddSort = _a.onAddSort, sortValue = _a.sortValue, hasResize = _a.hasResize, onResizeOver = _a.onResizeOver, onResizeOut = _a.onResizeOut, innerRef = _a.innerRef, isDragging = _a.isDragging, draggableProps = _a.draggableProps, dragHandleProps = _a.dragHandleProps, flexBasis = _a.flexBasis, flexGrow = _a.flexGrow, _c = _a.flexShrink, flexShrink = _c === void 0 ? 1 : _c, handleResizeDrag = _a.handleResizeDrag, group = _a.group, sticky = _a.sticky, stickTo = _a.stickTo;
-    var CustomColumnTitle = React.useContext(Context).ColumnTitle;
     var onResize = React.useCallback(function (width) {
         handleResizeDrag === null || handleResizeDrag === void 0 ? void 0 : handleResizeDrag(name, width);
     }, [handleResizeDrag, name]);
     var style = React.useMemo(function () { return (__assign({}, draggableProps === null || draggableProps === void 0 ? void 0 : draggableProps.style)); }, [draggableProps]);
-    var ColumnTitleComponent = CustomColumnTitle || ColumnTitle;
     var onSetSort = React.useCallback(function (value) {
         onAddSort && onAddSort(systemName || name, value);
     }, [onAddSort, systemName, name]);
     var cellClassName = "cell".concat(getStickyCollClassNames(!!sticky, stickTo), " ").concat(getGroupClassNames(group));
-    return (_jsxs(DraggableCell, __assign({}, draggableProps, dragHandleProps, { style: style, flexBasis: flexBasis, flexGrow: flexGrow, flexShrink: flexShrink, innerRef: innerRef, "$isDragging": isDragging, className: cellClassName, children: [_jsx(ColumnTitleComponent, { title: title, isSortable: isSortable, onSetSort: onSetSort, sortValue: sortValue }), hasResize && onResizeOut && onResizeOver && (_jsx(Resize, { onResize: onResize, onResizeOver: onResizeOver, onResizeOut: onResizeOut }))] })));
+    return (_jsxs(DraggableCell, __assign({}, draggableProps, dragHandleProps, { style: style, flexBasis: flexBasis, flexGrow: flexGrow, flexShrink: flexShrink, innerRef: innerRef, "$isDragging": isDragging, className: cellClassName, children: [_jsx(ColumnTitle, { title: title, isSortable: isSortable, onSetSort: onSetSort, sortValue: sortValue }), hasResize && onResizeOut && onResizeOver && (_jsx(Resize, { onResize: onResize, onResizeOver: onResizeOver, onResizeOut: onResizeOut }))] })));
 };
 export default React.memo(HeadCell);
 var templateObject_1;

package/ui/Blocks/CommonGrid/components/IconList/IconList.d.ts

@@ -0,0 +1,18 @@
+export declare const List: import("styled-components").StyledComponent<"ul", import("@xstyled/system").Theme, {}, never>;
+export declare const ListItem: import("styled-components").StyledComponent<"li", import("@xstyled/system").Theme, {}, never>;
+export declare const ListItemContent: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {
+    selected?: boolean | undefined;
+}, never>;
+export declare const ListItemIcon: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
+type Item = {
+    value: string;
+    icon: string;
+    label: string;
+};
+type IconListProps = {
+    list: Item[];
+    selected: string;
+    onClick: (item: Item) => void;
+};
+declare const IconList: ({ list, selected, onClick }: IconListProps) => JSX.Element;
+export default IconList;