@atlaskit/media-card 81.10.12 → 81.10.13

package/dist/cjs/card/ui/iconMessage/FailedToUpload.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FailedToUpload = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _messages = require("@atlaskit/media-ui/messages");
+var _IconMessage = require("./IconMessage");
+var FailedToUpload = exports.FailedToUpload = function FailedToUpload(props) {
+  return /*#__PURE__*/_react.default.createElement(_IconMessage.IconMessage, (0, _extends2.default)({}, props, {
+    messageDescriptor: _messages.messages.failed_to_upload
+  }));
+};

package/dist/cjs/card/ui/iconMessage/IconMessage.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconMessage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _iconMessageWrapper = require("./iconMessageWrapper");
+var IconMessage = exports.IconMessage = function IconMessage(_ref) {
+  var messageDescriptor = _ref.messageDescriptor,
+    _ref$animated = _ref.animated,
+    animated = _ref$animated === void 0 ? false : _ref$animated;
+  return /*#__PURE__*/_react.default.createElement(_iconMessageWrapper.IconMessageWrapper, {
+    animated: animated
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messageDescriptor)));
+};

package/dist/cjs/card/ui/iconMessage/PreviewUnavailable.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreviewUnavailable = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _messages = require("@atlaskit/media-ui/messages");
+var _IconMessage = require("./IconMessage");
+var PreviewUnavailable = exports.PreviewUnavailable = function PreviewUnavailable(props) {
+  return /*#__PURE__*/_react.default.createElement(_IconMessage.IconMessage, (0, _extends2.default)({}, props, {
+    messageDescriptor: _messages.messages.preview_unavailable
+  }));
+};

package/dist/cjs/card/ui/iconWrapper/IconWrapper-2.js

@@ -0,0 +1,36 @@
+/* IconWrapper-2.tsx generated by @compiled/babel-plugin v3.0.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconWrapper = void 0;
+require("./IconWrapper-2.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _common = require("../common");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function titleBoxHeight(hasTitleBox, breakpoint) {
+  // there is no titlebox
+  if (!hasTitleBox) {
+    return "0px";
+  }
+
+  // calculate height of the titlebox
+  var marginBottom = (0, _common.getTitleBoxHeight)(breakpoint);
+  return "".concat(marginBottom, "px");
+}
+var iconWrapperStyles = null;
+var IconWrapper = exports.IconWrapper = function IconWrapper(props) {
+  var breakpoint = props.breakpoint,
+    hasTitleBox = props.hasTitleBox;
+  return /*#__PURE__*/React.createElement("div", {
+    id: "iconWrapper",
+    style: {
+      height: "calc(100% - ".concat(titleBoxHeight(hasTitleBox, breakpoint), ")")
+    },
+    className: (0, _runtime.ax)(["_kqswstnw _1bsb1osq _1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o"])
+  }, props.children);
+};
+IconWrapper.displayName = 'MediaIconWrapper';

package/dist/cjs/card/ui/iconWrapper/iconWrapper-compiled.js

@@ -1,37 +1,9 @@
-/* iconWrapper-compiled.tsx generated by @compiled/babel-plugin v3.0.1 */
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.IconWrapper = void 0;
-exports.titleBoxHeight = titleBoxHeight;
-require("./iconWrapper-compiled.compiled.css");
-var React = _interopRequireWildcard(require("react"));
-var _runtime = require("@compiled/react/runtime");
-var _common = require("../common");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function titleBoxHeight(hasTitleBox, breakpoint) {
-  // there is no titlebox
-  if (!hasTitleBox) {
-    return "0px";
-  }
+var _IconWrapper = require("./IconWrapper-2");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
-  // calculate height of the titlebox
-  var marginBottom = (0, _common.getTitleBoxHeight)(breakpoint);
-  return "".concat(marginBottom, "px");
-}
-var iconWrapperStyles = null;
-var IconWrapper = exports.IconWrapper = function IconWrapper(props) {
-  var breakpoint = props.breakpoint,
-    hasTitleBox = props.hasTitleBox;
-  return /*#__PURE__*/React.createElement("div", {
-    id: "iconWrapper",
-    style: {
-      height: "calc(100% - ".concat(titleBoxHeight(hasTitleBox, breakpoint), ")")
-    },
-    className: (0, _runtime.ax)(["_kqswstnw _1bsb1osq _1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o"])
-  }, props.children);
-};
-IconWrapper.displayName = 'MediaIconWrapper';
+_IconWrapper.IconWrapper.displayName = 'MediaIconWrapper';

