@papillonarts/components 0.6.0 → 0.7.0

package/build/primer/Navigation/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Navigation = void 0;
+var _Menu = require("./Menu");
+var _TabNav = require("./TabNav");
+var _UnderlineNav = require("./UnderlineNav");
+var Navigation = exports.Navigation = {
+  Menu: _Menu.Menu,
+  TabNav: _TabNav.TabNav,
+  tabNavState: _TabNav.tabNavState,
+  UnderlineNav: _UnderlineNav.UnderlineNav,
+  underlineNavItemType: _UnderlineNav.underlineNavItemType,
+  underlineNavAlignmentType: _UnderlineNav.underlineNavAlignmentType
+};

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

@@ -0,0 +1,76 @@
+"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;
+  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)),
+    "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: previous.text
+      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        onClick: function onClick(event) {
+          event.preventDefault();
+          _onClick(_pagination.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), {}, {
+        children: next.text
+      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        onClick: function onClick(event) {
+          event.preventDefault();
+          _onClick(_pagination.paginationActionTypes.onForward);
+        },
+        rel: next.rel,
+        href: next.href,
+        "aria-label": next.ariaAttr.label,
+        children: next.text
+      })]
+    })
+  });
+}
+PreviousNext.propTypes = _PreviousNext.propTypes;

package/build/primer/Pagination/PreviousNext/PreviousNext.md

@@ -0,0 +1,20 @@
+# PreviousNext
+
+> Use the pagination component to apply button styles to a connected set of links that go to related pages (for example, previous, next, or page numbers).
+> You can make a very simple pagination container with just the Previous and Next buttons. Add the aria-disabled="true" attribute to the Previous button if there isn't a preceding page, or to the Next button if there isn't a succeeding page.
+
+# Variants
+
+> - Default, Inactive
+
+## Default
+
+```jsx
+<PreviousNext ariaAttr={ariaAttr} currentPage={currentPage} onClick={action('onClick')} />
+```
+
+## Inactive
+
+```jsx
+<PreviousNext ariaAttr={ariaAttr} currentPage={currentPage} onClick={action('onClick')} state={previousNextState.inactive} />
+```

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

@@ -0,0 +1,56 @@
+"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 = {
+  active: 'active',
+  inactive: 'inactive'
+};
+var propTypes = exports.propTypes = {
+  className: _propTypes.string,
+  ariaAttr: (0, _propTypes.shape)({
+    label: _propTypes.string
+  }).isRequired,
+  currentPage: _propTypes.object.isRequired,
+  previous: (0, _propTypes.shape)({
+    rel: _propTypes.string,
+    href: _propTypes.string,
+    ariaAttr: (0, _propTypes.shape)({
+      label: _propTypes.string
+    }).isRequired,
+    text: _propTypes.string
+  }),
+  next: (0, _propTypes.shape)({
+    rel: _propTypes.string,
+    href: _propTypes.string,
+    ariaAttr: (0, _propTypes.shape)({
+      label: _propTypes.string
+    }).isRequired,
+    text: _propTypes.string
+  }),
+  onClick: _propTypes.func.isRequired,
+  state: (0, _propTypes.oneOf)(Object.keys(previousNextState))
+};
+var defaultProps = exports.defaultProps = {
+  className: null,
+  previous: {
+    rel: 'previous',
+    href: '#url',
+    ariaAttr: {
+      label: 'Previous'
+    },
+    text: '<'
+  },
+  next: {
+    rel: 'next',
+    href: '#url',
+    ariaAttr: {
+      label: 'Next'
+    },
+    text: '>'
+  },
+  state: previousNextState.active
+};

package/build/primer/Pagination/PreviousNext/PreviousNext.scss

