@pedidopago/ui 1.2.4 → 1.3.1

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 (81) hide show
  1. package/dist/components/Alert/index.d.ts.map +1 -1
  2. package/dist/components/Alert/index.js +2 -1
  3. package/dist/components/Alert/styles.js +1 -1
  4. package/dist/components/Alert/types.d.ts +2 -1
  5. package/dist/components/Alert/types.d.ts.map +1 -1
  6. package/dist/components/Card/card.test.tsx.d.ts +2 -0
  7. package/dist/components/Card/card.test.tsx.d.ts.map +1 -0
  8. package/dist/components/Card/card.test.tsx.js +41 -0
  9. package/dist/components/Card/index.d.ts +2 -2
  10. package/dist/components/Card/index.d.ts.map +1 -1
  11. package/dist/components/Card/index.js +25 -69
  12. package/dist/components/Card/styles.d.ts +2 -52
  13. package/dist/components/Card/styles.d.ts.map +1 -1
  14. package/dist/components/Card/styles.js +7 -80
  15. package/dist/components/Card/types.d.ts +12 -37
  16. package/dist/components/Card/types.d.ts.map +1 -1
  17. package/dist/components/DateInput/styles.d.ts +1 -1
  18. package/dist/components/Flex/styles.d.ts +1 -0
  19. package/dist/components/Flex/styles.d.ts.map +1 -1
  20. package/dist/components/Grid/styles.d.ts +1 -0
  21. package/dist/components/Grid/styles.d.ts.map +1 -1
  22. package/dist/components/Icon/data/form.d.ts +9 -0
  23. package/dist/components/Icon/data/form.d.ts.map +1 -0
  24. package/dist/components/Icon/data/form.js +248 -0
  25. package/dist/components/Icon/index.js +1 -1
  26. package/dist/components/Icon/scripts/build.d.ts.map +1 -1
  27. package/dist/components/Icon/scripts/build.js +9 -3
  28. package/dist/components/Icon/types.d.ts +1 -1
  29. package/dist/components/Icon/types.d.ts.map +1 -1
  30. package/dist/components/Icon/utils/allIcons.d.ts.map +1 -1
  31. package/dist/components/Icon/utils/allIcons.js +3 -1
  32. package/dist/components/Input/index.d.ts.map +1 -1
  33. package/dist/components/Input/index.js +15 -1
  34. package/dist/components/Modal/index.d.ts +2 -2
  35. package/dist/components/Modal/index.d.ts.map +1 -1
  36. package/dist/components/Modal/index.js +43 -20
  37. package/dist/components/Modal/styles.d.ts +15 -2
  38. package/dist/components/Modal/styles.d.ts.map +1 -1
  39. package/dist/components/Modal/styles.js +25 -7
  40. package/dist/components/Modal/types.d.ts +6 -5
  41. package/dist/components/Modal/types.d.ts.map +1 -1
  42. package/dist/components/MultipleSelect/components/SelectArea/Label.js +1 -1
  43. package/dist/components/Select/index.d.ts.map +1 -1
  44. package/dist/components/Select/index.js +52 -28
  45. package/dist/components/Select/styles.d.ts +13 -0
  46. package/dist/components/Select/styles.d.ts.map +1 -1
  47. package/dist/components/Select/styles.js +22 -4
  48. package/dist/components/Select/types.d.ts +2 -0
  49. package/dist/components/Select/types.d.ts.map +1 -1
  50. package/dist/components/Spinner/styles.d.ts +1 -0
  51. package/dist/components/Spinner/styles.d.ts.map +1 -1
  52. package/dist/components/Table/styles.d.ts.map +1 -1
  53. package/dist/components/Table/styles.js +56 -8
  54. package/dist/components/Tag/styles.d.ts +3 -0
  55. package/dist/components/Tag/styles.d.ts.map +1 -1
  56. package/dist/components/Tooltip/index.d.ts.map +1 -1
  57. package/dist/components/Tooltip/index.js +10 -26
  58. package/dist/components/Tooltip/styles.d.ts.map +1 -1
  59. package/dist/components/Tooltip/styles.js +13 -20
  60. package/dist/components/Tooltip/types.d.ts +1 -1
  61. package/dist/components/Tooltip/types.d.ts.map +1 -1
  62. package/dist/components/Tooltip/util.d.ts +0 -4
  63. package/dist/components/Tooltip/util.d.ts.map +1 -1
  64. package/dist/components/Tooltip/util.js +1 -87
  65. package/dist/components/Typography/index.js +1 -1
  66. package/dist/components/Typography/styles.d.ts +1 -1
  67. package/dist/index.d.ts +8 -7
  68. package/dist/index.d.ts.map +1 -1
  69. package/dist/index.js +30 -21
  70. package/dist/shared/hooks/useDisableBodyScroll.js +2 -2
  71. package/dist/shared/hooks/useWindowSize.d.ts +5 -0
  72. package/dist/shared/hooks/useWindowSize.d.ts.map +1 -0
  73. package/dist/shared/hooks/useWindowSize.js +46 -0
  74. package/dist/shared/theme/hooks/useTheme.d.ts +1 -0
  75. package/dist/shared/theme/hooks/useTheme.d.ts.map +1 -1
  76. package/dist/shared/theme/theme.d.ts +1 -0
  77. package/dist/shared/theme/theme.d.ts.map +1 -1
  78. package/dist/shared/theme/theme.js +1 -0
  79. package/dist/utils/getColorValue.d.ts +1 -9
  80. package/dist/utils/getColorValue.d.ts.map +1 -1
  81. package/package.json +1 -1
