npm - @persona/design-system - Versions diffs - 0.10.5 → 0.10.7 - Mend

@persona/design-system 0.10.5 → 0.10.7

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 (559) hide show

package/dist/Link-DKYmdL9t.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Link-DKYmdL9t.mjs","names":[],"sources":["../src/components/Link/Link.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LinkExternalIcon } from '@persona/icons';\nimport { RouterLink, type RouterLinkComponentProps } from '~~design-system~~/lib/router';\nimport { semanticColor } from '~~design-system~~/lib/semanticColor';\nimport { focusOutline } from '~~design-system~~/mixins/focus';\nimport { paragraphMixins } from '~~design-system~~/mixins/text';\nimport { TransitionDuration } from '~~design-system~~/variables/transitions';\n\ntype Target = '_blank' \| '_self' \| '_parent' \| '_top';\n\ninterface BaseLinkProps {\n /*\n The content to display inside the link.\n \n /\n children?: ReactNode;\n /*\n Provides an accessible name for the link when the visible text alone\n * isn't descriptive enough for screen reader users\n /\n 'aria-label'?: string;\n}\n\ninterface ExternalLinkProps extends BaseLinkProps, AnchorHTMLAttributes<HTMLAnchorElement> {\n /\n The URL to navigate to. Can be internal (e.g., \"/settings\") or external (e.g., \"https://example.com\").\n /\n url: string;\n\n /\n Where to open the link. Use \"_blank\" for external links to open in a new tab.\n /\n target?: Target;\n}\n\ninterface InternalLinkProps\n extends BaseLinkProps, Omit<RouterLinkComponentProps, 'to' \| 'children'> {\n /\n The URL to navigate to. Should be an internal route (e.g., \"/settings\").\n /\n url: string;\n}\n\nexport type LinkProps = ExternalLinkProps \| InternalLinkProps;\n\nconst IconContainer = styled.span`\n display: inline-block;\n vertical-align: middle;\n / Uses padding here since we can't define flex on the element for multiline support /\n padding-left: 2px;\n / Needed to reset the height of the container for SVG /\n line-height: 0;\n position: relative;\n / Optical alignment adjustments */\n bottom: 1px;\n`;\n\nconst baseLinkStyles = css`\n ${paragraphMixins.md};\n color: ${({ theme }) => semanticColor(theme, 'FgAccent', Color.CorePurple600)};\n width: fit-content;\n position: relative;\n overflow: hidden;\n text-decoration: underline;\n\n transition:\n color ${TransitionDuration.ExtraFast} ease-out,\n text-underline-offset ${TransitionDuration.ExtraFast} ease-out;\n text-underline-offset: 2px;\n\n &:hover {\n color: ${({ theme }) => semanticColor(theme, 'FgAccentHover', Color.CorePurple800)};\n text-underline-offset: ${Spacing[1]};\n }\n\n border-radius: ${({ theme }) => theme.button.borderRadius};\n ${focusOutline}\n\n &:active {\n color: ${({ theme }) => semanticColor(theme, 'FgAccentActive', Color.CorePurple900)};\n }\n`;\n\nconst StyledAnchor = styled.a`\n ${baseLinkStyles}\n`;\n\nconst StyledRouterLink = styled(RouterLink)`\n ${baseLinkStyles}\n`;\n\nexport const Link = ({ children, url, ...props }: LinkProps) => {\n // Check if the URL is external by looking at the protocol or if target is _blank\n const isAbsoluteUrl = /^https?:\\/\\//.test(url);\n const hasBlankTarget = props.target === '_blank';\n const isExternal = isAbsoluteUrl \|\| hasBlankTarget;\n\n if (isExternal) {\n const { 'aria-label': ariaLabel, ...anchorProps } = props;\n const externalProps = {\n href: url,\n target: '_blank',\n rel: 'noopener noreferrer',\n 'aria-label': ariaLabel,\n // Automatically inform screen readers that link opens in new window\n title: ariaLabel ? undefined : 'Opens in new window',\n ...anchorProps,\n };\n\n return (\n <StyledAnchor {...externalProps}>\n {children}\n <IconContainer>\n <LinkExternalIcon size={12} />\n </IconContainer>\n </StyledAnchor>\n );\n }\n\n const { 'aria-label': ariaLabel, ...routerProps } = props;\n const internalProps = {\n to: url,\n 'aria-label': ariaLabel,\n\n ...routerProps,\n };\n\n return <StyledRouterLink {...internalProps}>{children}</StyledRouterLink>;\n};\n\nexport default Link;\n"],"mappings":";;;;;;;;;;~~AAgDA~~,MAAM,gBAAgB,OAAO,IAAI;;;;;;;;;;;AAYjC,MAAM,iBAAiB,GAAG;IACtB,gBAAgB,GAAG;YACX,EAAE,YAAY,cAAc,OAAO,YAAY,MAAM,cAAc,CAAC;;;;;;;oBAOvC;oCACgB;;;;cAI3C,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,cAAc,CAAC;6BAC1D,QAAQ,GAAG;;;oBAGpB,EAAE,YAAY,MAAM,OAAO,aAAa;IACxD,aAAa;;;cAGH,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,cAAc,CAAC;;;AAIxF,MAAM,eAAe,OAAO,CAAC;IACzB,eAAe;;AAGnB,MAAM,mBAAmB,OAAO,WAAW;IACvC,eAAe;;AAGnB,MAAa,QAAQ,EAAE,UAAU,KAAK,GAAG,YAAuB;CAE9D,MAAM,gBAAgB,eAAe,KAAK,IAAI;CAC9C,MAAM,iBAAiB,MAAM,WAAW;AAGxC,KAFmB,iBAAiB,gBAEpB;EACd,MAAM,EAAE,cAAc,WAAW,GAAG,gBAAgB;AAWpD,SACE,qBAAC,cAAD;GAVA,MAAM;GACN,QAAQ;GACR,KAAK;GACL,cAAc;GAEd,OAAO,YAAY,KAAA,IAAY;GAC/B,GAAG;aAIH,CACG,UACD,oBAAC,eAAD,EAAA,UACE,oBAAC,kBAAD,EAAkB,MAAM,IAAM,CAAA,EAChB,CAAA,CACH;;;CAInB,MAAM,EAAE,cAAc,WAAW,GAAG,gBAAgB;AAQpD,QAAO,oBAAC,kBAAD;EANL,IAAI;EACJ,cAAc;EAEd,GAAG;EAGwC;EAA4B,CAAA"}
1	+ {"version":3,"file":"Link-DKYmdL9t.mjs","names":[],"sources":["../src/components/Link/Link.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LinkExternalIcon } from '@persona/icons';\n\nimport { RouterLink, type RouterLinkComponentProps } from '#src/lib/router';\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { focusOutline } from '#src/mixins/focus';\nimport { paragraphMixins } from '#src/mixins/text';\nimport { TransitionDuration } from '#src/variables/transitions';\n\ntype Target = '_blank' \| '_self' \| '_parent' \| '_top';\n\ninterface BaseLinkProps {\n /*\n The content to display inside the link.\n \n /\n children?: ReactNode;\n /*\n Provides an accessible name for the link when the visible text alone\n * isn't descriptive enough for screen reader users\n /\n 'aria-label'?: string;\n}\n\ninterface ExternalLinkProps extends BaseLinkProps, AnchorHTMLAttributes<HTMLAnchorElement> {\n /\n The URL to navigate to. Can be internal (e.g., \"/settings\") or external (e.g., \"https://example.com\").\n /\n url: string;\n\n /\n Where to open the link. Use \"_blank\" for external links to open in a new tab.\n /\n target?: Target;\n}\n\ninterface InternalLinkProps\n extends BaseLinkProps, Omit<RouterLinkComponentProps, 'to' \| 'children'> {\n /\n The URL to navigate to. Should be an internal route (e.g., \"/settings\").\n /\n url: string;\n}\n\nexport type LinkProps = ExternalLinkProps \| InternalLinkProps;\n\nconst IconContainer = styled.span`\n display: inline-block;\n vertical-align: middle;\n / Uses padding here since we can't define flex on the element for multiline support /\n padding-left: 2px;\n / Needed to reset the height of the container for SVG /\n line-height: 0;\n position: relative;\n / Optical alignment adjustments */\n bottom: 1px;\n`;\n\nconst baseLinkStyles = css`\n ${paragraphMixins.md};\n color: ${({ theme }) => semanticColor(theme, 'FgAccent', Color.CorePurple600)};\n width: fit-content;\n position: relative;\n overflow: hidden;\n text-decoration: underline;\n\n transition:\n color ${TransitionDuration.ExtraFast} ease-out,\n text-underline-offset ${TransitionDuration.ExtraFast} ease-out;\n text-underline-offset: 2px;\n\n &:hover {\n color: ${({ theme }) => semanticColor(theme, 'FgAccentHover', Color.CorePurple800)};\n text-underline-offset: ${Spacing[1]};\n }\n\n border-radius: ${({ theme }) => theme.button.borderRadius};\n ${focusOutline}\n\n &:active {\n color: ${({ theme }) => semanticColor(theme, 'FgAccentActive', Color.CorePurple900)};\n }\n`;\n\nconst StyledAnchor = styled.a`\n ${baseLinkStyles}\n`;\n\nconst StyledRouterLink = styled(RouterLink)`\n ${baseLinkStyles}\n`;\n\nexport const Link = ({ children, url, ...props }: LinkProps) => {\n // Check if the URL is external by looking at the protocol or if target is _blank\n const isAbsoluteUrl = /^https?:\\/\\//.test(url);\n const hasBlankTarget = props.target === '_blank';\n const isExternal = isAbsoluteUrl \|\| hasBlankTarget;\n\n if (isExternal) {\n const { 'aria-label': ariaLabel, ...anchorProps } = props;\n const externalProps = {\n href: url,\n target: '_blank',\n rel: 'noopener noreferrer',\n 'aria-label': ariaLabel,\n // Automatically inform screen readers that link opens in new window\n title: ariaLabel ? undefined : 'Opens in new window',\n ...anchorProps,\n };\n\n return (\n <StyledAnchor {...externalProps}>\n {children}\n <IconContainer>\n <LinkExternalIcon size={12} />\n </IconContainer>\n </StyledAnchor>\n );\n }\n\n const { 'aria-label': ariaLabel, ...routerProps } = props;\n const internalProps = {\n to: url,\n 'aria-label': ariaLabel,\n\n ...routerProps,\n };\n\n return <StyledRouterLink {...internalProps}>{children}</StyledRouterLink>;\n};\n\nexport default Link;\n"],"mappings":";;;;;;;;;;AAiDA,MAAM,gBAAgB,OAAO,IAAI;;;;;;;;;;;AAYjC,MAAM,iBAAiB,GAAG;IACtB,gBAAgB,GAAG;YACX,EAAE,YAAY,cAAc,OAAO,YAAY,MAAM,cAAc,CAAC;;;;;;;oBAOvC;oCACgB;;;;cAI3C,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,cAAc,CAAC;6BAC1D,QAAQ,GAAG;;;oBAGpB,EAAE,YAAY,MAAM,OAAO,aAAa;IACxD,aAAa;;;cAGH,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,cAAc,CAAC;;;AAIxF,MAAM,eAAe,OAAO,CAAC;IACzB,eAAe;;AAGnB,MAAM,mBAAmB,OAAO,WAAW;IACvC,eAAe;;AAGnB,MAAa,QAAQ,EAAE,UAAU,KAAK,GAAG,YAAuB;CAE9D,MAAM,gBAAgB,eAAe,KAAK,IAAI;CAC9C,MAAM,iBAAiB,MAAM,WAAW;AAGxC,KAFmB,iBAAiB,gBAEpB;EACd,MAAM,EAAE,cAAc,WAAW,GAAG,gBAAgB;AAWpD,SACE,qBAAC,cAAD;GAVA,MAAM;GACN,QAAQ;GACR,KAAK;GACL,cAAc;GAEd,OAAO,YAAY,KAAA,IAAY;GAC/B,GAAG;aAIH,CACG,UACD,oBAAC,eAAD,EAAA,UACE,oBAAC,kBAAD,EAAkB,MAAM,IAAM,CAAA,EAChB,CAAA,CACH;;;CAInB,MAAM,EAAE,cAAc,WAAW,GAAG,gBAAgB;AAQpD,QAAO,oBAAC,kBAAD;EANL,IAAI;EACJ,cAAc;EAEd,GAAG;EAGwC;EAA4B,CAAA"}

package/dist/Link.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as RouterLinkComponentProps } from "./types-Dhz6VMKx.mjs";
+import { r as RouterLinkComponentProps } from "./types-B5RbKp2V.mjs";
 import { AnchorHTMLAttributes, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";

package/dist/ListBox-CDG0EAPg.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListBox-CDG0EAPg.mjs","names":["ListBox","Button","FormControlContainer","DropdownMenu","MoreIcon","XIcon","Popover","Section","ListBox","BaseListBox"],"sources":["../src/components/ListBox/ListBox.tsx","../src/components/ListBox/LogicRow.tsx","../src/components/ListBox/index.ts"],"sourcesContent":["import { uniqueId } from 'lodash-es';\nimport {\n type ComponentPropsWithoutRef,\n createContext,\n type PropsWithChildren,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport {\n DropIndicator,\n type DroppableCollectionReorderEvent,\n GridList,\n GridListItem,\n Header,\n ListBoxSection as Section,\n useDragAndDrop,\n} from 'react-aria-components';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing, Typography } from '@persona/design-tokens';\nimport { DragIcon } from '@persona/icons';\nimport { MoreIcon, XIcon } from '@persona/icons/12px';\nimport Button, { type ButtonProps, IconButton } from 'design-system/components/Button';\nimport { FormGroupContext } from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport { Container as FormControlContainer } from 'design-system/components/FormControl';\nimport { ListItem, MenuHeading, type MenuItemProps } from 'design-system/components/Menu';\nimport Popover from 'design-system/components/Popover/Popover';\nimport Stack from 'design-system/components/Stack';\nimport { opaqueOver, withAlpha } from 'design-system/lib/color';\nimport { HeadlessAriaButton } from 'design-system/lib/HeadlessAriaButton';\nimport { isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { findIndexByKey, moveItemByIndex } from 'design-system/lib/reorderItems';\nimport {\n type MaybeSemanticTheme,\n semanticColor,\n semanticTokens,\n} from 'design-system/lib/semanticColor';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { semanticScrollbar } from 'design-system/mixins/scrollbar';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type { PersonaTheme } from 'design-system/theme';\n\nconst selectedHighlight = (theme: PersonaTheme & MaybeSemanticTheme) => {\n const tokens = semanticTokens(theme);\n return tokens\n ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25)\n : theme.color.background.highlight;\n};\n\nconst selectedActionsFill = (theme: PersonaTheme & MaybeSemanticTheme) => {\n const tokens = semanticTokens(theme);\n // Opaque so the strip, painted on top of the row, does not wash the accent a second time.\n return tokens\n ? opaqueOver(tokens.SurfaceAccent, tokens.Opacity25, tokens.SurfacePrimary)\n : theme.color.background.highlight;\n};\n\n// Context for sharing ListBox configuration with child items\ninterface ListBoxContextValue {\n size: 'sm' \| 'md';\n listBoxId: string;\n setItemHasActionsOrDelete: (value: boolean) => void;\n}\n\nconst ListBoxContext = createContext<ListBoxContextValue \| null>(null);\n\n/*\n Hook to access ListBox context values (like size) from child components\n /\nexport const useListBoxContext = () => {\n return useContext(ListBoxContext);\n};\n\nexport interface ListBoxProps<T extends object> extends Omit<\n ComponentPropsWithoutRef<typeof GridList<T>>,\n 'slot' \| 'autoFocus' \| 'orientation' \| 'shouldFocusWrap' \| 'dragAndDropHooks' \| 'layout'\n> {\n /\n Called when \"Add\" button is clicked. Only renders \"Add\" button if this prop is present.\n /\n onAdd?: ButtonProps['onClick'];\n\n /\n Called when \"Delete\" button is clicked. Only renders \"Delete\" button if this prop is present.\n /\n onDelete?: (selectedKeys: ListBoxProps<T>['selectedKeys']) => void;\n\n /\n Whether or not delete button should be disabled.\n /\n deleteDisabled?: boolean;\n\n /\n Whether or not the Add/Delete buttons should be shown.\n /\n editable?: boolean;\n\n /\n Text to display if no options are available.\n /\n emptyText?: string;\n\n /\n Whether or not to expand the box to the full width of the container.\n /\n fullWidth?: boolean;\n\n /\n When provided, enables drag and drop functionality.\n /\n reorderConfig?: {\n /\n Called when items are reordered via drag and drop. Receives the reordered\n * array of items when an item is dropped.\n /\n onReorder: (reorderedItems: T[]) => void;\n /\n The name of the property on the item that was passed as the key to\n * `ListBox.Item`. For exanple, if the item is`{ id: '1', name: 'First Item' }`,\n * and you passed ListBox.Item `key={item.id}`, then the `itemKeyPath`\n * should be `'id'`.\n /\n itemKeyPath: string;\n };\n\n /\n Size of the list box.\n /\n size?: 'sm' \| 'md';\n\n /\n Caps the list height and scrolls vertically inside the bordered container.\n /\n maxHeight?: number \| string;\n}\n\nconst StyledListBox = styled(GridList)<{\n fullWidth?: boolean;\n $size?: 'sm' \| 'md';\n $maxHeight?: number \| string;\n}>`\n ${({ $size }) => ($size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n\n box-sizing: border-box;\n background: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.BackgroundPrimary)};\n border-radius: ${BorderRadius.Md};\n border: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n padding: ${Spacing[1]};\n\n ${({ $maxHeight }) =>\n $maxHeight != null &&\n css`\n max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n overflow-y: auto;\n ${semanticScrollbar}\n `}\n\n ${({ fullWidth }) =>\n !fullWidth &&\n css`\n width: 204px;\n `}\n`;\n\nconst StyledDropIndicator = styled(DropIndicator)`\n height: 2px;\n background: ${({ theme }) => semanticColor(theme, 'BorderAccent', theme.color.text.brand)};\n`;\n\nconst ListBoxEmptyState = styled.button<{ $size?: 'sm' \| 'md' }>`\n ${({ $size }) => ($size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n\n background-color: transparent;\n outline: none;\n border: none;\n padding: ${Spacing[1]};\n color: ${({ theme }) => semanticColor(theme, 'FgSecondary', Color.TextSecondary)};\n`;\n\nconst ListBoxEmptyStateButton = styled(ListBoxEmptyState)`\n &:hover {\n cursor: pointer;\n }\n`;\n\nexport const ListBox = <T extends object>({\n children,\n onAdd,\n onDelete,\n emptyText,\n deleteDisabled,\n selectedKeys,\n onSelectionChange,\n editable = true,\n size = 'md',\n reorderConfig,\n items,\n maxHeight,\n ...props\n}: PropsWithChildren<ListBoxProps<T>>) => {\n const listBoxRef = useRef<HTMLDivElement>(null);\n const listBoxId = useMemo(() => uniqueId('listbox-'), []);\n const rowDropdownId = `${listBoxId}-row-dropdown`;\n const [itemHasActionsOrDelete, setItemHasActionsOrDelete] = useState(false);\n\n const { dragAndDropHooks } = useDragAndDrop({\n getItems: (keys) =>\n Array.from(keys).map((key) => ({\n 'text/plain': String(key),\n })),\n getAllowedDropOperations: () => ['move'],\n onReorder: (e: DroppableCollectionReorderEvent) => {\n if (!reorderConfig \|\| !items) {\n return;\n }\n const { onReorder, itemKeyPath } = reorderConfig;\n if (!onReorder \|\| !itemKeyPath) {\n return;\n }\n\n const draggedKey = Array.from(e.keys)[0];\n if (draggedKey == null) {\n return;\n }\n\n const itemsArr = Array.from(items);\n const fromIndex = findIndexByKey(itemsArr, itemKeyPath, String(draggedKey));\n const targetIndex = findIndexByKey(itemsArr, itemKeyPath, String(e.target.key));\n if (fromIndex === -1 \|\| targetIndex === -1) {\n return;\n }\n\n // After removing the dragged item, a target that sat after it shifts down by one.\n const targetIndexAfterRemoval = fromIndex < targetIndex ? targetIndex - 1 : targetIndex;\n const toIndex =\n e.target.dropPosition === 'before' ? targetIndexAfterRemoval : targetIndexAfterRemoval + 1;\n\n onReorder(moveItemByIndex(itemsArr, fromIndex, toIndex));\n },\n renderDropIndicator: (target) => <StyledDropIndicator target={target} />,\n });\n\n // If row dropdowns are open, deselect items (which also closes the dropdown) when clicking outside the ListBox\n const handleOutsideClick = useCallback(\n (event: MouseEvent) => {\n const rowDropdownIsOpen = document.querySelector(\n `[id=\"${rowDropdownId}\"][data-state=\"open\"]`,\n );\n if (!rowDropdownIsOpen) {\n return;\n }\n\n const target = event.target as HTMLElement;\n const isOutsideListBox = listBoxRef.current && !listBoxRef.current.contains(target);\n const isOnRowDropdownContent = target.closest(`[id=\"${rowDropdownId}\"]`);\n\n // Only deselect if:\n // 1. Click is outside the ListBox\n // 2. Click is not on popover content\n // 3. There are selected items\n // 4. onSelectionChange is available (to allow deselection)\n if (\n isOutsideListBox &&\n !isOnRowDropdownContent &&\n selectedKeys != null &&\n selectedKeys !== 'all' &&\n Array.from(selectedKeys).length > 0 &&\n onSelectionChange\n ) {\n // Deselect all items when clicking outside (but not on popover content)\n onSelectionChange(new Set());\n }\n },\n [selectedKeys, onSelectionChange, rowDropdownId],\n );\n\n // Set up outside click listener\n useEffect(() => {\n document.addEventListener('mousedown', handleOutsideClick);\n return () => {\n document.removeEventListener('mousedown', handleOutsideClick);\n };\n }, [handleOutsideClick]);\n\n return (\n <ListBoxContext.Provider value={{ size, listBoxId, setItemHasActionsOrDelete }}>\n <Stack spacing={Spacing[1]}>\n <StyledListBox\n ref={listBoxRef}\n onSelectionChange={onSelectionChange}\n renderEmptyState={() =>\n onAdd ? (\n <ListBoxEmptyStateButton as='button' onClick={onAdd} $size={size}>\n {emptyText \|\| 'Click to add an option'}\n </ListBoxEmptyStateButton>\n ) : (\n <ListBoxEmptyState type='button' $size={size}>\n {emptyText \|\| 'No options.'}\n </ListBoxEmptyState>\n )\n }\n selectedKeys={selectedKeys}\n $size={size}\n $maxHeight={maxHeight}\n items={items}\n // Without this, clicking delete triggers item selection (on press down)\n // before the delete/action callback fires (on click/press up)\n {...(itemHasActionsOrDelete && { shouldSelectOnPressUp: true })}\n {...(reorderConfig && { dragAndDropHooks })}\n {...props}\n >\n {children}\n </StyledListBox>\n {editable && (onAdd \|\| onDelete) && (\n <Stack direction='horizontal' spacing={Spacing[1]}>\n {onAdd && (\n <Button size='sm' variant='basic' width='auto' onClick={onAdd}>\n Add\n </Button>\n )}\n {onDelete && (\n <Button\n size='sm'\n variant='basic'\n width='auto'\n onClick={() => onDelete?.(selectedKeys)}\n disabled={deleteDisabled \|\| selectedKeys == null}\n >\n Delete\n </Button>\n )}\n </Stack>\n )}\n </Stack>\n </ListBoxContext.Provider>\n );\n};\n\nconst IconButtonWidth = 16;\nconst BackgroundFadeWidth = parseInt(Spacing[3]);\n\nconst RowActionsContainer = styled('div')`\n width: ${BackgroundFadeWidth + parseInt(Spacing[1]) + IconButtonWidth + parseInt(Spacing[2])}px;\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n padding-right: ${Spacing[2]};\n display: flex;\n align-items: center;\n justify-content: end;\n`;\n\nconst StyledItem = styled(ListItem)<{\n $hasActions?: boolean;\n $hasDelete?: boolean;\n}>`\n position: relative;\n padding: ${Spacing[1]} ${Spacing[2]};\n overflow: hidden;\n white-space: nowrap;\n\n ${RowActionsContainer} {\n background: linear-gradient(\n to right,\n transparent,\n ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.BackgroundPrimary)}\n ${BackgroundFadeWidth}px\n );\n }\n\n // If both actions and delete are present or only delete is present, hide actions by default, show on hover\n ${({ $hasActions, $hasDelete }) =>\n (($hasActions && $hasDelete) \|\| (!$hasActions && $hasDelete)) &&\n css`\n ${RowActionsContainer} {\n opacity: 0;\n }\n `}\n\n // increase the width of the row actions container when both actions and delete are present\n ${({ $hasActions, $hasDelete }) =>\n $hasActions &&\n $hasDelete &&\n css`\n ${RowActionsContainer} {\n width: ${BackgroundFadeWidth + parseInt(Spacing[1]) + IconButtonWidth 2 + parseInt(Spacing[2])}px;\n }\n `}\n\n &[data-focus-visible]:not([data-selected], [data-dragging]),\n &[data-hovered]:not([data-selected], [data-dragging]) {\n cursor: pointer;\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n background-color: ${({ theme }) => semanticColor(theme, 'SurfaceHover', Color.BackgroundSecondary)};\n\n ${RowActionsContainer} {\n opacity: 1;\n background: linear-gradient(\n to right,\n transparent,\n ${({ theme }) => semanticColor(theme, 'SurfaceHover', Color.BackgroundSecondary)}\n ${BackgroundFadeWidth}px\n );\n }\n }\n\n // react-aria leaves data-hovered off a row with no selection and no action, and reports a\n // pointer-driven focus as not focus-visible; ListItem still styles both from raw pseudo-classes.\n // A real hovered row keeps its hover fill while the pointer is down.\n &&:hover:not([data-hovered], [data-selected], [data-dragging]),\n &&:focus:not([data-focus-visible], [data-hovered], [data-selected], [data-dragging]) {\n cursor: default;\n background-color: transparent;\n }\n\n // Row actions stay reachable on rows react-aria never marks hovered or focus-visible.\n &:hover,\n &:focus-within {\n ${RowActionsContainer} {\n opacity: 1;\n }\n }\n\n &[data-selected],\n &[data-selected]${isFocused}, &[data-selected]:focus,\n &${isNotDisabled}${isHovered}[data-selected] {\n outline: none;\n color: ${({ theme }) => semanticColor(theme, 'FgAccent', theme.color.text.brand)};\n background-color: ${({ theme }) => selectedHighlight(theme)};\n\n ${RowActionsContainer} {\n opacity: 1;\n background: linear-gradient(\n to right,\n transparent,\n ${({ theme }) => selectedActionsFill(theme)} ${BackgroundFadeWidth}px\n );\n }\n }\n\n &[data-dragging] {\n opacity: 0.5;\n background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.BackgroundPrimary)};\n }\n\n .react-aria-Section:not(:first-child) {\n margin-top: ${Spacing[1]};\n }\n`;\n\nconst ContentContainer = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n`;\n\n// The drag handle wraps a 16x16 icon in an HTML <button>. Without this, the\n// button inherits the row's line-height and the icon aligns to the text\n// baseline, leaving a descender gap below it — so the icon visually sits\n// above the row's center. Making the button itself a flex container forces\n// the icon to be centered within the button's box.\nconst DragHandle = styled(HeadlessAriaButton)`\n display: flex;\n align-items: center;\n`;\n\nconst TextContent = styled.span`\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nconst DropdownPopoverHeading = styled.div<{ $size: 'sm' \| 'md' }>`\n ${({ $size }) => ($size === 'md' ? Typography.TextMediumBold : Typography.TextSmallBold)};\n border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', Color.BorderHairline)};\n padding: ${Spacing[2]} ${Spacing[3]} ${Spacing[1]};\n`;\n\nconst DropdownPopoverContent = styled(Stack)`\n min-width: var(--radix-popover-trigger-width);\n padding: ${Spacing[3]};\n\n ${FormControlContainer} {\n min-width: 0;\n }\n`;\n\nconst DropdownPopoverFooter = styled.div`\n border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', Color.BorderHairline)};\n padding: ${Spacing[1]};\n`;\n\nexport interface ListBoxItemProps extends ComponentPropsWithoutRef<typeof GridListItem> {\n /*\n Actions to display in a dropdown menu.\n * Supports all props from `MenuItem`.\n /\n actions?: Array<\n {\n label: string;\n onClick: () => void;\n } & Omit<MenuItemProps, 'children'>\n >;\n\n /\n Called when the delete (X) icon is clicked. Only renders item-level delete icon if this prop is present.\n * Receives the item's id and the click event as parameters.\n /\n onDelete?: (id: string \| number, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n /\n Size of the list box item.\n /\n size?: 'sm' \| 'md';\n\n /\n Form fields to be rendered inside a row dropdown popover.\n * The configField prop will be set to true for all fields via FormGroupContext.\n * Dropdown will be opened when the item is selected.\n /\n dropdownFormFields?: ReactNode;\n\n /\n Content to be rendered inside the row dropdown popover.\n * Dropdown will be opened when the item is selected.\n /\n dropdownContent?: ReactNode;\n\n /\n Optional heading text to display in the row dropdown popover.\n * Either dropdownFormFields or dropdownContent must also be provided,\n * otherwise the dropdown will not be rendered.\n /\n dropdownHeadingText?: string;\n\n /\n Footer to be rendered inside the row dropdown popover.\n * Either dropdownFormFields or dropdownContent must also be provided,\n * otherwise the dropdown will not be rendered.\n /\n dropdownFooter?: ReactNode;\n}\n\nconst ListBoxItem = ({\n children,\n actions,\n onDelete,\n size,\n dropdownHeadingText,\n dropdownFormFields,\n dropdownContent,\n dropdownFooter,\n ...props\n}: ListBoxItemProps) => {\n const context = useListBoxContext();\n // Use explicit prop if provided, otherwise fall back to context value, then default to 'md'\n const effectiveSize = size ?? context?.size ?? 'md';\n\n // Update context if this item has actions or onDelete\n useEffect(() => {\n if (context && (actions \|\| onDelete)) {\n context.setItemHasActionsOrDelete(true);\n }\n }, [context, actions, onDelete]);\n\n // Only render dropdown if there are form fields or content provided, not if there's just a header or footer.\n const shouldRenderDropdown = dropdownFormFields \|\| dropdownContent;\n\n const handleDelete = (e: React.MouseEvent<HTMLButtonElement>) => {\n // avoid triggering row selection\n e.preventDefault();\n e.stopPropagation();\n\n if (onDelete && props.id != null) {\n onDelete(props.id, e);\n }\n };\n\n return (\n <StyledItem\n as={GridListItem}\n $hasActions={actions && actions.length > 0}\n $hasDelete={!!onDelete}\n textValue={typeof children === 'string' ? children : undefined}\n size={effectiveSize}\n {...props}\n >\n {({ isSelected, allowsDragging }) => {\n const contentWithDragHandle = (\n <ContentContainer>\n {allowsDragging && (\n <DragHandle slot='drag' aria-label='Drag to reorder'>\n <DragIcon />\n </DragHandle>\n )}\n {typeof children === 'string' \|\| typeof children === 'number' ? (\n <TextContent>{children}</TextContent>\n ) : (\n children\n )}\n {(onDelete \|\| actions) && (\n <RowActionsContainer>\n {actions && (\n <DropdownMenu\n trigger={\n <IconButton aria-label='Actions'>\n <MoreIcon />\n </IconButton>\n }\n align='start'\n portal\n >\n {actions.map((action) => (\n <DropdownMenu.Item\n key={action.label}\n {...action}\n onClick={action.onClick}\n size={effectiveSize}\n >\n {action.label}\n </DropdownMenu.Item>\n ))}\n </DropdownMenu>\n )}\n {onDelete && (\n <IconButton aria-label='Delete' onClick={handleDelete}>\n <XIcon />\n </IconButton>\n )}\n </RowActionsContainer>\n )}\n </ContentContainer>\n );\n\n return shouldRenderDropdown ? (\n <Popover trigger={contentWithDragHandle} open={isSelected}>\n <Popover.Card\n id={`${context?.listBoxId}-row-dropdown`}\n noPadding\n style={{\n zIndex: Z_INDICES.modalDropdown,\n maxWidth: 'calc(100vw - 16px)',\n }}\n >\n {dropdownHeadingText && (\n <DropdownPopoverHeading $size={effectiveSize}>\n {dropdownHeadingText}\n </DropdownPopoverHeading>\n )}\n {dropdownFormFields && (\n <DropdownPopoverContent spacing={Spacing[2]}>\n <FormGroupContext.Provider\n value={{\n configField: true,\n labelTooltipZIndex: Z_INDICES.modalDropdownTooltip,\n }}\n >\n {dropdownFormFields}\n </FormGroupContext.Provider>\n </DropdownPopoverContent>\n )}\n {dropdownContent && (\n <DropdownPopoverContent spacing={Spacing[3]}>\n {dropdownContent}\n </DropdownPopoverContent>\n )}\n {dropdownFooter && <DropdownPopoverFooter>{dropdownFooter}</DropdownPopoverFooter>}\n </Popover.Card>\n </Popover>\n ) : (\n contentWithDragHandle\n );\n }}\n </StyledItem>\n );\n};\n\nconst StyledMenuHeading = styled(MenuHeading)`\n padding: ${Spacing[1]} ${Spacing[2]};\n`;\n\nconst ListBoxHeader = (props: ComponentPropsWithoutRef<typeof Header>) => {\n return <StyledMenuHeading as={Header} {...props} />;\n};\n\nListBox.Item = ListBoxItem;\n\nListBox.Section = Section;\n\nListBox.Header = ListBoxHeader;\n\nexport default ListBox;\n","import type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport Sticker, {\n StickerContainer,\n StickerContentContainer,\n StyledTruncatedText,\n} from 'design-system/components/Sticker';\nimport { isFocused, isHovered } from 'design-system/lib/pseudoClass';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport type { InputSizes } from 'design-system/mixins/input';\n\nimport ListBox, { type ListBoxItemProps } from './ListBox';\n\nconst LogicRowSticker = styled(Sticker)`\n display: inline;\n height: initial;\n\n ${StickerContainer}, ${StickerContentContainer}, ${StyledTruncatedText} {\n display: inline;\n }\n`;\n\nconst LogicListBoxItem = styled(ListBox.Item)`\n padding: 0;\n\n &[data-selected],\n &[data-selected]${isFocused}, &[data-selected]:focus,\n &[data-selected]${isHovered}, &[data-selected]:hover,\n &[data-selected]:not(:disabled)${isHovered}, &[data-selected]:not(:disabled):hover {\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n\n ${LogicRowSticker} {\n background-color: ${({ theme }) =>\n semanticColor(theme, 'FeedbackAccent2', Color.BackgroundLabelPurple)};\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimaryStatic};`)}\n }\n }\n\n &[data-hovered]:not([data-selected]) {\n ${LogicRowSticker} {\n background-color: ${({ theme }) =>\n semanticColor(theme, 'FeedbackNeutral2', Color.BackgroundLabelGreyHover)};\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n }\n }\n`;\n\nconst LogicRuleContainer = styled.div<{ $hideCondition?: boolean; $size?: InputSizes }>`\n display: grid;\n grid-template-columns: ${({ $hideCondition }) =>\n $hideCondition ? 'repeat(3, min-content)' : '32px repeat(3, min-content)'};\n grid-gap: 6px;\n align-items: baseline;\n padding: ${Spacing[1]};\n width: 100%;\n ${({ $size }) => ($size === 'md' ? Typography.TextMedium : Typography.TextSmall)}\n`;\n\nexport interface LogicRowProps extends ListBoxItemProps {\n condition: string;\n attributeName?: string;\n operator?: string;\n matchLevelName?: string;\n editable?: boolean;\n id: string \| number;\n dropdownHeadingText?: string;\n /* Form fields rendered inside the row dropdown. /\n dropdownFormFields?: ReactNode;\n size?: InputSizes;\n /\n Removes the condition column when the surrounding group already communicates\n * the conjunction.\n */\n hideCondition?: boolean;\n}\n\nconst LogicRow = ({\n condition,\n attributeName,\n operator,\n matchLevelName,\n editable = true,\n id,\n onDelete,\n dropdownHeadingText,\n dropdownFormFields,\n size,\n hideCondition = false,\n ...listBoxItemProps\n}: LogicRowProps) => {\n return (\n <LogicListBoxItem\n id={id}\n disabled={!editable}\n onDelete={onDelete}\n dropdownHeadingText={dropdownHeadingText}\n dropdownFormFields={dropdownFormFields}\n {...listBoxItemProps}\n size={size}\n >\n <LogicRuleContainer $hideCondition={hideCondition} $size={size}>\n {!hideCondition && (condition \|\| '\\u00A0')}\n {attributeName && (\n <>\n <LogicRowSticker disabled={!editable}>{attributeName}</LogicRowSticker>\n {operator}\n {matchLevelName && (\n <LogicRowSticker disabled={!editable}>{matchLevelName}</LogicRowSticker>\n )}\n </>\n )}\n </LogicRuleContainer>\n </LogicListBoxItem>\n );\n};\n\nexport default LogicRow;\n","import BaseListBox, { useListBoxContext } from './ListBox';\nimport LogicRow from './LogicRow';\n\nconst ListBox = Object.assign(BaseListBox, { LogicRow });\n\nexport { ListBox, useListBoxContext };\nexport type { ListBoxProps, ListBoxItemProps } from './ListBox';\nexport type { LogicRowProps } from './LogicRow';\n\nexport default ListBox;\n"],"mappings":"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"}
1	+ {"version":3,"file":"ListBox-CDG0EAPg.mjs","names":["ListBox","Button","FormControlContainer","DropdownMenu","MoreIcon","XIcon","Popover","Section","ListBox","BaseListBox"],"sources":["../src/components/ListBox/ListBox.tsx","../src/components/ListBox/LogicRow.tsx","../src/components/ListBox/index.ts"],"sourcesContent":["import { uniqueId } from 'lodash-es';\nimport {\n type ComponentPropsWithoutRef,\n createContext,\n type PropsWithChildren,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport {\n DropIndicator,\n type DroppableCollectionReorderEvent,\n GridList,\n GridListItem,\n Header,\n ListBoxSection as Section,\n useDragAndDrop,\n} from 'react-aria-components';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing, Typography } from '@persona/design-tokens';\nimport { DragIcon } from '@persona/icons';\nimport { MoreIcon, XIcon } from '@persona/icons/12px';\n\nimport Button, { type ButtonProps, IconButton } from '#src/components/Button';\nimport { FormGroupContext } from '#src/components/ConfigFormGroup/useFormGroup';\nimport DropdownMenu from '#src/components/DropdownMenu';\nimport { Container as FormControlContainer } from '#src/components/FormControl';\nimport { ListItem, MenuHeading, type MenuItemProps } from '#src/components/Menu';\nimport Popover from '#src/components/Popover/Popover';\nimport Stack from '#src/components/Stack';\nimport { opaqueOver, withAlpha } from '#src/lib/color';\nimport { HeadlessAriaButton } from '#src/lib/HeadlessAriaButton';\nimport { isFocused, isHovered, isNotDisabled } from '#src/lib/pseudoClass';\nimport { findIndexByKey, moveItemByIndex } from '#src/lib/reorderItems';\nimport { type MaybeSemanticTheme, semanticColor, semanticTokens } from '#src/lib/semanticColor';\nimport { Z_INDICES } from '#src/lib/zindex';\nimport { semanticScrollbar } from '#src/mixins/scrollbar';\nimport { paragraphMixins } from '#src/mixins/text';\nimport type { PersonaTheme } from '#src/theme';\n\nconst selectedHighlight = (theme: PersonaTheme & MaybeSemanticTheme) => {\n const tokens = semanticTokens(theme);\n return tokens\n ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25)\n : theme.color.background.highlight;\n};\n\nconst selectedActionsFill = (theme: PersonaTheme & MaybeSemanticTheme) => {\n const tokens = semanticTokens(theme);\n // Opaque so the strip, painted on top of the row, does not wash the accent a second time.\n return tokens\n ? opaqueOver(tokens.SurfaceAccent, tokens.Opacity25, tokens.SurfacePrimary)\n : theme.color.background.highlight;\n};\n\n// Context for sharing ListBox configuration with child items\ninterface ListBoxContextValue {\n size: 'sm' \| 'md';\n listBoxId: string;\n setItemHasActionsOrDelete: (value: boolean) => void;\n}\n\nconst ListBoxContext = createContext<ListBoxContextValue \| null>(null);\n\n/*\n Hook to access ListBox context values (like size) from child components\n /\nexport const useListBoxContext = () => {\n return useContext(ListBoxContext);\n};\n\nexport interface ListBoxProps<T extends object> extends Omit<\n ComponentPropsWithoutRef<typeof GridList<T>>,\n 'slot' \| 'autoFocus' \| 'orientation' \| 'shouldFocusWrap' \| 'dragAndDropHooks' \| 'layout'\n> {\n /\n Called when \"Add\" button is clicked. Only renders \"Add\" button if this prop is present.\n /\n onAdd?: ButtonProps['onClick'];\n\n /\n Called when \"Delete\" button is clicked. Only renders \"Delete\" button if this prop is present.\n /\n onDelete?: (selectedKeys: ListBoxProps<T>['selectedKeys']) => void;\n\n /\n Whether or not delete button should be disabled.\n /\n deleteDisabled?: boolean;\n\n /\n Whether or not the Add/Delete buttons should be shown.\n /\n editable?: boolean;\n\n /\n Text to display if no options are available.\n /\n emptyText?: string;\n\n /\n Whether or not to expand the box to the full width of the container.\n /\n fullWidth?: boolean;\n\n /\n When provided, enables drag and drop functionality.\n /\n reorderConfig?: {\n /\n Called when items are reordered via drag and drop. Receives the reordered\n * array of items when an item is dropped.\n /\n onReorder: (reorderedItems: T[]) => void;\n /\n The name of the property on the item that was passed as the key to\n * `ListBox.Item`. For exanple, if the item is`{ id: '1', name: 'First Item' }`,\n * and you passed ListBox.Item `key={item.id}`, then the `itemKeyPath`\n * should be `'id'`.\n /\n itemKeyPath: string;\n };\n\n /\n Size of the list box.\n /\n size?: 'sm' \| 'md';\n\n /\n Caps the list height and scrolls vertically inside the bordered container.\n /\n maxHeight?: number \| string;\n}\n\nconst StyledListBox = styled(GridList)<{\n fullWidth?: boolean;\n $size?: 'sm' \| 'md';\n $maxHeight?: number \| string;\n}>`\n ${({ $size }) => ($size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n\n box-sizing: border-box;\n background: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.BackgroundPrimary)};\n border-radius: ${BorderRadius.Md};\n border: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n padding: ${Spacing[1]};\n\n ${({ $maxHeight }) =>\n $maxHeight != null &&\n css`\n max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n overflow-y: auto;\n ${semanticScrollbar}\n `}\n\n ${({ fullWidth }) =>\n !fullWidth &&\n css`\n width: 204px;\n `}\n`;\n\nconst StyledDropIndicator = styled(DropIndicator)`\n height: 2px;\n background: ${({ theme }) => semanticColor(theme, 'BorderAccent', theme.color.text.brand)};\n`;\n\nconst ListBoxEmptyState = styled.button<{ $size?: 'sm' \| 'md' }>`\n ${({ $size }) => ($size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n\n background-color: transparent;\n outline: none;\n border: none;\n padding: ${Spacing[1]};\n color: ${({ theme }) => semanticColor(theme, 'FgSecondary', Color.TextSecondary)};\n`;\n\nconst ListBoxEmptyStateButton = styled(ListBoxEmptyState)`\n &:hover {\n cursor: pointer;\n }\n`;\n\nexport const ListBox = <T extends object>({\n children,\n onAdd,\n onDelete,\n emptyText,\n deleteDisabled,\n selectedKeys,\n onSelectionChange,\n editable = true,\n size = 'md',\n reorderConfig,\n items,\n maxHeight,\n ...props\n}: PropsWithChildren<ListBoxProps<T>>) => {\n const listBoxRef = useRef<HTMLDivElement>(null);\n const listBoxId = useMemo(() => uniqueId('listbox-'), []);\n const rowDropdownId = `${listBoxId}-row-dropdown`;\n const [itemHasActionsOrDelete, setItemHasActionsOrDelete] = useState(false);\n\n const { dragAndDropHooks } = useDragAndDrop({\n getItems: (keys) =>\n Array.from(keys).map((key) => ({\n 'text/plain': String(key),\n })),\n getAllowedDropOperations: () => ['move'],\n onReorder: (e: DroppableCollectionReorderEvent) => {\n if (!reorderConfig \|\| !items) {\n return;\n }\n const { onReorder, itemKeyPath } = reorderConfig;\n if (!onReorder \|\| !itemKeyPath) {\n return;\n }\n\n const draggedKey = Array.from(e.keys)[0];\n if (draggedKey == null) {\n return;\n }\n\n const itemsArr = Array.from(items);\n const fromIndex = findIndexByKey(itemsArr, itemKeyPath, String(draggedKey));\n const targetIndex = findIndexByKey(itemsArr, itemKeyPath, String(e.target.key));\n if (fromIndex === -1 \|\| targetIndex === -1) {\n return;\n }\n\n // After removing the dragged item, a target that sat after it shifts down by one.\n const targetIndexAfterRemoval = fromIndex < targetIndex ? targetIndex - 1 : targetIndex;\n const toIndex =\n e.target.dropPosition === 'before' ? targetIndexAfterRemoval : targetIndexAfterRemoval + 1;\n\n onReorder(moveItemByIndex(itemsArr, fromIndex, toIndex));\n },\n renderDropIndicator: (target) => <StyledDropIndicator target={target} />,\n });\n\n // If row dropdowns are open, deselect items (which also closes the dropdown) when clicking outside the ListBox\n const handleOutsideClick = useCallback(\n (event: MouseEvent) => {\n const rowDropdownIsOpen = document.querySelector(\n `[id=\"${rowDropdownId}\"][data-state=\"open\"]`,\n );\n if (!rowDropdownIsOpen) {\n return;\n }\n\n const target = event.target as HTMLElement;\n const isOutsideListBox = listBoxRef.current && !listBoxRef.current.contains(target);\n const isOnRowDropdownContent = target.closest(`[id=\"${rowDropdownId}\"]`);\n\n // Only deselect if:\n // 1. Click is outside the ListBox\n // 2. Click is not on popover content\n // 3. There are selected items\n // 4. onSelectionChange is available (to allow deselection)\n if (\n isOutsideListBox &&\n !isOnRowDropdownContent &&\n selectedKeys != null &&\n selectedKeys !== 'all' &&\n Array.from(selectedKeys).length > 0 &&\n onSelectionChange\n ) {\n // Deselect all items when clicking outside (but not on popover content)\n onSelectionChange(new Set());\n }\n },\n [selectedKeys, onSelectionChange, rowDropdownId],\n );\n\n // Set up outside click listener\n useEffect(() => {\n document.addEventListener('mousedown', handleOutsideClick);\n return () => {\n document.removeEventListener('mousedown', handleOutsideClick);\n };\n }, [handleOutsideClick]);\n\n return (\n <ListBoxContext.Provider value={{ size, listBoxId, setItemHasActionsOrDelete }}>\n <Stack spacing={Spacing[1]}>\n <StyledListBox\n ref={listBoxRef}\n onSelectionChange={onSelectionChange}\n renderEmptyState={() =>\n onAdd ? (\n <ListBoxEmptyStateButton as='button' onClick={onAdd} $size={size}>\n {emptyText \|\| 'Click to add an option'}\n </ListBoxEmptyStateButton>\n ) : (\n <ListBoxEmptyState type='button' $size={size}>\n {emptyText \|\| 'No options.'}\n </ListBoxEmptyState>\n )\n }\n selectedKeys={selectedKeys}\n $size={size}\n $maxHeight={maxHeight}\n items={items}\n // Without this, clicking delete triggers item selection (on press down)\n // before the delete/action callback fires (on click/press up)\n {...(itemHasActionsOrDelete && { shouldSelectOnPressUp: true })}\n {...(reorderConfig && { dragAndDropHooks })}\n {...props}\n >\n {children}\n </StyledListBox>\n {editable && (onAdd \|\| onDelete) && (\n <Stack direction='horizontal' spacing={Spacing[1]}>\n {onAdd && (\n <Button size='sm' variant='basic' width='auto' onClick={onAdd}>\n Add\n </Button>\n )}\n {onDelete && (\n <Button\n size='sm'\n variant='basic'\n width='auto'\n onClick={() => onDelete?.(selectedKeys)}\n disabled={deleteDisabled \|\| selectedKeys == null}\n >\n Delete\n </Button>\n )}\n </Stack>\n )}\n </Stack>\n </ListBoxContext.Provider>\n );\n};\n\nconst IconButtonWidth = 16;\nconst BackgroundFadeWidth = parseInt(Spacing[3]);\n\nconst RowActionsContainer = styled('div')`\n width: ${BackgroundFadeWidth + parseInt(Spacing[1]) + IconButtonWidth + parseInt(Spacing[2])}px;\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n padding-right: ${Spacing[2]};\n display: flex;\n align-items: center;\n justify-content: end;\n`;\n\nconst StyledItem = styled(ListItem)<{\n $hasActions?: boolean;\n $hasDelete?: boolean;\n}>`\n position: relative;\n padding: ${Spacing[1]} ${Spacing[2]};\n overflow: hidden;\n white-space: nowrap;\n\n ${RowActionsContainer} {\n background: linear-gradient(\n to right,\n transparent,\n ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.BackgroundPrimary)}\n ${BackgroundFadeWidth}px\n );\n }\n\n // If both actions and delete are present or only delete is present, hide actions by default, show on hover\n ${({ $hasActions, $hasDelete }) =>\n (($hasActions && $hasDelete) \|\| (!$hasActions && $hasDelete)) &&\n css`\n ${RowActionsContainer} {\n opacity: 0;\n }\n `}\n\n // increase the width of the row actions container when both actions and delete are present\n ${({ $hasActions, $hasDelete }) =>\n $hasActions &&\n $hasDelete &&\n css`\n ${RowActionsContainer} {\n width: ${BackgroundFadeWidth + parseInt(Spacing[1]) + IconButtonWidth 2 + parseInt(Spacing[2])}px;\n }\n `}\n\n &[data-focus-visible]:not([data-selected], [data-dragging]),\n &[data-hovered]:not([data-selected], [data-dragging]) {\n cursor: pointer;\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n background-color: ${({ theme }) => semanticColor(theme, 'SurfaceHover', Color.BackgroundSecondary)};\n\n ${RowActionsContainer} {\n opacity: 1;\n background: linear-gradient(\n to right,\n transparent,\n ${({ theme }) => semanticColor(theme, 'SurfaceHover', Color.BackgroundSecondary)}\n ${BackgroundFadeWidth}px\n );\n }\n }\n\n // react-aria leaves data-hovered off a row with no selection and no action, and reports a\n // pointer-driven focus as not focus-visible; ListItem still styles both from raw pseudo-classes.\n // A real hovered row keeps its hover fill while the pointer is down.\n &&:hover:not([data-hovered], [data-selected], [data-dragging]),\n &&:focus:not([data-focus-visible], [data-hovered], [data-selected], [data-dragging]) {\n cursor: default;\n background-color: transparent;\n }\n\n // Row actions stay reachable on rows react-aria never marks hovered or focus-visible.\n &:hover,\n &:focus-within {\n ${RowActionsContainer} {\n opacity: 1;\n }\n }\n\n &[data-selected],\n &[data-selected]${isFocused}, &[data-selected]:focus,\n &${isNotDisabled}${isHovered}[data-selected] {\n outline: none;\n color: ${({ theme }) => semanticColor(theme, 'FgAccent', theme.color.text.brand)};\n background-color: ${({ theme }) => selectedHighlight(theme)};\n\n ${RowActionsContainer} {\n opacity: 1;\n background: linear-gradient(\n to right,\n transparent,\n ${({ theme }) => selectedActionsFill(theme)} ${BackgroundFadeWidth}px\n );\n }\n }\n\n &[data-dragging] {\n opacity: 0.5;\n background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.BackgroundPrimary)};\n }\n\n .react-aria-Section:not(:first-child) {\n margin-top: ${Spacing[1]};\n }\n`;\n\nconst ContentContainer = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n`;\n\n// The drag handle wraps a 16x16 icon in an HTML <button>. Without this, the\n// button inherits the row's line-height and the icon aligns to the text\n// baseline, leaving a descender gap below it — so the icon visually sits\n// above the row's center. Making the button itself a flex container forces\n// the icon to be centered within the button's box.\nconst DragHandle = styled(HeadlessAriaButton)`\n display: flex;\n align-items: center;\n`;\n\nconst TextContent = styled.span`\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nconst DropdownPopoverHeading = styled.div<{ $size: 'sm' \| 'md' }>`\n ${({ $size }) => ($size === 'md' ? Typography.TextMediumBold : Typography.TextSmallBold)};\n border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', Color.BorderHairline)};\n padding: ${Spacing[2]} ${Spacing[3]} ${Spacing[1]};\n`;\n\nconst DropdownPopoverContent = styled(Stack)`\n min-width: var(--radix-popover-trigger-width);\n padding: ${Spacing[3]};\n\n ${FormControlContainer} {\n min-width: 0;\n }\n`;\n\nconst DropdownPopoverFooter = styled.div`\n border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', Color.BorderHairline)};\n padding: ${Spacing[1]};\n`;\n\nexport interface ListBoxItemProps extends ComponentPropsWithoutRef<typeof GridListItem> {\n /*\n Actions to display in a dropdown menu.\n * Supports all props from `MenuItem`.\n /\n actions?: Array<\n {\n label: string;\n onClick: () => void;\n } & Omit<MenuItemProps, 'children'>\n >;\n\n /\n Called when the delete (X) icon is clicked. Only renders item-level delete icon if this prop is present.\n * Receives the item's id and the click event as parameters.\n /\n onDelete?: (id: string \| number, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n /\n Size of the list box item.\n /\n size?: 'sm' \| 'md';\n\n /\n Form fields to be rendered inside a row dropdown popover.\n * The configField prop will be set to true for all fields via FormGroupContext.\n * Dropdown will be opened when the item is selected.\n /\n dropdownFormFields?: ReactNode;\n\n /\n Content to be rendered inside the row dropdown popover.\n * Dropdown will be opened when the item is selected.\n /\n dropdownContent?: ReactNode;\n\n /\n Optional heading text to display in the row dropdown popover.\n * Either dropdownFormFields or dropdownContent must also be provided,\n * otherwise the dropdown will not be rendered.\n /\n dropdownHeadingText?: string;\n\n /\n Footer to be rendered inside the row dropdown popover.\n * Either dropdownFormFields or dropdownContent must also be provided,\n * otherwise the dropdown will not be rendered.\n /\n dropdownFooter?: ReactNode;\n}\n\nconst ListBoxItem = ({\n children,\n actions,\n onDelete,\n size,\n dropdownHeadingText,\n dropdownFormFields,\n dropdownContent,\n dropdownFooter,\n ...props\n}: ListBoxItemProps) => {\n const context = useListBoxContext();\n // Use explicit prop if provided, otherwise fall back to context value, then default to 'md'\n const effectiveSize = size ?? context?.size ?? 'md';\n\n // Update context if this item has actions or onDelete\n useEffect(() => {\n if (context && (actions \|\| onDelete)) {\n context.setItemHasActionsOrDelete(true);\n }\n }, [context, actions, onDelete]);\n\n // Only render dropdown if there are form fields or content provided, not if there's just a header or footer.\n const shouldRenderDropdown = dropdownFormFields \|\| dropdownContent;\n\n const handleDelete = (e: React.MouseEvent<HTMLButtonElement>) => {\n // avoid triggering row selection\n e.preventDefault();\n e.stopPropagation();\n\n if (onDelete && props.id != null) {\n onDelete(props.id, e);\n }\n };\n\n return (\n <StyledItem\n as={GridListItem}\n $hasActions={actions && actions.length > 0}\n $hasDelete={!!onDelete}\n textValue={typeof children === 'string' ? children : undefined}\n size={effectiveSize}\n {...props}\n >\n {({ isSelected, allowsDragging }) => {\n const contentWithDragHandle = (\n <ContentContainer>\n {allowsDragging && (\n <DragHandle slot='drag' aria-label='Drag to reorder'>\n <DragIcon />\n </DragHandle>\n )}\n {typeof children === 'string' \|\| typeof children === 'number' ? (\n <TextContent>{children}</TextContent>\n ) : (\n children\n )}\n {(onDelete \|\| actions) && (\n <RowActionsContainer>\n {actions && (\n <DropdownMenu\n trigger={\n <IconButton aria-label='Actions'>\n <MoreIcon />\n </IconButton>\n }\n align='start'\n portal\n >\n {actions.map((action) => (\n <DropdownMenu.Item\n key={action.label}\n {...action}\n onClick={action.onClick}\n size={effectiveSize}\n >\n {action.label}\n </DropdownMenu.Item>\n ))}\n </DropdownMenu>\n )}\n {onDelete && (\n <IconButton aria-label='Delete' onClick={handleDelete}>\n <XIcon />\n </IconButton>\n )}\n </RowActionsContainer>\n )}\n </ContentContainer>\n );\n\n return shouldRenderDropdown ? (\n <Popover trigger={contentWithDragHandle} open={isSelected}>\n <Popover.Card\n id={`${context?.listBoxId}-row-dropdown`}\n noPadding\n style={{\n zIndex: Z_INDICES.modalDropdown,\n maxWidth: 'calc(100vw - 16px)',\n }}\n >\n {dropdownHeadingText && (\n <DropdownPopoverHeading $size={effectiveSize}>\n {dropdownHeadingText}\n </DropdownPopoverHeading>\n )}\n {dropdownFormFields && (\n <DropdownPopoverContent spacing={Spacing[2]}>\n <FormGroupContext.Provider\n value={{\n configField: true,\n labelTooltipZIndex: Z_INDICES.modalDropdownTooltip,\n }}\n >\n {dropdownFormFields}\n </FormGroupContext.Provider>\n </DropdownPopoverContent>\n )}\n {dropdownContent && (\n <DropdownPopoverContent spacing={Spacing[3]}>\n {dropdownContent}\n </DropdownPopoverContent>\n )}\n {dropdownFooter && <DropdownPopoverFooter>{dropdownFooter}</DropdownPopoverFooter>}\n </Popover.Card>\n </Popover>\n ) : (\n contentWithDragHandle\n );\n }}\n </StyledItem>\n );\n};\n\nconst StyledMenuHeading = styled(MenuHeading)`\n padding: ${Spacing[1]} ${Spacing[2]};\n`;\n\nconst ListBoxHeader = (props: ComponentPropsWithoutRef<typeof Header>) => {\n return <StyledMenuHeading as={Header} {...props} />;\n};\n\nListBox.Item = ListBoxItem;\n\nListBox.Section = Section;\n\nListBox.Header = ListBoxHeader;\n\nexport default ListBox;\n","import type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\n\nimport Sticker, {\n StickerContainer,\n StickerContentContainer,\n StyledTruncatedText,\n} from '#src/components/Sticker';\nimport { isFocused, isHovered } from '#src/lib/pseudoClass';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\nimport type { InputSizes } from '#src/mixins/input';\n\nimport ListBox, { type ListBoxItemProps } from './ListBox';\n\nconst LogicRowSticker = styled(Sticker)`\n display: inline;\n height: initial;\n\n ${StickerContainer}, ${StickerContentContainer}, ${StyledTruncatedText} {\n display: inline;\n }\n`;\n\nconst LogicListBoxItem = styled(ListBox.Item)`\n padding: 0;\n\n &[data-selected],\n &[data-selected]${isFocused}, &[data-selected]:focus,\n &[data-selected]${isHovered}, &[data-selected]:hover,\n &[data-selected]:not(:disabled)${isHovered}, &[data-selected]:not(:disabled):hover {\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n\n ${LogicRowSticker} {\n background-color: ${({ theme }) =>\n semanticColor(theme, 'FeedbackAccent2', Color.BackgroundLabelPurple)};\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimaryStatic};`)}\n }\n }\n\n &[data-hovered]:not([data-selected]) {\n ${LogicRowSticker} {\n background-color: ${({ theme }) =>\n semanticColor(theme, 'FeedbackNeutral2', Color.BackgroundLabelGreyHover)};\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n }\n }\n`;\n\nconst LogicRuleContainer = styled.div<{ $hideCondition?: boolean; $size?: InputSizes }>`\n display: grid;\n grid-template-columns: ${({ $hideCondition }) =>\n $hideCondition ? 'repeat(3, min-content)' : '32px repeat(3, min-content)'};\n grid-gap: 6px;\n align-items: baseline;\n padding: ${Spacing[1]};\n width: 100%;\n ${({ $size }) => ($size === 'md' ? Typography.TextMedium : Typography.TextSmall)}\n`;\n\nexport interface LogicRowProps extends ListBoxItemProps {\n condition: string;\n attributeName?: string;\n operator?: string;\n matchLevelName?: string;\n editable?: boolean;\n id: string \| number;\n dropdownHeadingText?: string;\n /* Form fields rendered inside the row dropdown. /\n dropdownFormFields?: ReactNode;\n size?: InputSizes;\n /\n Removes the condition column when the surrounding group already communicates\n * the conjunction.\n */\n hideCondition?: boolean;\n}\n\nconst LogicRow = ({\n condition,\n attributeName,\n operator,\n matchLevelName,\n editable = true,\n id,\n onDelete,\n dropdownHeadingText,\n dropdownFormFields,\n size,\n hideCondition = false,\n ...listBoxItemProps\n}: LogicRowProps) => {\n return (\n <LogicListBoxItem\n id={id}\n disabled={!editable}\n onDelete={onDelete}\n dropdownHeadingText={dropdownHeadingText}\n dropdownFormFields={dropdownFormFields}\n {...listBoxItemProps}\n size={size}\n >\n <LogicRuleContainer $hideCondition={hideCondition} $size={size}>\n {!hideCondition && (condition \|\| '\\u00A0')}\n {attributeName && (\n <>\n <LogicRowSticker disabled={!editable}>{attributeName}</LogicRowSticker>\n {operator}\n {matchLevelName && (\n <LogicRowSticker disabled={!editable}>{matchLevelName}</LogicRowSticker>\n )}\n </>\n )}\n </LogicRuleContainer>\n </LogicListBoxItem>\n );\n};\n\nexport default LogicRow;\n","import BaseListBox, { useListBoxContext } from './ListBox';\nimport LogicRow from './LogicRow';\n\nconst ListBox = Object.assign(BaseListBox, { LogicRow });\n\nexport { ListBox, useListBoxContext };\nexport type { ListBoxProps, ListBoxItemProps } from './ListBox';\nexport type { LogicRowProps } from './LogicRow';\n\nexport default ListBox;\n"],"mappings":"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"}

package/dist/{ListBox-D9SYTzOd.d.mts → ListBox-DxbXE_EE.d.mts} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { r as ButtonProps } from "./Button-Cg8KyT5M.mjs";
-import { l as MenuItemProps } from "./Menu-DizjcMbO.mjs";
+import { r as ButtonProps } from "./Button-B79_aXfC.mjs";
+import { l as MenuItemProps } from "./Menu-Bq6Lij2L.mjs";
 import { ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from "react";
 import * as _$react_aria_components0 from "react-aria-components";
 import { GridList, GridListItem, Header } from "react-aria-components";
@@ -140,4 +140,4 @@ interface ListBoxItemProps extends ComponentPropsWithoutRef<typeof GridListItem>
 }
 //#endregion
 export { useListBoxContext as i, ListBoxItemProps as n, ListBoxProps$1 as r, ListBox as t };
-//# sourceMappingURL=ListBox-D9SYTzOd.d.mts.map
+//# sourceMappingURL=ListBox-DxbXE_EE.d.mts.map

package/dist/ListBox.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps, t as ListBox } from "./ListBox-D9SYTzOd.mjs";
+import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps, t as ListBox } from "./ListBox-DxbXE_EE.mjs";
 export { ListBox, ListBox as default, ListBoxItemProps, ListBoxProps, useListBoxContext };

