@skyscanner/backpack-web 21.0.2 → 22.0.0-beta.1

package/bpk-component-price/src/BpkPrice.js

@@ -1,145 +1,93 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-/* @flow strict */
+"use strict";
 
-import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
-
-import STYLES from './BpkPrice.module.scss';
-import { SIZES, ALIGNS } from './common-types';
-
-type Props = {
-  price: string,
-  size: $Values<typeof SIZES>,
-  align: $Values<typeof ALIGNS>,
-  className: ?string,
-  leadingText: ?string,
-  trailingText: ?string,
-  previousPrice: ?string,
-};
-
-const getClassName = cssModules(STYLES);
-
-const BpkPrice = (props: Props) => {
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _bpkComponentText = _interopRequireWildcard(require("../../bpk-component-text"));
+var _BpkPriceModule = _interopRequireDefault(require("./BpkPrice.module.css"));
+var _commonTypes = require("./common-types");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["align", "className", "leadingText", "previousPrice", "price", "size", "trailingText"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const getClassName = (0, _bpkReactUtils.cssModules)(_BpkPriceModule.default);
+const BpkPrice = props => {
   const {
-    align,
-    className,
-    leadingText,
-    previousPrice,
-    price,
-    size,
-    trailingText,
-    ...rest
-  } = props;
-
-  const isSmall = size === SIZES.small;
-  const isAlignRight = align === ALIGNS.right;
-
-  return (
-    <div
-      className={getClassName(
-        'bpk-price',
-        isAlignRight && 'bpk-price--right',
-        className,
-      )}
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      {...rest}
-    >
-      <div
-        className={getClassName(
-          previousPrice && 'bpk-price__leading',
-          isAlignRight && 'bpk-price__leading--right',
-        )}
-      >
-        {previousPrice && (
-          <BpkText
-            className={getClassName('bpk-price__previous-price')}
-            textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
-            tagName="span"
-          >
-            {previousPrice}
-          </BpkText>
-        )}
-        {previousPrice && (
-          <BpkText
-            textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
-            tagName="span"
-            className={getClassName('bpk-price__separator')}
-          >
-            &#67871;
-          </BpkText>
-        )}
-
-        {leadingText && (
-          <BpkText
-            textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
-            tagName="span"
-          >
-            {leadingText}
-          </BpkText>
-        )}
-      </div>
-      <div
-        className={isAlignRight && getClassName('bpk-price__column-container')}
-      >
-        <BpkText
-          textStyle={isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl}
-          className={getClassName(
-            'bpk-price__price',
-            !isAlignRight && 'bpk-price__spacing',
-          )}
-          tagName="span"
-        >
-          {price}
-        </BpkText>
-        {trailingText && (
-          <BpkText
-            textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
-            tagName="span"
-            className={getClassName('bpk-price__trailing')}
-          >
-            {trailingText}
-          </BpkText>
-        )}
-      </div>
-    </div>
-  );
+      align,
+      className,
+      leadingText,
+      previousPrice,
+      price,
+      size,
+      trailingText
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  const isSmall = size === _commonTypes.SIZES.small;
+  const isAlignRight = align === _commonTypes.ALIGNS.right;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
+    className: getClassName('bpk-price', isAlignRight && 'bpk-price--right', className)
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+  }, rest), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: getClassName(previousPrice && 'bpk-price__leading', isAlignRight && 'bpk-price__leading--right'),
+      children: [previousPrice && /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentText.default, {
+        className: getClassName('bpk-price__previous-price'),
+        textStyle: isSmall ? _bpkComponentText.TEXT_STYLES.xs : _bpkComponentText.TEXT_STYLES.sm,
+        tagName: "span",
+        children: previousPrice
+      }), previousPrice && leadingText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentText.default, {
+        textStyle: isSmall ? _bpkComponentText.TEXT_STYLES.xs : _bpkComponentText.TEXT_STYLES.sm,
+        tagName: "span",
+        className: getClassName('bpk-price__separator'),
+        children: "\uD802\uDD1F"
+      }), leadingText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentText.default, {
+        textStyle: isSmall ? _bpkComponentText.TEXT_STYLES.xs : _bpkComponentText.TEXT_STYLES.sm,
+        tagName: "span",
+        children: leadingText
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: isAlignRight && getClassName('bpk-price__column-container'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentText.default, {
+        textStyle: isSmall ? _bpkComponentText.TEXT_STYLES.heading4 : _bpkComponentText.TEXT_STYLES.xxl,
+        className: getClassName('bpk-price__price', !isAlignRight && 'bpk-price__spacing'),
+        tagName: "span",
+        children: price
+      }), trailingText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentText.default, {
+        textStyle: isSmall ? _bpkComponentText.TEXT_STYLES.xs : _bpkComponentText.TEXT_STYLES.sm,
+        tagName: "span",
+        className: getClassName('bpk-price__trailing'),
+        children: trailingText
+      })]
+    })]
+  }));
 };
