@persona/design-system 0.8.2 → 0.9.1

package/dist/{CardV2-Ds6e577k.mjs.map → CardV2-Cq4QODeE.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"CardV2-Ds6e577k.mjs","names":["CardLoadingShimmer","Heading","Button","DropdownMenu"],"sources":["../components/CardV2/SectionHeading.tsx","../components/CardV2/Section.tsx","../components/CardV2/Card.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { ChevronDownIcon, MoreIcon } from '@persona/icons';\nimport Button, { IconButton } from 'design-system/components/Button';\nimport DropdownButton from 'design-system/components/DropdownButton';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport { LoadingShimmer } from 'design-system/components/LoadingShimmer';\nimport { HStack } from 'design-system/components/Stack';\nimport { Heading } from 'design-system/components/Text';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { HeadlessAriaButton } from 'design-system/lib/HeadlessAriaButton';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { TruncatedText } from 'design-system/lib/TruncatedText';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport type { HeadingSize } from 'design-system/mixins/text';\nimport type { IconAction, MenuAction, TextAction } from 'design-system/types/Action';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\n/**\n * Distance from the top of a card to the underside of an expanded top-section heading: the\n * `Spacing[4]` padding above and below a 24px title line, plus the divider. Sticky content inside\n * the card pins here so the heading's divider stays the only line between them.\n */\nexport const CARD_HEADING_STICKY_OFFSET = `calc(${Spacing[9]} + 1px)`;\n\nconst CardLoadingShimmer = styled(LoadingShimmer)`\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n`;\n\nconst StickerContainer = styled.div`\n  display: flex;\n  max-width: 180px;\n`;\n\ntype AccordionContainerProps = {\n  $isTopSection: boolean;\n  $expanded: boolean;\n};\nconst AccordionContainer = styled.div<AccordionContainerProps>`\n  transition: opacity ${TransitionDuration.Faster};\n  position: absolute;\n  opacity: 0;\n\n  height: 12px;\n  width: 12px;\n  display: flex;\n  align-items: center;\n  /* Because of padding in the top section heading we need to offset differently. */\n  /* We want a 12px icon to be off-center in 24px padding, 4px on the right and 8px on the left */\n  left: ${({ $isTopSection }) => ($isTopSection ? '8px' : '-16px')};\n  /* center the icon vertically */\n  top: calc(50% - 6px);\n\n  border-radius: 1px;\n\n  & svg {\n    transition: transform ${TransitionDuration.Faster} ease-out;\n    transform: rotate(${({ $expanded }) => ($expanded ? '0' : '-90deg')});\n  }\n`;\n\nconst HeaderButton = styled(HeadlessAriaButton)`\n  min-width: 0;\n  flex: 1;\n\n  &:hover ~ ${AccordionContainer} {\n    opacity: 1;\n  }\n\n  &:focus-visible ~ ${AccordionContainer} {\n    opacity: 1;\n    ${focusStyle}\n  }\n`;\n\ntype HeadingContainerProps = {\n  $isTopSection: boolean;\n  $divider: boolean;\n  $hasFooter: boolean;\n  $isExpanded: boolean;\n};\nconst HeadingContainer = styled(HStack)<HeadingContainerProps>`\n  position: relative;\n\n  ${({ $isTopSection }) =>\n    $isTopSection &&\n    css`\n      padding: ${Spacing[4]} ${Spacing[5]};\n    `}\n  ${({ $divider }) =>\n    $divider &&\n    css`\n      border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n    `}\n  ${({ $isTopSection, $hasFooter, $isExpanded }) =>\n    $isTopSection &&\n    !$hasFooter &&\n    !$isExpanded &&\n    css`\n      // We apply 4px of whitespace to the bottom of the card container so that content has a buffer\n      // when being scrolled and still appears inside the card. Here we adjust, subtracting\n      // 4px from the 16px padding.\n      padding-bottom: ${Spacing[3]};\n    `}\n`;\n\ntype StyledHeadingProps = {\n  $isCollapsible: boolean;\n  $isTopSection: boolean;\n  size: HeadingSize;\n};\nconst StyledHeading = styled(Heading)<StyledHeadingProps>`\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n  line-height: 24px; // We want an adjusted line-height to hit the target header size.\n  overflow: hidden;\n\n  ${({ $isCollapsible }) => $isCollapsible && 'cursor: pointer;'}\n  ${({ $isTopSection }) =>\n    !$isTopSection &&\n    css`\n      ${Typography.TextLargeBold};\n    `}\n`;\n\nconst isIconAction = (action: IconAction | TextAction): action is IconAction => 'icon' in action;\n\nconst ButtonRow: FC<{\n  actions: (IconAction | TextAction)[];\n  menuActions: MenuAction[];\n}> = ({ actions, menuActions }) => {\n  const buttons = actions\n    .filter((action) => !action.hidden)\n    .map((action, i) => {\n      const key = isIconAction(action)\n        ? (action.id ?? action.ariaLabel ?? `action-${i}`)\n        : (action.id ?? action.label ?? `action-${i}`);\n\n      const button = isIconAction(action) ? (\n        <IconButton\n          id={action.id}\n          key={key}\n          to={action.to}\n          onClick={(e) => {\n            e.stopPropagation();\n            return action.onClick?.(e);\n          }}\n          disabled={action.disabled}\n          aria-label={action.ariaLabel}\n          size='sm'\n        >\n          {action.icon}\n        </IconButton>\n      ) : (\n        <Button\n          id={action.id}\n          key={key}\n          aria-label={action.ariaLabel}\n          to={action.to}\n          onClick={(e) => {\n            e.stopPropagation();\n            return action.onClick?.(e);\n          }}\n          disabled={action.disabled}\n          variant={action.variant ?? 'basic'}\n          size='sm'\n          width='auto'\n          prefixIcon={action.prefixIcon}\n          suffixIcon={action.suffixIcon}\n        >\n          {action.label}\n        </Button>\n      );\n\n      return action.tooltip ? (\n        <Tooltip key={key} {...action.tooltipProps} trigger={button}>\n          {action.tooltip}\n        </Tooltip>\n      ) : (\n        button\n      );\n    });\n\n  return (\n    <HStack>\n      {buttons}\n      {menuActions.length > 0 && (\n        <DropdownButton\n          variant='text'\n          width='icon'\n          size='sm'\n          suffixIcon={undefined}\n          style={{ justifySelf: 'flex-end' }}\n          aria-label='More actions'\n          menuProps={{\n            portal: true,\n          }}\n          menuItems={menuActions\n            .filter((action) => !action.hidden)\n            .map((action) => (\n              <DropdownMenu.Item\n                id={action.id ?? action.label}\n                key={action.id ?? action.label}\n                onClick={action.onClick}\n                disabled={action.disabled}\n              >\n                {action.label}\n              </DropdownMenu.Item>\n            ))}\n        >\n          <MoreIcon />\n        </DropdownButton>\n      )}\n    </HStack>\n  );\n};\n\n/**\n * Private component for rendering the heading of a section, both the primary card heading and\n * section headings.\n */\nexport const SectionHeading: FC<{\n  /**\n   * Whether this is the top-level section of the card which has different visual treatment.\n   */\n  isTopSection: boolean;\n\n  /**\n   * Whether this heading's section has content.\n   */\n  sectionHasContent: boolean;\n\n  /**\n   * Whether this heading's section has a footer.\n   */\n  hasFooter: boolean;\n\n  loading: boolean;\n\n  /**\n   * Title text to render in the heading.\n   */\n  title: string;\n\n  /**\n   * Optional sticker to render after the title.\n   */\n  sticker?: ReactElement;\n\n  /**\n   * Optional icon to render before the title text.\n   *\n   * Usage of this icon slot should be avoided if possible to maintain left-text alignement. If\n   * using this icon slot for a section heading use it for all sections.\n   */\n  leftDecorativeIcon?: ReactElement;\n\n  /**\n   * Optional actions to render in the heading.\n   * Only accepts IconButton or Button components with specific prop restrictions.\n   */\n  actions?: (IconAction | TextAction | undefined)[];\n\n  /**\n   * Optional actions to render in the heading in a menu.\n   */\n  menuActions?: (MenuAction | undefined)[];\n\n  /**\n   * Optional custom content to render in the heading in the button row. Prefer setting `actions` or\n   * `menuActions` if possible.\n   */\n  headerActionsRowContent?: ReactNode;\n\n  /**\n   * Callback to toggle collapsed state of the section. Omit to disable collapsing.\n   */\n  toggle?: () => void;\n\n  /**\n   * Whether the section is currently expanded or collapsed.\n   */\n  isExpanded: boolean;\n\n  /**\n   * Optional props to pass to the heading element. Accepts an `as` key to override the\n   * rendered heading level. Defaults to `h2` for the top-level card heading and `h3` for\n   * section headings so that the document heading hierarchy reflects the visual hierarchy.\n   */\n  headingProps?: Omit<ComponentPropsWithoutRef<'span'>, 'color'> & {\n    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  };\n}> = ({\n  isTopSection,\n  sectionHasContent,\n  hasFooter,\n  loading,\n  title,\n  actions = [],\n  menuActions = [],\n  headerActionsRowContent,\n  sticker,\n  leftDecorativeIcon,\n  toggle,\n  isExpanded,\n  headingProps,\n}) => {\n  const renderButtonRow = actions.length > 0 || menuActions.length > 0;\n  const { as: headingAs, ...restHeadingProps } = headingProps ?? {};\n\n  return (\n    <HeadingContainer\n      $isTopSection={isTopSection}\n      $hasFooter={hasFooter}\n      $isExpanded={isExpanded}\n      $divider={isTopSection && isExpanded && sectionHasContent}\n      align='center'\n      justify='space-between'\n      spacing={Spacing[2]}\n    >\n      {loading ? (\n        <CardLoadingShimmer height='24px' width='200px' />\n      ) : (\n        <>\n          {/* https://github.com/adobe/react-spectrum/issues/7444 */}\n          <HeaderButton slot='trigger' isDisabled={!toggle}>\n            <StyledHeading\n              forwardedAs={headingAs ?? (isTopSection ? 'h2' : 'h3')}\n              size='xsm'\n              $isCollapsible={!!toggle}\n              $isTopSection={isTopSection}\n              aria-label={title}\n              {...restHeadingProps}\n            >\n              {leftDecorativeIcon}\n              <TruncatedText>{title}</TruncatedText>\n              {sticker && <StickerContainer>{sticker}</StickerContainer>}\n            </StyledHeading>\n          </HeaderButton>\n          {headerActionsRowContent}\n          {renderButtonRow && (\n            <ButtonRow\n              actions={actions.filter((action) => action != null)}\n              menuActions={menuActions.filter((action) => action != null)}\n            />\n          )}\n          {toggle && (\n            <AccordionContainer $isTopSection={isTopSection} $expanded={isExpanded}>\n              <ChevronDownIcon />\n            </AccordionContainer>\n          )}\n        </>\n      )}\n    </HeadingContainer>\n  );\n};\n","import type { ComponentProps, FC, ReactNode } from 'react';\nimport { Disclosure, DisclosurePanel } from 'react-aria-components';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { SectionHeading } from 'design-system/components/CardV2/SectionHeading';\nimport { LoadingShimmer } from 'design-system/components/LoadingShimmer';\nimport { HStack } from 'design-system/components/Stack';\nimport { Paragraph } from 'design-system/components/Text';\nimport { intersperse } from 'design-system/lib/intersperse';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { Z_INDICES } from 'design-system/lib/zindex';\n\nconst FooterParagraph = styled(Paragraph)`\n  line-height: 16px;\n`;\n\ntype FooterContainerProps = {\n  $divider: boolean;\n};\nconst FooterContainer = styled.div<FooterContainerProps>`\n  ${({ $divider }) =>\n    $divider &&\n    css`\n      border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n    `}\n  padding: ${Spacing[3]} ${Spacing[5]} ${Spacing[2]};\n`;\n\ntype MaybeStickyContainerProps = {\n  $enabled: boolean;\n  $bottom?: boolean;\n};\nconst MaybeStickyContainer = styled.div<MaybeStickyContainerProps>`\n  ${({ $enabled }) =>\n    $enabled &&\n    css`\n      // We are using sticky positioning here to have consistent scrollbar behavior between\n      // different card configurations. Usage of sticky allows us to keep the scroll container at\n      // the top of the card DOM structure regardless of whether the heading or footer is sticky.\n      //\n      // This also afaict helps eliminate the need to carry height values through the card DOM\n      // structure to the content container (and possibly needing to adjust heights for heading and footer).\n      position: sticky;\n      top: 0;\n      background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n      z-index: ${Z_INDICES.sticky};\n    `}\n\n  ${({ $bottom = false }) =>\n    $bottom &&\n    css`\n      top: unset;\n      bottom: 0;\n    `}\n`;\n\ntype StyledDisclosureProps = {\n  $fullHeight: boolean;\n};\nconst StyledDisclosure = styled(Disclosure)<StyledDisclosureProps>`\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  ${({ $fullHeight }) =>\n    $fullHeight &&\n    css`\n      height: 100%;\n    `}\n`;\n\ntype StyledDisclosurePanelProps = {\n  $isTopSection: boolean;\n};\nconst StyledDisclosurePanel = styled(DisclosurePanel)<StyledDisclosurePanelProps>`\n  flex: 1;\n  ${({ $isTopSection }) =>\n    $isTopSection &&\n    css`\n      // Safari does not support hidden='until-found' so react-aria uses display: none instead.\n      // Since react-aria is using display to hide content we need to not set display ourselves.\n      &:not([aria-hidden='true']) {\n        display: flex;\n      }\n    `}\n`;\n\nconst CardLoadingShimmer = styled(LoadingShimmer)`\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n`;\n\ntype SectionContentContainerProps = {\n  $isTopSection: boolean;\n  $hasHeading: boolean;\n  $hasFooter: boolean;\n};\nconst SectionContentContainer = styled.div<SectionContentContainerProps>`\n  ${({ $isTopSection }) =>\n    $isTopSection &&\n    css`\n      padding: ${Spacing[5]};\n      display: flex;\n      flex-direction: column;\n      gap: ${Spacing[5]};\n      flex: 1;\n      /* Prevent grid blowout https://css-tricks.com/preventing-a-grid-blowout/ */\n      min-width: 0;\n    `}\n\n  ${({ $isTopSection, $hasHeading }) =>\n    !$isTopSection &&\n    $hasHeading &&\n    css`\n      padding-top: ${Spacing[3]};\n    `}\n\n    ${({ $isTopSection, $hasFooter }) =>\n      $isTopSection &&\n      !$hasFooter &&\n      css`\n      // We apply 4px of whitespace to the bottom of the card container so that content has a buffer\n      // when being scrolled and still appears inside the card. Here we adjust, subtracting\n      // 4px from the 24px padding.\n      padding-bottom: 20px;\n    `}\n`;\n\n/**\n * Private component for rendering sections of the card, both the primary card section and\n * individual sections.\n */\nexport const Section: FC<{\n  children?: ReactNode;\n\n  /**\n   * Whether this is the top-level section of the card which has different visual treatment.\n   */\n  isTopSection: boolean;\n\n  /**\n   * Available props for the section's heading.\n   */\n  heading?: Pick<\n    ComponentProps<typeof SectionHeading>,\n    | 'title'\n    | 'actions'\n    | 'menuActions'\n    | 'headerActionsRowContent'\n    | 'sticker'\n    | 'leftDecorativeIcon'\n    | 'headingProps'\n  >;\n\n  /**\n   * Optional footer to render at the bottom of the card. Footer content is rendered as a\n   * paragraph with the items separated by a dot.\n   */\n  footer?: ReactNode[];\n\n  /**\n   * Optional arbitrary footer content to render as-is.\n   */\n  footerContent?: ReactNode;\n\n  /**\n   * Whether the section is collapsible.\n   */\n  collapsible?: boolean;\n\n  /**\n   * Whether the section heading and footer are sticky.\n   */\n  sticky?: boolean;\n\n  /**\n   * Whether the section is initially collapsed.\n   */\n  defaultCollapsed?: boolean;\n\n  /**\n   * If true, the section will be rendered in a loading state.\n   */\n  loading?: boolean;\n\n  /**\n   * Set height of the loading state.\n   */\n  loadingProps?: {\n    height?: string;\n  };\n\n  /**\n   * Control display of the empty state.\n   */\n  empty?: boolean;\n\n  /**\n   * Props for the empty state.\n   */\n  emptyProps?: {\n    /**\n     * Empty state message.\n     */\n    message?: string;\n  };\n\n  fullHeight?: boolean;\n}> = ({\n  children,\n  isTopSection,\n  heading,\n  footer,\n  footerContent,\n  loading = false,\n  loadingProps,\n  empty = false,\n  emptyProps,\n  defaultCollapsed = false,\n  collapsible = false,\n  sticky = false,\n  fullHeight = false,\n}) => {\n  let content: ReactNode;\n  if (loading) {\n    content = <CardLoadingShimmer height={loadingProps?.height ?? '200px'} width='100%' />;\n  } else if (empty) {\n    content = <Paragraph>{emptyProps?.message ?? 'No data collected'}</Paragraph>;\n  } else {\n    content = children;\n  }\n\n  const hasFooter = !!(footer || footerContent);\n  const hasContent = !!content;\n\n  // Normally we would have `isDisabled` as well but there's a react-aria-components quirk\n  // that sets `hidden` on the disclosure panel if both `defaultExpanded` and `isDisabled` are true.\n  // https://github.com/adobe/react-spectrum/issues/7444\n  return (\n    <StyledDisclosure defaultExpanded={!defaultCollapsed} $fullHeight={fullHeight}>\n      {({ isExpanded, state }) => (\n        <>\n          {heading && (\n            <MaybeStickyContainer $enabled={sticky}>\n              <SectionHeading\n                isTopSection={isTopSection}\n                hasFooter={hasFooter}\n                sectionHasContent={hasContent}\n                loading={loading}\n                toggle={collapsible ? state.toggle : undefined}\n                isExpanded={isExpanded}\n                {...heading}\n              />\n            </MaybeStickyContainer>\n          )}\n          {hasContent && (\n            <StyledDisclosurePanel $isTopSection={isTopSection}>\n              <SectionContentContainer\n                $isTopSection={isTopSection}\n                $hasHeading={!!heading}\n                $hasFooter={hasFooter}\n              >\n                {content}\n              </SectionContentContainer>\n            </StyledDisclosurePanel>\n          )}\n          {hasFooter && (\n            <MaybeStickyContainer $enabled={sticky} $bottom>\n              <FooterContainer $divider={hasContent}>\n                {loading ? (\n                  <HStack>\n                    <CardLoadingShimmer height='16px' width='120px' />\n                    <CardLoadingShimmer height='16px' width='120px' />\n                  </HStack>\n                ) : (\n                  <>\n                    {footer && (\n                      <FooterParagraph size='sm'>\n                        <HStack spacing={Spacing[1]}>\n                          {intersperse(\n                            footer\n                              .filter((item) => item != null)\n                              .map((item, i) => <span key={`footer-item-${i}`}>{item}</span>),\n                            (i) => (\n                              <span key={i}>•</span>\n                            ),\n                          )}\n                        </HStack>\n                      </FooterParagraph>\n                    )}\n                    {footerContent}\n                  </>\n                )}\n              </FooterContainer>\n            </MaybeStickyContainer>\n          )}\n        </>\n      )}\n    </StyledDisclosure>\n  );\n};\n","import { type ComponentProps, createContext, type FC, type ReactNode, useContext } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\nimport styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { Section } from 'design-system/components/CardV2/Section';\nimport { Paragraph } from 'design-system/components/Text';\nimport ConfigContext from 'design-system/lib/ConfigContext';\nimport { intersperse } from 'design-system/lib/intersperse';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { semanticScrollbar } from 'design-system/mixins/scrollbar';\n\nconst CardContainer = styled.div`\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n  // Height has been tricky here.\n  // inherit seems to work well for both grid and flexbox layouts. In a grid we want this\n  // container to receive the full cell height, In a flexbox we want this container to flex, maintaining\n  // the minimum height for it's content.\n  height: inherit;\n  overflow-y: auto;\n  ${semanticScrollbar}\n\n  box-sizing: border-box;\n  // Small buffer so that content is not scrolling right on the edge of the card.\n  border-bottom: 4px solid ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n`;\n\nconst CardContext = createContext<{ isStacked?: boolean }>({});\n\nconst Divider = styled.hr`\n  margin: 0;\n  border: none;\n  border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\n/**\n * Renders a card section.\n */\nconst PublicSection: FC<\n  Pick<\n    ComponentProps<typeof Section>,\n    | 'children'\n    | 'collapsible'\n    | 'defaultCollapsed'\n    | 'heading'\n    | 'loading'\n    | 'loadingProps'\n    | 'empty'\n    | 'emptyProps'\n  >\n> = (props) => {\n  return <Section isTopSection={false} {...props} />;\n};\n\n/**\n * Render the card in a \"stacked\" mode. Used for rendering multiple cards on top of each other\n * that appear visually as a single card.\n */\nconst Stacked: FC<{\n  children: ReactNode[];\n}> = ({ children }) => {\n  return (\n    <CardContext.Provider value={{ isStacked: true }}>\n      <CardContainer>\n        {intersperse(children, (i) => (\n          <Divider key={i} />\n        ))}\n      </CardContainer>\n    </CardContext.Provider>\n  );\n};\n\nconst DEFAULT_ERROR_MESSAGE = 'Something went wrong loading this card.';\n\n/**\n * Renders a PDS Card.\n *\n * To render sections of the card use `<Card.Section>...</Card.Section>`\n */\nconst Card: FC<\n  {\n    /**\n     * Optional footer to render at the bottom of the card. Footer content is rendered as a\n     * paragraph with the items separated by a dot.\n     */\n    footer?: ReactNode[];\n\n    /**\n     * Optional arbitrary footer content to render as-is.\n     */\n    footerContent?: ReactNode;\n\n    /**\n     * Whether the card heading and footer are sticky.\n     */\n    sticky?: boolean;\n\n    /**\n     * Force the card to render in an errored state. Errors bubbling up from children will also\n     * render the errored state.\n     */\n    errored?: boolean;\n\n    /**\n     * Props for the errored state.\n     */\n    erroredProps?: {\n      /**\n       * Message to render in the errored state.\n       */\n      message?: string;\n      /**\n       * Callback to handle errors. Note this callback is only called when the error is bubbled up\n       * from children, not when `errored` is set to true.\n       */\n      onError?: (error: Error) => void;\n    };\n\n    containerProps?: ComponentProps<typeof CardContainer>;\n\n    /**\n     * Whether the card should render its content with 100% height. This is a bit of a hack for cards\n     * that want full control of their content and don't use sections.\n     */\n    fullHeight?: boolean;\n  } & ComponentProps<typeof PublicSection>\n> = ({ children, errored, erroredProps, containerProps, sticky = true, ...sectionProps }) => {\n  const { isStacked = false } = useContext(CardContext);\n  const { captureException } = useContext(ConfigContext);\n\n  const errorFallback = (\n    <Section isTopSection {...sectionProps}>\n      <Paragraph>{erroredProps?.message ?? DEFAULT_ERROR_MESSAGE}</Paragraph>\n    </Section>\n  );\n\n  const section = (\n    <Section isTopSection sticky={sticky} {...sectionProps}>\n      {children}\n    </Section>\n  );\n\n  return (\n    <ErrorBoundary\n      fallback={\n        isStacked ? (\n          errorFallback\n        ) : (\n          <CardContainer {...containerProps}>{errorFallback}</CardContainer>\n        )\n      }\n      onError={erroredProps?.onError ?? ((error) => captureException(error))}\n    >\n      {isStacked ? (\n        <>{errored ? <>{errorFallback}</> : <>{section}</>}</>\n      ) : (\n        <CardContainer {...containerProps}>\n          {errored ? <>{errorFallback}</> : <>{section}</>}\n        </CardContainer>\n      )}\n    </ErrorBoundary>\n  );\n};\n\nexport default Object.assign(Card, {\n  Section: PublicSection,\n  Stacked: Stacked,\n});\n"],"mappings":"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"}
+{"version":3,"file":"CardV2-Cq4QODeE.mjs","names":["CardLoadingShimmer","Heading","Button","DropdownMenu"],"sources":["../components/CardV2/SectionHeading.tsx","../components/CardV2/Section.tsx","../components/CardV2/Card.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { ChevronDownIcon, MoreIcon } from '@persona/icons';\nimport Button, { IconButton } from 'design-system/components/Button';\nimport DropdownButton from 'design-system/components/DropdownButton';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport { LoadingShimmer } from 'design-system/components/LoadingShimmer';\nimport { HStack } from 'design-system/components/Stack';\nimport { Heading } from 'design-system/components/Text';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { HeadlessAriaButton } from 'design-system/lib/HeadlessAriaButton';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { TruncatedText } from 'design-system/lib/TruncatedText';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport type { HeadingSize } from 'design-system/mixins/text';\nimport type { IconAction, MenuAction, TextAction } from 'design-system/types/Action';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\n/**\n * Distance from the top of a card to the underside of an expanded top-section heading: the\n * `Spacing[4]` padding above and below a 24px title line, plus the divider. Sticky content inside\n * the card pins here so the heading's divider stays the only line between them.\n */\nexport const CARD_HEADING_STICKY_OFFSET = `calc(${Spacing[9]} + 1px)`;\n\nconst CardLoadingShimmer = styled(LoadingShimmer)`\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n`;\n\nconst StickerContainer = styled.div`\n  display: flex;\n  max-width: 180px;\n`;\n\ntype AccordionContainerProps = {\n  $isTopSection: boolean;\n  $expanded: boolean;\n};\nconst AccordionContainer = styled.div<AccordionContainerProps>`\n  transition: opacity ${TransitionDuration.Faster};\n  position: absolute;\n  opacity: 0;\n\n  height: 12px;\n  width: 12px;\n  display: flex;\n  align-items: center;\n  /* Because of padding in the top section heading we need to offset differently. */\n  /* We want a 12px icon to be off-center in 24px padding, 4px on the right and 8px on the left */\n  left: ${({ $isTopSection }) => ($isTopSection ? '8px' : '-16px')};\n  /* center the icon vertically */\n  top: calc(50% - 6px);\n\n  border-radius: 1px;\n\n  & svg {\n    transition: transform ${TransitionDuration.Faster} ease-out;\n    transform: rotate(${({ $expanded }) => ($expanded ? '0' : '-90deg')});\n  }\n`;\n\nconst HeaderButton = styled(HeadlessAriaButton)`\n  min-width: 0;\n  flex: 1;\n\n  &:hover ~ ${AccordionContainer} {\n    opacity: 1;\n  }\n\n  &:focus-visible ~ ${AccordionContainer} {\n    opacity: 1;\n    ${focusStyle}\n  }\n`;\n\ntype HeadingContainerProps = {\n  $isTopSection: boolean;\n  $divider: boolean;\n  $hasFooter: boolean;\n  $isExpanded: boolean;\n};\nconst HeadingContainer = styled(HStack)<HeadingContainerProps>`\n  position: relative;\n\n  ${({ $isTopSection }) =>\n    $isTopSection &&\n    css`\n      padding: ${Spacing[4]} ${Spacing[5]};\n    `}\n  ${({ $divider }) =>\n    $divider &&\n    css`\n      border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n    `}\n  ${({ $isTopSection, $hasFooter, $isExpanded }) =>\n    $isTopSection &&\n    !$hasFooter &&\n    !$isExpanded &&\n    css`\n      // We apply 4px of whitespace to the bottom of the card container so that content has a buffer\n      // when being scrolled and still appears inside the card. Here we adjust, subtracting\n      // 4px from the 16px padding.\n      padding-bottom: ${Spacing[3]};\n    `}\n`;\n\ntype StyledHeadingProps = {\n  $isCollapsible: boolean;\n  $isTopSection: boolean;\n  size: HeadingSize;\n};\nconst StyledHeading = styled(Heading)<StyledHeadingProps>`\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n  line-height: 24px; // We want an adjusted line-height to hit the target header size.\n  overflow: hidden;\n\n  ${({ $isCollapsible }) => $isCollapsible && 'cursor: pointer;'}\n  ${({ $isTopSection }) =>\n    !$isTopSection &&\n    css`\n      ${Typography.TextLargeBold};\n    `}\n`;\n\nconst isIconAction = (action: IconAction | TextAction): action is IconAction => 'icon' in action;\n\nconst ButtonRow: FC<{\n  actions: (IconAction | TextAction)[];\n  menuActions: MenuAction[];\n}> = ({ actions, menuActions }) => {\n  const buttons = actions\n    .filter((action) => !action.hidden)\n    .map((action, i) => {\n      const key = isIconAction(action)\n        ? (action.id ?? action.ariaLabel ?? `action-${i}`)\n        : (action.id ?? action.label ?? `action-${i}`);\n\n      const button = isIconAction(action) ? (\n        <IconButton\n          id={action.id}\n          key={key}\n          to={action.to}\n          onClick={(e) => {\n            e.stopPropagation();\n            return action.onClick?.(e);\n          }}\n          disabled={action.disabled}\n          aria-label={action.ariaLabel}\n          size='sm'\n        >\n          {action.icon}\n        </IconButton>\n      ) : (\n        <Button\n          id={action.id}\n          key={key}\n          aria-label={action.ariaLabel}\n          to={action.to}\n          onClick={(e) => {\n            e.stopPropagation();\n            return action.onClick?.(e);\n          }}\n          disabled={action.disabled}\n          variant={action.variant ?? 'basic'}\n          size='sm'\n          width='auto'\n          prefixIcon={action.prefixIcon}\n          suffixIcon={action.suffixIcon}\n        >\n          {action.label}\n        </Button>\n      );\n\n      return action.tooltip ? (\n        <Tooltip key={key} {...action.tooltipProps} trigger={button}>\n          {action.tooltip}\n        </Tooltip>\n      ) : (\n        button\n      );\n    });\n\n  return (\n    <HStack>\n      {buttons}\n      {menuActions.length > 0 && (\n        <DropdownButton\n          variant='text'\n          width='icon'\n          size='sm'\n          suffixIcon={undefined}\n          style={{ justifySelf: 'flex-end' }}\n          aria-label='More actions'\n          menuProps={{\n            portal: true,\n          }}\n          menuItems={menuActions\n            .filter((action) => !action.hidden)\n            .map((action) => (\n              <DropdownMenu.Item\n                id={action.id ?? action.label}\n                key={action.id ?? action.label}\n                onClick={action.onClick}\n                disabled={action.disabled}\n              >\n                {action.label}\n              </DropdownMenu.Item>\n            ))}\n        >\n          <MoreIcon />\n        </DropdownButton>\n      )}\n    </HStack>\n  );\n};\n\n/**\n * Private component for rendering the heading of a section, both the primary card heading and\n * section headings.\n */\nexport const SectionHeading: FC<{\n  /**\n   * Whether this is the top-level section of the card which has different visual treatment.\n   */\n  isTopSection: boolean;\n\n  /**\n   * Whether this heading's section has content.\n   */\n  sectionHasContent: boolean;\n\n  /**\n   * Whether this heading's section has a footer.\n   */\n  hasFooter: boolean;\n\n  loading: boolean;\n\n  /**\n   * Title text to render in the heading.\n   */\n  title: string;\n\n  /**\n   * Optional sticker to render after the title.\n   */\n  sticker?: ReactElement;\n\n  /**\n   * Optional icon to render before the title text.\n   *\n   * Usage of this icon slot should be avoided if possible to maintain left-text alignement. If\n   * using this icon slot for a section heading use it for all sections.\n   */\n  leftDecorativeIcon?: ReactElement;\n\n  /**\n   * Optional actions to render in the heading.\n   * Only accepts IconButton or Button components with specific prop restrictions.\n   */\n  actions?: (IconAction | TextAction | undefined)[];\n\n  /**\n   * Optional actions to render in the heading in a menu.\n   */\n  menuActions?: (MenuAction | undefined)[];\n\n  /**\n   * Optional custom content to render in the heading in the button row. Prefer setting `actions` or\n   * `menuActions` if possible.\n   */\n  headerActionsRowContent?: ReactNode;\n\n  /**\n   * Callback to toggle collapsed state of the section. Omit to disable collapsing.\n   */\n  toggle?: () => void;\n\n  /**\n   * Whether the section is currently expanded or collapsed.\n   */\n  isExpanded: boolean;\n\n  /**\n   * Optional props to pass to the heading element. Accepts an `as` key to override the\n   * rendered heading level. Defaults to `h2` for the top-level card heading and `h3` for\n   * section headings so that the document heading hierarchy reflects the visual hierarchy.\n   */\n  headingProps?: Omit<ComponentPropsWithoutRef<'span'>, 'color'> & {\n    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  };\n}> = ({\n  isTopSection,\n  sectionHasContent,\n  hasFooter,\n  loading,\n  title,\n  actions = [],\n  menuActions = [],\n  headerActionsRowContent,\n  sticker,\n  leftDecorativeIcon,\n  toggle,\n  isExpanded,\n  headingProps,\n}) => {\n  const renderButtonRow = actions.length > 0 || menuActions.length > 0;\n  const { as: headingAs, ...restHeadingProps } = headingProps ?? {};\n\n  return (\n    <HeadingContainer\n      $isTopSection={isTopSection}\n      $hasFooter={hasFooter}\n      $isExpanded={isExpanded}\n      $divider={isTopSection && isExpanded && sectionHasContent}\n      align='center'\n      justify='space-between'\n      spacing={Spacing[2]}\n    >\n      {loading ? (\n        <CardLoadingShimmer height='24px' width='200px' />\n      ) : (\n        <>\n          {/* https://github.com/adobe/react-spectrum/issues/7444 */}\n          <HeaderButton slot='trigger' isDisabled={!toggle}>\n            <StyledHeading\n              forwardedAs={headingAs ?? (isTopSection ? 'h2' : 'h3')}\n              size='xsm'\n              $isCollapsible={!!toggle}\n              $isTopSection={isTopSection}\n              aria-label={title}\n              {...restHeadingProps}\n            >\n              {leftDecorativeIcon}\n              <TruncatedText>{title}</TruncatedText>\n              {sticker && <StickerContainer>{sticker}</StickerContainer>}\n            </StyledHeading>\n          </HeaderButton>\n          {headerActionsRowContent}\n          {renderButtonRow && (\n            <ButtonRow\n              actions={actions.filter((action) => action != null)}\n              menuActions={menuActions.filter((action) => action != null)}\n            />\n          )}\n          {toggle && (\n            <AccordionContainer $isTopSection={isTopSection} $expanded={isExpanded}>\n              <ChevronDownIcon />\n            </AccordionContainer>\n          )}\n        </>\n      )}\n    </HeadingContainer>\n  );\n};\n","import type { ComponentProps, FC, ReactNode } from 'react';\nimport { Disclosure, DisclosurePanel } from 'react-aria-components';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { SectionHeading } from 'design-system/components/CardV2/SectionHeading';\nimport { LoadingShimmer } from 'design-system/components/LoadingShimmer';\nimport { HStack } from 'design-system/components/Stack';\nimport { Paragraph } from 'design-system/components/Text';\nimport { intersperse } from 'design-system/lib/intersperse';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { Z_INDICES } from 'design-system/lib/zindex';\n\nconst FooterParagraph = styled(Paragraph)`\n  line-height: 16px;\n`;\n\ntype FooterContainerProps = {\n  $divider: boolean;\n};\nconst FooterContainer = styled.div<FooterContainerProps>`\n  ${({ $divider }) =>\n    $divider &&\n    css`\n      border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n    `}\n  padding: ${Spacing[3]} ${Spacing[5]} ${Spacing[2]};\n`;\n\ntype MaybeStickyContainerProps = {\n  $enabled: boolean;\n  $bottom?: boolean;\n};\nconst MaybeStickyContainer = styled.div<MaybeStickyContainerProps>`\n  ${({ $enabled }) =>\n    $enabled &&\n    css`\n      // We are using sticky positioning here to have consistent scrollbar behavior between\n      // different card configurations. Usage of sticky allows us to keep the scroll container at\n      // the top of the card DOM structure regardless of whether the heading or footer is sticky.\n      //\n      // This also afaict helps eliminate the need to carry height values through the card DOM\n      // structure to the content container (and possibly needing to adjust heights for heading and footer).\n      position: sticky;\n      top: 0;\n      background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n      z-index: ${Z_INDICES.sticky};\n    `}\n\n  ${({ $bottom = false }) =>\n    $bottom &&\n    css`\n      top: unset;\n      bottom: 0;\n    `}\n`;\n\ntype StyledDisclosureProps = {\n  $fullHeight: boolean;\n};\nconst StyledDisclosure = styled(Disclosure)<StyledDisclosureProps>`\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  ${({ $fullHeight }) =>\n    $fullHeight &&\n    css`\n      height: 100%;\n    `}\n`;\n\ntype StyledDisclosurePanelProps = {\n  $isTopSection: boolean;\n};\nconst StyledDisclosurePanel = styled(DisclosurePanel)<StyledDisclosurePanelProps>`\n  flex: 1;\n  ${({ $isTopSection }) =>\n    $isTopSection &&\n    css`\n      // Safari does not support hidden='until-found' so react-aria uses display: none instead.\n      // Since react-aria is using display to hide content we need to not set display ourselves.\n      &:not([aria-hidden='true']) {\n        display: flex;\n      }\n    `}\n`;\n\nconst CardLoadingShimmer = styled(LoadingShimmer)`\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n`;\n\ntype SectionContentContainerProps = {\n  $isTopSection: boolean;\n  $hasHeading: boolean;\n  $hasFooter: boolean;\n};\nconst SectionContentContainer = styled.div<SectionContentContainerProps>`\n  ${({ $isTopSection }) =>\n    $isTopSection &&\n    css`\n      padding: ${Spacing[5]};\n      display: flex;\n      flex-direction: column;\n      gap: ${Spacing[5]};\n      flex: 1;\n      /* Prevent grid blowout https://css-tricks.com/preventing-a-grid-blowout/ */\n      min-width: 0;\n    `}\n\n  ${({ $isTopSection, $hasHeading }) =>\n    !$isTopSection &&\n    $hasHeading &&\n    css`\n      padding-top: ${Spacing[3]};\n    `}\n\n    ${({ $isTopSection, $hasFooter }) =>\n      $isTopSection &&\n      !$hasFooter &&\n      css`\n      // We apply 4px of whitespace to the bottom of the card container so that content has a buffer\n      // when being scrolled and still appears inside the card. Here we adjust, subtracting\n      // 4px from the 24px padding.\n      padding-bottom: 20px;\n    `}\n`;\n\n/**\n * Private component for rendering sections of the card, both the primary card section and\n * individual sections.\n */\nexport const Section: FC<{\n  children?: ReactNode;\n\n  /**\n   * Whether this is the top-level section of the card which has different visual treatment.\n   */\n  isTopSection: boolean;\n\n  /**\n   * Available props for the section's heading.\n   */\n  heading?: Pick<\n    ComponentProps<typeof SectionHeading>,\n    | 'title'\n    | 'actions'\n    | 'menuActions'\n    | 'headerActionsRowContent'\n    | 'sticker'\n    | 'leftDecorativeIcon'\n    | 'headingProps'\n  >;\n\n  /**\n   * Optional footer to render at the bottom of the card. Footer content is rendered as a\n   * paragraph with the items separated by a dot.\n   */\n  footer?: ReactNode[];\n\n  /**\n   * Optional arbitrary footer content to render as-is.\n   */\n  footerContent?: ReactNode;\n\n  /**\n   * Whether the section is collapsible.\n   */\n  collapsible?: boolean;\n\n  /**\n   * Whether the section heading and footer are sticky.\n   */\n  sticky?: boolean;\n\n  /**\n   * Whether the section is initially collapsed.\n   */\n  defaultCollapsed?: boolean;\n\n  /**\n   * If true, the section will be rendered in a loading state.\n   */\n  loading?: boolean;\n\n  /**\n   * Set height of the loading state.\n   */\n  loadingProps?: {\n    height?: string;\n  };\n\n  /**\n   * Control display of the empty state.\n   */\n  empty?: boolean;\n\n  /**\n   * Props for the empty state.\n   */\n  emptyProps?: {\n    /**\n     * Empty state message.\n     */\n    message?: string;\n  };\n\n  fullHeight?: boolean;\n}> = ({\n  children,\n  isTopSection,\n  heading,\n  footer,\n  footerContent,\n  loading = false,\n  loadingProps,\n  empty = false,\n  emptyProps,\n  defaultCollapsed = false,\n  collapsible = false,\n  sticky = false,\n  fullHeight = false,\n}) => {\n  let content: ReactNode;\n  if (loading) {\n    content = <CardLoadingShimmer height={loadingProps?.height ?? '200px'} width='100%' />;\n  } else if (empty) {\n    content = <Paragraph>{emptyProps?.message ?? 'No data collected'}</Paragraph>;\n  } else {\n    content = children;\n  }\n\n  const hasFooter = !!(footer || footerContent);\n  const hasContent = !!content;\n\n  // Normally we would have `isDisabled` as well but there's a react-aria-components quirk\n  // that sets `hidden` on the disclosure panel if both `defaultExpanded` and `isDisabled` are true.\n  // https://github.com/adobe/react-spectrum/issues/7444\n  return (\n    <StyledDisclosure defaultExpanded={!defaultCollapsed} $fullHeight={fullHeight}>\n      {({ isExpanded, state }) => (\n        <>\n          {heading && (\n            <MaybeStickyContainer $enabled={sticky}>\n              <SectionHeading\n                isTopSection={isTopSection}\n                hasFooter={hasFooter}\n                sectionHasContent={hasContent}\n                loading={loading}\n                toggle={collapsible ? state.toggle : undefined}\n                isExpanded={isExpanded}\n                {...heading}\n              />\n            </MaybeStickyContainer>\n          )}\n          {hasContent && (\n            <StyledDisclosurePanel $isTopSection={isTopSection}>\n              <SectionContentContainer\n                $isTopSection={isTopSection}\n                $hasHeading={!!heading}\n                $hasFooter={hasFooter}\n              >\n                {content}\n              </SectionContentContainer>\n            </StyledDisclosurePanel>\n          )}\n          {hasFooter && (\n            <MaybeStickyContainer $enabled={sticky} $bottom>\n              <FooterContainer $divider={hasContent}>\n                {loading ? (\n                  <HStack>\n                    <CardLoadingShimmer height='16px' width='120px' />\n                    <CardLoadingShimmer height='16px' width='120px' />\n                  </HStack>\n                ) : (\n                  <>\n                    {footer && (\n                      <FooterParagraph size='sm'>\n                        <HStack spacing={Spacing[1]}>\n                          {intersperse(\n                            footer\n                              .filter((item) => item != null)\n                              .map((item, i) => <span key={`footer-item-${i}`}>{item}</span>),\n                            (i) => (\n                              <span key={i}>•</span>\n                            ),\n                          )}\n                        </HStack>\n                      </FooterParagraph>\n                    )}\n                    {footerContent}\n                  </>\n                )}\n              </FooterContainer>\n            </MaybeStickyContainer>\n          )}\n        </>\n      )}\n    </StyledDisclosure>\n  );\n};\n","import { type ComponentProps, createContext, type FC, type ReactNode, useContext } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\nimport styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { Section } from 'design-system/components/CardV2/Section';\nimport { Paragraph } from 'design-system/components/Text';\nimport ConfigContext from 'design-system/lib/ConfigContext';\nimport { intersperse } from 'design-system/lib/intersperse';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { semanticScrollbar } from 'design-system/mixins/scrollbar';\n\nconst CardContainer = styled.div`\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n  // Height has been tricky here.\n  // inherit seems to work well for both grid and flexbox layouts. In a grid we want this\n  // container to receive the full cell height, In a flexbox we want this container to flex, maintaining\n  // the minimum height for it's content.\n  height: inherit;\n  overflow-y: auto;\n  ${semanticScrollbar}\n\n  box-sizing: border-box;\n  // Small buffer so that content is not scrolling right on the edge of the card.\n  border-bottom: 4px solid ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n`;\n\nconst CardContext = createContext<{ isStacked?: boolean }>({});\n\nconst Divider = styled.hr`\n  margin: 0;\n  border: none;\n  border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\n/**\n * Renders a card section.\n */\nconst PublicSection: FC<\n  Pick<\n    ComponentProps<typeof Section>,\n    | 'children'\n    | 'collapsible'\n    | 'defaultCollapsed'\n    | 'heading'\n    | 'loading'\n    | 'loadingProps'\n    | 'empty'\n    | 'emptyProps'\n  >\n> = (props) => {\n  return <Section isTopSection={false} {...props} />;\n};\n\n/**\n * Render the card in a \"stacked\" mode. Used for rendering multiple cards on top of each other\n * that appear visually as a single card.\n */\nconst Stacked: FC<{\n  children: ReactNode[];\n}> = ({ children }) => {\n  return (\n    <CardContext.Provider value={{ isStacked: true }}>\n      <CardContainer>\n        {intersperse(children, (i) => (\n          <Divider key={i} />\n        ))}\n      </CardContainer>\n    </CardContext.Provider>\n  );\n};\n\nconst DEFAULT_ERROR_MESSAGE = 'Something went wrong loading this card.';\n\n/**\n * Renders a PDS Card.\n *\n * To render sections of the card use `<Card.Section>...</Card.Section>`\n */\nconst Card: FC<\n  {\n    /**\n     * Optional footer to render at the bottom of the card. Footer content is rendered as a\n     * paragraph with the items separated by a dot.\n     */\n    footer?: ReactNode[];\n\n    /**\n     * Optional arbitrary footer content to render as-is.\n     */\n    footerContent?: ReactNode;\n\n    /**\n     * Whether the card heading and footer are sticky.\n     */\n    sticky?: boolean;\n\n    /**\n     * Force the card to render in an errored state. Errors bubbling up from children will also\n     * render the errored state.\n     */\n    errored?: boolean;\n\n    /**\n     * Props for the errored state.\n     */\n    erroredProps?: {\n      /**\n       * Message to render in the errored state.\n       */\n      message?: string;\n      /**\n       * Callback to handle errors. Note this callback is only called when the error is bubbled up\n       * from children, not when `errored` is set to true.\n       */\n      onError?: (error: Error) => void;\n    };\n\n    containerProps?: ComponentProps<typeof CardContainer>;\n\n    /**\n     * Whether the card should render its content with 100% height. This is a bit of a hack for cards\n     * that want full control of their content and don't use sections.\n     */\n    fullHeight?: boolean;\n  } & ComponentProps<typeof PublicSection>\n> = ({ children, errored, erroredProps, containerProps, sticky = true, ...sectionProps }) => {\n  const { isStacked = false } = useContext(CardContext);\n  const { captureException } = useContext(ConfigContext);\n\n  const errorFallback = (\n    <Section isTopSection {...sectionProps}>\n      <Paragraph>{erroredProps?.message ?? DEFAULT_ERROR_MESSAGE}</Paragraph>\n    </Section>\n  );\n\n  const section = (\n    <Section isTopSection sticky={sticky} {...sectionProps}>\n      {children}\n    </Section>\n  );\n\n  return (\n    <ErrorBoundary\n      fallback={\n        isStacked ? (\n          errorFallback\n        ) : (\n          <CardContainer {...containerProps}>{errorFallback}</CardContainer>\n        )\n      }\n      onError={erroredProps?.onError ?? ((error) => captureException(error))}\n    >\n      {isStacked ? (\n        <>{errored ? <>{errorFallback}</> : <>{section}</>}</>\n      ) : (\n        <CardContainer {...containerProps}>\n          {errored ? <>{errorFallback}</> : <>{section}</>}\n        </CardContainer>\n      )}\n    </ErrorBoundary>\n  );\n};\n\nexport default Object.assign(Card, {\n  Section: PublicSection,\n  Stacked: Stacked,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAa,6BAA6B,QAAQ,QAAQ,GAAG;AAE7D,MAAMA,uBAAqB,OAAO,eAAe;oBAC7B,EAAE,YAAY,MAAM,KAAK,aAAa;;AAG1D,MAAM,mBAAmB,OAAO,GAAG;;;;AASnC,MAAM,qBAAqB,OAAO,GAA4B;gCACZ;;;;;;;;;;WAUvC,EAAE,oBAAqB,gBAAgB,QAAQ,QAAS;;;;;;;oCAOb;yBAC7B,EAAE,gBAAiB,YAAY,MAAM,SAAU;;;AAIxE,MAAM,eAAe,OAAO,mBAAmB;;;;cAIjC,mBAAmB;;;;sBAIX,mBAAmB;;MAEnC,WAAW;;;AAUjB,MAAM,mBAAmB,OAAO,OAAO;;;KAGlC,EAAE,oBACH,iBACA,GAAG;iBACU,QAAQ,GAAG,GAAG,QAAQ,GAAG;MACpC;KACD,EAAE,eACH,YACA,GAAG;kCAC2B,EAAE,YAAY,cAAc,OAAO,gBAAgB,MAAM,cAAc,CAAC;MACpG;KACD,EAAE,eAAe,YAAY,kBAC9B,iBACA,CAAC,cACD,CAAC,eACD,GAAG;;;;wBAIiB,QAAQ,GAAG;MAC7B;;AAQN,MAAM,gBAAgB,OAAOC,UAAQ;;;;SAI5B,QAAQ,GAAG;;;;KAIf,EAAE,qBAAqB,kBAAkB,mBAAmB;KAC5D,EAAE,oBACH,CAAC,iBACD,GAAG;QACC,WAAW,cAAc;MAC3B;;AAGN,MAAM,gBAAgB,WAA0D,UAAU;AAE1F,MAAM,aAGA,EAAE,SAAS,kBAAkB;AAqDjC,QACE,qBAAC,QAAD,EAAA,UAAA,CArDc,QACb,QAAQ,WAAW,CAAC,OAAO,OAAO,CAClC,KAAK,QAAQ,MAAM;EAClB,MAAM,MAAM,aAAa,OAAO,GAC3B,OAAO,MAAM,OAAO,aAAa,UAAU,MAC3C,OAAO,MAAM,OAAO,SAAS,UAAU;EAE5C,MAAM,SAAS,aAAa,OAAO,GACjC,oBAAC,YAAD;GACE,IAAI,OAAO;GAEX,IAAI,OAAO;GACX,UAAU,MAAM;AACd,MAAE,iBAAiB;AACnB,WAAO,OAAO,UAAU,EAAE;;GAE5B,UAAU,OAAO;GACjB,cAAY,OAAO;GACnB,MAAK;aAEJ,OAAO;GACG,EAXN,IAWM,GAEb,oBAACC,UAAD;GACE,IAAI,OAAO;GAEX,cAAY,OAAO;GACnB,IAAI,OAAO;GACX,UAAU,MAAM;AACd,MAAE,iBAAiB;AACnB,WAAO,OAAO,UAAU,EAAE;;GAE5B,UAAU,OAAO;GACjB,SAAS,OAAO,WAAW;GAC3B,MAAK;GACL,OAAM;GACN,YAAY,OAAO;GACnB,YAAY,OAAO;aAElB,OAAO;GACD,EAfF,IAeE;AAGX,SAAO,OAAO,UACZ,oBAAC,SAAD;GAAmB,GAAI,OAAO;GAAc,SAAS;aAClD,OAAO;GACA,EAFI,IAEJ,GAEV;GAMM,EACP,YAAY,SAAS,KACpB,oBAAC,gBAAD;EACE,SAAQ;EACR,OAAM;EACN,MAAK;EACL,YAAY,KAAA;EACZ,OAAO,EAAE,aAAa,YAAY;EAClC,cAAW;EACX,WAAW,EACT,QAAQ,MACT;EACD,WAAW,YACR,QAAQ,WAAW,CAAC,OAAO,OAAO,CAClC,KAAK,WACJ,oBAACC,qBAAa,MAAd;GACE,IAAI,OAAO,MAAM,OAAO;GAExB,SAAS,OAAO;GAChB,UAAU,OAAO;aAEhB,OAAO;GACU,EALb,OAAO,MAAM,OAAO,MAKP,CACpB;YAEJ,oBAAC,UAAD,EAAY,CAAA;EACG,CAAA,CAEZ,EAAA,CAAA;;;;;;AAQb,MAAa,kBAuEP,EACJ,cACA,mBACA,WACA,SACA,OACA,UAAU,EAAE,EACZ,cAAc,EAAE,EAChB,yBACA,SACA,oBACA,QACA,YACA,mBACI;CACJ,MAAM,kBAAkB,QAAQ,SAAS,KAAK,YAAY,SAAS;CACnE,MAAM,EAAE,IAAI,WAAW,GAAG,qBAAqB,gBAAgB,EAAE;AAEjE,QACE,oBAAC,kBAAD;EACE,eAAe;EACf,YAAY;EACZ,aAAa;EACb,UAAU,gBAAgB,cAAc;EACxC,OAAM;EACN,SAAQ;EACR,SAAS,QAAQ;YAEhB,UACC,oBAACH,sBAAD;GAAoB,QAAO;GAAO,OAAM;GAAU,CAAA,GAElD,qBAAA,YAAA,EAAA,UAAA;GAEE,oBAAC,cAAD;IAAc,MAAK;IAAU,YAAY,CAAC;cACxC,qBAAC,eAAD;KACE,aAAa,cAAc,eAAe,OAAO;KACjD,MAAK;KACL,gBAAgB,CAAC,CAAC;KAClB,eAAe;KACf,cAAY;KACZ,GAAI;eANN;MAQG;MACD,oBAAC,eAAD,EAAA,UAAgB,OAAsB,CAAA;MACrC,WAAW,oBAAC,kBAAD,EAAA,UAAmB,SAA2B,CAAA;MAC5C;;IACH,CAAA;GACd;GACA,mBACC,oBAAC,WAAD;IACE,SAAS,QAAQ,QAAQ,WAAW,UAAU,KAAK;IACnD,aAAa,YAAY,QAAQ,WAAW,UAAU,KAAK;IAC3D,CAAA;GAEH,UACC,oBAAC,oBAAD;IAAoB,eAAe;IAAc,WAAW;cAC1D,oBAAC,iBAAD,EAAmB,CAAA;IACA,CAAA;GAEtB,EAAA,CAAA;EAEY,CAAA;;;;ACxVvB,MAAM,kBAAkB,OAAO,UAAU;;;AAOzC,MAAM,kBAAkB,OAAO,GAAyB;KACnD,EAAE,eACH,YACA,GAAG;+BACwB,EAAE,YAAY,cAAc,OAAO,gBAAgB,MAAM,cAAc,CAAC;MACjG;aACO,QAAQ,GAAG,GAAG,QAAQ,GAAG,GAAG,QAAQ,GAAG;;AAOpD,MAAM,uBAAuB,OAAO,GAA8B;KAC7D,EAAE,eACH,YACA,GAAG;;;;;;;;;2BASoB,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,MAAM,WAAW,QAAQ,CAAC;iBAC/F,UAAU,OAAO;MAC5B;;KAED,EAAE,UAAU,YACb,WACA,GAAG;;;MAGD;;AAMN,MAAM,mBAAmB,OAAO,WAAW;;;;KAItC,EAAE,kBACH,eACA,GAAG;;MAED;;AAMN,MAAM,wBAAwB,OAAO,gBAAgB;;KAEhD,EAAE,oBACH,iBACA,GAAG;;;;;;MAMD;;AAGN,MAAM,qBAAqB,OAAO,eAAe;oBAC7B,EAAE,YAAY,MAAM,KAAK,aAAa;;AAQ1D,MAAM,0BAA0B,OAAO,GAAiC;KACnE,EAAE,oBACH,iBACA,GAAG;iBACU,QAAQ,GAAG;;;aAGf,QAAQ,GAAG;;;;MAIlB;;KAED,EAAE,eAAe,kBAClB,CAAC,iBACD,eACA,GAAG;qBACc,QAAQ,GAAG;MAC1B;;OAEC,EAAE,eAAe,iBAClB,iBACA,CAAC,cACD,GAAG;;;;;MAKH;;;;;;AAON,MAAa,WA4EP,EACJ,UACA,cACA,SACA,QACA,eACA,UAAU,OACV,cACA,QAAQ,OACR,YACA,mBAAmB,OACnB,cAAc,OACd,SAAS,OACT,aAAa,YACT;CACJ,IAAI;AACJ,KAAI,QACF,WAAU,oBAAC,oBAAD;EAAoB,QAAQ,cAAc,UAAU;EAAS,OAAM;EAAS,CAAA;UAC7E,MACT,WAAU,oBAAC,WAAD,EAAA,UAAY,YAAY,WAAW,qBAAgC,CAAA;KAE7E,WAAU;CAGZ,MAAM,YAAY,CAAC,EAAE,UAAU;CAC/B,MAAM,aAAa,CAAC,CAAC;AAKrB,QACE,oBAAC,kBAAD;EAAkB,iBAAiB,CAAC;EAAkB,aAAa;aAC/D,EAAE,YAAY,YACd,qBAAA,YAAA,EAAA,UAAA;GACG,WACC,oBAAC,sBAAD;IAAsB,UAAU;cAC9B,oBAAC,gBAAD;KACgB;KACH;KACX,mBAAmB;KACV;KACT,QAAQ,cAAc,MAAM,SAAS,KAAA;KACzB;KACZ,GAAI;KACJ,CAAA;IACmB,CAAA;GAExB,cACC,oBAAC,uBAAD;IAAuB,eAAe;cACpC,oBAAC,yBAAD;KACE,eAAe;KACf,aAAa,CAAC,CAAC;KACf,YAAY;eAEX;KACuB,CAAA;IACJ,CAAA;GAEzB,aACC,oBAAC,sBAAD;IAAsB,UAAU;IAAQ,SAAA;cACtC,oBAAC,iBAAD;KAAiB,UAAU;eACxB,UACC,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,oBAAD;MAAoB,QAAO;MAAO,OAAM;MAAU,CAAA,EAClD,oBAAC,oBAAD;MAAoB,QAAO;MAAO,OAAM;MAAU,CAAA,CAC3C,EAAA,CAAA,GAET,qBAAA,YAAA,EAAA,UAAA,CACG,UACC,oBAAC,iBAAD;MAAiB,MAAK;gBACpB,oBAAC,QAAD;OAAQ,SAAS,QAAQ;iBACtB,YACC,OACG,QAAQ,SAAS,QAAQ,KAAK,CAC9B,KAAK,MAAM,MAAM,oBAAC,QAAD,EAAA,UAAgC,MAAY,EAAjC,eAAe,IAAkB,CAAC,GAChE,MACC,oBAAC,QAAD,EAAA,UAAc,KAAQ,EAAX,EAAW,CAEzB;OACM,CAAA;MACO,CAAA,EAEnB,cACA,EAAA,CAAA;KAEW,CAAA;IACG,CAAA;GAExB,EAAA,CAAA;EAEY,CAAA;;;;AC7RvB,MAAM,gBAAgB,OAAO,GAAG;oBACZ,EAAE,YAAY,MAAM,KAAK,aAAa;uBACnC,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,MAAM,WAAW,QAAQ,CAAC;;;;;;;IAOxG,kBAAkB;;;;8BAIQ,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,MAAM,WAAW,QAAQ,CAAC;;AAGnH,MAAM,cAAc,cAAuC,EAAE,CAAC;AAE9D,MAAM,UAAU,OAAO,EAAE;;;2BAGE,EAAE,YAAY,cAAc,OAAO,gBAAgB,MAAM,cAAc,CAAC;;;;;AAMnG,MAAM,iBAYD,UAAU;AACb,QAAO,oBAAC,SAAD;EAAS,cAAc;EAAO,GAAI;EAAS,CAAA;;;;;;AAOpD,MAAM,WAEA,EAAE,eAAe;AACrB,QACE,oBAAC,YAAY,UAAb;EAAsB,OAAO,EAAE,WAAW,MAAM;YAC9C,oBAAC,eAAD,EAAA,UACG,YAAY,WAAW,MACtB,oBAAC,SAAD,EAAmB,EAAL,EAAK,CACnB,EACY,CAAA;EACK,CAAA;;AAI3B,MAAM,wBAAwB;;;;;;AAO9B,MAAM,QA+CD,EAAE,UAAU,SAAS,cAAc,gBAAgB,SAAS,MAAM,GAAG,mBAAmB;CAC3F,MAAM,EAAE,YAAY,UAAU,WAAW,YAAY;CACrD,MAAM,EAAE,qBAAqB,WAAW,cAAc;CAEtD,MAAM,gBACJ,oBAAC,SAAD;EAAS,cAAA;EAAa,GAAI;YACxB,oBAAC,WAAD,EAAA,UAAY,cAAc,WAAW,uBAAkC,CAAA;EAC/D,CAAA;CAGZ,MAAM,UACJ,oBAAC,SAAD;EAAS,cAAA;EAAqB;EAAQ,GAAI;EACvC;EACO,CAAA;AAGZ,QACE,oBAAC,eAAD;EACE,UACE,YACE,gBAEA,oBAAC,eAAD;GAAe,GAAI;aAAiB;GAA8B,CAAA;EAGtE,SAAS,cAAc,aAAa,UAAU,iBAAiB,MAAM;YAEpE,YACC,oBAAA,YAAA,EAAA,UAAG,UAAU,oBAAA,YAAA,EAAA,UAAG,eAAiB,CAAA,GAAG,oBAAA,YAAA,EAAA,UAAG,SAAW,CAAA,EAAI,CAAA,GAEtD,oBAAC,eAAD;GAAe,GAAI;aAChB,UAAU,oBAAA,YAAA,EAAA,UAAG,eAAiB,CAAA,GAAG,oBAAA,YAAA,EAAA,UAAG,SAAW,CAAA;GAClC,CAAA;EAEJ,CAAA;;AAIpB,IAAA,eAAe,OAAO,OAAO,MAAM;CACjC,SAAS;CACA;CACV,CAAC"}

package/dist/{Checkbox-CsJlWz-r.d.mts → Checkbox-CVa8WOf2.d.mts}

@@ -43,4 +43,4 @@ interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'value'
 declare const Checkbox: _$react.ForwardRefExoticComponent<CheckboxProps & _$react.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { CheckboxProps as n, Checkbox as t };
-//# sourceMappingURL=Checkbox-CsJlWz-r.d.mts.map
+//# sourceMappingURL=Checkbox-CVa8WOf2.d.mts.map

package/dist/{Checkbox-BQC_SmBt.mjs → Checkbox-Cttn1t8T.mjs}

@@ -1,13 +1,13 @@
 import { a as styled, r as css } from "./styledComponentsInterop-NxwFjeA4.mjs";
+import { isChecked, isDisabled, isFocusedVisible, isHovered, isIndeterminate, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { semanticColor, semanticOnly } from "./lib/semanticColor.mjs";
+import { focusStyle } from "./mixins/focus.mjs";
 import "./variables/transitions.mjs";
-import { a as Tooltip, n as TextWithDashedUnderline } from "./Tooltip-B-0VRuKT.mjs";
 import { opacityOf } from "./lib/color.mjs";
-import { isChecked, isDisabled, isFocusedVisible, isHovered, isIndeterminate, isNotDisabled } from "./lib/pseudoClass.mjs";
+import { a as Tooltip, n as TextWithDashedUnderline } from "./Tooltip-DogEteGl.mjs";
 import useControlled from "./lib/useControlled.mjs";
-import { focusStyle } from "./mixins/focus.mjs";
 import { n as Stack } from "./Stack-BkC7FCdF.mjs";
-import { n as useFormField } from "./useFormField-CbNYbDdp.mjs";
+import { n as useFormField } from "./useFormField-BAmkdxtA.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -124,7 +124,11 @@ const Checkbox = forwardRef(function Checkbox({ className, disabled, indetermina
 	useImperativeHandle(ref, () => inputRef.current, [inputRef]);
 	useEffect(() => {
 		if (inputRef.current) inputRef.current.indeterminate = indeterminate;
-	}, [indeterminate, inputRef]);
+	}, [
+		indeterminate,
+		checked,
+		inputRef
+	]);
 	return /* @__PURE__ */ jsxs(Container, {
 		direction: "horizontal",
 		className,
@@ -177,4 +181,4 @@ const Checkbox = forwardRef(function Checkbox({ className, disabled, indetermina
 //#endregion
 export { Checkbox as t };
 
-//# sourceMappingURL=Checkbox-BQC_SmBt.mjs.map
+//# sourceMappingURL=Checkbox-Cttn1t8T.mjs.map

package/dist/{Checkbox-BQC_SmBt.mjs.map → Checkbox-Cttn1t8T.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Checkbox-BQC_SmBt.mjs","names":[],"sources":["../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { uniqueId } from 'lodash-es';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { InputCheckIcon, InputDashIcon } from '@persona/icons';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport Stack from 'design-system/components/Stack/Stack';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { TextWithDashedUnderline } from 'design-system/components/Tooltip/TextUnderlineTooltip';\nimport { opacityOf } from 'design-system/lib/color';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isIndeterminate,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport useControlled from 'design-system/lib/useControlled';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled(Stack)<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  position: relative;\n  cursor: pointer;\n\n  flex-wrap: nowrap;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst CheckboxBox = styled.div<{ disabled?: boolean; checked?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  flex: 0 0 16px;\n  justify-content: center;\n  align-items: center;\n  transition:\n    box-shadow ${TransitionDuration.Fast},\n    background-color ${TransitionDuration.Fast},\n    border-color ${TransitionDuration.Fast};\n  border-radius: 3px;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  box-sizing: border-box;\n  border: 1px solid ${({ theme }) => semanticColor(theme, 'InputBorderStrong', Color.BorderInputCheckbox)};\n  background: ${({ theme }) => semanticColor(theme, 'InputSurfaceDefault', Color.BackgroundInputDefault)};\n\n  svg {\n    color: ${({ theme }) => semanticColor(theme, 'FgInverseStatic', Color.BorderIconInverse)};\n  }\n\n  &${isDisabled} {\n    cursor: default;\n    background: ${({ theme }) =>\n      semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled)};\n    border-color: ${({ theme }) =>\n      semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)};\n    ${semanticOnly((tokens) => `opacity: ${opacityOf(tokens.Opacity65)};`)}\n  }\n\n  ${({ checked, theme }) =>\n    checked &&\n    css`\n      border-color: ${semanticColor(theme, 'InputBorderAccent', Color.BackgroundInputActive)};\n      background: ${semanticColor(theme, 'InputSurfaceAccent', Color.BackgroundInputActive)};\n\n      &${isDisabled} {\n        border-color: ${semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n        background: ${semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n      }\n    `}\n`;\n\nconst CheckboxInput = styled.input`\n  cursor: inherit;\n  height: 16px;\n  width: 16px;\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n\n  &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n    border-color: ${({ theme }) =>\n      semanticColor(theme, 'InputBorderHoverStrong', Color.BorderInputCheckboxHover)};\n    ${semanticOnly((tokens) => `background: ${tokens.InputSurfaceHover};`)}\n  }\n\n  &${isChecked}, &${isIndeterminate} {\n    &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n      background: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n      border-color: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${CheckboxBox} {\n    ${focusStyle}\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n\n          /** Nudge text for visual alignment */\n          position: relative;\n          bottom: -1px;\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n    `}\n`;\n\nexport interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'value' | 'size'> {\n  /**\n   * `id` for the underlying `<input>`. If not provided a unique ID is generated\n   * automatically and linked to the label.\n   */\n  id?: string;\n  /** Called whenever the checked state changes. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Visible label rendered to the right of the checkbox box. */\n  label?: ReactNode;\n  /** Disables interaction and renders the checkbox in a muted style. */\n  disabled?: boolean;\n  /**\n   * When true the checkbox displays a dash (−) instead of a tick, indicating a\n   * mixed / partially-selected state. Sets `aria-checked=\"mixed\"` for screen readers.\n   */\n  indeterminate?: boolean;\n  /**\n   * Controlled checked state. Omit (or pass `undefined`) to let the component\n   * manage state internally via `defaultChecked`.\n   */\n  checked?: boolean;\n  /** Value submitted with a form. */\n  value?: unknown;\n  'data-test'?: string;\n  /** Additional props forwarded to the outer container `<div>`. */\n  containerProps?: ComponentPropsWithoutRef<'div'>;\n  /**\n   * Size of the checkbox and its label text.\n   * @defaultValue 'md'\n   */\n  size?: 'md' | 'sm';\n  /**\n   * Tooltip content to display when hovering over the label.\n   * When provided, the label will be wrapped in a tooltip.\n   */\n  tooltip?: ReactNode;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    className,\n    disabled,\n    indeterminate,\n    onChange,\n    checked: checkedProp,\n    defaultChecked,\n    id,\n    label,\n    'data-test': dataTest,\n    containerProps,\n    value,\n    size = 'md',\n    tooltip,\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const [checked, setChecked] = useControlled({\n    controlledValue: checkedProp,\n    default: defaultChecked,\n  });\n  const generatedId = useMemo(() => uniqueId('pds_checkbox__'), []);\n  const inputRef = useRef<HTMLInputElement>();\n\n  // Use the inputId from FormControl context if available, otherwise use the provided id or generate one\n  const inputId = field.inputId || id || generatedId;\n\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n      inputRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate, inputRef]);\n\n  return (\n    <Container\n      direction='horizontal'\n      className={className}\n      data-test={dataTest}\n      disabled={field.disabled}\n      align='center'\n      size={size}\n      {...containerProps}\n    >\n      <CheckboxInput\n        id={inputId}\n        /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n        ref={inputRef}\n        data-test={dataTest && `${dataTest}-input`}\n        disabled={field.disabled}\n        type='checkbox'\n        checked={checkedProp == null ? undefined : checked}\n        defaultChecked={defaultChecked}\n        onChange={(e) => {\n          setChecked(e.target.checked);\n          if (onChange) {\n            onChange(e);\n          }\n        }}\n        aria-checked={indeterminate ? 'mixed' : undefined}\n        value={value as unknown as string}\n        {...elemProps}\n      />\n      <CheckboxBox\n        aria-hidden='true'\n        disabled={field.disabled}\n        checked={(checked != null && checked) || indeterminate}\n      >\n        {indeterminate ? <InputDashIcon /> : checked ? <InputCheckIcon /> : null}\n      </CheckboxBox>\n      {label &&\n        (tooltip ? (\n          <Tooltip\n            size={size}\n            trigger={\n              <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n                <TextWithDashedUnderline>{label}</TextWithDashedUnderline>\n              </Label>\n            }\n          >\n            {tooltip}\n          </Tooltip>\n        ) : (\n          <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n            {label}\n          </Label>\n        ))}\n    </Container>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox-Cttn1t8T.mjs","names":[],"sources":["../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { uniqueId } from 'lodash-es';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { InputCheckIcon, InputDashIcon } from '@persona/icons';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport Stack from 'design-system/components/Stack/Stack';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { TextWithDashedUnderline } from 'design-system/components/Tooltip/TextUnderlineTooltip';\nimport { opacityOf } from 'design-system/lib/color';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isIndeterminate,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport useControlled from 'design-system/lib/useControlled';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled(Stack)<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  position: relative;\n  cursor: pointer;\n\n  flex-wrap: nowrap;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst CheckboxBox = styled.div<{ disabled?: boolean; checked?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  flex: 0 0 16px;\n  justify-content: center;\n  align-items: center;\n  transition:\n    box-shadow ${TransitionDuration.Fast},\n    background-color ${TransitionDuration.Fast},\n    border-color ${TransitionDuration.Fast};\n  border-radius: 3px;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  box-sizing: border-box;\n  border: 1px solid ${({ theme }) => semanticColor(theme, 'InputBorderStrong', Color.BorderInputCheckbox)};\n  background: ${({ theme }) => semanticColor(theme, 'InputSurfaceDefault', Color.BackgroundInputDefault)};\n\n  svg {\n    color: ${({ theme }) => semanticColor(theme, 'FgInverseStatic', Color.BorderIconInverse)};\n  }\n\n  &${isDisabled} {\n    cursor: default;\n    background: ${({ theme }) =>\n      semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled)};\n    border-color: ${({ theme }) =>\n      semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)};\n    ${semanticOnly((tokens) => `opacity: ${opacityOf(tokens.Opacity65)};`)}\n  }\n\n  ${({ checked, theme }) =>\n    checked &&\n    css`\n      border-color: ${semanticColor(theme, 'InputBorderAccent', Color.BackgroundInputActive)};\n      background: ${semanticColor(theme, 'InputSurfaceAccent', Color.BackgroundInputActive)};\n\n      &${isDisabled} {\n        border-color: ${semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n        background: ${semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n      }\n    `}\n`;\n\nconst CheckboxInput = styled.input`\n  cursor: inherit;\n  height: 16px;\n  width: 16px;\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n\n  &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n    border-color: ${({ theme }) =>\n      semanticColor(theme, 'InputBorderHoverStrong', Color.BorderInputCheckboxHover)};\n    ${semanticOnly((tokens) => `background: ${tokens.InputSurfaceHover};`)}\n  }\n\n  &${isChecked}, &${isIndeterminate} {\n    &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n      background: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n      border-color: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${CheckboxBox} {\n    ${focusStyle}\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n\n          /** Nudge text for visual alignment */\n          position: relative;\n          bottom: -1px;\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n    `}\n`;\n\nexport interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'value' | 'size'> {\n  /**\n   * `id` for the underlying `<input>`. If not provided a unique ID is generated\n   * automatically and linked to the label.\n   */\n  id?: string;\n  /** Called whenever the checked state changes. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Visible label rendered to the right of the checkbox box. */\n  label?: ReactNode;\n  /** Disables interaction and renders the checkbox in a muted style. */\n  disabled?: boolean;\n  /**\n   * When true the checkbox displays a dash (−) instead of a tick, indicating a\n   * mixed / partially-selected state. Sets `aria-checked=\"mixed\"` for screen readers.\n   */\n  indeterminate?: boolean;\n  /**\n   * Controlled checked state. Omit (or pass `undefined`) to let the component\n   * manage state internally via `defaultChecked`.\n   */\n  checked?: boolean;\n  /** Value submitted with a form. */\n  value?: unknown;\n  'data-test'?: string;\n  /** Additional props forwarded to the outer container `<div>`. */\n  containerProps?: ComponentPropsWithoutRef<'div'>;\n  /**\n   * Size of the checkbox and its label text.\n   * @defaultValue 'md'\n   */\n  size?: 'md' | 'sm';\n  /**\n   * Tooltip content to display when hovering over the label.\n   * When provided, the label will be wrapped in a tooltip.\n   */\n  tooltip?: ReactNode;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    className,\n    disabled,\n    indeterminate,\n    onChange,\n    checked: checkedProp,\n    defaultChecked,\n    id,\n    label,\n    'data-test': dataTest,\n    containerProps,\n    value,\n    size = 'md',\n    tooltip,\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const [checked, setChecked] = useControlled({\n    controlledValue: checkedProp,\n    default: defaultChecked,\n  });\n  const generatedId = useMemo(() => uniqueId('pds_checkbox__'), []);\n  const inputRef = useRef<HTMLInputElement>();\n\n  // Use the inputId from FormControl context if available, otherwise use the provided id or generate one\n  const inputId = field.inputId || id || generatedId;\n\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  // Re-sync on `checked` changes too: a native click clears the input's\n  // `indeterminate` property, so it must be re-applied when the prop stays true.\n  useEffect(() => {\n    if (inputRef.current) {\n      /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n      inputRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate, checked, inputRef]);\n\n  return (\n    <Container\n      direction='horizontal'\n      className={className}\n      data-test={dataTest}\n      disabled={field.disabled}\n      align='center'\n      size={size}\n      {...containerProps}\n    >\n      <CheckboxInput\n        id={inputId}\n        /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n        ref={inputRef}\n        data-test={dataTest && `${dataTest}-input`}\n        disabled={field.disabled}\n        type='checkbox'\n        checked={checkedProp == null ? undefined : checked}\n        defaultChecked={defaultChecked}\n        onChange={(e) => {\n          setChecked(e.target.checked);\n          if (onChange) {\n            onChange(e);\n          }\n        }}\n        aria-checked={indeterminate ? 'mixed' : undefined}\n        value={value as unknown as string}\n        {...elemProps}\n      />\n      <CheckboxBox\n        aria-hidden='true'\n        disabled={field.disabled}\n        checked={(checked != null && checked) || indeterminate}\n      >\n        {indeterminate ? <InputDashIcon /> : checked ? <InputCheckIcon /> : null}\n      </CheckboxBox>\n      {label &&\n        (tooltip ? (\n          <Tooltip\n            size={size}\n            trigger={\n              <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n                <TextWithDashedUnderline>{label}</TextWithDashedUnderline>\n              </Label>\n            }\n          >\n            {tooltip}\n          </Tooltip>\n        ) : (\n          <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n            {label}\n          </Label>\n        ))}\n    </Container>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}

package/dist/Checkbox.d.mts

@@ -1,2 +1,2 @@
-import { n as CheckboxProps, t as Checkbox } from "./Checkbox-CsJlWz-r.mjs";
+import { n as CheckboxProps, t as Checkbox } from "./Checkbox-CVa8WOf2.mjs";
 export { Checkbox, Checkbox as default, CheckboxProps };

package/dist/{CheckboxGroupField-DjKp63Dr.d.mts → CheckboxGroupField-BpHN_2QP.d.mts}

@@ -1,5 +1,5 @@
-import { n as CheckboxProps } from "./Checkbox-CsJlWz-r.mjs";
-import { o as ImplementsFormField } from "./inputFields-CXelxYhd.mjs";
+import { n as CheckboxProps } from "./Checkbox-CVa8WOf2.mjs";
+import { o as ImplementsFormField } from "./inputFields-BCNC1FWx.mjs";
 import { ReactElement } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { AriaCheckboxGroupProps } from "react-aria";
@@ -22,4 +22,4 @@ declare const CheckboxGroupField: ({
 }: CheckboxGroupFieldProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { CheckboxGroupField as t };
-//# sourceMappingURL=CheckboxGroupField-DjKp63Dr.d.mts.map
+//# sourceMappingURL=CheckboxGroupField-BpHN_2QP.d.mts.map

package/dist/CheckboxGroupField.d.mts

@@ -1,2 +1,2 @@
-import { t as CheckboxGroupField } from "./CheckboxGroupField-DjKp63Dr.mjs";
+import { t as CheckboxGroupField } from "./CheckboxGroupField-BpHN_2QP.mjs";
 export { CheckboxGroupField as default };

package/dist/ChoicesValueControl.d.mts

@@ -1,4 +1,4 @@
-import { t as ValueControlProps } from "./types-BfrEduGv.mjs";
+import { t as ValueControlProps } from "./types-C_ZEgHNa.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/DataTable/TableControls/FiltersV2/value-controls/ChoicesValueControl/ChoicesValueControl.d.ts

package/dist/{Combobox-D1iXiYGV.d.mts → Combobox-C4C2P8lF.d.mts}

@@ -1,5 +1,5 @@
-import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-BSyJc46m.mjs";
-import { n as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-Dg_6h4iB.mjs";
+import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-BvJ--m6z.mjs";
+import { n as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-BWrnRA2x.mjs";
 
 //#region components/Combobox/Combobox.d.ts
 type ComboboxProps<T = string> = ComboboxSingleSelectProps<T> | ComboboxMultiSelectProps<T>;
@@ -8,4 +8,4 @@ declare const Combobox: <T = string>(props: ComboboxProps<T> & {
 }) => React.ReactElement;
 //#endregion
 export { ComboboxProps as n, Combobox as t };
-//# sourceMappingURL=Combobox-D1iXiYGV.d.mts.map
+//# sourceMappingURL=Combobox-C4C2P8lF.d.mts.map

package/dist/{Combobox-MCaDc7h6.mjs → Combobox-CsXnJKvB.mjs}

@@ -1,20 +1,20 @@
 import { a as styled, r as css } from "./styledComponentsInterop-NxwFjeA4.mjs";
+import { isDisabled, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { semanticColor } from "./lib/semanticColor.mjs";
+import { focusStyle } from "./mixins/focus.mjs";
+import { semanticScrollbar } from "./mixins/scrollbar.mjs";
 import { i as Paragraph } from "./Text-CSwFifQF.mjs";
-import { isDisabled, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { useOutsideClick } from "./lib/useOutsideClick.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { focusStyle } from "./mixins/focus.mjs";
-import { semanticScrollbar } from "./mixins/scrollbar.mjs";
 import { n as Stack } from "./Stack-BkC7FCdF.mjs";
-import { n as Button } from "./IconButton-H5vDZOdo.mjs";
-import { n as Sticker } from "./Sticker-DdhSpTcV.mjs";
-import { n as useFormField } from "./useFormField-CbNYbDdp.mjs";
-import { r as InputGroup } from "./Input-CY14-YeD.mjs";
+import { n as Button } from "./IconButton-D4awF770.mjs";
+import { n as Sticker } from "./Sticker-CUqHa9Mo.mjs";
+import { n as useFormField } from "./useFormField-BAmkdxtA.mjs";
+import { r as InputGroup } from "./Input-DD4jzJhK.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { c as MenuList, n as IconContainer, o as MenuHeading, s as MenuItem, t as FloatingCard } from "./Menu-Dw6Rcpk6.mjs";
-import { t as Checkbox } from "./Checkbox-BQC_SmBt.mjs";
-import { t as Spinner } from "./Spinner-uVZyOh1T.mjs";
+import { c as MenuList, n as IconContainer, o as MenuHeading, s as MenuItem, t as FloatingCard } from "./Menu-DlN0A5Nb.mjs";
+import { t as Checkbox } from "./Checkbox-Cttn1t8T.mjs";
+import { t as Spinner } from "./Spinner-0Vqw_68r.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import { Fragment, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -507,7 +507,7 @@ function DropdownPortalWrapper({ children, portal }) {
 * stays on the input; the footer is never a Tab stop (mirrors the `BackRow`
 * affordance).
 */
-function useComboboxFooterAction({ footerAction, isOptionsLoading, itemCount, isMenuOpen, inputValue, highlightedIndex, setHighlightedIndex, inputId }) {
+function useComboboxFooterAction({ footerAction, isOptionsLoading, itemCount, firstNavigableIndex = 0, lastNavigableIndex = itemCount - 1, isMenuOpen, inputValue, highlightedIndex, setHighlightedIndex, inputId }) {
 	const [isFooterHighlighted, setIsFooterHighlighted] = useState(false);
 	const footerActionId = `${inputId}-footer-action`;
 	const showFooterAction = Boolean(footerAction) && !isOptionsLoading && itemCount > 0;
@@ -535,13 +535,19 @@ function useComboboxFooterAction({ footerAction, isOptionsLoading, itemCount, is
 				event.preventDefault();
 				nativeEvent.preventDownshiftDefault = true;
 			};
-			if (!isFooterHighlighted && event.key === "ArrowDown" && highlightedIndex === itemCount - 1) {
+			if (firstNavigableIndex < 0 && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
 				consume();
 				setIsFooterHighlighted(true);
 				setHighlightedIndex(-1);
 				return true;
 			}
-			if (!isFooterHighlighted && event.key === "ArrowUp" && highlightedIndex === 0) {
+			if (!isFooterHighlighted && event.key === "ArrowDown" && highlightedIndex === lastNavigableIndex) {
+				consume();
+				setIsFooterHighlighted(true);
+				setHighlightedIndex(-1);
+				return true;
+			}
+			if (!isFooterHighlighted && event.key === "ArrowUp" && highlightedIndex === firstNavigableIndex) {
 				consume();
 				setIsFooterHighlighted(true);
 				setHighlightedIndex(-1);
@@ -551,13 +557,13 @@ function useComboboxFooterAction({ footerAction, isOptionsLoading, itemCount, is
 				if (event.key === "ArrowUp") {
 					consume();
 					setIsFooterHighlighted(false);
-					setHighlightedIndex(itemCount - 1);
+					setHighlightedIndex(lastNavigableIndex);
 					return true;
 				}
 				if (event.key === "ArrowDown") {
 					consume();
 					setIsFooterHighlighted(false);
-					setHighlightedIndex(0);
+					setHighlightedIndex(firstNavigableIndex);
 					return true;
 				}
 				if (event.key === "Enter") {
@@ -571,7 +577,8 @@ function useComboboxFooterAction({ footerAction, isOptionsLoading, itemCount, is
 			showFooterAction,
 			isFooterHighlighted,
 			highlightedIndex,
-			itemCount,
+			firstNavigableIndex,
+			lastNavigableIndex,
 			footerAction,
 			setHighlightedIndex
 		]),
@@ -1414,7 +1421,7 @@ const StickerComboboxInput = styled(ComboboxInput)`
   color: transparent;
   caret-color: transparent;
 `;
-function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading, value, onChange, onInputChange, placeholder = "Select an option...", emptyStateMessage = "No options found", disabled = false, hasWarning, hasError, required, id, labelId, "aria-label": ariaLabel, onOpenChange, portal = false, portalContainerRef: externalPortalContainerRef, trigger, embedded = false, footerAction, ...props }, ref) {
+function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading, value, onChange, optionDisabledReason, onInputChange, placeholder = "Select an option...", emptyStateMessage = "No options found", disabled = false, hasWarning, hasError, required, id, labelId, "aria-label": ariaLabel, onOpenChange, portal = false, portalContainerRef: externalPortalContainerRef, trigger, embedded = false, footerAction, ...props }, ref) {
 	const field = useFormField({
 		hasWarning,
 		hasError,
@@ -1494,12 +1501,14 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 			kind: "leaf",
 			option
 		}));
-		return navigableItems.filter((item) => item.kind === "group" || filteredOptions.some((f) => f.value === item.option.value));
+		const filteredValues = new Set(filteredOptions.map((option) => option.value));
+		return navigableItems.filter((item) => item.kind === "group" || filteredValues.has(item.option.value));
 	}, [
 		isSearching,
 		filteredOptions,
 		navigableItems
 	]);
+	const downshiftNodes = useMemo(() => new Set(downshiftItems.map((item) => item.kind === "group" ? item.group : item.option)), [downshiftItems]);
 	const allLeaves = useMemo(() => flattenLeafOptions(options), [options]);
 	const flatOptionsForFallback = useMemo(() => flattenOptions(options), [options]);
 	const selectedOption = allLeaves.find(({ option }) => option.value === value)?.option ?? flatOptionsForFallback.find((option) => option.value === value) ?? null;
@@ -1519,9 +1528,11 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		setNavigationPath((prev) => [...prev, groupLabel]);
 		setInputValue("");
 	}, []);
+	const isItemDisabled = useCallback((item) => item?.kind === "leaf" && optionDisabledReason?.(item.option) != null, [optionDisabledReason]);
 	const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, getItemProps, highlightedIndex, setHighlightedIndex, openMenu } = useCombobox({
 		items: downshiftItems,
 		itemToString,
+		isItemDisabled,
 		isOpen: embedded ? isDropdownOpen : void 0,
 		selectedItem: isDropdownOpen ? null : selectedNavigableItem,
 		inputValue,
@@ -1540,6 +1551,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
 			if (newSelectedItem == null || newSelectedItem.kind !== "leaf") return;
 			const leaf = newSelectedItem.option;
+			if (optionDisabledReason?.(leaf) != null) return;
 			committedLabelRef.current = leaf.label;
 			onChange?.(leaf.value);
 			setInputValue(leaf.label);
@@ -1554,6 +1566,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 				case useCombobox.stateChangeTypes.ItemClick:
 				case useCombobox.stateChangeTypes.InputKeyDownEnter: {
 					const candidate = changes.selectedItem;
+					if (candidate?.kind === "leaf" && optionDisabledReason?.(candidate.option) != null) return state;
 					if (candidate && candidate.kind === "group") {
 						pendingDescentRef.current = candidate.group.label;
 						return {
@@ -1585,6 +1598,8 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 	const renderLeaf = useCallback((option, currentIndex) => {
 		const isHighlighted = highlightedIndex === currentIndex;
 		const isSelected = selectedOption?.value === option.value;
+		const disabledReason = optionDisabledReason?.(option);
+		const descriptionId = `${field.inputId}-disabled-option-${currentIndex}`;
 		const itemProps = getItemProps({
 			item: {
 				kind: "leaf",
@@ -1604,19 +1619,26 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 			title: option.description,
 			children: option.description
 		})] });
-		return /* @__PURE__ */ jsx(StyledMenuItem, {
+		return /* @__PURE__ */ jsxs(StyledMenuItem, {
 			...itemProps,
+			disabled: disabledReason != null,
+			"aria-describedby": disabledReason != null ? descriptionId : void 0,
 			focused: isHighlighted,
 			selected: isSelected,
 			size,
 			tabIndex: -1,
-			children: labelContent
+			children: [labelContent, disabledReason != null && /* @__PURE__ */ jsx(Description, {
+				id: descriptionId,
+				children: disabledReason
+			})]
 		}, `leaf-${String(option.value)}-${currentIndex}`);
 	}, [
 		highlightedIndex,
 		selectedOption,
 		getItemProps,
-		size
+		size,
+		optionDisabledReason,
+		field.inputId
 	]);
 	const renderNestedGroupRow = useCallback((group, currentIndex) => {
 		const isHighlighted = highlightedIndex === currentIndex;
@@ -1656,7 +1678,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		const walk = (node, key) => {
 			if (isOptionGroup(node)) {
 				if (node.nested) {
-					if (!downshiftItems.some((i) => i.kind === "group" && i.group === node)) return null;
+					if (!downshiftNodes.has(node)) return null;
 					navIndex++;
 					return /* @__PURE__ */ jsx(Fragment, { children: renderNestedGroupRow(node, navIndex) }, key);
 				}
@@ -1668,13 +1690,13 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 				if (childNodes.length === 0) return null;
 				return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuHeading, { children: node.label }), childNodes] }, key);
 			}
-			if (!downshiftItems.some((i) => i.kind === "leaf" && i.option === node)) return null;
+			if (!downshiftNodes.has(node)) return null;
 			navIndex++;
 			return renderLeaf(node, navIndex);
 		};
 		return items.map((item, idx) => walk(item, `item-${idx}`));
 	}, [
-		downshiftItems,
+		downshiftNodes,
 		renderLeaf,
 		renderNestedGroupRow
 	]);
@@ -1684,10 +1706,25 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		if (embedded && isMenuOpen && comboboxInputRef.current) comboboxInputRef.current.focus({ preventScroll: true });
 	}, [embedded, isMenuOpen]);
 	const dropdownPosition = useDropdownPosition(portalContainerRef, isMenuOpen, embedded ? false : portal);
+	const { firstNavigableIndex, lastNavigableIndex } = useMemo(() => {
+		let firstNavigableIndex = -1;
+		let lastNavigableIndex = -1;
+		downshiftItems.forEach((item, index) => {
+			if (isItemDisabled(item)) return;
+			if (firstNavigableIndex === -1) firstNavigableIndex = index;
+			lastNavigableIndex = index;
+		});
+		return {
+			firstNavigableIndex,
+			lastNavigableIndex
+		};
+	}, [downshiftItems, isItemDisabled]);
 	const { isFooterHighlighted, footerActionId, showFooterAction, handleFooterKeyDown } = useComboboxFooterAction({
 		footerAction,
 		isOptionsLoading,
 		itemCount: downshiftItems.length,
+		firstNavigableIndex,
+		lastNavigableIndex,
 		isMenuOpen,
 		inputValue,
 		highlightedIndex,
@@ -1702,6 +1739,10 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		if (!isMenuOpen) return;
 		if (handleFooterKeyDown(event)) return;
 		if (isSearching) return;
+		if (event.key === "Enter" && downshiftItems[highlightedIndex]?.kind === "group") {
+			event.stopPropagation();
+			return;
+		}
 		if (event.key === "ArrowRight") {
 			const highlighted = downshiftItems[highlightedIndex];
 			if (highlighted && highlighted.kind === "group") {
@@ -1739,15 +1780,18 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		isMenuOpen
 	]);
 	useEffect(() => {
-		if (isMenuOpen && downshiftItems.length > 0 && !isFooterHighlighted) {
-			if (highlightedIndex === -1 || highlightedIndex >= downshiftItems.length) setHighlightedIndex(0);
-		}
+		if (!isMenuOpen || isFooterHighlighted) return;
+		const highlighted = downshiftItems[highlightedIndex];
+		if (highlighted != null && !isItemDisabled(highlighted)) return;
+		if (highlightedIndex !== firstNavigableIndex) setHighlightedIndex(firstNavigableIndex);
 	}, [
 		downshiftItems,
 		isMenuOpen,
 		highlightedIndex,
 		isFooterHighlighted,
-		setHighlightedIndex
+		setHighlightedIndex,
+		isItemDisabled,
+		firstNavigableIndex
 	]);
 	const displayValue = isMenuOpen ? inputValue : committedLabelRef.current ?? selectedOption?.label ?? "";
 	const hasSticker = !isMenuOpen && selectedOption?.labelStickerVariant;
@@ -1901,4 +1945,4 @@ const Combobox = forwardRef(ComboboxComponent);
 //#endregion
 export { CaretButton as n, flattenOptions as r, Combobox as t };
 
-//# sourceMappingURL=Combobox-MCaDc7h6.mjs.map
+//# sourceMappingURL=Combobox-CsXnJKvB.mjs.map