@@ -5,15 +5,33 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.Modal = Modal;
7
7
 
8
+ var _styles = require("./styles");
9
+
10
+ var _react = require("react");
11
+
8
12
  var _useDisableBodyScroll = require("../../shared/hooks/useDisableBodyScroll");
9
13
 
10
14
  var _useKeyPress = require("../../shared/hooks/useKeyPress");
11
15
 
12
- var _styles = require("./styles");
16
+ var _useWindowSize2 = require("../../shared/hooks/useWindowSize");
13
17
 
14
18
  var _jsxRuntime = require("react/jsx-runtime");
15
19
 
20
+ var _excluded = ["open", "left", "top", "anchorX", "anchorY", "offsetX", "offsetY", "hideScrollBar", "hideOverlay", "disableScrollOnOpen", "maxWidth", "maxHeight", "onClose"];
21
+
22
+ 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; }
23
+
24
+ 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; }
25
+
26
+ 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; }
27
+
28
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
29
+
30
+ 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; }
31
+
16
32
  function Modal(_ref) {
33
+ var _containerRef$current, _containerRef$current2;
34
+
17
35
  var open = _ref.open,
18
36
  _ref$left = _ref.left,
19
37
  left = _ref$left === void 0 ? '50vw' : _ref$left,
@@ -31,18 +49,21 @@ function Modal(_ref) {
31
49
  hideScrollBar = _ref$hideScrollBar === void 0 ? false : _ref$hideScrollBar,
32
50
  _ref$hideOverlay = _ref.hideOverlay,
33
51
  hideOverlay = _ref$hideOverlay === void 0 ? false : _ref$hideOverlay,
52
+ _ref$disableScrollOnO = _ref.disableScrollOnOpen,
53
+ disableScrollOnOpen = _ref$disableScrollOnO === void 0 ? true : _ref$disableScrollOnO,
34
54
  maxWidth = _ref.maxWidth,
35
55
  maxHeight = _ref.maxHeight,
36
56
  onClose = _ref.onClose,
37
- children = _ref.children;
38
- // TODO
39
- // Finalizar testes
40
- // Finalizar documentação Dialog
41
- // Finalizar testes do Dialog
57
+ rest = _objectWithoutProperties(_ref, _excluded);
58
+
59
+ var _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
60
+ windowHeight = _useWindowSize.height;
61
+
62
+ var containerRef = (0, _react.useRef)(null);
42
63
  (0, _useKeyPress.useKeyPress)('Escape', function () {
43
64
  return onClose && onClose();
44
65
  });
45
- (0, _useDisableBodyScroll.useDisableBodyScroll)(open);
66
+ (0, _useDisableBodyScroll.useDisableBodyScroll)(open && disableScrollOnOpen);
46
67
 
47
68
  function getAnchorTranslate() {
48
69
  var percentageX = 0;
@@ -96,25 +117,27 @@ function Modal(_ref) {
96
117
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
97
118
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, {
98
119
  style: {
99
- // display: open ? 'block' : 'none',
100
120
  opacity: open && !hideOverlay ? 0.1 : 0,
101
121
  pointerEvents: open ? 'auto' : 'none'
102
122
  },
103
123
  onClick: function onClick() {
104
124
  return onClose();
105
125
  }
106
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
107
- style: {
108
- left: "calc(".concat(left, " + ").concat(offsetX, ")"),
109
- top: "calc(".concat(top, " + ").concat(offsetY, ")"),
110
- transform: "".concat(getAnchorTranslate(), " scale(").concat(open ? 1 : 0.8, ")"),
111
- opacity: open ? 1 : 0,
112
- pointerEvents: open ? 'auto' : 'none'
113
- },
114
- maxWidth: maxWidth,
115
- maxHeight: maxHeight,
116
- hideScrollBar: hideScrollBar,
117
- children: children
126
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ModalContainer, {
127
+ ref: containerRef,
128
+ open: open,
129
+ maxWidth: typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth,
130
+ maxHeight: "".concat(windowHeight - (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : (_containerRef$current2 = _containerRef$current.getBoundingClientRect()) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.y) || 0), "px"),
131
+ left: "calc(".concat(left, " + ").concat(offsetX, ")"),
132
+ top: "calc(".concat(top, " + ").concat(offsetY, ")"),
133
+ anchorTranslate: getAnchorTranslate(),
134
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ModalElement, _objectSpread(_objectSpread({
135
+ open: open,
136
+ maxHeight: typeof maxHeight === 'number' ? "".concat(maxHeight, "px") : maxHeight,
137
+ hideScrollBar: hideScrollBar
138
+ }, rest), {}, {
139
+ children: rest.children
140
+ }))
118
141
  })]
119
142
  });
