@eightshift/ui-components 0.0.1 → 0.0.3

package/dist/components/component-toggle/component-toggle.js

@@ -1,9 +1,13 @@
-import { jsx } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { s as sprintf, _ as __ } from "../../default-i18n-Bk1GxDHz.js";
 import { Expandable } from "../expandable/expandable.js";
 import { icons } from "../../icons/icons.js";
 import { Switch } from "../toggle/switch.js";
-import { D as DecorativeTooltip } from "../../tooltip-CkCndvTI.js";
+import { T as TriggeredPopover } from "../../popover-o2Q28Ljn.js";
+import { a as ButtonGroup } from "../../button-idVI4jmd.js";
+import { ToggleButton } from "../toggle-button/toggle-button.js";
+import { Spacer } from "../spacer/spacer.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
 /**
  * A component that provides a nice way to toggle a component on and off, and display its content in an expandable panel.
  *
@@ -18,9 +22,13 @@ import { D as DecorativeTooltip } from "../../tooltip-CkCndvTI.js";
  * @param {boolean} [props.expandButtonDisabled] - If `true`, the expand button is disabled.
  * @param {boolean} [props.controlOnly] - If `true`, only the control is displayed.
  * @param {string} [props.contentClassName] - Classes to pass to the content container.
+ * @param {ComponentToggleDesign} [props.design='default'] - Design of the component.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The ComponentToggle component.
  *
+ * @typedef {'default' | 'compact' | 'compactLabel' | 'compactIcon'} ComponentToggleDesign
+ *
  * @example
  * <ComponentToggle
  * 	label='My component'
@@ -43,24 +51,62 @@ const ComponentToggle = (props) => {
     noUseToggle,
     expandButtonDisabled,
     controlOnly,
-    contentClassName = "es-uic-space-y-2.5"
+    contentClassName = "es-uic-space-y-2.5",
+    design = "default",
+    hidden
   } = props;
+  if (hidden) {
+    return null;
+  }
   if (controlOnly) {
     return children;
   }
+  if (design.startsWith("compact")) {
+    const optionsLabel = sprintf(__("%s options", "eightshift-ui-components"), label);
+    const hasIcon = design === "compact" || design === "compactIcon";
+    const hasLabel = design === "compact" || design === "compactLabel";
+    return /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+      /* @__PURE__ */ jsx(
+        ToggleButton,
+        {
+          icon: hasIcon && (icon ?? icons.componentGeneric),
+          tooltip: hasIcon && label,
+          selected: useComponent,
+          onChange,
+          children: hasLabel && label
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        TriggeredPopover,
+        {
+          triggerButtonProps: {
+            className: "es-uic-w-5.5 es-uic-stroke-[1.25]",
+            tooltip: optionsLabel,
+            disabled: !useComponent
+          },
+          triggerButtonIcon: icons.dropdownCaretAlt,
+          className: clsx("es-uic-w-[18.5rem] es-uic-p-2", contentClassName),
+          children: [
+            /* @__PURE__ */ jsx(Spacer, { text: optionsLabel }),
+            children
+          ]
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsx(
     Expandable,
     {
       icon: icon ?? icons.componentGeneric,
       label,
       subtitle,
-      actions: !noUseToggle && /* @__PURE__ */ jsx(DecorativeTooltip, { text: __("Toggle component", "eightshift-ui-components"), children: /* @__PURE__ */ jsx("div", { className: "es-uic-mr-0.5 es-uic-flex es-uic-min-h-8 es-uic-items-center es-uic-border-r es-uic-border-r-gray-200 es-uic-pr-1.5", children: /* @__PURE__ */ jsx(
+      actions: !noUseToggle && /* @__PURE__ */ jsx(
         Switch,
         {
           checked: useComponent,
           onChange
         }
-      ) }) }),
+      ),
       disabled: !useComponent || expandButtonDisabled,
       children: !expandButtonDisabled && /* @__PURE__ */ jsx("div", { className: contentClassName, children })
     }

package/dist/components/container-panel/container-panel.js

@@ -1,5 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { classnames } from "../../utilities/classnames.js";
+import { useState } from "react";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { Switch } from "../toggle/switch.js";
+import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
+import { B as Button } from "../../button-idVI4jmd.js";
+import { icons } from "../../icons/icons.js";
+import { RichLabel } from "../rich-label/rich-label.js";
 /**
  * Component that provides a container panel for options, with an optional title.
  * Best used within the Gutenberg sidebar, instead of the default `PanelBody` component.
@@ -9,6 +15,11 @@ import { classnames } from "../../utilities/classnames.js";
  * @param {Object} props - Component props.
  * @param {string} [props.className] - Classes to pass to the container.
  * @param {string} [props.title] - Title to display on the top of the panel.
+ * @param {JSX.Element} [props.icon] - Icon to display on the top of the panel.
+ * @param {string} [props.subtitle] - Subtitle to display on the top of the panel.
+ * @param {boolean} [props.withToggle] - If `true`, the panel will have a toggle button to control the visibility of child items. Will not show if `title` is not set.
+ * @param {boolean} [props.closeable] - If `true`, the panel will have a close button to control the visibility of child items. Will not show if `title` is not set.
+ * @param {boolean} [props.startOpen] - If `true`, and panel has either a toggle or a close button, the panel will be open by default.
  *
  * @returns {JSX.Element} The ContainerPanel component.
  *
@@ -19,17 +30,55 @@ import { classnames } from "../../utilities/classnames.js";
  *
  * @preserve
  */
-const ContainerPanel = ({ children, className, title }) => {
+const ContainerPanel = (props) => {
+  const { children, className, title, icon, subtitle, withToggle, closeable, startOpen = false } = props;
+  const [open, setOpen] = useState(startOpen);
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classnames(
-        "es-uic-space-y-2.5 es-uic-border-t es-uic-border-t-gray-200 es-uic-p-4 es-uic-pt-3",
+      className: clsx(
+        "es-uic-space-y-2.5 es-uic-border-t es-uic-border-t-gray-200 es-uic-px-4",
+        !(withToggle || closeable) && "es-uic-py-4",
+        (withToggle || closeable) && !open && "es-uic-py-2.5",
+        (withToggle || closeable) && open && "es-uic-pb-4 es-uic-pt-2.5",
         className
       ),
       children: [
-        title && /* @__PURE__ */ jsx("span", { className: "es-uic-select-none es-uic-text-[0.8125rem] es-uic-font-medium es-uic-text-gray-500", children: title }),
-        children
+        title && /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-items-center es-uic-gap-2", children: [
+          /* @__PURE__ */ jsx(
+            RichLabel,
+            {
+              icon,
+              label: title,
+              subtitle,
+              className: "es-uic-select-none es-uic-text-[0.8125rem] es-uic-font-medium !es-uic-text-gray-500"
+            }
+          ),
+          (withToggle || closeable) && /* @__PURE__ */ jsxs("div", { className: "es-uic-ml-auto", children: [
+            withToggle && /* @__PURE__ */ jsx(
+              Switch,
+              {
+                checked: open,
+                onChange: setOpen
+              }
+            ),
+            closeable && /* @__PURE__ */ jsx(
+              Button,
+              {
+                onPress: () => setOpen(!open),
+                icon: open ? icons.caretDownFill : icons.caretDown,
+                type: "ghost",
+                size: "small",
+                className: clsx(
+                  "[&>svg]:es-uic-size-5 [&>svg]:es-uic-transition-transform",
+                  open && "[&>svg]:-es-uic-scale-y-100"
+                )
+              }
+            )
+          ] })
+        ] }),
+        !(withToggle || closeable) && children,
+        (withToggle || closeable) && /* @__PURE__ */ jsx(AnimatedVisibility, { visible: open, children })
       ]
     }
   );

package/dist/components/draggable-list/draggable-list-item.js

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { a as $72e60046c03fbe42$export$e96fc9a8407faa6b } from "../../GridList-CzpWxJsS.js";
+import { B as Button } from "../../button-idVI4jmd.js";
+import { icons } from "../../icons/icons.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
+import { RichLabel } from "../rich-label/rich-label.js";
+/**
+ * A DraggableList item.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - Icon to display in the label.
+ * @param {string} [props.label] - Label to display.
+ * @param {string} [props.subtitle] - Subtitle to display.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display to the right of the label.
+ * @param {string} [props.textValue] - The text value of the item.
+ * @param {string} [props.className] - Classes to pass to the item.
+ *
+ * @returns {JSX.Element} The DraggableList component.
+ *
+ * @see {@link DraggableList} for usage example.
+ *
+ * @preserve
+ */
+const DraggableListItem = (props) => {
+  const { children, icon, label, subtitle, "aria-label": ariaLabel, className, textValue, ...rest } = props;
+  let a11yLabel = textValue;
+  if ((label == null ? void 0 : label.length) > 0) {
+    a11yLabel = label;
+  }
+  if (a11yLabel === "" || !a11yLabel) {
+    a11yLabel = __("New item", "eightshift-ui-components");
+  }
+  return /* @__PURE__ */ jsxs(
+    $72e60046c03fbe42$export$e96fc9a8407faa6b,
+    {
+      "aria-label": ariaLabel ?? a11yLabel,
+      textValue: a11yLabel,
+      className: clsx(
+        "es-uic-flex es-uic-min-h-7 es-uic-items-center es-uic-gap-1 es-uic-rounded-lg es-uic-transition",
+        "focus:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50"
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          RichLabel,
+          {
+            icon,
+            label,
+            subtitle,
+            className,
+            fullWidth: true
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            className: "es-uic-ml-auto es-uic-h-6 es-uic-w-4 es-uic-shrink-0 !es-uic-text-gray-500 es-uic-opacity-5 focus:!es-uic-opacity-100",
+            slot: "drag",
+            type: "ghost",
+            icon: icons.reorderGrabberV,
+            tooltip: __("Re-order", "eightshift-ui-components")
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+export {
+  DraggableListItem
+};

package/dist/components/draggable-list/draggable-list.js

@@ -0,0 +1,157 @@
+import { jsx } from "react/jsx-runtime";
+import { $ as $72e60046c03fbe42$export$a7bfbda1311ca015 } from "../../GridList-CzpWxJsS.js";
+import { $ as $d8f176866e6dc039$export$2cfc5be7a55829f6, a as $d8f176866e6dc039$export$62ed72bc21f6b8a6 } from "../../ListBox-D3Vr4vvC.js";
+import { useId, useEffect } from "react";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { $ as $0d86e9c8f07f9a7b$export$762f73dccccd255d } from "../../useListData-BelKu4kx.js";
+/**
+ * A component that allows re-ordering a list of items.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - Icon to display in the label.
+ * @param {string} [props.label] - Label to display.
+ * @param {string} [props.subtitle] - Subtitle to display.
+ * @param {string} [props.help] - Help text to display below the input.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display to the right of the label.
+ * @param {Object<string, any>[]} props.items - Data to display in the list.
+ * @param {boolean} [props.hideEmptyState] - If `true`, the empty state will not be displayed when there are no items.
+ * @param {Function} props.onChange - Function to run when the items change.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ * @param {boolean} [props.disabled] - If `true`, item reordering is disabled.
+ * @param {string} [props.className] - Classes to pass to the item wrapper.
+ *
+ * @returns {JSX.Element} The DraggableList component.
+ *
+ * @example
+ * <DraggableList
+ * 	label='My draggable list'
+ * 	items={items}
+ * 	onChange={setItems}
+ * >
+ * 	{(item) => {
+ * 		const { title, updateData } = item;
+ *
+ * 		return (
+ * 			<DraggableListItem
+ * 				label={title ?? 'New item'}
+ * 				icon={icons.myIcon}
+ * 			>
+ * 				<InputField
+ * 					label='Title'
+ * 					type='text'
+ * 					value={title}
+ * 					onChange={(value) => updateData({ title: value })}
+ * 				/>
+ * 			</DraggableListItem>
+ * 		);
+ * 	}}
+ * </DraggableList>
+ *
+ * @preserve
+ */
+const DraggableList = (props) => {
+  const itemIdBase = useId("draggable-list-item-");
+  const {
+    children,
+    onChange,
+    items,
+    "aria-label": ariaLabel,
+    icon,
+    label,
+    subtitle,
+    help,
+    actions,
+    hideEmptyState,
+    disabled,
+    className,
+    hidden,
+    ...rest
+  } = props;
+  const list = $0d86e9c8f07f9a7b$export$762f73dccccd255d({
+    initialItems: items == null ? void 0 : items.map((item, i) => ({ id: item.id ?? `${itemIdBase}${i}`, ...item })),
+    getKey: ({ id }) => id
+  });
+  let { dragAndDropHooks } = $d8f176866e6dc039$export$2cfc5be7a55829f6({
+    isDisabled: disabled,
+    getItems: (keys) => [...keys].map((key) => ({ "text/plain": list.getItem(key).id })),
+    onReorder(e) {
+      if (e.target.dropPosition === "before") {
+        list.moveBefore(e.target.key, e.keys);
+      } else if (e.target.dropPosition === "after") {
+        list.moveAfter(e.target.key, e.keys);
+      }
+    },
+    renderDropIndicator(target) {
+      return /* @__PURE__ */ jsx(
+        $d8f176866e6dc039$export$62ed72bc21f6b8a6,
+        {
+          target,
+          className: ({ isDropTarget }) => clsx(
+            "es-uic-h-10 es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-transition",
+            isDropTarget ? "es-uic-border-teal-500 es-uic-bg-teal-500/5" : "es-uic-border-dashed"
+          )
+        }
+      );
+    },
+    async onInsert(e) {
+      let items2 = await Promise.all(
+        e.items.map(async (item) => {
+          let name = item.kind === "text" ? await item.getText("text/plain") : item.name;
+          return { id: Math.random(), name };
+        })
+      );
+      if (e.target.dropPosition === "before") {
+        list.insertBefore(e.target.key, ...items2);
+      } else if (e.target.dropPosition === "after") {
+        list.insertAfter(e.target.key, ...items2);
+      }
+    }
+  });
+  useEffect(() => {
+    const items2 = list.items.map((item) => {
+      const { id, ...rest2 } = item;
+      return rest2;
+    });
+    onChange(items2);
+  }, [list.items]);
+  if (hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    BaseControl,
+    {
+      icon,
+      label,
+      subtitle,
+      help,
+      actions,
+      className: "es-uic-w-full",
+      children: /* @__PURE__ */ jsx(
+        $72e60046c03fbe42$export$a7bfbda1311ca015,
+        {
+          "aria-label": ariaLabel ?? __("Draggable list", "eightshift-ui-components"),
+          selectionMode: "none",
+          items: list.items.map((item, index) => ({
+            ...item,
+            updateData: (newValue) => {
+              list.update(item.id, { ...list.getItem(item.id), ...newValue });
+            },
+            itemIndex: index,
+            deleteItem: () => list.remove(item.id)
+          })),
+          dragAndDropHooks,
+          renderEmptyState: () => hideEmptyState ? null : /* @__PURE__ */ jsx("div", { className: "es-uic-rounded-md es-uic-border es-uic-border-dashed es-uic-border-gray-300 es-uic-p-2 es-uic-text-sm es-uic-text-gray-400", children: __("No items", "eightshift-ui-components") }),
+          className,
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+};
+export {
+  DraggableList
+};

package/dist/components/expandable/expandable.js

@@ -2,12 +2,12 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
-import { B as Button } from "../../button-BkkdyHfJ.js";
+import { B as Button } from "../../button-idVI4jmd.js";
 import { icons } from "../../icons/icons.js";
-import { classnames } from "../../utilities/classnames.js";
-import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BPzS-sR7.js";
-import { $ as $9bf71ea28793e738$export$20e40289641fbbb6 } from "../../FocusScope-1u9yyfIN.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-9x5iLJ-Y.js";
+import { $ as $9bf71ea28793e738$export$20e40289641fbbb6 } from "../../FocusScope-B9b0VMib.js";
 /**
  * A component that allows hiding content in an expandable panel, to declutter the UI.
  *
@@ -17,6 +17,7 @@ import { $ as $9bf71ea28793e738$export$20e40289641fbbb6 } from "../../FocusScope
  * @param {string} props.label - Label to display.
  * @param {string} [props.subtitle] - Subtitle to display.
  * @param {string} [props.className] - Classes to pass to the container.
+ * @param {string} [props.contentClassName] - Classes to pass to the inner content wrapper.
  * @param {string} [props.labelClassName] - Classes to pass to the label.
  * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display in the panel header, left of the expand button.
  * @param {boolean} [props.keepActionsOnExpand=false] - If `true`, the actions are not hidden when the panel is expanded.
@@ -24,6 +25,7 @@ import { $ as $9bf71ea28793e738$export$20e40289641fbbb6 } from "../../FocusScope
  * @param {boolean} [props.noFocusHandling] - If `true`, the focus trapping when the item is expanded is disabled. Useful when part of another component that manages focus itself.
  * @param {boolean} [props.open] - Whether the expandable is open.
  * @param {Function} [props.onOpenChange] - Function is called when the panel is opened or closed.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The Expandable component.
  *
@@ -41,6 +43,7 @@ const Expandable = (props) => {
     subtitle,
     className,
     labelClassName,
+    contentClassName,
     actions,
     keepActionsOnExpand = false,
     disabled,
@@ -48,13 +51,17 @@ const Expandable = (props) => {
     children,
     open = false,
     onOpenChange,
+    hidden,
     ...other
   } = props;
   const [isOpen, setIsOpen] = React__default.useState(open);
+  if (hidden) {
+    return null;
+  }
   const component = /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classnames(
+      className: clsx(
         "es-uic-w-full es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-border-opacity-0 es-uic-text-sm es-uic-transition",
         isOpen && "es-uic-border-opacity-100 es-uic-shadow-lg",
         className
@@ -64,9 +71,9 @@ const Expandable = (props) => {
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classnames(
-              "es-uic-flex es-uic-h-10 es-uic-items-center es-uic-gap-1 es-uic-py-1 es-uic-transition-[padding-inline]",
-              isOpen && "es-uic-pl-2 es-uic-pr-1"
+            className: clsx(
+              "es-uic-flex es-uic-h-9 es-uic-items-center es-uic-gap-1 es-uic-transition-[padding]",
+              isOpen && "es-uic-py-1 es-uic-pl-2 es-uic-pr-1"
             ),
             children: [
               /* @__PURE__ */ jsx(
@@ -104,8 +111,8 @@ const Expandable = (props) => {
                   },
                   tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
                   disabled,
-                  className: classnames(
-                    "[&>svg]:es-uic-transition-transform",
+                  className: clsx(
+                    "[&>svg]:es-uic-size-5 [&>svg]:es-uic-transition-transform",
                     isOpen && "[&>svg]:-es-uic-scale-y-100"
                   ),
                   size: "small"
@@ -118,7 +125,7 @@ const Expandable = (props) => {
           AnimatedVisibility,
           {
             visible: isOpen,
-            className: "es-uic-space-y-2.5 es-uic-border-t es-uic-p-2",
+            className: clsx("es-uic-space-y-2.5 es-uic-border-t es-uic-p-2", contentClassName),
             transition: "slideFade",
             noInitial: true,
             children

package/dist/components/input-field/input-field.js

@@ -1,16 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { b as $2d73ec29415bd339$export$712718f7aec83d5, $ as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-jsbb4ugq.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BPzS-sR7.js";
-import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, c as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4, j as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-BsiH7-5Y.js";
+import { b as $2d73ec29415bd339$export$712718f7aec83d5, $ as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BJA4rmIo.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-9x5iLJ-Y.js";
+import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, c as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4, j as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-DIBzm1e4.js";
 import React__default, { forwardRef, createContext, useRef, useState, useCallback } from "react";
-import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-C3K8zAKj.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Cc-4eouh.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-wtMA4667.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-B0hyd-S4.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CRx_hYC4.js";
+import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-ILxgMZy5.js";
 import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BM136LvS.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-Cyxp9ewv.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-DG2RfOUr.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { classnames } from "../../utilities/classnames.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
 const $216918bed6669f72$export$2dc6166a7e65358c = /* @__PURE__ */ createContext({});
 let $216918bed6669f72$var$filterHoverProps = (props) => {
   let { onHoverStart, onHoverChange, onHoverEnd, ...otherProps } = props;
@@ -144,6 +144,7 @@ const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ forwardRef($bc
  * @param {boolean} [props.disabled] - If `true`, the input is disabled.
  * @param {boolean} [props.readOnly] - If `true`, the input is read-only.
  * @param {string} [props.className] - Classes to pass to the input field.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The InputField component.
  *
@@ -171,8 +172,12 @@ const InputField = (props) => {
     disabled,
     readOnly,
     className,
+    hidden,
     ...other
   } = props;
+  if (hidden) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(
     $bcdf0525bf22703d$export$2c73285ae9390cec,
     {
@@ -195,7 +200,7 @@ const InputField = (props) => {
               $3985021b0ad6602f$export$f5b8910cec6cf069,
               {
                 ...other,
-                className: classnames(
+                className: clsx(
                   "es-uic-min-h-10 es-uic-w-full es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-p-2 es-uic-text-sm es-uic-shadow-sm es-uic-transition selection:es-uic-bg-teal-500/20 selection:es-uic-text-teal-950",
                   "focus:es-uic-outline-none focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
                   className
@@ -206,7 +211,7 @@ const InputField = (props) => {
               $216918bed6669f72$export$f5c9f3c2c4054eec,
               {
                 ...other,
-                className: classnames(
+                className: clsx(
                   "es-uic-min-h-10 es-uic-w-full es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-p-2 es-uic-text-sm es-uic-shadow-sm es-uic-transition selection:es-uic-bg-teal-500/20 selection:es-uic-text-teal-950",
                   "focus:es-uic-outline-none focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
                   className

package/dist/components/layout/hstack.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
+/**
+ * Allows for stacking elements horizontally, with a gap between them.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {boolean} [props.noWrap] - If `true`, the children will not wrap if their size exceeds the container size.
+ * @param {string} [props.className] - Classes to pass to the component.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The HStack component.
+ *
+ * @example
+ * <HStack>
+ * 	...
+ * </HStack>
+ *
+ * @preserve
+ */
+const HStack = (props) => {
+  const { children, noWrap, className, hidden } = props;
+  if (hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "es-uic-flex es-uic-items-center es-uic-gap-x-1.5 es-uic-gap-y-2",
+        !noWrap && "es-uic-flex-wrap",
+        className
+      ),
+      children
+    }
+  );
+};
+export {
+  HStack
+};

package/dist/components/layout/vstack.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
+/**
+ * Allows for stacking elements vertically, with a gap between them.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {boolean} [props.noWrap] - If `true`, the children will not wrap if their size exceeds the container size.
+ * @param {string} [props.className] - Classes to pass to the component.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The VStack component.
+ *
+ * @example
+ * <VStack>
+ * 	...
+ * </VStack>
+ *
+ * @preserve
+ */
+const VStack = (props) => {
+  const { children, noWrap, className, hidden } = props;
+  if (hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "es-uic-flex es-uic-flex-col es-uic-gap-x-1.5 es-uic-gap-y-1.5",
+        !noWrap && "es-uic-flex-wrap",
+        className
+      ),
+      children
+    }
+  );
+};
+export {
+  VStack
+};