@envive-ai/react-toolkit-v3 0.3.5

package/dist/CSSVariablesEditor/hooks/useHandleUpdateCssVars.js

@@ -0,0 +1,103 @@
+import { ButtonColorsVars, ColorsNamesVars } from "../../components-v3/tokens/colors/colors.js";
+import { FontSizeCSSVar } from "../../components-v3/tokens/typography/fontSize.js";
+import { FontWeightCSSVar } from "../../components-v3/tokens/typography/fontWeight.js";
+import { LineHeightCSSVar, convertPercentageTolineHeight } from "../../components-v3/tokens/typography/lineHeight.js";
+import { LetterSpacingCSSVar } from "../../components-v3/tokens/typography/letterSpacing.js";
+import { FontFamilyCSSVar } from "../../components-v3/tokens/typography/fontFamily.js";
+import { BorderRadiusCSSVar } from "../../components-v3/tokens/radius/radius.js";
+import { AspectRatioCSSVar, convertAspectRatioNameToStyle } from "../../components-v3/tokens/aspectRatio/aspectRatio.js";
+import { ThemeCSSVar } from "../../components-v3/tokens/theme/theme.js";
+
+//#region src/components/CSSVariablesEditor/hooks/useHandleUpdateCssVars.ts
+const useHandleUpdateCssVars = () => {
+	const getCssVariablesStyleContent = (variables) => `
+    * {
+
+        /* Typography */
+        --${FontSizeCSSVar.T1}: ${variables["font-size-t1"]} !important;
+        --${FontSizeCSSVar.T2}: ${variables["font-size-t2"]} !important;
+        --${FontSizeCSSVar.T3}: ${variables["font-size-t3"]} !important;
+        --${FontSizeCSSVar.H1}: ${variables["font-size-h1"]} !important;
+        --${FontSizeCSSVar.H2}: ${variables["font-size-h2"]} !important;
+        --${FontSizeCSSVar.H3}: ${variables["font-size-h3"]} !important;
+        --${FontSizeCSSVar.B1}: ${variables["font-size-b1"]} !important;
+        --${FontSizeCSSVar.B2}: ${variables["font-size-b2"]} !important;
+        --${FontSizeCSSVar.B3}: ${variables["font-size-b3"]} !important;
+        --${FontSizeCSSVar.B4}: ${variables["font-size-b4"]} !important;
+        --${FontSizeCSSVar.B5}: ${variables["font-size-b5"]} !important;
+        --${FontSizeCSSVar.L1}: ${variables["font-size-l1"]} !important;
+        --${FontSizeCSSVar.L2}: ${variables["font-size-l2"]} !important;
+
+        --${FontWeightCSSVar.RG}: ${variables["font-weight-rg"]} !important;
+        --${FontWeightCSSVar.MD}: ${variables["font-weight-md"]} !important;
+        --${FontWeightCSSVar.SB}: ${variables["font-weight-sb"]} !important;
+
+        --${LineHeightCSSVar.LineHeight124}: ${convertPercentageTolineHeight(variables["line-height-124"])} !important;
+        --${LineHeightCSSVar.LineHeight120}: ${convertPercentageTolineHeight(variables["line-height-120"])} !important;
+        --${LineHeightCSSVar.LineHeight118}: ${convertPercentageTolineHeight(variables["line-height-118"])} !important;
+        --${LineHeightCSSVar.LineHeight116}: ${convertPercentageTolineHeight(variables["line-height-116"])} !important;
+        --${LineHeightCSSVar.LineHeight114}: ${convertPercentageTolineHeight(variables["line-height-114"])} !important;
+        --${LineHeightCSSVar.LineHeight148}: ${convertPercentageTolineHeight(variables["line-height-148"])} !important;
+        --${LineHeightCSSVar.LineHeight140}: ${convertPercentageTolineHeight(variables["line-height-140"])} !important;
+        --${LineHeightCSSVar.LineHeight128}: ${convertPercentageTolineHeight(variables["line-height-128"])} !important;
+        --${LineHeightCSSVar.LineHeight130}: ${convertPercentageTolineHeight(variables["line-height-130"])} !important;
+        --${LineHeightCSSVar.LineHeight133}: ${convertPercentageTolineHeight(variables["line-height-133"])} !important;
+
+        --${LetterSpacingCSSVar.Tight0}: ${variables["letter-spacing-tight-0"]} !important;
+        --${LetterSpacingCSSVar.Wide1}: ${variables["letter-spacing-wide-1"]} !important;
+
+        --${FontFamilyCSSVar.Title}: ${variables["font-family-title"]} !important;
+        --${FontFamilyCSSVar.Header}: ${variables["font-family-header"]} !important;
+        --${FontFamilyCSSVar.Body}: ${variables["font-family-body"]} !important;
+
+        /* Colors */
+        --${ColorsNamesVars.TextPrimary}: ${variables["color-text-primary"]} !important;
+        --${ColorsNamesVars.TextSecondary}: ${variables["color-text-secondary"]} !important;
+        --${ColorsNamesVars.TextAccent}: ${variables["color-text-accent"]} !important;
+        --${ColorsNamesVars.TextLink}: ${variables["color-text-link"]} !important;
+        --${ColorsNamesVars.TextLight}: ${variables["color-text-light"]} !important;
+        --${ColorsNamesVars.BackgroundPrimary}: ${variables["color-background-primary"]} !important;
+        --${ColorsNamesVars.BackgroundSecondary}: ${variables["color-background-secondary"]} !important;
+        --${ColorsNamesVars.BackgroundTertiary}: ${variables["color-background-tertiary"]} !important;
+        --${ColorsNamesVars.BackgroundDark}: ${variables["color-background-dark"]} !important;
+        --${ColorsNamesVars.BackgroundLight}: ${variables["color-background-light"]} !important;
+        --${ColorsNamesVars.BorderLight}: ${variables["color-border-light"]} !important;
+        --${ColorsNamesVars.BorderMedium}: ${variables["color-border-medium"]} !important;
+        --${ColorsNamesVars.BorderDark}: ${variables["color-border-dark"]} !important;
+        --${ColorsNamesVars.AccentPrimary}: ${variables["color-accent-primary"]} !important;
+        --${ColorsNamesVars.AccentSecondary}: ${variables["color-accent-secondary"]} !important;
+
+
+        /* Button Colors */
+        --${ButtonColorsVars.LightButtonBackgroundColor}: ${variables["color-button-light-background"]} !important;
+        --${ButtonColorsVars.LightButtonIconColor}: ${variables["color-button-light-icon"]} !important;
+        --${ButtonColorsVars.DarkButtonBackgroundColor}: ${variables["color-button-dark-background"]} !important;
+        --${ButtonColorsVars.DarkButtonIconColor}: ${variables["color-button-dark-icon"]} !important;
+
+        /* Border Radius */
+        --${BorderRadiusCSSVar.GlobalCustom}: ${variables["border-radius-global-custom"]} !important;
+
+        /* Aspect Ratio */
+        --${AspectRatioCSSVar.GlobalCustom}: ${convertAspectRatioNameToStyle(variables["aspect-ratio-global-custom"])} !important;
+
+        /* Theme */
+        --${ThemeCSSVar.GlobalCustom}: ${variables["theme-global-custom"]} !important;
+    }
+`;
+	const updateCSSVariables = (variables) => {
+		const styleId = "merchant-css-config-edited";
+		let styleTag = document.getElementById(styleId);
+		if (styleTag) styleTag.innerHTML = getCssVariablesStyleContent(variables);
+		else {
+			styleTag = document.createElement("style");
+			styleTag.id = styleId;
+			styleTag.innerHTML = getCssVariablesStyleContent(variables);
+			document.head.appendChild(styleTag);
+			document.getElementById("merchant-css-config")?.remove();
+		}
+	};
+	return { updateCSSVariables };
+};
+
+//#endregion
+export { useHandleUpdateCssVars };

