@invoicebox/ui 0.1.0-alpha.55 → 0.1.0-alpha.57

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

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _ = require(".");
+var _palette = require("../../../../../palette");
+var _addonActions = require("@storybook/addon-actions");
+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.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,123 @@
+"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, {
+    height: 16,
+    width: 22,
+    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/SearchInput/components/CrossIcon/index.d.ts

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

package/dist/components/form/SearchInput/components/CrossIcon/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CrossIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var CrossIcon = exports.CrossIcon = function CrossIcon() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M16 8L8 16M16 16L8 8",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};

package/dist/components/form/SearchInput/components/CrossIcon/index.stories.d.ts

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

package/dist/components/form/SearchInput/components/CrossIcon/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/SearchInput/_components/CrossIcon',
+  component: _.CrossIcon,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {};

package/dist/components/form/SearchInput/components/SearchIcon/index.d.ts

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

package/dist/components/form/SearchInput/components/SearchIcon/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var SearchIcon = exports.SearchIcon = function SearchIcon() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M16.4713 16.1602L18.8146 18.5095M11.9924 17.9847C15.3019 17.9847 17.9847 15.3019 17.9847 11.9924C17.9847 8.68288 15.3019 6 11.9924 6C8.68288 6 6 8.68288 6 11.9924C6 15.3019 8.68288 17.9847 11.9924 17.9847Z",
+    stroke: "currentColor",
+    strokeOpacity: "1",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};

package/dist/components/form/SearchInput/components/SearchIcon/index.stories.d.ts

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

package/dist/components/form/SearchInput/components/SearchIcon/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/SearchInput/_components/SearchIcon',
+  component: _.SearchIcon,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {};

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { TProps as PureInputProps } from '../PureInput';
+export type TProps = Pick<PureInputProps, 'placeholder' | 'hasBorder'> & {
+    value: string;
+    onChange: (value: string) => void;
+};
+export declare const SearchInput: FC<TProps>;

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

@@ -0,0 +1,50 @@
+"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.SearchInput = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var S = _interopRequireWildcard(require("./styles"));
+var _InputLabel = require("../InputLabel");
+var _PureInput = require("../PureInput");
+var _useInputFocus2 = require("../../../hooks/useInputFocus");
+var _SearchIcon = require("./components/SearchIcon");
+var _CrossIcon = require("./components/CrossIcon");
+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; }
+var SearchInput = exports.SearchInput = function SearchInput(_ref) {
+  var onChange = _ref.onChange,
+    placeholder = _ref.placeholder,
+    hasBorder = _ref.hasBorder,
+    value = _ref.value;
+  var _useInputFocus = (0, _useInputFocus2.useInputFocus)(),
+    inFocus = _useInputFocus.inFocus,
+    handleFocus = _useInputFocus.handleFocus,
+    handleBlur = _useInputFocus.handleBlur;
+  var palette = (0, _palette.useComponentPalette)('searchInput');
+  var handleInputReset = (0, _react.useCallback)(function () {
+    onChange('');
+  }, [onChange]);
+  var handleInputChange = (0, _react.useCallback)(function (event) {
+    onChange(event.target.value);
+  }, [onChange]);
+  return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, null, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, {
+    paddingRight: 56,
+    hasBorder: hasBorder,
+    onChange: handleInputChange,
+    placeholder: placeholder,
+    value: value,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    inFocus: inFocus
+  }), /*#__PURE__*/_react["default"].createElement(S.IconWrapper, {
+    $inFocus: inFocus,
+    $palette: palette
+  }, value ? /*#__PURE__*/_react["default"].createElement(S.ResetButton, {
+    type: "button",
+    onClick: handleInputReset
+  }, /*#__PURE__*/_react["default"].createElement(_CrossIcon.CrossIcon, null)) : /*#__PURE__*/_react["default"].createElement(_SearchIcon.SearchIcon, null)));
+};

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

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

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _index = require("./index");
+var _react = require("react");
+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/SearchInput',
+  component: _index.SearchInput,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Component = function Component(props) {
+  var _useState = (0, _react.useState)(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return /*#__PURE__*/React.createElement(_index.SearchInput, _extends({}, props, {
+    value: value,
+    onChange: setValue
+  }));
+};
+var Default = exports.Default = {
+  args: {
+    hasBorder: true,
+    placeholder: 'Поиск'
+  },
+  render: Component
+};

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

@@ -0,0 +1,5 @@
+import { TAbstractPalette } from '../../../palette';
+export type TSearchInputPalette = {
+    icon: string;
+};
+export declare const generateSearchInputPalette: (abstractPalette: TAbstractPalette) => TSearchInputPalette;

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateSearchInputPalette = void 0;
+var generateSearchInputPalette = exports.generateSearchInputPalette = function generateSearchInputPalette(abstractPalette) {
+  return {
+    icon: abstractPalette.primary
+  };
+};

package/dist/components/form/SearchInput/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { TSearchInputPalette } from './palette';
+export declare const ResetButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;
+export declare const IconWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $inFocus: boolean;
+    $palette: TSearchInputPalette;
+}>>;