@aivenio/aquarium 0.0.1 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/system.mjs CHANGED
@@ -1297,7 +1297,6 @@ __export(components_exports, {
1297
1297
  Popover: () => Popover2,
1298
1298
  PopoverDialog: () => PopoverDialog2,
1299
1299
  Portal: () => Portal,
1300
- Positioner: () => Positioner,
1301
1300
  PrimaryButton: () => PrimaryButton,
1302
1301
  PrimaryDropdownButton: () => PrimaryDropdownButton,
1303
1302
  ProgressBar: () => ProgressBar2,
@@ -1307,6 +1306,7 @@ __export(components_exports, {
1307
1306
  SecondaryButton: () => SecondaryButton,
1308
1307
  SecondaryDropdownButton: () => SecondaryDropdownButton,
1309
1308
  SecondaryGhostButton: () => SecondaryGhostButton,
1309
+ Section: () => Section3,
1310
1310
  SegmentedControl: () => SegmentedControl,
1311
1311
  SegmentedControlGroup: () => SegmentedControlGroup,
1312
1312
  Select: () => Select2,
@@ -1331,6 +1331,7 @@ __export(components_exports, {
1331
1331
  asPopoverButton: () => asPopoverButton,
1332
1332
  asTabItem: () => asTabItem,
1333
1333
  createTabsComponent: () => createTabsComponent,
1334
+ usePagination: () => usePagination,
1334
1335
  usePopoverContext: () => usePopoverContext,
1335
1336
  useScrollTarget: () => useScrollTarget,
1336
1337
  useTableSelect: () => useTableSelect,
@@ -1994,6 +1995,7 @@ var tailwind_theme_default = {
1994
1995
  "grey-20": "#d2d2d6",
1995
1996
  transparent: "transparent",
1996
1997
  white: "white",
1998
+ black: "black",
1997
1999
  current: "currentColor",
1998
2000
  "navyBlue-100": "#30375E"
1999
2001
  },
@@ -4508,27 +4510,31 @@ var DataTable = ({
4508
4510
  key: column.headerName,
4509
4511
  style: { width: column.width }
4510
4512
  }, column.headerName)
4511
- )), /* @__PURE__ */ React42.createElement(Table2.Body, null, orderBy2(rows, [sort?.key], [toSortDirection(sort?.direction)]).map((row) => /* @__PURE__ */ React42.createElement(Table2.Row, {
4512
- key: row.id
4513
- }, columns.map(
4514
- (column, index) => isFieldColumn(column) ? /* @__PURE__ */ React42.createElement(Table2.Cell, {
4515
- key: column.field,
4516
- align: isNumberColumn(column) ? "right" : "left"
4517
- }, row[column.field]) : isStatusColumn(column) ? /* @__PURE__ */ React42.createElement(Table2.Cell, {
4518
- key: column.headerName
4519
- }, /* @__PURE__ */ React42.createElement(StatusChip, {
4520
- dense: true,
4521
- ...column.status(row, index, rows)
4522
- })) : isActionColumn(column) ? /* @__PURE__ */ React42.createElement(Table2.Cell, {
4523
- align: "right",
4524
- key: column.headerName
4525
- }, /* @__PURE__ */ React42.createElement(SecondaryButton, {
4526
- dense: true,
4527
- ...renameProperty("text", "children", column.action(row, index, rows))
4528
- })) : /* @__PURE__ */ React42.createElement(Table2.Cell, {
4529
- key: column.headerName
4530
- }, column.UNSAFE_render(row, index, rows))
4531
- )))));
4513
+ )), /* @__PURE__ */ React42.createElement(Table2.Body, null, /* @__PURE__ */ React42.createElement(List, {
4514
+ items: orderBy2(rows, [sort?.key], [toSortDirection(sort?.direction)]),
4515
+ renderItem: (row) => /* @__PURE__ */ React42.createElement(Table2.Row, {
4516
+ key: row.id
4517
+ }, /* @__PURE__ */ React42.createElement(List, {
4518
+ items: columns,
4519
+ renderItem: (column, index) => isFieldColumn(column) ? /* @__PURE__ */ React42.createElement(Table2.Cell, {
4520
+ key: column.field,
4521
+ align: isNumberColumn(column) ? "right" : "left"
4522
+ }, row[column.field]) : isStatusColumn(column) ? /* @__PURE__ */ React42.createElement(Table2.Cell, {
4523
+ key: column.headerName
4524
+ }, /* @__PURE__ */ React42.createElement(StatusChip, {
4525
+ dense: true,
4526
+ ...column.status(row, index, rows)
4527
+ })) : isActionColumn(column) ? /* @__PURE__ */ React42.createElement(Table2.Cell, {
4528
+ align: "right",
4529
+ key: column.headerName
4530
+ }, /* @__PURE__ */ React42.createElement(SecondaryButton, {
4531
+ dense: true,
4532
+ ...renameProperty("text", "children", column.action(row, index, rows))
4533
+ })) : /* @__PURE__ */ React42.createElement(Table2.Cell, {
4534
+ key: column.headerName
4535
+ }, column.UNSAFE_render(row, index, rows))
4536
+ }))
4537
+ })));
4532
4538
  };
4533
4539
 
4534
4540
  // src/components/Dialog/Dialog.tsx
