@veeqo/transfigure 1.2.6 → 1.2.7

package/dist/index90.js

@@ -1,11 +1,120 @@
-const e = "_refreshTooltip_v0eu8_1", r = "_refreshButton_v0eu8_5", t = "_refreshIndicator_v0eu8_9", o = {
-  refreshTooltip: e,
-  refreshButton: r,
-  refreshIndicator: t
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { Modal as O, Stack as h, Text as p, Button as X, Anchor as A } from "@veeqo/ui";
+import { useState as v, useMemo as f, useCallback as y } from "react";
+import { VeeqoCommon as I } from "@veeqo/components";
+import { ColumnGroup as w } from "./index94.js";
+import { Container as Y, ColumnGroupsGrid as j, VerticalSeparator as z, VerticalText as B, HeaderContainer as L, ColumnSearch as Q } from "./index95.js";
+import { DndContainer as R } from "./index96.js";
+import { ColumnItem as q } from "./index97.js";
+import { ColumnGroupIds as n } from "./index98.js";
+import { TableManagementGlyph as P } from "./index91.js";
+import { usePersistColumns as _ } from "./index99.js";
+import { filterColumnsBySearch as V } from "./index100.js";
+const { Glyph: E } = I, te = ({
+  onClose: l,
+  columnDefinitions: k,
+  hiddenColumns: s,
+  visibleColumns: m,
+  pinnedLeftColumnIds: D,
+  pinnedRightColumnIds: H
+}) => {
+  const [o, b] = v(""), i = f(() => new Map(k.map((a) => [a.id, a])), []), [t, u] = v(() => ({
+    [n.Hidden]: s,
+    [n.Visible]: m
+  })), M = f(() => {
+    const a = t[n.Visible].map((r) => i.get(`${r}`));
+    return V(a, o);
+  }, [t, i, o]), x = f(() => {
+    const a = t[n.Hidden].map((r) => i.get(`${r}`));
+    return V(a, o);
+  }, [t, i, o]), { isSavingColumns: d, saveColumns: G } = _({ pinnedLeftColumnIds: D, pinnedRightColumnIds: H }), T = () => {
+    b(""), u({
+      [n.Hidden]: s,
+      [n.Visible]: m
+    });
+  }, C = y(
+    (a) => {
+      if (b(a), !a) {
+        const r = /* @__PURE__ */ new Set([...s, ...m]);
+        u((S) => ({
+          [n.Hidden]: S[n.Hidden].filter((g) => r.has(`${g}`)),
+          [n.Visible]: S[n.Visible].filter((g) => r.has(`${g}`))
+        }));
+      }
+    },
+    [s, m]
+  ), $ = y(
+    (a) => {
+      const r = i.get(`${a}`);
+      return r ? /* @__PURE__ */ e(q, { column: r, isDragOverlay: !0 }) : null;
+    },
+    [i]
+  );
+  return /* @__PURE__ */ e(
+    O,
+    {
+      variant: "lg",
+      style: { overflowY: "hidden" },
+      shouldShow: !0,
+      onClose: () => l == null ? void 0 : l(),
+      headerSlot: /* @__PURE__ */ c(L, { children: [
+        /* @__PURE__ */ c(h, { direction: "horizontal", alignX: "between", alignY: "center", children: [
+          /* @__PURE__ */ c(h, { direction: "horizontal", alignX: "start", alignY: "center", spacing: "sm", children: [
+            /* @__PURE__ */ e(P, { height: 32, width: 32 }),
+            /* @__PURE__ */ e(p, { variant: "headingLarge", as: "h1", children: "Table management" })
+          ] }),
+          /* @__PURE__ */ e(X, { "aria-label": "Close modal", onClick: l, variant: "flat", iconSlot: /* @__PURE__ */ e(E, { name: "close" }) })
+        ] }),
+        /* @__PURE__ */ c(p, { 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(A, { href: "#", target: "_blank", children: "help guide (TODO)" }),
+          "."
+        ] }),
+        /* @__PURE__ */ e(p, { variant: "headingSmall", children: "Column management" }),
+        /* @__PURE__ */ e(
+          Q,
+          {
+            name: "column-search-query",
+            placeholder: "Search",
+            value: o,
+            onChange: C,
+            onClearClick: () => C(""),
+            fill: "100%"
+          }
+        )
+      ] }),
+      leftActions: [
+        {
+          label: "Reset",
+          onClick: T,
+          variant: "default",
+          disabled: d
+        }
+      ],
+      rightActions: [
+        {
+          label: "Cancel",
+          onClick: l,
+          variant: "default",
+          disabled: d
+        },
+        {
+          label: "Save",
+          onClick: () => G({ visibleColumns: t[n.Visible] }),
+          variant: "primary",
+          disabled: d,
+          loading: d
+        }
+      ],
+      children: /* @__PURE__ */ e(h, { spacing: "md", alignX: "stretch", children: /* @__PURE__ */ e(h, { spacing: 4, alignX: "stretch", children: /* @__PURE__ */ e(R, { items: t, setItems: u, renderDragOverlay: $, children: /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ c(j, { columns: 2, spacing: "xl", children: [
+        /* @__PURE__ */ e(w, { id: n.Visible, title: "Shown columns:", columns: M }),
+        /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(B, { children: "Drag & Drop columns" }) }),
+        /* @__PURE__ */ e(w, { id: n.Hidden, title: "Hidden columns:", columns: x })
+      ] }) }) }) }) })
+    }
+  );
 };
 export {
-  o as default,
-  r as refreshButton,
-  t as refreshIndicator,
-  e as refreshTooltip
+  te as TableManagementModal
 };

