@envive-ai/react-widgets 0.1.2 → 0.1.3

package/dist/packages/components/dist/components/Accordion/Accordion.cjs

@@ -0,0 +1,80 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_Typography = require('../Typography/Typography.cjs');
+require('../Typography/index.cjs');
+const require_ChevronDown = require('../../../../icons/dist/ChevronDown.cjs');
+let react = require("react");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+
+//#region ../components/dist/components/Accordion/Accordion.js
+const ANIMATION_DURATION = .3;
+const Accordion = ({ title, content }) => {
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const contentRef = (0, react.useRef)(null);
+	const titleWrapperClasses = (0, classnames.default)({
+		"spiffy-tw-border-b": true,
+		"spiffy-tw-border-[--spiffy-colors-border-light]": true,
+		"spiffy-tw-pb-2": true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-justify-between": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-w-full": true,
+		"spiffy-tw-group": true
+	});
+	const titleClasses = (0, classnames.default)({
+		"spiffy-tw-uppercase": true,
+		"spiffy-tw-text-[--spiffy-colors-text-primary]": true,
+		"!spiffy-tw-font-[400]": true,
+		"group-aria-expanded:!spiffy-tw-font-medium": true
+	});
+	const contentClasses = (0, classnames.default)({ "spiffy-tw-overflow-hidden": true });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		"aria-expanded": isOpen,
+		type: "button",
+		className: titleWrapperClasses,
+		onClick: () => setIsOpen(!isOpen),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+			variant: "body4",
+			className: titleClasses,
+			children: title
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+			variants: {
+				open: { rotate: 180 },
+				closed: { rotate: 360 }
+			},
+			animate: isOpen ? "open" : "closed",
+			transition: {
+				duration: ANIMATION_DURATION,
+				ease: "easeOut"
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChevronDown.ChevronDown_default, {})
+		})]
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+		variants: {
+			open: {
+				height: "auto",
+				marginTop: "24px",
+				marginBottom: "24px"
+			},
+			closed: {
+				height: "0px",
+				marginTop: "0px",
+				marginBottom: "0px"
+			}
+		},
+		className: contentClasses,
+		initial: { height: 0 },
+		animate: isOpen ? "open" : "closed",
+		transition: {
+			duration: ANIMATION_DURATION,
+			ease: "easeOut"
+		},
+		ref: contentRef,
+		children: content
+	})] });
+};
+
+//#endregion
+exports.Accordion = Accordion;

package/dist/packages/components/dist/components/Accordion/Accordion.js

@@ -0,0 +1,78 @@
+import { Typography } from "../Typography/Typography.js";
+import "../Typography/index.js";
+import { ChevronDown_default } from "../../../../icons/dist/ChevronDown.js";
+import { useRef, useState } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+
+//#region ../components/dist/components/Accordion/Accordion.js
+const ANIMATION_DURATION = .3;
+const Accordion = ({ title, content }) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const contentRef = useRef(null);
+	const titleWrapperClasses = classNames({
+		"spiffy-tw-border-b": true,
+		"spiffy-tw-border-[--spiffy-colors-border-light]": true,
+		"spiffy-tw-pb-2": true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-justify-between": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-w-full": true,
+		"spiffy-tw-group": true
+	});
+	const titleClasses = classNames({
+		"spiffy-tw-uppercase": true,
+		"spiffy-tw-text-[--spiffy-colors-text-primary]": true,
+		"!spiffy-tw-font-[400]": true,
+		"group-aria-expanded:!spiffy-tw-font-medium": true
+	});
+	const contentClasses = classNames({ "spiffy-tw-overflow-hidden": true });
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("button", {
+		"aria-expanded": isOpen,
+		type: "button",
+		className: titleWrapperClasses,
+		onClick: () => setIsOpen(!isOpen),
+		children: [/* @__PURE__ */ jsx(Typography, {
+			variant: "body4",
+			className: titleClasses,
+			children: title
+		}), /* @__PURE__ */ jsx(motion.div, {
+			variants: {
+				open: { rotate: 180 },
+				closed: { rotate: 360 }
+			},
+			animate: isOpen ? "open" : "closed",
+			transition: {
+				duration: ANIMATION_DURATION,
+				ease: "easeOut"
+			},
+			children: /* @__PURE__ */ jsx(ChevronDown_default, {})
+		})]
+	}), /* @__PURE__ */ jsx(motion.div, {
+		variants: {
+			open: {
+				height: "auto",
+				marginTop: "24px",
+				marginBottom: "24px"
+			},
+			closed: {
+				height: "0px",
+				marginTop: "0px",
+				marginBottom: "0px"
+			}
+		},
+		className: contentClasses,
+		initial: { height: 0 },
+		animate: isOpen ? "open" : "closed",
+		transition: {
+			duration: ANIMATION_DURATION,
+			ease: "easeOut"
+		},
+		ref: contentRef,
+		children: content
+	})] });
+};
+
+//#endregion
+export { Accordion };