@@ -5835,6 +5841,7 @@ var MultiInputBase = ({
5835
5841
  itemToString = (val) => String(val),
5836
5842
  createItem = (val) => val,
5837
5843
  onChange,
5844
+ onInputChange,
5838
5845
  isItemValid,
5839
5846
  disabled = false,
5840
5847
  readOnly = false,
@@ -5937,6 +5944,7 @@ var MultiInputBase = ({
5937
5944
  name,
5938
5945
  type,
5939
5946
  ...props,
5947
+ onChange: onInputChange,
5940
5948
  autoFocus,
5941
5949
  disabled,
5942
5950
  readOnly,
@@ -6696,264 +6704,13 @@ PopoverDialog2.Prompt = Prompt;
6696
6704
  import { createPortal } from "react-dom";
6697
6705
  var Portal = ({ children, to }) => createPortal(children, to);
6698
6706
 
6699
- // src/components/Positioner/Positioner.tsx
6700
- import React68 from "react";
6701
-
6702
- // src/utils/positioner.ts
6703
- import clamp2 from "lodash/clamp";
6704
- var PositionerPlacement = /* @__PURE__ */ ((PositionerPlacement2) => {
6705
- PositionerPlacement2["top"] = "top";
6706
- PositionerPlacement2["left"] = "left";
6707
- PositionerPlacement2["bottom"] = "bottom";
6708
- PositionerPlacement2["right"] = "right";
6709
- PositionerPlacement2["topLeft"] = "top-left";
6710
- PositionerPlacement2["topRight"] = "top-right";
6711
- PositionerPlacement2["bottomLeft"] = "bottom-left";
6712
- PositionerPlacement2["bottomRight"] = "bottom-right";
6713
- return PositionerPlacement2;
6714
- })(PositionerPlacement || {});
6715
- var placementOrder = [
6716
- "top" /* top */,
6717
- "top-left" /* topLeft */,
6718
- "top-right" /* topRight */,
6719
- "right" /* right */,
6720
- "bottom" /* bottom */,
6721
- "bottom-left" /* bottomLeft */,
6722
- "bottom-right" /* bottomRight */,
6723
- "left" /* left */
6724
- ];
6725
- var POSITIONER_MOUNT_ELEMENT_ID = "positioner-root";
6726
- function createMountPointElement() {
6727
- const mountElement = document.createElement("div");
6728
- mountElement.id = POSITIONER_MOUNT_ELEMENT_ID;
6729
- return mountElement;
6730
- }
6731
- function calcBottomPosition(triggerRect, contentRect, padding) {
6732
- return {
6733
- x: triggerRect.left - (contentRect.width / 2 - triggerRect.width / 2),
6734
- y: triggerRect.top + triggerRect.height + padding
6735
- };
6736
- }
6737
- function calcTopPosition(triggerRect, contentRect, padding) {
6738
- return {
6739
- x: triggerRect.left - (contentRect.width / 2 - triggerRect.width / 2),
6740
- y: triggerRect.top - contentRect.height - padding
6741
- };
6742
- }
6743
- function calcLeftPosition(triggerRect, contentRect, padding) {
6744
- return {
6745
- x: triggerRect.left - contentRect.width - padding,
6746
- y: triggerRect.top - (contentRect.height / 2 - triggerRect.height / 2)
6747
- };
6748
- }
6749
- function calcRightPosition(triggerRect, contentRect, padding) {
6750
- return {
6751
- x: triggerRect.left + triggerRect.width + padding,
6752
- y: triggerRect.top - (contentRect.height / 2 - triggerRect.height / 2)
6753
- };
6754
- }
6755
- function calcBottomLeftPosition(triggerRect, contentRect, padding) {
6756
- return {
6757
- x: triggerRect.left - contentRect.width - padding,
6758
- y: triggerRect.top + triggerRect.height + padding
6759
- };
6760
- }
6761
- function calcBottomRightPosition(triggerRect, contentRect, padding) {
6762
- return {
6763
- x: triggerRect.left + triggerRect.width + padding,
6764
- y: triggerRect.top + triggerRect.height + padding
6765
- };
6766
- }
6767
- function calcTopLeftPosition(triggerRect, contentRect, padding) {
6768
- return {
6769
- x: triggerRect.left - contentRect.width - padding,
6770
- y: triggerRect.top - contentRect.height - padding
6771
- };
6772
- }
6773
- function calcTopRightPosition(triggerRect, contentRect, padding) {
6774
- return {
6775
- x: triggerRect.left + triggerRect.width + padding,
6776
- y: triggerRect.top - contentRect.height - padding
6777
- };
6778
- }
6779
- var positionCalcFuncs = {
6780
- ["top" /* top */]: calcTopPosition,
6781
- ["top-left" /* topLeft */]: calcTopLeftPosition,
6782
- ["top-right" /* topRight */]: calcTopRightPosition,
6783
- ["bottom" /* bottom */]: calcBottomPosition,
6784
- ["bottom-left" /* bottomLeft */]: calcBottomLeftPosition,
6785
- ["bottom-right" /* bottomRight */]: calcBottomRightPosition,
6786
- ["left" /* left */]: calcLeftPosition,
6787
- ["right" /* right */]: calcRightPosition
6788
- };
6789
- function isOutOfBounds(position) {
6790
- return position.x < 0 || position.x > window.innerWidth;
6791
- }
6792
- function calcPosition(triggerRect, contentRect, placement, padding) {
6793
- return positionCalcFuncs[placement](triggerRect, contentRect, padding);
6794
- }
6795
- function calcBestPosition(triggerRect, contentRect, placement, padding) {
6796
- let attempts = 0;
6797
- return function _calcBestPosition(triggerRect2, contentRect2, placement2, padding2) {
6798
- attempts++;
6799
- const position = calcPosition(triggerRect2, contentRect2, placement2, padding2);
6800
- const hasAttemptsLeft = attempts < placementOrder.length;
6801
- if (isOutOfBounds(position) && hasAttemptsLeft) {
6802
- const nextPlacementAttempt = placementOrder[placementOrder.findIndex((p) => placement2 === p) + 1] || placementOrder[0];
6803
- return _calcBestPosition(triggerRect2, contentRect2, nextPlacementAttempt, padding2);
6804
- } else {
6805
- return {
6806
- x: clamp2(position.x + window.scrollX, 0, window.innerWidth),
6807
- y: position.y + window.scrollY
6808
- };
6809
- }
6810
- }(triggerRect, contentRect, placement, padding);
6811
- }
6812
-
6813
- // src/components/Positioner/Positioner.tsx
6814
- var Positioner = ({
6815
- children,
6816
- content,
6817
- autoAdjust = false,
6818
- animate = false,
6819
- trigger = "click",
6820
- placement = "bottom" /* bottom */,
6821
- onClose,
6822
- padding = 5,
6823
- allowClosingManually = false,
6824
- stayVisibleOnHover = false,
6825
- fullWidth = false,
6826
- tabIndex = 0
6827
- }) => {
6828
- const [isOpen, setOpen] = React68.useState(false);
6829
- const triggerRef = React68.useRef(null);
6830
- const timeoutId = React68.useRef();
6831
- React68.useEffect(() => {
6832
- return () => {
6833
- timeoutId.current && clearTimeout(timeoutId.current);
6834
- window.document.body.removeEventListener("mouseover", handleMouseOver);
6835
- };
6836
- }, []);
6837
- const handleTriggerKeyDown = (event) => event.key === "Enter" && showContent(!isOpen);
6838
- const handleTriggerClick = () => {
6839
- showContent(!isOpen);
6840
- };
6841
- const handleMouseOver = (event) => {
6842
- if (!triggerRef.current?.contains(event.target)) {
6843
- showContent(false);
6844
- window.document.body.removeEventListener("mouseover", handleMouseOver);
6845
- }
6846
- };
6847
- const showContent = (value, shouldDelay = false) => {
6848
- timeoutId.current && clearTimeout(timeoutId.current);
6849
- shouldDelay ? timeoutId.current = setTimeout(() => setOpen(value), 300) : setOpen(value);
6850
- if (!value) {
6851
- onClose?.({ triggerRef });
6852
- }
6853
- };
6854
- const handleTriggerMouseEnter = () => {
6855
- if (!stayVisibleOnHover) {
6856
- window.document.body.addEventListener("mouseover", handleMouseOver);
6857
- }
6858
- showContent(true, true);
6859
- };
6860
- const handleTriggerMouseLeave = () => showContent(false, stayVisibleOnHover);
6861
- const handleOutsideClick = React68.useCallback((event) => {
6862
- const { target } = event;
6863
- if (target !== window && !triggerRef?.current?.contains(target)) {
6864
- showContent(false);
6865
- }
6866
- }, []);
6867
- const handleESCPress = React68.useCallback(() => showContent(false), []);
6868
- const handleSetOpen = React68.useCallback((value) => showContent(value), []);
6869
- return /* @__PURE__ */ React68.createElement("div", {
6870
- className: tw("inline-block", {
6871
- "w-full": fullWidth
6872
- }),
6873
- ref: triggerRef,
6874
- onClick: trigger === "click" ? handleTriggerClick : void 0,
6875
- onKeyDown: handleTriggerKeyDown,
6876
- onMouseEnter: trigger === "hover" ? handleTriggerMouseEnter : void 0,
6877
- onMouseLeave: stayVisibleOnHover ? handleTriggerMouseLeave : void 0,
6878
- tabIndex,
6879
- "data-testid": "positioner",
6880
- id: content.props.triggerId,
6881
- "aria-haspopup": isOpen,
6882
- "aria-expanded": isOpen,
6883
- "aria-controls": content.props.contentId
6884
- }, children, isOpen && /* @__PURE__ */ React68.createElement(Positioned, {
6885
- triggerRect: triggerRef.current?.getBoundingClientRect() || { x: 0, y: 0 },
6886
- animate,
6887
- autoAdjust,
6888
- onOutsideClick: handleOutsideClick,
6889
- onESCPress: handleESCPress,
6890
- placement,
6891
- padding,
6892
- setOpen: handleSetOpen,
6893
- stayVisibleOnHover
6894
- }, allowClosingManually ? React68.cloneElement(content, { setClose: () => showContent(false) }) : content));
6895
- };
6896
- var Positioned = ({
6897
- children,
6898
- onOutsideClick,
6899
- onESCPress,
6900
- autoAdjust = false,
6901
- animate = false,
6902
- triggerRect,
6903
- placement = "bottom" /* bottom */,
6904
- padding = 5,
6905
- setOpen = () => void 0,
6906
- stayVisibleOnHover = false
6907
- }) => {
6908
- const [position, setPosition] = React68.useState({ x: 0, y: 0 });
6909
- const contentRef = React68.useRef(null);
6910
- const mountElementRef = React68.useRef(createMountPointElement());
6911
- const handleBodyClick = (event) => !contentRef.current?.contains(event.target) && onOutsideClick(event);
6912
- const handleWindowKeyUp = (event) => event.key === "Escape" && onESCPress();
6913
- const handleSetOpen = (event, value) => {
6914
- event.stopPropagation();
6915
- setOpen(value);
6916
- };
6917
- React68.useEffect(() => {
6918
- window.document.body.addEventListener("click", handleBodyClick);
6919
- window.addEventListener("keyup", handleWindowKeyUp);
6920
- document.body.appendChild(mountElementRef.current);
6921
- if (contentRef.current) {
6922
- setPosition(
6923
- autoAdjust ? calcBestPosition(triggerRect, contentRef.current.getBoundingClientRect(), placement, padding) : calcPosition(triggerRect, contentRef.current.getBoundingClientRect(), placement, padding)
6924
- );
6925
- }
6926
- return () => {
6927
- document.body.removeChild(mountElementRef.current);
6928
- window.document.body.removeEventListener("click", handleBodyClick);
6929
- window.removeEventListener("keyup", handleWindowKeyUp);
6930
- };
6931
- }, []);
6932
- return /* @__PURE__ */ React68.createElement(Portal, {
6933
- to: mountElementRef.current
6934
- }, /* @__PURE__ */ React68.createElement("div", {
6935
- tabIndex: -1,
6936
- onClick: (event) => event.stopPropagation(),
6937
- ref: contentRef,
6938
- style: {
6939
- transform: `translate(${position.x}px, ${position.y}px)`
6940
- },
6941
- className: tw("absolute top-0 left-0", {
6942
- "animate-positioner-fade-in": animate
6943
- }),
6944
- "data-testid": "positioned",
6945
- ...stayVisibleOnHover && { onMouseEnter: (e) => handleSetOpen(e, true) },
6946
- ...stayVisibleOnHover && { onMouseLeave: (e) => handleSetOpen(e, false) }
6947
- }, children));
6948
- };
6949
-
6950
6707
  // src/components/ProgressBar/ProgressBar.tsx
6951
- import React70 from "react";
6708
+ import React69 from "react";
6952
6709
 
6953
6710
  // src/common/ProgressBar/ProgressBar.tsx
6954
- import React69 from "react";
6955
- import clamp3 from "lodash/clamp";
6956
- var ProgressBar = ({ children, className, ...rest }) => /* @__PURE__ */ React69.createElement("div", {
6711
+ import React68 from "react";
6712
+ import clamp2 from "lodash/clamp";
6713
+ var ProgressBar = ({ children, className, ...rest }) => /* @__PURE__ */ React68.createElement("div", {
6957
6714
  ...rest,
6958
6715
  className: classNames(
6959
6716
  tw("relative flex items-center w-full bg-grey-0 h-2 rounded-full overflow-hidden"),
@@ -6967,8 +6724,8 @@ var STATUS_COLORS = {
6967
6724
  error: tw("bg-error-70")
6968
6725
  };
6969
6726
  ProgressBar.Indicator = ({ min, max, value, "aria-label": ariaLabel, status, className, ...rest }) => {
6970
- const completedPercentage = clamp3((value - min) / (max - min) * 100, 0, 100);
6971
- return /* @__PURE__ */ React69.createElement("div", {
6727
+ const completedPercentage = clamp2((value - min) / (max - min) * 100, 0, 100);
6728
+ return /* @__PURE__ */ React68.createElement("div", {
6972
6729
  ...rest,
6973
6730
  className: classNames(
6974
6731
  tw("h-2 rounded-full transition-all ease-in-out delay-150"),
@@ -6983,12 +6740,12 @@ ProgressBar.Indicator = ({ min, max, value, "aria-label": ariaLabel, status, cla
6983
6740
  "aria-valuemax": max
6984
6741
  });
6985
6742
  };
6986
- ProgressBar.Labels = ({ children, startLabel, endLabel, className, ...rest }) => /* @__PURE__ */ React69.createElement("div", {
6743
+ ProgressBar.Labels = ({ children, startLabel, endLabel, className, ...rest }) => /* @__PURE__ */ React68.createElement("div", {
6987
6744
  className: classNames(tw("flex flex-row"), className)
6988
- }, /* @__PURE__ */ React69.createElement("span", {
6745
+ }, /* @__PURE__ */ React68.createElement("span", {
6989
6746
  ...rest,
6990
6747
  className: tw("grow text-grey-70 typography-caption-default")
6991
- }, startLabel), /* @__PURE__ */ React69.createElement("span", {
6748
+ }, startLabel), /* @__PURE__ */ React68.createElement("span", {
6992
6749
  ...rest,
6993
6750
  className: tw("grow text-grey-70 typography-caption-default text-right")
6994
6751
  }, endLabel));
@@ -7006,7 +6763,7 @@ var ProgressBar2 = (props) => {
7006
6763
  if (min > max) {
7007
6764
  throw new Error("`min` value provided to `ProgressBar` is greater than `max` value.");
7008
6765
  }
7009
- const progress = /* @__PURE__ */ React70.createElement(ProgressBar, null, /* @__PURE__ */ React70.createElement(ProgressBar.Indicator, {
6766
+ const progress = /* @__PURE__ */ React69.createElement(ProgressBar, null, /* @__PURE__ */ React69.createElement(ProgressBar.Indicator, {
7010
6767
  status: value === max ? completedStatus : progresStatus,
7011
6768
  min,
7012
6769
  max,
@@ -7016,20 +6773,20 @@ var ProgressBar2 = (props) => {
7016
6773
  if (props.dense) {
7017
6774
  return progress;
7018
6775
  }
7019
- return /* @__PURE__ */ React70.createElement("div", null, progress, /* @__PURE__ */ React70.createElement(ProgressBar.Labels, {
6776
+ return /* @__PURE__ */ React69.createElement("div", null, progress, /* @__PURE__ */ React69.createElement(ProgressBar.Labels, {
7020
6777
  className: tw("py-2"),
7021
6778
  startLabel: props.startLabel,
7022
6779
  endLabel: props.endLabel
7023
6780
  }));
7024
6781
  };
7025
- ProgressBar2.Skeleton = () => /* @__PURE__ */ React70.createElement(Skeleton, {
6782
+ ProgressBar2.Skeleton = () => /* @__PURE__ */ React69.createElement(Skeleton, {
7026
6783
  height: 4,
7027
6784
  display: "block"
7028
6785
  });
7029
6786
 
7030
6787
  // src/components/RadioButton/RadioButton.tsx
7031
- import React71 from "react";
7032
- var RadioButton2 = React71.forwardRef(
6788
+ import React70 from "react";
6789
+ var RadioButton2 = React70.forwardRef(
7033
6790
  ({
7034
6791
  name,
7035
6792
  id,
@@ -7043,11 +6800,11 @@ var RadioButton2 = React71.forwardRef(
7043
6800
  "aria-label": ariaLabel,
7044
6801
  ...props
7045
6802
  }, ref) => {
7046
- const [checked, setChecked] = React71.useState(_checked ?? defaultChecked ?? false);
6803
+ const [checked, setChecked] = React70.useState(_checked ?? defaultChecked ?? false);
7047
6804
  if (_checked !== void 0 && checked !== _checked) {
7048
6805
  setChecked(_checked);
7049
6806
  }
7050
- return !readOnly || checked ? /* @__PURE__ */ React71.createElement(ControlLabel, {
6807
+ return !readOnly || checked ? /* @__PURE__ */ React70.createElement(ControlLabel, {
7051
6808
  htmlFor: id,
7052
6809
  label: children,
7053
6810
  "aria-label": ariaLabel,
@@ -7055,7 +6812,7 @@ var RadioButton2 = React71.forwardRef(
7055
6812
  readOnly,
7056
6813
  disabled,
7057
6814
  style: { gap: "0 8px" }
7058
- }, !readOnly && /* @__PURE__ */ React71.createElement(RadioButton, {
6815
+ }, !readOnly && /* @__PURE__ */ React70.createElement(RadioButton, {
7059
6816
  id,
7060
6817
  ref,
7061
6818
  name,
@@ -7070,22 +6827,22 @@ var RadioButton2 = React71.forwardRef(
7070
6827
  })) : null;
7071
6828
  }
7072
6829
  );
7073
- var RadioButtonSkeleton = () => /* @__PURE__ */ React71.createElement("div", {
6830
+ var RadioButtonSkeleton = () => /* @__PURE__ */ React70.createElement("div", {
7074
6831
  className: tw("flex gap-3")
7075
- }, /* @__PURE__ */ React71.createElement(Skeleton, {
6832
+ }, /* @__PURE__ */ React70.createElement(Skeleton, {
7076
6833
  height: 20,
7077
6834
  width: 20
7078
- }), /* @__PURE__ */ React71.createElement(Skeleton, {
6835
+ }), /* @__PURE__ */ React70.createElement(Skeleton, {
7079
6836
  height: 20,
7080
6837
  width: 150
7081
6838
  }));
7082
6839
  RadioButton2.Skeleton = RadioButtonSkeleton;
7083
6840
 
7084
6841
  // src/components/RadioButtonGroup/RadioButtonGroup.tsx
7085
- import React72 from "react";
6842
+ import React71 from "react";
7086
6843
  import uniqueId8 from "lodash/uniqueId";
7087
6844
  var isRadioButton = (c) => {
7088
- return React72.isValidElement(c) && c.type === RadioButton2;
6845
+ return React71.isValidElement(c) && c.type === RadioButton2;
7089
6846
  };
7090
6847
  var RadioButtonGroup = ({
7091
6848
  name,
@@ -7098,7 +6855,7 @@ var RadioButtonGroup = ({
7098
6855
  children,
7099
6856
  ...props
7100
6857
  }) => {
7101
- const [value, setValue] = React72.useState(_value ?? defaultValue ?? "");
6858
+ const [value, setValue] = React71.useState(_value ?? defaultValue ?? "");
7102
6859
  const errorMessageId = uniqueId8();
7103
6860
  const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
7104
6861
  const labelControlProps = getLabelControlProps(props);
@@ -7109,13 +6866,13 @@ var RadioButtonGroup = ({
7109
6866
  setValue(e.target.value);
7110
6867
  onChange?.(e.target.value);
7111
6868
  };
7112
- const content = React72.Children.map(children, (c) => {
6869
+ const content = React71.Children.map(children, (c) => {
7113
6870
  if (!isRadioButton(c)) {
7114
6871
  return null;
7115
6872
  }
7116
6873
  const defaultChecked = defaultValue === void 0 ? void 0 : c.props.value === defaultValue;
7117
6874
  const checked = value === void 0 ? void 0 : c.props.value === value;
7118
- return React72.cloneElement(c, {
6875
+ return React71.cloneElement(c, {
7119
6876
  name,
7120
6877
  defaultChecked: c.props.defaultChecked ?? defaultChecked,
7121
6878
  checked: c.props.checked ?? checked,
@@ -7124,13 +6881,13 @@ var RadioButtonGroup = ({
7124
6881
  readOnly
7125
6882
  });
7126
6883
  });
7127
- return /* @__PURE__ */ React72.createElement(LabelControl, {
6884
+ return /* @__PURE__ */ React71.createElement(LabelControl, {
7128
6885
  fieldset: true,
7129
6886
  ...labelControlProps,
7130
6887
  ...errorProps
7131
- }, cols && /* @__PURE__ */ React72.createElement(InputGroup, {
6888
+ }, cols && /* @__PURE__ */ React71.createElement(InputGroup, {
7132
6889
  cols
7133
- }, content), !cols && /* @__PURE__ */ React72.createElement(Flexbox, {
6890
+ }, content), !cols && /* @__PURE__ */ React71.createElement(Flexbox, {
7134
6891
  direction,
7135
6892
  alignItems: "flex-start",
7136
6893
  colGap: "8",
@@ -7139,19 +6896,64 @@ var RadioButtonGroup = ({
7139
6896
  }, content));
7140
6897
  };
7141
6898
  var RadioButtonGroupSkeleton = ({ direction = "row", options = 2 }) => {
7142
- return /* @__PURE__ */ React72.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React72.createElement("div", {
6899
+ return /* @__PURE__ */ React71.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React71.createElement("div", {
7143
6900
  className: tw("flex flex-wrap", {
7144
6901
  "flex-row gap-8": direction === "row",
7145
6902
  "flex-col gap-2": direction === "column"
7146
6903
  })
7147
- }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React72.createElement(RadioButton2.Skeleton, {
6904
+ }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React71.createElement(RadioButton2.Skeleton, {
7148
6905
  key
7149
6906
  }))));
7150
6907
  };
7151
6908
  RadioButtonGroup.Skeleton = RadioButtonGroupSkeleton;
7152
6909
 
7153
- // src/components/SegmentedControl/SegmentedControl.tsx
6910
+ // src/components/Section/Section.tsx
7154
6911
  import React73 from "react";
6912
+
6913
+ // src/common/Section/Section.tsx
6914
+ import React72 from "react";
6915
+ var Section2 = ({ children, ...rest }) => /* @__PURE__ */ React72.createElement(Box, {
6916
+ borderColor: "grey-5",
6917
+ borderWidth: "1px",
6918
+ ...rest
6919
+ }, children);
6920
+ Section2.Header = ({ children, className, ...rest }) => /* @__PURE__ */ React72.createElement("div", {
6921
+ ...rest,
6922
+ className: classNames(tw("px-6 py-5 flex gap-5 justify-between items-center"), className)
6923
+ }, children);
6924
+ Section2.TitleContainer = ({ children, className, ...rest }) => /* @__PURE__ */ React72.createElement("div", {
6925
+ ...rest,
6926
+ className: classNames(tw("flex flex-col grow gap-2"), className)
6927
+ }, children);
6928
+ Section2.Title = ({ children, ...rest }) => /* @__PURE__ */ React72.createElement(Typography2.Subheading, {
6929
+ ...rest,
6930
+ color: "black"
6931
+ }, children);
6932
+ Section2.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ React72.createElement(Typography2.SmallText, {
6933
+ ...rest,
6934
+ color: "grey-70"
6935
+ }, children);
6936
+ Section2.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ React72.createElement("div", {
6937
+ ...rest,
6938
+ className: classNames(tw("flex gap-4 justify-end"), className)
6939
+ }, children);
6940
+ Section2.Body = ({ children, className, ...rest }) => /* @__PURE__ */ React72.createElement("div", {
6941
+ ...rest,
6942
+ className: classNames(tw("p-6"), className)
6943
+ }, /* @__PURE__ */ React72.createElement(Typography, {
6944
+ htmlTag: "div",
6945
+ color: "grey-70"
6946
+ }, children));
6947
+
6948
+ // src/components/Section/Section.tsx
6949
+ import castArray4 from "lodash/castArray";
6950
+ var Section3 = ({ title, subtitle, actions, children }) => /* @__PURE__ */ React73.createElement(Section2, null, /* @__PURE__ */ React73.createElement(Section2.Header, null, /* @__PURE__ */ React73.createElement(Section2.TitleContainer, null, /* @__PURE__ */ React73.createElement(Section2.Title, null, title), /* @__PURE__ */ React73.createElement(Section2.Subtitle, null, subtitle)), /* @__PURE__ */ React73.createElement(Section2.Actions, null, actions && castArray4(actions).filter(Boolean).map(({ text, ...action }) => /* @__PURE__ */ React73.createElement(SecondaryButton, {
6951
+ key: text,
6952
+ ...action
6953
+ }, text)))), /* @__PURE__ */ React73.createElement(Divider2, null), /* @__PURE__ */ React73.createElement(Section2.Body, null, children));
6954
+
6955
+ // src/components/SegmentedControl/SegmentedControl.tsx
6956
+ import React74 from "react";
7155
6957
  var SegmentedControl = ({
7156
6958
  children,
7157
6959
  value,
@@ -7160,7 +6962,7 @@ var SegmentedControl = ({
7160
6962
  selected = false,
7161
6963
  className,
7162
6964
  ...rest
7163
- }) => /* @__PURE__ */ React73.createElement("button", {
6965
+ }) => /* @__PURE__ */ React74.createElement("button", {
7164
6966
  type: "button",
7165
6967
  ...rest,
7166
6968
  className: classNames(
@@ -7183,12 +6985,12 @@ var SegmentedControlGroup = ({
7183
6985
  "border border-grey-20 text-grey-50": variant === "outlined",
7184
6986
  "bg-grey-0": variant === "raised"
7185
6987
  });
7186
- return /* @__PURE__ */ React73.createElement("div", {
6988
+ return /* @__PURE__ */ React74.createElement("div", {
7187
6989
  ...rest,
7188
6990
  className: classNames(classes, className)
7189
- }, React73.Children.map(
6991
+ }, React74.Children.map(
7190
6992
  children,
7191
- (child) => React73.cloneElement(child, {
6993
+ (child) => React74.cloneElement(child, {
7192
6994
  dense,
7193
6995
  variant,
7194
6996
  onClick: () => onChange(child.props.value),
@@ -7226,8 +7028,8 @@ var getCommonClassNames = (dense, selected) => tw(
7226
7028
  );
7227
7029
 
7228
7030
  // src/components/Switch/Switch.tsx
7229
- import React74 from "react";
7230
- var Switch = React74.forwardRef(
7031
+ import React75 from "react";
7032
+ var Switch = React75.forwardRef(
7231
7033
  ({
7232
7034
  id,
7233
7035
  name,
@@ -7241,11 +7043,11 @@ var Switch = React74.forwardRef(
7241
7043
  "aria-label": ariaLabel,
7242
7044
  ...props
7243
7045
  }, ref) => {
7244
- const [checked, setChecked] = React74.useState(_checked ?? defaultChecked ?? false);
7046
+ const [checked, setChecked] = React75.useState(_checked ?? defaultChecked ?? false);
7245
7047
  if (_checked !== void 0 && checked !== _checked) {
7246
7048
  setChecked(_checked);
7247
7049
  }
7248
- return !readOnly || checked ? /* @__PURE__ */ React74.createElement(ControlLabel, {
7050
+ return !readOnly || checked ? /* @__PURE__ */ React75.createElement(ControlLabel, {
7249
7051
  htmlFor: id,
7250
7052
  label: children,
7251
7053
  "aria-label": ariaLabel,
@@ -7253,7 +7055,7 @@ var Switch = React74.forwardRef(
7253
7055
  readOnly,
7254
7056
  disabled,
7255
7057
  style: { gap: "0 8px" }
7256
- }, !readOnly && /* @__PURE__ */ React74.createElement(Box, {
7058
+ }, !readOnly && /* @__PURE__ */ React75.createElement(Box, {
7257
7059
  component: "span",
7258
7060
  display: "inline-flex",
7259
7061
  justifyContent: "center",
@@ -7264,7 +7066,7 @@ var Switch = React74.forwardRef(
7264
7066
  "text-grey-100 cursor-pointer": !disabled
7265
7067
  })
7266
7068
  )
7267
- }, /* @__PURE__ */ React74.createElement("input", {
7069
+ }, /* @__PURE__ */ React75.createElement("input", {
7268
7070
  id,
7269
7071
  ref,
7270
7072
  type: "checkbox",
@@ -7278,7 +7080,7 @@ var Switch = React74.forwardRef(
7278
7080
  className: tw("appearance-none peer"),
7279
7081
  readOnly,
7280
7082
  disabled
7281
- }), /* @__PURE__ */ React74.createElement("span", {
7083
+ }), /* @__PURE__ */ React75.createElement("span", {
7282
7084
  className: tw(
7283
7085
  "rounded-full inline-block w-[34px] h-[20px] transition duration-300 peer-focus:border border-info-70",
7284
7086
  {
@@ -7288,7 +7090,7 @@ var Switch = React74.forwardRef(
7288
7090
  "opacity-40": disabled && checked
7289
7091
  }
7290
7092
  )
7291
- }), /* @__PURE__ */ React74.createElement("span", {
7093
+ }), /* @__PURE__ */ React75.createElement("span", {
7292
7094
  style: {
7293
7095
  right: checked ? "20px" : void 0,
7294
7096
  left: checked ? void 0 : "4px"
@@ -7301,19 +7103,19 @@ var Switch = React74.forwardRef(
7301
7103
  }))) : null;
7302
7104
  }
7303
7105
  );
7304
- var SwitchSkeleton = () => /* @__PURE__ */ React74.createElement("div", {
7106
+ var SwitchSkeleton = () => /* @__PURE__ */ React75.createElement("div", {
7305
7107
  className: tw("flex gap-3")
7306
- }, /* @__PURE__ */ React74.createElement(Skeleton, {
7108
+ }, /* @__PURE__ */ React75.createElement(Skeleton, {
7307
7109
  height: 20,
7308
7110
  width: 35
7309
- }), /* @__PURE__ */ React74.createElement(Skeleton, {
7111
+ }), /* @__PURE__ */ React75.createElement(Skeleton, {
7310
7112
  height: 20,
7311
7113
  width: 150
7312
7114
  }));
7313
7115
  Switch.Skeleton = SwitchSkeleton;
7314
7116
 
7315
7117
  // src/components/SwitchGroup/SwitchGroup.tsx
7316
- import React75, { useState as useState10 } from "react";
7118
+ import React76, { useState as useState10 } from "react";
7317
7119
  import uniqueId9 from "lodash/uniqueId";
7318
7120
  var SwitchGroup = ({
7319
7121
  value,
@@ -7337,20 +7139,20 @@ var SwitchGroup = ({
7337
7139
  setSelectedItems(updated);
7338
7140
  onChange?.(updated);
7339
7141
  };
7340
- return /* @__PURE__ */ React75.createElement(LabelControl, {
7142
+ return /* @__PURE__ */ React76.createElement(LabelControl, {
7341
7143
  fieldset: true,
7342
7144
  ...labelControlProps,
7343
7145
  ...errorProps
7344
- }, /* @__PURE__ */ React75.createElement(InputGroup, {
7146
+ }, /* @__PURE__ */ React76.createElement(InputGroup, {
7345
7147
  cols
7346
- }, React75.Children.map(children, (c) => {
7148
+ }, React76.Children.map(children, (c) => {
7347
7149
  if (!isComponentType(c, Switch)) {
7348
7150
  return null;
7349
7151
  }
7350
7152
  const str = c.props.value?.toString();
7351
7153
  const defaultChecked = defaultValue === void 0 ? void 0 : str !== void 0 && defaultValue.includes(str);
7352
7154
  const checked = value === void 0 ? void 0 : str !== void 0 && value.includes(str);
7353
- return React75.cloneElement(c, {
7155
+ return React76.cloneElement(c, {
7354
7156
  defaultChecked: c.props.defaultChecked ?? defaultChecked,
7355
7157
  checked: c.props.checked ?? checked,
7356
7158
  onChange: c.props.onChange ?? handleChange,
@@ -7360,17 +7162,17 @@ var SwitchGroup = ({
7360
7162
  })));
7361
7163
  };
7362
7164
  var SwitchGroupSkeleton = ({ options = 2 }) => {
7363
- return /* @__PURE__ */ React75.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React75.createElement("div", {
7165
+ return /* @__PURE__ */ React76.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React76.createElement("div", {
7364
7166
  className: tw("flex flex-wrap flex-col gap-2")
7365
- }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React75.createElement(Switch.Skeleton, {
7167
+ }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React76.createElement(Switch.Skeleton, {
7366
7168
  key
7367
7169
  }))));
7368
7170
  };
7369
7171
  SwitchGroup.Skeleton = SwitchGroupSkeleton;
7370
7172
 
7371
7173
  // src/components/TagLabel/TagLabel.tsx
7372
- import React76 from "react";
7373
- var TagLabel = ({ title, dense = false, ...rest }) => /* @__PURE__ */ React76.createElement("span", {
7174
+ import React77 from "react";
7175
+ var TagLabel = ({ title, dense = false, ...rest }) => /* @__PURE__ */ React77.createElement("span", {
7374
7176
  ...rest,
7375
7177
  className: tw("rounded-full text-white bg-primary-70", {
7376
7178
  "py-2 px-4 typography-caption-default": !dense,
@@ -7379,35 +7181,35 @@ var TagLabel = ({ title, dense = false, ...rest }) => /* @__PURE__ */ React76.cr
7379
7181
  }, title);
7380
7182
 
7381
7183
  // src/components/Textarea/Textarea.tsx
7382
- import React77, { useRef as useRef10, useState as useState11 } from "react";
7184
+ import React78, { useRef as useRef10, useState as useState11 } from "react";
7383
7185
  import uniqueId10 from "lodash/uniqueId";
7384
7186
  import toString2 from "lodash/toString";
7385
7187
  import omit16 from "lodash/omit";
7386
- var TextareaBase = React77.forwardRef(
7387
- ({ readOnly = false, valid = true, ...props }, ref) => /* @__PURE__ */ React77.createElement("textarea", {
7188
+ var TextareaBase = React78.forwardRef(
7189
+ ({ readOnly = false, valid = true, ...props }, ref) => /* @__PURE__ */ React78.createElement("textarea", {
7388
7190
  ref,
7389
7191
  ...props,
7390
7192
  readOnly,
7391
7193
  className: classNames(getCommonInputStyles({ readOnly, valid }), props.className)
7392
7194
  })
7393
7195
  );
7394
- TextareaBase.Skeleton = () => /* @__PURE__ */ React77.createElement(Skeleton, {
7196
+ TextareaBase.Skeleton = () => /* @__PURE__ */ React78.createElement(Skeleton, {
7395
7197
  height: 58
7396
7198
  });
7397
- var Textarea = React77.forwardRef((props, ref) => {
7199
+ var Textarea = React78.forwardRef((props, ref) => {
7398
7200
  const [value, setValue] = useState11(props.value ?? props.defaultValue ?? "");
7399
7201
  const id = useRef10(props.id ?? `textarea-${uniqueId10()}`);
7400
7202
  const errorMessageId = uniqueId10();
7401
7203
  const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
7402
7204
  const { "data-testid": dataTestId, ...labelControlProps } = getLabelControlProps(props);
7403
7205
  const baseProps = omit16(props, Object.keys(labelControlProps));
7404
- return /* @__PURE__ */ React77.createElement(LabelControl, {
7206
+ return /* @__PURE__ */ React78.createElement(LabelControl, {
7405
7207
  id: `${id.current}-label`,
7406
7208
  htmlFor: id.current,
7407
7209
  messageId: errorMessageId,
7408
7210
  length: value !== void 0 ? toString2(value).length : void 0,
7409
7211
  ...labelControlProps
7410
- }, /* @__PURE__ */ React77.createElement(TextareaBase, {
7212
+ }, /* @__PURE__ */ React78.createElement(TextareaBase, {
7411
7213
  ref,
7412
7214
  ...baseProps,
7413
7215
  ...errorProps,
@@ -7423,12 +7225,158 @@ var Textarea = React77.forwardRef((props, ref) => {
7423
7225
  valid: props.valid
7424
7226
  }));
7425
7227
  });
7426
- var TextAreaSkeleton = () => /* @__PURE__ */ React77.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React77.createElement(TextareaBase.Skeleton, null));
7228
+ var TextAreaSkeleton = () => /* @__PURE__ */ React78.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React78.createElement(TextareaBase.Skeleton, null));
7427
7229
  Textarea.Skeleton = TextAreaSkeleton;
7428
7230
 
7231
+ // src/components/Pagination/usePagination.tsx
7232
+ import { useState as useState12, useEffect as useEffect6 } from "react";
7233
+ var initialState = {
7234
+ currentPage: 1,
7235
+ pageSize: 10
7236
+ };
7237
+ var getPageIndex = (currentPage, pageSize) => currentPage === 0 ? 0 : (currentPage - 1) * pageSize;
7238
+ var usePagination = (items, options) => {
7239
+ const [currentPage, setCurrentPage] = useState12(options?.initialPage || initialState.currentPage);
7240
+ const [pageSize, setPageSize] = useState12(options?.initialPageSize || initialState.pageSize);
7241
+ const totalPages = items.length > 0 ? Math.ceil(items.length / pageSize) : 1;
7242
+ const hasPreviousPage = currentPage > 1;
7243
+ const hasNextPage = currentPage < totalPages;
7244
+ const pageIndex = getPageIndex(currentPage, pageSize);
7245
+ const onPageSizeChange = (pageSize2) => {
7246
+ setPageSize(pageSize2);
7247
+ setCurrentPage(options?.initialPage || initialState.currentPage);
7248
+ };
7249
+ useEffect6(() => {
7250
+ setCurrentPage(options?.initialPage || initialState.currentPage);
7251
+ }, [items.length]);
7252
+ return [
7253
+ items.slice(pageIndex, Math.min(pageIndex + pageSize, items.length)),
7254
+ {
7255
+ currentPage,
7256
+ totalPages,
7257
+ pageSize,
7258
+ hasPreviousPage,
7259
+ hasNextPage,
7260
+ onPageChange: setCurrentPage,
7261
+ onPageSizeChange
7262
+ }
7263
+ ];
7264
+ };
7265
+
7429
7266
  // src/components/index.ts
7430
7267
  var SelectItem = Select.Item;
7431
7268
 
7269
+ // src/utils/positioner.ts
7270
+ import clamp3 from "lodash/clamp";
7271
+ var PositionerPlacement = /* @__PURE__ */ ((PositionerPlacement2) => {
7272
+ PositionerPlacement2["top"] = "top";
7273
+ PositionerPlacement2["left"] = "left";
7274
+ PositionerPlacement2["bottom"] = "bottom";
7275
+ PositionerPlacement2["right"] = "right";
7276
+ PositionerPlacement2["topLeft"] = "top-left";
7277
+ PositionerPlacement2["topRight"] = "top-right";
7278
+ PositionerPlacement2["bottomLeft"] = "bottom-left";
7279
+ PositionerPlacement2["bottomRight"] = "bottom-right";
7280
+ return PositionerPlacement2;
7281
+ })(PositionerPlacement || {});
7282
+ var placementOrder = [
7283
+ "top" /* top */,
7284
+ "top-left" /* topLeft */,
7285
+ "top-right" /* topRight */,
7286
+ "right" /* right */,
7287
+ "bottom" /* bottom */,
7288
+ "bottom-left" /* bottomLeft */,
7289
+ "bottom-right" /* bottomRight */,
7290
+ "left" /* left */
7291
+ ];
7292
+ var POSITIONER_MOUNT_ELEMENT_ID = "positioner-root";
7293
+ function createMountPointElement() {
7294
+ const mountElement = document.createElement("div");
7295
+ mountElement.id = POSITIONER_MOUNT_ELEMENT_ID;
7296
+ return mountElement;
7297
+ }
7298
+ function calcBottomPosition(triggerRect, contentRect, padding) {
7299
+ return {
7300
+ x: triggerRect.left - (contentRect.width / 2 - triggerRect.width / 2),
7301
+ y: triggerRect.top + triggerRect.height + padding
7302
+ };
7303
+ }
7304
+ function calcTopPosition(triggerRect, contentRect, padding) {
7305
+ return {
7306
+ x: triggerRect.left - (contentRect.width / 2 - triggerRect.width / 2),
7307
+ y: triggerRect.top - contentRect.height - padding
7308
+ };
7309
+ }
7310
+ function calcLeftPosition(triggerRect, contentRect, padding) {
7311
+ return {
7312
+ x: triggerRect.left - contentRect.width - padding,
7313
+ y: triggerRect.top - (contentRect.height / 2 - triggerRect.height / 2)
7314
+ };
7315
+ }
7316
+ function calcRightPosition(triggerRect, contentRect, padding) {
7317
+ return {
7318
+ x: triggerRect.left + triggerRect.width + padding,
7319
+ y: triggerRect.top - (contentRect.height / 2 - triggerRect.height / 2)
7320
+ };
7321
+ }
7322
+ function calcBottomLeftPosition(triggerRect, contentRect, padding) {
7323
+ return {
7324
+ x: triggerRect.left - contentRect.width - padding,
7325
+ y: triggerRect.top + triggerRect.height + padding
7326
+ };
7327
+ }
7328
+ function calcBottomRightPosition(triggerRect, contentRect, padding) {
7329
+ return {
7330
+ x: triggerRect.left + triggerRect.width + padding,
7331
+ y: triggerRect.top + triggerRect.height + padding
7332
+ };
7333
+ }
7334
+ function calcTopLeftPosition(triggerRect, contentRect, padding) {
7335
+ return {
7336
+ x: triggerRect.left - contentRect.width - padding,
7337
+ y: triggerRect.top - contentRect.height - padding
7338
+ };
7339
+ }
7340
+ function calcTopRightPosition(triggerRect, contentRect, padding) {
7341
+ return {
7342
+ x: triggerRect.left + triggerRect.width + padding,
7343
+ y: triggerRect.top - contentRect.height - padding
7344
+ };
7345
+ }
7346
+ var positionCalcFuncs = {
7347
+ ["top" /* top */]: calcTopPosition,
7348
+ ["top-left" /* topLeft */]: calcTopLeftPosition,
7349
+ ["top-right" /* topRight */]: calcTopRightPosition,
7350
+ ["bottom" /* bottom */]: calcBottomPosition,
7351
+ ["bottom-left" /* bottomLeft */]: calcBottomLeftPosition,
7352
+ ["bottom-right" /* bottomRight */]: calcBottomRightPosition,
7353
+ ["left" /* left */]: calcLeftPosition,
7354
+ ["right" /* right */]: calcRightPosition
7355
+ };
7356
+ function isOutOfBounds(position) {
7357
+ return position.x < 0 || position.x > window.innerWidth;
7358
+ }
7359
+ function calcPosition(triggerRect, contentRect, placement, padding) {
7360
+ return positionCalcFuncs[placement](triggerRect, contentRect, padding);
7361
+ }
7362
+ function calcBestPosition(triggerRect, contentRect, placement, padding) {
7363
+ let attempts = 0;
7364
+ return function _calcBestPosition(triggerRect2, contentRect2, placement2, padding2) {
7365
+ attempts++;
7366
+ const position = calcPosition(triggerRect2, contentRect2, placement2, padding2);
7367
+ const hasAttemptsLeft = attempts < placementOrder.length;
7368
+ if (isOutOfBounds(position) && hasAttemptsLeft) {
7369
+ const nextPlacementAttempt = placementOrder[placementOrder.findIndex((p) => placement2 === p) + 1] || placementOrder[0];
7370
+ return _calcBestPosition(triggerRect2, contentRect2, nextPlacementAttempt, padding2);
7371
+ } else {
7372
+ return {
7373
+ x: clamp3(position.x + window.scrollX, 0, window.innerWidth),
7374
+ y: position.y + window.scrollY
7375
+ };
7376
+ }
7377
+ }(triggerRect, contentRect, placement, padding);
7378
+ }
7379
+
7432
7380
  // src/system.ts
7433
7381
  var system_default = {
7434
7382
  ...components_exports,
@@ -7501,7 +7449,6 @@ export {
7501
7449
  Popover2 as Popover,
7502
7450
  PopoverDialog2 as PopoverDialog,
7503
7451
  Portal,
7504
- Positioner,
7505
7452
  PositionerPlacement,
7506
7453
  PrimaryButton,
7507
7454
  PrimaryDropdownButton,
@@ -7512,6 +7459,7 @@ export {
7512
7459
  SecondaryButton,
7513
7460
  SecondaryDropdownButton,
7514
7461
  SecondaryGhostButton,
7462
+ Section3 as Section,
7515
7463
  SegmentedControl,
7516
7464
  SegmentedControlGroup,
7517
7465
  Select2 as Select,
@@ -7554,6 +7502,7 @@ export {
7554
7502
  isOutOfBounds,
7555
7503
  placementOrder,
7556
7504
  export_theme as theme,
7505
+ usePagination,
7557
7506
  usePopoverContext,
7558
7507
  useScrollTarget,
7559
7508
  useTableSelect,