@primer/react-brand 0.81.0 → 0.81.1-rc.2c56871a

package/esm/forms/ToggleSwitch/ToggleSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitch.js","names":[],"sources":["../../../src/forms/ToggleSwitch/ToggleSwitch.tsx"],"sourcesContent":["import React, {forwardRef, useEffect, useState, type ButtonHTMLAttributes, type MouseEventHandler} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\nimport {Spinner} from '../../Spinner/Spinner'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/toggle-switch/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/toggle-switch/colors-with-modes.css'\nimport styles from './ToggleSwitch.module.css'\n\ntype ToggleSwitchSize = 'small' | 'medium'\ntype ToggleSwitchSpinnerPosition = 'start' | 'end'\n\ntype ToggleSwitchButtonPropKeysToOmit =\n  | 'aria-busy'\n  | 'aria-checked'\n  | 'aria-disabled'\n  | 'children'\n  | 'onChange'\n  | 'role'\n  | 'type'\n\nexport type ToggleSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, ToggleSwitchButtonPropKeysToOmit> & {\n  'data-testid'?: string\n  checked?: boolean\n  defaultChecked?: boolean\n  onChange?: (checked: boolean) => void\n  loading?: boolean\n  size?: ToggleSwitchSize\n  loadingLabel?: string\n  loadingLabelDelay?: number\n  spinnerPosition?: ToggleSwitchSpinnerPosition\n}\n\nexport type ToggleSwitchInternalProps = ToggleSwitchProps & {\n  toggleSwitchSpinnerInLabel?: boolean\n}\n\nconst testIds = {\n  root: 'ToggleSwitch',\n  spinner: 'ToggleSwitch-spinner',\n  loadingAnnouncement: 'ToggleSwitch-loading-announcement',\n}\n\ntype ToggleSwitchComponent = React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<HTMLButtonElement>>\n\nconst Root: ToggleSwitchComponent = forwardRef<HTMLButtonElement, ToggleSwitchInternalProps>(function ToggleSwitch(\n  {\n    checked,\n    defaultChecked = false,\n    onChange,\n    onClick,\n    disabled = false,\n    loading = false,\n    size = 'medium',\n    loadingLabel = 'Loading',\n    loadingLabelDelay = 2000,\n    spinnerPosition = 'end',\n    toggleSwitchSpinnerInLabel = false,\n    id,\n    className,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'data-testid': testId,\n    ...rest\n  },\n  ref,\n) {\n  const uniqueId = useId(id)\n  const loadingId = `${uniqueId}-loading`\n  const [internalChecked, setInternalChecked] = useState(defaultChecked)\n  const [announceLoading, setAnnounceLoading] = useState(false)\n  const isChecked = checked ?? internalChecked\n\n  useEffect(() => {\n    setAnnounceLoading(false)\n    if (!loading) return\n\n    const timeout = setTimeout(() => setAnnounceLoading(true), Math.max(0, loadingLabelDelay))\n    return () => clearTimeout(timeout)\n  }, [loading, loadingLabelDelay])\n\n  const describedBy =\n    [ariaDescribedBy, loading && announceLoading && loadingLabel && loadingId].filter(Boolean).join(' ') || undefined\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n    if (disabled) {\n      event.preventDefault()\n      event.stopPropagation()\n      return\n    }\n\n    onClick?.(event)\n    if (event.defaultPrevented) return\n\n    const nextChecked = !isChecked\n    if (checked === undefined) setInternalChecked(nextChecked)\n    onChange?.(nextChecked)\n  }\n\n  const spinnerElement =\n    !toggleSwitchSpinnerInLabel && loading ? (\n      <span className={styles['ToggleSwitch-spinnerSlot']} aria-hidden=\"true\">\n        <Spinner\n          size=\"small\"\n          accessibleLabel={null}\n          className={styles['ToggleSwitch-spinner']}\n          data-testid={testIds.spinner}\n        />\n      </span>\n    ) : null\n\n  return (\n    <div\n      className={clsx(styles.ToggleSwitch, styles[`ToggleSwitch--${size}`], className)}\n      data-testid={testId || testIds.root}\n    >\n      {spinnerPosition === 'start' && spinnerElement}\n      <button\n        {...rest}\n        id={uniqueId}\n        ref={ref}\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={isChecked}\n        aria-disabled={disabled || undefined}\n        aria-busy={loading || undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={describedBy}\n        aria-invalid={ariaInvalid}\n        className={clsx(styles['ToggleSwitch-button'], disabled && styles['ToggleSwitch-button--unavailable'])}\n        onClick={handleClick}\n      >\n        <span className={styles['ToggleSwitch-track']} aria-hidden=\"true\">\n          <span\n            className={clsx(\n              styles['ToggleSwitch-thumb'],\n              isChecked && styles['ToggleSwitch-thumb--checked'],\n              disabled && styles['ToggleSwitch-thumb--disabled'],\n            )}\n          />\n        </span>\n      </button>\n      {spinnerPosition === 'end' && spinnerElement}\n      <span\n        id={loadingId}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        className=\"visually-hidden\"\n        data-testid={testIds.loadingAnnouncement}\n      >\n        {loading && announceLoading ? loadingLabel : null}\n      </span>\n    </div>\n  )\n})\n\n/**\n * Use ToggleSwitch for settings that take effect immediately.\n * @see https://primer.style/brand/forms/ToggleSwitch\n */\nexport const ToggleSwitch = Object.assign(Root, {testIds})\n"],"mappings":";;;;;;;;;AAqCA,IAAM,IAAU;CACd,MAAM;CACN,SAAS;CACT,qBAAqB;AACvB,GAIM,IAA8B,EAAyD,SAC3F,EACE,YACA,oBAAiB,IACjB,aACA,YACA,cAAW,IACX,aAAU,IACV,UAAO,UACP,kBAAe,WACf,uBAAoB,KACpB,qBAAkB,OAClB,gCAA6B,IAC7B,OACA,cACA,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,gBAAgB,GAChB,eAAe,GACf,GAAG,KAEL,GACA;CACA,IAAM,IAAW,EAAM,CAAE,GACnB,IAAY,GAAG,EAAS,WACxB,CAAC,GAAiB,KAAsB,EAAS,CAAc,GAC/D,CAAC,GAAiB,KAAsB,EAAS,EAAK,GACtD,IAAY,KAAW;CAE7B,QAAgB;EAEd,IADA,EAAmB,EAAK,GACpB,CAAC,GAAS;EAEd,IAAM,IAAU,iBAAiB,EAAmB,EAAI,GAAG,KAAK,IAAI,GAAG,CAAiB,CAAC;EACzF,aAAa,aAAa,CAAO;CACnC,GAAG,CAAC,GAAS,CAAiB,CAAC;CAE/B,IAAM,IACJ,CAAC,GAAiB,KAAW,KAAmB,KAAgB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA,GAEpG,KAAoD,MAAS;EACjE,IAAI,GAAU;GAEZ,AADA,EAAM,eAAe,GACrB,EAAM,gBAAgB;GACtB;EACF;EAGA,IADA,IAAU,CAAK,GACX,EAAM,kBAAkB;EAE5B,IAAM,IAAc,CAAC;EAErB,AADI,MAAY,KAAA,KAAW,EAAmB,CAAW,GACzD,IAAW,CAAW;CACxB,GAEM,IACJ,CAAC,KAA8B,IAC7B,kBAAC,QAAD;EAAM,WAAW,EAAO;EAA6B,eAAY;YAC/D,kBAAC,GAAD;GACE,MAAK;GACL,iBAAiB;GACjB,WAAW,EAAO;GAClB,eAAa,EAAQ;EACtB,CAAA;CACG,CAAA,IACJ;CAEN,OACE,kBAAC,OAAD;EACE,WAAW,EAAK,EAAO,cAAc,EAAO,iBAAiB,MAAS,CAAS;EAC/E,eAAa,KAAU,EAAQ;YAFjC;GAIG,MAAoB,WAAW;GAChC,kBAAC,UAAD;IACE,GAAI;IACJ,IAAI;IACC;IACL,MAAK;IACL,MAAK;IACL,gBAAc;IACd,iBAAe,KAAY,KAAA;IAC3B,aAAW,KAAW,KAAA;IACtB,cAAY;IACZ,mBAAiB;IACjB,oBAAkB;IAClB,gBAAc;IACd,WAAW,EAAK,EAAO,wBAAwB,KAAY,EAAO,mCAAmC;IACrG,SAAS;cAET,kBAAC,QAAD;KAAM,WAAW,EAAO;KAAuB,eAAY;eACzD,kBAAC,QAAD,EACE,WAAW,EACT,EAAO,uBACP,KAAa,EAAO,gCACpB,KAAY,EAAO,+BACrB,EACD,CAAA;IACG,CAAA;GACA,CAAA;GACP,MAAoB,SAAS;GAC9B,kBAAC,QAAD;IACE,IAAI;IACJ,MAAK;IACL,aAAU;IACV,eAAY;IACZ,WAAU;IACV,eAAa,EAAQ;cAEpB,KAAW,IAAkB,IAAe;GACzC,CAAA;EACH;;AAET,CAAC,GAMY,IAAe,OAAO,OAAO,GAAM,EAAC,WAAO,CAAC"}
+{"version":3,"file":"ToggleSwitch.js","names":[],"sources":["../../../src/forms/ToggleSwitch/ToggleSwitch.tsx"],"sourcesContent":["import React, {forwardRef, useEffect, useRef, useState, type ButtonHTMLAttributes, type MouseEventHandler} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\nimport {Spinner} from '../../Spinner/Spinner'\nimport {Text} from '../../Text/Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/toggle-switch/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/toggle-switch/colors-with-modes.css'\nimport styles from './ToggleSwitch.module.css'\n\ntype ToggleSwitchSize = 'small' | 'medium'\ntype ToggleSwitchSpinnerPosition = 'start' | 'end'\ntype ToggleSwitchStatusLabelPosition = 'start' | 'end'\ntype ToggleSwitchLabels = {\n  on?: string\n  off?: string\n}\n\ntype ToggleSwitchButtonPropKeysToOmit =\n  | 'aria-busy'\n  | 'aria-checked'\n  | 'aria-disabled'\n  | 'children'\n  | 'onChange'\n  | 'role'\n  | 'type'\n\nexport type ToggleSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, ToggleSwitchButtonPropKeysToOmit> & {\n  'data-testid'?: string\n  checked?: boolean\n  defaultChecked?: boolean\n  onChange?: (checked: boolean) => void\n  loading?: boolean\n  size?: ToggleSwitchSize\n  loadingLabel?: string\n  loadingLabelDelay?: number\n  spinnerPosition?: ToggleSwitchSpinnerPosition\n  hasStatusLabel?: boolean\n  statusLabelPosition?: ToggleSwitchStatusLabelPosition\n  labels?: ToggleSwitchLabels\n}\n\nexport type ToggleSwitchInternalProps = ToggleSwitchProps & {\n  toggleSwitchSpinnerInLabel?: boolean\n}\n\nconst testIds = {\n  root: 'ToggleSwitch',\n  spinner: 'ToggleSwitch-spinner',\n  loadingAnnouncement: 'ToggleSwitch-loading-announcement',\n  statusAnnouncement: 'ToggleSwitch-status-announcement',\n  statusLabel: 'ToggleSwitch-status-label',\n}\n\ntype ToggleSwitchComponent = React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<HTMLButtonElement>>\n\nconst Root: ToggleSwitchComponent = forwardRef<HTMLButtonElement, ToggleSwitchInternalProps>(function ToggleSwitch(\n  {\n    checked,\n    defaultChecked = false,\n    onChange,\n    onClick,\n    disabled = false,\n    loading = false,\n    size = 'medium',\n    loadingLabel = 'Loading',\n    loadingLabelDelay = 2000,\n    spinnerPosition = 'end',\n    hasStatusLabel = false,\n    statusLabelPosition = 'start',\n    labels: {on: statusLabelOn = 'On', off: statusLabelOff = 'Off'} = {},\n    toggleSwitchSpinnerInLabel = false,\n    id,\n    className,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'data-testid': testId,\n    ...rest\n  },\n  ref,\n) {\n  const uniqueId = useId(id)\n  const statusDescriptionId = useId()\n  const loadingId = `${uniqueId}-loading`\n  const [internalChecked, setInternalChecked] = useState(defaultChecked)\n  const [announceLoading, setAnnounceLoading] = useState(false)\n  const [statusAnnouncement, setStatusAnnouncement] = useState('')\n  const [pendingStatusChange, setPendingStatusChange] = useState<boolean | null>(null)\n  const isChecked = checked ?? internalChecked\n  const activeStatusLabel = isChecked ? statusLabelOn : statusLabelOff\n  const defaultStatusLabel = isChecked ? 'On' : 'Off'\n  const hasCustomStatusLabels = statusLabelOn !== 'On' || statusLabelOff !== 'Off'\n  const hasStatusDescription = hasStatusLabel && activeStatusLabel !== defaultStatusLabel\n  const previousChecked = useRef(isChecked)\n\n  useEffect(() => {\n    const stateChanged = previousChecked.current !== isChecked\n    previousChecked.current = isChecked\n\n    if (stateChanged) {\n      setStatusAnnouncement(pendingStatusChange === isChecked && hasStatusDescription ? activeStatusLabel : '')\n    } else {\n      setStatusAnnouncement(current => (hasStatusDescription && current === activeStatusLabel ? current : ''))\n    }\n\n    if (pendingStatusChange !== null) setPendingStatusChange(null)\n  }, [activeStatusLabel, hasStatusDescription, isChecked, pendingStatusChange])\n\n  useEffect(() => {\n    setAnnounceLoading(false)\n    if (!loading) return\n\n    const timeout = setTimeout(() => setAnnounceLoading(true), Math.max(0, loadingLabelDelay))\n    return () => clearTimeout(timeout)\n  }, [loading, loadingLabelDelay])\n\n  const describedBy =\n    [\n      hasStatusDescription && statusDescriptionId,\n      ariaDescribedBy,\n      loading && announceLoading && loadingLabel && loadingId,\n    ]\n      .filter(Boolean)\n      .join(' ') || undefined\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n    if (disabled) {\n      event.preventDefault()\n      event.stopPropagation()\n      return\n    }\n\n    onClick?.(event)\n    if (event.defaultPrevented) return\n\n    const nextChecked = !isChecked\n    if (hasStatusLabel && hasCustomStatusLabels) setPendingStatusChange(nextChecked)\n    if (checked === undefined) setInternalChecked(nextChecked)\n    onChange?.(nextChecked)\n  }\n\n  const spinnerElement =\n    !toggleSwitchSpinnerInLabel && loading ? (\n      <span className={styles['ToggleSwitch-spinnerSlot']} aria-hidden=\"true\">\n        <Spinner\n          size=\"small\"\n          accessibleLabel={null}\n          className={styles['ToggleSwitch-spinner']}\n          data-testid={testIds.spinner}\n        />\n      </span>\n    ) : null\n\n  // Both labels share one grid cell so the wider label reserves space and state changes do not shift layout.\n  const statusLabelElement = hasStatusLabel ? (\n    <span\n      className={clsx(styles['ToggleSwitch-statusLabel'], styles[`ToggleSwitch-statusLabel--${statusLabelPosition}`])}\n      aria-hidden=\"true\"\n      data-testid={testIds.statusLabel}\n    >\n      <Text\n        as=\"span\"\n        size=\"100\"\n        variant=\"muted\"\n        className={clsx(\n          styles['ToggleSwitch-statusLabelText'],\n          !isChecked && styles['ToggleSwitch-statusLabelText--hidden'],\n        )}\n      >\n        {statusLabelOn}\n      </Text>\n      <Text\n        as=\"span\"\n        size=\"100\"\n        variant=\"muted\"\n        className={clsx(\n          styles['ToggleSwitch-statusLabelText'],\n          isChecked && styles['ToggleSwitch-statusLabelText--hidden'],\n        )}\n      >\n        {statusLabelOff}\n      </Text>\n    </span>\n  ) : null\n\n  return (\n    <div\n      className={clsx(\n        styles.ToggleSwitch,\n        styles[`ToggleSwitch--${size}`],\n        hasStatusLabel && styles['ToggleSwitch--withStatusLabel'],\n        className,\n      )}\n      data-testid={testId || testIds.root}\n    >\n      {spinnerPosition === 'start' && spinnerElement}\n      <button\n        {...rest}\n        id={uniqueId}\n        ref={ref}\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={isChecked}\n        aria-disabled={disabled || undefined}\n        aria-busy={loading || undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={describedBy}\n        aria-invalid={ariaInvalid}\n        className={clsx(styles['ToggleSwitch-button'], disabled && styles['ToggleSwitch-button--unavailable'])}\n        onClick={handleClick}\n      >\n        {statusLabelPosition === 'start' && statusLabelElement}\n        <span className={styles['ToggleSwitch-track']} aria-hidden=\"true\">\n          <span\n            className={clsx(\n              styles['ToggleSwitch-thumb'],\n              isChecked && styles['ToggleSwitch-thumb--checked'],\n              disabled && styles['ToggleSwitch-thumb--disabled'],\n            )}\n          />\n        </span>\n        {statusLabelPosition === 'end' && statusLabelElement}\n      </button>\n      {spinnerPosition === 'end' && spinnerElement}\n      {hasStatusDescription ? (\n        <span id={statusDescriptionId} className=\"visually-hidden\">\n          {activeStatusLabel}\n        </span>\n      ) : null}\n      {hasStatusLabel && hasCustomStatusLabels ? (\n        <span\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          className=\"visually-hidden\"\n          data-testid={testIds.statusAnnouncement}\n        >\n          {statusAnnouncement}\n        </span>\n      ) : null}\n      <span\n        id={loadingId}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        className=\"visually-hidden\"\n        data-testid={testIds.loadingAnnouncement}\n      >\n        {loading && announceLoading ? loadingLabel : null}\n      </span>\n    </div>\n  )\n})\n\n/**\n * Use ToggleSwitch for settings that take effect immediately.\n * @see https://primer.style/brand/forms/ToggleSwitch\n */\nexport const ToggleSwitch = Object.assign(Root, {testIds})\n"],"mappings":"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"}

