@pedidopago/ui 1.1.3 → 1.2.0

package/dist/components/Input/styles.js

@@ -9,20 +9,48 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _react = require("@emotion/react");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
+var _getColorValue = require("../../utils/getColorValue");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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); }
+
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var InputGroupElement = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 8px;\n  border-radius: ", ";\n  font-weight: ", ";\n\n  transition: all 0.2s ease-in-out;\n\n  &:hover fieldset {\n    border-color: ", ";\n  }\n\n  &:hover > div > div:first-of-type {\n    border-color: ", ";\n  }\n\n  &:focus-within > div > div:first-of-type {\n    background: ", ";\n    border-color: ", ";\n  }\n\n  &:focus-within > div > div:first-of-type span {\n    color: ", ";\n  }\n\n  &:focus-within {\n    border-radius: 2px solid ", ";\n  }\n\n  &:focus-within > div {\n    box-shadow: 0 0 0 2px\n      ", ";\n  }\n\n  &:focus-within label {\n    transform: translate(19px, -11px) scale(0.8);\n    background-color: ", ";\n    background-color: ", ";\n    height: 16px;\n  }\n\n  &:focus-within fieldset {\n    border-width: 2px;\n    border-color: ", ";\n  }\n\n  ", "\n\n  & label {\n    transform: ", ";\n\n    ", "\n  }\n"])), function (props) {
+var InputGroupElement = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 8px;\n  border-radius: ", ";\n  font-weight: ", ";\n\n  transition: all 0.2s ease-in-out;\n\n  &:hover fieldset {\n    border-color: ", ";\n  }\n\n  &:hover > div > div:first-of-type {\n    border-color: ", ";\n  }\n\n  &:focus-within > div > div:first-of-type {\n    background: ", ";\n    border-color: ", ";\n  }\n\n  &:focus-within > div > div:first-of-type span {\n    color: ", ";\n  }\n\n  &:focus-within {\n    border-radius: 2px solid ", ";\n  }\n\n  &:focus-within > div {\n    box-shadow: 0 0 0 2px\n      ", ";\n  }\n\n  &:focus-within label {\n    transform: translate(19px, -11px) scale(0.8);\n\n    background-color: ", ";\n    height: 16px;\n  }\n\n  &:focus-within fieldset {\n    border-width: 2px;\n    border-color: ", ";\n  }\n\n  ", "\n\n  & label {\n    transform: ", ";\n\n    background-color: ", ";\n\n    height: ", ";\n  }\n"])), function (props) {
   return props.theme.borderRadius.default;
 }, function (props) {
   return props.theme.fontWeight[400];
-}, function (props) {
-  return !props.alert && props.theme.colors.primary.hover;
-}, function (props) {
-  return props.hasDisabled || props.alert ? 'auto' : props.theme.colors.primary.hover;
+}, function (_ref) {
+  var theme = _ref.theme,
+      alert = _ref.alert,
+      hasDisabled = _ref.hasDisabled;
+
+  if (alert && !hasDisabled) {
+    return theme.colors[alert].default + '66';
+  }
+
+  if (hasDisabled) {
+    return 'none';
+  }
+
+  return theme.colors.primary.hover;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      alert = _ref2.alert,
+      hasDisabled = _ref2.hasDisabled;
+
+  if (alert && !hasDisabled) {
+    return theme.colors[alert].default + '66';
+  }
+
+  if (hasDisabled) {
+    return 'none';
+  }
+
+  return theme.colors.primary.hover;
 }, function (props) {
   return !props.alert && props.withAddon && props.theme.colors.primary.disabled;
 }, function (props) {
@@ -34,9 +62,18 @@ var InputGroupElement = _styled.default.div(_templateObject || (_templateObject
 }, function (props) {
   return props.alert ? props.theme.colorMode === 'dark' ? props.theme.colors[props.alert].dark : props.theme.colors[props.alert].blurred : props.theme.colors.primary.disabled;
 }, function (props) {
-  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.black : props.theme.colors.body.light;
-}, function (props) {
-  return props.labelBackground && props.labelBackground[props.theme.colorMode] || (props.theme.colorMode === 'dark' ? props.theme.colors.neutral.black : props.theme.colors.body.light);
+  if (props.labelBackground) {
+    if (_typeof(props.labelBackground) === 'object') {
+      return (0, _getColorValue.getColorValue)(props.labelBackground[props.theme.colorMode] || '', props.theme, '#fff');
+    }
+
+    return (0, _getColorValue.getColorValue)(props.labelBackground || '', props.theme, '#fff');
+  }
+
+  return {
+    dark: props.theme.colors.neutral.black,
+    light: props.theme.colors.neutral.white
+  }[props.theme.colorMode];
 }, function (props) {
   return !props.alert && props.theme.colors.primary.hover;
 }, function (props) {
@@ -44,29 +81,45 @@ var InputGroupElement = _styled.default.div(_templateObject || (_templateObject
 }, function (props) {
   return props.hasValueOnInput ? 'translate(19px, -11px) scale(0.8) !important' : 'translate(20px, calc(100% - 10px))';
 }, function (props) {
-  return props.hasValueOnInput && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        background-color: ", ";\n\n        background-color: ", ";\n        height: 16px;\n      "])), props.theme.colorMode === 'dark' ? props.theme.colors.neutral.black : props.theme.colors.body.light, props.labelBackground && props.labelBackground[props.theme.colorMode] || (props.theme.colorMode === 'dark' ? props.theme.colors.neutral.black : props.theme.colors.body.light));
+  if (!props.hasValueOnInput) return 'unset';
+
+  if (props.labelBackground) {
+    if (_typeof(props.labelBackground) === 'object') {
+      return (0, _getColorValue.getColorValue)(props.labelBackground[props.theme.colorMode] || '', props.theme, '#fff');
+    }
+
+    return (0, _getColorValue.getColorValue)(props.labelBackground || '', props.theme, '#fff');
+  }
+
+  return {
+    dark: props.theme.colors.neutral.black,
+    light: props.theme.colors.neutral.white
+  }[props.theme.colorMode];
+}, function (_ref3) {
+  var hasValueOnInput = _ref3.hasValueOnInput;
+  return hasValueOnInput ? '16px' : 'unset';
 });
 
 exports.InputGroupElement = InputGroupElement;
 
-var InputColumn = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n  align-items: center;\n  border-radius: ", ";\n\n  width: 100%;\n  min-height: 50px;\n"])), function (props) {
+var InputColumn = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n  align-items: center;\n  border-radius: ", ";\n\n  width: 100%;\n  min-height: 52px;\n"])), function (props) {
   return props.theme.borderRadius.default;
 });
 
 exports.InputColumn = InputColumn;
 
-var InputContent = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n  grid-column: ", ";\n  height: 100%;\n"])), function (props) {
+var InputContent = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n  grid-column: ", ";\n  height: 100%;\n"])), function (props) {
   return props.withAddon ? '2 / end' : '1 / end';
 });
 
 exports.InputContent = InputContent;
 
