@primer/react 38.0.0-rc.195178541 → 38.0.0-rc.2

package/lib/DataTable/Pagination.js

@@ -3,42 +3,16 @@
 var reactCompilerRuntime = require('react-compiler-runtime');
 var octiconsReact = require('@primer/octicons-react');
 var React = require('react');
-var styled = require('styled-components');
-var constants = require('../constants.js');
 var ButtonReset = require('../internal/components/ButtonReset.js');
 var LiveRegion = require('../internal/components/LiveRegion.js');
 var warning = require('../utils/warning.js');
 var useResponsiveValue = require('../hooks/useResponsiveValue.js');
 var model = require('../Pagination/model.js');
+var Pagination_module = require('./Pagination.module.css.js');
+var clsx = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
 var VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const StyledPagination = styled__default.default.nav.withConfig({
-  displayName: "Pagination__StyledPagination",
-  componentId: "sc-1auq45q-0"
-})(["display:flex;align-items:center;justify-content:space-between;column-gap:1rem;width:100%;grid-area:footer;padding:0.5rem 1rem;border:1px solid ", ";border-top-width:0;border-end-start-radius:6px;border-end-end-radius:6px;.TablePaginationRange{color:", ";font-size:0.75rem;margin:0;}.TablePaginationSteps{display:flex;align-items:center;flex-wrap:wrap;list-style:none;color:", ";font-size:0.875rem;margin:0;padding:0;}.TablePaginationStep:first-of-type{margin-right:1rem;}.TablePaginationStep:last-of-type{margin-left:1rem;}.TablePaginationAction{display:flex;align-items:center;color:", ";font-size:0.875rem;line-height:calc(20 / 14);user-select:none;padding:0.5rem;border-radius:6px;}.TablePaginationAction[data-has-page]{color:", ";}.TablePaginationPage{min-width:2rem;min-height:2rem;display:flex;align-items:center;justify-content:center;font-size:0.875rem;line-height:calc(20 / 14);user-select:none;border-radius:6px;padding:0.5rem calc((2rem - 1.25rem) / 2);}.TablePaginationAction[data-has-page]:hover,.TablePaginationAction[data-has-page]:focus,.TablePaginationPage:hover,.TablePaginationPage:focus{background-color:", ";}.TablePaginationPage[data-active='true']{background-color:", ";color:", ";}.TablePaginationPage[data-active='true']:focus-visible{outline:2px solid var(--bgColor-accent-emphasis);outline-offset:-2px;box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis);}.TablePaginationTruncationStep{display:flex;align-items:center;justify-content:center;min-width:2rem;min-height:2rem;user-select:none;}", ""], constants.get('colors.border.default'), constants.get('colors.fg.muted'), constants.get('colors.fg.default'), constants.get('colors.fg.muted'), constants.get('colors.accent.fg'), constants.get('colors.actionListItem.default.hoverBg'), constants.get('colors.accent.emphasis'), constants.get('colors.fg.onEmphasis'),
-// Hides pages based on the viewport range passed to `showPages`
-Object.keys(useResponsiveValue.viewportRanges).map(viewportRangeKey => {
-  return `
-      @media (${useResponsiveValue.viewportRanges[viewportRangeKey]}) {
-        .TablePaginationSteps[data-hidden-viewport-ranges*='${viewportRangeKey}'] > *:not(:first-child):not(:last-child) {
-          display: none;
-        }
-
-        .TablePaginationSteps[data-hidden-viewport-ranges*='${viewportRangeKey}'] > *:first-child {
-          margin-inline-end: 0;
-        }
-
-        .TablePaginationSteps[data-hidden-viewport-ranges*='${viewportRangeKey}'] > *:last-child {
-          margin-inline-start: 0;
-        }
-      }
-    `;
-}).join(''));
 const defaultShowPages = {
   narrow: false
 };