package/dist/packages/components/dist/components/Accordion/index.cjs

@@ -0,0 +1 @@
+const require_Accordion = require('./Accordion.cjs');

package/dist/packages/components/dist/components/Accordion/index.js

@@ -0,0 +1 @@
+import { Accordion } from "./Accordion.js";

package/dist/packages/components/dist/components/AnimatedChevron/AnimatedChevron.cjs

@@ -0,0 +1,30 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+
+//#region ../components/dist/components/AnimatedChevron/AnimatedChevron.js
+const AnimatedChevron = ({ animationKey, chevronColor }) => {
+	const leftRotation = (0, framer_motion.useTransform)(animationKey, [300, 0], [-12, 0]);
+	const rightRotation = (0, framer_motion.useTransform)(animationKey, [300, 0], [12, 0]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: { display: "flex" },
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, { style: {
+			x: 1,
+			width: "25px",
+			height: "4px",
+			background: chevronColor,
+			borderRadius: "8px",
+			rotate: leftRotation
+		} }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, { style: {
+			x: -1,
+			width: "25px",
+			height: "4px",
+			background: chevronColor,
+			borderRadius: "8px",
+			rotate: rightRotation
+		} })]
+	});
+};
+
+//#endregion
+exports.AnimatedChevron = AnimatedChevron;

package/dist/packages/components/dist/components/AnimatedChevron/AnimatedChevron.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion, useTransform } from "framer-motion";
+
+//#region ../components/dist/components/AnimatedChevron/AnimatedChevron.js
+const AnimatedChevron = ({ animationKey, chevronColor }) => {
+	const leftRotation = useTransform(animationKey, [300, 0], [-12, 0]);
+	const rightRotation = useTransform(animationKey, [300, 0], [12, 0]);
+	return /* @__PURE__ */ jsxs("div", {
+		style: { display: "flex" },
+		children: [/* @__PURE__ */ jsx(motion.div, { style: {
+			x: 1,
+			width: "25px",
+			height: "4px",
+			background: chevronColor,
+			borderRadius: "8px",
+			rotate: leftRotation
+		} }), /* @__PURE__ */ jsx(motion.div, { style: {
+			x: -1,
+			width: "25px",
+			height: "4px",
+			background: chevronColor,
+			borderRadius: "8px",
+			rotate: rightRotation
+		} })]
+	});
+};
+
+//#endregion
+export { AnimatedChevron };

package/dist/packages/components/dist/components/ButtonBase/ButtonBase.cjs

