@veeqo/transfigure 0.0.8 → 0.0.10

package/dist/index77.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@veeqo/ui"),a=require("react"),q=require("@veeqo/components"),x=require("./index86.cjs"),o=require("./index87.cjs"),M=require("./index88.cjs"),k=require("./index89.cjs"),t=require("./index90.cjs"),I=require("./index78.cjs"),T=require("./index91.cjs"),j=require("./index92.cjs"),{Glyph:w}=q.VeeqoCommon,D=({onClose:i,columnDefintions:S,hiddenColumns:h,visibleColumns:m})=>{const[c,g]=a.useState(""),s=a.useMemo(()=>new Map(S.map(n=>[n.id,n])),[]),[u,C]=a.useState(()=>({[t.ColumnGroupIds.Hidden]:h,[t.ColumnGroupIds.Visible]:m})),b=a.useMemo(()=>{const n=u[t.ColumnGroupIds.Visible].map(l=>s.get(`${l}`));return j.filterColumnsBySearch(n,c)},[u,s,c]),y=a.useMemo(()=>{const n=u[t.ColumnGroupIds.Hidden].map(l=>s.get(`${l}`));return j.filterColumnsBySearch(n,c)},[u,s,c]),{isSavingColumns:d,saveColumns:v}=T.usePersistColumns(),G=()=>{g(""),C({[t.ColumnGroupIds.Hidden]:h,[t.ColumnGroupIds.Visible]:m})},p=a.useCallback(n=>{g(n)},[]),f=a.useCallback(n=>{const l=s.get(`${n}`);return l?e.jsx(k.ColumnItem,{column:l,isDragOverlay:!0}):null},[s]);return e.jsx(r.Modal,{variant:"lg",style:{overflowY:"hidden"},shouldShow:!0,onClose:()=>i==null?void 0:i(),headerSlot:e.jsxs(o.HeaderContainer,{children:[e.jsxs(r.Stack,{direction:"horizontal",alignX:"between",alignY:"center",children:[e.jsxs(r.Stack,{direction:"horizontal",alignX:"start",alignY:"center",spacing:"sm",children:[e.jsx(I.TableManagementGlyph,{height:32,width:32}),e.jsx(r.Text,{variant:"headingLarge",as:"h1",children:"Table management"})]}),e.jsx(r.Button,{"aria-label":"Close modal",onClick:i,variant:"flat",iconSlot:e.jsx(w,{name:"close"})})]}),e.jsxs(r.Text,{variant:"subheadingMedium",children:["Show, hide, or change the order of the columns in the view, so you always see the data that's most important to you. Learn more with our"," ",e.jsx(r.Anchor,{href:"#",target:"_blank",children:"help guide (TODO)"}),"."]}),e.jsx(r.Text,{variant:"headingSmall",children:"Column management"}),e.jsx(o.ColumnSearch,{name:"column-search-query",placeholder:"Search",value:c,onChange:p,onClearClick:()=>p(""),fill:"100%"})]}),leftActions:[{label:"Reset",onClick:G,variant:"default",disabled:d}],rightActions:[{label:"Cancel",onClick:i,variant:"default",disabled:d},{label:"Save",onClick:()=>v({visibleColumns:m}),variant:"primary",disabled:d,loading:d}],children:e.jsx(r.Stack,{spacing:"md",alignX:"stretch",children:e.jsx(r.Stack,{spacing:4,alignX:"stretch",children:e.jsx(M.DndContainer,{items:u,setItems:C,renderDragOverlay:f,children:e.jsx(o.Container,{children:e.jsxs(o.ColumnGroupsGrid,{columns:2,spacing:"xl",children:[e.jsx(x.ColumnGroup,{id:t.ColumnGroupIds.Visible,title:"Shown columns:",columns:b}),e.jsx(o.VerticalSeparator,{children:e.jsx(o.VerticalText,{children:"Drag & Drop columns"})}),e.jsx(x.ColumnGroup,{id:t.ColumnGroupIds.Hidden,title:"Hidden columns:",columns:y})]})})})})})})};exports.TableManagementModal=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@veeqo/ui"),s=require("react"),k=require("@veeqo/components"),x=require("./index79.cjs"),i=require("./index80.cjs"),I=require("./index81.cjs"),T=require("./index82.cjs"),t=require("./index83.cjs"),w=require("./index78.cjs"),D=require("./index84.cjs"),b=require("./index85.cjs"),{Glyph:V}=k.VeeqoCommon,H=({onClose:c,columnDefintions:j,hiddenColumns:m,visibleColumns:h,pinnedLeftColumnIds:S,pinnedRightColumnIds:y})=>{const[u,g]=s.useState(""),a=s.useMemo(()=>new Map(j.map(n=>[n.id,n])),[]),[l,C]=s.useState(()=>({[t.ColumnGroupIds.Hidden]:m,[t.ColumnGroupIds.Visible]:h})),v=s.useMemo(()=>{const n=l[t.ColumnGroupIds.Visible].map(o=>a.get(`${o}`));return b.filterColumnsBySearch(n,u)},[l,a,u]),G=s.useMemo(()=>{const n=l[t.ColumnGroupIds.Hidden].map(o=>a.get(`${o}`));return b.filterColumnsBySearch(n,u)},[l,a,u]),{isSavingColumns:d,saveColumns:f}=D.usePersistColumns({pinnedLeftColumnIds:S,pinnedRightColumnIds:y}),q=()=>{g(""),C({[t.ColumnGroupIds.Hidden]:m,[t.ColumnGroupIds.Visible]:h})},p=s.useCallback(n=>{g(n)},[]),M=s.useCallback(n=>{const o=a.get(`${n}`);return o?e.jsx(T.ColumnItem,{column:o,isDragOverlay:!0}):null},[a]);return e.jsx(r.Modal,{variant:"lg",style:{overflowY:"hidden"},shouldShow:!0,onClose:()=>c==null?void 0:c(),headerSlot:e.jsxs(i.HeaderContainer,{children:[e.jsxs(r.Stack,{direction:"horizontal",alignX:"between",alignY:"center",children:[e.jsxs(r.Stack,{direction:"horizontal",alignX:"start",alignY:"center",spacing:"sm",children:[e.jsx(w.TableManagementGlyph,{height:32,width:32}),e.jsx(r.Text,{variant:"headingLarge",as:"h1",children:"Table management"})]}),e.jsx(r.Button,{"aria-label":"Close modal",onClick:c,variant:"flat",iconSlot:e.jsx(V,{name:"close"})})]}),e.jsxs(r.Text,{variant:"subheadingMedium",children:["Show, hide, or change the order of the columns in the view, so you always see the data that's most important to you. Learn more with our"," ",e.jsx(r.Anchor,{href:"#",target:"_blank",children:"help guide (TODO)"}),"."]}),e.jsx(r.Text,{variant:"headingSmall",children:"Column management"}),e.jsx(i.ColumnSearch,{name:"column-search-query",placeholder:"Search",value:u,onChange:p,onClearClick:()=>p(""),fill:"100%"})]}),leftActions:[{label:"Reset",onClick:q,variant:"default",disabled:d}],rightActions:[{label:"Cancel",onClick:c,variant:"default",disabled:d},{label:"Save",onClick:()=>f({visibleColumns:l[t.ColumnGroupIds.Visible]}),variant:"primary",disabled:d,loading:d}],children:e.jsx(r.Stack,{spacing:"md",alignX:"stretch",children:e.jsx(r.Stack,{spacing:4,alignX:"stretch",children:e.jsx(I.DndContainer,{items:l,setItems:C,renderDragOverlay:M,children:e.jsx(i.Container,{children:e.jsxs(i.ColumnGroupsGrid,{columns:2,spacing:"xl",children:[e.jsx(x.ColumnGroup,{id:t.ColumnGroupIds.Visible,title:"Shown columns:",columns:v}),e.jsx(i.VerticalSeparator,{children:e.jsx(i.VerticalText,{children:"Drag & Drop columns"})}),e.jsx(x.ColumnGroup,{id:t.ColumnGroupIds.Hidden,title:"Hidden columns:",columns:G})]})})})})})})};exports.TableManagementModal=H;

