@invoicebox/ui 0.1.0-alpha.9 → 0.1.0-alpha.91

package/dist/components/form/CountrySelect/components/CountryItem/index.stories.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require(".");
+var _palette = require("../../../../../palette");
+var _addonActions = require("@storybook/addon-actions");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var meta = {
+  title: 'form/CountrySelect/_components/CountryItem',
+  component: _.CountryItem,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Component = function Component(props) {
+  var palette = (0, _palette.useComponentPalette)('countrySelect');
+  return /*#__PURE__*/_react["default"].createElement(_.CountryItem, _extends({}, props, {
+    palette: palette
+  }));
+};
+var Default = exports.Default = {
+  args: {
+    isSelected: false,
+    description: 'ИНН',
+    value: 'RUS',
+    countryLabel: 'Russia',
+    flag: 'RUS',
+    selectedLabel: '(Выбрано)',
+    onSelect: (0, _addonActions.action)('onSelect')
+  },
+  render: Component
+};

package/dist/components/form/CountrySelect/components/CountryItem/stlyes.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TCountrySelectPalette } from '../../palette';
+export declare const Title: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isSelected: boolean;
+    $palette: TCountrySelectPalette;
+}>>;
+export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $palette: TCountrySelectPalette;
+}>>;

package/dist/components/form/CountrySelect/components/CountryItem/stlyes.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.Title = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Title = exports.Title = _styledComponents["default"].div.withConfig({
+  displayName: "stlyes__Title",
+  componentId: "sc-cou0vg-0"
+})(["display:flex;align-items:center;gap:10px;color:", ";opacity:", ";"], function (_ref) {
+  var $palette = _ref.$palette;
+  return $palette.title;
+}, function (_ref2) {
+  var $isSelected = _ref2.$isSelected;
+  return $isSelected ? 0.5 : 1;
+});
+var Wrapper = exports.Wrapper = _styledComponents["default"].button.withConfig({
+  displayName: "stlyes__Wrapper",
+  componentId: "sc-cou0vg-1"
+})(["padding:15px 20px;display:flex;align-items:center;justify-content:space-between;width:100%;border:none;cursor:pointer;background-color:", ";color:", ";&:hover{background-color:", ";", "{opacity:0.5;}}"], function (_ref3) {
+  var $palette = _ref3.$palette;
+  return $palette.countryBg;
+}, function (_ref4) {
+  var $palette = _ref4.$palette;
+  return $palette.countryDescription;
+}, function (_ref5) {
+  var $palette = _ref5.$palette;
+  return $palette.countryHoverBg;
+}, Title);

package/dist/components/form/CountrySelect/index.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { TProps as TCountryItemProps } from './components/CountryItem';
+import { TProps as TSearchInputProps } from '../SearchInput';
+import { TFlagKey } from '../../common/Flag';
+import { TDropdownProps } from '../../../index';
+type TOption = {
+    value: string;
+    label: string;
+    description: string;
+    flag?: TFlagKey;
+};
+type TFieldProps = {
+    value: TOption['value'];
+    onChange: (value: TOption['value']) => void;
+};
+type TControlProps<T> = Pick<TSearchInputProps, 'placeholder'> & Pick<TCountryItemProps<T>, 'selectedLabel'> & {
+    options: TOption[];
+    disabled?: boolean;
+} & Pick<TDropdownProps, 'positionVertical' | 'positionLeft' | 'positionRight' | 'minWidth'>;
+export type TProps = TFieldProps & TControlProps<string>;
+export declare const CountrySelect: FC<TProps>;
+export {};

package/dist/components/form/CountrySelect/index.js

