@addev-be/ui 0.15.1 → 0.16.0

package/dist/components/data/SqlRequestGrid/index.js

@@ -48,29 +48,49 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styles = __importStar(require("./styles"));
 var sqlRequests_1 = require("../../../services/sqlRequests");
 var react_1 = require("react");
-var VirtualScroller_1 = require("../VirtualScroller");
 var lodash_1 = require("lodash");
-var helpers_1 = require("../DataGrid/helpers");
+var Icons_1 = require("../../../Icons");
+var FiltersSidebar_1 = require("./filters/FiltersSidebar");
+var forms_1 = require("../../forms");
+var VirtualScroller_1 = require("../VirtualScroller");
+var helpers_1 = require("./helpers");
+var helpers_2 = require("../DataGrid/helpers");
+var hooks_1 = require("../DataGrid/hooks");
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-var SqlRequestGridInner = function (_a, ref) {
-    var _b = _a.rowHeight, rowHeight = _b === void 0 ? styles.DEFAULT_ROW_HEIGHT : _b, itemsPerRow = _a.itemsPerRow, itemTemplate = _a.itemTemplate, itemProps = _a.itemProps, gap = _a.gap, props = __rest(_a, ["rowHeight", "itemsPerRow", "itemTemplate", "itemProps", "gap"]);
+var SqlRequestGridInner = function (allProps, ref) {
+    var _a;
+    var _b = allProps.rowHeight, rowHeight = _b === void 0 ? styles.DEFAULT_ROW_HEIGHT : _b, itemsPerRow = allProps.itemsPerRow, itemTemplate = allProps.itemTemplate, itemProps = allProps.itemProps, gap = allProps.gap, props = __rest(allProps, ["rowHeight", "itemsPerRow", "itemTemplate", "itemProps", "gap"]);
     var currentRows = (0, react_1.useRef)([]);
     var _c = (0, react_1.useState)([]), rows = _c[0], setRows = _c[1];
     var _d = (0, react_1.useState)(0), start = _d[0], setStart = _d[1];
-    var _e = (0, react_1.useState)(50), length = _e[0], setLength = _e[1];
+    var _e = (0, react_1.useState)(-1), length = _e[0], setLength = _e[1];
     var _f = (0, react_1.useState)(-1), count = _f[0], setCount = _f[1];
     var sqlRequest = (0, sqlRequests_1.useSqlRequestHandler)(props.type)[0];
-    var _g = (0, react_1.useMemo)(function () {
+    var _g = (0, react_1.useState)({}), conditions = _g[0], setConditions = _g[1];
+    var _h = (0, react_1.useState)(Object.entries((_a = props.initialSorts) !== null && _a !== void 0 ? _a : {}).map(function (_a) {
+        var _b, _c, _d;
+        var columnKey = _a[0], direction = _a[1];
+        var field = props.fields.find(function (field) { return field.key === columnKey; });
+        return {
+            field: (_c = (_b = field === null || field === void 0 ? void 0 : field.field) === null || _b === void 0 ? void 0 : _b.fieldAlias) !== null && _c !== void 0 ? _c : columnKey,
+            type: (_d = field === null || field === void 0 ? void 0 : field.type) !== null && _d !== void 0 ? _d : 'text',
+            direction: direction.toUpperCase(),
+        };
+    })), orderBy = _h[0], setOrderBy = _h[1];
+    var _j = (0, react_1.useMemo)(function () {
         var _a, _b;
         return [
-            __spreadArray(__spreadArray([], Object.keys(props.fields), true), ((_a = props.additionalFields) !== null && _a !== void 0 ? _a : []), true),
-            __spreadArray(__spreadArray([], Object.keys(props.fields).filter(function (key) {
-                return (0, helpers_1.isColumnVisible)(props.fields[key]);
-            }), true), ((_b = props.additionalFields) !== null && _b !== void 0 ? _b : []), true),
+            __spreadArray(__spreadArray([], props.fields
+                .filter(function (field) { return !field.ignore; })
+                .map(function (field) { return field.key; }), true), ((_a = props.additionalFields) !== null && _a !== void 0 ? _a : []), true),
+            __spreadArray(__spreadArray([], props.fields
+                .filter(function (field) { return !field.ignore; })
+                .filter(helpers_2.isColumnVisible)
+                .map(function (field) { return field.key; }), true), ((_b = props.additionalFields) !== null && _b !== void 0 ? _b : []), true),
         ];
-    }, [props.fields, props.additionalFields]), columnsKeys = _g[0], visibleColumnsKeys = _g[1];
+    }, [props.fields, props.additionalFields]), columnsKeys = _j[0], visibleColumnsKeys = _j[1];
     var columnTypes = (0, react_1.useMemo)(function () {
-        return visibleColumnsKeys.map(function (key) { var _a, _b; return String((_b = (_a = props.fields[key]) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : 'text'); });
+        return visibleColumnsKeys.map(function (key) { var _a, _b; return String((_b = (_a = props.fields.find(function (field) { return field.key === key; })) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : 'text'); });
     }, [visibleColumnsKeys, props.fields]);
     var loadRows = (0, react_1.useRef)((0, lodash_1.debounce)(function (columns, returnColumns, conditions, orderBy, start, length, getCount) {
         if (conditions === void 0) { conditions = []; }
@@ -78,51 +98,101 @@ var SqlRequestGridInner = function (_a, ref) {
         if (start === void 0) { start = 0; }
         if (length === void 0) { length = 100; }
         if (getCount === void 0) { getCount = false; }
-        sqlRequest({
-            columns: columns.includes('Id') ? columns : __spreadArray(__spreadArray([], columns, true), ['Id'], false),
-            returnColumns: returnColumns.includes('Id')
-                ? returnColumns
-                : __spreadArray(__spreadArray([], returnColumns, true), ['Id'], false),
-            columnTypes: columnTypes.includes('Id')
-                ? columnTypes
-                : __spreadArray(__spreadArray([], columnTypes, true), ['Id'], false),
-            conditions: conditions,
-            orderBy: orderBy,
-            start: start,
-            length: length,
-            getCount: getCount,
-        }).then(function (response) {
-            var _a;
-            var _b;
-            if (getCount) {
-                currentRows.current = Array(response.count).fill(null);
-                if (getCount)
-                    setCount((_b = response.count) !== null && _b !== void 0 ? _b : 0);
-            }
-            var parsedRows = props.parser
-                ? response.data.map(props.parser)
-                : response.data;
-            (_a = currentRows.current).splice.apply(_a, __spreadArray([start, length], parsedRows, false));
-            setRows(__spreadArray([], currentRows.current, true));
-        });
+        if (length > 0) {
+            sqlRequest({
+                columns: columns.includes('Id') ? columns : __spreadArray(__spreadArray([], columns, true), ['Id'], false),
+                returnColumns: returnColumns.includes('Id')
+                    ? returnColumns
+                    : __spreadArray(__spreadArray([], returnColumns, true), ['Id'], false),
+                columnTypes: columnTypes.includes('Id')
+                    ? columnTypes
+                    : __spreadArray(__spreadArray([], columnTypes, true), ['Id'], false),
+                conditions: conditions,
+                orderBy: orderBy,
+                start: start,
+                length: length,
+                getCount: getCount,
+            }).then(function (response) {
+                var _a;
+                var _b, _c;
+                if (getCount) {
+                    currentRows.current = Array(response.count).fill(null);
+                    if (getCount)
+                        setCount((_b = response.count) !== null && _b !== void 0 ? _b : 0);
+                }
+                var data = (_c = response.data) !== null && _c !== void 0 ? _c : [];
+                var parsedRows = props.parser
+                    ? data.map(props.parser)
+                    : data;
+                (_a = currentRows.current).splice.apply(_a, __spreadArray([start, length], parsedRows, false));
+                setRows(__spreadArray([], currentRows.current, true));
+            });
+        }
     }, 100, {
         leading: true,
         trailing: true,
     }));
+    var refresh = (0, react_1.useCallback)(function () {
+        setRows([]);
+        setStart(0);
+        setCount(-1);
+    }, []);
+    var onFiltersChanged = (0, react_1.useCallback)(function (filters) {
+        var newConditions = (0, helpers_1.convertSqlFiltersToConditions)(filters);
+        setConditions(newConditions);
+        refresh();
+    }, [refresh]);
+    var onSortsChanged = (0, react_1.useCallback)(function (sorts) {
+        refresh();
+        var newOrderBy = Object.entries(sorts).map(function (_a) {
+            var columnKey = _a[0], direction = _a[1];
+            return ({
+                field: columnKey,
+                direction: direction.toUpperCase(),
+            });
+        });
+        setOrderBy(newOrderBy);
+    }, [refresh]);
+    var loadFilterValues = (0, react_1.useCallback)(function (columnKey) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        var field = props.fields.find(function (field) { return field.key === columnKey; });
+        if (!field)
+            return Promise.resolve([]);
+        return sqlRequest({
+            columns: columnsKeys,
+            returnColumns: [columnKey],
+            // columnTypes: [field.type ?? 'text'],
+            conditions: __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), Object.values((0, lodash_1.pickBy)(conditions, function (_, key) { return key !== columnKey; })), true).filter(function (condition) { return condition.field !== columnKey; }),
+            orderBy: [
+                {
+                    field: (_f = (_d = (_b = field.filterField) !== null && _b !== void 0 ? _b : (_c = field.field) === null || _c === void 0 ? void 0 : _c.fieldAlias) !== null && _d !== void 0 ? _d : (_e = field.field) === null || _e === void 0 ? void 0 : _e.fieldName) !== null && _f !== void 0 ? _f : columnKey,
+                    type: (_g = field.type) !== null && _g !== void 0 ? _g : 'text',
+                    direction: 'ASC',
+                },
+            ],
+            getCount: false,
+            unique: true,
+        }).then(function (response) {
+            return response.data.map(function (row) { var _a, _b, _c; return (_c = (_b = (_a = field.filter) === null || _a === void 0 ? void 0 : _a.getter) === null || _b === void 0 ? void 0 : _b.call(_a, row)) !== null && _c !== void 0 ? _c : null; });
+        });
+    }, [columnsKeys, conditions, props.fields, props.conditions, sqlRequest]);
     (0, react_1.useEffect)(function () {
-        if (!rows.length ||
+        var _a;
+        if ((!rows.length && count < 0) ||
             rows.slice(start, start + length).some(function (row) { return row === null; })) {
-            loadRows.current(columnsKeys, visibleColumnsKeys, [], [], start, length, count < 0);
+            loadRows.current(columnsKeys, visibleColumnsKeys, __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), Object.values(conditions), true), orderBy, start, length, count < 0);
         }
     }, [
         props.fields,
         start,
         length,
         count,
-        props.conditions,
+        conditions,
         columnsKeys,
         visibleColumnsKeys,
         rows,
+        orderBy,
+        props.conditions,
     ]);
     var onVisibleRowsChanged = (0, react_1.useCallback)(function (newStart, newLength) {
         if (newStart !== start || newLength !== length) {
@@ -130,16 +200,36 @@ var SqlRequestGridInner = function (_a, ref) {
             setLength(newLength);
         }
     }, [length, start]);
-    var refresh = (0, react_1.useCallback)(function () {
-        setRows([]);
-        setStart(0);
-        setLength(50);
-        setCount(-1);
-    }, []);
     (0, react_1.useImperativeHandle)(ref, function () { return ({
         refresh: refresh,
     }); }, [refresh]);
-    return ((0, jsx_runtime_1.jsx)(styles.SqlRequestGridContainer, { children: (0, jsx_runtime_1.jsx)(VirtualScroller_1.VirtualScroller, { gridTemplateColumns: "repeat(".concat(itemsPerRow, ", 1fr)"), items: rows, itemTemplate: itemTemplate, itemsPerRow: itemsPerRow, itemProps: itemProps, rowHeightInPx: rowHeight, onRangeChanged: onVisibleRowsChanged, gap: gap }) }));
+    var _k = (0, hooks_1.useDataGrid)({
+        columns: props.fields,
+        rows: rows,
+        onFiltersChanged: onFiltersChanged,
+        filterValuesLoader: loadFilterValues,
+        onSortsChanged: onSortsChanged,
+        onSelectionChange: function () { },
+        onSelectedRowsChanged: function () { },
+        selectable: false,
+        rowKey: function () { return ''; },
+        filter: false,
+        sort: false,
+    }), contextProps = _k[0], DataGridContext = _k[1];
+    var _l = (0, react_1.useState)(false), sidebarVisible = _l[0], setSidebarVisible = _l[1];
+    var onSidebarClose = (0, react_1.useCallback)(function () {
+        setSidebarVisible(false);
+    }, []);
+    var onClearFilters = (0, react_1.useCallback)(function () {
+        onFiltersChanged({});
+        setSidebarVisible(false);
+    }, [onFiltersChanged]);
+    return ((0, jsx_runtime_1.jsx)(DataGridContext.Provider, { value: contextProps, children: (0, jsx_runtime_1.jsxs)(styles.SqlRequestGridContainer, { children: [sidebarVisible ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(FiltersSidebar_1.FiltersSidebar, { props: allProps, context: DataGridContext, onClose: onSidebarClose, onClearFilters: onClearFilters }) })) : ((0, jsx_runtime_1.jsx)(forms_1.IconButton, { size: "large", onClick: function () { return setSidebarVisible(true); }, icon: Icons_1.FilterFullIcon, color: "primary", rounded: true, style: {
+                        position: 'absolute',
+                        bottom: 'var(--space-2)',
+                        right: 'var(--space-2)',
+                        zIndex: 1,
+                    } })), (0, jsx_runtime_1.jsx)(VirtualScroller_1.VirtualScroller, { gridTemplateColumns: "repeat(".concat(itemsPerRow, ", 1fr)"), items: rows, itemTemplate: itemTemplate, itemsPerRow: itemsPerRow, itemProps: itemProps, rowHeightInPx: rowHeight, onRangeChanged: onVisibleRowsChanged, gap: gap })] }) }));
 };
 exports.SqlRequestGridInner = SqlRequestGridInner;
 exports.SqlRequestGrid = (0, react_1.forwardRef)(exports.SqlRequestGridInner);

