@pareto-engineering/design-system 5.12.5 → 5.12.7

package/dist/stories/a/ToggleSwitch.stories.js

@@ -3,7 +3,7 @@ import "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import "../../FormBuilder-B0O9NnhC.js";
+import "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/a/Tooltip.stories.js

@@ -3,7 +3,7 @@ import "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { B as m } from "../../FormBuilder-B0O9NnhC.js";
+import { B as m } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/a/XMLEditor.stories.js

@@ -3,7 +3,7 @@ import "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import "../../FormBuilder-B0O9NnhC.js";
+import "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/b/Button/Button.stories.js

@@ -3,7 +3,7 @@ import { createElement as n } from "react";
 import "../../../ui/a/AppContext/Context.js";
 import "../../../ui/a/AppContext/ContextProvider.js";
 import "../../../ui/a/BlurOverlay/BlurOverlay.js";
-import { B as i } from "../../../FormBuilder-B0O9NnhC.js";
+import { B as i } from "../../../FormBuilder-BeA-ypKe.js";
 import "../../../ui/a/Conversation/Context.js";
 import "../../../ui/a/DotInfo/DotInfo.js";
 import "../../../ui/a/Figure/Figure.js";

package/dist/stories/b/Button/Group.stories.js

@@ -3,7 +3,7 @@ import { createElement as i } from "react";
 import "../../../ui/a/AppContext/Context.js";
 import "../../../ui/a/AppContext/ContextProvider.js";
 import "../../../ui/a/BlurOverlay/BlurOverlay.js";
-import { B as o } from "../../../FormBuilder-B0O9NnhC.js";
+import { B as o } from "../../../FormBuilder-BeA-ypKe.js";
 import "../../../ui/a/Conversation/Context.js";
 import "../../../ui/a/DotInfo/DotInfo.js";
 import "../../../ui/a/Figure/Figure.js";

package/dist/stories/b/Card/Card.stories.js

@@ -3,7 +3,7 @@ import "react";
 import "../../../ui/a/AppContext/Context.js";
 import "../../../ui/a/AppContext/ContextProvider.js";
 import "../../../ui/a/BlurOverlay/BlurOverlay.js";
-import { c as o } from "../../../FormBuilder-B0O9NnhC.js";
+import { c as o } from "../../../FormBuilder-BeA-ypKe.js";
 import "../../../ui/a/Conversation/Context.js";
 import "../../../ui/a/DotInfo/DotInfo.js";
 import "../../../ui/a/Figure/Figure.js";

package/dist/stories/b/Card/Group.stories.js

@@ -3,7 +3,7 @@ import "react";
 import "../../../ui/a/AppContext/Context.js";
 import "../../../ui/a/AppContext/ContextProvider.js";
 import "../../../ui/a/BlurOverlay/BlurOverlay.js";
-import { c as o } from "../../../FormBuilder-B0O9NnhC.js";
+import { c as o } from "../../../FormBuilder-BeA-ypKe.js";
 import "../../../ui/a/Conversation/Context.js";
 import "../../../ui/a/DotInfo/DotInfo.js";
 import "../../../ui/a/Figure/Figure.js";

package/dist/stories/b/Logo.stories.js

@@ -3,7 +3,7 @@ import "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { L as t } from "../../FormBuilder-B0O9NnhC.js";
+import { L as t } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/b/Page.stories.js

@@ -3,7 +3,7 @@ import "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { P as t } from "../../FormBuilder-B0O9NnhC.js";
+import { P as t } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/b/SocialMediaButton.stories.js

@@ -3,7 +3,7 @@ import "react";
 import "../../ui/a/AppContext/Context.js";
 import a from "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { S as t } from "../../FormBuilder-B0O9NnhC.js";
+import { S as t } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/b/ThemeSelector.stories.js

@@ -4,7 +4,7 @@ import "../../ui/a/AppContext/Context.js";
 import p from "../../ui/a/AppContext/ContextProvider.js";
 import e from "../../ui/a/AppContext/useApp.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { T as t } from "../../FormBuilder-B0O9NnhC.js";
+import { T as t } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/b/Title.stories.js

