@spothero/ui 23.1.0 → 24.0.4-beta.0

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 (183) hide show
  1. package/dist/AccordionActionButton.d.ts +2 -0
  2. package/dist/index.cjs.js +50817 -0
  3. package/dist/index.cjs.js.map +1 -0
  4. package/dist/index.d.ts +2 -0
  5. package/dist/index.esm.js +50663 -0
  6. package/dist/index.esm.js.map +1 -0
  7. package/dist/styles/index.d.ts +2 -0
  8. package/package.json +32 -35
  9. package/dist/components/Accordion/Accordion.stories.js +0 -101
  10. package/dist/components/Accordion/AccordionActionButton.js +0 -32
  11. package/dist/components/Accordion/index.js +0 -45
  12. package/dist/components/Accordion/styles/index.js +0 -77
  13. package/dist/components/Alert/Alert.js +0 -91
  14. package/dist/components/Alert/Alert.stories.js +0 -64
  15. package/dist/components/Alert/index.js +0 -14
  16. package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +0 -169
  17. package/dist/components/AutoSuggestSelect/AutoSuggestSelect.stories.js +0 -23
  18. package/dist/components/AutoSuggestSelect/index.js +0 -14
  19. package/dist/components/Badge/Badge.js +0 -13
  20. package/dist/components/Badge/Badge.stories.js +0 -32
  21. package/dist/components/Badge/styles/index.js +0 -33
  22. package/dist/components/Button/Button.js +0 -71
  23. package/dist/components/Button/Button.spec.js +0 -25
  24. package/dist/components/Button/Button.styles.js +0 -166
  25. package/dist/components/Button/button-props.js +0 -73
  26. package/dist/components/Button/index.js +0 -21
  27. package/dist/components/Button/stories/button.js +0 -47
  28. package/dist/components/Button/stories/index.stories.js +0 -103
  29. package/dist/components/Button/stories/overview.js +0 -77
  30. package/dist/components/Card/Card.js +0 -28
  31. package/dist/components/Card/Card.stories.js +0 -33
  32. package/dist/components/Checkbox/Checkbox.js +0 -44
  33. package/dist/components/Checkbox/Checkbox.stories.js +0 -69
  34. package/dist/components/Checkbox/index.js +0 -14
  35. package/dist/components/Checkbox/styles/index.js +0 -90
  36. package/dist/components/Container/Container.js +0 -23
  37. package/dist/components/Container/Container.stories.js +0 -53
  38. package/dist/components/Container/Container.styles.js +0 -17
  39. package/dist/components/CreatableSelect/CreatableSelect.js +0 -148
  40. package/dist/components/CreatableSelect/CreatableSelect.stories.js +0 -69
  41. package/dist/components/CreatableSelect/index.js +0 -14
  42. package/dist/components/Divider/Divider.js +0 -34
  43. package/dist/components/Divider/Divider.stories.js +0 -40
  44. package/dist/components/Divider/Divider.styles.js +0 -21
  45. package/dist/components/Drawer/Drawer.js +0 -29
  46. package/dist/components/Drawer/Drawer.stories.js +0 -50
  47. package/dist/components/Drawer/index.js +0 -57
  48. package/dist/components/Drawer/styles/index.js +0 -108
  49. package/dist/components/FormControl/FormControl.js +0 -74
  50. package/dist/components/Grid/Grid.js +0 -35
  51. package/dist/components/Grid/Grid.stories.js +0 -117
  52. package/dist/components/Grid/Grid.styles.js +0 -18
  53. package/dist/components/Grid/GridItem.js +0 -23
  54. package/dist/components/Grid/GridItem.styles.js +0 -14
  55. package/dist/components/Grid/index.js +0 -21
  56. package/dist/components/Heading/Heading.js +0 -34
  57. package/dist/components/Heading/Heading.stories.js +0 -46
  58. package/dist/components/Heading/Heading.styles.js +0 -69
  59. package/dist/components/Icon/Icon.js +0 -13
  60. package/dist/components/Icon/Icon.stories.js +0 -40
  61. package/dist/components/Image/Image.js +0 -84
  62. package/dist/components/Image/Image.spec.js +0 -77
  63. package/dist/components/Image/Image.stories.js +0 -80
  64. package/dist/components/Input/Input.js +0 -49
  65. package/dist/components/Input/Input.stories.js +0 -63
  66. package/dist/components/Input/index.js +0 -14
  67. package/dist/components/Input/styles/index.js +0 -65
  68. package/dist/components/Link/Link.js +0 -13
  69. package/dist/components/Link/Link.stories.js +0 -52
  70. package/dist/components/Link/Link.styles.js +0 -45
  71. package/dist/components/List/List.js +0 -69
  72. package/dist/components/List/List.stories.js +0 -92
  73. package/dist/components/List/index.js +0 -21
  74. package/dist/components/List/styles/index.js +0 -17
  75. package/dist/components/List/styles/item.styles.js +0 -11
  76. package/dist/components/Loader/Loader.js +0 -53
  77. package/dist/components/Loader/Loader.stories.js +0 -124
  78. package/dist/components/Menu/Menu.js +0 -17
  79. package/dist/components/Menu/Menu.stories.js +0 -169
  80. package/dist/components/Menu/Menu.styles.js +0 -174
  81. package/dist/components/Menu/index.js +0 -57
  82. package/dist/components/Modal/Modal.js +0 -46
  83. package/dist/components/Modal/Modal.stories.js +0 -225
  84. package/dist/components/Modal/index.js +0 -33
  85. package/dist/components/Modal/styles/body.js +0 -39
  86. package/dist/components/Modal/styles/closeButton.js +0 -25
  87. package/dist/components/Modal/styles/dialog.js +0 -23
  88. package/dist/components/Modal/styles/dialogContainer.js +0 -21
  89. package/dist/components/Modal/styles/footer.js +0 -12
  90. package/dist/components/Modal/styles/header.js +0 -18
  91. package/dist/components/Modal/styles/index.js +0 -56
  92. package/dist/components/Modal/styles/overlay.js +0 -11
  93. package/dist/components/Popover/Popover.js +0 -34
  94. package/dist/components/Popover/Popover.stories.js +0 -87
  95. package/dist/components/Popover/PopoverArrow.js +0 -23
  96. package/dist/components/Popover/PopoverCloseButton.js +0 -23
  97. package/dist/components/Popover/PopoverContent.js +0 -42
  98. package/dist/components/Popover/index.js +0 -41
  99. package/dist/components/Popover/styles/index.js +0 -27
  100. package/dist/components/Popover/styles/popover-arrow.js +0 -14
  101. package/dist/components/Popover/styles/popover-body.js +0 -13
  102. package/dist/components/Popover/styles/popover-close-button.js +0 -40
  103. package/dist/components/Popover/styles/popover-content.js +0 -30
  104. package/dist/components/Popover/styles/popover-header.js +0 -12
  105. package/dist/components/Popover/styles/popper.js +0 -11
  106. package/dist/components/Progress/Progress.js +0 -42
  107. package/dist/components/Progress/Progress.stories.js +0 -90
  108. package/dist/components/Progress/Progress.styles.js +0 -107
  109. package/dist/components/Radio/Radio.js +0 -43
  110. package/dist/components/Radio/Radio.stories.js +0 -137
  111. package/dist/components/Radio/RadioGroup.js +0 -52
  112. package/dist/components/Radio/index.js +0 -21
  113. package/dist/components/Radio/styles/index.js +0 -119
  114. package/dist/components/RefreshedInput/Button/Button.js +0 -72
  115. package/dist/components/RefreshedInput/Button/Button.stories.js +0 -84
  116. package/dist/components/RefreshedInput/Button/index.js +0 -14
  117. package/dist/components/RefreshedInput/Button/styles/index.js +0 -34
  118. package/dist/components/RefreshedInput/FormControl/index.js +0 -175
  119. package/dist/components/RefreshedInput/Input/Input.js +0 -67
  120. package/dist/components/RefreshedInput/Input/Input.stories.js +0 -79
  121. package/dist/components/RefreshedInput/Input/index.js +0 -14
  122. package/dist/components/RefreshedInput/Input/styles/index.js +0 -33
  123. package/dist/components/RefreshedInput/Select/Select.js +0 -70
  124. package/dist/components/RefreshedInput/Select/Select.stories.js +0 -85
  125. package/dist/components/RefreshedInput/Select/index.js +0 -14
  126. package/dist/components/RefreshedInput/Select/styles/index.js +0 -34
  127. package/dist/components/RefreshedInput/index.js +0 -35
  128. package/dist/components/RefreshedInput/storyAid/index.js +0 -22
  129. package/dist/components/Select/Select.js +0 -55
  130. package/dist/components/Select/Select.stories.js +0 -67
  131. package/dist/components/Select/index.js +0 -14
  132. package/dist/components/Select/styles/index.js +0 -51
  133. package/dist/components/SelectionCard/SelectionCard.js +0 -67
  134. package/dist/components/SelectionCard/SelectionCard.stories.js +0 -91
  135. package/dist/components/SelectionCard/index.js +0 -14
  136. package/dist/components/Skeleton/Skeleton.stories.js +0 -31
  137. package/dist/components/Skeleton/Skeleton.styles.js +0 -10
  138. package/dist/components/Skeleton/index.js +0 -25
  139. package/dist/components/Spinner/Spinner.js +0 -34
  140. package/dist/components/Spinner/Spinner.stories.js +0 -109
  141. package/dist/components/Spinner/Spinner.styles.js +0 -67
  142. package/dist/components/Switch/Switch.js +0 -45
  143. package/dist/components/Switch/Switch.stories.js +0 -80
  144. package/dist/components/Switch/index.js +0 -14
  145. package/dist/components/Switch/styles/index.js +0 -42
  146. package/dist/components/Table/Table.js +0 -13
  147. package/dist/components/Table/Table.stories.js +0 -80
  148. package/dist/components/Table/Table.styles.js +0 -77
  149. package/dist/components/Table/index.js +0 -63
  150. package/dist/components/Tabs/Tabs.js +0 -35
  151. package/dist/components/Tabs/Tabs.stories.js +0 -44
  152. package/dist/components/Tabs/combineSizeWithVariant.js +0 -35
  153. package/dist/components/Tabs/index.js +0 -39
  154. package/dist/components/Tabs/styles/index.js +0 -71
  155. package/dist/components/Text/Text.js +0 -35
  156. package/dist/components/Text/Text.stories.js +0 -47
  157. package/dist/components/Text/Text.styles.js +0 -53
  158. package/dist/components/Text/combineAsWithVariant.js +0 -103
  159. package/dist/components/Text/options.js +0 -9
  160. package/dist/components/Textarea/Textarea.js +0 -49
  161. package/dist/components/Textarea/Textarea.stories.js +0 -62
  162. package/dist/components/Textarea/index.js +0 -14
  163. package/dist/components/Textarea/styles/index.js +0 -65
  164. package/dist/components/ThemeProvider/ThemeProvider.js +0 -47
  165. package/dist/components/ThemeProvider/ThemeProvider.stories.js +0 -52
  166. package/dist/components/Toast/Toast.stories.js +0 -84
  167. package/dist/components/ToggleButtonGroup/ToggleButtonGroup.js +0 -65
  168. package/dist/components/ToggleButtonGroup/ToggleButtonGroup.stories.js +0 -62
  169. package/dist/components/ToggleButtonGroup/index.js +0 -14
  170. package/dist/components/ToggleButtonGroup/styles/index.js +0 -48
  171. package/dist/components/index.js +0 -799
  172. package/dist/components/styles.js +0 -189
  173. package/dist/theme/base/breakpoints.js +0 -24
  174. package/dist/theme/base/colors.js +0 -144
  175. package/dist/theme/base/index.js +0 -80
  176. package/dist/theme/base/notifications.js +0 -197
  177. package/dist/theme/base/shadows.js +0 -16
  178. package/dist/theme/base/sizes.js +0 -89
  179. package/dist/theme/base/typography.js +0 -39
  180. package/dist/theme/base/zindices.js +0 -34
  181. package/dist/theme/global.js +0 -39
  182. package/dist/theme/index.js +0 -45
  183. package/dist/utils/Spaces.js +0 -21
