ab-ui-library 1.0.1

package/components/Table/Row.js

@@ -0,0 +1,69 @@
+import { _ as _extends } from '../../extends-e8ef956f.js';
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { CHECKBOX_HEADER_ID, CHECKBOX_DEFAULT_WIDTH } from './utils.js';
+import '../../toConsumableArray-e0031ed3.js';
+import '../../slicedToArray-0c706912.js';
+import './IndeterminateCheckbox.js';
+import '../Checkbox/Checkbox.js';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import '../Popover/Popover.js';
+import '../../hooks/useGetTooltipStyles.js';
+import '../../hooks/useGetElemSizes.js';
+import '../../hooks/useGetElemPositions.js';
+import '../../hooks/useGetTooltipPosition.js';
+import '../Tooltip/types.js';
+import '../../hooks/useHideOnScroll.js';
+import '../../consts/index.js';
+import 'dayjs';
+import '../../hooks/useOnOutsideClick.js';
+import '../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import '../Text/Text.js';
+import '../../utils/helpers.js';
+import '../Link/Link.js';
+import '../SVGIcons/IconInfo.js';
+import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../helperComponents/IconDynamicComponent/constants.js';
+import 'react-syntax-highlighter';
+
+function Row(_ref) {
+  var row = _ref.row,
+    selectedFlatRows = _ref.selectedFlatRows,
+    withSelect = _ref.withSelect,
+    handleRowClick = _ref.handleRowClick;
+  var isRowSelected = useMemo(function () {
+    return selectedFlatRows.find(function (r) {
+      return r.id === row.id;
+    });
+  }, [selectedFlatRows]);
+  return /*#__PURE__*/React.createElement("tr", _extends({}, row.getRowProps(), {
+    className: classNames({
+      selected: Boolean(isRowSelected)
+    }),
+    onClick: function onClick() {
+      return handleRowClick === null || handleRowClick === void 0 ? void 0 : handleRowClick(row.original);
+    }
+  }), row.cells.map(function (_ref2, i, arr) {
+    var _arr$column;
+    var getCellProps = _ref2.getCellProps,
+      column = _ref2.column,
+      render = _ref2.render;
+    var isSelection = column.id === CHECKBOX_HEADER_ID;
+    return /*#__PURE__*/React.createElement("td", _extends({
+      key: i
+    }, getCellProps(), {
+      style: {
+        left: !isSelection && withSelect && (column === null || column === void 0 ? void 0 : column.fixed) === 'left' ? CHECKBOX_DEFAULT_WIDTH : 0
+      },
+      className: classNames({
+        fixed_column_left: (column === null || column === void 0 ? void 0 : column.fixed) === 'left',
+        fixed_column_right: (column === null || column === void 0 ? void 0 : column.fixed) === 'right',
+        fixed_checkbox: isSelection && ((_arr$column = arr[i + 1].column) === null || _arr$column === void 0 ? void 0 : _arr$column.fixed) === 'left'
+      })
+    }), render('Cell'));
+  }));
+}
+
+export { Row };

package/components/Table/Table.d.ts

@@ -0,0 +1,3 @@
+import type { ReactElement } from 'react';
+import type { TTableProps } from './types';
+export declare function Table({ columns, data, onChange, fixedHeader, withSelect, handleRowClick, className, sortIconProps, containerRefHandler, noResultProps }: TTableProps): ReactElement;

package/components/Table/Table.js

