@tonyarbor/components 0.1.0 → 0.2.1

package/dist/Tooltip.d.mts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+interface TooltipProps {
+    /**
+     * The content to display in the tooltip
+     */
+    content: string;
+    /**
+     * The trigger element that shows the tooltip on hover
+     */
+    children: React.ReactNode;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React.CSSProperties;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+}
+/**
+ * Tooltip component - Arbor Design System
+ *
+ * A tooltip that appears on hover over a trigger element.
+ */
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Tooltip, type TooltipProps };

package/dist/Tooltip.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+interface TooltipProps {
+    /**
+     * The content to display in the tooltip
+     */
+    content: string;
+    /**
+     * The trigger element that shows the tooltip on hover
+     */
+    children: React.ReactNode;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React.CSSProperties;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+}
+/**
+ * Tooltip component - Arbor Design System
+ *
+ * A tooltip that appears on hover over a trigger element.
+ */
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Tooltip, type TooltipProps };

package/dist/Tooltip.js

@@ -0,0 +1,109 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Tooltip/index.ts
+var Tooltip_exports = {};
+__export(Tooltip_exports, {
+  Tooltip: () => Tooltip
+});
+module.exports = __toCommonJS(Tooltip_exports);
+
+// src/Tooltip/Tooltip.tsx
+var React = __toESM(require("react"));
+var import_clsx = require("clsx");
+var import_jsx_runtime = require("react/jsx-runtime");
+var tooltipStyles = {
+  position: "absolute",
+  bottom: "calc(100% + 8px)",
+  left: "50%",
+  transform: "translateX(-50%)",
+  backgroundColor: "#2f2f2f",
+  color: "#ffffff",
+  padding: "12px",
+  borderRadius: "8px",
+  boxShadow: "0px 4px 12px 0px rgba(32, 32, 32, 0.08)",
+  fontSize: "13px",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  fontWeight: 400,
+  lineHeight: 1.5,
+  whiteSpace: "nowrap",
+  pointerEvents: "none",
+  zIndex: 1e3,
+  opacity: 0,
+  transition: "opacity 0.2s ease-in-out"
+};
+var wrapperStyles = {
+  position: "relative",
+  display: "inline-block"
+};
+var Tooltip = React.forwardRef(
+  ({
+    content,
+    children,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [isVisible, setIsVisible] = React.useState(false);
+    const visibleTooltipStyles = {
+      ...tooltipStyles,
+      opacity: isVisible ? 1 : 0,
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref,
+        style: wrapperStyles,
+        onMouseEnter: () => setIsVisible(true),
+        onMouseLeave: () => setIsVisible(false),
+        "data-testid": dataTestId,
+        children: [
+          children,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: (0, import_clsx.clsx)("arbor-tooltip", className),
+              style: visibleTooltipStyles,
+              role: "tooltip",
+              "aria-hidden": !isVisible,
+              children: content
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Tooltip.displayName = "Tooltip";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tooltip
+});
+//# sourceMappingURL=Tooltip.js.map

package/dist/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Tooltip/index.ts","../src/Tooltip/Tooltip.tsx"],"sourcesContent":["export { Tooltip } from './Tooltip';\nexport type { TooltipProps } from './Tooltip';\n","import * as React from 'react';\nimport { clsx } from 'clsx';\n\nexport interface TooltipProps {\n  /**\n   * The content to display in the tooltip\n   */\n  content: string;\n  /**\n   * The trigger element that shows the tooltip on hover\n   */\n  children: React.ReactNode;\n  /**\n   * Custom className\n   */\n  className?: string;\n  /**\n   * Custom style\n   */\n  style?: React.CSSProperties;\n  /**\n   * Test ID for testing\n   */\n  'data-testid'?: string;\n}\n\nconst tooltipStyles: React.CSSProperties = {\n  position: 'absolute',\n  bottom: 'calc(100% + 8px)',\n  left: '50%',\n  transform: 'translateX(-50%)',\n  backgroundColor: '#2f2f2f',\n  color: '#ffffff',\n  padding: '12px',\n  borderRadius: '8px',\n  boxShadow: '0px 4px 12px 0px rgba(32, 32, 32, 0.08)',\n  fontSize: '13px',\n  fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n  fontWeight: 400,\n  lineHeight: 1.5,\n  whiteSpace: 'nowrap',\n  pointerEvents: 'none',\n  zIndex: 1000,\n  opacity: 0,\n  transition: 'opacity 0.2s ease-in-out',\n};\n\nconst wrapperStyles: React.CSSProperties = {\n  position: 'relative',\n  display: 'inline-block',\n};\n\n/**\n * Tooltip component - Arbor Design System\n *\n * A tooltip that appears on hover over a trigger element.\n */\nexport const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(\n  (\n    {\n      content,\n      children,\n      className,\n      style,\n      'data-testid': dataTestId,\n    },\n    ref\n  ) => {\n    const [isVisible, setIsVisible] = React.useState(false);\n\n    const visibleTooltipStyles: React.CSSProperties = {\n      ...tooltipStyles,\n      opacity: isVisible ? 1 : 0,\n      ...style,\n    };\n\n    return (\n      <div\n        ref={ref}\n        style={wrapperStyles}\n        onMouseEnter={() => setIsVisible(true)}\n        onMouseLeave={() => setIsVisible(false)}\n        data-testid={dataTestId}\n      >\n        {children}\n        <div\n          className={clsx('arbor-tooltip', className)}\n          style={visibleTooltipStyles}\n          role=\"tooltip\"\n          aria-hidden={!isVisible}\n        >\n          {content}\n        </div>\n      </div>\n    );\n  }\n);\n\nTooltip.displayName = 'Tooltip';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,kBAAqB;AA4Ef;AAnDN,IAAM,gBAAqC;AAAA,EACzC,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,cAAc;AAAA,EACd,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,YAAY;AACd;AAEA,IAAM,gBAAqC;AAAA,EACzC,UAAU;AAAA,EACV,SAAS;AACX;AAOO,IAAM,UAAgB;AAAA,EAC3B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,EACjB,GACA,QACG;AACH,UAAM,CAAC,WAAW,YAAY,IAAU,eAAS,KAAK;AAEtD,UAAM,uBAA4C;AAAA,MAChD,GAAG;AAAA,MACH,SAAS,YAAY,IAAI;AAAA,MACzB,GAAG;AAAA,IACL;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,cAAc,MAAM,aAAa,IAAI;AAAA,QACrC,cAAc,MAAM,aAAa,KAAK;AAAA,QACtC,eAAa;AAAA,QAEZ;AAAA;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACC,eAAW,kBAAK,iBAAiB,SAAS;AAAA,cAC1C,OAAO;AAAA,cACP,MAAK;AAAA,cACL,eAAa,CAAC;AAAA,cAEb;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;","names":[]}

package/dist/Tooltip.mjs

@@ -0,0 +1,7 @@
+import {
+  Tooltip
+} from "./chunk-MNH2TGUX.mjs";
+export {
+  Tooltip
+};
+//# sourceMappingURL=Tooltip.mjs.map

package/dist/Tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-52TG3BFX.mjs

@@ -0,0 +1,463 @@
+// src/TableFooterPagination/TableFooterPagination.tsx
+import * as React from "react";
+import { clsx } from "clsx";
+import { ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var containerStyles = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  backgroundColor: "white",
+  paddingTop: "4px",
+  paddingBottom: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var textStyles = {
+  fontSize: "13px",
+  fontWeight: 400,
+  lineHeight: "1.5",
+  color: "#2f2f2f",
+  minWidth: "165px"
+};
+var paginationWrapperStyles = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "8px",
+  minWidth: "165px",
+  flexWrap: "wrap"
+};
+var paginationButtonStyles = {
+  width: "32px",
+  height: "32px",
+  minWidth: "32px",
+  minHeight: "32px",
+  maxWidth: "32px",
+  maxHeight: "32px",
+  borderRadius: "99px",
+  border: "none",
+  background: "white",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 0,
+  transition: "background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out",
+  flexShrink: 0,
+  WebkitTapHighlightColor: "transparent",
+  outline: "none"
+};
+var paginationButtonDisabledStyles = {
+  cursor: "not-allowed",
+  opacity: 0.5
+};
+var paginationLabelStyles = {
+  fontSize: "13px",
+  fontWeight: 400,
+  lineHeight: "1.5",
+  color: "#2f2f2f"
+};
+var paginationInputWrapperStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px"
+};
+var paginationInputStyles = {
+  width: "60px",
+  paddingTop: "12px",
+  paddingBottom: "12px",
+  paddingLeft: "16px",
+  paddingRight: "16px",
+  fontSize: "13px",
+  fontWeight: 400,
+  lineHeight: "1.5",
+  color: "#2f2f2f",
+  backgroundColor: "white",
+  border: "1px solid #dfdfdf",
+  borderRadius: "8px",
+  fontFamily: "inherit",
+  textAlign: "center",
+  outline: "none"
+};
+var paginationInputFocusStyles = {
+  boxShadow: "0px 0px 0px 3px #3cad51"
+};
+var rightAlignedStyles = {
+  display: "flex",
+  gap: "16px",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  minWidth: "165px"
+};
+var perPageButtonStyles = {
+  height: "32px",
+  backgroundColor: "white",
+  border: "1px solid #d1d1d1",
+  borderRadius: "8px",
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  paddingLeft: "12px",
+  paddingRight: "8px",
+  paddingTop: "8px",
+  paddingBottom: "8px",
+  cursor: "pointer",
+  transition: "background-color 0.2s ease-in-out",
+  outline: "none"
+};
+var perPageTextStyles = {
+  fontSize: "13px",
+  fontWeight: 600,
+  lineHeight: "1.5",
+  color: "#2f2f2f",
+  textAlign: "center"
+};
+var expandButtonStyles = {
+  height: "32px",
+  minHeight: "32px",
+  backgroundColor: "#efefef",
+  border: "none",
+  borderRadius: "99px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  paddingLeft: "16px",
+  paddingRight: "16px",
+  paddingTop: 0,
+  paddingBottom: 0,
+  gap: 0,
+  cursor: "pointer",
+  transition: "background-color 0.2s ease-in-out",
+  outline: "none"
+};
+var expandButtonTextStyles = {
+  fontSize: "13px",
+  fontWeight: 600,
+  lineHeight: "1.5",
+  color: "#2f2f2f",
+  textAlign: "center"
+};
+var TableFooterPagination = React.forwardRef(
+  ({
+    currentPage,
+    totalPages,
+    onPageChange,
+    totalResults,
+    currentResults,
+    itemsPerPage,
+    onItemsPerPageChange,
+    onExpandTable,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [inputValue, setInputValue] = React.useState(currentPage.toString());
+    const [focusedButton, setFocusedButton] = React.useState(null);
+    const [hoveredButton, setHoveredButton] = React.useState(null);
+    const [activeButton, setActiveButton] = React.useState(null);
+    const [inputFocused, setInputFocused] = React.useState(false);
+    const [perPageHovered, setPerPageHovered] = React.useState(false);
+    const [expandHovered, setExpandHovered] = React.useState(false);
+    React.useEffect(() => {
+      setInputValue(currentPage.toString());
+    }, [currentPage]);
+    const handleFirstPage = () => {
+      if (currentPage !== 1) {
+        onPageChange(1);
+      }
+    };
+    const handlePreviousPage = () => {
+      if (currentPage > 1) {
+        onPageChange(currentPage - 1);
+      }
+    };
+    const handleNextPage = () => {
+      if (currentPage < totalPages) {
+        onPageChange(currentPage + 1);
+      }
+    };
+    const handleLastPage = () => {
+      if (currentPage !== totalPages) {
+        onPageChange(totalPages);
+      }
+    };
+    const handleInputChange = (e) => {
+      const value = e.target.value;
+      if (value === "" || /^\d+$/.test(value)) {
+        setInputValue(value);
+      }
+    };
+    const handleInputBlur = () => {
+      setInputFocused(false);
+      const pageNumber = parseInt(inputValue, 10);
+      if (isNaN(pageNumber) || pageNumber < 1) {
+        setInputValue(currentPage.toString());
+      } else if (pageNumber > totalPages) {
+        setInputValue(totalPages.toString());
+        onPageChange(totalPages);
+      } else if (pageNumber !== currentPage) {
+        onPageChange(pageNumber);
+      }
+    };
+    const handleInputKeyDown = (e) => {
+      if (e.key === "Enter") {
+        handleInputBlur();
+        e.target.blur();
+      }
+    };
+    const getButtonStyle = (buttonName, disabled) => {
+      if (disabled) {
+        return { ...paginationButtonStyles, ...paginationButtonDisabledStyles };
+      }
+      const isHovered = hoveredButton === buttonName;
+      const isFocused = focusedButton === buttonName;
+      const isActive = activeButton === buttonName;
+      const style2 = {
+        ...paginationButtonStyles
+      };
+      if (isHovered && !isFocused && !isActive) {
+        style2.backgroundColor = "#efefef";
+      }
+      if (isActive && !isFocused) {
+        style2.backgroundColor = "transparent";
+      }
+      if (isFocused) {
+        style2.boxShadow = "0px 0px 0px 3px #3cad51";
+        style2.backgroundColor = "rgba(255, 255, 255, 0.01)";
+      }
+      return style2;
+    };
+    const isFirstDisabled = currentPage === 1;
+    const isPreviousDisabled = currentPage === 1;
+    const isNextDisabled = currentPage === totalPages;
+    const isLastDisabled = currentPage === totalPages;
+    const resultText = currentResults === totalResults ? `Showing ${totalResults} results` : `Showing ${currentResults} of ${totalResults} results`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clsx("arbor-table-footer-pagination", className),
+        style: { ...containerStyles, ...style },
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ jsx("div", { style: textStyles, children: resultText }),
+          /* @__PURE__ */ jsxs("div", { style: paginationWrapperStyles, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleFirstPage,
+                disabled: isFirstDisabled,
+                onMouseEnter: () => setHoveredButton("first"),
+                onMouseLeave: () => setHoveredButton(null),
+                onMouseDown: () => setActiveButton("first"),
+                onMouseUp: () => setActiveButton(null),
+                onFocus: () => setFocusedButton("first"),
+                onBlur: () => setFocusedButton(null),
+                style: getButtonStyle("first", isFirstDisabled),
+                "aria-label": "Go to first page",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M7 12L3 8L7 4M11 12L7 8L11 4",
+                        stroke: "#2f2f2f",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handlePreviousPage,
+                disabled: isPreviousDisabled,
+                onMouseEnter: () => setHoveredButton("previous"),
+                onMouseLeave: () => setHoveredButton(null),
+                onMouseDown: () => setActiveButton("previous"),
+                onMouseUp: () => setActiveButton(null),
+                onFocus: () => setFocusedButton("previous"),
+                onBlur: () => setFocusedButton(null),
+                style: getButtonStyle("previous", isPreviousDisabled),
+                "aria-label": "Go to previous page",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M10 12L6 8L10 4",
+                        stroke: "#2f2f2f",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { style: paginationInputWrapperStyles, children: [
+              /* @__PURE__ */ jsx("span", { style: paginationLabelStyles, children: "Page" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  value: inputValue,
+                  onChange: handleInputChange,
+                  onBlur: handleInputBlur,
+                  onFocus: () => setInputFocused(true),
+                  onKeyDown: handleInputKeyDown,
+                  style: {
+                    ...paginationInputStyles,
+                    ...inputFocused && paginationInputFocusStyles
+                  },
+                  "aria-label": `Page ${currentPage} of ${totalPages}`
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { style: paginationLabelStyles, children: [
+                "of ",
+                totalPages
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleNextPage,
+                disabled: isNextDisabled,
+                onMouseEnter: () => setHoveredButton("next"),
+                onMouseLeave: () => setHoveredButton(null),
+                onMouseDown: () => setActiveButton("next"),
+                onMouseUp: () => setActiveButton(null),
+                onFocus: () => setFocusedButton("next"),
+                onBlur: () => setFocusedButton(null),
+                style: getButtonStyle("next", isNextDisabled),
+                "aria-label": "Go to next page",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M6 4L10 8L6 12",
+                        stroke: "#2f2f2f",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleLastPage,
+                disabled: isLastDisabled,
+                onMouseEnter: () => setHoveredButton("last"),
+                onMouseLeave: () => setHoveredButton(null),
+                onMouseDown: () => setActiveButton("last"),
+                onMouseUp: () => setActiveButton(null),
+                onFocus: () => setFocusedButton("last"),
+                onBlur: () => setFocusedButton(null),
+                style: getButtonStyle("last", isLastDisabled),
+                "aria-label": "Go to last page",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M9 4L13 8L9 12M5 4L9 8L5 12",
+                        stroke: "#2f2f2f",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: rightAlignedStyles, children: [
+            onItemsPerPageChange && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => onItemsPerPageChange(itemsPerPage),
+                onMouseEnter: () => setPerPageHovered(true),
+                onMouseLeave: () => setPerPageHovered(false),
+                style: {
+                  ...perPageButtonStyles,
+                  backgroundColor: perPageHovered ? "#f5f5f5" : "white"
+                },
+                "aria-label": "Items per page",
+                children: [
+                  /* @__PURE__ */ jsxs("span", { style: perPageTextStyles, children: [
+                    itemsPerPage,
+                    " per page"
+                  ] }),
+                  /* @__PURE__ */ jsx(ChevronDown, { size: 16, color: "#2f2f2f" })
+                ]
+              }
+            ),
+            onExpandTable && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onExpandTable,
+                onMouseEnter: () => setExpandHovered(true),
+                onMouseLeave: () => setExpandHovered(false),
+                style: {
+                  ...expandButtonStyles,
+                  backgroundColor: expandHovered ? "#e5e5e5" : "#efefef"
+                },
+                "aria-label": "Expand table",
+                children: /* @__PURE__ */ jsx("span", { style: expandButtonTextStyles, children: "Expand table" })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+TableFooterPagination.displayName = "TableFooterPagination";
+
+export {
+  TableFooterPagination
+};
+//# sourceMappingURL=chunk-52TG3BFX.mjs.map