@@ -81,20 +55,20 @@ function Pagination({
     return model.buildPaginationModel(pageCount, pageIndex + 1, !!showPages, 1, 2);
   }, [pageCount, pageIndex, showPages]);
   return /*#__PURE__*/jsxRuntime.jsxs(LiveRegion.LiveRegion, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(LiveRegion.LiveRegionOutlet, {}), /*#__PURE__*/jsxRuntime.jsxs(StyledPagination, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(LiveRegion.LiveRegionOutlet, {}), /*#__PURE__*/jsxRuntime.jsxs("nav", {
       "aria-label": label,
-      className: "TablePagination",
+      className: clsx.clsx('TablePagination', Pagination_module.TablePagination),
       id: id,
       children: [/*#__PURE__*/jsxRuntime.jsx(Range, {
         pageStart: pageStart,
         pageEnd: pageEnd,
         totalCount: totalCount
       }), /*#__PURE__*/jsxRuntime.jsxs("ol", {
-        className: "TablePaginationSteps",
+        className: clsx.clsx('TablePaginationSteps', Pagination_module.TablePaginationSteps),
         "data-hidden-viewport-ranges": getViewportRangesToHidePages().join(' '),
         children: [/*#__PURE__*/jsxRuntime.jsx(Step, {
           children: /*#__PURE__*/jsxRuntime.jsxs(ButtonReset.Button, {
-            className: "TablePaginationAction",
+            className: clsx.clsx('TablePaginationAction', Pagination_module.TablePaginationAction),
             type: "button",
             "data-has-page": hasPreviousPage ? true : undefined,
             "aria-disabled": !hasPreviousPage ? true : undefined,
@@ -105,7 +79,6 @@ function Pagination({
               selectPreviousPage();
             },
             children: [hasPreviousPage ? /*#__PURE__*/jsxRuntime.jsx(octiconsReact.ChevronLeftIcon, {}) : null, /*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "TablePaginationActionLabel",
               children: "Previous"
             }), /*#__PURE__*/jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, {
               children: "\xA0page"
@@ -129,7 +102,7 @@ function Pagination({
           }
         }), /*#__PURE__*/jsxRuntime.jsx(Step, {
           children: /*#__PURE__*/jsxRuntime.jsxs(ButtonReset.Button, {
-            className: "TablePaginationAction",
+            className: clsx.clsx('TablePaginationAction', Pagination_module.TablePaginationAction),
             type: "button",
             "data-has-page": hasNextPage ? true : undefined,
             "aria-disabled": !hasNextPage ? true : undefined,
@@ -140,7 +113,6 @@ function Pagination({
               selectNextPage();
             },
             children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "TablePaginationActionLabel",
               children: "Next"
             }), /*#__PURE__*/jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, {
               children: "\xA0page"
@@ -153,7 +125,7 @@ function Pagination({
 }
 Pagination.displayName = "Pagination";
 function Range(t0) {
-  const $ = reactCompilerRuntime.c(11);
+  const $ = reactCompilerRuntime.c(12);
   const {
     pageStart,
     pageEnd,
@@ -173,46 +145,53 @@ function Range(t0) {
     t2 = $[1];
   }
   let t3;
-  let t4;
   if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = /*#__PURE__*/jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, {
+    t3 = clsx.clsx("TablePaginationRange", Pagination_module.TablePaginationRange);
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  let t4;
+  let t5;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = /*#__PURE__*/jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, {
       children: "\xA0through\xA0"
     });
-    t4 = /*#__PURE__*/jsxRuntime.jsx("span", {
+    t5 = /*#__PURE__*/jsxRuntime.jsx("span", {
       "aria-hidden": "true",
       children: "\u2012"
     });
-    $[2] = t3;
     $[3] = t4;
+    $[4] = t5;
   } else {
-    t3 = $[2];
     t4 = $[3];
+    t5 = $[4];
   }
-  let t5;
-  if ($[4] !== end || $[5] !== start || $[6] !== totalCount) {
-    t5 = /*#__PURE__*/jsxRuntime.jsxs("p", {
-      className: "TablePaginationRange",
-      children: [start, t3, t4, end, " of ", totalCount]
+  let t6;
+  if ($[5] !== end || $[6] !== start || $[7] !== totalCount) {
+    t6 = /*#__PURE__*/jsxRuntime.jsxs("p", {
+      className: t3,
+      children: [start, t4, t5, end, " of ", totalCount]
     });
-    $[4] = end;
-    $[5] = start;
-    $[6] = totalCount;
-    $[7] = t5;
+    $[5] = end;
+    $[6] = start;
+    $[7] = totalCount;
+    $[8] = t6;
   } else {
-    t5 = $[7];
+    t6 = $[8];
   }
-  let t6;
-  if ($[8] !== t2 || $[9] !== t5) {
-    t6 = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [t2, t5]
+  let t7;
+  if ($[9] !== t2 || $[10] !== t6) {
+    t7 = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [t2, t6]
     });
-    $[8] = t2;
-    $[9] = t5;
+    $[9] = t2;
     $[10] = t6;
+    $[11] = t7;
   } else {
-    t6 = $[10];
+    t7 = $[11];
   }
-  return t6;
+  return t7;
 }
 function TruncationStep() {
   const $ = reactCompilerRuntime.c(1);
@@ -220,7 +199,7 @@ function TruncationStep() {
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t0 = /*#__PURE__*/jsxRuntime.jsx("li", {
       "aria-hidden": "true",
-      className: "TablePaginationTruncationStep",
+      className: clsx.clsx("TablePaginationTruncationStep", Pagination_module.TablePaginationTruncationStep),
       children: "\u2026"
     });
     $[0] = t0;
@@ -230,60 +209,74 @@ function TruncationStep() {
   return t0;
 }
 function Step(t0) {
-  const $ = reactCompilerRuntime.c(2);
+  const $ = reactCompilerRuntime.c(3);
   const {
     children
   } = t0;
   let t1;
-  if ($[0] !== children) {
-    t1 = /*#__PURE__*/jsxRuntime.jsx("li", {
-      className: "TablePaginationStep",
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = clsx.clsx("TablePaginationStep", Pagination_module.TablePaginationStep);
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] !== children) {
+    t2 = /*#__PURE__*/jsxRuntime.jsx("li", {
+      className: t1,
       children: children
     });
-    $[0] = children;
-    $[1] = t1;
+    $[1] = children;
+    $[2] = t2;
   } else {
-    t1 = $[1];
+    t2 = $[2];
   }
-  return t1;
+  return t2;
 }
 function Page(t0) {
-  const $ = reactCompilerRuntime.c(6);
+  const $ = reactCompilerRuntime.c(7);
   const {
     active,
     children,
     onClick
   } = t0;
-  const t1 = active ? true : undefined;
-  const t2 = active ? true : undefined;
-  let t3;
+  let t1;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = /*#__PURE__*/jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, {
+    t1 = clsx.clsx("TablePaginationPage", Pagination_module.TablePaginationPage);
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const t2 = active ? true : undefined;
+  const t3 = active ? true : undefined;
+  let t4;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = /*#__PURE__*/jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, {
       children: "Page\xA0"
     });
-    $[0] = t3;
+    $[1] = t4;
   } else {
-    t3 = $[0];
+    t4 = $[1];
   }
-  let t4;
-  if ($[1] !== children || $[2] !== onClick || $[3] !== t1 || $[4] !== t2) {
-    t4 = /*#__PURE__*/jsxRuntime.jsxs(ButtonReset.Button, {
-      className: "TablePaginationPage",
+  let t5;
+  if ($[2] !== children || $[3] !== onClick || $[4] !== t2 || $[5] !== t3) {
+    t5 = /*#__PURE__*/jsxRuntime.jsxs(ButtonReset.Button, {
+      className: t1,
       type: "button",
-      "data-active": t1,
-      "aria-current": t2,
+      "data-active": t2,
+      "aria-current": t3,
       onClick: onClick,
-      children: [t3, children]
+      children: [t4, children]
     });
-    $[1] = children;
-    $[2] = onClick;
-    $[3] = t1;
+    $[2] = children;
+    $[3] = onClick;
     $[4] = t2;
-    $[5] = t4;
+    $[5] = t3;
+    $[6] = t5;
   } else {
-    t4 = $[5];
+    t5 = $[6];
   }
-  return t4;
+  return t5;
 }
 function usePagination(config) {
   const $ = reactCompilerRuntime.c(24);

package/lib/DataTable/Pagination.module.css.js

@@ -0,0 +1,7 @@
+'use strict';
+
+require('./Pagination-b6f8418c.css');
+
+var classes = {"TablePagination":"prc-DataTable-TablePagination-ZbY9p","TablePaginationSteps":"prc-DataTable-TablePaginationSteps-Qqz6y","TablePaginationRange":"prc-DataTable-TablePaginationRange-Kp7GT","TablePaginationStep":"prc-DataTable-TablePaginationStep-0FsgZ","TablePaginationAction":"prc-DataTable-TablePaginationAction-kKQK4","TablePaginationPage":"prc-DataTable-TablePaginationPage-MQm-t","TablePaginationTruncationStep":"prc-DataTable-TablePaginationTruncationStep-HEMTY"};
+
+module.exports = classes;

package/lib/DataTable/Table.d.ts

@@ -81,7 +81,7 @@ declare function TableCell({ align, className, children, scope, ...rest }: Table
 type TableCellPlaceholderProps = React.PropsWithChildren;
 declare function TableCellPlaceholder({ children }: TableCellPlaceholderProps): React.JSX.Element;
 export type TableContainerProps = React.PropsWithChildren<SxProp & React.HTMLAttributes<HTMLDivElement>>;
-declare function TableContainer({ children, className, sx: sxProp, ...rest }: TableContainerProps): React.JSX.Element;
+declare function TableContainer({ children, className, ...rest }: TableContainerProps): React.JSX.Element;
 export type TableTitleProps = React.PropsWithChildren<{
     /**
      * Provide an alternate element or component to use as the container for

package/lib/DataTable/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/DataTable/Table.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/DataTable/Table.tsx"],"names":[],"mappings":"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"}

package/lib/DataTable/Table.js

@@ -7,13 +7,12 @@ var React = require('react');
 var _VisuallyHidden = require('../_VisuallyHidden.js');
 var sorting = require('./sorting.js');
 var useTable = require('./useTable.js');
-var SkeletonText = require('../experimental/Skeleton/SkeletonText.js');
 var ButtonReset = require('../internal/components/ButtonReset.js');
 var Table_module = require('./Table.module.css.js');
-var defaultSxProp = require('../utils/defaultSxProp.js');
 var BoxWithFallback = require('../internal/components/BoxWithFallback.js');
 var jsxRuntime = require('react/jsx-runtime');
 var ScrollableRegion = require('../ScrollableRegion/ScrollableRegion.js');
+var SkeletonText = require('../SkeletonText/SkeletonText.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -462,55 +461,48 @@ function TableCellPlaceholder(t0) {
 // ----------------------------------------------------------------------------
 
 function TableContainer(t0) {
-  const $ = reactCompilerRuntime.c(12);
+  const $ = reactCompilerRuntime.c(10);
   let children;
   let className;
   let rest;
-  let t1;
   if ($[0] !== t0) {
     ({
       children,
       className,
-      sx: t1,
       ...rest
     } = t0);
     $[0] = t0;
     $[1] = children;
     $[2] = className;
     $[3] = rest;
-    $[4] = t1;
   } else {
     children = $[1];
     className = $[2];
     rest = $[3];
-    t1 = $[4];
   }
-  const sxProp = t1 === undefined ? defaultSxProp.defaultSxProp : t1;
-  let t2;
-  if ($[5] !== className) {
-    t2 = clsx.clsx(className, Table_module.TableContainer);
-    $[5] = className;
-    $[6] = t2;
+  let t1;
+  if ($[4] !== className) {
+    t1 = clsx.clsx(className, Table_module.TableContainer);
+    $[4] = className;
+    $[5] = t1;
   } else {
-    t2 = $[6];
+    t1 = $[5];
   }
-  let t3;
-  if ($[7] !== children || $[8] !== rest || $[9] !== sxProp || $[10] !== t2) {
-    t3 = /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
+  let t2;
+  if ($[6] !== children || $[7] !== rest || $[8] !== t1) {
+    t2 = /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
       ...rest,
-      className: t2,
-      sx: sxProp,
+      className: t1,
       children: children
     });
-    $[7] = children;
-    $[8] = rest;
-    $[9] = sxProp;
-    $[10] = t2;
-    $[11] = t3;
+    $[6] = children;
+    $[7] = rest;
+    $[8] = t1;
+    $[9] = t2;
   } else {
-    t3 = $[11];
+    t2 = $[9];
   }
-  return t3;
+  return t2;
 }
 const TableTitle = /*#__PURE__*/React__default.default.forwardRef(function TableTitle(t0, ref) {
   const $ = reactCompilerRuntime.c(6);

package/lib/DataTable/storyHelpers.d.ts

@@ -1,4 +1,4 @@
-import type { InputType } from '@storybook/csf';
+import type { InputType } from 'storybook/internal/csf';
 export type ColWidthArgTypes = Record<string, string>;
 export declare const getColumnWidthArgTypes: (colCount: number) => InputType;
 //# sourceMappingURL=storyHelpers.d.ts.map

package/lib/DataTable/storyHelpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"storyHelpers.d.ts","sourceRoot":"","sources":["../../src/DataTable/storyHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAA;AAI7C,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAErD,eAAO,MAAM,sBAAsB,GAAI,UAAU,MAAM,cA6CtD,CAAA"}
+{"version":3,"file":"storyHelpers.d.ts","sourceRoot":"","sources":["../../src/DataTable/storyHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAIrD,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAErD,eAAO,MAAM,sBAAsB,GAAI,UAAU,MAAM,cA6CtD,CAAA"}

package/lib/DataTable/useTable.js

@@ -5,7 +5,7 @@ var React = require('react');
 var sorting = require('./sorting.js');
 
 function useTable(t0) {
-  const $ = reactCompilerRuntime.c(26);
+  const $ = reactCompilerRuntime.c(20);
   const {
     columns,
     data,
@@ -43,12 +43,13 @@ function useTable(t0) {
       }
     }
   }
-  let headers;
-  let sortBy;
-  if ($[4] !== columns || $[5] !== data || $[6] !== prevData || $[7] !== sortByColumn) {
-    let t2;
-    if ($[10] !== sortByColumn) {
-      t2 = column_1 => {
+  let t2;
+  let t3;
+  let t4;
+  if ($[4] !== columns || $[5] !== data || $[6] !== getRowId || $[7] !== prevData || $[8] !== rowOrder || $[9] !== sortByColumn) {
+    let t5;
+    if ($[13] !== sortByColumn) {
+      t5 = column_1 => {
         var _column_1$id;
         const id_0 = (_column_1$id = column_1.id) !== null && _column_1$id !== void 0 ? _column_1$id : column_1.field;
         if (id_0 === undefined) {
@@ -69,12 +70,12 @@ function useTable(t0) {
           }
         };
       };
-      $[10] = sortByColumn;
-      $[11] = t2;
+      $[13] = sortByColumn;
+      $[14] = t5;
     } else {
-      t2 = $[11];
+      t5 = $[14];
     }
-    headers = columns.map(t2);
+    const headers = columns.map(t5);
     if (data !== prevData) {
       setPrevData(data);
       setRowOrder(data);
@@ -82,7 +83,7 @@ function useTable(t0) {
         sortRows(sortByColumn);
       }
     }
-    sortBy = function sortBy(header) {
+    const sortBy = function sortBy(header) {
       const sortState = {
         id: header.id,
         direction: sortByColumn && sortByColumn.id === header.id ? sorting.transition(sortByColumn.direction) : sorting.DEFAULT_SORT_DIRECTION
@@ -126,86 +127,66 @@ function useTable(t0) {
         return 0;
       }));
     }
-    $[4] = columns;
-    $[5] = data;
-    $[6] = prevData;
-    $[7] = sortByColumn;
-    $[8] = headers;
-    $[9] = sortBy;
-  } else {
-    headers = $[8];
-    sortBy = $[9];
-  }
-  let t2;
-  if ($[12] !== getRowId || $[13] !== headers || $[14] !== rowOrder) {
-    let t3;
-    if ($[16] !== getRowId || $[17] !== headers) {
-      t3 = row => {
-        const rowId = getRowId(row);
-        return {
-          id: `${rowId}`,
-          getValue() {
-            return row;
-          },
-          getCells() {
-            return headers.map(header_2 => {
-              var _header_2$column$rowH;
-              return {
-                id: `${rowId}:${header_2.id}`,
-                column: header_2.column,
-                rowHeader: (_header_2$column$rowH = header_2.column.rowHeader) !== null && _header_2$column$rowH !== void 0 ? _header_2$column$rowH : false,
-                getValue() {
-                  if (header_2.column.field !== undefined) {
-                    return get(row, header_2.column.field);
-                  }
-                  throw new Error(`Unable to get value for column header ${header_2.id}`);
+    t2 = headers;
+    t3 = rowOrder.map(row => {
+      const rowId = getRowId(row);
+      return {
+        id: `${rowId}`,
+        getValue() {
+          return row;
+        },
+        getCells() {
+          return headers.map(header_2 => {
+            var _header_2$column$rowH;
+            return {
+              id: `${rowId}:${header_2.id}`,
+              column: header_2.column,
+              rowHeader: (_header_2$column$rowH = header_2.column.rowHeader) !== null && _header_2$column$rowH !== void 0 ? _header_2$column$rowH : false,
+              getValue() {
+                if (header_2.column.field !== undefined) {
+                  return get(row, header_2.column.field);
                 }
-              };
-            });
-          }
-        };
+                throw new Error(`Unable to get value for column header ${header_2.id}`);
+              }
+            };
+          });
+        }
       };
-      $[16] = getRowId;
-      $[17] = headers;
-      $[18] = t3;
-    } else {
-      t3 = $[18];
-    }
-    t2 = rowOrder.map(t3);
-    $[12] = getRowId;
-    $[13] = headers;
-    $[14] = rowOrder;
-    $[15] = t2;
-  } else {
-    t2 = $[15];
-  }
-  let t3;
-  if ($[19] !== sortBy) {
-    t3 = {
+    });
+    t4 = {
       sortBy
     };
-    $[19] = sortBy;
-    $[20] = t3;
+    $[4] = columns;
+    $[5] = data;
+    $[6] = getRowId;
+    $[7] = prevData;
+    $[8] = rowOrder;
+    $[9] = sortByColumn;
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = t4;
   } else {
-    t3 = $[20];
+    t2 = $[10];
+    t3 = $[11];
+    t4 = $[12];
   }
-  let t4;
-  if ($[21] !== gridTemplateColumns || $[22] !== headers || $[23] !== t2 || $[24] !== t3) {
-    t4 = {
-      headers,
-      rows: t2,
-      actions: t3,
+  let t5;
+  if ($[15] !== gridTemplateColumns || $[16] !== t2 || $[17] !== t3 || $[18] !== t4) {
+    t5 = {
+      headers: t2,
+      rows: t3,
+      actions: t4,
       gridTemplateColumns
     };
-    $[21] = gridTemplateColumns;
-    $[22] = headers;
-    $[23] = t2;
-    $[24] = t3;
-    $[25] = t4;
+    $[15] = gridTemplateColumns;
+    $[16] = t2;
+    $[17] = t3;
+    $[18] = t4;
+    $[19] = t5;
   } else {
-    t4 = $[25];
+    t5 = $[19];
   }
-  return t4;
+  return t5;
 }
 function getInitialSortState(columns, initialSortColumn, initialSortDirection) {
   if (initialSortColumn !== undefined) {

package/lib/Details/Details.d.ts

@@ -1,5 +1,4 @@
 import React, { type ComponentPropsWithoutRef } from 'react';
-import type { SxProp } from '../sx';
 export type SummaryProps<As extends React.ElementType> = {
     /**
      * HTML element to render summary as.
@@ -12,9 +11,9 @@ declare namespace Summary {
     var displayName: string;
 }
 export { Summary };
-declare const Details: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "ref"> & SxProp & React.RefAttributes<HTMLDetailsElement>> & {
+declare const Details: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "ref"> & React.RefAttributes<HTMLDetailsElement>> & {
     Summary: typeof Summary;
 };
-export type DetailsProps = ComponentPropsWithoutRef<'details'> & SxProp;
+export type DetailsProps = ComponentPropsWithoutRef<'details'>;
 export default Details;
 //# sourceMappingURL=Details.d.ts.map

package/lib/Details/Details.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../src/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAsB,KAAK,wBAAwB,EAAoB,MAAM,OAAO,CAAA;AAClG,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AA+DjC,MAAM,MAAM,YAAY,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IACvD;;OAEG;IACH,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,WAAW,SAAS,EAAE,GAAG,EAAE,GAAG,SAAS,CAAC,CAAA;AAEjF,iBAAS,OAAO,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,EAAE,EAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,YAAY,CAAC,EAAE,CAAC,qBAOxF;kBAPQ,OAAO;;;AAUhB,OAAO,EAAC,OAAO,EAAC,CAAA;AAEhB,QAAA,MAAM,OAAO;;CAEX,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,wBAAwB,CAAC,SAAS,CAAC,GAAG,MAAM,CAAA;AACvE,eAAe,OAAO,CAAA"}
+{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../src/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAsB,KAAK,wBAAwB,EAAoB,MAAM,OAAO,CAAA;AAmDlG,MAAM,MAAM,YAAY,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IACvD;;OAEG;IACH,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,WAAW,SAAS,EAAE,GAAG,EAAE,GAAG,SAAS,CAAC,CAAA;AAEjF,iBAAS,OAAO,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,EAAE,EAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,YAAY,CAAC,EAAE,CAAC,qBAOxF;kBAPQ,OAAO;;;AAUhB,OAAO,EAAC,OAAO,EAAC,CAAA;AAEhB,QAAA,MAAM,OAAO;;CAEX,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,wBAAwB,CAAC,SAAS,CAAC,CAAA;AAC9D,eAAe,OAAO,CAAA"}