120
143
  }
@@ -1,15 +1,28 @@
1
1
  /// <reference types="react" />
2
2
  import { Theme } from '@emotion/react';
3
- export declare const Container: import("@emotion/styled").StyledComponent<{
3
+ interface ModalContainerProps {
4
+ open: boolean;
5
+ maxWidth?: string;
6
+ maxHeight?: string;
7
+ anchorTranslate: string;
8
+ left: string;
9
+ top: string;
10
+ }
11
+ export declare const ModalContainer: import("@emotion/styled").StyledComponent<{
12
+ theme?: Theme | undefined;
13
+ as?: import("react").ElementType<any> | undefined;
14
+ } & ModalContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
15
+ export declare const ModalElement: import("@emotion/styled").StyledComponent<{
4
16
  theme?: Theme | undefined;
5
17
  as?: import("react").ElementType<any> | undefined;
6
18
  } & {
19
+ open: boolean;
7
20
  maxHeight?: string | undefined;
8
- maxWidth?: string | undefined;
9
21
  hideScrollBar?: boolean | undefined;
10
22
  }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
11
23
  export declare const Overlay: import("@emotion/styled").StyledComponent<{
12
24
  theme?: Theme | undefined;
13
25
  as?: import("react").ElementType<any> | undefined;
14
26
  }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
27
+ export {};
15
28
  //# sourceMappingURL=styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAO,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C,eAAO,MAAM,SAAS;;;;;;;yGAwDpB,CAAC;AAEH,eAAO,MAAM,OAAO;;;yGAelB,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAO,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C,UAAU,mBAAmB;IAC3B,IAAI,EAAE,OAAO,CAAC;IAEd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,eAAe,EAAE,MAAM,CAAC;IAExB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,cAAc;;;+HAqBzB,CAAC;AAEH,eAAO,MAAM,YAAY;;;;UACjB,OAAO;;;yGA6Cb,CAAC;AAEH,eAAO,MAAM,OAAO;;;yGAelB,CAAC"}
@@ -3,28 +3,46 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.Overlay = exports.Container = void 0;
6
+ exports.Overlay = exports.ModalElement = exports.ModalContainer = void 0;
7
7
 
8
8
  var _styled = _interopRequireDefault(require("@emotion/styled"));
9
9
 
10
10
  var _react = require("@emotion/react");
11
11
 
12
- var _templateObject, _templateObject2;
12
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
13
+
14
+ var _excluded = ["theme"],
15
+ _excluded2 = ["theme"];
13
16
 
14
17
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
18
 
16
19
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
17
20
 
18
- var Container = _styled.default.div(function (props) {
19
- var theme = props.theme;
20
- return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border-radius: ", ";\n\n width: calc(100% - 32px);\n\n max-width: ", ";\n max-height: ", ";\n position: fixed;\n\n overflow-y: auto;\n overflow-x: hidden;\n\n &::-webkit-scrollbar {\n width: 6px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: ", ";\n background: ", ";\n }\n\n ", "\n\n background: ", ";\n box-shadow: ", ";\n\n transition: transform ease ", ", opacity linear ", ";\n\n z-index: ", ";\n\n &:focus {\n outline: 3px solid black;\n }\n "])), theme.borderRadius.default, props.maxWidth, props.maxHeight, props.theme.borderRadius.default, props.theme.colors.primary.default, props.hideScrollBar && "::-webkit-scrollbar {\n display: none;\n }\n \n scrollbar-width: none;\n \n -ms-overflow-style: none;", theme.colorMode === 'light' ? theme.colors.background.light : theme.colors.neutral.black, theme.colorMode === 'light' ? theme.shadow.level1 : "0 4px 8px ".concat(theme.colors.neutral.black), theme.transition.speed, theme.transition.speed, theme.zIndex.level24);
21
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
22
+
23
+ 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; }
24
+
25
+ var ModalContainer = _styled.default.div(function (_ref) {
26
+ var theme = _ref.theme,
27
+ props = _objectWithoutProperties(_ref, _excluded);
28
+
29
+ return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n\n padding-bottom: 16px;\n\n width: 100%;\n max-width: ", ";\n max-height: ", ";\n\n position: fixed;\n left: ", ";\n top: ", ";\n transform: ", ";\n\n opacity: ", ";\n\n pointer-events: ", ";\n\n transition: opacity ease ", ";\n "])), props.maxWidth, props.maxHeight, props.left, props.top, props.anchorTranslate, props.open ? 1 : 0, props.open ? 'auto' : 'none', theme.transition.speed);
30
+ });
31
+
32
+ exports.ModalContainer = ModalContainer;
33
+
34
+ var ModalElement = _styled.default.div(function (_ref2) {
35
+ var theme = _ref2.theme,
36
+ props = _objectWithoutProperties(_ref2, _excluded2);
37
+
38
+ return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n max-height: ", ";\n\n border-radius: ", ";\n\n z-index: ", ";\n overflow-y: auto;\n overflow-x: hidden;\n\n transform: scale(", ");\n\n background: ", ";\n box-shadow: ", ";\n\n transition: transform ease ", ";\n\n &::-webkit-scrollbar {\n width: 6px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: ", ";\n background: ", ";\n }\n\n ", "\n "])), props.maxHeight, theme.borderRadius.default, theme.zIndex.level24, props.open ? 1 : 0.8, theme.colors.background.light, theme.shadow.level1, theme.transition.speed, theme.borderRadius.default, theme.colors.primary.default, props.hideScrollBar && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ::-webkit-scrollbar {\n display: none;\n }\n\n scrollbar-width: none;\n\n -ms-overflow-style: none;\n "]))));
21
39
  });
