@pedidopago/ui 1.3.3 → 1.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/dist/components/Alert/index.d.ts.map +1 -1
  2. package/dist/components/Alert/index.js +2 -3
  3. package/dist/components/Alert/styles.d.ts +1 -1
  4. package/dist/components/Alert/styles.d.ts.map +1 -1
  5. package/dist/components/Alert/styles.js +1 -3
  6. package/dist/components/Alert/types.d.ts +1 -1
  7. package/dist/components/Alert/types.d.ts.map +1 -1
  8. package/dist/components/Button/Button.test.js +1 -1
  9. package/dist/components/Button/index.d.ts +3 -4
  10. package/dist/components/Button/index.d.ts.map +1 -1
  11. package/dist/components/Button/index.js +14 -18
  12. package/dist/components/Button/styles.d.ts +3 -3
  13. package/dist/components/Button/styles.d.ts.map +1 -1
  14. package/dist/components/Button/styles.js +42 -43
  15. package/dist/components/Button/types.d.ts +10 -13
  16. package/dist/components/Button/types.d.ts.map +1 -1
  17. package/dist/components/Input/styles.d.ts.map +1 -1
  18. package/dist/components/Input/styles.js +2 -2
  19. package/dist/components/Modal/ModalExample.d.ts +4 -0
  20. package/dist/components/Modal/ModalExample.d.ts.map +1 -0
  21. package/dist/components/Modal/ModalExample.js +66 -0
  22. package/dist/components/Modal/index.d.ts +1 -1
  23. package/dist/components/Modal/index.d.ts.map +1 -1
  24. package/dist/components/Modal/index.js +11 -13
  25. package/dist/components/Modal/modal.test.js +11 -9
  26. package/dist/components/Pagination/index.d.ts.map +1 -1
  27. package/dist/components/Pagination/index.js +23 -10
  28. package/dist/components/Pagination/styles.js +3 -2
  29. package/dist/components/ReactPortal/index.d.ts +8 -0
  30. package/dist/components/ReactPortal/index.d.ts.map +1 -0
  31. package/dist/components/ReactPortal/index.js +58 -0
  32. package/dist/components/ReactPortal/reactPortal.test.d.ts +2 -0
  33. package/dist/components/ReactPortal/reactPortal.test.d.ts.map +1 -0
  34. package/dist/components/ReactPortal/reactPortal.test.js +26 -0
  35. package/dist/components/ReactPortal/utils/createWrapperAndApprendToBody.d.ts +2 -0
  36. package/dist/components/ReactPortal/utils/createWrapperAndApprendToBody.d.ts.map +1 -0
  37. package/dist/components/ReactPortal/utils/createWrapperAndApprendToBody.js +13 -0
  38. package/dist/components/Select/components/OptionsSelect/index.d.ts +4 -0
  39. package/dist/components/Select/components/OptionsSelect/index.d.ts.map +1 -0
  40. package/dist/components/Select/components/OptionsSelect/index.js +91 -0
  41. package/dist/components/Select/components/OptionsSelect/styles.d.ts +265 -0
  42. package/dist/components/Select/components/OptionsSelect/styles.d.ts.map +1 -0
  43. package/dist/components/Select/components/OptionsSelect/styles.js +32 -0
  44. package/dist/components/Select/components/OptionsSelect/types.d.ts +16 -0
  45. package/dist/components/Select/components/OptionsSelect/types.d.ts.map +1 -0
  46. package/dist/components/Select/components/OptionsSelect/types.js +1 -0
  47. package/dist/components/Select/index.d.ts.map +1 -1
  48. package/dist/components/Select/index.js +66 -37
  49. package/dist/components/Select/select.test.js +14 -0
  50. package/dist/components/Select/styles.d.ts +5 -7
  51. package/dist/components/Select/styles.d.ts.map +1 -1
  52. package/dist/components/Select/styles.js +26 -16
  53. package/dist/components/Select/types.d.ts +7 -2
  54. package/dist/components/Select/types.d.ts.map +1 -1
  55. package/dist/components/Table/styles.d.ts.map +1 -1
  56. package/dist/components/Table/styles.js +8 -2
  57. package/dist/index.d.ts +1 -0
  58. package/dist/index.d.ts.map +1 -1
  59. package/dist/index.js +9 -0
  60. package/package.json +2 -1