package/dist/index91.cjs

@@ -1 +1 @@
-"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("./index108.cjs"),l=require("./index109.cjs"),c=require("./index94.cjs"),u=require("./index95.cjs"),d=require("./index92.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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=({height:H=16,width:V=16})=>e.jsx("svg",{width:V,height:H,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M12.6667 3.33333V12.6667H3.33333V3.33333H12.6667ZM13.4 2H2.6C2.26667 2 2 2.26667 2 2.6V13.4C2 13.6667 2.26667 14 2.6 14H13.4C13.6667 14 14 13.6667 14 13.4V2.6C14 2.26667 13.6667 2 13.4 2ZM7.33333 4.66667H11.3333V6H7.33333V4.66667ZM7.33333 7.33333H11.3333V8.66667H7.33333V7.33333ZM7.33333 10H11.3333V11.3333H7.33333V10ZM4.66667 4.66667H6V6H4.66667V4.66667ZM4.66667 7.33333H6V8.66667H4.66667V7.33333ZM4.66667 10H6V11.3333H4.66667V10Z",fill:"#37424D"})});exports.TableManagementGlyph=t;

package/dist/index91.js

@@ -1,15 +1,21 @@
-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 "./index108.js";
-import { DroppableArea as d } from "./index109.js";
-import { ColumnItem as l } from "./index94.js";
-import { ColumnGroupIds as c } from "./index95.js";
-import { StickyText as f } from "./index92.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)) }) })
-] });
+import { jsx as H } from "react/jsx-runtime";
+const Z = ({ height: V = 16, width: M = 16 }) => /* @__PURE__ */ H(
+  "svg",
+  {
+    width: M,
+    height: V,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ H(
+      "path",
+      {
+        d: "M12.6667 3.33333V12.6667H3.33333V3.33333H12.6667ZM13.4 2H2.6C2.26667 2 2 2.26667 2 2.6V13.4C2 13.6667 2.26667 14 2.6 14H13.4C13.6667 14 14 13.6667 14 13.4V2.6C14 2.26667 13.6667 2 13.4 2ZM7.33333 4.66667H11.3333V6H7.33333V4.66667ZM7.33333 7.33333H11.3333V8.66667H7.33333V7.33333ZM7.33333 10H11.3333V11.3333H7.33333V10ZM4.66667 4.66667H6V6H4.66667V4.66667ZM4.66667 7.33333H6V8.66667H4.66667V7.33333ZM4.66667 10H6V11.3333H4.66667V10Z",
+        fill: "#37424D"
+      }
+    )
+  }
+);
 export {
-  I as ColumnGroup
+  Z as TableManagementGlyph
 };

package/dist/index92.cjs

@@ -1,104 +1 @@
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./index79.cjs"),e=i.createAllView(),t={fixedViews:[e],customViews:[],viewsMap:new Map([[e.id,e]])};exports.INITIAL_VIEWS_STATE=t;

package/dist/index92.js

