@pedidopago/ui 1.2.5 → 1.3.2

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAa,EACb,GAAY,EACZ,OAAkB,EAClB,OAAkB,EAClB,OAAe,EACf,OAAe,EACf,aAAqB,EACrB,WAAmB,EACnB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,GACT,EAAE,WAAW,eA+Eb"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAMrC,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAa,EACb,GAAY,EACZ,OAAkB,EAClB,OAAkB,EAClB,OAAe,EACf,OAAe,EACf,aAAqB,EACrB,WAAmB,EACnB,mBAA0B,EAC1B,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,IAAI,EACR,EAAE,UAAU,eAiFZ"}

package/dist/components/Modal/index.js

@@ -5,15 +5,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Modal = Modal;
 
+var _styles = require("./styles");
+
+var _react = require("react");
+
 var _useDisableBodyScroll = require("../../shared/hooks/useDisableBodyScroll");
 
 var _useKeyPress = require("../../shared/hooks/useKeyPress");
 
-var _styles = require("./styles");
+var _useWindowSize2 = require("../../shared/hooks/useWindowSize");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["open", "left", "top", "anchorX", "anchorY", "offsetX", "offsetY", "hideScrollBar", "hideOverlay", "disableScrollOnOpen", "maxWidth", "maxHeight", "onClose"];
+
+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 _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 Modal(_ref) {
+  var _containerRef$current, _containerRef$current2;
+
   var open = _ref.open,
       _ref$left = _ref.left,
       left = _ref$left === void 0 ? '50vw' : _ref$left,
@@ -31,18 +49,21 @@ function Modal(_ref) {
       hideScrollBar = _ref$hideScrollBar === void 0 ? false : _ref$hideScrollBar,
       _ref$hideOverlay = _ref.hideOverlay,
       hideOverlay = _ref$hideOverlay === void 0 ? false : _ref$hideOverlay,
+      _ref$disableScrollOnO = _ref.disableScrollOnOpen,
+      disableScrollOnOpen = _ref$disableScrollOnO === void 0 ? true : _ref$disableScrollOnO,
       maxWidth = _ref.maxWidth,
       maxHeight = _ref.maxHeight,
       onClose = _ref.onClose,
-      children = _ref.children;
-  // TODO
-  // Finalizar testes
-  // Finalizar documentação Dialog
-  // Finalizar testes do Dialog
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
+      windowHeight = _useWindowSize.height;
+
+  var containerRef = (0, _react.useRef)(null);
   (0, _useKeyPress.useKeyPress)('Escape', function () {
     return onClose && onClose();
   });
-  (0, _useDisableBodyScroll.useDisableBodyScroll)(open);
+  (0, _useDisableBodyScroll.useDisableBodyScroll)(open && disableScrollOnOpen);
 
   function getAnchorTranslate() {
     var percentageX = 0;
@@ -96,25 +117,27 @@ function Modal(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, {
       style: {
-        // display: open ? 'block' : 'none',
         opacity: open && !hideOverlay ? 0.1 : 0,
         pointerEvents: open ? 'auto' : 'none'
       },
       onClick: function onClick() {
         return onClose();
       }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-      style: {
-        left: "calc(".concat(left, " + ").concat(offsetX, ")"),
-        top: "calc(".concat(top, " + ").concat(offsetY, ")"),
-        transform: "".concat(getAnchorTranslate(), " scale(").concat(open ? 1 : 0.8, ")"),
-        opacity: open ? 1 : 0,
-        pointerEvents: open ? 'auto' : 'none'
-      },
-      maxWidth: maxWidth,
-      maxHeight: maxHeight,
-      hideScrollBar: hideScrollBar,
-      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ModalContainer, {
+      ref: containerRef,
+      open: open,
+      maxWidth: typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth,
+      maxHeight: "".concat(windowHeight - (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : (_containerRef$current2 = _containerRef$current.getBoundingClientRect()) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.y) || 0), "px"),
+      left: "calc(".concat(left, " + ").concat(offsetX, ")"),
+      top: "calc(".concat(top, " + ").concat(offsetY, ")"),
+      anchorTranslate: getAnchorTranslate(),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ModalElement, _objectSpread(_objectSpread({
+        open: open,
+        maxHeight: typeof maxHeight === 'number' ? "".concat(maxHeight, "px") : maxHeight,
+        hideScrollBar: hideScrollBar
+      }, rest), {}, {
+        children: rest.children
+      }))
     })]
   });
 }

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