22
40
 
23
- exports.Container = Container;
41
+ exports.ModalElement = ModalElement;
24
42
 
25
43
  var Overlay = _styled.default.div(function (props) {
26
44
  var theme = props.theme;
27
- return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: fixed;\n left: 0px;\n right: 0px;\n top: 0px;\n bottom: 0px;\n\n background: ", ";\n opacity: 0;\n\n transition: opacity linear ", ";\n "])), theme.colors.neutral.neutral5, theme.transition.speed);
45
+ return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: fixed;\n left: 0px;\n right: 0px;\n top: 0px;\n bottom: 0px;\n\n background: ", ";\n opacity: 0;\n\n transition: opacity ease ", ";\n "])), theme.colors.neutral.neutral5, theme.transition.speed);
28
46
  });
29
47
 
30
48
  exports.Overlay = Overlay;
@@ -1,7 +1,7 @@
1
- import { ReactNode } from 'react';
1
+ import { HTMLAttributes } from 'react';
2
2
  export declare type AnchorX = 'left' | 'center' | 'right' | number;
3
3
  export declare type AnchorY = 'top' | 'center' | 'bottom' | number;
4
- export interface IModalProps {
4
+ export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
5
5
  /** If the modal is open or not. */
6
6
  open: boolean;
7
7
  /** Optional. Sets the left position where the modal will be shown. */
@@ -21,15 +21,16 @@ export interface IModalProps {
21
21
  /** Optional. Offsets the Modal vertically. */
22
22
  offsetY?: string;
23
23
  /** The max width of the Modal. */
24
- maxWidth?: string;
24
+ maxWidth?: string | number;
25
25
  /** The max height of the Modal. */
26
- maxHeight?: string;
26
+ maxHeight?: string | number;
27
27
  /** Handler called once the Modal is triggered to close. */
28
28
  onClose: () => void;
29
29
  /** Optional. Will hide the scroll bar if the content inside a container is too big. */
30
30
  hideScrollBar?: boolean;
31
31
  /** Indicates if the overlay will be visible or not. */
32
32
  hideOverlay?: boolean;
33
- children: ReactNode;
33
+ /** Optional. Will disable the scroll body scroll. */
34
+ disableScrollOnOpen?: boolean;
34
35
  }
35
36
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,oBAAY,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAC3D,oBAAY,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,WAAW;IAC1B,mCAAmC;IACnC,IAAI,EAAE,OAAO,CAAC;IAEd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;qCAEiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;qCAEiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,uFAAuF;IACvF,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,QAAQ,EAAE,SAAS,CAAC;CACrB"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,oBAAY,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAC3D,oBAAY,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,mCAAmC;IACnC,IAAI,EAAE,OAAO,CAAC;IAEd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;qCAEiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;qCAEiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B,2DAA2D;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,uFAAuF;IACvF,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,qDAAqD;IACrD,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B"}
@@ -26,7 +26,7 @@ var Label = _styled.default.label(_templateObject || (_templateObject = _taggedT
26
26
  return theme.fontWeight['500'];
27
27
  }, function (_ref3) {
28
28
  var theme = _ref3.theme;
29
- return theme.fontSizes.xs;
29
+ return theme.fontSizes.xxs;
30
30
  }, function (_ref4) {
31
31
  var animate = _ref4.animate,
32
32
  theme = _ref4.theme;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAStC,QAAA,MAAM,MAAM,kJAqGX,CAAC;AAGF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAQtC,QAAA,MAAM,MAAM,kJA8HX,CAAC;AAGF,eAAe,MAAM,CAAC"}
@@ -1,7 +1,5 @@
1
1
  "use strict";
2
2
 
3
- function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
-
5
3
  Object.defineProperty(exports, "__esModule", {
6
4
  value: true
7
5
  });
@@ -9,26 +7,20 @@ exports.default = void 0;
9
7
 
10
8
  var _react = require("react");
11
9
 
12
- var S = _interopRequireWildcard(require("./styles"));
10
+ var _styles = require("./styles");
13
11
 
14
12
  var _Typography = _interopRequireDefault(require("../Typography"));
15
13
 
16
14
  var _Icon = _interopRequireDefault(require("../Icon"));
17
15
 
18
- var _Modal = require("../Modal");
19
-
20
16
  var _List = _interopRequireDefault(require("../List"));
21
17
 
22
18
  var _jsxRuntime = require("react/jsx-runtime");
23
19
 
24
- var _excluded = ["label", "options", "alert", "helperText"];
20
+ var _excluded = ["label", "placeholder", "options", "alert", "helperText", "width"];
25
21
 
26
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
27
23
 
28
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
29
-
30
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
31
-
32
24
  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; }
33
25
 
34
26
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -55,9 +47,12 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
55
47
  var _containerRef$current, _containerRef$current2, _containerRef$current3, _containerRef$current4;
56
48
 
57
49
  var label = _ref.label,
50
+ _ref$placeholder = _ref.placeholder,
51
+ placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
58
52
  options = _ref.options,
59
53
  alert = _ref.alert,
60
54
  helperText = _ref.helperText,
55
+ width = _ref.width,
61
56
  rest = _objectWithoutProperties(_ref, _excluded);
62
57
 
63
58
  var containerRef = (0, _react.useRef)(null);
@@ -72,6 +67,11 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
72
67
  selectedOption = _useState4[0],
73
68
  setSelectedOption = _useState4[1];
74
69
 
70
+ var _useState5 = (0, _react.useState)(false),
71
+ _useState6 = _slicedToArray(_useState5, 2),
72
+ filled = _useState6[0],
73
+ setFilled = _useState6[1];
74
+
75
75
  var inputRef = (0, _react.useRef)(null);
76
76
  (0, _react.useImperativeHandle)(ref, function () {
77
77
  return inputRef.current;
@@ -82,7 +82,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
82
82
  var _nativeInputValueSett;
83
83
 
84
84
  var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
85
- nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : (_nativeInputValueSett = nativeInputValueSetter.set) === null || _nativeInputValueSett === void 0 ? void 0 : _nativeInputValueSett.call(inputRef.current, options[option].value);
85
+ nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : (_nativeInputValueSett = nativeInputValueSetter.set) === null || _nativeInputValueSett === void 0 ? void 0 : _nativeInputValueSett.call(inputRef.current, option === undefined ? '' : options[option].value);
86
86
  var event = new Event('input', {
87
87
  bubbles: true
88
88
  });
@@ -103,27 +103,37 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
103
103
  }
104
104
  }, []);