package/dist/CSSVariablesEditor/index.cjs

@@ -0,0 +1,3 @@
+const require_CssVariablesEditorComponent = require('./CssVariablesEditorComponent.cjs');
+
+exports.CssVariablesEditorComponent = require_CssVariablesEditorComponent.CssVariablesEditorComponent;

package/dist/CSSVariablesEditor/index.d.cts

@@ -0,0 +1,2 @@
+import { CssVariablesEditorComponent } from "./CssVariablesEditorComponent.cjs";
+export { CssVariablesEditorComponent };

package/dist/CSSVariablesEditor/index.d.ts

@@ -0,0 +1,2 @@
+import { CssVariablesEditorComponent } from "./CssVariablesEditorComponent.js";
+export { CssVariablesEditorComponent };

package/dist/CSSVariablesEditor/index.js

@@ -0,0 +1,3 @@
+import { CssVariablesEditorComponent } from "./CssVariablesEditorComponent.js";
+
+export { CssVariablesEditorComponent };

package/dist/CSSVariablesEditor/utils/functions.cjs

@@ -0,0 +1,53 @@
+const require_lineHeight = require('../../components-v3/tokens/typography/lineHeight.cjs');
+const require_aspectRatio = require('../../components-v3/tokens/aspectRatio/aspectRatio.cjs');
+
+//#region src/components/CSSVariablesEditor/utils/functions.ts
+const hexToColorPicker = (value) => {
+	if (/^#[0-9A-Fa-f]{6}$/.test(value)) return value;
+	if (/^#[0-9A-Fa-f]{3}$/.test(value)) return `#${value[1]}${value[1]}${value[2]}${value[2]}${value[3]}${value[3]}`;
+	const rgbMatch = value.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+	if (rgbMatch) return `#${parseInt(rgbMatch[1], 10).toString(16).padStart(2, "0")}${parseInt(rgbMatch[2], 10).toString(16).padStart(2, "0")}${parseInt(rgbMatch[3], 10).toString(16).padStart(2, "0")}`;
+	return "#000000";
+};
+const isValidColor = (value) => {
+	return /^#[0-9A-Fa-f]{3,6}$/i.test(value) || /^rgba?\(/.test(value) || /^hsla?\(/.test(value);
+};
+const groupVariablesByCategory = (variables) => {
+	return variables.reduce((acc, variable) => {
+		if (!acc[variable.category]) acc[variable.category] = [];
+		acc[variable.category].push(variable);
+		return acc;
+	}, {});
+};
+const getInitialValue = (variable, defaultValue, isColor, hasOptions) => {
+	if (typeof document === "undefined") return defaultValue;
+	const isAspectRatioGlobalCustom = variable === require_aspectRatio.AspectRatioCSSVar.GlobalCustom;
+	const styleTag = document.getElementById("merchant-css-config-edited");
+	if (styleTag) {
+		const regex = /* @__PURE__ */ new RegExp(`--${variable.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}:\\s*([^;!]+)`);
+		const match = styleTag.innerHTML.match(regex);
+		if (match && match[1]) {
+			const value = match[1].trim();
+			if (value.startsWith("var(--")) return value;
+			if (hasOptions) {
+				if (isAspectRatioGlobalCustom) return require_aspectRatio.convertAspectRatioStyleToName(value) || defaultValue;
+				return value;
+			}
+		}
+	}
+	const isLineHeight = variable.includes("line-height");
+	const trimmedValue = getComputedStyle(document.documentElement).getPropertyValue(`--${variable}`).trim();
+	if (trimmedValue) {
+		if (trimmedValue.startsWith("var(--")) return trimmedValue;
+		if (isLineHeight) return require_lineHeight.convertLineHeightToPercentage(Number(trimmedValue)) || defaultValue;
+		if (hasOptions && defaultValue.startsWith("var(--")) return defaultValue;
+		if (isAspectRatioGlobalCustom && hasOptions) return require_aspectRatio.convertAspectRatioStyleToName(trimmedValue) || defaultValue;
+		return isColor && isValidColor(trimmedValue) ? trimmedValue : trimmedValue;
+	}
+	return defaultValue;
+};
+
+//#endregion
+exports.getInitialValue = getInitialValue;
+exports.groupVariablesByCategory = groupVariablesByCategory;
+exports.hexToColorPicker = hexToColorPicker;

package/dist/CSSVariablesEditor/utils/functions.js

@@ -0,0 +1,51 @@
+import { convertLineHeightToPercentage } from "../../components-v3/tokens/typography/lineHeight.js";
+import { AspectRatioCSSVar, convertAspectRatioStyleToName } from "../../components-v3/tokens/aspectRatio/aspectRatio.js";
+
+//#region src/components/CSSVariablesEditor/utils/functions.ts
+const hexToColorPicker = (value) => {
+	if (/^#[0-9A-Fa-f]{6}$/.test(value)) return value;
+	if (/^#[0-9A-Fa-f]{3}$/.test(value)) return `#${value[1]}${value[1]}${value[2]}${value[2]}${value[3]}${value[3]}`;
+	const rgbMatch = value.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+	if (rgbMatch) return `#${parseInt(rgbMatch[1], 10).toString(16).padStart(2, "0")}${parseInt(rgbMatch[2], 10).toString(16).padStart(2, "0")}${parseInt(rgbMatch[3], 10).toString(16).padStart(2, "0")}`;
+	return "#000000";
+};
+const isValidColor = (value) => {
+	return /^#[0-9A-Fa-f]{3,6}$/i.test(value) || /^rgba?\(/.test(value) || /^hsla?\(/.test(value);
+};
+const groupVariablesByCategory = (variables) => {
+	return variables.reduce((acc, variable) => {
+		if (!acc[variable.category]) acc[variable.category] = [];
+		acc[variable.category].push(variable);
+		return acc;
+	}, {});
+};
+const getInitialValue = (variable, defaultValue, isColor, hasOptions) => {
+	if (typeof document === "undefined") return defaultValue;
+	const isAspectRatioGlobalCustom = variable === AspectRatioCSSVar.GlobalCustom;
+	const styleTag = document.getElementById("merchant-css-config-edited");
+	if (styleTag) {
+		const regex = /* @__PURE__ */ new RegExp(`--${variable.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}:\\s*([^;!]+)`);
+		const match = styleTag.innerHTML.match(regex);
+		if (match && match[1]) {
+			const value = match[1].trim();
+			if (value.startsWith("var(--")) return value;
+			if (hasOptions) {
+				if (isAspectRatioGlobalCustom) return convertAspectRatioStyleToName(value) || defaultValue;
+				return value;
+			}
+		}
+	}
+	const isLineHeight = variable.includes("line-height");
+	const trimmedValue = getComputedStyle(document.documentElement).getPropertyValue(`--${variable}`).trim();
+	if (trimmedValue) {
+		if (trimmedValue.startsWith("var(--")) return trimmedValue;
+		if (isLineHeight) return convertLineHeightToPercentage(Number(trimmedValue)) || defaultValue;
+		if (hasOptions && defaultValue.startsWith("var(--")) return defaultValue;
+		if (isAspectRatioGlobalCustom && hasOptions) return convertAspectRatioStyleToName(trimmedValue) || defaultValue;
+		return isColor && isValidColor(trimmedValue) ? trimmedValue : trimmedValue;
+	}
+	return defaultValue;
+};
+
+//#endregion
+export { getInitialValue, groupVariablesByCategory, hexToColorPicker };

package/dist/Carousel/Carousel.cjs

@@ -0,0 +1,26 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_theme = require('../components-v3/tokens/theme/theme.cjs');
+const require_index = require('./components/index.cjs');
+const require_resolveTheme = require('../utils/resolveTheme.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Carousel/Carousel.tsx
+const Carousel = ({ id, testId, style, className, elements, badgeLabel, theme = require_theme.Theme.GLOBAL_CUSTOM, hideNavigation = false }) => {
+	const finalTheme = require_resolveTheme.resolveTheme(theme);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.CarouselComponents.Container, {
+		id,
+		testId,
+		style,
+		className,
+		badge: badgeLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.CarouselComponents.Badge, {
+			label: badgeLabel,
+			theme: finalTheme
+		}),
+		next: !hideNavigation && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.CarouselComponents.Next, {}),
+		previous: !hideNavigation && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.CarouselComponents.Previous, {}),
+		children: elements.map((element, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.CarouselComponents.Item, { children: element }, `carousel-item-${String(index)}`))
+	});
+};
+
+//#endregion
+exports.Carousel = Carousel;

package/dist/Carousel/Carousel.d.cts

@@ -0,0 +1,16 @@
+import { CarouselProps } from "./types/types.cjs";
+import * as react_jsx_runtime30 from "react/jsx-runtime";
+
+//#region src/components/Carousel/Carousel.d.ts
+declare const Carousel: ({
+  id,
+  testId,
+  style,
+  className,
+  elements,
+  badgeLabel,
+  theme,
+  hideNavigation
+}: CarouselProps) => react_jsx_runtime30.JSX.Element;
+//#endregion
+export { Carousel };

package/dist/Carousel/Carousel.d.ts

@@ -0,0 +1,16 @@
+import { CarouselProps } from "./types/types.js";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
+
+//#region src/components/Carousel/Carousel.d.ts
+declare const Carousel: ({
+  id,
+  testId,
+  style,
+  className,
+  elements,
+  badgeLabel,
+  theme,
+  hideNavigation
+}: CarouselProps) => react_jsx_runtime11.JSX.Element;
+//#endregion
+export { Carousel };

package/dist/Carousel/Carousel.js

@@ -0,0 +1,25 @@
+import { Theme } from "../components-v3/tokens/theme/theme.js";
+import { CarouselComponents } from "./components/index.js";
+import { resolveTheme } from "../utils/resolveTheme.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Carousel/Carousel.tsx
+const Carousel = ({ id, testId, style, className, elements, badgeLabel, theme = Theme.GLOBAL_CUSTOM, hideNavigation = false }) => {
+	const finalTheme = resolveTheme(theme);
+	return /* @__PURE__ */ jsx(CarouselComponents.Container, {
+		id,
+		testId,
+		style,
+		className,
+		badge: badgeLabel && /* @__PURE__ */ jsx(CarouselComponents.Badge, {
+			label: badgeLabel,
+			theme: finalTheme
+		}),
+		next: !hideNavigation && /* @__PURE__ */ jsx(CarouselComponents.Next, {}),
+		previous: !hideNavigation && /* @__PURE__ */ jsx(CarouselComponents.Previous, {}),
+		children: elements.map((element, index) => /* @__PURE__ */ jsx(CarouselComponents.Item, { children: element }, `carousel-item-${String(index)}`))
+	});
+};
+
+//#endregion
+export { Carousel };

package/dist/Carousel/components/ArrowIcon.cjs

@@ -0,0 +1,21 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ArrowUp = require('../../icons/dist/ArrowUp.cjs');
+let react = require("react");
+
+//#region src/components/Carousel/components/ArrowIcon.tsx
+const ArrowIcon = ({ direction }) => {
+	const arrowElement = require_ArrowUp.ArrowUp_default({});
+	return (0, react.cloneElement)(arrowElement, {
+		style: {
+			color: "transparent",
+			rotate: direction === "left" ? "270deg" : "90deg"
+		},
+		children: react.Children.map(arrowElement.props.children, (child) => {
+			if (child && typeof child === "object" && "type" in child && child.type === "path") return (0, react.cloneElement)(child, { fill: "black" });
+			return child;
+		})
+	});
+};
+
+//#endregion
+exports.ArrowIcon = ArrowIcon;

package/dist/Carousel/components/ArrowIcon.js

@@ -0,0 +1,20 @@
+import { ArrowUp_default } from "../../icons/dist/ArrowUp.js";
+import { Children, cloneElement } from "react";
+
+//#region src/components/Carousel/components/ArrowIcon.tsx
+const ArrowIcon = ({ direction }) => {
+	const arrowElement = ArrowUp_default({});
+	return cloneElement(arrowElement, {
+		style: {
+			color: "transparent",
+			rotate: direction === "left" ? "270deg" : "90deg"
+		},
+		children: Children.map(arrowElement.props.children, (child) => {
+			if (child && typeof child === "object" && "type" in child && child.type === "path") return cloneElement(child, { fill: "black" });
+			return child;
+		})
+	});
+};
+
+//#endregion
+export { ArrowIcon };

package/dist/Carousel/components/Badge.cjs

@@ -0,0 +1,28 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_Container = require('../../Container/Container.cjs');
+const require_index = require('../../Typography/types/index.cjs');
+const require_Typography = require('../../Typography/Typography.cjs');
+require('../../Typography/index.cjs');
+const require_useGetBadgeProperties = require('../hooks/useGetBadgeProperties.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+
+//#region src/components/Carousel/components/Badge.tsx
+const Badge = ({ label, theme }) => {
+	const { baseClass, themeClass } = require_useGetBadgeProperties.useGetBadgeProperties({ theme });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Container.Container, {
+		component: "span",
+		className: (0, classnames.default)(baseClass, themeClass),
+		"aria-label": label,
+		role: "status",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+			variant: require_index.TypographyVariant.B3_RG,
+			color: require_index.TypographyColor.TEXT_LIGHT,
+			children: label
+		})
+	});
+};
+
+//#endregion
+exports.Badge = Badge;

