@heymantle/litho 0.0.1

package/dist/esm/components/Pane.js

@@ -0,0 +1,118 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CancelMajor } from "@shopify/polaris-icons";
+import { tv } from "tailwind-variants";
+import { FrameContext } from "./AppProvider.js";
+import { createContext, useContext, useEffect, Children } from "react";
+import { Button } from "../index.js";
+var styles = tv({
+    base: "Litho-Pane hidden md:block fixed inset-0 w-full md:left-auto md:max-w-100 block bg-surface-highest shadow-card-strong pointer-events-auto"
+});
+var innerStyles = tv({
+    base: "flex flex-col overflow-y-auto h-full"
+});
+var PaneContext = /*#__PURE__*/ createContext({});
+function Pane() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var open = props.open, onClose = props.onClose, children = props.children;
+    var setPaneIsOpen = useContext(FrameContext).setPaneIsOpen;
+    var classes = styles();
+    useEffect(function() {
+        setPaneIsOpen(open);
+        if (!open || !onClose) return;
+        var handleKeyDown = function(event) {
+            if (event.key === "Escape") {
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return function() {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [
+        open,
+        onClose
+    ]);
+    if (!open) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(PaneContext.Provider, {
+        value: {
+            onClose: onClose
+        },
+        children: /*#__PURE__*/ _jsx("div", {
+            className: classes,
+            children: /*#__PURE__*/ _jsx("div", {
+                className: innerStyles(),
+                children: children
+            })
+        })
+    });
+}
+function Header() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var children = props.children, _props_actions = props.actions, actions = _props_actions === void 0 ? [] : _props_actions, _props_showCloseButton = props.showCloseButton, showCloseButton = _props_showCloseButton === void 0 ? true : _props_showCloseButton, _props_bottomBorder = props.bottomBorder, bottomBorder = _props_bottomBorder === void 0 ? true : _props_bottomBorder;
+    var onClose = useContext(PaneContext).onClose;
+    var showActionsOrClose = actions.length > 0 || showCloseButton;
+    var childCount = Children.count(children);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "grid grid-cols-12 min-h-14 pl-4 pr-3 border-edge-subdued ".concat(bottomBorder ? "border-b" : ""),
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "grid grid-cols-5 col-span-10",
+                children: Children.map(children, function(child, index) {
+                    return /*#__PURE__*/ _jsx("div", {
+                        className: "flex col-span-2 items-center ".concat(childCount === 1 ? "col-span-5" : "", " ").concat(index > 0 ? "justify-center" : ""),
+                        children: child
+                    });
+                })
+            }),
+            showActionsOrClose && /*#__PURE__*/ _jsxs("div", {
+                className: "flex col-span-2 items-center justify-end",
+                children: [
+                    actions.map(function(action, index) {
+                        return /*#__PURE__*/ _jsx(Button, {
+                            plain: !action.destructive,
+                            onClick: action.onAction || action.onClick,
+                            disabled: action.disabled,
+                            icon: action.icon,
+                            loading: action.loading,
+                            external: action.external,
+                            url: action.url,
+                            destructive: action.destructive,
+                            tooltip: action.tooltip,
+                            tooltipPosition: "below"
+                        }, index);
+                    }),
+                    showCloseButton && /*#__PURE__*/ _jsx(Button, {
+                        plain: true,
+                        icon: CancelMajor,
+                        onClick: onClose,
+                        tooltip: "Close",
+                        tooltipPosition: "below"
+                    })
+                ]
+            })
+        ]
+    });
+}
+Pane.Header = Header;
+function Content() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var children = props.children;
+    return /*#__PURE__*/ _jsx("div", {
+        className: "flex-1 overflow-auto",
+        children: children
+    });
+}
+Pane.Content = Content;
+function Footer() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var children = props.children, _props_topBorder = props.topBorder, topBorder = _props_topBorder === void 0 ? true : _props_topBorder;
+    return /*#__PURE__*/ _jsx("div", {
+        className: "min-h-14 ".concat(topBorder ? "border-t border-edge-subdued" : ""),
+        children: children
+    });
+}
+Pane.Footer = Footer;
+export default Pane;

package/dist/esm/components/Popover.js