105
105
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
106
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(S.SelectContainer, {
107
- ref: containerRef,
106
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SelectContainer, {
107
+ filled: filled || !!placeholder,
108
108
  alert: alert,
109
109
  disabled: !!rest.disabled,
110
+ width: width,
110
111
  tabIndex: rest.disabled ? -1 : 0,
111
112
  onFocus: function onFocus() {
112
113
  if (!rest.disabled) setOptionsMenuOpen(true);
113
114
  },
115
+ className: rest.className,
116
+ style: rest.style,
114
117
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
118
+ ref: containerRef,
115
119
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
116
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
117
- fontSize: "xxs",
118
- variant: "span",
119
- color: "inherit",
120
- children: label
121
- })
122
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
120
+ children: label
121
+ }), selectedOption === undefined ?
122
+ /*#__PURE__*/
123
+ // Value label
124
+ (0, _jsxRuntime.jsx)(_Typography.default, {
125
+ fontSize: "xs",
126
+ fontWeight: "500",
127
+ color: "neutral.neutral3",
128
+ children: placeholder || ''
129
+ }) :
130
+ /*#__PURE__*/
131
+ // Placeholder label
132
+ (0, _jsxRuntime.jsx)(_Typography.default, {
123
133
  fontSize: "xs",
124
134
  fontWeight: "500",
125
135
  color: "inherit",
126
- children: selectedOption === undefined ? '' : options[selectedOption].label
136
+ children: options[selectedOption].label
127
137
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
128
138
  name: "chevron-down"
129
139
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
@@ -146,24 +156,38 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
146
156
  }), !!helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
