@pingux/astro 1.27.0-alpha.6 → 1.27.0-alpha.8

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 (9) hide show
  1. package/lib/cjs/recipes/FlippableCaretMenuButton.stories.js +38 -30
  2. package/lib/cjs/recipes/MaskedValue.stories.js +8 -5
  3. package/lib/cjs/recipes/NeutralInput.stories.js +6 -3
  4. package/lib/cjs/recipes/RowLineChart.stories.js +58 -70
  5. package/lib/recipes/FlippableCaretMenuButton.stories.js +38 -30
  6. package/lib/recipes/MaskedValue.stories.js +8 -5
  7. package/lib/recipes/NeutralInput.stories.js +6 -3
  8. package/lib/recipes/RowLineChart.stories.js +58 -70
  9. package/package.json +1 -1
package/lib/cjs/recipes/FlippableCaretMenuButton.stories.js CHANGED
@@ -73,6 +73,40 @@ var _default = {
73
73
  };
74
74
  exports["default"] = _default;
75
75
  var buttonArray = ['Web App', 'Native App', 'Single Page App', 'Non-Interactive', 'Worker', 'Advanced Configuration', 'Built-in admin console for this environment', 'Built-in Application portal'];
76
+ var sx = {
77
+ openButton: {
78
+ height: '30px',
79
+ borderRadius: 'md',
80
+ fontSize: '13px',
81
+ mb: 'sm'
82
+ },
83
+ closeIconButton: {
84
+ position: 'absolute',
85
+ top: '14px',
86
+ right: 'sm'
87
+ },
88
+ buttonsContainer: {
89
+ p: 'lg',
90
+ flexDirection: 'initial !important',
91
+ alignContent: 'space-between',
92
+ flexWrap: 'wrap'
93
+ },
94
+ selectedButton: {
95
+ mb: 'sm',
96
+ mr: '4px',
97
+ height: '30px',
98
+ borderRadius: '15px',
99
+ fontSize: '13px'
100
+ },
101
+ unSelectedButton: {
102
+ mb: 'sm',
103
+ mr: '4px',
104
+ borderColor: 'neutral.80',
105
+ height: '30px',
106
+ borderRadius: '15px',
107
+ fontSize: '13px'
108
+ }
109
+ };
76
110
 