@@ -0,0 +1,149 @@
+import { _ as _extends } from '../../extends-e8ef956f.js';
+import { _ as _toConsumableArray } from '../../toConsumableArray-e0031ed3.js';
+import { _ as _slicedToArray } from '../../slicedToArray-0c706912.js';
+import React, { useRef, useState, useMemo, useEffect } from 'react';
+import { useTable, useSortBy, useRowSelect } from 'react-table';
+import { setSelectedRows } from './utils.js';
+import { Row } from './Row.js';
+import { Header } from './Header.js';
+import classNames from 'classnames';
+import { useDispatchEventOnScroll } from '../../hooks/useDispatchEventOnScroll.js';
+import { Empty } from '../Empty/Empty.js';
+import './IndeterminateCheckbox.js';
+import '../Checkbox/Checkbox.js';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import '../Popover/Popover.js';
+import '../../hooks/useGetTooltipStyles.js';
+import '../../hooks/useGetElemSizes.js';
+import '../../hooks/useGetElemPositions.js';
+import '../../hooks/useGetTooltipPosition.js';
+import '../Tooltip/types.js';
+import '../../hooks/useHideOnScroll.js';
+import '../../consts/index.js';
+import 'dayjs';
+import '../../hooks/useOnOutsideClick.js';
+import '../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import '../Text/Text.js';
+import '../../utils/helpers.js';
+import '../Link/Link.js';
+import '../SVGIcons/IconInfo.js';
+import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../helperComponents/IconDynamicComponent/constants.js';
+import 'react-syntax-highlighter';
+import '../SVGIcons/IconArrowDown.js';
+import '../SVGIcons/IconArrowUp.js';
+import '../Image/Image.js';
+import '../Button/Button.js';
+import '../../objectWithoutProperties-fcd64cc7.js';
+import '../../helperComponents/Loader/Loader.js';
+import '../Button/consts.js';
+
+function Table(_ref) {
+  var columns = _ref.columns,
+    data = _ref.data,
+    onChange = _ref.onChange,
+    fixedHeader = _ref.fixedHeader,
+    _ref$withSelect = _ref.withSelect,
+    withSelect = _ref$withSelect === void 0 ? false : _ref$withSelect,
+    handleRowClick = _ref.handleRowClick,
+    className = _ref.className,
+    sortIconProps = _ref.sortIconProps,
+    containerRefHandler = _ref.containerRefHandler,
+    noResultProps = _ref.noResultProps;
+  var tableRef = useRef(null);
+  var _useState = useState(400),
+    _useState2 = _slicedToArray(_useState, 2),
+    tableWidth = _useState2[0],
+    setTableWidth = _useState2[1];
+  var dispatchScrollEvent = useDispatchEventOnScroll();
+  var sortedColumns = useMemo(function () {
+    var condition1 = function condition1(item) {
+      return item.fixed === 'left';
+    }; // Move even numbers to the start
+    var condition2 = function condition2(item) {
+      return item.fixed === 'right';
+    }; // Move numbers greater than 5 to the end
+
+    // Custom sorting function
+    columns.sort(function (a, b) {
+      if (condition1(a) && !condition1(b)) {
+        return -1; // Move 'a' to the start
+      } else if (!condition1(a) && condition1(b)) {
+        return 1; // Move 'b' to the start
+      } else if (condition2(a) && !condition2(b)) {
+        return 1; // Move 'a' to the end
+      } else if (!condition2(a) && condition2(b)) {
+        return -1; // Move 'b' to the end
+      } else {
+        return 0; // Their order doesn't matter
+      }
+    });
+    return _toConsumableArray(columns);
+  }, [columns]);
+  var _ref2 = useTable({
+      columns: sortedColumns,
+      data: data
+    }, useSortBy, useRowSelect, function (hooks) {
+      return setSelectedRows(hooks, withSelect);
+    }),
+    getTableProps = _ref2.getTableProps,
+    getTableBodyProps = _ref2.getTableBodyProps,
+    selectedFlatRows = _ref2.selectedFlatRows,
+    headerGroups = _ref2.headerGroups,
+    rows = _ref2.rows,
+    prepareRow = _ref2.prepareRow,
+    state = _ref2.state;
+  useEffect(function () {
+    onChange === null || onChange === void 0 || onChange(state);
+  }, [JSON.stringify(state)]);
+  var handleResize = function handleResize() {
+    if (tableRef.current) {
+      var _tableRef$current;
+      setTableWidth((_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.offsetWidth);
+    }
+  };
+  useEffect(function () {
+    window.addEventListener('resize', handleResize);
+    if (tableRef.current) {
+      var _tableRef$current2;
+      setTableWidth((_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.offsetWidth);
+    }
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [tableRef.current]);
+  return /*#__PURE__*/React.createElement("div", {
+    onScroll: dispatchScrollEvent,
+    ref: containerRefHandler,
+    className: classNames('table-wrapper scrollbar scrollbar--horizontal scrollbar--vertical', className)
+  }, /*#__PURE__*/React.createElement("table", _extends({}, getTableProps(), {
+    ref: tableRef
+  }), /*#__PURE__*/React.createElement("thead", null, headerGroups.map(function (headerGroup, i) {
+    return /*#__PURE__*/React.createElement(Header, {
+      key: i,
+      sortIconProps: sortIconProps,
+      withSelect: withSelect,
+      fixedHeader: fixedHeader,
+      headerGroup: headerGroup,
+      tableWidth: tableWidth
+    });
+  })), /*#__PURE__*/React.createElement("tbody", getTableBodyProps(), rows !== null && rows !== void 0 && rows.length ? rows.map(function (row) {
+    prepareRow(row);
+    return /*#__PURE__*/React.createElement(Row, {
+      handleRowClick: handleRowClick,
+      withSelect: withSelect,
+      selectedFlatRows: selectedFlatRows,
+      row: row,
+      key: row.id
+    });
+  }) : /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    colSpan: withSelect ? columns.length + 1 : columns.length
+  }, /*#__PURE__*/React.createElement(Empty, {
+    mainMessage: noResultProps === null || noResultProps === void 0 ? void 0 : noResultProps.title,
+    paragraphMessage: noResultProps === null || noResultProps === void 0 ? void 0 : noResultProps.text
+  }))))));
+}
+
+export { Table };