@@ -0,0 +1,122 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CountrySelect = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var S = _interopRequireWildcard(require("./stlyes"));
+var _CountryItem = require("./components/CountryItem");
+var _SearchInput = require("../SearchInput");
+var _logic = require("./logic");
+var _useOutsideClick = require("../../../hooks/useOutsideClick");
+var _Flag = require("../../common/Flag");
+var _Arrow = require("../../common/Arrow");
+var _Dropdown = require("../../common/Dropdown");
+var _Scrollbar = require("../../common/Scrollbar");
+var _palette = require("../../../palette");
+var _excluded = ["value", "onChange", "options", "placeholder", "disabled", "selectedLabel"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var CountrySelect = exports.CountrySelect = function CountrySelect(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    options = _ref.options,
+    placeholder = _ref.placeholder,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    selectedLabel = _ref.selectedLabel,
+    dropdownPositionProps = _objectWithoutProperties(_ref, _excluded);
+  var palette = (0, _palette.useComponentPalette)('countrySelect');
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    search = _useState4[0],
+    setSearch = _useState4[1];
+  var selectedOption = (0, _react.useMemo)(function () {
+    return options.find(function (option) {
+      return option.value === value;
+    });
+  }, [options, value]);
+  var handleClear = (0, _react.useCallback)(function () {
+    setSearch('');
+  }, []);
+  var handleDropdownClose = (0, _react.useCallback)(function () {
+    setIsOpen(false);
+  }, []);
+  var handleDropdownTrigger = (0, _react.useCallback)(function () {
+    setIsOpen(function (flag) {
+      return !flag;
+    });
+  }, []);
+  var wrapperRef = (0, _useOutsideClick.useOutsideClick)(handleDropdownClose);
+  var sortedOptions = (0, _react.useMemo)(function () {
+    return [selectedOption].concat(_toConsumableArray(options.filter(function (option) {
+      return option !== selectedOption;
+    })));
+  }, [selectedOption, options]);
+  var filtredOptions = (0, _react.useMemo)(function () {
+    return sortedOptions.filter(function (option) {
+      return _logic.logic.isSearchMatchOption(search, option.label);
+    });
+  }, [search, sortedOptions]);
+  var handleSelect = function handleSelect(newValue) {
+    onChange(newValue);
+    handleDropdownClose();
+  };
+  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
+    ref: wrapperRef
+  }, /*#__PURE__*/_react["default"].createElement(S.HeaderWrapper, {
+    type: "button",
+    onClick: handleDropdownTrigger,
+    disabled: disabled
+  }, selectedOption.flag && /*#__PURE__*/_react["default"].createElement(_Flag.Flag, {
+    isSmall: false,
+    flag: selectedOption.flag
+  }), /*#__PURE__*/_react["default"].createElement(_Arrow.Arrow, {
+    isOpen: isOpen
+  })), /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, _extends({
+    isOpen: isOpen,
+    onCloseTransitionEnd: handleClear,
+    zIndex: 6,
+    isAutoPosition: true
+  }, dropdownPositionProps), /*#__PURE__*/_react["default"].createElement(S.ListWrapper, null, /*#__PURE__*/_react["default"].createElement(S.CountrySearchWrapper, {
+    $palette: palette
+  }, /*#__PURE__*/_react["default"].createElement(_SearchInput.SearchInput, {
+    onChange: setSearch,
+    placeholder: placeholder,
+    hasBorder: false,
+    value: search
+  })), /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
+    maxHeight: 192
+  }, filtredOptions.map(function (option) {
+    return /*#__PURE__*/_react["default"].createElement(_CountryItem.CountryItem, {
+      key: option.value,
+      palette: palette,
+      countryLabel: option.label,
+      onSelect: handleSelect,
+      selectedLabel: selectedLabel,
+      value: option.value,
+      isSelected: option === selectedOption,
+      description: option.description,
+      flag: option.flag
+    });
+  })))));
+};

package/dist/components/form/CountrySelect/index.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CountrySelect, TProps } from '.';
+declare const meta: Meta<typeof CountrySelect>;
+export default meta;
+export declare const Default: StoryObj<TProps>;

package/dist/components/form/CountrySelect/index.stories.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require(".");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var meta = {
+  title: 'form/CountrySelect',
+  component: _.CountrySelect,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Component = function Component(props) {
+  var _React$useState = _react["default"].useState('RUS'),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    value = _React$useState2[0],
+    setValue = _React$useState2[1];
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      height: 300
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_.CountrySelect, _extends({}, props, {
+    value: value,
+    onChange: setValue
+  })));
+};
+var Default = exports.Default = {
+  args: {
+    options: [{
+      label: 'Россия',
+      value: 'RUS',
+      description: 'ИНН',
+      flag: 'RUS'
+    }, {
+      label: 'Казахстан',
+      value: 'KAZ',
+      description: 'ИИН',
+      flag: 'KAZ'
+    }, {
+      label: 'Afghanistan',
+      value: 'AF',
+      description: 'NO'
+    }],
+    placeholder: 'Поиск'
+  },
+  render: Component
+};

package/dist/components/form/CountrySelect/logic.d.ts

@@ -0,0 +1,5 @@
+declare class Logic {
+    isSearchMatchOption(search: string, optionLabel: string): boolean;
+}
+export declare const logic: Logic;
+export {};

package/dist/components/form/CountrySelect/logic.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.logic = void 0;
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var Logic = /*#__PURE__*/function () {
+  function Logic() {
+    _classCallCheck(this, Logic);
+  }
+  _createClass(Logic, [{
+    key: "isSearchMatchOption",
+    value: function isSearchMatchOption(search, optionLabel) {
+      return optionLabel.toLowerCase().includes(search.trim().toLowerCase());
+    }
+  }]);
+  return Logic;
+}();
+var logic = exports.logic = new Logic();

