@papillonbits/components 1.13.0 → 1.14.0

package/build/index.js

@@ -1,12 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "primer", {
-  enumerable: true,
-  get: function get() {
-    return _primer.primer;
-  }
-});
-var _primer = require("./primer");
+export { primer } from './primer';

package/build/primer/Alert/Alert.js

@@ -1,115 +1,103 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Alert = Alert;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _hooks = require("@papillonbits/library/hooks");
-var _margin = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/margin.scss"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _Alert = require("./Alert.prop");
-var _Alert2 = _interopRequireDefault(require("./Alert.scss"));
-var _Button = _interopRequireDefault(require("../Button/Button.scss"));
-var _Input = require("../Form/Input");
-var _Button2 = require("../Button");
-var _Icon = require("../Icon/Icon.prop");
-var _Icon2 = require("../Icon");
-var _jsxRuntime = require("react/jsx-runtime");
-function Alert(_ref) {
-  var _consent$action3;
-  var _ref$dataTest = _ref.dataTest,
-    dataTest = _ref$dataTest === void 0 ? _Alert.defaultProps.dataTest : _ref$dataTest,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? _Alert.defaultProps.className : _ref$className,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? _Alert.defaultProps.variant : _ref$variant,
-    children = _ref.children,
-    consent = _ref.consent;
-  var _useState = (0, _hooks.useState)(''),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    consentValue = _useState2[0],
-    setConsentValue = _useState2[1];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    "data-test": dataTest === null || dataTest === void 0 ? void 0 : dataTest["default"],
+import { Fragment } from 'react';
+import { useState } from '@papillonbits/library/hooks';
+import utilityStyles from '@papillonbits/css/build/primer/utilities/margin.scss';
+import cx from 'classnames';
+import { propTypes, defaultProps, alertVariant } from './Alert.prop';
+import styles from './Alert.scss';
+import buttonStyles from '../Button/Button.scss';
+import { Input } from '../Form/Input';
+import { Button, buttonVariant, buttonInputType, iconAlignment } from '../Button';
+import { iconName } from '../Icon/Icon.prop';
+import { Icon, iconSize } from '../Icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Alert({
+  dataTest = defaultProps.dataTest,
+  className = defaultProps.className,
+  variant = defaultProps.variant,
+  children,
+  consent
+}) {
+  const [consentValue, setConsentValue] = useState('');
+  return /*#__PURE__*/_jsx("div", {
+    "data-test": dataTest?.default,
     className: className,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames["default"])(_Alert2["default"]['flash-messages']),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _classnames["default"])(_Alert2["default"].flash, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _Alert2["default"]['flash-warn'], variant === _Alert.alertVariant.warning), _Alert2["default"]['flash-error'], variant === _Alert.alertVariant.error), _Alert2["default"]['flash-success'], variant === _Alert.alertVariant.success), _Alert2["default"]['flash-consent'], variant === _Alert.alertVariant.consent)),
