ab-ui-library 1.0.1

package/components/DatePicker/index.d.ts

@@ -0,0 +1,3 @@
+export * from './TimePicker';
+export * from './SimpleDatePicker';
+export * from './RangeDatePicker';

package/components/DatePicker/index.js

@@ -0,0 +1,88 @@
+export { TimePicker } from './TimePicker.js';
+export { SimpleDatePicker } from './SimpleDatePicker.js';
+export { RangeDatePicker } from './RangeDatePicker.js';
+import '../../extends-e8ef956f.js';
+import '../../slicedToArray-0c706912.js';
+import '../../objectWithoutProperties-fcd64cc7.js';
+import 'react';
+import 'dayjs';
+import 'react-datepicker';
+import '../Input/Input.js';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import 'react-input-mask';
+import 'classnames';
+import 'react-number-format';
+import '../../helperComponents/Label/Label.js';
+import '../Text/Text.js';
+import '../../utils/helpers.js';
+import '../../helperComponents/ErrorMessage/ErrorMessage.js';
+import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../helperComponents/IconDynamicComponent/constants.js';
+import '../Checkbox/Checkbox.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 '../../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';
+import '../Input/InputPassword.js';
+import '../SVGIcons/IconDismissCircle.js';
+import '../SVGIcons/IconDismissCircleFilled.js';
+import '../SVGIcons/IconEyeOff.js';
+import '../SVGIcons/IconEyeOn.js';
+import '../Divider/Divider.js';
+import '../Tooltip/Tooltip.js';
+import './hooks.js';
+import '../SVGIcons/IconClock.js';
+import './CustomHeader/CustomHeader.js';
+import 'react-dom';
+import 'framer-motion';
+import '../SVGIcons/IconChevronRight.js';
+import '../Collapse/CollapseGroup/CollapseGroup.js';
+import '../../toConsumableArray-e0031ed3.js';
+import '../Collapse/CollapseItem/CollapseItem.js';
+import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
+import '../SVGIcons/IconChevronDown.js';
+import '../Select/SharedComponents/ContentTop.js';
+import '../Select/SharedComponents/Actions.js';
+import '../Button/Button.js';
+import '../../helperComponents/Loader/Loader.js';
+import '../Button/consts.js';
+import '../Menu/Menu.js';
+import '../../helperComponents/OptionItem/OptionItem.js';
+import '../Avatar/Avatar.js';
+import '../FileUpload/FileUpload.js';
+import '../FileUpload/types.js';
+import '../FileUpload/UploadItems.js';
+import '../../hooks/useFormProps.js';
+import '../../context/types.js';
+import '../SVGIcons/IconDelete.js';
+import '../SVGIcons/IconEditFilled.js';
+import '../SVGIcons/IconEdit.js';
+import '../SVGIcons/IconAttach.js';
+import '../SVGIcons/IconCheckmark.js';
+import '../SVGIcons/IconMore.js';
+import '../SVGIcons/IconDismissFilled.js';
+import '../SVGIcons/IconSearchFilled.js';
+import '../SVGIcons/IconSelectAllOff.js';
+import '../SVGIcons/IconChevronLeft.js';
+import '../Select/ButtonSelect/ButtonSelect.js';
+import '../Select/SharedComponents/Loading.js';
+import '../Select/SharedComponents/ButtonSelectWrapper/ButtonSelectWrapper.js';
+import '../Select/SharedComponents/ButtonSelectWrapper/Button/Button.js';
+import '../SVGIcons/IconCaretDownFilled.js';
+import '../SVGIcons/IconCaretUpFilled.js';
+import '../../hooks/useGetHasBottomSpace.js';
+import '../../hooks/useChangePositionsOnScroll.js';
+import '../SVGIcons/IconCalendarRight.js';
+import './types.js';

package/components/DatePicker/types.d.ts

