@flodesk/grain 2.20.0 → 2.20.3

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 (75) hide show
  1. package/es/components/arrange.js +33 -260
  2. package/es/components/box.js +62 -995
  3. package/es/components/button.js +36 -100
  4. package/es/components/icon-button.js +30 -93
  5. package/es/components/icon-toggle.js +39 -94
  6. package/es/components/icon.js +30 -126
  7. package/es/components/index.js +11 -107
  8. package/es/components/stack.js +26 -81
  9. package/es/components/text-button.js +28 -66
  10. package/es/components/text-input.js +76 -138
  11. package/es/components/text-toggle.js +32 -78
  12. package/es/components/text.js +33 -159
  13. package/es/foundational/index.js +9 -23
  14. package/es/hooks/index.js +1 -15
  15. package/es/hooks/useMedia.js +21 -17
  16. package/es/icons/icon-align-center.js +5 -43
  17. package/es/icons/icon-align-left.js +6 -44
  18. package/es/icons/icon-align-right.js +6 -44
  19. package/es/icons/icon-arrow-down.js +5 -43
  20. package/es/icons/icon-arrow-left.js +5 -43
  21. package/es/icons/icon-arrow-right.js +5 -43
  22. package/es/icons/icon-arrow-up.js +5 -43
  23. package/es/icons/icon-browser.js +9 -47
  24. package/es/icons/icon-chart.js +5 -43
  25. package/es/icons/icon-check.js +7 -45
  26. package/es/icons/icon-chevron-down.js +5 -43
  27. package/es/icons/icon-chevron-horizontal.js +5 -43
  28. package/es/icons/icon-chevron-left.js +5 -43
  29. package/es/icons/icon-chevron-right.js +10 -48
  30. package/es/icons/icon-chevron-up.js +10 -48
  31. package/es/icons/icon-chevron-vertical.js +13 -51
  32. package/es/icons/icon-clip.js +5 -43
  33. package/es/icons/icon-clock.js +6 -44
  34. package/es/icons/icon-crop.js +5 -43
  35. package/es/icons/icon-cross.js +5 -43
  36. package/es/icons/icon-download.js +8 -46
  37. package/es/icons/icon-duplicate.js +6 -44
  38. package/es/icons/icon-ellipsis.js +7 -45
  39. package/es/icons/icon-file.js +5 -43
  40. package/es/icons/icon-folder-add.js +5 -43
  41. package/es/icons/icon-folder.js +5 -43
  42. package/es/icons/icon-gear.js +6 -44
  43. package/es/icons/icon-globe.js +5 -43
  44. package/es/icons/icon-heart.js +5 -43
  45. package/es/icons/icon-image.js +5 -43
  46. package/es/icons/icon-link.js +6 -44
  47. package/es/icons/icon-mail.js +5 -43
  48. package/es/icons/icon-minus.js +5 -43
  49. package/es/icons/icon-monitor.js +5 -43
  50. package/es/icons/icon-pencil.js +5 -43
  51. package/es/icons/icon-phone.js +5 -43
  52. package/es/icons/icon-plus.js +5 -43
  53. package/es/icons/icon-redo.js +5 -43
  54. package/es/icons/icon-search.js +6 -44
  55. package/es/icons/icon-send.js +5 -43
  56. package/es/icons/icon-share.js +5 -43
  57. package/es/icons/icon-smile.js +8 -46
  58. package/es/icons/icon-switch.js +5 -43
  59. package/es/icons/icon-tablet.js +5 -43
  60. package/es/icons/icon-text-align-center.js +5 -43
  61. package/es/icons/icon-text-align-left.js +5 -43
  62. package/es/icons/icon-text-align-right.js +5 -43
  63. package/es/icons/icon-trash.js +5 -43
  64. package/es/icons/icon-type.js +5 -43
  65. package/es/icons/icon-undo.js +5 -43
  66. package/es/icons/icon-upload.js +8 -46
  67. package/es/icons/index.js +51 -417
  68. package/es/index.js +3 -52
  69. package/es/types.js +23 -38
  70. package/es/utilities/helpers.js +22 -50
  71. package/es/utilities/index.js +21 -145
  72. package/es/utilities/responsive.js +58 -79
  73. package/es/utilities/styles.js +45 -89
  74. package/es/variables.js +101 -110
  75. package/package.json +2 -2
