@chayns-components/core 5.0.21 → 5.0.24

package/lib/cjs/components/grouped-image/GroupedImage.styles.js

@@ -16,7 +16,24 @@ const StyledGroupedImage = exports.StyledGroupedImage = _styledComponents.defaul
   $height
 }) => $height}px;
 `;
-const StyledGroupImageElement = exports.StyledGroupImageElement = _styledComponents.default.div`
+const StyledGroupImageElement = exports.StyledGroupImageElement = _styledComponents.default.div.attrs(({
+  $isSecondImage,
+  $hasMultipleImages,
+  $hasCornerImage,
+  $uuid
+}) => {
+  let clipPath;
+  if ($isSecondImage && $hasCornerImage || !$isSecondImage && !$hasMultipleImages && $hasCornerImage) {
+    clipPath = `url(#care-of-mask--${$uuid})`;
+  } else if (!$isSecondImage && $hasMultipleImages) {
+    clipPath = `url(#second-image-mask--${$uuid})`;
+  }
+  return {
+    style: {
+      clipPath
+    }
+  };
+})`
     aspect-ratio: 1;
     border-radius: ${({
   $shouldShowRoundImage
@@ -53,25 +70,6 @@ const StyledGroupImageElement = exports.StyledGroupImageElement = _styledCompone
                   left: 0;
               `}
 
-    ${({
-  $isSecondImage,
-  $hasMultipleImages,
-  $hasCornerImage,
-  $uuid
-}) => {
-  if ($isSecondImage && $hasCornerImage || !$isSecondImage && !$hasMultipleImages && $hasCornerImage) {
-    return (0, _styledComponents.css)`
-                clip-path: url(${`#care-of-mask--${$uuid}`});
-            `;
-  }
-  if (!$isSecondImage && $hasMultipleImages) {
-    return (0, _styledComponents.css)`
-                clip-path: url(${`#second-image-mask--${$uuid}`});
-            `;
-  }
-  return '';
-}}
-
     ${({
   $background,
   $shouldPreventBackground,

package/lib/cjs/components/grouped-image/GroupedImage.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupedImage.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledGroupedImage","exports","styled","div","$height","StyledGroupImageElement","$shouldShowRoundImage","$hasMultipleImages","$isSecondImage","css","$hasCornerImage","$uuid","$background","$shouldPreventBackground","theme","StyledCornerImage","img","StyledCornerElement","span"],"sources":["../../../../src/components/grouped-image/GroupedImage.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { CSSProperties } from 'react';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGroupedImageProps = WithTheme<{\n    $height: CSSProperties['height'];\n}>;\n\nexport const StyledGroupedImage = styled.div<StyledGroupedImageProps>`\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height}px;\n    position: relative;\n    width: ${({ $height }) => $height}px;\n`;\n\ntype StyledImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $isSecondImage?: boolean;\n    $shouldPreventBackground?: boolean;\n    $shouldShowRoundImage?: boolean;\n    $hasCornerImage: boolean;\n    $hasMultipleImages: boolean;\n    $uuid: string;\n}>;\n\nexport const StyledGroupImageElement = styled.div<StyledImageProps>`\n    aspect-ratio: 1;\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : '0')};\n    position: absolute;\n    overflow: hidden;\n\n    ${({ $hasMultipleImages, $isSecondImage }) => {\n        if (!$hasMultipleImages) {\n            return css`\n                height: 100%;\n            `;\n        }\n\n        if ($isSecondImage) {\n            return css`\n                height: 80%;\n            `;\n        }\n\n        return css`\n            height: 76%;\n        `;\n    }}\n\n    ${({ $isSecondImage }) =>\n        $isSecondImage\n            ? css`\n                  bottom: 0;\n                  right: 0;\n              `\n            : css`\n                  top: 0;\n                  left: 0;\n              `}\n\n    ${({ $isSecondImage, $hasMultipleImages, $hasCornerImage, $uuid }) => {\n        if (\n            ($isSecondImage && $hasCornerImage) ||\n            (!$isSecondImage && !$hasMultipleImages && $hasCornerImage)\n        ) {\n            return css`\n                clip-path: url(${`#care-of-mask--${$uuid}`});\n            `;\n        }\n\n        if (!$isSecondImage && $hasMultipleImages) {\n            return css`\n                clip-path: url(${`#second-image-mask--${$uuid}`});\n            `;\n        }\n\n        return '';\n    }}\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n    \n    img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n`;\n\ntype StyledCornerImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldPreventBackground?: boolean;\n    $hasMultipleImages: boolean;\n}>;\n\nexport const StyledCornerImage = styled.img<StyledCornerImageProps>`\n    aspect-ratio: 1;\n    bottom: 0;\n    height: ${({ $hasMultipleImages }) => ($hasMultipleImages ? '28%' : '38%')};\n    position: absolute;\n    right: 0;\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n`;\n\nexport const StyledCornerElement = styled.span`\n    height: 18px;\n    width: 18px;\n    position: absolute;\n    bottom: 0;\n    right: -5px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    & > * {\n        max-height: 100%;\n        max-width: 100%;\n        display: block;\n    }\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"GroupedImage.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledGroupedImage","exports","styled","div","$height","StyledGroupImageElement","attrs","$isSecondImage","$hasMultipleImages","$hasCornerImage","$uuid","clipPath","style","$shouldShowRoundImage","css","$background","$shouldPreventBackground","theme","StyledCornerImage","img","StyledCornerElement","span"],"sources":["../../../../src/components/grouped-image/GroupedImage.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { CSSProperties } from 'react';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGroupedImageProps = WithTheme<{\n    $height: CSSProperties['height'];\n}>;\n\nexport const StyledGroupedImage = styled.div<StyledGroupedImageProps>`\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height}px;\n    position: relative;\n    width: ${({ $height }) => $height}px;\n`;\n\ntype StyledImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $isSecondImage?: boolean;\n    $shouldPreventBackground?: boolean;\n    $shouldShowRoundImage?: boolean;\n    $hasCornerImage: boolean;\n    $hasMultipleImages: boolean;\n    $uuid: string;\n}>;\n\nexport const StyledGroupImageElement = styled.div.attrs<StyledImageProps>(\n    ({ $isSecondImage, $hasMultipleImages, $hasCornerImage, $uuid }) => {\n        let clipPath: string | undefined;\n        if (\n            ($isSecondImage && $hasCornerImage) ||\n            (!$isSecondImage && !$hasMultipleImages && $hasCornerImage)\n        ) {\n            clipPath = `url(#care-of-mask--${$uuid})`;\n        } else if (!$isSecondImage && $hasMultipleImages) {\n            clipPath = `url(#second-image-mask--${$uuid})`;\n        }\n\n        return {\n            style: {\n                clipPath,\n            },\n        };\n    },\n)`\n    aspect-ratio: 1;\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : '0')};\n    position: absolute;\n    overflow: hidden;\n\n    ${({ $hasMultipleImages, $isSecondImage }) => {\n        if (!$hasMultipleImages) {\n            return css`\n                height: 100%;\n            `;\n        }\n\n        if ($isSecondImage) {\n            return css`\n                height: 80%;\n            `;\n        }\n\n        return css`\n            height: 76%;\n        `;\n    }}\n\n    ${({ $isSecondImage }) =>\n        $isSecondImage\n            ? css`\n                  bottom: 0;\n                  right: 0;\n              `\n            : css`\n                  top: 0;\n                  left: 0;\n              `}\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n    \n    img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n`;\n\ntype StyledCornerImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldPreventBackground?: boolean;\n    $hasMultipleImages: boolean;\n}>;\n\nexport const StyledCornerImage = styled.img<StyledCornerImageProps>`\n    aspect-ratio: 1;\n    bottom: 0;\n    height: ${({ $hasMultipleImages }) => ($hasMultipleImages ? '28%' : '38%')};\n    position: absolute;\n    right: 0;\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n`;\n\nexport const StyledCornerElement = styled.span`\n    height: 18px;\n    width: 18px;\n    position: absolute;\n    bottom: 0;\n    right: -5px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    & > * {\n        max-height: 100%;\n        max-width: 100%;\n        display: block;\n    }\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/progress-bar/ProgressBar.js

@@ -4,92 +4,207 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _reactCompilerRuntime = require("react-compiler-runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _uuid = require("../../hooks/uuid");
 var _ProgressBar = require("./ProgressBar.styles");
+var _popup = require("../../types/popup");
+var _styledComponents = require("styled-components");
+var _Popup = _interopRequireDefault(require("../popup/Popup"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const 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); }
-const ProgressBar = ({
-  percentage,
-  label,
-  shouldHideProgress = false,
-  shouldShowLabelInline = false,
-  steps,
-  colors
-}) => {
-  const [internalPercentage, setInternalPercentage] = (0, _react.useState)(0);
+const ProgressBar = t0 => {
+  "use memo";
+
+  const $ = (0, _reactCompilerRuntime.c)(29);
+  const {
+    percentage,
+    label,
+    shouldHideProgress: t1,
+    shouldShowLabelInline: t2,
+    steps,
+    colors,
+    thumbLabel,
+    showShine: t3
+  } = t0;
+  const shouldHideProgress = t1 === undefined ? false : t1;
+  const shouldShowLabelInline = t2 === undefined ? false : t2;
+  const showShine = t3 === undefined ? false : t3;
   const uuid = (0, _uuid.useUuid)();
-  (0, _react.useEffect)(() => {
-    if (typeof percentage !== 'number') {
-      return;
+  const popupRef = (0, _react.useRef)(null);
+  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
+  let t4;
+  bb0: {
+    if (!showShine || percentage === undefined) {
+      t4 = null;
+      break bb0;
     }
-    if (percentage >= 0 && percentage <= 100) {
-      setInternalPercentage(percentage);
+    const shineCount = Math.ceil(6 * (percentage / 100));
+    const speed = 5 * (percentage / 100);
+    let t5;
+    if ($[0] !== shineCount) {
+      t5 = Array.from({
+        length: shineCount
+      });
+      $[0] = shineCount;
+      $[1] = t5;
+    } else {
+      t5 = $[1];
     }
-  }, [percentage]);
-  const progressBar = (0, _react.useMemo)(() => {
-    if (shouldHideProgress) {
-      return null;
+    let t6;
+    if ($[2] !== shineCount || $[3] !== speed || $[4] !== t5) {
+      t6 = t5.map((_, index) => /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarShine, {
+        key: `progress-bar-shine__${shineCount}__${index}`,
+        $speed: speed,
+        $delay: 5 / shineCount * index
+      }));
+      $[2] = shineCount;
+      $[3] = speed;
+      $[4] = t5;
+      $[5] = t6;
+    } else {
+      t6 = $[5];
     }
-    if (typeof percentage !== 'number') {
-      return /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarProgressWrapper, null, /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledMotionProgressBarProgress, {
-        key: `progress-bar-loop__${uuid}`,
+    t4 = t6;
+  }
+  const shineEffect = t4;
+  let t5;
+  if ($[6] !== (colors === null || colors === void 0 ? void 0 : colors.backgroundColor) || $[7] !== (colors === null || colors === void 0 ? void 0 : colors.primaryTextColor) || $[8] !== (colors === null || colors === void 0 ? void 0 : colors.progressColor) || $[9] !== (colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor) || $[10] !== (colors === null || colors === void 0 ? void 0 : colors.stepColor) || $[11] !== label || $[12] !== percentage || $[13] !== shineEffect || $[14] !== shouldHideProgress || $[15] !== shouldShowLabelInline || $[16] !== showShine || $[17] !== steps || $[18] !== theme || $[19] !== thumbLabel || $[20] !== uuid) {
+    colors === null || colors === void 0 || colors.backgroundColor;
+    colors === null || colors === void 0 || colors.primaryTextColor;
+    colors === null || colors === void 0 || colors.progressColor;
+    colors === null || colors === void 0 || colors.secondaryTextColor;
+    colors === null || colors === void 0 || colors.stepColor;
+    t5 = (() => {
+      if (shouldHideProgress) {
+        return null;
+      }
+      if (percentage === undefined) {
+        return /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarProgressWrapper, null, /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledMotionProgressBarProgress, {
+          key: `progress-bar-loop__${uuid}`,
+          $color: colors === null || colors === void 0 ? void 0 : colors.progressColor,
+          initial: {
+            width: "200px",
+            left: "-200px"
+          },
+          animate: {
+            width: "200px",
+            left: "100%"
+          },
+          exit: {
+            width: "200px",
+            left: "100%"
+          },
+          transition: {
+            type: "tween",
+            repeat: Infinity,
+            repeatDelay: 0,
+            duration: 1
+          }
+        }), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarBackground, {
+          $color: colors === null || colors === void 0 ? void 0 : colors.backgroundColor
+        }));
+      }
+      return /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarProgressWrapper, {
+        $isBig: shouldShowLabelInline
+      }, !!(steps !== null && steps !== void 0 && steps.length) && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarStepWrapper, null, steps.map(step => /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarStep, {
+        $position: step,
+        key: `progress-step-${step}`,
+        $color: colors === null || colors === void 0 ? void 0 : colors.stepColor
+      }))), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledMotionProgressBarProgress, {
         $color: colors === null || colors === void 0 ? void 0 : colors.progressColor,
+        key: `progress-bar__${uuid}`,
         initial: {
-          width: '200px',
-          left: '-200px'
+          width: "0%"
         },
         animate: {
-          width: '200px',
-          left: '100%'
+          width: `${percentage}%`
         },
         exit: {
-          width: '200px',
-          left: '100%'
+          width: "0%"
         },
         transition: {
-          type: 'tween',
-          repeat: Infinity,
-          repeatDelay: 0,
-          duration: 1
+          type: "tween"
+        },
+        onUpdate: () => {
+          var _popupRef$current;
+          return (_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.show();
+        },
+        onAnimationComplete: () => {
+          var _popupRef$current2;
+          return (_popupRef$current2 = popupRef.current) === null || _popupRef$current2 === void 0 ? void 0 : _popupRef$current2.show();
+        }
+      }, showShine && shineEffect, thumbLabel && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarThumbLabel, {
+        onClick: _temp
+      }, /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
+        theme: {
+          "000": (colors === null || colors === void 0 ? void 0 : colors.backgroundColor) ?? (theme === null || theme === void 0 ? void 0 : theme["104"]),
+          text: (colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor) ?? (theme === null || theme === void 0 ? void 0 : theme["300"])
+        }
+      }, /*#__PURE__*/_react.default.createElement(_Popup.default, {
+        ref: popupRef,
+        content: thumbLabel,
+        alignment: _popup.PopupAlignment.TopCenter,
+        onHide: () => {
+          var _popupRef$current3;
+          return (_popupRef$current3 = popupRef.current) === null || _popupRef$current3 === void 0 ? void 0 : _popupRef$current3.show();
         }
-      }), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarBackground, {
+      })))), shouldShowLabelInline && label && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarLabel, {
+        $shouldShowLabelInline: shouldShowLabelInline,
+        $primaryColor: colors === null || colors === void 0 ? void 0 : colors.primaryTextColor,
+        $secondaryColor: colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor,
+        $colorSplitPosition: percentage
+      }, label), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarBackground, {
         $color: colors === null || colors === void 0 ? void 0 : colors.backgroundColor
       }));
-    }
-    return /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarProgressWrapper, {
-      $isBig: shouldShowLabelInline
-    }, !!(steps !== null && steps !== void 0 && steps.length) && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarStepWrapper, null, steps.map(step => /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarStep, {
-      $position: step,
-      key: `progress-step-${step}`,
-      $color: colors === null || colors === void 0 ? void 0 : colors.stepColor
-    }))), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledMotionProgressBarProgress, {
-      $color: colors === null || colors === void 0 ? void 0 : colors.progressColor,
-      key: `progress-bar__${uuid}`,
-      initial: {
-        width: '0%'
-      },
-      animate: {
-        width: `${internalPercentage}%`
-      },
-      exit: {
-        width: '0%'
-      },
-      transition: {
-        type: 'tween'
-      }
-    }), shouldShowLabelInline && label && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarLabel, {
-      $shouldShowLabelInline: shouldShowLabelInline,
-      $primaryColor: colors === null || colors === void 0 ? void 0 : colors.primaryTextColor,
-      $secondaryColor: colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor,
-      $colorSplitPosition: internalPercentage
-    }, label), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarBackground, {
-      $color: colors === null || colors === void 0 ? void 0 : colors.backgroundColor
-    }));
-  }, [colors, internalPercentage, label, percentage, shouldHideProgress, shouldShowLabelInline, steps, uuid]);
-  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBar, null, progressBar, label && !shouldShowLabelInline && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarLabel, {
-    $primaryColor: colors === null || colors === void 0 ? void 0 : colors.primaryTextColor
-  }, label)), [progressBar, label, shouldShowLabelInline, colors === null || colors === void 0 ? void 0 : colors.primaryTextColor, colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor]);
+    })();
+    $[6] = colors === null || colors === void 0 ? void 0 : colors.backgroundColor;
+    $[7] = colors === null || colors === void 0 ? void 0 : colors.primaryTextColor;
+    $[8] = colors === null || colors === void 0 ? void 0 : colors.progressColor;
+    $[9] = colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor;
+    $[10] = colors === null || colors === void 0 ? void 0 : colors.stepColor;
+    $[11] = label;
+    $[12] = percentage;
+    $[13] = shineEffect;
+    $[14] = shouldHideProgress;
+    $[15] = shouldShowLabelInline;
+    $[16] = showShine;
+    $[17] = steps;
+    $[18] = theme;
+    $[19] = thumbLabel;
+    $[20] = uuid;
+    $[21] = t5;
+  } else {
+    t5 = $[21];
+  }
+  const progressBar = t5;
+  colors === null || colors === void 0 || colors.primaryTextColor;
+  let t6;
+  if ($[22] !== (colors === null || colors === void 0 ? void 0 : colors.primaryTextColor) || $[23] !== label || $[24] !== shouldShowLabelInline) {
+    t6 = label && !shouldShowLabelInline && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarLabel, {
+      $primaryColor: colors === null || colors === void 0 ? void 0 : colors.primaryTextColor
+    }, label);
+    $[22] = colors === null || colors === void 0 ? void 0 : colors.primaryTextColor;
+    $[23] = label;
+    $[24] = shouldShowLabelInline;
+    $[25] = t6;
+  } else {
+    t6 = $[25];
+  }
+  let t7;
+  if ($[26] !== progressBar || $[27] !== t6) {
+    t7 = /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBar, null, progressBar, t6);
+    $[26] = progressBar;
+    $[27] = t6;
+    $[28] = t7;
+  } else {
+    t7 = $[28];
+  }
+  return t7;
 };
 ProgressBar.displayName = 'ProgressBar';
 var _default = exports.default = ProgressBar;