package/dist/components/data/SqlRequestGrid/styles.d.ts

@@ -2,15 +2,3 @@ export declare const DEFAULT_ROW_HEIGHT = 200;
 export declare const SqlRequestGridContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }>, never>, never>> & string;
-export declare const TopPaddingRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const BottomPaddingRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const VirtualScrollerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $height: number;
-}>> & string;
-export declare const VirtualScrollerRowsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}>, {
-    $gridTemplateColumns: string;
-    $topPadding: number;
-    $rowHeight?: number;
-}>, never>> & string;

package/dist/components/data/SqlRequestGrid/styles.js

@@ -7,27 +7,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VirtualScrollerRowsContainer = exports.VirtualScrollerContainer = exports.BottomPaddingRow = exports.TopPaddingRow = exports.SqlRequestGridContainer = exports.DEFAULT_ROW_HEIGHT = void 0;
+exports.SqlRequestGridContainer = exports.DEFAULT_ROW_HEIGHT = void 0;
+var styles_1 = require("../VirtualScroller/styles");
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.DEFAULT_ROW_HEIGHT = 200;
 exports.SqlRequestGridContainer = styled_components_1.default.div.attrs({
     className: 'SqlRequestGridContainer',
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n"], ["\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n"])));
-exports.TopPaddingRow = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
-exports.BottomPaddingRow = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
-exports.VirtualScrollerContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  overflow: visible;\n  height: ", ";\n"], ["\n  position: relative;\n  overflow: visible;\n  height: ", ";\n"])), function (_a) {
-    var $height = _a.$height;
-    return "".concat($height, "px");
-});
-exports.VirtualScrollerRowsContainer = styled_components_1.default.div.attrs(function (_a) {
-    var $gridTemplateColumns = _a.$gridTemplateColumns, $topPadding = _a.$topPadding, _b = _a.$rowHeight, $rowHeight = _b === void 0 ? exports.DEFAULT_ROW_HEIGHT : _b;
-    var rowHeightValue = "".concat($rowHeight, "px");
-    return {
-        style: {
-            top: "".concat($topPadding, "px"),
-            gridTemplateColumns: $gridTemplateColumns,
-            gridAutoRows: rowHeightValue,
-        },
-    };
-})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: grid;\n  position: absolute;\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 1;\n  }\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: -1;\n  }\n"], ["\n  display: grid;\n  position: absolute;\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 1;\n  }\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: -1;\n  }\n"])), exports.TopPaddingRow, exports.BottomPaddingRow);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n  position: relative;\n\n  ", " {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n  }\n"], ["\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n  position: relative;\n\n  ", " {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n  }\n"])), styles_1.VirtualScrollerContainer);
+var templateObject_1;

