@pedidopago/ui 1.7.1 → 1.7.3

package/dist/components/NewSelect/index.js

@@ -0,0 +1,248 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NewSelect = NewSelect;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Flex = _interopRequireDefault(require("../Flex"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _ReactPortal = require("../ReactPortal");
+var _OptionsSelect = require("./components/OptionsSelect");
+var _useOnClickOutside = require("../../shared/hooks/useOnClickOutside");
+var _useReposition = require("../../shared/hooks/useReposition");
+var _styles = require("./styles");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["label", "placeholder", "alert", "helperText", "variant", "children", "value", "onClose", "onOpen", "multiple", "renderOptions", "onChange"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+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; }
+function NewSelect(_ref) {
+  var _optionsModalRef$curr, _containerRef$current;
+  var _ref$label = _ref.label,
+    label = _ref$label === void 0 ? '' : _ref$label,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
+    alert = _ref.alert,
+    helperText = _ref.helperText,
+    variant = _ref.variant,
+    children = _ref.children,
+    value = _ref.value,
+    onClose = _ref.onClose,
+    onOpen = _ref.onOpen,
+    multiple = _ref.multiple,
+    renderOptions = _ref.renderOptions,
+    onChange = _ref.onChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var containerRef = (0, _react.useRef)(null);
+  var selectRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpenOptions = _useState2[0],
+    setIsOpenOptions = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    multipleSelectedOptions = _useState4[0],
+    setMultipleSelectedOptions = _useState4[1];
+  var multipleSelectValues = multipleSelectedOptions.map(function (option) {
+    return option.value;
+  });
+  var _useState5 = (0, _react.useState)(placeholder),
+    _useState6 = _slicedToArray(_useState5, 2),
+    labelSelectedOption = _useState6[0],
+    setLabelSelectedOption = _useState6[1];
+  var optionsModalRef = (0, _react.useRef)(null);
+  var buttonOptions = (_optionsModalRef$curr = optionsModalRef.current) === null || _optionsModalRef$curr === void 0 ? void 0 : _optionsModalRef$curr.querySelectorAll('.select-item');
+  (0, _react.useEffect)(function () {
+    if (Array.isArray(value) && value.length === 0) {
+      setMultipleSelectedOptions([]);
+      return;
+    }
+    if (value === undefined || value === '') {
+      setLabelSelectedOption('');
+      return;
+    }
+    var options = [];
+    _react.Children.forEach(children, function (child, index) {
+      var _buttonOptions$index;
+      options.push({
+        value: child.props.optionValue,
+        label: buttonOptions === null || buttonOptions === void 0 ? void 0 : (_buttonOptions$index = buttonOptions[index]) === null || _buttonOptions$index === void 0 ? void 0 : _buttonOptions$index.textContent
+      });
+    });
+    if (Array.isArray(value)) {
+      var findMultipleOptions = options.filter(function (option) {
+        return value.includes(option.value);
+      });
+      if (!findMultipleOptions[0]) return;
+      setMultipleSelectedOptions(findMultipleOptions);
+    } else {
+      var findOption = options.find(function (option) {
+        return option.value === value;
+      });
+      if (!findOption) return;
+      setLabelSelectedOption((findOption === null || findOption === void 0 ? void 0 : findOption.label) || '');
+    }
+  }, [value, buttonOptions === null || buttonOptions === void 0 ? void 0 : buttonOptions.length]);
+  function changeMultipleOption(event, valueOption) {
+    event.stopPropagation();
+    if (!multiple) return;
+    if (value.includes(valueOption)) {
+      removeOption(valueOption);
+    } else {
+      if (multiple) onChange === null || onChange === void 0 ? void 0 : onChange([].concat(_toConsumableArray(multipleSelectValues), [valueOption]));
+    }
+  }
+  (0, _react.useEffect)(function () {
+    function handler() {
+      setIsOpenOptions(false);
+    }
+    if (isOpenOptions) {
+      var _document;
+      onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+      (_document = document) === null || _document === void 0 ? void 0 : _document.addEventListener('scroll', handler);
+    } else {
+      var _document2;
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+      (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.removeEventListener('scroll', handler);
+    }
+    return function () {
+      var _document3;
+      return (_document3 = document) === null || _document3 === void 0 ? void 0 : _document3.removeEventListener('scroll', handler);
+    };
+  }, [isOpenOptions]);
+  (0, _useOnClickOutside.useOnClickOutside)([selectRef, optionsModalRef], function () {
+    if (isOpenOptions) {
+      setIsOpenOptions(false);
+    }
+  });
+  var positionsSelect = (0, _useReposition.useReposition)({
+    containerRef: optionsModalRef,
+    triggerRef: selectRef
+  }, [children]);
+  function removeOption(optionToRemove) {
+    if (!multiple) return;
+    var newSelectedOptions = value.filter(function (option) {
+      return option !== optionToRemove;
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange(newSelectedOptions);
+  }
+  var SelectedOptionsWithCustomComponent = function SelectedOptionsWithCustomComponent(_ref2) {
+    var option = _ref2.option;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: renderOptions === null || renderOptions === void 0 ? void 0 : renderOptions(option, function () {
+        return removeOption(option.value);
+      })
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: selectRef,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flex.default, {
+      direction: "column",
+      style: {
+        width: '100%'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SelectContainer, {
+        "data-disabled": rest.disabled,
+        "data-variant": variant,
+        "data-label-in-top": !!labelSelectedOption || !!(multipleSelectedOptions !== null && multipleSelectedOptions !== void 0 && multipleSelectedOptions[0]),
+        alert: alert,
+        tabIndex: rest.disabled ? -1 : 0,
+        onClick: function onClick() {
+          return setIsOpenOptions(!isOpenOptions);
+        },
+        className: rest.className,
+        style: rest.style,
+        ref: containerRef,
+        children: [label && variant !== 'unstyled' && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: label
+        }), multiple ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flex.default, {
+          spacing: "0.5rem",
+          wrap: "wrap",
+          "data-testId": "container-multiple-options",
+          children: multipleSelectedOptions.map(function (option, index) {
+            return typeof renderOptions === 'function' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectedOptionsWithCustomComponent, {
+              option: option
+            }, "custom-option-selected-".concat(index)) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SelectedOptionSpan, {
+              onClick: function onClick(event) {
+                event.stopPropagation();
+                removeOption(option.value);
+              },
+              hasSelectedOption: true,
+              children: [option.label, multipleSelectedOptions.length > 1 && index < multipleSelectedOptions.length - 1 && ',']
+            }, index);
+          })
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SelectedOptionSpan, {
+          "data-testId": "span-selected-option",
+          hasSelectedOption: !!labelSelectedOption,
+          children: labelSelectedOption
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          name: "chevron-down"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactPortal.ReactPortal, {
+        wrapperId: "portal-root",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsSelect.OptionsSelect, {
+          ref: optionsModalRef,
+          open: isOpenOptions,
+          maxWidth: "".concat((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().width, "px"),
+          left: positionsSelect.left,
+          top: positionsSelect.top,
+          handleDefaultValue: function handleDefaultValue(options) {
+            if (multiple) {
+              var defaultOptions = options === null || options === void 0 ? void 0 : options.filter(function (selectedOption) {
+                return value === null || value === void 0 ? void 0 : value.includes(String(selectedOption.value));
+              });
+              setMultipleSelectedOptions(defaultOptions || []);
+            } else {
+              var defaultOption = options.find(function (option) {
+                return String(option.value).includes(String(value));
+              });
+              setLabelSelectedOption(defaultOption === null || defaultOption === void 0 ? void 0 : defaultOption.label);
+            }
+          },
+          children: _react.Children.map(children, function (child) {
+            var isSelectedOption = multipleSelectedOptions.find(function (option) {
+              return option.value === child.props.optionValue;
+            });
+            var isSelectItemElement = Object.hasOwn(child.props, 'optionValue');
+            var className = (0, _classnames.default)(isSelectItemElement ? 'select-item' : '', {
+              selected: isSelectedOption
+            });
+            return /*#__PURE__*/(0, _react.cloneElement)(child, {
+              onClick: function onClick(event) {
+                var _child$props$onClick, _child$props;
+                if (event.currentTarget.classList.contains('select-item')) {
+                  if (multiple) {
+                    changeMultipleOption(event, child.props.optionValue);
+                  } else {
+                    setIsOpenOptions(false);
+                    onChange(child.props.optionValue);
+                  }
+                }
+
+                // Call onClick() inside of children
+                (_child$props$onClick = (_child$props = child.props).onClick) === null || _child$props$onClick === void 0 ? void 0 : _child$props$onClick.call(_child$props);
+              },
+              className: className
+            });
+          })
+        })
+      }), !!helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HelperText, {
+        alert: alert,
+        children: helperText
+      })]
+    })
+  });
+}
+NewSelect.displayName = 'NewSelect';

package/dist/components/NewSelect/newSelect.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=newSelect.test.d.ts.map

package/dist/components/NewSelect/newSelect.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"newSelect.test.d.ts","sourceRoot":"","sources":["../../../src/components/NewSelect/newSelect.test.tsx"],"names":[],"mappings":""}

