@binamik/components 0.1.1 → 0.1.2

package/dist/binamik-components.es.js

@@ -31,7 +31,8 @@ var __objRest = (source, exclude) => {
 };
 import { keyframes, css, Global } from "@emotion/react";
 import styled from "@emotion/styled";
-import require$$0 from "react";
+import React, { useMemo, useCallback, useState, useEffect, createContext, Fragment as Fragment$1, useContext } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 const dashAnimation = keyframes`
   0% {
     stroke-dasharray: 1, 200;
@@ -158,7 +159,7 @@ shouldUseNative() ? Object.assign : function(target, source) {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var f = require$$0, g = 60103;
+var f = React, g = 60103;
 reactJsxRuntime_production_min.Fragment = 60107;
 if (typeof Symbol === "function" && Symbol.for) {
   var h = Symbol.for;
@@ -185,6 +186,7 @@ reactJsxRuntime_production_min.jsxs = q;
 }
 const jsx = jsxRuntime.exports.jsx;
 const jsxs = jsxRuntime.exports.jsxs;
+const Fragment = jsxRuntime.exports.Fragment;
 const Spinner = ({
   size,
   color,
@@ -693,4 +695,769 @@ const PreventScroll = () => {
       `
   });
 };
-export { Button, PreventScroll, Spinner, binamikCssReset, binamikGlobalStyles, binamikTheme, depth };
+const MIN_TABLE_MOBILE_BREAKPOINT = 480;
+const parseBreakpointProp = (props) => Math.max(props.mobileBreakpoint, MIN_TABLE_MOBILE_BREAKPOINT);
+const filterProps = {
+  shouldForwardProp(prop) {
+    return !["columnTemplate", "mobileBreakpoint", "customCss"].includes(prop);
+  }
+};
+const TableWrapper = styled(motion.div, filterProps)`
+  --radius: 0.625rem;
+  --column-template: ${(props) => props.columnTemplate};
+  --table-padding: 1.875rem;
+
+  --header-row-display: grid;
+  --label-background: rgba(0, 0, 0, 0.045);
+  --highlight-transition: 150ms ease-in-out;
+
+  --row-padding: 0.5rem;
+  --row-margin: 0;
+  --row-border: none;
+  --row-even-background: var(--clr-gray14);
+  --row-odd-background: var(--clr-white);
+  --row-hover-background: var(--clr-gray11);
+
+  --cell-column-template: 1fr;
+  --cell-padding: 0.75rem;
+
+  --row-annex-border: 1px solid var(--clr-gray7);
+  --row-annex-padding: calc(var(--row-padding) + var(--cell-padding));
+  --row-annex-margin: 0 var(--row-annex-padding) var(--row-annex-padding);
+
+  --mobile-decorators-content: none;
+  --mobile-ref-width: 20ch;
+  --mobile-ref-display: none;
+  --mobile-sorting-display: none;
+
+  --table-row-height: 3.75rem;
+
+  width: 100%;
+  color: #2d2d2d;
+  line-height: 1.25;
+  border-collapse: collapse;
+  background-color: var(--clr-white);
+  border: 1px solid var(--clr-gray11);
+  padding: var(--table-padding);
+  border-radius: var(--radius);
+  font-size: 0.875rem;
+  position: relative;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  @media (max-width: ${parseBreakpointProp}px) {
+    --column-template: 1fr;
+
+    --header-row-display: none;
+
+    --row-padding: 0;
+    --row-margin: 1rem 0;
+    --row-border: 1px solid var(--clr-gray7);
+    --row-even-background: var(--clr-gray15);
+    --row-hover-background: var(--clr-gray14);
+
+    --cell-column-template: var(--mobile-ref-width) minmax(0, 1fr);
+    --cell-padding: 1rem;
+
+    --row-annex-padding: var(--cell-padding);
+    --row-annex-margin: var(--row-annex-padding);
+
+    --mobile-decorators-content: '';
+    --mobile-ref-display: block;
+    --mobile-sorting-display: flex;
+    --mobile-cell-display: grid;
+  }
+
+  @media (max-width: 480px) {
+    --table-padding: 1.25rem;
+
+    --cell-padding: 0.9rem 0.8rem;
+    --mobile-ref-width: 15ch;
+  }
+
+  @media (max-width: 360px) {
+    --table-padding: 0.7rem;
+    --cell-padding: 0.8rem 0.65rem;
+  }
+
+  ${(props) => props.customCss}
+`;
+const TableRowAnnexWrapper = styled(motion.div)`
+  width: auto;
+  position: relative;
+  border: var(--row-annex-border);
+  border-radius: var(--radius);
+  margin: var(--row-annex-margin);
+  padding: var(--row-annex-padding);
+  background-color: rgba(255, 255, 255, 0.6);
+  transition: background-color var(--highlight-transition);
+`;
+const tableRowStyle = css`
+  display: grid;
+  width: 100%;
+  grid-template-columns: var(--column-template);
+  padding: var(--row-padding);
+  border-radius: var(--radius);
+  transition: background-color var(--highlight-transition);
+  min-height: var(--table-row-height);
+  color: var(--clr-gray3);
+  min-height: 0;
+  min-width: 0;
+`;
+const TableRowContainer = styled(motion.li)`
+  margin: var(--row-margin);
+  border: var(--row-border);
+  border-radius: var(--radius);
+  padding: 0.01px 0;
+  transition: background-color var(--highlight-transition);
+  background-color: var(--clr-white);
+
+  &:first-of-type {
+    margin-top: 0;
+  }
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+  &:nth-of-type(even) {
+    background-color: var(--row-even-background);
+  }
+  &:nth-of-type(odd) {
+    background-color: var(--row-odd-background);
+  }
+  &:not(.empty_row):hover {
+    background-color: var(--row-hover-background);
+  }
+`;
+const TableRowWrapper = styled(motion.div)`
+  ${tableRowStyle}
+
+  max-width: 100%;
+  min-width: 0;
+
+  &:last-of-type .TableCellWrapper:last-of-type::before {
+    border-radius: 0 0 var(--radius) var(--radius);
+  }
+  &:last-of-type .TableCellWrapper:last-of-type .TableCellRef {
+    border-radius: 0 0 0 var(--radius);
+  }
+`;
+const TableHeaderRow = styled(motion.div)`
+  ${tableRowStyle}
+  min-height: 4.375rem;
+  background-color: var(--label-background);
+  font-weight: bold;
+  color: var(--clr-gray3);
+  border-radius: var(--radius);
+  display: var(--header-row-display);
+`;
+const TableBody = styled(motion.ul)`
+  width: 100%;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+const tableCellStyle = css`
+  padding: var(--cell-padding);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin: 0;
+`;
+const nonHeaderCellStyle = css`
+  position: relative;
+
+  &::before {
+    content: var(--mobile-decorators-content);
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    background-color: transparent;
+    transition: background-color var(--highlight-transition);
+  }
+
+  &:nth-of-type(even) {
+    &::before {
+      background-color: rgba(0, 0, 0, 0.02);
+    }
+  }
+
+  &:hover {
+    &::before {
+      background-color: rgba(0, 0, 0, 0.06);
+    }
+  }
+
+  &:first-of-type::before {
+    border-radius: var(--radius) var(--radius) 0 0;
+  }
+`;
+const TableCell = styled.div`
+  ${tableCellStyle}
+
+  width: 100%;
+`;
+const TableCellWrapper = styled.div`
+  ${nonHeaderCellStyle}
+
+  min-width: 0;
+
+  display: var(--mobile-cell-display, flex);
+
+  margin: 0;
+  width: 100%;
+  align-items: center;
+  grid-template-columns: var(--cell-column-template);
+
+  & > * {
+    border-radius: none;
+  }
+
+  &:first-of-type {
+    .TableCellRef {
+      border-radius: var(--radius) 0 0 0;
+    }
+  }
+`;
+const TableCellRef = styled.div`
+  ${tableCellStyle}
+
+  display: var(--mobile-ref-display);
+  background-color: var(--label-background);
+  font-weight: bold;
+  color: var(--clr-gray3);
+`;
+const sortableStyles = css`
+  &.sortable,
+  &.sorted-asc,
+  &.sorted-desc {
+    cursor: pointer;
+    position: relative;
+    padding-left: 3.5ch;
+  }
+
+  &::after,
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    height: 0.8ch;
+    width: 0.8ch;
+    border: 0 solid var(--clr-gray3);
+    transform: rotate(45deg);
+    left: var(--cell-padding);
+  }
+  &::before {
+    border-width: 1.5px 0 0 1.5px;
+    margin-bottom: 1.2ch;
+  }
+  &::after {
+    border-width: 0 1.5px 1.5px 0;
+    margin-top: 0.8ch;
+  }
+  &:not(.sortable) {
+    cursor: default;
+    &::before,
+    &::after {
+      content: none;
+    }
+  }
+  &.sorted-desc {
+    &::before {
+      content: none;
+    }
+    &::after {
+      content: '';
+      margin-top: 0;
+      margin-bottom: 0.65ch;
+    }
+  }
+  &.sorted-asc {
+    &::after {
+      content: none;
+    }
+    &::before {
+      content: '';
+      margin-bottom: 0;
+      margin-top: 0.2ch;
+    }
+  }
+`;
+const TableHeaderWrapper = styled.div`
+  ${tableCellStyle}
+  transition: background-color var(--highlight-transition);
+  border-radius: var(--radius);
+
+  &:hover {
+    background-color: var(--clr-gray8);
+  }
+
+  ${sortableStyles}
+`;
+const MobileSortButton = styled(motion.button)`
+  display: var(--mobile-sorting-display);
+  align-items: center;
+  color: var(--clr-gray3);
+  margin: 0.5rem;
+  background-color: var(--clr-gray12);
+  border-radius: var(--radius);
+  padding: 0.5rem;
+  margin: -0.5rem 0 1rem auto;
+  cursor: default;
+
+  > svg {
+    margin-right: 0.5rem;
+    font-size: 1.75rem;
+  }
+
+  > p {
+    margin-right: 0.25rem;
+  }
+
+  &.sortable {
+    cursor: pointer;
+    &:hover {
+      background-color: var(--clr-gray8);
+    }
+
+    &::after {
+      content: '';
+      display: inline-block;
+      width: 0.4rem;
+      height: 0.4rem;
+      border: 1px solid var(--clr-gray4);
+      border-width: 0 1px 1px 0;
+      transform: rotate(45deg);
+      margin: 0 0.25rem;
+      transition: transform 300ms, margin 300ms;
+      margin-bottom: 0.25rem;
+    }
+
+    &.open {
+      z-index: 11;
+      &::after {
+        transform: rotate(225deg);
+        margin-top: 0.1rem;
+        margin-bottom: 0;
+      }
+    }
+  }
+`;
+const MobileSortTooltip = styled(motion.div)`
+  position: absolute;
+  top: 2.5rem;
+  right: 0;
+  background-color: var(--clr-white);
+  color: var(--clr-gray3);
+  margin: var(--table-padding);
+  padding: 0.5rem;
+  border-radius: var(--radius);
+  z-index: 11;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  border: 1px solid var(--clr-gray10);
+  overflow: auto;
+  max-height: calc(100vh - 5rem);
+  transform-origin: top right;
+  ${depth(8)}
+`;
+const MobileSortTooltipOption = styled.button`
+  background-color: var(--clr-white);
+  padding: 0.5rem;
+  border-radius: var(--radius);
+  color: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+  width: 100%;
+
+  > p {
+    margin: 0.17rem 0;
+    margin-right: 0.25rem;
+    margin-left: 1.75rem;
+    &:not(:last-child) {
+      margin-left: 0.5rem;
+    }
+  }
+  &:hover {
+    background-color: var(--clr-gray8);
+  }
+`;
+const MobileSortTooltipBackdrop = styled(motion.button)`
+  position: fixed;
+  inset: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  cursor: default;
+`;
+const LOOK_AT_ME = "\n^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n";
+const buildColumnTemplate = (columns = []) => {
+  const safeColumnsWidths = columns.map(({ width }) => (width == null ? void 0 : width.replace(/\s/g, "")) || "1fr");
+  return safeColumnsWidths.join(" ");
+};
+const validateProps = ({
+  columns = [],
+  children = [],
+  mobileBreakpoint = 900
+}) => {
+  if (mobileBreakpoint < MIN_TABLE_MOBILE_BREAKPOINT) {
+    console.warn(`Table: mobileBreakpoint (${mobileBreakpoint}) is too small. The minimum of ${MIN_TABLE_MOBILE_BREAKPOINT} will be used instead.${LOOK_AT_ME}`);
+  }
+  const columnTemplate = buildColumnTemplate(columns);
+  const splitTemplate = columnTemplate.split(" ");
+  splitTemplate.map((value, idx) => ({ value, idx })).filter((width) => !CSS.supports("grid-template-columns", width.value)).forEach((width) => {
+    const parsedWidth = width.value.replace(/"/g, '\\"');
+    console.warn(`Table: Invalid width value "${parsedWidth}" on columnsWidths[${width.idx}].${LOOK_AT_ME}`);
+  });
+  const tableRowChildren = children.map((value, idx) => ({ value, idx })).filter((child) => {
+    var _a, _b, _c, _d;
+    return React.isValidElement(child.value) && (((_b = (_a = child.value) == null ? void 0 : _a.type) == null ? void 0 : _b.displayName) === "TableRow" || ((_d = (_c = child.value) == null ? void 0 : _c.type) == null ? void 0 : _d.displayName) === "EmptyRow");
+  });
+  tableRowChildren.forEach((child) => {
+    var _a, _b, _c, _d, _e;
+    const childChildrenLength = (_c = (_b = (_a = child.value) == null ? void 0 : _a.props) == null ? void 0 : _b.children) == null ? void 0 : _c.filter((childChild) => childChild !== void 0).length;
+    if (React.isValidElement(child.value) && ((_e = (_d = child.value) == null ? void 0 : _d.type) == null ? void 0 : _e.displayName) !== "EmptyRow" && childChildrenLength !== columns.length) {
+      console.warn(`Table: children[${child.idx}] length (${childChildrenLength}) should be equal to labels length (${columns.length}).${LOOK_AT_ME}`);
+    }
+  });
+  const nonTableRowChildren = children.map((value, idx) => ({ value, idx })).filter((child) => !tableRowChildren.some((tableRowChild) => tableRowChild.idx === child.idx));
+  nonTableRowChildren.forEach((child) => {
+    console.warn(`Table: children[${child.idx}] is not a TableRow. See TableRow component.${LOOK_AT_ME}`);
+  });
+};
+const changeSortOrder = (sortOrder) => sortOrder !== "asc" ? "asc" : "desc";
+const TableHeader = ({
+  column,
+  onSort
+}) => {
+  const {
+    sortedColumn,
+    sortedOrder = ""
+  } = useTable();
+  const sortOrder = useMemo(() => sortedColumn === column.name ? sortedOrder : "", [column.name, sortedColumn, sortedOrder]);
+  const handleSortClick = useCallback(() => {
+    if (!column.sortable)
+      return;
+    onSort(changeSortOrder(sortOrder));
+  }, [column.sortable, onSort, sortOrder]);
+  return /* @__PURE__ */ jsx(TableHeaderWrapper, {
+    className: ["TableHeader", sortOrder ? `sorted-${sortOrder}` : "", column.sortable ? "sortable" : ""].join(" "),
+    onClick: handleSortClick,
+    role: column.sortable ? "button" : void 0,
+    children: column.label
+  });
+};
+var DefaultContext = {
+  color: void 0,
+  size: void 0,
+  className: void 0,
+  style: void 0,
+  attr: void 0
+};
+var IconContext = React.createContext && React.createContext(DefaultContext);
+var __assign = globalThis && globalThis.__assign || function() {
+  __assign = Object.assign || function(t) {
+    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {
+      s = arguments[i];
+      for (var p2 in s)
+        if (Object.prototype.hasOwnProperty.call(s, p2))
+          t[p2] = s[p2];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = globalThis && globalThis.__rest || function(s, e) {
+  var t = {};
+  for (var p2 in s)
+    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)
+      t[p2] = s[p2];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {
+      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))
+        t[p2[i]] = s[p2[i]];
+    }
+  return t;
+};
+function Tree2Element(tree) {
+  return tree && tree.map(function(node, i) {
+    return React.createElement(node.tag, __assign({
+      key: i
+    }, node.attr), Tree2Element(node.child));
+  });
+}
+function GenIcon(data) {
+  return function(props) {
+    return React.createElement(IconBase, __assign({
+      attr: __assign({}, data.attr)
+    }, props), Tree2Element(data.child));
+  };
+}
+function IconBase(props) {
+  var elem = function(conf) {
+    var attr = props.attr, size = props.size, title = props.title, svgProps = __rest(props, ["attr", "size", "title"]);
+    var computedSize = size || conf.size || "1em";
+    var className;
+    if (conf.className)
+      className = conf.className;
+    if (props.className)
+      className = (className ? className + " " : "") + props.className;
+    return React.createElement("svg", __assign({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className,
+      style: __assign(__assign({
+        color: props.color || conf.color
+      }, conf.style), props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && React.createElement("title", null, title), props.children);
+  };
+  return IconContext !== void 0 ? React.createElement(IconContext.Consumer, null, function(conf) {
+    return elem(conf);
+  }) : elem(DefaultContext);
+}
+function BiSortAlt2(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M7 20h2V8h3L8 4 4 8h3zm13-4h-3V4h-2v12h-3l4 4z" } }] })(props);
+}
+function BiSortDown(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m6 20 4-4H7V4H5v12H2zm5-12h9v2h-9zm0 4h7v2h-7zm0-8h11v2H11zm0 12h5v2h-5z" } }] })(props);
+}
+function BiSortUp(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M11 9h9v2h-9zm0 4h7v2h-7zm0-8h11v2H11zm0 12h5v2h-5zm-6 3h2V8h3L6 4 2 8h3z" } }] })(props);
+}
+const MobileSortMenu = ({
+  onSortingChange
+}) => {
+  const {
+    columns = [],
+    sortedOrder = "",
+    sortedColumn = ""
+  } = useTable();
+  const sortableColumns = useMemo(() => {
+    return columns.filter(({
+      sortable
+    }) => sortable);
+  }, [columns]);
+  const sortedLabel = useMemo(() => {
+    var _a;
+    return ((_a = columns.find(({
+      name
+    }) => name === sortedColumn)) == null ? void 0 : _a.label) || "";
+  }, [columns, sortedColumn]);
+  const isTableSortable = useMemo(() => sortableColumns.length, [sortableColumns]);
+  const [isMenuOpen, setMenuOpen] = useState(false);
+  const toggleMenu = useCallback(() => {
+    if (isTableSortable) {
+      setMenuOpen((v) => !v);
+    }
+  }, [isTableSortable]);
+  useEffect(() => {
+    if (isTableSortable) {
+      setMenuOpen(false);
+    }
+  }, [isTableSortable]);
+  const handleSortingChange = useCallback((column) => () => {
+    setMenuOpen(false);
+    onSortingChange(column)(changeSortOrder(sortedColumn === column.name ? sortedOrder : ""));
+  }, [onSortingChange, sortedColumn, sortedOrder]);
+  return isTableSortable || sortedLabel && sortedOrder ? /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsxs(MobileSortButton, {
+      className: [isTableSortable ? "sortable" : "", isMenuOpen ? "open" : ""].join(" "),
+      onClick: toggleMenu,
+      disabled: !isTableSortable,
+      type: "button",
+      layout: true,
+      children: [isTableSortable && (!sortedLabel || !sortedOrder) ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(BiSortAlt2, {}), /* @__PURE__ */ jsx("p", {
+          children: "Ordenar"
+        })]
+      }) : null, sortedLabel && sortedOrder ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [sortedOrder === "asc" ? /* @__PURE__ */ jsx(BiSortDown, {}) : /* @__PURE__ */ jsx(BiSortUp, {}), /* @__PURE__ */ jsx("p", {
+          children: sortedLabel
+        })]
+      }) : null]
+    }), /* @__PURE__ */ jsx(AnimatePresence, {
+      children: isMenuOpen ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(MobileSortTooltipBackdrop, {
+          onClick: toggleMenu,
+          type: "button"
+        }), /* @__PURE__ */ jsx(MobileSortTooltip, {
+          initial: {
+            transform: "scale(0)",
+            opacity: 0
+          },
+          animate: {
+            transform: "scale(1)",
+            opacity: 1
+          },
+          exit: {
+            transform: "scale(0)",
+            opacity: 0
+          },
+          transition: {
+            type: "tween"
+          },
+          children: sortableColumns.map((column) => /* @__PURE__ */ jsxs(MobileSortTooltipOption, {
+            onClick: handleSortingChange(column),
+            children: [/* @__PURE__ */ jsx("p", {
+              children: column.label
+            }), column.name === sortedColumn ? sortedOrder === "desc" ? /* @__PURE__ */ jsx(BiSortDown, {
+              size: "1.25rem"
+            }) : /* @__PURE__ */ jsx(BiSortUp, {
+              size: "1.25rem"
+            }) : null]
+          }, column.key))
+        })]
+      }) : null
+    })]
+  }) : null;
+};
+const defaultSortingHandler = (_) => void 0;
+const TableContext = createContext({});
+const Table = ({
+  columns = [],
+  children,
+  customCss,
+  sorting,
+  onSortingChange = defaultSortingHandler,
+  mobileBreakpoint = 900
+}) => {
+  const handleSortChange = useCallback((column) => (order) => {
+    if (!(column == null ? void 0 : column.sortable))
+      return;
+    onSortingChange({
+      column: column.name,
+      order
+    });
+  }, [onSortingChange]);
+  useEffect(() => {
+    const effectiveChildren = children.flat().filter(Boolean);
+    validateProps({
+      columns,
+      children: effectiveChildren,
+      mobileBreakpoint
+    });
+  }, [children, columns, mobileBreakpoint]);
+  const columnTemplate = useMemo(() => buildColumnTemplate(columns), [columns]);
+  const indexedColumns = useMemo(() => {
+    return columns.map((column, index) => __spreadProps(__spreadValues({}, column), {
+      index,
+      key: `${column.name}-${index}`
+    }));
+  }, [columns]);
+  return /* @__PURE__ */ jsx(TableContext.Provider, {
+    value: {
+      columns: indexedColumns,
+      sortedOrder: sorting == null ? void 0 : sorting.order,
+      sortedColumn: sorting == null ? void 0 : sorting.column
+    },
+    children: /* @__PURE__ */ jsxs(TableWrapper, {
+      columnTemplate,
+      customCss,
+      mobileBreakpoint,
+      layout: true,
+      children: [/* @__PURE__ */ jsx(MobileSortMenu, {
+        onSortingChange: handleSortChange
+      }), /* @__PURE__ */ jsx(TableHeaderRow, {
+        layout: true,
+        children: indexedColumns.map((column) => /* @__PURE__ */ jsx(TableHeader, {
+          column,
+          onSort: handleSortChange(column)
+        }, column.key))
+      }), /* @__PURE__ */ jsx(TableBody, {
+        children: children.map((child, idx) => /* @__PURE__ */ jsx(Fragment$1, {
+          children: child
+        }, idx))
+      })]
+    })
+  });
+};
+function useTable() {
+  const context = useContext(TableContext);
+  if (!context) {
+    throw new Error("useTable and TableRow must be used within a Table");
+  }
+  return context;
+}
+const TableRow = (_c) => {
+  var _d = _c, {
+    children,
+    className,
+    annex
+  } = _d, other = __objRest(_d, [
+    "children",
+    "className",
+    "annex"
+  ]);
+  const {
+    columns = []
+  } = useTable();
+  const rowId = useMemo(() => `table-row-${Math.random().toString(16).slice(2)}`, []);
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsxs(TableRowContainer, __spreadProps(__spreadValues({
+      layout: true,
+      className
+    }, other), {
+      children: [/* @__PURE__ */ jsx(TableRowWrapper, {
+        id: rowId,
+        layoutId: rowId,
+        className: "TableRow",
+        children: columns.map((column) => /* @__PURE__ */ jsxs(TableCellWrapper, {
+          className: `TableCellWrapper column-${column.index}`,
+          children: [/* @__PURE__ */ jsx(TableCellRef, {
+            className: `TableCellRef column-${column.index}`,
+            children: column.label
+          }), /* @__PURE__ */ jsx(TableCell, {
+            className: `TableCell column-${column.index}`,
+            children: children[column.index] || null
+          })]
+        }, column.key))
+      }), /* @__PURE__ */ jsx(AnimatePresence, {
+        children: annex ? /* @__PURE__ */ jsx(TableRowAnnexWrapper, {
+          layoutId: `${rowId}-annex`,
+          initial: {
+            opacity: 0
+          },
+          animate: {
+            opacity: 1
+          },
+          exit: {
+            opacity: 0,
+            height: 0,
+            padding: 0,
+            margin: 0,
+            overflow: "hidden"
+          },
+          transition: {
+            type: "tween"
+          },
+          "aria-details": rowId,
+          className: "TableRowAnnex",
+          children: annex
+        }, "annex") : null
+      })]
+    }))
+  });
+};
+TableRow.displayName = "TableRow";
+const EmptyRow = () => {
+  const {
+    columns = []
+  } = useTable();
+  return /* @__PURE__ */ jsx(TableRow, {
+    className: "empty_row",
+    children: Array(columns.length).fill(null)
+  });
+};
+EmptyRow.displayName = "EmptyRow";
+export { Button, EmptyRow, PreventScroll, Spinner, Table, TableRow, binamikCssReset, binamikGlobalStyles, binamikTheme, depth };