package/dist/components/form/CountrySelect/palette.d.ts

@@ -0,0 +1,9 @@
+import { TAbstractPalette } from '../../../palette';
+export type TCountrySelectPalette = {
+    title: string;
+    border: string;
+    countryBg: string;
+    countryHoverBg: string;
+    countryDescription: string;
+};
+export declare const generateCountrySelectPalette: (abstractPalette: TAbstractPalette) => TCountrySelectPalette;

package/dist/components/form/CountrySelect/palette.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateCountrySelectPalette = void 0;
+var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var generateCountrySelectPalette = exports.generateCountrySelectPalette = function generateCountrySelectPalette(abstractPalette) {
+  return {
+    title: abstractPalette.primary,
+    border: (0, _hexToRgba["default"])(abstractPalette.primary, 0.2),
+    countryBg: abstractPalette.base,
+    countryHoverBg: (0, _hexToRgba["default"])(abstractPalette.neutralUsual, 0.5),
+    countryDescription: (0, _hexToRgba["default"])(abstractPalette.primary, 0.3)
+  };
+};

package/dist/components/form/CountrySelect/stlyes.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TCountrySelectPalette } from './palette';
+export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const HeaderWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;
+export declare const ListWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const CountrySearchWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $palette: TCountrySelectPalette;
+}>>;

package/dist/components/form/CountrySelect/stlyes.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.ListWrapper = exports.HeaderWrapper = exports.CountrySearchWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
+  displayName: "stlyes__Wrapper",
+  componentId: "sc-1mni8xu-0"
+})(["position:relative;"]);
+var HeaderWrapper = exports.HeaderWrapper = _styledComponents["default"].button.withConfig({
+  displayName: "stlyes__HeaderWrapper",
+  componentId: "sc-1mni8xu-1"
+})(["display:flex;align-items:center;gap:2px;pointer-events:auto;background:transparent;border:none;cursor:pointer;"]);
+var ListWrapper = exports.ListWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "stlyes__ListWrapper",
+  componentId: "sc-1mni8xu-2"
+})(["display:flex;align-items:center;flex-direction:column;pointer-events:auto;"]);
+var CountrySearchWrapper = exports.CountrySearchWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "stlyes__CountrySearchWrapper",
+  componentId: "sc-1mni8xu-3"
+})(["border-bottom:1px solid ", ";width:100%;"], function (_ref) {
+  var $palette = _ref.$palette;
+  return $palette.border;
+});

package/dist/components/form/DateInput/components/Icon/index.d.ts

@@ -0,0 +1 @@
+export declare const Icon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/DateInput/components/Icon/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Icon = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var Icon = exports.Icon = function Icon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeOpacity: 0.5,
+    strokeWidth: 1.5,
+    d: "M15.703 16.33h.008M12.004 16.33h.008M8.297 16.33h.008M15.703 13.092h.008M12.004 13.092h.008M8.297 13.092h.008M4.578 9.837h14.853M15.371 3.667v2.742M8.637 3.667v2.742"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeOpacity: 0.5,
+    strokeWidth: 1.5,
+    d: "M15.532 4.982H8.476c-2.447 0-3.976 1.364-3.976 3.87v7.541c0 2.545 1.529 3.94 3.976 3.94h7.048c2.455 0 3.976-1.371 3.976-3.877V8.852c.008-2.506-1.513-3.87-3.968-3.87Z",
+    clipRule: "evenodd"
+  }));
+};

package/dist/components/form/DateInput/components/Icon/index.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Icon } from '.';
+declare const meta: Meta<typeof Icon>;
+export default meta;
+export declare const Default: StoryObj<typeof Icon>;

package/dist/components/form/DateInput/components/Icon/index.stories.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _ = require(".");
+var meta = {
+  title: 'form/DateInput/_components/Icon',
+  component: _.Icon,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {};

package/dist/components/form/DateInput/docs.stories.d.ts

@@ -0,0 +1,6 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+};
+export default meta;
+export declare const Installation: StoryObj;

package/dist/components/form/DateInput/docs.stories.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Installation = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _markdownToJsx = _interopRequireDefault(require("markdown-to-jsx"));
+var _Typography = require("../../common/Typography");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var meta = {
+  title: 'form/DateInput'
+};
+var _default = exports["default"] = meta;
+var Installation = exports.Installation = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+      variant: "bodyL"
+    }, /*#__PURE__*/_react["default"].createElement(_markdownToJsx["default"], null, "\n### \u0423\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0430\n\nDateInput \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 Calendar.\nCalendar \u0434\u043E\u043B\u0436\u0435\u043D \u0431\u044B\u0442\u044C \u0443\u0441\u0442\u0430\u043D\u043E\u0432\u043B\u0435\u043D. \n[\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u0435\u0435.](/?path=/story/common-calendar--installation)\n"));
+  }
+};