-
 BpkPrice.propTypes = {
-  price: PropTypes.string.isRequired,
-  size: PropTypes.oneOf(Object.keys(SIZES)),
-  align: PropTypes.oneOf(Object.keys(ALIGNS)),
-  className: PropTypes.string,
-  leadingText: PropTypes.string,
-  trailingText: PropTypes.string,
-  previousPrice: PropTypes.string,
+  price: _propTypes.default.string.isRequired,
+  size: _propTypes.default.oneOf(Object.keys(_commonTypes.SIZES)),
+  align: _propTypes.default.oneOf(Object.keys(_commonTypes.ALIGNS)),
+  className: _propTypes.default.string,
+  leadingText: _propTypes.default.string,
+  trailingText: _propTypes.default.string,
+  previousPrice: _propTypes.default.string
 };
-
 BpkPrice.defaultProps = {
-  size: SIZES.small,
-  align: ALIGNS.left,
+  size: _commonTypes.SIZES.small,
+  align: _commonTypes.ALIGNS.left,
   className: null,
   leadingText: null,
   trailingText: null,
-  previousPrice: null,
+  previousPrice: null
 };
-
-export default BpkPrice;
+var _default = BpkPrice;
+exports.default = _default;

package/bpk-component-price/src/BpkPrice.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-price{display:flex;flex-direction:column;color:#545860}.bpk-price--right{text-align:right}html[dir='rtl'] .bpk-price--right{text-align:left}.bpk-price__leading{display:flex;flex-direction:row}.bpk-price__leading--right{flex-direction:row-reverse}.bpk-price__previous-price{text-decoration-line:line-through}.bpk-price__separator{margin:0 0.25rem}.bpk-price__column-container{display:flex;flex-direction:column}.bpk-price__price{color:#161616;word-break:break-all}.bpk-price__spacing::after{content:'';margin-right:0.25rem}html[dir='rtl'] .bpk-price__spacing::after{margin-right:unset;margin-left:0.25rem}.bpk-price__trailing{white-space:nowrap}

package/bpk-component-price/src/common-types.js

@@ -1,3 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZES = exports.ALIGNS = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -14,16 +20,13 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-
-/* @flow strict */
-
-export const SIZES = {
+ */const SIZES = {
   small: 'small',
-  large: 'large',
+  large: 'large'
 };
-
-export const ALIGNS = {
+exports.SIZES = SIZES;
+const ALIGNS = {
   left: 'left',
-  right: 'right',
+  right: 'right'
 };
+exports.ALIGNS = ALIGNS;

package/bpk-component-progress/index.js

@@ -1,3 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "themeAttributes", {
+  enumerable: true,
+  get: function () {
+    return _themeAttributes.default;
+  }
+});
+var _BpkProgress = _interopRequireDefault(require("./src/BpkProgress"));
+var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,11 +30,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-/* @flow strict */
-
-import BpkProgress from './src/BpkProgress';
-import themeAttributes from './src/themeAttributes';
-
-export default BpkProgress;
-export { themeAttributes };
+var _default = _BpkProgress.default;
+exports.default = _default;

package/bpk-component-progress/src/BpkProgress.js

@@ -1,158 +1,125 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import { Component } from 'react';
-import clamp from 'lodash.clamp';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkProgress.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const isTransitionEndSupported = () =>
-  !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
-
-const renderSteps = (numberOfSteps) => {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _lodash = _interopRequireDefault(require("lodash.clamp"));
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _BpkProgressModule = _interopRequireDefault(require("./BpkProgress.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className", "getValueText", "max", "min", "small", "stepped", "value"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+const getClassName = (0, _bpkReactUtils.cssModules)(_BpkProgressModule.default);
+const isTransitionEndSupported = () => !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
+const renderSteps = numberOfSteps => {
   const steps = [];
   for (let i = 1; i <= numberOfSteps; i += 1) {
     const left = `${100 * (i / (numberOfSteps + 1))}%`;
-    steps.push(
-      <div
-        key={`bpk-progress__step-${i}`}
-        className={getClassName('bpk-progress__step')}
-        style={{ left }}
-      />,
-    );
+    steps.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: getClassName('bpk-progress__step'),
+      style: {
+        left
+      }
+    }, `bpk-progress__step-${i}`));
   }
   return steps;
 };
-
-type Props = {
-  max: number,
-  min: number,
-  value: number,
-  stepped: boolean,
-  small: boolean,
-  className: ?string,
-  onComplete: ?() => mixed,
-  onCompleteTransitionEnd: ?() => mixed,
-  getValueText: ?(number, number, number) => mixed,
-};
-
-class BpkProgress extends Component<Props> {
-  static propTypes = {
-    max: PropTypes.number.isRequired,
-    min: PropTypes.number.isRequired,
-    value: PropTypes.number.isRequired,
-    stepped: PropTypes.bool,
-    small: PropTypes.bool,
-    className: PropTypes.string,
-    onComplete: PropTypes.func,
-    onCompleteTransitionEnd: PropTypes.func,
-    getValueText: PropTypes.func,
-  };
-
-  static defaultProps = {
-    className: null,
-    stepped: false,
-    small: false,
-    onComplete: () => null,
-    onCompleteTransitionEnd: () => null,
-    getValueText: null,
-  };
-
-  componentDidUpdate(previousProps: Props) {
-    const { max, value } = this.props;
-    if (
-      value >= max &&
-      value !== previousProps.value &&
-      this.props.onComplete
-    ) {
+class BpkProgress extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "handleCompleteTransitionEnd", () => {
+      const {
+        max,
+        onCompleteTransitionEnd,
+        value
+      } = this.props;
+      if (value >= max && onCompleteTransitionEnd) {
+        onCompleteTransitionEnd();
+      }
+    });
+  }
+  componentDidUpdate(previousProps) {
+    const {
+      max,
+      value
+    } = this.props;
+    if (value >= max && value !== previousProps.value && this.props.onComplete) {
       this.props.onComplete();
-
       if (!isTransitionEndSupported() && this.props.onCompleteTransitionEnd) {
         this.props.onCompleteTransitionEnd();
       }
     }
   }
-
-  handleCompleteTransitionEnd = () => {
-    const { max, onCompleteTransitionEnd, value } = this.props;
-    if (value >= max && onCompleteTransitionEnd) {
-      onCompleteTransitionEnd();
-    }
-  };
-
   render() {
-    const {
-      className,
-      getValueText,
-      max,
-      min,
-      small,
-      stepped,
-      value,
-      ...rest
-    } = this.props;
-
-    const classNames = getClassName(
-      'bpk-progress',
-      className,
-      small && 'bpk-progress--small',
-    );
-
-    const valueClassName = getClassName(
-      'bpk-progress__value',
-      stepped && 'bpk-progress__value--stepped',
-    );
-
-    const adjustedValue = clamp(value, min, max);
+    const _this$props = this.props,
+      {
+        className,
+        getValueText,
+        max,
+        min,
+        small,
+        stepped,
+        value
+      } = _this$props,
+      rest = _objectWithoutProperties(_this$props, _excluded);
+    const classNames = getClassName('bpk-progress', className, small && 'bpk-progress--small');
+    const valueClassName = getClassName('bpk-progress__value', stepped && 'bpk-progress__value--stepped');
+    const adjustedValue = (0, _lodash.default)(value, min, max);
     const percentage = 100 * (adjustedValue / (max - min));
     const numberOfSteps = stepped ? max - min - 1 : 0;
-
     delete rest.onComplete;
     delete rest.onCompleteTransitionEnd;
-
     return (
+      /*#__PURE__*/
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      <div
-        className={classNames}
-        role="progressbar"
-        aria-valuetext={getValueText ? getValueText(value, min, max) : null}
-        aria-valuenow={value}
-        aria-valuemin={min}
-        aria-valuemax={max}
-        tabIndex="0"
-        {...rest}
-      >
-        <div
-          className={valueClassName}
-          style={{ width: `${percentage}%` }}
-          onTransitionEnd={this.handleCompleteTransitionEnd}
-        />
-        {renderSteps(numberOfSteps)}
-      </div>
+      (0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
+        className: classNames,
+        role: "progressbar",
+        "aria-valuetext": getValueText ? getValueText(value, min, max) : null,
+        "aria-valuenow": value,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        tabIndex: "0"
+      }, rest), {}, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: valueClassName,
+          style: {
+            width: `${percentage}%`
+          },
+          onTransitionEnd: this.handleCompleteTransitionEnd
+        }), renderSteps(numberOfSteps)]
+      }))
     );
   }
 }