-var InputContentRow = _styled.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  height: 100%;\n"])));
+var InputContentRow = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  height: 100%;\n"])));
 
 exports.InputContentRow = InputContentRow;
 
-var InputIcon = _styled.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: ", ";\n  display: flex;\n  margin: auto;\n  padding: 0 20px;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  color: ", ";\n"])), function (props) {
-  return props.theme.zIndex.level2;
+var InputIcon = _styled.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: ", ";\n  display: flex;\n  margin: auto;\n  padding: 0 20px;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  color: ", ";\n"])), function (props) {
+  return props.theme.zIndex.level1;
 }, function (props) {
   return props.clickable ? 'pointer' : 'default';
 }, function (props) {
@@ -75,7 +128,7 @@ var InputIcon = _styled.default.div(_templateObject7 || (_templateObject7 = _tag
 
 exports.InputIcon = InputIcon;
 
-var Input = _styled.default.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: ", ";\n  flex: 1;\n  height: 100%;\n  border: none;\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  font-family: inherit;\n  outline: none;\n  font-size: ", ";\n  background-color: transparent;\n  position: relative;\n  z-index: ", ";\n"])), function (props) {
+var Input = _styled.default.input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: ", ";\n  flex: 1;\n  height: 100%;\n  border: none;\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  font-family: inherit;\n  outline: none;\n  font-size: ", ";\n  background-color: transparent;\n  position: relative;\n  z-index: ", ";\n"])), function (props) {
   return props.withIcon ? props.hiddenContent ? '0 0' : '0 20px 0 0' : props.hiddenContent ? '0 0 0 20px' : '0 20px';
 }, function (props) {
   return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.black;
@@ -89,7 +142,7 @@ var Input = _styled.default.input(_templateObject8 || (_templateObject8 = _tagge
 
 exports.Input = Input;
 
-var InputLabel = _styled.default.label(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  top: 0;\n  left: 0;\n  height: auto;\n  padding: 0 6px;\n  position: absolute;\n  z-index: ", ";\n  pointer-events: none;\n  color: ", ";\n  background-color: transparent;\n  transition: transform 0.2s ease, background-color 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);\n"])), function (props) {
+var InputLabel = _styled.default.label(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  top: 0;\n  left: 0;\n  height: auto;\n  padding: 0 6px;\n  position: absolute;\n  z-index: ", ";\n  pointer-events: none;\n  color: ", ";\n  background-color: transparent;\n  transition: transform 0.2s ease, background-color 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);\n"])), function (props) {
   return props.theme.zIndex.level1;
 }, function (props) {
   return props.hasDisabled ? props.theme.colors.neutral.neutral3 : props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.black;
@@ -97,39 +150,56 @@ var InputLabel = _styled.default.label(_templateObject9 || (_templateObject9 = _
 
 exports.InputLabel = InputLabel;
 
-var Fieldset = _styled.default.fieldset(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  margin: 0;\n  top: 0;\n  pointer-events: none;\n  padding: 0 17px;\n  overflow: hidden;\n\n  ", "\n\n  border-radius: ", ";\n  border: 2px solid\n    ", ";\n  border-left: ", ";\n\n  transition: all 0.2s ease;\n"])), function (_ref) {
-  var alert = _ref.alert,
-      theme = _ref.theme,
-      hasDisabled = _ref.hasDisabled;
+var Fieldset = _styled.default.fieldset(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  margin: 0;\n  top: 0;\n  pointer-events: none;\n  padding: 0 17px;\n  overflow: hidden;\n\n  background-color: ", ";\n\n  border-radius: ", ";\n  border: 2px solid\n    ", ";\n  border-left: ", ";\n\n  transition: all 0.2s ease;\n"])), function (_ref4) {
+  var alert = _ref4.alert,
+      theme = _ref4.theme,
+      hasDisabled = _ref4.hasDisabled;
 
   if (alert && !hasDisabled) {
-    return (0, _react.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        background-color: ", ";\n      "])), theme.colorMode === 'dark' ? theme.colors[alert].dark : theme.colors[alert].blurred);
+    return {
+      light: theme.colors[alert].blurred,
+      dark: theme.colors[alert].dark
+    }[theme.colorMode];
   }
 
   if (hasDisabled) {
-    return (0, _react.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        background-color: ", ";\n      "])), theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral1);
+    return {
+      light: theme.colors.neutral.neutral1,
+      dark: theme.colors.neutral.neutral4
+    }[theme.colorMode];
   }
 
-  return (0, _react.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      background-color: 'transparent';\n    "])));
+  return 'transparent';
 }, function (props) {
   return props.withAddon ? "0 ".concat(props.theme.borderRadius.default, " ").concat(props.theme.borderRadius.default, " 0") : props.theme.borderRadius.default;
-}, function (props) {
-  return props.hasDisabled ? "".concat(props.theme.colors.neutral.neutral2, " !important") : props.alert ? "".concat(props.theme.colors[props.alert].default) : props.theme.colors.neutral.neutral2;
+}, function (_ref5) {
+  var theme = _ref5.theme,
+      hasDisabled = _ref5.hasDisabled,
+      alert = _ref5.alert;
+
+  if (alert && !hasDisabled) {
+    return theme.colors[alert].default;
+  }
+
+  return {
+    light: theme.colors.neutral.neutral2,
+    dark: theme.colors.neutral.neutral5
+  }[theme.colorMode];
 }, function (props) {
   return props.withAddon ? 'none !important' : 'auto';
 });
 
 exports.Fieldset = Fieldset;
 
-var Legend = _styled.default.legend(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  padding: 0;\n  width: auto;\n  max-width: 0.01px;\n  font-size: 14px;\n  height: 0px;\n  visibility: hidden;\n  transition: all 0.1s;\n"])));
+var Legend = _styled.default.legend(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  padding: 0;\n  width: auto;\n  max-width: 0.01px;\n  font-size: 14px;\n  height: 0px;\n  visibility: hidden;\n  transition: all 0.1s;\n"])));
 
 exports.Legend = Legend;
 
-var LegendText = _styled.default.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  padding: 0 2px;\n  display: inline-block;\n  visibility: hidden;\n"])));
+var LegendText = _styled.default.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  padding: 0 2px;\n  display: inline-block;\n  visibility: hidden;\n"])));
 
 exports.LegendText = LegendText;
 
-var HelperText = _styled.default.span(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  font-size: ", ";\n\n  color: ", ";\n  padding: 0 20px;\n"])), function (props) {
+var HelperText = _styled.default.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  font-size: ", ";\n\n  color: ", ";\n  padding: 0 20px;\n"])), function (props) {
   return props.theme.fontSizes.xxs;
 }, function (props) {
   return props.alert && props.alert !== 'success' ? props.theme.colors[props.alert].default : props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral2 : props.theme.colors.neutral.neutral4;
@@ -137,8 +207,35 @@ var HelperText = _styled.default.span(_templateObject16 || (_templateObject16 =
 
 exports.HelperText = HelperText;
 
-var AddonElement = _styled.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  padding: 0 20px;\n  height: 100%;\n\n  background-color: ", ";\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  border: 2px solid transparent;\n  border-right: none;\n\n  border-radius: ", " 0 0\n    ", ";\n"])), function (props) {
-  return props.alert && !props.hasDisabled ? props.theme.colors[props.alert].default : props.theme.colors.neutral.neutral3;
+var AddonElement = _styled.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  padding: 0 20px;\n  height: 100%;\n\n  background-color: ", ";\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  border: 2px solid\n    ", ";\n  border-right: none;\n\n  border-radius: ", " 0 0\n    ", ";\n"])), function (props) {
+  if (props.alert && !props.hasDisabled) {
+    return props.theme.colors[props.alert].default;
+  }
+
+  if (props.hasDisabled) {
+    return {
+      light: props.theme.colors.neutral.neutral2,
+      dark: props.theme.colors.neutral.neutral5
+    }[props.theme.colorMode];
+  }
+
+  return {
+    light: props.theme.colors.neutral.neutral1,
+    dark: props.theme.colors.neutral.neutral6
+  }[props.theme.colorMode];
+}, function (_ref6) {
+  var theme = _ref6.theme,
+      hasDisabled = _ref6.hasDisabled,
+      alert = _ref6.alert;
+
+  if (alert && !hasDisabled) {
+    return theme.colors[alert].default;
+  }
+
+  return {
+    light: theme.colors.neutral.neutral2,
+    dark: theme.colors.neutral.neutral5
+  }[theme.colorMode];
 }, function (props) {
   return props.theme.borderRadius.default;
 }, function (props) {
@@ -147,10 +244,13 @@ var AddonElement = _styled.default.div(_templateObject17 || (_templateObject17 =
 
 exports.AddonElement = AddonElement;
 
-var AddonContent = _styled.default.span(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  color: ", ";\n"])), function (props) {
+var AddonContent = _styled.default.span(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  color: ", ";\n"])), function (props) {
   return props.theme.fontSizes.xs;
 }, function (props) {
-  return props.theme.colors.neutral.white;
+  return {
+    light: props.theme.colors.neutral.black,
+    dark: props.theme.colors.neutral.white
+  }[props.theme.colorMode];
 });
 
 exports.AddonContent = AddonContent;

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

@@ -1,27 +1,27 @@
-import { ReactNode } from 'react';
-export declare type IInputProps = {
-    disabled?: boolean;
-    isLoading?: boolean;
-    withIcon?: ReactNode;
-    hiddenContent?: boolean;
-    helperText?: string;
-    withAddon?: boolean;
-    addonContent?: string;
-    alert?: 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
-};
-export declare type IIInputComponentProps = IInputProps & {
-    hasValueOnInput: boolean;
-    labelBackground?: {
-        dark: string;
-        light: string;
-    };
-};
-export declare type IInputGroupProps = IInputProps & {
-    label?: string;
-    labelBackground?: {
-        dark: string;
-        light: string;
-    };
-    placeholder?: string;
-};
+import { HTMLAttributes, ReactNode } from 'react';
+export declare type InputAlertTypes = 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
+export interface InputProps extends HTMLAttributes<HTMLInputElement> {
+    disabled?: boolean;
+    withIcon?: ReactNode;
+    hiddenContent?: boolean;
+    helperText?: string;
+    withAddon?: boolean;
+    addonContent?: string;
+    alert?: InputAlertTypes;
+}
+export interface InputComponentProps extends InputProps {
+    hasValueOnInput: boolean;
+    labelBackground?: {
+        dark: string;
+        light: string;
+    } | string;
+}
+export interface InputGroupProps extends InputProps {
+    label?: string;
+    labelBackground?: {
+        dark: string;
+        light: string;
+    } | string;
+    placeholder?: string;
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Input/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,oBAAY,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EACF,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;CACzB,CAAC;AAEF,oBAAY,qBAAqB,GAAG,WAAW,GAAG;IAChD,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CACnD,CAAC;AAEF,oBAAY,gBAAgB,GAAG,WAAW,GAAG;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Input/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,oBAAY,eAAe,GACvB,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;AAExB,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB;AAED,MAAM,WAAW,mBAAoB,SAAQ,UAAU;IACrD,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,MAAM,CAAC;CAC5D;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,MAAM,CAAC;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}

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

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

package/dist/components/Label/input.test.d.ts

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

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

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

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

@@ -1,17 +1,17 @@
-import { ExtendThemeProps } from '../../shared/theme';
-import { IconName } from '../Icon/types';
-export declare type IStyleProps = {
-    theme?: ExtendThemeProps;
-    disabled?: boolean;
-    isActive?: boolean;
-    backgroundColor?: string;
-    color?: string;
-};
-export declare type IInputProps = {
-    LabelType?: 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
-    Icon?: IconName;
-    Label?: string;
-    IconSide?: 'left' | 'right';
-    Color?: string;
-};
+import { ExtendThemeProps } from '../../shared/theme';
+import { IconName } from '../Icon/types';
+export declare type IStyleProps = {
+    theme?: ExtendThemeProps;
+    disabled?: boolean;
+    isActive?: boolean;
+    backgroundColor?: string;
+    color?: string;
+};
+export declare type IInputProps = {
+    LabelType?: 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
+    Icon?: IconName;
+    Label?: string;
+    IconSide?: 'left' | 'right';
+    Color?: string;
+};
 //# sourceMappingURL=types.d.ts.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,cAAc,CAS5B,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAWvB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/List/index.js

@@ -9,7 +9,7 @@ var _styles = require("./styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["title", "item", "maxHeight", "children"];
+var _excluded = ["title", "item", "maxHeight", "onClick", "children"];
 
 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; }
 
@@ -25,13 +25,18 @@ var List = function List(_ref) {
   var title = _ref.title,
       item = _ref.item,
       maxHeight = _ref.maxHeight,
+      onClick = _ref.onClick,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return item ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledListItem, _objectSpread(_objectSpread({}, rest), {}, {
+  return item ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledListItem, _objectSpread(_objectSpread({
+    tabIndex: 0,
+    onClick: onClick
+  }, rest), {}, {
     children: children
-  })) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StyledList, _objectSpread(_objectSpread({}, rest), {}, {
-    maxHeight: maxHeight,
+  })) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StyledList, _objectSpread(_objectSpread({
+    maxHeight: maxHeight
+  }, rest), {}, {
     children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledListTitle, {
       children: title
     }), children]

package/dist/components/List/list.test.d.ts

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

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

@@ -1,16 +1,16 @@
-/// <reference types="react" />
-import { GenericStyledProps } from '../../@types';
-import { IListComponent } from './types';
-export declare const StyledList: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IListComponent & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
-export declare const StyledListItem: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
-export declare const StyledListTitle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+/// <reference types="react" />
+import { GenericStyledProps } from '../../@types';
+import { ListProps } from './types';
+export declare const StyledList: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ListProps & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const StyledListItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const StyledListTitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/List/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,eAAO,MAAM,UAAU;;;mJA6BrB,CAAC;AAEH,eAAO,MAAM,cAAc;;;8HAsBzB,CAAC;AAEH,eAAO,MAAM,eAAe;;;sIAW1B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/List/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,eAAO,MAAM,UAAU;;;8IAiCrB,CAAC;AAEH,eAAO,MAAM,cAAc;;;8HAkCzB,CAAC;AAEH,eAAO,MAAM,eAAe;;;sIAiB1B,CAAC"}

package/dist/components/List/styles.js

@@ -16,19 +16,25 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 var StyledList = _styled.default.ul(function (props) {
-  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    list-style: none;\n    padding: ", ";\n    margin: 0;\n\n    border-radius: ", ";\n    border: 2px solid ", ";\n    box-sizing: border-box;\n\n    ", ";\n  "])), props.theme.spacingest.xs, props.theme.borderRadius.default, props.theme.colors.neutral.neutral1, props.maxHeight && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      max-height: ", ";\n      overflow-y: auto;\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    "])), props.theme.spacing[props.maxHeight], props.theme.borderRadius.default, props.theme.colors.primary.default));
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    list-style: none;\n    padding: 8px 0;\n    margin: 0;\n\n    border-radius: ", ";\n    border: 2px solid\n      ", ";\n    box-sizing: border-box;\n\n    ", ";\n  "])), props.theme.borderRadius.default, {
+    light: props.theme.colors.neutral.neutral2,
+    dark: props.theme.colors.neutral.neutral5
+  }[props.theme.colorMode], props.maxHeight && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      max-height: ", ";\n      overflow-y: auto;\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    "])), props.maxHeight, props.theme.borderRadius.default, props.theme.colors.primary.default));
 });
 
 exports.StyledList = StyledList;
 
 var StyledListItem = _styled.default.li(function (props) {
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    box-sizing: border-box;\n    color: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n    padding: ", ";\n\n    & > svg:first-of-type {\n      margin-right: ", ";\n    }\n\n    & > svg:last-of-type:not(:first-of-type) {\n      margin-left: ", ";\n    }\n\n    &:hover {\n      background: rgba(0, 0, 0, 0.03);\n    }\n  "])), props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral2 : props.theme.colors.neutral.neutral5, props.theme.fontWeight['500'], props.theme.fontSizes.xs, props.theme.spacingest.xs, props.theme.spacing.xxxs, props.theme.spacing.xxxs);
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    box-sizing: border-box;\n\n    outline: none;\n    padding: 16px 32px;\n\n    font-weight: ", ";\n    font-size: ", ";\n\n    color: ", ";\n\n    background: transparent;\n\n    transition: background-color ease;\n    transition-duration: ", ";\n\n    cursor: pointer;\n\n    & > svg:first-of-type {\n      margin-right: ", ";\n    }\n\n    & > svg:last-of-type:not(:first-of-type) {\n      margin-left: ", ";\n    }\n\n    &:hover,\n    &:focus {\n      background: ", ";\n    }\n  "])), props.theme.fontWeight['500'], props.theme.fontSizes.xs, props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral2 : props.theme.colors.neutral.neutral5, props.theme.transition.speed, props.theme.spacing.xxxs, props.theme.spacing.xxxs, props.theme.colors.neutral.neutral1);
 });
 
 exports.StyledListItem = StyledListItem;
 
 var StyledListTitle = _styled.default.h3(function (props) {
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    margin: 0;\n    color: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n    padding: ", ";\n    border-bottom: 2px solid ", ";\n  "])), props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral2 : props.theme.colors.neutral.neutral5, props.theme.fontWeight['500'], props.theme.fontSizes.xs, props.theme.spacingest.xs, props.theme.colors.neutral.neutral1);
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    margin: 0 0 8px 0;\n    border-bottom: 2px solid\n      ", ";\n    padding: ", ";\n\n    color: ", ";\n\n    font-weight: ", ";\n    font-size: ", ";\n  "])), {
+    light: props.theme.colors.neutral.neutral2,
+    dark: props.theme.colors.neutral.neutral5
+  }[props.theme.colorMode], props.theme.spacingest.xs, props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral2 : props.theme.colors.neutral.neutral5, props.theme.fontWeight['500'], props.theme.fontSizes.xs);
 });
 
 exports.StyledListTitle = StyledListTitle;

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

@@ -1,7 +1,8 @@
-import { ExtendThemeProps } from 'src';
-export declare type IListComponent = {
-    title?: string;
-    maxHeight?: keyof ExtendThemeProps['spacing'];
-    item?: boolean;
-};
+import { MouseEventHandler } from 'react';
+export interface ListProps {
+    title?: string;
+    maxHeight?: string;
+    item?: boolean;
+    onClick?: MouseEventHandler;
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/List/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAEvC,oBAAY,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/List/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B"}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { IModalProps } from './types';
-export declare function Modal({ open, left, top, anchorX, anchorY, offsetX, offsetY, maxWidth, onClose, children, }: IModalProps): JSX.Element;
+/// <reference types="react" />
+import { IModalProps } from './types';
+export declare function Modal({ open, left, top, anchorX, anchorY, offsetX, offsetY, hideScrollBar, hideOverlay, maxWidth, maxHeight, onClose, children, }: IModalProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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":";AAKA,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,QAAQ,EACR,OAAO,EACP,QAAQ,GACT,EAAE,WAAW,eA2Eb"}
+{"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"}

package/dist/components/Modal/index.js

@@ -5,13 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Modal = Modal;
 
+var _useDisableBodyScroll = require("src/shared/hooks/useDisableBodyScroll");
+
 var _useKeyPress = require("../../shared/hooks/useKeyPress");
 
 var _styles = require("./styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-// Styles
 function Modal(_ref) {
   var open = _ref.open,
       _ref$left = _ref.left,
@@ -26,7 +27,12 @@ function Modal(_ref) {
       offsetX = _ref$offsetX === void 0 ? '0px' : _ref$offsetX,
       _ref$offsetY = _ref.offsetY,
       offsetY = _ref$offsetY === void 0 ? '0px' : _ref$offsetY,
+      _ref$hideScrollBar = _ref.hideScrollBar,
+      hideScrollBar = _ref$hideScrollBar === void 0 ? false : _ref$hideScrollBar,
+      _ref$hideOverlay = _ref.hideOverlay,
+      hideOverlay = _ref$hideOverlay === void 0 ? false : _ref$hideOverlay,
       maxWidth = _ref.maxWidth,
+      maxHeight = _ref.maxHeight,
       onClose = _ref.onClose,
       children = _ref.children;
   // TODO
@@ -36,6 +42,7 @@ function Modal(_ref) {
   (0, _useKeyPress.useKeyPress)('Escape', function () {
     return onClose && onClose();
   });
+  (0, _useDisableBodyScroll.useDisableBodyScroll)(open);
 
   function getAnchorTranslate() {
     var percentageX = 0;
@@ -90,7 +97,7 @@ function Modal(_ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, {
       style: {
         // display: open ? 'block' : 'none',
-        opacity: open ? 0.1 : 0,
+        opacity: open && !hideOverlay ? 0.1 : 0,
         pointerEvents: open ? 'auto' : 'none'
       },
       onClick: function onClick() {
@@ -105,6 +112,8 @@ function Modal(_ref) {
         pointerEvents: open ? 'auto' : 'none'
       },
       maxWidth: maxWidth,
+      maxHeight: maxHeight,
+      hideScrollBar: hideScrollBar,
       children: children
     })]
   });