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

package/lib/PageLayout/PageLayout.module.css.js

@@ -1,7 +0,0 @@
-'use strict';
-
-require('./PageLayout-8a294e74.css');
-
-var classes = {"PageLayoutRoot":"prc-PageLayout-PageLayoutRoot-1zlEO","PageLayoutWrapper":"prc-PageLayout-PageLayoutWrapper-s2ao4","PageLayoutContent":"prc-PageLayout-PageLayoutContent-jzDMn","HorizontalDivider":"prc-PageLayout-HorizontalDivider-CYLp5","VerticalDivider":"prc-PageLayout-VerticalDivider-4A4Qm","Header":"prc-PageLayout-Header-mQXK1","HeaderContent":"prc-PageLayout-HeaderContent-dVIQb","HeaderHorizontalDivider":"prc-PageLayout-HeaderHorizontalDivider-bofyb","ContentWrapper":"prc-PageLayout-ContentWrapper-b-QRo","Content":"prc-PageLayout-Content--F7-I","PaneWrapper":"prc-PageLayout-PaneWrapper-nGO0U","PaneVerticalDivider":"prc-PageLayout-PaneVerticalDivider-1c9vy","Pane":"prc-PageLayout-Pane-Vl5LI","PaneHorizontalDivider":"prc-PageLayout-PaneHorizontalDivider-4exOb","FooterWrapper":"prc-PageLayout-FooterWrapper-WZwgZ","FooterHorizontalDivider":"prc-PageLayout-FooterHorizontalDivider-sNLmj","FooterContent":"prc-PageLayout-FooterContent-UFWGW"};
-
-module.exports = classes;

package/lib/PageLayout/index.d.ts

@@ -1,2 +0,0 @@
-export * from './PageLayout';
-//# sourceMappingURL=index.d.ts.map

package/lib/Pagehead/Pagehead-0744ffce.css

@@ -1,2 +0,0 @@
-.prc-Pagehead-Pagehead-Dyaie{border-bottom:1px solid var(--borderColor-default,var(--color-border-default));margin-bottom:var(--base-size-24,1.5rem);padding-bottom:var(--base-size-24,1.5rem);padding-top:var(--base-size-24,1.5rem);position:relative}
-/*# sourceMappingURL=Pagehead-0744ffce.css.map */

package/lib/Pagehead/Pagehead-0744ffce.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Pagehead/Pagehead.module.css"],"names":[],"mappings":"AAAA,6BAME,8EAAmD,CAFnD,wCAAkC,CADlC,yCAAmC,CADnC,sCAAgC,CADhC,iBAMF","file":"Pagehead-0744ffce.css","sourcesContent":[".Pagehead {\n  position: relative;\n  padding-top: var(--base-size-24);\n  padding-bottom: var(--base-size-24);\n  margin-bottom: var(--base-size-24);\n  /* stylelint-disable-next-line primer/borders */\n  border-bottom: 1px solid var(--borderColor-default);\n}\n"]}

package/lib/Pagehead/Pagehead.d.ts

@@ -1,11 +0,0 @@
-import type React from 'react';
-import { type SxProp } from '../sx';
-declare const Pagehead: ({ className, ...rest }: PageheadProps) => React.JSX.Element;
-/**
- * @deprecated
- */
-export type PageheadProps = SxProp & React.ComponentPropsWithoutRef<'div'> & {
-    as?: React.ElementType;
-};
-export default Pagehead;
-//# sourceMappingURL=Pagehead.d.ts.map

package/lib/Pagehead/Pagehead.js

@@ -1,19 +0,0 @@
-'use strict';
-
-var clsx = require('clsx');
-var Pagehead_module = require('./Pagehead.module.css.js');
-var BoxWithFallback = require('../internal/components/BoxWithFallback.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-const Pagehead = ({
-  className,
-  ...rest
-}) => {
-  return /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
-    className: clsx.clsx(Pagehead_module.Pagehead, className),
-    ...rest
-  });
-};
-Pagehead.displayName = "Pagehead";
-
-module.exports = Pagehead;

package/lib/Pagehead/Pagehead.module.css.js

@@ -1,7 +0,0 @@
-'use strict';
-
-require('./Pagehead-0744ffce.css');
-
-var classes = {"Pagehead":"prc-Pagehead-Pagehead-Dyaie"};
-
-module.exports = classes;

package/lib/Pagehead/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './Pagehead';
-export type { PageheadProps } from './Pagehead';
-//# sourceMappingURL=index.d.ts.map

package/lib/Pagination/Pagination-e98833e8.css

