@commercetools-uikit/progress-bar 0.0.0-canary-20240206161325

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) commercetools GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,51 @@
+<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
+<!-- This file is created by the `yarn generate-readme` script. -->
+
+# ProgressBar
+
+## Description
+
+A progress bar component used to visualize the progression of an extended operation
+
+## Installation
+
+```
+yarn add @commercetools-uikit/progress-bar
+```
+
+```
+npm --save install @commercetools-uikit/progress-bar
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react
+```
+
+```
+npm --save install react
+```
+
+## Usage
+
+```jsx
+import ProgressBar from '@commercetools-uikit/progress-bar';
+
+const Example = () => <ProgressBar label={`${50}% completed`} progress={50} />;
+
+export default Example;
+```
+
+## Properties
+
+| Props           | Type                                                                                                                          | Required | Default   | Description                                                                                          |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------- | :------: | --------- | ---------------------------------------------------------------------------------------------------- |
+| `progress`      | `number`                                                                                                                      |          | `0`       | The percentage of the task completion to fill the bar.                                               |
+| `label`         | `union`<br/>Possible values:<br/>`, string, ReactElement, (MessageDescriptor & { values?: Record<string, ReactNode> }), null` |          | `null`    | The text to display alongside the bar.                                                               |
+| `labelPosition` | `union`<br/>Possible values:<br/>`'top' , 'bottom' , 'left' , 'right'`                                                        |          | `'top'`   | Location of the text in relation to the bar.                                                         |
+| `labelWidth`    | `union`<br/>Possible values:<br/>`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'`                                  |          | `'scale'` | The scale of the width for the label, uses values available in the Constraints.Horizontal component. |
+| `isInverted`    | `boolean`                                                                                                                     |          | `false`   | Specifies the use of light colors(default) or dark colors.                                           |
+| `isAnimated`    | `boolean`                                                                                                                     |          | `true`    | Specifies whether the inner bar should have the styles animated.                                     |
+| `height`        | `union`<br/>Possible values:<br/>`'10' , '20'`                                                                                |          | `'20'`    | The scale of the height for the bar, also affects the styles of the label.                           |
+| `barWidth`      | `union`<br/>Possible values:<br/>`4 , 5 , 6 , 7 , 8 , 9 , 10 , 11 , 12 , 13 , 14 , 15 , 16 , 'scale'`                         |          | `6`       | The scale of the width for the label, uses values available in the Constraints.Horizontal component. |

package/dist/commercetools-uikit-progress-bar.cjs.d.ts

@@ -0,0 +1,3 @@
+export * from "./declarations/src/index";
+export { default } from "./declarations/src/index";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tbWVyY2V0b29scy11aWtpdC1wcm9ncmVzcy1iYXIuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuL2RlY2xhcmF0aW9ucy9zcmMvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9

package/dist/commercetools-uikit-progress-bar.cjs.dev.js