147
157
  fontSize: "xxs",
148
158
  children: helperText
149
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread({
159
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
150
160
  ref: inputRef,
151
161
  tabIndex: -1
152
- }, rest))]
153
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
162
+ }, rest), {}, {
163
+ onChange: function onChange(e) {
164
+ var _rest$onChange;
165
+
166
+ setFilled(!!e.currentTarget.value);
167
+ (_rest$onChange = rest.onChange) === null || _rest$onChange === void 0 ? void 0 : _rest$onChange.call(rest, e);
168
+ }
169
+ }))]
170
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionsModal, {
154
171
  open: optionsMenuOpen,
155
172
  left: "".concat((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().left, "px"),
156
- top: "".concat((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getBoundingClientRect().top, "px"),
173
+ top: "".concat((((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getBoundingClientRect().top) || 0) + 10, "px"),
157
174
  anchorX: "left",
158
175
  anchorY: "top",
159
176
  offsetY: "".concat((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getBoundingClientRect().height, "px"),
160
177
  maxWidth: "".concat((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.getBoundingClientRect().width, "px"),
161
178
  hideOverlay: true,
179
+ disableScrollOnOpen: false,
162
180
  onClose: function onClose() {
163
181
  return setOptionsMenuOpen(false);
164
182
  },
165
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, {
166
- children: options.map(function (option, i) {
183
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.OptionsModalList, {
184
+ children: [!!placeholder && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionPlaceholder, {
185
+ item: true,
186
+ onClick: function onClick() {
187
+ return selectOption(undefined);
188
+ },
189
+ children: placeholder
190
+ }), options.map(function (option, i) {
167
191
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, {
168
192
  item: true,
169
193
  onClick: function onClick() {
@@ -171,7 +195,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
171
195
  },
172
196
  children: option.label
173
197
  }, option.value);
174
- })
198
+ })]
175
199
  })
176
200
  })]
177
201
  });
@@ -4,4 +4,17 @@ export declare const SelectContainer: import("@emotion/styled").StyledComponent<
4
4
  theme?: import("@emotion/react").Theme | undefined;
5
5
  as?: import("react").ElementType<any> | undefined;
6
6
  } & SelectContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
7
+ export declare const OptionsModal: import("@emotion/styled").StyledComponent<import("../Modal/types").ModalProps & {
8
+ theme?: import("@emotion/react").Theme | undefined;
9
+ }, {}, {}>;
10
+ export declare const OptionsModalList: import("@emotion/styled").StyledComponent<import("../List/types").ListProps & {
11
+ children?: import("react").ReactNode;
12
+ } & {
13
+ theme?: import("@emotion/react").Theme | undefined;
14
+ }, {}, {}>;
15
+ export declare const OptionPlaceholder: import("@emotion/styled").StyledComponent<import("../List/types").ListProps & {
16
+ children?: import("react").ReactNode;
17
+ } & {
18
+ theme?: import("@emotion/react").Theme | undefined;
19
+ }, {}, {}>;
7
20
  //# sourceMappingURL=styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,eAAe;;;gIAoK1B,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,eAAe;;;gIAyL1B,CAAC;AAEH,eAAO,MAAM,YAAY;;UAKvB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;UAI3B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;UAI5B,CAAC"}
@@ -3,20 +3,38 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.SelectContainer = void 0;
6
+ exports.SelectContainer = exports.OptionsModalList = exports.OptionsModal = exports.OptionPlaceholder = void 0;
7
7
 
8
8
  var _react = require("@emotion/react");
9
9
 
10
10
  var _styled = _interopRequireDefault(require("@emotion/styled"));
11
11
 
12
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
12
+ var _List = _interopRequireDefault(require("../List"));
13
+
14
+ var _Modal = require("../Modal");
15
+
16
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
13
17
 
14
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
19
 
16
20
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
17
21
 