@@ -0,0 +1,161 @@
+@import '@papillonbits/css/build/primer/support/mixins/layout.scss';
+@import '@papillonbits/css/build/primer/support/variables/misc.scss';
+
+// stylelint-disable custom-property-pattern
+
+// Needs refactoring
+// stylelint-disable selector-max-type
+.pagination {
+  a,
+  span,
+  em {
+    min-width: 32px;
+    // stylelint-disable-next-line primer/spacing
+    padding: 5px 10px;
+    font-style: normal;
+    // stylelint-disable-next-line primer/typography
+    line-height: 20px;
+    color: var(--fgColor-default, var(--color-fg-default));
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    // stylelint-disable-next-line primer/borders
+    border: $border-width $border-style transparent;
+    // stylelint-disable-next-line primer/borders
+    border-radius: $border-radius;
+    transition: border-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      border-color: var(--borderColor-default, var(--color-border-default));
+      transition-duration: 0.1s;
+    }
+
+    &:active {
+      border-color: var(--borderColor-muted, var(--color-border-muted));
+      transition: none;
+    }
+  }
+
+  .previous_page,
+  .next_page {
+    color: var(--fgColor-accent, var(--color-accent-fg));
+  }
+
+  .current,
+  .current:hover,
+  [aria-current]:not([aria-current='false']) {
+    color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+    background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+    border-color: transparent;
+  }
+
+  .gap,
+  .disabled,
+  [aria-disabled='true'],
+  .gap:hover,
+  .disabled:hover,
+  [aria-disabled='true']:hover {
+    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
+    cursor: default;
+    border-color: transparent;
+  }
+
+  // chevron icons using clip-path
+  @supports (clip-path: polygon(50% 0, 100% 50%, 50% 100%)) {
+    .previous_page::before,
+    .next_page::after {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      vertical-align: text-bottom;
+      content: '';
+      // stylelint-disable-next-line primer/colors
+      background-color: currentcolor;
+    }
+
+    // chevron-left
+    .previous_page::before {
+      margin-right: var(--base-size-4);
+      clip-path: polygon(
+        9.8px 12.8px,
+        8.7px 12.8px,
+        4.5px 8.5px,
+        4.5px 7.5px,
+        8.7px 3.2px,
+        9.8px 4.3px,
+        6.1px 8px,
+        9.8px 11.7px,
+        9.8px 12.8px
+      );
+    }
+
+    // chevron-right
+    .next_page::after {
+      margin-left: var(--base-size-4);
+      clip-path: polygon(
+        6.2px 3.2px,
+        7.3px 3.2px,
+        11.5px 7.5px,
+        11.5px 8.5px,
+        7.3px 12.8px,
+        6.2px 11.7px,
+        9.9px 8px,
+        6.2px 4.3px,
+        6.2px 3.2px
+      );
+    }
+  }
+
+  // Responsive
+
+  // Hide everything by default
+  > * {
+    display: none;
+  }
+
+  // 0 -> sm
+  // Only show [Previous] [Next]
+
+  > :first-child,
+  > :last-child,
+  > .previous_page,
+  > .next_page {
+    display: inline-block;
+  }
+
+  // sm -> md
+  // Also show [first] [last] [current number] and [...]
+
+  @include breakpoint(sm) {
+    > :nth-child(2),
+    > :nth-last-child(2),
+    > .current,
+    > .gap {
+      display: inline-block;
+    }
+  }
+
+  // md -> or more
+  // Show everything
+
+  @include breakpoint(md) {
+    > * {
+      display: inline-block;
+    }
+  }
+}
+
+// Unified centered pagination across the site
+.paginate-container {
+  margin-top: var(--base-size-16);
+  margin-bottom: var(--base-size-16);
+  text-align: center;
+
+  .pagination {
+    display: inline-block;
+  }
+}

