@pingux/astro 2.143.0-alpha.0 → 2.143.0-alpha.2

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
 var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
@@ -8,18 +9,20 @@ var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/in
 var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
 var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.badgeDeleteButton = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _Attachment = _interopRequireDefault(require("../../../../components/AIComponents/Attachment/Attachment.styles"));
 var _Skeleton = _interopRequireDefault(require("../../../../components/Skeleton/Skeleton.styles"));
 var _codeView = _interopRequireDefault(require("../codeView/codeView"));
 var _colors = _interopRequireDefault(require("../colors/colors"));
+var _accordion = _interopRequireDefault(require("./accordion"));
 var _avatar = require("./avatar");
-var _button = require("./button");
+var _button = _interopRequireWildcard(require("./button"));
 var _callout = _interopRequireDefault(require("./callout"));
 var _dataTable = require("./dataTable");
 var _footer = require("./footer");
@@ -28,15 +31,19 @@ var _listview = require("./listview");
 var _menu = require("./menu");
 var _messages = require("./messages");
 var _navbar = require("./navbar");
+var _panelHeader = _interopRequireDefault(require("./panelHeader"));
 var _popoverMenu = _interopRequireDefault(require("./popoverMenu"));
 var _prompt = _interopRequireDefault(require("./prompt"));
 var _response = _interopRequireDefault(require("./response"));
+var _stepper = _interopRequireDefault(require("./stepper"));
 var _suggestion = _interopRequireDefault(require("./suggestion"));
 var _suggestions = _interopRequireDefault(require("./suggestions"));
 var _table = require("./table");
 var _tableBase = require("./tableBase");
 var _tabs = require("./tabs");
 var _tooltip = _interopRequireDefault(require("./tooltip"));
+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; }
 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var fieldHelperText = {
@@ -58,6 +65,14 @@ var fieldHelperText = {
     }
   }
 };
+var badgeDeleteButton = _objectSpread(_objectSpread({}, _button["default"].iconButtons.base), {}, {
+  borderRadius: '50%',
+  cursor: 'pointer',
+  height: 14,
+  p: 0,
+  width: 14
+});
+exports.badgeDeleteButton = badgeDeleteButton;
 var modalSize = {
   xs: ['100%', '300px', '300px', '300px', '300px', '300px'],
   sm: ['100%', '500px', '500px', '500px', '500px', '500px'],
@@ -142,6 +157,16 @@ var listBox = {
     '&.is-pressed': {
       color: 'text.primary',
       bg: 'lightblue'
+    },
+    '&.is-condensed': {
+      pl: 'md',
+      bg: 'background.base',
+      '&.is-selected': {
+        bg: 'background.base'
+      },
+      '&.is-focused': {
+        bg: 'background.base'
+      }
     }
   }
 };
