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

package/dist/assets/index.css

@@ -0,0 +1,9 @@
+/*! 
+ * OverlayScrollbars
+ * Version: 2.12.0
+ * 
+ * Copyright (c) Rene Haas | KingSora.
+ * https://github.com/KingSora
+ * 
+ * Released under the MIT license.
+ */.os-size-observer,.os-size-observer-listener{scroll-behavior:auto!important;direction:inherit;pointer-events:none;overflow:hidden;visibility:hidden;box-sizing:border-box}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{writing-mode:horizontal-tb;position:absolute;left:0;top:0}.os-size-observer{z-index:-1;contain:strict;display:flex;flex-direction:row;flex-wrap:nowrap;padding:inherit;border:inherit;box-sizing:inherit;margin:-133px;top:0;right:0;bottom:0;left:0;transform:scale(.1)}.os-size-observer:before{content:"";flex:none;box-sizing:inherit;padding:10px;width:10px;height:10px}.os-size-observer-appear{animation:os-size-observer-appear-animation 1ms forwards}.os-size-observer-listener{box-sizing:border-box;position:relative;flex:auto;padding:inherit;border:inherit;margin:-133px;transform:scale(10)}.os-size-observer-listener.ltr{margin-right:-266px;margin-left:0}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty:before{content:"";width:100%;height:100%}.os-size-observer-listener:empty:before,.os-size-observer-listener>.os-size-observer-listener-item{display:block;position:relative;padding:inherit;border:inherit;box-sizing:content-box;flex:auto}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{right:0;bottom:0;overflow:hidden;direction:ltr;flex:none}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{0%{cursor:auto}to{cursor:none}}.os-trinsic-observer{flex:none;box-sizing:border-box;position:relative;max-width:0px;max-height:1px;padding:0;margin:0;border:none;overflow:hidden;z-index:-1;height:0;top:calc(100% + 1px);contain:strict}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport]),[data-overlayscrollbars-viewport~=scrollbarHidden],html[data-overlayscrollbars-viewport~=scrollbarHidden]>body{scrollbar-width:none!important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar,[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar-corner,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar-corner{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;display:none!important;width:0!important;height:0!important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body){overflow:auto}html[data-overlayscrollbars-body]{overflow:hidden}html[data-overlayscrollbars-body],html[data-overlayscrollbars-body]>body{width:100%;height:100%;margin:0}html[data-overlayscrollbars-body]>body{overflow:visible;margin:0}[data-overlayscrollbars]{position:relative}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{display:flex;align-items:stretch!important;flex-direction:row!important;flex-wrap:nowrap!important;scroll-behavior:auto!important}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){box-sizing:inherit;position:relative;flex:auto;height:auto;width:100%;min-width:0;padding:0;margin:0;border:none;z-index:0}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){--os-vaw: 0;--os-vah: 0;outline:none}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus{outline:none}[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]:before{content:"";position:absolute;pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:var(--os-vaw);height:var(--os-vah)}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{overflow:hidden!important}[data-overlayscrollbars~=host][data-overlayscrollbars~=noClipping],[data-overlayscrollbars-padding~=noClipping]{overflow:visible!important}[data-overlayscrollbars-viewport]{--os-viewport-overflow-x: hidden;--os-viewport-overflow-y: hidden;overflow-x:var(--os-viewport-overflow-x);overflow-y:var(--os-viewport-overflow-y)}[data-overlayscrollbars-viewport~=overflowXVisible]{--os-viewport-overflow-x: visible}[data-overlayscrollbars-viewport~=overflowXHidden]{--os-viewport-overflow-x: hidden}[data-overlayscrollbars-viewport~=overflowXScroll]{--os-viewport-overflow-x: scroll}[data-overlayscrollbars-viewport~=overflowYVisible]{--os-viewport-overflow-y: visible}[data-overlayscrollbars-viewport~=overflowYHidden]{--os-viewport-overflow-y: hidden}[data-overlayscrollbars-viewport~=overflowYScroll]{--os-viewport-overflow-y: scroll}[data-overlayscrollbars-viewport~=overflowImportant]{overflow-x:var(--os-viewport-overflow-x)!important;overflow-y:var(--os-viewport-overflow-y)!important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId){font-size:0!important;line-height:0!important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId):before,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId):after,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)>*{display:none!important;position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border-width:0!important}[data-overlayscrollbars-viewport~=measuring],[data-overlayscrollbars-viewport~=scrolling]{scroll-behavior:auto!important;scroll-snap-type:none!important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowXVisible]{overflow-x:hidden!important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowYVisible]{overflow-y:hidden!important}[data-overlayscrollbars-content]{box-sizing:inherit}[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]){display:contents}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]{display:grid;grid-template:1fr/1fr}[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding],[data-overlayscrollbars-grid]>[data-overlayscrollbars-viewport],[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding]>[data-overlayscrollbars-viewport]{height:auto!important;width:auto!important}@property --os-scroll-percent{syntax: "<number>"; inherits: true; initial-value: 0;}@property --os-viewport-percent{syntax: "<number>"; inherits: true; initial-value: 0;}.os-scrollbar{--os-viewport-percent: 0;--os-scroll-percent: 0;--os-scroll-direction: 0;--os-scroll-percent-directional: calc( var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) * var(--os-scroll-direction) )}.os-scrollbar{contain:size layout;contain:size layout style;transition:opacity .15s,visibility .15s,top .15s,right .15s,bottom .15s,left .15s;pointer-events:none;position:absolute;opacity:0;visibility:hidden}body>.os-scrollbar{position:fixed;z-index:99999}.os-scrollbar-transitionless{transition:none!important}.os-scrollbar-track{position:relative;padding:0!important;border:none!important}.os-scrollbar-handle{position:absolute}.os-scrollbar-track,.os-scrollbar-handle{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{right:auto;left:0}.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden{opacity:0;visibility:hidden}.os-scrollbar-interaction.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none!important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0!important;transition:none!important}.os-scrollbar-horizontal .os-scrollbar-handle{bottom:0;left:calc(var(--os-scroll-percent-directional) * 100%);transform:translate(calc(var(--os-scroll-percent-directional) * -100%));width:calc(var(--os-viewport-percent) * 100%)}.os-scrollbar-vertical .os-scrollbar-handle{right:0;top:calc(var(--os-scroll-percent-directional) * 100%);transform:translateY(calc(var(--os-scroll-percent-directional) * -100%));height:calc(var(--os-viewport-percent) * 100%)}@supports (container-type: size){.os-scrollbar-track{container-type:size}.os-scrollbar-horizontal .os-scrollbar-handle{left:auto;transform:translate(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-vertical .os-scrollbar-handle{top:auto;transform:translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle{right:auto;left:0}}.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle{right:auto;left:0}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}@media print{.os-scrollbar{display:none}}.os-scrollbar{--os-size: 0;--os-padding-perpendicular: 0;--os-padding-axis: 0;--os-track-border-radius: 0;--os-track-bg: none;--os-track-bg-hover: none;--os-track-bg-active: none;--os-track-border: none;--os-track-border-hover: none;--os-track-border-active: none;--os-handle-border-radius: 0;--os-handle-bg: none;--os-handle-bg-hover: none;--os-handle-bg-active: none;--os-handle-border: none;--os-handle-border-hover: none;--os-handle-border-active: none;--os-handle-min-size: 33px;--os-handle-max-size: none;--os-handle-perpendicular-size: 100%;--os-handle-perpendicular-size-hover: 100%;--os-handle-perpendicular-size-active: 100%;--os-handle-interactive-area-offset: 0}.os-scrollbar-track{border:var(--os-track-border);border-radius:var(--os-track-border-radius);background:var(--os-track-bg);transition:opacity .15s,background-color .15s,border-color .15s}.os-scrollbar-track:hover{border:var(--os-track-border-hover);background:var(--os-track-bg-hover)}.os-scrollbar-track:active{border:var(--os-track-border-active);background:var(--os-track-bg-active)}.os-scrollbar-handle{border:var(--os-handle-border);border-radius:var(--os-handle-border-radius);background:var(--os-handle-bg)}.os-scrollbar-handle:hover{border:var(--os-handle-border-hover);background:var(--os-handle-bg-hover)}.os-scrollbar-handle:active{border:var(--os-handle-border-active);background:var(--os-handle-bg-active)}.os-scrollbar-track:before,.os-scrollbar-handle:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;display:block}.os-scrollbar-horizontal{padding:var(--os-padding-perpendicular) var(--os-padding-axis);right:var(--os-size);height:var(--os-size)}.os-scrollbar-horizontal.os-scrollbar-rtl{left:var(--os-size);right:0}.os-scrollbar-horizontal .os-scrollbar-track:before{top:calc(var(--os-padding-perpendicular) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal .os-scrollbar-handle{min-width:var(--os-handle-min-size);max-width:var(--os-handle-max-size);height:var(--os-handle-perpendicular-size);transition:opacity .15s,background-color .15s,border-color .15s,height .15s}.os-scrollbar-horizontal .os-scrollbar-handle:before{top:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal:hover .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-horizontal:active .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-active)}.os-scrollbar-vertical{padding:var(--os-padding-axis) var(--os-padding-perpendicular);bottom:var(--os-size);width:var(--os-size)}.os-scrollbar-vertical .os-scrollbar-track:before{left:calc(var(--os-padding-perpendicular) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical .os-scrollbar-handle{min-height:var(--os-handle-min-size);max-height:var(--os-handle-max-size);width:var(--os-handle-perpendicular-size);transition:opacity .15s,background-color .15s,border-color .15s,width .15s}.os-scrollbar-vertical .os-scrollbar-handle:before{left:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before{right:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);left:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical:hover .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-vertical:active .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-active)}[data-overlayscrollbars-viewport~=measuring]>.os-scrollbar,.os-theme-none.os-scrollbar{display:none!important}.os-theme-dark,.os-theme-light{box-sizing:border-box;--os-size: 10px;--os-padding-perpendicular: 2px;--os-padding-axis: 2px;--os-track-border-radius: 10px;--os-handle-interactive-area-offset: 4px;--os-handle-border-radius: 10px}.os-theme-dark{--os-handle-bg: rgba(0, 0, 0, .44);--os-handle-bg-hover: rgba(0, 0, 0, .55);--os-handle-bg-active: rgba(0, 0, 0, .66)}.os-theme-light{--os-handle-bg: rgba(255, 255, 255, .44);--os-handle-bg-hover: rgba(255, 255, 255, .55);--os-handle-bg-active: rgba(255, 255, 255, .66)}

package/dist/index.js

@@ -3,7 +3,7 @@ import { default as p } from "./ui/a/AppContext/ContextProvider.js";
 import { default as u } from "./ui/a/AppContext/useApp.js";
 import { default as d } from "./ui/a/AppContext/useTheme.js";
 import { default as x } from "./ui/a/BlurOverlay/BlurOverlay.js";
-import { A as c, B as T, c as g, j as S, g as C, C as h, a as I, q as D, E as F, s as P, n as A, t as L, D as b, F as B, m as k, l as v, L as y, M, N as w, b as E, P as O, r as Q, k as R, Q as U, i as G, R as N, p as H, f as V, d as j, S as q, e as z, h as W, T as X, o as Z } from "./FormBuilder-Dph10A1v.js";
+import { A as c, B as T, c as g, j as S, g as C, C as h, a as I, q as D, E as F, s as A, n as P, t as L, D as b, F as B, m as k, l as v, L as y, M, N as w, b as E, P as O, r as Q, k as R, Q as U, i as G, R as N, p as H, f as V, d as j, S as q, e as z, h as W, T as X, o as Z } from "./FormBuilder-DFK61jJk.js";
 import "./ui/a/Conversation/Context.js";
 import "react";
 import { default as J } from "./ui/a/DotInfo/DotInfo.js";
@@ -20,7 +20,7 @@ import { default as Te } from "./ui/a/SVG/SVG.js";
 import { default as Se } from "./ui/a/SnapScroller/SnapScroller.js";
 import { default as he } from "./ui/a/Spinner/Spinner.js";
 import { default as De } from "./ui/a/Timestamp/Timestamp.js";
-import { default as Pe } from "./ui/a/MetaCard/MetaCard.js";
+import { default as Ae } from "./ui/a/MetaCard/MetaCard.js";
 import { default as Le } from "./ui/a/AnimatedBlobs/AnimatedBlobs.js";
 import { default as Be } from "./ui/a/Tip/Tip.js";
 import { default as ve } from "./ui/a/TextSteps/TextSteps.js";
@@ -47,10 +47,11 @@ import { default as Ta } from "./ui/f/fields/RadioInput/RadioInput.js";
 import { default as Sa } from "./ui/g/DragAndDrop/DragAndDrop.js";
 import { default as ha } from "./ui/utils/hooks/useWindowSize.js";
 import { default as Da } from "./ui/utils/hooks/useDynamicPosition.js";
-import { default as Pa } from "./ui/utils/hooks/useOutsideClick.js";
+import { default as Aa } from "./ui/utils/hooks/useOutsideClick.js";
 import { DATE_FORMATS as La, formatDate as ba, formatTime as Ba, parseDate as ka, snakeCaseToTitleCase as va } from "./ui/utils/formatting.js";
 import { applyCharacterLimit as Ma } from "./ui/utils/applyCharacterLimit.js";
-export {
+import { ScrollArea as Ea } from "./ui/utils/ScrollArea/ScrollArea.js";
+import './assets/index.css';export {
   Le as AnimatedBlobs,
   c as AnimatedGradient,
   s as AppContext,
@@ -70,9 +71,9 @@ export {
   Sa as DragAndDrop,
   D as DragAndDropFileUpload,
   F as EditorInput,
-  P as ExpandableLexicalPreview,
+  A as ExpandableLexicalPreview,
   Y as Figure,
-  A as FileUpload,
+  P as FileUpload,
   L as FormBuilder,
   b as FormDebugger,
   oa as FormDescription,
@@ -85,7 +86,7 @@ export {
   v as LinkInput,
   fe as LoadingCircle,
   y as Logo,
-  Pe as MetaCard,
+  Ae as MetaCard,
   M as Modal,
   w as Notification,
   E as NotificationStack,
@@ -103,6 +104,7 @@ export {
   N as RatingsInput,
   Me as Removable,
   Te as SVG,
+  Ea as ScrollArea,
   H as SearchDropdown,
   V as SelectInput,
   la as SelectSingle,
@@ -136,7 +138,7 @@ export {
   va as snakeCaseToTitleCase,
   u as useApp,
   Da as useDynamicPosition,
-  Pa as useOutsideClick,
+  Aa as useOutsideClick,
   d as useTheme,
   ha as useWindowSize
 };

package/dist/stories/a/AppContext.stories.js

@@ -3,7 +3,7 @@ import "react";
 import "../../ui/a/AppContext/Context.js";
 import t from "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import "../../FormBuilder-Dph10A1v.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 J = {
   title: "a/AppContext",
   component: t,
   subcomponents: {
@@ -57,7 +58,7 @@ const z = {
   argTypes: {
     // backgroundColor:{ control: 'color' },
   }
-}, J = () => /* @__PURE__ */ o(
+}, Q = () => /* @__PURE__ */ o(
   t,
   {
     config: {
@@ -82,6 +83,6 @@ const z = {
   }
 );
 export {
-  J as Base,
-  z as default
+  Q as Base,
+  J as default
 };

package/dist/stories/a/AreaChart.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-Dph10A1v.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 at = {
+import "../../ui/utils/ScrollArea/ScrollArea.js";
+const st = {
   title: "a/Charts/AreaChart",
   component: r
 }, d = [
@@ -180,5 +181,5 @@ export {
   i as Filled,
   l as SideBySide,
   g as SideBySideFilled,
-  at as default
+  st as default
 };

package/dist/stories/a/BarChart.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-Dph10A1v.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 ie = {
+import "../../ui/utils/ScrollArea/ScrollArea.js";
+const re = {
   title: "a/Charts/BarChart",
   component: i
 }, d = [
@@ -156,11 +157,11 @@ r.args = {
   colors: ["purple", "green", "orange", "blue", "red"],
   height: 400
 };
-const a = (t) => /* @__PURE__ */ p("div", { style: { display: "flex", gap: "20px" }, children: [
+const m = (t) => /* @__PURE__ */ p("div", { style: { display: "flex", gap: "20px" }, children: [
   /* @__PURE__ */ e("div", { style: { flex: 1 }, children: /* @__PURE__ */ e(i, { ...t[0] }) }),
   /* @__PURE__ */ e("div", { style: { flex: 1 }, children: /* @__PURE__ */ e(i, { ...t[1] }) })
-] }), c = a.bind({});
-c.args = [
+] }), a = m.bind({});
+a.args = [
   {
     ...r.args
   },
@@ -170,6 +171,6 @@ c.args = [
 ];
 export {
   r as Default,
-  c as SideBySide,
-  ie as default
+  a as SideBySide,
+  re as default
 };

package/dist/stories/a/BlurOverlay.stories.js

@@ -3,7 +3,7 @@ import "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import r from "../../ui/a/BlurOverlay/BlurOverlay.js";
-import "../../FormBuilder-Dph10A1v.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/BlurOverlay",
   component: r,
   subcomponents: {
@@ -77,5 +78,5 @@ i.args = {
 };
 export {
   i as Base,
-  Y as default
+  Z as default
 };

package/dist/stories/a/ContentTree.stories.js

@@ -3,7 +3,7 @@ import { useRef as a } from "react";
 import "../../ui/a/AppContext/Context.js";
 import "../../ui/a/AppContext/ContextProvider.js";
 import "../../ui/a/BlurOverlay/BlurOverlay.js";
-import { C as t } from "../../FormBuilder-Dph10A1v.js";
+import { C 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 Z = {
+import "../../ui/utils/ScrollArea/ScrollArea.js";
+const $ = {
   title: "a/ContentTree",
   component: t,
   subcomponents: {
@@ -57,7 +58,7 @@ const Z = {
   argTypes: {
     backgroundColor: { control: "color" }
   }
-}, $ = () => {
+}, ii = () => {
   const e = a(null);
   return /* @__PURE__ */ s(
     "div",
@@ -109,6 +110,6 @@ const Z = {
   );
 };
 export {
-  $ as Base,
-  Z as default
+  ii as Base,
+  $ as default
 };

package/dist/stories/a/Conversation.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 { a as e } from "../../FormBuilder-Dph10A1v.js";
+import { a as e } 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/Conversation",
   component: e,
   subcomponents: {
@@ -57,7 +58,7 @@ const Y = {
   argTypes: {
     backgroundColor: { control: "color" }
   }
-}, Z = () => /* @__PURE__ */ o(e, { children: [
+}, $ = () => /* @__PURE__ */ o(e, { children: [
   {
     message: "Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.",
     sender: "Humbl",
@@ -82,7 +83,7 @@ const Y = {
     sender: "Camille",
     from: "ours"
   }
-].map((r) => /* @__PURE__ */ o(e.Message, { ...r }, r.message)) }), $ = () => /* @__PURE__ */ o(e, { children: [
+].map((r) => /* @__PURE__ */ o(e.Message, { ...r }, r.message)) }), ee = () => /* @__PURE__ */ o(e, { children: [
   {
     message: "Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.",
     sender: "Humbl",
@@ -109,7 +110,7 @@ const Y = {
   }
 ].map((r) => /* @__PURE__ */ o(e.Message, { ...r }, r.message)) });
 export {
-  Z as Base,
-  $ as WithAttachment,
-  Y as default
+  $ as Base,
+  ee as WithAttachment,
+  Z as default
 };

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-Dph10A1v.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-Dph10A1v.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-Dph10A1v.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-Dph10A1v.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-Dph10A1v.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-Dph10A1v.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-Dph10A1v.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-Dph10A1v.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
 };