+function _temp(event) {
+  return event.stopPropagation();
+}
 //# sourceMappingURL=ProgressBar.js.map

package/lib/cjs/components/progress-bar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","names":["_react","_interopRequireWildcard","require","_uuid","_ProgressBar","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ProgressBar","percentage","label","shouldHideProgress","shouldShowLabelInline","steps","colors","internalPercentage","setInternalPercentage","useState","uuid","useUuid","useEffect","progressBar","useMemo","createElement","StyledProgressBarProgressWrapper","StyledMotionProgressBarProgress","key","$color","progressColor","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","StyledProgressBarBackground","backgroundColor","$isBig","length","StyledProgressBarStepWrapper","map","step","StyledProgressBarStep","$position","stepColor","StyledProgressBarLabel","$shouldShowLabelInline","$primaryColor","primaryTextColor","$secondaryColor","secondaryTextColor","$colorSplitPosition","StyledProgressBar","displayName","_default","exports"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n    StyledMotionProgressBarProgress,\n    StyledProgressBar,\n    StyledProgressBarBackground,\n    StyledProgressBarLabel,\n    StyledProgressBarProgressWrapper,\n    StyledProgressBarStep,\n    StyledProgressBarStepWrapper,\n} from './ProgressBar.styles';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n    ? Acc[number]\n    : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n    backgroundColor?: string;\n    progressColor?: string;\n    stepColor?: string;\n    primaryTextColor?: string;\n    secondaryTextColor?: string;\n}\n\nexport type ProgressBarProps = {\n    /**\n     * The colors of the ProgressBar.\n     */\n    colors?: Colors;\n    /**\n     * The label that should be displayed under the progressbar.\n     */\n    label?: string;\n    /**\n     * The percentage of the progress. Number between 0 and 100.\n     */\n    percentage?: Range<0, 101>;\n    /**\n     * Whether the progress should be hide and just display the label.\n     */\n    shouldHideProgress?: boolean;\n    /**\n     * Whether the label should be displayed inside the ProgressBar.\n     */\n    shouldShowLabelInline?: boolean;\n    /**\n     * Visual marked steps.\n     */\n    steps?: Range<0, 101>[];\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n    percentage,\n    label,\n    shouldHideProgress = false,\n    shouldShowLabelInline = false,\n    steps,\n    colors,\n}) => {\n    const [internalPercentage, setInternalPercentage] = useState(0);\n    const uuid = useUuid();\n\n    useEffect(() => {\n        if (typeof percentage !== 'number') {\n            return;\n        }\n\n        if (percentage >= 0 && percentage <= 100) {\n            setInternalPercentage(percentage);\n        }\n    }, [percentage]);\n\n    const progressBar = useMemo(() => {\n        if (shouldHideProgress) {\n            return null;\n        }\n\n        if (typeof percentage !== 'number') {\n            return (\n                <StyledProgressBarProgressWrapper>\n                    <StyledMotionProgressBarProgress\n                        key={`progress-bar-loop__${uuid}`}\n                        $color={colors?.progressColor}\n                        initial={{ width: '200px', left: '-200px' }}\n                        animate={{ width: '200px', left: '100%' }}\n                        exit={{ width: '200px', left: '100%' }}\n                        transition={{\n                            type: 'tween',\n                            repeat: Infinity,\n                            repeatDelay: 0,\n                            duration: 1,\n                        }}\n                    />\n                    <StyledProgressBarBackground $color={colors?.backgroundColor} />\n                </StyledProgressBarProgressWrapper>\n            );\n        }\n\n        return (\n            <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline}>\n                {!!steps?.length && (\n                    <StyledProgressBarStepWrapper>\n                        {steps.map((step) => (\n                            <StyledProgressBarStep\n                                $position={step}\n                                key={`progress-step-${step}`}\n                                $color={colors?.stepColor}\n                            />\n                        ))}\n                    </StyledProgressBarStepWrapper>\n                )}\n                <StyledMotionProgressBarProgress\n                    $color={colors?.progressColor}\n                    key={`progress-bar__${uuid}`}\n                    initial={{ width: '0%' }}\n                    animate={{ width: `${internalPercentage}%` }}\n                    exit={{ width: '0%' }}\n                    transition={{ type: 'tween' }}\n                />\n                {shouldShowLabelInline && label && (\n                    <StyledProgressBarLabel\n                        $shouldShowLabelInline={shouldShowLabelInline}\n                        $primaryColor={colors?.primaryTextColor}\n                        $secondaryColor={colors?.secondaryTextColor}\n                        $colorSplitPosition={internalPercentage}\n                    >\n                        {label}\n                    </StyledProgressBarLabel>\n                )}\n                <StyledProgressBarBackground $color={colors?.backgroundColor} />\n            </StyledProgressBarProgressWrapper>\n        );\n    }, [\n        colors,\n        internalPercentage,\n        label,\n        percentage,\n        shouldHideProgress,\n        shouldShowLabelInline,\n        steps,\n        uuid,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledProgressBar>\n                {progressBar}\n                {label && !shouldShowLabelInline && (\n                    <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n                        {label}\n                    </StyledProgressBarLabel>\n                )}\n            </StyledProgressBar>\n        ),\n        [\n            progressBar,\n            label,\n            shouldShowLabelInline,\n            colors?.primaryTextColor,\n            colors?.secondaryTextColor,\n        ],\n    );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ProgressBar.js","names":["_react","_interopRequireWildcard","require","_uuid","_ProgressBar","_popup","_styledComponents","_Popup","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ProgressBar","t0","$","_reactCompilerRuntime","c","percentage","label","shouldHideProgress","t1","shouldShowLabelInline","t2","steps","colors","thumbLabel","showShine","t3","undefined","uuid","useUuid","popupRef","useRef","theme","useContext","ThemeContext","t4","bb0","shineCount","Math","ceil","speed","t5","Array","from","length","t6","map","_","index","createElement","StyledProgressBarShine","key","$delay","shineEffect","backgroundColor","primaryTextColor","progressColor","secondaryTextColor","stepColor","StyledProgressBarProgressWrapper","StyledMotionProgressBarProgress","$color","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","StyledProgressBarBackground","StyledProgressBarStepWrapper","step","StyledProgressBarStep","onUpdate","_popupRef$current","current","show","onAnimationComplete","_popupRef$current2","StyledProgressBarThumbLabel","onClick","_temp","ThemeProvider","text","alignment","PopupAlignment","TopCenter","onHide","_popupRef$current3","StyledProgressBarLabel","$primaryColor","$secondaryColor","progressBar","t7","StyledProgressBar","displayName","_default","exports","event","stopPropagation"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useContext, useMemo, useRef } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n    StyledMotionProgressBarProgress,\n    StyledProgressBar,\n    StyledProgressBarBackground,\n    StyledProgressBarLabel,\n    StyledProgressBarProgressWrapper,\n    StyledProgressBarShine,\n    StyledProgressBarStep,\n    StyledProgressBarStepWrapper,\n    StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n    ? Acc[number]\n    : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n    backgroundColor?: string;\n    progressColor?: string;\n    stepColor?: string;\n    primaryTextColor?: string;\n    secondaryTextColor?: string;\n}\n\nexport type ProgressBarProps = {\n    /**\n     * The colors of the ProgressBar.\n     */\n    colors?: Colors;\n    /**\n     * The label that should be displayed under the progressbar.\n     */\n    label?: string;\n    /**\n     * The percentage of the progress. Number between 0 and 100.\n     */\n    percentage?: Range<0, 101>;\n    /**\n     * Whether the progress should be hide and just display the label.\n     */\n    shouldHideProgress?: boolean;\n    /**\n     * Whether the label should be displayed inside the ProgressBar.\n     */\n    shouldShowLabelInline?: boolean;\n    /**\n     * Visual marked steps.\n     */\n    steps?: Range<0, 101>[];\n    /**\n     * The label that should be displayed on the thumb of the progress bar.\n     */\n    thumbLabel?: React.ReactNode;\n    /**\n     * Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n     */\n    showShine?: boolean;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n    percentage,\n    label,\n    shouldHideProgress = false,\n    shouldShowLabelInline = false,\n    steps,\n    colors,\n    thumbLabel,\n    showShine = false,\n}) => {\n    'use memo';\n\n    const uuid = useUuid();\n    const popupRef = useRef<PopupRef | null>(null);\n\n    const theme = useContext(ThemeContext) as Theme | undefined;\n\n    const shineEffect = useMemo(() => {\n        if (!showShine || percentage === undefined) return null;\n        const FULL_ANIMATION_LENGTH = 5;\n        const MAX_SHINE_COUNT = 6;\n\n        const shineCount = Math.ceil(MAX_SHINE_COUNT * (percentage / 100));\n        const speed = FULL_ANIMATION_LENGTH * (percentage / 100);\n        return Array.from({ length: shineCount }).map((_, index) => (\n            <StyledProgressBarShine\n                /* eslint-disable-next-line react/no-array-index-key */\n                key={`progress-bar-shine__${shineCount}__${index}`}\n                $speed={speed}\n                $delay={(FULL_ANIMATION_LENGTH / shineCount) * index}\n            />\n        ));\n    }, [percentage, showShine]);\n\n    const progressBar = useMemo(() => {\n        if (shouldHideProgress) {\n            return null;\n        }\n\n        if (percentage === undefined) {\n            return (\n                <StyledProgressBarProgressWrapper>\n                    <StyledMotionProgressBarProgress\n                        key={`progress-bar-loop__${uuid}`}\n                        $color={colors?.progressColor}\n                        initial={{ width: '200px', left: '-200px' }}\n                        animate={{ width: '200px', left: '100%' }}\n                        exit={{ width: '200px', left: '100%' }}\n                        transition={{\n                            type: 'tween',\n                            repeat: Infinity,\n                            repeatDelay: 0,\n                            duration: 1,\n                        }}\n                    />\n                    <StyledProgressBarBackground $color={colors?.backgroundColor} />\n                </StyledProgressBarProgressWrapper>\n            );\n        }\n\n        return (\n            <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline}>\n                {!!steps?.length && (\n                    <StyledProgressBarStepWrapper>\n                        {steps.map((step) => (\n                            <StyledProgressBarStep\n                                $position={step}\n                                key={`progress-step-${step}`}\n                                $color={colors?.stepColor}\n                            />\n                        ))}\n                    </StyledProgressBarStepWrapper>\n                )}\n                <StyledMotionProgressBarProgress\n                    $color={colors?.progressColor}\n                    key={`progress-bar__${uuid}`}\n                    initial={{ width: '0%' }}\n                    animate={{ width: `${percentage}%` }}\n                    exit={{ width: '0%' }}\n                    transition={{ type: 'tween' }}\n                    onUpdate={() => popupRef.current?.show()}\n                    onAnimationComplete={() => popupRef.current?.show()}\n                >\n                    {showShine && shineEffect}\n                    {thumbLabel && (\n                        <StyledProgressBarThumbLabel onClick={(event) => event.stopPropagation()}>\n                            <ThemeProvider\n                                theme={{\n                                    '000': colors?.backgroundColor ?? theme?.['104'],\n                                    text: colors?.secondaryTextColor ?? theme?.['300'],\n                                }}\n                            >\n                                <Popup\n                                    ref={popupRef}\n                                    content={thumbLabel}\n                                    alignment={PopupAlignment.TopCenter}\n                                    onHide={() => popupRef.current?.show()}\n                                >\n                                    {}\n                                </Popup>\n                            </ThemeProvider>\n                        </StyledProgressBarThumbLabel>\n                    )}\n                </StyledMotionProgressBarProgress>\n\n                {shouldShowLabelInline && label && (\n                    <StyledProgressBarLabel\n                        $shouldShowLabelInline={shouldShowLabelInline}\n                        $primaryColor={colors?.primaryTextColor}\n                        $secondaryColor={colors?.secondaryTextColor}\n                        $colorSplitPosition={percentage}\n                    >\n                        {label}\n                    </StyledProgressBarLabel>\n                )}\n\n                <StyledProgressBarBackground $color={colors?.backgroundColor} />\n            </StyledProgressBarProgressWrapper>\n        );\n    }, [\n        colors?.backgroundColor,\n        colors?.primaryTextColor,\n        colors?.progressColor,\n        colors?.secondaryTextColor,\n        colors?.stepColor,\n        label,\n        percentage,\n        shineEffect,\n        shouldHideProgress,\n        shouldShowLabelInline,\n        showShine,\n        steps,\n        theme,\n        thumbLabel,\n        uuid,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledProgressBar>\n                {progressBar}\n                {label && !shouldShowLabelInline && (\n                    <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n                        {label}\n                    </StyledProgressBarLabel>\n                )}\n            </StyledProgressBar>\n        ),\n        [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\n    );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/progress-bar/ProgressBar.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledProgressBarStepWrapper = exports.StyledProgressBarStep = exports.StyledProgressBarProgressWrapper = exports.StyledProgressBarLabel = exports.StyledProgressBarBackground = exports.StyledProgressBar = exports.StyledMotionProgressBarProgress = void 0;
+exports.StyledProgressBarThumbLabel = exports.StyledProgressBarStepWrapper = exports.StyledProgressBarStep = exports.StyledProgressBarShine = exports.StyledProgressBarProgressWrapper = exports.StyledProgressBarLabel = exports.StyledProgressBarBackground = exports.StyledProgressBar = exports.StyledMotionProgressBarProgress = void 0;
 var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const 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); }