@@ -3,7 +3,7 @@ import "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import "../../FormBuilder-B0O9NnhC.js";
+import "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/c/Modal.stories.js

@@ -3,7 +3,7 @@ import { useState as n } from "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { B as s, M as p } from "../../FormBuilder-B0O9NnhC.js";
+import { B as s, M as p } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/c/Shortener.stories.js

@@ -3,7 +3,7 @@ import "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { d as t } from "../../FormBuilder-B0O9NnhC.js";
+import { d as t } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/c/SocialMediaShareButton.stories.js

@@ -3,7 +3,7 @@ import "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import "../../FormBuilder-B0O9NnhC.js";
+import "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/f/Checkbox.stories.js

@@ -4,7 +4,7 @@ import { useField as b, Formik as d, Form as g } from "formik";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { j as p, D as u } from "../../FormBuilder-B0O9NnhC.js";
+import { j as p, D as u } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/f/ChoicesInput.stories.js

@@ -3,7 +3,7 @@ import { useEffect as s } from "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { g as i, D as c } from "../../FormBuilder-B0O9NnhC.js";
+import { g as i, D as c } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/f/Combobox.stories.js

@@ -4,7 +4,7 @@ import { Formik as r, Form as m } from "formik";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { Q as e, D as l } from "../../FormBuilder-B0O9NnhC.js";
+import { Q as e, D as l } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/f/Description.stories.js

@@ -3,7 +3,7 @@ import "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import "../../FormBuilder-B0O9NnhC.js";
+import "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/f/DragAndDropFileUpload.stories.js

@@ -4,7 +4,7 @@ import { Formik as i, Form as m } from "formik";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { q as t } from "../../FormBuilder-B0O9NnhC.js";
+import { q as t } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/f/EditorInput.stories.js

@@ -4,7 +4,7 @@ import { Formik as e, Form as n } from "formik";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { E as p, D as l } from "../../FormBuilder-B0O9NnhC.js";
+import { E as p, D as l } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/f/FileUpload.stories.js

@@ -4,7 +4,7 @@ import { Formik as p, Form as m } from "formik";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { n as i } from "../../FormBuilder-B0O9NnhC.js";
+import { n as i } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/f/Label.stories.js

@@ -3,7 +3,7 @@ import "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import "../../FormBuilder-B0O9NnhC.js";
+import "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/f/LinkInput.stories.js

@@ -4,7 +4,7 @@ import { Formik as l, Form as a } from "formik";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { l as p, D as n } from "../../FormBuilder-B0O9NnhC.js";
+import { l as p, D as n } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/f/RadioInput.stories.js

@@ -4,7 +4,7 @@ import { Formik as t, Form as i } from "formik";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import "../../FormBuilder-B0O9NnhC.js";
+import "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/f/RatingsInput.stories.js

@@ -4,7 +4,7 @@ import { Formik as a, Form as e } from "formik";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { R as p, D as l } from "../../FormBuilder-B0O9NnhC.js";
+import { R as p, D as l } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/f/SelectInput.stories.js

@@ -4,7 +4,7 @@ import { Formik as n, Form as s } from "formik";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { f as p, D as m } from "../../FormBuilder-B0O9NnhC.js";
+import { f as p, D as m } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/f/TextInput.stories.js

@@ -4,7 +4,7 @@ import { Formik as n, Form as s } from "formik";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { e as a, D as c } from "../../FormBuilder-B0O9NnhC.js";
+import { e as a, D as c } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/f/TextareaInput.stories.js

@@ -4,7 +4,7 @@ import { Formik as p, Form as l } from "formik";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { h as a, D as m } from "../../FormBuilder-B0O9NnhC.js";
+import { h as a, D as m } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/g/DragAndDrop.stories.js

@@ -1,9 +1,9 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { useRef as d } from "react";
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import { useRef as c, useState as u } from "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { e as c, D as g } from "../../FormBuilder-B0O9NnhC.js";
+import { e as g, D as h } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";
@@ -37,18 +37,18 @@ import "../../ui/b/Title/Title.js";
 import "../../ui/c/SocialMediaShareButton/SocialMediaShareButton.js";
 import "../../ui/f/common/Label/Label.js";
 import "../../ui/f/common/Description/Description.js";