package/build/primer/Pagination/PreviousNext/__tests__/__snapshots__/PreviousNext.int.test.js.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`<PreviousNext /> Render must match inactive() 1`] = `
+<div>
+  <nav
+    aria-label="Pagination"
+    class="paginate-container previousnext-inactive"
+  >
+    <div
+      class="pagination d-flex"
+    >
+      <a
+        aria-label="Previous"
+        href="#url"
+        rel="previous"
+      >
+        &lt;
+      </a>
+      <span>
+        Viewing 3 to 7
+      </span>
+      <a
+        aria-label="Next"
+        href="#url"
+        rel="next"
+      >
+        &gt;
+      </a>
+    </div>
+  </nav>
+</div>
+`;
+
+exports[`<PreviousNext /> Render must match regular() 1`] = `
+<div>
+  <nav
+    aria-label="Pagination"
+    class="paginate-container"
+  >
+    <div
+      class="pagination d-flex"
+    >
+      <a
+        aria-label="Previous"
+        href="#url"
+        rel="previous"
+      >
+        &lt;
+      </a>
+      <span>
+        Viewing 3 to 7
+      </span>
+      <a
+        aria-label="Next"
+        href="#url"
+        rel="next"
+      >
+        &gt;
+      </a>
+    </div>
+  </nav>
+</div>
+`;

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

@@ -0,0 +1,19 @@
+"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");

package/build/primer/Pagination/index.js

@@ -0,0 +1,11 @@
+"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
+};

package/build/primer/Popover/Popover.js

@@ -0,0 +1,63 @@
+"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,
+      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'],
+          children: heading
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: message
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+          className: (0, _classnames["default"])(_margin["default"]['mt-2'], _typography["default"]['text-bold']),
+          text: acknowledge,
+          variant: _Button.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,
+      text: intro,
+      onClick: introOnClick
+    })]
+  });
+}
+Popover.propTypes = _Popover.propTypes;

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

@@ -0,0 +1,41 @@
+"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',
+  bottom: 'bottom',
+  bottomRight: 'bottomRight',
+  bottomLeft: 'bottomLeft',
+  left: 'left',
+  leftBottom: 'leftBottom',
+  leftTop: 'leftTop',
+  right: 'right',
+  rightBottom: 'rightBottom',
+  rightTop: 'rightTop',
+  topLeft: 'topLeft',
+  topRight: 'topRight'
+};
+var popoverSize = exports.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
+};
+var defaultProps = exports.defaultProps = {
+  className: null,
+  variant: popoverVariant["default"],
+  size: popoverSize.normal
+};

package/build/primer/Popover/Popover.scss

@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/beta/popover';

package/build/primer/Popover/index.js

@@ -0,0 +1,25 @@
+"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");

package/build/primer/Progress/Progress.js

@@ -0,0 +1,31 @@
+"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, "%")
+  };
+  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']),
+      style: percentageStyle
+    })
+  });
+}
+Progress.propTypes = _Progress.propTypes;

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

@@ -0,0 +1,21 @@
+"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 = {
+  small: 'small',
+  normal: 'normal',
+  large: 'large'
+};
+var propTypes = exports.propTypes = {
+  className: _propTypes.string,
+  variant: (0, _propTypes.oneOf)(Object.keys(progressVariant)),
+  percentage: _propTypes.number.isRequired
+};
+var defaultProps = exports.defaultProps = {
+  className: null,
+  variant: progressVariant.normal
+};

package/build/primer/Progress/Progress.scss

@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/beta/progress_bar';

package/build/primer/Progress/index.js

@@ -0,0 +1,19 @@
+"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");

package/build/primer/SVG/icon/accessibility-16.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M9.923 5.302c.063.063.122.129.178.198H14A.75.75 0 0 1 14 7h-3.3l.578 5.163.362 2.997a.75.75 0 0 1-1.49.18L9.868 13H6.132l-.282 2.34a.75.75 0 0 1-1.49-.18l.362-2.997L5.3 7H2a.75.75 0 0 1 0-1.5h3.9a2.54 2.54 0 0 1 .176-.198 3 3 0 1 1 3.847 0ZM9.2 7.073h-.001a1.206 1.206 0 0 0-2.398 0L6.305 11.5h3.39ZM9.5 3a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 3Z"/></svg>