@@ -29,11 +29,42 @@ const StyledProgressBarProgressWrapper = exports.StyledProgressBarProgressWrappe
   $isBig
 }) => $isBig ? 20 : 2}px;
 `;
+const shineMove = (0, _styledComponents.keyframes)`
+    from {
+        transform: translateX(-150%);
+    }
+    to {
+        transform: translateX(150%);
+    }
+`;
+const StyledProgressBarShine = exports.StyledProgressBarShine = _styledComponents.default.div.attrs(({
+  $delay
+}) => ({
+  style: {
+    animationDelay: `${$delay ?? 0}s`
+  }
+}))`
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 33%,
+        rgba(255, 255, 255, 0.5) 50%,
+        rgba(255, 255, 255, 0) 66%
+    );
+    transform: translateX(-150%);
+    animation: ${shineMove} ${({
+  $speed = 5
+}) => `${$speed}s`} linear infinite;
+    opacity: 0.95;
+`;
 const StyledMotionProgressBarProgress = exports.StyledMotionProgressBarProgress = (0, _styledComponents.default)(_react.motion.div)`
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
+    overflow: hidden;
     z-index: 2;
     display: flex;
     align-items: center;
@@ -97,4 +128,8 @@ const StyledProgressBarStep = exports.StyledProgressBarStep = _styledComponents.
   $position
 }) => $position}%;
 `;
+const StyledProgressBarThumbLabel = exports.StyledProgressBarThumbLabel = _styledComponents.default.div`
+    position: absolute;
+    right: 0;
+`;
 //# sourceMappingURL=ProgressBar.styles.js.map

package/lib/cjs/components/progress-bar/ProgressBar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledProgressBar","exports","styled","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$isBig","StyledMotionProgressBarProgress","motion","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","css","StyledProgressBarStepWrapper","StyledProgressBarStep","$position"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n    position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n    height: 100%;\n    width: 100%;\n    background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n        $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n    $isBig?: boolean;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    height: ${({ $isBig }) => ($isBig ? 20 : 10)}px;\n    border-radius: ${({ $isBig }) => ($isBig ? 20 : 2)}px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }>;\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    padding-left: 12px;\n    background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n        $color ?? theme.headline};\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n    $shouldShowLabelInline?: boolean;\n    $primaryColor?: string;\n    $secondaryColor?: string;\n    $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n    font-size: 85%;\n    color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n        $shouldShowLabelInline ? theme['100'] : theme.headline};\n    white-space: nowrap;\n\n    ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n        $colorSplitPosition &&\n        css`\n            position: absolute;\n            z-index: 2;\n            width: 100%;\n            height: 100%;\n\n            display: flex;\n            align-items: center;\n\n            padding-left: 8px;\n\n            font-weight: bold;\n\n            -webkit-background-clip: text;\n\n            color: transparent;\n            background-image: linear-gradient(\n                90deg,\n                ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n                ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n            );\n        `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n    $position: number;\n    $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n    background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n    height: 100%;\n    width: 2px;\n    position: absolute;\n    top: 0;\n    left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ProgressBar.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledProgressBar","exports","styled","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$isBig","shineMove","keyframes","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","motion","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","css","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n    position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n    height: 100%;\n    width: 100%;\n    background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n        $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n    $isBig?: boolean;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    height: ${({ $isBig }) => ($isBig ? 20 : 10)}px;\n    border-radius: ${({ $isBig }) => ($isBig ? 20 : 2)}px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }>;\n\nconst shineMove = keyframes`\n    from {\n        transform: translateX(-150%);\n    }\n    to {\n        transform: translateX(150%);\n    }\n`;\n\nexport const StyledProgressBarShine = styled.div.attrs<{ $speed?: number; $delay?: number }>(\n    ({ $delay }) => ({\n        style: { animationDelay: `${$delay ?? 0}s` },\n    }),\n)`\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(\n        90deg,\n        rgba(255, 255, 255, 0) 33%,\n        rgba(255, 255, 255, 0.5) 50%,\n        rgba(255, 255, 255, 0) 66%\n    );\n    transform: translateX(-150%);\n    animation: ${shineMove} ${({ $speed = 5 }) => `${$speed}s`} linear infinite;\n    opacity: 0.95;\n`;\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    overflow: hidden;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    padding-left: 12px;\n    background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n        $color ?? theme.headline};\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n    $shouldShowLabelInline?: boolean;\n    $primaryColor?: string;\n    $secondaryColor?: string;\n    $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n    font-size: 85%;\n    color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n        $shouldShowLabelInline ? theme['100'] : theme.headline};\n    white-space: nowrap;\n\n    ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n        $colorSplitPosition &&\n        css`\n            position: absolute;\n            z-index: 2;\n            width: 100%;\n            height: 100%;\n\n            display: flex;\n            align-items: center;\n\n            padding-left: 8px;\n\n            font-weight: bold;\n\n            -webkit-background-clip: text;\n\n            color: transparent;\n            background-image: linear-gradient(\n                90deg,\n                ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n                ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n            );\n        `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n    $position: number;\n    $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n    background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n    height: 100%;\n    width: 2px;\n    position: absolute;\n    top: 0;\n    left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n\nexport const StyledProgressBarThumbLabel = styled.div`\n    position: absolute;\n    right: 0;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAA2D,SAAAE,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,CAAAC,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAGpD,MAAMkB,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC3C;AACA,CAAC;AAIM,MAAMC,2BAA2B,GAAAH,OAAA,CAAAG,2BAAA,GAAGF,yBAAM,CAACC,GAAqC;AACvF;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAyC,CAAC,KACpEA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AAC9B,CAAC;AAMM,MAAME,gCAAgC,GAAAN,OAAA,CAAAM,gCAAA,GAAGL,yBAAM,CAACC,GAA0C;AACjG;AACA;AACA;AACA,cAAc,CAAC;EAAEK;AAAO,CAAC,KAAMA,MAAM,GAAG,EAAE,GAAG,EAAG;AAChD,qBAAqB,CAAC;EAAEA;AAAO,CAAC,KAAMA,MAAM,GAAG,EAAE,GAAG,CAAE;AACtD,CAAC;AAID,MAAMC,SAAS,GAAG,IAAAC,2BAAS;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,sBAAsB,GAAAV,OAAA,CAAAU,sBAAA,GAAGT,yBAAM,CAACC,GAAG,CAACS,KAAK,CAClD,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IAAEC,cAAc,EAAE,GAAGF,MAAM,IAAI,CAAC;EAAI;AAC/C,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBJ,SAAS,IAAI,CAAC;EAAEO,MAAM,GAAG;AAAE,CAAC,KAAK,GAAGA,MAAM,GAAG;AAC9D;AACA,CAAC;AAEM,MAAMC,+BAA+B,GAAAhB,OAAA,CAAAgB,+BAAA,GAAG,IAAAf,yBAAM,EAACgB,aAAM,CAACf,GAAG,CAAiC;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAuC,CAAC,KAClEA,MAAM,IAAID,KAAK,CAACc,QAAQ;AAChC,CAAC;AASM,MAAMC,sBAAsB,GAAAnB,OAAA,CAAAmB,sBAAA,GAAGlB,yBAAM,CAACC,GAAgC;AAC7E;AACA,aAAa,CAAC;EAAEE,KAAK;EAAEgB;AAAoD,CAAC,KACpEA,sBAAsB,GAAGhB,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACc,QAAQ;AAC9D;AACA;AACA,MAAM,CAAC;EAAEG,mBAAmB;EAAEC,aAAa;EAAEC,eAAe;EAAEnB;AAAM,CAAC,KAC7DiB,mBAAmB,IACnB,IAAAG,qBAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBF,aAAa,IAAIlB,KAAK,CAAC,KAAK,CAAC,IAAIiB,mBAAmB;AACtE,kBAAkBE,eAAe,IAAInB,KAAK,CAAC,KAAK,CAAC,IAAIiB,mBAAmB;AACxE;AACA,SAAS;AACT,CAAC;AAEM,MAAMI,4BAA4B,GAAAzB,OAAA,CAAAyB,4BAAA,GAAGxB,yBAAM,CAACC,GAAG;AACtD;AACA;AACA;AACA,CAAC;AAOM,MAAMwB,qBAAqB,GAAA1B,OAAA,CAAA0B,qBAAA,GAAGzB,yBAAM,CAACC,GAA+B;AAC3E,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAmC,CAAC,KAAKA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AACjG;AACA;AACA;AACA;AACA,YAAY,CAAC;EAAEuB;AAAsC,CAAC,KAAKA,SAAS;AACpE,CAAC;AAEM,MAAMC,2BAA2B,GAAA5B,OAAA,CAAA4B,2BAAA,GAAG3B,yBAAM,CAACC,GAAG;AACrD;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/grouped-image/GroupedImage.styles.js

