@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/components/CheckboxField/CheckboxField.js

@@ -9,53 +9,47 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-
 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 React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
-import { useCheckbox } from '@react-aria/checkbox';
-import { useToggleState } from '@react-stately/toggle';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } 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 { Box, Checkbox, FieldHelperText, Label } from '../..';
 import { useField, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
+
 /**
  * Combines a checkbox, label, and helper text for a complete, form-ready solution.
  *
  * Utilizes [useCheckbox](https://react-spectrum.adobe.com/react-aria/useCheckbox.html) from React Aria and
  * [useToggleState](https://react-spectrum.adobe.com/react-stately/useToggleState.html) from React Stately.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
   var label = props.label,
-      _props$controlProps = props.controlProps,
-      controlProps = _props$controlProps === void 0 ? {} : _props$controlProps,
-      hasAutoFocus = props.hasAutoFocus,
-      helperText = props.helperText,
-      isDefaultSelected = props.isDefaultSelected,
-      isIndeterminate = props.isIndeterminate,
-      status = props.status;
-
+    _props$controlProps = props.controlProps,
+    controlProps = _props$controlProps === void 0 ? {} : _props$controlProps,
+    hasAutoFocus = props.hasAutoFocus,
+    helperText = props.helperText,
+    isDefaultSelected = props.isDefaultSelected,
+    isIndeterminate = props.isIndeterminate,
+    status = props.status;
   var checkboxProps = _objectSpread(_objectSpread({
     children: label,
     autoFocus: hasAutoFocus || controlProps.hasAutoFocus,
     defaultSelected: isDefaultSelected || controlProps.isDefaultSelected
   }, props), controlProps);
-
   var _usePress = usePress(props),
-      containerPressProps = _usePress.pressProps;
-
+    containerPressProps = _usePress.pressProps;
   var state = useToggleState(checkboxProps);
   var checkboxRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return checkboxRef.current;
   });
@@ -66,27 +60,26 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
       checkboxRef.current.indeterminate = false;
     }
   }, [isIndeterminate]);
-
   var _useCheckbox = useCheckbox(checkboxProps, state, checkboxRef),
-      inputProps = _useCheckbox.inputProps;
-
+    inputProps = _useCheckbox.inputProps;
   var _useField = useField(_objectSpread(_objectSpread(_objectSpread({}, containerPressProps), props), {}, {
-    statusClasses: {
-      isIndeterminate: isIndeterminate
-    },
-    controlProps: _objectSpread(_objectSpread({}, controlProps), inputProps)
-  })),
-      fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
-      fieldLabelProps = _useField.fieldLabelProps;
-
-  var helperTextId = uuid();
+      statusClasses: {
+        isIndeterminate: isIndeterminate
+      },
+      controlProps: _objectSpread(_objectSpread({}, controlProps), inputProps)
+    })),
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldLabelProps = _useField.fieldLabelProps;
+  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,78 +87,50 @@ 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,
-
   /** Text rendered below the input. */
   helperText: PropTypes.node,
-
   /** If present this prop will cause a help hint to render in the label of the field. */
   hintText: PropTypes.string,
-
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string,
-
   /** Whether the element should be selected (uncontrolled). */
   isDefaultSelected: PropTypes.bool,
-
   /** Whether the input is disabled. */
   isDisabled: PropTypes.bool,
-
   /**
    * Indeterminism is presentational only. The indeterminate visual representation remains until
    * this prop is set to false regardless of user interaction.
   */
   isIndeterminate: PropTypes.bool,
-
   /** Whether the input can be selected, but not changed by the user. */
   isReadOnly: PropTypes.bool,
-
   /** Whether user input is required on the input before form submission. */
   isRequired: PropTypes.bool,
-
   /** Whether the element should be selected (controlled). */
   isSelected: PropTypes.bool,
-
   /** The rendered label for the field. */
   label: PropTypes.node,
-
   /** The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
   name: PropTypes.string,
-
   /** Determines the textarea status indicator and helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses)),
-
   /** The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). */
   value: PropTypes.string,
-
   /** Handler that is called when the element's selection state changes. */
   onChange: PropTypes.func,
-
   /** Handler that is called when the element receives focus. */
   onFocus: PropTypes.func,
-
   /** Handler that is called when the element loses focus. */
   onBlur: PropTypes.func,
-
   /** Handler that is called when the element's focus status changes. */
   onFocusChange: PropTypes.func,
-
   /** Handler that is called when a key is pressed. */
   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

@@ -11,18 +11,16 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _everyInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/every";
-
 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 React, { useEffect, useState } from 'react';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
-import CheckboxField from './CheckboxField';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
+import Box from '../Box';
 import Link from '../Link';
 import Text from '../Text';
-import statuses from '../../utils/devUtils/constants/statuses';
-import Box from '../Box';
+import CheckboxField from './CheckboxField';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/CheckboxField',
@@ -34,7 +32,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -71,23 +69,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);
@@ -100,10 +83,9 @@ export var DefaultSelected = function DefaultSelected() {
 };
 export var Controlled = function Controlled() {
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isSelected = _React$useState2[0],
-      setSelected = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isSelected = _React$useState2[0],
+    setSelected = _React$useState2[1];
   return ___EmotionJSX(CheckboxField, {
     isSelected: isSelected,
     onChange: setSelected,
@@ -113,7 +95,7 @@ export var Controlled = function Controlled() {
 export var Required = function Required() {
   return ___EmotionJSX(CheckboxField, {
     isRequired: true,
-    label: ___EmotionJSX(Text, null, "I agree to the ", ___EmotionJSX(Link, {
+    label: ___EmotionJSX(Text, null, "I agree to the", ' ', ___EmotionJSX(Link, {
       href: "https://pingidentity.com",
       target: "_blank"
     }, "Terms and Conditions"))
@@ -129,53 +111,48 @@ export var HelperText = function HelperText() {
 export var Indeterminate = function Indeterminate() {
   // Whether the parent checkbox is indeterminate (default is true for our example)
   var _useState = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      isIndeterminate = _useState2[0],
-      setIsIndeterminate = _useState2[1]; // Whether the parent checkbox should be checked, this is set independently from indeterminism
-
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isIndeterminate = _useState2[0],
+    setIsIndeterminate = _useState2[1];
+  // Whether the parent checkbox should be checked, this is set independently from indeterminism
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isCompleted = _useState4[0],
-      setIsCompleted = _useState4[1]; // The state of the sub-checkboxes
-
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    isCompleted = _useState4[0],
+    setIsCompleted = _useState4[1];
+  // The state of the sub-checkboxes
   var _useState5 = useState([{
-    label: 'Apple Chunks',
-    isSelected: true
-  }, {
-    label: 'Blueberries',
-    isSelected: false
-  }, {
-    label: 'Grapes',
-    isSelected: false
-  }, {
-    label: 'Strawberry Slices',
-    isSelected: true
-  }]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      subCheckboxes = _useState6[0],
-      setSubCheckboxes = _useState6[1]; // Determine which checkbox needs its state updated
-
+      label: 'Apple Chunks',
+      isSelected: true
+    }, {
+      label: 'Blueberries',
+      isSelected: false
+    }, {
+      label: 'Grapes',
+      isSelected: false
+    }, {
+      label: 'Strawberry Slices',
+      isSelected: true
+    }]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    subCheckboxes = _useState6[0],
+    setSubCheckboxes = _useState6[1];
 
+  // Determine which checkbox needs its state updated
   var handleSubCheckboxChange = function handleSubCheckboxChange(isSelected, changedIndex) {
     var changeAll = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-
     var newSubCheckboxes = _mapInstanceProperty(subCheckboxes).call(subCheckboxes, function (checkbox, index) {
       if (changeAll || index === changedIndex) return _objectSpread(_objectSpread({}, checkbox), {}, {
         isSelected: isSelected
       });
       return checkbox;
     });
-
     setSubCheckboxes(newSubCheckboxes);
-  }; // Update all sub-checkbox states when the parent checkbox is pressed
-
+  };
 
+  // Update all sub-checkbox states when the parent checkbox is pressed
   var handleParentCheckboxChange = function handleParentCheckboxChange(isSelected) {
     handleSubCheckboxChange(isSelected, null, true);
   };
-
   useEffect(function () {
     // Determine if all sub-checkboxes are selected / unselected or if there is a mix
     // and update the parent checkbox

package/lib/components/CheckboxField/CheckboxField.test.js

@@ -1,27 +1,24 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import userEvent from '@testing-library/user-event';
+import statuses from '../../utils/devUtils/constants/statuses';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import statuses from '../../utils/devUtils/constants/statuses';
-import CheckboxField from '../CheckboxField';
+import CheckboxField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testLabel = 'Test Label';
 var defaultProps = {
   label: testLabel
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$renderFn = _ref.renderFn,
-      renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
-
+    _ref$renderFn = _ref.renderFn,
+    renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
   return renderFn(___EmotionJSX(CheckboxField, _extends({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('default checkbox', function () {
   getComponent();
@@ -58,8 +55,9 @@ test('isSelected for controlled checkbox', function () {
     isSelected: true
   });
   var input = screen.getByRole('checkbox');
-  expect(input).toBeChecked(); // Ensure it is controlled.
+  expect(input).toBeChecked();
 
+  // Ensure it is controlled.
   userEvent.click(input);
   expect(input).toBeChecked();
 });
@@ -68,8 +66,9 @@ test('defaultValue for uncontrolled checkbox', function () {
     isDefaultSelected: true
   });
   var input = screen.getByRole('checkbox');
-  expect(input).toBeChecked(); // Ensure it is uncontrolled.
+  expect(input).toBeChecked();
 
+  // Ensure it is uncontrolled.
   userEvent.click(input);
   expect(input).not.toBeChecked();
 });
@@ -102,30 +101,31 @@ test('passing helper text should display it and correct aria attributes on input
 });
 test('indeterminate checkbox', function () {
   var _getComponent = getComponent({
-    isIndeterminate: true
-  }),
-      rerender = _getComponent.rerender;
-
+      isIndeterminate: true
+    }),
+    rerender = _getComponent.rerender;
   var input = screen.getByRole('checkbox');
   var label = screen.getByText(testLabel);
   /* eslint-disable jest-dom/prefer-checked */
-
   expect(input).toHaveAttribute('aria-checked', 'mixed');
-  expect(label).toHaveClass('is-indeterminate'); // Ensure it cannot be changed via user interaction
+  expect(label).toHaveClass('is-indeterminate');
 
+  // Ensure it cannot be changed via user interaction
   userEvent.click(input);
-  expect(input).toHaveAttribute('aria-checked', 'mixed'); // An indeterminite checkbox can still have the checked attribute
-
-  expect(input).toBeChecked(); // Ensure it works normally when toggled off again
+  expect(input).toHaveAttribute('aria-checked', 'mixed');
+  // An indeterminite checkbox can still have the checked attribute
+  expect(input).toBeChecked();
 
+  // Ensure it works normally when toggled off again
   getComponent({}, {
     renderFn: rerender
-  }); // Reset the variable since the DOM has changed
-
+  });
+  // Reset the variable since the DOM has changed
   input = screen.getByRole('checkbox');
   expect(input).not.toHaveAttribute('aria-checked', 'mixed');
-  expect(label).not.toHaveClass('is-indeterminate'); // Ensure it can be changed via user interaction, should be unchecked now
+  expect(label).not.toHaveClass('is-indeterminate');
 
+  // Ensure it can be changed via user interaction, should be unchecked now
   userEvent.click(input);
   expect(input).not.toBeChecked();
 });

package/lib/components/CodeView/CodeView.js

@@ -2,11 +2,8 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "className", "hasLineNumbers", "hasNoCopyButton", "language", "Prism"];
-
 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 _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
@@ -18,56 +15,52 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 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 React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
 import { useFocusRing } from '@react-aria/focus';
 import { useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
 import Highlight, { defaultProps, Prism } from 'prism-react-renderer';
-import { useStatusClasses } from '../../hooks';
+import PropTypes from 'prop-types';
 import { Box, CopyText } from '../..';
-import codeView from '../../styles/variants/codeView';
+import { useStatusClasses } from '../../hooks';
+import styles from './CodeView.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
-      outerClassName = props.className,
-      hasLineNumbers = props.hasLineNumbers,
-      hasNoCopyButton = props.hasNoCopyButton,
-      language = props.language,
-      customPrism = props.Prism,
-      others = _objectWithoutProperties(props, _excluded);
-
+    outerClassName = props.className,
+    hasLineNumbers = props.hasLineNumbers,
+    hasNoCopyButton = props.hasNoCopyButton,
+    language = props.language,
+    customPrism = props.Prism,
+    others = _objectWithoutProperties(props, _excluded);
   var _useFocusRing = useFocusRing(),
-      isFocusVisible = _useFocusRing.isFocusVisible,
-      focusProps = _useFocusRing.focusProps;
-
+    isFocusVisible = _useFocusRing.isFocusVisible,
+    focusProps = _useFocusRing.focusProps;
   var _useHover = useHover(props),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered;
-
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
   var _useStatusClasses = useStatusClasses(outerClassName, {
-    isFocused: isFocusVisible,
-    isHovered: isHovered,
-    hasLineNumbers: hasLineNumbers,
-    hasNoCopyButton: hasNoCopyButton
-  }),
-      classNames = _useStatusClasses.classNames; // Get the width for the line number element depending on the total amount of lines
-
+      isFocused: isFocusVisible,
+      isHovered: isHovered,
+      hasLineNumbers: hasLineNumbers,
+      hasNoCopyButton: hasNoCopyButton
+    }),
+    classNames = _useStatusClasses.classNames;
 
+  // Get the width for the line number element depending on the total amount of lines
   var getLineNoWidth = function getLineNoWidth(tokens) {
     return tokens.length.toString().length * 12;
   };
-
   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
   }), function (_ref) {
     var className = _ref.className,
-        style = _ref.style,
-        tokens = _ref.tokens,
-        getLineProps = _ref.getLineProps,
-        getTokenProps = _ref.getTokenProps;
+      style = _ref.style,
+      tokens = _ref.tokens,
+      getLineProps = _ref.getLineProps,
+      getTokenProps = _ref.getTokenProps;
     return ___EmotionJSX(Box, {
       as: "pre",
       className: className,
@@ -92,7 +85,6 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
       }));
     }));
   });
-
   if (hasNoCopyButton) {
     return ___EmotionJSX(Box, _extends({
       ref: ref,
@@ -101,7 +93,6 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
       className: classNames
     }, mergeProps(focusProps, hoverProps, others)), content);
   }
-
   return ___EmotionJSX(CopyText, {
     mode: "link",
     textToCopy: children,
@@ -117,10 +108,8 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
 CodeView.propTypes = {
   /** Whether the CodeView displays line numbers. */
   hasLineNumbers: PropTypes.bool,
-
   /** Whether the CodeView hides the copy button.  */
   hasNoCopyButton: PropTypes.bool,
-
   /**
    * Which programming language the CodeView should use for highlighting. A list of default languages is listed [here](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js).
    *
@@ -130,7 +119,6 @@ CodeView.propTypes = {
    * for more information.
   */
   language: PropTypes.string,
-
   /* Prism object for using instead of Prism from "react-prism-renderer" */
   Prism: PropTypes.shape({})
 };

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

@@ -2,8 +2,9 @@ import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instanc
 import React from 'react';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-powershell';
-import CodeView from './CodeView';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Text } from '../..';
+import CodeView from './CodeView';
 import CodeViewReadme from './CodeView.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var code = "{\n  \"_links\": {\n    \"self\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\"\n    },\n    \"password\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.set\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.reset\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.check\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.recover\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"account.sendVerificationCode\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\"\n    },\n    \"linkedAccounts\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/linkedAccounts\"\n    }\n  },\n  \"id\": \"5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\",\n  \"environment\": {\n    \"id\": \"94e3268d-847d-47aa-a45e-1ef8dd8f4df0\"\n  },\n  \"account\": {\n    \"canAuthenticate\": true,\n    \"status\": \"OK\"\n  },\n  \"createdAt\": \"2021-09-03T15:01:43.555Z\",\n  \"email\": \"allegraweldon@pingidentity.com\",\n  \"enabled\": true,\n  \"identityProvider\": {\n    \"type\": \"PING_ONE\"\n  },\n  \"lifecycle\": {\n    \"status\": \"ACCOUNT_OK\"\n  },\n  \"mfaEnabled\": false,\n  \"population\": {\n    \"id\": \"c1adbc29-f188-4ea6-a015-49bddd74bc84\"\n  },\n  \"updatedAt\": \"2021-09-03T15:01:43.555Z\",\n  \"username\": \"allegraweldon@pingidentity.com\",\n  \"verifyStatus\": \"NOT_INITIATED\"\n}";
@@ -45,10 +46,18 @@ export default {
   }
 };
 export var Default = function Default(args) {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CodeView, args));
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
+    sx: {
+      fontWeight: 2
+    }
+  }, "JSON"), ___EmotionJSX(CodeView, args));
 };
 export var WithLineNumbers = function WithLineNumbers() {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CodeView, {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
+    sx: {
+      fontWeight: 2
+    }
+  }, "JSON"), ___EmotionJSX(CodeView, {
     hasLineNumbers: true
   }, code));
 };
@@ -58,25 +67,24 @@ WithLineNumbers.parameters = {
   }
 };
 export var WithCustomSize = function WithCustomSize() {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CodeView, {
+  return ___EmotionJSX(CodeView, {
     language: "jsx",
     sx: {
       width: '100%',
       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;
-
   /**
    * import { CodeView } from "@pingux/astro";
    * import Prism from 'prismjs';
    * import 'prismjs/components/prism-powershell';
    */
-  var powershellCode = _trimInstanceProperty(_context = "\n   Get-WinEvent -FilterHashtable @{\n     LogName='Application'\n     ProviderName='*defrag'\n   }\n ").call(_context);
 
+  var powershellCode = _trimInstanceProperty(_context = "\n   Get-WinEvent -FilterHashtable @{\n     LogName='Application'\n     ProviderName='*defrag'\n   }\n ").call(_context);
   return ___EmotionJSX(CodeView, {
     language: "powershell",
     Prism: Prism