package/dist/cjs/card/ui/iconWrapper/iconWrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.IconWrapper = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _iconWrapperCompiled = require("./iconWrapper-compiled");
+var _IconWrapper = require("./IconWrapper-2");
 var IconWrapper = exports.IconWrapper = function IconWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_iconWrapperCompiled.IconWrapper, props);
+  return /*#__PURE__*/_react.default.createElement(_IconWrapper.IconWrapper, props);
 };

package/dist/cjs/card/ui/iconWrapper/{styles.js → iconWrapperStyles.js}

@@ -4,20 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.iconWrapperStyles = void 0;
-exports.titleBoxHeight = titleBoxHeight;
 var _react = require("@emotion/react");
 var _common = require("../common");
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 function titleBoxHeight(hasTitleBox, breakpoint) {
-  // there is no titlebox
   if (!hasTitleBox) {
-    return "0px";
+    return '0px';
   }
-
-  // calculate height of the titlebox
-  var marginBottom = (0, _common.getTitleBoxHeight)(breakpoint);
-  return "".concat(marginBottom, "px");
+  return "".concat((0, _common.getTitleBoxHeight)(breakpoint), "px");
 }
 var iconWrapperStyles = exports.iconWrapperStyles = function iconWrapperStyles(_ref) {
   var hasTitleBox = _ref.hasTitleBox,

package/dist/cjs/card/ui/iconWrapper/titleBoxHeight.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.titleBoxHeight = titleBoxHeight;
+var _common = require("../common");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+function titleBoxHeight(hasTitleBox, breakpoint) {
+  // there is no titlebox
+  if (!hasTitleBox) {
+    return "0px";
+  }
+
+  // calculate height of the titlebox
+  var marginBottom = (0, _common.getTitleBoxHeight)(breakpoint);
+  return "".concat(marginBottom, "px");
+}

package/dist/cjs/card/ui/imageRenderer/{helpers.js → calculateDimensions.js}

@@ -3,18 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.calculateInitialDimensions = exports.calculateDimensions = void 0;
+exports.calculateDimensions = void 0;
 var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _defaultCropDimensions = require("./default-crop-dimensions");
+var _defaultStretchyFitDimensions = require("./default-stretchy-fit-dimensions");
 var roundedRatio = function roundedRatio(ratio) {
   return Math.round(ratio * 100) / 100;
 };
-var DEFAULT_CROP_DIMENSIONS = {
-  maxWidth: '100%'
-};
-var DEFAULT_STRETCHY_FIT_DIMENSIONS = {
-  width: '100%',
-  maxHeight: '100%'
-};
 var calculateDimensions = exports.calculateDimensions = function calculateDimensions(imgElement, parentElement, resizeMode) {
   var naturalWidth = imgElement.naturalWidth,
     width = imgElement.width,
@@ -39,9 +34,9 @@ var calculateDimensions = exports.calculateDimensions = function calculateDimens
     var isSameRatio = (0, _fg.fg)('media-perf-ratio-calc-fix') ? Math.abs(imgWidth / parentWidth - imgHeight / parentHeight) < 0.1 : roundedRatio(imgWidth / parentWidth) === roundedRatio(imgHeight / parentHeight);
     if (isSameRatio) {
       if (resizeMode === 'stretchy-fit') {
-        return DEFAULT_STRETCHY_FIT_DIMENSIONS;
+        return _defaultStretchyFitDimensions.DEFAULT_STRETCHY_FIT_DIMENSIONS;
       }
-      return DEFAULT_CROP_DIMENSIONS;
+      return _defaultCropDimensions.DEFAULT_CROP_DIMENSIONS;
     }
   }
   var isImageLandscapier = imgRatio > cardRatio;
@@ -72,22 +67,4 @@ var calculateDimensions = exports.calculateDimensions = function calculateDimens
     }
   }
   return {};