@@ -1,2 +0,0 @@
-.prc-Pagination-Page-yoEQf{background-color:transparent;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:inline-block;font-style:normal;height:32px;line-height:1;margin-right:var(--base-size-4,.25rem);min-width:32px;padding:var(--base-size-8,.5rem) calc((var(--base-size-32,2rem) - var(--base-size-20,1.25rem))/2);text-align:center;-webkit-text-decoration:none;text-decoration:none;transition:background-color .2s cubic-bezier(.3,0,.5,1);-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){.prc-Pagination-Page-yoEQf[rel=next]:after,.prc-Pagination-Page-yoEQf[rel=prev]:before{background-color:currentColor;content:"";display:inline-block;height:16px;vertical-align:text-bottom;width:16px}.prc-Pagination-Page-yoEQf[rel=prev]:before{clip-path:polygon(9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px);margin-right:var(--base-size-4,.25rem)}.prc-Pagination-Page-yoEQf[rel=next]:after{clip-path:polygon(6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px);margin-left:var(--base-size-4,.25rem)}}.prc-Pagination-Page-yoEQf:last-child{margin-right:0}.prc-Pagination-Page-yoEQf:focus,.prc-Pagination-Page-yoEQf:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));outline:0;-webkit-text-decoration:none;text-decoration:none;transition-duration:.1s}.prc-Pagination-Page-yoEQf:focus-visible{outline:2px solid var(--bgColor-accent-emphasis,var(--color-accent-emphasis));outline-offset:-2px}.prc-Pagination-Page-yoEQf:active{border-color:var(--borderColor-muted,var(--color-border-muted))}.prc-Pagination-Page-yoEQf[rel=next],.prc-Pagination-Page-yoEQf[rel=prev]{color:var(--fgColor-accent,var(--color-accent-fg))}.prc-Pagination-Page-yoEQf[aria-current],.prc-Pagination-Page-yoEQf[aria-current]:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-emphasis));border-color:transparent;color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-Pagination-Page-yoEQf[aria-current]: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-Pagination-Page-yoEQf[aria-hidden],.prc-Pagination-Page-yoEQf[aria-hidden]:hover,.prc-Pagination-Page-yoEQf[role=presentation],.prc-Pagination-Page-yoEQf[role=presentation]:hover{background-color:transparent;color:var(--fgColor-disabled,var(--color-primer-fg-disabled));cursor:default}.prc-Pagination-PaginationContainer-yNDPO{margin-bottom:15px;margin-top:20px;text-align:center}@media screen and (max-width:calc(48rem - 0.02px)){.prc-Pagination-TablePaginationSteps-RRjtg[data-hidden-viewport-ranges*=narrow]>:not(:first-child):not(:last-child){display:none}.prc-Pagination-TablePaginationSteps-RRjtg[data-hidden-viewport-ranges*=narrow]>:first-child{margin-inline-end:0}.prc-Pagination-TablePaginationSteps-RRjtg[data-hidden-viewport-ranges*=narrow]>:last-child{margin-inline-start:0}}@media screen and (min-width:48rem){.prc-Pagination-TablePaginationSteps-RRjtg[data-hidden-viewport-ranges*=regular]>:not(:first-child):not(:last-child){display:none}.prc-Pagination-TablePaginationSteps-RRjtg[data-hidden-viewport-ranges*=regular]>:first-child{margin-inline-end:0}.prc-Pagination-TablePaginationSteps-RRjtg[data-hidden-viewport-ranges*=regular]>:last-child{margin-inline-start:0}}@media screen and (min-width:87.5rem){.prc-Pagination-TablePaginationSteps-RRjtg[data-hidden-viewport-ranges*=wide]>:not(:first-child):not(:last-child){display:none}.prc-Pagination-TablePaginationSteps-RRjtg[data-hidden-viewport-ranges*=wide]>:first-child{margin-inline-end:0}.prc-Pagination-TablePaginationSteps-RRjtg[data-hidden-viewport-ranges*=wide]>:last-child{margin-inline-start:0}}
-/*# sourceMappingURL=Pagination-e98833e8.css.map */

