@primer/react-brand 0.68.0-rc.01cf5f7c → 0.68.0-rc.20c2136f

package/esm/LogoSuite/LogoSuite.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoSuite.js","names":[],"sources":["../../src/LogoSuite/LogoSuite.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {type PropsWithChildren, type Ref, forwardRef, useCallback, useEffect, useMemo, useState} from 'react'\nimport {useReducedMotion} from '../hooks/useReducedMotion'\nimport {PauseIcon, PlayIcon} from '@primer/octicons-react'\nimport type {BaseProps} from '../component-helpers'\nimport {Heading, HeadingProps, defaultHeadingTag, Text, TextProps, Grid, Button} from '../'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/logosuite/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/logosuite/base.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './LogoSuite.module.css'\n\nconst testIds = {\n  root: 'LogoSuite',\n  get marqueeGroup() {\n    return `${this.root}-marqueeGroup`\n  },\n}\n\nexport type LogoSuiteProps = {\n  /**\n   * The horizontal alignment of the LogoSuite.\n   */\n  align?: 'start' | 'center' | 'justify'\n  /**\n   * Whether to render a divider immediately after the LogoSuite.\n   */\n  hasDivider?: boolean\n  /**\n   * Test id for the root LogoSuite element.\n   */\n  'data-testid'?: string\n  /**\n   * Alternative presentation\n   */\n  variant?: 'default' | 'gridline-expressive'\n} & BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst LogoSuiteBase = ({\n  align = 'center',\n  children,\n  className,\n  hasDivider = true,\n  variant = 'default',\n  'data-testid': testId,\n}: PropsWithChildren<LogoSuiteProps>) => {\n  const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n  const HeadingChild = childrenArray.find(child => {\n    return React.isValidElement(child) && child.type === _Heading\n  })\n\n  const DescriptionChild = childrenArray.find(child => {\n    return React.isValidElement(child) && child.type === _Description\n  })\n\n  const LogobarChild = childrenArray.find(child => {\n    return React.isValidElement(child) && child.type === _LogoBar\n  })\n\n  if (!HeadingChild) {\n    if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {\n      // eslint-disable-next-line no-console\n      console.warn('LogoSuite: Heading child is required. You may use `visuallyHidden` to hide it from view.')\n    }\n  }\n\n  const isHeadingVisuallyHidden =\n    React.isValidElement<LogoSuiteHeadingProps>(HeadingChild) && HeadingChild.props.visuallyHidden\n  const isGridlineExpressive = variant === 'gridline-expressive'\n  const hasVisibleTextContent = isGridlineExpressive && ((HeadingChild && !isHeadingVisuallyHidden) || DescriptionChild)\n\n  return (\n    <div\n      className={clsx(\n        styles.LogoSuite,\n        styles[`LogoSuite--${align}`],\n        hasDivider && styles['LogoSuite--hasDivider'],\n        styles[`LogoSuite--${variant}`],\n        className,\n      )}\n      data-testid={testId}\n    >\n      {isGridlineExpressive ? (\n        <Grid className={styles['LogoSuite__content']}>\n          {hasVisibleTextContent && (\n            <Grid.Column span={{large: 3}} className={styles['LogoSuite__textContainer']}>\n              {HeadingChild}\n              {DescriptionChild}\n            </Grid.Column>\n          )}\n          <Grid.Column span={{large: hasVisibleTextContent ? 9 : 12}} className={styles['LogoSuite__logobarContainer']}>\n            {!hasVisibleTextContent && isHeadingVisuallyHidden && HeadingChild}\n            {LogobarChild}\n          </Grid.Column>\n        </Grid>\n      ) : (\n        <>\n          {HeadingChild}\n          {DescriptionChild}\n          {LogobarChild}\n        </>\n      )}\n    </div>\n  )\n}\n\nexport type LogoSuiteHeadingProps = BaseProps<HTMLHeadingElement> &\n  HeadingProps & {\n    /**\n     * Whether to visually hide the heading.\n     */\n    visuallyHidden?: boolean\n  }\n\nconst _Heading = forwardRef(\n  (\n    {\n      as = defaultHeadingTag,\n      size = 'subhead-large',\n      className,\n      children,\n      visuallyHidden,\n      ...props\n    }: PropsWithChildren<LogoSuiteHeadingProps>,\n    ref: Ref<HTMLHeadingElement>,\n  ) => {\n    return (\n      <Heading\n        ref={ref}\n        className={clsx(\n          styles['LogoSuite__heading'],\n          visuallyHidden && styles['LogoSuite__heading--visually-hidden'],\n          visuallyHidden && 'visually-hidden',\n          className,\n        )}\n        size={size}\n        as={as}\n        {...props}\n      >\n        {children}\n      </Heading>\n    )\n  },\n)\n\nexport type LogoSuiteDescriptionProps = BaseProps<HTMLParagraphElement> &\n  TextProps & {\n    children: React.ReactNode | React.ReactNode[]\n  }\n\nconst _Description = forwardRef(\n  (\n    {className, children, size = '200', variant = 'muted', ...props}: LogoSuiteDescriptionProps,\n    ref: Ref<HTMLParagraphElement>,\n  ) => {\n    return (\n      <Text\n        as=\"p\"\n        ref={ref}\n        size={size}\n        variant={variant}\n        className={clsx(styles['LogoSuite__description'], className)}\n        {...props}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\ntype PlayPauseButtonProps = {\n  isPlaying?: boolean\n  onPlayPause?: (isPlaying: boolean) => void\n}\n\nconst PlayPauseButton = ({isPlaying = true, onPlayPause}: PlayPauseButtonProps) => {\n  const onClick = useCallback(() => {\n    onPlayPause?.(!isPlaying)\n  }, [onPlayPause, isPlaying])\n\n  /**\n   * aria-pressed is intentionally not used here to prevent potentially confusing screen reader announcements\n   * eg \"Play animation on\" or \"Pause animation off\"\n   */\n  return (\n    <button\n      className={styles['LogoSuite__logobar-playPauseButton']}\n      type=\"button\"\n      onClick={onClick}\n      aria-label={isPlaying ? 'Pause animation' : 'Play animation'}\n    >\n      {isPlaying ? <PauseIcon /> : <PlayIcon />}\n    </button>\n  )\n}\n\nexport type LogoSuiteLogoBarProps = BaseProps<HTMLDivElement> & {\n  children: React.ReactNode | React.ReactNode[]\n  /**\n   * The gap between logos\n   */\n  gap?: 'default' | 'condensed'\n  /**\n   * Enables an optional marquee effect\n   */\n  marquee?: boolean\n  /**\n   * The speed of the marquee effect\n   */\n  marqueeSpeed?: 'slow' | 'normal' | 'idle'\n  /**\n   * The stylistic variant of the LogoBar.\n   */\n  variant?: 'muted' | 'emphasis'\n  /**\n   * Displays an optional takeover button (as an anchor) on hover/focus.\n   */\n  takeoverButton?: {\n    label: string\n  } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> &\n    BaseProps<HTMLAnchorElement>\n}\n\nconst _LogoBar = forwardRef(\n  (\n    {\n      className,\n      children,\n      gap = 'default',\n      marquee = false,\n      marqueeSpeed = 'normal',\n      variant = 'muted',\n      takeoverButton,\n      ...props\n    }: LogoSuiteLogoBarProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const prefersReducedMotion = useReducedMotion()\n    const [isPlaying, setIsPlaying] = useState(() => marquee && !prefersReducedMotion && marqueeSpeed !== 'idle')\n\n    useEffect(() => {\n      setIsPlaying(marquee && !prefersReducedMotion && marqueeSpeed !== 'idle')\n    }, [marquee, prefersReducedMotion, marqueeSpeed])\n\n    if (marquee && takeoverButton) {\n      if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          'LogoSuite.Logobar: `takeoverButton` cant be used with `marquee` prop due to accessibility risks. Set `marquee={false}` to use the takeover feature.',\n        )\n      }\n    }\n\n    const defaultProps = {\n      ref,\n      className: clsx(\n        styles['LogoSuite__logobar'],\n        styles[`LogoSuite__logobar--variant-${variant}`],\n        styles[`LogoSuite__logobar--gap-${gap}`],\n        className,\n      ),\n      ...props,\n    }\n\n    const [isFocusWithin, setIsFocusWithin] = useState(false)\n\n    const handleFocus = useCallback(() => {\n      setIsFocusWithin(true)\n    }, [])\n\n    const handleBlur = useCallback((event: React.FocusEvent) => {\n      if (!event.currentTarget.contains(event.relatedTarget as Node)) {\n        setIsFocusWithin(false)\n      }\n    }, [])\n\n    const renderTakeoverButton = () => {\n      if (!takeoverButton) return null\n      const {className: takeoverButtonClassName, label, ref: _ref, ...takeoverButtonProps} = takeoverButton\n      return (\n        <div className={styles['LogoSuite__logobar-takeoverButtonContainer']}>\n          <Button\n            as=\"a\"\n            variant=\"primary\"\n            className={clsx(styles['LogoSuite__logobar-takeoverButton'], takeoverButtonClassName)}\n            {...takeoverButtonProps}\n          >\n            {label}\n          </Button>\n        </div>\n      )\n    }\n\n    if (marquee) {\n      const {className: marqueeDefaultClassName, ...restProps} = defaultProps\n      const shouldPause = !isPlaying || prefersReducedMotion\n      return (\n        <div\n          {...restProps}\n          className={clsx(\n            styles['LogoSuite__logobar--has-marquee'],\n            marqueeDefaultClassName,\n            shouldPause && styles['LogoSuite__logobar--paused'],\n          )}\n        >\n          <div\n            className={clsx(\n              styles['LogoSuite__logobar-marquee'],\n              isFocusWithin && styles['LogoSuite__logobar-marquee--focused'],\n            )}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n          >\n            <div\n              className={clsx(\n                styles['LogoSuite__logobar-marqueeGroup'],\n                styles[`LogoSuite__logobar-marqueeGroup--speed-${marqueeSpeed}`],\n              )}\n              data-testid={testIds.marqueeGroup}\n            >\n              {children}\n            </div>\n            <div\n              inert\n              aria-hidden=\"true\"\n              className={clsx(\n                styles['LogoSuite__logobar-marqueeGroup'],\n                styles[`LogoSuite__logobar-marqueeGroup--speed-${marqueeSpeed}`],\n              )}\n            >\n              {children}\n            </div>\n          </div>\n          <PlayPauseButton onPlayPause={setIsPlaying} isPlaying={isPlaying} />\n        </div>\n      )\n    }\n\n    if (takeoverButton) {\n      const {className: defaultClassName, ...restProps} = defaultProps\n      return (\n        <div {...restProps} className={clsx(defaultClassName, styles['LogoSuite__logobar--has-takeover'])}>\n          {children}\n          {renderTakeoverButton()}\n        </div>\n      )\n    }\n\n    return <div {...defaultProps}>{children}</div>\n  },\n)\n\n/**\n * Use LogoSuite to present a list of logos, such as sponsors or vendors.\n * @see https://primer.style/brand/components/LogoSuite\n */\nexport const LogoSuite = Object.assign(LogoSuiteBase, {\n  Heading: _Heading,\n  Description: _Description,\n  Logobar: _LogoBar,\n  testIds,\n})\n"],"mappings":"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"}

package/esm/LogoSuite/LogoSuite.module-69Mthqju.css

@@ -0,0 +1 @@
+.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ{padding-block-end:var(--brand-LogoSuite-logobar-rowGap)}.Primer_Brand__LogoSuite-module__LogoSuite--default___mbLiN+.Primer_Brand__LogoSuite-module__LogoSuite--default___mbLiN{padding-block-start:var(--brand-LogoSuite-logobar-rowGap)}.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ:not(:has(.Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms)) .Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL{font-family:var(--brand-fontStack-monospace);font-weight:var(--brand-text-weight-100);font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);letter-spacing:var(--brand-text-letterSpacing-100);text-transform:uppercase;color:var(--brand-color-text-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL+.Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms{padding-block-start:var(--base-size-16)}.Primer_Brand__LogoSuite-module__LogoSuite--start___zqwlX{text-align:left}.Primer_Brand__LogoSuite-module__LogoSuite--center___j119b,.Primer_Brand__LogoSuite-module__LogoSuite--justify___MTk0u{text-align:center}.Primer_Brand__LogoSuite-module__LogoSuite--default___mbLiN:not(.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ+.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ) .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{padding-block-start:var(--base-size-32)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{row-gap:var(--brand-LogoSuite-logobar-rowGap);flex-wrap:wrap;justify-content:center;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--gap-default___sGwUx{--marquee-gap:var(--brand-LogoSuite-logobar-marquee-gap-default);-moz-column-gap:var(--brand-LogoSuite-logobar-columnGap-default);column-gap:var(--brand-LogoSuite-logobar-columnGap-default)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--gap-condensed___T86E8{--marquee-gap:var(--brand-LogoSuite-logobar-marquee-gap-condensed);-moz-column-gap:var(--brand-LogoSuite-logobar-columnGap-condensed);column-gap:var(--brand-LogoSuite-logobar-columnGap-condensed)}.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ:not(.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ+.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ) .Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL:not(.Primer_Brand__LogoSuite-module__LogoSuite__heading--visually-hidden___oZzlO)+.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC,.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ:not(.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ+.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ) .Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms+.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{margin-block-start:var(--base-size-44);padding-block-start:0}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru img,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru a,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR img,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR a{width:auto;height:var(--base-size-32)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru path{fill:var(--brand-LogoSuite-color-logo-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru img{filter:var(--brand-LogoSuite-color-logo-filter-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR path{fill:var(--brand-LogoSuite-color-logo-emphasis)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR img{filter:var(--brand-LogoSuite-color-logo-filter-emphasis)}.Primer_Brand__LogoSuite-module__LogoSuite--start___zqwlX .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{justify-content:center}@media screen and (width>=48rem){.Primer_Brand__LogoSuite-module__LogoSuite--justify___MTk0u .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{justify-content:space-between}}.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC a:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2);border-radius:var(--base-size-4)}.Primer_Brand__LogoSuite-module__LogoSuite--hasDivider___Wj8u_{border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-marquee___tyW6K{align-items:center;gap:var(--base-size-24);flex-direction:row;max-width:100vw;margin:auto;display:flex;position:relative}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS{justify-content:space-around;align-items:center;gap:var(--marquee-gap);min-width:100%;animation-name:Primer_Brand__LogoSuite-module__LogobarScrollX___eGhi4;animation-duration:var(--brand-LogoSuite-logobar-marquee-default);flex-shrink:0;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal;animation-play-state:running;animation-fill-mode:none;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup--speed-default___nsm9D{animation-duration:var(--brand-LogoSuite-logobar-marquee-default)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup--speed-slow___NZHrb{animation-duration:var(--brand-LogoSuite-logobar-marquee-slow)}@keyframes Primer_Brand__LogoSuite-module__LogobarScrollX___eGhi4{0%{transform:translate(0)}to{transform:translateX(calc(-100% - var(--marquee-gap)))}}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee____s6pK:hover .Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS,.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee____s6pK:focus-within .Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS{animation-play-state:paused}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee____s6pK{padding-block:var(--base-size-4);-webkit-user-select:none;user-select:none;gap:var(--marquee-gap);flex:1;min-width:0;display:flex;overflow:hidden visible;-webkit-mask-image:linear-gradient(90deg,#0000,#000 20% 80%,#0000);mask-image:linear-gradient(90deg,#0000,#000 20% 80%,#0000)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--paused___7p9ka *{animation-play-state:paused!important}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee--focused___zizoE .Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS{animation-name:none}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie{cursor:pointer;width:var(--base-size-32);height:var(--base-size-32);border-radius:var(--base-size-48);border:none;border:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-LogoSuite-color-control-rest);transition:background-color var(--brand-animation-duration-faster);flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie:hover{background-color:var(--brand-LogoSuite-color-control-hover)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie svg{width:var(--base-size-16);height:var(--base-size-16);fill:var(--brand-color-text-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie path{fill:var(--brand-color-text-muted)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16{padding:0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{gap:0;padding-inline:0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{padding:var(--base-size-20);flex-direction:column;justify-content:center;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{margin-block-start:auto}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-32) var(--base-size-20) var(--base-size-32);flex-direction:column;justify-content:center;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC,.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-marquee___tyW6K{width:100%;max-width:none}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL+.Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms{padding-block-start:var(--base-size-8)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{padding-block-start:0}@media screen and (width>=48rem){.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16{padding-inline:91px}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-40)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}@media screen and (width>=64rem){.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16{padding-inline:0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{max-width:1280px}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{text-align:left;padding:var(--base-size-64)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-64)}}@media screen and (width>=1281px){.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC:first-child{border-inline-start:none}}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf{position:relative;overflow:visible}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:before{content:"";inset:calc(-1 * var(--base-size-16)) 0;z-index:1;pointer-events:none;opacity:0;-webkit-backdrop-filter:blur(var(--base-size-6));transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);position:absolute}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:hover:before,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:focus-within:before{opacity:1}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:hover svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:focus-within svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:hover img,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:focus-within img{opacity:.7;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-takeoverButtonContainer___ehoEd{opacity:0;visibility:hidden;z-index:2;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:hover .Primer_Brand__LogoSuite-module__LogoSuite__logobar-takeoverButtonContainer___ehoEd,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:focus-within .Primer_Brand__LogoSuite-module__LogoSuite__logobar-takeoverButtonContainer___ehoEd{opacity:1;visibility:visible}

package/esm/LogoSuite/LogoSuite.module.js

@@ -0,0 +1,35 @@
+import './LogoSuite.module-69Mthqju.css';var e = {
+	LogoSuite: "Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ",
+	"LogoSuite--default": "Primer_Brand__LogoSuite-module__LogoSuite--default___mbLiN",
+	LogoSuite__description: "Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms",
+	LogoSuite__heading: "Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL",
+	"LogoSuite--start": "Primer_Brand__LogoSuite-module__LogoSuite--start___zqwlX",
+	"LogoSuite--center": "Primer_Brand__LogoSuite-module__LogoSuite--center___j119b",
+	"LogoSuite--justify": "Primer_Brand__LogoSuite-module__LogoSuite--justify___MTk0u",
+	LogoSuite__logobar: "Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC",
+	"LogoSuite__logobar--gap-default": "Primer_Brand__LogoSuite-module__LogoSuite__logobar--gap-default___sGwUx",
+	"LogoSuite__logobar--gap-condensed": "Primer_Brand__LogoSuite-module__LogoSuite__logobar--gap-condensed___T86E8",
+	"LogoSuite__heading--visually-hidden": "Primer_Brand__LogoSuite-module__LogoSuite__heading--visually-hidden___oZzlO",
+	"LogoSuite__logobar--variant-muted": "Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru",
+	"LogoSuite__logobar--variant-emphasis": "Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR",
+	"LogoSuite--hasDivider": "Primer_Brand__LogoSuite-module__LogoSuite--hasDivider___Wj8u_",
+	"LogoSuite__logobar--has-marquee": "Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-marquee___tyW6K",
+	"LogoSuite__logobar-marqueeGroup": "Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS",
+	LogobarScrollX: "Primer_Brand__LogoSuite-module__LogobarScrollX___eGhi4",
+	"LogoSuite__logobar-marqueeGroup--speed-default": "Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup--speed-default___nsm9D",
+	"LogoSuite__logobar-marqueeGroup--speed-slow": "Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup--speed-slow___NZHrb",
+	"LogoSuite__logobar-marquee": "Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee____s6pK",
+	"LogoSuite__logobar--paused": "Primer_Brand__LogoSuite-module__LogoSuite__logobar--paused___7p9ka",
+	"LogoSuite__logobar-marquee--focused": "Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee--focused___zizoE",
+	"LogoSuite__logobar-playPauseButton": "Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie",
+	"LogoSuite--gridline-expressive": "Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16",
+	LogoSuite__content: "Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y",
+	LogoSuite__textContainer: "Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e",
+	LogoSuite__logobarContainer: "Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC",
+	"LogoSuite__logobar--has-takeover": "Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf",
+	"LogoSuite__logobar-takeoverButtonContainer": "Primer_Brand__LogoSuite-module__LogoSuite__logobar-takeoverButtonContainer___ehoEd"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=LogoSuite.module.js.map

package/esm/LogoSuite/LogoSuite.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoSuite.module.js","names":[],"sources":["../../src/LogoSuite/LogoSuite.module.css"],"sourcesContent":[".LogoSuite {\n  padding-block-end: var(--brand-LogoSuite-logobar-rowGap);\n}\n\n.LogoSuite--default + .LogoSuite--default {\n  padding-block-start: var(--brand-LogoSuite-logobar-rowGap);\n}\n\n/* Small monospace heading when standalone (no description) */\n.LogoSuite:not(:has(.LogoSuite__description)) .LogoSuite__heading {\n  font-family: var(--brand-fontStack-monospace);\n  font-weight: var(--brand-text-weight-100);\n  font-size: var(--brand-text-size-100);\n  line-height: var(--brand-text-lineHeight-100);\n  letter-spacing: var(--brand-text-letterSpacing-100);\n  text-transform: uppercase;\n  color: var(--brand-color-text-muted);\n}\n\n.LogoSuite__heading + .LogoSuite__description {\n  padding-block-start: var(--base-size-16);\n}\n\n.LogoSuite--start {\n  text-align: left;\n}\n\n.LogoSuite--center,\n.LogoSuite--justify {\n  text-align: center;\n}\n\n.LogoSuite--default:not(.LogoSuite + .LogoSuite) .LogoSuite__logobar {\n  padding-block-start: var(--base-size-32);\n}\n\n.LogoSuite__logobar {\n  display: flex;\n  flex-wrap: wrap;\n  row-gap: var(--brand-LogoSuite-logobar-rowGap);\n  justify-content: center;\n}\n\n.LogoSuite__logobar--gap-default {\n  --marquee-gap: var(--brand-LogoSuite-logobar-marquee-gap-default);\n  column-gap: var(--brand-LogoSuite-logobar-columnGap-default);\n}\n\n.LogoSuite__logobar--gap-condensed {\n  --marquee-gap: var(--brand-LogoSuite-logobar-marquee-gap-condensed);\n  column-gap: var(--brand-LogoSuite-logobar-columnGap-condensed);\n}\n\n.LogoSuite:not(.LogoSuite + .LogoSuite)\n  .LogoSuite__heading:not(.LogoSuite__heading--visually-hidden)\n  + .LogoSuite__logobar,\n.LogoSuite:not(.LogoSuite + .LogoSuite) .LogoSuite__description + .LogoSuite__logobar {\n  padding-block-start: 0;\n  margin-block-start: var(--base-size-44);\n}\n\n.LogoSuite__logobar--variant-muted svg,\n.LogoSuite__logobar--variant-muted img,\n.LogoSuite__logobar--variant-muted a,\n.LogoSuite__logobar--variant-emphasis svg,\n.LogoSuite__logobar--variant-emphasis img,\n.LogoSuite__logobar--variant-emphasis a {\n  width: auto;\n  height: var(--base-size-32);\n}\n\n.LogoSuite__logobar--variant-muted svg,\n.LogoSuite__logobar--variant-muted path {\n  fill: var(--brand-LogoSuite-color-logo-muted);\n}\n\n.LogoSuite__logobar--variant-muted img {\n  filter: var(--brand-LogoSuite-color-logo-filter-muted);\n}\n\n.LogoSuite__logobar--variant-emphasis svg,\n.LogoSuite__logobar--variant-emphasis path {\n  fill: var(--brand-LogoSuite-color-logo-emphasis);\n}\n\n.LogoSuite__logobar--variant-emphasis img {\n  filter: var(--brand-LogoSuite-color-logo-filter-emphasis);\n}\n\n.LogoSuite--start .LogoSuite__logobar {\n  justify-content: center;\n}\n\n@media screen and (min-width: 48rem) {\n  .LogoSuite--justify .LogoSuite__logobar {\n    justify-content: space-between;\n  }\n}\n\n.LogoSuite__logobar a:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n  border-radius: var(--base-size-4);\n}\n\n.LogoSuite--hasDivider {\n  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.LogoSuite__logobar--has-marquee {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--base-size-24);\n  margin: auto;\n  max-width: 100vw;\n}\n\n.LogoSuite__logobar-marqueeGroup {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  gap: var(--marquee-gap);\n  min-width: 100%;\n  animation-name: LogobarScrollX;\n  animation-duration: var(--brand-LogoSuite-logobar-marquee-default);\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n  animation-direction: normal;\n  animation-fill-mode: none;\n  animation-play-state: running;\n}\n\n.LogoSuite__logobar-marqueeGroup--speed-default {\n  animation-duration: var(--brand-LogoSuite-logobar-marquee-default);\n}\n\n.LogoSuite__logobar-marqueeGroup--speed-slow {\n  animation-duration: var(--brand-LogoSuite-logobar-marquee-slow);\n}\n\n@keyframes LogobarScrollX {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(calc(-100% - var(--marquee-gap)));\n  }\n}\n\n.LogoSuite__logobar-marquee:hover .LogoSuite__logobar-marqueeGroup,\n.LogoSuite__logobar-marquee:focus-within .LogoSuite__logobar-marqueeGroup {\n  animation-play-state: paused;\n}\n\n.LogoSuite__logobar-marquee {\n  display: flex;\n  overflow-x: hidden;\n  overflow-y: visible;\n  padding-block: var(--base-size-4);\n  user-select: none;\n  gap: var(--marquee-gap);\n  flex: 1;\n  min-width: 0;\n  -webkit-mask-image: linear-gradient(\n    to right,\n    hsl(0 0% 0% / 0),\n    hsl(0 0% 0% / 1) 20%,\n    hsl(0 0% 0% / 1) 80%,\n    hsl(0 0% 0% / 0)\n  );\n  mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));\n}\n\n.LogoSuite__logobar--paused * {\n  animation-play-state: paused !important;\n}\n\n.LogoSuite__logobar-marquee--focused .LogoSuite__logobar-marqueeGroup {\n  animation-name: none;\n}\n\n.LogoSuite__logobar-playPauseButton {\n  cursor: pointer;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--base-size-32);\n  height: var(--base-size-32);\n  margin: 0;\n  padding: 0;\n  border: none;\n  border-radius: var(--base-size-48);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  background-color: var(--brand-LogoSuite-color-control-rest);\n  transition: background-color var(--brand-animation-duration-faster);\n}\n\n.LogoSuite__logobar-playPauseButton:hover {\n  background-color: var(--brand-LogoSuite-color-control-hover);\n}\n\n.LogoSuite__logobar-playPauseButton:focus-visible {\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\n.LogoSuite__logobar-playPauseButton svg {\n  width: var(--base-size-16);\n  height: var(--base-size-16);\n  fill: var(--brand-color-text-muted);\n}\n\n.LogoSuite__logobar-playPauseButton path {\n  fill: var(--brand-color-text-muted);\n}\n\n/* Gridline expressive variant styles */\n.LogoSuite--gridline-expressive {\n  padding: 0;\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__content {\n  padding-inline: 0;\n  gap: 0;\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__textContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: var(--base-size-20);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobar {\n  margin-block-start: auto;\n}\n.LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: var(--base-size-32) var(--base-size-20) var(--base-size-32);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobar,\n.LogoSuite--gridline-expressive .LogoSuite__logobar--has-marquee {\n  max-width: none;\n  width: 100%;\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__heading + .LogoSuite__description {\n  padding-block-start: var(--base-size-8);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobar {\n  padding-block-start: 0;\n}\n\n@media screen and (min-width: 48rem) {\n  .LogoSuite--gridline-expressive {\n    padding-inline: 91px;\n  }\n\n  .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n    padding: var(--base-size-40);\n  }\n  .LogoSuite--gridline-expressive .LogoSuite__content {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n  .LogoSuite--gridline-expressive .LogoSuite__textContainer {\n    border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n@media screen and (min-width: 64rem) {\n  .LogoSuite--gridline-expressive {\n    padding-inline: 0;\n  }\n\n  .LogoSuite--gridline-expressive .LogoSuite__content {\n    max-width: 1280px;\n  }\n\n  .LogoSuite--gridline-expressive .LogoSuite__textContainer {\n    text-align: left;\n    padding: var(--base-size-64);\n  }\n\n  .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n    padding: var(--base-size-64);\n  }\n}\n\n@media screen and (min-width: 1281px) {\n  .LogoSuite--gridline-expressive .LogoSuite__content {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  /* When the logobar is the only column visible (no adjacent text), this removes start border */\n  .LogoSuite--gridline-expressive .LogoSuite__logobarContainer:first-child {\n    border-inline-start: none;\n  }\n}\n\n.LogoSuite__logobar--has-takeover {\n  position: relative;\n  overflow: visible;\n}\n\n/* Glass blur overlay effect */\n.LogoSuite__logobar--has-takeover::before {\n  content: '';\n  position: absolute;\n  inset: calc(-1 * var(--base-size-16)) 0;\n  z-index: 1;\n  pointer-events: none;\n  opacity: 0;\n  backdrop-filter: blur(var(--base-size-6));\n  -webkit-backdrop-filter: blur(var(--base-size-6));\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.LogoSuite__logobar--has-takeover:hover::before,\n.LogoSuite__logobar--has-takeover:focus-within::before {\n  opacity: 1;\n}\n\n.LogoSuite__logobar--has-takeover:hover svg,\n.LogoSuite__logobar--has-takeover:focus-within svg,\n.LogoSuite__logobar--has-takeover:hover img,\n.LogoSuite__logobar--has-takeover:focus-within img {\n  opacity: 0.7;\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.LogoSuite__logobar-takeoverButtonContainer {\n  opacity: 0;\n  visibility: hidden;\n  z-index: 2;\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.LogoSuite__logobar--has-takeover:hover .LogoSuite__logobar-takeoverButtonContainer,\n.LogoSuite__logobar--has-takeover:focus-within .LogoSuite__logobar-takeoverButtonContainer {\n  opacity: 1;\n  visibility: visible;\n}\n"],"mappings":""}

package/esm/LogoSuite/index.d.ts

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

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

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

package/esm/MediaPlaylist/MediaPlaylist.d.ts

@@ -0,0 +1,77 @@
+import React from 'react';
+import { type HeadingProps, type TextProps } from '..';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes.css';
+export type MediaPlaylistProps = React.PropsWithChildren<{
+    /**
+     * The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.
+     */
+    defaultSelectedIndex?: number;
+    /**
+     * The index of the currently selected item. This makes the component controlled.
+     */
+    selectedIndex?: number;
+    /**
+     * Callback fired when the selected index changes.
+     */
+    onChange?: (selectedIndex: number) => void;
+    'data-testid'?: string;
+}> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>;
+export type MediaPlaylistHeadingProps = React.PropsWithChildren<{
+    as?: Exclude<HeadingProps['as'], 'h1'>;
+}> & BaseProps<HTMLDivElement>;
+type MediaPlaylistHeadingInternalProps = {
+    activeIndex?: number | null;
+    itemCount?: number;
+};
+declare function MediaPlaylistHeading({ activeIndex, as, children, className, id, itemCount, ...props }: MediaPlaylistHeadingProps & MediaPlaylistHeadingInternalProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemProps = React.PropsWithChildren<{
+    /**
+     * An optional thumbnail to be shown in the playlist for this item.
+     */
+    thumbnail?: React.ReactNode;
+} & BaseProps<HTMLDivElement>>;
+declare function MediaPlaylistItem({ children }: MediaPlaylistItemProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemHeadingProps = Omit<TextProps, 'as' | 'children' | 'title'> & {
+    children?: React.ReactNode;
+    description?: React.ReactNode;
+    title?: React.ReactNode;
+};
+declare function MediaPlaylistItemHeading({ children, className, description, font, size, title, variant, weight, ...props }: MediaPlaylistItemHeadingProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemContentProps = React.HTMLAttributes<HTMLDivElement>;
+declare function MediaPlaylistItemContent({ children, className, ...props }: MediaPlaylistItemContentProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemMediaProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Use MediaPlaylist to pair media playback with an itemized, thumbnail-backed playlist.
+ */
+export declare const MediaPlaylist: React.ForwardRefExoticComponent<{
+    /**
+     * The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.
+     */
+    defaultSelectedIndex?: number;
+    /**
+     * The index of the currently selected item. This makes the component controlled.
+     */
+    selectedIndex?: number;
+    /**
+     * Callback fired when the selected index changes.
+     */
+    onChange?: (selectedIndex: number) => void;
+    'data-testid'?: string;
+} & {
+    children?: React.ReactNode | undefined;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>> & {
+    Heading: typeof MediaPlaylistHeading;
+    Item: typeof MediaPlaylistItem;
+    ItemHeading: typeof MediaPlaylistItemHeading;
+    ItemContent: typeof MediaPlaylistItemContent;
+    ItemMedia: React.ForwardRefExoticComponent<MediaPlaylistItemMediaProps & React.RefAttributes<HTMLDivElement>>;
+    testIds: {
+        root: string;
+    };
+};
+export {};
+//# sourceMappingURL=MediaPlaylist.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MediaPlaylist.d.ts","sourceRoot":"","sources":["../../src/MediaPlaylist/MediaPlaylist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAGrD,OAAO,EAAgB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,IAAI,CAAA;AAKnE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD;;GAEG;AACH,OAAO,kHAAkH,CAAA;AAOzH,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACvD;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAC,GACA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAA;AA6HxD,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC9D,EAAE,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;CACvC,CAAC,GACA,SAAS,CAAC,cAAc,CAAC,CAAA;AAE3B,KAAK,iCAAiC,GAAG;IACvC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,iBAAS,oBAAoB,CAAC,EAC5B,WAAkB,EAClB,EAAS,EACT,QAAQ,EACR,SAAS,EACT,EAAE,EACF,SAAa,EACb,GAAG,KAAK,EACT,EAAE,yBAAyB,GAAG,iCAAiC,2CAa/D;AAED,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAC1D;IACE;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B,GAAG,SAAS,CAAC,cAAc,CAAC,CAC9B,CAAA;AAED,iBAAS,iBAAiB,CAAC,EAAC,QAAQ,EAAC,EAAE,sBAAsB,2CAE5D;AAED,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB,CAAA;AAED,iBAAS,wBAAwB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,WAAW,EACX,IAAkB,EAClB,IAAY,EACZ,KAAK,EACL,OAAmB,EACnB,MAAiB,EACjB,GAAG,KAAK,EACT,EAAE,6BAA6B,2CA4B/B;AAED,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEhF,iBAAS,wBAAwB,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,6BAA6B,2CAM/F;AAED,MAAM,MAAM,2BAA2B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAyB9E;;GAEG;AACH,eAAO,MAAM,aAAa;IA7QxB;;OAEG;2BACoB,MAAM;IAC7B;;OAEG;oBACa,MAAM;IACtB;;OAEG;eACQ,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI;oBAC1B,MAAM;;;;;;;;;;;;CAwQtB,CAAA"}

package/esm/MediaPlaylist/MediaPlaylist.js

@@ -0,0 +1,172 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { useId as t } from "../hooks/useId.js";
+import { Text as n } from "../Text/Text.js";
+import { Heading as r } from "../Heading/Heading.js";
+import i from "../component-helpers/shared.module.js";
+import { Pagination as a } from "../Pagination/Pagination.js";
+import { useMediaPlaylist as o } from "./useMediaPlaylist.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes-YId8eSZQ.css';/* empty css                                                                                                            */
+import s from "./MediaPlaylist.module.js";
+import { cloneElement as c, forwardRef as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/MediaPlaylist/MediaPlaylist.tsx
+var p = l(({ children: n, className: r, defaultSelectedIndex: l = 0, onChange: u, selectedIndex: p, "data-testid": m, ...h }, g) => {
+	let _ = t(), { activeIndex: v, currentItemPage: x, getPaginationAttributes: S, getTabListProps: C, getTabPanelProps: w, getTabProps: T, handlePageChange: E, hasOverflowItems: D, headingChild: O, isItemSelected: k, items: A, setItemRef: j, tabListRef: M } = o({
+		children: n,
+		components: y,
+		defaultSelectedIndex: l,
+		onChange: u,
+		selectedIndex: p
+	}), N = O?.props.id ?? `${_}-heading`;
+	!O && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("MediaPlaylist: Heading child is required. This element labels the playlist for assistive technologies.");
+	let P = C(O ? { labelledBy: N } : { label: "Media playlist" });
+	return /* @__PURE__ */ d("div", {
+		ref: g,
+		className: e(s.MediaPlaylist, i.gridline, D && s["MediaPlaylist--overflowItems"], r),
+		"data-testid": m || b.root,
+		...h,
+		children: /* @__PURE__ */ f("div", {
+			className: s.MediaPlaylist__layout,
+			children: [/* @__PURE__ */ f("div", {
+				className: s.MediaPlaylist__playlist,
+				children: [
+					O && c(O, {
+						activeIndex: v,
+						id: N,
+						itemCount: A.length
+					}),
+					/* @__PURE__ */ d("div", {
+						...P,
+						ref: M,
+						className: s.MediaPlaylist__tablist,
+						children: A.map((t, n) => {
+							let r = T(String(n));
+							return /* @__PURE__ */ d("div", {
+								ref: (e) => {
+									j(n, e);
+								},
+								className: e(s.MediaPlaylist__item, k(n) && s["MediaPlaylist__item--selected"], t.className),
+								children: /* @__PURE__ */ d("button", {
+									type: "button",
+									...r,
+									className: s.MediaPlaylist__tab,
+									children: /* @__PURE__ */ f("span", {
+										className: s.MediaPlaylist__tabContent,
+										children: [t.thumbnail && /* @__PURE__ */ d("span", {
+											className: s.MediaPlaylist__thumbnail,
+											children: t.thumbnail
+										}), /* @__PURE__ */ d("span", {
+											className: s.MediaPlaylist__itemHeadingContent,
+											children: t.heading
+										})]
+									})
+								})
+							}, n);
+						})
+					}),
+					D && /* @__PURE__ */ d(a, {
+						className: s.MediaPlaylist__pagination,
+						pageCount: A.length,
+						currentPage: x,
+						onPageChange: E,
+						hrefBuilder: () => "#",
+						pageAttributesBuilder: S,
+						"aria-label": "Media playlist items",
+						showPages: !1
+					})
+				]
+			}), /* @__PURE__ */ d("div", {
+				className: s.MediaPlaylist__mediaPanels,
+				children: A.map((t, n) => /* @__PURE__ */ f("div", {
+					...w(String(n)),
+					tabIndex: -1,
+					className: e(s.MediaPlaylist__mediaPanel, s.MediaPlaylist__panel),
+					children: [t.media, /* @__PURE__ */ d("div", {
+						className: s.MediaPlaylist__panelContent,
+						children: t.content
+					})]
+				}, n))
+			})]
+		})
+	});
+});
+function m({ activeIndex: t = null, as: n = "h3", children: i, className: a, id: o, itemCount: c = 0, ...l }) {
+	return /* @__PURE__ */ f("div", {
+		className: e(s.MediaPlaylist__heading, a),
+		...l,
+		children: [/* @__PURE__ */ d(r, {
+			as: n,
+			id: o,
+			className: s.MediaPlaylist__headingLabel,
+			children: i
+		}), c > 0 && t !== null && /* @__PURE__ */ f("span", {
+			className: s.MediaPlaylist__headingCounter,
+			"aria-live": "polite",
+			children: [
+				t + 1,
+				"/",
+				c
+			]
+		})]
+	});
+}
+function h({ children: e }) {
+	return /* @__PURE__ */ d(u, { children: e });
+}
+function g({ children: t, className: r, description: i, font: a = "mona-sans", size: o = "200", title: c, variant: l = "default", weight: u = "medium", ...p }) {
+	let m = c !== void 0 || i !== void 0, h = c ?? t;
+	return /* @__PURE__ */ d(n, {
+		...p,
+		as: "span",
+		className: e(s.MediaPlaylist__itemHeading, r),
+		font: a,
+		size: o,
+		variant: l,
+		weight: u,
+		children: m ? /* @__PURE__ */ f("span", {
+			className: s.MediaPlaylist__itemHeadingDetails,
+			children: [h && /* @__PURE__ */ d("span", {
+				className: s.MediaPlaylist__itemHeadingTitle,
+				children: h
+			}), i && /* @__PURE__ */ d(n, {
+				as: "span",
+				font: "monospace",
+				size: "100",
+				variant: "muted",
+				children: i
+			})]
+		}) : t
+	});
+}
+function _({ children: t, className: n, ...r }) {
+	return /* @__PURE__ */ d("div", {
+		className: e(s.MediaPlaylist__content, n),
+		...r,
+		children: t
+	});
+}
+var v = l(function({ children: t, className: n, ...r }, i) {
+	return /* @__PURE__ */ d("div", {
+		ref: i,
+		className: e(s.MediaPlaylist__media, n),
+		...r,
+		children: t
+	});
+}), y = {
+	Heading: m,
+	Item: h,
+	ItemHeading: g,
+	ItemContent: _,
+	ItemMedia: v
+}, b = { root: "MediaPlaylist" }, x = Object.assign(p, {
+	Heading: m,
+	Item: h,
+	ItemHeading: g,
+	ItemContent: _,
+	ItemMedia: v,
+	testIds: b
+});
+//#endregion
+export { x as MediaPlaylist };
+
+//# sourceMappingURL=MediaPlaylist.js.map

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"}