@pingux/astro 1.27.0-alpha.14 → 1.27.0-alpha.16

package/lib/components/DataTable/DataTableChip.js

@@ -0,0 +1,33 @@
+/* eslint-disable no-nested-ternary */
+import React, { forwardRef } from 'react';
+import AlertIcon from 'mdi-react/AlertIcon';
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
+import CheckIcon from 'mdi-react/CheckIcon';
+import PropTypes from 'prop-types';
+import { Chip, Icon } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var DataTableChip = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var cell = _ref.cell;
+  var color = cell === 'Pending' ? 'line.light' : cell === 'Failed' ? 'warning.bright' : cell === 'Rejected' ? 'critical.bright' : 'success.dark';
+  return ___EmotionJSX(Chip, {
+    label: cell,
+    bg: "white",
+    ref: ref,
+    textColor: cell === 'Pending' || cell === 'Failed' ? 'text.primary' : color,
+    sx: {
+      border: '1px',
+      borderStyle: 'solid',
+      borderColor: color,
+      flexDirection: 'row-reverse !important'
+    }
+  }, cell !== 'Pending' && ___EmotionJSX(Icon, {
+    icon: cell === 'Approved' ? CheckIcon : cell === 'Rejected' ? AlertCircleIcon : cell === 'Failed' ? AlertIcon : null,
+    mr: "xs",
+    size: "14px",
+    color: color
+  }));
+});
+DataTableChip.propTypes = {
+  cell: PropTypes.string
+};
+export default DataTableChip;

package/lib/components/DataTable/DataTableChip.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DataTableChip } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(DataTableChip, props));
+};
+
+test('renders component with rejected label', function () {
+  var cell = 'Rejected';
+  getComponent({
+    cell: cell
+  });
+  expect(screen.queryByText('Rejected')).toBeInTheDocument();
+});
+test('renders component with pending label', function () {
+  var cell = 'Pending';
+  getComponent({
+    cell: cell
+  });
+  expect(screen.queryByText('Pending')).toBeInTheDocument();
+});
+test('renders component with failed label', function () {
+  var cell = 'Failed';
+  getComponent({
+    cell: cell
+  });
+  expect(screen.queryByText('Failed')).toBeInTheDocument();
+});

package/lib/components/DataTable/DataTableMenu.js

@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react';
+import DotsVerticalIcon from 'mdi-react/DotsVerticalIcon';
+import { Box, Icon, IconButton, Item, Menu, OverlayProvider, PopoverMenu, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var DataTableMenu = /*#__PURE__*/forwardRef(function (props, ref) {
+  return ___EmotionJSX(Box, {
+    ref: ref,
+    variant: "dataTable.tableMenu"
+  }, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(IconButton, {
+    "aria-label": "row menu"
+  }, ___EmotionJSX(Icon, {
+    icon: DotsVerticalIcon
+  })), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
+    key: "edit"
+  }, "Edit"), ___EmotionJSX(Item, {
+    key: "duplicate"
+  }, "Duplicate"), ___EmotionJSX(Item, {
+    key: "delete",
+    textValue: "delete"
+  }, ___EmotionJSX(Text, {
+    color: "critical.bright"
+  }, "Delete"))))));
+});
+export default DataTableMenu;

package/lib/components/DataTable/DataTableMenu.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DataTableMenu } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var getComponent = function getComponent() {
+  return render(___EmotionJSX(DataTableMenu, null));
+};
+
+test('renders component with menu', function () {
+  getComponent();
+  expect(screen.getByLabelText('row menu')).toBeInTheDocument();
+});

package/lib/components/DataTable/DataTableMultiLine.js