-};
-var calculateInitialDimensions = exports.calculateInitialDimensions = function calculateInitialDimensions(resizeMode) {
-  if (resizeMode === 'fit' || resizeMode === 'full-fit') {
-    return {
-      maxWidth: "100%",
-      maxHeight: "100%"
-    };
-  }
-  if (resizeMode === 'stretchy-fit') {
-    // assume the image is landscape
-    return DEFAULT_STRETCHY_FIT_DIMENSIONS;
-  }
-
-  // resizeMode === 'crop'
-  // assume the image is landscape
-  return (0, _fg.fg)('media-perf-uplift-mutation-fix') ? DEFAULT_CROP_DIMENSIONS : {
-    width: '100%'
-  };
 };

package/dist/cjs/card/ui/imageRenderer/calculateInitialDimensions.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateInitialDimensions = void 0;
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _defaultCropDimensions = require("./default-crop-dimensions");
+var _defaultStretchyFitDimensions = require("./default-stretchy-fit-dimensions");
+var calculateInitialDimensions = exports.calculateInitialDimensions = function calculateInitialDimensions(resizeMode) {
+  if (resizeMode === 'fit' || resizeMode === 'full-fit') {
+    return {
+      maxWidth: "100%",
+      maxHeight: "100%"
+    };
+  }
+  if (resizeMode === 'stretchy-fit') {
+    // assume the image is landscape
+    return _defaultStretchyFitDimensions.DEFAULT_STRETCHY_FIT_DIMENSIONS;
+  }
+
+  // resizeMode === 'crop'
+  // assume the image is landscape
+  return (0, _fg.fg)('media-perf-uplift-mutation-fix') ? _defaultCropDimensions.DEFAULT_CROP_DIMENSIONS : {
+    width: '100%'
+  };
+};

package/dist/cjs/card/ui/imageRenderer/default-crop-dimensions.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_CROP_DIMENSIONS = void 0;
+var DEFAULT_CROP_DIMENSIONS = exports.DEFAULT_CROP_DIMENSIONS = {
+  maxWidth: '100%'
+};

package/dist/cjs/card/ui/imageRenderer/default-stretchy-fit-dimensions.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_STRETCHY_FIT_DIMENSIONS = void 0;
+var DEFAULT_STRETCHY_FIT_DIMENSIONS = exports.DEFAULT_STRETCHY_FIT_DIMENSIONS = {
+  width: '100%',
+  maxHeight: '100%'
+};

package/dist/cjs/card/ui/imageRenderer/imageRendererV2.js

@@ -12,13 +12,14 @@ var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _helpers = require("./helpers");
-var _useCurrentValueRef = require("../../../utils/useCurrentValueRef");
-var _wrapper = require("./wrapper");
 var _mediaClient = require("@atlaskit/media-client");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _customData = _interopRequireDefault(require("@atlaskit/react-ufo/custom-data"));
 var _interactionContext = require("@atlaskit/react-ufo/interaction-context");