@@ -0,0 +1,350 @@
+"use client";
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
+import { tv } from "tailwind-variants";
+import PopoverManager from "./PopoverManager.js";
+var TOP_SPACING = 4;
+var EDGE_SPACING = 16;
+var styles = tv({
+    base: "Litho-Popover bg-surface-highest rounded-sm max-h-100 overflow-y-auto overflow-x-hidden shadow-popover dark:shadow-popover-dark outline outline-tint-3 min-w-32  overscroll-contain dark:outline-hidden dark:border-t dark:border-tint-alt-2",
+    variants: {
+        maxWidth: {
+            default: "max-w-80",
+            datePicker: "max-w-75 @sm:max-w-full",
+            none: ""
+        },
+        sectioned: {
+            true: "Litho-Popover--Sectioned p-4",
+            false: ""
+        }
+    }
+});
+/**
+ * Popover component for displaying an overlay near an activator.
+ *
+ * @param {Object} props - The component props.
+ * @param {string|React.ComponentType} [props.activatorWrapper="div"] - The wrapper element for the activator.
+ * @param {React.ReactNode} props.activator - The activator element that triggers the popover.
+ * @param {string} [props.activatorDisplayType="inline-block"] - The display type for the activator.
+ * @param {React.ReactNode} props.children - The content of the popover.
+ * @param {Function} [props.onClose] - Callback function triggered when the popover is closed.
+ * @param {boolean} [props.active=false] - Whether the popover is currently active.
+ * @param {boolean} [props.fixed=false] - Whether the popover is fixed or absolute positioned.
+ * @param {number} [props.zIndexOverride] - Custom z-index for the popover.
+ * @param {boolean} [props.sectioned=false] - Whether the popover content is sectioned with padding.
+ * @param {string} [props.preferredAlignment="center"] - Preferred alignment for the popover (left, center, right).
+ * @param {string} [props.preferredPosition="below"] - Preferred position for the popover (above, below, cover).
+ * @param {boolean|string} [props.autofocusTarget=false] - Automatically focus on the first focusable element in the popover.
+ * @param {string} [props.className] - Additional class name for the popover.
+ * @param {string} [props.containerClassName] - Additional class name for the popover container.
+ * @returns {JSX.Element} The rendered popover component.
+ */ function Popover() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var tmp = props.activatorWrapper, ActivatorWrapper = tmp === void 0 ? "div" : tmp, _props_activatorDisplayType = props.activatorDisplayType, activatorDisplayType = _props_activatorDisplayType === void 0 ? "inline-block" : _props_activatorDisplayType, activator = props.activator, children = props.children, onClose = props.onClose, active = props.active, fixed = props.fixed, zIndexOverride = props.zIndexOverride, _props_sectioned = props.sectioned, sectioned = _props_sectioned === void 0 ? false : _props_sectioned, _props_preferredAlignment = props.preferredAlignment, preferredAlignment = _props_preferredAlignment === void 0 ? "center" : _props_preferredAlignment, _props_preferredPosition = props.preferredPosition, preferredPosition = _props_preferredPosition === void 0 ? "below" : _props_preferredPosition, _props_autofocusTarget = props.autofocusTarget, autofocusTarget = _props_autofocusTarget === void 0 ? false : _props_autofocusTarget, _props_matchActivatorWidth = props.matchActivatorWidth, matchActivatorWidth = _props_matchActivatorWidth === void 0 ? false : _props_matchActivatorWidth, _props_maxWidth = props.maxWidth, maxWidth = _props_maxWidth === void 0 ? "default" : _props_maxWidth, className = props.className, containerClassName = props.containerClassName;
+    var idValue = useId();
+    var idRef = useRef(idValue);
+    var initialWidthRef = useRef(null);
+    var popoverRef = useRef(null);
+    var activatorRef = useRef(null);
+    var _useState = _sliced_to_array(useState(_object_spread({
+        visibility: "hidden",
+        opacity: 0,
+        position: "absolute",
+        top: 0,
+        left: 0
+    }, zIndexOverride ? {
+        zIndex: zIndexOverride
+    } : {})), 2), popoverStyle = _useState[0], setPopoverStyle = _useState[1];
+    useEffect(function() {
+        if (active) {
+            PopoverManager.open(idRef.current);
+        } else {
+            PopoverManager.close(idRef.current);
+            return;
+        }
+        if (!popoverRef.current) return;
+        var observer = new ResizeObserver(function() {
+            if (!active) return;
+            requestAnimationFrame(function() {
+                if (!popoverRef.current || !activatorRef.current) return;
+                var popoverRect = popoverRef.current.getBoundingClientRect();
+                var activatorRect = activatorRef.current.getBoundingClientRect();
+                var windowWidth = window.innerWidth;
+                var windowHeight = window.innerHeight;
+                var top, left;
+                if (preferredPosition === "below") {
+                    top = fixed ? activatorRect.bottom + TOP_SPACING : activatorRect.bottom + window.scrollY + TOP_SPACING;
+                } else if (preferredPosition === "above") {
+                    top = fixed ? activatorRect.top - popoverRect.height - TOP_SPACING : activatorRect.top + window.scrollY - popoverRect.height - TOP_SPACING;
+                } else if (preferredPosition === "cover") {
+                    top = fixed ? activatorRect.top : activatorRect.top + window.scrollY;
+                }
+                if (preferredAlignment === "left") {
+                    left = fixed ? activatorRect.left : activatorRect.left + window.scrollX;
+                } else if (preferredAlignment === "right") {
+                    left = fixed ? activatorRect.right - popoverRect.width : activatorRect.right + window.scrollX - popoverRect.width;
+                } else if (preferredAlignment === "center") {
+                    left = fixed ? activatorRect.left + activatorRect.width / 2 - popoverRect.width / 2 : activatorRect.left + window.scrollX + activatorRect.width / 2 - popoverRect.width / 2;
+                }
+                if (top + popoverRect.height + EDGE_SPACING > windowHeight) {
+                    top = fixed ? activatorRect.top - popoverRect.height - TOP_SPACING : activatorRect.top + window.scrollY - popoverRect.height - TOP_SPACING;
+                }
+                if (top < 0) {
+                    top = fixed ? activatorRect.bottom + TOP_SPACING : activatorRect.bottom + window.scrollY + TOP_SPACING;
+                }
+                if (left + popoverRect.width > windowWidth) {
+                    left = windowWidth - popoverRect.width - EDGE_SPACING;
+                }
+                if (left < 0) {
+                    left = EDGE_SPACING;
+                }
+                if (initialWidthRef.current === null) {
+                    var popoverRect1 = popoverRef.current.getBoundingClientRect();
+                    initialWidthRef.current = popoverRect1.width;
+                }
+                setPopoverStyle(function(prev) {
+                    return _object_spread_props(_object_spread(_object_spread_props(_object_spread(_object_spread_props(_object_spread({}, prev), {
+                        position: fixed ? "fixed" : "absolute"
+                    }), zIndexOverride ? {
+                        zIndex: zIndexOverride
+                    } : {}), {
+                        top: top,
+                        left: left,
+                        visibility: "visible",
+                        opacity: 1
+                    }), !matchActivatorWidth && {
+                        minWidth: initialWidthRef.current
+                    }, matchActivatorWidth && {
+                        width: activatorRect.width
+                    }), {
+                        maxWidth: matchActivatorWidth ? activatorRect.width : window.innerWidth - 32
+                    });
+                });
+            });
+        });
+        observer.observe(popoverRef.current);
+        return function() {
+            observer.disconnect();
+        };
+    }, [
+        active
+    ]);
+    useLayoutEffect(function() {
+        if (!active || !popoverRef.current) return;
+        var focusable = popoverRef.current.querySelector("input, button, a, select, textarea");
+        if (focusable) {
+            // focusable.focus();
+            setTimeout(function() {
+                focusable.focus();
+            }, 0);
+        }
+    }, [
+        active
+    ]);
+    useEffect(function() {
+        var handleOutsideClick = function handleOutsideClick(event) {
+            if (!onClose) return;
+            var closestPopover = event.target.closest(".Litho-Popover");
+            var isClickInsidePopover = popoverRef.current && popoverRef.current.contains(event.target);
+            var isClickInsideActivator = activatorRef.current && activatorRef.current.contains(event.target);
+            if (!closestPopover && !isClickInsideActivator) {
+                PopoverManager.closeAll();
+                onClose();
+                return;
+            }
+            if (!isClickInsidePopover && !isClickInsideActivator && idRef.current === PopoverManager.getActivePopoverId()) {
+                event.stopPropagation();
+                onClose();
+            }
+        };
+        var handleEscapeKey = function handleEscapeKey(event) {
+            if (event.key === "Escape" && onClose && idRef.current === PopoverManager.getActivePopoverId()) {
+                PopoverManager.close(PopoverManager.getActivePopoverId());
+                onClose();
+            }
+        };
+        var handleScroll = function handleScroll() {
+            if (!onClose) return;
+            var scrollDiffTop = Math.abs(window.scrollY - initialScrollTop);
+            var scrollDiffLeft = Math.abs(window.scrollX - initialScrollLeft);
+            if (scrollDiffTop > SCROLL_THRESHOLD || scrollDiffLeft > SCROLL_THRESHOLD) {
+                onClose();
+            }
+        };
+        var handleResize = function handleResize() {
+            if (onClose) {
+                onClose();
+            }
+        };
+        if (!active) return;
+        var timer;
+        var initialScrollTop = window.scrollY;
+        var initialScrollLeft = window.scrollX;
+        var SCROLL_THRESHOLD = 100;
+        timer = setTimeout(function() {
+            document.addEventListener("click", handleOutsideClick);
+            document.addEventListener("keydown", handleEscapeKey);
+            window.addEventListener("resize", handleResize);
+            window.addEventListener("scroll", handleScroll);
+        }, 0);
+        return function() {
+            clearTimeout(timer);
+            document.removeEventListener("click", handleOutsideClick);
+            document.removeEventListener("keydown", handleEscapeKey);
+            window.removeEventListener("resize", handleResize);
+            window.removeEventListener("scroll", handleScroll);
+        };
+    }, [
+        active,
+        PopoverManager
+    ]);
+    var classes = styles({
+        sectioned: sectioned,
+        maxWidth: maxWidth
+    });
+    var memoizedActivator = useMemo(function() {
+        return activator;
+    }, [
+        activator
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "Litho-PopoverContainer".concat(containerClassName ? " ".concat(containerClassName) : ""),
+        children: [
+            /*#__PURE__*/ _jsx(ActivatorWrapper, {
+                ref: activatorRef,
+                className: "Litho-PopoverActivator ".concat(activatorDisplayType),
+                children: memoizedActivator
+            }),
+            active && typeof children !== "undefined" && /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsx("div", {
+                className: "@container",
+                children: /*#__PURE__*/ _jsx("div", {
+                    ref: popoverRef,
+                    style: popoverStyle,
+                    className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+                    children: children
+                })
+            }), document.body)
+        ]
+    });
+}
+Popover.displayName = "Popover";
+var sectionStyles = tv({
+    base: "Litho-Popover__Section border-b border-edge-default last:border-b-0"
+});
+/**
+ * Section component for use within the Popover.
+ *
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} [props.children] - The content of the section.
+ * @returns {JSX.Element} The rendered section.
+ */ function Section() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var children = props.children, className = props.className;
+    var sectionClasses = sectionStyles();
+    return /*#__PURE__*/ _jsx("div", {
+        className: "".concat(sectionClasses).concat(className ? " ".concat(className) : ""),
+        children: children
+    });
+}
+Popover.Section = Section;
+Popover.Section.displayName = "Popover.Section";
+export default Popover;