@@ -0,0 +1,44 @@
+import type { ReactDatePickerProps } from 'react-datepicker';
+import type { ReactNode } from 'react';
+type DatePickerDefaultProps = Omit<IFormCompProps, 'value'> & Omit<ReactDatePickerProps, 'onChange' | 'value'>;
+export interface TDatepickerBaseProps extends DatePickerDefaultProps {
+    dataId?: string;
+    label?: ReactNode;
+    format?: string;
+}
+export interface ISimpleDatePickerProps extends TDatepickerBaseProps {
+    helperText?: string;
+    dataIdPrefix?: string;
+    currentDate?: Date | undefined;
+    changeHandler?: (date: Date) => void;
+    excludeDates?: Date[];
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    required?: boolean;
+    dayjsLocale?: string;
+    value?: Date;
+    size?: 'large' | 'small';
+    months?: TSelectOptions;
+}
+export interface ITimePickerProps extends TDatepickerBaseProps {
+    currentTime?: Date | undefined;
+    changeHandler?: (date: Date) => void;
+    required?: boolean;
+    filterTime?: (date: Date) => boolean;
+    dayjsLocale?: string;
+    value?: Date;
+    size?: 'large' | 'small';
+}
+export interface IRangeDatePickerProps extends TDatepickerBaseProps {
+    currentDates?: TRangePickerValues;
+    changeHandler: (date: TRangePickerValues) => void;
+    maxDate?: Date | undefined;
+    dayjsLocale?: string;
+    value?: [Date, Date];
+}
+export type TRangePickerValues = [Date | null, Date | null];
+export declare enum DateFormat {
+    LongDate = "MMMM D, YYYY",
+    ShortDate = "MMM D, YYYY"
+}
+export {};

package/components/DatePicker/types.js

@@ -0,0 +1,7 @@
+var DateFormat = /*#__PURE__*/function (DateFormat) {
+  DateFormat["LongDate"] = "MMMM D, YYYY";
+  DateFormat["ShortDate"] = "MMM D, YYYY";
+  return DateFormat;
+}({});
+
+export { DateFormat };

package/components/Divider/Divider.d.ts

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

package/components/Divider/Divider.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import classNames from 'classnames';
+
+var Divider = function Divider(props) {
+  var _props$type = props.type,
+    type = _props$type === void 0 ? 'primary' : _props$type,
+    _props$color = props.color,
+    color = _props$color === void 0 ? 'dark' : _props$color,
+    isHorizontal = props.isHorizontal,
+    className = props.className;
+  return /*#__PURE__*/React.createElement("hr", {
+    className: classNames('divider', "divider--".concat(type), "divider--".concat(color), {
+      'divider--horizontal': isHorizontal,
+      'divider--vertical': !isHorizontal
+    }, className)
+  });
+};
+
+export { Divider };

package/components/Divider/index.d.ts

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

package/components/Divider/index.js

@@ -0,0 +1,3 @@
+export { Divider } from './Divider.js';
+import 'react';
+import 'classnames';

package/components/Divider/types.d.ts

@@ -0,0 +1,6 @@
+export interface TDividerProps {
+    type?: 'primary' | 'secondary';
+    color?: 'dark' | 'light';
+    isHorizontal?: boolean;
+    className?: string;
+}

package/components/Divider/types.js

@@ -0,0 +1 @@
+

package/components/Empty/Empty.d.ts

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

package/components/Empty/Empty.js

