@aivenio/aquarium 0.0.1 → 1.0.0

package/dist/system.cjs

@@ -1301,7 +1301,6 @@ __export(system_exports, {
   Popover: () => Popover2,
   PopoverDialog: () => PopoverDialog2,
   Portal: () => Portal,
-  Positioner: () => Positioner,
   PositionerPlacement: () => PositionerPlacement,
   PrimaryButton: () => PrimaryButton,
   PrimaryDropdownButton: () => PrimaryDropdownButton,
@@ -1312,6 +1311,7 @@ __export(system_exports, {
   SecondaryButton: () => SecondaryButton,
   SecondaryDropdownButton: () => SecondaryDropdownButton,
   SecondaryGhostButton: () => SecondaryGhostButton,
+  Section: () => Section3,
   SegmentedControl: () => SegmentedControl,
   SegmentedControlGroup: () => SegmentedControlGroup,
   Select: () => Select2,
@@ -1354,6 +1354,7 @@ __export(system_exports, {
   isOutOfBounds: () => isOutOfBounds,
   placementOrder: () => placementOrder,
   theme: () => import_resolveTheme2.theme,
+  usePagination: () => usePagination,
   usePopoverContext: () => usePopoverContext,
   useScrollTarget: () => useScrollTarget,
   useTableSelect: () => useTableSelect,
@@ -1425,7 +1426,6 @@ __export(components_exports, {
   Popover: () => Popover2,
   PopoverDialog: () => PopoverDialog2,
   Portal: () => Portal,
-  Positioner: () => Positioner,
   PrimaryButton: () => PrimaryButton,
   PrimaryDropdownButton: () => PrimaryDropdownButton,
   ProgressBar: () => ProgressBar2,
@@ -1435,6 +1435,7 @@ __export(components_exports, {
   SecondaryButton: () => SecondaryButton,
   SecondaryDropdownButton: () => SecondaryDropdownButton,
   SecondaryGhostButton: () => SecondaryGhostButton,
+  Section: () => Section3,
   SegmentedControl: () => SegmentedControl,
   SegmentedControlGroup: () => SegmentedControlGroup,
   Select: () => Select2,
@@ -1459,6 +1460,7 @@ __export(components_exports, {
   asPopoverButton: () => asPopoverButton,
   asTabItem: () => asTabItem,
   createTabsComponent: () => createTabsComponent,
+  usePagination: () => usePagination,
   usePopoverContext: () => usePopoverContext,
   useScrollTarget: () => useScrollTarget,
   useTableSelect: () => useTableSelect,
@@ -2119,6 +2121,7 @@ var tailwind_theme_default = {
     "grey-20": "#d2d2d6",
     transparent: "transparent",
     white: "white",
+    black: "black",
     current: "currentColor",
     "navyBlue-100": "#30375E"
   },
@@ -4633,27 +4636,31 @@ var DataTable = ({
       key: column.headerName,
       style: { width: column.width }
     }, column.headerName)
-  )), /* @__PURE__ */ import_react47.default.createElement(Table2.Body, null, (0, import_orderBy2.default)(rows, [sort?.key], [toSortDirection(sort?.direction)]).map((row) => /* @__PURE__ */ import_react47.default.createElement(Table2.Row, {
-    key: row.id
-  }, columns.map(
-    (column, index) => isFieldColumn(column) ? /* @__PURE__ */ import_react47.default.createElement(Table2.Cell, {
-      key: column.field,
-      align: isNumberColumn(column) ? "right" : "left"
-    }, row[column.field]) : isStatusColumn(column) ? /* @__PURE__ */ import_react47.default.createElement(Table2.Cell, {
-      key: column.headerName
-    }, /* @__PURE__ */ import_react47.default.createElement(StatusChip, {
-      dense: true,
-      ...column.status(row, index, rows)
-    })) : isActionColumn(column) ? /* @__PURE__ */ import_react47.default.createElement(Table2.Cell, {
-      align: "right",
-      key: column.headerName
-    }, /* @__PURE__ */ import_react47.default.createElement(SecondaryButton, {
-      dense: true,
-      ...renameProperty("text", "children", column.action(row, index, rows))
-    })) : /* @__PURE__ */ import_react47.default.createElement(Table2.Cell, {
-      key: column.headerName
-    }, column.UNSAFE_render(row, index, rows))
-  )))));
+  )), /* @__PURE__ */ import_react47.default.createElement(Table2.Body, null, /* @__PURE__ */ import_react47.default.createElement(List, {
+    items: (0, import_orderBy2.default)(rows, [sort?.key], [toSortDirection(sort?.direction)]),
+    renderItem: (row) => /* @__PURE__ */ import_react47.default.createElement(Table2.Row, {
+      key: row.id
+    }, /* @__PURE__ */ import_react47.default.createElement(List, {
+      items: columns,
+      renderItem: (column, index) => isFieldColumn(column) ? /* @__PURE__ */ import_react47.default.createElement(Table2.Cell, {
+        key: column.field,
+        align: isNumberColumn(column) ? "right" : "left"
+      }, row[column.field]) : isStatusColumn(column) ? /* @__PURE__ */ import_react47.default.createElement(Table2.Cell, {
+        key: column.headerName
+      }, /* @__PURE__ */ import_react47.default.createElement(StatusChip, {
+        dense: true,
+        ...column.status(row, index, rows)
+      })) : isActionColumn(column) ? /* @__PURE__ */ import_react47.default.createElement(Table2.Cell, {
+        align: "right",
+        key: column.headerName
+      }, /* @__PURE__ */ import_react47.default.createElement(SecondaryButton, {
+        dense: true,
+        ...renameProperty("text", "children", column.action(row, index, rows))
+      })) : /* @__PURE__ */ import_react47.default.createElement(Table2.Cell, {
+        key: column.headerName
+      }, column.UNSAFE_render(row, index, rows))
+    }))
+  })));
 };
 
 // src/components/Dialog/Dialog.tsx
@@ -5960,6 +5967,7 @@ var MultiInputBase = ({
   itemToString = (val) => String(val),
   createItem = (val) => val,
   onChange,
+  onInputChange,
   isItemValid,
   disabled = false,
   readOnly = false,
@@ -6062,6 +6070,7 @@ var MultiInputBase = ({
     name,
     type,
     ...props,
+    onChange: onInputChange,
     autoFocus,
     disabled,
     readOnly,
@@ -6821,264 +6830,13 @@ PopoverDialog2.Prompt = Prompt;
 var import_react_dom = require("react-dom");
 var Portal = ({ children, to }) => (0, import_react_dom.createPortal)(children, to);
 
-// src/components/Positioner/Positioner.tsx
-var import_react74 = __toESM(require("react"));
-
-// src/utils/positioner.ts
-var import_clamp2 = __toESM(require("lodash/clamp"));
-var PositionerPlacement = /* @__PURE__ */ ((PositionerPlacement2) => {
-  PositionerPlacement2["top"] = "top";
-  PositionerPlacement2["left"] = "left";
-  PositionerPlacement2["bottom"] = "bottom";
-  PositionerPlacement2["right"] = "right";
-  PositionerPlacement2["topLeft"] = "top-left";
-  PositionerPlacement2["topRight"] = "top-right";
-  PositionerPlacement2["bottomLeft"] = "bottom-left";
-  PositionerPlacement2["bottomRight"] = "bottom-right";
-  return PositionerPlacement2;
-})(PositionerPlacement || {});
-var placementOrder = [
-  "top" /* top */,
-  "top-left" /* topLeft */,
-  "top-right" /* topRight */,
-  "right" /* right */,
-  "bottom" /* bottom */,
-  "bottom-left" /* bottomLeft */,
-  "bottom-right" /* bottomRight */,
-  "left" /* left */
-];
-var POSITIONER_MOUNT_ELEMENT_ID = "positioner-root";
-function createMountPointElement() {
-  const mountElement = document.createElement("div");
-  mountElement.id = POSITIONER_MOUNT_ELEMENT_ID;
-  return mountElement;
-}
-function calcBottomPosition(triggerRect, contentRect, padding) {
-  return {
-    x: triggerRect.left - (contentRect.width / 2 - triggerRect.width / 2),
-    y: triggerRect.top + triggerRect.height + padding
-  };
-}
-function calcTopPosition(triggerRect, contentRect, padding) {
-  return {
-    x: triggerRect.left - (contentRect.width / 2 - triggerRect.width / 2),
-    y: triggerRect.top - contentRect.height - padding
-  };
-}
-function calcLeftPosition(triggerRect, contentRect, padding) {
-  return {
-    x: triggerRect.left - contentRect.width - padding,
-    y: triggerRect.top - (contentRect.height / 2 - triggerRect.height / 2)
-  };
-}
-function calcRightPosition(triggerRect, contentRect, padding) {
-  return {
-    x: triggerRect.left + triggerRect.width + padding,
-    y: triggerRect.top - (contentRect.height / 2 - triggerRect.height / 2)
-  };
-}
-function calcBottomLeftPosition(triggerRect, contentRect, padding) {
-  return {
-    x: triggerRect.left - contentRect.width - padding,
-    y: triggerRect.top + triggerRect.height + padding
-  };
-}
-function calcBottomRightPosition(triggerRect, contentRect, padding) {
-  return {
-    x: triggerRect.left + triggerRect.width + padding,
-    y: triggerRect.top + triggerRect.height + padding
-  };
-}
-function calcTopLeftPosition(triggerRect, contentRect, padding) {
-  return {
-    x: triggerRect.left - contentRect.width - padding,
-    y: triggerRect.top - contentRect.height - padding
-  };
-}
-function calcTopRightPosition(triggerRect, contentRect, padding) {
-  return {
-    x: triggerRect.left + triggerRect.width + padding,
-    y: triggerRect.top - contentRect.height - padding
-  };
-}
-var positionCalcFuncs = {
-  ["top" /* top */]: calcTopPosition,
-  ["top-left" /* topLeft */]: calcTopLeftPosition,
-  ["top-right" /* topRight */]: calcTopRightPosition,
-  ["bottom" /* bottom */]: calcBottomPosition,
-  ["bottom-left" /* bottomLeft */]: calcBottomLeftPosition,
-  ["bottom-right" /* bottomRight */]: calcBottomRightPosition,
-  ["left" /* left */]: calcLeftPosition,
-  ["right" /* right */]: calcRightPosition
-};
-function isOutOfBounds(position) {
-  return position.x < 0 || position.x > window.innerWidth;
-}
-function calcPosition(triggerRect, contentRect, placement, padding) {
-  return positionCalcFuncs[placement](triggerRect, contentRect, padding);
-}
-function calcBestPosition(triggerRect, contentRect, placement, padding) {
-  let attempts = 0;
-  return function _calcBestPosition(triggerRect2, contentRect2, placement2, padding2) {
-    attempts++;
-    const position = calcPosition(triggerRect2, contentRect2, placement2, padding2);
-    const hasAttemptsLeft = attempts < placementOrder.length;
-    if (isOutOfBounds(position) && hasAttemptsLeft) {
-      const nextPlacementAttempt = placementOrder[placementOrder.findIndex((p) => placement2 === p) + 1] || placementOrder[0];
-      return _calcBestPosition(triggerRect2, contentRect2, nextPlacementAttempt, padding2);
-    } else {
-      return {
-        x: (0, import_clamp2.default)(position.x + window.scrollX, 0, window.innerWidth),
-        y: position.y + window.scrollY
-      };
-    }
-  }(triggerRect, contentRect, placement, padding);
-}
-
-// src/components/Positioner/Positioner.tsx
-var Positioner = ({
-  children,
-  content,
-  autoAdjust = false,
-  animate = false,
-  trigger = "click",
-  placement = "bottom" /* bottom */,
-  onClose,
-  padding = 5,
-  allowClosingManually = false,
-  stayVisibleOnHover = false,
-  fullWidth = false,
-  tabIndex = 0
-}) => {
-  const [isOpen, setOpen] = import_react74.default.useState(false);
-  const triggerRef = import_react74.default.useRef(null);
-  const timeoutId = import_react74.default.useRef();
-  import_react74.default.useEffect(() => {
-    return () => {
-      timeoutId.current && clearTimeout(timeoutId.current);
-      window.document.body.removeEventListener("mouseover", handleMouseOver);
-    };
-  }, []);
-  const handleTriggerKeyDown = (event) => event.key === "Enter" && showContent(!isOpen);
-  const handleTriggerClick = () => {
-    showContent(!isOpen);
-  };
-  const handleMouseOver = (event) => {
-    if (!triggerRef.current?.contains(event.target)) {
-      showContent(false);
-      window.document.body.removeEventListener("mouseover", handleMouseOver);
-    }
-  };
-  const showContent = (value, shouldDelay = false) => {
-    timeoutId.current && clearTimeout(timeoutId.current);
-    shouldDelay ? timeoutId.current = setTimeout(() => setOpen(value), 300) : setOpen(value);
-    if (!value) {
-      onClose?.({ triggerRef });
-    }
-  };
-  const handleTriggerMouseEnter = () => {
-    if (!stayVisibleOnHover) {
-      window.document.body.addEventListener("mouseover", handleMouseOver);
-    }
-    showContent(true, true);
-  };
-  const handleTriggerMouseLeave = () => showContent(false, stayVisibleOnHover);
-  const handleOutsideClick = import_react74.default.useCallback((event) => {
-    const { target } = event;
-    if (target !== window && !triggerRef?.current?.contains(target)) {
-      showContent(false);
-    }
-  }, []);
-  const handleESCPress = import_react74.default.useCallback(() => showContent(false), []);
-  const handleSetOpen = import_react74.default.useCallback((value) => showContent(value), []);
-  return /* @__PURE__ */ import_react74.default.createElement("div", {
-    className: tw("inline-block", {
-      "w-full": fullWidth
-    }),
-    ref: triggerRef,
-    onClick: trigger === "click" ? handleTriggerClick : void 0,
-    onKeyDown: handleTriggerKeyDown,
-    onMouseEnter: trigger === "hover" ? handleTriggerMouseEnter : void 0,
-    onMouseLeave: stayVisibleOnHover ? handleTriggerMouseLeave : void 0,
-    tabIndex,
-    "data-testid": "positioner",
-    id: content.props.triggerId,
-    "aria-haspopup": isOpen,
-    "aria-expanded": isOpen,
-    "aria-controls": content.props.contentId
-  }, children, isOpen && /* @__PURE__ */ import_react74.default.createElement(Positioned, {
-    triggerRect: triggerRef.current?.getBoundingClientRect() || { x: 0, y: 0 },
-    animate,
-    autoAdjust,
-    onOutsideClick: handleOutsideClick,
-    onESCPress: handleESCPress,
-    placement,
-    padding,
-    setOpen: handleSetOpen,
-    stayVisibleOnHover
-  }, allowClosingManually ? import_react74.default.cloneElement(content, { setClose: () => showContent(false) }) : content));
-};
-var Positioned = ({
-  children,
-  onOutsideClick,
-  onESCPress,
-  autoAdjust = false,
-  animate = false,
-  triggerRect,
-  placement = "bottom" /* bottom */,
-  padding = 5,
-  setOpen = () => void 0,
-  stayVisibleOnHover = false
-}) => {
-  const [position, setPosition] = import_react74.default.useState({ x: 0, y: 0 });
-  const contentRef = import_react74.default.useRef(null);
-  const mountElementRef = import_react74.default.useRef(createMountPointElement());
-  const handleBodyClick = (event) => !contentRef.current?.contains(event.target) && onOutsideClick(event);
-  const handleWindowKeyUp = (event) => event.key === "Escape" && onESCPress();
-  const handleSetOpen = (event, value) => {
-    event.stopPropagation();
-    setOpen(value);
-  };
-  import_react74.default.useEffect(() => {
-    window.document.body.addEventListener("click", handleBodyClick);
-    window.addEventListener("keyup", handleWindowKeyUp);
-    document.body.appendChild(mountElementRef.current);
-    if (contentRef.current) {
-      setPosition(
-        autoAdjust ? calcBestPosition(triggerRect, contentRef.current.getBoundingClientRect(), placement, padding) : calcPosition(triggerRect, contentRef.current.getBoundingClientRect(), placement, padding)
-      );
-    }
-    return () => {
-      document.body.removeChild(mountElementRef.current);
-      window.document.body.removeEventListener("click", handleBodyClick);
-      window.removeEventListener("keyup", handleWindowKeyUp);
-    };
-  }, []);
-  return /* @__PURE__ */ import_react74.default.createElement(Portal, {
-    to: mountElementRef.current
-  }, /* @__PURE__ */ import_react74.default.createElement("div", {
-    tabIndex: -1,
-    onClick: (event) => event.stopPropagation(),
-    ref: contentRef,
-    style: {
-      transform: `translate(${position.x}px, ${position.y}px)`
-    },
-    className: tw("absolute top-0 left-0", {
-      "animate-positioner-fade-in": animate
-    }),
-    "data-testid": "positioned",
-    ...stayVisibleOnHover && { onMouseEnter: (e) => handleSetOpen(e, true) },
-    ...stayVisibleOnHover && { onMouseLeave: (e) => handleSetOpen(e, false) }
-  }, children));
-};
-
 // src/components/ProgressBar/ProgressBar.tsx
-var import_react76 = __toESM(require("react"));
+var import_react75 = __toESM(require("react"));
 
 // src/common/ProgressBar/ProgressBar.tsx
-var import_react75 = __toESM(require("react"));
-var import_clamp3 = __toESM(require("lodash/clamp"));
-var ProgressBar = ({ children, className, ...rest }) => /* @__PURE__ */ import_react75.default.createElement("div", {
+var import_react74 = __toESM(require("react"));
+var import_clamp2 = __toESM(require("lodash/clamp"));
+var ProgressBar = ({ children, className, ...rest }) => /* @__PURE__ */ import_react74.default.createElement("div", {
   ...rest,
   className: classNames(
     tw("relative flex items-center w-full bg-grey-0 h-2 rounded-full overflow-hidden"),
@@ -7092,8 +6850,8 @@ var STATUS_COLORS = {
   error: tw("bg-error-70")
 };
 ProgressBar.Indicator = ({ min, max, value, "aria-label": ariaLabel, status, className, ...rest }) => {
-  const completedPercentage = (0, import_clamp3.default)((value - min) / (max - min) * 100, 0, 100);
-  return /* @__PURE__ */ import_react75.default.createElement("div", {
+  const completedPercentage = (0, import_clamp2.default)((value - min) / (max - min) * 100, 0, 100);
+  return /* @__PURE__ */ import_react74.default.createElement("div", {
     ...rest,
     className: classNames(
       tw("h-2 rounded-full transition-all ease-in-out delay-150"),
@@ -7108,12 +6866,12 @@ ProgressBar.Indicator = ({ min, max, value, "aria-label": ariaLabel, status, cla
     "aria-valuemax": max
   });
 };
-ProgressBar.Labels = ({ children, startLabel, endLabel, className, ...rest }) => /* @__PURE__ */ import_react75.default.createElement("div", {
+ProgressBar.Labels = ({ children, startLabel, endLabel, className, ...rest }) => /* @__PURE__ */ import_react74.default.createElement("div", {
   className: classNames(tw("flex flex-row"), className)
-}, /* @__PURE__ */ import_react75.default.createElement("span", {
+}, /* @__PURE__ */ import_react74.default.createElement("span", {
   ...rest,
   className: tw("grow text-grey-70 typography-caption-default")
-}, startLabel), /* @__PURE__ */ import_react75.default.createElement("span", {
+}, startLabel), /* @__PURE__ */ import_react74.default.createElement("span", {
   ...rest,
   className: tw("grow text-grey-70 typography-caption-default text-right")
 }, endLabel));
@@ -7131,7 +6889,7 @@ var ProgressBar2 = (props) => {
   if (min > max) {
     throw new Error("`min` value provided to `ProgressBar` is greater than `max` value.");
   }
-  const progress = /* @__PURE__ */ import_react76.default.createElement(ProgressBar, null, /* @__PURE__ */ import_react76.default.createElement(ProgressBar.Indicator, {
+  const progress = /* @__PURE__ */ import_react75.default.createElement(ProgressBar, null, /* @__PURE__ */ import_react75.default.createElement(ProgressBar.Indicator, {
     status: value === max ? completedStatus : progresStatus,
     min,
     max,
@@ -7141,20 +6899,20 @@ var ProgressBar2 = (props) => {
   if (props.dense) {
     return progress;
   }
-  return /* @__PURE__ */ import_react76.default.createElement("div", null, progress, /* @__PURE__ */ import_react76.default.createElement(ProgressBar.Labels, {
+  return /* @__PURE__ */ import_react75.default.createElement("div", null, progress, /* @__PURE__ */ import_react75.default.createElement(ProgressBar.Labels, {
     className: tw("py-2"),
     startLabel: props.startLabel,
     endLabel: props.endLabel
   }));
 };
-ProgressBar2.Skeleton = () => /* @__PURE__ */ import_react76.default.createElement(Skeleton, {
+ProgressBar2.Skeleton = () => /* @__PURE__ */ import_react75.default.createElement(Skeleton, {
   height: 4,
   display: "block"
 });
 
 // src/components/RadioButton/RadioButton.tsx
-var import_react77 = __toESM(require("react"));
-var RadioButton2 = import_react77.default.forwardRef(
+var import_react76 = __toESM(require("react"));
+var RadioButton2 = import_react76.default.forwardRef(
   ({
     name,
     id,
@@ -7168,11 +6926,11 @@ var RadioButton2 = import_react77.default.forwardRef(
     "aria-label": ariaLabel,
     ...props
   }, ref) => {
-    const [checked, setChecked] = import_react77.default.useState(_checked ?? defaultChecked ?? false);
+    const [checked, setChecked] = import_react76.default.useState(_checked ?? defaultChecked ?? false);
     if (_checked !== void 0 && checked !== _checked) {
       setChecked(_checked);
     }
-    return !readOnly || checked ? /* @__PURE__ */ import_react77.default.createElement(ControlLabel, {
+    return !readOnly || checked ? /* @__PURE__ */ import_react76.default.createElement(ControlLabel, {
       htmlFor: id,
       label: children,
       "aria-label": ariaLabel,
@@ -7180,7 +6938,7 @@ var RadioButton2 = import_react77.default.forwardRef(
       readOnly,
       disabled,
       style: { gap: "0 8px" }
-    }, !readOnly && /* @__PURE__ */ import_react77.default.createElement(RadioButton, {
+    }, !readOnly && /* @__PURE__ */ import_react76.default.createElement(RadioButton, {
       id,
       ref,
       name,
@@ -7195,22 +6953,22 @@ var RadioButton2 = import_react77.default.forwardRef(
     })) : null;
   }
 );
-var RadioButtonSkeleton = () => /* @__PURE__ */ import_react77.default.createElement("div", {
+var RadioButtonSkeleton = () => /* @__PURE__ */ import_react76.default.createElement("div", {
   className: tw("flex gap-3")
-}, /* @__PURE__ */ import_react77.default.createElement(Skeleton, {
+}, /* @__PURE__ */ import_react76.default.createElement(Skeleton, {
   height: 20,
   width: 20
-}), /* @__PURE__ */ import_react77.default.createElement(Skeleton, {
+}), /* @__PURE__ */ import_react76.default.createElement(Skeleton, {
   height: 20,
   width: 150
 }));
 RadioButton2.Skeleton = RadioButtonSkeleton;
 
 // src/components/RadioButtonGroup/RadioButtonGroup.tsx
-var import_react78 = __toESM(require("react"));
+var import_react77 = __toESM(require("react"));
 var import_uniqueId8 = __toESM(require("lodash/uniqueId"));
 var isRadioButton = (c) => {
-  return import_react78.default.isValidElement(c) && c.type === RadioButton2;
+  return import_react77.default.isValidElement(c) && c.type === RadioButton2;
 };
 var RadioButtonGroup = ({
   name,
@@ -7223,7 +6981,7 @@ var RadioButtonGroup = ({
   children,
   ...props
 }) => {
-  const [value, setValue] = import_react78.default.useState(_value ?? defaultValue ?? "");
+  const [value, setValue] = import_react77.default.useState(_value ?? defaultValue ?? "");
   const errorMessageId = (0, import_uniqueId8.default)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
@@ -7234,13 +6992,13 @@ var RadioButtonGroup = ({
     setValue(e.target.value);
     onChange?.(e.target.value);
   };
-  const content = import_react78.default.Children.map(children, (c) => {
+  const content = import_react77.default.Children.map(children, (c) => {
     if (!isRadioButton(c)) {
       return null;
     }
     const defaultChecked = defaultValue === void 0 ? void 0 : c.props.value === defaultValue;
     const checked = value === void 0 ? void 0 : c.props.value === value;
-    return import_react78.default.cloneElement(c, {
+    return import_react77.default.cloneElement(c, {
       name,
       defaultChecked: c.props.defaultChecked ?? defaultChecked,
       checked: c.props.checked ?? checked,
@@ -7249,13 +7007,13 @@ var RadioButtonGroup = ({
       readOnly
     });
   });
-  return /* @__PURE__ */ import_react78.default.createElement(LabelControl, {
+  return /* @__PURE__ */ import_react77.default.createElement(LabelControl, {
     fieldset: true,
     ...labelControlProps,
     ...errorProps
-  }, cols && /* @__PURE__ */ import_react78.default.createElement(InputGroup, {
+  }, cols && /* @__PURE__ */ import_react77.default.createElement(InputGroup, {
     cols
-  }, content), !cols && /* @__PURE__ */ import_react78.default.createElement(Flexbox, {
+  }, content), !cols && /* @__PURE__ */ import_react77.default.createElement(Flexbox, {
     direction,
     alignItems: "flex-start",
     colGap: "8",
@@ -7264,19 +7022,64 @@ var RadioButtonGroup = ({
   }, content));
 };
 var RadioButtonGroupSkeleton = ({ direction = "row", options = 2 }) => {
-  return /* @__PURE__ */ import_react78.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react78.default.createElement("div", {
+  return /* @__PURE__ */ import_react77.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react77.default.createElement("div", {
     className: tw("flex flex-wrap", {
       "flex-row gap-8": direction === "row",
       "flex-col gap-2": direction === "column"
     })
-  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ import_react78.default.createElement(RadioButton2.Skeleton, {
+  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ import_react77.default.createElement(RadioButton2.Skeleton, {
     key
   }))));
 };
 RadioButtonGroup.Skeleton = RadioButtonGroupSkeleton;
 
-// src/components/SegmentedControl/SegmentedControl.tsx
+// src/components/Section/Section.tsx
 var import_react79 = __toESM(require("react"));
+
+// src/common/Section/Section.tsx
+var import_react78 = __toESM(require("react"));
+var Section2 = ({ children, ...rest }) => /* @__PURE__ */ import_react78.default.createElement(Box, {
+  borderColor: "grey-5",
+  borderWidth: "1px",
+  ...rest
+}, children);
+Section2.Header = ({ children, className, ...rest }) => /* @__PURE__ */ import_react78.default.createElement("div", {
+  ...rest,
+  className: classNames(tw("px-6 py-5 flex gap-5 justify-between items-center"), className)
+}, children);
+Section2.TitleContainer = ({ children, className, ...rest }) => /* @__PURE__ */ import_react78.default.createElement("div", {
+  ...rest,
+  className: classNames(tw("flex flex-col grow gap-2"), className)
+}, children);
+Section2.Title = ({ children, ...rest }) => /* @__PURE__ */ import_react78.default.createElement(Typography2.Subheading, {
+  ...rest,
+  color: "black"
+}, children);
+Section2.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ import_react78.default.createElement(Typography2.SmallText, {
+  ...rest,
+  color: "grey-70"
+}, children);
+Section2.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ import_react78.default.createElement("div", {
+  ...rest,
+  className: classNames(tw("flex gap-4 justify-end"), className)
+}, children);
+Section2.Body = ({ children, className, ...rest }) => /* @__PURE__ */ import_react78.default.createElement("div", {
+  ...rest,
+  className: classNames(tw("p-6"), className)
+}, /* @__PURE__ */ import_react78.default.createElement(Typography, {
+  htmlTag: "div",
+  color: "grey-70"
+}, children));
+
+// src/components/Section/Section.tsx
+var import_castArray4 = __toESM(require("lodash/castArray"));
+var Section3 = ({ title, subtitle, actions, children }) => /* @__PURE__ */ import_react79.default.createElement(Section2, null, /* @__PURE__ */ import_react79.default.createElement(Section2.Header, null, /* @__PURE__ */ import_react79.default.createElement(Section2.TitleContainer, null, /* @__PURE__ */ import_react79.default.createElement(Section2.Title, null, title), /* @__PURE__ */ import_react79.default.createElement(Section2.Subtitle, null, subtitle)), /* @__PURE__ */ import_react79.default.createElement(Section2.Actions, null, actions && (0, import_castArray4.default)(actions).filter(Boolean).map(({ text, ...action }) => /* @__PURE__ */ import_react79.default.createElement(SecondaryButton, {
+  key: text,
+  ...action
+}, text)))), /* @__PURE__ */ import_react79.default.createElement(Divider2, null), /* @__PURE__ */ import_react79.default.createElement(Section2.Body, null, children));
+
+// src/components/SegmentedControl/SegmentedControl.tsx
+var import_react80 = __toESM(require("react"));
 var SegmentedControl = ({
   children,
   value,
@@ -7285,7 +7088,7 @@ var SegmentedControl = ({
   selected = false,
   className,
   ...rest
-}) => /* @__PURE__ */ import_react79.default.createElement("button", {
+}) => /* @__PURE__ */ import_react80.default.createElement("button", {
   type: "button",
   ...rest,
   className: classNames(
@@ -7308,12 +7111,12 @@ var SegmentedControlGroup = ({
     "border border-grey-20 text-grey-50": variant === "outlined",
     "bg-grey-0": variant === "raised"
   });
-  return /* @__PURE__ */ import_react79.default.createElement("div", {
+  return /* @__PURE__ */ import_react80.default.createElement("div", {
     ...rest,
     className: classNames(classes, className)
-  }, import_react79.default.Children.map(
+  }, import_react80.default.Children.map(
     children,
-    (child) => import_react79.default.cloneElement(child, {
+    (child) => import_react80.default.cloneElement(child, {
       dense,
       variant,
       onClick: () => onChange(child.props.value),
@@ -7351,8 +7154,8 @@ var getCommonClassNames = (dense, selected) => tw(
 );
 
 // src/components/Switch/Switch.tsx
-var import_react80 = __toESM(require("react"));
-var Switch = import_react80.default.forwardRef(
+var import_react81 = __toESM(require("react"));
+var Switch = import_react81.default.forwardRef(
   ({
     id,
     name,
@@ -7366,11 +7169,11 @@ var Switch = import_react80.default.forwardRef(
     "aria-label": ariaLabel,
     ...props
   }, ref) => {
-    const [checked, setChecked] = import_react80.default.useState(_checked ?? defaultChecked ?? false);
+    const [checked, setChecked] = import_react81.default.useState(_checked ?? defaultChecked ?? false);
     if (_checked !== void 0 && checked !== _checked) {
       setChecked(_checked);
     }
-    return !readOnly || checked ? /* @__PURE__ */ import_react80.default.createElement(ControlLabel, {
+    return !readOnly || checked ? /* @__PURE__ */ import_react81.default.createElement(ControlLabel, {
       htmlFor: id,
       label: children,
       "aria-label": ariaLabel,
@@ -7378,7 +7181,7 @@ var Switch = import_react80.default.forwardRef(
       readOnly,
       disabled,
       style: { gap: "0 8px" }
-    }, !readOnly && /* @__PURE__ */ import_react80.default.createElement(Box, {
+    }, !readOnly && /* @__PURE__ */ import_react81.default.createElement(Box, {
       component: "span",
       display: "inline-flex",
       justifyContent: "center",
@@ -7389,7 +7192,7 @@ var Switch = import_react80.default.forwardRef(
           "text-grey-100 cursor-pointer": !disabled
         })
       )
-    }, /* @__PURE__ */ import_react80.default.createElement("input", {
+    }, /* @__PURE__ */ import_react81.default.createElement("input", {
       id,
       ref,
       type: "checkbox",
@@ -7403,7 +7206,7 @@ var Switch = import_react80.default.forwardRef(
       className: tw("appearance-none peer"),
       readOnly,
       disabled
-    }), /* @__PURE__ */ import_react80.default.createElement("span", {
+    }), /* @__PURE__ */ import_react81.default.createElement("span", {
       className: tw(
         "rounded-full inline-block w-[34px] h-[20px] transition duration-300 peer-focus:border border-info-70",
         {
@@ -7413,7 +7216,7 @@ var Switch = import_react80.default.forwardRef(
           "opacity-40": disabled && checked
         }
       )
-    }), /* @__PURE__ */ import_react80.default.createElement("span", {
+    }), /* @__PURE__ */ import_react81.default.createElement("span", {
       style: {
         right: checked ? "20px" : void 0,
         left: checked ? void 0 : "4px"
@@ -7426,19 +7229,19 @@ var Switch = import_react80.default.forwardRef(
     }))) : null;
   }
 );
-var SwitchSkeleton = () => /* @__PURE__ */ import_react80.default.createElement("div", {
+var SwitchSkeleton = () => /* @__PURE__ */ import_react81.default.createElement("div", {
   className: tw("flex gap-3")
-}, /* @__PURE__ */ import_react80.default.createElement(Skeleton, {
+}, /* @__PURE__ */ import_react81.default.createElement(Skeleton, {
   height: 20,
   width: 35
-}), /* @__PURE__ */ import_react80.default.createElement(Skeleton, {
+}), /* @__PURE__ */ import_react81.default.createElement(Skeleton, {
   height: 20,
   width: 150
 }));
 Switch.Skeleton = SwitchSkeleton;
 
 // src/components/SwitchGroup/SwitchGroup.tsx
-var import_react81 = __toESM(require("react"));
+var import_react82 = __toESM(require("react"));
 var import_uniqueId9 = __toESM(require("lodash/uniqueId"));
 var SwitchGroup = ({
   value,
@@ -7449,7 +7252,7 @@ var SwitchGroup = ({
   children,
   ...props
 }) => {
-  const [selectedItems, setSelectedItems] = (0, import_react81.useState)(value ?? defaultValue ?? []);
+  const [selectedItems, setSelectedItems] = (0, import_react82.useState)(value ?? defaultValue ?? []);
   if (value !== void 0 && value !== selectedItems) {
     setSelectedItems(value);
   }
@@ -7462,20 +7265,20 @@ var SwitchGroup = ({
     setSelectedItems(updated);
     onChange?.(updated);
   };
-  return /* @__PURE__ */ import_react81.default.createElement(LabelControl, {
+  return /* @__PURE__ */ import_react82.default.createElement(LabelControl, {
     fieldset: true,
     ...labelControlProps,
     ...errorProps
-  }, /* @__PURE__ */ import_react81.default.createElement(InputGroup, {
+  }, /* @__PURE__ */ import_react82.default.createElement(InputGroup, {
     cols
-  }, import_react81.default.Children.map(children, (c) => {
+  }, import_react82.default.Children.map(children, (c) => {
     if (!isComponentType(c, Switch)) {
       return null;
     }
     const str = c.props.value?.toString();
     const defaultChecked = defaultValue === void 0 ? void 0 : str !== void 0 && defaultValue.includes(str);
     const checked = value === void 0 ? void 0 : str !== void 0 && value.includes(str);
-    return import_react81.default.cloneElement(c, {
+    return import_react82.default.cloneElement(c, {
       defaultChecked: c.props.defaultChecked ?? defaultChecked,
       checked: c.props.checked ?? checked,
       onChange: c.props.onChange ?? handleChange,
@@ -7485,17 +7288,17 @@ var SwitchGroup = ({
   })));
 };
 var SwitchGroupSkeleton = ({ options = 2 }) => {
-  return /* @__PURE__ */ import_react81.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react81.default.createElement("div", {
+  return /* @__PURE__ */ import_react82.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react82.default.createElement("div", {
     className: tw("flex flex-wrap flex-col gap-2")
-  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ import_react81.default.createElement(Switch.Skeleton, {
+  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ import_react82.default.createElement(Switch.Skeleton, {
     key
   }))));
 };
 SwitchGroup.Skeleton = SwitchGroupSkeleton;
 
 // src/components/TagLabel/TagLabel.tsx
-var import_react82 = __toESM(require("react"));
-var TagLabel = ({ title, dense = false, ...rest }) => /* @__PURE__ */ import_react82.default.createElement("span", {
+var import_react83 = __toESM(require("react"));
+var TagLabel = ({ title, dense = false, ...rest }) => /* @__PURE__ */ import_react83.default.createElement("span", {
   ...rest,
   className: tw("rounded-full text-white bg-primary-70", {
     "py-2 px-4 typography-caption-default": !dense,
@@ -7504,35 +7307,35 @@ var TagLabel = ({ title, dense = false, ...rest }) => /* @__PURE__ */ import_rea
 }, title);
 
 // src/components/Textarea/Textarea.tsx
-var import_react83 = __toESM(require("react"));
+var import_react84 = __toESM(require("react"));
 var import_uniqueId10 = __toESM(require("lodash/uniqueId"));
 var import_toString2 = __toESM(require("lodash/toString"));
 var import_omit16 = __toESM(require("lodash/omit"));
-var TextareaBase = import_react83.default.forwardRef(
-  ({ readOnly = false, valid = true, ...props }, ref) => /* @__PURE__ */ import_react83.default.createElement("textarea", {
+var TextareaBase = import_react84.default.forwardRef(
+  ({ readOnly = false, valid = true, ...props }, ref) => /* @__PURE__ */ import_react84.default.createElement("textarea", {
     ref,
     ...props,
     readOnly,
     className: classNames(getCommonInputStyles({ readOnly, valid }), props.className)
   })
 );
-TextareaBase.Skeleton = () => /* @__PURE__ */ import_react83.default.createElement(Skeleton, {
+TextareaBase.Skeleton = () => /* @__PURE__ */ import_react84.default.createElement(Skeleton, {
   height: 58
 });
-var Textarea = import_react83.default.forwardRef((props, ref) => {
-  const [value, setValue] = (0, import_react83.useState)(props.value ?? props.defaultValue ?? "");
-  const id = (0, import_react83.useRef)(props.id ?? `textarea-${(0, import_uniqueId10.default)()}`);
+var Textarea = import_react84.default.forwardRef((props, ref) => {
+  const [value, setValue] = (0, import_react84.useState)(props.value ?? props.defaultValue ?? "");
+  const id = (0, import_react84.useRef)(props.id ?? `textarea-${(0, import_uniqueId10.default)()}`);
   const errorMessageId = (0, import_uniqueId10.default)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const { "data-testid": dataTestId, ...labelControlProps } = getLabelControlProps(props);
   const baseProps = (0, import_omit16.default)(props, Object.keys(labelControlProps));
-  return /* @__PURE__ */ import_react83.default.createElement(LabelControl, {
+  return /* @__PURE__ */ import_react84.default.createElement(LabelControl, {
     id: `${id.current}-label`,
     htmlFor: id.current,
     messageId: errorMessageId,
     length: value !== void 0 ? (0, import_toString2.default)(value).length : void 0,
     ...labelControlProps
-  }, /* @__PURE__ */ import_react83.default.createElement(TextareaBase, {
+  }, /* @__PURE__ */ import_react84.default.createElement(TextareaBase, {
     ref,
     ...baseProps,
     ...errorProps,
@@ -7548,12 +7351,158 @@ var Textarea = import_react83.default.forwardRef((props, ref) => {
     valid: props.valid
   }));
 });
-var TextAreaSkeleton = () => /* @__PURE__ */ import_react83.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react83.default.createElement(TextareaBase.Skeleton, null));
+var TextAreaSkeleton = () => /* @__PURE__ */ import_react84.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react84.default.createElement(TextareaBase.Skeleton, null));
 Textarea.Skeleton = TextAreaSkeleton;
 
+// src/components/Pagination/usePagination.tsx
+var import_react85 = require("react");
+var initialState = {
+  currentPage: 1,
+  pageSize: 10
+};
+var getPageIndex = (currentPage, pageSize) => currentPage === 0 ? 0 : (currentPage - 1) * pageSize;
+var usePagination = (items, options) => {
+  const [currentPage, setCurrentPage] = (0, import_react85.useState)(options?.initialPage || initialState.currentPage);
+  const [pageSize, setPageSize] = (0, import_react85.useState)(options?.initialPageSize || initialState.pageSize);
+  const totalPages = items.length > 0 ? Math.ceil(items.length / pageSize) : 1;
+  const hasPreviousPage = currentPage > 1;
+  const hasNextPage = currentPage < totalPages;
+  const pageIndex = getPageIndex(currentPage, pageSize);
+  const onPageSizeChange = (pageSize2) => {
+    setPageSize(pageSize2);
+    setCurrentPage(options?.initialPage || initialState.currentPage);
+  };
+  (0, import_react85.useEffect)(() => {
+    setCurrentPage(options?.initialPage || initialState.currentPage);
+  }, [items.length]);
+  return [
+    items.slice(pageIndex, Math.min(pageIndex + pageSize, items.length)),
+    {
+      currentPage,
+      totalPages,
+      pageSize,
+      hasPreviousPage,
+      hasNextPage,
+      onPageChange: setCurrentPage,
+      onPageSizeChange
+    }
+  ];
+};
+
 // src/components/index.ts
 var SelectItem = Select.Item;
 
+// src/utils/positioner.ts
+var import_clamp3 = __toESM(require("lodash/clamp"));
+var PositionerPlacement = /* @__PURE__ */ ((PositionerPlacement2) => {
+  PositionerPlacement2["top"] = "top";
+  PositionerPlacement2["left"] = "left";
+  PositionerPlacement2["bottom"] = "bottom";
+  PositionerPlacement2["right"] = "right";
+  PositionerPlacement2["topLeft"] = "top-left";
+  PositionerPlacement2["topRight"] = "top-right";
+  PositionerPlacement2["bottomLeft"] = "bottom-left";
+  PositionerPlacement2["bottomRight"] = "bottom-right";
+  return PositionerPlacement2;
+})(PositionerPlacement || {});
+var placementOrder = [
+  "top" /* top */,
+  "top-left" /* topLeft */,
+  "top-right" /* topRight */,
+  "right" /* right */,
+  "bottom" /* bottom */,
+  "bottom-left" /* bottomLeft */,
+  "bottom-right" /* bottomRight */,
+  "left" /* left */
+];
+var POSITIONER_MOUNT_ELEMENT_ID = "positioner-root";
+function createMountPointElement() {
+  const mountElement = document.createElement("div");
+  mountElement.id = POSITIONER_MOUNT_ELEMENT_ID;
+  return mountElement;
+}
+function calcBottomPosition(triggerRect, contentRect, padding) {
+  return {
+    x: triggerRect.left - (contentRect.width / 2 - triggerRect.width / 2),
+    y: triggerRect.top + triggerRect.height + padding
+  };
+}
+function calcTopPosition(triggerRect, contentRect, padding) {
+  return {
+    x: triggerRect.left - (contentRect.width / 2 - triggerRect.width / 2),
+    y: triggerRect.top - contentRect.height - padding
+  };
+}
+function calcLeftPosition(triggerRect, contentRect, padding) {
+  return {
+    x: triggerRect.left - contentRect.width - padding,
+    y: triggerRect.top - (contentRect.height / 2 - triggerRect.height / 2)
+  };
+}
+function calcRightPosition(triggerRect, contentRect, padding) {
+  return {
+    x: triggerRect.left + triggerRect.width + padding,
+    y: triggerRect.top - (contentRect.height / 2 - triggerRect.height / 2)
+  };
+}
+function calcBottomLeftPosition(triggerRect, contentRect, padding) {
+  return {
+    x: triggerRect.left - contentRect.width - padding,
+    y: triggerRect.top + triggerRect.height + padding
+  };
+}
+function calcBottomRightPosition(triggerRect, contentRect, padding) {
+  return {
+    x: triggerRect.left + triggerRect.width + padding,
+    y: triggerRect.top + triggerRect.height + padding
+  };
+}
+function calcTopLeftPosition(triggerRect, contentRect, padding) {
+  return {
+    x: triggerRect.left - contentRect.width - padding,
+    y: triggerRect.top - contentRect.height - padding
+  };
+}
+function calcTopRightPosition(triggerRect, contentRect, padding) {
+  return {
+    x: triggerRect.left + triggerRect.width + padding,
+    y: triggerRect.top - contentRect.height - padding
+  };
+}
+var positionCalcFuncs = {
+  ["top" /* top */]: calcTopPosition,
+  ["top-left" /* topLeft */]: calcTopLeftPosition,
+  ["top-right" /* topRight */]: calcTopRightPosition,
+  ["bottom" /* bottom */]: calcBottomPosition,
+  ["bottom-left" /* bottomLeft */]: calcBottomLeftPosition,
+  ["bottom-right" /* bottomRight */]: calcBottomRightPosition,
+  ["left" /* left */]: calcLeftPosition,
+  ["right" /* right */]: calcRightPosition
+};
+function isOutOfBounds(position) {
+  return position.x < 0 || position.x > window.innerWidth;
+}
+function calcPosition(triggerRect, contentRect, placement, padding) {
+  return positionCalcFuncs[placement](triggerRect, contentRect, padding);
+}
+function calcBestPosition(triggerRect, contentRect, placement, padding) {
+  let attempts = 0;
+  return function _calcBestPosition(triggerRect2, contentRect2, placement2, padding2) {
+    attempts++;
+    const position = calcPosition(triggerRect2, contentRect2, placement2, padding2);
+    const hasAttemptsLeft = attempts < placementOrder.length;
+    if (isOutOfBounds(position) && hasAttemptsLeft) {
+      const nextPlacementAttempt = placementOrder[placementOrder.findIndex((p) => placement2 === p) + 1] || placementOrder[0];
+      return _calcBestPosition(triggerRect2, contentRect2, nextPlacementAttempt, padding2);
+    } else {
+      return {
+        x: (0, import_clamp3.default)(position.x + window.scrollX, 0, window.innerWidth),
+        y: position.y + window.scrollY
+      };
+    }
+  }(triggerRect, contentRect, placement, padding);
+}
+
 // src/system.ts
 var system_default = {
   ...components_exports,
@@ -7626,7 +7575,6 @@ var system_default = {
   Popover,
   PopoverDialog,
   Portal,
-  Positioner,
   PositionerPlacement,
   PrimaryButton,
   PrimaryDropdownButton,
@@ -7637,6 +7585,7 @@ var system_default = {
   SecondaryButton,
   SecondaryDropdownButton,
   SecondaryGhostButton,
+  Section,
   SegmentedControl,
   SegmentedControlGroup,
   Select,
@@ -7678,6 +7627,7 @@ var system_default = {
   isOutOfBounds,
   placementOrder,
   theme,
+  usePagination,
   usePopoverContext,
   useScrollTarget,
   useTableSelect,