@eightshift/ui-components 5.6.1 → 6.0.1

package/dist/{Color-WxFE7lQB.js → color-swatch-CFIuSPcO.js}

@@ -1,6 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { b as $bdb11010cef70236$export$f680877a34711e37, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, g as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "./utils-DGpXyJOJ.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-D2C6R0DK.js";
+import $dbSRa$react__default, { useMemo, forwardRef, createContext } from "react";
 import { $ as $9446cca9a3875146$export$7d15b64cf5a3a4c4, b as $9446cca9a3875146$export$b6268554fba451f } from "./number-7sOvrqo0.js";
-import { a as $5b160d28a433310d$export$c17fa47878dc55b6, b as $6db58dc88e78b024$export$2f817fcdc4b89ae0 } from "./useLocalizedStringFormatter-eaZiN2tE.js";
+import { a as $5b160d28a433310d$export$c17fa47878dc55b6, b as $6db58dc88e78b024$export$2f817fcdc4b89ae0, $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "./useLocalizedStringFormatter-NETP-8H8.js";
 import { $ as $488c6ddbf4ef74c2$export$cc77c4ff7e8673c5 } from "./NumberFormatter-DA8u1Ot7.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-BQvmiUqb.js";
+import { c as clsx } from "./lite-DVmmD_-j.js";
+import { _ as __ } from "./default-i18n-CnQeC5Pl.js";
 var $eccab2b0118aef08$exports = {};
 $eccab2b0118aef08$exports = {
   "colorInputLabel": (args) => `${args.label}, ${args.channelLabel}`,
@@ -1741,10 +1748,10 @@ $f98dad178a72c00d$exports = {
   "zh-CN": $a9cedf75b94e4916$exports,
   "zh-TW": $37cff576474bc8d4$exports
 };
-function $parcel$interopDefault(a) {
+function $parcel$interopDefault$1(a) {
   return a && a.__esModule ? a.default : a;
 }
-let $799cddbef784668f$var$dictionary = new $5b160d28a433310d$export$c17fa47878dc55b6($parcel$interopDefault($f98dad178a72c00d$exports));
+let $799cddbef784668f$var$dictionary = new $5b160d28a433310d$export$c17fa47878dc55b6($parcel$interopDefault$1($f98dad178a72c00d$exports));
 function $799cddbef784668f$export$6e865ea70d7724f(value) {
   let res = $799cddbef784668f$var$RGBColor.parse(value) || $799cddbef784668f$var$HSBColor.parse(value) || $799cddbef784668f$var$HSLColor.parse(value);
   if (res) return res;
@@ -2445,8 +2452,119 @@ function $799cddbef784668f$var$multiplyMatrix(m, x, y, z) {
     c
   ];
 }
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+function $2993fcad7650b98d$export$9060ae606178d849(props) {
+  let { color: value, colorName } = props;
+  let nonNullValue = value || "#fff0";
+  let color = useMemo(() => typeof nonNullValue === "string" ? $799cddbef784668f$export$6e865ea70d7724f(nonNullValue) : nonNullValue, [
+    nonNullValue
+  ]);
+  let { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    labelable: true
+  });
+  let stringFormatter = $fca6afa0e843324b$export$f12b703ca79dfbb1($parcel$interopDefault($3493a52097159720$exports), "@react-aria/color");
+  let id = $bdb11010cef70236$export$f680877a34711e37(props.id);
+  if (!colorName) colorName = color.getChannelValue("alpha") === 0 ? stringFormatter.format("transparent") : color.getColorName(locale);
+  return {
+    colorSwatchProps: {
+      ...DOMProps,
+      role: "img",
+      "aria-roledescription": stringFormatter.format("colorSwatch"),
+      "aria-label": [
+        colorName,
+        props["aria-label"] || ""
+      ].filter(Boolean).join(", "),
+      "aria-labelledby": props["aria-labelledby"] ? `${id} ${props["aria-labelledby"]}` : void 0,
+      id,
+      style: {
+        backgroundColor: color.toString("css"),
+        // @ts-ignore
+        forcedColorAdjust: "none"
+      }
+    },
+    color: color || null
+  };
+}
+const $251c695a52d94a8d$export$83cc445538396800 = /* @__PURE__ */ createContext(null);
+const $251c695a52d94a8d$export$cae13e90592f246a = /* @__PURE__ */ forwardRef(function ColorSwatch(props, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $251c695a52d94a8d$export$83cc445538396800);
+  let { colorSwatchProps, color } = $2993fcad7650b98d$export$9060ae606178d849(props);
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    defaultClassName: "react-aria-ColorSwatch",
+    defaultStyle: colorSwatchProps.style,
+    values: {
+      color
+    }
+  });
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    global: true
+  });
+  return /* @__PURE__ */ $dbSRa$react__default.createElement("div", {
+    ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, colorSwatchProps, renderProps),
+    slot: props.slot || void 0,
+    ref
+  });
+});
+/**
+ * A simple color/gradient swatch.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.color] - The color to display.
+ * @param {string} [props.gradient] - The gradient to display.
+ * @param {string} [props.className] - Additional clsx to apply.
+ * @param {string} [props.colorName] - The name of the color. Should be auto-generated for colors.
+ * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
+ * @param {boolean} [props.customGradient=false] - Set to `true` if using a custom gradient.
+ *
+ * @returns {JSX.Element} The ColorSwatch component.
+ *
+ * @example
+ * <ColorSwatch color="#FF0000" />
+ *
+ * @example
+ * <ColorSwatch gradient="linear-gradient(45deg, #FF0000, #00FF00)" />
+ *
+ * @preserve
+ */
+const ColorSwatch2 = (props) => {
+  const { color: rawColor, gradient, className, colorName, flat, customGradient = false } = props;
+  const checkerPattern = "repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 0.75rem 0.75rem";
+  let color;
+  if (rawColor && !gradient && !customGradient) {
+    try {
+      if (rawColor === "transparent") {
+        color = "rgba(0, 0, 0, 0)";
+      } else {
+        color = $799cddbef784668f$export$6e865ea70d7724f(rawColor);
+      }
+    } catch (error) {
+      color = null;
+    }
+  }
+  const backgroundGradient = gradient ? `${gradient}, ${checkerPattern}` : `linear-gradient(${color}, ${color}), ${checkerPattern}`;
+  return /* @__PURE__ */ jsx(
+    $251c695a52d94a8d$export$cae13e90592f246a,
+    {
+      ...props,
+      style: {
+        background: (color || gradient) && backgroundGradient
+      },
+      className: () => clsx("es:size-6 es:rounded-md es:border es:border-secondary-300", !color && !gradient && !customGradient && "es:bg-white", !flat && "es:shadow-sm", className),
+      colorName: !color && !gradient && !customGradient ? __("No color", "eightshift-ui-components") : colorName,
+      color,
+      children: !color && !gradient && !customGradient && /* @__PURE__ */ jsx("div", { className: "es:m-auto es:h-full es:w-px es:rotate-45 es:rounded-md es:bg-red-500" })
+    }
+  );
+};
 export {
-  $799cddbef784668f$export$6e865ea70d7724f as $,
-  $3493a52097159720$exports as a,
-  $799cddbef784668f$export$4cde5df63f53f473 as b
+  $251c695a52d94a8d$export$cae13e90592f246a as $,
+  ColorSwatch2 as C,
+  $799cddbef784668f$export$6e865ea70d7724f as a,
+  $799cddbef784668f$export$4cde5df63f53f473 as b,
+  $3493a52097159720$exports as c
 };