package/dist/components/NewSelect/newSelect.test.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _ = require(".");
+var _SelectItem = require("./components/SelectItem");
+var _testUtils = require("../../shared/tests/test-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+var optionsSelect = [{
+  label: 'Opção 1',
+  value: 'option1'
+}, {
+  label: 'Opção 2',
+  value: 'option2'
+}];
+describe('Select', function () {
+  test('Change option', function () {
+    var handleClick = jest.fn();
+    var _render = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.NewSelect, {
+        value: "option1",
+        onChange: handleClick,
+        children: optionsSelect.map(function (option) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItem.SelectItem, {
+            optionValue: option.value,
+            children: option.label
+          }, option.value);
+        })
+      })),
+      getByRole = _render.getByRole,
+      getByTestId = _render.getByTestId;
+    var button = getByRole('button', {
+      name: /opção 1/i
+    });
+    _react.fireEvent.click(button);
+    var spanOfSelectedOption = getByTestId('span-selected-option');
+    var textOfSpan = spanOfSelectedOption.textContent;
+    expect(textOfSpan).toEqual('Opção 1');
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+  test('Default value', function () {
+    var handleClick = jest.fn();
+    var _render2 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.NewSelect, {
+        value: "option1",
+        onChange: handleClick,
+        children: optionsSelect.map(function (option) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItem.SelectItem, {
+            optionValue: option.value,
+            children: option.label
+          }, option.value);
+        })
+      })),
+      getByTestId = _render2.getByTestId;
+    var spanOfSelectedOption = getByTestId('span-selected-option');
+    var textOfSpan = spanOfSelectedOption.textContent;
+    expect(textOfSpan).toEqual('Opção 1');
+  });
+});
+describe('MultipleSelect', function () {
+  test('Change option ', function () {
+    var _containerOfMultipleO;
+    var handleClick = jest.fn();
+    var _render3 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.NewSelect, {
+        value: ['option1'],
+        multiple: true,
+        onChange: handleClick,
+        children: optionsSelect.map(function (option) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItem.SelectItem, {
+            optionValue: option.value,
+            children: option.label
+          }, option.value);
+        })
+      })),
+      getByTestId = _render3.getByTestId,
+      getByRole = _render3.getByRole;
+    var buttonFirstOption = getByRole('button', {
+      name: /opção 1/i
+    });
+    var buttonSecondOption = getByRole('button', {
+      name: /opção 2/i
+    });
+    _react.fireEvent.click(buttonSecondOption);
+    expect(handleClick).toBeCalled();
+    _react.fireEvent.click(buttonFirstOption);
+    expect(handleClick).toBeCalled();
+    var containerOfMultipleOptions = getByTestId('container-multiple-options');
+    var firstOptionText = (_containerOfMultipleO = containerOfMultipleOptions.children[0]) === null || _containerOfMultipleO === void 0 ? void 0 : _containerOfMultipleO.textContent;
+    expect(firstOptionText).toEqual('Opção 1');
+  });
+  test('default value', function () {
+    var handleClick = jest.fn();
+    var _render4 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.NewSelect, {
+        value: ['option1', 'option2'],
+        multiple: true,
+        onChange: handleClick,
+        children: optionsSelect.map(function (option) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItem.SelectItem, {
+            optionValue: option.value,
+            children: option.label
+          }, option.value);
+        })
+      })),
+      getByTestId = _render4.getByTestId;
+    var containerOfMultipleOptions = getByTestId('container-multiple-options');
+    var firstOptionText = containerOfMultipleOptions.children[0].textContent;
+    var secondOptionText = containerOfMultipleOptions.children[1].textContent;
+    expect(firstOptionText).toEqual('Opção 1,');
+    expect(secondOptionText).toEqual('Opção 2');
+  });
+});