@@ -1,15 +1,28 @@
 /// <reference types="react" />
 import { Theme } from '@emotion/react';
-export declare const Container: import("@emotion/styled").StyledComponent<{
+interface ModalContainerProps {
+    open: boolean;
+    maxWidth?: string;
+    maxHeight?: string;
+    anchorTranslate: string;
+    left: string;
+    top: string;
+}
+export declare const ModalContainer: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ModalContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ModalElement: import("@emotion/styled").StyledComponent<{
     theme?: Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
+    open: boolean;
     maxHeight?: string | undefined;
-    maxWidth?: string | undefined;
     hideScrollBar?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Overlay: import("@emotion/styled").StyledComponent<{
     theme?: Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAO,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C,eAAO,MAAM,SAAS;;;;;;;yGAwDpB,CAAC;AAEH,eAAO,MAAM,OAAO;;;yGAelB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAO,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C,UAAU,mBAAmB;IAC3B,IAAI,EAAE,OAAO,CAAC;IAEd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,eAAe,EAAE,MAAM,CAAC;IAExB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,cAAc;;;+HAsBzB,CAAC;AAEH,eAAO,MAAM,YAAY;;;;UACjB,OAAO;;;yGA4Cb,CAAC;AAEH,eAAO,MAAM,OAAO;;;yGAgBlB,CAAC"}

package/dist/components/Modal/styles.js

@@ -3,28 +3,46 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Overlay = exports.Container = void 0;
+exports.Overlay = exports.ModalElement = exports.ModalContainer = void 0;
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _react = require("@emotion/react");
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var _excluded = ["theme"],
+    _excluded2 = ["theme"];
 
 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 Container = _styled.default.div(function (props) {
-  var theme = props.theme;
-  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-radius: ", ";\n\n    width: calc(100% - 32px);\n\n    max-width: ", ";\n    max-height: ", ";\n    position: fixed;\n\n    overflow-y: auto;\n    overflow-x: hidden;\n\n    &::-webkit-scrollbar {\n      width: 6px;\n    }\n\n    &::-webkit-scrollbar-track {\n      background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: ", ";\n      background: ", ";\n    }\n\n    ", "\n\n    background: ", ";\n    box-shadow: ", ";\n\n    transition: transform ease ", ", opacity linear ", ";\n\n    z-index: ", ";\n\n    &:focus {\n      outline: 3px solid black;\n    }\n  "])), theme.borderRadius.default, props.maxWidth, props.maxHeight, props.theme.borderRadius.default, props.theme.colors.primary.default, props.hideScrollBar && "::-webkit-scrollbar {\n      display: none;\n      }\n      \n      scrollbar-width: none;\n      \n      -ms-overflow-style: none;", theme.colorMode === 'light' ? theme.colors.background.light : theme.colors.neutral.black, theme.colorMode === 'light' ? theme.shadow.level1 : "0 4px 8px ".concat(theme.colors.neutral.black), theme.transition.speed, theme.transition.speed, theme.zIndex.level24);
+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 ModalContainer = _styled.default.div(function (_ref) {
+  var theme = _ref.theme,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n\n    padding-bottom: 16px;\n\n    width: 100%;\n    max-width: ", ";\n    max-height: ", ";\n\n    position: fixed;\n    left: ", ";\n    top: ", ";\n    z-index: ", ";\n    transform: ", ";\n\n    opacity: ", ";\n\n    pointer-events: ", ";\n\n    transition: opacity ease ", ";\n  "])), props.maxWidth, props.maxHeight, props.left, props.top, theme.zIndex.level24, props.anchorTranslate, props.open ? 1 : 0, props.open ? 'auto' : 'none', theme.transition.speed);
+});
+
+exports.ModalContainer = ModalContainer;
+
+var ModalElement = _styled.default.div(function (_ref2) {
+  var theme = _ref2.theme,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 100%;\n    max-height: ", ";\n\n    border-radius: ", ";\n\n    overflow-y: auto;\n    overflow-x: hidden;\n\n    transform: scale(", ");\n\n    background: ", ";\n    box-shadow: ", ";\n\n    transition: transform ease ", ";\n\n    &::-webkit-scrollbar {\n      width: 6px;\n    }\n\n    &::-webkit-scrollbar-track {\n      background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: ", ";\n      background: ", ";\n    }\n\n    ", "\n  "])), props.maxHeight, theme.borderRadius.default, props.open ? 1 : 0.8, theme.colors.background.light, theme.shadow.level1, theme.transition.speed, theme.borderRadius.default, theme.colors.primary.default, props.hideScrollBar && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        display: none;\n      }\n\n      scrollbar-width: none;\n\n      -ms-overflow-style: none;\n    "]))));
 });
 