package/dist/components/form/DateInput/index.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { TProps as TInputLabelProps } from '../InputLabel';
+import { TProps as TPureInputProps } from '../PureInput';
+import { TProps as TCalendarProps } from '../../common/Calendar';
+export type TProps = {
+    value: Date | null;
+    onChange: (value: Date) => void;
+} & Pick<TPureInputProps, 'hasError' | 'name' | 'onBlur' | 'onFocus'> & Pick<TInputLabelProps, 'label'> & Pick<TCalendarProps, 'maxDate' | 'minDate'>;
+export declare const DateInput: FC<TProps>;

package/dist/components/form/DateInput/index.js

@@ -0,0 +1,111 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateInput = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var S = _interopRequireWildcard(require("./styles"));
+var _logic = require("./logic");
+var _useOutsideClick = require("../../../hooks/useOutsideClick");
+var _useInputFocus2 = require("../../../hooks/useInputFocus");
+var _InputLabel = require("../InputLabel");
+var _PureInput = require("../PureInput");
+var _Dropdown = require("../../common/Dropdown");
+var _Calendar = require("../../common/Calendar");
+var _Icon = require("./components/Icon");
+var _palette = require("../../../palette");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var DateInput = exports.DateInput = function DateInput(_ref) {
+  var onChange = _ref.onChange,
+    value = _ref.value,
+    hasError = _ref.hasError,
+    name = _ref.name,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    label = _ref.label,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate;
+  var palette = (0, _palette.useComponentPalette)('dateInput');
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setOpenFlag = _useState2[1];
+  var handleTrigger = (0, _react.useCallback)(function () {
+    return setOpenFlag(function (flag) {
+      return !flag;
+    });
+  }, []);
+  var handleClose = (0, _react.useCallback)(function () {
+    return setOpenFlag(false);
+  }, []);
+  var elRef = (0, _useOutsideClick.useOutsideClick)(handleClose);
+  var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
+      onFocus: onFocus,
+      onBlur: onBlur
+    }),
+    inFocus = _useInputFocus.inFocus,
+    focusHandler = _useInputFocus.handleFocus,
+    blurHandler = _useInputFocus.handleBlur;
+  var handleFocus = (0, _react.useCallback)(function (event) {
+    handleClose();
+    focusHandler(event);
+  }, [focusHandler, handleClose]);
+  var _useState3 = (0, _react.useState)(_logic.logic.valueToString(value)),
+    _useState4 = _slicedToArray(_useState3, 2),
+    stringValue = _useState4[0],
+    setStringValue = _useState4[1];
+  var handleStringValueChange = (0, _react.useCallback)(function (event) {
+    setStringValue(event.target.value);
+  }, []);
+  var handleBlur = (0, _react.useCallback)(function (event) {
+    blurHandler(event);
+    var newValue = _logic.logic.stringToDate(stringValue);
+    if (!_logic.logic.isValid(newValue) || !_logic.logic.isBetweenMinAndMax(newValue, minDate, maxDate)) {
+      setStringValue(_logic.logic.valueToString(value));
+      return;
+    }
+    setStringValue(_logic.logic.valueToString(newValue));
+    onChange(newValue);
+  }, [blurHandler, value, stringValue, onChange, maxDate, minDate]);
+  var handleCalendarChange = (0, _react.useCallback)(function (newValue) {
+    handleClose();
+    setStringValue(_logic.logic.valueToString(newValue));
+    onChange(newValue);
+  }, [onChange, handleClose]);
+  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
+    ref: elRef
+  }, /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
+    inFocus: inFocus,
+    label: label
+  }, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, {
+    hasError: hasError,
+    inFocus: inFocus,
+    name: name,
+    placeholder: _logic.logic.getPlaceholder(),
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    value: stringValue,
+    onChange: handleStringValueChange,
+    paddingRight: 44
+  }), /*#__PURE__*/_react["default"].createElement(S.Icon, {
+    onClick: handleTrigger,
+    $palette: palette
+  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, null)))), /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
+    isOpen: isOpen,
+    isAutoPosition: true
+  }, /*#__PURE__*/_react["default"].createElement(S.Calendar, null, /*#__PURE__*/_react["default"].createElement(_Calendar.Calendar, {
+    value: value,
+    onChange: handleCalendarChange,
+    minDate: minDate,
+    maxDate: maxDate
+  }))));
+};

package/dist/components/form/DateInput/index.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DateInput } from '.';
+import 'react-calendar/dist/Calendar.css';
+import '../../common/Calendar/index.css';
+declare const meta: Meta<typeof DateInput>;
+export default meta;
+export declare const Default: StoryObj<typeof DateInput>;