@evolve.ui/core-components 1.0.0

package/Countdown-D4-QPv6V.cjs

@@ -0,0 +1,181 @@
+const require_rolldown_runtime = require("./rolldown-runtime-D6vf50IK.cjs");
+const require_Typography_Text = require("./Typography/Text.cjs");
+const require_hooks_usePrevious = require("./hooks/usePrevious.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let ms = require("ms");
+ms = require_rolldown_runtime.__toESM(ms);
+//#region src/Countdown/hooks/useGetCountdown.ts
+const useGetCountdown = ({ completionTime, flashpoint, forceSeconds, startTime }) => {
+	const intervalRef = (0, react.useRef)(null);
+	const previousStartTime = require_hooks_usePrevious.usePrevious(startTime);
+	const [now, setNow] = (0, react.useState)(startTime ?? Date.now());
+	const [isUrgent, setIsUrgent] = (0, react.useState)(false);
+	const timeUntilCompletion = completionTime - now;
+	const daysUntilEnd = Math.max(Math.floor(timeUntilCompletion / (0, ms.default)("1d")), 0);
+	const hoursUntilEnd = Math.max(Math.floor(timeUntilCompletion / (0, ms.default)("1h") % 24), 0);
+	const minutesUntilEnd = Math.max(Math.floor(timeUntilCompletion / (0, ms.default)("1m") % 60), 0);
+	const secondsUntilEnd = Math.max(Math.floor(timeUntilCompletion / (0, ms.default)("1s") % 60), 0);
+	(0, react.useEffect)(() => {
+		if (startTime && startTime !== previousStartTime && intervalRef.current) {
+			clearInterval(intervalRef.current);
+			setNow(startTime);
+			const nextIntervalAmount = hoursUntilEnd > 1 && minutesUntilEnd > 0 && !forceSeconds ? (0, ms.default)("1m") : (0, ms.default)("1s");
+			intervalRef.current = setInterval(() => {
+				setNow(startTime + nextIntervalAmount);
+			}, nextIntervalAmount);
+		}
+	}, [
+		forceSeconds,
+		hoursUntilEnd,
+		minutesUntilEnd,
+		previousStartTime,
+		startTime
+	]);
+	(0, react.useEffect)(() => {
+		if (intervalRef.current) clearInterval(intervalRef.current);
+		const nextIntervalAmount = hoursUntilEnd > 1 && minutesUntilEnd > 0 && !forceSeconds ? (0, ms.default)("1m") : (0, ms.default)("1s");
+		intervalRef.current = setInterval(() => {
+			setNow((previousNow) => previousNow + nextIntervalAmount);
+		}, nextIntervalAmount);
+		if (flashpoint) {
+			const { duration, value } = flashpoint;
+			const noDaysRemain = daysUntilEnd === 0;
+			const noHoursRemain = hoursUntilEnd === 0;
+			const noMinutesRemain = minutesUntilEnd === 0;
+			switch (duration) {
+				case "d":
+				default:
+					setIsUrgent(value > daysUntilEnd || value === daysUntilEnd && hoursUntilEnd === 0);
+					break;
+				case "h":
+					setIsUrgent(noDaysRemain && (value > hoursUntilEnd || value === hoursUntilEnd && minutesUntilEnd === 0));
+					break;
+				case "m":
+					setIsUrgent(noDaysRemain && noHoursRemain && (value > minutesUntilEnd || value === minutesUntilEnd && secondsUntilEnd === 0));
+					break;
+				case "s":
+					setIsUrgent(noDaysRemain && noHoursRemain && noMinutesRemain && value >= secondsUntilEnd);
+					break;
+			}
+		}
+		return () => {
+			if (intervalRef.current) clearInterval(intervalRef.current);
+		};
+	}, [
+		daysUntilEnd,
+		flashpoint,
+		forceSeconds,
+		hoursUntilEnd,
+		minutesUntilEnd,
+		secondsUntilEnd
+	]);
+	return (0, react.useMemo)(() => ({
+		daysUntilEnd,
+		hoursUntilEnd,
+		isUrgent,
+		minutesUntilEnd,
+		secondsUntilEnd
+	}), [
+		daysUntilEnd,
+		hoursUntilEnd,
+		isUrgent,
+		minutesUntilEnd,
+		secondsUntilEnd
+	]);
+};
+//#endregion
+//#region src/Countdown/Countdown.tsx
+const Countdown = ({ completionTime, flashpoint, forceSeconds, forceUrgent, label, onComplete, preLabel, small, startTime, timeLabels }) => {
+	const { daysUntilEnd, hoursUntilEnd, isUrgent: isUrgentFromFlashpoint, minutesUntilEnd, secondsUntilEnd } = useGetCountdown({
+		completionTime,
+		flashpoint,
+		forceSeconds,
+		startTime
+	});
+	const isUrgent = forceUrgent || isUrgentFromFlashpoint;
+	const dayLabel = timeLabels?.days ?? "d";
+	const hourLabel = timeLabels?.hours ?? "h";
+	const minuteLabel = timeLabels?.minutes ?? "m";
+	const secondLabel = timeLabels?.seconds ?? "s";
+	let primaryDurationValue = `${daysUntilEnd}${dayLabel}`;
+	let secondaryDurationValue = `${hoursUntilEnd}${hourLabel}`;
+	let altDurationValue = null;
+	if (daysUntilEnd === 0 && hoursUntilEnd !== 0) {
+		primaryDurationValue = `${hoursUntilEnd}${hourLabel}`;
+		secondaryDurationValue = `${minutesUntilEnd}${minuteLabel}`;
+		if (forceSeconds) altDurationValue = `${secondsUntilEnd}${secondLabel}`;
+	} else if (daysUntilEnd === 0 && hoursUntilEnd === 0 && minutesUntilEnd !== 0) {
+		primaryDurationValue = `${minutesUntilEnd}${minuteLabel}`;
+		secondaryDurationValue = `${secondsUntilEnd}${secondLabel}`;
+	} else if (daysUntilEnd === 0 && hoursUntilEnd === 0 && minutesUntilEnd === 0) {
+		primaryDurationValue = `${secondsUntilEnd}${secondLabel}`;
+		secondaryDurationValue = null;
+	}
+	(0, react.useEffect)(() => {
+		if (daysUntilEnd === 0 && hoursUntilEnd === 0 && minutesUntilEnd === 0 && secondsUntilEnd === 0) onComplete?.();
+	}, [
+		daysUntilEnd,
+		hoursUntilEnd,
+		minutesUntilEnd,
+		onComplete,
+		secondsUntilEnd
+	]);
+	if (small) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-baseline whitespace-nowrap",
+		children: [
+			Boolean(preLabel) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.BodySecondary, {
+				color: isUrgent ? "critical" : "primary",
+				children: preLabel
+			}), "\xA0"] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.BodySecondary, {
+				color: isUrgent ? "critical" : "primary",
+				children: primaryDurationValue
+			}),
+			secondaryDurationValue && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: ["\xA0", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.BodySecondary, {
+				color: isUrgent ? "critical" : "primary",
+				children: secondaryDurationValue
+			})] }),
+			"\xA0",
+			altDurationValue && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.BodySecondary, {
+				color: isUrgent ? "critical" : "primary",
+				children: altDurationValue
+			}), "\xA0"] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.BodySecondary, {
+				color: isUrgent ? "critical" : "primary",
+				children: label
+			})
+		]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-baseline whitespace-nowrap",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `hui-text-h1 text-${isUrgent ? "text-critical" : "text-primary"}`,
+				children: primaryDurationValue
+			}),
+			secondaryDurationValue && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: ["\xA0", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `hui-text-h1 text-${isUrgent ? "text-critical" : "text-primary"}`,
+				children: secondaryDurationValue
+			})] }),
+			altDurationValue && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: ["\xA0", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `hui-text-h1 text-${isUrgent ? "text-critical" : "text-primary"}`,
+				children: altDurationValue
+			})] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.H3, {
+				className: "ml-2",
+				color: "secondary",
+				children: label
+			})
+		]
+	});
+};
+//#endregion
+Object.defineProperty(exports, "Countdown", {
+	enumerable: true,
+	get: function() {
+		return Countdown;
+	}
+});
+
+//# sourceMappingURL=Countdown-D4-QPv6V.cjs.map