package/dist/{ListBoxField-CtPDd_Aw.d.mts → ListBoxField-DVLggscv.d.mts} RENAMED Viewed

@@ -1,6 +1,6 @@
-import { l as MenuItemProps } from "./Menu-DizjcMbO.mjs";
-import { o as ImplementsFormField } from "./inputFields-CYttsz5M.mjs";
-import { r as ListBoxProps } from "./ListBox-D9SYTzOd.mjs";
+import { l as MenuItemProps } from "./Menu-Bq6Lij2L.mjs";
+import { o as ImplementsFormField } from "./inputFields-iRg_emVK.mjs";
+import { r as ListBoxProps } from "./ListBox-DxbXE_EE.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -48,4 +48,4 @@ declare const ListBoxField: <T extends object>({
 }: ListBoxFieldProps<T>) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { ListBoxField as t };
-//# sourceMappingURL=ListBoxField-CtPDd_Aw.d.mts.map
+//# sourceMappingURL=ListBoxField-DVLggscv.d.mts.map

package/dist/ListBoxField.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as ListBoxField } from "./ListBoxField-CtPDd_Aw.mjs";
+import { t as ListBoxField } from "./ListBoxField-DVLggscv.mjs";
 export { ListBoxField as default };

package/dist/LoadingShimmer-oPIv2ESr.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LoadingShimmer-oPIv2ESr.mjs","names":[],"sources":["../src/components/LoadingShimmer/LoadingShimmer.tsx"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { ComponentPropsWithoutRef, FC } from 'react';\nimport styled from 'styled-components';\n\nimport { BorderRadius, Color } from '@persona/design-tokens';\nimport { type CssColor, withAlpha } from '~~design-system~~/lib/color';\nimport {\n type MaybeSemanticTheme~~,\n~~ semanticColor~~,\n~~ semanticTokens~~,\n~~} from '~~design-system~~/lib/semanticColor';\nimport type { HeadingSize, ParagraphSize } from '~~design-system~~/mixins/text';\n\n// A one-off colour predating the token set; no primitive matches it exactly.\n// oxlint-disable-next-line persona-web/no-raw-hex-colors\nconst LEGACY_SECONDARY_BAR = '#eaeaea' as CssColor;\n\n// Relay renders this under its own theme, which has neither a semantic namespace nor `theme.color`,\n// so each fallback is a constant rather than a theme expression — the latter would throw there.\nconst shimmerColors = (theme: MaybeSemanticTheme, variant: 'primary' \| 'secondary') => {\n if (variant === 'secondary') {\n return {\n bar: semanticColor(theme, 'FeedbackNeutral2', LEGACY_SECONDARY_BAR),\n highlight: semanticColor(theme, 'FeedbackNeutral1', Color.CoreSlate50),\n };\n }\n\n const tokens = semanticTokens(theme);\n\n return {\n bar: semanticColor(theme, 'FeedbackNeutral1', Color.CoreSlate50),\n highlight: tokens ? withAlpha(tokens.SurfaceSecondary, tokens.Opacity25) : Color.CoreSlate25,\n };\n};\n\ninterface LoadingShimmerProps extends ComponentPropsWithoutRef<'span'> {\n height?: string;\n width?: string;\n variant?: 'primary' \| 'secondary';\n}\n\ntype ShimmerContainerProps = {\n width?: string;\n height?: string;\n $variant: 'primary' \| 'secondary';\n};\nconst ShimmerContainer = styled.span<ShimmerContainerProps>`\n position: relative;\n display: inline-block;\n background-color: ${({ theme, $variant }) => shimmerColors(theme, $variant).bar};\n width: ${({ width }) => width ?? '100px'};\n height: ${({ height }) => height ?? 'auto'};\n border-radius: ${BorderRadius.Md};\n overflow: hidden;\n`;\n\ntype ShimmerProps = {\n $variant: 'primary' \| 'secondary';\n};\nconst Shimmer = styled(motion.span)<ShimmerProps>`\n position: absolute;\n width: 100%;\n height: 100%;\n background: ${({ theme, $variant }) =>\n `linear-gradient(90deg, transparent 0%, ${shimmerColors(theme, $variant).highlight} 50%, transparent 100%)`};\n filter: blur(4px);\n`;\n\n/*\n Base class of all Loading Shimmer components.\n */\nexport function LoadingShimmer({\n width,\n height,\n variant = 'primary',\n ...props\n}: LoadingShimmerProps) {\n return (\n <ShimmerContainer\n width={width}\n height={height}\n $variant={variant}\n aria-live='polite'\n aria-busy='true'\n data-test='loading-shimmer'\n data-loading-indicator='true'\n {...props}\n >\n <Shimmer\n initial={{ x: '-100%', skew: -30 }}\n animate={{ x: '100%', skew: -30 }}\n $variant={variant}\n transition={{ repeat: Infinity, duration: 1, ease: 'easeOut' }}\n />\n </ShimmerContainer>\n );\n}\n\nexport interface LoadingShimmerHeadingProps extends LoadingShimmerProps {\n size?: HeadingSize;\n}\n\nexport const LoadingShimmerHeading = styled(LoadingShimmer)<LoadingShimmerHeadingProps>`\n height: ${({ theme, size = 'lg' }) => theme.text.heading[size].fontSize};\n`;\n\ninterface LoadingShimmerParagraphProps extends LoadingShimmerProps {\n size?: ParagraphSize;\n // eg. 200px\n width?: string;\n}\n\nexport const LoadingShimmerParagraph = styled(LoadingShimmer)<LoadingShimmerParagraphProps>`\n height: ${({ theme, size = 'md' }) => theme.text.paragraph[size].fontSize};\n`;\n\n// A \"maybe\" shimmer block that is shimmering if the `isLoading`\n// value is set to true and otherwise just displays its children\ninterface MaybeLoadingShimmerProps {\n isLoading: boolean;\n height?: string;\n width?: string;\n}\n\nexport const MaybeLoadingShimmer: FC<MaybeLoadingShimmerProps> = ({\n isLoading,\n children,\n height,\n width,\n}) => (isLoading ? <LoadingShimmer height={height} width={width} /> : <>{children}</>);\n"],"mappings":";;;;;;;~~AAeA~~,MAAM,uBAAuB;AAI7B,MAAM,iBAAiB,OAA2B,YAAqC;AACrF,KAAI,YAAY,YACd,QAAO;EACL,KAAK,cAAc,OAAO,oBAAoB,qBAAqB;EACnE,WAAW,cAAc,OAAO,oBAAoB,MAAM,YAAY;EACvE;CAGH,MAAM,SAAS,eAAe,MAAM;AAEpC,QAAO;EACL,KAAK,cAAc,OAAO,oBAAoB,MAAM,YAAY;EAChE,WAAW,SAAS,UAAU,OAAO,kBAAkB,OAAO,UAAU,GAAG,MAAM;EAClF;;AAcH,MAAM,mBAAmB,OAAO,IAA2B;;;uBAGpC,EAAE,OAAO,eAAe,cAAc,OAAO,SAAS,CAAC,IAAI;YACtE,EAAE,YAAY,SAAS,QAAQ;aAC9B,EAAE,aAAa,UAAU,OAAO;mBAC1B,aAAa,GAAG;;;AAOnC,MAAM,UAAU,OAAO,OAAO,KAAK;;;;iBAIlB,EAAE,OAAO,eACtB,0CAA0C,cAAc,OAAO,SAAS,CAAC,UAAU,yBAAyB;;;;;;AAOhH,SAAgB,eAAe,EAC7B,OACA,QACA,UAAU,WACV,GAAG,SACmB;AACtB,QACE,oBAAC,kBAAD;EACS;EACC;EACR,UAAU;EACV,aAAU;EACV,aAAU;EACV,aAAU;EACV,0BAAuB;EACvB,GAAI;YAEJ,oBAAC,SAAD;GACE,SAAS;IAAE,GAAG;IAAS,MAAM;IAAK;GAClC,SAAS;IAAE,GAAG;IAAQ,MAAM;IAAK;GACjC,UAAU;GACV,YAAY;IAAE,QAAQ;IAAU,UAAU;IAAG,MAAM;IAAW;GAC9D,CAAA;EACe,CAAA;;AAQvB,MAAa,wBAAwB,OAAO,eAAe;aAC9C,EAAE,OAAO,OAAO,WAAW,MAAM,KAAK,QAAQ,MAAM,SAAS;;AAS1E,MAAa,0BAA0B,OAAO,eAAe;aAChD,EAAE,OAAO,OAAO,WAAW,MAAM,KAAK,UAAU,MAAM,SAAS;;AAW5E,MAAa,uBAAqD,EAChE,WACA,UACA,QACA,YACK,YAAY,oBAAC,gBAAD;CAAwB;CAAe;CAAS,CAAA,GAAG,oBAAA,UAAA,EAAG,UAAY,CAAA"}
1	+ {"version":3,"file":"LoadingShimmer-oPIv2ESr.mjs","names":[],"sources":["../src/components/LoadingShimmer/LoadingShimmer.tsx"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { ComponentPropsWithoutRef, FC } from 'react';\nimport styled from 'styled-components';\n\nimport { BorderRadius, Color } from '@persona/design-tokens';\n\nimport { type CssColor, withAlpha } from '#src/lib/color';\nimport { type MaybeSemanticTheme, semanticColor, semanticTokens } from '#src/lib/semanticColor';\nimport type { HeadingSize, ParagraphSize } from '#src/mixins/text';\n\n// A one-off colour predating the token set; no primitive matches it exactly.\n// oxlint-disable-next-line persona-web/no-raw-hex-colors\nconst LEGACY_SECONDARY_BAR = '#eaeaea' as CssColor;\n\n// Relay renders this under its own theme, which has neither a semantic namespace nor `theme.color`,\n// so each fallback is a constant rather than a theme expression — the latter would throw there.\nconst shimmerColors = (theme: MaybeSemanticTheme, variant: 'primary' \| 'secondary') => {\n if (variant === 'secondary') {\n return {\n bar: semanticColor(theme, 'FeedbackNeutral2', LEGACY_SECONDARY_BAR),\n highlight: semanticColor(theme, 'FeedbackNeutral1', Color.CoreSlate50),\n };\n }\n\n const tokens = semanticTokens(theme);\n\n return {\n bar: semanticColor(theme, 'FeedbackNeutral1', Color.CoreSlate50),\n highlight: tokens ? withAlpha(tokens.SurfaceSecondary, tokens.Opacity25) : Color.CoreSlate25,\n };\n};\n\ninterface LoadingShimmerProps extends ComponentPropsWithoutRef<'span'> {\n height?: string;\n width?: string;\n variant?: 'primary' \| 'secondary';\n}\n\ntype ShimmerContainerProps = {\n width?: string;\n height?: string;\n $variant: 'primary' \| 'secondary';\n};\nconst ShimmerContainer = styled.span<ShimmerContainerProps>`\n position: relative;\n display: inline-block;\n background-color: ${({ theme, $variant }) => shimmerColors(theme, $variant).bar};\n width: ${({ width }) => width ?? '100px'};\n height: ${({ height }) => height ?? 'auto'};\n border-radius: ${BorderRadius.Md};\n overflow: hidden;\n`;\n\ntype ShimmerProps = {\n $variant: 'primary' \| 'secondary';\n};\nconst Shimmer = styled(motion.span)<ShimmerProps>`\n position: absolute;\n width: 100%;\n height: 100%;\n background: ${({ theme, $variant }) =>\n `linear-gradient(90deg, transparent 0%, ${shimmerColors(theme, $variant).highlight} 50%, transparent 100%)`};\n filter: blur(4px);\n`;\n\n/*\n Base class of all Loading Shimmer components.\n */\nexport function LoadingShimmer({\n width,\n height,\n variant = 'primary',\n ...props\n}: LoadingShimmerProps) {\n return (\n <ShimmerContainer\n width={width}\n height={height}\n $variant={variant}\n aria-live='polite'\n aria-busy='true'\n data-test='loading-shimmer'\n data-loading-indicator='true'\n {...props}\n >\n <Shimmer\n initial={{ x: '-100%', skew: -30 }}\n animate={{ x: '100%', skew: -30 }}\n $variant={variant}\n transition={{ repeat: Infinity, duration: 1, ease: 'easeOut' }}\n />\n </ShimmerContainer>\n );\n}\n\nexport interface LoadingShimmerHeadingProps extends LoadingShimmerProps {\n size?: HeadingSize;\n}\n\nexport const LoadingShimmerHeading = styled(LoadingShimmer)<LoadingShimmerHeadingProps>`\n height: ${({ theme, size = 'lg' }) => theme.text.heading[size].fontSize};\n`;\n\ninterface LoadingShimmerParagraphProps extends LoadingShimmerProps {\n size?: ParagraphSize;\n // eg. 200px\n width?: string;\n}\n\nexport const LoadingShimmerParagraph = styled(LoadingShimmer)<LoadingShimmerParagraphProps>`\n height: ${({ theme, size = 'md' }) => theme.text.paragraph[size].fontSize};\n`;\n\n// A \"maybe\" shimmer block that is shimmering if the `isLoading`\n// value is set to true and otherwise just displays its children\ninterface MaybeLoadingShimmerProps {\n isLoading: boolean;\n height?: string;\n width?: string;\n}\n\nexport const MaybeLoadingShimmer: FC<MaybeLoadingShimmerProps> = ({\n isLoading,\n children,\n height,\n width,\n}) => (isLoading ? <LoadingShimmer height={height} width={width} /> : <>{children}</>);\n"],"mappings":";;;;;;;AAYA,MAAM,uBAAuB;AAI7B,MAAM,iBAAiB,OAA2B,YAAqC;AACrF,KAAI,YAAY,YACd,QAAO;EACL,KAAK,cAAc,OAAO,oBAAoB,qBAAqB;EACnE,WAAW,cAAc,OAAO,oBAAoB,MAAM,YAAY;EACvE;CAGH,MAAM,SAAS,eAAe,MAAM;AAEpC,QAAO;EACL,KAAK,cAAc,OAAO,oBAAoB,MAAM,YAAY;EAChE,WAAW,SAAS,UAAU,OAAO,kBAAkB,OAAO,UAAU,GAAG,MAAM;EAClF;;AAcH,MAAM,mBAAmB,OAAO,IAA2B;;;uBAGpC,EAAE,OAAO,eAAe,cAAc,OAAO,SAAS,CAAC,IAAI;YACtE,EAAE,YAAY,SAAS,QAAQ;aAC9B,EAAE,aAAa,UAAU,OAAO;mBAC1B,aAAa,GAAG;;;AAOnC,MAAM,UAAU,OAAO,OAAO,KAAK;;;;iBAIlB,EAAE,OAAO,eACtB,0CAA0C,cAAc,OAAO,SAAS,CAAC,UAAU,yBAAyB;;;;;;AAOhH,SAAgB,eAAe,EAC7B,OACA,QACA,UAAU,WACV,GAAG,SACmB;AACtB,QACE,oBAAC,kBAAD;EACS;EACC;EACR,UAAU;EACV,aAAU;EACV,aAAU;EACV,aAAU;EACV,0BAAuB;EACvB,GAAI;YAEJ,oBAAC,SAAD;GACE,SAAS;IAAE,GAAG;IAAS,MAAM;IAAK;GAClC,SAAS;IAAE,GAAG;IAAQ,MAAM;IAAK;GACjC,UAAU;GACV,YAAY;IAAE,QAAQ;IAAU,UAAU;IAAG,MAAM;IAAW;GAC9D,CAAA;EACe,CAAA;;AAQvB,MAAa,wBAAwB,OAAO,eAAe;aAC9C,EAAE,OAAO,OAAO,WAAW,MAAM,KAAK,QAAQ,MAAM,SAAS;;AAS1E,MAAa,0BAA0B,OAAO,eAAe;aAChD,EAAE,OAAO,OAAO,WAAW,MAAM,KAAK,UAAU,MAAM,SAAS;;AAW5E,MAAa,uBAAqD,EAChE,WACA,UACA,QACA,YACK,YAAY,oBAAC,gBAAD;CAAwB;CAAe;CAAS,CAAA,GAAG,oBAAA,UAAA,EAAG,UAAY,CAAA"}

package/dist/LoadingShimmer.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { i as ParagraphSize, n as HeadingSize } from "./text-Csytfclh.mjs";
+import { i as ParagraphSize, n as HeadingSize } from "./text-CKLxMlG4.mjs";
 import { ComponentPropsWithoutRef, FC } from "react";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";

package/dist/{LogicRow-BWIZ7262.d.mts → LogicRow-DG06PsUe.d.mts} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { n as InputSizes } from "./input-gtTnb9M8.mjs";
-import { n as ListBoxItemProps } from "./ListBox-D9SYTzOd.mjs";
+import { n as InputSizes } from "./input-RTMLTvG1.mjs";
+import { n as ListBoxItemProps } from "./ListBox-DxbXE_EE.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -37,4 +37,4 @@ declare const LogicRow: ({
 }: LogicRowProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { LogicRowProps as n, LogicRow as t };
-//# sourceMappingURL=LogicRow-BWIZ7262.d.mts.map
+//# sourceMappingURL=LogicRow-DG06PsUe.d.mts.map

package/dist/LogicRow.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as LogicRowProps, t as LogicRow } from "./LogicRow-BWIZ7262.mjs";
+import { n as LogicRowProps, t as LogicRow } from "./LogicRow-DG06PsUe.mjs";
 export { LogicRowProps, LogicRow as default };