@@ -1,148 +0,0 @@
1
- "use strict";
2
-
3
- var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
- var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
5
- var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
6
- var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
7
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
8
- var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
9
- var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
10
- var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
11
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
12
- var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
13
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
14
- _Object$defineProperty(exports, "__esModule", {
15
- value: true
16
- });
17
- exports["default"] = exports.CreatableSelectNode = void 0;
18
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
19
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
20
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
21
- var _react = _interopRequireWildcard(require("react"));
22
- var _creatable = _interopRequireDefault(require("react-select/creatable"));
23
- var _reactSelect = require("react-select");
24
- var _chevronDown = _interopRequireDefault(require("@spothero/icons/chevron-down"));
25
- var _react2 = require("@chakra-ui/react");
26
- var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
27
- var _Icon = _interopRequireDefault(require("../Icon/Icon"));
28
- var _excluded = ["id", "label", "isInvalid", "isLoading", "isRequired", "options", "placeholder", "errorMessage", "helperText", "innerRef"],
29
- _excluded2 = ["id", "label", "isInvalid", "isLoading", "isRequired", "options", "placeholder", "errorMessage", "helperText"];
30
- function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
31
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? _Object$getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? _Object$defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
32
- function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
33
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
34
- var DropdownIndicator = function DropdownIndicator(props) {
35
- var _useTheme = (0, _react2.useTheme)(),
36
- sizes = _useTheme.sizes;
37
- return /*#__PURE__*/_react["default"].createElement(_reactSelect.components.DropdownIndicator, props, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
38
- className: "CreatableSelect-dropdown-icon",
39
- as: _chevronDown["default"],
40
- boxSize: sizes['2.5']
41
- }));
42
- };
43
-
44
- // Exporting without forwardRef for storybook to work
45
- var CreatableSelectNode = exports.CreatableSelectNode = function CreatableSelectNode(_ref) {
46
- var id = _ref.id,
47
- label = _ref.label,
48
- _ref$isInvalid = _ref.isInvalid,
49
- isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
50
- _ref$isLoading = _ref.isLoading,
51
- isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
52
- isRequired = _ref.isRequired,
53
- _ref$options = _ref.options,
54
- options = _ref$options === void 0 ? [] : _ref$options,
55
- _ref$placeholder = _ref.placeholder,
56
- placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
57
- errorMessage = _ref.errorMessage,
58
- helperText = _ref.helperText,
59
- innerRef = _ref.innerRef,
60
- props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
61
- var _useTheme2 = (0, _react2.useTheme)(),
62
- colors = _useTheme2.colors,
63
- fontSizes = _useTheme2.fontSizes;
64
- if (innerRef) {
65
- props.ref = innerRef;
66
- }
67
- var customStyles = {
68
- control: function control(provided, state) {
69
- return _objectSpread(_objectSpread({}, provided), {}, {
70
- borderColor: isInvalid ? colors.error : state.isFocused ? colors.primary["default"] : colors.gray['200'],
71
- borderWidth: '1px',
72
- boxShadow: 'none',
73
- '&:hover': {
74
- borderColor: isInvalid ? colors.error : state.isFocused ? colors.primary["default"] : colors.gray['200']
75
- }
76
- });
77
- },
78
- placeholder: function placeholder(provided) {
79
- return _objectSpread(_objectSpread({}, provided), {}, {
80
- fontSize: fontSizes.sm,
81
- color: colors.gray['200']
82
- });
83
- },
84
- dropdownIndicator: function dropdownIndicator(provided) {
85
- return _objectSpread(_objectSpread({}, provided), {}, {
86
- color: colors.brandBlue,
87
- '&:hover': {
88
- color: colors.brandBlue
89
- }
90
- });
91
- },
92
- indicatorSeparator: function indicatorSeparator(provided) {
93
- return _objectSpread(_objectSpread({}, provided), {}, {
94
- display: 'none'
95
- });
96
- }
97
- };
98
- return /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
99
- errorMessage: errorMessage,
100
- isRequired: isRequired,
101
- isInvalid: isInvalid,
102
- helperText: helperText,
103
- label: label,
104
- inputId: id
105
- }, /*#__PURE__*/_react["default"].createElement(_creatable["default"], (0, _extends2["default"])({
106
- id: id,
107
- components: {
108
- DropdownIndicator: DropdownIndicator
109
- },
110
- styles: customStyles,
111
- options: options,
112
- placeholder: placeholder,
113
- isLoading: isLoading
114
- }, props)));
115
- };
116
- var CreatableSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
117
- var id = props.id,
118
- label = props.label,
119
- _props$isInvalid = props.isInvalid,
120
- isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
121
- _props$isLoading = props.isLoading,
122
- isLoading = _props$isLoading === void 0 ? false : _props$isLoading,
123
- isRequired = props.isRequired,
124
- _props$options = props.options,
125
- options = _props$options === void 0 ? [] : _props$options,
126
- _props$placeholder = props.placeholder,
127
- placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,
128
- errorMessage = props.errorMessage,
129
- helperText = props.helperText,
130
- additionalProps = (0, _objectWithoutProperties2["default"])(props, _excluded2);
131
- return /*#__PURE__*/_react["default"].createElement(CreatableSelectNode, (0, _extends2["default"])({
132
- id: id,
133
- innerRef: ref,
134
- label: label,
135
- options: options,
136
- placeholder: placeholder,
137
- helperText: helperText,
138
- errorMessage: errorMessage,
139
- isLoading: isLoading,
140
- isInvalid: isInvalid,
141
- isRequired: isRequired
142
- }, additionalProps));
143
- });
144
- var _default = exports["default"] = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
145
- return /*#__PURE__*/_react["default"].createElement(CreatableSelectNode, (0, _extends2["default"])({
146
- ref: ref
147
- }, props));
148
- });
@@ -1,69 +0,0 @@
1
- "use strict";
2
-
3
- var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
4
- var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
5
- var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
6
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
7
- var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
8
- var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
9
- var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
10
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
11
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
12
- _Object$defineProperty(exports, "__esModule", {
13
- value: true
14
- });
15
- exports["default"] = exports.CreatableSelect = void 0;
16
- var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
17
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
18
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
19
- var _react = _interopRequireDefault(require("react"));
20
- var _createControl = require("storybook/utils/create-control");
21
- var _CreatableSelect = require("./CreatableSelect");
22
- function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
23
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
24
- var _default = exports["default"] = {
25
- title: 'v2/CreatableSelect',
26
- component: _CreatableSelect.CreatableSelectNode,
27
- parameters: {
28
- removeBaseHtmlClass: true
29
- },
30
- argTypes: _objectSpread({}, (0, _createControl.createSelectControl)('createOptionPosition', ['first', 'last'])),
31
- args: {
32
- label: 'Say Something',
33
- isClearable: true,
34
- placeholder: 'Please Say Anything or Select Something to Say...',
35
- createOptionPosition: 'first',
36
- isLoading: false,
37
- isInvalid: false,
38
- isRequired: false,
39
- helperText: '',
40
- errorMessage: 'Oh no'
41
- }
42
- };
43
- var CreatableSelectTemplate = function CreatableSelectTemplate(props) {
44
- return /*#__PURE__*/_react["default"].createElement(_CreatableSelect.CreatableSelectNode, (0, _extends2["default"])({
45
- id: "say-something-select",
46
- allowCreateWhileLoading: true,
47
- createOptionPosition: "first",
48
- options: [{
49
- value: "",
50
- label: "Say Nothing"
51
- }, {
52
- value: "hello",
53
- label: "Hello"
54
- }, {
55
- value: "goodbye",
56
- label: "Goodbye"
57
- }, {
58
- value: "cool",
59
- label: "Cool"
60
- }, {
61
- value: "raisins",
62
- label: "What is your opinion on raisins?"
63
- }],
64
- formatCreateLabel: function formatCreateLabel(other) {
65
- return "Say \"".concat(other, "\"");
66
- }
67
- }, props));
68
- };
69
- var CreatableSelect = exports.CreatableSelect = (0, _bind["default"])(CreatableSelectTemplate).call(CreatableSelectTemplate, {});
@@ -1,14 +0,0 @@
1
- "use strict";
2
-
3
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
5
- _Object$defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- _Object$defineProperty(exports, "CreatableSelect", {
9
- enumerable: true,
10
- get: function get() {
11
- return _CreatableSelect["default"];
12
- }
13
- });
14
- var _CreatableSelect = _interopRequireDefault(require("./CreatableSelect"));
@@ -1,34 +0,0 @@
1
- "use strict";
2
-
3
- var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
- var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
5
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
7
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
8
- _Object$defineProperty(exports, "__esModule", {
9
- value: true
10
- });
11
- exports["default"] = void 0;
12
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
13
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
14
- var _react = _interopRequireWildcard(require("react"));
15
- var _react2 = require("@chakra-ui/react");
16
- var _Divider = require("./Divider.styles");
17
- var _excluded = ["variant", "colorScheme"];
18
- function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
19
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? _Object$getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? _Object$defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
20
- var Divider = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
21
- var variant = _ref.variant,
22
- borderColor = _ref.colorScheme,
23
- props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
24
- return /*#__PURE__*/_react["default"].createElement(_react2.Divider, (0, _extends2["default"])({}, _Divider.colorScheme[borderColor], {
25
- variant: variant
26
- }, props, {
27
- ref: ref
28
- }));
29
- });
30
- Divider.defaultProps = {
31
- variant: 'solid',
32
- colorScheme: 'medium'
33
- };
34
- var _default = exports["default"] = Divider;
@@ -1,40 +0,0 @@
1
- "use strict";
2
-
3
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
5
- _Object$defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = exports.Divider = void 0;
9
- var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
10
- var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
11
- var _react = _interopRequireDefault(require("react"));
12
- var _Divider = require("./Divider.styles");
13
- var _Divider2 = _interopRequireDefault(require("./Divider"));
14
- var _react2 = require("@chakra-ui/react");
15
- var _default = exports["default"] = {
16
- title: 'v2/Divider',
17
- component: _Divider2["default"],
18
- argTypes: {
19
- colorScheme: {
20
- control: {
21
- type: 'select',
22
- options: (0, _keys["default"])(_Divider.colorScheme)
23
- }
24
- },
25
- variant: {
26
- control: {
27
- type: 'select',
28
- options: ['solid', 'dashed']
29
- }
30
- }
31
- }
32
- };
33
- var Template = function Template(props) {
34
- return /*#__PURE__*/_react["default"].createElement(_react2.Box, null, /*#__PURE__*/_react["default"].createElement(_react2.Text, null, "Over HowdyHowdyHowdy"), /*#__PURE__*/_react["default"].createElement(_Divider2["default"], props), /*#__PURE__*/_react["default"].createElement(_react2.Text, null, "Under HowdyHowdyHowdy"));
35
- };
36
- var Divider = exports.Divider = (0, _bind["default"])(Template).call(Template, {});
37
- Divider.args = {
38
- variant: 'solid',
39
- colorScheme: 'medium'
40
- };
@@ -1,21 +0,0 @@
1
- "use strict";
2
-
3
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
5
- _Object$defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = exports.colorScheme = void 0;
9
- var _merge = _interopRequireDefault(require("lodash/merge"));
10
- var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
11
- var colorScheme = exports.colorScheme = {
12
- low: {
13
- borderColor: 'gray.100'
14
- },
15
- medium: {
16
- borderColor: 'gray.200'
17
- }
18
- };
19
- var _default = exports["default"] = (0, _merge["default"])(_theme["default"].components.Divider, {
20
- colorScheme: colorScheme
21
- });
@@ -1,29 +0,0 @@
1
- "use strict";
2
-
3
- var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
- var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
5
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
7
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
8
- _Object$defineProperty(exports, "__esModule", {
9
- value: true
10
- });
11
- exports["default"] = void 0;
12
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
13
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
14
- var _react = _interopRequireWildcard(require("react"));
15
- var _react2 = require("@chakra-ui/react");
16
- var _excluded = ["header", "children"];
17
- function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
18
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? _Object$getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? _Object$defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
19
- var Drawer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
20
- var header = _ref.header,
21
- children = _ref.children,
22
- props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
23
- return /*#__PURE__*/_react["default"].createElement(_react2.Drawer, (0, _extends2["default"])({
24
- placement: "right"
25
- }, props, {
26
- ref: ref
27
- }), /*#__PURE__*/_react["default"].createElement(_react2.DrawerOverlay, null), /*#__PURE__*/_react["default"].createElement(_react2.DrawerContent, null, /*#__PURE__*/_react["default"].createElement(_react2.DrawerHeader, null, header, /*#__PURE__*/_react["default"].createElement(_react2.DrawerCloseButton, null)), children));
28
- });
29
- var _default = exports["default"] = Drawer;
@@ -1,50 +0,0 @@
1
- "use strict";
2
-
3
- var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
- var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
5
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
7
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
8
- _Object$defineProperty(exports, "__esModule", {
9
- value: true
10
- });
11
- exports["default"] = exports.Drawer = void 0;
12
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
13
- var _react = _interopRequireWildcard(require("react"));
14
- var _Text = _interopRequireDefault(require("../Text/Text"));
15
- var _Button = require("../Button");
16
- var _index = require("./index");
17
- function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
18
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? _Object$getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? _Object$defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
19
- var _default = exports["default"] = {
20
- title: 'v2/Drawer',
21
- component: _index.Drawer,
22
- subcomponents: {
23
- DrawerHeader: _index.DrawerHeader,
24
- DrawerBody: _index.DrawerBody,
25
- DrawerFooter: _index.DrawerFooter
26
- },
27
- parameters: {
28
- importBy: 'Drawer',
29
- removeBaseHtmlClass: true,
30
- chakraLink: 'https://chakra-ui.com/docs/components/drawer'
31
- }
32
- };
33
- var Drawer = exports.Drawer = function Drawer(props) {
34
- var _useState = (0, _react.useState)(true),
35
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
36
- isOpen = _useState2[0],
37
- setIsOpen = _useState2[1];
38
- var toggleDrawer = function toggleDrawer() {
39
- return setIsOpen(function (prevState) {
40
- return !prevState;
41
- });
42
- };
43
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
44
- onClick: toggleDrawer
45
- }, "Open"), /*#__PURE__*/_react["default"].createElement(_index.Drawer, {
46
- isOpen: isOpen,
47
- onClose: toggleDrawer,
48
- header: " Sample Drawer Header"
49
- }, /*#__PURE__*/_react["default"].createElement(_index.DrawerBody, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, "Sample Drawer Body")), /*#__PURE__*/_react["default"].createElement(_index.DrawerFooter, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, "Sample Drawer Footer"))));
50
- };
@@ -1,57 +0,0 @@
1
- "use strict";
2
-
3
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
5
- _Object$defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- _Object$defineProperty(exports, "Drawer", {
9
- enumerable: true,
10
- get: function get() {
11
- return _Drawer["default"];
12
- }
13
- });
14
- _Object$defineProperty(exports, "DrawerBody", {
15
- enumerable: true,
16
- get: function get() {
17
- return _react.DrawerBody;
18
- }
19
- });
20
- _Object$defineProperty(exports, "DrawerCloseButton", {
21
- enumerable: true,
22
- get: function get() {
23
- return _react.DrawerCloseButton;
24
- }
25
- });
26
- _Object$defineProperty(exports, "DrawerContainer", {
27
- enumerable: true,
28
- get: function get() {
29
- return _react.Drawer;
30
- }
31
- });
32
- _Object$defineProperty(exports, "DrawerContent", {
33
- enumerable: true,
34
- get: function get() {
35
- return _react.DrawerContent;
36
- }
37
- });
38
- _Object$defineProperty(exports, "DrawerFooter", {
39
- enumerable: true,
40
- get: function get() {
41
- return _react.DrawerFooter;
42
- }
43
- });
44
- _Object$defineProperty(exports, "DrawerHeader", {
45
- enumerable: true,
46
- get: function get() {
47
- return _react.DrawerHeader;
48
- }
49
- });
50
- _Object$defineProperty(exports, "DrawerOverlay", {
51
- enumerable: true,
52
- get: function get() {
53
- return _react.DrawerOverlay;
54
- }
55
- });
56
- var _react = require("@chakra-ui/react");
57
- var _Drawer = _interopRequireDefault(require("./Drawer"));
@@ -1,108 +0,0 @@
1
- "use strict";
2
-
3
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
5
- _Object$defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
10
- var _merge = _interopRequireDefault(require("lodash/merge"));
11
- var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
12
- var _excluded = ["hasFooter"];
13
- var body = function body(_ref) {
14
- var hasFooter = _ref.hasFooter,
15
- props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
16
- return {
17
- overflowY: 'auto',
18
- padding: 6,
19
- paddingBottom: hasFooter ? 24 : 6
20
- };
21
- };
22
- var footer = function footer(props) {
23
- return {
24
- padding: 6,
25
- backgroundColor: 'white',
26
- position: 'absolute',
27
- bottom: 0,
28
- width: '100%'
29
- };
30
- };
31
- var header = function header(props) {
32
- return {
33
- paddingY: 3,
34
- paddingX: 6,
35
- borderBottom: '1px solid',
36
- borderBottomColor: 'gray.100',
37
- display: 'flex',
38
- gridGap: 2,
39
- alignItems: 'center',
40
- justifyContent: 'space-between',
41
- fontWeight: 'semibold'
42
- };
43
- };
44
- var closeButton = function closeButton(props) {
45
- return {
46
- width: 8,
47
- height: 8,
48
- fontSize: 'xs',
49
- background: 'transparent',
50
- borderRadius: 'md',
51
- display: 'flex',
52
- alignItems: 'center',
53
- justifyContent: 'center',
54
- flexShrink: 0,
55
- transitionProperty: 'common',
56
- transitionDuration: 'normal',
57
- outline: 'transparent solid 2px',
58
- outlineOffset: '2px',
59
- color: 'gray.600',
60
- _hover: {
61
- color: 'black',
62
- background: 'gray.100'
63
- },
64
- _focus: {
65
- outlineColor: 'primary.default'
66
- }
67
- };
68
- };
69
- var dialogContainer = function dialogContainer(props) {
70
- return {
71
- zIndex: 'layer2',
72
- backgroundColor: 'transparent'
73
- };
74
- };
75
- var dialog = function dialog(props) {
76
- return {
77
- backgroundColor: 'white',
78
- boxShadow: 'drawer'
79
- };
80
- };
81
- var baseStyle = function baseStyle(props) {
82
- return {
83
- body: body(props),
84
- footer: footer(props),
85
- header: header(props),
86
- dialog: dialog(props),
87
- closeButton: closeButton(props),
88
- dialogContainer: dialogContainer(props)
89
- };
90
- };
91
- var defaultProps = {
92
- size: 'xs'
93
- };
94
- var sizes = {
95
- xs: {
96
- dialog: {
97
- maxWidth: {
98
- base: '100vw',
99
- mobileXL: 80
100
- }
101
- }
102
- }
103
- };
104
- var _default = exports["default"] = (0, _merge["default"])(_theme["default"].components.Drawer, {
105
- defaultProps: defaultProps,
106
- baseStyle: baseStyle,
107
- sizes: sizes
108
- });
@@ -1,74 +0,0 @@
1
- "use strict";
2
-
3
- var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
- var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
5
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
7
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
8
- _Object$defineProperty(exports, "__esModule", {
9
- value: true
10
- });
11
- exports["default"] = void 0;
12
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
13
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
14
- var _react = _interopRequireWildcard(require("react"));
15
- var _propTypes = _interopRequireDefault(require("prop-types"));
16
- var _react2 = require("@chakra-ui/react");
17
- var _excluded = ["children", "label", "inputId", "helperText", "errorMessage", "isFieldset", "isOptional", "customRequiredText"];
18
- function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
19
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? _Object$getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? _Object$defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
20
- var FormControl = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
21
- var children = _ref.children,
22
- label = _ref.label,
23
- inputId = _ref.inputId,
24
- helperText = _ref.helperText,
25
- errorMessage = _ref.errorMessage,
26
- isFieldset = _ref.isFieldset,
27
- isOptional = _ref.isOptional,
28
- customRequiredText = _ref.customRequiredText,
29
- props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
30
- return /*#__PURE__*/_react["default"].createElement(_react2.FormControl, (0, _extends2["default"])({}, props, {
31
- ref: ref,
32
- as: isFieldset ? 'fieldset' : 'div',
33
- borderWidth: "0"
34
- }), label && /*#__PURE__*/_react["default"].createElement(_react2.FormLabel, {
35
- color: "gray.600",
36
- fontWeight: "semibold",
37
- marginBottom: helperText ? 0 : 1,
38
- fontSize: "sm",
39
- htmlFor: inputId,
40
- as: isFieldset ? 'legend' : 'label',
41
- requiredIndicator: props !== null && props !== void 0 && props.isRequired && customRequiredText ? /*#__PURE__*/_react["default"].createElement(_react2.Text, {
42
- marginLeft: 1,
43
- as: "span",
44
- variant: "caption",
45
- color: "text.secondary.light"
46
- }, customRequiredText) : null,
47
- optionalIndicator: isOptional && !(props !== null && props !== void 0 && props.isRequired) ? /*#__PURE__*/_react["default"].createElement(_react2.Text, {
48
- marginLeft: 1,
49
- as: "span",
50
- variant: "caption",
51
- color: "text.secondary.light"
52
- }, "Optional") : null
53
- }, label), helperText && /*#__PURE__*/_react["default"].createElement(_react2.FormHelperText, {
54
- color: "gray.600",
55
- marginBottom: 1,
56
- fontSize: "xs"
57
- }, helperText), children, /*#__PURE__*/_react["default"].createElement(_react2.FormErrorMessage, {
58
- color: "error",
59
- mt: 1,
60
- fontSize: "xs"
61
- }, errorMessage));
62
- });
63
- FormControl.propTypes = {
64
- inputId: _propTypes["default"].string.isRequired,
65
- label: _propTypes["default"].string,
66
- helperText: _propTypes["default"].string,
67
- errorMessage: _propTypes["default"].string,
68
- children: _propTypes["default"].element,
69
- isFieldset: _propTypes["default"].bool,
70
- isOptional: _propTypes["default"].bool,
71
- isRequired: _propTypes["default"].bool,
72
- customRequiredText: _propTypes["default"].string
73
- };
74
- var _default = exports["default"] = FormControl;