-import { Formik as u, Form as h } from "formik";
+import { Formik as f, Form as C } from "formik";
 import "../../ui/f/common/CharacterCount/CharacterCount.js";
 import "../../ui/f/fields/QueryCombobox/common/Menu/Menu.js";
 import "../../debounce-Cm69Z_cF.js";
 import "../../ui/f/fields/LatexPreviewInput/convertLatexToHtml.js";
 import "../../ui/f/fields/RadioInput/RadioInput.js";
-import p from "../../ui/g/DragAndDrop/DragAndDrop.js";
+import d from "../../ui/g/DragAndDrop/DragAndDrop.js";
 import "../../throttle-BCrS-Wew.js";
 import "../../ui/utils/formatting.js";
-const cr = {
+const Ce = {
   title: "g/DragAndDrop",
-  component: p,
+  component: d,
   subcomponents: {
     // Item:DragAndDrop.Item
   },
@@ -58,7 +58,7 @@ const cr = {
   argTypes: {
     backgroundColor: { control: "color" }
   }
-}, f = ({ children: t, dragHandleProps: r }) => /* @__PURE__ */ i(
+}, b = ({ children: e, dragHandleProps: t }) => /* @__PURE__ */ n(
   "div",
   {
     style: {
@@ -67,23 +67,23 @@ const cr = {
       border: "1px solid black"
     },
     children: [
-      /* @__PURE__ */ o("span", { ...r, className: "ai-icon", children: "H" }),
-      t
+      /* @__PURE__ */ i("span", { ...t, className: "ai-icon", children: "H" }),
+      e
     ]
   }
-), gr = {
+), be = {
   args: {
-    items: Array(8).fill().map((t, r) => ({
-      disabled: r === 0,
-      Content: (m) => /* @__PURE__ */ i(f, { dragHandleProps: m, children: [
+    items: Array(8).fill().map((e, t) => ({
+      disabled: t === 0,
+      Content: (r) => /* @__PURE__ */ n(b, { dragHandleProps: r, children: [
         "Item",
         " ",
-        r + 1
+        t + 1
       ] }),
-      identifier: `Item ${r + 1}`
+      identifier: `Item ${t + 1}`
     }))
   }
-}, y = ({ index: t, dragHandleProps: r }) => /* @__PURE__ */ i(
+}, y = ({ index: e, dragHandleProps: t }) => /* @__PURE__ */ n(
   "div",
   {
     style: {
@@ -93,8 +93,8 @@ const cr = {
       gap: "var(--gap)"
     },
     children: [
-      /* @__PURE__ */ o("span", { ...r, className: "ai-icon", children: "H" }),
-      /* @__PURE__ */ i(
+      /* @__PURE__ */ i("span", { ...t, className: "ai-icon", children: "H" }),
+      /* @__PURE__ */ n(
         "div",
         {
           style: {
@@ -106,7 +106,7 @@ const cr = {
             gap: "var(--gap)"
           },
           children: [
-            /* @__PURE__ */ i(
+            /* @__PURE__ */ n(
               "p",
               {
                 style: {
@@ -114,43 +114,134 @@ const cr = {
                 },
                 children: [
                   "Input",
-                  t + 1
+                  e + 1
                 ]
               }
             ),
-            /* @__PURE__ */ o(c, { name: `input-${t + 1}` })
+            /* @__PURE__ */ i(g, { name: `input-${e + 1}` })
           ]
         }
       )
     ]
   }
-), ur = {
-  render: ({ items: t }) => {
-    const r = d();
-    return /* @__PURE__ */ o(
-      u,
+), ye = {
+  render: ({ items: e }) => {
+    const t = c();
+    return /* @__PURE__ */ i(
+      f,
       {
         initialValues: { items: [] },
-        innerRef: r,
-        children: /* @__PURE__ */ i(h, { children: [
-          /* @__PURE__ */ o(p, { onOrderChange: (n) => {
-            const { values: e, setFieldValue: a } = r.current || {}, s = n.map(({ identifier: l }) => e == null ? void 0 : e[l]);
-            a("items", s);
-          }, items: t }),
-          /* @__PURE__ */ o(g, {})
+        innerRef: t,
+        children: /* @__PURE__ */ n(C, { children: [
+          /* @__PURE__ */ i(d, { onOrderChange: (a) => {
+            const { values: s, setFieldValue: l } = t.current || {}, m = a.map(({ identifier: p }) => s == null ? void 0 : s[p]);
+            l("items", m);
+          }, items: e }),
+          /* @__PURE__ */ i(h, {})
         ] })
       }
     );
   },
   args: {
-    items: Array(8).fill().map((t, r) => ({
-      Content: (m) => /* @__PURE__ */ o(y, { index: r, dragHandleProps: m }),
-      identifier: `input-${r + 1}`
+    items: Array(8).fill().map((e, t) => ({
+      Content: (r) => /* @__PURE__ */ i(y, { index: t, dragHandleProps: r }),
+      identifier: `input-${t + 1}`
     }))
   }
+}, o = ({ name: e, dragHandleProps: t }) => /* @__PURE__ */ n(
+  "div",
+  {
+    style: {
+      padding: "0.75rem 1rem",
+      backgroundColor: "white",
+      border: "1px solid var(--ui-lines, #e5e5e5)",
+      borderRadius: "0.5rem",
+      display: "flex",
+      alignItems: "center",
+      gap: "0.5rem"
+    },
+    children: [
+      /* @__PURE__ */ i("span", { ...t, className: "ai-icon", style: { cursor: "grab" }, children: "H" }),
+      /* @__PURE__ */ i("span", { children: e })
+    ]
+  }
+), D = [
+  {
+    id: "visible",
+    title: "Visible columns",
+    items: [
+      { identifier: "name", Content: (e) => /* @__PURE__ */ i(o, { name: "Name", dragHandleProps: e }) },
+      { identifier: "email", Content: (e) => /* @__PURE__ */ i(o, { name: "Email", dragHandleProps: e }) },
+      { identifier: "status", Content: (e) => /* @__PURE__ */ i(o, { name: "Status", dragHandleProps: e }) },
+      { identifier: "role", Content: (e) => /* @__PURE__ */ i(o, { name: "Role", dragHandleProps: e }) }
+    ]
+  },
+  {
+    id: "hidden",
+    title: "Hidden columns",
+    items: [
+      { identifier: "created_at", Content: (e) => /* @__PURE__ */ i(o, { name: "Created At", dragHandleProps: e }) },
+      { identifier: "updated_at", Content: (e) => /* @__PURE__ */ i(o, { name: "Updated At", dragHandleProps: e }) }
+    ]
+  }
+], v = ({ identifier: e, dragHandleProps: t }) => /* @__PURE__ */ i(o, { name: e, dragHandleProps: t }), H = (e) => e.map((t) => ({
+  ...t,
+  items: t.items.map((r) => ({
+    ...r,
+    Content: r.Content || ((a) => /* @__PURE__ */ i(v, { identifier: r.identifier, dragHandleProps: a }))
+  }))
+})), De = {
+  render: ({ sections: e = D, sectionTitleClassName: t }) => {
+    const r = H(e), [a, s] = u(r);
+    return /* @__PURE__ */ n("div", { style: { maxWidth: "400px", padding: "1rem" }, children: [
+      /* @__PURE__ */ i("h3", { style: { marginBottom: "1rem" }, children: "Multi-Section Drag and Drop" }),
+      /* @__PURE__ */ i("p", { style: { marginBottom: "1rem", color: "#666" }, children: "Drag items to reorder within a section or move between sections." }),
+      /* @__PURE__ */ i(
+        d,
+        {
+          sections: a,
+          sectionTitleClassName: t,
+          onOrderChange: (m) => {
+            s(m);
+          }
+        }
+      )
+    ] });
+  },
+  args: {
+    sections: [{
+      id: "visible",
+      title: "Visible columns",
+      items: [
+        { identifier: "name" },
+        { identifier: "email" },
+        { identifier: "status" },
+        { identifier: "role" }
+      ]
+    }, {
+      id: "hidden",
+      title: "Hidden columns",
+      items: [
+        { identifier: "created_at" },
+        { identifier: "updated_at" }
+      ]
+    }],
+    sectionTitleClassName: "text-sm text-tertiary font-semi-bold"
+  },
+  argTypes: {
+    sectionTitleClassName: {
+      control: "text",
+      description: "Custom class name for section titles"
+    },
+    // Hide controls not used in multi-section mode
+    as: { table: { disable: !0 } },
+    items: { table: { disable: !0 } },
+    backgroundColor: { table: { disable: !0 } }
+  }
 };
 export {
-  gr as Base,
-  ur as WithFormikInputs,
-  cr as default
+  be as Base,
+  De as MultiSection,
+  ye as WithFormikInputs,
+  Ce as default
 };

package/dist/stories/g/ExpandableLexicalPreview.stories.js

@@ -3,7 +3,7 @@ import "react";
 import "../../ui/a/AppContext/Context.js";
 import e from "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { s as r } from "../../FormBuilder-B0O9NnhC.js";
+import { s as r } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/stories/g/FormBuilder.stories.js

@@ -3,7 +3,7 @@ import { useState as m } from "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { t as s, B as u } from "../../FormBuilder-B0O9NnhC.js";
+import { t as s, B as u } from "../../FormBuilder-BeA-ypKe.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";

package/dist/ui/a/AnimatedGradient/AnimatedGradient.js

@@ -6,7 +6,7 @@ import "../AppContext/Context.js";
 import "../AppContext/ContextProvider.js";
 import "../AppContext/useApp.js";
 import "../BlurOverlay/BlurOverlay.js";
-import { A as N } from "../../../FormBuilder-B0O9NnhC.js";
+import { A as N } from "../../../FormBuilder-BeA-ypKe.js";
 import "../Conversation/Context.js";
 import "../DotInfo/DotInfo.js";
 import "../Figure/Figure.js";

package/dist/ui/a/AnimatedGradient/index.js

@@ -1,4 +1,4 @@
-import { A as r } from "../../../FormBuilder-B0O9NnhC.js";
+import { A as r } from "../../../FormBuilder-BeA-ypKe.js";
 export {
   r as AnimatedGradient
 };

package/dist/ui/a/ContentTree/ContentTree.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "react";
 import "../../../index-CxkFVI6N.js";
 import "../../../exports.module-DmUnHWIJ.js";
-import { C as f } from "../../../FormBuilder-B0O9NnhC.js";
+import { C as f } from "../../../FormBuilder-BeA-ypKe.js";
 import "./common/useContentTree.js";
 import "../../../debounce-Cm69Z_cF.js";
 export {

package/dist/ui/a/ContentTree/common/Tree/Tree.js

@@ -5,7 +5,7 @@ import "../../../../../exports.module-DmUnHWIJ.js";
 import "../../../AppContext/Context.js";
 import "../../../AppContext/ContextProvider.js";
 import "../../../BlurOverlay/BlurOverlay.js";
-import { a2 as _ } from "../../../../../FormBuilder-B0O9NnhC.js";
+import { a3 as _ } from "../../../../../FormBuilder-BeA-ypKe.js";
 import "../../../Conversation/Context.js";
 import "../../../DotInfo/DotInfo.js";
 import "../../../Figure/Figure.js";

package/dist/ui/a/ContentTree/common/Tree/index.js

@@ -1,4 +1,4 @@
-import { a2 as a } from "../../../../../FormBuilder-B0O9NnhC.js";
+import { a3 as a } from "../../../../../FormBuilder-BeA-ypKe.js";
 export {
   a as Tree
 };

package/dist/ui/a/ContentTree/common/index.js

@@ -1,6 +1,6 @@
 import { default as o } from "./useContentTree.js";
 import { default as s } from "./useFirstVisibleNode.js";
-import { a2 as f } from "../../../../FormBuilder-B0O9NnhC.js";
+import { a3 as f } from "../../../../FormBuilder-BeA-ypKe.js";
 export {
   f as Tree,
   o as useContentTree,