@pingux/astro 1.13.0-alpha.1 → 1.13.0-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/CopyText/CopyText.js +1 -2
- package/lib/cjs/components/TextField/TextField.stories.js +2 -1
- package/lib/cjs/styles/themes/astro-nano/astro-nano.js +165 -0
- package/lib/cjs/styles/themes/astro-nano/index.js +18 -0
- package/lib/cjs/styles/variants/boxes.js +5 -1
- package/lib/cjs/styles/variants/buttons.js +4 -3
- package/lib/components/CopyText/CopyText.js +1 -2
- package/lib/components/TextField/TextField.stories.js +2 -1
- package/lib/styles/themes/astro-nano/astro-nano.js +141 -0
- package/lib/styles/themes/astro-nano/index.js +1 -0
- package/lib/styles/variants/boxes.js +5 -1
- package/lib/styles/variants/buttons.js +4 -3
- package/package.json +1 -1
|
@@ -58,8 +58,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
|
|
|
58
58
|
return (0, _react2.jsx)(_index.TooltipTrigger, (0, _extends2["default"])({
|
|
59
59
|
key: tooltip,
|
|
60
60
|
direction: "top",
|
|
61
|
-
isNotFlippable: true
|
|
62
|
-
offset: 5
|
|
61
|
+
isNotFlippable: true
|
|
63
62
|
}, others), children, (0, _react2.jsx)(_index.Tooltip, null, tooltip));
|
|
64
63
|
};
|
|
65
64
|
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
6
|
+
|
|
7
|
+
var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
|
|
8
|
+
|
|
9
|
+
var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
|
|
10
|
+
|
|
11
|
+
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
|
12
|
+
|
|
13
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
14
|
+
|
|
15
|
+
var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
|
|
16
|
+
|
|
17
|
+
var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
|
|
18
|
+
|
|
19
|
+
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
|
20
|
+
|
|
21
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
22
|
+
value: true
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
exports["default"] = void 0;
|
|
26
|
+
|
|
27
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
28
|
+
|
|
29
|
+
var _themeUi = require("theme-ui");
|
|
30
|
+
|
|
31
|
+
var _chromaJs = _interopRequireDefault(require("chroma-js"));
|
|
32
|
+
|
|
33
|
+
var _theme = _interopRequireDefault(require("../../theme"));
|
|
34
|
+
|
|
35
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
36
|
+
|
|
37
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
38
|
+
|
|
39
|
+
var scaleFont = 1.2;
|
|
40
|
+
var borderRadius = 4;
|
|
41
|
+
var focusStyles = {
|
|
42
|
+
boxShadow: 'none',
|
|
43
|
+
outline: '1px solid #000000',
|
|
44
|
+
outlineOffset: 2,
|
|
45
|
+
outlineColor: 'active'
|
|
46
|
+
};
|
|
47
|
+
var inputFocusStyles = {
|
|
48
|
+
borderColor: 'active',
|
|
49
|
+
outline: '4px solid #000000',
|
|
50
|
+
outlineColor: 'accent.90'
|
|
51
|
+
};
|
|
52
|
+
var baseButton = {
|
|
53
|
+
borderRadius: borderRadius,
|
|
54
|
+
fontWeight: 400,
|
|
55
|
+
height: '50px',
|
|
56
|
+
'&.is-hovered': {
|
|
57
|
+
boxShadow: 'none',
|
|
58
|
+
color: 'white',
|
|
59
|
+
bg: 'activeDark'
|
|
60
|
+
},
|
|
61
|
+
'&.is-pressed': {
|
|
62
|
+
bg: 'activeDarker'
|
|
63
|
+
},
|
|
64
|
+
'&:focus-visible': focusStyles,
|
|
65
|
+
'&.is-focused': focusStyles
|
|
66
|
+
};
|
|
67
|
+
var linkStyles = {
|
|
68
|
+
'&.is-hovered': {
|
|
69
|
+
color: 'activeDark'
|
|
70
|
+
},
|
|
71
|
+
'&.is-pressed': {
|
|
72
|
+
color: 'activeDarker'
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
var modifyTheme = {
|
|
76
|
+
buttons: {
|
|
77
|
+
"default": _objectSpread({
|
|
78
|
+
color: 'active'
|
|
79
|
+
}, baseButton),
|
|
80
|
+
primary: _objectSpread({}, baseButton)
|
|
81
|
+
},
|
|
82
|
+
colors: {
|
|
83
|
+
activeDark: (0, _chromaJs["default"])(_theme["default"].colors.active).darken(0.5).hex(),
|
|
84
|
+
activeDarker: (0, _chromaJs["default"])(_theme["default"].colors.active).darken(1).hex()
|
|
85
|
+
},
|
|
86
|
+
fontSizes: {
|
|
87
|
+
xs: scaleFont * _theme["default"].fontSizes.xs,
|
|
88
|
+
sm: scaleFont * _theme["default"].fontSizes.sm,
|
|
89
|
+
md: scaleFont * _theme["default"].fontSizes.md,
|
|
90
|
+
lg: scaleFont * _theme["default"].fontSizes.lg,
|
|
91
|
+
xl: scaleFont * _theme["default"].fontSizes.xl,
|
|
92
|
+
xx: scaleFont * _theme["default"].fontSizes.xx,
|
|
93
|
+
xxx: '48px'
|
|
94
|
+
},
|
|
95
|
+
forms: {
|
|
96
|
+
input: {
|
|
97
|
+
fontSize: 'md',
|
|
98
|
+
borderRadius: borderRadius,
|
|
99
|
+
height: '50px',
|
|
100
|
+
'&:focus': inputFocusStyles,
|
|
101
|
+
primary: _objectSpread(_objectSpread({}, _theme["default"].forms.input), {}, {
|
|
102
|
+
borderRadius: borderRadius,
|
|
103
|
+
fontSize: 'xxx',
|
|
104
|
+
borderColor: 'neutral.60',
|
|
105
|
+
height: '75px',
|
|
106
|
+
textAlign: 'center',
|
|
107
|
+
letterSpacing: '12px',
|
|
108
|
+
fontWeight: 'bold',
|
|
109
|
+
'&:focus': inputFocusStyles
|
|
110
|
+
})
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
links: {
|
|
114
|
+
web: linkStyles,
|
|
115
|
+
app: linkStyles
|
|
116
|
+
},
|
|
117
|
+
text: {
|
|
118
|
+
title: {
|
|
119
|
+
fontWeight: 700
|
|
120
|
+
},
|
|
121
|
+
footer: {
|
|
122
|
+
color: 'text.secondary',
|
|
123
|
+
fontSize: 'xs'
|
|
124
|
+
},
|
|
125
|
+
label: {
|
|
126
|
+
color: 'text.primary'
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
variants: {
|
|
130
|
+
boxes: {
|
|
131
|
+
card: {
|
|
132
|
+
borderRadius: borderRadius,
|
|
133
|
+
flexGrow: [1, 0],
|
|
134
|
+
maxWidth: _theme["default"].breakpoints[0],
|
|
135
|
+
bg: 'white',
|
|
136
|
+
alignItems: 'stretch',
|
|
137
|
+
py: [0, 'xl'],
|
|
138
|
+
my: 'auto',
|
|
139
|
+
boxShadow: ['none', _theme["default"].variants.boxes.card.boxShadow],
|
|
140
|
+
width: ['100%', '450px'],
|
|
141
|
+
minHeight: 'fit-content'
|
|
142
|
+
},
|
|
143
|
+
wrapper: {
|
|
144
|
+
alignItems: 'center',
|
|
145
|
+
justifyContent: 'space-between',
|
|
146
|
+
bg: ['white', 'accent.99'],
|
|
147
|
+
py: 'lg',
|
|
148
|
+
gap: 'lg',
|
|
149
|
+
overflow: 'auto',
|
|
150
|
+
position: 'absolute',
|
|
151
|
+
top: 0,
|
|
152
|
+
bottom: 0,
|
|
153
|
+
left: 0,
|
|
154
|
+
right: 0
|
|
155
|
+
},
|
|
156
|
+
cardBody: {
|
|
157
|
+
flexGrow: [1, 0]
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
var _default = (0, _themeUi.merge)(_theme["default"], modifyTheme);
|
|
164
|
+
|
|
165
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
6
|
+
|
|
7
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
_Object$defineProperty(exports, "default", {
|
|
12
|
+
enumerable: true,
|
|
13
|
+
get: function get() {
|
|
14
|
+
return _astroNano["default"];
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
var _astroNano = _interopRequireDefault(require("./astro-nano"));
|
|
@@ -174,7 +174,10 @@ var copy = {
|
|
|
174
174
|
width: 'max-content',
|
|
175
175
|
cursor: 'pointer',
|
|
176
176
|
'& .is-focused': {
|
|
177
|
-
|
|
177
|
+
outline: '1px solid',
|
|
178
|
+
outlineColor: 'active',
|
|
179
|
+
outlineOffset: '4px',
|
|
180
|
+
borderRadius: '4px'
|
|
178
181
|
}
|
|
179
182
|
};
|
|
180
183
|
var topShadowScrollbox = {
|
|
@@ -319,6 +322,7 @@ var fileInputFieldWrapper = {
|
|
|
319
322
|
}
|
|
320
323
|
};
|
|
321
324
|
var floatLabelWrapper = {
|
|
325
|
+
width: 'calc(100% - 4px)',
|
|
322
326
|
backgroundColor: 'white',
|
|
323
327
|
position: 'relative',
|
|
324
328
|
height: '17px',
|
|
@@ -472,13 +472,14 @@ var danger = _objectSpread(_objectSpread({}, base), {}, {
|
|
|
472
472
|
var copy = {
|
|
473
473
|
ml: 'xs',
|
|
474
474
|
outline: 'none',
|
|
475
|
+
height: 'auto',
|
|
475
476
|
cursor: 'pointer',
|
|
476
477
|
path: {
|
|
477
478
|
fill: 'neutral.10'
|
|
478
479
|
},
|
|
479
|
-
'&.is-focused': {
|
|
480
|
-
boxShadow: '
|
|
481
|
-
}
|
|
480
|
+
'&.is-focused': _objectSpread({
|
|
481
|
+
boxShadow: 'none'
|
|
482
|
+
}, defaultFocus)
|
|
482
483
|
};
|
|
483
484
|
var colorField = {
|
|
484
485
|
border: "1px solid ".concat(_colors.neutral['80']),
|
|
@@ -23,8 +23,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
|
|
|
23
23
|
return ___EmotionJSX(TooltipTrigger, _extends({
|
|
24
24
|
key: tooltip,
|
|
25
25
|
direction: "top",
|
|
26
|
-
isNotFlippable: true
|
|
27
|
-
offset: 5
|
|
26
|
+
isNotFlippable: true
|
|
28
27
|
}, others), children, ___EmotionJSX(Tooltip, null, tooltip));
|
|
29
28
|
};
|
|
30
29
|
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
|
|
2
|
+
import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
|
|
3
|
+
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
|
4
|
+
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
|
5
|
+
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
|
6
|
+
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
|
7
|
+
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
|
8
|
+
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
|
9
|
+
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
|
10
|
+
|
|
11
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
12
|
+
|
|
13
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
14
|
+
|
|
15
|
+
import { merge } from 'theme-ui';
|
|
16
|
+
import chroma from 'chroma-js';
|
|
17
|
+
import astroTheme from '../../theme';
|
|
18
|
+
var scaleFont = 1.2;
|
|
19
|
+
var borderRadius = 4;
|
|
20
|
+
var focusStyles = {
|
|
21
|
+
boxShadow: 'none',
|
|
22
|
+
outline: '1px solid #000000',
|
|
23
|
+
outlineOffset: 2,
|
|
24
|
+
outlineColor: 'active'
|
|
25
|
+
};
|
|
26
|
+
var inputFocusStyles = {
|
|
27
|
+
borderColor: 'active',
|
|
28
|
+
outline: '4px solid #000000',
|
|
29
|
+
outlineColor: 'accent.90'
|
|
30
|
+
};
|
|
31
|
+
var baseButton = {
|
|
32
|
+
borderRadius: borderRadius,
|
|
33
|
+
fontWeight: 400,
|
|
34
|
+
height: '50px',
|
|
35
|
+
'&.is-hovered': {
|
|
36
|
+
boxShadow: 'none',
|
|
37
|
+
color: 'white',
|
|
38
|
+
bg: 'activeDark'
|
|
39
|
+
},
|
|
40
|
+
'&.is-pressed': {
|
|
41
|
+
bg: 'activeDarker'
|
|
42
|
+
},
|
|
43
|
+
'&:focus-visible': focusStyles,
|
|
44
|
+
'&.is-focused': focusStyles
|
|
45
|
+
};
|
|
46
|
+
var linkStyles = {
|
|
47
|
+
'&.is-hovered': {
|
|
48
|
+
color: 'activeDark'
|
|
49
|
+
},
|
|
50
|
+
'&.is-pressed': {
|
|
51
|
+
color: 'activeDarker'
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
var modifyTheme = {
|
|
55
|
+
buttons: {
|
|
56
|
+
"default": _objectSpread({
|
|
57
|
+
color: 'active'
|
|
58
|
+
}, baseButton),
|
|
59
|
+
primary: _objectSpread({}, baseButton)
|
|
60
|
+
},
|
|
61
|
+
colors: {
|
|
62
|
+
activeDark: chroma(astroTheme.colors.active).darken(0.5).hex(),
|
|
63
|
+
activeDarker: chroma(astroTheme.colors.active).darken(1).hex()
|
|
64
|
+
},
|
|
65
|
+
fontSizes: {
|
|
66
|
+
xs: scaleFont * astroTheme.fontSizes.xs,
|
|
67
|
+
sm: scaleFont * astroTheme.fontSizes.sm,
|
|
68
|
+
md: scaleFont * astroTheme.fontSizes.md,
|
|
69
|
+
lg: scaleFont * astroTheme.fontSizes.lg,
|
|
70
|
+
xl: scaleFont * astroTheme.fontSizes.xl,
|
|
71
|
+
xx: scaleFont * astroTheme.fontSizes.xx,
|
|
72
|
+
xxx: '48px'
|
|
73
|
+
},
|
|
74
|
+
forms: {
|
|
75
|
+
input: {
|
|
76
|
+
fontSize: 'md',
|
|
77
|
+
borderRadius: borderRadius,
|
|
78
|
+
height: '50px',
|
|
79
|
+
'&:focus': inputFocusStyles,
|
|
80
|
+
primary: _objectSpread(_objectSpread({}, astroTheme.forms.input), {}, {
|
|
81
|
+
borderRadius: borderRadius,
|
|
82
|
+
fontSize: 'xxx',
|
|
83
|
+
borderColor: 'neutral.60',
|
|
84
|
+
height: '75px',
|
|
85
|
+
textAlign: 'center',
|
|
86
|
+
letterSpacing: '12px',
|
|
87
|
+
fontWeight: 'bold',
|
|
88
|
+
'&:focus': inputFocusStyles
|
|
89
|
+
})
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
links: {
|
|
93
|
+
web: linkStyles,
|
|
94
|
+
app: linkStyles
|
|
95
|
+
},
|
|
96
|
+
text: {
|
|
97
|
+
title: {
|
|
98
|
+
fontWeight: 700
|
|
99
|
+
},
|
|
100
|
+
footer: {
|
|
101
|
+
color: 'text.secondary',
|
|
102
|
+
fontSize: 'xs'
|
|
103
|
+
},
|
|
104
|
+
label: {
|
|
105
|
+
color: 'text.primary'
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
variants: {
|
|
109
|
+
boxes: {
|
|
110
|
+
card: {
|
|
111
|
+
borderRadius: borderRadius,
|
|
112
|
+
flexGrow: [1, 0],
|
|
113
|
+
maxWidth: astroTheme.breakpoints[0],
|
|
114
|
+
bg: 'white',
|
|
115
|
+
alignItems: 'stretch',
|
|
116
|
+
py: [0, 'xl'],
|
|
117
|
+
my: 'auto',
|
|
118
|
+
boxShadow: ['none', astroTheme.variants.boxes.card.boxShadow],
|
|
119
|
+
width: ['100%', '450px'],
|
|
120
|
+
minHeight: 'fit-content'
|
|
121
|
+
},
|
|
122
|
+
wrapper: {
|
|
123
|
+
alignItems: 'center',
|
|
124
|
+
justifyContent: 'space-between',
|
|
125
|
+
bg: ['white', 'accent.99'],
|
|
126
|
+
py: 'lg',
|
|
127
|
+
gap: 'lg',
|
|
128
|
+
overflow: 'auto',
|
|
129
|
+
position: 'absolute',
|
|
130
|
+
top: 0,
|
|
131
|
+
bottom: 0,
|
|
132
|
+
left: 0,
|
|
133
|
+
right: 0
|
|
134
|
+
},
|
|
135
|
+
cardBody: {
|
|
136
|
+
flexGrow: [1, 0]
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
export default merge(astroTheme, modifyTheme);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './astro-nano';
|
|
@@ -154,7 +154,10 @@ var copy = {
|
|
|
154
154
|
width: 'max-content',
|
|
155
155
|
cursor: 'pointer',
|
|
156
156
|
'& .is-focused': {
|
|
157
|
-
|
|
157
|
+
outline: '1px solid',
|
|
158
|
+
outlineColor: 'active',
|
|
159
|
+
outlineOffset: '4px',
|
|
160
|
+
borderRadius: '4px'
|
|
158
161
|
}
|
|
159
162
|
};
|
|
160
163
|
var topShadowScrollbox = {
|
|
@@ -299,6 +302,7 @@ var fileInputFieldWrapper = {
|
|
|
299
302
|
}
|
|
300
303
|
};
|
|
301
304
|
var floatLabelWrapper = {
|
|
305
|
+
width: 'calc(100% - 4px)',
|
|
302
306
|
backgroundColor: 'white',
|
|
303
307
|
position: 'relative',
|
|
304
308
|
height: '17px',
|
|
@@ -452,13 +452,14 @@ var danger = _objectSpread(_objectSpread({}, base), {}, {
|
|
|
452
452
|
var copy = {
|
|
453
453
|
ml: 'xs',
|
|
454
454
|
outline: 'none',
|
|
455
|
+
height: 'auto',
|
|
455
456
|
cursor: 'pointer',
|
|
456
457
|
path: {
|
|
457
458
|
fill: 'neutral.10'
|
|
458
459
|
},
|
|
459
|
-
'&.is-focused': {
|
|
460
|
-
boxShadow: '
|
|
461
|
-
}
|
|
460
|
+
'&.is-focused': _objectSpread({
|
|
461
|
+
boxShadow: 'none'
|
|
462
|
+
}, defaultFocus)
|
|
462
463
|
};
|
|
463
464
|
var colorField = {
|
|
464
465
|
border: "1px solid ".concat(neutral['80']),
|