@@ -0,0 +1,56 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_Typography = require('../Typography/Typography.cjs');
+require('../Typography/index.cjs');
+const require_types = require('./types.cjs');
+let react = require("react");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region ../components/dist/components/ButtonBase/ButtonBase.js
+const ButtonBase = ({ isDisabled = false, dataAttributes, buttonClass, text, textClass, icon, iconClass = "spiffy-tw-w-[21px] spiffy-tw-h-[21px]", dataTestId, onClick, disablePadding = false }) => {
+	const RenderedIcon = () => icon;
+	const buttonRef = (0, react.useRef)(null);
+	const buttonClassName = (0, classnames.default)({
+		[require_types.ButtonBaseOverrides.BUTTON]: true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-min-h-[36px]": true,
+		"spiffy-tw-cursor-pointer": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-gap-2": true,
+		"spiffy-tw-px-4": !disablePadding,
+		"spiffy-tw-transition-colors": true,
+		"spiffy-tw-opacity-40": isDisabled,
+		"spiffy-tw-cursor-not-allowed": isDisabled,
+		[`${buttonClass}`]: buttonClass != null
+	});
+	const textClassName = (0, classnames.default)({
+		[require_types.ButtonBaseOverrides.BUTTON_TEXT]: true,
+		"spiffy-tw-whitespace-nowrap": true,
+		[`${textClass}`]: textClass != null
+	});
+	(0, classnames.default)({
+		[require_types.ButtonBaseOverrides.BUTTON_ICON]: true,
+		[`${iconClass}`]: iconClass != null
+	});
+	(0, react.useEffect)(() => {
+		if (dataAttributes && buttonRef.current) Object.entries(dataAttributes).forEach(([key, value]) => {
+			buttonRef.current?.setAttribute(key, value);
+		});
+	}, [dataAttributes]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		ref: buttonRef,
+		className: buttonClassName,
+		disabled: isDisabled,
+		"data-testid": dataTestId,
+		onClick,
+		children: [icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderedIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+			className: textClassName,
+			children: text
+		})]
+	});
+};
+
+//#endregion
+exports.ButtonBase = ButtonBase;

package/dist/packages/components/dist/components/ButtonBase/ButtonBase.js

@@ -0,0 +1,54 @@
+import { Typography } from "../Typography/Typography.js";
+import "../Typography/index.js";
+import { ButtonBaseOverrides } from "./types.js";
+import { useEffect, useRef } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../components/dist/components/ButtonBase/ButtonBase.js
+const ButtonBase = ({ isDisabled = false, dataAttributes, buttonClass, text, textClass, icon, iconClass = "spiffy-tw-w-[21px] spiffy-tw-h-[21px]", dataTestId, onClick, disablePadding = false }) => {
+	const RenderedIcon = () => icon;
+	const buttonRef = useRef(null);
+	const buttonClassName = classNames({
+		[ButtonBaseOverrides.BUTTON]: true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-min-h-[36px]": true,
+		"spiffy-tw-cursor-pointer": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-gap-2": true,
+		"spiffy-tw-px-4": !disablePadding,
+		"spiffy-tw-transition-colors": true,
+		"spiffy-tw-opacity-40": isDisabled,
+		"spiffy-tw-cursor-not-allowed": isDisabled,
+		[`${buttonClass}`]: buttonClass != null
+	});
+	const textClassName = classNames({
+		[ButtonBaseOverrides.BUTTON_TEXT]: true,
+		"spiffy-tw-whitespace-nowrap": true,
+		[`${textClass}`]: textClass != null
+	});
+	classNames({
+		[ButtonBaseOverrides.BUTTON_ICON]: true,
+		[`${iconClass}`]: iconClass != null
+	});
+	useEffect(() => {
+		if (dataAttributes && buttonRef.current) Object.entries(dataAttributes).forEach(([key, value]) => {
+			buttonRef.current?.setAttribute(key, value);
+		});
+	}, [dataAttributes]);
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		ref: buttonRef,
+		className: buttonClassName,
+		disabled: isDisabled,
+		"data-testid": dataTestId,
+		onClick,
+		children: [icon && /* @__PURE__ */ jsx(RenderedIcon, {}), /* @__PURE__ */ jsx(Typography, {
+			className: textClassName,
+			children: text
+		})]
+	});
+};
+
+//#endregion
+export { ButtonBase };

package/dist/packages/components/dist/components/ButtonBase/index.cjs

@@ -0,0 +1,2 @@
+const require_types = require('./types.cjs');
+const require_ButtonBase = require('./ButtonBase.cjs');

package/dist/packages/components/dist/components/ButtonBase/index.js

@@ -0,0 +1,2 @@
+import { ButtonBaseOverrides } from "./types.js";
+import { ButtonBase } from "./ButtonBase.js";

package/dist/packages/components/dist/components/ButtonBase/types.cjs

@@ -0,0 +1,11 @@
+
+//#region ../components/dist/components/ButtonBase/types.js
+let ButtonBaseOverrides = /* @__PURE__ */ function(ButtonBaseOverrides$1) {
+	ButtonBaseOverrides$1["BUTTON"] = "spiffy-button-base-button";
+	ButtonBaseOverrides$1["BUTTON_TEXT"] = "spiffy-button-base-button-text";
+	ButtonBaseOverrides$1["BUTTON_ICON"] = "spiffy-button-base-button-icon";
+	return ButtonBaseOverrides$1;
+}({});
+
+//#endregion
+exports.ButtonBaseOverrides = ButtonBaseOverrides;

