@pedidopago/ui 1.2.5 → 1.3.0

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;;;+HAqBzB,CAAC;AAEH,eAAO,MAAM,YAAY;;;;UACjB,OAAO;;;yGA6Cb,CAAC;AAEH,eAAO,MAAM,OAAO;;;yGAelB,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    transform: ", ";\n\n    opacity: ", ";\n\n    pointer-events: ", ";\n\n    transition: opacity ease ", ";\n  "])), props.maxWidth, props.maxHeight, props.left, props.top, 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    z-index: ", ";\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, theme.zIndex.level24, 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\n    background: ", ";\n    opacity: 0;\n\n    transition: opacity ease ", ";\n  "])), 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,kJA8HX,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
       });
@@ -103,27 +103,37 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
   }, []);
   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", {
@@ -146,24 +156,38 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       }), !!helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
         fontSize: "xxs",
         children: helperText
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread({
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
         ref: inputRef,
         tabIndex: -1
-      }, rest))]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
+      }, rest), {}, {
+        onChange: function onChange(e) {
+          var _rest$onChange;
+
+          setFilled(!!e.currentTarget.value);
+          (_rest$onChange = rest.onChange) === null || _rest$onChange === void 0 ? void 0 : _rest$onChange.call(rest, e);
+        }
+      }))]
+    }), /*#__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"),
       maxWidth: "".concat((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.getBoundingClientRect().width, "px"),
       hideOverlay: true,
+      disableScrollOnOpen: false,
       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 +195,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/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Table/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,WAAW;;;uIAkGtB,CAAC;AAEH,eAAO,MAAM,cAAc;;;yGAG1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;0IA6DxB,CAAC;AAEH,eAAO,MAAM,eAAe;;;yGAE3B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;0IAiBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;yGAoB7B,CAAC;AAEF,eAAO,MAAM,eAAe;;;8HAyB3B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Table/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,WAAW;;;uIAsGtB,CAAC;AAEH,eAAO,MAAM,cAAc;;;yGAG1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;0IAoExB,CAAC;AAEH,eAAO,MAAM,eAAe;;;yGAE3B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;0IAiBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;yGAsB7B,CAAC;AAEF,eAAO,MAAM,eAAe;;;8HA6B3B,CAAC"}

package/dist/components/Table/styles.js

@@ -17,7 +17,28 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var StyledTable = _styled.default.table(function (props) {
   var theme = props.theme;
-  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-spacing: 0px;\n\n    & > thead {\n      & > tr {\n        height: 64px;\n\n        & > th {\n          border-top: 1px solid\n            ", ";\n          border-bottom: 1px solid\n            ", ";\n          padding-left: 16px;\n          padding-right: 16px;\n\n          text-align: left;\n\n          color: ", ";\n\n          &:first-of-type {\n            border-left: 1px solid\n              ", ";\n            border-radius: 8px 0px 0px 0px;\n          }\n\n          &:last-child {\n            border-right: 1px solid\n              ", ";\n            border-radius: 0px 8px 0px 0px;\n          }\n        }\n      }\n    }\n\n    & > tbody {\n      tr {\n        height: 64px;\n\n        &:not(:last-child) {\n          & > td {\n            border-bottom: 1px solid\n              ", ";\n          }\n        }\n\n        &:hover {\n          & > td {\n            background: ", ";\n\n            &:first-of-type {\n              border-radius: 4px 0px 0px 4px;\n            }\n\n            &:last-child {\n              border-radius: 0px 4px 4px 0px;\n            }\n          }\n        }\n\n        &:focus {\n          outline: 2px solid ", ";\n          border-radius: 4px;\n        }\n\n        &[data-selected='true'] {\n          & > td {\n            background: ", ";\n          }\n        }\n\n        & > td {\n          padding-left: 16px;\n          padding-right: 16px;\n\n          text-align: left;\n\n          color: ", ";\n        }\n      }\n    }\n  "])), theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral2, theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral2, theme.colors.neutral.neutral6, theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral2, theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral2, theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral2, theme.colorMode === 'dark' ? theme.colors.neutral.neutral6 : theme.colors.neutral.neutral1, theme.colors.primary.focus, theme.colorMode === 'dark' ? theme.colors.neutral.neutral6 : theme.colors.neutral.neutral1, theme.colors.neutral.neutral5);
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-spacing: 0px;\n\n    & > thead {\n      & > tr {\n        height: 64px;\n\n        & > th {\n          background: hsla(156, 13%, 92%, 0.5);\n          border-top: 1px solid\n            ", ";\n          border-bottom: 1px solid\n            ", ";\n          padding-left: 16px;\n          padding-right: 16px;\n          text-align: left;\n          * {\n            color: #587169;\n            font-size: ", ";\n          }\n\n          &:first-of-type {\n            border-left: 1px solid\n              ", ";\n            border-radius: 4px 0px 0px 4px;\n          }\n\n          &:last-child {\n            border-right: 1px solid\n              ", ";\n            border-radius: 0px 4px 4px 0px;\n          }\n        }\n      }\n    }\n\n    & > tbody {\n      tr {\n        height: 64px;\n\n        &:not(:last-child) {\n          & > td {\n            border-bottom: 1px solid\n              ", ";\n          }\n        }\n\n        &:hover {\n          & > td {\n            background: ", ";\n\n            &:first-of-type {\n              border-radius: 4px 0px 0px 4px;\n            }\n\n            &:last-child {\n              border-radius: 0px 4px 4px 0px;\n            }\n          }\n        }\n\n        &:focus {\n          outline: 2px solid ", ";\n          border-radius: 4px;\n        }\n\n        &[data-selected='true'] {\n          & > td {\n            background: ", ";\n          }\n        }\n\n        & > td {\n          padding-left: 16px;\n          padding-right: 16px;\n\n          text-align: left;\n\n          color: ", ";\n        }\n      }\n    }\n  "])), {
+    dark: theme.colors.neutral.neutral5,
+    light: theme.colors.neutral.neutral2
+  }[theme.colorMode], {
+    dark: theme.colors.neutral.neutral5,
+    light: theme.colors.neutral.neutral2
+  }[theme.colorMode], theme.fontSizes.xxxs, {
+    dark: theme.colors.neutral.neutral5,
+    light: theme.colors.neutral.neutral2
+  }[theme.colorMode], {
+    dark: theme.colors.neutral.neutral5,
+    light: theme.colors.neutral.neutral2
+  }[theme.colorMode], {
+    dark: theme.colors.neutral.neutral5,
+    light: theme.colors.neutral.neutral2
+  }[theme.colorMode], {
+    dark: theme.colors.neutral.neutral6,
+    light: theme.colors.neutral.neutral1
+  }[theme.colorMode], theme.colors.primary.focus, {
+    dark: theme.colors.neutral.neutral6,
+    light: theme.colors.neutral.neutral1
+  }[theme.colorMode], theme.colors.neutral.neutral5);
 });
 
 exports.StyledTable = StyledTable;
@@ -28,7 +49,22 @@ exports.SelectedHeader = SelectedHeader;
 
 var ActionsButton = _styled.default.button(function (props) {
   var theme = props.theme;
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    appearance: none;\n    font-family: inherit;\n\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    margin: 0px -2px 0px 0px;\n    outline: none;\n    border: 2px solid\n      ", ";\n    padding: 0px 24px;\n\n    height: 44px;\n\n    white-space: nowrap;\n\n    color: ", ";\n    background: ", ";\n\n    transition: background-color linear ", ";\n\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:first-of-type {\n      color: ", ";\n      border-radius: 8px 0px 0px 8px;\n    }\n\n    &:last-of-type {\n      border-radius: 0px 8px 8px 0px;\n    }\n\n    &:only-child {\n      border-radius: 8px;\n    }\n\n    &:hover,\n    &:focus {\n      z-index: 1;\n\n      border-color: ", ";\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  "])), theme.colorMode === 'dark' ? theme.colors.neutral.neutral4 : theme.colors.neutral.neutral2, theme.colors.neutral.neutral5, theme.colorMode === 'dark' ? theme.colors.neutral.black : theme.colors.neutral.white, theme.transition.speed, theme.colors.neutral.black, theme.colorMode === 'dark' ? theme.colors.neutral.neutral4 : theme.colors.neutral.neutral3, theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral1, theme.colorMode === 'dark' ? theme.colors.neutral.neutral4 : theme.colors.neutral.neutral2);
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    appearance: none;\n    font-family: inherit;\n\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    margin: 0px -2px 0px 0px;\n    outline: none;\n    border: 2px solid\n      ", ";\n    padding: 0px 24px;\n\n    height: 44px;\n\n    white-space: nowrap;\n\n    color: ", ";\n    background: ", ";\n\n    transition: background-color linear ", ";\n\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:first-of-type {\n      color: ", ";\n      border-radius: 8px 0px 0px 8px;\n    }\n\n    &:last-of-type {\n      border-radius: 0px 8px 8px 0px;\n    }\n\n    &:only-child {\n      border-radius: 8px;\n    }\n\n    &:hover,\n    &:focus {\n      z-index: 1;\n\n      border-color: ", ";\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  "])), {
+    dark: theme.colors.neutral.neutral4,
+    light: theme.colors.neutral.neutral2
+  }[theme.colorMode], theme.colors.neutral.neutral5, {
+    dark: theme.colors.neutral.black,
+    light: theme.colors.neutral.white
+  }[theme.colorMode], theme.transition.speed, theme.colors.neutral.black, {
+    dark: theme.colors.neutral.neutral4,
+    light: theme.colors.neutral.neutral3
+  }[theme.colorMode], {
+    dark: theme.colors.neutral.neutral5,
+    light: theme.colors.neutral.neutral1
+  }[theme.colorMode], {
+    dark: theme.colors.neutral.neutral4,
+    light: theme.colors.neutral.neutral2
+  }[theme.colorMode]);
 });
 
 exports.ActionsButton = ActionsButton;
@@ -47,8 +83,12 @@ exports.VerticalPointsButton = VerticalPointsButton;
 
 var MenuItemContainer = _styled.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: ", ";\n  position: absolute;\n  border-radius: 8px;\n  background-color: ", ";\n  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);\n  right: ", "px;\n  top: ", "px;\n  padding: 10px;\n\n  z-index: ", ";\n"])), function (props) {
   return props.isOpen ? 'block' : 'none';
-}, function (props) {
-  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral5 : props.theme.colors.neutral.white;
+}, function (_ref) {
+  var theme = _ref.theme;
+  return {
+    dark: theme.colors.neutral.neutral6,
+    light: theme.colors.neutral.neutral1
+  }[theme.colorMode];
 }, function (props) {
   return props.posRight ? props.posRight : 0;
 }, function (props) {
@@ -59,12 +99,20 @@ var MenuItemContainer = _styled.default.div(_templateObject6 || (_templateObject
 
 exports.MenuItemContainer = MenuItemContainer;
 
-var MenuItemContent = _styled.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  border-radius: 8px;\n  padding: 10px 35px;\n  cursor: pointer;\n  user-select: none;\n  font-size: 1rem;\n  white-space: nowrap;\n\n  color: ", ";\n\n  transition: background linear ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) {
-  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.black;
+var MenuItemContent = _styled.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  border-radius: 8px;\n  padding: 10px 35px;\n  cursor: pointer;\n  user-select: none;\n  font-size: 1rem;\n  white-space: nowrap;\n\n  color: ", ";\n\n  transition: background linear ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    dark: theme.colors.neutral.white,
+    light: theme.colors.neutral.black
+  }[theme.colorMode];
 }, function (props) {
   return props.theme.transition.speed;
-}, function (props) {
-  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral4 : props.theme.colors.neutral.neutral1;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    dark: theme.colors.neutral.neutral4,
+    light: theme.colors.neutral.neutral1
+  }[theme.colorMode];
 });
 
 exports.MenuItemContent = MenuItemContent;

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

@@ -8,6 +8,7 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     size?: string | undefined;
     theme?: {
         fontSizes: {
+            tiny: string;
             xxxs: string;
             xxs: string;
             xs: string;
@@ -294,6 +295,7 @@ export declare const Text: import("@emotion/styled").StyledComponent<{
 } & {
     theme?: {
         fontSizes: {
+            tiny: string;
             xxxs: string;
             xxs: string;
             xs: string;
@@ -582,6 +584,7 @@ export declare const Close: import("@emotion/styled").StyledComponent<{
 } & {
     theme?: {
         fontSizes: {
+            tiny: string;
             xxxs: string;
             xxs: string;
             xs: string;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yGAoBnB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAGN,OAAO;2GASjB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qHA2BjB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yGAoBnB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAGN,OAAO;2GASjB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qHA2BjB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAOtC,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,WAAW,CAsF5B,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,WAAW,CAoF5B,CAAC;AAEF,eAAe,OAAO,CAAC"}