@@ -0,0 +1,46 @@
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { Box, Icon } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var DataTableMultiLine = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var cell = _ref.cell;
+  return ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(cell).call(cell, function (item) {
+    var _context;
+
+    return ___EmotionJSX(Box, {
+      key: _concatInstanceProperty(_context = "".concat(cell.key, "_")).call(_context, item.accountId),
+      ref: ref
+    }, ___EmotionJSX(Box, {
+      sx: {
+        flexDirection: 'row !important'
+      }
+    }, ___EmotionJSX(Box, {
+      sx: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        mx: '18px'
+      }
+    }, ___EmotionJSX(Icon, {
+      icon: item.icon,
+      color: "accent.40",
+      size: "18.75"
+    })), ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+      sx: {
+        fontWeight: 500,
+        fontSize: '15px'
+      }
+    }, item.name), ___EmotionJSX(Box, {
+      sx: {
+        color: 'neutral.40',
+        fontWeight: 400,
+        fontSize: '13px'
+      }
+    }, "Account ID: ", item.accountId))));
+  }));
+});
+DataTableMultiLine.propTypes = {
+  cell: PropTypes.arrayOf(PropTypes.shape({}))
+};
+export default DataTableMultiLine;

package/lib/components/DataTable/DataTableMultiLine.test.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ApplicationIcon from 'mdi-react/ApplicationIcon';
+import { DataTableMultiLine } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(DataTableMultiLine, props));
+};
+
+test('renders component with account name', function () {
+  var cell = [{
+    name: 'Acme',
+    icon: ApplicationIcon,
+    accountId: 123
+  }];
+  getComponent({
+    cell: cell
+  });
+  expect(screen.queryByText('Acme')).toBeInTheDocument();
+});

package/lib/components/DataTable/DataTableVirtualizer.js