package/dist/packages/components/dist/components/ButtonBase/types.js

@@ -0,0 +1,10 @@
+//#region ../components/dist/components/ButtonBase/types.js
+let ButtonBaseOverrides = /* @__PURE__ */ function(ButtonBaseOverrides$1) {
+	ButtonBaseOverrides$1["BUTTON"] = "spiffy-button-base-button";
+	ButtonBaseOverrides$1["BUTTON_TEXT"] = "spiffy-button-base-button-text";
+	ButtonBaseOverrides$1["BUTTON_ICON"] = "spiffy-button-base-button-icon";
+	return ButtonBaseOverrides$1;
+}({});
+
+//#endregion
+export { ButtonBaseOverrides };

package/dist/packages/components/dist/components/FilterScrollbar/AppliedFiltersScrollbar.cjs

@@ -0,0 +1,45 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_index = require('../../../../../node_modules/react-indiana-drag-scroll/dist/index.cjs');
+const require_Typography = require('../Typography/Typography.cjs');
+require('../Typography/index.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region ../components/dist/components/FilterScrollbar/AppliedFiltersScrollbar.js
+var import_dist = /* @__PURE__ */ require_rolldown_runtime.__toESM(require_index.default, 1);
+const AppliedFiltersScrollbar = ({ selectedFilterOptions, filterBarClassNames, filterDefaultClasses, filterHoverClasses, appliedFilterBackgroundClasses, onRemoveFilter }) => {
+	if (selectedFilterOptions.length === 0) return null;
+	const buttonClasses = (0, classnames.default)(" spiffy-tw-flex spiffy-tw-items-center spiffy-tw-rounded-full spiffy-tw-px-[8px] spiffy-tw-py-[4px] spiffy-tw-whitespace-nowrap", filterHoverClasses, filterDefaultClasses.replace(/spiffy-tw-bg-\[--spiffy-colors-[^\]]+\]/g, "").trim(), appliedFilterBackgroundClasses);
+	const iconColor = "currentColor";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(import_dist.default, {
+		className: filterBarClassNames,
+		hideScrollbars: true,
+		children: selectedFilterOptions.map((filter) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			className: buttonClasses,
+			type: "button",
+			onClick: () => onRemoveFilter(filter),
+			"aria-label": `Remove filter: ${filter.displayName}`,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-[8px]",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+					variant: "body3",
+					children: filter.displayName
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					width: "10",
+					height: "10",
+					viewBox: "0 0 10 10",
+					fill: "none",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+						d: "M4.59766 4.29297L8.48535 0.405273L9.19238 1.1123L5.30469 5L9.19238 8.8877L8.48535 9.59473L4.59766 5.70703L0.707031 9.59766L0 8.89062L3.89062 5L0 1.10938L0.707031 0.402344L4.59766 4.29297Z",
+						fill: iconColor
+					})
+				})]
+			})
+		}, filter.id))
+	});
+};
+
+//#endregion
+exports.AppliedFiltersScrollbar = AppliedFiltersScrollbar;

package/dist/packages/components/dist/components/FilterScrollbar/AppliedFiltersScrollbar.js