package/dist/index77.js

@@ -1,86 +1,88 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { Modal as G, Stack as m, Text as h, Button as H, Anchor as T } from "@veeqo/ui";
-import { useState as b, useMemo as u, useCallback as S } from "react";
-import { VeeqoCommon as O } from "@veeqo/components";
-import { ColumnGroup as v } from "./index86.js";
-import { Container as X, ColumnGroupsGrid as A, VerticalSeparator as I, VerticalText as Y, HeaderContainer as $, ColumnSearch as j } from "./index87.js";
-import { DndContainer as q } from "./index88.js";
-import { ColumnItem as z } from "./index89.js";
-import { ColumnGroupIds as r } from "./index90.js";
-import { TableManagementGlyph as B } from "./index78.js";
-import { usePersistColumns as L } from "./index91.js";
-import { filterColumnsBySearch as y } from "./index92.js";
-const { Glyph: Q } = O, ne = ({
-  onClose: i,
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { Modal as T, Stack as m, Text as d, Button as O, Anchor as X } from "@veeqo/ui";
+import { useState as b, useMemo as h, useCallback as v } from "react";
+import { VeeqoCommon as A } from "@veeqo/components";
+import { ColumnGroup as S } from "./index79.js";
+import { Container as I, ColumnGroupsGrid as Y, VerticalSeparator as $, VerticalText as j, HeaderContainer as q, ColumnSearch as z } from "./index80.js";
+import { DndContainer as B } from "./index81.js";
+import { ColumnItem as L } from "./index82.js";
+import { ColumnGroupIds as r } from "./index83.js";
+import { TableManagementGlyph as Q } from "./index78.js";
+import { usePersistColumns as R } from "./index84.js";
+import { filterColumnsBySearch as y } from "./index85.js";
+const { Glyph: P } = A, ae = ({
+  onClose: l,
   columnDefintions: w,
-  hiddenColumns: g,
-  visibleColumns: d
+  hiddenColumns: u,
+  visibleColumns: g,
+  pinnedLeftColumnIds: k,
+  pinnedRightColumnIds: D
 }) => {
-  const [l, p] = b(""), a = u(
+  const [o, p] = b(""), a = h(
     () => new Map(w.map((n) => [n.id, n])),
     []
-  ), [o, f] = b(() => ({
-    [r.Hidden]: g,
-    [r.Visible]: d
-  })), k = u(() => {
-    const n = o[r.Visible].map((t) => a.get(`${t}`));
-    return y(n, l);
-  }, [o, a, l]), D = u(() => {
-    const n = o[r.Hidden].map((t) => a.get(`${t}`));
-    return y(n, l);
-  }, [o, a, l]), { isSavingColumns: s, saveColumns: M } = L(), V = () => {
+  ), [i, f] = b(() => ({
+    [r.Hidden]: u,
+    [r.Visible]: g
+  })), M = h(() => {
+    const n = i[r.Visible].map((t) => a.get(`${t}`));
+    return y(n, o);
+  }, [i, a, o]), V = h(() => {
+    const n = i[r.Hidden].map((t) => a.get(`${t}`));
+    return y(n, o);
+  }, [i, a, o]), { isSavingColumns: c, saveColumns: x } = R({ pinnedLeftColumnIds: k, pinnedRightColumnIds: D }), G = () => {
     p(""), f({
-      [r.Hidden]: g,
-      [r.Visible]: d
+      [r.Hidden]: u,
+      [r.Visible]: g
     });
-  }, C = S(
+  }, C = v(
     (n) => {
       p(n);
     },
     []
-  ), x = S(
+  ), H = v(
     (n) => {
       const t = a.get(`${n}`);
-      return t ? /* @__PURE__ */ e(z, { column: t, isDragOverlay: !0 }) : null;
+      return t ? /* @__PURE__ */ e(L, { column: t, isDragOverlay: !0 }) : null;
     },
     [a]
   );
   return /* @__PURE__ */ e(
-    G,
+    T,
     {
       variant: "lg",
       style: { overflowY: "hidden" },
       shouldShow: !0,
-      onClose: () => i == null ? void 0 : i(),
-      headerSlot: /* @__PURE__ */ c($, { children: [
-        /* @__PURE__ */ c(m, { direction: "horizontal", alignX: "between", alignY: "center", children: [
-          /* @__PURE__ */ c(m, { direction: "horizontal", alignX: "start", alignY: "center", spacing: "sm", children: [
-            /* @__PURE__ */ e(B, { height: 32, width: 32 }),
-            /* @__PURE__ */ e(h, { variant: "headingLarge", as: "h1", children: "Table management" })
+      onClose: () => l == null ? void 0 : l(),
+      headerSlot: /* @__PURE__ */ s(q, { children: [
+        /* @__PURE__ */ s(m, { direction: "horizontal", alignX: "between", alignY: "center", children: [
+          /* @__PURE__ */ s(m, { direction: "horizontal", alignX: "start", alignY: "center", spacing: "sm", children: [
+            /* @__PURE__ */ e(Q, { height: 32, width: 32 }),
+            /* @__PURE__ */ e(d, { variant: "headingLarge", as: "h1", children: "Table management" })
           ] }),
           /* @__PURE__ */ e(
-            H,
+            O,
             {
               "aria-label": "Close modal",
-              onClick: i,
+              onClick: l,
               variant: "flat",
-              iconSlot: /* @__PURE__ */ e(Q, { name: "close" })
+              iconSlot: /* @__PURE__ */ e(P, { name: "close" })
             }
           )
         ] }),
-        /* @__PURE__ */ c(h, { variant: "subheadingMedium", children: [
+        /* @__PURE__ */ s(d, { variant: "subheadingMedium", children: [
           "Show, hide, or change the order of the columns in the view, so you always see the data that's most important to you. Learn more with our",
           " ",
-          /* @__PURE__ */ e(T, { href: "#", target: "_blank", children: "help guide (TODO)" }),
+          /* @__PURE__ */ e(X, { href: "#", target: "_blank", children: "help guide (TODO)" }),
           "."
         ] }),
-        /* @__PURE__ */ e(h, { variant: "headingSmall", children: "Column management" }),
+        /* @__PURE__ */ e(d, { variant: "headingSmall", children: "Column management" }),
         /* @__PURE__ */ e(
-          j,
+          z,
           {
             name: "column-search-query",
             placeholder: "Search",
-            value: l,
+            value: o,
             onChange: C,
             onClearClick: () => C(""),
             fill: "100%"
@@ -90,42 +92,42 @@ const { Glyph: Q } = O, ne = ({
       leftActions: [
         {
           label: "Reset",
-          onClick: V,
+          onClick: G,
           variant: "default",
-          disabled: s
+          disabled: c
         }
       ],
       rightActions: [
         {
           label: "Cancel",
-          onClick: i,
+          onClick: l,
           variant: "default",
-          disabled: s
+          disabled: c
         },
         {
           label: "Save",
-          onClick: () => M({ visibleColumns: d }),
+          onClick: () => x({ visibleColumns: i[r.Visible] }),
           variant: "primary",
-          disabled: s,
-          loading: s
+          disabled: c,
+          loading: c
         }
       ],
-      children: /* @__PURE__ */ e(m, { spacing: "md", alignX: "stretch", children: /* @__PURE__ */ e(m, { spacing: 4, alignX: "stretch", children: /* @__PURE__ */ e(q, { items: o, setItems: f, renderDragOverlay: x, children: /* @__PURE__ */ e(X, { children: /* @__PURE__ */ c(A, { columns: 2, spacing: "xl", children: [
+      children: /* @__PURE__ */ e(m, { spacing: "md", alignX: "stretch", children: /* @__PURE__ */ e(m, { spacing: 4, alignX: "stretch", children: /* @__PURE__ */ e(B, { items: i, setItems: f, renderDragOverlay: H, children: /* @__PURE__ */ e(I, { children: /* @__PURE__ */ s(Y, { columns: 2, spacing: "xl", children: [
         /* @__PURE__ */ e(
-          v,
+          S,
           {
             id: r.Visible,
             title: "Shown columns:",
-            columns: k
+            columns: M
           }
         ),
-        /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(Y, { children: "Drag & Drop columns" }) }),
+        /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(j, { children: "Drag & Drop columns" }) }),
         /* @__PURE__ */ e(
-          v,
+          S,
           {
             id: r.Hidden,
             title: "Hidden columns:",
-            columns: D
+            columns: V
           }
         )
       ] }) }) }) }) })
@@ -133,5 +135,5 @@ const { Glyph: Q } = O, ne = ({
   );
 };
 export {
-  ne as TableManagementModal
+  ae as TableManagementModal
 };

package/dist/index79.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("@veeqo/ui"),r=({shouldShow:a,viewName:n,onCancel:t,onDelete:o})=>e.jsx(i.Modal,{headerTitle:`Delete '${n}' view?`,"data-testid":"act-react-listing-custom-confirmation-popup",variant:"sm",shouldShow:a,onClose:t,rightActions:[{className:"act-react-listing-custom-confirmation-popup-cancel",label:"Cancel",onClick:t,variant:"default"},{className:"act-react-listing-custom-confirmation-popup-delete",label:"Delete",onClick:o,variant:"primaryDestructive"}],showHeaderCloseButton:!0,children:e.jsx(i.Text,{variant:"body",children:"This cannot be undone."})});exports.Confirmation=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("@veeqo/ui"),s=require("@dnd-kit/sortable"),a=require("./index94.cjs"),l=require("./index95.cjs"),c=require("./index82.cjs"),u=require("./index83.cjs"),d=require("./index80.cjs"),m=({id:r,title:n,columns:i})=>e.jsxs(o.Stack,{spacing:"sm",alignX:"stretch",children:[e.jsx(d.StickyText,{variant:"bodyBold",children:n}),e.jsx(s.SortableContext,{id:r,items:i,strategy:s.verticalListSortingStrategy,children:e.jsx(l.DroppableArea,{id:r,spacing:"sm",alignX:"stretch",children:i.map(t=>e.jsx(a.SortableItem,{id:t.id,children:e.jsx(c.ColumnItem,{column:t,isHidden:r===u.ColumnGroupIds.Hidden})},t.id))})})]});exports.ColumnGroup=m;

package/dist/index79.js

@@ -1,31 +1,15 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Modal as n, Text as r } from "@veeqo/ui";
-const s = ({ shouldShow: a, viewName: i, onCancel: t, onDelete: o }) => /* @__PURE__ */ e(
-  n,
-  {
-    headerTitle: `Delete '${i}' view?`,
-    "data-testid": "act-react-listing-custom-confirmation-popup",
-    variant: "sm",
-    shouldShow: a,
-    onClose: t,
-    rightActions: [
-      {
-        className: "act-react-listing-custom-confirmation-popup-cancel",
-        label: "Cancel",
-        onClick: t,
-        variant: "default"
-      },
-      {
-        className: "act-react-listing-custom-confirmation-popup-delete",
-        label: "Delete",
-        onClick: o,
-        variant: "primaryDestructive"
-      }
-    ],
-    showHeaderCloseButton: !0,
-    children: /* @__PURE__ */ e(r, { variant: "body", children: "This cannot be undone." })
-  }
-);
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { Stack as n } from "@veeqo/ui";
+import { SortableContext as p, verticalListSortingStrategy as a } from "@dnd-kit/sortable";
+import { SortableItem as s } from "./index94.js";
+import { DroppableArea as d } from "./index95.js";
+import { ColumnItem as l } from "./index82.js";
+import { ColumnGroupIds as c } from "./index83.js";
+import { StickyText as f } from "./index80.js";
+const I = ({ id: t, title: e, columns: o }) => /* @__PURE__ */ m(n, { spacing: "sm", alignX: "stretch", children: [
+  /* @__PURE__ */ r(f, { variant: "bodyBold", children: e }),
+  /* @__PURE__ */ r(p, { id: t, items: o, strategy: a, children: /* @__PURE__ */ r(d, { id: t, spacing: "sm", alignX: "stretch", children: o.map((i) => /* @__PURE__ */ r(s, { id: i.id, children: /* @__PURE__ */ r(l, { column: i, isHidden: t === c.Hidden }) }, i.id)) }) })
+] });
 export {
-  s as Confirmation
+  I as ColumnGroup
 };

package/dist/index80.cjs

@@ -1 +1,104 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("@veeqo/ui"),t=require("./index95.cjs"),a=i.theme.colors.secondary.blue.base,o=({mainEntityLabelPlural:r="",onClick:n})=>e.jsx(t.Notification,{className:"act-react-listing-custom-notification-new-draft",children:e.jsx(t.Pill,{children:e.jsxs(i.Stack,{direction:"horizontal",alignY:"center",children:[e.jsx(t.Glyph,{name:"info",color:a}),e.jsxs(t.Wrap,{children:[e.jsx(t.Text,{variant:"body",margin:"0 4px 0 0",children:"You are currently in a"}),e.jsx(t.Bold,{variant:"bodyBoldDark",children:"draft view"}),e.jsx(t.Hint,{variant:"hintText",children:`Apply filters and create a custom view of your ${r.toLowerCase()}`})]}),e.jsx(t.Button,{className:"act-react-listing-custom-notification-save-draft-btn",variant:"primary",onClick:n,size:"sm",children:"Create view"})]})})});exports.InfoPill=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("styled-components"),e=require("@veeqo/ui"),a=require("@veeqo/components"),i=o=>o&&o.__esModule?o:{default:o},t=i(l),{Glyph:n}=a.VeeqoCommon,s=t.default.div`
+  width: 1px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: 1px solid ${e.theme.colors.neutral.grey.dark};
+  height: 100%;
+  margin-top: 40px;
+`,c=t.default(e.Text)`
+  writing-mode: vertical-rl;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: white;
+  padding: 30px 0;
+  text-align: center;
+  font-size: 10px;
+  color: ${e.theme.colors.neutral.ink.lightest};
+  height: max-content;
+`,d=t.default(e.Text)`
+  position: sticky;
+  top: 0;
+  background: #ffffff;
+  padding-bottom: ${e.theme.sizes[2]};
+  z-index: 1;
+`,u=t.default(e.Text)`
+  color: ${e.theme.colors.neutral.ink.light};
+`,g=t.default(e.Grid)`
+  // overflow-y: auto;
+  position: unset;
+`,r=t.default(n).attrs(()=>({name:"visibility-off"}))`
+  margin-left: auto;
+`,p=t.default(e.Stack)`
+  border-radius: 4px;
+  padding: 8px 12px;
+  background: #ffffff;
+  border: 1px solid ${e.theme.colors.neutral.ink.lightest};
+  transition: all ease 200ms;
+
+  ${({isHidden:o})=>o&&`
+      ${e.Text} {
+        color: ${e.theme.colors.neutral.ink.light};
+      }
+    `}
+
+  &:hover {
+    color: ${e.theme.colors.secondary.blue.base};
+    background: ${e.theme.colors.neutral.grey.lightest};
+    border: 1px solid ${e.theme.colors.neutral.grey.light};
+
+    ${e.Text} {
+      color: ${e.theme.colors.secondary.blue.base};
+    }
+
+    ${r} {
+      color: ${e.theme.colors.neutral.ink.light};
+    }
+  }
+
+  ${({isDragOverlay:o})=>o&&`
+      color: ${e.theme.colors.secondary.blue.base};
+      background: ${e.theme.colors.neutral.grey.lightest};
+      border: 1px solid ${e.theme.colors.neutral.grey.light};
+      cursor: grabbing;
+
+      ${e.Text} {
+        color: ${e.theme.colors.secondary.blue.base};
+      }
+    `}
+`,h=t.default.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  width: calc(100% - 2px);
+  border-radius: 4px;
+  border: 1px dashed ${e.theme.colors.neutral.grey.dark};
+  background: ${e.theme.colors.neutral.grey.lightest};
+`,f=t.default(e.Stack)`
+  flex: 1;
+  padding: 0;
+`,m=t.default(e.Search)`
+  input {
+    height: 40px;
+    box-sizing: border-box;
+  }
+
+  svg {
+    width: 16px;
+  }
+`,b=t.default.div`
+  position: relative;
+  min-height: 500px;
+`,x=t.default(e.BaseContainer)`
+  display: flex;
+  flex-direction: column;
+  gap: ${e.theme.sizes.base};
+  padding: ${e.theme.sizes.md};
+`,y=t.default.dialog`
+  display: contents;
+`;exports.ColumnGroupsGrid=g;exports.ColumnItemWrapper=p;exports.ColumnSearch=m;exports.Container=b;exports.DetailedText=u;exports.DndDragOverlayDialog=y;exports.DraggingOverlay=h;exports.DroppableAreaStack=f;exports.HeaderContainer=x;exports.StickyText=d;exports.VerticalSeparator=s;exports.VerticalText=c;exports.VisibilityOffIcon=r;

package/dist/index80.js

@@ -1,24 +1,122 @@
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
-import { Stack as e, theme as o } from "@veeqo/ui";
-import { Notification as n, Pill as c, Glyph as l, Wrap as s, Text as d, Bold as m, Hint as f, Button as h } from "./index95.js";
-const p = o.colors.secondary.blue.base, x = ({ mainEntityLabelPlural: r = "", onClick: a }) => /* @__PURE__ */ t(n, { className: "act-react-listing-custom-notification-new-draft", children: /* @__PURE__ */ t(c, { children: /* @__PURE__ */ i(e, { direction: "horizontal", alignY: "center", children: [
-  /* @__PURE__ */ t(l, { name: "info", color: p }),
-  /* @__PURE__ */ i(s, { children: [
-    /* @__PURE__ */ t(d, { variant: "body", margin: "0 4px 0 0", children: "You are currently in a" }),
-    /* @__PURE__ */ t(m, { variant: "bodyBoldDark", children: "draft view" }),
-    /* @__PURE__ */ t(f, { variant: "hintText", children: `Apply filters and create a custom view of your ${r.toLowerCase()}` })
-  ] }),
-  /* @__PURE__ */ t(
-    h,
-    {
-      className: "act-react-listing-custom-notification-save-draft-btn",
-      variant: "primary",
-      onClick: a,
-      size: "sm",
-      children: "Create view"
+import r from "styled-components";
+import { Grid as l, theme as o, Text as t, BaseContainer as n, Search as s, Stack as i } from "@veeqo/ui";
+import { VeeqoCommon as a } from "@veeqo/components";
+const { Glyph: c } = a, b = r.div`
+  width: 1px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: 1px solid ${o.colors.neutral.grey.dark};
+  height: 100%;
+  margin-top: 40px;
+`, f = r(t)`
+  writing-mode: vertical-rl;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: white;
+  padding: 30px 0;
+  text-align: center;
+  font-size: 10px;
+  color: ${o.colors.neutral.ink.lightest};
+  height: max-content;
+`, h = r(t)`
+  position: sticky;
+  top: 0;
+  background: #ffffff;
+  padding-bottom: ${o.sizes[2]};
+  z-index: 1;
+`, x = r(t)`
+  color: ${o.colors.neutral.ink.light};
+`, m = r(l)`
+  // overflow-y: auto;
+  position: unset;
+`, d = r(c).attrs(() => ({ name: "visibility-off" }))`
+  margin-left: auto;
+`, $ = r(i)`
+  border-radius: 4px;
+  padding: 8px 12px;
+  background: #ffffff;
+  border: 1px solid ${o.colors.neutral.ink.lightest};
+  transition: all ease 200ms;
+
+  ${({ isHidden: e }) => e && `
+      ${t} {
+        color: ${o.colors.neutral.ink.light};
+      }
+    `}
+
+  &:hover {
+    color: ${o.colors.secondary.blue.base};
+    background: ${o.colors.neutral.grey.lightest};
+    border: 1px solid ${o.colors.neutral.grey.light};
+
+    ${t} {
+      color: ${o.colors.secondary.blue.base};
     }
-  )
-] }) }) });
+
+    ${d} {
+      color: ${o.colors.neutral.ink.light};
+    }
+  }
+
+  ${({ isDragOverlay: e }) => e && `
+      color: ${o.colors.secondary.blue.base};
+      background: ${o.colors.neutral.grey.lightest};
+      border: 1px solid ${o.colors.neutral.grey.light};
+      cursor: grabbing;
+
+      ${t} {
+        color: ${o.colors.secondary.blue.base};
+      }
+    `}
+`, y = r.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  width: calc(100% - 2px);
+  border-radius: 4px;
+  border: 1px dashed ${o.colors.neutral.grey.dark};
+  background: ${o.colors.neutral.grey.lightest};
+`, k = r(i)`
+  flex: 1;
+  padding: 0;
+`, v = r(s)`
+  input {
+    height: 40px;
+    box-sizing: border-box;
+  }
+
+  svg {
+    width: 16px;
+  }
+`, C = r.div`
+  position: relative;
+  min-height: 500px;
+`, w = r(n)`
+  display: flex;
+  flex-direction: column;
+  gap: ${o.sizes.base};
+  padding: ${o.sizes.md};
+`, z = r.dialog`
+  display: contents;
+`;
 export {
-  x as InfoPill
+  m as ColumnGroupsGrid,
+  $ as ColumnItemWrapper,
+  v as ColumnSearch,
+  C as Container,
+  x as DetailedText,
+  z as DndDragOverlayDialog,
+  y as DraggingOverlay,
+  k as DroppableAreaStack,
+  w as HeaderContainer,
+  h as StickyText,
+  b as VerticalSeparator,
+  f as VerticalText,
+  d as VisibilityOffIcon
 };

package/dist/index81.cjs

@@ -1,19 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),e=require("@veeqo/ui"),s=t=>t&&t.__esModule?t:{default:t},o=s(r),i=o.default(e.Button).attrs(()=>({role:"option",variant:"flat"}))`
-  margin: ${e.theme.sizes.xs};
-  min-width: 180px;
-  justify-content: flex-start;
-  font-size: ${e.theme.text.body.fontSize};
-
-  &:hover {
-    background-color: ${e.theme.colors.neutral.grey.lightest};
-    color: ${e.theme.colors.secondary.blue.base};
-    cursor: pointer;
-  }
-`,n=o.default(e.Card.Surface).attrs(()=>({role:"listbox",elevation:4}))`
-  margin-top: ${e.theme.sizes.xs};
-  background-color: white;
-`,l=o.default.hr`
-  width: 100%;
-  border-top: 1px solid ${e.theme.colors.neutral.grey.dark};
-  margin: 0;
-`;exports.Divider=l;exports.Item=i;exports.MenuItems=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),e=require("@dnd-kit/core"),S=require("@dnd-kit/sortable"),h=require("./index80.cjs"),q=require("@veeqo/ui"),C=require("./index48.cjs"),E=require("./index96.cjs"),p=require("./index97.cjs"),A=require("./index10.cjs"),b=require("./index47.cjs"),x={droppable:{strategy:e.MeasuringStrategy.Always}},M={sideEffects:e.defaultDropAnimationSideEffects({styles:{active:{opacity:"0.5"}}})},j=({items:o,setItems:s,children:a,renderDragOverlay:n})=>{const{closeModal:i,openModal:l}=C.useModal(),c=e.useSensors(e.useSensor(e.PointerSensor),e.useSensor(e.KeyboardSensor,{coordinateGetter:S.sortableKeyboardCoordinates})),{activeId:t,handleDragCancel:d,handleDragEnd:u,handleDragOver:g,handleDragStart:D}=E.useDragHandlers({items:o,setItems:s}),{collisionDetectionStrategy:y}=p.useCollisionDetectionStrategy({items:o});return r.jsx(A.ErrorBoundary,{errorComponent:r.jsx(q.Alert,{variant:"error",title:"An error occurred",rightActions:[{label:"Reload",onClick:()=>{i(),l(b.ModalId.ORDERS_TABLE_MANAGEMENT)}}]}),children:r.jsxs(e.DndContext,{sensors:c,measuring:x,collisionDetection:y,onDragStart:D,onDragOver:g,onDragEnd:u,onDragCancel:d,children:[a,r.jsx(h.DndDragOverlayDialog,{open:!0,children:r.jsx(e.DragOverlay,{dropAnimation:M,zIndex:2001,children:t&&n?n(t):null})})]})})};exports.DndContainer=j;

package/dist/index81.js

@@ -1,26 +1,70 @@
-import t from "styled-components";
-import { theme as o, Card as r, Button as e } from "@veeqo/ui";
-const n = t(e).attrs(() => ({ role: "option", variant: "flat" }))`
-  margin: ${o.sizes.xs};
-  min-width: 180px;
-  justify-content: flex-start;
-  font-size: ${o.text.body.fontSize};
-
-  &:hover {
-    background-color: ${o.colors.neutral.grey.lightest};
-    color: ${o.colors.secondary.blue.base};
-    cursor: pointer;
+import { jsx as r, jsxs as f } from "react/jsx-runtime";
+import { useSensors as u, useSensor as n, PointerSensor as y, KeyboardSensor as S, DndContext as h, MeasuringStrategy as A, DragOverlay as E, defaultDropAnimationSideEffects as C } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates as M } from "@dnd-kit/sortable";
+import { DndDragOverlayDialog as v } from "./index80.js";
+import { Alert as b } from "@veeqo/ui";
+import { useModal as x } from "./index48.js";
+import { useDragHandlers as O } from "./index96.js";
+import { useCollisionDetectionStrategy as I } from "./index97.js";
+import { ErrorBoundary as R } from "./index10.js";
+import { ModalId as j } from "./index47.js";
+const B = {
+  droppable: {
+    strategy: A.Always
   }
-`, a = t(r.Surface).attrs(() => ({ role: "listbox", elevation: 4 }))`
-  margin-top: ${o.sizes.xs};
-  background-color: white;
-`, l = t.hr`
-  width: 100%;
-  border-top: 1px solid ${o.colors.neutral.grey.dark};
-  margin: 0;
-`;
+}, G = {
+  sideEffects: C({
+    styles: {
+      active: {
+        opacity: "0.5"
+      }
+    }
+  })
+}, q = ({
+  items: o,
+  setItems: a,
+  children: i,
+  renderDragOverlay: e
+}) => {
+  const { closeModal: s, openModal: l } = x(), d = u(
+    n(y),
+    n(S, {
+      coordinateGetter: M
+    })
+  ), { activeId: t, handleDragCancel: c, handleDragEnd: m, handleDragOver: p, handleDragStart: D } = O({ items: o, setItems: a }), { collisionDetectionStrategy: g } = I({
+    items: o
+  });
+  return /* @__PURE__ */ r(R, { errorComponent: /* @__PURE__ */ r(b, { variant: "error", title: "An error occurred", rightActions: [
+    {
+      label: "Reload",
+      onClick: () => {
+        s(), l(j.ORDERS_TABLE_MANAGEMENT);
+      }
+    }
+  ] }), children: /* @__PURE__ */ f(
+    h,
+    {
+      sensors: d,
+      measuring: B,
+      collisionDetection: g,
+      onDragStart: D,
+      onDragOver: p,
+      onDragEnd: m,
+      onDragCancel: c,
+      children: [
+        i,
+        /* @__PURE__ */ r(v, { open: !0, children: /* @__PURE__ */ r(
+          E,
+          {
+            dropAnimation: G,
+            zIndex: 2001,
+            children: t && e ? e(t) : null
+          }
+        ) })
+      ]
+    }
+  ) });
+};
 export {
-  l as Divider,
-  n as Item,
-  a as MenuItems
+  q as DndContainer
 };