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

package/lib-esm/Checkbox/Checkbox.js

@@ -1,3 +1,4 @@
+import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import React, { useContext, useEffect } from 'react';
 import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
@@ -11,70 +12,200 @@ import Box from '../Box/Box.js';
 /**
  * An accessible, native checkbox component
  */
-const Checkbox = /*#__PURE__*/React.forwardRef(({
-  checked,
-  className,
-  defaultChecked,
-  indeterminate,
-  disabled,
-  onChange,
-  sx: sxProp,
-  required,
-  validationStatus,
-  value,
-  ...rest
-}, ref) => {
+const Checkbox = /*#__PURE__*/React.forwardRef((t0, ref) => {
+  const $ = c(47);
+  let checked;
+  let className;
+  let defaultChecked;
+  let disabled;
+  let indeterminate;
+  let onChange;
+  let required;
+  let rest;
+  let sxProp;
+  let validationStatus;
+  let value;
+  if ($[0] !== t0) {
+    ({
+      checked,
+      className,
+      defaultChecked,
+      indeterminate,
+      disabled,
+      onChange,
+      sx: sxProp,
+      required,
+      validationStatus,
+      value,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = checked;
+    $[2] = className;
+    $[3] = defaultChecked;
+    $[4] = disabled;
+    $[5] = indeterminate;
+    $[6] = onChange;
+    $[7] = required;
+    $[8] = rest;
+    $[9] = sxProp;
+    $[10] = validationStatus;
+    $[11] = value;
+  } else {
+    checked = $[1];
+    className = $[2];
+    defaultChecked = $[3];
+    disabled = $[4];
+    indeterminate = $[5];
+    onChange = $[6];
+    required = $[7];
+    rest = $[8];
+    sxProp = $[9];
+    validationStatus = $[10];
+    value = $[11];
+  }
   const checkboxRef = useProvidedRefOrCreate(ref);
   const checkboxGroupContext = useContext(CheckboxGroupContext);
-  const handleOnChange = e => {
-    checkboxGroupContext.onChange && checkboxGroupContext.onChange(e);
-    onChange && onChange(e);
-  };
-  const inputProps = {
-    type: 'checkbox',
-    disabled,
-    ref: checkboxRef,
-    checked: indeterminate ? false : checked,
-    defaultChecked,
-    required,
-    ['aria-required']: required ? 'true' : 'false',
-    ['aria-invalid']: validationStatus === 'error' ? 'true' : 'false',
-    onChange: handleOnChange,
-    value,
-    name: value,
-    ...rest
-  };
-  useIsomorphicLayoutEffect(() => {
-    if (checkboxRef.current) {
-      // eslint-disable-next-line react-compiler/react-compiler
-      checkboxRef.current.indeterminate = indeterminate || false;
-    }
-  }, [indeterminate, checked, checkboxRef]);
-  useEffect(() => {
-    const {
-      current: checkbox
-    } = checkboxRef;
-    if (!checkbox) {
-      return;
+  let t1;
+  if ($[12] !== checkboxGroupContext || $[13] !== onChange) {
+    t1 = e => {
+      checkboxGroupContext.onChange && checkboxGroupContext.onChange(e);
+      onChange && onChange(e);
+    };
+    $[12] = checkboxGroupContext;
+    $[13] = onChange;
+    $[14] = t1;
+  } else {
+    t1 = $[14];
+  }
+  const handleOnChange = t1;
+  const t2 = indeterminate ? false : checked;
+  const t3 = required ? "true" : "false";
+  const t4 = validationStatus === "error" ? "true" : "false";
+  let t5;
+  if ($[15] !== checkboxRef || $[16] !== defaultChecked || $[17] !== disabled || $[18] !== handleOnChange || $[19] !== required || $[20] !== rest || $[21] !== t2 || $[22] !== t3 || $[23] !== t4 || $[24] !== value) {
+    t5 = {
+      type: "checkbox",
+      disabled,
+      ref: checkboxRef,
+      checked: t2,
+      defaultChecked,
+      required,
+      "aria-required": t3,
+      "aria-invalid": t4,
+      onChange: handleOnChange,
+      value,
+      name: value,
+      ...rest
+    };
+    $[15] = checkboxRef;
+    $[16] = defaultChecked;
+    $[17] = disabled;
+    $[18] = handleOnChange;
+    $[19] = required;
+    $[20] = rest;
+    $[21] = t2;
+    $[22] = t3;
+    $[23] = t4;
+    $[24] = value;
+    $[25] = t5;
+  } else {
+    t5 = $[25];
+  }
+  const inputProps = t5;
+  let t6;
+  if ($[26] !== checkboxRef || $[27] !== indeterminate) {
+    t6 = () => {
+      if (checkboxRef.current) {
+        checkboxRef.current.indeterminate = indeterminate || false;
+      }
+    };
+    $[26] = checkboxRef;
+    $[27] = indeterminate;
+    $[28] = t6;
+  } else {
+    t6 = $[28];
+  }
+  let t7;
+  if ($[29] !== checkboxRef || $[30] !== checked || $[31] !== indeterminate) {
+    t7 = [indeterminate, checked, checkboxRef];
+    $[29] = checkboxRef;
+    $[30] = checked;
+    $[31] = indeterminate;
+    $[32] = t7;
+  } else {
+    t7 = $[32];
+  }
+  useIsomorphicLayoutEffect(t6, t7);
+  let t8;
+  if ($[33] !== checkboxRef || $[34] !== indeterminate) {
+    t8 = () => {
+      const {
+        current: checkbox
+      } = checkboxRef;
+      if (!checkbox) {
+        return;
+      }
+      if (indeterminate) {
+        checkbox.setAttribute("aria-checked", "mixed");
+      } else {
+        checkbox.setAttribute("aria-checked", checkbox.checked ? "true" : "false");
+      }
+    };
+    $[33] = checkboxRef;
+    $[34] = indeterminate;
+    $[35] = t8;
+  } else {
+    t8 = $[35];
+  }
+  useEffect(t8);
+  if (sxProp) {
+    let t9;
+    if ($[36] !== className) {
+      t9 = clsx(className, sharedClasses.Input, classes.Checkbox);
+      $[36] = className;
+      $[37] = t9;
+    } else {
+      t9 = $[37];
     }
-    if (indeterminate) {
-      checkbox.setAttribute('aria-checked', 'mixed');
+    let t10;
+    if ($[38] !== inputProps || $[39] !== sxProp || $[40] !== t9) {
+      t10 = /*#__PURE__*/jsx(Box, {
+        as: "input",
+        ...inputProps,
+        className: t9,
+        sx: sxProp
+      });
+      $[38] = inputProps;
+      $[39] = sxProp;
+      $[40] = t9;
+      $[41] = t10;
     } else {
-      checkbox.setAttribute('aria-checked', checkbox.checked ? 'true' : 'false');
+      t10 = $[41];
     }
-  });
-  if (sxProp) {
-    return /*#__PURE__*/jsx(Box, {
-      as: "input",
+    return t10;
+  }
+  let t9;
+  if ($[42] !== className) {
+    t9 = clsx(className, sharedClasses.Input, classes.Checkbox);
+    $[42] = className;
+    $[43] = t9;
+  } else {
+    t9 = $[43];
+  }
+  let t10;
+  if ($[44] !== inputProps || $[45] !== t9) {
+    t10 = /*#__PURE__*/jsx("input", {
       ...inputProps,
-      className: clsx(className, sharedClasses.Input, classes.Checkbox),
-      sx: sxProp
+      className: t9
     });
+    $[44] = inputProps;
+    $[45] = t9;
+    $[46] = t10;
+  } else {
+    t10 = $[46];
   }
-  return /*#__PURE__*/jsx("input", {
-    ...inputProps,
-    className: clsx(className, sharedClasses.Input, classes.Checkbox)
-  });
+  return t10;
 });
 Checkbox.displayName = 'Checkbox';
 

package/lib-esm/CircleBadge/CircleBadge.d.ts

@@ -17,6 +17,10 @@ declare const CircleBadgeIcon: import("styled-components").StyledComponent<impor
 } & import("@primer/octicons-react").IconProps & SxProp & import("react").RefAttributes<SVGSVGElement>>, any, SxProp, never>;
 export type CircleBadgeProps = ComponentProps<typeof CircleBadge>;
 export type CircleBadgeIconProps = ComponentProps<typeof CircleBadgeIcon>;
+/**
+ * @deprecated This component is deprecated.
+ * Replace component with specific icon imports from `@primer/octicons-react` and customized styling.
+ */
 declare const _default: string & import("styled-components").StyledComponentBase<"div", any, StyledCircleBadgeProps, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
     Icon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
         icon: React.ElementType;

package/lib-esm/CircleBadge/CircleBadge.js

@@ -30,6 +30,10 @@ const CircleBadgeIcon = styled(Octicon).withConfig({
   componentId: "sc-nywehb-1"
 })(["height:auto;max-width:60%;max-height:55%;"]);
 CircleBadgeIcon.displayName = 'CircleBadge.Icon';
+/**
+ * @deprecated This component is deprecated.
+ * Replace component with specific icon imports from `@primer/octicons-react` and customized styling.
+ */
 var CircleBadge$1 = Object.assign(CircleBadge, {
   Icon: CircleBadgeIcon
 });

package/lib-esm/ConfirmationDialog/ConfirmationDialog.d.ts

@@ -26,6 +26,14 @@ export interface ConfirmationDialogProps {
      * The type of button to use for the confirm button. Default: Button.
      */
     confirmButtonType?: 'normal' | 'primary' | 'danger';
+    /**
+     * Whether the cancel button is in a loading state. Default: false.
+     */
+    cancelButtonLoading?: boolean;
+    /**
+     * Whether the confirm button is in a loading state. Default: false.
+     */
+    confirmButtonLoading?: boolean;
     /**
      * Additional class names to apply to the dialog
      */

package/lib-esm/ConfirmationDialog/ConfirmationDialog.js

@@ -69,6 +69,8 @@ const ConfirmationDialog = props => {
     cancelButtonContent = 'Cancel',
     confirmButtonContent = 'OK',
     confirmButtonType = 'normal',
+    cancelButtonLoading = false,
+    confirmButtonLoading = false,
     children,
     className,
     width = 'medium',
@@ -84,13 +86,15 @@ const ConfirmationDialog = props => {
   const cancelButton = {
     content: cancelButtonContent,
     onClick: onCancelButtonClick,
-    autoFocus: isConfirmationDangerous
+    autoFocus: isConfirmationDangerous,
+    loading: cancelButtonLoading
   };
   const confirmButton = {
     content: confirmButtonContent,
     buttonType: confirmButtonType,
     onClick: onConfirmButtonClick,
-    autoFocus: !isConfirmationDangerous
+    autoFocus: !isConfirmationDangerous,
+    loading: confirmButtonLoading
   };
   const footerButtons = [cancelButton, confirmButton];
   return /*#__PURE__*/jsx(Dialog, {

package/lib-esm/CounterLabel/CounterLabel.js

@@ -1,23 +1,20 @@
 import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
-import { defaultSxProp } from '../utils/defaultSxProp.js';
 import classes from './CounterLabel.module.css.js';
+import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import Box from '../Box/Box.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 
 const CounterLabel = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
-  const $ = c(31);
+  const $ = c(20);
   let children;
   let className;
   let rest;
   let t1;
-  let t2;
   if ($[0] !== t0) {
     ({
       scheme: t1,
-      sx: t2,
       className,
       children,
       ...rest
@@ -27,116 +24,75 @@ const CounterLabel = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     $[2] = className;
     $[3] = rest;
     $[4] = t1;
-    $[5] = t2;
   } else {
     children = $[1];
     className = $[2];
     rest = $[3];
     t1 = $[4];
-    t2 = $[5];
   }
   const scheme = t1 === undefined ? "secondary" : t1;
-  const sx = t2 === undefined ? defaultSxProp : t2;
-  let t3;
-  if ($[6] !== children) {
-    t3 = /*#__PURE__*/jsxs(VisuallyHidden, {
+  let t2;
+  if ($[5] !== children) {
+    t2 = /*#__PURE__*/jsxs(VisuallyHidden, {
       children: ["\xA0(", children, ")"]
     });
-    $[6] = children;
-    $[7] = t3;
+    $[5] = children;
+    $[6] = t2;
   } else {
-    t3 = $[7];
+    t2 = $[6];
   }
-  const label = t3;
-  let t4;
-  if ($[8] !== forwardedRef || $[9] !== rest || $[10] !== scheme) {
-    t4 = {
+  const label = t2;
+  let t3;
+  if ($[7] !== forwardedRef || $[8] !== rest || $[9] !== scheme) {
+    t3 = {
       ref: forwardedRef,
       "aria-hidden": "true",
       "data-scheme": scheme,
       ...rest
     };
-    $[8] = forwardedRef;
-    $[9] = rest;
-    $[10] = scheme;
-    $[11] = t4;
+    $[7] = forwardedRef;
+    $[8] = rest;
+    $[9] = scheme;
+    $[10] = t3;
   } else {
-    t4 = $[11];
-  }
-  const counterProps = t4;
-  if (sx !== defaultSxProp) {
-    let t5;
-    if ($[12] !== className) {
-      t5 = clsx(className, classes.CounterLabel);
-      $[12] = className;
-      $[13] = t5;
-    } else {
-      t5 = $[13];
-    }
-    let t6;
-    if ($[14] !== children || $[15] !== counterProps || $[16] !== sx || $[17] !== t5) {
-      t6 = /*#__PURE__*/jsx(Box, {
-        as: "span",
-        ...counterProps,
-        className: t5,
-        sx: sx,
-        children: children
-      });
-      $[14] = children;
-      $[15] = counterProps;
-      $[16] = sx;
-      $[17] = t5;
-      $[18] = t6;
-    } else {
-      t6 = $[18];
-    }
-    let t7;
-    if ($[19] !== label || $[20] !== t6) {
-      t7 = /*#__PURE__*/jsxs(Fragment, {
-        children: [t6, label]
-      });
-      $[19] = label;
-      $[20] = t6;
-      $[21] = t7;
-    } else {
-      t7 = $[21];
-    }
-    return t7;
+    t3 = $[10];
   }
-  let t5;
-  if ($[22] !== className) {
-    t5 = clsx(className, classes.CounterLabel);
-    $[22] = className;
-    $[23] = t5;
+  const counterProps = t3;
+  let t4;
+  if ($[11] !== className) {
+    t4 = clsx(className, classes.CounterLabel);
+    $[11] = className;
+    $[12] = t4;
   } else {
-    t5 = $[23];
+    t4 = $[12];
   }
-  let t6;
-  if ($[24] !== children || $[25] !== counterProps || $[26] !== t5) {
-    t6 = /*#__PURE__*/jsx("span", {
+  let t5;
+  if ($[13] !== children || $[14] !== counterProps || $[15] !== t4) {
+    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
+      as: "span",
       ...counterProps,
-      className: t5,
+      className: t4,
       children: children
     });
-    $[24] = children;
-    $[25] = counterProps;
-    $[26] = t5;
-    $[27] = t6;
+    $[13] = children;
+    $[14] = counterProps;
+    $[15] = t4;
+    $[16] = t5;
   } else {
-    t6 = $[27];
+    t5 = $[16];
   }
-  let t7;
-  if ($[28] !== label || $[29] !== t6) {
-    t7 = /*#__PURE__*/jsxs(Fragment, {
-      children: [t6, label]
+  let t6;
+  if ($[17] !== label || $[18] !== t5) {
+    t6 = /*#__PURE__*/jsxs(Fragment, {
+      children: [t5, label]
     });
-    $[28] = label;
-    $[29] = t6;
-    $[30] = t7;
+    $[17] = label;
+    $[18] = t5;
+    $[19] = t6;
   } else {
-    t7 = $[30];
+    t6 = $[19];
   }
-  return t7;
+  return t6;
 });
 CounterLabel.displayName = 'CounterLabel';
 

package/lib-esm/DataTable/Pagination-b6f8418c.css

@@ -0,0 +1,2 @@
+.prc-DataTable-TablePagination-ZbY9p{align-items:center;border:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));border-end-end-radius:var(--borderRadius-medium,.375rem);border-end-start-radius:var(--borderRadius-medium,.375rem);border-top-width:0;column-gap:1rem;display:flex;grid-area:footer;justify-content:space-between;padding:var(--base-size-8,.5rem) var(--base-size-16,1rem);width:100%}@media ((max-width:calc(768px - 0.02px))){.prc-DataTable-TablePaginationSteps-Qqz6y[data-hidden-viewport-ranges*=narrow]>:not(:first-child):not(:last-child){display:none}.prc-DataTable-TablePaginationSteps-Qqz6y[data-hidden-viewport-ranges*=narrow]>:first-child{margin-inline-end:0}.prc-DataTable-TablePaginationSteps-Qqz6y[data-hidden-viewport-ranges*=narrow]>:last-child{margin-inline-start:0}}@media ((min-width:768px)){.prc-DataTable-TablePaginationSteps-Qqz6y[data-hidden-viewport-ranges*=regular]>:not(:first-child):not(:last-child){display:none}.prc-DataTable-TablePaginationSteps-Qqz6y[data-hidden-viewport-ranges*=regular]>:first-child{margin-inline-end:0}.prc-DataTable-TablePaginationSteps-Qqz6y[data-hidden-viewport-ranges*=regular]>:last-child{margin-inline-start:0}}@media ((min-width:1400px)){.prc-DataTable-TablePaginationSteps-Qqz6y[data-hidden-viewport-ranges*=wide]>:not(:first-child):not(:last-child){display:none}.prc-DataTable-TablePaginationSteps-Qqz6y[data-hidden-viewport-ranges*=wide]>:first-child{margin-inline-end:0}.prc-DataTable-TablePaginationSteps-Qqz6y[data-hidden-viewport-ranges*=wide]>:last-child{margin-inline-start:0}}.prc-DataTable-TablePaginationRange-Kp7GT{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);margin:0}.prc-DataTable-TablePaginationSteps-Qqz6y{align-items:center;color:var(--fgColor-default,var(--color-fg-default));display:flex;flex-wrap:wrap;font-size:var(--text-body-size-medium,.875rem);list-style:none;margin:0;padding:0}.prc-DataTable-TablePaginationStep-0FsgZ:first-of-type{margin-right:var(--base-size-16,1rem)}.prc-DataTable-TablePaginationStep-0FsgZ:last-of-type{margin-left:var(--base-size-16,1rem)}.prc-DataTable-TablePaginationAction-kKQK4{align-items:center;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-muted,var(--color-fg-muted));display:flex;font-size:var(--text-body-size-medium,.875rem);line-height:1.42857;padding:var(--base-size-8,.5rem);-webkit-user-select:none;user-select:none}.prc-DataTable-TablePaginationAction-kKQK4[data-has-page]{color:var(--fgColor-accent,var(--color-accent-fg))}.prc-DataTable-TablePaginationPage-MQm-t{align-items:center;border-radius:var(--borderRadius-medium,.375rem);display:flex;font-size:var(--text-body-size-medium,.875rem);justify-content:center;line-height:1.42857;min-height:2rem;min-width:2rem;padding:var(--base-size-8,.5rem) calc((var(--base-size-32,2rem) - var(--base-size-20,1.25rem))/2);-webkit-user-select:none;user-select:none}.prc-DataTable-TablePaginationAction-kKQK4[data-has-page]:focus,.prc-DataTable-TablePaginationAction-kKQK4[data-has-page]:hover,.prc-DataTable-TablePaginationPage-MQm-t:focus,.prc-DataTable-TablePaginationPage-MQm-t:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.prc-DataTable-TablePaginationPage-MQm-t[data-active=true]{background-color:var(--bgColor-accent-emphasis,var(--color-accent-emphasis));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-DataTable-TablePaginationPage-MQm-t[data-active=true]:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--bgColor-accent-emphasis,var(--color-accent-emphasis));outline-offset:-2px}.prc-DataTable-TablePaginationTruncationStep-HEMTY{align-items:center;display:flex;justify-content:center;min-height:2rem;min-width:2rem;-webkit-user-select:none;user-select:none}
+/*# sourceMappingURL=Pagination-b6f8418c.css.map */

package/lib-esm/DataTable/Pagination-b6f8418c.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/DataTable/Pagination.module.css"],"names":[],"mappings":"AAAA,qCAEE,kBAAmB,CAMnB,oGAAgE,CAGhE,wDAAiD,CADjD,0DAAmD,CADnD,kBAAmB,CALnB,eAAgB,CAHhB,YAAa,CAKb,gBAAiB,CAHjB,6BAA8B,CAI9B,yDAA+C,CAF/C,UAOF,CAEA,0CACE,mHACE,YACF,CAEA,4FACE,mBACF,CAEA,2FACE,qBACF,CACF,CAEA,2BACE,oHACE,YACF,CAEA,6FACE,mBACF,CAEA,4FACE,qBACF,CACF,CAEA,4BACE,iHACE,YACF,CAEA,0FACE,mBACF,CAEA,yFACE,qBACF,CACF,CAEA,0CACE,gDAA2B,CAC3B,4CAAsC,CACtC,QACF,CAEA,0CAEE,kBAAmB,CAGnB,oDAA6B,CAJ7B,YAAa,CAEb,cAAe,CAGf,8CAAuC,CAFvC,eAAgB,CAGhB,QAAS,CACT,SACF,CAEA,uDACE,qCACF,CAEA,sDACE,oCACF,CAEA,2CAEE,kBAAmB,CAOnB,gDAAyC,CANzC,gDAA2B,CAF3B,YAAa,CAGb,8CAAuC,CAEvC,mBAA0B,CAE1B,gCAA2B,CAD3B,wBAAiB,CAAjB,gBAGF,CAEA,0DACE,kDACF,CAEA,yCAIE,kBAAmB,CAMnB,gDAAyC,CAPzC,YAAa,CAGb,8CAAuC,CADvC,sBAAuB,CAGvB,mBAA0B,CAN1B,eAAgB,CADhB,cAAe,CAUf,iGAAiF,CAFjF,wBAAiB,CAAjB,gBAGF,CAEA,8NAIE,wGACF,CAEA,2DACE,4EAAgD,CAChD,2DACF,CAEA,yEAIE,gFAAqD,CAHrD,6EAAiD,CACjD,mBAGF,CAEA,mDAEE,kBAAmB,CADnB,YAAa,CAEb,sBAAuB,CAEvB,eAAgB,CADhB,cAAe,CAEf,wBAAiB,CAAjB,gBACF","file":"Pagination-b6f8418c.css","sourcesContent":[".TablePagination {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  column-gap: 1rem;\n  width: 100%;\n  grid-area: footer;\n  padding: var(--base-size-8) var(--base-size-16);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-top-width: 0;\n  border-end-start-radius: var(--borderRadius-medium);\n  border-end-end-radius: var(--borderRadius-medium);\n}\n\n@media ((max-width: calc(768px - 0.02px))) {\n  .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:not(:first-child):not(:last-child) {\n    display: none;\n  }\n\n  .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:first-child {\n    margin-inline-end: 0;\n  }\n\n  .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:last-child {\n    margin-inline-start: 0;\n  }\n}\n\n@media ((min-width: 768px)) {\n  .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:not(:first-child):not(:last-child) {\n    display: none;\n  }\n\n  .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:first-child {\n    margin-inline-end: 0;\n  }\n\n  .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:last-child {\n    margin-inline-start: 0;\n  }\n}\n\n@media ((min-width: 1400px)) {\n  .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:not(:first-child):not(:last-child) {\n    display: none;\n  }\n\n  .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:first-child {\n    margin-inline-end: 0;\n  }\n\n  .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:last-child {\n    margin-inline-start: 0;\n  }\n}\n\n.TablePaginationRange {\n  color: var(--fgColor-muted);\n  font-size: var(--text-body-size-small);\n  margin: 0;\n}\n\n.TablePaginationSteps {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  list-style: none;\n  color: var(--fgColor-default);\n  font-size: var(--text-body-size-medium);\n  margin: 0;\n  padding: 0;\n}\n\n.TablePaginationStep:first-of-type {\n  margin-right: var(--base-size-16);\n}\n\n.TablePaginationStep:last-of-type {\n  margin-left: var(--base-size-16);\n}\n\n.TablePaginationAction {\n  display: flex;\n  align-items: center;\n  color: var(--fgColor-muted);\n  font-size: var(--text-body-size-medium);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: calc(20 / 14);\n  user-select: none;\n  padding: var(--base-size-8);\n  border-radius: var(--borderRadius-medium);\n}\n\n.TablePaginationAction[data-has-page] {\n  color: var(--fgColor-accent);\n}\n\n.TablePaginationPage {\n  min-width: 2rem;\n  min-height: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--text-body-size-medium);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: calc(20 / 14);\n  user-select: none;\n  border-radius: var(--borderRadius-medium);\n  padding: var(--base-size-8) calc((var(--base-size-32) - var(--base-size-20)) / 2); /* primer.control.medium.paddingInline.condensed primer.control.medium.paddingBlock */\n}\n\n.TablePaginationAction[data-has-page]:hover,\n.TablePaginationAction[data-has-page]:focus,\n.TablePaginationPage:hover,\n.TablePaginationPage:focus {\n  background-color: var(--control-transparent-bgColor-hover);\n}\n\n.TablePaginationPage[data-active='true'] {\n  background-color: var(--bgColor-accent-emphasis);\n  color: var(--fgColor-onEmphasis);\n}\n\n.TablePaginationPage[data-active='true']:focus-visible {\n  outline: 2px solid var(--bgColor-accent-emphasis);\n  outline-offset: -2px;\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n\n.TablePaginationTruncationStep {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 2rem;\n  min-height: 2rem;\n  user-select: none;\n}\n"]}