package/dist/MaskedInput.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { a as InputProps } from "./Input-QNjbGo38.mjs";
+import { a as InputProps } from "./Input-DQ2J9wlC.mjs";
 import * as _$react from "react";
 import { IMaskInputProps } from "react-imask/mixin";

package/dist/{Menu-DizjcMbO.d.mts → Menu-Bq6Lij2L.d.mts} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { r as _default } from "./Card-CfECLwQ6.mjs";
+import { r as _default } from "./Card-DOIqF954.mjs";
 import { ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, ElementType, FC, ReactNode, RefObject } from "react";
 import { DefaultTheme, StyledComponent, StyledComponentPropsWithRef } from "styled-components";
 import { Spacing } from "@persona/design-tokens";
@@ -22,7 +22,7 @@ interface MenuItemProps<T extends ElementType = 'div'> {
   selected?: boolean;
   size?: 'sm' | 'md';
 }
-declare const ListItem: StyledComponent<"li", any, Pick<MenuItemProps<"div">, "size" | "disabled" | "selected" | "variant" | "focused">, never>;
+declare const ListItem: StyledComponent<"li", any, Pick<MenuItemProps<"div">, "size" | "disabled" | "variant" | "selected" | "focused">, never>;
 declare const IconContainer: StyledComponent<"div", any, {
   suffix?: boolean;
 }, never>;