package/dist/components/data/SqlRequestGrid/types.d.ts

@@ -1,17 +1,26 @@
 import { ConditionDTO, FieldDTO, OrderByDTO, SqlRequestRow } from '../../../services/sqlRequests';
-import { DataGridColumn, DataGridFilter, DataGridFilterType } from '../DataGrid/types';
+import { DataGridCheckboxColumn, DataGridDateColumn, DataGridFilter, DataGridFilterType, DataGridNumberColumn, DataGridSort, DataGridTextColumn } from '../DataGrid/types';
 import { VirtualScrollerTemplateFC } from '../VirtualScroller/types';
 export type SqlRequestGridFilter<T extends DataGridFilterType = DataGridFilterType> = DataGridFilter<T> & {
     field?: FieldDTO;
 };
 export type SqlRequestGridFilters = Record<string, SqlRequestGridFilter>;
-export type SqlRequestGridColumn<R> = DataGridColumn<R> & {
+export type SqlRequestGridCommonProps = {
     filter?: SqlRequestGridFilter;
     field?: FieldDTO;
     filterField?: string;
     sortField?: string;
+    ignore?: boolean;
 };
-export type SqlRequestGridColumns<R> = Record<string, SqlRequestGridColumn<R>>;
+export type SqlRequestGridTextColumn<R> = DataGridTextColumn<R> & SqlRequestGridCommonProps;
+export type SqlRequestGridNumberColumn<R> = DataGridNumberColumn<R> & SqlRequestGridCommonProps;
+export type SqlRequestGridCheckboxColumn<R> = DataGridCheckboxColumn<R> & SqlRequestGridCommonProps;
+export type SqlRequestGridDateColumn<R> = DataGridDateColumn<R> & SqlRequestGridCommonProps;
+export type SqlRequestGridColumn<R> = SqlRequestGridTextColumn<R> | SqlRequestGridNumberColumn<R> | SqlRequestGridCheckboxColumn<R> | SqlRequestGridDateColumn<R>;
+export type SqlRequestGridColumnWithFilter<R> = SqlRequestGridColumn<R> & {
+    filter: SqlRequestGridFilter;
+};
+export type SqlRequestGridColumns<R> = SqlRequestGridColumn<R>[];
 export type SqlRequestGridProps<R, P extends object = {}> = {
     itemTemplate: VirtualScrollerTemplateFC<R, P>;
     itemsPerRow?: number;
@@ -23,7 +32,8 @@ export type SqlRequestGridProps<R, P extends object = {}> = {
     orderBy?: OrderByDTO[];
     conditions?: ConditionDTO[];
     parser?: (row: SqlRequestRow<R>) => R;
-    itemProps: P;
+    itemProps: P | ((item: R) => P);
+    initialSorts?: Record<string, DataGridSort>;
 };
 export type SqlRequestGridRefProps = {
     refresh: () => void;

package/dist/components/data/VirtualScroller/index.d.ts

@@ -3,12 +3,13 @@ type VirtualScrollerProps<R, P extends object> = {
     gridTemplateColumns: string;
     items: R[];
     itemTemplate: VirtualScrollerTemplateFC<R, P>;
-    rowHeightInPx?: number;
+    rowHeightInPx: number;
     gap?: string;
     itemsPerRow?: number;
     tolerance?: number;
-    itemProps: P;
+    itemProps: P | ((item: R, index: number) => P);
     onRangeChanged?: (index: number, length: number) => void;
+    integrated?: boolean;
 };
-export declare const VirtualScroller: <R, P extends object>({ gridTemplateColumns, items, rowHeightInPx, itemTemplate: ItemTemplate, itemProps, onRangeChanged, gap, itemsPerRow, tolerance, }: VirtualScrollerProps<R, P>) => import("react/jsx-runtime").JSX.Element;
+export declare const VirtualScroller: <R, P extends object>({ gridTemplateColumns, items, rowHeightInPx, itemTemplate: ItemTemplate, itemProps, onRangeChanged, gap, itemsPerRow, tolerance, integrated, }: VirtualScrollerProps<R, P>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/data/VirtualScroller/index.js

@@ -41,18 +41,28 @@ var styles = __importStar(require("./styles"));
 var react_1 = require("react");
 var hooks_1 = require("./hooks");
 var VirtualScroller = function (_a) {
-    var gridTemplateColumns = _a.gridTemplateColumns, items = _a.items, _b = _a.rowHeightInPx, rowHeightInPx = _b === void 0 ? styles.DEFAULT_ROW_HEIGHT : _b, ItemTemplate = _a.itemTemplate, itemProps = _a.itemProps, onRangeChanged = _a.onRangeChanged, gap = _a.gap, itemsPerRow = _a.itemsPerRow, tolerance = _a.tolerance;
-    var _c = (0, react_1.useState)(null), scrollableElement = _c[0], setScrollableElement = _c[1];
-    var _d = (0, hooks_1.useVirtualScrolling)({
+    var gridTemplateColumns = _a.gridTemplateColumns, items = _a.items, rowHeightInPx = _a.rowHeightInPx, ItemTemplate = _a.itemTemplate, itemProps = _a.itemProps, onRangeChanged = _a.onRangeChanged, gap = _a.gap, itemsPerRow = _a.itemsPerRow, tolerance = _a.tolerance, integrated = _a.integrated;
+    var _b = (0, react_1.useState)(null), scrollableElement = _b[0], setScrollableElement = _b[1];
+    var _c = (0, hooks_1.useVirtualScrolling)({
         scrollableElement: scrollableElement,
         rowHeightInPx: rowHeightInPx,
         items: items,
         itemsPerRow: itemsPerRow,
         tolerance: tolerance,
-    }), indexWithTolerance = _d.indexWithTolerance, lengthWithTolerance = _d.lengthWithTolerance, visibleItems = _d.visibleItems, topPadding = _d.topPadding, totalHeight = _d.totalHeight;
+    }), indexWithTolerance = _c.indexWithTolerance, lengthWithTolerance = _c.lengthWithTolerance, visibleItems = _c.visibleItems, topPadding = _c.topPadding, totalHeight = _c.totalHeight;
     (0, react_1.useEffect)(function () {
         onRangeChanged === null || onRangeChanged === void 0 ? void 0 : onRangeChanged(indexWithTolerance, lengthWithTolerance);
     }, [indexWithTolerance, lengthWithTolerance, onRangeChanged]);
-    return ((0, jsx_runtime_1.jsx)(styles.VirtualScrollerContainer, { "$height": totalHeight, ref: function (element) { var _a; return setScrollableElement((_a = element === null || element === void 0 ? void 0 : element.parentElement) !== null && _a !== void 0 ? _a : null); }, children: (0, jsx_runtime_1.jsx)(styles.VirtualScrollerItemsContainer, { "$gridTemplateColumns": gridTemplateColumns, "$topPadding": topPadding, "$itemHeight": rowHeightInPx, "$gap": gap, children: visibleItems.map(function (item, currentIndex) { return ((0, jsx_runtime_1.jsx)(ItemTemplate, __assign({ item: item, index: currentIndex }, itemProps), indexWithTolerance + currentIndex)); }) }) }));
+    return ((0, jsx_runtime_1.jsx)(styles.VirtualScrollerContainer, { "$integrated": integrated, children: (0, jsx_runtime_1.jsx)(styles.VirtualScrollerFiller, { "$height": totalHeight, ref: function (element) {
+                var _a, _b;
+                return setScrollableElement((_b = (integrated
+                    ? (_a = element === null || element === void 0 ? void 0 : element.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement
+                    : element === null || element === void 0 ? void 0 : element.parentElement)) !== null && _b !== void 0 ? _b : null);
+            }, children: (0, jsx_runtime_1.jsx)(styles.VirtualScrollerItemsContainer, { "$gridTemplateColumns": gridTemplateColumns, "$topPadding": topPadding, "$itemHeight": rowHeightInPx, "$gap": gap, children: visibleItems.map(function (item, currentIndex) {
+                    var currentItemProps = typeof itemProps === 'function'
+                        ? itemProps(item, indexWithTolerance + currentIndex)
+                        : itemProps;
+                    return ((0, jsx_runtime_1.jsx)(ItemTemplate, __assign({ item: item, index: currentIndex }, currentItemProps), indexWithTolerance + currentIndex));
+                }) }) }) }));
 };
 exports.VirtualScroller = VirtualScroller;

package/dist/components/data/VirtualScroller/styles.d.ts

@@ -1,7 +1,9 @@
-export declare const DEFAULT_ROW_HEIGHT = 32;
 export declare const TopPaddingItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const BottomPaddingItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const VirtualScrollerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const VirtualScrollerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $integrated?: boolean;
+}>> & string;
+export declare const VirtualScrollerFiller: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }>, {
     $height: number;

package/dist/components/data/VirtualScroller/styles.js

@@ -7,12 +7,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VirtualScrollerItemsContainer = exports.VirtualScrollerContainer = exports.BottomPaddingItem = exports.TopPaddingItem = exports.DEFAULT_ROW_HEIGHT = void 0;
+exports.VirtualScrollerItemsContainer = exports.VirtualScrollerFiller = exports.VirtualScrollerContainer = exports.BottomPaddingItem = exports.TopPaddingItem = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.DEFAULT_ROW_HEIGHT = 32;
 exports.TopPaddingItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 exports.BottomPaddingItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
-exports.VirtualScrollerContainer = styled_components_1.default.div.attrs(function (_a) {
+exports.VirtualScrollerContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  overflow: auto;\n  height: 100%;\n  display: ", ";\n"], ["\n  position: relative;\n  overflow: auto;\n  height: 100%;\n  display: ", ";\n"])), function (_a) {
+    var $integrated = _a.$integrated;
+    return ($integrated ? 'contents' : 'block');
+});
+exports.VirtualScrollerFiller = styled_components_1.default.div.attrs(function (_a) {
     var $height = _a.$height;
     return ({
         className: 'VirtualScrollerFiller',
@@ -20,7 +23,7 @@ exports.VirtualScrollerContainer = styled_components_1.default.div.attrs(functio
             height: "".concat($height, "px"),
         },
     });
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  overflow: visible;\n"], ["\n  position: relative;\n  overflow: visible;\n"])));
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  overflow: visible;\n"], ["\n  position: relative;\n  overflow: visible;\n"])));
 exports.VirtualScrollerItemsContainer = styled_components_1.default.div.attrs(function (_a) {
     var $gridTemplateColumns = _a.$gridTemplateColumns, $topPadding = _a.$topPadding, $itemHeight = _a.$itemHeight;
     var itemHeightValue = "".concat($itemHeight, "px");
@@ -32,8 +35,8 @@ exports.VirtualScrollerItemsContainer = styled_components_1.default.div.attrs(fu
             gridAutoItems: itemHeightValue,
         },
     };
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: grid;\n  position: absolute;\n  min-width: 100%;\n  grid-gap: ", ";\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 1;\n  }\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: -1;\n  }\n"], ["\n  display: grid;\n  position: absolute;\n  min-width: 100%;\n  grid-gap: ", ";\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 1;\n  }\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: -1;\n  }\n"])), function (_a) {
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: grid;\n  position: absolute;\n  min-width: 100%;\n  grid-gap: ", ";\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 1;\n  }\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: -1;\n  }\n"], ["\n  display: grid;\n  position: absolute;\n  min-width: 100%;\n  grid-gap: ", ";\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 1;\n  }\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: -1;\n  }\n"])), function (_a) {
     var $gap = _a.$gap;
     return $gap;
 }, exports.TopPaddingItem, exports.BottomPaddingItem);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/data/index.d.ts

