@pingux/astro 1.42.0-alpha.0 → 2.0.0-alpha.1

package/lib/components/Button/Buttons.styles.js

@@ -0,0 +1,246 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+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) { _defineProperty(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; }
+
+import { text as textVariants } from '../Text/Text.styles';
+export var base = _objectSpread({
+  cursor: 'pointer',
+  height: 36,
+  lineHeight: '30px',
+  minWidth: 'min-content',
+  px: 'md',
+  outline: 'none',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '2px',
+  flexShrink: 0,
+  wordBreak: 'inherit',
+  whiteSpace: 'nowrap'
+}, textVariants.buttonLabel);
+var defaultActive = {
+  bg: 'active',
+  border: '1px solid',
+  borderColor: 'active',
+  color: 'white',
+  'path': {
+    fill: 'white'
+  }
+};
+var defaultHover = {
+  bg: 'accent.99',
+  border: '1px solid',
+  borderColor: 'accent.40',
+  color: 'accent.40',
+  boxShadow: 'standard'
+};
+export var defaultFocus = {
+  outline: '1px solid',
+  outlineColor: 'focus',
+  outlineOffset: '2px'
+};
+export var focusWithCroppedOutline = {
+  boxShadow: 'none',
+  outline: '1px solid',
+  outlineColor: 'focus',
+  outlineOffset: '1px'
+};
+
+var primary = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'active',
+  border: '1px solid',
+  borderColor: 'active',
+  color: 'white',
+  '&.is-hovered': {
+    bg: 'accent.40',
+    border: '1px solid',
+    borderColor: 'accent.40',
+    color: 'white',
+    boxShadow: 'standard'
+  },
+  '&.is-pressed': {
+    bg: 'accent.20',
+    border: '1px solid',
+    borderColor: 'accent.20',
+    color: 'white'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var success = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'success.bright',
+  border: '1px solid',
+  borderColor: 'success.bright',
+  color: 'white',
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var critical = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'critical.bright',
+  border: '1px solid',
+  borderColor: 'critical.bright',
+  color: 'white',
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var inline = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'white',
+  height: '22px',
+  lineHeight: 1,
+  fontSize: 'sm',
+  borderRadius: '15px',
+  border: '1px solid',
+  borderColor: 'active',
+  alignSelf: 'center',
+  paddingTop: '0px',
+  paddingBottom: '0px',
+  '&.is-hovered': _objectSpread({}, defaultHover),
+  '&.is-pressed': _objectSpread({}, defaultActive),
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var inlinePrimary = _objectSpread(_objectSpread(_objectSpread({}, inline), defaultActive), {}, {
+  '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
+    backgroundColor: 'accent.40',
+    color: 'white'
+  }),
+  '&.is-pressed': _objectSpread(_objectSpread({}, defaultActive), {}, {
+    backgroundColor: 'accent.20',
+    border: '1px solid',
+    borderColor: 'accent.20'
+  })
+});
+
+export var text = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'transparent',
+  border: '1px solid',
+  borderColor: 'transparent',
+  color: 'active',
+  height: 'auto',
+  padding: '0',
+  lineHeight: 'unset',
+  '&.is-hovered': {
+    textDecoration: 'underline'
+  },
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
+});
+export var quiet = {
+  all: 'unset',
+  display: 'flex'
+};
+export var link = _objectSpread(_objectSpread({}, text), {}, {
+  lineHeight: 'unset',
+  textDecoration: 'none',
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: 'max-content',
+  '&.is-current': {
+    cursor: 'default',
+    color: 'text.primary'
+  },
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
+});
+
+var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
+  bg: 'white',
+  border: '1px solid',
+  borderColor: 'active',
+  '&.is-hovered': _objectSpread({}, defaultHover),
+  '&.is-pressed': _objectSpread({}, defaultActive),
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var filter = _objectSpread(_objectSpread({}, defaultVariant), {}, {
+  px: 'sm',
+  borderColor: 'neutral.80',
+  height: 40,
+  color: 'active',
+  display: 'flex'
+});
+
+var colorBlock = {
+  bg: 'neutral.95',
+  border: '1px solid',
+  borderColor: 'neutral.90',
+  borderRadius: 10,
+  outline: 'none',
+  cursor: 'pointer',
+  width: 150,
+  minHeight: 40,
+  p: '5px 15px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  '&.is-hovered': {
+    bg: 'neutral.80'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-pressed': {
+    bg: 'neutral.60',
+    borderColor: 'neutral.60'
+  },
+  '& span': {
+    color: 'text.primary',
+    textAlign: 'left'
+  },
+  '&>div': {
+    alignItems: 'baseline'
+  },
+  '&>svg': {
+    color: 'text.secondary',
+    fill: 'text.secondary'
+  },
+  '&.is-configured': {
+    bg: 'active',
+    borderColor: 'active',
+    '& span': {
+      color: 'white'
+    },
+    '&>svg': {
+      color: 'white',
+      fill: 'white'
+    }
+  },
+  '&.is-configured.is-hovered': {
+    bg: 'accent.40',
+    borderColor: 'accent.40'
+  },
+  '&.is-configured.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20'
+  }
+};
+export default {
+  critical: critical,
+  "default": _objectSpread(_objectSpread({}, base), {}, {
+    bg: 'white',
+    border: '1px solid',
+    borderColor: 'active',
+    '&.is-hovered': _objectSpread({}, defaultHover),
+    '&.is-pressed': _objectSpread({}, defaultActive),
+    '&.is-focused': _objectSpread({}, defaultFocus)
+  }),
+  filter: filter,
+  inline: inline,
+  inlinePrimary: inlinePrimary,
+  link: link,
+  primary: primary,
+  quiet: quiet,
+  success: success,
+  colorBlock: colorBlock
+};

