@pareto-engineering/design-system 5.11.25-alpha.0 → 5.12.1-alpha.0

package/dist/stories/a/DatePicker.stories.js

@@ -3,7 +3,7 @@ import { useState as o } from "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import "../../FormBuilder-DWGBenzf.js";
+import "../../FormBuilder-DFK61jJk.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";
@@ -45,7 +45,8 @@ import "../../ui/f/fields/RadioInput/RadioInput.js";
 import "../../ui/g/DragAndDrop/DragAndDrop.js";
 import "../../throttle-BCrS-Wew.js";
 import "../../ui/utils/formatting.js";
-const ut = {
+import "../../ui/utils/ScrollArea/ScrollArea.js";
+const gt = {
   title: "a/DatePicker",
   component: p,
   decorators: [
@@ -126,5 +127,5 @@ export {
   D as TimeRangeSelection,
   S as TimeSelection,
   f as WithCustomFooter,
-  ut as default
+  gt as default
 };

package/dist/stories/a/DotInfo.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-DWGBenzf.js";
+import "../../FormBuilder-DFK61jJk.js";
 import "../../ui/a/Conversation/Context.js";
 import t from "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";
@@ -45,7 +45,8 @@ import "../../ui/f/fields/RadioInput/RadioInput.js";
 import "../../ui/g/DragAndDrop/DragAndDrop.js";
 import "../../throttle-BCrS-Wew.js";
 import "../../ui/utils/formatting.js";
-const $ = {
+import "../../ui/utils/ScrollArea/ScrollArea.js";
+const oo = {
   title: "a/DotInfo",
   component: t,
   subcomponents: {
@@ -66,10 +67,10 @@ const p = o.bind({});
 p.args = {
   booleanValue: !1
 };
-const oo = o.bind({});
+const to = o.bind({});
 export {
   p as False,
-  oo as Nullish,
+  to as Nullish,
   m as True,
-  $ as default
+  oo as default
 };

package/dist/stories/a/Figure.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-DWGBenzf.js";
+import "../../FormBuilder-DFK61jJk.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import o from "../../ui/a/Figure/Figure.js";
@@ -45,7 +45,8 @@ import "../../ui/f/fields/RadioInput/RadioInput.js";
 import "../../ui/g/DragAndDrop/DragAndDrop.js";
 import "../../throttle-BCrS-Wew.js";
 import "../../ui/utils/formatting.js";
-const V = {
+import "../../ui/utils/ScrollArea/ScrollArea.js";
+const W = {
   title: "a/Figure",
   component: o,
   subcomponents: {
@@ -57,7 +58,7 @@ const V = {
   argTypes: {
     backgroundColor: { control: "color" }
   }
-}, W = () => /* @__PURE__ */ r(
+}, X = () => /* @__PURE__ */ r(
   o,
   {
     src: "https://cdn.mos.cms.futurecdn.net/92keBiQNU4EtZemm4wfw8h.jpg",
@@ -66,6 +67,6 @@ const V = {
   }
 );
 export {
-  W as Base,
-  V as default
+  X as Base,
+  W as default
 };

package/dist/stories/a/HamburgerButton.stories.js

@@ -3,7 +3,7 @@ import { useState as p } from "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import "../../FormBuilder-DWGBenzf.js";
+import "../../FormBuilder-DFK61jJk.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";
@@ -45,7 +45,8 @@ import "../../ui/f/fields/RadioInput/RadioInput.js";
 import "../../ui/g/DragAndDrop/DragAndDrop.js";
 import "../../throttle-BCrS-Wew.js";
 import "../../ui/utils/formatting.js";
-const $ = {
+import "../../ui/utils/ScrollArea/ScrollArea.js";
+const oo = {
   title: "a/HamburgerButton",
   component: t,
   subcomponents: {
@@ -57,11 +58,11 @@ const $ = {
   argTypes: {
     backgroundColor: { control: "color" }
   }
-}, oo = () => {
+}, to = () => {
   const [o, r] = p(!1);
   return /* @__PURE__ */ m(t, { isOpen: o, onClick: () => r(!o) });
 };
 export {
-  oo as Base,
-  $ as default
+  to as Base,
+  oo as default
 };

package/dist/stories/a/IconList.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-DWGBenzf.js";
+import "../../FormBuilder-DFK61jJk.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";
@@ -45,7 +45,8 @@ import "../../ui/f/fields/RadioInput/RadioInput.js";
 import "../../ui/g/DragAndDrop/DragAndDrop.js";
 import "../../throttle-BCrS-Wew.js";
 import "../../ui/utils/formatting.js";
-const Y = {
+import "../../ui/utils/ScrollArea/ScrollArea.js";
+const Z = {
   title: "a/IconList",
   component: o,
   subcomponents: {
@@ -57,7 +58,7 @@ const Y = {
   argTypes: {
     // backgroundColor:{ control: 'color' },
   }
-}, Z = () => /* @__PURE__ */ i(o, { children: [
+}, $ = () => /* @__PURE__ */ i(o, { children: [
   {
     key: "a",
     children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
@@ -82,6 +83,6 @@ const Y = {
   }
 ].map((t) => /* @__PURE__ */ i(o.Item, { ...t })) });
 export {
-  Z as Base,
-  Y as default
+  $ as Base,
+  Z as default
 };

package/dist/stories/a/Label.stories.js

@@ -3,7 +3,7 @@ import { createElement as e } from "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import "../../FormBuilder-DWGBenzf.js";
+import "../../FormBuilder-DFK61jJk.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";
@@ -45,8 +45,9 @@ import "../../ui/f/fields/RadioInput/RadioInput.js";
 import "../../ui/g/DragAndDrop/DragAndDrop.js";
 import "../../throttle-BCrS-Wew.js";
 import "../../ui/utils/formatting.js";
+import "../../ui/utils/ScrollArea/ScrollArea.js";
 import { ALL_COLORS as m } from "../colors.js";
-const po = {
+const eo = {
   title: "a/Label",
   component: r,
   subcomponents: {
@@ -64,7 +65,7 @@ const po = {
 a.args = {
   children: "Label Value"
 };
-const i = (o) => m.map((t) => /* @__PURE__ */ e(r, { ...o, color: t, key: t }, "This is a", " ", t, " ", "label")), eo = i.bind({}), n = i.bind({});
+const i = (o) => m.map((t) => /* @__PURE__ */ e(r, { ...o, color: t, key: t }, "This is a", " ", t, " ", "label")), so = i.bind({}), n = i.bind({});
 n.args = {
   isGhost: !0
 };
@@ -76,6 +77,6 @@ export {
   a as Base,
   l as Compact,
   n as Ghost,
-  eo as Normal,
-  po as default
+  so as Normal,
+  eo as default
 };

package/dist/stories/a/LoadingCircle.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-DWGBenzf.js";
+import "../../FormBuilder-DFK61jJk.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";
@@ -45,7 +45,8 @@ import "../../ui/f/fields/RadioInput/RadioInput.js";
 import "../../ui/g/DragAndDrop/DragAndDrop.js";
 import "../../throttle-BCrS-Wew.js";
 import "../../ui/utils/formatting.js";
-const V = {
+import "../../ui/utils/ScrollArea/ScrollArea.js";
+const X = {
   title: "a/LoadingCircle",
   component: r,
   subcomponents: {
@@ -57,7 +58,7 @@ const V = {
   argTypes: {
     backgroundColor: { control: "color" }
   }
-}, X = () => /* @__PURE__ */ o("div", { className: "x-main1 b-x", children: /* @__PURE__ */ o(
+}, Y = () => /* @__PURE__ */ o("div", { className: "x-main1 b-x", children: /* @__PURE__ */ o(
   r,
   {
     strokeLinecap: "square",
@@ -66,6 +67,6 @@ const V = {
   }
 ) });
 export {
-  X as Base,
-  V as default
+  Y as Base,
+  X as default
 };

package/dist/stories/a/MetaCard.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-DWGBenzf.js";
+import "../../FormBuilder-DFK61jJk.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";
@@ -45,7 +45,8 @@ import "../../ui/f/fields/RadioInput/RadioInput.js";
 import "../../ui/g/DragAndDrop/DragAndDrop.js";
 import "../../throttle-BCrS-Wew.js";
 import "../../ui/utils/formatting.js";
-const rr = {
+import "../../ui/utils/ScrollArea/ScrollArea.js";
+const or = {
   title: "a/MetaCard",
   component: o,
   subcomponents: {},
@@ -65,5 +66,5 @@ e.args = {
 export {
   p as Base,
   e as WithBlur,
-  rr as default
+  or as default
 };

package/dist/stories/a/Notification.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 { N as t } from "../../FormBuilder-DWGBenzf.js";
+import { N as t } from "../../FormBuilder-DFK61jJk.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";
@@ -45,8 +45,9 @@ import "../../ui/f/fields/RadioInput/RadioInput.js";
 import "../../ui/g/DragAndDrop/DragAndDrop.js";
 import "../../throttle-BCrS-Wew.js";
 import "../../ui/utils/formatting.js";
+import "../../ui/utils/ScrollArea/ScrollArea.js";
 import { ALL_COLORS as s } from "../colors.js";
-const e = ["success", "error", "blocked", "in-progress"], oo = {
+const e = ["success", "error", "blocked", "in-progress"], io = {
   title: "a/Notification",
   component: t,
   decorators: [
@@ -83,7 +84,7 @@ const e = ["success", "error", "blocked", "in-progress"], oo = {
     color: "deepblue",
     isVisible: !0
   }
-}, io = {
+}, to = {
   ...o,
   args: {
     ...o.args,
@@ -91,7 +92,7 @@ const e = ["success", "error", "blocked", "in-progress"], oo = {
     type: "error",
     color: null
   }
-}, to = {
+}, ro = {
   ...o,
   args: {
     ...o.args,
@@ -99,7 +100,7 @@ const e = ["success", "error", "blocked", "in-progress"], oo = {
     type: "warning",
     color: null
   }
-}, ro = {
+}, so = {
   ...o,
   args: {
     ...o.args,
@@ -107,7 +108,7 @@ const e = ["success", "error", "blocked", "in-progress"], oo = {
     type: "info",
     color: null
   }
-}, so = {
+}, eo = {
   ...o,
   args: {
     ...o.args,
@@ -118,9 +119,9 @@ const e = ["success", "error", "blocked", "in-progress"], oo = {
 };
 export {
   o as Base,
-  io as Error,
-  ro as Info,
-  so as Success,
-  to as Warning,
-  oo as default
+  to as Error,
+  so as Info,
+  eo as Success,
+  ro as Warning,
+  io as default
 };

package/dist/stories/a/NotificationStack.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 t } from "../../FormBuilder-DWGBenzf.js";
+import { b as t } from "../../FormBuilder-DFK61jJk.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";
@@ -45,7 +45,8 @@ import "../../ui/f/fields/RadioInput/RadioInput.js";
 import "../../ui/g/DragAndDrop/DragAndDrop.js";
 import "../../throttle-BCrS-Wew.js";
 import "../../ui/utils/formatting.js";
-const Y = {
+import "../../ui/utils/ScrollArea/ScrollArea.js";
+const Z = {
   title: "a/NotificationStack",
   component: t,
   decorators: [
@@ -76,7 +77,7 @@ const Y = {
     type: "success",
     isVisible: !0
   }
-], Z = {
+], $ = {
   render: (o) => /* @__PURE__ */ i(
     "div",
     {
@@ -99,6 +100,6 @@ const Y = {
   }
 };
 export {
-  Z as Base,
-  Y as default
+  $ as Base,
+  Z as default
 };

package/dist/stories/a/People.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-DWGBenzf.js";
+import "../../FormBuilder-DFK61jJk.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";
@@ -45,7 +45,8 @@ import "../../ui/f/fields/RadioInput/RadioInput.js";
 import "../../ui/g/DragAndDrop/DragAndDrop.js";
 import "../../throttle-BCrS-Wew.js";
 import "../../ui/utils/formatting.js";
-const X = {
+import "../../ui/utils/ScrollArea/ScrollArea.js";
+const Z = {
   title: "a/People",
   component: e,
   subcomponents: {
@@ -57,7 +58,7 @@ const X = {
   argTypes: {
     backgroundColor: { control: "color" }
   }
-}, Z = () => /* @__PURE__ */ o("div", { className: "x-background-far b-x v1 p-v", children: /* @__PURE__ */ o(e, { children: [
+}, $ = () => /* @__PURE__ */ o("div", { className: "x-background-far b-x v1 p-v", children: /* @__PURE__ */ o(e, { children: [
   {
     image: "https://lh3.googleusercontent.com/a-/AOh14GiVivY1C3gxFz1kjHfih0jzpV08rlIIfMIgBvPs",
     name: "Phoebe Yao",
@@ -76,14 +77,14 @@ const X = {
     role: "Pareto Partner",
     color: "background4"
   }
-].map((r) => /* @__PURE__ */ o(e.Person, { ...r }, r.name)) }) }), $ = () => /* @__PURE__ */ o("div", { className: "x-background-far b-x v1 p-v", children: /* @__PURE__ */ o(e, { children: [
+].map((r) => /* @__PURE__ */ o(e.Person, { ...r }, r.name)) }) }), oo = () => /* @__PURE__ */ o("div", { className: "x-background-far b-x v1 p-v", children: /* @__PURE__ */ o(e, { children: [
   {
     image: "https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Camille-Arigo.jpg",
     name: "Camillie Arigo",
     role: "Pareto Partner",
     color: "background4"
   }
-].map((r) => /* @__PURE__ */ o(e.Person, { ...r }, r.name)) }) }), oo = () => /* @__PURE__ */ o("div", { className: "x-background-far b-x v1 p-v", children: /* @__PURE__ */ o(e, { children: [
+].map((r) => /* @__PURE__ */ o(e.Person, { ...r }, r.name)) }) }), ro = () => /* @__PURE__ */ o("div", { className: "x-background-far b-x v1 p-v", children: /* @__PURE__ */ o(e, { children: [
   {
     image: "https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Camille-Arigo.jpg",
     name: "Camillie Arigo",
@@ -91,8 +92,8 @@ const X = {
   }
 ].map((r) => /* @__PURE__ */ o(e.Person, { ...r }, r.name)) }) });
 export {
-  Z as Base,
-  $ as OnePerson,
-  oo as WithoutRole,
-  X as default
+  $ as Base,
+  oo as OnePerson,
+  ro as WithoutRole,
+  Z as default
 };

package/dist/stories/a/PieChart.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-DWGBenzf.js";
+import "../../FormBuilder-DFK61jJk.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";
@@ -45,18 +45,19 @@ import "../../ui/f/fields/RadioInput/RadioInput.js";
 import "../../ui/g/DragAndDrop/DragAndDrop.js";
 import "../../throttle-BCrS-Wew.js";
 import "../../ui/utils/formatting.js";
-const rt = {
+import "../../ui/utils/ScrollArea/ScrollArea.js";
+const ot = {
   title: "a/Charts/PieChart",
   component: r
-}, e = [
+}, m = [
   { status: "pendingReview", value: 230 },
   { status: "accepted", value: 350 },
   { status: "rejected", value: 80 },
   { status: "toRevise", value: 10 },
   { status: "revised", value: 60 }
-], m = (i) => /* @__PURE__ */ t("div", { style: { height: "100%", width: "100%" }, children: /* @__PURE__ */ t(r, { ...i }) }), o = m.bind({});
+], e = (i) => /* @__PURE__ */ t("div", { style: { height: "100%", width: "100%" }, children: /* @__PURE__ */ t(r, { ...i }) }), o = e.bind({});
 o.args = {
-  data: e,
+  data: m,
   valueKey: "value",
   labelKey: "status",
   colors: ["#8CB0F8", "#7F7CF6", "#FFD66E", "#E8E9ED", "#F6BC7E"],
@@ -77,5 +78,5 @@ a.args = [
 export {
   o as Default,
   a as SideBySide,
-  rt as default
+  ot as default
 };

package/dist/stories/a/Popover.stories.js

@@ -3,7 +3,7 @@ import { useRef as l, useState as c } from "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import "../../FormBuilder-DWGBenzf.js";
+import "../../FormBuilder-DFK61jJk.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";
@@ -45,8 +45,9 @@ import "../../ui/f/fields/RadioInput/RadioInput.js";
 import "../../ui/g/DragAndDrop/DragAndDrop.js";
 import "../../throttle-BCrS-Wew.js";
 import "../../ui/utils/formatting.js";
+import "../../ui/utils/ScrollArea/ScrollArea.js";
 import o from "../utils/lorem.js";
-const cr = {
+const ar = {
   title: "a/Popover",
   component: m,
   // subcomponents:{
@@ -145,5 +146,5 @@ export {
   s as BottomRight,
   f as TopLeft,
   h as TopRight,
-  cr as default
+  ar as default
 };

package/dist/stories/a/ProgressBar.stories.js

@@ -3,7 +3,7 @@ import { useState as g } from "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import "../../FormBuilder-DWGBenzf.js";
+import "../../FormBuilder-DFK61jJk.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";
@@ -45,7 +45,8 @@ import "../../ui/f/fields/RadioInput/RadioInput.js";
 import "../../ui/g/DragAndDrop/DragAndDrop.js";
 import "../../throttle-BCrS-Wew.js";
 import "../../ui/utils/formatting.js";
-const et = {
+import "../../ui/utils/ScrollArea/ScrollArea.js";
+const st = {
   title: "a/ProgressBar",
   component: i,
   subcomponents: {
@@ -60,7 +61,7 @@ const et = {
     color: { control: "text" },
     height: { control: "text" }
   }
-}, p = (t) => /* @__PURE__ */ o(i, { ...t }), st = () => {
+}, p = (t) => /* @__PURE__ */ o(i, { ...t }), nt = () => {
   const [t, m] = g(40), s = (r) => m(Math.max(t - r, 0)), n = (r) => {
     m(Math.min(t + r, 100));
   };
@@ -81,8 +82,8 @@ l.args = {
   height: "5em"
 };
 export {
-  st as Base,
+  nt as Base,
   e as Color,
   l as Height,
-  et as default
+  st as default
 };

package/dist/stories/a/Quote.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-DWGBenzf.js";
+import "../../FormBuilder-DFK61jJk.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";
@@ -45,7 +45,8 @@ import "../../ui/f/fields/RadioInput/RadioInput.js";
 import "../../ui/g/DragAndDrop/DragAndDrop.js";
 import "../../throttle-BCrS-Wew.js";
 import "../../ui/utils/formatting.js";
-const Z = {
+import "../../ui/utils/ScrollArea/ScrollArea.js";
+const $ = {
   title: "a/Quote",
   component: t,
   subcomponents: {
@@ -85,5 +86,5 @@ i.args = {
 };
 export {
   i as Base,
-  Z as default
+  $ as default
 };

package/dist/stories/a/Removable.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-DWGBenzf.js";
+import "../../FormBuilder-DFK61jJk.js";
 import "../../ui/a/Conversation/Context.js";
 import "../../ui/a/DotInfo/DotInfo.js";
 import "../../ui/a/Figure/Figure.js";
@@ -45,7 +45,8 @@ import "../../ui/f/fields/RadioInput/RadioInput.js";
 import "../../ui/g/DragAndDrop/DragAndDrop.js";
 import "../../throttle-BCrS-Wew.js";
 import "../../ui/utils/formatting.js";
-const W = {
+import "../../ui/utils/ScrollArea/ScrollArea.js";
+const X = {
   title: "a/Removable",
   component: o,
   subcomponents: {
@@ -57,8 +58,8 @@ const W = {
   argTypes: {
     backgroundColor: { control: "color" }
   }
-}, X = () => /* @__PURE__ */ r(o, { children: "Sample Removable" });
+}, Y = () => /* @__PURE__ */ r(o, { children: "Sample Removable" });
 export {
-  X as Base,
-  W as default
+  Y as Base,
+  X as default
 };