@pedidopago/ui 1.5.1 → 1.5.3

package/dist/components/Select/index.js

@@ -7,6 +7,10 @@ exports.default = void 0;
 
 var _react = require("react");
 
+var _useOnClickOutside = require("src/shared/hooks/useOnClickOutside");
+
+var _Flex = _interopRequireDefault(require("../Flex"));
+
 var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _ReactPortal = require("../ReactPortal");
@@ -62,6 +66,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       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),
@@ -82,14 +87,17 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return inputRef.current;
   });
-
-  function selectOption(option) {
+  var isBooleanOptions = options.find(function (option) {
+    return typeof option.value === 'boolean';
+  });
+  var valueProperty = isBooleanOptions ? 'checked' : 'value';
+  var selectOption = (0, _react.useCallback)(function (option) {
     if (inputRef.current) {
       var _nativeInputValueSett;
 
-      var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
+      var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, valueProperty);
       nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : (_nativeInputValueSett = nativeInputValueSetter.set) === null || _nativeInputValueSett === void 0 ? void 0 : _nativeInputValueSett.call(inputRef.current, option === undefined ? '' : options[option].value);
-      var event = new Event('input', {
+      var event = new Event(isBooleanOptions ? 'click' : 'input', {
         bubbles: true
       });
       inputRef.current.dispatchEvent(event);
@@ -98,13 +106,12 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     setOptionsMenuOpen(false);
     setSelectedOption(option);
     setFilled(option !== undefined);
-  } // Sets default value
-
+  }, [isBooleanOptions, options]); // Sets default value
 
   (0, _react.useEffect)(function () {
     if (rest.defaultValue) {
-      var defaultOptionIndex = options.findIndex(function (c) {
-        return c.value === rest.defaultValue;
+      var defaultOptionIndex = options === null || options === void 0 ? void 0 : options.findIndex(function (c) {
+        return String(c.value) === String(rest.defaultValue);
       });
       if (defaultOptionIndex >= 0) selectOption(defaultOptionIndex);
     }
@@ -112,25 +119,28 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     return function () {
       selectOption(undefined);
     };
-  }, []); // Assures the option is selected throughout renders.
-
-  (0, _react.useEffect)(function () {
+  }, []);
+  var updateOption = (0, _react.useCallback)(function () {
     var _inputRef$current;
 
-    if (selectedOption === undefined || ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) !== options[selectedOption].value) {
+    if (selectedOption === undefined || ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current[valueProperty]) !== options[selectedOption].value) {
       var _inputRef$current2;
 
-      if (((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.value) === '' && selectedOption !== undefined) {
+      if (!isBooleanOptions && ((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.value) === '' && selectedOption !== undefined) {
         selectOption();
       } else {
-        var optionIndex = options.findIndex(function (c) {
+        var optionIndex = options === null || options === void 0 ? void 0 : options.findIndex(function (c) {
           var _inputRef$current3;
 
-          return c.value === ((_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value);
+          return c.value === ((_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3[valueProperty]);
         });
         if (optionIndex >= 0) selectOption(optionIndex);
       }
     }
+  }, [isBooleanOptions, options, selectOption, selectedOption]); // Assures the option is selected throughout renders.
+
+  (0, _react.useEffect)(function () {
+    updateOption();
   });
 
   var _useState7 = (0, _react.useState)((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().top),
@@ -166,108 +176,107 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       return modalParent === null || modalParent === void 0 ? void 0 : modalParent.removeEventListener('scroll', handler);
     };
   }, [optionsMenuOpen]);
-  (0, _react.useEffect)(function () {
-    document.addEventListener('click', function () {
-      return setOptionsMenuOpen(false);
-    });
-    return function () {
-      return document.removeEventListener('click', function () {
-        return setOptionsMenuOpen(false);
-      });
-    };
-  }, []);
-  var toggleOptionsAreaView = (0, _react.useCallback)(function (event) {
-    event.stopPropagation();
-    handleRepositionModal();
-    if (!rest.disabled) setOptionsMenuOpen(!optionsMenuOpen);
-  }, [optionsMenuOpen, rest.disabled]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SelectContainer, {
-      size: sizeSelect || 'md',
-      filled: filled || !!placeholder,
-      alert: alert,
-      disabled: !!rest.disabled,
-      width: width,
-      tabIndex: rest.disabled ? -1 : 0,
-      onMouseOver: handleRepositionModal,
-      onClick: toggleOptionsAreaView,
-      className: rest.className,
-      style: rest.style,
-      variant: variant,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        ref: containerRef,
-        children: [label && variant !== 'unstyled' && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-          children: label
-        }), selectedOption === undefined ?
-        /*#__PURE__*/
-        // Value label
-        (0, _jsxRuntime.jsx)(_Typography.default, {
-          fontSize: "xs",
-          fontWeight: "500",
-          color: "neutral.neutral3",
-          children: placeholder || ''
-        }) :
-        /*#__PURE__*/
-        // Placeholder label
-        (0, _jsxRuntime.jsx)(_Typography.default, {
-          fontSize: "xs",
-          fontWeight: "500",
-          color: "inherit",
-          children: options[selectedOption].label
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-          name: "chevron-down"
-        }), variant !== 'unstyled' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
-            children: !!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                fontSize: "xxs",
-                variant: "span",
-                children: label
+  (0, _useOnClickOutside.useOnClickOutside)([selectRef, optionsModalRef], function () {
+    setOptionsMenuOpen(false);
+  });
+  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, {
+        size: sizeSelect || 'md',
+        filled: filled || !!placeholder,
+        alert: alert,
+        disabled: !!rest.disabled,
+        width: width,
+        tabIndex: rest.disabled ? -1 : 0,
+        onMouseOver: handleRepositionModal,
+        onClick: function onClick() {
+          if (!rest.disabled) setOptionsMenuOpen(!optionsMenuOpen);
+          handleRepositionModal();
+        },
+        className: rest.className,
+        style: rest.style,
+        variant: variant,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          ref: containerRef,
+          children: [label && variant !== 'unstyled' && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+            children: label
+          }), selectedOption === undefined ?
+          /*#__PURE__*/
+          // Value label
+          (0, _jsxRuntime.jsx)(_Typography.default, {
+            fontSize: "xs",
+            fontWeight: "500",
+            color: "neutral.neutral3",
+            children: placeholder || ''
+          }) :
+          /*#__PURE__*/
+          // Placeholder label
+          (0, _jsxRuntime.jsx)(_Typography.default, {
+            fontSize: "xs",
+            fontWeight: "500",
+            color: "inherit",
+            children: options[selectedOption].label
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            name: "chevron-down"
+          }), variant !== 'unstyled' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
+              children: !!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                  fontSize: "xxs",
+                  variant: "span",
+                  children: label
+                })
               })
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
-            children: !!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                fontSize: "xxs",
-                variant: "span",
-                children: label
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
+              children: !!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                  fontSize: "xxs",
+                  variant: "span",
+                  children: label
+                })
               })
-            })
+            })]
           })]
