@ntbjs/react-components 0.0.1-beta.44 → 0.0.1-beta.45

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 (25) hide show
  1. package/{ActionButton-10a681b9.js → ActionButton-9e502e55.js} +9 -9
  2. package/{AssetGallery-bd8b2316.js → AssetGallery-de336893.js} +313 -380
  3. package/{Button-6f6b4ed4.js → Button-191167c8.js} +28 -36
  4. package/{Checkbox-791a409f.js → Checkbox-25c75a7c.js} +27 -35
  5. package/{Popover-0ff13419.js → Popover-6ca643ba.js} +15 -15
  6. package/{Radio-9271a4b6.js → Radio-1521b33c.js} +14 -17
  7. package/{TextArea-70a74014.js → TextArea-a73b1729.js} +23 -30
  8. package/{TextInput-770f2416.js → TextInput-143d6346.js} +25 -32
  9. package/{Tooltip-85e7d561.js → Tooltip-25b6f5fa.js} +11 -11
  10. package/data/Popover/index.js +2 -2
  11. package/data/index.js +3 -3
  12. package/{defaultTheme-18d7c1ee.js → defaultTheme-d8298500.js} +94 -105
  13. package/icons/audio.svg +3 -0
  14. package/icons/headset.svg +1 -0
  15. package/inputs/ActionButton/index.js +2 -2
  16. package/inputs/Button/index.js +2 -2
  17. package/inputs/Checkbox/index.js +2 -2
  18. package/inputs/Radio/index.js +2 -2
  19. package/inputs/TextArea/index.js +2 -2
  20. package/inputs/TextInput/index.js +2 -2
  21. package/inputs/index.js +7 -7
  22. package/package.json +10 -8
  23. package/ssr/index.js +1 -3
  24. package/widgets/AssetGallery/index.js +10 -10
  25. package/widgets/index.js +10 -10
package/{Button-6f6b4ed4.js → Button-191167c8.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-18d7c1ee.js');
3
+ var defaultTheme = require('./defaultTheme-d8298500.js');
4
4
  var React = require('react');
5
5
  var styled = require('styled-components');
6
6
 
@@ -10,7 +10,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
10
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
11
 
12
12
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
13
- var Button$1 = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n border-radius: 3px;\n font-family: inherit;\n font-size: 1rem;\n font-weight: 500;\n padding: 6px 18px;\n cursor: pointer;\n background: ", ";\n border: 2px solid ", ";\n line-height: 1.2;\n transition: all 250ms, opacity 200ms;\n\n &:hover {\n background: #5a9b88;\n border-color: #5a9b88;\n }\n\n ", "\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (props) {
13
+ var Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n border-radius: 3px;\n font-family: inherit;\n font-size: 1rem;\n font-weight: 500;\n padding: 6px 18px;\n cursor: pointer;\n background: ", ";\n border: 2px solid ", ";\n line-height: 1.2;\n transition: all 250ms, opacity 200ms;\n\n &:hover {\n background: #5a9b88;\n border-color: #5a9b88;\n }\n\n ", "\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (props) {
14
14
  return props.theme.getColor('emerald-500');
15
15
  }, function (props) {
16
16
  return props.theme.getColor('emerald-500');
@@ -37,56 +37,50 @@ var Button$1 = styled__default['default'].button.attrs(defaultTheme.applyDefault
37
37
  }, function (props) {
38
38
  return props.size === 'small' && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n line-height: 1.15;\n padding: 3px 12px;\n "])));
39
39
  });
40
- var ButtonContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n transform: scale(1);\n opacity: 1;\n transition: all 200ms;\n\n > svg {\n width: 100%;\n max-width: 16px;\n max-height: 16px;\n margin-right: 7px;\n\n ", ";\n }\n\n ", "\n"])), function (props) {
40
+ var ButtonContent = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n transform: scale(1);\n opacity: 1;\n transition: all 200ms;\n\n > svg {\n width: 100%;\n max-width: 16px;\n max-height: 16px;\n margin-right: 7px;\n\n ", ";\n }\n\n ", "\n"])), function (props) {
41
41
  return props.size === 'small' && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n max-width: 13px;\n max-height: 13px;\n "])));
42
42
  }, function (props) {
43
43
  return props.loading && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n transform: scale(0.95);\n opacity: 0;\n "])));
44
44
  });