@@ -67,4 +67,4 @@ declare const Menu: {
 };
 //#endregion
 export { MenuDivider as a, MenuItem as c, MenuList as d, MenuProps as f, Menu as i, MenuItemProps as l, IconContainer as n, MenuHeading as o, ListItem as r, MenuHeadingProps as s, FloatingCard as t, MenuItemType as u };
-//# sourceMappingURL=Menu-DizjcMbO.d.mts.map
+//# sourceMappingURL=Menu-Bq6Lij2L.d.mts.map

package/dist/Menu-EIT_MwK6.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Menu-EIT_MwK6.mjs","names":["Card"],"sources":["../src/components/Menu/Menu.tsx"],"sourcesContent":["import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport {\n type ComponentPropsWithoutRef,\n type ComponentPropsWithRef,\n type ComponentType,\n type ElementType,\n type FC,\n forwardRef,\n type ReactNode,\n type Ref,\n type RefObject,\n} from 'react';\nimport { DismissButton } from 'react-aria';\nimport styled, {\n css,\n type DefaultTheme,\n type StyledComponent,\n type StyledComponentPropsWithRef,\n} from 'styled-components';\n\nimport PDSProvider from '@persona/design-system/lib/PDSProvider';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport Card from 'design-system/components/Card';\nimport { withAlpha } from 'design-system/lib/color';\nimport { isDisabled, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport {\n type MaybeSemanticTheme,\n semanticColor,\n semanticTokens,\n} from 'design-system/lib/semanticColor';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { darkTheme, withPdsTheming } from 'design-system/theme';\nimport type { PersonaTheme } from 'design-system/theme';\n\ntype MenuTheme = PersonaTheme & MaybeSemanticTheme;\n\nconst legacyDarkTheme = withPdsTheming(darkTheme, 'off');\n\nconst hoverForeground = (theme: MenuTheme, variant: MenuItemProps['variant']) =>\n variant === 'danger'\n ? semanticColor(theme, 'FgDanger2', Color.CoreRed900)\n : semanticColor(theme, 'FgPrimary', theme.color.text.primary);\n\nconst hoverSurface = (theme: MenuTheme, variant: MenuItemProps['variant']) => {\n const tokens = semanticTokens(theme);\n if (variant === 'danger') {\n return tokens\n ? withAlpha(tokens.FeedbackDanger1, tokens.Opacity25)\n : theme.color.variants.danger.highlightLight;\n }\n return tokens ? tokens.SurfaceHover : theme.color.background.secondary;\n};\n\nconst selectedSurface = (theme: MenuTheme) => {\n const tokens = semanticTokens(theme);\n return tokens\n ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25)\n : theme.color.background.highlight;\n};\n\nexport const FloatingCard: StyledComponent<\n ComponentType<StyledComponentPropsWithRef<typeof Card>>,\n DefaultTheme\n> = styled(Card)`\n box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n outline: none;\n z-index: ${Z_INDICES.tooltip};\n`;\n\nexport const MenuList = styled.div.attrs<{ padding?: Spacing; doNotSetRole?: boolean }>(\n ({ role, doNotSetRole = false }) => ({\n role: doNotSetRole ? undefined : (role ?? 'menu'),\n }),\n)<{ padding?: Spacing }>`\n list-style: none;\n margin: 0;\n padding: ${({ padding }) => padding \|\| Spacing[2]};\n outline: none;\n`;\n\nexport interface MenuItemProps<T extends ElementType = 'div'> {\n children: ReactNode;\n prefixIcon?: ReactNode;\n suffixIcon?: ReactNode;\n disabled?: boolean;\n variant?: 'basic' \| 'danger';\n as?: T;\n stretchLabel?: boolean;\n subtitle?: string;\n focused?: boolean;\n selected?: boolean;\n size?: 'sm' \| 'md';\n}\n\nexport const ListItem = styled.li<\n Pick<MenuItemProps, 'variant' \| 'disabled' \| 'focused' \| 'selected' \| 'size'>\n>`\n ${({ size }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n display: flex;\n align-items: center;\n padding: ${({ size }) => (size === 'sm' ? `${Spacing[1]} ${Spacing[2]}` : `${Spacing[2]}`)};\n border-radius: 4px;\n list-style: none;\n text-decoration: none;\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n cursor: pointer;\n ${({ focused, selected, theme, variant }) => {\n if (!focused \|\| selected) {\n return undefined;\n }\n const semantic = semanticTokens(theme) != null;\n return css`\n outline: none;\n color: ${semantic ? hoverForeground(theme, variant) : theme.color.text.primary};\n background-color: ${semantic ? hoverSurface(theme, variant) : theme.color.background.secondary};\n `;\n }}\n\n &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n ${({ selected, variant }) =>\n !selected &&\n css`\n outline: none;\n color: ${({ theme }) => hoverForeground(theme, variant)};\n background-color: ${({ theme }) => hoverSurface(theme, variant)};\n `}\n }\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => semanticColor(theme, 'BorderFocus', Color.BorderFocus)};\n outline-offset: 1px;\n }\n\n ${({ selected, theme }) =>\n selected &&\n css`\n outline: none;\n color: ${semanticColor(theme, 'FgAccent', theme.color.text.brand)};\n background-color: ${selectedSurface(theme)};\n `}\n\n &${isDisabled} {\n color: ${({ theme }) => semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n cursor: default;\n pointer-events: none;\n }\n\n /* Variant Styling /\n ${({ theme, variant }) =>\n variant === 'danger' &&\n css`\n color: ${semanticColor(theme, 'FgDanger1', theme.color.variants[variant].default)};\n\n &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n color: ${hoverForeground(theme, variant)};\n background-color: ${hoverSurface(theme, variant)};\n }\n\n &${isDisabled} {\n color: ${semanticColor(theme, 'FgDisabled', theme.color.variants[variant].disabled)};\n }\n `}\n`;\n\nexport const IconContainer = styled('div')<{ suffix?: boolean }>`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n margin-right: ${Spacing[2]};\n line-height: 1;\n\n ${({ suffix }) =>\n suffix &&\n css`\n margin-left: ${Spacing[2]};\n `}\n`;\n\nconst LabelContainer = styled('div')<{ stretchLabel: boolean }>`\n line-height: 16px;\n ${({ stretchLabel }) =>\n stretchLabel &&\n css`\n width: 100%;\n `}\n`;\n\n/\n https://stackoverflow.com/a/73795494\n */\nexport interface MenuItemType<T extends ElementType = 'div'> extends FC<\n MenuItemProps<T> & ComponentPropsWithRef<T>\n> {\n <T extends ElementType = 'div'>(\n props: MenuItemProps<T> & ComponentPropsWithoutRef<T>,\n ): ReturnType<FC<MenuItemProps<T> & ComponentPropsWithoutRef<T>>>;\n}\n\nexport const MenuItem: MenuItemType = forwardRef(function MenuItem(\n {\n children,\n disabled,\n variant,\n prefixIcon,\n suffixIcon,\n stretchLabel,\n selected,\n size,\n ...elemProps\n },\n ref: Ref<HTMLDivElement>,\n) {\n return (\n <ListItem\n disabled={disabled}\n variant={variant}\n selected={selected}\n ref={ref}\n aria-disabled={disabled}\n // aria-current is the correct a11y attribute for role=\"menuitem\" (not aria-selected).\n aria-current={selected ? 'true' : undefined}\n role='menuitem'\n tabIndex={disabled ? -1 : 0}\n size={size}\n {...elemProps}\n >\n {prefixIcon && <IconContainer>{prefixIcon}</IconContainer>}\n <LabelContainer stretchLabel={!!stretchLabel}>{children}</LabelContainer>\n {suffixIcon && <IconContainer suffix>{suffixIcon}</IconContainer>}\n </ListItem>\n );\n});\n\nconst StyledMenuDivider = styled.hr`\n height: 0px;\n padding: 0px;\n font-size: 0;\n margin: ${Spacing[2]} -${Spacing[2]};\n border: none;\n border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n`;\n\nexport const MenuDivider = (props: ComponentPropsWithoutRef<'hr'>) => (\n <DropdownMenu.Separator asChild>\n <StyledMenuDivider {...props} />\n </DropdownMenu.Separator>\n);\n\nexport interface MenuHeadingProps {\n size?: 'sm' \| 'md';\n}\n\nexport const MenuHeading = styled.li<MenuHeadingProps>`\n ${paragraphMixins.smMono};\n text-transform: uppercase;\n padding: ${({ size }) => (size === 'sm' ? `${Spacing[1]} ${Spacing[2]}` : Spacing[2])};\n display: block;\n color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n letter-spacing: 0.15px;\n`;\n\nexport interface MenuProps<T extends ElementType = 'div'> {\n children?: ReactNode;\n className?: string;\n variant?: 'light' \| 'dark';\n as?: T;\n doNotSetRole?: boolean;\n containerProps?: ComponentPropsWithRef<'div'>;\n listRef?: RefObject<T>;\n itemProps?:\n \| ComponentPropsWithoutRef<'li'>\n \| ((\n props: ComponentPropsWithoutRef<'li'>,\n index: number,\n ) => Partial<ComponentPropsWithRef<'li'>>);\n onClose?: VoidFunction;\n}\n\nexport const Menu = <T extends ElementType = 'div'>({\n children,\n variant,\n containerProps,\n itemProps,\n listRef,\n className,\n onClose,\n as,\n ...props\n}: MenuProps<T> & ComponentPropsWithoutRef<T>) => {\n const menu = (\n <FloatingCard {...containerProps} className={className}>\n <MenuList {...props} as={as as any} ref={listRef}>\n {children}\n <DismissButton onDismiss={onClose} />\n </MenuList>\n </FloatingCard>\n );\n\n if (variant === 'dark') {\n return <PDSProvider theme={legacyDarkTheme}>{menu}</PDSProvider>;\n }\n\n return menu;\n};\n\nMenu.Heading = MenuHeading;\nMenu.Divider = MenuDivider;\nMenu.Item = MenuItem;\n\nexport default Menu;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Menu-EIT_MwK6.mjs","names":["Card"],"sources":["../src/components/Menu/Menu.tsx"],"sourcesContent":["import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport {\n type ComponentPropsWithoutRef,\n type ComponentPropsWithRef,\n type ComponentType,\n type ElementType,\n type FC,\n forwardRef,\n type ReactNode,\n type Ref,\n type RefObject,\n} from 'react';\nimport { DismissButton } from 'react-aria';\nimport styled, {\n css,\n type DefaultTheme,\n type StyledComponent,\n type StyledComponentPropsWithRef,\n} from 'styled-components';\n\nimport PDSProvider from '@persona/design-system/lib/PDSProvider';\nimport { Color, Spacing } from '@persona/design-tokens';\n\nimport Card from '#src/components/Card';\nimport { withAlpha } from '#src/lib/color';\nimport { isDisabled, isFocused, isHovered, isNotDisabled } from '#src/lib/pseudoClass';\nimport { type MaybeSemanticTheme, semanticColor, semanticTokens } from '#src/lib/semanticColor';\nimport { Z_INDICES } from '#src/lib/zindex';\nimport { paragraphMixins } from '#src/mixins/text';\nimport { darkTheme, withPdsTheming } from '#src/theme';\nimport type { PersonaTheme } from '#src/theme';\n\ntype MenuTheme = PersonaTheme & MaybeSemanticTheme;\n\nconst legacyDarkTheme = withPdsTheming(darkTheme, 'off');\n\nconst hoverForeground = (theme: MenuTheme, variant: MenuItemProps['variant']) =>\n variant === 'danger'\n ? semanticColor(theme, 'FgDanger2', Color.CoreRed900)\n : semanticColor(theme, 'FgPrimary', theme.color.text.primary);\n\nconst hoverSurface = (theme: MenuTheme, variant: MenuItemProps['variant']) => {\n const tokens = semanticTokens(theme);\n if (variant === 'danger') {\n return tokens\n ? withAlpha(tokens.FeedbackDanger1, tokens.Opacity25)\n : theme.color.variants.danger.highlightLight;\n }\n return tokens ? tokens.SurfaceHover : theme.color.background.secondary;\n};\n\nconst selectedSurface = (theme: MenuTheme) => {\n const tokens = semanticTokens(theme);\n return tokens\n ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25)\n : theme.color.background.highlight;\n};\n\nexport const FloatingCard: StyledComponent<\n ComponentType<StyledComponentPropsWithRef<typeof Card>>,\n DefaultTheme\n> = styled(Card)`\n box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n outline: none;\n z-index: ${Z_INDICES.tooltip};\n`;\n\nexport const MenuList = styled.div.attrs<{ padding?: Spacing; doNotSetRole?: boolean }>(\n ({ role, doNotSetRole = false }) => ({\n role: doNotSetRole ? undefined : (role ?? 'menu'),\n }),\n)<{ padding?: Spacing }>`\n list-style: none;\n margin: 0;\n padding: ${({ padding }) => padding \|\| Spacing[2]};\n outline: none;\n`;\n\nexport interface MenuItemProps<T extends ElementType = 'div'> {\n children: ReactNode;\n prefixIcon?: ReactNode;\n suffixIcon?: ReactNode;\n disabled?: boolean;\n variant?: 'basic' \| 'danger';\n as?: T;\n stretchLabel?: boolean;\n subtitle?: string;\n focused?: boolean;\n selected?: boolean;\n size?: 'sm' \| 'md';\n}\n\nexport const ListItem = styled.li<\n Pick<MenuItemProps, 'variant' \| 'disabled' \| 'focused' \| 'selected' \| 'size'>\n>`\n ${({ size }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n display: flex;\n align-items: center;\n padding: ${({ size }) => (size === 'sm' ? `${Spacing[1]} ${Spacing[2]}` : `${Spacing[2]}`)};\n border-radius: 4px;\n list-style: none;\n text-decoration: none;\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n cursor: pointer;\n ${({ focused, selected, theme, variant }) => {\n if (!focused \|\| selected) {\n return undefined;\n }\n const semantic = semanticTokens(theme) != null;\n return css`\n outline: none;\n color: ${semantic ? hoverForeground(theme, variant) : theme.color.text.primary};\n background-color: ${semantic ? hoverSurface(theme, variant) : theme.color.background.secondary};\n `;\n }}\n\n &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n ${({ selected, variant }) =>\n !selected &&\n css`\n outline: none;\n color: ${({ theme }) => hoverForeground(theme, variant)};\n background-color: ${({ theme }) => hoverSurface(theme, variant)};\n `}\n }\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => semanticColor(theme, 'BorderFocus', Color.BorderFocus)};\n outline-offset: 1px;\n }\n\n ${({ selected, theme }) =>\n selected &&\n css`\n outline: none;\n color: ${semanticColor(theme, 'FgAccent', theme.color.text.brand)};\n background-color: ${selectedSurface(theme)};\n `}\n\n &${isDisabled} {\n color: ${({ theme }) => semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n cursor: default;\n pointer-events: none;\n }\n\n /* Variant Styling /\n ${({ theme, variant }) =>\n variant === 'danger' &&\n css`\n color: ${semanticColor(theme, 'FgDanger1', theme.color.variants[variant].default)};\n\n &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n color: ${hoverForeground(theme, variant)};\n background-color: ${hoverSurface(theme, variant)};\n }\n\n &${isDisabled} {\n color: ${semanticColor(theme, 'FgDisabled', theme.color.variants[variant].disabled)};\n }\n `}\n`;\n\nexport const IconContainer = styled('div')<{ suffix?: boolean }>`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n margin-right: ${Spacing[2]};\n line-height: 1;\n\n ${({ suffix }) =>\n suffix &&\n css`\n margin-left: ${Spacing[2]};\n `}\n`;\n\nconst LabelContainer = styled('div')<{ stretchLabel: boolean }>`\n line-height: 16px;\n ${({ stretchLabel }) =>\n stretchLabel &&\n css`\n width: 100%;\n `}\n`;\n\n/\n https://stackoverflow.com/a/73795494\n */\nexport interface MenuItemType<T extends ElementType = 'div'> extends FC<\n MenuItemProps<T> & ComponentPropsWithRef<T>\n> {\n <T extends ElementType = 'div'>(\n props: MenuItemProps<T> & ComponentPropsWithoutRef<T>,\n ): ReturnType<FC<MenuItemProps<T> & ComponentPropsWithoutRef<T>>>;\n}\n\nexport const MenuItem: MenuItemType = forwardRef(function MenuItem(\n {\n children,\n disabled,\n variant,\n prefixIcon,\n suffixIcon,\n stretchLabel,\n selected,\n size,\n ...elemProps\n },\n ref: Ref<HTMLDivElement>,\n) {\n return (\n <ListItem\n disabled={disabled}\n variant={variant}\n selected={selected}\n ref={ref}\n aria-disabled={disabled}\n // aria-current is the correct a11y attribute for role=\"menuitem\" (not aria-selected).\n aria-current={selected ? 'true' : undefined}\n role='menuitem'\n tabIndex={disabled ? -1 : 0}\n size={size}\n {...elemProps}\n >\n {prefixIcon && <IconContainer>{prefixIcon}</IconContainer>}\n <LabelContainer stretchLabel={!!stretchLabel}>{children}</LabelContainer>\n {suffixIcon && <IconContainer suffix>{suffixIcon}</IconContainer>}\n </ListItem>\n );\n});\n\nconst StyledMenuDivider = styled.hr`\n height: 0px;\n padding: 0px;\n font-size: 0;\n margin: ${Spacing[2]} -${Spacing[2]};\n border: none;\n border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n`;\n\nexport const MenuDivider = (props: ComponentPropsWithoutRef<'hr'>) => (\n <DropdownMenu.Separator asChild>\n <StyledMenuDivider {...props} />\n </DropdownMenu.Separator>\n);\n\nexport interface MenuHeadingProps {\n size?: 'sm' \| 'md';\n}\n\nexport const MenuHeading = styled.li<MenuHeadingProps>`\n ${paragraphMixins.smMono};\n text-transform: uppercase;\n padding: ${({ size }) => (size === 'sm' ? `${Spacing[1]} ${Spacing[2]}` : Spacing[2])};\n display: block;\n color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n letter-spacing: 0.15px;\n`;\n\nexport interface MenuProps<T extends ElementType = 'div'> {\n children?: ReactNode;\n className?: string;\n variant?: 'light' \| 'dark';\n as?: T;\n doNotSetRole?: boolean;\n containerProps?: ComponentPropsWithRef<'div'>;\n listRef?: RefObject<T>;\n itemProps?:\n \| ComponentPropsWithoutRef<'li'>\n \| ((\n props: ComponentPropsWithoutRef<'li'>,\n index: number,\n ) => Partial<ComponentPropsWithRef<'li'>>);\n onClose?: VoidFunction;\n}\n\nexport const Menu = <T extends ElementType = 'div'>({\n children,\n variant,\n containerProps,\n itemProps,\n listRef,\n className,\n onClose,\n as,\n ...props\n}: MenuProps<T> & ComponentPropsWithoutRef<T>) => {\n const menu = (\n <FloatingCard {...containerProps} className={className}>\n <MenuList {...props} as={as as any} ref={listRef}>\n {children}\n <DismissButton onDismiss={onClose} />\n </MenuList>\n </FloatingCard>\n );\n\n if (variant === 'dark') {\n return <PDSProvider theme={legacyDarkTheme}>{menu}</PDSProvider>;\n }\n\n return menu;\n};\n\nMenu.Heading = MenuHeading;\nMenu.Divider = MenuDivider;\nMenu.Item = MenuItem;\n\nexport default Menu;\n"],"mappings":"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"}