@@ -0,0 +1,42 @@
+import { Typography } from "../Typography/Typography.js";
+import "../Typography/index.js";
+import ScrollContainer from "react-indiana-drag-scroll";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../components/dist/components/FilterScrollbar/AppliedFiltersScrollbar.js
+const AppliedFiltersScrollbar = ({ selectedFilterOptions, filterBarClassNames, filterDefaultClasses, filterHoverClasses, appliedFilterBackgroundClasses, onRemoveFilter }) => {
+	if (selectedFilterOptions.length === 0) return null;
+	const buttonClasses = classNames(" spiffy-tw-flex spiffy-tw-items-center spiffy-tw-rounded-full spiffy-tw-px-[8px] spiffy-tw-py-[4px] spiffy-tw-whitespace-nowrap", filterHoverClasses, filterDefaultClasses.replace(/spiffy-tw-bg-\[--spiffy-colors-[^\]]+\]/g, "").trim(), appliedFilterBackgroundClasses);
+	const iconColor = "currentColor";
+	return /* @__PURE__ */ jsx(ScrollContainer, {
+		className: filterBarClassNames,
+		hideScrollbars: true,
+		children: selectedFilterOptions.map((filter) => /* @__PURE__ */ jsx("button", {
+			className: buttonClasses,
+			type: "button",
+			onClick: () => onRemoveFilter(filter),
+			"aria-label": `Remove filter: ${filter.displayName}`,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-[8px]",
+				children: [/* @__PURE__ */ jsx(Typography, {
+					variant: "body3",
+					children: filter.displayName
+				}), /* @__PURE__ */ jsx("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					width: "10",
+					height: "10",
+					viewBox: "0 0 10 10",
+					fill: "none",
+					children: /* @__PURE__ */ jsx("path", {
+						d: "M4.59766 4.29297L8.48535 0.405273L9.19238 1.1123L5.30469 5L9.19238 8.8877L8.48535 9.59473L4.59766 5.70703L0.707031 9.59766L0 8.89062L3.89062 5L0 1.10938L0.707031 0.402344L4.59766 4.29297Z",
+						fill: iconColor
+					})
+				})]
+			})
+		}, filter.id))
+	});
+};
+
+//#endregion
+export { AppliedFiltersScrollbar };

package/dist/packages/components/dist/components/FilterScrollbar/DynamicFiltersScrollbar.cjs

@@ -0,0 +1,33 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_index = require('../../../../../node_modules/react-indiana-drag-scroll/dist/index.cjs');
+const require_Typography = require('../Typography/Typography.cjs');
+require('../Typography/index.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region ../components/dist/components/FilterScrollbar/DynamicFiltersScrollbar.js
+var import_dist = /* @__PURE__ */ require_rolldown_runtime.__toESM(require_index.default, 1);
+const DynamicFiltersScrollbar = ({ availableDynamicFilters, filterBarClassNames, filterDefaultClasses, filterHoverClasses, onToggleDynamicFilter }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(import_dist.default, {
+	className: filterBarClassNames,
+	hideScrollbars: true,
+	children: availableDynamicFilters.map(({ name, displayName }) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: (0, classnames.default)("spiffy-tw-px-[12px] spiffy-tw-py-2 spiffy-tw-rounded-full spiffy-tw-border spiffy-tw-whitespace-nowrap ", filterHoverClasses, filterDefaultClasses),
+			onClick: () => {
+				onToggleDynamicFilter({
+					filter: name,
+					dynamicFilterDisplayName: displayName
+				});
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+				variant: "body3",
+				children: displayName
+			})
+		}, name);
+	})
+});
+
+//#endregion
+exports.DynamicFiltersScrollbar = DynamicFiltersScrollbar;

package/dist/packages/components/dist/components/FilterScrollbar/DynamicFiltersScrollbar.js

@@ -0,0 +1,30 @@
+import { Typography } from "../Typography/Typography.js";
+import "../Typography/index.js";
+import ScrollContainer from "react-indiana-drag-scroll";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+
+//#region ../components/dist/components/FilterScrollbar/DynamicFiltersScrollbar.js
+const DynamicFiltersScrollbar = ({ availableDynamicFilters, filterBarClassNames, filterDefaultClasses, filterHoverClasses, onToggleDynamicFilter }) => /* @__PURE__ */ jsx(ScrollContainer, {
+	className: filterBarClassNames,
+	hideScrollbars: true,
+	children: availableDynamicFilters.map(({ name, displayName }) => {
+		return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: classNames("spiffy-tw-px-[12px] spiffy-tw-py-2 spiffy-tw-rounded-full spiffy-tw-border spiffy-tw-whitespace-nowrap ", filterHoverClasses, filterDefaultClasses),
+			onClick: () => {
+				onToggleDynamicFilter({
+					filter: name,
+					dynamicFilterDisplayName: displayName
+				});
+			},
+			children: /* @__PURE__ */ jsx(Typography, {
+				variant: "body3",
+				children: displayName
+			})
+		}, name);
+	})
+});
+
+//#endregion
+export { DynamicFiltersScrollbar };

package/dist/packages/components/dist/components/ImageWithFallback/ImageWithFallback.cjs

