@addev-be/ui 0.16.10 → 0.17.1

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

@@ -10,8 +10,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Backdrop = exports.FiltersSidebarFilter = exports.FiltersSidebarHeader = exports.FiltersSidebarContainer = void 0;
 var styles_1 = require("../../../ui/ContextMenu/styles");
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.FiltersSidebarContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  max-width: var(--space-96);\n  border-radius: var(--rounded-none);\n  padding: 0;\n  z-index: 1;\n  overflow-y: auto;\n  box-sizing: border-box;\n  background-color: var(--color-base-50);\n  border-right: 1px solid var(--color-base-300);\n  box-shadow: var(--shadow-sm);\n\n  & > ", " {\n    position: relative;\n    background: none;\n    padding: var(--space-2) 0;\n\n    ", " {\n      background: none;\n      /* height: var(--size-6); */\n      padding: var(--space-2) var(--space-4);\n    }\n\n    ", " {\n      margin: var(--space-2) 0;\n    }\n  }\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  max-width: var(--space-96);\n  border-radius: var(--rounded-none);\n  padding: 0;\n  z-index: 1;\n  overflow-y: auto;\n  box-sizing: border-box;\n  background-color: var(--color-base-50);\n  border-right: 1px solid var(--color-base-300);\n  box-shadow: var(--shadow-sm);\n\n  & > ", " {\n    position: relative;\n    background: none;\n    padding: var(--space-2) 0;\n\n    ", " {\n      background: none;\n      /* height: var(--size-6); */\n      padding: var(--space-2) var(--space-4);\n    }\n\n    ", " {\n      margin: var(--space-2) 0;\n    }\n  }\n"])), styles_1.MenuContainer, styles_1.MenuItemContainer, styles_1.Divider);
-exports.FiltersSidebarHeader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background-color: var(--color-base-50);\n\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-2);\n\n  padding-bottom: var(--space-2);\n  border-bottom: 1px solid var(--color-base-300);\n\n  h3 {\n    margin: 0;\n    margin-right: auto;\n  }\n"], ["\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background-color: var(--color-base-50);\n\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-2);\n\n  padding-bottom: var(--space-2);\n  border-bottom: 1px solid var(--color-base-300);\n\n  h3 {\n    margin: 0;\n    margin-right: auto;\n  }\n"])));
-exports.FiltersSidebarFilter = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: var(--space-4) var(--space-2);\n  border-bottom: 1px solid var(--color-base-300);\n  cursor: pointer;\n\n  &:hover {\n    background-color: var(--color-base-100);\n  }\n  svg {\n    margin-left: auto;\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: var(--space-4) var(--space-2);\n  border-bottom: 1px solid var(--color-base-300);\n  cursor: pointer;\n\n  &:hover {\n    background-color: var(--color-base-100);\n  }\n  svg {\n    margin-left: auto;\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n"])));
+exports.FiltersSidebarContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  max-width: var(--space-96);\n  border-radius: var(--rounded-none);\n  padding: 0;\n  z-index: 1;\n  overflow-y: auto;\n  box-sizing: border-box;\n  background-color: var(--color-neutral-50);\n  border-right: 1px solid var(--color-neutral-300);\n  box-shadow: var(--shadow-sm);\n\n  & > ", " {\n    position: relative;\n    background: none;\n    padding: var(--space-2) 0;\n\n    ", " {\n      background: none;\n      /* height: var(--size-6); */\n      padding: var(--space-2) var(--space-4);\n    }\n\n    ", " {\n      margin: var(--space-2) 0;\n    }\n  }\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  max-width: var(--space-96);\n  border-radius: var(--rounded-none);\n  padding: 0;\n  z-index: 1;\n  overflow-y: auto;\n  box-sizing: border-box;\n  background-color: var(--color-neutral-50);\n  border-right: 1px solid var(--color-neutral-300);\n  box-shadow: var(--shadow-sm);\n\n  & > ", " {\n    position: relative;\n    background: none;\n    padding: var(--space-2) 0;\n\n    ", " {\n      background: none;\n      /* height: var(--size-6); */\n      padding: var(--space-2) var(--space-4);\n    }\n\n    ", " {\n      margin: var(--space-2) 0;\n    }\n  }\n"])), styles_1.MenuContainer, styles_1.MenuItemContainer, styles_1.Divider);
+exports.FiltersSidebarHeader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background-color: var(--color-neutral-50);\n\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-2);\n\n  padding-bottom: var(--space-2);\n  border-bottom: 1px solid var(--color-neutral-300);\n\n  h3 {\n    margin: 0;\n    margin-right: auto;\n  }\n"], ["\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background-color: var(--color-neutral-50);\n\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-2);\n\n  padding-bottom: var(--space-2);\n  border-bottom: 1px solid var(--color-neutral-300);\n\n  h3 {\n    margin: 0;\n    margin-right: auto;\n  }\n"])));
+exports.FiltersSidebarFilter = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: var(--space-4) var(--space-2);\n  border-bottom: 1px solid var(--color-neutral-300);\n  cursor: pointer;\n\n  &:hover {\n    background-color: var(--color-neutral-100);\n  }\n  svg {\n    margin-left: auto;\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: var(--space-4) var(--space-2);\n  border-bottom: 1px solid var(--color-neutral-300);\n  cursor: pointer;\n\n  &:hover {\n    background-color: var(--color-neutral-100);\n  }\n  svg {\n    margin-left: auto;\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n"])));
 exports.Backdrop = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: sticky;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  background-color: rgba(0, 0, 0, 0.5);\n"], ["\n  position: sticky;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  background-color: rgba(0, 0, 0, 0.5);\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,5 +1,4 @@
-import { Ref } from 'react';
+import { ForwardedRef } from 'react';
 import { SqlRequestGridProps, SqlRequestGridRefProps } from './types';
-export declare const SqlRequestGrid: <R, P extends object = {}>({ ref, ...allProps }: SqlRequestGridProps<R, P> & {
-    ref: Ref<SqlRequestGridRefProps>;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const SqlRequestGridInner: <R, P extends object = {}>(allProps: SqlRequestGridProps<R, P>, ref: ForwardedRef<SqlRequestGridRefProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const SqlRequestGrid: <R, P extends object = {}>(props: SqlRequestGridProps<R, P> & import("react").RefAttributes<SqlRequestGridRefProps>) => import("react").JSX.Element | null;

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

@@ -15,23 +15,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __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)
@@ -53,7 +43,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SqlRequestGrid = void 0;
+exports.SqlRequestGrid = exports.SqlRequestGridInner = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styles = __importStar(require("./styles"));
 var sqlRequests_1 = require("../../../services/sqlRequests");
@@ -61,13 +51,14 @@ var react_1 = require("react");
 var lodash_1 = require("lodash");
 var Icons_1 = require("../../../Icons");
 var FiltersSidebar_1 = require("./filters/FiltersSidebar");
-var IconButton_1 = require("../../forms/IconButton");
+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");
-var SqlRequestGrid = function (_a) {
-    var ref = _a.ref, allProps = __rest(_a, ["ref"]);
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+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];
@@ -76,7 +67,16 @@ var SqlRequestGrid = function (_a) {
     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.useState)({}), conditions = _g[0], setConditions = _g[1];
-    var _h = (0, react_1.useState)([]), orderBy = _h[0], setOrderBy = _h[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 [
@@ -212,10 +212,9 @@ var SqlRequestGrid = function (_a) {
         onSelectionChange: function () { },
         onSelectedRowsChanged: function () { },
         selectable: false,
-        rowKey: '',
+        rowKey: function () { return ''; },
         filter: false,
         sort: false,
-        initialSorts: props.initialSorts,
     }), 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 () {
@@ -225,11 +224,12 @@ var SqlRequestGrid = function (_a) {
         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)(IconButton_1.IconButton, { size: "large", onClick: function () { return setSidebarVisible(true); }, icon: Icons_1.FilterFullIcon, color: "primary", rounded: true, style: {
+    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.SqlRequestGrid = SqlRequestGrid;
+exports.SqlRequestGridInner = SqlRequestGridInner;
+exports.SqlRequestGrid = (0, react_1.forwardRef)(exports.SqlRequestGridInner);

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

@@ -1,2 +1,4 @@
 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>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+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;

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

@@ -1,2 +1,3 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-empty-object-type */
 Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useVirtualScrolling = exports.VIRTUAL_SCROLL_TOLERANCE = void 0;
 var react_1 = require("react");
-var useElementSize_1 = require("../../../hooks/useElementSize");
+var hooks_1 = require("../../../hooks");
 exports.VIRTUAL_SCROLL_TOLERANCE = 20;
 var useVirtualScrolling = function (_a) {
     var _b;
     var scrollableElement = _a.scrollableElement, rowHeightInPx = _a.rowHeightInPx, items = _a.items, _c = _a.itemsPerRow, itemsPerRow = _c === void 0 ? 1 : _c, _d = _a.tolerance, tolerance = _d === void 0 ? exports.VIRTUAL_SCROLL_TOLERANCE : _d;
-    var height = (0, useElementSize_1.useElementSize)(scrollableElement).height;
+    var height = (0, hooks_1.useElementSize)(scrollableElement).height;
     var _e = (0, react_1.useState)(0), scrollTop = _e[0], setScrollTop = _e[1];
     var _f = [
         Math.floor(scrollTop / rowHeightInPx),

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

@@ -26,26 +26,17 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VirtualScroller = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-empty-object-type */
 var styles = __importStar(require("./styles"));
 var react_1 = require("react");
 var hooks_1 = require("./hooks");

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

@@ -3,10 +3,14 @@ export declare const BottomPaddingItem: import("styled-components/dist/types").I
 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>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, {
+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;
 }>, never>> & string;
-export declare const VirtualScrollerItemsContainer: 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>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, {
+export declare const VirtualScrollerItemsContainer: 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;
     $gap?: string;
     $topPadding: number;

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

@@ -18,6 +18,7 @@ exports.VirtualScrollerContainer = styled_components_1.default.div(templateObjec
 exports.VirtualScrollerFiller = styled_components_1.default.div.attrs(function (_a) {
     var $height = _a.$height;
     return ({
+        className: 'VirtualScrollerFiller',
         style: {
             height: "".concat($height, "px"),
         },

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

@@ -1,2 +1,3 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-empty-object-type */
 Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/forms/AutoTextArea.js

@@ -25,7 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoTextArea = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var styles_1 = require("./styles");
 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];
@@ -36,6 +35,6 @@ var AutoTextArea = function (_a) {
             setRows(rowsCount);
         }
     }, [canGrow, canShrink, maxRows, minRows, rows, value]);
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTextArea, __assign({}, props, { className: className, rows: rows, value: 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,17 +1,17 @@
-import { ThemeColor, ThemeColorWithIntensity } from '../../providers/ThemeProvider/types';
 import { IconFC } from '../../Icons';
+import { ThemeColor } from '../../providers/ThemeProvider/types';
 type StyledButtonProps = {
-    $color?: ThemeColor | ThemeColorWithIntensity;
+    $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 | ThemeColorWithIntensity;
+    color?: ThemeColor;
     size?: 'small' | 'medium' | 'large';
     icon?: IconFC;
     rounded?: boolean;
     bordered?: boolean;
 };
-export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof StyledButtonProps> & StyledButtonProps & ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+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

@@ -30,23 +30,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __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)
@@ -62,25 +52,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = exports.StyledButton = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var helpers_1 = require("../../providers/ThemeProvider/helpers");
 var styled_components_1 = __importStar(require("styled-components"));
 exports.StyledButton = styled_components_1.default.button.withConfig({
     shouldForwardProp: function () { return true; },
-})(templateObject_2 || (templateObject_2 = __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    font-weight: bold;\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    font-weight: bold;\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    font-weight: bold;\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    font-weight: bold;\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-5);\n      height: var(--space-5);\n    }\n  }\n"])), function (_a) {
-    var _b = _a.$color, $color = _b === void 0 ? 'base' : _b, _c = _a.$bordered, $bordered = _c === void 0 ? false : _c;
-    var colorWithIntensity = (0, helpers_1.getColorWithIntensity)($color);
-    var colorName = (0, helpers_1.getColor)(colorWithIntensity);
-    var intensity = (0, helpers_1.getIntensity)(colorWithIntensity);
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background-color: var(--color-", ");\n      border: ", ";\n      &:hover {\n        background-color: var(--color-", ");\n      }\n      color: var(--color-", "-", ");\n      svg {\n        fill: var(--color-", "-", ");\n      }\n    "], ["\n      background-color: var(--color-", ");\n      border: ", ";\n      &:hover {\n        background-color: var(--color-", ");\n      }\n      color: var(--color-", "-", ");\n      svg {\n        fill: var(--color-", "-", ");\n      }\n    "])), colorWithIntensity, $bordered
-        ? "1px solid var(--color-".concat((0, helpers_1.darkenColor)(colorWithIntensity), ");")
-        : 'none', (0, helpers_1.lightenColor)(colorWithIntensity, 100), colorName, intensity > 400 ? 0 : 950, colorName, intensity > 400 ? 0 : 950);
+})(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, _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);';
 });
-// eslint-disable-next-line react/display-name
 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, _c = _a.rounded, rounded = _c === void 0 ? false : _c, _d = _a.color, color = _d === void 0 ? 'base' : _d, _e = _a.bordered, bordered = _e === void 0 ? true : _e, props = __rest(_a, ["children", "size", "icon", "className", "rounded", "color", "bordered"]);
+    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;
+var templateObject_1, templateObject_2, templateObject_3;

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

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

package/dist/components/forms/Form/Checkbox.js

@@ -24,10 +24,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var Row_1 = require("./Row");
+var InputWithLabel_1 = require("./InputWithLabel");
 var styles_1 = require("./styles");
 var Checkbox = function (_a) {
     var label = _a.label, icon = _a.icon, props = __rest(_a, ["label", "icon"]);
-    return ((0, jsx_runtime_1.jsx)(Row_1.FormRow, { label: label, icon: icon, readOnly: props.readOnly, children: (0, jsx_runtime_1.jsx)(styles_1.StyledCheckbox, __assign({}, props)) }));
+    return ((0, jsx_runtime_1.jsx)(InputWithLabel_1.InputWithLabel, { label: label, icon: icon, children: (0, jsx_runtime_1.jsx)(styles_1.StyledCheckbox, __assign({}, props)) }));
 };
 exports.Checkbox = Checkbox;

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

@@ -1,11 +1,9 @@
 import { FC, PropsWithChildren } from 'react';
-import { IconFC } from '../../../Icons';
-import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider/types';
+import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider';
 type FormGroupProps = PropsWithChildren<{
     color?: ThemeColorWithIntensity;
     title?: string;
     subTitle?: string;
-    icon?: IconFC;
 }>;
 export declare const FormGroup: FC<FormGroupProps>;
 export {};

package/dist/components/forms/Form/FormGroup.js

@@ -4,7 +4,7 @@ exports.FormGroup = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styles_1 = require("./styles");
 var FormGroup = function (_a) {
-    var children = _a.children, color = _a.color, title = _a.title, subTitle = _a.subTitle, Icon = _a.icon;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.FormGroupContainer, { color: color, children: [(title || subTitle) && ((0, jsx_runtime_1.jsxs)(styles_1.FormGroupHeader, { children: [Icon && (0, jsx_runtime_1.jsx)(Icon, {}), title && (0, jsx_runtime_1.jsx)("h3", { children: title }), subTitle && (0, jsx_runtime_1.jsx)("h4", { children: subTitle })] })), children] }));
+    var children = _a.children, color = _a.color, title = _a.title, subTitle = _a.subTitle;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.FormGroupContainer, { color: color, children: [(title || subTitle) && ((0, jsx_runtime_1.jsxs)(styles_1.FormGroupHeader, { children: [title && (0, jsx_runtime_1.jsx)("h3", { children: title }), subTitle && (0, jsx_runtime_1.jsx)("h4", { children: subTitle })] })), children] }));
 };
 exports.FormGroup = FormGroup;

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

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

package/dist/components/forms/Form/Input.js

@@ -24,10 +24,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var Row_1 = require("./Row");
-var styles_1 = require("./styles");
+var InputWithLabel_1 = require("./InputWithLabel");
 var Input = function (_a) {
     var label = _a.label, icon = _a.icon, props = __rest(_a, ["label", "icon"]);
-    return ((0, jsx_runtime_1.jsx)(Row_1.FormRow, { label: label, icon: icon, readOnly: props.readOnly, children: props.readOnly ? ((0, jsx_runtime_1.jsx)(styles_1.ReadOnlyValue, { children: props.value || '-' })) : ((0, jsx_runtime_1.jsx)("input", __assign({}, props))) }));
+    return ((0, jsx_runtime_1.jsx)(InputWithLabel_1.InputWithLabel, { label: label, icon: icon, readOnly: props.readOnly, children: (0, jsx_runtime_1.jsx)("input", __assign({}, props)) }));
 };
 exports.Input = Input;

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

@@ -1,5 +1,4 @@
-import { FormRowProps } from './Row';
-import { ForwardedRef, SelectHTMLAttributes } from 'react';
+import { SelectHTMLAttributes } from 'react';
 type SelectProps<T> = {
     items: T[];
     value: T | null;
@@ -7,7 +6,12 @@ type SelectProps<T> = {
     itemLabel: (item: T, index: number) => string;
     readOnly?: boolean;
     onChange?: (value: T | null) => void;
-    ref?: ForwardedRef<HTMLSelectElement>;
 };
-export declare const Select: <T>({ icon, label, items, itemKey, itemLabel, readOnly, onChange, value, ref, ...props }: FormRowProps & Omit<SelectHTMLAttributes<HTMLSelectElement>, "value" | "onChange"> & SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <T>(props: {
+    label?: string;
+    icon?: import("../../..").IconFC;
+    readOnly?: boolean;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "value"> & SelectProps<T> & import("react").RefAttributes<HTMLSelectElement>) => import("react").JSX.Element | null;
 export {};

package/dist/components/forms/Form/Select.js

@@ -24,27 +24,23 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var Row_1 = require("./Row");
 var react_1 = require("react");
-var styles_1 = require("./styles");
-var Select = function (_a) {
-    var icon = _a.icon, label = _a.label, items = _a.items, itemKey = _a.itemKey, itemLabel = _a.itemLabel, readOnly = _a.readOnly, onChange = _a.onChange, value = _a.value, ref = _a.ref, props = __rest(_a, ["icon", "label", "items", "itemKey", "itemLabel", "readOnly", "onChange", "value", "ref"]);
-    var selectRef = (0, react_1.useRef)(null);
-    (0, react_1.useImperativeHandle)(ref, function () { return selectRef.current; }, []);
+var InputWithLabel_1 = require("./InputWithLabel");
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var SelectInner = function (_a, ref) {
+    var icon = _a.icon, label = _a.label, items = _a.items, itemKey = _a.itemKey, itemLabel = _a.itemLabel, readOnly = _a.readOnly, onChange = _a.onChange, value = _a.value, props = __rest(_a, ["icon", "label", "items", "itemKey", "itemLabel", "readOnly", "onChange", "value"]);
     var onSelectChange = (0, react_1.useCallback)(function (event) {
-        var _a;
         if (onChange) {
             var selectedValue_1 = event.target.value;
-            var selectedItem = items.find(function (item, index) { return itemKey(item, index) == selectedValue_1; });
+            var selectedItem = items.find(function (item, index) { return itemKey(item, index) === selectedValue_1; });
             onChange(selectedItem !== null && selectedItem !== void 0 ? selectedItem : null);
-            (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.blur();
         }
     }, [items, itemKey, onChange]);
     var selectedValue = value ? itemKey(value, -1) : undefined;
-    return ((0, jsx_runtime_1.jsx)(Row_1.FormRow, { label: label, icon: icon, readOnly: readOnly, children: readOnly ? ((0, jsx_runtime_1.jsx)(styles_1.ReadOnlyValue, { children: (value !== null ? itemLabel(value, 0) : '-') || '-' })) : ((0, jsx_runtime_1.jsx)("select", __assign({}, props, { disabled: readOnly, value: selectedValue, onChange: onSelectChange, ref: selectRef, children: items.map(function (item, index) {
+    return ((0, jsx_runtime_1.jsx)(InputWithLabel_1.InputWithLabel, { label: label, icon: icon, readOnly: readOnly, children: (0, jsx_runtime_1.jsx)("select", __assign({}, props, { disabled: readOnly, value: selectedValue, onChange: onSelectChange, ref: ref, children: items.map(function (item, index) {
                 var key = itemKey(item, index);
                 var label = itemLabel(item, index);
                 return ((0, jsx_runtime_1.jsx)("option", { value: key, children: label }, key));
-            }) }))) }));
+            }) })) }));
 };
-exports.Select = Select;
+exports.Select = (0, react_1.forwardRef)(SelectInner);

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

@@ -1,4 +1,4 @@
 import { ComponentProps, FC } from 'react';
-import { FormRowProps } from './Row';
 import { AutoTextArea } from '../AutoTextArea';
-export declare const TextArea: FC<FormRowProps & ComponentProps<typeof AutoTextArea>>;
+import { InputContainerProps } from './types';
+export declare const TextArea: FC<InputContainerProps & ComponentProps<typeof AutoTextArea>>;

package/dist/components/forms/Form/TextArea.js

@@ -24,11 +24,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextArea = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var Row_1 = require("./Row");
 var AutoTextArea_1 = require("../AutoTextArea");
-var styles_1 = require("./styles");
+var InputWithLabel_1 = require("./InputWithLabel");
 var TextArea = function (_a) {
     var label = _a.label, icon = _a.icon, props = __rest(_a, ["label", "icon"]);
-    return ((0, jsx_runtime_1.jsx)(Row_1.FormRow, { label: label, icon: icon, children: props.readOnly ? ((0, jsx_runtime_1.jsx)(styles_1.ReadOnlyValue, { children: props.value || '-' })) : ((0, jsx_runtime_1.jsx)(AutoTextArea_1.AutoTextArea, __assign({}, props))) }));
+    return ((0, jsx_runtime_1.jsx)(InputWithLabel_1.InputWithLabel, { label: label, icon: icon, children: (0, jsx_runtime_1.jsx)(AutoTextArea_1.AutoTextArea, __assign({}, props)) }));
 };
 exports.TextArea = TextArea;