@pedidopago/ui 1.3.2 → 1.3.5

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAa3B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CA6BzB,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAa3B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAoCzB,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Alert/index.js

@@ -28,7 +28,7 @@ var Alert = function Alert(_ref) {
       variant = _ref$variant === void 0 ? 'filled' : _ref$variant;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledAlertContainer, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StyledAlertWrapper, {
-      haveContent: !!content,
+      haveContent: !!content && !!title,
       variant: variant,
       type: type,
       maxWidth: maxWidth,
@@ -41,8 +41,7 @@ var Alert = function Alert(_ref) {
           size: variant === 'outlined' ? '1.375rem' : '2rem'
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StyledColumn, {
-        variant: variant,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           fontSize: "xs",
           fontWeight: "bold",
           children: title

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

@@ -17,7 +17,7 @@ export declare const StyledIconBox: import("@emotion/styled").StyledComponent<{
 export declare const StyledColumn: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & IStyledAlert, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledCloseIcon: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,eAAO,MAAM,oBAAoB;;;yGAEhC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;wHAoD7B,CAAC;AAEH,eAAO,MAAM,aAAa;;;;iBAA4C,OAAO;yGA0B3E,CAAC;AAEH,eAAO,MAAM,YAAY;;;wHASxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAS3B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,eAAO,MAAM,oBAAoB;;;yGAEhC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;wHAsB7B,CAAC;AAEH,eAAO,MAAM,aAAa;;;;iBAA4C,OAAO;yGA0B3E,CAAC;AAEH,eAAO,MAAM,YAAY;;;yGASxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAS3B,CAAC"}

package/dist/components/Alert/styles.js

@@ -22,10 +22,8 @@ var StyledAlertContainer = _styled.default.div(_templateObject || (_templateObje
 exports.StyledAlertContainer = StyledAlertContainer;
 
 var StyledAlertWrapper = _styled.default.div(function (props) {
-  var buttonPrimaryColor = props.type !== 'default' && props.type ? props.theme.colors[props.type].default : props.theme.colors.neutral.neutral3;
-  var buttonSecondaryColor = props.type !== 'default' && props.type ? props.theme.colorMode === 'dark' ? props.theme.colors[props.type].dark : props.theme.colors[props.type].blurred : props.theme.colors.neutral.neutral1;
   var secondaryColor = props.type !== 'default' && props.type ? props.theme.colorMode === 'dark' ? props.theme.colors[props.type].dark : props.theme.colors[props.type].blurred : props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral6 : props.theme.colors.neutral.neutral1;
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: ", ";\n    padding: 1rem;\n    gap: 1rem;\n    border-radius: 8px;\n    width: 100%;\n    background-color: ", ";\n    border: ", ";\n    color: ", ";\n    max-width: ", ";\n\n    & button {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-family: inherit;\n      font-weight: 600;\n      cursor: pointer;\n      border-radius: 8px;\n      padding: 8px 24px;\n      background-color: ", ";\n      border: ", ";\n      color: ", ";\n    }\n  "])), props.haveContent ? 'flex-start' : 'center', props.variant === 'outlined' ? 'transparent' : secondaryColor, props.variant === 'outlined' ? "2px solid ".concat(secondaryColor, ";") : '', props.variant === 'outlined' ? props.theme.colors.neutral.neutral4 : '', props.maxWidth ? "".concat(props.maxWidth, "px") : '', props.variant === 'outlined' ? buttonSecondaryColor : 'transparent', props.variant !== 'outlined' ? "2px solid ".concat(buttonPrimaryColor) : '0', props.variant === 'outlined' ? buttonPrimaryColor : props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.black);
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: ", ";\n    padding: 1rem;\n    gap: 1rem;\n    border-radius: 8px;\n    width: 100%;\n    background-color: ", ";\n    border: ", ";\n    color: ", ";\n    max-width: ", ";\n  "])), props.haveContent ? 'flex-start' : 'center', props.variant === 'outlined' ? 'transparent' : secondaryColor, props.variant === 'outlined' ? "2px solid ".concat(secondaryColor, ";") : '', props.variant === 'outlined' ? props.theme.colors.neutral.neutral4 : '', props.maxWidth ? "".concat(props.maxWidth, "px") : '');
 });
 
 exports.StyledAlertWrapper = StyledAlertWrapper;

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

@@ -24,7 +24,7 @@ export declare type AlertProps = {
     /**
      * The title of the alert
      */
-    title: string;
+    title?: string;
     /**
      * Sets a max width to alert
      */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,oBAAY,UAAU,GAAG;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAAC;IAChF;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC7C,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAAC;IAChF,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,oBAAY,UAAU,GAAG;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAAC;IAChF;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC7C,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAAC;IAChF,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC"}

package/dist/components/Button/Button.test.js

@@ -102,7 +102,7 @@ describe('Button', function () {
       children: "Click Me"
     }));
     expect(_react.screen.getByRole('button')).toBeDisabled();
-    expect(_react.screen.getByRole('button')).toHaveStyle('cursor: not-allowed');
+    expect(_react.screen.getByRole('button')).not.toHaveStyle('cursor: pointer');
   });
   it('should render a ghost variant button', function () {
     (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {

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

@@ -1,5 +1,4 @@
-import { FC, ButtonHTMLAttributes } from 'react';
-import { IButtonProps } from './types';
-declare const Button: FC<ButtonHTMLAttributes<HTMLButtonElement> & IButtonProps>;
-export default Button;
+import { ButtonHTMLAttributes } from 'react';
+import { ButtonProps } from './types';
+export default function Button({ children, leftIcon, rightIcon, isLoading, variant, bgColor, size, fullWidth, textColor, type, iconColor, ...props }: ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAOjD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,YAAY,CAkFtE,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAM7C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,OAAiB,EACjB,OAAY,EACZ,IAAW,EACX,SAAS,EACT,SAAc,EACd,IAAe,EACf,SAAc,EACd,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,eAoEvD"}

package/dist/components/Button/index.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-
-var _Icon = _interopRequireDefault(require("../Icon"));
+exports.default = Button;
 
 var _index = require("../../shared/theme/index");
 
 var _getColorValue = require("../../utils/getColorValue");
 
-var _styles = require("./styles");
+var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _Skeleton = _interopRequireDefault(require("../Skeleton"));
 
+var _styles = require("./styles");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _excluded = ["children", "leftIcon", "rightIcon", "isLoading", "variant", "bgColor", "size", "fullWidth", "textColor", "type", "iconColor"];
@@ -31,7 +31,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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 Button = function Button(_ref) {
+function Button(_ref) {
   var children = _ref.children,
       leftIcon = _ref.leftIcon,
       rightIcon = _ref.rightIcon,
@@ -94,15 +94,14 @@ var Button = function Button(_ref) {
     });
   }
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Buttons, _objectSpread(_objectSpread({
-    button: {
-      bgColor: parsedBgColor,
-      textColor: parsedTextColor,
-      fullWidth: fullWidth,
-      isLoading: isLoading,
-      variant: variant,
-      size: size
-    }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ButtonContainer, _objectSpread(_objectSpread({
+    bgColor: parsedBgColor,
+    textColor: parsedTextColor,
+    fullWidth: fullWidth,
+    isLoading: isLoading,
+    variant: variant,
+    size: size,
+    type: type
   }, props), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.IconContainer, {
       children: [leftIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.IconWrapper, {
@@ -122,7 +121,4 @@ var Button = function Button(_ref) {
       })]
     })
   }));
-};
-
-var _default = Button;
-exports.default = _default;
+}

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { StyledMapping } from './types';
-export declare const Buttons: import("@emotion/styled").StyledComponent<{
+import { ButtonProps } from './types';
+export declare const ButtonContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & StyledMapping, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+} & ButtonProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
 export declare const IconContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGxC,eAAO,MAAM,OAAO;;;qIAsInB,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAKzB,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGAIvB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,eAAO,MAAM,eAAe;;;mIAmI3B,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAKzB,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGAIvB,CAAC"}

package/dist/components/Button/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconWrapper = exports.IconContainer = exports.Buttons = void 0;
+exports.IconWrapper = exports.IconContainer = exports.ButtonContainer = void 0;
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
@@ -19,104 +19,103 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Buttons = _styled.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: inherit;\n  font-weight: ", ";\n  font-size: ", ";\n  border-radius: 8px;\n  border: 0px;\n  cursor: pointer;\n  padding-inline: 24px;\n  --button-brightness: brightness(0.85);\n\n  transition: all 0.15s ease-in-out;\n\n  color: ", ";\n\n  background-color: ", ";\n\n  height: ", ";\n\n  width: ", ";\n\n  &:disabled {\n    filter: opacity(0.5);\n    cursor: default;\n  }\n\n  ", "\n\n  @media screen and (min-width: ", ") {\n    width: ", ";\n  }\n\n  @media screen and (min-width: ", ") {\n    width: ", ";\n  }\n\n  @media screen and (min-width: ", ") {\n    width: ", ";\n  }\n\n  @media screen and (min-width: ", ") {\n    width: ", ";\n  }\n"])), function (_ref) {
+var ButtonContainer = _styled.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: inherit;\n  font-weight: ", ";\n  font-size: ", ";\n  border-radius: 8px;\n  border: 0px;\n  cursor: pointer;\n  padding-inline: 24px;\n  --button-brightness: brightness(0.85);\n\n  transition: all 0.15s ease-in-out;\n\n  color: ", ";\n\n  background-color: ", ";\n\n  height: ", ";\n\n  width: ", ";\n\n  &:disabled {\n    filter: opacity(0.5);\n    cursor: default;\n  }\n\n  ", "\n\n  @media screen and (min-width: ", ") {\n    width: ", ";\n  }\n\n  @media screen and (min-width: ", ") {\n    width: ", ";\n  }\n\n  @media screen and (min-width: ", ") {\n    width: ", ";\n  }\n\n  @media screen and (min-width: ", ") {\n    width: ", ";\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontWeight[600];
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.fontSizes.xs;
 }, function (_ref3) {
-  var _button$textColor;
-
-  var button = _ref3.button,
-      theme = _ref3.theme;
-  var baseColor = (0, _invertColor.invertColor)(button.textColor || button.bgColor || theme.colors.primary.default, true);
-  return (_button$textColor = button.textColor) !== null && _button$textColor !== void 0 ? _button$textColor : baseColor;
+  var theme = _ref3.theme,
+      textColor = _ref3.textColor,
+      bgColor = _ref3.bgColor;
+  var baseColor = (0, _invertColor.invertColor)(textColor || bgColor || theme.colors.primary.default, true);
+  return textColor !== null && textColor !== void 0 ? textColor : baseColor;
 }, function (_ref4) {
-  var _button$bgColor;
-
-  var button = _ref4.button,
-      theme = _ref4.theme;
-  return (_button$bgColor = button.bgColor) !== null && _button$bgColor !== void 0 ? _button$bgColor : theme.colors.primary.default;
+  var theme = _ref4.theme,
+      bgColor = _ref4.bgColor;
+  return bgColor !== null && bgColor !== void 0 ? bgColor : theme.colors.primary.default;
 }, function (_ref5) {
-  var button = _ref5.button,
-      theme = _ref5.theme;
-  if (button.size) return theme.buttonSize[button.size];
+  var theme = _ref5.theme,
+      size = _ref5.size;
+  if (size) return theme.buttonSize[size];
   return theme.buttonSize.md;
 }, function (_ref6) {
-  var button = _ref6.button;
+  var fullWidth = _ref6.fullWidth;
 
-  if (button.fullWidth) {
-    if (_typeof(button.fullWidth) === 'object' && button.fullWidth !== undefined) {
-      return button.fullWidth.base && '100%';
+  if (fullWidth) {
+    if (_typeof(fullWidth) === 'object' && fullWidth !== undefined) {
+      return fullWidth.base && '100%';
     }
 
     return '100%';
   }
 }, function (_ref7) {
-  var button = _ref7.button,
-      theme = _ref7.theme;
+  var theme = _ref7.theme,
+      variant = _ref7.variant,
+      textColor = _ref7.textColor,
+      bgColor = _ref7.bgColor;
 
-  switch (button.variant) {
+  switch (variant) {
     case 'solid':
       return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          &:is(&:hover, &:focus):not(:disabled) {\n            box-shadow: inset 0 0 40px 40px rgba(0, 0, 0, 0.2);\n          }\n        "])));
 
     case 'outline':
-      return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          background-color: transparent;\n          color: ", ";\n          border: 3px ", " solid;\n          box-shadow: none;\n          &:is(&:hover, &:focus):not(:disabled) {\n            filter: var(--button-brightness);\n          }\n        "])), button.textColor || button.bgColor || theme.colors.primary.default, button.bgColor || button.textColor || theme.colors.primary.default);
+      return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          background-color: transparent;\n          color: ", ";\n          border: 3px ", " solid;\n          box-shadow: none;\n          &:is(&:hover, &:focus):not(:disabled) {\n            filter: var(--button-brightness);\n          }\n        "])), textColor || bgColor || theme.colors.primary.default, bgColor || textColor || theme.colors.primary.default);
 
     case 'ghost':
-      return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          padding-inline: 0;\n          background-color: transparent;\n          color: ", ";\n          &:is(&:hover, &:focus):not(:disabled) {\n            filter: var(--button-brightness);\n          }\n        "])), button.bgColor || button.textColor || theme.colors.primary.default);
+      return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          padding-inline: 0;\n          background-color: transparent;\n          color: ", ";\n          &:is(&:hover, &:focus):not(:disabled) {\n            filter: var(--button-brightness);\n          }\n        "])), bgColor || textColor || theme.colors.primary.default);
 
     case 'link':
-      return (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          padding-inline: 0;\n          text-decoration: underline;\n          background-color: transparent;\n          color: ", ";\n          &:is(&:hover, &:focus):not(:disabled) {\n            filter: var(--button-brightness);\n          }\n        "])), button.bgColor || button.textColor || theme.colors.primary.default);
+      return (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          padding-inline: 0;\n          text-decoration: underline;\n          background-color: transparent;\n          color: ", ";\n          &:is(&:hover, &:focus):not(:disabled) {\n            filter: var(--button-brightness);\n          }\n        "])), bgColor || textColor || theme.colors.primary.default);
   }
 }, function (_ref8) {
   var theme = _ref8.theme;
   return theme.breakpoints.sm;
 }, function (_ref9) {
-  var button = _ref9.button;
+  var fullWidth = _ref9.fullWidth;
 
-  if (_typeof(button.fullWidth) === 'object') {
-    var widthWasNotSet = button.fullWidth.sm === undefined;
+  if (_typeof(fullWidth) === 'object') {
+    var widthWasNotSet = fullWidth.sm === undefined;
     if (widthWasNotSet) return;
-    return button.fullWidth.sm ? '100%' : 'fit-content';
+    return fullWidth.sm ? '100%' : 'fit-content';
   }
 }, function (_ref10) {
   var theme = _ref10.theme;
   return theme.breakpoints.md;
 }, function (_ref11) {
-  var button = _ref11.button;
+  var fullWidth = _ref11.fullWidth;
 
-  if (_typeof(button.fullWidth) === 'object') {
-    var widthWasNotSet = button.fullWidth.md === undefined;
+  if (_typeof(fullWidth) === 'object') {
+    var widthWasNotSet = fullWidth.md === undefined;
     if (widthWasNotSet) return;
-    return button.fullWidth.md ? '100%' : 'fit-content';
+    return fullWidth.md ? '100%' : 'fit-content';
   }
 }, function (_ref12) {
   var theme = _ref12.theme;
   return theme.breakpoints.lg;
 }, function (_ref13) {
-  var button = _ref13.button;
+  var fullWidth = _ref13.fullWidth;
 
-  if (_typeof(button.fullWidth) === 'object') {
-    var widthWasNotSet = button.fullWidth.lg === undefined;
+  if (_typeof(fullWidth) === 'object') {
+    var widthWasNotSet = fullWidth.lg === undefined;
     if (widthWasNotSet) return;
-    return button.fullWidth.lg ? '100%' : 'fit-content';
+    return fullWidth.lg ? '100%' : 'fit-content';
   }
 }, function (_ref14) {
   var theme = _ref14.theme;
   return theme.breakpoints.xl;
 }, function (_ref15) {
-  var button = _ref15.button;
+  var fullWidth = _ref15.fullWidth;
 
-  if (_typeof(button.fullWidth) === 'object') {
-    var widthWasNotSet = button.fullWidth.xl === undefined;
+  if (_typeof(fullWidth) === 'object') {
+    var widthWasNotSet = fullWidth.xl === undefined;
     if (widthWasNotSet) return;
-    return button.fullWidth.xl ? '100%' : 'fit-content';
+    return fullWidth.xl ? '100%' : 'fit-content';
   }
 });
 
-exports.Buttons = Buttons;
+exports.ButtonContainer = ButtonContainer;
 
 var IconContainer = _styled.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.45em;\n"])));
 

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

@@ -11,14 +11,14 @@ declare type responsivePattern<T = any> = {
     xxl?: T;
 };
 declare type sizeOptions = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export interface IButtonProps {
+export interface ButtonProps {
     /**
      * The button's properties change making it not clickable and changing it's color.
      *
      * @default 'solid'
      * @example 'solid' | 'outline' | 'ghost' | 'link'
      * @type buttonVariant
-     * @memberof IButtonProps
+     * @memberof ButtonProps
      */
     disabled?: boolean;
     /**
@@ -27,7 +27,7 @@ export interface IButtonProps {
      *
      * @default ''
      * @type IconName
-     * @memberof IButtonProps
+     * @memberof ButtonProps
      */
     leftIcon?: IconName;
     /**
@@ -37,7 +37,7 @@ export interface IButtonProps {
      *
      * @default ''
      * @type IconName
-     * @memberof IButtonProps
+     * @memberof ButtonProps
      */
     rightIcon?: IconName;
     /**
@@ -45,7 +45,7 @@ export interface IButtonProps {
      *
      * @default false
      * @type boolean
-     * @memberof IButtonProps
+     * @memberof ButtonProps
      * @example true
      */
     isLoading?: boolean;
@@ -54,7 +54,7 @@ export interface IButtonProps {
      *
      * @default 'md'
      * @type sizeOptions
-     * @memberof IButtonProps
+     * @memberof ButtonProps
      * @example 'xs' | 'sm' | 'md' | 'lg' | 'xl'
      */
     size?: sizeOptions;
@@ -64,7 +64,7 @@ export interface IButtonProps {
      * @default 'solid'
      * @example 'solid' | 'outline' | 'ghost' | 'link'
      * @type buttonVariant
-     * @memberof IButtonProps
+     * @memberof ButtonProps
      */
     variant?: buttonVariant;
     /**
@@ -73,7 +73,7 @@ export interface IButtonProps {
      * @default 'primary'
      * @example 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'
      * @type buttonColor
-     * @memberof IButtonProps
+     * @memberof ButtonProps
      */
     bgColor?: buttonColor;
     iconColor?: GlobalColorsProps | string;
@@ -85,7 +85,7 @@ export interface IButtonProps {
      * @example { base: true, sm: false', md: false }
      * @example { base: 'md', md: 'xl' }
      * @type boolean | responsivePattern<boolean>
-     * @memberof IButtonProps
+     * @memberof ButtonProps
      */
     fullWidth?: boolean | responsivePattern<boolean>;
     /**
@@ -94,12 +94,9 @@ export interface IButtonProps {
      * @default 'white'
      * @example 'white' | 'black'
      * @type string
-     * @memberof IButtonProps
+     * @memberof ButtonProps
      */
     textColor?: buttonColor;
 }
-export declare type StyledMapping = {
-    button: IButtonProps;
-};
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,aAAK,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAC5D,aAAK,WAAW,GAAG,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AACrD,aAAK,iBAAiB,CAAC,CAAC,GAAG,GAAG,IAAI;IAChC,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,GAAG,CAAC,EAAE,CAAC,CAAC;CACT,CAAC;AACF,aAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,WAAW,YAAY;IAC3B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC;IAErB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,SAAS,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAAC;IAEvC;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAEjD;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;CACzB;AAED,oBAAY,aAAa,GAAG;IAC1B,MAAM,EAAE,YAAY,CAAC;CACtB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,aAAK,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAC5D,aAAK,WAAW,GAAG,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AACrD,aAAK,iBAAiB,CAAC,CAAC,GAAG,GAAG,IAAI;IAChC,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,GAAG,CAAC,EAAE,CAAC,CAAC;CACT,CAAC;AACF,aAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,WAAW,WAAW;IAC1B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC;IAErB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,SAAS,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAAC;IAEvC;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAEjD;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;CACzB"}

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAEnD,eAAO,MAAM,kBAAkB;;;yGAO9B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCAS/B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAEnD,eAAO,MAAM,kBAAkB;;;yGAQ9B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCAS/B,CAAC"}

package/dist/components/DateInput/styles.js

@@ -23,7 +23,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var DateInputContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n\n  input {\n    cursor: pointer;\n    caret-color: transparent;\n  }\n"])));
+var DateInputContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n\n  input {\n    cursor: pointer;\n    caret-color: transparent;\n  }\n"])));
 
 exports.DateInputContainer = DateInputContainer;
 var DatePickerContainer = (0, _styled.default)(_framerMotion.motion.div)(function (_ref) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AAoBf,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,KAAK,sJA8FV,CAAC;AAGF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AAoBf,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,KAAK,sJA6FV,CAAC;AAGF,eAAe,KAAK,CAAC"}

package/dist/components/Input/index.js

@@ -101,6 +101,16 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputLabel, {
           hasDisabled: disabled,
           children: label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Fieldset, {
+          "aria-hidden": true,
+          hasDisabled: disabled,
+          withAddon: withAddon,
+          alert: alert,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Legend, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.LegendText, {
+              children: label
+            })
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputContentRow, {
           children: [withIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputIcon, {
             children: withIcon
@@ -129,16 +139,6 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
               name: "eye-off"
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Fieldset, {
-            "aria-hidden": true,
-            hasDisabled: disabled,
-            withAddon: withAddon,
-            alert: alert,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Legend, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.LegendText, {
-                children: label
-              })
-            })
           })]
         })]
       })]

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Input/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlD,eAAO,MAAM,iBAAiB;;;;;;yGA4I7B,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGASvB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;yGAKxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAK3B,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;yGAarB,CAAC;AAEF,eAAO,MAAM,KAAK;;;+HA2BjB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;kHAgBtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;2HAyCpB,CAAC;AAEF,eAAO,MAAM,MAAM;;;+GAQlB,CAAC;AAEF,eAAO,MAAM,UAAU;;;2GAItB,CAAC;AAEF,eAAO,MAAM,UAAU;;;wHAUtB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;yGAyCxB,CAAC;AAEF,eAAO,MAAM,YAAY;;;2GAOxB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Input/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlD,eAAO,MAAM,iBAAiB;;;;;;yGAuI7B,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGAQvB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;yGAKxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAK3B,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;yGAarB,CAAC;AAEF,eAAO,MAAM,KAAK;;;+HA+BjB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;kHAgBtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;2HAyCpB,CAAC;AAEF,eAAO,MAAM,MAAM;;;+GAQlB,CAAC;AAEF,eAAO,MAAM,UAAU;;;2GAItB,CAAC;AAEF,eAAO,MAAM,UAAU;;;wHAUtB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;yGAyCxB,CAAC;AAEF,eAAO,MAAM,YAAY;;;2GAOxB,CAAC"}

package/dist/components/Input/styles.js

@@ -19,7 +19,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 
 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  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    &:hover label {\n      color: ", ";\n    }\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  &:focus-within label {\n    color: ", ";\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) {
+var InputGroupElement = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  border-radius: ", ";\n  font-weight: ", ";\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    &:hover label {\n      color: ", ";\n    }\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  &:focus-within label {\n    color: ", ";\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];
@@ -52,8 +52,9 @@ var InputGroupElement = _styled.default.div(_templateObject || (_templateObject
 
   return theme.colors.primary.hover;
 }, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.colors.neutral.neutral5;
+  var theme = _ref3.theme,
+      hasDisabled = _ref3.hasDisabled;
+  return !hasDisabled && theme.colors.neutral.neutral5;
 }, function (props) {
   return !props.alert && props.withAddon && props.theme.colors.primary.disabled;
 }, function (props) {
@@ -110,7 +111,7 @@ var InputGroupElement = _styled.default.div(_templateObject || (_templateObject
 
 exports.InputGroupElement = InputGroupElement;
 
-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: 56px;\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  width: 100%;\n  min-height: 56px;\n"])), function (props) {
   return props.theme.borderRadius.default;
 });
 
@@ -131,18 +132,21 @@ var InputIcon = _styled.default.div(_templateObject6 || (_templateObject6 = _tag
 }, function (props) {
   return props.clickable ? 'pointer' : 'default';
 }, function (props) {
-  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.black;
+  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.neutral5;
 });
 
 exports.InputIcon = InputIcon;
 
-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"])), 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  &:disabled {\n    color: ", ";\n  }\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  font-weight: 500;\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;
 }, function (_ref7) {
   var theme = _ref7.theme;
   return theme.colors.neutral.neutral5;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.colors.neutral.neutral5;
 }, function (props) {
   return props.theme.fontSizes.xs;
 });
@@ -157,10 +161,10 @@ var InputLabel = _styled.default.label(_templateObject8 || (_templateObject8 = _
 
 exports.InputLabel = InputLabel;
 
-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 (_ref8) {
-  var alert = _ref8.alert,
-      theme = _ref8.theme,
-      hasDisabled = _ref8.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 (_ref9) {
+  var alert = _ref9.alert,
+      theme = _ref9.theme,
+      hasDisabled = _ref9.hasDisabled;
 
   if (alert && !hasDisabled) {
     return "".concat(theme.colors[alert].blurred, "33");
@@ -173,10 +177,10 @@ var Fieldset = _styled.default.fieldset(_templateObject9 || (_templateObject9 =
   return 'transparent';
 }, function (props) {
   return props.withAddon ? "0 ".concat(props.theme.borderRadius.default, " ").concat(props.theme.borderRadius.default, " 0") : props.theme.borderRadius.default;
-}, function (_ref9) {
-  var theme = _ref9.theme,
-      hasDisabled = _ref9.hasDisabled,
-      alert = _ref9.alert;
+}, function (_ref10) {
+  var theme = _ref10.theme,
+      hasDisabled = _ref10.hasDisabled,
+      alert = _ref10.alert;
 
   if (alert && !hasDisabled) {
     return theme.colors[alert].default;
@@ -224,10 +228,10 @@ var AddonElement = _styled.default.div(_templateObject13 || (_templateObject13 =
     light: props.theme.colors.neutral.neutral1,
     dark: props.theme.colors.neutral.neutral6
   }[props.theme.colorMode];
-}, function (_ref10) {
-  var theme = _ref10.theme,
-      hasDisabled = _ref10.hasDisabled,
-      alert = _ref10.alert;
+}, function (_ref11) {
+  var theme = _ref11.theme,
+      hasDisabled = _ref11.hasDisabled,
+      alert = _ref11.alert;
 
   if (alert && !hasDisabled) {
     return theme.colors[alert].default;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalExample.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalExample.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,wBAAgB,YAAY,CAAC,KAAK,EAAE,UAAU,eAoB7C"}