@@ -1 +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"}
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,CAoCzB,CAAC;AAEF,eAAe,KAAK,CAAC"}
@@ -28,7 +28,7 @@ var Alert = function Alert(_ref) {
28
28
  variant = _ref$variant === void 0 ? 'filled' : _ref$variant;
29
29
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledAlertContainer, {
30
30
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StyledAlertWrapper, {
31
- haveContent: !!content,
31
+ haveContent: !!content && !!title,
32
32
  variant: variant,
33
33
  type: type,
34
34
  maxWidth: maxWidth,
@@ -41,8 +41,7 @@ var Alert = function Alert(_ref) {
41
41
  size: variant === 'outlined' ? '1.375rem' : '2rem'
42
42
  })
43
43
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StyledColumn, {
44
- variant: variant,
45
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
44
+ children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
46
45
  fontSize: "xs",
47
46
  fontWeight: "bold",
48
47
  children: title
@@ -17,7 +17,7 @@ export declare const StyledIconBox: import("@emotion/styled").StyledComponent<{
17
17
  export declare const StyledColumn: import("@emotion/styled").StyledComponent<{
18
18
  theme?: import("@emotion/react").Theme | undefined;
19
19
  as?: import("react").ElementType<any> | undefined;
20
- } & IStyledAlert, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
20
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
21
21
  export declare const StyledCloseIcon: import("@emotion/styled").StyledComponent<{
22
22
  theme?: import("@emotion/react").Theme | undefined;
23
23
  as?: import("react").ElementType<any> | undefined;
@@ -1 +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"}
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;;;wHAsB7B,CAAC;AAEH,eAAO,MAAM,aAAa;;;;iBAA4C,OAAO;yGA0B3E,CAAC;AAEH,eAAO,MAAM,YAAY;;;yGASxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAS3B,CAAC"}
@@ -22,10 +22,8 @@ var StyledAlertContainer = _styled.default.div(_templateObject || (_templateObje
22
22
  exports.StyledAlertContainer = StyledAlertContainer;
23
23
 
24
24
  var StyledAlertWrapper = _styled.default.div(function (props) {
25
- var buttonPrimaryColor = props.type !== 'default' && props.type ? props.theme.colors[props.type].default : props.theme.colors.neutral.neutral3;
26
- 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;
27
25
  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;
28
- 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);
26
+ 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") : '');
29
27
  });
30
28
 
31
29
  exports.StyledAlertWrapper = StyledAlertWrapper;
@@ -24,7 +24,7 @@ export declare type AlertProps = {
24
24
  /**
25
25
  * The title of the alert
26
26
  */
27
- title: string;
27
+ title?: string;
28
28
  /**
29
29
  * Sets a max width to alert
30
30
  */
@@ -1 +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"}
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,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"}
@@ -102,7 +102,7 @@ describe('Button', function () {
102
102
  children: "Click Me"
103
103
  }));
104
104
  expect(_react.screen.getByRole('button')).toBeDisabled();
105
- expect(_react.screen.getByRole('button')).toHaveStyle('cursor: not-allowed');
105
+ expect(_react.screen.getByRole('button')).not.toHaveStyle('cursor: pointer');
106
106
  });
107
107
  it('should render a ghost variant button', function () {
108
108
  (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
@@ -1,5 +1,4 @@
1
- import { FC, ButtonHTMLAttributes } from 'react';
2
- import { IButtonProps } from './types';
3
- declare const Button: FC<ButtonHTMLAttributes<HTMLButtonElement> & IButtonProps>;
4
- export default Button;
1
+ import { ButtonHTMLAttributes } from 'react';
2
+ import { ButtonProps } from './types';
3
+ export default function Button({ children, leftIcon, rightIcon, isLoading, variant, bgColor, size, fullWidth, textColor, type, iconColor, ...props }: ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
5
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +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"}
1
+ {"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"}
@@ -3,18 +3,18 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = void 0;
7
-
8
- var _Icon = _interopRequireDefault(require("../Icon"));
6
+ exports.default = Button;
9
7
 
10
8
  var _index = require("../../shared/theme/index");
11
9
 
12
10
  var _getColorValue = require("../../utils/getColorValue");
13
11
 
14
- var _styles = require("./styles");
12
+ var _Icon = _interopRequireDefault(require("../Icon"));
15
13
 
16
14
  var _Skeleton = _interopRequireDefault(require("../Skeleton"));
17
15
 
16
+ var _styles = require("./styles");
17
+
18
18
  var _jsxRuntime = require("react/jsx-runtime");
19
19
 
20
20
  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
31
31
 
32
32
  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; }
33
33
 
34
- var Button = function Button(_ref) {
34
+ function Button(_ref) {
35
35
  var children = _ref.children,
36
36
  leftIcon = _ref.leftIcon,
37
37
  rightIcon = _ref.rightIcon,
@@ -94,15 +94,14 @@ var Button = function Button(_ref) {
94
94
  });
95
95
  }
96
96
 
97
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Buttons, _objectSpread(_objectSpread({
98
- button: {
99
- bgColor: parsedBgColor,
100
- textColor: parsedTextColor,
101
- fullWidth: fullWidth,
102
- isLoading: isLoading,
103
- variant: variant,
104
- size: size
105
- }
97
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ButtonContainer, _objectSpread(_objectSpread({
98
+ bgColor: parsedBgColor,
99
+ textColor: parsedTextColor,
100
+ fullWidth: fullWidth,
101
+ isLoading: isLoading,
102
+ variant: variant,
103
+ size: size,
104
+ type: type
106
105
  }, props), {}, {
107
106
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.IconContainer, {
108
107
  children: [leftIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.IconWrapper, {
@@ -122,7 +121,4 @@ var Button = function Button(_ref) {
122
121
  })]
123
122
  })
124
123
  }));
125
- };
126
-
127
- var _default = Button;
128
- exports.default = _default;
124
+ }
@@ -1,9 +1,9 @@
1
1
  /// <reference types="react" />
2
- import { StyledMapping } from './types';
3
- export declare const Buttons: import("@emotion/styled").StyledComponent<{
2
+ import { ButtonProps } from './types';
3
+ export declare const ButtonContainer: import("@emotion/styled").StyledComponent<{
4
4
  theme?: import("@emotion/react").Theme | undefined;
5
5
  as?: import("react").ElementType<any> | undefined;
6
- } & StyledMapping, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
6
+ } & ButtonProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
7
7
  export declare const IconContainer: import("@emotion/styled").StyledComponent<{
8
8
  theme?: import("@emotion/react").Theme | undefined;
9
9
  as?: import("react").ElementType<any> | undefined;
@@ -1 +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"}
1
+ {"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"}
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.IconWrapper = exports.IconContainer = exports.Buttons = void 0;
6
+ exports.IconWrapper = exports.IconContainer = exports.ButtonContainer = void 0;
7
7
 
8
8
  var _styled = _interopRequireDefault(require("@emotion/styled"));
9
9
 
@@ -19,104 +19,103 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
19
19
 
20
20
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
21
21
 
22
- 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) {
22
+ 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) {
23
23
  var theme = _ref.theme;
24
24
  return theme.fontWeight[600];
25
25
  }, function (_ref2) {
26
26
  var theme = _ref2.theme;
27
27
  return theme.fontSizes.xs;
28
28
  }, function (_ref3) {
29
- var _button$textColor;
30
-
31
- var button = _ref3.button,
32
- theme = _ref3.theme;
33
- var baseColor = (0, _invertColor.invertColor)(button.textColor || button.bgColor || theme.colors.primary.default, true);
34
- return (_button$textColor = button.textColor) !== null && _button$textColor !== void 0 ? _button$textColor : baseColor;
29
+ var theme = _ref3.theme,
30
+ textColor = _ref3.textColor,
31
+ bgColor = _ref3.bgColor;
32
+ var baseColor = (0, _invertColor.invertColor)(textColor || bgColor || theme.colors.primary.default, true);
33
+ return textColor !== null && textColor !== void 0 ? textColor : baseColor;
35
34
  }, function (_ref4) {
36
- var _button$bgColor;
37
-
38
- var button = _ref4.button,
39
- theme = _ref4.theme;
40
- return (_button$bgColor = button.bgColor) !== null && _button$bgColor !== void 0 ? _button$bgColor : theme.colors.primary.default;
35
+ var theme = _ref4.theme,
36
+ bgColor = _ref4.bgColor;
37
+ return bgColor !== null && bgColor !== void 0 ? bgColor : theme.colors.primary.default;
41
38
  }, function (_ref5) {
42
- var button = _ref5.button,
43
- theme = _ref5.theme;
44
- if (button.size) return theme.buttonSize[button.size];
39
+ var theme = _ref5.theme,
40
+ size = _ref5.size;
41
+ if (size) return theme.buttonSize[size];
45
42
  return theme.buttonSize.md;
46
43
  }, function (_ref6) {
47
- var button = _ref6.button;
44
+ var fullWidth = _ref6.fullWidth;
48
45
 
49
- if (button.fullWidth) {
50
- if (_typeof(button.fullWidth) === 'object' && button.fullWidth !== undefined) {
51
- return button.fullWidth.base && '100%';
46
+ if (fullWidth) {
47
+ if (_typeof(fullWidth) === 'object' && fullWidth !== undefined) {
48
+ return fullWidth.base && '100%';
52
49
  }
53
50
 
54
51
  return '100%';
55
52
  }
56
53
  }, function (_ref7) {
57
- var button = _ref7.button,
58
- theme = _ref7.theme;
54
+ var theme = _ref7.theme,
55
+ variant = _ref7.variant,
56
+ textColor = _ref7.textColor,
57
+ bgColor = _ref7.bgColor;
59
58
 
60
- switch (button.variant) {
59
+ switch (variant) {
61
60
  case 'solid':
62
61
  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 "])));
63
62
 
64
63
  case 'outline':
65
- 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);
64
+ 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);
66
65
 
67
66
  case 'ghost':
68
- 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);
67
+ 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);
69
68
 
70
69
  case 'link':
71
- 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);
70
+ 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);
72
71
  }
73
72
  }, function (_ref8) {
74
73
  var theme = _ref8.theme;
75
74
  return theme.breakpoints.sm;
76
75
  }, function (_ref9) {
77
- var button = _ref9.button;
76
+ var fullWidth = _ref9.fullWidth;
78
77
 
79
- if (_typeof(button.fullWidth) === 'object') {
80
- var widthWasNotSet = button.fullWidth.sm === undefined;
78
+ if (_typeof(fullWidth) === 'object') {
79
+ var widthWasNotSet = fullWidth.sm === undefined;
81
80
  if (widthWasNotSet) return;
82
- return button.fullWidth.sm ? '100%' : 'fit-content';
81
+ return fullWidth.sm ? '100%' : 'fit-content';
83
82
  }
84
83
  }, function (_ref10) {
85
84
  var theme = _ref10.theme;
86
85
  return theme.breakpoints.md;
87
86
  }, function (_ref11) {
88
- var button = _ref11.button;
87
+ var fullWidth = _ref11.fullWidth;
89
88
 
90
- if (_typeof(button.fullWidth) === 'object') {
91
- var widthWasNotSet = button.fullWidth.md === undefined;
89
+ if (_typeof(fullWidth) === 'object') {
90
+ var widthWasNotSet = fullWidth.md === undefined;
92
91
  if (widthWasNotSet) return;
93
- return button.fullWidth.md ? '100%' : 'fit-content';
92
+ return fullWidth.md ? '100%' : 'fit-content';
94
93
  }
95
94
  }, function (_ref12) {
96
95
  var theme = _ref12.theme;
97
96
  return theme.breakpoints.lg;
98
97
  }, function (_ref13) {
99
- var button = _ref13.button;
98
+ var fullWidth = _ref13.fullWidth;
100
99
 
101
- if (_typeof(button.fullWidth) === 'object') {
102
- var widthWasNotSet = button.fullWidth.lg === undefined;
100
+ if (_typeof(fullWidth) === 'object') {
101
+ var widthWasNotSet = fullWidth.lg === undefined;
103
102
  if (widthWasNotSet) return;
104
- return button.fullWidth.lg ? '100%' : 'fit-content';
103
+ return fullWidth.lg ? '100%' : 'fit-content';
105
104
  }
106
105
  }, function (_ref14) {
107
106
  var theme = _ref14.theme;
108
107
  return theme.breakpoints.xl;
109
108
  }, function (_ref15) {
110
- var button = _ref15.button;
109
+ var fullWidth = _ref15.fullWidth;
111
110
 
112
- if (_typeof(button.fullWidth) === 'object') {
113
- var widthWasNotSet = button.fullWidth.xl === undefined;
111
+ if (_typeof(fullWidth) === 'object') {
112
+ var widthWasNotSet = fullWidth.xl === undefined;
114
113
  if (widthWasNotSet) return;
115
- return button.fullWidth.xl ? '100%' : 'fit-content';
114
+ return fullWidth.xl ? '100%' : 'fit-content';
116
115
  }
117
116
  });
118
117
 
119
- exports.Buttons = Buttons;
118
+ exports.ButtonContainer = ButtonContainer;
120
119
 
121
120
  var IconContainer = _styled.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 0.45em;\n"])));
122
121
 
@@ -11,14 +11,14 @@ declare type responsivePattern<T = any> = {
11
11
  xxl?: T;
12
12
  };
13
13
  declare type sizeOptions = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
14
- export interface IButtonProps {
14
+ export interface ButtonProps {
15
15
  /**
16
16
  * The button's properties change making it not clickable and changing it's color.
17
17
  *
18
18
  * @default 'solid'
19
19
  * @example 'solid' | 'outline' | 'ghost' | 'link'
20
20
  * @type buttonVariant
21
- * @memberof IButtonProps
21
+ * @memberof ButtonProps
22
22
  */
23
23
  disabled?: boolean;
24
24
  /**
@@ -27,7 +27,7 @@ export interface IButtonProps {
27
27
  *
28
28
  * @default ''
29
29
  * @type IconName
30
- * @memberof IButtonProps
30
+ * @memberof ButtonProps
31
31
  */
32
32
  leftIcon?: IconName;
33
33
  /**
@@ -37,7 +37,7 @@ export interface IButtonProps {
37
37
  *
38
38
  * @default ''
39
39
  * @type IconName
40
- * @memberof IButtonProps
40
+ * @memberof ButtonProps
41
41
  */
42
42
  rightIcon?: IconName;
43
43
  /**
@@ -45,7 +45,7 @@ export interface IButtonProps {
45
45
  *
46
46
  * @default false
47
47
  * @type boolean
48
- * @memberof IButtonProps
48
+ * @memberof ButtonProps
49
49
  * @example true
50
50
  */
51
51
  isLoading?: boolean;
@@ -54,7 +54,7 @@ export interface IButtonProps {
54
54
  *
55
55
  * @default 'md'
56
56
  * @type sizeOptions
57
- * @memberof IButtonProps
57
+ * @memberof ButtonProps
58
58
  * @example 'xs' | 'sm' | 'md' | 'lg' | 'xl'
59
59
  */
60
60
  size?: sizeOptions;
@@ -64,7 +64,7 @@ export interface IButtonProps {
64
64
  * @default 'solid'
65
65
  * @example 'solid' | 'outline' | 'ghost' | 'link'
66
66
  * @type buttonVariant
67
- * @memberof IButtonProps
67
+ * @memberof ButtonProps
68
68
  */
69
69
  variant?: buttonVariant;
70
70
  /**
@@ -73,7 +73,7 @@ export interface IButtonProps {
73
73
  * @default 'primary'
74
74
  * @example 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'
75
75
  * @type buttonColor
76
- * @memberof IButtonProps
76
+ * @memberof ButtonProps
77
77
  */
78
78
  bgColor?: buttonColor;
79
79
  iconColor?: GlobalColorsProps | string;
@@ -85,7 +85,7 @@ export interface IButtonProps {
85
85
  * @example { base: true, sm: false', md: false }
86
86
  * @example { base: 'md', md: 'xl' }
87
87
  * @type boolean | responsivePattern<boolean>
88
- * @memberof IButtonProps
88
+ * @memberof ButtonProps
89
89
  */
90
90
  fullWidth?: boolean | responsivePattern<boolean>;
91
91
  /**
@@ -94,12 +94,9 @@ export interface IButtonProps {
94
94
  * @default 'white'
95
95
  * @example 'white' | 'black'
96
96
  * @type string
97
- * @memberof IButtonProps
97
+ * @memberof ButtonProps
98
98
  */
99
99
  textColor?: buttonColor;
100
100
  }
101
- export declare type StyledMapping = {
102
- button: IButtonProps;
103
- };
104
101
  export {};
105
102
  //# sourceMappingURL=types.d.ts.map
@@ -1 +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"}
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,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"}
@@ -1 +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;;;+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"}
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;;;;;;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"}
@@ -19,7 +19,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
19
19
 
20
20
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
21
21
 
22
- 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) {
22
+ 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) {
23
23
  return props.theme.borderRadius.default;
24
24
  }, function (props) {
25
25
  return props.theme.fontWeight[400];
@@ -111,7 +111,7 @@ var InputGroupElement = _styled.default.div(_templateObject || (_templateObject
111
111
 
112
112
  exports.InputGroupElement = InputGroupElement;
113
113
 
114
- 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) {
114
+ 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) {
115
115
  return props.theme.borderRadius.default;
116
116
  });
117
117
 
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { ModalProps } from './types';
3
+ export declare function ModalExample(props: ModalProps): JSX.Element;
4
+ //# sourceMappingURL=ModalExample.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,66 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.ModalExample = ModalExample;
7
+
8
+ var _react = require("react");
9
+
10
+ var _ = require(".");
11
+
12
+ var _Button = _interopRequireDefault(require("../Button"));
13
+
14
+ var _Flex = _interopRequireDefault(require("../Flex"));
15
+
16
+ var _jsxRuntime = require("react/jsx-runtime");
17
+
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
+
20
+ 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; }
21
+
22
+ 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; }
23
+
24
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
25
+
26
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
27
+
28
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
29
+
30
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
31
+
32
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
33
+
34
+ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
35
+
36
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
37
+
38
+ function ModalExample(props) {
39
+ var _useState = (0, _react.useState)(false),
40
+ _useState2 = _slicedToArray(_useState, 2),
41
+ modalOpen = _useState2[0],
42
+ setModalOpen = _useState2[1];
43
+
44
+ function handleModal() {
45
+ setModalOpen(!modalOpen);
46
+ }
47
+
48
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
49
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
50
+ onClick: handleModal,
51
+ children: "Abrir modal"
52
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Modal, _objectSpread(_objectSpread({}, props), {}, {
53
+ maxWidth: props.maxWidth || '350px',
54
+ open: props.open || modalOpen,
55
+ onClose: handleModal,
56
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flex.default, {
57
+ justifyContent: "center",
58
+ alignItems: "center",
59
+ style: {
60
+ height: '350px'
61
+ },
62
+ children: "Eu sou um modal :)"
63
+ })
64
+ }))]
65
+ });
66
+ }
@@ -1,4 +1,4 @@
1
1
  /// <reference types="react" />
2
2
  import { ModalProps } from './types';
3
- export declare function Modal({ open, left, top, anchorX, anchorY, offsetX, offsetY, hideScrollBar, hideOverlay, disableScrollOnOpen, maxWidth, maxHeight, onClose, ...rest }: ModalProps): JSX.Element;
3
+ export declare const Modal: ({ open, left, top, anchorX, anchorY, offsetX, offsetY, hideScrollBar, hideOverlay, disableScrollOnOpen, maxWidth, maxHeight, onClose, ...rest }: ModalProps) => JSX.Element;
4
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAMrC,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAa,EACb,GAAY,EACZ,OAAkB,EAClB,OAAkB,EAClB,OAAe,EACf,OAAe,EACf,aAAqB,EACrB,WAAmB,EACnB,mBAA0B,EAC1B,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,IAAI,EACR,EAAE,UAAU,eAiFZ"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,KAAK,oJAef,UAAU,gBA+EZ,CAAC"}