@@ -0,0 +1,63 @@
+import { _ as _extends } from '../../extends-e8ef956f.js';
+import React from 'react';
+import { Text } from '../Text/Text.js';
+import { Image } from '../Image/Image.js';
+import { Button } from '../Button/Button.js';
+import classNames from 'classnames';
+import '../../utils/helpers.js';
+import 'dayjs';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import '../../objectWithoutProperties-fcd64cc7.js';
+import '../../helperComponents/Loader/Loader.js';
+import '../Checkbox/Checkbox.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 '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../helperComponents/IconDynamicComponent/constants.js';
+import 'react-syntax-highlighter';
+import '../Button/consts.js';
+
+var img = "data:image/svg+xml,%3csvg width='102' height='117' viewBox='0 0 102 117' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M51.2567 89.5C73.3101 89.5 91.1891 71.626 91.1891 49.5C91.1891 27.374 73.2313 9.5 51.2567 9.5C29.2033 9.5 11.3243 27.374 11.3243 49.5C11.3243 71.626 29.2033 89.5 51.2567 89.5Z' fill='%23EAEEF9'/%3e%3cpath d='M88.5898 23.2796C90.3733 23.2796 91.8191 21.8342 91.8191 20.0512C91.8191 18.2683 90.3733 16.8229 88.5898 16.8229C86.8064 16.8229 85.3606 18.2683 85.3606 20.0512C85.3606 21.8342 86.8064 23.2796 88.5898 23.2796Z' fill='%23EAEEF9'/%3e%3cpath d='M94.182 32.7287C95.3999 32.7287 96.3873 31.7416 96.3873 30.5239C96.3873 29.3063 95.3999 28.3192 94.182 28.3192C92.964 28.3192 91.9766 29.3063 91.9766 30.5239C91.9766 31.7416 92.964 32.7287 94.182 32.7287Z' fill='%23EAEEF9'/%3e%3cpath d='M13.4509 23.2008C14.6689 23.2008 15.6562 22.2137 15.6562 20.9961C15.6562 19.7785 14.6689 18.7914 13.4509 18.7914C12.2329 18.7914 11.2455 19.7785 11.2455 20.9961C11.2455 22.2137 12.2329 23.2008 13.4509 23.2008Z' fill='%23EAEEF9'/%3e%3cpath d='M4.7083 65.7202C6.97025 65.7202 8.80392 63.8871 8.80392 61.6257C8.80392 59.3644 6.97025 57.5312 4.7083 57.5312C2.44635 57.5312 0.612671 59.3644 0.612671 61.6257C0.612671 63.8871 2.44635 65.7202 4.7083 65.7202Z' fill='%23EAEEF9'/%3e%3cg filter='url(%23filter0_d_2133_10983)'%3e%3cpath d='M74.6148 11.9414C76.8131 11.9414 78.5995 13.7154 78.6147 15.9137L79.0598 80.2091C79.0598 81.9414 77.6421 83.28 75.9093 83.28H26.4467C24.714 83.28 23.2963 81.8627 23.2963 80.2091V15.0123C23.2963 13.28 24.714 11.9414 26.4467 11.9414H62.2835H74.6148Z' fill='url(%23paint0_linear_2133_10983)'/%3e%3c/g%3e%3cpath d='M47.3974 73.1216H45.5859C45.1921 73.1216 44.877 72.7279 44.877 72.2554C44.877 71.783 45.1921 71.3893 45.5859 71.3893H47.3974C47.7912 71.3893 48.1063 71.783 48.1063 72.2554C48.1063 72.8066 47.7912 73.1216 47.3974 73.1216Z' fill='%23CED7E2'/%3e%3cpath d='M41.8841 73.1216H31.33C30.9362 73.1216 30.6212 72.7279 30.6212 72.2554C30.6212 71.783 30.9362 71.3893 31.33 71.3893H41.8841C42.2779 71.3893 42.593 71.783 42.593 72.2554C42.593 72.8066 42.2779 73.1216 41.8841 73.1216Z' fill='%23D5DDEA'/%3e%3cpath d='M55.3523 22.5709H31.6449C31.0936 22.5709 30.621 22.0985 30.621 21.5473C30.621 20.9961 31.0936 20.5237 31.6449 20.5237H55.3523C55.9037 20.5237 56.3762 20.9961 56.3762 21.5473C56.3762 22.0985 55.9037 22.5709 55.3523 22.5709Z' fill='%23D5DDEA'/%3e%3cpath d='M40.7813 28.2401H31.6449C31.0936 28.2401 30.621 27.7677 30.621 27.2165C30.621 26.6653 31.0936 26.1929 31.6449 26.1929H40.7026C41.2539 26.1929 41.7265 26.6653 41.7265 27.2165C41.7265 27.7677 41.2539 28.2401 40.7813 28.2401Z' fill='%23D5DDEA'/%3e%3cpath d='M82.2101 84.4606C81.4225 84.4606 80.6349 84.1457 80.0048 83.437L66.8515 70.2874L66.379 70.6023C62.1258 73.752 57.1638 75.4055 52.123 75.4055C46.0584 75.4055 39.9937 72.9646 35.5043 68.7126C30.7785 64.2244 28.1794 58.1614 28.1794 51.5472C28.1794 38.3976 38.891 27.689 52.0443 27.689C61.0232 27.689 68.8994 32.4134 73.1525 40.4449C77.3269 48.3976 76.7756 57.689 71.656 65.1693L71.341 65.6417L84.573 78.8701C85.912 80.2087 85.5969 81.5472 85.3606 82.2559C84.7305 83.5157 83.4703 84.4606 82.2101 84.4606ZM52.0443 34.2244C42.4353 34.2244 34.7166 42.0197 34.7166 51.5472C34.7166 62.4134 43.6167 68.9488 52.2806 68.9488C57.5576 68.9488 62.3621 66.5866 65.7489 62.3346C69.9233 57.1378 70.6321 50.1299 67.7179 44.0669C64.725 38.0039 58.7391 34.2244 52.0443 34.2244Z' fill='%23989FB0'/%3e%3cpath d='M44.5619 54.3813C45.5858 54.3813 46.4521 53.5152 46.4521 52.4916C46.4521 51.4679 45.5858 50.6018 44.5619 50.6018C43.538 50.6018 42.6716 51.4679 42.6716 52.4916C42.6716 53.5152 43.538 54.3813 44.5619 54.3813Z' fill='%23989FB0'/%3e%3cpath d='M59.054 54.3813C60.0779 54.3813 60.9443 53.5152 60.9443 52.4916C60.9443 51.4679 60.0779 50.6018 59.054 50.6018C58.0301 50.6018 57.1638 51.4679 57.1638 52.4916C57.1638 53.5939 58.0301 54.3813 59.054 54.3813Z' fill='%23989FB0'/%3e%3cpath d='M44.4879 46.2395L40.3298 48.484L40.8911 49.5233L45.0492 47.2787L44.4879 46.2395Z' fill='%23989FB0'/%3e%3cpath d='M58.797 46.2097L58.2358 47.249L62.3944 49.4931L62.9556 48.4537L58.797 46.2097Z' fill='%23989FB0'/%3e%3cpath d='M51.8079 58.7901C53.0259 58.7901 54.0132 58.0498 54.0132 57.1366C54.0132 56.2233 53.0259 55.483 51.8079 55.483C50.5899 55.483 49.6025 56.2233 49.6025 57.1366C49.6025 58.0498 50.5899 58.7901 51.8079 58.7901Z' fill='%23989FB0'/%3e%3cdefs%3e%3cfilter id='filter0_d_2133_10983' x='1.29626' y='0.941406' width='99.7635' height='115.339' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e%3cfeFlood flood-opacity='0' result='BackgroundImageFix'/%3e%3cfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3e%3cfeOffset dy='11'/%3e%3cfeGaussianBlur stdDeviation='11'/%3e%3cfeColorMatrix type='matrix' values='0 0 0 0 0.397708 0 0 0 0 0.47749 0 0 0 0 0.575 0 0 0 0.27 0'/%3e%3cfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_2133_10983'/%3e%3cfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_2133_10983' result='shape'/%3e%3c/filter%3e%3clinearGradient id='paint0_linear_2133_10983' x1='51.1599' y1='10.2913' x2='51.1599' y2='84.0491' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='%23FDFEFF'/%3e%3cstop offset='0.9964' stop-color='%23ECF0F5'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e";
+
+var Empty = function Empty(props) {
+  var _props$size = props.size,
+    size = _props$size === void 0 ? 'large' : _props$size,
+    mainMessage = props.mainMessage,
+    paragraphMessage = props.paragraphMessage,
+    buttonProps = props.buttonProps,
+    className = props.className,
+    _props$illustration = props.illustration,
+    illustration = _props$illustration === void 0 ? img : _props$illustration;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("no-result ".concat(size == 'large' ? 'no-result--large' : 'no-result--small'), className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "no-result__icon"
+  }, /*#__PURE__*/React.createElement(Image, {
+    imagePath: illustration
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "no-result__content"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: size == 'large' ? 'large' : 'small',
+    weight: "bold"
+  }, mainMessage), paragraphMessage ? /*#__PURE__*/React.createElement(Text, {
+    size: size == 'large' ? 'small' : 'xsmall'
+  }, paragraphMessage) : null, buttonProps ? /*#__PURE__*/React.createElement(Button, _extends({}, buttonProps, {
+    size: "medium",
+    className: "mt-4"
+  })) : null));
+};
+
+export { Empty };