-        })]
-      }), !!helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-        fontSize: "xxs",
-        children: helperText
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread({
-        ref: inputRef,
-        tabIndex: -1
-      }, rest))]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactPortal.ReactPortal, {
-      wrapperId: "portal-root",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_OptionsSelect.OptionsSelect, {
-        open: optionsMenuOpen,
-        left: "".concat((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getBoundingClientRect().left, "px"),
-        top: Number(positionContainer) < 470 ? "calc(".concat(((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.getBoundingClientRect().bottom) || 0, "px + 10px)") : "calc(".concat(((_containerRef$current5 = containerRef.current) === null || _containerRef$current5 === void 0 ? void 0 : _containerRef$current5.getBoundingClientRect().top) || 0, "px - ").concat(heightModal && heightModal + 10, "px)"),
-        ref: optionsModalRef,
-        maxWidth: "".concat((_containerRef$current6 = containerRef.current) === null || _containerRef$current6 === void 0 ? void 0 : _containerRef$current6.getBoundingClientRect().width, "px"),
-        minWidth: optionsMinWidth,
-        children: [!!placeholder && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionPlaceholder, {
-          item: true,
-          onClick: function onClick() {
-            return selectOption(undefined);
-          },
-          children: placeholder
-        }), options.map(function (option, i) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Option, {
-            sizeSelect: sizeSelect,
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread({
+          ref: inputRef,
+          type: isBooleanOptions && 'checkbox',
+          tabIndex: -1
+        }, rest))]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactPortal.ReactPortal, {
+        wrapperId: "portal-root",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_OptionsSelect.OptionsSelect, {
+          open: optionsMenuOpen,
+          left: "".concat((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getBoundingClientRect().left, "px"),
+          top: Number(positionContainer) < 470 ? "calc(".concat(((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.getBoundingClientRect().bottom) || 0, "px + 10px)") : "calc(".concat(((_containerRef$current5 = containerRef.current) === null || _containerRef$current5 === void 0 ? void 0 : _containerRef$current5.getBoundingClientRect().top) || 0, "px - ").concat(heightModal && heightModal + 10, "px)"),
+          ref: optionsModalRef,
+          maxWidth: "".concat((_containerRef$current6 = containerRef.current) === null || _containerRef$current6 === void 0 ? void 0 : _containerRef$current6.getBoundingClientRect().width, "px"),
+          minWidth: optionsMinWidth,
+          children: [!!placeholder && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionPlaceholder, {
+            item: true,
             onClick: function onClick() {
-              selectOption(i);
+              return selectOption(undefined);
             },
-            children: option.label
-          }, option.value);
-        })]
-      })
-    })]
+            children: placeholder
+          }), options === null || options === void 0 ? void 0 : options.map(function (option, i) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Option, {
+              sizeSelect: sizeSelect,
+              onClick: function onClick() {
+                selectOption(i);
+              },
+              children: option.label
+            }, i);
+          })]
+        })
+      }), !!helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HelperText, {
+        alert: alert,
+        children: helperText
+      })]
+    })
   });
 });
 Select.displayName = 'Select';