@@ -1,40 +1,31 @@
1
- "use strict";
2
-
3
- require("core-js/modules/es.object.define-property.js");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports.Arrange = void 0;
11
-
12
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
-
14
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
15
-
16
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
17
-
18
- var _utilities = require("../utilities");
19
-
20
- var _react = _interopRequireDefault(require("react"));
1
+ import "core-js/modules/es.array.slice.js";
2
+ import "core-js/modules/es.object.freeze.js";
3
+ import "core-js/modules/es.object.define-properties.js";
4
+ import "core-js/modules/es.object.keys.js";
5
+ import "core-js/modules/es.array.index-of.js";
6
+ import "core-js/modules/es.symbol.js";
7
+ var _excluded = ["children", "gap", "columns", "autoFlow", "justifyItems", "alignItems", "justifyContent", "alignContent", "placeItems", "placeContent"];
21
8
 
22
- var _styled = _interopRequireDefault(require("@emotion/styled"));
9
+ var _templateObject;
23
10
 
24
- var _types = require("../types");
11
+ import "core-js/modules/es.object.assign.js";
25
12
 
26
- var _excluded = ["children", "gap", "columns", "autoFlow", "justifyItems", "alignItems", "justifyContent", "alignContent", "placeItems", "placeContent"];
13
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
27
14
 
28
- var _templateObject;
15
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
29
16
 
30
- var __jsx = _react.default.createElement;
17
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
31
18
 
32
- var Wrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n ", ";\n ", ";\n grid-template-columns: ", ";\n justify-items: ", ";\n align-items: ", ";\n justify-content: ", ";\n align-content: ", ";\n place-items: ", ";\n place-content: ", ";\n"])), function (p) {
19
+ import { getGridColumns, getResponsiveSpace } from '../utilities';
20
+ import React from "react";
21
+ import styled from "@emotion/styled";
22
+ import { types } from '../types';
23
+ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: grid;\n ", ";\n ", ";\n grid-template-columns: ", ";\n justify-items: ", ";\n align-items: ", ";\n justify-content: ", ";\n align-content: ", ";\n place-items: ", ";\n place-content: ", ";\n"])), function (p) {
33
24
  return !p.columns && "grid-auto-flow: ".concat(p.autoFlow);