@@ -2,12 +2,11 @@ export * from './DataGrid';
 export * from './DataGrid/helpers';
 export * from './DataGrid/styles';
 export * from './DataGrid/types';
-export * from './AdvancedRequestDataGrid';
-export * from './AdvancedRequestDataGrid/helpers';
 export * from './SqlRequestDataGrid';
 export * from './SqlRequestDataGrid/helpers';
 export * from './SqlRequestDataGrid/types';
 export * from './SqlRequestGrid';
 export * from './SqlRequestGrid/types';
+export * from './SqlRequestForeignList';
 export * from './VirtualScroller';
 export * from './VirtualScroller/types';

package/dist/components/data/index.js

@@ -18,12 +18,11 @@ __exportStar(require("./DataGrid"), exports);
 __exportStar(require("./DataGrid/helpers"), exports);
 __exportStar(require("./DataGrid/styles"), exports);
 __exportStar(require("./DataGrid/types"), exports);
-__exportStar(require("./AdvancedRequestDataGrid"), exports);
-__exportStar(require("./AdvancedRequestDataGrid/helpers"), exports);
 __exportStar(require("./SqlRequestDataGrid"), exports);
 __exportStar(require("./SqlRequestDataGrid/helpers"), exports);
 __exportStar(require("./SqlRequestDataGrid/types"), exports);
 __exportStar(require("./SqlRequestGrid"), exports);
 __exportStar(require("./SqlRequestGrid/types"), exports);
