@pingux/astro 1.27.0-alpha.17 → 1.27.0-alpha.18

package/lib/cjs/recipes/RowLineChart.stories.js

@@ -170,34 +170,6 @@ var zeroData = [{
   id: 12,
   value: 0
 }];
-var sx = {
-  container: {
-    backgroundColor: 'accent.99',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    pr: '20px'
-  },
-  button: {
-    ml: 'md',
-    pr: 'md'
-  },
-  chartTitleContainer: {
-    ml: '20px',
-    pr: 'md'
-  },
-  chartContainer: {
-    width: '100%',
-    height: '100%'
-  },
-  chart: {
-    width: '50',
-    height: '18'
-  },
-  chartTrendContainer: {
-    ml: 'md',
-    width: '50px'
-  }
-};
 
 var Default = function Default() {
   var _useResizeObserver = (0, _useResizeObserver2["default"])(),
@@ -221,7 +193,10 @@ var Default = function Default() {
   }, [isMobile]);
   var EmptyData = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    sx: sx.container,
+    bg: "accent.99",
+    alignItems: "center",
+    justifyContent: "space-between",
+    pr: 20,
     ref: ref
   }, (0, _react2.jsx)(_index.Box, {
     p: "md",
@@ -235,7 +210,8 @@ var Default = function Default() {
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    ml: 20,
+    pr: 15
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -248,7 +224,8 @@ var Default = function Default() {
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     variant: "expandableRow.chartWrapper",
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
-    sx: sx.button,
+    ml: 15,
+    pr: 15,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -257,9 +234,11 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.chart"
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
-    sx: sx.chartContainer
+    width: "100%",
+    height: "100%"
   }, (0, _react2.jsx)(_recharts.LineChart, {
-    sx: sx.chart,
+    width: 50,
+    height: 18,
     data: chartData
   }, (0, _react2.jsx)(_recharts.Line, {
     type: "monotone",
@@ -270,7 +249,8 @@ var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "No data yet")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
-    sx: sx.chartTrendContainer
+    ml: 15,
+    width: 50
   }, (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
@@ -280,7 +260,10 @@ var Default = function Default() {
   }))));
   var FullData = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    sx: sx.container,
+    bg: "accent.99",
+    alignItems: "center",
+    justifyContent: "space-between",
+    pr: 20,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
     p: "md",
@@ -294,7 +277,8 @@ var Default = function Default() {
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    ml: 20,
+    pr: 15
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -307,7 +291,8 @@ var Default = function Default() {
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     variant: "expandableRow.chartWrapper",
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
-    sx: sx.button,
+    ml: 15,
+    pr: 15,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -317,9 +302,11 @@ var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
-    sx: sx.chartContainer
+    width: "100%",
+    height: "100%"
   }, (0, _react2.jsx)(_recharts.LineChart, {
-    sx: sx.chart,
+    width: 50,
+    height: 18,
     data: chartData
   }, (0, _react2.jsx)(_recharts.Line, {
     type: "monotone",
@@ -330,7 +317,8 @@ var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
-    sx: sx.chartTrendContainer
+    ml: 15,
+    width: 50
   }, (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 8.6%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
@@ -340,7 +328,10 @@ var Default = function Default() {
   }))));
   var PartialData = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    sx: sx.container,
+    bg: "accent.99",
+    alignItems: "center",
+    justifyContent: "space-between",
+    pr: 20,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
     p: "md",
@@ -354,7 +345,8 @@ var Default = function Default() {
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    ml: 20,
+    pr: 15
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -367,7 +359,8 @@ var Default = function Default() {
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     variant: "expandableRow.chartWrapper",
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
-    sx: sx.button,
+    ml: 15,
+    pr: 15,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -377,9 +370,11 @@ var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
-    sx: sx.chartContainer
+    width: "100%",
+    height: "100%"
   }, (0, _react2.jsx)(_recharts.LineChart, {
-    sx: sx.chart,
+    width: 50,
+    height: 18,
     data: partialDataData
   }, (0, _react2.jsx)(_recharts.Line, {
     type: "monotone",
@@ -390,7 +385,8 @@ var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
-    sx: sx.chartTrendContainer
+    ml: 15,
+    width: 50
   }, (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.trend"
   }, "- 8.6%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
@@ -400,7 +396,10 @@ var Default = function Default() {
   }))));
   var ZeroData = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    sx: sx.container,
+    bg: "accent.99",
+    alignItems: "center",
+    justifyContent: "space-between",
+    pr: 20,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
     p: "md",
