@papillonbits/components 1.13.1 → 1.14.0

package/build/primer/Pagination/PreviousNext/PreviousNext.js

@@ -1,69 +1,68 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PreviousNext = PreviousNext;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _visibilityDisplay = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/visibility-display.scss"));
-var _pagination = require("@papillonbits/library/pagination");
-var _PreviousNext = require("./PreviousNext.prop");
-var _PreviousNext2 = _interopRequireDefault(require("./PreviousNext.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; }
-function PreviousNext(_ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? _PreviousNext.defaultProps.className : _ref$className,
-    ariaAttr = _ref.ariaAttr,
-    currentPage = _ref.currentPage,
-    _ref$previous = _ref.previous,
-    previous = _ref$previous === void 0 ? _PreviousNext.defaultProps.previous : _ref$previous,
-    _ref$next = _ref.next,
-    next = _ref$next === void 0 ? _PreviousNext.defaultProps.next : _ref$next,
-    _onClick = _ref.onClick,
-    _ref$state = _ref.state,
-    state = _ref$state === void 0 ? _PreviousNext.defaultProps.state : _ref$state;
-  var label = ariaAttr.label;
-  var indexItems = currentPage.indexItems,
-    currentIndex = currentPage.currentIndex,
-    canMoveBackwards = currentPage.canMoveBackwards,
-    canMoveForward = currentPage.canMoveForward;
-  var backwardsAriaProps = !canMoveBackwards ? _objectSpread({}, {
-    'aria-disabled': 'true'
-  }) : null;
-  var forwardAriaProps = !canMoveForward ? _objectSpread({}, {
-    'aria-disabled': 'true'
-  }) : null;
+import cx from 'classnames';
+import displayStyles from '@papillonbits/css/build/primer/utilities/visibility-display.scss';
+import { paginationActionTypes } from '@papillonbits/library/pagination';
+import { propTypes, defaultProps, previousNextState } from './PreviousNext.prop';
+import styles from './PreviousNext.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function PreviousNext({
+  className = defaultProps.className,
+  ariaAttr,
+  currentPage,
+  previous = defaultProps.previous,
+  next = defaultProps.next,
+  onClick,
+  state = defaultProps.state
+}) {
+  const {
+    label
+  } = ariaAttr;
+  const {
+    indexItems,
+    currentIndex,
+    canMoveBackwards,
+    canMoveForward
+  } = currentPage;
+  const backwardsAriaProps = !canMoveBackwards ? {
+    ...{
+      'aria-disabled': 'true'
+    }
+  } : null;
+  const forwardAriaProps = !canMoveForward ? {
+    ...{
+      'aria-disabled': 'true'
+    }
+  } : null;
   if (indexItems === [] || currentIndex === -1) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
-    className: (0, _classnames["default"])(className, _PreviousNext2["default"]['paginate-container'], (0, _defineProperty2["default"])({}, _PreviousNext2["default"]['previousnext-inactive'], state === _PreviousNext.previousNextState.inactive)),
+  return /*#__PURE__*/_jsx("nav", {
+    className: cx(className, styles['paginate-container'], {
+      [styles['previousnext-inactive']]: state === previousNextState.inactive
+    }),
     "aria-label": label,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames["default"])(_PreviousNext2["default"].pagination, _visibilityDisplay["default"]['d-flex']),
-      children: [!canMoveBackwards ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({}, backwardsAriaProps), {}, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: cx(styles.pagination, displayStyles['d-flex']),
+      children: [!canMoveBackwards ? /*#__PURE__*/_jsx("span", {
+        ...backwardsAriaProps,
         children: previous.text
-      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-        onClick: function onClick(event) {
+      }) : /*#__PURE__*/_jsx("a", {
+        onClick: event => {
           event.preventDefault();
-          _onClick(_pagination.paginationActionTypes.onBackwards);
+          onClick(paginationActionTypes.onBackwards);
         },
         rel: previous.rel,
         href: previous.href,
         "aria-label": previous.ariaAttr.label,
         children: previous.text
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        children: "Viewing ".concat(currentIndex + 1, " to ").concat(indexItems.length)
-      }), !canMoveForward ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({}, forwardAriaProps), {}, {
+      }), /*#__PURE__*/_jsx("span", {
+        children: `Viewing ${currentIndex + 1} to ${indexItems.length}`
+      }), !canMoveForward ? /*#__PURE__*/_jsx("span", {
+        ...forwardAriaProps,
         children: next.text
-      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-        onClick: function onClick(event) {
+      }) : /*#__PURE__*/_jsx("a", {
+        onClick: event => {
           event.preventDefault();
-          _onClick(_pagination.paginationActionTypes.onForward);
+          onClick(paginationActionTypes.onForward);
         },
         rel: next.rel,
         href: next.href,
@@ -73,4 +72,4 @@ function PreviousNext(_ref) {
     })
   });
 }
-PreviousNext.propTypes = _PreviousNext.propTypes;
+PreviousNext.propTypes = propTypes;

package/build/primer/Pagination/PreviousNext/PreviousNext.prop.js

@@ -1,40 +1,34 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.propTypes = exports.previousNextState = exports.defaultProps = void 0;
-var _propTypes = require("prop-types");
-var previousNextState = exports.previousNextState = {
+import { string, oneOf, shape, object, func } from 'prop-types';
+export const previousNextState = {
   active: 'active',
   inactive: 'inactive'
 };
-var propTypes = exports.propTypes = {
-  className: _propTypes.string,
-  ariaAttr: (0, _propTypes.shape)({
-    label: _propTypes.string
+export const propTypes = {
+  className: string,
+  ariaAttr: shape({
+    label: string
   }).isRequired,
-  currentPage: _propTypes.object.isRequired,
-  previous: (0, _propTypes.shape)({
-    rel: _propTypes.string,
-    href: _propTypes.string,
-    ariaAttr: (0, _propTypes.shape)({
-      label: _propTypes.string
+  currentPage: object.isRequired,
+  previous: shape({
+    rel: string,
+    href: string,
+    ariaAttr: shape({
+      label: string
     }).isRequired,
-    text: _propTypes.string
+    text: string
   }),
-  next: (0, _propTypes.shape)({
-    rel: _propTypes.string,
-    href: _propTypes.string,
-    ariaAttr: (0, _propTypes.shape)({
-      label: _propTypes.string
+  next: shape({
+    rel: string,
+    href: string,
+    ariaAttr: shape({
+      label: string
     }).isRequired,
-    text: _propTypes.string
+    text: string
   }),
-  onClick: _propTypes.func.isRequired,
-  state: (0, _propTypes.oneOf)(Object.keys(previousNextState))
+  onClick: func.isRequired,
+  state: oneOf(Object.keys(previousNextState))
 };
-var defaultProps = exports.defaultProps = {
+export const defaultProps = {
   className: null,
   previous: {
     rel: 'previous',

package/build/primer/Pagination/PreviousNext/index.js

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

package/build/primer/Pagination/index.js

@@ -1,11 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Pagination = void 0;
-var _PreviousNext = require("./PreviousNext");
-var Pagination = exports.Pagination = {
-  PreviousNext: _PreviousNext.PreviousNext,
-  previousNextState: _PreviousNext.previousNextState
+import { PreviousNext, previousNextState } from './PreviousNext';
+export const Pagination = {
+  PreviousNext,
+  previousNextState
 };

package/build/primer/Popover/Popover.js

@@ -1,63 +1,72 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Popover = Popover;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _boxShadow = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/box-shadow.scss"));
-var _layout = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/layout.scss"));
-var _margin = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/margin.scss"));
-var _padding = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/padding.scss"));
-var _typography = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/typography.scss"));
-var _box = _interopRequireDefault(require("../Box/box.scss"));
-var _Popover = require("./Popover.prop");
-var _Popover2 = _interopRequireDefault(require("./Popover.scss"));
-var _Button = require("../Button");
-var _jsxRuntime = require("react/jsx-runtime");
-function Popover(_ref) {
-  var _cx2;
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? _Popover.defaultProps.className : _ref$className,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? _Popover.defaultProps.variant : _ref$variant,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? _Popover.defaultProps.size : _ref$size,
-    intro = _ref.intro,
-    heading = _ref.heading,
-    message = _ref.message,
-    acknowledge = _ref.acknowledge,
-    introOnClick = _ref.introOnClick,
-    acknowledgeOnClick = _ref.acknowledgeOnClick;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["default"])(className, _layout["default"]['position-relative'], (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _typography["default"]['text-center'], variant === _Popover.popoverVariant["default"] || variant === _Popover.popoverVariant.bottom), (0, _classnames["default"])(_typography["default"]['text-right'], _padding["default"]['pr-2']), variant === _Popover.popoverVariant.bottomRight)),
-    children: [variant === _Popover.popoverVariant["default"] && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
-      variant: _Button.buttonVariant.primary,
+import cx from 'classnames';
+import boxShadowStyles from '@papillonbits/css/build/primer/utilities/box-shadow.scss';
+import layoutStyles from '@papillonbits/css/build/primer/utilities/layout.scss';
+import marginStyles from '@papillonbits/css/build/primer/utilities/margin.scss';
+import paddingStyles from '@papillonbits/css/build/primer/utilities/padding.scss';
+import typographyStyles from '@papillonbits/css/build/primer/utilities/typography.scss';
+import boxStyles from '../Box/box.scss';
+import { propTypes, defaultProps, popoverVariant, popoverSize } from './Popover.prop';
+import styles from './Popover.scss';
+import { Button, buttonVariant } from '../Button';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Popover({
+  className = defaultProps.className,
+  variant = defaultProps.variant,
+  size = defaultProps.size,
+  intro,
+  heading,
+  message,
+  acknowledge,
+  introOnClick,
+  acknowledgeOnClick
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(className, layoutStyles['position-relative'], {
+      [typographyStyles['text-center']]: variant === popoverVariant.default || variant === popoverVariant.bottom,
+      [cx(typographyStyles['text-right'], paddingStyles['pr-2'])]: variant === popoverVariant.bottomRight
+    }),
+    children: [variant === popoverVariant.default && /*#__PURE__*/_jsx(Button, {
+      variant: buttonVariant.primary,
       text: intro,
       onClick: introOnClick
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: ((0, _classnames["default"])(_Popover2["default"].Popover, _layout["default"]['position-relative']), (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, (0, _classnames["default"])(_layout["default"]['right-0'], _layout["default"]['left-0']), variant === _Popover.popoverVariant["default"]), _padding["default"]['pl-2'], variant === _Popover.popoverVariant.bottomLeft)),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _classnames["default"])(_Popover2["default"]['Popover-message'], _typography["default"]['text-left'], _padding["default"]['p-4'], _box["default"].Box, _boxShadow["default"]['box-shadow-large'], (_cx2 = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_cx2, (0, _classnames["default"])(_margin["default"]['mx-auto'], _margin["default"]['mt-2']), variant === _Popover.popoverVariant["default"]), (0, _classnames["default"])(_Popover2["default"]['Popover-message--bottom'], _margin["default"]['mx-auto'], _margin["default"]['mb-2']), variant === _Popover.popoverVariant.bottom), (0, _classnames["default"])(_Popover2["default"]['Popover-message--bottom-right'], _margin["default"]['mb-2']), variant === _Popover.popoverVariant.bottomRight), (0, _classnames["default"])(_Popover2["default"]['Popover-message--bottom-left'], _margin["default"]['mb-2']), variant === _Popover.popoverVariant.bottomLeft), _Popover2["default"]['Popover-message--left'], variant === _Popover.popoverVariant.left), _Popover2["default"]['Popover-message--left-bottom'], variant === _Popover.popoverVariant.leftBottom), _Popover2["default"]['Popover-message--left-top'], variant === _Popover.popoverVariant.leftTop), _Popover2["default"]['Popover-message--right'], variant === _Popover.popoverVariant.right), _Popover2["default"]['Popover-message--right-bottom'], variant === _Popover.popoverVariant.rightBottom), _Popover2["default"]['Popover-message--right-top'], variant === _Popover.popoverVariant.rightTop), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_cx2, _Popover2["default"]['Popover-message--top-left'], variant === _Popover.popoverVariant.topLeft), _Popover2["default"]['Popover-message--top-right'], variant === _Popover.popoverVariant.topRight), _Popover2["default"]['Popover-message--large'], size === _Popover.popoverSize.large))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
-          className: _margin["default"]['mb-2'],
+    }), /*#__PURE__*/_jsx("div", {
+      className: (cx(styles.Popover, layoutStyles['position-relative']), {
+        [cx(layoutStyles['right-0'], layoutStyles['left-0'])]: variant === popoverVariant.default,
+        [paddingStyles['pl-2']]: variant === popoverVariant.bottomLeft
+      }),
+      children: /*#__PURE__*/_jsxs("div", {
+        className: cx(styles['Popover-message'], typographyStyles['text-left'], paddingStyles['p-4'], boxStyles.Box, boxShadowStyles['box-shadow-large'], {
+          [cx(marginStyles['mx-auto'], marginStyles['mt-2'])]: variant === popoverVariant.default,
+          [cx(styles['Popover-message--bottom'], marginStyles['mx-auto'], marginStyles['mb-2'])]: variant === popoverVariant.bottom,
+          [cx(styles['Popover-message--bottom-right'], marginStyles['mb-2'])]: variant === popoverVariant.bottomRight,
+          [cx(styles['Popover-message--bottom-left'], marginStyles['mb-2'])]: variant === popoverVariant.bottomLeft,
+          [styles['Popover-message--left']]: variant === popoverVariant.left,
+          [styles['Popover-message--left-bottom']]: variant === popoverVariant.leftBottom,
+          [styles['Popover-message--left-top']]: variant === popoverVariant.leftTop,
+          [styles['Popover-message--right']]: variant === popoverVariant.right,
+          [styles['Popover-message--right-bottom']]: variant === popoverVariant.rightBottom,
+          [styles['Popover-message--right-top']]: variant === popoverVariant.rightTop,
+          [styles['Popover-message--top-left']]: variant === popoverVariant.topLeft,
+          [styles['Popover-message--top-right']]: variant === popoverVariant.topRight,
+          [styles['Popover-message--large']]: size === popoverSize.large
+        }),
+        children: [/*#__PURE__*/_jsx("h4", {
+          className: marginStyles['mb-2'],
           children: heading
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        }), /*#__PURE__*/_jsx("p", {
           children: message
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
-          className: (0, _classnames["default"])(_margin["default"]['mt-2'], _typography["default"]['text-bold']),
+        }), /*#__PURE__*/_jsx(Button, {
+          className: cx(marginStyles['mt-2'], typographyStyles['text-bold']),
           text: acknowledge,
-          variant: _Button.buttonVariant.outline,
+          variant: buttonVariant.outline,
           onClick: acknowledgeOnClick
         })]
       })
-    }), (variant === _Popover.popoverVariant.bottom || variant === _Popover.popoverVariant.bottomRight || variant === _Popover.popoverVariant.bottomLeft) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
-      variant: _Button.buttonVariant.primary,
+    }), (variant === popoverVariant.bottom || variant === popoverVariant.bottomRight || variant === popoverVariant.bottomLeft) && /*#__PURE__*/_jsx(Button, {
+      variant: buttonVariant.primary,
       text: intro,
       onClick: introOnClick
     })]
   });
 }
-Popover.propTypes = _Popover.propTypes;
+Popover.propTypes = propTypes;

package/build/primer/Popover/Popover.prop.js

@@ -1,12 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.propTypes = exports.popoverVariant = exports.popoverSize = exports.defaultProps = void 0;
-var _propTypes = require("prop-types");
-var popoverVariant = exports.popoverVariant = {
-  "default": 'default',
+import { string, oneOf, func } from 'prop-types';
+export const popoverVariant = {
+  default: 'default',
   bottom: 'bottom',
   bottomRight: 'bottomRight',
   bottomLeft: 'bottomLeft',
@@ -19,23 +13,23 @@ var popoverVariant = exports.popoverVariant = {
   topLeft: 'topLeft',
   topRight: 'topRight'
 };
-var popoverSize = exports.popoverSize = {
+export const popoverSize = {
   normal: 'normal',
   large: 'large'
 };
-var propTypes = exports.propTypes = {
-  className: _propTypes.string,
-  variant: (0, _propTypes.oneOf)(Object.keys(popoverVariant)),
-  size: (0, _propTypes.oneOf)(Object.keys(popoverSize)),
-  intro: _propTypes.string.isRequired,
-  heading: _propTypes.string.isRequired,
-  message: _propTypes.string.isRequired,
-  acknowledge: _propTypes.string.isRequired,
-  introOnClick: _propTypes.func.isRequired,
-  acknowledgeOnClick: _propTypes.func.isRequired
+export const propTypes = {
+  className: string,
+  variant: oneOf(Object.keys(popoverVariant)),
+  size: oneOf(Object.keys(popoverSize)),
+  intro: string.isRequired,
+  heading: string.isRequired,
+  message: string.isRequired,
+  acknowledge: string.isRequired,
+  introOnClick: func.isRequired,
+  acknowledgeOnClick: func.isRequired
 };
-var defaultProps = exports.defaultProps = {
+export const defaultProps = {
   className: null,
-  variant: popoverVariant["default"],
+  variant: popoverVariant.default,
   size: popoverSize.normal
 };

package/build/primer/Popover/index.js

@@ -1,25 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Popover", {
-  enumerable: true,
-  get: function get() {
-    return _Popover.Popover;
-  }
-});
-Object.defineProperty(exports, "popoverSize", {
-  enumerable: true,
-  get: function get() {
-    return _Popover2.popoverSize;
-  }
-});
-Object.defineProperty(exports, "popoverVariant", {
-  enumerable: true,
-  get: function get() {
-    return _Popover2.popoverVariant;
-  }
-});
-var _Popover = require("./Popover");
-var _Popover2 = require("./Popover.prop");
+export { Popover } from './Popover';
+export { popoverVariant, popoverSize } from './Popover.prop';

package/build/primer/Progress/Progress.js

@@ -1,31 +1,25 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Progress = Progress;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _colors = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/colors.scss"));
-var _Progress = require("./Progress.prop");
-var _Progress2 = _interopRequireDefault(require("./Progress.scss"));
-var _jsxRuntime = require("react/jsx-runtime");
-function Progress(_ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? _Progress.defaultProps.className : _ref$className,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? _Progress.defaultProps.variant : _ref$variant,
-    percentage = _ref.percentage;
-  var percentageStyle = {
-    width: "".concat(percentage, "%")
+import cx from 'classnames';
+import colorStyles from '@papillonbits/css/build/primer/utilities/colors.scss';
+import { propTypes, defaultProps, progressVariant } from './Progress.prop';
+import styles from './Progress.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Progress({
+  className = defaultProps.className,
+  variant = defaultProps.variant,
+  percentage
+}) {
+  const percentageStyle = {
+    width: `${percentage}%`
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    className: (0, _classnames["default"])(className, _Progress2["default"].Progress, (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _Progress2["default"]['Progress--large'], variant === _Progress.progressVariant.large), _Progress2["default"]['Progress--small'], variant === _Progress.progressVariant.small === true)),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: (0, _classnames["default"])(_Progress2["default"]['Progress-item'], _colors["default"]['bg-green']),
+  return /*#__PURE__*/_jsx("span", {
+    className: cx(className, styles.Progress, {
+      [styles['Progress--large']]: variant === progressVariant.large,
+      [styles['Progress--small']]: variant === progressVariant.small === true
+    }),
+    children: /*#__PURE__*/_jsx("span", {
+      className: cx(styles['Progress-item'], colorStyles['bg-green']),
       style: percentageStyle
     })
   });
 }
-Progress.propTypes = _Progress.propTypes;
+Progress.propTypes = propTypes;

package/build/primer/Progress/Progress.prop.js

@@ -1,21 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.propTypes = exports.progressVariant = exports.defaultProps = void 0;
-var _propTypes = require("prop-types");
-var progressVariant = exports.progressVariant = {
+import { string, oneOf, number } from 'prop-types';
+export const progressVariant = {
   small: 'small',
   normal: 'normal',
   large: 'large'
 };
-var propTypes = exports.propTypes = {
-  className: _propTypes.string,
-  variant: (0, _propTypes.oneOf)(Object.keys(progressVariant)),
-  percentage: _propTypes.number.isRequired
+export const propTypes = {
+  className: string,
+  variant: oneOf(Object.keys(progressVariant)),
+  percentage: number.isRequired
 };
-var defaultProps = exports.defaultProps = {
+export const defaultProps = {
   className: null,
   variant: progressVariant.normal
 };

package/build/primer/Progress/index.js

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