@pingux/astro 1.27.0-alpha.12 → 1.27.0-alpha.13

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