package/components/Table/index.d.ts

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

package/components/Table/index.js

@@ -0,0 +1,42 @@
+export { Table } from './Table.js';
+import '../../extends-e8ef956f.js';
+import '../../toConsumableArray-e0031ed3.js';
+import '../../slicedToArray-0c706912.js';
+import 'react';
+import 'react-table';
+import './utils.js';
+import './IndeterminateCheckbox.js';
+import '../Checkbox/Checkbox.js';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import 'classnames';
+import '../Popover/Popover.js';
+import '../../hooks/useGetTooltipStyles.js';
+import '../../hooks/useGetElemSizes.js';
+import '../../hooks/useGetElemPositions.js';
+import '../../hooks/useGetTooltipPosition.js';
+import '../Tooltip/types.js';
+import '../../hooks/useHideOnScroll.js';
+import '../../consts/index.js';
+import 'dayjs';
+import '../../hooks/useOnOutsideClick.js';
+import '../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import '../Text/Text.js';
+import '../../utils/helpers.js';
+import '../Link/Link.js';
+import '../SVGIcons/IconInfo.js';
+import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../helperComponents/IconDynamicComponent/constants.js';
+import 'react-syntax-highlighter';
+import './Row.js';
+import './Header.js';
+import '../SVGIcons/IconArrowDown.js';
+import '../SVGIcons/IconArrowUp.js';
+import '../../hooks/useDispatchEventOnScroll.js';
+import '../Empty/Empty.js';
+import '../Image/Image.js';
+import '../Button/Button.js';
+import '../../objectWithoutProperties-fcd64cc7.js';
+import '../../helperComponents/Loader/Loader.js';
+import '../Button/consts.js';

package/components/Table/types.d.ts

@@ -0,0 +1,44 @@
+import type { Column, TableState } from 'react-table';
+import type { TSVGIconType } from '../SVGIcons/types';
+type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
+export type IntRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
+export type TColumnProps = {
+    sortable?: boolean;
+};
+export type TFixedSide = 'left' | 'right';
+export type TColumnFields = {
+    columnProps?: TColumnProps;
+    fixed?: TFixedSide;
+    widthInPercent?: IntRange<0, 100>;
+};
+export type TColumn = Column & TColumnFields;
+export type TTableProps = {
+    className?: string;
+    columns: TColumn[];
+    data: any[];
+    withSelect?: boolean;
+    fixedHeader?: boolean;
+    handleRowClick?: (row: any) => void;
+    onChange?: (state: TableState) => void;
+    containerRefHandler?: (ref: HTMLDivElement) => void;
+    sortIconProps?: {
+        size?: TIconSize;
+        type?: TSVGIconType;
+        Component?: TSVGIconComponent;
+    };
+    noResultProps?: {
+        title?: string;
+        text?: string;
+    };
+};
+export type SortBy = {
+    id: string;
+    desc: boolean;
+};
+export interface TTableState extends TableState {
+    selectedRowIds?: Record<string, number>;
+    pageSize?: number;
+    pageIndex?: number;
+    sortBy?: SortBy[];
+}
+export {};