77
111
  var Default = function Default() {
78
112
  var buttonRef = (0, _react.useRef)();
@@ -131,14 +165,9 @@ var Default = function Default() {
131
165
 
132
166
  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Button, {
133
167
  ref: buttonRef,
134
- mb: "sm",
135
168
  variant: "inline",
136
169
  onPress: onChange,
137
- sx: {
138
- height: '30px',
139
- borderRadius: '15px',
140
- fontSize: '13px'
141
- }
170
+ sx: sx.openButton
142
171
  }, (0, _react2.jsx)(_index.Box, {
143
172
  isRow: true,
144
173
  alignItems: "center"
@@ -161,36 +190,15 @@ var Default = function Default() {
161
190
  onPress: function onPress() {
162
191
  return setIsOpen(false);
163
192
  },
164
- sx: {
165
- position: 'absolute',
166
- top: 14,
167
- right: 10
168
- }
193
+ sx: sx.closeIconButton
169
194
  }, (0, _react2.jsx)(_index.Icon, {
170
195
  icon: _CloseIcon["default"]
171
196
  })), (0, _react2.jsx)(_index.Box, {
172
- sx: {
173
- p: 'lg',
174
- flexDirection: 'initial !important',
175
- alignContent: 'space-between',
176
- flexWrap: 'wrap'
177
- }
197
+ sx: sx.buttonsContainer
178
198
  }, (0, _map["default"])(buttonArray).call(buttonArray, function (item) {
179
199
  return (0, _react2.jsx)(_index.Button, {
180
- mb: "sm",
181
200
  variant: "inline",
182
- sx: (0, _includes["default"])(selectedButtons).call(selectedButtons, item) ? {
183
- mr: '4px',
184
- height: '30px',
185
- borderRadius: '15px',
186
- fontSize: '13px'
187
- } : {
188
- mr: '4px',
189
- borderColor: 'neutral.80',
190
- height: '30px',
191
- borderRadius: '15px',
192
- fontSize: '13px'
193
- },
201
+ sx: (0, _includes["default"])(selectedButtons).call(selectedButtons, item) ? sx.selectedButton : sx.unSelectedButton,
194
202
  key: item,
195
203
  onPress: function onPress() {
196
204
  return toggleButton(item);
package/lib/cjs/recipes/MaskedValue.stories.js CHANGED
@@ -54,6 +54,13 @@ var _default = {
54
54
  }
55
55
  };
56
56
  exports["default"] = _default;
57
+ var sx = {
58
+ showHideButton: {
59
+ width: 'fit-content',
60
+ marginLeft: 'sm',
61
+ alignSelf: 'auto'
62
+ }
63
+ };
57
64
 
58
65
  var Default = function Default(_ref) {
59
66
  var _context;
@@ -84,11 +91,7 @@ var Default = function Default(_ref) {
84
91
  onPress: function onPress() {
85
92
  return setIsMasked(!isMasked);
86
93
  },
87
- sx: {
88
- width: 'fit-content',
89
- marginLeft: 10,
90
- alignSelf: 'auto'
91
- }
94
+ sx: sx.showHideButton
92
95
  }, (0, _react2.jsx)(_index.Icon, {
93
96
  icon: isMasked ? _EyeOffOutlineIcon["default"] : _EyeOutlineIcon["default"]
94
97
  }))));
package/lib/cjs/recipes/NeutralInput.stories.js CHANGED
@@ -20,12 +20,15 @@ var _default = {
20
20
  title: 'Recipes/NeutralCheckboxField'
21
21
  };
22
22
  exports["default"] = _default;
23
+ var sx = {
24
+ checkboxColor: {
25
+ color: 'neutral.10'
26
+ }
27
+ };
23
28
 
24
29
  var Default = function Default() {
25
30
  return (0, _react2.jsx)(_CheckboxField["default"], {
26
- controlProps: {
27
- color: 'neutral.10'
28
- }
31
+ sx: sx.checkboxColor
29
32
  }, "Click me");
30
33
  };
31
34
 
package/lib/cjs/recipes/RowLineChart.stories.js CHANGED
@@ -170,6 +170,34 @@ var zeroData = [{
170
170
  id: 12,
171
171
  value: 0
172
172
  }];
173
+ var sx = {
174
+ container: {
175
+ backgroundColor: 'accent.99',
176
+ alignItems: 'center',
177
+ justifyContent: 'space-between',
178
+ pr: '20px'
179
+ },
180
+ button: {
181
+ ml: 'md',
182
+ pr: 'md'
183
+ },
184
+ chartTitleContainer: {
185
+ ml: '20px',
186
+ pr: 'md'
187
+ },
188
+ chartContainer: {
189
+ width: '100%',
190
+ height: '100%'
191
+ },
192
+ chart: {
193
+ width: '50',
194
+ height: '18'
195
+ },
196
+ chartTrendContainer: {
197
+ ml: 'md',
198
+ width: '50px'
199
+ }
200
+ };
173
201
 
174
202
  var Default = function Default() {
175
203
  var _useResizeObserver = (0, _useResizeObserver2["default"])(),
@@ -193,10 +221,7 @@ var Default = function Default() {
193
221
  }, [isMobile]);
194
222
  var EmptyData = (0, _react2.jsx)(_index.Box, {
195
223
  isRow: true,
196
- bg: "accent.99",
197
- alignItems: "center",
198
- justifyContent: "space-between",
199
- pr: 20,
224
+ sx: sx.container,
200
225
  ref: ref
201
226
  }, (0, _react2.jsx)(_index.Box, {
202
227
  p: "md",
@@ -210,8 +235,7 @@ var Default = function Default() {
210
235
  alignItems: "center"
211
236
  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
212
237
  variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
213
- ml: 20,
214
- pr: 15
238
+ sx: sx.chartTitleContainer
215
239
  }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
216
240
  variant: "expandableRow.lineChart.title"
217
241
  }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -224,8 +248,7 @@ var Default = function Default() {
224
248
  }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
225
249
  variant: "expandableRow.chartWrapper",
226
250
  onPress: (0, _addonActions.action)('seeContributingDataAction'),
227
- ml: 15,
228
- pr: 15,
251
+ sx: sx.button,
229
252
  "aria-label": "line-chart button"
230
253
  }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
231
254
  variant: "boxes.expandableRow.lineChart.divider"
@@ -234,11 +257,9 @@ var Default = function Default() {
234
257
  }, (0, _react2.jsx)(_index.Box, {
235
258
  variant: "boxes.expandableRow.lineChart.chart"
236
259
  }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
237
- width: "100%",
238
- height: "100%"
260
+ sx: sx.chartContainer
239
261
  }, (0, _react2.jsx)(_recharts.LineChart, {
240
- width: 50,
241
- height: 18,
262
+ sx: sx.chart,
242
263
  data: chartData
243
264
  }, (0, _react2.jsx)(_recharts.Line, {
244
265
  type: "monotone",
@@ -249,8 +270,7 @@ var Default = function Default() {
249
270
  variant: "expandableRow.lineChart.chartLabel"
250
271
  }, "No data yet")), (0, _react2.jsx)(_index.Box, {
251
272
  size: "sm",
252
- ml: 15,
253
- width: 50
273
+ sx: sx.chartTrendContainer
254
274
  }, (0, _react2.jsx)(_index.Text, {
255
275
  variant: "expandableRow.lineChart.trend"
256
276
  }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
@@ -260,10 +280,7 @@ var Default = function Default() {
260
280
  }))));
261
281
  var FullData = (0, _react2.jsx)(_index.Box, {
262
282
  isRow: true,
263
- bg: "accent.99",
264
- alignItems: "center",
265
- justifyContent: "space-between",
266
- pr: 20,
283
+ sx: sx.container,
267
284
  mt: 20
268
285
  }, (0, _react2.jsx)(_index.Box, {
269
286
  p: "md",
@@ -277,8 +294,7 @@ var Default = function Default() {
277
294
  alignItems: "center"
278
295
  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
279
296
  variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
280
- ml: 20,
281
- pr: 15
297
+ sx: sx.chartTitleContainer
282
298
  }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
283
299
  variant: "expandableRow.lineChart.title"
284
300
  }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -291,8 +307,7 @@ var Default = function Default() {
291
307
  }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
292
308
  variant: "expandableRow.chartWrapper",
293
309
  onPress: (0, _addonActions.action)('seeContributingDataAction'),
294
- ml: 15,
295
- pr: 15,
310
+ sx: sx.button,
296
311
  "aria-label": "line-chart button"
297
312
  }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
298
313
  variant: "boxes.expandableRow.lineChart.divider"
@@ -302,11 +317,9 @@ var Default = function Default() {
302
317
  variant: "boxes.expandableRow.lineChart.chart",
303
318
  width: 50
304
319
  }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
305
- width: "100%",
306
- height: "100%"
320
+ sx: sx.chartContainer
307
321
  }, (0, _react2.jsx)(_recharts.LineChart, {
308
- width: 50,
309
- height: 18,
322
+ sx: sx.chart,
310
323
  data: chartData
311
324
  }, (0, _react2.jsx)(_recharts.Line, {
312
325
  type: "monotone",
@@ -317,8 +330,7 @@ var Default = function Default() {
317
330
  variant: "expandableRow.lineChart.chartLabel"
318
331
  }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
319
332
  size: "sm",
320
- ml: 15,
321
- width: 50
333
+ sx: sx.chartTrendContainer
322
334
  }, (0, _react2.jsx)(_index.Text, {
323
335
  variant: "expandableRow.lineChart.trend"
324
336
  }, "+ 8.6%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
@@ -328,10 +340,7 @@ var Default = function Default() {
328
340
  }))));
329
341
  var PartialData = (0, _react2.jsx)(_index.Box, {
330
342
  isRow: true,
331
- bg: "accent.99",
332
- alignItems: "center",
333
- justifyContent: "space-between",
334
- pr: 20,
343
+ sx: sx.container,
335
344
  mt: 20
336
345
  }, (0, _react2.jsx)(_index.Box, {
337
346
  p: "md",
@@ -345,8 +354,7 @@ var Default = function Default() {
345
354
  alignItems: "center"
346
355
  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
347
356
  variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
348
- ml: 20,
349
- pr: 15
357
+ sx: sx.chartTitleContainer
350
358
  }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
351
359
  variant: "expandableRow.lineChart.title"
352
360
  }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -359,8 +367,7 @@ var Default = function Default() {
359
367
  }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
360
368
  variant: "expandableRow.chartWrapper",
361
369
  onPress: (0, _addonActions.action)('seeContributingDataAction'),
362
- ml: 15,
363
- pr: 15,
370
+ sx: sx.button,
364
371
  "aria-label": "line-chart button"
365
372
  }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
366
373
  variant: "boxes.expandableRow.lineChart.divider"
@@ -370,11 +377,9 @@ var Default = function Default() {
370
377
  variant: "boxes.expandableRow.lineChart.chart",
371
378
  width: 50
372
379
  }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
373
- width: "100%",
374
- height: "100%"
380
+ sx: sx.chartContainer
375
381
  }, (0, _react2.jsx)(_recharts.LineChart, {
376
- width: 50,
377
- height: 18,
382
+ sx: sx.chart,
378
383
  data: partialDataData
379
384
  }, (0, _react2.jsx)(_recharts.Line, {
380
385
  type: "monotone",
@@ -385,8 +390,7 @@ var Default = function Default() {
385
390
  variant: "expandableRow.lineChart.chartLabel"
386
391
  }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
387
392
  size: "sm",
388
- ml: 15,
389
- width: 50
393
+ sx: sx.chartTrendContainer
390
394
  }, (0, _react2.jsx)(_index.Text, {
391
395
  variant: "expandableRow.lineChart.trend"
392
396
  }, "- 8.6%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
@@ -396,10 +400,7 @@ var Default = function Default() {
396
400
  }))));
397
401
  var ZeroData = (0, _react2.jsx)(_index.Box, {
398
402
  isRow: true,
399
- bg: "accent.99",
400
- alignItems: "center",
401
- justifyContent: "space-between",
402
- pr: 20,
403
+ sx: sx.container,
403
404
  mt: 20
404
405
  }, (0, _react2.jsx)(_index.Box, {
405
406
  p: "md",
@@ -413,8 +414,7 @@ var Default = function Default() {
413
414
  alignItems: "center"
414
415
  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
415
416
  variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
416
- ml: 20,
417
- pr: 15
417
+ sx: sx.chartTitleContainer
418
418
  }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
419
419
  variant: "expandableRow.lineChart.title"
420
420
  }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -427,8 +427,7 @@ var Default = function Default() {
427
427
  }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
428
428
  variant: "expandableRow.chartWrapper",
429
429
  onPress: (0, _addonActions.action)('seeContributingDataAction'),
430
- ml: 15,
431
- pr: 15,
430
+ sx: sx.button,
432
431
  "aria-label": "line-chart button"
433
432
  }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
434
433
  variant: "boxes.expandableRow.lineChart.divider"
@@ -438,11 +437,9 @@ var Default = function Default() {
438
437
  variant: "boxes.expandableRow.lineChart.chart",
439
438
  width: 50
440
439
  }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
441
- width: "100%",
442
- height: "100%"
440
+ sx: sx.chartContainer
443
441
  }, (0, _react2.jsx)(_recharts.LineChart, {
444
- width: 50,
445
- height: 18,
442
+ sx: sx.chart,
446
443
  data: zeroData
447
444
  }, (0, _react2.jsx)(_recharts.Line, {
448
445
  type: "monotone",
@@ -453,8 +450,7 @@ var Default = function Default() {
453
450
  variant: "expandableRow.lineChart.chartLabel"
454
451
  }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
455
452
  size: "sm",
456
- ml: 15,
457
- width: 50
453
+ sx: sx.chartTrendContainer
458
454
  }, (0, _react2.jsx)(_index.Text, {
459
455
  variant: "expandableRow.lineChart.trend"
460
456
  }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
@@ -464,10 +460,7 @@ var Default = function Default() {
464
460
  }))));
465
461
  var ZeroValues = (0, _react2.jsx)(_index.Box, {
466
462
  isRow: true,
467
- bg: "accent.99",
468
- alignItems: "center",
469
- justifyContent: "space-between",
470
- pr: 20,
463
+ sx: sx.container,
471
464
  mt: 20
472
465
  }, (0, _react2.jsx)(_index.Box, {
473
466
  p: "md",
@@ -481,8 +474,7 @@ var Default = function Default() {
481
474
  alignItems: "center"
482
475
  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
483
476
  variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
484
- ml: 20,
485
- pr: 15
477
+ sx: sx.chartTitleContainer
486
478
  }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
487
479
  variant: "expandableRow.lineChart.title"
488
480
  }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -495,8 +487,7 @@ var Default = function Default() {
495
487
  }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
496
488
  variant: "expandableRow.chartWrapper",
497
489
  onPress: (0, _addonActions.action)('seeContributingDataAction'),
498
- ml: 15,
499
- pr: 15,
490
+ sx: sx.button,
500
491
  "aria-label": "line-chart button"
501
492
  }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
502
493
  variant: "boxes.expandableRow.lineChart.divider"
@@ -506,11 +497,9 @@ var Default = function Default() {
506
497
  variant: "boxes.expandableRow.lineChart.chart",
507
498
  width: 50
508
499
  }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
509
- width: "100%",
510
- height: "100%"
500
+ sx: sx.chartContainer
511
501
  }, (0, _react2.jsx)(_recharts.LineChart, {
512
- width: 50,
513
- height: 18,
502
+ sx: sx.chart,
514
503
  data: zeroValuesData
515
504
  }, (0, _react2.jsx)(_recharts.Line, {
516
505
  type: "monotone",
@@ -521,8 +510,7 @@ var Default = function Default() {
521
510
  variant: "expandableRow.lineChart.chartLabel"
522
511
  }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
523
512
  size: "sm",
524
- ml: 15,
525
- width: 50
513
+ sx: sx.chartTrendContainer
526
514
  }, (0, _react2.jsx)(_index.Text, {
527
515
  variant: "expandableRow.lineChart.trend"
528
516
  }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
package/lib/recipes/FlippableCaretMenuButton.stories.js CHANGED
@@ -31,6 +31,40 @@ export default {
31
31
  title: 'Recipes/FlippableCaretMenuButton'
32
32
  };
33
33
  var buttonArray = ['Web App', 'Native App', 'Single Page App', 'Non-Interactive', 'Worker', 'Advanced Configuration', 'Built-in admin console for this environment', 'Built-in Application portal'];
34
+ var sx = {
35
+ openButton: {
36
+ height: '30px',
37
+ borderRadius: 'md',
38
+ fontSize: '13px',
39
+ mb: 'sm'
40
+ },
41
+ closeIconButton: {
42
+ position: 'absolute',
43
+ top: '14px',
44
+ right: 'sm'
45
+ },
46
+ buttonsContainer: {
47
+ p: 'lg',
48
+ flexDirection: 'initial !important',
49
+ alignContent: 'space-between',
50
+ flexWrap: 'wrap'
51
+ },
52
+ selectedButton: {
53
+ mb: 'sm',
54
+ mr: '4px',
55
+ height: '30px',
56
+ borderRadius: '15px',
57
+ fontSize: '13px'
58
+ },
59
+ unSelectedButton: {
60
+ mb: 'sm',
61
+ mr: '4px',
62
+ borderColor: 'neutral.80',
63
+ height: '30px',
64
+ borderRadius: '15px',
65
+ fontSize: '13px'
66
+ }
67
+ };
34
68
  export var Default = function Default() {
35
69
  var buttonRef = useRef();
36
70
  var popoverRef = useRef();
@@ -89,14 +123,9 @@ export var Default = function Default() {
89
123
 
90
124
  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, {
91
125
  ref: buttonRef,
92
- mb: "sm",
93
126
  variant: "inline",
94
127
  onPress: onChange,
95
- sx: {
96
- height: '30px',
97
- borderRadius: '15px',
98
- fontSize: '13px'
99
- }
128
+ sx: sx.openButton
100
129
  }, ___EmotionJSX(Box, {
101
130
  isRow: true,
102
131
  alignItems: "center"
@@ -119,36 +148,15 @@ export var Default = function Default() {
119
148
  onPress: function onPress() {
120
149
  return setIsOpen(false);
121
150
  },
122
- sx: {
123
- position: 'absolute',
124
- top: 14,
125
- right: 10
126
- }
151
+ sx: sx.closeIconButton
127
152
  }, ___EmotionJSX(Icon, {
128
153
  icon: CloseIcon
129
154
  })), ___EmotionJSX(Box, {
130
- sx: {
131
- p: 'lg',
132
- flexDirection: 'initial !important',
133
- alignContent: 'space-between',
134
- flexWrap: 'wrap'
135
- }
155
+ sx: sx.buttonsContainer
136
156
  }, _mapInstanceProperty(buttonArray).call(buttonArray, function (item) {
137
157
  return ___EmotionJSX(Button, {
138
- mb: "sm",
139
158
  variant: "inline",
140
- sx: _includesInstanceProperty(selectedButtons).call(selectedButtons, item) ? {
141
- mr: '4px',
142
- height: '30px',
143
- borderRadius: '15px',
144
- fontSize: '13px'
145
- } : {
146
- mr: '4px',
147
- borderColor: 'neutral.80',
148
- height: '30px',
149
- borderRadius: '15px',
150
- fontSize: '13px'
151
- },
159
+ sx: _includesInstanceProperty(selectedButtons).call(selectedButtons, item) ? sx.selectedButton : sx.unSelectedButton,
152
160
  key: item,
153
161
  onPress: function onPress() {
154
162
  return toggleButton(item);
package/lib/recipes/MaskedValue.stories.js CHANGED
@@ -23,6 +23,13 @@ export default {
23
23
  }
24
24
  }
25
25
  };
26
+ var sx = {
27
+ showHideButton: {
28
+ width: 'fit-content',
29
+ marginLeft: 'sm',
30
+ alignSelf: 'auto'
31
+ }
32
+ };
26
33
  export var Default = function Default(_ref) {
27
34
  var _context;
28
35
 
@@ -52,11 +59,7 @@ export var Default = function Default(_ref) {
52
59
  onPress: function onPress() {
53
60
  return setIsMasked(!isMasked);
54
61
  },
55
- sx: {
56
- width: 'fit-content',
57
- marginLeft: 10,
58
- alignSelf: 'auto'
59
- }
62
+ sx: sx.showHideButton
60
63
  }, ___EmotionJSX(Icon, {
61
64
  icon: isMasked ? EyeOffIcon : EyeIcon
62
65
  }))));
package/lib/recipes/NeutralInput.stories.js CHANGED
@@ -4,10 +4,13 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
4
4
  export default {
5
5
  title: 'Recipes/NeutralCheckboxField'
6
6
  };
7
+ var sx = {
8
+ checkboxColor: {
9
+ color: 'neutral.10'
10
+ }
11
+ };
7
12
  export var Default = function Default() {
8
13
  return ___EmotionJSX(CheckboxField, {
9
- controlProps: {
10
- color: 'neutral.10'
11
- }
14
+ sx: sx.checkboxColor
12
15
  }, "Click me");
13
16
  };
package/lib/recipes/RowLineChart.stories.js CHANGED
@@ -138,6 +138,34 @@ var zeroData = [{
138
138
  id: 12,
139
139
  value: 0
140
140
  }];
141
+ var sx = {
142
+ container: {
143
+ backgroundColor: 'accent.99',
144
+ alignItems: 'center',
145
+ justifyContent: 'space-between',
146
+ pr: '20px'
147
+ },
148
+ button: {
149
+ ml: 'md',
150
+ pr: 'md'
151
+ },
152
+ chartTitleContainer: {
153
+ ml: '20px',
154
+ pr: 'md'
155
+ },
156
+ chartContainer: {
157
+ width: '100%',
158
+ height: '100%'
159
+ },
160
+ chart: {
161
+ width: '50',
162
+ height: '18'
163
+ },
164
+ chartTrendContainer: {
165
+ ml: 'md',
166
+ width: '50px'
167
+ }
168
+ };
141
169
  export var Default = function Default() {
142
170
  var _useResizeObserver = useResizeObserver(),
143
171
  ref = _useResizeObserver.ref,
@@ -161,10 +189,7 @@ export var Default = function Default() {
161
189
 
162
190
  var EmptyData = ___EmotionJSX(Box, {
163
191
  isRow: true,
164
- bg: "accent.99",
165
- alignItems: "center",
166
- justifyContent: "space-between",
167
- pr: 20,
192
+ sx: sx.container,
168
193
  ref: ref
169
194
  }, ___EmotionJSX(Box, {
170
195
  p: "md",
@@ -178,8 +203,7 @@ export var Default = function Default() {
178
203
  alignItems: "center"
179
204
  }, ___EmotionJSX(Box, _extends({
180
205
  variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
181
- ml: 20,
182
- pr: 15
206
+ sx: sx.chartTitleContainer
183
207
  }, hideIfMobile()), ___EmotionJSX(Text, {
184
208
  variant: "expandableRow.lineChart.title"
185
209
  }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
@@ -192,8 +216,7 @@ export var Default = function Default() {
192
216
  }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
193
217
  variant: "expandableRow.chartWrapper",
194
218
  onPress: action('seeContributingDataAction'),
195
- ml: 15,
196
- pr: 15,
219
+ sx: sx.button,
197
220
  "aria-label": "line-chart button"
198
221
  }, hideIfTablet()), ___EmotionJSX(Box, {
199
222
  variant: "boxes.expandableRow.lineChart.divider"
@@ -202,11 +225,9 @@ export var Default = function Default() {
202
225
  }, ___EmotionJSX(Box, {
203
226
  variant: "boxes.expandableRow.lineChart.chart"
204
227
  }, ___EmotionJSX(ResponsiveContainer, {
205
- width: "100%",
206
- height: "100%"
228
+ sx: sx.chartContainer
207
229
  }, ___EmotionJSX(LineChart, {
208
- width: 50,
209
- height: 18,
230
+ sx: sx.chart,
210
231
  data: chartData
211
232
  }, ___EmotionJSX(Line, {
212
233
  type: "monotone",
@@ -217,8 +238,7 @@ export var Default = function Default() {
217
238
  variant: "expandableRow.lineChart.chartLabel"
218
239
  }, "No data yet")), ___EmotionJSX(Box, {
219
240
  size: "sm",
220
- ml: 15,
221
- width: 50
241
+ sx: sx.chartTrendContainer
222
242
  }, ___EmotionJSX(Text, {
223
243
  variant: "expandableRow.lineChart.trend"
224
244
  }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
@@ -229,10 +249,7 @@ export var Default = function Default() {
229
249
 
230
250
  var FullData = ___EmotionJSX(Box, {
231
251
  isRow: true,
232
- bg: "accent.99",
233
- alignItems: "center",
234
- justifyContent: "space-between",
235
- pr: 20,
252
+ sx: sx.container,
236
253
  mt: 20
237
254
  }, ___EmotionJSX(Box, {
238
255
  p: "md",
@@ -246,8 +263,7 @@ export var Default = function Default() {
246
263
  alignItems: "center"
247
264
  }, ___EmotionJSX(Box, _extends({
248
265
  variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
249
- ml: 20,
250
- pr: 15
266
+ sx: sx.chartTitleContainer
251
267
  }, hideIfMobile()), ___EmotionJSX(Text, {
252
268
  variant: "expandableRow.lineChart.title"
253
269
  }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
@@ -260,8 +276,7 @@ export var Default = function Default() {
260
276
  }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
261
277
  variant: "expandableRow.chartWrapper",
262
278
  onPress: action('seeContributingDataAction'),
263
- ml: 15,
264
- pr: 15,
279
+ sx: sx.button,
265
280
  "aria-label": "line-chart button"
266
281
  }, hideIfTablet()), ___EmotionJSX(Box, {
267
282
  variant: "boxes.expandableRow.lineChart.divider"
@@ -271,11 +286,9 @@ export var Default = function Default() {
271
286
  variant: "boxes.expandableRow.lineChart.chart",
272
287
  width: 50
273
288
  }, ___EmotionJSX(ResponsiveContainer, {
274
- width: "100%",
275
- height: "100%"
289
+ sx: sx.chartContainer
276
290
  }, ___EmotionJSX(LineChart, {
277
- width: 50,
278
- height: 18,
291
+ sx: sx.chart,
279
292
  data: chartData
280
293
  }, ___EmotionJSX(Line, {
281
294
  type: "monotone",
@@ -286,8 +299,7 @@ export var Default = function Default() {
286
299
  variant: "expandableRow.lineChart.chartLabel"
287
300
  }, "12 wk trend")), ___EmotionJSX(Box, {
288
301
  size: "sm",
289
- ml: 15,
290
- width: 50
302
+ sx: sx.chartTrendContainer
291
303
  }, ___EmotionJSX(Text, {
292
304
  variant: "expandableRow.lineChart.trend"
293
305
  }, "+ 8.6%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
@@ -298,10 +310,7 @@ export var Default = function Default() {
298
310
 
299
311
  var PartialData = ___EmotionJSX(Box, {
300
312
  isRow: true,
301
- bg: "accent.99",
302
- alignItems: "center",
303
- justifyContent: "space-between",
304
- pr: 20,
313
+ sx: sx.container,
305
314
  mt: 20
306
315
  }, ___EmotionJSX(Box, {
307
316
  p: "md",
@@ -315,8 +324,7 @@ export var Default = function Default() {
315
324
  alignItems: "center"
316
325
  }, ___EmotionJSX(Box, _extends({
317
326
  variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
318
- ml: 20,
319
- pr: 15
327
+ sx: sx.chartTitleContainer
320
328
  }, hideIfMobile()), ___EmotionJSX(Text, {
321
329
  variant: "expandableRow.lineChart.title"
322
330
  }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
@@ -329,8 +337,7 @@ export var Default = function Default() {
329
337
  }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
330
338
  variant: "expandableRow.chartWrapper",
331
339
  onPress: action('seeContributingDataAction'),
332
- ml: 15,
333
- pr: 15,
340
+ sx: sx.button,
334
341
  "aria-label": "line-chart button"
335
342
  }, hideIfTablet()), ___EmotionJSX(Box, {
336
343
  variant: "boxes.expandableRow.lineChart.divider"
@@ -340,11 +347,9 @@ export var Default = function Default() {
340
347
  variant: "boxes.expandableRow.lineChart.chart",
341
348
  width: 50
342
349
  }, ___EmotionJSX(ResponsiveContainer, {
343
- width: "100%",
344
- height: "100%"
350
+ sx: sx.chartContainer
345
351
  }, ___EmotionJSX(LineChart, {
346
- width: 50,
347
- height: 18,
352
+ sx: sx.chart,
348
353
  data: partialDataData
349
354
  }, ___EmotionJSX(Line, {
350
355
  type: "monotone",
@@ -355,8 +360,7 @@ export var Default = function Default() {
355
360
  variant: "expandableRow.lineChart.chartLabel"
356
361
  }, "12 wk trend")), ___EmotionJSX(Box, {
357
362
  size: "sm",
358
- ml: 15,
359
- width: 50
363
+ sx: sx.chartTrendContainer
360
364
  }, ___EmotionJSX(Text, {
361
365
  variant: "expandableRow.lineChart.trend"
362
366
  }, "- 8.6%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
@@ -367,10 +371,7 @@ export var Default = function Default() {
367
371
 
368
372
  var ZeroData = ___EmotionJSX(Box, {
369
373
  isRow: true,
370
- bg: "accent.99",
371
- alignItems: "center",
372
- justifyContent: "space-between",
373
- pr: 20,
374
+ sx: sx.container,
374
375
  mt: 20
375
376
  }, ___EmotionJSX(Box, {
376
377
  p: "md",
@@ -384,8 +385,7 @@ export var Default = function Default() {
384
385
  alignItems: "center"
385
386
  }, ___EmotionJSX(Box, _extends({
386
387
  variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
387
- ml: 20,
388
- pr: 15
388
+ sx: sx.chartTitleContainer
389
389
  }, hideIfMobile()), ___EmotionJSX(Text, {
390
390
  variant: "expandableRow.lineChart.title"
391
391
  }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
@@ -398,8 +398,7 @@ export var Default = function Default() {
398
398
  }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
399
399
  variant: "expandableRow.chartWrapper",
400
400
  onPress: action('seeContributingDataAction'),
401
- ml: 15,
402
- pr: 15,
401
+ sx: sx.button,
403
402
  "aria-label": "line-chart button"
404
403
  }, hideIfTablet()), ___EmotionJSX(Box, {
405
404
  variant: "boxes.expandableRow.lineChart.divider"
@@ -409,11 +408,9 @@ export var Default = function Default() {
409
408
  variant: "boxes.expandableRow.lineChart.chart",
410
409
  width: 50
411
410
  }, ___EmotionJSX(ResponsiveContainer, {
412
- width: "100%",
413
- height: "100%"
411
+ sx: sx.chartContainer
414
412
  }, ___EmotionJSX(LineChart, {
415
- width: 50,
416
- height: 18,
413
+ sx: sx.chart,
417
414
  data: zeroData
418
415
  }, ___EmotionJSX(Line, {
419
416
  type: "monotone",
@@ -424,8 +421,7 @@ export var Default = function Default() {
424
421
  variant: "expandableRow.lineChart.chartLabel"
425
422
  }, "12 wk trend")), ___EmotionJSX(Box, {
426
423
  size: "sm",
427
- ml: 15,
428
- width: 50
424
+ sx: sx.chartTrendContainer
429
425
  }, ___EmotionJSX(Text, {
430
426
  variant: "expandableRow.lineChart.trend"
431
427
  }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
@@ -436,10 +432,7 @@ export var Default = function Default() {
436
432
 
437
433
  var ZeroValues = ___EmotionJSX(Box, {
438
434
  isRow: true,
439
- bg: "accent.99",
440
- alignItems: "center",
441
- justifyContent: "space-between",
442
- pr: 20,
435
+ sx: sx.container,
443
436
  mt: 20
444
437
  }, ___EmotionJSX(Box, {
445
438
  p: "md",
@@ -453,8 +446,7 @@ export var Default = function Default() {
453
446
  alignItems: "center"
454
447
  }, ___EmotionJSX(Box, _extends({
455
448
  variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
456
- ml: 20,
457
- pr: 15
449
+ sx: sx.chartTitleContainer
458
450
  }, hideIfMobile()), ___EmotionJSX(Text, {
459
451
  variant: "expandableRow.lineChart.title"
460
452
  }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
@@ -467,8 +459,7 @@ export var Default = function Default() {
467
459
  }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
468
460
  variant: "expandableRow.chartWrapper",
469
461
  onPress: action('seeContributingDataAction'),
470
- ml: 15,
471
- pr: 15,
462
+ sx: sx.button,
472
463
  "aria-label": "line-chart button"
473
464
  }, hideIfTablet()), ___EmotionJSX(Box, {
474
465
  variant: "boxes.expandableRow.lineChart.divider"
@@ -478,11 +469,9 @@ export var Default = function Default() {
478
469
  variant: "boxes.expandableRow.lineChart.chart",
479
470
  width: 50
480
471
  }, ___EmotionJSX(ResponsiveContainer, {
481
- width: "100%",
482
- height: "100%"
472
+ sx: sx.chartContainer
483
473
  }, ___EmotionJSX(LineChart, {
484
- width: 50,
485
- height: 18,
474
+ sx: sx.chart,
486
475
  data: zeroValuesData
487
476
  }, ___EmotionJSX(Line, {
488
477
  type: "monotone",
@@ -493,8 +482,7 @@ export var Default = function Default() {
493
482
  variant: "expandableRow.lineChart.chartLabel"
494
483
  }, "12 wk trend")), ___EmotionJSX(Box, {
495
484
  size: "sm",
496
- ml: 15,
497
- width: 50
485
+ sx: sx.chartTrendContainer
498
486
  }, ___EmotionJSX(Text, {
499
487
  variant: "expandableRow.lineChart.trend"
500
488
  }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "1.27.0-alpha.6",
3
+ "version": "1.27.0-alpha.8",
4
4
  "description": "PingUX themeable React component library",
5
5
  "author": "ux-development@pingidentity.com",
6
6
  "license": "Apache-2.0",