@@ -0,0 +1,172 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _pt = require('prop-types');
+var reactIntl = require('react-intl');
+var utils = require('@commercetools-uikit/utils');
+var Constraints = require('@commercetools-uikit/constraints');
+var SpacingsInline = require('@commercetools-uikit/spacings-inline');
+var SpacingsStack = require('@commercetools-uikit/spacings-stack');
+var Text = require('@commercetools-uikit/text');
+var isNil = require('lodash/isNil');
+var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
+var react = require('@emotion/react');
+var designSystem = require('@commercetools-uikit/design-system');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var _pt__default = /*#__PURE__*/_interopDefault(_pt);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+var SpacingsInline__default = /*#__PURE__*/_interopDefault(SpacingsInline);
+var SpacingsStack__default = /*#__PURE__*/_interopDefault(SpacingsStack);
+var Text__default = /*#__PURE__*/_interopDefault(Text);
+var isNil__default = /*#__PURE__*/_interopDefault(isNil);
+
+var _templateObject;
+const heightPerScale = {
+  '10': designSystem.designTokens.spacing25,
+  '20': designSystem.designTokens.spacing40
+};
+const progressPulse = react.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    background-position: 100% 0;\n  }\n  100% {\n    background-position: -100% 0;\n  }\n"])));
+const getLabelStyles = props => {
+  var _props$height;
+  return /*#__PURE__*/react.css("min-height:", heightPerScale[(_props$height = props.height) !== null && _props$height !== void 0 ? _props$height : defaultProps.height], ";max-width:", Constraints__default["default"].getMaxPropTokenValue(props.labelWidth || defaultProps.labelWidth), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getLabelStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCUSIsImZpbGUiOiJwcm9ncmVzcy1iYXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgQ29uc3RyYWludHMgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvY29uc3RyYWludHMnO1xuaW1wb3J0IHsgZGVmYXVsdFByb3BzLCB0eXBlIFRQcm9ncmVzc0JhclByb3BzIH0gZnJvbSAnLi9wcm9ncmVzcy1iYXInO1xuXG5leHBvcnQgY29uc3QgaGVpZ2h0UGVyU2NhbGUgPSB7XG4gICcxMCc6IGRlc2lnblRva2Vucy5zcGFjaW5nMjUsXG4gICcyMCc6IGRlc2lnblRva2Vucy5zcGFjaW5nNDAsXG59O1xuXG5jb25zdCBwcm9ncmVzc1B1bHNlID0ga2V5ZnJhbWVzYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogMTAwJSAwO1xuICB9XG4gIDEwMCUge1xuICAgIGJhY2tncm91bmQtcG9zaXRpb246IC0xMDAlIDA7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRMYWJlbFN0eWxlcyA9IChcbiAgcHJvcHM6IFRQcm9ncmVzc0JhclByb3BzICYgeyB0ZXh0QWxpZ25tZW50OiBzdHJpbmcgfVxuKSA9PiBjc3NgXG4gIG1pbi1oZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRQcm9wcy5oZWlnaHQhXX07XG4gIG1heC13aWR0aDogJHtDb25zdHJhaW50cy5nZXRNYXhQcm9wVG9rZW5WYWx1ZShcbiAgICBwcm9wcy5sYWJlbFdpZHRoIHx8IGRlZmF1bHRQcm9wcy5sYWJlbFdpZHRoIVxuICApfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRCYWNrZ3JvdW5kQmFyU3R5bGVzID0gKHByb3BzOiBUUHJvZ3Jlc3NCYXJQcm9wcykgPT4gY3NzYFxuICB3aWR0aDogMTAwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5pc0ludmVydGVkXG4gICAgPyAncmdiYSgyNTUsIDI1NSwgMjU1LCAwLjQpJ1xuICAgIDogZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDkwfTtcbiAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ0x9O1xuICBoZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRQcm9wcy5oZWlnaHQhXX07XG4gIG92ZXJmbG93OiBoaWRkZW47XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0Rm9yZWdyb3VuZEJhclN0eWxlcyA9IChwcm9wczogVFByb2dyZXNzQmFyUHJvcHMpID0+IGNzc2BcbiAgd2lkdGg6ICR7cHJvcHMucHJvZ3Jlc3N9JTtcbiAgdHJhbnNpdGlvbjogd2lkdGggNTAwbXMgZWFzZS1pbi1vdXQ7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBoZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRQcm9wcy5oZWlnaHQhXX07XG4gIGJhY2tncm91bmQ6ICR7cHJvcHMuaXNJbnZlcnRlZFxuICAgID8gZGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZVxuICAgIDogYGxpbmVhci1ncmFkaWVudChcbiAgICAgIHRvIHJpZ2h0LFxuICAgICAgIzAwRTVDQixcbiAgICAgICR7ZGVzaWduVG9rZW5zLmNvbG9yUHJpbWFyeTI1fSxcbiAgICAgICMwMEU1Q0JcbiAgICApYH07XG4gIGJhY2tncm91bmQtc2l6ZTogMjAwJSAxMDAlO1xuICBhbmltYXRpb246ICR7cHJvcHMuaXNBbmltYXRlZCAmJiAhcHJvcHMuaXNJbnZlcnRlZFxuICAgID8gY3NzYFxuICAgICAgICAke3Byb2dyZXNzUHVsc2V9IDJzIGxpbmVhciBpbmZpbml0ZVxuICAgICAgYFxuICAgIDogJ25vbmUnfTtcbiAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ0x9O1xuYDtcbiJdfQ== */");
+};
+const getBackgroundBarStyles = props => {
+  var _props$height2;
+  return /*#__PURE__*/react.css("width:100%;background-color:", props.isInverted ? 'rgba(255, 255, 255, 0.4)' : designSystem.designTokens.colorNeutral90, ";border-radius:", designSystem.designTokens.spacingL, ";height:", heightPerScale[(_props$height2 = props.height) !== null && _props$height2 !== void 0 ? _props$height2 : defaultProps.height], ";overflow:hidden;" + (process.env.NODE_ENV === "production" ? "" : ";label:getBackgroundBarStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRCdUUiLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IENvbnN0cmFpbnRzIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2NvbnN0cmFpbnRzJztcbmltcG9ydCB7IGRlZmF1bHRQcm9wcywgdHlwZSBUUHJvZ3Jlc3NCYXJQcm9wcyB9IGZyb20gJy4vcHJvZ3Jlc3MtYmFyJztcblxuZXhwb3J0IGNvbnN0IGhlaWdodFBlclNjYWxlID0ge1xuICAnMTAnOiBkZXNpZ25Ub2tlbnMuc3BhY2luZzI1LFxuICAnMjAnOiBkZXNpZ25Ub2tlbnMuc3BhY2luZzQwLFxufTtcblxuY29uc3QgcHJvZ3Jlc3NQdWxzZSA9IGtleWZyYW1lc2BcbiAgMCUge1xuICAgIGJhY2tncm91bmQtcG9zaXRpb246IDEwMCUgMDtcbiAgfVxuICAxMDAlIHtcbiAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiAtMTAwJSAwO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0TGFiZWxTdHlsZXMgPSAoXG4gIHByb3BzOiBUUHJvZ3Jlc3NCYXJQcm9wcyAmIHsgdGV4dEFsaWdubWVudDogc3RyaW5nIH1cbikgPT4gY3NzYFxuICBtaW4taGVpZ2h0OiAke2hlaWdodFBlclNjYWxlW3Byb3BzLmhlaWdodCA/PyBkZWZhdWx0UHJvcHMuaGVpZ2h0IV19O1xuICBtYXgtd2lkdGg6ICR7Q29uc3RyYWludHMuZ2V0TWF4UHJvcFRva2VuVmFsdWUoXG4gICAgcHJvcHMubGFiZWxXaWR0aCB8fCBkZWZhdWx0UHJvcHMubGFiZWxXaWR0aCFcbiAgKX07XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0QmFja2dyb3VuZEJhclN0eWxlcyA9IChwcm9wczogVFByb2dyZXNzQmFyUHJvcHMpID0+IGNzc2BcbiAgd2lkdGg6IDEwMCU7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMuaXNJbnZlcnRlZFxuICAgID8gJ3JnYmEoMjU1LCAyNTUsIDI1NSwgMC40KSdcbiAgICA6IGRlc2lnblRva2Vucy5jb2xvck5ldXRyYWw5MH07XG4gIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmdMfTtcbiAgaGVpZ2h0OiAke2hlaWdodFBlclNjYWxlW3Byb3BzLmhlaWdodCA/PyBkZWZhdWx0UHJvcHMuaGVpZ2h0IV19O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuYDtcblxuZXhwb3J0IGNvbnN0IGdldEZvcmVncm91bmRCYXJTdHlsZXMgPSAocHJvcHM6IFRQcm9ncmVzc0JhclByb3BzKSA9PiBjc3NgXG4gIHdpZHRoOiAke3Byb3BzLnByb2dyZXNzfSU7XG4gIHRyYW5zaXRpb246IHdpZHRoIDUwMG1zIGVhc2UtaW4tb3V0O1xuICBkaXNwbGF5OiBibG9jaztcbiAgaGVpZ2h0OiAke2hlaWdodFBlclNjYWxlW3Byb3BzLmhlaWdodCA/PyBkZWZhdWx0UHJvcHMuaGVpZ2h0IV19O1xuICBiYWNrZ3JvdW5kOiAke3Byb3BzLmlzSW52ZXJ0ZWRcbiAgICA/IGRlc2lnblRva2Vucy5jb2xvclN1cmZhY2VcbiAgICA6IGBsaW5lYXItZ3JhZGllbnQoXG4gICAgICB0byByaWdodCxcbiAgICAgICMwMEU1Q0IsXG4gICAgICAke2Rlc2lnblRva2Vucy5jb2xvclByaW1hcnkyNX0sXG4gICAgICAjMDBFNUNCXG4gICAgKWB9O1xuICBiYWNrZ3JvdW5kLXNpemU6IDIwMCUgMTAwJTtcbiAgYW5pbWF0aW9uOiAke3Byb3BzLmlzQW5pbWF0ZWQgJiYgIXByb3BzLmlzSW52ZXJ0ZWRcbiAgICA/IGNzc2BcbiAgICAgICAgJHtwcm9ncmVzc1B1bHNlfSAycyBsaW5lYXIgaW5maW5pdGVcbiAgICAgIGBcbiAgICA6ICdub25lJ307XG4gIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmdMfTtcbmA7XG4iXX0= */");
+};
+const getForegroundBarStyles = props => {
+  var _props$height3;
+  return /*#__PURE__*/react.css("width:", props.progress, "%;transition:width 500ms ease-in-out;display:block;height:", heightPerScale[(_props$height3 = props.height) !== null && _props$height3 !== void 0 ? _props$height3 : defaultProps.height], ";background:", props.isInverted ? designSystem.designTokens.colorSurface : "linear-gradient(\n      to right,\n      #00E5CB,\n      ".concat(designSystem.designTokens.colorPrimary25, ",\n      #00E5CB\n    )"), ";background-size:200% 100%;animation:", props.isAnimated && !props.isInverted ? /*#__PURE__*/react.css(progressPulse, " 2s linear infinite;" + (process.env.NODE_ENV === "production" ? "" : ";label:getForegroundBarStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFEUyIsImZpbGUiOiJwcm9ncmVzcy1iYXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgQ29uc3RyYWludHMgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvY29uc3RyYWludHMnO1xuaW1wb3J0IHsgZGVmYXVsdFByb3BzLCB0eXBlIFRQcm9ncmVzc0JhclByb3BzIH0gZnJvbSAnLi9wcm9ncmVzcy1iYXInO1xuXG5leHBvcnQgY29uc3QgaGVpZ2h0UGVyU2NhbGUgPSB7XG4gICcxMCc6IGRlc2lnblRva2Vucy5zcGFjaW5nMjUsXG4gICcyMCc6IGRlc2lnblRva2Vucy5zcGFjaW5nNDAsXG59O1xuXG5jb25zdCBwcm9ncmVzc1B1bHNlID0ga2V5ZnJhbWVzYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogMTAwJSAwO1xuICB9XG4gIDEwMCUge1xuICAgIGJhY2tncm91bmQtcG9zaXRpb246IC0xMDAlIDA7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRMYWJlbFN0eWxlcyA9IChcbiAgcHJvcHM6IFRQcm9ncmVzc0JhclByb3BzICYgeyB0ZXh0QWxpZ25tZW50OiBzdHJpbmcgfVxuKSA9PiBjc3NgXG4gIG1pbi1oZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRQcm9wcy5oZWlnaHQhXX07XG4gIG1heC13aWR0aDogJHtDb25zdHJhaW50cy5nZXRNYXhQcm9wVG9rZW5WYWx1ZShcbiAgICBwcm9wcy5sYWJlbFdpZHRoIHx8IGRlZmF1bHRQcm9wcy5sYWJlbFdpZHRoIVxuICApfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRCYWNrZ3JvdW5kQmFyU3R5bGVzID0gKHByb3BzOiBUUHJvZ3Jlc3NCYXJQcm9wcykgPT4gY3NzYFxuICB3aWR0aDogMTAwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5pc0ludmVydGVkXG4gICAgPyAncmdiYSgyNTUsIDI1NSwgMjU1LCAwLjQpJ1xuICAgIDogZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDkwfTtcbiAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ0x9O1xuICBoZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRQcm9wcy5oZWlnaHQhXX07XG4gIG92ZXJmbG93OiBoaWRkZW47XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0Rm9yZWdyb3VuZEJhclN0eWxlcyA9IChwcm9wczogVFByb2dyZXNzQmFyUHJvcHMpID0+IGNzc2BcbiAgd2lkdGg6ICR7cHJvcHMucHJvZ3Jlc3N9JTtcbiAgdHJhbnNpdGlvbjogd2lkdGggNTAwbXMgZWFzZS1pbi1vdXQ7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBoZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRQcm9wcy5oZWlnaHQhXX07XG4gIGJhY2tncm91bmQ6ICR7cHJvcHMuaXNJbnZlcnRlZFxuICAgID8gZGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZVxuICAgIDogYGxpbmVhci1ncmFkaWVudChcbiAgICAgIHRvIHJpZ2h0LFxuICAgICAgIzAwRTVDQixcbiAgICAgICR7ZGVzaWduVG9rZW5zLmNvbG9yUHJpbWFyeTI1fSxcbiAgICAgICMwMEU1Q0JcbiAgICApYH07XG4gIGJhY2tncm91bmQtc2l6ZTogMjAwJSAxMDAlO1xuICBhbmltYXRpb246ICR7cHJvcHMuaXNBbmltYXRlZCAmJiAhcHJvcHMuaXNJbnZlcnRlZFxuICAgID8gY3NzYFxuICAgICAgICAke3Byb2dyZXNzUHVsc2V9IDJzIGxpbmVhciBpbmZpbml0ZVxuICAgICAgYFxuICAgIDogJ25vbmUnfTtcbiAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ0x9O1xuYDtcbiJdfQ== */") : 'none', ";border-radius:", designSystem.designTokens.spacingL, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getForegroundBarStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNDdUUiLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IENvbnN0cmFpbnRzIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2NvbnN0cmFpbnRzJztcbmltcG9ydCB7IGRlZmF1bHRQcm9wcywgdHlwZSBUUHJvZ3Jlc3NCYXJQcm9wcyB9IGZyb20gJy4vcHJvZ3Jlc3MtYmFyJztcblxuZXhwb3J0IGNvbnN0IGhlaWdodFBlclNjYWxlID0ge1xuICAnMTAnOiBkZXNpZ25Ub2tlbnMuc3BhY2luZzI1LFxuICAnMjAnOiBkZXNpZ25Ub2tlbnMuc3BhY2luZzQwLFxufTtcblxuY29uc3QgcHJvZ3Jlc3NQdWxzZSA9IGtleWZyYW1lc2BcbiAgMCUge1xuICAgIGJhY2tncm91bmQtcG9zaXRpb246IDEwMCUgMDtcbiAgfVxuICAxMDAlIHtcbiAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiAtMTAwJSAwO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0TGFiZWxTdHlsZXMgPSAoXG4gIHByb3BzOiBUUHJvZ3Jlc3NCYXJQcm9wcyAmIHsgdGV4dEFsaWdubWVudDogc3RyaW5nIH1cbikgPT4gY3NzYFxuICBtaW4taGVpZ2h0OiAke2hlaWdodFBlclNjYWxlW3Byb3BzLmhlaWdodCA/PyBkZWZhdWx0UHJvcHMuaGVpZ2h0IV19O1xuICBtYXgtd2lkdGg6ICR7Q29uc3RyYWludHMuZ2V0TWF4UHJvcFRva2VuVmFsdWUoXG4gICAgcHJvcHMubGFiZWxXaWR0aCB8fCBkZWZhdWx0UHJvcHMubGFiZWxXaWR0aCFcbiAgKX07XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0QmFja2dyb3VuZEJhclN0eWxlcyA9IChwcm9wczogVFByb2dyZXNzQmFyUHJvcHMpID0+IGNzc2BcbiAgd2lkdGg6IDEwMCU7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMuaXNJbnZlcnRlZFxuICAgID8gJ3JnYmEoMjU1LCAyNTUsIDI1NSwgMC40KSdcbiAgICA6IGRlc2lnblRva2Vucy5jb2xvck5ldXRyYWw5MH07XG4gIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmdMfTtcbiAgaGVpZ2h0OiAke2hlaWdodFBlclNjYWxlW3Byb3BzLmhlaWdodCA/PyBkZWZhdWx0UHJvcHMuaGVpZ2h0IV19O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuYDtcblxuZXhwb3J0IGNvbnN0IGdldEZvcmVncm91bmRCYXJTdHlsZXMgPSAocHJvcHM6IFRQcm9ncmVzc0JhclByb3BzKSA9PiBjc3NgXG4gIHdpZHRoOiAke3Byb3BzLnByb2dyZXNzfSU7XG4gIHRyYW5zaXRpb246IHdpZHRoIDUwMG1zIGVhc2UtaW4tb3V0O1xuICBkaXNwbGF5OiBibG9jaztcbiAgaGVpZ2h0OiAke2hlaWdodFBlclNjYWxlW3Byb3BzLmhlaWdodCA/PyBkZWZhdWx0UHJvcHMuaGVpZ2h0IV19O1xuICBiYWNrZ3JvdW5kOiAke3Byb3BzLmlzSW52ZXJ0ZWRcbiAgICA/IGRlc2lnblRva2Vucy5jb2xvclN1cmZhY2VcbiAgICA6IGBsaW5lYXItZ3JhZGllbnQoXG4gICAgICB0byByaWdodCxcbiAgICAgICMwMEU1Q0IsXG4gICAgICAke2Rlc2lnblRva2Vucy5jb2xvclByaW1hcnkyNX0sXG4gICAgICAjMDBFNUNCXG4gICAgKWB9O1xuICBiYWNrZ3JvdW5kLXNpemU6IDIwMCUgMTAwJTtcbiAgYW5pbWF0aW9uOiAke3Byb3BzLmlzQW5pbWF0ZWQgJiYgIXByb3BzLmlzSW52ZXJ0ZWRcbiAgICA/IGNzc2BcbiAgICAgICAgJHtwcm9ncmVzc1B1bHNlfSAycyBsaW5lYXIgaW5maW5pdGVcbiAgICAgIGBcbiAgICA6ICdub25lJ307XG4gIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmdMfTtcbmA7XG4iXX0= */");
+};
+
+function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const ProgressBarLabel = props => {
+  if (isNil__default["default"](props.label)) return null;
+  const TextComponent = props.height !== '10' ? Text__default["default"].Body : Text__default["default"].Detail;
+  const textProps = {
+    tone: props.isInverted ? 'inverted' : undefined,
+    as: props.height !== '10' ? 'span' : undefined,
+    fontWegith: props.height !== '10' ? 'medium' : undefined,
+    children: props.label.hasOwnProperty('defaultMessage') ? jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, props.label)) : props.label
+  };
+  return jsxRuntime.jsx("div", {
+    css: getLabelStyles(props),
+    children: jsxRuntime.jsx(TextComponent, _objectSpread({}, textProps))
+  });
+};
+const Bar = props => {
+  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
+    max: props.barWidth,
+    children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+      css: getBackgroundBarStyles(props),
+      role: "progressbar",
+      "aria-valuenow": props.progress,
+      "aria-label": "Progress bar"
+    }, utils.filterAriaAttributes(props)), {}, {
+      children: jsxRuntime.jsx("div", {
+        css: getForegroundBarStyles(props)
+      })
+    }))
+  });
+};
+const layoutConfigMapping = {
+  top: {
+    textAlignment: 'center',
+    wrappingComponent: SpacingsStack__default["default"]
+  },
+  bottom: {
+    textAlignment: 'center',
+    wrappingComponent: SpacingsStack__default["default"]
+  },
+  left: {
+    textAlignment: 'right',
+    wrappingComponent: SpacingsInline__default["default"]
+  },
+  right: {
+    textAlignment: 'left',
+    wrappingComponent: SpacingsInline__default["default"]
+  }
+};
+const ProgressBar = props => {
+  const layoutConfig = layoutConfigMapping[props.labelPosition || 'top'];
+  const BarWithProps = jsxRuntime.jsx(Bar, {
+    progress: props.progress,
+    barWidth: props.barWidth,
+    isInverted: props.isInverted,
+    height: props.height,
+    isAnimated: props.isAnimated
+  });
+  const LabelWithProps = jsxRuntime.jsx(ProgressBarLabel, {
+    label: props.label,
+    labelWidth: props.labelWidth,
+    labelPosition: props.labelPosition,
+    isInverted: props.isInverted,
+    height: props.height,
+    textAlignment: layoutConfig.textAlignment
+  });
+  const WrappingComponent = layoutConfig.wrappingComponent;
+  let firstComponent = LabelWithProps;
+  let secondComponent = BarWithProps;
+  if (props.labelPosition === 'right' || props.labelPosition === 'bottom') {
+    firstComponent = BarWithProps;
+    secondComponent = LabelWithProps;
+  }
+  return jsxRuntime.jsxs(WrappingComponent, {
+    scale: props.height === '20' ? 'm' : 's',
+    alignItems: "center",
+    children: [firstComponent, secondComponent]
+  });
+};
+ProgressBar.propTypes = process.env.NODE_ENV !== "production" ? {
+  progress: _pt__default["default"].number,
+  label: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].element, _pt__default["default"].oneOfType([_pt__default["default"].any, _pt__default["default"].shape({
+    values: _pt__default["default"].objectOf(_pt__default["default"].node)
+  })]), _pt__default["default"].oneOf([null])]),
+  labelPosition: _pt__default["default"].oneOf(['top', 'bottom', 'left', 'right']),
+  labelWidth: _pt__default["default"].oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
+  isInverted: _pt__default["default"].bool,
+  isAnimated: _pt__default["default"].bool,
+  height: _pt__default["default"].oneOf(['10', '20']),
+  barWidth: _pt__default["default"].oneOf([4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale'])
+} : {};
+const defaultProps = {
+  progress: 0,
+  label: null,
+  labelPosition: 'top',
+  labelWidth: 'scale',
+  isInverted: false,
+  isAnimated: true,
+  height: '20',
+  barWidth: 6
+};
+ProgressBar.displayName = 'ProgressBar';
+ProgressBar.defaultProps = defaultProps;
+var ProgressBar$1 = ProgressBar;
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "17.0.0";
+
+exports["default"] = ProgressBar$1;
+exports.version = version;

package/dist/commercetools-uikit-progress-bar.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-uikit-progress-bar.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-uikit-progress-bar.cjs.dev.js");
+}

