@pingux/astro 1.27.0 → 1.28.0

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -84,7 +84,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(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 _context9, _context10; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context9 = ownKeys(Object(source), !0)).call(_context9, function (key) { (0, _defineProperty2["default"])(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; }
+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) { (0, _defineProperty2["default"])(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; }
 
 /**
  * Complex control that lets you choose several tags from the dropdown list.
@@ -96,7 +96,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Stately.
  */
 var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _context6;
+  var _context7;
 
   var defaultSelectedKeys = props.defaultSelectedKeys,
       direction = props.direction,
@@ -278,7 +278,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
               setFilterString('');
             }
           } else if (hasCustomValue) {
-            var _context3;
+            var _context3, _context4;
 
             var _key2 = e.target.value;
 
@@ -286,8 +286,8 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
               return;
             }
 
-            selectionManager.toggleSelection(_key2);
-            setCustomItems((0, _concat["default"])(_context3 = []).call(_context3, customItems, [{
+            selectionManager.setSelectedKeys((0, _concat["default"])(_context3 = []).call(_context3, (0, _from["default"])(selectionManager.state.selectedKeys), [_key2]));
+            setCustomItems((0, _concat["default"])(_context4 = []).call(_context4, customItems, [{
               id: _key2,
               key: _key2,
               name: _key2
@@ -341,9 +341,9 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   };
 
   var readOnlyInputEntry = (0, _react2.jsx)(_react["default"].Fragment, null, isReadOnly && (readOnlyKeys.length ? (0, _map["default"])(readOnlyKeys).call(readOnlyKeys, function (key) {
-    var _context4, _context5;
+    var _context5, _context6;
 
-    var item = (0, _find["default"])(_context4 = (0, _concat["default"])(_context5 = []).call(_context5, initialItems, customItems)).call(_context4, function (el) {
+    var item = (0, _find["default"])(_context5 = (0, _concat["default"])(_context6 = []).call(_context6, initialItems, customItems)).call(_context5, function (el) {
       return el.key === key;
     });
 
@@ -377,10 +377,10 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
 
     return null;
   }));
-  var selectedItems = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _map["default"])(_context6 = (0, _from["default"])(selectionManager.selectedKeys)).call(_context6, function (key) {
-    var _context7, _context8;
+  var selectedItems = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _map["default"])(_context7 = (0, _from["default"])(selectionManager.selectedKeys)).call(_context7, function (key) {
+    var _context8, _context9;
 
-    var item = (0, _find["default"])(_context7 = (0, _concat["default"])(_context8 = []).call(_context8, initialItems, customItems)).call(_context7, function (el) {
+    var item = (0, _find["default"])(_context8 = (0, _concat["default"])(_context9 = []).call(_context9, initialItems, customItems)).call(_context8, function (el) {
       return el.key === key;
     });
 

package/lib/cjs/components/PageHeader/PageHeader.js

@@ -38,11 +38,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 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; }
 
+/**
+ * A `Page Header` is a composed component using text and icon button.
+ * The component is separated from the body and appears at the top.
+ * For customization,
+ * please see [Page Header](./?path=/story/recipes-page-header--default) recipe docs.
+ */
 var PageHeader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var title = props.title,
       children = props.children,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  (0, _hooks.useDeprecationWarning)('The Page Header component will be deprecated in Astro-UI 2.0.0.');
+  (0, _hooks.useDeprecationWarning)('The Page Header component will be deprecated in Astro-UI 2.0.0. Use Page Header recipe instead.');
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     isRow: true,
     justifyContent: "space-between",

package/lib/cjs/context/DataTableContext/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.useDataTableContext = exports.DataTableContext = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+var DataTableContext = /*#__PURE__*/_react["default"].createContext(null);
+
+exports.DataTableContext = DataTableContext;
+
+var useDataTableContext = function useDataTableContext() {
+  return (0, _react.useContext)(DataTableContext);
+};
+
+exports.useDataTableContext = useDataTableContext;

package/lib/cjs/index.js

@@ -4,7 +4,7 @@ var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69;
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
@@ -104,7 +104,13 @@ var _exportNames = {
   OverlayProvider: true,
   useOverlayPosition: true,
   useOverlayTrigger: true,
-  useOverlayTriggerState: true
+  useOverlayTriggerState: true,
+  DataTable: true,
+  DataTableCell: true,
+  DataTableColumn: true,
+  DataTableRow: true,
+  DataTableBody: true,
+  DataTableHeader: true
 };
 
 _Object$defineProperty(exports, "AccordionGridGroup", {
@@ -261,6 +267,48 @@ _Object$defineProperty(exports, "CopyText", {
   }
 });
 
+_Object$defineProperty(exports, "DataTable", {
+  enumerable: true,
+  get: function get() {
+    return _DataTable["default"];
+  }
+});
+
+_Object$defineProperty(exports, "DataTableBody", {
+  enumerable: true,
+  get: function get() {
+    return _table.TableBody;
+  }
+});
+
+_Object$defineProperty(exports, "DataTableCell", {
+  enumerable: true,
+  get: function get() {
+    return _table.Cell;
+  }
+});
+
+_Object$defineProperty(exports, "DataTableColumn", {
+  enumerable: true,
+  get: function get() {
+    return _table.Column;
+  }
+});
+
+_Object$defineProperty(exports, "DataTableHeader", {
+  enumerable: true,
+  get: function get() {
+    return _table.TableHeader;
+  }
+});
+
+_Object$defineProperty(exports, "DataTableRow", {
+  enumerable: true,
+  get: function get() {
+    return _table.Row;
+  }
+});
+
 _Object$defineProperty(exports, "EnvironmentBreadcrumb", {
   enumerable: true,
   get: function get() {
@@ -1741,6 +1789,23 @@ var _overlays = require("@react-aria/overlays");
 
 var _overlays2 = require("@react-stately/overlays");
 
+var _DataTable = _interopRequireWildcard(require("./components/DataTable"));
+
+_forEachInstanceProperty(_context69 = _Object$keys(_DataTable)).call(_context69, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DataTable[key]) return;
+
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DataTable[key];
+    }
+  });
+});
+
+var _table = require("@react-spectrum/table");
+
 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; }

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

@@ -50,6 +50,28 @@ var validatePhoneNumber = function validatePhoneNumber(str) {
   return reg.test(str);
 };
 
+var sx = {
+  wrapperBox: {
+    width: '100%',
+    maxWidth: 500,
+    position: 'relative'
+  },
+  comboBoxFieldWrapperOpen: {
+    position: 'absolute',
+    transition: '0.2s width ease',
+    width: '100%'
+  },
+  comboBoxFieldWrapperClose: {
+    position: 'absolute',
+    transition: '0.2s width ease',
+    width: '110px'
+  },
+  inputWrapper: {
+    width: '100%',
+    marginLeft: '110px'
+  }
+};
+
 var Default = function Default() {
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -117,22 +139,14 @@ var Default = function Default() {
 
   return (0, _react2.jsx)(_Box["default"], {
     isRow: true,
-    sx: {
-      width: '100%',
-      maxWidth: 500,
-      position: 'relative'
-    }
+    sx: sx.wrapperBox
   }, (0, _react2.jsx)(_ComboBoxField["default"], {
     mt: -5,
     width: "100%",
     isOpen: isOpen,
     onOpenChange: setIsOpen,
     wrapperProps: {
-      sx: {
-        position: 'absolute',
-        transition: '0.2s width ease',
-        width: isOpen ? '100%' : 110
-      }
+      sx: isOpen ? sx.comboBoxFieldWrapperOpen : sx.comboBoxFieldWrapperClose
     },
     controlProps: {
       'aria-label': 'Country Picker'
@@ -151,8 +165,7 @@ var Default = function Default() {
       key: item[0]
     }, (0, _concat["default"])(_context = (0, _concat["default"])(_context2 = "".concat(item[1].name)).call(_context2, item[1].name !== item[1]["native"] ? " (".concat(item[1]["native"], ")") : '', " +")).call(_context, item[1].phone.split(',')[0]));
   }), (0, _react2.jsx)(_Box["default"], {
-    width: "100%",
-    ml: 110
+    sx: sx.inputWrapper
   }, (0, _react2.jsx)(_Input["default"], {
     placeholder: "Phone number...",
     onChange: onPhoneNumberValueChange,

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

@@ -70,6 +70,48 @@ var inputProps = {
   label: 'Example label',
   ariaLabel: 'Example aria label'
 };
+var sx = {
+  editablePreview: {
+    whiteSpace: 'pre-line',
+    width: '100%',
+    overflowWrap: 'break-word',
+    minHeight: '45px',
+    paddingLeft: 'xs',
+    justifyContent: 'flex-end',
+    paddingBottom: 'xs',
+    borderBottomColor: 'active',
+    color: 'neutral.10',
+    fontSize: 'md',
+    fontWeight: 1,
+    lineHeight: '18px',
+    '&:focus': {
+      outline: 'none',
+      boxShadow: 'focus',
+      borderColor: 'active',
+      borderWidth: '1px',
+      borderStyle: 'solid'
+    }
+  },
+  editableInputWrapper: {
+    marginRight: '30px',
+    flexGrow: 1
+  },
+  editableInpuTextArea: {
+    maxHeight: '150px'
+  },
+  editableControlWrapper: {
+    position: 'absolute',
+    right: '0',
+    top: '27.5%',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  editableControlIconButton: {
+    marginRight: 'md',
+    width: '20px',
+    height: '20px'
+  }
+};
 
 var Default = function Default() {
   return (0, _react2.jsx)(Editable, {
@@ -127,6 +169,13 @@ var EditablePreview = function EditablePreview() {
       hasFocus = _useState4[0],
       setFocus = _useState4[1];
 
+  var editablePreviewDynamicSx = {
+    backgroundColor: hasFocus ? 'accent.95' : 'white',
+    borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
+    '&:hover': {
+      background: editableContext.isEditing ? 'white' : 'accent.95'
+    }
+  };
   (0, _react.useEffect)(function () {
     if (hasFocus && editableContext.isEditing) {
       setFocus(false);
@@ -153,8 +202,8 @@ var EditablePreview = function EditablePreview() {
     "aria-hidden": editableContext.isEditing,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
-    "aria-readonly": "false",
     "aria-label": "Inline editable text field",
+    role: "textbox",
     onFocus: function onFocus() {
       return setFocus(true);
     },
@@ -162,32 +211,7 @@ var EditablePreview = function EditablePreview() {
       return setFocus(false);
     },
     placeholder: "Click or press enter to edit text",
-    sx: {
-      whiteSpace: 'pre-line',
-      backgroundColor: hasFocus ? 'accent.95' : 'white',
-      width: '100%',
-      overflowWrap: 'break-word',
-      minHeight: '45px',
-      paddingLeft: 'xs',
-      justifyContent: 'flex-end',
-      paddingBottom: 'xs',
-      borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
-      borderBottomColor: 'active',
-      color: 'neutral.10',
-      fontSize: 'md',
-      fontWeight: 1,
-      lineHeight: '18px',
-      '&:hover': {
-        background: editableContext.isEditing ? 'white' : 'accent.95'
-      },
-      '&:focus': {
-        outline: 'none',
-        boxShadow: 'focus',
-        borderColor: 'active',
-        borderWidth: '1px',
-        borderStyle: 'solid'
-      }
-    }
+    sx: _objectSpread(_objectSpread({}, editablePreviewDynamicSx), sx.editablePreview)
   }, editableContext.value);
 };
 /**
@@ -256,10 +280,7 @@ var EditableInput = function EditableInput(props) {
   return (0, _react2.jsx)(_index.Box, {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,
-    sx: {
-      marginRight: '30px',
-      flexGrow: 1
-    }
+    sx: sx.editableInputWrapper
   }, (0, _react2.jsx)(_index.TextAreaField, {
     rows: 1,
     ref: editableInput,
@@ -270,9 +291,7 @@ var EditableInput = function EditableInput(props) {
     onKeyDown: handleKeyDown,
     value: editingValue,
     "aria-label": ariaLabel,
-    sx: {
-      maxHeight: '150px'
-    },
+    sx: sx.editableInpuTextArea,
     isUnresizable: true
   }));
 };
@@ -323,22 +342,12 @@ var EditableControl = function EditableControl(props) {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,
     isRow: true,
-    sx: {
-      position: 'absolute',
-      right: '0',
-      top: '27.5%',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    }
+    sx: sx.editableControlWrapper
   }, (0, _react2.jsx)(_index.IconButton, {
     onPress: handleSubmit,
     "aria-label": confirmBtn.ariaLabel,
     variant: confirmBtn.variant,
-    mr: "15px",
-    sx: {
-      width: '20px',
-      height: '20px'
-    }
+    sx: sx.editableControlIconButton
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CheckIcon["default"]
   })), (0, _react2.jsx)(_index.IconButton, {

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

@@ -73,6 +73,40 @@ var _default = {
 };
 exports["default"] = _default;
 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'
+  }
+};
 
 var Default = function Default() {
   var buttonRef = (0, _react.useRef)();
@@ -131,14 +165,9 @@ var Default = function Default() {
 
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Button, {
     ref: buttonRef,
-    mb: "sm",
     variant: "inline",
     onPress: onChange,
-    sx: {
-      height: '30px',
-      borderRadius: '15px',
-      fontSize: '13px'
-    }
+    sx: sx.openButton
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center"
@@ -161,36 +190,15 @@ var Default = function Default() {
     onPress: function onPress() {
       return setIsOpen(false);
     },
-    sx: {
-      position: 'absolute',
-      top: 14,
-      right: 10
-    }
+    sx: sx.closeIconButton
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CloseIcon["default"]
   })), (0, _react2.jsx)(_index.Box, {
-    sx: {
-      p: 'lg',
-      flexDirection: 'initial !important',
-      alignContent: 'space-between',
-      flexWrap: 'wrap'
-    }
+    sx: sx.buttonsContainer
   }, (0, _map["default"])(buttonArray).call(buttonArray, function (item) {
     return (0, _react2.jsx)(_index.Button, {
-      mb: "sm",
       variant: "inline",
-      sx: (0, _includes["default"])(selectedButtons).call(selectedButtons, item) ? {
-        mr: '4px',
-        height: '30px',
-        borderRadius: '15px',
-        fontSize: '13px'
-      } : {
-        mr: '4px',
-        borderColor: 'neutral.80',
-        height: '30px',
-        borderRadius: '15px',
-        fontSize: '13px'
-      },
+      sx: (0, _includes["default"])(selectedButtons).call(selectedButtons, item) ? sx.selectedButton : sx.unSelectedButton,
       key: item,
       onPress: function onPress() {
         return toggleButton(item);