@@ -177,7 +202,7 @@ var progressBar = {
 var overlayPanel = {
   container: {
     backgroundColor: 'background.base',
-    border: 'none'
+    borderColor: 'border.hairline'
   },
   aiPanelContainer: {
     backgroundColor: 'background.base',
@@ -217,6 +242,16 @@ var overlayPanel = {
     backgroundColor: 'background.base'
   }
 };
+var buttonBar = {
+  container: {
+    gap: 'sm',
+    backgroundColor: 'background.base'
+  },
+  justifyRightContainer: {
+    gap: 'sm',
+    backgroundColor: 'background.base'
+  }
+};
 var rockerButton = {
   innerContainer: {
     boxShadow: 'none',
@@ -275,7 +310,17 @@ var rockerButton = {
 };
 var loader = {
   withinListView: {
-    color: 'active'
+    color: 'active',
+    py: 'sm'
+  },
+  circleSpinner: {
+    borderColor: 'background.base'
+  }
+};
+var breadcrumb = {
+  link: {
+    fontWeight: 2,
+    fontSize: 'lg'
   }
 };
 var statusIcon = {
@@ -339,41 +384,10 @@ var statusIcon = {
   }
 };
 var _default = {
+  accordion: _accordion["default"],
   attachment: _Attachment["default"],
-  navBar: _navbar.navBar,
-  fieldHelperText: fieldHelperText,
-  message: _messages.message,
-  modal: modal,
-  tab: _tabs.tab,
-  menuTab: _tabs.menuTab,
-  listBox: listBox,
-  separator: separator,
-  menuItem: _menu.menuItem,
   avatar: _avatar.avatar,
-  listViewItem: _listview.listViewItem,
-  progressBar: progressBar,
-  listView: _listview.listView,
-  lisViewItemChart: _listview.lisViewItemChart,
-  dataTable: _dataTable.dataTable,
-  codeView: _codeView["default"],
-  popoverMenu: _popoverMenu["default"],
-  prompt: _prompt["default"],
-  tabs: _tabs.tabs,
-  menu: _menu.menu,
-  iconWrapper: _iconWrapper["default"],
-  overlayPanel: overlayPanel,
-  suggestions: _suggestions["default"],
-  suggestion: _suggestion["default"],
-  response: _response["default"],
-  skeleton: _Skeleton["default"],
-  rockerButton: rockerButton,
-  tooltip: _tooltip["default"],
-  footer: _footer.footer,
-  loader: loader,
-  callout: _callout["default"],
-  table: _table.table,
-  tableBase: _tableBase.tableBase,
-  statusIcon: statusIcon,
+  breadcrumb: breadcrumb,
   box: {
     indeterminateCheckboxIcon: {
       height: '19.25px',
@@ -388,6 +402,42 @@ var _default = {
         boxShadow: "inset 0px 0px 0px 1px ".concat(_colors["default"].focus)
       }
     }
-  }
+  },
+  buttonBar: buttonBar,
+  callout: _callout["default"],
+  codeView: _codeView["default"],
+  dataTable: _dataTable.dataTable,
+  fieldHelperText: fieldHelperText,
+  footer: _footer.footer,
+  iconWrapper: _iconWrapper["default"],
+  listBox: listBox,
+  listView: _listview.listView,
+  listViewItem: _listview.listViewItem,
+  lisViewItemChart: _listview.lisViewItemChart,
+  loader: loader,
+  menu: _menu.menu,
+  menuItem: _menu.menuItem,
+  menuTab: _tabs.menuTab,
+  message: _messages.message,
+  modal: modal,
+  navBar: _navbar.navBar,
+  overlayPanel: overlayPanel,
+  panelHeader: _panelHeader["default"],
+  popoverMenu: _popoverMenu["default"],
+  progressBar: progressBar,
+  prompt: _prompt["default"],
+  response: _response["default"],
+  rockerButton: rockerButton,
+  separator: separator,
+  skeleton: _Skeleton["default"],
+  stepper: _stepper["default"],
+  suggestion: _suggestion["default"],
+  suggestions: _suggestions["default"],
+  statusIcon: statusIcon,
+  tab: _tabs.tab,
+  table: _table.table,
+  tableBase: _tableBase.tableBase,
+  tabs: _tabs.tabs,
+  tooltip: _tooltip["default"]
 };
 exports["default"] = _default;

package/lib/cjs/types/listBox.d.ts

@@ -33,11 +33,13 @@ export interface ListBoxProps extends AriaListBoxOptions<object> {
     variant?: string;
     children?: CollectionChildren<object>;
     isCondensed?: boolean;
+    showSelectedOption?: boolean;
 }
 export interface OptionType {
     item: ListBoxItemType;
     hasVirtualFocus?: boolean;
     isCondensed?: boolean;
+    showSelectedOption?: boolean;
 }
 export interface OptionWithCheckboxType extends StyleProps {
     isSelected?: boolean;

package/lib/cjs/types/loader.d.ts

@@ -1,4 +1,4 @@
-import { IconSize, StyleProps } from './shared';
+import { LoaderSize, StyleProps } from './shared';
 import { BoxProps } from '.';
 export interface LoaderProps extends StyleProps {
     /**
@@ -6,6 +6,9 @@ export interface LoaderProps extends StyleProps {
      * Default color inherits the font color.
     */
     color?: string;
-    size?: IconSize;
+    size?: LoaderSize;
     dotProps?: BoxProps;
+    progress?: number;
+    strokeColor?: string;
+    strokeBaseColor?: string;
 }

package/lib/cjs/types/searchField.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
+import type { CollectionChildren } from '@react-types/shared';
 import { ThemeUICSSObject } from 'theme-ui';
 import { ControlProps } from '../hooks/useField/useField';
 import { StyleProps } from './shared';
 import { HelpHintProps, IconProps, IconTypeExtended, LabelProps } from '.';
-export interface SearchFieldProps extends StyleProps {
+export interface SearchFieldProps<T extends object> extends StyleProps {
     /**
        * @ignore
        * Identifies the currently active element when DOM focus is on a composite widget, textbox,
@@ -169,4 +170,13 @@ export interface SearchFieldProps extends StyleProps {
     labelProps?: LabelProps;
     size?: string;
     sx?: ThemeUICSSObject;
+    mode?: 'default' | 'autocomplete';
+    defaultItems?: Iterable<T>;
+    children?: CollectionChildren<T>;
+}
+export interface SearchItem extends StyleProps {
+    id: string;
+    text?: string;
+    name?: string;
+    [key: string]: unknown;
 }

package/lib/cjs/types/shared/style.d.ts

@@ -19,10 +19,12 @@ export type PlacementAxis = Axis | 'center';
 export type PanelSize = 'small' | 'medium' | 'large' | 'full' | 'custom';
 export type ModalSizeProps = 'extra-small' | 'small' | 'medium' | 'large' | 'full';
 type IconTShirtSize = 'xxs' | 'xs' | 'sm' | 'md';
+type LoaderTShirtSize = 'sm' | 'md' | 'lg';
 type IconSizeRange = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 type NextGenIconTShirtSize = `icon-${IconSizeRange}`;
 type pixelSize = 'em' | 'px' | 'rem';
 export type IconSize = IconTShirtSize | NextGenIconTShirtSize | number | `${number}${pixelSize}`;
+export type LoaderSize = LoaderTShirtSize | number | `${number}${pixelSize}`;
 export type overflowWrap = 'normal' | 'break-word' | 'anywhere' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
 export type wordBreak = 'normal' | 'break-all' | 'keep-all' | 'break-word' | 'initial' | 'inherit';
 export type wordWrap = 'normal' | 'break-word' | 'initial' | 'inherit';

package/lib/components/AccordionGridGroup/AccordionGrid.styles.js

@@ -20,8 +20,7 @@ var header = {
   flexShrink: 0,
   wordBreak: 'inherit',
   whiteSpace: 'nowrap',
-  bg: 'white',
-  color: 'neutral.10',
+  bg: 'background.base',
   flexGrow: 1,
   fontWeight: 700,
   border: '1px solid transparent',

package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js

@@ -16,6 +16,7 @@ import { Item } from 'react-stately';
 import CreateIcon from '@pingux/mdi-react/CreateIcon';
 import MoreVertIcon from '@pingux/mdi-react/MoreVertIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { useGetTheme } from '../../hooks';
 import { AccordionGridGroup, Badge, Box, Icon, IconButton, Link, Separator, Text, TextField } from '../../index';
 import AccordionGridReadme from './AccordionGridGroup.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -184,6 +185,77 @@ var Header = function Header(props) {
     }
   })))));
 };
+var HeaderOnyx = function HeaderOnyx(props) {
+  var item = props.item;
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    sx: {
+      flexGrow: 1
+    }
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    alignSelf: "center",
+    sx: {
+      flexGrow: 1,
+      width: '50%'
+    }
+  }, ___EmotionJSX(Text, {
+    as: "h5",
+    variant: "h5",
+    alignSelf: "center"
+  }, item.name)), ___EmotionJSX(Box, {
+    isRow: true,
+    alignSelf: "center",
+    sx: {
+      flexGrow: 1,
+      width: '50%'
+    }
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    alignSelf: "center",
+    gap: "sm"
+  }, ___EmotionJSX(Badge, {
+    label: "".concat(item.organizations.length, " Organizations"),
+    bg: "twoTone.bg.green",
+    textColor: "twoTone.text.green"
+  }), ___EmotionJSX(Badge, {
+    label: "2 Environment",
+    bg: "twoTone.bg.indigo",
+    textColor: "twoTone.text.indigo"
+  }), ___EmotionJSX(Badge, {
+    label: "2 Population",
+    bg: "twoTone.bg.yellow",
+    textColor: "twoTone.text.yellow"
+  })), ___EmotionJSX(Box, {
+    isRow: true,
+    alignSelf: "center",
+    sx: {
+      ml: 'auto'
+    }
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "create-icon",
+    sx: {
+      mr: '4px'
+    }
+  }, ___EmotionJSX(Icon, {
+    icon: CreateIcon,
+    size: "sm",
+    title: {
+      name: 'Create Icon'
+    }
+  })), ___EmotionJSX(IconButton, {
+    "aria-label": "vertical-lines-icon",
+    sx: {
+      mr: '4px'
+    }
+  }, ___EmotionJSX(Icon, {
+    icon: MoreVertIcon,
+    size: "sm",
+    title: {
+      name: 'Vertical Lines Icon'
+    }
+  })))));
+};
 var Body = function Body(props) {
   var _context;
   var item = props.item;
@@ -196,7 +268,6 @@ var Body = function Body(props) {
     }
   }, ___EmotionJSX(Link, {
     "aria-label": "permissions",
-    variant: "link",
     sx: {
       marginTop: '15px',
       whiteSpace: 'nowrap',
@@ -241,12 +312,15 @@ var Body = function Body(props) {
   })));
 };
 export var Default = function Default() {
+  var _useGetTheme = useGetTheme(),
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   return (
     // See story source for info about the data used
     ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
       sx: {
         fontWeight: 3,
-        fontSize: '13px'
+        fontSize: 'sm'
       }
     }, "Role"), ___EmotionJSX(Separator, {
       sx: {
@@ -259,7 +333,9 @@ export var Default = function Default() {
       return ___EmotionJSX(Item, {
         key: item.key,
         textValue: item.name
-      }, ___EmotionJSX(Header, {
+      }, isOnyx ? ___EmotionJSX(HeaderOnyx, {
+        item: item
+      }) : ___EmotionJSX(Header, {
         item: item
       }), ___EmotionJSX(Body, {
         item: item
@@ -277,12 +353,15 @@ export var Controlled = function Controlled() {
     _useState2 = _slicedToArray(_useState, 2),
     selectedKeys = _useState2[0],
     setSelectedKeys = _useState2[1];
+  var _useGetTheme2 = useGetTheme(),
+    themeState = _useGetTheme2.themeState;
+  var isOnyx = themeState.isOnyx;
   return (
     // See story source for info about the data used
     ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
       sx: {
         fontWeight: 3,
-        fontSize: '13px'
+        fontSize: 'sm'
       }
     }, "Role"), ___EmotionJSX(Separator, {
       sx: {
@@ -296,7 +375,9 @@ export var Controlled = function Controlled() {
       return ___EmotionJSX(Item, {
         key: item.key,
         textValue: item.name
-      }, ___EmotionJSX(Header, {
+      }, isOnyx ? ___EmotionJSX(HeaderOnyx, {
+        item: item
+      }) : ___EmotionJSX(Header, {
         item: item
       }), ___EmotionJSX(Body, {
         item: item

package/lib/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -4,13 +4,11 @@ var _excluded = ["item", "className", "children", "isSelected", "hasCaret", "nav
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
-import MenuDown from '@pingux/mdi-react/MenuDownIcon';
-import MenuUp from '@pingux/mdi-react/MenuUpIcon';
 import { useGridCell } from '@react-aria/grid';
 import { useHover, usePress } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { useAccordionGridContext } from '../../context/AccordionGridContext';
-import { useStatusClasses } from '../../hooks';
+import { useGetTheme, useStatusClasses } from '../../hooks';
 import Box from '../Box';
 import Icon from '../Icon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -28,6 +26,10 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useAccordionGridCont = useAccordionGridContext(),
     state = _useAccordionGridCont.state;
   var cellRef = useRef();
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
+  var MenuDown = icons.MenuDown,
+    MenuUp = icons.MenuUp;
 
   /* istanbul ignore next */
   useImperativeHandle(ref, function () {
@@ -97,8 +99,8 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
       mr: '0px'
     }
   }, ___EmotionJSX(Icon, {
+    color: "text.primary",
     icon: isSelected ? upArrow : downArrow,
-    size: 20,
     title: {
       name: isSelected ? 'Menu Up Icon' : 'Menu Down Icon'
     }

package/lib/components/AccordionGroup/AccordionGroup.js

@@ -20,6 +20,7 @@ import { mergeProps } from 'react-aria';
 import { useTreeState } from 'react-stately';
 import { useAccordion } from '@react-aria/accordion';
 import { AccordionContext } from '../../context/AccordionContext';
+import { useGetTheme } from '../../hooks';
 import { Box } from '../../index';
 import AccordionItem from '../AccordionItem';
 
@@ -31,10 +32,11 @@ import AccordionItem from '../AccordionItem';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var AccordionGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
-  var _props$labelHeadingTa = props.labelHeadingTag,
-    labelHeadingTag = _props$labelHeadingTa === void 0 ? 'span' : _props$labelHeadingTa,
+  var labelHeadingTag = props.labelHeadingTag,
     onExpandedChange = props.onExpandedChange,
     others = _objectWithoutProperties(props, _excluded);
+  var _useGetTheme = useGetTheme(),
+    accordionItemDefaultLabelTag = _useGetTheme.accordionItemDefaultLabelTag;
   var state = useTreeState(props);
   var accordionRef = useRef(null);
 
@@ -68,7 +70,7 @@ var AccordionGroup = /*#__PURE__*/forwardRef(function (props, ref) {
       "data-id": item['data-id'],
       item: item,
       key: item.key,
-      labelHeadingTag: labelHeadingTag
+      labelHeadingTag: labelHeadingTag || accordionItemDefaultLabelTag
     }, item.props.children);
   })));
 });

package/lib/components/AccordionGroup/AccordionGroup.stories.js

@@ -1,5 +1,5 @@
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
@@ -82,9 +82,7 @@ export default {
   }
 };
 export var Default = function Default(args) {
-  return ___EmotionJSX(AccordionGroup, _extends({
-    labelHeadingTag: "h3"
-  }, args), ___EmotionJSX(Item, {
+  return ___EmotionJSX(AccordionGroup, args, ___EmotionJSX(Item, {
     key: "accordionKey",
     textValue: "accordionKey",
     label: "Accordion Label",
@@ -131,8 +129,7 @@ export var Multiple = function Multiple() {
      */
     ___EmotionJSX(AccordionGroup, {
       defaultExpandedKeys: ['t2'],
-      items: itemArray,
-      labelHeadingTag: "h3"
+      items: itemArray
     }, function (item) {
       var _label;
       return ___EmotionJSX(Item, {

package/lib/components/AccordionItem/AccordionItem.js

@@ -4,14 +4,12 @@ var _excluded = ["containerProps", "buttonProps", "regionProps"];
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import React, { useContext, useRef } from 'react';
 import { mergeProps, useButton } from 'react-aria';
-import MenuDown from '@pingux/mdi-react/MenuDownIcon';
-import MenuUp from '@pingux/mdi-react/MenuUpIcon';
 import { useAccordionItem } from '@react-aria/accordion';
 import { useFocusRing } from '@react-aria/focus';
 import { useHover } from '@react-aria/interactions';
 import { Button as ThemeUIButton } from 'theme-ui';
 import { AccordionContext } from '../../context/AccordionContext';
-import { useStatusClasses } from '../../hooks';
+import { useGetTheme, useStatusClasses } from '../../hooks';
 import { Box, Icon, Text } from '../../index';
 import { hoveredState } from '../AccordionGroup/Accordion.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -29,6 +27,11 @@ var AccordionItem = function AccordionItem(props) {
     _item$props$regionPro = _item$props.regionProps,
     regionProps = _item$props$regionPro === void 0 ? {} : _item$props$regionPro,
     others = _objectWithoutProperties(_item$props, _excluded);
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons,
+    accordionItemMarginLeft = _useGetTheme.accordionItemMarginLeft;
+  var MenuUp = icons.MenuUp,
+    MenuDown = icons.MenuDown;
   var state = useContext(AccordionContext);
   var buttonRef = useRef(null);
   var _useAccordionItem = useAccordionItem(props, state, buttonRef),
@@ -87,8 +90,9 @@ var AccordionItem = function AccordionItem(props) {
     sx: hoveredState
   }, item.props.label), ___EmotionJSX(Box, {
     as: "span",
-    ml: "5px"
+    ml: accordionItemMarginLeft
   }, ___EmotionJSX(Icon, {
+    color: "text.primary",
     icon: isOpen ? MenuUp : MenuDown,
     title: {
       name: isOpen ? 'Menu Up Icon' : 'Menu Down Icon'