@@ -1,122 +1,9 @@
-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;
-`;
+import { createAllView as i } from "./index79.js";
+const e = i(), s = {
+  fixedViews: [e],
+  customViews: [],
+  viewsMap: /* @__PURE__ */ new Map([[e.id, e]])
+};
 export {
-  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
+  s as INITIAL_VIEWS_STATE
 };

package/dist/index93.cjs

@@ -1 +1 @@
-"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("./index92.cjs"),q=require("@veeqo/ui"),C=require("./index52.cjs"),E=require("./index110.cjs"),p=require("./index111.cjs"),A=require("./index12.cjs"),b=require("./index51.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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@veeqo/ui"),r=require("./index2.cjs"),s=o=>{let e={colourPalette:t.theme.colors.secondary.blue,customTextColour:void 0};switch(o){case r.ViewStatusTypes.ERROR:e={colourPalette:t.theme.colors.secondary.red,customTextColour:void 0};break}return e};exports.getViewTheme=s;

package/dist/index93.js

@@ -1,70 +1,20 @@
-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 "./index92.js";
-import { Alert as b } from "@veeqo/ui";
-import { useModal as x } from "./index52.js";
-import { useDragHandlers as O } from "./index110.js";
-import { useCollisionDetectionStrategy as I } from "./index111.js";
-import { ErrorBoundary as R } from "./index12.js";
-import { ModalId as j } from "./index51.js";
-const B = {
-  droppable: {
-    strategy: A.Always
+import { theme as o } from "@veeqo/ui";
+import { ViewStatusTypes as r } from "./index2.js";
+const l = (t) => {
+  let e = {
+    colourPalette: o.colors.secondary.blue,
+    customTextColour: void 0
+  };
+  switch (t) {
+    case r.ERROR:
+      e = {
+        colourPalette: o.colors.secondary.red,
+        customTextColour: void 0
+      };
+      break;
   }
-}, 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
-          }
-        ) })
-      ]
-    }
-  ) });
+  return e;
 };
 export {
-  q as DndContainer
+  l as getViewTheme
 };

package/dist/index94.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("@veeqo/ui"),a=require("@veeqo/components"),n=require("./index92.cjs"),{Glyph:c}=a.VeeqoCommon,l=({column:t,isHidden:r,isDragOverlay:s})=>{const o=t.title||t.tooltip;return e.jsxs(n.ColumnItemWrapper,{direction:"horizontal",spacing:"sm",alignY:"center",isHidden:r,isDragOverlay:s,children:[e.jsx(c,{name:"drag-indicator",size:4}),t.detailed?e.jsxs(i.Stack,{spacing:"xs",children:[e.jsxs(i.Text,{variant:"body",children:[o," (detailed)"]}),e.jsx(n.DetailedText,{variant:"hintText",children:t.detailed})]}):e.jsx(i.Text,{variant:"body",children:o}),!s&&r&&e.jsx(n.VisibilityOffIcon,{size:4})]})};exports.ColumnItem=l;
+"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("./index110.cjs"),l=require("./index111.cjs"),c=require("./index97.cjs"),u=require("./index98.cjs"),d=require("./index95.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/index94.js

@@ -1,31 +1,15 @@
-import { jsxs as e, jsx as i } from "react/jsx-runtime";
-import { Stack as d, Text as a } from "@veeqo/ui";
-import { VeeqoCommon as l } from "@veeqo/components";
-import { ColumnItemWrapper as m, DetailedText as c, VisibilityOffIcon as p } from "./index92.js";
-const { Glyph: s } = l, g = ({ column: t, isHidden: r, isDragOverlay: o }) => {
-  const n = t.title || t.tooltip;
-  return /* @__PURE__ */ e(
-    m,
-    {
-      direction: "horizontal",
-      spacing: "sm",
-      alignY: "center",
-      isHidden: r,
-      isDragOverlay: o,
-      children: [
-        /* @__PURE__ */ i(s, { name: "drag-indicator", size: 4 }),
-        t.detailed ? /* @__PURE__ */ e(d, { spacing: "xs", children: [
-          /* @__PURE__ */ e(a, { variant: "body", children: [
-            n,
-            " (detailed)"
-          ] }),
-          /* @__PURE__ */ i(c, { variant: "hintText", children: t.detailed })
-        ] }) : /* @__PURE__ */ i(a, { variant: "body", children: n }),
-        !o && r && /* @__PURE__ */ i(p, { size: 4 })
-      ]
-    }
-  );
-};
+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 "./index110.js";
+import { DroppableArea as d } from "./index111.js";
+import { ColumnItem as l } from "./index97.js";
+import { ColumnGroupIds as c } from "./index98.js";
+import { StickyText as f } from "./index95.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 {
-  g as ColumnItem
+  I as ColumnGroup
 };

package/dist/index95.cjs

@@ -1 +1,104 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var i=(e=>(e.Hidden="hidden",e.Visible="visible",e))(i||{});exports.ColumnGroupIds=i;
+"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;