package/dist/components/animated-visibility/animated-visibility.js

@@ -11,11 +11,12 @@ import { useState, useEffect } from "react";
  * @param {boolean} [props.noInitial=false] - If `true`, the animation when the component is first mounted is disabled.
  * @param {boolean} [props.noExitAnimation=false] - If `true`, the exit animation is not played.
  * @param {boolean} [props.noEnterAnimation=false] - If `true`, the entrance animation is not played.
+ * @param {boolean} [props.decreaseBounce=false] - If `true`, the animations will be more snappy.
  * @param {ElementTransition} [props.transition='slideFade'] - The transition to use when showing/hiding the content.
  *
  * @returns {JSX.Element} The AnimatedVisibility component.
  *
- * @typedef {'fade' | 'slideFade' |'scaleFade' | 'scaleRotateFade' | 'slideFadeUpSlight' | 'slideFadeDownSlight' | 'slideInFadeOut' | 'scaleSlideFade'} ElementTransition
+ * @typedef {'fade' | 'slideFade' |'scaleFade' | 'scaleRotateFade' | 'slideFadeUpSlight' | 'slideFadeDownSlight' | 'slideInFadeOut' | 'scaleSlideFade' | 'scaleSlideFadeSlight'} ElementTransition
  *
  * @example
  * const [visible, setVisible] = useState(false);