package/dist/commercetools-uikit-progress-bar.cjs.prod.js

@@ -0,0 +1,160 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+require('prop-types');
+var reactIntl = require('react-intl');
+var utils = require('@commercetools-uikit/utils');
+var Constraints = require('@commercetools-uikit/constraints');
+var SpacingsInline = require('@commercetools-uikit/spacings-inline');
+var SpacingsStack = require('@commercetools-uikit/spacings-stack');
+var Text = require('@commercetools-uikit/text');
+var isNil = require('lodash/isNil');
+var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
+var react = require('@emotion/react');
+var designSystem = require('@commercetools-uikit/design-system');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+var SpacingsInline__default = /*#__PURE__*/_interopDefault(SpacingsInline);
+var SpacingsStack__default = /*#__PURE__*/_interopDefault(SpacingsStack);
+var Text__default = /*#__PURE__*/_interopDefault(Text);
+var isNil__default = /*#__PURE__*/_interopDefault(isNil);
+
+var _templateObject;
+const heightPerScale = {
+  '10': designSystem.designTokens.spacing25,
+  '20': designSystem.designTokens.spacing40
+};
+const progressPulse = react.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    background-position: 100% 0;\n  }\n  100% {\n    background-position: -100% 0;\n  }\n"])));
+const getLabelStyles = props => {
+  var _props$height;
+  return /*#__PURE__*/react.css("min-height:", heightPerScale[(_props$height = props.height) !== null && _props$height !== void 0 ? _props$height : defaultProps.height], ";max-width:", Constraints__default["default"].getMaxPropTokenValue(props.labelWidth || defaultProps.labelWidth), ";" + ("" ), "" );
+};
+const getBackgroundBarStyles = props => {
+  var _props$height2;
+  return /*#__PURE__*/react.css("width:100%;background-color:", props.isInverted ? 'rgba(255, 255, 255, 0.4)' : designSystem.designTokens.colorNeutral90, ";border-radius:", designSystem.designTokens.spacingL, ";height:", heightPerScale[(_props$height2 = props.height) !== null && _props$height2 !== void 0 ? _props$height2 : defaultProps.height], ";overflow:hidden;" + ("" ), "" );
+};
+const getForegroundBarStyles = props => {
+  var _props$height3;
+  return /*#__PURE__*/react.css("width:", props.progress, "%;transition:width 500ms ease-in-out;display:block;height:", heightPerScale[(_props$height3 = props.height) !== null && _props$height3 !== void 0 ? _props$height3 : defaultProps.height], ";background:", props.isInverted ? designSystem.designTokens.colorSurface : "linear-gradient(\n      to right,\n      #00E5CB,\n      ".concat(designSystem.designTokens.colorPrimary25, ",\n      #00E5CB\n    )"), ";background-size:200% 100%;animation:", props.isAnimated && !props.isInverted ? /*#__PURE__*/react.css(progressPulse, " 2s linear infinite;" + ("" ), "" ) : 'none', ";border-radius:", designSystem.designTokens.spacingL, ";" + ("" ), "" );
+};
+
+function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const ProgressBarLabel = props => {
+  if (isNil__default["default"](props.label)) return null;
+  const TextComponent = props.height !== '10' ? Text__default["default"].Body : Text__default["default"].Detail;
+  const textProps = {
+    tone: props.isInverted ? 'inverted' : undefined,
+    as: props.height !== '10' ? 'span' : undefined,
+    fontWegith: props.height !== '10' ? 'medium' : undefined,
+    children: props.label.hasOwnProperty('defaultMessage') ? jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, props.label)) : props.label
+  };
+  return jsxRuntime.jsx("div", {
+    css: getLabelStyles(props),
+    children: jsxRuntime.jsx(TextComponent, _objectSpread({}, textProps))
+  });
+};
+const Bar = props => {
+  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
+    max: props.barWidth,
+    children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+      css: getBackgroundBarStyles(props),
+      role: "progressbar",
+      "aria-valuenow": props.progress,
+      "aria-label": "Progress bar"
+    }, utils.filterAriaAttributes(props)), {}, {
+      children: jsxRuntime.jsx("div", {
+        css: getForegroundBarStyles(props)
+      })
+    }))
+  });
+};
+const layoutConfigMapping = {
+  top: {
+    textAlignment: 'center',
+    wrappingComponent: SpacingsStack__default["default"]
+  },
+  bottom: {
+    textAlignment: 'center',
+    wrappingComponent: SpacingsStack__default["default"]
+  },
+  left: {
+    textAlignment: 'right',
+    wrappingComponent: SpacingsInline__default["default"]
+  },
+  right: {
+    textAlignment: 'left',
+    wrappingComponent: SpacingsInline__default["default"]
+  }
+};
+const ProgressBar = props => {
+  const layoutConfig = layoutConfigMapping[props.labelPosition || 'top'];
+  const BarWithProps = jsxRuntime.jsx(Bar, {
+    progress: props.progress,
+    barWidth: props.barWidth,
+    isInverted: props.isInverted,
+    height: props.height,
+    isAnimated: props.isAnimated
+  });
+  const LabelWithProps = jsxRuntime.jsx(ProgressBarLabel, {
+    label: props.label,
+    labelWidth: props.labelWidth,
+    labelPosition: props.labelPosition,
+    isInverted: props.isInverted,
+    height: props.height,
+    textAlignment: layoutConfig.textAlignment
+  });
+  const WrappingComponent = layoutConfig.wrappingComponent;
+  let firstComponent = LabelWithProps;
+  let secondComponent = BarWithProps;
+  if (props.labelPosition === 'right' || props.labelPosition === 'bottom') {
+    firstComponent = BarWithProps;
+    secondComponent = LabelWithProps;
+  }
+  return jsxRuntime.jsxs(WrappingComponent, {
+    scale: props.height === '20' ? 'm' : 's',
+    alignItems: "center",
+    children: [firstComponent, secondComponent]
+  });
+};
+ProgressBar.propTypes = {};
+const defaultProps = {
+  progress: 0,
+  label: null,
+  labelPosition: 'top',
+  labelWidth: 'scale',
+  isInverted: false,
+  isAnimated: true,
+  height: '20',
+  barWidth: 6
+};
+ProgressBar.displayName = 'ProgressBar';
+ProgressBar.defaultProps = defaultProps;
+var ProgressBar$1 = ProgressBar;
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "17.0.0";
+
+exports["default"] = ProgressBar$1;
+exports.version = version;