@@ -9,7 +9,24 @@ export const StyledGroupedImage = styled.div`
   $height
 }) => $height}px;
 `;
-export const StyledGroupImageElement = styled.div`
+export const StyledGroupImageElement = styled.div.attrs(({
+  $isSecondImage,
+  $hasMultipleImages,
+  $hasCornerImage,
+  $uuid
+}) => {
+  let clipPath;
+  if ($isSecondImage && $hasCornerImage || !$isSecondImage && !$hasMultipleImages && $hasCornerImage) {
+    clipPath = `url(#care-of-mask--${$uuid})`;
+  } else if (!$isSecondImage && $hasMultipleImages) {
+    clipPath = `url(#second-image-mask--${$uuid})`;
+  }
+  return {
+    style: {
+      clipPath
+    }
+  };
+})`
     aspect-ratio: 1;
     border-radius: ${({
   $shouldShowRoundImage
@@ -46,25 +63,6 @@ export const StyledGroupImageElement = styled.div`
                   left: 0;
               `}
 
-    ${({
-  $isSecondImage,
-  $hasMultipleImages,
-  $hasCornerImage,
-  $uuid
-}) => {
-  if ($isSecondImage && $hasCornerImage || !$isSecondImage && !$hasMultipleImages && $hasCornerImage) {
-    return css`
-                clip-path: url(${`#care-of-mask--${$uuid}`});
-            `;
-  }
-  if (!$isSecondImage && $hasMultipleImages) {
-    return css`
-                clip-path: url(${`#second-image-mask--${$uuid}`});
-            `;
-  }
-  return '';
-}}
-
     ${({
   $background,
   $shouldPreventBackground,

package/lib/esm/components/grouped-image/GroupedImage.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupedImage.styles.js","names":["styled","css","StyledGroupedImage","div","$height","StyledGroupImageElement","$shouldShowRoundImage","$hasMultipleImages","$isSecondImage","$hasCornerImage","$uuid","$background","$shouldPreventBackground","theme","StyledCornerImage","img","StyledCornerElement","span"],"sources":["../../../../src/components/grouped-image/GroupedImage.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { CSSProperties } from 'react';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGroupedImageProps = WithTheme<{\n    $height: CSSProperties['height'];\n}>;\n\nexport const StyledGroupedImage = styled.div<StyledGroupedImageProps>`\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height}px;\n    position: relative;\n    width: ${({ $height }) => $height}px;\n`;\n\ntype StyledImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $isSecondImage?: boolean;\n    $shouldPreventBackground?: boolean;\n    $shouldShowRoundImage?: boolean;\n    $hasCornerImage: boolean;\n    $hasMultipleImages: boolean;\n    $uuid: string;\n}>;\n\nexport const StyledGroupImageElement = styled.div<StyledImageProps>`\n    aspect-ratio: 1;\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : '0')};\n    position: absolute;\n    overflow: hidden;\n\n    ${({ $hasMultipleImages, $isSecondImage }) => {\n        if (!$hasMultipleImages) {\n            return css`\n                height: 100%;\n            `;\n        }\n\n        if ($isSecondImage) {\n            return css`\n                height: 80%;\n            `;\n        }\n\n        return css`\n            height: 76%;\n        `;\n    }}\n\n    ${({ $isSecondImage }) =>\n        $isSecondImage\n            ? css`\n                  bottom: 0;\n                  right: 0;\n              `\n            : css`\n                  top: 0;\n                  left: 0;\n              `}\n\n    ${({ $isSecondImage, $hasMultipleImages, $hasCornerImage, $uuid }) => {\n        if (\n            ($isSecondImage && $hasCornerImage) ||\n            (!$isSecondImage && !$hasMultipleImages && $hasCornerImage)\n        ) {\n            return css`\n                clip-path: url(${`#care-of-mask--${$uuid}`});\n            `;\n        }\n\n        if (!$isSecondImage && $hasMultipleImages) {\n            return css`\n                clip-path: url(${`#second-image-mask--${$uuid}`});\n            `;\n        }\n\n        return '';\n    }}\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n    \n    img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n`;\n\ntype StyledCornerImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldPreventBackground?: boolean;\n    $hasMultipleImages: boolean;\n}>;\n\nexport const StyledCornerImage = styled.img<StyledCornerImageProps>`\n    aspect-ratio: 1;\n    bottom: 0;\n    height: ${({ $hasMultipleImages }) => ($hasMultipleImages ? '28%' : '38%')};\n    position: absolute;\n    right: 0;\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n`;\n\nexport const StyledCornerElement = styled.span`\n    height: 18px;\n    width: 18px;\n    position: absolute;\n    bottom: 0;\n    right: -5px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    & > * {\n        max-height: 100%;\n        max-width: 100%;\n        display: block;\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA,cAAc,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO;AACtC;AACA,aAAa,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AACrC,CAAC;AAYD,OAAO,MAAMC,uBAAuB,GAAGL,MAAM,CAACG,GAAqB;AACnE;AACA,qBAAqB,CAAC;EAAEG;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAG,GAAI;AACzF;AACA;AACA;AACA,MAAM,CAAC;EAAEC,kBAAkB;EAAEC;AAAe,CAAC,KAAK;EAC1C,IAAI,CAACD,kBAAkB,EAAE;IACrB,OAAON,GAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIO,cAAc,EAAE;IAChB,OAAOP,GAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EAAEO;AAAe,CAAC,KACjBA,cAAc,GACRP,GAAG;AACjB;AACA;AACA,eAAe,GACDA,GAAG;AACjB;AACA;AACA,eAAe;AACf;AACA,MAAM,CAAC;EAAEO,cAAc;EAAED,kBAAkB;EAAEE,eAAe;EAAEC;AAAM,CAAC,KAAK;EAClE,IACKF,cAAc,IAAIC,eAAe,IACjC,CAACD,cAAc,IAAI,CAACD,kBAAkB,IAAIE,eAAgB,EAC7D;IACE,OAAOR,GAAG;AACtB,iCAAiC,kBAAkBS,KAAK,EAAE;AAC1D,aAAa;EACL;EAEA,IAAI,CAACF,cAAc,IAAID,kBAAkB,EAAE;IACvC,OAAON,GAAG;AACtB,iCAAiC,uBAAuBS,KAAK,EAAE;AAC/D,aAAa;EACL;EAEA,OAAO,EAAE;AACb,CAAC;AACL;AACA,MAAM,CAAC;EAAEC,WAAW;EAAEC,wBAAwB;EAAEC;AAAM,CAAC,KAC/C,CAACD,wBAAwB,IACzBX,GAAG;AACX,0BAA0BU,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMC,iBAAiB,GAAGd,MAAM,CAACe,GAA2B;AACnE;AACA;AACA,cAAc,CAAC;EAAER;AAAmB,CAAC,KAAMA,kBAAkB,GAAG,KAAK,GAAG,KAAM;AAC9E;AACA;AACA;AACA,MAAM,CAAC;EAAEI,WAAW;EAAEC,wBAAwB;EAAEC;AAAM,CAAC,KAC/C,CAACD,wBAAwB,IACzBX,GAAG;AACX,0BAA0BU,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AACT,CAAC;AAED,OAAO,MAAMG,mBAAmB,GAAGhB,MAAM,CAACiB,IAAI;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"GroupedImage.styles.js","names":["styled","css","StyledGroupedImage","div","$height","StyledGroupImageElement","attrs","$isSecondImage","$hasMultipleImages","$hasCornerImage","$uuid","clipPath","style","$shouldShowRoundImage","$background","$shouldPreventBackground","theme","StyledCornerImage","img","StyledCornerElement","span"],"sources":["../../../../src/components/grouped-image/GroupedImage.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { CSSProperties } from 'react';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGroupedImageProps = WithTheme<{\n    $height: CSSProperties['height'];\n}>;\n\nexport const StyledGroupedImage = styled.div<StyledGroupedImageProps>`\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height}px;\n    position: relative;\n    width: ${({ $height }) => $height}px;\n`;\n\ntype StyledImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $isSecondImage?: boolean;\n    $shouldPreventBackground?: boolean;\n    $shouldShowRoundImage?: boolean;\n    $hasCornerImage: boolean;\n    $hasMultipleImages: boolean;\n    $uuid: string;\n}>;\n\nexport const StyledGroupImageElement = styled.div.attrs<StyledImageProps>(\n    ({ $isSecondImage, $hasMultipleImages, $hasCornerImage, $uuid }) => {\n        let clipPath: string | undefined;\n        if (\n            ($isSecondImage && $hasCornerImage) ||\n            (!$isSecondImage && !$hasMultipleImages && $hasCornerImage)\n        ) {\n            clipPath = `url(#care-of-mask--${$uuid})`;\n        } else if (!$isSecondImage && $hasMultipleImages) {\n            clipPath = `url(#second-image-mask--${$uuid})`;\n        }\n\n        return {\n            style: {\n                clipPath,\n            },\n        };\n    },\n)`\n    aspect-ratio: 1;\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : '0')};\n    position: absolute;\n    overflow: hidden;\n\n    ${({ $hasMultipleImages, $isSecondImage }) => {\n        if (!$hasMultipleImages) {\n            return css`\n                height: 100%;\n            `;\n        }\n\n        if ($isSecondImage) {\n            return css`\n                height: 80%;\n            `;\n        }\n\n        return css`\n            height: 76%;\n        `;\n    }}\n\n    ${({ $isSecondImage }) =>\n        $isSecondImage\n            ? css`\n                  bottom: 0;\n                  right: 0;\n              `\n            : css`\n                  top: 0;\n                  left: 0;\n              `}\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n    \n    img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n`;\n\ntype StyledCornerImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldPreventBackground?: boolean;\n    $hasMultipleImages: boolean;\n}>;\n\nexport const StyledCornerImage = styled.img<StyledCornerImageProps>`\n    aspect-ratio: 1;\n    bottom: 0;\n    height: ${({ $hasMultipleImages }) => ($hasMultipleImages ? '28%' : '38%')};\n    position: absolute;\n    right: 0;\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n`;\n\nexport const StyledCornerElement = styled.span`\n    height: 18px;\n    width: 18px;\n    position: absolute;\n    bottom: 0;\n    right: -5px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    & > * {\n        max-height: 100%;\n        max-width: 100%;\n        display: block;\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA,cAAc,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO;AACtC;AACA,aAAa,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AACrC,CAAC;AAYD,OAAO,MAAMC,uBAAuB,GAAGL,MAAM,CAACG,GAAG,CAACG,KAAK,CACnD,CAAC;EAAEC,cAAc;EAAEC,kBAAkB;EAAEC,eAAe;EAAEC;AAAM,CAAC,KAAK;EAChE,IAAIC,QAA4B;EAChC,IACKJ,cAAc,IAAIE,eAAe,IACjC,CAACF,cAAc,IAAI,CAACC,kBAAkB,IAAIC,eAAgB,EAC7D;IACEE,QAAQ,GAAG,sBAAsBD,KAAK,GAAG;EAC7C,CAAC,MAAM,IAAI,CAACH,cAAc,IAAIC,kBAAkB,EAAE;IAC9CG,QAAQ,GAAG,2BAA2BD,KAAK,GAAG;EAClD;EAEA,OAAO;IACHE,KAAK,EAAE;MACHD;IACJ;EACJ,CAAC;AACL,CACJ,CAAC;AACD;AACA,qBAAqB,CAAC;EAAEE;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAG,GAAI;AACzF;AACA;AACA;AACA,MAAM,CAAC;EAAEL,kBAAkB;EAAED;AAAe,CAAC,KAAK;EAC1C,IAAI,CAACC,kBAAkB,EAAE;IACrB,OAAOP,GAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIM,cAAc,EAAE;IAChB,OAAON,GAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EAAEM;AAAe,CAAC,KACjBA,cAAc,GACRN,GAAG;AACjB;AACA;AACA,eAAe,GACDA,GAAG;AACjB;AACA;AACA,eAAe;AACf;AACA,MAAM,CAAC;EAAEa,WAAW;EAAEC,wBAAwB;EAAEC;AAAM,CAAC,KAC/C,CAACD,wBAAwB,IACzBd,GAAG;AACX,0BAA0Ba,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMC,iBAAiB,GAAGjB,MAAM,CAACkB,GAA2B;AACnE;AACA;AACA,cAAc,CAAC;EAAEV;AAAmB,CAAC,KAAMA,kBAAkB,GAAG,KAAK,GAAG,KAAM;AAC9E;AACA;AACA;AACA,MAAM,CAAC;EAAEM,WAAW;EAAEC,wBAAwB;EAAEC;AAAM,CAAC,KAC/C,CAACD,wBAAwB,IACzBd,GAAG;AACX,0BAA0Ba,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AACT,CAAC;AAED,OAAO,MAAMG,mBAAmB,GAAGnB,MAAM,CAACoB,IAAI;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/progress-bar/ProgressBar.js

@@ -1,88 +1,193 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { c as _c } from "react-compiler-runtime";
+import React, { useContext, useMemo, useRef } from 'react';
 import { useUuid } from '../../hooks/uuid';
-import { StyledMotionProgressBarProgress, StyledProgressBar, StyledProgressBarBackground, StyledProgressBarLabel, StyledProgressBarProgressWrapper, StyledProgressBarStep, StyledProgressBarStepWrapper } from './ProgressBar.styles';
-const ProgressBar = ({
-  percentage,
-  label,
-  shouldHideProgress = false,
-  shouldShowLabelInline = false,
-  steps,
-  colors
-}) => {
-  const [internalPercentage, setInternalPercentage] = useState(0);
+import { StyledMotionProgressBarProgress, StyledProgressBar, StyledProgressBarBackground, StyledProgressBarLabel, StyledProgressBarProgressWrapper, StyledProgressBarShine, StyledProgressBarStep, StyledProgressBarStepWrapper, StyledProgressBarThumbLabel } from './ProgressBar.styles';
+import { PopupAlignment } from '../../types/popup';
+import { ThemeContext, ThemeProvider } from 'styled-components';
+import Popup from '../popup/Popup';
+const ProgressBar = t0 => {
+  "use memo";
+
+  const $ = _c(29);
+  const {
+    percentage,
+    label,
+    shouldHideProgress: t1,
+    shouldShowLabelInline: t2,
+    steps,
+    colors,
+    thumbLabel,
+    showShine: t3
+  } = t0;
+  const shouldHideProgress = t1 === undefined ? false : t1;
+  const shouldShowLabelInline = t2 === undefined ? false : t2;
+  const showShine = t3 === undefined ? false : t3;
   const uuid = useUuid();
-  useEffect(() => {
-    if (typeof percentage !== 'number') {
-      return;
+  const popupRef = useRef(null);
+  const theme = useContext(ThemeContext);
+  let t4;
+  bb0: {
+    if (!showShine || percentage === undefined) {
+      t4 = null;
+      break bb0;
     }
-    if (percentage >= 0 && percentage <= 100) {
-      setInternalPercentage(percentage);
+    const shineCount = Math.ceil(6 * (percentage / 100));
+    const speed = 5 * (percentage / 100);
+    let t5;
+    if ($[0] !== shineCount) {
+      t5 = Array.from({
+        length: shineCount
+      });
+      $[0] = shineCount;
+      $[1] = t5;
+    } else {
+      t5 = $[1];
     }
-  }, [percentage]);
-  const progressBar = useMemo(() => {
-    if (shouldHideProgress) {
-      return null;
+    let t6;
+    if ($[2] !== shineCount || $[3] !== speed || $[4] !== t5) {
+      t6 = t5.map((_, index) => /*#__PURE__*/React.createElement(StyledProgressBarShine, {
+        key: `progress-bar-shine__${shineCount}__${index}`,
+        $speed: speed,
+        $delay: 5 / shineCount * index
+      }));
+      $[2] = shineCount;
+      $[3] = speed;
+      $[4] = t5;
+      $[5] = t6;
+    } else {
+      t6 = $[5];
     }
-    if (typeof percentage !== 'number') {
-      return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
-        key: `progress-bar-loop__${uuid}`,
+    t4 = t6;
+  }
+  const shineEffect = t4;
+  let t5;
+  if ($[6] !== colors?.backgroundColor || $[7] !== colors?.primaryTextColor || $[8] !== colors?.progressColor || $[9] !== colors?.secondaryTextColor || $[10] !== colors?.stepColor || $[11] !== label || $[12] !== percentage || $[13] !== shineEffect || $[14] !== shouldHideProgress || $[15] !== shouldShowLabelInline || $[16] !== showShine || $[17] !== steps || $[18] !== theme || $[19] !== thumbLabel || $[20] !== uuid) {
+    colors?.backgroundColor;
+    colors?.primaryTextColor;
+    colors?.progressColor;
+    colors?.secondaryTextColor;
+    colors?.stepColor;
+    t5 = (() => {
+      if (shouldHideProgress) {
+        return null;
+      }
+      if (percentage === undefined) {
+        return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
+          key: `progress-bar-loop__${uuid}`,
+          $color: colors?.progressColor,
+          initial: {
+            width: "200px",
+            left: "-200px"
+          },
+          animate: {
+            width: "200px",
+            left: "100%"
+          },
+          exit: {
+            width: "200px",
+            left: "100%"
+          },
+          transition: {
+            type: "tween",
+            repeat: Infinity,
+            repeatDelay: 0,
+            duration: 1
+          }
+        }), /*#__PURE__*/React.createElement(StyledProgressBarBackground, {
+          $color: colors?.backgroundColor
+        }));
+      }
+      return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, {
+        $isBig: shouldShowLabelInline
+      }, !!steps?.length && /*#__PURE__*/React.createElement(StyledProgressBarStepWrapper, null, steps.map(step => /*#__PURE__*/React.createElement(StyledProgressBarStep, {
+        $position: step,
+        key: `progress-step-${step}`,
+        $color: colors?.stepColor
+      }))), /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
         $color: colors?.progressColor,
+        key: `progress-bar__${uuid}`,
         initial: {
-          width: '200px',
-          left: '-200px'
+          width: "0%"
         },
         animate: {
-          width: '200px',
-          left: '100%'
+          width: `${percentage}%`
         },
         exit: {
-          width: '200px',
-          left: '100%'
+          width: "0%"
         },
         transition: {
-          type: 'tween',
-          repeat: Infinity,
-          repeatDelay: 0,
-          duration: 1
+          type: "tween"
+        },
+        onUpdate: () => popupRef.current?.show(),
+        onAnimationComplete: () => popupRef.current?.show()
+      }, showShine && shineEffect, thumbLabel && /*#__PURE__*/React.createElement(StyledProgressBarThumbLabel, {
+        onClick: _temp
+      }, /*#__PURE__*/React.createElement(ThemeProvider, {
+        theme: {
+          "000": colors?.backgroundColor ?? theme?.["104"],
+          text: colors?.secondaryTextColor ?? theme?.["300"]
         }
-      }), /*#__PURE__*/React.createElement(StyledProgressBarBackground, {
+      }, /*#__PURE__*/React.createElement(Popup, {
+        ref: popupRef,
+        content: thumbLabel,
+        alignment: PopupAlignment.TopCenter,
+        onHide: () => popupRef.current?.show()
+      })))), shouldShowLabelInline && label && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
+        $shouldShowLabelInline: shouldShowLabelInline,
+        $primaryColor: colors?.primaryTextColor,
+        $secondaryColor: colors?.secondaryTextColor,
+        $colorSplitPosition: percentage
+      }, label), /*#__PURE__*/React.createElement(StyledProgressBarBackground, {
         $color: colors?.backgroundColor
       }));
-    }
-    return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, {
-      $isBig: shouldShowLabelInline
-    }, !!steps?.length && /*#__PURE__*/React.createElement(StyledProgressBarStepWrapper, null, steps.map(step => /*#__PURE__*/React.createElement(StyledProgressBarStep, {
-      $position: step,
-      key: `progress-step-${step}`,
-      $color: colors?.stepColor
-    }))), /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
-      $color: colors?.progressColor,
-      key: `progress-bar__${uuid}`,
-      initial: {
-        width: '0%'
-      },
-      animate: {
-        width: `${internalPercentage}%`
-      },
-      exit: {
-        width: '0%'
-      },
-      transition: {
-        type: 'tween'
-      }
-    }), shouldShowLabelInline && label && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
-      $shouldShowLabelInline: shouldShowLabelInline,
-      $primaryColor: colors?.primaryTextColor,
-      $secondaryColor: colors?.secondaryTextColor,
-      $colorSplitPosition: internalPercentage
-    }, label), /*#__PURE__*/React.createElement(StyledProgressBarBackground, {
-      $color: colors?.backgroundColor
-    }));
-  }, [colors, internalPercentage, label, percentage, shouldHideProgress, shouldShowLabelInline, steps, uuid]);
-  return useMemo(() => /*#__PURE__*/React.createElement(StyledProgressBar, null, progressBar, label && !shouldShowLabelInline && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
-    $primaryColor: colors?.primaryTextColor
-  }, label)), [progressBar, label, shouldShowLabelInline, colors?.primaryTextColor, colors?.secondaryTextColor]);
+    })();
+    $[6] = colors?.backgroundColor;
+    $[7] = colors?.primaryTextColor;
+    $[8] = colors?.progressColor;
+    $[9] = colors?.secondaryTextColor;
+    $[10] = colors?.stepColor;
+    $[11] = label;
+    $[12] = percentage;
+    $[13] = shineEffect;
+    $[14] = shouldHideProgress;
+    $[15] = shouldShowLabelInline;
+    $[16] = showShine;
+    $[17] = steps;
+    $[18] = theme;
+    $[19] = thumbLabel;
+    $[20] = uuid;
+    $[21] = t5;
+  } else {
+    t5 = $[21];
+  }
+  const progressBar = t5;
+  colors?.primaryTextColor;
+  let t6;
+  if ($[22] !== colors?.primaryTextColor || $[23] !== label || $[24] !== shouldShowLabelInline) {
+    t6 = label && !shouldShowLabelInline && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
+      $primaryColor: colors?.primaryTextColor
+    }, label);
+    $[22] = colors?.primaryTextColor;
+    $[23] = label;
+    $[24] = shouldShowLabelInline;
+    $[25] = t6;
+  } else {
+    t6 = $[25];
+  }
+  let t7;
+  if ($[26] !== progressBar || $[27] !== t6) {
+    t7 = /*#__PURE__*/React.createElement(StyledProgressBar, null, progressBar, t6);
+    $[26] = progressBar;
+    $[27] = t6;
+    $[28] = t7;
+  } else {
+    t7 = $[28];
+  }
+  return t7;
 };
 ProgressBar.displayName = 'ProgressBar';
 export default ProgressBar;