+var _useCurrentValueRef = require("../../../utils/useCurrentValueRef");
+var _calculateDimensions = require("./calculateDimensions");
+var _calculateInitialDimensions = require("./calculateInitialDimensions");
+var _wrapper = require("./wrapper");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
@@ -53,7 +54,7 @@ var ImageRenderer = exports.ImageRenderer = function ImageRenderer(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     didRender = _useState2[0],
     setDidRender = _useState2[1];
-  var _useState3 = (0, _react.useState)((0, _helpers.calculateInitialDimensions)(resizeMode)),
+  var _useState3 = (0, _react.useState)((0, _calculateInitialDimensions.calculateInitialDimensions)(resizeMode)),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     resolvedDimensions = _useState4[0],
     setResolvedDimensions = _useState4[1];
@@ -67,7 +68,7 @@ var ImageRenderer = exports.ImageRenderer = function ImageRenderer(_ref) {
   }, [didRender, cardPreview, ufoContext]);
   var imgRef = (0, _react.useRef)(null);
   var onLoad = function onLoad(evt) {
-    wrapperRef.current && setResolvedDimensions((0, _helpers.calculateDimensions)(evt.currentTarget, wrapperRef.current, resizeMode));
+    wrapperRef.current && setResolvedDimensions((0, _calculateDimensions.calculateDimensions)(evt.currentTarget, wrapperRef.current, resizeMode));
     setDidRender(true);
     cardPreview && (onImageLoad === null || onImageLoad === void 0 ? void 0 : onImageLoad(cardPreview));
   };