package/dist/Carousel/components/Badge.js

@@ -0,0 +1,26 @@
+import { Container } from "../../Container/Container.js";
+import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
+import { Typography } from "../../Typography/Typography.js";
+import "../../Typography/index.js";
+import { useGetBadgeProperties } from "../hooks/useGetBadgeProperties.js";
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+
+//#region src/components/Carousel/components/Badge.tsx
+const Badge = ({ label, theme }) => {
+	const { baseClass, themeClass } = useGetBadgeProperties({ theme });
+	return /* @__PURE__ */ jsx(Container, {
+		component: "span",
+		className: classNames(baseClass, themeClass),
+		"aria-label": label,
+		role: "status",
+		children: /* @__PURE__ */ jsx(Typography, {
+			variant: TypographyVariant.B3_RG,
+			color: TypographyColor.TEXT_LIGHT,
+			children: label
+		})
+	});
+};
+
+//#endregion
+export { Badge };

package/dist/Carousel/components/Container.cjs

@@ -0,0 +1,68 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_Stack = require('../../Stack/Stack.cjs');
+require('../../Stack/index.cjs');
+const require_Container = require('../../Container/Container.cjs');
+require('../../Container/index.cjs');
+const require_useCarouselItems = require('../hooks/useCarouselItems.cjs');
+const require_useCarouselNavigation = require('../hooks/useCarouselNavigation.cjs');
+const require_useCarouselNavigationButtons = require('../hooks/useCarouselNavigationButtons.cjs');
+const require_useCarouselButtons = require('../hooks/useCarouselButtons.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Carousel/components/Container.tsx
+const Container$1 = ({ children, className, id, testId, style, next, previous, badge }) => {
+	const scrollContainerRef = (0, react.useRef)(null);
+	const { items, totalItems } = require_useCarouselItems.useCarouselItems(children);
+	const { handleNext, handlePrevious } = require_useCarouselNavigation.useCarouselNavigation({
+		scrollContainerRef,
+		totalItems
+	});
+	const { canGoNext, canGoPrevious } = require_useCarouselNavigationButtons.useCarouselNavigationButtons({
+		scrollContainerRef,
+		totalItems
+	});
+	const { nextButton, previousButton } = require_useCarouselButtons.useCarouselButtons({
+		next,
+		previous,
+		handleNext,
+		handlePrevious
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
+		id,
+		testId,
+		style,
+		className,
+		direction: "column",
+		gap: "2",
+		children: [badge, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Container.Container, {
+			className: "envive-tw-relative",
+			children: [
+				previousButton && canGoPrevious && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "envive-tw-absolute envive-tw-left-2 envive-tw-top-1/2 envive-tw-z-10 envive-tw--translate-y-1/2",
+					children: previousButton
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: scrollContainerRef,
+					className: "[&::-webkit-scrollbar]:hidden envive-tw-flex envive-tw-gap-4 envive-tw-overflow-x-auto envive-tw-scroll-smooth",
+					style: {
+						scrollbarWidth: "none",
+						msOverflowStyle: "none"
+					},
+					children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-carousel-item": true,
+						className: "envive-tw-flex-shrink-0",
+						children: item
+					}, `carousel-item-${String(index)}`))
+				}),
+				nextButton && canGoNext && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "envive-tw-absolute envive-tw-right-2 envive-tw-top-1/2 envive-tw-z-10 envive-tw--translate-y-1/2",
+					children: nextButton
+				})
+			]
+		})]
+	});
+};
+
+//#endregion
+exports.Container = Container$1;