+function _temp(event) {
+  return event.stopPropagation();
+}
 //# sourceMappingURL=ProgressBar.js.map

package/lib/esm/components/progress-bar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","names":["React","useEffect","useMemo","useState","useUuid","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLabel","StyledProgressBarProgressWrapper","StyledProgressBarStep","StyledProgressBarStepWrapper","ProgressBar","percentage","label","shouldHideProgress","shouldShowLabelInline","steps","colors","internalPercentage","setInternalPercentage","uuid","progressBar","createElement","key","$color","progressColor","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","backgroundColor","$isBig","length","map","step","$position","stepColor","$shouldShowLabelInline","$primaryColor","primaryTextColor","$secondaryColor","secondaryTextColor","$colorSplitPosition","displayName"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n    StyledMotionProgressBarProgress,\n    StyledProgressBar,\n    StyledProgressBarBackground,\n    StyledProgressBarLabel,\n    StyledProgressBarProgressWrapper,\n    StyledProgressBarStep,\n    StyledProgressBarStepWrapper,\n} from './ProgressBar.styles';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n    ? Acc[number]\n    : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n    backgroundColor?: string;\n    progressColor?: string;\n    stepColor?: string;\n    primaryTextColor?: string;\n    secondaryTextColor?: string;\n}\n\nexport type ProgressBarProps = {\n    /**\n     * The colors of the ProgressBar.\n     */\n    colors?: Colors;\n    /**\n     * The label that should be displayed under the progressbar.\n     */\n    label?: string;\n    /**\n     * The percentage of the progress. Number between 0 and 100.\n     */\n    percentage?: Range<0, 101>;\n    /**\n     * Whether the progress should be hide and just display the label.\n     */\n    shouldHideProgress?: boolean;\n    /**\n     * Whether the label should be displayed inside the ProgressBar.\n     */\n    shouldShowLabelInline?: boolean;\n    /**\n     * Visual marked steps.\n     */\n    steps?: Range<0, 101>[];\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n    percentage,\n    label,\n    shouldHideProgress = false,\n    shouldShowLabelInline = false,\n    steps,\n    colors,\n}) => {\n    const [internalPercentage, setInternalPercentage] = useState(0);\n    const uuid = useUuid();\n\n    useEffect(() => {\n        if (typeof percentage !== 'number') {\n            return;\n        }\n\n        if (percentage >= 0 && percentage <= 100) {\n            setInternalPercentage(percentage);\n        }\n    }, [percentage]);\n\n    const progressBar = useMemo(() => {\n        if (shouldHideProgress) {\n            return null;\n        }\n\n        if (typeof percentage !== 'number') {\n            return (\n                <StyledProgressBarProgressWrapper>\n                    <StyledMotionProgressBarProgress\n                        key={`progress-bar-loop__${uuid}`}\n                        $color={colors?.progressColor}\n                        initial={{ width: '200px', left: '-200px' }}\n                        animate={{ width: '200px', left: '100%' }}\n                        exit={{ width: '200px', left: '100%' }}\n                        transition={{\n                            type: 'tween',\n                            repeat: Infinity,\n                            repeatDelay: 0,\n                            duration: 1,\n                        }}\n                    />\n                    <StyledProgressBarBackground $color={colors?.backgroundColor} />\n                </StyledProgressBarProgressWrapper>\n            );\n        }\n\n        return (\n            <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline}>\n                {!!steps?.length && (\n                    <StyledProgressBarStepWrapper>\n                        {steps.map((step) => (\n                            <StyledProgressBarStep\n                                $position={step}\n                                key={`progress-step-${step}`}\n                                $color={colors?.stepColor}\n                            />\n                        ))}\n                    </StyledProgressBarStepWrapper>\n                )}\n                <StyledMotionProgressBarProgress\n                    $color={colors?.progressColor}\n                    key={`progress-bar__${uuid}`}\n                    initial={{ width: '0%' }}\n                    animate={{ width: `${internalPercentage}%` }}\n                    exit={{ width: '0%' }}\n                    transition={{ type: 'tween' }}\n                />\n                {shouldShowLabelInline && label && (\n                    <StyledProgressBarLabel\n                        $shouldShowLabelInline={shouldShowLabelInline}\n                        $primaryColor={colors?.primaryTextColor}\n                        $secondaryColor={colors?.secondaryTextColor}\n                        $colorSplitPosition={internalPercentage}\n                    >\n                        {label}\n                    </StyledProgressBarLabel>\n                )}\n                <StyledProgressBarBackground $color={colors?.backgroundColor} />\n            </StyledProgressBarProgressWrapper>\n        );\n    }, [\n        colors,\n        internalPercentage,\n        label,\n        percentage,\n        shouldHideProgress,\n        shouldShowLabelInline,\n        steps,\n        uuid,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledProgressBar>\n                {progressBar}\n                {label && !shouldShowLabelInline && (\n                    <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n                        {label}\n                    </StyledProgressBarLabel>\n                )}\n            </StyledProgressBar>\n        ),\n        [\n            progressBar,\n            label,\n            shouldShowLabelInline,\n            colors?.primaryTextColor,\n            colors?.secondaryTextColor,\n        ],\n    );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ProgressBar.js","names":["React","useContext","useMemo","useRef","useUuid","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLabel","StyledProgressBarProgressWrapper","StyledProgressBarShine","StyledProgressBarStep","StyledProgressBarStepWrapper","StyledProgressBarThumbLabel","PopupAlignment","ThemeContext","ThemeProvider","Popup","ProgressBar","t0","$","_c","percentage","label","shouldHideProgress","t1","shouldShowLabelInline","t2","steps","colors","thumbLabel","showShine","t3","undefined","uuid","popupRef","theme","t4","bb0","shineCount","Math","ceil","speed","t5","Array","from","length","t6","map","_","index","createElement","key","$delay","shineEffect","backgroundColor","primaryTextColor","progressColor","secondaryTextColor","stepColor","$color","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","step","onUpdate","current","show","onAnimationComplete","onClick","_temp","text","alignment","TopCenter","onHide","$primaryColor","$secondaryColor","progressBar","t7","displayName","event","stopPropagation"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useContext, useMemo, useRef } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n    StyledMotionProgressBarProgress,\n    StyledProgressBar,\n    StyledProgressBarBackground,\n    StyledProgressBarLabel,\n    StyledProgressBarProgressWrapper,\n    StyledProgressBarShine,\n    StyledProgressBarStep,\n    StyledProgressBarStepWrapper,\n    StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n    ? Acc[number]\n    : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n    backgroundColor?: string;\n    progressColor?: string;\n    stepColor?: string;\n    primaryTextColor?: string;\n    secondaryTextColor?: string;\n}\n\nexport type ProgressBarProps = {\n    /**\n     * The colors of the ProgressBar.\n     */\n    colors?: Colors;\n    /**\n     * The label that should be displayed under the progressbar.\n     */\n    label?: string;\n    /**\n     * The percentage of the progress. Number between 0 and 100.\n     */\n    percentage?: Range<0, 101>;\n    /**\n     * Whether the progress should be hide and just display the label.\n     */\n    shouldHideProgress?: boolean;\n    /**\n     * Whether the label should be displayed inside the ProgressBar.\n     */\n    shouldShowLabelInline?: boolean;\n    /**\n     * Visual marked steps.\n     */\n    steps?: Range<0, 101>[];\n    /**\n     * The label that should be displayed on the thumb of the progress bar.\n     */\n    thumbLabel?: React.ReactNode;\n    /**\n     * Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n     */\n    showShine?: boolean;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n    percentage,\n    label,\n    shouldHideProgress = false,\n    shouldShowLabelInline = false,\n    steps,\n    colors,\n    thumbLabel,\n    showShine = false,\n}) => {\n    'use memo';\n\n    const uuid = useUuid();\n    const popupRef = useRef<PopupRef | null>(null);\n\n    const theme = useContext(ThemeContext) as Theme | undefined;\n\n    const shineEffect = useMemo(() => {\n        if (!showShine || percentage === undefined) return null;\n        const FULL_ANIMATION_LENGTH = 5;\n        const MAX_SHINE_COUNT = 6;\n\n        const shineCount = Math.ceil(MAX_SHINE_COUNT * (percentage / 100));\n        const speed = FULL_ANIMATION_LENGTH * (percentage / 100);\n        return Array.from({ length: shineCount }).map((_, index) => (\n            <StyledProgressBarShine\n                /* eslint-disable-next-line react/no-array-index-key */\n                key={`progress-bar-shine__${shineCount}__${index}`}\n                $speed={speed}\n                $delay={(FULL_ANIMATION_LENGTH / shineCount) * index}\n            />\n        ));\n    }, [percentage, showShine]);\n\n    const progressBar = useMemo(() => {\n        if (shouldHideProgress) {\n            return null;\n        }\n\n        if (percentage === undefined) {\n            return (\n                <StyledProgressBarProgressWrapper>\n                    <StyledMotionProgressBarProgress\n                        key={`progress-bar-loop__${uuid}`}\n                        $color={colors?.progressColor}\n                        initial={{ width: '200px', left: '-200px' }}\n                        animate={{ width: '200px', left: '100%' }}\n                        exit={{ width: '200px', left: '100%' }}\n                        transition={{\n                            type: 'tween',\n                            repeat: Infinity,\n                            repeatDelay: 0,\n                            duration: 1,\n                        }}\n                    />\n                    <StyledProgressBarBackground $color={colors?.backgroundColor} />\n                </StyledProgressBarProgressWrapper>\n            );\n        }\n\n        return (\n            <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline}>\n                {!!steps?.length && (\n                    <StyledProgressBarStepWrapper>\n                        {steps.map((step) => (\n                            <StyledProgressBarStep\n                                $position={step}\n                                key={`progress-step-${step}`}\n                                $color={colors?.stepColor}\n                            />\n                        ))}\n                    </StyledProgressBarStepWrapper>\n                )}\n                <StyledMotionProgressBarProgress\n                    $color={colors?.progressColor}\n                    key={`progress-bar__${uuid}`}\n                    initial={{ width: '0%' }}\n                    animate={{ width: `${percentage}%` }}\n                    exit={{ width: '0%' }}\n                    transition={{ type: 'tween' }}\n                    onUpdate={() => popupRef.current?.show()}\n                    onAnimationComplete={() => popupRef.current?.show()}\n                >\n                    {showShine && shineEffect}\n                    {thumbLabel && (\n                        <StyledProgressBarThumbLabel onClick={(event) => event.stopPropagation()}>\n                            <ThemeProvider\n                                theme={{\n                                    '000': colors?.backgroundColor ?? theme?.['104'],\n                                    text: colors?.secondaryTextColor ?? theme?.['300'],\n                                }}\n                            >\n                                <Popup\n                                    ref={popupRef}\n                                    content={thumbLabel}\n                                    alignment={PopupAlignment.TopCenter}\n                                    onHide={() => popupRef.current?.show()}\n                                >\n                                    {}\n                                </Popup>\n                            </ThemeProvider>\n                        </StyledProgressBarThumbLabel>\n                    )}\n                </StyledMotionProgressBarProgress>\n\n                {shouldShowLabelInline && label && (\n                    <StyledProgressBarLabel\n                        $shouldShowLabelInline={shouldShowLabelInline}\n                        $primaryColor={colors?.primaryTextColor}\n                        $secondaryColor={colors?.secondaryTextColor}\n                        $colorSplitPosition={percentage}\n                    >\n                        {label}\n                    </StyledProgressBarLabel>\n                )}\n\n                <StyledProgressBarBackground $color={colors?.backgroundColor} />\n            </StyledProgressBarProgressWrapper>\n        );\n    }, [\n        colors?.backgroundColor,\n        colors?.primaryTextColor,\n        colors?.progressColor,\n        colors?.secondaryTextColor,\n        colors?.stepColor,\n        label,\n        percentage,\n        shineEffect,\n        shouldHideProgress,\n        shouldShowLabelInline,\n        showShine,\n        steps,\n        theme,\n        thumbLabel,\n        uuid,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledProgressBar>\n                {progressBar}\n                {label && !shouldShowLabelInline && (\n                    <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n                        {label}\n                    </StyledProgressBarLabel>\n                )}\n            </StyledProgressBar>\n        ),\n        [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\n    );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/progress-bar/ProgressBar.styles.js

@@ -1,5 +1,5 @@
 import { motion } from 'motion/react';
-import styled, { css } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 export const StyledProgressBar = styled.div`
     position: relative;
 `;
@@ -22,11 +22,42 @@ export const StyledProgressBarProgressWrapper = styled.div`
   $isBig
 }) => $isBig ? 20 : 2}px;
 `;
+const shineMove = keyframes`
+    from {
+        transform: translateX(-150%);
+    }
+    to {
+        transform: translateX(150%);
+    }
+`;
+export const StyledProgressBarShine = styled.div.attrs(({
+  $delay
+}) => ({
+  style: {
+    animationDelay: `${$delay ?? 0}s`
+  }
+}))`
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 33%,
+        rgba(255, 255, 255, 0.5) 50%,
+        rgba(255, 255, 255, 0) 66%
+    );
+    transform: translateX(-150%);
+    animation: ${shineMove} ${({
+  $speed = 5
+}) => `${$speed}s`} linear infinite;
+    opacity: 0.95;
+`;
 export const StyledMotionProgressBarProgress = styled(motion.div)`
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
+    overflow: hidden;
     z-index: 2;
     display: flex;
     align-items: center;
@@ -90,4 +121,8 @@ export const StyledProgressBarStep = styled.div`
   $position
 }) => $position}%;
 `;
+export const StyledProgressBarThumbLabel = styled.div`
+    position: absolute;
+    right: 0;
+`;
 //# sourceMappingURL=ProgressBar.styles.js.map

package/lib/esm/components/progress-bar/ProgressBar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","css","StyledProgressBar","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$isBig","StyledMotionProgressBarProgress","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","StyledProgressBarStepWrapper","StyledProgressBarStep","$position"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n    position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n    height: 100%;\n    width: 100%;\n    background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n        $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n    $isBig?: boolean;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    height: ${({ $isBig }) => ($isBig ? 20 : 10)}px;\n    border-radius: ${({ $isBig }) => ($isBig ? 20 : 2)}px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }>;\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    padding-left: 12px;\n    background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n        $color ?? theme.headline};\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n    $shouldShowLabelInline?: boolean;\n    $primaryColor?: string;\n    $secondaryColor?: string;\n    $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n    font-size: 85%;\n    color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n        $shouldShowLabelInline ? theme['100'] : theme.headline};\n    white-space: nowrap;\n\n    ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n        $colorSplitPosition &&\n        css`\n            position: absolute;\n            z-index: 2;\n            width: 100%;\n            height: 100%;\n\n            display: flex;\n            align-items: center;\n\n            padding-left: 8px;\n\n            font-weight: bold;\n\n            -webkit-background-clip: text;\n\n            color: transparent;\n            background-image: linear-gradient(\n                90deg,\n                ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n                ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n            );\n        `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n    $position: number;\n    $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n    background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n    height: 100%;\n    width: 2px;\n    position: absolute;\n    top: 0;\n    left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,GAAG;AAC3C;AACA,CAAC;AAID,OAAO,MAAMC,2BAA2B,GAAGJ,MAAM,CAACG,GAAqC;AACvF;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAyC,CAAC,KACpEA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AAC9B,CAAC;AAMD,OAAO,MAAME,gCAAgC,GAAGP,MAAM,CAACG,GAA0C;AACjG;AACA;AACA;AACA,cAAc,CAAC;EAAEK;AAAO,CAAC,KAAMA,MAAM,GAAG,EAAE,GAAG,EAAG;AAChD,qBAAqB,CAAC;EAAEA;AAAO,CAAC,KAAMA,MAAM,GAAG,EAAE,GAAG,CAAE;AACtD,CAAC;AAID,OAAO,MAAMC,+BAA+B,GAAGT,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAuC,CAAC,KAClEA,MAAM,IAAID,KAAK,CAACK,QAAQ;AAChC,CAAC;AASD,OAAO,MAAMC,sBAAsB,GAAGX,MAAM,CAACG,GAAgC;AAC7E;AACA,aAAa,CAAC;EAAEE,KAAK;EAAEO;AAAoD,CAAC,KACpEA,sBAAsB,GAAGP,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACK,QAAQ;AAC9D;AACA;AACA,MAAM,CAAC;EAAEG,mBAAmB;EAAEC,aAAa;EAAEC,eAAe;EAAEV;AAAM,CAAC,KAC7DQ,mBAAmB,IACnBZ,GAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBa,aAAa,IAAIT,KAAK,CAAC,KAAK,CAAC,IAAIQ,mBAAmB;AACtE,kBAAkBE,eAAe,IAAIV,KAAK,CAAC,KAAK,CAAC,IAAIQ,mBAAmB;AACxE;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMG,4BAA4B,GAAGhB,MAAM,CAACG,GAAG;AACtD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMc,qBAAqB,GAAGjB,MAAM,CAACG,GAA+B;AAC3E,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAmC,CAAC,KAAKA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AACjG;AACA;AACA;AACA;AACA,YAAY,CAAC;EAAEa;AAAsC,CAAC,KAAKA,SAAS;AACpE,CAAC","ignoreList":[]}
+{"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","css","keyframes","StyledProgressBar","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$isBig","shineMove","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n    position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n    height: 100%;\n    width: 100%;\n    background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n        $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n    $isBig?: boolean;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    height: ${({ $isBig }) => ($isBig ? 20 : 10)}px;\n    border-radius: ${({ $isBig }) => ($isBig ? 20 : 2)}px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }>;\n\nconst shineMove = keyframes`\n    from {\n        transform: translateX(-150%);\n    }\n    to {\n        transform: translateX(150%);\n    }\n`;\n\nexport const StyledProgressBarShine = styled.div.attrs<{ $speed?: number; $delay?: number }>(\n    ({ $delay }) => ({\n        style: { animationDelay: `${$delay ?? 0}s` },\n    }),\n)`\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(\n        90deg,\n        rgba(255, 255, 255, 0) 33%,\n        rgba(255, 255, 255, 0.5) 50%,\n        rgba(255, 255, 255, 0) 66%\n    );\n    transform: translateX(-150%);\n    animation: ${shineMove} ${({ $speed = 5 }) => `${$speed}s`} linear infinite;\n    opacity: 0.95;\n`;\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    overflow: hidden;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    padding-left: 12px;\n    background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n        $color ?? theme.headline};\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n    $shouldShowLabelInline?: boolean;\n    $primaryColor?: string;\n    $secondaryColor?: string;\n    $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n    font-size: 85%;\n    color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n        $shouldShowLabelInline ? theme['100'] : theme.headline};\n    white-space: nowrap;\n\n    ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n        $colorSplitPosition &&\n        css`\n            position: absolute;\n            z-index: 2;\n            width: 100%;\n            height: 100%;\n\n            display: flex;\n            align-items: center;\n\n            padding-left: 8px;\n\n            font-weight: bold;\n\n            -webkit-background-clip: text;\n\n            color: transparent;\n            background-image: linear-gradient(\n                90deg,\n                ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n                ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n            );\n        `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n    $position: number;\n    $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n    background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n    height: 100%;\n    width: 2px;\n    position: absolute;\n    top: 0;\n    left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n\nexport const StyledProgressBarThumbLabel = styled.div`\n    position: absolute;\n    right: 0;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAG1D,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAAG;AAC3C;AACA,CAAC;AAID,OAAO,MAAMC,2BAA2B,GAAGL,MAAM,CAACI,GAAqC;AACvF;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAyC,CAAC,KACpEA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AAC9B,CAAC;AAMD,OAAO,MAAME,gCAAgC,GAAGR,MAAM,CAACI,GAA0C;AACjG;AACA;AACA;AACA,cAAc,CAAC;EAAEK;AAAO,CAAC,KAAMA,MAAM,GAAG,EAAE,GAAG,EAAG;AAChD,qBAAqB,CAAC;EAAEA;AAAO,CAAC,KAAMA,MAAM,GAAG,EAAE,GAAG,CAAE;AACtD,CAAC;AAID,MAAMC,SAAS,GAAGR,SAAS;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMS,sBAAsB,GAAGX,MAAM,CAACI,GAAG,CAACQ,KAAK,CAClD,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IAAEC,cAAc,EAAE,GAAGF,MAAM,IAAI,CAAC;EAAI;AAC/C,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBH,SAAS,IAAI,CAAC;EAAEM,MAAM,GAAG;AAAE,CAAC,KAAK,GAAGA,MAAM,GAAG;AAC9D;AACA,CAAC;AAED,OAAO,MAAMC,+BAA+B,GAAGjB,MAAM,CAACD,MAAM,CAACK,GAAG,CAAiC;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAuC,CAAC,KAClEA,MAAM,IAAID,KAAK,CAACY,QAAQ;AAChC,CAAC;AASD,OAAO,MAAMC,sBAAsB,GAAGnB,MAAM,CAACI,GAAgC;AAC7E;AACA,aAAa,CAAC;EAAEE,KAAK;EAAEc;AAAoD,CAAC,KACpEA,sBAAsB,GAAGd,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACY,QAAQ;AAC9D;AACA;AACA,MAAM,CAAC;EAAEG,mBAAmB;EAAEC,aAAa;EAAEC,eAAe;EAAEjB;AAAM,CAAC,KAC7De,mBAAmB,IACnBpB,GAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBqB,aAAa,IAAIhB,KAAK,CAAC,KAAK,CAAC,IAAIe,mBAAmB;AACtE,kBAAkBE,eAAe,IAAIjB,KAAK,CAAC,KAAK,CAAC,IAAIe,mBAAmB;AACxE;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMG,4BAA4B,GAAGxB,MAAM,CAACI,GAAG;AACtD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMqB,qBAAqB,GAAGzB,MAAM,CAACI,GAA+B;AAC3E,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAmC,CAAC,KAAKA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AACjG;AACA;AACA;AACA;AACA,YAAY,CAAC;EAAEoB;AAAsC,CAAC,KAAKA,SAAS;AACpE,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAG3B,MAAM,CAACI,GAAG;AACrD;AACA;AACA,CAAC","ignoreList":[]}