@@ -0,0 +1,157 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["layout", "collection", "focusedKey", "renderView", "renderWrapper", "domRef", "bodyRef", "setTableWidth", "getColumnWidth", "onVisibleRectChange"];
+import PropTypes from 'prop-types';
+import React, { forwardRef, useCallback, useRef } from 'react';
+import { chain, mergeProps, useLayoutEffect } from '@react-aria/utils';
+import { ScrollView, setScrollLeft, useVirtualizer } from '@react-aria/virtualizer';
+import { useVirtualizerState } from '@react-stately/virtualizer';
+import { Box } from '../../index';
+/**
+ * Custom Virtualizer using react aria Spectrum TableView/TableVirtualizer
+ * Primarily utilizes [TableView](https://react-spectrum.adobe.com/react-spectrum/TableView.html)
+*/
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var DataTableVirtualizer = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _layout$getLayoutInfo;
+
+  var layout = _ref.layout,
+      collection = _ref.collection,
+      focusedKey = _ref.focusedKey,
+      renderView = _ref.renderView,
+      renderWrapper = _ref.renderWrapper,
+      domRef = _ref.domRef,
+      bodyRef = _ref.bodyRef,
+      setTableWidth = _ref.setTableWidth,
+      getColumnWidth = _ref.getColumnWidth,
+      onVisibleRectChangeProp = _ref.onVisibleRectChange,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
+  var direction = 'ltr'; // useLocale override
+
+  var headerRef = useRef(ref);
+  var loadingState = collection.body.props.loadingState;
+  var isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
+  var onLoadMore = collection.body.props.onLoadMore;
+  var state = useVirtualizerState({
+    layout: layout,
+    collection: collection,
+    renderView: renderView,
+    renderWrapper: renderWrapper,
+    onVisibleRectChange: function onVisibleRectChange(rect) {
+      // eslint-disable-next-line no-param-reassign
+      bodyRef.current.scrollTop = rect.y;
+      setScrollLeft(bodyRef.current, direction, rect.x);
+    },
+    transitionDuration: isLoading ? 160 : 220
+  });
+
+  var _useVirtualizer = useVirtualizer({
+    focusedKey: focusedKey,
+    scrollToItem: function scrollToItem(key) {
+      var item = collection.getItem(key);
+      state.virtualizer.scrollToItem(key, {
+        duration: 0,
+        // Prevent scrolling to the top when clicking on column headers.
+        shouldScrollY: (item === null || item === void 0 ? void 0 : item.type) !== 'column',
+        // Offset scroll position by width of selection cell
+        // (which is sticky and will overlap the cell we're scrolling to).
+        offsetX: 0
+      });
+    }
+  }, state, domRef),
+      virtualizerProps = _useVirtualizer.virtualizerProps; // If column widths change, need to relay out.
+
+
+  useLayoutEffect(function () {
+    state.virtualizer.relayoutNow({
+      sizeChanged: true
+    });
+  }, [state.virtualizer]);
+  var headerHeight = ((_layout$getLayoutInfo = layout.getLayoutInfo('header')) === null || _layout$getLayoutInfo === void 0 ? void 0 : _layout$getLayoutInfo.rect.height) || 0;
+  var visibleRect = state.virtualizer.visibleRect; // Sync the scroll position from the table body to the header container.
+
+  var onScroll = useCallback(function () {
+    headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
+  }, [bodyRef]);
+  var onVisibleRectChange = useCallback(function (rect) {
+    setTableWidth(rect.width);
+    state.setVisibleRect(rect);
+
+    if (!isLoading && onLoadMore) {
+      var scrollOffset = state.virtualizer.contentSize.height - rect.height * 2;
+
+      if (rect.y > scrollOffset) {
+        onLoadMore();
+      }
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [onLoadMore, isLoading, state.setVisibleRect, state.virtualizer]);
+  useLayoutEffect(function () {
+    if (!isLoading && onLoadMore && !state.isAnimating) {
+      if (state.contentSize.height <= state.virtualizer.visibleRect.height) {
+        onLoadMore();
+      }
+    }
+  }, [state.contentSize, state.virtualizer, state.isAnimating, onLoadMore, isLoading]);
+  return ___EmotionJSX(Box, _extends({}, mergeProps(otherProps, virtualizerProps), {
+    ref: domRef
+  }), ___EmotionJSX(Box, {
+    role: "presentation",
+    variant: "dataTable.tableHeadWrapper",
+    style: {
+      width: visibleRect.width,
+      height: headerHeight,
+      overflow: 'hidden',
+      position: 'relative',
+      willChange: state.isScrolling ? 'scroll-position' : '',
+      transition: state.isAnimating ? "none ".concat(state.virtualizer.transitionDuration, "ms") : undefined
+    },
+    ref: headerRef
+  }, state.visibleViews[0]), ___EmotionJSX(ScrollView, {
+    role: "presentation",
+    variant: "dataTable.tableBody",
+    style: {
+      flex: 1
+    },
+    innerStyle: {
+      overflow: 'visible',
+      transition: state.isAnimating ? "none ".concat(state.virtualizer.transitionDuration, "ms") : undefined
+    },
+    ref: bodyRef,
+    contentSize: state.contentSize,
+    onVisibleRectChange: chain(onVisibleRectChange, onVisibleRectChangeProp),
+    onScrollStart: state.startScrolling,
+    onScrollEnd: state.endScrolling,
+    onScroll: onScroll
+  }, state.visibleViews[1]));
+});
+DataTableVirtualizer.propTypes = {
+  bodyRef: PropTypes.shape({
+    current: PropTypes.shape({
+      scrollLeft: PropTypes.number,
+      scrollTop: PropTypes.number
+    })
+  }),
+  collection: PropTypes.shape({
+    body: PropTypes.shape({
+      props: PropTypes.shape({
+        loadingState: PropTypes.string,
+        onLoadMore: PropTypes.func
+      })
+    }),
+    getItem: PropTypes.func
+  }),
+  domRef: PropTypes.shape({}),
+  focusedKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  getColumnWidth: PropTypes.func,
+  layout: PropTypes.shape({
+    getLayoutInfo: PropTypes.func
+  }),
+  onVisibleRectChange: PropTypes.func,
+  renderView: PropTypes.func,
+  renderWrapper: PropTypes.func,
+  setTableWidth: PropTypes.func
+};
+export default DataTableVirtualizer;

package/lib/components/DataTable/index.js

@@ -0,0 +1,5 @@
+export { default } from './DataTable';
+export { default as DataTableChip } from './DataTableChip';
+export { default as DataTableMultiLine } from './DataTableMultiLine';
+export { default as DataTableVirtualize } from './DataTableVirtualizer';
+export { default as DataTableMenu } from './DataTableMenu';

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -12,7 +12,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem"];
+var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem", "popoverProps"];
 
 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; }
 