-
-export default BpkProgress;
+_defineProperty(BpkProgress, "propTypes", {
+  max: _propTypes.default.number.isRequired,
+  min: _propTypes.default.number.isRequired,
+  value: _propTypes.default.number.isRequired,
+  stepped: _propTypes.default.bool,
+  small: _propTypes.default.bool,
+  className: _propTypes.default.string,
+  onComplete: _propTypes.default.func,
+  onCompleteTransitionEnd: _propTypes.default.func,
+  getValueText: _propTypes.default.func
+});
+_defineProperty(BpkProgress, "defaultProps", {
+  className: null,
+  stepped: false,
+  small: false,
+  onComplete: () => null,
+  onCompleteTransitionEnd: () => null,
+  getValueText: null
+});
+var _default = BpkProgress;
+exports.default = _default;

package/bpk-component-progress/src/BpkProgress.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-progress{position:relative;height:1rem;border-radius:1.125rem;background-color:#dddde5;overflow:hidden}.bpk-progress--small{height:0.5rem;border-radius:.25rem}.bpk-progress__value{position:absolute;top:0;right:0;bottom:0;left:0;content:' ';width:0%;transition:width 400ms ease-in-out;border-radius:.375rem;background-color:#0770e3;background-color:var(--bpk-progress-bar-fill-color, #0770e3)}.bpk-progress__value--stepped{border-radius:0}.bpk-progress__step{position:absolute;top:0;bottom:0;width:.125rem;background:#fff}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-progress{position:relative;height:1rem;border-radius:.75rem;background-color:#e0e3e5;overflow:hidden}.bpk-progress--small{height:0.5rem;border-radius:.25rem}.bpk-progress__value{position:absolute;top:0;right:0;bottom:0;left:0;content:' ';width:0%;transition:width 400ms ease-in-out;border-radius:.5rem;background-color:#0062e3;background-color:var(--bpk-progress-bar-fill-color, #0062e3)}.bpk-progress__value--stepped{border-radius:0}.bpk-progress__step{position:absolute;top:0;bottom:0;width:.125rem;background:#fff}

package/bpk-component-progress/src/themeAttributes.js

@@ -1,3 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,7 +21,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-/* @flow strict */
-
-export default ['progressBarFillColor'];
+var _default = ['progressBarFillColor'];
+exports.default = _default;

package/bpk-component-radio/index.js

@@ -1,3 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "themeAttributes", {
+  enumerable: true,
+  get: function () {
+    return _themeAttributes.default;
+  }
+});
+var _BpkRadio = _interopRequireDefault(require("./src/BpkRadio"));
+var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,11 +30,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-/* @flow strict */
-
-import BpkRadio from './src/BpkRadio';
-import themeAttributes from './src/themeAttributes';
-
-export default BpkRadio;
-export { themeAttributes };
+var _default = _BpkRadio.default;
+exports.default = _default;