package/dist/components/NewSelect/styles.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { InputProps } from '../Input/types';
+import { SelectContainerProps } from './types';
+export declare const SelectContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & SelectContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const OptionPlaceholder: import("@emotion/styled").StyledComponent<import("../List/types").ListProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const HelperText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & InputProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const SelectMultipleOption: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const SelectedOptionSpan: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    hasSelectedOption: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/NewSelect/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/NewSelect/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,eAAe;;;gIAiG1B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;UAE7B,CAAC;AAEF,eAAO,MAAM,UAAU;;;wHAMrB,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;qHAsBhC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;uBAAoC,OAAO;2GAKzE,CAAC"}

package/dist/components/NewSelect/styles.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectedOptionSpan = exports.SelectMultipleOption = exports.SelectContainer = exports.OptionPlaceholder = exports.HelperText = void 0;
+var _react = require("@emotion/react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _List = _interopRequireDefault(require("../List"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var SelectContainer = _styled.default.div(function (_ref) {
+  var theme = _ref.theme,
+    alert = _ref.alert;
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    outline: none;\n    user-select: none;\n    width: 100%;\n    min-height: 56px;\n    border-radius: ", ";\n    border: 2px solid ", ";\n    transition: all ease 0.2s;\n    outline: 0px solid transparent;\n    cursor: pointer;\n    background: ", ";\n    color: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 0.5rem;\n    padding: 0 20px;\n    position: relative;\n\n    &:hover {\n      color: ", ";\n      border-color: ", ";\n\n      label {\n        color: ", ";\n      }\n    }\n\n    &:focus {\n      color: ", ";\n      border-color: ", ";\n      outline: 2px solid ", ";\n\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n\n    &[data-label-in-top='true'] {\n      label {\n        left: 20px;\n        top: -1px;\n        font-size: 0.875rem;\n        background: ", " !important;\n      }\n    }\n\n    &[data-disabled='true'] {\n      background: ", ";\n      pointer-events: none;\n      cursor: none;\n      border-color: ", ";\n\n      label {\n        background: inherit;\n      }\n    }\n\n    &[data-variant='unstyled'] {\n      padding: 0;\n      border: none;\n      background: none;\n      height: auto;\n\n      &:hover,\n      &:focus {\n        outline: none;\n      }\n    }\n\n    input {\n      display: none;\n    }\n\n    svg {\n      transition: all ease 0.2s;\n    }\n\n    label {\n      position: absolute;\n      left: 20px;\n      top: 50%;\n      transform: translateY(-50%);\n      font-size: 1rem;\n      font-weight: 500;\n      color: ", ";\n      transition: all ease 0.2s;\n      padding: 0 4px;\n      z-index: 1;\n      white-space: nowrap;\n      max-width: 65%;\n      overflow: hidden;\n      cursor: pointer;\n      text-overflow: ellipsis;\n    }\n  "])), theme.borderRadius.default, alert ? theme.colors[alert].blurred : theme.colors.neutral.neutral2, alert ? "".concat(theme.colors[alert].blurred, "33") : theme.colors.neutral.white, theme.colors.neutral.neutral5, theme.colors.neutral.black, alert ? theme.colors[alert].default : theme.colors.primary.hover, theme.colors.neutral.neutral5, theme.colors.neutral.black, alert ? theme.colors[alert].default : theme.colors.primary.focus, alert ? theme.colors[alert].blurred : theme.colors.primary.disabled, theme.colors.neutral.white, theme.colors.neutral.neutral1, theme.colors.neutral.neutral2, theme.colors.neutral.neutral3);
+});
+exports.SelectContainer = SelectContainer;
+var OptionPlaceholder = (0, _styled.default)(_List.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.colors.neutral.neutral3;
+});
+exports.OptionPlaceholder = OptionPlaceholder;
+var HelperText = _styled.default.span(function (_ref3) {
+  var theme = _ref3.theme,
+    _ref3$alert = _ref3.alert,
+    alert = _ref3$alert === void 0 ? 'success' : _ref3$alert;
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: ", ";\n    color: ", ";\n    padding: 0 20px;\n  "])), theme.fontSizes.xxs, alert !== 'success' ? theme.colors[alert].default : theme.colors.neutral.neutral4);
+});
+exports.HelperText = HelperText;
+var SelectMultipleOption = _styled.default.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  min-width: 73px;\n  height: 29px;\n  padding: 4px 8px;\n  border-radius: 6px;\n  margin: 2px;\n\n  transition: all ease-in-out 0.2s;\n\n  background-color: ", ";\n\n  border: 0;\n  color: ", ";\n\n  &:not(&:disabled) {\n    cursor: pointer;\n  }\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.colors.neutral.neutral1;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    dark: theme.colors.neutral.white,
+    light: theme.colors.neutral.neutral6
+  }[theme.colorMode];
+});
+exports.SelectMultipleOption = SelectMultipleOption;
+var SelectedOptionSpan = _styled.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-weight: 500;\n  cursor: pointer;\n  color: ", ";\n"])), function (_ref6) {
+  var theme = _ref6.theme,
+    hasSelectedOption = _ref6.hasSelectedOption;
+  return hasSelectedOption ? theme.colors.neutral.black : theme.colors.neutral.neutral3;
+});
+exports.SelectedOptionSpan = SelectedOptionSpan;