@@ -0,0 +1,45 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region ../components/dist/components/ImageWithFallback/ImageWithFallback.js
+const ImageWithFallback = ({ src, alt, dataTestId, fallbackClassnames, fallback, imageClassnames, onLoad, onError }) => {
+	const [isLoaded, setIsLoaded] = (0, react.useState)(false);
+	const [isError, setIsError] = (0, react.useState)(false);
+	const imageExtraClassnames = (0, classnames.default)(imageClassnames, {
+		"spiffy-tw-block": isLoaded,
+		"spiffy-tw-hidden": !isLoaded
+	});
+	const fallbackMergedClassNames = (0, classnames.default)({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true,
+		"spiffy-tw-items-center": true
+	}, fallbackClassnames);
+	if (isError) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: fallbackMergedClassNames,
+		children: fallback
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!isLoaded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: fallbackMergedClassNames,
+		children: fallback
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src,
+		className: imageExtraClassnames,
+		"data-testid": dataTestId,
+		alt,
+		onLoad: () => {
+			setIsLoaded(true);
+			onLoad?.();
+		},
+		onError: () => {
+			setIsError(true);
+			onError?.();
+		}
+	})] });
+};
+
+//#endregion
+exports.ImageWithFallback = ImageWithFallback;

package/dist/packages/components/dist/components/ImageWithFallback/ImageWithFallback.js

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import classNames from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../components/dist/components/ImageWithFallback/ImageWithFallback.js
+const ImageWithFallback = ({ src, alt, dataTestId, fallbackClassnames, fallback, imageClassnames, onLoad, onError }) => {
+	const [isLoaded, setIsLoaded] = useState(false);
+	const [isError, setIsError] = useState(false);
+	const imageExtraClassnames = classNames(imageClassnames, {
+		"spiffy-tw-block": isLoaded,
+		"spiffy-tw-hidden": !isLoaded
+	});
+	const fallbackMergedClassNames = classNames({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true,
+		"spiffy-tw-items-center": true
+	}, fallbackClassnames);
+	if (isError) return /* @__PURE__ */ jsx("div", {
+		className: fallbackMergedClassNames,
+		children: fallback
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [!isLoaded && /* @__PURE__ */ jsx("div", {
+		className: fallbackMergedClassNames,
+		children: fallback
+	}), /* @__PURE__ */ jsx("img", {
+		src,
+		className: imageExtraClassnames,
+		"data-testid": dataTestId,
+		alt,
+		onLoad: () => {
+			setIsLoaded(true);
+			onLoad?.();
+		},
+		onError: () => {
+			setIsError(true);
+			onError?.();
+		}
+	})] });
+};
+
+//#endregion
+export { ImageWithFallback };

package/dist/packages/components/dist/components/ImageWithFallback/index.cjs

@@ -0,0 +1 @@
+const require_ImageWithFallback = require('./ImageWithFallback.cjs');

package/dist/packages/components/dist/components/ImageWithFallback/index.js

@@ -0,0 +1 @@
+import { ImageWithFallback } from "./ImageWithFallback.js";

package/dist/packages/components/dist/components/ModalSheet/ModalSheet.cjs

@@ -0,0 +1,30 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_index = require('./mobile/index.cjs');
+const require_index$1 = require('./desktop/index.cjs');
+let __envive_ai_react_hooks_hooks_IsSmallScreen = require("@envive-ai/react-hooks/hooks/IsSmallScreen");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region ../components/dist/components/ModalSheet/ModalSheet.js
+const ANIMATION_DURATION = .3;
+const ModalSheet = ({ children, isOpen, closeModal, animationDuration = ANIMATION_DURATION, desktopWidth = 512, headerProps, footerProps }) => {
+	return (0, __envive_ai_react_hooks_hooks_IsSmallScreen.useIsSmallScreen)() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.ModalSheetMobile, {
+		isOpen,
+		closeModal,
+		desktopWidth,
+		animationDuration,
+		headerProps,
+		footerProps,
+		children
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.ModalSheetDesktop, {
+		isOpen,
+		closeModal,
+		desktopWidth,
+		animationDuration,
+		headerProps,
+		footerProps,
+		children
+	});
+};
+
+//#endregion
+exports.ModalSheet = ModalSheet;