package/lib/components/Card/Card.styles.js

@@ -0,0 +1,13 @@
+var container = {
+  display: 'flex',
+  boxShadow: '0px 1px 14px rgba(37, 55, 70, 0.15)',
+  borderRadius: '3px',
+  color: 'text.primary',
+  fontSize: 'md',
+  fontWeight: 0,
+  flex: '1 1 0',
+  p: 'lg'
+};
+export default {
+  container: container
+};

package/lib/components/CheckboxField/CheckboxField.js

@@ -14,14 +14,15 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 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) { _defineProperty(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; }
 
-import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
-import { useCheckbox } from '@react-aria/checkbox';
-import { useToggleState } from '@react-stately/toggle';
+import React, { forwardRef, useRef, useImperativeHandle, useMemo, useEffect } from 'react';
+import { useCheckbox } from 'react-aria';
+import { useToggleState } from 'react-stately';
 import { usePress } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, Checkbox, FieldHelperText, Label } from '../../';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { useField, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
 /**
@@ -77,16 +78,18 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
     controlProps: _objectSpread(_objectSpread({}, controlProps), inputProps)
   })),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
+      fieldControlInputProps = _useField.fieldControlInputProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
-  var helperTextId = uuid();
+  var helperTextId = useMemo(function () {
+    return uuid();
+  }, []);
   return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, _extends({
     variant: "forms.label.checkbox"
   }, fieldLabelProps), ___EmotionJSX(Checkbox, _extends({
     ref: checkboxRef,
     "aria-describedby": helperText && helperTextId
-  }, fieldControlProps)), label), helperText && ___EmotionJSX(FieldHelperText, {
+  }, fieldControlInputProps)), label), helperText && ___EmotionJSX(FieldHelperText, {
     status: status,
     sx: {
       pt: 7
@@ -94,7 +97,7 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
     id: helperTextId
   }, helperText));
 });
-CheckboxField.propTypes = _objectSpread({
+CheckboxField.propTypes = _objectSpread(_objectSpread({
   /** Whether the element should receive focus on render. */
   hasAutoFocus: PropTypes.bool,
 
@@ -156,16 +159,7 @@ CheckboxField.propTypes = _objectSpread({
   onKeyDown: PropTypes.func,
 
   /** Handler that is called when a key is released. */
-  onKeyUp: PropTypes.func,
-
-  /** Props object that is spread directly into the root (top-level) element. */
-  containerProps: PropTypes.shape({}),
-
-  /** Props object that is spread directly into the input element. */
-  controlProps: PropTypes.shape({}),
-
-  /** Props object that is spread directly into the label element. */
-  labelProps: PropTypes.shape({})
-}, ariaAttributesBasePropTypes);
+  onKeyUp: PropTypes.func
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 CheckboxField.displayName = 'CheckboxField';
 export default CheckboxField;

package/lib/components/CheckboxField/CheckboxField.stories.js

@@ -18,6 +18,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { useEffect, useState } from 'react';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import CheckboxField from './CheckboxField';
 import Link from '../Link';
 import Text from '../Text';
@@ -34,7 +35,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -71,23 +72,8 @@ export default {
     hasAutoFocus: {},
     isIndeterminate: {},
     isDefaultSelected: {},
-    isSelected: {},
-    containerProps: {
-      control: {
-        type: 'none'
-      }
-    },
-    controlProps: {
-      control: {
-        type: 'none'
-      }
-    },
-    labelProps: {
-      control: {
-        type: 'none'
-      }
-    }
-  }, ariaAttributeBaseArgTypes)
+    isSelected: {}
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(CheckboxField, args);