@@ -414,7 +413,8 @@ var Default = function Default() {
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    ml: 20,
+    pr: 15
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -427,7 +427,8 @@ var Default = function Default() {
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     variant: "expandableRow.chartWrapper",
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
-    sx: sx.button,
+    ml: 15,
+    pr: 15,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -437,9 +438,11 @@ var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
-    sx: sx.chartContainer
+    width: "100%",
+    height: "100%"
   }, (0, _react2.jsx)(_recharts.LineChart, {
-    sx: sx.chart,
+    width: 50,
+    height: 18,
     data: zeroData
   }, (0, _react2.jsx)(_recharts.Line, {
     type: "monotone",
@@ -450,7 +453,8 @@ var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
-    sx: sx.chartTrendContainer
+    ml: 15,
+    width: 50
   }, (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
@@ -460,7 +464,10 @@ var Default = function Default() {
   }))));
   var ZeroValues = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    sx: sx.container,
+    bg: "accent.99",
+    alignItems: "center",
+    justifyContent: "space-between",
+    pr: 20,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
     p: "md",
@@ -474,7 +481,8 @@ var Default = function Default() {
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    ml: 20,
+    pr: 15
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -487,7 +495,8 @@ var Default = function Default() {
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     variant: "expandableRow.chartWrapper",
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
-    sx: sx.button,
+    ml: 15,
+    pr: 15,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -497,9 +506,11 @@ var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
-    sx: sx.chartContainer
+    width: "100%",
+    height: "100%"
   }, (0, _react2.jsx)(_recharts.LineChart, {
-    sx: sx.chart,
+    width: 50,
+    height: 18,
     data: zeroValuesData
   }, (0, _react2.jsx)(_recharts.Line, {
     type: "monotone",
@@ -510,7 +521,8 @@ var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
-    sx: sx.chartTrendContainer
+    ml: 15,
+    width: 50
   }, (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {

package/lib/cjs/styles/variants/variants.js

@@ -76,8 +76,6 @@ var _tooltip = _interopRequireDefault(require("./tooltip"));
 
 var _collapsiblePanel = _interopRequireDefault(require("./collapsiblePanel"));
 
-var _DataTable = _interopRequireDefault(require("./../../components/DataTable/DataTable.styles"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -109,8 +107,7 @@ var _default = _objectSpread(_objectSpread({
   stepper: _stepper["default"],
   table: _table["default"]
 }, tabs), {}, {
-  tooltip: _tooltip["default"],
-  dataTable: _DataTable["default"]
+  tooltip: _tooltip["default"]
 });
 
 exports["default"] = _default;

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -18,7 +18,7 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 
 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; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context10, _context11; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context10 = ownKeys(Object(source), !0)).call(_context10, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context11 = ownKeys(Object(source))).call(_context11, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context9, _context10; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context9 = ownKeys(Object(source), !0)).call(_context9, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context10 = ownKeys(Object(source))).call(_context10, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
@@ -46,7 +46,7 @@ import FieldHelperText from '../FieldHelperText';
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _context7;
+  var _context6;
 
   var defaultSelectedKeys = props.defaultSelectedKeys,
       direction = props.direction,
@@ -228,7 +228,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
               setFilterString('');
             }
           } else if (hasCustomValue) {
-            var _context3, _context4;
+            var _context3;
 
             var _key2 = e.target.value;
 
@@ -236,8 +236,8 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
               return;
             }
 
-            selectionManager.setSelectedKeys(_concatInstanceProperty(_context3 = []).call(_context3, _Array$from(selectionManager.state.selectedKeys), [_key2]));
-            setCustomItems(_concatInstanceProperty(_context4 = []).call(_context4, customItems, [{
+            selectionManager.toggleSelection(_key2);
+            setCustomItems(_concatInstanceProperty(_context3 = []).call(_context3, customItems, [{
               id: _key2,
               key: _key2,
               name: _key2
@@ -291,9 +291,9 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   var readOnlyInputEntry = ___EmotionJSX(React.Fragment, null, isReadOnly && (readOnlyKeys.length ? _mapInstanceProperty(readOnlyKeys).call(readOnlyKeys, function (key) {
-    var _context5, _context6;
+    var _context4, _context5;
 
-    var item = _findInstanceProperty(_context5 = _concatInstanceProperty(_context6 = []).call(_context6, initialItems, customItems)).call(_context5, function (el) {
+    var item = _findInstanceProperty(_context4 = _concatInstanceProperty(_context5 = []).call(_context5, initialItems, customItems)).call(_context4, function (el) {
       return el.key === key;
     });
 
@@ -329,10 +329,10 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     return null;
   }));
 
-  var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context7 = _Array$from(selectionManager.selectedKeys)).call(_context7, function (key) {
-    var _context8, _context9;
+  var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context6 = _Array$from(selectionManager.selectedKeys)).call(_context6, function (key) {
+    var _context7, _context8;
 
-    var item = _findInstanceProperty(_context8 = _concatInstanceProperty(_context9 = []).call(_context9, initialItems, customItems)).call(_context8, function (el) {
+    var item = _findInstanceProperty(_context7 = _concatInstanceProperty(_context8 = []).call(_context8, initialItems, customItems)).call(_context7, function (el) {
       return el.key === key;
     });
 

package/lib/index.js

@@ -151,7 +151,4 @@ export * from './components/TooltipTrigger';
 
 export { Item, Section } from '@react-stately/collections';
 export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
-export { useOverlayTriggerState } from '@react-stately/overlays';
-export { default as DataTable } from './components/DataTable';
-export * from './components/DataTable';
-export { Cell as DataTableCell, Column as DataTableColumn, Row as DataTableRow, TableBody as DataTableBody, TableHeader as DataTableHeader } from '@react-spectrum/table';
+export { useOverlayTriggerState } from '@react-stately/overlays';

package/lib/recipes/FlippableCaretMenuButton.stories.js

@@ -31,40 +31,6 @@ export default {
   title: 'Recipes/FlippableCaretMenuButton'
 };
 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'];
-var sx = {
-  openButton: {
-    height: '30px',
-    borderRadius: 'md',
-    fontSize: '13px',
-    mb: 'sm'
-  },
-  closeIconButton: {
-    position: 'absolute',
-    top: '14px',
-    right: 'sm'
-  },
-  buttonsContainer: {
-    p: 'lg',
-    flexDirection: 'initial !important',
-    alignContent: 'space-between',
-    flexWrap: 'wrap'
-  },
-  selectedButton: {
-    mb: 'sm',
-    mr: '4px',
-    height: '30px',
-    borderRadius: '15px',
-    fontSize: '13px'
-  },
-  unSelectedButton: {
-    mb: 'sm',
-    mr: '4px',
-    borderColor: 'neutral.80',
-    height: '30px',
-    borderRadius: '15px',
-    fontSize: '13px'
-  }
-};
 export var Default = function Default() {
   var buttonRef = useRef();
   var popoverRef = useRef();
@@ -123,9 +89,14 @@ export var Default = function Default() {
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, {
     ref: buttonRef,
+    mb: "sm",
     variant: "inline",
     onPress: onChange,
-    sx: sx.openButton
+    sx: {
+      height: '30px',
+      borderRadius: '15px',
+      fontSize: '13px'
+    }
   }, ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center"
@@ -148,15 +119,36 @@ export var Default = function Default() {
     onPress: function onPress() {
       return setIsOpen(false);
     },
-    sx: sx.closeIconButton
+    sx: {
+      position: 'absolute',
+      top: 14,
+      right: 10
+    }
   }, ___EmotionJSX(Icon, {
     icon: CloseIcon
   })), ___EmotionJSX(Box, {
-    sx: sx.buttonsContainer
+    sx: {
+      p: 'lg',
+      flexDirection: 'initial !important',
+      alignContent: 'space-between',
+      flexWrap: 'wrap'
+    }
   }, _mapInstanceProperty(buttonArray).call(buttonArray, function (item) {
     return ___EmotionJSX(Button, {
+      mb: "sm",
       variant: "inline",
-      sx: _includesInstanceProperty(selectedButtons).call(selectedButtons, item) ? sx.selectedButton : sx.unSelectedButton,
+      sx: _includesInstanceProperty(selectedButtons).call(selectedButtons, item) ? {
+        mr: '4px',
+        height: '30px',
+        borderRadius: '15px',
+        fontSize: '13px'
+      } : {
+        mr: '4px',
+        borderColor: 'neutral.80',
+        height: '30px',
+        borderRadius: '15px',
+        fontSize: '13px'
+      },
       key: item,
       onPress: function onPress() {
         return toggleButton(item);

package/lib/recipes/MaskedValue.stories.js

@@ -23,13 +23,6 @@ export default {
     }
   }
 };
-var sx = {
-  showHideButton: {
-    width: 'fit-content',
-    marginLeft: 'sm',
-    alignSelf: 'auto'
-  }
-};
 export var Default = function Default(_ref) {
   var _context;
 
@@ -59,7 +52,11 @@ export var Default = function Default(_ref) {
     onPress: function onPress() {
       return setIsMasked(!isMasked);
     },
-    sx: sx.showHideButton
+    sx: {
+      width: 'fit-content',
+      marginLeft: 10,
+      alignSelf: 'auto'
+    }
   }, ___EmotionJSX(Icon, {
     icon: isMasked ? EyeOffIcon : EyeIcon
   }))));

package/lib/recipes/NeutralInput.stories.js

@@ -4,13 +4,10 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/NeutralCheckboxField'
 };
-var sx = {
-  checkboxColor: {
-    color: 'neutral.10'
-  }
-};
 export var Default = function Default() {
   return ___EmotionJSX(CheckboxField, {
-    sx: sx.checkboxColor
+    controlProps: {
+      color: 'neutral.10'
+    }
   }, "Click me");
 };