npm - @persona/design-system - Versions diffs - 0.1.9 → 0.2.1 - Mend

@persona/design-system 0.1.9 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (450) hide show

package/dist/{CardV2-C0fcOUdp.mjs.map → CardV2-m9yOInMU.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardV2-C0fcOUdp.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 { 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\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 ${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 { 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 ${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 }) => 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';\n\nconst CardContainer = styled.div`\n border-radius: ${({ theme }) => theme.card.borderRadius};\n background-color: ${({ theme }) => 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\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 }) => 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 ${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 = '🔍 Oops, 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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"}
1	+ {"version":3,"file":"CardV2-m9yOInMU.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 { 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\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 ${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 { 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 ${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 }) => 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';\n\nconst CardContainer = styled.div`\n border-radius: ${({ theme }) => theme.card.borderRadius};\n background-color: ${({ theme }) => 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\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 }) => 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 ${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 = '🔍 Oops, 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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"}

package/dist/{Checkbox-Bm8exUfH.d.mts → Checkbox-Bmm-r5ei.d.mts} RENAMED Viewed

@@ -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-Bm8exUfH.d.mts.map
+//# sourceMappingURL=Checkbox-Bmm-r5ei.d.mts.map

package/dist/{Checkbox-BcuiFvK7.mjs → Checkbox-CU27-Aa8.mjs} RENAMED Viewed

@@ -1,14 +1,14 @@
 import { isChecked, isDisabled, isFocusedVisible, isHovered, isIndeterminate, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { focusStyle } from "./mixins/focus.mjs";
 import "./variables/transitions.mjs";
-import { n as Stack } from "./Stack-Bl54WmhY.mjs";
-import { a as Tooltip, n as TextWithDashedUnderline } from "./Tooltip-BvDbmXak.mjs";
+import { a as Tooltip, n as TextWithDashedUnderline } from "./Tooltip-CDvOu1UN.mjs";
 import useControlled from "./lib/useControlled.mjs";
-import { n as useFormField } from "./useFormField-DhYd6bNn.mjs";
+import { n as Stack } from "./Stack-ckRN7LrP.mjs";
+import { n as useFormField } from "./useFormField-eftOPiXj.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { InputCheckIcon, InputDashIcon } from "@persona/icons";
 import { uniqueId } from "lodash";
 //#region components/Checkbox/Checkbox.tsx
@@ -132,7 +132,7 @@ const Checkbox = forwardRef(function Checkbox({ className, disabled, indetermina
 		children: [
 			/* @__PURE__ */ jsx(CheckboxInput, {
 				id: inputId,
-				ref: ref || inputRef,
+				ref: inputRef,
 				"data-test": dataTest && `${dataTest}-input`,
 				disabled: field.disabled,
 				type: "checkbox",
@@ -173,4 +173,4 @@ const Checkbox = forwardRef(function Checkbox({ className, disabled, indetermina
 //#endregion
 export { Checkbox as t };
-//# sourceMappingURL=Checkbox-BcuiFvK7.mjs.map
+//# sourceMappingURL=Checkbox-CU27-Aa8.mjs.map

package/dist/{Checkbox-BcuiFvK7.mjs.map → Checkbox-CU27-Aa8.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox-BcuiFvK7.mjs","names":[],"sources":["../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { uniqueId } from 'lodash';\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 {\n isChecked,\n isDisabled,\n isFocusedVisible,\n isHovered,\n isIndeterminate,\n isNotDisabled,\n} from 'design-system/lib/pseudoClass';\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 ${Color.BorderInputCheckbox};\n background: ${Color.BackgroundInputDefault};\n\n svg {\n color: ${Color.BorderIconInverse};\n }\n\n &${isDisabled} {\n cursor: default;\n background: ${Color.BackgroundInputDisabled};\n border-color: ${Color.BorderInputDisabled};\n }\n\n ${({ checked }) =>\n checked &&\n css`\n border-color: ${Color.BackgroundInputActive};\n background: ${Color.BackgroundInputActive};\n\n &${isDisabled} {\n border-color: ${Color.BackgroundInputActiveDisabled};\n background: ${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: ${Color.BorderInputCheckboxHover};\n }\n\n &${isChecked}, &${isIndeterminate} {\n &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n background: ${Color.BackgroundInputActiveHover};\n border-color: ${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: ${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: ${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={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' : checked}\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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"}
1	+ {"version":3,"file":"Checkbox-CU27-Aa8.mjs","names":[],"sources":["../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { uniqueId } from 'lodash';\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 {\n isChecked,\n isDisabled,\n isFocusedVisible,\n isHovered,\n isIndeterminate,\n isNotDisabled,\n} from 'design-system/lib/pseudoClass';\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 ${Color.BorderInputCheckbox};\n background: ${Color.BackgroundInputDefault};\n\n svg {\n color: ${Color.BorderIconInverse};\n }\n\n &${isDisabled} {\n cursor: default;\n background: ${Color.BackgroundInputDisabled};\n border-color: ${Color.BorderInputDisabled};\n }\n\n ${({ checked }) =>\n checked &&\n css`\n border-color: ${Color.BackgroundInputActive};\n background: ${Color.BackgroundInputActive};\n\n &${isDisabled} {\n border-color: ${Color.BackgroundInputActiveDisabled};\n background: ${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: ${Color.BorderInputCheckboxHover};\n }\n\n &${isChecked}, &${isIndeterminate} {\n &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n background: ${Color.BackgroundInputActiveHover};\n border-color: ${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: ${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: ${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' : checked}\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":";;;;;;;;;;;;;;AA+BA,MAAM,YAAY,OAAO,MAAM;;;;;;KAM1B,EAAE,WACH,SAAS,QACT,GAAG;;MAED;;KAED,WAAW;;;;AAKhB,MAAM,cAAc,OAAO,GAA8C;;;;;;;yBAOhC;+BACM;2BACJ;;YAE/B,QAAQ,GAAG;WACZ,QAAQ,GAAG;;sBAEA,MAAM,oBAAoB;gBAChC,MAAM,uBAAuB;;;aAGhC,MAAM,kBAAkB;;;KAGhC,WAAW;;kBAEE,MAAM,wBAAwB;oBAC5B,MAAM,oBAAoB;;;KAGzC,EAAE,cACH,WACA,GAAG;sBACe,MAAM,sBAAsB;oBAC9B,MAAM,sBAAsB;;SAEvC,WAAW;wBACI,MAAM,8BAA8B;sBACtC,MAAM,8BAA8B;;MAEpD;;AAGN,MAAM,gBAAgB,OAAO,KAAK;;;;;;;;;;KAU7B,YAAY,cAAc,KAAK,YAAY;oBAC5B,MAAM,yBAAyB;;;KAG9C,UAAU,KAAK,gBAAgB;OAC7B,YAAY,cAAc,KAAK,YAAY;oBAC9B,MAAM,2BAA2B;sBAC/B,MAAM,2BAA2B;;;;KAIlD,mBAAmB,cAAc,KAAK,YAAY;MACjD,WAAW;;;AAIjB,MAAM,QAAQ,OAAO,KAA+C;;WAEzD,MAAM,YAAY;;KAExB,EAAE,WACH,SAAS,OACL,GAAG;YACC,WAAW,UAAU;;YAGzB,GAAG;YACC,WAAW,WAAW;;;;;UAKxB;;KAEL,EAAE,OAAO,eACV,YACA,GAAG;;eAEQ,MAAM,MAAM,KAAK,SAAS;MACnC;;AA0CN,MAAa,WAAW,WAA4C,SAAS,SAC3E,EACE,WACA,UACA,eACA,UACA,SAAS,aACT,gBACA,IACA,OACA,aAAa,UACb,gBACA,OACA,OAAO,MACP,SACA,GAAG,aAEL,KACA;CACA,MAAM,QAAQ,aAAa,EAAE,UAAU,CAAC;CACxC,MAAM,CAAC,SAAS,cAAc,cAAc;EAC1C,iBAAiB;EACjB,SAAS;EACV,CAAC;CACF,MAAM,cAAc,cAAc,SAAS,iBAAiB,EAAE,EAAE,CAAC;CACjE,MAAM,WAAW,QAA0B;CAG3C,MAAM,UAAU,MAAM,WAAW,MAAM;AAGvC,qBAAoB,WAAW,SAAS,SAAS,CAAC,SAAS,CAAC;AAE5D,iBAAgB;AACd,MAAI,SAAS,QAEX,UAAS,QAAQ,gBAAgB;IAElC,CAAC,eAAe,SAAS,CAAC;AAE7B,QACE,qBAAC,WAAD;EACE,WAAU;EACC;EACX,aAAW;EACX,UAAU,MAAM;EAChB,OAAM;EACA;EACN,GAAI;YAPN;GASE,oBAAC,eAAD;IACE,IAAI;IAEJ,KAAK;IACL,aAAW,YAAY,GAAG,SAAS;IACnC,UAAU,MAAM;IAChB,MAAK;IACL,SAAS,eAAe,OAAO,KAAA,IAAY;IAC3B;IAChB,WAAW,MAAM;AACf,gBAAW,EAAE,OAAO,QAAQ;AAC5B,SAAI,SACF,UAAS,EAAE;;IAGf,gBAAc,gBAAgB,UAAU;IACjC;IACP,GAAI;IACJ,CAAA;GACF,oBAAC,aAAD;IACE,eAAY;IACZ,UAAU,MAAM;IAChB,SAAU,WAAW,QAAQ,WAAY;cAExC,gBAAgB,oBAAC,eAAD,EAAiB,CAAA,GAAG,UAAU,oBAAC,gBAAD,EAAkB,CAAA,GAAG;IACxD,CAAA;GACb,UACE,UACC,oBAAC,SAAD;IACQ;IACN,SACE,oBAAC,OAAD;KAAO,SAAS;KAAS,UAAU,CAAC,CAAC,MAAM;KAAgB;eACzD,oBAAC,yBAAD,EAAA,UAA0B,OAAgC,CAAA;KACpD,CAAA;cAGT;IACO,CAAA,GAEV,oBAAC,OAAD;IAAO,SAAS;IAAS,UAAU,CAAC,CAAC,MAAM;IAAgB;cACxD;IACK,CAAA;GAEF;;EAEd"}

package/dist/Checkbox.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as CheckboxProps, t as Checkbox } from "./Checkbox-Bm8exUfH.mjs";
+import { n as CheckboxProps, t as Checkbox } from "./Checkbox-Bmm-r5ei.mjs";
 export { Checkbox, Checkbox as default, CheckboxProps };

package/dist/CheckboxGroupField.d.mts CHANGED Viewed

@@ -1,7 +1,7 @@
-import { n as CheckboxProps } from "./Checkbox-Bm8exUfH.mjs";
+import { n as CheckboxProps } from "./Checkbox-Bmm-r5ei.mjs";
 import { ImplementsFormField } from "./inputFields.mjs";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactElement } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { AriaCheckboxGroupProps } from "react-aria";
 //#region components/FormField/CheckboxGroupField.d.ts

package/dist/ChoicesValueControl.d.mts CHANGED Viewed

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

package/dist/{Combobox-BaD0f2Du.d.mts → Combobox-BgKEHP9p.d.mts} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-DhLzCWbz.mjs";
-import { n as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-P0r5rs_u.mjs";
+import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-BLKUKNEW.mjs";
+import { n as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-Kpl-iOok.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-BaD0f2Du.d.mts.map
+//# sourceMappingURL=Combobox-BgKEHP9p.d.mts.map

package/dist/{Combobox-B6JyLog8.mjs → Combobox-DhTUY8JT.mjs} RENAMED Viewed

@@ -1,20 +1,20 @@
 import { focusStyle } from "./mixins/focus.mjs";
-import { n as Stack } from "./Stack-Bl54WmhY.mjs";
-import { i as Paragraph } from "./Text-RcEfNFLx.mjs";
+import { i as Paragraph } from "./Text-hEoPeOc9.mjs";
 import { useOutsideClick } from "./lib/useOutsideClick.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { n as Button } from "./IconButton-P8w0JDI5.mjs";
-import { c as MenuList, n as IconContainer, o as MenuHeading, s as MenuItem, t as FloatingCard } from "./Menu-DmeMgN-i.mjs";
-import { n as useFormField } from "./useFormField-DhYd6bNn.mjs";
-import { r as InputGroup } from "./Input-QC6xla6I.mjs";
+import { n as Stack } from "./Stack-ckRN7LrP.mjs";
+import { n as Button } from "./IconButton-DC4rh6ow.mjs";
+import { n as Sticker } from "./Sticker-B0TbkV4o.mjs";
+import { n as useFormField } from "./useFormField-eftOPiXj.mjs";
+import { r as InputGroup } from "./Input-PWfwMSJ7.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { t as Spinner } from "./Spinner-BEPF42RW.mjs";
-import { n as Sticker } from "./Sticker-CyGb9dEu.mjs";
-import { t as Checkbox } from "./Checkbox-BcuiFvK7.mjs";
+import { t as Checkbox } from "./Checkbox-CU27-Aa8.mjs";
+import { c as MenuList, n as IconContainer, o as MenuHeading, s as MenuItem, t as FloatingCard } from "./Menu-DpM8o234.mjs";
+import { t as Spinner } from "./Spinner-BgBCCHGo.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+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";
 import { ArrowLeftIcon, CaretDownIcon, ChevronRightIcon, CircleXInverseIcon, SearchIcon } from "@persona/icons";
 import Fuse from "fuse.js";
 import { createPortal } from "react-dom";
@@ -241,7 +241,7 @@ function renderOptionsWithGroups({ options, filteredOptions, renderOption, virtu
 			if (item.nested) return null;
 			const visibleLeaves = flattenOptions(item.options).filter((opt) => filteredOptions.some((filtered) => filtered.value === opt.value));
 			if (visibleLeaves.length === 0) return null;
-			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuHeading, { children: item.label }), visibleLeaves.map((option) => {
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuHeading, { children: item.label }), visibleLeaves.map((option) => {
 				flatIndex++;
 				return renderOption(option, flatIndex);
 			})] }, `group-${groupIndex}`);
@@ -480,7 +480,7 @@ function DropdownPortalWrapper({ children, portal }) {
 		"data-react-aria-top-layer": "true",
 		children
 	}), portalRoot.current);
-	return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
 }
 //#endregion
 //#region components/Combobox/useComboboxFooterAction.ts
@@ -756,6 +756,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 		inputId: id
 	});
 	const [inputValue, setInputValue] = useState("");
+	const [embeddedOpen, setEmbeddedOpen] = useState(false);
 	const searchInputRef = useRef(null);
 	const comboboxInputRef = useRef(null);
 	const caretButtonRef = useRef(null);
@@ -764,6 +765,9 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 	const selectedItemsContainerRef = useRef(null);
 	const measurementStickerRefs = useRef([]);
 	const measurementTruncatorRef = useRef(null);
+	useEffect(() => {
+		setEmbeddedOpen(embedded);
+	}, [embedded]);
 	const portalContainerRef = externalPortalContainerRef || comboboxContainerRef;
 	const flatOptions = useMemo(() => flattenOptions(options), [options]);
 	const selectedItems = flatOptions.filter((option) => values.includes(option.value));
@@ -925,7 +929,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 		items: navigableItems,
 		itemToString,
 		getItemId: getOptionId,
-		isOpen: embedded ? true : void 0,
+		isOpen: embedded ? embeddedOpen : void 0,
 		selectedItem: null,
 		initialHighlightedIndex: 0,
 		defaultHighlightedIndex: 0,
@@ -1030,7 +1034,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 					children: option.labelStickerVariant ? /* @__PURE__ */ jsx(Sticker, {
 						variant: option.labelStickerVariant,
 						children: option.label
-					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(OptionLabel, {
+					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(OptionLabel, {
 						title: option.label,
 						$labelStyle: option.PLEASE_DO_NOT_USE_labelFontStyle,
 						children: option.label
@@ -1078,9 +1082,12 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 		setHighlightedIndex
 	]);
 	const searchInputId = `${field.inputId}-search`;
+	useLayoutEffect(() => {
+		if (embedded && isMenuOpen && searchInputRef.current) searchInputRef.current.focus({ preventScroll: true });
+	}, [embedded, isMenuOpen]);
 	useEffect(() => {
-		if (isMenuOpen && searchInputRef.current) searchInputRef.current.focus();
-	}, [isMenuOpen]);
+		if (!embedded && isMenuOpen && searchInputRef.current) searchInputRef.current.focus();
+	}, [embedded, isMenuOpen]);
 	const handleSearchInputKeyDown = useCallback((e) => {
 		if (handleFooterKeyDown(e)) return;
 		if (e.key === "ArrowDown" && navigableItems.length > 0) {
@@ -1276,7 +1283,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 				$minWidth: externalTrigger ? EXTERNAL_TRIGGER_DROPDOWN_MIN_WIDTH$1 : void 0,
 				...getMenuProps(),
 				"aria-multiselectable": "true",
-				children: [isMenuOpen && /* @__PURE__ */ jsx(SearchInputContainer, {
+				children: [(embedded || isMenuOpen) && /* @__PURE__ */ jsx(SearchInputContainer, {
 					$embedded: embedded,
 					children: /* @__PURE__ */ jsx(InputGroup, {
 						leftIcon: embedded ? void 0 : /* @__PURE__ */ jsx(SearchIcon, {}),
@@ -1302,7 +1309,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 					$embedded: embedded,
 					tabIndex: -1,
 					ref: scrollableListRef,
-					children: isMenuOpen && /* @__PURE__ */ jsxs(Fragment, { children: [isOptionsLoading ? /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(Spinner, { size: "md" }) }) : navigableItems.length > 0 ? renderOptionsWithGroups({
+					children: isMenuOpen && /* @__PURE__ */ jsxs(Fragment$1, { children: [isOptionsLoading ? /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(Spinner, { size: "md" }) }) : navigableItems.length > 0 ? renderOptionsWithGroups({
 						options: optionsToRender,
 						filteredOptions: navigableItems,
 						renderOption,
@@ -1400,11 +1407,20 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		inputId: id
 	});
 	const [inputValue, setInputValue] = useState("");
-	const [isDropdownOpen, setIsDropdownOpen] = useState(embedded);
+	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 	const [navigationPath, setNavigationPath] = useState([]);
 	const comboboxInputRef = useRef(null);
 	const internalContainerRef = useRef(null);
 	const pendingDescentRef = useRef(null);
+	const committedLabelRef = useRef(null);
+	const lastValueRef = useRef(value);
+	useEffect(() => {
+		setIsDropdownOpen(embedded);
+	}, [embedded]);
+	if (lastValueRef.current !== value) {
+		lastValueRef.current = value;
+		committedLabelRef.current = null;
+	}
 	const portalContainerRef = externalPortalContainerRef || internalContainerRef;
 	useImperativeHandle(ref, () => ({ ...comboboxInputRef.current }), []);
 	const isSearching = inputValue.trim() !== "";
@@ -1491,7 +1507,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 	const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, getItemProps, highlightedIndex, setHighlightedIndex, openMenu } = useCombobox({
 		items: downshiftItems,
 		itemToString,
-		isOpen: embedded ? true : void 0,
+		isOpen: embedded ? isDropdownOpen : void 0,
 		selectedItem: isDropdownOpen ? null : selectedNavigableItem,
 		inputValue,
 		onInputValueChange({ inputValue: newInputValue }) {
@@ -1503,12 +1519,13 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 			if (embedded) return;
 			setIsDropdownOpen(newIsOpen);
 			if (newIsOpen) {
-				if (selectedOption || value && inputValue === flatOptionsForFallback.find((opt) => opt.value === value)?.label) setInputValue("");
-			} else setInputValue(selectedOption?.label || "");
+				if (selectedOption || committedLabelRef.current != null || value && inputValue === flatOptionsForFallback.find((opt) => opt.value === value)?.label) setInputValue("");
+			} else setInputValue(committedLabelRef.current ?? selectedOption?.label ?? "");
 		},
 		onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
 			if (newSelectedItem == null || newSelectedItem.kind !== "leaf") return;
 			const leaf = newSelectedItem.option;
+			committedLabelRef.current = leaf.label;
 			onChange?.(leaf.value);
 			setInputValue(leaf.label);
 		},
@@ -1564,7 +1581,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		const labelContent = option.labelStickerVariant ? /* @__PURE__ */ jsx(Sticker, {
 			variant: option.labelStickerVariant,
 			children: option.label
-		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(OptionLabel, {
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(OptionLabel, {
 			title: option.label,
 			$labelStyle: option.PLEASE_DO_NOT_USE_labelFontStyle,
 			children: option.label
@@ -1626,7 +1643,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 				if (node.nested) {
 					if (!downshiftItems.some((i) => i.kind === "group" && i.group === node)) return null;
 					navIndex++;
-					return /* @__PURE__ */ jsx(Fragment$1, { children: renderNestedGroupRow(node, navIndex) }, key);
+					return /* @__PURE__ */ jsx(Fragment, { children: renderNestedGroupRow(node, navIndex) }, key);
 				}
 				const childNodes = [];
 				for (let i = 0; i < node.options.length; i++) {
@@ -1634,7 +1651,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 					if (rendered != null) childNodes.push(rendered);
 				}
 				if (childNodes.length === 0) return null;
-				return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuHeading, { children: node.label }), childNodes] }, key);
+				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;
 			navIndex++;
@@ -1648,6 +1665,9 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 	]);
 	const renderOption = useCallback((option, currentIndex) => renderLeaf(option, currentIndex), [renderLeaf]);
 	const isMenuOpen = isOpen;
+	useLayoutEffect(() => {
+		if (embedded && isMenuOpen && comboboxInputRef.current) comboboxInputRef.current.focus({ preventScroll: true });
+	}, [embedded, isMenuOpen]);
 	const dropdownPosition = useDropdownPosition(portalContainerRef, isMenuOpen, embedded ? false : portal);
 	const { isFooterHighlighted, footerActionId, showFooterAction, handleFooterKeyDown } = useComboboxFooterAction({
 		footerAction,
@@ -1697,8 +1717,12 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		onOpenChange?.(isMenuOpen);
 	}, [isMenuOpen, onOpenChange]);
 	useEffect(() => {
-		if (!isMenuOpen) setInputValue(selectedOption?.label || "");
-	}, [selectedOption, isMenuOpen]);
+		if (!embedded && !isMenuOpen) setInputValue(committedLabelRef.current ?? selectedOption?.label ?? "");
+	}, [
+		embedded,
+		selectedOption,
+		isMenuOpen
+	]);
 	useEffect(() => {
 		if (isMenuOpen && downshiftItems.length > 0 && !isFooterHighlighted) {
 			if (highlightedIndex === -1 || highlightedIndex >= downshiftItems.length) setHighlightedIndex(0);
@@ -1710,7 +1734,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		isFooterHighlighted,
 		setHighlightedIndex
 	]);
-	const displayValue = isMenuOpen ? inputValue : selectedOption?.label || "";
+	const displayValue = isMenuOpen ? inputValue : committedLabelRef.current ?? selectedOption?.label ?? "";
 	const hasSticker = !isMenuOpen && selectedOption?.labelStickerVariant;
 	const InputComponent = hasSticker ? StickerComboboxInput : ComboboxInput;
 	const showBackRow = isMenuOpen && navigationPath.length > 0 && !isSearching;
@@ -1803,7 +1827,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 				}), /* @__PURE__ */ jsx(SingleSelectScrollableMenuList, {
 					$embedded: embedded,
 					tabIndex: -1,
-					children: isMenuOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+					children: isMenuOpen && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 						showBackRow && /* @__PURE__ */ jsxs(BackRow, {
 							type: "button",
 							tabIndex: -1,
@@ -1860,4 +1884,4 @@ const Combobox = forwardRef(ComboboxComponent);
 //#endregion
 export { CaretButton as n, flattenOptions as r, Combobox as t };
-//# sourceMappingURL=Combobox-B6JyLog8.mjs.map
+//# sourceMappingURL=Combobox-DhTUY8JT.mjs.map