-exports.Container = Container;
+exports.ModalElement = ModalElement;
 
 var Overlay = _styled.default.div(function (props) {
   var theme = props.theme;
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: fixed;\n    left: 0px;\n    right: 0px;\n    top: 0px;\n    bottom: 0px;\n\n    background: ", ";\n    opacity: 0;\n\n    transition: opacity linear ", ";\n  "])), theme.colors.neutral.neutral5, theme.transition.speed);
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    position: fixed;\n    left: 0px;\n    right: 0px;\n    top: 0px;\n    bottom: 0px;\n    z-index: ", ";\n\n    background: ", ";\n    opacity: 0;\n\n    transition: opacity ease ", ";\n  "])), theme.zIndex.level24, theme.colors.neutral.neutral5, theme.transition.speed);
 });
 
 exports.Overlay = Overlay;

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

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes } from 'react';
 export declare type AnchorX = 'left' | 'center' | 'right' | number;
 export declare type AnchorY = 'top' | 'center' | 'bottom' | number;
-export interface IModalProps {
+export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
     /** If the modal is open or not. */
     open: boolean;
     /** Optional. Sets the left position where the modal will be shown. */
@@ -21,15 +21,16 @@ export interface IModalProps {
     /** Optional. Offsets the Modal vertically. */
     offsetY?: string;
     /** The max width of the Modal. */
-    maxWidth?: string;
+    maxWidth?: string | number;
     /** The max height of the Modal. */
-    maxHeight?: string;
+    maxHeight?: string | number;
     /** Handler called once the Modal is triggered to close. */
     onClose: () => void;
     /** Optional. Will hide the scroll bar if the content inside a container is too big. */
     hideScrollBar?: boolean;
     /** Indicates if the overlay will be visible or not.  */
     hideOverlay?: boolean;
-    children: ReactNode;
+    /** Optional. Will disable the scroll body scroll. */
+    disableScrollOnOpen?: boolean;
 }
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,oBAAY,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAC3D,oBAAY,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,WAAW;IAC1B,mCAAmC;IACnC,IAAI,EAAE,OAAO,CAAC;IAEd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;qCAEiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;qCAEiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,uFAAuF;IACvF,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,QAAQ,EAAE,SAAS,CAAC;CACrB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,oBAAY,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAC3D,oBAAY,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,mCAAmC;IACnC,IAAI,EAAE,OAAO,CAAC;IAEd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;qCAEiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;qCAEiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B,2DAA2D;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,uFAAuF;IACvF,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,qDAAqD;IACrD,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B"}

package/dist/components/MultipleSelect/components/SelectArea/Label.js

@@ -26,7 +26,7 @@ var Label = _styled.default.label(_templateObject || (_templateObject = _taggedT
   return theme.fontWeight['500'];
 }, function (_ref3) {
   var theme = _ref3.theme;
-  return theme.fontSizes.xs;
+  return theme.fontSizes.xxs;
 }, function (_ref4) {
   var animate = _ref4.animate,
       theme = _ref4.theme;

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

@@ -1 +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"}
+{"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;AAQtC,QAAA,MAAM,MAAM,kJAqIX,CAAC;AAGF,eAAe,MAAM,CAAC"}

package/dist/components/Select/index.js

@@ -1,7 +1,5 @@
 "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
 });
@@ -9,26 +7,20 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var S = _interopRequireWildcard(require("./styles"));
+var _styles = 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"];
+var _excluded = ["label", "placeholder", "options", "alert", "helperText", "width"];
 
 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; }
