@pedidopago/ui 1.1.5 → 1.2.2

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

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { IInputProps } from './types';
-declare const RatingComponent: FC<IInputProps>;
-export default RatingComponent;
+import { FC } from 'react';
+import { IInputProps } from './types';
+declare const RatingComponent: FC<IInputProps>;
+export default RatingComponent;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Rating/rating.test.d.ts

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

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

@@ -1,29 +1,29 @@
-import { ExtendThemeProps } from '../../shared/theme';
-import { GradientIconName } from './components/GradientIcon/types';
-export declare type SizeType = 'small' | 'medium' | 'large';
-export declare type IStyleProps = {
-    primaryColor?: string;
-    secondaryColor?: string;
-    theme?: ExtendThemeProps;
-    disabled?: boolean;
-    active?: boolean;
-    size?: SizeType;
-    isActive?: boolean;
-    SwitchType?: 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
-};
-export declare type IInputProps = {
-    name: GradientIconName;
-    value?: number;
-    defaultValue?: number;
-    iconsQuantity?: number;
-    precision?: '1' | '0.5';
-    size?: SizeType;
-    readOnly?: boolean;
-    disabled?: boolean;
-    primaryColor?: string;
-    secondaryColor?: string;
-    strokeColor?: string;
-    onChangeValue?: (value: number) => void;
-    onChange?: (value: number) => void;
-};
+import { ExtendThemeProps } from '../../shared/theme';
+import { GradientIconName } from './components/GradientIcon/types';
+export declare type SizeType = 'small' | 'medium' | 'large';
+export declare type IStyleProps = {
+    primaryColor?: string;
+    secondaryColor?: string;
+    theme?: ExtendThemeProps;
+    disabled?: boolean;
+    active?: boolean;
+    size?: SizeType;
+    isActive?: boolean;
+    SwitchType?: 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
+};
+export declare type IInputProps = {
+    name: GradientIconName;
+    value?: number;
+    defaultValue?: number;
+    iconsQuantity?: number;
+    precision?: '1' | '0.5';
+    size?: SizeType;
+    readOnly?: boolean;
+    disabled?: boolean;
+    primaryColor?: string;
+    secondaryColor?: string;
+    strokeColor?: string;
+    onChangeValue?: (value: number) => void;
+    onChange?: (value: number) => void;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Rating/utils/IconObjectsController.d.ts

@@ -1,10 +1,10 @@
-import { fillStateType } from '../components/GradientIcon/types';
-export interface IIconsObject {
-    id: number;
-    fillState: 'filled' | 'halfFilled' | 'empty';
-}
-export declare function createIconObjects(stars: number, defaultValue?: number): IIconsObject[];
-export declare function makeIconEmptyById(icons: IIconsObject[], id: number): IIconsObject[];
-export declare function controlIconsFillState(icons: IIconsObject[], id: number, fillState: fillStateType): IIconsObject[];
-export declare function convertFillStateToValue(icons: IIconsObject[]): number;
+import { fillStateType } from '../components/GradientIcon/types';
+export interface IIconsObject {
+    id: number;
+    fillState: 'filled' | 'halfFilled' | 'empty';
+}
+export declare function createIconObjects(stars: number, defaultValue?: number): IIconsObject[];
+export declare function makeIconEmptyById(icons: IIconsObject[], id: number): IIconsObject[];
+export declare function controlIconsFillState(icons: IIconsObject[], id: number, fillState: fillStateType): IIconsObject[];
+export declare function convertFillStateToValue(icons: IIconsObject[]): number;
 //# sourceMappingURL=IconObjectsController.d.ts.map

package/dist/components/Rating/utils/svgDataTratamentFunction.d.ts

@@ -1,10 +1,10 @@
-import { MouseEvent } from 'react';
-import { fillStateType } from '../components/GradientIcon/types';
-interface svgDataTratamentFunctionReturn {
-    fillState: fillStateType;
-    isMouseLeave: boolean;
-    isMouseMove: boolean;
-}
-export declare function svgDataTratamentFunction(e: MouseEvent<SVGSVGElement>, precision: '1' | '0.5'): svgDataTratamentFunctionReturn;
-export {};
+import { MouseEvent } from 'react';
+import { fillStateType } from '../components/GradientIcon/types';
+interface svgDataTratamentFunctionReturn {
+    fillState: fillStateType;
+    isMouseLeave: boolean;
+    isMouseMove: boolean;
+}
+export declare function svgDataTratamentFunction(e: MouseEvent<SVGSVGElement>, precision: '1' | '0.5'): svgDataTratamentFunctionReturn;
+export {};
 //# sourceMappingURL=svgDataTratamentFunction.d.ts.map

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

@@ -0,0 +1,5 @@
+import { InputHTMLAttributes } from 'react';
+import { SelectProps } from './types';
+declare const Select: import("react").ForwardRefExoticComponent<SelectProps & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+export default Select;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAStC,QAAA,MAAM,MAAM,kJAqGX,CAAC;AAGF,eAAe,MAAM,CAAC"}

package/dist/components/Select/index.js

@@ -0,0 +1,181 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var S = _interopRequireWildcard(require("./styles"));
+
+var _Typography = _interopRequireDefault(require("../Typography"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _Modal = require("../Modal");
+
+var _List = _interopRequireDefault(require("../List"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["label", "options", "alert", "helperText"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["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; }
+
+var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _containerRef$current, _containerRef$current2, _containerRef$current3, _containerRef$current4;
+
+  var label = _ref.label,
+      options = _ref.options,
+      alert = _ref.alert,
+      helperText = _ref.helperText,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var containerRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      optionsMenuOpen = _useState2[0],
+      setOptionsMenuOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectedOption = _useState4[0],
+      setSelectedOption = _useState4[1];
+
+  var inputRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return inputRef.current;
+  });
+
+  function selectOption(option) {
+    if (inputRef.current) {
+      var _nativeInputValueSett;
+
+      var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
+      nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : (_nativeInputValueSett = nativeInputValueSetter.set) === null || _nativeInputValueSett === void 0 ? void 0 : _nativeInputValueSett.call(inputRef.current, options[option].value);
+      var event = new Event('input', {
+        bubbles: true
+      });
+      inputRef.current.dispatchEvent(event);
+    }
+
+    setSelectedOption(option);
+    setOptionsMenuOpen(false);
+  }
+
+  (0, _react.useEffect)(function () {
+    // Sets default value
+    if (rest.defaultValue) {
+      var defaultOptionIndex = options.findIndex(function (c) {
+        return c.value === rest.defaultValue;
+      });
+      if (defaultOptionIndex >= 0) selectOption(defaultOptionIndex);
+    }
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(S.SelectContainer, {
+      ref: containerRef,
+      alert: alert,
+      disabled: !!rest.disabled,
+      tabIndex: rest.disabled ? -1 : 0,
+      onFocus: function onFocus() {
+        if (!rest.disabled) setOptionsMenuOpen(true);
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            fontSize: "xxs",
+            variant: "span",
+            color: "inherit",
+            children: label
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          fontSize: "xs",
+          fontWeight: "500",
+          color: "inherit",
+          children: selectedOption === undefined ? '' : options[selectedOption].label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          name: "chevron-down"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              fontSize: "xxs",
+              variant: "span",
+              children: label
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
+          children: /*#__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)(_Modal.Modal, {
+      open: optionsMenuOpen,
+      left: "".concat((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().left, "px"),
+      top: "".concat((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getBoundingClientRect().top, "px"),
+      anchorX: "left",
+      anchorY: "top",
+      offsetY: "".concat((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getBoundingClientRect().height, "px"),
+      maxWidth: "".concat((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.getBoundingClientRect().width, "px"),
+      hideOverlay: true,
+      onClose: function onClose() {
+        return setOptionsMenuOpen(false);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, {
+        children: options.map(function (option, i) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, {
+            item: true,
+            onClick: function onClick() {
+              return selectOption(i);
+            },
+            children: option.label
+          }, option.value);
+        })
+      })
+    })]
+  });
+});
+Select.displayName = 'Select';
+var _default = Select;
+exports.default = _default;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.test.d.ts","sourceRoot":"","sources":["../../../src/components/Select/select.test.tsx"],"names":[],"mappings":"AACA,OAAO,2BAA2B,CAAC"}

package/dist/components/Select/select.test.js

@@ -0,0 +1,53 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+
+var _react = require("@testing-library/react");
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+var _ = _interopRequireDefault(require("."));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var setup = function setup(props) {
+  return _objectSpread({}, (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, _objectSpread({}, props))));
+};
+
+describe('Select', function () {
+  it('should render the select component', function () {
+    var _setup = setup({
+      label: 'Select',
+      options: [{
+        label: 'Option 1',
+        value: 'option-1'
+      }]
+    }),
+        container = _setup.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should select an option', function () {
+    var container = setup({
+      label: 'Select',
+      options: [{
+        label: 'Option 1',
+        value: 'option-1'
+      }]
+    });
+    var option = container.getByText('Option 1');
+    var input = container.baseElement.querySelector('input');
+
+    _react.fireEvent.click(option);
+
+    expect(input === null || input === void 0 ? void 0 : input.value).toBe('option-1');
+  });
+});

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+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>, {}>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,eAAe;;;gIAoK1B,CAAC"}

package/dist/components/Select/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectContainer = void 0;
+
+var _react = require("@emotion/react");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+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 (props) {
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    outline: none;\n\n    width: 100%;\n\n    ", "\n\n    & > div {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 8px;\n\n      border-radius: ", ";\n      padding: 0 20px;\n\n      width: 100%;\n      height: 56px;\n\n      position: relative;\n\n      cursor: pointer;\n\n      color: ", ";\n\n      transition: background-color ease;\n      transition-duration: ", ";\n\n      ", "\n\n      ", "\n\n      & > label {\n        position: absolute;\n        left: 20px;\n        top: -2px;\n        transform: translateY(-50%);\n\n        color: ", ";\n\n        transition: color ease;\n        transition-duration: ", ";\n      }\n\n      // Chevron Down icon\n      & > svg {\n        flex-shrink: 0;\n\n        transform: rotate(0deg);\n\n        color: ", ";\n\n        transition: transform ease;\n        transition-duration: ", ";\n      }\n\n      & > fieldset {\n        border: 2px solid;\n        border-color: ", ";\n        border-radius: ", ";\n        padding: 0 16px;\n\n        position: absolute;\n        left: 0px;\n        right: 0px;\n        top: 0px;\n        bottom: 0px;\n\n        pointer-events: none;\n\n        transition: border-color ease;\n        transition-duration: ", ";\n\n        &:last-of-type {\n          border-radius: calc(", " + 2px);\n          padding: 0 18px;\n\n          border-color: transparent;\n          left: -2px;\n          right: -2px;\n          top: -2px;\n          bottom: -2px;\n        }\n\n        & > legend {\n          line-height: 2px;\n          user-select: none;\n          padding: 0 4px;\n\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      position: absolute;\n      opacity: 0;\n      pointer-events: none;\n    }\n  "])), !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.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.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.disabled && (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        color: ", ";\n      "])), props.theme.colors.neutral.neutral3));
+});
+
+exports.SelectContainer = SelectContainer;

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

@@ -0,0 +1,16 @@
+export declare type SelectAlertType = 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
+export interface SelectOption {
+    label: string;
+    value: string;
+}
+export interface SelectProps {
+    label: string;
+    options: SelectOption[];
+    helperText?: string;
+    alert?: SelectAlertType;
+}
+export interface SelectContainerProps {
+    alert?: SelectAlertType;
+    disabled: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,oBAAY,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,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/Select/types.js

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

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<HTMLSpanElement>, HTMLSpanElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAIlD,eAAO,MAAM,eAAe;;;+IA2E1B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAIlD,eAAO,MAAM,eAAe;;;iJA0E1B,CAAC"}

package/dist/components/Skeleton/styles.js

@@ -21,8 +21,8 @@ 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 SkeletonElement = _styled.default.div(function (props) {
-  var skeletonColor = (0, _getColorValue.getColorValue)(props.color || props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral6 : '#eeeeee', props.theme);
+var SkeletonElement = _styled.default.span(function (props) {
+  var skeletonColor = (0, _getColorValue.getColorValue)(props.color || (props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral6 : '#eeeeee'), props.theme);
   var borderRadiusByVariant = {
     circle: '50%',
     text: '4px',
@@ -34,7 +34,7 @@ var SkeletonElement = _styled.default.div(function (props) {
     wave: (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      overflow: hidden;\n      transform-origin: 0px 55%;\n\n      &::after {\n        content: '';\n        inset: 0px;\n        position: absolute;\n        animation: 1.6s linear 0.5s infinite normal none running move;\n        transform: translateX(-100%);\n        background: linear-gradient(\n          90deg,\n          transparent,\n          ", ",\n          transparent\n        );\n      }\n\n      @keyframes move {\n        0% {\n          transform: translateX(-100%);\n        }\n        40% {\n          transform: translateX(100%);\n        }\n        100% {\n          transform: translateX(100%);\n        }\n      }\n    "])), (0, _colorCheck.parseHexColorToRgba)(waveColor, waveColorOpacity)),
     pulse: (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      animation: 1.6s linear 0.5s infinite normal none running pulse;\n\n      @keyframes pulse {\n        0% {\n          opacity: 1;\n        }\n        50% {\n          opacity: 0.4;\n        }\n        100% {\n          opacity: 1;\n        }\n      }\n    "])))
   };
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: block;\n    position: relative;\n    background-color: ", ";\n    border-radius: ", ";\n    width: ", ";\n    height: ", ";\n\n    ", ";\n  "])), skeletonColor, borderRadiusByVariant[props.variant || 'text'], props.width ? props.width + 'px' : '100%', props.height ? props.height + 'px' : '1.2rem', props.animation !== 'static' ? animationsCss[props.animation || 'pulse'] : '');
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: inline-block;\n    position: relative;\n    background-color: ", ";\n    border-radius: ", ";\n    width: ", ";\n    height: ", ";\n\n    ", ";\n  "])), skeletonColor, borderRadiusByVariant[props.variant || 'text'], typeof props.width === 'number' ? props.width + 'px' : props.width || '100%', typeof props.height === 'number' ? props.height + 'px' : props.height || '1em', props.animation !== 'static' ? animationsCss[props.animation || 'wave'] : '');
 });
 
 exports.SkeletonElement = SkeletonElement;

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

@@ -1,36 +1,36 @@
-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;
-    /**
-     * The height of the skeleton
-     * @default '100%'
-     */
-    height?: number;
-    /**
-     * The color of the skeleton
-     * @default '#EEEEEE'
-     */
-    color?: GlobalColorsProps | (string & {});
-    /**
-     * When true, the skeleton children's will be displayed
-     * @default false
-     */
-    isLoaded?: 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;
+    /**
+     * The height of the skeleton
+     * @default '100%'
+     */
+    height?: number;
+    /**
+     * The color of the skeleton
+     * @default '#EEEEEE'
+     */
+    color?: GlobalColorsProps | (string & {});
+    /**
+     * When true, the skeleton children's will be displayed
+     * @default false
+     */
+    isLoaded?: boolean;
+    children?: ReactNode;
+};
 //# sourceMappingURL=types.d.ts.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderExample.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/SliderExample.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,eAAO,MAAM,aAAa,iBAAkB,YAAY,gBAYvD,CAAC"}