package/build/primer/SVG/icon/accessibility-24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.974 8.114a3.573 3.573 0 1 0-3.947 0c-.302.21-.57.467-.79.762H3.708a.75.75 0 1 0 0 1.5h4.885a2.93 2.93 0 0 0-.026.188l-.814 7.267-.499 4.142a.75.75 0 1 0 1.49.18l.42-3.486h5.67l.42 3.485a.75.75 0 0 0 1.49-.18l-.5-4.142-.813-7.266a3.502 3.502 0 0 0-.026-.188h4.885a.75.75 0 1 0 0-1.5h-5.527a3.466 3.466 0 0 0-.79-.762Zm.099-2.979a2.073 2.073 0 1 1-4.146 0 2.073 2.073 0 0 1 4.146 0Zm-.131 5.596.72 6.436H9.338l.72-6.436a1.954 1.954 0 0 1 3.884 0Z"/></svg>

package/build/primer/SVG/icon/accessibility-inset-16.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM3.75 6a.75.75 0 0 0 0 1.5h2.409a1.9 1.9 0 0 0-.025.151l-.307 2.508-.323 3.011a.75.75 0 0 0 1.492.16l.25-2.33h1.509l.25 2.33a.748.748 0 0 0 1.199.552.75.75 0 0 0 .291-.712l-.32-3-.309-2.519a1.9 1.9 0 0 0-.025-.151h2.409a.75.75 0 0 0 0-1.5h-8.5ZM8 6a2 2 0 1 0 .001-3.999A2 2 0 0 0 8 6Z"/></svg>

package/build/primer/SVG/icon/accessibility-inset-24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0Zm2.5 6.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM12 9h6.375a.75.75 0 0 1 0 1.5h-4.028l.542 4.42.482 4.5a.75.75 0 1 1-1.492.16l-.41-3.83H10.53l-.41 3.83a.75.75 0 1 1-1.492-.16l.484-4.511.54-4.409H5.625a.75.75 0 0 1 0-1.5H12Z"/></svg>

package/build/primer/SVG/icon/ai-model-16.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M10.628 7.25a2.25 2.25 0 1 1 0 1.5H8.622a2.25 2.25 0 0 1-2.513 1.466L5.03 12.124a2.25 2.25 0 1 1-1.262-.814l1.035-1.832A2.245 2.245 0 0 1 4.25 8c0-.566.209-1.082.553-1.478L3.768 4.69a2.25 2.25 0 1 1 1.262-.814l1.079 1.908A2.25 2.25 0 0 1 8.622 7.25ZM2.5 2.5a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm4 4.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm6.25 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm-9.5 5.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"/></svg>

package/build/primer/SVG/icon/ai-model-24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19.375 8.5a3.25 3.25 0 1 1-3.163 4h-3a3.252 3.252 0 0 1-4.443 2.509L7.214 17.76a3.25 3.25 0 1 1-1.342-.674l1.672-2.957A3.238 3.238 0 0 1 6.75 12c0-.907.371-1.727.97-2.316L6.117 6.846A3.253 3.253 0 0 1 1.875 3.75a3.25 3.25 0 1 1 5.526 2.32l1.603 2.836A3.25 3.25 0 0 1 13.093 11h3.119a3.252 3.252 0 0 1 3.163-2.5ZM10 10.25a1.75 1.75 0 1 0-.001 3.499A1.75 1.75 0 0 0 10 10.25ZM5.125 2a1.75 1.75 0 1 0 0 3.5 1.75 1.75 0 0 0 0-3.5Zm12.5 9.75a1.75 1.75 0 1 0 3.5 0 1.75 1.75 0 0 0-3.5 0Zm-14.25 8.5a1.75 1.75 0 1 0 3.501-.001 1.75 1.75 0 0 0-3.501.001Z"/></svg>