+__exportStar(require("./SqlRequestForeignList"), exports);
 __exportStar(require("./VirtualScroller"), exports);
 __exportStar(require("./VirtualScroller/types"), exports);

package/dist/components/forms/AutoTextArea.d.ts

@@ -0,0 +1,10 @@
+import { DetailedHTMLProps, TextareaHTMLAttributes } from 'react';
+type TextAreaProps = DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
+type AutoTextAreaProps = TextAreaProps & {
+    minRows?: number;
+    maxRows?: number;
+    canGrow?: boolean;
+    canShrink?: boolean;
+};
+export declare const AutoTextArea: ({ className, canGrow, canShrink, minRows, maxRows, value, ...props }: AutoTextAreaProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/forms/AutoTextArea.js

@@ -0,0 +1,40 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoTextArea = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var AutoTextArea = function (_a) {
+    var className = _a.className, _b = _a.canGrow, canGrow = _b === void 0 ? true : _b, _c = _a.canShrink, canShrink = _c === void 0 ? true : _c, _d = _a.minRows, minRows = _d === void 0 ? 1 : _d, _e = _a.maxRows, maxRows = _e === void 0 ? 10 : _e, value = _a.value, props = __rest(_a, ["className", "canGrow", "canShrink", "minRows", "maxRows", "value"]);
+    var _f = (0, react_1.useState)(minRows), rows = _f[0], setRows = _f[1];
+    (0, react_1.useEffect)(function () {
+        var linesCount = String(value).split('\n').length;
+        var rowsCount = Math.min(maxRows, Math.max(minRows, linesCount));
+        if ((canGrow && rowsCount > rows) || (canShrink && rowsCount < rows)) {
+            setRows(rowsCount);
+        }
+    }, [canGrow, canShrink, maxRows, minRows, rows, value]);
+    return ((0, jsx_runtime_1.jsx)("textarea", __assign({}, props, { className: className, rows: rows, value: value })));
+};
+exports.AutoTextArea = AutoTextArea;

package/dist/components/forms/Button.d.ts

@@ -1,10 +1,17 @@
 import { IconFC } from '../../Icons';
 import { ThemeColor } from '../../providers/ThemeProvider/types';
-export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonProps>> & string;
+type StyledButtonProps = {
+    $color?: ThemeColor;
+    $rounded?: boolean;
+    $bordered?: boolean;
+};
+export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledButtonProps>> & string;
 export type ButtonProps = {
     color?: ThemeColor;
     size?: 'small' | 'medium' | 'large';
     icon?: IconFC;
     rounded?: boolean;
+    bordered?: boolean;
 };
-export declare const Button: (props: import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof ButtonProps> & ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").JSX.Element | null;
+export declare const Button: (props: import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof StyledButtonProps> & StyledButtonProps & ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").JSX.Element | null;
+export {};

package/dist/components/forms/Button.js

@@ -56,15 +56,21 @@ var styled_components_1 = __importStar(require("styled-components"));
 exports.StyledButton = styled_components_1.default.button.withConfig({
     shouldForwardProp: function () { return true; },
 })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-flex;\n  vertical-align: middle;\n  align-items: center;\n  justify-content: center;\n  box-shadow: var(--shadow-sm);\n  /* font-weight: bold; */\n  border-radius: var(--rounded-md);\n  font-family: var(--font-sans);\n  cursor: pointer;\n\n  ", "\n\n  ", "\n\n  &.small {\n    padding: var(--space-1) var(--space-1_5);\n    font-size: var(--text-sm);\n    height: var(--space-6);\n    box-shadow: var(--shadow-sm);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-3);\n      height: var(--space-3);\n    }\n  }\n  &.medium {\n    padding: var(--space-2) var(--space-3);\n    font-size: var(--text-base);\n    height: var(--space-8);\n    box-shadow: var(--shadow-sm);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-4);\n      height: var(--space-4);\n    }\n  }\n  &.large {\n    padding: var(--space-3) var(--space-4);\n    font-size: var(--text-lg);\n    height: var(--space-10);\n    box-shadow: var(--shadow-sm);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-5);\n      height: var(--space-5);\n    }\n  }\n"], ["\n  display: inline-flex;\n  vertical-align: middle;\n  align-items: center;\n  justify-content: center;\n  box-shadow: var(--shadow-sm);\n  /* font-weight: bold; */\n  border-radius: var(--rounded-md);\n  font-family: var(--font-sans);\n  cursor: pointer;\n\n  ", "\n\n  ", "\n\n  &.small {\n    padding: var(--space-1) var(--space-1_5);\n    font-size: var(--text-sm);\n    height: var(--space-6);\n    box-shadow: var(--shadow-sm);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-3);\n      height: var(--space-3);\n    }\n  }\n  &.medium {\n    padding: var(--space-2) var(--space-3);\n    font-size: var(--text-base);\n    height: var(--space-8);\n    box-shadow: var(--shadow-sm);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-4);\n      height: var(--space-4);\n    }\n  }\n  &.large {\n    padding: var(--space-3) var(--space-4);\n    font-size: var(--text-lg);\n    height: var(--space-10);\n    box-shadow: var(--shadow-sm);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-5);\n      height: var(--space-5);\n    }\n  }\n"])), function (_a) {
