@primer/react-brand 0.68.0-rc.0963e67e → 0.68.0-rc.20c2136f

package/esm/MediaPlaylist/MediaPlaylist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaPlaylist.js","names":[],"sources":["../../src/MediaPlaylist/MediaPlaylist.tsx"],"sourcesContent":["import React, {cloneElement, forwardRef} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Heading, Text, type HeadingProps, type TextProps} from '..'\nimport {Pagination} from '../Pagination'\nimport {useId} from '../hooks/useId'\n\nimport {type MediaPlaylistComponentTypes, useMediaPlaylist} from './useMediaPlaylist'\nimport type {BaseProps} from '../component-helpers'\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes.css'\n\n/** Main Stylesheet (as a CSS Module) */\n\nimport styles from './MediaPlaylist.module.css'\nimport gridlineStyles from '../component-helpers/shared.module.css'\n\nexport type MediaPlaylistProps = React.PropsWithChildren<{\n  /**\n   * The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.\n   */\n  defaultSelectedIndex?: number\n  /**\n   * The index of the currently selected item. This makes the component controlled.\n   */\n  selectedIndex?: number\n  /**\n   * Callback fired when the selected index changes.\n   */\n  onChange?: (selectedIndex: number) => void\n  'data-testid'?: string\n}> &\n  Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>\n\nconst MediaPlaylistRoot = forwardRef<HTMLDivElement, MediaPlaylistProps>(\n  ({children, className, defaultSelectedIndex = 0, onChange, selectedIndex, 'data-testid': testId, ...props}, ref) => {\n    const uniqueId = useId()\n\n    const {\n      activeIndex,\n      currentItemPage,\n      getPaginationAttributes,\n      getTabListProps,\n      getTabPanelProps,\n      getTabProps,\n      handlePageChange,\n      hasOverflowItems,\n      headingChild,\n      isItemSelected,\n      items,\n      setItemRef,\n      tabListRef,\n    } = useMediaPlaylist({\n      children,\n      components: mediaPlaylistComponents,\n      defaultSelectedIndex,\n      onChange,\n      selectedIndex,\n    })\n\n    const headingId = headingChild?.props.id ?? `${uniqueId}-heading`\n\n    if (!headingChild && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'MediaPlaylist: Heading child is required. This element labels the playlist for assistive technologies.',\n      )\n    }\n\n    const tabListProps = headingChild\n      ? getTabListProps({labelledBy: headingId})\n      : getTabListProps({label: 'Media playlist'})\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          styles.MediaPlaylist,\n          gridlineStyles.gridline,\n          hasOverflowItems && styles['MediaPlaylist--overflowItems'],\n          className,\n        )}\n        data-testid={testId || testIds.root}\n        {...props}\n      >\n        <div className={styles.MediaPlaylist__layout}>\n          <div className={styles.MediaPlaylist__playlist}>\n            {headingChild &&\n              cloneElement(headingChild, {\n                activeIndex,\n                id: headingId,\n                itemCount: items.length,\n              })}\n            <div {...tabListProps} ref={tabListRef} className={styles.MediaPlaylist__tablist}>\n              {items.map((item, index) => {\n                const tabProps = getTabProps<HTMLButtonElement>(String(index))\n\n                return (\n                  <div\n                    key={index}\n                    ref={element => {\n                      setItemRef(index, element)\n                    }}\n                    className={clsx(\n                      styles.MediaPlaylist__item,\n                      isItemSelected(index) && styles['MediaPlaylist__item--selected'],\n                      item.className,\n                    )}\n                  >\n                    <button type=\"button\" {...tabProps} className={styles.MediaPlaylist__tab}>\n                      <span className={styles.MediaPlaylist__tabContent}>\n                        {item.thumbnail && <span className={styles.MediaPlaylist__thumbnail}>{item.thumbnail}</span>}\n                        <span className={styles.MediaPlaylist__itemHeadingContent}>{item.heading}</span>\n                      </span>\n                    </button>\n                  </div>\n                )\n              })}\n            </div>\n\n            {hasOverflowItems && (\n              <Pagination\n                className={styles.MediaPlaylist__pagination}\n                pageCount={items.length}\n                currentPage={currentItemPage}\n                onPageChange={handlePageChange}\n                hrefBuilder={() => '#'}\n                pageAttributesBuilder={getPaginationAttributes}\n                aria-label=\"Media playlist items\"\n                showPages={false}\n              />\n            )}\n          </div>\n\n          <div className={styles.MediaPlaylist__mediaPanels}>\n            {items.map((item, index) => {\n              const panelProps = getTabPanelProps(String(index))\n\n              return (\n                <div\n                  key={index}\n                  {...panelProps}\n                  tabIndex={-1}\n                  className={clsx(styles.MediaPlaylist__mediaPanel, styles.MediaPlaylist__panel)}\n                >\n                  {item.media}\n                  <div className={styles.MediaPlaylist__panelContent}>{item.content}</div>\n                </div>\n              )\n            })}\n          </div>\n        </div>\n      </div>\n    )\n  },\n)\n\nexport type MediaPlaylistHeadingProps = React.PropsWithChildren<{\n  as?: Exclude<HeadingProps['as'], 'h1'>\n}> &\n  BaseProps<HTMLDivElement>\n\ntype MediaPlaylistHeadingInternalProps = {\n  activeIndex?: number | null\n  itemCount?: number\n}\n\nfunction MediaPlaylistHeading({\n  activeIndex = null,\n  as = 'h3',\n  children,\n  className,\n  id,\n  itemCount = 0,\n  ...props\n}: MediaPlaylistHeadingProps & MediaPlaylistHeadingInternalProps) {\n  return (\n    <div className={clsx(styles.MediaPlaylist__heading, className)} {...props}>\n      <Heading as={as} id={id} className={styles.MediaPlaylist__headingLabel}>\n        {children}\n      </Heading>\n      {itemCount > 0 && activeIndex !== null && (\n        <span className={styles.MediaPlaylist__headingCounter} aria-live=\"polite\">\n          {activeIndex + 1}/{itemCount}\n        </span>\n      )}\n    </div>\n  )\n}\n\nexport type MediaPlaylistItemProps = React.PropsWithChildren<\n  {\n    /**\n     * An optional thumbnail to be shown in the playlist for this item.\n     */\n    thumbnail?: React.ReactNode\n  } & BaseProps<HTMLDivElement>\n>\n\nfunction MediaPlaylistItem({children}: MediaPlaylistItemProps) {\n  return <>{children}</>\n}\n\nexport type MediaPlaylistItemHeadingProps = Omit<TextProps, 'as' | 'children' | 'title'> & {\n  children?: React.ReactNode\n  description?: React.ReactNode\n  title?: React.ReactNode\n}\n\nfunction MediaPlaylistItemHeading({\n  children,\n  className,\n  description,\n  font = 'mona-sans',\n  size = '200',\n  title,\n  variant = 'default',\n  weight = 'medium',\n  ...props\n}: MediaPlaylistItemHeadingProps) {\n  const hasStructuredContent = title !== undefined || description !== undefined\n  const headingTitle = title ?? children\n\n  return (\n    <Text\n      {...props}\n      as=\"span\"\n      className={clsx(styles.MediaPlaylist__itemHeading, className)}\n      font={font}\n      size={size}\n      variant={variant}\n      weight={weight}\n    >\n      {hasStructuredContent ? (\n        <span className={styles.MediaPlaylist__itemHeadingDetails}>\n          {headingTitle && <span className={styles.MediaPlaylist__itemHeadingTitle}>{headingTitle}</span>}\n          {description && (\n            <Text as=\"span\" font=\"monospace\" size=\"100\" variant=\"muted\">\n              {description}\n            </Text>\n          )}\n        </span>\n      ) : (\n        children\n      )}\n    </Text>\n  )\n}\n\nexport type MediaPlaylistItemContentProps = React.HTMLAttributes<HTMLDivElement>\n\nfunction MediaPlaylistItemContent({children, className, ...props}: MediaPlaylistItemContentProps) {\n  return (\n    <div className={clsx(styles.MediaPlaylist__content, className)} {...props}>\n      {children}\n    </div>\n  )\n}\n\nexport type MediaPlaylistItemMediaProps = React.HTMLAttributes<HTMLDivElement>\n\nconst MediaPlaylistItemMedia = forwardRef<HTMLDivElement, MediaPlaylistItemMediaProps>(function MediaPlaylistItemMedia(\n  {children, className, ...props},\n  ref,\n) {\n  return (\n    <div ref={ref} className={clsx(styles.MediaPlaylist__media, className)} {...props}>\n      {children}\n    </div>\n  )\n})\n\nconst mediaPlaylistComponents = {\n  Heading: MediaPlaylistHeading,\n  Item: MediaPlaylistItem,\n  ItemHeading: MediaPlaylistItemHeading,\n  ItemContent: MediaPlaylistItemContent,\n  ItemMedia: MediaPlaylistItemMedia,\n} satisfies MediaPlaylistComponentTypes\n\nconst testIds = {\n  root: 'MediaPlaylist',\n}\n\n/**\n * Use MediaPlaylist to pair media playback with an itemized, thumbnail-backed playlist.\n */\nexport const MediaPlaylist = Object.assign(MediaPlaylistRoot, {\n  Heading: MediaPlaylistHeading,\n  Item: MediaPlaylistItem,\n  ItemHeading: MediaPlaylistItemHeading,\n  ItemContent: MediaPlaylistItemContent,\n  ItemMedia: MediaPlaylistItemMedia,\n  testIds,\n})\n"],"mappings":"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"}