45
- var LoadingIndicator = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n padding: 4px;\n background: inherit;\n opacity: 0;\n transition: opacity 200ms;\n box-sizing: border-box;\n\n ", "\n"])), function (props) {
45
+ var LoadingIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n padding: 4px;\n background: inherit;\n opacity: 0;\n transition: opacity 200ms;\n box-sizing: border-box;\n\n ", "\n"])), function (props) {
46
46
  return props.loading && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
47
47
  });
48
- var LoadingIndicatorSvg = styled__default['default'].svg.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n height: 100%;\n color: inherit;\n transform: rotate(-88deg);\n"])));
49
- var LoadingIndicatorSvgCircle = styled__default['default'].circle.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n transition: stroke-dashoffset 300ms linear;\n stroke-dasharray: 113;\n"])));
48
+ var LoadingIndicatorSvg = styled__default["default"].svg.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n height: 100%;\n color: inherit;\n transform: rotate(-88deg);\n"])));
49
+ var LoadingIndicatorSvgCircle = styled__default["default"].circle.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n transition: stroke-dashoffset 300ms linear;\n stroke-dasharray: 113;\n"])));
50
50
 
51
- var Button = React__default['default'].forwardRef(function Button(_ref, forwardedRef) {
51
+ var _excluded = ["secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children"];
52
+ var Button = React__default["default"].forwardRef(function Button(_ref, forwardedRef) {
52
53
  var secondary = _ref.secondary,
53
- outlined = _ref.outlined,
54
- block = _ref.block,
55
- icon = _ref.icon,
56
- size = _ref.size,
57
- disabled = _ref.disabled,
58
- loading = _ref.loading,
59
- className = _ref.className,
60
- children = _ref.children,
61
- props = defaultTheme._objectWithoutProperties(_ref, ["secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children"]);
62
-
54
+ outlined = _ref.outlined,
55
+ block = _ref.block,
56
+ icon = _ref.icon,
57
+ size = _ref.size,
58
+ disabled = _ref.disabled,
59
+ loading = _ref.loading,
60
+ className = _ref.className,
61
+ children = _ref.children,
62
+ props = defaultTheme._objectWithoutProperties(_ref, _excluded);
63
63
  var _useState = React.useState(loading || false),
64
- _useState2 = defaultTheme._slicedToArray(_useState, 2),
65
- loadingState = _useState2[0],
66
- setLoadingState = _useState2[1];
67
-
64
+ _useState2 = defaultTheme._slicedToArray(_useState, 2),
65
+ loadingState = _useState2[0],
66
+ setLoadingState = _useState2[1];
68
67
  var _useState3 = React.useState(113),
69
- _useState4 = defaultTheme._slicedToArray(_useState3, 2),
70
- loadingStep = _useState4[0],
71
- setLoadingStep = _useState4[1];
72
-
68
+ _useState4 = defaultTheme._slicedToArray(_useState3, 2),
69
+ loadingStep = _useState4[0],
70
+ setLoadingStep = _useState4[1];
73
71
  var loadingInterval = React.useRef(0);
74
-
75
72
  var enableLoading = function enableLoading() {
76
73
  loadingInterval.current = setInterval(function () {
77
74
  setLoadingStep(function (currentLoadingStep) {
78
75
  var newLoadingStep = Math.round(currentLoadingStep - 15 * currentLoadingStep / 100);
79
-
80
76
  if (newLoadingStep === currentLoadingStep) {
81
77
  clearInterval(loadingInterval.current);
82
78
  }
83
-
84
79
  return newLoadingStep;
85
80
  });
86
81
  }, 300);
87
82
  setLoadingState(true);
88
83
  };
89
-
90
84
  var disableLoading = function disableLoading() {
91
85
  clearInterval(loadingInterval.current);
92
86
  setLoadingStep(0);
@@ -95,19 +89,17 @@ var Button = React__default['default'].forwardRef(function Button(_ref, forwarde
95
89
  setLoadingStep(113);
96
90
  }, 500);
97
91
  };
98
-
99
92
  React.useEffect(function () {
100
93
  if (loading) {
101
94
  enableLoading();
102
95
  } else {
103
96
  disableLoading();
104
97
  }
105
-
106
98
  return function () {
107
99
  return clearInterval(loadingInterval.current);
108
100
  };
109
101
  }, [loading]);
110
- return React__default['default'].createElement(Button$1, defaultTheme._extends({
102
+ return React__default["default"].createElement(Button$1, defaultTheme._extends({
111
103
  ref: forwardedRef,
112
104
  secondary: secondary,
113
105
  outlined: outlined,
@@ -115,17 +107,17 @@ var Button = React__default['default'].forwardRef(function Button(_ref, forwarde
115
107
  size: size,
116
108
  disabled: disabled,
117
109
  className: className
118
- }, props), React__default['default'].createElement(ButtonContent, {
110
+ }, props), React__default["default"].createElement(ButtonContent, {
119
111
  loading: loadingState,
120
112
  size: size
121
- }, icon, children), React__default['default'].createElement(LoadingIndicator, {
113
+ }, icon, children), React__default["default"].createElement(LoadingIndicator, {
122
114
  loading: loadingState,
123
115
  style: {
124
116
  opacity: loadingState ? 1 : 0
125
117
  }
126
- }, React__default['default'].createElement(LoadingIndicatorSvg, {
118
+ }, React__default["default"].createElement(LoadingIndicatorSvg, {
127
119
  viewBox: "22 22 44 44"
128
- }, React__default['default'].createElement(LoadingIndicatorSvgCircle, {
120
+ }, React__default["default"].createElement(LoadingIndicatorSvgCircle, {
129
121
  cx: "44",
130
122
  cy: "44",
131
123
  r: "18",
package/{Checkbox-791a409f.js → Checkbox-25c75a7c.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-18d7c1ee.js');
3
+ var defaultTheme = require('./defaultTheme-d8298500.js');
4
4
  var React = require('react');
5
5
  var nanoid = require('nanoid');
6
6
  var styled = require('styled-components');
@@ -16,14 +16,12 @@ function _interopNamespace(e) {
16
16
  var d = Object.getOwnPropertyDescriptor(e, k);
17
17
  Object.defineProperty(n, k, d.get ? d : {
18
18
  enumerable: true,
19
- get: function () {
20
- return e[k];
21
- }
19
+ get: function () { return e[k]; }
22
20
  });
23
21
  }
24
22
  });
25
23
  }
26
- n['default'] = e;
24
+ n["default"] = e;
27
25
  return Object.freeze(n);
28
26
  }
29
27
 
@@ -31,23 +29,21 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
31
29
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
32
30
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
33
31
 
34
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
35
-
36
- var _ref = /*#__PURE__*/React__namespace.createElement("path", {
37
- fill: "currentColor",
38
- d: "M7.627 14.435l-5.69-5.69L0 10.67l7.627 7.627L24 1.924 22.076 0z"
39
- });
40
-
32
+ var _path;
33
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
41
34
  function SvgCheck(props) {
42
35
  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
43
36
  xmlns: "http://www.w3.org/2000/svg",
44
37
  viewBox: "0 0 24 18.297"
45
- }, props), _ref);
38
+ }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
39
+ fill: "currentColor",
40
+ d: "M7.627 14.435l-5.69-5.69L0 10.67l7.627 7.627L24 1.924 22.076 0z"
41
+ })));
46
42
  }
47
43
 
48
44
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
49
45
  var checkboxSize = '17px';
50
- var Checkbox$1 = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n cursor: pointer;\n user-select: none;\n min-height: ", ";\n text-align: left;\n display: flex;\n flex-wrap: wrap;\n flex: 1;\n line-height: ", ";\n\n & input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n margin: 0;\n }\n\n &::before {\n content: '';\n border: 2px solid ", ";\n border-radius: 2px;\n transition: all 200ms;\n width: ", ";\n height: ", ";\n box-sizing: border-box;\n }\n\n ", "\n\n ", "\n"])), checkboxSize, checkboxSize, function (props) {
46
+ var Checkbox$1 = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n cursor: pointer;\n user-select: none;\n min-height: ", ";\n text-align: left;\n display: flex;\n flex-wrap: wrap;\n flex: 1;\n line-height: ", ";\n\n & input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n margin: 0;\n }\n\n &::before {\n content: '';\n border: 2px solid ", ";\n border-radius: 2px;\n transition: all 200ms;\n width: ", ";\n height: ", ";\n box-sizing: border-box;\n }\n\n ", "\n\n ", "\n"])), checkboxSize, checkboxSize, function (props) {
51
47
  return props.theme.getColor('gray-300');
52
48
  }, checkboxSize, checkboxSize, function (props) {
53
49
  return props.checked && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n &::before {\n background: ", ";\n border-color: ", ";\n }\n "])), function (props) {
@@ -58,27 +54,25 @@ var Checkbox$1 = styled__default['default'].label.attrs(defaultTheme.applyDefaul
58
54
  }, function (props) {
59
55
  return props.disabled && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
60
56
  });
61
- var CheckboxLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 10px;\n font-weight: 400;\n font-size: 0.919rem;\n opacity: 0.75;\n flex: 1;\n"])));
62
- var CheckIcon = styled__default['default'].svg.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n width: 13px;\n left: 2px;\n top: 3px;\n color: ", ";\n"])), function (props) {
57
+ var CheckboxLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 10px;\n font-weight: 400;\n font-size: 0.919rem;\n opacity: 0.75;\n flex: 1;\n"])));
58
+ var CheckIcon = styled__default["default"].svg.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n width: 13px;\n left: 2px;\n top: 3px;\n color: ", ";\n"])), function (props) {
63
59
  return props.theme.getColor('gray-100');
64
60
  });