package/dist/Carousel/components/Container.js

@@ -0,0 +1,67 @@
+import { Stack } from "../../Stack/Stack.js";
+import "../../Stack/index.js";
+import { Container } from "../../Container/Container.js";
+import "../../Container/index.js";
+import { useCarouselItems } from "../hooks/useCarouselItems.js";
+import { useCarouselNavigation } from "../hooks/useCarouselNavigation.js";
+import { useCarouselNavigationButtons } from "../hooks/useCarouselNavigationButtons.js";
+import { useCarouselButtons } from "../hooks/useCarouselButtons.js";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Carousel/components/Container.tsx
+const Container$1 = ({ children, className, id, testId, style, next, previous, badge }) => {
+	const scrollContainerRef = useRef(null);
+	const { items, totalItems } = useCarouselItems(children);
+	const { handleNext, handlePrevious } = useCarouselNavigation({
+		scrollContainerRef,
+		totalItems
+	});
+	const { canGoNext, canGoPrevious } = useCarouselNavigationButtons({
+		scrollContainerRef,
+		totalItems
+	});
+	const { nextButton, previousButton } = useCarouselButtons({
+		next,
+		previous,
+		handleNext,
+		handlePrevious
+	});
+	return /* @__PURE__ */ jsxs(Stack, {
+		id,
+		testId,
+		style,
+		className,
+		direction: "column",
+		gap: "2",
+		children: [badge, /* @__PURE__ */ jsxs(Container, {
+			className: "envive-tw-relative",
+			children: [
+				previousButton && canGoPrevious && /* @__PURE__ */ jsx("div", {
+					className: "envive-tw-absolute envive-tw-left-2 envive-tw-top-1/2 envive-tw-z-10 envive-tw--translate-y-1/2",
+					children: previousButton
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref: scrollContainerRef,
+					className: "[&::-webkit-scrollbar]:hidden envive-tw-flex envive-tw-gap-4 envive-tw-overflow-x-auto envive-tw-scroll-smooth",
+					style: {
+						scrollbarWidth: "none",
+						msOverflowStyle: "none"
+					},
+					children: items.map((item, index) => /* @__PURE__ */ jsx("div", {
+						"data-carousel-item": true,
+						className: "envive-tw-flex-shrink-0",
+						children: item
+					}, `carousel-item-${String(index)}`))
+				}),
+				nextButton && canGoNext && /* @__PURE__ */ jsx("div", {
+					className: "envive-tw-absolute envive-tw-right-2 envive-tw-top-1/2 envive-tw-z-10 envive-tw--translate-y-1/2",
+					children: nextButton
+				})
+			]
+		})]
+	});
+};
+
+//#endregion
+export { Container$1 as Container };