package/esm/MediaPlaylist/MediaPlaylist.module-BU39a4-W.css

@@ -0,0 +1 @@
+.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{padding-block-start:var(--base-size-36);padding-inline:var(--base-size-20)}@media screen and (width<=63.24rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{width:100%;max-width:38.625rem;margin-inline:auto;padding:0}}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__layout___Jxb17{background:var(--brand-MediaPlaylist-bgColor);flex-direction:column;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);order:2;min-width:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__heading___bvLnj{min-height:var(--base-size-48);align-items:center;gap:var(--base-size-8);padding:var(--base-size-12) var(--base-size-16);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);color:var(--brand-color-text-muted);font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);text-transform:uppercase;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingLabel___cOPfs{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit;margin:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingCounter___xJSQs{align-items:center;gap:var(--base-size-8);color:var(--brand-color-text-default);display:inline-flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingCounter___xJSQs:before{content:"•";color:var(--brand-color-text-muted)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2{width:100%;padding:var(--base-size-16);order:1}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2{min-width:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2[hidden]{display:none}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panel___iC9Tx{gap:var(--base-size-20);flex-direction:column;width:100%;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr{max-width:var(--brand-Prose-lineLength)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb{background-color:var(--base-color-scale-black-0);overflow:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb img,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb picture,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb video,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb iframe{width:100%;max-width:100%;display:block}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB{flex-direction:column;order:2;display:flex;overflow-x:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist--overflowItems___QWHRc .Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB{max-block-size:calc((3 * var(--base-size-64)) + (6 * var(--base-size-12)));overscroll-behavior:contain;scroll-padding-block:var(--base-size-24);overflow-y:auto}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__pagination___mct_v{padding:var(--base-size-12) var(--base-size-16) var(--base-size-16);border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);order:3;justify-content:center;margin:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C{min-width:0;min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-12)));flex-direction:column;flex:none;align-items:flex-start;display:flex;position:relative;overflow-x:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C:before{content:"";height:var(--brand-borderWidth-thin);transform-origin:50% 100%;background-color:var(--brand-color-border-muted);transition:transform var(--brand-animation-duration-fast) ease, background-color var(--brand-animation-duration-fast) ease;position:absolute;inset-block-end:0;inset-inline:0;transform:scaleY(1)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G:before{background-color:var(--brand-color-accent-primary);transform:scaleY(2)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeading___j5Q2s{color:var(--brand-color-text-muted);margin:0;display:block}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G .Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeading___j5Q2s{color:var(--brand-color-text-default)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingContent___pzVd0{flex:auto;min-width:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingDetails___wQCnu{gap:var(--base-size-4);flex-direction:column;min-width:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingTitle___F1sIm{color:inherit;word-wrap:anywhere;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX{box-sizing:border-box;width:100%;min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-12)));color:inherit;font:inherit;text-align:left;cursor:pointer;padding:var(--base-size-12) var(--base-size-16);background:0 0;border:0;outline:none;flex-direction:column;align-items:flex-start;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tabContent___9cPbZ{align-items:flex-start;gap:var(--base-size-12);width:100%;min-width:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__thumbnail___PENaA{width:var(--base-size-112);block-size:calc(var(--base-size-64) - var(--brand-borderWidth-thin));aspect-ratio:16/9;border-radius:var(--brand-borderRadius-small);background-color:var(--brand-color-canvas-subtle);flex-shrink:0;display:block;overflow:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__thumbnail___PENaA>*{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;display:block}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-4)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__content___m36IL{align-items:flex-start;gap:var(--base-size-12);flex-direction:column;display:flex}@media screen and (width>=38.625rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}@media screen and (width>=63.25rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{box-sizing:border-box;width:100%;border-inline:none;max-inline-size:80rem;margin-inline:auto;padding:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__layout___Jxb17{--brand-MediaPlaylist-desktopGutter:3.75rem;--brand-MediaPlaylist-sidebarWidth:27rem;box-sizing:border-box;grid-template-columns:minmax(0,1fr) minmax(0,27rem);grid-template-areas:"media tabs";grid-template-columns:minmax(0, 1fr) minmax(0, var(--brand-MediaPlaylist-sidebarWidth));grid-column-gap:3.75rem;grid-column-gap:var(--brand-MediaPlaylist-desktopGutter);-moz-column-gap:3.75rem;-moz-column-gap:var(--brand-MediaPlaylist-desktopGutter);column-gap:3.75rem;column-gap:var(--brand-MediaPlaylist-desktopGutter);width:100%;padding-inline-start:3.75rem;padding-inline-start:var(--brand-MediaPlaylist-desktopGutter);display:grid}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y{border:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);flex-direction:column;grid-area:tabs;align-self:stretch;padding-block-start:calc(var(--base-size-48) + var(--base-size-12));display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist--overflowItems___QWHRc .Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB{max-block-size:calc((3 * var(--base-size-64)) + (6 * var(--base-size-20)))}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2{padding-block:var(--base-size-80);grid-area:media;justify-content:flex-start;align-items:flex-start;padding-inline:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2{width:100%}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panel___iC9Tx{gap:var(--base-size-40)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb{width:100%}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb iframe{aspect-ratio:16/9;border-radius:var(--base-size-6)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingDetails___wQCnu{font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h1+p,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h2+p,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h3+p{margin-block-start:var(--base-size-12)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__heading___bvLnj{min-height:auto;padding-block-start:var(--base-size-24);padding-block-end:var(--base-size-12);padding-inline-start:var(--base-size-32);padding-inline-end:var(--brand-MediaPlaylist-desktopGutter)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C{min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-20)))}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX{min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-20)));padding-block:var(--base-size-20);padding-inline-start:var(--base-size-32);padding-inline-end:var(--brand-MediaPlaylist-desktopGutter)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tabContent___9cPbZ{align-items:center}}@media screen and (width>=80rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y{border-inline-end:0}}

package/esm/MediaPlaylist/MediaPlaylist.module.js

@@ -0,0 +1,30 @@
+import './MediaPlaylist.module-BU39a4-W.css';var e = {
+	MediaPlaylist: "Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg",
+	MediaPlaylist__layout: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__layout___Jxb17",
+	MediaPlaylist__playlist: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y",
+	MediaPlaylist__heading: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__heading___bvLnj",
+	MediaPlaylist__headingLabel: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingLabel___cOPfs",
+	MediaPlaylist__headingCounter: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingCounter___xJSQs",
+	MediaPlaylist__mediaPanels: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2",
+	MediaPlaylist__mediaPanel: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2",
+	MediaPlaylist__panel: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__panel___iC9Tx",
+	MediaPlaylist__panelContent: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr",
+	MediaPlaylist__media: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb",
+	MediaPlaylist__tablist: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB",
+	"MediaPlaylist--overflowItems": "Primer_Brand__MediaPlaylist-module__MediaPlaylist--overflowItems___QWHRc",
+	MediaPlaylist__pagination: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__pagination___mct_v",
+	MediaPlaylist__item: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C",
+	"MediaPlaylist__item--selected": "Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G",
+	MediaPlaylist__itemHeading: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeading___j5Q2s",
+	MediaPlaylist__itemHeadingContent: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingContent___pzVd0",
+	MediaPlaylist__itemHeadingDetails: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingDetails___wQCnu",
+	MediaPlaylist__itemHeadingTitle: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingTitle___F1sIm",
+	MediaPlaylist__tab: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX",
+	MediaPlaylist__tabContent: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__tabContent___9cPbZ",
+	MediaPlaylist__thumbnail: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__thumbnail___PENaA",
+	MediaPlaylist__content: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__content___m36IL"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=MediaPlaylist.module.js.map

package/esm/MediaPlaylist/MediaPlaylist.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaPlaylist.module.js","names":[],"sources":["../../src/MediaPlaylist/MediaPlaylist.module.css"],"sourcesContent":[".MediaPlaylist {\n  padding-block-start: var(--base-size-36);\n  padding-inline: var(--base-size-20);\n}\n\n@media screen and (max-width: 63.24rem) {\n  .MediaPlaylist {\n    width: 100%;\n    max-width: 38.625rem;\n    margin-inline: auto;\n    padding: 0;\n  }\n}\n\n.MediaPlaylist__layout {\n  display: flex;\n  flex-direction: column;\n  background: var(--brand-MediaPlaylist-bgColor);\n}\n\n.MediaPlaylist__playlist {\n  order: 2;\n  min-width: 0;\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.MediaPlaylist__heading {\n  display: flex;\n  min-height: var(--base-size-48);\n  align-items: center;\n  gap: var(--base-size-8);\n  padding: var(--base-size-12) var(--base-size-16);\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  color: var(--brand-color-text-muted);\n  font-family: var(--brand-fontStack-monospace);\n  font-size: var(--brand-text-size-100);\n  line-height: var(--brand-text-lineHeight-100);\n  text-transform: uppercase;\n}\n\n.MediaPlaylist__headingLabel {\n  margin: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  line-height: inherit;\n  text-transform: inherit;\n}\n\n.MediaPlaylist__headingCounter {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--base-size-8);\n  color: var(--brand-color-text-default);\n}\n\n.MediaPlaylist__headingCounter::before {\n  content: '•';\n  color: var(--brand-color-text-muted);\n}\n\n.MediaPlaylist__mediaPanels {\n  order: 1;\n  width: 100%;\n  padding: var(--base-size-16);\n}\n\n.MediaPlaylist__mediaPanel {\n  min-width: 0;\n}\n\n.MediaPlaylist__mediaPanel[hidden] {\n  display: none;\n}\n\n.MediaPlaylist__panel {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-20);\n  width: 100%;\n}\n\n.MediaPlaylist__panelContent {\n  max-width: var(--brand-Prose-lineLength);\n}\n\n.MediaPlaylist__media {\n  overflow: hidden;\n  background-color: var(--base-color-scale-black-0);\n}\n\n.MediaPlaylist__media :is(img, picture, video, iframe) {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n}\n\n.MediaPlaylist__tablist {\n  order: 2;\n  display: flex;\n  flex-direction: column;\n  overflow-x: hidden;\n}\n\n.MediaPlaylist--overflowItems .MediaPlaylist__tablist {\n  max-block-size: calc((3 * var(--base-size-64)) + (6 * var(--base-size-12)));\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scroll-padding-block: var(--base-size-24);\n}\n\n.MediaPlaylist__pagination {\n  order: 3;\n  display: flex;\n  justify-content: center;\n  margin: 0;\n  padding: var(--base-size-12) var(--base-size-16) var(--base-size-16);\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.MediaPlaylist__item {\n  position: relative;\n  min-width: 0;\n  display: flex;\n  flex: 0 0 auto;\n  flex-direction: column;\n  align-items: flex-start;\n  min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-12)));\n  overflow-x: hidden;\n}\n\n.MediaPlaylist__item::before {\n  content: '';\n  position: absolute;\n  inset-block-end: 0;\n  inset-inline: 0;\n  height: var(--brand-borderWidth-thin);\n  transform: scaleY(1);\n  transform-origin: 50% 100%;\n  background-color: var(--brand-color-border-muted);\n  transition: transform var(--brand-animation-duration-fast) ease,\n    background-color var(--brand-animation-duration-fast) ease;\n}\n\n.MediaPlaylist__item--selected {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.MediaPlaylist__item--selected::before {\n  transform: scaleY(2);\n  background-color: var(--brand-color-accent-primary);\n}\n\n.MediaPlaylist__itemHeading {\n  display: block;\n  margin: 0;\n  color: var(--brand-color-text-muted);\n}\n\n.MediaPlaylist__item--selected .MediaPlaylist__itemHeading {\n  color: var(--brand-color-text-default);\n}\n\n.MediaPlaylist__itemHeadingContent {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.MediaPlaylist__itemHeadingDetails {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-4);\n  min-width: 0;\n}\n\n.MediaPlaylist__itemHeadingTitle {\n  display: -webkit-box;\n  color: inherit;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n}\n\n.MediaPlaylist__tab {\n  box-sizing: border-box;\n  width: 100%;\n  min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-12)));\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  cursor: pointer;\n  outline: none;\n  padding: var(--base-size-12) var(--base-size-16);\n}\n\n.MediaPlaylist__tabContent {\n  display: flex;\n  align-items: flex-start;\n  min-width: 0;\n  width: 100%;\n  gap: var(--base-size-12);\n}\n\n.MediaPlaylist__thumbnail {\n  display: block;\n  flex-shrink: 0;\n  width: var(--base-size-112);\n  block-size: calc(var(--base-size-64) - var(--brand-borderWidth-thin));\n  overflow: hidden;\n  aspect-ratio: 16 / 9;\n  border-radius: var(--brand-borderRadius-small);\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.MediaPlaylist__thumbnail > * {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.MediaPlaylist__tab:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-4);\n}\n\n.MediaPlaylist__content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-12);\n}\n\n@media screen and (min-width: 38.625rem) {\n  .MediaPlaylist {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .MediaPlaylist {\n    box-sizing: border-box;\n    width: 100%;\n    max-inline-size: 80rem;\n    margin-inline: auto;\n    padding: 0;\n    border-inline: none;\n  }\n\n  .MediaPlaylist__layout {\n    --brand-MediaPlaylist-desktopGutter: 3.75rem;\n    --brand-MediaPlaylist-sidebarWidth: 27rem;\n\n    display: grid;\n    box-sizing: border-box;\n    width: 100%;\n    grid-template-areas: 'media tabs';\n    grid-template-columns: minmax(0, 1fr) minmax(0, var(--brand-MediaPlaylist-sidebarWidth));\n    column-gap: var(--brand-MediaPlaylist-desktopGutter);\n    padding-inline-start: var(--brand-MediaPlaylist-desktopGutter);\n  }\n\n  .MediaPlaylist__playlist {\n    grid-area: tabs;\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n    padding-block-start: calc(var(--base-size-48) + var(--base-size-12));\n    border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .MediaPlaylist--overflowItems .MediaPlaylist__tablist {\n    max-block-size: calc((3 * var(--base-size-64)) + (6 * var(--base-size-20)));\n  }\n\n  .MediaPlaylist__mediaPanels {\n    grid-area: media;\n    display: flex;\n    align-items: flex-start;\n    justify-content: flex-start;\n    padding-block: var(--base-size-80);\n    padding-inline: 0;\n  }\n\n  .MediaPlaylist__mediaPanel {\n    width: 100%;\n  }\n\n  .MediaPlaylist__panel {\n    gap: var(--base-size-40);\n  }\n\n  .MediaPlaylist__panelContent {\n    width: 100%;\n  }\n\n  .MediaPlaylist__media {\n    width: 100%;\n  }\n\n  .MediaPlaylist__media iframe {\n    aspect-ratio: 16 / 9;\n    border-radius: var(--base-size-6);\n  }\n\n  .MediaPlaylist__itemHeadingDetails {\n    font-size: var(--brand-text-size-200);\n    line-height: var(--brand-text-lineHeight-200);\n  }\n\n  .MediaPlaylist__panelContent :is(h1, h2, h3) + p {\n    margin-block-start: var(--base-size-12);\n  }\n\n  .MediaPlaylist__heading {\n    min-height: auto;\n    padding-block-start: var(--base-size-24);\n    padding-block-end: var(--base-size-12);\n    padding-inline-start: var(--base-size-32);\n    padding-inline-end: var(--brand-MediaPlaylist-desktopGutter);\n  }\n\n  .MediaPlaylist__item {\n    min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-20)));\n  }\n\n  .MediaPlaylist__tab {\n    min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-20)));\n    padding-block: var(--base-size-20);\n    padding-inline-start: var(--base-size-32);\n    padding-inline-end: var(--brand-MediaPlaylist-desktopGutter);\n  }\n\n  .MediaPlaylist__tabContent {\n    align-items: center;\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .MediaPlaylist {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .MediaPlaylist__playlist {\n    border-inline-end: 0;\n  }\n}\n"],"mappings":""}

package/esm/MediaPlaylist/index.d.ts

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

package/esm/MediaPlaylist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MediaPlaylist/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/esm/MediaPlaylist/useMediaPlaylist.d.ts

@@ -0,0 +1,84 @@
+import React from 'react';
+import type { PaginationPageType } from '../Pagination/model';
+type UseMediaPlaylistProps = {
+    children: React.ReactNode;
+    components: MediaPlaylistComponentTypes;
+    defaultSelectedIndex: number;
+    onChange?: (selectedIndex: number) => void;
+    selectedIndex?: number;
+};
+/**
+ * Internal only hook used by MediaPlaylist to manage state and behavior.
+ * @private
+ * @internal
+ */
+export type MediaPlaylistComponentTypes = {
+    Heading: React.ElementType;
+    Item: React.ElementType;
+    ItemHeading: React.ElementType;
+    ItemContent: React.ElementType;
+    ItemMedia: React.ElementType;
+};
+type MediaPlaylistHeadingChildProps = {
+    activeIndex?: number | null;
+    id?: string;
+    itemCount?: number;
+};
+type MediaPlaylistItemChildProps = React.PropsWithChildren<Record<string, unknown>>;
+type MediaPlaylistItemChild = React.ReactElement<MediaPlaylistItemChildProps>;
+type MediaPlaylistItemData = {
+    className?: string;
+    content: MediaPlaylistItemChild;
+    heading: MediaPlaylistItemChild;
+    media: MediaPlaylistItemChild;
+    thumbnail?: React.ReactNode;
+};
+/**
+ * Internal only hook used by MediaPlaylist to manage state and behavior.
+ * @private
+ * @internal
+ */
+export declare function useMediaPlaylist({ children, components, defaultSelectedIndex, onChange, selectedIndex, }: UseMediaPlaylistProps): {
+    activeIndex: number | null;
+    currentItemPage: number;
+    getPaginationAttributes: (pageNumber: number, page: PaginationPageType) => {
+        [key: string]: string;
+    };
+    getTabListProps: (props: {
+        label: string;
+        labelledBy?: never;
+    } | {
+        labelledBy: string;
+        label?: never;
+    }) => {
+        role: "tablist";
+        'aria-orientation': "horizontal" | "vertical";
+    };
+    getTabPanelProps: (id: string) => {
+        role: "tabpanel";
+        id: `tabs-${string}-panel-${string}`;
+        'aria-labelledby': `tabs-${string}-tab-${string}`;
+        hidden: boolean;
+        tabIndex: 0;
+    };
+    getTabProps: <T extends HTMLElement = HTMLElement>(id: string, externalRef?: React.Ref<T>) => {
+        role: "tab";
+        id: `tabs-${string}-tab-${string}`;
+        'aria-controls': `tabs-${string}-panel-${string}`;
+        'aria-selected': boolean;
+        tabIndex: 0 | -1;
+        onClick: () => void;
+        onKeyDown: (event: React.KeyboardEvent) => void;
+        onFocus: () => void;
+        ref: (element: HTMLElement | null) => void;
+    };
+    handlePageChange: (event: React.MouseEvent, page: number) => void;
+    hasOverflowItems: boolean;
+    headingChild: React.ReactElement<MediaPlaylistHeadingChildProps, string | React.JSXElementConstructor<any>> | null;
+    isItemSelected: (index: number) => boolean;
+    items: MediaPlaylistItemData[];
+    setItemRef: (index: number, element: HTMLDivElement | null) => void;
+    tabListRef: React.RefObject<HTMLDivElement | null>;
+};
+export {};
+//# sourceMappingURL=useMediaPlaylist.d.ts.map

package/esm/MediaPlaylist/useMediaPlaylist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaPlaylist.d.ts","sourceRoot":"","sources":["../../src/MediaPlaylist/useMediaPlaylist.ts"],"names":[],"mappings":"AAAA,OAAO,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,qBAAqB,CAAA;AAG3D,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,EAAE,2BAA2B,CAAA;IACvC,oBAAoB,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,2BAA2B,GAAG;IACxC,OAAO,EAAE,KAAK,CAAC,WAAW,CAAA;IAC1B,IAAI,EAAE,KAAK,CAAC,WAAW,CAAA;IACvB,WAAW,EAAE,KAAK,CAAC,WAAW,CAAA;IAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,CAAA;IAC9B,SAAS,EAAE,KAAK,CAAC,WAAW,CAAA;CAC7B,CAAA;AAED,KAAK,8BAA8B,GAAG;IACpC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAOD,KAAK,2BAA2B,GAAG,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;AAEnF,KAAK,sBAAsB,GAAG,KAAK,CAAC,YAAY,CAAC,2BAA2B,CAAC,CAAA;AAE7E,KAAK,qBAAqB,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,sBAAsB,CAAA;IAC/B,OAAO,EAAE,sBAAsB,CAAA;IAC/B,KAAK,EAAE,sBAAsB,CAAA;IAC7B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B,CAAA;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAU,EACV,oBAAoB,EACpB,QAAQ,EACR,aAAa,GACd,EAAE,qBAAqB;;;0CA8FmC,MAAM,QAAQ,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BArB/E,KAAK,CAAC,UAAU,QAAQ,MAAM;;;4BAeG,MAAM;;wBAEV,MAAM,WAAW,cAAc,GAAG,IAAI;;EAuC9E"}

package/esm/MediaPlaylist/useMediaPlaylist.js

@@ -0,0 +1,114 @@
+import { useTabs as e } from "../hooks/useTabs.js";
+import t, { useCallback as n, useEffect as r, useMemo as i, useRef as a } from "react";
+//#region src/MediaPlaylist/useMediaPlaylist.ts
+function o({ children: t, components: o, defaultSelectedIndex: s, onChange: u, selectedIndex: d }) {
+	let { headingChild: f, items: p } = i(() => c(t, o), [t, o]), m = p.length, h = l(s, m), g = typeof d == "number" && Number.isFinite(d) ? l(d, m) : null, _ = g ?? h, v = _ === null ? void 0 : String(_), y = m > 3, b = a(null), x = a([]), S = a(!1), C = n((e) => {
+		let t = b.current, n = x.current[e];
+		!t || !n || typeof t.scrollTo != "function" || t.scrollTo({
+			top: Math.max(0, n.offsetTop - t.offsetTop),
+			behavior: "smooth"
+		});
+	}, []), { activeTab: w, activateTab: T, getTabListProps: E, getTabPanelProps: D, getTabProps: O } = e({
+		defaultTab: v,
+		onTabActivate: n((e) => {
+			let t = Number(e);
+			if (!Number.isNaN(t)) {
+				if (y && C(t), S.current) {
+					S.current = !1;
+					return;
+				}
+				u?.(t);
+			}
+		}, [
+			y,
+			u,
+			C
+		]),
+		orientation: "vertical"
+	}), k = w === null ? _ : l(Number(w), m), A = k === null ? 1 : k + 1;
+	r(() => {
+		if (g === null) return;
+		let e = String(g);
+		w !== e && (S.current = !0, T(e));
+	}, [
+		T,
+		w,
+		g
+	]), r(() => {
+		k === null || w === String(k) || (S.current = !0, T(String(k)));
+	}, [
+		T,
+		k,
+		w
+	]);
+	let j = n((e, t) => {
+		e.preventDefault();
+		let n = l(t - 1, m);
+		n !== null && (C(n), w !== String(n) && T(String(n)));
+	}, [
+		T,
+		w,
+		m,
+		C
+	]), M = n((e) => w === String(e), [w]), N = n((e, t) => {
+		x.current[e] = t;
+	}, []);
+	return {
+		activeIndex: k,
+		currentItemPage: A,
+		getPaginationAttributes: n((e, t) => {
+			switch (t.type) {
+				case "PREV": return { "aria-label": "Previous video" };
+				case "NEXT": return { "aria-label": "Next video" };
+				case "NUM": {
+					let n = { "aria-label": `Video ${e}` };
+					return t.selected && (n["aria-current"] = "step"), n;
+				}
+				case "BREAK": return {};
+			}
+		}, []),
+		getTabListProps: E,
+		getTabPanelProps: D,
+		getTabProps: O,
+		handlePageChange: j,
+		hasOverflowItems: y,
+		headingChild: f,
+		isItemSelected: M,
+		items: p,
+		setItemRef: N,
+		tabListRef: b
+	};
+}
+var s = (e) => (n) => t.isValidElement(n) && n.type === e;
+function c(e, n) {
+	let r = s(n.Heading), i = s(n.Item), a = s(n.ItemHeading), o = s(n.ItemContent), c = s(n.ItemMedia), l = {
+		headingChild: null,
+		items: []
+	};
+	for (let n of t.Children.toArray(e)) {
+		if (r(n)) {
+			l.headingChild = n;
+			continue;
+		}
+		if (!i(n)) continue;
+		let e = t.Children.toArray(n.props.children), s = {
+			heading: null,
+			content: null,
+			media: null
+		};
+		for (let t of e) a(t) && (s.heading = t), o(t) && (s.content = t), c(t) && (s.media = t);
+		!s.heading || !s.content || !s.media || l.items.push({
+			className: n.props.className,
+			content: s.content,
+			heading: s.heading,
+			media: s.media,
+			thumbnail: n.props.thumbnail
+		});
+	}
+	return l;
+}
+var l = (e, t) => t < 1 ? null : Math.min(Math.max(Number.isFinite(e) ? Math.trunc(e) : 0, 0), t - 1);
+//#endregion
+export { o as useMediaPlaylist };
+
+//# sourceMappingURL=useMediaPlaylist.js.map

package/esm/MediaPlaylist/useMediaPlaylist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaPlaylist.js","names":[],"sources":["../../src/MediaPlaylist/useMediaPlaylist.ts"],"sourcesContent":["import React, {useCallback, useEffect, useMemo, useRef} from 'react'\n\nimport type {PaginationPageType} from '../Pagination/model'\nimport {useTabs} from '../hooks/useTabs'\n\ntype UseMediaPlaylistProps = {\n  children: React.ReactNode\n  components: MediaPlaylistComponentTypes\n  defaultSelectedIndex: number\n  onChange?: (selectedIndex: number) => void\n  selectedIndex?: number\n}\n\n/**\n * Internal only hook used by MediaPlaylist to manage state and behavior.\n * @private\n * @internal\n */\nexport type MediaPlaylistComponentTypes = {\n  Heading: React.ElementType\n  Item: React.ElementType\n  ItemHeading: React.ElementType\n  ItemContent: React.ElementType\n  ItemMedia: React.ElementType\n}\n\ntype MediaPlaylistHeadingChildProps = {\n  activeIndex?: number | null\n  id?: string\n  itemCount?: number\n}\n\ntype MediaPlaylistItemProps = React.PropsWithChildren<{\n  className?: string\n  thumbnail?: React.ReactNode\n}>\n\ntype MediaPlaylistItemChildProps = React.PropsWithChildren<Record<string, unknown>>\n\ntype MediaPlaylistItemChild = React.ReactElement<MediaPlaylistItemChildProps>\n\ntype MediaPlaylistItemData = {\n  className?: string\n  content: MediaPlaylistItemChild\n  heading: MediaPlaylistItemChild\n  media: MediaPlaylistItemChild\n  thumbnail?: React.ReactNode\n}\n\n/**\n * Internal only hook used by MediaPlaylist to manage state and behavior.\n * @private\n * @internal\n */\nexport function useMediaPlaylist({\n  children,\n  components,\n  defaultSelectedIndex,\n  onChange,\n  selectedIndex,\n}: UseMediaPlaylistProps) {\n  const {headingChild, items} = useMemo(() => getMediaPlaylistChildren(children, components), [children, components])\n  const itemCount = items.length\n  const defaultActiveIndex = getValidIndex(defaultSelectedIndex, itemCount)\n\n  const controlledActiveIndex =\n    typeof selectedIndex === 'number' && Number.isFinite(selectedIndex) ? getValidIndex(selectedIndex, itemCount) : null\n\n  const initialActiveIndex = controlledActiveIndex ?? defaultActiveIndex\n  const initialActiveTab = initialActiveIndex === null ? undefined : String(initialActiveIndex)\n  const hasOverflowItems = itemCount > 3\n  const tabListRef = useRef<HTMLDivElement>(null)\n  const itemRefs = useRef<Array<HTMLDivElement | null>>([])\n  const suppressOnTabActivateRef = useRef(false)\n\n  const scrollListToIndex = useCallback((index: number) => {\n    const tabList = tabListRef.current\n    const item = itemRefs.current[index]\n\n    if (!tabList || !item || typeof tabList.scrollTo !== 'function') return\n\n    tabList.scrollTo({\n      top: Math.max(0, item.offsetTop - tabList.offsetTop),\n      behavior: 'smooth',\n    })\n  }, [])\n\n  const handleTabActivate = useCallback(\n    (id: string) => {\n      const nextIndex = Number(id)\n      if (Number.isNaN(nextIndex)) return\n\n      if (hasOverflowItems) {\n        scrollListToIndex(nextIndex)\n      }\n\n      if (suppressOnTabActivateRef.current) {\n        suppressOnTabActivateRef.current = false\n        return\n      }\n\n      onChange?.(nextIndex)\n    },\n    [hasOverflowItems, onChange, scrollListToIndex],\n  )\n\n  const {activeTab, activateTab, getTabListProps, getTabPanelProps, getTabProps} = useTabs({\n    defaultTab: initialActiveTab,\n    onTabActivate: handleTabActivate,\n    orientation: 'vertical',\n  })\n\n  const activeIndex = activeTab === null ? initialActiveIndex : getValidIndex(Number(activeTab), itemCount)\n  const currentItemPage = activeIndex === null ? 1 : activeIndex + 1\n\n  useEffect(() => {\n    if (controlledActiveIndex === null) return\n\n    const controlledTab = String(controlledActiveIndex)\n    if (activeTab !== controlledTab) {\n      suppressOnTabActivateRef.current = true\n      activateTab(controlledTab)\n    }\n  }, [activateTab, activeTab, controlledActiveIndex])\n\n  useEffect(() => {\n    if (activeIndex === null || activeTab === String(activeIndex)) return\n\n    suppressOnTabActivateRef.current = true\n    activateTab(String(activeIndex))\n  }, [activateTab, activeIndex, activeTab])\n\n  const handlePageChange = useCallback(\n    (event: React.MouseEvent, page: number) => {\n      event.preventDefault()\n\n      const nextIndex = getValidIndex(page - 1, itemCount)\n      if (nextIndex === null) return\n\n      scrollListToIndex(nextIndex)\n\n      if (activeTab !== String(nextIndex)) {\n        activateTab(String(nextIndex))\n      }\n    },\n    [activateTab, activeTab, itemCount, scrollListToIndex],\n  )\n\n  const isItemSelected = useCallback((index: number) => activeTab === String(index), [activeTab])\n\n  const setItemRef = useCallback((index: number, element: HTMLDivElement | null) => {\n    itemRefs.current[index] = element\n  }, [])\n\n  const getPaginationAttributes = useCallback((pageNumber: number, page: PaginationPageType) => {\n    switch (page.type) {\n      case 'PREV':\n        return {'aria-label': 'Previous video'}\n      case 'NEXT':\n        return {'aria-label': 'Next video'}\n      case 'NUM': {\n        const attributes: {[key: string]: string} = {'aria-label': `Video ${pageNumber}`}\n\n        if (page.selected) {\n          attributes['aria-current'] = 'step'\n        }\n\n        return attributes\n      }\n      case 'BREAK':\n        return {}\n    }\n  }, [])\n\n  return {\n    activeIndex,\n    currentItemPage,\n    getPaginationAttributes,\n    getTabListProps,\n    getTabPanelProps,\n    getTabProps,\n    handlePageChange,\n    hasOverflowItems,\n    headingChild,\n    isItemSelected,\n    items,\n    setItemRef,\n    tabListRef,\n  }\n}\n\nconst createComponentTypeGuard =\n  <T>(componentType: React.ElementType) =>\n  (element: unknown): element is React.ReactElement<T> =>\n    React.isValidElement<T>(element) && element.type === componentType\n\nfunction getMediaPlaylistChildren(children: React.ReactNode, components: MediaPlaylistComponentTypes) {\n  const isHeading = createComponentTypeGuard<MediaPlaylistHeadingChildProps>(components.Heading)\n  const isItem = createComponentTypeGuard<MediaPlaylistItemProps>(components.Item)\n  const isItemHeading = createComponentTypeGuard<MediaPlaylistItemChildProps>(components.ItemHeading)\n  const isItemContent = createComponentTypeGuard<MediaPlaylistItemChildProps>(components.ItemContent)\n  const isItemMedia = createComponentTypeGuard<MediaPlaylistItemChildProps>(components.ItemMedia)\n\n  const playlistChildren = {\n    headingChild: null as React.ReactElement<MediaPlaylistHeadingChildProps> | null,\n    items: [] as MediaPlaylistItemData[],\n  }\n\n  for (const child of React.Children.toArray(children)) {\n    if (isHeading(child)) {\n      playlistChildren.headingChild = child\n      continue\n    }\n\n    if (!isItem(child)) {\n      continue\n    }\n\n    const itemChildren = React.Children.toArray(child.props.children)\n\n    const itemParts = {\n      heading: null as MediaPlaylistItemChild | null,\n      content: null as MediaPlaylistItemChild | null,\n      media: null as MediaPlaylistItemChild | null,\n    }\n\n    for (const itemChild of itemChildren) {\n      if (isItemHeading(itemChild)) {\n        itemParts.heading = itemChild\n      }\n\n      if (isItemContent(itemChild)) {\n        itemParts.content = itemChild\n      }\n\n      if (isItemMedia(itemChild)) {\n        itemParts.media = itemChild\n      }\n    }\n\n    if (!itemParts.heading || !itemParts.content || !itemParts.media) {\n      continue\n    }\n\n    playlistChildren.items.push({\n      className: child.props.className,\n      content: itemParts.content,\n      heading: itemParts.heading,\n      media: itemParts.media,\n      thumbnail: child.props.thumbnail,\n    })\n  }\n\n  return playlistChildren\n}\n\nconst getValidIndex = (index: number, length: number) => {\n  if (length < 1) return null\n\n  const normalizedIndex = Number.isFinite(index) ? Math.trunc(index) : 0\n  return Math.min(Math.max(normalizedIndex, 0), length - 1)\n}\n"],"mappings":"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"}

package/esm/Pagination/Pagination.d.ts

@@ -1,14 +1,11 @@
 import React from 'react';
-/**
- * Design tokens
- */
-import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pagination/colors-with-modes.css';
+import { PaginationPageType } from './model';
 export type PaginationProps = {
     pageCount: number;
     currentPage: number;
     onPageChange?: (e: React.MouseEvent, n: number) => void;
     hrefBuilder?: (n: number) => string;
-    pageAttributesBuilder?: (n: number) => {
+    pageAttributesBuilder?: (n: number, page: PaginationPageType) => {
         [attributeName: string]: string;
     };
     marginPageCount?: number;

package/esm/Pagination/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAO9C;;GAEG;AACH,OAAO,8GAA8G,CAAA;AAKrH,MAAM,MAAM,eAAe,GAAG;IAE5B,SAAS,EAAE,MAAM,CAAA;IAEjB,WAAW,EAAE,MAAM,CAAA;IAEnB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAEvD,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAEnC,qBAAqB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK;QAAC,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,CAAA;KAAC,CAAA;IAExE,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAA;AAE1D;;;GAGG;AACH,eAAO,MAAM,UAAU,qOAelB,eAAe,6CAyDnB,CAAA"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAM9C,OAAO,EAAuB,kBAAkB,EAAC,MAAM,SAAS,CAAA;AAKhE,MAAM,MAAM,eAAe,GAAG;IAE5B,SAAS,EAAE,MAAM,CAAA;IAEjB,WAAW,EAAE,MAAM,CAAA;IAEnB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAEvD,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAEnC,qBAAqB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK;QAAC,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,CAAA;KAAC,CAAA;IAElG,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAA;AAE1D;;;GAGG;AACH,eAAO,MAAM,UAAU,qOAelB,eAAe,6CAyDnB,CAAA"}

package/esm/Pagination/Pagination.js

@@ -1,25 +1,25 @@
 import e from "../node_modules/clsx/dist/clsx.js";
-import { Link as t } from "../Link/Link.js";
-import { useWindowSize as n } from "../hooks/useWindowSize.js";
-import { buildPaginationModel as r } from "./model.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/pagination/colors-with-modes-C2GLM06X.css';/* empty css                                                                                                        */
-import i from "./Pagination.module.js";
-import a, { memo as o, useCallback as s } from "react";
-import { jsx as c } from "react/jsx-runtime";
+import { ExpandableArrow as t } from "../ExpandableArrow/ExpandableArrow.js";
+import { Button as n } from "../Button/Button.js";
+import { useWindowSize as r } from "../hooks/useWindowSize.js";
+import { buildPaginationModel as i } from "./model.js";
+import a from "./Pagination.module.js";
+import o, { memo as s, useCallback as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/Pagination/Pagination.tsx
-var l = o(({ id: t, className: o, pageCount: l, currentPage: f, onPageChange: p, hrefBuilder: m = d, pageAttributesBuilder: h, marginPageCount: g = 1, showPages: _ = !0, surroundingPageCount: v = 2, "aria-label": y, "data-testid": b, ...x }) => {
-	let { width: S } = n();
+var d = s(({ id: t, className: n, pageCount: s, currentPage: u, onPageChange: d, hrefBuilder: m = p, pageAttributesBuilder: h, marginPageCount: g = 1, showPages: _ = !0, surroundingPageCount: v = 2, "aria-label": y, "data-testid": b, ...x }) => {
+	let { width: S } = r();
 	S && S < 768 && (g = 1, v = 0);
-	let C = a.useRef(null), w = s((e) => (t) => {
-		p && p(t, e);
-	}, [p]), T = a.useMemo(() => r(l, f, _, g, v).map((e) => /* @__PURE__ */ c(u, {
+	let C = o.useRef(null), w = c((e) => (t) => {
+		d && d(t, e);
+	}, [d]), T = o.useMemo(() => i(s, u, _, g, v).map((e) => /* @__PURE__ */ l(f, {
 		page: e,
 		hrefBuilder: m,
 		pageAttributesBuilder: h,
 		onClick: w(e.num)
 	}, `${e.type}-${e.num}`)), [
-		l,
-		f,
+		s,
+		u,
 		_,
 		g,
 		v,
@@ -27,69 +27,111 @@ var l = o(({ id: t, className: o, pageCount: l, currentPage: f, onPageChange: p,
 		h,
 		w
 	]);
-	return /* @__PURE__ */ c("nav", {
+	return /* @__PURE__ */ l("nav", {
 		ref: C,
 		id: t,
-		className: e(i.Pagination, _ && i.Pagination__showPages, o),
+		className: e(a.Pagination, n),
 		"data-testid": b,
 		"aria-label": y || "Pagination",
 		...x,
-		children: /* @__PURE__ */ c("div", {
-			className: e(i.Pagination__inner),
+		children: /* @__PURE__ */ l("div", {
+			className: e(a.Pagination__inner),
 			children: T
 		})
 	});
-}), u = ({ page: n, hrefBuilder: r, pageAttributesBuilder: a, onClick: o }) => {
-	let s = {
+}), f = ({ page: r, hrefBuilder: i, pageAttributesBuilder: s, onClick: c }) => {
+	let [d, f] = o.useState(!1), p = {
 		role: "button",
-		arrowDirection: "none",
-		className: e(i.Pagination__item),
-		size: "medium",
-		onClick: o
-	}, l = a?.(n.num);
-	switch (n.type) {
-		case "PREV": return /* @__PURE__ */ c(t, {
-			...s,
+		size: "small",
+		variant: "subtle",
+		onClick: r.disabled ? void 0 : c
+	}, { className: m, ...h } = s?.(r.num, r) ?? {};
+	switch (r.type) {
+		case "PREV": return /* @__PURE__ */ l(n, {
+			...p,
+			as: "a",
 			rel: "prev",
-			arrowDirection: "start",
-			href: n.disabled ? void 0 : r(n.num),
-			"aria-disabled": n.disabled || void 0,
+			href: r.disabled ? void 0 : i(r.num),
+			"aria-disabled": r.disabled || void 0,
 			"aria-label": "Previous Page",
-			...l,
-			children: "Previous"
+			...h,
+			className: e(a.Pagination__controlItem, m),
+			onMouseEnter: () => f(!0),
+			onMouseLeave: () => f(!1),
+			onFocus: () => f(!0),
+			onBlur: () => f(!1),
+			children: /* @__PURE__ */ u("span", {
+				className: a.Pagination__controlContent,
+				children: [/* @__PURE__ */ l("span", {
+					className: e(a.Pagination__controlArrowWrapper, a["Pagination__controlArrowWrapper--previous"]),
+					children: /* @__PURE__ */ l(t, {
+						hidden: !0,
+						reverse: !0,
+						expanded: !r.disabled && d,
+						className: a.Pagination__controlArrow
+					})
+				}), /* @__PURE__ */ l("span", {
+					className: a.Pagination__controlText,
+					children: "Previous"
+				})]
+			})
 		});
-		case "NEXT": return /* @__PURE__ */ c(t, {
-			...s,
+		case "NEXT": return /* @__PURE__ */ l(n, {
+			...p,
+			as: "a",
 			rel: "next",
-			arrowDirection: "end",
-			href: n.disabled ? void 0 : r(n.num),
-			"aria-disabled": n.disabled || void 0,
+			href: r.disabled ? void 0 : i(r.num),
+			"aria-disabled": r.disabled || void 0,
 			"aria-label": "Next Page",
-			...l,
-			children: "Next"
+			...h,
+			className: e(a.Pagination__controlItem, m),
+			onMouseEnter: () => f(!0),
+			onMouseLeave: () => f(!1),
+			onFocus: () => f(!0),
+			onBlur: () => f(!1),
+			children: /* @__PURE__ */ u("span", {
+				className: a.Pagination__controlContent,
+				children: [/* @__PURE__ */ l("span", {
+					className: a.Pagination__controlText,
+					children: "Next"
+				}), /* @__PURE__ */ l("span", {
+					className: e(a.Pagination__controlArrowWrapper, a["Pagination__controlArrowWrapper--next"]),
+					children: /* @__PURE__ */ l(t, {
+						hidden: !0,
+						expanded: !r.disabled && d,
+						className: a.Pagination__controlArrow
+					})
+				})]
+			})
 		});
-		case "NUM": return /* @__PURE__ */ c(t, {
-			...s,
-			href: r(n.num),
-			"aria-label": `Page ${n.num}${n.precedesBreak ? "..." : ""}`,
-			"aria-current": n.selected ? "page" : void 0,
-			...l,
-			children: n.num
+		case "NUM": return /* @__PURE__ */ l(n, {
+			...p,
+			as: "a",
+			variant: r.selected ? "primary" : "subtle",
+			className: e(a.Pagination__pageItem, m),
+			href: i(r.num),
+			"aria-label": `Page ${r.num}${r.precedesBreak ? "..." : ""}`,
+			"aria-current": r.selected ? "page" : void 0,
+			...h,
+			children: r.num
 		});
-		case "BREAK": return /* @__PURE__ */ c(t, {
-			...s,
+		case "BREAK": return /* @__PURE__ */ l(n, {
+			...p,
+			as: "a",
+			className: e(a.Pagination__pageItem, m),
+			variant: "subtle",
 			role: "presentation",
 			href: void 0,
 			onClick: void 0,
-			...l,
+			...h,
 			children: "…"
 		});
 	}
 };
-function d(e) {
+function p(e) {
 	return `#${e}`;
 }
 //#endregion
-export { l as Pagination };
+export { d as Pagination };
 
 //# sourceMappingURL=Pagination.js.map

package/esm/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":[],"sources":["../../src/Pagination/Pagination.tsx"],"sourcesContent":["import React, {memo, useCallback} from 'react'\nimport {Link, LinkProps, useWindowSize} from '..'\n\nimport {clsx} from 'clsx'\n\nimport {buildPaginationModel, PageType} from './model'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pagination/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Pagination.module.css'\n\nexport type PaginationProps = {\n  /* The total number of pages */\n  pageCount: number\n  /* The current page number */\n  currentPage: number\n  /* Callback function for when the page changes */\n  onPageChange?: (e: React.MouseEvent, n: number) => void\n  /* Function to build the href for each page */\n  hrefBuilder?: (n: number) => string\n  /* Function to forward custom attributes for each pagination item */\n  pageAttributesBuilder?: (n: number) => {[attributeName: string]: string}\n  /* Defines how many pages are to to be displayed on the left and right of the component */\n  marginPageCount?: number\n  /* Whether to show the page numbers */\n  showPages?: boolean\n  /* The number of pages to show on each side of the current page */\n  surroundingPageCount?: number\n  'data-testid'?: string\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>\n\n/**\n * Use Pagination to display a sequence of links that allow navigation to discrete, related pages.\n * @see https://primer.style/brand/components/Pagination\n */\nexport const Pagination = memo(\n  ({\n    id,\n    className,\n    pageCount,\n    currentPage,\n    onPageChange,\n    hrefBuilder = defaultHrefBuilder,\n    pageAttributesBuilder,\n    marginPageCount = 1,\n    showPages = true,\n    surroundingPageCount = 2,\n    'aria-label': ariaLabel,\n    'data-testid': testId,\n    ...rest\n  }: PaginationProps) => {\n    // On mobile, limit the number of visible numbers\n    const {width} = useWindowSize()\n    if (width && width < 768) {\n      marginPageCount = 1\n      surroundingPageCount = 0\n    }\n\n    const navRef = React.useRef<HTMLElement>(null)\n\n    const pageChange = useCallback(\n      (n: number) => (e: React.MouseEvent) => {\n        if (onPageChange) {\n          onPageChange(e, n)\n        }\n      },\n      [onPageChange],\n    )\n\n    const paginationItems = React.useMemo(() => {\n      const model = buildPaginationModel(pageCount, currentPage, showPages, marginPageCount, surroundingPageCount)\n\n      return model.map(page => {\n        return (\n          <PaginationItem\n            key={`${page.type}-${page.num}`}\n            page={page}\n            hrefBuilder={hrefBuilder}\n            pageAttributesBuilder={pageAttributesBuilder}\n            onClick={pageChange(page.num)}\n          />\n        )\n      })\n    }, [\n      pageCount,\n      currentPage,\n      showPages,\n      marginPageCount,\n      surroundingPageCount,\n      hrefBuilder,\n      pageAttributesBuilder,\n      pageChange,\n    ])\n\n    return (\n      <nav\n        ref={navRef}\n        id={id}\n        className={clsx(styles.Pagination, showPages && styles['Pagination__showPages'], className)}\n        data-testid={testId}\n        aria-label={ariaLabel || 'Pagination'}\n        {...rest}\n      >\n        <div className={clsx(styles.Pagination__inner)}>{paginationItems}</div>\n      </nav>\n    )\n  },\n)\n\ntype PaginationItemProps = {\n  page: PageType\n  hrefBuilder: (n: number) => string\n  pageAttributesBuilder?: (n: number) => {[key: string]: string}\n  onClick?: LinkProps['onClick']\n}\n\nconst PaginationItem = ({page, hrefBuilder, pageAttributesBuilder, onClick}: PaginationItemProps) => {\n  const baseProps: LinkProps = {\n    role: 'button',\n    arrowDirection: 'none',\n    className: clsx(styles.Pagination__item),\n    size: 'medium',\n    onClick,\n  }\n\n  const customProps = pageAttributesBuilder?.(page.num)\n\n  switch (page.type) {\n    case 'PREV': {\n      return (\n        <Link\n          {...baseProps}\n          rel=\"prev\"\n          arrowDirection=\"start\"\n          href={page.disabled ? undefined : hrefBuilder(page.num)}\n          aria-disabled={page.disabled || undefined}\n          aria-label=\"Previous Page\"\n          {...customProps}\n        >\n          Previous\n        </Link>\n      )\n    }\n    case 'NEXT': {\n      return (\n        <Link\n          {...baseProps}\n          rel=\"next\"\n          arrowDirection=\"end\"\n          href={page.disabled ? undefined : hrefBuilder(page.num)}\n          aria-disabled={page.disabled || undefined}\n          aria-label=\"Next Page\"\n          {...customProps}\n        >\n          Next\n        </Link>\n      )\n    }\n    case 'NUM': {\n      return (\n        /**\n         * Append \"...\" to the aria-label for pages that preceed a break because screen readers will change the\n         * tone the text is read in. This is a slightly nicer experience than skipping a bunch of numbers unexpectedly.\n         */\n        <Link\n          {...baseProps}\n          href={hrefBuilder(page.num)}\n          aria-label={`Page ${page.num}${page.precedesBreak ? '...' : ''}`}\n          aria-current={page.selected ? 'page' : undefined}\n          {...customProps}\n        >\n          {page.num}\n        </Link>\n      )\n    }\n    case 'BREAK': {\n      return (\n        <Link {...baseProps} role=\"presentation\" href={undefined} onClick={undefined} {...customProps}>\n          …\n        </Link>\n      )\n    }\n  }\n}\n\nfunction defaultHrefBuilder(pageNum: number) {\n  return `#${pageNum}`\n}\n"],"mappings":";;;;;;;;;AAuCA,IAAa,IAAa,GACvB,EACC,OACA,cACA,cACA,gBACA,iBACA,iBAAc,GACd,0BACA,qBAAkB,GAClB,eAAY,IACZ,0BAAuB,GACvB,cAAc,GACd,eAAe,GACf,GAAG,QACkB;CAErB,IAAM,EAAC,aAAS,GAAe;AAC/B,CAAI,KAAS,IAAQ,QACnB,IAAkB,GAClB,IAAuB;CAGzB,IAAM,IAAS,EAAM,OAAoB,KAAK,EAExC,IAAa,GAChB,OAAe,MAAwB;AACtC,EAAI,KACF,EAAa,GAAG,EAAE;IAGtB,CAAC,EAAa,CACf,EAEK,IAAkB,EAAM,cACd,EAAqB,GAAW,GAAa,GAAW,GAAiB,EAEhF,CAAM,KAAI,MAEb,kBAAC,GAAD;EAEQ;EACO;EACU;EACvB,SAAS,EAAW,EAAK,IAAI;EAC7B,EALK,GAAG,EAAK,KAAK,GAAG,EAAK,MAK1B,CAEJ,EACD;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,kBAAC,OAAD;EACE,KAAK;EACD;EACJ,WAAW,EAAK,EAAO,YAAY,KAAa,EAAO,uBAA0B,EAAU;EAC3F,eAAa;EACb,cAAY,KAAa;EACzB,GAAI;YAEJ,kBAAC,OAAD;GAAK,WAAW,EAAK,EAAO,kBAAkB;aAAG;GAAsB,CAAA;EACnE,CAAA;EAGX,EASK,KAAkB,EAAC,SAAM,gBAAa,0BAAuB,iBAAkC;CACnG,IAAM,IAAuB;EAC3B,MAAM;EACN,gBAAgB;EAChB,WAAW,EAAK,EAAO,iBAAiB;EACxC,MAAM;EACN;EACD,EAEK,IAAc,IAAwB,EAAK,IAAI;AAErD,SAAQ,EAAK,MAAb;EACE,KAAK,OACH,QACE,kBAAC,GAAD;GACE,GAAI;GACJ,KAAI;GACJ,gBAAe;GACf,MAAM,EAAK,WAAW,KAAA,IAAY,EAAY,EAAK,IAAI;GACvD,iBAAe,EAAK,YAAY,KAAA;GAChC,cAAW;GACX,GAAI;aACL;GAEM,CAAA;EAGX,KAAK,OACH,QACE,kBAAC,GAAD;GACE,GAAI;GACJ,KAAI;GACJ,gBAAe;GACf,MAAM,EAAK,WAAW,KAAA,IAAY,EAAY,EAAK,IAAI;GACvD,iBAAe,EAAK,YAAY,KAAA;GAChC,cAAW;GACX,GAAI;aACL;GAEM,CAAA;EAGX,KAAK,MACH,QAKE,kBAAC,GAAD;GACE,GAAI;GACJ,MAAM,EAAY,EAAK,IAAI;GAC3B,cAAY,QAAQ,EAAK,MAAM,EAAK,gBAAgB,QAAQ;GAC5D,gBAAc,EAAK,WAAW,SAAS,KAAA;GACvC,GAAI;aAEH,EAAK;GACD,CAAA;EAGX,KAAK,QACH,QACE,kBAAC,GAAD;GAAM,GAAI;GAAW,MAAK;GAAe,MAAM,KAAA;GAAW,SAAS,KAAA;GAAW,GAAI;aAAa;GAExF,CAAA;;;AAMf,SAAS,EAAmB,GAAiB;AAC3C,QAAO,IAAI"}
+{"version":3,"file":"Pagination.js","names":[],"sources":["../../src/Pagination/Pagination.tsx"],"sourcesContent":["import React, {memo, useCallback} from 'react'\nimport {Button, useWindowSize} from '..'\n\nimport {clsx} from 'clsx'\n\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport {buildPaginationModel, PaginationPageType} from './model'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Pagination.module.css'\n\nexport type PaginationProps = {\n  /* The total number of pages */\n  pageCount: number\n  /* The current page number */\n  currentPage: number\n  /* Callback function for when the page changes */\n  onPageChange?: (e: React.MouseEvent, n: number) => void\n  /* Function to build the href for each page */\n  hrefBuilder?: (n: number) => string\n  /* Function to forward custom attributes for each pagination item */\n  pageAttributesBuilder?: (n: number, page: PaginationPageType) => {[attributeName: string]: string}\n  /* Defines how many pages are to be displayed on the left and right of the component */\n  marginPageCount?: number\n  /* Whether to show the page numbers */\n  showPages?: boolean\n  /* The number of pages to show on each side of the current page */\n  surroundingPageCount?: number\n  'data-testid'?: string\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>\n\n/**\n * Use Pagination to display a sequence of links that allow navigation to discrete, related pages.\n * @see https://primer.style/brand/components/Pagination\n */\nexport const Pagination = memo(\n  ({\n    id,\n    className,\n    pageCount,\n    currentPage,\n    onPageChange,\n    hrefBuilder = defaultHrefBuilder,\n    pageAttributesBuilder,\n    marginPageCount = 1,\n    showPages = true,\n    surroundingPageCount = 2,\n    'aria-label': ariaLabel,\n    'data-testid': testId,\n    ...rest\n  }: PaginationProps) => {\n    // On mobile, limit the number of visible numbers\n    const {width} = useWindowSize()\n    if (width && width < 768) {\n      marginPageCount = 1\n      surroundingPageCount = 0\n    }\n\n    const navRef = React.useRef<HTMLElement>(null)\n\n    const pageChange = useCallback(\n      (n: number) => (e: React.MouseEvent) => {\n        if (onPageChange) {\n          onPageChange(e, n)\n        }\n      },\n      [onPageChange],\n    )\n\n    const paginationItems = React.useMemo(() => {\n      const model = buildPaginationModel(pageCount, currentPage, showPages, marginPageCount, surroundingPageCount)\n\n      return model.map(page => {\n        return (\n          <PaginationItem\n            key={`${page.type}-${page.num}`}\n            page={page}\n            hrefBuilder={hrefBuilder}\n            pageAttributesBuilder={pageAttributesBuilder}\n            onClick={pageChange(page.num)}\n          />\n        )\n      })\n    }, [\n      pageCount,\n      currentPage,\n      showPages,\n      marginPageCount,\n      surroundingPageCount,\n      hrefBuilder,\n      pageAttributesBuilder,\n      pageChange,\n    ])\n\n    return (\n      <nav\n        ref={navRef}\n        id={id}\n        className={clsx(styles.Pagination, className)}\n        data-testid={testId}\n        aria-label={ariaLabel || 'Pagination'}\n        {...rest}\n      >\n        <div className={clsx(styles.Pagination__inner)}>{paginationItems}</div>\n      </nav>\n    )\n  },\n)\n\ntype PaginationItemProps = {\n  page: PaginationPageType\n  hrefBuilder: (n: number) => string\n  pageAttributesBuilder?: (n: number, page: PaginationPageType) => {[key: string]: string}\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>\n}\n\nconst PaginationItem = ({page, hrefBuilder, pageAttributesBuilder, onClick}: PaginationItemProps) => {\n  const [isArrowExpanded, setIsArrowExpanded] = React.useState(false)\n\n  const baseProps = {\n    role: 'button',\n    size: 'small' as const,\n    variant: 'subtle' as const,\n    onClick: page.disabled ? undefined : onClick,\n  }\n\n  const customProps = pageAttributesBuilder?.(page.num, page)\n  const {className: customClassName, ...customAttributes} = customProps ?? {}\n\n  switch (page.type) {\n    case 'PREV': {\n      return (\n        <Button\n          {...baseProps}\n          as=\"a\"\n          rel=\"prev\"\n          href={page.disabled ? undefined : hrefBuilder(page.num)}\n          aria-disabled={page.disabled || undefined}\n          aria-label=\"Previous Page\"\n          {...customAttributes}\n          className={clsx(styles.Pagination__controlItem, customClassName)}\n          onMouseEnter={() => setIsArrowExpanded(true)}\n          onMouseLeave={() => setIsArrowExpanded(false)}\n          onFocus={() => setIsArrowExpanded(true)}\n          onBlur={() => setIsArrowExpanded(false)}\n        >\n          <span className={styles.Pagination__controlContent}>\n            <span\n              className={clsx(\n                styles.Pagination__controlArrowWrapper,\n                styles['Pagination__controlArrowWrapper--previous'],\n              )}\n            >\n              <ExpandableArrow\n                hidden\n                reverse\n                expanded={!page.disabled && isArrowExpanded}\n                className={styles.Pagination__controlArrow}\n              />\n            </span>\n            <span className={styles.Pagination__controlText}>Previous</span>\n          </span>\n        </Button>\n      )\n    }\n    case 'NEXT': {\n      return (\n        <Button\n          {...baseProps}\n          as=\"a\"\n          rel=\"next\"\n          href={page.disabled ? undefined : hrefBuilder(page.num)}\n          aria-disabled={page.disabled || undefined}\n          aria-label=\"Next Page\"\n          {...customAttributes}\n          className={clsx(styles.Pagination__controlItem, customClassName)}\n          onMouseEnter={() => setIsArrowExpanded(true)}\n          onMouseLeave={() => setIsArrowExpanded(false)}\n          onFocus={() => setIsArrowExpanded(true)}\n          onBlur={() => setIsArrowExpanded(false)}\n        >\n          <span className={styles.Pagination__controlContent}>\n            <span className={styles.Pagination__controlText}>Next</span>\n            <span\n              className={clsx(styles.Pagination__controlArrowWrapper, styles['Pagination__controlArrowWrapper--next'])}\n            >\n              <ExpandableArrow\n                hidden\n                expanded={!page.disabled && isArrowExpanded}\n                className={styles.Pagination__controlArrow}\n              />\n            </span>\n          </span>\n        </Button>\n      )\n    }\n    case 'NUM': {\n      return (\n        /**\n         * Append \"...\" to the aria-label for pages that precede a break because screen readers will change the\n         * tone the text is read in. This is a slightly nicer experience than skipping a bunch of numbers unexpectedly.\n         */\n        <Button\n          {...baseProps}\n          as=\"a\"\n          variant={page.selected ? 'primary' : 'subtle'}\n          className={clsx(styles.Pagination__pageItem, customClassName)}\n          href={hrefBuilder(page.num)}\n          aria-label={`Page ${page.num}${page.precedesBreak ? '...' : ''}`}\n          aria-current={page.selected ? 'page' : undefined}\n          {...customAttributes}\n        >\n          {page.num}\n        </Button>\n      )\n    }\n    case 'BREAK': {\n      return (\n        <Button\n          {...baseProps}\n          as=\"a\"\n          className={clsx(styles.Pagination__pageItem, customClassName)}\n          variant=\"subtle\"\n          role=\"presentation\"\n          href={undefined}\n          onClick={undefined}\n          {...customAttributes}\n        >\n          …\n        </Button>\n      )\n    }\n  }\n}\n\nfunction defaultHrefBuilder(pageNum: number) {\n  return `#${pageNum}`\n}\n"],"mappings":"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"}

package/esm/Pagination/Pagination.module-DmKBSq7s.css

@@ -0,0 +1 @@
+.Primer_Brand__Pagination-module__Pagination___kfPR3{margin-top:var(--base-size-20);margin-bottom:var(--base-size-16);text-align:center}.Primer_Brand__Pagination-module__Pagination__inner___uSIJu{justify-content:center;align-items:center;gap:var(--base-size-8);flex-wrap:wrap;display:inline-flex}.Primer_Brand__Pagination-module__Pagination__pageItem___4j6vp{--brand-button-subtle-borderColor-rest:transparent;--brand-button-subtle-borderColor-hover:transparent;--brand-button-subtle-borderColor-active:transparent;transition:none}.Primer_Brand__Pagination-module__Pagination__controlContent___VU4Qm{gap:var(--base-size-4);align-items:center;display:inline-flex;position:relative}.Primer_Brand__Pagination-module__Pagination__controlArrowWrapper___0Q_Ku{flex-shrink:0;display:none}.Primer_Brand__Pagination-module__Pagination__controlArrowWrapper--previous____zTeS{transform:translateX(var(--base-size-2))}.Primer_Brand__Pagination-module__Pagination__controlArrowWrapper--next___KhVzs{transform:translateX(calc(var(--base-size-2) * -1))}.Primer_Brand__Pagination-module__Pagination__controlArrow___RwrzD{width:var(--base-size-16);height:var(--base-size-16)}@media screen and (width<=47.99rem){.Primer_Brand__Pagination-module__Pagination__controlItem___zNWUt{padding-inline:var(--base-size-8);--brand-button-subtle-borderColor-rest:transparent;--brand-button-subtle-borderColor-hover:transparent;--brand-button-subtle-borderColor-active:transparent}.Primer_Brand__Pagination-module__Pagination__controlText___S6XdE{width:var(--base-size-2);height:var(--base-size-2);clip:rect(0, 0, 0, 0);word-wrap:normal;border:0;padding:0;position:absolute;overflow:hidden}.Primer_Brand__Pagination-module__Pagination__controlArrowWrapper___0Q_Ku{display:flex}.Primer_Brand__Pagination-module__Pagination__controlItem___zNWUt>span{align-items:center;display:flex}.Primer_Brand__Pagination-module__Pagination__controlItem___zNWUt>span>span{align-items:center;line-height:0;display:flex}}