65
- var IncompleteCheckIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n height: 2px;\n top: 7px;\n left: 3px;\n background: ", ";\n width: 11px;\n"])), function (props) {
61
+ var IncompleteCheckIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n height: 2px;\n top: 7px;\n left: 3px;\n background: ", ";\n width: 11px;\n"])), function (props) {
66
62
  return props.theme.getColor('gray-100');
67
63
  });
68
64
 
69
- var Checkbox = React__default['default'].forwardRef(function Checkbox(_ref, forwardedRef) {
65
+ var Checkbox = React__default["default"].forwardRef(function Checkbox(_ref, forwardedRef) {
70
66
  var checked = _ref.checked,
71
- disabled = _ref.disabled,
72
- name = _ref.name,
73
- incomplete = _ref.incomplete,
74
- onChange = _ref.onChange,
75
- className = _ref.className,
76
- children = _ref.children;
77
-
67
+ disabled = _ref.disabled,
68
+ name = _ref.name,
69
+ incomplete = _ref.incomplete,
70
+ onChange = _ref.onChange,
71
+ className = _ref.className,
72
+ children = _ref.children;
78
73
  var _useState = React.useState(nanoid.nanoid()),
79
- _useState2 = defaultTheme._slicedToArray(_useState, 1),
80
- uniqueId = _useState2[0];
81
-
74
+ _useState2 = defaultTheme._slicedToArray(_useState, 1),
75
+ uniqueId = _useState2[0];
82
76
  var onChangeCallback = React.useCallback(function (event) {
83
77
  if (onChange) {
84
78
  onChange(event.target.checked);
@@ -86,23 +80,21 @@ var Checkbox = React__default['default'].forwardRef(function Checkbox(_ref, forw
86
80
  }, [onChange]);
87
81
  var checkIcon = React.useMemo(function () {
88
82
  if (checked && incomplete) {
89
- return React__default['default'].createElement(IncompleteCheckIcon, null);
83
+ return React__default["default"].createElement(IncompleteCheckIcon, null);
90
84
  }
91
-
92
85
  if (checked) {
93
- return React__default['default'].createElement(CheckIcon, {
86
+ return React__default["default"].createElement(CheckIcon, {
94
87
  as: SvgCheck
95
88
  });
96
89
  }
97
-
98
90
  return null;
99
91
  }, [checked, incomplete]);
100
- return React__default['default'].createElement(Checkbox$1, {
92
+ return React__default["default"].createElement(Checkbox$1, {
101
93
  checked: checked,
102
94
  className: className,
103
95
  disabled: disabled,
104
96
  htmlFor: uniqueId
105
- }, React__default['default'].createElement("input", {
97
+ }, React__default["default"].createElement("input", {
106
98
  checked: checked,
107
99
  disabled: disabled,
108
100
  id: uniqueId,
@@ -110,7 +102,7 @@ var Checkbox = React__default['default'].forwardRef(function Checkbox(_ref, forw
110
102
  ref: forwardedRef,
111
103
  type: "checkbox",
112
104
  onChange: onChangeCallback
113
- }), checkIcon, React__default['default'].createElement(CheckboxLabel, null, children));
105
+ }), checkIcon, React__default["default"].createElement(CheckboxLabel, null, children));
114
106
  });
115
107
  Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {
116
108
  checked: defaultTheme.PropTypes.bool,
package/{Popover-0ff13419.js → Popover-6ca643ba.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-18d7c1ee.js');
3
+ var defaultTheme = require('./defaultTheme-d8298500.js');
4
4
  var React = require('react');
5
5
  var lodash = require('lodash');
6
6
  var styled = require('styled-components');
@@ -13,14 +13,14 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
14
14
  var TippyTooltip__default = /*#__PURE__*/_interopDefaultLegacy(TippyTooltip);
15
15
 
16
- var css_248z$1 = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
16
+ var css_248z$1 = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
17
17
  defaultTheme.styleInject(css_248z$1);
18
18
 
19
19
  var css_248z = ".tippy-box[data-animation=shift-away-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=top]{transform:translateY(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=bottom]{transform:translateY(-5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=left]{transform:translateX(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=right]{transform:translateX(-5px)}";
20
20
  defaultTheme.styleInject(css_248z);
21
21
 
22
22
  var _templateObject;
23
- var Popover$1 = styled__default['default'](TippyTooltip__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 400;\n color: inherit;\n border-radius: 0;\n ", "\n ", "\n line-height: inherit;\n\n ", "\n .tippy-content {\n padding: 0;\n }\n\n .tippy-arrow {\n ", "\n }\n\n && > .tippy-arrow::before {\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n & > .tippy-arrow::after {\n content: '';\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n &[data-placement^='top'] {\n & > .tippy-arrow:before {\n bottom: -16px;\n left: -5px;\n border-width: 15px 13px 0;\n ", "\n }\n\n & > .tippy-arrow:after {\n bottom: -15px;\n left: -5px;\n border-width: 15px 13px 0;\n border-top-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='right'] {\n & > .tippy-arrow:before {\n bottom: -5px;\n left: -16px;\n border-width: 13px 15px 13px 0;\n ", "\n }\n\n & > .tippy-arrow:after {\n bottom: -5px;\n left: -15px;\n border-width: 13px 15px 13px 0;\n border-right-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='bottom'] {\n & > .tippy-arrow:before {\n top: -16px;\n left: -5px;\n border-width: 0 13px 15px 13px;\n ", "\n }\n\n & > .tippy-arrow:after {\n top: -15px;\n left: -5px;\n border-width: 0 13px 15px 13px;\n border-bottom-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='left'] {\n & > .tippy-arrow::before {\n bottom: -5px;\n right: -16px;\n border-width: 13px 0 13px 15px;\n ", "\n }\n\n & > .tippy-arrow::after {\n bottom: -5px;\n right: -15px;\n border-width: 13px 0 13px 15px;\n border-left-color: initial;\n transform-origin: center top;\n }\n }\n"])), function (props) {
23
+ var Popover$1 = styled__default["default"](TippyTooltip__default["default"]).attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 400;\n color: inherit;\n border-radius: 0;\n ", "\n ", "\n line-height: inherit;\n\n ", "\n .tippy-content {\n padding: 0;\n }\n\n .tippy-arrow {\n ", "\n }\n\n && > .tippy-arrow::before {\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n & > .tippy-arrow::after {\n content: '';\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n &[data-placement^='top'] {\n & > .tippy-arrow:before {\n bottom: -16px;\n left: -5px;\n border-width: 15px 13px 0;\n ", "\n }\n\n & > .tippy-arrow:after {\n bottom: -15px;\n left: -5px;\n border-width: 15px 13px 0;\n border-top-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='right'] {\n & > .tippy-arrow:before {\n bottom: -5px;\n left: -16px;\n border-width: 13px 15px 13px 0;\n ", "\n }\n\n & > .tippy-arrow:after {\n bottom: -5px;\n left: -15px;\n border-width: 13px 15px 13px 0;\n border-right-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='bottom'] {\n & > .tippy-arrow:before {\n top: -16px;\n left: -5px;\n border-width: 0 13px 15px 13px;\n ", "\n }\n\n & > .tippy-arrow:after {\n top: -15px;\n left: -5px;\n border-width: 0 13px 15px 13px;\n border-bottom-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='left'] {\n & > .tippy-arrow::before {\n bottom: -5px;\n right: -16px;\n border-width: 13px 0 13px 15px;\n ", "\n }\n\n & > .tippy-arrow::after {\n bottom: -5px;\n right: -15px;\n border-width: 13px 0 13px 15px;\n border-left-color: initial;\n transform-origin: center top;\n }\n }\n"])), function (props) {
24
24
  return props.theme.primaryFontFamily;
25
25
  }, function (props) {
26
26
  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
@@ -40,25 +40,25 @@ var Popover$1 = styled__default['default'](TippyTooltip__default['default']).att
40
40
  return props.theme.themeProp('border-left-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-400'));
41
41
  });
42
42
 
43
- var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
43
+ var _excluded = ["content", "interactive", "placement", "duration", "trigger", "offset", "arrow", "visible", "children"];
44
+ var Popover = React__default["default"].forwardRef(function Popover(_ref, ref) {
44
45
  var content = _ref.content,
45
- interactive = _ref.interactive,
46
- placement = _ref.placement,
47
- duration = _ref.duration,
48
- trigger = _ref.trigger,
49
- offset = _ref.offset,
50
- arrow = _ref.arrow,
51
- visible = _ref.visible,
52
- children = _ref.children,
53
- props = defaultTheme._objectWithoutProperties(_ref, ["content", "interactive", "placement", "duration", "trigger", "offset", "arrow", "visible", "children"]);
54
-
46
+ interactive = _ref.interactive,
47
+ placement = _ref.placement,
48
+ duration = _ref.duration,
49
+ trigger = _ref.trigger,
50
+ offset = _ref.offset,
51
+ arrow = _ref.arrow,
52
+ visible = _ref.visible,
53
+ children = _ref.children,
54
+ props = defaultTheme._objectWithoutProperties(_ref, _excluded);
55
55
  var errorOffset = React.useMemo(function () {
56
56
  return arrow ? 15 : 0;
57
57
  }, [arrow]);
58
58
  var isControlled = React.useMemo(function () {
59
59
  return lodash.isBoolean(visible);
60
60
  }, [visible]);
61
- return React__default['default'].createElement(Popover$1, defaultTheme._extends({
61
+ return React__default["default"].createElement(Popover$1, defaultTheme._extends({
62
62
  ref: ref,
63
63
  content: content,
64
64
  interactive: interactive,
package/{Radio-9271a4b6.js → Radio-1521b33c.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-18d7c1ee.js');
3
+ var defaultTheme = require('./defaultTheme-d8298500.js');
4
4
  var React = require('react');
5
5
  var nanoid = require('nanoid');
6
6
  var polished = require('polished');
@@ -13,7 +13,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
13
13
 
14
14
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
15
15
  var radioSize = '17px';
16
- var Radio$1 = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: block;\n position: relative;\n cursor: pointer;\n line-height: ", ";\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n border: 2px solid ", ";\n width: ", ";\n height: ", ";\n top: 1px;\n border-radius: 50%;\n transition: all 200ms;\n box-sizing: border-box;\n }\n\n &::after {\n content: '';\n position: absolute;\n width: 7px;\n height: 7px;\n top: 6px;\n left: 5px;\n border-radius: 50%;\n transform: scale(0);\n transition: all 200ms;\n }\n\n ", "\n\n input[type='radio'] {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n }\n\n ", "\n"])), polished.math("".concat(radioSize, " + 2 * 2")), function (props) {
16
+ var Radio$1 = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: block;\n position: relative;\n cursor: pointer;\n line-height: ", ";\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n border: 2px solid ", ";\n width: ", ";\n height: ", ";\n top: 1px;\n border-radius: 50%;\n transition: all 200ms;\n box-sizing: border-box;\n }\n\n &::after {\n content: '';\n position: absolute;\n width: 7px;\n height: 7px;\n top: 6px;\n left: 5px;\n border-radius: 50%;\n transform: scale(0);\n transition: all 200ms;\n }\n\n ", "\n\n input[type='radio'] {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n }\n\n ", "\n"])), polished.math("".concat(radioSize, " + 2 * 2")), function (props) {
17
17
  return props.theme.getColor('gray-300');
18
18
  }, radioSize, radioSize, function (props) {
19
19
  return props.checked && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n &::before {\n border-color: ", ";\n }\n\n &::after {\n background: ", ";\n transform: scale(1);\n }\n\n ", " {\n opacity: 1;\n }\n "])), function (props) {
@@ -24,31 +24,28 @@ var Radio$1 = styled__default['default'].label.attrs(defaultTheme.applyDefaultTh
24
24
  }, function (props) {
25
25
  return props.disabled && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
26
26
  });
27
- var RadioLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n padding-left: ", ";\n font-weight: 400;\n font-size: 0.9375rem;\n opacity: 0.75;\n"])), polished.math("".concat(radioSize, " * 1.7")));
27
+ var RadioLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n padding-left: ", ";\n font-weight: 400;\n font-size: 0.9375rem;\n opacity: 0.75;\n"])), polished.math("".concat(radioSize, " * 1.7")));
28
28
 
29
- var Radio = React__default['default'].forwardRef(function Radio(_ref, forwardedRef) {
29
+ var Radio = React__default["default"].forwardRef(function Radio(_ref, forwardedRef) {
30
30
  var value = _ref.value,
31
- checked = _ref.checked,
32
- disabled = _ref.disabled,
33
- name = _ref.name,
34
- children = _ref.children,
35
- onChange = _ref.onChange;
36
-
31
+ checked = _ref.checked,
32
+ disabled = _ref.disabled,
33
+ name = _ref.name,
34
+ children = _ref.children,
35
+ onChange = _ref.onChange;
37
36
  var _useState = React.useState(nanoid.nanoid()),
38
- _useState2 = defaultTheme._slicedToArray(_useState, 1),
39
- uniqueId = _useState2[0];
40
-
37
+ _useState2 = defaultTheme._slicedToArray(_useState, 1),
38
+ uniqueId = _useState2[0];
41
39
  var clicked = function clicked() {
42
40
  if (onChange) {
43
41
  onChange(value);
44
42
  }
45
43
  };
46
-
47
- return React__default['default'].createElement(Radio$1, {
44
+ return React__default["default"].createElement(Radio$1, {
48
45
  htmlFor: uniqueId,
49
46
  checked: checked,
50
47
  disabled: disabled
51
- }, React__default['default'].createElement("input", {
48
+ }, React__default["default"].createElement("input", {
52
49
  ref: forwardedRef,
53
50
  checked: checked,
54
51
  disabled: disabled,
@@ -56,7 +53,7 @@ var Radio = React__default['default'].forwardRef(function Radio(_ref, forwardedR
56
53
  name: name,
57
54
  type: "radio",
58
55
  onChange: clicked
59
- }), React__default['default'].createElement(RadioLabel, null, children));
56
+ }), React__default["default"].createElement(RadioLabel, null, children));
60
57
  });
61
58
  Radio.propTypes = process.env.NODE_ENV !== "production" ? {
62
59
  children: defaultTheme.PropTypes.any,
package/{TextArea-70a74014.js → TextArea-a73b1729.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-18d7c1ee.js');
3
+ var defaultTheme = require('./defaultTheme-d8298500.js');
4
4
  var React = require('react');
5
5
  var nanoid = require('nanoid');
6
6
  var lodash = require('lodash');
@@ -16,15 +16,14 @@ var activeLabel = styled.css(_templateObject || (_templateObject = defaultTheme.
16
16
  return props.theme.themeProp('background', "linear-gradient(0deg, ".concat(props.theme.getColor('gray-900'), " calc(50% + 1px), transparent 50%)"), "linear-gradient(0deg, ".concat(props.theme.getColor('white'), " calc(50% + 1px), transparent 50%)"));
17
17
  });
18
18
  var placeholderBaseStyle = styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n color: inherit;\n opacity: 0.7;\n"])));
19
- var TextAreaLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n ", "\n\n ", "\n"])), placeholderBaseStyle, function (props) {
19
+ var TextAreaLabel = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n ", "\n\n ", "\n"])), placeholderBaseStyle, function (props) {
20
20
  var _props$inputValue;
21
-
22
21
  return (props.placeholderVisible || ((_props$inputValue = props.inputValue) === null || _props$inputValue === void 0 ? void 0 : _props$inputValue.length)) && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
23
22
  });
24
- var TextArea$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n margin-top: 8px;\n\n &:focus-within {\n ", " {\n ", "\n }\n }\n\n ", "\n"])), TextAreaLabel, activeLabel, function (props) {
23
+ var TextArea$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n margin-top: 8px;\n\n &:focus-within {\n ", " {\n ", "\n }\n }\n\n ", "\n"])), TextAreaLabel, activeLabel, function (props) {
25
24
  return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n > * {\n cursor: not-allowed;\n }\n "])));
26
25
  });
27
- var TextAreaField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 12px 10px;\n margin: 0 0 1.07143rem;\n color: inherit;\n resize: vertical;\n overflow: auto;\n ", "\n border: 1px solid;\n ", "\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n\n ", "\n\n &::placeholder {\n ", "\n }\n\n :focus {\n outline: none;\n ", "\n }\n"])), function (props) {
26
+ var TextAreaField = styled__default["default"].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 12px 10px;\n margin: 0 0 1.07143rem;\n color: inherit;\n resize: vertical;\n overflow: auto;\n ", "\n border: 1px solid;\n ", "\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n\n ", "\n\n &::placeholder {\n ", "\n }\n\n :focus {\n outline: none;\n ", "\n }\n"])), function (props) {
28
27
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
29
28
  }, function (props) {
30
29
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
@@ -34,49 +33,43 @@ var TextAreaField = styled__default['default'].textarea.attrs(defaultTheme.apply
34
33
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'));
35
34
  });
36
35
 
37
- var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
36
+ var TextArea = React__default["default"].forwardRef(function TextArea(_ref, forwardedRef) {
38
37
  var value = _ref.value,
39
- defaultValue = _ref.defaultValue,
40
- name = _ref.name,
41
- label = _ref.label,
42
- rows = _ref.rows,
43
- placeholder = _ref.placeholder,
44
- required = _ref.required,
45
- disabled = _ref.disabled,
46
- error = _ref.error,
47
- onChange = _ref.onChange,
48
- onBlur = _ref.onBlur;
49
-
38
+ defaultValue = _ref.defaultValue,
39
+ name = _ref.name,
40
+ label = _ref.label,
41
+ rows = _ref.rows,
42
+ placeholder = _ref.placeholder,
43
+ required = _ref.required,
44
+ disabled = _ref.disabled,
45
+ error = _ref.error,
46
+ onChange = _ref.onChange,
47
+ onBlur = _ref.onBlur;
50
48
  var _useState = React.useState(nanoid.nanoid()),
51
- _useState2 = defaultTheme._slicedToArray(_useState, 1),
52
- uniqueId = _useState2[0];
53
-
49
+ _useState2 = defaultTheme._slicedToArray(_useState, 1),
50
+ uniqueId = _useState2[0];
54
51
  var _useState3 = React.useState(value || defaultValue || ''),
55
- _useState4 = defaultTheme._slicedToArray(_useState3, 2),
56
- controlledValue = _useState4[0],
57
- setControlledValue = _useState4[1];
58
-
52
+ _useState4 = defaultTheme._slicedToArray(_useState3, 2),
53
+ controlledValue = _useState4[0],
54
+ setControlledValue = _useState4[1];
59
55
  React.useEffect(function () {
60
56
  if (value !== undefined) {
61
57
  setControlledValue(value);
62
58
  }
63
59
  }, [value]);
64
-
65
60
  var onInputChange = function onInputChange(event) {
66
61
  if (lodash.isFunction(onChange)) {
67
62
  onChange(event);
68
63
  }
69
-
70
64
  setControlledValue(event.target.value);
71
65
  };
72
-
73
- return React__default['default'].createElement(TextArea$1, {
66
+ return React__default["default"].createElement(TextArea$1, {
74
67
  disabled: disabled
75
- }, label && React__default['default'].createElement(TextAreaLabel, {
68
+ }, label && React__default["default"].createElement(TextAreaLabel, {
76
69
  htmlFor: "text-area-".concat(uniqueId),
77
70
  placeholderVisible: Boolean(placeholder),
78
71
  inputValue: controlledValue
79
- }, label, required && ' *'), React__default['default'].createElement(TextAreaField, {
72
+ }, label, required && ' *'), React__default["default"].createElement(TextAreaField, {
80
73
  rows: rows,
81
74
  ref: forwardedRef,
82
75
  value: controlledValue,