-        children: [consent && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button2.Button, {
-            dataTest: dataTest === null || dataTest === void 0 ? void 0 : dataTest.cancel,
-            className: (0, _classnames["default"])(_Button["default"].btn, _Button["default"]['btn-sm'], _Button["default"].primary, _Alert2["default"]['flash-action']),
+    children: /*#__PURE__*/_jsx("div", {
+      className: cx(styles['flash-messages']),
+      children: /*#__PURE__*/_jsxs("div", {
+        className: cx(styles.flash, {
+          [styles['flash-warn']]: variant === alertVariant.warning,
+          [styles['flash-error']]: variant === alertVariant.error,
+          [styles['flash-success']]: variant === alertVariant.success,
+          [styles['flash-consent']]: variant === alertVariant.consent
+        }),
+        children: [consent && /*#__PURE__*/_jsxs(Fragment, {
+          children: [/*#__PURE__*/_jsx(Button, {
+            dataTest: dataTest?.cancel,
+            className: cx(buttonStyles.btn, buttonStyles['btn-sm'], buttonStyles.primary, styles['flash-action']),
             text: "Cancel",
             icon: {
-              name: _Icon.iconName.XCircleFill16,
-              alignment: _Button2.iconAlignment.left
+              name: iconName.XCircleFill16,
+              alignment: iconAlignment.left
             },
-            variant: _Button2.buttonVariant["default"],
-            inputType: _Button2.buttonInputType.submit,
-            onClick: function onClick() {
-              var _consent$action;
-              consent === null || consent === void 0 || (_consent$action = consent.action) === null || _consent$action === void 0 || _consent$action.cancel();
+            variant: buttonVariant.default,
+            inputType: buttonInputType.submit,
+            onClick: () => {
+              consent?.action?.cancel();
               setConsentValue('');
             }
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button2.Button, {
-            dataTest: dataTest === null || dataTest === void 0 ? void 0 : dataTest.approve,
-            className: (0, _classnames["default"])(_Button["default"].btn, _Button["default"]['btn-sm'], _Button["default"].primary, _Alert2["default"]['flash-action']),
+          }), /*#__PURE__*/_jsx(Button, {
+            dataTest: dataTest?.approve,
+            className: cx(buttonStyles.btn, buttonStyles['btn-sm'], buttonStyles.primary, styles['flash-action']),
             text: "Approve",
             icon: {
-              name: _Icon.iconName.CheckCircleFill16,
-              alignment: _Button2.iconAlignment.left
+              name: iconName.CheckCircleFill16,
+              alignment: iconAlignment.left
             },
-            variant: _Button2.buttonVariant.primary,
-            inputType: _Button2.buttonInputType.submit,
-            autoFocus: consent !== null && consent !== void 0 && consent.withInput ? false : true // eslint-disable-line
+            variant: buttonVariant.primary,
+            inputType: buttonInputType.submit,
+            autoFocus: consent?.withInput ? false : true // eslint-disable-line
             ,
-            onClick: consent !== null && consent !== void 0 && consent.withInput ? function () {
+            onClick: consent?.withInput ? () => {
               if (consentValue !== '') {
-                var _consent$action2;
-                consent === null || consent === void 0 || (_consent$action2 = consent.action) === null || _consent$action2 === void 0 || _consent$action2.approve(consentValue);
+                consent?.action?.approve(consentValue);
                 setConsentValue('');
               }
-            } : consent === null || consent === void 0 || (_consent$action3 = consent.action) === null || _consent$action3 === void 0 ? void 0 : _consent$action3.approve
+            } : consent?.action?.approve
           })]
-        }), variant === _Alert.alertVariant.info && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon2.Icon, {
-          className: _margin["default"]['mr-2'],
-          icon: _Icon.iconName.Info16,
-          size: _Icon2.iconSize.small
-        }), variant === _Alert.alertVariant.warning && !consent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon2.Icon, {
-          className: _margin["default"]['mr-2'],
-          icon: _Icon.iconName.Alert16,
-          size: _Icon2.iconSize.small
-        }), variant === _Alert.alertVariant.warning && consent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon2.Icon, {
-          className: _margin["default"]['mr-2'],
-          icon: _Icon.iconName.Question16,
-          size: _Icon2.iconSize.small
-        }), variant === _Alert.alertVariant.error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon2.Icon, {
-          className: _margin["default"]['mr-2'],
-          icon: _Icon.iconName.XCircle16,
-          size: _Icon2.iconSize.small
-        }), variant === _Alert.alertVariant.success && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon2.Icon, {
-          className: _margin["default"]['mr-2'],
-          icon: _Icon.iconName.CheckCircle16,
-          size: _Icon2.iconSize.small
-        }), variant === _Alert.alertVariant.consent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon2.Icon, {
-          className: _margin["default"]['mr-2'],
-          icon: _Icon.iconName.Question16,
-          size: _Icon2.iconSize.small
-        }), children, (consent === null || consent === void 0 ? void 0 : consent.withInput) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, {
-          dataTest: dataTest === null || dataTest === void 0 ? void 0 : dataTest.value,
-          className: _Alert2["default"]['flash-action'],
+        }), variant === alertVariant.info && /*#__PURE__*/_jsx(Icon, {
+          className: utilityStyles['mr-2'],
+          icon: iconName.Info16,
+          size: iconSize.small
+        }), variant === alertVariant.warning && !consent && /*#__PURE__*/_jsx(Icon, {
+          className: utilityStyles['mr-2'],
+          icon: iconName.Alert16,
+          size: iconSize.small
+        }), variant === alertVariant.warning && consent && /*#__PURE__*/_jsx(Icon, {
+          className: utilityStyles['mr-2'],
+          icon: iconName.Question16,
+          size: iconSize.small
+        }), variant === alertVariant.error && /*#__PURE__*/_jsx(Icon, {
+          className: utilityStyles['mr-2'],
+          icon: iconName.XCircle16,
+          size: iconSize.small
+        }), variant === alertVariant.success && /*#__PURE__*/_jsx(Icon, {
+          className: utilityStyles['mr-2'],
+          icon: iconName.CheckCircle16,
+          size: iconSize.small
+        }), variant === alertVariant.consent && /*#__PURE__*/_jsx(Icon, {
+          className: utilityStyles['mr-2'],
+          icon: iconName.Question16,
+          size: iconSize.small
+        }), children, consent?.withInput && /*#__PURE__*/_jsx(Input, {
+          dataTest: dataTest?.value,
+          className: styles['flash-action'],
           value: consentValue,
           placeholder: "",
           ariaAttr: {},
-          onChange: function onChange(event) {
+          onChange: event => {
             setConsentValue(event.target.value);
           },
-          onKeyUp: function onKeyUp(event) {
+          onKeyUp: event => {
             setConsentValue(event.target.value);
           },
           autoFocus: true // eslint-disable-line
@@ -118,4 +106,4 @@ function Alert(_ref) {
     })
   });
 }
-Alert.propTypes = _Alert.propTypes;
+Alert.propTypes = propTypes;

package/build/primer/Alert/Alert.prop.js

@@ -1,38 +1,32 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.propTypes = exports.defaultProps = exports.alertVariant = void 0;
-var _propTypes = require("prop-types");
-var alertVariant = exports.alertVariant = {
-  "default": 'default',
+import { string, oneOf, shape, func, bool, node } from 'prop-types';
+export const alertVariant = {
+  default: 'default',
   info: 'info',
   warning: 'warning',
   error: 'error',
   success: 'success',
   consent: 'consent'
 };
-var propTypes = exports.propTypes = {
-  dataTest: (0, _propTypes.shape)({
-    "default": _propTypes.string,
-    approve: _propTypes.string,
-    cancel: _propTypes.string,
-    value: _propTypes.string
+export const propTypes = {
+  dataTest: shape({
+    default: string,
+    approve: string,
+    cancel: string,
+    value: string
   }),
-  className: _propTypes.string,
-  variant: (0, _propTypes.oneOf)(Object.keys(alertVariant)),
-  children: _propTypes.node.isRequired,
-  consent: (0, _propTypes.shape)({
-    action: (0, _propTypes.shape)({
-      approve: _propTypes.func,
-      cancel: _propTypes.func
+  className: string,
+  variant: oneOf(Object.keys(alertVariant)),
+  children: node.isRequired,
+  consent: shape({
+    action: shape({
+      approve: func,
+      cancel: func
     }),
-    withInput: _propTypes.bool
+    withInput: bool
   })
 };
-var defaultProps = exports.defaultProps = {
+export const defaultProps = {
   dataTest: null,
   className: null,
-  variant: alertVariant["default"]
+  variant: alertVariant.default
 };

package/build/primer/Alert/index.js

@@ -1,19 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Alert", {
-  enumerable: true,
-  get: function get() {
-    return _Alert.Alert;
-  }
-});
-Object.defineProperty(exports, "alertVariant", {
-  enumerable: true,
-  get: function get() {
-    return _Alert2.alertVariant;
-  }
-});
-var _Alert = require("./Alert");
-var _Alert2 = require("./Alert.prop");
+export { Alert } from './Alert';
+export { alertVariant } from './Alert.prop';

package/build/primer/Blankslate/Blankslate.js

@@ -1,31 +1,27 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Blankslate = Blankslate;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _Blankslate = require("./Blankslate.prop");
-var _Blankslate2 = _interopRequireDefault(require("./Blankslate.scss"));
-var _jsxRuntime = require("react/jsx-runtime");
-function Blankslate(_ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? _Blankslate.defaultProps.className : _ref$className,
-    heading = _ref.heading,
-    text = _ref.text,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? _Blankslate.defaultProps.variant : _ref$variant,
-    _ref$hasCleanBackgrou = _ref.hasCleanBackground,
-    hasCleanBackground = _ref$hasCleanBackgrou === void 0 ? _Blankslate.defaultProps.hasCleanBackground : _ref$hasCleanBackgrou;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["default"])(className, _Blankslate2["default"].blankslate, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _Blankslate2["default"]['blankslate-narrow'], variant === _Blankslate.blankslateVariant.narrow), _Blankslate2["default"]['blankslate-capped'], variant === _Blankslate.blankslateVariant.capped === true), _Blankslate2["default"]['blankslate-spacious'], variant === _Blankslate.blankslateVariant.spacious), _Blankslate2["default"]['blankslate-large'], variant === _Blankslate.blankslateVariant.large), _Blankslate2["default"]['blankslate-clean-background'], hasCleanBackground === true)),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+import cx from 'classnames';
+import { propTypes, defaultProps, blankslateVariant } from './Blankslate.prop';
+import styles from './Blankslate.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Blankslate({
+  className = defaultProps.className,
+  heading,
+  text,
+  variant = defaultProps.variant,
+  hasCleanBackground = defaultProps.hasCleanBackground
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(className, styles.blankslate, {
+      [styles['blankslate-narrow']]: variant === blankslateVariant.narrow,
+      [styles['blankslate-capped']]: variant === blankslateVariant.capped === true,
+      [styles['blankslate-spacious']]: variant === blankslateVariant.spacious,
+      [styles['blankslate-large']]: variant === blankslateVariant.large,
+      [styles['blankslate-clean-background']]: hasCleanBackground === true
+    }),
+    children: [/*#__PURE__*/_jsx("h3", {
       children: heading
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+    }), /*#__PURE__*/_jsx("p", {
       children: text
     })]
   });
 }
-Blankslate.propTypes = _Blankslate.propTypes;
+Blankslate.propTypes = propTypes;

package/build/primer/Blankslate/Blankslate.prop.js

@@ -1,26 +1,20 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.propTypes = exports.defaultProps = exports.blankslateVariant = void 0;
-var _propTypes = require("prop-types");
-var blankslateVariant = exports.blankslateVariant = {
-  "default": 'default',
+import { string, oneOf, bool } from 'prop-types';
+export const blankslateVariant = {
+  default: 'default',
   narrow: 'narrow',
   capped: 'capped',
   spacious: 'spacious',
   large: 'large'
 };
-var propTypes = exports.propTypes = {
-  className: _propTypes.string,
-  heading: _propTypes.string.isRequired,
-  text: _propTypes.string.isRequired,
-  variant: (0, _propTypes.oneOf)(Object.keys(blankslateVariant)),
-  hasCleanBackground: _propTypes.bool
+export const propTypes = {
+  className: string,
+  heading: string.isRequired,
+  text: string.isRequired,
+  variant: oneOf(Object.keys(blankslateVariant)),
+  hasCleanBackground: bool
 };
-var defaultProps = exports.defaultProps = {
+export const defaultProps = {
   className: null,
-  variant: blankslateVariant["default"],
+  variant: blankslateVariant.default,
   hasCleanBackground: false
 };

package/build/primer/Blankslate/index.js

@@ -1,19 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Blankslate", {
-  enumerable: true,
-  get: function get() {
-    return _Blankslate.Blankslate;
-  }
-});
-Object.defineProperty(exports, "blankslateVariant", {
-  enumerable: true,
-  get: function get() {
-    return _Blankslate2.blankslateVariant;
-  }
-});
-var _Blankslate = require("./Blankslate");
-var _Blankslate2 = require("./Blankslate.prop");
+export { Blankslate } from './Blankslate';
+export { blankslateVariant } from './Blankslate.prop';

package/build/primer/Breadcrumb/Breadcrumb.js

@@ -1,74 +1,72 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Breadcrumb = Breadcrumb;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _uuid = require("uuid");
-var _typography = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/typography.scss"));
-var _array = require("@papillonbits/library/array");
-var _Breadcrumb = require("./Breadcrumb.prop");
-var _Breadcrumb2 = _interopRequireDefault(require("./Breadcrumb.scss"));
-var _jsxRuntime = require("react/jsx-runtime");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */
-function Breadcrumb(_ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? _Breadcrumb.defaultProps.className : _ref$className,
-    ariaAttr = _ref.ariaAttr,
-    items = _ref.items,
-    _onClick = _ref.onClick,
-    _ref$state = _ref.state,
-    state = _ref$state === void 0 ? _Breadcrumb.defaultProps.state : _ref$state;
-  var indexItems = (0, _array.getIndexItems)(items);
-  var label = ariaAttr.label,
-    current = ariaAttr.current;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
-    className: (0, _classnames["default"])(className, (0, _defineProperty2["default"])({}, _Breadcrumb2["default"]['breadcrumb-inactive'], state === _Breadcrumb.breadcrumbState.inactive)),
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.map.js";
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import cx from 'classnames';
+import { v1 as uuidv1 } from 'uuid';
+import utilityStyles from '@papillonbits/css/build/primer/utilities/typography.scss';
+import { getIndexItems, getIndexItemsWithSelected } from '@papillonbits/library/array';
+import { propTypes, defaultProps, breadcrumbState } from './Breadcrumb.prop';
+import styles from './Breadcrumb.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Breadcrumb({
+  className = defaultProps.className,
+  ariaAttr,
+  items,
+  onClick,
+  state = defaultProps.state
+}) {
+  const indexItems = getIndexItems(items);
+  const {
+    label,
+    current
+  } = ariaAttr;
+  return /*#__PURE__*/_jsx("nav", {
+    className: cx(className, {
+      [styles['breadcrumb-inactive']]: state === breadcrumbState.inactive
+    }),
     "aria-label": label,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ol", {
-      children: indexItems.map(function (indexItem) {
-        var href = indexItem.href,
-          text = indexItem.text,
-          isSelected = indexItem.isSelected;
-        var itemOtherProps = isSelected ? _objectSpread({}, {
-          'aria-current': current
-        }) : null;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", _objectSpread(_objectSpread({
-          onClick: function onClick(e) {
+    children: /*#__PURE__*/_jsx("ol", {
+      children: indexItems.map(indexItem => {
+        const {
+          href,
+          text,
+          isSelected
+        } = indexItem;
+        const itemOtherProps = isSelected ? {
+          ...{
+            'aria-current': current
+          }
+        } : null;
+        return /*#__PURE__*/_jsx("li", {
+          onClick: e => {
             e.preventDefault();
-            var newIndexItems = (0, _array.getIndexItemsWithSelected)(indexItems, indexItem);
-            _onClick({
+            const newIndexItems = getIndexItemsWithSelected(indexItems, indexItem);
+            onClick({
               active: text,
-              ariaAttr: ariaAttr,
-              items: newIndexItems.map(function (newIndexItem) {
-                return function (_ref2) {
-                  var href = _ref2.href,
-                    text = _ref2.text,
-                    isSelected = _ref2.isSelected;
-                  return {
-                    href: href,
-                    text: text,
-                    isSelected: isSelected
-                  };
-                }(newIndexItem);
-              } // eslint-disable-line
+              ariaAttr,
+              items: newIndexItems.map(newIndexItem => (({
+                href,
+                text,
+                isSelected
+              }) => ({
+                href,
+                text,
+                isSelected
+              }))(newIndexItem) // eslint-disable-line
               )
             });
           },
-          className: !isSelected ? (0, _classnames["default"])(_Breadcrumb2["default"]['breadcrumb-item']) : (0, _classnames["default"])(_Breadcrumb2["default"]['breadcrumb-item'], _Breadcrumb2["default"]['breadcrumb-item-selected'], _typography["default"]['text-gray']),
-          href: href
-        }, itemOtherProps), {}, {
-          children: isSelected ? text : /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+          className: !isSelected ? cx(styles['breadcrumb-item']) : cx(styles['breadcrumb-item'], styles['breadcrumb-item-selected'], utilityStyles['text-gray']),
+          href: href,
+          ...itemOtherProps,
+          children: isSelected ? text : /*#__PURE__*/_jsx("a", {
             href: href,
             children: text
           })
-        }), (0, _uuid.v1)());
+        }, uuidv1());
       })
     })
   });
 }
-Breadcrumb.propTypes = _Breadcrumb.propTypes;
+Breadcrumb.propTypes = propTypes;

package/build/primer/Breadcrumb/Breadcrumb.prop.js

@@ -1,29 +1,23 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.propTypes = exports.defaultProps = exports.breadcrumbState = void 0;
-var _propTypes = require("prop-types");
-var breadcrumbState = exports.breadcrumbState = {
+import { arrayOf, oneOf, shape, string, bool, func } from 'prop-types';
+export const breadcrumbState = {
   active: 'active',
   inactive: 'inactive'
 };
-var propTypes = exports.propTypes = {
-  className: _propTypes.string,
-  ariaAttr: (0, _propTypes.shape)({
-    label: _propTypes.string,
-    current: _propTypes.string
+export const propTypes = {
+  className: string,
+  ariaAttr: shape({
+    label: string,
+    current: string
   }).isRequired,
-  items: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    href: _propTypes.string,
-    text: _propTypes.string,
-    isSelected: _propTypes.bool
+  items: arrayOf(shape({
+    href: string,
+    text: string,
+    isSelected: bool
   })).isRequired,
-  onClick: _propTypes.func.isRequired,
-  state: (0, _propTypes.oneOf)(Object.keys(breadcrumbState))
+  onClick: func.isRequired,
+  state: oneOf(Object.keys(breadcrumbState))
 };
-var defaultProps = exports.defaultProps = {
+export const defaultProps = {
   className: null,
   state: breadcrumbState.active
 };

package/build/primer/Breadcrumb/index.js

@@ -1,19 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Breadcrumb", {
-  enumerable: true,
-  get: function get() {
-    return _Breadcrumb.Breadcrumb;
-  }
-});
-Object.defineProperty(exports, "breadcrumbState", {
-  enumerable: true,
-  get: function get() {
-    return _Breadcrumb2.breadcrumbState;
-  }
-});
-var _Breadcrumb = require("./Breadcrumb");
-var _Breadcrumb2 = require("./Breadcrumb.prop");
+export { Breadcrumb } from './Breadcrumb';
+export { breadcrumbState } from './Breadcrumb.prop';