-    var color = _a.color;
-    return color
-        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          background-color: var(--color-", "-400);\n          border: 1px solid var(--color-", "-500);\n          &:hover {\n            background-color: var(--color-", "-300);\n            border: 1px solid var(--color-", "-400);\n          }\n          color: var(--color-", "-950);\n          svg {\n            fill: var(--color-", "-950);\n          }\n        "], ["\n          background-color: var(--color-", "-400);\n          border: 1px solid var(--color-", "-500);\n          &:hover {\n            background-color: var(--color-", "-300);\n            border: 1px solid var(--color-", "-400);\n          }\n          color: var(--color-", "-950);\n          svg {\n            fill: var(--color-", "-950);\n          }\n        "])), color, color, color, color, color, color) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          background-color: var(--color-neutral-100);\n          border: 1px solid var(--color-neutral-300);\n          &:hover {\n            background-color: var(--color-neutral-200);\n            border: 1px solid var(--color-neutral-400);\n          }\n          color: var(--color-neutral-900);\n          svg {\n            fill: var(--color-neutral-900);\n          }\n        "], ["\n          background-color: var(--color-neutral-100);\n          border: 1px solid var(--color-neutral-300);\n          &:hover {\n            background-color: var(--color-neutral-200);\n            border: 1px solid var(--color-neutral-400);\n          }\n          color: var(--color-neutral-900);\n          svg {\n            fill: var(--color-neutral-900);\n          }\n        "])));
+    var $color = _a.$color, _b = _a.$bordered, $bordered = _b === void 0 ? true : _b;
+    return $color
+        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          background-color: var(--color-", "-400);\n          border: ", ";\n          &:hover {\n            background-color: var(--color-", "-300);\n            border: ", ";\n          }\n          color: var(--color-", "-950);\n          svg {\n            fill: var(--color-", "-950);\n          }\n        "], ["\n          background-color: var(--color-", "-400);\n          border: ", ";\n          &:hover {\n            background-color: var(--color-", "-300);\n            border: ", ";\n          }\n          color: var(--color-", "-950);\n          svg {\n            fill: var(--color-", "-950);\n          }\n        "])), $color, $bordered
+            ? "1px solid var(--color-".concat($color, "-500)")
+            : 'none', $color, $bordered
+            ? "1px solid var(--color-".concat($color, "-400)")
+            : 'none', $color, $color) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          background-color: var(--color-neutral-100);\n          border: ", ";\n          &:hover {\n            background-color: var(--color-neutral-200);\n            border: ", ";\n          }\n          color: var(--color-neutral-900);\n          svg {\n            fill: var(--color-neutral-900);\n          }\n        "], ["\n          background-color: var(--color-neutral-100);\n          border: ", ";\n          &:hover {\n            background-color: var(--color-neutral-200);\n            border: ", ";\n          }\n          color: var(--color-neutral-900);\n          svg {\n            fill: var(--color-neutral-900);\n          }\n        "])), $bordered ? "1px solid var(--color-neutral-300)" : 'none', $bordered
+        ? "1px solid var(--color-neutral-400)"
+        : 'none');
 }, function (_a) {
-    var rounded = _a.rounded;
-    return rounded && 'border-radius: var(--rounded-full);';
+    var $rounded = _a.$rounded;
+    return $rounded && 'border-radius: var(--rounded-full);';
 });
 exports.Button = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'medium' : _b, Icon = _a.icon, className = _a.className, props = __rest(_a, ["children", "size", "icon", "className"]);
-    return ((0, jsx_runtime_1.jsxs)(exports.StyledButton, __assign({ ref: ref, className: "".concat(size, " ").concat(className) }, props, { children: [Icon && (0, jsx_runtime_1.jsx)(Icon, {}), children] })));
+    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'medium' : _b, Icon = _a.icon, className = _a.className, _c = _a.rounded, rounded = _c === void 0 ? false : _c, _d = _a.color, color = _d === void 0 ? 'neutral' : _d, _e = _a.bordered, bordered = _e === void 0 ? true : _e, props = __rest(_a, ["children", "size", "icon", "className", "rounded", "color", "bordered"]);
+    return ((0, jsx_runtime_1.jsxs)(exports.StyledButton, __assign({ ref: ref, className: "".concat(size, " ").concat(className), "$color": color, "$rounded": rounded, "$bordered": bordered }, props, { children: [Icon && (0, jsx_runtime_1.jsx)(Icon, {}), children] })));
 });
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/forms/Form/Checkbox.d.ts

@@ -0,0 +1,3 @@
+import { FC, InputHTMLAttributes } from 'react';
+import { InputContainerProps } from './types';
+export declare const Checkbox: FC<InputContainerProps & InputHTMLAttributes<HTMLInputElement>>;