34
25
  }, function (p) {
35
- return (0, _utilities.getResponsiveSpace)('gap', p.gap);
26
+ return getResponsiveSpace('gap', p.gap);
36
27
  }, function (p) {
37
- return (0, _utilities.getGridColumns)(p.columns);
28
+ return getGridColumns(p.columns);
38
29
  }, function (p) {
39
30
  return p.justifyItems;
40
31
  }, function (p) {
@@ -48,8 +39,7 @@ var Wrapper = _styled.default.div(_templateObject || (_templateObject = (0, _tag
48
39
  }, function (p) {
49
40
  return p.placeContent;
50
41
  });
51
-
52
- var Arrange = function Arrange(_ref) {
42
+ export var Arrange = function Arrange(_ref) {
53
43
  var children = _ref.children,
54
44
  gap = _ref.gap,
55
45
  columns = _ref.columns,
@@ -63,8 +53,9 @@ var Arrange = function Arrange(_ref) {
63
53
  alignContent = _ref.alignContent,
64
54
  placeItems = _ref.placeItems,
65
55
  placeContent = _ref.placeContent,
66
- props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
67
- return __jsx(Wrapper, (0, _extends2.default)({
56
+ props = _objectWithoutProperties(_ref, _excluded);
57
+
58
+ return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
68
59
  gap: gap,
69
60
  columns: columns,
70
61
  autoFlow: autoFlow,
@@ -76,232 +67,14 @@ var Arrange = function Arrange(_ref) {
76
67
  placeContent: placeContent
77
68
  }, props), children);
78
69
  };
79
-
80
- exports.Arrange = Arrange;
81
- Arrange.__docgenInfo = {
82
- "description": "",
83
- "methods": [],
84
- "displayName": "Arrange",
85
- "props": {
86
- "autoFlow": {
87
- "defaultValue": {
88
- "value": "'column'",
89
- "computed": false
90
- },
91
- "type": {
92
- "name": "enum",
93
- "value": [{
94
- "value": "\"column\"",
95
- "computed": false
96
- }, {
97
- "value": "\"row\"",
98
- "computed": false
99
- }]
100
- },
101
- "required": false,
102
- "description": ""
103
- },
104
- "alignItems": {
105
- "defaultValue": {
106
- "value": "'center'",
107
- "computed": false
108
- },
109
- "type": {
110
- "name": "enum",
111
- "value": [{
112
- "value": "\"start\"",
113
- "computed": false
114
- }, {
115
- "value": "\"end\"",
116
- "computed": false
117
- }, {
118
- "value": "\"center\"",
119
- "computed": false
120
- }, {
121
- "value": "\"stretch\"",
122
- "computed": false
123
- }]
124
- },
125
- "required": false,
126
- "description": ""
127
- },
128
- "justifyContent": {
129
- "defaultValue": {
130
- "value": "'start'",
131
- "computed": false
132
- },
133
- "type": {
134
- "name": "enum",
135
- "value": [{
136
- "value": "\"start\"",
137
- "computed": false
138
- }, {
139
- "value": "\"end\"",
140
- "computed": false
141
- }, {
142
- "value": "\"center\"",
143
- "computed": false
144
- }, {
145
- "value": "\"stretch\"",
146
- "computed": false
147
- }, {
148
- "value": "\"space-around\"",
149
- "computed": false
150
- }, {
151
- "value": "\"space-between\"",
152
- "computed": false
153
- }, {
154
- "value": "\"space-evenly\"",
155
- "computed": false
156
- }]
157
- },
158
- "required": false,
159
- "description": ""
160
- },
161
- "gap": {
162
- "type": {
163
- "name": "union",
164
- "value": [{
165
- "name": "enum",
166
- "value": [{
167
- "value": "\"xs\"",
168
- "computed": false
169
- }, {
170
- "value": "\"s\"",
171
- "computed": false
172
- }, {
173
- "value": "\"m\"",
174
- "computed": false
175
- }, {
176
- "value": "\"l\"",
177
- "computed": false
178
- }, {
179
- "value": "\"xl\"",
180
- "computed": false
181
- }, {
182
- "value": "\"xxl\"",
183
- "computed": false
184
- }]
185
- }, {
186
- "name": "number"
187
- }, {
188
- "name": "string"
189
- }, {
190
- "name": "object"
191
- }]
192
- },
193
- "required": false,
194
- "description": ""
195
- },
196
- "columns": {
197
- "type": {
198
- "name": "union",
199
- "value": [{
200
- "name": "array"
201
- }, {
202
- "name": "string"
203
- }]
204
- },
205
- "required": false,
206
- "description": ""
207
- },
208
- "justifyItems": {
209
- "type": {
210
- "name": "enum",
211
- "value": [{
212
- "value": "\"start\"",
213
- "computed": false
214
- }, {
215
- "value": "\"end\"",
216
- "computed": false
217
- }, {
218
- "value": "\"center\"",
219
- "computed": false
220
- }, {
221
- "value": "\"stretch\"",
222
- "computed": false
223
- }]
224
- },
225
- "required": false,
226
- "description": ""
227
- },
228
- "alignContent": {
229
- "type": {
230
- "name": "enum",
231
- "value": [{
232
- "value": "\"start\"",
233
- "computed": false
234
- }, {
235
- "value": "\"end\"",
236
- "computed": false
237
- }, {
238
- "value": "\"center\"",
239
- "computed": false
240
- }, {
241
- "value": "\"stretch\"",
242
- "computed": false
243
- }, {
244
- "value": "\"space-around\"",
245
- "computed": false
246
- }, {
247
- "value": "\"space-between\"",
248
- "computed": false
249
- }, {
250
- "value": "\"space-evenly\"",
251
- "computed": false
252
- }]
253
- },
254
- "required": false,
255
- "description": ""
256
- },
257
- "placeItems": {
258
- "type": {
259
- "name": "enum",
260
- "value": [{
261
- "value": "\"start\"",
262
- "computed": false
263
- }, {
264
- "value": "\"end\"",
265
- "computed": false
266
- }, {
267
- "value": "\"center\"",
268
- "computed": false
269
- }, {
270
- "value": "\"stretch\"",
271
- "computed": false
272
- }]
273
- },
274
- "required": false,
275
- "description": ""
276
- },
277
- "placeContent": {
278
- "type": {
279
- "name": "enum",
280
- "value": [{
281
- "value": "\"start\"",
282
- "computed": false
283
- }, {
284
- "value": "\"end\"",
285
- "computed": false
286
- }, {
287
- "value": "\"center\"",
288
- "computed": false
289
- }, {
290
- "value": "\"stretch\"",
291
- "computed": false
292
- }, {
293
- "value": "\"space-around\"",
294
- "computed": false
295
- }, {
296
- "value": "\"space-between\"",
297
- "computed": false
298
- }, {
299
- "value": "\"space-evenly\"",
300
- "computed": false
301
- }]
302
- },
303
- "required": false,
304
- "description": ""
305
- }
306
- }
70
+ Arrange.propTypes = {
71
+ gap: types.space,
72
+ columns: types.columns,
73
+ autoFlow: types.autoFlow,
74
+ justifyItems: types.gridItemsAlignments,
75
+ alignItems: types.gridItemsAlignments,
76
+ justifyContent: types.gridContentPositions,
77
+ alignContent: types.gridContentPositions,
78
+ placeItems: types.gridItemsAlignments,
79
+ placeContent: types.gridContentPositions
307
80
  };