package/lib/Pagination/Pagination-e98833e8.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Pagination/Pagination.module.css"],"names":[],"mappings":"AAAA,2BAgBE,4BAA6B,CAC7B,gDAAyC,CARzC,oDAA6B,CAK7B,cAAe,CAbf,oBAAqB,CAKrB,iBAAkB,CAHlB,WAAY,CAKZ,aAAc,CAHd,sCAAgC,CAHhC,cAAe,CAEf,iGAAiF,CAMjF,iBAAkB,CAClB,4BAAqB,CAArB,oBAAqB,CAOrB,uDAA8D,CAH9D,wBAAiB,CAAjB,gBAAiB,CAFjB,qBAAsB,CADtB,kBAOF,CAEA,uDACE,uFAOE,6BAA8B,CAD9B,UAAW,CAJX,oBAAqB,CAErB,WAAY,CACZ,0BAA2B,CAF3B,UAKF,CAGA,4CAEE,gIAUC,CAXD,sCAYF,CAGA,2CAEE,gIAUC,CAXD,qCAYF,CACF,CAEA,sCACE,cACF,CAEA,kEAGE,wGAA0D,CAC1D,SAAU,CAFV,4BAAqB,CAArB,oBAAqB,CAGrB,uBACF,CAEA,yCACE,6EAAiD,CACjD,mBACF,CAEA,kCACE,+DACF,CAEA,0EAEE,kDACF,CAEA,wFAGE,4EAAgD,CAChD,wBAAyB,CAFzB,2DAGF,CAEA,uDAIE,gFAAqD,CAHrD,6EAAiD,CACjD,mBAGF,CAEA,wLAME,4BAA6B,CAF7B,6DAA8B,CAC9B,cAEF,CAEA,0CAIE,kBAAmB,CAFnB,eAAgB,CAGhB,iBACF,CAEA,mDACE,oHACE,YACF,CAEA,6FACE,mBACF,CAEA,4FACE,qBACF,CACF,CAEA,oCACE,qHACE,YACF,CAEA,8FACE,mBACF,CAEA,6FACE,qBACF,CACF,CAEA,sCACE,kHACE,YACF,CAEA,2FACE,mBACF,CAEA,0FACE,qBACF,CACF","file":"Pagination-e98833e8.css","sourcesContent":[".Page {\n  display: inline-block;\n  min-width: 32px; /* primer.control.medium.size */\n  height: 32px; /* primer.control.medium.size */\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  margin-right: var(--base-size-4);\n  font-style: normal;\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 1;\n  color: var(--fgColor-default);\n  text-align: center;\n  text-decoration: none;\n  white-space: nowrap;\n  vertical-align: middle;\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border-radius: var(--borderRadius-medium);\n  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n}\n\n@supports (clip-path: polygon(50% 0, 100% 50%, 50% 100%)) {\n  .Page[rel='prev']::before,\n  .Page[rel='next']::after {\n    display: inline-block;\n    width: 16px;\n    height: 16px;\n    vertical-align: text-bottom;\n    content: '';\n    background-color: currentColor;\n  }\n\n  /* chevron-left */\n  .Page[rel='prev']::before {\n    margin-right: var(--base-size-4);\n    clip-path: polygon(\n      9.8px 12.8px,\n      8.7px 12.8px,\n      4.5px 8.5px,\n      4.5px 7.5px,\n      8.7px 3.2px,\n      9.8px 4.3px,\n      6.1px 8px,\n      9.8px 11.7px,\n      9.8px 12.8px\n    );\n  }\n\n  /* chevron-right */\n  .Page[rel='next']::after {\n    margin-left: var(--base-size-4);\n    clip-path: polygon(\n      6.2px 3.2px,\n      7.3px 3.2px,\n      11.5px 7.5px,\n      11.5px 8.5px,\n      7.3px 12.8px,\n      6.2px 11.7px,\n      9.9px 8px,\n      6.2px 4.3px,\n      6.2px 3.2px\n    );\n  }\n}\n\n.Page:last-child {\n  margin-right: 0;\n}\n\n.Page:hover,\n.Page:focus {\n  text-decoration: none;\n  background-color: var(--control-transparent-bgColor-hover);\n  outline: 0;\n  transition-duration: 0.1s;\n}\n\n.Page:focus-visible {\n  outline: 2px solid var(--bgColor-accent-emphasis);\n  outline-offset: -2px;\n}\n\n.Page:active {\n  border-color: var(--borderColor-muted);\n}\n\n.Page[rel='prev'],\n.Page[rel='next'] {\n  color: var(--fgColor-accent);\n}\n\n.Page[aria-current],\n.Page[aria-current]:hover {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-accent-emphasis);\n  border-color: transparent;\n}\n\n.Page[aria-current]: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.Page[aria-hidden],\n.Page[aria-hidden]:hover,\n.Page[role='presentation'],\n.Page[role='presentation']:hover {\n  color: var(--fgColor-disabled);\n  cursor: default;\n  background-color: transparent;\n}\n\n.PaginationContainer {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: 20px;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: 15px;\n  text-align: center;\n}\n\n@media screen and (--viewportRange-narrow) {\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 screen and (--viewportRange-regular) {\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 screen and (--viewportRange-wide) {\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"]}

package/lib/Pagination/Pagination.d.ts

@@ -1,24 +0,0 @@
-import React from 'react';
-import { type PageDataProps } from './model';
-import type { ResponsiveValue } from '../hooks/useResponsiveValue';
-export type PageProps = {
-    key: string;
-    children: React.ReactNode;
-    number: number;
-    className: string;
-} & Omit<PageDataProps['props'], 'as' | 'role'>;
-export type PaginationProps = {
-    className?: string;
-    theme?: Record<string, unknown>;
-    pageCount: number;
-    currentPage: number;
-    onPageChange?: (e: React.MouseEvent, n: number) => void;
-    hrefBuilder?: (n: number) => string;
-    marginPageCount?: number;
-    showPages?: boolean | ResponsiveValue<boolean>;
-    surroundingPageCount?: number;
-    renderPage?: (props: PageProps) => React.ReactNode;
-};
-declare function Pagination({ className, theme: _theme, pageCount, currentPage, onPageChange, hrefBuilder, marginPageCount, showPages, surroundingPageCount, renderPage, ...rest }: PaginationProps): React.JSX.Element;
-export default Pagination;
-//# sourceMappingURL=Pagination.d.ts.map

package/lib/Pagination/Pagination.js

@@ -1,115 +0,0 @@
-'use strict';
-
-var React = require('react');
-var model = require('./model.js');
-var useResponsiveValue = require('../hooks/useResponsiveValue.js');
-var clsx = require('clsx');
-var Pagination_module = require('./Pagination.module.css.js');
-var BoxWithFallback = require('../internal/components/BoxWithFallback.js');
-var jsxRuntime = require('react/jsx-runtime');
-var Box = require('../Box/Box.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-const getViewportRangesToHidePages = showPages => {
-  if (showPages && typeof showPages !== 'boolean') {
-    return Object.keys(showPages).filter(key => !showPages[key]);
-  }
-  if (showPages) {
-    return [];
-  } else {
-    return Object.keys(useResponsiveValue.viewportRanges);
-  }
-};
-function usePaginationPages({
-  theme,
-  pageCount,
-  currentPage,
-  onPageChange,
-  hrefBuilder,
-  marginPageCount,
-  showPages,
-  surroundingPageCount,
-  renderPage
-}) {
-  const pageChange = React__default.default.useCallback(n => e => onPageChange(e, n), [onPageChange]);
-  const model$1 = React__default.default.useMemo(() => {
-    return model.buildPaginationModel(pageCount, currentPage, !!showPages, marginPageCount, surroundingPageCount);
-  }, [pageCount, currentPage, showPages, marginPageCount, surroundingPageCount]);
-  const children = React__default.default.useMemo(() => {
-    return model$1.map(page => {
-      const {
-        props,
-        key,
-        content
-      } = model.buildComponentData(page, hrefBuilder, pageChange(page.num));
-      if (renderPage && props.as !== 'span') {
-        return renderPage({
-          key,
-          children: content,
-          number: page.num,
-          className: Pagination_module.Page,
-          ...props
-        });
-      }
-      return (
-        /*#__PURE__*/
-        // @ts-ignore giving me grief about children and "as" props
-        jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
-          as: "a",
-          theme: theme,
-          className: clsx.clsx(Pagination_module.Page),
-          ...props,
-          children: content
-        }, key)
-      );
-    });
-  }, [model$1, hrefBuilder, pageChange, renderPage, theme]);
-  return children;
-}
-function Pagination({
-  className,
-  theme: _theme,
-  pageCount,
-  currentPage,
-  onPageChange = noop,
-  hrefBuilder = defaultHrefBuilder,
-  marginPageCount = 1,
-  showPages = true,
-  surroundingPageCount = 2,
-  renderPage,
-  ...rest
-}) {
-  const pageElements = usePaginationPages({
-    theme: _theme,
-    pageCount,
-    currentPage,
-    onPageChange,
-    hrefBuilder,
-    marginPageCount,
-    showPages,
-    surroundingPageCount,
-    renderPage
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
-    as: "nav",
-    className: clsx.clsx(Pagination_module.PaginationContainer, className),
-    "aria-label": "Pagination",
-    ...rest,
-    children: /*#__PURE__*/jsxRuntime.jsx(Box, {
-      display: "inline-block",
-      className: Pagination_module.TablePaginationSteps,
-      "data-hidden-viewport-ranges": getViewportRangesToHidePages(showPages).join(' '),
-      children: pageElements
-    })
-  });
-}
-Pagination.displayName = "Pagination";
-function defaultHrefBuilder(pageNum) {
-  return `#${pageNum}`;
-}
-function noop() {}
-
-module.exports = Pagination;

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

@@ -1,7 +0,0 @@
-'use strict';
-
-require('./Pagination-e98833e8.css');
-
-var classes = {"Page":"prc-Pagination-Page-yoEQf","PaginationContainer":"prc-Pagination-PaginationContainer-yNDPO","TablePaginationSteps":"prc-Pagination-TablePaginationSteps-RRjtg"};
-
-module.exports = classes;

package/lib/Pagination/index.d.ts

@@ -1,4 +0,0 @@
-import Pagination from './Pagination';
-export type { PaginationProps } from './Pagination';
-export default Pagination;
-//# sourceMappingURL=index.d.ts.map

package/lib/Pagination/index.js

@@ -1,7 +0,0 @@
-'use strict';
-
-var Pagination = require('./Pagination.js');
-
-
-
-module.exports = Pagination;

package/lib/Pagination/mocks/ReactRouterLink.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export type ReactRouterLikeLinkProps = {
-    to: string;
-    children: React.ReactNode;
-    className?: string;
-};
-export declare const ReactRouterLikeLink: React.ForwardRefExoticComponent<ReactRouterLikeLinkProps & React.RefAttributes<HTMLAnchorElement>>;
-//# sourceMappingURL=ReactRouterLink.d.ts.map

package/lib/Pagination/model.d.ts

@@ -1,26 +0,0 @@
-export declare function buildPaginationModel(pageCount: number, currentPage: number, showPages: boolean, marginPageCount: number, surroundingPageCount: number): PageType[];
-type PageType = {
-    type: string;
-    num: number;
-    disabled?: boolean;
-    selected?: boolean;
-    precedesBreak?: boolean;
-};
-export type PageDataProps = {
-    props: {
-        href?: string;
-        rel?: string;
-        'aria-label'?: string;
-        'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean;
-        'aria-hidden'?: boolean;
-        'aria-disabled'?: boolean;
-        onClick?: (e: React.MouseEvent) => void;
-        as?: string;
-        role?: string;
-    };
-    key: string;
-    content: string;
-};
-export declare function buildComponentData(page: PageType, hrefBuilder: (n: number) => string, onClick: (e: React.MouseEvent) => void): PageDataProps;
-export {};
-//# sourceMappingURL=model.d.ts.map

package/lib/Pagination/model.js

@@ -1,202 +0,0 @@
-'use strict';
-
-function buildPaginationModel(pageCount, currentPage, showPages, marginPageCount, surroundingPageCount) {
-  const prev = {
-    type: 'PREV',
-    num: currentPage - 1,
-    disabled: currentPage === 1
-  };
-  const next = {
-    type: 'NEXT',
-    num: currentPage + 1,
-    disabled: currentPage === pageCount
-  };
-  if (!showPages) {
-    return [prev, next];
-  }
-  if (pageCount <= 0) {
-    return [prev, {
-      ...next,
-      disabled: true
-    }];
-  }
-  const pages = [];
-
-  // number of pages shown on each side of the current page
-  // [1, ..., 7, 8, _9_, 10, 11, ..., 15]
-  // standardGap: 3
-  const standardGap = surroundingPageCount + marginPageCount;
-
-  // the maximum number of pages that can be shown at a given time (account for current page, left and right ellipsis)
-  // [1, ..., 7, 8, _9_, 10, 11, ..., 15]
-  // maxVisiblePages: 9
-  const maxVisiblePages = standardGap + standardGap + 3;
-
-  // if the number of pages is less than the maximum number of pages that can be shown just return all of them
-  if (pageCount <= maxVisiblePages) {
-    addPages(1, pageCount, false);
-    return [prev, ...pages, next];
-  }
-
-  // startGap is the number of pages hidden by the start ellipsis
-  // startOffset is the number of pages to offset at the start to compensate
-  // [1, ..., 7, 8, _9_, 10, 11, ..., 15]
-  // startGap: 5
-  // startOffset: 0
-  // when the margin and the surrounding windows overlap.
-  // [1, _2_, 3, 4, 5, 6, ..., 15]
-  // startGap = 0
-  // startOffset: -3 <--
-  let startGap = 0;
-  let startOffset = 0;
-
-  // When there is overlap
-  if (currentPage - standardGap - 1 <= 1) {
-    startOffset = currentPage - standardGap - 2;
-  } else {
-    startGap = currentPage - standardGap - 1;
-  }
-
-  // These are equivalent to startGap and startOffset but at the end of the list
-  let endGap = 0;
-  let endOffset = 0;
-
-  // When there is overlap
-  if (pageCount - currentPage - standardGap <= 1) {
-    endOffset = pageCount - currentPage - standardGap - 1;
-  } else {
-    endGap = pageCount - currentPage - standardGap;
-  }
-  const hasStartEllipsis = startGap > 0;
-  const hasEndEllipsis = endGap > 0;
-
-  // add pages "before" the start ellipsis (if any)
-  // [1, ..., 7, 8, _9_, 10, 11, ..., 15]
-  // marginPageCount: 1
-  // addPages(1, 1, true)
-  addPages(1, marginPageCount, hasStartEllipsis);
-  if (hasStartEllipsis) {
-    addEllipsis(marginPageCount);
-  }
-
-  // add middle pages
-  // [1, ..., 7, 8, _9_, 10, 11, ..., 15]
-  // marginPageCount: 1
-  // surroundingPageCount: 2
-  // startGap: 5
-  // startOffset: 0
-  // endGap: 3
-  // endOffset: 0
-  // addPages(7, 11, true)
-  addPages(marginPageCount + startGap + endOffset + 1, pageCount - startOffset - endGap - marginPageCount, hasEndEllipsis);
-  if (hasEndEllipsis) {
-    addEllipsis(pageCount - startOffset - endGap - marginPageCount);
-  }
-
-  // add pages "after" the start ellipsis (if any)
-  // [1, ..., 7, 8, _9_, 10, 11, ..., 15]
-  // marginPageCount: 1
-  // surroundingPageCount: 2
-  // startGap: 5
-  // startOffset: 0
-  // endGap: 3
-  // endOffset: 0
-  // addPages(15, 15)
-  addPages(pageCount - marginPageCount + 1, pageCount);
-  return [prev, ...pages, next];
-  function addEllipsis(previousPage) {
-    pages.push({
-      type: 'BREAK',
-      num: previousPage + 1
-    });
-  }
-  function addPages(start, end, precedesBreak = false) {
-    for (let i = start; i <= end; i++) {
-      pages.push({
-        type: 'NUM',
-        num: i,
-        selected: i === currentPage,
-        precedesBreak: i === end && precedesBreak
-      });
-    }
-  }
-}
-function buildComponentData(page, hrefBuilder, onClick) {
-  const props = {};
-  let content = '';
-  let key = '';
-  switch (page.type) {
-    case 'PREV':
-      {
-        key = 'page-prev';
-        content = 'Previous';
-        if (page.disabled) {
-          Object.assign(props, {
-            rel: 'prev',
-            'aria-hidden': 'true',
-            'aria-disabled': 'true'
-          });
-        } else {
-          Object.assign(props, {
-            rel: 'prev',
-            href: hrefBuilder(page.num),
-            'aria-label': 'Previous Page',
-            onClick
-          });
-        }
-        break;
-      }
-    case 'NEXT':
-      {
-        key = 'page-next';
-        content = 'Next';
-        if (page.disabled) {
-          Object.assign(props, {
-            rel: 'next',
-            'aria-hidden': 'true',
-            'aria-disabled': 'true'
-          });
-        } else {
-          Object.assign(props, {
-            rel: 'next',
-            href: hrefBuilder(page.num),
-            'aria-label': 'Next Page',
-            onClick
-          });
-        }
-        break;
-      }
-    case 'NUM':
-      {
-        key = `page-${page.num}`;
-        content = String(page.num);
-        Object.assign(props, {
-          href: hrefBuilder(page.num),
-          // We append "..." to the aria-label for pages that preceed a break because screen readers will
-          // change the tone the text is read in.
-          // This is a slightly nicer experience than skipping a bunch of numbers unexpectedly.
-          'aria-label': `Page ${page.num}${page.precedesBreak ? '...' : ''}`,
-          onClick,
-          'aria-current': page.selected ? 'page' : undefined
-        });
-        break;
-      }
-    case 'BREAK':
-      {
-        key = `page-${page.num}-break`;
-        content = '…';
-        Object.assign(props, {
-          as: 'span',
-          role: 'presentation'
-        });
-      }
-  }
-  return {
-    props,
-    key,
-    content
-  };
-}
-
-exports.buildComponentData = buildComponentData;
-exports.buildPaginationModel = buildPaginationModel;

package/lib/Placeholder.d.ts

@@ -1,9 +0,0 @@
-import type React from 'react';
-/** Private component used to render placeholders in storybook and documentation examples  */
-export declare const Placeholder: React.FC<React.PropsWithChildren<{
-    id?: string | undefined;
-    width?: number | string;
-    height: number | string;
-    label?: string;
-}>>;
-//# sourceMappingURL=Placeholder.d.ts.map

package/lib/PointerBox/PointerBox.d.ts

@@ -1,28 +0,0 @@
-import React from 'react';
-import type { BoxProps } from '../Box';
-import type { CaretProps } from '../internal/components/Caret';
-import type { SxProp } from '../sx';
-type MutatedSxProps = {
-    sx?: {
-        bg?: string;
-        backgroundColor?: string;
-        borderColor?: string;
-    };
-} & SxProp;
-/**
- * @deprecated PointerBox is deprecated and will be removed in a future major release.
- * Consider using Overlay or Position + Box with a caret instead.
- */
-export type PointerBoxProps = {
-    caret?: CaretProps['location'];
-    bg?: CaretProps['bg'];
-    borderColor?: CaretProps['borderColor'];
-    border?: CaretProps['borderWidth'];
-} & BoxProps & MutatedSxProps;
-/**
- * @deprecated PointerBox is deprecated and will be removed in a future major release.
- * Consider using Overlay or Position + Box with a caret instead.
- */
-declare function PointerBox(props: PointerBoxProps): React.JSX.Element;
-export default PointerBox;
-//# sourceMappingURL=PointerBox.d.ts.map

package/lib/PointerBox/PointerBox.js

@@ -1,71 +0,0 @@
-'use strict';
-
-var React = require('react');
-var styled = require('styled-components');
-var Caret = require('../internal/components/Caret.js');
-var constants = require('../constants.js');
-var jsxRuntime = require('react/jsx-runtime');
-var Box = require('../Box/Box.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-/**
- * @deprecated PointerBox is deprecated and will be removed in a future major release.
- * Consider using Overlay or Position + Box with a caret instead.
- */
-function PointerBox(props) {
-  // don't destructure these, just grab them
-  const themeContext = React__default.default.useContext(styled.ThemeContext);
-  const {
-    bg,
-    border,
-    borderColor,
-    theme: themeProp,
-    sx
-  } = props;
-  const {
-    caret,
-    children,
-    ...boxProps
-  } = props;
-  const {
-    bg: sxBg,
-    backgroundColor,
-    ...sxRest
-  } = sx || {};
-  const theme = themeProp || themeContext;
-  const customBackground = bg || sxBg || backgroundColor;
-  const caretProps = {
-    bg: bg || (sx === null || sx === void 0 ? void 0 : sx.bg) || (sx === null || sx === void 0 ? void 0 : sx.backgroundColor),
-    borderColor: borderColor || (sx === null || sx === void 0 ? void 0 : sx.borderColor),
-    borderWidth: border,
-    location: caret,
-    theme
-  };
-  const defaultBoxProps = {
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: 'border.default',
-    borderRadius: 2
-  };
-  return /*#__PURE__*/jsxRuntime.jsxs(Box, {
-    ...defaultBoxProps,
-    ...boxProps,
-    sx: {
-      ...sxRest,
-      '--custom-bg': constants.get(`colors.${customBackground}`)({
-        theme
-      }),
-      backgroundImage: customBackground ? `linear-gradient(var(--custom-bg), var(--custom-bg)), linear-gradient(${theme.colors.canvas.default}, ${theme.colors.canvas.default})` : undefined,
-      position: 'relative'
-    },
-    children: [children, /*#__PURE__*/jsxRuntime.jsx(Caret, {
-      ...caretProps
-    })]
-  });
-}
-PointerBox.displayName = "PointerBox";
-
-module.exports = PointerBox;

package/lib/PointerBox/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './PointerBox';
-export type { PointerBoxProps } from './PointerBox';
-//# sourceMappingURL=index.d.ts.map

package/lib/Popover/Popover-b609f443.css

@@ -1,2 +0,0 @@
-.prc-Popover-Popover-v1ShS{display:none;position:absolute;z-index:100}.prc-Popover-Popover-v1ShS:where([data-open]){display:block}.prc-Popover-Popover-v1ShS:where([data-relative]){position:relative}.prc-Popover-PopoverContent-nMzFS{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);margin-left:auto;margin-right:auto;overflow:hidden;padding:var(--base-size-24,1.5rem);position:relative}.prc-Popover-PopoverContent-nMzFS:after,.prc-Popover-PopoverContent-nMzFS:before{content:"";display:inline-block;left:50%;position:absolute}.prc-Popover-PopoverContent-nMzFS:before{border-bottom-color:transparent;border:var(--base-size-8,.5rem) solid transparent;border-bottom:var(--base-size-8,.5rem) solid var(--borderColor-default,var(--color-border-default));margin-left:-9px;top:calc(var(--base-size-16,1rem)*-1)}.prc-Popover-PopoverContent-nMzFS:after{border:7px solid transparent;border-bottom:7px solid var(--overlay-bgColor,var(--color-canvas-overlay));margin-left:calc(var(--base-size-8,.5rem)*-1);top:-14px}:is(:where([data-caret=bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-left]) .prc-Popover-PopoverContent-nMzFS):after,:is(:where([data-caret=bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-left]) .prc-Popover-PopoverContent-nMzFS):before{border-bottom-color:transparent;top:auto}:is(:where([data-caret=bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-left]) .prc-Popover-PopoverContent-nMzFS):before{border-top-color:var(--borderColor-default,var(--color-border-default));bottom:calc(var(--base-size-16,1rem)*-1)}:is(:where([data-caret=bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-left]) .prc-Popover-PopoverContent-nMzFS):after{border-top-color:var(--overlay-bgColor,var(--color-canvas-overlay));bottom:-14px}:where([data-caret=bottom-right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=top-right]) .prc-Popover-PopoverContent-nMzFS{margin-right:0;right:-9px}:is(:where([data-caret=top-right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-right]) .prc-Popover-PopoverContent-nMzFS):after,:is(:where([data-caret=top-right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-right]) .prc-Popover-PopoverContent-nMzFS):before{left:auto;margin-left:0}:is(:where([data-caret=top-right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-right]) .prc-Popover-PopoverContent-nMzFS):before{right:20px}:is(:where([data-caret=top-right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-right]) .prc-Popover-PopoverContent-nMzFS):after{right:21px}:where([data-caret=bottom-left]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=top-left]) .prc-Popover-PopoverContent-nMzFS{left:-9px;margin-left:0}:is(:where([data-caret=top-left]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-left]) .prc-Popover-PopoverContent-nMzFS):after,:is(:where([data-caret=top-left]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-left]) .prc-Popover-PopoverContent-nMzFS):before{left:var(--base-size-24,1.5rem);margin-left:0}:is(:where([data-caret=top-left]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-left]) .prc-Popover-PopoverContent-nMzFS):after{left:calc(var(--base-size-24,1.5rem) + 1px)}:is(:where([data-caret=right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-bottom]) .prc-Popover-PopoverContent-nMzFS):after,:is(:where([data-caret=right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-bottom]) .prc-Popover-PopoverContent-nMzFS):before{border-bottom-color:transparent;left:auto;margin-left:0;top:50%}:is(:where([data-caret=right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-bottom]) .prc-Popover-PopoverContent-nMzFS):before{margin-top:calc((var(--base-size-8,.5rem) + 1px)*-1)}:is(:where([data-caret=right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-bottom]) .prc-Popover-PopoverContent-nMzFS):after{margin-top:calc(var(--base-size-8,.5rem)*-1)}:is(:where([data-caret=right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-bottom]) .prc-Popover-PopoverContent-nMzFS):before{border-left-color:var(--borderColor-default,var(--color-border-default));right:calc(var(--base-size-16,1rem)*-1)}:is(:where([data-caret=right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-bottom]) .prc-Popover-PopoverContent-nMzFS):after{border-left-color:var(--overlay-bgColor,var(--color-canvas-overlay));right:-14px}:is(:where([data-caret=left]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-bottom]) .prc-Popover-PopoverContent-nMzFS):before{border-right-color:var(--borderColor-default,var(--color-border-default));left:calc(var(--base-size-16,1rem)*-1)}:is(:where([data-caret=left]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-bottom]) .prc-Popover-PopoverContent-nMzFS):after{border-right-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:-14px}:is(:where([data-caret=right-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-top]) .prc-Popover-PopoverContent-nMzFS):after,:is(:where([data-caret=right-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-top]) .prc-Popover-PopoverContent-nMzFS):before{top:var(--base-size-24,1.5rem)}:is(:where([data-caret=right-bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-bottom]) .prc-Popover-PopoverContent-nMzFS):after,:is(:where([data-caret=right-bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-bottom]) .prc-Popover-PopoverContent-nMzFS):before{top:auto}:is(:where([data-caret=right-bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-bottom]) .prc-Popover-PopoverContent-nMzFS):before{bottom:var(--base-size-16,1rem)}:is(:where([data-caret=right-bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-bottom]) .prc-Popover-PopoverContent-nMzFS):after{bottom:calc(var(--base-size-16,1rem) + 1px)}.prc-Popover-PopoverContent-nMzFS:where([data-width=xsmall]){width:var(--overlay-width-xsmall,12rem)}.prc-Popover-PopoverContent-nMzFS:where([data-width=small]){width:var(--overlay-width-small,20rem)}.prc-Popover-PopoverContent-nMzFS:where([data-width=medium]){width:var(--overlay-width-medium,30rem)}.prc-Popover-PopoverContent-nMzFS:where([data-width=large]){width:var(--overlay-width-large,40rem)}.prc-Popover-PopoverContent-nMzFS:where([data-width=xlarge]){width:var(--overlay-width-xlarge,60rem)}.prc-Popover-PopoverContent-nMzFS:where([data-width=auto]){width:auto}.prc-Popover-PopoverContent-nMzFS:where([data-height=small]){height:var(--overlay-height-small,16rem)}.prc-Popover-PopoverContent-nMzFS:where([data-height=medium]){height:var(--overlay-height-medium,20rem)}.prc-Popover-PopoverContent-nMzFS:where([data-height=large]){height:var(--overlay-height-large,27rem)}.prc-Popover-PopoverContent-nMzFS:where([data-height=xlarge]){height:var(--overlay-height-xlarge,37.5rem)}.prc-Popover-PopoverContent-nMzFS:where([data-height=fit-content]){height:-moz-fit-content;height:fit-content}.prc-Popover-PopoverContent-nMzFS:where([data-height=auto]){height:auto}.prc-Popover-PopoverContent-nMzFS:where([data-overflow=auto]){overflow:auto}.prc-Popover-PopoverContent-nMzFS:where([data-overflow=hidden]){overflow:hidden}.prc-Popover-PopoverContent-nMzFS:where([data-overflow=scroll]){overflow:scroll}.prc-Popover-PopoverContent-nMzFS:where([data-overflow=visible]){overflow:visible}
-/*# sourceMappingURL=Popover-b609f443.css.map */