@@ -55,9 +47,12 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _containerRef$current, _containerRef$current2, _containerRef$current3, _containerRef$current4;
 
   var label = _ref.label,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
       options = _ref.options,
       alert = _ref.alert,
       helperText = _ref.helperText,
+      width = _ref.width,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var containerRef = (0, _react.useRef)(null);
@@ -72,6 +67,11 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       selectedOption = _useState4[0],
       setSelectedOption = _useState4[1];
 
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      filled = _useState6[0],
+      setFilled = _useState6[1];
+
   var inputRef = (0, _react.useRef)(null);
   (0, _react.useImperativeHandle)(ref, function () {
     return inputRef.current;
@@ -82,7 +82,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       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);
+      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', {
         bubbles: true
       });
@@ -90,44 +90,68 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
 
     setSelectedOption(option);
+    setFilled(option !== undefined);
     setOptionsMenuOpen(false);
-  }
+  } // Sets default value
+
 
   (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);
     }
-  }, []);
+  }, []); // Assures the option is selected throughout renders.
+
+  (0, _react.useEffect)(function () {
+    var _inputRef$current;
+
+    if (selectedOption === undefined || ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) !== options[selectedOption].value) {
+      var optionIndex = options.findIndex(function (c) {
+        var _inputRef$current2;
+
+        return c.value === ((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.value);
+      });
+      if (optionIndex > 0) selectOption(optionIndex);
+    }
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(S.SelectContainer, {
-      ref: containerRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SelectContainer, {
+      filled: filled || !!placeholder,
       alert: alert,
       disabled: !!rest.disabled,
+      width: width,
       tabIndex: rest.disabled ? -1 : 0,
       onFocus: function onFocus() {
         if (!rest.disabled) setOptionsMenuOpen(true);
       },
+      className: rest.className,
+      style: rest.style,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        ref: containerRef,
         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, {
+          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: selectedOption === undefined ? '' : options[selectedOption].label
+          children: options[selectedOption].label
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
           name: "chevron-down"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
+          children: !!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
               fontSize: "xxs",
               variant: "span",
@@ -135,7 +159,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
             })
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
+          children: !!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
               fontSize: "xxs",
               variant: "span",
@@ -150,10 +174,10 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         ref: inputRef,
         tabIndex: -1
       }, rest))]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionsModal, {
       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"),
+      top: "".concat((((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getBoundingClientRect().top) || 0) + 10, "px"),
       anchorX: "left",
       anchorY: "top",
       offsetY: "".concat((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getBoundingClientRect().height, "px"),
@@ -162,8 +186,14 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       onClose: function onClose() {
         return setOptionsMenuOpen(false);
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, {
-        children: options.map(function (option, i) {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.OptionsModalList, {
+        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)(_List.default, {
             item: true,
             onClick: function onClick() {
@@ -171,7 +201,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
             },
             children: option.label
           }, option.value);
-        })
+        })]
       })
     })]
   });

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

@@ -4,4 +4,17 @@ 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 OptionsModal: import("@emotion/styled").StyledComponent<import("../Modal/types").ModalProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const OptionsModalList: import("@emotion/styled").StyledComponent<import("../List/types").ListProps & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const OptionPlaceholder: import("@emotion/styled").StyledComponent<import("../List/types").ListProps & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
 //# 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,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,eAAe;;;gIAoK1B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,eAAe;;;gIAyL1B,CAAC;AAEH,eAAO,MAAM,YAAY;;UAKvB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;UAI3B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;UAI5B,CAAC"}

package/dist/components/Select/styles.js