package/lib/components/CodeView/CodeView.js

@@ -25,7 +25,7 @@ import { mergeProps } from '@react-aria/utils';
 import Highlight, { defaultProps, Prism } from 'prism-react-renderer';
 import { useStatusClasses } from '../../hooks';
 import { Box, CopyText } from '../..';
-import codeView from '../../styles/variants/codeView';
+import styles from './CodeView.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
@@ -58,7 +58,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   var content = ___EmotionJSX(Highlight, _extends({}, defaultProps, {
-    theme: codeView.theme,
+    theme: styles.theme,
     code: (children === null || children === void 0 ? void 0 : _trimInstanceProperty(children).call(children)) || '',
     language: language,
     Prism: customPrism || Prism

package/lib/components/CodeView/CodeView.stories.js

@@ -74,7 +74,7 @@ export var WithCustomSize = function WithCustomSize() {
       height: 300
     },
     hasNoCopyButton: true
-  }, "\nexport const ChipWithIcon = () => (\n  <>\n    <Chip label=\"Chip with Icon Button\" bg=\"navy\">\n      <IconButton aria-label=\"Clear Chip with Icon Button\" variant=\"inverted\">\n        <Icon icon={Clear} ml=\"xs\" size=\"14px\" />\n      </IconButton>\n    </Chip>\n\n    <div style={{ padding: '5px' }} />\n\n    <Chip label=\"Chip with Icon Button\">\n      <IconButton aria-label=\"Clear Chip with Icon Button\" variant=\"inverted\">\n        <Icon icon={Earth} ml=\"xs\" size=\"14px\" />\n      </IconButton>\n    </Chip>\n\n    <div style={{ padding: '5px' }} />\n\n    <Chip label=\"Chip with Icon\" bg=\"green\">\n      <Icon icon={ContentCopy} ml=\"xs\" size=\"14px\" color=\"white\" />\n    </Chip>\n  </>\n);\n    "));
+  }, "\nexport const BadgeWithIcon = () => (\n  <>\n    <Badge label=\"Badge with Icon Button\" bg=\"navy\">\n      <IconButton aria-label=\"Clear Badge with Icon Button\" variant=\"inverted\">\n        <Icon icon={Clear} ml=\"xs\" size=\"14px\" />\n      </IconButton>\n    </Badge>\n\n    <div style={{ padding: '5px' }} />\n\n    <Badge label=\"Badge with Icon Button\">\n      <IconButton aria-label=\"Clear Badge with Icon Button\" variant=\"inverted\">\n        <Icon icon={Earth} ml=\"xs\" size=\"14px\" />\n      </IconButton>\n    </Badge>\n\n    <div style={{ padding: '5px' }} />\n\n    <Badge label=\"Badge with Icon\" bg=\"green\">\n      <Icon icon={ContentCopy} ml=\"xs\" size=\"14px\" color=\"white\" />\n    </Badge>\n  </>\n);\n    "));
 };
 export var WithAdditionalLanguage = function WithAdditionalLanguage() {
   var _context;

package/lib/components/CollapsiblePanel/CollapsiblePanel.js

@@ -3,8 +3,7 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["selectedFilterCount", "className", "closeAriaLabel", "children", "isDefaultOpen", "isOpen", "items", "listTitle", "onOpenChange", "onSelectionChange", "openAriaLabel"];
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { useFocusRing } from '@react-aria/focus';
-import { mergeProps } from '@react-aria/utils';
+import { mergeProps, useFocusRing } from 'react-aria';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import { useStatusClasses } from '../../hooks';
 import CollapsiblePanelBadge from '../CollapsiblePanelContainer/CollapsiblePanelBadge';
@@ -52,12 +51,12 @@ var CollapsiblePanel = /*#__PURE__*/forwardRef(function (props, ref) {
     "data-testid": "collapsible-panel",
     ref: ref,
     tabIndex: 0,
-    variant: "collapsiblePanel.collapsiblePanelContent"
+    variant: "collapsiblePanel.content"
   }, mergedProps, others), ___EmotionJSX(Box, {
     isRow: true,
-    variant: "collapsiblePanel.collapsiblePanelContainerTitle"
+    variant: "collapsiblePanel.containerTitle"
   }, ___EmotionJSX(Text, {
-    variant: "collapsiblePanelTitle"
+    variant: "variants.collapsiblePanel.title"
   }, listTitle), selectedFilterCount && ___EmotionJSX(CollapsiblePanelBadge, {
     margin: "0",
     className: "title-badge",

package/lib/components/CollapsiblePanel/CollapsiblePanel.stories.js

@@ -26,7 +26,7 @@ import SearchIcon from 'mdi-react/SearchIcon';
 import AccountIcon from 'mdi-react/AccountIcon';
 import CollapsiblePanel from './CollapsiblePanel';
 import { useOverlayPanelState } from '../../hooks';
-import { Breadcrumbs, Box, Button, CheckboxField, Chip, ListView, Item, Icon, IconButton, CollapsiblePanelItem, OverlayPanel, OverlayProvider, SearchField, Text } from '../../index';
+import { Breadcrumbs, Box, Button, CheckboxField, Badge, ListView, Item, Icon, IconButton, CollapsiblePanelItem, OverlayPanel, OverlayProvider, SearchField, Text } from '../../index';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import CollapsiblePanelReadme from './CollapsiblePanel.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -208,7 +208,7 @@ export var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args)
     "data-id": "home"
   }, "Ed Nepomuceno"), ___EmotionJSX(Item, {
     key: "editGroups",
-    variant: "neutralText",
+    variant: "variants.collapsiblePanel.neutralText",
     "data-id": "editGroups"
   }, "Edit Groups"))), ___EmotionJSX(Box, {
     isRow: true
@@ -277,7 +277,7 @@ export var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args)
       variant: "listTitle",
       mb: "xs",
       mr: "xs"
-    }, item.name), ___EmotionJSX(Chip, {
+    }, item.name), ___EmotionJSX(Badge, {
       label: item.chipValue,
       bg: "accent.99",
       textColor: "text.secondary",

package/lib/{styles/variants/collapsiblePanel.js → components/CollapsiblePanel/CollapsiblePanel.styles.js}

@@ -12,8 +12,10 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 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) { _defineProperty(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; }
 
-import { focusWithCroppedOutline } from '../variants/buttons';
-var collapsiblePanelContainer = {
+import { defaultFocus, link, focusWithCroppedOutline } from '../Button/Buttons.styles';
+import { square } from '../IconButton/IconButton.styles';
+import { wordWrap } from '../Text/Text.styles';
+var container = {
   pr: 'sm',
   minHeight: '80vh',
   '>div': {
@@ -26,7 +28,7 @@ var collapsiblePanelContainer = {
     width: '300px'
   }
 };
-var collapsiblePanelContent = {
+var content = {
   bg: 'accent.99',
   fontSize: 'sm',
   height: '100%',
@@ -43,7 +45,7 @@ var collapsiblePanelContent = {
     justifyContent: 'space-between'
   }
 };
-var collapsiblePanelContainerTitle = {
+var containerTitle = {
   alignContent: 'center',
   fontWeight: '500',
   minHeight: '40px',
@@ -57,7 +59,7 @@ var collapsiblePanelContainerTitle = {
     width: '300px'
   }
 };
-var collapsiblePanelBadge = {
+var badge = {
   borderRadius: '5px',
   display: 'flex',
   height: '17px',
@@ -80,14 +82,66 @@ var collapsiblePanelBadge = {
     width: '0'
   }
 };
-var collapsiblePanellItem = {
+var item = {
   minHeight: '45px',
   margin: 'auto'
 };
+export var toggle = _objectSpread(_objectSpread({}, square), {}, {
+  bg: 'accent.99',
+  height: '40px',
+  minWidth: 'max-content',
+  pl: 'xs',
+  ml: '10px',
+  path: {
+    fill: 'active'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'accent.99'
+  },
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    outlineOffset: '0',
+    zIndex: 1
+  }),
+  '&.is-pressed': {
+    backgroundColor: 'accent.99'
+  },
+  ':focus': {
+    outline: 'none'
+  }
+});
+
+var neutralText = _objectSpread(_objectSpread({}, link), {}, {
+  color: 'neutral.10'
+});
+
+var itemText = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  color: 'neutral.30',
+  fontSize: 'sm',
+  fontWeight: 500,
+  overflow: 'hidden',
+  marginRight: 'xs',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+
+var title = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  fontSize: 'sm',
+  fontWeight: 500,
+  color: 'text.secondary',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  mr: 'xs'
+});
+
 export default {
-  collapsiblePanelContainer: collapsiblePanelContainer,
-  collapsiblePanelContent: collapsiblePanelContent,
-  collapsiblePanelContainerTitle: collapsiblePanelContainerTitle,
-  collapsiblePanelBadge: collapsiblePanelBadge,
-  collapsiblePanellItem: collapsiblePanellItem
+  container: container,
+  content: content,
+  containerTitle: containerTitle,
+  badge: badge,
+  item: item,
+  toggle: toggle,
+  neutralText: neutralText,
+  itemText: itemText,
+  title: title
 };

package/lib/components/CollapsiblePanelContainer/CollapsiblePanelBadge.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["selectedFilterCount"];
 import React from 'react';
 import PropTypes from 'prop-types';
-import Chip from '../Chip';
+import Badge from '../Badge';
 /**
  * The CollapsiblePanelBadge serves as a badge to display selected count.
  */
@@ -14,7 +14,7 @@ var CollapsiblePanelBadge = function CollapsiblePanelBadge(props) {
   var selectedFilterCount = props.selectedFilterCount,
       others = _objectWithoutProperties(props, _excluded);
 
-  return ___EmotionJSX(Chip, _extends({
+  return ___EmotionJSX(Badge, _extends({
     as: "span",
     bg: "neutral.90",
     label: selectedFilterCount.toString(),

package/lib/components/CollapsiblePanelContainer/CollapsiblePanelContainer.js

@@ -5,7 +5,7 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import ChevronLeftIcon from 'mdi-react/ChevronLeftIcon';
-import { useOverlayTriggerState } from '@react-stately/overlays';
+import { useOverlayTriggerState } from 'react-stately';
 import CollapsiblePanelBadge from './CollapsiblePanelBadge';
 import { Icon, IconButton, Box } from '../../index';
 import { useStatusClasses } from '../../hooks';
@@ -57,7 +57,7 @@ var CollapsiblePanelContainer = /*#__PURE__*/forwardRef(function (props, ref) {
     className: classNames,
     onKeyUp: handleClose,
     ref: ref,
-    variant: "collapsiblePanel.collapsiblePanelContainer",
+    variant: "collapsiblePanel.container",
     isRow: true
   }, others), ___EmotionJSX(IconButton, {
     isRow: true,
@@ -65,7 +65,7 @@ var CollapsiblePanelContainer = /*#__PURE__*/forwardRef(function (props, ref) {
     "data-testid": "collapsible-panel-button",
     onPress: handleButtonPress,
     ref: triggerRef,
-    variant: "collapsiblePanelToggle",
+    variant: "toggle",
     pr: "sm"
   }, ___EmotionJSX(Icon, {
     color: "active",

package/lib/components/CollapsiblePanelItem/CollapsiblePanelItem.js

@@ -20,7 +20,7 @@ var CollapsiblePanelItem = /*#__PURE__*/forwardRef(function (props, ref) {
     isRow: true,
     ref: ref
   }, ___EmotionJSX(Text, {
-    variant: "collapsiblePanellItem"
+    variant: "variants.collapsiblePanel.itemText"
   }, text), iconElement && (isDefaultSelected ? iconElement : ___EmotionJSX(IconButton, {
     sx: {
       width: 20,