package/dist/components/Select/select.test.d.ts

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

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

@@ -1,18 +1,23 @@
-/// <reference types="react" />
-import { SelectContainerProps, sizeSelect } 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 Option: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    sizeSelect?: sizeSelect | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const OptionPlaceholder: import("@emotion/styled").StyledComponent<import("../List/types").ListProps & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
+/// <reference types="react" />
+import { InputProps } from '../Input/types';
+import { SelectContainerProps, sizeSelect } 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 Option: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    sizeSelect?: sizeSelect | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const OptionPlaceholder: import("@emotion/styled").StyledComponent<import("../List/types").ListProps & {
+    children?: import("react").ReactNode;
+} & {
+    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>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE3D,eAAO,MAAM,eAAe;;;gIAqK1B,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;yGAwBjB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;UAI5B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE3D,eAAO,MAAM,eAAe;;;gIA0K1B,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;yGAwBjB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;UAI5B,CAAC;AAEH,eAAO,MAAM,UAAU;;;wHAOtB,CAAC"}

package/dist/components/Select/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SelectContainer = exports.OptionPlaceholder = exports.Option = void 0;
+exports.SelectContainer = exports.OptionPlaceholder = exports.Option = exports.HelperText = void 0;
 
 var _react = require("@emotion/react");
 
@@ -18,7 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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 (props) {
-  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    outline: none;\n    user-select: none;\n    width: ", ";\n    height: ", ";\n    ", ";\n    & > div {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 8px;\n      border-radius: ", ";\n      padding: 0\n        ", ";\n      width: 100%;\n      height: 100%;\n      position: relative;\n      cursor: pointer;\n      color: ", ";\n      transition: background-color ease;\n      transition-duration: ", ";\n\n      ", ";\n\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: top ease, left ease, color ease;\n        transition-duration: ", ";\n\n        ", "\n      }\n\n      // Chevron Down icon\n      & > svg {\n        flex-shrink: 0;\n        transform: rotate(0deg);\n        color: ", ";\n        transition: transform ease;\n        transition-duration: ", ";\n      }\n\n      & > fieldset {\n        border: 2px solid;\n        border-color: ", ";\n        border-radius: ", ";\n        padding: 0 14px;\n        position: absolute;\n        left: 0px;\n        right: 0px;\n        top: 0px;\n        bottom: 0px;\n        pointer-events: none;\n        transition: border-color ease;\n        transition-duration: ", ";\n\n        &:last-of-type {\n          border-radius: calc(", " + 2px);\n          padding: 0 16px;\n          border-color: transparent;\n          left: -2px;\n          right: -2px;\n          top: -2px;\n          bottom: -2px;\n        }\n\n        & > legend {\n          display: ", ";\n          line-height: 2px;\n          user-select: none;\n          padding: 0 4px;\n          & > span {\n            color: transparent;\n          }\n        }\n      }\n    }\n\n    // Helper text\n    & > p {\n      margin: 8px 20px;\n\n      ", "\n    }\n\n    & > input {\n      appearance: none;\n      border: 0;\n      width: 0px;\n      position: absolute;\n      opacity: 0;\n      pointer-events: none;\n    }\n  "])), props.size ? {
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    outline: none;\n    user-select: none;\n    width: ", ";\n    height: ", ";\n    ", ";\n    & > div {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 8px;\n      border-radius: ", ";\n      padding: 0\n        ", ";\n      width: 100%;\n      height: 100%;\n      position: relative;\n      cursor: pointer;\n      color: ", ";\n      transition: background-color ease;\n      transition-duration: ", ";\n\n      ", ";\n\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: top ease, left ease, color ease;\n        transition-duration: ", ";\n\n        background: ", ";\n        padding: 0 4px;\n        z-index: 1;\n        white-space: nowrap;\n        max-width: 65%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n\n        ", "\n      }\n\n      & > .select--placeholder {\n        white-space: nowrap;\n        max-width: 75%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      // Chevron Down icon\n      & > svg {\n        flex-shrink: 0;\n        transform: rotate(0deg);\n        color: ", ";\n        transition: transform ease;\n        transition-duration: ", ";\n      }\n\n      & > fieldset {\n        border: 2px solid;\n        border-color: ", ";\n        border-radius: ", ";\n        padding: 0 14px;\n        position: absolute;\n        left: 0px;\n        right: 0px;\n        top: 0px;\n        bottom: 0px;\n        pointer-events: none;\n        transition: border-color ease;\n        transition-duration: ", ";\n\n        &:last-of-type {\n          border-radius: calc(", " + 2px);\n          padding: 0 16px;\n          border-color: transparent;\n          left: -2px;\n          right: -2px;\n          top: -2px;\n          bottom: -2px;\n        }\n\n        & > legend {\n          display: ", ";\n          line-height: 2px;\n          user-select: none;\n          padding: 0 4px;\n          & > span {\n            color: transparent;\n          }\n        }\n      }\n    }\n\n    & > input {\n      appearance: none;\n      border: 0;\n      width: 0px;\n      position: absolute;\n      opacity: 0;\n      pointer-events: none;\n    }\n  "])), props.size ? {
     sm: '78px',
     md: '100%'
   }[props.size] : props.width, props.variant === 'unstyled' ? 'auto' : props.size ? {
@@ -27,13 +27,13 @@ var SelectContainer = _styled.default.div(function (props) {
   }[props.size] : '56px', !props.disabled && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      &:hover {\n        & > div {\n          color: ", ";\n\n          & > label {\n            color: ", ";\n          }\n\n          & > fieldset {\n            &:first-of-type {\n              border-color: ", ";\n            }\n          }\n        }\n      }\n\n      &:focus {\n        & > div {\n          color: ", ";\n\n          & > svg {\n            transform: rotate(180deg);\n          }\n\n          & > fieldset {\n            &:first-of-type {\n              border-color: ", ";\n            }\n            &:last-of-type {\n              border-color: ", ";\n            }\n          }\n        }\n      }\n    "])), props.theme.colors.neutral.black, props.theme.colors.neutral.neutral5, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.hover, props.theme.colors.neutral.black, props.alert ? props.theme.colors[props.alert].default : props.theme.colors.primary.hover, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.disabled), props.theme.borderRadius.default, props.variant === 'unstyled' ? '0' : props.size && {
     sm: '16px',
     md: '20px'
-  }[props.size], props.theme.colors.neutral.neutral5, props.theme.transition.speed, props.alert && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        background: ", "33;\n      "])), props.theme.colors[props.alert].blurred), props.disabled && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        background: ", ";\n        cursor: default;\n      "])), props.theme.colors.neutral.neutral1), props.theme.colors.neutral.neutral3, props.theme.transition.speed, props.filled && (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          left: 20px;\n          top: -1px;\n          font-size: 0.875rem;\n        "]))), props.theme.colors.neutral.neutral5, props.theme.transition.speed, props.alert && !props.disabled ? props.theme.colors[props.alert].default : props.theme.colors.neutral.neutral2, props.theme.borderRadius.default, props.theme.transition.speed, props.theme.borderRadius.default, props.filled ? 'block' : 'none', props.disabled && (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        color: ", ";\n      "])), props.theme.colors.neutral.neutral3));
+  }[props.size], props.theme.colors.neutral.neutral5, props.theme.transition.speed, props.alert && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        background: ", "33;\n      "])), props.theme.colors[props.alert].blurred), props.disabled && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        background: ", ";\n        cursor: default;\n      "])), props.theme.colors.neutral.neutral1), props.theme.colors.neutral.neutral3, props.theme.transition.speed, props.theme.colors.neutral.white, props.filled && (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          left: 20px;\n          top: -1px;\n          font-size: 0.875rem;\n        "]))), props.theme.colors.neutral.neutral5, props.theme.transition.speed, props.alert && !props.disabled ? props.theme.colors[props.alert].default : props.theme.colors.neutral.neutral2, props.theme.borderRadius.default, props.theme.transition.speed, props.theme.borderRadius.default, props.filled ? 'block' : 'none');
 });
 
 exports.SelectContainer = SelectContainer;
 
 var Option = _styled.default.div(function (props) {
-  return (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    box-sizing: border-box;\n    outline: none;\n    padding: ", ";\n    text-align: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n    color: ", ";\n    background: transparent;\n    transition: background-color ease;\n    transition-duration: ", ";\n    cursor: pointer;\n    & > svg:first-of-type {\n      margin-right: ", ";\n    }\n    & > svg:last-of-type:not(:first-of-type) {\n      margin-left: ", ";\n    }\n    &:hover,\n    &:focus {\n      background: ", ";\n    }\n  "])), {
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    box-sizing: border-box;\n    outline: none;\n    padding: ", ";\n    text-align: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n    color: ", ";\n    background: transparent;\n    transition: background-color ease;\n    transition-duration: ", ";\n    cursor: pointer;\n    & > svg:first-of-type {\n      margin-right: ", ";\n    }\n    & > svg:last-of-type:not(:first-of-type) {\n      margin-left: ", ";\n    }\n    &:hover,\n    &:focus {\n      background: ", ";\n    }\n  "])), {
     sm: '8px',
     md: '16px 32px'
   }[props.sizeSelect || 'md'], {
@@ -45,6 +45,12 @@ var Option = _styled.default.div(function (props) {
 exports.Option = Option;
 var OptionPlaceholder = (0, _styled.default)(_List.default)(function (_ref) {
   var theme = _ref.theme;
-  return (0, _react.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), theme.colors.neutral.neutral3);
+  return (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), theme.colors.neutral.neutral3);
 });
-exports.OptionPlaceholder = OptionPlaceholder;
+exports.OptionPlaceholder = OptionPlaceholder;
+
+var HelperText = _styled.default.span(function (props) {
+  return (0, _react.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    font-size: ", ";\n    padding: 0 20px;\n  "])), props.alert && props.alert !== 'success' ? props.theme.colors[props.alert].default : props.theme.colors.neutral.neutral4);
+});
+
+exports.HelperText = HelperText;

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

@@ -1,27 +1,27 @@
-import { ReactNode } from 'react';
-export declare type SelectAlertType = 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
-export interface SelectOption {
-    label: ReactNode;
-    value: string | number;
-}
-export declare type sizeSelect = 'sm' | 'md';
-export interface SelectProps {
-    label?: string;
-    variant?: 'unstyled' | 'default';
-    options: SelectOption[];
-    helperText?: string;
-    alert?: SelectAlertType;
-    placeholder?: string;
-    width?: string;
-    sizeSelect?: sizeSelect;
-    optionsMinWidth?: string;
-}
-export interface SelectContainerProps {
-    variant?: 'unstyled' | 'default';
-    alert?: SelectAlertType;
-    filled: boolean;
-    disabled: boolean;
-    width?: string;
-    size?: sizeSelect;
-}
+import { ReactNode } from 'react';
+export declare type SelectAlertType = 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
+export interface SelectOption {
+    label: ReactNode;
+    value: string | number | boolean;
+}
+export declare type sizeSelect = 'sm' | 'md';
+export interface SelectProps {
+    label?: string;
+    variant?: 'unstyled' | 'default';
+    options: SelectOption[];
+    helperText?: string;
+    alert?: SelectAlertType;
+    placeholder?: string;
+    width?: string;
+    sizeSelect?: sizeSelect;
+    optionsMinWidth?: string;
+}
+export interface SelectContainerProps {
+    variant?: 'unstyled' | 'default';
+    alert?: SelectAlertType;
+    filled: boolean;
+    disabled: boolean;
+    width?: string;
+    size?: sizeSelect;
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,oBAAY,eAAe,GACvB,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;AAExB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,oBAAY,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACjC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,oBAAY,eAAe,GACvB,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;AAExB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CAClC;AAED,oBAAY,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACjC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB"}

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { ISkeletonProps } from './types';
-declare const Skeleton: ({ children, isLoaded, ...rest }: ISkeletonProps) => JSX.Element;
-export default Skeleton;
+/// <reference types="react" />
+import { ISkeletonProps } from './types';
+declare const Skeleton: ({ children, isLoaded, ...rest }: ISkeletonProps) => JSX.Element;
+export default Skeleton;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Skeleton/skeleton.test.d.ts

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

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { ISkeletonProps } from './types';
-import { GenericStyledProps } from '../../@types';
-export declare const SkeletonElement: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & ISkeletonProps & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { ISkeletonProps } from './types';
+import { GenericStyledProps } from '../../@types';
+export declare const SkeletonElement: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ISkeletonProps & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1,41 +1,41 @@
-import { ReactNode } from 'react';
-import { GlobalColorsProps } from '../../shared/theme/theme.types';
-export declare type ISkeletonProps = {
-    /**
-     * The variant of the skeleton.
-     * @default 'text'
-     */
-    variant?: 'text' | 'rectangle' | 'circle';
-    /**
-     * The animation of the skeleton
-     * @default 'pulse'
-     */
-    animation?: 'wave' | 'pulse' | 'static';
-    /**
-     * The width of the skeleton
-     * @default '100%'
-     */
-    width?: number | string;
-    /**
-     * The height of the skeleton
-     * @default '100%'
-     */
-    height?: number | string;
-    /**
-     * The color of the skeleton
-     * @default '#EEEEEE'
-     */
-    color?: GlobalColorsProps | (string & {});
-    /**
-     * When true, the skeleton children's will be displayed
-     * @default false
-     */
-    isLoaded?: boolean;
-    /**
-     * When true, the skeleton will be displayed with full width
-     * @default false
-     */
-    fullWidth?: boolean;
-    children?: ReactNode;
-};
+import { ReactNode } from 'react';
+import { GlobalColorsProps } from '../../shared/theme/theme.types';
+export declare type ISkeletonProps = {
+    /**
+     * The variant of the skeleton.
+     * @default 'text'
+     */
+    variant?: 'text' | 'rectangle' | 'circle';
+    /**
+     * The animation of the skeleton
+     * @default 'pulse'
+     */
+    animation?: 'wave' | 'pulse' | 'static';
+    /**
+     * The width of the skeleton
+     * @default '100%'
+     */
+    width?: number | string;
+    /**
+     * The height of the skeleton
+     * @default '100%'
+     */
+    height?: number | string;
+    /**
+     * The color of the skeleton
+     * @default '#EEEEEE'
+     */
+    color?: GlobalColorsProps | (string & {});
+    /**
+     * When true, the skeleton children's will be displayed
+     * @default false
+     */
+    isLoaded?: boolean;
+    /**
+     * When true, the skeleton will be displayed with full width
+     * @default false
+     */
+    fullWidth?: boolean;
+    children?: ReactNode;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Slider/SliderExample.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { ISliderProps } from './types';
-export declare const SliderExample: ({ ...props }: ISliderProps) => JSX.Element;
+/// <reference types="react" />
+import { ISliderProps } from './types';
+export declare const SliderExample: ({ ...props }: ISliderProps) => JSX.Element;
 //# sourceMappingURL=SliderExample.d.ts.map

package/dist/components/Slider/components/SliderPointer.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { ISliderPointerProps } from '../types';
-export declare const SliderPointer: ({ direction, thumbColor }: ISliderPointerProps) => JSX.Element;
+/// <reference types="react" />
+import { ISliderPointerProps } from '../types';
+export declare const SliderPointer: ({ direction, thumbColor }: ISliderPointerProps) => JSX.Element;
 //# sourceMappingURL=SliderPointer.d.ts.map

package/dist/components/Slider/components/SliderRail.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { ISliderTrackerProps } from '../types';
-export declare const SliderRail: import("react").MemoExoticComponent<({ step, maxValue, onChangeSliderTracker, trackColor, direction, ...rest }: ISliderTrackerProps) => JSX.Element>;
+/// <reference types="react" />
+import { ISliderTrackerProps } from '../types';
+export declare const SliderRail: import("react").MemoExoticComponent<({ step, maxValue, onChangeSliderTracker, trackColor, direction, ...rest }: ISliderTrackerProps) => JSX.Element>;
 //# sourceMappingURL=SliderRail.d.ts.map