package/dist/Carousel/components/Item.cjs

@@ -0,0 +1,11 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_Container = require('../../Container/Container.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Carousel/components/Item.tsx
+const Item = ({ children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Container.Container, { children });
+};
+
+//#endregion
+exports.Item = Item;

package/dist/Carousel/components/Item.js

@@ -0,0 +1,10 @@
+import { Container } from "../../Container/Container.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Carousel/components/Item.tsx
+const Item = ({ children }) => {
+	return /* @__PURE__ */ jsx(Container, { children });
+};
+
+//#endregion
+export { Item };

package/dist/Carousel/components/Next.cjs

@@ -0,0 +1,17 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ArrowIcon = require('./ArrowIcon.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Carousel/components/Next.tsx
+const Next = ({ onClick }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		className: "envive-tw-flex envive-tw-h-[33px] envive-tw-w-[33px] envive-tw-cursor-pointer envive-tw-items-center envive-tw-justify-center envive-tw-rounded-[50px] envive-tw-bg-[#FFFFFFB2] envive-tw-shadow-[2px_2px_6px_0px_rgba(0,0,0,0.15)] envive-tw-backdrop-blur-[4px]",
+		type: "button",
+		onClick,
+		"aria-label": "Next",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ArrowIcon.ArrowIcon, { direction: "right" })
+	});
+};
+
+//#endregion
+exports.Next = Next;