package/dist/commercetools-uikit-progress-bar.esm.js

@@ -0,0 +1,150 @@
+import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
+import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
+import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
+import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
+import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
+import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _pt from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { filterAriaAttributes } from '@commercetools-uikit/utils';
+import Constraints from '@commercetools-uikit/constraints';
+import SpacingsInline from '@commercetools-uikit/spacings-inline';
+import SpacingsStack from '@commercetools-uikit/spacings-stack';
+import Text from '@commercetools-uikit/text';
+import isNil from 'lodash/isNil';
+import _taggedTemplateLiteral from '@babel/runtime-corejs3/helpers/esm/taggedTemplateLiteral';
+import { keyframes, css } from '@emotion/react';
+import { designTokens } from '@commercetools-uikit/design-system';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+var _templateObject;
+const heightPerScale = {
+  '10': designTokens.spacing25,
+  '20': designTokens.spacing40
+};
+const progressPulse = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    background-position: 100% 0;\n  }\n  100% {\n    background-position: -100% 0;\n  }\n"])));
+const getLabelStyles = props => {
+  var _props$height;
+  return /*#__PURE__*/css("min-height:", heightPerScale[(_props$height = props.height) !== null && _props$height !== void 0 ? _props$height : defaultProps.height], ";max-width:", Constraints.getMaxPropTokenValue(props.labelWidth || defaultProps.labelWidth), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getLabelStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCUSIsImZpbGUiOiJwcm9ncmVzcy1iYXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgQ29uc3RyYWludHMgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvY29uc3RyYWludHMnO1xuaW1wb3J0IHsgZGVmYXVsdFByb3BzLCB0eXBlIFRQcm9ncmVzc0JhclByb3BzIH0gZnJvbSAnLi9wcm9ncmVzcy1iYXInO1xuXG5leHBvcnQgY29uc3QgaGVpZ2h0UGVyU2NhbGUgPSB7XG4gICcxMCc6IGRlc2lnblRva2Vucy5zcGFjaW5nMjUsXG4gICcyMCc6IGRlc2lnblRva2Vucy5zcGFjaW5nNDAsXG59O1xuXG5jb25zdCBwcm9ncmVzc1B1bHNlID0ga2V5ZnJhbWVzYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogMTAwJSAwO1xuICB9XG4gIDEwMCUge1xuICAgIGJhY2tncm91bmQtcG9zaXRpb246IC0xMDAlIDA7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRMYWJlbFN0eWxlcyA9IChcbiAgcHJvcHM6IFRQcm9ncmVzc0JhclByb3BzICYgeyB0ZXh0QWxpZ25tZW50OiBzdHJpbmcgfVxuKSA9PiBjc3NgXG4gIG1pbi1oZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRQcm9wcy5oZWlnaHQhXX07XG4gIG1heC13aWR0aDogJHtDb25zdHJhaW50cy5nZXRNYXhQcm9wVG9rZW5WYWx1ZShcbiAgICBwcm9wcy5sYWJlbFdpZHRoIHx8IGRlZmF1bHRQcm9wcy5sYWJlbFdpZHRoIVxuICApfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRCYWNrZ3JvdW5kQmFyU3R5bGVzID0gKHByb3BzOiBUUHJvZ3Jlc3NCYXJQcm9wcykgPT4gY3NzYFxuICB3aWR0aDogMTAwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5pc0ludmVydGVkXG4gICAgPyAncmdiYSgyNTUsIDI1NSwgMjU1LCAwLjQpJ1xuICAgIDogZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDkwfTtcbiAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ0x9O1xuICBoZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRQcm9wcy5oZWlnaHQhXX07XG4gIG92ZXJmbG93OiBoaWRkZW47XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0Rm9yZWdyb3VuZEJhclN0eWxlcyA9IChwcm9wczogVFByb2dyZXNzQmFyUHJvcHMpID0+IGNzc2BcbiAgd2lkdGg6ICR7cHJvcHMucHJvZ3Jlc3N9JTtcbiAgdHJhbnNpdGlvbjogd2lkdGggNTAwbXMgZWFzZS1pbi1vdXQ7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBoZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRQcm9wcy5oZWlnaHQhXX07XG4gIGJhY2tncm91bmQ6ICR7cHJvcHMuaXNJbnZlcnRlZFxuICAgID8gZGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZVxuICAgIDogYGxpbmVhci1ncmFkaWVudChcbiAgICAgIHRvIHJpZ2h0LFxuICAgICAgIzAwRTVDQixcbiAgICAgICR7ZGVzaWduVG9rZW5zLmNvbG9yUHJpbWFyeTI1fSxcbiAgICAgICMwMEU1Q0JcbiAgICApYH07XG4gIGJhY2tncm91bmQtc2l6ZTogMjAwJSAxMDAlO1xuICBhbmltYXRpb246ICR7cHJvcHMuaXNBbmltYXRlZCAmJiAhcHJvcHMuaXNJbnZlcnRlZFxuICAgID8gY3NzYFxuICAgICAgICAke3Byb2dyZXNzUHVsc2V9IDJzIGxpbmVhciBpbmZpbml0ZVxuICAgICAgYFxuICAgIDogJ25vbmUnfTtcbiAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ0x9O1xuYDtcbiJdfQ== */");
+};
+const getBackgroundBarStyles = props => {
+  var _props$height2;
+  return /*#__PURE__*/css("width:100%;background-color:", props.isInverted ? 'rgba(255, 255, 255, 0.4)' : designTokens.colorNeutral90, ";border-radius:", designTokens.spacingL, ";height:", heightPerScale[(_props$height2 = props.height) !== null && _props$height2 !== void 0 ? _props$height2 : defaultProps.height], ";overflow:hidden;" + (process.env.NODE_ENV === "production" ? "" : ";label:getBackgroundBarStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRCdUUiLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IENvbnN0cmFpbnRzIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2NvbnN0cmFpbnRzJztcbmltcG9ydCB7IGRlZmF1bHRQcm9wcywgdHlwZSBUUHJvZ3Jlc3NCYXJQcm9wcyB9IGZyb20gJy4vcHJvZ3Jlc3MtYmFyJztcblxuZXhwb3J0IGNvbnN0IGhlaWdodFBlclNjYWxlID0ge1xuICAnMTAnOiBkZXNpZ25Ub2tlbnMuc3BhY2luZzI1LFxuICAnMjAnOiBkZXNpZ25Ub2tlbnMuc3BhY2luZzQwLFxufTtcblxuY29uc3QgcHJvZ3Jlc3NQdWxzZSA9IGtleWZyYW1lc2BcbiAgMCUge1xuICAgIGJhY2tncm91bmQtcG9zaXRpb246IDEwMCUgMDtcbiAgfVxuICAxMDAlIHtcbiAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiAtMTAwJSAwO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0TGFiZWxTdHlsZXMgPSAoXG4gIHByb3BzOiBUUHJvZ3Jlc3NCYXJQcm9wcyAmIHsgdGV4dEFsaWdubWVudDogc3RyaW5nIH1cbikgPT4gY3NzYFxuICBtaW4taGVpZ2h0OiAke2hlaWdodFBlclNjYWxlW3Byb3BzLmhlaWdodCA/PyBkZWZhdWx0UHJvcHMuaGVpZ2h0IV19O1xuICBtYXgtd2lkdGg6ICR7Q29uc3RyYWludHMuZ2V0TWF4UHJvcFRva2VuVmFsdWUoXG4gICAgcHJvcHMubGFiZWxXaWR0aCB8fCBkZWZhdWx0UHJvcHMubGFiZWxXaWR0aCFcbiAgKX07XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0QmFja2dyb3VuZEJhclN0eWxlcyA9IChwcm9wczogVFByb2dyZXNzQmFyUHJvcHMpID0+IGNzc2BcbiAgd2lkdGg6IDEwMCU7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMuaXNJbnZlcnRlZFxuICAgID8gJ3JnYmEoMjU1LCAyNTUsIDI1NSwgMC40KSdcbiAgICA6IGRlc2lnblRva2Vucy5jb2xvck5ldXRyYWw5MH07XG4gIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmdMfTtcbiAgaGVpZ2h0OiAke2hlaWdodFBlclNjYWxlW3Byb3BzLmhlaWdodCA/PyBkZWZhdWx0UHJvcHMuaGVpZ2h0IV19O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuYDtcblxuZXhwb3J0IGNvbnN0IGdldEZvcmVncm91bmRCYXJTdHlsZXMgPSAocHJvcHM6IFRQcm9ncmVzc0JhclByb3BzKSA9PiBjc3NgXG4gIHdpZHRoOiAke3Byb3BzLnByb2dyZXNzfSU7XG4gIHRyYW5zaXRpb246IHdpZHRoIDUwMG1zIGVhc2UtaW4tb3V0O1xuICBkaXNwbGF5OiBibG9jaztcbiAgaGVpZ2h0OiAke2hlaWdodFBlclNjYWxlW3Byb3BzLmhlaWdodCA/PyBkZWZhdWx0UHJvcHMuaGVpZ2h0IV19O1xuICBiYWNrZ3JvdW5kOiAke3Byb3BzLmlzSW52ZXJ0ZWRcbiAgICA/IGRlc2lnblRva2Vucy5jb2xvclN1cmZhY2VcbiAgICA6IGBsaW5lYXItZ3JhZGllbnQoXG4gICAgICB0byByaWdodCxcbiAgICAgICMwMEU1Q0IsXG4gICAgICAke2Rlc2lnblRva2Vucy5jb2xvclByaW1hcnkyNX0sXG4gICAgICAjMDBFNUNCXG4gICAgKWB9O1xuICBiYWNrZ3JvdW5kLXNpemU6IDIwMCUgMTAwJTtcbiAgYW5pbWF0aW9uOiAke3Byb3BzLmlzQW5pbWF0ZWQgJiYgIXByb3BzLmlzSW52ZXJ0ZWRcbiAgICA/IGNzc2BcbiAgICAgICAgJHtwcm9ncmVzc1B1bHNlfSAycyBsaW5lYXIgaW5maW5pdGVcbiAgICAgIGBcbiAgICA6ICdub25lJ307XG4gIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmdMfTtcbmA7XG4iXX0= */");
+};
+const getForegroundBarStyles = props => {
+  var _props$height3;
+  return /*#__PURE__*/css("width:", props.progress, "%;transition:width 500ms ease-in-out;display:block;height:", heightPerScale[(_props$height3 = props.height) !== null && _props$height3 !== void 0 ? _props$height3 : defaultProps.height], ";background:", props.isInverted ? designTokens.colorSurface : "linear-gradient(\n      to right,\n      #00E5CB,\n      ".concat(designTokens.colorPrimary25, ",\n      #00E5CB\n    )"), ";background-size:200% 100%;animation:", props.isAnimated && !props.isInverted ? /*#__PURE__*/css(progressPulse, " 2s linear infinite;" + (process.env.NODE_ENV === "production" ? "" : ";label:getForegroundBarStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFEUyIsImZpbGUiOiJwcm9ncmVzcy1iYXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgQ29uc3RyYWludHMgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvY29uc3RyYWludHMnO1xuaW1wb3J0IHsgZGVmYXVsdFByb3BzLCB0eXBlIFRQcm9ncmVzc0JhclByb3BzIH0gZnJvbSAnLi9wcm9ncmVzcy1iYXInO1xuXG5leHBvcnQgY29uc3QgaGVpZ2h0UGVyU2NhbGUgPSB7XG4gICcxMCc6IGRlc2lnblRva2Vucy5zcGFjaW5nMjUsXG4gICcyMCc6IGRlc2lnblRva2Vucy5zcGFjaW5nNDAsXG59O1xuXG5jb25zdCBwcm9ncmVzc1B1bHNlID0ga2V5ZnJhbWVzYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogMTAwJSAwO1xuICB9XG4gIDEwMCUge1xuICAgIGJhY2tncm91bmQtcG9zaXRpb246IC0xMDAlIDA7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRMYWJlbFN0eWxlcyA9IChcbiAgcHJvcHM6IFRQcm9ncmVzc0JhclByb3BzICYgeyB0ZXh0QWxpZ25tZW50OiBzdHJpbmcgfVxuKSA9PiBjc3NgXG4gIG1pbi1oZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRQcm9wcy5oZWlnaHQhXX07XG4gIG1heC13aWR0aDogJHtDb25zdHJhaW50cy5nZXRNYXhQcm9wVG9rZW5WYWx1ZShcbiAgICBwcm9wcy5sYWJlbFdpZHRoIHx8IGRlZmF1bHRQcm9wcy5sYWJlbFdpZHRoIVxuICApfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRCYWNrZ3JvdW5kQmFyU3R5bGVzID0gKHByb3BzOiBUUHJvZ3Jlc3NCYXJQcm9wcykgPT4gY3NzYFxuICB3aWR0aDogMTAwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5pc0ludmVydGVkXG4gICAgPyAncmdiYSgyNTUsIDI1NSwgMjU1LCAwLjQpJ1xuICAgIDogZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDkwfTtcbiAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ0x9O1xuICBoZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRQcm9wcy5oZWlnaHQhXX07XG4gIG92ZXJmbG93OiBoaWRkZW47XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0Rm9yZWdyb3VuZEJhclN0eWxlcyA9IChwcm9wczogVFByb2dyZXNzQmFyUHJvcHMpID0+IGNzc2BcbiAgd2lkdGg6ICR7cHJvcHMucHJvZ3Jlc3N9JTtcbiAgdHJhbnNpdGlvbjogd2lkdGggNTAwbXMgZWFzZS1pbi1vdXQ7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBoZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRQcm9wcy5oZWlnaHQhXX07XG4gIGJhY2tncm91bmQ6ICR7cHJvcHMuaXNJbnZlcnRlZFxuICAgID8gZGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZVxuICAgIDogYGxpbmVhci1ncmFkaWVudChcbiAgICAgIHRvIHJpZ2h0LFxuICAgICAgIzAwRTVDQixcbiAgICAgICR7ZGVzaWduVG9rZW5zLmNvbG9yUHJpbWFyeTI1fSxcbiAgICAgICMwMEU1Q0JcbiAgICApYH07XG4gIGJhY2tncm91bmQtc2l6ZTogMjAwJSAxMDAlO1xuICBhbmltYXRpb246ICR7cHJvcHMuaXNBbmltYXRlZCAmJiAhcHJvcHMuaXNJbnZlcnRlZFxuICAgID8gY3NzYFxuICAgICAgICAke3Byb2dyZXNzUHVsc2V9IDJzIGxpbmVhciBpbmZpbml0ZVxuICAgICAgYFxuICAgIDogJ25vbmUnfTtcbiAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ0x9O1xuYDtcbiJdfQ== */") : 'none', ";border-radius:", designTokens.spacingL, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getForegroundBarStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNDdUUiLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IENvbnN0cmFpbnRzIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2NvbnN0cmFpbnRzJztcbmltcG9ydCB7IGRlZmF1bHRQcm9wcywgdHlwZSBUUHJvZ3Jlc3NCYXJQcm9wcyB9IGZyb20gJy4vcHJvZ3Jlc3MtYmFyJztcblxuZXhwb3J0IGNvbnN0IGhlaWdodFBlclNjYWxlID0ge1xuICAnMTAnOiBkZXNpZ25Ub2tlbnMuc3BhY2luZzI1LFxuICAnMjAnOiBkZXNpZ25Ub2tlbnMuc3BhY2luZzQwLFxufTtcblxuY29uc3QgcHJvZ3Jlc3NQdWxzZSA9IGtleWZyYW1lc2BcbiAgMCUge1xuICAgIGJhY2tncm91bmQtcG9zaXRpb246IDEwMCUgMDtcbiAgfVxuICAxMDAlIHtcbiAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiAtMTAwJSAwO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0TGFiZWxTdHlsZXMgPSAoXG4gIHByb3BzOiBUUHJvZ3Jlc3NCYXJQcm9wcyAmIHsgdGV4dEFsaWdubWVudDogc3RyaW5nIH1cbikgPT4gY3NzYFxuICBtaW4taGVpZ2h0OiAke2hlaWdodFBlclNjYWxlW3Byb3BzLmhlaWdodCA/PyBkZWZhdWx0UHJvcHMuaGVpZ2h0IV19O1xuICBtYXgtd2lkdGg6ICR7Q29uc3RyYWludHMuZ2V0TWF4UHJvcFRva2VuVmFsdWUoXG4gICAgcHJvcHMubGFiZWxXaWR0aCB8fCBkZWZhdWx0UHJvcHMubGFiZWxXaWR0aCFcbiAgKX07XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0QmFja2dyb3VuZEJhclN0eWxlcyA9IChwcm9wczogVFByb2dyZXNzQmFyUHJvcHMpID0+IGNzc2BcbiAgd2lkdGg6IDEwMCU7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMuaXNJbnZlcnRlZFxuICAgID8gJ3JnYmEoMjU1LCAyNTUsIDI1NSwgMC40KSdcbiAgICA6IGRlc2lnblRva2Vucy5jb2xvck5ldXRyYWw5MH07XG4gIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmdMfTtcbiAgaGVpZ2h0OiAke2hlaWdodFBlclNjYWxlW3Byb3BzLmhlaWdodCA/PyBkZWZhdWx0UHJvcHMuaGVpZ2h0IV19O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuYDtcblxuZXhwb3J0IGNvbnN0IGdldEZvcmVncm91bmRCYXJTdHlsZXMgPSAocHJvcHM6IFRQcm9ncmVzc0JhclByb3BzKSA9PiBjc3NgXG4gIHdpZHRoOiAke3Byb3BzLnByb2dyZXNzfSU7XG4gIHRyYW5zaXRpb246IHdpZHRoIDUwMG1zIGVhc2UtaW4tb3V0O1xuICBkaXNwbGF5OiBibG9jaztcbiAgaGVpZ2h0OiAke2hlaWdodFBlclNjYWxlW3Byb3BzLmhlaWdodCA/PyBkZWZhdWx0UHJvcHMuaGVpZ2h0IV19O1xuICBiYWNrZ3JvdW5kOiAke3Byb3BzLmlzSW52ZXJ0ZWRcbiAgICA/IGRlc2lnblRva2Vucy5jb2xvclN1cmZhY2VcbiAgICA6IGBsaW5lYXItZ3JhZGllbnQoXG4gICAgICB0byByaWdodCxcbiAgICAgICMwMEU1Q0IsXG4gICAgICAke2Rlc2lnblRva2Vucy5jb2xvclByaW1hcnkyNX0sXG4gICAgICAjMDBFNUNCXG4gICAgKWB9O1xuICBiYWNrZ3JvdW5kLXNpemU6IDIwMCUgMTAwJTtcbiAgYW5pbWF0aW9uOiAke3Byb3BzLmlzQW5pbWF0ZWQgJiYgIXByb3BzLmlzSW52ZXJ0ZWRcbiAgICA/IGNzc2BcbiAgICAgICAgJHtwcm9ncmVzc1B1bHNlfSAycyBsaW5lYXIgaW5maW5pdGVcbiAgICAgIGBcbiAgICA6ICdub25lJ307XG4gIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmdMfTtcbmA7XG4iXX0= */");
+};
+
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, 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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+const ProgressBarLabel = props => {
+  if (isNil(props.label)) return null;
+  const TextComponent = props.height !== '10' ? Text.Body : Text.Detail;
+  const textProps = {
+    tone: props.isInverted ? 'inverted' : undefined,
+    as: props.height !== '10' ? 'span' : undefined,
+    fontWegith: props.height !== '10' ? 'medium' : undefined,
+    children: props.label.hasOwnProperty('defaultMessage') ? jsx(FormattedMessage, _objectSpread({}, props.label)) : props.label
+  };
+  return jsx("div", {
+    css: getLabelStyles(props),
+    children: jsx(TextComponent, _objectSpread({}, textProps))
+  });
+};
+const Bar = props => {
+  return jsx(Constraints.Horizontal, {
+    max: props.barWidth,
+    children: jsx("div", _objectSpread(_objectSpread({
+      css: getBackgroundBarStyles(props),
+      role: "progressbar",
+      "aria-valuenow": props.progress,
+      "aria-label": "Progress bar"
+    }, filterAriaAttributes(props)), {}, {
+      children: jsx("div", {
+        css: getForegroundBarStyles(props)
+      })
+    }))
+  });
+};
+const layoutConfigMapping = {
+  top: {
+    textAlignment: 'center',
+    wrappingComponent: SpacingsStack
+  },
+  bottom: {
+    textAlignment: 'center',
+    wrappingComponent: SpacingsStack
+  },
+  left: {
+    textAlignment: 'right',
+    wrappingComponent: SpacingsInline
+  },
+  right: {
+    textAlignment: 'left',
+    wrappingComponent: SpacingsInline
+  }
+};
+const ProgressBar = props => {
+  const layoutConfig = layoutConfigMapping[props.labelPosition || 'top'];
+  const BarWithProps = jsx(Bar, {
+    progress: props.progress,
+    barWidth: props.barWidth,
+    isInverted: props.isInverted,
+    height: props.height,
+    isAnimated: props.isAnimated
+  });
+  const LabelWithProps = jsx(ProgressBarLabel, {
+    label: props.label,
+    labelWidth: props.labelWidth,
+    labelPosition: props.labelPosition,
+    isInverted: props.isInverted,
+    height: props.height,
+    textAlignment: layoutConfig.textAlignment
+  });
+  const WrappingComponent = layoutConfig.wrappingComponent;
+  let firstComponent = LabelWithProps;
+  let secondComponent = BarWithProps;
+  if (props.labelPosition === 'right' || props.labelPosition === 'bottom') {
+    firstComponent = BarWithProps;
+    secondComponent = LabelWithProps;
+  }
+  return jsxs(WrappingComponent, {
+    scale: props.height === '20' ? 'm' : 's',
+    alignItems: "center",
+    children: [firstComponent, secondComponent]
+  });
+};
+ProgressBar.propTypes = process.env.NODE_ENV !== "production" ? {
+  progress: _pt.number,
+  label: _pt.oneOfType([_pt.string, _pt.element, _pt.oneOfType([_pt.any, _pt.shape({
+    values: _pt.objectOf(_pt.node)
+  })]), _pt.oneOf([null])]),
+  labelPosition: _pt.oneOf(['top', 'bottom', 'left', 'right']),
+  labelWidth: _pt.oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
+  isInverted: _pt.bool,
+  isAnimated: _pt.bool,
+  height: _pt.oneOf(['10', '20']),
+  barWidth: _pt.oneOf([4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale'])
+} : {};
+const defaultProps = {
+  progress: 0,
+  label: null,
+  labelPosition: 'top',
+  labelWidth: 'scale',
+  isInverted: false,
+  isAnimated: true,
+  height: '20',
+  barWidth: 6
+};
+ProgressBar.displayName = 'ProgressBar';
+ProgressBar.defaultProps = defaultProps;
+var ProgressBar$1 = ProgressBar;
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "17.0.0";
+
+export { ProgressBar$1 as default, version };

package/dist/declarations/src/export-types.d.ts

@@ -0,0 +1 @@
+export type { TProgressBarProps } from "./progress-bar.js";

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./progress-bar.js";
+export { default as version } from "./version.js";
+export * from "./export-types.js";

package/dist/declarations/src/progress-bar.d.ts

@@ -0,0 +1,21 @@
+import type { ReactElement, ReactNode } from 'react';
+import { type MessageDescriptor } from 'react-intl';
+export type TProgressBarProps = {
+    progress?: number;
+    label?: string | ReactElement | (MessageDescriptor & {
+        values?: Record<string, ReactNode>;
+    }) | null;
+    labelPosition?: 'top' | 'bottom' | 'left' | 'right';
+    labelWidth?: 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
+    isInverted?: boolean;
+    isAnimated?: boolean;
+    height?: '10' | '20';
+    barWidth?: 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale';
+};
+declare const ProgressBar: {
+    (props: TProgressBarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: TProgressBarProps;
+};
+export declare const defaultProps: TProgressBarProps;
+export default ProgressBar;

package/dist/declarations/src/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "__@UI_KIT_PACKAGE/VERSION_OF_RELEASE__";
+export default _default;

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@commercetools-uikit/progress-bar",
+  "description": "A progress bar component used to visualize the progression of an extended operation",
+  "version": "0.0.0-canary-20240206161325",
+  "bugs": "https://github.com/commercetools/ui-kit/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/ui-kit.git",
+    "directory": "packages/components/progress-bar"
+  },
+  "homepage": "https://uikit.commercetools.com",
+  "keywords": [
+    "javascript",
+    "typescript",
+    "design-system",
+    "react",
+    "uikit"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "dist/commercetools-uikit-progress-bar.cjs.js",
+  "module": "dist/commercetools-uikit-progress-bar.esm.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@babel/runtime": "^7.20.13",
+    "@babel/runtime-corejs3": "^7.20.13",
+    "@commercetools-uikit/constraints": "0.0.0-canary-20240206161325",
+    "@commercetools-uikit/design-system": "0.0.0-canary-20240206161325",
+    "@commercetools-uikit/spacings-inline": "0.0.0-canary-20240206161325",
+    "@commercetools-uikit/spacings-stack": "0.0.0-canary-20240206161325",
+    "@commercetools-uikit/text": "0.0.0-canary-20240206161325",
+    "@commercetools-uikit/utils": "0.0.0-canary-20240206161325",
+    "@emotion/react": "^11.10.5",
+    "lodash": "4.17.21",
+    "prop-types": "15.8.1",
+    "react-intl": "^6.3.2"
+  },
+  "devDependencies": {
+    "react": "17.0.2"
+  },
+  "peerDependencies": {
+    "react": "17.x"
+  }
+}