package/components/Table/types.js

@@ -0,0 +1 @@
+

package/components/Table/utils.d.ts

@@ -0,0 +1,5 @@
+import type { Hooks } from 'react-table';
+export declare const CHECKBOX_HEADER_ID = "selection";
+export declare const CHECKBOX_DEFAULT_WIDTH = 48;
+export declare function setSelectedRows(hooks: Hooks, withSelect: boolean): void;
+export declare function calcColumnWidth(percent: number, tableWidth: number): number;

package/components/Table/utils.js

@@ -0,0 +1,53 @@
+import { _ as _toConsumableArray } from '../../toConsumableArray-e0031ed3.js';
+import React from 'react';
+import { IndeterminateCheckbox } from './IndeterminateCheckbox.js';
+import '../../slicedToArray-0c706912.js';
+import '../Checkbox/Checkbox.js';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import '../../extends-e8ef956f.js';
+import 'classnames';
+import '../Popover/Popover.js';
+import '../../hooks/useGetTooltipStyles.js';
+import '../../hooks/useGetElemSizes.js';
+import '../../hooks/useGetElemPositions.js';
+import '../../hooks/useGetTooltipPosition.js';
+import '../Tooltip/types.js';
+import '../../hooks/useHideOnScroll.js';
+import '../../consts/index.js';
+import 'dayjs';
+import '../../hooks/useOnOutsideClick.js';
+import '../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import '../Text/Text.js';
+import '../../utils/helpers.js';
+import '../Link/Link.js';
+import '../SVGIcons/IconInfo.js';
+import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../helperComponents/IconDynamicComponent/constants.js';
+import 'react-syntax-highlighter';
+
+var CHECKBOX_HEADER_ID = 'selection';
+var CHECKBOX_DEFAULT_WIDTH = 48;
+function setSelectedRows(hooks, withSelect) {
+  if (withSelect) {
+    hooks.visibleColumns.push(function (columns) {
+      return [{
+        id: CHECKBOX_HEADER_ID,
+        Header: function Header(_ref) {
+          var getToggleAllRowsSelectedProps = _ref.getToggleAllRowsSelectedProps;
+          return /*#__PURE__*/React.createElement(IndeterminateCheckbox, getToggleAllRowsSelectedProps());
+        },
+        Cell: function Cell(_ref2) {
+          var row = _ref2.row;
+          return /*#__PURE__*/React.createElement(IndeterminateCheckbox, row.getToggleRowSelectedProps());
+        }
+      }].concat(_toConsumableArray(columns));
+    });
+  }
+}
+function calcColumnWidth(percent, tableWidth) {
+  return percent * tableWidth / 100;
+}
+
+export { CHECKBOX_DEFAULT_WIDTH, CHECKBOX_HEADER_ID, calcColumnWidth, setSelectedRows };

package/components/Text/Text.d.ts

@@ -0,0 +1,3 @@
+import type { ReactElement } from 'react';
+import type { TextPropTypes } from './types';
+export declare const Text: (props: TextPropTypes) => ReactElement;

package/components/Text/Text.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import classNames from 'classnames';
+import { noop } from '../../utils/helpers.js';
+import 'dayjs';
+
+var Text = function Text(props) {
+  var children = props.children,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'primary' : _props$type,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'standard' : _props$size,
+    _props$weight = props.weight,
+    weight = _props$weight === void 0 ? 'regular' : _props$weight,
+    _props$lineHeight = props.lineHeight,
+    lineHeight = _props$lineHeight === void 0 ? 'medium' : _props$lineHeight,
+    _props$as = props.as,
+    As = _props$as === void 0 ? 'p' : _props$as,
+    _props$dataId = props.dataId,
+    dataId = _props$dataId === void 0 ? '' : _props$dataId,
+    _props$onClick = props.onClick,
+    onClick = _props$onClick === void 0 ? noop : _props$onClick,
+    _props$id = props.id,
+    id = _props$id === void 0 ? '' : _props$id,
+    title = props.title;
+  return /*#__PURE__*/React.createElement(As, {
+    id: id,
+    title: title,
+    "data-id": dataId,
+    onClick: onClick,
+    className: classNames('body', size && "body-".concat(size), type && "color-".concat(type), weight, lineHeight && "lh-".concat(lineHeight), className)
+  }, children);
+};
+
+export { Text };

