@eightshift/ui-components 1.5.1 → 1.6.1

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

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import "../../default-i18n-BqWys-1G.js";
-import { RichLabel } from "../rich-label/rich-label.js";
-import { DraggableListContext } from "./draggable-list-context.js";
-import { useContext } from "react";
+import { BaseControl } from "../base-control/base-control.js";
+import { icons } from "../../icons/icons.js";
+import { cloneElement } from "react";
+import "../../react-jsx-parser.min-sPC96O_U.js";
 /**
  * A DraggableList item.
  *
@@ -15,7 +16,6 @@ import { useContext } from "react";
  * @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 label.
- * @param {string} [props.containerClassName] - Classes to pass to the item container.
  *
  * @returns {JSX.Element} The DraggableList component.
  *
@@ -24,31 +24,21 @@ import { useContext } from "react";
  * @preserve
  */
 const DraggableListItem = (props) => {
-  const { children, icon, label, subtitle, className, containerClassName, ...rest } = props;
-  const { labelAsHandle } = useContext(DraggableListContext);
-  const labelElement = /* @__PURE__ */ jsx(
-    RichLabel,
+  const { children, icon, label, subtitle, className, ...rest } = props;
+  return /* @__PURE__ */ jsxs(
+    BaseControl,
     {
-      hidden: !(icon || label || subtitle),
       icon,
       label,
       subtitle,
-      className,
-      fullWidth: true
-    }
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      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",
-        containerClassName
-      ),
+      className: clsx("es-uic-w-full", className),
+      fullWidthLabel: true,
+      inline: true,
       ...rest,
       children: [
-        labelAsHandle && /* @__PURE__ */ jsx("div", { "data-swapy-handle": true, children: labelElement }),
-        !labelAsHandle && labelElement,
+        cloneElement(icons.reorderGrabberV, {
+          className: "es-uic-opacity-0 es-uic-transition-opacity group-focus-visible:es-uic-opacity-100 es-uic-text-gray-400 es-uic-size-4 group-hover:es-uic-opacity-100"
+        }),
         children
       ]
     }
@@ -71,11 +61,12 @@ const DraggableListItem = (props) => {
 const DraggableListItemHandle = (props) => {
   const { className, children, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    "div",
+    "button",
     {
-      "data-swapy-handle": true,
       className: className ?? 'es-uic-relative es-uic-h-6 es-uic-w-2 es-uic-cursor-pointer es-uic-items-center es-uic-justify-center es-uic-self-center es-uic-rounded es-uic-border es-uic-border-gray-300 es-uic-bg-gray-50 es-uic-transition after:es-uic-absolute after:es-uic-inset-0 after:es-uic-m-auto after:es-uic-h-4 after:es-uic-w-px after:es-uic-bg-gray-200 after:es-uic-transition after:es-uic-content-[""] hover:es-uic-border-teal-500 hover:es-uic-bg-teal-400 hover:after:es-uic-bg-teal-500',
       ...rest,
+      "data-movable-handle": true,
+      tabIndex: -1,
       children
     }
   );

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

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import { useId, useMemo, useRef, useState, useEffect } from "react";
+import { useId } from "react";
 import "../../default-i18n-BqWys-1G.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { j as je } from "../../swapy-qb4t7itb.js";
-import { DraggableListContext } from "./draggable-list-context.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { L as List, a as arrayRemove, b as arrayMove } from "../../List-Bx2anbX-.js";
 const fixIds = (items, itemIdBase) => {
   return items.map((item, i) => ({
     ...item,
@@ -26,7 +25,6 @@ const fixIds = (items, itemIdBase) => {
  * @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.
- * @param {boolean} [props.labelAsHandle=false] - If `true`, the label will be used as the handle for dragging.
  *
  * @returns {JSX.Element} The DraggableList component.
  *
@@ -74,52 +72,7 @@ const DraggableList = (props) => {
     hidden,
     ...rest
   } = props;
-  const items = useMemo(() => fixIds(rawItems, itemIdBase), [rawItems]);
-  const ref = useRef(null);
-  const swapyRef = useRef(null);
-  const [slotItemsMap, setSlotItemsMap] = useState([
-    ...items.map((item) => ({
-      slotId: item.id,
-      itemId: item.id
-    })),
-    { slotId: `${Math.round(Math.random() * 99999)}`, itemId: null }
-  ]);
-  const slottedItems = useMemo(
-    () => slotItemsMap.map(({ slotId, itemId }) => ({
-      slotId,
-      itemId,
-      item: items.find((item) => item.id === itemId)
-    })),
-    [items, slotItemsMap]
-  );
-  useEffect(() => {
-    var _a;
-    const newItems = items.filter((item) => !slotItemsMap.some((slotItem) => slotItem.itemId === item.id)).map((item) => ({
-      slotId: item.id,
-      itemId: item.id
-    }));
-    const withoutRemovedItems = slotItemsMap.filter((slotItem) => items.some((item) => item.id === slotItem.itemId) || !slotItem.itemId);
-    const updatedSlotItemsMap = [...withoutRemovedItems, ...newItems];
-    setSlotItemsMap(updatedSlotItemsMap);
-    (_a = swapyRef.current) == null ? void 0 : _a.setData({ array: updatedSlotItemsMap });
-  }, [items]);
-  useEffect(() => {
-    const container = ref == null ? void 0 : ref.current;
-    swapyRef.current = je(container, {
-      manualSwap: true
-    });
-    swapyRef.current.onSwap(({ data }) => {
-      var _a;
-      const tweakedItems = data.array.filter(({ itemId }) => itemId !== null).map(({ itemId }) => items.find((item) => (item == null ? void 0 : item.id) === itemId));
-      onChange(tweakedItems);
-      (_a = swapyRef.current) == null ? void 0 : _a.setData({ array: data.array });
-      setSlotItemsMap(data.array);
-    });
-    return () => {
-      var _a;
-      (_a = swapyRef.current) == null ? void 0 : _a.destroy();
-    };
-  }, []);
+  const items = fixIds(rawItems, itemIdBase);
   if (hidden) {
     return null;
   }
@@ -132,45 +85,60 @@ const DraggableList = (props) => {
       help,
       actions,
       className: "es-uic-w-full",
-      children: /* @__PURE__ */ jsx(DraggableListContext.Provider, { value: { labelAsHandle }, children: /* @__PURE__ */ jsx(
-        "div",
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        List,
         {
-          ref,
-          ...rest,
-          children: slottedItems.map(({ itemId, slotId, item }, index) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "es-uic-group es-uic-transition-colors data-[swapy-highlighted]:es-uic-rounded-md data-[swapy-highlighted]:es-uic-outline-dashed data-[swapy-highlighted]:es-uic-outline-1 data-[swapy-highlighted]:es-uic-outline-teal-500/50",
-              "data-swapy-slot": slotId,
-              children: item && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: clsx(
-                    "es-uic-transition-[background-color,_box-shadow,_border-radius,_border]",
-                    "group-data-[swapy-highlighted]:es-uic-rounded-md group-data-[swapy-highlighted]:es-uic-bg-white group-data-[swapy-highlighted]:es-uic-shadow"
-                  ),
-                  "data-swapy-item": itemId,
-                  children: children({
-                    ...item,
-                    updateData: (newValue) => {
-                      onChange(items.map((i) => i.id === itemId ? { ...i, ...newValue } : i));
-                    },
-                    itemIndex: index,
-                    deleteItem: () => {
-                      onChange(items.filter((i) => i.id !== item.id));
-                      if (item.onAfterItemRemove) {
-                        onAfterItemRemove(item);
-                      }
+          values: items,
+          onChange: ({ oldIndex, newIndex }) => onChange(newIndex === -1 ? arrayRemove(items, oldIndex) : arrayMove(items, oldIndex, newIndex)),
+          renderList: ({ children: children2, props: props2 }) => {
+            const { key, ...rest2 } = props2;
+            return /* @__PURE__ */ jsx(
+              "ul",
+              {
+                className: "es-uic-w-full es-uic-list-none",
+                ...rest2,
+                children: children2
+              },
+              key
+            );
+          },
+          renderItem: ({ value, index, isDisabled, isDragged, isSelected, isOutOfBounds, props: props2 }) => {
+            const { key, ...rest2 } = props2;
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: clsx(
+                  "es-uic-group",
+                  "es-uic-min-h-8 es-uic-w-full",
+                  "es-uic-flex es-uic-items-center es-uic-gap-1 es-uic-rounded-lg",
+                  "es-uic-transition-[box-shadow,_background-color,_filter,_opacity,_border-color]",
+                  "focus:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
+                  isDisabled && "es-uic-grayscale",
+                  isDragged && "es-uic-bg-white es-uic-opacity-50",
+                  isSelected && "es-uic-bg-teal-50",
+                  isDragged ? "es-uic-cursor-grabbing" : "es-uic-cursor-grab"
+                ),
+                ...rest2,
+                children: children({
+                  ...value,
+                  updateData: (newValue) => {
+                    onChange(items.map((i) => i.id === value.id ? { ...i, ...newValue } : i));
+                  },
+                  itemIndex: index,
+                  deleteItem: () => {
+                    onChange(items.filter((i) => i.id !== value.id));
+                    if (value.onAfterItemRemove) {
+                      onAfterItemRemove(value);
                     }
-                  })
-                },
-                itemId
-              )
-            },
-            slotId
-          ))
+                  }
+                })
+              },
+              (value == null ? void 0 : value.id) ?? key
+            );
+          }
         }
-      ) })
+      )
     }
   );
 };