package/dist/Menu.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "./Menu-DizjcMbO.mjs";
+import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "./Menu-Bq6Lij2L.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuHeadingProps, MenuItem, MenuItemProps, MenuItemType, MenuList, MenuProps };

package/dist/{Modal-92O_uW8H.mjs → Modal-BBlilB-B.mjs} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { a as styled } from "./styledComponentsInterop-Cs5CCPRy.mjs";
-import { l as usePDSStrings } from "./i18n-BLyCaSdJ.mjs";
+import { l as usePDSStrings } from "./i18n-DaOKaFc2.mjs";
 import { semanticColor, semanticOnly } from "./lib/semanticColor.mjs";
 import { t as Card_default } from "./Card-DuQHyroh.mjs";
 import { n as Heading$1 } from "./Text-D0vEReED.mjs";
@@ -259,4 +259,4 @@ var Modal_default = Object.assign(Modal$1, { Title: ModalTitle });
 //#endregion
 export { Modal_default as i, ModalContent as n, ModalTrigger as r, ModalClose as t };
-//# sourceMappingURL=Modal-92O_uW8H.mjs.map
+//# sourceMappingURL=Modal-BBlilB-B.mjs.map

package/dist/Modal-BBlilB-B.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Modal-BBlilB-B.mjs","names":["AriaModal","Button","AriaButton","Heading","AriaHeading","Card","Modal"],"sources":["../src/components/Modal/Modal.tsx"],"sourcesContent":["import {\n forwardRef,\n type ComponentProps,\n type ComponentPropsWithoutRef,\n type ReactNode,\n useContext,\n useEffect,\n useState,\n} from 'react';\nimport {\n Button as AriaButton,\n Dialog,\n DialogTrigger,\n Heading as AriaHeading,\n Modal as AriaModal,\n ModalOverlay,\n type ModalOverlayProps,\n OverlayTriggerStateContext,\n Pressable,\n} from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport Button, { type ButtonProps } from '@persona/design-system/components/Button';\nimport Card from '@persona/design-system/components/Card';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport TabBar, { Tab } from '@persona/design-system/components/TabBar';\nimport { Heading } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\n\nimport { usePDSStrings } from '#src/lib/i18n';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\nimport useEmbeddedSurface, {\n useEmbeddedSurfaceGate,\n useEmbeddedSurfaceId,\n} from '#src/lib/useEmbeddedSurface';\nimport useModalInsetRight, {\n SIDEBAR_CLOSE_TRANSITION_MS,\n SIDEBAR_OPEN_TRANSITION_MS,\n} from '#src/lib/useModalInsetRight';\nimport { semanticScrollbar } from '#src/mixins/scrollbar';\n\nconst StyledModalOverlay = styled(ModalOverlay)<{\n $hostPending: boolean;\n $animationDelayMs: number;\n $insetRight: string;\n $transitionMs: number;\n}>`\n @keyframes overlayShow {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n background-color: rgba(0, 0, 0, 0.5);\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: ${({ $insetRight }) => $insetRight};\n transition: right ${({ $transitionMs }) => $transitionMs}ms ease-out;\n animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);\n animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n animation-fill-mode: both;\n ${({ $hostPending }) =>\n $hostPending &&\n `\n animation-play-state: paused;\n `}\n @media (prefers-reduced-motion: reduce) {\n animation-duration: 0ms;\n animation-delay: 0ms;\n animation-play-state: running;\n }\n z-index: 10000;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nconst StyledModal = styled(AriaModal)`\n z-index: 10001;\n outline: none;\n width: fit-content;\n max-width: 100%;\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n`;\n\n/**\n * React Aria keeps the overlay mounted through the exit animation, so announcing the surface from\n * here — rather than from the persistent gate below — releases the host's backdrop exactly when the\n * modal stops being painted.\n */\nconst EmbeddedSurfaceModal = forwardRef<HTMLDivElement, { children: ReactNode; surfaceId: string }>(\n function EmbeddedSurfaceModal({ children, surfaceId }, ref) {\n useEmbeddedSurface(surfaceId);\n return <StyledModal ref={ref}>{children}</StyledModal>;\n },\n);\n\ntype EmbeddedSurfaceOverlayProps = ModalOverlayProps & {\n $insetRight: string;\n $transitionMs: number;\n surfaceId: string;\n};\n\nconst EmbeddedSurfaceOverlay = ({ surfaceId, ...props }: EmbeddedSurfaceOverlayProps) => {\n const state = useContext(OverlayTriggerStateContext);\n const isOpen = state?.isOpen ?? false;\n const { ready, animationDelayMs } = useEmbeddedSurfaceGate(surfaceId, isOpen);\n\n const { $insetRight, $transitionMs, ...overlayProps } = props;\n return (\n <StyledModalOverlay\n {...overlayProps}\n $insetRight={$insetRight}\n $transitionMs={$transitionMs}\n $animationDelayMs={animationDelayMs}\n $hostPending={isOpen && !ready}\n />\n );\n};\n\nconst ModalCloseButton = styled(Button)`\n display: inline-flex;\n padding: ${Spacing[2]};\n border-radius: ${Spacing[1]};\n width: fit-content;\n min-width: unset;\n`;\n\nconst ModalFooter = styled(HStack).attrs({\n justify: 'flex-end',\n align: 'center',\n spacing: Spacing[2],\n})`\n padding: ${Spacing[3]} ${Spacing[4]};\n border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst ModalHeaderTitle = styled.div`\n flex: 1;\n`;\n\nexport const ModalTrigger = DialogTrigger;\nexport const ModalContent = StyledModal;\n\nexport const ModalClose = (props: ButtonProps) => {\n return (\n <AriaButton slot='close' style={{ all: 'unset', display: 'contents' }}>\n <ModalCloseButton variant='text' width='icon' size='md' {...props}>\n <XIcon />\n </ModalCloseButton>\n </AriaButton>\n );\n};\n\nexport interface ModalTitleProps {\n children: ReactNode;\n className?: string;\n}\n\n/** Props passed to modal content render functions. */\nexport interface ModalRenderProps {\n /** Element that floating content should use as its portal container. */\n portalContainer: HTMLDivElement | null;\n}\n\ntype ModalRenderable = ReactNode | ((props: ModalRenderProps) => ReactNode);\n\nconst ModalTitle = ({ children, ...props }: ModalTitleProps) => {\n return (\n <Heading size='sm' color='primary' as={AriaHeading} slot='title' {...props}>\n {children}\n </Heading>\n );\n};\n\nconst ModalHeader = styled(HStack)<{ $hasTabs: boolean }>`\n border-bottom: ${({ $hasTabs, theme }) =>\n $hasTabs ? 'none' : `1px solid ${semanticColor(theme, 'BorderSubtle', Color.BorderDivider)}`};\n padding: ${({ $hasTabs }) =>\n $hasTabs\n ? `${Spacing[3]} ${Spacing[2]} ${Spacing[1]} ${Spacing[4]}`\n : `${Spacing[3]} ${Spacing[2]} ${Spacing[3]} ${Spacing[4]}`};\n`;\n\nconst ModalTabBar = styled(TabBar)`\n padding-left: ${Spacing[4]};\n`;\n\nconst StyledDialog = styled(Dialog)`\n outline: none;\n`;\n\nconst StyledCard = styled(Card)<{ $size?: 'auto' | 'md' | 'lg' | 'xl' | 'full' }>`\n position: relative;\n width: ${({ $size }) => {\n switch ($size) {\n case 'auto':\n return 'auto';\n case 'full':\n return 'calc(100vw - 160px)';\n default:\n return '90vw';\n }\n }};\n max-width: ${({ theme, $size }) => {\n switch ($size) {\n case 'auto':\n return 'auto';\n case 'full':\n return 'calc(100vw - 160px)';\n default:\n return theme.modal.width[$size];\n }\n }};\n /* TODO: Use breakpoints to make this responsive */\n max-height: ${({ $size }) => ($size === 'full' ? 'calc(100vh - 160px)' : '85vh')};\n display: flex;\n flex-direction: column;\n overflow: hidden;\n ${({ $size }) =>\n $size === 'full' &&\n `\n height: calc(100vh - 160px);\n `}\n margin-bottom: 0;\n`;\n\ninterface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {\n /**\n * Display X button to close popover\n */\n showCloseButton?: boolean;\n\n /**\n * Accessible label for the built-in close button. Defaults to the PDS closeModal string (\"Close\").\n */\n closeButtonLabel?: string;\n\n /**\n * Max width of the modal\n */\n size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';\n\n /**\n * Footer content\n */\n footer?: ReactNode;\n\n /**\n * Renders tabs within the modal.\n * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n * Overrides `children`.\n * Tab contents can be render functions that receive the modal portal container.\n */\n tabs?: TabView[];\n\n /**\n * Title of the modal\n */\n title?: ReactNode;\n\n /**\n * Children content\n */\n children?: ReactNode;\n\n /**\n * When true, removes horizontal and vertical padding from the body. Defaults to false.\n */\n noBodyPadding?: boolean;\n\n /**\n * Additional props for the Dialog element\n */\n className?: string;\n}\n\ninterface ModalCardInternalProps extends ModalCardProps {\n portalContainer: HTMLDivElement | null;\n}\n\nconst StyledModalCardBody = styled(Card.Body)<{\n $noPadding?: boolean;\n $hidden?: boolean;\n}>`\n overflow-y: auto;\n ${semanticScrollbar}\n flex: 1;\n min-height: 0;\n ${({ $noPadding }) =>\n $noPadding\n ? 'padding: 0;'\n : `\n padding-left: ${Spacing[4]};\n padding-right: ${Spacing[4]};\n `}\n ${({ $hidden }) => $hidden && 'display: none;'}\n`;\n\n/**\n * Card to be used in Modal contexts. Inherits props from react-aria-components Dialog.\n */\nconst ModalCard = forwardRef<HTMLDivElement, ModalCardInternalProps>(function ModalCard(\n {\n title,\n children,\n showCloseButton = true,\n closeButtonLabel,\n size,\n footer,\n tabs,\n noBodyPadding = false,\n portalContainer,\n ...props\n },\n ref,\n) {\n const strings = usePDSStrings();\n const [selectedTabIdx, setSelectedTabIdx] = useState(0);\n const tabCount = tabs?.length ?? 0;\n\n useEffect(() => {\n setSelectedTabIdx(0);\n }, [tabCount]);\n\n const titleAndClose = (\n <ModalHeader justify='flex-start' align='center' spacing={Spacing[2]} $hasTabs={Boolean(tabs)}>\n <ModalHeaderTitle>{title ? <ModalTitle>{title}</ModalTitle> : null}</ModalHeaderTitle>\n {showCloseButton && <ModalClose aria-label={closeButtonLabel ?? strings.closeModal} />}\n </ModalHeader>\n );\n\n const modalHeader = tabs ? (\n <Stack>\n {titleAndClose}\n <ModalTabBar>\n {tabs.map((tab, idx) => (\n <Tab\n key={tab.name}\n selected={selectedTabIdx === idx}\n id={`pds-modal_tab-${idx}`}\n onClick={() => setSelectedTabIdx(idx)}\n aria-controls={`pds-modal_tab-panel-${idx}`}\n >\n {tab.name}\n </Tab>\n ))}\n </ModalTabBar>\n </Stack>\n ) : (\n titleAndClose\n );\n\n return (\n <StyledDialog {...props} ref={ref}>\n <StyledCard elevated $size={size}>\n {(showCloseButton || title) && modalHeader}\n {tabs ? (\n tabs.map((tab, idx) => (\n <StyledModalCardBody\n key={tab.name}\n $noPadding={noBodyPadding}\n $hidden={selectedTabIdx !== idx}\n role={tabs ? 'tabpanel' : undefined}\n id={`pds-modal_tab-panel-${tab.name}`}\n aria-labelledby={`pds-modal_tab-${tab.name}`}\n >\n {typeof tab.contents === 'function'\n ? tab.contents({ portalContainer })\n : tab.contents}\n </StyledModalCardBody>\n ))\n ) : (\n <StyledModalCardBody\n $noPadding={noBodyPadding}\n role={tabs ? 'tabpanel' : undefined}\n id={`pds-modal_tab-panel-${selectedTabIdx}`}\n aria-labelledby={`pds-modal_tab-${selectedTabIdx}`}\n >\n {children}\n </StyledModalCardBody>\n )}\n\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </StyledCard>\n </StyledDialog>\n );\n});\n\ninterface TabView {\n name: string;\n contents: ModalRenderable;\n badge?: React.ReactElement;\n disabled?: boolean;\n 'data-tour-target'?: string;\n}\n\nexport interface ModalProps {\n /**\n * Title of the Card\n */\n title?: string;\n\n /**\n * Component to use as trigger. React Aria trigger props will be merged with this element.\n */\n trigger?: ComponentProps<typeof Pressable>['children'];\n\n /**\n * Props to apply to Modal.Card within\n */\n contentProps?: ModalCardProps;\n\n /**\n * Max width of the modal\n */\n size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';\n\n /**\n * Footer section intended for actions.\n * You can pass in Buttons directly and they will render in a HStack.\n */\n footer?: ReactNode;\n\n /**\n * Renders tabs within the modal.\n * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n * Overrides `children`.\n */\n tabs?: TabView[];\n\n /**\n * Children content\n */\n children?: ModalRenderable;\n\n /**\n * When true, removes horizontal and vertical padding from the body. Defaults to false.\n * Can also be set via contentProps.noBodyPadding.\n */\n noBodyPadding?: boolean;\n\n /**\n * Controls whether the modal is open (controlled)\n */\n open?: boolean;\n\n /**\n * Default open state (uncontrolled)\n */\n defaultOpen?: boolean;\n\n /**\n * Handler called when open state changes\n */\n onOpenChange?: (isOpen: boolean) => void;\n\n /**\n * Whether the modal can be dismissed by clicking outside or pressing escape\n */\n isDismissable?: boolean;\n\n /**\n * Whether pressing the escape key closes the modal\n */\n isKeyboardDismissDisabled?: boolean;\n}\n\nconst Modal = ({\n children,\n trigger,\n contentProps,\n noBodyPadding = false,\n size = 'md',\n title,\n footer,\n tabs,\n defaultOpen,\n onOpenChange,\n isDismissable = false,\n isKeyboardDismissDisabled = false,\n open,\n}: ModalProps) => {\n const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(null);\n const surfaceId = useEmbeddedSurfaceId();\n const { insetRight: modalInsetRight, panelState } = useModalInsetRight();\n const transitionMs =\n panelState === 'opening'\n ? SIDEBAR_OPEN_TRANSITION_MS\n : panelState === 'closing'\n ? SIDEBAR_CLOSE_TRANSITION_MS\n : 0;\n\n const content = (\n <ModalCard\n size={size}\n title={title}\n footer={footer}\n tabs={tabs}\n noBodyPadding={noBodyPadding}\n {...contentProps}\n portalContainer={portalContainer}\n >\n {typeof children === 'function' ? children({ portalContainer }) : children}\n </ModalCard>\n );\n\n // Wrap trigger element to ensure it works with react-aria-components\n const wrappedTrigger = trigger ? <Pressable>{trigger}</Pressable> : null;\n\n return (\n <DialogTrigger isOpen={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n {wrappedTrigger}\n <EmbeddedSurfaceOverlay\n surfaceId={surfaceId}\n $insetRight={modalInsetRight}\n $transitionMs={transitionMs}\n isDismissable={isDismissable}\n isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n shouldCloseOnInteractOutside={(element) => !element.closest('[data-react-aria-top-layer]')}\n >\n <EmbeddedSurfaceModal ref={setPortalContainer} surfaceId={surfaceId}>\n {content}\n </EmbeddedSurfaceModal>\n </EmbeddedSurfaceOverlay>\n </DialogTrigger>\n );\n};\n\nexport default Object.assign(Modal, {\n Title: ModalTitle,\n});\n"],"mappings":"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"}

package/dist/{Modal-Bhwq1bQJ.d.mts → Modal-kEgKwLg4.d.mts} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "./Button-Cg8KyT5M.mjs";
+import { r as ButtonProps } from "./Button-B79_aXfC.mjs";
 import { ComponentProps, ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
 import { Dialog, DialogTrigger, Pressable } from "react-aria-components";
@@ -146,4 +146,4 @@ declare const _default: (({
 };
 //#endregion
 export { ModalTitleProps as a, ModalRenderProps as i, ModalContent as n, ModalTrigger as o, ModalProps as r, _default as s, ModalClose as t };
-//# sourceMappingURL=Modal-Bhwq1bQJ.d.mts.map
+//# sourceMappingURL=Modal-kEgKwLg4.d.mts.map

package/dist/Modal.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { a as ModalTitleProps, i as ModalRenderProps, n as ModalContent, o as ModalTrigger, r as ModalProps, s as _default, t as ModalClose } from "./Modal-Bhwq1bQJ.mjs";
+import { a as ModalTitleProps, i as ModalRenderProps, n as ModalContent, o as ModalTrigger, r as ModalProps, s as _default, t as ModalClose } from "./Modal-kEgKwLg4.mjs";
 export { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger, _default as default };

package/dist/{PageHeader-D2QLrS7-.d.mts → PageHeader-BGGhOS81.d.mts} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { r as BreadcrumbsProps } from "./Breadcrumbs-DRu_JfdI.mjs";
+import { r as BreadcrumbsProps } from "./Breadcrumbs-ChKWIuRq.mjs";
 import { ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -37,4 +37,4 @@ declare const PageHeader: ({
 }: PageHeaderProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { PageHeaderContainer as n, PageHeaderProps as r, PageHeader as t };
-//# sourceMappingURL=PageHeader-D2QLrS7-.d.mts.map
+//# sourceMappingURL=PageHeader-BGGhOS81.d.mts.map

package/dist/{PageHeader-BzvA_NNt.mjs → PageHeader-DEKTopzU.mjs} RENAMED Viewed

@@ -72,4 +72,4 @@ const PageHeader = ({ title, breadcrumbs, subtitle, level = "product", prepend,
 //#endregion
 export { PageHeaderContainer as n, PageHeader as t };
-//# sourceMappingURL=PageHeader-BzvA_NNt.mjs.map
+//# sourceMappingURL=PageHeader-DEKTopzU.mjs.map

package/dist/PageHeader-DEKTopzU.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PageHeader-DEKTopzU.mjs","names":[],"sources":["../src/components/PageHeader/PageHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport Breadcrumbs, { type BreadcrumbsProps } from '#src/components/Breadcrumbs';\nimport { Heading, Paragraph } from '#src/components/Text';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\n\nexport const PageHeaderContainer = styled.header`\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n padding: ${Spacing[3]} ${Spacing[5]};\n background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n box-sizing: border-box;\n min-height: 56px; /* Standardize height for most PageHeaders */\n`;\n\nconst TitleContainer = styled.div`\n display: flex;\n flex: 0 1 auto;\n min-width: 0;\n align-items: center;\n h1 {\n margin: 0;\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n }\n p {\n margin: 0 0 0 ${Spacing[2]};\n ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}\n }\n`;\n\nconst LeftContainer = styled.div`\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n gap: ${Spacing[2]};\n min-width: 0;\n & > :not(${TitleContainer}) {\n flex-shrink: 0;\n }\n`;\n\nconst RightContainer = styled.div`\n display: flex;\n gap: ${Spacing[2]};\n margin-left: ${Spacing[3]};\n flex-shrink: 0;\n`;\n\ninterface PageHeaderCommonProps {\n level?: 'product' | 'detail';\n prepend?: ReactNode;\n append?: ReactNode;\n children?: ReactNode;\n}\n\n/** Exactly one heading source is required: either `title` or `breadcrumbs`. */\nexport type PageHeaderProps = PageHeaderCommonProps &\n (\n | { title: ReactNode; subtitle?: ReactNode; breadcrumbs?: never }\n | {\n title?: never;\n /**\n * The subtitle is sunset in the breadcrumbs variant (PX-1299); fold the value it\n * carried (e.g. an object ID) into the current crumb, with a copy action if useful.\n */\n subtitle?: never;\n /** Renders in place of `title`; the current crumb becomes the page `h1`, at `lg` size. */\n breadcrumbs: BreadcrumbsProps;\n }\n );\n\nconst PageHeader = ({\n title,\n breadcrumbs,\n subtitle,\n level = 'product',\n prepend,\n append,\n children,\n ...props\n}: PageHeaderProps) => (\n <PageHeaderContainer {...props}>\n <LeftContainer>\n {prepend}\n <TitleContainer>\n {breadcrumbs ? (\n <Breadcrumbs size='lg' {...breadcrumbs} />\n ) : (\n <>\n {level === 'product' && (\n <Heading as='h1' size='sm'>\n {title}\n </Heading>\n )}\n {level === 'detail' && (\n <Paragraph as='h1' size='lg' color='primary'>\n {title}\n </Paragraph>\n )}\n </>\n )}\n {subtitle && <Paragraph size='md'>{subtitle}</Paragraph>}\n </TitleContainer>\n {append}\n </LeftContainer>\n {children && <RightContainer>{children}</RightContainer>}\n </PageHeaderContainer>\n);\n\nexport default PageHeader;\n"],"mappings":";;;;;;;AASA,MAAa,sBAAsB,OAAO,MAAM;;;;;aAKnC,QAAQ,GAAG,GAAG,QAAQ,GAAG;uBACf,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,MAAM,WAAW,QAAQ,CAAC;8BAC9E,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,MAAM,OAAO,QAAQ,CAAC;;;;AAK9G,MAAM,iBAAiB,OAAO,GAAG;;;;;;;MAO3B,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC;;;oBAG1C,QAAQ,GAAG;MACzB,cAAc,WAAW,UAAU,OAAO,YAAY,GAAG,CAAC;;;AAIhE,MAAM,gBAAgB,OAAO,GAAG;;;;SAIvB,QAAQ,GAAG;;aAEP,eAAe;;;;AAK5B,MAAM,iBAAiB,OAAO,GAAG;;SAExB,QAAQ,GAAG;iBACH,QAAQ,GAAG;;;AA2B5B,MAAM,cAAc,EAClB,OACA,aACA,UACA,QAAQ,WACR,SACA,QACA,UACA,GAAG,YAEH,qBAAC,qBAAD;CAAqB,GAAI;WAAzB,CACE,qBAAC,eAAD,EAAA,UAAA;EACG;EACD,qBAAC,gBAAD,EAAA,UAAA,CACG,cACC,oBAAC,aAAD;GAAa,MAAK;GAAK,GAAI;GAAe,CAAA,GAE1C,qBAAA,UAAA,EAAA,UAAA,CACG,UAAU,aACT,oBAAC,SAAD;GAAS,IAAG;GAAK,MAAK;aACnB;GACO,CAAA,EAEX,UAAU,YACT,oBAAC,WAAD;GAAW,IAAG;GAAK,MAAK;GAAK,OAAM;aAChC;GACS,CAAA,CAEb,EAAA,CAAA,EAEJ,YAAY,oBAAC,WAAD;GAAW,MAAK;aAAM;GAAqB,CAAA,CACzC,EAAA,CAAA;EAChB;EACa,EAAA,CAAA,EACf,YAAY,oBAAC,gBAAD,EAAiB,UAA0B,CAAA,CACpC"}

package/dist/PageHeader.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as PageHeaderContainer, r as PageHeaderProps, t as PageHeader } from "./PageHeader-D2QLrS7-.mjs";
+import { n as PageHeaderContainer, r as PageHeaderProps, t as PageHeader } from "./PageHeader-BGGhOS81.mjs";
 export { PageHeaderContainer, PageHeaderProps, PageHeader as default };

package/dist/{PageLayout-DfAbeFIh.d.mts → PageLayout-B_LKPZD8.d.mts} RENAMED Viewed

@@ -13,4 +13,4 @@ declare const Container: ({
 declare const Section: _$styled_components0.StyledComponent<"div", any, {}, never>;
 //#endregion
 export { Container as n, Section as r, Backdrop as t };
-//# sourceMappingURL=PageLayout-DfAbeFIh.d.mts.map
+//# sourceMappingURL=PageLayout-B_LKPZD8.d.mts.map

package/dist/{PageLayout-DCe3F76N.mjs → PageLayout-DjtGrvJa.mjs} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { a as styled } from "./styledComponentsInterop-Cs5CCPRy.mjs";
 import { n as Stack } from "./Stack-Bzom2BTR.mjs";
-import { i as useGridBreakpoint, n as GRID_BREAKPOINTS, r as Grid, t as GridItem } from "./Grid-BtTuj5mR.mjs";
+import { i as useGridBreakpoint, n as GRID_BREAKPOINTS, r as Grid, t as GridItem } from "./Grid-CYpOqTUu.mjs";
 import { useLayoutEffect, useRef, useState } from "react";
 import { Spacing } from "@persona/design-tokens";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -129,4 +129,4 @@ const SplitColumnLayout = ({ main, aside, ...chrome }) => /* @__PURE__ */ jsx(Pa
 //#endregion
 export { Section as a, Container as i, SingleColumnLayout as n, Backdrop as r, SplitColumnLayout as t };
-//# sourceMappingURL=PageLayout-DCe3F76N.mjs.map
+//# sourceMappingURL=PageLayout-DjtGrvJa.mjs.map

package/dist/PageLayout-DjtGrvJa.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PageLayout-DjtGrvJa.mjs","names":[],"sources":["../src/patterns/PageLayout/PageLayout.tsx","../src/patterns/PageLayout/PageLayoutFrame.tsx","../src/patterns/PageLayout/SingleColumnLayout.tsx","../src/patterns/PageLayout/SplitColumnLayout.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport const Backdrop = styled.div`\n position: relative;\n width: 100%;\n padding: ${Spacing[7]} ${Spacing[5]};\n\n display: flex;\n flex-direction: column;\n`;\n\nconst StyledContainer = styled('div')`\n position: relative;\n width: 100%;\n padding: 0;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\n\nexport const Container = ({\n children,\n ...rest\n}: { children: ReactNode } & ComponentPropsWithoutRef<'div'>) => {\n return <StyledContainer {...rest}>{children}</StyledContainer>;\n};\n\nexport const Section = styled('div')`\n width: 100%;\n padding: ${Spacing[7]};\n`;\n","import { type ReactNode, useLayoutEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport Grid, { GRID_BREAKPOINTS, GridItem } from '#src/components/Grid';\nimport { Stack } from '#src/components/Stack';\n\nexport type PageLayoutWidth = 'standard' | 'wide';\n\nexport interface PageLayoutChromeProps {\n /**\n * `standard` uses the fixed grid (centered, max 1408px). `wide` uses the fluid grid.\n *\n * @defaultValue 'standard'\n */\n width?: PageLayoutWidth;\n /** Tab group. Sits above the page notice and scrolls with the page. Omit to skip the region and its gap. */\n tabs?: ReactNode;\n /** Page notice under the tabs. Omit to skip the region and its gap. */\n pageNotice?: ReactNode;\n}\n\nconst topPadding = (condensed: boolean) => (condensed ? Spacing[5] : Spacing[6]);\n\nconst Root = styled.div<{ $condensed: boolean; $tabs: boolean }>`\n width: 100%;\n min-width: ${GRID_BREAKPOINTS.sm - 1}px;\n padding-top: ${({ $condensed, $tabs }) => ($tabs ? Spacing[5] : topPadding($condensed))};\n padding-bottom: ${({ $condensed }) => topPadding($condensed)};\n`;\n\nconst gridMode = (width: PageLayoutWidth): 'fixed' | 'fluid' =>\n width === 'wide' ? 'fluid' : 'fixed';\n\nconst FullWidthBand = ({ mode, children }: { mode: 'fixed' | 'fluid'; children: ReactNode }) => (\n <Grid mode={mode}>\n <GridItem span={12}>{children}</GridItem>\n </Grid>\n);\n\nexport const PageLayoutFrame = ({\n width = 'standard',\n tabs,\n pageNotice,\n children,\n}: PageLayoutChromeProps & { children: ReactNode }) => {\n const mode = gridMode(width);\n const ref = useRef<HTMLDivElement>(null);\n const [condensed, setCondensed] = useState(false);\n\n useLayoutEffect(() => {\n const node = ref.current;\n if (!node) {\n return;\n }\n const update = () => setCondensed(node.offsetWidth < GRID_BREAKPOINTS.md);\n update();\n const observer = new ResizeObserver(update);\n observer.observe(node);\n return () => observer.disconnect();\n }, []);\n\n return (\n <Root ref={ref} $condensed={condensed} $tabs={Boolean(tabs)}>\n <Stack spacing={Spacing[5]}>\n {tabs && <FullWidthBand mode={mode}>{tabs}</FullWidthBand>}\n {pageNotice && <FullWidthBand mode={mode}>{pageNotice}</FullWidthBand>}\n <Grid mode={mode}>{children}</Grid>\n </Stack>\n </Root>\n );\n};\n","import type { ReactNode } from 'react';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { GridItem } from '#src/components/Grid';\nimport { Stack } from '#src/components/Stack';\n\nimport { PageLayoutFrame, type PageLayoutChromeProps } from './PageLayoutFrame';\n\nexport interface SingleColumnLayoutProps extends PageLayoutChromeProps {\n /** Primary page content. Direct children stack vertically. */\n main: ReactNode;\n}\n\nexport const SingleColumnLayout = ({ main, ...chrome }: SingleColumnLayoutProps) => (\n <PageLayoutFrame {...chrome}>\n <GridItem span={12}>\n <Stack spacing={Spacing[4]}>{main}</Stack>\n </GridItem>\n </PageLayoutFrame>\n);\n","import type { ReactNode } from 'react';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { GridItem, type GridSpan, useGridBreakpoint } from '#src/components/Grid';\nimport { Stack } from '#src/components/Stack';\n\nimport { PageLayoutFrame, type PageLayoutChromeProps } from './PageLayoutFrame';\n\nconst SPLIT_COLUMN_SPANS = { main: 8, aside: 4 } as const satisfies Record<string, GridSpan>;\n\nexport interface SplitColumnLayoutProps extends PageLayoutChromeProps {\n /** Primary column. Direct children stack vertically and stay in this column. */\n main: ReactNode;\n /** Supporting column. Direct children stack vertically and stay in this column. */\n aside: ReactNode;\n}\n\nconst Region = ({ children }: { children: ReactNode }) => (\n <Stack spacing={Spacing[4]}>{children}</Stack>\n);\n\nconst SplitBody = ({ main, aside }: { main: ReactNode; aside: ReactNode }) => {\n const stacked = useGridBreakpoint() === 'xs';\n const mainSpan = stacked ? 12 : SPLIT_COLUMN_SPANS.main;\n const asideSpan = stacked ? 12 : SPLIT_COLUMN_SPANS.aside;\n\n return (\n <>\n <GridItem span={mainSpan}>\n <Region>{main}</Region>\n </GridItem>\n <GridItem span={asideSpan}>\n <aside>\n <Region>{aside}</Region>\n </aside>\n </GridItem>\n </>\n );\n};\n\nexport const SplitColumnLayout = ({ main, aside, ...chrome }: SplitColumnLayoutProps) => (\n <PageLayoutFrame {...chrome}>\n <SplitBody main={main} aside={aside} />\n </PageLayoutFrame>\n);\n"],"mappings":";;;;;;;AAKA,MAAa,WAAW,OAAO,GAAG;;;aAGrB,QAAQ,GAAG,GAAG,QAAQ,GAAG;;;;;AAMtC,MAAM,kBAAkB,OAAO,MAAM;;;;;;;;;AAUrC,MAAa,aAAa,EACxB,UACA,GAAG,WAC4D;AAC/D,QAAO,oBAAC,iBAAD;EAAiB,GAAI;EAAO;EAA2B,CAAA;;AAGhE,MAAa,UAAU,OAAO,MAAM;;aAEvB,QAAQ,GAAG;;;;ACVxB,MAAM,cAAc,cAAwB,YAAY,QAAQ,KAAK,QAAQ;AAE7E,MAAM,OAAO,OAAO,GAA4C;;eAEjD,iBAAiB,KAAK,EAAE;kBACrB,EAAE,YAAY,YAAa,QAAQ,QAAQ,KAAK,WAAW,WAAW,CAAE;qBACrE,EAAE,iBAAiB,WAAW,WAAW,CAAC;;AAG/D,MAAM,YAAY,UAChB,UAAU,SAAS,UAAU;AAE/B,MAAM,iBAAiB,EAAE,MAAM,eAC7B,oBAAC,MAAD;CAAY;WACV,oBAAC,UAAD;EAAU,MAAM;EAAK;EAAoB,CAAA;CACpC,CAAA;AAGT,MAAa,mBAAmB,EAC9B,QAAQ,YACR,MACA,YACA,eACqD;CACrD,MAAM,OAAO,SAAS,MAAM;CAC5B,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;AAEjD,uBAAsB;EACpB,MAAM,OAAO,IAAI;AACjB,MAAI,CAAC,KACH;EAEF,MAAM,eAAe,aAAa,KAAK,cAAc,iBAAiB,GAAG;AACzE,UAAQ;EACR,MAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,WAAS,QAAQ,KAAK;AACtB,eAAa,SAAS,YAAY;IACjC,EAAE,CAAC;AAEN,QACE,oBAAC,MAAD;EAAW;EAAK,YAAY;EAAW,OAAO,QAAQ,KAAK;YACzD,qBAAC,OAAD;GAAO,SAAS,QAAQ;aAAxB;IACG,QAAQ,oBAAC,eAAD;KAAqB;eAAO;KAAqB,CAAA;IACzD,cAAc,oBAAC,eAAD;KAAqB;eAAO;KAA2B,CAAA;IACtE,oBAAC,MAAD;KAAY;KAAO;KAAgB,CAAA;IAC7B;;EACH,CAAA;;;;ACxDX,MAAa,sBAAsB,EAAE,MAAM,GAAG,aAC5C,oBAAC,iBAAD;CAAiB,GAAI;WACnB,oBAAC,UAAD;EAAU,MAAM;YACd,oBAAC,OAAD;GAAO,SAAS,QAAQ;aAAK;GAAa,CAAA;EACjC,CAAA;CACK,CAAA;;;ACVpB,MAAM,qBAAqB;CAAE,MAAM;CAAG,OAAO;CAAG;AAShD,MAAM,UAAU,EAAE,eAChB,oBAAC,OAAD;CAAO,SAAS,QAAQ;CAAK;CAAiB,CAAA;AAGhD,MAAM,aAAa,EAAE,MAAM,YAAmD;CAC5E,MAAM,UAAU,mBAAmB,KAAK;CACxC,MAAM,WAAW,UAAU,KAAK,mBAAmB;CACnD,MAAM,YAAY,UAAU,KAAK,mBAAmB;AAEpD,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EAAU,MAAM;YACd,oBAAC,QAAD,EAAA,UAAS,MAAc,CAAA;EACd,CAAA,EACX,oBAAC,UAAD;EAAU,MAAM;YACd,oBAAC,SAAD,EAAA,UACE,oBAAC,QAAD,EAAA,UAAS,OAAe,CAAA,EAClB,CAAA;EACC,CAAA,CACV,EAAA,CAAA;;AAIP,MAAa,qBAAqB,EAAE,MAAM,OAAO,GAAG,aAClD,oBAAC,iBAAD;CAAiB,GAAI;WACnB,oBAAC,WAAD;EAAiB;EAAa;EAAS,CAAA;CACvB,CAAA"}

package/dist/PageLayout.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as Container, r as Section, t as Backdrop } from "./PageLayout-DfAbeFIh.mjs";
+import { n as Container, r as Section, t as Backdrop } from "./PageLayout-B_LKPZD8.mjs";
 export { Backdrop, Container, Section };

package/dist/{PageLayoutFrame-CQLREOBH.d.mts → PageLayoutFrame-uf17F41p.d.mts} RENAMED Viewed

@@ -25,4 +25,4 @@ declare const PageLayoutFrame: ({
 }) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { PageLayoutFrame as n, PageLayoutWidth as r, PageLayoutChromeProps as t };
-//# sourceMappingURL=PageLayoutFrame-CQLREOBH.d.mts.map
+//# sourceMappingURL=PageLayoutFrame-uf17F41p.d.mts.map