package/dist/components/NewSelect/types.d.ts

@@ -0,0 +1,41 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+export type SelectAlertType = 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
+export interface SelectOption {
+    label: string;
+    value: string | boolean | number;
+}
+export type SizeSelect = 'sm' | 'md';
+export type SelectValue = string | boolean | number;
+interface SelectPropsBase extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
+    label?: string;
+    variant?: 'unstyled' | 'default';
+    helperText?: string;
+    alert?: SelectAlertType;
+    placeholder?: string;
+    children?: ReactNode | ReactNode[];
+    onOpen?: () => void;
+    onClose?: () => void;
+    multiple?: boolean;
+    renderOptions?: (option: SelectOption, remove: (removeOption: SelectOption) => void) => ReactNode | ReactNode[];
+}
+interface SelectPropsSingleSelect extends SelectPropsBase {
+    multiple?: false;
+    onChange: (value: string | number | boolean) => void;
+    value: SelectValue;
+}
+interface SelectPropsMultipleSelect extends SelectPropsBase {
+    multiple: true;
+    value: SelectValue[];
+    onChange: (value: (string | number | boolean)[]) => void;
+}
+export type SelectProps = SelectPropsSingleSelect | SelectPropsMultipleSelect;
+export interface SelectContainerProps {
+    alert?: SelectAlertType;
+    size?: SizeSelect;
+}
+export type ChangeOption = {
+    event: React.MouseEvent;
+    value: string | boolean | number;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/NewSelect/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/NewSelect/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;AAExB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;CAClC;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpD,UAAU,eACR,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,CACd,MAAM,EAAE,YAAY,EACpB,MAAM,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,KACzC,SAAS,GAAG,SAAS,EAAE,CAAC;CAC9B;AAGD,UAAU,uBAAwB,SAAQ,eAAe;IACvD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;IACrD,KAAK,EAAE,WAAW,CAAC;CACpB;AAED,UAAU,yBAA0B,SAAQ,eAAe;IACzD,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,EAAE,KAAK,IAAI,CAAC;CAC1D;AAGD,MAAM,MAAM,WAAW,GAAG,uBAAuB,GAAG,yBAAyB,CAAC;AAE9E,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC;IACxB,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;CAClC,CAAC"}

package/dist/components/NewSelect/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/Observer/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { ObserverProps } from './types';
-export declare function Observer({ onObserved, observerOptions, children, ...props }: ObserverProps): JSX.Element;
-export declare namespace Observer {
-    var displayName: string;
-}
+/// <reference types="react" />
+import { ObserverProps } from './types';
+export declare function Observer({ onObserved, observerOptions, children, ...props }: ObserverProps): JSX.Element;
+export declare namespace Observer {
+    var displayName: string;
+}
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Observer/observer.test.d.ts

@@ -1,2 +1,2 @@
-export {};
+export {};
 //# sourceMappingURL=observer.test.d.ts.map

package/dist/components/Observer/types.d.ts

@@ -1,7 +1,7 @@
-import { HTMLAttributes, ReactNode } from 'react';
-export type ObserverProps = HTMLAttributes<HTMLDivElement> & {
-    onObserved: () => void;
-    children: ReactNode;
-    observerOptions?: IntersectionObserverInit | undefined;
-};
+import { HTMLAttributes, ReactNode } from 'react';
+export type ObserverProps = HTMLAttributes<HTMLDivElement> & {
+    onObserved: () => void;
+    children: ReactNode;
+    observerOptions?: IntersectionObserverInit | undefined;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Pagination/hooks/usePagination.d.ts

@@ -1,4 +1,4 @@
-import { IPaginationHook } from '../types';
-export declare const DOTS = "...";
-export declare const usePagination: ({ count, activePage }: IPaginationHook) => (string | number)[] | undefined;
+import { IPaginationHook } from '../types';
+export declare const DOTS = "...";
+export declare const usePagination: ({ count, activePage }: IPaginationHook) => (string | number)[] | undefined;
 //# sourceMappingURL=usePagination.d.ts.map

package/dist/components/Pagination/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { IPaginationProps } from './types';
-export declare function Pagination({ count, onChange, previousButtonIcon, nextButtonIcon, isDisabled, defaultPage, size, shape, variant, color, }: IPaginationProps): JSX.Element | null;
+/// <reference types="react" />
+import { IPaginationProps } from './types';
+export declare function Pagination({ count, onChange, previousButtonIcon, nextButtonIcon, isDisabled, defaultPage, size, shape, variant, color, }: IPaginationProps): JSX.Element | null;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Pagination/pagination.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';
 //# sourceMappingURL=pagination.test.d.ts.map

package/dist/components/Pagination/styles.d.ts

@@ -1,35 +1,35 @@
-/// <reference types="react" />
-import { IStyledPagination } from './types';
-export declare const PaginationList: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
-export declare const PaginationItem: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
-export declare const PaginationButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const PreviousNavigationButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const NextNavigationButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const SmallPageInfo: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const PageWrap: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
-export declare const LargeViewWrap: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { IStyledPagination } from './types';
+export declare const PaginationList: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const PaginationItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const PaginationButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const PreviousNavigationButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const NextNavigationButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const SmallPageInfo: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const PageWrap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const LargeViewWrap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map