18
22
  var SelectContainer = _styled.default.div(function (props) {
19
- return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n outline: none;\n\n width: 100%;\n\n ", "\n\n & > div {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n\n border-radius: ", ";\n padding: 0 20px;\n\n width: 100%;\n height: 56px;\n\n position: relative;\n\n cursor: pointer;\n\n color: ", ";\n\n transition: background-color ease;\n transition-duration: ", ";\n\n ", "\n\n ", "\n\n & > label {\n position: absolute;\n left: 20px;\n top: -2px;\n transform: translateY(-50%);\n\n color: ", ";\n\n transition: color ease;\n transition-duration: ", ";\n }\n\n // Chevron Down icon\n & > svg {\n flex-shrink: 0;\n\n transform: rotate(0deg);\n\n color: ", ";\n\n transition: transform ease;\n transition-duration: ", ";\n }\n\n & > fieldset {\n border: 2px solid;\n border-color: ", ";\n border-radius: ", ";\n padding: 0 16px;\n\n position: absolute;\n left: 0px;\n right: 0px;\n top: 0px;\n bottom: 0px;\n\n pointer-events: none;\n\n transition: border-color ease;\n transition-duration: ", ";\n\n &:last-of-type {\n border-radius: calc(", " + 2px);\n padding: 0 18px;\n\n border-color: transparent;\n left: -2px;\n right: -2px;\n top: -2px;\n bottom: -2px;\n }\n\n & > legend {\n line-height: 2px;\n user-select: none;\n padding: 0 4px;\n\n & > span {\n color: transparent;\n }\n }\n }\n }\n\n // Helper text\n & > p {\n margin: 8px 20px;\n\n ", "\n }\n\n & > input {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n }\n "])), !props.disabled && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:hover {\n & > div {\n color: ", ";\n\n & > label {\n color: ", ";\n }\n\n & > fieldset {\n &:first-of-type {\n border-color: ", ";\n }\n }\n }\n }\n\n &:focus {\n & > div {\n color: ", ";\n\n & > svg {\n transform: rotate(180deg);\n }\n\n & > fieldset {\n &:first-of-type {\n border-color: ", ";\n }\n &:last-of-type {\n border-color: ", ";\n }\n }\n }\n }\n "])), props.theme.colors.neutral.black, props.theme.colors.neutral.neutral5, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.hover, props.theme.colors.neutral.black, props.alert ? props.theme.colors[props.alert].default : props.theme.colors.primary.hover, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.disabled), props.theme.borderRadius.default, props.theme.colors.neutral.neutral5, props.theme.transition.speed, props.alert && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background: ", "33;\n "])), props.theme.colors[props.alert].blurred), props.disabled && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background: ", ";\n cursor: default;\n "])), props.theme.colors.neutral.neutral1), props.theme.colors.neutral.neutral3, props.theme.transition.speed, props.theme.colors.neutral.neutral5, props.theme.transition.speed, props.alert && !props.disabled ? props.theme.colors[props.alert].default : props.theme.colors.neutral.neutral2, props.theme.borderRadius.default, props.theme.transition.speed, props.theme.borderRadius.default, props.disabled && (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n color: ", ";\n "])), props.theme.colors.neutral.neutral3));
23
+ return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n outline: none;\n\n width: ", ";\n\n ", "\n\n & > div {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n\n border-radius: ", ";\n padding: 0 20px;\n\n width: 100%;\n height: 56px;\n\n position: relative;\n\n cursor: pointer;\n\n color: ", ";\n\n transition: background-color ease;\n transition-duration: ", ";\n\n ", "\n\n ", "\n\n & > label {\n position: absolute;\n left: 20px;\n top: 50%;\n transform: translateY(-50%);\n\n font-size: 1rem;\n font-weight: 500;\n\n color: ", ";\n\n transition: top ease, left ease, color ease;\n transition-duration: ", ";\n\n ", "\n }\n\n // Chevron Down icon\n & > svg {\n flex-shrink: 0;\n\n transform: rotate(0deg);\n\n color: ", ";\n\n transition: transform ease;\n transition-duration: ", ";\n }\n\n & > fieldset {\n border: 2px solid;\n border-color: ", ";\n border-radius: ", ";\n padding: 0 14px;\n\n position: absolute;\n left: 0px;\n right: 0px;\n top: 0px;\n bottom: 0px;\n\n pointer-events: none;\n\n transition: border-color ease;\n transition-duration: ", ";\n\n &:last-of-type {\n border-radius: calc(", " + 2px);\n padding: 0 16px;\n\n border-color: transparent;\n left: -2px;\n right: -2px;\n top: -2px;\n bottom: -2px;\n }\n\n & > legend {\n display: ", ";\n\n line-height: 2px;\n user-select: none;\n padding: 0 4px;\n\n & > span {\n color: transparent;\n }\n }\n }\n }\n\n // Helper text\n & > p {\n margin: 8px 20px;\n\n ", "\n }\n\n & > input {\n appearance: none;\n border: 0;\n\n width: 0px;\n position: absolute;\n opacity: 0;\n pointer-events: none;\n }\n "])), typeof props.width === 'string' ? props.width : typeof props.width === 'number' ? "".concat(props.width, "px") : '100%', !props.disabled && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:hover {\n & > div {\n color: ", ";\n\n & > label {\n color: ", ";\n }\n\n & > fieldset {\n &:first-of-type {\n border-color: ", ";\n }\n }\n }\n }\n\n &:focus {\n & > div {\n color: ", ";\n\n & > svg {\n transform: rotate(180deg);\n }\n\n & > fieldset {\n &:first-of-type {\n border-color: ", ";\n }\n &:last-of-type {\n border-color: ", ";\n }\n }\n }\n }\n "])), props.theme.colors.neutral.black, props.theme.colors.neutral.neutral5, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.hover, props.theme.colors.neutral.black, props.alert ? props.theme.colors[props.alert].default : props.theme.colors.primary.hover, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.disabled), props.theme.borderRadius.default, props.theme.colors.neutral.neutral5, props.theme.transition.speed, props.alert && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background: ", "33;\n "])), props.theme.colors[props.alert].blurred), props.disabled && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background: ", ";\n cursor: default;\n "])), props.theme.colors.neutral.neutral1), props.theme.colors.neutral.neutral3, props.theme.transition.speed, props.filled && (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n left: 20px;\n top: -1px;\n\n font-size: 0.875rem;\n "]))), props.theme.colors.neutral.neutral5, props.theme.transition.speed, props.alert && !props.disabled ? props.theme.colors[props.alert].default : props.theme.colors.neutral.neutral2, props.theme.borderRadius.default, props.theme.transition.speed, props.theme.borderRadius.default, props.filled ? 'block' : 'none', props.disabled && (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: ", ";\n "])), props.theme.colors.neutral.neutral3));
20
24
  });
21
25
 
22
- exports.SelectContainer = SelectContainer;
26
+ exports.SelectContainer = SelectContainer;
27
+ var OptionsModal = (0, _styled.default)(_Modal.Modal)(function (_ref) {
28
+ var theme = _ref.theme;
29
+ return (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n border: 2px solid ", ";\n box-shadow: none;\n "])), theme.colors.neutral.neutral1);
30
+ });
31
+ exports.OptionsModal = OptionsModal;
32
+ var OptionsModalList = (0, _styled.default)(_List.default)(function () {
33
+ return (0, _react.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n border: none;\n "])));
34
+ });
35
+ exports.OptionsModalList = OptionsModalList;
36
+ var OptionPlaceholder = (0, _styled.default)(_List.default)(function (_ref2) {
37
+ var theme = _ref2.theme;
38
+ return (0, _react.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n color: ", ";\n "])), theme.colors.neutral.neutral3);
39
+ });
40
+ exports.OptionPlaceholder = OptionPlaceholder;
@@ -11,6 +11,8 @@ export interface SelectProps {
11
11
  }
12
12
  export interface SelectContainerProps {
13
13
  alert?: SelectAlertType;
14
+ filled: boolean;
14
15
  disabled: boolean;
16
+ width?: string | number;
15
17
  }
16
18
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe,GACvB,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;AAExB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;CACnB"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe,GACvB,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;AAExB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB"}
@@ -5,6 +5,7 @@ export declare const StyledSpinner: import("@emotion/styled").StyledComponent<{
5
5
  } & import("./types").ISpinnerProps & {
6
6
  theme?: {
7
7
  fontSizes: {
8
+ tiny: string;
8
9
  xxxs: string;
9
10
  xxs: string;
10
11
  xs: string;
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yGAwCzB,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yGAwCzB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Table/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,WAAW;;;uIAkGtB,CAAC;AAEH,eAAO,MAAM,cAAc;;;yGAG1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;0IA6DxB,CAAC;AAEH,eAAO,MAAM,eAAe;;;yGAE3B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;0IAiBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;yGAoB7B,CAAC;AAEF,eAAO,MAAM,eAAe;;;8HAyB3B,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Table/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,WAAW;;;uIAsGtB,CAAC;AAEH,eAAO,MAAM,cAAc;;;yGAG1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;0IAoExB,CAAC;AAEH,eAAO,MAAM,eAAe;;;yGAE3B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;0IAiBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;yGAsB7B,CAAC;AAEF,eAAO,MAAM,eAAe;;;8HA6B3B,CAAC"}