@@ -77,7 +78,7 @@ var ImageRenderer = exports.ImageRenderer = function ImageRenderer(_ref) {
   };
   (0, _react.useEffect)(function () {
     if (imgRef.current && wrapperRef.current && imgRef.current) {
-      setResolvedDimensions((0, _helpers.calculateDimensions)(imgRef.current, wrapperRef.current, resizeMode));
+      setResolvedDimensions((0, _calculateDimensions.calculateDimensions)(imgRef.current, wrapperRef.current, resizeMode));
     }
   }, [resizeMode, wrapperRef]);
   return cardPreview ? /*#__PURE__*/_react.default.createElement(_wrapper.ImageRendererWrapper, null, /*#__PURE__*/_react.default.createElement(_customData.default, {

package/dist/cjs/card/ui/progressBar/StyledBar-2.js

@@ -0,0 +1,66 @@
+/* StyledBar-2.tsx generated by @compiled/babel-plugin v3.0.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledBar = void 0;
+require("./StyledBar-2.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _common = require("../common");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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; }
+var height = 3;
+var padding = 1;
+var width = 95; // %
+
+var smallSizeSettings = {
+  marginBottom: 4
+};
+var largeSizeSettings = {
+  marginBottom: 12
+};
+function generateResponsiveStyles(breakpoint, positionBottom, showOnTop) {
+  var multiplier = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  var setting = breakpoint === _common.Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
+  var marginPositionBottom = _common.responsiveSettings[breakpoint].titleBox.verticalPadding;
+  var marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : (0, _common.getTitleBoxHeight)(breakpoint));
+  var spacing = "".concat(marginBottom, "px");
+  return showOnTop ? {
+    top: spacing
+  } : {
+    bottom: spacing
+  };
+}
+var styledBarStyles = null;
+var styleChild = null;
+var StyledBar = exports.StyledBar = function StyledBar(props) {
+  var progress = props.progress,
+    breakpoint = props.breakpoint,
+    positionBottom = props.positionBottom,
+    showOnTop = props.showOnTop,
+    ariaLabel = props.ariaLabel;
+  return /*#__PURE__*/React.createElement("div", {
+    id: "styledBar",
+    role: "progressbar",
+    "aria-valuenow": progress,
+    "aria-label": ariaLabel,
+    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _1yt4xh0m _2rkofajl _kqswstnw _1bsb1b7y _1ltv1ghs _bfhkrcrw _4t3i12iw _vchhusvi"]),
+    style: _objectSpread(_objectSpread({}, generateResponsiveStyles(breakpoint, positionBottom, showOnTop)), {}, {
+      "--_1xe2l1p": (0, _runtime.ix)("".concat(width, "%")),
+      "--_15ce6z9": (0, _runtime.ix)("".concat(height + padding * 2, "px")),
+      "--_cw4itz": (0, _runtime.ix)("".concat(padding, "px"))
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "".concat(progress, "%")
+    },
+    className: (0, _runtime.ax)(["_2rkofajl _bfhk1p0d _1e0c1ule _4t3i1osq"])
+  }));
+};
+StyledBar.displayName = 'StyledProgressBar';

package/dist/cjs/card/ui/progressBar/generateResponsiveStyles.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateResponsiveStyles = generateResponsiveStyles;
+var _common = require("../common");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// %
+var smallSizeSettings = {
+  marginBottom: 4
+};
+var largeSizeSettings = {
+  marginBottom: 12
+};
+function generateResponsiveStyles(breakpoint, positionBottom, showOnTop) {
+  var multiplier = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  var setting = breakpoint === _common.Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
+  var marginPositionBottom = _common.responsiveSettings[breakpoint].titleBox.verticalPadding;
+  var marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : (0, _common.getTitleBoxHeight)(breakpoint));
+  var spacing = "".concat(marginBottom, "px");
+  return showOnTop ? {
+    top: spacing
+  } : {
+    bottom: spacing
+  };
+}

package/dist/cjs/card/ui/progressBar/getNormalizedProgress.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNormalizedProgress = void 0;
+var getNormalizedProgress = exports.getNormalizedProgress = function getNormalizedProgress(progress) {
+  return Math.min(1, Math.max(0, progress || 0)) * 100;
+};

package/dist/cjs/card/ui/progressBar/progressBar.js

@@ -4,13 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getNormalizedProgress = exports.ProgressBar = void 0;
+exports.ProgressBar = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledBar = require("./styledBar");
 var _common = require("../common");
-var getNormalizedProgress = exports.getNormalizedProgress = function getNormalizedProgress(progress) {
-  return Math.min(1, Math.max(0, progress || 0)) * 100;
-};
+var _getNormalizedProgress = require("./getNormalizedProgress");
+var _styledBar = require("./styledBar");
 var ProgressBar = exports.ProgressBar = function ProgressBar(_ref) {
   var progress = _ref.progress,
     _ref$breakpoint = _ref.breakpoint,
@@ -22,7 +20,7 @@ var ProgressBar = exports.ProgressBar = function ProgressBar(_ref) {
     _ref$ariaLabel = _ref.ariaLabel,
     ariaLabel = _ref$ariaLabel === void 0 ? 'Loading progress' : _ref$ariaLabel;
   return /*#__PURE__*/_react.default.createElement(_styledBar.StyledBar, {
-    progress: getNormalizedProgress(progress),
+    progress: (0, _getNormalizedProgress.getNormalizedProgress)(progress),
     breakpoint: breakpoint,
     positionBottom: positionBottom,
     showOnTop: showOnTop,

package/dist/cjs/card/ui/progressBar/styledBar-compiled.js

@@ -1,67 +1,16 @@
-/* styledBar-compiled.tsx generated by @compiled/babel-plugin v3.0.1 */
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledBar = void 0;
-exports.generateResponsiveStyles = generateResponsiveStyles;
-require("./styledBar-compiled.compiled.css");
-var React = _interopRequireWildcard(require("react"));
-var _runtime = require("@compiled/react/runtime");
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _common = require("../common");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-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; }
-var height = 3;
-var padding = 1;
-var width = 95; // %
+exports.width = exports.padding = exports.height = void 0;
+var _StyledBar = require("./StyledBar-2");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
-var smallSizeSettings = {
-  marginBottom: 4
-};
-var largeSizeSettings = {
-  marginBottom: 12
-};
-function generateResponsiveStyles(breakpoint, positionBottom, showOnTop) {
-  var multiplier = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
-  var setting = breakpoint === _common.Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
-  var marginPositionBottom = _common.responsiveSettings[breakpoint].titleBox.verticalPadding;
-  var marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : (0, _common.getTitleBoxHeight)(breakpoint));
-  var spacing = "".concat(marginBottom, "px");
-  return showOnTop ? {
-    top: spacing
-  } : {
-    bottom: spacing
-  };
-}
-var styledBarStyles = null;
-var styleChild = null;
-var StyledBar = exports.StyledBar = function StyledBar(props) {
-  var progress = props.progress,
-    breakpoint = props.breakpoint,
-    positionBottom = props.positionBottom,
-    showOnTop = props.showOnTop,
-    ariaLabel = props.ariaLabel;
-  return /*#__PURE__*/React.createElement("div", {
-    id: "styledBar",
-    role: "progressbar",
-    "aria-valuenow": progress,
-    "aria-label": ariaLabel,
-    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _1yt4xh0m _2rkofajl _kqswstnw _1bsb1b7y _1ltv1ghs _bfhkrcrw _4t3i12iw _vchhusvi"]),
-    style: _objectSpread(_objectSpread({}, generateResponsiveStyles(breakpoint, positionBottom, showOnTop)), {}, {
-      "--_1xe2l1p": (0, _runtime.ix)("".concat(width, "%")),
-      "--_15ce6z9": (0, _runtime.ix)("".concat(height + padding * 2, "px")),
-      "--_cw4itz": (0, _runtime.ix)("".concat(padding, "px"))
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: "".concat(progress, "%")
-    },
-    className: (0, _runtime.ax)(["_2rkofajl _bfhk1p0d _1e0c1ule _4t3i1osq"])
-  }));
-};
-StyledBar.displayName = 'StyledProgressBar';
+var height = exports.height = 3;
+var padding = exports.padding = 1;
+var width = exports.width = 95;
+_StyledBar.StyledBar.displayName = 'StyledProgressBar';

package/dist/cjs/card/ui/progressBar/styledBar.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledBar = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledBarCompiled = require("./styledBar-compiled");
+var _StyledBar = require("./StyledBar-2");
 var StyledBar = exports.StyledBar = function StyledBar(props) {
-  return /*#__PURE__*/_react.default.createElement(_styledBarCompiled.StyledBar, props);
+  return /*#__PURE__*/_react.default.createElement(_StyledBar.StyledBar, props);
 };

package/dist/cjs/card/ui/progressBar/styledBarStyles.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styledBarStyles = void 0;
+var _react = require("@emotion/react");
+var _mixins = require("@atlaskit/media-ui/mixins");
+var _rgba = require("../rgba");
+var _generateResponsiveStyles = require("./generateResponsiveStyles");
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var height = 3;
+var padding = 1;
+var width = 95;
+
+// %
+var left = (100 - width) / 2;
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+var getStyledBarStylesBasedOnProps = function getStyledBarStylesBasedOnProps(_ref) {
+  var progress = _ref.progress,
+    breakpoint = _ref.breakpoint,
+    positionBottom = _ref.positionBottom,
+    showOnTop = _ref.showOnTop;
+  return "\n".concat(_mixins.borderRadius, "\noverflow: hidden;\nposition: absolute;\nwidth: ").concat(width, "%;\nleft: ").concat(left, "%;\nbackground-color: ").concat((0, _rgba.rgba)('#FFFFFF', 0.8), ";\nheight: ").concat(height + padding * 2, "px;\npadding: ").concat(padding, "px;\nbox-sizing: border-box;\n\n::before {\n  content: '';\n  width: ").concat(progress, "%;\n  height: 100%;\n  background-color: #44546F;\n  ").concat(_mixins.borderRadius, "\n  display: block;\n}\n").concat((0, _generateResponsiveStyles.generateResponsiveStyles)(breakpoint, positionBottom, showOnTop), "\n");
+};
+
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+var styledBarStyles = exports.styledBarStyles = function styledBarStyles(props) {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  return (0, _react.css)(getStyledBarStylesBasedOnProps(props));
+};
+styledBarStyles.displayName = 'StyledProgressBar';

package/dist/cjs/card/ui/rgba.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rgba = void 0;
+var hexToRgb = function hexToRgb(hex) {
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? "".concat(parseInt(result[1], 16), ",").concat(parseInt(result[2], 16), ",").concat(parseInt(result[3], 16)) : null;
+};
+var rgba = exports.rgba = function rgba(hex, opacity) {
+  return "rgba(".concat(hexToRgb(hex), ", ").concat(opacity, ")");
+};