package/dist/Carousel/components/Next.js

@@ -0,0 +1,16 @@
+import { ArrowIcon } from "./ArrowIcon.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Carousel/components/Next.tsx
+const Next = ({ onClick }) => {
+	return /* @__PURE__ */ jsx("button", {
+		className: "envive-tw-flex envive-tw-h-[33px] envive-tw-w-[33px] envive-tw-cursor-pointer envive-tw-items-center envive-tw-justify-center envive-tw-rounded-[50px] envive-tw-bg-[#FFFFFFB2] envive-tw-shadow-[2px_2px_6px_0px_rgba(0,0,0,0.15)] envive-tw-backdrop-blur-[4px]",
+		type: "button",
+		onClick,
+		"aria-label": "Next",
+		children: /* @__PURE__ */ jsx(ArrowIcon, { direction: "right" })
+	});
+};
+
+//#endregion
+export { Next };

package/dist/Carousel/components/Previous.cjs

@@ -0,0 +1,17 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ArrowIcon = require('./ArrowIcon.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Carousel/components/Previous.tsx
+const Previous = ({ onClick }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		className: "envive-tw-flex envive-tw-h-[33px] envive-tw-w-[33px] envive-tw-cursor-pointer envive-tw-items-center envive-tw-justify-center envive-tw-rounded-[50px] envive-tw-bg-[#FFFFFFB2] envive-tw-shadow-[2px_2px_6px_0px_rgba(0,0,0,0.15)]",
+		type: "button",
+		onClick,
+		"aria-label": "Previous",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ArrowIcon.ArrowIcon, { direction: "left" })
+	});
+};
+
+//#endregion
+exports.Previous = Previous;

package/dist/Carousel/components/Previous.js

@@ -0,0 +1,16 @@
+import { ArrowIcon } from "./ArrowIcon.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Carousel/components/Previous.tsx
+const Previous = ({ onClick }) => {
+	return /* @__PURE__ */ jsx("button", {
+		className: "envive-tw-flex envive-tw-h-[33px] envive-tw-w-[33px] envive-tw-cursor-pointer envive-tw-items-center envive-tw-justify-center envive-tw-rounded-[50px] envive-tw-bg-[#FFFFFFB2] envive-tw-shadow-[2px_2px_6px_0px_rgba(0,0,0,0.15)]",
+		type: "button",
+		onClick,
+		"aria-label": "Previous",
+		children: /* @__PURE__ */ jsx(ArrowIcon, { direction: "left" })
+	});
+};
+
+//#endregion
+export { Previous };