@@ -25,6 +25,7 @@ import HomeIcon from 'mdi-react/HomeIcon';
 import PropTypes from 'prop-types';
 import { useOverlayTriggerState } from '@react-stately/overlays';
 import { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
+import { mergeProps } from '@react-aria/utils';
 import ArrowDropUpIcon from 'mdi-react/ArrowDropUpIcon';
 import ArrowDropDownIcon from 'mdi-react/ArrowDropDownIcon';
 import { FocusScope } from '@react-aria/focus';
@@ -51,6 +52,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
       name = props.name,
       searchProps = props.searchProps,
       selectedItem = props.selectedItem,
+      popoverProps = props.popoverProps,
       others = _objectWithoutProperties(props, _excluded);
 
   var _useState = useState(''),
@@ -215,7 +217,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     "aria-label": "".concat((typeof selectedItem === 'string' ? selectedItem : selectedValue) || 'Selected Item')
   }), selectedItem, ___EmotionJSX(Icon, {
     icon: popoverState.isOpen ? ArrowDropUpIcon : ArrowDropDownIcon
-  })), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, {
+  })), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, mergeProps(overlayProps, positionProps, popoverProps), {
     ref: overlayRef,
     isOpen: popoverState.isOpen,
     scrollRef: scrollBoxRef,
@@ -303,6 +305,9 @@ EnvironmentBreadcrumb.propTypes = {
   /** Callback function that fires when the dropdown is closed. */
   onPopoverClose: PropTypes.func,
 
+  /** Props object that is spread directly into the popover container component. */
+  popoverProps: PropTypes.shape({}),
+
   /** Props object that is spread directly into the SearchField element. */
   searchProps: PropTypes.shape({}),
 

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js

@@ -1,6 +1,20 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+
+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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { Section } from '@react-stately/collections';
@@ -38,6 +52,10 @@ var defaultProps = {
   },
   items: items
 };
+var popoverProps = {
+  maxWidth: '100px',
+  'data-testid': 'popover-container'
+};
 var defaultWithSectionsProps = {
   'data-testid': testEnvBreadcrumb,
   name: testName,
@@ -115,6 +133,13 @@ test('should display name', function () {
   getComponent();
   expect(screen.getByText(testName)).toBeInTheDocument();
 });
+test('should spread props into popover container', function () {
+  getComponent(_objectSpread(_objectSpread({}, popoverProps), {}, {
+    isDefaultOpen: true
+  }));
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(screen.queryByTestId('popover-container')).toHaveStyle('max-width: 100px');
+});
 test('should display selectedItem', function () {
   getComponent();
   expect(screen.getByText(testSelectedItem)).toBeInTheDocument();

package/lib/components/PageHeader/PageHeader.js

@@ -6,13 +6,20 @@ import PropTypes from 'prop-types';
 import Text from '../Text/Text';
 import Box from '../Box/Box';
 import { useDeprecationWarning } from '../../hooks';
+/**
+ * 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.
+ */
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var PageHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   var title = props.title,
       children = props.children,
       others = _objectWithoutProperties(props, _excluded);
 
-  useDeprecationWarning('The Page Header component will be deprecated in Astro-UI 2.0.0.');
+  useDeprecationWarning('The Page Header component will be deprecated in Astro-UI 2.0.0. Use Page Header recipe instead.');
   return ___EmotionJSX(Box, _extends({
     isRow: true,
     justifyContent: "space-between",

package/lib/context/DataTableContext/index.js

@@ -0,0 +1,5 @@
+import React, { useContext } from 'react';
+export var DataTableContext = /*#__PURE__*/React.createContext(null);
+export var useDataTableContext = function useDataTableContext() {
+  return useContext(DataTableContext);
+};

package/lib/index.js

@@ -151,4 +151,7 @@ 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 { 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';

package/lib/recipes/FlippableCaretMenuButton.stories.js

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