package/components/Text/index.d.ts

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

package/components/Text/index.js

@@ -0,0 +1,5 @@
+export { Text } from './Text.js';
+import 'react';
+import 'classnames';
+import '../../utils/helpers.js';
+import 'dayjs';

package/components/Text/types.d.ts

@@ -0,0 +1,19 @@
+import type { ElementType, MouseEvent, ReactNode } from 'react';
+type TTextTypes = 'primary' | 'secondary' | 'tertiary' | 'disabled' | 'inverse' | 'selected' | 'brand' | 'danger' | 'warning' | 'success' | 'information' | 'discovery';
+type TTextSize = 'xxsmall' | 'xsmall' | 'small' | 'standard' | 'medium' | 'large';
+type TTextWeight = 'regular' | 'semibold' | 'bold' | 'bolder';
+type TTextLineHeight = 'xsmall' | 'small' | 'medium' | 'large';
+export interface TextPropTypes {
+    id?: string;
+    as?: ElementType;
+    title?: string;
+    children?: ReactNode;
+    type?: TTextTypes;
+    size?: TTextSize;
+    weight?: TTextWeight;
+    lineHeight?: TTextLineHeight;
+    className?: string;
+    dataId?: string;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+}
+export {};

package/components/Text/types.js

@@ -0,0 +1 @@
+

package/components/Textarea/Textarea.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { TTextAreaTypeProps } from './types';
+export declare const Textarea: React.ForwardRefExoticComponent<TTextAreaTypeProps & React.RefAttributes<HTMLTextAreaElement>>;

package/components/Textarea/Textarea.js

@@ -0,0 +1,115 @@
+import { _ as _extends } from '../../extends-e8ef956f.js';
+import { _ as _objectWithoutProperties } from '../../objectWithoutProperties-fcd64cc7.js';
+import React, { useMemo } from 'react';
+import { Label } from '../../helperComponents/Label/Label.js';
+import { ErrorMessage } from '../../helperComponents/ErrorMessage/ErrorMessage.js';
+import '../Checkbox/Checkbox.js';
+import classNames from 'classnames';
+import { Text } from '../Text/Text.js';
+import 'dayjs';
+import '../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import 'react-syntax-highlighter';
+import { IconCheckmarkCircleFilled } from '../SVGIcons/IconCheckmarkCircleFilled.js';
+import '../../utils/helpers.js';
+import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../helperComponents/IconDynamicComponent/constants.js';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import '../Popover/Popover.js';
+import '../../slicedToArray-0c706912.js';
+import '../../hooks/useGetTooltipStyles.js';
+import '../../hooks/useGetElemSizes.js';
+import '../../hooks/useGetElemPositions.js';
+import '../../hooks/useGetTooltipPosition.js';
+import '../Tooltip/types.js';
+import '../../hooks/useHideOnScroll.js';
+import '../../consts/index.js';
+import '../../hooks/useOnOutsideClick.js';
+import '../Link/Link.js';
+import '../SVGIcons/IconInfo.js';
+
+var _excluded = ["className", "error", "hasError", "label", "disabled", "currentValue", "changeHandler", "placeHolder", "onChange", "required", "maxCount", "helperText", "successMessage", "dataId", "labelAddons"];
+var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    error = _ref.error,
+    hasError = _ref.hasError,
+    label = _ref.label,
+    disabled = _ref.disabled,
+    currentValue = _ref.currentValue,
+    changeHandler = _ref.changeHandler,
+    placeHolder = _ref.placeHolder,
+    onChange = _ref.onChange,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    maxCount = _ref.maxCount,
+    helperText = _ref.helperText,
+    successMessage = _ref.successMessage,
+    _ref$dataId = _ref.dataId,
+    dataId = _ref$dataId === void 0 ? '' : _ref$dataId,
+    labelAddons = _ref.labelAddons,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  // const isErrorVisible = hasError !== undefined ? hasError : !!error
+
+  var handleChange = function handleChange(event) {
+    if (changeHandler) {
+      changeHandler(event);
+    }
+    if (onChange) {
+      onChange(event);
+    }
+  };
+  var currentLength = useMemo(function () {
+    if (currentValue) {
+      return currentValue.length;
+    }
+    if (rest && rest.value && typeof rest.value === 'string') {
+      return rest.value.length;
+    }
+    return 0;
+  }, [rest, currentValue]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('textarea', className, {
+      'textarea--invalid': hasError
+    })
+  }, /*#__PURE__*/React.createElement(Label, {
+    text: label,
+    required: required,
+    disabled: disabled,
+    labelAddons: labelAddons
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "textarea__inner"
+  }, /*#__PURE__*/React.createElement("textarea", _extends({
+    "data-id": dataId,
+    disabled: disabled,
+    ref: ref,
+    placeholder: placeHolder,
+    onChange: handleChange
+  }, rest, currentValue ? {
+    value: currentValue
+  } : {}))), error || successMessage || helperText || maxCount ? /*#__PURE__*/React.createElement("div", {
+    className: "textarea__message mt-8"
+  }, error && /*#__PURE__*/React.createElement(ErrorMessage, {
+    message: error,
+    icon: "infoFilled"
+  }), successMessage ? /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    type: "success",
+    className: "flexbox align-items--center"
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconCheckmarkCircleFilled, {
+    type: "success",
+    size: "xsmall"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ml-4"
+  }, successMessage))) : null, helperText && !successMessage ? /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    type: disabled ? 'disabled' : 'secondary'
+  }, helperText) : null, maxCount ? /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    type: disabled ? 'disabled' : 'secondary',
+    className: "textarea__counter"
+  }, "".concat(currentLength, "/").concat(maxCount)) : null) : null);
+});
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