package/lib/types/components/grouped-image/GroupedImage.styles.d.ts

@@ -13,7 +13,9 @@ type StyledImageProps = WithTheme<{
     $hasMultipleImages: boolean;
     $uuid: string;
 }>;
-export declare const StyledGroupImageElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledImageProps>> & string;
+export declare const StyledGroupImageElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}>, StyledImageProps>, never>> & string;
 type StyledCornerImageProps = WithTheme<{
     $background?: CSSProperties['background'];
     $shouldPreventBackground?: boolean;

package/lib/types/components/progress-bar/ProgressBar.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
 type Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
 interface Colors {
@@ -33,6 +33,14 @@ export type ProgressBarProps = {
      * Visual marked steps.
      */
     steps?: Range<0, 101>[];
+    /**
+     * The label that should be displayed on the thumb of the progress bar.
+     */
+    thumbLabel?: React.ReactNode;
+    /**
+     * Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.
+     */
+    showShine?: boolean;
 };
 declare const ProgressBar: FC<ProgressBarProps>;
 export default ProgressBar;

package/lib/types/components/progress-bar/ProgressBar.styles.d.ts

@@ -11,6 +11,12 @@ export declare const StyledProgressBarProgressWrapper: import("styled-components
 type StyledProgressBarProgressProps = WithTheme<{
     $color?: string;
 }>;
+export declare const StyledProgressBarShine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}>, {
+    $speed?: number;
+    $delay?: number;
+}>, never>> & string;
 export declare const StyledMotionProgressBarProgress: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, StyledProgressBarProgressProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
@@ -27,4 +33,5 @@ type StyledProgressBarStepProps = WithTheme<{
     $color?: string;
 }>;
 export declare const StyledProgressBarStep: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProgressBarStepProps>> & string;
+export declare const StyledProgressBarThumbLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.21",
+    "version": "5.0.24",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -86,5 +86,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "bb71f793404d168943ca75bde5b462f34a80a1cd"
+    "gitHead": "b9ab91825d63be8a824757ec2f50632d289276b9"
 }