@@ -3,20 +3,38 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SelectContainer = void 0;
+exports.SelectContainer = exports.OptionsModalList = exports.OptionsModal = exports.OptionPlaceholder = void 0;
 
 var _react = require("@emotion/react");
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _List = _interopRequireDefault(require("../List"));
+
+var _Modal = require("../Modal");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 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));
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    outline: none;\n\n    width: ", ";\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: 50%;\n        transform: translateY(-50%);\n\n        font-size: 1rem;\n        font-weight: 500;\n\n        color: ", ";\n\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\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 14px;\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 16px;\n\n          border-color: transparent;\n          left: -2px;\n          right: -2px;\n          top: -2px;\n          bottom: -2px;\n        }\n\n        & > legend {\n          display: ", ";\n\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      appearance: none;\n      border: 0;\n\n      width: 0px;\n      position: absolute;\n      opacity: 0;\n      pointer-events: none;\n    }\n  "])), typeof props.width === 'string' ? props.width : typeof props.width === 'number' ? "".concat(props.width, "px") : '100%', !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.filled && (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          left: 20px;\n          top: -1px;\n\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));
 });
 
-exports.SelectContainer = SelectContainer;
+exports.SelectContainer = SelectContainer;
+var OptionsModal = (0, _styled.default)(_Modal.Modal)(function (_ref) {
+  var theme = _ref.theme;
+  return (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    border: 2px solid ", ";\n    box-shadow: none;\n  "])), theme.colors.neutral.neutral1);
+});
+exports.OptionsModal = OptionsModal;
+var OptionsModalList = (0, _styled.default)(_List.default)(function () {
+  return (0, _react.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    border: none;\n  "])));
+});
+exports.OptionsModalList = OptionsModalList;
+var OptionPlaceholder = (0, _styled.default)(_List.default)(function (_ref2) {
+  var theme = _ref2.theme;
+  return (0, _react.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), theme.colors.neutral.neutral3);
+});
+exports.OptionPlaceholder = OptionPlaceholder;

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

@@ -11,6 +11,8 @@ export interface SelectProps {
 }
 export interface SelectContainerProps {
     alert?: SelectAlertType;
+    filled: boolean;
     disabled: boolean;
+    width?: string | number;
 }
 //# 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,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"}
+{"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,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB"}

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

@@ -5,6 +5,7 @@ export declare const StyledSpinner: import("@emotion/styled").StyledComponent<{
 } & import("./types").ISpinnerProps & {
     theme?: {
         fontSizes: {
+            tiny: string;
             xxxs: string;
             xxs: string;
             xs: string;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yGAwCzB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yGAwCzB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAkD,MAAM,OAAO,CAAC;AAsBjG,OAAO,EAAE,WAAW,EAAkB,MAAM,SAAS,CAAC;AAMtD,wBAAgB,KAAK,CAAC,EACpB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,MAAM,EACN,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,wBAAwB,CAAC,OAAO,CAAC,eA8LjD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAkD,MAAM,OAAO,CAAC;AAsBjG,OAAO,EAAE,WAAW,EAAkB,MAAM,SAAS,CAAC;AAMtD,wBAAgB,KAAK,CAAC,EACpB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,MAAM,EACN,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,wBAAwB,CAAC,OAAO,CAAC,eAsMjD"}

package/dist/components/Table/index.js

@@ -206,13 +206,23 @@ function Table(_ref) {
           }), header.map(function (label) {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                fontSize: "xxs",
+                color: "neutral.neutral5",
+                fontSize: "xxxs",
                 fontWeight: "600",
                 children: label
               })
             }, (0, _GenerateKey.generateKey)());
           })]
-        }), haveActions && /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {})]
+        }), haveActions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+            children: !selectedRows.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              color: "neutral.neutral5",
+              fontSize: "xxxs",
+              fontWeight: "600",
+              children: "A\xE7\xF5es"
+            })
+          })
+        })]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
       children: rowsWithKey.map(function (row) {
@@ -229,7 +239,7 @@ function Table(_ref) {
           }), row.items.map(function (cell) {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
               children: typeof cell === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                fontSize: "xxs",
+                fontSize: "xxxs",
                 fontWeight: "500",
                 children: cell
               }) : cell