@envive-ai/react-toolkit-v3 0.3.8 → 0.3.9

package/src/components/PromptCarousel/hooks/useHorizontalScrollAnimation.ts

@@ -1,103 +1,96 @@
 import { useEffect, useRef } from 'react';
 import { AnimationSpeed } from '../types/types';
 
-export function useHorizontalScrollAnimation(
-  scrollContainerRefs: React.RefObject<HTMLDivElement>[],
-  onStopAll: (mouseX?: number, mouseY?: number) => void,
-  animationSpeed: `${AnimationSpeed}` = 'none',
-) {
-  const animationRefs = useRef<(number | null)[]>([]);
-  const lastTimestampRefs = useRef<(number | null)[]>([]);
-  const accumulatedScrollRefs = useRef<number[]>([]);
-  const isStoppedRef = useRef(false);
-
-  useEffect(() => {
-    if (animationSpeed === AnimationSpeed.NONE) {
-      return undefined;
-    }
-
-    const containers = scrollContainerRefs
-      .map(ref => ref.current)
-      .filter((container): container is HTMLDivElement => container !== null);
-
-    if (containers.length === 0) {
-      return undefined;
-    }
-
-    animationRefs.current = containers.map(() => null);
-    lastTimestampRefs.current = containers.map(() => null);
-    accumulatedScrollRefs.current = containers.map(() => 0);
+interface UseHorizontalScrollAnimationOptions {
+  scrollContainerRef: React.RefObject<HTMLDivElement>;
+  animationSpeed?: `${AnimationSpeed}`;
+}
 
-    const PIXELS_PER_SECOND = animationSpeed === AnimationSpeed.FAST ? 60 : 30;
+export function useHorizontalScrollAnimation({
+  scrollContainerRef,
+  animationSpeed = AnimationSpeed.NONE,
+}: UseHorizontalScrollAnimationOptions): void {
+  const resumeTimeoutRef = useRef<number | null>(null);
+  const scrollAnimationRef = useRef<number | null>(null);
+
+  let PIXELS_PER_SECOND = 0;
+  switch (animationSpeed) {
+    case AnimationSpeed.FAST:
+      PIXELS_PER_SECOND = 60;
+      break;
+    case AnimationSpeed.SLOW:
+      PIXELS_PER_SECOND = 30;
+      break;
+    default:
+      PIXELS_PER_SECOND = 0;
+  }
+  const RESUME_DELAY_MS = 1500;
+  const isAnimated = animationSpeed !== AnimationSpeed.NONE;
 
-    const cancelAllAnimations = () => {
-      animationRefs.current.forEach(rafId => {
-        if (rafId !== null) {
-          cancelAnimationFrame(rafId);
-        }
-      });
-    };
+  useEffect(() => {
+    if (!isAnimated || !scrollContainerRef) return undefined;
 
-    const createAnimationLoop = (index: number) => {
-      const step = (timestamp: number) => {
-        if (isStoppedRef.current) return;
+    const container = scrollContainerRef.current;
+    if (!container) return undefined;
+    if (container.scrollWidth <= container.clientWidth) return undefined;
 
-        const container = containers[index];
-        if (!container || container.scrollWidth <= container.clientWidth) {
-          animationRefs.current[index] = requestAnimationFrame(step);
-          return;
-        }
+    let isPaused = false;
+    let lastTimestamp: number | null = null;
+    let accumulatedScroll = 0;
 
-        if (lastTimestampRefs.current[index] === null) {
-          lastTimestampRefs.current[index] = timestamp;
-        }
+    const step = (timestamp: number) => {
+      if (lastTimestamp === null) lastTimestamp = timestamp;
+      if (!isPaused) {
+        const delta = timestamp - lastTimestamp;
+        lastTimestamp = timestamp;
 
-        const delta = timestamp - lastTimestampRefs.current[index]!;
-        lastTimestampRefs.current[index] = timestamp;
-        accumulatedScrollRefs.current[index] += PIXELS_PER_SECOND * (delta / 1000);
+        accumulatedScroll += PIXELS_PER_SECOND * (delta / 1000);
 
-        const pixelsToScroll = Math.floor(accumulatedScrollRefs.current[index]);
+        const pixelsToScroll = Math.floor(accumulatedScroll);
         if (pixelsToScroll > 0) {
-          const newScrollLeft = container.scrollLeft + pixelsToScroll;
-          const maxScroll = container.scrollWidth - container.clientWidth;
+          container.scrollLeft += pixelsToScroll;
+          accumulatedScroll -= pixelsToScroll;
 
-          if (Math.ceil(newScrollLeft) >= maxScroll) {
+          if (Math.ceil(container.scrollLeft) >= container.scrollWidth - container.clientWidth) {
             container.scrollLeft = 0;
-            accumulatedScrollRefs.current[index] = 0;
-          } else {
-            container.scrollLeft = newScrollLeft;
-            accumulatedScrollRefs.current[index] -= pixelsToScroll;
+            accumulatedScroll = 0;
           }
         }
+      }
+      scrollAnimationRef.current = requestAnimationFrame(step);
+    };
 
-        if (!isStoppedRef.current) {
-          animationRefs.current[index] = requestAnimationFrame(step);
-        }
-      };
+    // Start animation
+    scrollAnimationRef.current = requestAnimationFrame(step);
 
-      return step;
+    const pauseAnimation = () => {
+      isPaused = true;
+      if (resumeTimeoutRef.current) {
+        clearTimeout(resumeTimeoutRef.current);
+        resumeTimeoutRef.current = null;
+      }
     };
 
-    containers.forEach((container, index) => {
-      animationRefs.current[index] = requestAnimationFrame(createAnimationLoop(index));
-    });
-
-    const handleMouseEnter = (event: MouseEvent) => {
-      isStoppedRef.current = true;
-      onStopAll(event.clientX, event.clientY);
-      cancelAllAnimations();
+    const scheduleResumeAnimation = () => {
+      resumeTimeoutRef.current = window.setTimeout(() => {
+        isPaused = false;
+        lastTimestamp = null;
+      }, RESUME_DELAY_MS);
     };
 
-    containers.forEach(container => {
-      container.addEventListener('mouseenter', handleMouseEnter);
-    });
+    // Attach pause/resume listeners for hover behavior
+    container.addEventListener('mouseenter', pauseAnimation);
+    container.addEventListener('mouseleave', scheduleResumeAnimation);
 
     return () => {
-      isStoppedRef.current = true;
-      cancelAllAnimations();
-      containers.forEach(container => {
-        container.removeEventListener('mouseenter', handleMouseEnter);
-      });
+      if (scrollAnimationRef.current) {
+        cancelAnimationFrame(scrollAnimationRef.current);
+      }
+      container.removeEventListener('mouseenter', pauseAnimation);
+      container.removeEventListener('mouseleave', scheduleResumeAnimation);
+      if (resumeTimeoutRef.current) {
+        clearTimeout(resumeTimeoutRef.current);
+      }
     };
-  }, [animationSpeed, scrollContainerRefs, onStopAll]);
+  }, [isAnimated, PIXELS_PER_SECOND, scrollContainerRef]);
 }

package/src/components/PromptCarousel/hooks/useScrollSync.ts

@@ -0,0 +1,83 @@
+import { useEffect, useRef } from 'react';
+
+interface UseScrollSyncOptions {
+  scrollContainerRefs: React.RefObject<HTMLDivElement>[];
+  enabled: boolean;
+}
+
+export function useScrollSync({ scrollContainerRefs, enabled }: UseScrollSyncOptions): void {
+  const isSyncingRef = useRef(false);
+  const isDraggingRef = useRef(false);
+
+  useEffect(() => {
+    if (!enabled || scrollContainerRefs.length === 0) return undefined;
+
+    const containers = scrollContainerRefs
+      .map(ref => ref.current)
+      .filter((el): el is HTMLDivElement => el !== null);
+
+    if (containers.length === 0) return undefined;
+
+    const handleScroll = (sourceContainer: HTMLDivElement) => {
+      // Only sync when user is actively dragging, not during auto-scroll animation
+      if (!isDraggingRef.current) return;
+      if (isSyncingRef.current) return;
+
+      isSyncingRef.current = true;
+      const { scrollLeft } = sourceContainer;
+
+      containers.forEach(container => {
+        if (container !== sourceContainer) {
+          const element = container;
+          element.scrollLeft = scrollLeft;
+        }
+      });
+
+      requestAnimationFrame(() => {
+        isSyncingRef.current = false;
+      });
+    };
+
+    const handleMouseDown = () => {
+      isDraggingRef.current = true;
+    };
+
+    const handleMouseUp = () => {
+      isDraggingRef.current = false;
+    };
+
+    // Prevent all trackpad and mouse wheel scrolling
+    const handleWheel = (e: WheelEvent) => {
+      e.preventDefault();
+    };
+
+    const scrollListeners = containers.map(container => {
+      const listener = () => handleScroll(container);
+      container.addEventListener('scroll', listener);
+      return { container, listener };
+    });
+
+    // Track mouse events to detect when user is dragging
+    containers.forEach(container => {
+      container.addEventListener('mousedown', handleMouseDown);
+      container.addEventListener('mouseup', handleMouseUp);
+      // Disable trackpad and mouse wheel scrolling
+      container.addEventListener('wheel', handleWheel, { passive: false });
+    });
+
+    // Also listen for mouseup on document in case user releases outside container
+    document.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      scrollListeners.forEach(({ container, listener }) => {
+        container.removeEventListener('scroll', listener);
+      });
+      containers.forEach(container => {
+        container.removeEventListener('mousedown', handleMouseDown);
+        container.removeEventListener('mouseup', handleMouseUp);
+        container.removeEventListener('wheel', handleWheel);
+      });
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [enabled, scrollContainerRefs]);
+}

package/src/components/WidgetTextField/WidgetTextField.tsx

@@ -1,4 +1,5 @@
 import { Theme } from '../../../tokens/theme/theme';
+import { TypographyColor } from '../Typography/types';
 import { resolveTheme } from '../utils/resolveTheme';
 import { WidgetTextFieldComponents } from './components';
 import { IconVariant, type WidgetTextFieldProps } from './types/types';
@@ -10,6 +11,7 @@ export const WidgetTextField = ({
   className,
   theme = Theme.GLOBAL_CUSTOM,
   iconVariant = IconVariant.DEFAULT,
+  textColor = TypographyColor.TEXT_SECONDARY,
   placeholder,
   ariaLabel,
   disabled,
@@ -34,11 +36,17 @@ export const WidgetTextField = ({
       ariaLabel={ariaLabel}
       icon={
         <WidgetTextFieldComponents.Icon
+          textColor={textColor}
           variant={iconVariant}
           theme={resolvedTheme}
         />
       }
-      text={<WidgetTextFieldComponents.FakeTextInput placeholder={placeholder} />}
+      text={
+        <WidgetTextFieldComponents.FakeTextInput
+          placeholder={placeholder}
+          textColor={textColor}
+        />
+      }
     />
   );
 };

package/src/components/WidgetTextField/components/FakeTextInput.tsx

@@ -3,13 +3,17 @@ import { TypographyColor, TypographyVariant } from '../../Typography/types';
 
 type FakeTextInputProps = {
   placeholder: string;
+  textColor: TypographyColor;
 };
 
-export const FakeTextInput = ({ placeholder }: FakeTextInputProps) => {
+export const FakeTextInput = ({
+  placeholder,
+  textColor = TypographyColor.TEXT_SECONDARY,
+}: FakeTextInputProps) => {
   return (
     <Typography
       variant={TypographyVariant.B3_RG}
-      color={TypographyColor.TEXT_SECONDARY}
+      color={textColor}
       noWrap
     >
       {placeholder}

package/src/components/WidgetTextField/components/Icon.tsx

@@ -6,20 +6,26 @@ import SendStandard from '@envive-ai/react-icons/SendStandard';
 import { Theme } from '../../../../tokens/theme/theme';
 import { CustomIcon } from '../../utils/CustomIcon';
 import { IconVariant } from '../types/types';
+import { TypographyColor } from '../../Typography/types';
 
 type IconProps = {
   theme: Theme;
   variant: IconVariant;
+  textColor: TypographyColor;
 };
 
-export const Icon = ({ variant, theme }: IconProps) => {
+export const Icon = ({ variant, theme, textColor }: IconProps) => {
   if (theme === Theme.STANDARD) {
     if (variant === IconVariant.DEFAULT) {
       return (
         <CustomIcon
           IconComponent={<SendStandard />}
           className="envive-tw-h-6 envive-tw-w-6"
-          fill="var(--envive-colors-border-medium)"
+          fill={
+            textColor !== TypographyColor.TEXT_SECONDARY
+              ? `var(--envive-colors-${textColor})`
+              : 'var(--envive-colors-border-medium)'
+          }
         />
       );
     }
@@ -27,7 +33,11 @@ export const Icon = ({ variant, theme }: IconProps) => {
       <CustomIcon
         IconComponent={<SvgSendStandard />}
         className="envive-tw-h-6 envive-tw-w-6"
-        fill="var(--envive-colors-border-medium)"
+        fill={
+          textColor !== TypographyColor.TEXT_SECONDARY
+            ? `var(--envive-colors-${textColor})`
+            : 'var(--envive-colors-border-medium)'
+        }
       />
     );
   }
@@ -38,7 +48,11 @@ export const Icon = ({ variant, theme }: IconProps) => {
         <CustomIcon
           IconComponent={<SendModern />}
           className="envive-tw-h-6 envive-tw-w-6"
-          fill="var(--envive-colors-border-medium)"
+          fill={
+            textColor !== TypographyColor.TEXT_SECONDARY
+              ? `var(--envive-colors-${textColor})`
+              : 'var(--envive-colors-border-medium)'
+          }
         />
       );
     }
@@ -46,7 +60,11 @@ export const Icon = ({ variant, theme }: IconProps) => {
       <CustomIcon
         IconComponent={<SvgSendModern />}
         className="envive-tw-h-6 envive-tw-w-6"
-        stroke="var(--envive-colors-border-medium)"
+        stroke={
+          textColor !== TypographyColor.TEXT_SECONDARY
+            ? `var(--envive-colors-${textColor})`
+            : 'var(--envive-colors-border-medium)'
+        }
       />
     );
   }
@@ -57,7 +75,11 @@ export const Icon = ({ variant, theme }: IconProps) => {
         <CustomIcon
           IconComponent={<SendMinimalist />}
           className="envive-tw-h-6 envive-tw-w-6"
-          stroke="var(--envive-colors-text-secondary)"
+          stroke={
+            textColor !== TypographyColor.TEXT_SECONDARY
+              ? `var(--envive-colors-${textColor})`
+              : 'var(--envive-colors-text-secondary)'
+          }
         />
       );
     }
@@ -65,7 +87,11 @@ export const Icon = ({ variant, theme }: IconProps) => {
       <CustomIcon
         IconComponent={<SendMinimalist />}
         className="envive-tw-h-6 envive-tw-w-6"
-        stroke="var(--envive-colors-text-light)"
+        stroke={
+          textColor !== TypographyColor.TEXT_SECONDARY
+            ? `var(--envive-colors-${textColor})`
+            : 'var(--envive-colors-text-light)'
+        }
       />
     );
   }
@@ -75,7 +101,11 @@ export const Icon = ({ variant, theme }: IconProps) => {
       <CustomIcon
         IconComponent={<SendStandard />}
         className="envive-tw-h-6 envive-tw-w-6"
-        fill="var(--envive-colors-border-medium)"
+        fill={
+          textColor !== TypographyColor.TEXT_SECONDARY
+            ? `var(--envive-colors-${textColor})`
+            : 'var(--envive-colors-border-medium)'
+        }
       />
     );
   }
@@ -84,7 +114,11 @@ export const Icon = ({ variant, theme }: IconProps) => {
     <CustomIcon
       IconComponent={<SvgSendStandard />}
       className="envive-tw-h-6 envive-tw-w-6"
-      fill="var(--envive-colors-border-medium)"
+      fill={
+        textColor !== TypographyColor.TEXT_SECONDARY
+          ? `var(--envive-colors-${textColor})`
+          : 'var(--envive-colors-border-medium)'
+      }
     />
   );
 };

package/src/components/WidgetTextField/types/types.ts

@@ -1,4 +1,5 @@
 import { Theme } from '../../../../tokens/theme/theme';
+import { TypographyColor } from '../../Typography/types';
 
 /**
  * Props for the WidgetTextField component.
@@ -33,6 +34,8 @@ export type WidgetTextFieldProps = {
   placeholder?: string;
   /** Accessible label for screen readers. If not provided, the placeholder will be used. */
   ariaLabel?: string;
+  /** Text color for the text field. */
+  textColor?: TypographyColor;
   /** Whether the text field is disabled. */
   disabled?: boolean;
   /**

package/src/components/utils/useDragToScroll.ts

@@ -0,0 +1,83 @@
+import { useEffect, useRef } from 'react';
+
+type DragDirection = 'x' | 'y';
+
+type UseDragToScrollOptions = {
+  direction: DragDirection;
+  isEnabled?: boolean;
+};
+
+/**
+ * Hook to enable drag-to-scroll on a container (mouse or touch).
+ * Uses the same ref as the scroll container so it can be composed with useHorizontalWheelScroll.
+ */
+export const useDragToScroll = (
+  scrollContainerRef: React.RefObject<HTMLDivElement | null>,
+  options: UseDragToScrollOptions,
+) => {
+  const { direction, isEnabled = true } = options;
+  const dragRef = useRef({
+    isDragging: false,
+    startX: 0,
+    startY: 0,
+    startScrollLeft: 0,
+    startScrollTop: 0,
+  });
+
+  useEffect(() => {
+    if (!isEnabled || !scrollContainerRef.current) {
+      return undefined;
+    }
+
+    const container = scrollContainerRef.current;
+
+    const handlePointerDown = (e: PointerEvent) => {
+      if (e.button !== 0) return;
+      dragRef.current = {
+        isDragging: true,
+        startX: e.clientX,
+        startY: e.clientY,
+        startScrollLeft: container.scrollLeft,
+        startScrollTop: container.scrollTop,
+      };
+      container.setPointerCapture(e.pointerId);
+      container.style.cursor = 'grabbing';
+      container.style.userSelect = 'none';
+    };
+
+    const handlePointerMove = (e: PointerEvent) => {
+      const { isDragging, startX, startY, startScrollLeft, startScrollTop } = dragRef.current;
+      if (!isDragging) return;
+
+      e.preventDefault();
+      if (direction === 'x') {
+        container.scrollLeft = startScrollLeft + (startX - e.clientX);
+      } else {
+        container.scrollTop = startScrollTop + (startY - e.clientY);
+      }
+    };
+
+    const handlePointerUp = (e: PointerEvent) => {
+      if (e.button !== 0) return;
+      dragRef.current.isDragging = false;
+      container.releasePointerCapture(e.pointerId);
+      container.style.cursor = 'grab';
+      container.style.userSelect = '';
+    };
+
+    container.style.cursor = 'grab';
+
+    container.addEventListener('pointerdown', handlePointerDown);
+    container.addEventListener('pointermove', handlePointerMove, { passive: false });
+    container.addEventListener('pointerup', handlePointerUp);
+    container.addEventListener('pointercancel', handlePointerUp);
+
+    return () => {
+      container.removeEventListener('pointerdown', handlePointerDown);
+      container.removeEventListener('pointermove', handlePointerMove);
+      container.removeEventListener('pointerup', handlePointerUp);
+      container.removeEventListener('pointercancel', handlePointerUp);
+      container.style.cursor = '';
+    };
+  }, [isEnabled, direction, scrollContainerRef]);
+};

package/dist/PromptCarousel/components/BlockScrollContainer.cjs

@@ -1,23 +0,0 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_useGetScrollProperties = require('../hooks/useGetScrollProperties.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-let classnames = require("classnames");
-classnames = require_rolldown_runtime.__toESM(classnames);
-
-//#region src/components/PromptCarousel/components/BlockScrollContainer.tsx
-const BlockScrollContainer = ({ children, scrollRef, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
-	const { scrollStyle, scrollClasses } = require_useGetScrollProperties.useGetScrollProperties();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref: scrollRef,
-		className: (0, classnames.default)(...scrollClasses, className),
-		style: scrollStyle,
-		role: "group",
-		"aria-label": ariaLabel,
-		"aria-labelledby": ariaLabelledBy,
-		tabIndex: 0,
-		children
-	});
-};
-
-//#endregion
-exports.BlockScrollContainer = BlockScrollContainer;

package/dist/PromptCarousel/components/BlockScrollContainer.js

@@ -1,21 +0,0 @@
-import { useGetScrollProperties } from "../hooks/useGetScrollProperties.js";
-import { jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-
-//#region src/components/PromptCarousel/components/BlockScrollContainer.tsx
-const BlockScrollContainer = ({ children, scrollRef, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
-	const { scrollStyle, scrollClasses } = useGetScrollProperties();
-	return /* @__PURE__ */ jsx("div", {
-		ref: scrollRef,
-		className: classNames(...scrollClasses, className),
-		style: scrollStyle,
-		role: "group",
-		"aria-label": ariaLabel,
-		"aria-labelledby": ariaLabelledBy,
-		tabIndex: 0,
-		children
-	});
-};
-
-//#endregion
-export { BlockScrollContainer };

package/dist/PromptCarousel/components/ButtonContainerRow.cjs

@@ -1,34 +0,0 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_Stack = require('../../Stack/Stack.cjs');
-require('../../Stack/index.cjs');
-const require_useGetScrollProperties = require('../hooks/useGetScrollProperties.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-let classnames = require("classnames");
-classnames = require_rolldown_runtime.__toESM(classnames);
-
-//#region src/components/PromptCarousel/components/ButtonContainerRow.tsx
-const ButtonContainerRow = ({ children, scrollRef, stackRef, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
-	const { scrollStyle, scrollClasses } = require_useGetScrollProperties.useGetScrollProperties();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref: scrollRef,
-		className: (0, classnames.default)(...scrollClasses, className),
-		style: scrollStyle,
-		role: "group",
-		"aria-label": ariaLabel,
-		"aria-labelledby": ariaLabelledBy,
-		tabIndex: 0,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			ref: stackRef,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Stack.Stack, {
-				direction: "row",
-				align: "center",
-				gap: "2",
-				className: "envive-tw-h-full envive-tw-w-max envive-tw-whitespace-nowrap",
-				children
-			})
-		})
-	});
-};
-
-//#endregion
-exports.ButtonContainerRow = ButtonContainerRow;

package/dist/PromptCarousel/components/ButtonContainerRow.js

@@ -1,32 +0,0 @@
-import { Stack } from "../../Stack/Stack.js";
-import "../../Stack/index.js";
-import { useGetScrollProperties } from "../hooks/useGetScrollProperties.js";
-import { jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-
-//#region src/components/PromptCarousel/components/ButtonContainerRow.tsx
-const ButtonContainerRow = ({ children, scrollRef, stackRef, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
-	const { scrollStyle, scrollClasses } = useGetScrollProperties();
-	return /* @__PURE__ */ jsx("div", {
-		ref: scrollRef,
-		className: classNames(...scrollClasses, className),
-		style: scrollStyle,
-		role: "group",
-		"aria-label": ariaLabel,
-		"aria-labelledby": ariaLabelledBy,
-		tabIndex: 0,
-		children: /* @__PURE__ */ jsx("div", {
-			ref: stackRef,
-			children: /* @__PURE__ */ jsx(Stack, {
-				direction: "row",
-				align: "center",
-				gap: "2",
-				className: "envive-tw-h-full envive-tw-w-max envive-tw-whitespace-nowrap",
-				children
-			})
-		})
-	});
-};
-
-//#endregion
-export { ButtonContainerRow };