@@ -27,7 +28,7 @@ import { useState, useEffect } from "react";
  * @preserve
  */
 const AnimatedVisibility = (props) => {
-  const { visible, className, children, noInitial = false, transition = "slideFade", noExitAnimation, noEnterAnimation, ...other } = props;
+  const { visible, className, children, noInitial = false, transition = "slideFade", noExitAnimation, noEnterAnimation, decreaseBounce, ...other } = props;
   const [isVisibleInner, setIsVisibleInner] = useState(false);
   const [canAnimate, setCanAnimate] = useState(true);
   useEffect(() => {
@@ -45,36 +46,40 @@ const AnimatedVisibility = (props) => {
   }, []);
   const transitions = {
     fade: {
-      inClassName: "es:motion-opacity-in es:motion-duration-500",
-      outClassName: "es:motion-opacity-out es:motion-duration-300"
+      inClassName: "es:motion-opacity-in",
+      outClassName: "es:motion-opacity-out"
     },
     slideFade: {
-      inClassName: "es:motion-safe:motion-translate-y-in-[-5%] es:motion-opacity-in es:motion-duration-500 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
-      outClassName: "es:motion-safe:motion-translate-y-out-[-5%] es:motion-opacity-out es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
+      inClassName: "es:motion-translate-y-in-[-5%] es:motion-opacity-in",
+      outClassName: "es:motion-translate-y-out-[-5%] es:motion-opacity-out es:motion-duration-300"
     },
     slideInFadeOut: {
-      inClassName: "es:motion-safe:motion-translate-y-in-[-5%] es:motion-opacity-in es:motion-duration-500 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
+      inClassName: "es:motion-translate-y-in-[-5%] es:motion-opacity-in",
       outClassName: "es:motion-opacity-out es:motion-duration-300"
     },
     slideFadeUpSlight: {
-      inClassName: "es:motion-safe:motion-translate-y-in-[0.25rem] es:motion-opacity-in es:motion-duration-500 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
-      outClassName: "es:motion-safe:motion-translate-y-out-[0.25rem] es:motion-opacity-out es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
+      inClassName: "es:motion-translate-y-in-[0.25rem] es:motion-opacity-in",
+      outClassName: "es:motion-translate-y-out-[0.25rem] es:motion-opacity-out"
     },
     slideFadeDownSlight: {
-      inClassName: "es:motion-safe:motion-translate-y-in-[-0.25rem] es:motion-opacity-in es:motion-duration-500 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
-      outClassName: "es:motion-safe:motion-translate-y-out-[-0.25rem] es:motion-opacity-out es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
+      inClassName: "es:motion-translate-y-in-[-0.25rem] es:motion-opacity-in",
+      outClassName: "es:motion-translate-y-out-[-0.25rem] es:motion-opacity-out"
     },
     scaleFade: {
-      inClassName: "es:motion-safe:motion-scale-in-95 es:motion-opacity-in es:motion-duration-500 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
-      outClassName: "es:motion-safe:motion-scale-out-90 es:motion-opacity-out es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
+      inClassName: "es:motion-scale-in-95 es:motion-opacity-in",
+      outClassName: "es:motion-scale-out-90 es:motion-opacity-out"
     },
     scaleSlideFade: {
-      inClassName: "es:motion-safe:motion-translate-y-in-[-5%] es:motion-safe:motion-scale-in-95 es:motion-opacity-in es:motion-duration-500 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
-      outClassName: "es:motion-safe:motion-translate-y-out-[-5%] es:motion-safe:motion-scale-out-90 es:motion-opacity-out es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
+      inClassName: "es:motion-translate-y-in-[-5%] es:motion-scale-in-95 es:motion-opacity-in",
+      outClassName: "es:motion-translate-y-out-[-5%] es:motion-scale-out-90 es:motion-opacity-out"
+    },
+    scaleSlideFadeSlight: {
+      inClassName: "es:motion-translate-y-in-[-0.25rem] es:motion-scale-in-95 es:motion-opacity-in",
+      outClassName: "es:motion-translate-y-out-[-0.25rem] es:motion-scale-out-90 es:motion-opacity-out"
     },
     scaleRotateFade: {
-      inClassName: "es:motion-rotate-in es:motion-safe:motion-scale-in-95 es:motion-opacity-in es:motion-duration-500 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
-      outClassName: "es:motion-rotate-out es:motion-safe:motion-scale-out-90 es:motion-opacity-out es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
+      inClassName: "es:motion-rotate-in es:motion-scale-in-95 es:motion-opacity-in es:motion-blur-in-[1px]",
+      outClassName: "es:motion-rotate-out es:motion-scale-out-90 es:motion-opacity-out es:motion-blur-out-[1px]"
     }
   };
   return /* @__PURE__ */ jsx(Fragment, { children: isVisibleInner && /* @__PURE__ */ jsx(
@@ -84,6 +89,9 @@ const AnimatedVisibility = (props) => {
         !noEnterAnimation && visible && noInitial && visible && canAnimate && transitions[transition].inClassName,
         !noEnterAnimation && visible && !noInitial && transitions[transition].inClassName,
         !noExitAnimation && !visible && transitions[transition].outClassName,
+        "es:motion-duration-300",
+        decreaseBounce && "es:motion-ease-spring-snappy es:motion-ease-linear/opacity",
+        !decreaseBounce && "es:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
         "es:fill-mode-forwards",
         className
       ),

package/dist/components/base-control/base-control.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-AxKZjtFm.js";
+import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-ztX6G1zR.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 /**
@@ -18,6 +18,7 @@ import { RichLabel } from "../rich-label/rich-label.js";
  * @param {string} [props.labelContainerClassName] - Classes to pass to the label container.
  * @param {string} [props.labelClassName] - Classes to pass to the label.
  * @param {boolean} [props.fullWidthLabel] - If `true`, the label expands to fill up the whole width, instead of taking up only the space it needs.
+ * @param {boolean} [props.noHelpInset] - If `true`, the help text is not inset.
  * @param {JSX.Element} [props.labelAs] - If provided, the label (includes icon and subtitle) will be rendered as this element.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
@@ -43,6 +44,7 @@ const BaseControl = (props) => {
     controlContainerClassName,
     labelContainerClassName,
     labelClassName,
+    noHelpInset,
     fullWidthLabel,
     labelAs,
     hidden
@@ -53,8 +55,8 @@ const BaseControl = (props) => {
   if (!(label || icon || subtitle)) {
     return children;
   }
-  return /* @__PURE__ */ jsxs("div", { className: clsx("es:space-y-1", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:items-center es:gap-1", !inline && !icon && "es:pb-0.5", labelContainerClassName), children: [
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:items-center es:gap-1", !inline && "es:mb-1.5", labelContainerClassName), children: [
       (label || icon || subtitle) && /* @__PURE__ */ jsx(
         RichLabel,
         {
@@ -63,7 +65,8 @@ const BaseControl = (props) => {
           subtitle,
           fullWidth: fullWidthLabel,
           as: labelAs,
-          className: labelClassName
+          className: labelClassName,
+          noColor: true
         }
       ),
       inline && /* @__PURE__ */ jsx("div", { className: clsx("es:ml-auto es:flex es:items-center es:gap-1", controlContainerClassName), children }),
@@ -74,7 +77,7 @@ const BaseControl = (props) => {
     help && /* @__PURE__ */ jsx(
       $514c0188e459b4c0$export$5f1af8db9871e1d6,
       {
-        className: "es:inline-block es:text-sm es:text-secondary-500 es:mt-0.5",
+        className: clsx('es:inline-block es:text-sm es:text-secondary-400 es:mt-1.5 es:font-variation-["wdth"_76,"wght"_350]', !noHelpInset && "es:pl-1"),
         slot: "description",
         children: help
       }

package/dist/components/base-control/container.js

@@ -0,0 +1,204 @@
+import { jsx } from "react/jsx-runtime";
+import { c as cva } from "../../index-BHpUy2Ix.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { forwardRef, cloneElement } from "react";
+/**
+ * @typedef {Object} ContainerProps
+ * @property {string} [props.className] - Classes to pass to the container.
+ * @property {boolean} [props.hidden] - If `true`, the component is not rendered.
+ * @property {boolean} [props.accent] - If `true`, applies accent styling to the container.
+ * @property {boolean} [props.elevated] - If `true`, applies elevated styling (shadow) to the container.
+ * @property {boolean} [props.primary] - If `true`, applies primary styling (rounded full) to the container.
+ * @property {boolean} [props.isChild] - If `true`, applies child-specific styling for nested containers.
+ * @property {boolean} [props.compact] - If `true`, the vertical padding is reduced for a more compact appearance.
+ * @property {boolean} [props.standalone] - If `true`, the border radius is not adjusted automatically, based on neightboring containers.
+ * @property {string|JSX.Element} [props.as] - The HTML element or React component to render as the container.
+ *
+ * @preserve
+ */
+/**
+ * A container component to wrap other components, providing consistent styling and spacing.
+ *
+ * @component
+ * @param {ContainerProps} props
+ * @param {React.Ref<HTMLDivElement>} ref
+ *
+ * @type React.ForwardRefRenderFunction<HTMLDivElement, ContainerProps>
+ *
+ * @returns {JSX.Element} The Container component.
+ *
+ * @example
+ * <Container accent elevated>
+ *   <p>This is a container with accent and elevated styles.</p>
+ * </Container>
+ *
+ * @preserve
+ */
+const Container = forwardRef((props, ref) => {
+  const { className, children, as, hidden, accent, elevated, primary, isChild, compact, standalone, horizontal, ...rest } = props;
+  const ComponentToRender = as || "div";
+  if (hidden) {
+    return null;
+  }
+  const containerClasses = cva([" es:inset-ring es:px-2.5", className], {
+    variants: {
+      elevated: {
+        true: "es:inset-shadow-sm es:shadow-sm es:shadow-black/5"
+      },
+      primary: {
+        true: "es:rounded-full"
+      },
+      compact: {
+        false: "es:py-2 es:min-h-13",
+        true: "es:py-1 es:min-h-9"
+      }
+    },
+    compoundVariants: [
+      {
+        primary: false,
+        standalone: false,
+        class: "es:rounded-md"
+      },
+      //
+      {
+        isChild: false,
+        primary: false,
+        standalone: false,
+        horizontal: false,
+        class: "es:first:rounded-t-2xl es:last:rounded-b-2xl"
+      },
+      {
+        isChild: true,
+        primary: false,
+        standalone: false,
+        horizontal: false,
+        class: "es:[:first-child_>_&]:rounded-t-2xl es:[:last-child_>_&]:rounded-b-2xl"
+      },
+      {
+        isChild: false,
+        primary: false,
+        standalone: false,
+        horizontal: true,
+        class: "es:first:rounded-l-2xl es:last:rounded-r-2xl"
+      },
+      {
+        isChild: true,
+        primary: false,
+        standalone: false,
+        horizontal: true,
+        class: "es:[:first-child_>_&]:rounded-l-2xl es:[:last-child_>_&]:rounded-r-2xl"
+      },
+      //
+      {
+        isChild: false,
+        primary: false,
+        standalone: true,
+        class: "es:rounded-2xl"
+      },
+      //
+      {
+        accent: false,
+        elevated: false,
+        class: [
+          "es:bg-white es:bg-linear-to-b es:from-secondary-50/75 es:to-secondary-100/50 es:from-25% es:inset-ring-secondary-200/50",
+          "es:inset-shadow-sm es:inset-shadow-white/30"
+        ]
+      },
+      {
+        accent: true,
+        elevated: false,
+        class: "es:bg-surface-50 es:inset-ring-surface-100"
+      },
+      {
+        accent: false,
+        elevated: true,
+        class: "es:bg-secondary-100 es:inset-ring-secondary-200 es:inset-shadow-white/50"
+      },
+      {
+        accent: true,
+        elevated: true,
+        class: ["es:bg-surface-100 es:bg-linear-to-r es:from-accent-400/10 es:to-accent-400/12", " es:inset-ring-accent-600/10 es:inset-shadow-white/50 es:text-accent-900"]
+      }
+    ],
+    defaultVariants: {
+      accent: false,
+      elevated: false,
+      primary: false,
+      isChild: false,
+      compact: false,
+      standalone: false,
+      horizontal: false
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    ComponentToRender,
+    {
+      ...rest,
+      ref,
+      className: containerClasses({ accent, elevated, primary, isChild, compact, horizontal, standalone }),
+      children
+    }
+  );
+});
+Container.displayName = "Container";
+/**
+ * @typedef {Object} ContainerGroupProps
+ * @property {string} [className] - Classes to pass to the container group.
+ * @property {boolean} [hidden] - If `true`, the component is not rendered.
+ * @property {boolean} [horizontal] - If `true`, the component uses a horizontal orientation.
+ * @property {string|JSX.Element} [as] - The HTML element or React component to render as the container group.
+ *
+ * @preserve
+ */
+/**
+ * A container group component to wrap multiple Container components, providing consistent spacing between them.
+ *
+ * @component
+ * @param {ContainerGroupProps} props
+ * @param {React.Ref<HTMLDivElement>} ref
+ *
+ * @type React.ForwardRefRenderFunction<HTMLDivElement, ContainerGroupProps>
+ *
+ * @returns {JSX.Element} The ContainerGroup component.
+ *
+ * @example
+ * <ContainerGroup>
+ *   <Container>First container</Container>
+ *   <Container>Second container</Container>
+ * </ContainerGroup>
+ *
+ * @preserve
+ */
+const ContainerGroup = forwardRef((props, ref) => {
+  const { className, children, as, hidden, horizontal, ...rest } = props;
+  const ComponentToRender = as || "div";
+  if (hidden) {
+    return null;
+  }
+  const processedChildren = Array.isArray(children) ? children.reduce((acc, child, index) => {
+    if (child.type.displayName === "Container") {
+      return [
+        ...acc,
+        cloneElement(child, {
+          horizontal,
+          key: index
+        })
+      ];
+    }
+    return [...acc, child];
+  }, []) : children;
+  return /* @__PURE__ */ jsx(
+    ComponentToRender,
+    {
+      ...rest,
+      ref,
+      className: clsx("es:flex es:gap-0.5", !horizontal && "es:flex-col", className),
+      children: processedChildren
+    }
+  );
+});
+ContainerGroup.displayName = "ContainerGroup";
+export {
+  Container,
+  ContainerGroup
+};