package/dist/components/expandable/expandable.js

@@ -19,12 +19,14 @@ import { $ as $9bf71ea28793e738$export$20e40289641fbbb6 } from "../../FocusScope
  * @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 {string} [props.headerClassName] - Classes to pass to the header (label + trigger).
  * @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.
  * @param {boolean} [props.disabled] - If `true`, the expand button is disabled.
  * @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 {object} [props.headerProps] - Props to pass to the header (label + trigger).
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The Expandable component.
@@ -44,6 +46,7 @@ const Expandable = (props) => {
     className,
     labelClassName,
     contentClassName,
+    headerClassName,
     actions,
     keepActionsOnExpand = false,
     disabled,
@@ -51,6 +54,8 @@ const Expandable = (props) => {
     children,
     open = false,
     onOpenChange,
+    customOpenButton,
+    headerProps,
     hidden,
     ...other
   } = props;
@@ -71,47 +76,65 @@ const Expandable = (props) => {
       ),
       ...other,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-flex es-uic-h-10 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(
-            RichLabel,
-            {
-              icon,
-              label,
-              subtitle,
-              className: labelClassName,
-              as: $01b77f81d0f07f68$export$b04be29aa201d4f5,
-              fullWidth: true
-            }
-          ),
-          actions && !keepActionsOnExpand && /* @__PURE__ */ jsx(
-            AnimatedVisibility,
-            {
-              visible: !isOpen,
-              className: "es-uic-ml-auto es-uic-flex es-uic-gap-2",
-              transition: "scaleFade",
-              noInitial: true,
-              children: actions
-            }
-          ),
-          actions && keepActionsOnExpand && /* @__PURE__ */ jsx("div", { className: "es-uic-ml-auto es-uic-flex es-uic-gap-2", children: actions }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: "ghost",
-              icon: isOpen ? icons.caretDownFill : icons.caretDown,
-              onPress: () => {
-                setIsOpen(!isOpen);
-                if (onOpenChange) {
-                  onOpenChange(!isOpen);
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx("es-uic-flex es-uic-h-10 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", headerClassName),
+            ...headerProps,
+            children: [
+              /* @__PURE__ */ jsx(
+                RichLabel,
+                {
+                  icon,
+                  label,
+                  subtitle,
+                  className: labelClassName,
+                  as: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+                  fullWidth: true
+                }
+              ),
+              actions && !keepActionsOnExpand && /* @__PURE__ */ jsx(
+                AnimatedVisibility,
+                {
+                  visible: !isOpen,
+                  className: "es-uic-ml-auto es-uic-flex es-uic-gap-2",
+                  transition: "scaleFade",
+                  noInitial: true,
+                  children: actions
                 }
-              },
-              tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
-              disabled,
-              className: clsx("[&>svg]:es-uic-size-5 [&>svg]:es-uic-transition-transform", isOpen && "[&>svg]:-es-uic-scale-y-100"),
-              size: "small"
-            }
-          )
-        ] }),
+              ),
+              actions && keepActionsOnExpand && /* @__PURE__ */ jsx("div", { className: "es-uic-ml-auto es-uic-flex es-uic-gap-2", children: actions }),
+              customOpenButton && customOpenButton({
+                open: isOpen,
+                toggleOpen: () => {
+                  setIsOpen(!isOpen);
+                  if (onOpenChange) {
+                    onOpenChange(!isOpen);
+                  }
+                },
+                tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
+                disabled
+              }),
+              !customOpenButton && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "ghost",
+                  icon: isOpen ? icons.caretDownFill : icons.caretDown,
+                  onPress: () => {
+                    setIsOpen(!isOpen);
+                    if (onOpenChange) {
+                      onOpenChange(!isOpen);
+                    }
+                  },
+                  tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
+                  disabled,
+                  className: clsx("[&>svg]:es-uic-size-5 [&>svg]:es-uic-transition-transform", isOpen && "[&>svg]:-es-uic-scale-y-100"),
+                  size: "small"
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           AnimatedVisibility,
           {

package/dist/components/index.js

@@ -10,8 +10,9 @@ import { ColorPicker } from "./color-pickers/color-picker.js";
 import { ColumnConfigSlider, ColumnConfigSliderOutput } from "./slider/column-config-slider.js";
 import { DraggableList } from "./draggable-list/draggable-list.js";
 import { DraggableListItem, DraggableListItemHandle } from "./draggable-list/draggable-list-item.js";
+import { DraggableContext } from "./draggable/draggable-context.js";
 import { Draggable } from "./draggable/draggable.js";
-import { DraggableItem, DraggableItemHandle } from "./draggable/draggable-item.js";
+import { DraggableHandle } from "./draggable/draggable-handle.js";
 import { Expandable } from "./expandable/expandable.js";
 import { FilePlaceholder } from "./placeholders/file-placeholder.js";
 import { GradientEditor } from "./color-pickers/gradient-editor.js";
@@ -40,7 +41,7 @@ import { Modal } from "./modal/modal.js";
 import { MultiSelect } from "./select/multi-select.js";
 import { RSClearIndicator, RSDropdownIndicator, RSMultiValue, RSMultiValueContainer, RSMultiValueLabel, RSMultiValueRemove, RSOption, RSSingleValue } from "./select/react-select-component-wrappers.js";
 import { OptionSelect } from "./option-select/option-select.js";
-import { OptionsPanel, OptionsPanelSection } from "./options-panel/options-panel.js";
+import { OptionsPanel, OptionsPanelHeader, OptionsPanelSection } from "./options-panel/options-panel.js";
 import { Select } from "./select/single-select.js";
 import { Slider } from "./slider/slider.js";
 import { SolidColorPicker } from "./color-pickers/solid-color-picker.js";
@@ -68,8 +69,8 @@ export {
   ContainerPanel,
   D as DecorativeTooltip,
   Draggable,
-  DraggableItem,
-  DraggableItemHandle,
+  DraggableContext,
+  DraggableHandle,
   DraggableList,
   DraggableListItem,
   DraggableListItemHandle,
@@ -94,6 +95,7 @@ export {
   NumberPicker,
   OptionSelect,
   OptionsPanel,
+  OptionsPanelHeader,
   OptionsPanelSection,
   Popover,
   RSClearIndicator,

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

@@ -7,7 +7,7 @@ import { $ as $a049562f99e7db0e$export$f9c6924e160136d1, a as $a049562f99e7db0e$
 import { b as $2d73ec29415bd339$export$712718f7aec83d5, $ as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BoNEjaXM.js";
 import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BqW0M3HN.js";
 import { b as $b1f0cad8af73213b$export$3585ede4d035bf14, c as $b1f0cad8af73213b$export$9145995848b05025, d as $eed445e0843c11d0$export$7ff8f37d2d81a48d, e as $eed445e0843c11d0$export$7c5906fe4f1f2af2, $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../ListBox-civ86c_v.js";
-import { f as $5e3802645cc19319$export$1c3ebcada18427bf, g as $de32f1b87079253c$export$d2f961adcb0afbe, j as $07b14b47974efb58$export$9b9a0cd73afb7ca4, $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-DSquJZb-.js";
+import { f as $5e3802645cc19319$export$1c3ebcada18427bf, g as $de32f1b87079253c$export$d2f961adcb0afbe, j as $07b14b47974efb58$export$9b9a0cd73afb7ca4, $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-BdtBguys.js";
 import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-CdwRBXol.js";
 import { i as $ae20dd8cbca75726$export$d6daf82dcd84e87c, j as $c5a24bc478652b5f$export$1005530eda016c13, e as $e1995378a142960e$export$bf788dd355e3a401 } from "../../SelectionManager-Ctbzoj1E.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
@@ -22,7 +22,7 @@ import { $ as $319e236875307eab$export$a9b970dcc4ae71a9 } from "../../LiveAnnoun
 import { b as $ea8dcbcb9ea1b556$export$9a302a45f65d0572 } from "../../usePress-Cs8K7gKw.js";
 import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-DmsOywGg.js";
 import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-m03yY3xi.js";
-import { $ as $168583247155ddda$export$dc9c12ed27dd1b49 } from "../../useMenuTrigger-BbwpSVmh.js";
+import { $ as $168583247155ddda$export$dc9c12ed27dd1b49 } from "../../useMenuTrigger-CT2-BFLo.js";
 import { _ as __ } from "../../default-i18n-BqWys-1G.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";

package/dist/components/menu/menu.js

@@ -3,12 +3,12 @@ import { $ as $982254629710d113$export$b95089534ab7c1fd, a as $453cc9f0df89c0a5$
 import { c as $880e95eb8b93ba9a$export$ecf600387e221c37, $ as $7af3f5b51489e0b5$export$253fe78d46329472, a as $7613b1592d41b092$export$6cd28814d92fa9c9, b as $d496c0a20b6e58ec$export$6c8a5aaad13c9852, l as $e1995378a142960e$export$e953bb1cd0f19726, g as $7135fc7d473fd974$export$4feb769f8ddf26c5, d as $e1995378a142960e$export$18af5c7a9e9b3664, e as $e1995378a142960e$export$bf788dd355e3a401, f as $e1995378a142960e$export$fb8073518f34e6ec, h as $7135fc7d473fd974$export$d40e14dec8b060a8, k as $7135fc7d473fd974$export$90e00781bc59d8f9, m as $7135fc7d473fd974$export$6e2c8f0811a474ce } from "../../SelectionManager-Ctbzoj1E.js";
 import { c as $3ef42575df84b30b$export$9d1611c77c2fe928, k as $bdb11010cef70236$export$b4cc09c592e8fdb8, e as $bdb11010cef70236$export$f680877a34711e37, f as $8ae05eaa5c114e9c$export$7f54fc3180508a52, j as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, i as $64fa3d84918910a7$export$2881499e37b75b9a, l as $df56164dff5785e2$export$4338b53315abf666, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8 } from "../../utils-Du2x3YVu.js";
 import React__default, { useRef, useState, useEffect, useCallback, useMemo, createContext, useContext, forwardRef, cloneElement } from "react";
-import { g as $de32f1b87079253c$export$d2f961adcb0afbe, j as $07b14b47974efb58$export$9b9a0cd73afb7ca4, k as $f1ab8c75478c6f73$export$3351871ee4b288b8, l as $e0b6e0b68ec7f50f$export$872b660ac5a1ff98 } from "../../Dialog-DSquJZb-.js";
+import { g as $de32f1b87079253c$export$d2f961adcb0afbe, j as $07b14b47974efb58$export$9b9a0cd73afb7ca4, k as $f1ab8c75478c6f73$export$3351871ee4b288b8, l as $e0b6e0b68ec7f50f$export$872b660ac5a1ff98 } from "../../Dialog-BdtBguys.js";
 import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-CdwRBXol.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import { a as $9daab02d461809db$export$683480f191c0e3ea, $ as $fc909762b330b746$export$61c6a8c84e605fb6 } from "../../tooltip-srrt1p-b.js";
 import { $ as $6179b936705e76d3$export$ae780daf29e6d456, a as $507fabe10e71c6fb$export$b9b3dfddab17db27, c as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, t as $507fabe10e71c6fb$export$98e20ec92f614cfe, e as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../focusSafely-xMzk3syC.js";
-import { $ as $168583247155ddda$export$dc9c12ed27dd1b49 } from "../../useMenuTrigger-BbwpSVmh.js";
+import { $ as $168583247155ddda$export$dc9c12ed27dd1b49 } from "../../useMenuTrigger-CT2-BFLo.js";
 import { b as $ea8dcbcb9ea1b556$export$9a302a45f65d0572, $ as $f6c31cce2adf654f$export$45712eceda6fad21, a as $ea8dcbcb9ea1b556$export$7e924b3091a3bd18 } from "../../usePress-Cs8K7gKw.js";
 import { a as $46d819fcbaf35654$export$8f71654801c2f7cd } from "../../useFocusable-Bu2Ovohk.js";
 import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-kCEA3M_y.js";

package/dist/components/modal/modal.js

@@ -1,15 +1,15 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { c as $a11501f3d1d39e6c$export$ea8f71083e90600f, d as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18, e as $337b884510726a0d$export$14c98a7594375490, f as $5e3802645cc19319$export$1c3ebcada18427bf, g as $de32f1b87079253c$export$d2f961adcb0afbe, h as $337b884510726a0d$export$c6fdb837b070b4ff, i as $86ea4cb521eb2e37$export$2317d149ed6f78c4, b as $de32f1b87079253c$export$2e1e1122cf0cba88, a as $de32f1b87079253c$export$3ddf2d174ce01153 } from "../../Dialog-DSquJZb-.js";
-import { a as $4e85f108e88277b8$export$d688439359537581 } from "../../RSPContexts-DQtGvvpM.js";
+import { c as $a11501f3d1d39e6c$export$ea8f71083e90600f, d as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18, e as $337b884510726a0d$export$14c98a7594375490, f as $5e3802645cc19319$export$1c3ebcada18427bf, g as $de32f1b87079253c$export$d2f961adcb0afbe, h as $337b884510726a0d$export$c6fdb837b070b4ff, i as $86ea4cb521eb2e37$export$2317d149ed6f78c4, b as $de32f1b87079253c$export$2e1e1122cf0cba88, a as $de32f1b87079253c$export$3ddf2d174ce01153 } from "../../Dialog-BdtBguys.js";
+import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-DGnF6JDc.js";
 import { d as $b5e257d569688ac6$export$535bd6ca7f90a273, c as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, l as $df56164dff5785e2$export$4338b53315abf666, o as $64fa3d84918910a7$export$45fda7c47f93fd48, p as $64fa3d84918910a7$export$6d3443f2c48bfc20, b as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a, m as $5dc95899b306f630$export$c9058316764c140e } from "../../utils-Du2x3YVu.js";
-import React__default, { useState, useEffect, forwardRef, useContext, useRef, useMemo, createContext } from "react";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
+import React__default, { useState, useEffect, forwardRef, useContext, useRef, useMemo, createContext } from "react";
 import { $ as $fc909762b330b746$export$61c6a8c84e605fb6 } from "../../tooltip-srrt1p-b.js";
 import { Button } from "../button/button.js";
 import { _ as __ } from "../../default-i18n-BqWys-1G.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { icons } from "../../icons/icons.js";
-import "../../react-jsx-parser.min-CAGfntg1.js";
+import "../../react-jsx-parser.min-sPC96O_U.js";
 import { HStack } from "../layout/hstack.js";
 let $5df64b3807dc15ee$var$visualViewport = typeof document !== "undefined" && window.visualViewport;
 function $5df64b3807dc15ee$export$d699905dd57c73ca() {
@@ -64,17 +64,6 @@ function $8ac8429251c45e4b$export$dbc0f175b25fb0fb(props, state, ref) {
     underlayProps
   };
 }
-function $5cb03073d3f54797$var$Heading(props, ref) {
-  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $4e85f108e88277b8$export$d688439359537581);
-  let { children, level = 3, className, ...domProps } = props;
-  let Element = `h${level}`;
-  return /* @__PURE__ */ React__default.createElement(Element, {
-    ...domProps,
-    ref,
-    className: className !== null && className !== void 0 ? className : "react-aria-Heading"
-  }, children);
-}
-const $5cb03073d3f54797$export$a8a3e93435678ff9 = /* @__PURE__ */ forwardRef($5cb03073d3f54797$var$Heading);
 const $f3f84453ead64de5$export$ab57792b9b6974a6 = /* @__PURE__ */ createContext(null);
 const $f3f84453ead64de5$var$InternalModalContext = /* @__PURE__ */ createContext(null);
 function $f3f84453ead64de5$var$Modal(props, ref) {

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { RichLabel } from "../rich-label/rich-label.js";
+import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-DGnF6JDc.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.
@@ -13,6 +14,7 @@ import { RichLabel } from "../rich-label/rich-label.js";
  * @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 {string} [props.help] - Help text to show below the panel.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The OptionsPanel component.
  *
@@ -24,8 +26,11 @@ import { RichLabel } from "../rich-label/rich-label.js";
  * @preserve
  */
 const OptionsPanel = (props) => {
-  const { children, className, title, icon, subtitle, help } = props;
-  return /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-max-w-96", className), children: [
+  const { children, className, title, icon, subtitle, help, hidden } = props;
+  if (hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-max-w-md", className), children: [
     title && /* @__PURE__ */ jsx(
       RichLabel,
       {
@@ -39,7 +44,27 @@ const OptionsPanel = (props) => {
     help && /* @__PURE__ */ jsx("span", { className: "es-uic-mt-1.5 es-uic-block es-uic-text-sm es-uic-text-gray-400", children: help })
   ] });
 };
-const OptionsPanelSection = ({ children, className }) => {
+/**
+ * Component that provides a container for grouping related options within the `OptionsPanel` component.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.className] - Classes to pass to the container.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The OptionsPanelSection component.
+ *
+ * @example
+ * <OptionsPanelSection>
+ * 	...
+ * </OptionsPanelSection>
+ *
+ * @preserve
+ */
+const OptionsPanelSection = ({ children, className, hidden }) => {
+  if (hidden) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -51,7 +76,48 @@ const OptionsPanelSection = ({ children, className }) => {
     }
   );
 };
+/**
+ * Component that provides a header for the top of an options page.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {boolean} [props.sticky] - If `true`, the header will be sticky (scroll with content). Make sure to pass a background color!
+ * @param {string} [props.title] - Title to show.
+ * @param {Number} [props.level=2] - Heading level of the title.
+ * @param {string} [props.className] - Classes to pass to the container.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Controls to show on the right side of the header.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The OptionsPanelHeader component.
+ *
+ * @example
+ * <OptionsPanelHeader title='Theme options'>
+ * 	...
+ * </OptionsPanelHeader>
+ *
+ * @preserve
+ */
+const OptionsPanelHeader = ({ children, sticky, title, className, actions, level = 2, hidden }) => {
+  if (hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-max-w-md es-uic-space-y-2.5", sticky && "es-uic-sticky es-uic-top-0 es-uic-z-10", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-flex-wrap es-uic-items-center es-uic-justify-between es-uic-gap-x-8 es-uic-gap-y-4", children: [
+      /* @__PURE__ */ jsx(
+        $5cb03073d3f54797$export$a8a3e93435678ff9,
+        {
+          className: "es-uic-text-2xl es-uic-font-medium es-uic-tracking-tight",
+          level,
+          children: title
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-items-center es-uic-gap-2", children: actions })
+    ] }),
+    children
+  ] });
+};
 export {
   OptionsPanel,
+  OptionsPanelHeader,
   OptionsPanelSection
 };

package/dist/components/popover/popover.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d, a as $de32f1b87079253c$export$3ddf2d174ce01153, b as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "../../Dialog-DSquJZb-.js";
+import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d, a as $de32f1b87079253c$export$3ddf2d174ce01153, b as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "../../Dialog-BdtBguys.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { _ as __ } from "../../default-i18n-BqWys-1G.js";
 import { Button } from "../button/button.js";