package/Countdown-D4-QPv6V.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Countdown-D4-QPv6V.cjs","names":["usePrevious","BodySecondary","H3"],"sources":["../src/Countdown/hooks/useGetCountdown.ts","../src/Countdown/Countdown.tsx"],"sourcesContent":["import ms from 'ms';\nimport { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { CountdownFlashpoint } from '../Countdown.types';\n\ntype Props = {\n    completionTime: number;\n    flashpoint?: CountdownFlashpoint;\n    forceSeconds?: boolean;\n    startTime?: number;\n};\n\nexport const useGetCountdown = ({ completionTime, flashpoint, forceSeconds, startTime }: Props) => {\n    // this will trigger the hook to update the remaining time calculations\n    const intervalRef = useRef<ReturnType<typeof setInterval>>(null);\n\n    const previousStartTime = usePrevious(startTime);\n    const [now, setNow] = useState(startTime ?? Date.now());\n    const [isUrgent, setIsUrgent] = useState(false);\n\n    const timeUntilCompletion = completionTime - now;\n\n    // number of complete days until the end\n    const daysUntilEnd = Math.max(Math.floor(timeUntilCompletion / ms('1d')), 0);\n    // divide into number of hours, and then remove the number of complete days via modulo\n    const hoursUntilEnd = Math.max(Math.floor((timeUntilCompletion / ms('1h')) % 24), 0);\n    // divide into number of minutes, and then remove the number of complete hours via modulo\n    const minutesUntilEnd = Math.max(Math.floor((timeUntilCompletion / ms('1m')) % 60), 0);\n    // divide into number of seconds, and then remove the number of complete minutes via modulo\n    const secondsUntilEnd = Math.max(Math.floor((timeUntilCompletion / ms('1s')) % 60), 0);\n\n    useEffect(() => {\n        if (startTime && startTime !== previousStartTime && intervalRef.current) {\n            clearInterval(intervalRef.current);\n            setNow(startTime);\n\n            const nextIntervalAmount = hoursUntilEnd > 1 && minutesUntilEnd > 0 && !forceSeconds ? ms('1m') : ms('1s');\n            intervalRef.current = setInterval(() => {\n                setNow(startTime + nextIntervalAmount);\n            }, nextIntervalAmount);\n        }\n    }, [forceSeconds, hoursUntilEnd, minutesUntilEnd, previousStartTime, startTime]);\n\n    useEffect(() => {\n        if (intervalRef.current) {\n            clearInterval(intervalRef.current);\n        }\n        // if there are hours remaining, we don't show seconds, so we can reduce the number of calls by waiting a full minute for the next countdown update\n        const nextIntervalAmount = hoursUntilEnd > 1 && minutesUntilEnd > 0 && !forceSeconds ? ms('1m') : ms('1s');\n        intervalRef.current = setInterval(() => {\n            setNow((previousNow) => previousNow + nextIntervalAmount);\n        }, nextIntervalAmount);\n        if (flashpoint) {\n            const { duration, value } = flashpoint;\n            const noDaysRemain = daysUntilEnd === 0;\n            const noHoursRemain = hoursUntilEnd === 0;\n            const noMinutesRemain = minutesUntilEnd === 0;\n            // when determining urgency, the smaller value should be zero before it is marked as urgent\n            switch (duration) {\n                case 'd':\n                default: {\n                    const areDaysUrgent = value > daysUntilEnd;\n                    const areRemainingHoursUrgent = value === daysUntilEnd && hoursUntilEnd === 0;\n                    setIsUrgent(areDaysUrgent || areRemainingHoursUrgent);\n                    break;\n                }\n                case 'h': {\n                    const areHoursUrgent = value > hoursUntilEnd;\n                    const areRemainingMinutesUrgent = value === hoursUntilEnd && minutesUntilEnd === 0;\n                    setIsUrgent(noDaysRemain && (areHoursUrgent || areRemainingMinutesUrgent));\n                    break;\n                }\n                case 'm': {\n                    const areMinutesUrgent = value > minutesUntilEnd;\n                    const areRemainingSecondsUrgent = value === minutesUntilEnd && secondsUntilEnd === 0;\n                    setIsUrgent(noDaysRemain && noHoursRemain && (areMinutesUrgent || areRemainingSecondsUrgent));\n                    break;\n                }\n                case 's':\n                    setIsUrgent(noDaysRemain && noHoursRemain && noMinutesRemain && value >= secondsUntilEnd);\n                    break;\n            }\n        }\n\n        return () => {\n            if (intervalRef.current) {\n                clearInterval(intervalRef.current);\n            }\n        };\n    }, [daysUntilEnd, flashpoint, forceSeconds, hoursUntilEnd, minutesUntilEnd, secondsUntilEnd]);\n\n    return useMemo(\n        () => ({\n            daysUntilEnd,\n            hoursUntilEnd,\n            isUrgent,\n            minutesUntilEnd,\n            secondsUntilEnd,\n        }),\n        [daysUntilEnd, hoursUntilEnd, isUrgent, minutesUntilEnd, secondsUntilEnd]\n    );\n};\n","import { useEffect } from 'react';\n\nimport { BodySecondary, H3 } from '../Typography/Text/Text';\nimport { CountdownFlashpoint } from './Countdown.types';\nimport { useGetCountdown } from './hooks/useGetCountdown';\n\n/**\n * @property completionTime Timestamp (in ms) for when the countdown will first reach zero\n * @property flashpoint Amount of time left before the countdown turns red (signalling urgency)\n * @property label Additional information for the countdown. *e.g.* 5d 23h **Until the event begins!**\n * @property onComplete Called when the countdown reaches zero.\n * @property preLabel Information shown before the countdown numbers. Will not be shown unless countdown is small\n * @property small If true, all text (the countdown numbers and the label) will be the same size\n * @property startTime Represents the time from which the countdown is counting down from\n * @property timeLabels Used for internationalization, defaults to d/h/m/s, represents days/hours/minutes/seconds\n */\nexport type CountdownProps = {\n    /* Timestamp (in ms) for when the countdown will first reach zero */\n    completionTime: number;\n    // Amount of time left before the countdown turns red (signalling urgency)\n    flashpoint?: CountdownFlashpoint;\n    // If true, the countdown will always display with seconds included\n    forceSeconds?: boolean;\n    // If true, the countdown will always render in the urgent/critical color regardless of time remaining\n    forceUrgent?: boolean;\n    // Additional information for the countdown. *e.g.* 5d 23h **Until the event begins!**\n    label?: string;\n    // Called when the countdown reaches zero.\n    onComplete?: () => void;\n    // Information shown before the countdown numbers. Will not be shown unless countdown is small\n    preLabel?: string;\n    // If true, all text (the countdown numbers and the label) will be the same size\n    small?: boolean;\n    // Represents the time from which the countdown is counting down from\n    startTime?: number;\n    // Used for internationalization, defaults to d/h/m/s, represents days/hours/minutes/seconds\n    timeLabels?: {\n        days?: string;\n        hours?: string;\n        minutes?: string;\n        seconds?: string;\n    };\n};\n\nexport const Countdown = ({\n    completionTime,\n    flashpoint,\n    forceSeconds,\n    forceUrgent,\n    label,\n    onComplete,\n    preLabel,\n    small,\n    startTime,\n    timeLabels,\n}: CountdownProps) => {\n    const {\n        daysUntilEnd,\n        hoursUntilEnd,\n        isUrgent: isUrgentFromFlashpoint,\n        minutesUntilEnd,\n        secondsUntilEnd,\n    } = useGetCountdown({\n        completionTime,\n        flashpoint,\n        forceSeconds,\n        startTime,\n    });\n\n    const isUrgent = forceUrgent || isUrgentFromFlashpoint;\n\n    const dayLabel = timeLabels?.days ?? 'd';\n    const hourLabel = timeLabels?.hours ?? 'h';\n    const minuteLabel = timeLabels?.minutes ?? 'm';\n    const secondLabel = timeLabels?.seconds ?? 's';\n\n    let primaryDurationValue = `${daysUntilEnd}${dayLabel}`;\n    let secondaryDurationValue: string | null = `${hoursUntilEnd}${hourLabel}`;\n    let altDurationValue = null;\n\n    // less than one day from end\n    if (daysUntilEnd === 0 && hoursUntilEnd !== 0) {\n        primaryDurationValue = `${hoursUntilEnd}${hourLabel}`;\n        secondaryDurationValue = `${minutesUntilEnd}${minuteLabel}`;\n        if (forceSeconds) {\n            altDurationValue = `${secondsUntilEnd}${secondLabel}`;\n        }\n    } else if (daysUntilEnd === 0 && hoursUntilEnd === 0 && minutesUntilEnd !== 0) {\n        primaryDurationValue = `${minutesUntilEnd}${minuteLabel}`;\n        secondaryDurationValue = `${secondsUntilEnd}${secondLabel}`;\n    } else if (daysUntilEnd === 0 && hoursUntilEnd === 0 && minutesUntilEnd === 0) {\n        primaryDurationValue = `${secondsUntilEnd}${secondLabel}`;\n        secondaryDurationValue = null;\n    }\n\n    useEffect(() => {\n        if (daysUntilEnd === 0 && hoursUntilEnd === 0 && minutesUntilEnd === 0 && secondsUntilEnd === 0) {\n            onComplete?.();\n        }\n    }, [daysUntilEnd, hoursUntilEnd, minutesUntilEnd, onComplete, secondsUntilEnd]);\n\n    if (small) {\n        return (\n            <div className=\"flex items-baseline whitespace-nowrap\">\n                {Boolean(preLabel) && (\n                    <>\n                        <BodySecondary color={isUrgent ? 'critical' : 'primary'}>{preLabel}</BodySecondary>\n                        &nbsp;\n                    </>\n                )}\n                <BodySecondary color={isUrgent ? 'critical' : 'primary'}>{primaryDurationValue}</BodySecondary>\n                {secondaryDurationValue && (\n                    <>\n                        &nbsp;\n                        <BodySecondary color={isUrgent ? 'critical' : 'primary'}>\n                            {secondaryDurationValue}\n                        </BodySecondary>\n                    </>\n                )}\n                &nbsp;\n                {altDurationValue && (\n                    <>\n                        <BodySecondary color={isUrgent ? 'critical' : 'primary'}>{altDurationValue}</BodySecondary>\n                        &nbsp;\n                    </>\n                )}\n                <BodySecondary color={isUrgent ? 'critical' : 'primary'}>{label}</BodySecondary>\n            </div>\n        );\n    }\n\n    return (\n        <div className=\"flex items-baseline whitespace-nowrap\">\n            <span className={`hui-text-h1 text-${isUrgent ? 'text-critical' : 'text-primary'}`}>\n                {primaryDurationValue}\n            </span>\n            {secondaryDurationValue && (\n                <>\n                    &nbsp;\n                    <span className={`hui-text-h1 text-${isUrgent ? 'text-critical' : 'text-primary'}`}>\n                        {secondaryDurationValue}\n                    </span>\n                </>\n            )}\n            {altDurationValue && (\n                <>\n                    &nbsp;\n                    <span className={`hui-text-h1 text-${isUrgent ? 'text-critical' : 'text-primary'}`}>\n                        {altDurationValue}\n                    </span>\n                </>\n            )}\n            <H3\n                className=\"ml-2\"\n                color=\"secondary\"\n            >\n                {label}\n            </H3>\n        </div>\n    );\n};\n"],"mappings":"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"}

package/Countdown-Dw5j-JJ4.d.cts

@@ -0,0 +1,45 @@
+import { t as CountdownFlashpoint } from "./Countdown.types-B7yecprx.cjs";
+
+//#region src/Countdown/Countdown.d.ts
+/**
+ * @property completionTime Timestamp (in ms) for when the countdown will first reach zero
+ * @property flashpoint Amount of time left before the countdown turns red (signalling urgency)
+ * @property label Additional information for the countdown. *e.g.* 5d 23h **Until the event begins!**
+ * @property onComplete Called when the countdown reaches zero.
+ * @property preLabel Information shown before the countdown numbers. Will not be shown unless countdown is small
+ * @property small If true, all text (the countdown numbers and the label) will be the same size
+ * @property startTime Represents the time from which the countdown is counting down from
+ * @property timeLabels Used for internationalization, defaults to d/h/m/s, represents days/hours/minutes/seconds
+ */
+type CountdownProps = {
+  completionTime: number;
+  flashpoint?: CountdownFlashpoint;
+  forceSeconds?: boolean;
+  forceUrgent?: boolean;
+  label?: string;
+  onComplete?: () => void;
+  preLabel?: string;
+  small?: boolean;
+  startTime?: number;
+  timeLabels?: {
+    days?: string;
+    hours?: string;
+    minutes?: string;
+    seconds?: string;
+  };
+};
+declare const Countdown: ({
+  completionTime,
+  flashpoint,
+  forceSeconds,
+  forceUrgent,
+  label,
+  onComplete,
+  preLabel,
+  small,
+  startTime,
+  timeLabels
+}: CountdownProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { CountdownProps as n, Countdown as t };
+//# sourceMappingURL=Countdown-Dw5j-JJ4.d.cts.map

package/Countdown-Dw5j-JJ4.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Countdown-Dw5j-JJ4.d.cts","names":[],"sources":["../src/Countdown/Countdown.tsx"],"mappings":";;;;;AAgBA;;;;;;;;KAAY,cAAA;EAER,cAAA;EAEA,UAAA,GAAa,mBAAmB;EAEhC,YAAA;EAEA,WAAA;EAEA,KAAA;EAEA,UAAA;EAEA,QAAA;EAEA,KAAA;EAEA,SAAA;EAEA,UAAA;IACI,IAAA;IACA,KAAA;IACA,OAAA;IACA,OAAA;EAAA;AAAA;AAAA,cAIK,SAAA;EAAa,cAAA;EAAA,UAAA;EAAA,YAAA;EAAA,WAAA;EAAA,KAAA;EAAA,UAAA;EAAA,QAAA;EAAA,KAAA;EAAA,SAAA;EAAA;AAAA,GAWvB,cAAA,iCAAc,GAAA,CAAA,OAAA"}

package/Countdown-Hiu5EYUI.mjs

@@ -0,0 +1,174 @@
+import { BodySecondary, H3 } from "./Typography/Text.mjs";
+import { usePrevious } from "./hooks/usePrevious.mjs";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import ms from "ms";
+//#region src/Countdown/hooks/useGetCountdown.ts
+const useGetCountdown = ({ completionTime, flashpoint, forceSeconds, startTime }) => {
+	const intervalRef = useRef(null);
+	const previousStartTime = usePrevious(startTime);
+	const [now, setNow] = useState(startTime ?? Date.now());
+	const [isUrgent, setIsUrgent] = useState(false);
+	const timeUntilCompletion = completionTime - now;
+	const daysUntilEnd = Math.max(Math.floor(timeUntilCompletion / ms("1d")), 0);
+	const hoursUntilEnd = Math.max(Math.floor(timeUntilCompletion / ms("1h") % 24), 0);
+	const minutesUntilEnd = Math.max(Math.floor(timeUntilCompletion / ms("1m") % 60), 0);
+	const secondsUntilEnd = Math.max(Math.floor(timeUntilCompletion / ms("1s") % 60), 0);
+	useEffect(() => {
+		if (startTime && startTime !== previousStartTime && intervalRef.current) {
+			clearInterval(intervalRef.current);
+			setNow(startTime);
+			const nextIntervalAmount = hoursUntilEnd > 1 && minutesUntilEnd > 0 && !forceSeconds ? ms("1m") : ms("1s");
+			intervalRef.current = setInterval(() => {
+				setNow(startTime + nextIntervalAmount);
+			}, nextIntervalAmount);
+		}
+	}, [
+		forceSeconds,
+		hoursUntilEnd,
+		minutesUntilEnd,
+		previousStartTime,
+		startTime
+	]);
+	useEffect(() => {
+		if (intervalRef.current) clearInterval(intervalRef.current);
+		const nextIntervalAmount = hoursUntilEnd > 1 && minutesUntilEnd > 0 && !forceSeconds ? ms("1m") : ms("1s");
+		intervalRef.current = setInterval(() => {
+			setNow((previousNow) => previousNow + nextIntervalAmount);
+		}, nextIntervalAmount);
+		if (flashpoint) {
+			const { duration, value } = flashpoint;
+			const noDaysRemain = daysUntilEnd === 0;
+			const noHoursRemain = hoursUntilEnd === 0;
+			const noMinutesRemain = minutesUntilEnd === 0;
+			switch (duration) {
+				case "d":
+				default:
+					setIsUrgent(value > daysUntilEnd || value === daysUntilEnd && hoursUntilEnd === 0);
+					break;
+				case "h":
+					setIsUrgent(noDaysRemain && (value > hoursUntilEnd || value === hoursUntilEnd && minutesUntilEnd === 0));
+					break;
+				case "m":
+					setIsUrgent(noDaysRemain && noHoursRemain && (value > minutesUntilEnd || value === minutesUntilEnd && secondsUntilEnd === 0));
+					break;
+				case "s":
+					setIsUrgent(noDaysRemain && noHoursRemain && noMinutesRemain && value >= secondsUntilEnd);
+					break;
+			}
+		}
+		return () => {
+			if (intervalRef.current) clearInterval(intervalRef.current);
+		};
+	}, [
+		daysUntilEnd,
+		flashpoint,
+		forceSeconds,
+		hoursUntilEnd,
+		minutesUntilEnd,
+		secondsUntilEnd
+	]);
+	return useMemo(() => ({
+		daysUntilEnd,
+		hoursUntilEnd,
+		isUrgent,
+		minutesUntilEnd,
+		secondsUntilEnd
+	}), [
+		daysUntilEnd,
+		hoursUntilEnd,
+		isUrgent,
+		minutesUntilEnd,
+		secondsUntilEnd
+	]);
+};
+//#endregion
+//#region src/Countdown/Countdown.tsx
+const Countdown = ({ completionTime, flashpoint, forceSeconds, forceUrgent, label, onComplete, preLabel, small, startTime, timeLabels }) => {
+	const { daysUntilEnd, hoursUntilEnd, isUrgent: isUrgentFromFlashpoint, minutesUntilEnd, secondsUntilEnd } = useGetCountdown({
+		completionTime,
+		flashpoint,
+		forceSeconds,
+		startTime
+	});
+	const isUrgent = forceUrgent || isUrgentFromFlashpoint;
+	const dayLabel = timeLabels?.days ?? "d";
+	const hourLabel = timeLabels?.hours ?? "h";
+	const minuteLabel = timeLabels?.minutes ?? "m";
+	const secondLabel = timeLabels?.seconds ?? "s";
+	let primaryDurationValue = `${daysUntilEnd}${dayLabel}`;
+	let secondaryDurationValue = `${hoursUntilEnd}${hourLabel}`;
+	let altDurationValue = null;
+	if (daysUntilEnd === 0 && hoursUntilEnd !== 0) {
+		primaryDurationValue = `${hoursUntilEnd}${hourLabel}`;
+		secondaryDurationValue = `${minutesUntilEnd}${minuteLabel}`;
+		if (forceSeconds) altDurationValue = `${secondsUntilEnd}${secondLabel}`;
+	} else if (daysUntilEnd === 0 && hoursUntilEnd === 0 && minutesUntilEnd !== 0) {
+		primaryDurationValue = `${minutesUntilEnd}${minuteLabel}`;
+		secondaryDurationValue = `${secondsUntilEnd}${secondLabel}`;
+	} else if (daysUntilEnd === 0 && hoursUntilEnd === 0 && minutesUntilEnd === 0) {
+		primaryDurationValue = `${secondsUntilEnd}${secondLabel}`;
+		secondaryDurationValue = null;
+	}
+	useEffect(() => {
+		if (daysUntilEnd === 0 && hoursUntilEnd === 0 && minutesUntilEnd === 0 && secondsUntilEnd === 0) onComplete?.();
+	}, [
+		daysUntilEnd,
+		hoursUntilEnd,
+		minutesUntilEnd,
+		onComplete,
+		secondsUntilEnd
+	]);
+	if (small) return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-baseline whitespace-nowrap",
+		children: [
+			Boolean(preLabel) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BodySecondary, {
+				color: isUrgent ? "critical" : "primary",
+				children: preLabel
+			}), "\xA0"] }),
+			/* @__PURE__ */ jsx(BodySecondary, {
+				color: isUrgent ? "critical" : "primary",
+				children: primaryDurationValue
+			}),
+			secondaryDurationValue && /* @__PURE__ */ jsxs(Fragment, { children: ["\xA0", /* @__PURE__ */ jsx(BodySecondary, {
+				color: isUrgent ? "critical" : "primary",
+				children: secondaryDurationValue
+			})] }),
+			"\xA0",
+			altDurationValue && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BodySecondary, {
+				color: isUrgent ? "critical" : "primary",
+				children: altDurationValue
+			}), "\xA0"] }),
+			/* @__PURE__ */ jsx(BodySecondary, {
+				color: isUrgent ? "critical" : "primary",
+				children: label
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-baseline whitespace-nowrap",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: `hui-text-h1 text-${isUrgent ? "text-critical" : "text-primary"}`,
+				children: primaryDurationValue
+			}),
+			secondaryDurationValue && /* @__PURE__ */ jsxs(Fragment, { children: ["\xA0", /* @__PURE__ */ jsx("span", {
+				className: `hui-text-h1 text-${isUrgent ? "text-critical" : "text-primary"}`,
+				children: secondaryDurationValue
+			})] }),
+			altDurationValue && /* @__PURE__ */ jsxs(Fragment, { children: ["\xA0", /* @__PURE__ */ jsx("span", {
+				className: `hui-text-h1 text-${isUrgent ? "text-critical" : "text-primary"}`,
+				children: altDurationValue
+			})] }),
+			/* @__PURE__ */ jsx(H3, {
+				className: "ml-2",
+				color: "secondary",
+				children: label
+			})
+		]
+	});
+};
+//#endregion
+export { Countdown as t };
+
+//# sourceMappingURL=Countdown-Hiu5EYUI.mjs.map