package/lib/Popover/Popover-b609f443.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Popover/Popover.module.css"],"names":[],"mappings":"AAAA,2BAGE,YAAa,CAFb,iBAAkB,CAClB,WAUF,CAPE,8CACE,aACF,CAEA,kDACE,iBACF,CAGF,kCAKE,mEAAwC,CACxC,oGAAgE,CAChE,gDAAyC,CAHzC,gBAAiB,CADjB,iBAAkB,CAKlB,eAAgB,CANhB,kCAA4B,CAD5B,iBAgQF,CAtPE,iFAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,yCAOE,+BAA4C,CAC5C,iDAA+C,CAA/C,mGAA+C,CAL/C,gBAAiB,CAFjB,qCAQF,CAEA,wCASE,4BAA2C,CAA3C,0EAA2C,CAN3C,6CAA0C,CAD1C,SAQF,CAME,iaAGE,+BAAgC,CADhC,QAEF,CAEA,iNAEE,uEAA4C,CAD5C,wCAEF,CAEA,gNAIE,mEAAwC,CAFxC,YAGF,CAIF,qIAIE,cAAe,CADf,UAkBF,CAfE,iSAEE,SAAU,CACV,aACF,CAEA,iJAEE,UACF,CAEA,gJAEE,UACF,CAIF,mIAGE,SAAU,CACV,aAYF,CAVE,6RAEE,+BAAyB,CACzB,aACF,CAEA,8IAEE,2CACF,CAUA,yxBAKE,+BAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,6YAEE,oDACF,CAEA,4YACE,4CACF,CAOA,8MAEE,wEAA6C,CAD7C,uCAEF,CAEA,6MAIE,oEAAyC,CAFzC,WAGF,CAOA,2MAEE,yEAA8C,CAD9C,sCAEF,CAEA,0MAIE,qEAA0C,CAF1C,UAGF,CAMA,yRAEE,8BACF,CAMA,qSAEE,QACF,CAEA,mJACE,+BACF,CAEA,kJAEE,2CACF,CAGF,6DACE,uCACF,CAEA,4DACE,sCACF,CAEA,6DACE,uCACF,CAEA,4DACE,sCACF,CAEA,6DACE,uCACF,CAEA,2DACE,UACF,CAEA,6DACE,wCACF,CAEA,8DACE,yCACF,CAEA,6DACE,wCACF,CAEA,8DACE,2CACF,CAEA,mEACE,uBAAmB,CAAnB,kBACF,CAEA,4DACE,WACF,CAEA,8DACE,aACF,CAEA,gEACE,eACF,CAEA,gEACE,eACF,CAEA,iEACE,gBACF","file":"Popover-b609f443.css","sourcesContent":[".Popover {\n  position: absolute;\n  z-index: 100;\n  display: none;\n\n  &:where([data-open]) {\n    display: block;\n  }\n\n  &:where([data-relative]) {\n    position: relative;\n  }\n}\n\n.PopoverContent {\n  position: relative;\n  padding: var(--base-size-24);\n  margin-right: auto;\n  margin-left: auto;\n  background-color: var(--overlay-bgColor);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n  overflow: hidden;\n\n  /* Carets */\n  &::before,\n  &::after {\n    position: absolute;\n    left: 50%;\n    display: inline-block;\n    content: '';\n  }\n\n  &::before {\n    top: calc(-1 * var(--base-size-16));\n    /* stylelint-disable-next-line primer/spacing */\n    margin-left: -9px;\n\n    /* TODO: solid? */\n    /* stylelint-disable-next-line primer/borders */\n    border: var(--base-size-8) solid transparent;\n    border-bottom-color: var(--borderColor-default);\n  }\n\n  &::after {\n    /* stylelint-disable-next-line primer/spacing */\n    top: -14px;\n    margin-left: calc(-1 * var(--base-size-8));\n\n    /* // todo: solid */\n    /* stylelint-disable-next-line primer/borders */\n    border: 7px solid transparent;\n    /* stylelint-disable-next-line primer/colors */\n    border-bottom-color: var(--overlay-bgColor);\n  }\n\n  /* Bottom-oriented carets */\n  :where([data-caret='bottom']) &,\n  :where([data-caret='bottom-right']) &,\n  :where([data-caret='bottom-left']) & {\n    &::before,\n    &::after {\n      top: auto;\n      border-bottom-color: transparent;\n    }\n\n    &::before {\n      bottom: calc(-1 * var(--base-size-16));\n      border-top-color: var(--borderColor-default);\n    }\n\n    &::after {\n      /* stylelint-disable-next-line primer/spacing */\n      bottom: -14px;\n      /* stylelint-disable-next-line primer/colors */\n      border-top-color: var(--overlay-bgColor);\n    }\n  }\n\n  /* Top & Bottom: Right-oriented carets */\n  :where([data-caret='top-right']) &,\n  :where([data-caret='bottom-right']) & {\n    /* stylelint-disable-next-line primer/spacing */\n    right: -9px;\n    margin-right: 0;\n\n    &::before,\n    &::after {\n      left: auto;\n      margin-left: 0;\n    }\n\n    &::before {\n      /* stylelint-disable-next-line primer/spacing */\n      right: 20px;\n    }\n\n    &::after {\n      /* stylelint-disable-next-line primer/spacing */\n      right: 21px;\n    }\n  }\n\n  /* Top & Bottom: Left-oriented carets */\n  :where([data-caret='top-left']) &,\n  :where([data-caret='bottom-left']) & {\n    /* stylelint-disable-next-line primer/spacing */\n    left: -9px;\n    margin-left: 0;\n\n    &::before,\n    &::after {\n      left: var(--base-size-24);\n      margin-left: 0;\n    }\n\n    &::after {\n      /* stylelint-disable-next-line primer/spacing */\n      left: calc(var(--base-size-24) + 1px);\n    }\n  }\n\n  /* Right- & Left-oriented carets */\n  :where([data-caret='right']) &,\n  :where([data-caret='right-top']) &,\n  :where([data-caret='right-bottom']) &,\n  :where([data-caret='left']) &,\n  :where([data-caret='left-top']) &,\n  :where([data-caret='left-bottom']) & {\n    &::before,\n    &::after {\n      top: 50%;\n      left: auto;\n      margin-left: 0;\n      border-bottom-color: transparent;\n    }\n\n    &::before {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-top: calc((var(--base-size-8) + 1px) * -1);\n    }\n\n    &::after {\n      margin-top: calc(-1 * var(--base-size-8));\n    }\n  }\n\n  /* Right-oriented carets */\n  :where([data-caret='right']) &,\n  :where([data-caret='right-top']) &,\n  :where([data-caret='right-bottom']) & {\n    &::before {\n      right: calc(-1 * var(--base-size-16));\n      border-left-color: var(--borderColor-default);\n    }\n\n    &::after {\n      /* stylelint-disable-next-line primer/spacing */\n      right: -14px;\n      /* stylelint-disable-next-line primer/colors */\n      border-left-color: var(--overlay-bgColor);\n    }\n  }\n\n  /* Left-oriented carets */\n  :where([data-caret='left']) &,\n  :where([data-caret='left-top']) &,\n  :where([data-caret='left-bottom']) & {\n    &::before {\n      left: calc(-1 * var(--base-size-16));\n      border-right-color: var(--borderColor-default);\n    }\n\n    &::after {\n      /* stylelint-disable-next-line primer/spacing */\n      left: -14px;\n      /* stylelint-disable-next-line primer/colors */\n      border-right-color: var(--overlay-bgColor);\n    }\n  }\n\n  /* Right & Left: Top-oriented carets */\n  :where([data-caret='right-top']) &,\n  :where([data-caret='left-top']) & {\n    &::before,\n    &::after {\n      top: var(--base-size-24);\n    }\n  }\n\n  /* Right & Left: Bottom-oriented carets */\n  :where([data-caret='right-bottom']) &,\n  :where([data-caret='left-bottom']) & {\n    &::before,\n    &::after {\n      top: auto;\n    }\n\n    &::before {\n      bottom: var(--base-size-16);\n    }\n\n    &::after {\n      /* stylelint-disable-next-line primer/spacing */\n      bottom: calc(var(--base-size-16) + 1px);\n    }\n  }\n\n  &:where([data-width='xsmall']) {\n    width: var(--overlay-width-xsmall);\n  }\n\n  &:where([data-width='small']) {\n    width: var(--overlay-width-small);\n  }\n\n  &:where([data-width='medium']) {\n    width: var(--overlay-width-medium);\n  }\n\n  &:where([data-width='large']) {\n    width: var(--overlay-width-large);\n  }\n\n  &:where([data-width='xlarge']) {\n    width: var(--overlay-width-xlarge);\n  }\n\n  &:where([data-width='auto']) {\n    width: auto;\n  }\n\n  &:where([data-height='small']) {\n    height: var(--overlay-height-small);\n  }\n\n  &:where([data-height='medium']) {\n    height: var(--overlay-height-medium);\n  }\n\n  &:where([data-height='large']) {\n    height: var(--overlay-height-large);\n  }\n\n  &:where([data-height='xlarge']) {\n    height: var(--overlay-height-xlarge);\n  }\n\n  &:where([data-height='fit-content']) {\n    height: fit-content;\n  }\n\n  &:where([data-height='auto']) {\n    height: auto;\n  }\n\n  &:where([data-overflow='auto']) {\n    overflow: auto;\n  }\n\n  &:where([data-overflow='hidden']) {\n    overflow: hidden;\n  }\n\n  &:where([data-overflow='scroll']) {\n    overflow: scroll;\n  }\n\n  &:where([data-overflow='visible']) {\n    overflow: visible;\n  }\n}\n"]}