package/dist/esm/components/PopoverManager.js

@@ -0,0 +1,24 @@
+import { EventEmitter } from "events";
+var PopoverManager = new EventEmitter();
+PopoverManager.activePopovers = [];
+PopoverManager.open = function(id) {
+    if (!this.activePopovers.includes(id)) {
+        this.activePopovers.push(id);
+        this.emit('change');
+    }
+};
+PopoverManager.close = function(id) {
+    var index = this.activePopovers.indexOf(id);
+    if (index !== -1) {
+        this.activePopovers.splice(index, 1);
+        this.emit('change');
+    }
+};
+PopoverManager.closeAll = function() {
+    this.activePopovers = [];
+    this.emit('change');
+};
+PopoverManager.getActivePopoverId = function() {
+    return this.activePopovers[this.activePopovers.length - 1] || null;
+};
+export default PopoverManager;

package/dist/esm/components/ProgressBar.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+var styles = tv({
+    base: "Litho-ProgressBar relative bg-tint-2 dark:bg-tint-alt-2 rounded-full overflow-hidden min-w-12",
+    variants: {
+        size: {
+            small: "h-1",
+            medium: "h-3",
+            large: "h-4"
+        }
+    },
+    defaultVariants: {
+        size: "medium",
+        color: "highlight",
+        animated: true
+    }
+});
+var barStyles = tv({
+    base: "Litho-ProgressBar__Inner h-full w-0 rounded-full",
+    variants: {
+        color: {
+            attention: "bg-attention",
+            highlight: "bg-highlight",
+            success: "bg-success",
+            warning: "bg-warning",
+            critical: "bg-critical",
+            previousPositive: "bg-success/60",
+            previousNegative: "bg-critical/10",
+            positive: "bg-success/40",
+            negative: "bg-critical/60"
+        },
+        animated: {
+            true: "transition-width duration-500 ease-in-out",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        color: "attention",
+        animated: true
+    }
+});
+/**
+ * A progress bar component with configurable size, color, and animation.
+ * Can be used in single or comparison mode to show progress changes.
+ *
+ * @param {Object} props - Properties to configure the progress bar.
+ * @param {number} [props.progress=0] - The progress percentage (0-100).
+ * @param {number} [props.previousProgress] - The previous period's progress percentage (0-100).
+ * @param {boolean} [props.comparisonMode=false] - Whether to show comparison between current and previous period.
+ * @param {("small"|"medium"|"large")} [props.size="medium"] - The size of the progress bar.
+ * @param {("attention"|"highlight"|"success"|"warning"|"critical"|"neutral"|"positive"|"negative")} [props.color="attention"] - The color of the progress indicator.
+ * @param {boolean} [props.animated=true] - Whether the progress bar should animate width changes.
+ *
+ * @returns {JSX.Element} The rendered progress bar component.
+ */ function ProgressBar() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _props_progress = props.progress, progress = _props_progress === void 0 ? 0 : _props_progress, previousProgress = props.previousProgress, _props_comparisonMode = props.comparisonMode, comparisonMode = _props_comparisonMode === void 0 ? false : _props_comparisonMode, _props_size = props.size, size = _props_size === void 0 ? "medium" : _props_size, _props_color = props.color, color = _props_color === void 0 ? "attention" : _props_color, _props_animated = props.animated, animated = _props_animated === void 0 ? true : _props_animated, className = props.className;
+    var classes = styles({
+        size: size
+    });
+    var parsedProgress = Math.min(100, Math.max(0, parseInt(progress, 10)));
+    var parsedPreviousProgress = previousProgress !== undefined ? Math.min(100, Math.max(0, parseInt(previousProgress, 10))) : null;
+    if (comparisonMode && parsedPreviousProgress !== null) {
+        var difference = parsedProgress - parsedPreviousProgress;
+        var isPositive = difference > 0;
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+            role: "progressbar",
+            "aria-valuenow": parsedProgress,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: "absolute ".concat(barStyles({
+                        color: isPositive ? "previousPositive" : "previousNegative",
+                        animated: animated
+                    })),
+                    style: {
+                        width: "".concat(parsedPreviousProgress, "%"),
+                        zIndex: isPositive ? 0 : 1
+                    }
+                }),
+                difference !== 0 && /*#__PURE__*/ _jsx("div", {
+                    className: "absolute ".concat(barStyles({
+                        color: isPositive ? "positive" : "negative",
+                        animated: animated
+                    })),
+                    style: {
+                        width: "".concat(parsedProgress, "%"),
+                        zIndex: isPositive ? 1 : 0
+                    }
+                })
+            ]
+        });
+    }
+    // Single bar mode
+    return /*#__PURE__*/ _jsx("div", {
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        role: "progressbar",
+        "aria-valuenow": parsedProgress,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        children: /*#__PURE__*/ _jsx("div", {
+            className: barStyles({
+                color: color,
+                animated: animated
+            }),
+            style: {
+                width: "".concat(parsedProgress, "%")
+            }
+        })
+    });
+}
+export default ProgressBar;