@chayns-components/core 5.0.21 → 5.0.25

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":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AAWA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AAEA,IAAAK,MAAA,GAAAC,sBAAA,CAAAN,OAAA;AAAmC,SAAAM,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAZ,uBAAA,YAAAA,CAAAQ,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAmDnC,MAAMgB,WAAiC,GAAGC,EAAA;EAAA;;EAAA,MAAAC,CAAA,OAAAC,qBAAA,CAAAC,CAAA;EAAC;IAAAC,UAAA;IAAAC,KAAA;IAAAC,kBAAA,EAAAC,EAAA;IAAAC,qBAAA,EAAAC,EAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,UAAA;IAAAC,SAAA,EAAAC;EAAA,IAAAd,EAS1C;EANG,MAAAM,kBAAA,GAAAC,EAA0B,KAA1BQ,SAA0B,GAA1B,KAA0B,GAA1BR,EAA0B;EAC1B,MAAAC,qBAAA,GAAAC,EAA6B,KAA7BM,SAA6B,GAA7B,KAA6B,GAA7BN,EAA6B;EAI7B,MAAAI,SAAA,GAAAC,EAAiB,KAAjBC,SAAiB,GAAjB,KAAiB,GAAjBD,EAAiB;EAIjB,MAAAE,IAAA,GAAa,IAAAC,aAAO,EAAC,CAAC;EACtB,MAAAC,QAAA,GAAiB,IAAAC,aAAM,EAAkB,IAAI,CAAC;EAE9C,MAAAC,KAAA,GAAc,IAAAC,iBAAU,EAACC,8BAAY,CAAC;EAAsB,IAAAC,EAAA;EAAAC,GAAA;IAGxD,IAAI,CAACX,SAAqC,IAAxBT,UAAU,KAAKW,SAAS;MAAEQ,EAAA,GAAO,IAAI;MAAX,MAAAC,GAAA;IAAY;IAIxD,MAAAC,UAAA,GAAmBC,IAAI,CAAAC,IAAK,CAFJ,CAAC,IAEuBvB,UAAU,GAAG,GAAG,CAAC,CAAC;IAClE,MAAAwB,KAAA,GAJ8B,CAAC,IAIQxB,UAAU,GAAG,GAAG,CAAC;IAAC,IAAAyB,EAAA;IAAA,IAAA5B,CAAA,QAAAwB,UAAA;MAClDI,EAAA,GAAAC,KAAK,CAAAC,IAAK,CAAC;QAAAC,MAAA,EAAUP;MAAW,CAAC,CAAC;MAAAxB,CAAA,MAAAwB,UAAA;MAAAxB,CAAA,MAAA4B,EAAA;IAAA;MAAAA,EAAA,GAAA5B,CAAA;IAAA;IAAA,IAAAgC,EAAA;IAAA,IAAAhC,CAAA,QAAAwB,UAAA,IAAAxB,CAAA,QAAA2B,KAAA,IAAA3B,CAAA,QAAA4B,EAAA;MAAlCI,EAAA,GAAAJ,EAAkC,CAAAK,GAAI,CAAC,CAAAC,CAAA,EAAAC,KAAA,kBAC1CjE,MAAA,CAAAW,OAAA,CAAAuD,aAAA,CAAC9D,YAAA,CAAA+D,sBAAsB;QAEdC,GAA6C,EAA7C,uBAAuBd,UAAU,KAAKW,KAAK,EAAE;QAC1CR,MAAK,EAALA,KAAK;QACLY,MAA4C,EAV9B,CAAC,GAUUf,UAAU,GAAIW;MAAK,CACvD,CACJ,CAAC;MAAAnC,CAAA,MAAAwB,UAAA;MAAAxB,CAAA,MAAA2B,KAAA;MAAA3B,CAAA,MAAA4B,EAAA;MAAA5B,CAAA,MAAAgC,EAAA;IAAA;MAAAA,EAAA,GAAAhC,CAAA;IAAA;IAPFsB,EAAA,GAAOU,EAOL;EAAC;EAdP,MAAAQ,WAAA,GAAoBlB,EAeO;EAAC,IAAAM,EAAA;EAAA,IAAA5B,CAAA,SAAAU,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAA+B,eAAA,KAAAzC,CAAA,SAAAU,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAAgC,gBAAA,KAAA1C,CAAA,SAAAU,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAAiC,aAAA,KAAA3C,CAAA,SAAAU,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAAkC,kBAAA,KAAA5C,CAAA,UAAAU,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAAmC,SAAA,KAAA7C,CAAA,SAAAI,KAAA,IAAAJ,CAAA,SAAAG,UAAA,IAAAH,CAAA,SAAAwC,WAAA,IAAAxC,CAAA,SAAAK,kBAAA,IAAAL,CAAA,SAAAO,qBAAA,IAAAP,CAAA,SAAAY,SAAA,IAAAZ,CAAA,SAAAS,KAAA,IAAAT,CAAA,SAAAmB,KAAA,IAAAnB,CAAA,SAAAW,UAAA,IAAAX,CAAA,SAAAe,IAAA;IAwFxBL,MAAM,aAANA,MAAM,eAANA,MAAM,CAAA+B,eAAiB;IACvB/B,MAAM,aAANA,MAAM,eAANA,MAAM,CAAAgC,gBAAkB;IACxBhC,MAAM,aAANA,MAAM,eAANA,MAAM,CAAAiC,aAAe;IACrBjC,MAAM,aAANA,MAAM,eAANA,MAAM,CAAAkC,kBAAoB;IAC1BlC,MAAM,aAANA,MAAM,eAANA,MAAM,CAAAmC,SAAW;IA1FDjB,EAAA,IAAQ;MACxB,IAAIvB,kBAAkB;QAAA,OACX,IAAI;MAAA;MAGf,IAAIF,UAAU,KAAKW,SAAS;QAAA,oBAEpB5C,MAAA,CAAAW,OAAA,CAAAuD,aAAA,CAAC9D,YAAA,CAAAwE,gCAAgC,qBAC7B5E,MAAA,CAAAW,OAAA,CAAAuD,aAAA,CAAC9D,YAAA,CAAAyE,+BAA+B;UACvBT,GAA4B,EAA5B,sBAAsBvB,IAAI,EAAE;UACzBiC,MAAqB,EAArBtC,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAAiC,aAAe;UACpBM,OAAkC,EAAlC;YAAAC,KAAA,EAAS,OAAO;YAAAC,IAAA,EAAQ;UAAS,CAAC;UAClCC,OAAgC,EAAhC;YAAAF,KAAA,EAAS,OAAO;YAAAC,IAAA,EAAQ;UAAO,CAAC;UACnCE,IAAgC,EAAhC;YAAAH,KAAA,EAAS,OAAO;YAAAC,IAAA,EAAQ;UAAO,CAAC;UAC1BG,UAKX,EALW;YAAAC,IAAA,EACF,OAAO;YAAAC,MAAA,EACLC,QAAQ;YAAAC,WAAA,EACH,CAAC;YAAAC,QAAA,EACJ;UACd;QAAC,CACJ,CAAC,eACFzF,MAAA,CAAAW,OAAA,CAAAuD,aAAA,CAAC9D,YAAA,CAAAsF,2BAA2B;UAASZ,MAAuB,EAAvBtC,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAA+B;QAAiB,CAAG,CACjC,CAAC;MAAA;MAE1C,oBAGGvE,MAAA,CAAAW,OAAA,CAAAuD,aAAA,CAAC9D,YAAA,CAAAwE,gCAAgC;QAASvC,MAAqB,EAArBA;MAAqB,GAC1D,CAAC,EAACE,KAAK,aAALA,KAAK,eAALA,KAAK,CAAAsB,MAAQ,CAUf,iBAVA7D,MAAA,CAAAW,OAAA,CAAAuD,aAAA,CACI9D,YAAA,CAAAuF,4BAA4B,QACxBpD,KAAK,CAAAwB,GAAI,CAAC6B,IAAA,iBACP5F,MAAA,CAAAW,OAAA,CAAAuD,aAAA,CAAC9D,YAAA,CAAAyF,qBAAqB;QACPD,SAAI,EAAJA,IAAI;QACVxB,GAAuB,EAAvB,iBAAiBwB,IAAI,EAAE;QACpBd,MAAiB,EAAjBtC,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAAmC;MAAW,CAC5B,CACJ,CAET,CAAC,eACD3E,MAAA,CAAAW,OAAA,CAAAuD,aAAA,CAAC9D,YAAA,CAAAyE,+BAA+B;QACpBC,MAAqB,EAArBtC,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAAiC,aAAe;QACxBL,GAAuB,EAAvB,iBAAiBvB,IAAI,EAAE;QACnBkC,OAAe,EAAf;UAAAC,KAAA,EAAS;QAAK,CAAC;QACfE,OAA2B,EAA3B;UAAAF,KAAA,EAAS,GAAG/C,UAAU;QAAI,CAAC;QAC9BkD,IAAe,EAAf;UAAAH,KAAA,EAAS;QAAK,CAAC;QACTI,UAAiB,EAAjB;UAAAC,IAAA,EAAQ;QAAQ,CAAC;QACnBS,QAA8B,EAA9BA,CAAA;UAAA,IAAAC,iBAAA;UAAA,QAAAA,iBAAA,GAAMhD,QAAQ,CAAAiD,OAAc,cAAAD,iBAAA,uBAAtBA,iBAAA,CAAAE,IAAwB,CAAD,CAAC;QAAA;QACnBC,mBAA8B,EAA9BA,CAAA;UAAA,IAAAC,kBAAA;UAAA,QAAAA,kBAAA,GAAMpD,QAAQ,CAAAiD,OAAc,cAAAG,kBAAA,uBAAtBA,kBAAA,CAAAF,IAAwB,CAAD,CAAC;QAAA;MAAA,GAElDvD,SAAwB,IAAxB4B,WAAwB,EACxB7B,UAkBA,iBAlBAzC,MAAA,CAAAW,OAAA,CAAAuD,aAAA,CACI9D,YAAA,CAAAgG,2BAA2B;QAAUC,OAAkC,EAAlCC;MAAkC,gBACpEtG,MAAA,CAAAW,OAAA,CAAAuD,aAAA,CAAC5D,iBAAA,CAAAiG,aAAa;QACHtD,KAGN,EAHM;UAAA,OACI,CAAAT,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAA+B,eAAmC,MAAdtB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,KAAK,CAAC;UAAAuD,IAAA,EAC1C,CAAAhE,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAAkC,kBAAsC,MAAdzB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,KAAK,CAAC;QACtD;MAAC,gBAEDjD,MAAA,CAAAW,OAAA,CAAAuD,aAAA,CAAC3D,MAAA,CAAAI,OAAK;QACGoC,GAAQ,EAARA,QAAQ;QACJN,OAAU,EAAVA,UAAU;QACRgE,SAAwB,EAAxBC,qBAAc,CAAAC,SAAU;QAC3BC,MAA8B,EAA9BA,CAAA;UAAA,IAAAC,kBAAA;UAAA,QAAAA,kBAAA,GAAM9D,QAAQ,CAAAiD,OAAc,cAAAa,kBAAA,uBAAtBA,kBAAA,CAAAZ,IAAwB,CAAD,CAAC;QAAA;MAAA,CAGnC,CACI,CAEvB,CAC6B,CAAC,EAEjC5D,qBAA8B,IAA9BH,KASA,iBATAlC,MAAA,CAAAW,OAAA,CAAAuD,aAAA,CACI9D,YAAA,CAAA0G,sBAAsB;QACKzE,sBAAqB,EAArBA,qBAAqB;QAC9B0E,aAAwB,EAAxBvE,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAAgC,gBAAkB;QACtBwC,eAA0B,EAA1BxE,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAAkC,kBAAoB;QACtBzC,mBAAU,EAAVA;MAAU,GAE9BC,KAET,CAAC,eAEDlC,MAAA,CAAAW,OAAA,CAAAuD,aAAA,CAAC9D,YAAA,CAAAsF,2BAA2B;QAASZ,MAAuB,EAAvBtC,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAA+B;MAAiB,CAAG,CACjC,CAAC;IAAA,CAE1C,EAgBA,CAAC;IAAAzC,CAAA,MAAAU,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAA+B,eAAA;IAAAzC,CAAA,MAAAU,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAAgC,gBAAA;IAAA1C,CAAA,MAAAU,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAAiC,aAAA;IAAA3C,CAAA,MAAAU,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAAkC,kBAAA;IAAA5C,CAAA,OAAAU,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAAmC,SAAA;IAAA7C,CAAA,OAAAI,KAAA;IAAAJ,CAAA,OAAAG,UAAA;IAAAH,CAAA,OAAAwC,WAAA;IAAAxC,CAAA,OAAAK,kBAAA;IAAAL,CAAA,OAAAO,qBAAA;IAAAP,CAAA,OAAAY,SAAA;IAAAZ,CAAA,OAAAS,KAAA;IAAAT,CAAA,OAAAmB,KAAA;IAAAnB,CAAA,OAAAW,UAAA;IAAAX,CAAA,OAAAe,IAAA;IAAAf,CAAA,OAAA4B,EAAA;EAAA;IAAAA,EAAA,GAAA5B,CAAA;EAAA;EArGF,MAAAmF,WAAA,GAAoBvD,EAqGlB;EAaGlB,MAAM,aAANA,MAAM,eAANA,MAAM,CAAAgC,gBAAkB;EAAA,IAAAV,EAAA;EAAA,IAAAhC,CAAA,UAAAU,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAAgC,gBAAA,KAAA1C,CAAA,SAAAI,KAAA,IAAAJ,CAAA,SAAAO,qBAAA;IAPhByB,EAAA,GAAA5B,KAA+B,IAA/B,CAAUG,qBAIV,iBAJArC,MAAA,CAAAW,OAAA,CAAAuD,aAAA,CACI9D,YAAA,CAAA0G,sBAAsB;MAAgBC,aAAwB,EAAxBvE,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAAgC;IAAkB,GAC1DtC,KAET,CAAC;IAAAJ,CAAA,OAAAU,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAAgC,gBAAA;IAAA1C,CAAA,OAAAI,KAAA;IAAAJ,CAAA,OAAAO,qBAAA;IAAAP,CAAA,OAAAgC,EAAA;EAAA;IAAAA,EAAA,GAAAhC,CAAA;EAAA;EAAA,IAAAoF,EAAA;EAAA,IAAApF,CAAA,SAAAmF,WAAA,IAAAnF,CAAA,SAAAgC,EAAA;IANLoD,EAAA,gBAAAlH,MAAA,CAAAW,OAAA,CAAAuD,aAAA,CAAC9D,YAAA,CAAA+G,iBAAiB,QACbF,WAAW,EACXnD,EAKc,CAAC;IAAAhC,CAAA,OAAAmF,WAAA;IAAAnF,CAAA,OAAAgC,EAAA;IAAAhC,CAAA,OAAAoF,EAAA;EAAA;IAAAA,EAAA,GAAApF,CAAA;EAAA;EAAA,OAPpBoF,EAOoB;AAAA,CAI/B;AAEDtF,WAAW,CAACwF,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3G,OAAA,GAEzBiB,WAAW;AA1JgB,SAAA0E,MAAAiB,KAAA;EAAA,OAqF+BA,KAAK,CAAAC,eAAgB,CAAC,CAAC;AAAA","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/cjs/utils/numberInput.js