package/components/Empty/index.d.ts

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

package/components/Empty/index.js

@@ -0,0 +1,32 @@
+export { Empty } from './Empty.js';
+import '../../extends-e8ef956f.js';
+import 'react';
+import '../Text/Text.js';
+import 'classnames';
+import '../../utils/helpers.js';
+import 'dayjs';
+import '../Image/Image.js';
+import '../Button/Button.js';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import '../../objectWithoutProperties-fcd64cc7.js';
+import '../../helperComponents/Loader/Loader.js';
+import '../Checkbox/Checkbox.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 '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../helperComponents/IconDynamicComponent/constants.js';
+import 'react-syntax-highlighter';
+import '../Button/consts.js';

package/components/Empty/types.d.ts

@@ -0,0 +1,9 @@
+import type { TButtonPropTypes } from '../Button/types';
+export interface TEmptyProps {
+    size?: string;
+    className?: string;
+    mainMessage?: string;
+    paragraphMessage?: string;
+    buttonProps?: TButtonPropTypes;
+    illustration?: string;
+}

package/components/Empty/types.js

@@ -0,0 +1 @@
+

package/components/FileUpload/FileUpload.d.ts

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

package/components/FileUpload/FileUpload.js

@@ -0,0 +1,174 @@
+import { _ as _toConsumableArray } from '../../toConsumableArray-e0031ed3.js';
+import { _ as _slicedToArray } from '../../slicedToArray-0c706912.js';
+import React, { useRef, useState, useCallback } from 'react';
+import { FileUploadMode } from './types.js';
+import { Button } from '../Button/Button.js';
+import { Label } from '../../helperComponents/Label/Label.js';
+import 'classnames';
+import { uniqueFiles, checkIsAllowedFileSize, checkIsAllowedTypes, getFormattedValues } from '../../utils/helpers.js';
+import '../Checkbox/Checkbox.js';
+import { FILE_UPLOAD_ERRORS } from '../../consts/index.js';
+import '../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import 'react-syntax-highlighter';
+import { UploadItems } from './UploadItems.js';
+import { IconEditFilled } from '../SVGIcons/IconEditFilled.js';
+import { IconEdit } from '../SVGIcons/IconEdit.js';
+import { IconAttach } from '../SVGIcons/IconAttach.js';
+import '../../extends-e8ef956f.js';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import '../../objectWithoutProperties-fcd64cc7.js';
+import 'dayjs';
+import '../../helperComponents/Loader/Loader.js';
+import '../Button/consts.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 '../../hooks/useOnOutsideClick.js';
+import '../Text/Text.js';
+import '../Link/Link.js';
+import '../SVGIcons/IconInfo.js';
+import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../helperComponents/IconDynamicComponent/constants.js';
+import '../../hooks/useFormProps.js';
+import '../../context/types.js';
+import '../../helperComponents/ErrorMessage/ErrorMessage.js';
+import '../SVGIcons/IconDelete.js';
+
+var FileUpload = function FileUpload(props) {
+  var _props$allowedTypes = props.allowedTypes,
+    allowedTypes = _props$allowedTypes === void 0 ? 'application/pdf, .png, .jpg, .jpeg, image/jpeg, image/png, image/jpg, text/plain, image/*, .pdf, .doc, .docx, application/vnd' : _props$allowedTypes,
+    label = props.label,
+    getFiles = props.getFiles,
+    removeFiles = props.removeFiles,
+    handleFileClick = props.handleFileClick,
+    name = props.name,
+    setFieldValue = props.setFieldValue,
+    toBase64 = props.toBase64,
+    required = props.required,
+    disabled = props.disabled,
+    buttonText = props.buttonText,
+    _props$withFilePrevie = props.withFilePreview,
+    withFilePreview = _props$withFilePrevie === void 0 ? true : _props$withFilePrevie,
+    _props$multiple = props.multiple,
+    multiple = _props$multiple === void 0 ? true : _props$multiple,
+    uploadedFiles = props.uploadedFiles,
+    value = props.value,
+    labelAddons = props.labelAddons,
+    onError = props.onError,
+    fileAllowedSize = props.fileAllowedSize,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? FileUploadMode.attach : _props$mode;
+  var files = value || uploadedFiles || [];
+  var fileInputRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHovered = _useState2[0],
+    setHoverState = _useState2[1];
+  var onMouseEnterOrLeave = function onMouseEnterOrLeave() {
+    return setHoverState(!isHovered);
+  };
+  var onUploadClick = function onUploadClick() {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+  var updateInForm = useCallback(function (values) {
+    if (name && setFieldValue) {
+      setFieldValue(name, values);
+    }
+  }, [name, setFieldValue]);
+  var setFiles = function setFiles(selectedFiles) {
+    var allowedFilesBySize = selectedFiles.filter(function (file) {
+      return !(fileAllowedSize && !checkIsAllowedFileSize(fileAllowedSize, file.size));
+    });
+    var allowedFilesByExtension = selectedFiles.filter(function (file) {
+      return !(allowedTypes && !checkIsAllowedTypes(allowedTypes, file.type));
+    });
+    if (allowedFilesByExtension.length !== selectedFiles.length) {
+      onError && onError(FILE_UPLOAD_ERRORS.type);
+      return;
+    }
+    if (allowedFilesBySize.length !== selectedFiles.length) {
+      onError && onError(FILE_UPLOAD_ERRORS.size);
+      return;
+    }
+    updateInForm(toBase64 ? getFormattedValues(selectedFiles) : selectedFiles);
+    if (getFiles) {
+      getFiles(selectedFiles);
+    }
+  };
+  var handleChange = useCallback(function (event) {
+    var _event$target;
+    var fileList = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.files;
+    var fileArray = multiple ? Array.from(fileList) : [fileList[0]];
+    if (fileArray) {
+      var updatedFiles = uniqueFiles(multiple ? [].concat(_toConsumableArray(fileArray), _toConsumableArray(files)) : fileArray);
+      setFiles(updatedFiles);
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  }, [files, multiple]);
+  var handleFileRemove = useCallback(function (file, index) {
+    if (files) {
+      var filteredFiles = files.filter(function (_, i) {
+        return i !== index;
+      });
+      updateInForm(filteredFiles);
+      if (removeFiles) {
+        removeFiles(file);
+      }
+    }
+  }, [files, removeFiles]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "file-upload"
+  }, /*#__PURE__*/React.createElement(Label, {
+    text: label,
+    required: required,
+    disabled: disabled,
+    labelAddons: labelAddons
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "file-upload__inner"
+  }, /*#__PURE__*/React.createElement("input", {
+    name: name,
+    type: "file",
+    multiple: multiple,
+    className: "hide",
+    ref: fileInputRef,
+    accept: allowedTypes,
+    onChange: handleChange
+  }), mode === FileUploadMode.edit && /*#__PURE__*/React.createElement("div", {
+    className: "edit__icon",
+    onMouseEnter: onMouseEnterOrLeave,
+    onMouseLeave: onMouseEnterOrLeave,
+    onClick: onUploadClick
+  }, isHovered ? /*#__PURE__*/React.createElement(IconEditFilled, {
+    size: "xxsmall",
+    type: "secondary"
+  }) : /*#__PURE__*/React.createElement(IconEdit, {
+    size: "xxsmall",
+    type: "secondary"
+  })), mode === FileUploadMode.attach && /*#__PURE__*/React.createElement(Button, {
+    type: "secondary",
+    size: "medium",
+    disabled: disabled,
+    iconProps: {
+      Component: IconAttach
+    },
+    onClick: onUploadClick,
+    buttonText: buttonText
+  }), /*#__PURE__*/React.createElement(UploadItems, {
+    handleFileClick: handleFileClick,
+    onRemove: handleFileRemove,
+    files: files,
+    withFilePreview: withFilePreview
+  })));
+};
+
+export { FileUpload };

package/components/FileUpload/UploadItems.d.ts

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

package/components/FileUpload/UploadItems.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Text } from '../Text/Text.js';
+import { useFormProps } from '../../hooks/useFormProps.js';
+import { openFileInNewWindow } from '../../utils/helpers.js';
+import '../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import { ErrorMessage } from '../../helperComponents/ErrorMessage/ErrorMessage.js';
+import '../Checkbox/Checkbox.js';
+import 'classnames';
+import { Button } from '../Button/Button.js';
+import 'react-syntax-highlighter';
+import { IconDelete } from '../SVGIcons/IconDelete.js';
+import 'dayjs';
+import '../../context/types.js';
+import '../../slicedToArray-0c706912.js';
+import '../../consts/index.js';
+import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../helperComponents/IconDynamicComponent/constants.js';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import '../../extends-e8ef956f.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 '../../hooks/useOnOutsideClick.js';
+import '../Link/Link.js';
+import '../SVGIcons/IconInfo.js';
+import '../../objectWithoutProperties-fcd64cc7.js';
+import '../../helperComponents/Loader/Loader.js';
+import '../Button/consts.js';
+
+var UploadItems = function UploadItems(props) {
+  var files = props.files,
+    onRemove = props.onRemove,
+    withFilePreview = props.withFilePreview,
+    handleFileClick = props.handleFileClick;
+  var _useFormProps = useFormProps(),
+    errors = _useFormProps.errors;
+  var filesErrors = errors && errors.files && errors.files.length > 0;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, files.map(function (file, index) {
+    var _errors$files$index, _errors$files$index2;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "upload-item mt-4 ".concat(filesErrors && (_errors$files$index = errors.files[index]) !== null && _errors$files$index !== void 0 && _errors$files$index.message ? 'upload-item--error' : ''),
+      key: index
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "upload-item__inner"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "upload-item__content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "upload-item__content__inner pr-8"
+    }, /*#__PURE__*/React.createElement(Text, {
+      size: "small",
+      lineHeight: "medium",
+      className: "upload-item__text",
+      onClick: function onClick(e) {
+        return withFilePreview && openFileInNewWindow({
+          e: e,
+          file: file,
+          handleFileClick: handleFileClick
+        });
+      }
+    }, file.name), filesErrors && /*#__PURE__*/React.createElement(ErrorMessage, {
+      message: (_errors$files$index2 = errors.files[index]) === null || _errors$files$index2 === void 0 ? void 0 : _errors$files$index2.message
+    })), /*#__PURE__*/React.createElement(Button, {
+      type: "tertiary",
+      size: "small",
+      iconProps: {
+        Component: IconDelete
+      },
+      onClick: function onClick() {
+        onRemove(file, index);
+      }
+    }))));
+  }));
+};
+
+export { UploadItems };

package/components/FileUpload/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FileUpload';
+export * from './types';

package/components/FileUpload/index.js

@@ -0,0 +1,42 @@
+export { FileUpload } from './FileUpload.js';
+export { FileUploadMode } from './types.js';
+import '../../toConsumableArray-e0031ed3.js';
+import '../../slicedToArray-0c706912.js';
+import 'react';
+import '../Button/Button.js';
+import '../../extends-e8ef956f.js';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import '../../objectWithoutProperties-fcd64cc7.js';
+import 'classnames';
+import 'dayjs';
+import '../../helperComponents/Loader/Loader.js';
+import '../Checkbox/Checkbox.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 '../../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 '../Button/consts.js';
+import '../../helperComponents/Label/Label.js';
+import './UploadItems.js';
+import '../../hooks/useFormProps.js';
+import '../../context/types.js';
+import '../../helperComponents/ErrorMessage/ErrorMessage.js';
+import '../SVGIcons/IconDelete.js';
+import '../SVGIcons/IconEditFilled.js';
+import '../SVGIcons/IconEdit.js';
+import '../SVGIcons/IconAttach.js';