package/esm/forms/ToggleSwitch/ToggleSwitch.module-PKy9cLy8.css

@@ -0,0 +1 @@
+.Primer_Brand__ToggleSwitch-module__ToggleSwitch___jeVpE{align-items:center;gap:var(--brand-ToggleSwitch-loading-gap);vertical-align:middle;flex-shrink:0;display:inline-flex}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ{min-height:var(--brand-ToggleSwitch-target-minHeight);justify-content:center;align-items:center;gap:var(--base-size-8);cursor:pointer;appearance:none;background:0 0;border:0;padding:0;display:flex}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--withStatusLabel___LGu2L{flex-shrink:1;min-inline-size:0;max-inline-size:100%}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--withStatusLabel___LGu2L .Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ{min-inline-size:0;max-inline-size:100%}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:focus-visible{outline:none}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:focus-visible .Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK{outline:var(--brand-ToggleSwitch-focus-width) solid var(--brand-color-focus);outline-offset:var(--brand-ToggleSwitch-focus-offset)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button--unavailable___NJjiR{cursor:not-allowed}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK{box-sizing:border-box;border:var(--brand-ToggleSwitch-track-borderWidth) solid var(--brand-ToggleSwitch-track-borderColor);border-radius:var(--brand-ToggleSwitch-track-borderRadius);background:var(--brand-ToggleSwitch-track-bgColor);flex:none;display:block;position:relative}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabel___8gqdA{word-wrap:anywhere;min-inline-size:0;max-inline-size:100%;display:grid}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabel--start___gl9U_{justify-items:end}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabel--end___IoumP{justify-items:start}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabel--start___gl9U_ .Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabelText____TqA4{text-align:end}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabel--end___IoumP .Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabelText____TqA4{text-align:start}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabelText____TqA4{grid-area:1/1}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabelText--hidden___DuJ9i{visibility:hidden}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM{box-sizing:border-box;border:var(--brand-ToggleSwitch-thumb-borderWidth) solid var(--brand-ToggleSwitch-thumb-borderColor);border-radius:var(--brand-ToggleSwitch-thumb-borderRadius);background:var(--brand-ToggleSwitch-thumb-off-bgColor-rest);transition:inset-inline-start var(--brand-animation-duration-faster) var(--brand-animation-easing-default);position:absolute;top:50%;transform:translateY(-50%)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd{background:var(--brand-ToggleSwitch-thumb-on-bgColor-rest)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:not(.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button--unavailable___NJjiR):hover .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM{background:var(--brand-ToggleSwitch-thumb-off-bgColor-hover)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:not(.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button--unavailable___NJjiR):hover .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd{background:var(--brand-ToggleSwitch-thumb-on-bgColor-hover)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--disabled___V14xX{background:var(--brand-ToggleSwitch-thumb-disabled-bgColor)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--medium___3nBxC .Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK{width:var(--brand-ToggleSwitch-track-width-medium);height:var(--brand-ToggleSwitch-track-height-medium)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--small___rA6Qp .Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK{width:var(--brand-ToggleSwitch-track-width-small);height:var(--brand-ToggleSwitch-track-height-small)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--medium___3nBxC .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM{width:var(--brand-ToggleSwitch-thumb-size-medium);height:var(--brand-ToggleSwitch-thumb-size-medium);inset-inline-start:calc(var(--brand-ToggleSwitch-thumb-inset-medium) - var(--brand-ToggleSwitch-track-borderWidth))}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--small___rA6Qp .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM{width:var(--brand-ToggleSwitch-thumb-size-small);height:var(--brand-ToggleSwitch-thumb-size-small);inset-inline-start:calc(var(--brand-ToggleSwitch-thumb-inset-small) - var(--brand-ToggleSwitch-track-borderWidth))}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--medium___3nBxC .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd{inset-inline-start:calc(var(--brand-ToggleSwitch-thumb-inset-medium) - var(--brand-ToggleSwitch-track-borderWidth) + var(--brand-ToggleSwitch-thumb-travel-medium))}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--small___rA6Qp .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd{inset-inline-start:calc(var(--brand-ToggleSwitch-thumb-inset-small) - var(--brand-ToggleSwitch-track-borderWidth) + var(--brand-ToggleSwitch-thumb-travel-small))}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-spinnerSlot___kHm79{flex:0 0 var(--brand-ToggleSwitch-loading-size);width:var(--brand-ToggleSwitch-loading-size);height:var(--brand-ToggleSwitch-loading-size);pointer-events:none;justify-content:center;align-items:center;display:flex}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-spinner___7lOlX{color:var(--brand-ToggleSwitch-loading-fgColor);animation-duration:var(--brand-ToggleSwitch-loading-duration)}@media (prefers-reduced-motion:reduce){.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM{transition:none}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-spinner___7lOlX{animation:none}}@media (forced-colors:active){.Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK{background:canvas;border-color:buttontext}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM,.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:not(.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button--unavailable___NJjiR):hover .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM{forced-color-adjust:none;background:buttontext;border-color:buttontext}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd,.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:not(.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button--unavailable___NJjiR):hover .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd{background:highlight}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--disabled___V14xX{background:graytext}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:focus-visible .Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK{outline-color:highlight}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-spinner___7lOlX{color:canvastext}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabelText____TqA4{color:buttontext}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button--unavailable___NJjiR .Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabelText____TqA4{color:graytext}}

package/esm/forms/ToggleSwitch/ToggleSwitch.module.js

@@ -1,9 +1,15 @@
-import './ToggleSwitch.module-C_gXnHNW.css';//#region src/forms/ToggleSwitch/ToggleSwitch.module.css
+import './ToggleSwitch.module-PKy9cLy8.css';//#region src/forms/ToggleSwitch/ToggleSwitch.module.css
 var e = "Primer_Brand__ToggleSwitch-module__ToggleSwitch___jeVpE", t = {
 	ToggleSwitch: e,
 	"ToggleSwitch-button": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ",
+	"ToggleSwitch--withStatusLabel": "Primer_Brand__ToggleSwitch-module__ToggleSwitch--withStatusLabel___LGu2L",
 	"ToggleSwitch-track": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK",
 	"ToggleSwitch-button--unavailable": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-button--unavailable___NJjiR",
+	"ToggleSwitch-statusLabel": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabel___8gqdA",
+	"ToggleSwitch-statusLabel--start": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabel--start___gl9U_",
+	"ToggleSwitch-statusLabel--end": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabel--end___IoumP",
+	"ToggleSwitch-statusLabelText": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabelText____TqA4",
+	"ToggleSwitch-statusLabelText--hidden": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabelText--hidden___DuJ9i",
 	"ToggleSwitch-thumb": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM",
 	"ToggleSwitch-thumb--checked": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd",
 	"ToggleSwitch-thumb--disabled": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--disabled___V14xX",

package/esm/forms/ToggleSwitch/ToggleSwitch.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitch.module.js","names":[],"sources":["../../../src/forms/ToggleSwitch/ToggleSwitch.module.css"],"sourcesContent":[".ToggleSwitch {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--brand-ToggleSwitch-loading-gap);\n  vertical-align: middle;\n}\n\n.ToggleSwitch-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--brand-ToggleSwitch-target-minHeight);\n  padding: 0;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n}\n\n.ToggleSwitch-button:focus-visible {\n  outline: none;\n}\n\n.ToggleSwitch-button:focus-visible .ToggleSwitch-track {\n  outline: var(--brand-ToggleSwitch-focus-width) solid var(--brand-color-focus);\n  outline-offset: var(--brand-ToggleSwitch-focus-offset);\n}\n\n.ToggleSwitch-button--unavailable {\n  cursor: not-allowed;\n}\n\n.ToggleSwitch-track {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  border: var(--brand-ToggleSwitch-track-borderWidth) solid var(--brand-ToggleSwitch-track-borderColor);\n  border-radius: var(--brand-ToggleSwitch-track-borderRadius);\n  background: var(--brand-ToggleSwitch-track-bgColor);\n}\n\n.ToggleSwitch-thumb {\n  position: absolute;\n  top: 50%;\n  box-sizing: border-box;\n  border: var(--brand-ToggleSwitch-thumb-borderWidth) solid var(--brand-ToggleSwitch-thumb-borderColor);\n  border-radius: var(--brand-ToggleSwitch-thumb-borderRadius);\n  background: var(--brand-ToggleSwitch-thumb-off-bgColor-rest);\n  transform: translateY(-50%);\n  transition: inset-inline-start var(--brand-animation-duration-faster) var(--brand-animation-easing-default);\n}\n\n.ToggleSwitch-thumb--checked {\n  background: var(--brand-ToggleSwitch-thumb-on-bgColor-rest);\n}\n\n.ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb {\n  background: var(--brand-ToggleSwitch-thumb-off-bgColor-hover);\n}\n\n.ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb--checked {\n  background: var(--brand-ToggleSwitch-thumb-on-bgColor-hover);\n}\n\n.ToggleSwitch-thumb--disabled {\n  background: var(--brand-ToggleSwitch-thumb-disabled-bgColor);\n}\n\n.ToggleSwitch--medium .ToggleSwitch-track {\n  width: var(--brand-ToggleSwitch-track-width-medium);\n  height: var(--brand-ToggleSwitch-track-height-medium);\n}\n\n.ToggleSwitch--small .ToggleSwitch-track {\n  width: var(--brand-ToggleSwitch-track-width-small);\n  height: var(--brand-ToggleSwitch-track-height-small);\n}\n\n.ToggleSwitch--medium .ToggleSwitch-thumb {\n  inset-inline-start: calc(var(--brand-ToggleSwitch-thumb-inset-medium) - var(--brand-ToggleSwitch-track-borderWidth));\n  width: var(--brand-ToggleSwitch-thumb-size-medium);\n  height: var(--brand-ToggleSwitch-thumb-size-medium);\n}\n\n.ToggleSwitch--small .ToggleSwitch-thumb {\n  inset-inline-start: calc(var(--brand-ToggleSwitch-thumb-inset-small) - var(--brand-ToggleSwitch-track-borderWidth));\n  width: var(--brand-ToggleSwitch-thumb-size-small);\n  height: var(--brand-ToggleSwitch-thumb-size-small);\n}\n\n.ToggleSwitch--medium .ToggleSwitch-thumb--checked {\n  inset-inline-start: calc(\n    var(--brand-ToggleSwitch-thumb-inset-medium) - var(--brand-ToggleSwitch-track-borderWidth) +\n      var(--brand-ToggleSwitch-thumb-travel-medium)\n  );\n}\n\n.ToggleSwitch--small .ToggleSwitch-thumb--checked {\n  inset-inline-start: calc(\n    var(--brand-ToggleSwitch-thumb-inset-small) - var(--brand-ToggleSwitch-track-borderWidth) +\n      var(--brand-ToggleSwitch-thumb-travel-small)\n  );\n}\n\n.ToggleSwitch-spinnerSlot {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 var(--brand-ToggleSwitch-loading-size);\n  width: var(--brand-ToggleSwitch-loading-size);\n  height: var(--brand-ToggleSwitch-loading-size);\n  pointer-events: none;\n}\n\n.ToggleSwitch-spinner {\n  color: var(--brand-ToggleSwitch-loading-fgColor);\n  animation-duration: var(--brand-ToggleSwitch-loading-duration);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ToggleSwitch-thumb {\n    transition: none;\n  }\n\n  .ToggleSwitch-spinner {\n    animation: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .ToggleSwitch-track {\n    border-color: ButtonText;\n    background: Canvas;\n  }\n\n  .ToggleSwitch-thumb,\n  .ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb {\n    forced-color-adjust: none;\n    border-color: ButtonText;\n    background: ButtonText;\n  }\n\n  .ToggleSwitch-thumb--checked,\n  .ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb--checked {\n    background: Highlight;\n  }\n\n  .ToggleSwitch-thumb--disabled {\n    background: GrayText;\n  }\n\n  .ToggleSwitch-button:focus-visible .ToggleSwitch-track {\n    outline-color: Highlight;\n  }\n\n  .ToggleSwitch-spinner {\n    color: CanvasText;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ToggleSwitch.module.js","names":[],"sources":["../../../src/forms/ToggleSwitch/ToggleSwitch.module.css"],"sourcesContent":[".ToggleSwitch {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--brand-ToggleSwitch-loading-gap);\n  vertical-align: middle;\n}\n\n.ToggleSwitch-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--brand-ToggleSwitch-target-minHeight);\n  gap: var(--base-size-8);\n  padding: 0;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n}\n\n.ToggleSwitch--withStatusLabel {\n  min-inline-size: 0;\n  max-inline-size: 100%;\n  flex-shrink: 1;\n}\n\n.ToggleSwitch--withStatusLabel .ToggleSwitch-button {\n  min-inline-size: 0;\n  max-inline-size: 100%;\n}\n\n.ToggleSwitch-button:focus-visible {\n  outline: none;\n}\n\n.ToggleSwitch-button:focus-visible .ToggleSwitch-track {\n  outline: var(--brand-ToggleSwitch-focus-width) solid var(--brand-color-focus);\n  outline-offset: var(--brand-ToggleSwitch-focus-offset);\n}\n\n.ToggleSwitch-button--unavailable {\n  cursor: not-allowed;\n}\n\n.ToggleSwitch-track {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  border: var(--brand-ToggleSwitch-track-borderWidth) solid var(--brand-ToggleSwitch-track-borderColor);\n  border-radius: var(--brand-ToggleSwitch-track-borderRadius);\n  background: var(--brand-ToggleSwitch-track-bgColor);\n  flex: 0 0 auto;\n}\n\n.ToggleSwitch-statusLabel {\n  display: grid;\n  min-inline-size: 0;\n  max-inline-size: 100%;\n  overflow-wrap: anywhere;\n}\n\n.ToggleSwitch-statusLabel--start {\n  justify-items: end;\n}\n\n.ToggleSwitch-statusLabel--end {\n  justify-items: start;\n}\n\n.ToggleSwitch-statusLabel--start .ToggleSwitch-statusLabelText {\n  text-align: end;\n}\n\n.ToggleSwitch-statusLabel--end .ToggleSwitch-statusLabelText {\n  text-align: start;\n}\n\n.ToggleSwitch-statusLabelText {\n  grid-area: 1 / 1;\n}\n\n.ToggleSwitch-statusLabelText--hidden {\n  visibility: hidden;\n}\n\n.ToggleSwitch-thumb {\n  position: absolute;\n  top: 50%;\n  box-sizing: border-box;\n  border: var(--brand-ToggleSwitch-thumb-borderWidth) solid var(--brand-ToggleSwitch-thumb-borderColor);\n  border-radius: var(--brand-ToggleSwitch-thumb-borderRadius);\n  background: var(--brand-ToggleSwitch-thumb-off-bgColor-rest);\n  transform: translateY(-50%);\n  transition: inset-inline-start var(--brand-animation-duration-faster) var(--brand-animation-easing-default);\n}\n\n.ToggleSwitch-thumb--checked {\n  background: var(--brand-ToggleSwitch-thumb-on-bgColor-rest);\n}\n\n.ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb {\n  background: var(--brand-ToggleSwitch-thumb-off-bgColor-hover);\n}\n\n.ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb--checked {\n  background: var(--brand-ToggleSwitch-thumb-on-bgColor-hover);\n}\n\n.ToggleSwitch-thumb--disabled {\n  background: var(--brand-ToggleSwitch-thumb-disabled-bgColor);\n}\n\n.ToggleSwitch--medium .ToggleSwitch-track {\n  width: var(--brand-ToggleSwitch-track-width-medium);\n  height: var(--brand-ToggleSwitch-track-height-medium);\n}\n\n.ToggleSwitch--small .ToggleSwitch-track {\n  width: var(--brand-ToggleSwitch-track-width-small);\n  height: var(--brand-ToggleSwitch-track-height-small);\n}\n\n.ToggleSwitch--medium .ToggleSwitch-thumb {\n  inset-inline-start: calc(var(--brand-ToggleSwitch-thumb-inset-medium) - var(--brand-ToggleSwitch-track-borderWidth));\n  width: var(--brand-ToggleSwitch-thumb-size-medium);\n  height: var(--brand-ToggleSwitch-thumb-size-medium);\n}\n\n.ToggleSwitch--small .ToggleSwitch-thumb {\n  inset-inline-start: calc(var(--brand-ToggleSwitch-thumb-inset-small) - var(--brand-ToggleSwitch-track-borderWidth));\n  width: var(--brand-ToggleSwitch-thumb-size-small);\n  height: var(--brand-ToggleSwitch-thumb-size-small);\n}\n\n.ToggleSwitch--medium .ToggleSwitch-thumb--checked {\n  inset-inline-start: calc(\n    var(--brand-ToggleSwitch-thumb-inset-medium) - var(--brand-ToggleSwitch-track-borderWidth) +\n      var(--brand-ToggleSwitch-thumb-travel-medium)\n  );\n}\n\n.ToggleSwitch--small .ToggleSwitch-thumb--checked {\n  inset-inline-start: calc(\n    var(--brand-ToggleSwitch-thumb-inset-small) - var(--brand-ToggleSwitch-track-borderWidth) +\n      var(--brand-ToggleSwitch-thumb-travel-small)\n  );\n}\n\n.ToggleSwitch-spinnerSlot {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 var(--brand-ToggleSwitch-loading-size);\n  width: var(--brand-ToggleSwitch-loading-size);\n  height: var(--brand-ToggleSwitch-loading-size);\n  pointer-events: none;\n}\n\n.ToggleSwitch-spinner {\n  color: var(--brand-ToggleSwitch-loading-fgColor);\n  animation-duration: var(--brand-ToggleSwitch-loading-duration);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ToggleSwitch-thumb {\n    transition: none;\n  }\n\n  .ToggleSwitch-spinner {\n    animation: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .ToggleSwitch-track {\n    border-color: ButtonText;\n    background: Canvas;\n  }\n\n  .ToggleSwitch-thumb,\n  .ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb {\n    forced-color-adjust: none;\n    border-color: ButtonText;\n    background: ButtonText;\n  }\n\n  .ToggleSwitch-thumb--checked,\n  .ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb--checked {\n    background: Highlight;\n  }\n\n  .ToggleSwitch-thumb--disabled {\n    background: GrayText;\n  }\n\n  .ToggleSwitch-button:focus-visible .ToggleSwitch-track {\n    outline-color: Highlight;\n  }\n\n  .ToggleSwitch-spinner {\n    color: CanvasText;\n  }\n\n  .ToggleSwitch-statusLabelText {\n    color: ButtonText;\n  }\n\n  .ToggleSwitch-button--unavailable .ToggleSwitch-statusLabelText {\n    color: GrayText;\n  }\n}\n"],"mappings":""}

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/toggle-switch/colors-with-modes-QUNsZVCZ.css

@@ -0,0 +1 @@
+:root,[data-color-mode=light],[data-color-mode=auto]{--brand-ToggleSwitch-track-bgColor:var(--base-color-scale-gray-0);--brand-ToggleSwitch-track-borderColor:var(--base-color-scale-gray-7);--brand-ToggleSwitch-thumb-borderColor:#00000014;--brand-ToggleSwitch-thumb-on-bgColor-rest:var(--brand-color-text-emphasized);--brand-ToggleSwitch-thumb-on-bgColor-hover:color-mix(in srgb, var(--brand-color-text-emphasized), black 16%);--brand-ToggleSwitch-thumb-off-bgColor-rest:var(--base-color-scale-gray-7);--brand-ToggleSwitch-thumb-off-bgColor-hover:var(--base-color-scale-gray-8);--brand-ToggleSwitch-thumb-disabled-bgColor:var(--base-color-scale-gray-4);--brand-ToggleSwitch-loading-fgColor:var(--brand-color-text-muted)}[data-color-mode=dark]{--brand-ToggleSwitch-track-bgColor:var(--base-color-scale-gray-7);--brand-ToggleSwitch-track-borderColor:var(--base-color-scale-gray-2);--brand-ToggleSwitch-thumb-borderColor:#00000014;--brand-ToggleSwitch-thumb-on-bgColor-rest:var(--base-color-scale-green-2);--brand-ToggleSwitch-thumb-on-bgColor-hover:var(--base-color-scale-green-1);--brand-ToggleSwitch-thumb-off-bgColor-rest:var(--base-color-scale-gray-2);--brand-ToggleSwitch-thumb-off-bgColor-hover:var(--base-color-scale-gray-1);--brand-ToggleSwitch-thumb-disabled-bgColor:var(--base-color-scale-gray-5);--brand-ToggleSwitch-loading-fgColor:var(--brand-color-text-muted)}@media (prefers-color-scheme:dark){[data-color-mode=auto]{--brand-ToggleSwitch-track-bgColor:var(--base-color-scale-gray-7);--brand-ToggleSwitch-track-borderColor:var(--base-color-scale-gray-2);--brand-ToggleSwitch-thumb-borderColor:#00000014;--brand-ToggleSwitch-thumb-on-bgColor-rest:var(--base-color-scale-green-2);--brand-ToggleSwitch-thumb-on-bgColor-hover:var(--base-color-scale-green-1);--brand-ToggleSwitch-thumb-off-bgColor-rest:var(--base-color-scale-gray-2);--brand-ToggleSwitch-thumb-off-bgColor-hover:var(--base-color-scale-gray-1);--brand-ToggleSwitch-thumb-disabled-bgColor:var(--base-color-scale-gray-5);--brand-ToggleSwitch-loading-fgColor:var(--brand-color-text-muted)}}

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RiverBreakoutTabs.d.ts","sourceRoot":"","sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoF,MAAM,OAAO,CAAA;AAGxG,OAAO,EAAiC,KAAK,YAAY,EAAC,MAAM,OAAO,CAAA;AACvE,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAkB,KAAK,oBAAoB,EAAC,MAAM,gBAAgB,CAAA;AAOzE;;GAEG;AACH,OAAO,4FAA4F,CAAA;AACnG,OAAO,6FAA6F,CAAA;AAUpG,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAA;IACtC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC,CAAC,GACA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,CAAA;AAErD,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,iCAAiC,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACtE,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAC,CAAA;AAEF,MAAM,MAAM,6BAA6B,GAAG,YAAY,CAAA;AAExD,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEhF,MAAM,MAAM,0BAA0B,GAAG,SAAS,CAAA;AAElD,MAAM,MAAM,4BAA4B,GAAG,oBAAoB,CAAA;AAod/D;;GAEG;AACH,eAAO,MAAM,iBAAiB;2BAzfL,MAAM;oBACb,MAAM;eACX,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI;IAC1C;;;OAGG;uBACgB,KAAK,CAAC,SAAS;IAClC;;OAEG;oBACa,QAAQ,GAAG,WAAW;IACtC;;OAEG;gCACyB,OAAO;;;;wCA0C4B,iCAAiC;iDA6B/B,6BAA6B;mEAZ7F,6BAA6B;gCAX4B,0BAA0B;yBAR3C,0BAA0B;;CAycnE,CAAA"}
+{"version":3,"file":"RiverBreakoutTabs.d.ts","sourceRoot":"","sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoF,MAAM,OAAO,CAAA;AAGxG,OAAO,EAAiC,KAAK,YAAY,EAAC,MAAM,OAAO,CAAA;AACvE,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAkB,KAAK,oBAAoB,EAAC,MAAM,gBAAgB,CAAA;AAOzE;;GAEG;AACH,OAAO,4FAA4F,CAAA;AACnG,OAAO,6FAA6F,CAAA;AAUpG,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAA;IACtC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC,CAAC,GACA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,CAAA;AAErD,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,iCAAiC,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACtE,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAC,CAAA;AAEF,MAAM,MAAM,6BAA6B,GAAG,YAAY,CAAA;AAExD,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEhF,MAAM,MAAM,0BAA0B,GAAG,SAAS,CAAA;AAElD,MAAM,MAAM,4BAA4B,GAAG,oBAAoB,CAAA;AAud/D;;GAEG;AACH,eAAO,MAAM,iBAAiB;2BA5fL,MAAM;oBACb,MAAM;eACX,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI;IAC1C;;;OAGG;uBACgB,KAAK,CAAC,SAAS;IAClC;;OAEG;oBACa,QAAQ,GAAG,WAAW;IACtC;;OAEG;gCACyB,OAAO;;;;wCA0C4B,iCAAiC;iDA6B/B,6BAA6B;mEAZ7F,6BAA6B;gCAX4B,0BAA0B;yBAR3C,0BAA0B;;CA4cnE,CAAA"}

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.js

@@ -173,6 +173,7 @@ var w = (e) => (t) => p.isValidElement(t) && t.type === e, T = ({ children: e })
 				open: n === X,
 				handleOpen: ee(n),
 				children: [/* @__PURE__ */ S(f.Heading, {
+					as: t.heading?.props.as ?? "h3",
 					className: d.RiverBreakoutTabs__accordionHeading,
 					children: /* @__PURE__ */ C("span", {
 						className: d.RiverBreakoutTabs__accordionHeadingInner,

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"RiverBreakoutTabs.js","names":[],"sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"sourcesContent":["import React, {cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Accordion, Heading, Link, Text, type HeadingProps} from '../..'\nimport {Icon, type IconProps} from '../../Icon'\nimport {RiverVisualBase, type RiverVisualBaseProps} from '../River/River'\nimport {useId} from '../../hooks/useId'\nimport {useTabs} from '../../hooks/useTabs'\nimport {useWindowSize} from '../../hooks/useWindowSize'\nimport riverStyles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/** Main Stylesheet (as a CSS Module) */\nimport styles from './RiverBreakoutTabs.module.css'\n\nconst createComponentTypeGuard =\n  <T,>(componentType: React.ComponentType<T>) =>\n  (element: unknown): element is React.ReactElement<T> =>\n    React.isValidElement<T>(element) && element.type === componentType\n\nexport type RiverBreakoutTabsProps = React.PropsWithChildren<{\n  defaultSelectedIndex?: number\n  selectedIndex?: number\n  onChange?: (selectedIndex: number) => void\n  /**\n   * Decorative background rendered behind the visual and persisted across tab\n   * changes. Must not contain interactive and remain purely decorative.\n   */\n  backgroundVisual?: React.ReactNode\n  /**\n   * Alignment of media within the visual container when `backgroundVisual` is provided\n   */\n  imagePosition?: 'center' | 'block-end'\n  /**\n   * When `true`, the `backgroundVisual` bleeds out to the gridline edges instead of being inset within them\n   */\n  backgroundVisualFullBleed?: boolean\n}> &\n  Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>\n\nexport type RiverBreakoutTabsItemProps = React.PropsWithChildren<{\n  className?: string\n}>\n\nexport type RiverBreakoutTabsA11yHeadingProps = React.PropsWithChildren<{\n  as?: 'h2' | 'h3'\n  id?: string\n}>\n\nexport type RiverBreakoutTabsHeadingProps = HeadingProps\n\nexport type RiverBreakoutTabsContentProps = React.HTMLAttributes<HTMLDivElement>\n\nexport type RiverBreakoutTabsIconProps = IconProps\n\nexport type RiverBreakoutTabsVisualProps = RiverVisualBaseProps\n\ntype RiverBreakoutTabsItemChild =\n  | React.ReactElement<RiverBreakoutTabsIconProps>\n  | React.ReactElement<RiverBreakoutTabsHeadingProps>\n  | React.ReactElement<RiverBreakoutTabsContentProps>\n  | React.ReactElement<RiverBreakoutTabsVisualProps>\n\ntype ExtractedItemParts = {\n  icon: React.ReactElement<RiverBreakoutTabsIconProps> | null\n  heading: React.ReactElement<RiverBreakoutTabsHeadingProps> | null\n  content: React.ReactElement<RiverBreakoutTabsContentProps> | null\n  visual: React.ReactElement<RiverBreakoutTabsVisualProps> | null\n  className?: string\n}\n\ntype ExtractedContentParts = {\n  action: React.ReactElement<React.ComponentProps<typeof Link>> | null\n  body: React.ReactNode[]\n}\n\nconst RiverBreakoutTabsItem = ({children}: RiverBreakoutTabsItemProps) => <>{children}</>\n\nconst RiverBreakoutTabsA11yHeading = ({as = 'h3', children, id}: RiverBreakoutTabsA11yHeadingProps) => (\n  <Heading as={as} id={id} className=\"visually-hidden\">\n    {children}\n  </Heading>\n)\n\nconst RiverBreakoutTabsIcon = ({color = 'green', ...props}: RiverBreakoutTabsIconProps) => (\n  <Icon color={color} {...props} />\n)\n\nconst RiverBreakoutTabsHeading = ({\n  as = 'h3',\n  children,\n  className,\n  size = 'subhead-large',\n  weight = 'normal',\n  ...props\n}: RiverBreakoutTabsHeadingProps) => (\n  <Heading\n    as={as}\n    className={clsx(styles.RiverBreakoutTabs__heading, className)}\n    size={size}\n    weight={weight}\n    {...props}\n  >\n    {children}\n  </Heading>\n)\n\nconst RiverBreakoutTabsContent = ({children, className, ...props}: RiverBreakoutTabsContentProps) => {\n  const Children = useMemo(\n    () =>\n      React.Children.toArray(children).map(child => {\n        if (isTextChild(child)) {\n          return cloneElement(child, {\n            as: child.props.as ?? 'p',\n            variant: child.props.variant ?? 'muted',\n          })\n        }\n\n        if (isLinkChild(child)) {\n          return cloneElement(child, {\n            className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n            size: child.props.size ?? 'medium',\n            variant: child.props.variant ?? 'accent',\n          })\n        }\n\n        return child\n      }),\n    [children],\n  )\n\n  return (\n    <div className={clsx(styles.RiverBreakoutTabs__content, className)} {...props}>\n      {Children}\n    </div>\n  )\n}\n\nconst RiverBreakoutTabsVisual = forwardRef<HTMLDivElement, RiverBreakoutTabsVisualProps>(\n  ({className, rounded = true, ...props}, ref) => (\n    <RiverVisualBase\n      ref={ref}\n      className={clsx(rounded && styles['RiverBreakoutTabs__visual--rounded'], className)}\n      rounded={rounded}\n      {...props}\n    />\n  ),\n)\n\nconst isItem = createComponentTypeGuard(RiverBreakoutTabsItem)\nconst isA11yHeading = createComponentTypeGuard(RiverBreakoutTabsA11yHeading)\nconst isIcon = createComponentTypeGuard(RiverBreakoutTabsIcon)\nconst isHeading = createComponentTypeGuard(RiverBreakoutTabsHeading)\nconst isContent = createComponentTypeGuard(RiverBreakoutTabsContent)\nconst isVisual = createComponentTypeGuard(RiverBreakoutTabsVisual)\n\nconst isTextChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Text>> =>\n  React.isValidElement<React.ComponentProps<typeof Text>>(child) && child.type === Text\n\nconst isLinkChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Link>> =>\n  React.isValidElement<React.ComponentProps<typeof Link>>(child) && child.type === Link\n\nconst extractItemParts = (item: React.ReactElement<RiverBreakoutTabsItemProps>): ExtractedItemParts => {\n  const Children = React.Children.toArray(item.props.children) as RiverBreakoutTabsItemChild[]\n\n  return Children.reduce<ExtractedItemParts>(\n    (acc, child) => {\n      if (isIcon(child)) {\n        acc.icon = child\n      }\n\n      if (isHeading(child)) {\n        acc.heading = child\n      }\n\n      if (isContent(child)) {\n        acc.content = child\n      }\n\n      if (isVisual(child)) {\n        acc.visual = child\n      }\n\n      return acc\n    },\n    {icon: null, heading: null, content: null, visual: null, className: item.props.className},\n  )\n}\n\nconst extractWideTabListContentParts = (\n  content: React.ReactElement<RiverBreakoutTabsContentProps> | null,\n): ExtractedContentParts => {\n  if (!content) {\n    return {action: null, body: []}\n  }\n\n  const Children = React.Children.toArray(content.props.children).map(child => {\n    if (isTextChild(child)) {\n      return cloneElement(child, {\n        as: child.props.as ?? 'p',\n        variant: child.props.variant ?? 'muted',\n      })\n    }\n\n    if (isLinkChild(child)) {\n      return cloneElement(child, {\n        className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n        size: child.props.size ?? 'medium',\n        variant: child.props.variant ?? 'accent',\n      })\n    }\n\n    return child\n  })\n\n  return Children.reduce<ExtractedContentParts>(\n    (acc, child) => {\n      if (isLinkChild(child)) {\n        if (!acc.action) {\n          acc.action = child\n        }\n\n        return acc\n      }\n\n      acc.body.push(child)\n      return acc\n    },\n    {action: null, body: []},\n  )\n}\n\nconst clampIndex = (index: number, length: number) => {\n  if (length === 0) return -1\n\n  const normalizedIndex = Number.isFinite(index) ? Math.trunc(index) : 0\n  return Math.min(Math.max(normalizedIndex, 0), length - 1)\n}\n\nconst RiverBreakoutTabsRoot = forwardRef<HTMLElement, RiverBreakoutTabsProps>(\n  (\n    {\n      children,\n      className,\n      defaultSelectedIndex = 0,\n      onChange,\n      selectedIndex,\n      backgroundVisual,\n      imagePosition = 'center',\n      backgroundVisualFullBleed = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const instanceId = useId()\n    const {isLarge} = useWindowSize()\n\n    const Children = useMemo(() => React.Children.toArray(children), [children])\n\n    const A11yHeadingChild = Children.find(isA11yHeading) ?? null\n    const Items = Children.filter(isItem)\n      .map(extractItemParts)\n      .filter(item => item.heading && item.content && item.visual)\n\n    const defaultActiveIndex = clampIndex(defaultSelectedIndex, Items.length)\n    const controlledActiveIndex =\n      typeof selectedIndex === 'number' && Number.isFinite(selectedIndex)\n        ? clampIndex(selectedIndex, Items.length)\n        : null\n    const initialActiveIndex = controlledActiveIndex ?? defaultActiveIndex\n    const headingId = A11yHeadingChild?.props.id ?? `${instanceId}-heading`\n    const wideTabListColumns = Math.min(Math.max(Items.length, 1), 3)\n    const initialActiveTab = initialActiveIndex >= 0 ? String(initialActiveIndex) : undefined\n    const isWideTabList = isLarge === true\n    const suppressOnTabActivateRef = useRef(false)\n\n    const handleTabActivate = useCallback(\n      (id: string) => {\n        if (suppressOnTabActivateRef.current) {\n          suppressOnTabActivateRef.current = false\n          return\n        }\n\n        if (!onChange) return\n\n        const nextIndex = Number(id)\n        if (!Number.isNaN(nextIndex)) {\n          onChange(nextIndex)\n        }\n      },\n      [onChange],\n    )\n\n    const {activeTab, activateTab, getTabListProps, getTabPanelProps, getTabProps} = useTabs({\n      defaultTab: initialActiveTab,\n      onTabActivate: handleTabActivate,\n    })\n\n    const [activeAccordionIndex, setActiveAccordionIndex] = useState(initialActiveIndex)\n\n    useEffect(() => {\n      if (activeTab === null) return\n\n      const nextIndex = Number(activeTab)\n      if (!Number.isNaN(nextIndex)) {\n        setActiveAccordionIndex(nextIndex)\n      }\n    }, [activeTab])\n\n    useEffect(() => {\n      if (controlledActiveIndex === null || controlledActiveIndex < 0) return\n\n      const controlledTab = String(controlledActiveIndex)\n      if (activeTab !== controlledTab) {\n        suppressOnTabActivateRef.current = true\n        activateTab(controlledTab)\n      }\n\n      setActiveAccordionIndex(controlledActiveIndex)\n    }, [activateTab, activeTab, controlledActiveIndex])\n\n    if (!A11yHeadingChild && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'RiverBreakoutTabs: A11yHeading child is required. This element will not be visible, only read by screenreaders.',\n      )\n    }\n\n    const handleAccordionOpen = (index: number) => (isOpen: boolean) => {\n      if (isOpen) {\n        setActiveAccordionIndex(index)\n        if (activeTab !== String(index)) {\n          activateTab(String(index))\n        }\n      }\n    }\n\n    const handleAccordionToggle: React.ReactEventHandler<HTMLDetailsElement> = event => {\n      const toggledIndex = Number(event.currentTarget.getAttribute('data-index'))\n\n      if (!event.currentTarget.open && activeAccordionIndex === toggledIndex) {\n        event.currentTarget.open = true\n      }\n    }\n\n    const tabListProps = A11yHeadingChild\n      ? getTabListProps({labelledBy: headingId})\n      : getTabListProps({label: 'River breakout tabs'})\n    const WideTabListContentParts = useMemo(\n      () => Items.map(item => extractWideTabListContentParts(item.content)),\n      [Items],\n    )\n\n    const BackgroundVisualLayer =\n      backgroundVisual != null ? (\n        <div className={styles.RiverBreakoutTabs__backgroundVisual} aria-hidden=\"true\">\n          {backgroundVisual}\n        </div>\n      ) : null\n\n    return (\n      <section\n        ref={ref}\n        className={clsx(\n          riverStyles.RiverBreakout,\n          riverStyles['RiverBreakout--variant-gridline'],\n          gridlineStyles.gridline,\n          styles.RiverBreakoutTabs,\n          backgroundVisual != null && styles['RiverBreakoutTabs--has-background-visual'],\n          backgroundVisual != null &&\n            imagePosition === 'block-end' &&\n            styles['RiverBreakoutTabs--image-position-block-end'],\n          backgroundVisual != null &&\n            backgroundVisualFullBleed &&\n            styles['RiverBreakoutTabs--background-visual-full-bleed'],\n          className,\n        )}\n        {...props}\n      >\n        {A11yHeadingChild && cloneElement(A11yHeadingChild, {id: headingId})}\n\n        {isWideTabList ? (\n          <div\n            className={styles.RiverBreakoutTabs__wideTabList}\n            style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n          >\n            <div {...tabListProps} className={styles.RiverBreakoutTabs__tablist}>\n              {Items.map((item, index) => {\n                const isSelected = activeTab === String(index)\n                const tabProps = getTabProps<HTMLButtonElement>(String(index))\n\n                return (\n                  <div\n                    key={index}\n                    className={clsx(\n                      styles.RiverBreakoutTabs__item,\n                      isSelected && styles['RiverBreakoutTabs__item--selected'],\n                      item.className,\n                    )}\n                  >\n                    <button type=\"button\" {...tabProps} className={styles.RiverBreakoutTabs__tab}>\n                      {item.icon &&\n                        cloneElement(item.icon, {\n                          className: item.icon.props.className,\n                        })}\n\n                      {item.heading &&\n                        cloneElement(item.heading, {\n                          className: clsx(item.heading.props.className, styles.RiverBreakoutTabs__tabHeading),\n                        })}\n                    </button>\n                  </div>\n                )\n              })}\n            </div>\n\n            <div className={styles.RiverBreakoutTabs__sharedVisuals}>\n              {BackgroundVisualLayer}\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={styles.RiverBreakoutTabs__sharedVisualPanel}\n                  >\n                    {cloneElement(item.visual as React.ReactElement<RiverBreakoutTabsVisualProps>, {\n                      className: clsx(item.visual?.props.className, styles.RiverBreakoutTabs__sharedVisual),\n                    })}\n                  </div>\n                )\n              })}\n            </div>\n\n            {WideTabListContentParts.some(({body}) => body.length > 0) && (\n              <div className={styles.RiverBreakoutTabs__wideTabListContentRow}>\n                {WideTabListContentParts.map(({body}, index) => (\n                  <div\n                    key={index}\n                    className={styles.RiverBreakoutTabs__wideTabListContent}\n                    role={body.length > 0 ? 'group' : undefined}\n                    aria-labelledby={body.length > 0 ? getTabProps(String(index)).id : undefined}\n                  >\n                    {body}\n                  </div>\n                ))}\n              </div>\n            )}\n\n            {WideTabListContentParts.some(content => content.action) && (\n              <div className={styles.RiverBreakoutTabs__wideTabListActions}>\n                {Items.map((_, index) => {\n                  const {action} = WideTabListContentParts[index]\n\n                  return (\n                    <div key={index} className={styles.RiverBreakoutTabs__wideTabListActionItem}>\n                      {action &&\n                        cloneElement(action, {\n                          className: clsx(action.props.className, styles.RiverBreakoutTabs__wideTabListAction),\n                        })}\n                    </div>\n                  )\n                })}\n              </div>\n            )}\n          </div>\n        ) : (\n          <div className={styles.RiverBreakoutTabs__accordion}>\n            {activeAccordionIndex >= 0 && Items[activeAccordionIndex]?.visual && (\n              <div className={styles.RiverBreakoutTabs__accordionSharedVisuals}>\n                {BackgroundVisualLayer}\n                {cloneElement(Items[activeAccordionIndex].visual as React.ReactElement<RiverBreakoutTabsVisualProps>, {\n                  // Remount the visual so new media autoplays when the active item changes.\n                  key: String(activeAccordionIndex),\n                  className: clsx(\n                    Items[activeAccordionIndex].visual.props.className,\n                    styles.RiverBreakoutTabs__accordionSharedVisual,\n                  ),\n                })}\n              </div>\n            )}\n\n            {Items.map((item, index) => {\n              return (\n                <Accordion\n                  key={index}\n                  data-index={index}\n                  className={clsx(\n                    styles.RiverBreakoutTabs__accordionItem,\n                    index === activeAccordionIndex && styles['RiverBreakoutTabs__item--selected'],\n                    item.className,\n                  )}\n                  onToggle={handleAccordionToggle}\n                  open={index === activeAccordionIndex}\n                  handleOpen={handleAccordionOpen(index)}\n                >\n                  <Accordion.Heading className={styles.RiverBreakoutTabs__accordionHeading}>\n                    <span className={styles.RiverBreakoutTabs__accordionHeadingInner}>\n                      {item.icon &&\n                        cloneElement(item.icon, {\n                          className: clsx(item.icon.props.className, styles.RiverBreakoutTabs__accordionIcon),\n                        })}\n                      <span className={styles.RiverBreakoutTabs__accordionLabel}>{item.heading?.props.children}</span>\n                    </span>\n                  </Accordion.Heading>\n\n                  <Accordion.Content className={styles.RiverBreakoutTabs__accordionPanel}>\n                    {cloneElement(item.content as React.ReactElement<RiverBreakoutTabsContentProps>, {\n                      className: clsx(item.content?.props.className, styles.RiverBreakoutTabs__accordionContent),\n                    })}\n                  </Accordion.Content>\n                </Accordion>\n              )\n            })}\n          </div>\n        )}\n      </section>\n    )\n  },\n)\n\n/**\n * Use RiverBreakoutTabs to showcase multiple feature stories within a single immersive surface.\n */\nexport const RiverBreakoutTabs = Object.assign(RiverBreakoutTabsRoot, {\n  A11yHeading: RiverBreakoutTabsA11yHeading,\n  Content: RiverBreakoutTabsContent,\n  Heading: RiverBreakoutTabsHeading,\n  Icon: RiverBreakoutTabsIcon,\n  Item: RiverBreakoutTabsItem,\n  Visual: RiverBreakoutTabsVisual,\n})\n"],"mappings":"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"}
+{"version":3,"file":"RiverBreakoutTabs.js","names":[],"sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"sourcesContent":["import React, {cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Accordion, Heading, Link, Text, type HeadingProps} from '../..'\nimport {Icon, type IconProps} from '../../Icon'\nimport {RiverVisualBase, type RiverVisualBaseProps} from '../River/River'\nimport {useId} from '../../hooks/useId'\nimport {useTabs} from '../../hooks/useTabs'\nimport {useWindowSize} from '../../hooks/useWindowSize'\nimport riverStyles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/** Main Stylesheet (as a CSS Module) */\nimport styles from './RiverBreakoutTabs.module.css'\n\nconst createComponentTypeGuard =\n  <T,>(componentType: React.ComponentType<T>) =>\n  (element: unknown): element is React.ReactElement<T> =>\n    React.isValidElement<T>(element) && element.type === componentType\n\nexport type RiverBreakoutTabsProps = React.PropsWithChildren<{\n  defaultSelectedIndex?: number\n  selectedIndex?: number\n  onChange?: (selectedIndex: number) => void\n  /**\n   * Decorative background rendered behind the visual and persisted across tab\n   * changes. Must not contain interactive and remain purely decorative.\n   */\n  backgroundVisual?: React.ReactNode\n  /**\n   * Alignment of media within the visual container when `backgroundVisual` is provided\n   */\n  imagePosition?: 'center' | 'block-end'\n  /**\n   * When `true`, the `backgroundVisual` bleeds out to the gridline edges instead of being inset within them\n   */\n  backgroundVisualFullBleed?: boolean\n}> &\n  Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>\n\nexport type RiverBreakoutTabsItemProps = React.PropsWithChildren<{\n  className?: string\n}>\n\nexport type RiverBreakoutTabsA11yHeadingProps = React.PropsWithChildren<{\n  as?: 'h2' | 'h3'\n  id?: string\n}>\n\nexport type RiverBreakoutTabsHeadingProps = HeadingProps\n\nexport type RiverBreakoutTabsContentProps = React.HTMLAttributes<HTMLDivElement>\n\nexport type RiverBreakoutTabsIconProps = IconProps\n\nexport type RiverBreakoutTabsVisualProps = RiverVisualBaseProps\n\ntype RiverBreakoutTabsItemChild =\n  | React.ReactElement<RiverBreakoutTabsIconProps>\n  | React.ReactElement<RiverBreakoutTabsHeadingProps>\n  | React.ReactElement<RiverBreakoutTabsContentProps>\n  | React.ReactElement<RiverBreakoutTabsVisualProps>\n\ntype ExtractedItemParts = {\n  icon: React.ReactElement<RiverBreakoutTabsIconProps> | null\n  heading: React.ReactElement<RiverBreakoutTabsHeadingProps> | null\n  content: React.ReactElement<RiverBreakoutTabsContentProps> | null\n  visual: React.ReactElement<RiverBreakoutTabsVisualProps> | null\n  className?: string\n}\n\ntype ExtractedContentParts = {\n  action: React.ReactElement<React.ComponentProps<typeof Link>> | null\n  body: React.ReactNode[]\n}\n\nconst RiverBreakoutTabsItem = ({children}: RiverBreakoutTabsItemProps) => <>{children}</>\n\nconst RiverBreakoutTabsA11yHeading = ({as = 'h3', children, id}: RiverBreakoutTabsA11yHeadingProps) => (\n  <Heading as={as} id={id} className=\"visually-hidden\">\n    {children}\n  </Heading>\n)\n\nconst RiverBreakoutTabsIcon = ({color = 'green', ...props}: RiverBreakoutTabsIconProps) => (\n  <Icon color={color} {...props} />\n)\n\nconst RiverBreakoutTabsHeading = ({\n  as = 'h3',\n  children,\n  className,\n  size = 'subhead-large',\n  weight = 'normal',\n  ...props\n}: RiverBreakoutTabsHeadingProps) => (\n  <Heading\n    as={as}\n    className={clsx(styles.RiverBreakoutTabs__heading, className)}\n    size={size}\n    weight={weight}\n    {...props}\n  >\n    {children}\n  </Heading>\n)\n\nconst RiverBreakoutTabsContent = ({children, className, ...props}: RiverBreakoutTabsContentProps) => {\n  const Children = useMemo(\n    () =>\n      React.Children.toArray(children).map(child => {\n        if (isTextChild(child)) {\n          return cloneElement(child, {\n            as: child.props.as ?? 'p',\n            variant: child.props.variant ?? 'muted',\n          })\n        }\n\n        if (isLinkChild(child)) {\n          return cloneElement(child, {\n            className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n            size: child.props.size ?? 'medium',\n            variant: child.props.variant ?? 'accent',\n          })\n        }\n\n        return child\n      }),\n    [children],\n  )\n\n  return (\n    <div className={clsx(styles.RiverBreakoutTabs__content, className)} {...props}>\n      {Children}\n    </div>\n  )\n}\n\nconst RiverBreakoutTabsVisual = forwardRef<HTMLDivElement, RiverBreakoutTabsVisualProps>(\n  ({className, rounded = true, ...props}, ref) => (\n    <RiverVisualBase\n      ref={ref}\n      className={clsx(rounded && styles['RiverBreakoutTabs__visual--rounded'], className)}\n      rounded={rounded}\n      {...props}\n    />\n  ),\n)\n\nconst isItem = createComponentTypeGuard(RiverBreakoutTabsItem)\nconst isA11yHeading = createComponentTypeGuard(RiverBreakoutTabsA11yHeading)\nconst isIcon = createComponentTypeGuard(RiverBreakoutTabsIcon)\nconst isHeading = createComponentTypeGuard(RiverBreakoutTabsHeading)\nconst isContent = createComponentTypeGuard(RiverBreakoutTabsContent)\nconst isVisual = createComponentTypeGuard(RiverBreakoutTabsVisual)\n\nconst isTextChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Text>> =>\n  React.isValidElement<React.ComponentProps<typeof Text>>(child) && child.type === Text\n\nconst isLinkChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Link>> =>\n  React.isValidElement<React.ComponentProps<typeof Link>>(child) && child.type === Link\n\nconst extractItemParts = (item: React.ReactElement<RiverBreakoutTabsItemProps>): ExtractedItemParts => {\n  const Children = React.Children.toArray(item.props.children) as RiverBreakoutTabsItemChild[]\n\n  return Children.reduce<ExtractedItemParts>(\n    (acc, child) => {\n      if (isIcon(child)) {\n        acc.icon = child\n      }\n\n      if (isHeading(child)) {\n        acc.heading = child\n      }\n\n      if (isContent(child)) {\n        acc.content = child\n      }\n\n      if (isVisual(child)) {\n        acc.visual = child\n      }\n\n      return acc\n    },\n    {icon: null, heading: null, content: null, visual: null, className: item.props.className},\n  )\n}\n\nconst extractWideTabListContentParts = (\n  content: React.ReactElement<RiverBreakoutTabsContentProps> | null,\n): ExtractedContentParts => {\n  if (!content) {\n    return {action: null, body: []}\n  }\n\n  const Children = React.Children.toArray(content.props.children).map(child => {\n    if (isTextChild(child)) {\n      return cloneElement(child, {\n        as: child.props.as ?? 'p',\n        variant: child.props.variant ?? 'muted',\n      })\n    }\n\n    if (isLinkChild(child)) {\n      return cloneElement(child, {\n        className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n        size: child.props.size ?? 'medium',\n        variant: child.props.variant ?? 'accent',\n      })\n    }\n\n    return child\n  })\n\n  return Children.reduce<ExtractedContentParts>(\n    (acc, child) => {\n      if (isLinkChild(child)) {\n        if (!acc.action) {\n          acc.action = child\n        }\n\n        return acc\n      }\n\n      acc.body.push(child)\n      return acc\n    },\n    {action: null, body: []},\n  )\n}\n\nconst clampIndex = (index: number, length: number) => {\n  if (length === 0) return -1\n\n  const normalizedIndex = Number.isFinite(index) ? Math.trunc(index) : 0\n  return Math.min(Math.max(normalizedIndex, 0), length - 1)\n}\n\nconst RiverBreakoutTabsRoot = forwardRef<HTMLElement, RiverBreakoutTabsProps>(\n  (\n    {\n      children,\n      className,\n      defaultSelectedIndex = 0,\n      onChange,\n      selectedIndex,\n      backgroundVisual,\n      imagePosition = 'center',\n      backgroundVisualFullBleed = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const instanceId = useId()\n    const {isLarge} = useWindowSize()\n\n    const Children = useMemo(() => React.Children.toArray(children), [children])\n\n    const A11yHeadingChild = Children.find(isA11yHeading) ?? null\n    const Items = Children.filter(isItem)\n      .map(extractItemParts)\n      .filter(item => item.heading && item.content && item.visual)\n\n    const defaultActiveIndex = clampIndex(defaultSelectedIndex, Items.length)\n    const controlledActiveIndex =\n      typeof selectedIndex === 'number' && Number.isFinite(selectedIndex)\n        ? clampIndex(selectedIndex, Items.length)\n        : null\n    const initialActiveIndex = controlledActiveIndex ?? defaultActiveIndex\n    const headingId = A11yHeadingChild?.props.id ?? `${instanceId}-heading`\n    const wideTabListColumns = Math.min(Math.max(Items.length, 1), 3)\n    const initialActiveTab = initialActiveIndex >= 0 ? String(initialActiveIndex) : undefined\n    const isWideTabList = isLarge === true\n    const suppressOnTabActivateRef = useRef(false)\n\n    const handleTabActivate = useCallback(\n      (id: string) => {\n        if (suppressOnTabActivateRef.current) {\n          suppressOnTabActivateRef.current = false\n          return\n        }\n\n        if (!onChange) return\n\n        const nextIndex = Number(id)\n        if (!Number.isNaN(nextIndex)) {\n          onChange(nextIndex)\n        }\n      },\n      [onChange],\n    )\n\n    const {activeTab, activateTab, getTabListProps, getTabPanelProps, getTabProps} = useTabs({\n      defaultTab: initialActiveTab,\n      onTabActivate: handleTabActivate,\n    })\n\n    const [activeAccordionIndex, setActiveAccordionIndex] = useState(initialActiveIndex)\n\n    useEffect(() => {\n      if (activeTab === null) return\n\n      const nextIndex = Number(activeTab)\n      if (!Number.isNaN(nextIndex)) {\n        setActiveAccordionIndex(nextIndex)\n      }\n    }, [activeTab])\n\n    useEffect(() => {\n      if (controlledActiveIndex === null || controlledActiveIndex < 0) return\n\n      const controlledTab = String(controlledActiveIndex)\n      if (activeTab !== controlledTab) {\n        suppressOnTabActivateRef.current = true\n        activateTab(controlledTab)\n      }\n\n      setActiveAccordionIndex(controlledActiveIndex)\n    }, [activateTab, activeTab, controlledActiveIndex])\n\n    if (!A11yHeadingChild && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'RiverBreakoutTabs: A11yHeading child is required. This element will not be visible, only read by screenreaders.',\n      )\n    }\n\n    const handleAccordionOpen = (index: number) => (isOpen: boolean) => {\n      if (isOpen) {\n        setActiveAccordionIndex(index)\n        if (activeTab !== String(index)) {\n          activateTab(String(index))\n        }\n      }\n    }\n\n    const handleAccordionToggle: React.ReactEventHandler<HTMLDetailsElement> = event => {\n      const toggledIndex = Number(event.currentTarget.getAttribute('data-index'))\n\n      if (!event.currentTarget.open && activeAccordionIndex === toggledIndex) {\n        event.currentTarget.open = true\n      }\n    }\n\n    const tabListProps = A11yHeadingChild\n      ? getTabListProps({labelledBy: headingId})\n      : getTabListProps({label: 'River breakout tabs'})\n    const WideTabListContentParts = useMemo(\n      () => Items.map(item => extractWideTabListContentParts(item.content)),\n      [Items],\n    )\n\n    const BackgroundVisualLayer =\n      backgroundVisual != null ? (\n        <div className={styles.RiverBreakoutTabs__backgroundVisual} aria-hidden=\"true\">\n          {backgroundVisual}\n        </div>\n      ) : null\n\n    return (\n      <section\n        ref={ref}\n        className={clsx(\n          riverStyles.RiverBreakout,\n          riverStyles['RiverBreakout--variant-gridline'],\n          gridlineStyles.gridline,\n          styles.RiverBreakoutTabs,\n          backgroundVisual != null && styles['RiverBreakoutTabs--has-background-visual'],\n          backgroundVisual != null &&\n            imagePosition === 'block-end' &&\n            styles['RiverBreakoutTabs--image-position-block-end'],\n          backgroundVisual != null &&\n            backgroundVisualFullBleed &&\n            styles['RiverBreakoutTabs--background-visual-full-bleed'],\n          className,\n        )}\n        {...props}\n      >\n        {A11yHeadingChild && cloneElement(A11yHeadingChild, {id: headingId})}\n\n        {isWideTabList ? (\n          <div\n            className={styles.RiverBreakoutTabs__wideTabList}\n            style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n          >\n            <div {...tabListProps} className={styles.RiverBreakoutTabs__tablist}>\n              {Items.map((item, index) => {\n                const isSelected = activeTab === String(index)\n                const tabProps = getTabProps<HTMLButtonElement>(String(index))\n\n                return (\n                  <div\n                    key={index}\n                    className={clsx(\n                      styles.RiverBreakoutTabs__item,\n                      isSelected && styles['RiverBreakoutTabs__item--selected'],\n                      item.className,\n                    )}\n                  >\n                    <button type=\"button\" {...tabProps} className={styles.RiverBreakoutTabs__tab}>\n                      {item.icon &&\n                        cloneElement(item.icon, {\n                          className: item.icon.props.className,\n                        })}\n\n                      {item.heading &&\n                        cloneElement(item.heading, {\n                          className: clsx(item.heading.props.className, styles.RiverBreakoutTabs__tabHeading),\n                        })}\n                    </button>\n                  </div>\n                )\n              })}\n            </div>\n\n            <div className={styles.RiverBreakoutTabs__sharedVisuals}>\n              {BackgroundVisualLayer}\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={styles.RiverBreakoutTabs__sharedVisualPanel}\n                  >\n                    {cloneElement(item.visual as React.ReactElement<RiverBreakoutTabsVisualProps>, {\n                      className: clsx(item.visual?.props.className, styles.RiverBreakoutTabs__sharedVisual),\n                    })}\n                  </div>\n                )\n              })}\n            </div>\n\n            {WideTabListContentParts.some(({body}) => body.length > 0) && (\n              <div className={styles.RiverBreakoutTabs__wideTabListContentRow}>\n                {WideTabListContentParts.map(({body}, index) => (\n                  <div\n                    key={index}\n                    className={styles.RiverBreakoutTabs__wideTabListContent}\n                    role={body.length > 0 ? 'group' : undefined}\n                    aria-labelledby={body.length > 0 ? getTabProps(String(index)).id : undefined}\n                  >\n                    {body}\n                  </div>\n                ))}\n              </div>\n            )}\n\n            {WideTabListContentParts.some(content => content.action) && (\n              <div className={styles.RiverBreakoutTabs__wideTabListActions}>\n                {Items.map((_, index) => {\n                  const {action} = WideTabListContentParts[index]\n\n                  return (\n                    <div key={index} className={styles.RiverBreakoutTabs__wideTabListActionItem}>\n                      {action &&\n                        cloneElement(action, {\n                          className: clsx(action.props.className, styles.RiverBreakoutTabs__wideTabListAction),\n                        })}\n                    </div>\n                  )\n                })}\n              </div>\n            )}\n          </div>\n        ) : (\n          <div className={styles.RiverBreakoutTabs__accordion}>\n            {activeAccordionIndex >= 0 && Items[activeAccordionIndex]?.visual && (\n              <div className={styles.RiverBreakoutTabs__accordionSharedVisuals}>\n                {BackgroundVisualLayer}\n                {cloneElement(Items[activeAccordionIndex].visual as React.ReactElement<RiverBreakoutTabsVisualProps>, {\n                  // Remount the visual so new media autoplays when the active item changes.\n                  key: String(activeAccordionIndex),\n                  className: clsx(\n                    Items[activeAccordionIndex].visual.props.className,\n                    styles.RiverBreakoutTabs__accordionSharedVisual,\n                  ),\n                })}\n              </div>\n            )}\n\n            {Items.map((item, index) => {\n              return (\n                <Accordion\n                  key={index}\n                  data-index={index}\n                  className={clsx(\n                    styles.RiverBreakoutTabs__accordionItem,\n                    index === activeAccordionIndex && styles['RiverBreakoutTabs__item--selected'],\n                    item.className,\n                  )}\n                  onToggle={handleAccordionToggle}\n                  open={index === activeAccordionIndex}\n                  handleOpen={handleAccordionOpen(index)}\n                >\n                  <Accordion.Heading\n                    as={item.heading?.props.as ?? 'h3'}\n                    className={styles.RiverBreakoutTabs__accordionHeading}\n                  >\n                    <span className={styles.RiverBreakoutTabs__accordionHeadingInner}>\n                      {item.icon &&\n                        cloneElement(item.icon, {\n                          className: clsx(item.icon.props.className, styles.RiverBreakoutTabs__accordionIcon),\n                        })}\n                      <span className={styles.RiverBreakoutTabs__accordionLabel}>{item.heading?.props.children}</span>\n                    </span>\n                  </Accordion.Heading>\n\n                  <Accordion.Content className={styles.RiverBreakoutTabs__accordionPanel}>\n                    {cloneElement(item.content as React.ReactElement<RiverBreakoutTabsContentProps>, {\n                      className: clsx(item.content?.props.className, styles.RiverBreakoutTabs__accordionContent),\n                    })}\n                  </Accordion.Content>\n                </Accordion>\n              )\n            })}\n          </div>\n        )}\n      </section>\n    )\n  },\n)\n\n/**\n * Use RiverBreakoutTabs to showcase multiple feature stories within a single immersive surface.\n */\nexport const RiverBreakoutTabs = Object.assign(RiverBreakoutTabsRoot, {\n  A11yHeading: RiverBreakoutTabsA11yHeading,\n  Content: RiverBreakoutTabsContent,\n  Heading: RiverBreakoutTabsHeading,\n  Icon: RiverBreakoutTabsIcon,\n  Item: RiverBreakoutTabsItem,\n  Visual: RiverBreakoutTabsVisual,\n})\n"],"mappings":"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"}