package/components/Textarea/index.d.ts

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

package/components/Textarea/index.js

@@ -0,0 +1,31 @@
+export { Textarea } from './Textarea.js';
+import '../../extends-e8ef956f.js';
+import '../../objectWithoutProperties-fcd64cc7.js';
+import 'react';
+import '../../helperComponents/Label/Label.js';
+import '../Text/Text.js';
+import 'classnames';
+import '../../utils/helpers.js';
+import 'dayjs';
+import '../../helperComponents/ErrorMessage/ErrorMessage.js';
+import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../helperComponents/IconDynamicComponent/constants.js';
+import '../Checkbox/Checkbox.js';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import '../Popover/Popover.js';
+import '../../slicedToArray-0c706912.js';
+import '../../hooks/useGetTooltipStyles.js';
+import '../../hooks/useGetElemSizes.js';
+import '../../hooks/useGetElemPositions.js';
+import '../../hooks/useGetTooltipPosition.js';
+import '../Tooltip/types.js';
+import '../../hooks/useHideOnScroll.js';
+import '../../consts/index.js';
+import '../../hooks/useOnOutsideClick.js';
+import '../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import '../Link/Link.js';
+import '../SVGIcons/IconInfo.js';
+import 'react-syntax-highlighter';
+import '../SVGIcons/IconCheckmarkCircleFilled.js';

package/components/Textarea/types.d.ts

@@ -0,0 +1,18 @@
+import type { JSX } from 'react';
+export interface TTextAreaTypeProps extends IFormCompProps {
+    className?: string;
+    name?: string;
+    error?: string;
+    cols?: number;
+    row?: number;
+    label?: string | JSX.Element;
+    currentValue?: string;
+    placeHolder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    maxCount?: number;
+    changeHandler?: (event: TChangeEventType) => void;
+    helperText?: string;
+    successMessage?: string;
+    labelAddons?: JSX.Element;
+}

package/components/Textarea/types.js

@@ -0,0 +1 @@
+

package/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { TTooltipProps } from './types';
+export declare const Tooltip: (props: TTooltipProps) => JSX.Element | null;