@eightshift/ui-components 5.6.1 → 6.0.0

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

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { Expandable } from "../expandable/expandable.js";
 import { icons } from "../../icons/icons.js";
 import { Switch } from "../toggle/switch.js";
@@ -14,6 +14,8 @@ import { AnimatedVisibility } from "../animated-visibility/animated-visibility.j
 /**
  * A component that provides a nice way to toggle a component on and off, and display its content in an expandable panel.
  *
+ * @deprecated since 6.0.0 - Suggested replacement is toggle in one panel/tab, that shows/hides other content when on.
+ *
  * @component
  * @param {Object} props - Component props.
  * @param {JSX.Element} [props.icon] - Icon to display in the label.
@@ -139,17 +141,19 @@ const ComponentToggle = (props) => {
   return /* @__PURE__ */ jsx(
     Expandable,
     {
-      icon: icon ?? icons.componentGeneric,
-      label: !noLabel && label,
-      subtitle,
-      keepActionsOnExpand: !hideUseToggleOnExpand,
-      actions: !noUseToggle && /* @__PURE__ */ jsx(
+      standalone: true,
+      icon: !noUseToggle ? /* @__PURE__ */ jsx(
         Switch,
         {
           checked: useComponent,
-          onChange
+          onChange,
+          "aria-label": switchAriaLabel,
+          size: "medium"
         }
-      ),
+      ) : icon ?? icons.componentGeneric,
+      label: !noLabel && label,
+      subtitle,
+      keepActionsOnExpand: !hideUseToggleOnExpand,
       disabled: !useComponent || expandButtonDisabled,
       noFocusHandling: true,
       children: !expandButtonDisabled && /* @__PURE__ */ jsx("div", { className: contentClassName, children })

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

@@ -22,6 +22,10 @@ import { BaseControl } from "../base-control/base-control.js";
  * @param {Function} [props.onUseChange] - Function to call when the use toggle is toggled. `(value: boolean) => void`.
  * @param {boolean} [props.closable] - If `true`, the panel can be closed. Will not show if `title` is not set.
  * @param {boolean} [props.startOpen=false] - Controls whether the panel is open by default.
+ * @param {boolean} [props.topBorder=false] - If `true`, a border is added to the top of the panel.
+ * @param {boolean} [props.accentLabel=false] - If `true`, the title and icon are tinted.
+ * @param {boolean} [props.accentIcon=false] - If `true`, the icon is tinted.
+ * @param {boolean} [props.noLabelInset=false] - If `true`, the label is not slightly inset, to better align with rounded containers.
  * @param {JSX.Element} [props.actions] - Actions to show at the end
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
@@ -35,13 +39,29 @@ import { BaseControl } from "../base-control/base-control.js";
  * @preserve
  */
 const ContainerPanel = (props) => {
-  const { children, className, title, icon, subtitle, use, onUseChange, closable, startOpen = false, actions, hidden } = props;
+  const {
+    children,
+    className,
+    title,
+    icon,
+    subtitle,
+    use,
+    onUseChange,
+    closable,
+    startOpen = false,
+    topBorder = false,
+    accentLabel = false,
+    accentIcon = false,
+    noLabelInset = false,
+    actions,
+    hidden
+  } = props;
   const [open, setOpen] = useState(startOpen);
   if (hidden) {
     return null;
   }
   if (!title && typeof use === "undefined") {
-    return /* @__PURE__ */ jsx("div", { className: clsx("es:space-y-2 es:border-t es:border-t-secondary-200 es:p-4", className), children });
+    return /* @__PURE__ */ jsx("div", { className: clsx("es:flex es:flex-col es:gap-3 es:p-4", topBorder && "es:border-t es:border-t-secondary-200", className), children });
   }
   const justUse = !closable && typeof onUseChange !== "undefined";
   const justClosable = closable && typeof onUseChange === "undefined";
@@ -49,46 +69,44 @@ const ContainerPanel = (props) => {
   return /* @__PURE__ */ jsxs(
     BaseControl,
     {
-      icon,
+      icon: onUseChange ? /* @__PURE__ */ jsx(
+        Switch,
+        {
+          checked: use,
+          onChange: (value) => {
+            if (!value) {
+              setOpen(false);
+            }
+            onUseChange(value);
+          },
+          size: "medium"
+        }
+      ) : icon,
       label: title,
       subtitle,
       actions: /* @__PURE__ */ jsxs(Fragment, { children: [
         actions,
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           HStack,
           {
             hidden: !closable && !onUseChange,
             className: "es:ml-auto",
-            children: [
-              onUseChange && /* @__PURE__ */ jsx(
-                Switch,
-                {
-                  checked: use,
-                  onChange: (value) => {
-                    if (!value) {
-                      setOpen(false);
-                    }
-                    onUseChange(value);
-                  }
-                }
-              ),
-              closable && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  onPress: () => setOpen(!open),
-                  icon: (typeof use !== "undefined" ? open && use : open) ? icons.caretDownFill : icons.caretDown,
-                  type: "ghost",
-                  size: "small",
-                  className: clsx("es:icon:size-5 es:icon:transition-transform", (typeof use !== "undefined" ? open && use : open) && "es:icon:-scale-y-100"),
-                  disabled: typeof use !== "undefined" && !use
-                }
-              )
-            ]
+            children: closable && /* @__PURE__ */ jsx(
+              Button,
+              {
+                onPress: () => setOpen(!open),
+                icon: icons.chevronDown,
+                type: "ghost",
+                size: "small",
+                className: clsx("es:icon:size-4! es:icon:transition-transform", (typeof use !== "undefined" ? open && use : open) && "es:icon:-scale-y-100"),
+                disabled: typeof use !== "undefined" && !use
+              }
+            )
           }
         )
       ] }),
       className: clsx(
-        "es:border-t es:border-t-secondary-200",
+        topBorder && "es:border-t es:border-t-secondary-200",
         !closable && typeof use === "undefined" && "es:space-y-2",
         justClosable && open && "es:pb-4",
         justUse && use && "es:pb-4",
@@ -99,7 +117,12 @@ const ContainerPanel = (props) => {
       ),
       labelContainerClassName: clsx((closable || onUseChange) && "es:pl-4 es:pr-3 es:min-h-12", !(closable || onUseChange) && "es:mt-3 es:mb-3", "es:pb-0!"),
       controlContainerClassName: "es:px-4",
-      labelClassName: "es:text-secondary-600!",
+      labelClassName: clsx(
+        !noLabelInset && "es:px-1",
+        accentLabel && "es:text-accent-800 es:any-icon:text-accent-700",
+        accentIcon && "es:any-icon:text-accent-700",
+        !accentLabel && "es:text-surface-700"
+      ),
       children: [
         !closable && !onUseChange && typeof use === "undefined" && children,
         closable && typeof use === "undefined" && /* @__PURE__ */ jsx(

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

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import "../../default-i18n-DBm-GqWM.js";
+import "../../default-i18n-CnQeC5Pl.js";
 import { DraggableContext } from "./draggable-context.js";
 import { useContext } from "react";
 import { icons } from "../../icons/icons.js";
-import "../../react-jsx-parser.min-VUl-CuCv.js";
+import "../../react-jsx-parser.min-B_hvYYa1.js";
 /**
  * A Draggable item handle.
  *
@@ -26,13 +26,14 @@ const DraggableHandle = (props) => {
     "div",
     {
       className: clsx(
-        "es:flex es:h-5 es:w-4 es:cursor-pointer es:items-center es:justify-center es:rounded es:border es:border-secondary-200 es:bg-white es:text-secondary-400 es:transition",
+        "es:flex es:h-5 es:w-4 es:cursor-pointer es:items-center es:justify-center es:rounded-sm es:hover:rounded-md es:inset-ring es:inset-ring-surface-400/10 es:bg-surface-50 es:text-surface-500/80 es:transition-plus",
+        "es:shadow-2xs es:shadow-surface-900/2",
         "es:icon:size-4 es:icon:shrink-0",
-        "es:active:border-accent-500/30 es:active:bg-accent-50 es:active:text-accent-500",
+        "es:active:inset-ring-accent-500/30 es:active:bg-surface-100 es:active:text-accent-500 es:active:rounded-xl",
         "es:any-focus:outline-hidden",
-        status !== "dragging" && "es:focus:border-accent-500 es:focus:ring-2 es:focus:ring-accent-500/50",
-        "es:hover:text-accent-500",
-        status === "dragging" && "es:border-accent-600! es:bg-accent-500! es:text-white! es:shadow-sm es:shadow-accent-500/30 es:ring-3 es:ring-accent-500/50",
+        status !== "dragging" && "es:focus:inset-ring-accent-500 es:focus:ring-2 es:focus:ring-accent-500/30",
+        "es:hover:text-accent-700",
+        status === "dragging" && "es:border-accent-600! es:bg-accent-500! es:text-white! es:shadow-sm es:shadow-black/5 es:ring-3 es:ring-accent-500/50",
         className
       ),
       ref: handleRef,

package/dist/components/draggable/draggable.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useLayoutEffect, useMemo, useState, useCallback, startTransition, createContext, memo, forwardRef, useImperativeHandle, useContext, useId } from "react";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { DraggableContext } from "./draggable-context.js";
-import { r as reactDomExports } from "../../index-D8-Zjpbd.js";
+import { r as reactDomExports } from "../../index-oFgxU4zs.js";
 var i = Symbol.for("preact-signals");
 function t() {
   if (!(s > 1)) {

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

@@ -1,10 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import "../../default-i18n-DBm-GqWM.js";
-import { BaseControl } from "../base-control/base-control.js";
+import "../../default-i18n-CnQeC5Pl.js";
+import { HStack } from "../layout/hstack.js";
+import { RichLabel } from "../rich-label/rich-label.js";
 import { icons } from "../../icons/icons.js";
 import { cloneElement } from "react";
-import "../../react-jsx-parser.min-VUl-CuCv.js";
+import "../../react-jsx-parser.min-B_hvYYa1.js";
 /**
  * A DraggableList item.
  *
@@ -13,7 +14,6 @@ import "../../react-jsx-parser.min-VUl-CuCv.js";
  * @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 label.
  *
@@ -24,18 +24,27 @@ import "../../react-jsx-parser.min-VUl-CuCv.js";
  * @preserve
  */
 const DraggableListItem = (props) => {
-  const { children, icon, label, subtitle, className, ...rest } = props;
+  const { children, icon, label, subtitle, className, iconClassName, labelClassName, subtitleClassName, labelContainerClassName, ...rest } = props;
   return /* @__PURE__ */ jsxs(
-    BaseControl,
+    HStack,
     {
-      icon,
-      label,
-      subtitle,
-      className: clsx("es:w-full", className),
-      fullWidthLabel: true,
-      inline: true,
+      className: clsx("es:w-fill es:group es:pl-1", className),
       ...rest,
       children: [
+        /* @__PURE__ */ jsx(
+          RichLabel,
+          {
+            icon,
+            label,
+            subtitle,
+            className: clsx("es:mr-auto", labelContainerClassName),
+            iconClassName,
+            labelClassName,
+            subtitleClassName,
+            fullWidthLabel: true,
+            inline: true
+          }
+        ),
         cloneElement(icons.reorderGrabberV, {
           className: "es:opacity-0 es:transition-opacity es:group-focus-visible:opacity-100 es:text-secondary-400 es:size-4 es:group-hover:opacity-100"
         }),

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

@@ -1,9 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { useId } from "react";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { L as List, a as arrayRemove, b as arrayMove } from "../../List-BiAnh5G5.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
+import { L as List, a as arrayRemove, b as arrayMove } from "../../List-BGHOoFf0.js";
+import { Container, ContainerGroup } from "../base-control/container.js";
 const fixIds = (items, itemIdBase) => {
   return items?.map((item, i) => ({
     ...item,
@@ -69,6 +70,8 @@ const DraggableList = (props) => {
     actions,
     disabled,
     className,
+    itemClassName,
+    itemContainerClassName,
     labelAsHandle,
     onAfterItemRemove,
     hidden,
@@ -89,42 +92,37 @@ const DraggableList = (props) => {
       subtitle,
       help,
       actions,
-      className: "es:w-full",
+      className: clsx("es:w-full", className),
       ...rest,
       children: /* @__PURE__ */ jsx(
         List,
         {
+          transitionDuration: 200,
           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",
+              ContainerGroup,
               {
-                className: "es:w-full es:list-none",
+                as: "ul",
+                className: clsx("es:w-full es:list-none es:m-0!", itemContainerClassName),
                 ...rest2,
                 children: children2
               },
               key
             );
           },
-          renderItem: ({ value, index, isDisabled, isDragged, isSelected, props: props2 }) => {
+          renderItem: ({ value, index, isDragged, isSelected, props: props2 }) => {
             const { key, ...rest2 } = props2;
             return /* @__PURE__ */ jsx(
-              "li",
+              Container,
               {
-                className: clsx(
-                  "es:group",
-                  "es:min-h-8 es:w-full",
-                  "es:flex es:items-center es:gap-1 es:rounded-lg",
-                  "es:transition-[box-shadow,background-color,filter,opacity,border-color]",
-                  "es:border es:border-transparent",
-                  "es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:focus:border-accent-500",
-                  isDisabled && "es:grayscale",
-                  isDragged && "es:bg-white es:opacity-50",
-                  isSelected && "es:bg-accent-50",
-                  isDragged ? "es:cursor-grabbing" : "es:cursor-grab"
-                ),
+                as: "li",
+                accent: isDragged || isSelected,
+                elevated: isDragged || isSelected,
+                className: clsx("es:list-none es:m-0!", itemClassName),
+                "data-selected": isDragged || isSelected || props2?.style?.position === "fixed",
                 ...rest2,
                 children: children({
                   ...value,
@@ -140,7 +138,7 @@ const DraggableList = (props) => {
                   }
                 })
               },
-              value?.id ?? key
+              key
             );
           }
         }

package/dist/components/expandable/expandable.js

@@ -1,19 +1,19 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React__default, { useRef, useCallback, useEffect, forwardRef, createContext, useContext } from "react";
+import $dbSRa$react__default, { useRef, useCallback, useEffect, forwardRef, createContext, useContext } from "react";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
-import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-CQ5ZZJ2w.js";
-import { d as $bdb11010cef70236$export$f680877a34711e37, n as $b5e257d569688ac6$export$535bd6ca7f90a273, k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a, o as $64fa3d84918910a7$export$c62b8e45d58ddad9, b as $3ef42575df84b30b$export$9d1611c77c2fe928, m as $5dc95899b306f630$export$c9058316764c140e } from "../../utils-cvK1vxO7.js";
+import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-BXjXzdW_.js";
+import { b as $bdb11010cef70236$export$f680877a34711e37, m as $b5e257d569688ac6$export$535bd6ca7f90a273, j as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, g as $64fa3d84918910a7$export$4d86445c2cf5e3, h as $64fa3d84918910a7$export$2881499e37b75b9a, n as $64fa3d84918910a7$export$c62b8e45d58ddad9, a as $3ef42575df84b30b$export$9d1611c77c2fe928, l as $5dc95899b306f630$export$c9058316764c140e } from "../../utils-DGpXyJOJ.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
-import { a as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../useHover-BRDW3y7-.js";
-import { r as reactDomExports } from "../../index-D8-Zjpbd.js";
-import { $ as $e9faafb641e167db$export$90fc3a17d93f704c } from "../../useEvent-BifIGnVS.js";
-import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Cgm0R4Cf.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
+import { a as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../useHover-Bycb7BsD.js";
+import { r as reactDomExports } from "../../index-oFgxU4zs.js";
+import { $ as $e9faafb641e167db$export$90fc3a17d93f704c } from "../../useEvent-BD7Olibq.js";
+import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-D3b7Kh4P.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 function $5e910fae8e128ead$export$6e3e27031a30522f(props, state, ref) {
   let { isDisabled } = props;
   let triggerId = $bdb11010cef70236$export$f680877a34711e37();
@@ -149,7 +149,7 @@ const $28f4fd908f0de97f$export$74a362b31437ec83 = /* @__PURE__ */ forwardRef(fun
       (_props_onExpandedChange = props.onExpandedChange) === null || _props_onExpandedChange === void 0 ? void 0 : _props_onExpandedChange.call(props, isExpanded2);
     }
   });
-  let panelRef = React__default.useRef(null);
+  let panelRef = $dbSRa$react__default.useRef(null);
   let isDisabled = props.isDisabled || (groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled) || false;
   let { buttonProps, panelProps } = $5e910fae8e128ead$export$6e3e27031a30522f({
     ...props,
@@ -173,7 +173,7 @@ const $28f4fd908f0de97f$export$74a362b31437ec83 = /* @__PURE__ */ forwardRef(fun
   let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(otherProps, {
     global: true
   });
-  return /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
     values: [
       [
         $d2b4bc8c273e7be6$export$24d547caef80ccd1,
@@ -196,7 +196,7 @@ const $28f4fd908f0de97f$export$74a362b31437ec83 = /* @__PURE__ */ forwardRef(fun
         state
       ]
     ]
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement("div", {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(domProps, renderProps, focusWithinProps),
     ref,
     "data-expanded": state.isExpanded || void 0,
@@ -220,12 +220,12 @@ const $28f4fd908f0de97f$export$feabaa331e1d464c = /* @__PURE__ */ forwardRef(fun
   let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
     global: true
   });
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement("div", {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, panelProps, focusWithinProps),
     ref: $5dc95899b306f630$export$c9058316764c140e(ref, panelRef),
     role,
     "data-focus-visible-within": isFocusVisibleWithin || void 0
-  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
     values: [
       [
         $d2b4bc8c273e7be6$export$24d547caef80ccd1,
@@ -253,6 +253,8 @@ const $28f4fd908f0de97f$export$feabaa331e1d464c = /* @__PURE__ */ forwardRef(fun
  * @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 {JSX.Element} [props.customOpenButton] - Allows adding a custom open button. **IMPORTANT**: make sure to set `slot='trigger'` on the passed element!
+ * @param {boolean} [props.standalone] - If `true`, component's border radius will not adapt to the surrounding components.
+ * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The Expandable component.
@@ -282,10 +284,12 @@ const Expandable = (props) => {
     onOpenChange,
     customOpenButton,
     headerProps,
+    standalone,
+    flat,
     hidden,
     ...other
   } = props;
-  const [isOpen, setIsOpen] = React__default.useState(open);
+  const [isOpen, setIsOpen] = $dbSRa$react__default.useState(open);
   if (isOpen && disabled) {
     setIsOpen(false);
   }
@@ -296,13 +300,26 @@ const Expandable = (props) => {
     $28f4fd908f0de97f$export$74a362b31437ec83,
     {
       isExpanded: isOpen,
-      className: clsx("es:w-full es:rounded-xl es:border es:border-secondary-300/0 es:text-sm es:transition", isOpen && "es:border-secondary-300/100 es:shadow-lg", className),
+      className: clsx("es:text-sm", !standalone && "es:group", className),
       ...other,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: clsx("es:flex es:h-10 es:items-center es:gap-1 es:transition-[padding]", isOpen && "es:py-1 es:pl-2 es:pr-1", headerClassName),
+            className: clsx(
+              "es:flex es:items-center es:gap-1 es:pr-1.25 es:py-1 es:pl-2.5",
+              standalone && "es:rounded-xl",
+              !standalone && "es:rounded-md es:group-first:rounded-t-xl es:group-after-current:rounded-t-xl",
+              "es:inset-ring",
+              "es:inset-shadow-xs",
+              isOpen && "es:bg-surface-100 es:inset-ring-surface-300/75 es:inset-shadow-surface-100/30",
+              isOpen && "es:rounded-b-md es:rounded-t-xl",
+              !isOpen && "es:bg-white es:bg-linear-to-b es:from-25% es:from-secondary-100/5 es:to-secondary-300/10 es:inset-ring-secondary-300/45 es:inset-shadow-secondary-200/50",
+              !isOpen && !standalone && "es:rounded-b-md es:group-last:rounded-b-xl es:group-before-current:rounded-b-xl",
+              !flat && "es:shadow-xs es:shadow-black/5",
+              "es:transition-plus es:duration-200 es:motion-ease-spring-bouncy",
+              headerClassName
+            ),
             ...headerProps,
             children: [
               /* @__PURE__ */ jsx(
@@ -311,22 +328,22 @@ const Expandable = (props) => {
                   icon,
                   label,
                   subtitle,
-                  className: labelClassName,
-                  as: $01b77f81d0f07f68$export$b04be29aa201d4f5,
-                  fullWidth: true
+                  className: clsx("es:grow", labelClassName),
+                  as: $01b77f81d0f07f68$export$b04be29aa201d4f5
                 }
               ),
               actions && !keepActionsOnExpand && /* @__PURE__ */ jsx(
                 AnimatedVisibility,
                 {
                   visible: !isOpen,
-                  className: "es:ml-auto es:flex es:gap-2",
-                  transition: "slideFadeDownSlight",
+                  className: "es:flex es:gap-1 es:shrink-0",
+                  transition: "scaleFade",
+                  decreaseBounce: true,
                   noInitial: true,
                   children: actions
                 }
               ),
-              actions && keepActionsOnExpand && /* @__PURE__ */ jsx("div", { className: "es:ml-auto es:flex es:gap-2", children: actions }),
+              actions && keepActionsOnExpand && /* @__PURE__ */ jsx("div", { className: "es:flex es:gap-1 es:shrink-0", children: actions }),
               customOpenButton && customOpenButton({
                 open: isOpen,
                 toggleOpen: () => {
@@ -343,7 +360,7 @@ const Expandable = (props) => {
                 {
                   slot: "trigger",
                   type: "ghost",
-                  icon: isOpen ? icons.caretDownFill : icons.caretDown,
+                  icon: icons.dropdownCaretAlt,
                   onPress: () => {
                     setIsOpen(!isOpen);
                     if (onOpenChange) {
@@ -352,7 +369,11 @@ const Expandable = (props) => {
                   },
                   tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
                   disabled,
-                  className: clsx("es:icon:size-5 es:icon:transition-transform", isOpen && "es:icon:-scale-y-100"),
+                  className: clsx(
+                    "es:icon:transition-plus es:ease-spring-bouncier es:duration-400",
+                    isOpen && "es:icon:-scale-y-100 es:icon:text-surface-600",
+                    !isOpen && "es:icon:text-secondary-500"
+                  ),
                   size: "small"
                 }
               )
@@ -363,11 +384,18 @@ const Expandable = (props) => {
           $28f4fd908f0de97f$export$feabaa331e1d464c,
           {
             className: clsx(
-              isOpen && "es:space-y-2.5 es:border-t es:border-t-secondary-200 es:p-2",
-              isOpen && "es:motion-safe:motion-preset-slide-down-sm es:motion-safe:motion-ease-spring-smooth es:motion-safe:motion-ease-linear/opacity es:motion-safe:motion-duration-300 es:motion-reduce:motion-preset-fade-md",
+              "es:h-(--disclosure-panel-height)",
+              "es:opacity-0 es:blur-[1px] es:-translate-y-2",
+              !isOpen && "es:rounded-t-xl",
+              isOpen && "es:rounded-t-sm es:opacity-100 es:blur-none es:translate-y-0 es:mt-1",
+              "es:origin-top",
+              "es:bg-white es:rounded-b-xl es:inset-ring es:inset-ring-surface-200",
+              "es:inset-shadow-sm es:inset-shadow-accent-600/5",
+              !flat && "es:shadow-xs es:shadow-black/5",
+              "es:transition-plus-h",
               contentClassName
             ),
-            children
+            children: /* @__PURE__ */ jsx("div", { className: "es:space-y-1 es:px-3 es:py-3.5", children })
           }
         )
       ]

package/dist/components/index.js

@@ -5,9 +5,10 @@ import { Button, ButtonGroup } from "./button/button.js";
 import { Checkbox } from "./checkbox/checkbox.js";
 import { ComponentToggle } from "./component-toggle/component-toggle.js";
 import { ContainerPanel } from "./container-panel/container-panel.js";
-import { ColorSwatch } from "./color-pickers/color-swatch.js";
+import { C } from "../color-swatch-CFIuSPcO.js";
 import { ColorPicker } from "./color-pickers/color-picker.js";
 import { ColumnConfigSlider, ColumnConfigSliderOutput } from "./slider/column-config-slider.js";
+import { Container, ContainerGroup } from "./base-control/container.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";
@@ -37,15 +38,10 @@ import { RepeaterItem } from "./repeater/repeater-item.js";
 import { Responsive } from "./responsive/responsive.js";
 import { ResponsiveLegacy } from "./responsive/responsive-legacy.js";
 import { ResponsivePreview } from "./responsive-preview/responsive-preview.js";
-import { __AsyncMultiSelectNext } from "./select/v2/async-multi-select.js";
 import { AsyncMultiSelect } from "./select/async-multi-select.js";
-import { AsyncSelect } from "./select/async-single-select.js";
-import { AsyncSelectNext } from "./select/v2/async-select.js";
-import { SelectNext } from "./select/v2/single-select.js";
-import { __MultiSelectNext } from "./select/v2/multi-select.js";
+import { AsyncSelect } from "./select/async-select.js";
 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, OptionsPanelHeader, OptionsPanelIntro, OptionsPanelSection } from "./options-panel/options-panel.js";
 import { Select } from "./select/single-select.js";
@@ -63,17 +59,18 @@ export {
   AnimatedVisibility,
   AsyncMultiSelect,
   AsyncSelect,
-  AsyncSelectNext,
   BaseControl,
   BreakpointPreview,
   Button,
   ButtonGroup,
   Checkbox,
   ColorPicker,
-  ColorSwatch,
+  C as ColorSwatch,
   ColumnConfigSlider,
   ColumnConfigSliderOutput,
   ComponentToggle,
+  Container,
+  ContainerGroup,
   ContainerPanel,
   DecorativeTooltip,
   Draggable,
@@ -110,14 +107,6 @@ export {
   OptionsPanelSection,
   Popover,
   PortalProvider,
-  RSClearIndicator,
-  RSDropdownIndicator,
-  RSMultiValue,
-  RSMultiValueContainer,
-  RSMultiValueLabel,
-  RSMultiValueRemove,
-  RSOption,
-  RSSingleValue,
   RadioButton,
   RadioButtonGroup,
   Repeater,
@@ -127,7 +116,6 @@ export {
   ResponsivePreview,
   RichLabel,
   Select,
-  SelectNext,
   Slider,
   SmartImage,
   SolidColorPicker,
@@ -142,7 +130,5 @@ export {
   ToggleButton,
   Tooltip,
   TriggeredPopover,
-  VStack,
-  __AsyncMultiSelectNext,
-  __MultiSelectNext
+  VStack
 };