package/Countdown-Hiu5EYUI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Countdown-Hiu5EYUI.mjs","names":[],"sources":["../src/Countdown/hooks/useGetCountdown.ts","../src/Countdown/Countdown.tsx"],"sourcesContent":["import ms from 'ms';\nimport { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { CountdownFlashpoint } from '../Countdown.types';\n\ntype Props = {\n    completionTime: number;\n    flashpoint?: CountdownFlashpoint;\n    forceSeconds?: boolean;\n    startTime?: number;\n};\n\nexport const useGetCountdown = ({ completionTime, flashpoint, forceSeconds, startTime }: Props) => {\n    // this will trigger the hook to update the remaining time calculations\n    const intervalRef = useRef<ReturnType<typeof setInterval>>(null);\n\n    const previousStartTime = usePrevious(startTime);\n    const [now, setNow] = useState(startTime ?? Date.now());\n    const [isUrgent, setIsUrgent] = useState(false);\n\n    const timeUntilCompletion = completionTime - now;\n\n    // number of complete days until the end\n    const daysUntilEnd = Math.max(Math.floor(timeUntilCompletion / ms('1d')), 0);\n    // divide into number of hours, and then remove the number of complete days via modulo\n    const hoursUntilEnd = Math.max(Math.floor((timeUntilCompletion / ms('1h')) % 24), 0);\n    // divide into number of minutes, and then remove the number of complete hours via modulo\n    const minutesUntilEnd = Math.max(Math.floor((timeUntilCompletion / ms('1m')) % 60), 0);\n    // divide into number of seconds, and then remove the number of complete minutes via modulo\n    const secondsUntilEnd = Math.max(Math.floor((timeUntilCompletion / ms('1s')) % 60), 0);\n\n    useEffect(() => {\n        if (startTime && startTime !== previousStartTime && intervalRef.current) {\n            clearInterval(intervalRef.current);\n            setNow(startTime);\n\n            const nextIntervalAmount = hoursUntilEnd > 1 && minutesUntilEnd > 0 && !forceSeconds ? ms('1m') : ms('1s');\n            intervalRef.current = setInterval(() => {\n                setNow(startTime + nextIntervalAmount);\n            }, nextIntervalAmount);\n        }\n    }, [forceSeconds, hoursUntilEnd, minutesUntilEnd, previousStartTime, startTime]);\n\n    useEffect(() => {\n        if (intervalRef.current) {\n            clearInterval(intervalRef.current);\n        }\n        // if there are hours remaining, we don't show seconds, so we can reduce the number of calls by waiting a full minute for the next countdown update\n        const nextIntervalAmount = hoursUntilEnd > 1 && minutesUntilEnd > 0 && !forceSeconds ? ms('1m') : ms('1s');\n        intervalRef.current = setInterval(() => {\n            setNow((previousNow) => previousNow + nextIntervalAmount);\n        }, nextIntervalAmount);\n        if (flashpoint) {\n            const { duration, value } = flashpoint;\n            const noDaysRemain = daysUntilEnd === 0;\n            const noHoursRemain = hoursUntilEnd === 0;\n            const noMinutesRemain = minutesUntilEnd === 0;\n            // when determining urgency, the smaller value should be zero before it is marked as urgent\n            switch (duration) {\n                case 'd':\n                default: {\n                    const areDaysUrgent = value > daysUntilEnd;\n                    const areRemainingHoursUrgent = value === daysUntilEnd && hoursUntilEnd === 0;\n                    setIsUrgent(areDaysUrgent || areRemainingHoursUrgent);\n                    break;\n                }\n                case 'h': {\n                    const areHoursUrgent = value > hoursUntilEnd;\n                    const areRemainingMinutesUrgent = value === hoursUntilEnd && minutesUntilEnd === 0;\n                    setIsUrgent(noDaysRemain && (areHoursUrgent || areRemainingMinutesUrgent));\n                    break;\n                }\n                case 'm': {\n                    const areMinutesUrgent = value > minutesUntilEnd;\n                    const areRemainingSecondsUrgent = value === minutesUntilEnd && secondsUntilEnd === 0;\n                    setIsUrgent(noDaysRemain && noHoursRemain && (areMinutesUrgent || areRemainingSecondsUrgent));\n                    break;\n                }\n                case 's':\n                    setIsUrgent(noDaysRemain && noHoursRemain && noMinutesRemain && value >= secondsUntilEnd);\n                    break;\n            }\n        }\n\n        return () => {\n            if (intervalRef.current) {\n                clearInterval(intervalRef.current);\n            }\n        };\n    }, [daysUntilEnd, flashpoint, forceSeconds, hoursUntilEnd, minutesUntilEnd, secondsUntilEnd]);\n\n    return useMemo(\n        () => ({\n            daysUntilEnd,\n            hoursUntilEnd,\n            isUrgent,\n            minutesUntilEnd,\n            secondsUntilEnd,\n        }),\n        [daysUntilEnd, hoursUntilEnd, isUrgent, minutesUntilEnd, secondsUntilEnd]\n    );\n};\n","import { useEffect } from 'react';\n\nimport { BodySecondary, H3 } from '../Typography/Text/Text';\nimport { CountdownFlashpoint } from './Countdown.types';\nimport { useGetCountdown } from './hooks/useGetCountdown';\n\n/**\n * @property completionTime Timestamp (in ms) for when the countdown will first reach zero\n * @property flashpoint Amount of time left before the countdown turns red (signalling urgency)\n * @property label Additional information for the countdown. *e.g.* 5d 23h **Until the event begins!**\n * @property onComplete Called when the countdown reaches zero.\n * @property preLabel Information shown before the countdown numbers. Will not be shown unless countdown is small\n * @property small If true, all text (the countdown numbers and the label) will be the same size\n * @property startTime Represents the time from which the countdown is counting down from\n * @property timeLabels Used for internationalization, defaults to d/h/m/s, represents days/hours/minutes/seconds\n */\nexport type CountdownProps = {\n    /* Timestamp (in ms) for when the countdown will first reach zero */\n    completionTime: number;\n    // Amount of time left before the countdown turns red (signalling urgency)\n    flashpoint?: CountdownFlashpoint;\n    // If true, the countdown will always display with seconds included\n    forceSeconds?: boolean;\n    // If true, the countdown will always render in the urgent/critical color regardless of time remaining\n    forceUrgent?: boolean;\n    // Additional information for the countdown. *e.g.* 5d 23h **Until the event begins!**\n    label?: string;\n    // Called when the countdown reaches zero.\n    onComplete?: () => void;\n    // Information shown before the countdown numbers. Will not be shown unless countdown is small\n    preLabel?: string;\n    // If true, all text (the countdown numbers and the label) will be the same size\n    small?: boolean;\n    // Represents the time from which the countdown is counting down from\n    startTime?: number;\n    // Used for internationalization, defaults to d/h/m/s, represents days/hours/minutes/seconds\n    timeLabels?: {\n        days?: string;\n        hours?: string;\n        minutes?: string;\n        seconds?: string;\n    };\n};\n\nexport const Countdown = ({\n    completionTime,\n    flashpoint,\n    forceSeconds,\n    forceUrgent,\n    label,\n    onComplete,\n    preLabel,\n    small,\n    startTime,\n    timeLabels,\n}: CountdownProps) => {\n    const {\n        daysUntilEnd,\n        hoursUntilEnd,\n        isUrgent: isUrgentFromFlashpoint,\n        minutesUntilEnd,\n        secondsUntilEnd,\n    } = useGetCountdown({\n        completionTime,\n        flashpoint,\n        forceSeconds,\n        startTime,\n    });\n\n    const isUrgent = forceUrgent || isUrgentFromFlashpoint;\n\n    const dayLabel = timeLabels?.days ?? 'd';\n    const hourLabel = timeLabels?.hours ?? 'h';\n    const minuteLabel = timeLabels?.minutes ?? 'm';\n    const secondLabel = timeLabels?.seconds ?? 's';\n\n    let primaryDurationValue = `${daysUntilEnd}${dayLabel}`;\n    let secondaryDurationValue: string | null = `${hoursUntilEnd}${hourLabel}`;\n    let altDurationValue = null;\n\n    // less than one day from end\n    if (daysUntilEnd === 0 && hoursUntilEnd !== 0) {\n        primaryDurationValue = `${hoursUntilEnd}${hourLabel}`;\n        secondaryDurationValue = `${minutesUntilEnd}${minuteLabel}`;\n        if (forceSeconds) {\n            altDurationValue = `${secondsUntilEnd}${secondLabel}`;\n        }\n    } else if (daysUntilEnd === 0 && hoursUntilEnd === 0 && minutesUntilEnd !== 0) {\n        primaryDurationValue = `${minutesUntilEnd}${minuteLabel}`;\n        secondaryDurationValue = `${secondsUntilEnd}${secondLabel}`;\n    } else if (daysUntilEnd === 0 && hoursUntilEnd === 0 && minutesUntilEnd === 0) {\n        primaryDurationValue = `${secondsUntilEnd}${secondLabel}`;\n        secondaryDurationValue = null;\n    }\n\n    useEffect(() => {\n        if (daysUntilEnd === 0 && hoursUntilEnd === 0 && minutesUntilEnd === 0 && secondsUntilEnd === 0) {\n            onComplete?.();\n        }\n    }, [daysUntilEnd, hoursUntilEnd, minutesUntilEnd, onComplete, secondsUntilEnd]);\n\n    if (small) {\n        return (\n            <div className=\"flex items-baseline whitespace-nowrap\">\n                {Boolean(preLabel) && (\n                    <>\n                        <BodySecondary color={isUrgent ? 'critical' : 'primary'}>{preLabel}</BodySecondary>\n                        &nbsp;\n                    </>\n                )}\n                <BodySecondary color={isUrgent ? 'critical' : 'primary'}>{primaryDurationValue}</BodySecondary>\n                {secondaryDurationValue && (\n                    <>\n                        &nbsp;\n                        <BodySecondary color={isUrgent ? 'critical' : 'primary'}>\n                            {secondaryDurationValue}\n                        </BodySecondary>\n                    </>\n                )}\n                &nbsp;\n                {altDurationValue && (\n                    <>\n                        <BodySecondary color={isUrgent ? 'critical' : 'primary'}>{altDurationValue}</BodySecondary>\n                        &nbsp;\n                    </>\n                )}\n                <BodySecondary color={isUrgent ? 'critical' : 'primary'}>{label}</BodySecondary>\n            </div>\n        );\n    }\n\n    return (\n        <div className=\"flex items-baseline whitespace-nowrap\">\n            <span className={`hui-text-h1 text-${isUrgent ? 'text-critical' : 'text-primary'}`}>\n                {primaryDurationValue}\n            </span>\n            {secondaryDurationValue && (\n                <>\n                    &nbsp;\n                    <span className={`hui-text-h1 text-${isUrgent ? 'text-critical' : 'text-primary'}`}>\n                        {secondaryDurationValue}\n                    </span>\n                </>\n            )}\n            {altDurationValue && (\n                <>\n                    &nbsp;\n                    <span className={`hui-text-h1 text-${isUrgent ? 'text-critical' : 'text-primary'}`}>\n                        {altDurationValue}\n                    </span>\n                </>\n            )}\n            <H3\n                className=\"ml-2\"\n                color=\"secondary\"\n            >\n                {label}\n            </H3>\n        </div>\n    );\n};\n"],"mappings":"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"}

package/Countdown.types-B7yecprx.d.cts

@@ -0,0 +1,8 @@
+//#region src/Countdown/Countdown.types.d.ts
+type CountdownFlashpoint = {
+  duration: 'd' | 'h' | 'm' | 's';
+  value: number;
+};
+//#endregion
+export { CountdownFlashpoint as t };
+//# sourceMappingURL=Countdown.types-B7yecprx.d.cts.map

package/Countdown.types-B7yecprx.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Countdown.types-B7yecprx.d.cts","names":[],"sources":["../src/Countdown/Countdown.types.ts"],"mappings":";KAAY,mBAAA;EACR,QAAA;EACA,KAAK;AAAA"}

package/Countdown.types-B7yecprx.d.mts

@@ -0,0 +1,8 @@
+//#region src/Countdown/Countdown.types.d.ts
+type CountdownFlashpoint = {
+  duration: 'd' | 'h' | 'm' | 's';
+  value: number;
+};
+//#endregion
+export { CountdownFlashpoint as t };
+//# sourceMappingURL=Countdown.types-B7yecprx.d.mts.map

package/Countdown.types-B7yecprx.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Countdown.types-B7yecprx.d.mts","names":[],"sources":["../src/Countdown/Countdown.types.ts"],"mappings":";KAAY,mBAAA;EACR,QAAA;EACA,KAAK;AAAA"}

package/CreditCardIcon-DirCX2rx.d.cts

@@ -0,0 +1,29 @@
+//#region src/Icons/CreditCardIcon/CreditCardIcon.d.ts
+type CardBrands = 'amex' | 'cash' | 'check' | 'diners' | 'discover' | 'jcb' | 'mastercard' | 'money-order' | 'other' | 'visa' | 'wire-transfer';
+type CardIconProps = {
+  brand: CardBrands;
+  className?: string;
+};
+declare const cardImages: {
+  readonly amex: import("react/jsx-runtime").JSX.Element;
+  readonly cash: import("react/jsx-runtime").JSX.Element;
+  readonly check: import("react/jsx-runtime").JSX.Element;
+  readonly diners: import("react/jsx-runtime").JSX.Element;
+  readonly discover: import("react/jsx-runtime").JSX.Element;
+  readonly jcb: import("react/jsx-runtime").JSX.Element;
+  readonly mastercard: import("react/jsx-runtime").JSX.Element;
+  readonly 'money-order': import("react/jsx-runtime").JSX.Element;
+  readonly other: import("react/jsx-runtime").JSX.Element;
+  readonly visa: import("react/jsx-runtime").JSX.Element;
+  readonly 'wire-transfer': import("react/jsx-runtime").JSX.Element;
+};
+declare const CreditCardIcon: {
+  ({
+    brand,
+    className
+  }: CardIconProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { cardImages as i, CardIconProps as n, CreditCardIcon as r, CardBrands as t };
+//# sourceMappingURL=CreditCardIcon-DirCX2rx.d.cts.map

package/CreditCardIcon-DirCX2rx.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditCardIcon-DirCX2rx.d.cts","names":[],"sources":["../src/Icons/CreditCardIcon/CreditCardIcon.tsx"],"mappings":";KAgBY,UAAA;AAAA,KAaA,aAAA;EACR,KAAA,EAAO,UAAU;EACjB,SAAA;AAAA;AAAA,cAGS,UAAA;EAAA;;;;;;;;;;;;cAcA,cAAA;EAAA;;;KAAwC,aAAA,+BAAa,GAAA,CAAA,OAAA"}

package/CreditCardIcon-DirCX2rx.d.mts

@@ -0,0 +1,29 @@
+//#region src/Icons/CreditCardIcon/CreditCardIcon.d.ts
+type CardBrands = 'amex' | 'cash' | 'check' | 'diners' | 'discover' | 'jcb' | 'mastercard' | 'money-order' | 'other' | 'visa' | 'wire-transfer';
+type CardIconProps = {
+  brand: CardBrands;
+  className?: string;
+};
+declare const cardImages: {
+  readonly amex: import("react/jsx-runtime").JSX.Element;
+  readonly cash: import("react/jsx-runtime").JSX.Element;
+  readonly check: import("react/jsx-runtime").JSX.Element;
+  readonly diners: import("react/jsx-runtime").JSX.Element;
+  readonly discover: import("react/jsx-runtime").JSX.Element;
+  readonly jcb: import("react/jsx-runtime").JSX.Element;
+  readonly mastercard: import("react/jsx-runtime").JSX.Element;
+  readonly 'money-order': import("react/jsx-runtime").JSX.Element;
+  readonly other: import("react/jsx-runtime").JSX.Element;
+  readonly visa: import("react/jsx-runtime").JSX.Element;
+  readonly 'wire-transfer': import("react/jsx-runtime").JSX.Element;
+};
+declare const CreditCardIcon: {
+  ({
+    brand,
+    className
+  }: CardIconProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { cardImages as i, CardIconProps as n, CreditCardIcon as r, CardBrands as t };
+//# sourceMappingURL=CreditCardIcon-DirCX2rx.d.mts.map

package/CreditCardIcon-DirCX2rx.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditCardIcon-DirCX2rx.d.mts","names":[],"sources":["../src/Icons/CreditCardIcon/CreditCardIcon.tsx"],"mappings":";KAgBY,UAAA;AAAA,KAaA,aAAA;EACR,KAAA,EAAO,UAAU;EACjB,SAAA;AAAA;AAAA,cAGS,UAAA;EAAA;;;;;;;;;;;;cAcA,cAAA;EAAA;;;KAAwC,aAAA,+BAAa,GAAA,CAAA,OAAA"}