@pedidopago/ui 1.3.3 → 1.3.6

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 (88) 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/DateInput/components/ModalWrapper/index.d.ts +4 -0
  18. package/dist/components/DateInput/components/ModalWrapper/index.d.ts.map +1 -0
  19. package/dist/components/DateInput/components/ModalWrapper/index.js +43 -0
  20. package/dist/components/DateInput/components/ModalWrapper/styles.d.ts +265 -0
  21. package/dist/components/DateInput/components/ModalWrapper/styles.d.ts.map +1 -0
  22. package/dist/components/DateInput/components/ModalWrapper/styles.js +32 -0
  23. package/dist/components/DateInput/components/ModalWrapper/types.d.ts +16 -0
  24. package/dist/components/DateInput/components/ModalWrapper/types.d.ts.map +1 -0
  25. package/dist/components/DateInput/components/ModalWrapper/types.js +1 -0
  26. package/dist/components/DateInput/index.d.ts +1 -1
  27. package/dist/components/DateInput/index.d.ts.map +1 -1
  28. package/dist/components/DateInput/index.js +63 -34
  29. package/dist/components/DateInput/styles.d.ts +7 -2
  30. package/dist/components/DateInput/styles.d.ts.map +1 -1
  31. package/dist/components/DateInput/styles.js +10 -3
  32. package/dist/components/DateInput/types.d.ts +1 -0
  33. package/dist/components/DateInput/types.d.ts.map +1 -1
  34. package/dist/components/DatePicker/components/DatePickerContent.d.ts.map +1 -1
  35. package/dist/components/DatePicker/components/DatePickerContent.js +2 -0
  36. package/dist/components/DatePicker/components/DateYearPicker.d.ts.map +1 -1
  37. package/dist/components/DatePicker/components/DateYearPicker.js +2 -0
  38. package/dist/components/Input/styles.d.ts.map +1 -1
  39. package/dist/components/Input/styles.js +2 -2
  40. package/dist/components/Modal/ModalExample.d.ts +4 -0
  41. package/dist/components/Modal/ModalExample.d.ts.map +1 -0
  42. package/dist/components/Modal/ModalExample.js +66 -0
  43. package/dist/components/Modal/index.d.ts +1 -1
  44. package/dist/components/Modal/index.d.ts.map +1 -1
  45. package/dist/components/Modal/index.js +11 -13
  46. package/dist/components/Modal/modal.test.js +11 -9
  47. package/dist/components/MultipleSelect/MultipleSelect.test.js +9 -9
  48. package/dist/components/MultipleSelect/components/OptionsArea/index.js +4 -4
  49. package/dist/components/MultipleSelect/components/SelectArea/index.js +4 -4
  50. package/dist/components/MultipleSelect/index.d.ts.map +1 -1
  51. package/dist/components/MultipleSelect/index.js +1 -1
  52. package/dist/components/MultipleSelect/types.d.ts +1 -1
  53. package/dist/components/MultipleSelect/types.d.ts.map +1 -1
  54. package/dist/components/Pagination/index.d.ts.map +1 -1
  55. package/dist/components/Pagination/index.js +23 -10
  56. package/dist/components/Pagination/styles.js +3 -2
  57. package/dist/components/ReactPortal/index.d.ts +8 -0
  58. package/dist/components/ReactPortal/index.d.ts.map +1 -0
  59. package/dist/components/ReactPortal/index.js +58 -0
  60. package/dist/components/ReactPortal/reactPortal.test.d.ts +2 -0
  61. package/dist/components/ReactPortal/reactPortal.test.d.ts.map +1 -0
  62. package/dist/components/ReactPortal/reactPortal.test.js +26 -0
  63. package/dist/components/ReactPortal/utils/createWrapperAndApprendToBody.d.ts +2 -0
  64. package/dist/components/ReactPortal/utils/createWrapperAndApprendToBody.d.ts.map +1 -0
  65. package/dist/components/ReactPortal/utils/createWrapperAndApprendToBody.js +13 -0
  66. package/dist/components/Select/components/OptionsSelect/index.d.ts +4 -0
  67. package/dist/components/Select/components/OptionsSelect/index.d.ts.map +1 -0
  68. package/dist/components/Select/components/OptionsSelect/index.js +91 -0
  69. package/dist/components/Select/components/OptionsSelect/styles.d.ts +265 -0
  70. package/dist/components/Select/components/OptionsSelect/styles.d.ts.map +1 -0
  71. package/dist/components/Select/components/OptionsSelect/styles.js +32 -0
  72. package/dist/components/Select/components/OptionsSelect/types.d.ts +16 -0
  73. package/dist/components/Select/components/OptionsSelect/types.d.ts.map +1 -0
  74. package/dist/components/Select/components/OptionsSelect/types.js +1 -0
  75. package/dist/components/Select/index.d.ts.map +1 -1
  76. package/dist/components/Select/index.js +61 -27
  77. package/dist/components/Select/select.test.js +14 -0
  78. package/dist/components/Select/styles.d.ts +5 -7
  79. package/dist/components/Select/styles.d.ts.map +1 -1
  80. package/dist/components/Select/styles.js +26 -16
  81. package/dist/components/Select/types.d.ts +7 -2
  82. package/dist/components/Select/types.d.ts.map +1 -1
  83. package/dist/components/Table/styles.d.ts.map +1 -1
  84. package/dist/components/Table/styles.js +8 -2
  85. package/dist/index.d.ts +1 -0
  86. package/dist/index.d.ts.map +1 -1
  87. package/dist/index.js +9 -0
  88. 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"}
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { ModalWrapperProps } from './types';
3
+ export declare const ModalWrapper: import("react").ForwardRefExoticComponent<ModalWrapperProps & import("react").RefAttributes<HTMLDivElement>>;
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/DateInput/components/ModalWrapper/index.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,YAAY,8GA+BxB,CAAC"}
@@ -0,0 +1,43 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.ModalWrapper = void 0;
7
+
8
+ var _react = require("react");
9
+
10
+ var _useDisableBodyScroll = require("src/shared/hooks/useDisableBodyScroll");
11
+
12
+ var _styles = require("./styles");
13
+
14
+ var _jsxRuntime = require("react/jsx-runtime");
15
+
16
+ var ModalWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
17
+ var open = _ref.open,
18
+ _ref$left = _ref.left,
19
+ left = _ref$left === void 0 ? '50vw' : _ref$left,
20
+ _ref$top = _ref.top,
21
+ top = _ref$top === void 0 ? '' : _ref$top,
22
+ _ref$offsetX = _ref.offsetX,
23
+ offsetX = _ref$offsetX === void 0 ? '0px' : _ref$offsetX,
24
+ _ref$disableScrollOnO = _ref.disableScrollOnOpen,
25
+ disableScrollOnOpen = _ref$disableScrollOnO === void 0 ? true : _ref$disableScrollOnO,
26
+ maxWidth = _ref.maxWidth,
27
+ children = _ref.children;
28
+ var optionsContainerRef = (0, _react.useRef)(null);
29
+ (0, _react.useImperativeHandle)(ref, function () {
30
+ return optionsContainerRef.current;
31
+ });
32
+ (0, _useDisableBodyScroll.useDisableBodyScroll)(open && disableScrollOnOpen);
33
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ModalWrapperContainer, {
34
+ ref: optionsContainerRef,
35
+ open: open,
36
+ maxWidth: typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth,
37
+ left: "calc(".concat(left, " + ").concat(offsetX, ")"),
38
+ top: top,
39
+ children: children
40
+ });
41
+ });
42
+ exports.ModalWrapper = ModalWrapper;
43
+ ModalWrapper.displayName = 'ModalWrapper';