@@ -24,6 +24,7 @@ const formateNumber = ({
   isMoneyInput,
   isTimeInput
 }) => {
+  if (Number.isNaN(number)) return '';
   if (isTimeInput && typeof number === 'string') {
     let hours = 0;
     let minutes = 0;

package/lib/cjs/utils/numberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"numberInput.js","names":["_numberInput","require","parseFloatWithDecimals","stringValue","decimals","parsed","parseFloat","toFixed","exports","formateNumber","number","isMoneyInput","isTimeInput","hours","minutes","firstTwoDigits","substring","includes","replace","firstTwoNumbers","Number","lastTwoNumbers","lastTwoNumbersLength","length","hoursStr","minutesStr","toLocaleString","useGrouping","minimumFractionDigits","undefined","maximumFractionDigits","maximumSignificantDigits","isValidString","isDecimalInput","string","isValid","DECIMAL_TEST","test","MONEY_TEST","TIME_TEST","INTEGER_TEST","startsWith"],"sources":["../../../src/utils/numberInput.ts"],"sourcesContent":["import { DECIMAL_TEST, INTEGER_TEST, MONEY_TEST, TIME_TEST } from '../constants/numberInput';\n\ninterface ParseFloatWithDecimals {\n    ({ stringValue, decimals }: { stringValue: string; decimals?: number }): number | null;\n}\n\nexport const parseFloatWithDecimals: ParseFloatWithDecimals = ({ stringValue, decimals }) => {\n    if (stringValue === '') {\n        return null;\n    }\n\n    const parsed = parseFloat(stringValue);\n\n    if (decimals) {\n        return parseFloat(parsed.toFixed(decimals));\n    }\n\n    return parsed;\n};\n\ninterface FormateNumberOptions {\n    number: number | string | null;\n    isMoneyInput?: boolean;\n    isTimeInput?: boolean;\n}\n\nexport const formateNumber = ({ number, isMoneyInput, isTimeInput }: FormateNumberOptions) => {\n    if (isTimeInput && typeof number === 'string') {\n        let hours = 0;\n        let minutes = 0;\n\n        let firstTwoDigits = number.substring(0, 2);\n\n        if (firstTwoDigits.includes(':')) {\n            firstTwoDigits = firstTwoDigits.replace(':', '');\n\n            firstTwoDigits = `0${firstTwoDigits}`;\n        }\n\n        const firstTwoNumbers = Number(firstTwoDigits);\n        let lastTwoNumbers = 0;\n        let lastTwoNumbersLength = 0;\n\n        if (number.includes(':')) {\n            lastTwoNumbers = Number(number.substring(3, 5));\n            lastTwoNumbersLength = number.substring(3, 5).length;\n        } else {\n            lastTwoNumbers = Number(number.substring(2, 4));\n            lastTwoNumbersLength = number.substring(2, 4).length;\n        }\n\n        hours = firstTwoNumbers > 23 ? 23 : firstTwoNumbers;\n\n        if (lastTwoNumbers < 7 && lastTwoNumbersLength === 1) {\n            minutes = lastTwoNumbers * 10;\n        } else {\n            minutes = lastTwoNumbers > 59 ? 59 : lastTwoNumbers;\n        }\n\n        const hoursStr = hours < 10 ? `0${hours}` : `${hours}`;\n        const minutesStr = minutes < 10 ? `0${minutes}` : `${minutes}`;\n\n        return `${hoursStr}:${minutesStr}`;\n    }\n\n    if (typeof number !== 'number') {\n        return '';\n    }\n\n    return number.toLocaleString('de-DE', {\n        useGrouping: true,\n        minimumFractionDigits: isMoneyInput ? 2 : undefined,\n        maximumFractionDigits: isMoneyInput ? 2 : undefined,\n        maximumSignificantDigits: !isMoneyInput ? 20 : undefined,\n    });\n};\n\ninterface IsValidString {\n    (config: {\n        string: string;\n        isDecimalInput?: boolean;\n        isMoneyInput?: boolean;\n        isTimeInput?: boolean;\n    }): boolean;\n}\n\nexport const isValidString: IsValidString = ({\n    isDecimalInput,\n    isMoneyInput,\n    isTimeInput,\n    string,\n}) => {\n    let isValid = false;\n\n    // Allows numbers, one (comma/point) and any number of decimal places\n    if (isDecimalInput && DECIMAL_TEST.test(string)) {\n        isValid = true;\n    }\n\n    // Allows numbers but excludes numbers with leading 0\n    if (isMoneyInput && MONEY_TEST.test(string)) {\n        isValid = true;\n    }\n\n    if (isTimeInput && TIME_TEST) {\n        isValid = true;\n    }\n\n    // Allows numbers but excludes numbers with leading 0\n    if (!isDecimalInput && !isMoneyInput && !isTimeInput && INTEGER_TEST.test(string)) {\n        isValid = true;\n    }\n\n    if (string.length === 0) {\n        isValid = true;\n    }\n\n    if (string.startsWith('0')) {\n        isValid = true;\n    }\n\n    return isValid;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"numberInput.js","names":["_numberInput","require","parseFloatWithDecimals","stringValue","decimals","parsed","parseFloat","toFixed","exports","formateNumber","number","isMoneyInput","isTimeInput","Number","isNaN","hours","minutes","firstTwoDigits","substring","includes","replace","firstTwoNumbers","lastTwoNumbers","lastTwoNumbersLength","length","hoursStr","minutesStr","toLocaleString","useGrouping","minimumFractionDigits","undefined","maximumFractionDigits","maximumSignificantDigits","isValidString","isDecimalInput","string","isValid","DECIMAL_TEST","test","MONEY_TEST","TIME_TEST","INTEGER_TEST","startsWith"],"sources":["../../../src/utils/numberInput.ts"],"sourcesContent":["import { DECIMAL_TEST, INTEGER_TEST, MONEY_TEST, TIME_TEST } from '../constants/numberInput';\n\ninterface ParseFloatWithDecimals {\n    ({ stringValue, decimals }: { stringValue: string; decimals?: number }): number | null;\n}\n\nexport const parseFloatWithDecimals: ParseFloatWithDecimals = ({ stringValue, decimals }) => {\n    if (stringValue === '') {\n        return null;\n    }\n\n    const parsed = parseFloat(stringValue);\n\n    if (decimals) {\n        return parseFloat(parsed.toFixed(decimals));\n    }\n\n    return parsed;\n};\n\ninterface FormateNumberOptions {\n    number: number | string | null;\n    isMoneyInput?: boolean;\n    isTimeInput?: boolean;\n}\n\nexport const formateNumber = ({ number, isMoneyInput, isTimeInput }: FormateNumberOptions) => {\n    if (Number.isNaN(number)) return '';\n    if (isTimeInput && typeof number === 'string') {\n        let hours = 0;\n        let minutes = 0;\n\n        let firstTwoDigits = number.substring(0, 2);\n\n        if (firstTwoDigits.includes(':')) {\n            firstTwoDigits = firstTwoDigits.replace(':', '');\n\n            firstTwoDigits = `0${firstTwoDigits}`;\n        }\n\n        const firstTwoNumbers = Number(firstTwoDigits);\n        let lastTwoNumbers = 0;\n        let lastTwoNumbersLength = 0;\n\n        if (number.includes(':')) {\n            lastTwoNumbers = Number(number.substring(3, 5));\n            lastTwoNumbersLength = number.substring(3, 5).length;\n        } else {\n            lastTwoNumbers = Number(number.substring(2, 4));\n            lastTwoNumbersLength = number.substring(2, 4).length;\n        }\n\n        hours = firstTwoNumbers > 23 ? 23 : firstTwoNumbers;\n\n        if (lastTwoNumbers < 7 && lastTwoNumbersLength === 1) {\n            minutes = lastTwoNumbers * 10;\n        } else {\n            minutes = lastTwoNumbers > 59 ? 59 : lastTwoNumbers;\n        }\n\n        const hoursStr = hours < 10 ? `0${hours}` : `${hours}`;\n        const minutesStr = minutes < 10 ? `0${minutes}` : `${minutes}`;\n\n        return `${hoursStr}:${minutesStr}`;\n    }\n\n    if (typeof number !== 'number') {\n        return '';\n    }\n\n    return number.toLocaleString('de-DE', {\n        useGrouping: true,\n        minimumFractionDigits: isMoneyInput ? 2 : undefined,\n        maximumFractionDigits: isMoneyInput ? 2 : undefined,\n        maximumSignificantDigits: !isMoneyInput ? 20 : undefined,\n    });\n};\n\ninterface IsValidString {\n    (config: {\n        string: string;\n        isDecimalInput?: boolean;\n        isMoneyInput?: boolean;\n        isTimeInput?: boolean;\n    }): boolean;\n}\n\nexport const isValidString: IsValidString = ({\n    isDecimalInput,\n    isMoneyInput,\n    isTimeInput,\n    string,\n}) => {\n    let isValid = false;\n\n    // Allows numbers, one (comma/point) and any number of decimal places\n    if (isDecimalInput && DECIMAL_TEST.test(string)) {\n        isValid = true;\n    }\n\n    // Allows numbers but excludes numbers with leading 0\n    if (isMoneyInput && MONEY_TEST.test(string)) {\n        isValid = true;\n    }\n\n    if (isTimeInput && TIME_TEST) {\n        isValid = true;\n    }\n\n    // Allows numbers but excludes numbers with leading 0\n    if (!isDecimalInput && !isMoneyInput && !isTimeInput && INTEGER_TEST.test(string)) {\n        isValid = true;\n    }\n\n    if (string.length === 0) {\n        isValid = true;\n    }\n\n    if (string.startsWith('0')) {\n        isValid = true;\n    }\n\n    return isValid;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js

@@ -1,4 +1,4 @@
-import { useSite } from 'chayns-api';
+import { useDevice, useSite } from 'chayns-api';
 import React, { createContext, useContext, useMemo } from 'react';
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
 import { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';
@@ -38,6 +38,9 @@ const ColorSchemeProvider = ({
     color: internalColor,
     colorMode: internalColorMode
   } = useSite();
+  const {
+    browser
+  } = useDevice();
   const color = colorProp ?? context?.designSettings?.color ?? internalColor;
   const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;
   const overrideParagraphFormat = color && color !== internalColor || colorMode !== internalColorMode;
@@ -58,7 +61,8 @@ const ColorSchemeProvider = ({
     value: contextValue
   }, /*#__PURE__*/React.createElement(StyledColorSchemeProvider, {
     className: "color-scheme-provider",
-    style: style
+    style: style,
+    $browser: browser?.name
   }, children), /*#__PURE__*/React.createElement(GlobalStyle, null)));
 };
 ColorSchemeProvider.displayName = 'ColorSchemeProvider';

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeProvider.js","names":["useSite","React","createContext","useContext","useMemo","createGlobalStyle","ThemeProvider","StyledColorSchemeProvider","useChaynsTheme","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","iconColor","customVariables","context","internalColor","internalColorMode","designSettings","overrideParagraphFormat","paragraphFormat","contextValue","createElement","theme","Provider","value","className","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode, useSite } from 'chayns-api';\nimport React, { createContext, FC, ReactNode, useContext, useMemo } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\nimport { useChaynsTheme } from './hooks/useChaynsTheme';\n\nexport type ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * The site id of the page for which the design settings should be fetched\n     */\n    siteId?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n    /**\n     * Additional variables to extend the theme\n     */\n    customVariables?: Record<string, string>;\n    /**\n     * An optional color for all icons\n     */\n    iconColor?: string;\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    footer {\n        font-size: 0.85rem;\n        color: #888;\n        margin: 10px 0 0;\n\n        & a {\n            color: #888;\n            letter-spacing: -0.3px;\n        }\n    }\n`;\n\nexport interface ColorSchemeContextProps {\n    designSettings?: ChaynsDesignSettings;\n    paragraphFormat: ChaynsParagraphFormat[];\n    theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color: colorProp,\n    colorMode: colorModeProp,\n    secondaryColor,\n    siteId,\n    style = {},\n    iconColor,\n    customVariables,\n}) => {\n    const context = useContext(ColorSchemeContext);\n\n    const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n    const color = colorProp ?? context?.designSettings?.color ?? internalColor;\n    const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;\n\n    const overrideParagraphFormat =\n        (color && color !== internalColor) || colorMode !== internalColorMode;\n\n    const paragraphFormat = useMemo(\n        () => (overrideParagraphFormat ? [] : undefined),\n        [overrideParagraphFormat],\n    );\n\n    const contextValue = useChaynsTheme({\n        color,\n        iconColor,\n        colorMode,\n        secondaryColor,\n        siteId,\n        customVariables,\n        // Overrides the paragraphFormat on changed color or colorMode\n        paragraphFormat,\n    });\n\n    return (\n        <ThemeProvider theme={contextValue.theme}>\n            <ColorSchemeContext.Provider value={contextValue}>\n                <StyledColorSchemeProvider className=\"color-scheme-provider\" style={style}>\n                    {children}\n                </StyledColorSchemeProvider>\n                <GlobalStyle />\n            </ColorSchemeContext.Provider>\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"AAAA,SAAiEA,OAAO,QAAQ,YAAY;AAC5F,OAAOC,KAAK,IAAIC,aAAa,EAAiBC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAChF,SAASC,iBAAiB,EAAEC,aAAa,QAAQ,mBAAmB;AACpE,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,cAAc,QAAQ,wBAAwB;AA6CvD,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMK,kBAAkB,gBAAGR,aAAa,CAAsCS,SAAS,CAAC;AAE/F,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAMT,UAAU,CAACO,kBAAkB,CAAC;AAElE,MAAMG,mBAAiD,GAAGA,CAAC;EACvDC,QAAQ;EACRC,KAAK,EAAEC,SAAS;EAChBC,SAAS,EAAEC,aAAa;EACxBC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,OAAO,GAAGrB,UAAU,CAACO,kBAAkB,CAAC;EAE9C,MAAM;IAAEK,KAAK,EAAEU,aAAa;IAAER,SAAS,EAAES;EAAkB,CAAC,GAAG1B,OAAO,CAAC,CAAC;EAExE,MAAMe,KAAK,GAAGC,SAAS,IAAIQ,OAAO,EAAEG,cAAc,EAAEZ,KAAK,IAAIU,aAAa;EAC1E,MAAMR,SAAS,GAAGC,aAAa,IAAIM,OAAO,EAAEG,cAAc,EAAEV,SAAS,IAAIS,iBAAiB;EAE1F,MAAME,uBAAuB,GACxBb,KAAK,IAAIA,KAAK,KAAKU,aAAa,IAAKR,SAAS,KAAKS,iBAAiB;EAEzE,MAAMG,eAAe,GAAGzB,OAAO,CAC3B,MAAOwB,uBAAuB,GAAG,EAAE,GAAGjB,SAAU,EAChD,CAACiB,uBAAuB,CAC5B,CAAC;EAED,MAAME,YAAY,GAAGtB,cAAc,CAAC;IAChCO,KAAK;IACLO,SAAS;IACTL,SAAS;IACTE,cAAc;IACdC,MAAM;IACNG,eAAe;IACf;IACAM;EACJ,CAAC,CAAC;EAEF,oBACI5B,KAAA,CAAA8B,aAAA,CAACzB,aAAa;IAAC0B,KAAK,EAAEF,YAAY,CAACE;EAAM,gBACrC/B,KAAA,CAAA8B,aAAA,CAACrB,kBAAkB,CAACuB,QAAQ;IAACC,KAAK,EAAEJ;EAAa,gBAC7C7B,KAAA,CAAA8B,aAAA,CAACxB,yBAAyB;IAAC4B,SAAS,EAAC,uBAAuB;IAACd,KAAK,EAAEA;EAAM,GACrEP,QACsB,CAAC,eAC5Bb,KAAA,CAAA8B,aAAA,CAACtB,WAAW,MAAE,CACW,CAClB,CAAC;AAExB,CAAC;AAEDI,mBAAmB,CAACuB,WAAW,GAAG,qBAAqB;AAEvD,eAAevB,mBAAmB","ignoreList":[]}
+{"version":3,"file":"ColorSchemeProvider.js","names":["useDevice","useSite","React","createContext","useContext","useMemo","createGlobalStyle","ThemeProvider","StyledColorSchemeProvider","useChaynsTheme","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","iconColor","customVariables","context","internalColor","internalColorMode","browser","designSettings","overrideParagraphFormat","paragraphFormat","contextValue","createElement","theme","Provider","value","className","$browser","name","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import {\n    ChaynsDesignSettings,\n    ChaynsParagraphFormat,\n    ColorMode,\n    useDevice,\n    useSite,\n} from 'chayns-api';\nimport React, { createContext, FC, ReactNode, useContext, useMemo } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\nimport { useChaynsTheme } from './hooks/useChaynsTheme';\nimport { BrowserName } from '../../types/chayns';\n\nexport type ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * The site id of the page for which the design settings should be fetched\n     */\n    siteId?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n    /**\n     * Additional variables to extend the theme\n     */\n    customVariables?: Record<string, string>;\n    /**\n     * An optional color for all icons\n     */\n    iconColor?: string;\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    footer {\n        font-size: 0.85rem;\n        color: #888;\n        margin: 10px 0 0;\n\n        & a {\n            color: #888;\n            letter-spacing: -0.3px;\n        }\n    }\n`;\n\nexport interface ColorSchemeContextProps {\n    designSettings?: ChaynsDesignSettings;\n    paragraphFormat: ChaynsParagraphFormat[];\n    theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color: colorProp,\n    colorMode: colorModeProp,\n    secondaryColor,\n    siteId,\n    style = {},\n    iconColor,\n    customVariables,\n}) => {\n    const context = useContext(ColorSchemeContext);\n\n    const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n    const { browser } = useDevice();\n\n    const color = colorProp ?? context?.designSettings?.color ?? internalColor;\n    const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;\n\n    const overrideParagraphFormat =\n        (color && color !== internalColor) || colorMode !== internalColorMode;\n\n    const paragraphFormat = useMemo(\n        () => (overrideParagraphFormat ? [] : undefined),\n        [overrideParagraphFormat],\n    );\n\n    const contextValue = useChaynsTheme({\n        color,\n        iconColor,\n        colorMode,\n        secondaryColor,\n        siteId,\n        customVariables,\n        // Overrides the paragraphFormat on changed color or colorMode\n        paragraphFormat,\n    });\n\n    return (\n        <ThemeProvider theme={contextValue.theme}>\n            <ColorSchemeContext.Provider value={contextValue}>\n                <StyledColorSchemeProvider\n                    className=\"color-scheme-provider\"\n                    style={style}\n                    $browser={browser?.name as BrowserName}\n                >\n                    {children}\n                </StyledColorSchemeProvider>\n                <GlobalStyle />\n            </ColorSchemeContext.Provider>\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"AAAA,SAIIA,SAAS,EACTC,OAAO,QACJ,YAAY;AACnB,OAAOC,KAAK,IAAIC,aAAa,EAAiBC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAChF,SAASC,iBAAiB,EAAEC,aAAa,QAAQ,mBAAmB;AACpE,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,cAAc,QAAQ,wBAAwB;AA8CvD,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMK,kBAAkB,gBAAGR,aAAa,CAAsCS,SAAS,CAAC;AAE/F,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAMT,UAAU,CAACO,kBAAkB,CAAC;AAElE,MAAMG,mBAAiD,GAAGA,CAAC;EACvDC,QAAQ;EACRC,KAAK,EAAEC,SAAS;EAChBC,SAAS,EAAEC,aAAa;EACxBC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,OAAO,GAAGrB,UAAU,CAACO,kBAAkB,CAAC;EAE9C,MAAM;IAAEK,KAAK,EAAEU,aAAa;IAAER,SAAS,EAAES;EAAkB,CAAC,GAAG1B,OAAO,CAAC,CAAC;EAExE,MAAM;IAAE2B;EAAQ,CAAC,GAAG5B,SAAS,CAAC,CAAC;EAE/B,MAAMgB,KAAK,GAAGC,SAAS,IAAIQ,OAAO,EAAEI,cAAc,EAAEb,KAAK,IAAIU,aAAa;EAC1E,MAAMR,SAAS,GAAGC,aAAa,IAAIM,OAAO,EAAEI,cAAc,EAAEX,SAAS,IAAIS,iBAAiB;EAE1F,MAAMG,uBAAuB,GACxBd,KAAK,IAAIA,KAAK,KAAKU,aAAa,IAAKR,SAAS,KAAKS,iBAAiB;EAEzE,MAAMI,eAAe,GAAG1B,OAAO,CAC3B,MAAOyB,uBAAuB,GAAG,EAAE,GAAGlB,SAAU,EAChD,CAACkB,uBAAuB,CAC5B,CAAC;EAED,MAAME,YAAY,GAAGvB,cAAc,CAAC;IAChCO,KAAK;IACLO,SAAS;IACTL,SAAS;IACTE,cAAc;IACdC,MAAM;IACNG,eAAe;IACf;IACAO;EACJ,CAAC,CAAC;EAEF,oBACI7B,KAAA,CAAA+B,aAAA,CAAC1B,aAAa;IAAC2B,KAAK,EAAEF,YAAY,CAACE;EAAM,gBACrChC,KAAA,CAAA+B,aAAA,CAACtB,kBAAkB,CAACwB,QAAQ;IAACC,KAAK,EAAEJ;EAAa,gBAC7C9B,KAAA,CAAA+B,aAAA,CAACzB,yBAAyB;IACtB6B,SAAS,EAAC,uBAAuB;IACjCf,KAAK,EAAEA,KAAM;IACbgB,QAAQ,EAAEV,OAAO,EAAEW;EAAoB,GAEtCxB,QACsB,CAAC,eAC5Bb,KAAA,CAAA+B,aAAA,CAACvB,WAAW,MAAE,CACW,CAClB,CAAC;AAExB,CAAC;AAEDI,mBAAmB,CAAC0B,WAAW,GAAG,qBAAqB;AAEvD,eAAe1B,mBAAmB","ignoreList":[]}

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.styles.js

@@ -1,5 +1,5 @@
 import { getAvailableColorList } from '@chayns/colors';
-import { styled } from 'styled-components';
+import { css, styled } from 'styled-components';
 // noinspection CssUnresolvedCustomProperty
 export const StyledColorSchemeProvider = styled.div`
     color: var(--chayns-color--text);
@@ -21,5 +21,42 @@ export const StyledColorSchemeProvider = styled.div`
     .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {
         margin-top: 0;
     }
+
+    // Styles for custom scrollbar
+    .chayns-scrollbar {
+        ${({
+  $browser,
+  theme
+}) => $browser === 'firefox' ? css`
+                      scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                      scrollbar-width: thin;
+                  ` : css`
+                      &::-webkit-scrollbar {
+                          width: 10px;
+                          height: 10px;
+                      }
+
+                      &::-webkit-scrollbar-track {
+                          background-color: transparent;
+                      }
+
+                      &::-webkit-scrollbar-button {
+                          background-color: transparent;
+                          height: 5px;
+                          width: 5px;
+                      }
+
+                      &::-webkit-scrollbar-thumb {
+                          background-color: rgba(${theme['text-rgb']}, 0.15);
+                          border-radius: 20px;
+                          background-clip: padding-box;
+                          border: solid 3px transparent;
+                      }
+
+                      &::-webkit-scrollbar-corner {
+                          background-color: transparent;
+                      }
+                  `}
+    }
 `;
 //# sourceMappingURL=ColorSchemeProvider.styles.js.map